@nswds/tokens 3.1.0 → 3.3.0

package/dist/css/typography/global.css

@@ -0,0 +1,33 @@
+: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. */
+  --font-weight-extrabold: 800; /** Extrabold (800) — hero/display headings (the prose scale uses 800 for h1). */
+  --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. */
+}

package/dist/css/typography/semantic.css

@@ -0,0 +1,56 @@
+:root {
+  --typography-heading-1-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-heading-1-font-size: 2.25rem;
+  --typography-heading-1-font-weight: 800;
+  --typography-heading-1-line-height: 1.2;
+  --typography-heading-1-letter-spacing: -0.0125em;
+  --typography-heading-1: 800 2.25rem/1.2 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-heading-2-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-heading-2-font-size: 1.5rem;
+  --typography-heading-2-font-weight: 700;
+  --typography-heading-2-line-height: 1.3333333;
+  --typography-heading-2-letter-spacing: 0em;
+  --typography-heading-2: 700 1.5rem/1.3333333 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-heading-3-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-heading-3-font-size: 1.25rem;
+  --typography-heading-3-font-weight: 600;
+  --typography-heading-3-line-height: 1.6;
+  --typography-heading-3-letter-spacing: 0em;
+  --typography-heading-3: 600 1.25rem/1.6 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-heading-4-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-heading-4-font-size: 1rem;
+  --typography-heading-4-font-weight: 600;
+  --typography-heading-4-line-height: 1.5;
+  --typography-heading-4-letter-spacing: 0em;
+  --typography-heading-4: 600 1rem/1.5 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-body-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-body-font-size: 1rem;
+  --typography-body-font-weight: 400;
+  --typography-body-line-height: 1.75;
+  --typography-body-letter-spacing: 0em;
+  --typography-body: 400 1rem/1.75 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-body-sm-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-body-sm-font-size: 0.875rem;
+  --typography-body-sm-font-weight: 400;
+  --typography-body-sm-line-height: 1.75;
+  --typography-body-sm-letter-spacing: 0em;
+  --typography-body-sm: 400 0.875rem/1.75 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-lead-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-lead-font-size: 1.25rem;
+  --typography-lead-font-weight: 400;
+  --typography-lead-line-height: 1.6;
+  --typography-lead-letter-spacing: 0em;
+  --typography-lead: 400 1.25rem/1.6 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-caption-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-caption-font-size: 0.75rem;
+  --typography-caption-font-weight: 400;
+  --typography-caption-line-height: 1.5;
+  --typography-caption-letter-spacing: 0.025em;
+  --typography-caption: 400 0.75rem/1.5 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  --typography-code-font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+  --typography-code-font-size: 0.875rem;
+  --typography-code-font-weight: 400;
+  --typography-code-line-height: 1.5;
+  --typography-code-letter-spacing: 0em;
+  --typography-code: 400 0.875rem/1.5 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+}