Spinner css vars naming changes

CianciarusoCataldo · Jul 24, 2024 · 0da317a · 0da317a
1 parent 8ae47b5
commit 0da317a
Show file tree

Hide file tree

Showing 9 changed files with 181 additions and 205 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -46,10 +46,13 @@
   - `arrow` instead of `arrow-color`
   - `icon` instead of `icon-color`
   - `text` instead of `text-color`
-  - `link-text` instead of `link-color`
-  - `x` instead of `x-color`
-  - `thumb` instead of `thumb-color`
-  - `tick` instead of `tick-color`
+  - `link-text` instead of `link-color` (for `Link` component)
+  - `x` instead of `x-color` (for `DismissableCard` and `Modal` components)
+  - `thumb` instead of `thumb-color` (for `Slider` component)
+  - `tick` instead of `tick-color` (for `CheckBox` component)
+  - `error` instead of `error-color` (for `Spinner` component)
+  - `loading` instead of `loading-color` (for `Spinner` component)
+  - `success` instead of `success-color` (for `Spinner` component)
 
 <br>
 

diff --git a/docs-gen/components/atoms/Spinner/css-vars.json b/docs-gen/components/atoms/Spinner/css-vars.json
@@ -1,41 +1,41 @@
 {
-  "--mbx-spinner-success-color": {
-    "description": "Fallback value for `--mbx-spinner-success-color-light` and `--mbx-spinner-success-color-dark`"
+  "--mbx-spinner-success": {
+    "description": "Fallback value for `--mbx-spinner-success-light` and `--mbx-spinner-success-dark`"
   },
-  "--mbx-spinner-success-color-light": {
+  "--mbx-spinner-success-light": {
     "description": "Spinner success color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `off`",
     "default": "#05bc29",
-    "fallback": "--mbx-spinner-success-color"
+    "fallback": "--mbx-spinner-success"
   },
-  "--mbx-spinner-success-color-dark": {
+  "--mbx-spinner-success-dark": {
     "description": "Spinner success color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `on`",
     "default": "#05bc29",
-    "fallback": "--mbx-spinner-success-color"
+    "fallback": "--mbx-spinner-success"
   },
-  "--mbx-spinner-error-color": {
-    "description": "Fallback value for `--mbx-spinner-error-color-light` and `--mbx-spinner-error-color-dark`"
+  "--mbx-spinner-error": {
+    "description": "Fallback value for `--mbx-spinner-error-light` and `--mbx-spinner-error-dark`"
   },
-  "--mbx-spinner-error-color-light": {
+  "--mbx-spinner-error-light": {
     "description": "Spinner error color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `off`",
     "default": "#ff0000",
-    "fallback": "--mbx-spinner-error-color"
+    "fallback": "--mbx-spinner-error"
   },
-  "--mbx-spinner-error-color-dark": {
+  "--mbx-spinner-error-dark": {
     "description": "Spinner error color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `on`",
     "default": "#ff0000",
-    "fallback": "--mbx-spinner-error-color"
+    "fallback": "--mbx-spinner-error"
   },
-  "--mbx-spinner-loading-color": {
-    "description": "Fallback value for `--mbx-spinner-loading-color-light` and `--mbx-spinner-loading-color-dark`"
+  "--mbx-spinner-loading": {
+    "description": "Fallback value for `--mbx-spinner-loading-light` and `--mbx-spinner-loading-dark`"
   },
-  "--mbx-spinner-loading-color-light": {
+  "--mbx-spinner-loading-light": {
     "description": "Spinner loading color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `off`",
     "default": "#202020",
-    "fallback": "--mbx-spinner-loading-color"
+    "fallback": "--mbx-spinner-loading"
   },
-  "--mbx-spinner-loading-color-dark": {
+  "--mbx-spinner-loading-dark": {
     "description": "Spinner loading color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `on`",
     "default": "#202020",
-    "fallback": "--mbx-spinner-loading-color"
+    "fallback": "--mbx-spinner-loading"
   }
 }
diff --git a/docs/components/atoms/Spinner/css-vars.md b/docs/components/atoms/Spinner/css-vars.md
@@ -11,43 +11,43 @@
 
 <br>
 
-| <div style='text-align:center;margin:auto;'>Css variable</div>                                                           | <div style='text-align:center;margin:auto;'>Fallback</div>                                                   | <div style='text-align:center;margin:auto;'>Default</div> |
-| ------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success-color](#-mbx-spinner-success-color)</div>             | <div style='text-align:center;margin:auto;'>/</div>                                                          | <div style='text-align:center;margin:auto;'>/</div>       |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success-color-light](#-mbx-spinner-success-color-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-spinner-success-color](#-mbx-spinner-success-color)</div> | <div style='text-align:center;margin:auto;'>#05bc29</div> |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success-color-dark](#-mbx-spinner-success-color-dark)</div>   | <div style='text-align:center;margin:auto;'>[--mbx-spinner-success-color](#-mbx-spinner-success-color)</div> | <div style='text-align:center;margin:auto;'>#05bc29</div> |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error-color](#-mbx-spinner-error-color)</div>                 | <div style='text-align:center;margin:auto;'>/</div>                                                          | <div style='text-align:center;margin:auto;'>/</div>       |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error-color-light](#-mbx-spinner-error-color-light)</div>     | <div style='text-align:center;margin:auto;'>[--mbx-spinner-error-color](#-mbx-spinner-error-color)</div>     | <div style='text-align:center;margin:auto;'>#ff0000</div> |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error-color-dark](#-mbx-spinner-error-color-dark)</div>       | <div style='text-align:center;margin:auto;'>[--mbx-spinner-error-color](#-mbx-spinner-error-color)</div>     | <div style='text-align:center;margin:auto;'>#ff0000</div> |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading-color](#-mbx-spinner-loading-color)</div>             | <div style='text-align:center;margin:auto;'>/</div>                                                          | <div style='text-align:center;margin:auto;'>/</div>       |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading-color-light](#-mbx-spinner-loading-color-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading-color](#-mbx-spinner-loading-color)</div> | <div style='text-align:center;margin:auto;'>#202020</div> |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading-color-dark](#-mbx-spinner-loading-color-dark)</div>   | <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading-color](#-mbx-spinner-loading-color)</div> | <div style='text-align:center;margin:auto;'>#202020</div> |
+| <div style='text-align:center;margin:auto;'>Css variable</div>                                               | <div style='text-align:center;margin:auto;'>Fallback</div>                                       | <div style='text-align:center;margin:auto;'>Default</div> |
+| ------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success](#-mbx-spinner-success)</div>             | <div style='text-align:center;margin:auto;'>/</div>                                              | <div style='text-align:center;margin:auto;'>/</div>       |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success-light](#-mbx-spinner-success-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-spinner-success](#-mbx-spinner-success)</div> | <div style='text-align:center;margin:auto;'>#05bc29</div> |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success-dark](#-mbx-spinner-success-dark)</div>   | <div style='text-align:center;margin:auto;'>[--mbx-spinner-success](#-mbx-spinner-success)</div> | <div style='text-align:center;margin:auto;'>#05bc29</div> |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error](#-mbx-spinner-error)</div>                 | <div style='text-align:center;margin:auto;'>/</div>                                              | <div style='text-align:center;margin:auto;'>/</div>       |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error-light](#-mbx-spinner-error-light)</div>     | <div style='text-align:center;margin:auto;'>[--mbx-spinner-error](#-mbx-spinner-error)</div>     | <div style='text-align:center;margin:auto;'>#ff0000</div> |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error-dark](#-mbx-spinner-error-dark)</div>       | <div style='text-align:center;margin:auto;'>[--mbx-spinner-error](#-mbx-spinner-error)</div>     | <div style='text-align:center;margin:auto;'>#ff0000</div> |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading](#-mbx-spinner-loading)</div>             | <div style='text-align:center;margin:auto;'>/</div>                                              | <div style='text-align:center;margin:auto;'>/</div>       |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading-light](#-mbx-spinner-loading-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading](#-mbx-spinner-loading)</div> | <div style='text-align:center;margin:auto;'>#202020</div> |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading-dark](#-mbx-spinner-loading-dark)</div>   | <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading](#-mbx-spinner-loading)</div> | <div style='text-align:center;margin:auto;'>#202020</div> |
 
 ## CSS Variables list
 
 <br>
 
 <br>
 
-### --mbx-spinner-success-color
+### --mbx-spinner-success
 
 | <div style='text-align:center;margin:auto;'>Fallback</div> | <div style='text-align:center;margin:auto;'>Default</div> |
 | ---------------------------------------------------------- | --------------------------------------------------------- |
 | <div style='text-align:center;margin:auto;'>/</div>        | <div style='text-align:center;margin:auto;'>/</div>       |
 
 <br>
 
-Fallback value for `--mbx-spinner-success-color-light` and `--mbx-spinner-success-color-dark`
+Fallback value for `--mbx-spinner-success-light` and `--mbx-spinner-success-dark`
 
 <br>
 
 <br>
 
-### --mbx-spinner-success-color-light
+### --mbx-spinner-success-light
 
-| <div style='text-align:center;margin:auto;'>Fallback</div>                                                   | <div style='text-align:center;margin:auto;'>Default</div> |
-| ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success-color](#-mbx-spinner-success-color)</div> | <div style='text-align:center;margin:auto;'>#05bc29</div> |
+| <div style='text-align:center;margin:auto;'>Fallback</div>                                       | <div style='text-align:center;margin:auto;'>Default</div> |
+| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success](#-mbx-spinner-success)</div> | <div style='text-align:center;margin:auto;'>#05bc29</div> |
 
 <br>
 
@@ -57,11 +57,11 @@ Spinner success color when [dark mode](https://cianciarusocataldo.github.io/mobr
 
 <br>
 
-### --mbx-spinner-success-color-dark
+### --mbx-spinner-success-dark
 
-| <div style='text-align:center;margin:auto;'>Fallback</div>                                                   | <div style='text-align:center;margin:auto;'>Default</div> |
-| ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success-color](#-mbx-spinner-success-color)</div> | <div style='text-align:center;margin:auto;'>#05bc29</div> |
+| <div style='text-align:center;margin:auto;'>Fallback</div>                                       | <div style='text-align:center;margin:auto;'>Default</div> |
+| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-success](#-mbx-spinner-success)</div> | <div style='text-align:center;margin:auto;'>#05bc29</div> |
 
 <br>
 
@@ -71,25 +71,25 @@ Spinner success color when [dark mode](https://cianciarusocataldo.github.io/mobr
 
 <br>
 
-### --mbx-spinner-error-color
+### --mbx-spinner-error
 
 | <div style='text-align:center;margin:auto;'>Fallback</div> | <div style='text-align:center;margin:auto;'>Default</div> |
 | ---------------------------------------------------------- | --------------------------------------------------------- |
 | <div style='text-align:center;margin:auto;'>/</div>        | <div style='text-align:center;margin:auto;'>/</div>       |
 
 <br>
 
-Fallback value for `--mbx-spinner-error-color-light` and `--mbx-spinner-error-color-dark`
+Fallback value for `--mbx-spinner-error-light` and `--mbx-spinner-error-dark`
 
 <br>
 
 <br>
 
-### --mbx-spinner-error-color-light
+### --mbx-spinner-error-light
 
-| <div style='text-align:center;margin:auto;'>Fallback</div>                                               | <div style='text-align:center;margin:auto;'>Default</div> |
-| -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error-color](#-mbx-spinner-error-color)</div> | <div style='text-align:center;margin:auto;'>#ff0000</div> |
+| <div style='text-align:center;margin:auto;'>Fallback</div>                                   | <div style='text-align:center;margin:auto;'>Default</div> |
+| -------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error](#-mbx-spinner-error)</div> | <div style='text-align:center;margin:auto;'>#ff0000</div> |
 
 <br>
 
@@ -99,11 +99,11 @@ Spinner error color when [dark mode](https://cianciarusocataldo.github.io/mobrix
 
 <br>
 
-### --mbx-spinner-error-color-dark
+### --mbx-spinner-error-dark
 
-| <div style='text-align:center;margin:auto;'>Fallback</div>                                               | <div style='text-align:center;margin:auto;'>Default</div> |
-| -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error-color](#-mbx-spinner-error-color)</div> | <div style='text-align:center;margin:auto;'>#ff0000</div> |
+| <div style='text-align:center;margin:auto;'>Fallback</div>                                   | <div style='text-align:center;margin:auto;'>Default</div> |
+| -------------------------------------------------------------------------------------------- | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-error](#-mbx-spinner-error)</div> | <div style='text-align:center;margin:auto;'>#ff0000</div> |
 
 <br>
 
@@ -113,25 +113,25 @@ Spinner error color when [dark mode](https://cianciarusocataldo.github.io/mobrix
 
 <br>
 
-### --mbx-spinner-loading-color
+### --mbx-spinner-loading
 
 | <div style='text-align:center;margin:auto;'>Fallback</div> | <div style='text-align:center;margin:auto;'>Default</div> |
 | ---------------------------------------------------------- | --------------------------------------------------------- |
 | <div style='text-align:center;margin:auto;'>/</div>        | <div style='text-align:center;margin:auto;'>/</div>       |
 
 <br>
 
-Fallback value for `--mbx-spinner-loading-color-light` and `--mbx-spinner-loading-color-dark`
+Fallback value for `--mbx-spinner-loading-light` and `--mbx-spinner-loading-dark`
 
 <br>
 
 <br>
 
-### --mbx-spinner-loading-color-light
+### --mbx-spinner-loading-light
 
-| <div style='text-align:center;margin:auto;'>Fallback</div>                                                   | <div style='text-align:center;margin:auto;'>Default</div> |
-| ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading-color](#-mbx-spinner-loading-color)</div> | <div style='text-align:center;margin:auto;'>#202020</div> |
+| <div style='text-align:center;margin:auto;'>Fallback</div>                                       | <div style='text-align:center;margin:auto;'>Default</div> |
+| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading](#-mbx-spinner-loading)</div> | <div style='text-align:center;margin:auto;'>#202020</div> |
 
 <br>
 
@@ -141,11 +141,11 @@ Spinner loading color when [dark mode](https://cianciarusocataldo.github.io/mobr
 
 <br>
 
-### --mbx-spinner-loading-color-dark
+### --mbx-spinner-loading-dark
 
-| <div style='text-align:center;margin:auto;'>Fallback</div>                                                   | <div style='text-align:center;margin:auto;'>Default</div> |
-| ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
-| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading-color](#-mbx-spinner-loading-color)</div> | <div style='text-align:center;margin:auto;'>#202020</div> |
+| <div style='text-align:center;margin:auto;'>Fallback</div>                                       | <div style='text-align:center;margin:auto;'>Default</div> |
+| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------- |
+| <div style='text-align:center;margin:auto;'>[--mbx-spinner-loading](#-mbx-spinner-loading)</div> | <div style='text-align:center;margin:auto;'>#202020</div> |
 
 <br>
 

diff --git a/playground/public/docs/Changelog/index.html b/playground/public/docs/Changelog/index.html
@@ -9550,10 +9550,13 @@ <h3 id="400">4.0.0</h3>
 <li><code>arrow</code> instead of <code>arrow-color</code></li>
 <li><code>icon</code> instead of <code>icon-color</code></li>
 <li><code>text</code> instead of <code>text-color</code></li>
-<li><code>link-text</code> instead of <code>link-color</code></li>
-<li><code>x</code> instead of <code>x-color</code></li>
-<li><code>thumb</code> instead of <code>thumb-color</code></li>
-<li><code>tick</code> instead of <code>tick-color</code></li>
+<li><code>link-text</code> instead of <code>link-color</code> (for <code>Link</code> component)</li>
+<li><code>x</code> instead of <code>x-color</code> (for <code>DismissableCard</code> and <code>Modal</code> components)</li>
+<li><code>thumb</code> instead of <code>thumb-color</code> (for <code>Slider</code> component)</li>
+<li><code>tick</code> instead of <code>tick-color</code> (for <code>CheckBox</code> component)</li>
+<li><code>error</code> instead of <code>error-color</code> (for <code>Spinner</code> component)</li>
+<li><code>loading</code> instead of <code>loading-color</code> (for <code>Spinner</code> component)</li>
+<li><code>success</code> instead of <code>success-color</code> (for <code>Spinner</code> component)</li>
 </ul>
 <p><br></p>
 <h3 id="3140">3.14.0</h3>