@dialpad/dialtone-css 8.78.0 → 8.79.0

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 (10) hide show
  1. package/lib/build/less/components/button.less +63 -67
  2. package/lib/build/less/components/chip.less +4 -4
  3. package/lib/build/less/components/pagination.less +0 -5
  4. package/lib/build/less/recipes/leftbar_row.less +2 -2
  5. package/lib/dist/dialtone-default-theme.css +107 -82
  6. package/lib/dist/dialtone-default-theme.min.css +1 -1
  7. package/lib/dist/dialtone.css +107 -82
  8. package/lib/dist/dialtone.min.css +1 -1
  9. package/lib/dist/tokens-docs.json +1 -1
  10. package/package.json +1 -1
package/lib/build/less/components/button.less CHANGED
@@ -96,14 +96,14 @@
96
96
 
97
97
  // -- STATES
98
98
  // ------------------------------------------------------------------------
99
- &:hover:not([disabled]) {
99
+ &:hover:not(:disabled, .d-btn--disabled) {
100
100
  --button-color-text: var(--dt-action-color-foreground-base-hover);
101
101
  --button-color-background: var(--dt-action-color-background-base-hover);
102
102
  }
103
103
 
104
- &:active:not([disabled]),
105
- &.d-btn--active:not([disabled]),
106
- &.d-btn--active:active:not([disabled]) {
104
+ &:active:not(:disabled, .d-btn--disabled),
105
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
106
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
107
107
  --button-color-text: var(--dt-action-color-foreground-base-active);
108
108
  --button-color-background: var(--dt-action-color-background-base-active);
109
109
  }
@@ -113,17 +113,29 @@
113
113
  box-shadow: var(--dt-shadow-focus);
114
114
  }
115
115
 
116
- &[disabled] {
117
- --button-color-border: transparent !important;
118
- --button-color-text: var(
119
- --dt-action-color-foreground-disabled-default
120
- ) !important;
121
- --button-color-background: var(
122
- --dt-action-color-background-disabled-default
123
- ) !important;
116
+ &--disabled,
117
+ &:disabled {
118
+ --chroma-adjust-text: .08;
119
+ --chroma-adjust-background: .08;
120
+ --chroma-adjust-border: .08;
121
+ --opacity-adjust-text: 65%;
122
+ --opacity-adjust-background: 65%;
123
+ --opacity-adjust-border: 40%;
124
124
 
125
+ color: color-mix(in oklch, oklch( from var(--button-color-text) l calc(c - var(--chroma-adjust-text)) h ) var(--opacity-adjust-text), transparent);
126
+ background-color: color-mix(in oklch, oklch( from var(--button-color-background) l calc(c - var(--chroma-adjust-background)) h ) var(--opacity-adjust-background), transparent);
127
+ border-color: color-mix(in oklch, oklch( from var(--button-color-border) l calc(c - var(--chroma-adjust-border)) h ) var(--opacity-adjust-border), transparent);
125
128
  cursor: not-allowed;
126
129
  transition: none;
130
+
131
+ &.d-btn--primary {
132
+ --opacity-adjust-text: 80%;
133
+ }
134
+
135
+ &.d-btn--muted {
136
+ --opacity-adjust-text: 50%;
137
+ --opacity-adjust-border: 50%;
138
+ }
127
139
  }
128
140
  }
129
141
 
@@ -246,14 +258,14 @@
246
258
  --button-color-text: var(--dt-action-color-foreground-muted-default);
247
259
  --button-border-radius: var(--dt-size-radius-circle);
248
260
 
249
- &:hover:not([disabled]) {
261
+ &:hover:not(:disabled, .d-btn--disabled) {
250
262
  --button-color-text: var(--dt-action-color-foreground-muted-hover);
251
263
  --button-color-background: var(--dt-action-color-background-muted-hover);
252
264
  }
253
265
 
254
- &:active:not([disabled]),
255
- &.d-btn--active:not([disabled]),
256
- &.d-btn--active:active:not([disabled]) {
266
+ &:active:not(:disabled, .d-btn--disabled),
267
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
268
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
257
269
  --button-color-text: var(--dt-action-color-foreground-muted-active);
258
270
  --button-color-background: var(--dt-action-color-background-muted-active);
259
271
  }
@@ -311,16 +323,16 @@
311
323
  --dt-action-color-background-base-primary-default
312
324
  );
313
325
 
314
- &:hover:not([disabled]) {
326
+ &:hover:not(:disabled, .d-btn--disabled) {
315
327
  --button-color-text: var(--dt-action-color-foreground-base-primary-default);
316
328
  --button-color-background: var(
317
329
  --dt-action-color-background-base-primary-hover
318
330
  );
319
331
  }
320
332
 
321
- &:active:not([disabled]),
322
- &.d-btn--active:not([disabled]),
323
- &.d-btn--active:active:not([disabled]) {
333
+ &:active:not(:disabled, .d-btn--disabled),
334
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
335
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
324
336
  --button-color-text: var(--dt-action-color-foreground-base-primary-default);
325
337
  --button-color-background: var(
326
338
  --dt-action-color-background-base-primary-active
@@ -333,14 +345,14 @@
333
345
  .d-btn--muted {
334
346
  --button-color-text: var(--dt-action-color-foreground-muted-default);
335
347
 
336
- &:hover:not([disabled]) {
348
+ &:hover:not(:disabled, .d-btn--disabled) {
337
349
  --button-color-text: var(--dt-action-color-foreground-muted-hover);
338
350
  --button-color-background: var(--dt-action-color-background-muted-hover);
339
351
  }
340
352
 
341
- &:active:not([disabled]),
342
- &.d-btn--active:not([disabled]),
343
- &.d-btn--active:active:not([disabled]) {
353
+ &:active:not(:disabled, .d-btn--disabled),
354
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
355
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
344
356
  --button-color-text: var(--dt-action-color-foreground-muted-active);
345
357
  --button-color-background: var(--dt-action-color-background-muted-active);
346
358
  }
@@ -356,14 +368,14 @@
356
368
  --button-color-text: var(--dt-action-color-foreground-critical-default);
357
369
  --button-color-background: var(--dt-action-color-background-critical-default);
358
370
 
359
- &:hover:not([disabled]) {
371
+ &:hover:not(:disabled, .d-btn--disabled) {
360
372
  --button-color-text: var(--dt-action-color-foreground-critical-hover);
361
373
  --button-color-background: var(--dt-action-color-background-critical-hover);
362
374
  }
363
375
 
364
- &:active:not([disabled]),
365
- &.d-btn--active:not([disabled]),
366
- &.d-btn--active:active:not([disabled]) {
376
+ &:active:not(:disabled, .d-btn--disabled),
377
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
378
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
367
379
  --button-color-text: var(--dt-action-color-foreground-critical-active);
368
380
  --button-color-background: var(
369
381
  --dt-action-color-background-critical-active
@@ -384,7 +396,7 @@
384
396
  --dt-action-color-background-critical-primary-default
385
397
  );
386
398
 
387
- &:hover:not([disabled]) {
399
+ &:hover:not(:disabled, .d-btn--disabled) {
388
400
  --button-color-text: var(
389
401
  --dt-action-color-foreground-critical-primary-default
390
402
  );
@@ -393,9 +405,9 @@
393
405
  );
394
406
  }
395
407
 
396
- &:active:not([disabled]),
397
- &.d-btn--active:not([disabled]),
398
- &.d-btn--active:active:not([disabled]) {
408
+ &:active:not(:disabled, .d-btn--disabled),
409
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
410
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
399
411
  --button-color-text: var(
400
412
  --dt-action-color-foreground-critical-primary-default
401
413
  );
@@ -412,14 +424,14 @@
412
424
  --button-color-text: var(--dt-action-color-foreground-positive-default);
413
425
  --button-color-background: var(--dt-action-color-background-positive-default);
414
426
 
415
- &:hover:not([disabled]) {
427
+ &:hover:not(:disabled, .d-btn--disabled) {
416
428
  --button-color-text: var(--dt-action-color-foreground-positive-hover);
417
429
  --button-color-background: var(--dt-action-color-background-positive-hover);
418
430
  }
419
431
 
420
- &:active:not([disabled]),
421
- &.d-btn--active:not([disabled]),
422
- &.d-btn--active:active:not([disabled]) {
432
+ &:active:not(:disabled, .d-btn--disabled),
433
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
434
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
423
435
  --button-color-text: var(--dt-action-color-foreground-positive-active);
424
436
  --button-color-background: var(
425
437
  --dt-action-color-background-positive-active
@@ -440,7 +452,7 @@
440
452
  --dt-action-color-background-positive-primary-default
441
453
  );
442
454
 
443
- &:hover:not([disabled]) {
455
+ &:hover:not(:disabled, .d-btn--disabled) {
444
456
  --button-color-text: var(
445
457
  --dt-action-color-foreground-positive-primary-default
446
458
  );
@@ -449,9 +461,9 @@
449
461
  );
450
462
  }
451
463
 
452
- &:active:not([disabled]),
453
- &.d-btn--active:not([disabled]),
454
- &.d-btn--active:active:not([disabled]) {
464
+ &:active:not(:disabled, .d-btn--disabled),
465
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
466
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
455
467
  --button-color-text: var(
456
468
  --dt-action-color-foreground-positive-primary-default
457
469
  );
@@ -469,14 +481,14 @@
469
481
  --button-color-text: var(--dt-action-color-foreground-inverted-default);
470
482
  --button-color-background: var(--dt-action-color-background-inverted-default);
471
483
 
472
- &:hover:not([disabled]) {
484
+ &:hover:not(:disabled, .d-btn--disabled) {
473
485
  --button-color-text: var(--dt-action-color-foreground-inverted-hover);
474
486
  --button-color-background: var(--dt-action-color-background-inverted-hover);
475
487
  }
476
488
 
477
- &:active:not([disabled]),
478
- &.d-btn--active:not([disabled]),
479
- &.d-btn--active:active:not([disabled]) {
489
+ &:active:not(:disabled, .d-btn--disabled),
490
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
491
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
480
492
  --button-color-text: var(--dt-action-color-foreground-inverted-active);
481
493
  --button-color-background: var(
482
494
  --dt-action-color-background-inverted-active
@@ -499,7 +511,7 @@
499
511
  --dt-action-color-background-inverted-primary-default
500
512
  );
501
513
 
502
- &:hover:not([disabled]) {
514
+ &:hover:not(:disabled, .d-btn--disabled) {
503
515
  --button-color-text: var(
504
516
  --dt-action-color-foreground-inverted-primary-hover
505
517
  );
@@ -508,9 +520,9 @@
508
520
  );
509
521
  }
510
522
 
511
- &:active:not([disabled]),
512
- &.d-btn--active:not([disabled]),
513
- &.d-btn--active:active:not([disabled]) {
523
+ &:active:not(:disabled, .d-btn--disabled),
524
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
525
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
514
526
  --button-color-text: var(
515
527
  --dt-action-color-foreground-inverted-primary-active
516
528
  );
@@ -595,22 +607,6 @@
595
607
  }
596
608
  }
597
609
 
598
- // $$ DISABLED STATE
599
- // ----------------------------------------------------------------------------
600
- .d-btn--disabled {
601
- --button-color-text: var(
602
- --dt-action-color-foreground-disabled-default
603
- ) !important;
604
- --button-color-background: var(
605
- --dt-action-color-background-disabled-default
606
- ) !important;
607
- --button-color-border: transparent !important;
608
-
609
- cursor: not-allowed;
610
- transition: none;
611
- pointer-events: none;
612
- }
613
-
614
610
  // $$ BRAND BUTTONS
615
611
  // ----------------------------------------------------------------------------
616
612
  .d-btn--brand {
@@ -621,8 +617,8 @@
621
617
 
622
618
  display: flex;
623
619
 
624
- &:hover:not([disabled]),
625
- &:active:not([disabled]) {
620
+ &:hover:not(:disabled, .d-btn--disabled),
621
+ &:active:not(:disabled, .d-btn--disabled) {
626
622
  --button-color-text: hsl(var(--dt-color-neutral-white-hsl) ~" / " 90%);
627
623
  --button-color-background: hsl(
628
624
  var(--brand-color-h) calc(var(--brand-color-s) + 2.5%)
@@ -639,7 +635,7 @@
639
635
  );
640
636
  }
641
637
 
642
- &:active:not([disabled]) {
638
+ &:active:not(:disabled, .d-btn--disabled) {
643
639
  --button-color-background: hsl(
644
640
  var(--brand-color-h) calc(var(--brand-color-s) + 5%)
645
641
  calc(var(--brand-color-l) - 10%)
package/lib/build/less/components/chip.less CHANGED
@@ -99,13 +99,13 @@
99
99
  content: '';
100
100
  }
101
101
 
102
- &:hover:not([disabled]) {
102
+ &:hover:not(:disabled, .d-btn--disabled) {
103
103
  --button-color-background: var(--dt-action-color-background-muted-hover);
104
104
  }
105
105
 
106
- &:active:not([disabled]),
107
- &.d-btn--active:not([disabled]),
108
- &.d-btn--active:active:not([disabled]) {
106
+ &:active:not(:disabled, .d-btn--disabled),
107
+ &.d-btn--active:not(:disabled, .d-btn--disabled),
108
+ &.d-btn--active:active:not(:disabled, .d-btn--disabled) {
109
109
  --button-color-background: var(--dt-action-color-background-muted-active);
110
110
  }
111
111
  }
package/lib/build/less/components/pagination.less CHANGED
@@ -25,11 +25,6 @@
25
25
  .d-pagination__button {
26
26
  padding-right: var(--dt-space-400);
27
27
  padding-left: var(--dt-space-400);
28
-
29
- &:disabled {
30
- color: var(--dt-color-foreground-secondary-inverted);
31
- background-color: var(--dt-color-neutral-transparent);
32
- }
33
28
  }
34
29
 
35
30
  // ============================================================================
package/lib/build/less/recipes/leftbar_row.less CHANGED
@@ -195,11 +195,11 @@
195
195
  --button-color-text: var(--dt-shell-mention-color-surface-primary);
196
196
  }
197
197
 
198
- .d-btn--inverted.d-btn--primary:hover:not([disabled]) {
198
+ .d-btn--inverted.d-btn--primary:hover:not(:disabled, .d-btn--disabled) {
199
199
  --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 10%, var(--dt-color-surface-primary) 100%);
200
200
  }
201
201
 
202
- .d-btn--inverted.d-btn--primary:active:not([disabled]) {
202
+ .d-btn--inverted.d-btn--primary:active:not(:disabled, .d-btn--disabled) {
203
203
  --button-color-background: color-mix(in srgb, var(--dt-shell-mention-color-surface-primary) 30%, var(--dt-color-surface-primary) 100%);
204
204
  }
205
205