sit-onyx 1.0.0-beta.98 → 1.0.0-dev-20250912111044

package/src/styles/mixins/input.scss

@@ -34,7 +34,7 @@
     border-radius: var(--onyx-radius-sm);
     border: var(--onyx-1px-in-rem) solid var(--border-color);
     background-color: var(--background-color);
-    color: var(--onyx-color-text-icons-neutral-intense);
+    color: var(--onyx-color-text-icons-neutral-medium);
 
     outline: var(--onyx-outline-width) var(--outline-style) var(--outline-color);
 
@@ -42,11 +42,15 @@
     align-items: center;
     gap: var(--onyx-density-xs);
 
-    font-size: 1rem;
-    line-height: 1.5rem;
+    font-size: var(--onyx-font-size-md);
+    line-height: var(--onyx-font-line-height-md);
     padding: $vertical-padding var(--onyx-density-sm);
     height: calc(1lh + 2 * #{$vertical-padding});
 
+    #{$base-selector}__native {
+      color: var(--onyx-color-text-icons-neutral-intense);
+    }
+
     &:has(#{$base-selector}__native:read-write):hover {
       --border-color: var(--hover-border-color, var(--onyx-color-component-border-primary-hover));
       --button-color: var(--button-hover-color, var(--onyx-color-text-icons-primary-medium));
@@ -94,6 +98,21 @@
     }
   }
 
+  &__separator {
+    // should have full height, but not overlap actual border
+    --onyx-separator-min-size: calc(
+      1lh + 2 * var(--onyx-input-padding-vertical) - 2 * var(--onyx-1px-in-rem)
+    );
+    $margin: calc(var(--onyx-density-sm) - var(--onyx-density-xs));
+
+    &--leading {
+      margin-left: $margin;
+    }
+    &--trailing {
+      margin-right: $margin;
+    }
+  }
+
   &__loading {
     color: var(--onyx-color-text-icons-primary-intense);
   }
@@ -154,7 +173,7 @@
 
     &::placeholder {
       color: var(--onyx-color-text-icons-neutral-soft);
-      font-weight: 400;
+      font-weight: var(--onyx-font-weight-regular);
       opacity: 1;
     }
 
@@ -191,7 +210,7 @@
   display: flex;
   flex-direction: column;
   gap: calc(var(--onyx-density-3xs) + $adjustment);
-  line-height: 1.5rem;
+  line-height: var(--onyx-font-line-height-md);
 
   &__label {
     width: var(--onyx-density-3xl);

package/src/styles/mixins/layers.scss

@@ -3,3 +3,9 @@
     @content;
   }
 }
+
+@mixin override() {
+  @layer onyx.override {
+    @content;
+  }
+}

package/src/styles/mixins/list.scss

@@ -34,7 +34,7 @@
     display: block;
     padding: 0 var(--onyx-density-sm);
     color: var(--onyx-color-text-icons-neutral-medium);
-    font-weight: 600;
+    font-weight: var(--onyx-font-weight-semibold);
   }
 
   &:has(&__wrapper:focus-visible) {

package/src/styles/mixins/sizes.scss

@@ -21,24 +21,28 @@
 */
 @mixin define-headline-sizes() {
   &--h1 {
-    font-size: 1.75rem;
-    line-height: 2.5rem;
+    font-size: var(--onyx-font-size-xl);
+    line-height: var(--onyx-font-line-height-xl);
+    font-family: var(--onyx-font-family-h1);
   }
 
   &--h2 {
-    font-size: 1.25rem;
-    line-height: 1.75rem;
+    font-size: var(--onyx-font-size-lg);
+    line-height: var(--onyx-font-line-height-lg);
+    font-family: var(--onyx-font-family-h2);
   }
 
   &--h3 {
-    font-size: 1rem;
-    line-height: 1.5rem;
+    font-size: var(--onyx-font-size-md);
+    line-height: var(--onyx-font-line-height-md);
+    font-family: var(--onyx-font-family-h3);
   }
 
   &--h4,
   &--h5,
   &--h6 {
-    font-size: 0.8125rem;
-    line-height: 1.25rem;
+    font-size: var(--onyx-font-size-sm);
+    line-height: var(--onyx-font-line-height-sm);
+    font-family: var(--onyx-font-family-h4);
   }
 }

package/src/styles/mixins/visibility.scss

@@ -0,0 +1,11 @@
+@mixin visually-hidden {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  white-space: nowrap;
+}

package/src/styles/root.scss

@@ -2,8 +2,7 @@
 
 @layer onyx.utility {
   :root {
-    --onyx-font-family: "Source Sans 3 Variable", sans-serif;
-    --onyx-font-family-mono: "Source Code Pro Variable", monospace;
+    --onyx-font-family: var(--onyx-font-family-paragraph), sans-serif;
     --onyx-1px-in-rem: 0.0625rem;
 
     // animation/transition durations
@@ -12,14 +11,18 @@
     --onyx-duration-lg: 1s;
 
     // shadows (x, y, blur, spread, color)
+    --onyx-shadow-medium-top: 0 -0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);
     --onyx-shadow-medium-bottom: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);
     --onyx-shadow-medium-left: -0.125rem 0 0.5rem 0 rgba(0, 0, 0, 0.1);
     --onyx-shadow-medium-right: 0.125rem 0 0.5rem 0 rgba(0, 0, 0, 0.1);
+    --onyx-shadow-soft-top: 0 -0.5rem 1.5rem 0 rgba(0, 0, 0, 0.1);
     --onyx-shadow-soft-bottom: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.1);
     --onyx-shadow-soft-left: -0.5rem 0 1.5rem 0 rgba(0, 0, 0, 0.1);
     --onyx-shadow-soft-right: 0.5rem 0 1.5rem 0 rgba(0, 0, 0, 0.1);
 
     --onyx-outline-width: 0.25rem;
+
+    --onyx-nav-bar-height: 3.5rem;
   }
 
   :root {
@@ -30,9 +33,11 @@
   }
 
   .dark {
+    --onyx-shadow-medium-top: none;
     --onyx-shadow-medium-bottom: none;
     --onyx-shadow-medium-left: none;
     --onyx-shadow-medium-right: none;
+    --onyx-shadow-soft-top: none;
     --onyx-shadow-soft-bottom: none;
     --onyx-shadow-soft-left: none;
     --onyx-shadow-soft-right: none;

package/src/styles/variables/density-compact.css

@@ -1,9 +1,9 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "compact" theme.
- * Imported from Figma API on Mon, 16 Dec 2024 14:51:50 GMT
+ * Imported from Figma API on Thu, 11 Sep 2025 09:28:55 GMT
  */
-:where(.onyx-density-compact) {
+.onyx-density-compact {
   --onyx-density-2xl: var(--onyx-number-spacing-600);
   --onyx-density-2xs: var(--onyx-number-spacing-100);
   --onyx-density-3xl: var(--onyx-number-spacing-700);

package/src/styles/variables/density-cozy.css

@@ -1,9 +1,9 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "cozy" theme.
- * Imported from Figma API on Mon, 16 Dec 2024 14:51:50 GMT
+ * Imported from Figma API on Thu, 11 Sep 2025 09:28:55 GMT
  */
-:where(.onyx-density-cozy) {
+.onyx-density-cozy {
   --onyx-density-2xl: var(--onyx-number-spacing-800);
   --onyx-density-2xs: var(--onyx-number-spacing-300);
   --onyx-density-3xl: var(--onyx-number-spacing-900);

package/src/styles/variables/density-default.css

@@ -1,10 +1,10 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "default" theme.
- * Imported from Figma API on Mon, 16 Dec 2024 14:51:43 GMT
+ * Imported from Figma API on Thu, 11 Sep 2025 09:28:31 GMT
  */
 :where(:root),
-:where(.onyx-density-default) {
+.onyx-density-default {
   --onyx-density-2xl: var(--onyx-number-spacing-700);
   --onyx-density-2xs: var(--onyx-number-spacing-200);
   --onyx-density-3xl: var(--onyx-number-spacing-800);

package/src/styles/variables/spacing.css

@@ -1,7 +1,7 @@
 /**
  * Do not edit directly.
  * This file contains the specific variables for the "spacing" theme.
- * Imported from Figma API on Mon, 16 Dec 2024 14:51:35 GMT
+ * Imported from Figma API on Thu, 11 Sep 2025 09:28:05 GMT
  */
 :where(:root) {
   --onyx-spacing-2xl: var(--onyx-number-spacing-700);

package/src/styles/variables/themes/onyx.css

@@ -0,0 +1,387 @@
+/**
+ * Do not edit directly.
+ * This file contains the specific variables for the "onyx" theme.
+ * Imported from Figma API on Thu, 11 Sep 2025 09:27:42 GMT
+ */
+:where(:root),
+.onyx-theme-default {
+  --onyx-color-base-background-blank: light-dark(
+    var(--onyx-color-neutral-grayscale-white),
+    var(--onyx-color-neutral-steel-1100)
+  );
+  --onyx-color-base-background-tinted: light-dark(
+    var(--onyx-color-neutral-steel-100),
+    var(--onyx-color-neutral-steel-1200)
+  );
+  --onyx-color-base-danger-100: light-dark(
+    var(--onyx-color-system-red-100),
+    var(--onyx-color-system-red-1100)
+  );
+  --onyx-color-base-danger-200: light-dark(
+    var(--onyx-color-system-red-200),
+    var(--onyx-color-system-red-1000)
+  );
+  --onyx-color-base-danger-300: light-dark(
+    var(--onyx-color-system-red-300),
+    var(--onyx-color-system-red-900)
+  );
+  --onyx-color-base-danger-400: light-dark(
+    var(--onyx-color-system-red-400),
+    var(--onyx-color-system-red-800)
+  );
+  --onyx-color-base-danger-500: light-dark(
+    var(--onyx-color-system-red-500),
+    var(--onyx-color-system-red-700)
+  );
+  --onyx-color-base-danger-600: var(--onyx-color-system-red-600);
+  --onyx-color-base-danger-700: light-dark(
+    var(--onyx-color-system-red-700),
+    var(--onyx-color-system-red-500)
+  );
+  --onyx-color-base-danger-800: light-dark(
+    var(--onyx-color-system-red-800),
+    var(--onyx-color-system-red-400)
+  );
+  --onyx-color-base-danger-900: light-dark(
+    var(--onyx-color-system-red-900),
+    var(--onyx-color-system-red-300)
+  );
+  --onyx-color-base-grayscale-black: var(--onyx-color-neutral-grayscale-black);
+  --onyx-color-base-grayscale-white: var(--onyx-color-neutral-grayscale-white);
+  --onyx-color-base-info-100: light-dark(
+    var(--onyx-color-system-purple-100),
+    var(--onyx-color-system-purple-1100)
+  );
+  --onyx-color-base-info-200: light-dark(
+    var(--onyx-color-system-purple-200),
+    var(--onyx-color-system-purple-1000)
+  );
+  --onyx-color-base-info-300: light-dark(
+    var(--onyx-color-system-purple-300),
+    var(--onyx-color-system-purple-900)
+  );
+  --onyx-color-base-info-400: light-dark(
+    var(--onyx-color-system-purple-400),
+    var(--onyx-color-system-purple-800)
+  );
+  --onyx-color-base-info-500: light-dark(
+    var(--onyx-color-system-purple-500),
+    var(--onyx-color-system-purple-700)
+  );
+  --onyx-color-base-info-600: var(--onyx-color-system-purple-600);
+  --onyx-color-base-info-700: light-dark(
+    var(--onyx-color-system-purple-700),
+    var(--onyx-color-system-purple-500)
+  );
+  --onyx-color-base-info-800: light-dark(
+    var(--onyx-color-system-purple-800),
+    var(--onyx-color-system-purple-400)
+  );
+  --onyx-color-base-info-900: light-dark(
+    var(--onyx-color-system-purple-900),
+    var(--onyx-color-system-purple-300)
+  );
+  --onyx-color-base-neutral-100: light-dark(
+    var(--onyx-color-neutral-steel-100),
+    var(--onyx-color-neutral-steel-1100)
+  );
+  --onyx-color-base-neutral-200: light-dark(
+    var(--onyx-color-neutral-steel-200),
+    var(--onyx-color-neutral-steel-1000)
+  );
+  --onyx-color-base-neutral-300: light-dark(
+    var(--onyx-color-neutral-steel-300),
+    var(--onyx-color-neutral-steel-900)
+  );
+  --onyx-color-base-neutral-400: light-dark(
+    var(--onyx-color-neutral-steel-400),
+    var(--onyx-color-neutral-steel-800)
+  );
+  --onyx-color-base-neutral-500: light-dark(
+    var(--onyx-color-neutral-steel-500),
+    var(--onyx-color-neutral-steel-700)
+  );
+  --onyx-color-base-neutral-600: var(--onyx-color-neutral-steel-600);
+  --onyx-color-base-neutral-700: light-dark(
+    var(--onyx-color-neutral-steel-700),
+    var(--onyx-color-neutral-steel-500)
+  );
+  --onyx-color-base-neutral-800: light-dark(
+    var(--onyx-color-neutral-steel-800),
+    var(--onyx-color-neutral-steel-400)
+  );
+  --onyx-color-base-neutral-900: light-dark(
+    var(--onyx-color-neutral-steel-900),
+    var(--onyx-color-neutral-steel-300)
+  );
+  --onyx-color-base-primary-100: light-dark(
+    var(--onyx-color-onyx-100),
+    var(--onyx-color-onyx-1100)
+  );
+  --onyx-color-base-primary-200: light-dark(
+    var(--onyx-color-onyx-200),
+    var(--onyx-color-onyx-1000)
+  );
+  --onyx-color-base-primary-300: light-dark(var(--onyx-color-onyx-300), var(--onyx-color-onyx-900));
+  --onyx-color-base-primary-400: light-dark(var(--onyx-color-onyx-400), var(--onyx-color-onyx-800));
+  --onyx-color-base-primary-500: light-dark(var(--onyx-color-onyx-500), var(--onyx-color-onyx-700));
+  --onyx-color-base-primary-600: var(--onyx-color-onyx-600);
+  --onyx-color-base-primary-700: light-dark(var(--onyx-color-onyx-700), var(--onyx-color-onyx-500));
+  --onyx-color-base-primary-800: light-dark(var(--onyx-color-onyx-800), var(--onyx-color-onyx-400));
+  --onyx-color-base-primary-900: light-dark(var(--onyx-color-onyx-900), var(--onyx-color-onyx-300));
+  --onyx-color-base-quantitatives-100: light-dark(
+    var(--onyx-color-quantitatives-100),
+    var(--onyx-color-quantitatives-150)
+  );
+  --onyx-color-base-quantitatives-200: light-dark(
+    var(--onyx-color-quantitatives-200),
+    var(--onyx-color-quantitatives-250)
+  );
+  --onyx-color-base-quantitatives-300: light-dark(
+    var(--onyx-color-quantitatives-300),
+    var(--onyx-color-quantitatives-350)
+  );
+  --onyx-color-base-quantitatives-400: light-dark(
+    var(--onyx-color-quantitatives-400),
+    var(--onyx-color-quantitatives-450)
+  );
+  --onyx-color-base-quantitatives-500: light-dark(
+    var(--onyx-color-quantitatives-500),
+    var(--onyx-color-quantitatives-550)
+  );
+  --onyx-color-base-quantitatives-600: light-dark(
+    var(--onyx-color-quantitatives-600),
+    var(--onyx-color-quantitatives-650)
+  );
+  --onyx-color-base-quantitatives-700: light-dark(
+    var(--onyx-color-quantitatives-700),
+    var(--onyx-color-quantitatives-750)
+  );
+  --onyx-color-base-quantitatives-800: light-dark(
+    var(--onyx-color-quantitatives-800),
+    var(--onyx-color-quantitatives-850)
+  );
+  --onyx-color-base-quantitatives-900: light-dark(
+    var(--onyx-color-quantitatives-900),
+    var(--onyx-color-quantitatives-950)
+  );
+  --onyx-color-base-quantitatives-1000: light-dark(
+    var(--onyx-color-quantitatives-1000),
+    var(--onyx-color-quantitatives-1050)
+  );
+  --onyx-color-base-quantitatives-1100: light-dark(
+    var(--onyx-color-quantitatives-1100),
+    var(--onyx-color-quantitatives-1150)
+  );
+  --onyx-color-base-quantitatives-1200: light-dark(
+    var(--onyx-color-quantitatives-1200),
+    var(--onyx-color-quantitatives-1250)
+  );
+  --onyx-color-base-success-100: light-dark(
+    var(--onyx-color-system-green-100),
+    var(--onyx-color-system-green-1100)
+  );
+  --onyx-color-base-success-200: light-dark(
+    var(--onyx-color-system-green-200),
+    var(--onyx-color-system-green-1000)
+  );
+  --onyx-color-base-success-300: light-dark(
+    var(--onyx-color-system-green-300),
+    var(--onyx-color-system-green-900)
+  );
+  --onyx-color-base-success-400: light-dark(
+    var(--onyx-color-system-green-400),
+    var(--onyx-color-system-green-800)
+  );
+  --onyx-color-base-success-500: light-dark(
+    var(--onyx-color-system-green-500),
+    var(--onyx-color-system-green-700)
+  );
+  --onyx-color-base-success-600: var(--onyx-color-system-green-600);
+  --onyx-color-base-success-700: light-dark(
+    var(--onyx-color-system-green-700),
+    var(--onyx-color-system-green-500)
+  );
+  --onyx-color-base-success-800: light-dark(
+    var(--onyx-color-system-green-800),
+    var(--onyx-color-system-green-400)
+  );
+  --onyx-color-base-success-900: light-dark(
+    var(--onyx-color-system-green-900),
+    var(--onyx-color-system-green-300)
+  );
+  --onyx-color-base-warning-100: light-dark(
+    var(--onyx-color-system-orange-100),
+    var(--onyx-color-system-orange-1100)
+  );
+  --onyx-color-base-warning-200: light-dark(
+    var(--onyx-color-system-orange-200),
+    var(--onyx-color-system-orange-1000)
+  );
+  --onyx-color-base-warning-300: light-dark(
+    var(--onyx-color-system-orange-300),
+    var(--onyx-color-system-orange-900)
+  );
+  --onyx-color-base-warning-400: light-dark(
+    var(--onyx-color-system-orange-400),
+    var(--onyx-color-system-orange-800)
+  );
+  --onyx-color-base-warning-500: light-dark(
+    var(--onyx-color-system-orange-500),
+    var(--onyx-color-system-orange-700)
+  );
+  --onyx-color-base-warning-600: var(--onyx-color-system-orange-600);
+  --onyx-color-base-warning-700: light-dark(
+    var(--onyx-color-system-orange-700),
+    var(--onyx-color-system-orange-500)
+  );
+  --onyx-color-base-warning-800: light-dark(
+    var(--onyx-color-system-orange-800),
+    var(--onyx-color-system-orange-400)
+  );
+  --onyx-color-base-warning-900: light-dark(
+    var(--onyx-color-system-orange-900),
+    var(--onyx-color-system-orange-300)
+  );
+  --onyx-color-component-border-danger: var(--onyx-color-base-danger-500);
+  --onyx-color-component-border-danger-hover: var(--onyx-color-base-danger-400);
+  --onyx-color-component-border-disabled: var(--onyx-color-base-neutral-200);
+  --onyx-color-component-border-neutral: var(--onyx-color-base-neutral-300);
+  --onyx-color-component-border-neutral-hover: var(--onyx-color-base-neutral-400);
+  --onyx-color-component-border-primary: var(--onyx-color-base-primary-500);
+  --onyx-color-component-border-primary-hover: var(--onyx-color-base-primary-400);
+  --onyx-color-component-border-success: var(--onyx-color-base-success-500);
+  --onyx-color-component-border-success-hover: var(--onyx-color-base-success-400);
+  --onyx-color-component-cta-danger: var(--onyx-color-base-danger-500);
+  --onyx-color-component-cta-danger-hover: var(--onyx-color-base-danger-400);
+  --onyx-color-component-cta-default: var(--onyx-color-base-primary-500);
+  --onyx-color-component-cta-default-hover: light-dark(
+    var(--onyx-color-base-primary-300),
+    var(--onyx-color-base-primary-400)
+  );
+  --onyx-color-component-cta-disabled: var(--onyx-color-base-neutral-200);
+  --onyx-color-component-focus-danger: var(--onyx-color-base-danger-300);
+  --onyx-color-component-focus-neutral: light-dark(
+    var(--onyx-color-base-neutral-200),
+    var(--onyx-color-base-neutral-500)
+  );
+  --onyx-color-component-focus-primary: var(--onyx-color-base-primary-200);
+  --onyx-color-component-focus-success: var(--onyx-color-base-success-200);
+  --onyx-color-component-focus-warning: var(--onyx-color-base-warning-200);
+  --onyx-color-component-nav-label: var(--onyx-color-text-icons-primary-intense);
+  --onyx-color-component-nav-stroke: light-dark(
+    var(--onyx-color-base-primary-500),
+    var(--onyx-color-base-primary-700)
+  );
+  --onyx-color-component-opacity-backdrop: light-dark(
+    var(--onyx-color-opacity-soft),
+    var(--onyx-color-opacity-medium)
+  );
+  --onyx-color-text-icons-danger-bold: light-dark(
+    var(--onyx-color-system-red-700),
+    var(--onyx-color-system-red-400)
+  );
+  --onyx-color-text-icons-danger-intense: var(--onyx-color-system-red-500);
+  --onyx-color-text-icons-danger-medium: light-dark(
+    var(--onyx-color-system-red-300),
+    var(--onyx-color-system-red-700)
+  );
+  --onyx-color-text-icons-danger-soft: light-dark(
+    var(--onyx-color-system-red-200),
+    var(--onyx-color-system-red-900)
+  );
+  --onyx-color-text-icons-info-bold: light-dark(
+    var(--onyx-color-system-purple-700),
+    var(--onyx-color-system-purple-400)
+  );
+  --onyx-color-text-icons-info-intense: var(--onyx-color-system-purple-500);
+  --onyx-color-text-icons-info-medium: light-dark(
+    var(--onyx-color-system-purple-300),
+    var(--onyx-color-system-purple-700)
+  );
+  --onyx-color-text-icons-info-soft: light-dark(
+    var(--onyx-color-system-purple-200),
+    var(--onyx-color-system-purple-900)
+  );
+  --onyx-color-text-icons-neutral-button: var(--onyx-color-neutral-grayscale-white);
+  --onyx-color-text-icons-neutral-intense: light-dark(
+    var(--onyx-color-neutral-stone-900),
+    var(--onyx-color-neutral-stone-200)
+  );
+  --onyx-color-text-icons-neutral-inverted: light-dark(
+    var(--onyx-color-neutral-grayscale-white),
+    var(--onyx-color-neutral-stone-1200)
+  );
+  --onyx-color-text-icons-neutral-medium: light-dark(
+    var(--onyx-color-neutral-stone-600),
+    var(--onyx-color-neutral-stone-400)
+  );
+  --onyx-color-text-icons-neutral-soft: light-dark(
+    var(--onyx-color-neutral-stone-500),
+    var(--onyx-color-neutral-stone-600)
+  );
+  --onyx-color-text-icons-primary-bold: light-dark(
+    var(--onyx-color-onyx-700),
+    var(--onyx-color-onyx-400)
+  );
+  --onyx-color-text-icons-primary-intense: var(--onyx-color-onyx-500);
+  --onyx-color-text-icons-primary-medium: light-dark(
+    var(--onyx-color-onyx-300),
+    var(--onyx-color-onyx-700)
+  );
+  --onyx-color-text-icons-primary-soft: light-dark(
+    var(--onyx-color-onyx-200),
+    var(--onyx-color-onyx-900)
+  );
+  --onyx-color-text-icons-success-bold: light-dark(
+    var(--onyx-color-system-green-700),
+    var(--onyx-color-system-green-400)
+  );
+  --onyx-color-text-icons-success-intense: var(--onyx-color-system-green-500);
+  --onyx-color-text-icons-success-medium: light-dark(
+    var(--onyx-color-system-green-300),
+    var(--onyx-color-system-green-700)
+  );
+  --onyx-color-text-icons-success-soft: light-dark(
+    var(--onyx-color-system-green-200),
+    var(--onyx-color-system-green-900)
+  );
+  --onyx-color-text-icons-warning-bold: light-dark(
+    var(--onyx-color-system-orange-700),
+    var(--onyx-color-system-orange-400)
+  );
+  --onyx-color-text-icons-warning-intense: var(--onyx-color-system-orange-500);
+  --onyx-color-text-icons-warning-medium: light-dark(
+    var(--onyx-color-system-orange-300),
+    var(--onyx-color-system-orange-700)
+  );
+  --onyx-color-text-icons-warning-soft: light-dark(
+    var(--onyx-color-system-orange-200),
+    var(--onyx-color-system-orange-900)
+  );
+  --onyx-font-family-data: var(--onyx-font-family-Source-Sans-3-Variable);
+  --onyx-font-family-description: var(--onyx-font-family-OCR-A-Std);
+  --onyx-font-family-h1: var(--onyx-font-family-Source-Sans-3-Variable);
+  --onyx-font-family-h2: var(--onyx-font-family-Source-Sans-3-Variable);
+  --onyx-font-family-h3: var(--onyx-font-family-Source-Sans-3-Variable);
+  --onyx-font-family-h4: var(--onyx-font-family-Source-Sans-3-Variable);
+  --onyx-font-family-mono: var(--onyx-font-family-Source-Code-Pro-Variable);
+  --onyx-font-family-paragraph: var(--onyx-font-family-Source-Sans-3-Variable);
+  --onyx-font-letter-spacing-default: var(--onyx-font-values-0-spacing);
+  --onyx-font-line-height-lg: var(--onyx-font-values-500);
+  --onyx-font-line-height-md: var(--onyx-font-values-400);
+  --onyx-font-line-height-sm: var(--onyx-font-values-300);
+  --onyx-font-line-height-xl: var(--onyx-font-values-600);
+  --onyx-font-size-lg: var(--onyx-font-values-300);
+  --onyx-font-size-md: var(--onyx-font-values-200);
+  --onyx-font-size-sm: var(--onyx-font-values-100);
+  --onyx-font-size-xl: var(--onyx-font-values-500);
+  --onyx-font-weight-regular: var(--onyx-font-weight-400);
+  --onyx-font-weight-semibold: var(--onyx-font-weight-600);
+  --onyx-radius-full: var(--onyx-number-radius-600);
+  --onyx-radius-lg: var(--onyx-number-radius-400);
+  --onyx-radius-md: var(--onyx-number-radius-300);
+  --onyx-radius-sm: var(--onyx-number-radius-200);
+  --onyx-radius-xl: var(--onyx-number-radius-500);
+  --onyx-radius-xs: var(--onyx-number-radius-100);
+}