@nswds/tokens 3.1.0 → 3.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/css/typography/global.css +33 -0
  2. package/dist/css/typography/semantic.css +56 -0
  3. package/dist/index.cjs +499 -65
  4. package/dist/index.cjs.map +1 -1
  5. package/dist/index.d.cts +365 -0
  6. package/dist/index.d.ts +365 -0
  7. package/dist/index.js +499 -65
  8. package/dist/index.js.map +1 -1
  9. package/dist/js/typography/global.js +43 -0
  10. package/dist/js/typography/semantic.js +72 -0
  11. package/dist/json/typography/global.json +43 -0
  12. package/dist/json/typography/semantic.json +65 -0
  13. package/dist/less/typography/global.less +31 -0
  14. package/dist/less/typography/semantic.less +45 -0
  15. package/dist/scss/typography/global.scss +31 -0
  16. package/dist/scss/typography/semantic.scss +45 -0
  17. package/dist/tailwind/typography/global.css +33 -0
  18. package/dist/tokens/global/typography/canonical.json +245 -0
  19. package/dist/tokens/semantic/typography/canonical.json +103 -0
  20. package/dist/tokens/typography.base.json +245 -0
  21. package/dist/ts/typography/global.ts +43 -0
  22. package/dist/ts/typography/semantic.ts +72 -0
  23. package/package.json +1 -1
package/dist/js/typography/global.js ADDED
@@ -0,0 +1,43 @@
1
+ export const fontFamily = {
2
+ sans: "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
3
+ display:
4
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
5
+ system:
6
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
7
+ mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
8
+ }
9
+ export const fontSize = {
10
+ 12: '0.75rem',
11
+ 14: '0.875rem',
12
+ 16: '1rem',
13
+ 18: '1.125rem',
14
+ 20: '1.25rem',
15
+ 22: '1.375rem',
16
+ 24: '1.5rem',
17
+ 30: '1.875rem',
18
+ 36: '2.25rem',
19
+ 48: '3rem',
20
+ 56: '3.5rem',
21
+ 64: '4rem',
22
+ }
23
+ export const fontWeight = {
24
+ light: 300,
25
+ regular: 400,
26
+ medium: 500,
27
+ semibold: 600,
28
+ bold: 700,
29
+ extrabold: 800,
30
+ }
31
+ export const lineHeight = {
32
+ none: 1,
33
+ tight: 1.2,
34
+ snug: 1.3333333,
35
+ base: 1.5,
36
+ relaxed: 1.6,
37
+ loose: 1.75,
38
+ }
39
+ export const letterSpacing = {
40
+ tight: '-0.0125em',
41
+ normal: '0em',
42
+ wide: '0.025em',
43
+ }
package/dist/js/typography/semantic.js ADDED
@@ -0,0 +1,72 @@
1
+ export const heading1 = {
2
+ fontFamily:
3
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
4
+ fontSize: '2.25rem',
5
+ fontWeight: 800,
6
+ lineHeight: 1.2,
7
+ letterSpacing: '-0.0125em',
8
+ }
9
+ export const heading2 = {
10
+ fontFamily:
11
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
12
+ fontSize: '1.5rem',
13
+ fontWeight: 700,
14
+ lineHeight: 1.3333333,
15
+ letterSpacing: '0em',
16
+ }
17
+ export const heading3 = {
18
+ fontFamily:
19
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
20
+ fontSize: '1.25rem',
21
+ fontWeight: 600,
22
+ lineHeight: 1.6,
23
+ letterSpacing: '0em',
24
+ }
25
+ export const heading4 = {
26
+ fontFamily:
27
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
28
+ fontSize: '1rem',
29
+ fontWeight: 600,
30
+ lineHeight: 1.5,
31
+ letterSpacing: '0em',
32
+ }
33
+ export const body = {
34
+ fontFamily:
35
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
36
+ fontSize: '1rem',
37
+ fontWeight: 400,
38
+ lineHeight: 1.75,
39
+ letterSpacing: '0em',
40
+ }
41
+ export const bodySm = {
42
+ fontFamily:
43
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
44
+ fontSize: '0.875rem',
45
+ fontWeight: 400,
46
+ lineHeight: 1.75,
47
+ letterSpacing: '0em',
48
+ }
49
+ export const lead = {
50
+ fontFamily:
51
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
52
+ fontSize: '1.25rem',
53
+ fontWeight: 400,
54
+ lineHeight: 1.6,
55
+ letterSpacing: '0em',
56
+ }
57
+ export const caption = {
58
+ fontFamily:
59
+ "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
60
+ fontSize: '0.75rem',
61
+ fontWeight: 400,
62
+ lineHeight: 1.5,
63
+ letterSpacing: '0.025em',
64
+ }
65
+ export const code = {
66
+ fontFamily:
67
+ "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
68
+ fontSize: '0.875rem',
69
+ fontWeight: 400,
70
+ lineHeight: 1.5,
71
+ letterSpacing: '0em',
72
+ }
package/dist/json/typography/global.json ADDED
@@ -0,0 +1,43 @@
1
+ {
2
+ "font-family": {
3
+ "font-family-sans": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
4
+ "font-family-display": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
5
+ "font-family-system": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
6
+ "font-family-mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace"
7
+ },
8
+ "font-size": {
9
+ "font-size-12": "0.75rem",
10
+ "font-size-14": "0.875rem",
11
+ "font-size-16": "1rem",
12
+ "font-size-18": "1.125rem",
13
+ "font-size-20": "1.25rem",
14
+ "font-size-22": "1.375rem",
15
+ "font-size-24": "1.5rem",
16
+ "font-size-30": "1.875rem",
17
+ "font-size-36": "2.25rem",
18
+ "font-size-48": "3rem",
19
+ "font-size-56": "3.5rem",
20
+ "font-size-64": "4rem"
21
+ },
22
+ "font-weight": {
23
+ "font-weight-light": 300,
24
+ "font-weight-regular": 400,
25
+ "font-weight-medium": 500,
26
+ "font-weight-semibold": 600,
27
+ "font-weight-bold": 700,
28
+ "font-weight-extrabold": 800
29
+ },
30
+ "line-height": {
31
+ "line-height-none": 1,
32
+ "line-height-tight": 1.2,
33
+ "line-height-snug": 1.3333333,
34
+ "line-height-base": 1.5,
35
+ "line-height-relaxed": 1.6,
36
+ "line-height-loose": 1.75
37
+ },
38
+ "letter-spacing": {
39
+ "letter-spacing-tight": "-0.0125em",
40
+ "letter-spacing-normal": "0em",
41
+ "letter-spacing-wide": "0.025em"
42
+ }
43
+ }
package/dist/json/typography/semantic.json ADDED
@@ -0,0 +1,65 @@
1
+ {
2
+ "heading-1": {
3
+ "fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
4
+ "fontSize": "2.25rem",
5
+ "fontWeight": 800,
6
+ "lineHeight": 1.2,
7
+ "letterSpacing": "-0.0125em"
8
+ },
9
+ "heading-2": {
10
+ "fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
11
+ "fontSize": "1.5rem",
12
+ "fontWeight": 700,
13
+ "lineHeight": 1.3333333,
14
+ "letterSpacing": "0em"
15
+ },
16
+ "heading-3": {
17
+ "fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
18
+ "fontSize": "1.25rem",
19
+ "fontWeight": 600,
20
+ "lineHeight": 1.6,
21
+ "letterSpacing": "0em"
22
+ },
23
+ "heading-4": {
24
+ "fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
25
+ "fontSize": "1rem",
26
+ "fontWeight": 600,
27
+ "lineHeight": 1.5,
28
+ "letterSpacing": "0em"
29
+ },
30
+ "body": {
31
+ "fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
32
+ "fontSize": "1rem",
33
+ "fontWeight": 400,
34
+ "lineHeight": 1.75,
35
+ "letterSpacing": "0em"
36
+ },
37
+ "body-sm": {
38
+ "fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
39
+ "fontSize": "0.875rem",
40
+ "fontWeight": 400,
41
+ "lineHeight": 1.75,
42
+ "letterSpacing": "0em"
43
+ },
44
+ "lead": {
45
+ "fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
46
+ "fontSize": "1.25rem",
47
+ "fontWeight": 400,
48
+ "lineHeight": 1.6,
49
+ "letterSpacing": "0em"
50
+ },
51
+ "caption": {
52
+ "fontFamily": "'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
53
+ "fontSize": "0.75rem",
54
+ "fontWeight": 400,
55
+ "lineHeight": 1.5,
56
+ "letterSpacing": "0.025em"
57
+ },
58
+ "code": {
59
+ "fontFamily": "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
60
+ "fontSize": "0.875rem",
61
+ "fontWeight": 400,
62
+ "lineHeight": 1.5,
63
+ "letterSpacing": "0em"
64
+ }
65
+ }
package/dist/less/typography/global.less ADDED
@@ -0,0 +1,31 @@
1
+ @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.
2
+ @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.
3
+ @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.
4
+ @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.
5
+ @font-size-12: 0.75rem; // Font size 12px (0.75rem) — the step name is the px value at the default root font size.
6
+ @font-size-14: 0.875rem; // Font size 14px (0.875rem) — the step name is the px value at the default root font size.
7
+ @font-size-16: 1rem; // Font size 16px (1rem) — the step name is the px value at the default root font size.
8
+ @font-size-18: 1.125rem; // Font size 18px (1.125rem) — the step name is the px value at the default root font size.
9
+ @font-size-20: 1.25rem; // Font size 20px (1.25rem) — the step name is the px value at the default root font size.
10
+ @font-size-22: 1.375rem; // Font size 22px (1.375rem) — the step name is the px value at the default root font size.
11
+ @font-size-24: 1.5rem; // Font size 24px (1.5rem) — the step name is the px value at the default root font size.
12
+ @font-size-30: 1.875rem; // Font size 30px (1.875rem) — the step name is the px value at the default root font size.
13
+ @font-size-36: 2.25rem; // Font size 36px (2.25rem) — the step name is the px value at the default root font size.
14
+ @font-size-48: 3rem; // Font size 48px (3rem) — the step name is the px value at the default root font size.
15
+ @font-size-56: 3.5rem; // Font size 56px (3.5rem) — the step name is the px value at the default root font size.
16
+ @font-size-64: 4rem; // Font size 64px (4rem) — the step name is the px value at the default root font size.
17
+ @font-weight-light: 300; // Light (300) — large display text only; avoid at body sizes for legibility.
18
+ @font-weight-regular: 400; // Regular (400) — default body text weight.
19
+ @font-weight-medium: 500; // Medium (500) — subtle emphasis, labels, and navigation.
20
+ @font-weight-semibold: 600; // Semibold (600) — headings and strong emphasis.
21
+ @font-weight-bold: 700; // Bold (700) — highest emphasis; key figures and primary headings.
22
+ @font-weight-extrabold: 800; // Extrabold (800) — hero/display headings (the prose scale uses 800 for h1).
23
+ @line-height-none: 1; // Solid (1) — display headings set at their own size (48/48, 56/56, 64/64 in the prose scale).
24
+ @line-height-tight: 1.2; // Tight (1.2) — large headings (36/30 in the prose scale).
25
+ @line-height-snug: 1.3333333; // Snug (1.3333333) — mid-size headings (32/24, 40/30 in the prose scale).
26
+ @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.
27
+ @line-height-relaxed: 1.6; // Relaxed (1.6) — subheadings and lead text (32/20 in the prose scale).
28
+ @line-height-loose: 1.75; // Loose (1.75) — long-form body text (28/16 in the prose scale).
29
+ @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.
30
+ @letter-spacing-normal: 0em; // Normal tracking (0em) — default for body text. Value is an em multiplier; string outputs render it with the em unit.
31
+ @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/less/typography/semantic.less ADDED
@@ -0,0 +1,45 @@
1
+ @typography-heading-1-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
2
+ @typography-heading-1-font-size: 2.25rem;
3
+ @typography-heading-1-font-weight: 800;
4
+ @typography-heading-1-line-height: 1.2;
5
+ @typography-heading-1-letter-spacing: -0.0125em;
6
+ @typography-heading-2-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
7
+ @typography-heading-2-font-size: 1.5rem;
8
+ @typography-heading-2-font-weight: 700;
9
+ @typography-heading-2-line-height: 1.3333333;
10
+ @typography-heading-2-letter-spacing: 0em;
11
+ @typography-heading-3-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
12
+ @typography-heading-3-font-size: 1.25rem;
13
+ @typography-heading-3-font-weight: 600;
14
+ @typography-heading-3-line-height: 1.6;
15
+ @typography-heading-3-letter-spacing: 0em;
16
+ @typography-heading-4-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
17
+ @typography-heading-4-font-size: 1rem;
18
+ @typography-heading-4-font-weight: 600;
19
+ @typography-heading-4-line-height: 1.5;
20
+ @typography-heading-4-letter-spacing: 0em;
21
+ @typography-body-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
22
+ @typography-body-font-size: 1rem;
23
+ @typography-body-font-weight: 400;
24
+ @typography-body-line-height: 1.75;
25
+ @typography-body-letter-spacing: 0em;
26
+ @typography-body-sm-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
27
+ @typography-body-sm-font-size: 0.875rem;
28
+ @typography-body-sm-font-weight: 400;
29
+ @typography-body-sm-line-height: 1.75;
30
+ @typography-body-sm-letter-spacing: 0em;
31
+ @typography-lead-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
32
+ @typography-lead-font-size: 1.25rem;
33
+ @typography-lead-font-weight: 400;
34
+ @typography-lead-line-height: 1.6;
35
+ @typography-lead-letter-spacing: 0em;
36
+ @typography-caption-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
37
+ @typography-caption-font-size: 0.75rem;
38
+ @typography-caption-font-weight: 400;
39
+ @typography-caption-line-height: 1.5;
40
+ @typography-caption-letter-spacing: 0.025em;
41
+ @typography-code-font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
42
+ @typography-code-font-size: 0.875rem;
43
+ @typography-code-font-weight: 400;
44
+ @typography-code-line-height: 1.5;
45
+ @typography-code-letter-spacing: 0em;
package/dist/scss/typography/global.scss ADDED
@@ -0,0 +1,31 @@
1
+ $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.
2
+ $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.
3
+ $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.
4
+ $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.
5
+ $font-size-12: 0.75rem; // Font size 12px (0.75rem) — the step name is the px value at the default root font size.
6
+ $font-size-14: 0.875rem; // Font size 14px (0.875rem) — the step name is the px value at the default root font size.
7
+ $font-size-16: 1rem; // Font size 16px (1rem) — the step name is the px value at the default root font size.
8
+ $font-size-18: 1.125rem; // Font size 18px (1.125rem) — the step name is the px value at the default root font size.
9
+ $font-size-20: 1.25rem; // Font size 20px (1.25rem) — the step name is the px value at the default root font size.
10
+ $font-size-22: 1.375rem; // Font size 22px (1.375rem) — the step name is the px value at the default root font size.
11
+ $font-size-24: 1.5rem; // Font size 24px (1.5rem) — the step name is the px value at the default root font size.
12
+ $font-size-30: 1.875rem; // Font size 30px (1.875rem) — the step name is the px value at the default root font size.
13
+ $font-size-36: 2.25rem; // Font size 36px (2.25rem) — the step name is the px value at the default root font size.
14
+ $font-size-48: 3rem; // Font size 48px (3rem) — the step name is the px value at the default root font size.
15
+ $font-size-56: 3.5rem; // Font size 56px (3.5rem) — the step name is the px value at the default root font size.
16
+ $font-size-64: 4rem; // Font size 64px (4rem) — the step name is the px value at the default root font size.
17
+ $font-weight-light: 300; // Light (300) — large display text only; avoid at body sizes for legibility.
18
+ $font-weight-regular: 400; // Regular (400) — default body text weight.
19
+ $font-weight-medium: 500; // Medium (500) — subtle emphasis, labels, and navigation.
20
+ $font-weight-semibold: 600; // Semibold (600) — headings and strong emphasis.
21
+ $font-weight-bold: 700; // Bold (700) — highest emphasis; key figures and primary headings.
22
+ $font-weight-extrabold: 800; // Extrabold (800) — hero/display headings (the prose scale uses 800 for h1).
23
+ $line-height-none: 1; // Solid (1) — display headings set at their own size (48/48, 56/56, 64/64 in the prose scale).
24
+ $line-height-tight: 1.2; // Tight (1.2) — large headings (36/30 in the prose scale).
25
+ $line-height-snug: 1.3333333; // Snug (1.3333333) — mid-size headings (32/24, 40/30 in the prose scale).
26
+ $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.
27
+ $line-height-relaxed: 1.6; // Relaxed (1.6) — subheadings and lead text (32/20 in the prose scale).
28
+ $line-height-loose: 1.75; // Loose (1.75) — long-form body text (28/16 in the prose scale).
29
+ $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.
30
+ $letter-spacing-normal: 0em; // Normal tracking (0em) — default for body text. Value is an em multiplier; string outputs render it with the em unit.
31
+ $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/scss/typography/semantic.scss ADDED
@@ -0,0 +1,45 @@
1
+ $typography-heading-1-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
2
+ $typography-heading-1-font-size: 2.25rem;
3
+ $typography-heading-1-font-weight: 800;
4
+ $typography-heading-1-line-height: 1.2;
5
+ $typography-heading-1-letter-spacing: -0.0125em;
6
+ $typography-heading-2-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
7
+ $typography-heading-2-font-size: 1.5rem;
8
+ $typography-heading-2-font-weight: 700;
9
+ $typography-heading-2-line-height: 1.3333333;
10
+ $typography-heading-2-letter-spacing: 0em;
11
+ $typography-heading-3-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
12
+ $typography-heading-3-font-size: 1.25rem;
13
+ $typography-heading-3-font-weight: 600;
14
+ $typography-heading-3-line-height: 1.6;
15
+ $typography-heading-3-letter-spacing: 0em;
16
+ $typography-heading-4-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
17
+ $typography-heading-4-font-size: 1rem;
18
+ $typography-heading-4-font-weight: 600;
19
+ $typography-heading-4-line-height: 1.5;
20
+ $typography-heading-4-letter-spacing: 0em;
21
+ $typography-body-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
22
+ $typography-body-font-size: 1rem;
23
+ $typography-body-font-weight: 400;
24
+ $typography-body-line-height: 1.75;
25
+ $typography-body-letter-spacing: 0em;
26
+ $typography-body-sm-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
27
+ $typography-body-sm-font-size: 0.875rem;
28
+ $typography-body-sm-font-weight: 400;
29
+ $typography-body-sm-line-height: 1.75;
30
+ $typography-body-sm-letter-spacing: 0em;
31
+ $typography-lead-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
32
+ $typography-lead-font-size: 1.25rem;
33
+ $typography-lead-font-weight: 400;
34
+ $typography-lead-line-height: 1.6;
35
+ $typography-lead-letter-spacing: 0em;
36
+ $typography-caption-font-family: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
37
+ $typography-caption-font-size: 0.75rem;
38
+ $typography-caption-font-weight: 400;
39
+ $typography-caption-line-height: 1.5;
40
+ $typography-caption-letter-spacing: 0.025em;
41
+ $typography-code-font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
42
+ $typography-code-font-size: 0.875rem;
43
+ $typography-code-font-weight: 400;
44
+ $typography-code-line-height: 1.5;
45
+ $typography-code-letter-spacing: 0em;
package/dist/tailwind/typography/global.css ADDED
@@ -0,0 +1,33 @@
1
+ @theme {
2
+ --font-sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
3
+ --font-display: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
4
+ --font-system: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
5
+ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
6
+ --text-12: 0.75rem;
7
+ --text-14: 0.875rem;
8
+ --text-16: 1rem;
9
+ --text-18: 1.125rem;
10
+ --text-20: 1.25rem;
11
+ --text-22: 1.375rem;
12
+ --text-24: 1.5rem;
13
+ --text-30: 1.875rem;
14
+ --text-36: 2.25rem;
15
+ --text-48: 3rem;
16
+ --text-56: 3.5rem;
17
+ --text-64: 4rem;
18
+ --font-weight-light: 300;
19
+ --font-weight-regular: 400;
20
+ --font-weight-medium: 500;
21
+ --font-weight-semibold: 600;
22
+ --font-weight-bold: 700;
23
+ --font-weight-extrabold: 800;
24
+ --leading-none: 1;
25
+ --leading-tight: 1.2;
26
+ --leading-snug: 1.3333333;
27
+ --leading-base: 1.5;
28
+ --leading-relaxed: 1.6;
29
+ --leading-loose: 1.75;
30
+ --tracking-tight: -0.0125em;
31
+ --tracking-normal: 0em;
32
+ --tracking-wide: 0.025em;
33
+ }