@dialpad/dialtone-css 8.81.0-next.16 → 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 (11) hide show
  1. package/lib/build/less/components/rich-text-editor.less +31 -19
  2. package/lib/dist/dialtone-default-theme.css +32 -18
  3. package/lib/dist/dialtone-default-theme.min.css +1 -1
  4. package/lib/dist/dialtone-docs.json +1 -1
  5. package/lib/dist/dialtone.css +32 -18
  6. package/lib/dist/dialtone.min.css +1 -1
  7. package/lib/dist/no-layers/dialtone-default-theme.css +32 -18
  8. package/lib/dist/no-layers/dialtone-default-theme.min.css +1 -1
  9. package/lib/dist/no-layers/dialtone.css +32 -18
  10. package/lib/dist/no-layers/dialtone.min.css +1 -1
  11. package/package.json +3 -3
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
@@ -9810,18 +9810,26 @@
9810
9810
  box-shadow: none;
9811
9811
  }
9812
9812
  @layer dialtone.components {
9813
+ .d-rich-text-editor {
9814
+ font: var(--dt-typography-body-md-compact);
9815
+ }
9813
9816
  .d-rich-text-editor__code-block {
9814
- padding: var(--dt-spacing-100);
9817
+ padding: var(--dt-spacing-100) var(--dt-spacing-150);
9818
+ color: var(--dt-color-foreground-secondary);
9815
9819
  font: var(--dt-typography-code-md);
9816
- 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);
9817
9824
  }
9818
9825
  .d-rich-text-editor code:not(.d-rich-text-editor__code-block > code) {
9819
9826
  padding: var(--dt-spacing-25);
9820
- color: var(--dt-color-foreground-warning);
9827
+ color: var(--dt-color-foreground-warning-strong);
9821
9828
  font: var(--dt-typography-code-md);
9829
+ font-size: var(--dt-font-size-125);
9822
9830
  background-color: var(--dt-color-surface-secondary-opaque);
9823
9831
  border: var(--dt-size-border-100) solid var(--dt-color-border-subtle);
9824
- border-radius: var(--dt-size-radius-200);
9832
+ border-radius: var(--dt-size-radius-300);
9825
9833
  }
9826
9834
  .d-rich-text-editor > .ProseMirror {
9827
9835
  box-shadow: none;
@@ -9839,35 +9847,40 @@
9839
9847
  content: attr(data-placeholder);
9840
9848
  pointer-events: none;
9841
9849
  }
9842
- .d-rich-text-editor > .ProseMirror ul,
9843
- .d-rich-text-editor > .ProseMirror ol {
9850
+ .d-rich-text-editor > .ProseMirror :where(ul, ol) {
9844
9851
  -webkit-padding-start: var(--dt-spacing-250);
9845
9852
  padding-inline-start: var(--dt-spacing-250);
9846
9853
  }
9847
- .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 {
9848
9857
  list-style-type: disc;
9849
9858
  }
9850
- .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 {
9851
9862
  list-style-type: circle;
9852
9863
  }
9853
- .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 {
9854
9867
  list-style-type: square;
9855
9868
  }
9856
- .d-rich-text-editor > .ProseMirror ul ul ul ul > li {
9857
- list-style-type: disc;
9858
- }
9859
- .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 {
9860
9872
  list-style-type: decimal;
9861
9873
  }
9862
- .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 {
9863
9877
  list-style-type: lower-alpha;
9864
9878
  }
9865
- .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 {
9866
9882
  list-style-type: lower-roman;
9867
9883
  }
9868
- .d-rich-text-editor > .ProseMirror ol ol ol ol > li {
9869
- list-style-type: decimal;
9870
- }
9871
9884
  .d-rich-text-editor > .ProseMirror blockquote {
9872
9885
  -webkit-margin-start: 0;
9873
9886
  margin-inline-start: 0;
@@ -9875,6 +9888,7 @@
9875
9888
  padding-inline-start: var(--dt-spacing-100);
9876
9889
  -webkit-border-start: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
9877
9890
  border-inline-start: var(--dt-size-border-300) solid var(--dt-color-border-subtle);
9891
+ color: var(--dt-color-foreground-secondary);
9878
9892
  }
9879
9893
  .d-rich-text-editor > .ProseMirror table {
9880
9894
  border-collapse: collapse;