Remove ‘brand’ from typography token names

Amsterdam · Feb 1, 2025 · 3f48741 · 3f48741
1 parent c9de0fb
commit 3f48741
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 81 deletions.
diff --git a/proprietary/tokens/src/brand/ams/typography.compact.tokens.json b/proprietary/tokens/src/brand/ams/typography.compact.tokens.json
@@ -1,16 +1,14 @@
 {
   "ams": {
-    "brand": {
-      "typography": {
-        "font-size": {
-          "sm": { "value": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)" },
-          "md": { "value": "1rem" },
-          "lg": { "value": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)" },
-          "xl": { "value": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)" },
-          "2xl": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" },
-          "3xl": { "value": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)" },
-          "4xl": { "value": "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)" }
-        }
+    "typography": {
+      "font-size": {
+        "sm": { "value": "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)" },
+        "md": { "value": "1rem" },
+        "lg": { "value": "clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem)" },
+        "xl": { "value": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)" },
+        "2xl": { "value": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)" },
+        "3xl": { "value": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)" },
+        "4xl": { "value": "clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem)" }
       }
     }
   }

diff --git a/proprietary/tokens/src/brand/ams/typography.tokens.json b/proprietary/tokens/src/brand/ams/typography.tokens.json
@@ -1,38 +1,36 @@
 {
   "ams": {
-    "brand": {
-      "typography": {
-        "font-family": {
-          "body-text": { "value": "'Amsterdam Sans', Arial, sans-serif" },
-          "headings": { "value": "'Amsterdam Sans', Arial, sans-serif" },
-          "monospace": { "value": "monospace" }
-        },
-        "font-size": {
-          "sm": { "value": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)" },
-          "md": { "value": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)" },
-          "lg": { "value": "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)" },
-          "xl": { "value": "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)" },
-          "2xl": { "value": "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)" },
-          "3xl": { "value": "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)" },
-          "4xl": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" }
-        },
-        "font-weight": {
-          "light": { "value": 300 },
-          "normal": { "value": 400 },
-          "bold": { "value": 700 },
-          "x-bold": { "value": 800 }
-        },
-        "line-height": {
-          "5xs": { "value": "113.86%" },
-          "4xs": { "value": "117.54%" },
-          "3xs": { "value": "121.33%" },
-          "2xs": { "value": "125.24%" },
-          "xs": { "value": "129.28%" },
-          "sm": { "value": "133.45%" },
-          "md": { "value": "137.76%" },
-          "2xl": { "value": "151.52%" },
-          "5xl": { "value": "166.67%" }
-        }
+    "typography": {
+      "font-family": {
+        "body-text": { "value": "'Amsterdam Sans', Arial, sans-serif" },
+        "headings": { "value": "'Amsterdam Sans', Arial, sans-serif" },
+        "monospace": { "value": "monospace" }
+      },
+      "font-size": {
+        "sm": { "value": "clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)" },
+        "md": { "value": "clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)" },
+        "lg": { "value": "clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)" },
+        "xl": { "value": "clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem)" },
+        "2xl": { "value": "clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)" },
+        "3xl": { "value": "clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem)" },
+        "4xl": { "value": "clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem)" }
+      },
+      "font-weight": {
+        "light": { "value": 300 },
+        "normal": { "value": 400 },
+        "bold": { "value": 700 },
+        "x-bold": { "value": 800 }
+      },
+      "line-height": {
+        "5xs": { "value": "113.86%" },
+        "4xs": { "value": "117.54%" },
+        "3xs": { "value": "121.33%" },
+        "2xs": { "value": "125.24%" },
+        "xs": { "value": "129.28%" },
+        "sm": { "value": "133.45%" },
+        "md": { "value": "137.76%" },
+        "2xl": { "value": "151.52%" },
+        "5xl": { "value": "166.67%" }
       }
     }
   }

diff --git a/proprietary/tokens/src/common/ams/typography.tokens.json b/proprietary/tokens/src/common/ams/typography.tokens.json
@@ -3,56 +3,56 @@
     "common": {
       "typography": {
         "body-text": {
-          "font-family": { "value": "{ams.brand.typography.font-family.body-text}" },
-          "font-size": { "value": "{ams.brand.typography.font-size.md}" },
-          "font-weight": { "value": "{ams.brand.typography.font-weight.normal}" },
-          "line-height": { "value": "{ams.brand.typography.line-height.5xl}" },
+          "font-family": { "value": "{ams.typography.font-family.body-text}" },
+          "font-size": { "value": "{ams.typography.font-size.md}" },
+          "font-weight": { "value": "{ams.typography.font-weight.normal}" },
+          "line-height": { "value": "{ams.typography.line-height.5xl}" },
           "sm": {
-            "font-size": { "value": "{ams.brand.typography.font-size.sm}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.2xl}" }
+            "font-size": { "value": "{ams.typography.font-size.sm}" },
+            "line-height": { "value": "{ams.typography.line-height.2xl}" }
           },
           "lg": {
-            "font-size": { "value": "{ams.brand.typography.font-size.lg}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.2xl}" }
+            "font-size": { "value": "{ams.typography.font-size.lg}" },
+            "line-height": { "value": "{ams.typography.line-height.2xl}" }
           },
           "xl": {
-            "font-size": { "value": "{ams.brand.typography.font-size.xl}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.2xl}" }
+            "font-size": { "value": "{ams.typography.font-size.xl}" },
+            "line-height": { "value": "{ams.typography.line-height.2xl}" }
           }
         },
         "bold": {
-          "font-weight": { "value": "{ams.brand.typography.font-weight.bold}" }
+          "font-weight": { "value": "{ams.typography.font-weight.bold}" }
         },
         "headings": {
-          "font-family": { "value": "{ams.brand.typography.font-family.headings}" },
-          "font-weight": { "value": "{ams.brand.typography.font-weight.x-bold}" },
+          "font-family": { "value": "{ams.typography.font-family.headings}" },
+          "font-weight": { "value": "{ams.typography.font-weight.x-bold}" },
           "level-0": {
-            "font-size": { "value": "{ams.brand.typography.font-size.4xl}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.5xs}" }
+            "font-size": { "value": "{ams.typography.font-size.4xl}" },
+            "line-height": { "value": "{ams.typography.line-height.5xs}" }
           },
           "level-1": {
-            "font-size": { "value": "{ams.brand.typography.font-size.3xl}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.4xs}" }
+            "font-size": { "value": "{ams.typography.font-size.3xl}" },
+            "line-height": { "value": "{ams.typography.line-height.4xs}" }
           },
           "level-2": {
-            "font-size": { "value": "{ams.brand.typography.font-size.2xl}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.3xs}" }
+            "font-size": { "value": "{ams.typography.font-size.2xl}" },
+            "line-height": { "value": "{ams.typography.line-height.3xs}" }
           },
           "level-3": {
-            "font-size": { "value": "{ams.brand.typography.font-size.xl}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.2xs}" }
+            "font-size": { "value": "{ams.typography.font-size.xl}" },
+            "line-height": { "value": "{ams.typography.line-height.2xs}" }
           },
           "level-4": {
-            "font-size": { "value": "{ams.brand.typography.font-size.lg}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.xs}" }
+            "font-size": { "value": "{ams.typography.font-size.lg}" },
+            "line-height": { "value": "{ams.typography.line-height.xs}" }
           },
           "level-5": {
-            "font-size": { "value": "{ams.brand.typography.font-size.md}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.sm}" }
+            "font-size": { "value": "{ams.typography.font-size.md}" },
+            "line-height": { "value": "{ams.typography.line-height.sm}" }
           },
           "level-6": {
-            "font-size": { "value": "{ams.brand.typography.font-size.sm}" },
-            "line-height": { "value": "{ams.brand.typography.line-height.md}" }
+            "font-size": { "value": "{ams.typography.font-size.sm}" },
+            "line-height": { "value": "{ams.typography.line-height.md}" }
           }
         }
       }

diff --git a/proprietary/tokens/src/components/ams/header.tokens.json b/proprietary/tokens/src/components/ams/header.tokens.json
@@ -17,7 +17,7 @@
         "button": {
           "label": {
             "open": {
-              "font-weight": { "value": "{ams.brand.typography.font-weight.bold}" }
+              "font-weight": { "value": "{ams.typography.font-weight.bold}" }
             }
           }
         }

diff --git a/storybook/src/foundation/design-tokens/typography.docs.mdx b/storybook/src/foundation/design-tokens/typography.docs.mdx
@@ -10,15 +10,15 @@ import { Meta, Typeset } from "@storybook/blocks";
 
 ### Brand tokens
 
-| Token name                                  | Value                                                   | Example                                                                                                                        |
-| :------------------------------------------ | :------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------------- |
-| `var(--ams-brand-typography-font-size-sm)`  | clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)    | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-brand-typography-font-size-sm)' }}>Abc</div>  |
-| `var(--ams-brand-typography-font-size-md)`  | clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)     | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-brand-typography-font-size-md)' }}>Abc</div>  |
-| `var(--ams-brand-typography-font-size-lg)`  | clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)  | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-brand-typography-font-size-lg)' }}>Abc</div>  |
-| `var(--ams-brand-typography-font-size-xl)`  | clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem) | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-brand-typography-font-size-xl)' }}>Abc</div>  |
-| `var(--ams-brand-typography-font-size-2xl)` | clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)  | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-brand-typography-font-size-2xl)' }}>Abc</div> |
-| `var(--ams-brand-typography-font-size-3xl)` | clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem) | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-brand-typography-font-size-3xl)' }}>Abc</div> |
-| `var(--ams-brand-typography-font-size-4xl)` | clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem) | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-brand-typography-font-size-4xl)' }}>Abc</div> |
+| Token name                            | Value                                                   | Example                                                                                                                  |
+| :------------------------------------ | :------------------------------------------------------ | :----------------------------------------------------------------------------------------------------------------------- |
+| `var(--ams-typography-font-size-sm)`  | clamp(0.9643rem, calc(0.9054rem + 0.2946vw), 1.2rem)    | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-sm)' }}>Abc</div>  |
+| `var(--ams-typography-font-size-md)`  | clamp(1.125rem, calc(1.0313rem + 0.4688vw), 1.5rem)     | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-md)' }}>Abc</div>  |
+| `var(--ams-typography-font-size-lg)`  | clamp(1.3125rem, calc(1.1719rem + 0.7031vw), 1.875rem)  | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-lg)' }}>Abc</div>  |
+| `var(--ams-typography-font-size-xl)`  | clamp(1.5313rem, calc(1.3281rem + 1.0156vw), 2.3438rem) | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-xl)' }}>Abc</div>  |
+| `var(--ams-typography-font-size-2xl)` | clamp(1.7865rem, calc(1.5007rem + 1.429vw), 2.9297rem)  | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-2xl)' }}>Abc</div> |
+| `var(--ams-typography-font-size-3xl)` | clamp(2.0842rem, calc(1.6897rem + 1.9724vw), 3.6621rem) | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-3xl)' }}>Abc</div> |
+| `var(--ams-typography-font-size-4xl)` | clamp(2.4316rem, calc(1.8951rem + 2.6826vw), 4.5776rem) | <div className="ams-docs-token-example--font-size" style={{ fontSize: 'var(--ams-typography-font-size-4xl)' }}>Abc</div> |
 
 ### Seven text levels