@triptease/stylesheet 1.4.6 → 1.4.8

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/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.6
2
+ * @triptease/stylesheet v1.4.8
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);
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.6
2
+ * @triptease/stylesheet v1.4.8
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -10,47 +10,47 @@
10
10
 
11
11
  @layer blocks {
12
12
  .badge {
13
- display: inline-block;
14
- width: -moz-fit-content;
15
- width: fit-content;
16
- height: -moz-fit-content;
17
- height: fit-content;
18
- border-radius: var(--border-radius-50);
19
- padding: 0 var(--space-scale-1);
20
- font-weight: var(--font-weight-normal);
21
- font-size: var(--font-size-200);
22
- line-height: var(--font-line-height-200);
23
- background-color: var(--color-surface-300);
24
- color: var(--color-text-400);
13
+ display: inline-block;
14
+ width: -moz-fit-content;
15
+ width: fit-content;
16
+ height: -moz-fit-content;
17
+ height: fit-content;
18
+ border-radius: var(--border-radius-50);
19
+ padding: 0 var(--space-scale-1);
20
+ font-weight: var(--font-weight-normal);
21
+ font-size: var(--font-size-200);
22
+ line-height: var(--font-line-height-200);
23
+ background-color: var(--color-surface-300);
24
+ color: var(--color-text-400);
25
25
 
26
- &[data-theme='subtle'] {
27
- background-color: var(--color-surface-200);
28
- }
26
+ &[data-theme='subtle'] {
27
+ background-color: var(--color-surface-200);
28
+ }
29
29
 
30
- &[data-theme='danger'] {
31
- background-color: var(--color-alert-subtle);
32
- color: var(--color-alert-strong);
33
- }
30
+ &[data-theme='danger'] {
31
+ background-color: var(--color-alert-subtle);
32
+ color: var(--color-alert-strong);
33
+ }
34
34
 
35
- &[data-theme='success'] {
36
- background-color: var(--color-success-subtle);
37
- color: var(--color-success-strong);
38
- }
35
+ &[data-theme='success'] {
36
+ background-color: var(--color-success-subtle);
37
+ color: var(--color-success-strong);
38
+ }
39
39
 
40
- &[data-theme='warning'] {
41
- background-color: var(--color-warning-subtle);
42
- color: var(--color-warning-strong);
43
- }
40
+ &[data-theme='warning'] {
41
+ background-color: var(--color-warning-subtle);
42
+ color: var(--color-warning-strong);
43
+ }
44
44
 
45
- &[data-theme='info'] {
46
- background-color: var(--color-info-subtle);
47
- color: var(--color-info-strong);
48
- }
45
+ &[data-theme='info'] {
46
+ background-color: var(--color-info-subtle);
47
+ color: var(--color-info-strong);
48
+ }
49
49
 
50
- &[data-theme='primary'] {
51
- background-color: var(--color-primary-100);
52
- color: var(--color-primary-400);
53
- }
50
+ &[data-theme='primary'] {
51
+ background-color: var(--color-primary-100);
52
+ color: var(--color-primary-400);
53
+ }
54
54
  }
55
55
  }
56
56
 
@@ -58,7 +58,7 @@
58
58
  .banner {
59
59
  display: grid;
60
60
  gap: var(--space-scale-1);
61
- grid-template-columns: min-content 1fr min-content;
61
+ grid-template-columns: min-content 1fr max-content;
62
62
  grid-template-areas: 'icon body action';
63
63
  align-items: center;
64
64
  padding: var(--space-scale-1) var(--space-scale-2);
@@ -95,6 +95,7 @@
95
95
  background-color: var(--color-info-strong);
96
96
  -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>');
97
97
  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>');
98
+ align-self: start;
98
99
  }
99
100
 
100
101
  &[data-theme='warning'] {
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.6
2
+ * @triptease/stylesheet v1.4.8
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.6
2
+ * @triptease/stylesheet v1.4.8
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.6
2
+ * @triptease/stylesheet v1.4.8
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);
@@ -1192,54 +1192,54 @@ body {
1192
1192
  /* noinspection CssInvalidAtRule */
1193
1193
  @layer blocks{
1194
1194
  .badge {
1195
- display: inline-block;
1196
- width: -moz-fit-content;
1197
- width: fit-content;
1198
- height: -moz-fit-content;
1199
- height: fit-content;
1200
- border-radius: var(--border-radius-50);
1201
- padding: 0 var(--space-scale-1);
1202
- font-weight: var(--font-weight-normal);
1203
- font-size: var(--font-size-200);
1204
- line-height: var(--font-line-height-200);
1205
- background-color: var(--color-surface-300);
1206
- color: var(--color-text-400);
1195
+ display: inline-block;
1196
+ width: -moz-fit-content;
1197
+ width: fit-content;
1198
+ height: -moz-fit-content;
1199
+ height: fit-content;
1200
+ border-radius: var(--border-radius-50);
1201
+ padding: 0 var(--space-scale-1);
1202
+ font-weight: var(--font-weight-normal);
1203
+ font-size: var(--font-size-200);
1204
+ line-height: var(--font-line-height-200);
1205
+ background-color: var(--color-surface-300);
1206
+ color: var(--color-text-400);
1207
1207
 
1208
- &[data-theme='subtle'] {
1209
- background-color: var(--color-surface-200);
1210
- }
1208
+ &[data-theme='subtle'] {
1209
+ background-color: var(--color-surface-200);
1210
+ }
1211
1211
 
1212
- &[data-theme='danger'] {
1213
- background-color: var(--color-alert-subtle);
1214
- color: var(--color-alert-strong);
1215
- }
1212
+ &[data-theme='danger'] {
1213
+ background-color: var(--color-alert-subtle);
1214
+ color: var(--color-alert-strong);
1215
+ }
1216
1216
 
1217
- &[data-theme='success'] {
1218
- background-color: var(--color-success-subtle);
1219
- color: var(--color-success-strong);
1220
- }
1217
+ &[data-theme='success'] {
1218
+ background-color: var(--color-success-subtle);
1219
+ color: var(--color-success-strong);
1220
+ }
1221
1221
 
1222
- &[data-theme='warning'] {
1223
- background-color: var(--color-warning-subtle);
1224
- color: var(--color-warning-strong);
1225
- }
1222
+ &[data-theme='warning'] {
1223
+ background-color: var(--color-warning-subtle);
1224
+ color: var(--color-warning-strong);
1225
+ }
1226
1226
 
1227
- &[data-theme='info'] {
1228
- background-color: var(--color-info-subtle);
1229
- color: var(--color-info-strong);
1230
- }
1227
+ &[data-theme='info'] {
1228
+ background-color: var(--color-info-subtle);
1229
+ color: var(--color-info-strong);
1230
+ }
1231
1231
 
1232
- &[data-theme='primary'] {
1233
- background-color: var(--color-primary-100);
1234
- color: var(--color-primary-400);
1235
- }
1232
+ &[data-theme='primary'] {
1233
+ background-color: var(--color-primary-100);
1234
+ color: var(--color-primary-400);
1235
+ }
1236
1236
  }
1237
1237
  }
1238
1238
  @layer blocks{
1239
1239
  .banner {
1240
1240
  display: grid;
1241
1241
  gap: var(--space-scale-1);
1242
- grid-template-columns: min-content 1fr min-content;
1242
+ grid-template-columns: min-content 1fr max-content;
1243
1243
  grid-template-areas: 'icon body action';
1244
1244
  align-items: center;
1245
1245
  padding: var(--space-scale-1) var(--space-scale-2);
@@ -1276,6 +1276,7 @@ body {
1276
1276
  background-color: var(--color-info-strong);
1277
1277
  -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>');
1278
1278
  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>');
1279
+ align-self: start;
1279
1280
  }
1280
1281
 
1281
1282
  &[data-theme='warning'] {
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v1.4.6
2
+ * @triptease/stylesheet v1.4.8
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.6",
3
+ "version": "1.4.8",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",