@polastack/design-system 0.1.9 → 0.1.11
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.
- package/package.json +1 -1
- package/src/styles/globals.css +25 -8
package/package.json
CHANGED
package/src/styles/globals.css
CHANGED
|
@@ -260,24 +260,41 @@
|
|
|
260
260
|
--color-tooltip-bg: var(--color-neutral-900);
|
|
261
261
|
--color-tooltip-text: #ffffff;
|
|
262
262
|
--color-skeleton: var(--color-neutral-200);
|
|
263
|
+
/* Accent surface — for selected/active nav items, highlighted rows, etc. */
|
|
264
|
+
--color-surface-accent: #E4F5F1;
|
|
265
|
+
--color-on-surface-accent: var(--color-primary-700);
|
|
263
266
|
}
|
|
264
267
|
|
|
265
268
|
.dark {
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
269
|
+
/*
|
|
270
|
+
* Surface elevation ladder (darkest → lightest):
|
|
271
|
+
* sunken #0A0A0C — recessed/inset areas
|
|
272
|
+
* surface #121215 — main background (≈ Material Design / Linear range)
|
|
273
|
+
* raised #1A1A1E — cards, panels, modals
|
|
274
|
+
* muted #232327 — hover states, subtle fills
|
|
275
|
+
*
|
|
276
|
+
* Values are hand-picked (not from the neutral scale) to sit between
|
|
277
|
+
* Material Design #121212 and Radix Gray #111111, with a very subtle
|
|
278
|
+
* cool tint that complements the teal brand.
|
|
279
|
+
*/
|
|
280
|
+
--color-surface: #121215;
|
|
281
|
+
--color-surface-raised: #1A1A1E;
|
|
282
|
+
--color-surface-sunken: #0A0A0C;
|
|
283
|
+
--color-surface-muted: #232327;
|
|
270
284
|
--color-on-surface: var(--color-neutral-50);
|
|
271
285
|
--color-on-surface-secondary: var(--color-neutral-400);
|
|
272
286
|
--color-on-surface-muted: var(--color-neutral-400);
|
|
273
|
-
--color-border:
|
|
274
|
-
--color-border-input:
|
|
287
|
+
--color-border: #28282C;
|
|
288
|
+
--color-border-input: #38383E;
|
|
275
289
|
--color-ring: var(--color-primary-400);
|
|
276
|
-
--color-ring-offset:
|
|
290
|
+
--color-ring-offset: #121215;
|
|
277
291
|
--color-surface-overlay: rgb(0 0 0 / 0.6);
|
|
278
292
|
--color-tooltip-bg: var(--color-neutral-100);
|
|
279
293
|
--color-tooltip-text: var(--color-neutral-900);
|
|
280
|
-
--color-skeleton:
|
|
294
|
+
--color-skeleton: #232327;
|
|
295
|
+
/* Accent surface — brand-tinted for selected/active states */
|
|
296
|
+
--color-surface-accent: #0F2926;
|
|
297
|
+
--color-on-surface-accent: var(--color-primary-400);
|
|
281
298
|
color-scheme: dark;
|
|
282
299
|
}
|
|
283
300
|
|