Flatten design tokens for default text size

The `medium` font-size and line-height are the default for Paragraph and Link List Link. The absence of a corresponding option for the `size` prop reflects this, and so should the names of their design tokens.
Amsterdam · May 7, 2024 · 1bb25a1 · 1bb25a1
1 parent 0e77bd6
commit 1bb25a1
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 12 deletions.
diff --git a/packages/css/src/components/link-list/link-list.scss b/packages/css/src/components/link-list/link-list.scss
@@ -26,10 +26,10 @@
   color: var(--ams-link-list-link-color);
   display: inline-flex;
   font-family: var(--ams-link-list-link-font-family);
-  font-size: var(--ams-link-list-link-medium-font-size);
+  font-size: var(--ams-link-list-link-font-size);
   font-weight: var(--ams-link-list-link-font-weight);
   gap: var(--ams-link-list-link-gap);
-  line-height: var(--ams-link-list-link-medium-line-height);
+  line-height: var(--ams-link-list-link-line-height);
   outline-offset: var(--ams-link-list-link-outline-offset);
   text-decoration-line: var(--ams-link-list-link-text-decoration-line);
   text-decoration-thickness: var(--ams-link-list-link-text-decoration-thickness);

diff --git a/packages/css/src/components/paragraph/paragraph.scss b/packages/css/src/components/paragraph/paragraph.scss
@@ -13,9 +13,9 @@
 .ams-paragraph {
   color: var(--ams-paragraph-color);
   font-family: var(--ams-paragraph-font-family);
-  font-size: var(--ams-paragraph-medium-font-size);
+  font-size: var(--ams-paragraph-font-size);
   font-weight: var(--ams-paragraph-font-weight);
-  line-height: var(--ams-paragraph-medium-line-height);
+  line-height: var(--ams-paragraph-line-height);
 
   @include text-rendering;
   @include reset;

diff --git a/proprietary/tokens/src/components/ams/link-list.tokens.json b/proprietary/tokens/src/components/ams/link-list.tokens.json
@@ -5,8 +5,10 @@
       "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" },
+        "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}" },
         "text-decoration-thickness": { "value": "{ams.link-appearance.text-decoration-thickness}" },
@@ -15,10 +17,6 @@
           "font-size": { "value": "{ams.text.level.6.font-size}" },
           "line-height": { "value": "{ams.text.level.6.line-height}" }
         },
-        "medium": {
-          "font-size": { "value": "{ams.text.level.5.font-size}" },
-          "line-height": { "value": "{ams.text.level.5.line-height}" }
-        },
         "large": {
           "font-size": { "value": "{ams.text.level.4.font-size}" },
           "line-height": { "value": "{ams.text.level.4.line-height}" }

diff --git a/proprietary/tokens/src/components/ams/paragraph.tokens.json b/proprietary/tokens/src/components/ams/paragraph.tokens.json
@@ -3,16 +3,14 @@
     "paragraph": {
       "color": { "value": "{ams.color.primary-black}" },
       "font-family": { "value": "{ams.text.font-family}" },
+      "font-size": { "value": "{ams.text.level.5.font-size}" },
       "font-weight": { "value": "{ams.text.font-weight.normal}" },
+      "line-height": { "value": "{ams.text.level.5.line-height}" },
       "inverse-color": { "value": "{ams.color.primary-white}" },
       "small": {
         "font-size": { "value": "{ams.text.level.6.font-size}" },
         "line-height": { "value": "{ams.text.level.6.line-height}" }
       },
-      "medium": {
-        "font-size": { "value": "{ams.text.level.5.font-size}" },
-        "line-height": { "value": "{ams.text.level.5.line-height}" }
-      },
       "large": {
         "font-size": { "value": "{ams.text.level.4.font-size}" },
         "line-height": { "value": "{ams.text.level.4.line-height}" }