@nswds/tokens 3.0.1 → 3.2.0

package/dist/tokens/breakpoints.base.json

@@ -0,0 +1,44 @@
+{
+  "breakpoint": {
+    "xs": {
+      "$type": "dimension",
+      "$description": "Extra-small breakpoint — large phones and up.",
+      "$value": {
+        "value": 480,
+        "unit": "px"
+      }
+    },
+    "sm": {
+      "$type": "dimension",
+      "$description": "Small breakpoint — tablets portrait and up.",
+      "$value": {
+        "value": 768,
+        "unit": "px"
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$description": "Medium breakpoint — tablets landscape / small laptops and up.",
+      "$value": {
+        "value": 992,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$description": "Large breakpoint — desktops and up.",
+      "$value": {
+        "value": 1200,
+        "unit": "px"
+      }
+    },
+    "xl": {
+      "$type": "dimension",
+      "$description": "Extra-large breakpoint — wide desktops and up.",
+      "$value": {
+        "value": 1600,
+        "unit": "px"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+{
+  "breakpoint": {
+    "xs": {
+      "$type": "dimension",
+      "$description": "Extra-small breakpoint — large phones and up.",
+      "$value": {
+        "value": 480,
+        "unit": "px"
+      }
+    },
+    "sm": {
+      "$type": "dimension",
+      "$description": "Small breakpoint — tablets portrait and up.",
+      "$value": {
+        "value": 768,
+        "unit": "px"
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$description": "Medium breakpoint — tablets landscape / small laptops and up.",
+      "$value": {
+        "value": 992,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$description": "Large breakpoint — desktops and up.",
+      "$value": {
+        "value": 1200,
+        "unit": "px"
+      }
+    },
+    "xl": {
+      "$type": "dimension",
+      "$description": "Extra-large breakpoint — wide desktops and up.",
+      "$value": {
+        "value": 1600,
+        "unit": "px"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+{
+  "radius": {
+    "none": {
+      "$type": "dimension",
+      "$description": "Square corners — tables, full-bleed surfaces, and elements flush to container edges.",
+      "$value": {
+        "value": 0,
+        "unit": "px"
+      }
+    },
+    "sm": {
+      "$type": "dimension",
+      "$description": "Small rounding — inputs, buttons, tags, and compact controls.",
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$description": "Medium rounding — cards, panels, and modals.",
+      "$value": {
+        "value": 8,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$description": "Large rounding — hero surfaces and prominent containers.",
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      }
+    },
+    "pill": {
+      "$type": "dimension",
+      "$description": "Fully rounded ends — pills, badges, and circular icon buttons.",
+      "$value": {
+        "value": 9999,
+        "unit": "px"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,100 @@
+{
+  "space": {
+    "0": {
+      "$type": "dimension",
+      "$description": "Spacing step 0 on the 4px grid (0px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 0,
+        "unit": "rem"
+      }
+    },
+    "1": {
+      "$type": "dimension",
+      "$description": "Spacing step 1 on the 4px grid (4px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 0.25,
+        "unit": "rem"
+      }
+    },
+    "2": {
+      "$type": "dimension",
+      "$description": "Spacing step 2 on the 4px grid (8px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 0.5,
+        "unit": "rem"
+      }
+    },
+    "3": {
+      "$type": "dimension",
+      "$description": "Spacing step 3 on the 4px grid (12px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 0.75,
+        "unit": "rem"
+      }
+    },
+    "4": {
+      "$type": "dimension",
+      "$description": "Spacing step 4 on the 4px grid (16px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 1,
+        "unit": "rem"
+      }
+    },
+    "5": {
+      "$type": "dimension",
+      "$description": "Spacing step 5 on the 4px grid (20px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 1.25,
+        "unit": "rem"
+      }
+    },
+    "6": {
+      "$type": "dimension",
+      "$description": "Spacing step 6 on the 4px grid (24px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 1.5,
+        "unit": "rem"
+      }
+    },
+    "8": {
+      "$type": "dimension",
+      "$description": "Spacing step 8 on the 4px grid (32px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 2,
+        "unit": "rem"
+      }
+    },
+    "10": {
+      "$type": "dimension",
+      "$description": "Spacing step 10 on the 4px grid (40px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 2.5,
+        "unit": "rem"
+      }
+    },
+    "12": {
+      "$type": "dimension",
+      "$description": "Spacing step 12 on the 4px grid (48px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 3,
+        "unit": "rem"
+      }
+    },
+    "14": {
+      "$type": "dimension",
+      "$description": "Spacing step 14 on the 4px grid (56px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 3.5,
+        "unit": "rem"
+      }
+    },
+    "16": {
+      "$type": "dimension",
+      "$description": "Spacing step 16 on the 4px grid (64px at the default root font size). Use for padding, margins, and gaps.",
+      "$value": {
+        "value": 4,
+        "unit": "rem"
+      }
+    }
+  }
+}

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

@@ -0,0 +1,240 @@
+{
+  "font-family": {
+    "sans": {
+      "$type": "fontFamily",
+      "$description": "Primary typeface — Public Sans (the NSW Government brand typeface) with system, Helvetica/Arial, and emoji fallbacks. Use for all UI and body text.",
+      "$value": [
+        "Public Sans",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Noto Sans",
+        "Helvetica",
+        "Arial",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji"
+      ]
+    },
+    "display": {
+      "$type": "fontFamily",
+      "$description": "Display typeface — currently the same stack as sans; a separate token so display/heading type can diverge from body text later without a breaking change.",
+      "$value": [
+        "Public Sans",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Noto Sans",
+        "Helvetica",
+        "Arial",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji"
+      ]
+    },
+    "system": {
+      "$type": "fontFamily",
+      "$description": "System typeface — currently the same stack as sans; a separate token for system-chrome contexts (toasts, native-feeling UI) that may diverge later.",
+      "$value": [
+        "Public Sans",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Noto Sans",
+        "Helvetica",
+        "Arial",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji"
+      ]
+    },
+    "mono": {
+      "$type": "fontFamily",
+      "$description": "Monospace stack — JetBrains Mono with ui-monospace and system fallbacks for code, tabular data, and technical content.",
+      "$value": [
+        "JetBrains Mono",
+        "ui-monospace",
+        "SFMono-Regular",
+        "SF Mono",
+        "Menlo",
+        "Consolas",
+        "Liberation Mono",
+        "monospace"
+      ]
+    }
+  },
+  "font-size": {
+    "12": {
+      "$type": "dimension",
+      "$description": "Font size 12px (0.75rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 0.75,
+        "unit": "rem"
+      }
+    },
+    "14": {
+      "$type": "dimension",
+      "$description": "Font size 14px (0.875rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 0.875,
+        "unit": "rem"
+      }
+    },
+    "16": {
+      "$type": "dimension",
+      "$description": "Font size 16px (1rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 1,
+        "unit": "rem"
+      }
+    },
+    "18": {
+      "$type": "dimension",
+      "$description": "Font size 18px (1.125rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 1.125,
+        "unit": "rem"
+      }
+    },
+    "20": {
+      "$type": "dimension",
+      "$description": "Font size 20px (1.25rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 1.25,
+        "unit": "rem"
+      }
+    },
+    "22": {
+      "$type": "dimension",
+      "$description": "Font size 22px (1.375rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 1.375,
+        "unit": "rem"
+      }
+    },
+    "24": {
+      "$type": "dimension",
+      "$description": "Font size 24px (1.5rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 1.5,
+        "unit": "rem"
+      }
+    },
+    "30": {
+      "$type": "dimension",
+      "$description": "Font size 30px (1.875rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 1.875,
+        "unit": "rem"
+      }
+    },
+    "36": {
+      "$type": "dimension",
+      "$description": "Font size 36px (2.25rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 2.25,
+        "unit": "rem"
+      }
+    },
+    "48": {
+      "$type": "dimension",
+      "$description": "Font size 48px (3rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 3,
+        "unit": "rem"
+      }
+    },
+    "56": {
+      "$type": "dimension",
+      "$description": "Font size 56px (3.5rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 3.5,
+        "unit": "rem"
+      }
+    },
+    "64": {
+      "$type": "dimension",
+      "$description": "Font size 64px (4rem) — the step name is the px value at the default root font size.",
+      "$value": {
+        "value": 4,
+        "unit": "rem"
+      }
+    }
+  },
+  "font-weight": {
+    "light": {
+      "$type": "fontWeight",
+      "$description": "Light (300) — large display text only; avoid at body sizes for legibility.",
+      "$value": 300
+    },
+    "regular": {
+      "$type": "fontWeight",
+      "$description": "Regular (400) — default body text weight.",
+      "$value": 400
+    },
+    "medium": {
+      "$type": "fontWeight",
+      "$description": "Medium (500) — subtle emphasis, labels, and navigation.",
+      "$value": 500
+    },
+    "semibold": {
+      "$type": "fontWeight",
+      "$description": "Semibold (600) — headings and strong emphasis.",
+      "$value": 600
+    },
+    "bold": {
+      "$type": "fontWeight",
+      "$description": "Bold (700) — highest emphasis; key figures and primary headings.",
+      "$value": 700
+    }
+  },
+  "line-height": {
+    "none": {
+      "$type": "number",
+      "$description": "Solid (1) — display headings set at their own size (48/48, 56/56, 64/64 in the prose scale).",
+      "$value": 1
+    },
+    "tight": {
+      "$type": "number",
+      "$description": "Tight (1.2) — large headings (36/30 in the prose scale).",
+      "$value": 1.2
+    },
+    "snug": {
+      "$type": "number",
+      "$description": "Snug (1.3333333) — mid-size headings (32/24, 40/30 in the prose scale).",
+      "$value": 1.3333333
+    },
+    "base": {
+      "$type": "number",
+      "$description": "Base (1.5) — default for UI text and dense content (24/16, 36/24 in the prose scale); meets WCAG 1.4.12 text-spacing.",
+      "$value": 1.5
+    },
+    "relaxed": {
+      "$type": "number",
+      "$description": "Relaxed (1.6) — subheadings and lead text (32/20 in the prose scale).",
+      "$value": 1.6
+    },
+    "loose": {
+      "$type": "number",
+      "$description": "Loose (1.75) — long-form body text (28/16 in the prose scale).",
+      "$value": 1.75
+    }
+  },
+  "letter-spacing": {
+    "tight": {
+      "$type": "number",
+      "$description": "Tight tracking (-0.0125em) — large display headings. Value is an em multiplier; string outputs render it with the em unit.",
+      "$value": -0.0125
+    },
+    "normal": {
+      "$type": "number",
+      "$description": "Normal tracking (0em) — default for body text. Value is an em multiplier; string outputs render it with the em unit.",
+      "$value": 0
+    },
+    "wide": {
+      "$type": "number",
+      "$description": "Wide tracking (0.025em) — small caps, overlines, and small labels. Value is an em multiplier; string outputs render it with the em unit.",
+      "$value": 0.025
+    }
+  }
+}

package/dist/tokens/radius.base.json

@@ -0,0 +1,44 @@
+{
+  "radius": {
+    "none": {
+      "$type": "dimension",
+      "$description": "Square corners — tables, full-bleed surfaces, and elements flush to container edges.",
+      "$value": {
+        "value": 0,
+        "unit": "px"
+      }
+    },
+    "sm": {
+      "$type": "dimension",
+      "$description": "Small rounding — inputs, buttons, tags, and compact controls.",
+      "$value": {
+        "value": 4,
+        "unit": "px"
+      }
+    },
+    "md": {
+      "$type": "dimension",
+      "$description": "Medium rounding — cards, panels, and modals.",
+      "$value": {
+        "value": 8,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$type": "dimension",
+      "$description": "Large rounding — hero surfaces and prominent containers.",
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      }
+    },
+    "pill": {
+      "$type": "dimension",
+      "$description": "Fully rounded ends — pills, badges, and circular icon buttons.",
+      "$value": {
+        "value": 9999,
+        "unit": "px"
+      }
+    }
+  }
+}