jvetrau-ds 0.2.39 → 0.2.41

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 (197) hide show
  1. package/base.css +7 -0
  2. package/components/course-outline/course-outline.css +2 -0
  3. package/components/table/table.cjs +7 -13
  4. package/components/table/table.cjs.map +1 -1
  5. package/components/table/table.css +70 -10
  6. package/components/table/table.js +7 -13
  7. package/components/table/table.js.map +1 -1
  8. package/components/video/video.css +57 -6
  9. package/icons/assets/arrow-link.cjs +4 -4
  10. package/icons/assets/arrow-link.cjs.map +1 -1
  11. package/icons/assets/arrow-link.js +4 -4
  12. package/icons/assets/arrow-link.js.map +1 -1
  13. package/icons/assets/arrow-right.cjs +4 -4
  14. package/icons/assets/arrow-right.cjs.map +1 -1
  15. package/icons/assets/arrow-right.js +4 -4
  16. package/icons/assets/arrow-right.js.map +1 -1
  17. package/icons/assets/chevron-left.cjs +4 -4
  18. package/icons/assets/chevron-left.cjs.map +1 -1
  19. package/icons/assets/chevron-left.js +4 -4
  20. package/icons/assets/chevron-left.js.map +1 -1
  21. package/icons/assets/chevron-right.cjs +4 -4
  22. package/icons/assets/chevron-right.cjs.map +1 -1
  23. package/icons/assets/chevron-right.js +4 -4
  24. package/icons/assets/chevron-right.js.map +1 -1
  25. package/icons/assets/close.cjs +4 -4
  26. package/icons/assets/close.cjs.map +1 -1
  27. package/icons/assets/close.js +4 -4
  28. package/icons/assets/close.js.map +1 -1
  29. package/icons/assets/fullscreen.cjs +4 -4
  30. package/icons/assets/fullscreen.cjs.map +1 -1
  31. package/icons/assets/fullscreen.js +4 -4
  32. package/icons/assets/fullscreen.js.map +1 -1
  33. package/icons/assets/locked.cjs.map +1 -1
  34. package/icons/assets/locked.js.map +1 -1
  35. package/icons/assets/pause.cjs +4 -4
  36. package/icons/assets/pause.cjs.map +1 -1
  37. package/icons/assets/pause.js +4 -4
  38. package/icons/assets/pause.js.map +1 -1
  39. package/icons/assets/play.cjs +4 -4
  40. package/icons/assets/play.cjs.map +1 -1
  41. package/icons/assets/play.js +4 -4
  42. package/icons/assets/play.js.map +1 -1
  43. package/icons/assets/settings.cjs +4 -4
  44. package/icons/assets/settings.cjs.map +1 -1
  45. package/icons/assets/settings.js +4 -4
  46. package/icons/assets/settings.js.map +1 -1
  47. package/icons/assets/sound-off.cjs +4 -4
  48. package/icons/assets/sound-off.cjs.map +1 -1
  49. package/icons/assets/sound-off.js +4 -4
  50. package/icons/assets/sound-off.js.map +1 -1
  51. package/icons/assets/sound.cjs +4 -4
  52. package/icons/assets/sound.cjs.map +1 -1
  53. package/icons/assets/sound.js +4 -4
  54. package/icons/assets/sound.js.map +1 -1
  55. package/icons/icon.cjs +0 -5
  56. package/icons/icon.cjs.map +1 -1
  57. package/icons/icon.css +12 -1
  58. package/icons/icon.js +0 -5
  59. package/icons/icon.js.map +1 -1
  60. package/package.json +1 -1
  61. package/styles.css +141 -17
  62. package/themes/base/desktop.css +5 -1
  63. package/themes/base/desktop.md +5 -1
  64. package/themes/base/desktop.scoped.css +5 -1
  65. package/themes/base/diagram.css +5 -1
  66. package/themes/base/diagram.md +5 -1
  67. package/themes/base/diagram.scoped.css +5 -1
  68. package/themes/base/mobile.css +5 -1
  69. package/themes/base/mobile.md +5 -1
  70. package/themes/base/mobile.scoped.css +5 -1
  71. package/themes/brandcopilot/desktop.css +5 -1
  72. package/themes/brandcopilot/desktop.md +5 -1
  73. package/themes/brandcopilot/desktop.scoped.css +5 -1
  74. package/themes/brandcopilot/diagram.css +5 -1
  75. package/themes/brandcopilot/diagram.md +5 -1
  76. package/themes/brandcopilot/diagram.scoped.css +5 -1
  77. package/themes/brandcopilot/mobile.css +5 -1
  78. package/themes/brandcopilot/mobile.md +5 -1
  79. package/themes/brandcopilot/mobile.scoped.css +5 -1
  80. package/themes/dmpatterns/desktop.css +5 -1
  81. package/themes/dmpatterns/desktop.md +5 -1
  82. package/themes/dmpatterns/desktop.scoped.css +5 -1
  83. package/themes/dmpatterns/diagram.css +5 -1
  84. package/themes/dmpatterns/diagram.md +5 -1
  85. package/themes/dmpatterns/diagram.scoped.css +5 -1
  86. package/themes/dmpatterns/mobile.css +5 -1
  87. package/themes/dmpatterns/mobile.md +5 -1
  88. package/themes/dmpatterns/mobile.scoped.css +5 -1
  89. package/themes/pdigest/desktop.css +5 -1
  90. package/themes/pdigest/desktop.md +5 -1
  91. package/themes/pdigest/desktop.scoped.css +5 -1
  92. package/themes/pdigest/diagram.css +5 -1
  93. package/themes/pdigest/diagram.md +5 -1
  94. package/themes/pdigest/diagram.scoped.css +5 -1
  95. package/themes/pdigest/mobile.css +5 -1
  96. package/themes/pdigest/mobile.md +5 -1
  97. package/themes/pdigest/mobile.scoped.css +5 -1
  98. package/themes/retrack/desktop.css +5 -1
  99. package/themes/retrack/desktop.md +5 -1
  100. package/themes/retrack/desktop.scoped.css +5 -1
  101. package/themes/retrack/diagram.css +5 -1
  102. package/themes/retrack/diagram.md +5 -1
  103. package/themes/retrack/diagram.scoped.css +5 -1
  104. package/themes/retrack/mobile.css +5 -1
  105. package/themes/retrack/mobile.md +5 -1
  106. package/themes/retrack/mobile.scoped.css +5 -1
  107. package/tokens/runtime/tokens.base.desktop.runtime.cjs +5 -1
  108. package/tokens/runtime/tokens.base.desktop.runtime.cjs.map +1 -1
  109. package/tokens/runtime/tokens.base.desktop.runtime.d.ts +5 -1
  110. package/tokens/runtime/tokens.base.desktop.runtime.js +5 -1
  111. package/tokens/runtime/tokens.base.desktop.runtime.js.map +1 -1
  112. package/tokens/runtime/tokens.base.diagram.runtime.cjs +5 -1
  113. package/tokens/runtime/tokens.base.diagram.runtime.cjs.map +1 -1
  114. package/tokens/runtime/tokens.base.diagram.runtime.d.ts +5 -1
  115. package/tokens/runtime/tokens.base.diagram.runtime.js +5 -1
  116. package/tokens/runtime/tokens.base.diagram.runtime.js.map +1 -1
  117. package/tokens/runtime/tokens.base.mobile.runtime.cjs +5 -1
  118. package/tokens/runtime/tokens.base.mobile.runtime.cjs.map +1 -1
  119. package/tokens/runtime/tokens.base.mobile.runtime.d.ts +5 -1
  120. package/tokens/runtime/tokens.base.mobile.runtime.js +5 -1
  121. package/tokens/runtime/tokens.base.mobile.runtime.js.map +1 -1
  122. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs +5 -1
  123. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs.map +1 -1
  124. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.d.ts +5 -1
  125. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js +5 -1
  126. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js.map +1 -1
  127. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs +5 -1
  128. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs.map +1 -1
  129. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.d.ts +5 -1
  130. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js +5 -1
  131. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js.map +1 -1
  132. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs +5 -1
  133. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs.map +1 -1
  134. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.d.ts +5 -1
  135. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js +5 -1
  136. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js.map +1 -1
  137. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs +5 -1
  138. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs.map +1 -1
  139. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.d.ts +5 -1
  140. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js +5 -1
  141. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js.map +1 -1
  142. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs +5 -1
  143. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs.map +1 -1
  144. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.d.ts +5 -1
  145. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js +5 -1
  146. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js.map +1 -1
  147. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs +5 -1
  148. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs.map +1 -1
  149. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.d.ts +5 -1
  150. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js +5 -1
  151. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js.map +1 -1
  152. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs +5 -1
  153. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs.map +1 -1
  154. package/tokens/runtime/tokens.pdigest.desktop.runtime.d.ts +5 -1
  155. package/tokens/runtime/tokens.pdigest.desktop.runtime.js +5 -1
  156. package/tokens/runtime/tokens.pdigest.desktop.runtime.js.map +1 -1
  157. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs +5 -1
  158. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs.map +1 -1
  159. package/tokens/runtime/tokens.pdigest.diagram.runtime.d.ts +5 -1
  160. package/tokens/runtime/tokens.pdigest.diagram.runtime.js +5 -1
  161. package/tokens/runtime/tokens.pdigest.diagram.runtime.js.map +1 -1
  162. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs +5 -1
  163. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs.map +1 -1
  164. package/tokens/runtime/tokens.pdigest.mobile.runtime.d.ts +5 -1
  165. package/tokens/runtime/tokens.pdigest.mobile.runtime.js +5 -1
  166. package/tokens/runtime/tokens.pdigest.mobile.runtime.js.map +1 -1
  167. package/tokens/runtime/tokens.retrack.desktop.runtime.cjs +5 -1
  168. package/tokens/runtime/tokens.retrack.desktop.runtime.cjs.map +1 -1
  169. package/tokens/runtime/tokens.retrack.desktop.runtime.d.ts +5 -1
  170. package/tokens/runtime/tokens.retrack.desktop.runtime.js +5 -1
  171. package/tokens/runtime/tokens.retrack.desktop.runtime.js.map +1 -1
  172. package/tokens/runtime/tokens.retrack.diagram.runtime.cjs +5 -1
  173. package/tokens/runtime/tokens.retrack.diagram.runtime.cjs.map +1 -1
  174. package/tokens/runtime/tokens.retrack.diagram.runtime.d.ts +5 -1
  175. package/tokens/runtime/tokens.retrack.diagram.runtime.js +5 -1
  176. package/tokens/runtime/tokens.retrack.diagram.runtime.js.map +1 -1
  177. package/tokens/runtime/tokens.retrack.mobile.runtime.cjs +5 -1
  178. package/tokens/runtime/tokens.retrack.mobile.runtime.cjs.map +1 -1
  179. package/tokens/runtime/tokens.retrack.mobile.runtime.d.ts +5 -1
  180. package/tokens/runtime/tokens.retrack.mobile.runtime.js +5 -1
  181. package/tokens/runtime/tokens.retrack.mobile.runtime.js.map +1 -1
  182. package/tokens/themes/base/dist/desktop.json +34 -2
  183. package/tokens/themes/base/dist/diagram.json +34 -2
  184. package/tokens/themes/base/dist/mobile.json +34 -2
  185. package/tokens/themes/brandcopilot/dist/desktop.json +34 -2
  186. package/tokens/themes/brandcopilot/dist/diagram.json +34 -2
  187. package/tokens/themes/brandcopilot/dist/mobile.json +34 -2
  188. package/tokens/themes/dmpatterns/dist/desktop.json +34 -2
  189. package/tokens/themes/dmpatterns/dist/diagram.json +34 -2
  190. package/tokens/themes/dmpatterns/dist/mobile.json +34 -2
  191. package/tokens/themes/pdigest/dist/desktop.json +34 -2
  192. package/tokens/themes/pdigest/dist/diagram.json +34 -2
  193. package/tokens/themes/pdigest/dist/mobile.json +34 -2
  194. package/tokens/themes/retrack/dist/desktop.json +34 -2
  195. package/tokens/themes/retrack/dist/diagram.json +34 -2
  196. package/tokens/themes/retrack/dist/mobile.json +34 -2
  197. package/icons/assets/sound-off.svg +0 -3
package/themes/base/desktop.scoped.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/base/diagram.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 46px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/base/diagram.md CHANGED
@@ -15,6 +15,7 @@
15
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
16
16
  | `color/bg/media` | `color` | `#4B4C4D` |
17
17
  | `color/bg/placeholder` | `color` | `#EBEFF2` |
18
+ | `color/bg/toolbar` | `color` | `#000000` |
18
19
  | `color/bg/true-black` | `color` | `#000000` |
19
20
  | `color/contrast` | `color` | `#FFFFFF` |
20
21
  | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
172
173
  | `padding/tag` | `float` | `4` |
173
174
  | `padding/tag/horz` | `float` | `8` |
174
175
  | `padding/tag/vert` | `float` | `4` |
176
+ | `padding/toolbar` | `float` | `20` |
175
177
 
176
178
  ## radius
177
179
 
@@ -214,4 +216,6 @@
214
216
 
215
217
  | Token | Type | Value |
216
218
  | --- | --- | --- |
217
- | `tone/value1` | `float` | `0` |
219
+ | `tone/value/base` | `float` | `0.48` |
220
+ | `tone/value/toolbar` | `float` | `0.24` |
221
+ | `tone/value/viewer` | `float` | `0.88` |
package/themes/base/diagram.scoped.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 46px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/base/mobile.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/base/mobile.md CHANGED
@@ -15,6 +15,7 @@
15
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
16
16
  | `color/bg/media` | `color` | `#4B4C4D` |
17
17
  | `color/bg/placeholder` | `color` | `#EBEFF2` |
18
+ | `color/bg/toolbar` | `color` | `#000000` |
18
19
  | `color/bg/true-black` | `color` | `#000000` |
19
20
  | `color/contrast` | `color` | `#FFFFFF` |
20
21
  | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
172
173
  | `padding/tag` | `float` | `4` |
173
174
  | `padding/tag/horz` | `float` | `8` |
174
175
  | `padding/tag/vert` | `float` | `4` |
176
+ | `padding/toolbar` | `float` | `20` |
175
177
 
176
178
  ## radius
177
179
 
@@ -214,4 +216,6 @@
214
216
 
215
217
  | Token | Type | Value |
216
218
  | --- | --- | --- |
217
- | `tone/value1` | `float` | `0` |
219
+ | `tone/value/base` | `float` | `0.48` |
220
+ | `tone/value/toolbar` | `float` | `0.24` |
221
+ | `tone/value/viewer` | `float` | `0.88` |
package/themes/base/mobile.scoped.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/brandcopilot/desktop.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/brandcopilot/desktop.md CHANGED
@@ -15,6 +15,7 @@
15
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
16
16
  | `color/bg/media` | `color` | `#4B4C4D` |
17
17
  | `color/bg/placeholder` | `color` | `#EBEFF2` |
18
+ | `color/bg/toolbar` | `color` | `#000000` |
18
19
  | `color/bg/true-black` | `color` | `#000000` |
19
20
  | `color/contrast` | `color` | `#FFFFFF` |
20
21
  | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
172
173
  | `padding/tag` | `float` | `4` |
173
174
  | `padding/tag/horz` | `float` | `8` |
174
175
  | `padding/tag/vert` | `float` | `4` |
176
+ | `padding/toolbar` | `float` | `20` |
175
177
 
176
178
  ## radius
177
179
 
@@ -214,4 +216,6 @@
214
216
 
215
217
  | Token | Type | Value |
216
218
  | --- | --- | --- |
217
- | `tone/value1` | `float` | `0` |
219
+ | `tone/value/base` | `float` | `0.48` |
220
+ | `tone/value/toolbar` | `float` | `0.24` |
221
+ | `tone/value/viewer` | `float` | `0.88` |
package/themes/brandcopilot/desktop.scoped.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/brandcopilot/diagram.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 46px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/brandcopilot/diagram.md CHANGED
@@ -15,6 +15,7 @@
15
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
16
16
  | `color/bg/media` | `color` | `#4B4C4D` |
17
17
  | `color/bg/placeholder` | `color` | `#EBEFF2` |
18
+ | `color/bg/toolbar` | `color` | `#000000` |
18
19
  | `color/bg/true-black` | `color` | `#000000` |
19
20
  | `color/contrast` | `color` | `#FFFFFF` |
20
21
  | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
172
173
  | `padding/tag` | `float` | `4` |
173
174
  | `padding/tag/horz` | `float` | `8` |
174
175
  | `padding/tag/vert` | `float` | `4` |
176
+ | `padding/toolbar` | `float` | `20` |
175
177
 
176
178
  ## radius
177
179
 
@@ -214,4 +216,6 @@
214
216
 
215
217
  | Token | Type | Value |
216
218
  | --- | --- | --- |
217
- | `tone/value1` | `float` | `0` |
219
+ | `tone/value/base` | `float` | `0.48` |
220
+ | `tone/value/toolbar` | `float` | `0.24` |
221
+ | `tone/value/viewer` | `float` | `0.88` |
package/themes/brandcopilot/diagram.scoped.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 46px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/brandcopilot/mobile.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/brandcopilot/mobile.md CHANGED
@@ -15,6 +15,7 @@
15
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
16
16
  | `color/bg/media` | `color` | `#4B4C4D` |
17
17
  | `color/bg/placeholder` | `color` | `#EBEFF2` |
18
+ | `color/bg/toolbar` | `color` | `#000000` |
18
19
  | `color/bg/true-black` | `color` | `#000000` |
19
20
  | `color/contrast` | `color` | `#FFFFFF` |
20
21
  | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
172
173
  | `padding/tag` | `float` | `4` |
173
174
  | `padding/tag/horz` | `float` | `8` |
174
175
  | `padding/tag/vert` | `float` | `4` |
176
+ | `padding/toolbar` | `float` | `20` |
175
177
 
176
178
  ## radius
177
179
 
@@ -214,4 +216,6 @@
214
216
 
215
217
  | Token | Type | Value |
216
218
  | --- | --- | --- |
217
- | `tone/value1` | `float` | `0` |
219
+ | `tone/value/base` | `float` | `0.48` |
220
+ | `tone/value/toolbar` | `float` | `0.24` |
221
+ | `tone/value/viewer` | `float` | `0.88` |
package/themes/brandcopilot/mobile.scoped.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/dmpatterns/desktop.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/dmpatterns/desktop.md CHANGED
@@ -15,6 +15,7 @@
15
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
16
16
  | `color/bg/media` | `color` | `#4B4C4D` |
17
17
  | `color/bg/placeholder` | `color` | `#EBEFF2` |
18
+ | `color/bg/toolbar` | `color` | `#000000` |
18
19
  | `color/bg/true-black` | `color` | `#000000` |
19
20
  | `color/contrast` | `color` | `#FFFFFF` |
20
21
  | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
172
173
  | `padding/tag` | `float` | `4` |
173
174
  | `padding/tag/horz` | `float` | `8` |
174
175
  | `padding/tag/vert` | `float` | `4` |
176
+ | `padding/toolbar` | `float` | `20` |
175
177
 
176
178
  ## radius
177
179
 
@@ -214,4 +216,6 @@
214
216
 
215
217
  | Token | Type | Value |
216
218
  | --- | --- | --- |
217
- | `tone/value1` | `float` | `0` |
219
+ | `tone/value/base` | `float` | `0.48` |
220
+ | `tone/value/toolbar` | `float` | `0.24` |
221
+ | `tone/value/viewer` | `float` | `0.88` |
package/themes/dmpatterns/desktop.scoped.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/dmpatterns/diagram.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 46px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/dmpatterns/diagram.md CHANGED
@@ -15,6 +15,7 @@
15
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
16
16
  | `color/bg/media` | `color` | `#4B4C4D` |
17
17
  | `color/bg/placeholder` | `color` | `#EBEFF2` |
18
+ | `color/bg/toolbar` | `color` | `#000000` |
18
19
  | `color/bg/true-black` | `color` | `#000000` |
19
20
  | `color/contrast` | `color` | `#FFFFFF` |
20
21
  | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
172
173
  | `padding/tag` | `float` | `4` |
173
174
  | `padding/tag/horz` | `float` | `8` |
174
175
  | `padding/tag/vert` | `float` | `4` |
176
+ | `padding/toolbar` | `float` | `20` |
175
177
 
176
178
  ## radius
177
179
 
@@ -214,4 +216,6 @@
214
216
 
215
217
  | Token | Type | Value |
216
218
  | --- | --- | --- |
217
- | `tone/value1` | `float` | `0` |
219
+ | `tone/value/base` | `float` | `0.48` |
220
+ | `tone/value/toolbar` | `float` | `0.24` |
221
+ | `tone/value/viewer` | `float` | `0.88` |
package/themes/dmpatterns/diagram.scoped.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 46px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/dmpatterns/mobile.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/dmpatterns/mobile.md CHANGED
@@ -15,6 +15,7 @@
15
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
16
16
  | `color/bg/media` | `color` | `#4B4C4D` |
17
17
  | `color/bg/placeholder` | `color` | `#EBEFF2` |
18
+ | `color/bg/toolbar` | `color` | `#000000` |
18
19
  | `color/bg/true-black` | `color` | `#000000` |
19
20
  | `color/contrast` | `color` | `#FFFFFF` |
20
21
  | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
172
173
  | `padding/tag` | `float` | `4` |
173
174
  | `padding/tag/horz` | `float` | `8` |
174
175
  | `padding/tag/vert` | `float` | `4` |
176
+ | `padding/toolbar` | `float` | `20` |
175
177
 
176
178
  ## radius
177
179
 
@@ -214,4 +216,6 @@
214
216
 
215
217
  | Token | Type | Value |
216
218
  | --- | --- | --- |
217
- | `tone/value1` | `float` | `0` |
219
+ | `tone/value/base` | `float` | `0.48` |
220
+ | `tone/value/toolbar` | `float` | `0.24` |
221
+ | `tone/value/viewer` | `float` | `0.88` |
package/themes/dmpatterns/mobile.scoped.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/pdigest/desktop.css CHANGED
@@ -10,6 +10,7 @@
10
10
  --color-bg-disabled: #B2B2B2;
11
11
  --color-bg-media: #4B4C4D;
12
12
  --color-bg-placeholder: #EBEFF2;
13
+ --color-bg-toolbar: var(--color-bg-true-black);
13
14
  --color-bg-true-black: #000000;
14
15
  --color-contrast: #FFFFFF;
15
16
  --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
147
148
  --padding-tag: 4px;
148
149
  --padding-tag-horz: 8px;
149
150
  --padding-tag-vert: 4px;
151
+ --padding-toolbar: 20px;
150
152
  --radius-base: 84px;
151
153
  --radius-circle: 300px;
152
154
  --radius-container: 30px;
@@ -174,5 +176,7 @@
174
176
  --size-icon-base: 32px;
175
177
  --size-icon-compact: 24px;
176
178
  --size-tab-height: 36px;
177
- --tone-value1: 0;
179
+ --tone-value-base: 0.48;
180
+ --tone-value-toolbar: 0.24;
181
+ --tone-value-viewer: 0.88;
178
182
  }
package/themes/pdigest/desktop.md CHANGED
@@ -15,6 +15,7 @@
15
15
  | `color/bg/disabled` | `color` | `#B2B2B2` |
16
16
  | `color/bg/media` | `color` | `#4B4C4D` |
17
17
  | `color/bg/placeholder` | `color` | `#EBEFF2` |
18
+ | `color/bg/toolbar` | `color` | `#000000` |
18
19
  | `color/bg/true-black` | `color` | `#000000` |
19
20
  | `color/contrast` | `color` | `#FFFFFF` |
20
21
  | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
172
173
  | `padding/tag` | `float` | `4` |
173
174
  | `padding/tag/horz` | `float` | `8` |
174
175
  | `padding/tag/vert` | `float` | `4` |
176
+ | `padding/toolbar` | `float` | `20` |
175
177
 
176
178
  ## radius
177
179
 
@@ -214,4 +216,6 @@
214
216
 
215
217
  | Token | Type | Value |
216
218
  | --- | --- | --- |
217
- | `tone/value1` | `float` | `0` |
219
+ | `tone/value/base` | `float` | `0.48` |
220
+ | `tone/value/toolbar` | `float` | `0.24` |
221
+ | `tone/value/viewer` | `float` | `0.88` |