diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss index 64939ac993..666c6bf01b 100644 --- a/packages/css/src/components/grid/grid.scss +++ b/packages/css/src/components/grid/grid.scss @@ -7,7 +7,7 @@ .amsterdam-grid { display: grid; - gap: var(--amsterdam-grid-gap); + gap: var(--amsterdam-grid-gap-md); grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr); padding-inline: var(--amsterdam-grid-padding-inline); @@ -25,47 +25,47 @@ } .amsterdam-grid--gap-vertical--small { - row-gap: calc(var(--amsterdam-grid-gap) / 2); + row-gap: var(--amsterdam-grid-gap-sm); } .amsterdam-grid--gap-vertical--large { - row-gap: calc(var(--amsterdam-grid-gap) * 2); + row-gap: var(--amsterdam-grid-gap-lg); } .amsterdam-grid--padding-bottom--small { - padding-block-end: calc(var(--amsterdam-grid-gap) / 2); + padding-block-end: var(--amsterdam-grid-padding-block-sm); } .amsterdam-grid--padding-bottom--medium { - padding-block-end: var(--amsterdam-grid-gap); + padding-block-end: var(--amsterdam-grid-padding-block-md); } .amsterdam-grid--padding-bottom--large { - padding-block-end: calc(var(--amsterdam-grid-gap) * 2); + padding-block-end: var(--amsterdam-grid-padding-block-lg); } .amsterdam-grid--padding-top--small { - padding-block-start: calc(var(--amsterdam-grid-gap) / 2); + padding-block-start: var(--amsterdam-grid-padding-block-sm); } .amsterdam-grid--padding-top--medium { - padding-block-start: var(--amsterdam-grid-gap); + padding-block-start: var(--amsterdam-grid-padding-block-md); } .amsterdam-grid--padding-top--large { - padding-block-start: calc(var(--amsterdam-grid-gap) * 2); + padding-block-start: var(--amsterdam-grid-padding-block-lg); } .amsterdam-grid--padding-vertical--small { - padding-block: calc(var(--amsterdam-grid-gap) / 2); + padding-block: var(--amsterdam-grid-padding-block-sm); } .amsterdam-grid--padding-vertical--medium { - padding-block: var(--amsterdam-grid-gap); + padding-block: var(--amsterdam-grid-padding-block-md); } .amsterdam-grid--padding-vertical--large { - padding-block: calc(var(--amsterdam-grid-gap) * 2); + padding-block: var(--amsterdam-grid-padding-block-lg); } .amsterdam-grid__cell--span-all { diff --git a/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json b/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json index dededef4d8..5e3c91a1dd 100644 --- a/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json +++ b/proprietary/tokens/src/brand/amsterdam/space.compact.tokens.json @@ -3,7 +3,10 @@ "space": { "xs": { "value": "clamp(0.25rem, calc(0.390625vw - 0.015625rem), 0.625rem)" }, "sm": { "value": "clamp(0.5rem, calc(0.78125vw - 0.03125rem), 1.25rem)" }, - "md": { "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)" }, + "md": { + "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)", + "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide." + }, "lg": { "value": "clamp(1.5rem, calc(2.34375vw - 0.09375rem), 3.75rem)" }, "xl": { "value": "clamp(2rem, calc(3.125vw - 0.125rem), 5rem)" } } diff --git a/proprietary/tokens/src/brand/amsterdam/space.tokens.json b/proprietary/tokens/src/brand/amsterdam/space.tokens.json index e47eb6bc33..49aeff7dc9 100644 --- a/proprietary/tokens/src/brand/amsterdam/space.tokens.json +++ b/proprietary/tokens/src/brand/amsterdam/space.tokens.json @@ -3,7 +3,10 @@ "space": { "xs": { "value": "clamp(0.25rem, calc(0.78125vw + 0.09375rem), 0.875rem)" }, "sm": { "value": "clamp(0.5rem, calc(1.5625vw + 0.1875rem), 1.75rem)" }, - "md": { "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)" }, + "md": { + "value": "clamp(1rem, calc(3.125vw + 0.375rem), 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)" } } diff --git a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json index cc8e5b85e8..a3f4bba4cc 100644 --- a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json @@ -1,14 +1,7 @@ { "amsterdam": { "grid": { - "gap": { - "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)", - "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide." - }, - "padding-inline": { - "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)", - "comment": "Equals the gap." - } + "padding-inline": { "value": "amsterdam.space.md" } } } } diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json index a6ec7c33ac..f6d8019e1a 100644 --- a/proprietary/tokens/src/components/amsterdam/grid.tokens.json +++ b/proprietary/tokens/src/components/amsterdam/grid.tokens.json @@ -3,13 +3,20 @@ "grid": { "column-count": { "value": "4" }, "gap": { - "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)", - "comment": "Grows from 16px at 320px wide to 56px at 1600px wide." + "xs": { "value": "amsterdam.space.xs" }, + "sm": { "value": "amsterdam.space.sm" }, + "md": { "value": "amsterdam.space.md" }, + "lg": { "value": "amsterdam.space.lg" }, + "xl": { "value": "amsterdam.space.xl" } }, - "padding-inline": { - "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)", - "comment": "Equals 1.5 times the gap." + "padding-block": { + "xs": { "value": "amsterdam.space.xs" }, + "sm": { "value": "amsterdam.space.sm" }, + "md": { "value": "amsterdam.space.md" }, + "lg": { "value": "amsterdam.space.lg" }, + "xl": { "value": "amsterdam.space.xl" } }, + "padding-inline": { "value": "amsterdam.space.lg" }, "medium": { "column-count": { "value": "8" } },