@agentatom/design-system 1.4.78 → 1.4.80

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 (7) hide show
  1. package/README.md +2 -2
  2. package/dist/index.cjs.js +4 -4
  3. package/dist/index.d.ts +72 -2
  4. package/dist/index.es.js +1698 -1607
  5. package/dist/light.css +100 -2
  6. package/dist/tokens.css +24 -8
  7. package/package.json +1 -1
package/dist/light.css CHANGED
@@ -1,2 +1,100 @@
1
- /* Atom Design System — light theme not shipped yet.
2
- * File kept so package exports stay API-compatible with the shared surface. */
1
+ /* Atom Design System — Light theme
2
+ *
3
+ * Import AFTER tokens.css (+ brand dark defaults in package build).
4
+ * Unlayered [data-theme="light"] overrides :root brand + @layer base.
5
+ *
6
+ * Palette: Snow page / warm neutrals + Signal accent (#3349F5).
7
+ * Contrast targets (WCAG AA, body text ≥ 4.5:1 on surface-0 #FFFAFA):
8
+ * fg-primary ≈ 16.7:1 · fg-secondary ≈ 5.9:1 · Signal text 5.95:1
9
+ * snow on Signal button 5.95:1 · status-info/error ≥ 4.5:1
10
+ * success/warning tuned darker than dark-theme brights for light surfaces
11
+ */
12
+
13
+ [data-theme="light"] {
14
+ /* === Surfaces (Snow scale, lightest → raised) === */
15
+ --color-surface-0: #FFFAFA; /* page — snow */
16
+ --color-surface-1: #F2F0F0; /* panel / nav / card */
17
+ --color-surface-2: #E8E6E6; /* input / nested */
18
+ --color-surface-3: #FFFFFF; /* popover / dropdown */
19
+
20
+ --color-white: #FFFAFA;
21
+ --color-black: #0E0F11;
22
+
23
+ /* === Foreground (graphite ink on snow) === */
24
+ --color-fg-primary: rgba(14, 15, 17, 0.95); /* ~16.7:1 */
25
+ --color-fg-secondary: rgba(14, 15, 17, 0.65); /* ~5.9:1 — silence #929091 fails AA on light */
26
+ --color-fg-disabled: rgba(14, 15, 17, 0.38);
27
+
28
+ /* === Interactive overlays (legacy rgba) === */
29
+ --color-state-hover: rgba(14, 15, 17, 0.05);
30
+ --color-state-active: rgba(14, 15, 17, 0.10);
31
+ --color-state-selected: rgba(14, 15, 17, 0.08);
32
+ /* Focus uses Signal wash — brand-visible on light chrome */
33
+ --color-state-focus: rgba(51, 73, 245, 0.35);
34
+ --focus-ring-color: var(--color-state-focus);
35
+
36
+ /* === Borders === */
37
+ --color-border-light: rgba(14, 15, 17, 0.10);
38
+ --color-border-default: rgba(14, 15, 17, 0.18);
39
+ --color-border-strong: rgba(14, 15, 17, 0.38);
40
+ --color-border-focus: rgba(51, 73, 245, 0.55);
41
+
42
+ /* Card / table — match default border (stronger than light hairline) */
43
+ --card-border: rgba(14, 15, 17, 0.16);
44
+ --table-wrap-border: rgba(14, 15, 17, 0.16);
45
+ --table-row-border: rgba(14, 15, 17, 0.12);
46
+
47
+ /* === Backdrop === */
48
+ --color-overlay: rgba(14, 15, 17, 0.55);
49
+
50
+ /* Logo on snow */
51
+ --logo-fg: var(--logo-fg-on-light);
52
+
53
+ /* === Shadows (softer than dark) === */
54
+ --shadow-1: 0 2px 8px rgba(14, 15, 17, 0.08), 0 0 0 1px rgba(14, 15, 17, 0.04);
55
+ --shadow-2: 0 8px 24px rgba(14, 15, 17, 0.12), 0 0 0 1px rgba(14, 15, 17, 0.06);
56
+ --shadow-3: 0 16px 48px rgba(14, 15, 17, 0.16), 0 0 0 1px rgba(14, 15, 17, 0.08);
57
+
58
+ /* === Accent = Signal (darken hover on light surfaces) === */
59
+ --color-accent-default: #3349F5; /* 5.95:1 as text on snow */
60
+ --color-accent-hover: #2436D4; /* darker press/hover — 7.95:1 */
61
+ --color-accent-fg: #FFFAFA; /* 5.95:1 on Signal fill */
62
+ --color-accent-hover-fg: #FFFAFA;
63
+ --color-accent-bg: rgba(51, 73, 245, 0.10);
64
+
65
+ /* === Status (darker on light for body-text AA where possible) === */
66
+ --color-status-info: #1D4ED8; /* ~6.5:1 */
67
+ --color-status-info-bg: rgba(29, 78, 216, 0.10);
68
+ --color-status-success: #047857; /* ~5.3:1 */
69
+ --color-status-success-bg: rgba(4, 120, 87, 0.10);
70
+ --color-status-warning: #B45309; /* ~4.9:1 */
71
+ --color-status-warning-bg: rgba(180, 83, 9, 0.12);
72
+ --color-status-error: #DC2626; /* ~4.7:1 */
73
+ --color-status-error-bg: rgba(220, 38, 38, 0.10);
74
+
75
+ /* === Data palette (readable on light) === */
76
+ --data-1-fg: #C73B3B;
77
+ --data-2-fg: #C2700F;
78
+ --data-3-fg: #8A6A00;
79
+ --data-4-fg: #047857;
80
+ --data-5-fg: #1D4ED8;
81
+ --data-6-fg: #7C3AED;
82
+ --data-7-fg: #BE3F8A;
83
+
84
+ --data-1-bg: rgba(199, 59, 59, 0.12);
85
+ --data-2-bg: rgba(194, 112, 15, 0.12);
86
+ --data-3-bg: rgba(138, 106, 0, 0.12);
87
+ --data-4-bg: rgba(4, 120, 87, 0.12);
88
+ --data-5-bg: rgba(29, 78, 216, 0.12);
89
+ --data-6-bg: rgba(124, 58, 237, 0.12);
90
+ --data-7-bg: rgba(190, 63, 138, 0.12);
91
+ }
92
+
93
+ /* color-mix overlays for modern browsers */
94
+ @supports (background: color-mix(in srgb, red, blue)) {
95
+ [data-theme="light"] {
96
+ --color-state-hover: color-mix(in srgb, currentColor 5%, transparent);
97
+ --color-state-active: color-mix(in srgb, currentColor 10%, transparent);
98
+ --color-state-selected: color-mix(in srgb, currentColor 8%, transparent);
99
+ }
100
+ }