@nswds/tokens 3.0.1 → 3.2.0

package/dist/css/colors/themes/masterbrand/rgb.css

@@ -1,59 +1,59 @@
 :root {
-  --primary-50: rgb(240, 251, 255);
-  --primary-100: rgb(228, 246, 255);
-  --primary-150: rgb(215, 242, 254);
-  --primary-200: rgb(203, 237, 253);
-  --primary-250: rgb(188, 234, 254);
-  --primary-300: rgb(173, 231, 255);
-  --primary-350: rgb(157, 227, 255);
-  --primary-400: rgb(140, 224, 255);
-  --primary-450: rgb(90, 201, 255);
-  --primary-500: rgb(38, 174, 255);
-  --primary-550: rgb(0, 143, 255);
-  --primary-600: rgb(20, 108, 253);
-  --primary-650: rgb(12, 90, 212);
-  --primary-700: rgb(5, 72, 173);
-  --primary-750: rgb(2, 54, 136);
-  --primary-800: rgb(0, 38, 100);
-  --primary-850: rgb(0, 26, 77);
-  --primary-900: rgb(0, 16, 55);
-  --primary-950: rgb(0, 6, 34);
-  --accent-50: rgb(255, 248, 249);
-  --accent-100: rgb(255, 242, 244);
-  --accent-150: rgb(255, 236, 239);
-  --accent-200: rgb(255, 230, 234);
-  --accent-250: rgb(255, 219, 224);
-  --accent-300: rgb(255, 207, 214);
-  --accent-350: rgb(255, 196, 204);
-  --accent-400: rgb(255, 184, 193);
-  --accent-450: rgb(248, 151, 162);
-  --accent-500: rgb(239, 117, 129);
-  --accent-550: rgb(228, 79, 95);
-  --accent-600: rgb(215, 21, 58);
-  --accent-650: rgb(185, 14, 50);
-  --accent-700: rgb(155, 7, 42);
-  --accent-750: rgb(126, 3, 34);
-  --accent-800: rgb(99, 0, 25);
-  --accent-850: rgb(76, 0, 16);
-  --accent-900: rgb(54, 0, 8);
-  --accent-950: rgb(33, 0, 3);
-  --grey-50: rgb(250, 250, 250);
-  --grey-100: rgb(245, 245, 245);
-  --grey-150: rgb(240, 240, 240);
-  --grey-200: rgb(235, 235, 235);
-  --grey-250: rgb(227, 229, 230);
-  --grey-300: rgb(220, 223, 224);
-  --grey-350: rgb(212, 217, 219);
-  --grey-400: rgb(205, 211, 214);
-  --grey-450: rgb(170, 176, 180);
-  --grey-500: rgb(136, 143, 146);
-  --grey-550: rgb(104, 111, 114);
-  --grey-600: rgb(73, 80, 84);
-  --grey-650: rgb(63, 69, 73);
-  --grey-700: rgb(53, 59, 63);
-  --grey-750: rgb(43, 49, 53);
-  --grey-800: rgb(34, 39, 43);
-  --grey-850: rgb(24, 28, 31);
-  --grey-900: rgb(14, 17, 19);
-  --grey-950: rgb(5, 7, 9);
+  --primary-50: rgb(240, 251, 255); /** Primary brand colour — primary actions, links, and key accents. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --primary-100: rgb(228, 246, 255); /** Primary brand colour — primary actions, links, and key accents. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --primary-150: rgb(215, 242, 254); /** Primary brand colour — primary actions, links, and key accents. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --primary-200: rgb(203, 237, 253); /** Primary brand colour — primary actions, links, and key accents. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --primary-250: rgb(188, 234, 254); /** Primary brand colour — primary actions, links, and key accents. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --primary-300: rgb(173, 231, 255); /** Primary brand colour — primary actions, links, and key accents. Step 300: light tints. */
+  --primary-350: rgb(157, 227, 255); /** Primary brand colour — primary actions, links, and key accents. Step 350: light tints. */
+  --primary-400: rgb(140, 224, 255); /** Primary brand colour — primary actions, links, and key accents. Step 400: light tints. */
+  --primary-450: rgb(90, 201, 255); /** Primary brand colour — primary actions, links, and key accents. Step 450: light tints. */
+  --primary-500: rgb(38, 174, 255); /** Primary brand colour — primary actions, links, and key accents. Step 500: base colour. */
+  --primary-550: rgb(0, 143, 255); /** Primary brand colour — primary actions, links, and key accents. Step 550: shades for borders and icons. */
+  --primary-600: rgb(20, 108, 253); /** Primary brand colour — primary actions, links, and key accents. Step 600: shades for borders and icons. */
+  --primary-650: rgb(12, 90, 212); /** Primary brand colour — primary actions, links, and key accents. Step 650: shades for borders and icons. */
+  --primary-700: rgb(5, 72, 173); /** Primary brand colour — primary actions, links, and key accents. Step 700: shades for borders and icons. */
+  --primary-750: rgb(2, 54, 136); /** Primary brand colour — primary actions, links, and key accents. Step 750: darkest shades for text and high emphasis. */
+  --primary-800: rgb(0, 38, 100); /** Primary brand colour — primary actions, links, and key accents. Step 800: darkest shades for text and high emphasis. */
+  --primary-850: rgb(0, 26, 77); /** Primary brand colour — primary actions, links, and key accents. Step 850: darkest shades for text and high emphasis. */
+  --primary-900: rgb(0, 16, 55); /** Primary brand colour — primary actions, links, and key accents. Step 900: darkest shades for text and high emphasis. */
+  --primary-950: rgb(0, 6, 34); /** Primary brand colour — primary actions, links, and key accents. Step 950: darkest shades for text and high emphasis. */
+  --accent-50: rgb(255, 248, 249); /** Accent colour — secondary emphasis and supporting highlights. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --accent-100: rgb(255, 242, 244); /** Accent colour — secondary emphasis and supporting highlights. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --accent-150: rgb(255, 236, 239); /** Accent colour — secondary emphasis and supporting highlights. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --accent-200: rgb(255, 230, 234); /** Accent colour — secondary emphasis and supporting highlights. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --accent-250: rgb(255, 219, 224); /** Accent colour — secondary emphasis and supporting highlights. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --accent-300: rgb(255, 207, 214); /** Accent colour — secondary emphasis and supporting highlights. Step 300: light tints. */
+  --accent-350: rgb(255, 196, 204); /** Accent colour — secondary emphasis and supporting highlights. Step 350: light tints. */
+  --accent-400: rgb(255, 184, 193); /** Accent colour — secondary emphasis and supporting highlights. Step 400: light tints. */
+  --accent-450: rgb(248, 151, 162); /** Accent colour — secondary emphasis and supporting highlights. Step 450: light tints. */
+  --accent-500: rgb(239, 117, 129); /** Accent colour — secondary emphasis and supporting highlights. Step 500: base colour. */
+  --accent-550: rgb(228, 79, 95); /** Accent colour — secondary emphasis and supporting highlights. Step 550: shades for borders and icons. */
+  --accent-600: rgb(215, 21, 58); /** Accent colour — secondary emphasis and supporting highlights. Step 600: shades for borders and icons. */
+  --accent-650: rgb(185, 14, 50); /** Accent colour — secondary emphasis and supporting highlights. Step 650: shades for borders and icons. */
+  --accent-700: rgb(155, 7, 42); /** Accent colour — secondary emphasis and supporting highlights. Step 700: shades for borders and icons. */
+  --accent-750: rgb(126, 3, 34); /** Accent colour — secondary emphasis and supporting highlights. Step 750: darkest shades for text and high emphasis. */
+  --accent-800: rgb(99, 0, 25); /** Accent colour — secondary emphasis and supporting highlights. Step 800: darkest shades for text and high emphasis. */
+  --accent-850: rgb(76, 0, 16); /** Accent colour — secondary emphasis and supporting highlights. Step 850: darkest shades for text and high emphasis. */
+  --accent-900: rgb(54, 0, 8); /** Accent colour — secondary emphasis and supporting highlights. Step 900: darkest shades for text and high emphasis. */
+  --accent-950: rgb(33, 0, 3); /** Accent colour — secondary emphasis and supporting highlights. Step 950: darkest shades for text and high emphasis. */
+  --grey-50: rgb(250, 250, 250); /** Neutral grey — text, borders, surfaces, and dividers. Step 50: lightest tints for subtle backgrounds and surfaces. */
+  --grey-100: rgb(245, 245, 245); /** Neutral grey — text, borders, surfaces, and dividers. Step 100: lightest tints for subtle backgrounds and surfaces. */
+  --grey-150: rgb(240, 240, 240); /** Neutral grey — text, borders, surfaces, and dividers. Step 150: lightest tints for subtle backgrounds and surfaces. */
+  --grey-200: rgb(235, 235, 235); /** Neutral grey — text, borders, surfaces, and dividers. Step 200: lightest tints for subtle backgrounds and surfaces. */
+  --grey-250: rgb(227, 229, 230); /** Neutral grey — text, borders, surfaces, and dividers. Step 250: lightest tints for subtle backgrounds and surfaces. */
+  --grey-300: rgb(220, 223, 224); /** Neutral grey — text, borders, surfaces, and dividers. Step 300: light tints. */
+  --grey-350: rgb(212, 217, 219); /** Neutral grey — text, borders, surfaces, and dividers. Step 350: light tints. */
+  --grey-400: rgb(205, 211, 214); /** Neutral grey — text, borders, surfaces, and dividers. Step 400: light tints. */
+  --grey-450: rgb(170, 176, 180); /** Neutral grey — text, borders, surfaces, and dividers. Step 450: light tints. */
+  --grey-500: rgb(136, 143, 146); /** Neutral grey — text, borders, surfaces, and dividers. Step 500: base colour. */
+  --grey-550: rgb(104, 111, 114); /** Neutral grey — text, borders, surfaces, and dividers. Step 550: shades for borders and icons. */
+  --grey-600: rgb(73, 80, 84); /** Neutral grey — text, borders, surfaces, and dividers. Step 600: shades for borders and icons. */
+  --grey-650: rgb(63, 69, 73); /** Neutral grey — text, borders, surfaces, and dividers. Step 650: shades for borders and icons. */
+  --grey-700: rgb(53, 59, 63); /** Neutral grey — text, borders, surfaces, and dividers. Step 700: shades for borders and icons. */
+  --grey-750: rgb(43, 49, 53); /** Neutral grey — text, borders, surfaces, and dividers. Step 750: darkest shades for text and high emphasis. */
+  --grey-800: rgb(34, 39, 43); /** Neutral grey — text, borders, surfaces, and dividers. Step 800: darkest shades for text and high emphasis. */
+  --grey-850: rgb(24, 28, 31); /** Neutral grey — text, borders, surfaces, and dividers. Step 850: darkest shades for text and high emphasis. */
+  --grey-900: rgb(14, 17, 19); /** Neutral grey — text, borders, surfaces, and dividers. Step 900: darkest shades for text and high emphasis. */
+  --grey-950: rgb(5, 7, 9); /** Neutral grey — text, borders, surfaces, and dividers. Step 950: darkest shades for text and high emphasis. */
 }

package/dist/css/radius/global.css

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

package/dist/css/space/global.css

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

package/dist/css/typography/global.css

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