@vaneui/ui 0.3.1-alpha.20251223082222.6676a81 → 0.3.1-alpha.20251223141057.aeb1ff8

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 (12) hide show
  1. package/dist/components/ui/props/appearanceProps.d.ts +3 -3
  2. package/dist/components/ui/props/appearanceProps.d.ts.map +1 -1
  3. package/dist/components/ui/props/keys.d.ts +1 -1
  4. package/dist/components/ui/theme/appearance/appearanceTheme.d.ts +4 -4
  5. package/dist/components/ui/theme/appearance/appearanceTheme.d.ts.map +1 -1
  6. package/dist/components/ui/theme/appearance/shadowAppearanceTheme.d.ts +4 -4
  7. package/dist/components/ui/theme/appearance/shadowAppearanceTheme.d.ts.map +1 -1
  8. package/dist/index.esm.js +34 -34
  9. package/dist/index.js +34 -34
  10. package/dist/ui.css +168 -141
  11. package/dist/vars.css +68 -87
  12. package/package.json +1 -1
package/dist/vars.css CHANGED
@@ -1,26 +1,7 @@
1
1
  @theme {
2
- /* Lightness Adjustment Variables for Hover/Active States */
3
- /* These control how much darker elements become on interaction */
4
- /* Outline/Default variants (light backgrounds - darken on interaction) */
5
- --lightness-hover-outline: 0.02;
6
- --lightness-active-outline: 0.04;
7
-
8
- /* Filled variants (dark backgrounds - darken on interaction) */
9
- --lightness-hover-filled: 0.03;
10
- --lightness-active-filled: 0.06;
11
-
12
- /* Chroma Boost Variables - increase saturation to maintain vibrancy when darkening */
13
- /* Outline/Default variants */
14
- --chroma-boost-hover-outline: 3.2;
15
- --chroma-boost-active-outline: 5.2;
16
-
17
- /* Filled variants */
18
- --chroma-boost-hover-filled: 1.1;
19
- --chroma-boost-active-filled: 1.15;
20
-
21
2
  /* Text Colors */
22
- --color-text-default: var(--color-gray-900);
23
- --color-text-primary: var(--color-blue-600);
3
+ --color-text-primary: var(--color-gray-900);
4
+ --color-text-brand: var(--color-blue-600);
24
5
  --color-text-secondary: var(--color-gray-600);
25
6
  --color-text-tertiary: var(--color-gray-500);
26
7
  --color-text-link: var(--color-blue-600);
@@ -31,8 +12,8 @@
31
12
  --color-text-info: var(--color-cyan-600);
32
13
 
33
14
  /* Filled Text Colors */
34
- --color-text-filled-default: var(--color-white);
35
- --color-text-filled-primary: var(--color-blue-100);
15
+ --color-text-filled-primary: var(--color-white);
16
+ --color-text-filled-brand: var(--color-blue-100);
36
17
  --color-text-filled-secondary: var(--color-gray-200);
37
18
  --color-text-filled-tertiary: var(--color-gray-300);
38
19
  --color-text-filled-link: var(--color-blue-100);
@@ -44,8 +25,8 @@
44
25
  --color-text-filled-transparent: transparent;
45
26
 
46
27
  /* UI Background Colors */
47
- --color-bg-default: var(--color-white);
48
- --color-bg-primary: var(--color-blue-50);
28
+ --color-bg-primary: var(--color-white);
29
+ --color-bg-brand: var(--color-blue-50);
49
30
  --color-bg-secondary: var(--color-gray-50);
50
31
  --color-bg-tertiary: var(--color-gray-100);
51
32
  --color-bg-accent: var(--color-rose-50);
@@ -54,31 +35,31 @@
54
35
  --color-bg-warning: var(--color-amber-50);
55
36
  --color-bg-info: var(--color-cyan-50);
56
37
 
57
- /* UI Background Hover Colors - Calculated from base using oklch with chroma boost */
58
- --color-bg-hover-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
59
- --color-bg-hover-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
60
- --color-bg-hover-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
61
- --color-bg-hover-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
62
- --color-bg-hover-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
63
- --color-bg-hover-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
64
- --color-bg-hover-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
65
- --color-bg-hover-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
66
- --color-bg-hover-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-hover-outline)) calc(c * var(--chroma-boost-hover-outline)) h);
67
-
68
- /* UI Background Active Colors - Calculated from base using oklch with chroma boost */
69
- --color-bg-active-default: oklch(from var(--color-bg-default) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
70
- --color-bg-active-primary: oklch(from var(--color-bg-primary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
71
- --color-bg-active-secondary: oklch(from var(--color-bg-secondary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
72
- --color-bg-active-tertiary: oklch(from var(--color-bg-tertiary) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
73
- --color-bg-active-accent: oklch(from var(--color-bg-accent) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
74
- --color-bg-active-success: oklch(from var(--color-bg-success) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
75
- --color-bg-active-danger: oklch(from var(--color-bg-danger) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
76
- --color-bg-active-warning: oklch(from var(--color-bg-warning) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
77
- --color-bg-active-info: oklch(from var(--color-bg-info) calc(l - var(--lightness-active-outline)) calc(c * var(--chroma-boost-active-outline)) h);
38
+ /* UI Background Hover Colors */
39
+ --color-bg-hover-primary: var(--color-gray-50);
40
+ --color-bg-hover-brand: var(--color-blue-100);
41
+ --color-bg-hover-secondary: var(--color-gray-100);
42
+ --color-bg-hover-tertiary: var(--color-gray-200);
43
+ --color-bg-hover-accent: var(--color-rose-100);
44
+ --color-bg-hover-success: var(--color-emerald-100);
45
+ --color-bg-hover-danger: var(--color-red-100);
46
+ --color-bg-hover-warning: var(--color-amber-100);
47
+ --color-bg-hover-info: var(--color-cyan-100);
48
+
49
+ /* UI Background Active Colors */
50
+ --color-bg-active-primary: var(--color-gray-100);
51
+ --color-bg-active-brand: var(--color-blue-200);
52
+ --color-bg-active-secondary: var(--color-gray-200);
53
+ --color-bg-active-tertiary: var(--color-gray-300);
54
+ --color-bg-active-accent: var(--color-rose-200);
55
+ --color-bg-active-success: var(--color-emerald-200);
56
+ --color-bg-active-danger: var(--color-red-200);
57
+ --color-bg-active-warning: var(--color-amber-200);
58
+ --color-bg-active-info: var(--color-cyan-200);
78
59
 
79
60
  /* Filled UI Background Colors */
80
- --color-bg-filled-default: var(--color-gray-800);
81
- --color-bg-filled-primary: var(--color-blue-600);
61
+ --color-bg-filled-primary: var(--color-gray-800);
62
+ --color-bg-filled-brand: var(--color-blue-600);
82
63
  --color-bg-filled-secondary: var(--color-gray-600);
83
64
  --color-bg-filled-tertiary: var(--color-gray-500);
84
65
  --color-bg-filled-accent: var(--color-rose-600);
@@ -87,31 +68,31 @@
87
68
  --color-bg-filled-warning: var(--color-amber-600);
88
69
  --color-bg-filled-info: var(--color-cyan-600);
89
70
 
90
- /* Filled UI Hover Background Colors - Calculated from base using oklch with chroma boost */
91
- --color-bg-filled-hover-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
92
- --color-bg-filled-hover-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
93
- --color-bg-filled-hover-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
94
- --color-bg-filled-hover-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
95
- --color-bg-filled-hover-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
96
- --color-bg-filled-hover-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
97
- --color-bg-filled-hover-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
98
- --color-bg-filled-hover-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
99
- --color-bg-filled-hover-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-hover-filled)) calc(c * var(--chroma-boost-hover-filled)) h);
100
-
101
- /* Filled UI Active Background Colors - Calculated from base using oklch with chroma boost */
102
- --color-bg-filled-active-default: oklch(from var(--color-bg-filled-default) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
103
- --color-bg-filled-active-primary: oklch(from var(--color-bg-filled-primary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
104
- --color-bg-filled-active-secondary: oklch(from var(--color-bg-filled-secondary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
105
- --color-bg-filled-active-tertiary: oklch(from var(--color-bg-filled-tertiary) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
106
- --color-bg-filled-active-accent: oklch(from var(--color-bg-filled-accent) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
107
- --color-bg-filled-active-success: oklch(from var(--color-bg-filled-success) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
108
- --color-bg-filled-active-danger: oklch(from var(--color-bg-filled-danger) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
109
- --color-bg-filled-active-warning: oklch(from var(--color-bg-filled-warning) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
110
- --color-bg-filled-active-info: oklch(from var(--color-bg-filled-info) calc(l - var(--lightness-active-filled)) calc(c * var(--chroma-boost-active-filled)) h);
71
+ /* Filled UI Hover Background Colors */
72
+ --color-bg-filled-hover-primary: var(--color-gray-900);
73
+ --color-bg-filled-hover-brand: var(--color-blue-700);
74
+ --color-bg-filled-hover-secondary: var(--color-gray-700);
75
+ --color-bg-filled-hover-tertiary: var(--color-gray-600);
76
+ --color-bg-filled-hover-accent: var(--color-rose-700);
77
+ --color-bg-filled-hover-success: var(--color-emerald-700);
78
+ --color-bg-filled-hover-danger: var(--color-red-700);
79
+ --color-bg-filled-hover-warning: var(--color-amber-700);
80
+ --color-bg-filled-hover-info: var(--color-cyan-700);
81
+
82
+ /* Filled UI Active Background Colors */
83
+ --color-bg-filled-active-primary: var(--color-gray-950);
84
+ --color-bg-filled-active-brand: var(--color-blue-800);
85
+ --color-bg-filled-active-secondary: var(--color-gray-800);
86
+ --color-bg-filled-active-tertiary: var(--color-gray-700);
87
+ --color-bg-filled-active-accent: var(--color-rose-800);
88
+ --color-bg-filled-active-success: var(--color-emerald-800);
89
+ --color-bg-filled-active-danger: var(--color-red-800);
90
+ --color-bg-filled-active-warning: var(--color-amber-800);
91
+ --color-bg-filled-active-info: var(--color-cyan-800);
111
92
 
112
93
  /* Layout Background Colors */
113
- --color-bg-layout-default: var(--color-white);
114
94
  --color-bg-layout-primary: var(--color-white);
95
+ --color-bg-layout-brand: var(--color-blue-50);
115
96
  --color-bg-layout-secondary: var(--color-gray-50);
116
97
  --color-bg-layout-tertiary: var(--color-gray-100);
117
98
  --color-bg-layout-accent: var(--color-indigo-50);
@@ -122,8 +103,8 @@
122
103
  --color-bg-layout-transparent: transparent;
123
104
 
124
105
  /* Layout Filled Background Colors */
125
- --color-bg-filled-layout-default: var(--color-gray-700);
126
- --color-bg-filled-layout-primary: var(--color-blue-800);
106
+ --color-bg-filled-layout-primary: var(--color-gray-700);
107
+ --color-bg-filled-layout-brand: var(--color-blue-800);
127
108
  --color-bg-filled-layout-secondary: var(--color-gray-800);
128
109
  --color-bg-filled-layout-tertiary: var(--color-gray-900);
129
110
  --color-bg-filled-layout-accent: var(--color-indigo-700);
@@ -134,26 +115,26 @@
134
115
  --color-bg-filled-layout-transparent: transparent;
135
116
 
136
117
  /* Border Colors */
137
- --color-border-default: var(--color-gray-200);
138
- --color-border-primary: var(--color-blue-200);
139
- --color-border-secondary: var(--color-gray-200);
140
- --color-border-tertiary: var(--color-gray-300);
141
- --color-border-accent: var(--color-rose-200);
142
- --color-border-success: var(--color-green-200);
143
- --color-border-danger: var(--color-red-200);
144
- --color-border-warning: var(--color-yellow-200);
145
- --color-border-info: var(--color-blue-200);
118
+ --color-border-primary: var(--color-gray-200);
119
+ --color-border-brand: var(--color-blue-300);
120
+ --color-border-secondary: var(--color-gray-300);
121
+ --color-border-tertiary: var(--color-gray-400);
122
+ --color-border-accent: var(--color-rose-300);
123
+ --color-border-success: var(--color-emerald-300);
124
+ --color-border-danger: var(--color-red-300);
125
+ --color-border-warning: var(--color-amber-300);
126
+ --color-border-info: var(--color-cyan-300);
146
127
 
147
128
  /* Filled Button Border Colors */
148
- --color-border-filled-default: var(--color-gray-600);
149
- --color-border-filled-primary: var(--color-blue-600);
129
+ --color-border-filled-primary: var(--color-gray-600);
130
+ --color-border-filled-brand: var(--color-blue-600);
150
131
  --color-border-filled-secondary: var(--color-gray-700);
151
- --color-border-filled-tertiary: var(--color-gray-800);
132
+ --color-border-filled-tertiary: var(--color-gray-600);
152
133
  --color-border-filled-accent: var(--color-rose-600);
153
- --color-border-filled-success: var(--color-green-600);
134
+ --color-border-filled-success: var(--color-emerald-600);
154
135
  --color-border-filled-danger: var(--color-red-600);
155
- --color-border-filled-warning: var(--color-yellow-600);
156
- --color-border-filled-info: var(--color-blue-600);
136
+ --color-border-filled-warning: var(--color-amber-600);
137
+ --color-border-filled-info: var(--color-cyan-600);
157
138
 
158
139
  --layout-spacing: var(--spacing);
159
140
  --ui-spacing: var(--spacing);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vaneui/ui",
3
- "version": "0.3.1-alpha.20251223082222.6676a81",
3
+ "version": "0.3.1-alpha.20251223141057.aeb1ff8",
4
4
  "description": "A simple and lightweight UI component library for React, built with Tailwind CSS.",
5
5
  "author": "",
6
6
  "license": "ISC",