feat: Update spacing in Ordered and Unordered List (#1632)

Amsterdam · Oct 9, 2024 · 986e023 · 986e023
1 parent 02e0771
commit 986e023
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 12 deletions.
diff --git a/packages/css/src/components/ordered-list/ordered-list.scss b/packages/css/src/components/ordered-list/ordered-list.scss
@@ -5,15 +5,13 @@
 
 @import "../../common/text-rendering";
 
-/** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style-type: none;
   margin-block: 0;
   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
@@ -5,15 +5,13 @@
 
 @import "../../common/text-rendering";
 
-/** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style: none;
   margin-block: 0;
   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
@@ -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
@@ -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",