@netlify/spark-ui 2.3.0 → 2.4.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 (37) hide show
  1. package/README.md +14 -3
  2. package/dist/assets/AskNetlify.css +1 -1
  3. package/dist/assets/DropZone.css +1 -1
  4. package/dist/assets/Popover.css +1 -1
  5. package/dist/assets/SearchLink.css +1 -1
  6. package/dist/assets/SearchModal.css +1 -1
  7. package/package.json +4 -3
  8. package/packages/assets/fonts/ibm-plex-mono/IBMPlexMono-Bold.woff2 +0 -0
  9. package/packages/assets/fonts/ibm-plex-mono/IBMPlexMono-Medium.woff2 +0 -0
  10. package/packages/assets/fonts/ibm-plex-mono/IBMPlexMono-Regular.woff2 +0 -0
  11. package/packages/assets/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff2 +0 -0
  12. package/packages/assets/fonts/ibm-plex-mono/OFL.txt +93 -0
  13. package/packages/components/Blockquote.astro +1 -1
  14. package/packages/components/Card.astro +2 -2
  15. package/packages/components/Eyebrow.astro +1 -1
  16. package/packages/components/FilterableGrid/FilterableGrid.astro +4 -4
  17. package/packages/components/HeadingBlock.astro +1 -1
  18. package/packages/components/PageHero.astro +1 -1
  19. package/packages/components/PageHeroGraphic.astro +1 -1
  20. package/packages/components/PageSection.astro +1 -1
  21. package/packages/components/TabbedContent.astro +3 -3
  22. package/packages/components/TrustBarTickerItem.astro +1 -1
  23. package/packages/components/preact/AskNetlify/AskNetlify.css +4 -4
  24. package/packages/components/preact/DropZone/DropZone.css +4 -4
  25. package/packages/components/preact/Popover/Popover.css +5 -5
  26. package/packages/components/preact/SearchModal/components/SearchLink/SearchLink.css +5 -5
  27. package/packages/components/preact/SearchModal/components/SearchModal/SearchModal.css +6 -6
  28. package/packages/styles/app/color.rgb.css +176 -0
  29. package/packages/styles/buttons.css +1 -1
  30. package/packages/styles/code-block.css +2 -2
  31. package/packages/styles/fonts.css +32 -4
  32. package/packages/styles/layout.css +2 -2
  33. package/packages/styles/tokens.compat.css +124 -1
  34. package/packages/styles/tokens.css +756 -205
  35. package/packages/tokens/app.d.ts +176 -0
  36. package/packages/tokens/app.js +176 -0
  37. package/skills/landing-page.md +15 -10
package/packages/tokens/app.d.ts CHANGED
@@ -30,6 +30,182 @@ export declare const colorFacetsGreen600: string;
30
30
  export declare const colorFacetsGreen700: string;
31
31
  export declare const colorFacetsGreen800: string;
32
32
  export declare const colorFacetsGreen900: string;
33
+ export declare const colorHuesBlueBlack000: string;
34
+ export declare const colorHuesBlueBlack100: string;
35
+ export declare const colorHuesBlueBlack200: string;
36
+ export declare const colorHuesBlueBlack300: string;
37
+ export declare const colorHuesBlueBlack400: string;
38
+ export declare const colorHuesBlueBlack500: string;
39
+ export declare const colorHuesBlueBlack600: string;
40
+ export declare const colorHuesBlueBlack700: string;
41
+ export declare const colorHuesBlueBlack800: string;
42
+ export declare const colorHuesBlueBlack900: string;
43
+ export declare const colorHuesCobalt000: string;
44
+ export declare const colorHuesCobalt100: string;
45
+ export declare const colorHuesCobalt200: string;
46
+ export declare const colorHuesCobalt300: string;
47
+ export declare const colorHuesCobalt400: string;
48
+ export declare const colorHuesCobalt500: string;
49
+ export declare const colorHuesCobalt600: string;
50
+ export declare const colorHuesCobalt700: string;
51
+ export declare const colorHuesCobalt800: string;
52
+ export declare const colorHuesCobalt900: string;
53
+ export declare const colorHuesDeepTeal000: string;
54
+ export declare const colorHuesDeepTeal100: string;
55
+ export declare const colorHuesDeepTeal200: string;
56
+ export declare const colorHuesDeepTeal300: string;
57
+ export declare const colorHuesDeepTeal400: string;
58
+ export declare const colorHuesDeepTeal500: string;
59
+ export declare const colorHuesDeepTeal600: string;
60
+ export declare const colorHuesDeepTeal700: string;
61
+ export declare const colorHuesDeepTeal800: string;
62
+ export declare const colorHuesDeepTeal900: string;
63
+ export declare const colorHuesGold000: string;
64
+ export declare const colorHuesGold100: string;
65
+ export declare const colorHuesGold200: string;
66
+ export declare const colorHuesGold300: string;
67
+ export declare const colorHuesGold400: string;
68
+ export declare const colorHuesGold500: string;
69
+ export declare const colorHuesGold600: string;
70
+ export declare const colorHuesGold700: string;
71
+ export declare const colorHuesGold800: string;
72
+ export declare const colorHuesGold900: string;
73
+ export declare const colorHuesGray000: string;
74
+ export declare const colorHuesGray100: string;
75
+ export declare const colorHuesGray200: string;
76
+ export declare const colorHuesGray300: string;
77
+ export declare const colorHuesGray400: string;
78
+ export declare const colorHuesGray500: string;
79
+ export declare const colorHuesGray600: string;
80
+ export declare const colorHuesGray700: string;
81
+ export declare const colorHuesGray800: string;
82
+ export declare const colorHuesGray900: string;
83
+ export declare const colorHuesGreen000: string;
84
+ export declare const colorHuesGreen100: string;
85
+ export declare const colorHuesGreen200: string;
86
+ export declare const colorHuesGreen300: string;
87
+ export declare const colorHuesGreen400: string;
88
+ export declare const colorHuesGreen500: string;
89
+ export declare const colorHuesGreen600: string;
90
+ export declare const colorHuesGreen700: string;
91
+ export declare const colorHuesGreen800: string;
92
+ export declare const colorHuesGreen900: string;
93
+ export declare const colorHuesLilac000: string;
94
+ export declare const colorHuesLilac100: string;
95
+ export declare const colorHuesLilac200: string;
96
+ export declare const colorHuesLilac300: string;
97
+ export declare const colorHuesLilac400: string;
98
+ export declare const colorHuesLilac500: string;
99
+ export declare const colorHuesLilac600: string;
100
+ export declare const colorHuesLilac700: string;
101
+ export declare const colorHuesLilac800: string;
102
+ export declare const colorHuesLilac900: string;
103
+ export declare const colorHuesLime000: string;
104
+ export declare const colorHuesLime100: string;
105
+ export declare const colorHuesLime200: string;
106
+ export declare const colorHuesLime300: string;
107
+ export declare const colorHuesLime400: string;
108
+ export declare const colorHuesLime500: string;
109
+ export declare const colorHuesLime600: string;
110
+ export declare const colorHuesLime700: string;
111
+ export declare const colorHuesLime800: string;
112
+ export declare const colorHuesLime900: string;
113
+ export declare const colorHuesOffBlack: string;
114
+ export declare const colorHuesOrange000: string;
115
+ export declare const colorHuesOrange100: string;
116
+ export declare const colorHuesOrange200: string;
117
+ export declare const colorHuesOrange300: string;
118
+ export declare const colorHuesOrange400: string;
119
+ export declare const colorHuesOrange500: string;
120
+ export declare const colorHuesOrange600: string;
121
+ export declare const colorHuesOrange700: string;
122
+ export declare const colorHuesOrange800: string;
123
+ export declare const colorHuesOrange900: string;
124
+ export declare const colorHuesPeach000: string;
125
+ export declare const colorHuesPeach100: string;
126
+ export declare const colorHuesPeach200: string;
127
+ export declare const colorHuesPeach300: string;
128
+ export declare const colorHuesPeach400: string;
129
+ export declare const colorHuesPeach500: string;
130
+ export declare const colorHuesPeach600: string;
131
+ export declare const colorHuesPeach700: string;
132
+ export declare const colorHuesPeach800: string;
133
+ export declare const colorHuesPeach900: string;
134
+ export declare const colorHuesPink000: string;
135
+ export declare const colorHuesPink100: string;
136
+ export declare const colorHuesPink200: string;
137
+ export declare const colorHuesPink300: string;
138
+ export declare const colorHuesPink400: string;
139
+ export declare const colorHuesPink500: string;
140
+ export declare const colorHuesPink600: string;
141
+ export declare const colorHuesPink700: string;
142
+ export declare const colorHuesPink800: string;
143
+ export declare const colorHuesPink900: string;
144
+ export declare const colorHuesPlum000: string;
145
+ export declare const colorHuesPlum100: string;
146
+ export declare const colorHuesPlum200: string;
147
+ export declare const colorHuesPlum300: string;
148
+ export declare const colorHuesPlum400: string;
149
+ export declare const colorHuesPlum500: string;
150
+ export declare const colorHuesPlum600: string;
151
+ export declare const colorHuesPlum700: string;
152
+ export declare const colorHuesPlum800: string;
153
+ export declare const colorHuesPlum900: string;
154
+ export declare const colorHuesPurple000: string;
155
+ export declare const colorHuesPurple100: string;
156
+ export declare const colorHuesPurple200: string;
157
+ export declare const colorHuesPurple300: string;
158
+ export declare const colorHuesPurple400: string;
159
+ export declare const colorHuesPurple500: string;
160
+ export declare const colorHuesPurple600: string;
161
+ export declare const colorHuesPurple700: string;
162
+ export declare const colorHuesPurple800: string;
163
+ export declare const colorHuesPurple900: string;
164
+ export declare const colorHuesRed000: string;
165
+ export declare const colorHuesRed100: string;
166
+ export declare const colorHuesRed200: string;
167
+ export declare const colorHuesRed300: string;
168
+ export declare const colorHuesRed400: string;
169
+ export declare const colorHuesRed500: string;
170
+ export declare const colorHuesRed600: string;
171
+ export declare const colorHuesRed700: string;
172
+ export declare const colorHuesRed800: string;
173
+ export declare const colorHuesRed900: string;
174
+ export declare const colorHuesSky000: string;
175
+ export declare const colorHuesSky100: string;
176
+ export declare const colorHuesSky200: string;
177
+ export declare const colorHuesSky300: string;
178
+ export declare const colorHuesSky400: string;
179
+ export declare const colorHuesSky500: string;
180
+ export declare const colorHuesSky600: string;
181
+ export declare const colorHuesSky700: string;
182
+ export declare const colorHuesSky800: string;
183
+ export declare const colorHuesSky900: string;
184
+ export declare const colorHuesSkyTint100: string;
185
+ export declare const colorHuesSkyTint200: string;
186
+ export declare const colorHuesSkyTint300: string;
187
+ export declare const colorHuesTurquoise000: string;
188
+ export declare const colorHuesTurquoise100: string;
189
+ export declare const colorHuesTurquoise200: string;
190
+ export declare const colorHuesTurquoise300: string;
191
+ export declare const colorHuesTurquoise400: string;
192
+ export declare const colorHuesTurquoise500: string;
193
+ export declare const colorHuesTurquoise600: string;
194
+ export declare const colorHuesTurquoise700: string;
195
+ export declare const colorHuesTurquoise800: string;
196
+ export declare const colorHuesTurquoise900: string;
197
+ export declare const colorHuesWarmGray50: string;
198
+ export declare const colorHuesWarmGray100: string;
199
+ export declare const colorHuesWarmGray200: string;
200
+ export declare const colorHuesWarmGray300: string;
201
+ export declare const colorHuesWarmGray400: string;
202
+ export declare const colorHuesWarmGray500: string;
203
+ export declare const colorHuesWarmGray600: string;
204
+ export declare const colorHuesWarmGray700: string;
205
+ export declare const colorHuesWarmGray800: string;
206
+ export declare const colorHuesWarmGray900: string;
207
+ export declare const colorHuesWarmGray950: string;
208
+ export declare const colorHuesWhite: string;
33
209
  export declare const colorFacetsNeutralDark000: string;
34
210
  export declare const colorFacetsNeutralDark100: string;
35
211
  export declare const colorFacetsNeutralDark200: string;
package/packages/tokens/app.js CHANGED
@@ -30,6 +30,182 @@ export const colorFacetsGreen600 = "#228240";
30
30
  export const colorFacetsGreen700 = "#1a6b34";
31
31
  export const colorFacetsGreen800 = "#0f4a21";
32
32
  export const colorFacetsGreen900 = "#152a19";
33
+ export const colorHuesBlueBlack000 = "#f4f7f9";
34
+ export const colorHuesBlueBlack100 = "#c3cbce";
35
+ export const colorHuesBlueBlack200 = "#939ea3";
36
+ export const colorHuesBlueBlack300 = "#647378";
37
+ export const colorHuesBlueBlack400 = "#37484e";
38
+ export const colorHuesBlueBlack500 = "#071b22";
39
+ export const colorHuesBlueBlack600 = "#04151b";
40
+ export const colorHuesBlueBlack700 = "#030f14";
41
+ export const colorHuesBlueBlack800 = "#01090d";
42
+ export const colorHuesBlueBlack900 = "#010507";
43
+ export const colorHuesCobalt000 = "#f3f7ff";
44
+ export const colorHuesCobalt100 = "#ccdeff";
45
+ export const colorHuesCobalt200 = "#a4c4ff";
46
+ export const colorHuesCobalt300 = "#7aa8fe";
47
+ export const colorHuesCobalt400 = "#4d89fd";
48
+ export const colorHuesCobalt500 = "#065eff";
49
+ export const colorHuesCobalt600 = "#0049d0";
50
+ export const colorHuesCobalt700 = "#0036a0";
51
+ export const colorHuesCobalt800 = "#002573";
52
+ export const colorHuesCobalt900 = "#001449";
53
+ export const colorHuesDeepTeal000 = "#eef9ff";
54
+ export const colorHuesDeepTeal100 = "#c7e1f0";
55
+ export const colorHuesDeepTeal200 = "#a1c9df";
56
+ export const colorHuesDeepTeal300 = "#79afcd";
57
+ export const colorHuesDeepTeal400 = "#4e95ba";
58
+ export const colorHuesDeepTeal500 = "#0a77a2";
59
+ export const colorHuesDeepTeal600 = "#015f83";
60
+ export const colorHuesDeepTeal700 = "#014864";
61
+ export const colorHuesDeepTeal800 = "#013247";
62
+ export const colorHuesDeepTeal900 = "#001e2c";
63
+ export const colorHuesGold000 = "#fdf6e8";
64
+ export const colorHuesGold100 = "#feeed1";
65
+ export const colorHuesGold200 = "#ffe7b9";
66
+ export const colorHuesGold300 = "#ffdea0";
67
+ export const colorHuesGold400 = "#ffd584";
68
+ export const colorHuesGold500 = "#fdcb65";
69
+ export const colorHuesGold600 = "#c39940";
70
+ export const colorHuesGold700 = "#8c6919";
71
+ export const colorHuesGold800 = "#573e02";
72
+ export const colorHuesGold900 = "#251800";
73
+ export const colorHuesGray000 = "#fdfdfd";
74
+ export const colorHuesGray100 = "#f3f4f4";
75
+ export const colorHuesGray200 = "#eaedee";
76
+ export const colorHuesGray300 = "#e1e6e8";
77
+ export const colorHuesGray400 = "#d8e0e3";
78
+ export const colorHuesGray500 = "#cfd9dd";
79
+ export const colorHuesGray600 = "#a3b0b5";
80
+ export const colorHuesGray700 = "#7a898f";
81
+ export const colorHuesGray800 = "#52646a";
82
+ export const colorHuesGray900 = "#2d4148";
83
+ export const colorHuesGreen000 = "#ecfcef";
84
+ export const colorHuesGreen100 = "#cff0d6";
85
+ export const colorHuesGreen200 = "#b0e3bd";
86
+ export const colorHuesGreen300 = "#90d6a3";
87
+ export const colorHuesGreen400 = "#6dc788";
88
+ export const colorHuesGreen500 = "#3fb66b";
89
+ export const colorHuesGreen600 = "#248e4f";
90
+ export const colorHuesGreen700 = "#036934";
91
+ export const colorHuesGreen800 = "#01441f";
92
+ export const colorHuesGreen900 = "#00220c";
93
+ export const colorHuesLilac000 = "#f7f5ff";
94
+ export const colorHuesLilac100 = "#eceaff";
95
+ export const colorHuesLilac200 = "#e2deff";
96
+ export const colorHuesLilac300 = "#d8d2ff";
97
+ export const colorHuesLilac400 = "#cdc4ff";
98
+ export const colorHuesLilac500 = "#c1b5ff";
99
+ export const colorHuesLilac600 = "#9389c7";
100
+ export const colorHuesLilac700 = "#685f92";
101
+ export const colorHuesLilac800 = "#403860";
102
+ export const colorHuesLilac900 = "#1b1533";
103
+ export const colorHuesLime000 = "#f2fbe5";
104
+ export const colorHuesLime100 = "#e7faca";
105
+ export const colorHuesLime200 = "#ddf8ae";
106
+ export const colorHuesLime300 = "#d2f590";
107
+ export const colorHuesLime400 = "#c7f26d";
108
+ export const colorHuesLime500 = "#bbee3c";
109
+ export const colorHuesLime600 = "#8bb503";
110
+ export const colorHuesLime700 = "#607f07";
111
+ export const colorHuesLime800 = "#384c00";
112
+ export const colorHuesLime900 = "#151f00";
113
+ export const colorHuesOffBlack = "#131619";
114
+ export const colorHuesOrange000 = "#fff4f0";
115
+ export const colorHuesOrange100 = "#ffe0d5";
116
+ export const colorHuesOrange200 = "#ffcab8";
117
+ export const colorHuesOrange300 = "#feb399";
118
+ export const colorHuesOrange400 = "#ff9874";
119
+ export const colorHuesOrange500 = "#ff7542";
120
+ export const colorHuesOrange600 = "#ca5528";
121
+ export const colorHuesOrange700 = "#98360c";
122
+ export const colorHuesOrange800 = "#651e00";
123
+ export const colorHuesOrange900 = "#340b00";
124
+ export const colorHuesPeach000 = "#fff5ed";
125
+ export const colorHuesPeach100 = "#ffebdc";
126
+ export const colorHuesPeach200 = "#ffe0cb";
127
+ export const colorHuesPeach300 = "#ffd6b8";
128
+ export const colorHuesPeach400 = "#ffcaa3";
129
+ export const colorHuesPeach500 = "#ffbc8a";
130
+ export const colorHuesPeach600 = "#c68d62";
131
+ export const colorHuesPeach700 = "#8f613d";
132
+ export const colorHuesPeach800 = "#5c381a";
133
+ export const colorHuesPeach900 = "#2c1300";
134
+ export const colorHuesPink000 = "#fff3f7";
135
+ export const colorHuesPink100 = "#ffd9e6";
136
+ export const colorHuesPink200 = "#febed4";
137
+ export const colorHuesPink300 = "#ff9fc3";
138
+ export const colorHuesPink400 = "#fe7bb0";
139
+ export const colorHuesPink500 = "#ff3d9c";
140
+ export const colorHuesPink600 = "#cc2279";
141
+ export const colorHuesPink700 = "#9a0458";
142
+ export const colorHuesPink800 = "#660239";
143
+ export const colorHuesPink900 = "#37001c";
144
+ export const colorHuesPlum000 = "#fdf3fe";
145
+ export const colorHuesPlum100 = "#e0cce2";
146
+ export const colorHuesPlum200 = "#c3a6c6";
147
+ export const colorHuesPlum300 = "#a57fa9";
148
+ export const colorHuesPlum400 = "#85588b";
149
+ export const colorHuesPlum500 = "#612d68";
150
+ export const colorHuesPlum600 = "#502456";
151
+ export const colorHuesPlum700 = "#401a45";
152
+ export const colorHuesPlum800 = "#301235";
153
+ export const colorHuesPlum900 = "#220925";
154
+ export const colorHuesPurple000 = "#f4f6ff";
155
+ export const colorHuesPurple100 = "#d2dbfe";
156
+ export const colorHuesPurple200 = "#b0befe";
157
+ export const colorHuesPurple300 = "#8e9ffe";
158
+ export const colorHuesPurple400 = "#6d7dfd";
159
+ export const colorHuesPurple500 = "#4e49ff";
160
+ export const colorHuesPurple600 = "#3d36d3";
161
+ export const colorHuesPurple700 = "#2d23a9";
162
+ export const colorHuesPurple800 = "#1e1080";
163
+ export const colorHuesPurple900 = "#110059";
164
+ export const colorHuesRed000 = "#fff4f3";
165
+ export const colorHuesRed100 = "#ffd9d5";
166
+ export const colorHuesRed200 = "#febdb7";
167
+ export const colorHuesRed300 = "#ff9e95";
168
+ export const colorHuesRed400 = "#fe7971";
169
+ export const colorHuesRed500 = "#f84747";
170
+ export const colorHuesRed600 = "#c72e31";
171
+ export const colorHuesRed700 = "#98131b";
172
+ export const colorHuesRed800 = "#69000b";
173
+ export const colorHuesRed900 = "#3a0003";
174
+ export const colorHuesSky000 = "#e8fbfd";
175
+ export const colorHuesSky100 = "#cbf5fa";
176
+ export const colorHuesSky200 = "#aceef6";
177
+ export const colorHuesSky300 = "#8ae7f1";
178
+ export const colorHuesSky400 = "#60deec";
179
+ export const colorHuesSky500 = "#01d4e5";
180
+ export const colorHuesSky600 = "#01a2af";
181
+ export const colorHuesSky700 = "#04737d";
182
+ export const colorHuesSky800 = "#02474d";
183
+ export const colorHuesSky900 = "#001f23";
184
+ export const colorHuesSkyTint100 = "#a9f0f5";
185
+ export const colorHuesSkyTint200 = "#74e6ef";
186
+ export const colorHuesSkyTint300 = "#2bd8e6";
187
+ export const colorHuesTurquoise000 = "#e8fcf7";
188
+ export const colorHuesTurquoise100 = "#ccf7ee";
189
+ export const colorHuesTurquoise200 = "#aef2e4";
190
+ export const colorHuesTurquoise300 = "#8decda";
191
+ export const colorHuesTurquoise400 = "#63e6d0";
192
+ export const colorHuesTurquoise500 = "#10ddc4";
193
+ export const colorHuesTurquoise600 = "#09a995";
194
+ export const colorHuesTurquoise700 = "#077869";
195
+ export const colorHuesTurquoise800 = "#004a40";
196
+ export const colorHuesTurquoise900 = "#00201b";
197
+ export const colorHuesWarmGray50 = "#f7f6f4";
198
+ export const colorHuesWarmGray100 = "#f0eeea";
199
+ export const colorHuesWarmGray200 = "#e7e5e0";
200
+ export const colorHuesWarmGray300 = "#dad8d2";
201
+ export const colorHuesWarmGray400 = "#b8b4ad";
202
+ export const colorHuesWarmGray500 = "#949087";
203
+ export const colorHuesWarmGray600 = "#736f67";
204
+ export const colorHuesWarmGray700 = "#56534c";
205
+ export const colorHuesWarmGray800 = "#3d3a35";
206
+ export const colorHuesWarmGray900 = "#282622";
207
+ export const colorHuesWarmGray950 = "#1b1a17";
208
+ export const colorHuesWhite = "#ffffff";
33
209
  export const colorFacetsNeutralDark000 = "#ffffff";
34
210
  export const colorFacetsNeutralDark100 = "#e6ecf2";
35
211
  export const colorFacetsNeutralDark200 = "#abb5bf";
package/skills/landing-page.md CHANGED
@@ -167,23 +167,28 @@ No custom layout CSS. Use these classes:
167
167
 
168
168
  - `.ntl-flow` — Vertical stack. Gap: `--ntl-flow-space`
169
169
  - `.ntl-cluster` — Horizontal wrap. Gap: `--ntl-cluster-gap`
170
- - `.ntl-grid` — Responsive grid. Requires `--ntl-grid-column-min-size`
170
+ - `.ntl-grid` — Responsive grid. Column minimum: `--ntl-grid-column-min-size` (default 300px)
171
171
  - `.ntl-stack` — Overlay children (CSS Grid)
172
172
  - `.ntl-breakout` — Full-width breakout
173
173
 
174
174
  ## Design Tokens
175
175
 
176
- Use `--ntl-` prefixed tokens (auto-flip light/dark):
177
-
178
- - Backgrounds: `--ntl-color-bg`, `bg-2`, `bg-3`, `bg-inverse`
179
- - Text: `--ntl-color-text`, `text-weak`, `text-weaker`
180
- - Headings: `--ntl-heading-text-color`
181
- - Spacing: `--ntl-space-3xs` to `--ntl-space-4xl`
182
- - Fonts: `--ntl-font-family-text` (Instrument Sans), `display` (Figtree), `mono` (Martian Mono)
176
+ Use only the names on the [tokens page](https://spark-ui-docs.netlify.com/foundations/tokens/). Older names still resolve but aren't for new code. Reach for a semantic token first; use a palette color (`--ntl-hues-*`) or a number step only when no semantic token fits. Color tokens flip with light and dark.
177
+
178
+ - Backgrounds: `--ntl-color-bg-page`, `bg-surface`, `bg-subtle`, `bg-muted`, `bg-inverse`, `bg-glass`, `bg-glass-subtle`
179
+ - Text: `--ntl-color-text`, `text-weak`, `text-weaker`, `text-inverse`, `text-on-accent`, `text-heading`, `text-eyebrow`, `text-accent`
180
+ - Links: `--ntl-color-link`, `link-hover`, `link-inverse`
181
+ - Borders: `--ntl-color-border`, `border-subtle`, `border-strong`
182
+ - Status: `--ntl-color-status-success`, `status-warning`, `status-error`
183
+ - Spacing: roles `--ntl-space-section`, `block`, `stack`, `inline`, `gutter`, `margin`; steps named in px, `--ntl-space-4` to `--ntl-space-160`
184
+ - Radius: roles `--ntl-radius-control`, `card`, `panel`, `pill`; steps `--ntl-radius-2` to `--ntl-radius-30`
185
+ - Shadows: `--ntl-shadow-raised`, `hover`, `floating`, `overlay`
186
+ - Fonts: `--ntl-font-family-heading`, `text`, `mono`
187
+ - Type sizes: `--ntl-font-size-heading-xl` to `heading-2xs`, `--ntl-font-size-text-xl` to `text-2xs`, and `--ntl-font-size-button`, `link`, `tab`, `eyebrow`, `badge`
188
+ - Line height: `--ntl-line-height-none`, `heading`, `label`, `text`
183
189
  - Border widths: `--ntl-border-width-thin` (1px), `base` (1.5px), `thick` (2px), `heavy` (3px)
184
190
  - Z-index: `--ntl-z-index-base` (0), `raised` (10), `sticky` (100), `overlay` (200), `modal` (300), `toast` (400), `tooltip` (500)
185
- - Motion durations: `--ntl-motion-duration-fast` (100ms), `base` (200ms), `slow` (300ms), `slower` (500ms)
186
- - Motion easing: `--ntl-motion-easing-default`, `in`, `out`, `spring` (cubic-bezier overshoot)
191
+ - Motion: durations `--ntl-motion-duration-short`, `quick`, `subtle`; easings `--ntl-motion-easing-direct`, `settle`, `standard`
187
192
 
188
193
  ## Rules
189
194