jvetrau-ds 0.1.0

package/themes/base/desktop.css

@@ -0,0 +1,149 @@
+:root {
+  --color-bg: #191A1A;
+  --color-bg-container: var(--color-primary-1);
+  --color-bg-contrast: #FFFFFF;
+  --color-bg-dark: #0D0D0D;
+  --color-bg-disabled: #B2B2B2;
+  --color-bg-placeholder: #EBEFF2;
+  --color-bg-true-black: #000000;
+  --color-contrast: #FFFFFF;
+  --color-control: #FFFFFF;
+  --color-line: #FFFFFF;
+  --color-line-bad: var(--color-primary-2);
+  --color-line-contrast: #000000;
+  --color-line-good: var(--color-primary-1);
+  --color-line-grid: #3E3F40;
+  --color-line-med: #FF7300;
+  --color-line-semi-bad: #FF4000;
+  --color-line-semi-good: #FFBF00;
+  --color-link: var(--color-primary-2);
+  --color-link-visited: var(--color-primary-2);
+  --color-primary-1: #F9EC0E;
+  --color-primary-2: #FA4691;
+  --color-secondary: #FFFFFF;
+  --color-text: #FFFFFF;
+  --color-text-container: #000000;
+  --color-text-contrast: #000000;
+  --color-text-control: #000000;
+  --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: 300px;
+  --font-body-bigger-weight-accent: 573px;
+  --font-body-family: PP Object Sans Variable;
+  --font-body-letter-spacing: 0px;
+  --font-body-line: 24px;
+  --font-body-margin: 12px;
+  --font-body-weight: 300px;
+  --font-body-weight-accent: 573px;
+  --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: 400px;
+  --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: 400px;
+  --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: 400px;
+  --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: 400px;
+  --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: 400px;
+  --font-h3-weight-accent: 573px;
+  --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: 400px;
+  --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: 300px;
+  --font-lead-weight-accent: 400px;
+  --font-note: 16px;
+  --font-note-family: PP Object Sans Variable;
+  --font-note-letter-spacing: 0px;
+  --font-note-line: 20px;
+  --font-note-weight: 300px;
+  --font-note-weight-accent: 573px;
+  --margin-attribute: 0px;
+  --margin-bullet: 0px;
+  --margin-choice: 8px;
+  --margin-container: 20px;
+  --margin-container-item: 40px;
+  --margin-control: 16px;
+  --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: 0px;
+  --margin-tag-horz: 8px;
+  --margin-tag-vert: 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;
+  --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-border-width-base: 2px;
+  --size-border-width-icon: 4px;
+  --size-border-width-min: 1px;
+  --size-control-checkbox: 24px;
+  --size-control-height: 92px;
+  --size-control-textarea-height: 158px;
+  --size-grid-column-main: 40px;
+  --size-grid-margin: 20px;
+  --size-tab-height: 36px;
+  --tone-value1: 0px;
+}

package/themes/base/desktop.md

@@ -0,0 +1,188 @@
+# Design Tokens — base / desktop
+
+## color
+
+| Token | Type | Value |
+| --- | --- | --- |
+| `color/bg` | `color` | `#191A1A` |
+| `color/bg/container` | `color` | `#F9EC0E` |
+| `color/bg/contrast` | `color` | `#FFFFFF` |
+| `color/bg/dark` | `color` | `#0D0D0D` |
+| `color/bg/disabled` | `color` | `#B2B2B2` |
+| `color/bg/placeholder` | `color` | `#EBEFF2` |
+| `color/bg/true-black` | `color` | `#000000` |
+| `color/contrast` | `color` | `#FFFFFF` |
+| `color/control` | `color` | `#FFFFFF` |
+| `color/line` | `color` | `#FFFFFF` |
+| `color/line/bad` | `color` | `#FA4691` |
+| `color/line/contrast` | `color` | `#000000` |
+| `color/line/good` | `color` | `#F9EC0E` |
+| `color/line/grid` | `color` | `#3E3F40` |
+| `color/line/med` | `color` | `#FF7300` |
+| `color/line/semi-bad` | `color` | `#FF4000` |
+| `color/line/semi-good` | `color` | `#FFBF00` |
+| `color/link` | `color` | `#FA4691` |
+| `color/link/visited` | `color` | `#FA4691` |
+| `color/primary/1` | `color` | `#F9EC0E` |
+| `color/primary/2` | `color` | `#FA4691` |
+| `color/secondary` | `color` | `#FFFFFF` |
+| `color/text` | `color` | `#FFFFFF` |
+| `color/text/container` | `color` | `#000000` |
+| `color/text/contrast` | `color` | `#000000` |
+| `color/text/control` | `color` | `#000000` |
+| `color/text/note` | `color` | `#BABDBF` |
+| `color/text/primary/1` | `color` | `#000000` |
+| `color/text/primary/2` | `color` | `#FFFFFF` |
+| `color/text/secondary` | `color` | `#000000` |
+
+## font
+
+| Token | Type | Value |
+| --- | --- | --- |
+| `font/body` | `float` | `20` |
+| `font/body/bigger` | `float` | `20` |
+| `font/body/bigger/family` | `string` | `PP Object Sans Variable` |
+| `font/body/bigger/letter/spacing` | `float` | `0` |
+| `font/body/bigger/line` | `float` | `24` |
+| `font/body/bigger/weight` | `float` | `300` |
+| `font/body/bigger/weight/accent` | `float` | `573` |
+| `font/body/family` | `string` | `PP Object Sans Variable` |
+| `font/body/letter/spacing` | `float` | `0` |
+| `font/body/line` | `float` | `24` |
+| `font/body/margin` | `float` | `12` |
+| `font/body/weight` | `float` | `300` |
+| `font/body/weight/accent` | `float` | `573` |
+| `font/control` | `float` | `24` |
+| `font/control/family` | `string` | `PP Object Sans Variable` |
+| `font/control/letter/spacing` | `float` | `0` |
+| `font/control/line` | `float` | `32` |
+| `font/control/weight` | `float` | `400` |
+| `font/h0` | `float` | `150` |
+| `font/h0/family` | `string` | `PP Object Sans Variable` |
+| `font/h0/letter/spacing` | `float` | `-0.04` |
+| `font/h0/line` | `float` | `130` |
+| `font/h0/margin` | `float` | `0` |
+| `font/h0/weight` | `float` | `400` |
+| `font/h1` | `float` | `84` |
+| `font/h1/family` | `string` | `PP Object Sans Variable` |
+| `font/h1/letter/spacing` | `float` | `-0.04` |
+| `font/h1/line` | `float` | `92` |
+| `font/h1/margin` | `float` | `24` |
+| `font/h1/weight` | `float` | `400` |
+| `font/h2` | `float` | `56` |
+| `font/h2/family` | `string` | `PP Object Sans Variable` |
+| `font/h2/letter/spacing` | `float` | `-0.04` |
+| `font/h2/line` | `float` | `66` |
+| `font/h2/margin` | `float` | `20` |
+| `font/h2/weight` | `float` | `400` |
+| `font/h3` | `float` | `46` |
+| `font/h3/family` | `string` | `PP Object Sans Variable` |
+| `font/h3/letter/spacing` | `float` | `-0.04` |
+| `font/h3/line` | `float` | `48` |
+| `font/h3/margin` | `float` | `16` |
+| `font/h3/weight` | `float` | `400` |
+| `font/h3/weight/accent` | `float` | `573` |
+| `font/h4` | `float` | `28` |
+| `font/h4/family` | `string` | `PP Object Sans Variable` |
+| `font/h4/letter/spacing` | `float` | `0` |
+| `font/h4/line` | `float` | `36` |
+| `font/h4/margin` | `float` | `12` |
+| `font/h4/weight` | `float` | `400` |
+| `font/lead` | `float` | `24` |
+| `font/lead/family` | `string` | `PP Object Sans Variable` |
+| `font/lead/letter/spacing` | `float` | `0` |
+| `font/lead/line` | `float` | `32` |
+| `font/lead/margin` | `float` | `12` |
+| `font/lead/weight` | `float` | `300` |
+| `font/lead/weight/accent` | `float` | `400` |
+| `font/note` | `float` | `16` |
+| `font/note/family` | `string` | `PP Object Sans Variable` |
+| `font/note/letter/spacing` | `float` | `0` |
+| `font/note/line` | `float` | `20` |
+| `font/note/weight` | `float` | `300` |
+| `font/note/weight/accent` | `float` | `573` |
+
+## margin
+
+| Token | Type | Value |
+| --- | --- | --- |
+| `margin/attribute` | `float` | `0` |
+| `margin/bullet` | `float` | `0` |
+| `margin/choice` | `float` | `8` |
+| `margin/container` | `float` | `20` |
+| `margin/container/item` | `float` | `40` |
+| `margin/control` | `float` | `16` |
+| `margin/form/field/horz` | `float` | `0` |
+| `margin/form/field/set` | `float` | `0` |
+| `margin/form/field/vert` | `float` | `20` |
+| `margin/form/label/horz` | `float` | `0` |
+| `margin/form/label/vert` | `float` | `8` |
+| `margin/form/tip` | `float` | `0` |
+| `margin/icon` | `float` | `8` |
+| `margin/item` | `float` | `20` |
+| `margin/menu` | `float` | `20` |
+| `margin/popup` | `float` | `0` |
+| `margin/tab` | `float` | `0` |
+| `margin/tag/horz` | `float` | `8` |
+| `margin/tag/vert` | `float` | `4` |
+| `margin/tooltip` | `float` | `0` |
+
+## motion
+
+| Token | Type | Value |
+| --- | --- | --- |
+| `motion/duration1` | `float` | `0` |
+
+## padding
+
+| Token | Type | Value |
+| --- | --- | --- |
+| `padding/arrow` | `float` | `0` |
+| `padding/container` | `float` | `40` |
+| `padding/control/button/horz` | `float` | `46` |
+| `padding/control/button/icon/horz` | `float` | `29` |
+| `padding/control/div` | `float` | `0` |
+| `padding/control/horz` | `float` | `29` |
+| `padding/control/more` | `float` | `0` |
+| `padding/control/more/icon` | `float` | `0` |
+| `padding/control/vert` | `float` | `29` |
+| `padding/menu` | `float` | `0` |
+| `padding/slice/bottom` | `float` | `0` |
+| `padding/slice/top` | `float` | `0` |
+| `padding/tab` | `float` | `16` |
+| `padding/table/horz` | `float` | `0` |
+| `padding/table/vert` | `float` | `0` |
+| `padding/tag` | `float` | `4` |
+
+## radius
+
+| Token | Type | Value |
+| --- | --- | --- |
+| `radius/base` | `float` | `84` |
+| `radius/circle` | `float` | `300` |
+| `radius/container` | `float` | `30` |
+| `radius/control` | `float` | `3` |
+| `radius/control/button` | `float` | `46` |
+| `radius/control/circle` | `float` | `300` |
+| `radius/flowchart` | `float` | `30` |
+| `radius/large` | `float` | `84` |
+
+## size
+
+| Token | Type | Value |
+| --- | --- | --- |
+| `size/border/width/base` | `float` | `2` |
+| `size/border/width/icon` | `float` | `4` |
+| `size/border/width/min` | `float` | `1` |
+| `size/control/checkbox` | `float` | `24` |
+| `size/control/height` | `float` | `92` |
+| `size/control/textarea/height` | `float` | `158` |
+| `size/grid/column/main` | `float` | `40` |
+| `size/grid/margin` | `float` | `20` |
+| `size/tab/height` | `float` | `36` |
+
+## tone
+
+| Token | Type | Value |
+| --- | --- | --- |
+| `tone/value1` | `float` | `0` |

package/themes/base/desktop.scoped.css

@@ -0,0 +1,149 @@
+[data-theme="base"][data-mode="desktop"] {
+  --color-bg: #191A1A;
+  --color-bg-container: var(--color-primary-1);
+  --color-bg-contrast: #FFFFFF;
+  --color-bg-dark: #0D0D0D;
+  --color-bg-disabled: #B2B2B2;
+  --color-bg-placeholder: #EBEFF2;
+  --color-bg-true-black: #000000;
+  --color-contrast: #FFFFFF;
+  --color-control: #FFFFFF;
+  --color-line: #FFFFFF;
+  --color-line-bad: var(--color-primary-2);
+  --color-line-contrast: #000000;
+  --color-line-good: var(--color-primary-1);
+  --color-line-grid: #3E3F40;
+  --color-line-med: #FF7300;
+  --color-line-semi-bad: #FF4000;
+  --color-line-semi-good: #FFBF00;
+  --color-link: var(--color-primary-2);
+  --color-link-visited: var(--color-primary-2);
+  --color-primary-1: #F9EC0E;
+  --color-primary-2: #FA4691;
+  --color-secondary: #FFFFFF;
+  --color-text: #FFFFFF;
+  --color-text-container: #000000;
+  --color-text-contrast: #000000;
+  --color-text-control: #000000;
+  --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: 300px;
+  --font-body-bigger-weight-accent: 573px;
+  --font-body-family: PP Object Sans Variable;
+  --font-body-letter-spacing: 0px;
+  --font-body-line: 24px;
+  --font-body-margin: 12px;
+  --font-body-weight: 300px;
+  --font-body-weight-accent: 573px;
+  --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: 400px;
+  --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: 400px;
+  --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: 400px;
+  --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: 400px;
+  --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: 400px;
+  --font-h3-weight-accent: 573px;
+  --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: 400px;
+  --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: 300px;
+  --font-lead-weight-accent: 400px;
+  --font-note: 16px;
+  --font-note-family: PP Object Sans Variable;
+  --font-note-letter-spacing: 0px;
+  --font-note-line: 20px;
+  --font-note-weight: 300px;
+  --font-note-weight-accent: 573px;
+  --margin-attribute: 0px;
+  --margin-bullet: 0px;
+  --margin-choice: 8px;
+  --margin-container: 20px;
+  --margin-container-item: 40px;
+  --margin-control: 16px;
+  --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: 0px;
+  --margin-tag-horz: 8px;
+  --margin-tag-vert: 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;
+  --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-border-width-base: 2px;
+  --size-border-width-icon: 4px;
+  --size-border-width-min: 1px;
+  --size-control-checkbox: 24px;
+  --size-control-height: 92px;
+  --size-control-textarea-height: 158px;
+  --size-grid-column-main: 40px;
+  --size-grid-margin: 20px;
+  --size-tab-height: 36px;
+  --tone-value1: 0px;
+}

package/themes/base/diagram.css

@@ -0,0 +1,149 @@
+:root {
+  --color-bg: #0D0D0D;
+  --color-bg-container: var(--color-primary-1);
+  --color-bg-contrast: #FFFFFF;
+  --color-bg-dark: #0D0D0D;
+  --color-bg-disabled: #B2B2B2;
+  --color-bg-placeholder: #EBEFF2;
+  --color-bg-true-black: #000000;
+  --color-contrast: #FFFFFF;
+  --color-control: #FFFFFF;
+  --color-line: #FFFFFF;
+  --color-line-bad: var(--color-primary-2);
+  --color-line-contrast: #000000;
+  --color-line-good: var(--color-primary-1);
+  --color-line-grid: #3E3F40;
+  --color-line-med: #FF7300;
+  --color-line-semi-bad: #FF4000;
+  --color-line-semi-good: #FFBF00;
+  --color-link: var(--color-primary-2);
+  --color-link-visited: var(--color-primary-2);
+  --color-primary-1: #F9EC0E;
+  --color-primary-2: #FA4691;
+  --color-secondary: #FFFFFF;
+  --color-text: #FFFFFF;
+  --color-text-container: #000000;
+  --color-text-contrast: #000000;
+  --color-text-control: #000000;
+  --color-text-note: #BABDBF;
+  --color-text-primary-1: #000000;
+  --color-text-primary-2: #FFFFFF;
+  --color-text-secondary: #000000;
+  --font-body: 20px;
+  --font-body-bigger: 24px;
+  --font-body-bigger-family: PP Object Sans Variable;
+  --font-body-bigger-letter-spacing: 0px;
+  --font-body-bigger-line: 32px;
+  --font-body-bigger-weight: 300px;
+  --font-body-bigger-weight-accent: 573px;
+  --font-body-family: PP Object Sans Variable;
+  --font-body-letter-spacing: 0px;
+  --font-body-line: 24px;
+  --font-body-margin: 8px;
+  --font-body-weight: 300px;
+  --font-body-weight-accent: 573px;
+  --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: 400px;
+  --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: 400px;
+  --font-h1: 56px;
+  --font-h1-family: PP Object Sans Variable;
+  --font-h1-letter-spacing: -0.04px;
+  --font-h1-line: 66px;
+  --font-h1-margin: 24px;
+  --font-h1-weight: 400px;
+  --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: 400px;
+  --font-h3: 28px;
+  --font-h3-family: PP Object Sans Variable;
+  --font-h3-letter-spacing: -0.04px;
+  --font-h3-line: 36px;
+  --font-h3-margin: 16px;
+  --font-h3-weight: 400px;
+  --font-h3-weight-accent: 573px;
+  --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: 400px;
+  --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: 300px;
+  --font-lead-weight-accent: 400px;
+  --font-note: 16px;
+  --font-note-family: PP Object Sans Variable;
+  --font-note-letter-spacing: 0px;
+  --font-note-line: 20px;
+  --font-note-weight: 300px;
+  --font-note-weight-accent: 573px;
+  --margin-attribute: 0px;
+  --margin-bullet: 0px;
+  --margin-choice: 8px;
+  --margin-container: 20px;
+  --margin-container-item: 40px;
+  --margin-control: 16px;
+  --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: 0px;
+  --margin-tag-horz: 8px;
+  --margin-tag-vert: 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;
+  --radius-base: 46px;
+  --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-border-width-base: 2px;
+  --size-border-width-icon: 4px;
+  --size-border-width-min: 1px;
+  --size-control-checkbox: 24px;
+  --size-control-height: 92px;
+  --size-control-textarea-height: 158px;
+  --size-grid-column-main: 40px;
+  --size-grid-margin: 20px;
+  --size-tab-height: 36px;
+  --tone-value1: 0px;
+}