@helloimjolopez-pathway/pathway-tokens 5.4.0 → 6.0.0

package/dist/breakpoints.css

@@ -0,0 +1,11 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --breakpoints-desktop-1440px: 1440px;
+  --breakpoints-tablet-1024px: 1024px;
+  --breakpoints-tablet-768px: 768px;
+  --breakpoints-mobile-393px: 393px;
+  --breakpoints-desktop-1920px: 1920px;
+}

package/dist/layout-contextual.css

@@ -0,0 +1,52 @@
+/**
+ * contextual-layout-units — one name per token, breakpoint resolved by media query.
+ * Generated by style-dictionary.config.js. Do not edit.
+ *
+ * :root is the desktop value. Narrower breakpoints override only what differs.
+ */
+:root {
+  --contextual-layout-units-button-border-width-base-base: 0.75px;
+  --contextual-layout-units-button-border-width-thick-thick: 1px;
+  --contextual-layout-units-button-border-width-thin-thin: 0.5px;
+  --contextual-layout-units-button-gap-horizontal: 8px;
+  --contextual-layout-units-button-padding-large-horizontal: 14px;
+  --contextual-layout-units-button-padding-large-vertical: 12px;
+  --contextual-layout-units-button-padding-medium-horizontal: 12px;
+  --contextual-layout-units-button-padding-medium-vertical: 10px;
+  --contextual-layout-units-button-padding-small-horizontal: 8px;
+  --contextual-layout-units-button-padding-small-vertical: 6px;
+  --contextual-layout-units-button-padding-xsmall-horizontal: 8px;
+  --contextual-layout-units-button-padding-xsmall-vertical: 6px;
+  --contextual-layout-units-button-radius-radius: 8px;
+  --contextual-layout-units-card-border-width-base-base: 0.5px;
+  --contextual-layout-units-card-border-width-thick-thick: 0.75px;
+  --contextual-layout-units-card-cornerradius-cornerradius: 12px;
+  --contextual-layout-units-card-gap-gap: 8px;
+  --contextual-layout-units-card-padding-medium-horizontal: 16px;
+  --contextual-layout-units-card-padding-medium-vertical: 16px;
+  --contextual-layout-units-card-padding-small-horizontal: 14px;
+  --contextual-layout-units-card-padding-small-vertical: 14px;
+  --contextual-layout-units-focused-element-borderwidth-borderwidth: 2px;
+  --contextual-layout-units-focused-element-cornerradius-cornerradius: 12px;
+  --contextual-layout-units-navitem-large-padding-horizontal: 14px;
+  --contextual-layout-units-navitem-large-padding-vertical: 12px;
+  --contextual-layout-units-navitem-large-radius-radius: 8px;
+  --contextual-layout-units-navitem-large-stroke-width-stroke-width: 1.5px;
+  --contextual-layout-units-page-padding-bottom: 64px;
+  --contextual-layout-units-page-padding-horizontal: 36px;
+  --contextual-layout-units-page-padding-top: 16px;
+}
+
+@media (max-width: 1023px) {
+  :root {
+    --contextual-layout-units-page-padding-horizontal: 24px;
+    --contextual-layout-units-page-padding-top: 14px;
+  }
+}
+
+@media (max-width: 767px) {
+  :root {
+    --contextual-layout-units-page-padding-horizontal: 16px;
+    --contextual-layout-units-page-padding-top: 12px;
+  }
+}

package/dist/layout.css

@@ -0,0 +1,51 @@
+/**
+ * semantic-layout-units — one name per token, breakpoint resolved by media query.
+ * Generated by style-dictionary.config.js. Do not edit.
+ *
+ * :root is the desktop value. Narrower breakpoints override only what differs.
+ */
+:root {
+  --semantic-layout-units-accessibility-touch-target-aa-height: 44px;
+  --semantic-layout-units-accessibility-touch-target-aa-width: 44px;
+  --semantic-layout-units-accessibility-touch-target-aaa-height: 48px;
+  --semantic-layout-units-accessibility-touch-target-aaa-width: 48px;
+  --semantic-layout-units-accessibility-touch-target-desktop-only-height: 36px;
+  --semantic-layout-units-accessibility-touch-target-desktop-only-width: 36px;
+  --semantic-layout-units-borderwidth-base: 1px;
+  --semantic-layout-units-borderwidth-medium: 1.5px;
+  --semantic-layout-units-borderwidth-thick: 2px;
+  --semantic-layout-units-borderwidth-thin: 0.75px;
+  --semantic-layout-units-borderwidth-xthick: 4px;
+  --semantic-layout-units-borderwidth-xthin: 0.5px;
+  --semantic-layout-units-borderwidth-xxthick: 6px;
+  --semantic-layout-units-cornerradius-full: 64px;
+  --semantic-layout-units-cornerradius-large: 12px;
+  --semantic-layout-units-cornerradius-medium: 8px;
+  --semantic-layout-units-cornerradius-small: 4px;
+  --semantic-layout-units-cornerradius-xlarge: 16px;
+  --semantic-layout-units-cornerradius-xsmall: 2px;
+  --semantic-layout-units-gap-base: 16px;
+  --semantic-layout-units-gap-medium: 12px;
+  --semantic-layout-units-gap-relaxed: 24px;
+  --semantic-layout-units-gap-tight: 8px;
+  --semantic-layout-units-gap-wide: 36px;
+  --semantic-layout-units-gap-xtight: 6px;
+  --semantic-layout-units-gap-xxtight: 4px;
+  --semantic-layout-units-gap-xxxtight: 2px;
+  --semantic-layout-units-padding-base: 16px;
+  --semantic-layout-units-padding-collosal: 120px;
+  --semantic-layout-units-padding-ginormous: 64px;
+  --semantic-layout-units-padding-medium: 12px;
+  --semantic-layout-units-padding-relaxed: 24px;
+  --semantic-layout-units-padding-tight: 8px;
+  --semantic-layout-units-padding-wide: 36px;
+  --semantic-layout-units-padding-xtight: 6px;
+  --semantic-layout-units-padding-xwide: 48px;
+  --semantic-layout-units-padding-xxtight: 4px;
+  --semantic-layout-units-padding-xxwide: 56px;
+  --semantic-layout-units-padding-xxxtight: 2px;
+}
+
+/* tablet-798pt: identical to desktop, nothing to override */
+
+/* mobile-393pt: identical to desktop, nothing to override */

package/dist/motion.css

@@ -0,0 +1,23 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --motion-duration-1: 100ms; /** Instant tap feedback, tiny opacity flickers */
+  --motion-duration-2: 150ms; /** Hover fills, small opacity fades, colour transitions — the most common micro-interaction timing */
+  --motion-duration-3: 200ms; /** Micro-interactions needing slightly more presence; small reveals, focus rings */
+  --motion-duration-4: 300ms; /** Chevron / disclosure rotation, dropdown & popover content, in-component state */
+  --motion-duration-5: 380ms; /** Panel state changes: accordions, expand/collapse, item enter/exit */
+  --motion-duration-6: 460ms; /** Large physical-scale moves (e.g. SideNav width expand/collapse) */
+  --motion-duration-7: 680ms; /** Cross-component transitions: page content sliding, large layout shifts */
+  --motion-duration-8: 1100ms; /** Slowest transition step: very large layout shifts, deliberate full-screen moves */
+  --motion-duration-loop: 1000ms; /** Standard continuous-loop period (standalone Spinner, skeleton shimmer) */
+  --motion-duration-loop-fast: 750ms; /** Tighter loop for embedded/inline contexts (in-button spinner — faster reads as more responsive feedback) */
+  --motion-easing-standard: cubic-bezier(0.4, 0, 0.2, 1); /** Most transitions — enters AND exits. Smooth, no overshoot. Default for colour, fill, opacity, focus rings. */
+  --motion-easing-spring: cubic-bezier(0.34, 1.04, 0.64, 1); /** Signature Pathway curve. Interactive element entrances: dropdown/popover panel opens. A whisper of overshoot (y2=1.04) — easeful, only *ever so slightly* alive. Softened 2026-06-08 from 1.08, which read as too bouncy. Not for chevrons — see chevron rule below. */
+  --motion-easing-decelerate: cubic-bezier(0, 0, 0.2, 1); /** Enters where the element should glide in smoothly — overlay panels, popovers, anything appearing from outside. Pure ease-out, no bounce. */
+  --motion-easing-accelerate: cubic-bezier(0.4, 0, 1, 1); /** Exits where the element leaves cleanly — dismissing overlays, scaling down. */
+  --motion-easing-emphasized: cubic-bezier(0.32, 0.72, 0, 1); /** Large physical-scale transitions: full-panel width changes, SideNav width. Smooth glide, no overshoot. */
+  --motion-easing-accordion: cubic-bezier(0.33, 1.03, 0.68, 1); /** Accordion settle — content reveal/hide, chevron rotation. The gentlest overshoot in the system (y2=1.03). Softened 2026-06-08 from 0.22,1.12,0.36,1, which was visibly bouncy. */
+  --motion-easing-linear: cubic-bezier(0, 0, 1, 1); /** Continuous loops only (spinners, shimmer). Never for bounded transitions. */
+}

package/dist/primitives.css

@@ -0,0 +1,356 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --primitive-color-cool-neutral-0: #ffffff;
+  --primitive-color-cool-neutral-10: #fafafa;
+  --primitive-color-cool-neutral-25: #f6f6f6;
+  --primitive-color-cool-neutral-50: #ededed;
+  --primitive-color-cool-neutral-75: #e1e1e1;
+  --primitive-color-cool-neutral-100: #d2d2d2;
+  --primitive-color-cool-neutral-125: #c4c4c4;
+  --primitive-color-cool-neutral-150: #b5b5b5;
+  --primitive-color-cool-neutral-175: #a6a6a6;
+  --primitive-color-cool-neutral-200: #979797;
+  --primitive-color-cool-neutral-250: #8b8b8b;
+  --primitive-color-cool-neutral-300: #7b7b7b;
+  --primitive-color-cool-neutral-350: #6b6b6b;
+  --primitive-color-cool-neutral-400: #606060;
+  --primitive-color-cool-neutral-450: #545454;
+  --primitive-color-cool-neutral-500: #484848;
+  --primitive-color-cool-neutral-550: #3d3d3d;
+  --primitive-color-cool-neutral-600: #313131;
+  --primitive-color-cool-neutral-700: #202020;
+  --primitive-color-cool-neutral-800: #161616;
+  --primitive-color-cool-neutral-900: #070707;
+  --primitive-color-cool-neutral-0-4: rgba(255, 255, 255, 0.04);
+  --primitive-color-cool-neutral-0-8: rgba(255, 255, 255, 0.08);
+  --primitive-color-cool-neutral-0-16: rgba(255, 255, 255, 0.16);
+  --primitive-color-cool-neutral-0-24: rgba(255, 255, 255, 0.24);
+  --primitive-color-cool-neutral-0-36: rgba(255, 255, 255, 0.36);
+  --primitive-color-cool-neutral-0-50: rgba(255, 255, 255, 0.5);
+  --primitive-color-cool-neutral-0-70: rgba(255, 255, 255, 0.7);
+  --primitive-color-cool-neutral-800-4: rgba(22, 22, 22, 0.04);
+  --primitive-color-cool-neutral-800-8: rgba(22, 22, 22, 0.08);
+  --primitive-color-cool-neutral-800-16: rgba(22, 22, 22, 0.16);
+  --primitive-color-cool-neutral-800-24: rgba(22, 22, 22, 0.24);
+  --primitive-color-cool-neutral-800-36: rgba(22, 22, 22, 0.36);
+  --primitive-color-cool-neutral-800-50: rgba(22, 22, 22, 0.5);
+  --primitive-color-cool-neutral-800-70: rgba(22, 22, 22, 0.7);
+  --primitive-color-amethyst-0: #faf9fc;
+  --primitive-color-amethyst-25: #f4f2fa;
+  --primitive-color-amethyst-50: #e8e6f5;
+  --primitive-color-amethyst-75: #dcd9ef;
+  --primitive-color-amethyst-100: #cbc6e8;
+  --primitive-color-amethyst-150: #b9b3e0;
+  --primitive-color-amethyst-200: #a8a0d8;
+  --primitive-color-amethyst-300: #9a90d0;
+  --primitive-color-amethyst-350: #877ec8;
+  --primitive-color-amethyst-400: #6e64b8;
+  --primitive-color-amethyst-500: #5951a0;
+  --primitive-color-amethyst-600: #464080;
+  --primitive-color-amethyst-700: #353063;
+  --primitive-color-amethyst-800: #221e3f;
+  --primitive-color-amethyst-900: #110c2c;
+  --primitive-color-green-0: #f8fcf9;
+  --primitive-color-green-25: #dff6e2;
+  --primitive-color-green-50: #c9edce;
+  --primitive-color-green-75: #b4e4b9;
+  --primitive-color-green-100: #9edba5;
+  --primitive-color-green-150: #7acd84;
+  --primitive-color-green-200: #59c56b;
+  --primitive-color-green-300: #3db856;
+  --primitive-color-green-350: #36a14f;
+  --primitive-color-green-400: #358d4b;
+  --primitive-color-green-500: #2a793e;
+  --primitive-color-green-600: #1f602e;
+  --primitive-color-green-700: #174f26;
+  --primitive-color-green-800: #0d351b;
+  --primitive-color-green-900: #001f00;
+  --primitive-color-orange-0: #fcfafa;
+  --primitive-color-orange-25: #f9f1ed;
+  --primitive-color-orange-50: #f9e2d6;
+  --primitive-color-orange-75: #f9d2bc;
+  --primitive-color-orange-100: #fabd9d;
+  --primitive-color-orange-150: #fda97b;
+  --primitive-color-orange-200: #fe9156;
+  --primitive-color-orange-250: #f97b38;
+  --primitive-color-orange-300: #f56618;
+  --primitive-color-orange-350: #e1580e;
+  --primitive-color-orange-400: #c14d0f;
+  --primitive-color-orange-500: #a5420d;
+  --primitive-color-orange-600: #8d380b;
+  --primitive-color-orange-700: #72300c;
+  --primitive-color-orange-800: #59270c;
+  --primitive-color-orange-900: #491900;
+  --primitive-color-red-0: #fdfafa;
+  --primitive-color-red-25: #faefef;
+  --primitive-color-red-50: #f5dfdf;
+  --primitive-color-red-75: #f0cdcd;
+  --primitive-color-red-100: #e9b7b7;
+  --primitive-color-red-150: #e29f9f;
+  --primitive-color-red-200: #d98686;
+  --primitive-color-red-250: #cf6e6e;
+  --primitive-color-red-300: #c55858;
+  --primitive-color-red-350: #ba4646;
+  --primitive-color-red-400: #b03a3a;
+  --primitive-color-red-450: #a63232;
+  --primitive-color-red-500: #9d2d2d;
+  --primitive-color-red-600: #882727;
+  --primitive-color-red-700: #722121;
+  --primitive-color-red-800: #5f1b1b;
+  --primitive-color-red-900: #520f11;
+  --primitive-color-brand-0: #f9fafd;
+  --primitive-color-brand-10: #eef2fb;
+  --primitive-color-brand-25: #e2e9f7;
+  --primitive-color-brand-50: #ccd7f2;
+  --primitive-color-brand-75: #b6c6ec;
+  --primitive-color-brand-100: #a0b5e6;
+  --primitive-color-brand-150: #86a0dd;
+  --primitive-color-brand-200: #6e8bd4;
+  --primitive-color-brand-250: #5d7cca;
+  --primitive-color-brand-300: #5475c6;
+  --primitive-color-brand-350: #4b6ec3;
+  --primitive-color-brand-400: #4364b6;
+  --primitive-color-brand-450: #3a5aaa;
+  --primitive-color-brand-500: #345499;
+  --primitive-color-brand-550: #2d4889;
+  --primitive-color-brand-600: #22386b;
+  --primitive-color-brand-700: #152343;
+  --primitive-color-brand-800: #0a1223;
+  --primitive-color-brand-900: #060a15;
+  --primitive-color-brand-75-4: rgba(182, 198, 236, 0.04);
+  --primitive-color-brand-75-8: rgba(182, 198, 236, 0.08);
+  --primitive-color-brand-75-16: rgba(182, 198, 236, 0.16);
+  --primitive-color-brand-75-24: rgba(182, 198, 236, 0.24);
+  --primitive-color-brand-75-36: rgba(182, 198, 236, 0.36);
+  --primitive-color-brand-75-50: rgba(182, 198, 236, 0.5);
+  --primitive-color-brand-75-70: rgba(182, 198, 236, 0.7);
+  --primitive-color-brand-600-4: rgba(34, 56, 107, 0.04);
+  --primitive-color-brand-600-8: rgba(34, 56, 107, 0.08);
+  --primitive-color-brand-600-16: rgba(34, 56, 107, 0.16);
+  --primitive-color-brand-600-24: rgba(34, 56, 107, 0.24);
+  --primitive-color-brand-600-36: rgba(34, 56, 107, 0.36);
+  --primitive-color-brand-600-50: rgba(34, 56, 107, 0.5);
+  --primitive-color-brand-600-70: rgba(34, 56, 107, 0.7);
+  --primitive-color-seabreeze-0: #f6fbfd;
+  --primitive-color-seabreeze-25: #e9f6fc;
+  --primitive-color-seabreeze-50: #dbf0fb;
+  --primitive-color-seabreeze-75: #c4e7f8;
+  --primitive-color-seabreeze-100: #b1e1f6;
+  --primitive-color-seabreeze-150: #95d4ee;
+  --primitive-color-seabreeze-200: #7bc7e5;
+  --primitive-color-seabreeze-250: #66badb;
+  --primitive-color-seabreeze-300: #5ab1d3;
+  --primitive-color-seabreeze-350: #52abce;
+  --primitive-color-seabreeze-400: #3597bb;
+  --primitive-color-seabreeze-500: #2a7e9d;
+  --primitive-color-seabreeze-600: #216883;
+  --primitive-color-seabreeze-700: #185167;
+  --primitive-color-seabreeze-800: #123c4e;
+  --primitive-color-seabreeze-900: #00293a;
+  --primitive-color-jade-0: #f8fcfb;
+  --primitive-color-jade-25: #daf1eb;
+  --primitive-color-jade-50: #c7ebe1;
+  --primitive-color-jade-75: #aee3d6;
+  --primitive-color-jade-100: #94dbc9;
+  --primitive-color-jade-150: #85d6c2;
+  --primitive-color-jade-200: #6fceb7;
+  --primitive-color-jade-250: #41c8a9;
+  --primitive-color-jade-300: #2bab92;
+  --primitive-color-jade-350: #208877;
+  --primitive-color-jade-400: #1a766a;
+  --primitive-color-jade-500: #176459;
+  --primitive-color-jade-600: #135349;
+  --primitive-color-jade-700: #10423b;
+  --primitive-color-jade-800: #0d362f;
+  --primitive-color-jade-900: #012b25;
+  --primitive-color-saffron-0: #fefaf2;
+  --primitive-color-saffron-25: #fef2de;
+  --primitive-color-saffron-75: #fee2b3;
+  --primitive-color-saffron-100: #fed897;
+  --primitive-color-saffron-150: #ffc864;
+  --primitive-color-saffron-200: #eab655;
+  --primitive-color-saffron-300: #bf9342;
+  --primitive-color-saffron-350: #aa843e;
+  --primitive-color-saffron-400: #91723b;
+  --primitive-color-saffron-500: #6d5936;
+  --primitive-color-saffron-700: #342d21;
+  --primitive-color-saffron-800: #1d1912;
+  --primitive-color-saffron-900: #110d07;
+  --primitive-color-warm-neutral-0: #fefefd;
+  --primitive-color-warm-neutral-25: #f9f7f5;
+  --primitive-color-warm-neutral-50: #f3f0ec;
+  --primitive-color-warm-neutral-75: #e6e2dc;
+  --primitive-color-warm-neutral-100: #d8d3cd;
+  --primitive-color-warm-neutral-125: #d1ccc5;
+  --primitive-color-warm-neutral-150: #cbc6be;
+  --primitive-color-warm-neutral-175: #c4bfb7;
+  --primitive-color-warm-neutral-200: #bdb8b0;
+  --primitive-color-warm-neutral-250: #b0aaa2;
+  --primitive-color-warm-neutral-300: #9b968e;
+  --primitive-color-warm-neutral-350: #87827b;
+  --primitive-color-warm-neutral-400: #77726b;
+  --primitive-color-warm-neutral-450: #67625c;
+  --primitive-color-warm-neutral-500: #57534e;
+  --primitive-color-warm-neutral-550: #484540;
+  --primitive-color-warm-neutral-600: #393733;
+  --primitive-color-warm-neutral-700: #2b2926;
+  --primitive-color-warm-neutral-800: #1e1c1a;
+  --primitive-color-warm-neutral-900: #0f0e0d;
+  --primitive-color-warm-neutral-100-4: rgba(216, 211, 205, 0.04);
+  --primitive-color-warm-neutral-100-8: rgba(216, 211, 205, 0.08);
+  --primitive-color-warm-neutral-100-16: rgba(216, 211, 205, 0.16);
+  --primitive-color-warm-neutral-100-24: rgba(216, 211, 205, 0.24);
+  --primitive-color-warm-neutral-100-36: rgba(216, 211, 205, 0.36);
+  --primitive-color-warm-neutral-100-50: rgba(216, 211, 205, 0.5);
+  --primitive-color-warm-neutral-100-70: rgba(216, 211, 205, 0.7);
+  --primitive-color-warm-neutral-500-4: rgba(87, 83, 78, 0.04);
+  --primitive-color-warm-neutral-500-8: rgba(87, 83, 78, 0.08);
+  --primitive-color-warm-neutral-500-16: rgba(87, 83, 78, 0.16);
+  --primitive-color-warm-neutral-500-24: rgba(87, 83, 78, 0.24);
+  --primitive-color-warm-neutral-500-36: rgba(87, 83, 78, 0.36);
+  --primitive-color-warm-neutral-500-50: rgba(87, 83, 78, 0.5);
+  --primitive-color-warm-neutral-500-70: rgba(87, 83, 78, 0.7);
+  --primitive-color-mauve-0: #fcf9fb;
+  --primitive-color-mauve-25: #f7e9f2;
+  --primitive-color-mauve-75: #f2d9e9;
+  --primitive-color-mauve-100: #ebc6de;
+  --primitive-color-mauve-150: #e2accf;
+  --primitive-color-mauve-200: #d586b9;
+  --primitive-color-mauve-300: #c85fa5;
+  --primitive-color-mauve-350: #b83d8f;
+  --primitive-color-mauve-400: #9b3178;
+  --primitive-color-mauve-500: #842a66;
+  --primitive-color-mauve-700: #74255a;
+  --primitive-color-mauve-800: #65204e;
+  --primitive-color-mauve-900: #5b1545;
+  --primitive-color-lagoon-0: #f8fbfc;
+  --primitive-color-lagoon-25: #e5f2f4;
+  --primitive-color-lagoon-50: #d2e9ed;
+  --primitive-color-lagoon-75: #bfe0e5;
+  --primitive-color-lagoon-100: #acd7dd;
+  --primitive-color-lagoon-150: #9aced5;
+  --primitive-color-lagoon-200: #89c5cd;
+  --primitive-color-lagoon-250: #7bbec6;
+  --primitive-color-lagoon-300: #5dbac6;
+  --primitive-color-lagoon-350: #31adc0;
+  --primitive-color-lagoon-400: #23a4b8;
+  --primitive-color-lagoon-500: #1e99ae;
+  --primitive-color-lagoon-600: #187d8e;
+  --primitive-color-lagoon-700: #146171;
+  --primitive-color-lagoon-800: #104956;
+  --primitive-color-lagoon-900: #003440;
+  --primitive-type-family-brand: Red Hat Text;
+  --primitive-type-fontstyle-normal: Normal;
+  --primitive-type-fontstyle-italic: Italic;
+  --primitive-type-textdecoration-none: None;
+  --primitive-type-textdecoration-underline: Underline;
+  --primitive-type-size-10: 10px;
+  --primitive-type-size-11: 11px;
+  --primitive-type-size-12: 12px;
+  --primitive-type-size-14: 14px;
+  --primitive-type-size-16: 16px;
+  --primitive-type-size-18: 18px;
+  --primitive-type-size-20: 20px;
+  --primitive-type-size-24: 24px;
+  --primitive-type-size-32: 32px;
+  --primitive-type-size-36: 36px;
+  --primitive-type-size-40: 40px;
+  --primitive-type-size-48: 48px;
+  --primitive-type-size-56: 56px;
+  --primitive-type-weight-300: 300;
+  --primitive-type-weight-400: 400;
+  --primitive-type-weight-500: 500;
+  --primitive-type-weight-600: 600;
+  --primitive-type-weight-700: 700;
+  --primitive-type-line-height-56pt-tight: 60px;
+  --primitive-type-line-height-56pt-single: 68px;
+  --primitive-type-line-height-56pt-relaxed: 76px;
+  --primitive-type-line-height-56pt-spacious: 84px;
+  --primitive-type-line-height-48pt-tight: 52px;
+  --primitive-type-line-height-48pt-single: 58px;
+  --primitive-type-line-height-48pt-relaxed: 64px;
+  --primitive-type-line-height-48pt-spacious: 72px;
+  --primitive-type-line-height-40pt-tight: 44px;
+  --primitive-type-line-height-40pt-single: 48px;
+  --primitive-type-line-height-40pt-relaxed: 52px;
+  --primitive-type-line-height-40pt-spacious: 56px;
+  --primitive-type-line-height-36pt-tight: 40px;
+  --primitive-type-line-height-36pt-single: 44px;
+  --primitive-type-line-height-36pt-relaxed: 50px;
+  --primitive-type-line-height-36pt-spacious: 58px;
+  --primitive-type-line-height-32pt-tight: 36px;
+  --primitive-type-line-height-32pt-single: 40px;
+  --primitive-type-line-height-32pt-relaxed: 46px;
+  --primitive-type-line-height-32pt-spacious: 52px;
+  --primitive-type-line-height-24pt-tight: 28px;
+  --primitive-type-line-height-24pt-single: 30px;
+  --primitive-type-line-height-24pt-relaxed: 36px;
+  --primitive-type-line-height-24pt-spacious: 40px;
+  --primitive-type-line-height-20pt-tight: 24px;
+  --primitive-type-line-height-20pt-single: 28px;
+  --primitive-type-line-height-20pt-relaxed: 32px;
+  --primitive-type-line-height-20pt-spacious: 36px;
+  --primitive-type-line-height-18pt-tight: 22px;
+  --primitive-type-line-height-18pt-single: 24px;
+  --primitive-type-line-height-18pt-relaxed: 30px;
+  --primitive-type-line-height-18pt-spacious: 34px;
+  --primitive-type-line-height-16pt-tight: 20px;
+  --primitive-type-line-height-16pt-single: 22px;
+  --primitive-type-line-height-16pt-relaxed: 28px;
+  --primitive-type-line-height-16pt-spacious: 30px;
+  --primitive-type-line-height-14pt-tight: 18px;
+  --primitive-type-line-height-14pt-single: 20px;
+  --primitive-type-line-height-14pt-relaxed: 24px;
+  --primitive-type-line-height-14pt-spacious: 28px;
+  --primitive-type-line-height-12pt-tight: 16px;
+  --primitive-type-line-height-12pt-single: 18px;
+  --primitive-type-line-height-12pt-relaxed: 22px;
+  --primitive-type-line-height-12pt-spacious: 24px;
+  --primitive-type-line-height-11pt-tight: 14px;
+  --primitive-type-line-height-11pt-single: 16px;
+  --primitive-type-line-height-11pt-relaxed: 18px;
+  --primitive-type-line-height-11pt-spacious: 22px;
+  --primitive-type-line-height-10pt-tight: 12px;
+  --primitive-type-line-height-10pt-single: 14px;
+  --primitive-type-line-height-10pt-relaxed: 16px;
+  --primitive-type-line-height-10pt-spacious: 20px;
+  --primitive-type-letter-spacing-compact: 0px;
+  --primitive-type-letter-spacing-standard: 0.10000000149011612px;
+  --primitive-type-letter-spacing-wide: 0.30000001192092896px;
+  --primitive-type-letter-spacing-extrawide: 0.6000000238418579px;
+  --primitive-unit-unit-1: 1px;
+  --primitive-unit-unit-2: 2px;
+  --primitive-unit-unit-4: 4px;
+  --primitive-unit-unit-6: 6px;
+  --primitive-unit-unit-8: 8px;
+  --primitive-unit-unit-10: 10px;
+  --primitive-unit-unit-11: 11px;
+  --primitive-unit-unit-12: 12px;
+  --primitive-unit-unit-14: 14px;
+  --primitive-unit-unit-16: 16px;
+  --primitive-unit-unit-18: 18px;
+  --primitive-unit-unit-20: 20px;
+  --primitive-unit-unit-24: 24px;
+  --primitive-unit-unit-26: 26px;
+  --primitive-unit-unit-28: 28px;
+  --primitive-unit-unit-32: 32px;
+  --primitive-unit-unit-36: 36px;
+  --primitive-unit-unit-40: 40px;
+  --primitive-unit-unit-44: 44px;
+  --primitive-unit-unit-48: 48px;
+  --primitive-unit-unit-56: 56px;
+  --primitive-unit-unit-64: 64px;
+  --primitive-unit-unit-72: 72px;
+  --primitive-unit-unit-80: 80px;
+  --primitive-unit-unit-88: 88px;
+  --primitive-unit-unit-96: 96px;
+  --primitive-unit-unit-104: 104px;
+  --primitive-unit-unit-112: 112px;
+  --primitive-unit-unit-120: 120px;
+  --primitive-unit-unit-0-point-5: 0.5px;
+  --primitive-unit-unit-0-point-75: 0.75px;
+  --primitive-unit-unit-1-point-5: 1.5px;
+}