jvetrau-ds 0.2.23 → 0.2.25

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 (177) 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.cjs +6 -0
  20. package/index.d.ts +3 -0
  21. package/index.js +1 -0
  22. package/package.json +1 -1
  23. package/patterns/form-comp/form-comp.cjs +30 -0
  24. package/patterns/form-comp/form-comp.cjs.map +1 -0
  25. package/patterns/form-comp/form-comp.css +16 -0
  26. package/patterns/form-comp/form-comp.d.ts +6 -0
  27. package/patterns/form-comp/form-comp.js +28 -0
  28. package/patterns/form-comp/form-comp.js.map +1 -0
  29. package/patterns/form-comp/form-comp.meta.d.ts +2 -0
  30. package/patterns/form-comp/index.cjs +22 -0
  31. package/patterns/form-comp/index.cjs.map +1 -0
  32. package/patterns/form-comp/index.d.ts +3 -0
  33. package/patterns/form-comp/index.js +3 -0
  34. package/patterns/form-comp/index.js.map +1 -0
  35. package/patterns/index.cjs +6 -0
  36. package/patterns/index.d.ts +2 -0
  37. package/patterns/index.js +1 -0
  38. package/patterns/modal/modal.cjs +1 -0
  39. package/patterns/modal/modal.cjs.map +1 -1
  40. package/patterns/modal/modal.js +1 -0
  41. package/patterns/modal/modal.js.map +1 -1
  42. package/styles.css +147 -24
  43. package/themes/base/desktop.css +4 -0
  44. package/themes/base/desktop.md +4 -0
  45. package/themes/base/desktop.scoped.css +4 -0
  46. package/themes/base/diagram.css +4 -0
  47. package/themes/base/diagram.md +4 -0
  48. package/themes/base/diagram.scoped.css +4 -0
  49. package/themes/base/mobile.css +4 -0
  50. package/themes/base/mobile.md +4 -0
  51. package/themes/base/mobile.scoped.css +4 -0
  52. package/themes/brandcopilot/desktop.css +4 -0
  53. package/themes/brandcopilot/desktop.md +4 -0
  54. package/themes/brandcopilot/desktop.scoped.css +4 -0
  55. package/themes/brandcopilot/diagram.css +4 -0
  56. package/themes/brandcopilot/diagram.md +4 -0
  57. package/themes/brandcopilot/diagram.scoped.css +4 -0
  58. package/themes/brandcopilot/mobile.css +4 -0
  59. package/themes/brandcopilot/mobile.md +4 -0
  60. package/themes/brandcopilot/mobile.scoped.css +4 -0
  61. package/themes/dmpatterns/desktop.css +4 -0
  62. package/themes/dmpatterns/desktop.md +4 -0
  63. package/themes/dmpatterns/desktop.scoped.css +4 -0
  64. package/themes/dmpatterns/diagram.css +4 -0
  65. package/themes/dmpatterns/diagram.md +4 -0
  66. package/themes/dmpatterns/diagram.scoped.css +4 -0
  67. package/themes/dmpatterns/mobile.css +4 -0
  68. package/themes/dmpatterns/mobile.md +4 -0
  69. package/themes/dmpatterns/mobile.scoped.css +4 -0
  70. package/themes/pdigest/desktop.css +4 -0
  71. package/themes/pdigest/desktop.md +4 -0
  72. package/themes/pdigest/desktop.scoped.css +4 -0
  73. package/themes/pdigest/diagram.css +4 -0
  74. package/themes/pdigest/diagram.md +4 -0
  75. package/themes/pdigest/diagram.scoped.css +4 -0
  76. package/themes/pdigest/mobile.css +4 -0
  77. package/themes/pdigest/mobile.md +4 -0
  78. package/themes/pdigest/mobile.scoped.css +4 -0
  79. package/themes/retrack/desktop.css +4 -0
  80. package/themes/retrack/desktop.md +4 -0
  81. package/themes/retrack/desktop.scoped.css +4 -0
  82. package/themes/retrack/diagram.css +4 -0
  83. package/themes/retrack/diagram.md +4 -0
  84. package/themes/retrack/diagram.scoped.css +4 -0
  85. package/themes/retrack/mobile.css +4 -0
  86. package/themes/retrack/mobile.md +4 -0
  87. package/themes/retrack/mobile.scoped.css +4 -0
  88. package/tokens/runtime/tokens.base.desktop.runtime.cjs +4 -0
  89. package/tokens/runtime/tokens.base.desktop.runtime.cjs.map +1 -1
  90. package/tokens/runtime/tokens.base.desktop.runtime.d.ts +4 -0
  91. package/tokens/runtime/tokens.base.desktop.runtime.js +4 -0
  92. package/tokens/runtime/tokens.base.desktop.runtime.js.map +1 -1
  93. package/tokens/runtime/tokens.base.diagram.runtime.cjs +4 -0
  94. package/tokens/runtime/tokens.base.diagram.runtime.cjs.map +1 -1
  95. package/tokens/runtime/tokens.base.diagram.runtime.d.ts +4 -0
  96. package/tokens/runtime/tokens.base.diagram.runtime.js +4 -0
  97. package/tokens/runtime/tokens.base.diagram.runtime.js.map +1 -1
  98. package/tokens/runtime/tokens.base.mobile.runtime.cjs +4 -0
  99. package/tokens/runtime/tokens.base.mobile.runtime.cjs.map +1 -1
  100. package/tokens/runtime/tokens.base.mobile.runtime.d.ts +4 -0
  101. package/tokens/runtime/tokens.base.mobile.runtime.js +4 -0
  102. package/tokens/runtime/tokens.base.mobile.runtime.js.map +1 -1
  103. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs +4 -0
  104. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs.map +1 -1
  105. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.d.ts +4 -0
  106. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js +4 -0
  107. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js.map +1 -1
  108. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs +4 -0
  109. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs.map +1 -1
  110. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.d.ts +4 -0
  111. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js +4 -0
  112. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js.map +1 -1
  113. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs +4 -0
  114. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs.map +1 -1
  115. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.d.ts +4 -0
  116. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js +4 -0
  117. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js.map +1 -1
  118. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs +4 -0
  119. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs.map +1 -1
  120. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.d.ts +4 -0
  121. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js +4 -0
  122. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js.map +1 -1
  123. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs +4 -0
  124. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs.map +1 -1
  125. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.d.ts +4 -0
  126. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js +4 -0
  127. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js.map +1 -1
  128. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs +4 -0
  129. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs.map +1 -1
  130. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.d.ts +4 -0
  131. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js +4 -0
  132. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js.map +1 -1
  133. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs +4 -0
  134. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs.map +1 -1
  135. package/tokens/runtime/tokens.pdigest.desktop.runtime.d.ts +4 -0
  136. package/tokens/runtime/tokens.pdigest.desktop.runtime.js +4 -0
  137. package/tokens/runtime/tokens.pdigest.desktop.runtime.js.map +1 -1
  138. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs +4 -0
  139. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs.map +1 -1
  140. package/tokens/runtime/tokens.pdigest.diagram.runtime.d.ts +4 -0
  141. package/tokens/runtime/tokens.pdigest.diagram.runtime.js +4 -0
  142. package/tokens/runtime/tokens.pdigest.diagram.runtime.js.map +1 -1
  143. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs +4 -0
  144. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs.map +1 -1
  145. package/tokens/runtime/tokens.pdigest.mobile.runtime.d.ts +4 -0
  146. package/tokens/runtime/tokens.pdigest.mobile.runtime.js +4 -0
  147. package/tokens/runtime/tokens.pdigest.mobile.runtime.js.map +1 -1
  148. package/tokens/runtime/tokens.retrack.desktop.runtime.cjs +4 -0
  149. package/tokens/runtime/tokens.retrack.desktop.runtime.cjs.map +1 -1
  150. package/tokens/runtime/tokens.retrack.desktop.runtime.d.ts +4 -0
  151. package/tokens/runtime/tokens.retrack.desktop.runtime.js +4 -0
  152. package/tokens/runtime/tokens.retrack.desktop.runtime.js.map +1 -1
  153. package/tokens/runtime/tokens.retrack.diagram.runtime.cjs +4 -0
  154. package/tokens/runtime/tokens.retrack.diagram.runtime.cjs.map +1 -1
  155. package/tokens/runtime/tokens.retrack.diagram.runtime.d.ts +4 -0
  156. package/tokens/runtime/tokens.retrack.diagram.runtime.js +4 -0
  157. package/tokens/runtime/tokens.retrack.diagram.runtime.js.map +1 -1
  158. package/tokens/runtime/tokens.retrack.mobile.runtime.cjs +4 -0
  159. package/tokens/runtime/tokens.retrack.mobile.runtime.cjs.map +1 -1
  160. package/tokens/runtime/tokens.retrack.mobile.runtime.d.ts +4 -0
  161. package/tokens/runtime/tokens.retrack.mobile.runtime.js +4 -0
  162. package/tokens/runtime/tokens.retrack.mobile.runtime.js.map +1 -1
  163. package/tokens/themes/base/dist/desktop.json +32 -0
  164. package/tokens/themes/base/dist/diagram.json +32 -0
  165. package/tokens/themes/base/dist/mobile.json +32 -0
  166. package/tokens/themes/brandcopilot/dist/desktop.json +32 -0
  167. package/tokens/themes/brandcopilot/dist/diagram.json +32 -0
  168. package/tokens/themes/brandcopilot/dist/mobile.json +32 -0
  169. package/tokens/themes/dmpatterns/dist/desktop.json +32 -0
  170. package/tokens/themes/dmpatterns/dist/diagram.json +32 -0
  171. package/tokens/themes/dmpatterns/dist/mobile.json +32 -0
  172. package/tokens/themes/pdigest/dist/desktop.json +32 -0
  173. package/tokens/themes/pdigest/dist/diagram.json +32 -0
  174. package/tokens/themes/pdigest/dist/mobile.json +32 -0
  175. package/tokens/themes/retrack/dist/desktop.json +32 -0
  176. package/tokens/themes/retrack/dist/diagram.json +32 -0
  177. package/tokens/themes/retrack/dist/mobile.json +32 -0
@@ -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` |
@@ -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);
@@ -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);
@@ -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` |
@@ -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);
@@ -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);
@@ -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` |
@@ -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);
@@ -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);
@@ -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` |
@@ -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);
@@ -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);
@@ -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` |
@@ -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);
@@ -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);
@@ -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` |
@@ -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);
@@ -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);
@@ -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` |
@@ -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);
@@ -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);
@@ -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` |
@@ -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);
@@ -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);
@@ -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` |
@@ -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);
@@ -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);
@@ -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` |
@@ -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);
@@ -7,6 +7,8 @@ const tokens = {
7
7
  "color/contrast": "var(--color-contrast)",
8
8
  "color/bg": "var(--color-bg)",
9
9
  "color/bg/container": "var(--color-bg-container)",
10
+ "color/bg/container/secondary": "var(--color-bg-container-secondary)",
11
+ "color/bg/container/tertiary": "var(--color-bg-container-tertiary)",
10
12
  "color/bg/contrast": "var(--color-bg-contrast)",
11
13
  "color/bg/placeholder": "var(--color-bg-placeholder)",
12
14
  "color/bg/media": "var(--color-bg-media)",
@@ -15,6 +17,8 @@ const tokens = {
15
17
  "color/bg/disabled": "var(--color-bg-disabled)",
16
18
  "color/text": "var(--color-text)",
17
19
  "color/text/container": "var(--color-text-container)",
20
+ "color/text/container/secondary": "var(--color-text-container-secondary)",
21
+ "color/text/container/tertiary": "var(--color-text-container-tertiary)",
18
22
  "color/text/primary/1": "var(--color-text-primary-1)",
19
23
  "color/text/primary/2": "var(--color-text-primary-2)",
20
24
  "color/text/secondary": "var(--color-text-secondary)",