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.

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!: Merge ‘stack’ and ‘inside’ space categories and update components #1267

Merged
merged 27 commits into from
Jun 28, 2024
Merged
Changes from 1 commit
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
4f8bb39
Fix typo in Grid Space value
VincentSmedinga Jun 5, 2024
852b5f0
Update values for Stack and Inside Space
VincentSmedinga Jun 5, 2024
89eae94
Merge stack and inside space
VincentSmedinga Jun 11, 2024
a245787
Specify static units before dynamic ones
VincentSmedinga Jun 18, 2024
97e837e
Make paddings, margins and gaps consistent everywhere
VincentSmedinga Jun 18, 2024
7d55e33
Add space between Alert Heading and Body
VincentSmedinga Jun 18, 2024
ddb9ecf
Remove font fallback
VincentSmedinga Jun 18, 2024
0c10e72
Add token for gap between Tab List and Panel
VincentSmedinga Jun 18, 2024
c3b9f02
Fix JSON indentation
VincentSmedinga Jun 18, 2024
d531d88
Use Grid Space for vertical padding of Header
VincentSmedinga Jun 18, 2024
4316125
Randomize texts for Accordion Headings
VincentSmedinga Jun 18, 2024
d9d9452
Make explicit that wrapping button labels are fine
VincentSmedinga Jun 18, 2024
23ba973
Replace some local lengths with tokens
VincentSmedinga Jun 19, 2024
9692ec5
Merge branch 'develop' into feature/DES-727-spacious-space-tokens
VincentSmedinga Jun 21, 2024
640eb54
Fix spacious token docs, remove compact for now
VincentSmedinga Jun 21, 2024
92ddabe
Improve token name for card heading group
VincentSmedinga Jun 23, 2024
e8faf03
Fix function name
VincentSmedinga Jun 23, 2024
527cf61
Force Spacious Mode for website examples
VincentSmedinga Jun 24, 2024
be46ab6
Merge branch 'develop' into feature/DES-727-spacious-space-tokens
RubenSibon Jun 26, 2024
4f2c328
Merge branch 'develop' into feature/DES-727-spacious-space-tokens
VincentSmedinga Jun 27, 2024
dd0c871
Apply suggestions from code review
VincentSmedinga Jun 27, 2024
5400b93
Set vertical padding in Alert to medium
VincentSmedinga Jun 28, 2024
9912dbb
Use component space for Header padding
VincentSmedinga Jun 28, 2024
0d18c3b
Use small and medium padding in button-like components
VincentSmedinga Jun 28, 2024
7af86c2
Adhere to editorial guide when writing numbers
VincentSmedinga Jun 28, 2024
88dd0d5
Apply suggestions from code review
VincentSmedinga Jun 28, 2024
ed3aaa9
Merge branch 'develop' into feature/DES-727-spacious-space-tokens
VincentSmedinga Jun 28, 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
Prev Previous commit
Next Next commit
Make paddings, margins and gaps consistent everywhere
VincentSmedinga committed Jun 18, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 97e837ef4ad809b4db1f411c03b4dd9474972973
6 changes: 3 additions & 3 deletions packages/css/src/components/breadcrumb/breadcrumb.scss
Original file line number Diff line number Diff line change
@@ -33,11 +33,11 @@
.ams-breadcrumb__item:not(:last-child)::after {
background-image: var(--ams-breadcrumb-separator-background-image);
background-repeat: no-repeat;
block-size: 1ex;
block-size: var(--ams-breadcrumb-separator-block-size);
content: "";
display: inline-block;
inline-size: 1ex;
margin-inline: 0.5rem;
inline-size: var(--ams-breadcrumb-separator-inline-size);
margin-inline: var(--ams-breadcrumb-separator-margin-inline);
}

.ams-breadcrumb__link {
4 changes: 2 additions & 2 deletions packages/css/src/components/card/card.scss
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@

.ams-card {
display: grid;
gap: 0.5rem;
gap: var(--ams-card-gap);
outline-offset: var(--ams-card-outline-offset);
position: relative;
touch-action: manipulation;
@@ -40,7 +40,7 @@
.ams-card__heading-group {
display: flex;
flex-direction: column-reverse;
gap: 0.5rem;
gap: var(--ams-card-hgroup-gap);
alimpens marked this conversation as resolved.
Show resolved Hide resolved
}

.ams-card__link {
2 changes: 1 addition & 1 deletion packages/css/src/components/checkbox/checkbox.scss
Original file line number Diff line number Diff line change
@@ -40,7 +40,7 @@
font-family: var(--ams-checkbox-font-family);
font-size: var(--ams-checkbox-font-size);
font-weight: var(--ams-checkbox-font-weight);
gap: 0.5rem;
gap: var(--ams-checkbox-gap);
line-height: var(--ams-checkbox-line-height);
outline-offset: var(--ams-checkbox-outline-offset);

2 changes: 1 addition & 1 deletion packages/css/src/components/pagination/pagination.scss
Original file line number Diff line number Diff line change
@@ -37,7 +37,7 @@

cursor: pointer;
display: flex;
gap: 0.5rem;
gap: var(--ams-pagination-button-gap);
outline-offset: var(--ams-pagination-button-outline-offset);
padding-inline: var(--ams-pagination-button-padding-inline);
text-decoration-line: var(--ams-pagination-button-text-decoration-line);
2 changes: 1 addition & 1 deletion packages/css/src/components/radio/radio.scss
Original file line number Diff line number Diff line change
@@ -41,7 +41,7 @@
font-family: var(--ams-radio-font-family);
font-size: var(--ams-radio-font-size);
font-weight: var(--ams-radio-font-weight);
gap: 0.5rem;
gap: var(--ams-radio-gap);
line-height: var(--ams-radio-line-height);
outline-offset: var(--ams-radio-outline-offset);

6 changes: 3 additions & 3 deletions proprietary/tokens/src/components/ams/accordion.tokens.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"ams": {
"accordion": {
"gap": { "value": "{ams.space.xs}" },
"gap": { "value": "{ams.space.md}" },
"button": {
"color": { "value": "{ams.color.primary-blue}" },
"font-family": { "value": "{ams.text.font-family}" },
"font-size": { "value": "{ams.text.level.5.font-size}" },
"font-weight": { "value": "{ams.text.font-weight.bold}" },
"gap": { "value": "{ams.space.md}" },
"gap": { "value": "{ams.space.sm}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "0" },
@@ -19,7 +19,7 @@
}
},
"panel": {
"padding-block": { "value": "0 {ams.space.md}" },
"padding-block": { "value": "0" },
alimpens marked this conversation as resolved.
Show resolved Hide resolved
"padding-inline": { "value": "0" }
}
}
4 changes: 2 additions & 2 deletions proprietary/tokens/src/components/ams/alert.tokens.json
Original file line number Diff line number Diff line change
@@ -3,8 +3,8 @@
"alert": {
"border-width": { "value": "{ams.border.width.xl}" },
"border-style": { "value": "solid" },
"gap": { "value": "1rem" },
"padding-block": { "value": "{ams.space.md}" },
"gap": { "value": "{ams.space.sm}" },
"padding-block": { "value": "{ams.space.lg}" },
alimpens marked this conversation as resolved.
Show resolved Hide resolved
"padding-inline": { "value": "{ams.space.lg}" },
"error": {
"border-color": { "value": "{ams.color.primary-red}" }
4 changes: 2 additions & 2 deletions proprietary/tokens/src/components/ams/avatar.tokens.json
Original file line number Diff line number Diff line change
@@ -6,8 +6,8 @@
"font-size": { "value": "{ams.text.level.6.font-size}" },
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"line-height": { "value": "{ams.text.level.6.line-height}" },
"padding-block": { "value": "0.25rem" },
"padding-inline": { "value": "0.25rem" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-inline": { "value": "{ams.space.xs}" },
"black": {
"background-color": { "value": "{ams.color.primary-black}" },
"color": { "value": "{ams.color.primary-white}" }
Original file line number Diff line number Diff line change
@@ -8,7 +8,10 @@
"separator": {
"background-image": {
"value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23000000' fill-rule='evenodd' d='m9.757 32-2.9-2.91L19.937 16 6.857 2.91 9.757 0l16 16z'/></svg>\")"
}
},
"block-size": { "value": "1ex" },
"inline-size": { "value": "1ex" },
"margin-inline": { "value": "{ams.space.xs}" }
},
"link": {
"color": { "value": "{ams.link-appearance.color}" },
6 changes: 3 additions & 3 deletions proprietary/tokens/src/components/ams/button.tokens.json
Original file line number Diff line number Diff line change
@@ -5,10 +5,10 @@
"font-family": { "value": "{ams.text.font-family}" },
"font-size": { "value": "{ams.text.level.5.font-size}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"gap": { "value": "1rem" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-inline": { "value": "{ams.space.md}" },
"gap": { "value": "{ams.space.sm}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.lg}" },
"disabled": {
"cursor": { "value": "{ams.action.disabled.cursor}" }
},
4 changes: 4 additions & 0 deletions proprietary/tokens/src/components/ams/card.tokens.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
{
"ams": {
"card": {
"gap": { "value": "{ams.space.sm}" },
"hgroup": {
"gap": { "value": "{ams.space.sm}" }
},
"link": {
"color": { "value": "{ams.link-appearance.color}" },
"text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
"font-family": { "value": "{ams.text.font-family}" },
"font-size": { "value": "{ams.text.level.5.font-size}" },
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"gap": { "value": "{ams.space.sm}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"checkmark": {
Original file line number Diff line number Diff line change
@@ -9,8 +9,8 @@
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-inline": { "value": "{ams.space.lg}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.md}" },
"calender-picker-indicator": {
"background-image": {
"value": "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23004699'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>\")"
Original file line number Diff line number Diff line change
@@ -5,15 +5,15 @@
"font-family": { "value": "{ams.text.font-family}" },
"font-size": { "value": "{ams.text.level.5.font-size}" },
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"gap": { "value": "{ams.space.md}" },
"gap": { "value": "{ams.space.sm}" },
"inverse-color": { "value": "{ams.color.primary-white}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"row": {
"gap": { "value": "{ams.space.md}" }
"gap": { "value": "{ams.space.sm}" }
},
"details": {
"font-weight": { "value": "{ams.text.font-weight.bold}" },
"padding-inline-start": { "value": "{ams.space.xl}" }
"padding-inline-start": { "value": "{ams.space.lg}" }
}
}
}
10 changes: 5 additions & 5 deletions proprietary/tokens/src/components/ams/dialog.tokens.json
Original file line number Diff line number Diff line change
@@ -5,16 +5,16 @@
"border": { "value": "0" },
"max-inline-size": { "value": "min(87.69vw, 45rem)" },
alimpens marked this conversation as resolved.
Show resolved Hide resolved
"form": {
"gap": { "value": "1.5rem" },
"padding-block": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
"padding-inline": { "value": "clamp(1.5rem, calc(1.5rem + ((1vw - 0.5337rem) * 2.1448)), 2.5rem)" },
"gap": { "value": "{ams.space.md}" },
"padding-block": { "value": "{ams.space.grid.md}" },
"padding-inline": { "value": "{ams.space.grid.lg}" },
"max-block-size": { "value": "75vh" }
},
"header": {
"gap": { "value": "1rem" }
"gap": { "value": "{ams.space.md}" }
},
"footer": {
"gap": { "value": "1rem" }
"gap": { "value": "{ams.space.md}" }
}
}
}
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@
"color": { "value": "{ams.color.primary-blue}" },
"cursor": { "value": "{ams.action.activate.cursor}" },
"margin-inline-end": { "value": "{ams.space.md}" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.md}" },
alimpens marked this conversation as resolved.
Show resolved Hide resolved
"hover": {
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" },
4 changes: 2 additions & 2 deletions proprietary/tokens/src/components/ams/link-list.tokens.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"ams": {
"link-list": {
"gap": { "value": "0.5em" },
"gap": { "value": "{ams.space.sm}" },
"link": {
"color": { "value": "{ams.link-appearance.color}" },
"font-family": { "value": "{ams.text.font-family}" },
"font-size": { "value": "{ams.text.level.5.font-size}" },
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"gap": { "value": "0.5em" },
"gap": { "value": "{ams.space.sm}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
Original file line number Diff line number Diff line change
@@ -7,7 +7,7 @@
"comment": "Must have the same value as `ams.grid.column-gap`."
},
"column-width": { "value": "20rem" },
"padding-block-start": { "value": "1rem" },
"padding-block-start": { "value": "{ams.space.md}" },
"padding-block-end": {
"value": "{ams.space.grid.md}",
"comment": "Must have the same value as `ams.grid.row-gap.md`."
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
"font-family": { "value": "{ams.text.font-family}" },
"font-size": { "value": "{ams.text.level.5.font-size}" },
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"gap": { "value": "0.75rem" },
"gap": { "value": "{ams.space.sm}" },
"inverse-color": { "value": "{ams.color.primary-white}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"list-style-type": { "value": "decimal" },
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
"font-family": { "value": "{ams.text.font-family}" },
"font-size": { "value": "{ams.text.level.6.font-size}" },
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"gap": { "value": "0.5rem" },
"gap": { "value": "{ams.space.sm}" },
"line-height": { "value": "{ams.text.level.6.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"button": {
"gap": { "value": "{ams.space.xs}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-inline": { "value": "{ams.space.sm}" },
"text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" },
1 change: 1 addition & 0 deletions proprietary/tokens/src/components/ams/radio.tokens.json
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@
"font-family": { "value": "{ams.text.font-family}" },
"font-size": { "value": "{ams.text.level.5.font-size}" },
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"gap": { "value": "{ams.space.sm}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"circle": {
Original file line number Diff line number Diff line change
@@ -5,8 +5,8 @@
"background-color": { "value": "{ams.color.primary-blue}" },
"color": { "value": "{ams.color.primary-white}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-inline": { "value": "{ams.space.xs}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.sm}" },
"hover": {
"background-color": { "value": "{ams.color.dark-blue}" }
}
@@ -22,7 +22,7 @@
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.md}" },
"cancel-button": {
"background-image": {
2 changes: 1 addition & 1 deletion proprietary/tokens/src/components/ams/select.tokens.json
Original file line number Diff line number Diff line change
@@ -13,7 +13,7 @@
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.md} calc(2 * {ams.space.md} + 1em)" },
"disabled": {
"background-image": {
4 changes: 2 additions & 2 deletions proprietary/tokens/src/components/ams/skip-link.tokens.json
Original file line number Diff line number Diff line change
@@ -8,8 +8,8 @@
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"line-height": { "value": "{ams.text.level.6.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-inline": { "value": "{ams.space.md}" },
"padding-block": { "value": "{ams.space.md}" },
"padding-inline": { "value": "{ams.space.lg}" },
alimpens marked this conversation as resolved.
Show resolved Hide resolved
"hover": {
"background-color": { "value": "{ams.color.dark-blue}" }
}
Original file line number Diff line number Diff line change
@@ -18,9 +18,9 @@
}
},
"list": {
"gap": { "value": "{ams.space.md}" },
"gap": { "value": "{ams.space.sm}" },
"list": {
"padding-block-start": { "value": "{ams.space.md}" },
"padding-block-start": { "value": "{ams.space.sm}" },
"padding-inline-start": { "value": "{ams.space.lg}" }
}
},
2 changes: 1 addition & 1 deletion proprietary/tokens/src/components/ams/table.tokens.json
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@
},
"cell": {
"border-block-end": { "value": "{ams.border.width.sm} solid {ams.color.neutral-grey1}" },
"padding-block": { "value": "{ams.space.md}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.md}" }
},
"header-cell": {
4 changes: 2 additions & 2 deletions proprietary/tokens/src/components/ams/tabs.tokens.json
Original file line number Diff line number Diff line change
@@ -13,8 +13,8 @@
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"outline-offset": { "value": "-0.25rem" },
"padding-block": { "value": ".5rem" },
"padding-inline": { "value": "1rem" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.lg}" },
alimpens marked this conversation as resolved.
Show resolved Hide resolved
"hover": {
"color": { "value": "{ams.color.dark-blue}" },
"box-shadow": { "value": "inset 0 -0.125rem 0 0 {ams.color.dark-blue}" }
4 changes: 2 additions & 2 deletions proprietary/tokens/src/components/ams/text-area.tokens.json
Original file line number Diff line number Diff line change
@@ -12,8 +12,8 @@
"value": "calc({ams.text.level.5.line-height} * 1em + 2 * {ams.text-area.padding-block})"
},
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "0.5rem" },
"padding-inline": { "value": "1rem" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.md}" },
"disabled": {
"background-color": { "value": "{ams.color.primary-white}" },
"box-shadow": { "value": "inset 0 0 0 {ams.border.width.sm} {ams.color.neutral-grey2}" },
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.md}" },
"disabled": {
"background-color": { "value": "{ams.color.primary-white}" },
Original file line number Diff line number Diff line change
@@ -9,7 +9,7 @@
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"outline-offset": { "value": "{ams.focus.outline-offset}" },
"padding-block": { "value": "{ams.space.xs}" },
"padding-block": { "value": "{ams.space.sm}" },
"padding-inline": { "value": "{ams.space.md}" },
"calender-picker-indicator": {
"background-image": {
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@
"font-family": { "value": "{ams.text.font-family}" },
"font-size": { "value": "{ams.text.level.5.font-size}" },
"font-weight": { "value": "{ams.text.font-weight.normal}" },
"gap": { "value": "0.75rem" },
"gap": { "value": "{ams.space.sm}" },
"inverse-color": { "value": "{ams.color.primary-white}" },
"line-height": { "value": "{ams.text.level.5.line-height}" },
"list-style-type": { "value": "'\\2022'" },