@nswds/tokens 3.2.0 → 3.4.0

package/dist/tokens/global/shadow/canonical.json

@@ -0,0 +1,286 @@
+{
+  "box-shadow": {
+    "thin": {
+      "$type": "shadow",
+      "$description": "Thin inset ring (inset 0 0 0 border-width.thin) — border-via-shadow that does not affect layout; renders with currentColor.",
+      "$value": {
+        "inset": true,
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 0,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 0,
+          "unit": "px"
+        },
+        "spread": "{border-width.thin}"
+      }
+    },
+    "thick": {
+      "$type": "shadow",
+      "$description": "Thick inset ring (inset 0 0 0 border-width.thick) — emphasis/selected outline; renders with currentColor.",
+      "$value": {
+        "inset": true,
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 0,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 0,
+          "unit": "px"
+        },
+        "spread": "{border-width.thick}"
+      }
+    },
+    "thicker": {
+      "$type": "shadow",
+      "$description": "Thicker inset ring (inset 0 0 0 border-width.thicker) — focus indication; renders with currentColor.",
+      "$value": {
+        "inset": true,
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 0,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 0,
+          "unit": "px"
+        },
+        "spread": "{border-width.thicker}"
+      }
+    }
+  },
+  "shadow-color": {
+    "5": {
+      "$type": "color",
+      "$description": "Shadow black at 5% alpha — the faintest elevation tint. Step name is the alpha percentage.",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ],
+        "alpha": 0.05,
+        "hex": "#000000"
+      }
+    },
+    "10": {
+      "$type": "color",
+      "$description": "Shadow black at 10% alpha — the standard elevation tint. Step name is the alpha percentage.",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ],
+        "alpha": 0.1,
+        "hex": "#000000"
+      }
+    },
+    "25": {
+      "$type": "color",
+      "$description": "Shadow black at 25% alpha — strong elevation for overlays/modals. Step name is the alpha percentage.",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [
+          0,
+          0,
+          0
+        ],
+        "alpha": 0.25,
+        "hex": "#000000"
+      }
+    }
+  },
+  "shadow": {
+    "sm": {
+      "$type": "shadow",
+      "$description": "Small elevation — cards and raised controls (Tailwind shadow-sm geometry). DRAFT pending design review.",
+      "$value": [
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 3,
+            "unit": "px"
+          },
+          "spread": {
+            "value": 0,
+            "unit": "px"
+          },
+          "color": "{shadow-color.10}"
+        },
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 2,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -1,
+            "unit": "px"
+          },
+          "color": "{shadow-color.10}"
+        }
+      ]
+    },
+    "md": {
+      "$type": "shadow",
+      "$description": "Medium elevation — dropdowns and popovers (Tailwind shadow-md geometry). DRAFT pending design review.",
+      "$value": [
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 4,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 6,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -1,
+            "unit": "px"
+          },
+          "color": "{shadow-color.10}"
+        },
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 2,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 4,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -2,
+            "unit": "px"
+          },
+          "color": "{shadow-color.10}"
+        }
+      ]
+    },
+    "lg": {
+      "$type": "shadow",
+      "$description": "Large elevation — dialogs and floating panels (Tailwind shadow-lg geometry). DRAFT pending design review.",
+      "$value": [
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 10,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 15,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -3,
+            "unit": "px"
+          },
+          "color": "{shadow-color.10}"
+        },
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 4,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 6,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -4,
+            "unit": "px"
+          },
+          "color": "{shadow-color.10}"
+        }
+      ]
+    },
+    "xl": {
+      "$type": "shadow",
+      "$description": "Extra-large elevation — modals and full overlays (Tailwind shadow-xl geometry). DRAFT pending design review.",
+      "$value": [
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 20,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 25,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -5,
+            "unit": "px"
+          },
+          "color": "{shadow-color.10}"
+        },
+        {
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 8,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 10,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -6,
+            "unit": "px"
+          },
+          "color": "{shadow-color.10}"
+        }
+      ]
+    }
+  }
+}

package/dist/tokens/global/typography/canonical.json

@@ -186,6 +186,11 @@
       "$type": "fontWeight",
       "$description": "Bold (700) — highest emphasis; key figures and primary headings.",
       "$value": 700
+    },
+    "extrabold": {
+      "$type": "fontWeight",
+      "$description": "Extrabold (800) — hero/display headings (the prose scale uses 800 for h1).",
+      "$value": 800
     }
   },
   "line-height": {

package/dist/tokens/semantic/typography/canonical.json

@@ -0,0 +1,103 @@
+{
+  "typography": {
+    "heading-1": {
+      "$type": "typography",
+      "$description": "Page title — prose h1 at the base size (36px/800). Prose pairs 36px with 40/36 ≈ 1.11; tight (1.2) is the nearest primitive — flag for design.",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.36}",
+        "fontWeight": "{font-weight.extrabold}",
+        "letterSpacing": "{letter-spacing.tight}",
+        "lineHeight": "{line-height.tight}"
+      }
+    },
+    "heading-2": {
+      "$type": "typography",
+      "$description": "Section heading — prose h2 pairing (24px/700, 32/24 = snug exactly).",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.24}",
+        "fontWeight": "{font-weight.bold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.snug}"
+      }
+    },
+    "heading-3": {
+      "$type": "typography",
+      "$description": "Sub-section heading — prose h3 pairing (20px/600, 32/20 = relaxed exactly).",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.20}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.relaxed}"
+      }
+    },
+    "heading-4": {
+      "$type": "typography",
+      "$description": "Minor heading — prose h4 pairing (16px/600, 24/16 = base exactly).",
+      "$value": {
+        "fontFamily": "{font-family.display}",
+        "fontSize": "{font-size.16}",
+        "fontWeight": "{font-weight.semibold}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.base}"
+      }
+    },
+    "body": {
+      "$type": "typography",
+      "$description": "Default body text — prose base pairing (16px/400, 28/16 = loose exactly).",
+      "$value": {
+        "fontFamily": "{font-family.sans}",
+        "fontSize": "{font-size.16}",
+        "fontWeight": "{font-weight.regular}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.loose}"
+      }
+    },
+    "body-sm": {
+      "$type": "typography",
+      "$description": "Small body text — prose sm body (14px/400). Prose pairs 14px with 24/14 ≈ 1.714; loose (1.75) is the nearest primitive — flag for design.",
+      "$value": {
+        "fontFamily": "{font-family.sans}",
+        "fontSize": "{font-size.14}",
+        "fontWeight": "{font-weight.regular}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.loose}"
+      }
+    },
+    "lead": {
+      "$type": "typography",
+      "$description": "Lead/intro paragraph — prose lead pairing at base (20px/400, 32/20 = relaxed exactly).",
+      "$value": {
+        "fontFamily": "{font-family.sans}",
+        "fontSize": "{font-size.20}",
+        "fontWeight": "{font-weight.regular}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.relaxed}"
+      }
+    },
+    "caption": {
+      "$type": "typography",
+      "$description": "Captions, footnotes, and small labels (12px/400, wide tracking for legibility at small sizes).",
+      "$value": {
+        "fontFamily": "{font-family.sans}",
+        "fontSize": "{font-size.12}",
+        "fontWeight": "{font-weight.regular}",
+        "letterSpacing": "{letter-spacing.wide}",
+        "lineHeight": "{line-height.base}"
+      }
+    },
+    "code": {
+      "$type": "typography",
+      "$description": "Inline code and code blocks — prose code size at base (14px), JetBrains Mono. Prose pairs pre blocks with 24/14 ≈ 1.714; base (1.5) is the nearest primitive — flag for design.",
+      "$value": {
+        "fontFamily": "{font-family.mono}",
+        "fontSize": "{font-size.14}",
+        "fontWeight": "{font-weight.regular}",
+        "letterSpacing": "{letter-spacing.normal}",
+        "lineHeight": "{line-height.base}"
+      }
+    }
+  }
+}

package/dist/tokens/typography.base.json

@@ -186,6 +186,11 @@
       "$type": "fontWeight",
       "$description": "Bold (700) — highest emphasis; key figures and primary headings.",
       "$value": 700
+    },
+    "extrabold": {
+      "$type": "fontWeight",
+      "$description": "Extrabold (800) — hero/display headings (the prose scale uses 800 for h1).",
+      "$value": 800
     }
   },
   "line-height": {

package/dist/ts/border/global.ts

@@ -0,0 +1,6 @@
+export const borderWidth = {
+  thin: '0.0625rem',
+  thick: '0.125rem',
+  thicker: '0.25rem',
+  default: '0.0625rem',
+}

package/dist/ts/shadow/global.ts

@@ -0,0 +1,16 @@
+export const boxShadow = {
+  thin: 'inset 0 0 0 0.0625rem',
+  thick: 'inset 0 0 0 0.125rem',
+  thicker: 'inset 0 0 0 0.25rem',
+}
+export const shadowColor = {
+  '5': 'rgb(0 0 0 / 0.05)',
+  '10': 'rgb(0 0 0 / 0.1)',
+  '25': 'rgb(0 0 0 / 0.25)',
+}
+export const shadow = {
+  sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+}

package/dist/ts/typography/global.ts

@@ -26,6 +26,7 @@ export const fontWeight = {
   medium: 500,
   semibold: 600,
   bold: 700,
+  extrabold: 800,
 }
 export const lineHeight = {
   none: 1,

package/dist/ts/typography/semantic.ts

@@ -0,0 +1,72 @@
+export const heading1 = {
+  fontFamily:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  fontSize: '2.25rem',
+  fontWeight: 800,
+  lineHeight: 1.2,
+  letterSpacing: '-0.0125em',
+}
+export const heading2 = {
+  fontFamily:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  fontSize: '1.5rem',
+  fontWeight: 700,
+  lineHeight: 1.3333333,
+  letterSpacing: '0em',
+}
+export const heading3 = {
+  fontFamily:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  fontSize: '1.25rem',
+  fontWeight: 600,
+  lineHeight: 1.6,
+  letterSpacing: '0em',
+}
+export const heading4 = {
+  fontFamily:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  fontSize: '1rem',
+  fontWeight: 600,
+  lineHeight: 1.5,
+  letterSpacing: '0em',
+}
+export const body = {
+  fontFamily:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  fontSize: '1rem',
+  fontWeight: 400,
+  lineHeight: 1.75,
+  letterSpacing: '0em',
+}
+export const bodySm = {
+  fontFamily:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  fontSize: '0.875rem',
+  fontWeight: 400,
+  lineHeight: 1.75,
+  letterSpacing: '0em',
+}
+export const lead = {
+  fontFamily:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  fontSize: '1.25rem',
+  fontWeight: 400,
+  lineHeight: 1.6,
+  letterSpacing: '0em',
+}
+export const caption = {
+  fontFamily:
+    "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+  fontSize: '0.75rem',
+  fontWeight: 400,
+  lineHeight: 1.5,
+  letterSpacing: '0.025em',
+}
+export const code = {
+  fontFamily:
+    "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
+  fontSize: '0.875rem',
+  fontWeight: 400,
+  lineHeight: 1.5,
+  letterSpacing: '0em',
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nswds/tokens",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "description": "NSW Application Design System Design Tokens",
   "license": "MPL-2.0",
   "keywords": [