Skip to content

Commit

Permalink
feat: Add border tokens and use rems for widths (#1147)
Browse files Browse the repository at this point in the history
Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
  • Loading branch information
alimpens and VincentSmedinga authored Mar 29, 2024
1 parent 4068e52 commit d91d889
Showing 22 changed files with 104 additions and 58 deletions.
6 changes: 5 additions & 1 deletion packages/css/src/components/accordion/accordion.scss
Original file line number Diff line number Diff line change
@@ -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;
@@ -44,6 +47,7 @@
}

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

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

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

@mixin reset-button {
border: 0;
}

.ams-button {
border: none;
cursor: var(--ams-button-cursor);
display: inline-flex;
font-family: var(--ams-button-font-family);
@@ -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
}
}

12 changes: 6 additions & 6 deletions packages/css/src/components/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
@@ -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;
@@ -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);
}
}

@@ -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;
}
}

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

@@ -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);
}
}
}
2 changes: 1 addition & 1 deletion packages/css/src/components/fieldset/fieldset.scss
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@
@import "../../common/text-rendering";

@mixin reset {
border: none;
border: 0;
margin-inline: 0;
padding-block: 0;
padding-inline: 0;
6 changes: 3 additions & 3 deletions packages/css/src/components/radio/radio.scss
Original file line number Diff line number Diff line change
@@ -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;
@@ -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 {
@@ -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);
}
}
}
13 changes: 9 additions & 4 deletions packages/css/src/components/search-field/search-field.scss
Original file line number Diff line number Diff line change
@@ -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);
@@ -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);
@@ -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);
@@ -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);
}
2 changes: 1 addition & 1 deletion packages/css/src/components/text-area/text-area.scss
Original file line number Diff line number Diff line change
@@ -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);
2 changes: 1 addition & 1 deletion packages/css/src/components/text-input/text-input.scss
Original file line number Diff line number Diff line change
@@ -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);
12 changes: 12 additions & 0 deletions proprietary/tokens/src/brand/ams/border.tokens.json
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

This file was deleted.

4 changes: 2 additions & 2 deletions proprietary/tokens/src/common/ams/link-appearance.tokens.json
Original file line number Diff line number Diff line change
@@ -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}" }
@@ -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" }
}
},
Original file line number Diff line number Diff line change
@@ -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": {
2 changes: 1 addition & 1 deletion proprietary/tokens/src/components/ams/alert.tokens.json
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}" },
19 changes: 11 additions & 8 deletions proprietary/tokens/src/components/ams/button.tokens.json
Original file line number Diff line number Diff line change
@@ -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": {
8 changes: 6 additions & 2 deletions proprietary/tokens/src/components/ams/checkbox.tokens.json
Original file line number Diff line number Diff line change
@@ -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": {
@@ -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": {
@@ -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}" },
@@ -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}" }
}
}
}
5 changes: 4 additions & 1 deletion proprietary/tokens/src/components/ams/radio.tokens.json
Original file line number Diff line number Diff line change
@@ -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\")"
@@ -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\")"
@@ -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}" }
}
}
}
Original file line number Diff line number Diff line change
@@ -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}" },
@@ -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": {
Loading

0 comments on commit d91d889

Please sign in to comment.