@motion-proto/live-tokens 0.6.2 → 0.8.0

package/src/system/styles/tokens.generated.css

@@ -0,0 +1,544 @@
+/* Generated by themeFileApi from the production theme and component configs. Do not edit. */
+/* tokens.css holds developer-authored defaults; this file holds editor overrides. */
+
+/* Production theme: my-theme */
+:root:root {
+  --gradient-1: linear-gradient(90deg, var(--color-brand-500) 0%, var(--color-accent-500) 100%);
+  --gradient-2: linear-gradient(135deg, var(--color-brand-500) 0%, var(--color-special-500) 100%);
+  --gradient-3: linear-gradient(90deg, var(--color-success-500) 0%, var(--color-info-500) 100%);
+  --gradient-4: linear-gradient(45deg, var(--color-danger-500) 0%, var(--color-warning-500) 100%);
+  --badge-trait-surface: var(--surface-brand);
+  --badge-trait-text: var(--text-brand);
+  --badge-trait-text-font-family: var(--font-sans);
+  --badge-trait-text-font-size: var(--font-size-sm);
+  --badge-trait-text-font-weight: var(--font-weight-light);
+  --badge-trait-text-line-height: var(--line-height-xs);
+  --badge-trait-border: var(--border-brand-medium);
+  --badge-trait-border-width: var(--border-width-1);
+  --badge-trait-radius: var(--radius-full);
+  --badge-trait-padding: var(--space-6);
+  --badge-trait-shadow: transparent;
+  --sectiondivider-padding: var(--space-16);
+  --sectiondivider-title: var(--text-primary);
+  --sectiondivider-title-font-family: var(--font-display);
+  --sectiondivider-title-font-size: var(--font-size-5xl);
+  --sectiondivider-title-font-weight: var(--font-weight-normal);
+  --sectiondivider-title-line-height: var(--line-height-xs);
+  --sectiondivider-title-border-width: var(--border-width-4);
+  --sectiondivider-title-stroke-color: var(--surface-canvas-lowest);
+  --sectiondivider-description: var(--text-secondary);
+  --sectiondivider-description-font-family: var(--font-sans);
+  --sectiondivider-description-font-size: var(--font-size-md);
+  --sectiondivider-description-font-weight: var(--font-weight-normal);
+  --sectiondivider-description-line-height: var(--line-height-md);
+  --dialog-primary-default-surface: var(--surface-neutral-high);
+  --dialog-primary-default-text: var(--text-primary);
+  --dialog-primary-default-border: var(--border-neutral-medium);
+  --dialog-primary-default-border-width: var(--border-width-1);
+  --dialog-primary-default-radius: var(--radius-md);
+  --dialog-primary-default-padding: var(--space-8);
+  --dialog-primary-hover-surface: var(--surface-neutral-higher);
+  --dialog-primary-hover-text: var(--text-primary);
+  --dialog-primary-hover-border: var(--border-neutral-strong);
+  --dialog-primary-hover-border-width: var(--border-width-1);
+  --dialog-primary-hover-radius: var(--radius-md);
+  --dialog-primary-hover-padding: var(--space-8);
+  --dialog-secondary-default-text: var(--text-primary);
+  --dialog-secondary-default-border: var(--border-neutral-medium);
+  --dialog-secondary-default-border-width: var(--border-width-1);
+  --dialog-secondary-default-radius: var(--radius-md);
+  --dialog-secondary-default-padding: var(--space-8);
+  --dialog-secondary-hover-surface: var(--surface-neutral-lower);
+  --dialog-secondary-hover-text: var(--text-primary);
+  --dialog-secondary-hover-border: var(--border-neutral-strong);
+  --dialog-secondary-hover-border-width: var(--border-width-1);
+  --dialog-secondary-hover-radius: var(--radius-md);
+  --dialog-secondary-hover-padding: var(--space-8);
+  --overlay-lowest: rgba(20, 3, 0, 0.12);
+  --overlay-lower: rgba(20, 3, 0, 0.25);
+  --overlay-low: rgba(20, 3, 0, 0.38);
+  --overlay: rgba(20, 3, 0, 0.51);
+  --overlay-high: rgba(20, 3, 0, 0.64);
+  --overlay-higher: rgba(20, 3, 0, 0.77);
+  --overlay-highest: rgba(20, 3, 0, 0.9);
+  --hover-low: rgba(255, 255, 255, 0.05);
+  --hover: rgba(255, 255, 255, 0.1);
+  --hover-high: rgba(255, 255, 255, 0.15);
+  --shadow-sm: 1px 1px 2px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-md: 3px 3px 6px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-lg: 5px 5px 9px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-xl: 6px 7px 13px 0px hsla(237, 18%, 3%, 0.9);
+  --shadow-2xl: 8px 9px 16px 0px hsla(237, 18%, 3%, 0.9);
+  --color-neutral-100: #dde6ec;
+  --color-neutral-200: #c4cdd3;
+  --color-neutral-300: #a8b1b7;
+  --color-neutral-400: #8b949a;
+  --color-neutral-500: #70787e;
+  --color-neutral-600: #555e63;
+  --color-neutral-700: #3c4449;
+  --color-neutral-800: #252c31;
+  --color-neutral-850: #0f161a;
+  --color-neutral-900: #020407;
+  --color-neutral-950: #000000;
+  --surface-neutral-lowest: #040c13;
+  --surface-neutral-lower: #162027;
+  --surface-neutral-low: #2c353c;
+  --surface-neutral: #434c52;
+  --surface-neutral-high: #5c6369;
+  --surface-neutral-higher: #767c81;
+  --surface-neutral-highest: #91969a;
+  --border-neutral-faint: #1c2327;
+  --border-neutral-subtle: #3a4146;
+  --border-neutral: #5a6267;
+  --border-neutral-medium: #7c848b;
+  --border-neutral-strong: #a0a9af;
+  --text-primary: #ffffff;
+  --text-secondary: #c2cacf;
+  --text-tertiary: #7e8285;
+  --text-muted: #4e4f50;
+  --text-disabled: #383838;
+  --color-alternate-100: #e9e3e0;
+  --color-alternate-200: #d2ccc8;
+  --color-alternate-300: #b7b1ad;
+  --color-alternate-400: #9b9693;
+  --color-alternate-500: #817b78;
+  --color-alternate-600: #67625f;
+  --color-alternate-700: #4f4a47;
+  --color-alternate-800: #373330;
+  --color-alternate-850: #221d1b;
+  --color-alternate-900: #0e0b08;
+  --color-alternate-950: #030101;
+  --surface-alternate-lowest: #100907;
+  --surface-alternate-lower: #231d19;
+  --surface-alternate-low: #39322f;
+  --surface-alternate: #4f4946;
+  --surface-alternate-high: #66615e;
+  --surface-alternate-higher: #7f7a78;
+  --surface-alternate-highest: #989492;
+  --border-alternate-faint: #25201e;
+  --border-alternate-subtle: #443e3c;
+  --border-alternate: #655f5c;
+  --border-alternate-medium: #88827f;
+  --border-alternate-strong: #aca6a3;
+  --text-alternate: #ffffff;
+  --text-alternate-secondary: #d6d0ce;
+  --text-alternate-tertiary: #8a8786;
+  --text-alternate-muted: #545352;
+  --text-alternate-disabled: #3b3b3b;
+  --color-canvas-100: #cecfe5;
+  --color-canvas-200: #abacc2;
+  --color-canvas-300: #8d8da4;
+  --color-canvas-400: #727289;
+  --color-canvas-500: #5a5a72;
+  --color-canvas-600: #45455c;
+  --color-canvas-700: #33324a;
+  --color-canvas-800: #232239;
+  --color-canvas-850: #15142b;
+  --color-canvas-900: #0b081f;
+  --color-canvas-950: #040215;
+  --surface-canvas-lowest: #0a0523;
+  --surface-canvas-lower: #1c1a37;
+  --surface-canvas-low: #31304c;
+  --surface-canvas: #474761;
+  --surface-canvas-high: #5f6077;
+  --surface-canvas-higher: #79798e;
+  --surface-canvas-highest: #9393a5;
+  --border-canvas-faint: #1f1f34;
+  --border-canvas-subtle: #3d3d54;
+  --border-canvas: #5d5e76;
+  --border-canvas-medium: #80809b;
+  --border-canvas-strong: #a4a5c0;
+  --text-canvas: #9595c6;
+  --text-canvas-secondary: #6b6b89;
+  --text-canvas-tertiary: #4e4f5e;
+  --text-canvas-muted: #3c3c41;
+  --text-canvas-disabled: #343435;
+  --page-bg: #15142b;
+  --page-bg-attachment: scroll;
+  --color-brand-100: #ffbad3;
+  --color-brand-200: #ff7bb3;
+  --color-brand-300: #ec4495;
+  --color-brand-400: #cf0b7a;
+  --color-brand-500: #a80062;
+  --color-brand-600: #84004b;
+  --color-brand-700: #640038;
+  --color-brand-800: #490027;
+  --color-brand-850: #320019;
+  --color-brand-900: #1f000d;
+  --color-brand-950: #100005;
+  --surface-brand-lowest: #1d000c;
+  --surface-brand-lower: #3e0020;
+  --surface-brand-low: #620037;
+  --surface-brand: #89004e;
+  --surface-brand-high: #b10067;
+  --surface-brand-higher: #cf3480;
+  --surface-brand-highest: #e0649a;
+  --border-brand-faint: #430024;
+  --border-brand-subtle: #760043;
+  --border-brand: #ae0065;
+  --border-brand-medium: #e9008a;
+  --border-brand-strong: #ff6cad;
+  --text-brand: #ff75b1;
+  --text-brand-secondary: #df2d88;
+  --text-brand-tertiary: #953b63;
+  --text-brand-muted: #5c3846;
+  --text-brand-disabled: #403337;
+  --color-accent-100: #98e1dd;
+  --color-accent-200: #70beba;
+  --color-accent-300: #4ba09c;
+  --color-accent-400: #248582;
+  --color-accent-500: #006b69;
+  --color-accent-600: #005351;
+  --color-accent-700: #003e3d;
+  --color-accent-800: #002c2b;
+  --color-accent-850: #001d1c;
+  --color-accent-900: #00100f;
+  --color-accent-950: #000606;
+  --surface-accent-lowest: #000f0e;
+  --surface-accent-lower: #002423;
+  --surface-accent-low: #003c3b;
+  --surface-accent: #005654;
+  --surface-accent-high: #00716f;
+  --surface-accent-higher: #3b8a87;
+  --surface-accent-highest: #66a29f;
+  --border-accent-faint: #002827;
+  --border-accent-subtle: #004a48;
+  --border-accent: #006f6d;
+  --border-accent-medium: #259592;
+  --border-accent-strong: #54bbb7;
+  --text-accent: #009d9a;
+  --text-accent-secondary: #1f7673;
+  --text-accent-tertiary: #2d5351;
+  --text-accent-muted: #2c3837;
+  --text-accent-disabled: #292a2a;
+  --color-special-100: #d2c8ff;
+  --color-special-200: #b19cff;
+  --color-special-300: #9673f5;
+  --color-special-400: #7d54db;
+  --color-special-500: #6634c4;
+  --color-special-600: #5407af;
+  --color-special-700: #3f0088;
+  --color-special-800: #2d0064;
+  --color-special-850: #1d0046;
+  --color-special-900: #10002d;
+  --color-special-950: #060019;
+  --surface-special-lowest: #0f002b;
+  --surface-special-lower: #250055;
+  --surface-special-low: #3d0084;
+  --surface-special: #5700b7;
+  --surface-special-high: #6c3bcb;
+  --surface-special-higher: #8161d8;
+  --surface-special-highest: #9983e4;
+  --border-special-faint: #29005c;
+  --border-special-subtle: #4b009f;
+  --border-special: #6b34ce;
+  --border-special-medium: #8c5df8;
+  --border-special-strong: #ac93ff;
+  --text-special: #baa9ff;
+  --text-special-secondary: #8665e0;
+  --text-special-tertiary: #5c4e8b;
+  --text-special-muted: #3e3a4f;
+  --text-special-disabled: #303032;
+  --color-info-100: #b4d4ff;
+  --color-info-200: #76b0ff;
+  --color-info-300: #398efa;
+  --color-info-400: #0571e0;
+  --color-info-500: #0059b6;
+  --color-info-600: #00458f;
+  --color-info-700: #00336d;
+  --color-info-800: #002350;
+  --color-info-850: #001637;
+  --color-info-900: #000b23;
+  --color-info-950: #000413;
+  --surface-info-lowest: #000a21;
+  --surface-info-lower: #001d44;
+  --surface-info-low: #00316b;
+  --surface-info: #004894;
+  --surface-info-high: #36639f;
+  --surface-info-higher: #5d7da8;
+  --surface-info-highest: #8497b1;
+  --border-info-faint: #00204a;
+  --border-info-subtle: #003d81;
+  --border-info: #005dbd;
+  --border-info-medium: #007efc;
+  --border-info-strong: #69a9ff;
+  --text-info: #8fbeff;
+  --text-info-secondary: #2f81e8;
+  --text-info-tertiary: #365d90;
+  --text-info-muted: #344051;
+  --text-info-disabled: #303133;
+  --color-success-100: #92e9a3;
+  --color-success-200: #69c67e;
+  --color-success-300: #42a75d;
+  --color-success-400: #0e8c3f;
+  --color-success-500: #007030;
+  --color-success-600: #005723;
+  --color-success-700: #004119;
+  --color-success-800: #002f0f;
+  --color-success-850: #001e08;
+  --color-success-900: #001103;
+  --color-success-950: #000701;
+  --surface-success-lowest: #001003;
+  --surface-success-lower: #00270b;
+  --surface-success-low: #004018;
+  --surface-success: #005a25;
+  --surface-success-high: #007733;
+  --surface-success-higher: #32914d;
+  --surface-success-highest: #61a870;
+  --border-success-faint: #002a0d;
+  --border-success-subtle: #004e1f;
+  --border-success: #007532;
+  --border-success-medium: #069e46;
+  --border-success-strong: #47c46b;
+  --text-success: #88f2a0;
+  --text-success-secondary: #2f974e;
+  --text-success-tertiary: #31673e;
+  --text-success-muted: #2c4530;
+  --text-success-disabled: #263429;
+  --color-warning-100: #ffc673;
+  --color-warning-200: #dfa13f;
+  --color-warning-300: #c08100;
+  --color-warning-400: #9c6900;
+  --color-warning-500: #7d5300;
+  --color-warning-600: #624000;
+  --color-warning-700: #4a2f00;
+  --color-warning-800: #352000;
+  --color-warning-850: #231400;
+  --color-warning-900: #140a00;
+  --color-warning-950: #090300;
+  --surface-warning-lowest: #130900;
+  --surface-warning-lower: #372200;
+  --surface-warning-low: #613f00;
+  --surface-warning: #8d5e00;
+  --surface-warning-high: #bc7f00;
+  --surface-warning-higher: #eea200;
+  --surface-warning-highest: #ffd395;
+  --border-warning-faint: #301d00;
+  --border-warning-subtle: #573900;
+  --border-warning: #825600;
+  --border-warning-medium: #af7600;
+  --border-warning-strong: #df9700;
+  --text-warning: #ffecd2;
+  --text-warning-secondary: #eba633;
+  --text-warning-tertiary: #a17e4c;
+  --text-warning-muted: #685d4d;
+  --text-warning-disabled: #4d4b4a;
+  --color-danger-100: #ffbeb8;
+  --color-danger-200: #ff847d;
+  --color-danger-300: #ec5552;
+  --color-danger-400: #d02d33;
+  --color-danger-500: #b0001c;
+  --color-danger-600: #8a0013;
+  --color-danger-700: #6a000c;
+  --color-danger-800: #4d0006;
+  --color-danger-850: #350003;
+  --color-danger-900: #210001;
+  --color-danger-950: #110000;
+  --surface-danger-lowest: #1f0001;
+  --surface-danger-lower: #410004;
+  --surface-danger-low: #67000b;
+  --surface-danger: #8f0014;
+  --surface-danger-high: #ba001e;
+  --surface-danger-higher: #cf4443;
+  --surface-danger-highest: #df6e68;
+  --border-danger-faint: #470005;
+  --border-danger-subtle: #7c0010;
+  --border-danger: #b6001d;
+  --border-danger-medium: #ea3039;
+  --border-danger-strong: #ff7872;
+  --text-danger: #ff635f;
+  --text-danger-secondary: #bb292f;
+  --text-danger-tertiary: #813b37;
+  --text-danger-muted: #543b39;
+  --text-danger-disabled: #3c3939;
+  --font-display: "Arvo", serif;
+  --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, sans-serif;
+  --font-serif: "GFS Didot", serif;
+  --font-mono: "fira-code", ui-monospace, "SF Mono", Menlo, Consolas, monospace, monospace;
+}
+
+/* Component aliases (production configs differing from defaults) */
+:root:root {
+  /* badge (my-badge) */
+  --badge-primary-text-font-size: var(--font-size-md);
+  --badge-primary-text-font-weight: var(--font-weight-normal);
+  --badge-accent-text-font-size: var(--font-size-md);
+  --badge-accent-text-font-weight: var(--font-weight-normal);
+  --badge-neutral-text-font-size: var(--font-size-md);
+  --badge-neutral-text-font-weight: var(--font-weight-normal);
+  --badge-alternate-text-font-size: var(--font-size-md);
+  --badge-alternate-text-font-weight: var(--font-weight-normal);
+  --badge-canvas-text-font-size: var(--font-size-md);
+  --badge-canvas-text-font-weight: var(--font-weight-normal);
+  --badge-special-text-font-size: var(--font-size-md);
+  --badge-special-text-font-weight: var(--font-weight-normal);
+  --badge-success-text-font-size: var(--font-size-md);
+  --badge-success-text-font-weight: var(--font-weight-normal);
+  --badge-warning-text-font-size: var(--font-size-md);
+  --badge-warning-text-font-weight: var(--font-weight-normal);
+  --badge-danger-text-font-size: var(--font-size-md);
+  --badge-danger-text-font-weight: var(--font-weight-normal);
+  --badge-info-text-font-size: var(--font-size-md);
+  --badge-info-text-font-weight: var(--font-weight-normal);
+  --badge-primary-padding-top: var(--space-6);
+  --badge-accent-padding-top: var(--space-6);
+  --badge-neutral-padding-top: var(--space-6);
+  --badge-alternate-padding-top: var(--space-6);
+  --badge-canvas-padding-top: var(--space-6);
+  --badge-special-padding-top: var(--space-6);
+  --badge-success-padding-top: var(--space-6);
+  --badge-warning-padding-top: var(--space-6);
+  --badge-danger-padding-top: var(--space-6);
+  --badge-info-padding-top: var(--space-6);
+  --badge-primary-padding-right: var(--space-10);
+  --badge-accent-padding-right: var(--space-10);
+  --badge-neutral-padding-right: var(--space-10);
+  --badge-alternate-padding-right: var(--space-10);
+  --badge-canvas-padding-right: var(--space-10);
+  --badge-special-padding-right: var(--space-10);
+  --badge-success-padding-right: var(--space-10);
+  --badge-warning-padding-right: var(--space-10);
+  --badge-danger-padding-right: var(--space-10);
+  --badge-info-padding-right: var(--space-10);
+  --badge-primary-padding-bottom: var(--space-6);
+  --badge-accent-padding-bottom: var(--space-6);
+  --badge-neutral-padding-bottom: var(--space-6);
+  --badge-alternate-padding-bottom: var(--space-6);
+  --badge-canvas-padding-bottom: var(--space-6);
+  --badge-special-padding-bottom: var(--space-6);
+  --badge-success-padding-bottom: var(--space-6);
+  --badge-warning-padding-bottom: var(--space-6);
+  --badge-danger-padding-bottom: var(--space-6);
+  --badge-info-padding-bottom: var(--space-6);
+  --badge-primary-padding-left: var(--space-10);
+  --badge-accent-padding-left: var(--space-10);
+  --badge-neutral-padding-left: var(--space-10);
+  --badge-alternate-padding-left: var(--space-10);
+  --badge-canvas-padding-left: var(--space-10);
+  --badge-special-padding-left: var(--space-10);
+  --badge-success-padding-left: var(--space-10);
+  --badge-warning-padding-left: var(--space-10);
+  --badge-danger-padding-left: var(--space-10);
+  --badge-info-padding-left: var(--space-10);
+
+  /* button (my-button) */
+  --button-primary-text-font-size: var(--font-size-md);
+  --button-primary-text-font-weight: var(--font-weight-semibold);
+  --button-primary-radius: var(--radius-xl);
+  --button-primary-hover-radius: var(--radius-xl);
+  --button-primary-disabled-radius: var(--radius-xl);
+  --button-secondary-text-font-size: var(--font-size-md);
+  --button-secondary-text-font-weight: var(--font-weight-semibold);
+  --button-secondary-radius: var(--radius-xl);
+  --button-secondary-hover-radius: var(--radius-xl);
+  --button-secondary-disabled-radius: var(--radius-xl);
+  --button-outline-text-font-size: var(--font-size-md);
+  --button-outline-text-font-weight: var(--font-weight-semibold);
+  --button-outline-radius: var(--radius-xl);
+  --button-outline-hover-radius: var(--radius-xl);
+  --button-outline-disabled-radius: var(--radius-xl);
+  --button-success-text-font-size: var(--font-size-md);
+  --button-success-text-font-weight: var(--font-weight-semibold);
+  --button-success-radius: var(--radius-xl);
+  --button-success-hover-radius: var(--radius-xl);
+  --button-success-disabled-radius: var(--radius-xl);
+  --button-danger-text-font-size: var(--font-size-md);
+  --button-danger-text-font-weight: var(--font-weight-semibold);
+  --button-danger-radius: var(--radius-xl);
+  --button-danger-hover-radius: var(--radius-xl);
+  --button-danger-disabled-radius: var(--radius-xl);
+  --button-warning-text-font-size: var(--font-size-md);
+  --button-warning-text-font-weight: var(--font-weight-semibold);
+  --button-warning-radius: var(--radius-xl);
+  --button-warning-hover-radius: var(--radius-xl);
+  --button-warning-disabled-radius: var(--radius-xl);
+
+  /* sectiondivider (my-section-divider) */
+  --sectiondivider-lg-padding: var(--space-4);
+  --sectiondivider-md-padding: var(--space-4);
+  --sectiondivider-sm-padding: var(--space-4);
+  --sectiondivider-sm-title-font-size: var(--font-size-2xl);
+  --sectiondivider-lg-title-font-weight: var(--font-weight-bold);
+  --sectiondivider-md-title-font-weight: var(--font-weight-bold);
+  --sectiondivider-sm-title-font-weight: var(--font-weight-bold);
+  --sectiondivider-lg-title-line-height: var(--line-height-md);
+  --sectiondivider-md-title-line-height: var(--line-height-md);
+  --sectiondivider-sm-title-line-height: var(--line-height-md);
+  --sectiondivider-lg-title-letter-padding: var(--letter-spacing-normal);
+  --sectiondivider-md-title-letter-padding: var(--letter-spacing-normal);
+  --sectiondivider-sm-title-letter-padding: var(--letter-spacing-normal);
+  --sectiondivider-md-title-outline-width: var(--border-width-4);
+  --sectiondivider-sm-title-outline-width: var(--border-width-4);
+  --sectiondivider-md-title-outline-color: var(--surface-accent-lowest);
+  --sectiondivider-lg-description: var(--text-alternate);
+  --sectiondivider-md-description-font-size: var(--font-size-lg);
+  --sectiondivider-sm-description-font-size: var(--font-size-5xl);
+  --sectiondivider-lg-description-font-weight: var(--font-weight-medium);
+  --sectiondivider-md-description-font-weight: var(--font-weight-medium);
+  --sectiondivider-sm-description-font-weight: var(--font-weight-medium);
+  --sectiondivider-md-radius: var(--radius-lg);
+  --sectiondivider-sm-radius: var(--radius-lg);
+  --sectiondivider-lg-border: transparent;
+  --sectiondivider-md-border: transparent;
+  --sectiondivider-sm-border: transparent;
+  --sectiondivider-lg-border-width: var(--border-width-1);
+  --sectiondivider-md-border-width: var(--border-width-1);
+  --sectiondivider-sm-border-width: var(--border-width-1);
+  --sectiondivider-sm-hairline-color: var(--border-brand-medium);
+  --sectiondivider-lg-hairline-color: var(--border-brand-medium);
+  --sectiondivider-md-hairline-color: var(--border-brand-medium);
+  --sectiondivider-lg-padding-top: var(--space-8);
+  --sectiondivider-md-padding-top: var(--space-8);
+  --sectiondivider-sm-padding-top: var(--space-8);
+  --sectiondivider-lg-padding-right: var(--space-4);
+  --sectiondivider-md-padding-right: var(--space-4);
+  --sectiondivider-sm-padding-right: var(--space-4);
+  --sectiondivider-lg-padding-bottom: var(--space-8);
+  --sectiondivider-md-padding-bottom: var(--space-8);
+  --sectiondivider-sm-padding-bottom: var(--space-8);
+  --sectiondivider-lg-padding-left: var(--space-0);
+  --sectiondivider-md-padding-left: var(--space-0);
+  --sectiondivider-sm-padding-left: var(--space-0);
+  --sectiondivider-lg-description-padding-top: var(--space-0);
+  --sectiondivider-md-description-padding-top: var(--space-0);
+  --sectiondivider-sm-description-padding-top: var(--space-0);
+  --sectiondivider-lg-description-padding-right: var(--space-0);
+  --sectiondivider-md-description-padding-right: var(--space-0);
+  --sectiondivider-sm-description-padding-right: var(--space-0);
+  --sectiondivider-lg-description-padding-bottom: var(--space-10);
+  --sectiondivider-md-description-padding-bottom: var(--space-10);
+  --sectiondivider-sm-description-padding-bottom: var(--space-10);
+  --sectiondivider-lg-description-padding-left: var(--space-0);
+  --sectiondivider-md-description-padding-left: var(--space-0);
+  --sectiondivider-sm-description-padding-left: var(--space-0);
+  --sectiondivider-lg-eyebrow: var(--text-brand);
+  --sectiondivider-lg-align: start;
+  --sectiondivider-sm-align: start;
+  --sectiondivider-md-align: start;
+  --sectiondivider-lg-eyebrow-display: block;
+  --sectiondivider-lg-description-display: flex;
+  --sectiondivider-lg-hairline: below-description;
+  --sectiondivider-lg-eyebrow-text-transform: none;
+  --sectiondivider-md-description-display: none;
+  --sectiondivider-sm-description-display: none;
+  --sectiondivider-sm-hairline: below-label;
+  --sectiondivider-lg-background: transparent;
+  --sectiondivider-md-background: transparent;
+  --sectiondivider-sm-background: transparent;
+  --sectiondivider-md-hairline: below-label;
+  --sectiondivider-lg-title-padding: var(--space-2);
+  --sectiondivider-md-title-padding: var(--space-2);
+  --sectiondivider-sm-title-padding: var(--space-2);
+  --sectiondivider-lg-title-padding-top: var(--space-2);
+  --sectiondivider-md-title-padding-top: var(--space-2);
+  --sectiondivider-sm-title-padding-top: var(--space-2);
+  --sectiondivider-lg-title-padding-right: var(--space-2);
+  --sectiondivider-md-title-padding-right: var(--space-2);
+  --sectiondivider-sm-title-padding-right: var(--space-2);
+  --sectiondivider-lg-title-padding-bottom: var(--space-2);
+  --sectiondivider-md-title-padding-bottom: var(--space-2);
+  --sectiondivider-sm-title-padding-bottom: var(--space-2);
+  --sectiondivider-lg-title-padding-left: var(--space-2);
+  --sectiondivider-md-title-padding-left: var(--space-0);
+  --sectiondivider-sm-title-padding-left: var(--space-2);
+}

package/src/component-editor/ImageEditor.svelte

@@ -1,74 +0,0 @@
-<script module lang="ts">
-  import type { Token } from './scaffolding/types';
-
-  export const component = 'image';
-
-  // Single object: image frame.
-  const states: Record<string, Token[]> = {
-    image: [
-      { label: 'border color', groupKey: 'border', variable: '--image-default-border' },
-      { label: 'border width', groupKey: 'width', variable: '--image-default-border-width' },
-      { label: 'corner radius', groupKey: 'radius', variable: '--image-default-radius' },
-      { label: 'image shadow', groupKey: 'shadow', variable: '--image-default-shadow' },
-    ],
-  };
-
-  export const allTokens: Token[] = Object.values(states).flat();
-</script>
-
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import Image from '../components/Image.svelte';
-  import VariantGroup from './scaffolding/VariantGroup.svelte';
-  import ComponentEditorBase from './scaffolding/ComponentEditorBase.svelte';
-  import demoImageUrl from '../assets/offering.webp';
-  import ShadowBackdrop from './scaffolding/ShadowBackdrop.svelte';
-  import UIPaletteSelector from '../ui/UIPaletteSelector.svelte';
-  import { setCssVar } from '../lib/cssVarSync';
-
-  const bgVar = '--backdrop-image-surface';
-
-  onMount(() => {
-    if (!document.documentElement.style.getPropertyValue(bgVar)) {
-      setCssVar(bgVar, 'var(--surface-canvas)');
-    }
-  });
-</script>
-
-<ComponentEditorBase {component} title="Image" description="Framed image with rounded corners, border, and shadow. Import from <code>components/Image.svelte</code>" tokens={allTokens}>
-  {#snippet config()}
-  
-      <label class="backdrop-config">
-        <span>Sample background</span>
-        <div class="picker-slot">
-          <UIPaletteSelector variable={bgVar} />
-        </div>
-      </label>
-    
-  {/snippet}
-  <VariantGroup name="image" title="Image" {states} {component}>
-    <ShadowBackdrop mode="color" colorVariable={bgVar}>
-      <div class="image-demo-grid">
-        <Image src={demoImageUrl} alt="Demo" variant="banner" />
-      </div>
-    </ShadowBackdrop>
-  </VariantGroup>
-</ComponentEditorBase>
-
-<style>
-  .image-demo-grid {
-    display: grid;
-    place-items: center;
-  }
-  .backdrop-config {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--ui-space-8);
-  }
-  .picker-slot {
-    min-width: 8rem;
-  }
-  .picker-slot :global(.ui-token-selector) {
-    width: 100%;
-  }
-</style>