Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add border tokens and use rems for widths #1147

Merged
merged 11 commits into from
Mar 29, 2024
Merged

feat: Add border tokens and use rems for widths #1147

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
2736cd4
Move border tokens to /brand, convert to rem, add xl
alimpens Mar 27, 2024
a37b897
Implement border width tokens
alimpens Mar 27, 2024
18c5964
Add missing token
alimpens Mar 27, 2024
955f6b2
Fix differences between hidden border rules
alimpens Mar 27, 2024
04a7db3
Add docs
alimpens Mar 27, 2024
67e0acc
Separate width from potential other border tokens
alimpens Mar 27, 2024
c1ddca5
Fix token reference
alimpens Mar 27, 2024
21460d0
Merge branch 'develop' into feat/DES-578-border-tokens
alimpens Mar 27, 2024
4d60583
Update storybook/src/docs/borders.docs.mdx
alimpens Mar 29, 2024
5324d45
Don't explicitly set button border color in forced colors mode
alimpens Mar 29, 2024
883eebf
Move button resets to reset mixins
alimpens Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion packages/css/src/components/accordion/accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,12 @@
margin-inline: 0;
}

.ams-accordion__button {
@mixin reset-button {
background-color: transparent;
border: 0;
}

.ams-accordion__button {
color: var(--ams-accordion-button-color);
cursor: pointer;
display: flex;
Expand Down Expand Up @@ -44,6 +47,7 @@
}

@include text-rendering;
@include reset-button;
}

.ams-accordion__button[aria-expanded="true"] svg {
Expand Down
8 changes: 6 additions & 2 deletions packages/css/src/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,11 @@

@import "../../common/text-rendering";

@mixin reset-button {
border: 0;
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
}

.ams-button {
border: none;
cursor: var(--ams-button-cursor);
display: inline-flex;
font-family: var(--ams-button-font-family);
Expand All @@ -24,11 +27,12 @@
}

@include text-rendering;
@include reset-button;
}

@mixin ams-button-forced-color-mode {
@media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
border: var(--ams-button-forced-color-mode-border); // add border because forced colors changes box-shadow to none
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
}
}

Expand Down
12 changes: 6 additions & 6 deletions packages/css/src/components/checkbox/checkbox.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
background-size: 1rem;
border-color: var(--ams-checkbox-checkmark-border-color);
border-style: solid;
border-width: 0.125rem;
border-width: var(--ams-checkbox-checkmark-border-width);
box-sizing: border-box;
content: "";
height: 1.5rem;
Expand All @@ -47,12 +47,12 @@
&:hover {
color: var(--ams-checkbox-hover-color);
text-decoration-line: underline;
text-decoration-thickness: 0.125rem;
text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
text-underline-offset: 0.375rem;

.ams-checkbox__checkmark::after {
border-color: var(--ams-checkbox-checkmark-hover-border-color);
border-width: 0.1875rem;
border-width: var(--ams-checkbox-checkmark-hover-border-width);
}
}

Expand All @@ -64,7 +64,7 @@
+ .ams-checkbox__label .ams-checkbox__checkmark::after {
background-color: var(--ams-checkbox-checkmark-checked-background-color);
background-image: var(--ams-checkbox-checkmark-checked-background-image);
border: none;
border: 0;
}
}

Expand All @@ -76,7 +76,7 @@
background-position: center;
background-repeat: no-repeat;
background-size: 1rem;
border: none;
border: 0;
}
}

Expand All @@ -96,7 +96,7 @@

.ams-checkbox__checkmark::after {
border-color: var(--ams-checkbox-checkmark-disabled-border-color);
border-width: 0.125rem;
border-width: var(--ams-checkbox-checkmark-disabled-border-width);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion packages/css/src/components/fieldset/fieldset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
@import "../../common/text-rendering";

@mixin reset {
border: none;
border: 0;
margin-inline: 0;
padding-block: 0;
padding-inline: 0;
Expand Down
6 changes: 3 additions & 3 deletions packages/css/src/components/radio/radio.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
border-color: var(--ams-radio-circle-border-color);
border-radius: 100%;
border-style: solid;
border-width: 0.125rem;
border-width: var(--ams-radio-circle-border-width);
box-sizing: border-box;
content: "";
height: 1.5rem;
Expand All @@ -48,7 +48,7 @@
&:hover {
color: var(--ams-radio-hover-color);
text-decoration-line: underline;
text-decoration-thickness: 0.125rem;
text-decoration-thickness: var(--ams-radio-hover-text-decoration-thickness);
text-underline-offset: 0.375rem;

.ams-radio__circle::after {
Expand Down Expand Up @@ -81,7 +81,7 @@

.ams-radio__circle::after {
border-color: var(--ams-radio-circle-disabled-border-color);
border-width: 0.125rem;
border-width: var(--ams-radio-circle-disabled-border-width);
}
}
}
Expand Down
13 changes: 9 additions & 4 deletions packages/css/src/components/search-field/search-field.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@
isolation: isolate; // create new stacking context, so the input’s z-index doesn’t escape the component
}

@mixin reset {
@mixin reset-input {
border: 0;
box-sizing: border-box;
margin-block: 0;
}

.ams-search-field__input {
border: none;
box-shadow: var(--ams-search-field-input-box-shadow);
color: var(--ams-search-field-input-color);
font-family: var(--ams-search-field-input-font-family);
Expand All @@ -30,7 +30,7 @@
width: 100%;

@include text-rendering;
@include reset;
@include reset-input;

&:hover {
box-shadow: var(--ams-search-field-input-hover-box-shadow);
Expand All @@ -54,9 +54,12 @@
width: var(--ams-search-field-input-cancel-button-width);
}

@mixin reset-button {
border: 0;
}

.ams-search-field__button {
background-color: var(--ams-search-field-button-background-color);
border: 0;
color: var(--ams-search-field-button-color);
cursor: pointer;
outline-offset: var(--ams-search-field-button-outline-offset);
Expand All @@ -66,6 +69,8 @@
padding-inline: var(--ams-search-field-button-padding-inline);
touch-action: manipulation;

@include reset-button;

&:hover {
background-color: var(--ams-search-field-button-hover-background-color);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/css/src/components/text-area/text-area.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

.ams-text-area {
border: none;
border: 0;
box-shadow: var(--ams-text-area-box-shadow);
color: var(--ams-text-area-color);
font-family: var(--ams-text-area-font-family);
Expand Down
2 changes: 1 addition & 1 deletion packages/css/src/components/text-input/text-input.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
}

.ams-text-input {
border: none;
border: 0;
box-shadow: var(--ams-text-input-box-shadow);
color: var(--ams-text-input-color);
font-family: var(--ams-text-input-font-family);
Expand Down
12 changes: 12 additions & 0 deletions proprietary/tokens/src/brand/ams/border.tokens.json
View file
Open in desktop
VincentSmedinga marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"ams": {
"border": {
"width": {
"sm": { "value": "0.0625rem" },
"md": { "value": "0.125rem" },
"lg": { "value": "0.1875rem" },
"xl": { "value": "0.25rem" }
}
}
}
}
9 changes: 0 additions & 9 deletions proprietary/tokens/src/common/ams/border.tokens.json
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions proprietary/tokens/src/common/ams/link-appearance.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"ams": {
"link-appearance": {
"color": { "value": "{ams.color.primary-blue}" },
"text-decoration-thickness": { "value": "0.125rem" },
"text-decoration-thickness": { "value": "{ams.border.width.md}" },
"text-underline-offset": { "value": "0.375rem" },
"hover": {
"color": { "value": "{ams.color.dark-blue}" }
Expand All @@ -16,7 +16,7 @@
"regular": {
"text-decoration-line": { "value": "underline" },
"hover": {
"text-decoration-thickness": { "value": "0.1875rem" },
"text-decoration-thickness": { "value": "{ams.border.width.lg}" },
"text-underline-offset": { "value": "0.3125rem" }
}
},
Expand Down
2 changes: 1 addition & 1 deletion proprietary/tokens/src/components/ams/accordion.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"outline-offset": { "value": "{ams.focus.outline-offset}" }
},
"hover": {
"box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey3}" }
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey3}" }
}
},
"panel": {
Expand Down
2 changes: 1 addition & 1 deletion proprietary/tokens/src/components/ams/alert.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"ams": {
"alert": {
"border-width": { "value": "4px" },
"border-width": { "value": "{ams.border.width.xl}" },
"border-style": { "value": "solid" },
"gap": { "value": "1rem" },
"padding-block": { "value": "{ams.space.inside.md}" },
Expand Down
19 changes: 11 additions & 8 deletions proprietary/tokens/src/components/ams/button.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,41 +12,44 @@
"disabled": {
"cursor": { "value": "{ams.action.disabled.cursor}" }
},
"forced-color-mode": {
"border": { "value": "{ams.border.width.md} solid" }
},
"primary": {
"background-color": { "value": "{ams.color.primary-blue}" },
"box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" },
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
"color": { "value": "{ams.color.primary-white}" },
"disabled": {
"background-color": { "value": "{ams.color.neutral-grey2}" },
"box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" }
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" }
},
"hover": {
"background-color": { "value": "{ams.color.dark-blue}" },
"box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" }
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" }
}
},
"secondary": {
"background-color": { "value": "{ams.color.primary-white}" },
"color": { "value": "{ams.color.primary-blue}" },
"box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" },
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" },
"hover": {
"box-shadow": { "value": "inset 0 0 0 3px {ams.color.dark-blue}" },
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" },
"color": { "value": "{ams.color.dark-blue}" }
},
"disabled": {
"background-color": { "value": "{ams.color.primary-white}" },
"box-shadow": { "value": "inset 0 0 0 2px {ams.color.neutral-grey2}" },
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.neutral-grey2}" },
"color": { "value": "{ams.color.neutral-grey2}" }
},
"focus": {
"box-shadow": { "value": "inset 0 0 0 2px {ams.color.primary-blue}" }
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }
}
},
"tertiary": {
"background-color": { "value": "transparent" },
"color": { "value": "{ams.color.primary-blue}" },
"hover": {
"box-shadow": { "value": "inset 0 0 0 2px {ams.color.dark-blue}" },
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.dark-blue}" },
"color": { "value": "{ams.color.dark-blue}" }
},
"disabled": {
Expand Down
8 changes: 6 additions & 2 deletions proprietary/tokens/src/components/ams/checkbox.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"checkmark": {
"border-color": { "value": "{ams.color.primary-blue}" },
"border-width": { "value": "{ams.border.width.md}" },
"checked": {
"background-color": { "value": "{ams.color.primary-blue}" },
"background-image": {
Expand All @@ -20,6 +21,7 @@
},
"disabled": {
"border-color": { "value": "{ams.color.neutral-grey3}" },
"border-width": { "value": "{ams.border.width.md}" },
"checked": {
"background-color": { "value": "{ams.color.neutral-grey3}" },
"hover": {
Expand All @@ -34,7 +36,8 @@
}
},
"hover": {
"border-color": { "value": "{ams.color.dark-blue}" }
"border-color": { "value": "{ams.color.dark-blue}" },
"border-width": { "value": "{ams.border.width.lg}" }
},
"invalid": {
"border-color": { "value": "{ams.color.primary-red}" },
Expand Down Expand Up @@ -68,7 +71,8 @@
"color": { "value": "{ams.color.neutral-grey3}" }
},
"hover": {
"color": { "value": "{ams.color.dark-blue}" }
"color": { "value": "{ams.color.dark-blue}" },
"text-decoration-thickness": { "value": "{ams.border.width.md}" }
}
}
}
Expand Down
5 changes: 4 additions & 1 deletion proprietary/tokens/src/components/ams/radio.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"circle": {
"border-color": { "value": "{ams.color.primary-blue}" },
"border-width": { "value": "{ams.border.width.md}" },
"checked": {
"background-image": {
"value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23004699'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
Expand All @@ -21,6 +22,7 @@
},
"disabled": {
"border-color": { "value": "{ams.color.neutral-grey3}" },
"border-width": { "value": "{ams.border.width.md}" },
"checked": {
"background-image": {
"value": "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='%23767676'%3E%3Ccircle cx='16' cy='16' r='16' /%3E%3C/svg%3E\")"
Expand Down Expand Up @@ -56,7 +58,8 @@
"color": { "value": "{ams.color.neutral-grey3}" }
},
"hover": {
"color": { "value": "{ams.color.dark-blue}" }
"color": { "value": "{ams.color.dark-blue}" },
"text-decoration-thickness": { "value": "{ams.border.width.md}" }
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions proprietary/tokens/src/components/ams/search-field.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
},
"input": {
"box-shadow": {
"value": "inset 0 0 0 1px {ams.color.primary-black}"
"value": "inset 0 0 0 {ams.border.width.sm} {ams.color.primary-black}"
},
"color": { "value": "{ams.color.primary-black}" },
"font-family": { "value": "{ams.text.font-family}" },
Expand All @@ -33,7 +33,7 @@
},
"hover": {
"box-shadow": {
"value": "inset 0 0 0 2px {ams.color.primary-black}"
"value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-black}"
}
},
"placeholder": {
Expand Down
Loading
Loading