style: update selectors

peterpeterparker · Mar 25, 2023 · b9807c8 · b9807c8
1 parent 3c30868
commit b9807c8
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 17 deletions.
diff --git a/src/components/plugins/add/add.scss b/src/components/plugins/add/add.scss
@@ -22,10 +22,9 @@ button {
 
   /**
    * @prop --stylo-add-background-color: The background-color of the button
-   * @default 0.2rem
    */
+  background: var(--stylo-add-background);
 
-  background-color: var(--stylo-add-background-color, none);
   /**
    * @prop --stylo-add-border-radius: The border-radius of the button
    * @default 50%
@@ -34,9 +33,9 @@ button {
 
   /**
    * @prop --stylo-add-border: The border of the button
-   * @default none
    */
-  border: var(--stylo-add-border, none);
+  border: var(--stylo-add-border);
+
   /**
    * @prop --stylo-add-size: The size of the button
    * @default 1.4rem
@@ -52,23 +51,22 @@ button {
 
   /**
    * @prop --stylo-add-color: The color of the button
-   * @default 0.2rem
+   * @default var(--medium)
    */
   color: var(--stylo-add-color, var(--medium));
 
   &:hover,
   &:focus {
     /**
    * @prop --stylo-add-color-hover: The hover color of the button
-   * @default 0.2rem
+   * @default var(--light-contrast)
    */
     color: var(--stylo-add-color-hover, var(--light-contrast));
 
     /**
    * @prop --stylo-add-background-color-hover: The hover background-color of the button
-   * @default 0.2rem
    */
-    background-color: var(--stylo-add-background-color-hover, none);
+    background: var(--stylo-add-background-hover);
   }
 }
 

diff --git a/src/components/plugins/add/readme.md b/src/components/plugins/add/readme.md
@@ -12,15 +12,15 @@
 
 ## CSS Custom Properties
 
-| Name                                 | Description                                              |
-| ------------------------------------ | -------------------------------------------------------- |
-| `--stylo-add-background-color`       | The background-color of the button @default 0.2rem       |
-| `--stylo-add-background-color-hover` | The hover background-color of the button @default 0.2rem |
-| `--stylo-add-border`                 | The border of the button @default none                   |
-| `--stylo-add-border-radius`          | The border-radius of the button @default 50%             |
-| `--stylo-add-color`                  | The color of the button @default 0.2rem                  |
-| `--stylo-add-color-hover`            | The hover color of the button @default 0.2rem            |
-| `--stylo-add-size`                   | The size of the button @default 1.4rem                   |
+| Name                                 | Description                                                  |
+| ------------------------------------ | ------------------------------------------------------------ |
+| `--stylo-add-background-color`       | The background-color of the button                           |
+| `--stylo-add-background-color-hover` | The hover background-color of the button                     |
+| `--stylo-add-border`                 | The border of the button                                     |
+| `--stylo-add-border-radius`          | The border-radius of the button @default 50%                 |
+| `--stylo-add-color`                  | The color of the button @default var(--medium)               |
+| `--stylo-add-color-hover`            | The hover color of the button @default var(--light-contrast) |
+| `--stylo-add-size`                   | The size of the button @default 1.4rem                       |
 
 ## Dependencies