diff --git a/src/components/Badge/Badge.scss b/src/components/Badge/Badge.scss index 8e4479fb..17b40f91 100644 --- a/src/components/Badge/Badge.scss +++ b/src/components/Badge/Badge.scss @@ -12,7 +12,7 @@ height: 20px; padding: var(--spacing-nano); - border-radius: 2rem; + border-radius: var(--radius_rounded); } &.moonstone-badge_accent { diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 139d95c6..7354d574 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -18,7 +18,7 @@ $button-size_big: 32px; font-family: inherit; - border-radius: 4px; + border-radius: var(--radius); outline: none; cursor: pointer; diff --git a/src/components/ButtonGroup/ButtonGroup.scss b/src/components/ButtonGroup/ButtonGroup.scss index 9a8d64a8..ceab6551 100644 --- a/src/components/ButtonGroup/ButtonGroup.scss +++ b/src/components/ButtonGroup/ButtonGroup.scss @@ -7,15 +7,15 @@ } > *:first-child { - border-radius: 4px 0 0 4px; + border-radius: var(--radius) 0 0 var(--radius); } > *:last-child { - border-radius: 0 4px 4px 0; + border-radius: 0 var(--radius) var(--radius) 0; } > *:only-child { - border-radius: 4px; + border-radius: var(--radius); } // Manage separator diff --git a/src/components/CardSelector/CardSelector.scss b/src/components/CardSelector/CardSelector.scss index 046b7dad..4f0d254e 100644 --- a/src/components/CardSelector/CardSelector.scss +++ b/src/components/CardSelector/CardSelector.scss @@ -2,20 +2,20 @@ width: 100%; padding: var(--spacing-small); - border: var(--selector-border); - border-radius: var(--selector-border-radius); + border: var(--border-selector); + border-radius: var(--radius_small); background-color: var(--color-white); cursor: pointer; transition: all 0.2s ease-in-out; &:hover { - border: var(--selector-border_hover); + border: var(--border-selector_hover); box-shadow: 0 1px 6px var(--color-dark20); } &:focus { - border: var(--selector-border_focus); + border: var(--border-selector_focus); } } @@ -55,7 +55,7 @@ margin-right: var(--spacing-small); overflow: hidden; - border-radius: 2px; + border-radius: var(--radius_small); background-color: var(--color-gray_light40); } @@ -83,7 +83,7 @@ color: var(--color-warning); border: 1px solid var(--color-warning); - border-radius: var(--selector-border-radius); + border-radius: var(--radius_small); background-color: var(--color-white); pointer-events: none; diff --git a/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss b/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss index 4119e3c7..98abbdda 100644 --- a/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss +++ b/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss @@ -7,18 +7,18 @@ color: var(--color-dark_plain60); border: 1px dashed var(--color-gray40); - border-radius: var(--selector-border-radius); + border-radius: var(--radius_small); background-color: var(--color-white); cursor: pointer; transition: all 0.2s ease-in-out; &:hover { - border: var(--selector-border_hover); + border: var(--border-selector_hover); } &:focus { - border: var(--selector-border_focus); + border: var(--border-selector_focus); } } diff --git a/src/components/Checkbox/Checkbox.scss b/src/components/Checkbox/Checkbox.scss index 3d39e8c1..ab65bb7a 100644 --- a/src/components/Checkbox/Checkbox.scss +++ b/src/components/Checkbox/Checkbox.scss @@ -43,7 +43,7 @@ $checkbox-sizeBig: 20px; appearance: none; border: none; - border-radius: 2px; + border-radius: var(--radius_small); outline: none; background: transparent; diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss index c298c552..c6eb0a35 100644 --- a/src/components/Dropdown/Dropdown.scss +++ b/src/components/Dropdown/Dropdown.scss @@ -35,7 +35,7 @@ gap: $spacing-icon; padding: var(--spacing-nano) var(--spacing-small); - border-radius: var(--selector-border-radius); + border-radius: var(--radius_small); cursor: pointer; &.moonstone-disabled { @@ -57,7 +57,7 @@ } &.moonstone-opened { - border: var(--selector-border_active); + border: var(--border-selector_active); } &:hover { @@ -65,7 +65,7 @@ } &:focus { - border: var(--selector-border_focus); + border: var(--border-selector_focus); outline: none; } @@ -81,7 +81,7 @@ .moonstone-dropdown_outlined { color: var(--color-gray_dark); - border: var(--selector-border); + border: var(--border-selector); &.moonstone-disabled { color: var(--color-gray); diff --git a/src/components/Input/BaseInput/BaseInput.scss b/src/components/Input/BaseInput/BaseInput.scss index 52c6f367..5db92d89 100644 --- a/src/components/Input/BaseInput/BaseInput.scss +++ b/src/components/Input/BaseInput/BaseInput.scss @@ -22,8 +22,8 @@ $min-width: 40px; } &.moonstone-outlined { - border: var(--selector-border); - border-radius: var(--selector-border-radius); + border: var(--border-selector); + border-radius: var(--radius_small); } } diff --git a/src/components/ListSelector/ValueList/ValueList.scss b/src/components/ListSelector/ValueList/ValueList.scss index 40bbfa6a..184abf50 100644 --- a/src/components/ListSelector/ValueList/ValueList.scss +++ b/src/components/ListSelector/ValueList/ValueList.scss @@ -45,7 +45,7 @@ min-width: 200px; padding: var(--spacing-small); - border: var(--selector-border); + border: var(--border-selector); .moonstone-dragging { background-color: var(--color-light); diff --git a/src/components/Menu/Menu.scss b/src/components/Menu/Menu.scss index c60d84cc..1eb55f0c 100644 --- a/src/components/Menu/Menu.scss +++ b/src/components/Menu/Menu.scss @@ -7,7 +7,7 @@ color: var(--color-gray_dark); - border-radius: 4px; + border-radius: var(--radius); list-style: none; background-color: var(--color-light); diff --git a/src/components/Paper/Paper.scss b/src/components/Paper/Paper.scss index 7b300691..ee3bb690 100644 --- a/src/components/Paper/Paper.scss +++ b/src/components/Paper/Paper.scss @@ -1,5 +1,5 @@ .moonstone-paper { - border-radius: 4px; + border-radius: var(--radius); background-color: var(--color-white); box-shadow: rgba(50, 50, 93, 0.25) 0 2px 5px -1px, rgba(0, 0, 0, 0.3) 0 1px 3px -1px; diff --git a/src/components/Pill/Pill.scss b/src/components/Pill/Pill.scss index 9bfece2c..7ecdd1e2 100644 --- a/src/components/Pill/Pill.scss +++ b/src/components/Pill/Pill.scss @@ -2,7 +2,7 @@ .moonstone-pill { padding: 0 var(--spacing-nano); - border-radius: 2px; + border-radius: var(--radius_small); background-color: var(--color-gray_light40); &.moonstone-pill_reversed { diff --git a/src/components/PrimaryNav/PrimaryNavItem/PrimaryNavItem.scss b/src/components/PrimaryNav/PrimaryNavItem/PrimaryNavItem.scss index fddaab57..3d2b85a3 100644 --- a/src/components/PrimaryNav/PrimaryNavItem/PrimaryNavItem.scss +++ b/src/components/PrimaryNav/PrimaryNavItem/PrimaryNavItem.scss @@ -9,7 +9,7 @@ color: var(--color-light); - border-radius: 2rem; + border-radius: var(--radius_rounded); cursor: pointer; transition: color 0.2s, background-color 0.2s; diff --git a/src/components/Tab/TabItem/TabItem.scss b/src/components/Tab/TabItem/TabItem.scss index 339c69cb..2f4f2b68 100644 --- a/src/components/Tab/TabItem/TabItem.scss +++ b/src/components/Tab/TabItem/TabItem.scss @@ -14,7 +14,7 @@ $big-tab-height: 32px; font-family: inherit; - border-radius: 4px; + border-radius: var(--radius); outline: none; cursor: pointer; diff --git a/src/components/Tag/Tag.scss b/src/components/Tag/Tag.scss index d80d89d7..90a7751b 100644 --- a/src/components/Tag/Tag.scss +++ b/src/components/Tag/Tag.scss @@ -7,7 +7,7 @@ color: var(--color-light); border: none; - border-radius: 4px; + border-radius: var(--radius); background-color: var(--color-accent); cursor: pointer; diff --git a/src/tokens/borders/_borders.scss b/src/tokens/borders/_borders.scss index 4c635571..236eae92 100644 --- a/src/tokens/borders/_borders.scss +++ b/src/tokens/borders/_borders.scss @@ -1,10 +1,9 @@ :root { - --border-radius: 4px; - --border-radius_rounded: 2rem; - --selector-border-radius: 2px; - --selector-border-radius_big: 4px; - --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); + --radius: 4px; + --radius_small: 2px; + --radius_rounded: 2rem; + --border-selector: solid 1px var(--color-gray40); + --border-selector_hover: solid 1px var(--color-accent); + --border-selector_focus: solid 1px var(--color-accent); + --border-selector_active: solid 1px var(--color-accent); }