@dialpad/dialtone-css 8.70.2 → 8.70.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 (13) hide show
  1. package/lib/build/js/dialtone_migrate_flex_to_stack/examples-edge-cases.vue +329 -0
  2. package/lib/build/js/dialtone_migrate_flex_to_stack/index.mjs +1377 -0
  3. package/lib/build/less/components/modal.less +0 -2
  4. package/lib/build/less/components/popover.less +0 -1
  5. package/lib/build/less/dialtone.less +23 -0
  6. package/lib/dist/dialtone-default-theme.css +19 -3
  7. package/lib/dist/dialtone-default-theme.min.css +1 -1
  8. package/lib/dist/dialtone.css +92 -76
  9. package/lib/dist/dialtone.min.css +1 -1
  10. package/lib/dist/js/dialtone_migrate_flex_to_stack/examples-edge-cases.vue +329 -0
  11. package/lib/dist/js/dialtone_migrate_flex_to_stack/index.mjs +1377 -0
  12. package/lib/dist/tokens-docs.json +1 -1
  13. package/package.json +3 -2
package/lib/build/less/components/modal.less CHANGED
@@ -83,7 +83,6 @@
83
83
  font-size: var(--dt-font-size-200);
84
84
  line-height: var(--dt-font-line-height-400);
85
85
  background-color: var(--modal-dialog-color-background);
86
- background-clip: padding-box;
87
86
  border: var(--dt-size-100) solid var(--modal-dialog-color-border);
88
87
  border-radius: var(--dt-size-500);
89
88
  box-shadow: var(--modal-dialog-shadow);
@@ -171,7 +170,6 @@
171
170
  font-size: var(--dt-font-size-200);
172
171
  line-height: var(--dt-font-line-height-300);
173
172
  background-color: var(--modal-banner-color-background);
174
- background-clip: padding-box;
175
173
  border: var(--dt-size-100) solid var(--modal-dialog-color-border);
176
174
  border-bottom-width: 0;
177
175
  border-radius: var(--dt-size-500) var(--dt-size-500) 0 0;
package/lib/build/less/components/popover.less CHANGED
@@ -45,7 +45,6 @@
45
45
  overflow: auto;
46
46
  color: var(--dt-color-foreground-primary);
47
47
  background-color: var(--popover-color-background);
48
- background-clip: padding-box;
49
48
  border: var(--popover-border-width) solid var(--popover-color-border);
50
49
  border-radius: var(--popover-border-radius);
51
50
  box-shadow: var(--popover-shadow);
package/lib/build/less/dialtone.less CHANGED
@@ -98,3 +98,26 @@
98
98
  // -- THEMES & GLOBAL SETTINGS
99
99
  @import 'dialtone-globals';
100
100
  @import 'themes/default';
101
+
102
+ // -- DEBUG
103
+ [data-migrate-outline] {
104
+ --outline-color: orangered;
105
+ --outline-size: var(--dt-size-200);
106
+ --outline-offset: calc(var(--outline-size) * -1);
107
+
108
+ /* stylelint-disable-next-line meowtec/no-px */
109
+ outline: var(--outline-size) solid var(--outline-color) !important;
110
+ /* stylelint-disable-next-line meowtec/no-px */
111
+ outline-offset: var(--outline-offset);
112
+
113
+ &:hover {
114
+ --outline-color: transparent;
115
+ }
116
+ /* stylelint-disable-next-line meowtec/no-px */
117
+ > * {
118
+ /* stylelint-disable-next-line meowtec/no-px */
119
+ outline: var(--outline-size) dotted var(--outline-color);
120
+ /* stylelint-disable-next-line meowtec/no-px */
121
+ outline-offset: var(--outline-offset);
122
+ }
123
+ }
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -3594,7 +3594,6 @@ legend .d-label--md {
3594
3594
  font-size: var(--dt-font-size-200);
3595
3595
  line-height: var(--dt-font-line-height-400);
3596
3596
  background-color: var(--modal-dialog-color-background);
3597
- background-clip: padding-box;
3598
3597
  border: var(--dt-size-100) solid var(--modal-dialog-color-border);
3599
3598
  border-radius: var(--dt-size-500);
3600
3599
  box-shadow: var(--modal-dialog-shadow);
@@ -3654,7 +3653,6 @@ legend .d-label--md {
3654
3653
  font-size: var(--dt-font-size-200);
3655
3654
  line-height: var(--dt-font-line-height-300);
3656
3655
  background-color: var(--modal-banner-color-background);
3657
- background-clip: padding-box;
3658
3656
  border: var(--dt-size-100) solid var(--modal-dialog-color-border);
3659
3657
  border-bottom-width: 0;
3660
3658
  border-radius: var(--dt-size-500) var(--dt-size-500) 0 0;
@@ -4172,7 +4170,6 @@ legend .d-label--md {
4172
4170
  overflow: auto;
4173
4171
  color: var(--dt-color-foreground-primary);
4174
4172
  background-color: var(--popover-color-background);
4175
- background-clip: padding-box;
4176
4173
  border: var(--popover-border-width) solid var(--popover-color-border);
4177
4174
  border-radius: var(--popover-border-radius);
4178
4175
  box-shadow: var(--popover-shadow);
@@ -10585,6 +10582,25 @@ body {
10585
10582
  --base--line-height: var(--dt-font-line-height-300);
10586
10583
  --base--corner-radius: 0.25em;
10587
10584
  }
10585
+ [data-migrate-outline] {
10586
+ --outline-color: orangered;
10587
+ --outline-size: var(--dt-size-200);
10588
+ --outline-offset: calc(var(--outline-size) * -1);
10589
+ /* stylelint-disable-next-line meowtec/no-px */
10590
+ outline: var(--outline-size) solid var(--outline-color) !important;
10591
+ /* stylelint-disable-next-line meowtec/no-px */
10592
+ outline-offset: var(--outline-offset);
10593
+ /* stylelint-disable-next-line meowtec/no-px */
10594
+ }
10595
+ [data-migrate-outline]:hover {
10596
+ --outline-color: transparent;
10597
+ }
10598
+ [data-migrate-outline] > * {
10599
+ /* stylelint-disable-next-line meowtec/no-px */
10600
+ outline: var(--outline-size) dotted var(--outline-color);
10601
+ /* stylelint-disable-next-line meowtec/no-px */
10602
+ outline-offset: var(--outline-offset);
10603
+ }
10588
10604
  /**
10589
10605
  * Do not edit directly, this file was auto-generated.
10590
10606
  */