@viraui/foundation 2026.0.10 → 2026.0.12

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 (17) hide show
  1. package/package.json +1 -1
  2. package/platforms/web/cinder/cinder-nested.json +21 -18
  3. package/platforms/web/cinder/cinder.css +15 -14
  4. package/platforms/web/cinder/cinder.json +19 -18
  5. package/platforms/web/cinder/types.d.ts +3 -2
  6. package/platforms/web/sunburst/sunburst-nested.json +5 -2
  7. package/platforms/web/sunburst/sunburst.css +3 -2
  8. package/platforms/web/sunburst/sunburst.json +3 -2
  9. package/platforms/web/sunburst/types.d.ts +3 -2
  10. package/platforms/web/vira/types.d.ts +3 -2
  11. package/platforms/web/vira/vira-nested.json +8 -5
  12. package/platforms/web/vira/vira.css +6 -5
  13. package/platforms/web/vira/vira.json +6 -5
  14. package/platforms/web/vira-condensed/types.d.ts +3 -2
  15. package/platforms/web/vira-condensed/vira-condensed-nested.json +8 -5
  16. package/platforms/web/vira-condensed/vira-condensed.css +6 -5
  17. package/platforms/web/vira-condensed/vira-condensed.json +6 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@viraui/foundation",
3
- "version": "2026.0.10",
3
+ "version": "2026.0.12",
4
4
  "private": false,
5
5
  "author": "Vira Software",
6
6
  "files": [
package/platforms/web/cinder/cinder-nested.json CHANGED
@@ -1,12 +1,12 @@
1
1
  {
2
2
  "base": {
3
- "1": "light-dark(oklab(100% 0.0005 -0.0035), oklab(15.907% 0.0007 -0.0045))",
4
- "2": "light-dark(oklab(96.115% 0.0005 -0.0035), oklab(20.463% 0.001 -0.0066))",
5
- "3": "light-dark(oklab(90.67% 0.0016 -0.0108), oklab(24.776% 0.0015 -0.0105))",
6
- "4": "oklab(52.78% 0.0041 -0.0277)",
7
- "5": "light-dark(oklab(35.232% 0.0034 -0.0235), oklab(69.275% 0.0035 -0.0239))",
8
- "6": "light-dark(oklab(24.776% 0.0015 -0.0105), oklab(96.115% 0.0005 -0.0035))",
9
- "7": "light-dark(oklab(15.907% 0.0007 -0.0045), oklab(100% 0.0005 -0.0035))"
3
+ "1": "light-dark(oklab(100% -0.02237 -0.00536), oklab(16.842% -0.02237 -0.00536))",
4
+ "2": "light-dark(oklab(94.611% -0.02237 -0.00536), oklab(20.463% -0.02237 -0.00536))",
5
+ "3": "light-dark(oklab(89.143% -0.02237 -0.00536), oklab(24.776% -0.02237 -0.00536))",
6
+ "4": "oklab(52.78% -0.02237 -0.00536)",
7
+ "5": "light-dark(oklab(35.232% -0.02237 -0.00536), oklab(69.275% -0.02237 -0.00536))",
8
+ "6": "light-dark(oklab(24.776% -0.02237 -0.00536), oklab(96.115% -0.02237 -0.00536))",
9
+ "7": "light-dark(oklab(15.907% -0.02237 -0.00536), oklab(100% -0.02237 -0.00536))"
10
10
  },
11
11
  "color": {
12
12
  "acid": {
@@ -178,16 +178,21 @@
178
178
  "100": "oklab(40.681% 0.05631 0.08253)"
179
179
  }
180
180
  },
181
+ "effect": {
182
+ "vibrancy": "",
183
+ "corner-shape": "",
184
+ "holofoil": "initial"
185
+ },
181
186
  "global": {
182
- "foreground": "light-dark(oklab(15.907% 0.0007 -0.0045), oklab(100% 0.0005 -0.0035))",
183
- "background": "light-dark(oklab(96.115% 0.0005 -0.0035), oklab(0% 0.0004 -0.0027))",
184
- "primary": "#1c7697",
185
- "muted": "light-dark(oklab(52.78% 0.0041 -0.0277), light-dark(oklab(35.232% 0.0034 -0.0235), oklab(69.275% 0.0035 -0.0239)))",
186
- "interactive-text": "light-dark(oklab(24.776% 0.0015 -0.0105), oklab(96.115% 0.0005 -0.0035))",
187
- "disabled-foreground": "oklab(52.78% 0.0041 -0.0277)",
188
- "disabled-background": "light-dark(light-dark(oklab(90.67% 0.0016 -0.0108), oklab(24.776% 0.0015 -0.0105)), light-dark(oklab(96.115% 0.0005 -0.0035), oklab(20.463% 0.001 -0.0066)))",
189
- "contrast": "light-dark(oklab(from oklab(18% 0.0007 -0.0045) l a b / 0.15), oklab(from oklab(93% 0.0012 -0.0079) l a b / 0.09))",
190
- "outline": "light-dark(oklab(15.907% 0.0007 -0.0045), oklab(100% 0.0005 -0.0035))"
187
+ "foreground": "light-dark(oklab(15.907% -0.02237 -0.00536), oklab(100% -0.02237 -0.00536))",
188
+ "background": "light-dark(oklab(93.1% -0.02237 -0.00536), oklab(0% -0.02237 -0.00536))",
189
+ "primary": "#FFF995",
190
+ "muted": "light-dark(oklab(52.78% -0.02237 -0.00536), light-dark(oklab(35.232% -0.02237 -0.00536), oklab(69.275% -0.02237 -0.00536)))",
191
+ "interactive-text": "light-dark(oklab(24.776% -0.02237 -0.00536), oklab(96.115% -0.02237 -0.00536))",
192
+ "disabled-foreground": "oklab(52.78% -0.02237 -0.00536)",
193
+ "disabled-background": "light-dark(oklab(from oklab(0% -0.02237 -0.00536) l a b / 0.1), oklab(from oklab(100% -0.02237 -0.00536) l a b / 0.07))",
194
+ "contrast": "light-dark(oklab(from oklab(0% -0.02237 -0.00536) l a b / 0.15), oklab(from oklab(100% -0.02237 -0.00536) l a b / 0.13))",
195
+ "outline": "light-dark(oklab(15.907% -0.02237 -0.00536), oklab(100% -0.02237 -0.00536))"
191
196
  },
192
197
  "highlight": {
193
198
  "gray": "light-dark(oklab(42.761% 0 0), oklab(69.275% 0 0))",
@@ -228,7 +233,6 @@
228
233
  },
229
234
  "corner": {
230
235
  "shape": {
231
- "enable": "",
232
236
  "squircle": "superellipse(1.8)"
233
237
  }
234
238
  },
@@ -274,7 +278,6 @@
274
278
  }
275
279
  },
276
280
  "vibrancy": {
277
- "enable": "",
278
281
  "blur": 15,
279
282
  "brightness": "150%"
280
283
  }
package/platforms/web/cinder/cinder.css CHANGED
@@ -4,13 +4,13 @@
4
4
  */
5
5
 
6
6
  :root {
7
- --base-1: light-dark(oklab(100% 0.0005 -0.0035), oklab(15.907% 0.0007 -0.0045));
8
- --base-2: light-dark(oklab(96.115% 0.0005 -0.0035), oklab(20.463% 0.001 -0.0066));
9
- --base-3: light-dark(oklab(90.67% 0.0016 -0.0108), oklab(24.776% 0.0015 -0.0105));
10
- --base-4: oklab(52.78% 0.0041 -0.0277);
11
- --base-5: light-dark(oklab(35.232% 0.0034 -0.0235), oklab(69.275% 0.0035 -0.0239));
12
- --base-6: light-dark(oklab(24.776% 0.0015 -0.0105), oklab(96.115% 0.0005 -0.0035));
13
- --base-7: light-dark(oklab(15.907% 0.0007 -0.0045), oklab(100% 0.0005 -0.0035));
7
+ --base-1: light-dark(oklab(100% -0.02237 -0.00536), oklab(16.842% -0.02237 -0.00536));
8
+ --base-2: light-dark(oklab(94.611% -0.02237 -0.00536), oklab(20.463% -0.02237 -0.00536));
9
+ --base-3: light-dark(oklab(89.143% -0.02237 -0.00536), oklab(24.776% -0.02237 -0.00536));
10
+ --base-4: oklab(52.78% -0.02237 -0.00536);
11
+ --base-5: light-dark(oklab(35.232% -0.02237 -0.00536), oklab(69.275% -0.02237 -0.00536));
12
+ --base-6: light-dark(oklab(24.776% -0.02237 -0.00536), oklab(96.115% -0.02237 -0.00536));
13
+ --base-7: light-dark(oklab(15.907% -0.02237 -0.00536), oklab(100% -0.02237 -0.00536));
14
14
  --color-acid-0: oklab(99.142% -0.01187 0.021);
15
15
  --color-acid-5: oklab(97.931% -0.02135 0.04376);
16
16
  --color-acid-10: oklab(96.907% -0.02396 0.05495);
@@ -155,14 +155,17 @@
155
155
  --color-yellow-80: oklab(55.669% 0.08751 0.11282);
156
156
  --color-yellow-90: oklab(47.31% 0.06716 0.09596);
157
157
  --color-yellow-100: oklab(40.681% 0.05631 0.08253);
158
+ --effect-vibrancy: ;
159
+ --effect-corner-shape: ;
160
+ --effect-holofoil: initial;
158
161
  --global-foreground: var(--base-7);
159
- --global-background: light-dark(oklab(96.115% 0.0005 -0.0035), oklab(0% 0.0004 -0.0027));
160
- --global-primary: #1c7697;
162
+ --global-background: light-dark(oklab(93.1% -0.02237 -0.00536), oklab(0% -0.02237 -0.00536));
163
+ --global-primary: #FFF995;
161
164
  --global-muted: light-dark(var(--base-4), var(--base-5));
162
165
  --global-interactive-text: var(--base-6);
163
- --global-disabled-foreground: var(--base-4);
164
- --global-disabled-background: light-dark(var(--base-3), var(--base-2));
165
- --global-contrast: light-dark(oklab(from oklab(18% 0.0007 -0.0045) l a b / 0.15), oklab(from oklab(93% 0.0012 -0.0079) l a b / 0.09));
166
+ --global-disabled-foreground: oklab(52.78% -0.02237 -0.00536);
167
+ --global-disabled-background: light-dark(oklab(from oklab(0% -0.02237 -0.00536) l a b / 0.1), oklab(from oklab(100% -0.02237 -0.00536) l a b / 0.07));
168
+ --global-contrast: light-dark(oklab(from oklab(0% -0.02237 -0.00536) l a b / 0.15), oklab(from oklab(100% -0.02237 -0.00536) l a b / 0.13));
166
169
  --global-outline: var(--global-foreground);
167
170
  --highlight-gray: light-dark(var(--color-stone-60), var(--color-stone-40));
168
171
  --highlight-slate: light-dark(var(--color-slate-60), var(--color-slate-40));
@@ -193,7 +196,6 @@
193
196
  --radius-x-large: 0rem;
194
197
  --radius-2x-large: 0rem;
195
198
  --radius-infinite: 0rem;
196
- --corner-shape-enable: ;
197
199
  --corner-shape-squircle: superellipse(1.8);
198
200
  --space-2x-small: 0.125rem;
199
201
  --space-x-small: 0.25rem;
@@ -226,7 +228,6 @@
226
228
  --font-leading-small: 1.2;
227
229
  --font-leading-standard: 1.5;
228
230
  --font-leading-large: 1.8;
229
- --vibrancy-enable: ;
230
231
  --vibrancy-blur: 15;
231
232
  --vibrancy-brightness: 150%;
232
233
  }
package/platforms/web/cinder/cinder.json CHANGED
@@ -1,11 +1,11 @@
1
1
  {
2
- "base-1": "light-dark(oklab(100% 0.0005 -0.0035), oklab(15.907% 0.0007 -0.0045))",
3
- "base-2": "light-dark(oklab(96.115% 0.0005 -0.0035), oklab(20.463% 0.001 -0.0066))",
4
- "base-3": "light-dark(oklab(90.67% 0.0016 -0.0108), oklab(24.776% 0.0015 -0.0105))",
5
- "base-4": "oklab(52.78% 0.0041 -0.0277)",
6
- "base-5": "light-dark(oklab(35.232% 0.0034 -0.0235), oklab(69.275% 0.0035 -0.0239))",
7
- "base-6": "light-dark(oklab(24.776% 0.0015 -0.0105), oklab(96.115% 0.0005 -0.0035))",
8
- "base-7": "light-dark(oklab(15.907% 0.0007 -0.0045), oklab(100% 0.0005 -0.0035))",
2
+ "base-1": "light-dark(oklab(100% -0.02237 -0.00536), oklab(16.842% -0.02237 -0.00536))",
3
+ "base-2": "light-dark(oklab(94.611% -0.02237 -0.00536), oklab(20.463% -0.02237 -0.00536))",
4
+ "base-3": "light-dark(oklab(89.143% -0.02237 -0.00536), oklab(24.776% -0.02237 -0.00536))",
5
+ "base-4": "oklab(52.78% -0.02237 -0.00536)",
6
+ "base-5": "light-dark(oklab(35.232% -0.02237 -0.00536), oklab(69.275% -0.02237 -0.00536))",
7
+ "base-6": "light-dark(oklab(24.776% -0.02237 -0.00536), oklab(96.115% -0.02237 -0.00536))",
8
+ "base-7": "light-dark(oklab(15.907% -0.02237 -0.00536), oklab(100% -0.02237 -0.00536))",
9
9
  "color-acid-0": "oklab(99.142% -0.01187 0.021)",
10
10
  "color-acid-5": "oklab(97.931% -0.02135 0.04376)",
11
11
  "color-acid-10": "oklab(96.907% -0.02396 0.05495)",
@@ -150,15 +150,18 @@
150
150
  "color-yellow-80": "oklab(55.669% 0.08751 0.11282)",
151
151
  "color-yellow-90": "oklab(47.31% 0.06716 0.09596)",
152
152
  "color-yellow-100": "oklab(40.681% 0.05631 0.08253)",
153
- "global-foreground": "light-dark(oklab(15.907% 0.0007 -0.0045), oklab(100% 0.0005 -0.0035))",
154
- "global-background": "light-dark(oklab(96.115% 0.0005 -0.0035), oklab(0% 0.0004 -0.0027))",
155
- "global-primary": "#1c7697",
156
- "global-muted": "light-dark(oklab(52.78% 0.0041 -0.0277), light-dark(oklab(35.232% 0.0034 -0.0235), oklab(69.275% 0.0035 -0.0239)))",
157
- "global-interactive-text": "light-dark(oklab(24.776% 0.0015 -0.0105), oklab(96.115% 0.0005 -0.0035))",
158
- "global-disabled-foreground": "oklab(52.78% 0.0041 -0.0277)",
159
- "global-disabled-background": "light-dark(light-dark(oklab(90.67% 0.0016 -0.0108), oklab(24.776% 0.0015 -0.0105)), light-dark(oklab(96.115% 0.0005 -0.0035), oklab(20.463% 0.001 -0.0066)))",
160
- "global-contrast": "light-dark(oklab(from oklab(18% 0.0007 -0.0045) l a b / 0.15), oklab(from oklab(93% 0.0012 -0.0079) l a b / 0.09))",
161
- "global-outline": "light-dark(oklab(15.907% 0.0007 -0.0045), oklab(100% 0.0005 -0.0035))",
153
+ "effect-vibrancy": "",
154
+ "effect-corner-shape": "",
155
+ "effect-holofoil": "initial",
156
+ "global-foreground": "light-dark(oklab(15.907% -0.02237 -0.00536), oklab(100% -0.02237 -0.00536))",
157
+ "global-background": "light-dark(oklab(93.1% -0.02237 -0.00536), oklab(0% -0.02237 -0.00536))",
158
+ "global-primary": "#FFF995",
159
+ "global-muted": "light-dark(oklab(52.78% -0.02237 -0.00536), light-dark(oklab(35.232% -0.02237 -0.00536), oklab(69.275% -0.02237 -0.00536)))",
160
+ "global-interactive-text": "light-dark(oklab(24.776% -0.02237 -0.00536), oklab(96.115% -0.02237 -0.00536))",
161
+ "global-disabled-foreground": "oklab(52.78% -0.02237 -0.00536)",
162
+ "global-disabled-background": "light-dark(oklab(from oklab(0% -0.02237 -0.00536) l a b / 0.1), oklab(from oklab(100% -0.02237 -0.00536) l a b / 0.07))",
163
+ "global-contrast": "light-dark(oklab(from oklab(0% -0.02237 -0.00536) l a b / 0.15), oklab(from oklab(100% -0.02237 -0.00536) l a b / 0.13))",
164
+ "global-outline": "light-dark(oklab(15.907% -0.02237 -0.00536), oklab(100% -0.02237 -0.00536))",
162
165
  "highlight-gray": "light-dark(oklab(42.761% 0 0), oklab(69.275% 0 0))",
163
166
  "highlight-slate": "light-dark(oklab(44.553% -0.00824 -0.03653), oklab(71.067% -0.00803 -0.03418))",
164
167
  "highlight-yellow": "light-dark(oklab(62.573% 0.10037 0.12679), oklab(83.387% 0.00688 0.142))",
@@ -188,7 +191,6 @@
188
191
  "radius-x-large": "0rem",
189
192
  "radius-2x-large": "0rem",
190
193
  "radius-infinite": "0rem",
191
- "corner-shape-enable": "",
192
194
  "corner-shape-squircle": "superellipse(1.8)",
193
195
  "space-2x-small": "0.125rem",
194
196
  "space-x-small": "0.25rem",
@@ -221,7 +223,6 @@
221
223
  "font-leading-small": 1.2,
222
224
  "font-leading-standard": 1.5,
223
225
  "font-leading-large": 1.8,
224
- "vibrancy-enable": "",
225
226
  "vibrancy-blur": 15,
226
227
  "vibrancy-brightness": "150%"
227
228
  }
package/platforms/web/cinder/types.d.ts CHANGED
@@ -14,13 +14,14 @@ export type ThemeTypes = {
14
14
  stone: '0' | '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
15
15
  yellow: '0' | '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
16
16
  };
17
+ effect: 'vibrancy' | 'corner-shape' | 'holofoil';
17
18
  global: 'foreground' | 'background' | 'primary' | 'muted' | 'interactive-text' | 'disabled-foreground' | 'disabled-background' | 'contrast' | 'outline';
18
19
  highlight: 'gray' | 'slate' | 'yellow' | 'green' | 'blue' | 'red' | 'cyan' | 'purple' | 'indigo' | 'acid' | 'salmon' | 'magenta';
19
20
  duration: 'instant' | 'fast' | 'normal' | 'slow' | 'slowest';
20
21
  easing: 'standard' | 'entrance' | 'exit' | 'elastic' | 'wiggle';
21
22
  radius: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'infinite';
22
23
  corner: {
23
- shape: 'enable' | 'squircle';
24
+ shape: 'squircle';
24
25
  };
25
26
  space: '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'wide' | 'x-wide' | '2x-wide';
26
27
  font: {
@@ -28,7 +29,7 @@ export type ThemeTypes = {
28
29
  family: 'heading' | 'body' | 'mono';
29
30
  leading: 'x-small' | 'small' | 'standard' | 'large';
30
31
  };
31
- vibrancy: 'enable' | 'blur' | 'brightness';
32
+ vibrancy: 'blur' | 'brightness';
32
33
  colors: 'acid' | 'blue' | 'cyan' | 'green' | 'indigo' | 'magenta' | 'purple' | 'red' | 'salmon' | 'slate' | 'stone' | 'yellow';
33
34
  };
34
35
 
package/platforms/web/sunburst/sunburst-nested.json CHANGED
@@ -178,6 +178,11 @@
178
178
  "100": "oklab(40.681% 0.05631 0.08253)"
179
179
  }
180
180
  },
181
+ "effect": {
182
+ "vibrancy": "",
183
+ "corner-shape": "",
184
+ "holofoil": "initial"
185
+ },
181
186
  "global": {
182
187
  "foreground": "light-dark(oklab(15.907% 0.0034 0.0058), oklab(100% 0.0026 0.0045))",
183
188
  "background": "light-dark(oklab(96.115% 0.0026 0.0045), oklab(0% 0.002 0.0035))",
@@ -228,7 +233,6 @@
228
233
  },
229
234
  "corner": {
230
235
  "shape": {
231
- "enable": "",
232
236
  "squircle": "superellipse(1.8)"
233
237
  }
234
238
  },
@@ -274,7 +278,6 @@
274
278
  }
275
279
  },
276
280
  "vibrancy": {
277
- "enable": "",
278
281
  "blur": 15,
279
282
  "brightness": "150%"
280
283
  }
package/platforms/web/sunburst/sunburst.css CHANGED
@@ -155,6 +155,9 @@
155
155
  --color-yellow-80: oklab(55.669% 0.08751 0.11282);
156
156
  --color-yellow-90: oklab(47.31% 0.06716 0.09596);
157
157
  --color-yellow-100: oklab(40.681% 0.05631 0.08253);
158
+ --effect-vibrancy: ;
159
+ --effect-corner-shape: ;
160
+ --effect-holofoil: initial;
158
161
  --global-foreground: var(--base-7);
159
162
  --global-background: light-dark(oklab(96.115% 0.0026 0.0045), oklab(0% 0.002 0.0035));
160
163
  --global-primary: #ff8636;
@@ -193,7 +196,6 @@
193
196
  --radius-x-large: 3rem;
194
197
  --radius-2x-large: 4.5rem;
195
198
  --radius-infinite: 625rem;
196
- --corner-shape-enable: ;
197
199
  --corner-shape-squircle: superellipse(1.8);
198
200
  --space-2x-small: 0.125rem;
199
201
  --space-x-small: 0.25rem;
@@ -226,7 +228,6 @@
226
228
  --font-leading-small: 1.2;
227
229
  --font-leading-standard: 1.5;
228
230
  --font-leading-large: 1.8;
229
- --vibrancy-enable: ;
230
231
  --vibrancy-blur: 15;
231
232
  --vibrancy-brightness: 150%;
232
233
  }
package/platforms/web/sunburst/sunburst.json CHANGED
@@ -150,6 +150,9 @@
150
150
  "color-yellow-80": "oklab(55.669% 0.08751 0.11282)",
151
151
  "color-yellow-90": "oklab(47.31% 0.06716 0.09596)",
152
152
  "color-yellow-100": "oklab(40.681% 0.05631 0.08253)",
153
+ "effect-vibrancy": "",
154
+ "effect-corner-shape": "",
155
+ "effect-holofoil": "initial",
153
156
  "global-foreground": "light-dark(oklab(15.907% 0.0034 0.0058), oklab(100% 0.0026 0.0045))",
154
157
  "global-background": "light-dark(oklab(96.115% 0.0026 0.0045), oklab(0% 0.002 0.0035))",
155
158
  "global-primary": "#ff8636",
@@ -188,7 +191,6 @@
188
191
  "radius-x-large": "3rem",
189
192
  "radius-2x-large": "4.5rem",
190
193
  "radius-infinite": "625rem",
191
- "corner-shape-enable": "",
192
194
  "corner-shape-squircle": "superellipse(1.8)",
193
195
  "space-2x-small": "0.125rem",
194
196
  "space-x-small": "0.25rem",
@@ -221,7 +223,6 @@
221
223
  "font-leading-small": 1.2,
222
224
  "font-leading-standard": 1.5,
223
225
  "font-leading-large": 1.8,
224
- "vibrancy-enable": "",
225
226
  "vibrancy-blur": 15,
226
227
  "vibrancy-brightness": "150%"
227
228
  }
package/platforms/web/sunburst/types.d.ts CHANGED
@@ -14,13 +14,14 @@ export type ThemeTypes = {
14
14
  stone: '0' | '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
15
15
  yellow: '0' | '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
16
16
  };
17
+ effect: 'vibrancy' | 'corner-shape' | 'holofoil';
17
18
  global: 'foreground' | 'background' | 'primary' | 'muted' | 'interactive-text' | 'disabled-foreground' | 'disabled-background' | 'contrast' | 'outline';
18
19
  highlight: 'gray' | 'slate' | 'yellow' | 'green' | 'blue' | 'red' | 'cyan' | 'purple' | 'indigo' | 'acid' | 'salmon' | 'magenta';
19
20
  duration: 'instant' | 'fast' | 'normal' | 'slow' | 'slowest';
20
21
  easing: 'standard' | 'entrance' | 'exit' | 'elastic' | 'wiggle';
21
22
  radius: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'infinite';
22
23
  corner: {
23
- shape: 'enable' | 'squircle';
24
+ shape: 'squircle';
24
25
  };
25
26
  space: '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'wide' | 'x-wide' | '2x-wide';
26
27
  font: {
@@ -28,7 +29,7 @@ export type ThemeTypes = {
28
29
  family: 'heading' | 'body' | 'mono';
29
30
  leading: 'x-small' | 'small' | 'standard' | 'large';
30
31
  };
31
- vibrancy: 'enable' | 'blur' | 'brightness';
32
+ vibrancy: 'blur' | 'brightness';
32
33
  colors: 'acid' | 'blue' | 'cyan' | 'green' | 'indigo' | 'magenta' | 'purple' | 'red' | 'salmon' | 'slate' | 'stone' | 'yellow';
33
34
  };
34
35
 
package/platforms/web/vira/types.d.ts CHANGED
@@ -14,13 +14,14 @@ export type ThemeTypes = {
14
14
  stone: '0' | '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
15
15
  yellow: '0' | '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
16
16
  };
17
+ effect: 'vibrancy' | 'corner-shape' | 'holofoil';
17
18
  global: 'foreground' | 'background' | 'primary' | 'muted' | 'interactive-text' | 'disabled-foreground' | 'disabled-background' | 'contrast' | 'outline';
18
19
  highlight: 'gray' | 'slate' | 'yellow' | 'green' | 'blue' | 'red' | 'cyan' | 'purple' | 'indigo' | 'acid' | 'salmon' | 'magenta';
19
20
  duration: 'instant' | 'fast' | 'normal' | 'slow' | 'slowest';
20
21
  easing: 'standard' | 'entrance' | 'exit' | 'elastic' | 'wiggle';
21
22
  radius: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'infinite';
22
23
  corner: {
23
- shape: 'enable' | 'squircle';
24
+ shape: 'squircle';
24
25
  };
25
26
  space: '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'wide' | 'x-wide' | '2x-wide';
26
27
  font: {
@@ -28,7 +29,7 @@ export type ThemeTypes = {
28
29
  family: 'heading' | 'body' | 'mono';
29
30
  leading: 'x-small' | 'small' | 'standard' | 'large';
30
31
  };
31
- vibrancy: 'enable' | 'blur' | 'brightness';
32
+ vibrancy: 'blur' | 'brightness';
32
33
  colors: 'acid' | 'blue' | 'cyan' | 'green' | 'indigo' | 'magenta' | 'purple' | 'red' | 'salmon' | 'slate' | 'stone' | 'yellow';
33
34
  };
34
35
 
package/platforms/web/vira/vira-nested.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "base": {
3
3
  "1": "light-dark(oklab(100% 0 0), oklab(16.842% 0 0))",
4
- "2": "light-dark(oklab(94.611% 0 0), oklab(20.463% 0 0))",
5
- "3": "light-dark(oklab(89.143% 0 0), oklab(24.776% 0 0))",
4
+ "2": "light-dark(oklab(94.611% 0 0), oklab(21.779% 0 0))",
5
+ "3": "light-dark(oklab(88.531% 0 0), oklab(24.776% 0 0))",
6
6
  "4": "oklab(52.78% 0 0)",
7
7
  "5": "light-dark(oklab(35.232% 0 0), oklab(69.275% 0 0))",
8
8
  "6": "light-dark(oklab(24.776% 0 0), oklab(96.115% 0 0))",
@@ -178,6 +178,11 @@
178
178
  "100": "oklab(40.681% 0.05631 0.08253)"
179
179
  }
180
180
  },
181
+ "effect": {
182
+ "vibrancy": "",
183
+ "corner-shape": "",
184
+ "holofoil": "initial"
185
+ },
181
186
  "global": {
182
187
  "foreground": "light-dark(oklab(15.907% 0 0), oklab(100% 0 0))",
183
188
  "background": "light-dark(oklab(93.1% 0 0), oklab(0% 0 0))",
@@ -228,7 +233,6 @@
228
233
  },
229
234
  "corner": {
230
235
  "shape": {
231
- "enable": "",
232
236
  "squircle": "superellipse(1.8)"
233
237
  }
234
238
  },
@@ -264,7 +268,7 @@
264
268
  "family": {
265
269
  "heading": "Geist Variable",
266
270
  "body": "Geist Variable",
267
- "mono": "Geist Mono Variable"
271
+ "mono": "monospace"
268
272
  },
269
273
  "leading": {
270
274
  "x-small": 1,
@@ -274,7 +278,6 @@
274
278
  }
275
279
  },
276
280
  "vibrancy": {
277
- "enable": "",
278
281
  "blur": 15,
279
282
  "brightness": "150%"
280
283
  }
package/platforms/web/vira/vira.css CHANGED
@@ -5,8 +5,8 @@
5
5
 
6
6
  :root {
7
7
  --base-1: light-dark(oklab(100% 0 0), oklab(16.842% 0 0));
8
- --base-2: light-dark(oklab(94.611% 0 0), oklab(20.463% 0 0));
9
- --base-3: light-dark(oklab(89.143% 0 0), oklab(24.776% 0 0));
8
+ --base-2: light-dark(oklab(94.611% 0 0), oklab(21.779% 0 0));
9
+ --base-3: light-dark(oklab(88.531% 0 0), oklab(24.776% 0 0));
10
10
  --base-4: oklab(52.78% 0 0);
11
11
  --base-5: light-dark(oklab(35.232% 0 0), oklab(69.275% 0 0));
12
12
  --base-6: light-dark(oklab(24.776% 0 0), oklab(96.115% 0 0));
@@ -155,6 +155,9 @@
155
155
  --color-yellow-80: oklab(55.669% 0.08751 0.11282);
156
156
  --color-yellow-90: oklab(47.31% 0.06716 0.09596);
157
157
  --color-yellow-100: oklab(40.681% 0.05631 0.08253);
158
+ --effect-vibrancy: ;
159
+ --effect-corner-shape: ;
160
+ --effect-holofoil: initial;
158
161
  --global-foreground: var(--base-7);
159
162
  --global-background: light-dark(oklab(93.1% 0 0), oklab(0% 0 0));
160
163
  --global-primary: var(--base-7);
@@ -193,7 +196,6 @@
193
196
  --radius-x-large: 2rem;
194
197
  --radius-2x-large: 3rem;
195
198
  --radius-infinite: 625rem;
196
- --corner-shape-enable: ;
197
199
  --corner-shape-squircle: superellipse(1.8);
198
200
  --space-2x-small: 0.125rem;
199
201
  --space-x-small: 0.25rem;
@@ -221,12 +223,11 @@
221
223
  --font-scale-body-x-small: 0.75rem;
222
224
  --font-family-heading: Geist Variable;
223
225
  --font-family-body: Geist Variable;
224
- --font-family-mono: Geist Mono Variable;
226
+ --font-family-mono: monospace;
225
227
  --font-leading-x-small: 1;
226
228
  --font-leading-small: 1.2;
227
229
  --font-leading-standard: 1.5;
228
230
  --font-leading-large: 1.8;
229
- --vibrancy-enable: ;
230
231
  --vibrancy-blur: 15;
231
232
  --vibrancy-brightness: 150%;
232
233
  }
package/platforms/web/vira/vira.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "base-1": "light-dark(oklab(100% 0 0), oklab(16.842% 0 0))",
3
- "base-2": "light-dark(oklab(94.611% 0 0), oklab(20.463% 0 0))",
4
- "base-3": "light-dark(oklab(89.143% 0 0), oklab(24.776% 0 0))",
3
+ "base-2": "light-dark(oklab(94.611% 0 0), oklab(21.779% 0 0))",
4
+ "base-3": "light-dark(oklab(88.531% 0 0), oklab(24.776% 0 0))",
5
5
  "base-4": "oklab(52.78% 0 0)",
6
6
  "base-5": "light-dark(oklab(35.232% 0 0), oklab(69.275% 0 0))",
7
7
  "base-6": "light-dark(oklab(24.776% 0 0), oklab(96.115% 0 0))",
@@ -150,6 +150,9 @@
150
150
  "color-yellow-80": "oklab(55.669% 0.08751 0.11282)",
151
151
  "color-yellow-90": "oklab(47.31% 0.06716 0.09596)",
152
152
  "color-yellow-100": "oklab(40.681% 0.05631 0.08253)",
153
+ "effect-vibrancy": "",
154
+ "effect-corner-shape": "",
155
+ "effect-holofoil": "initial",
153
156
  "global-foreground": "light-dark(oklab(15.907% 0 0), oklab(100% 0 0))",
154
157
  "global-background": "light-dark(oklab(93.1% 0 0), oklab(0% 0 0))",
155
158
  "global-primary": "light-dark(oklab(15.907% 0 0), oklab(100% 0 0))",
@@ -188,7 +191,6 @@
188
191
  "radius-x-large": "2rem",
189
192
  "radius-2x-large": "3rem",
190
193
  "radius-infinite": "625rem",
191
- "corner-shape-enable": "",
192
194
  "corner-shape-squircle": "superellipse(1.8)",
193
195
  "space-2x-small": "0.125rem",
194
196
  "space-x-small": "0.25rem",
@@ -216,12 +218,11 @@
216
218
  "font-scale-body-x-small": "0.75rem",
217
219
  "font-family-heading": "Geist Variable",
218
220
  "font-family-body": "Geist Variable",
219
- "font-family-mono": "Geist Mono Variable",
221
+ "font-family-mono": "monospace",
220
222
  "font-leading-x-small": 1,
221
223
  "font-leading-small": 1.2,
222
224
  "font-leading-standard": 1.5,
223
225
  "font-leading-large": 1.8,
224
- "vibrancy-enable": "",
225
226
  "vibrancy-blur": 15,
226
227
  "vibrancy-brightness": "150%"
227
228
  }
package/platforms/web/vira-condensed/types.d.ts CHANGED
@@ -14,13 +14,14 @@ export type ThemeTypes = {
14
14
  stone: '0' | '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
15
15
  yellow: '0' | '5' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '100';
16
16
  };
17
+ effect: 'vibrancy' | 'corner-shape' | 'holofoil';
17
18
  global: 'foreground' | 'background' | 'primary' | 'muted' | 'interactive-text' | 'disabled-foreground' | 'disabled-background' | 'contrast' | 'outline';
18
19
  highlight: 'gray' | 'slate' | 'yellow' | 'green' | 'blue' | 'red' | 'cyan' | 'purple' | 'indigo' | 'acid' | 'salmon' | 'magenta';
19
20
  duration: 'instant' | 'fast' | 'normal' | 'slow' | 'slowest';
20
21
  easing: 'standard' | 'entrance' | 'exit' | 'elastic' | 'wiggle';
21
22
  radius: 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'infinite';
22
23
  corner: {
23
- shape: 'enable' | 'squircle';
24
+ shape: 'squircle';
24
25
  };
25
26
  space: '2x-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | '2x-large' | 'wide' | 'x-wide' | '2x-wide';
26
27
  font: {
@@ -28,7 +29,7 @@ export type ThemeTypes = {
28
29
  family: 'heading' | 'body' | 'mono';
29
30
  leading: 'x-small' | 'small' | 'standard' | 'large';
30
31
  };
31
- vibrancy: 'enable' | 'blur' | 'brightness';
32
+ vibrancy: 'blur' | 'brightness';
32
33
  colors: 'acid' | 'blue' | 'cyan' | 'green' | 'indigo' | 'magenta' | 'purple' | 'red' | 'salmon' | 'slate' | 'stone' | 'yellow';
33
34
  };
34
35
 
package/platforms/web/vira-condensed/vira-condensed-nested.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "base": {
3
3
  "1": "light-dark(oklab(100% 0 0), oklab(16.842% 0 0))",
4
- "2": "light-dark(oklab(94.611% 0 0), oklab(20.463% 0 0))",
5
- "3": "light-dark(oklab(89.143% 0 0), oklab(24.776% 0 0))",
4
+ "2": "light-dark(oklab(94.611% 0 0), oklab(21.779% 0 0))",
5
+ "3": "light-dark(oklab(88.531% 0 0), oklab(24.776% 0 0))",
6
6
  "4": "oklab(52.78% 0 0)",
7
7
  "5": "light-dark(oklab(35.232% 0 0), oklab(69.275% 0 0))",
8
8
  "6": "light-dark(oklab(24.776% 0 0), oklab(96.115% 0 0))",
@@ -178,6 +178,11 @@
178
178
  "100": "oklab(40.681% 0.05631 0.08253)"
179
179
  }
180
180
  },
181
+ "effect": {
182
+ "vibrancy": "",
183
+ "corner-shape": "",
184
+ "holofoil": "initial"
185
+ },
181
186
  "global": {
182
187
  "foreground": "light-dark(oklab(15.907% 0 0), oklab(100% 0 0))",
183
188
  "background": "light-dark(oklab(93.1% 0 0), oklab(0% 0 0))",
@@ -228,7 +233,6 @@
228
233
  },
229
234
  "corner": {
230
235
  "shape": {
231
- "enable": "",
232
236
  "squircle": "superellipse(1.8)"
233
237
  }
234
238
  },
@@ -264,7 +268,7 @@
264
268
  "family": {
265
269
  "heading": "Geist Variable",
266
270
  "body": "Geist Variable",
267
- "mono": "Geist Mono Variable"
271
+ "mono": "monospace"
268
272
  },
269
273
  "leading": {
270
274
  "x-small": 1,
@@ -274,7 +278,6 @@
274
278
  }
275
279
  },
276
280
  "vibrancy": {
277
- "enable": "",
278
281
  "blur": 15,
279
282
  "brightness": "150%"
280
283
  }
package/platforms/web/vira-condensed/vira-condensed.css CHANGED
@@ -5,8 +5,8 @@
5
5
 
6
6
  :root {
7
7
  --base-1: light-dark(oklab(100% 0 0), oklab(16.842% 0 0));
8
- --base-2: light-dark(oklab(94.611% 0 0), oklab(20.463% 0 0));
9
- --base-3: light-dark(oklab(89.143% 0 0), oklab(24.776% 0 0));
8
+ --base-2: light-dark(oklab(94.611% 0 0), oklab(21.779% 0 0));
9
+ --base-3: light-dark(oklab(88.531% 0 0), oklab(24.776% 0 0));
10
10
  --base-4: oklab(52.78% 0 0);
11
11
  --base-5: light-dark(oklab(35.232% 0 0), oklab(69.275% 0 0));
12
12
  --base-6: light-dark(oklab(24.776% 0 0), oklab(96.115% 0 0));
@@ -155,6 +155,9 @@
155
155
  --color-yellow-80: oklab(55.669% 0.08751 0.11282);
156
156
  --color-yellow-90: oklab(47.31% 0.06716 0.09596);
157
157
  --color-yellow-100: oklab(40.681% 0.05631 0.08253);
158
+ --effect-vibrancy: ;
159
+ --effect-corner-shape: ;
160
+ --effect-holofoil: initial;
158
161
  --global-foreground: var(--base-7);
159
162
  --global-background: light-dark(oklab(93.1% 0 0), oklab(0% 0 0));
160
163
  --global-primary: var(--base-7);
@@ -193,7 +196,6 @@
193
196
  --radius-x-large: 2rem;
194
197
  --radius-2x-large: 3rem;
195
198
  --radius-infinite: 625rem;
196
- --corner-shape-enable: ;
197
199
  --corner-shape-squircle: superellipse(1.8);
198
200
  --space-2x-small: 0.125rem;
199
201
  --space-x-small: 0.25rem;
@@ -221,12 +223,11 @@
221
223
  --font-scale-body-x-small: 0.75rem;
222
224
  --font-family-heading: Geist Variable;
223
225
  --font-family-body: Geist Variable;
224
- --font-family-mono: Geist Mono Variable;
226
+ --font-family-mono: monospace;
225
227
  --font-leading-x-small: 1;
226
228
  --font-leading-small: 1.2;
227
229
  --font-leading-standard: 1.5;
228
230
  --font-leading-large: 1.8;
229
- --vibrancy-enable: ;
230
231
  --vibrancy-blur: 15;
231
232
  --vibrancy-brightness: 150%;
232
233
  }
package/platforms/web/vira-condensed/vira-condensed.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "base-1": "light-dark(oklab(100% 0 0), oklab(16.842% 0 0))",
3
- "base-2": "light-dark(oklab(94.611% 0 0), oklab(20.463% 0 0))",
4
- "base-3": "light-dark(oklab(89.143% 0 0), oklab(24.776% 0 0))",
3
+ "base-2": "light-dark(oklab(94.611% 0 0), oklab(21.779% 0 0))",
4
+ "base-3": "light-dark(oklab(88.531% 0 0), oklab(24.776% 0 0))",
5
5
  "base-4": "oklab(52.78% 0 0)",
6
6
  "base-5": "light-dark(oklab(35.232% 0 0), oklab(69.275% 0 0))",
7
7
  "base-6": "light-dark(oklab(24.776% 0 0), oklab(96.115% 0 0))",
@@ -150,6 +150,9 @@
150
150
  "color-yellow-80": "oklab(55.669% 0.08751 0.11282)",
151
151
  "color-yellow-90": "oklab(47.31% 0.06716 0.09596)",
152
152
  "color-yellow-100": "oklab(40.681% 0.05631 0.08253)",
153
+ "effect-vibrancy": "",
154
+ "effect-corner-shape": "",
155
+ "effect-holofoil": "initial",
153
156
  "global-foreground": "light-dark(oklab(15.907% 0 0), oklab(100% 0 0))",
154
157
  "global-background": "light-dark(oklab(93.1% 0 0), oklab(0% 0 0))",
155
158
  "global-primary": "light-dark(oklab(15.907% 0 0), oklab(100% 0 0))",
@@ -188,7 +191,6 @@
188
191
  "radius-x-large": "2rem",
189
192
  "radius-2x-large": "3rem",
190
193
  "radius-infinite": "625rem",
191
- "corner-shape-enable": "",
192
194
  "corner-shape-squircle": "superellipse(1.8)",
193
195
  "space-2x-small": "0.125rem",
194
196
  "space-x-small": "0.25rem",
@@ -216,12 +218,11 @@
216
218
  "font-scale-body-x-small": "0.75rem",
217
219
  "font-family-heading": "Geist Variable",
218
220
  "font-family-body": "Geist Variable",
219
- "font-family-mono": "Geist Mono Variable",
221
+ "font-family-mono": "monospace",
220
222
  "font-leading-x-small": 1,
221
223
  "font-leading-small": 1.2,
222
224
  "font-leading-standard": 1.5,
223
225
  "font-leading-large": 1.8,
224
- "vibrancy-enable": "",
225
226
  "vibrancy-blur": 15,
226
227
  "vibrancy-brightness": "150%"
227
228
  }