@anyknown/ui 0.6.0 → 0.7.0

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 (24) hide show
  1. package/README.md +2 -2
  2. package/dist/brand.css +100 -0
  3. package/dist/components/badge/Badge.d.ts +11 -3
  4. package/dist/components/badge/Badge.js +21 -3
  5. package/dist/components/data-table/DataTable.d.ts +7 -1
  6. package/dist/components/data-table/DataTable.js +34 -34
  7. package/dist/components/dialog/Dialog.d.ts +9 -1
  8. package/dist/components/dialog/Dialog.js +10 -2
  9. package/dist/components/live-dot/LiveDot.d.ts +7 -0
  10. package/dist/components/live-dot/LiveDot.js +35 -0
  11. package/dist/components/message/Message.d.ts +3 -1
  12. package/dist/components/message/Message.js +2 -2
  13. package/dist/components/slider/Slider.d.ts +19 -0
  14. package/dist/components/slider/Slider.js +103 -0
  15. package/dist/index.d.ts +3 -0
  16. package/dist/index.js +3 -0
  17. package/dist/lib/layers.d.ts +7 -0
  18. package/dist/lib/layers.js +12 -0
  19. package/dist/themes.stylex.d.ts +311 -0
  20. package/dist/themes.stylex.js +126 -0
  21. package/dist/tokens.css +90 -0
  22. package/dist/tokens.stylex.d.ts +5 -0
  23. package/dist/tokens.stylex.js +7 -0
  24. package/package.json +2 -2
package/dist/tokens.css CHANGED
@@ -33,6 +33,12 @@ html {
33
33
  --ak-success-hl: #c6e0c6;
34
34
  --ak-danger-hl: #efcec3;
35
35
 
36
+ --ak-layer1: #efece3;
37
+ --ak-layer2: #fafaf6;
38
+ --ak-layer3: #f1efe7;
39
+ --ak-layer4: #e8e5da;
40
+ --ak-layer5: #dedacd;
41
+
36
42
  --ak-shadow-popover: 0 8px 24px rgba(35, 33, 29, 0.1);
37
43
  --ak-shadow-raised: 0 1px 2px rgba(35, 33, 29, 0.08);
38
44
 
@@ -81,12 +87,23 @@ html {
81
87
  --ak-success-hl: #2f4a2e;
82
88
  --ak-danger-hl: #573328;
83
89
 
90
+ --ak-layer1: #0e0c09;
91
+ --ak-layer2: #181613;
92
+ --ak-layer3: #211e19;
93
+ --ak-layer4: #2b2721;
94
+ --ak-layer5: #35302a;
95
+
84
96
  --ak-shadow-popover: 0 8px 24px rgba(0, 0, 0, 0.4);
85
97
  --ak-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.3);
86
98
  }
87
99
  }
88
100
 
89
101
  [data-theme="dark"] {
102
+ --ak-layer1: #0e0c09;
103
+ --ak-layer2: #181613;
104
+ --ak-layer3: #211e19;
105
+ --ak-layer4: #2b2721;
106
+ --ak-layer5: #35302a;
90
107
  --ak-bone: #2a2620;
91
108
  --ak-sheen: #35302a;
92
109
  --ak-success-hl: #2f4a2e;
@@ -114,3 +131,76 @@ html {
114
131
  --ak-info-subtle: #1e2c38;
115
132
  --ak-focus-ring: #4fa184;
116
133
  }
134
+
135
+ /* neutral palette:紙與墨換一套,語意色(danger / success / info)不換。
136
+ * 掛在 <html> 上:data-palette="neutral";亮暗照樣跟系統,data-theme 才鎖。 */
137
+ [data-palette="neutral"] {
138
+ --ak-bg: #ffffff;
139
+ --ak-surface: #f5f5f7;
140
+ --ak-surface-raised: #ffffff;
141
+ --ak-border: #e5e5ea;
142
+ --ak-border-strong: #c7c7cc;
143
+ --ak-text: #1d1d1f;
144
+ --ak-text-muted: #6e6e73;
145
+ --ak-text-faint: #86868b;
146
+ --ak-accent: #1d1d1f;
147
+ --ak-accent-text: #ffffff;
148
+ --ak-accent-subtle: #e8e8ed;
149
+ --ak-warning: #b25000;
150
+ --ak-focus-ring: #1d1d1f;
151
+ --ak-bone: #e6e6ea;
152
+ --ak-sheen: #f2f2f5;
153
+ --ak-layer1: #efeff2;
154
+ --ak-layer2: #ffffff;
155
+ --ak-layer3: #f2f2f5;
156
+ --ak-layer4: #e6e6ea;
157
+ --ak-layer5: #d9d9de;
158
+ }
159
+
160
+ @media (prefers-color-scheme: dark) {
161
+ [data-palette="neutral"]:not([data-theme="light"]) {
162
+ --ak-bg: #000000;
163
+ --ak-surface: #1c1c1e;
164
+ --ak-surface-raised: #2c2c2e;
165
+ --ak-border: #38383a;
166
+ --ak-border-strong: #48484a;
167
+ --ak-text: #f5f5f7;
168
+ --ak-text-muted: #98989d;
169
+ --ak-text-faint: #8e8e93;
170
+ --ak-accent: #f5f5f7;
171
+ --ak-accent-text: #000000;
172
+ --ak-accent-subtle: #2c2c2e;
173
+ --ak-warning: #ffb340;
174
+ --ak-focus-ring: #f5f5f7;
175
+ --ak-bone: #2c2c2e;
176
+ --ak-sheen: #3f3f42;
177
+ --ak-layer1: #000000;
178
+ --ak-layer2: #161618;
179
+ --ak-layer3: #242426;
180
+ --ak-layer4: #323234;
181
+ --ak-layer5: #3f3f42;
182
+ }
183
+ }
184
+
185
+ [data-palette="neutral"][data-theme="dark"] {
186
+ --ak-bg: #000000;
187
+ --ak-surface: #1c1c1e;
188
+ --ak-surface-raised: #2c2c2e;
189
+ --ak-border: #38383a;
190
+ --ak-border-strong: #48484a;
191
+ --ak-text: #f5f5f7;
192
+ --ak-text-muted: #98989d;
193
+ --ak-text-faint: #8e8e93;
194
+ --ak-accent: #f5f5f7;
195
+ --ak-accent-text: #000000;
196
+ --ak-accent-subtle: #2c2c2e;
197
+ --ak-warning: #ffb340;
198
+ --ak-focus-ring: #f5f5f7;
199
+ --ak-bone: #2c2c2e;
200
+ --ak-sheen: #3f3f42;
201
+ --ak-layer1: #000000;
202
+ --ak-layer2: #161618;
203
+ --ak-layer3: #242426;
204
+ --ak-layer4: #323234;
205
+ --ak-layer5: #3f3f42;
206
+ }
package/dist/tokens.stylex.d.ts CHANGED
@@ -24,6 +24,11 @@ export declare const color: stylex.VarGroup<Readonly<{
24
24
  sheen: string;
25
25
  successHl: string;
26
26
  dangerHl: string;
27
+ layer1: string;
28
+ layer2: string;
29
+ layer3: string;
30
+ layer4: string;
31
+ layer5: string;
27
32
  }>, symbol>;
28
33
  export declare const yarn: stylex.VarGroup<Readonly<{
29
34
  un: string;
package/dist/tokens.stylex.js CHANGED
@@ -28,6 +28,13 @@ export const color = stylex.defineVars({
28
28
  sheen: { default: "#F6F4EC", [DARK]: "#35302A" },
29
29
  successHl: { default: "#C6E0C6", [DARK]: "#2F4A2E" },
30
30
  dangerHl: { default: "#EFCEC3", [DARK]: "#573328" },
31
+ // 分層底色:rail → main → 訊息 → fold → 列,越深的一階數字越大。
32
+ // 面與面靠深淺分,不靠邊框;hover 升一階,對應表在 lib/layers.ts。
33
+ layer1: { default: "#EFECE3", [DARK]: "#0E0C09" },
34
+ layer2: { default: "#FAFAF6", [DARK]: "#181613" },
35
+ layer3: { default: "#F1EFE7", [DARK]: "#211E19" },
36
+ layer4: { default: "#E8E5DA", [DARK]: "#2B2721" },
37
+ layer5: { default: "#DEDACD", [DARK]: "#35302A" },
31
38
  });
32
39
  // 織體紗線階(TEXTURE-GUIDE §3.4):un 底紗、sh 縫隙陰影、y0–y4 面紗(深→淺)、hi 挑面亮紗、
33
40
  // shadow 是整塊布的落影(§3.3「實心感落地」,掛在元件的 CSS filter 上)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@anyknown/ui",
3
- "version": "0.6.0",
4
- "description": "AnyKnown design system — StyleX tokens, themes, and 36 components",
3
+ "version": "0.7.0",
4
+ "description": "AnyKnown design system — StyleX tokens, themes, and 38 components",
5
5
  "homepage": "https://ui.anyknown.com",
6
6
  "bugs": {
7
7
  "url": "https://github.com/anyknown-com/ui/issues"