jvetrau-ds 0.1.29 → 0.1.31

package/components/logo/logo.css

@@ -24,6 +24,11 @@
   gap: 0;
 }
 
+:where(a, button) .logo {
+  /* motion */
+  cursor: pointer;
+}
+
 .logo__symbol {
   /* size */
   display: block;

package/components/tag/tag.css

@@ -1,17 +1,17 @@
 .tag {
   /* color */
-  --tag-bg: var(--color-colorsemigood);
-  --tag-text: var(--color-colortextcontrol);
+  --tag-bg: var(--color-semi-good);
+  --tag-text: var(--color-text-control);
 
   background: var(--tag-bg);
   color: var(--tag-text);
 
   /* typography */
-  --tag-font-family: var(--typography-fontbodyfamily);
-  --tag-font-weight: var(--typography-fontnoteweight);
-  --tag-font-size: var(--typography-fontnote);
-  --tag-line-height: var(--typography-fontnoteline);
-  --tag-letter-spacing: var(--typography-fontnoteletterspacing);
+  --tag-font-family: var(--font-note-family);
+  --tag-font-weight: var(--font-note-weight);
+  --tag-font-size: var(--font-note-size);
+  --tag-line-height: var(--font-note-line-height);
+  --tag-letter-spacing: var(--font-note-letter-spacing);
 
   font-family: var(--tag-font-family);
   font-size: var(--tag-font-size);
@@ -22,8 +22,8 @@
   /* size */
   --tag-gap: 0;
   --tag-height: auto;
-  --tag-padding-x: var(--size-paddingtaghorz);
-  --tag-padding-y: var(--size-paddingtagvert);
+  --tag-padding-x: var(--padding-tag-horz);
+  --tag-padding-y: var(--padding-tag-vert);
 
   display: inline-flex;
   align-items: center;
@@ -33,11 +33,11 @@
 
   /* border */
   --tag-border-width: 0;
-  --tag-border-radius: var(--border-radiuscontrol);
+  --tag-border-radius: var(--radius-control);
   --tag-border-color: transparent;
 
-  border: var(--tag-border-width) solid var(--tag-border-color);
-  border-radius: var(--tag-border-radius);
+  border: none;
+  border-radius: var(--radius-control);
   outline: none;
 
   /* depth */
@@ -79,9 +79,9 @@
 }
 
 .tag--context-error {
-  --tag-bg: var(--color-colorbad);
+  --tag-bg: var(--color-bad);
 }
 
 .tag--context-warning {
-  --tag-bg: var(--color-colormed);
+  --tag-bg: var(--color-med);
 }

package/package.json

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

package/styles.css

@@ -1179,6 +1179,11 @@
   gap: 0;
 }
 
+:where(a, button) .logo {
+  /* motion */
+  cursor: pointer;
+}
+
 .logo__symbol {
   /* size */
   display: block;
@@ -2114,18 +2119,18 @@
 /* src/components/tag/tag.css */
 .tag {
   /* color */
-  --tag-bg: var(--color-colorsemigood);
-  --tag-text: var(--color-colortextcontrol);
+  --tag-bg: var(--color-semi-good);
+  --tag-text: var(--color-text-control);
 
   background: var(--tag-bg);
   color: var(--tag-text);
 
   /* typography */
-  --tag-font-family: var(--typography-fontbodyfamily);
-  --tag-font-weight: var(--typography-fontnoteweight);
-  --tag-font-size: var(--typography-fontnote);
-  --tag-line-height: var(--typography-fontnoteline);
-  --tag-letter-spacing: var(--typography-fontnoteletterspacing);
+  --tag-font-family: var(--font-note-family);
+  --tag-font-weight: var(--font-note-weight);
+  --tag-font-size: var(--font-note-size);
+  --tag-line-height: var(--font-note-line-height);
+  --tag-letter-spacing: var(--font-note-letter-spacing);
 
   font-family: var(--tag-font-family);
   font-size: var(--tag-font-size);
@@ -2136,8 +2141,8 @@
   /* size */
   --tag-gap: 0;
   --tag-height: auto;
-  --tag-padding-x: var(--size-paddingtaghorz);
-  --tag-padding-y: var(--size-paddingtagvert);
+  --tag-padding-x: var(--padding-tag-horz);
+  --tag-padding-y: var(--padding-tag-vert);
 
   display: inline-flex;
   align-items: center;
@@ -2147,11 +2152,11 @@
 
   /* border */
   --tag-border-width: 0;
-  --tag-border-radius: var(--border-radiuscontrol);
+  --tag-border-radius: var(--radius-control);
   --tag-border-color: transparent;
 
-  border: var(--tag-border-width) solid var(--tag-border-color);
-  border-radius: var(--tag-border-radius);
+  border: none;
+  border-radius: var(--radius-control);
   outline: none;
 
   /* depth */
@@ -2193,11 +2198,11 @@
 }
 
 .tag--context-error {
-  --tag-bg: var(--color-colorbad);
+  --tag-bg: var(--color-bad);
 }
 
 .tag--context-warning {
-  --tag-bg: var(--color-colormed);
+  --tag-bg: var(--color-med);
 }
 
 /* src/components/textarea/textarea.css */

package/themes/base/desktop.css

@@ -1,4 +1,6 @@
 :root {
+  --color-alt: #FFFFFF;
+  --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
   --color-bg-contrast: #FFFFFF;
@@ -8,23 +10,26 @@
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
+  --color-good: var(--color-primary-1);
   --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-med: #FF7300;
   --color-primary-1: #F9EC0E;
   --color-primary-2: #FA4691;
   --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-bad);
   --color-text-container: #000000;
   --color-text-contrast: #000000;
   --color-text-control: #000000;
+  --color-text-good: var(--color-good);
+  --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;
   --color-text-primary-2: #FFFFFF;
@@ -34,63 +39,63 @@
   --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-bigger-weight: 300;
+  --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: 12px;
-  --font-body-weight: 300px;
-  --font-body-weight-accent: 573px;
+  --font-body-weight: 300;
+  --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: 400px;
+  --font-control-weight: 400;
   --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-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: 400px;
+  --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: 400px;
+  --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: 400px;
-  --font-h3-weight-accent: 573px;
+  --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: 400px;
+  --font-h4-weight: 400;
   --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-lead-weight: 300;
+  --font-lead-weight-accent: 400;
   --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;
+  --font-note-weight: 300;
+  --font-note-weight-accent: 573;
   --margin-attribute: 0px;
   --margin-bullet: 0px;
   --margin-choice: 8px;
@@ -109,8 +114,6 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
-  --margin-tag-horz: 8px;
-  --margin-tag-vert: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;
@@ -129,6 +132,8 @@
   --padding-table-horz: 0px;
   --padding-table-vert: 0px;
   --padding-tag: 4px;
+  --padding-tag-horz: 8px;
+  --padding-tag-vert: 4px;
   --radius-base: 84px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -151,5 +156,5 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0px;
+  --tone-value1: 0;
 }

package/themes/base/desktop.md

@@ -4,6 +4,8 @@
 
 | Token | Type | Value |
 | --- | --- | --- |
+| `color/alt` | `color` | `#FFFFFF` |
+| `color/bad` | `color` | `#FA4691` |
 | `color/bg` | `color` | `#191A1A` |
 | `color/bg/container` | `color` | `#F9EC0E` |
 | `color/bg/contrast` | `color` | `#FFFFFF` |
@@ -13,23 +15,26 @@
 | `color/bg/true-black` | `color` | `#000000` |
 | `color/contrast` | `color` | `#FFFFFF` |
 | `color/control` | `color` | `#FFFFFF` |
+| `color/good` | `color` | `#F9EC0E` |
 | `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/med` | `color` | `#FF7300` |
 | `color/primary/1` | `color` | `#F9EC0E` |
 | `color/primary/2` | `color` | `#FA4691` |
 | `color/secondary` | `color` | `#FFFFFF` |
+| `color/semi-bad` | `color` | `#FF4000` |
+| `color/semi-good` | `color` | `#FFBF00` |
 | `color/text` | `color` | `#FFFFFF` |
+| `color/text/alt` | `color` | `#FFFFFF` |
+| `color/text/bad` | `color` | `#FA4691` |
 | `color/text/container` | `color` | `#000000` |
 | `color/text/contrast` | `color` | `#000000` |
 | `color/text/control` | `color` | `#000000` |
+| `color/text/good` | `color` | `#F9EC0E` |
+| `color/text/med` | `color` | `#FF7300` |
 | `color/text/note` | `color` | `#BABDBF` |
 | `color/text/primary/1` | `color` | `#000000` |
 | `color/text/primary/2` | `color` | `#FFFFFF` |
@@ -62,25 +67,25 @@
 | `font/h0/letter/spacing` | `float` | `-0.04` |
 | `font/h0/line` | `float` | `130` |
 | `font/h0/margin` | `float` | `0` |
-| `font/h0/weight` | `float` | `400` |
+| `font/h0/weight` | `float` | `573` |
 | `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/h1/weight` | `float` | `573` |
 | `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/h2/weight` | `float` | `573` |
 | `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` | `float` | `573` |
 | `font/h3/weight/accent` | `float` | `573` |
 | `font/h4` | `float` | `28` |
 | `font/h4/family` | `string` | `PP Object Sans Variable` |
@@ -124,8 +129,6 @@
 | `margin/menu` | `float` | `20` |
 | `margin/popup` | `float` | `0` |
 | `margin/tab` | `float` | `20` |
-| `margin/tag/horz` | `float` | `8` |
-| `margin/tag/vert` | `float` | `4` |
 | `margin/tooltip` | `float` | `0` |
 
 ## motion
@@ -154,6 +157,8 @@
 | `padding/table/horz` | `float` | `0` |
 | `padding/table/vert` | `float` | `0` |
 | `padding/tag` | `float` | `4` |
+| `padding/tag/horz` | `float` | `8` |
+| `padding/tag/vert` | `float` | `4` |
 
 ## radius
 

package/themes/base/desktop.scoped.css

@@ -1,4 +1,6 @@
 [data-theme="base"][data-mode="desktop"] {
+  --color-alt: #FFFFFF;
+  --color-bad: var(--color-primary-2);
   --color-bg: #191A1A;
   --color-bg-container: var(--color-primary-1);
   --color-bg-contrast: #FFFFFF;
@@ -8,23 +10,26 @@
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
+  --color-good: var(--color-primary-1);
   --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-med: #FF7300;
   --color-primary-1: #F9EC0E;
   --color-primary-2: #FA4691;
   --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-bad);
   --color-text-container: #000000;
   --color-text-contrast: #000000;
   --color-text-control: #000000;
+  --color-text-good: var(--color-good);
+  --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;
   --color-text-primary-2: #FFFFFF;
@@ -34,63 +39,63 @@
   --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-bigger-weight: 300;
+  --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: 12px;
-  --font-body-weight: 300px;
-  --font-body-weight-accent: 573px;
+  --font-body-weight: 300;
+  --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: 400px;
+  --font-control-weight: 400;
   --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-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: 400px;
+  --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: 400px;
+  --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: 400px;
-  --font-h3-weight-accent: 573px;
+  --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: 400px;
+  --font-h4-weight: 400;
   --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-lead-weight: 300;
+  --font-lead-weight-accent: 400;
   --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;
+  --font-note-weight: 300;
+  --font-note-weight-accent: 573;
   --margin-attribute: 0px;
   --margin-bullet: 0px;
   --margin-choice: 8px;
@@ -109,8 +114,6 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
-  --margin-tag-horz: 8px;
-  --margin-tag-vert: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;
@@ -129,6 +132,8 @@
   --padding-table-horz: 0px;
   --padding-table-vert: 0px;
   --padding-tag: 4px;
+  --padding-tag-horz: 8px;
+  --padding-tag-vert: 4px;
   --radius-base: 84px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -151,5 +156,5 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0px;
+  --tone-value1: 0;
 }

package/themes/base/diagram.css

@@ -1,4 +1,6 @@
 :root {
+  --color-alt: #FFFFFF;
+  --color-bad: var(--color-primary-2);
   --color-bg: #0D0D0D;
   --color-bg-container: var(--color-primary-1);
   --color-bg-contrast: #FFFFFF;
@@ -8,23 +10,26 @@
   --color-bg-true-black: #000000;
   --color-contrast: #FFFFFF;
   --color-control: #FFFFFF;
+  --color-good: var(--color-primary-1);
   --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-med: #FF7300;
   --color-primary-1: #F9EC0E;
   --color-primary-2: #FA4691;
   --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-bad);
   --color-text-container: #000000;
   --color-text-contrast: #000000;
   --color-text-control: #000000;
+  --color-text-good: var(--color-good);
+  --color-text-med: var(--color-med);
   --color-text-note: #BABDBF;
   --color-text-primary-1: #000000;
   --color-text-primary-2: #FFFFFF;
@@ -34,63 +39,63 @@
   --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-bigger-weight: 300;
+  --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: 8px;
-  --font-body-weight: 300px;
-  --font-body-weight-accent: 573px;
+  --font-body-weight: 300;
+  --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: 400px;
+  --font-control-weight: 400;
   --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-h0-weight: 573;
   --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-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: 400px;
+  --font-h2-weight: 573;
   --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-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: 400px;
+  --font-h4-weight: 400;
   --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-lead-weight: 300;
+  --font-lead-weight-accent: 400;
   --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;
+  --font-note-weight: 300;
+  --font-note-weight-accent: 573;
   --margin-attribute: 0px;
   --margin-bullet: 0px;
   --margin-choice: 8px;
@@ -109,8 +114,6 @@
   --margin-menu: 20px;
   --margin-popup: 0px;
   --margin-tab: var(--margin-menu);
-  --margin-tag-horz: 8px;
-  --margin-tag-vert: 4px;
   --margin-tooltip: 0px;
   --motion-duration1: 0px;
   --padding-arrow: 0px;
@@ -129,6 +132,8 @@
   --padding-table-horz: 0px;
   --padding-table-vert: 0px;
   --padding-tag: 4px;
+  --padding-tag-horz: 8px;
+  --padding-tag-vert: 4px;
   --radius-base: 46px;
   --radius-circle: 300px;
   --radius-container: 30px;
@@ -151,5 +156,5 @@
   --size-icon-base: 32px;
   --size-icon-compact: 24px;
   --size-tab-height: 36px;
-  --tone-value1: 0px;
+  --tone-value1: 0;
 }