Skip to content

Commit

Permalink
icon instead of icon-color
Browse files Browse the repository at this point in the history
  • Loading branch information
@CianciarusoCataldo
CianciarusoCataldo committed Jul 23, 2024
1 parent deb8560 commit 63c90b2
Show file tree
Hide file tree
Showing 10 changed files with 136 additions and 136 deletions.
24 changes: 12 additions & 12 deletions docs-gen/components/atoms/Password/css-vars.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,30 +51,30 @@
"defaultGlobal": "--mbx-text-color-hover-dark",
"fallback": "--mbx-password-text-color-hover"
},
"--mbx-password-icon-color": {
"description": "Fallback value for `--mbx-password-icon-color-light` and `--mbx-password-icon-color-dark`"
"--mbx-password-icon": {
"description": "Fallback value for `--mbx-password-icon-light` and `--mbx-password-icon-dark`"
},
"--mbx-password-icon-color-light": {
"--mbx-password-icon-light": {
"description": "Password eye icon color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `off`",
"defaultInternal": "--mbx-password-text-color-light",
"fallback": "--mbx-password-icon-color"
"fallback": "--mbx-password-icon"
},
"--mbx-password-icon-color-dark": {
"--mbx-password-icon-dark": {
"description": "Password eye icon color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `on`",
"defaultInternal": "--mbx-password-text-color-dark",
"fallback": "--mbx-password-icon-color"
"fallback": "--mbx-password-icon"
},
"--mbx-password-icon-color-hover": {
"description": "Fallback value for `--mbx-password-icon-color-hover-light` and `--mbx-password-icon-color-hover-dark`"
"--mbx-password-icon-hover": {
"description": "Fallback value for `--mbx-password-icon-hover-light` and `--mbx-password-icon-hover-dark`"
},
"--mbx-password-icon-color-hover-light": {
"--mbx-password-icon-hover-light": {
"description": "Password eye icon color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `off`, on [hover](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#hover)",
"defaultInternal": "--mbx-password-text-color-light",
"fallback": "--mbx-password-icon-color-hover"
"fallback": "--mbx-password-icon-hover"
},
"--mbx-password-icon-color-hover-dark": {
"--mbx-password-icon-hover-dark": {
"description": "Password eye icon color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `on`, on [hover](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#hover)",
"defaultInternal": "--mbx-password-text-color-dark",
"fallback": "--mbx-password-icon-color-hover"
"fallback": "--mbx-password-icon-hover"
}
}
10 changes: 5 additions & 5 deletions docs-gen/components/molecules/Review/css-vars.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,17 @@
"defaultGlobal": "--mbx-text-color-dark",
"fallback": "--mbx-review-text-color"
},
"--mbx-review-icon-color": {
"--mbx-review-icon": {
"description": "Fallback value for `--mbx-review-github-color-light` and `--mbx-review-github-color-dark`"
},
"--mbx-review-icon-color-light": {
"--mbx-review-icon-light": {
"description": "Review icon icon color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `on`",
"defaultColor": "#615f5f",
"fallback": "--mbx-review-icon-color"
"fallback": "--mbx-review-icon"
},
"--mbx-review-icon-color-dark": {
"--mbx-review-icon-dark": {
"description": "Review icon icon color when [dark mode](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/props/#dark) is `off`",
"defaultColor": "white",
"fallback": "--mbx-review-icon-color"
"fallback": "--mbx-review-icon"
}
}
52 changes: 26 additions & 26 deletions docs/components/atoms/Password/css-vars.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@
| <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-hover](#-mbx-password-text-color-hover)</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-password-text-color-hover-light](#-mbx-password-text-color-hover-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-hover](#-mbx-password-text-color-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-text-color-hover-light](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/css-vars/#-mbx-text-color-hover-light)</div> |
| <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-hover-dark](#-mbx-password-text-color-hover-dark)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-hover](#-mbx-password-text-color-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-text-color-hover-dark](https://cianciarusocataldo.github.io/mobrix-ui/docs/shared/css-vars/#-mbx-text-color-hover-dark)</div> |
| <div style='text-align:center;margin:auto;'>[--mbx-password-icon-color](#-mbx-password-icon-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-password-icon-color-light](#-mbx-password-icon-color-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-icon-color](#-mbx-password-icon-color)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-light](#-mbx-password-text-color-light)</div> |
| <div style='text-align:center;margin:auto;'>[--mbx-password-icon-color-dark](#-mbx-password-icon-color-dark)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-icon-color](#-mbx-password-icon-color)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-dark](#-mbx-password-text-color-dark)</div> |
| <div style='text-align:center;margin:auto;'>[--mbx-password-icon-color-hover](#-mbx-password-icon-color-hover)</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-password-icon-color-hover-light](#-mbx-password-icon-color-hover-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-icon-color-hover](#-mbx-password-icon-color-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-light](#-mbx-password-text-color-light)</div> |
| <div style='text-align:center;margin:auto;'>[--mbx-password-icon-color-hover-dark](#-mbx-password-icon-color-hover-dark)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-icon-color-hover](#-mbx-password-icon-color-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-dark](#-mbx-password-text-color-dark)</div> |
| <div style='text-align:center;margin:auto;'>[--mbx-password-icon](#-mbx-password-icon)</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-password-icon-light](#-mbx-password-icon-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-icon](#-mbx-password-icon)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-light](#-mbx-password-text-color-light)</div> |
| <div style='text-align:center;margin:auto;'>[--mbx-password-icon-dark](#-mbx-password-icon-dark)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-icon](#-mbx-password-icon)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-dark](#-mbx-password-text-color-dark)</div> |
| <div style='text-align:center;margin:auto;'>[--mbx-password-icon-hover](#-mbx-password-icon-hover)</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-password-icon-hover-light](#-mbx-password-icon-hover-light)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-icon-hover](#-mbx-password-icon-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-light](#-mbx-password-text-color-light)</div> |
| <div style='text-align:center;margin:auto;'>[--mbx-password-icon-hover-dark](#-mbx-password-icon-hover-dark)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-icon-hover](#-mbx-password-icon-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-dark](#-mbx-password-text-color-dark)</div> |

## CSS Variables list

Expand Down Expand Up @@ -206,25 +206,25 @@ Password text color when [dark mode](https://cianciarusocataldo.github.io/mobrix

<br>

### --mbx-password-icon-color
### --mbx-password-icon

| <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-password-icon-color-light` and `--mbx-password-icon-color-dark`
Fallback value for `--mbx-password-icon-light` and `--mbx-password-icon-dark`

<br>

<br>

### --mbx-password-icon-color-light
### --mbx-password-icon-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-password-icon-color](#-mbx-password-icon-color)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-light](#-mbx-password-text-color-light)</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-password-icon](#-mbx-password-icon)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-light](#-mbx-password-text-color-light)</div> |

<br>

Expand All @@ -234,11 +234,11 @@ Password eye icon color when [dark mode](https://cianciarusocataldo.github.io/mo

<br>

### --mbx-password-icon-color-dark
### --mbx-password-icon-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-password-icon-color](#-mbx-password-icon-color)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-dark](#-mbx-password-text-color-dark)</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-password-icon](#-mbx-password-icon)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-dark](#-mbx-password-text-color-dark)</div> |

<br>

Expand All @@ -248,25 +248,25 @@ Password eye icon color when [dark mode](https://cianciarusocataldo.github.io/mo

<br>

### --mbx-password-icon-color-hover
### --mbx-password-icon-hover

| <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-password-icon-color-hover-light` and `--mbx-password-icon-color-hover-dark`
Fallback value for `--mbx-password-icon-hover-light` and `--mbx-password-icon-hover-dark`

<br>

<br>

### --mbx-password-icon-color-hover-light
### --mbx-password-icon-hover-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-password-icon-color-hover](#-mbx-password-icon-color-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-light](#-mbx-password-text-color-light)</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-password-icon-hover](#-mbx-password-icon-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-light](#-mbx-password-text-color-light)</div> |

<br>

Expand All @@ -276,11 +276,11 @@ Password eye icon color when [dark mode](https://cianciarusocataldo.github.io/mo

<br>

### --mbx-password-icon-color-hover-dark
### --mbx-password-icon-hover-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-password-icon-color-hover](#-mbx-password-icon-color-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-dark](#-mbx-password-text-color-dark)</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-password-icon-hover](#-mbx-password-icon-hover)</div> | <div style='text-align:center;margin:auto;'>[--mbx-password-text-color-dark](#-mbx-password-text-color-dark)</div> |

<br>

Expand Down
Loading

0 comments on commit 63c90b2

Please sign in to comment.