jvetrau-ds 0.2.46 → 0.2.48

package/layouts/base/base.css

@@ -176,7 +176,7 @@
   /* typography */
 
   /* size */
-  --layout-base-content-width: 1200px;
+  --layout-base-content-width: 1920px;
 
   /* border */
 

package/layouts/foundation/foundation.css

@@ -48,7 +48,7 @@
   /* typography */
 
   /* size */
-  --layout-foundation-width: 1200px;
+  --layout-foundation-width: 1920px;
 
   /* border */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.46",
+  "version": "0.2.48",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -1752,7 +1752,9 @@
 }
 
 .layout-sidebar__side
-  .course-outline__action {
+  .course-outline__action,
+.layout-sidebar__side 
+  .course-outline__meta {
   /* color */
 
   /* typography */
@@ -7175,7 +7177,7 @@ h4.course-outline__group-title {
   /* typography */
 
   /* size */
-  --layout-base-content-width: 1200px;
+  --layout-base-content-width: 1920px;
 
   /* border */
 
@@ -7282,7 +7284,7 @@ h4.course-outline__group-title {
   /* typography */
 
   /* size */
-  --layout-foundation-width: 1200px;
+  --layout-foundation-width: 1920px;
 
   /* border */
 

package/themes/base/desktop.css

@@ -9,7 +9,7 @@
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
-  --color-bg-placeholder: #EBEFF2;
+  --color-bg-placeholder: #BABDBF;
   --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
@@ -177,6 +177,10 @@
   --size-grid-padding-vert: 0px;
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
+  --size-screen-desktop: 1200px;
+  --size-screen-mobile: 768px;
+  --size-screen-tablet: 1024px;
+  --size-screen-wide: 1920px;
   --size-tab-height: 36px;
   --tone-value-base: 0.48;
   --tone-value-toolbar: 0.24;

package/themes/base/desktop.md

@@ -14,7 +14,7 @@
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
 | `color/bg/media` | `color` | `#4B4C4D` |
-| `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/placeholder` | `color` | `#BABDBF` |
 | `color/bg/toolbar` | `color` | `#000000` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
@@ -212,6 +212,10 @@
 | `size/grid/padding/vert` | `float` | `0` |
 | `size/icon/base` | `float` | `32` |
 | `size/icon/compact` | `float` | `24` |
+| `size/screen/desktop` | `float` | `1200` |
+| `size/screen/mobile` | `float` | `768` |
+| `size/screen/tablet` | `float` | `1024` |
+| `size/screen/wide` | `float` | `1920` |
 | `size/tab/height` | `float` | `36` |
 
 ## tone

package/themes/base/desktop.scoped.css

@@ -9,7 +9,7 @@
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
-  --color-bg-placeholder: #EBEFF2;
+  --color-bg-placeholder: #BABDBF;
   --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
@@ -177,6 +177,10 @@
   --size-grid-padding-vert: 0px;
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
+  --size-screen-desktop: 1200px;
+  --size-screen-mobile: 768px;
+  --size-screen-tablet: 1024px;
+  --size-screen-wide: 1920px;
   --size-tab-height: 36px;
   --tone-value-base: 0.48;
   --tone-value-toolbar: 0.24;

package/themes/base/diagram.css

@@ -9,7 +9,7 @@
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
-  --color-bg-placeholder: #EBEFF2;
+  --color-bg-placeholder: #BABDBF;
   --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
@@ -177,6 +177,10 @@
   --size-grid-padding-vert: 0px;
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
+  --size-screen-desktop: 1200px;
+  --size-screen-mobile: 768px;
+  --size-screen-tablet: 1024px;
+  --size-screen-wide: 1920px;
   --size-tab-height: 36px;
   --tone-value-base: 0.48;
   --tone-value-toolbar: 0.24;

package/themes/base/diagram.md

@@ -14,7 +14,7 @@
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
 | `color/bg/media` | `color` | `#4B4C4D` |
-| `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/placeholder` | `color` | `#BABDBF` |
 | `color/bg/toolbar` | `color` | `#000000` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
@@ -212,6 +212,10 @@
 | `size/grid/padding/vert` | `float` | `0` |
 | `size/icon/base` | `float` | `32` |
 | `size/icon/compact` | `float` | `24` |
+| `size/screen/desktop` | `float` | `1200` |
+| `size/screen/mobile` | `float` | `768` |
+| `size/screen/tablet` | `float` | `1024` |
+| `size/screen/wide` | `float` | `1920` |
 | `size/tab/height` | `float` | `36` |
 
 ## tone

package/themes/base/diagram.scoped.css

@@ -9,7 +9,7 @@
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
-  --color-bg-placeholder: #EBEFF2;
+  --color-bg-placeholder: #BABDBF;
   --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
@@ -177,6 +177,10 @@
   --size-grid-padding-vert: 0px;
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
+  --size-screen-desktop: 1200px;
+  --size-screen-mobile: 768px;
+  --size-screen-tablet: 1024px;
+  --size-screen-wide: 1920px;
   --size-tab-height: 36px;
   --tone-value-base: 0.48;
   --tone-value-toolbar: 0.24;

package/themes/base/mobile.css

@@ -9,7 +9,7 @@
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
-  --color-bg-placeholder: #EBEFF2;
+  --color-bg-placeholder: #BABDBF;
   --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
@@ -177,6 +177,10 @@
   --size-grid-padding-vert: 0px;
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
+  --size-screen-desktop: 1200px;
+  --size-screen-mobile: 768px;
+  --size-screen-tablet: 1024px;
+  --size-screen-wide: 1920px;
   --size-tab-height: 36px;
   --tone-value-base: 0.48;
   --tone-value-toolbar: 0.24;

package/themes/base/mobile.md

@@ -14,7 +14,7 @@
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
 | `color/bg/media` | `color` | `#4B4C4D` |
-| `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/placeholder` | `color` | `#BABDBF` |
 | `color/bg/toolbar` | `color` | `#000000` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
@@ -212,6 +212,10 @@
 | `size/grid/padding/vert` | `float` | `0` |
 | `size/icon/base` | `float` | `32` |
 | `size/icon/compact` | `float` | `24` |
+| `size/screen/desktop` | `float` | `1200` |
+| `size/screen/mobile` | `float` | `768` |
+| `size/screen/tablet` | `float` | `1024` |
+| `size/screen/wide` | `float` | `1920` |
 | `size/tab/height` | `float` | `36` |
 
 ## tone

package/themes/base/mobile.scoped.css

@@ -9,7 +9,7 @@
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
-  --color-bg-placeholder: #EBEFF2;
+  --color-bg-placeholder: #BABDBF;
   --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
@@ -177,6 +177,10 @@
   --size-grid-padding-vert: 0px;
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
+  --size-screen-desktop: 1200px;
+  --size-screen-mobile: 768px;
+  --size-screen-tablet: 1024px;
+  --size-screen-wide: 1920px;
   --size-tab-height: 36px;
   --tone-value-base: 0.48;
   --tone-value-toolbar: 0.24;

package/themes/base/responsive.css

@@ -0,0 +1,379 @@
+:root {
+  --color-alt: #FFFFFF;
+  --color-bad: var(--color-primary-2);
+  --color-bg: #191A1A;
+  --color-bg-container: var(--color-primary-1);
+  --color-bg-container-secondary: var(--color-primary-2);
+  --color-bg-container-tertiary: var(--color-bg-contrast);
+  --color-bg-contrast: #FFFFFF;
+  --color-bg-dark: #0D0D0D;
+  --color-bg-disabled: #B2B2B2;
+  --color-bg-media: #4B4C4D;
+  --color-bg-placeholder: #BABDBF;
+  --color-bg-toolbar: var(--color-bg-true-black);
+  --color-bg-true-black: #000000;
+  --color-contrast: #FFFFFF;
+  --color-control: #FFFFFF;
+  --color-good: var(--color-primary-1);
+  --color-line: #FFFFFF;
+  --color-line-contrast: #000000;
+  --color-line-grid: #3E3F40;
+  --color-link: var(--color-primary-2);
+  --color-link-visited: var(--color-primary-2);
+  --color-med: #FF7300;
+  --color-primary-1: #F9EC0E;
+  --color-primary-1-hover: #FFFAA4;
+  --color-primary-2: #FA4691;
+  --color-primary-2-hover: #FFEBF3;
+  --color-secondary: #FFFFFF;
+  --color-semi-bad: #FF4000;
+  --color-semi-good: #FFBF00;
+  --color-text: #FFFFFF;
+  --color-text-alt: var(--color-alt);
+  --color-text-bad: var(--color-semi-bad);
+  --color-text-container: #000000;
+  --color-text-container-secondary: var(--color-text-primary-2);
+  --color-text-container-tertiary: var(--color-text-contrast);
+  --color-text-contrast: #000000;
+  --color-text-control: #000000;
+  --color-text-good: #0CFF6D;
+  --color-text-med: var(--color-med);
+  --color-text-note: #BABDBF;
+  --color-text-primary-1: #000000;
+  --color-text-primary-2: #FFFFFF;
+  --color-text-secondary: #000000;
+  --font-body: 20px;
+  --font-body-bigger: 20px;
+  --font-body-bigger-family: PP Object Sans Variable;
+  --font-body-bigger-letter-spacing: 0px;
+  --font-body-bigger-line: 24px;
+  --font-body-bigger-weight: 312;
+  --font-body-bigger-weight-accent: 573;
+  --font-body-family: PP Object Sans Variable;
+  --font-body-letter-spacing: 0px;
+  --font-body-line: 24px;
+  --font-body-margin: 20px;
+  --font-body-weight: 312;
+  --font-body-weight-accent: 573;
+  --font-control: var(--font-lead);
+  --font-control-family: PP Object Sans Variable;
+  --font-control-letter-spacing: 0px;
+  --font-control-line: var(--font-lead-line);
+  --font-control-weight: 433;
+  --font-h0: 150px;
+  --font-h0-family: PP Object Sans Variable;
+  --font-h0-letter-spacing: -0.04px;
+  --font-h0-line: 130px;
+  --font-h0-margin: 0px;
+  --font-h0-weight: 573;
+  --font-h1: 84px;
+  --font-h1-family: PP Object Sans Variable;
+  --font-h1-letter-spacing: -0.04px;
+  --font-h1-line: 92px;
+  --font-h1-margin: 24px;
+  --font-h1-weight: 573;
+  --font-h2: 56px;
+  --font-h2-family: PP Object Sans Variable;
+  --font-h2-letter-spacing: -0.04px;
+  --font-h2-line: 66px;
+  --font-h2-margin: 20px;
+  --font-h2-weight: 573;
+  --font-h3: 46px;
+  --font-h3-family: PP Object Sans Variable;
+  --font-h3-letter-spacing: -0.04px;
+  --font-h3-line: 48px;
+  --font-h3-margin: 16px;
+  --font-h3-weight: 573;
+  --font-h3-weight-accent: 573;
+  --font-h4: 28px;
+  --font-h4-family: PP Object Sans Variable;
+  --font-h4-letter-spacing: 0px;
+  --font-h4-line: 36px;
+  --font-h4-margin: 12px;
+  --font-h4-weight: 433;
+  --font-lead: 24px;
+  --font-lead-family: PP Object Sans Variable;
+  --font-lead-letter-spacing: 0px;
+  --font-lead-line: 32px;
+  --font-lead-margin: 12px;
+  --font-lead-weight: 433;
+  --font-lead-weight-accent: 573;
+  --font-list: var(--font-body);
+  --font-list-family: var(--font-body-family);
+  --font-list-item-margin: 8px;
+  --font-list-line: var(--font-body-line);
+  --font-list-line-letter-spacing: var(--font-body-letter-spacing);
+  --font-list-margin: var(--font-body-margin);
+  --font-list-weight: var(--font-body-weight);
+  --font-note: 16px;
+  --font-note-family: PP Object Sans Variable;
+  --font-note-letter-spacing: 0px;
+  --font-note-line: 20px;
+  --font-note-weight: 312;
+  --font-note-weight-accent: 573;
+  --margin-attribute: 4px;
+  --margin-bullet: 0px;
+  --margin-choice: 8px;
+  --margin-container: 20px;
+  --margin-container-item: 40px;
+  --margin-control: 16px;
+  --margin-descriptor: 8px;
+  --margin-form-field-horz: 0px;
+  --margin-form-field-set: 0px;
+  --margin-form-field-vert: 20px;
+  --margin-form-label-horz: 0px;
+  --margin-form-label-vert: 8px;
+  --margin-form-tip: 0px;
+  --margin-icon: 8px;
+  --margin-item: 20px;
+  --margin-menu: 20px;
+  --margin-popup: 0px;
+  --margin-tab: var(--margin-menu);
+  --margin-tag: 4px;
+  --margin-tooltip: 0px;
+  --motion-duration1: 0px;
+  --padding-arrow: 0px;
+  --padding-container: 40px;
+  --padding-control-button-horz: 46px;
+  --padding-control-button-icon-horz: var(--padding-control-horz);
+  --padding-control-div: 0px;
+  --padding-control-horz: 29px;
+  --padding-control-more: 0px;
+  --padding-control-more-icon: 0px;
+  --padding-control-vert: var(--padding-control-horz);
+  --padding-menu: 0px;
+  --padding-slice-bottom: 0px;
+  --padding-slice-top: 0px;
+  --padding-tab: 16px;
+  --padding-table-horz: 0px;
+  --padding-table-vert: 0px;
+  --padding-tag: 4px;
+  --padding-tag-horz: 8px;
+  --padding-tag-vert: 4px;
+  --padding-toolbar: 20px;
+  --radius-base: 84px;
+  --radius-circle: 300px;
+  --radius-container: 30px;
+  --radius-control: 3px;
+  --radius-control-button: 46px;
+  --radius-control-circle: var(--radius-circle);
+  --radius-flowchart: 30px;
+  --radius-large: 84px;
+  --size-avatar-base: 45px;
+  --size-avatar-full: 512px;
+  --size-avatar-preview: 256px;
+  --size-border-style-base: 0px;
+  --size-border-style-dash: 16px;
+  --size-border-width-base: 2px;
+  --size-border-width-icon: 4px;
+  --size-border-width-min: 1px;
+  --size-container-width-min: 240px;
+  --size-control-checkbox: 24px;
+  --size-control-height: 92px;
+  --size-control-textarea-height: 158px;
+  --size-grid-column-main: 40px;
+  --size-grid-margin: 20px;
+  --size-grid-padding-horz: 40px;
+  --size-grid-padding-vert: 0px;
+  --size-icon-base: 32px;
+  --size-icon-compact: 24px;
+  --size-screen-desktop: 1200px;
+  --size-screen-mobile: 768px;
+  --size-screen-tablet: 1024px;
+  --size-screen-wide: 1920px;
+  --size-tab-height: 36px;
+  --tone-value-base: 0.48;
+  --tone-value-toolbar: 0.24;
+  --tone-value-viewer: 0.88;
+}
+
+@media (max-width: 1024px) {
+  :root {
+    --color-alt: #FFFFFF;
+    --color-bad: var(--color-primary-2);
+    --color-bg: #191A1A;
+    --color-bg-container: var(--color-primary-1);
+    --color-bg-container-secondary: var(--color-primary-2);
+    --color-bg-container-tertiary: var(--color-bg-contrast);
+    --color-bg-contrast: #FFFFFF;
+    --color-bg-dark: #0D0D0D;
+    --color-bg-disabled: #B2B2B2;
+    --color-bg-media: #4B4C4D;
+    --color-bg-placeholder: #BABDBF;
+    --color-bg-toolbar: var(--color-bg-true-black);
+    --color-bg-true-black: #000000;
+    --color-contrast: #FFFFFF;
+    --color-control: #FFFFFF;
+    --color-good: var(--color-primary-1);
+    --color-line: #FFFFFF;
+    --color-line-contrast: #000000;
+    --color-line-grid: #3E3F40;
+    --color-link: var(--color-primary-2);
+    --color-link-visited: var(--color-primary-2);
+    --color-med: #FF7300;
+    --color-primary-1: #F9EC0E;
+    --color-primary-1-hover: #FFFAA4;
+    --color-primary-2: #FA4691;
+    --color-primary-2-hover: #FFEBF3;
+    --color-secondary: #FFFFFF;
+    --color-semi-bad: #FF4000;
+    --color-semi-good: #FFBF00;
+    --color-text: #FFFFFF;
+    --color-text-alt: var(--color-alt);
+    --color-text-bad: var(--color-semi-bad);
+    --color-text-container: #000000;
+    --color-text-container-secondary: var(--color-text-primary-2);
+    --color-text-container-tertiary: var(--color-text-contrast);
+    --color-text-contrast: #000000;
+    --color-text-control: #000000;
+    --color-text-good: #0CFF6D;
+    --color-text-med: var(--color-med);
+    --color-text-note: #BABDBF;
+    --color-text-primary-1: #000000;
+    --color-text-primary-2: #FFFFFF;
+    --color-text-secondary: #000000;
+    --font-body: 16px;
+    --font-body-bigger: 16px;
+    --font-body-bigger-family: PP Object Sans Variable;
+    --font-body-bigger-letter-spacing: 0px;
+    --font-body-bigger-line: 20px;
+    --font-body-bigger-weight: 312;
+    --font-body-bigger-weight-accent: 573;
+    --font-body-family: PP Object Sans Variable;
+    --font-body-letter-spacing: 0px;
+    --font-body-line: 20px;
+    --font-body-margin: 12px;
+    --font-body-weight: 312;
+    --font-body-weight-accent: 573;
+    --font-control: var(--font-lead);
+    --font-control-family: PP Object Sans Variable;
+    --font-control-letter-spacing: 0px;
+    --font-control-line: var(--font-lead-line);
+    --font-control-weight: 433;
+    --font-h0: 46px;
+    --font-h0-family: PP Object Sans Variable;
+    --font-h0-letter-spacing: -0.04px;
+    --font-h0-line: 48px;
+    --font-h0-margin: 0px;
+    --font-h0-weight: 573;
+    --font-h1: 28px;
+    --font-h1-family: PP Object Sans Variable;
+    --font-h1-letter-spacing: -0.04px;
+    --font-h1-line: 36px;
+    --font-h1-margin: 24px;
+    --font-h1-weight: 573;
+    --font-h2: 24px;
+    --font-h2-family: PP Object Sans Variable;
+    --font-h2-letter-spacing: -0.04px;
+    --font-h2-line: 32px;
+    --font-h2-margin: 20px;
+    --font-h2-weight: 573;
+    --font-h3: 24px;
+    --font-h3-family: PP Object Sans Variable;
+    --font-h3-letter-spacing: -0.04px;
+    --font-h3-line: 32px;
+    --font-h3-margin: 16px;
+    --font-h3-weight: 573;
+    --font-h3-weight-accent: 573;
+    --font-h4: 20px;
+    --font-h4-family: PP Object Sans Variable;
+    --font-h4-letter-spacing: 0px;
+    --font-h4-line: 24px;
+    --font-h4-margin: 12px;
+    --font-h4-weight: 433;
+    --font-lead: 20px;
+    --font-lead-family: PP Object Sans Variable;
+    --font-lead-letter-spacing: 0px;
+    --font-lead-line: 24px;
+    --font-lead-margin: 12px;
+    --font-lead-weight: 433;
+    --font-lead-weight-accent: 573;
+    --font-list: var(--font-body);
+    --font-list-family: var(--font-body-family);
+    --font-list-item-margin: 4px;
+    --font-list-line: var(--font-body-line);
+    --font-list-line-letter-spacing: var(--font-body-letter-spacing);
+    --font-list-margin: var(--font-body-margin);
+    --font-list-weight: var(--font-body-weight);
+    --font-note: 16px;
+    --font-note-family: PP Object Sans Variable;
+    --font-note-letter-spacing: 0px;
+    --font-note-line: 0px;
+    --font-note-weight: 312;
+    --font-note-weight-accent: 573;
+    --margin-attribute: 4px;
+    --margin-bullet: 0px;
+    --margin-choice: 8px;
+    --margin-container: 20px;
+    --margin-container-item: 40px;
+    --margin-control: 16px;
+    --margin-descriptor: 8px;
+    --margin-form-field-horz: 0px;
+    --margin-form-field-set: 0px;
+    --margin-form-field-vert: 20px;
+    --margin-form-label-horz: 0px;
+    --margin-form-label-vert: 8px;
+    --margin-form-tip: 0px;
+    --margin-icon: 8px;
+    --margin-item: 20px;
+    --margin-menu: 20px;
+    --margin-popup: 0px;
+    --margin-tab: var(--margin-menu);
+    --margin-tag: 4px;
+    --margin-tooltip: 0px;
+    --motion-duration1: 0px;
+    --padding-arrow: 0px;
+    --padding-container: 40px;
+    --padding-control-button-horz: 46px;
+    --padding-control-button-icon-horz: var(--padding-control-horz);
+    --padding-control-div: 0px;
+    --padding-control-horz: 29px;
+    --padding-control-more: 0px;
+    --padding-control-more-icon: 0px;
+    --padding-control-vert: var(--padding-control-horz);
+    --padding-menu: 0px;
+    --padding-slice-bottom: 0px;
+    --padding-slice-top: 0px;
+    --padding-tab: 16px;
+    --padding-table-horz: 0px;
+    --padding-table-vert: 0px;
+    --padding-tag: 4px;
+    --padding-tag-horz: 8px;
+    --padding-tag-vert: 4px;
+    --padding-toolbar: 20px;
+    --radius-base: 84px;
+    --radius-circle: 300px;
+    --radius-container: 30px;
+    --radius-control: 3px;
+    --radius-control-button: 46px;
+    --radius-control-circle: var(--radius-circle);
+    --radius-flowchart: 30px;
+    --radius-large: 84px;
+    --size-avatar-base: 45px;
+    --size-avatar-full: 512px;
+    --size-avatar-preview: 256px;
+    --size-border-style-base: 0px;
+    --size-border-style-dash: 16px;
+    --size-border-width-base: 2px;
+    --size-border-width-icon: 4px;
+    --size-border-width-min: 1px;
+    --size-container-width-min: 240px;
+    --size-control-checkbox: 24px;
+    --size-control-height: 92px;
+    --size-control-textarea-height: 158px;
+    --size-grid-column-main: 40px;
+    --size-grid-margin: 20px;
+    --size-grid-padding-horz: 20px;
+    --size-grid-padding-vert: 0px;
+    --size-icon-base: 32px;
+    --size-icon-compact: 24px;
+    --size-screen-desktop: 1200px;
+    --size-screen-mobile: 768px;
+    --size-screen-tablet: 1024px;
+    --size-screen-wide: 1920px;
+    --size-tab-height: 36px;
+    --tone-value-base: 0.48;
+    --tone-value-toolbar: 0.24;
+    --tone-value-viewer: 0.88;
+  }
+}

package/themes/brandcopilot/desktop.css

@@ -9,7 +9,7 @@
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
-  --color-bg-placeholder: #EBEFF2;
+  --color-bg-placeholder: #BABDBF;
   --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
@@ -177,6 +177,10 @@
   --size-grid-padding-vert: 0px;
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
+  --size-screen-desktop: 1200px;
+  --size-screen-mobile: 768px;
+  --size-screen-tablet: 1024px;
+  --size-screen-wide: 1920px;
   --size-tab-height: 36px;
   --tone-value-base: 0.48;
   --tone-value-toolbar: 0.24;

package/themes/brandcopilot/desktop.md

@@ -14,7 +14,7 @@
 | `color/bg/dark` | `color` | `#0D0D0D` |
 | `color/bg/disabled` | `color` | `#B2B2B2` |
 | `color/bg/media` | `color` | `#4B4C4D` |
-| `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/placeholder` | `color` | `#BABDBF` |
 | `color/bg/toolbar` | `color` | `#000000` |
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
@@ -212,6 +212,10 @@
 | `size/grid/padding/vert` | `float` | `0` |
 | `size/icon/base` | `float` | `32` |
 | `size/icon/compact` | `float` | `24` |
+| `size/screen/desktop` | `float` | `1200` |
+| `size/screen/mobile` | `float` | `768` |
+| `size/screen/tablet` | `float` | `1024` |
+| `size/screen/wide` | `float` | `1920` |
 | `size/tab/height` | `float` | `36` |
 
 ## tone

package/themes/brandcopilot/desktop.scoped.css

@@ -9,7 +9,7 @@
   --color-bg-dark: #0D0D0D;
   --color-bg-disabled: #B2B2B2;
   --color-bg-media: #4B4C4D;
-  --color-bg-placeholder: #EBEFF2;
+  --color-bg-placeholder: #BABDBF;
   --color-bg-toolbar: var(--color-bg-true-black);
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
@@ -177,6 +177,10 @@
   --size-grid-padding-vert: 0px;
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
+  --size-screen-desktop: 1200px;
+  --size-screen-mobile: 768px;
+  --size-screen-tablet: 1024px;
+  --size-screen-wide: 1920px;
   --size-tab-height: 36px;
   --tone-value-base: 0.48;
   --tone-value-toolbar: 0.24;