@bergetai/ui 0.11.4 → 0.12.1
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/dist/index.cjs +1406 -445
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +121 -2
- package/dist/index.d.ts +121 -2
- package/dist/index.js +1365 -430
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +49 -7
- package/package.json +1 -1
package/dist/styles/index.css
CHANGED
|
@@ -173,10 +173,20 @@
|
|
|
173
173
|
|
|
174
174
|
/* ── Sidebar ────────────────────────────────────────────────────── */
|
|
175
175
|
--berget-sidebar: color-mix(in oklch, var(--berget-brand-granite-900) 40%, transparent);
|
|
176
|
+
/* Opaque variant for surfaces that can't rely on the page bg behind them
|
|
177
|
+
(e.g. the mobile Sheet panel) — the 40% mix baked over the page bg. */
|
|
178
|
+
--berget-sidebar-solid: color-mix(
|
|
179
|
+
in oklch,
|
|
180
|
+
var(--berget-brand-granite-900) 40%,
|
|
181
|
+
var(--berget-background)
|
|
182
|
+
);
|
|
176
183
|
--berget-sidebar-foreground: color-mix(in oklch, var(--berget-foreground) 80%, transparent);
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
184
|
+
/* Hover/active surfaces for sidebar menus (menu buttons, group/menu actions,
|
|
185
|
+
badges) — neutral surface step, matching upstream shadcn's direction where
|
|
186
|
+
sidebar-accent is lighter than the sidebar fill in dark theme. */
|
|
187
|
+
--berget-sidebar-accent: var(--berget-surface-02);
|
|
188
|
+
--berget-sidebar-accent-foreground: var(--berget-foreground);
|
|
189
|
+
--berget-sidebar-border: var(--berget-border);
|
|
180
190
|
--berget-sidebar-ring: var(--berget-brand-moss-300);
|
|
181
191
|
|
|
182
192
|
/* ── Utility ──────────────────────────────────────────────────────── */
|
|
@@ -491,14 +501,19 @@
|
|
|
491
501
|
|
|
492
502
|
/* ── Sidebar ────────────────────────────────────────────────────── */
|
|
493
503
|
--berget-sidebar: color-mix(in oklch, var(--berget-brand-granite-100) 40%, transparent);
|
|
504
|
+
--berget-sidebar-solid: color-mix(
|
|
505
|
+
in oklch,
|
|
506
|
+
var(--berget-brand-granite-100) 40%,
|
|
507
|
+
var(--berget-background)
|
|
508
|
+
);
|
|
494
509
|
--berget-sidebar-foreground: color-mix(
|
|
495
510
|
in oklch,
|
|
496
511
|
var(--berget-brand-granite-950) 80%,
|
|
497
512
|
transparent
|
|
498
513
|
);
|
|
499
|
-
--berget-sidebar-accent: var(--berget-
|
|
500
|
-
--berget-sidebar-accent-foreground: var(--berget-
|
|
501
|
-
--berget-sidebar-border:
|
|
514
|
+
--berget-sidebar-accent: var(--berget-surface-02);
|
|
515
|
+
--berget-sidebar-accent-foreground: var(--berget-foreground);
|
|
516
|
+
--berget-sidebar-border: var(--berget-border);
|
|
502
517
|
--berget-sidebar-ring: var(--berget-brand-moss-300);
|
|
503
518
|
|
|
504
519
|
/* ── Utility ──────────────────────────────────────────────────────── */
|
|
@@ -865,6 +880,13 @@
|
|
|
865
880
|
--color-ring: var(--berget-ring);
|
|
866
881
|
--color-background: var(--berget-background);
|
|
867
882
|
--color-foreground: var(--berget-foreground);
|
|
883
|
+
--color-sidebar: var(--berget-sidebar);
|
|
884
|
+
--color-sidebar-solid: var(--berget-sidebar-solid);
|
|
885
|
+
--color-sidebar-foreground: var(--berget-sidebar-foreground);
|
|
886
|
+
--color-sidebar-accent: var(--berget-sidebar-accent);
|
|
887
|
+
--color-sidebar-accent-foreground: var(--berget-sidebar-accent-foreground);
|
|
888
|
+
--color-sidebar-border: var(--berget-sidebar-border);
|
|
889
|
+
--color-sidebar-ring: var(--berget-sidebar-ring);
|
|
868
890
|
|
|
869
891
|
/* Feature card tokens */
|
|
870
892
|
--spacing-feature-card-padding-vertical: 48px;
|
|
@@ -1136,6 +1158,7 @@
|
|
|
1136
1158
|
|
|
1137
1159
|
/* Sidebar aliases */
|
|
1138
1160
|
--color-berget-sidebar: var(--berget-sidebar);
|
|
1161
|
+
--color-berget-sidebar-solid: var(--berget-sidebar-solid);
|
|
1139
1162
|
--color-berget-sidebar-foreground: var(--berget-sidebar-foreground);
|
|
1140
1163
|
--color-berget-sidebar-accent: var(--berget-sidebar-accent);
|
|
1141
1164
|
--color-berget-sidebar-accent-foreground: var(--berget-sidebar-accent-foreground);
|
|
@@ -1229,7 +1252,7 @@
|
|
|
1229
1252
|
/* Caption / overline (DM Sans, Sans) */
|
|
1230
1253
|
--text-caption: 0.875rem;
|
|
1231
1254
|
--leading-caption: 1.4;
|
|
1232
|
-
--tracking-caption: 0.
|
|
1255
|
+
--tracking-caption: 0.1em;
|
|
1233
1256
|
--font-caption: 'DM Sans', sans-serif;
|
|
1234
1257
|
|
|
1235
1258
|
/* Heading 5 (DM Sans, Sans) */
|
|
@@ -1276,3 +1299,22 @@
|
|
|
1276
1299
|
color-mix(in oklab, var(--color-background) 80%, transparent) 100%
|
|
1277
1300
|
);
|
|
1278
1301
|
}
|
|
1302
|
+
|
|
1303
|
+
/* Mobile sidebar Sheet panel: opaque surface. The --berget-sidebar token is
|
|
1304
|
+
translucent (designed to sit over the page background); the mobile panel is
|
|
1305
|
+
a Sheet floating over content, so it bakes the mix over the background via
|
|
1306
|
+
--berget-sidebar-solid. Scoped to the primitive's mobile panel so the
|
|
1307
|
+
primitive itself stays unmodified. */
|
|
1308
|
+
[data-slot='sidebar'][data-mobile='true'] {
|
|
1309
|
+
background-color: var(--berget-sidebar-solid);
|
|
1310
|
+
}
|
|
1311
|
+
|
|
1312
|
+
/* Sidebar edge border. The primitive emits bare border-r/-l, which in stock
|
|
1313
|
+
shadcn is colored by the universal `* { border-color: var(--color-border) }`
|
|
1314
|
+
base rule — there --border equals --sidebar-border, so the sidebar edge
|
|
1315
|
+
matches adjacent page borders. Pin it here so the edge stays on the Berget
|
|
1316
|
+
border token even when an app-level stylesheet overrides --border (e.g. the
|
|
1317
|
+
keycloak theme in Storybook). */
|
|
1318
|
+
[data-slot='sidebar-container'] {
|
|
1319
|
+
border-color: var(--berget-sidebar-border);
|
|
1320
|
+
}
|