@triptease/stylesheet 1.4.0 → 1.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/base.css +35 -30
  2. package/dist/blocks.css +86 -44
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +2 -2
  5. package/dist/triptease.css +119 -73
  6. package/dist/utilities.css +1 -1
  7. package/package.json +3 -2
package/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.0
2
+ * @triptease/stylesheet v1.4.2
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);
@@ -1107,72 +1107,77 @@ h1,
1107
1107
  h2,
1108
1108
  h3,
1109
1109
  h4 {
1110
- font-family: var(--font-family-inter);
1111
- font-weight: var(--font-weight-semibold);
1112
- color: var(--color-text-500);
1110
+ font-family: var(--font-family-inter);
1111
+ font-weight: var(--font-weight-semibold);
1112
+ color: var(--color-text-500);
1113
1113
  }
1114
1114
 
1115
1115
  .display {
1116
- font-size: var(--font-size-600);
1117
- line-height: var(--font-line-height-600);
1116
+ font-size: var(--font-size-600);
1117
+ line-height: var(--font-line-height-600);
1118
1118
  }
1119
1119
 
1120
1120
  h1,
1121
1121
  .heading-1 {
1122
- font-size: var(--font-size-500);
1123
- line-height: var(--font-line-height-500);
1122
+ font-size: var(--font-size-500);
1123
+ line-height: var(--font-line-height-500);
1124
1124
  }
1125
1125
 
1126
1126
  h2,
1127
1127
  .heading-2 {
1128
- font-size: var(--font-size-400);
1129
- line-height: var(--font-line-height-400);
1128
+ font-size: var(--font-size-400);
1129
+ line-height: var(--font-line-height-400);
1130
1130
  }
1131
1131
 
1132
1132
  h3,
1133
1133
  .heading-3 {
1134
- font-size: var(--font-size-300);
1135
- line-height: var(--font-line-height-300);
1134
+ font-size: var(--font-size-300);
1135
+ line-height: var(--font-line-height-300);
1136
1136
  }
1137
1137
 
1138
1138
  h4,
1139
1139
  .heading-4 {
1140
- font-size: var(--font-size-200);
1141
- line-height: var(--font-line-height-200);
1140
+ font-size: var(--font-size-200);
1141
+ line-height: var(--font-line-height-200);
1142
1142
  }
1143
1143
 
1144
1144
  p,
1145
1145
  .body {
1146
- line-height: var(--font-line-height-200);
1147
- font-size: var(--font-size-200);
1148
- color: var(--color-text-400);
1146
+ line-height: var(--font-line-height-200);
1147
+ font-size: var(--font-size-200);
1148
+ color: var(--color-text-400);
1149
1149
  }
1150
1150
 
1151
1151
  strong,
1152
1152
  .strong {
1153
- font-weight: var(--font-weight-semibold);
1153
+ font-weight: var(--font-weight-semibold);
1154
1154
  }
1155
1155
 
1156
1156
  .small {
1157
- font-size: var(--font-size-100);
1158
- line-height: var(--font-line-height-100);
1157
+ font-size: var(--font-size-100);
1158
+ line-height: var(--font-line-height-100);
1159
1159
  }
1160
1160
 
1161
1161
  a {
1162
- font-weight: var(--font-weight-medium);
1163
- color: var(--color-primary-400);
1164
- cursor: pointer;
1165
- text-decoration: none;
1166
- line-height: 1.4;
1162
+ font-weight: var(--font-weight-medium);
1163
+ color: var(--color-primary-400);
1164
+ cursor: pointer;
1165
+ text-decoration: none;
1166
+ line-height: 1.4;
1167
+ }
1168
+
1169
+ .text-error,
1170
+ .text-danger {
1171
+ color: var(--color-alert-400);
1167
1172
  }
1168
1173
 
1169
- .text-error {
1170
- color: var(--color-alert-400);
1174
+ .text-success {
1175
+ color: var(--color-success-500);
1171
1176
  }
1172
1177
 
1173
1178
  body {
1174
- color: var(--color-text-500);
1175
- font-weight: var(--font-weight-normal);
1176
- font-size: var(--font-size-200);
1179
+ color: var(--color-text-500);
1180
+ font-weight: var(--font-weight-normal);
1181
+ font-size: var(--font-size-200);
1177
1182
  }
1178
1183
  }
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.0
2
+ * @triptease/stylesheet v1.4.2
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -11,60 +11,64 @@
11
11
  @layer blocks {
12
12
 
13
13
  @property --badge-bg-color {
14
- syntax: '<color>';
15
- inherits: true;
16
- initial-value: transparent;
14
+ syntax: '<color>';
15
+ inherits: true;
16
+ initial-value: transparent;
17
17
  }
18
18
 
19
19
  @property --badge-border-color {
20
- syntax: '<color>';
21
- inherits: true;
22
- initial-value: transparent;
20
+ syntax: '<color>';
21
+ inherits: true;
22
+ initial-value: transparent;
23
23
  }
24
24
 
25
25
  .badge {
26
- --badge-bg-color: var(--color-surface-300);
27
- --badge-border-color: var(--color-border-300);
28
-
29
- background-color: var(--badge-bg-color);
30
- border: 1px solid var(--badge-border-color);
31
- border-radius: var(--border-radius-50);
32
- display: inline-block;
33
- color: var(--color-text-400);
34
- font-weight: var(--font-weight-normal);
35
- font-size: var(--font-size-200);
36
- line-height: var(--font-line-height-200);
37
- padding-inline: var(--space-scale-1);
38
-
39
- &[data-theme='danger'] {
40
- --badge-bg-color: var(--color-alert-100);
41
- --badge-border-color: var(--color-alert-200);
42
- }
26
+ --badge-bg-color: var(--color-surface-300);
27
+ --badge-border-color: var(--color-border-300);
28
+
29
+ background-color: var(--badge-bg-color);
30
+ border: 1px solid var(--badge-border-color);
31
+ border-radius: var(--border-radius-50);
32
+ display: inline-block;
33
+ color: var(--color-text-400);
34
+ font-weight: var(--font-weight-normal);
35
+ font-size: var(--font-size-200);
36
+ line-height: var(--font-line-height-200);
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;
42
+
43
+ &[data-theme='danger'] {
44
+ --badge-bg-color: var(--color-alert-100);
45
+ --badge-border-color: var(--color-alert-200);
46
+ }
43
47
 
44
- &[data-theme='success'] {
45
- --badge-bg-color: var(--color-success-100);
46
- --badge-border-color: var(--color-success-200);
47
- }
48
+ &[data-theme='success'] {
49
+ --badge-bg-color: var(--color-success-100);
50
+ --badge-border-color: var(--color-success-200);
51
+ }
48
52
 
49
- &[data-theme='warning'] {
50
- --badge-bg-color: var(--color-warning-100);
51
- --badge-border-color: var(--color-warning-200);
52
- }
53
+ &[data-theme='warning'] {
54
+ --badge-bg-color: var(--color-warning-100);
55
+ --badge-border-color: var(--color-warning-200);
56
+ }
53
57
 
54
- &[data-theme='info'] {
55
- --badge-bg-color: var(--color-info-100);
56
- --badge-border-color: var(--color-info-200);
57
- }
58
+ &[data-theme='info'] {
59
+ --badge-bg-color: var(--color-info-100);
60
+ --badge-border-color: var(--color-info-200);
61
+ }
58
62
 
59
- &[data-theme='primary'] {
60
- --badge-bg-color: var(--color-primary-100);
61
- --badge-border-color: var(--color-primary-200);
62
- }
63
+ &[data-theme='primary'] {
64
+ --badge-bg-color: var(--color-primary-100);
65
+ --badge-border-color: var(--color-primary-200);
66
+ }
63
67
 
64
- &[data-theme='subtle'] {
65
- --badge-bg-color: var(--color-surface-200);
66
- --badge-border-color: var(--color-border-100);
67
- }
68
+ &[data-theme='subtle'] {
69
+ --badge-bg-color: var(--color-surface-200);
70
+ --badge-border-color: var(--color-border-100);
71
+ }
68
72
  }
69
73
  }
70
74
 
@@ -166,6 +170,44 @@ 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
+ align-items: center;
186
+
187
+ .statistic--indicator {
188
+ grid-area: indicator;
189
+ }
190
+
191
+ .statistic--label {
192
+ grid-area: label;
193
+ color: var(--color-text-400);
194
+ }
195
+
196
+ .statistic--value {
197
+ grid-area: value;
198
+ gap: var(--space-scale-1);
199
+ font-size: var(--font-size-500);
200
+ font-weight: var(--font-weight-semibold);
201
+ }
202
+
203
+ .statistic--context {
204
+ grid-area: context;
205
+ color: var(--color-text-400);
206
+ font-size: var(--font-size-200);
207
+ }
208
+ }
209
+ }
210
+
169
211
  @layer blocks {
170
212
 
171
213
  @property --tag-background-color {
package/dist/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.0
2
+ * @triptease/stylesheet v1.4.2
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.0
2
+ * @triptease/stylesheet v1.4.2
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.0
2
+ * @triptease/stylesheet v1.4.2
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);
@@ -1107,133 +1107,142 @@ h1,
1107
1107
  h2,
1108
1108
  h3,
1109
1109
  h4 {
1110
- font-family: var(--font-family-inter);
1111
- font-weight: var(--font-weight-semibold);
1112
- color: var(--color-text-500);
1110
+ font-family: var(--font-family-inter);
1111
+ font-weight: var(--font-weight-semibold);
1112
+ color: var(--color-text-500);
1113
1113
  }
1114
1114
 
1115
1115
  .display {
1116
- font-size: var(--font-size-600);
1117
- line-height: var(--font-line-height-600);
1116
+ font-size: var(--font-size-600);
1117
+ line-height: var(--font-line-height-600);
1118
1118
  }
1119
1119
 
1120
1120
  h1,
1121
1121
  .heading-1 {
1122
- font-size: var(--font-size-500);
1123
- line-height: var(--font-line-height-500);
1122
+ font-size: var(--font-size-500);
1123
+ line-height: var(--font-line-height-500);
1124
1124
  }
1125
1125
 
1126
1126
  h2,
1127
1127
  .heading-2 {
1128
- font-size: var(--font-size-400);
1129
- line-height: var(--font-line-height-400);
1128
+ font-size: var(--font-size-400);
1129
+ line-height: var(--font-line-height-400);
1130
1130
  }
1131
1131
 
1132
1132
  h3,
1133
1133
  .heading-3 {
1134
- font-size: var(--font-size-300);
1135
- line-height: var(--font-line-height-300);
1134
+ font-size: var(--font-size-300);
1135
+ line-height: var(--font-line-height-300);
1136
1136
  }
1137
1137
 
1138
1138
  h4,
1139
1139
  .heading-4 {
1140
- font-size: var(--font-size-200);
1141
- line-height: var(--font-line-height-200);
1140
+ font-size: var(--font-size-200);
1141
+ line-height: var(--font-line-height-200);
1142
1142
  }
1143
1143
 
1144
1144
  p,
1145
1145
  .body {
1146
- line-height: var(--font-line-height-200);
1147
- font-size: var(--font-size-200);
1148
- color: var(--color-text-400);
1146
+ line-height: var(--font-line-height-200);
1147
+ font-size: var(--font-size-200);
1148
+ color: var(--color-text-400);
1149
1149
  }
1150
1150
 
1151
1151
  strong,
1152
1152
  .strong {
1153
- font-weight: var(--font-weight-semibold);
1153
+ font-weight: var(--font-weight-semibold);
1154
1154
  }
1155
1155
 
1156
1156
  .small {
1157
- font-size: var(--font-size-100);
1158
- line-height: var(--font-line-height-100);
1157
+ font-size: var(--font-size-100);
1158
+ line-height: var(--font-line-height-100);
1159
1159
  }
1160
1160
 
1161
1161
  a {
1162
- font-weight: var(--font-weight-medium);
1163
- color: var(--color-primary-400);
1164
- cursor: pointer;
1165
- text-decoration: none;
1166
- line-height: 1.4;
1162
+ font-weight: var(--font-weight-medium);
1163
+ color: var(--color-primary-400);
1164
+ cursor: pointer;
1165
+ text-decoration: none;
1166
+ line-height: 1.4;
1167
1167
  }
1168
1168
 
1169
- .text-error {
1170
- color: var(--color-alert-400);
1169
+ .text-error,
1170
+ .text-danger {
1171
+ color: var(--color-alert-400);
1172
+ }
1173
+
1174
+ .text-success {
1175
+ color: var(--color-success-500);
1171
1176
  }
1172
1177
 
1173
1178
  body {
1174
- color: var(--color-text-500);
1175
- font-weight: var(--font-weight-normal);
1176
- font-size: var(--font-size-200);
1179
+ color: var(--color-text-500);
1180
+ font-weight: var(--font-weight-normal);
1181
+ font-size: var(--font-size-200);
1177
1182
  }
1178
1183
  }
1179
1184
  /* noinspection CssInvalidAtRule */
1180
1185
  @layer blocks{
1181
1186
 
1182
1187
  @property --badge-bg-color {
1183
- syntax: '<color>';
1184
- inherits: true;
1185
- initial-value: transparent;
1188
+ syntax: '<color>';
1189
+ inherits: true;
1190
+ initial-value: transparent;
1186
1191
  }
1187
1192
 
1188
1193
  @property --badge-border-color {
1189
- syntax: '<color>';
1190
- inherits: true;
1191
- initial-value: transparent;
1194
+ syntax: '<color>';
1195
+ inherits: true;
1196
+ initial-value: transparent;
1192
1197
  }
1193
1198
 
1194
1199
  .badge {
1195
- --badge-bg-color: var(--color-surface-300);
1196
- --badge-border-color: var(--color-border-300);
1200
+ --badge-bg-color: var(--color-surface-300);
1201
+ --badge-border-color: var(--color-border-300);
1197
1202
 
1198
- background-color: var(--badge-bg-color);
1199
- border: 1px solid var(--badge-border-color);
1200
- border-radius: var(--border-radius-50);
1201
- display: inline-block;
1202
- color: var(--color-text-400);
1203
- font-weight: var(--font-weight-normal);
1204
- font-size: var(--font-size-200);
1205
- line-height: var(--font-line-height-200);
1206
- padding-inline: var(--space-scale-1);
1207
-
1208
- &[data-theme='danger'] {
1209
- --badge-bg-color: var(--color-alert-100);
1210
- --badge-border-color: var(--color-alert-200);
1211
- }
1203
+ background-color: var(--badge-bg-color);
1204
+ border: 1px solid var(--badge-border-color);
1205
+ border-radius: var(--border-radius-50);
1206
+ display: inline-block;
1207
+ color: var(--color-text-400);
1208
+ font-weight: var(--font-weight-normal);
1209
+ font-size: var(--font-size-200);
1210
+ line-height: var(--font-line-height-200);
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;
1216
+
1217
+ &[data-theme='danger'] {
1218
+ --badge-bg-color: var(--color-alert-100);
1219
+ --badge-border-color: var(--color-alert-200);
1220
+ }
1212
1221
 
1213
- &[data-theme='success'] {
1214
- --badge-bg-color: var(--color-success-100);
1215
- --badge-border-color: var(--color-success-200);
1216
- }
1222
+ &[data-theme='success'] {
1223
+ --badge-bg-color: var(--color-success-100);
1224
+ --badge-border-color: var(--color-success-200);
1225
+ }
1217
1226
 
1218
- &[data-theme='warning'] {
1219
- --badge-bg-color: var(--color-warning-100);
1220
- --badge-border-color: var(--color-warning-200);
1221
- }
1227
+ &[data-theme='warning'] {
1228
+ --badge-bg-color: var(--color-warning-100);
1229
+ --badge-border-color: var(--color-warning-200);
1230
+ }
1222
1231
 
1223
- &[data-theme='info'] {
1224
- --badge-bg-color: var(--color-info-100);
1225
- --badge-border-color: var(--color-info-200);
1226
- }
1232
+ &[data-theme='info'] {
1233
+ --badge-bg-color: var(--color-info-100);
1234
+ --badge-border-color: var(--color-info-200);
1235
+ }
1227
1236
 
1228
- &[data-theme='primary'] {
1229
- --badge-bg-color: var(--color-primary-100);
1230
- --badge-border-color: var(--color-primary-200);
1231
- }
1237
+ &[data-theme='primary'] {
1238
+ --badge-bg-color: var(--color-primary-100);
1239
+ --badge-border-color: var(--color-primary-200);
1240
+ }
1232
1241
 
1233
- &[data-theme='subtle'] {
1234
- --badge-bg-color: var(--color-surface-200);
1235
- --badge-border-color: var(--color-border-100);
1236
- }
1242
+ &[data-theme='subtle'] {
1243
+ --badge-bg-color: var(--color-surface-200);
1244
+ --badge-border-color: var(--color-border-100);
1245
+ }
1237
1246
  }
1238
1247
  }
1239
1248
  @layer blocks{
@@ -1333,6 +1342,43 @@ 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
+ align-items: center;
1357
+
1358
+ .statistic--indicator {
1359
+ grid-area: indicator;
1360
+ }
1361
+
1362
+ .statistic--label {
1363
+ grid-area: label;
1364
+ color: var(--color-text-400);
1365
+ }
1366
+
1367
+ .statistic--value {
1368
+ grid-area: value;
1369
+ gap: var(--space-scale-1);
1370
+ font-size: var(--font-size-500);
1371
+ font-weight: var(--font-weight-semibold);
1372
+ }
1373
+
1374
+ .statistic--context {
1375
+ grid-area: context;
1376
+ color: var(--color-text-400);
1377
+ font-size: var(--font-size-200);
1378
+ }
1379
+ }
1380
+ }
1381
+ @layer blocks{
1336
1382
 
1337
1383
  @property --tag-background-color {
1338
1384
  syntax: '<color>';
@@ -1502,7 +1548,7 @@ tfoot {
1502
1548
  /* noinspection CssInvalidAtRule */
1503
1549
  @layer exceptions{
1504
1550
  /**
1505
- Hide web components until they are defined
1551
+ Hide web componentManifest until they are defined
1506
1552
  */
1507
1553
  :is(tt-combobox, tt-navbar, tt-date-picker, tt-date-range-picker):not(:defined) {
1508
1554
  visibility: hidden;
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.0
2
+ * @triptease/stylesheet v1.4.2
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.0",
3
+ "version": "1.4.2",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",
@@ -9,7 +9,8 @@
9
9
  ],
10
10
  "license": "MIT",
11
11
  "exports": {
12
- ".": "./dist/triptease.css"
12
+ ".": "./dist/triptease.css",
13
+ "./tokens": "./dist/web/tokens.json"
13
14
  },
14
15
  "devDependencies": {
15
16
  "@csstools/postcss-design-tokens": "^4.0.5",