@viglet/viglet-design-system 2026.2.41 → 2026.2.43

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/floating-formulas-bg.css +275 -0
  2. package/dist/index.cjs.js +1 -1
  3. package/dist/index.es.js +5 -5
  4. package/dist/preset.css +162 -0
  5. package/dist/viglet-design-system.css +1 -1
  6. package/package.json +7 -3
package/dist/index.es.js CHANGED
@@ -13617,7 +13617,7 @@ var XE = Oi("peer/menu-button flex w-full items-center gap-2 overflow-hidden rou
13617
13617
  variants: {
13618
13618
  variant: {
13619
13619
  default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
13620
- outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]"
13620
+ outline: "bg-background shadow-[0_0_0_1px_var(--vg-sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--vg-sidebar-accent)]"
13621
13621
  },
13622
13622
  size: {
13623
13623
  default: "h-8 text-sm",
@@ -13803,10 +13803,10 @@ var cD = ({ ...e }) => {
13803
13803
  loading: /* @__PURE__ */ x(Mr, { className: "size-4 animate-spin" })
13804
13804
  },
13805
13805
  style: {
13806
- "--normal-bg": "var(--popover)",
13807
- "--normal-text": "var(--popover-foreground)",
13808
- "--normal-border": "var(--border)",
13809
- "--border-radius": "var(--radius)"
13806
+ "--normal-bg": "var(--vg-popover)",
13807
+ "--normal-text": "var(--vg-popover-foreground)",
13808
+ "--normal-border": "var(--vg-border)",
13809
+ "--border-radius": "var(--vg-radius)"
13810
13810
  },
13811
13811
  ...e
13812
13812
  });
package/dist/preset.css ADDED
@@ -0,0 +1,162 @@
1
+ /* =============================================================
2
+ Viglet Design System — Tailwind v4 preset
3
+ ---------------------------------------------------------------
4
+ Tokens-only companion to `./styles`. Import this AFTER
5
+ `@import "tailwindcss"` in apps that want the Viglet theme
6
+ (brand palette + shadcn tokens + dark variant) but manage their
7
+ own base/preflight/components independently.
8
+
9
+ Usage (consumer index.css):
10
+ @import "tailwindcss";
11
+ @import "tw-animate-css";
12
+ @import "@viglet/viglet-design-system/preset";
13
+ @custom-variant dark (...); // optional override
14
+
15
+ All shadcn-style tokens are namespaced to `--vg-*` to avoid
16
+ silent collisions with consumer-defined `--background`,
17
+ `--border`, etc.
18
+ ============================================================= */
19
+
20
+ @custom-variant dark (&:is(.dark *, [data-theme="dark"] *));
21
+
22
+ @theme inline {
23
+ --radius-sm: calc(var(--vg-radius) - 4px);
24
+ --radius-md: calc(var(--vg-radius) - 2px);
25
+ --radius-lg: var(--vg-radius);
26
+ --radius-xl: calc(var(--vg-radius) + 4px);
27
+
28
+ --color-background: var(--vg-background);
29
+ --color-foreground: var(--vg-foreground);
30
+ --color-card: var(--vg-card);
31
+ --color-card-foreground: var(--vg-card-foreground);
32
+ --color-popover: var(--vg-popover);
33
+ --color-popover-foreground: var(--vg-popover-foreground);
34
+ --color-primary: var(--vg-primary);
35
+ --color-primary-foreground: var(--vg-primary-foreground);
36
+ --color-secondary: var(--vg-secondary);
37
+ --color-secondary-foreground: var(--vg-secondary-foreground);
38
+ --color-muted: var(--vg-muted);
39
+ --color-muted-foreground: var(--vg-muted-foreground);
40
+ --color-accent: var(--vg-accent);
41
+ --color-accent-foreground: var(--vg-accent-foreground);
42
+ --color-destructive: var(--vg-destructive);
43
+ --color-border: var(--vg-border);
44
+ --color-input: var(--vg-input);
45
+ --color-ring: var(--vg-ring);
46
+ --color-chart-1: var(--vg-chart-1);
47
+ --color-chart-2: var(--vg-chart-2);
48
+ --color-chart-3: var(--vg-chart-3);
49
+ --color-chart-4: var(--vg-chart-4);
50
+ --color-chart-5: var(--vg-chart-5);
51
+ --color-sidebar: var(--vg-sidebar);
52
+ --color-sidebar-foreground: var(--vg-sidebar-foreground);
53
+ --color-sidebar-primary: var(--vg-sidebar-primary);
54
+ --color-sidebar-primary-foreground: var(--vg-sidebar-primary-foreground);
55
+ --color-sidebar-accent: var(--vg-sidebar-accent);
56
+ --color-sidebar-accent-foreground: var(--vg-sidebar-accent-foreground);
57
+ --color-sidebar-border: var(--vg-sidebar-border);
58
+ --color-sidebar-ring: var(--vg-sidebar-ring);
59
+ }
60
+
61
+ :root {
62
+ --vg-radius: 0.625rem;
63
+ --vg-background: oklch(1 0 0);
64
+ --vg-foreground: oklch(0.145 0 0);
65
+ --vg-card: oklch(1 0 0);
66
+ --vg-card-foreground: oklch(0.145 0 0);
67
+ --vg-popover: oklch(1 0 0);
68
+ --vg-popover-foreground: oklch(0.145 0 0);
69
+ --vg-primary: oklch(0.205 0 0);
70
+ --vg-primary-foreground: oklch(0.985 0 0);
71
+ --vg-secondary: oklch(0.97 0 0);
72
+ --vg-secondary-foreground: oklch(0.205 0 0);
73
+ --vg-muted: oklch(0.97 0 0);
74
+ --vg-muted-foreground: oklch(0.556 0 0);
75
+ --vg-accent: oklch(0.97 0 0);
76
+ --vg-accent-foreground: oklch(0.205 0 0);
77
+ --vg-destructive: oklch(0.577 0.245 27.325);
78
+ --vg-border: oklch(0.922 0 0);
79
+ --vg-input: oklch(0.922 0 0);
80
+ --vg-ring: oklch(0.708 0 0);
81
+ --vg-chart-1: oklch(0.646 0.222 41.116);
82
+ --vg-chart-2: oklch(0.6 0.118 184.704);
83
+ --vg-chart-3: oklch(0.398 0.07 227.392);
84
+ --vg-chart-4: oklch(0.828 0.189 84.429);
85
+ --vg-chart-5: oklch(0.769 0.188 70.08);
86
+ --vg-sidebar: oklch(0.985 0 0);
87
+ --vg-sidebar-foreground: oklch(0.145 0 0);
88
+ --vg-sidebar-primary: oklch(0.205 0 0);
89
+ --vg-sidebar-primary-foreground: oklch(0.985 0 0);
90
+ --vg-sidebar-accent: oklch(0.97 0 0);
91
+ --vg-sidebar-accent-foreground: oklch(0.205 0 0);
92
+ --vg-sidebar-border: oklch(0.922 0 0);
93
+ --vg-sidebar-ring: oklch(0.708 0 0);
94
+
95
+ /* Brand palette */
96
+ --vg-brand: #c2410c;
97
+ --vg-brand-dark: #9a3412;
98
+ --vg-brand-light: #ea580c;
99
+ --vg-brand-lighter: #f97316;
100
+ --vg-brand-bg: #fff7ed;
101
+ --vg-brand-mid: #ffedd5;
102
+ --vg-brand-border: #fed7aa;
103
+ --vg-brand-on: #ffdead;
104
+ --vg-gradient: linear-gradient(135deg, #c2410c 0%, #f97316 100%);
105
+
106
+ /* Dark institutional footer */
107
+ --vg-footer-bg: #1a202c;
108
+ --vg-footer-fg: #ffffff;
109
+ --vg-footer-muted: #94a3b8;
110
+ --vg-footer-dim: #64748b;
111
+ --vg-footer-border: rgba(255, 255, 255, 0.08);
112
+
113
+ /* Product accent colors (match viglet.org) */
114
+ --vg-product-turing: #4169e1;
115
+ --vg-product-shio: #ff6347;
116
+ --vg-product-dumont: #006400;
117
+ }
118
+
119
+ .dark,
120
+ [data-theme="dark"] {
121
+ --vg-background: oklch(0.145 0 0);
122
+ --vg-foreground: oklch(0.985 0 0);
123
+ --vg-card: oklch(0.205 0 0);
124
+ --vg-card-foreground: oklch(0.985 0 0);
125
+ --vg-popover: oklch(0.205 0 0);
126
+ --vg-popover-foreground: oklch(0.985 0 0);
127
+ --vg-primary: oklch(0.922 0 0);
128
+ --vg-primary-foreground: oklch(0.205 0 0);
129
+ --vg-secondary: oklch(0.269 0 0);
130
+ --vg-secondary-foreground: oklch(0.985 0 0);
131
+ --vg-muted: oklch(0.269 0 0);
132
+ --vg-muted-foreground: oklch(0.708 0 0);
133
+ --vg-accent: oklch(0.269 0 0);
134
+ --vg-accent-foreground: oklch(0.985 0 0);
135
+ --vg-destructive: oklch(0.704 0.191 22.216);
136
+ --vg-border: oklch(1 0 0 / 10%);
137
+ --vg-input: oklch(1 0 0 / 15%);
138
+ --vg-ring: oklch(0.556 0 0);
139
+ --vg-chart-1: oklch(0.488 0.243 264.376);
140
+ --vg-chart-2: oklch(0.696 0.17 162.48);
141
+ --vg-chart-3: oklch(0.769 0.188 70.08);
142
+ --vg-chart-4: oklch(0.627 0.265 303.9);
143
+ --vg-chart-5: oklch(0.645 0.246 16.439);
144
+ --vg-sidebar: oklch(0.205 0 0);
145
+ --vg-sidebar-foreground: oklch(0.985 0 0);
146
+ --vg-sidebar-primary: oklch(0.488 0.243 264.376);
147
+ --vg-sidebar-primary-foreground: oklch(0.985 0 0);
148
+ --vg-sidebar-accent: oklch(0.269 0 0);
149
+ --vg-sidebar-accent-foreground: oklch(0.985 0 0);
150
+ --vg-sidebar-border: oklch(1 0 0 / 10%);
151
+ --vg-sidebar-ring: oklch(0.556 0 0);
152
+
153
+ /* Brand (dark) */
154
+ --vg-brand: #f97316;
155
+ --vg-brand-dark: #c2410c;
156
+ --vg-brand-light: #fb923c;
157
+ --vg-brand-lighter: #fdba74;
158
+ --vg-brand-bg: rgba(249, 115, 22, 0.1);
159
+ --vg-brand-mid: rgba(249, 115, 22, 0.15);
160
+ --vg-brand-border: rgba(249, 115, 22, 0.3);
161
+ --vg-gradient: linear-gradient(135deg, #f97316 0%, #fdba74 100%);
162
+ }