jvetrau-ds 0.2.37 → 0.2.40

package/styles.css

@@ -1717,6 +1717,33 @@
   --course-outline-item-title-letter-spacing:
     var(--font-body-letter-spacing);
 
+  /* size */
+  --course-outline-group-gap:
+    var(--margin-item);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__side
+  .course-outline__action {
+  /* color */
+
+  /* typography */
+  font-family:
+    var(--course-outline-note-font-family);
+  font-size:
+    var(--course-outline-note-font-size);
+  font-weight:
+    var(--course-outline-note-font-weight);
+  line-height:
+    var(--course-outline-note-line-height);
+  letter-spacing:
+    var(--course-outline-note-letter-spacing);
+
   /* size */
 
   /* border */
@@ -5048,6 +5075,8 @@ h4.course-outline__group-title {
   --table-color: var(--color-text);
   --table-border-color: var(--color-line-grid);
 
+  color: var(--table-color);
+
   /* typography */
   --table-font-family: var(--font-h4-family);
   --table-font-size: var(--font-h4);
@@ -5194,9 +5223,126 @@ h4.course-outline__group-title {
   /* motion */
 }
 
+.table__cell--status {
+  /* color */
+  background-color:
+    var(--table-cell-status-color);
+
+  /* typography */
+
+  /* size */
+  padding: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--status:first-child {
+  /* color */
+  background:
+    linear-gradient(
+      to right,
+      transparent
+        var(--padding-table-horz),
+      var(--table-cell-status-color)
+        var(--padding-table-horz)
+    );
+
+  /* typography */
+
+  /* size */
+  padding-left: var(--padding-table-horz);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--status:last-child {
+  /* color */
+  background:
+    linear-gradient(
+      to left,
+      transparent
+        var(--padding-table-horz),
+      var(--table-cell-status-color)
+        var(--padding-table-horz)
+    );
+
+  /* typography */
+
+  /* size */
+  padding-right: var(--padding-table-horz);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--status:first-child:last-child {
+  /* color */
+  background:
+    linear-gradient(
+      to right,
+      transparent
+        var(--padding-table-horz),
+      var(--table-cell-status-color)
+        var(--padding-table-horz),
+      var(--table-cell-status-color)
+        calc(
+          100% -
+          var(--padding-table-horz)
+        ),
+      transparent
+        calc(
+          100% -
+          var(--padding-table-horz)
+        )
+    );
+
+  /* typography */
+
+  /* size */
+  padding-inline: var(--padding-table-horz);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell-status {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: block;
+  padding-block: var(--table-row-gap);
+  padding-inline: calc(
+    var(--table-column-gap) / 2
+  );
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .table__cell--good {
   /* color */
-  background-color: var(--color-good);
+  --table-cell-status-color:
+    var(--color-good);
+
   color: var(--color-text-primary-1);
 
   /* typography */
@@ -5212,7 +5358,9 @@ h4.course-outline__group-title {
 
 .table__cell--semi-good {
   /* color */
-  background-color: var(--color-semi-good);
+  --table-cell-status-color:
+    var(--color-semi-good);
+
   color: var(--color-text-primary-1);
 
   /* typography */
@@ -5228,7 +5376,8 @@ h4.course-outline__group-title {
 
 .table__cell--med {
   /* color */
-  background-color: var(--color-med);
+  --table-cell-status-color:
+    var(--color-med);
 
   /* typography */
 
@@ -5243,7 +5392,8 @@ h4.course-outline__group-title {
 
 .table__cell--semi-bad {
   /* color */
-  background-color: var(--color-semi-bad);
+  --table-cell-status-color:
+    var(--color-semi-bad);
 
   /* typography */
 
@@ -5258,7 +5408,8 @@ h4.course-outline__group-title {
 
 .table__cell--bad {
   /* color */
-  background-color: var(--color-bad);
+  --table-cell-status-color:
+    var(--color-bad);
 
   /* typography */
 
@@ -5717,7 +5868,6 @@ h4.course-outline__group-title {
   /* size */
   --video-width: 100%;
   --video-aspect-ratio: 16 / 9;
-  --video-padding: var(--padding-container);
   --video-controls-gap: var(--margin-icon);
   --video-volume-height: 400px;
   --video-time-digit-width: 0.6em;
@@ -5727,7 +5877,6 @@ h4.course-outline__group-title {
   position: relative;
   width: var(--video-width);
   aspect-ratio: var(--video-aspect-ratio);
-  padding: var(--video-padding);
 
   /* border */
   --video-radius: var(--radius-container);
@@ -5779,6 +5928,11 @@ h4.course-outline__group-title {
 }
 
 .video__cover {
+  /* color */
+
+  /* typography */
+
+  /* size */
   position: absolute;
   inset: 0;
   z-index: 1;
@@ -5787,6 +5941,12 @@ h4.course-outline__group-title {
   height: 100%;
   object-fit: cover;
   pointer-events: none;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .video__main-action {
@@ -5810,20 +5970,32 @@ h4.course-outline__group-title {
 
 .video__controls {
   /* color */
+  background: color-mix(
+    in srgb,
+    var(--color-bg-toolbar)
+      calc(var(--tone-value-toolbar) * 100%),
+    transparent
+  );
 
   /* typography */
 
   /* size */
   position: absolute;
-  right: var(--video-padding);
-  bottom: var(--video-padding);
-  left: var(--video-padding);
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: var(--video-controls-gap);
+  padding: var(--padding-toolbar);
 
   /* border */
+  border-radius:
+    0
+    0
+    var(--video-radius)
+    var(--video-radius);
 
   /* depth */
 
@@ -5934,9 +6106,19 @@ h4.course-outline__group-title {
 }
 
 .video__progress {
+  /* color */
+
+  /* typography */
+
   /* size */
   flex: 1;
   min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 .video__sound-control {
@@ -5976,18 +6158,38 @@ h4.course-outline__group-title {
 }
 
 .video:fullscreen {
+  /* color */
+
+  /* typography */
+
   /* size */
   width: 100vw;
   height: 100vh;
   aspect-ratio: auto;
 
   /* border */
-  border-radius: 0;
+  --video-radius: 0;
+
+  border-radius: var(--video-radius);
+
+  /* depth */
+
+  /* motion */
 }
 
 .video:fullscreen .video__media {
+  /* color */
+
+  /* typography */
+
   /* size */
   object-fit: contain;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
 }
 
 /* src/icons/icon.css */

package/themes/base/desktop.css

@@ -10,6 +10,7 @@
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
+  --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
   --padding-tag: 4px;
   --padding-tag-horz: 8px;
   --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
   --radius-base: 84px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -174,5 +176,7 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
 }

package/themes/base/desktop.md

@@ -15,6 +15,7 @@
 | `color/bg/disabled` | `color` | `#B2B2B2` |
 | `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/toolbar` | `color` | `#000000` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
 | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
 | `padding/tag` | `float` | `4` |
 | `padding/tag/horz` | `float` | `8` |
 | `padding/tag/vert` | `float` | `4` |
+| `padding/toolbar` | `float` | `20` |
 
 ## radius
 
@@ -214,4 +216,6 @@
 
 | Token | Type | Value |
 | --- | --- | --- |
-| `tone/value1` | `float` | `0` |
+| `tone/value/base` | `float` | `0.48` |
+| `tone/value/toolbar` | `float` | `0.24` |
+| `tone/value/viewer` | `float` | `0.88` |

package/themes/base/desktop.scoped.css

@@ -10,6 +10,7 @@
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
+  --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
   --padding-tag: 4px;
   --padding-tag-horz: 8px;
   --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
   --radius-base: 84px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -174,5 +176,7 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
 }

package/themes/base/diagram.css

@@ -10,6 +10,7 @@
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
+  --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
   --padding-tag: 4px;
   --padding-tag-horz: 8px;
   --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
   --radius-base: 46px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -174,5 +176,7 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
 }

package/themes/base/diagram.md

@@ -15,6 +15,7 @@
 | `color/bg/disabled` | `color` | `#B2B2B2` |
 | `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/toolbar` | `color` | `#000000` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
 | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
 | `padding/tag` | `float` | `4` |
 | `padding/tag/horz` | `float` | `8` |
 | `padding/tag/vert` | `float` | `4` |
+| `padding/toolbar` | `float` | `20` |
 
 ## radius
 
@@ -214,4 +216,6 @@
 
 | Token | Type | Value |
 | --- | --- | --- |
-| `tone/value1` | `float` | `0` |
+| `tone/value/base` | `float` | `0.48` |
+| `tone/value/toolbar` | `float` | `0.24` |
+| `tone/value/viewer` | `float` | `0.88` |

package/themes/base/diagram.scoped.css

@@ -10,6 +10,7 @@
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
+  --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
   --padding-tag: 4px;
   --padding-tag-horz: 8px;
   --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
   --radius-base: 46px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -174,5 +176,7 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
 }

package/themes/base/mobile.css

@@ -10,6 +10,7 @@
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
+  --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
   --padding-tag: 4px;
   --padding-tag-horz: 8px;
   --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
   --radius-base: 84px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -174,5 +176,7 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
 }

package/themes/base/mobile.md

@@ -15,6 +15,7 @@
 | `color/bg/disabled` | `color` | `#B2B2B2` |
 | `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/toolbar` | `color` | `#000000` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
 | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
 | `padding/tag` | `float` | `4` |
 | `padding/tag/horz` | `float` | `8` |
 | `padding/tag/vert` | `float` | `4` |
+| `padding/toolbar` | `float` | `20` |
 
 ## radius
 
@@ -214,4 +216,6 @@
 
 | Token | Type | Value |
 | --- | --- | --- |
-| `tone/value1` | `float` | `0` |
+| `tone/value/base` | `float` | `0.48` |
+| `tone/value/toolbar` | `float` | `0.24` |
+| `tone/value/viewer` | `float` | `0.88` |

package/themes/base/mobile.scoped.css

@@ -10,6 +10,7 @@
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
+  --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
   --padding-tag: 4px;
   --padding-tag-horz: 8px;
   --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
   --radius-base: 84px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -174,5 +176,7 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
 }

package/themes/brandcopilot/desktop.css

@@ -10,6 +10,7 @@
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
+  --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
   --padding-tag: 4px;
   --padding-tag-horz: 8px;
   --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
   --radius-base: 84px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -174,5 +176,7 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
 }

package/themes/brandcopilot/desktop.md

@@ -15,6 +15,7 @@
 | `color/bg/disabled` | `color` | `#B2B2B2` |
 | `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/toolbar` | `color` | `#000000` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
 | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
 | `padding/tag` | `float` | `4` |
 | `padding/tag/horz` | `float` | `8` |
 | `padding/tag/vert` | `float` | `4` |
+| `padding/toolbar` | `float` | `20` |
 
 ## radius
 
@@ -214,4 +216,6 @@
 
 | Token | Type | Value |
 | --- | --- | --- |
-| `tone/value1` | `float` | `0` |
+| `tone/value/base` | `float` | `0.48` |
+| `tone/value/toolbar` | `float` | `0.24` |
+| `tone/value/viewer` | `float` | `0.88` |

package/themes/brandcopilot/desktop.scoped.css

@@ -10,6 +10,7 @@
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
+  --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
   --padding-tag: 4px;
   --padding-tag-horz: 8px;
   --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
   --radius-base: 84px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -174,5 +176,7 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
 }

package/themes/brandcopilot/diagram.css

@@ -10,6 +10,7 @@
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
   --color-bg-placeholder: #EBEFF2;
+  --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
@@ -147,6 +148,7 @@
   --padding-tag: 4px;
   --padding-tag-horz: 8px;
   --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
   --radius-base: 46px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -174,5 +176,7 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
 }

package/themes/brandcopilot/diagram.md

@@ -15,6 +15,7 @@
 | `color/bg/disabled` | `color` | `#B2B2B2` |
 | `color/bg/media` | `color` | `#4B4C4D` |
 | `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/toolbar` | `color` | `#000000` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
 | `color/control` | `color` | `#FFFFFF` |
@@ -172,6 +173,7 @@
 | `padding/tag` | `float` | `4` |
 | `padding/tag/horz` | `float` | `8` |
 | `padding/tag/vert` | `float` | `4` |
+| `padding/toolbar` | `float` | `20` |
 
 ## radius
 
@@ -214,4 +216,6 @@
 
 | Token | Type | Value |
 | --- | --- | --- |
-| `tone/value1` | `float` | `0` |
+| `tone/value/base` | `float` | `0.48` |
+| `tone/value/toolbar` | `float` | `0.24` |
+| `tone/value/viewer` | `float` | `0.88` |