jvetrau-ds 0.2.23 → 0.2.24

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 (160) hide show
  1. package/components/card/card.cjs +3 -1
  2. package/components/card/card.cjs.map +1 -1
  3. package/components/card/card.css +0 -10
  4. package/components/card/card.d.ts +2 -0
  5. package/components/card/card.js +3 -1
  6. package/components/card/card.js.map +1 -1
  7. package/components/panel/panel.cjs +4 -0
  8. package/components/panel/panel.cjs.map +1 -1
  9. package/components/panel/panel.css +1 -14
  10. package/components/panel/panel.d.ts +2 -0
  11. package/components/panel/panel.js +4 -0
  12. package/components/panel/panel.js.map +1 -1
  13. package/components/surface/surface-presentation.cjs +16 -0
  14. package/components/surface/surface-presentation.cjs.map +1 -0
  15. package/components/surface/surface-presentation.d.ts +3 -0
  16. package/components/surface/surface-presentation.js +14 -0
  17. package/components/surface/surface-presentation.js.map +1 -0
  18. package/components/surface/surface.css +126 -0
  19. package/index.d.ts +1 -0
  20. package/package.json +1 -1
  21. package/patterns/modal/modal.cjs +1 -0
  22. package/patterns/modal/modal.cjs.map +1 -1
  23. package/patterns/modal/modal.js +1 -0
  24. package/patterns/modal/modal.js.map +1 -1
  25. package/styles.css +129 -24
  26. package/themes/base/desktop.css +4 -0
  27. package/themes/base/desktop.md +4 -0
  28. package/themes/base/desktop.scoped.css +4 -0
  29. package/themes/base/diagram.css +4 -0
  30. package/themes/base/diagram.md +4 -0
  31. package/themes/base/diagram.scoped.css +4 -0
  32. package/themes/base/mobile.css +4 -0
  33. package/themes/base/mobile.md +4 -0
  34. package/themes/base/mobile.scoped.css +4 -0
  35. package/themes/brandcopilot/desktop.css +4 -0
  36. package/themes/brandcopilot/desktop.md +4 -0
  37. package/themes/brandcopilot/desktop.scoped.css +4 -0
  38. package/themes/brandcopilot/diagram.css +4 -0
  39. package/themes/brandcopilot/diagram.md +4 -0
  40. package/themes/brandcopilot/diagram.scoped.css +4 -0
  41. package/themes/brandcopilot/mobile.css +4 -0
  42. package/themes/brandcopilot/mobile.md +4 -0
  43. package/themes/brandcopilot/mobile.scoped.css +4 -0
  44. package/themes/dmpatterns/desktop.css +4 -0
  45. package/themes/dmpatterns/desktop.md +4 -0
  46. package/themes/dmpatterns/desktop.scoped.css +4 -0
  47. package/themes/dmpatterns/diagram.css +4 -0
  48. package/themes/dmpatterns/diagram.md +4 -0
  49. package/themes/dmpatterns/diagram.scoped.css +4 -0
  50. package/themes/dmpatterns/mobile.css +4 -0
  51. package/themes/dmpatterns/mobile.md +4 -0
  52. package/themes/dmpatterns/mobile.scoped.css +4 -0
  53. package/themes/pdigest/desktop.css +4 -0
  54. package/themes/pdigest/desktop.md +4 -0
  55. package/themes/pdigest/desktop.scoped.css +4 -0
  56. package/themes/pdigest/diagram.css +4 -0
  57. package/themes/pdigest/diagram.md +4 -0
  58. package/themes/pdigest/diagram.scoped.css +4 -0
  59. package/themes/pdigest/mobile.css +4 -0
  60. package/themes/pdigest/mobile.md +4 -0
  61. package/themes/pdigest/mobile.scoped.css +4 -0
  62. package/themes/retrack/desktop.css +4 -0
  63. package/themes/retrack/desktop.md +4 -0
  64. package/themes/retrack/desktop.scoped.css +4 -0
  65. package/themes/retrack/diagram.css +4 -0
  66. package/themes/retrack/diagram.md +4 -0
  67. package/themes/retrack/diagram.scoped.css +4 -0
  68. package/themes/retrack/mobile.css +4 -0
  69. package/themes/retrack/mobile.md +4 -0
  70. package/themes/retrack/mobile.scoped.css +4 -0
  71. package/tokens/runtime/tokens.base.desktop.runtime.cjs +4 -0
  72. package/tokens/runtime/tokens.base.desktop.runtime.cjs.map +1 -1
  73. package/tokens/runtime/tokens.base.desktop.runtime.d.ts +4 -0
  74. package/tokens/runtime/tokens.base.desktop.runtime.js +4 -0
  75. package/tokens/runtime/tokens.base.desktop.runtime.js.map +1 -1
  76. package/tokens/runtime/tokens.base.diagram.runtime.cjs +4 -0
  77. package/tokens/runtime/tokens.base.diagram.runtime.cjs.map +1 -1
  78. package/tokens/runtime/tokens.base.diagram.runtime.d.ts +4 -0
  79. package/tokens/runtime/tokens.base.diagram.runtime.js +4 -0
  80. package/tokens/runtime/tokens.base.diagram.runtime.js.map +1 -1
  81. package/tokens/runtime/tokens.base.mobile.runtime.cjs +4 -0
  82. package/tokens/runtime/tokens.base.mobile.runtime.cjs.map +1 -1
  83. package/tokens/runtime/tokens.base.mobile.runtime.d.ts +4 -0
  84. package/tokens/runtime/tokens.base.mobile.runtime.js +4 -0
  85. package/tokens/runtime/tokens.base.mobile.runtime.js.map +1 -1
  86. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs +4 -0
  87. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs.map +1 -1
  88. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.d.ts +4 -0
  89. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js +4 -0
  90. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js.map +1 -1
  91. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs +4 -0
  92. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs.map +1 -1
  93. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.d.ts +4 -0
  94. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js +4 -0
  95. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js.map +1 -1
  96. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs +4 -0
  97. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs.map +1 -1
  98. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.d.ts +4 -0
  99. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js +4 -0
  100. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js.map +1 -1
  101. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs +4 -0
  102. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs.map +1 -1
  103. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.d.ts +4 -0
  104. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js +4 -0
  105. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js.map +1 -1
  106. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs +4 -0
  107. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs.map +1 -1
  108. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.d.ts +4 -0
  109. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js +4 -0
  110. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js.map +1 -1
  111. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs +4 -0
  112. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs.map +1 -1
  113. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.d.ts +4 -0
  114. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js +4 -0
  115. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js.map +1 -1
  116. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs +4 -0
  117. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs.map +1 -1
  118. package/tokens/runtime/tokens.pdigest.desktop.runtime.d.ts +4 -0
  119. package/tokens/runtime/tokens.pdigest.desktop.runtime.js +4 -0
  120. package/tokens/runtime/tokens.pdigest.desktop.runtime.js.map +1 -1
  121. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs +4 -0
  122. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs.map +1 -1
  123. package/tokens/runtime/tokens.pdigest.diagram.runtime.d.ts +4 -0
  124. package/tokens/runtime/tokens.pdigest.diagram.runtime.js +4 -0
  125. package/tokens/runtime/tokens.pdigest.diagram.runtime.js.map +1 -1
  126. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs +4 -0
  127. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs.map +1 -1
  128. package/tokens/runtime/tokens.pdigest.mobile.runtime.d.ts +4 -0
  129. package/tokens/runtime/tokens.pdigest.mobile.runtime.js +4 -0
  130. package/tokens/runtime/tokens.pdigest.mobile.runtime.js.map +1 -1
  131. package/tokens/runtime/tokens.retrack.desktop.runtime.cjs +4 -0
  132. package/tokens/runtime/tokens.retrack.desktop.runtime.cjs.map +1 -1
  133. package/tokens/runtime/tokens.retrack.desktop.runtime.d.ts +4 -0
  134. package/tokens/runtime/tokens.retrack.desktop.runtime.js +4 -0
  135. package/tokens/runtime/tokens.retrack.desktop.runtime.js.map +1 -1
  136. package/tokens/runtime/tokens.retrack.diagram.runtime.cjs +4 -0
  137. package/tokens/runtime/tokens.retrack.diagram.runtime.cjs.map +1 -1
  138. package/tokens/runtime/tokens.retrack.diagram.runtime.d.ts +4 -0
  139. package/tokens/runtime/tokens.retrack.diagram.runtime.js +4 -0
  140. package/tokens/runtime/tokens.retrack.diagram.runtime.js.map +1 -1
  141. package/tokens/runtime/tokens.retrack.mobile.runtime.cjs +4 -0
  142. package/tokens/runtime/tokens.retrack.mobile.runtime.cjs.map +1 -1
  143. package/tokens/runtime/tokens.retrack.mobile.runtime.d.ts +4 -0
  144. package/tokens/runtime/tokens.retrack.mobile.runtime.js +4 -0
  145. package/tokens/runtime/tokens.retrack.mobile.runtime.js.map +1 -1
  146. package/tokens/themes/base/dist/desktop.json +32 -0
  147. package/tokens/themes/base/dist/diagram.json +32 -0
  148. package/tokens/themes/base/dist/mobile.json +32 -0
  149. package/tokens/themes/brandcopilot/dist/desktop.json +32 -0
  150. package/tokens/themes/brandcopilot/dist/diagram.json +32 -0
  151. package/tokens/themes/brandcopilot/dist/mobile.json +32 -0
  152. package/tokens/themes/dmpatterns/dist/desktop.json +32 -0
  153. package/tokens/themes/dmpatterns/dist/diagram.json +32 -0
  154. package/tokens/themes/dmpatterns/dist/mobile.json +32 -0
  155. package/tokens/themes/pdigest/dist/desktop.json +32 -0
  156. package/tokens/themes/pdigest/dist/diagram.json +32 -0
  157. package/tokens/themes/pdigest/dist/mobile.json +32 -0
  158. package/tokens/themes/retrack/dist/desktop.json +32 -0
  159. package/tokens/themes/retrack/dist/diagram.json +32 -0
  160. package/tokens/themes/retrack/dist/mobile.json +32 -0
package/styles.css CHANGED
@@ -1181,17 +1181,11 @@
1181
1181
  /* src/components/card/card.css */
1182
1182
  .card {
1183
1183
  /* color */
1184
- --card-bg: var(--color-bg-container);
1185
- --card-color: var(--color-text-container);
1186
-
1187
- background: var(--card-bg);
1188
- color: var(--card-color);
1189
1184
 
1190
1185
  /* typography */
1191
1186
 
1192
1187
  /* size */
1193
1188
  --card-width: 100%;
1194
- --card-padding: var(--padding-container);
1195
1189
  --card-gap: var(--margin-container-item);
1196
1190
  --card-title-gap: var(--font-h2-margin);
1197
1191
 
@@ -1201,12 +1195,8 @@
1201
1195
  justify-content: flex-start;
1202
1196
  gap: var(--card-gap);
1203
1197
  width: var(--card-width);
1204
- padding: var(--card-padding);
1205
1198
 
1206
1199
  /* border */
1207
- --card-radius: var(--radius-container);
1208
-
1209
- border-radius: var(--card-radius);
1210
1200
 
1211
1201
  /* depth */
1212
1202
 
@@ -3884,17 +3874,11 @@
3884
3874
  /* src/components/panel/panel.css */
3885
3875
  .panel {
3886
3876
  /* color */
3887
- --panel-bg: var(--color-bg-container);
3888
- --panel-color: var(--color-text-container);
3889
-
3890
- background: var(--panel-bg);
3891
- color: var(--panel-color);
3892
3877
 
3893
3878
  /* typography */
3894
3879
 
3895
3880
  /* size */
3896
3881
  --panel-width: 100%;
3897
- --panel-padding: var(--padding-container);
3898
3882
  --panel-gap: var(--margin-container-item);
3899
3883
  --panel-title-gap: var(--font-h2-margin);
3900
3884
 
@@ -3904,12 +3888,8 @@
3904
3888
  justify-content: flex-start;
3905
3889
  gap: var(--panel-gap);
3906
3890
  width: var(--panel-width);
3907
- padding: var(--panel-padding);
3908
3891
 
3909
3892
  /* border */
3910
- --panel-radius: var(--radius-container);
3911
-
3912
- border-radius: var(--panel-radius);
3913
3893
 
3914
3894
  /* depth */
3915
3895
 
@@ -3918,16 +3898,13 @@
3918
3898
 
3919
3899
  .panel--transparent {
3920
3900
  /* color */
3921
- --panel-bg: transparent;
3922
- --panel-color: var(--color-text);
3901
+ color: var(--color-text);
3923
3902
 
3924
3903
  /* typography */
3925
3904
 
3926
3905
  /* size */
3927
- padding: 0;
3928
3906
 
3929
3907
  /* border */
3930
- border-radius: 0;
3931
3908
 
3932
3909
  /* depth */
3933
3910
 
@@ -4691,6 +4668,134 @@
4691
4668
  border-color: var(--select-border-color-success);
4692
4669
  }
4693
4670
 
4671
+ /* src/components/surface/surface.css */
4672
+ .surface {
4673
+ /* color */
4674
+ --surface-bg: var(--color-bg-container);
4675
+ --surface-color: var(--color-text-container);
4676
+
4677
+ background: var(--surface-bg);
4678
+ color: var(--surface-color);
4679
+
4680
+ /* typography */
4681
+
4682
+ /* size */
4683
+ --surface-padding: var(--padding-container);
4684
+
4685
+ padding: var(--surface-padding);
4686
+
4687
+ /* border */
4688
+ --surface-radius: var(--radius-container);
4689
+
4690
+ border-radius: var(--surface-radius);
4691
+
4692
+ /* depth */
4693
+
4694
+ /* motion */
4695
+ }
4696
+
4697
+ .surface--secondary {
4698
+ /* color */
4699
+ --surface-bg: var(--color-bg-container-secondary);
4700
+ --surface-color: var(--color-text-container-secondary);
4701
+
4702
+ /* typography */
4703
+
4704
+ /* size */
4705
+
4706
+ /* border */
4707
+
4708
+ /* depth */
4709
+
4710
+ /* motion */
4711
+ }
4712
+
4713
+ .surface--secondary .button--primary {
4714
+ /* color */
4715
+ --button-bg: var(--color-primary-1);
4716
+ --button-color: var(--color-text-primary-1);
4717
+ --button-focus-color: var(--color-primary-1);
4718
+
4719
+ /* typography */
4720
+
4721
+ /* size */
4722
+
4723
+ /* border */
4724
+
4725
+ /* depth */
4726
+
4727
+ /* motion */
4728
+ }
4729
+
4730
+ .surface--secondary .button--link {
4731
+ /* color */
4732
+ --button-color: var(--color-primary-1);
4733
+ --button-focus-color: var(--color-primary-1);
4734
+
4735
+ /* typography */
4736
+
4737
+ /* size */
4738
+
4739
+ /* border */
4740
+
4741
+ /* depth */
4742
+
4743
+ /* motion */
4744
+ }
4745
+
4746
+ .surface--tertiary {
4747
+ /* color */
4748
+ --surface-bg: var(--color-bg-container-tertiary);
4749
+ --surface-color: var(--color-text-container-tertiary);
4750
+
4751
+ /* typography */
4752
+
4753
+ /* size */
4754
+
4755
+ /* border */
4756
+
4757
+ /* depth */
4758
+
4759
+ /* motion */
4760
+ }
4761
+
4762
+ .surface--tertiary
4763
+ .button:not(.button--primary):not(.button--link):not(.button--toolbar) {
4764
+ /* color */
4765
+ --button-bg: var(--color-bg);
4766
+ --button-color: var(--color-text);
4767
+ --button-focus-color: var(--color-bg);
4768
+
4769
+ /* typography */
4770
+
4771
+ /* size */
4772
+
4773
+ /* border */
4774
+
4775
+ /* depth */
4776
+
4777
+ /* motion */
4778
+ }
4779
+
4780
+ .surface--outline {
4781
+ /* color */
4782
+ background: transparent;
4783
+ color: inherit;
4784
+
4785
+ /* typography */
4786
+
4787
+ /* size */
4788
+
4789
+ /* border */
4790
+ border-color: var(--color-line);
4791
+ border-style: dashed;
4792
+ border-width: var(--size-border-width-base);
4793
+
4794
+ /* depth */
4795
+
4796
+ /* motion */
4797
+ }
4798
+
4694
4799
  /* src/components/tabs/tabs.css */
4695
4800
  .tabs {
4696
4801
  /* color */
package/themes/base/desktop.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/base/desktop.md CHANGED
@@ -8,6 +8,8 @@
8
8
  | `color/bad` | `color` | `#FA4691` |
9
9
  | `color/bg` | `color` | `#191A1A` |
10
10
  | `color/bg/container` | `color` | `#F9EC0E` |
11
+ | `color/bg/container/secondary` | `color` | `#FA4691` |
12
+ | `color/bg/container/tertiary` | `color` | `#FFFFFF` |
11
13
  | `color/bg/contrast` | `color` | `#FFFFFF` |
12
14
  | `color/bg/dark` | `color` | `#0D0D0D` |
13
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
32
34
  | `color/text/alt` | `color` | `#FFFFFF` |
33
35
  | `color/text/bad` | `color` | `#FA4691` |
34
36
  | `color/text/container` | `color` | `#000000` |
37
+ | `color/text/container/secondary` | `color` | `#FFFFFF` |
38
+ | `color/text/container/tertiary` | `color` | `#000000` |
35
39
  | `color/text/contrast` | `color` | `#000000` |
36
40
  | `color/text/control` | `color` | `#000000` |
37
41
  | `color/text/good` | `color` | `#F9EC0E` |
package/themes/base/desktop.scoped.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/base/diagram.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #0D0D0D;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/base/diagram.md CHANGED
@@ -8,6 +8,8 @@
8
8
  | `color/bad` | `color` | `#FA4691` |
9
9
  | `color/bg` | `color` | `#0D0D0D` |
10
10
  | `color/bg/container` | `color` | `#F9EC0E` |
11
+ | `color/bg/container/secondary` | `color` | `#FA4691` |
12
+ | `color/bg/container/tertiary` | `color` | `#FFFFFF` |
11
13
  | `color/bg/contrast` | `color` | `#FFFFFF` |
12
14
  | `color/bg/dark` | `color` | `#0D0D0D` |
13
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
32
34
  | `color/text/alt` | `color` | `#FFFFFF` |
33
35
  | `color/text/bad` | `color` | `#FA4691` |
34
36
  | `color/text/container` | `color` | `#000000` |
37
+ | `color/text/container/secondary` | `color` | `#FFFFFF` |
38
+ | `color/text/container/tertiary` | `color` | `#000000` |
35
39
  | `color/text/contrast` | `color` | `#000000` |
36
40
  | `color/text/control` | `color` | `#000000` |
37
41
  | `color/text/good` | `color` | `#F9EC0E` |
package/themes/base/diagram.scoped.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #0D0D0D;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/base/mobile.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/base/mobile.md CHANGED
@@ -8,6 +8,8 @@
8
8
  | `color/bad` | `color` | `#FA4691` |
9
9
  | `color/bg` | `color` | `#191A1A` |
10
10
  | `color/bg/container` | `color` | `#F9EC0E` |
11
+ | `color/bg/container/secondary` | `color` | `#FA4691` |
12
+ | `color/bg/container/tertiary` | `color` | `#FFFFFF` |
11
13
  | `color/bg/contrast` | `color` | `#FFFFFF` |
12
14
  | `color/bg/dark` | `color` | `#0D0D0D` |
13
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
32
34
  | `color/text/alt` | `color` | `#FFFFFF` |
33
35
  | `color/text/bad` | `color` | `#FA4691` |
34
36
  | `color/text/container` | `color` | `#000000` |
37
+ | `color/text/container/secondary` | `color` | `#FFFFFF` |
38
+ | `color/text/container/tertiary` | `color` | `#000000` |
35
39
  | `color/text/contrast` | `color` | `#000000` |
36
40
  | `color/text/control` | `color` | `#000000` |
37
41
  | `color/text/good` | `color` | `#F9EC0E` |
package/themes/base/mobile.scoped.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/brandcopilot/desktop.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/brandcopilot/desktop.md CHANGED
@@ -8,6 +8,8 @@
8
8
  | `color/bad` | `color` | `#FA4691` |
9
9
  | `color/bg` | `color` | `#191A1A` |
10
10
  | `color/bg/container` | `color` | `#F9EC0E` |
11
+ | `color/bg/container/secondary` | `color` | `#FA4691` |
12
+ | `color/bg/container/tertiary` | `color` | `#FFFFFF` |
11
13
  | `color/bg/contrast` | `color` | `#FFFFFF` |
12
14
  | `color/bg/dark` | `color` | `#0D0D0D` |
13
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
32
34
  | `color/text/alt` | `color` | `#FFFFFF` |
33
35
  | `color/text/bad` | `color` | `#FA4691` |
34
36
  | `color/text/container` | `color` | `#000000` |
37
+ | `color/text/container/secondary` | `color` | `#FFFFFF` |
38
+ | `color/text/container/tertiary` | `color` | `#000000` |
35
39
  | `color/text/contrast` | `color` | `#000000` |
36
40
  | `color/text/control` | `color` | `#000000` |
37
41
  | `color/text/good` | `color` | `#F9EC0E` |
package/themes/brandcopilot/desktop.scoped.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/brandcopilot/diagram.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #0D0D0D;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/brandcopilot/diagram.md CHANGED
@@ -8,6 +8,8 @@
8
8
  | `color/bad` | `color` | `#FA4691` |
9
9
  | `color/bg` | `color` | `#0D0D0D` |
10
10
  | `color/bg/container` | `color` | `#F9EC0E` |
11
+ | `color/bg/container/secondary` | `color` | `#FA4691` |
12
+ | `color/bg/container/tertiary` | `color` | `#FFFFFF` |
11
13
  | `color/bg/contrast` | `color` | `#FFFFFF` |
12
14
  | `color/bg/dark` | `color` | `#0D0D0D` |
13
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
32
34
  | `color/text/alt` | `color` | `#FFFFFF` |
33
35
  | `color/text/bad` | `color` | `#FA4691` |
34
36
  | `color/text/container` | `color` | `#000000` |
37
+ | `color/text/container/secondary` | `color` | `#FFFFFF` |
38
+ | `color/text/container/tertiary` | `color` | `#000000` |
35
39
  | `color/text/contrast` | `color` | `#000000` |
36
40
  | `color/text/control` | `color` | `#000000` |
37
41
  | `color/text/good` | `color` | `#F9EC0E` |
package/themes/brandcopilot/diagram.scoped.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #0D0D0D;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/brandcopilot/mobile.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/brandcopilot/mobile.md CHANGED
@@ -8,6 +8,8 @@
8
8
  | `color/bad` | `color` | `#FA4691` |
9
9
  | `color/bg` | `color` | `#191A1A` |
10
10
  | `color/bg/container` | `color` | `#F9EC0E` |
11
+ | `color/bg/container/secondary` | `color` | `#FA4691` |
12
+ | `color/bg/container/tertiary` | `color` | `#FFFFFF` |
11
13
  | `color/bg/contrast` | `color` | `#FFFFFF` |
12
14
  | `color/bg/dark` | `color` | `#0D0D0D` |
13
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
32
34
  | `color/text/alt` | `color` | `#FFFFFF` |
33
35
  | `color/text/bad` | `color` | `#FA4691` |
34
36
  | `color/text/container` | `color` | `#000000` |
37
+ | `color/text/container/secondary` | `color` | `#FFFFFF` |
38
+ | `color/text/container/tertiary` | `color` | `#000000` |
35
39
  | `color/text/contrast` | `color` | `#000000` |
36
40
  | `color/text/control` | `color` | `#000000` |
37
41
  | `color/text/good` | `color` | `#F9EC0E` |
package/themes/brandcopilot/mobile.scoped.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/dmpatterns/desktop.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/dmpatterns/desktop.md CHANGED
@@ -8,6 +8,8 @@
8
8
  | `color/bad` | `color` | `#FA4691` |
9
9
  | `color/bg` | `color` | `#191A1A` |
10
10
  | `color/bg/container` | `color` | `#F9EC0E` |
11
+ | `color/bg/container/secondary` | `color` | `#FA4691` |
12
+ | `color/bg/container/tertiary` | `color` | `#FFFFFF` |
11
13
  | `color/bg/contrast` | `color` | `#FFFFFF` |
12
14
  | `color/bg/dark` | `color` | `#0D0D0D` |
13
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
32
34
  | `color/text/alt` | `color` | `#FFFFFF` |
33
35
  | `color/text/bad` | `color` | `#FA4691` |
34
36
  | `color/text/container` | `color` | `#000000` |
37
+ | `color/text/container/secondary` | `color` | `#FFFFFF` |
38
+ | `color/text/container/tertiary` | `color` | `#000000` |
35
39
  | `color/text/contrast` | `color` | `#000000` |
36
40
  | `color/text/control` | `color` | `#000000` |
37
41
  | `color/text/good` | `color` | `#F9EC0E` |
package/themes/dmpatterns/desktop.scoped.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/dmpatterns/diagram.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #0D0D0D;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/dmpatterns/diagram.md CHANGED
@@ -8,6 +8,8 @@
8
8
  | `color/bad` | `color` | `#FA4691` |
9
9
  | `color/bg` | `color` | `#0D0D0D` |
10
10
  | `color/bg/container` | `color` | `#F9EC0E` |
11
+ | `color/bg/container/secondary` | `color` | `#FA4691` |
12
+ | `color/bg/container/tertiary` | `color` | `#FFFFFF` |
11
13
  | `color/bg/contrast` | `color` | `#FFFFFF` |
12
14
  | `color/bg/dark` | `color` | `#0D0D0D` |
13
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
@@ -32,6 +34,8 @@
32
34
  | `color/text/alt` | `color` | `#FFFFFF` |
33
35
  | `color/text/bad` | `color` | `#FA4691` |
34
36
  | `color/text/container` | `color` | `#000000` |
37
+ | `color/text/container/secondary` | `color` | `#FFFFFF` |
38
+ | `color/text/container/tertiary` | `color` | `#000000` |
35
39
  | `color/text/contrast` | `color` | `#000000` |
36
40
  | `color/text/control` | `color` | `#000000` |
37
41
  | `color/text/good` | `color` | `#F9EC0E` |
package/themes/dmpatterns/diagram.scoped.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #0D0D0D;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);
package/themes/dmpatterns/mobile.css CHANGED
@@ -3,6 +3,8 @@
3
3
  --color-bad: var(--color-primary-2);
4
4
  --color-bg: #191A1A;
5
5
  --color-bg-container: var(--color-primary-1);
6
+ --color-bg-container-secondary: var(--color-primary-2);
7
+ --color-bg-container-tertiary: var(--color-bg-contrast);
6
8
  --color-bg-contrast: #FFFFFF;
7
9
  --color-bg-dark: #0D0D0D;
8
10
  --color-bg-disabled: #B2B2B2;
@@ -27,6 +29,8 @@
27
29
  --color-text-alt: var(--color-alt);
28
30
  --color-text-bad: var(--color-bad);
29
31
  --color-text-container: #000000;
32
+ --color-text-container-secondary: var(--color-text-primary-2);
33
+ --color-text-container-tertiary: var(--color-text-contrast);
30
34
  --color-text-contrast: #000000;
31
35
  --color-text-control: #000000;
32
36
  --color-text-good: var(--color-good);