@holyer-lib/styles 0.0.6 → 0.0.7

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/CHANGELOG.md +6 -0
  2. package/package.json +1 -1
  3. package/theme.css +206 -181
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @holyer-lib/styles
2
2
 
3
+ ## 0.0.7
4
+
5
+ ### Patch Changes
6
+
7
+ - 6bab85d: refactor: title 组件重构、styles 包同步 tdesign 样式、ui 与 utils eslint fix
8
+
3
9
  ## 0.0.6
4
10
 
5
11
  ### Patch Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@holyer-lib/styles",
3
- "version": "0.0.6",
3
+ "version": "0.0.7",
4
4
  "description": "",
5
5
  "main": "index.less",
6
6
  "keywords": [],
package/theme.css CHANGED
@@ -1,197 +1,228 @@
1
1
  :root, :root[theme-mode="light"] {
2
- --td-brand-color-1: #eff3ff;
3
- --td-brand-color-2: #d5e3ff;
4
- --td-brand-color-3: #accaff;
5
- --td-brand-color-4: #7caeff;
6
- --td-brand-color-5: #5895f1;
7
- --td-brand-color-6: #3577d1;
8
- --td-brand-color-7: #045db6;
9
- --td-brand-color-8: #00458e;
10
- --td-brand-color-9: #003067;
11
- --td-brand-color-10: #001f47;
12
- --td-brand-color-light: var(--td-brand-color-1);
2
+ --td-brand-color-1: #f2f3ff;
3
+ --td-brand-color-2: #d9e1ff;
4
+ --td-brand-color-3: #b5c7ff;
5
+ --td-brand-color-4: #8eabff;
6
+ --td-brand-color-5: #618dff;
7
+ --td-brand-color-6: #366ef4;
8
+ --td-brand-color-7: #0052d9;
9
+ --td-brand-color-8: #003cab;
10
+ --td-brand-color-9: #002a7c;
11
+ --td-brand-color-10: #001a57;
12
+ --td-warning-color-1: #fff1e9;
13
+ --td-warning-color-2: #ffd9c2;
14
+ --td-warning-color-3: #ffb98c;
15
+ --td-warning-color-4: #fa9550;
16
+ --td-warning-color-5: #e37318;
17
+ --td-warning-color-6: #be5a00;
18
+ --td-warning-color-7: #954500;
19
+ --td-warning-color-8: #713300;
20
+ --td-warning-color-9: #532300;
21
+ --td-warning-color-10: #3b1700;
22
+ --td-error-color-1: #fff0ed;
23
+ --td-error-color-2: #ffd8d2;
24
+ --td-error-color-3: #ffb9b0;
25
+ --td-error-color-4: #ff9285;
26
+ --td-error-color-5: #f6685d;
27
+ --td-error-color-6: #d54941;
28
+ --td-error-color-7: #ad352f;
29
+ --td-error-color-8: #881f1c;
30
+ --td-error-color-9: #68070a;
31
+ --td-error-color-10: #490002;
32
+ --td-success-color-1: #e3f9e9;
33
+ --td-success-color-2: #c6f3d7;
34
+ --td-success-color-3: #92dab2;
35
+ --td-success-color-4: #56c08d;
36
+ --td-success-color-5: #2ba471;
37
+ --td-success-color-6: #008858;
38
+ --td-success-color-7: #006c45;
39
+ --td-success-color-8: #005334;
40
+ --td-success-color-9: #003b23;
41
+ --td-success-color-10: #002515;
42
+ --td-gray-color-1: #f6f6f6;
43
+ --td-gray-color-2: #eeeceb;
44
+ --td-gray-color-3: #dddbdb;
45
+ --td-gray-color-4: #cac9c9;
46
+ --td-gray-color-5: #b6b6b6;
47
+ --td-gray-color-6: #a2a2a2;
48
+ --td-gray-color-7: #8f8f8f;
49
+ --td-gray-color-8: #7b7c7c;
50
+ --td-gray-color-9: #6a6b6b;
51
+ --td-gray-color-10: #585a5a;
52
+ --td-gray-color-11: #494a4a;
53
+ --td-gray-color-12: #3a3b3b;
54
+ --td-gray-color-13: #2c2e2e;
55
+ --td-gray-color-14: #202222;
56
+ --td-font-white-1: #fff;
57
+ --td-font-white-2: rgba(255, 255, 255, .55);
58
+ --td-font-white-3: rgba(255, 255, 255, .35);
59
+ --td-font-white-4: rgba(255, 255, 255, .22);
60
+ --td-font-gray-1: rgba(0, 0, 0, .9);
61
+ --td-font-gray-2: rgba(0, 0, 0, .6);
62
+ --td-font-gray-3: rgba(0, 0, 0, .4);
63
+ --td-font-gray-4: rgba(0, 0, 0, .26);
64
+ --td-brand-color: var(--td-brand-color-7);
65
+ --td-warning-color: var(--td-warning-color-5);
66
+ --td-error-color: var(--td-error-color-6);
67
+ --td-success-color: var(--td-success-color-5);
68
+ --td-brand-color-hover: var(--td-brand-color-6);
13
69
  --td-brand-color-focus: var(--td-brand-color-2);
70
+ --td-brand-color-active: var(--td-brand-color-8);
14
71
  --td-brand-color-disabled: var(--td-brand-color-3);
15
- --td-brand-color-hover: var(--td-brand-color-4);
16
- --td-brand-color: var(--td-brand-color-5);
17
- --td-brand-color-active: var(--td-brand-color-6);
18
- --td-warning-color-1: #fef3e6;
19
- --td-warning-color-2: #f9e0c7;
20
- --td-warning-color-3: #f7c797;
21
- --td-warning-color-4: #f2995f;
22
- --td-warning-color-5: #ed7b2f;
23
- --td-warning-color-6: #d35a21;
24
- --td-warning-color-7: #ba431b;
25
- --td-warning-color-8: #9e3610;
26
- --td-warning-color-9: #842b0b;
27
- --td-warning-color-10: #5a1907;
28
- --td-warning-color: var(--td-warning-color-5);
72
+ --td-brand-color-light: var(--td-brand-color-1);
73
+ --td-brand-color-light-hover: var(--td-brand-color-2);
29
74
  --td-warning-color-hover: var(--td-warning-color-4);
30
75
  --td-warning-color-focus: var(--td-warning-color-2);
31
76
  --td-warning-color-active: var(--td-warning-color-6);
32
77
  --td-warning-color-disabled: var(--td-warning-color-3);
33
78
  --td-warning-color-light: var(--td-warning-color-1);
34
- --td-error-color-1: #fdecee;
35
- --td-error-color-2: #f9d7d9;
36
- --td-error-color-3: #f8b9be;
37
- --td-error-color-4: #f78d94;
38
- --td-error-color-5: #f36d78;
39
- --td-error-color-6: #e34d59;
40
- --td-error-color-7: #c9353f;
41
- --td-error-color-8: #b11f26;
42
- --td-error-color-9: #951114;
43
- --td-error-color-10: #680506;
44
- --td-error-color: var(--td-error-color-6);
79
+ --td-warning-color-light-hover: var(--td-warning-color-2);
45
80
  --td-error-color-hover: var(--td-error-color-5);
46
81
  --td-error-color-focus: var(--td-error-color-2);
47
82
  --td-error-color-active: var(--td-error-color-7);
48
83
  --td-error-color-disabled: var(--td-error-color-3);
49
84
  --td-error-color-light: var(--td-error-color-1);
50
- --td-success-color-1: #e8f8f2;
51
- --td-success-color-2: #bcebdc;
52
- --td-success-color-3: #85dbbe;
53
- --td-success-color-4: #48c79c;
54
- --td-success-color-5: #00a870;
55
- --td-success-color-6: #078d5c;
56
- --td-success-color-7: #067945;
57
- --td-success-color-8: #056334;
58
- --td-success-color-9: #044f2a;
59
- --td-success-color-10: #033017;
60
- --td-success-color: var(--td-success-color-5);
85
+ --td-error-color-light-hover: var(--td-error-color-2);
61
86
  --td-success-color-hover: var(--td-success-color-4);
62
87
  --td-success-color-focus: var(--td-success-color-2);
63
88
  --td-success-color-active: var(--td-success-color-6);
64
89
  --td-success-color-disabled: var(--td-success-color-3);
65
90
  --td-success-color-light: var(--td-success-color-1);
66
- --td-gray-color-1: #f3f3f3;
67
- --td-gray-color-2: #eee;
68
- --td-gray-color-3: #e7e7e7;
69
- --td-gray-color-4: #dcdcdc;
70
- --td-gray-color-5: #c2c6cd;
71
- --td-gray-color-6: #a6a6a6;
72
- --td-gray-color-7: #848b96;
73
- --td-gray-color-8: #6f7782;
74
- --td-gray-color-9: #535e69;
75
- --td-gray-color-10: #424b54;
76
- --td-gray-color-11: #383838;
77
- --td-gray-color-12: #2c2c2c;
78
- --td-gray-color-13: #242424;
79
- --td-gray-color-14: #181818;
80
- --td-bg-color-container: #fff;
81
- --td-bg-color-container-select: #fff;
91
+ --td-success-color-light-hover: var(--td-success-color-2);
92
+ --td-mask-active: rgba(0, 0, 0, .6);
93
+ --td-mask-disabled: rgba(255, 255, 255, .6);
82
94
  --td-bg-color-page: var(--td-gray-color-2);
95
+ --td-bg-color-container: #fff;
83
96
  --td-bg-color-container-hover: var(--td-gray-color-1);
84
97
  --td-bg-color-container-active: var(--td-gray-color-3);
98
+ --td-bg-color-container-select: #fff;
85
99
  --td-bg-color-secondarycontainer: var(--td-gray-color-1);
86
100
  --td-bg-color-secondarycontainer-hover: var(--td-gray-color-2);
87
101
  --td-bg-color-secondarycontainer-active: var(--td-gray-color-4);
88
102
  --td-bg-color-component: var(--td-gray-color-3);
89
103
  --td-bg-color-component-hover: var(--td-gray-color-4);
90
104
  --td-bg-color-component-active: var(--td-gray-color-6);
105
+ --td-bg-color-secondarycomponent: var(--td-gray-color-4);
106
+ --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5);
107
+ --td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
91
108
  --td-bg-color-component-disabled: var(--td-gray-color-2);
92
- --td-component-stroke: var(--td-gray-color-3);
93
- --td-component-border: var(--td-gray-color-4);
94
- --td-font-white-1: #ffffff;
95
- --td-font-white-2: rgba(255, 255, 255, 0.55);
96
- --td-font-white-3: rgba(255, 255, 255, 0.35);
97
- --td-font-white-4: rgba(255, 255, 255, 0.22);
98
- --td-font-gray-1: rgba(0, 0, 0, 0.9);
99
- --td-font-gray-2: rgba(0, 0, 0, 0.6);
100
- --td-font-gray-3: rgba(0, 0, 0, 0.4);
101
- --td-font-gray-4: rgba(0, 0, 0, 0.26);
109
+ --td-bg-color-specialcomponent: #fff;
102
110
  --td-text-color-primary: var(--td-font-gray-1);
103
111
  --td-text-color-secondary: var(--td-font-gray-2);
104
112
  --td-text-color-placeholder: var(--td-font-gray-3);
105
113
  --td-text-color-disabled: var(--td-font-gray-4);
106
114
  --td-text-color-anti: #fff;
107
- --td-text-color-brand: var(--td-brand-color);
108
- --td-text-color-link: var(--td-brand-color);
109
- --td-brand-color-light-hover: var(--td-brand-color-2);
110
- --td-warning-color-light-hover: var(--td-warning-color-2);
111
- --td-error-color-light-hover: var(--td-error-color-2);
112
- --td-success-color-light-hover: var(--td-success-color-2);
113
- --td-bg-color-secondarycomponent: var(--td-gray-color-4);
114
- --td-bg-color-secondarycomponent-hover: var(--td-gray-color-5);
115
- --td-bg-color-secondarycomponent-active: var(--td-gray-color-6);
116
- --td-table-shadow-color: rgba(0, 0, 0, 8%);
117
- --td-scrollbar-color: rgba(0, 0, 0, 10%);
118
- --td-scrollbar-hover-color: rgba(0, 0, 0, 30%);
119
- --td-scroll-track-color: #fff;
120
- --td-bg-color-specialcomponent: #fff;
115
+ --td-text-color-brand: var(--td-brand-color-7);
116
+ --td-text-color-link: var(--td-brand-color-8);
121
117
  --td-border-level-1-color: var(--td-gray-color-3);
118
+ --td-component-stroke: var(--td-gray-color-3);
122
119
  --td-border-level-2-color: var(--td-gray-color-4);
123
- --td-shadow-1: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
124
- --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
125
- --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
126
- --td-shadow-inset-top: inset 0 0.5px 0 #dcdcdc;
127
- --td-shadow-inset-right: inset 0.5px 0 0 #dcdcdc;
128
- --td-shadow-inset-bottom: inset 0 -0.5px 0 #dcdcdc;
129
- --td-shadow-inset-left: inset -0.5px 0 0 #dcdcdc;
130
- --td-mask-active: rgba(0, 0, 0, 0.6);
131
- --td-mask-disabled: rgba(255, 255, 255, 0.6);
120
+ --td-component-border: var(--td-gray-color-4);
121
+ --td-shadow-1: 0 1px 10px rgba(0, 0, 0, .05), 0 4px 5px rgba(0, 0, 0, .08), 0 2px 4px -1px rgba(0, 0, 0, .12);
122
+ --td-shadow-2: 0 3px 14px 2px rgba(0, 0, 0, .05), 0 8px 10px 1px rgba(0, 0, 0, .06), 0 5px 5px -3px rgba(0, 0, 0, .1);
123
+ --td-shadow-3: 0 6px 30px 5px rgba(0, 0, 0, .05), 0 16px 24px 2px rgba(0, 0, 0, .04), 0 8px 10px -5px rgba(0, 0, 0, .08);
124
+ --td-shadow-inset-top: inset 0 0.5px 0 #e7eaef;
125
+ --td-shadow-inset-right: inset 0.5px 0 0 #e7eaef;
126
+ --td-shadow-inset-bottom: inset 0 -0.5px 0 #e7eaef;
127
+ --td-table-shadow-color: rgba(0, 0, 0, .08);
128
+ --td-scrollbar-color: rgba(0, 0, 0, .1);
129
+ --td-scrollbar-hover-color: rgba(0, 0, 0, .3);
130
+ --td-scroll-track-color: #fff;
132
131
  }
133
132
 
134
- :root[theme-mode="dark"] {
135
- --td-brand-color-1: #5895f120;
136
- --td-brand-color-2: #003067;
137
- --td-brand-color-3: #00458e;
138
- --td-brand-color-4: #045db6;
139
- --td-brand-color-5: #3577d1;
140
- --td-brand-color-6: #5895f1;
141
- --td-brand-color-7: #7caeff;
142
- --td-brand-color-8: #accaff;
143
- --td-brand-color-9: #d5e3ff;
144
- --td-brand-color-10: #eff3ff;
145
- --td-brand-color-light: var(--td-brand-color-1);
133
+ :root.dark, :root[theme-mode="dark"] {
134
+ --td-brand-color-1: #1b2f51;
135
+ --td-brand-color-2: #173463;
136
+ --td-brand-color-3: #143975;
137
+ --td-brand-color-4: #103d88;
138
+ --td-brand-color-5: #0d429a;
139
+ --td-brand-color-6: #054bbe;
140
+ --td-brand-color-7: #2667d4;
141
+ --td-brand-color-8: #4582e6;
142
+ --td-brand-color-9: #699ef5;
143
+ --td-brand-color-10: #96bbf8;
144
+ --td-warning-color-1: #3b1700;
145
+ --td-warning-color-2: #532300;
146
+ --td-warning-color-3: #713300;
147
+ --td-warning-color-4: #954500;
148
+ --td-warning-color-5: #be5a00;
149
+ --td-warning-color-6: #e37318;
150
+ --td-warning-color-7: #fa9550;
151
+ --td-warning-color-8: #ffb98c;
152
+ --td-warning-color-9: #ffd9c2;
153
+ --td-warning-color-10: #fff1e9;
154
+ --td-error-color-1: #490002;
155
+ --td-error-color-2: #68070a;
156
+ --td-error-color-3: #881f1c;
157
+ --td-error-color-4: #ad352f;
158
+ --td-error-color-5: #d54941;
159
+ --td-error-color-6: #f6685d;
160
+ --td-error-color-7: #ff9285;
161
+ --td-error-color-8: #ffb9b0;
162
+ --td-error-color-9: #ffd8d2;
163
+ --td-error-color-10: #fff0ed;
164
+ --td-success-color-1: #002515;
165
+ --td-success-color-2: #003b23;
166
+ --td-success-color-3: #005334;
167
+ --td-success-color-4: #006c45;
168
+ --td-success-color-5: #008858;
169
+ --td-success-color-6: #2ba471;
170
+ --td-success-color-7: #56c08d;
171
+ --td-success-color-8: #92dab2;
172
+ --td-success-color-9: #c6f3d7;
173
+ --td-success-color-10: #e3f9e9;
174
+ --td-gray-color-1: #f6f6f6;
175
+ --td-gray-color-2: #eeeceb;
176
+ --td-gray-color-3: #dddbdb;
177
+ --td-gray-color-4: #cac9c9;
178
+ --td-gray-color-5: #b6b6b6;
179
+ --td-gray-color-6: #a2a2a2;
180
+ --td-gray-color-7: #8f8f8f;
181
+ --td-gray-color-8: #7b7c7c;
182
+ --td-gray-color-9: #6a6b6b;
183
+ --td-gray-color-10: #585a5a;
184
+ --td-gray-color-11: #494a4a;
185
+ --td-gray-color-12: #3a3b3b;
186
+ --td-gray-color-13: #2c2e2e;
187
+ --td-gray-color-14: #202222;
188
+ --td-font-white-1: rgba(255, 255, 255, .9);
189
+ --td-font-white-2: rgba(255, 255, 255, .55);
190
+ --td-font-white-3: rgba(255, 255, 255, .35);
191
+ --td-font-white-4: rgba(255, 255, 255, .22);
192
+ --td-font-gray-1: rgba(0, 0, 0, .9);
193
+ --td-font-gray-2: rgba(0, 0, 0, .6);
194
+ --td-font-gray-3: rgba(0, 0, 0, .4);
195
+ --td-font-gray-4: rgba(0, 0, 0, .26);
196
+ --td-brand-color: var(--td-brand-color-8);
197
+ --td-warning-color: var(--td-warning-color-5);
198
+ --td-error-color: var(--td-error-color-6);
199
+ --td-success-color: var(--td-success-color-5);
200
+ --td-brand-color-hover: var(--td-brand-color-7);
146
201
  --td-brand-color-focus: var(--td-brand-color-2);
202
+ --td-brand-color-active: var(--td-brand-color-9);
147
203
  --td-brand-color-disabled: var(--td-brand-color-3);
148
- --td-brand-color-hover: var(--td-brand-color-5);
149
- --td-brand-color: var(--td-brand-color-6);
150
- --td-brand-color-active: var(--td-brand-color-7);
151
- --td-warning-color-1: #4f2a1d;
152
- --td-warning-color-2: #582f21;
153
- --td-warning-color-3: #733c23;
154
- --td-warning-color-4: #a75d2b;
155
- --td-warning-color-5: #cf6e2d;
156
- --td-warning-color-6: #dc7633;
157
- --td-warning-color-7: #e8935c;
158
- --td-warning-color-8: #ecbf91;
159
- --td-warning-color-9: #eed7bf;
160
- --td-warning-color-10: #f3e9dc;
161
- --td-error-color-1: #472324;
162
- --td-error-color-2: #5e2a2d;
163
- --td-error-color-3: #703439;
164
- --td-error-color-4: #83383e;
165
- --td-error-color-5: #a03f46;
166
- --td-error-color-6: #c64751;
167
- --td-error-color-7: #de6670;
168
- --td-error-color-8: #ec888e;
169
- --td-error-color-9: #edb1b6;
170
- --td-error-color-10: #eeced0;
171
- --td-success-color-1: #193a2a;
172
- --td-success-color-2: #1a4230;
173
- --td-success-color-3: #17533d;
174
- --td-success-color-4: #0d7a55;
175
- --td-success-color-5: #059465;
176
- --td-success-color-6: #43af8a;
177
- --td-success-color-7: #46bf96;
178
- --td-success-color-8: #80d2b6;
179
- --td-success-color-9: #b4e1d3;
180
- --td-success-color-10: #deede8;
181
- --td-gray-color-1: #f3f3f3;
182
- --td-gray-color-2: #eee;
183
- --td-gray-color-3: #e7e7e7;
184
- --td-gray-color-4: #dcdcdc;
185
- --td-gray-color-5: #c2c6cd;
186
- --td-gray-color-6: #a6a6a6;
187
- --td-gray-color-7: #848b96;
188
- --td-gray-color-8: #6f7782;
189
- --td-gray-color-9: #535e69;
190
- --td-gray-color-10: #424b54;
191
- --td-gray-color-11: #383838;
192
- --td-gray-color-12: #2c2c2c;
193
- --td-gray-color-13: #242424;
194
- --td-gray-color-14: #181818;
204
+ --td-brand-color-light: var(--td-brand-color-1);
205
+ --td-brand-color-light-hover: var(--td-brand-color-2);
206
+ --td-warning-color-hover: var(--td-warning-color-4);
207
+ --td-warning-color-focus: var(--td-warning-color-2);
208
+ --td-warning-color-active: var(--td-warning-color-6);
209
+ --td-warning-color-disabled: var(--td-warning-color-3);
210
+ --td-warning-color-light: var(--td-warning-color-1);
211
+ --td-warning-color-light-hover: var(--td-warning-color-2);
212
+ --td-error-color-hover: var(--td-error-color-5);
213
+ --td-error-color-focus: var(--td-error-color-2);
214
+ --td-error-color-active: var(--td-error-color-7);
215
+ --td-error-color-disabled: var(--td-error-color-3);
216
+ --td-error-color-light: var(--td-error-color-1);
217
+ --td-error-color-light-hover: var(--td-error-color-2);
218
+ --td-success-color-hover: var(--td-success-color-4);
219
+ --td-success-color-focus: var(--td-success-color-2);
220
+ --td-success-color-active: var(--td-success-color-6);
221
+ --td-success-color-disabled: var(--td-success-color-3);
222
+ --td-success-color-light: var(--td-success-color-1);
223
+ --td-success-color-light-hover: var(--td-success-color-2);
224
+ --td-mask-active: rgba(0, 0, 0, .4);
225
+ --td-mask-disabled: rgba(0, 0, 0, .6);
195
226
  --td-bg-color-page: var(--td-gray-color-14);
196
227
  --td-bg-color-container: var(--td-gray-color-13);
197
228
  --td-bg-color-container-hover: var(--td-gray-color-12);
@@ -203,40 +234,32 @@
203
234
  --td-bg-color-component: var(--td-gray-color-11);
204
235
  --td-bg-color-component-hover: var(--td-gray-color-10);
205
236
  --td-bg-color-component-active: var(--td-gray-color-9);
237
+ --td-bg-color-secondarycomponent: var(--td-gray-color-10);
238
+ --td-bg-color-secondarycomponent-hover: var(--td-gray-color-9);
239
+ --td-bg-color-secondarycomponent-active: var(--td-gray-color-8);
206
240
  --td-bg-color-component-disabled: var(--td-gray-color-12);
207
- --td-component-stroke: var(--td-gray-color-11);
208
- --td-component-border: var(--td-gray-color-9);
209
- --td-font-white-1: rgba(255, 255, 255, 0.9);
210
- --td-font-white-2: rgba(255, 255, 255, 0.55);
211
- --td-font-white-3: rgba(255, 255, 255, 0.35);
212
- --td-font-white-4: rgba(255, 255, 255, 0.22);
213
- --td-font-gray-1: rgba(0, 0, 0, 0.9);
214
- --td-font-gray-2: rgba(0, 0, 0, 0.6);
215
- --td-font-gray-3: rgba(0, 0, 0, 0.4);
216
- --td-font-gray-4: rgba(0, 0, 0, 0.26);
241
+ --td-bg-color-specialcomponent: transparent;
217
242
  --td-text-color-primary: var(--td-font-white-1);
218
243
  --td-text-color-secondary: var(--td-font-white-2);
219
244
  --td-text-color-placeholder: var(--td-font-white-3);
220
245
  --td-text-color-disabled: var(--td-font-white-4);
221
246
  --td-text-color-anti: #fff;
222
- --td-text-color-brand: var(--td-brand-color);
223
- --td-text-color-link: var(--td-brand-color);
224
- --td-shadow-1: 0 4px 6px rgba(0, 0, 0, 0.06), 0 1px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.12);
225
- --td-shadow-2: 0 8px 10px rgba(0, 0, 0, 0.12), 0 3px 14px rgba(0, 0, 0, 0.10), 0 5px 5px rgba(0, 0, 0, 0.16);
226
- --td-shadow-3: 0 16px 24px rgba(0, 0, 0, 0.14), 0 6px 30px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.20);
247
+ --td-text-color-brand: var(--td-brand-color-8);
248
+ --td-text-color-link: var(--td-brand-color-8);
249
+ --td-border-level-1-color: var(--td-gray-color-11);
250
+ --td-component-stroke: var(--td-gray-color-11);
251
+ --td-border-level-2-color: var(--td-gray-color-9);
252
+ --td-component-border: var(--td-gray-color-9);
253
+ --td-shadow-1: 0 4px 6px rgba(0, 0, 0, .06), 0 1px 10px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .12);
254
+ --td-shadow-2: 0 8px 10px rgba(0, 0, 0, .12), 0 3px 14px rgba(0, 0, 0, .1), 0 5px 5px rgba(0, 0, 0, .16);
255
+ --td-shadow-3: 0 16px 24px rgba(0, 0, 0, .14), 0 6px 30px rgba(0, 0, 0, .12), 0 8px 10px rgba(0, 0, 0, .2);
227
256
  --td-shadow-inset-top: inset 0 0.5px 0 #5e5e5e;
228
257
  --td-shadow-inset-right: inset 0.5px 0 0 #5e5e5e;
229
258
  --td-shadow-inset-bottom: inset 0 -0.5px 0 #5e5e5e;
230
- --td-shadow-inset-left: inset -0.5px 0 0 #5e5e5e;
231
- --td-table-shadow-color: rgba(0, 0, 0, 55%);
232
- --td-scrollbar-color: rgba(255, 255, 255, 10%);
233
- --td-scrollbar-hover-color: rgba(255, 255, 255, 30%);
259
+ --td-table-shadow-color: rgba(0, 0, 0, .55);
260
+ --td-scrollbar-color: rgba(255, 255, 255, .1);
261
+ --td-scrollbar-hover-color: rgba(255, 255, 255, .3);
234
262
  --td-scroll-track-color: #333;
235
- --td-bg-color-specialcomponent: transparent;
236
- --td-border-level-1-color: var(--td-gray-color-11);
237
- --td-border-level-2-color: var(--td-gray-color-9);
238
- --td-mask-active: rgba(0, 0, 0, 0.4);
239
- --td-mask-disabled: rgba(0, 0, 0, 0.6);
240
263
  }
241
264
 
242
265
  :root {
@@ -252,7 +275,8 @@
252
275
  --td-font-size-body-large: 16px;
253
276
  --td-font-size-title-small: 14px;
254
277
  --td-font-size-title-medium: 16px;
255
- --td-font-size-title-large: 20px;
278
+ --td-font-size-title-large: 18px;
279
+ --td-font-size-title-extraLarge: 20px;
256
280
  --td-font-size-headline-small: 24px;
257
281
  --td-font-size-headline-medium: 28px;
258
282
  --td-font-size-headline-large: 36px;
@@ -268,7 +292,8 @@
268
292
  --td-line-height-body-large: 24px;
269
293
  --td-line-height-title-small: 22px;
270
294
  --td-line-height-title-medium: 24px;
271
- --td-line-height-title-large: 28px;
295
+ --td-line-height-title-large: 26px;
296
+ --td-line-height-title-extraLarge: 28px;
272
297
  --td-line-height-headline-small: 32px;
273
298
  --td-line-height-headline-medium: 36px;
274
299
  --td-line-height-headline-large: 44px;