@andabove/gum-tokens 0.1.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 (22) hide show
  1. package/LICENSE +10 -0
  2. package/README.md +42 -0
  3. package/package.json +32 -0
  4. package/src/index.css +20 -0
  5. package/src/primitives/borders.css +8 -0
  6. package/src/primitives/colors.css +159 -0
  7. package/src/primitives/layout.css +16 -0
  8. package/src/primitives/motion.css +3 -0
  9. package/src/primitives/opacity.css +18 -0
  10. package/src/primitives/radii.css +13 -0
  11. package/src/primitives/shadows.css +9 -0
  12. package/src/primitives/spacing.css +38 -0
  13. package/src/primitives/typography.css +34 -0
  14. package/src/semantic/borders.css +3 -0
  15. package/src/semantic/colors.css +130 -0
  16. package/src/semantic/dark.css +130 -0
  17. package/src/semantic/motion.css +3 -0
  18. package/src/semantic/radii.css +3 -0
  19. package/src/semantic/shadows.css +3 -0
  20. package/src/semantic/spacing.css +88 -0
  21. package/src/semantic/typography.css +3 -0
  22. package/tailwind/theme.css +373 -0
package/LICENSE ADDED
@@ -0,0 +1,10 @@
1
+ Copyright (c) 2026 AndAbove. All rights reserved.
2
+
3
+ This software and associated documentation files (the "Software") are the
4
+ proprietary and confidential property of AndAbove.
5
+
6
+ Unauthorised copying, modification, distribution, sublicensing, or use of the
7
+ Software, in whole or in part, is strictly prohibited without prior written
8
+ permission from AndAbove.
9
+
10
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND.
package/README.md ADDED
@@ -0,0 +1,42 @@
1
+ # @andabove/gum-tokens
2
+
3
+ Design tokens for GUM. Structure is fixed (primitives → semantic → Tailwind `@theme`). Values sync from Figma variables — never invent palettes here.
4
+
5
+ ## Exports
6
+
7
+ | Export | Path | Purpose |
8
+ | -------------------------------- | -------------------- | ---------------------------- |
9
+ | `@andabove/gum-tokens/style.css` | `src/index.css` | All CSS custom properties |
10
+ | `@andabove/gum-tokens/theme.css` | `tailwind/theme.css` | Tailwind v4 `@theme` mapping |
11
+
12
+ ## Snapshot and generation
13
+
14
+ Committed snapshot: `figma/tokens.json` (do not hand-edit values).
15
+
16
+ ```bash
17
+ # Regenerate CSS + theme from the committed snapshot
18
+ pnpm run generate:tokens
19
+
20
+ # Rebuild the snapshot from .tmp/figma-extract (maintainers only)
21
+ pnpm run assemble:tokens-json
22
+
23
+ # Drift and raw-value gates
24
+ pnpm run check:token-sync
25
+ pnpm run check:raw-values
26
+ ```
27
+
28
+ ## Fonts
29
+
30
+ Family tokens are `Google Sans Flex` (`--font-family-sans`) and `Google Sans Code` (`--font-family-mono`). This package does not ship `@font-face` rules; load the faces in the host app (Google Fonts CDN, Fontsource, or self-host). Storybook already loads them via `packages/ui/.storybook/preview-head.html`.
31
+
32
+ ## Dark mode
33
+
34
+ Semantic colour overrides live in `src/semantic/dark.css` under `[data-theme="dark"]`. Components never branch on theme in JS.
35
+
36
+ ## Naming
37
+
38
+ Figma path `Colours/Blue/500-default` → `--palette-blue-500-default`. Semantic `Colours/Text/primary` → `--color-text-primary`. See `docs/plans/001-foundations-tokens/plan.md` for the full mapping table.
39
+
40
+ ## License / usage
41
+
42
+ `UNLICENSED`. This package is published publicly for installation convenience, but no rights are granted by default; usage terms are at &above's discretion. Contact &above before using it outside &above projects.
package/package.json ADDED
@@ -0,0 +1,32 @@
1
+ {
2
+ "name": "@andabove/gum-tokens",
3
+ "version": "0.1.0",
4
+ "description": "GUM design tokens (CSS variables + Tailwind v4 theme)",
5
+ "license": "UNLICENSED",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "git+https://github.com/andabove/gum-foundation.git",
9
+ "directory": "packages/tokens"
10
+ },
11
+ "files": [
12
+ "src",
13
+ "tailwind",
14
+ "LICENSE"
15
+ ],
16
+ "type": "module",
17
+ "exports": {
18
+ "./style.css": "./src/index.css",
19
+ "./theme.css": "./tailwind/theme.css",
20
+ "./package.json": "./package.json"
21
+ },
22
+ "publishConfig": {
23
+ "access": "public"
24
+ },
25
+ "devDependencies": {
26
+ "typescript": "^5.9.3"
27
+ },
28
+ "scripts": {
29
+ "build": "node -e \"console.log('@andabove/gum-tokens: CSS package, nothing to build')\"",
30
+ "check": "node -e \"console.log('@andabove/gum-tokens: structure-only check ok')\""
31
+ }
32
+ }
package/src/index.css ADDED
@@ -0,0 +1,20 @@
1
+ /* Published entry: primitives + semantic (+ dark overrides). Shipped as "./style.css". */
2
+
3
+ @import "./primitives/colors.css";
4
+ @import "./primitives/borders.css";
5
+ @import "./primitives/spacing.css";
6
+ @import "./primitives/typography.css";
7
+ @import "./primitives/radii.css";
8
+ @import "./primitives/opacity.css";
9
+ @import "./primitives/shadows.css";
10
+ @import "./primitives/layout.css";
11
+ @import "./primitives/motion.css";
12
+
13
+ @import "./semantic/colors.css";
14
+ @import "./semantic/borders.css";
15
+ @import "./semantic/typography.css";
16
+ @import "./semantic/spacing.css";
17
+ @import "./semantic/radii.css";
18
+ @import "./semantic/shadows.css";
19
+ @import "./semantic/motion.css";
20
+ @import "./semantic/dark.css";
package/src/primitives/borders.css ADDED
@@ -0,0 +1,8 @@
1
+ /* Primitive border-width tokens. Generated from figma/tokens.json — do not hand-edit. */
2
+ :root {
3
+ --gum-border-width-default: 1px;
4
+ --gum-border-width-0: 0px;
5
+ --gum-border-width-2: 2px;
6
+ --gum-border-width-4: 4px;
7
+ --gum-border-width-hairline: 0.5px;
8
+ }
package/src/primitives/colors.css ADDED
@@ -0,0 +1,159 @@
1
+ /* Primitive colour tokens. Generated from figma/tokens.json — do not hand-edit. */
2
+ :root {
3
+ --gum-palette-base-black: #000000;
4
+ --gum-palette-base-transparent: rgba(255, 255, 255, 0);
5
+ --gum-palette-base-white: #ffffff;
6
+ --gum-palette-blue-10: #f6f9fe;
7
+ --gum-palette-blue-100: #aecbfa;
8
+ --gum-palette-blue-1000: #192967;
9
+ --gum-palette-blue-1100: #14204f;
10
+ --gum-palette-blue-1200: #0f173a;
11
+ --gum-palette-blue-20: #e8f0fe;
12
+ --gum-palette-blue-200: #8ab4f8;
13
+ --gum-palette-blue-300: #669df6;
14
+ --gum-palette-blue-400: #4285f4;
15
+ --gum-palette-blue-50: #d2e3fc;
16
+ --gum-palette-blue-500-default: #1a73e8;
17
+ --gum-palette-blue-600: #1967d2;
18
+ --gum-palette-blue-700: #185abc;
19
+ --gum-palette-blue-75: #c0daff;
20
+ --gum-palette-blue-800: #174ea6;
21
+ --gum-palette-blue-900: #1f3b9c;
22
+ --gum-palette-error-10: #fdf7f6;
23
+ --gum-palette-error-100: #f6aea9;
24
+ --gum-palette-error-1000: #760000;
25
+ --gum-palette-error-1100: #610000;
26
+ --gum-palette-error-1200: #390000;
27
+ --gum-palette-error-20: #fce8e6;
28
+ --gum-palette-error-200: #f28b82;
29
+ --gum-palette-error-300: #e9594d;
30
+ --gum-palette-error-400: #ea4335;
31
+ --gum-palette-error-50: #fad2cf;
32
+ --gum-palette-error-500-default: #d93025;
33
+ --gum-palette-error-600: #cc2722;
34
+ --gum-palette-error-700: #c11f1c;
35
+ --gum-palette-error-800: #a50e0e;
36
+ --gum-palette-error-900: #8b0000;
37
+ --gum-palette-gray-10: #f6f7f8;
38
+ --gum-palette-gray-100: #dadce0;
39
+ --gum-palette-gray-1000: #202124;
40
+ --gum-palette-gray-1100: #171a1f;
41
+ --gum-palette-gray-1200: #000000;
42
+ --gum-palette-gray-20: #f1f3f4;
43
+ --gum-palette-gray-200: #c4c7cc;
44
+ --gum-palette-gray-300: #b0b5ba;
45
+ --gum-palette-gray-400: #a2a7ae;
46
+ --gum-palette-gray-50: #e8eaed;
47
+ --gum-palette-gray-500: #9aa0a6;
48
+ --gum-palette-gray-600: #80868b;
49
+ --gum-palette-gray-700: #5f6368;
50
+ --gum-palette-gray-800: #3c4043;
51
+ --gum-palette-gray-900: #2d3135;
52
+ --gum-palette-green-10: #f6faf7;
53
+ --gum-palette-green-100: #a8dab5;
54
+ --gum-palette-green-1000: #005143;
55
+ --gum-palette-green-1100: #003936;
56
+ --gum-palette-green-1200: #002220;
57
+ --gum-palette-green-20: #e6f4ea;
58
+ --gum-palette-green-200: #81c995;
59
+ --gum-palette-green-300: #5bb974;
60
+ --gum-palette-green-400: #34a853;
61
+ --gum-palette-green-50: #ceead6;
62
+ --gum-palette-green-500-default: #1e8e3e;
63
+ --gum-palette-green-600: #188038;
64
+ --gum-palette-green-700: #137333;
65
+ --gum-palette-green-800: #0d652d;
66
+ --gum-palette-green-900: #00694e;
67
+ --gum-palette-pink-10: #fffafd;
68
+ --gum-palette-pink-100: #ffaee4;
69
+ --gum-palette-pink-1000: #3d0023;
70
+ --gum-palette-pink-1100: #560132;
71
+ --gum-palette-pink-1200: #2a0018;
72
+ --gum-palette-pink-20: #ffecf6;
73
+ --gum-palette-pink-200: #ff7dd2;
74
+ --gum-palette-pink-300: #f94aab;
75
+ --gum-palette-pink-400: #ea3499;
76
+ --gum-palette-pink-50: #ffd8ef;
77
+ --gum-palette-pink-500-default: #dc258d;
78
+ --gum-palette-pink-600: #c7197d;
79
+ --gum-palette-pink-700: #b60d6e;
80
+ --gum-palette-pink-75: #ffc5e7;
81
+ --gum-palette-pink-800: #8d0053;
82
+ --gum-palette-pink-900: #620438;
83
+ --gum-palette-purple-10: #fdfaff;
84
+ --gum-palette-purple-100: #d9bafd;
85
+ --gum-palette-purple-1000: #280255;
86
+ --gum-palette-purple-1100: #27115f;
87
+ --gum-palette-purple-1200: #1a0940;
88
+ --gum-palette-purple-20: #f7ecfe;
89
+ --gum-palette-purple-200: #c597ff;
90
+ --gum-palette-purple-300: #ad72ff;
91
+ --gum-palette-purple-400: #9254ea;
92
+ --gum-palette-purple-50: #eedcfe;
93
+ --gum-palette-purple-500-default: #7438d2;
94
+ --gum-palette-purple-600: #6530bc;
95
+ --gum-palette-purple-700: #5629a4;
96
+ --gum-palette-purple-75: #e3c9fe;
97
+ --gum-palette-purple-800: #4b248f;
98
+ --gum-palette-purple-900: #3a1b70;
99
+ --gum-palette-red-10: #fdf7f6;
100
+ --gum-palette-red-100: #f6aea9;
101
+ --gum-palette-red-1000: #760000;
102
+ --gum-palette-red-1100: #610000;
103
+ --gum-palette-red-1200: #390000;
104
+ --gum-palette-red-20: #fce8e6;
105
+ --gum-palette-red-200: #f28b82;
106
+ --gum-palette-red-300: #ee675c;
107
+ --gum-palette-red-400: #ea4335;
108
+ --gum-palette-red-50: #fad2cf;
109
+ --gum-palette-red-500-default: #d93025;
110
+ --gum-palette-red-600: #cc2722;
111
+ --gum-palette-red-700: #c11f1c;
112
+ --gum-palette-red-800: #a50e0e;
113
+ --gum-palette-red-900: #8b0000;
114
+ --gum-palette-success-10: #f6faf7;
115
+ --gum-palette-success-100: #a8dab5;
116
+ --gum-palette-success-1000: #005143;
117
+ --gum-palette-success-1100: #003936;
118
+ --gum-palette-success-1200: #002220;
119
+ --gum-palette-success-20: #e6f4ea;
120
+ --gum-palette-success-200: #81c995;
121
+ --gum-palette-success-300: #5bb974;
122
+ --gum-palette-success-400: #34a853;
123
+ --gum-palette-success-50: #ceead6;
124
+ --gum-palette-success-500-default: #1e8e3e;
125
+ --gum-palette-success-600: #188038;
126
+ --gum-palette-success-700: #137333;
127
+ --gum-palette-success-800: #0d652d;
128
+ --gum-palette-success-900: #00694e;
129
+ --gum-palette-warning-10: #fff7dc;
130
+ --gum-palette-warning-100: #ffe68d;
131
+ --gum-palette-warning-1000: #9e3d02;
132
+ --gum-palette-warning-1100: #7a2b00;
133
+ --gum-palette-warning-1200: #652000;
134
+ --gum-palette-warning-20: #fff2c6;
135
+ --gum-palette-warning-200: #ffe37e;
136
+ --gum-palette-warning-300: #fed84d;
137
+ --gum-palette-warning-400: #fecf26;
138
+ --gum-palette-warning-50: #ffeca5;
139
+ --gum-palette-warning-500-default: #fec700;
140
+ --gum-palette-warning-600: #ffbe00;
141
+ --gum-palette-warning-700: #f6a100;
142
+ --gum-palette-warning-800: #e57e00;
143
+ --gum-palette-warning-900: #d05600;
144
+ --gum-palette-yellow-10: #fff7dc;
145
+ --gum-palette-yellow-100: #ffe68d;
146
+ --gum-palette-yellow-1000: #9e3d02;
147
+ --gum-palette-yellow-1100: #7a2b00;
148
+ --gum-palette-yellow-1200: #652000;
149
+ --gum-palette-yellow-20: #fff2c6;
150
+ --gum-palette-yellow-200: #ffe37e;
151
+ --gum-palette-yellow-300: #fed84d;
152
+ --gum-palette-yellow-400: #fecf26;
153
+ --gum-palette-yellow-50: #ffeca5;
154
+ --gum-palette-yellow-500-default: #fec700;
155
+ --gum-palette-yellow-600: #ffbe00;
156
+ --gum-palette-yellow-700: #f6a100;
157
+ --gum-palette-yellow-800: #e57e00;
158
+ --gum-palette-yellow-900: #d05600;
159
+ }
package/src/primitives/layout.css ADDED
@@ -0,0 +1,16 @@
1
+ /* Primitive screen and grid tokens. Generated from figma/tokens.json — do not hand-edit. */
2
+ :root {
3
+ --gum-grid-columns-12: 12;
4
+ --gum-grid-columns-4: 4;
5
+ --gum-grid-columns-8: 8;
6
+ --gum-grid-gutter-16: var(--gum-spacing-4);
7
+ --gum-grid-gutter-24: var(--gum-spacing-6);
8
+ --gum-grid-margin-16: var(--gum-spacing-4);
9
+ --gum-grid-margin-24: var(--gum-spacing-6);
10
+ --gum-grid-margin-32: var(--gum-spacing-8);
11
+ --gum-breakpoint-2xl: 1536px;
12
+ --gum-breakpoint-lg: 1024px;
13
+ --gum-breakpoint-md: 768px;
14
+ --gum-breakpoint-sm: 640px;
15
+ --gum-breakpoint-xl: 1280px;
16
+ }
package/src/primitives/motion.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Motion tokens. No Figma backing yet — empty shell. */
2
+ :root {
3
+ }
package/src/primitives/opacity.css ADDED
@@ -0,0 +1,18 @@
1
+ /* Primitive opacity tokens. Generated from figma/tokens.json — do not hand-edit. */
2
+ :root {
3
+ --gum-opacity-0: 0;
4
+ --gum-opacity-10: 0.1;
5
+ --gum-opacity-100: 1;
6
+ --gum-opacity-15: 0.15;
7
+ --gum-opacity-20: 0.2;
8
+ --gum-opacity-30: 0.3;
9
+ --gum-opacity-40: 0.4;
10
+ --gum-opacity-5: 0.05;
11
+ --gum-opacity-50: 0.5;
12
+ --gum-opacity-60: 0.6;
13
+ --gum-opacity-70: 0.7;
14
+ --gum-opacity-80: 0.8;
15
+ --gum-opacity-85: 0.85;
16
+ --gum-opacity-90: 0.9;
17
+ --gum-opacity-95: 0.95;
18
+ }
package/src/primitives/radii.css ADDED
@@ -0,0 +1,13 @@
1
+ /* Primitive radius tokens. Generated from figma/tokens.json — do not hand-edit. */
2
+ :root {
3
+ --gum-radius-2xl: 16px;
4
+ --gum-radius-3xl: 24px;
5
+ --gum-radius-4xl: 32px;
6
+ --gum-radius-full: 9999px;
7
+ --gum-radius-lg: 8px;
8
+ --gum-radius-md: 6px;
9
+ --gum-radius-none: 0px;
10
+ --gum-radius-sm: 4px;
11
+ --gum-radius-xl: 12px;
12
+ --gum-radius-xs: 2px;
13
+ }
package/src/primitives/shadows.css ADDED
@@ -0,0 +1,9 @@
1
+ /* Primitive shadow tokens from Figma effect styles. Generated — do not hand-edit. */
2
+ :root {
3
+ --gum-shadow-none: none;
4
+ --gum-shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
5
+ --gum-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
6
+ --gum-shadow-md: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
7
+ --gum-shadow-lg: 0px 5px 15px 5px rgba(0, 0, 0, 0.1);
8
+ --gum-shadow-xl: 0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1);
9
+ }
package/src/primitives/spacing.css ADDED
@@ -0,0 +1,38 @@
1
+ /* Primitive spacing tokens. Generated from figma/tokens.json — do not hand-edit. */
2
+ :root {
3
+ --gum-spacing-0: 0px;
4
+ --gum-spacing-0-5: 2px;
5
+ --gum-spacing-1: 4px;
6
+ --gum-spacing-1-5: 6px;
7
+ --gum-spacing-10: 40px;
8
+ --gum-spacing-11: 44px;
9
+ --gum-spacing-12: 48px;
10
+ --gum-spacing-14: 56px;
11
+ --gum-spacing-16: 64px;
12
+ --gum-spacing-2: 8px;
13
+ --gum-spacing-2-5: 10px;
14
+ --gum-spacing-20: 80px;
15
+ --gum-spacing-24: 96px;
16
+ --gum-spacing-28: 112px;
17
+ --gum-spacing-3: 12px;
18
+ --gum-spacing-3-5: 14px;
19
+ --gum-spacing-32: 128px;
20
+ --gum-spacing-36: 144px;
21
+ --gum-spacing-4: 16px;
22
+ --gum-spacing-40: 160px;
23
+ --gum-spacing-44: 176px;
24
+ --gum-spacing-48: 192px;
25
+ --gum-spacing-5: 20px;
26
+ --gum-spacing-52: 208px;
27
+ --gum-spacing-56: 224px;
28
+ --gum-spacing-6: 24px;
29
+ --gum-spacing-60: 240px;
30
+ --gum-spacing-64: 256px;
31
+ --gum-spacing-7: 28px;
32
+ --gum-spacing-72: 288px;
33
+ --gum-spacing-8: 32px;
34
+ --gum-spacing-80: 320px;
35
+ --gum-spacing-9: 36px;
36
+ --gum-spacing-96: 384px;
37
+ --gum-spacing-px: 1px;
38
+ }
package/src/primitives/typography.css ADDED
@@ -0,0 +1,34 @@
1
+ /* Primitive typography tokens. Generated from figma/tokens.json — do not hand-edit. */
2
+ :root {
3
+ --gum-font-family-mono: "Google Sans Code";
4
+ --gum-font-family-sans: "Google Sans Flex";
5
+ --gum-font-size-2xl: 24px;
6
+ --gum-font-size-2xs: 10px;
7
+ --gum-font-size-3xl: 30px;
8
+ --gum-font-size-4xl: 36px;
9
+ --gum-font-size-5xl: 48px;
10
+ --gum-font-size-6xl: 60px;
11
+ --gum-font-size-7xl: 72px;
12
+ --gum-font-size-base: 16px;
13
+ --gum-font-size-lg: 18px;
14
+ --gum-font-size-sm: 14px;
15
+ --gum-font-size-xl: 20px;
16
+ --gum-font-size-xs: 12px;
17
+ --gum-font-weight-medium: 500;
18
+ --gum-font-weight-regular: 400;
19
+ --gum-font-weight-semibold: 600;
20
+ --gum-letter-spacing-normal: 0px;
21
+ --gum-letter-spacing-tight: -0.4px;
22
+ --gum-letter-spacing-tighter: -0.8px;
23
+ --gum-letter-spacing-wide: 0.4px;
24
+ --gum-letter-spacing-wider: 0.8px;
25
+ --gum-letter-spacing-widest: 1.6px;
26
+ --gum-line-height-10: 40px;
27
+ --gum-line-height-3: 12px;
28
+ --gum-line-height-4: 16px;
29
+ --gum-line-height-5: 20px;
30
+ --gum-line-height-6: 24px;
31
+ --gum-line-height-7: 28px;
32
+ --gum-line-height-8: 32px;
33
+ --gum-line-height-9: 36px;
34
+ }
package/src/semantic/borders.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Semantic borders. No dedicated Figma group beyond colours/spacing — empty shell. */
2
+ :root {
3
+ }
package/src/semantic/colors.css ADDED
@@ -0,0 +1,130 @@
1
+ /* Semantic colour tokens (light). Generated from figma/tokens.json — do not hand-edit. */
2
+ :root {
3
+ --gum-color-alpha-black-10: rgba(0, 0, 0, 0.1);
4
+ --gum-color-alpha-black-100: #000000;
5
+ --gum-color-alpha-black-20: rgba(0, 0, 0, 0.2);
6
+ --gum-color-alpha-black-30: rgba(0, 0, 0, 0.3);
7
+ --gum-color-alpha-black-40: rgba(0, 0, 0, 0.4);
8
+ --gum-color-alpha-black-50: rgba(0, 0, 0, 0.5);
9
+ --gum-color-alpha-black-60: rgba(0, 0, 0, 0.6);
10
+ --gum-color-alpha-black-70: rgba(0, 0, 0, 0.7);
11
+ --gum-color-alpha-black-80: rgba(0, 0, 0, 0.8);
12
+ --gum-color-alpha-black-90: rgba(0, 0, 0, 0.9);
13
+ --gum-color-alpha-white-10: rgba(255, 255, 255, 0.1);
14
+ --gum-color-alpha-white-100: #ffffff;
15
+ --gum-color-alpha-white-20: rgba(255, 255, 255, 0.2);
16
+ --gum-color-alpha-white-30: rgba(255, 255, 255, 0.3);
17
+ --gum-color-alpha-white-40: rgba(255, 255, 255, 0.4);
18
+ --gum-color-alpha-white-50: rgba(255, 255, 255, 0.5);
19
+ --gum-color-alpha-white-60: rgba(255, 255, 255, 0.6);
20
+ --gum-color-alpha-white-70: rgba(255, 255, 255, 0.7);
21
+ --gum-color-alpha-white-80: rgba(255, 255, 255, 0.8);
22
+ --gum-color-alpha-white-90: rgba(255, 255, 255, 0.9);
23
+ --gum-color-border-brand-primary: var(--gum-palette-blue-500-default);
24
+ --gum-color-border-brand-secondary: var(--gum-palette-blue-700);
25
+ --gum-color-border-error-primary: var(--gum-palette-error-600);
26
+ --gum-color-border-focus-ring: var(--gum-palette-blue-600);
27
+ --gum-color-border-inverse: var(--gum-palette-base-white);
28
+ --gum-color-border-outline-default: var(--gum-palette-gray-100);
29
+ --gum-color-border-outline-disabled: var(--gum-palette-gray-100);
30
+ --gum-color-border-outline-focused: var(--gum-palette-blue-600);
31
+ --gum-color-border-outline-hover: var(--gum-palette-blue-600);
32
+ --gum-color-border-outline-pressed: var(--gum-palette-blue-700);
33
+ --gum-color-border-pink-primary: var(--gum-palette-pink-500-default);
34
+ --gum-color-border-primary: var(--gum-palette-gray-200);
35
+ --gum-color-border-purple-primary: var(--gum-palette-purple-500-default);
36
+ --gum-color-border-secondary: var(--gum-palette-gray-50);
37
+ --gum-color-border-success-primary: var(--gum-palette-success-600);
38
+ --gum-color-border-tertiary: var(--gum-palette-gray-900);
39
+ --gum-color-border-warning-primary: var(--gum-palette-warning-600);
40
+ --gum-color-icon-brand-disabled: var(--gum-palette-blue-20);
41
+ --gum-color-icon-brand-primary: var(--gum-palette-blue-500-default);
42
+ --gum-color-icon-brand-secondary: var(--gum-palette-blue-700);
43
+ --gum-color-icon-brand-tertiary: var(--gum-palette-blue-800);
44
+ --gum-color-icon-disabled: var(--gum-palette-gray-300);
45
+ --gum-color-icon-error-disabled: var(--gum-palette-red-20);
46
+ --gum-color-icon-error-primary: var(--gum-palette-error-500-default);
47
+ --gum-color-icon-error-secondary: var(--gum-palette-error-800);
48
+ --gum-color-icon-inverse: var(--gum-palette-base-white);
49
+ --gum-color-icon-inverse-secondary: var(--gum-palette-gray-100);
50
+ --gum-color-icon-link-hover: var(--gum-palette-blue-700);
51
+ --gum-color-icon-link-primary: var(--gum-palette-blue-500-default);
52
+ --gum-color-icon-on-brand: var(--gum-palette-base-white);
53
+ --gum-color-icon-pink-primary: var(--gum-palette-pink-500-default);
54
+ --gum-color-icon-pink-secondary: var(--gum-palette-pink-900);
55
+ --gum-color-icon-primary: var(--gum-palette-gray-900);
56
+ --gum-color-icon-purple-primary: var(--gum-palette-purple-500-default);
57
+ --gum-color-icon-purple-secondary: var(--gum-palette-purple-900);
58
+ --gum-color-icon-secondary: var(--gum-palette-gray-700);
59
+ --gum-color-icon-success-primary: var(--gum-palette-success-500-default);
60
+ --gum-color-icon-success-secondary: var(--gum-palette-success-1000);
61
+ --gum-color-icon-tertiary: var(--gum-palette-gray-500);
62
+ --gum-color-icon-warning-primary: var(--gum-palette-warning-500-default);
63
+ --gum-color-icon-warning-secondary: var(--gum-palette-warning-1000);
64
+ --gum-color-surface-brand-default: var(--gum-palette-blue-500-default);
65
+ --gum-color-surface-brand-disabled: rgba(26, 115, 232, 0.6);
66
+ --gum-color-surface-brand-focus: var(--gum-palette-blue-600);
67
+ --gum-color-surface-brand-hover: var(--gum-palette-blue-600);
68
+ --gum-color-surface-brand-pressed: var(--gum-palette-blue-700);
69
+ --gum-color-surface-brand-primary: var(--gum-palette-blue-10);
70
+ --gum-color-surface-brand-quaternary: var(--gum-palette-blue-75);
71
+ --gum-color-surface-brand-secondary: var(--gum-palette-blue-20);
72
+ --gum-color-surface-brand-tertiary: var(--gum-palette-blue-50);
73
+ --gum-color-surface-error-default: var(--gum-palette-error-500-default);
74
+ --gum-color-surface-error-disabled: rgba(217, 48, 37, 0.6);
75
+ --gum-color-surface-error-focus: var(--gum-palette-error-600);
76
+ --gum-color-surface-error-hover: var(--gum-palette-error-600);
77
+ --gum-color-surface-error-pressed: var(--gum-palette-error-700);
78
+ --gum-color-surface-error-primary: var(--gum-palette-error-10);
79
+ --gum-color-surface-error-secondary: var(--gum-palette-error-50);
80
+ --gum-color-surface-gray-default: var(--gum-palette-gray-200);
81
+ --gum-color-surface-gray-disabled: rgba(110, 114, 122, 0.2);
82
+ --gum-color-surface-gray-focus: var(--gum-palette-gray-300);
83
+ --gum-color-surface-gray-hover: var(--gum-palette-gray-300);
84
+ --gum-color-surface-gray-pressed: var(--gum-palette-gray-400);
85
+ --gum-color-surface-inverse-primary: var(--gum-palette-gray-1000);
86
+ --gum-color-surface-inverse-secondary: var(--gum-palette-gray-800);
87
+ --gum-color-surface-outline-hover: rgba(102, 157, 246, 0.12);
88
+ --gum-color-surface-pink-default: var(--gum-palette-pink-500-default);
89
+ --gum-color-surface-pink-primary: var(--gum-palette-pink-20);
90
+ --gum-color-surface-pink-secondary: var(--gum-palette-pink-50);
91
+ --gum-color-surface-primary: var(--gum-palette-base-white);
92
+ --gum-color-surface-purple-default: var(--gum-palette-purple-500-default);
93
+ --gum-color-surface-purple-primary: var(--gum-palette-purple-20);
94
+ --gum-color-surface-purple-secondary: var(--gum-palette-purple-50);
95
+ --gum-color-surface-quaternary: var(--gum-palette-gray-50);
96
+ --gum-color-surface-scrim: rgba(0, 0, 0, 0.4);
97
+ --gum-color-surface-scrim-strong: rgba(0, 0, 0, 0.7);
98
+ --gum-color-surface-secondary: var(--gum-palette-gray-10);
99
+ --gum-color-surface-success-default: var(--gum-palette-success-500-default);
100
+ --gum-color-surface-success-primary: var(--gum-palette-success-20);
101
+ --gum-color-surface-success-secondary: var(--gum-palette-success-50);
102
+ --gum-color-surface-tertiary: var(--gum-palette-gray-20);
103
+ --gum-color-surface-warning-default: var(--gum-palette-warning-500-default);
104
+ --gum-color-surface-warning-primary: var(--gum-palette-warning-20);
105
+ --gum-color-surface-warning-secondary: var(--gum-palette-warning-50);
106
+ --gum-color-text-brand-disabled: var(--gum-palette-blue-20);
107
+ --gum-color-text-brand-primary: var(--gum-palette-blue-500-default);
108
+ --gum-color-text-brand-secondary: var(--gum-palette-blue-700);
109
+ --gum-color-text-brand-tertiary: var(--gum-palette-blue-900);
110
+ --gum-color-text-disabled: var(--gum-palette-gray-300);
111
+ --gum-color-text-error-disabled: var(--gum-palette-red-20);
112
+ --gum-color-text-error-primary: var(--gum-palette-error-500-default);
113
+ --gum-color-text-error-secondary: var(--gum-palette-error-800);
114
+ --gum-color-text-inverse: var(--gum-palette-base-white);
115
+ --gum-color-text-inverse-secondary: var(--gum-palette-gray-100);
116
+ --gum-color-text-link-hover: var(--gum-palette-blue-700);
117
+ --gum-color-text-link-primary: var(--gum-palette-blue-500-default);
118
+ --gum-color-text-on-brand: var(--gum-palette-base-white);
119
+ --gum-color-text-pink-primary: var(--gum-palette-pink-500-default);
120
+ --gum-color-text-pink-secondary: var(--gum-palette-pink-900);
121
+ --gum-color-text-primary: var(--gum-palette-gray-900);
122
+ --gum-color-text-purple-primary: var(--gum-palette-purple-500-default);
123
+ --gum-color-text-purple-secondary: var(--gum-palette-purple-900);
124
+ --gum-color-text-secondary: var(--gum-palette-gray-700);
125
+ --gum-color-text-success-primary: var(--gum-palette-success-500-default);
126
+ --gum-color-text-success-secondary: var(--gum-palette-success-1000);
127
+ --gum-color-text-tertiary: var(--gum-palette-gray-500);
128
+ --gum-color-text-warning-primary: var(--gum-palette-warning-500-default);
129
+ --gum-color-text-warning-secondary: var(--gum-palette-warning-1000);
130
+ }
package/src/semantic/dark.css ADDED
@@ -0,0 +1,130 @@
1
+ /* Dark theme semantic colour overrides. Generated from figma/tokens.json — do not hand-edit. */
2
+ [data-theme="dark"] {
3
+ --gum-color-alpha-black-10: rgba(0, 0, 0, 0.1);
4
+ --gum-color-alpha-black-100: #000000;
5
+ --gum-color-alpha-black-20: rgba(0, 0, 0, 0.2);
6
+ --gum-color-alpha-black-30: rgba(0, 0, 0, 0.3);
7
+ --gum-color-alpha-black-40: rgba(0, 0, 0, 0.4);
8
+ --gum-color-alpha-black-50: rgba(0, 0, 0, 0.5);
9
+ --gum-color-alpha-black-60: rgba(0, 0, 0, 0.6);
10
+ --gum-color-alpha-black-70: rgba(0, 0, 0, 0.7);
11
+ --gum-color-alpha-black-80: rgba(0, 0, 0, 0.8);
12
+ --gum-color-alpha-black-90: rgba(0, 0, 0, 0.9);
13
+ --gum-color-alpha-white-10: rgba(255, 255, 255, 0.1);
14
+ --gum-color-alpha-white-100: #ffffff;
15
+ --gum-color-alpha-white-20: rgba(255, 255, 255, 0.2);
16
+ --gum-color-alpha-white-30: rgba(255, 255, 255, 0.3);
17
+ --gum-color-alpha-white-40: rgba(255, 255, 255, 0.4);
18
+ --gum-color-alpha-white-50: rgba(255, 255, 255, 0.5);
19
+ --gum-color-alpha-white-60: rgba(255, 255, 255, 0.6);
20
+ --gum-color-alpha-white-70: rgba(255, 255, 255, 0.7);
21
+ --gum-color-alpha-white-80: rgba(255, 255, 255, 0.8);
22
+ --gum-color-alpha-white-90: rgba(255, 255, 255, 0.9);
23
+ --gum-color-border-brand-primary: var(--gum-palette-blue-400);
24
+ --gum-color-border-brand-secondary: var(--gum-palette-blue-400);
25
+ --gum-color-border-error-primary: var(--gum-palette-error-500-default);
26
+ --gum-color-border-focus-ring: var(--gum-palette-base-white);
27
+ --gum-color-border-inverse: var(--gum-palette-gray-900);
28
+ --gum-color-border-outline-default: var(--gum-palette-gray-10);
29
+ --gum-color-border-outline-disabled: var(--gum-palette-gray-700);
30
+ --gum-color-border-outline-focused: var(--gum-palette-gray-50);
31
+ --gum-color-border-outline-hover: var(--gum-palette-gray-50);
32
+ --gum-color-border-outline-pressed: var(--gum-palette-gray-300);
33
+ --gum-color-border-pink-primary: var(--gum-palette-pink-500-default);
34
+ --gum-color-border-primary: var(--gum-palette-gray-600);
35
+ --gum-color-border-purple-primary: var(--gum-palette-purple-500-default);
36
+ --gum-color-border-secondary: var(--gum-palette-gray-700);
37
+ --gum-color-border-success-primary: var(--gum-palette-success-500-default);
38
+ --gum-color-border-tertiary: var(--gum-palette-gray-200);
39
+ --gum-color-border-warning-primary: var(--gum-palette-warning-500-default);
40
+ --gum-color-icon-brand-disabled: var(--gum-palette-gray-200);
41
+ --gum-color-icon-brand-primary: var(--gum-palette-base-white);
42
+ --gum-color-icon-brand-secondary: var(--gum-palette-blue-10);
43
+ --gum-color-icon-brand-tertiary: var(--gum-palette-blue-20);
44
+ --gum-color-icon-disabled: var(--gum-palette-gray-500);
45
+ --gum-color-icon-error-disabled: var(--gum-palette-gray-200);
46
+ --gum-color-icon-error-primary: var(--gum-palette-error-400);
47
+ --gum-color-icon-error-secondary: var(--gum-palette-error-50);
48
+ --gum-color-icon-inverse: var(--gum-palette-gray-900);
49
+ --gum-color-icon-inverse-secondary: var(--gum-palette-gray-700);
50
+ --gum-color-icon-link-hover: var(--gum-palette-blue-500-default);
51
+ --gum-color-icon-link-primary: var(--gum-palette-blue-400);
52
+ --gum-color-icon-on-brand: var(--gum-palette-base-white);
53
+ --gum-color-icon-pink-primary: var(--gum-palette-pink-400);
54
+ --gum-color-icon-pink-secondary: var(--gum-palette-pink-20);
55
+ --gum-color-icon-primary: var(--gum-palette-base-white);
56
+ --gum-color-icon-purple-primary: var(--gum-palette-purple-400);
57
+ --gum-color-icon-purple-secondary: var(--gum-palette-purple-20);
58
+ --gum-color-icon-secondary: var(--gum-palette-gray-200);
59
+ --gum-color-icon-success-primary: var(--gum-palette-success-400);
60
+ --gum-color-icon-success-secondary: var(--gum-palette-success-20);
61
+ --gum-color-icon-tertiary: var(--gum-palette-gray-400);
62
+ --gum-color-icon-warning-primary: var(--gum-palette-warning-400);
63
+ --gum-color-icon-warning-secondary: var(--gum-palette-warning-10);
64
+ --gum-color-surface-brand-default: var(--gum-palette-blue-400);
65
+ --gum-color-surface-brand-disabled: rgba(49, 134, 255, 0.6);
66
+ --gum-color-surface-brand-focus: var(--gum-palette-blue-500-default);
67
+ --gum-color-surface-brand-hover: var(--gum-palette-blue-500-default);
68
+ --gum-color-surface-brand-pressed: var(--gum-palette-blue-600);
69
+ --gum-color-surface-brand-primary: var(--gum-palette-blue-1100);
70
+ --gum-color-surface-brand-quaternary: var(--gum-palette-blue-700);
71
+ --gum-color-surface-brand-secondary: var(--gum-palette-blue-900);
72
+ --gum-color-surface-brand-tertiary: var(--gum-palette-blue-800);
73
+ --gum-color-surface-error-default: var(--gum-palette-error-400);
74
+ --gum-color-surface-error-disabled: rgba(252, 65, 61, 0.6);
75
+ --gum-color-surface-error-focus: var(--gum-palette-error-500-default);
76
+ --gum-color-surface-error-hover: var(--gum-palette-error-500-default);
77
+ --gum-color-surface-error-pressed: var(--gum-palette-error-600);
78
+ --gum-color-surface-error-primary: var(--gum-palette-error-900);
79
+ --gum-color-surface-error-secondary: var(--gum-palette-error-800);
80
+ --gum-color-surface-gray-default: var(--gum-palette-gray-300);
81
+ --gum-color-surface-gray-disabled: rgba(110, 114, 122, 0.6);
82
+ --gum-color-surface-gray-focus: var(--gum-palette-gray-300);
83
+ --gum-color-surface-gray-hover: var(--gum-palette-gray-100);
84
+ --gum-color-surface-gray-pressed: var(--gum-palette-gray-200);
85
+ --gum-color-surface-inverse-primary: var(--gum-palette-base-white);
86
+ --gum-color-surface-inverse-secondary: var(--gum-palette-gray-50);
87
+ --gum-color-surface-outline-hover: rgba(218, 220, 224, 0.2);
88
+ --gum-color-surface-pink-default: var(--gum-palette-pink-500-default);
89
+ --gum-color-surface-pink-primary: var(--gum-palette-pink-900);
90
+ --gum-color-surface-pink-secondary: var(--gum-palette-pink-700);
91
+ --gum-color-surface-primary: var(--gum-palette-gray-1000);
92
+ --gum-color-surface-purple-default: var(--gum-palette-purple-500-default);
93
+ --gum-color-surface-purple-primary: var(--gum-palette-purple-900);
94
+ --gum-color-surface-purple-secondary: var(--gum-palette-purple-700);
95
+ --gum-color-surface-quaternary: var(--gum-palette-gray-600);
96
+ --gum-color-surface-scrim: rgba(0, 0, 0, 0.6);
97
+ --gum-color-surface-scrim-strong: rgba(0, 0, 0, 0.8);
98
+ --gum-color-surface-secondary: var(--gum-palette-gray-900);
99
+ --gum-color-surface-success-default: var(--gum-palette-success-500-default);
100
+ --gum-color-surface-success-primary: var(--gum-palette-success-900);
101
+ --gum-color-surface-success-secondary: var(--gum-palette-success-700);
102
+ --gum-color-surface-tertiary: var(--gum-palette-gray-800);
103
+ --gum-color-surface-warning-default: var(--gum-palette-warning-500-default);
104
+ --gum-color-surface-warning-primary: var(--gum-palette-warning-900);
105
+ --gum-color-surface-warning-secondary: var(--gum-palette-warning-800);
106
+ --gum-color-text-brand-disabled: var(--gum-palette-gray-200);
107
+ --gum-color-text-brand-primary: var(--gum-palette-base-white);
108
+ --gum-color-text-brand-secondary: var(--gum-palette-blue-10);
109
+ --gum-color-text-brand-tertiary: var(--gum-palette-blue-20);
110
+ --gum-color-text-disabled: var(--gum-palette-gray-400);
111
+ --gum-color-text-error-disabled: var(--gum-palette-gray-200);
112
+ --gum-color-text-error-primary: var(--gum-palette-error-400);
113
+ --gum-color-text-error-secondary: var(--gum-palette-error-50);
114
+ --gum-color-text-inverse: var(--gum-palette-gray-900);
115
+ --gum-color-text-inverse-secondary: var(--gum-palette-gray-700);
116
+ --gum-color-text-link-hover: var(--gum-palette-blue-500-default);
117
+ --gum-color-text-link-primary: var(--gum-palette-blue-400);
118
+ --gum-color-text-on-brand: var(--gum-palette-base-white);
119
+ --gum-color-text-pink-primary: var(--gum-palette-pink-400);
120
+ --gum-color-text-pink-secondary: var(--gum-palette-pink-20);
121
+ --gum-color-text-primary: var(--gum-palette-base-white);
122
+ --gum-color-text-purple-primary: var(--gum-palette-purple-400);
123
+ --gum-color-text-purple-secondary: var(--gum-palette-purple-20);
124
+ --gum-color-text-secondary: var(--gum-palette-gray-200);
125
+ --gum-color-text-success-primary: var(--gum-palette-success-400);
126
+ --gum-color-text-success-secondary: var(--gum-palette-success-20);
127
+ --gum-color-text-tertiary: var(--gum-palette-gray-400);
128
+ --gum-color-text-warning-primary: var(--gum-palette-warning-400);
129
+ --gum-color-text-warning-secondary: var(--gum-palette-warning-10);
130
+ }
package/src/semantic/motion.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Semantic motion. No dedicated Figma group beyond colours/spacing — empty shell. */
2
+ :root {
3
+ }
package/src/semantic/radii.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Semantic radii. No dedicated Figma group beyond colours/spacing — empty shell. */
2
+ :root {
3
+ }
package/src/semantic/shadows.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Semantic shadows. No dedicated Figma group beyond colours/spacing — empty shell. */
2
+ :root {
3
+ }
package/src/semantic/spacing.css ADDED
@@ -0,0 +1,88 @@
1
+ /* Semantic gap, padding, size, layout, max-width. Generated from figma/tokens.json — do not hand-edit. */
2
+ :root {
3
+ --gum-gap-2xl: var(--gum-spacing-12);
4
+ --gum-gap-2xs: var(--gum-spacing-1);
5
+ --gum-gap-lg: var(--gum-spacing-6);
6
+ --gum-gap-md: var(--gum-spacing-4);
7
+ --gum-gap-sm: var(--gum-spacing-3);
8
+ --gum-gap-xl: var(--gum-spacing-8);
9
+ --gum-gap-xs: var(--gum-spacing-2);
10
+ --gum-layout-2xl: var(--gum-spacing-32);
11
+ --gum-layout-lg: var(--gum-spacing-16);
12
+ --gum-layout-md: var(--gum-spacing-12);
13
+ --gum-layout-sm: var(--gum-spacing-8);
14
+ --gum-layout-xl: var(--gum-spacing-24);
15
+ --gum-layout-xs: var(--gum-spacing-6);
16
+ --gum-max-width-0: var(--gum-spacing-0);
17
+ --gum-max-width-0-5: var(--gum-spacing-0-5);
18
+ --gum-max-width-1: var(--gum-spacing-1);
19
+ --gum-max-width-1-5: var(--gum-spacing-1-5);
20
+ --gum-max-width-10: var(--gum-spacing-10);
21
+ --gum-max-width-11: var(--gum-spacing-11);
22
+ --gum-max-width-12: var(--gum-spacing-12);
23
+ --gum-max-width-14: var(--gum-spacing-14);
24
+ --gum-max-width-16: var(--gum-spacing-16);
25
+ --gum-max-width-2: var(--gum-spacing-2);
26
+ --gum-max-width-2-5: var(--gum-spacing-2-5);
27
+ --gum-max-width-20: var(--gum-spacing-20);
28
+ --gum-max-width-24: var(--gum-spacing-24);
29
+ --gum-max-width-28: var(--gum-spacing-28);
30
+ --gum-max-width-2xl: 672px;
31
+ --gum-max-width-3: var(--gum-spacing-3);
32
+ --gum-max-width-3-5: var(--gum-spacing-3-5);
33
+ --gum-max-width-32: var(--gum-spacing-32);
34
+ --gum-max-width-36: var(--gum-spacing-36);
35
+ --gum-max-width-3xl: 768px;
36
+ --gum-max-width-4: var(--gum-spacing-4);
37
+ --gum-max-width-40: var(--gum-spacing-40);
38
+ --gum-max-width-44: var(--gum-spacing-44);
39
+ --gum-max-width-48: var(--gum-spacing-48);
40
+ --gum-max-width-4xl: 896px;
41
+ --gum-max-width-5: var(--gum-spacing-5);
42
+ --gum-max-width-52: var(--gum-spacing-52);
43
+ --gum-max-width-56: var(--gum-spacing-56);
44
+ --gum-max-width-5xl: 1024px;
45
+ --gum-max-width-6: var(--gum-spacing-6);
46
+ --gum-max-width-60: var(--gum-spacing-60);
47
+ --gum-max-width-64: var(--gum-spacing-64);
48
+ --gum-max-width-6xl: 1152px;
49
+ --gum-max-width-7: var(--gum-spacing-7);
50
+ --gum-max-width-72: var(--gum-spacing-72);
51
+ --gum-max-width-7xl: 1280px;
52
+ --gum-max-width-8: var(--gum-spacing-8);
53
+ --gum-max-width-80: var(--gum-spacing-80);
54
+ --gum-max-width-9: var(--gum-spacing-9);
55
+ --gum-max-width-96: var(--gum-spacing-96);
56
+ --gum-max-width-lg: 512px;
57
+ --gum-max-width-md: 448px;
58
+ --gum-max-width-px: var(--gum-spacing-px);
59
+ --gum-max-width-screen-2xl: var(--gum-breakpoint-2xl);
60
+ --gum-max-width-screen-lg: var(--gum-breakpoint-lg);
61
+ --gum-max-width-screen-md: var(--gum-breakpoint-md);
62
+ --gum-max-width-screen-sm: var(--gum-breakpoint-sm);
63
+ --gum-max-width-screen-xl: var(--gum-breakpoint-xl);
64
+ --gum-max-width-sm: 384px;
65
+ --gum-max-width-xl: 576px;
66
+ --gum-max-width-xs: 320px;
67
+ --gum-padding-1xs: var(--gum-spacing-2-5);
68
+ --gum-padding-2xl: var(--gum-spacing-8);
69
+ --gum-padding-2xs: var(--gum-spacing-2);
70
+ --gum-padding-3xl: var(--gum-spacing-12);
71
+ --gum-padding-3xs: var(--gum-spacing-1-5);
72
+ --gum-padding-4xl: var(--gum-spacing-14);
73
+ --gum-padding-4xs: var(--gum-spacing-1);
74
+ --gum-padding-5xs: var(--gum-spacing-0-5);
75
+ --gum-padding-lg: var(--gum-spacing-5);
76
+ --gum-padding-md: var(--gum-spacing-4);
77
+ --gum-padding-sm: var(--gum-spacing-3-5);
78
+ --gum-padding-xl: var(--gum-spacing-6);
79
+ --gum-padding-xs: var(--gum-spacing-3);
80
+ --gum-size-2xl: var(--gum-spacing-12);
81
+ --gum-size-2xs: var(--gum-spacing-3);
82
+ --gum-size-3xl: var(--gum-spacing-14);
83
+ --gum-size-lg: var(--gum-spacing-8);
84
+ --gum-size-md: var(--gum-spacing-6);
85
+ --gum-size-sm: var(--gum-spacing-5);
86
+ --gum-size-xl: var(--gum-spacing-10);
87
+ --gum-size-xs: var(--gum-spacing-4);
88
+ }
package/src/semantic/typography.css ADDED
@@ -0,0 +1,3 @@
1
+ /* Semantic typography. No dedicated Figma group beyond colours/spacing — empty shell. */
2
+ :root {
3
+ }
package/tailwind/theme.css ADDED
@@ -0,0 +1,373 @@
1
+ /* Tailwind v4 @theme maps. Generated from figma/tokens.json — do not hand-edit. */
2
+ @theme inline {
3
+ --color-palette-base-black: var(--gum-palette-base-black);
4
+ --color-palette-base-transparent: var(--gum-palette-base-transparent);
5
+ --color-palette-base-white: var(--gum-palette-base-white);
6
+ --color-palette-blue-10: var(--gum-palette-blue-10);
7
+ --color-palette-blue-100: var(--gum-palette-blue-100);
8
+ --color-palette-blue-1000: var(--gum-palette-blue-1000);
9
+ --color-palette-blue-1100: var(--gum-palette-blue-1100);
10
+ --color-palette-blue-1200: var(--gum-palette-blue-1200);
11
+ --color-palette-blue-20: var(--gum-palette-blue-20);
12
+ --color-palette-blue-200: var(--gum-palette-blue-200);
13
+ --color-palette-blue-300: var(--gum-palette-blue-300);
14
+ --color-palette-blue-400: var(--gum-palette-blue-400);
15
+ --color-palette-blue-50: var(--gum-palette-blue-50);
16
+ --color-palette-blue-500-default: var(--gum-palette-blue-500-default);
17
+ --color-palette-blue-600: var(--gum-palette-blue-600);
18
+ --color-palette-blue-700: var(--gum-palette-blue-700);
19
+ --color-palette-blue-75: var(--gum-palette-blue-75);
20
+ --color-palette-blue-800: var(--gum-palette-blue-800);
21
+ --color-palette-blue-900: var(--gum-palette-blue-900);
22
+ --color-palette-error-10: var(--gum-palette-error-10);
23
+ --color-palette-error-100: var(--gum-palette-error-100);
24
+ --color-palette-error-1000: var(--gum-palette-error-1000);
25
+ --color-palette-error-1100: var(--gum-palette-error-1100);
26
+ --color-palette-error-1200: var(--gum-palette-error-1200);
27
+ --color-palette-error-20: var(--gum-palette-error-20);
28
+ --color-palette-error-200: var(--gum-palette-error-200);
29
+ --color-palette-error-300: var(--gum-palette-error-300);
30
+ --color-palette-error-400: var(--gum-palette-error-400);
31
+ --color-palette-error-50: var(--gum-palette-error-50);
32
+ --color-palette-error-500-default: var(--gum-palette-error-500-default);
33
+ --color-palette-error-600: var(--gum-palette-error-600);
34
+ --color-palette-error-700: var(--gum-palette-error-700);
35
+ --color-palette-error-800: var(--gum-palette-error-800);
36
+ --color-palette-error-900: var(--gum-palette-error-900);
37
+ --color-palette-gray-10: var(--gum-palette-gray-10);
38
+ --color-palette-gray-100: var(--gum-palette-gray-100);
39
+ --color-palette-gray-1000: var(--gum-palette-gray-1000);
40
+ --color-palette-gray-1100: var(--gum-palette-gray-1100);
41
+ --color-palette-gray-1200: var(--gum-palette-gray-1200);
42
+ --color-palette-gray-20: var(--gum-palette-gray-20);
43
+ --color-palette-gray-200: var(--gum-palette-gray-200);
44
+ --color-palette-gray-300: var(--gum-palette-gray-300);
45
+ --color-palette-gray-400: var(--gum-palette-gray-400);
46
+ --color-palette-gray-50: var(--gum-palette-gray-50);
47
+ --color-palette-gray-500: var(--gum-palette-gray-500);
48
+ --color-palette-gray-600: var(--gum-palette-gray-600);
49
+ --color-palette-gray-700: var(--gum-palette-gray-700);
50
+ --color-palette-gray-800: var(--gum-palette-gray-800);
51
+ --color-palette-gray-900: var(--gum-palette-gray-900);
52
+ --color-palette-green-10: var(--gum-palette-green-10);
53
+ --color-palette-green-100: var(--gum-palette-green-100);
54
+ --color-palette-green-1000: var(--gum-palette-green-1000);
55
+ --color-palette-green-1100: var(--gum-palette-green-1100);
56
+ --color-palette-green-1200: var(--gum-palette-green-1200);
57
+ --color-palette-green-20: var(--gum-palette-green-20);
58
+ --color-palette-green-200: var(--gum-palette-green-200);
59
+ --color-palette-green-300: var(--gum-palette-green-300);
60
+ --color-palette-green-400: var(--gum-palette-green-400);
61
+ --color-palette-green-50: var(--gum-palette-green-50);
62
+ --color-palette-green-500-default: var(--gum-palette-green-500-default);
63
+ --color-palette-green-600: var(--gum-palette-green-600);
64
+ --color-palette-green-700: var(--gum-palette-green-700);
65
+ --color-palette-green-800: var(--gum-palette-green-800);
66
+ --color-palette-green-900: var(--gum-palette-green-900);
67
+ --color-palette-pink-10: var(--gum-palette-pink-10);
68
+ --color-palette-pink-100: var(--gum-palette-pink-100);
69
+ --color-palette-pink-1000: var(--gum-palette-pink-1000);
70
+ --color-palette-pink-1100: var(--gum-palette-pink-1100);
71
+ --color-palette-pink-1200: var(--gum-palette-pink-1200);
72
+ --color-palette-pink-20: var(--gum-palette-pink-20);
73
+ --color-palette-pink-200: var(--gum-palette-pink-200);
74
+ --color-palette-pink-300: var(--gum-palette-pink-300);
75
+ --color-palette-pink-400: var(--gum-palette-pink-400);
76
+ --color-palette-pink-50: var(--gum-palette-pink-50);
77
+ --color-palette-pink-500-default: var(--gum-palette-pink-500-default);
78
+ --color-palette-pink-600: var(--gum-palette-pink-600);
79
+ --color-palette-pink-700: var(--gum-palette-pink-700);
80
+ --color-palette-pink-75: var(--gum-palette-pink-75);
81
+ --color-palette-pink-800: var(--gum-palette-pink-800);
82
+ --color-palette-pink-900: var(--gum-palette-pink-900);
83
+ --color-palette-purple-10: var(--gum-palette-purple-10);
84
+ --color-palette-purple-100: var(--gum-palette-purple-100);
85
+ --color-palette-purple-1000: var(--gum-palette-purple-1000);
86
+ --color-palette-purple-1100: var(--gum-palette-purple-1100);
87
+ --color-palette-purple-1200: var(--gum-palette-purple-1200);
88
+ --color-palette-purple-20: var(--gum-palette-purple-20);
89
+ --color-palette-purple-200: var(--gum-palette-purple-200);
90
+ --color-palette-purple-300: var(--gum-palette-purple-300);
91
+ --color-palette-purple-400: var(--gum-palette-purple-400);
92
+ --color-palette-purple-50: var(--gum-palette-purple-50);
93
+ --color-palette-purple-500-default: var(--gum-palette-purple-500-default);
94
+ --color-palette-purple-600: var(--gum-palette-purple-600);
95
+ --color-palette-purple-700: var(--gum-palette-purple-700);
96
+ --color-palette-purple-75: var(--gum-palette-purple-75);
97
+ --color-palette-purple-800: var(--gum-palette-purple-800);
98
+ --color-palette-purple-900: var(--gum-palette-purple-900);
99
+ --color-palette-red-10: var(--gum-palette-red-10);
100
+ --color-palette-red-100: var(--gum-palette-red-100);
101
+ --color-palette-red-1000: var(--gum-palette-red-1000);
102
+ --color-palette-red-1100: var(--gum-palette-red-1100);
103
+ --color-palette-red-1200: var(--gum-palette-red-1200);
104
+ --color-palette-red-20: var(--gum-palette-red-20);
105
+ --color-palette-red-200: var(--gum-palette-red-200);
106
+ --color-palette-red-300: var(--gum-palette-red-300);
107
+ --color-palette-red-400: var(--gum-palette-red-400);
108
+ --color-palette-red-50: var(--gum-palette-red-50);
109
+ --color-palette-red-500-default: var(--gum-palette-red-500-default);
110
+ --color-palette-red-600: var(--gum-palette-red-600);
111
+ --color-palette-red-700: var(--gum-palette-red-700);
112
+ --color-palette-red-800: var(--gum-palette-red-800);
113
+ --color-palette-red-900: var(--gum-palette-red-900);
114
+ --color-palette-success-10: var(--gum-palette-success-10);
115
+ --color-palette-success-100: var(--gum-palette-success-100);
116
+ --color-palette-success-1000: var(--gum-palette-success-1000);
117
+ --color-palette-success-1100: var(--gum-palette-success-1100);
118
+ --color-palette-success-1200: var(--gum-palette-success-1200);
119
+ --color-palette-success-20: var(--gum-palette-success-20);
120
+ --color-palette-success-200: var(--gum-palette-success-200);
121
+ --color-palette-success-300: var(--gum-palette-success-300);
122
+ --color-palette-success-400: var(--gum-palette-success-400);
123
+ --color-palette-success-50: var(--gum-palette-success-50);
124
+ --color-palette-success-500-default: var(--gum-palette-success-500-default);
125
+ --color-palette-success-600: var(--gum-palette-success-600);
126
+ --color-palette-success-700: var(--gum-palette-success-700);
127
+ --color-palette-success-800: var(--gum-palette-success-800);
128
+ --color-palette-success-900: var(--gum-palette-success-900);
129
+ --color-palette-warning-10: var(--gum-palette-warning-10);
130
+ --color-palette-warning-100: var(--gum-palette-warning-100);
131
+ --color-palette-warning-1000: var(--gum-palette-warning-1000);
132
+ --color-palette-warning-1100: var(--gum-palette-warning-1100);
133
+ --color-palette-warning-1200: var(--gum-palette-warning-1200);
134
+ --color-palette-warning-20: var(--gum-palette-warning-20);
135
+ --color-palette-warning-200: var(--gum-palette-warning-200);
136
+ --color-palette-warning-300: var(--gum-palette-warning-300);
137
+ --color-palette-warning-400: var(--gum-palette-warning-400);
138
+ --color-palette-warning-50: var(--gum-palette-warning-50);
139
+ --color-palette-warning-500-default: var(--gum-palette-warning-500-default);
140
+ --color-palette-warning-600: var(--gum-palette-warning-600);
141
+ --color-palette-warning-700: var(--gum-palette-warning-700);
142
+ --color-palette-warning-800: var(--gum-palette-warning-800);
143
+ --color-palette-warning-900: var(--gum-palette-warning-900);
144
+ --color-palette-yellow-10: var(--gum-palette-yellow-10);
145
+ --color-palette-yellow-100: var(--gum-palette-yellow-100);
146
+ --color-palette-yellow-1000: var(--gum-palette-yellow-1000);
147
+ --color-palette-yellow-1100: var(--gum-palette-yellow-1100);
148
+ --color-palette-yellow-1200: var(--gum-palette-yellow-1200);
149
+ --color-palette-yellow-20: var(--gum-palette-yellow-20);
150
+ --color-palette-yellow-200: var(--gum-palette-yellow-200);
151
+ --color-palette-yellow-300: var(--gum-palette-yellow-300);
152
+ --color-palette-yellow-400: var(--gum-palette-yellow-400);
153
+ --color-palette-yellow-50: var(--gum-palette-yellow-50);
154
+ --color-palette-yellow-500-default: var(--gum-palette-yellow-500-default);
155
+ --color-palette-yellow-600: var(--gum-palette-yellow-600);
156
+ --color-palette-yellow-700: var(--gum-palette-yellow-700);
157
+ --color-palette-yellow-800: var(--gum-palette-yellow-800);
158
+ --color-palette-yellow-900: var(--gum-palette-yellow-900);
159
+ --color-alpha-black-10: var(--gum-color-alpha-black-10);
160
+ --color-alpha-black-100: var(--gum-color-alpha-black-100);
161
+ --color-alpha-black-20: var(--gum-color-alpha-black-20);
162
+ --color-alpha-black-30: var(--gum-color-alpha-black-30);
163
+ --color-alpha-black-40: var(--gum-color-alpha-black-40);
164
+ --color-alpha-black-50: var(--gum-color-alpha-black-50);
165
+ --color-alpha-black-60: var(--gum-color-alpha-black-60);
166
+ --color-alpha-black-70: var(--gum-color-alpha-black-70);
167
+ --color-alpha-black-80: var(--gum-color-alpha-black-80);
168
+ --color-alpha-black-90: var(--gum-color-alpha-black-90);
169
+ --color-alpha-white-10: var(--gum-color-alpha-white-10);
170
+ --color-alpha-white-100: var(--gum-color-alpha-white-100);
171
+ --color-alpha-white-20: var(--gum-color-alpha-white-20);
172
+ --color-alpha-white-30: var(--gum-color-alpha-white-30);
173
+ --color-alpha-white-40: var(--gum-color-alpha-white-40);
174
+ --color-alpha-white-50: var(--gum-color-alpha-white-50);
175
+ --color-alpha-white-60: var(--gum-color-alpha-white-60);
176
+ --color-alpha-white-70: var(--gum-color-alpha-white-70);
177
+ --color-alpha-white-80: var(--gum-color-alpha-white-80);
178
+ --color-alpha-white-90: var(--gum-color-alpha-white-90);
179
+ --color-border-brand-primary: var(--gum-color-border-brand-primary);
180
+ --color-border-brand-secondary: var(--gum-color-border-brand-secondary);
181
+ --color-border-error-primary: var(--gum-color-border-error-primary);
182
+ --color-border-focus-ring: var(--gum-color-border-focus-ring);
183
+ --color-border-inverse: var(--gum-color-border-inverse);
184
+ --color-border-outline-default: var(--gum-color-border-outline-default);
185
+ --color-border-outline-disabled: var(--gum-color-border-outline-disabled);
186
+ --color-border-outline-focused: var(--gum-color-border-outline-focused);
187
+ --color-border-outline-hover: var(--gum-color-border-outline-hover);
188
+ --color-border-outline-pressed: var(--gum-color-border-outline-pressed);
189
+ --color-border-pink-primary: var(--gum-color-border-pink-primary);
190
+ --color-border-primary: var(--gum-color-border-primary);
191
+ --color-border-purple-primary: var(--gum-color-border-purple-primary);
192
+ --color-border-secondary: var(--gum-color-border-secondary);
193
+ --color-border-success-primary: var(--gum-color-border-success-primary);
194
+ --color-border-tertiary: var(--gum-color-border-tertiary);
195
+ --color-border-warning-primary: var(--gum-color-border-warning-primary);
196
+ --color-icon-brand-disabled: var(--gum-color-icon-brand-disabled);
197
+ --color-icon-brand-primary: var(--gum-color-icon-brand-primary);
198
+ --color-icon-brand-secondary: var(--gum-color-icon-brand-secondary);
199
+ --color-icon-brand-tertiary: var(--gum-color-icon-brand-tertiary);
200
+ --color-icon-disabled: var(--gum-color-icon-disabled);
201
+ --color-icon-error-disabled: var(--gum-color-icon-error-disabled);
202
+ --color-icon-error-primary: var(--gum-color-icon-error-primary);
203
+ --color-icon-error-secondary: var(--gum-color-icon-error-secondary);
204
+ --color-icon-inverse: var(--gum-color-icon-inverse);
205
+ --color-icon-inverse-secondary: var(--gum-color-icon-inverse-secondary);
206
+ --color-icon-link-hover: var(--gum-color-icon-link-hover);
207
+ --color-icon-link-primary: var(--gum-color-icon-link-primary);
208
+ --color-icon-on-brand: var(--gum-color-icon-on-brand);
209
+ --color-icon-pink-primary: var(--gum-color-icon-pink-primary);
210
+ --color-icon-pink-secondary: var(--gum-color-icon-pink-secondary);
211
+ --color-icon-primary: var(--gum-color-icon-primary);
212
+ --color-icon-purple-primary: var(--gum-color-icon-purple-primary);
213
+ --color-icon-purple-secondary: var(--gum-color-icon-purple-secondary);
214
+ --color-icon-secondary: var(--gum-color-icon-secondary);
215
+ --color-icon-success-primary: var(--gum-color-icon-success-primary);
216
+ --color-icon-success-secondary: var(--gum-color-icon-success-secondary);
217
+ --color-icon-tertiary: var(--gum-color-icon-tertiary);
218
+ --color-icon-warning-primary: var(--gum-color-icon-warning-primary);
219
+ --color-icon-warning-secondary: var(--gum-color-icon-warning-secondary);
220
+ --color-surface-brand-default: var(--gum-color-surface-brand-default);
221
+ --color-surface-brand-disabled: var(--gum-color-surface-brand-disabled);
222
+ --color-surface-brand-focus: var(--gum-color-surface-brand-focus);
223
+ --color-surface-brand-hover: var(--gum-color-surface-brand-hover);
224
+ --color-surface-brand-pressed: var(--gum-color-surface-brand-pressed);
225
+ --color-surface-brand-primary: var(--gum-color-surface-brand-primary);
226
+ --color-surface-brand-quaternary: var(--gum-color-surface-brand-quaternary);
227
+ --color-surface-brand-secondary: var(--gum-color-surface-brand-secondary);
228
+ --color-surface-brand-tertiary: var(--gum-color-surface-brand-tertiary);
229
+ --color-surface-error-default: var(--gum-color-surface-error-default);
230
+ --color-surface-error-disabled: var(--gum-color-surface-error-disabled);
231
+ --color-surface-error-focus: var(--gum-color-surface-error-focus);
232
+ --color-surface-error-hover: var(--gum-color-surface-error-hover);
233
+ --color-surface-error-pressed: var(--gum-color-surface-error-pressed);
234
+ --color-surface-error-primary: var(--gum-color-surface-error-primary);
235
+ --color-surface-error-secondary: var(--gum-color-surface-error-secondary);
236
+ --color-surface-gray-default: var(--gum-color-surface-gray-default);
237
+ --color-surface-gray-disabled: var(--gum-color-surface-gray-disabled);
238
+ --color-surface-gray-focus: var(--gum-color-surface-gray-focus);
239
+ --color-surface-gray-hover: var(--gum-color-surface-gray-hover);
240
+ --color-surface-gray-pressed: var(--gum-color-surface-gray-pressed);
241
+ --color-surface-inverse-primary: var(--gum-color-surface-inverse-primary);
242
+ --color-surface-inverse-secondary: var(--gum-color-surface-inverse-secondary);
243
+ --color-surface-outline-hover: var(--gum-color-surface-outline-hover);
244
+ --color-surface-pink-default: var(--gum-color-surface-pink-default);
245
+ --color-surface-pink-primary: var(--gum-color-surface-pink-primary);
246
+ --color-surface-pink-secondary: var(--gum-color-surface-pink-secondary);
247
+ --color-surface-primary: var(--gum-color-surface-primary);
248
+ --color-surface-purple-default: var(--gum-color-surface-purple-default);
249
+ --color-surface-purple-primary: var(--gum-color-surface-purple-primary);
250
+ --color-surface-purple-secondary: var(--gum-color-surface-purple-secondary);
251
+ --color-surface-quaternary: var(--gum-color-surface-quaternary);
252
+ --color-surface-scrim: var(--gum-color-surface-scrim);
253
+ --color-surface-scrim-strong: var(--gum-color-surface-scrim-strong);
254
+ --color-surface-secondary: var(--gum-color-surface-secondary);
255
+ --color-surface-success-default: var(--gum-color-surface-success-default);
256
+ --color-surface-success-primary: var(--gum-color-surface-success-primary);
257
+ --color-surface-success-secondary: var(--gum-color-surface-success-secondary);
258
+ --color-surface-tertiary: var(--gum-color-surface-tertiary);
259
+ --color-surface-warning-default: var(--gum-color-surface-warning-default);
260
+ --color-surface-warning-primary: var(--gum-color-surface-warning-primary);
261
+ --color-surface-warning-secondary: var(--gum-color-surface-warning-secondary);
262
+ --color-text-brand-disabled: var(--gum-color-text-brand-disabled);
263
+ --color-text-brand-primary: var(--gum-color-text-brand-primary);
264
+ --color-text-brand-secondary: var(--gum-color-text-brand-secondary);
265
+ --color-text-brand-tertiary: var(--gum-color-text-brand-tertiary);
266
+ --color-text-disabled: var(--gum-color-text-disabled);
267
+ --color-text-error-disabled: var(--gum-color-text-error-disabled);
268
+ --color-text-error-primary: var(--gum-color-text-error-primary);
269
+ --color-text-error-secondary: var(--gum-color-text-error-secondary);
270
+ --color-text-inverse: var(--gum-color-text-inverse);
271
+ --color-text-inverse-secondary: var(--gum-color-text-inverse-secondary);
272
+ --color-text-link-hover: var(--gum-color-text-link-hover);
273
+ --color-text-link-primary: var(--gum-color-text-link-primary);
274
+ --color-text-on-brand: var(--gum-color-text-on-brand);
275
+ --color-text-pink-primary: var(--gum-color-text-pink-primary);
276
+ --color-text-pink-secondary: var(--gum-color-text-pink-secondary);
277
+ --color-text-primary: var(--gum-color-text-primary);
278
+ --color-text-purple-primary: var(--gum-color-text-purple-primary);
279
+ --color-text-purple-secondary: var(--gum-color-text-purple-secondary);
280
+ --color-text-secondary: var(--gum-color-text-secondary);
281
+ --color-text-success-primary: var(--gum-color-text-success-primary);
282
+ --color-text-success-secondary: var(--gum-color-text-success-secondary);
283
+ --color-text-tertiary: var(--gum-color-text-tertiary);
284
+ --color-text-warning-primary: var(--gum-color-text-warning-primary);
285
+ --color-text-warning-secondary: var(--gum-color-text-warning-secondary);
286
+ --radius-2xl: var(--gum-radius-2xl);
287
+ --radius-3xl: var(--gum-radius-3xl);
288
+ --radius-4xl: var(--gum-radius-4xl);
289
+ --radius-full: var(--gum-radius-full);
290
+ --radius-lg: var(--gum-radius-lg);
291
+ --radius-md: var(--gum-radius-md);
292
+ --radius-none: var(--gum-radius-none);
293
+ --radius-sm: var(--gum-radius-sm);
294
+ --radius-xl: var(--gum-radius-xl);
295
+ --radius-xs: var(--gum-radius-xs);
296
+ --breakpoint-2xl: 1536px;
297
+ --breakpoint-lg: 1024px;
298
+ --breakpoint-md: 768px;
299
+ --breakpoint-sm: 640px;
300
+ --breakpoint-xl: 1280px;
301
+ --spacing-0: var(--gum-spacing-0);
302
+ --spacing-0-5: var(--gum-spacing-0-5);
303
+ --spacing-1: var(--gum-spacing-1);
304
+ --spacing-1-5: var(--gum-spacing-1-5);
305
+ --spacing-10: var(--gum-spacing-10);
306
+ --spacing-11: var(--gum-spacing-11);
307
+ --spacing-12: var(--gum-spacing-12);
308
+ --spacing-14: var(--gum-spacing-14);
309
+ --spacing-16: var(--gum-spacing-16);
310
+ --spacing-2: var(--gum-spacing-2);
311
+ --spacing-2-5: var(--gum-spacing-2-5);
312
+ --spacing-20: var(--gum-spacing-20);
313
+ --spacing-24: var(--gum-spacing-24);
314
+ --spacing-28: var(--gum-spacing-28);
315
+ --spacing-3: var(--gum-spacing-3);
316
+ --spacing-3-5: var(--gum-spacing-3-5);
317
+ --spacing-32: var(--gum-spacing-32);
318
+ --spacing-36: var(--gum-spacing-36);
319
+ --spacing-4: var(--gum-spacing-4);
320
+ --spacing-40: var(--gum-spacing-40);
321
+ --spacing-44: var(--gum-spacing-44);
322
+ --spacing-48: var(--gum-spacing-48);
323
+ --spacing-5: var(--gum-spacing-5);
324
+ --spacing-52: var(--gum-spacing-52);
325
+ --spacing-56: var(--gum-spacing-56);
326
+ --spacing-6: var(--gum-spacing-6);
327
+ --spacing-60: var(--gum-spacing-60);
328
+ --spacing-64: var(--gum-spacing-64);
329
+ --spacing-7: var(--gum-spacing-7);
330
+ --spacing-72: var(--gum-spacing-72);
331
+ --spacing-8: var(--gum-spacing-8);
332
+ --spacing-80: var(--gum-spacing-80);
333
+ --spacing-9: var(--gum-spacing-9);
334
+ --spacing-96: var(--gum-spacing-96);
335
+ --spacing-px: var(--gum-spacing-px);
336
+ --font-mono: var(--gum-font-family-mono);
337
+ --font-sans: var(--gum-font-family-sans);
338
+ --text-2xl: var(--gum-font-size-2xl);
339
+ --text-2xs: var(--gum-font-size-2xs);
340
+ --text-3xl: var(--gum-font-size-3xl);
341
+ --text-4xl: var(--gum-font-size-4xl);
342
+ --text-5xl: var(--gum-font-size-5xl);
343
+ --text-6xl: var(--gum-font-size-6xl);
344
+ --text-7xl: var(--gum-font-size-7xl);
345
+ --text-base: var(--gum-font-size-base);
346
+ --text-lg: var(--gum-font-size-lg);
347
+ --text-sm: var(--gum-font-size-sm);
348
+ --text-xl: var(--gum-font-size-xl);
349
+ --text-xs: var(--gum-font-size-xs);
350
+ --font-weight-medium: var(--gum-font-weight-medium);
351
+ --font-weight-regular: var(--gum-font-weight-regular);
352
+ --font-weight-semibold: var(--gum-font-weight-semibold);
353
+ --tracking-normal: var(--gum-letter-spacing-normal);
354
+ --tracking-tight: var(--gum-letter-spacing-tight);
355
+ --tracking-tighter: var(--gum-letter-spacing-tighter);
356
+ --tracking-wide: var(--gum-letter-spacing-wide);
357
+ --tracking-wider: var(--gum-letter-spacing-wider);
358
+ --tracking-widest: var(--gum-letter-spacing-widest);
359
+ --leading-10: var(--gum-line-height-10);
360
+ --leading-3: var(--gum-line-height-3);
361
+ --leading-4: var(--gum-line-height-4);
362
+ --leading-5: var(--gum-line-height-5);
363
+ --leading-6: var(--gum-line-height-6);
364
+ --leading-7: var(--gum-line-height-7);
365
+ --leading-8: var(--gum-line-height-8);
366
+ --leading-9: var(--gum-line-height-9);
367
+ --shadow-none: var(--gum-shadow-none);
368
+ --shadow-sm: var(--gum-shadow-sm);
369
+ --shadow: var(--gum-shadow);
370
+ --shadow-md: var(--gum-shadow-md);
371
+ --shadow-lg: var(--gum-shadow-lg);
372
+ --shadow-xl: var(--gum-shadow-xl);
373
+ }