diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss index 8e8b8d91b9..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,9 +43,11 @@ 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); + 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 { 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..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,9 +43,11 @@ 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); + 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 { 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..9b9b029090 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,7 +24,10 @@ } }, "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": { "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..0bf446f8df 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,7 +20,10 @@ } }, "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": { "value": "0.875rem",