@streamsai/ui 0.1.9 → 0.2.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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { Button as ButtonPrimitive } from '@base-ui/react/button';
|
|
2
2
|
import { type VariantProps } from 'class-variance-authority';
|
|
3
3
|
declare const buttonVariants: (props?: ({
|
|
4
|
-
variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | null | undefined;
|
|
4
|
+
variant?: "link" | "outline" | "default" | "destructive" | "secondary" | "ghost" | "inverted" | null | undefined;
|
|
5
5
|
size?: "default" | "icon" | "sm" | "lg" | "xs" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
6
6
|
shape?: "default" | "pill" | null | undefined;
|
|
7
7
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
@@ -2,14 +2,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { Button as ButtonPrimitive } from '@base-ui/react/button';
|
|
3
3
|
import { cva } from 'class-variance-authority';
|
|
4
4
|
import { cn } from '../../lib/utils.js';
|
|
5
|
-
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground disabled:opacity-100 aria-invalid:border-destructive aria-invalid:
|
|
5
|
+
const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:bg-disabled disabled:text-disabled-foreground disabled:opacity-100 aria-invalid:border-transparent aria-invalid:bg-destructive/10 aria-invalid:text-destructive aria-invalid:hover:bg-destructive/20 aria-invalid:focus-visible:border-destructive/40 aria-invalid:focus-visible:ring-destructive/20 dark:aria-invalid:bg-destructive/20 dark:aria-invalid:hover:bg-destructive/30 dark:aria-invalid:focus-visible:ring-destructive/40 in-data-[platform=mobile]:not-[.absolute]:not-[.fixed]:not-[.sticky]:relative in-data-[platform=mobile]:after:absolute in-data-[platform=mobile]:after:top-1/2 in-data-[platform=mobile]:after:left-1/2 in-data-[platform=mobile]:after:size-full in-data-[platform=mobile]:after:min-h-11 in-data-[platform=mobile]:after:min-w-11 in-data-[platform=mobile]:after:-translate-1/2 in-data-[platform=mobile]:after:content-[''] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
|
|
6
6
|
variants: {
|
|
7
7
|
variant: {
|
|
8
|
-
default: 'bg-primary text-primary-foreground hover:bg-primary-hover',
|
|
9
|
-
outline: 'border-input bg-background hover:bg-accent',
|
|
8
|
+
default: 'bg-button-primary text-button-primary-foreground hover:bg-button-primary-hover',
|
|
9
|
+
outline: 'border-input bg-background text-foreground hover:border-transparent hover:bg-accent aria-expanded:border-transparent aria-expanded:bg-button-selected aria-expanded:hover:bg-button-selected-hover aria-pressed:border-transparent aria-pressed:bg-button-selected aria-pressed:hover:bg-button-selected-hover disabled:border-disabled-foreground disabled:bg-transparent',
|
|
10
10
|
secondary: 'bg-secondary text-secondary-foreground hover:bg-accent aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
|
|
11
|
-
ghost: 'hover:bg-accent hover:text-foreground aria-expanded:bg-
|
|
11
|
+
ghost: 'text-foreground hover:bg-accent hover:text-foreground aria-expanded:bg-button-selected aria-expanded:text-foreground aria-expanded:hover:bg-button-selected-hover aria-pressed:bg-button-selected aria-pressed:hover:bg-button-selected-hover disabled:bg-transparent',
|
|
12
12
|
destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40',
|
|
13
|
+
inverted: 'bg-button-inverted text-button-inverted-foreground hover:bg-button-inverted-hover',
|
|
13
14
|
link: 'text-primary underline-offset-4 hover:underline',
|
|
14
15
|
},
|
|
15
16
|
size: {
|
package/dist/styles/base.css
CHANGED
|
@@ -63,6 +63,14 @@
|
|
|
63
63
|
--color-inverted-foreground: var(--inverted-foreground);
|
|
64
64
|
--color-surface-primary: var(--surface-primary);
|
|
65
65
|
--color-primary-hover: var(--primary-hover);
|
|
66
|
+
--color-button-primary: var(--button-primary);
|
|
67
|
+
--color-button-primary-foreground: var(--button-primary-foreground);
|
|
68
|
+
--color-button-primary-hover: var(--button-primary-hover);
|
|
69
|
+
--color-button-inverted: var(--button-inverted);
|
|
70
|
+
--color-button-inverted-foreground: var(--button-inverted-foreground);
|
|
71
|
+
--color-button-inverted-hover: var(--button-inverted-hover);
|
|
72
|
+
--color-button-selected: var(--button-selected);
|
|
73
|
+
--color-button-selected-hover: var(--button-selected-hover);
|
|
66
74
|
--color-status-idle: var(--status-idle);
|
|
67
75
|
--color-status-working: var(--status-working);
|
|
68
76
|
--color-status-done: var(--status-done);
|
package/dist/styles/tokens.css
CHANGED
|
@@ -48,6 +48,7 @@
|
|
|
48
48
|
--vibe-color-egg-yolk-on-selected: #5c4300; /* text on the solid yellow */
|
|
49
49
|
--vibe-color-winter: #9aadbd;
|
|
50
50
|
--vibe-color-running-yellow: #f7c55e;
|
|
51
|
+
--vibe-color-waiting-blue: #879ee7;
|
|
51
52
|
--vibe-color-running-halo: #fdeecf;
|
|
52
53
|
--vibe-color-running-green: #b7cf9f;
|
|
53
54
|
--vibe-color-running-green-halo: #e9f1e2;
|
|
@@ -94,6 +95,7 @@
|
|
|
94
95
|
--vibe-color-egg-yolk-on-selected: #5c4300;
|
|
95
96
|
--vibe-color-winter: #9aadbd;
|
|
96
97
|
--vibe-color-running-yellow: #f7c55e;
|
|
98
|
+
--vibe-color-waiting-blue: #879ee7;
|
|
97
99
|
--vibe-color-running-halo: #5f5237;
|
|
98
100
|
--vibe-color-running-green: #b7cf9f;
|
|
99
101
|
--vibe-color-running-green-halo: #4c554a;
|
|
@@ -173,6 +175,16 @@
|
|
|
173
175
|
--accent-purple: var(--vibe-color-purple);
|
|
174
176
|
/* Vibe's negative color (stuck red), following its dark value: the "Fill in required fields" chip text, on a 10% tint of itself. */
|
|
175
177
|
--negative: var(--vibe-color-stuck-red);
|
|
178
|
+
/* Button colors (Figma "Variants & states"). Scoped to `Button` on purpose: the global `--primary`
|
|
179
|
+
blue stays for links, focus rings and selected states. */
|
|
180
|
+
--button-primary: var(--vibe-inverted-color-background);
|
|
181
|
+
--button-primary-foreground: var(--vibe-text-color-on-inverted);
|
|
182
|
+
--button-primary-hover: #202126;
|
|
183
|
+
--button-inverted: var(--vibe-inverted-color-background);
|
|
184
|
+
--button-inverted-foreground: var(--vibe-text-color-on-inverted);
|
|
185
|
+
--button-inverted-hover: #202126;
|
|
186
|
+
--button-selected: #dceafe;
|
|
187
|
+
--button-selected-hover: #c7ddf7;
|
|
176
188
|
/* Avatar fallbacks: chili blue for people, purple for agents. */
|
|
177
189
|
--avatar-person: var(--vibe-color-chili-blue);
|
|
178
190
|
--avatar-agent: var(--vibe-color-purple);
|
|
@@ -367,6 +379,16 @@
|
|
|
367
379
|
/* Primary blue is 4.17:1 on --vibe-grey-background-color and 2.87:1 on --vibe-ui-background-color. */
|
|
368
380
|
--code-token-function: var(--vibe-color-chili-blue);
|
|
369
381
|
--code-token-link: var(--vibe-color-chili-blue);
|
|
382
|
+
/* Primary and inverted buttons flip to a white fill on dark surfaces; negative and positive keep
|
|
383
|
+
their pastel tints. Hover and selected values are not in the Figma frame, derived from it. */
|
|
384
|
+
--button-primary: #ffffff;
|
|
385
|
+
--button-primary-foreground: #323338;
|
|
386
|
+
--button-primary-hover: #e3e4e8;
|
|
387
|
+
--button-inverted: #ffffff;
|
|
388
|
+
--button-inverted-foreground: #323338;
|
|
389
|
+
--button-inverted-hover: #e3e4e8;
|
|
390
|
+
--button-selected: var(--vibe-primary-selected-color);
|
|
391
|
+
--button-selected-hover: #1a4690;
|
|
370
392
|
}
|
|
371
393
|
|
|
372
394
|
/*
|
package/dist/styles/tokens.mjs
CHANGED
|
@@ -34,6 +34,7 @@ export const colors = {
|
|
|
34
34
|
// Mobile Home (iOS Streams tab and mweb /home). Light values are sampled from the design PNG;
|
|
35
35
|
// dark values are derived from the dark theme until Design supplies them.
|
|
36
36
|
'color-running-yellow': { light: '#f7c55e', dark: '#f7c55e' }, // a Running session's dot
|
|
37
|
+
'color-waiting-blue': { light: '#879ee7', dark: '#879ee7' }, // a Waiting session's dot and the Waiting chip dot (iOS Home); dark awaits Design
|
|
37
38
|
'color-running-green': { light: '#b7cf9f', dark: '#b7cf9f' }, // mweb Running dot: the pastel green from Figma
|
|
38
39
|
'color-running-green-halo': { light: '#e9f1e2', dark: '#4c554a' }, // that dot at 30% over the card, composited
|
|
39
40
|
'color-running-halo': { light: '#fdeecf', dark: '#5f5237' }, // that dot at 30% over the card, composited
|
package/package.json
CHANGED