@servicetitan/hammer-token 0.0.0-rc-3.0.0-20260114215531 → 0.0.0-rc-3.0.0-20260128185325
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/CHANGELOG.md +9 -1
- package/build/web/core/component-variables.scss +62 -0
- package/build/web/core/component.d.ts +31 -0
- package/build/web/core/component.js +341 -0
- package/build/web/core/component.scss +31 -0
- package/build/web/core/css-utils/a2-color.css +16 -0
- package/build/web/core/css-utils/a2-utils.css +16 -0
- package/build/web/core/css-utils/color.css +16 -0
- package/build/web/core/css-utils/utils.css +16 -0
- package/build/web/core/semantic-variables.scss +8 -0
- package/build/web/core/semantic.d.ts +4 -0
- package/build/web/core/semantic.js +44 -0
- package/build/web/core/semantic.scss +4 -0
- package/package.json +1 -1
- package/src/theme/core/background.tokens.json +77 -0
- package/src/theme/core/component/alert.tokens.json +180 -0
- package/src/theme/core/component/announcement.tokens.json +186 -0
- package/src/theme/core/component/avatar.tokens.json +132 -0
- package/src/theme/core/component/badge.tokens.json +40 -0
- package/src/theme/core/foreground.tokens.json +18 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @servicetitan/hammer-token
|
|
2
2
|
|
|
3
|
-
## 0.0.0-rc-3.0.0-
|
|
3
|
+
## 0.0.0-rc-3.0.0-20260128185325
|
|
4
4
|
|
|
5
5
|
### Major Changes
|
|
6
6
|
|
|
@@ -26,8 +26,16 @@
|
|
|
26
26
|
|
|
27
27
|
### Patch Changes
|
|
28
28
|
|
|
29
|
+
- [#1825](https://github.com/servicetitan/hammer/pull/1825) [`5101f0b`](https://github.com/servicetitan/hammer/commit/5101f0be78e8b3f5351da5add81349b4c7532a61) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Add Avatar component design tokens and migrate SCSS to use token variables
|
|
30
|
+
|
|
31
|
+
- [#1825](https://github.com/servicetitan/hammer/pull/1825) [`5101f0b`](https://github.com/servicetitan/hammer/commit/5101f0be78e8b3f5351da5add81349b4c7532a61) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Add Announcement component design tokens, missing foreground tokens for success, and migrate SCSS to use token variables
|
|
32
|
+
|
|
33
|
+
- [#1825](https://github.com/servicetitan/hammer/pull/1825) [`5101f0b`](https://github.com/servicetitan/hammer/commit/5101f0be78e8b3f5351da5add81349b4c7532a61) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Add Badge component design tokens and migrate SCSS to use token variables
|
|
34
|
+
|
|
29
35
|
- [#1734](https://github.com/servicetitan/hammer/pull/1734) [`c960a4c`](https://github.com/servicetitan/hammer/commit/c960a4c88d22c7f508b79ac342c8f00eec46ace9) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Fix various token configuration, formatting, and SCSS generation issues
|
|
30
36
|
|
|
37
|
+
- [#1825](https://github.com/servicetitan/hammer/pull/1825) [`5101f0b`](https://github.com/servicetitan/hammer/commit/5101f0be78e8b3f5351da5add81349b4c7532a61) Thanks [@tounsoo](https://github.com/tounsoo)! - [Tokens] Add Alert component design tokens and migrate SCSS to use token variables
|
|
38
|
+
|
|
31
39
|
## 2.5.1
|
|
32
40
|
|
|
33
41
|
### Patch Changes
|
|
@@ -1,4 +1,35 @@
|
|
|
1
1
|
$light: (
|
|
2
|
+
alert-background-color: var(--a2-color-neutral-0, #ffffff),
|
|
3
|
+
alert-border-color-info: var(--a2-color-blue-500, #1a82ff),
|
|
4
|
+
alert-border-color-success: var(--a2-color-green-500, #09a569),
|
|
5
|
+
alert-border-color-warning: var(--a2-color-yellow-500, #d6a000),
|
|
6
|
+
alert-border-color-danger: var(--a2-color-red-500, #ff3914),
|
|
7
|
+
alert-status-icon-color-info: var(--a2-color-blue-500, #1a82ff),
|
|
8
|
+
alert-status-icon-color-success: var(--a2-color-green-500, #09a569),
|
|
9
|
+
alert-status-icon-color-warning: var(--a2-color-yellow-500, #d6a000),
|
|
10
|
+
alert-status-icon-color-danger: var(--a2-color-red-500, #ff3914),
|
|
11
|
+
alert-close-button-foreground-color: var(--a2-color-neutral-950, #040404),
|
|
12
|
+
announcement-background-color-info: var(--a2-color-blue-500, #1a82ff),
|
|
13
|
+
announcement-background-color-success: var(--a2-color-green-500, #09a569),
|
|
14
|
+
announcement-background-color-warning: var(--a2-color-yellow-500, #d6a000),
|
|
15
|
+
announcement-background-color-danger: var(--a2-color-red-500, #ff3914),
|
|
16
|
+
announcement-foreground-color-info: var(--a2-color-neutral-0, #ffffff),
|
|
17
|
+
announcement-foreground-color-success: var(--a2-color-neutral-0, #ffffff),
|
|
18
|
+
announcement-foreground-color-warning: var(--a2-color-neutral-950, #040404),
|
|
19
|
+
announcement-foreground-color-danger: var(--a2-color-neutral-0, #ffffff),
|
|
20
|
+
announcement-action-button-background-color-info: #1a1a1a0F,
|
|
21
|
+
announcement-action-button-background-color-success: #1a1a1a0F,
|
|
22
|
+
announcement-action-button-background-color-warning: #1a1a1a0F,
|
|
23
|
+
announcement-action-button-background-color-danger: #1a1a1a0F,
|
|
24
|
+
avatar-background-color: var(--a2-color-neutral-70, #e8e8e8),
|
|
25
|
+
avatar-foreground-color: var(--a2-color-neutral-950, #040404),
|
|
26
|
+
avatar-border-color: var(--a2-color-neutral-0, #ffffff),
|
|
27
|
+
avatar-indicator-background-color-online: var(--a2-color-green-500, #09a569),
|
|
28
|
+
avatar-indicator-background-color-offline: var(--a2-color-neutral-0, #ffffff),
|
|
29
|
+
avatar-indicator-background-color-disabled: var(--a2-color-neutral-100, #dfdfdf),
|
|
30
|
+
avatar-indicator-border-color: var(--a2-color-neutral-80, #e5e5e5),
|
|
31
|
+
badge-background-color: var(--a2-color-red-500, #ff3914),
|
|
32
|
+
badge-foreground-color: var(--a2-color-neutral-0, #ffffff),
|
|
2
33
|
button-primary-foreground-color: var(--a2-color-neutral-0, #ffffff),
|
|
3
34
|
button-primary-foreground-color-hover: var(--a2-color-neutral-0, #ffffff),
|
|
4
35
|
button-primary-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
|
|
@@ -55,6 +86,37 @@ $light: (
|
|
|
55
86
|
checkbox-unchecked-error-focus-ring-color: var(--a2-color-red-500, #ff3914),
|
|
56
87
|
);
|
|
57
88
|
$dark: (
|
|
89
|
+
alert-background-color: var(--a2-color-neutral-400, #8b8b8b),
|
|
90
|
+
alert-border-color-info: var(--a2-color-blue-100, #cce3ff),
|
|
91
|
+
alert-border-color-success: var(--a2-color-green-100, #b8f5dd),
|
|
92
|
+
alert-border-color-warning: var(--a2-color-yellow-100, #fff0c2),
|
|
93
|
+
alert-border-color-danger: var(--a2-color-red-100, #ffd4cc),
|
|
94
|
+
alert-status-icon-color-info: var(--a2-color-blue-100, #cce3ff),
|
|
95
|
+
alert-status-icon-color-success: var(--a2-color-green-100, #b8f5dd),
|
|
96
|
+
alert-status-icon-color-warning: var(--a2-color-yellow-100, #fff0c2),
|
|
97
|
+
alert-status-icon-color-danger: var(--a2-color-red-100, #ffd4cc),
|
|
98
|
+
alert-close-button-foreground-color: var(--a2-color-neutral-0, #ffffff),
|
|
99
|
+
announcement-background-color-info: var(--a2-color-blue-100, #cce3ff),
|
|
100
|
+
announcement-background-color-success: var(--a2-color-green-100, #b8f5dd),
|
|
101
|
+
announcement-background-color-warning: var(--a2-color-yellow-100, #fff0c2),
|
|
102
|
+
announcement-background-color-danger: var(--a2-color-red-100, #ffd4cc),
|
|
103
|
+
announcement-foreground-color-info: var(--a2-color-neutral-950, #040404),
|
|
104
|
+
announcement-foreground-color-success: var(--a2-color-neutral-950, #040404),
|
|
105
|
+
announcement-foreground-color-warning: var(--a2-color-neutral-950, #040404),
|
|
106
|
+
announcement-foreground-color-danger: var(--a2-color-neutral-950, #040404),
|
|
107
|
+
announcement-action-button-background-color-info: #ffffff0F,
|
|
108
|
+
announcement-action-button-background-color-success: #ffffff0F,
|
|
109
|
+
announcement-action-button-background-color-warning: #ffffff0F,
|
|
110
|
+
announcement-action-button-background-color-danger: #ffffff0F,
|
|
111
|
+
avatar-background-color: var(--a2-color-neutral-800, #292929),
|
|
112
|
+
avatar-foreground-color: var(--a2-color-neutral-0, #ffffff),
|
|
113
|
+
avatar-border-color: var(--a2-color-neutral-0, #ffffff),
|
|
114
|
+
avatar-indicator-background-color-online: var(--a2-color-green-100, #b8f5dd),
|
|
115
|
+
avatar-indicator-background-color-offline: var(--a2-color-neutral-400, #8b8b8b),
|
|
116
|
+
avatar-indicator-background-color-disabled: var(--a2-color-neutral-100, #dfdfdf),
|
|
117
|
+
avatar-indicator-border-color: var(--a2-color-neutral-100, #dfdfdf),
|
|
118
|
+
badge-background-color: var(--a2-color-red-100, #ffd4cc),
|
|
119
|
+
badge-foreground-color: var(--a2-color-neutral-950, #040404),
|
|
58
120
|
button-primary-foreground-color: var(--a2-color-neutral-950, #040404),
|
|
59
121
|
button-primary-foreground-color-hover: var(--a2-color-neutral-950, #040404),
|
|
60
122
|
button-primary-foreground-color-active: var(--a2-color-neutral-950, #040404),
|
|
@@ -1,5 +1,36 @@
|
|
|
1
1
|
import { TokenObj } from '../types';
|
|
2
2
|
|
|
3
|
+
export declare const AlertBackgroundColor: TokenObj;
|
|
4
|
+
export declare const AlertBorderColorInfo: TokenObj;
|
|
5
|
+
export declare const AlertBorderColorSuccess: TokenObj;
|
|
6
|
+
export declare const AlertBorderColorWarning: TokenObj;
|
|
7
|
+
export declare const AlertBorderColorDanger: TokenObj;
|
|
8
|
+
export declare const AlertStatusIconColorInfo: TokenObj;
|
|
9
|
+
export declare const AlertStatusIconColorSuccess: TokenObj;
|
|
10
|
+
export declare const AlertStatusIconColorWarning: TokenObj;
|
|
11
|
+
export declare const AlertStatusIconColorDanger: TokenObj;
|
|
12
|
+
export declare const AlertCloseButtonForegroundColor: TokenObj;
|
|
13
|
+
export declare const AnnouncementBackgroundColorInfo: TokenObj;
|
|
14
|
+
export declare const AnnouncementBackgroundColorSuccess: TokenObj;
|
|
15
|
+
export declare const AnnouncementBackgroundColorWarning: TokenObj;
|
|
16
|
+
export declare const AnnouncementBackgroundColorDanger: TokenObj;
|
|
17
|
+
export declare const AnnouncementForegroundColorInfo: TokenObj;
|
|
18
|
+
export declare const AnnouncementForegroundColorSuccess: TokenObj;
|
|
19
|
+
export declare const AnnouncementForegroundColorWarning: TokenObj;
|
|
20
|
+
export declare const AnnouncementForegroundColorDanger: TokenObj;
|
|
21
|
+
export declare const AnnouncementActionButtonBackgroundColorInfo: TokenObj;
|
|
22
|
+
export declare const AnnouncementActionButtonBackgroundColorSuccess: TokenObj;
|
|
23
|
+
export declare const AnnouncementActionButtonBackgroundColorWarning: TokenObj;
|
|
24
|
+
export declare const AnnouncementActionButtonBackgroundColorDanger: TokenObj;
|
|
25
|
+
export declare const AvatarBackgroundColor: TokenObj;
|
|
26
|
+
export declare const AvatarForegroundColor: TokenObj;
|
|
27
|
+
export declare const AvatarBorderColor: TokenObj;
|
|
28
|
+
export declare const AvatarIndicatorBackgroundColorOnline: TokenObj;
|
|
29
|
+
export declare const AvatarIndicatorBackgroundColorOffline: TokenObj;
|
|
30
|
+
export declare const AvatarIndicatorBackgroundColorDisabled: TokenObj;
|
|
31
|
+
export declare const AvatarIndicatorBorderColor: TokenObj;
|
|
32
|
+
export declare const BadgeBackgroundColor: TokenObj;
|
|
33
|
+
export declare const BadgeForegroundColor: TokenObj;
|
|
3
34
|
export declare const ButtonPrimaryForegroundColor: TokenObj;
|
|
4
35
|
export declare const ButtonPrimaryForegroundColorHover: TokenObj;
|
|
5
36
|
export declare const ButtonPrimaryForegroundColorActive: TokenObj;
|
|
@@ -12,6 +12,347 @@
|
|
|
12
12
|
* @property {string} extensions.appearance.dark.value
|
|
13
13
|
*/
|
|
14
14
|
|
|
15
|
+
/** @type {TokenWithAppearance} */
|
|
16
|
+
export const AlertBackgroundColor = {
|
|
17
|
+
value: "{background.color.default}",
|
|
18
|
+
extensions: {
|
|
19
|
+
appearance: {
|
|
20
|
+
dark: {
|
|
21
|
+
value: "{background.color.default}"
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
/** @type {TokenWithAppearance} */
|
|
27
|
+
export const AlertBorderColorInfo = {
|
|
28
|
+
value: "#1a82ff",
|
|
29
|
+
extensions: {
|
|
30
|
+
appearance: {
|
|
31
|
+
dark: {
|
|
32
|
+
value: "#1a82ff"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
/** @type {TokenWithAppearance} */
|
|
38
|
+
export const AlertBorderColorSuccess = {
|
|
39
|
+
value: "#09a569",
|
|
40
|
+
extensions: {
|
|
41
|
+
appearance: {
|
|
42
|
+
dark: {
|
|
43
|
+
value: "#09a569"
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
/** @type {TokenWithAppearance} */
|
|
49
|
+
export const AlertBorderColorWarning = {
|
|
50
|
+
value: "#d6a000",
|
|
51
|
+
extensions: {
|
|
52
|
+
appearance: {
|
|
53
|
+
dark: {
|
|
54
|
+
value: "#d6a000"
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
/** @type {TokenWithAppearance} */
|
|
60
|
+
export const AlertBorderColorDanger = {
|
|
61
|
+
value: "#ff3914",
|
|
62
|
+
extensions: {
|
|
63
|
+
appearance: {
|
|
64
|
+
dark: {
|
|
65
|
+
value: "#ff3914"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
/** @type {TokenWithAppearance} */
|
|
71
|
+
export const AlertStatusIconColorInfo = {
|
|
72
|
+
value: "#1a82ff",
|
|
73
|
+
extensions: {
|
|
74
|
+
appearance: {
|
|
75
|
+
dark: {
|
|
76
|
+
value: "#1a82ff"
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
};
|
|
81
|
+
/** @type {TokenWithAppearance} */
|
|
82
|
+
export const AlertStatusIconColorSuccess = {
|
|
83
|
+
value: "#09a569",
|
|
84
|
+
extensions: {
|
|
85
|
+
appearance: {
|
|
86
|
+
dark: {
|
|
87
|
+
value: "#09a569"
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
/** @type {TokenWithAppearance} */
|
|
93
|
+
export const AlertStatusIconColorWarning = {
|
|
94
|
+
value: "#d6a000",
|
|
95
|
+
extensions: {
|
|
96
|
+
appearance: {
|
|
97
|
+
dark: {
|
|
98
|
+
value: "#d6a000"
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
};
|
|
103
|
+
/** @type {TokenWithAppearance} */
|
|
104
|
+
export const AlertStatusIconColorDanger = {
|
|
105
|
+
value: "#ff3914",
|
|
106
|
+
extensions: {
|
|
107
|
+
appearance: {
|
|
108
|
+
dark: {
|
|
109
|
+
value: "#ff3914"
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
};
|
|
114
|
+
/** @type {TokenWithAppearance} */
|
|
115
|
+
export const AlertCloseButtonForegroundColor = {
|
|
116
|
+
value: "#040404",
|
|
117
|
+
extensions: {
|
|
118
|
+
appearance: {
|
|
119
|
+
dark: {
|
|
120
|
+
value: "#040404"
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
/** @type {TokenWithAppearance} */
|
|
126
|
+
export const AnnouncementBackgroundColorInfo = {
|
|
127
|
+
value: "#1a82ff",
|
|
128
|
+
extensions: {
|
|
129
|
+
appearance: {
|
|
130
|
+
dark: {
|
|
131
|
+
value: "#1a82ff"
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
/** @type {TokenWithAppearance} */
|
|
137
|
+
export const AnnouncementBackgroundColorSuccess = {
|
|
138
|
+
value: "#09a569",
|
|
139
|
+
extensions: {
|
|
140
|
+
appearance: {
|
|
141
|
+
dark: {
|
|
142
|
+
value: "#09a569"
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
/** @type {TokenWithAppearance} */
|
|
148
|
+
export const AnnouncementBackgroundColorWarning = {
|
|
149
|
+
value: "#d6a000",
|
|
150
|
+
extensions: {
|
|
151
|
+
appearance: {
|
|
152
|
+
dark: {
|
|
153
|
+
value: "#d6a000"
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
};
|
|
158
|
+
/** @type {TokenWithAppearance} */
|
|
159
|
+
export const AnnouncementBackgroundColorDanger = {
|
|
160
|
+
value: "#ff3914",
|
|
161
|
+
extensions: {
|
|
162
|
+
appearance: {
|
|
163
|
+
dark: {
|
|
164
|
+
value: "#ff3914"
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
};
|
|
169
|
+
/** @type {TokenWithAppearance} */
|
|
170
|
+
export const AnnouncementForegroundColorInfo = {
|
|
171
|
+
value: "{foreground.color.on.primary}",
|
|
172
|
+
extensions: {
|
|
173
|
+
appearance: {
|
|
174
|
+
dark: {
|
|
175
|
+
value: "{foreground.color.on.primary}"
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
/** @type {TokenWithAppearance} */
|
|
181
|
+
export const AnnouncementForegroundColorSuccess = {
|
|
182
|
+
value: "{foreground.color.on.success}",
|
|
183
|
+
extensions: {
|
|
184
|
+
appearance: {
|
|
185
|
+
dark: {
|
|
186
|
+
value: "{foreground.color.on.success}"
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
/** @type {TokenWithAppearance} */
|
|
192
|
+
export const AnnouncementForegroundColorWarning = {
|
|
193
|
+
value: "#040404",
|
|
194
|
+
extensions: {
|
|
195
|
+
appearance: {
|
|
196
|
+
dark: {
|
|
197
|
+
value: "#040404"
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
};
|
|
202
|
+
/** @type {TokenWithAppearance} */
|
|
203
|
+
export const AnnouncementForegroundColorDanger = {
|
|
204
|
+
value: "{foreground.color.on.danger}",
|
|
205
|
+
extensions: {
|
|
206
|
+
appearance: {
|
|
207
|
+
dark: {
|
|
208
|
+
value: "{foreground.color.on.danger}"
|
|
209
|
+
}
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
};
|
|
213
|
+
/** @type {TokenWithAppearance} */
|
|
214
|
+
export const AnnouncementActionButtonBackgroundColorInfo = {
|
|
215
|
+
value: "{background.color.secondary.strong}",
|
|
216
|
+
extensions: {
|
|
217
|
+
appearance: {
|
|
218
|
+
dark: {
|
|
219
|
+
value: "{background.color.secondary.strong}"
|
|
220
|
+
}
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
};
|
|
224
|
+
/** @type {TokenWithAppearance} */
|
|
225
|
+
export const AnnouncementActionButtonBackgroundColorSuccess = {
|
|
226
|
+
value: "{background.color.secondary.strong}",
|
|
227
|
+
extensions: {
|
|
228
|
+
appearance: {
|
|
229
|
+
dark: {
|
|
230
|
+
value: "{background.color.secondary.strong}"
|
|
231
|
+
}
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
};
|
|
235
|
+
/** @type {TokenWithAppearance} */
|
|
236
|
+
export const AnnouncementActionButtonBackgroundColorWarning = {
|
|
237
|
+
value: "{background.color.secondary.strong}",
|
|
238
|
+
extensions: {
|
|
239
|
+
appearance: {
|
|
240
|
+
dark: {
|
|
241
|
+
value: "{background.color.secondary.strong}"
|
|
242
|
+
}
|
|
243
|
+
}
|
|
244
|
+
}
|
|
245
|
+
};
|
|
246
|
+
/** @type {TokenWithAppearance} */
|
|
247
|
+
export const AnnouncementActionButtonBackgroundColorDanger = {
|
|
248
|
+
value: "{background.color.secondary.strong}",
|
|
249
|
+
extensions: {
|
|
250
|
+
appearance: {
|
|
251
|
+
dark: {
|
|
252
|
+
value: "{background.color.secondary.strong}"
|
|
253
|
+
}
|
|
254
|
+
}
|
|
255
|
+
}
|
|
256
|
+
};
|
|
257
|
+
/** @type {TokenWithAppearance} */
|
|
258
|
+
export const AvatarBackgroundColor = {
|
|
259
|
+
value: "{background.color.stronger}",
|
|
260
|
+
extensions: {
|
|
261
|
+
appearance: {
|
|
262
|
+
dark: {
|
|
263
|
+
value: "{background.color.stronger}"
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
};
|
|
268
|
+
/** @type {TokenWithAppearance} */
|
|
269
|
+
export const AvatarForegroundColor = {
|
|
270
|
+
value: "#040404",
|
|
271
|
+
extensions: {
|
|
272
|
+
appearance: {
|
|
273
|
+
dark: {
|
|
274
|
+
value: "#040404"
|
|
275
|
+
}
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
};
|
|
279
|
+
/** @type {TokenWithAppearance} */
|
|
280
|
+
export const AvatarBorderColor = {
|
|
281
|
+
value: "#ffffff",
|
|
282
|
+
extensions: {
|
|
283
|
+
appearance: {
|
|
284
|
+
dark: {
|
|
285
|
+
value: "#ffffff"
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
}
|
|
289
|
+
};
|
|
290
|
+
/** @type {TokenWithAppearance} */
|
|
291
|
+
export const AvatarIndicatorBackgroundColorOnline = {
|
|
292
|
+
value: "#09a569",
|
|
293
|
+
extensions: {
|
|
294
|
+
appearance: {
|
|
295
|
+
dark: {
|
|
296
|
+
value: "#09a569"
|
|
297
|
+
}
|
|
298
|
+
}
|
|
299
|
+
}
|
|
300
|
+
};
|
|
301
|
+
/** @type {TokenWithAppearance} */
|
|
302
|
+
export const AvatarIndicatorBackgroundColorOffline = {
|
|
303
|
+
value: "{background.color.default}",
|
|
304
|
+
extensions: {
|
|
305
|
+
appearance: {
|
|
306
|
+
dark: {
|
|
307
|
+
value: "{background.color.default}"
|
|
308
|
+
}
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
};
|
|
312
|
+
/** @type {TokenWithAppearance} */
|
|
313
|
+
export const AvatarIndicatorBackgroundColorDisabled = {
|
|
314
|
+
value: "#dfdfdf",
|
|
315
|
+
extensions: {
|
|
316
|
+
appearance: {
|
|
317
|
+
dark: {
|
|
318
|
+
value: "#dfdfdf"
|
|
319
|
+
}
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
};
|
|
323
|
+
/** @type {TokenWithAppearance} */
|
|
324
|
+
export const AvatarIndicatorBorderColor = {
|
|
325
|
+
value: "#e5e5e5",
|
|
326
|
+
extensions: {
|
|
327
|
+
appearance: {
|
|
328
|
+
dark: {
|
|
329
|
+
value: "#e5e5e5"
|
|
330
|
+
}
|
|
331
|
+
}
|
|
332
|
+
}
|
|
333
|
+
};
|
|
334
|
+
/** @type {TokenWithAppearance} */
|
|
335
|
+
export const BadgeBackgroundColor = {
|
|
336
|
+
value: "{background.color.danger}",
|
|
337
|
+
extensions: {
|
|
338
|
+
appearance: {
|
|
339
|
+
dark: {
|
|
340
|
+
value: "{background.color.danger}"
|
|
341
|
+
}
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
};
|
|
345
|
+
/** @type {TokenWithAppearance} */
|
|
346
|
+
export const BadgeForegroundColor = {
|
|
347
|
+
value: "{foreground.color.on.danger}",
|
|
348
|
+
extensions: {
|
|
349
|
+
appearance: {
|
|
350
|
+
dark: {
|
|
351
|
+
value: "{foreground.color.on.danger}"
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
}
|
|
355
|
+
};
|
|
15
356
|
/** @type {TokenWithAppearance} */
|
|
16
357
|
export const ButtonPrimaryForegroundColor = {
|
|
17
358
|
value: "{foreground.color.on.primary}",
|
|
@@ -1,3 +1,34 @@
|
|
|
1
|
+
$alert-background-color: var(--a2-alert-background-color, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-400, #8b8b8b))));
|
|
2
|
+
$alert-border-color-info: var(--a2-alert-border-color-info, var(--a2-border-color-primary, var(--a2-status-color-info, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-100, #cce3ff)))));
|
|
3
|
+
$alert-border-color-success: var(--a2-alert-border-color-success, var(--a2-status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd))));
|
|
4
|
+
$alert-border-color-warning: var(--a2-alert-border-color-warning, var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #d6a000), var(--a2-color-yellow-100, #fff0c2))));
|
|
5
|
+
$alert-border-color-danger: var(--a2-alert-border-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc))));
|
|
6
|
+
$alert-status-icon-color-info: var(--a2-alert-status-icon-color-info, var(--a2-status-color-info, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-100, #cce3ff))));
|
|
7
|
+
$alert-status-icon-color-success: var(--a2-alert-status-icon-color-success, var(--a2-status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd))));
|
|
8
|
+
$alert-status-icon-color-warning: var(--a2-alert-status-icon-color-warning, var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #d6a000), var(--a2-color-yellow-100, #fff0c2))));
|
|
9
|
+
$alert-status-icon-color-danger: var(--a2-alert-status-icon-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc))));
|
|
10
|
+
$alert-close-button-foreground-color: var(--a2-alert-close-button-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
|
|
11
|
+
$announcement-background-color-info: var(--a2-announcement-background-color-info, var(--a2-status-color-info, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-100, #cce3ff))));
|
|
12
|
+
$announcement-background-color-success: var(--a2-announcement-background-color-success, var(--a2-status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd))));
|
|
13
|
+
$announcement-background-color-warning: var(--a2-announcement-background-color-warning, var(--a2-status-color-warning, light-dark(var(--a2-color-yellow-500, #d6a000), var(--a2-color-yellow-100, #fff0c2))));
|
|
14
|
+
$announcement-background-color-danger: var(--a2-announcement-background-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc))));
|
|
15
|
+
$announcement-foreground-color-info: var(--a2-announcement-foreground-color-info, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
|
|
16
|
+
$announcement-foreground-color-success: var(--a2-announcement-foreground-color-success, var(--a2-foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
|
|
17
|
+
$announcement-foreground-color-warning: var(--a2-announcement-foreground-color-warning, var(--a2-foreground-color-on-warning, var(--a2-color-neutral-950, #040404)));
|
|
18
|
+
$announcement-foreground-color-danger: var(--a2-announcement-foreground-color-danger, var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
|
|
19
|
+
$announcement-action-button-background-color-info: var(--a2-announcement-action-button-background-color-info, var(--a2-background-color-secondary-strong, light-dark(#1a1a1a0F, #ffffff0F)));
|
|
20
|
+
$announcement-action-button-background-color-success: var(--a2-announcement-action-button-background-color-success, var(--a2-background-color-secondary-strong, light-dark(#1a1a1a0F, #ffffff0F)));
|
|
21
|
+
$announcement-action-button-background-color-warning: var(--a2-announcement-action-button-background-color-warning, var(--a2-background-color-secondary-strong, light-dark(#1a1a1a0F, #ffffff0F)));
|
|
22
|
+
$announcement-action-button-background-color-danger: var(--a2-announcement-action-button-background-color-danger, var(--a2-background-color-secondary-strong, light-dark(#1a1a1a0F, #ffffff0F)));
|
|
23
|
+
$avatar-background-color: var(--a2-avatar-background-color, var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-70, #e8e8e8), var(--a2-color-neutral-800, #292929))));
|
|
24
|
+
$avatar-foreground-color: var(--a2-avatar-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
|
|
25
|
+
$avatar-border-color: var(--a2-avatar-border-color, var(--a2-color-neutral-0, #ffffff));
|
|
26
|
+
$avatar-indicator-background-color-online: var(--a2-avatar-indicator-background-color-online, var(--a2-status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd))));
|
|
27
|
+
$avatar-indicator-background-color-offline: var(--a2-avatar-indicator-background-color-offline, var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-400, #8b8b8b))));
|
|
28
|
+
$avatar-indicator-background-color-disabled: var(--a2-avatar-indicator-background-color-disabled, var(--a2-background-color-disabled, var(--a2-color-neutral-100, #dfdfdf)));
|
|
29
|
+
$avatar-indicator-border-color: var(--a2-avatar-indicator-border-color, var(--a2-border-color-default, light-dark(var(--a2-color-neutral-80, #e5e5e5), var(--a2-color-neutral-100, #dfdfdf))));
|
|
30
|
+
$badge-background-color: var(--a2-badge-background-color, var(--a2-background-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc)))));
|
|
31
|
+
$badge-foreground-color: var(--a2-badge-foreground-color, var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
|
|
1
32
|
$button-primary-foreground-color: var(--a2-button-primary-foreground-color, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
|
|
2
33
|
$button-primary-foreground-color-hover: var(--a2-button-primary-foreground-color-hover, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
|
|
3
34
|
$button-primary-foreground-color-active: var(--a2-button-primary-foreground-color-active, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
|
|
@@ -25,6 +25,9 @@
|
|
|
25
25
|
.a2-bg-secondary {background-color: var(--background-color-secondary, #0404040F)}
|
|
26
26
|
.a2-bg-secondary-active {background-color: var(--background-color-secondary-active, #04040429)}
|
|
27
27
|
.a2-bg-secondary-hover {background-color: var(--background-color-secondary-hover, #04040414)}
|
|
28
|
+
.a2-bg-secondary-strong {background-color: var(--background-color-secondary-strong, #1a1a1a0F)}
|
|
29
|
+
.a2-bg-secondary-strong-active {background-color: var(--background-color-secondary-strong-active, #1a1a1a29)}
|
|
30
|
+
.a2-bg-secondary-strong-hover {background-color: var(--background-color-secondary-strong-hover, #1a1a1a14)}
|
|
28
31
|
.a2-bg-status-danger {background-color: var(--status-color-danger, var(--a2-color-red-500, #ff3914))}
|
|
29
32
|
.a2-bg-status-info {background-color: var(--status-color-info, var(--a2-color-blue-500, #1a82ff))}
|
|
30
33
|
.a2-bg-status-success {background-color: var(--status-color-success, var(--a2-color-green-500, #09a569))}
|
|
@@ -80,6 +83,7 @@
|
|
|
80
83
|
.a2-c-on-primary {color: var(--foreground-color-on-primary, var(--a2-color-neutral-0, #ffffff))}
|
|
81
84
|
.a2-c-on-primary-active {color: var(--foreground-color-on-primary-active, var(--a2-color-neutral-0, #ffffff))}
|
|
82
85
|
.a2-c-on-primary-hover {color: var(--foreground-color-on-primary-hover, var(--a2-color-neutral-0, #ffffff))}
|
|
86
|
+
.a2-c-on-success {color: var(--foreground-color-on-success, var(--a2-color-neutral-0, #ffffff))}
|
|
83
87
|
.a2-c-on-warning {color: var(--foreground-color-on-warning, var(--a2-color-neutral-950, #040404))}
|
|
84
88
|
.a2-c-primary {color: var(--foreground-color-primary, var(--a2-color-blue-500, #1a82ff))}
|
|
85
89
|
.a2-c-primary-active {color: var(--foreground-color-primary-active, var(--a2-color-blue-600, #0065de))}
|
|
@@ -115,6 +119,9 @@
|
|
|
115
119
|
.a2-bg-secondary {background-color: var(--background-color-secondary, light-dark(#0404040F, #ffffff0F))}
|
|
116
120
|
.a2-bg-secondary-active {background-color: var(--background-color-secondary-active, light-dark(#04040429, #ffffff29))}
|
|
117
121
|
.a2-bg-secondary-hover {background-color: var(--background-color-secondary-hover, light-dark(#04040414, #ffffff14))}
|
|
122
|
+
.a2-bg-secondary-strong {background-color: var(--background-color-secondary-strong, light-dark(#1a1a1a0F, #ffffff0F))}
|
|
123
|
+
.a2-bg-secondary-strong-active {background-color: var(--background-color-secondary-strong-active, light-dark(#1a1a1a29, #ffffff29))}
|
|
124
|
+
.a2-bg-secondary-strong-hover {background-color: var(--background-color-secondary-strong-hover, light-dark(#1a1a1a14, #ffffff14))}
|
|
118
125
|
.a2-bg-status-danger {background-color: var(--status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc)))}
|
|
119
126
|
.a2-bg-status-info {background-color: var(--status-color-info, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-100, #cce3ff)))}
|
|
120
127
|
.a2-bg-status-success {background-color: var(--status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd)))}
|
|
@@ -167,6 +174,7 @@
|
|
|
167
174
|
.a2-c-on-primary {color: var(--foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
168
175
|
.a2-c-on-primary-active {color: var(--foreground-color-on-primary-active, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
169
176
|
.a2-c-on-primary-hover {color: var(--foreground-color-on-primary-hover, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
177
|
+
.a2-c-on-success {color: var(--foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
170
178
|
.a2-c-on-warning {color: var(--foreground-color-on-warning, var(--a2-color-neutral-950, #040404))}
|
|
171
179
|
.a2-c-primary {color: var(--foreground-color-primary, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff)))}
|
|
172
180
|
.a2-c-primary-active {color: var(--foreground-color-primary-active, light-dark(var(--a2-color-blue-600, #0065de), var(--a2-color-blue-200, #9ecaff)))}
|
|
@@ -204,6 +212,9 @@
|
|
|
204
212
|
.a2-bg-secondary {background-color: var(--background-color-secondary, #0404040F)}
|
|
205
213
|
.a2-bg-secondary-active {background-color: var(--background-color-secondary-active, #04040429)}
|
|
206
214
|
.a2-bg-secondary-hover {background-color: var(--background-color-secondary-hover, #04040414)}
|
|
215
|
+
.a2-bg-secondary-strong {background-color: var(--background-color-secondary-strong, #1a1a1a0F)}
|
|
216
|
+
.a2-bg-secondary-strong-active {background-color: var(--background-color-secondary-strong-active, #1a1a1a29)}
|
|
217
|
+
.a2-bg-secondary-strong-hover {background-color: var(--background-color-secondary-strong-hover, #1a1a1a14)}
|
|
207
218
|
.a2-bg-status-danger {background-color: var(--status-color-danger, var(--a2-color-red-500, #ff3914))}
|
|
208
219
|
.a2-bg-status-info {background-color: var(--status-color-info, var(--a2-color-blue-500, #1a82ff))}
|
|
209
220
|
.a2-bg-status-success {background-color: var(--status-color-success, var(--a2-color-green-500, #09a569))}
|
|
@@ -259,6 +270,7 @@
|
|
|
259
270
|
.a2-c-on-primary {color: var(--foreground-color-on-primary, var(--a2-color-neutral-0, #ffffff))}
|
|
260
271
|
.a2-c-on-primary-active {color: var(--foreground-color-on-primary-active, var(--a2-color-neutral-0, #ffffff))}
|
|
261
272
|
.a2-c-on-primary-hover {color: var(--foreground-color-on-primary-hover, var(--a2-color-neutral-0, #ffffff))}
|
|
273
|
+
.a2-c-on-success {color: var(--foreground-color-on-success, var(--a2-color-neutral-0, #ffffff))}
|
|
262
274
|
.a2-c-on-warning {color: var(--foreground-color-on-warning, var(--a2-color-neutral-950, #040404))}
|
|
263
275
|
.a2-c-primary {color: var(--foreground-color-primary, var(--a2-color-blue-500, #1a82ff))}
|
|
264
276
|
.a2-c-primary-active {color: var(--foreground-color-primary-active, var(--a2-color-blue-600, #0065de))}
|
|
@@ -294,6 +306,9 @@
|
|
|
294
306
|
.a2-bg-secondary {background-color: var(--background-color-secondary, light-dark(#0404040F, #ffffff0F))}
|
|
295
307
|
.a2-bg-secondary-active {background-color: var(--background-color-secondary-active, light-dark(#04040429, #ffffff29))}
|
|
296
308
|
.a2-bg-secondary-hover {background-color: var(--background-color-secondary-hover, light-dark(#04040414, #ffffff14))}
|
|
309
|
+
.a2-bg-secondary-strong {background-color: var(--background-color-secondary-strong, light-dark(#1a1a1a0F, #ffffff0F))}
|
|
310
|
+
.a2-bg-secondary-strong-active {background-color: var(--background-color-secondary-strong-active, light-dark(#1a1a1a29, #ffffff29))}
|
|
311
|
+
.a2-bg-secondary-strong-hover {background-color: var(--background-color-secondary-strong-hover, light-dark(#1a1a1a14, #ffffff14))}
|
|
297
312
|
.a2-bg-status-danger {background-color: var(--status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc)))}
|
|
298
313
|
.a2-bg-status-info {background-color: var(--status-color-info, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-100, #cce3ff)))}
|
|
299
314
|
.a2-bg-status-success {background-color: var(--status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd)))}
|
|
@@ -346,6 +361,7 @@
|
|
|
346
361
|
.a2-c-on-primary {color: var(--foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
347
362
|
.a2-c-on-primary-active {color: var(--foreground-color-on-primary-active, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
348
363
|
.a2-c-on-primary-hover {color: var(--foreground-color-on-primary-hover, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
364
|
+
.a2-c-on-success {color: var(--foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
349
365
|
.a2-c-on-warning {color: var(--foreground-color-on-warning, var(--a2-color-neutral-950, #040404))}
|
|
350
366
|
.a2-c-primary {color: var(--foreground-color-primary, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff)))}
|
|
351
367
|
.a2-c-primary-active {color: var(--foreground-color-primary-active, light-dark(var(--a2-color-blue-600, #0065de), var(--a2-color-blue-200, #9ecaff)))}
|
|
@@ -300,6 +300,9 @@
|
|
|
300
300
|
.a2-bg-secondary {background-color: var(--background-color-secondary, #0404040F)}
|
|
301
301
|
.a2-bg-secondary-active {background-color: var(--background-color-secondary-active, #04040429)}
|
|
302
302
|
.a2-bg-secondary-hover {background-color: var(--background-color-secondary-hover, #04040414)}
|
|
303
|
+
.a2-bg-secondary-strong {background-color: var(--background-color-secondary-strong, #1a1a1a0F)}
|
|
304
|
+
.a2-bg-secondary-strong-active {background-color: var(--background-color-secondary-strong-active, #1a1a1a29)}
|
|
305
|
+
.a2-bg-secondary-strong-hover {background-color: var(--background-color-secondary-strong-hover, #1a1a1a14)}
|
|
303
306
|
.a2-bg-status-danger {background-color: var(--status-color-danger, var(--a2-color-red-500, #ff3914))}
|
|
304
307
|
.a2-bg-status-info {background-color: var(--status-color-info, var(--a2-color-blue-500, #1a82ff))}
|
|
305
308
|
.a2-bg-status-success {background-color: var(--status-color-success, var(--a2-color-green-500, #09a569))}
|
|
@@ -355,6 +358,7 @@
|
|
|
355
358
|
.a2-c-on-primary {color: var(--foreground-color-on-primary, var(--a2-color-neutral-0, #ffffff))}
|
|
356
359
|
.a2-c-on-primary-active {color: var(--foreground-color-on-primary-active, var(--a2-color-neutral-0, #ffffff))}
|
|
357
360
|
.a2-c-on-primary-hover {color: var(--foreground-color-on-primary-hover, var(--a2-color-neutral-0, #ffffff))}
|
|
361
|
+
.a2-c-on-success {color: var(--foreground-color-on-success, var(--a2-color-neutral-0, #ffffff))}
|
|
358
362
|
.a2-c-on-warning {color: var(--foreground-color-on-warning, var(--a2-color-neutral-950, #040404))}
|
|
359
363
|
.a2-c-primary {color: var(--foreground-color-primary, var(--a2-color-blue-500, #1a82ff))}
|
|
360
364
|
.a2-c-primary-active {color: var(--foreground-color-primary-active, var(--a2-color-blue-600, #0065de))}
|
|
@@ -391,6 +395,9 @@
|
|
|
391
395
|
.a2-bg-secondary {background-color: var(--background-color-secondary, light-dark(#0404040F, #ffffff0F))}
|
|
392
396
|
.a2-bg-secondary-active {background-color: var(--background-color-secondary-active, light-dark(#04040429, #ffffff29))}
|
|
393
397
|
.a2-bg-secondary-hover {background-color: var(--background-color-secondary-hover, light-dark(#04040414, #ffffff14))}
|
|
398
|
+
.a2-bg-secondary-strong {background-color: var(--background-color-secondary-strong, light-dark(#1a1a1a0F, #ffffff0F))}
|
|
399
|
+
.a2-bg-secondary-strong-active {background-color: var(--background-color-secondary-strong-active, light-dark(#1a1a1a29, #ffffff29))}
|
|
400
|
+
.a2-bg-secondary-strong-hover {background-color: var(--background-color-secondary-strong-hover, light-dark(#1a1a1a14, #ffffff14))}
|
|
394
401
|
.a2-bg-status-danger {background-color: var(--status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc)))}
|
|
395
402
|
.a2-bg-status-info {background-color: var(--status-color-info, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-100, #cce3ff)))}
|
|
396
403
|
.a2-bg-status-success {background-color: var(--status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd)))}
|
|
@@ -443,6 +450,7 @@
|
|
|
443
450
|
.a2-c-on-primary {color: var(--foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
444
451
|
.a2-c-on-primary-active {color: var(--foreground-color-on-primary-active, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
445
452
|
.a2-c-on-primary-hover {color: var(--foreground-color-on-primary-hover, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
453
|
+
.a2-c-on-success {color: var(--foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
446
454
|
.a2-c-on-warning {color: var(--foreground-color-on-warning, var(--a2-color-neutral-950, #040404))}
|
|
447
455
|
.a2-c-primary {color: var(--foreground-color-primary, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff)))}
|
|
448
456
|
.a2-c-primary-active {color: var(--foreground-color-primary-active, light-dark(var(--a2-color-blue-600, #0065de), var(--a2-color-blue-200, #9ecaff)))}
|
|
@@ -755,6 +763,9 @@
|
|
|
755
763
|
.a2-bg-secondary {background-color: var(--background-color-secondary, #0404040F)}
|
|
756
764
|
.a2-bg-secondary-active {background-color: var(--background-color-secondary-active, #04040429)}
|
|
757
765
|
.a2-bg-secondary-hover {background-color: var(--background-color-secondary-hover, #04040414)}
|
|
766
|
+
.a2-bg-secondary-strong {background-color: var(--background-color-secondary-strong, #1a1a1a0F)}
|
|
767
|
+
.a2-bg-secondary-strong-active {background-color: var(--background-color-secondary-strong-active, #1a1a1a29)}
|
|
768
|
+
.a2-bg-secondary-strong-hover {background-color: var(--background-color-secondary-strong-hover, #1a1a1a14)}
|
|
758
769
|
.a2-bg-status-danger {background-color: var(--status-color-danger, var(--a2-color-red-500, #ff3914))}
|
|
759
770
|
.a2-bg-status-info {background-color: var(--status-color-info, var(--a2-color-blue-500, #1a82ff))}
|
|
760
771
|
.a2-bg-status-success {background-color: var(--status-color-success, var(--a2-color-green-500, #09a569))}
|
|
@@ -810,6 +821,7 @@
|
|
|
810
821
|
.a2-c-on-primary {color: var(--foreground-color-on-primary, var(--a2-color-neutral-0, #ffffff))}
|
|
811
822
|
.a2-c-on-primary-active {color: var(--foreground-color-on-primary-active, var(--a2-color-neutral-0, #ffffff))}
|
|
812
823
|
.a2-c-on-primary-hover {color: var(--foreground-color-on-primary-hover, var(--a2-color-neutral-0, #ffffff))}
|
|
824
|
+
.a2-c-on-success {color: var(--foreground-color-on-success, var(--a2-color-neutral-0, #ffffff))}
|
|
813
825
|
.a2-c-on-warning {color: var(--foreground-color-on-warning, var(--a2-color-neutral-950, #040404))}
|
|
814
826
|
.a2-c-primary {color: var(--foreground-color-primary, var(--a2-color-blue-500, #1a82ff))}
|
|
815
827
|
.a2-c-primary-active {color: var(--foreground-color-primary-active, var(--a2-color-blue-600, #0065de))}
|
|
@@ -846,6 +858,9 @@
|
|
|
846
858
|
.a2-bg-secondary {background-color: var(--background-color-secondary, light-dark(#0404040F, #ffffff0F))}
|
|
847
859
|
.a2-bg-secondary-active {background-color: var(--background-color-secondary-active, light-dark(#04040429, #ffffff29))}
|
|
848
860
|
.a2-bg-secondary-hover {background-color: var(--background-color-secondary-hover, light-dark(#04040414, #ffffff14))}
|
|
861
|
+
.a2-bg-secondary-strong {background-color: var(--background-color-secondary-strong, light-dark(#1a1a1a0F, #ffffff0F))}
|
|
862
|
+
.a2-bg-secondary-strong-active {background-color: var(--background-color-secondary-strong-active, light-dark(#1a1a1a29, #ffffff29))}
|
|
863
|
+
.a2-bg-secondary-strong-hover {background-color: var(--background-color-secondary-strong-hover, light-dark(#1a1a1a14, #ffffff14))}
|
|
849
864
|
.a2-bg-status-danger {background-color: var(--status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc)))}
|
|
850
865
|
.a2-bg-status-info {background-color: var(--status-color-info, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-100, #cce3ff)))}
|
|
851
866
|
.a2-bg-status-success {background-color: var(--status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd)))}
|
|
@@ -898,6 +913,7 @@
|
|
|
898
913
|
.a2-c-on-primary {color: var(--foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
899
914
|
.a2-c-on-primary-active {color: var(--foreground-color-on-primary-active, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
900
915
|
.a2-c-on-primary-hover {color: var(--foreground-color-on-primary-hover, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
916
|
+
.a2-c-on-success {color: var(--foreground-color-on-success, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404)))}
|
|
901
917
|
.a2-c-on-warning {color: var(--foreground-color-on-warning, var(--a2-color-neutral-950, #040404))}
|
|
902
918
|
.a2-c-primary {color: var(--foreground-color-primary, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff)))}
|
|
903
919
|
.a2-c-primary-active {color: var(--foreground-color-primary-active, light-dark(var(--a2-color-blue-600, #0065de), var(--a2-color-blue-200, #9ecaff)))}
|