From 275e8ac0885ee2039e715e1d91c357c484b7fd48 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Mon, 7 Oct 2024 13:55:05 +0200 Subject: [PATCH 1/6] Added xs padding on top of sublist --- packages/css/src/components/ordered-list/ordered-list.scss | 1 + packages/css/src/components/unordered-list/unordered-list.scss | 1 + proprietary/tokens/src/components/ams/ordered-list.tokens.json | 1 + proprietary/tokens/src/components/ams/unordered-list.tokens.json | 1 + 4 files changed, 4 insertions(+) diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index 8e8b8d91b9..ad9d56fdee 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -50,6 +50,7 @@ /** A nested list has a different marker and less indentation for correct alignment. */ :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list { list-style-type: var(--ams-ordered-list-ordered-list-list-style-type); + padding-block-start: var(--ams-ordered-list-ordered-list-padding-block-start); .ams-ordered-list__item { margin-inline-start: var(--ams-ordered-list-ordered-list-item-margin-inline-start); diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index 57fbaf4fda..93d0b9338f 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -50,6 +50,7 @@ /** A nested list has a different marker and less indentation for correct alignment. */ :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list { list-style-type: var(--ams-unordered-list-unordered-list-list-style-type); + padding-block-start: var(--ams-unordered-list-unordered-list-padding-block-start); .ams-unordered-list__item { margin-inline-start: var(--ams-unordered-list-unordered-list-item-margin-inline-start); diff --git a/proprietary/tokens/src/components/ams/ordered-list.tokens.json b/proprietary/tokens/src/components/ams/ordered-list.tokens.json index b57faf22a9..13ddcb1b2e 100644 --- a/proprietary/tokens/src/components/ams/ordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/ordered-list.tokens.json @@ -25,6 +25,7 @@ }, "ordered-list": { "list-style-type": { "value": "lower-alpha" }, + "padding-block-start": { "value": "{ams.space.xs}" }, "item": { "margin-inline-start": { "value": "1.5rem", diff --git a/proprietary/tokens/src/components/ams/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json index 03edcfac90..5ee24d53ec 100644 --- a/proprietary/tokens/src/components/ams/unordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/unordered-list.tokens.json @@ -21,6 +21,7 @@ }, "unordered-list": { "list-style-type": { "value": "'\\2013'" }, + "padding-block-start": { "value": "{ams.space.xs}" }, "item": { "margin-inline-start": { "value": "0.875rem", From 83e35a1c2c1eeae4cc88fbd1179773781cc47437 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 9 Oct 2024 11:49:25 +0200 Subject: [PATCH 2/6] Update proprietary/tokens/src/components/ams/ordered-list.tokens.json Co-authored-by: Vincent Smedinga --- proprietary/tokens/src/components/ams/ordered-list.tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/tokens/src/components/ams/ordered-list.tokens.json b/proprietary/tokens/src/components/ams/ordered-list.tokens.json index 13ddcb1b2e..18121b9675 100644 --- a/proprietary/tokens/src/components/ams/ordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/ordered-list.tokens.json @@ -25,7 +25,7 @@ }, "ordered-list": { "list-style-type": { "value": "lower-alpha" }, - "padding-block-start": { "value": "{ams.space.xs}" }, + "padding-block-start": { "value": "{ams.space.sm}" }, "item": { "margin-inline-start": { "value": "1.5rem", From 0b877f07d41a595dda50e8d8ef6efd2a2c983d73 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Wed, 9 Oct 2024 11:49:30 +0200 Subject: [PATCH 3/6] Update proprietary/tokens/src/components/ams/unordered-list.tokens.json Co-authored-by: Vincent Smedinga --- .../tokens/src/components/ams/unordered-list.tokens.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/proprietary/tokens/src/components/ams/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json index 5ee24d53ec..77340289ec 100644 --- a/proprietary/tokens/src/components/ams/unordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/unordered-list.tokens.json @@ -21,7 +21,7 @@ }, "unordered-list": { "list-style-type": { "value": "'\\2013'" }, - "padding-block-start": { "value": "{ams.space.xs}" }, + "padding-block-start": { "value": "{ams.space.sm}" }, "item": { "margin-inline-start": { "value": "0.875rem", From 0d205942c6e3473482d5beff8a9f0377dabb1c69 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 9 Oct 2024 13:42:30 +0200 Subject: [PATCH 4/6] Increase whitespace between level 1 list items --- packages/css/src/components/ordered-list/ordered-list.scss | 1 + packages/css/src/components/unordered-list/unordered-list.scss | 1 + proprietary/tokens/src/components/ams/ordered-list.tokens.json | 3 ++- .../tokens/src/components/ams/unordered-list.tokens.json | 3 ++- 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index ad9d56fdee..126233ffef 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -49,6 +49,7 @@ /** A nested list has a different marker and less indentation for correct alignment. */ :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list { + gap: var(--ams-ordered-list-ordered-list-gap); list-style-type: var(--ams-ordered-list-ordered-list-list-style-type); padding-block-start: var(--ams-ordered-list-ordered-list-padding-block-start); diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index 93d0b9338f..85ed46d3e4 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -49,6 +49,7 @@ /** A nested list has a different marker and less indentation for correct alignment. */ :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list { + gap: var(--ams-unordered-list-unordered-list-gap); list-style-type: var(--ams-unordered-list-unordered-list-list-style-type); padding-block-start: var(--ams-unordered-list-unordered-list-padding-block-start); diff --git a/proprietary/tokens/src/components/ams/ordered-list.tokens.json b/proprietary/tokens/src/components/ams/ordered-list.tokens.json index 18121b9675..675bf4113e 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": "{ams.space.sm}" }, + "gap": { "value": "{ams.space.md}" }, "inverse-color": { "value": "{ams.color.primary-white}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "list-style-type": { "value": "decimal" }, @@ -24,6 +24,7 @@ } }, "ordered-list": { + "gap": { "value": "{ams.space.sm}" }, "list-style-type": { "value": "lower-alpha" }, "padding-block-start": { "value": "{ams.space.sm}" }, "item": { diff --git a/proprietary/tokens/src/components/ams/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json index 77340289ec..5baefb1aff 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": "{ams.space.sm}" }, + "gap": { "value": "{ams.space.md}" }, "inverse-color": { "value": "{ams.color.primary-white}" }, "line-height": { "value": "{ams.text.level.5.line-height}" }, "list-style-type": { "value": "'\\2022'" }, @@ -20,6 +20,7 @@ } }, "unordered-list": { + "gap": { "value": "{ams.space.sm}" }, "list-style-type": { "value": "'\\2013'" }, "padding-block-start": { "value": "{ams.space.sm}" }, "item": { From 72d8231e1ef8d9788f97b9aa35549294ee5c6988 Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 9 Oct 2024 13:46:04 +0200 Subject: [PATCH 5/6] Add bottom padding token for reuse --- packages/css/src/components/ordered-list/ordered-list.scss | 1 + packages/css/src/components/unordered-list/unordered-list.scss | 1 + proprietary/tokens/src/components/ams/ordered-list.tokens.json | 1 + proprietary/tokens/src/components/ams/unordered-list.tokens.json | 1 + 4 files changed, 4 insertions(+) diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index 126233ffef..9fac3d024b 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -51,6 +51,7 @@ :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list { gap: var(--ams-ordered-list-ordered-list-gap); list-style-type: var(--ams-ordered-list-ordered-list-list-style-type); + padding-block-end: var(--ams-ordered-list-ordered-list-padding-block-end); padding-block-start: var(--ams-ordered-list-ordered-list-padding-block-start); .ams-ordered-list__item { diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index 85ed46d3e4..359740e40d 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -51,6 +51,7 @@ :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list { gap: var(--ams-unordered-list-unordered-list-gap); list-style-type: var(--ams-unordered-list-unordered-list-list-style-type); + padding-block-end: var(--ams-unordered-list-unordered-list-padding-block-end); padding-block-start: var(--ams-unordered-list-unordered-list-padding-block-start); .ams-unordered-list__item { diff --git a/proprietary/tokens/src/components/ams/ordered-list.tokens.json b/proprietary/tokens/src/components/ams/ordered-list.tokens.json index 675bf4113e..9b9b029090 100644 --- a/proprietary/tokens/src/components/ams/ordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/ordered-list.tokens.json @@ -26,6 +26,7 @@ "ordered-list": { "gap": { "value": "{ams.space.sm}" }, "list-style-type": { "value": "lower-alpha" }, + "padding-block-end": { "value": "0" }, "padding-block-start": { "value": "{ams.space.sm}" }, "item": { "margin-inline-start": { diff --git a/proprietary/tokens/src/components/ams/unordered-list.tokens.json b/proprietary/tokens/src/components/ams/unordered-list.tokens.json index 5baefb1aff..0bf446f8df 100644 --- a/proprietary/tokens/src/components/ams/unordered-list.tokens.json +++ b/proprietary/tokens/src/components/ams/unordered-list.tokens.json @@ -22,6 +22,7 @@ "unordered-list": { "gap": { "value": "{ams.space.sm}" }, "list-style-type": { "value": "'\\2013'" }, + "padding-block-end": { "value": "0" }, "padding-block-start": { "value": "{ams.space.sm}" }, "item": { "margin-inline-start": { From 1c65b26ac1224aa819f82e81c88b928bfd2518ea Mon Sep 17 00:00:00 2001 From: Vincent Smedinga Date: Wed, 9 Oct 2024 13:48:31 +0200 Subject: [PATCH 6/6] Remove comments --- packages/css/src/components/ordered-list/ordered-list.scss | 5 ----- .../css/src/components/unordered-list/unordered-list.scss | 5 ----- 2 files changed, 10 deletions(-) diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index 9fac3d024b..3c9cd2446d 100644 --- a/packages/css/src/components/ordered-list/ordered-list.scss +++ b/packages/css/src/components/ordered-list/ordered-list.scss @@ -5,7 +5,6 @@ @import "../../common/text-rendering"; -/** Apply border box sizing, reset white space and list styles. */ @mixin reset { box-sizing: border-box; list-style-type: none; @@ -13,7 +12,6 @@ padding-inline-start: 0; } -/** A list is a grid column with a gap between items. */ .ams-ordered-list { display: grid; gap: var(--ams-ordered-list-gap); @@ -22,7 +20,6 @@ @include reset; } -/** A list with markers sets typography for its text content. */ .ams-ordered-list:not(.ams-ordered-list--no-markers) { color: var(--ams-ordered-list-color); font-family: var(--ams-ordered-list-font-family); @@ -31,7 +28,6 @@ line-height: var(--ams-ordered-list-line-height); list-style-type: var(--ams-ordered-list-list-style-type); - /** List items are responsible for indentation and marker positioning. */ .ams-ordered-list__item { margin-inline-start: var(--ams-ordered-list-item-margin-inline-start); padding-inline-start: var(--ams-ordered-list-item-padding-inline-start); @@ -47,7 +43,6 @@ line-height: var(--ams-ordered-list-small-line-height); } -/** A nested list has a different marker and less indentation for correct alignment. */ :is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list { gap: var(--ams-ordered-list-ordered-list-gap); list-style-type: var(--ams-ordered-list-ordered-list-list-style-type); diff --git a/packages/css/src/components/unordered-list/unordered-list.scss b/packages/css/src/components/unordered-list/unordered-list.scss index 359740e40d..460cbea8ce 100644 --- a/packages/css/src/components/unordered-list/unordered-list.scss +++ b/packages/css/src/components/unordered-list/unordered-list.scss @@ -5,7 +5,6 @@ @import "../../common/text-rendering"; -/** Apply border box sizing, reset white space and list styles. */ @mixin reset { box-sizing: border-box; list-style: none; @@ -13,7 +12,6 @@ padding-inline-start: 0; } -/** A list is a grid column with a gap between items. */ .ams-unordered-list { display: grid; gap: var(--ams-unordered-list-gap); @@ -22,7 +20,6 @@ @include reset; } -/** A list with markers sets typography for its text content. */ .ams-unordered-list:not(.ams-unordered-list--no-markers) { color: var(--ams-unordered-list-color); font-family: var(--ams-unordered-list-font-family); @@ -31,7 +28,6 @@ line-height: var(--ams-unordered-list-line-height); list-style-type: var(--ams-unordered-list-list-style-type); - /** List items are responsible for indentation and marker positioning. */ .ams-unordered-list__item { margin-inline-start: var(--ams-unordered-list-item-margin-inline-start); padding-inline-start: var(--ams-unordered-list-item-padding-inline-start); @@ -47,7 +43,6 @@ line-height: var(--ams-unordered-list-small-line-height); } -/** A nested list has a different marker and less indentation for correct alignment. */ :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list { gap: var(--ams-unordered-list-unordered-list-gap); list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);