diff --git a/packages/css/src/components/alert/alert.scss b/packages/css/src/components/alert/alert.scss index ad2e6f2f1d..47d4d0a207 100644 --- a/packages/css/src/components/alert/alert.scss +++ b/packages/css/src/components/alert/alert.scss @@ -16,7 +16,10 @@ } .ams-alert__content { + display: flex; flex: auto; + flex-direction: column; + gap: var(--ams-alert-content-gap); } .ams-alert--error { diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss index 1a43f4ffd6..562d86fa78 100644 --- a/packages/css/src/components/breadcrumb/breadcrumb.scss +++ b/packages/css/src/components/breadcrumb/breadcrumb.scss @@ -12,7 +12,7 @@ } .ams-breadcrumb { - font-family: var(--ams-breadcrumb-font-family, inherit); + font-family: var(--ams-breadcrumb-font-family); font-size: var(--ams-breadcrumb-font-size); font-weight: var(--ams-breadcrumb-font-weight); line-height: var(--ams-breadcrumb-line-height); @@ -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 { diff --git a/packages/css/src/components/card/card.scss b/packages/css/src/components/card/card.scss index bb9e7e11d6..881b457ab9 100644 --- a/packages/css/src/components/card/card.scss +++ b/packages/css/src/components/card/card.scss @@ -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-heading-group-gap); } .ams-card__link { diff --git a/packages/css/src/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss index c05ba3e980..66faab7d79 100644 --- a/packages/css/src/components/checkbox/checkbox.scss +++ b/packages/css/src/components/checkbox/checkbox.scss @@ -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); diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss index 6eba94626f..fef6b25620 100644 --- a/packages/css/src/components/dialog/dialog.scss +++ b/packages/css/src/components/dialog/dialog.scss @@ -31,7 +31,7 @@ .ams-dialog__article { display: grid; - gap: 1.5rem; /* Until we have a consistent way of spacing text elements */ + gap: var(--ams-space-md); /* Until we have a consistent way of spacing text elements */ max-block-size: 100%; /* safari */ overflow-y: auto; overscroll-behavior-y: contain; diff --git a/packages/css/src/components/file-input/file-input.scss b/packages/css/src/components/file-input/file-input.scss index 77bad81d63..cb90f64ad9 100644 --- a/packages/css/src/components/file-input/file-input.scss +++ b/packages/css/src/components/file-input/file-input.scss @@ -21,7 +21,7 @@ font-weight: var(--ams-file-input-font-weight); line-height: var(--ams-file-input-line-height); max-inline-size: calc(100% - var(--ams-file-input-padding-inline) * 2); - outline-offset: 0.25rem; // Double the default focus outline offset to compensate for the dashed border + outline-offset: calc(var(--ams-focus-outline-offset) * 2); // Compensate for the dashed border padding-block: var(--ams-file-input-padding-block); padding-inline: var(--ams-file-input-padding-inline); touch-action: manipulation; diff --git a/packages/css/src/components/pagination/pagination.scss b/packages/css/src/components/pagination/pagination.scss index be46cfa012..e3da274b77 100644 --- a/packages/css/src/components/pagination/pagination.scss +++ b/packages/css/src/components/pagination/pagination.scss @@ -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); diff --git a/packages/css/src/components/radio/radio.scss b/packages/css/src/components/radio/radio.scss index 54667dd758..69ff49b374 100644 --- a/packages/css/src/components/radio/radio.scss +++ b/packages/css/src/components/radio/radio.scss @@ -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); diff --git a/packages/css/src/components/tabs/tabs.scss b/packages/css/src/components/tabs/tabs.scss index 29913fe2b4..5013182b03 100644 --- a/packages/css/src/components/tabs/tabs.scss +++ b/packages/css/src/components/tabs/tabs.scss @@ -10,6 +10,11 @@ border: 0; } +.ams-tabs { + display: grid; + gap: var(--ams-tabs-gap); +} + .ams-tabs__list { background-color: var(--ams-tabs-list-background-color); border-block-end: var(--ams-tabs-list-border-block-end); diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss index 4273309604..24a7ddc23d 100644 --- a/packages/css/src/components/top-task-link/top-task-link.scss +++ b/packages/css/src/components/top-task-link/top-task-link.scss @@ -10,7 +10,7 @@ break-inside: avoid; display: flex; flex-direction: column; - gap: 0.5rem; + gap: var(--ams-top-task-link-gap); outline-offset: var(--ams-top-task-link-outline-offset); text-decoration: none; } diff --git a/proprietary/tokens/src/brand/ams/space.tokens.json b/proprietary/tokens/src/brand/ams/space.tokens.json index 3912abf291..6c6b142942 100644 --- a/proprietary/tokens/src/brand/ams/space.tokens.json +++ b/proprietary/tokens/src/brand/ams/space.tokens.json @@ -1,29 +1,20 @@ { "ams": { "space": { + "xs": { "value": "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)" }, + "sm": { "value": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)" }, + "md": { "value": "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)" }, + "lg": { "value": "clamp(1.6875rem, 1.5469rem + 0.7031vw, 2.25rem)" }, + "xl": { "value": "clamp(2.25rem, 2.0625rem + 0.9375vw, 3rem)" }, "grid": { - "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" }, - "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" }, + "xs": { "value": "clamp(0.25rem, calc(0.09375rem + 0.78125vw), 0.875rem)" }, + "sm": { "value": "clamp(0.5rem, calc(0.1875rem + 1.5625vw), 1.75rem)" }, "md": { - "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)", + "value": "clamp(1rem, calc(0.375rem + 3.125vw), 3.5rem)", "comment": "Grows from 16px at 320px wide to 56px at 1600px wide." }, - "lg": { "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)" }, - "xl": { "value": "clamp(2rem, calc(6.25vw + 0.75rem), 7rem)" } - }, - "inside": { - "xs": { "value": ".5rem" }, - "sm": { "value": ".75rem" }, - "md": { "value": "1rem" }, - "lg": { "value": "1.5rem" }, - "xl": { "value": "2rem" } - }, - "stack": { - "xs": { "value": ".5rem" }, - "sm": { "value": ".75rem" }, - "md": { "value": "1rem" }, - "lg": { "value": "1.5rem" }, - "xl": { "value": "2rem" } + "lg": { "value": "clamp(1.5rem, calc(0.5625rem + 4.6875vw), 5.25rem)" }, + "xl": { "value": "clamp(2rem, calc(0.75rem + 6.25vw), 7rem)" } } } } diff --git a/proprietary/tokens/src/brand/ams/text.compact.tokens.json b/proprietary/tokens/src/brand/ams/text.compact.tokens.json index 894c645542..8c040a2d2b 100644 --- a/proprietary/tokens/src/brand/ams/text.compact.tokens.json +++ b/proprietary/tokens/src/brand/ams/text.compact.tokens.json @@ -3,25 +3,25 @@ "text": { "level": { "0": { - "font-size": { "value": "clamp(1.891rem, calc(1.927vw + 1.506rem), 3.433rem)" } + "font-size": { "value": "clamp(1.891rem, calc(1.506rem + 1.927vw), 3.433rem)" } }, "1": { - "font-size": { "value": "clamp(1.621rem, calc(1.408vw + 1.34rem), 2.747rem)" } + "font-size": { "value": "clamp(1.621rem, calc(1.34rem + 1.408vw), 2.747rem)" } }, "2": { - "font-size": { "value": "clamp(1.389rem, calc(1.01vw + 1.187rem), 2.197rem)" } + "font-size": { "value": "clamp(1.389rem, calc(1.187rem + 1.01vw), 2.197rem)" } }, "3": { - "font-size": { "value": "clamp(1.191rem, calc(0.709vw + 1.049rem), 1.758rem)" } + "font-size": { "value": "clamp(1.191rem, calc(1.049rem + 0.709vw), 1.758rem)" } }, "4": { - "font-size": { "value": "clamp(1.021rem, calc(0.481vw + 0.925rem), 1.406rem)" } + "font-size": { "value": "clamp(1.021rem, calc(0.925rem + 0.481vw), 1.406rem)" } }, "5": { - "font-size": { "value": "clamp(0.875rem, calc(0.313vw + 0.813rem), 1.125rem)" } + "font-size": { "value": "clamp(0.875rem, calc(0.813rem + 0.313vw), 1.125rem)" } }, "6": { - "font-size": { "value": "clamp(0.75rem, calc(0.188vw + 0.713rem), 0.9rem)" } + "font-size": { "value": "clamp(0.75rem, calc(0.713rem + 0.188vw), 0.9rem)" } } } } diff --git a/proprietary/tokens/src/brand/ams/text.tokens.json b/proprietary/tokens/src/brand/ams/text.tokens.json index 7a1149331c..8fe55897d9 100644 --- a/proprietary/tokens/src/brand/ams/text.tokens.json +++ b/proprietary/tokens/src/brand/ams/text.tokens.json @@ -8,31 +8,31 @@ }, "level": { "0": { - "font-size": { "value": "clamp(2.432rem, calc(2.683vw + 1.895rem), 4.578rem)" }, + "font-size": { "value": "clamp(2.432rem, calc(1.895rem + 2.683vw), 4.578rem)" }, "line-height": { "value": "1.15" } }, "1": { - "font-size": { "value": "clamp(2.084rem, calc(1.973vw + 1.69rem), 3.662rem)" }, + "font-size": { "value": "clamp(2.084rem, calc(1.69rem + 1.973vw), 3.662rem)" }, "line-height": { "value": "1.2" } }, "2": { - "font-size": { "value": "clamp(1.786rem, calc(1.43vw + 1.5rem), 2.93rem)" }, + "font-size": { "value": "clamp(1.786rem, calc(1.5rem + 1.43vw), 2.93rem)" }, "line-height": { "value": "1.25" } }, "3": { - "font-size": { "value": "clamp(1.531rem, calc(1.016vw + 1.328rem), 2.344rem)" }, + "font-size": { "value": "clamp(1.531rem, calc(1.328rem + 1.016vw), 2.344rem)" }, "line-height": { "value": "1.3" } }, "4": { - "font-size": { "value": "clamp(1.313rem, calc(0.703vw + 1.173rem), 1.875rem)" }, + "font-size": { "value": "clamp(1.313rem, calc(1.173rem + 0.703vw), 1.875rem)" }, "line-height": { "value": "1.5" } }, "5": { - "font-size": { "value": "clamp(1.125rem, calc(0.469vw + 1.031rem), 1.5rem)" }, + "font-size": { "value": "clamp(1.125rem, calc(1.031rem + 0.469vw), 1.5rem)" }, "line-height": { "value": "1.6" } }, "6": { - "font-size": { "value": "clamp(0.964rem, calc(0.295vw + 0.905rem), 1.2rem)" }, + "font-size": { "value": "clamp(0.964rem, calc(0.905rem + 0.295vw), 1.2rem)" }, "line-height": { "value": "1.6" } } } diff --git a/proprietary/tokens/src/components/ams/accordion.tokens.json b/proprietary/tokens/src/components/ams/accordion.tokens.json index ce7bed268b..97677d9a27 100644 --- a/proprietary/tokens/src/components/ams/accordion.tokens.json +++ b/proprietary/tokens/src/components/ams/accordion.tokens.json @@ -1,15 +1,15 @@ { "ams": { "accordion": { - "gap": { "value": "{ams.space.inside.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.inside.md}" }, + "gap": { "value": "{ams.space.sm}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, - "padding-block": { "value": "{ams.space.inside.sm}" }, + "padding-block": { "value": "{ams.space.sm}" }, "padding-inline": { "value": "0" }, "focus": { "outline-offset": { "value": "{ams.focus.outline-offset}" } @@ -19,7 +19,7 @@ } }, "panel": { - "padding-block": { "value": "0 {ams.space.inside.md}" }, + "padding-block": { "value": "0" }, "padding-inline": { "value": "0" } } } diff --git a/proprietary/tokens/src/components/ams/alert.tokens.json b/proprietary/tokens/src/components/ams/alert.tokens.json index 9ba890705c..fbf8f1b138 100644 --- a/proprietary/tokens/src/components/ams/alert.tokens.json +++ b/proprietary/tokens/src/components/ams/alert.tokens.json @@ -3,9 +3,9 @@ "alert": { "border-width": { "value": "{ams.border.width.xl}" }, "border-style": { "value": "solid" }, - "gap": { "value": "1rem" }, - "padding-block": { "value": "{ams.space.inside.md}" }, - "padding-inline": { "value": "{ams.space.inside.lg}" }, + "gap": { "value": "{ams.space.sm}" }, + "padding-block": { "value": "{ams.space.md}" }, + "padding-inline": { "value": "{ams.space.lg}" }, "error": { "border-color": { "value": "{ams.color.primary-red}" } }, @@ -23,6 +23,9 @@ "hover": { "fill": { "value": "{ams.color.primary-blue}" } } + }, + "content": { + "gap": { "value": "{ams.space.sm}" } } } } diff --git a/proprietary/tokens/src/components/ams/avatar.tokens.json b/proprietary/tokens/src/components/ams/avatar.tokens.json index 5f0a76ece8..1d9688a5a7 100644 --- a/proprietary/tokens/src/components/ams/avatar.tokens.json +++ b/proprietary/tokens/src/components/ams/avatar.tokens.json @@ -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}" } diff --git a/proprietary/tokens/src/components/ams/badge.tokens.json b/proprietary/tokens/src/components/ams/badge.tokens.json index 7054f6036f..c71242f4f8 100644 --- a/proprietary/tokens/src/components/ams/badge.tokens.json +++ b/proprietary/tokens/src/components/ams/badge.tokens.json @@ -5,7 +5,7 @@ "font-size": { "value": "{ams.text.level.5.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, - "padding-inline": { "value": "{ams.space.inside.xs}" }, + "padding-inline": { "value": "{ams.space.xs}" }, "black": { "background-color": { "value": "{ams.color.primary-black}" }, "color": { "value": "{ams.color.primary-white}" } diff --git a/proprietary/tokens/src/components/ams/breadcrumb.tokens.json b/proprietary/tokens/src/components/ams/breadcrumb.tokens.json index 145aef4413..bb6c679685 100644 --- a/proprietary/tokens/src/components/ams/breadcrumb.tokens.json +++ b/proprietary/tokens/src/components/ams/breadcrumb.tokens.json @@ -8,7 +8,10 @@ "separator": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" - } + }, + "block-size": { "value": "1ex" }, + "inline-size": { "value": "1ex" }, + "margin-inline": { "value": "{ams.space.xs}" } }, "link": { "color": { "value": "{ams.link-appearance.color}" }, diff --git a/proprietary/tokens/src/components/ams/button.tokens.json b/proprietary/tokens/src/components/ams/button.tokens.json index 8a86ccfcd0..539e76c228 100644 --- a/proprietary/tokens/src/components/ams/button.tokens.json +++ b/proprietary/tokens/src/components/ams/button.tokens.json @@ -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.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.md}" }, + "gap": { "value": "{ams.space.sm}" }, "outline-offset": { "value": "{ams.focus.outline-offset}" }, + "padding-block": { "value": "{ams.space.sm}" }, + "padding-inline": { "value": "{ams.space.md}" }, "disabled": { "cursor": { "value": "{ams.action.disabled.cursor}" } }, diff --git a/proprietary/tokens/src/components/ams/card.tokens.json b/proprietary/tokens/src/components/ams/card.tokens.json index 1e5c2adc13..32063dc21b 100644 --- a/proprietary/tokens/src/components/ams/card.tokens.json +++ b/proprietary/tokens/src/components/ams/card.tokens.json @@ -1,6 +1,10 @@ { "ams": { "card": { + "gap": { "value": "{ams.space.sm}" }, + "heading-group": { + "gap": { "value": "{ams.space.sm}" } + }, "link": { "color": { "value": "{ams.link-appearance.color}" }, "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" }, diff --git a/proprietary/tokens/src/components/ams/checkbox.tokens.json b/proprietary/tokens/src/components/ams/checkbox.tokens.json index 260bc1fc1d..688378f65e 100644 --- a/proprietary/tokens/src/components/ams/checkbox.tokens.json +++ b/proprietary/tokens/src/components/ams/checkbox.tokens.json @@ -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": { diff --git a/proprietary/tokens/src/components/ams/date-input.tokens.json b/proprietary/tokens/src/components/ams/date-input.tokens.json index d119b52a57..c461d819ed 100644 --- a/proprietary/tokens/src/components/ams/date-input.tokens.json +++ b/proprietary/tokens/src/components/ams/date-input.tokens.json @@ -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.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.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,\")" diff --git a/proprietary/tokens/src/components/ams/description-list.tokens.json b/proprietary/tokens/src/components/ams/description-list.tokens.json index 9248ca9d8a..a50d5519c8 100644 --- a/proprietary/tokens/src/components/ams/description-list.tokens.json +++ b/proprietary/tokens/src/components/ams/description-list.tokens.json @@ -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.stack.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.stack.md}" } + "gap": { "value": "{ams.space.sm}" } }, "details": { "font-weight": { "value": "{ams.text.font-weight.bold}" }, - "padding-inline-start": { "value": "{ams.space.inside.xl}" } + "padding-inline-start": { "value": "{ams.space.lg}" } } } } diff --git a/proprietary/tokens/src/components/ams/dialog.tokens.json b/proprietary/tokens/src/components/ams/dialog.tokens.json index 61d9ec9b0d..c291fded0b 100644 --- a/proprietary/tokens/src/components/ams/dialog.tokens.json +++ b/proprietary/tokens/src/components/ams/dialog.tokens.json @@ -5,16 +5,16 @@ "border": { "value": "0" }, "max-inline-size": { "value": "min(87.69vw, 45rem)" }, "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}" } } } } diff --git a/proprietary/tokens/src/components/ams/field-set.tokens.json b/proprietary/tokens/src/components/ams/field-set.tokens.json index cd9e5e7393..68b16401dc 100644 --- a/proprietary/tokens/src/components/ams/field-set.tokens.json +++ b/proprietary/tokens/src/components/ams/field-set.tokens.json @@ -2,12 +2,8 @@ "ams": { "field-set": { "invalid": { - "border-inline-start": { - "value": "{ams.border.width.lg} solid {ams.color.primary-red}" - }, - "padding-inline-start": { - "value": "{ams.space.inside.md}" - } + "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" }, + "padding-inline-start": { "value": "{ams.space.md}" } }, "legend": { "color": { "value": "{ams.color.primary-black}" }, @@ -15,7 +11,7 @@ "font-size": { "value": "{ams.text.level.4.font-size}" }, "font-weight": { "value": "{ams.text.font-weight.bold}" }, "line-height": { "value": "{ams.text.level.4.line-height}" }, - "margin-block-end": { "value": "{ams.space.inside.md}" } + "margin-block-end": { "value": "{ams.space.md}" } } } } diff --git a/proprietary/tokens/src/components/ams/field.tokens.json b/proprietary/tokens/src/components/ams/field.tokens.json index 350ba5caad..85fed8fc14 100644 --- a/proprietary/tokens/src/components/ams/field.tokens.json +++ b/proprietary/tokens/src/components/ams/field.tokens.json @@ -1,16 +1,10 @@ { "ams": { "field": { - "gap": { - "value": "{ams.space.stack.sm}" - }, + "gap": { "value": "{ams.space.sm}" }, "invalid": { - "border-inline-start": { - "value": "{ams.border.width.lg} solid {ams.color.primary-red}" - }, - "padding-inline-start": { - "value": "{ams.space.inside.md}" - } + "border-inline-start": { "value": "{ams.border.width.lg} solid {ams.color.primary-red}" }, + "padding-inline-start": { "value": "{ams.space.md}" } } } } diff --git a/proprietary/tokens/src/components/ams/file-input.tokens.json b/proprietary/tokens/src/components/ams/file-input.tokens.json index b0f31f9437..c33573e612 100644 --- a/proprietary/tokens/src/components/ams/file-input.tokens.json +++ b/proprietary/tokens/src/components/ams/file-input.tokens.json @@ -10,8 +10,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.inside.md}" }, - "padding-inline": { "value": "{ams.space.inside.md}" }, + "padding-block": { "value": "{ams.space.md}" }, + "padding-inline": { "value": "{ams.space.md}" }, "disabled": { "color": { "value": "{ams.color.neutral-grey2}" }, "cursor": { "value": "{ams.action.disabled.cursor}" } @@ -21,9 +21,9 @@ "box-shadow": { "value": "inset 0 0 0 {ams.border.width.md} {ams.color.primary-blue}" }, "color": { "value": "{ams.color.primary-blue}" }, "cursor": { "value": "{ams.action.activate.cursor}" }, - "margin-inline-end": { "value": "{ams.space.inside.md}" }, - "padding-block": { "value": "{ams.space.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.md}" }, + "margin-inline-end": { "value": "{ams.space.md}" }, + "padding-block": { "value": "{ams.space.sm}" }, + "padding-inline": { "value": "{ams.space.md}" }, "hover": { "box-shadow": { "value": "inset 0 0 0 {ams.border.width.lg} {ams.color.dark-blue}" }, "color": { "value": "{ams.color.dark-blue}" } diff --git a/proprietary/tokens/src/components/ams/header.tokens.json b/proprietary/tokens/src/components/ams/header.tokens.json index f344570fa3..fe4f70d283 100644 --- a/proprietary/tokens/src/components/ams/header.tokens.json +++ b/proprietary/tokens/src/components/ams/header.tokens.json @@ -5,7 +5,7 @@ "value": "{ams.space.grid.md}", "comment": "Must have the same value as `ams.grid.column-gap`." }, - "padding-block": { "value": "{ams.space.inside.md}" }, + "padding-block": { "value": "{ams.space.md}" }, "logo-link": { "outline-offset": { "value": "{ams.focus.outline-offset}" } } diff --git a/proprietary/tokens/src/components/ams/link-list.tokens.json b/proprietary/tokens/src/components/ams/link-list.tokens.json index 4ee797a87c..49a289ed6e 100644 --- a/proprietary/tokens/src/components/ams/link-list.tokens.json +++ b/proprietary/tokens/src/components/ams/link-list.tokens.json @@ -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}" }, diff --git a/proprietary/tokens/src/components/ams/mega-menu.tokens.json b/proprietary/tokens/src/components/ams/mega-menu.tokens.json index 846a666daa..da54e5b0d4 100644 --- a/proprietary/tokens/src/components/ams/mega-menu.tokens.json +++ b/proprietary/tokens/src/components/ams/mega-menu.tokens.json @@ -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`." diff --git a/proprietary/tokens/src/components/ams/ordered-list.tokens.json b/proprietary/tokens/src/components/ams/ordered-list.tokens.json index 0df97055e0..b57faf22a9 100644 --- a/proprietary/tokens/src/components/ams/ordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/ordered-list.tokens.json @@ -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" }, diff --git a/proprietary/tokens/src/components/ams/page-menu.tokens.json b/proprietary/tokens/src/components/ams/page-menu.tokens.json index efbb7b9f29..0fa9a7ccbf 100644 --- a/proprietary/tokens/src/components/ams/page-menu.tokens.json +++ b/proprietary/tokens/src/components/ams/page-menu.tokens.json @@ -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}" }, diff --git a/proprietary/tokens/src/components/ams/pagination.tokens.json b/proprietary/tokens/src/components/ams/pagination.tokens.json index ca6dcdc2f3..41582d48d9 100644 --- a/proprietary/tokens/src/components/ams/pagination.tokens.json +++ b/proprietary/tokens/src/components/ams/pagination.tokens.json @@ -7,8 +7,9 @@ "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.inside.sm}" }, + "padding-inline": { "value": "{ams.space.sm}" }, "text-decoration-line": { "value": "{ams.link-appearance.subtle.text-decoration-line}" }, "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" }, "text-underline-offset": { "value": "{ams.link-appearance.text-underline-offset}" }, diff --git a/proprietary/tokens/src/components/ams/radio.tokens.json b/proprietary/tokens/src/components/ams/radio.tokens.json index d65f0ed386..f704b39a77 100644 --- a/proprietary/tokens/src/components/ams/radio.tokens.json +++ b/proprietary/tokens/src/components/ams/radio.tokens.json @@ -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": { diff --git a/proprietary/tokens/src/components/ams/row.tokens.json b/proprietary/tokens/src/components/ams/row.tokens.json index f445a0ccd5..cde8f2fa62 100644 --- a/proprietary/tokens/src/components/ams/row.tokens.json +++ b/proprietary/tokens/src/components/ams/row.tokens.json @@ -2,11 +2,11 @@ "ams": { "row": { "gap": { - "xs": { "value": "{ams.space.stack.xs}" }, - "sm": { "value": "{ams.space.stack.sm}" }, - "md": { "value": "{ams.space.stack.md}" }, - "lg": { "value": "{ams.space.stack.lg}" }, - "xl": { "value": "{ams.space.stack.xl}" } + "xs": { "value": "{ams.space.xs}" }, + "sm": { "value": "{ams.space.sm}" }, + "md": { "value": "{ams.space.md}" }, + "lg": { "value": "{ams.space.lg}" }, + "xl": { "value": "{ams.space.xl}" } } } } diff --git a/proprietary/tokens/src/components/ams/search-field.tokens.json b/proprietary/tokens/src/components/ams/search-field.tokens.json index 8634875c9d..50f85b6977 100644 --- a/proprietary/tokens/src/components/ams/search-field.tokens.json +++ b/proprietary/tokens/src/components/ams/search-field.tokens.json @@ -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.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.xs}" }, + "padding-block": { "value": "{ams.space.sm}" }, + "padding-inline": { "value": "{ams.space.sm}" }, "hover": { "background-color": { "value": "{ams.color.dark-blue}" } } @@ -22,8 +22,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.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.md}" }, + "padding-block": { "value": "{ams.space.sm}" }, + "padding-inline": { "value": "{ams.space.md}" }, "cancel-button": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" diff --git a/proprietary/tokens/src/components/ams/select.tokens.json b/proprietary/tokens/src/components/ams/select.tokens.json index ad865ff720..e25fd3d1e8 100644 --- a/proprietary/tokens/src/components/ams/select.tokens.json +++ b/proprietary/tokens/src/components/ams/select.tokens.json @@ -5,7 +5,7 @@ "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" }, - "background-position": { "value": "right {ams.space.inside.md} center" }, + "background-position": { "value": "right {ams.space.md} center" }, "box-shadow": { "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}" }, @@ -13,8 +13,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.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.md} calc(2 * {ams.space.inside.md} + 1em)" }, + "padding-block": { "value": "{ams.space.sm}" }, + "padding-inline": { "value": "{ams.space.md} calc(2 * {ams.space.md} + 1em)" }, "disabled": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" diff --git a/proprietary/tokens/src/components/ams/skip-link.tokens.json b/proprietary/tokens/src/components/ams/skip-link.tokens.json index d33b8276ff..66cfb48aee 100644 --- a/proprietary/tokens/src/components/ams/skip-link.tokens.json +++ b/proprietary/tokens/src/components/ams/skip-link.tokens.json @@ -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.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.md}" }, + "padding-block": { "value": "{ams.space.sm}" }, + "padding-inline": { "value": "{ams.space.md}" }, "hover": { "background-color": { "value": "{ams.color.dark-blue}" } } diff --git a/proprietary/tokens/src/components/ams/table-of-contents.tokens.json b/proprietary/tokens/src/components/ams/table-of-contents.tokens.json index 9329766bb0..3940de65be 100644 --- a/proprietary/tokens/src/components/ams/table-of-contents.tokens.json +++ b/proprietary/tokens/src/components/ams/table-of-contents.tokens.json @@ -4,7 +4,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.inside.md}" }, + "gap": { "value": "{ams.space.md}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "link": { "color": { "value": "{ams.link-appearance.color}" }, @@ -18,10 +18,10 @@ } }, "list": { - "gap": { "value": "{ams.space.inside.md}" }, + "gap": { "value": "{ams.space.sm}" }, "list": { - "padding-block-start": { "value": "{ams.space.inside.md}" }, - "padding-inline-start": { "value": "{ams.space.inside.lg}" } + "padding-block-start": { "value": "{ams.space.sm}" }, + "padding-inline-start": { "value": "{ams.space.lg}" } } }, "heading": { diff --git a/proprietary/tokens/src/components/ams/table.tokens.json b/proprietary/tokens/src/components/ams/table.tokens.json index 535723394b..c40b925c69 100644 --- a/proprietary/tokens/src/components/ams/table.tokens.json +++ b/proprietary/tokens/src/components/ams/table.tokens.json @@ -11,8 +11,8 @@ }, "cell": { "border-block-end": { "value": "{ams.border.width.sm} solid {ams.color.neutral-grey1}" }, - "padding-block": { "value": "{ams.space.inside.md}" }, - "padding-inline": { "value": "{ams.space.inside.md}" } + "padding-block": { "value": "{ams.space.sm}" }, + "padding-inline": { "value": "{ams.space.md}" } }, "header-cell": { "font-weight": { "value": "{ams.text.font-weight.bold}" } diff --git a/proprietary/tokens/src/components/ams/tabs.tokens.json b/proprietary/tokens/src/components/ams/tabs.tokens.json index 83adfb5694..552439c2a5 100644 --- a/proprietary/tokens/src/components/ams/tabs.tokens.json +++ b/proprietary/tokens/src/components/ams/tabs.tokens.json @@ -1,6 +1,7 @@ { "ams": { "tabs": { + "gap": { "value": "{ams.space.md}" }, "list": { "background-color": { "value": "{ams.color.primary-white}" }, "border-block-end": { "value": "{ams.border.width.md} solid {ams.color.primary-blue}" } @@ -13,8 +14,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.md}" }, "hover": { "color": { "value": "{ams.color.dark-blue}" }, "box-shadow": { "value": "inset 0 -0.125rem 0 0 {ams.color.dark-blue}" } diff --git a/proprietary/tokens/src/components/ams/text-area.tokens.json b/proprietary/tokens/src/components/ams/text-area.tokens.json index fc9b9e488b..e0b0cb4f7f 100644 --- a/proprietary/tokens/src/components/ams/text-area.tokens.json +++ b/proprietary/tokens/src/components/ams/text-area.tokens.json @@ -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}" }, diff --git a/proprietary/tokens/src/components/ams/text-input.tokens.json b/proprietary/tokens/src/components/ams/text-input.tokens.json index b043d4166c..0e1a5d2401 100644 --- a/proprietary/tokens/src/components/ams/text-input.tokens.json +++ b/proprietary/tokens/src/components/ams/text-input.tokens.json @@ -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.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.md}" }, + "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}" }, diff --git a/proprietary/tokens/src/components/ams/time-input.tokens.json b/proprietary/tokens/src/components/ams/time-input.tokens.json index 0c3c0a0433..8ea09f43f5 100644 --- a/proprietary/tokens/src/components/ams/time-input.tokens.json +++ b/proprietary/tokens/src/components/ams/time-input.tokens.json @@ -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.inside.xs}" }, - "padding-inline": { "value": "{ams.space.inside.md}" }, + "padding-block": { "value": "{ams.space.sm}" }, + "padding-inline": { "value": "{ams.space.md}" }, "calender-picker-indicator": { "background-image": { "value": "url(\"data:image/svg+xml;utf8,\")" diff --git a/proprietary/tokens/src/components/ams/top-task-link.tokens.json b/proprietary/tokens/src/components/ams/top-task-link.tokens.json index 6794bdb940..9dd4bd5fcb 100644 --- a/proprietary/tokens/src/components/ams/top-task-link.tokens.json +++ b/proprietary/tokens/src/components/ams/top-task-link.tokens.json @@ -1,6 +1,7 @@ { "ams": { "top-task-link": { + "gap": { "value": "{ams.space.sm}" }, "description": { "color": { "value": "{ams.color.primary-black}" }, "font-family": { "value": "{ams.text.font-family}" }, diff --git a/proprietary/tokens/src/components/ams/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json index 2a93e6813a..03edcfac90 100644 --- a/proprietary/tokens/src/components/ams/unordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/unordered-list.tokens.json @@ -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'" }, diff --git a/storybook/src/components/Accordion/Accordion.stories.tsx b/storybook/src/components/Accordion/Accordion.stories.tsx index bcac2737da..654460aaa1 100644 --- a/storybook/src/components/Accordion/Accordion.stories.tsx +++ b/storybook/src/components/Accordion/Accordion.stories.tsx @@ -5,8 +5,11 @@ import { Accordion, Paragraph } from '@amsterdam/design-system-react/src' import { Meta, StoryObj } from '@storybook/react' -import { exampleParagraph } from '../shared/exampleContent' +import { exampleAccordionHeading, exampleParagraph } from '../shared/exampleContent' +const heading1 = exampleAccordionHeading() +const heading2 = exampleAccordionHeading() +const heading3 = exampleAccordionHeading() const paragraph1 = exampleParagraph() const paragraph2 = exampleParagraph() const paragraph3 = exampleParagraph() @@ -26,13 +29,13 @@ type Story = StoryObj export const Default: Story = { args: { children: [ - + {paragraph1} , - + {paragraph2} , - + {paragraph3} , ], @@ -42,13 +45,13 @@ export const Default: Story = { export const ExpandedByDefault: Story = { args: { children: [ - + {paragraph1} , - + {paragraph2} , - + {paragraph3} , ], @@ -59,13 +62,13 @@ export const TooManyLandmarks: Story = { args: { sectionAs: 'div', children: [ - + {paragraph1} , - + {paragraph2} , - + {paragraph3} , ], diff --git a/storybook/src/components/Button/Button.docs.mdx b/storybook/src/components/Button/Button.docs.mdx index 20c06ebb0b..0789fe8ec7 100644 --- a/storybook/src/components/Button/Button.docs.mdx +++ b/storybook/src/components/Button/Button.docs.mdx @@ -47,5 +47,6 @@ Keep in mind that the label may occasionally wrap over multiple lines: a shorter text might be unavailable, two buttons could sit next to each other on a narrow screen, or the user has configured a large font on their device. +This is fine. diff --git a/storybook/src/components/Tabs/Tabs.stories.tsx b/storybook/src/components/Tabs/Tabs.stories.tsx index 32b46227bd..b9d7811f01 100644 --- a/storybook/src/components/Tabs/Tabs.stories.tsx +++ b/storybook/src/components/Tabs/Tabs.stories.tsx @@ -53,10 +53,8 @@ const defaultTabs = [ , tabsContent.map(({ id, body, label }) => ( -
- {label} - {body} -
+ {label} + {body}
)), ] diff --git a/storybook/src/components/shared/exampleContent.ts b/storybook/src/components/shared/exampleContent.ts index f6ddd28ceb..d393822c56 100644 --- a/storybook/src/components/shared/exampleContent.ts +++ b/storybook/src/components/shared/exampleContent.ts @@ -5,6 +5,18 @@ const pickRandomContent = (list: Array): T => list[Math.floor(Math.random() * list.length)] +export const exampleAccordionHeading = () => + pickRandomContent([ + 'Dit grof afval halen we niet op', + 'Dit grof afval halen we op', + 'Downloads en documenten', + 'Lees de voorwaarden', + 'Publicaties en nieuwsberichten', + 'Verhuizing doorgeven bij stadsloket', + 'Verhuizing doorgeven per post', + 'Voorgaande versies van ramingen', + ]) + export const exampleHeading = () => pickRandomContent([ 'Meer plekken voor kunst en cultuur, verspreid over de stad', diff --git a/storybook/src/docs/grid.docs.mdx b/storybook/src/docs/grid.docs.mdx index f035e17b01..62398ab152 100644 --- a/storybook/src/docs/grid.docs.mdx +++ b/storybook/src/docs/grid.docs.mdx @@ -11,7 +11,7 @@ All elements on a page are placed on this grid. ## Design -### Four, eight, or twelve columns +### 4, 8, or 12 columns The grid divides the screen into columns of equal width. The wider the window, the more columns. @@ -20,7 +20,7 @@ In windows up to 576 pixels wide, the grid has 4 columns. Up to a width of 1088 pixels, it has 8 columns. At that point and beyond, it has 12 columns. -We refer to these three variants as the narrow, medium, and wide grid. +We refer to these 3 variants as the narrow, medium, and wide grid. The breakpoints are based on steps of 256 pixels, starting with a base of 64 pixels. So, 576 = 64 + 2 × 256 and 1088 = 64 + 4 × 256. @@ -36,8 +36,8 @@ The desired layout differs significantly between the two. #### Spacious -The online corporate identity had been designed for simplicity. -There are few options for background colour or borders. +The online corporate identity has been designed for simplicity. +Not many options exist for background colour or borders. Typography and white space remain as tools to keep screens readable. For websites, the grid is quite spacious. @@ -108,7 +108,7 @@ In practice, these design choices result in the following dimensions in pixels. ### Widths per breakpoint -The columns, gaps, and margins have the following widths at the three breakpoints. +The columns, gaps, and margins have the following widths at the 3 breakpoints. Again, between these widths, the widths grow continuously. #### Spacious @@ -137,13 +137,12 @@ but instead, make them responsive to the variety of screens they will appear on. Of course, we have experimented and tested this. We’ve ultimately chosen values that work well visually. -For the same reason, we do not refer to the three grid breakpoints as "mobile, tablet, and desktop" but as "for narrow, medium, and wide" screens or windows. +For the same reason, we do not refer to the 3 grid breakpoints as “mobile, tablet, and desktop” but as “for narrow, medium, and wide” screens or windows. If you want a bit more guidance, assume that phones in portrait mode and split-screen windows on tablets use the 4-column grid, phones in landscape mode and tablets in portrait use the 8-column grid, -and tablets in landscape mode, -laptops, and larger screens use the 12-column grid. +and tablets in landscape mode, laptops, and larger screens use the 12-column grid. The exact number of pixels is not important. ### Reference widths for designers @@ -152,12 +151,12 @@ Nice, all that flexibility. However, when designing a screen, it is still necessary to choose a specific canvas. You want to determine how each design behaves on a desktop, a tablet, or a mobile phone. -Therefore, in Figma, we work with three reference widths. -On those widths, we develop the screen’s design for those three classes of devices. +Therefore, in Figma, we work with 3 reference widths. +On those widths, we develop the screen’s design for the 3 classes of devices. We know that, in reality, there is much more variation, but we have to draw the line somewhere. You can find these grids in the Figma Library under ‘Grid styles’. -In these three situations, the dimensions are as follows. +In these 3 situations, the dimensions are as follows. #### Spacious @@ -184,8 +183,8 @@ It is good to be aware of this. On a computer screen, the browser window is not necessarily maximized; it can be narrower than the screen. Responsive design logically assumes the width of the browser window. -On phones and tablets, the two often coincide. -Tablets can allow placing two (windows of) apps side by side on the screen. +On phones and tablets, both concepts often coincide, +although tablets allow placing 2 (windows of) apps side by side on the screen. ## Relationship with text diff --git a/storybook/src/docs/space.docs.mdx b/storybook/src/docs/space.docs.mdx index a80c326f18..4ea3e97aae 100644 --- a/storybook/src/docs/space.docs.mdx +++ b/storybook/src/docs/space.docs.mdx @@ -6,7 +6,26 @@ import { Meta } from "@storybook/blocks"; # Space -We distinguish 4 types of white space: Grid, Stack, Inside, and Type. +We distinguish 3 types of white space: Component, Grid, and Type. + +## Component Space + +This is the space between components, e.g. between a list of cards, a row of buttons, or an icon and an accompanying text. + +Or at the 4 edges of a component: at the top, bottom, start, and end of its containing box, +as used for buttons and input fields, and for larger components with a coloured background or border. + +This type of space is based on the font size – the medium space length equals the default Paragraph font size. +Because our typography is fluid, this type of spacing is as well. +We offer 5 lenghts. + +| | | 320 | 1600 | +| --------------: | :--: | -----: | -----: | +| **Extra small** | `xs` | 4.5 | 6 | +| **small** | `xs` | 9 | 12 | +| **Medium** | `md` | **18** | **24** | +| **Large** | `lg` | 27 | 36 | +| **Extra large** | `xl` | 36 | 48 | ## Grid Space @@ -30,7 +49,7 @@ In Spacious Mode, the medium grid space grows from 16 to 56 pixels between windo | **Small** | 8 | 12 | 16 | 20 | 24 | 28 | | **Medium** | **16** | **24** | **32** | **40** | **48** | **56** | | **Large** | 24 | 36 | 48 | 60 | 72 | 84 | -| **Extra large** | 32 | 48 | 64 | 80 | 96 | 102 | +| **Extra large** | 32 | 48 | 64 | 80 | 96 | 112 | #### Compact @@ -138,38 +157,6 @@ In Compact Mode, the medium grid space grows from 16 to 40 pixels between window -## Stack Space - -This is the space between sets of components, for example between a list of cards, or next to an image. -It is also used for combinations of components, like an icon accompanying a text, or a row of buttons. - -This type of space is static; it is the same for any window width. -Five options are available. -The medium size is 16 pixels wide in both Spacious and Compact Mode. - -| | Width | -| --------------: | ----: | -| **Extra small** | 8 | -| **Small** | 12 | -| **Medium** | 16 | -| **Large** | 24 | -| **Extra large** | 32 | - -## Inside Space - -This is the space at the four edges of a component: at the top, bottom, start, and end of its containing box. -It is used for buttons and input fields, and for larger components with a coloured background or border. - -The medium size is 16 pixels wide in both Spacious and Compact Mode. - -| | Width | -| --------------: | ----: | -| **Extra small** | 8 | -| **Small** | 12 | -| **Medium** | 16 | -| **Large** | 24 | -| **Extra large** | 32 | - ## Type Space This is the vertical space between text components like headings, paragraphs, and lists. @@ -180,3 +167,4 @@ More information on this type of space will follow. We use pixels in our documentation on sizes to convey a more accurate mental image. In code, sizes are defined in relative units (like `rem`, `em`, `ex`, `vw`, `vh`, and `ch`) to make components more flexible and accessible. +MDN offers a good overview on these [CSS values and units](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units). diff --git a/storybook/src/pages/amsterdam/article/Article.stories.tsx b/storybook/src/pages/amsterdam/article/Article.stories.tsx index 502e365d2d..9efc51dbe6 100644 --- a/storybook/src/pages/amsterdam/article/Article.stories.tsx +++ b/storybook/src/pages/amsterdam/article/Article.stories.tsx @@ -30,6 +30,7 @@ const meta = { }, parameters: { layout: 'fullscreen', + themes: { themeOverride: 'Spacious' }, }, } satisfies Meta diff --git a/storybook/src/pages/amsterdam/home/Home.stories.tsx b/storybook/src/pages/amsterdam/home/Home.stories.tsx index 547ac65d83..df643ad05c 100644 --- a/storybook/src/pages/amsterdam/home/Home.stories.tsx +++ b/storybook/src/pages/amsterdam/home/Home.stories.tsx @@ -22,6 +22,7 @@ const meta = { }, parameters: { layout: 'fullscreen', + themes: { themeOverride: 'Spacious' }, }, } satisfies Meta