@dialpad/dialtone-css 8.81.0-next.15 → 8.81.0-next.17

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/less/components/breadcrumbs.less +4 -0
  2. package/lib/build/less/components/keyboard-shortcut.less +1 -1
  3. package/lib/build/less/components/rich-text-editor.less +31 -19
  4. package/lib/dist/dialtone-default-theme.css +37 -19
  5. package/lib/dist/dialtone-default-theme.min.css +1 -1
  6. package/lib/dist/dialtone-docs.json +1 -1
  7. package/lib/dist/dialtone.css +37 -19
  8. package/lib/dist/dialtone.min.css +1 -1
  9. package/lib/dist/no-layers/dialtone-default-theme.css +37 -19
  10. package/lib/dist/no-layers/dialtone-default-theme.min.css +1 -1
  11. package/lib/dist/no-layers/dialtone.css +37 -19
  12. package/lib/dist/no-layers/dialtone.min.css +1 -1
  13. package/package.json +3 -3
package/lib/build/less/components/breadcrumbs.less CHANGED
@@ -52,6 +52,10 @@
52
52
  margin-inline: var(--dt-spacing-100) 0;
53
53
  margin-block: 0;
54
54
 
55
+ &:first-child {
56
+ margin-inline-start: 0;
57
+ }
58
+
55
59
  // Provide a forward slash with each element except when it's the last one.
56
60
  &:not(:last-of-type) {
57
61
  margin-inline-end: var(--dt-spacing-150);
package/lib/build/less/components/keyboard-shortcut.less CHANGED
@@ -22,7 +22,7 @@
22
22
  font-variant-numeric: tabular-nums;
23
23
  min-inline-size: 1lh;
24
24
  border: var(--dt-size-border-100) solid;
25
- border-color: var(--dt-color-border-default);
25
+ border-color: var(--dt-color-border-subtle);
26
26
  border-radius: var(--dt-size-radius-300);
27
27
 
28
28
  &--inverted {
package/lib/build/less/components/rich-text-editor.less CHANGED
@@ -1,18 +1,25 @@
1
1
  @layer dialtone.components {
2
2
  .d-rich-text-editor {
3
+ font: var(--dt-typography-body-md-compact);
4
+
3
5
  &__code-block {
4
- padding: var(--dt-spacing-100);
6
+ padding: var(--dt-spacing-100) var(--dt-spacing-150);
7
+ color: var(--dt-color-foreground-secondary);
5
8
  font: var(--dt-typography-code-md);
6
- background: var(--dt-color-surface-secondary);
9
+ font-size: var(--dt-font-size-125);
10
+ line-height: var(--dt-font-line-height-400);
11
+ background-color: var(--dt-color-surface-secondary-opaque);
12
+ border-radius: var(--dt-size-radius-300);
7
13
  }
8
14
 
9
15
  code:not(.d-rich-text-editor__code-block > code) {
10
16
  padding: var(--dt-spacing-25);
11
- color: var(--dt-color-foreground-warning);
17
+ color: var(--dt-color-foreground-warning-strong);
12
18
  font: var(--dt-typography-code-md);
19
+ font-size: var(--dt-font-size-125);
13
20
  background-color: var(--dt-color-surface-secondary-opaque);
14
21
  border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
15
- border-radius: var(--dt-size-radius-200);
22
+ border-radius: var(--dt-size-radius-300);
16
23
  }
17
24
 
18
25
  > .ProseMirror {
@@ -41,46 +48,51 @@
41
48
  pointer-events: none;
42
49
  }
43
50
 
44
- ul, ol {
51
+ :where(ul, ol) {
45
52
  padding-inline-start: var(--dt-spacing-250);
46
53
  }
47
54
 
48
- ul > li {
55
+ ul > li,
56
+ ul ul ul ul > li,
57
+ ul ul ul ul ul ul ul > li {
49
58
  list-style-type: disc;
50
59
  }
51
60
 
52
- ul ul > li {
61
+ ul ul > li,
62
+ ul ul ul ul ul > li,
63
+ ul ul ul ul ul ul ul ul > li {
53
64
  list-style-type: circle;
54
65
  }
55
66
 
56
- ul ul ul > li {
67
+ ul ul ul > li,
68
+ ul ul ul ul ul ul > li,
69
+ ul ul ul ul ul ul ul ul ul > li {
57
70
  list-style-type: square;
58
71
  }
59
72
 
60
- ul ul ul ul > li {
61
- list-style-type: disc;
62
- }
63
-
64
- ol > li {
73
+ ol > li,
74
+ ol ol ol ol > li,
75
+ ol ol ol ol ol ol ol > li {
65
76
  list-style-type: decimal;
66
77
  }
67
78
 
68
- ol ol > li {
79
+ ol ol > li,
80
+ ol ol ol ol ol > li,
81
+ ol ol ol ol ol ol ol ol > li {
69
82
  list-style-type: lower-alpha;
70
83
  }
71
84
 
72
- ol ol ol > li {
85
+ ol ol ol > li,
86
+ ol ol ol ol ol ol > li,
87
+ ol ol ol ol ol ol ol ol ol > li {
73
88
  list-style-type: lower-roman;
74
89
  }
75
90
 
76
- ol ol ol ol > li {
77
- list-style-type: decimal;
78
- }
79
-
80
91
  blockquote {
81
92
  margin-inline-start: 0;
82
93
  padding-inline-start: var(--dt-spacing-100);
83
94
  border-inline-start: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
95
+ color: var(--dt-color-foreground-secondary);
84
96
  }
85
97
 
86
98
  table {
package/lib/dist/dialtone-default-theme.css CHANGED
@@ -6625,7 +6625,7 @@
6625
6625
  font-variant-numeric: tabular-nums;
6626
6626
  min-inline-size: 1lh;
6627
6627
  border: var(--dt-size-border-100) solid;
6628
- border-color: var(--dt-color-border-default);
6628
+ border-color: var(--dt-color-border-subtle);
6629
6629
  border-radius: var(--dt-size-radius-300);
6630
6630
  /* Hiding class, making content visible only to screen readers but not visually */
6631
6631
  /* "sr" meaning "screen-reader" */
@@ -8505,6 +8505,10 @@
8505
8505
  margin-inline: var(--dt-spacing-100) 0;
8506
8506
  margin-block: 0;
8507
8507
  }
8508
+ .d-breadcrumbs__item:first-child {
8509
+ -webkit-margin-start: 0;
8510
+ margin-inline-start: 0;
8511
+ }
8508
8512
  .d-breadcrumbs__item:not(:last-of-type) {
8509
8513
  -webkit-margin-end: var(--dt-spacing-150);
8510
8514
  margin-inline-end: var(--dt-spacing-150);
@@ -9806,18 +9810,26 @@
9806
9810
  box-shadow: none;
9807
9811
  }
9808
9812
  @layer dialtone.components {
9813
+ .d-rich-text-editor {
9814
+ font: var(--dt-typography-body-md-compact);
9815
+ }
9809
9816
  .d-rich-text-editor__code-block {
9810
- padding: var(--dt-spacing-100);
9817
+ padding: var(--dt-spacing-100) var(--dt-spacing-150);
9818
+ color: var(--dt-color-foreground-secondary);
9811
9819
  font: var(--dt-typography-code-md);
9812
- background: var(--dt-color-surface-secondary);
9820
+ font-size: var(--dt-font-size-125);
9821
+ line-height: var(--dt-font-line-height-400);
9822
+ background-color: var(--dt-color-surface-secondary-opaque);
9823
+ border-radius: var(--dt-size-radius-300);
9813
9824
  }
9814
9825
  .d-rich-text-editor code:not(.d-rich-text-editor__code-block > code) {
9815
9826
  padding: var(--dt-spacing-25);
9816
- color: var(--dt-color-foreground-warning);
9827
+ color: var(--dt-color-foreground-warning-strong);
9817
9828
  font: var(--dt-typography-code-md);
9829
+ font-size: var(--dt-font-size-125);
9818
9830
  background-color: var(--dt-color-surface-secondary-opaque);
9819
9831
  border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
9820
- border-radius: var(--dt-size-radius-200);
9832
+ border-radius: var(--dt-size-radius-300);
9821
9833
  }
9822
9834
  .d-rich-text-editor > .ProseMirror {
9823
9835
  box-shadow: none;
@@ -9835,35 +9847,40 @@
9835
9847
  content: attr(data-placeholder);
9836
9848
  pointer-events: none;
9837
9849
  }
9838
- .d-rich-text-editor > .ProseMirror ul,
9839
- .d-rich-text-editor > .ProseMirror ol {
9850
+ .d-rich-text-editor > .ProseMirror :where(ul, ol) {
9840
9851
  -webkit-padding-start: var(--dt-spacing-250);
9841
9852
  padding-inline-start: var(--dt-spacing-250);
9842
9853
  }
9843
- .d-rich-text-editor > .ProseMirror ul > li {
9854
+ .d-rich-text-editor > .ProseMirror ul > li,
9855
+ .d-rich-text-editor > .ProseMirror ul ul ul ul > li,
9856
+ .d-rich-text-editor > .ProseMirror ul ul ul ul ul ul ul > li {
9844
9857
  list-style-type: disc;
9845
9858
  }
9846
- .d-rich-text-editor > .ProseMirror ul ul > li {
9859
+ .d-rich-text-editor > .ProseMirror ul ul > li,
9860
+ .d-rich-text-editor > .ProseMirror ul ul ul ul ul > li,
9861
+ .d-rich-text-editor > .ProseMirror ul ul ul ul ul ul ul ul > li {
9847
9862
  list-style-type: circle;
9848
9863
  }
9849
- .d-rich-text-editor > .ProseMirror ul ul ul > li {
9864
+ .d-rich-text-editor > .ProseMirror ul ul ul > li,
9865
+ .d-rich-text-editor > .ProseMirror ul ul ul ul ul ul > li,
9866
+ .d-rich-text-editor > .ProseMirror ul ul ul ul ul ul ul ul ul > li {
9850
9867
  list-style-type: square;
9851
9868
  }
9852
- .d-rich-text-editor > .ProseMirror ul ul ul ul > li {
9853
- list-style-type: disc;
9854
- }
9855
- .d-rich-text-editor > .ProseMirror ol > li {
9869
+ .d-rich-text-editor > .ProseMirror ol > li,
9870
+ .d-rich-text-editor > .ProseMirror ol ol ol ol > li,
9871
+ .d-rich-text-editor > .ProseMirror ol ol ol ol ol ol ol > li {
9856
9872
  list-style-type: decimal;
9857
9873
  }
9858
- .d-rich-text-editor > .ProseMirror ol ol > li {
9874
+ .d-rich-text-editor > .ProseMirror ol ol > li,
9875
+ .d-rich-text-editor > .ProseMirror ol ol ol ol ol > li,
9876
+ .d-rich-text-editor > .ProseMirror ol ol ol ol ol ol ol ol > li {
9859
9877
  list-style-type: lower-alpha;
9860
9878
  }
9861
- .d-rich-text-editor > .ProseMirror ol ol ol > li {
9879
+ .d-rich-text-editor > .ProseMirror ol ol ol > li,
9880
+ .d-rich-text-editor > .ProseMirror ol ol ol ol ol ol > li,
9881
+ .d-rich-text-editor > .ProseMirror ol ol ol ol ol ol ol ol ol > li {
9862
9882
  list-style-type: lower-roman;
9863
9883
  }
9864
- .d-rich-text-editor > .ProseMirror ol ol ol ol > li {
9865
- list-style-type: decimal;
9866
- }
9867
9884
  .d-rich-text-editor > .ProseMirror blockquote {
9868
9885
  -webkit-margin-start: 0;
9869
9886
  margin-inline-start: 0;
@@ -9871,6 +9888,7 @@
9871
9888
  padding-inline-start: var(--dt-spacing-100);
9872
9889
  -webkit-border-start: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
9873
9890
  border-inline-start: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
9891
+ color: var(--dt-color-foreground-secondary);
9874
9892
  }
9875
9893
  .d-rich-text-editor > .ProseMirror table {
9876
9894
  border-collapse: collapse;