@triptease/stylesheet 1.4.2 → 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 +30 -30
  2. package/dist/blocks.css +82 -77
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +1 -1
  5. package/dist/triptease.css +109 -104
  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.2
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);
@@ -1107,77 +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
1167
  }
1168
1168
 
1169
1169
  .text-error,
1170
1170
  .text-danger {
1171
- color: var(--color-alert-400);
1171
+ color: var(--color-alert-400);
1172
1172
  }
1173
1173
 
1174
1174
  .text-success {
1175
- color: var(--color-success-500);
1175
+ color: var(--color-success-500);
1176
1176
  }
1177
1177
 
1178
1178
  body {
1179
- color: var(--color-text-500);
1180
- font-weight: var(--font-weight-normal);
1181
- 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);
1182
1182
  }
1183
1183
  }
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.2
2
+ * @triptease/stylesheet v1.4.3
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -11,64 +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
- 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
- }
26
+ --badge-bg-color: var(--color-surface-300);
27
+ --badge-border-color: var(--color-border-300);
47
28
 
48
- &[data-theme='success'] {
49
- --badge-bg-color: var(--color-success-100);
50
- --badge-border-color: var(--color-success-200);
51
- }
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;
52
42
 
53
- &[data-theme='warning'] {
54
- --badge-bg-color: var(--color-warning-100);
55
- --badge-border-color: var(--color-warning-200);
56
- }
43
+ &[data-theme='danger'] {
44
+ --badge-bg-color: var(--color-alert-100);
45
+ --badge-border-color: var(--color-alert-200);
46
+ }
57
47
 
58
- &[data-theme='info'] {
59
- --badge-bg-color: var(--color-info-100);
60
- --badge-border-color: var(--color-info-200);
61
- }
48
+ &[data-theme='success'] {
49
+ --badge-bg-color: var(--color-success-100);
50
+ --badge-border-color: var(--color-success-200);
51
+ }
62
52
 
63
- &[data-theme='primary'] {
64
- --badge-bg-color: var(--color-primary-100);
65
- --badge-border-color: var(--color-primary-200);
66
- }
53
+ &[data-theme='warning'] {
54
+ --badge-bg-color: var(--color-warning-100);
55
+ --badge-border-color: var(--color-warning-200);
56
+ }
67
57
 
68
- &[data-theme='subtle'] {
69
- --badge-bg-color: var(--color-surface-200);
70
- --badge-border-color: var(--color-border-100);
71
- }
58
+ &[data-theme='info'] {
59
+ --badge-bg-color: var(--color-info-100);
60
+ --badge-border-color: var(--color-info-200);
61
+ }
62
+
63
+ &[data-theme='primary'] {
64
+ --badge-bg-color: var(--color-primary-100);
65
+ --badge-border-color: var(--color-primary-200);
66
+ }
67
+
68
+ &[data-theme='subtle'] {
69
+ --badge-bg-color: var(--color-surface-200);
70
+ --badge-border-color: var(--color-border-100);
71
+ }
72
72
  }
73
73
  }
74
74
 
@@ -172,39 +172,44 @@ header[data-theme='top-nav'] {
172
172
 
173
173
  @layer blocks {
174
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
- }
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;
190
187
 
191
- .statistic--label {
192
- grid-area: label;
193
- color: var(--color-text-400);
194
- }
188
+ .statistic--indicator {
189
+ grid-area: indicator;
195
190
 
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);
191
+ &:not(.badge) {
192
+ font-size: var(--font-size-100);
201
193
  }
194
+ }
202
195
 
203
- .statistic--context {
204
- grid-area: context;
205
- color: var(--color-text-400);
206
- font-size: var(--font-size-200);
207
- }
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
+ }
208
213
  }
209
214
  }
210
215
 
package/dist/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.2
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.2
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/triptease.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.2
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);
@@ -1107,142 +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
1169
  .text-error,
1170
1170
  .text-danger {
1171
- color: var(--color-alert-400);
1171
+ color: var(--color-alert-400);
1172
1172
  }
1173
1173
 
1174
1174
  .text-success {
1175
- color: var(--color-success-500);
1175
+ color: var(--color-success-500);
1176
1176
  }
1177
1177
 
1178
1178
  body {
1179
- color: var(--color-text-500);
1180
- font-weight: var(--font-weight-normal);
1181
- 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);
1182
1182
  }
1183
1183
  }
1184
1184
  /* noinspection CssInvalidAtRule */
1185
1185
  @layer blocks{
1186
1186
 
1187
1187
  @property --badge-bg-color {
1188
- syntax: '<color>';
1189
- inherits: true;
1190
- initial-value: transparent;
1188
+ syntax: '<color>';
1189
+ inherits: true;
1190
+ initial-value: transparent;
1191
1191
  }
1192
1192
 
1193
1193
  @property --badge-border-color {
1194
- syntax: '<color>';
1195
- inherits: true;
1196
- initial-value: transparent;
1194
+ syntax: '<color>';
1195
+ inherits: true;
1196
+ initial-value: transparent;
1197
1197
  }
1198
1198
 
1199
1199
  .badge {
1200
- --badge-bg-color: var(--color-surface-300);
1201
- --badge-border-color: var(--color-border-300);
1200
+ --badge-bg-color: var(--color-surface-300);
1201
+ --badge-border-color: var(--color-border-300);
1202
1202
 
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
- }
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;
1221
1216
 
1222
- &[data-theme='success'] {
1223
- --badge-bg-color: var(--color-success-100);
1224
- --badge-border-color: var(--color-success-200);
1225
- }
1217
+ &[data-theme='danger'] {
1218
+ --badge-bg-color: var(--color-alert-100);
1219
+ --badge-border-color: var(--color-alert-200);
1220
+ }
1226
1221
 
1227
- &[data-theme='warning'] {
1228
- --badge-bg-color: var(--color-warning-100);
1229
- --badge-border-color: var(--color-warning-200);
1230
- }
1222
+ &[data-theme='success'] {
1223
+ --badge-bg-color: var(--color-success-100);
1224
+ --badge-border-color: var(--color-success-200);
1225
+ }
1231
1226
 
1232
- &[data-theme='info'] {
1233
- --badge-bg-color: var(--color-info-100);
1234
- --badge-border-color: var(--color-info-200);
1235
- }
1227
+ &[data-theme='warning'] {
1228
+ --badge-bg-color: var(--color-warning-100);
1229
+ --badge-border-color: var(--color-warning-200);
1230
+ }
1236
1231
 
1237
- &[data-theme='primary'] {
1238
- --badge-bg-color: var(--color-primary-100);
1239
- --badge-border-color: var(--color-primary-200);
1240
- }
1232
+ &[data-theme='info'] {
1233
+ --badge-bg-color: var(--color-info-100);
1234
+ --badge-border-color: var(--color-info-200);
1235
+ }
1241
1236
 
1242
- &[data-theme='subtle'] {
1243
- --badge-bg-color: var(--color-surface-200);
1244
- --badge-border-color: var(--color-border-100);
1245
- }
1237
+ &[data-theme='primary'] {
1238
+ --badge-bg-color: var(--color-primary-100);
1239
+ --badge-border-color: var(--color-primary-200);
1240
+ }
1241
+
1242
+ &[data-theme='subtle'] {
1243
+ --badge-bg-color: var(--color-surface-200);
1244
+ --badge-border-color: var(--color-border-100);
1245
+ }
1246
1246
  }
1247
1247
  }
1248
1248
  @layer blocks{
@@ -1343,39 +1343,44 @@ header[data-theme='top-nav'] {
1343
1343
  }
1344
1344
  @layer blocks{
1345
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;
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;
1357
1358
 
1358
- .statistic--indicator {
1359
- grid-area: indicator;
1360
- }
1359
+ .statistic--indicator {
1360
+ grid-area: indicator;
1361
1361
 
1362
- .statistic--label {
1363
- grid-area: label;
1364
- color: var(--color-text-400);
1362
+ &:not(.badge) {
1363
+ font-size: var(--font-size-100);
1365
1364
  }
1365
+ }
1366
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
- }
1367
+ .statistic--label {
1368
+ grid-area: label;
1369
+ color: var(--color-text-300);
1370
+ }
1373
1371
 
1374
- .statistic--context {
1375
- grid-area: context;
1376
- color: var(--color-text-400);
1377
- font-size: var(--font-size-200);
1378
- }
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
+ }
1379
1384
  }
1380
1385
  }
1381
1386
  @layer blocks{
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.2
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.2",
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",