@1337exp/taoui 1.11.0 → 1.11.2
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.
- package/README.md +545 -545
- package/dist/index.cjs +79 -68
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +80 -69
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +3241 -3239
- package/package.json +61 -61
- package/src/styles/base.css +81 -81
- package/src/styles/date-popup.css +184 -184
- package/src/styles/index.css +9 -9
- package/src/styles/primitives.css +84 -84
- package/src/styles/semantic.css +82 -82
- package/src/styles/themes/light.css +61 -61
|
@@ -1,84 +1,84 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tao UI — Primitive tokens
|
|
3
|
-
*
|
|
4
|
-
* Сырые значения без смысловой привязки. Ничего отсюда не используется
|
|
5
|
-
* напрямую в компонентах — только через семантический слой (semantic.css).
|
|
6
|
-
* Пользователи библиотеки обычно НЕ трогают этот файл.
|
|
7
|
-
*/
|
|
8
|
-
:root {
|
|
9
|
-
/* ---------- Color ramps ---------- */
|
|
10
|
-
--tao-gray-0: #ffffff;
|
|
11
|
-
--tao-gray-50: #f5f5f5;
|
|
12
|
-
--tao-gray-100: #e0e0e0;
|
|
13
|
-
--tao-gray-200: #bfbfbf;
|
|
14
|
-
--tao-gray-300: #999999;
|
|
15
|
-
--tao-gray-400: #666666;
|
|
16
|
-
--tao-gray-500: #444444;
|
|
17
|
-
--tao-gray-600: #333333;
|
|
18
|
-
--tao-gray-700: #262626;
|
|
19
|
-
--tao-gray-800: #1f1f1f;
|
|
20
|
-
--tao-gray-900: #151515;
|
|
21
|
-
--tao-gray-950: #0d0d0d;
|
|
22
|
-
|
|
23
|
-
--tao-orange-300: #ffc04a;
|
|
24
|
-
--tao-orange-400: #ffb40b;
|
|
25
|
-
--tao-orange-500: #ff9500;
|
|
26
|
-
--tao-orange-600: #db8000;
|
|
27
|
-
|
|
28
|
-
--tao-red-400: #e35766;
|
|
29
|
-
--tao-red-500: #dc3545;
|
|
30
|
-
--tao-red-600: #c82333;
|
|
31
|
-
|
|
32
|
-
--tao-green-400: #3ac16e;
|
|
33
|
-
--tao-green-500: #2ea85c;
|
|
34
|
-
--tao-green-600: #24924e;
|
|
35
|
-
|
|
36
|
-
--tao-yellow-400: #e8c547;
|
|
37
|
-
--tao-yellow-500: #d4a017;
|
|
38
|
-
--tao-yellow-600: #b8860b;
|
|
39
|
-
|
|
40
|
-
--tao-blue-400: #6b9cff;
|
|
41
|
-
--tao-blue-500: #4c82f7;
|
|
42
|
-
--tao-blue-600: #3b6de0;
|
|
43
|
-
|
|
44
|
-
/* ---------- Spacing scale (4px base) ---------- */
|
|
45
|
-
--tao-space-1: 4px;
|
|
46
|
-
--tao-space-2: 8px;
|
|
47
|
-
--tao-space-3: 12px;
|
|
48
|
-
--tao-space-4: 16px;
|
|
49
|
-
--tao-space-5: 20px;
|
|
50
|
-
--tao-space-6: 24px;
|
|
51
|
-
--tao-space-8: 32px;
|
|
52
|
-
--tao-space-10: 40px;
|
|
53
|
-
|
|
54
|
-
/* ---------- Radius scale ---------- */
|
|
55
|
-
--tao-radius-sm: 4px;
|
|
56
|
-
--tao-radius-md: 8px;
|
|
57
|
-
--tao-radius-lg: 12px;
|
|
58
|
-
--tao-radius-full: 999px;
|
|
59
|
-
|
|
60
|
-
/* ---------- Font size scale ---------- */
|
|
61
|
-
--tao-font-size-xs: 12px;
|
|
62
|
-
--tao-font-size-sm: 13px;
|
|
63
|
-
--tao-font-size-md: 14px;
|
|
64
|
-
--tao-font-size-lg: 16px;
|
|
65
|
-
--tao-font-size-xl: 18px;
|
|
66
|
-
--tao-font-size-2xl: 24px;
|
|
67
|
-
--tao-font-size-3xl: 32px;
|
|
68
|
-
--tao-font-size-4xl: 36px;
|
|
69
|
-
|
|
70
|
-
/* ---------- Shadow scale (color-agnostic, opacity baked in) ---------- */
|
|
71
|
-
--tao-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
|
|
72
|
-
--tao-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
73
|
-
--tao-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
|
|
74
|
-
--tao-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
75
|
-
|
|
76
|
-
/* ---------- Motion ---------- */
|
|
77
|
-
--tao-duration-fast: 0.15s;
|
|
78
|
-
--tao-duration-base: 0.2s;
|
|
79
|
-
--tao-duration-slow: 0.3s;
|
|
80
|
-
--tao-ease-base: ease;
|
|
81
|
-
|
|
82
|
-
/* ---------- Font ---------- */
|
|
83
|
-
--tao-font-family-base: "Roboto", sans-serif;
|
|
84
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* Tao UI — Primitive tokens
|
|
3
|
+
*
|
|
4
|
+
* Сырые значения без смысловой привязки. Ничего отсюда не используется
|
|
5
|
+
* напрямую в компонентах — только через семантический слой (semantic.css).
|
|
6
|
+
* Пользователи библиотеки обычно НЕ трогают этот файл.
|
|
7
|
+
*/
|
|
8
|
+
:root {
|
|
9
|
+
/* ---------- Color ramps ---------- */
|
|
10
|
+
--tao-gray-0: #ffffff;
|
|
11
|
+
--tao-gray-50: #f5f5f5;
|
|
12
|
+
--tao-gray-100: #e0e0e0;
|
|
13
|
+
--tao-gray-200: #bfbfbf;
|
|
14
|
+
--tao-gray-300: #999999;
|
|
15
|
+
--tao-gray-400: #666666;
|
|
16
|
+
--tao-gray-500: #444444;
|
|
17
|
+
--tao-gray-600: #333333;
|
|
18
|
+
--tao-gray-700: #262626;
|
|
19
|
+
--tao-gray-800: #1f1f1f;
|
|
20
|
+
--tao-gray-900: #151515;
|
|
21
|
+
--tao-gray-950: #0d0d0d;
|
|
22
|
+
|
|
23
|
+
--tao-orange-300: #ffc04a;
|
|
24
|
+
--tao-orange-400: #ffb40b;
|
|
25
|
+
--tao-orange-500: #ff9500;
|
|
26
|
+
--tao-orange-600: #db8000;
|
|
27
|
+
|
|
28
|
+
--tao-red-400: #e35766;
|
|
29
|
+
--tao-red-500: #dc3545;
|
|
30
|
+
--tao-red-600: #c82333;
|
|
31
|
+
|
|
32
|
+
--tao-green-400: #3ac16e;
|
|
33
|
+
--tao-green-500: #2ea85c;
|
|
34
|
+
--tao-green-600: #24924e;
|
|
35
|
+
|
|
36
|
+
--tao-yellow-400: #e8c547;
|
|
37
|
+
--tao-yellow-500: #d4a017;
|
|
38
|
+
--tao-yellow-600: #b8860b;
|
|
39
|
+
|
|
40
|
+
--tao-blue-400: #6b9cff;
|
|
41
|
+
--tao-blue-500: #4c82f7;
|
|
42
|
+
--tao-blue-600: #3b6de0;
|
|
43
|
+
|
|
44
|
+
/* ---------- Spacing scale (4px base) ---------- */
|
|
45
|
+
--tao-space-1: 4px;
|
|
46
|
+
--tao-space-2: 8px;
|
|
47
|
+
--tao-space-3: 12px;
|
|
48
|
+
--tao-space-4: 16px;
|
|
49
|
+
--tao-space-5: 20px;
|
|
50
|
+
--tao-space-6: 24px;
|
|
51
|
+
--tao-space-8: 32px;
|
|
52
|
+
--tao-space-10: 40px;
|
|
53
|
+
|
|
54
|
+
/* ---------- Radius scale ---------- */
|
|
55
|
+
--tao-radius-sm: 4px;
|
|
56
|
+
--tao-radius-md: 8px;
|
|
57
|
+
--tao-radius-lg: 12px;
|
|
58
|
+
--tao-radius-full: 999px;
|
|
59
|
+
|
|
60
|
+
/* ---------- Font size scale ---------- */
|
|
61
|
+
--tao-font-size-xs: 12px;
|
|
62
|
+
--tao-font-size-sm: 13px;
|
|
63
|
+
--tao-font-size-md: 14px;
|
|
64
|
+
--tao-font-size-lg: 16px;
|
|
65
|
+
--tao-font-size-xl: 18px;
|
|
66
|
+
--tao-font-size-2xl: 24px;
|
|
67
|
+
--tao-font-size-3xl: 32px;
|
|
68
|
+
--tao-font-size-4xl: 36px;
|
|
69
|
+
|
|
70
|
+
/* ---------- Shadow scale (color-agnostic, opacity baked in) ---------- */
|
|
71
|
+
--tao-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.12);
|
|
72
|
+
--tao-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
73
|
+
--tao-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
|
|
74
|
+
--tao-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);
|
|
75
|
+
|
|
76
|
+
/* ---------- Motion ---------- */
|
|
77
|
+
--tao-duration-fast: 0.15s;
|
|
78
|
+
--tao-duration-base: 0.2s;
|
|
79
|
+
--tao-duration-slow: 0.3s;
|
|
80
|
+
--tao-ease-base: ease;
|
|
81
|
+
|
|
82
|
+
/* ---------- Font ---------- */
|
|
83
|
+
--tao-font-family-base: "Roboto", sans-serif;
|
|
84
|
+
}
|
package/src/styles/semantic.css
CHANGED
|
@@ -1,82 +1,82 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tao UI — Semantic tokens (default / dark theme)
|
|
3
|
-
*
|
|
4
|
-
* Это и есть публичный API темизации библиотеки. Компоненты используют
|
|
5
|
-
* ТОЛЬКО эти переменные, никогда — primitives напрямую.
|
|
6
|
-
*
|
|
7
|
-
* Чтобы сделать свою тему — переопредели этот набор в своём CSS
|
|
8
|
-
* (глобально, или через [data-tao-theme="имя"], см. themes/*.css).
|
|
9
|
-
*/
|
|
10
|
-
:root,
|
|
11
|
-
[data-tao-theme="dark"] {
|
|
12
|
-
color-scheme: dark;
|
|
13
|
-
|
|
14
|
-
/* ---------- Brand / accent ---------- */
|
|
15
|
-
--tao-color-accent: var(--tao-orange-300);
|
|
16
|
-
--tao-color-accent-hover: var(--tao-orange-400);
|
|
17
|
-
--tao-color-accent-active: var(--tao-orange-500);
|
|
18
|
-
--tao-color-accent-subtle: color-mix(in srgb, var(--tao-color-accent) 8%, transparent);
|
|
19
|
-
--tao-color-accent-subtle-hover: color-mix(in srgb, var(--tao-color-accent) 14%, transparent);
|
|
20
|
-
--tao-color-on-accent: var(--tao-gray-950); /* текст поверх accent-фона */
|
|
21
|
-
--tao-color-text-on-accent: var(--tao-color-on-accent);
|
|
22
|
-
--tao-color-selection: var(--tao-color-accent);
|
|
23
|
-
--tao-color-selection-text: var(--tao-color-on-accent);
|
|
24
|
-
|
|
25
|
-
/* ---------- Surfaces ---------- */
|
|
26
|
-
--tao-color-bg: var(--tao-gray-900);
|
|
27
|
-
--tao-color-surface: var(--tao-gray-900);
|
|
28
|
-
--tao-color-surface-raised: var(--tao-gray-800);
|
|
29
|
-
--tao-color-surface-sunken: color-mix(in srgb, var(--tao-gray-600) 20%, transparent);
|
|
30
|
-
--tao-color-surface-hover: var(--tao-gray-700);
|
|
31
|
-
|
|
32
|
-
/* ---------- Borders ---------- */
|
|
33
|
-
--tao-color-border: color-mix(in srgb, var(--tao-gray-600) 40%, transparent);
|
|
34
|
-
--tao-color-border-strong: var(--tao-gray-500);
|
|
35
|
-
|
|
36
|
-
/* ---------- Text ---------- */
|
|
37
|
-
--tao-color-text: var(--tao-gray-200);
|
|
38
|
-
--tao-color-text-strong: var(--tao-gray-0);
|
|
39
|
-
--tao-color-text-subtle: var(--tao-gray-300); /* idle-контролы: segmented, tabs. Подписи остаются muted */
|
|
40
|
-
--tao-color-text-muted: var(--tao-gray-400);
|
|
41
|
-
--tao-color-text-disabled: var(--tao-gray-300);
|
|
42
|
-
|
|
43
|
-
/* ---------- Links ---------- */
|
|
44
|
-
--tao-color-link: var(--tao-orange-300);
|
|
45
|
-
--tao-color-link-hover: var(--tao-orange-500);
|
|
46
|
-
--tao-color-link-shadow: 0 0 1px color-mix(in srgb, var(--tao-orange-300) 10%, transparent),
|
|
47
|
-
0 0 6px color-mix(in srgb, var(--tao-orange-300) 60%, transparent);
|
|
48
|
-
|
|
49
|
-
/* ---------- Status ---------- */
|
|
50
|
-
--tao-color-danger: var(--tao-red-500);
|
|
51
|
-
--tao-color-danger-hover: var(--tao-red-600);
|
|
52
|
-
--tao-color-danger-subtle: color-mix(in srgb, var(--tao-red-500) 15%, transparent);
|
|
53
|
-
--tao-color-success: var(--tao-green-500);
|
|
54
|
-
--tao-color-success-hover: var(--tao-green-600);
|
|
55
|
-
--tao-color-success-subtle: color-mix(in srgb, var(--tao-color-success) 15%, transparent);
|
|
56
|
-
--tao-color-warning: var(--tao-yellow-500);
|
|
57
|
-
--tao-color-warning-hover: var(--tao-yellow-600);
|
|
58
|
-
--tao-color-warning-subtle: color-mix(in srgb, var(--tao-color-warning) 15%, transparent);
|
|
59
|
-
--tao-color-info: var(--tao-blue-400);
|
|
60
|
-
--tao-color-info-hover: var(--tao-blue-500);
|
|
61
|
-
--tao-color-info-subtle: color-mix(in srgb, var(--tao-color-info) 15%, transparent);
|
|
62
|
-
|
|
63
|
-
/* ---------- Form controls ---------- */
|
|
64
|
-
--tao-color-input-bg: var(--tao-color-surface-sunken);
|
|
65
|
-
--tao-color-input-text: var(--tao-gray-200);
|
|
66
|
-
--tao-color-input-placeholder: var(--tao-gray-300);
|
|
67
|
-
--tao-color-input-disabled-bg: color-mix(in srgb, var(--tao-gray-600) 10%, transparent);
|
|
68
|
-
--tao-color-input-disabled-text: var(--tao-gray-300);
|
|
69
|
-
|
|
70
|
-
/* ---------- Overlay ---------- */
|
|
71
|
-
--tao-color-overlay: rgba(0, 0, 0, 0.7);
|
|
72
|
-
|
|
73
|
-
/* ---------- Radii / spacing / shadows (aliasable per-theme too) ---------- */
|
|
74
|
-
--tao-radius-control: var(--tao-radius-sm);
|
|
75
|
-
--tao-radius-panel: var(--tao-radius-md);
|
|
76
|
-
--tao-shadow-panel: var(--tao-shadow-md);
|
|
77
|
-
--tao-shadow-overlay: var(--tao-shadow-xl);
|
|
78
|
-
|
|
79
|
-
/* ---------- Typography / motion passthrough ---------- */
|
|
80
|
-
--tao-font-family: var(--tao-font-family-base);
|
|
81
|
-
--tao-transition-base: all var(--tao-duration-base) var(--tao-ease-base);
|
|
82
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* Tao UI — Semantic tokens (default / dark theme)
|
|
3
|
+
*
|
|
4
|
+
* Это и есть публичный API темизации библиотеки. Компоненты используют
|
|
5
|
+
* ТОЛЬКО эти переменные, никогда — primitives напрямую.
|
|
6
|
+
*
|
|
7
|
+
* Чтобы сделать свою тему — переопредели этот набор в своём CSS
|
|
8
|
+
* (глобально, или через [data-tao-theme="имя"], см. themes/*.css).
|
|
9
|
+
*/
|
|
10
|
+
:root,
|
|
11
|
+
[data-tao-theme="dark"] {
|
|
12
|
+
color-scheme: dark;
|
|
13
|
+
|
|
14
|
+
/* ---------- Brand / accent ---------- */
|
|
15
|
+
--tao-color-accent: var(--tao-orange-300);
|
|
16
|
+
--tao-color-accent-hover: var(--tao-orange-400);
|
|
17
|
+
--tao-color-accent-active: var(--tao-orange-500);
|
|
18
|
+
--tao-color-accent-subtle: color-mix(in srgb, var(--tao-color-accent) 8%, transparent);
|
|
19
|
+
--tao-color-accent-subtle-hover: color-mix(in srgb, var(--tao-color-accent) 14%, transparent);
|
|
20
|
+
--tao-color-on-accent: var(--tao-gray-950); /* текст поверх accent-фона */
|
|
21
|
+
--tao-color-text-on-accent: var(--tao-color-on-accent);
|
|
22
|
+
--tao-color-selection: var(--tao-color-accent);
|
|
23
|
+
--tao-color-selection-text: var(--tao-color-on-accent);
|
|
24
|
+
|
|
25
|
+
/* ---------- Surfaces ---------- */
|
|
26
|
+
--tao-color-bg: var(--tao-gray-900);
|
|
27
|
+
--tao-color-surface: var(--tao-gray-900);
|
|
28
|
+
--tao-color-surface-raised: var(--tao-gray-800);
|
|
29
|
+
--tao-color-surface-sunken: color-mix(in srgb, var(--tao-gray-600) 20%, transparent);
|
|
30
|
+
--tao-color-surface-hover: var(--tao-gray-700);
|
|
31
|
+
|
|
32
|
+
/* ---------- Borders ---------- */
|
|
33
|
+
--tao-color-border: color-mix(in srgb, var(--tao-gray-600) 40%, transparent);
|
|
34
|
+
--tao-color-border-strong: var(--tao-gray-500);
|
|
35
|
+
|
|
36
|
+
/* ---------- Text ---------- */
|
|
37
|
+
--tao-color-text: var(--tao-gray-200);
|
|
38
|
+
--tao-color-text-strong: var(--tao-gray-0);
|
|
39
|
+
--tao-color-text-subtle: var(--tao-gray-300); /* idle-контролы: segmented, tabs. Подписи остаются muted */
|
|
40
|
+
--tao-color-text-muted: var(--tao-gray-400);
|
|
41
|
+
--tao-color-text-disabled: var(--tao-gray-300);
|
|
42
|
+
|
|
43
|
+
/* ---------- Links ---------- */
|
|
44
|
+
--tao-color-link: var(--tao-orange-300);
|
|
45
|
+
--tao-color-link-hover: var(--tao-orange-500);
|
|
46
|
+
--tao-color-link-shadow: 0 0 1px color-mix(in srgb, var(--tao-orange-300) 10%, transparent),
|
|
47
|
+
0 0 6px color-mix(in srgb, var(--tao-orange-300) 60%, transparent);
|
|
48
|
+
|
|
49
|
+
/* ---------- Status ---------- */
|
|
50
|
+
--tao-color-danger: var(--tao-red-500);
|
|
51
|
+
--tao-color-danger-hover: var(--tao-red-600);
|
|
52
|
+
--tao-color-danger-subtle: color-mix(in srgb, var(--tao-red-500) 15%, transparent);
|
|
53
|
+
--tao-color-success: var(--tao-green-500);
|
|
54
|
+
--tao-color-success-hover: var(--tao-green-600);
|
|
55
|
+
--tao-color-success-subtle: color-mix(in srgb, var(--tao-color-success) 15%, transparent);
|
|
56
|
+
--tao-color-warning: var(--tao-yellow-500);
|
|
57
|
+
--tao-color-warning-hover: var(--tao-yellow-600);
|
|
58
|
+
--tao-color-warning-subtle: color-mix(in srgb, var(--tao-color-warning) 15%, transparent);
|
|
59
|
+
--tao-color-info: var(--tao-blue-400);
|
|
60
|
+
--tao-color-info-hover: var(--tao-blue-500);
|
|
61
|
+
--tao-color-info-subtle: color-mix(in srgb, var(--tao-color-info) 15%, transparent);
|
|
62
|
+
|
|
63
|
+
/* ---------- Form controls ---------- */
|
|
64
|
+
--tao-color-input-bg: var(--tao-color-surface-sunken);
|
|
65
|
+
--tao-color-input-text: var(--tao-gray-200);
|
|
66
|
+
--tao-color-input-placeholder: var(--tao-gray-300);
|
|
67
|
+
--tao-color-input-disabled-bg: color-mix(in srgb, var(--tao-gray-600) 10%, transparent);
|
|
68
|
+
--tao-color-input-disabled-text: var(--tao-gray-300);
|
|
69
|
+
|
|
70
|
+
/* ---------- Overlay ---------- */
|
|
71
|
+
--tao-color-overlay: rgba(0, 0, 0, 0.7);
|
|
72
|
+
|
|
73
|
+
/* ---------- Radii / spacing / shadows (aliasable per-theme too) ---------- */
|
|
74
|
+
--tao-radius-control: var(--tao-radius-sm);
|
|
75
|
+
--tao-radius-panel: var(--tao-radius-md);
|
|
76
|
+
--tao-shadow-panel: var(--tao-shadow-md);
|
|
77
|
+
--tao-shadow-overlay: var(--tao-shadow-xl);
|
|
78
|
+
|
|
79
|
+
/* ---------- Typography / motion passthrough ---------- */
|
|
80
|
+
--tao-font-family: var(--tao-font-family-base);
|
|
81
|
+
--tao-transition-base: all var(--tao-duration-base) var(--tao-ease-base);
|
|
82
|
+
}
|
|
@@ -1,61 +1,61 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Tao UI — Light theme
|
|
3
|
-
*
|
|
4
|
-
* Пример того, как выглядит альтернативная тема: переопределяются
|
|
5
|
-
* ТОЛЬКО семантические токены из semantic.css, ничего в компонентах
|
|
6
|
-
* менять не нужно.
|
|
7
|
-
*
|
|
8
|
-
* Подключение: <html data-tao-theme="light">
|
|
9
|
-
*/
|
|
10
|
-
[data-tao-theme="light"] {
|
|
11
|
-
color-scheme: light;
|
|
12
|
-
|
|
13
|
-
--tao-color-accent: var(--tao-orange-500);
|
|
14
|
-
--tao-color-accent-hover: var(--tao-orange-600);
|
|
15
|
-
--tao-color-accent-active: var(--tao-orange-600);
|
|
16
|
-
--tao-color-accent-subtle: color-mix(in srgb, var(--tao-color-accent) 10%, transparent);
|
|
17
|
-
--tao-color-accent-subtle-hover: color-mix(in srgb, var(--tao-color-accent) 16%, transparent);
|
|
18
|
-
--tao-color-on-accent: var(--tao-gray-0);
|
|
19
|
-
--tao-color-selection: var(--tao-color-accent);
|
|
20
|
-
--tao-color-selection-text: var(--tao-color-on-accent);
|
|
21
|
-
|
|
22
|
-
--tao-color-bg: var(--tao-gray-0);
|
|
23
|
-
--tao-color-surface: var(--tao-gray-0);
|
|
24
|
-
--tao-color-surface-raised: var(--tao-gray-50);
|
|
25
|
-
--tao-color-surface-sunken: var(--tao-gray-50);
|
|
26
|
-
--tao-color-surface-hover: var(--tao-gray-100);
|
|
27
|
-
|
|
28
|
-
--tao-color-border: var(--tao-gray-100);
|
|
29
|
-
--tao-color-border-strong: var(--tao-gray-200);
|
|
30
|
-
|
|
31
|
-
--tao-color-text: var(--tao-gray-700);
|
|
32
|
-
--tao-color-text-strong: var(--tao-gray-950);
|
|
33
|
-
--tao-color-text-subtle: var(--tao-gray-400);
|
|
34
|
-
--tao-color-text-muted: var(--tao-gray-400);
|
|
35
|
-
--tao-color-text-on-accent: var(--tao-color-on-accent);
|
|
36
|
-
--tao-color-text-disabled: var(--tao-gray-300);
|
|
37
|
-
|
|
38
|
-
--tao-color-link: var(--tao-orange-600);
|
|
39
|
-
--tao-color-link-hover: var(--tao-orange-500);
|
|
40
|
-
|
|
41
|
-
--tao-color-danger: var(--tao-red-500);
|
|
42
|
-
--tao-color-danger-hover: var(--tao-red-600);
|
|
43
|
-
--tao-color-danger-subtle: color-mix(in srgb, var(--tao-red-500) 10%, transparent);
|
|
44
|
-
--tao-color-success: var(--tao-green-500);
|
|
45
|
-
--tao-color-success-hover: var(--tao-green-600);
|
|
46
|
-
--tao-color-success-subtle: color-mix(in srgb, var(--tao-color-success) 10%, transparent);
|
|
47
|
-
--tao-color-warning: var(--tao-yellow-600);
|
|
48
|
-
--tao-color-warning-hover: var(--tao-yellow-500);
|
|
49
|
-
--tao-color-warning-subtle: color-mix(in srgb, var(--tao-color-warning) 12%, transparent);
|
|
50
|
-
--tao-color-info: var(--tao-blue-500);
|
|
51
|
-
--tao-color-info-hover: var(--tao-blue-600);
|
|
52
|
-
--tao-color-info-subtle: color-mix(in srgb, var(--tao-color-info) 12%, transparent);
|
|
53
|
-
|
|
54
|
-
--tao-color-input-bg: var(--tao-gray-0);
|
|
55
|
-
--tao-color-input-text: var(--tao-gray-950);
|
|
56
|
-
--tao-color-input-placeholder: var(--tao-gray-300);
|
|
57
|
-
--tao-color-input-disabled-bg: var(--tao-gray-50);
|
|
58
|
-
--tao-color-input-disabled-text: var(--tao-gray-300);
|
|
59
|
-
|
|
60
|
-
--tao-color-overlay: rgba(0, 0, 0, 0.4);
|
|
61
|
-
}
|
|
1
|
+
/**
|
|
2
|
+
* Tao UI — Light theme
|
|
3
|
+
*
|
|
4
|
+
* Пример того, как выглядит альтернативная тема: переопределяются
|
|
5
|
+
* ТОЛЬКО семантические токены из semantic.css, ничего в компонентах
|
|
6
|
+
* менять не нужно.
|
|
7
|
+
*
|
|
8
|
+
* Подключение: <html data-tao-theme="light">
|
|
9
|
+
*/
|
|
10
|
+
[data-tao-theme="light"] {
|
|
11
|
+
color-scheme: light;
|
|
12
|
+
|
|
13
|
+
--tao-color-accent: var(--tao-orange-500);
|
|
14
|
+
--tao-color-accent-hover: var(--tao-orange-600);
|
|
15
|
+
--tao-color-accent-active: var(--tao-orange-600);
|
|
16
|
+
--tao-color-accent-subtle: color-mix(in srgb, var(--tao-color-accent) 10%, transparent);
|
|
17
|
+
--tao-color-accent-subtle-hover: color-mix(in srgb, var(--tao-color-accent) 16%, transparent);
|
|
18
|
+
--tao-color-on-accent: var(--tao-gray-0);
|
|
19
|
+
--tao-color-selection: var(--tao-color-accent);
|
|
20
|
+
--tao-color-selection-text: var(--tao-color-on-accent);
|
|
21
|
+
|
|
22
|
+
--tao-color-bg: var(--tao-gray-0);
|
|
23
|
+
--tao-color-surface: var(--tao-gray-0);
|
|
24
|
+
--tao-color-surface-raised: var(--tao-gray-50);
|
|
25
|
+
--tao-color-surface-sunken: var(--tao-gray-50);
|
|
26
|
+
--tao-color-surface-hover: var(--tao-gray-100);
|
|
27
|
+
|
|
28
|
+
--tao-color-border: var(--tao-gray-100);
|
|
29
|
+
--tao-color-border-strong: var(--tao-gray-200);
|
|
30
|
+
|
|
31
|
+
--tao-color-text: var(--tao-gray-700);
|
|
32
|
+
--tao-color-text-strong: var(--tao-gray-950);
|
|
33
|
+
--tao-color-text-subtle: var(--tao-gray-400);
|
|
34
|
+
--tao-color-text-muted: var(--tao-gray-400);
|
|
35
|
+
--tao-color-text-on-accent: var(--tao-color-on-accent);
|
|
36
|
+
--tao-color-text-disabled: var(--tao-gray-300);
|
|
37
|
+
|
|
38
|
+
--tao-color-link: var(--tao-orange-600);
|
|
39
|
+
--tao-color-link-hover: var(--tao-orange-500);
|
|
40
|
+
|
|
41
|
+
--tao-color-danger: var(--tao-red-500);
|
|
42
|
+
--tao-color-danger-hover: var(--tao-red-600);
|
|
43
|
+
--tao-color-danger-subtle: color-mix(in srgb, var(--tao-red-500) 10%, transparent);
|
|
44
|
+
--tao-color-success: var(--tao-green-500);
|
|
45
|
+
--tao-color-success-hover: var(--tao-green-600);
|
|
46
|
+
--tao-color-success-subtle: color-mix(in srgb, var(--tao-color-success) 10%, transparent);
|
|
47
|
+
--tao-color-warning: var(--tao-yellow-600);
|
|
48
|
+
--tao-color-warning-hover: var(--tao-yellow-500);
|
|
49
|
+
--tao-color-warning-subtle: color-mix(in srgb, var(--tao-color-warning) 12%, transparent);
|
|
50
|
+
--tao-color-info: var(--tao-blue-500);
|
|
51
|
+
--tao-color-info-hover: var(--tao-blue-600);
|
|
52
|
+
--tao-color-info-subtle: color-mix(in srgb, var(--tao-color-info) 12%, transparent);
|
|
53
|
+
|
|
54
|
+
--tao-color-input-bg: var(--tao-gray-0);
|
|
55
|
+
--tao-color-input-text: var(--tao-gray-950);
|
|
56
|
+
--tao-color-input-placeholder: var(--tao-gray-300);
|
|
57
|
+
--tao-color-input-disabled-bg: var(--tao-gray-50);
|
|
58
|
+
--tao-color-input-disabled-text: var(--tao-gray-300);
|
|
59
|
+
|
|
60
|
+
--tao-color-overlay: rgba(0, 0, 0, 0.4);
|
|
61
|
+
}
|