@triptease/stylesheet 1.4.1 → 1.4.3

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 (7) hide show
  1. package/dist/base.css +7 -2
  2. package/dist/blocks.css +48 -1
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +2 -2
  5. package/dist/triptease.css +54 -3
  6. package/dist/utilities.css +1 -1
  7. package/package.json +1 -1
package/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.1
2
+ * @triptease/stylesheet v1.4.3
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);
@@ -1166,10 +1166,15 @@ a {
1166
1166
  line-height: 1.4;
1167
1167
  }
1168
1168
 
1169
- .text-error {
1169
+ .text-error,
1170
+ .text-danger {
1170
1171
  color: var(--color-alert-400);
1171
1172
  }
1172
1173
 
1174
+ .text-success {
1175
+ color: var(--color-success-500);
1176
+ }
1177
+
1173
1178
  body {
1174
1179
  color: var(--color-text-500);
1175
1180
  font-weight: var(--font-weight-normal);
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.1
2
+ * @triptease/stylesheet v1.4.3
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -35,6 +35,10 @@
35
35
  font-size: var(--font-size-200);
36
36
  line-height: var(--font-line-height-200);
37
37
  padding-inline: var(--space-scale-1);
38
+ width: -moz-fit-content;
39
+ width: fit-content;
40
+ height: -moz-fit-content;
41
+ height: fit-content;
38
42
 
39
43
  &[data-theme='danger'] {
40
44
  --badge-bg-color: var(--color-alert-100);
@@ -166,6 +170,49 @@ header[data-theme='top-nav'] {
166
170
  }
167
171
  }
168
172
 
173
+ @layer blocks {
174
+ .statistic {
175
+ display: grid;
176
+ width: 100%;
177
+ grid-template-columns: min-content 1fr;
178
+ grid-template-rows: repeat(3, min-content);
179
+ grid-template-areas:
180
+ 'label label'
181
+ 'value indicator'
182
+ 'context context';
183
+ -moz-column-gap: var(--space-scale-1);
184
+ column-gap: var(--space-scale-1);
185
+ row-gap: var(--space-scale-0-5);
186
+ align-items: center;
187
+
188
+ .statistic--indicator {
189
+ grid-area: indicator;
190
+
191
+ &:not(.badge) {
192
+ font-size: var(--font-size-100);
193
+ }
194
+ }
195
+
196
+ .statistic--label {
197
+ grid-area: label;
198
+ color: var(--color-text-300);
199
+ }
200
+
201
+ .statistic--value {
202
+ grid-area: value;
203
+ gap: var(--space-scale-1);
204
+ font-size: var(--font-size-500);
205
+ font-weight: var(--font-weight-semibold);
206
+ }
207
+
208
+ .statistic--context {
209
+ grid-area: context;
210
+ color: var(--color-text-300);
211
+ font-size: var(--font-size-100);
212
+ }
213
+ }
214
+ }
215
+
169
216
  @layer blocks {
170
217
 
171
218
  @property --tag-background-color {
package/dist/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.1
2
+ * @triptease/stylesheet v1.4.3
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/dist/exceptions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.1
2
+ * @triptease/stylesheet v1.4.3
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -10,7 +10,7 @@
10
10
 
11
11
  @layer exceptions {
12
12
  /**
13
- Hide web components until they are defined
13
+ Hide web componentManifest until they are defined
14
14
  */
15
15
  :is(tt-combobox, tt-navbar, tt-date-picker, tt-date-range-picker):not(:defined) {
16
16
  visibility: hidden;
package/dist/triptease.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.1
2
+ * @triptease/stylesheet v1.4.3
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);
@@ -1166,10 +1166,15 @@ a {
1166
1166
  line-height: 1.4;
1167
1167
  }
1168
1168
 
1169
- .text-error {
1169
+ .text-error,
1170
+ .text-danger {
1170
1171
  color: var(--color-alert-400);
1171
1172
  }
1172
1173
 
1174
+ .text-success {
1175
+ color: var(--color-success-500);
1176
+ }
1177
+
1173
1178
  body {
1174
1179
  color: var(--color-text-500);
1175
1180
  font-weight: var(--font-weight-normal);
@@ -1204,6 +1209,10 @@ body {
1204
1209
  font-size: var(--font-size-200);
1205
1210
  line-height: var(--font-line-height-200);
1206
1211
  padding-inline: var(--space-scale-1);
1212
+ width: -moz-fit-content;
1213
+ width: fit-content;
1214
+ height: -moz-fit-content;
1215
+ height: fit-content;
1207
1216
 
1208
1217
  &[data-theme='danger'] {
1209
1218
  --badge-bg-color: var(--color-alert-100);
@@ -1333,6 +1342,48 @@ header[data-theme='top-nav'] {
1333
1342
  }
1334
1343
  }
1335
1344
  @layer blocks{
1345
+ .statistic {
1346
+ display: grid;
1347
+ width: 100%;
1348
+ grid-template-columns: min-content 1fr;
1349
+ grid-template-rows: repeat(3, min-content);
1350
+ grid-template-areas:
1351
+ 'label label'
1352
+ 'value indicator'
1353
+ 'context context';
1354
+ -moz-column-gap: var(--space-scale-1);
1355
+ column-gap: var(--space-scale-1);
1356
+ row-gap: var(--space-scale-0-5);
1357
+ align-items: center;
1358
+
1359
+ .statistic--indicator {
1360
+ grid-area: indicator;
1361
+
1362
+ &:not(.badge) {
1363
+ font-size: var(--font-size-100);
1364
+ }
1365
+ }
1366
+
1367
+ .statistic--label {
1368
+ grid-area: label;
1369
+ color: var(--color-text-300);
1370
+ }
1371
+
1372
+ .statistic--value {
1373
+ grid-area: value;
1374
+ gap: var(--space-scale-1);
1375
+ font-size: var(--font-size-500);
1376
+ font-weight: var(--font-weight-semibold);
1377
+ }
1378
+
1379
+ .statistic--context {
1380
+ grid-area: context;
1381
+ color: var(--color-text-300);
1382
+ font-size: var(--font-size-100);
1383
+ }
1384
+ }
1385
+ }
1386
+ @layer blocks{
1336
1387
 
1337
1388
  @property --tag-background-color {
1338
1389
  syntax: '<color>';
@@ -1502,7 +1553,7 @@ tfoot {
1502
1553
  /* noinspection CssInvalidAtRule */
1503
1554
  @layer exceptions{
1504
1555
  /**
1505
- Hide web components until they are defined
1556
+ Hide web componentManifest until they are defined
1506
1557
  */
1507
1558
  :is(tt-combobox, tt-navbar, tt-date-picker, tt-date-range-picker):not(:defined) {
1508
1559
  visibility: hidden;
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.1
2
+ * @triptease/stylesheet v1.4.3
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@triptease/stylesheet",
3
- "version": "1.4.1",
3
+ "version": "1.4.3",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",