@dialpad/dialtone-css 8.45.1 → 8.45.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 (22) hide show
  1. package/lib/build/less/components/badge.less +1 -1
  2. package/lib/build/less/components/input.less +1 -1
  3. package/lib/build/less/components/modal.less +5 -0
  4. package/lib/build/less/components/popover.less +3 -0
  5. package/lib/build/less/components/radio-checkbox.less +1 -1
  6. package/lib/build/less/components/scrollbar.less +1 -1
  7. package/lib/build/less/utilities/colors.less +1 -94
  8. package/lib/dist/dialtone-default-theme.css +3406 -2481
  9. package/lib/dist/dialtone-default-theme.min.css +1 -1
  10. package/lib/dist/dialtone.css +885 -796
  11. package/lib/dist/dialtone.min.css +1 -1
  12. package/lib/dist/tokens/tokens-base-dark.css +214 -138
  13. package/lib/dist/tokens/tokens-base-light.css +169 -113
  14. package/lib/dist/tokens/tokens-dp-dark.css +1199 -953
  15. package/lib/dist/tokens/tokens-dp-light.css +1201 -955
  16. package/lib/dist/tokens/tokens-expressive-dark.css +1201 -955
  17. package/lib/dist/tokens/tokens-expressive-light.css +1201 -955
  18. package/lib/dist/tokens/tokens-expressive-sm-dark.css +1201 -955
  19. package/lib/dist/tokens/tokens-expressive-sm-light.css +1201 -955
  20. package/lib/dist/tokens/tokens-tmo-dark.css +1190 -944
  21. package/lib/dist/tokens/tokens-tmo-light.css +1189 -943
  22. package/package.json +3 -11
package/lib/build/less/components/badge.less CHANGED
@@ -102,7 +102,7 @@
102
102
  }
103
103
 
104
104
  &--outlined {
105
- box-shadow: 0 0 0 var(--dt-size-border-150) var(--badge-color-outline) inset;
105
+ box-shadow: 0 0 0 var(--dt-size-border-100) var(--badge-color-outline) inset;
106
106
  }
107
107
 
108
108
  // DECORATIVE
package/lib/build/less/components/input.less CHANGED
@@ -30,7 +30,7 @@
30
30
  --input-color-background: var(--dt-inputs-color-background-default);
31
31
  --input-color-background-disabled: var(--dt-inputs-color-background-disabled);
32
32
  --input-color-text: var(--dt-inputs-color-foreground-default);
33
- --input-border-width: var(--dt-size-border-150);
33
+ --input-border-width: var(--dt-size-border-100);
34
34
  --input-border-radius: var(--dt-inputs-size-radius-md);
35
35
  --input-padding-y: calc(var(--dt-space-400) - var(--input-border-width));
36
36
  --input-padding-x: calc((var(--dt-space-500) - var(--dt-space-300)) - var(--input-border-width));
package/lib/build/less/components/modal.less CHANGED
@@ -33,6 +33,8 @@
33
33
  --modal-header-color-text: var(--dt-color-foreground-primary);
34
34
  --modal-dialog-shadow: var(--dt-shadow-large);
35
35
 
36
+ // If we don't set this the native app header region will override all click events on the modal overlay
37
+ -webkit-app-region: no-drag;
36
38
  position: fixed;
37
39
  inset: 0;
38
40
  z-index: var(--zi-hide);
@@ -51,6 +53,9 @@
51
53
  .d-modal--transparent {
52
54
  --modal-backdrop-color-background: var(--d-bgc-transparent);
53
55
 
56
+ // If we don't set this the native app header region will override all click events on the modal overlay
57
+ -webkit-app-region: no-drag;
58
+
54
59
  &[aria-hidden='false'] {
55
60
  position: fixed;
56
61
  top: 0;
package/lib/build/less/components/popover.less CHANGED
@@ -30,6 +30,9 @@
30
30
  --popover-color-border: var(--dt-color-border-subtle);
31
31
  --popover-shadow: var(--dt-shadow-card);
32
32
 
33
+ // If we don't set this the native app header region will override all click events within the popover
34
+ -webkit-app-region: no-drag;
35
+
33
36
  &,
34
37
  *,
35
38
  *::before,
package/lib/build/less/components/radio-checkbox.less CHANGED
@@ -30,7 +30,7 @@
30
30
  --check-radio-color-background: var(--dt-inputs-color-background-default);
31
31
  --check-radio-color-background-checked: var(--dt-checkbox-color-background-checked);
32
32
  --check-radio-color-background-disabled: var(--dt-inputs-color-background-disabled);
33
- --check-radio-border-width: var(--dt-size-border-150);
33
+ --check-radio-border-width: var(--dt-size-border-100);
34
34
 
35
35
  // [1] Check to see if we can use custom styles, if so reset the defaults
36
36
  // ------------------------------------------------------------------------
package/lib/build/less/components/scrollbar.less CHANGED
@@ -32,7 +32,7 @@
32
32
  }
33
33
 
34
34
  // put this class on html element to disable the scrollbar on body (useful for modals)
35
- :root.d-scrollbar-disabled {
35
+ .d-scrollbar-disabled {
36
36
  overflow: hidden !important;
37
37
 
38
38
  & .os-scrollbar {
package/lib/build/less/utilities/colors.less CHANGED
@@ -13,71 +13,12 @@
13
13
  //
14
14
  // $$ TEXT COLORS
15
15
  // ----------------------------------------------------------------------------
16
- .d-fc-primary { color: var(--dt-color-foreground-primary) !important; }
17
- .d-fc-primary-inverted { color: var(--dt-color-foreground-primary-inverted) !important; }
18
- .d-fc-secondary { color: var(--dt-color-foreground-secondary) !important; }
19
- .d-fc-secondary-inverted { color: var(--dt-color-foreground-secondary-inverted) !important; }
20
- .d-fc-tertiary { color: var(--dt-color-foreground-tertiary) !important; }
21
- .d-fc-tertiary-inverted { color: var(--dt-color-foreground-tertiary-inverted) !important; }
22
- .d-fc-muted { color: var(--dt-color-foreground-muted) !important; }
23
- .d-fc-muted-inverted { color: var(--dt-color-foreground-muted-inverted) !important; }
24
- .d-fc-placeholder { color: var(--dt-color-foreground-placeholder) !important; }
25
- .d-fc-placeholder-inverted { color: var(--dt-color-foreground-placeholder-inverted) !important; }
26
- .d-fc-disabled { color: var(--dt-color-foreground-disabled) !important; }
27
- .d-fc-disabled-inverted { color: var(--dt-color-foreground-disabled-inverted) !important; }
28
- .d-fc-success { color: var(--dt-color-foreground-success) !important; }
29
- .d-fc-success-inverted { color: var(--dt-color-foreground-success-inverted) !important; }
30
- .d-fc-success-strong { color: var(--dt-color-foreground-success-strong) !important; }
31
- .d-fc-success-strong-inverted { color: var(--dt-color-foreground-success-strong-inverted) !important; }
32
- .d-fc-warning { color: var(--dt-color-foreground-warning) !important; }
33
- .d-fc-warning-inverted { color: var(--dt-color-foreground-warning-inverted) !important; }
34
- .d-fc-error { color: var(--dt-color-foreground-critical) !important; }
35
- .d-fc-error-strong { color: var(--dt-color-foreground-critical-strong) !important; }
36
- .d-fc-critical { color: var(--dt-color-foreground-critical) !important; }
37
- .d-fc-critical-inverted { color: var(--dt-color-foreground-critical-inverted) !important; }
38
- .d-fc-critical-strong { color: var(--dt-color-foreground-critical-strong) !important; }
39
- .d-fc-critical-strong-inverted { color: var(--dt-color-foreground-critical-strong-inverted) !important; }
40
16
  .d-fc-current { color: currentColor !important; }
41
17
  .d-fc-transparent { color: transparent !important; }
42
18
  .d-fc-unset { color: unset !important; }
43
19
 
44
-
45
20
  // $$ BACKGROUND/SURFACE COLORS
46
21
  // ----------------------------------------------------------------------------
47
- .d-bgc-primary { background-color: var(--dt-color-surface-primary) !important; }
48
- .d-bgc-secondary { background-color: var(--dt-color-surface-secondary) !important; }
49
- .d-bgc-secondary-opaque { background-color: var(--dt-color-surface-secondary-opaque) !important; }
50
- .d-bgc-moderate { background-color: var(--dt-color-surface-moderate) !important; }
51
- .d-bgc-moderate-opaque { background-color: var(--dt-color-surface-moderate-opaque) !important; }
52
- .d-bgc-strong-opaque { background-color: var(--dt-color-surface-strong-opaque) !important; }
53
- .d-bgc-contrast-opaque { background-color: var(--dt-color-surface-contrast-opaque) !important; }
54
- .d-bgc-bold { background-color: var(--dt-color-surface-bold) !important; }
55
- .d-bgc-bold-opaque { background-color: var(--dt-color-surface-bold-opaque) !important; }
56
- .d-bgc-strong { background-color: var(--dt-color-surface-strong) !important; }
57
- .d-bgc-contrast { background-color: var(--dt-color-surface-contrast) !important; }
58
- .d-bgc-backdrop { background-color: var(--dt-color-surface-backdrop) !important; }
59
- .d-bgc-success { background-color: var(--dt-color-surface-success) !important; }
60
- .d-bgc-success-opaque { background-color: var(--dt-color-surface-success-opaque) !important; }
61
- .d-bgc-success-subtle { background-color: var(--dt-color-surface-success-subtle) !important; }
62
- .d-bgc-success-subtle-opaque { background-color: var(--dt-color-surface-success-subtle-opaque) !important; }
63
- .d-bgc-success-strong { background-color: var(--dt-color-surface-success-strong) !important; }
64
- .d-bgc-warning { background-color: var(--dt-color-surface-warning) !important; }
65
- .d-bgc-warning-opaque { background-color: var(--dt-color-surface-warning-opaque) !important; }
66
- .d-bgc-warning-subtle { background-color: var(--dt-color-surface-warning-subtle) !important; }
67
- .d-bgc-warning-subtle-opaque { background-color: var(--dt-color-surface-warning-subtle-opaque) !important; }
68
- .d-bgc-warning-strong { background-color: var(--dt-color-surface-warning-strong) !important; }
69
- .d-bgc-info { background-color: var(--dt-color-surface-info) !important; }
70
- .d-bgc-info-opaque { background-color: var(--dt-color-surface-info-opaque) !important; }
71
- .d-bgc-info-subtle { background-color: var(--dt-color-surface-info-subtle) !important; }
72
- .d-bgc-info-subtle-opaque { background-color: var(--dt-color-surface-info-subtle-opaque) !important; }
73
- .d-bgc-info-strong { background-color: var(--dt-color-surface-info-strong) !important; }
74
- .d-bgc-critical,
75
- .d-bgc-error,
76
- .d-bgc-danger { background-color: var(--dt-color-surface-critical) !important; }
77
- .d-bgc-critical-opaque { background-color: var(--dt-color-surface-critical-opaque) !important; }
78
- .d-bgc-critical-subtle { background-color: var(--dt-color-surface-critical-subtle) !important; }
79
- .d-bgc-critical-subtle-opaque { background-color: var(--dt-color-surface-critical-subtle-opaque) !important; }
80
- .d-bgc-critical-strong { background-color: var(--dt-color-surface-critical-strong) !important; }
81
22
  .d-bgc-transparent { background-color: transparent !important; background-image: none !important; }
82
23
  .d-bgc-unset { background-color: unset !important; background-image: unset !important; }
83
24
 
@@ -85,38 +26,4 @@
85
26
  // ----------------------------------------------------------------------------
86
27
  .d-bc-transparent { border-color: transparent !important; }
87
28
  .d-bc-current { border-color: currentColor !important; }
88
- .d-bc-unset { border-color: unset !important; }
89
- .d-bc-subtle { border-color: var(--dt-color-border-subtle) !important; }
90
- .d-bc-default { border-color: var(--dt-color-border-default) !important; }
91
- .d-bc-moderate { border-color: var(--dt-color-border-moderate) !important; }
92
- .d-bc-bold { border-color: var(--dt-color-border-bold) !important; }
93
- .d-bc-subtle-inverted { border-color: var(--dt-color-border-subtle-inverted) !important; }
94
- .d-bc-default-inverted { border-color: var(--dt-color-border-default-inverted) !important; }
95
- .d-bc-moderate-inverted { border-color: var(--dt-color-border-moderate-inverted) !important; }
96
- .d-bc-bold-inverted { border-color: var(--dt-color-border-bold-inverted) !important; }
97
- .d-bc-focus { border-color: var(--dt-color-border-focus) !important; }
98
- .d-bc-critical { border-color: var(--dt-color-border-critical) !important; }
99
- .d-bc-critical-inverted{ border-color: var(--dt-color-border-critical-inverted) !important; }
100
- .d-bc-critical-subtle { border-color: var(--dt-color-border-critical-subtle) !important; }
101
- .d-bc-critical-subtle-inverted { border-color: var(--dt-color-border-critical-subtle-inverted) !important; }
102
- .d-bc-critical-strong { border-color: var(--dt-color-border-critical-strong) !important; }
103
- .d-bc-critical-strong-inverted { border-color: var(--dt-color-border-critical-strong-inverted) !important; }
104
- .d-bc-success { border-color: var(--dt-color-border-success) !important; }
105
- .d-bc-success-inverted { border-color: var(--dt-color-border-success-inverted) !important; }
106
- .d-bc-success-subtle { border-color: var(--dt-color-border-success-subtle) !important; }
107
- .d-bc-success-subtle-inverted { border-color: var(--dt-color-border-success-subtle-inverted) !important; }
108
- .d-bc-success-strong { border-color: var(--dt-color-border-success-strong) !important; }
109
- .d-bc-success-strong-inverted { border-color: var(--dt-color-border-success-strong-inverted) !important; }
110
- .d-bc-warning { border-color: var(--dt-color-border-warning) !important; }
111
- .d-bc-warning-inverted { border-color: var(--dt-color-border-warning-inverted) !important; }
112
- .d-bc-warning-subtle { border-color: var(--dt-color-border-warning-subtle) !important; }
113
- .d-bc-warning-subtle-inverted { border-color: var(--dt-color-border-warning-subtle-inverted) !important; }
114
- .d-bc-warning-strong { border-color: var(--dt-color-border-warning-strong) !important; }
115
- .d-bc-warning-strong-inverted { border-color: var(--dt-color-border-warning-strong-inverted) !important; }
116
- .d-bc-brand { border-color: var(--dt-color-border-brand) !important; }
117
- .d-bc-brand-inverted { border-color: var(--dt-color-border-brand-inverted) !important; }
118
- .d-bc-brand-subtle { border-color: var(--dt-color-border-brand-subtle) !important; }
119
- .d-bc-brand-subtle-inverted { border-color: var(--dt-color-border-brand-subtle-inverted) !important; }
120
- .d-bc-brand-strong { border-color: var(--dt-color-border-brand-strong) !important; }
121
- .d-bc-brand-strong-inverted { border-color: var(--dt-color-border-brand-strong-inverted) !important; }
122
- .d-bc-accent { border-color: var(--dt-color-border-accent) !important; }
29
+ .d-bc-unset { border-color: unset !important; }