@gomiui/theme-dovisual 0.0.1

package/dist/theme.css

@@ -0,0 +1,666 @@
+/*
+ * @generated by `gomiui theme build` — do not edit manually.
+ * Source: src\dovisualTheme.ts
+ * Command: gomiui theme build src\dovisualTheme.ts --out dist\theme.css
+ * CLI: @gomiui/cli@0.0.2
+ * Core: @gomiui/core@0.0.1
+ */
+
+@layer reset {
+@scope ([data-gomiui-theme="dovisual"]) to ([data-gomiui-theme]) {
+  :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--font-family-heading);
+    color: var(--color-text-primary);
+  }
+
+  :where(h1) {
+    font-size: var(--font-size-2xl);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.3333;
+  }
+
+  :where(h2) {
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.4;
+  }
+
+  :where(h3) {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.4118;
+  }
+
+  :where(h4) {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.4286;
+  }
+
+  :where(h5) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.6667;
+  }
+
+  :where(h6) {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-semibold);
+    line-height: 1.6;
+  }
+
+  :where(p) {
+    font-family: var(--font-family-body);
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.4286;
+    color: var(--color-text-primary);
+  }
+
+  :where(small) {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-normal);
+    line-height: 1.6667;
+    color: var(--color-text-secondary);
+  }
+
+  :where(code, pre) {
+    font-family: var(--font-family-code);
+    font-size: var(--font-size-base);
+    line-height: 1.4286;
+  }
+
+  :where(hr) {
+    border: none;
+    border-top: 1px solid var(--color-border);
+  }
+}
+}
+
+@layer gomiui-theme {
+  :root { color-scheme: light dark; }
+  html[data-theme="light"] { color-scheme: light; }
+  html[data-theme="dark"] { color-scheme: dark; }
+
+@scope ([data-gomiui-theme="dovisual"]) to ([data-gomiui-theme]) {
+  :scope {
+    --font-size-4xs: 0.375rem;
+    --font-size-3xs: 0.4375rem;
+    --font-size-2xs: 0.5rem;
+    --font-size-xs: 0.625rem;
+    --font-size-sm: 0.75rem;
+    --font-size-base: 0.875rem;
+    --font-size-lg: 1.0625rem;
+    --font-size-xl: 1.25rem;
+    --font-size-2xl: 1.5rem;
+    --font-size-3xl: 1.8125rem;
+    --font-size-4xl: 2.1875rem;
+    --font-size-5xl: 2.625rem;
+    --text-heading-1-size: var(--font-size-2xl);
+    --text-heading-1-weight: var(--font-weight-semibold);
+    --text-heading-1-leading: 1.3333;
+    --text-heading-2-size: var(--font-size-xl);
+    --text-heading-2-weight: var(--font-weight-semibold);
+    --text-heading-2-leading: 1.4;
+    --text-heading-3-size: var(--font-size-lg);
+    --text-heading-3-weight: var(--font-weight-semibold);
+    --text-heading-3-leading: 1.4118;
+    --text-heading-4-size: var(--font-size-base);
+    --text-heading-4-weight: var(--font-weight-semibold);
+    --text-heading-4-leading: 1.4286;
+    --text-heading-5-size: var(--font-size-sm);
+    --text-heading-5-weight: var(--font-weight-semibold);
+    --text-heading-5-leading: 1.6667;
+    --text-heading-6-size: var(--font-size-xs);
+    --text-heading-6-weight: var(--font-weight-semibold);
+    --text-heading-6-leading: 1.6;
+    --text-body-size: var(--font-size-base);
+    --text-body-weight: var(--font-weight-normal);
+    --text-body-leading: 1.4286;
+    --text-large-size: var(--font-size-lg);
+    --text-large-weight: var(--font-weight-semibold);
+    --text-large-leading: 1.4118;
+    --text-label-size: var(--font-size-base);
+    --text-label-weight: var(--font-weight-medium);
+    --text-label-leading: 1.4286;
+    --text-code-size: var(--font-size-base);
+    --text-code-weight: var(--font-weight-normal);
+    --text-code-leading: 1.4286;
+    --text-supporting-size: var(--font-size-sm);
+    --text-supporting-weight: var(--font-weight-normal);
+    --text-supporting-leading: 1.6667;
+    --text-display-1-size: var(--font-size-5xl);
+    --text-display-1-weight: var(--font-weight-normal);
+    --text-display-1-leading: 1.2381;
+    --text-display-2-size: var(--font-size-4xl);
+    --text-display-2-weight: var(--font-weight-normal);
+    --text-display-2-leading: 1.2571;
+    --text-display-3-size: var(--font-size-3xl);
+    --text-display-3-weight: var(--font-weight-normal);
+    --text-display-3-leading: 1.3793;
+    --font-family-body: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-heading: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-family-code: "JetBrains Mono", "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    --color-accent: light-dark(#87E64B, #87E64B);
+    --color-accent-muted: light-dark(#25252a14, #f3f3f520);
+    --color-on-accent: light-dark(#ffffff, #25252a);
+    --color-neutral: light-dark(#25252a0f, #f3f3f51a);
+    --color-background-surface: light-dark(#E0E0E0, #1b1b1f);
+    --color-background-body: light-dark(#F2F2F2, #111015);
+    --color-overlay: light-dark(#25252a80, #28282acc);
+    --color-overlay-hover: light-dark(#25252a0d, #f3f3f50d);
+    --color-overlay-pressed: light-dark(#25252a1a, #f3f3f51a);
+    --color-background-muted: light-dark(#A9A9B2, #3b3b3f);
+    --color-text-primary: light-dark(#25252a, #f3f3f5);
+    --color-text-secondary: light-dark(#5e5e63, #ababb0);
+    --color-text-disabled: light-dark(#d7d7da, #5e5e61);
+    --color-text-accent: light-dark(#25252a, #f3f3f5);
+    --color-on-dark: #FFFFFF;
+    --color-on-light: light-dark(#25252a, #28282a);
+    --color-icon-accent: light-dark(#25252a, #f3f3f5);
+    --color-icon-primary: light-dark(#25252a, #f3f3f5);
+    --color-icon-secondary: light-dark(#83838a, #9d9da3);
+    --color-icon-disabled: light-dark(#d7d7da, #5e5e61);
+    --color-background-card: light-dark(#F7F7F7, #242325);
+    --color-background-popover: light-dark(#ffffff, #25252a);
+    --color-background-inverted: light-dark(#25252a, #f3f3f5);
+    --color-success: light-dark(#374c36, #b4cdb2);
+    --color-success-muted: light-dark(#d0e9ce, #b4cdb2);
+    --color-on-success: light-dark(#374c36, #d0e9ce);
+    --color-error: light-dark(#58413e, #dcc0bc);
+    --color-error-muted: light-dark(#f9dcd7, #dcc0bc);
+    --color-on-error: light-dark(#58413e, #f9dcd7);
+    --color-warning: light-dark(#524622, #d7c59c);
+    --color-warning-muted: light-dark(#f4e1b7, #d7c59c);
+    --color-on-warning: light-dark(#524622, #f4e1b7);
+    --color-border: light-dark(#e2e2e8, #f3f3f51a);
+    --color-border-emphasized: light-dark(#83838a, #5e5e61);
+    --color-skeleton: light-dark(#d4d4da, #5e5e64);
+    --color-shadow: light-dark(#25252a1a, #0000004d);
+    --color-background-blue: light-dark(#d7e4f5, #485362);
+    --color-border-blue: light-dark(#c9d6e7, #313c4a);
+    --color-icon-blue: light-dark(#3c4856, #d7e4f5);
+    --color-text-blue: light-dark(#3c4856, #d7e4f5);
+    --color-background-cyan: light-dark(#cce8e5, #3e5755);
+    --color-border-cyan: light-dark(#bedad7, #28403e);
+    --color-icon-cyan: light-dark(#334b49, #cce8e5);
+    --color-text-cyan: light-dark(#334b49, #cce8e5);
+    --color-background-gray: light-dark(#e2e2e8, #525257);
+    --color-border-gray: light-dark(#d4d4da, #3b3b3f);
+    --color-icon-gray: light-dark(#46464b, #e2e2e8);
+    --color-text-gray: light-dark(#46464b, #e2e2e8);
+    --color-background-green: light-dark(#d0e9ce, #425841);
+    --color-border-green: light-dark(#c2dbc0, #2b402b);
+    --color-icon-green: light-dark(#374c36, #d0e9ce);
+    --color-text-green: light-dark(#374c36, #d0e9ce);
+    --color-background-orange: light-dark(#ffdcbb, #684d32);
+    --color-border-orange: light-dark(#f1ceae, #4f361c);
+    --color-icon-orange: light-dark(#5b4227, #ffdcbb);
+    --color-text-orange: light-dark(#5b4227, #ffdcbb);
+    --color-background-pink: light-dark(#f0dde8, #5e4e57);
+    --color-border-pink: light-dark(#e2cfda, #463740);
+    --color-icon-pink: light-dark(#52424c, #f0dde8);
+    --color-text-pink: light-dark(#52424c, #f0dde8);
+    --color-background-purple: light-dark(#e8dff3, #564f60);
+    --color-border-purple: light-dark(#d9d1e5, #3f3949);
+    --color-icon-purple: light-dark(#4b4454, #e8dff3);
+    --color-text-purple: light-dark(#4b4454, #e8dff3);
+    --color-background-red: light-dark(#f9dcd7, #644d49);
+    --color-border-red: light-dark(#ebcec9, #4c3633);
+    --color-icon-red: light-dark(#58413e, #f9dcd7);
+    --color-text-red: light-dark(#58413e, #f9dcd7);
+    --color-background-teal: light-dark(#d4e7dc, #46564d);
+    --color-border-teal: light-dark(#c6d9ce, #303f36);
+    --color-icon-teal: light-dark(#3b4a41, #d4e7dc);
+    --color-text-teal: light-dark(#3b4a41, #d4e7dc);
+    --color-background-yellow: light-dark(#f4e1b7, #5e512d);
+    --color-border-yellow: light-dark(#e5d3a9, #463a18);
+    --color-icon-yellow: light-dark(#524622, #f4e1b7);
+    --color-text-yellow: light-dark(#524622, #f4e1b7);
+    --spacing-0-5: 4px;
+    --spacing-1: 8px;
+    --spacing-1-5: 12px;
+    --spacing-2: 16px;
+    --spacing-3: 24px;
+    --spacing-4: 32px;
+    --spacing-5: 40px;
+    --spacing-6: 48px;
+    --spacing-7: 56px;
+    --spacing-8: 64px;
+    --spacing-9: 72px;
+    --spacing-10: 80px;
+    --spacing-11: 88px;
+    --spacing-12: 96px;
+    --radius-inner: 8px;
+    --radius-element: 16px;
+    --radius-container: 24px;
+    --radius-page: 56px;
+    --radius-chat: 56px;
+    --shadow-low: 0 2px 4px #28282A0D, 0 4px 8px #28282A1A;
+    --shadow-med: 0 2px 4px #28282A0D, 0 4px 12px #28282A1A;
+    --shadow-high: 0 4px 6px #28282A1A, 0 12px 24px #28282A26;
+    --shadow-inset-hover: inset 0px 0px 0px 2px #28282A30;
+    --shadow-inset-selected: inset 0px 0px 0px 2px #28282A50;
+    --shadow-inset-success: inset 0px 0px 0px 2px #83838a30;
+    --shadow-inset-warning: inset 0px 0px 0px 2px #83838a30;
+    --shadow-inset-error: inset 0px 0px 0px 2px #83838a30;
+    --duration-fast-min: 95ms;
+    --duration-fast: 125ms;
+    --duration-fast-max: 165ms;
+    --duration-medium-min: 225ms;
+    --duration-medium: 300ms;
+    --duration-medium-max: 400ms;
+    --duration-slow-min: 525ms;
+    --duration-slow: 700ms;
+    --duration-slow-max: 935ms;
+    --color-syntax-keyword: light-dark(#645a72, #b2a7c1);
+    --color-syntax-string: light-dark(#4e6357, #9bb19a);
+    --color-syntax-comment: light-dark(#5e5e5e, #ababb0);
+    --color-syntax-number: light-dark(#755752, #bea792);
+    --color-syntax-function: light-dark(#506072, #99adc6);
+    --color-syntax-type: light-dark(#645a72, #b2a7c1);
+    --color-syntax-variable: light-dark(#5e5e5e, #ababb0);
+    --color-syntax-operator: light-dark(#5e5e5e, #ababb0);
+    --color-syntax-constant: light-dark(#755752, #bea792);
+    --color-syntax-tag: light-dark(#775751, #c7a39d);
+    --color-syntax-attribute: light-dark(#79693f, #b6aa90);
+    --color-syntax-property: light-dark(#4e6357, #94b2a0);
+    --color-syntax-punctuation: light-dark(#5e5e5e, #ababb0);
+    --color-syntax-background: light-dark(#f3f3f5, #171719);
+  }
+
+  .gomiui-heading.level-1 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-1-size);
+    font-weight: var(--text-heading-1-weight);
+    line-height: var(--text-heading-1-leading);
+  }
+
+  .gomiui-heading.level-2 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-2-size);
+    font-weight: var(--text-heading-2-weight);
+    line-height: var(--text-heading-2-leading);
+  }
+
+  .gomiui-heading.level-3 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-3-size);
+    font-weight: var(--text-heading-3-weight);
+    line-height: var(--text-heading-3-leading);
+  }
+
+  .gomiui-heading.level-4 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-4-size);
+    font-weight: var(--text-heading-4-weight);
+    line-height: var(--text-heading-4-leading);
+  }
+
+  .gomiui-heading.level-5 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-5-size);
+    font-weight: var(--text-heading-5-weight);
+    line-height: var(--text-heading-5-leading);
+  }
+
+  .gomiui-heading.level-6 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-heading-6-size);
+    font-weight: var(--text-heading-6-weight);
+    line-height: var(--text-heading-6-leading);
+  }
+
+  .gomiui-heading.display-1 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-1-size);
+    line-height: var(--text-display-1-leading);
+  }
+
+  .gomiui-heading.display-2 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-2-size);
+    line-height: var(--text-display-2-leading);
+  }
+
+  .gomiui-heading.display-3 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-3-size);
+    line-height: var(--text-display-3-leading);
+  }
+
+  .gomiui-text.body {
+    font-family: var(--font-family-body);
+    font-size: var(--text-body-size);
+    line-height: var(--text-body-leading);
+  }
+
+  .gomiui-text.large {
+    font-family: var(--font-family-body);
+    font-size: var(--text-large-size);
+    line-height: var(--text-large-leading);
+  }
+
+  .gomiui-text.label {
+    font-family: var(--font-family-body);
+    font-size: var(--text-label-size);
+    line-height: var(--text-label-leading);
+  }
+
+  .gomiui-text.code {
+    font-family: var(--font-family-code);
+    font-size: var(--text-code-size);
+    line-height: var(--text-code-leading);
+  }
+
+  .gomiui-text.supporting {
+    font-family: var(--font-family-body);
+    font-size: var(--text-supporting-size);
+    line-height: var(--text-supporting-leading);
+  }
+
+  .gomiui-text.display-1 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-1-size);
+    line-height: var(--text-display-1-leading);
+  }
+
+  .gomiui-text.display-2 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-2-size);
+    line-height: var(--text-display-2-leading);
+  }
+
+  .gomiui-text.display-3 {
+    font-family: var(--font-family-heading);
+    font-size: var(--text-display-3-size);
+    line-height: var(--text-display-3-leading);
+  }
+
+  .gomiui-button {
+    border-radius: var(--radius-full);
+    --_button-radius: var(--radius-full);
+  }
+
+  .gomiui-button.secondary {
+    background-color: transparent;
+    border-width: 1.5px;
+    border-style: solid;
+    border-color: var(--color-border-emphasized);
+  }
+
+  .gomiui-button.secondary:hover:where(:not(:disabled,[aria-disabled="true"])) {
+    background-color: var(--color-neutral);
+  }
+
+  .gomiui-button.destructive {
+    background-color: var(--color-background-red);
+    color: var(--color-text-red);
+  }
+
+  .gomiui-badge.info {
+    background-color: var(--color-background-blue);
+    color: var(--color-text-blue);
+  }
+
+  .gomiui-badge.neutral {
+    background-color: var(--color-background-gray);
+    color: var(--color-text-gray);
+  }
+
+  .gomiui-badge.success {
+    background-color: var(--color-background-green);
+    color: var(--color-text-green);
+  }
+
+  .gomiui-badge.warning {
+    background-color: var(--color-background-yellow);
+    color: var(--color-text-yellow);
+  }
+
+  .gomiui-badge.error {
+    background-color: var(--color-background-red);
+    color: var(--color-text-red);
+  }
+
+  .gomiui-banner.info {
+    --color-accent-muted: var(--color-background-blue);
+    --color-text-primary: var(--color-text-blue);
+    --color-text-secondary: var(--color-text-blue);
+    --color-accent: var(--color-text-blue);
+  }
+
+  .gomiui-banner.success {
+    --color-success-muted: var(--color-background-green);
+    --color-text-primary: var(--color-text-green);
+    --color-text-secondary: var(--color-text-green);
+    --color-success: var(--color-text-green);
+  }
+
+  .gomiui-banner.warning {
+    --color-warning-muted: var(--color-background-yellow);
+    --color-text-primary: var(--color-text-yellow);
+    --color-text-secondary: var(--color-text-yellow);
+    --color-warning: var(--color-text-yellow);
+  }
+
+  .gomiui-banner.error {
+    --color-error-muted: var(--color-background-red);
+    --color-text-primary: var(--color-text-red);
+    --color-text-secondary: var(--color-text-red);
+    --color-error: var(--color-text-red);
+  }
+
+  .gomiui-progressbar-fill.accent {
+    background-color: light-dark(#d7e4f5, #a0acbc);
+  }
+
+  .gomiui-progressbar-fill.success {
+    background-color: light-dark(#d0e9ce, #9ab298);
+  }
+
+  .gomiui-progressbar-fill.warning {
+    background-color: light-dark(#f4e1b7, #bbaa82);
+  }
+
+  .gomiui-progressbar-fill.error {
+    background-color: light-dark(#f9dcd7, #c0a5a0);
+  }
+
+  .gomiui-progressbar-track {
+    background-color: var(--color-skeleton);
+  }
+
+  .gomiui-switch {
+    --color-background-gray: var(--color-skeleton);
+  }
+
+  .gomiui-field-status.success {
+    background-color: var(--color-background-green);
+  }
+
+  .gomiui-field-status.warning {
+    background-color: var(--color-background-yellow);
+  }
+
+  .gomiui-field-status.error {
+    background-color: var(--color-background-red);
+  }
+
+  .gomiui-text-input.success {
+    --color-success: light-dark(#7f977e, #99b298);
+  }
+
+  .gomiui-text-input.warning {
+    --color-warning: light-dark(#9f8f68, #bbaa81);
+  }
+
+  .gomiui-text-input.error {
+    --color-error: light-dark(#a58b86, #c0a5a1);
+  }
+
+  .gomiui-textarea.success {
+    --color-success: light-dark(#7f977e, #99b298);
+  }
+
+  .gomiui-textarea.warning {
+    --color-warning: light-dark(#9f8f68, #bbaa81);
+  }
+
+  .gomiui-textarea.error {
+    --color-error: light-dark(#a58b86, #c0a5a1);
+  }
+
+  .gomiui-number-input.success {
+    --color-success: light-dark(#7f977e, #99b298);
+  }
+
+  .gomiui-number-input.warning {
+    --color-warning: light-dark(#9f8f68, #bbaa81);
+  }
+
+  .gomiui-number-input.error {
+    --color-error: light-dark(#a58b86, #c0a5a1);
+  }
+
+  .gomiui-date-input.success {
+    --color-success: light-dark(#7f977e, #99b298);
+  }
+
+  .gomiui-date-input.warning {
+    --color-warning: light-dark(#9f8f68, #bbaa81);
+  }
+
+  .gomiui-date-input.error {
+    --color-error: light-dark(#a58b86, #c0a5a1);
+  }
+
+  .gomiui-time-input.success {
+    --color-success: light-dark(#7f977e, #99b298);
+  }
+
+  .gomiui-time-input.warning {
+    --color-warning: light-dark(#9f8f68, #bbaa81);
+  }
+
+  .gomiui-time-input.error {
+    --color-error: light-dark(#a58b86, #c0a5a1);
+  }
+
+  .gomiui-selector.success {
+    --color-success: light-dark(#7f977e, #99b298);
+  }
+
+  .gomiui-selector.warning {
+    --color-warning: light-dark(#9f8f68, #bbaa81);
+  }
+
+  .gomiui-selector.error {
+    --color-error: light-dark(#a58b86, #c0a5a1);
+  }
+
+  .gomiui-multi-selector.success {
+    --color-success: light-dark(#7f977e, #99b298);
+  }
+
+  .gomiui-multi-selector.warning {
+    --color-warning: light-dark(#9f8f68, #bbaa81);
+  }
+
+  .gomiui-multi-selector.error {
+    --color-error: light-dark(#a58b86, #c0a5a1);
+  }
+
+  .gomiui-typeahead.success {
+    --color-success: light-dark(#7f977e, #99b298);
+  }
+
+  .gomiui-typeahead.warning {
+    --color-warning: light-dark(#9f8f68, #bbaa81);
+  }
+
+  .gomiui-typeahead.error {
+    --color-error: light-dark(#a58b86, #c0a5a1);
+  }
+
+  .gomiui-tokenizer.success {
+    --color-success: light-dark(#7f977e, #99b298);
+  }
+
+  .gomiui-tokenizer.warning {
+    --color-warning: light-dark(#9f8f68, #bbaa81);
+  }
+
+  .gomiui-tokenizer.error {
+    --color-error: light-dark(#a58b86, #c0a5a1);
+  }
+
+  .gomiui-card {
+    --gomiui-card-padding: var(--spacing-3);
+  }
+
+  .gomiui-section {
+    --gomiui-section-padding: var(--spacing-3);
+  }
+
+  .gomiui-text.primary { color: var(--color-text-primary); }
+
+  .gomiui-heading.primary { color: var(--color-text-primary); }
+
+  .gomiui-text.secondary { color: var(--color-text-secondary); }
+
+  .gomiui-heading.secondary { color: var(--color-text-secondary); }
+
+  .gomiui-text.disabled { color: var(--color-text-disabled); }
+
+  .gomiui-heading.disabled { color: var(--color-text-disabled); }
+
+  .gomiui-text.placeholder { color: var(--color-text-secondary); }
+
+  .gomiui-heading.placeholder { color: var(--color-text-secondary); }
+
+  .gomiui-text.accent { color: var(--color-text-accent); }
+
+  .gomiui-heading.accent { color: var(--color-text-accent); }
+
+  .gomiui-text.size-4xs { font-size: var(--font-size-4xs); }
+
+  .gomiui-text.size-3xs { font-size: var(--font-size-3xs); }
+
+  .gomiui-text.size-2xs { font-size: var(--font-size-2xs); }
+
+  .gomiui-text.xsm { font-size: var(--font-size-xs); }
+
+  .gomiui-text.sm { font-size: var(--font-size-sm); }
+
+  .gomiui-text.base { font-size: var(--font-size-base); }
+
+  .gomiui-text.lg { font-size: var(--font-size-lg); }
+
+  .gomiui-text.xl { font-size: var(--font-size-xl); }
+
+  .gomiui-text.size-2xl { font-size: var(--font-size-2xl); }
+
+  .gomiui-text.size-3xl { font-size: var(--font-size-3xl); }
+
+  .gomiui-text.size-4xl { font-size: var(--font-size-4xl); }
+}
+}
+
+@layer gomiui-theme {
+@scope ([data-gomiui-theme="dovisual"]) to ([data-gomiui-theme]) {
+  [data-gomiui-media="dark"] {
+    color-scheme: dark;
+    --color-text-primary: var(--color-on-dark);
+    --color-icon-primary: var(--color-on-dark);
+    --color-accent: var(--color-on-dark);
+  }
+
+  [data-gomiui-media="light"] {
+    color-scheme: light;
+    --color-text-primary: var(--color-on-light);
+    --color-icon-primary: var(--color-on-light);
+    --color-accent: var(--color-on-light);
+  }
+}
+}