@donkit-ai/design-system 1.3.10 → 1.3.11

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 (3) hide show
  1. package/dist/high-contrast.css +92 -0
  2. package/dist/light.css +79 -0
  3. package/package.json +8 -4
package/dist/high-contrast.css ADDED
@@ -0,0 +1,92 @@
1
+ /* Donkit DS — High Contrast theme
2
+ * Targets WCAG AAA (≥7:1 text contrast).
3
+ * Import AFTER tokens.css.
4
+ * Usage: <div data-theme="high-contrast">
5
+ * Auto-applied via @media (prefers-contrast: more) when no explicit theme is set. */
6
+
7
+ [data-theme="high-contrast"] {
8
+ /* === REQUIRED: surface === */
9
+ --color-surface-0: #000000;
10
+ --color-surface-1: #000000;
11
+ --color-surface-2: #0A0A0A;
12
+ --color-surface-3: #141414;
13
+
14
+ /* === REQUIRED: foreground — full white, no alpha reduction === */
15
+ --color-fg-primary: #FFFFFF;
16
+ --color-fg-secondary: #FFFFFF;
17
+ --color-fg-disabled: rgba(255, 255, 255, 0.55);
18
+
19
+ /* === REQUIRED: borders — high opacity for visible separation === */
20
+ --color-border-light: rgba(255, 255, 255, 0.50);
21
+ --color-border-default: rgba(255, 255, 255, 0.80);
22
+ --color-border-strong: #FFFFFF;
23
+ --color-border-focus: #FFFF00;
24
+
25
+ /* === REQUIRED: interactive overlays === */
26
+ --color-state-hover: rgba(255, 255, 255, 0.20);
27
+ --color-state-active: rgba(255, 255, 255, 0.30);
28
+ --color-state-selected: rgba(255, 255, 255, 0.25);
29
+
30
+ /* === REQUIRED: backdrop === */
31
+ --color-overlay: rgba(0, 0, 0, 0.90);
32
+
33
+ /* === OPTIONAL: accent — yellow on black for max contrast === */
34
+ --color-accent-default: #FFFF00;
35
+ --color-accent-hover: #FFFFFF;
36
+ --color-accent-fg: #000000;
37
+ --color-accent-hover-fg: #000000;
38
+
39
+ /* === OPTIONAL: status — saturated primaries === */
40
+ --color-status-info: #00FFFF;
41
+ --color-status-info-bg: rgba(0, 255, 255, 0.15);
42
+ --color-status-success: #00FF00;
43
+ --color-status-success-bg: rgba(0, 255, 0, 0.15);
44
+ --color-status-warning: #FFFF00;
45
+ --color-status-warning-bg: rgba(255, 255, 0, 0.15);
46
+ --color-status-error: #FF4040;
47
+ --color-status-error-bg: rgba(255, 64, 64, 0.15);
48
+
49
+ /* === OPTIONAL: shadows replaced with solid outlines === */
50
+ --shadow-1: 0 0 0 1px #FFFFFF;
51
+ --shadow-2: 0 0 0 2px #FFFFFF;
52
+ --shadow-3: 0 0 0 2px #FFFFFF;
53
+
54
+ /* === OPTIONAL: focus ring === */
55
+ --focus-ring-color: #FFFF00;
56
+ }
57
+
58
+ /* Auto-apply when OS requests high contrast and no explicit theme is set */
59
+ @media (prefers-contrast: more) {
60
+ :root:not([data-theme]) {
61
+ --color-surface-0: #000000;
62
+ --color-surface-1: #000000;
63
+ --color-surface-2: #0A0A0A;
64
+ --color-surface-3: #141414;
65
+
66
+ --color-fg-primary: #FFFFFF;
67
+ --color-fg-secondary: #FFFFFF;
68
+ --color-fg-disabled: rgba(255, 255, 255, 0.55);
69
+
70
+ --color-border-light: rgba(255, 255, 255, 0.50);
71
+ --color-border-default: rgba(255, 255, 255, 0.80);
72
+ --color-border-strong: #FFFFFF;
73
+ --color-border-focus: #FFFF00;
74
+
75
+ --color-state-hover: rgba(255, 255, 255, 0.20);
76
+ --color-state-active: rgba(255, 255, 255, 0.30);
77
+ --color-state-selected: rgba(255, 255, 255, 0.25);
78
+
79
+ --color-overlay: rgba(0, 0, 0, 0.90);
80
+
81
+ --color-accent-default: #FFFF00;
82
+ --color-accent-hover: #FFFFFF;
83
+ --color-accent-fg: #000000;
84
+ --color-accent-hover-fg: #000000;
85
+
86
+ --shadow-1: 0 0 0 1px #FFFFFF;
87
+ --shadow-2: 0 0 0 2px #FFFFFF;
88
+ --shadow-3: 0 0 0 2px #FFFFFF;
89
+
90
+ --focus-ring-color: #FFFF00;
91
+ }
92
+ }
package/dist/light.css ADDED
@@ -0,0 +1,79 @@
1
+ /* Donkit DS — Light theme
2
+ * Import AFTER tokens.css. Unlayered → naturally overrides @layer base.
3
+ * Usage: <div data-theme="light"> */
4
+
5
+ [data-theme="light"] {
6
+ /* === REQUIRED: surface === */
7
+ --color-surface-0: #F8F9FA;
8
+ --color-surface-1: #F2F2F2;
9
+ --color-surface-2: #E8E8E8;
10
+ --color-surface-3: #F8F9FA;
11
+
12
+ /* === REQUIRED: foreground === */
13
+ --color-fg-primary: rgba(14, 15, 17, 0.95);
14
+ --color-fg-secondary: rgba(14, 15, 17, 0.65);
15
+ --color-fg-disabled: rgba(14, 15, 17, 0.30);
16
+
17
+ /* === REQUIRED: interactive overlays (legacy fallback) === */
18
+ --color-state-hover: rgba(14, 15, 17, 0.05);
19
+ --color-state-active: rgba(14, 15, 17, 0.10);
20
+ --color-state-selected: rgba(14, 15, 17, 0.08);
21
+ --color-state-focus: rgba(14, 15, 17, 0.30);
22
+
23
+ /* === REQUIRED: borders === */
24
+ --color-border-light: rgba(14, 15, 17, 0.10);
25
+ --color-border-default: rgba(14, 15, 17, 0.20);
26
+ --color-border-strong: rgba(14, 15, 17, 0.40);
27
+ --color-border-focus: rgba(14, 15, 17, 0.50);
28
+
29
+ /* === REQUIRED: backdrop === */
30
+ --color-overlay: rgba(14, 15, 17, 0.60);
31
+
32
+ /* === OPTIONAL: shadows === */
33
+ --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.10);
34
+ --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.14);
35
+ --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.18);
36
+
37
+ /* === OPTIONAL: accent === */
38
+ --color-accent-hover: var(--color-red-dark);
39
+
40
+ /* === OPTIONAL: data palette (fg darkened for light bg) === */
41
+ --data-1-fg: #C73B3B;
42
+ --data-2-fg: #C2700F;
43
+ --data-3-fg: #8A6A00;
44
+ --data-4-fg: #0E8A5A;
45
+ --data-5-fg: #2563EB;
46
+ --data-6-fg: #7C3AED;
47
+ --data-7-fg: #BE3F8A;
48
+
49
+ /* === OPTIONAL: status === */
50
+ --color-status-info: var(--color-info-dark);
51
+ --color-status-info-bg: rgba(96, 165, 250, 0.15);
52
+ --color-status-success: var(--color-success-dark);
53
+ --color-status-success-bg: rgba(0, 200, 110, 0.15);
54
+ --color-status-warning: var(--color-warning-dark);
55
+ --color-status-warning-bg: rgba(255, 187, 0, 0.15);
56
+ --color-status-error: var(--color-error-dark);
57
+ --color-status-error-bg: rgba(255, 18, 0, 0.15);
58
+ }
59
+
60
+ /* F9: color-mix overlays for modern browsers */
61
+ @supports (background: color-mix(in srgb, red, blue)) {
62
+ [data-theme="light"] {
63
+ --color-state-hover: color-mix(in srgb, currentColor 5%, transparent);
64
+ --color-state-active: color-mix(in srgb, currentColor 10%, transparent);
65
+ --color-state-selected: color-mix(in srgb, currentColor 8%, transparent);
66
+ }
67
+ }
68
+
69
+ /* Edgy structural variant on light background */
70
+ [data-variant="edgy"][data-theme="light"] {
71
+ --color-accent-hover: var(--color-accent-2);
72
+ --color-accent-hover-fg: var(--color-accent-2-fg);
73
+ --field-border: var(--color-border-default);
74
+ --field-border-active: var(--color-border-strong);
75
+ --card-border: var(--color-border-light);
76
+ --shadow-1: 0 2px 8px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(14, 15, 17, 0.06);
77
+ --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(14, 15, 17, 0.08);
78
+ --shadow-3: 0 16px 48px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(14, 15, 17, 0.10);
79
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@donkit-ai/design-system",
3
- "version": "1.3.10",
3
+ "version": "1.3.11",
4
4
  "description": "Donkit Design System - minimal design tokens and React components",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs.js",
@@ -8,7 +8,9 @@
8
8
  "types": "./dist/index.d.ts",
9
9
  "sideEffects": [
10
10
  "*.css",
11
- "dist/tokens.css"
11
+ "dist/tokens.css",
12
+ "dist/light.css",
13
+ "dist/high-contrast.css"
12
14
  ],
13
15
  "exports": {
14
16
  ".": {
@@ -16,7 +18,9 @@
16
18
  "import": "./dist/index.es.js",
17
19
  "require": "./dist/index.cjs.js"
18
20
  },
19
- "./tokens.css": "./dist/tokens.css"
21
+ "./tokens.css": "./dist/tokens.css",
22
+ "./light.css": "./dist/light.css",
23
+ "./high-contrast.css": "./dist/high-contrast.css"
20
24
  },
21
25
  "files": [
22
26
  "dist",
@@ -24,7 +28,7 @@
24
28
  ],
25
29
  "scripts": {
26
30
  "dev": "vite",
27
- "build": "vite build && cp src/index.d.ts dist/index.d.ts",
31
+ "build": "vite build && cp src/index.d.ts dist/index.d.ts && cp src/styles/themes/light.css dist/light.css && cp src/styles/themes/high-contrast.css dist/high-contrast.css",
28
32
  "preview": "vite preview",
29
33
  "prepublishOnly": "npm run build"
30
34
  },