@womp/kookie-ui 0.14.1 → 0.14.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 (4) hide show
  1. package/components.css +18 -15
  2. package/package.json +1 -1
  3. package/src/components/notice.css +21 -13
  4. package/styles.css +18 -15
package/components.css CHANGED
@@ -23198,19 +23198,17 @@
23198
23198
  display: -webkit-box;
23199
23199
  display: -ms-flexbox;
23200
23200
  display: flex;
23201
- -webkit-box-align: center;
23202
- -ms-flex-align: center;
23203
- align-items: center;
23201
+ -webkit-box-align: start;
23202
+ -ms-flex-align: start;
23203
+ align-items: flex-start;
23204
23204
  min-width: 0;
23205
23205
  color: var(--accent-ink);
23206
23206
  border-radius: var(--notice-radius);
23207
23207
  --material-blend: 100%;
23208
- --material-alpha: 0;
23209
- background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
23208
+ background-color: color-mix(in srgb, var(--accent-a3), transparent calc(100% - var(--material-blend)));
23210
23209
  }
23211
23210
  .rt-NoticeRoot:where([data-material='translucent']) {
23212
23211
  --material-blend: 60%;
23213
- --material-alpha: 1;
23214
23212
  backdrop-filter: var(--backdrop-filter-components-enabled);
23215
23213
  }
23216
23214
  @media (forced-colors: active) {
@@ -23219,7 +23217,7 @@
23219
23217
  }
23220
23218
  }
23221
23219
  .rt-NoticeRoot:where([data-accent-color='gray']) {
23222
- background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
23220
+ background-color: color-mix(in srgb, var(--gray-a3), transparent calc(100% - var(--material-blend)));
23223
23221
  color: var(--gray-12);
23224
23222
  }
23225
23223
  .rt-NoticeIcon {
@@ -23232,6 +23230,7 @@
23232
23230
  -webkit-box-align: center;
23233
23231
  -ms-flex-align: center;
23234
23232
  align-items: center;
23233
+ height: var(--notice-line);
23235
23234
  }
23236
23235
  .rt-NoticeIcon :where(svg) {
23237
23236
  width: var(--notice-icon-size);
@@ -23255,6 +23254,7 @@
23255
23254
  -ms-flex-align: center;
23256
23255
  align-items: center;
23257
23256
  gap: var(--space-1);
23257
+ margin-block: calc((var(--notice-line) - var(--notice-control)) / 2);
23258
23258
  }
23259
23259
  .rt-NoticeRoot:where([data-kind='confirmation']) {
23260
23260
  -ms-flex-wrap: wrap;
@@ -23265,22 +23265,25 @@
23265
23265
  }
23266
23266
  .rt-NoticeRoot:where(.rt-r-size-1) {
23267
23267
  gap: var(--space-2);
23268
- padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
23269
- min-height: calc(var(--space-6) + var(--space-2));
23268
+ padding: var(--space-3);
23269
+ --notice-line: var(--line-height-1);
23270
+ --notice-control: var(--control-height-1);
23270
23271
  --notice-radius: var(--radius-surface-1);
23271
23272
  --notice-icon-size: var(--content-icon-size-1);
23272
23273
  }
23273
23274
  .rt-NoticeRoot:where(.rt-r-size-2) {
23274
- gap: var(--space-2);
23275
- padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
23276
- min-height: calc(var(--space-7) + var(--space-2));
23275
+ gap: var(--space-3);
23276
+ padding: var(--space-4);
23277
+ --notice-line: var(--line-height-2);
23278
+ --notice-control: var(--control-height-2);
23277
23279
  --notice-radius: var(--radius-surface-2);
23278
23280
  --notice-icon-size: var(--content-icon-size-2);
23279
23281
  }
23280
23282
  .rt-NoticeRoot:where(.rt-r-size-3) {
23281
- gap: var(--space-3);
23282
- padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
23283
- min-height: calc(var(--space-8) + var(--space-2));
23283
+ gap: var(--space-4);
23284
+ padding: var(--space-5);
23285
+ --notice-line: var(--line-height-3);
23286
+ --notice-control: var(--control-height-3);
23284
23287
  --notice-radius: var(--radius-surface-3);
23285
23288
  --notice-icon-size: var(--content-icon-size-3);
23286
23289
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@womp/kookie-ui",
3
- "version": "0.14.1",
3
+ "version": "0.14.2",
4
4
  "description": "Kookie UI v1: a React component library with design tokens, flexible theming, a full layout shell, and comprehensive documentation.",
5
5
  "keywords": [
6
6
  "react",
package/src/components/notice.css CHANGED
@@ -6,18 +6,18 @@
6
6
  .rt-NoticeRoot {
7
7
  box-sizing: border-box;
8
8
  display: flex;
9
- align-items: center;
9
+ /* The icon and the actions sit on the first line, so a long message wraps under itself. */
10
+ align-items: flex-start;
10
11
  min-width: 0;
11
12
  color: var(--accent-ink);
12
13
  border-radius: var(--notice-radius);
13
14
 
15
+ /* An alpha fill, so the strip is a tint of whatever it sits on, as Callout was. */
14
16
  --material-blend: 100%;
15
- --material-alpha: 0;
16
- background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
17
+ background-color: color-mix(in srgb, var(--accent-a3), transparent calc(100% - var(--material-blend)));
17
18
 
18
19
  &:where([data-material='translucent']) {
19
20
  --material-blend: 60%;
20
- --material-alpha: 1;
21
21
  backdrop-filter: var(--backdrop-filter-components-enabled);
22
22
  }
23
23
 
@@ -28,7 +28,7 @@
28
28
 
29
29
  /* Gray is the resting category: its fill is one step quieter and its words are the ordinary ink. */
30
30
  .rt-NoticeRoot:where([data-accent-color='gray']) {
31
- background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
31
+ background-color: color-mix(in srgb, var(--gray-a3), transparent calc(100% - var(--material-blend)));
32
32
  color: var(--gray-12);
33
33
  }
34
34
 
@@ -36,6 +36,8 @@
36
36
  display: flex;
37
37
  flex: none;
38
38
  align-items: center;
39
+ /* One line tall, so the icon centres on the first line of the message. */
40
+ height: var(--notice-line);
39
41
 
40
42
  /* stylelint-disable-next-line selector-max-type */
41
43
  & :where(svg) {
@@ -55,6 +57,8 @@
55
57
  flex: none;
56
58
  align-items: center;
57
59
  gap: var(--space-1);
60
+ /* A button is taller than a line: it centres on the first line and does not grow the strip. */
61
+ margin-block: calc((var(--notice-line) - var(--notice-control)) / 2);
58
62
  }
59
63
 
60
64
  /* A question wraps its answers under the words when the strip is narrow. */
@@ -67,24 +71,28 @@
67
71
  }
68
72
 
69
73
  .rt-NoticeRoot {
74
+ /* Callout's spacing: an even inset on every side, wider steps between icon, words and actions. */
70
75
  &:where(.rt-r-size-1) {
71
76
  gap: var(--space-2);
72
- padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
73
- min-height: calc(var(--space-6) + var(--space-2));
77
+ padding: var(--space-3);
78
+ --notice-line: var(--line-height-1);
79
+ --notice-control: var(--control-height-1);
74
80
  --notice-radius: var(--radius-surface-1);
75
81
  --notice-icon-size: var(--content-icon-size-1);
76
82
  }
77
83
  &:where(.rt-r-size-2) {
78
- gap: var(--space-2);
79
- padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
80
- min-height: calc(var(--space-7) + var(--space-2));
84
+ gap: var(--space-3);
85
+ padding: var(--space-4);
86
+ --notice-line: var(--line-height-2);
87
+ --notice-control: var(--control-height-2);
81
88
  --notice-radius: var(--radius-surface-2);
82
89
  --notice-icon-size: var(--content-icon-size-2);
83
90
  }
84
91
  &:where(.rt-r-size-3) {
85
- gap: var(--space-3);
86
- padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
87
- min-height: calc(var(--space-8) + var(--space-2));
92
+ gap: var(--space-4);
93
+ padding: var(--space-5);
94
+ --notice-line: var(--line-height-3);
95
+ --notice-control: var(--control-height-3);
88
96
  --notice-radius: var(--radius-surface-3);
89
97
  --notice-icon-size: var(--content-icon-size-3);
90
98
  }
package/styles.css CHANGED
@@ -28365,19 +28365,17 @@
28365
28365
  display: -webkit-box;
28366
28366
  display: -ms-flexbox;
28367
28367
  display: flex;
28368
- -webkit-box-align: center;
28369
- -ms-flex-align: center;
28370
- align-items: center;
28368
+ -webkit-box-align: start;
28369
+ -ms-flex-align: start;
28370
+ align-items: flex-start;
28371
28371
  min-width: 0;
28372
28372
  color: var(--accent-ink);
28373
28373
  border-radius: var(--notice-radius);
28374
28374
  --material-blend: 100%;
28375
- --material-alpha: 0;
28376
- background-color: color-mix(in srgb, var(--accent-a3) calc(var(--material-alpha) * 100%), var(--accent-3) var(--material-blend));
28375
+ background-color: color-mix(in srgb, var(--accent-a3), transparent calc(100% - var(--material-blend)));
28377
28376
  }
28378
28377
  .rt-NoticeRoot:where([data-material='translucent']) {
28379
28378
  --material-blend: 60%;
28380
- --material-alpha: 1;
28381
28379
  backdrop-filter: var(--backdrop-filter-components-enabled);
28382
28380
  }
28383
28381
  @media (forced-colors: active) {
@@ -28386,7 +28384,7 @@
28386
28384
  }
28387
28385
  }
28388
28386
  .rt-NoticeRoot:where([data-accent-color='gray']) {
28389
- background-color: color-mix(in srgb, var(--gray-a3) calc(var(--material-alpha) * 100%), var(--gray-3) var(--material-blend));
28387
+ background-color: color-mix(in srgb, var(--gray-a3), transparent calc(100% - var(--material-blend)));
28390
28388
  color: var(--gray-12);
28391
28389
  }
28392
28390
  .rt-NoticeIcon {
@@ -28399,6 +28397,7 @@
28399
28397
  -webkit-box-align: center;
28400
28398
  -ms-flex-align: center;
28401
28399
  align-items: center;
28400
+ height: var(--notice-line);
28402
28401
  }
28403
28402
  .rt-NoticeIcon :where(svg) {
28404
28403
  width: var(--notice-icon-size);
@@ -28422,6 +28421,7 @@
28422
28421
  -ms-flex-align: center;
28423
28422
  align-items: center;
28424
28423
  gap: var(--space-1);
28424
+ margin-block: calc((var(--notice-line) - var(--notice-control)) / 2);
28425
28425
  }
28426
28426
  .rt-NoticeRoot:where([data-kind='confirmation']) {
28427
28427
  -ms-flex-wrap: wrap;
@@ -28432,22 +28432,25 @@
28432
28432
  }
28433
28433
  .rt-NoticeRoot:where(.rt-r-size-1) {
28434
28434
  gap: var(--space-2);
28435
- padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
28436
- min-height: calc(var(--space-6) + var(--space-2));
28435
+ padding: var(--space-3);
28436
+ --notice-line: var(--line-height-1);
28437
+ --notice-control: var(--control-height-1);
28437
28438
  --notice-radius: var(--radius-surface-1);
28438
28439
  --notice-icon-size: var(--content-icon-size-1);
28439
28440
  }
28440
28441
  .rt-NoticeRoot:where(.rt-r-size-2) {
28441
- gap: var(--space-2);
28442
- padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
28443
- min-height: calc(var(--space-7) + var(--space-2));
28442
+ gap: var(--space-3);
28443
+ padding: var(--space-4);
28444
+ --notice-line: var(--line-height-2);
28445
+ --notice-control: var(--control-height-2);
28444
28446
  --notice-radius: var(--radius-surface-2);
28445
28447
  --notice-icon-size: var(--content-icon-size-2);
28446
28448
  }
28447
28449
  .rt-NoticeRoot:where(.rt-r-size-3) {
28448
- gap: var(--space-3);
28449
- padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
28450
- min-height: calc(var(--space-8) + var(--space-2));
28450
+ gap: var(--space-4);
28451
+ padding: var(--space-5);
28452
+ --notice-line: var(--line-height-3);
28453
+ --notice-control: var(--control-height-3);
28451
28454
  --notice-radius: var(--radius-surface-3);
28452
28455
  --notice-icon-size: var(--content-icon-size-3);
28453
28456
  }