@ceebee/ui 0.2.1 → 0.3.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.
Files changed (6) hide show
  1. package/dist/index.d.ts +5 -2
  2. package/dist/index.js +2 -0
  3. package/dist/skins/astra.css +6 -0
  4. package/dist/skins/clarity.css +78 -0
  5. package/dist/styles.css +45 -11
  6. package/package.json +6 -6
package/dist/index.d.ts CHANGED
@@ -9,8 +9,11 @@ type Size = 'sm' | 'md' | 'lg';
9
9
  type DecorHue = 'violet' | 'blue' | 'teal' | 'green' | 'amber' | 'rose';
10
10
 
11
11
  type SurfaceVariant = 'plain' | 'tinted' | 'glass' | 'gradient';
12
+ type GlassStyle = 'regular' | 'clear';
12
13
  interface SurfaceProps {
13
14
  variant?: SurfaceVariant;
15
+ /** Glass density. `clear` is reserved for bold controls over visually rich content. */
16
+ glassStyle?: GlassStyle;
14
17
  /** Semantic colour for `tinted`; ignored by `plain`. */
15
18
  tone?: Tone;
16
19
  /** Decorative hue for `tinted` / `gradient` — the pastel card set. Wins over `tone`. */
@@ -29,7 +32,7 @@ interface SurfaceProps {
29
32
  * variants rather than being baked into the brand (ADR 0002), so one Skin reproduces the
30
33
  * reference board and another produces something sober without touching a component.
31
34
  */
32
- declare function Surface({ variant, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
35
+ declare function Surface({ variant, glassStyle, tone, hue, elevation, radius, padding, bordered, className, children, asSection, }: SurfaceProps): react.JSX.Element;
33
36
 
34
37
  type SpaceStep = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
35
38
  interface StackProps {
@@ -414,4 +417,4 @@ interface StatCardSkeletonProps {
414
417
  /** Built from StatCard's own spacing, so the tile does not resize when data arrives (ADR 0009). */
415
418
  declare function StatCardSkeleton({ withVisual, className }: StatCardSkeletonProps): react.JSX.Element;
416
419
 
417
- export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarMini, type BarMiniProps, Breadcrumbs, type BreadcrumbsProps, Container, type ContainerProps, type Crumb, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, EmptyState, type EmptyStateProps, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, type LeaderboardSkeletonProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, type RingGeometry, type Size, Skeleton, type SkeletonProps, type SkeletonTextProps, Sparkline, type SparklineGeometry, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackProps, StatCard, type StatCardProps, type StatCardSkeletonProps, type Step, Stepper, type StepperProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, Timeline, type TimelineEntry, type TimelineProps, type TimelineSkeletonProps, type Tone, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };
420
+ export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarMini, type BarMiniProps, Breadcrumbs, type BreadcrumbsProps, Container, type ContainerProps, type Crumb, type DecorHue, Donut, type DonutArc, type DonutProps, type DonutSlice, EmptyState, type EmptyStateProps, type GlassStyle, Grid, type GridProps, Heading, type HeadingProps, Leaderboard, type LeaderboardEntry, type LeaderboardProps, type LeaderboardSkeletonProps, ProgressBar, type ProgressBarProps, ProgressRing, type ProgressRingProps, type RingGeometry, type Size, Skeleton, type SkeletonProps, type SkeletonTextProps, Sparkline, type SparklineGeometry, type SparklineProps, Spinner, type SpinnerProps, Stack, type StackProps, StatCard, type StatCardProps, type StatCardSkeletonProps, type Step, Stepper, type StepperProps, Surface, type SurfaceProps, type SurfaceVariant, Text, type TextProps, Timeline, type TimelineEntry, type TimelineProps, type TimelineSkeletonProps, type Tone, cn, donutArcs, hueForName, initialsOf, ringGeometry, sparklineGeometry };
package/dist/index.js CHANGED
@@ -7,6 +7,7 @@ function cn(...parts) {
7
7
  }
8
8
  function Surface({
9
9
  variant = "plain",
10
+ glassStyle = "regular",
10
11
  tone = "neutral",
11
12
  hue,
12
13
  elevation = "sm",
@@ -32,6 +33,7 @@ function Surface({
32
33
  ),
33
34
  "data-tone": variant === "plain" ? void 0 : tone,
34
35
  "data-hue": hue,
36
+ "data-glass-style": variant === "glass" ? glassStyle : void 0,
35
37
  children
36
38
  }
37
39
  );
package/dist/skins/astra.css CHANGED
@@ -10,6 +10,8 @@
10
10
  --cb-border: oklch(0.9 0.02 285);
11
11
 
12
12
  --cb-tint-strength: 0.12;
13
+ --cb-glass-bg: oklch(0.99 0.008 285 / 0.8);
14
+ --cb-glass-bg-opaque: oklch(0.97 0.02 285);
13
15
  --cb-glass-blur: 22px;
14
16
  --cb-shadow-md: 0 8px 28px oklch(0.45 0.12 285 / 0.14);
15
17
  --cb-shadow-lg: 0 24px 64px oklch(0.45 0.12 285 / 0.2);
@@ -19,6 +21,8 @@
19
21
  --cb-bg: oklch(0.21 0.04 285);
20
22
  --cb-bg-subtle: oklch(0.25 0.045 285);
21
23
  --cb-surface: oklch(0.27 0.045 285);
24
+ --cb-glass-bg: oklch(0.29 0.04 285 / 0.76);
25
+ --cb-glass-bg-opaque: oklch(0.27 0.045 285);
22
26
  }
23
27
 
24
28
  @media (prefers-color-scheme: dark) {
@@ -26,5 +30,7 @@
26
30
  --cb-bg: oklch(0.21 0.04 285);
27
31
  --cb-bg-subtle: oklch(0.25 0.045 285);
28
32
  --cb-surface: oklch(0.27 0.045 285);
33
+ --cb-glass-bg: oklch(0.29 0.04 285 / 0.76);
34
+ --cb-glass-bg-opaque: oklch(0.27 0.045 285);
29
35
  }
30
36
  }
package/dist/skins/clarity.css ADDED
@@ -0,0 +1,78 @@
1
+ /* Clarity: CeeBee's content-first glass skin. It follows the hierarchy and adaptivity principles
2
+ of modern system materials without pretending CSS can reproduce a native compositor. */
3
+ :root {
4
+ --cb-hue-brand: 264;
5
+
6
+ --cb-bg: oklch(0.98 0.012 255);
7
+ --cb-bg-subtle: oklch(0.945 0.026 258);
8
+ --cb-surface: oklch(0.995 0.003 255);
9
+ --cb-surface-raised: oklch(1 0 0);
10
+ --cb-border: oklch(0.86 0.018 255);
11
+ --cb-border-strong: oklch(0.62 0.028 255);
12
+
13
+ --cb-shadow-sm: 0 2px 8px oklch(0.32 0.06 260 / 0.08);
14
+ --cb-shadow-md: 0 10px 32px oklch(0.32 0.07 260 / 0.12);
15
+ --cb-shadow-lg: 0 28px 72px oklch(0.28 0.08 260 / 0.17);
16
+
17
+ --cb-glass-bg: oklch(0.99 0.008 255 / 0.82);
18
+ --cb-glass-bg-opaque: oklch(0.97 0.014 255);
19
+ --cb-glass-border: oklch(1 0 0 / 0.72);
20
+ --cb-glass-border-strong: oklch(0.58 0.03 255);
21
+ --cb-glass-blur: 24px;
22
+ --cb-glass-saturation: 1.35;
23
+ --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.58), transparent 40%);
24
+ --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.78), inset 0 -1px 0 oklch(0.28 0.05 260 / 0.1);
25
+
26
+ --cb-glass-clear-bg: oklch(0.99 0.006 255 / 0.3);
27
+ --cb-glass-clear-border: oklch(1 0 0 / 0.78);
28
+ --cb-glass-clear-blur: 14px;
29
+ --cb-glass-clear-saturation: 1.2;
30
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.66), transparent 34%);
31
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.84), inset 0 -1px 0 oklch(0.28 0.05 260 / 0.08);
32
+ }
33
+
34
+ :root[data-theme="dark"] {
35
+ --cb-bg: oklch(0.14 0.025 265);
36
+ --cb-bg-subtle: oklch(0.19 0.035 265);
37
+ --cb-surface: oklch(0.21 0.03 265);
38
+ --cb-surface-raised: oklch(0.25 0.032 265);
39
+ --cb-border: oklch(0.38 0.035 265);
40
+ --cb-border-strong: oklch(0.58 0.038 265);
41
+
42
+ --cb-glass-bg: oklch(0.23 0.03 265 / 0.78);
43
+ --cb-glass-bg-opaque: oklch(0.21 0.03 265);
44
+ --cb-glass-border: oklch(0.9 0.018 255 / 0.2);
45
+ --cb-glass-border-strong: oklch(0.76 0.025 255);
46
+ --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.24), transparent 40%);
47
+ --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.3), inset 0 -1px 0 oklch(0 0 0 / 0.38);
48
+
49
+ --cb-glass-clear-bg: oklch(0.2 0.026 265 / 0.34);
50
+ --cb-glass-clear-border: oklch(0.9 0.018 255 / 0.28);
51
+ --cb-glass-clear-saturation: 1.12;
52
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.3), transparent 34%);
53
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.36), inset 0 -1px 0 oklch(0 0 0 / 0.3);
54
+ }
55
+
56
+ @media (prefers-color-scheme: dark) {
57
+ :root:not([data-theme="light"]) {
58
+ --cb-bg: oklch(0.14 0.025 265);
59
+ --cb-bg-subtle: oklch(0.19 0.035 265);
60
+ --cb-surface: oklch(0.21 0.03 265);
61
+ --cb-surface-raised: oklch(0.25 0.032 265);
62
+ --cb-border: oklch(0.38 0.035 265);
63
+ --cb-border-strong: oklch(0.58 0.038 265);
64
+
65
+ --cb-glass-bg: oklch(0.23 0.03 265 / 0.78);
66
+ --cb-glass-bg-opaque: oklch(0.21 0.03 265);
67
+ --cb-glass-border: oklch(0.9 0.018 255 / 0.2);
68
+ --cb-glass-border-strong: oklch(0.76 0.025 255);
69
+ --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.24), transparent 40%);
70
+ --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.3), inset 0 -1px 0 oklch(0 0 0 / 0.38);
71
+
72
+ --cb-glass-clear-bg: oklch(0.2 0.026 265 / 0.34);
73
+ --cb-glass-clear-border: oklch(0.9 0.018 255 / 0.28);
74
+ --cb-glass-clear-saturation: 1.12;
75
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.3), transparent 34%);
76
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.36), inset 0 -1px 0 oklch(0 0 0 / 0.3);
77
+ }
78
+ }
package/dist/styles.css CHANGED
@@ -111,7 +111,7 @@
111
111
  --cb-shadow-md: 0 4px 16px oklch(0.3 0.03 280 / 0.08);
112
112
  --cb-shadow-lg: 0 18px 48px oklch(0.3 0.03 280 / 0.12);
113
113
 
114
- --cb-glass-bg: oklch(1 0 0 / 0.62);
114
+ --cb-glass-bg: oklch(1 0 0 / 0.78);
115
115
  --cb-glass-bg-opaque: oklch(0.985 0.004 280);
116
116
  --cb-glass-border: oklch(1 0 0 / 0.55);
117
117
  --cb-glass-border-strong: oklch(0.64 0.018 280);
@@ -119,6 +119,12 @@
119
119
  --cb-glass-saturation: 1.4;
120
120
  --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.34), transparent 42%);
121
121
  --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.62), inset 0 -1px 0 oklch(0.3 0.03 280 / 0.1);
122
+ --cb-glass-clear-bg: oklch(1 0 0 / 0.34);
123
+ --cb-glass-clear-border: oklch(1 0 0 / 0.68);
124
+ --cb-glass-clear-blur: 12px;
125
+ --cb-glass-clear-saturation: 1.25;
126
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.42), transparent 38%);
127
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.72), inset 0 -1px 0 oklch(0.3 0.03 280 / 0.08);
122
128
 
123
129
  --cb-tint-strength: 0.09;
124
130
  --cb-gradient-angle: 145deg;
@@ -148,7 +154,7 @@
148
154
  --cb-shadow-md: 0 6px 20px oklch(0 0 0 / 0.45);
149
155
  --cb-shadow-lg: 0 22px 56px oklch(0 0 0 / 0.55);
150
156
 
151
- --cb-glass-bg: oklch(0.3 0.03 280 / 0.55);
157
+ --cb-glass-bg: oklch(0.28 0.028 280 / 0.74);
152
158
  --cb-glass-bg-opaque: oklch(0.25 0.024 280);
153
159
  --cb-glass-border: oklch(0.8 0.02 280 / 0.16);
154
160
  --cb-glass-border-strong: oklch(0.72 0.03 280);
@@ -156,6 +162,12 @@
156
162
  --cb-glass-saturation: 1.25;
157
163
  --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.18), transparent 42%);
158
164
  --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.26), inset 0 -1px 0 oklch(0 0 0 / 0.34);
165
+ --cb-glass-clear-bg: oklch(0.24 0.025 280 / 0.34);
166
+ --cb-glass-clear-border: oklch(0.88 0.015 280 / 0.24);
167
+ --cb-glass-clear-blur: 14px;
168
+ --cb-glass-clear-saturation: 1.15;
169
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.24), transparent 38%);
170
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.32), inset 0 -1px 0 oklch(0 0 0 / 0.28);
159
171
 
160
172
  --cb-scrim: oklch(0.08 0.01 280 / 0.6);
161
173
  --cb-scrim-strong: oklch(0.08 0.01 280 / 0.7);
@@ -184,7 +196,7 @@
184
196
  --cb-shadow-md: 0 6px 20px oklch(0 0 0 / 0.45);
185
197
  --cb-shadow-lg: 0 22px 56px oklch(0 0 0 / 0.55);
186
198
 
187
- --cb-glass-bg: oklch(0.3 0.03 280 / 0.55);
199
+ --cb-glass-bg: oklch(0.28 0.028 280 / 0.74);
188
200
  --cb-glass-bg-opaque: oklch(0.25 0.024 280);
189
201
  --cb-glass-border: oklch(0.8 0.02 280 / 0.16);
190
202
  --cb-glass-border-strong: oklch(0.72 0.03 280);
@@ -192,6 +204,12 @@
192
204
  --cb-glass-saturation: 1.25;
193
205
  --cb-glass-specular: linear-gradient(145deg, oklch(1 0 0 / 0.18), transparent 42%);
194
206
  --cb-glass-inset: inset 0 1px 0 oklch(1 0 0 / 0.26), inset 0 -1px 0 oklch(0 0 0 / 0.34);
207
+ --cb-glass-clear-bg: oklch(0.24 0.025 280 / 0.34);
208
+ --cb-glass-clear-border: oklch(0.88 0.015 280 / 0.24);
209
+ --cb-glass-clear-blur: 14px;
210
+ --cb-glass-clear-saturation: 1.15;
211
+ --cb-glass-clear-specular: linear-gradient(145deg, oklch(1 0 0 / 0.24), transparent 38%);
212
+ --cb-glass-clear-inset: inset 0 1px 0 oklch(1 0 0 / 0.32), inset 0 -1px 0 oklch(0 0 0 / 0.28);
195
213
 
196
214
  --cb-scrim: oklch(0.08 0.01 280 / 0.6);
197
215
  --cb-scrim-strong: oklch(0.08 0.01 280 / 0.7);
@@ -311,11 +329,27 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
311
329
  }
312
330
 
313
331
  .cb-surface--glass {
314
- background: var(--cb-glass-specular), var(--cb-glass-bg);
315
- border-color: var(--cb-glass-border);
316
- backdrop-filter: blur(var(--cb-glass-blur)) saturate(var(--cb-glass-saturation));
317
- -webkit-backdrop-filter: blur(var(--cb-glass-blur)) saturate(var(--cb-glass-saturation));
318
- --cb-surface-material-shadow: var(--cb-glass-inset);
332
+ --cb-glass-fill: var(--cb-glass-bg);
333
+ --cb-glass-opaque-fill: var(--cb-glass-bg-opaque);
334
+ --cb-glass-edge: var(--cb-glass-border);
335
+ --cb-glass-material-blur: var(--cb-glass-blur);
336
+ --cb-glass-material-saturation: var(--cb-glass-saturation);
337
+ --cb-glass-material-specular: var(--cb-glass-specular);
338
+ --cb-glass-material-inset: var(--cb-glass-inset);
339
+ background: var(--cb-glass-material-specular), var(--cb-glass-fill);
340
+ border-color: var(--cb-glass-edge);
341
+ backdrop-filter: blur(var(--cb-glass-material-blur)) saturate(var(--cb-glass-material-saturation));
342
+ -webkit-backdrop-filter: blur(var(--cb-glass-material-blur)) saturate(var(--cb-glass-material-saturation));
343
+ --cb-surface-material-shadow: var(--cb-glass-material-inset);
344
+ }
345
+
346
+ .cb-surface--glass[data-glass-style="clear"] {
347
+ --cb-glass-fill: var(--cb-glass-clear-bg);
348
+ --cb-glass-edge: var(--cb-glass-clear-border);
349
+ --cb-glass-material-blur: var(--cb-glass-clear-blur);
350
+ --cb-glass-material-saturation: var(--cb-glass-clear-saturation);
351
+ --cb-glass-material-specular: var(--cb-glass-clear-specular);
352
+ --cb-glass-material-inset: var(--cb-glass-clear-inset);
319
353
  }
320
354
 
321
355
  .cb-surface--gradient {
@@ -333,12 +367,12 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
333
367
  .cb-elevation--lg { box-shadow: var(--cb-surface-material-shadow), var(--cb-shadow-lg); }
334
368
 
335
369
  @supports not ((backdrop-filter: blur(var(--cb-glass-blur))) or (-webkit-backdrop-filter: blur(var(--cb-glass-blur)))) {
336
- .cb-surface--glass { background: var(--cb-glass-bg-opaque); }
370
+ .cb-surface--glass { background: var(--cb-glass-opaque-fill); }
337
371
  }
338
372
 
339
373
  @media (prefers-reduced-transparency: reduce) {
340
374
  .cb-surface--glass {
341
- background: var(--cb-glass-bg-opaque);
375
+ background: var(--cb-glass-opaque-fill);
342
376
  backdrop-filter: none;
343
377
  -webkit-backdrop-filter: none;
344
378
  }
@@ -346,7 +380,7 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
346
380
 
347
381
  @media (prefers-contrast: more) {
348
382
  .cb-surface--glass {
349
- background: var(--cb-glass-bg-opaque);
383
+ background: var(--cb-glass-opaque-fill);
350
384
  border-color: var(--cb-glass-border-strong);
351
385
  backdrop-filter: none;
352
386
  -webkit-backdrop-filter: none;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ceebee/ui",
3
- "version": "0.2.1",
3
+ "version": "0.3.1",
4
4
  "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -34,10 +34,6 @@
34
34
  "./styles.css": "./dist/styles.css",
35
35
  "./skins/*.css": "./dist/skins/*.css"
36
36
  },
37
- "scripts": {
38
- "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",
39
- "lint": "tsc -p tsconfig.json --noEmit"
40
- },
41
37
  "peerDependencies": {
42
38
  "@base-ui/react": "^1.7.0",
43
39
  "lucide-react": ">=0.400.0",
@@ -56,5 +52,9 @@
56
52
  "tsup": "^8.3.5",
57
53
  "typescript": "^5.7.2",
58
54
  "embla-carousel-react": "^8.6.0"
55
+ },
56
+ "scripts": {
57
+ "build": "tsup && node ./stamp-client.mjs && node ./build-css.mjs",
58
+ "lint": "tsc -p tsconfig.json --noEmit"
59
59
  }
60
- }
60
+ }