jvetrau-ds 0.2.39 → 0.2.40

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 (144) hide show
  1. package/components/course-outline/course-outline.css +2 -0
  2. package/components/table/table.cjs +7 -13
  3. package/components/table/table.cjs.map +1 -1
  4. package/components/table/table.css +70 -10
  5. package/components/table/table.js +7 -13
  6. package/components/table/table.js.map +1 -1
  7. package/components/video/video.css +57 -6
  8. package/package.json +1 -1
  9. package/styles.css +129 -16
  10. package/themes/base/desktop.css +5 -1
  11. package/themes/base/desktop.md +5 -1
  12. package/themes/base/desktop.scoped.css +5 -1
  13. package/themes/base/diagram.css +5 -1
  14. package/themes/base/diagram.md +5 -1
  15. package/themes/base/diagram.scoped.css +5 -1
  16. package/themes/base/mobile.css +5 -1
  17. package/themes/base/mobile.md +5 -1
  18. package/themes/base/mobile.scoped.css +5 -1
  19. package/themes/brandcopilot/desktop.css +5 -1
  20. package/themes/brandcopilot/desktop.md +5 -1
  21. package/themes/brandcopilot/desktop.scoped.css +5 -1
  22. package/themes/brandcopilot/diagram.css +5 -1
  23. package/themes/brandcopilot/diagram.md +5 -1
  24. package/themes/brandcopilot/diagram.scoped.css +5 -1
  25. package/themes/brandcopilot/mobile.css +5 -1
  26. package/themes/brandcopilot/mobile.md +5 -1
  27. package/themes/brandcopilot/mobile.scoped.css +5 -1
  28. package/themes/dmpatterns/desktop.css +5 -1
  29. package/themes/dmpatterns/desktop.md +5 -1
  30. package/themes/dmpatterns/desktop.scoped.css +5 -1
  31. package/themes/dmpatterns/diagram.css +5 -1
  32. package/themes/dmpatterns/diagram.md +5 -1
  33. package/themes/dmpatterns/diagram.scoped.css +5 -1
  34. package/themes/dmpatterns/mobile.css +5 -1
  35. package/themes/dmpatterns/mobile.md +5 -1
  36. package/themes/dmpatterns/mobile.scoped.css +5 -1
  37. package/themes/pdigest/desktop.css +5 -1
  38. package/themes/pdigest/desktop.md +5 -1
  39. package/themes/pdigest/desktop.scoped.css +5 -1
  40. package/themes/pdigest/diagram.css +5 -1
  41. package/themes/pdigest/diagram.md +5 -1
  42. package/themes/pdigest/diagram.scoped.css +5 -1
  43. package/themes/pdigest/mobile.css +5 -1
  44. package/themes/pdigest/mobile.md +5 -1
  45. package/themes/pdigest/mobile.scoped.css +5 -1
  46. package/themes/retrack/desktop.css +5 -1
  47. package/themes/retrack/desktop.md +5 -1
  48. package/themes/retrack/desktop.scoped.css +5 -1
  49. package/themes/retrack/diagram.css +5 -1
  50. package/themes/retrack/diagram.md +5 -1
  51. package/themes/retrack/diagram.scoped.css +5 -1
  52. package/themes/retrack/mobile.css +5 -1
  53. package/themes/retrack/mobile.md +5 -1
  54. package/themes/retrack/mobile.scoped.css +5 -1
  55. package/tokens/runtime/tokens.base.desktop.runtime.cjs +5 -1
  56. package/tokens/runtime/tokens.base.desktop.runtime.cjs.map +1 -1
  57. package/tokens/runtime/tokens.base.desktop.runtime.d.ts +5 -1
  58. package/tokens/runtime/tokens.base.desktop.runtime.js +5 -1
  59. package/tokens/runtime/tokens.base.desktop.runtime.js.map +1 -1
  60. package/tokens/runtime/tokens.base.diagram.runtime.cjs +5 -1
  61. package/tokens/runtime/tokens.base.diagram.runtime.cjs.map +1 -1
  62. package/tokens/runtime/tokens.base.diagram.runtime.d.ts +5 -1
  63. package/tokens/runtime/tokens.base.diagram.runtime.js +5 -1
  64. package/tokens/runtime/tokens.base.diagram.runtime.js.map +1 -1
  65. package/tokens/runtime/tokens.base.mobile.runtime.cjs +5 -1
  66. package/tokens/runtime/tokens.base.mobile.runtime.cjs.map +1 -1
  67. package/tokens/runtime/tokens.base.mobile.runtime.d.ts +5 -1
  68. package/tokens/runtime/tokens.base.mobile.runtime.js +5 -1
  69. package/tokens/runtime/tokens.base.mobile.runtime.js.map +1 -1
  70. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs +5 -1
  71. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.cjs.map +1 -1
  72. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.d.ts +5 -1
  73. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js +5 -1
  74. package/tokens/runtime/tokens.brandcopilot.desktop.runtime.js.map +1 -1
  75. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs +5 -1
  76. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.cjs.map +1 -1
  77. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.d.ts +5 -1
  78. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js +5 -1
  79. package/tokens/runtime/tokens.brandcopilot.diagram.runtime.js.map +1 -1
  80. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs +5 -1
  81. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.cjs.map +1 -1
  82. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.d.ts +5 -1
  83. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js +5 -1
  84. package/tokens/runtime/tokens.brandcopilot.mobile.runtime.js.map +1 -1
  85. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs +5 -1
  86. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.cjs.map +1 -1
  87. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.d.ts +5 -1
  88. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js +5 -1
  89. package/tokens/runtime/tokens.dmpatterns.desktop.runtime.js.map +1 -1
  90. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs +5 -1
  91. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.cjs.map +1 -1
  92. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.d.ts +5 -1
  93. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js +5 -1
  94. package/tokens/runtime/tokens.dmpatterns.diagram.runtime.js.map +1 -1
  95. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs +5 -1
  96. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.cjs.map +1 -1
  97. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.d.ts +5 -1
  98. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js +5 -1
  99. package/tokens/runtime/tokens.dmpatterns.mobile.runtime.js.map +1 -1
  100. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs +5 -1
  101. package/tokens/runtime/tokens.pdigest.desktop.runtime.cjs.map +1 -1
  102. package/tokens/runtime/tokens.pdigest.desktop.runtime.d.ts +5 -1
  103. package/tokens/runtime/tokens.pdigest.desktop.runtime.js +5 -1
  104. package/tokens/runtime/tokens.pdigest.desktop.runtime.js.map +1 -1
  105. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs +5 -1
  106. package/tokens/runtime/tokens.pdigest.diagram.runtime.cjs.map +1 -1
  107. package/tokens/runtime/tokens.pdigest.diagram.runtime.d.ts +5 -1
  108. package/tokens/runtime/tokens.pdigest.diagram.runtime.js +5 -1
  109. package/tokens/runtime/tokens.pdigest.diagram.runtime.js.map +1 -1
  110. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs +5 -1
  111. package/tokens/runtime/tokens.pdigest.mobile.runtime.cjs.map +1 -1
  112. package/tokens/runtime/tokens.pdigest.mobile.runtime.d.ts +5 -1
  113. package/tokens/runtime/tokens.pdigest.mobile.runtime.js +5 -1
  114. package/tokens/runtime/tokens.pdigest.mobile.runtime.js.map +1 -1
  115. package/tokens/runtime/tokens.retrack.desktop.runtime.cjs +5 -1
  116. package/tokens/runtime/tokens.retrack.desktop.runtime.cjs.map +1 -1
  117. package/tokens/runtime/tokens.retrack.desktop.runtime.d.ts +5 -1
  118. package/tokens/runtime/tokens.retrack.desktop.runtime.js +5 -1
  119. package/tokens/runtime/tokens.retrack.desktop.runtime.js.map +1 -1
  120. package/tokens/runtime/tokens.retrack.diagram.runtime.cjs +5 -1
  121. package/tokens/runtime/tokens.retrack.diagram.runtime.cjs.map +1 -1
  122. package/tokens/runtime/tokens.retrack.diagram.runtime.d.ts +5 -1
  123. package/tokens/runtime/tokens.retrack.diagram.runtime.js +5 -1
  124. package/tokens/runtime/tokens.retrack.diagram.runtime.js.map +1 -1
  125. package/tokens/runtime/tokens.retrack.mobile.runtime.cjs +5 -1
  126. package/tokens/runtime/tokens.retrack.mobile.runtime.cjs.map +1 -1
  127. package/tokens/runtime/tokens.retrack.mobile.runtime.d.ts +5 -1
  128. package/tokens/runtime/tokens.retrack.mobile.runtime.js +5 -1
  129. package/tokens/runtime/tokens.retrack.mobile.runtime.js.map +1 -1
  130. package/tokens/themes/base/dist/desktop.json +34 -2
  131. package/tokens/themes/base/dist/diagram.json +34 -2
  132. package/tokens/themes/base/dist/mobile.json +34 -2
  133. package/tokens/themes/brandcopilot/dist/desktop.json +34 -2
  134. package/tokens/themes/brandcopilot/dist/diagram.json +34 -2
  135. package/tokens/themes/brandcopilot/dist/mobile.json +34 -2
  136. package/tokens/themes/dmpatterns/dist/desktop.json +34 -2
  137. package/tokens/themes/dmpatterns/dist/diagram.json +34 -2
  138. package/tokens/themes/dmpatterns/dist/mobile.json +34 -2
  139. package/tokens/themes/pdigest/dist/desktop.json +34 -2
  140. package/tokens/themes/pdigest/dist/diagram.json +34 -2
  141. package/tokens/themes/pdigest/dist/mobile.json +34 -2
  142. package/tokens/themes/retrack/dist/desktop.json +34 -2
  143. package/tokens/themes/retrack/dist/diagram.json +34 -2
  144. package/tokens/themes/retrack/dist/mobile.json +34 -2
@@ -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` |
@@ -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
  }
@@ -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
  }
@@ -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` |
@@ -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
  }
@@ -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
  }
@@ -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` |
@@ -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
  }
@@ -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
  }
@@ -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` |
@@ -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
  }
@@ -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
  }
@@ -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` |
@@ -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
  }
@@ -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
  }
@@ -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` |
@@ -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
  }
@@ -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
  }
@@ -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` |
@@ -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
  }
@@ -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
  }
@@ -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` |
@@ -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
  }
@@ -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
  }
@@ -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` |
@@ -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
  }
@@ -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
  }