@triptease/stylesheet 1.4.4 → 1.4.5
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/dist/_variables.css +8 -0
- package/dist/base.css +9 -1
- package/dist/blocks.css +69 -2
- package/dist/compositions.css +1 -1
- package/dist/exceptions.css +1 -1
- package/dist/triptease.css +76 -2
- package/dist/utilities.css +1 -1
- package/dist/web/tokens.json +320 -0
- package/package.json +1 -1
package/dist/_variables.css
CHANGED
|
@@ -13,6 +13,8 @@
|
|
|
13
13
|
--color-alert-300: #f93939;
|
|
14
14
|
--color-alert-400: #da0707;
|
|
15
15
|
--color-alert-500: #a80505;
|
|
16
|
+
--color-alert-subtle: #ffd8eb;
|
|
17
|
+
--color-alert-strong: #d02521;
|
|
16
18
|
--color-border-100: #e8eaec;
|
|
17
19
|
--color-border-200: #e0e1e5;
|
|
18
20
|
--color-border-300: #d7d9dd;
|
|
@@ -33,6 +35,8 @@
|
|
|
33
35
|
--color-info-300: #8fcbff;
|
|
34
36
|
--color-info-400: #0b99ff;
|
|
35
37
|
--color-info-500: #007dd6;
|
|
38
|
+
--color-info-subtle: #f0f8ff;
|
|
39
|
+
--color-info-strong: #2475b9;
|
|
36
40
|
--color-primary-100: #f3f0fa;
|
|
37
41
|
--color-primary-200: #e8e3f6;
|
|
38
42
|
--color-primary-300: #cfc6ed;
|
|
@@ -43,6 +47,8 @@
|
|
|
43
47
|
--color-success-300: #a7db93;
|
|
44
48
|
--color-success-400: #86d06d;
|
|
45
49
|
--color-success-500: #65c345;
|
|
50
|
+
--color-success-subtle: #def5d6;
|
|
51
|
+
--color-success-strong: #227d02;
|
|
46
52
|
--color-surface-100: #ffffff;
|
|
47
53
|
--color-surface-200: #f9fafb;
|
|
48
54
|
--color-surface-300: #f1f2f4;
|
|
@@ -61,6 +67,8 @@
|
|
|
61
67
|
--color-warning-300: #ffce8f;
|
|
62
68
|
--color-warning-400: #ffb95e;
|
|
63
69
|
--color-warning-500: #ff9d1f;
|
|
70
|
+
--color-warning-subtle: #ffedd6;
|
|
71
|
+
--color-warning-strong: #ac5500;
|
|
64
72
|
--font-family-serif: 'Noe Text', 'PT Serif', serif;
|
|
65
73
|
--font-family-sans: 'Roboto', sans-serif;
|
|
66
74
|
--font-family-inter: 'Inter', 'Helvetica Neue', sans-serif;
|
package/dist/base.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @triptease/stylesheet v1.4.
|
|
2
|
+
* @triptease/stylesheet v1.4.5
|
|
3
3
|
*/
|
|
4
4
|
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
|
|
5
5
|
@import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
|
|
@@ -20,6 +20,8 @@
|
|
|
20
20
|
--color-alert-300: #f93939;
|
|
21
21
|
--color-alert-400: #da0707;
|
|
22
22
|
--color-alert-500: #a80505;
|
|
23
|
+
--color-alert-subtle: #ffd8eb;
|
|
24
|
+
--color-alert-strong: #d02521;
|
|
23
25
|
--color-border-100: #e8eaec;
|
|
24
26
|
--color-border-200: #e0e1e5;
|
|
25
27
|
--color-border-300: #d7d9dd;
|
|
@@ -40,6 +42,8 @@
|
|
|
40
42
|
--color-info-300: #8fcbff;
|
|
41
43
|
--color-info-400: #0b99ff;
|
|
42
44
|
--color-info-500: #007dd6;
|
|
45
|
+
--color-info-subtle: #f0f8ff;
|
|
46
|
+
--color-info-strong: #2475b9;
|
|
43
47
|
--color-primary-100: #f3f0fa;
|
|
44
48
|
--color-primary-200: #e8e3f6;
|
|
45
49
|
--color-primary-300: #cfc6ed;
|
|
@@ -50,6 +54,8 @@
|
|
|
50
54
|
--color-success-300: #a7db93;
|
|
51
55
|
--color-success-400: #86d06d;
|
|
52
56
|
--color-success-500: #65c345;
|
|
57
|
+
--color-success-subtle: #def5d6;
|
|
58
|
+
--color-success-strong: #227d02;
|
|
53
59
|
--color-surface-100: #ffffff;
|
|
54
60
|
--color-surface-200: #f9fafb;
|
|
55
61
|
--color-surface-300: #f1f2f4;
|
|
@@ -68,6 +74,8 @@
|
|
|
68
74
|
--color-warning-300: #ffce8f;
|
|
69
75
|
--color-warning-400: #ffb95e;
|
|
70
76
|
--color-warning-500: #ff9d1f;
|
|
77
|
+
--color-warning-subtle: #ffedd6;
|
|
78
|
+
--color-warning-strong: #ac5500;
|
|
71
79
|
--font-family-serif: 'Noe Text', 'PT Serif', serif;
|
|
72
80
|
--font-family-sans: 'Roboto', sans-serif;
|
|
73
81
|
--font-family-inter: 'Inter', 'Helvetica Neue', sans-serif;
|
package/dist/blocks.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @triptease/stylesheet v1.4.
|
|
2
|
+
* @triptease/stylesheet v1.4.5
|
|
3
3
|
*/
|
|
4
4
|
/*
|
|
5
5
|
Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
|
|
@@ -72,6 +72,73 @@
|
|
|
72
72
|
}
|
|
73
73
|
}
|
|
74
74
|
|
|
75
|
+
@layer blocks {
|
|
76
|
+
.banner {
|
|
77
|
+
display: grid;
|
|
78
|
+
gap: var(--space-scale-1);
|
|
79
|
+
grid-template-columns: min-content 1fr min-content;
|
|
80
|
+
grid-template-areas: 'icon body action';
|
|
81
|
+
align-items: center;
|
|
82
|
+
padding: var(--space-scale-1) var(--space-scale-2);
|
|
83
|
+
border-radius: var(--border-radius-200);
|
|
84
|
+
color: var(--color-text-400);
|
|
85
|
+
background-color: var(--color-info-subtle);
|
|
86
|
+
|
|
87
|
+
.banner--body {
|
|
88
|
+
grid-area: body;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.banner--action {
|
|
92
|
+
grid-area: action;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.banner--title {
|
|
96
|
+
font-weight: var(--font-weight-semibold);
|
|
97
|
+
grid-area: title;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&:has(.banner--title) {
|
|
101
|
+
grid-template-rows: min-content 1fr;
|
|
102
|
+
grid-template-areas:
|
|
103
|
+
'icon title action'
|
|
104
|
+
'. body .';
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&::before {
|
|
108
|
+
display: block;
|
|
109
|
+
grid-area: icon;
|
|
110
|
+
content: '';
|
|
111
|
+
width: 24px;
|
|
112
|
+
height: 24px;
|
|
113
|
+
background-color: var(--color-info-strong);
|
|
114
|
+
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 15.75C11.25 16.1642 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.1642 12.75 15.75V10.25C12.75 9.83579 12.4142 9.5 12 9.5C11.5858 9.5 11.25 9.83579 11.25 10.25V15.75ZM12.75 7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75Z" fill="currentColor"/> </svg>');
|
|
115
|
+
mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 15.75C11.25 16.1642 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.1642 12.75 15.75V10.25C12.75 9.83579 12.4142 9.5 12 9.5C11.5858 9.5 11.25 9.83579 11.25 10.25V15.75ZM12.75 7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75Z" fill="currentColor"/> </svg>');
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
&[data-theme='warning'] {
|
|
119
|
+
color: var(--color-text-400);
|
|
120
|
+
background-color: var(--color-warning-subtle);
|
|
121
|
+
|
|
122
|
+
&::before {
|
|
123
|
+
background-color: var(--color-warning-strong);
|
|
124
|
+
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 7.75C11.25 7.33579 11.5858 7 12 7C12.4142 7 12.75 7.33579 12.75 7.75V13.25C12.75 13.6642 12.4142 14 12 14C11.5858 14 11.25 13.6642 11.25 13.25V7.75ZM12.75 15.75C12.75 16.1642 12.4142 16.5 12 16.5C11.5858 16.5 11.25 16.1642 11.25 15.75C11.25 15.3358 11.5858 15 12 15C12.4142 15 12.75 15.3358 12.75 15.75Z" fill="currentColor"/> </svg>');
|
|
125
|
+
mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 7.75C11.25 7.33579 11.5858 7 12 7C12.4142 7 12.75 7.33579 12.75 7.75V13.25C12.75 13.6642 12.4142 14 12 14C11.5858 14 11.25 13.6642 11.25 13.25V7.75ZM12.75 15.75C12.75 16.1642 12.4142 16.5 12 16.5C11.5858 16.5 11.25 16.1642 11.25 15.75C11.25 15.3358 11.5858 15 12 15C12.4142 15 12.75 15.3358 12.75 15.75Z" fill="currentColor"/> </svg>');
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&[data-theme='alert'] {
|
|
130
|
+
color: var(--color-text-400);
|
|
131
|
+
background-color: var(--color-alert-subtle);
|
|
132
|
+
|
|
133
|
+
&::before {
|
|
134
|
+
background-color: var(--color-alert-strong);
|
|
135
|
+
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.25 5.75C9.25 5.33579 9.58579 5 10 5C10.4142 5 10.75 5.33579 10.75 5.75V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V5.75ZM10.75 13.75C10.75 14.1642 10.4142 14.5 10 14.5C9.58579 14.5 9.25 14.1642 9.25 13.75C9.25 13.3358 9.58579 13 10 13C10.4142 13 10.75 13.3358 10.75 13.75Z" fill="currentColor"/> </svg>');
|
|
136
|
+
mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.25 5.75C9.25 5.33579 9.58579 5 10 5C10.4142 5 10.75 5.33579 10.75 5.75V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V5.75ZM10.75 13.75C10.75 14.1642 10.4142 14.5 10 14.5C9.58579 14.5 9.25 14.1642 9.25 13.75C9.25 13.3358 9.58579 13 10 13C10.4142 13 10.75 13.3358 10.75 13.75Z" fill="currentColor"/> </svg>');
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
|
|
75
142
|
@layer blocks {
|
|
76
143
|
|
|
77
144
|
@property --card-padding {
|
|
@@ -182,7 +249,7 @@ header[data-theme='top-nav'] {
|
|
|
182
249
|
'context context';
|
|
183
250
|
-moz-column-gap: var(--space-scale-1);
|
|
184
251
|
column-gap: var(--space-scale-1);
|
|
185
|
-
|
|
252
|
+
row-gap: var(--space-scale-0-5);
|
|
186
253
|
align-items: center;
|
|
187
254
|
|
|
188
255
|
.statistic--indicator {
|
package/dist/compositions.css
CHANGED
package/dist/exceptions.css
CHANGED
package/dist/triptease.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*
|
|
2
|
-
* @triptease/stylesheet v1.4.
|
|
2
|
+
* @triptease/stylesheet v1.4.5
|
|
3
3
|
*/
|
|
4
4
|
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
|
|
5
5
|
@import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
|
|
@@ -20,6 +20,8 @@
|
|
|
20
20
|
--color-alert-300: #f93939;
|
|
21
21
|
--color-alert-400: #da0707;
|
|
22
22
|
--color-alert-500: #a80505;
|
|
23
|
+
--color-alert-subtle: #ffd8eb;
|
|
24
|
+
--color-alert-strong: #d02521;
|
|
23
25
|
--color-border-100: #e8eaec;
|
|
24
26
|
--color-border-200: #e0e1e5;
|
|
25
27
|
--color-border-300: #d7d9dd;
|
|
@@ -40,6 +42,8 @@
|
|
|
40
42
|
--color-info-300: #8fcbff;
|
|
41
43
|
--color-info-400: #0b99ff;
|
|
42
44
|
--color-info-500: #007dd6;
|
|
45
|
+
--color-info-subtle: #f0f8ff;
|
|
46
|
+
--color-info-strong: #2475b9;
|
|
43
47
|
--color-primary-100: #f3f0fa;
|
|
44
48
|
--color-primary-200: #e8e3f6;
|
|
45
49
|
--color-primary-300: #cfc6ed;
|
|
@@ -50,6 +54,8 @@
|
|
|
50
54
|
--color-success-300: #a7db93;
|
|
51
55
|
--color-success-400: #86d06d;
|
|
52
56
|
--color-success-500: #65c345;
|
|
57
|
+
--color-success-subtle: #def5d6;
|
|
58
|
+
--color-success-strong: #227d02;
|
|
53
59
|
--color-surface-100: #ffffff;
|
|
54
60
|
--color-surface-200: #f9fafb;
|
|
55
61
|
--color-surface-300: #f1f2f4;
|
|
@@ -68,6 +74,8 @@
|
|
|
68
74
|
--color-warning-300: #ffce8f;
|
|
69
75
|
--color-warning-400: #ffb95e;
|
|
70
76
|
--color-warning-500: #ff9d1f;
|
|
77
|
+
--color-warning-subtle: #ffedd6;
|
|
78
|
+
--color-warning-strong: #ac5500;
|
|
71
79
|
--font-family-serif: 'Noe Text', 'PT Serif', serif;
|
|
72
80
|
--font-family-sans: 'Roboto', sans-serif;
|
|
73
81
|
--font-family-inter: 'Inter', 'Helvetica Neue', sans-serif;
|
|
@@ -1246,6 +1254,72 @@ body {
|
|
|
1246
1254
|
}
|
|
1247
1255
|
}
|
|
1248
1256
|
@layer blocks{
|
|
1257
|
+
.banner {
|
|
1258
|
+
display: grid;
|
|
1259
|
+
gap: var(--space-scale-1);
|
|
1260
|
+
grid-template-columns: min-content 1fr min-content;
|
|
1261
|
+
grid-template-areas: 'icon body action';
|
|
1262
|
+
align-items: center;
|
|
1263
|
+
padding: var(--space-scale-1) var(--space-scale-2);
|
|
1264
|
+
border-radius: var(--border-radius-200);
|
|
1265
|
+
color: var(--color-text-400);
|
|
1266
|
+
background-color: var(--color-info-subtle);
|
|
1267
|
+
|
|
1268
|
+
.banner--body {
|
|
1269
|
+
grid-area: body;
|
|
1270
|
+
}
|
|
1271
|
+
|
|
1272
|
+
.banner--action {
|
|
1273
|
+
grid-area: action;
|
|
1274
|
+
}
|
|
1275
|
+
|
|
1276
|
+
.banner--title {
|
|
1277
|
+
font-weight: var(--font-weight-semibold);
|
|
1278
|
+
grid-area: title;
|
|
1279
|
+
}
|
|
1280
|
+
|
|
1281
|
+
&:has(.banner--title) {
|
|
1282
|
+
grid-template-rows: min-content 1fr;
|
|
1283
|
+
grid-template-areas:
|
|
1284
|
+
'icon title action'
|
|
1285
|
+
'. body .';
|
|
1286
|
+
}
|
|
1287
|
+
|
|
1288
|
+
&::before {
|
|
1289
|
+
display: block;
|
|
1290
|
+
grid-area: icon;
|
|
1291
|
+
content: '';
|
|
1292
|
+
width: 24px;
|
|
1293
|
+
height: 24px;
|
|
1294
|
+
background-color: var(--color-info-strong);
|
|
1295
|
+
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 15.75C11.25 16.1642 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.1642 12.75 15.75V10.25C12.75 9.83579 12.4142 9.5 12 9.5C11.5858 9.5 11.25 9.83579 11.25 10.25V15.75ZM12.75 7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75Z" fill="currentColor"/> </svg>');
|
|
1296
|
+
mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 15.75C11.25 16.1642 11.5858 16.5 12 16.5C12.4142 16.5 12.75 16.1642 12.75 15.75V10.25C12.75 9.83579 12.4142 9.5 12 9.5C11.5858 9.5 11.25 9.83579 11.25 10.25V15.75ZM12.75 7.75C12.75 7.33579 12.4142 7 12 7C11.5858 7 11.25 7.33579 11.25 7.75C11.25 8.16421 11.5858 8.5 12 8.5C12.4142 8.5 12.75 8.16421 12.75 7.75Z" fill="currentColor"/> </svg>');
|
|
1297
|
+
}
|
|
1298
|
+
|
|
1299
|
+
&[data-theme='warning'] {
|
|
1300
|
+
color: var(--color-text-400);
|
|
1301
|
+
background-color: var(--color-warning-subtle);
|
|
1302
|
+
|
|
1303
|
+
&::before {
|
|
1304
|
+
background-color: var(--color-warning-strong);
|
|
1305
|
+
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 7.75C11.25 7.33579 11.5858 7 12 7C12.4142 7 12.75 7.33579 12.75 7.75V13.25C12.75 13.6642 12.4142 14 12 14C11.5858 14 11.25 13.6642 11.25 13.25V7.75ZM12.75 15.75C12.75 16.1642 12.4142 16.5 12 16.5C11.5858 16.5 11.25 16.1642 11.25 15.75C11.25 15.3358 11.5858 15 12 15C12.4142 15 12.75 15.3358 12.75 15.75Z" fill="currentColor"/> </svg>');
|
|
1306
|
+
mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M20.5 12C20.5 16.6944 16.6944 20.5 12 20.5C7.30558 20.5 3.5 16.6944 3.5 12C3.5 7.30558 7.30558 3.5 12 3.5C16.6944 3.5 20.5 7.30558 20.5 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM11.25 7.75C11.25 7.33579 11.5858 7 12 7C12.4142 7 12.75 7.33579 12.75 7.75V13.25C12.75 13.6642 12.4142 14 12 14C11.5858 14 11.25 13.6642 11.25 13.25V7.75ZM12.75 15.75C12.75 16.1642 12.4142 16.5 12 16.5C11.5858 16.5 11.25 16.1642 11.25 15.75C11.25 15.3358 11.5858 15 12 15C12.4142 15 12.75 15.3358 12.75 15.75Z" fill="currentColor"/> </svg>');
|
|
1307
|
+
}
|
|
1308
|
+
}
|
|
1309
|
+
|
|
1310
|
+
&[data-theme='alert'] {
|
|
1311
|
+
color: var(--color-text-400);
|
|
1312
|
+
background-color: var(--color-alert-subtle);
|
|
1313
|
+
|
|
1314
|
+
&::before {
|
|
1315
|
+
background-color: var(--color-alert-strong);
|
|
1316
|
+
-webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.25 5.75C9.25 5.33579 9.58579 5 10 5C10.4142 5 10.75 5.33579 10.75 5.75V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V5.75ZM10.75 13.75C10.75 14.1642 10.4142 14.5 10 14.5C9.58579 14.5 9.25 14.1642 9.25 13.75C9.25 13.3358 9.58579 13 10 13C10.4142 13 10.75 13.3358 10.75 13.75Z" fill="currentColor"/> </svg>');
|
|
1317
|
+
mask-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20ZM9.25 5.75C9.25 5.33579 9.58579 5 10 5C10.4142 5 10.75 5.33579 10.75 5.75V11.25C10.75 11.6642 10.4142 12 10 12C9.58579 12 9.25 11.6642 9.25 11.25V5.75ZM10.75 13.75C10.75 14.1642 10.4142 14.5 10 14.5C9.58579 14.5 9.25 14.1642 9.25 13.75C9.25 13.3358 9.58579 13 10 13C10.4142 13 10.75 13.3358 10.75 13.75Z" fill="currentColor"/> </svg>');
|
|
1318
|
+
}
|
|
1319
|
+
}
|
|
1320
|
+
}
|
|
1321
|
+
}
|
|
1322
|
+
@layer blocks{
|
|
1249
1323
|
|
|
1250
1324
|
@property --card-padding {
|
|
1251
1325
|
syntax: '<length>';
|
|
@@ -1353,7 +1427,7 @@ header[data-theme='top-nav'] {
|
|
|
1353
1427
|
'context context';
|
|
1354
1428
|
-moz-column-gap: var(--space-scale-1);
|
|
1355
1429
|
column-gap: var(--space-scale-1);
|
|
1356
|
-
|
|
1430
|
+
row-gap: var(--space-scale-0-5);
|
|
1357
1431
|
align-items: center;
|
|
1358
1432
|
|
|
1359
1433
|
.statistic--indicator {
|
package/dist/utilities.css
CHANGED
package/dist/web/tokens.json
CHANGED
|
@@ -363,6 +363,86 @@
|
|
|
363
363
|
"alert",
|
|
364
364
|
"500"
|
|
365
365
|
]
|
|
366
|
+
},
|
|
367
|
+
"subtle": {
|
|
368
|
+
"value": "#FFD8EB",
|
|
369
|
+
"type": "color",
|
|
370
|
+
"filePath": "tokens/src/color/alert.json",
|
|
371
|
+
"isSource": true,
|
|
372
|
+
"original": {
|
|
373
|
+
"value": "#FFD8EB",
|
|
374
|
+
"type": "color"
|
|
375
|
+
},
|
|
376
|
+
"name": "subtle ",
|
|
377
|
+
"attributes": {
|
|
378
|
+
"category": "color",
|
|
379
|
+
"type": "alert",
|
|
380
|
+
"item": "subtle",
|
|
381
|
+
"hex": "ffd8eb",
|
|
382
|
+
"rgb": {
|
|
383
|
+
"r": 255,
|
|
384
|
+
"g": 216,
|
|
385
|
+
"b": 235,
|
|
386
|
+
"a": 1
|
|
387
|
+
},
|
|
388
|
+
"hsl": {
|
|
389
|
+
"h": 330.7692307692308,
|
|
390
|
+
"s": 1,
|
|
391
|
+
"l": 0.9235294117647059,
|
|
392
|
+
"a": 1
|
|
393
|
+
},
|
|
394
|
+
"hsv": {
|
|
395
|
+
"h": 330.7692307692308,
|
|
396
|
+
"s": 0.15294117647058825,
|
|
397
|
+
"v": 1,
|
|
398
|
+
"a": 1
|
|
399
|
+
}
|
|
400
|
+
},
|
|
401
|
+
"path": [
|
|
402
|
+
"color",
|
|
403
|
+
"alert",
|
|
404
|
+
"subtle"
|
|
405
|
+
]
|
|
406
|
+
},
|
|
407
|
+
"strong": {
|
|
408
|
+
"value": "#D02521",
|
|
409
|
+
"type": "color",
|
|
410
|
+
"filePath": "tokens/src/color/alert.json",
|
|
411
|
+
"isSource": true,
|
|
412
|
+
"original": {
|
|
413
|
+
"value": "#D02521",
|
|
414
|
+
"type": "color"
|
|
415
|
+
},
|
|
416
|
+
"name": "strong ",
|
|
417
|
+
"attributes": {
|
|
418
|
+
"category": "color",
|
|
419
|
+
"type": "alert",
|
|
420
|
+
"item": "strong",
|
|
421
|
+
"hex": "d02521",
|
|
422
|
+
"rgb": {
|
|
423
|
+
"r": 208,
|
|
424
|
+
"g": 37,
|
|
425
|
+
"b": 33,
|
|
426
|
+
"a": 1
|
|
427
|
+
},
|
|
428
|
+
"hsl": {
|
|
429
|
+
"h": 1.3714285714285714,
|
|
430
|
+
"s": 0.7261410788381742,
|
|
431
|
+
"l": 0.4725490196078431,
|
|
432
|
+
"a": 1
|
|
433
|
+
},
|
|
434
|
+
"hsv": {
|
|
435
|
+
"h": 1.3714285714285714,
|
|
436
|
+
"s": 0.8413461538461539,
|
|
437
|
+
"v": 0.8156862745098039,
|
|
438
|
+
"a": 1
|
|
439
|
+
}
|
|
440
|
+
},
|
|
441
|
+
"path": [
|
|
442
|
+
"color",
|
|
443
|
+
"alert",
|
|
444
|
+
"strong"
|
|
445
|
+
]
|
|
366
446
|
}
|
|
367
447
|
},
|
|
368
448
|
"border": {
|
|
@@ -1181,6 +1261,86 @@
|
|
|
1181
1261
|
"info",
|
|
1182
1262
|
"500"
|
|
1183
1263
|
]
|
|
1264
|
+
},
|
|
1265
|
+
"subtle": {
|
|
1266
|
+
"value": "#F0F8FF",
|
|
1267
|
+
"type": "color",
|
|
1268
|
+
"filePath": "tokens/src/color/info.json",
|
|
1269
|
+
"isSource": true,
|
|
1270
|
+
"original": {
|
|
1271
|
+
"value": "#F0F8FF",
|
|
1272
|
+
"type": "color"
|
|
1273
|
+
},
|
|
1274
|
+
"name": "subtle ",
|
|
1275
|
+
"attributes": {
|
|
1276
|
+
"category": "color",
|
|
1277
|
+
"type": "info",
|
|
1278
|
+
"item": "subtle",
|
|
1279
|
+
"hex": "f0f8ff",
|
|
1280
|
+
"rgb": {
|
|
1281
|
+
"r": 240,
|
|
1282
|
+
"g": 248,
|
|
1283
|
+
"b": 255,
|
|
1284
|
+
"a": 1
|
|
1285
|
+
},
|
|
1286
|
+
"hsl": {
|
|
1287
|
+
"h": 208.00000000000003,
|
|
1288
|
+
"s": 1,
|
|
1289
|
+
"l": 0.9705882352941176,
|
|
1290
|
+
"a": 1
|
|
1291
|
+
},
|
|
1292
|
+
"hsv": {
|
|
1293
|
+
"h": 208.00000000000003,
|
|
1294
|
+
"s": 0.05882352941176472,
|
|
1295
|
+
"v": 1,
|
|
1296
|
+
"a": 1
|
|
1297
|
+
}
|
|
1298
|
+
},
|
|
1299
|
+
"path": [
|
|
1300
|
+
"color",
|
|
1301
|
+
"info",
|
|
1302
|
+
"subtle"
|
|
1303
|
+
]
|
|
1304
|
+
},
|
|
1305
|
+
"strong": {
|
|
1306
|
+
"value": "#2475B9",
|
|
1307
|
+
"type": "color",
|
|
1308
|
+
"filePath": "tokens/src/color/info.json",
|
|
1309
|
+
"isSource": true,
|
|
1310
|
+
"original": {
|
|
1311
|
+
"value": "#2475B9",
|
|
1312
|
+
"type": "color"
|
|
1313
|
+
},
|
|
1314
|
+
"name": "strong ",
|
|
1315
|
+
"attributes": {
|
|
1316
|
+
"category": "color",
|
|
1317
|
+
"type": "info",
|
|
1318
|
+
"item": "strong",
|
|
1319
|
+
"hex": "2475b9",
|
|
1320
|
+
"rgb": {
|
|
1321
|
+
"r": 36,
|
|
1322
|
+
"g": 117,
|
|
1323
|
+
"b": 185,
|
|
1324
|
+
"a": 1
|
|
1325
|
+
},
|
|
1326
|
+
"hsl": {
|
|
1327
|
+
"h": 207.38255033557044,
|
|
1328
|
+
"s": 0.67420814479638,
|
|
1329
|
+
"l": 0.43333333333333335,
|
|
1330
|
+
"a": 1
|
|
1331
|
+
},
|
|
1332
|
+
"hsv": {
|
|
1333
|
+
"h": 207.38255033557044,
|
|
1334
|
+
"s": 0.8054054054054053,
|
|
1335
|
+
"v": 0.7254901960784313,
|
|
1336
|
+
"a": 1
|
|
1337
|
+
}
|
|
1338
|
+
},
|
|
1339
|
+
"path": [
|
|
1340
|
+
"color",
|
|
1341
|
+
"info",
|
|
1342
|
+
"strong"
|
|
1343
|
+
]
|
|
1184
1344
|
}
|
|
1185
1345
|
},
|
|
1186
1346
|
"primary": {
|
|
@@ -1585,6 +1745,86 @@
|
|
|
1585
1745
|
"success",
|
|
1586
1746
|
"500"
|
|
1587
1747
|
]
|
|
1748
|
+
},
|
|
1749
|
+
"subtle": {
|
|
1750
|
+
"value": "#DEF5D6",
|
|
1751
|
+
"type": "color",
|
|
1752
|
+
"filePath": "tokens/src/color/success.json",
|
|
1753
|
+
"isSource": true,
|
|
1754
|
+
"original": {
|
|
1755
|
+
"value": "#DEF5D6",
|
|
1756
|
+
"type": "color"
|
|
1757
|
+
},
|
|
1758
|
+
"name": "subtle ",
|
|
1759
|
+
"attributes": {
|
|
1760
|
+
"category": "color",
|
|
1761
|
+
"type": "success",
|
|
1762
|
+
"item": "subtle",
|
|
1763
|
+
"hex": "def5d6",
|
|
1764
|
+
"rgb": {
|
|
1765
|
+
"r": 222,
|
|
1766
|
+
"g": 245,
|
|
1767
|
+
"b": 214,
|
|
1768
|
+
"a": 1
|
|
1769
|
+
},
|
|
1770
|
+
"hsl": {
|
|
1771
|
+
"h": 104.51612903225808,
|
|
1772
|
+
"s": 0.6078431372549025,
|
|
1773
|
+
"l": 0.9,
|
|
1774
|
+
"a": 1
|
|
1775
|
+
},
|
|
1776
|
+
"hsv": {
|
|
1777
|
+
"h": 104.51612903225808,
|
|
1778
|
+
"s": 0.12653061224489798,
|
|
1779
|
+
"v": 0.9607843137254902,
|
|
1780
|
+
"a": 1
|
|
1781
|
+
}
|
|
1782
|
+
},
|
|
1783
|
+
"path": [
|
|
1784
|
+
"color",
|
|
1785
|
+
"success",
|
|
1786
|
+
"subtle"
|
|
1787
|
+
]
|
|
1788
|
+
},
|
|
1789
|
+
"strong": {
|
|
1790
|
+
"value": "#227D02",
|
|
1791
|
+
"type": "color",
|
|
1792
|
+
"filePath": "tokens/src/color/success.json",
|
|
1793
|
+
"isSource": true,
|
|
1794
|
+
"original": {
|
|
1795
|
+
"value": "#227D02",
|
|
1796
|
+
"type": "color"
|
|
1797
|
+
},
|
|
1798
|
+
"name": "strong ",
|
|
1799
|
+
"attributes": {
|
|
1800
|
+
"category": "color",
|
|
1801
|
+
"type": "success",
|
|
1802
|
+
"item": "strong",
|
|
1803
|
+
"hex": "227d02",
|
|
1804
|
+
"rgb": {
|
|
1805
|
+
"r": 34,
|
|
1806
|
+
"g": 125,
|
|
1807
|
+
"b": 2,
|
|
1808
|
+
"a": 1
|
|
1809
|
+
},
|
|
1810
|
+
"hsl": {
|
|
1811
|
+
"h": 104.39024390243901,
|
|
1812
|
+
"s": 0.968503937007874,
|
|
1813
|
+
"l": 0.24901960784313726,
|
|
1814
|
+
"a": 1
|
|
1815
|
+
},
|
|
1816
|
+
"hsv": {
|
|
1817
|
+
"h": 104.39024390243901,
|
|
1818
|
+
"s": 0.984,
|
|
1819
|
+
"v": 0.49019607843137253,
|
|
1820
|
+
"a": 1
|
|
1821
|
+
}
|
|
1822
|
+
},
|
|
1823
|
+
"path": [
|
|
1824
|
+
"color",
|
|
1825
|
+
"success",
|
|
1826
|
+
"strong"
|
|
1827
|
+
]
|
|
1588
1828
|
}
|
|
1589
1829
|
},
|
|
1590
1830
|
"surface": {
|
|
@@ -2321,6 +2561,86 @@
|
|
|
2321
2561
|
"warning",
|
|
2322
2562
|
"500"
|
|
2323
2563
|
]
|
|
2564
|
+
},
|
|
2565
|
+
"subtle": {
|
|
2566
|
+
"value": "#FFEDD6",
|
|
2567
|
+
"type": "color",
|
|
2568
|
+
"filePath": "tokens/src/color/warning.json",
|
|
2569
|
+
"isSource": true,
|
|
2570
|
+
"original": {
|
|
2571
|
+
"value": "#FFEDD6",
|
|
2572
|
+
"type": "color"
|
|
2573
|
+
},
|
|
2574
|
+
"name": "subtle ",
|
|
2575
|
+
"attributes": {
|
|
2576
|
+
"category": "color",
|
|
2577
|
+
"type": "warning",
|
|
2578
|
+
"item": "subtle",
|
|
2579
|
+
"hex": "ffedd6",
|
|
2580
|
+
"rgb": {
|
|
2581
|
+
"r": 255,
|
|
2582
|
+
"g": 237,
|
|
2583
|
+
"b": 214,
|
|
2584
|
+
"a": 1
|
|
2585
|
+
},
|
|
2586
|
+
"hsl": {
|
|
2587
|
+
"h": 33.65853658536586,
|
|
2588
|
+
"s": 1,
|
|
2589
|
+
"l": 0.919607843137255,
|
|
2590
|
+
"a": 1
|
|
2591
|
+
},
|
|
2592
|
+
"hsv": {
|
|
2593
|
+
"h": 33.65853658536586,
|
|
2594
|
+
"s": 0.16078431372549018,
|
|
2595
|
+
"v": 1,
|
|
2596
|
+
"a": 1
|
|
2597
|
+
}
|
|
2598
|
+
},
|
|
2599
|
+
"path": [
|
|
2600
|
+
"color",
|
|
2601
|
+
"warning",
|
|
2602
|
+
"subtle"
|
|
2603
|
+
]
|
|
2604
|
+
},
|
|
2605
|
+
"strong": {
|
|
2606
|
+
"value": "#AC5500",
|
|
2607
|
+
"type": "color",
|
|
2608
|
+
"filePath": "tokens/src/color/warning.json",
|
|
2609
|
+
"isSource": true,
|
|
2610
|
+
"original": {
|
|
2611
|
+
"value": "#AC5500",
|
|
2612
|
+
"type": "color"
|
|
2613
|
+
},
|
|
2614
|
+
"name": "strong ",
|
|
2615
|
+
"attributes": {
|
|
2616
|
+
"category": "color",
|
|
2617
|
+
"type": "warning",
|
|
2618
|
+
"item": "strong",
|
|
2619
|
+
"hex": "ac5500",
|
|
2620
|
+
"rgb": {
|
|
2621
|
+
"r": 172,
|
|
2622
|
+
"g": 85,
|
|
2623
|
+
"b": 0,
|
|
2624
|
+
"a": 1
|
|
2625
|
+
},
|
|
2626
|
+
"hsl": {
|
|
2627
|
+
"h": 29.651162790697672,
|
|
2628
|
+
"s": 1,
|
|
2629
|
+
"l": 0.33725490196078434,
|
|
2630
|
+
"a": 1
|
|
2631
|
+
},
|
|
2632
|
+
"hsv": {
|
|
2633
|
+
"h": 29.651162790697672,
|
|
2634
|
+
"s": 1,
|
|
2635
|
+
"v": 0.6745098039215687,
|
|
2636
|
+
"a": 1
|
|
2637
|
+
}
|
|
2638
|
+
},
|
|
2639
|
+
"path": [
|
|
2640
|
+
"color",
|
|
2641
|
+
"warning",
|
|
2642
|
+
"strong"
|
|
2643
|
+
]
|
|
2324
2644
|
}
|
|
2325
2645
|
}
|
|
2326
2646
|
},
|