diff --git a/src/components/CardSelector/CardSelector.scss b/src/components/CardSelector/CardSelector.scss index c537c726..58ff3478 100644 --- a/src/components/CardSelector/CardSelector.scss +++ b/src/components/CardSelector/CardSelector.scss @@ -1,8 +1,10 @@ +@use "../../tokens/borders/borders" as *; + .moonstone-cardSelector { width: 100%; padding: var(--spacing-small); - border: 1px solid var(--color-gray40); + border: var(--selector-border); border-radius: 2px; background-color: var(--color-white); cursor: pointer; @@ -10,12 +12,12 @@ transition: all 0.2s ease-in-out; &:hover { - border-color: var(--color-gray60); + border: var(--selector-border_hover); box-shadow: 0 1px 6px var(--color-dark20); } &:focus { - border-color: var(--color-accent); + border: var(--selector-border_focus); } } diff --git a/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss b/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss index 76aeb450..ebfea90a 100644 --- a/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss +++ b/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/borders/borders" as *; + .moonstone-emptyCardSelector { gap: var(--spacing-nano); width: 100%; @@ -14,11 +16,11 @@ transition: all 0.2s ease-in-out; &:hover { - border: 1px solid var(--color-gray60); + border: var(--selector-border_hover); } &:focus { - border: 1px solid var(--color-accent); + border: var(--selector-border_focus); } } diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index a4f504cc..9e145dbe 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -1,7 +1,6 @@ @use '../../utils/index' as *; @use "../../tokens/spacings/spacings" as *; - -$border-width: 1px; +@use "../../tokens/borders/borders" as *; .moonstone-dropdown_container { position: relative; @@ -59,7 +58,7 @@ $border-width: 1px; } &.moonstone-opened { - box-shadow: inset 0 0 0 $border-width var(--color-accent); + border: var(--selector-border); } &:hover { @@ -67,8 +66,8 @@ $border-width: 1px; } &:focus { + border: var(--selector-border_focus); outline: none; - box-shadow: inset 0 0 0 $border-width var(--color-accent); } &:not(.moonstone-filled) .moonstone-dropdown_label { @@ -83,13 +82,13 @@ $border-width: 1px; .moonstone-dropdown_outlined { color: var(--color-gray_dark); - box-shadow: inset 0 0 0 $border-width var(--color-gray40); + border: var(--selector-border); &.moonstone-disabled { color: var(--color-gray); - background-color: var(--color-gray_light40); + border: var(--selector-border); - box-shadow: inset 0 0 0 $border-width var(--color-gray40); + background-color: var(--color-gray_light40); } } diff --git a/src/components/Input/BaseInput/BaseInput.scss b/src/components/Input/BaseInput/BaseInput.scss index 000330c3..5b042293 100644 --- a/src/components/Input/BaseInput/BaseInput.scss +++ b/src/components/Input/BaseInput/BaseInput.scss @@ -1,10 +1,9 @@ @use '../../../utils/index'; +@use "../../../tokens/borders/borders" as *; $default-size: 24px; $big-size: 32px; $min-width: 40px; -$border-width: 1px; -$border-style: solid; $border-radius: 2px; .moonstone-baseInput { @@ -25,8 +24,8 @@ $border-radius: 2px; } &.moonstone-outlined { + border: var(--selector-border); border-radius: $border-radius; - box-shadow: inset 0 0 0 $border-width var(--color-gray40); } } @@ -82,7 +81,7 @@ $border-radius: 2px; // Reset Firefox invalid required input style &:invalid { - box-shadow: none; + border: none; } &::placeholder { @@ -101,15 +100,15 @@ $border-radius: 2px; } &:read-only { - box-shadow: none; + border: none; } &:disabled { color: var(--color-gray); - background-color: var(--color-gray_light40); + border: none; - box-shadow: none; + background-color: var(--color-gray_light40); cursor: default; opacity: 1; // Reset iOS opacity diff --git a/src/components/ListSelector/ValueList/ValueList.scss b/src/components/ListSelector/ValueList/ValueList.scss index 250d7615..35bb513f 100644 --- a/src/components/ListSelector/ValueList/ValueList.scss +++ b/src/components/ListSelector/ValueList/ValueList.scss @@ -1,3 +1,5 @@ +@use "../../../tokens/borders/borders" as *; + .moonstone-valueList { flex-grow: 1; height: 300px; @@ -45,7 +47,7 @@ min-width: 200px; padding: var(--spacing-small); - border: 1px solid var(--color-gray40); + border: var(--selector-border); .moonstone-dragging { background-color: var(--color-light); diff --git a/src/globals.scss b/src/globals.scss index 475f3f80..06873c74 100644 --- a/src/globals.scss +++ b/src/globals.scss @@ -7,5 +7,6 @@ @forward 'tokens/spacings/spacings'; @forward 'tokens/colors/colors'; +@forward 'tokens/borders/borders'; @forward 'icons/icons'; diff --git a/src/tokens/borders/_borders.scss b/src/tokens/borders/_borders.scss new file mode 100644 index 00000000..616e2f0c --- /dev/null +++ b/src/tokens/borders/_borders.scss @@ -0,0 +1,8 @@ +@forward '../colors/colors'; + +:root { + --selector-border: solid 1px var(--color-gray40); + --selector-border_hover: solid 1px var(--color-accent); + --selector-border_focus: solid 1px var(--color-accent); + --selector-border_active: solid 1px var(--color-accent); +}