748 lines
23 KiB
CSS
748 lines
23 KiB
CSS
/*
|
|
* @generated by `astryx theme build` — do not edit manually.
|
|
* Source: src/theme/loyalyTheme.ts
|
|
* Command: astryx theme build src/theme/loyalyTheme.ts
|
|
* Generated: 2026-08-10T08:15:31.619Z
|
|
*/
|
|
|
|
@layer reset {
|
|
@scope ([data-astryx-theme="loyaly"]) to ([data-astryx-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 astryx-theme {
|
|
:root { color-scheme: light dark; }
|
|
html[data-theme="light"] { color-scheme: light; }
|
|
html[data-theme="dark"] { color-scheme: dark; }
|
|
|
|
@scope ([data-astryx-theme="loyaly"]) to ([data-astryx-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;
|
|
--duration-fast-min: 90ms;
|
|
--duration-fast: 120ms;
|
|
--duration-fast-max: 160ms;
|
|
--duration-medium-min: 195ms;
|
|
--duration-medium: 260ms;
|
|
--duration-medium-max: 345ms;
|
|
--duration-slow-min: 450ms;
|
|
--duration-slow: 600ms;
|
|
--duration-slow-max: 800ms;
|
|
--font-family-body: var(--font-inter), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-family-heading: var(--font-sora), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
--font-family-code: ui-monospace, "SF Mono", Monaco, Consolas, monospace;
|
|
--color-syntax-keyword: light-dark(#700084, #efa8ff);
|
|
--color-syntax-string: light-dark(#005600, #a6d2a2);
|
|
--color-syntax-comment: light-dark(#737373, #a3a3a3);
|
|
--color-syntax-number: light-dark(#6e3500, #ffb37f);
|
|
--color-syntax-function: light-dark(#00458c, #a0caff);
|
|
--color-syntax-type: light-dark(#700084, #efa8ff);
|
|
--color-syntax-variable: light-dark(#171717, #e5e5e5);
|
|
--color-syntax-operator: light-dark(#737373, #a3a3a3);
|
|
--color-syntax-constant: light-dark(#6e3500, #ffb37f);
|
|
--color-syntax-tag: light-dark(#89001a, #ffaeaa);
|
|
--color-syntax-attribute: light-dark(#584400, #eec12f);
|
|
--color-syntax-property: light-dark(#005348, #83dac9);
|
|
--color-syntax-punctuation: light-dark(#a3a3a3, #525252);
|
|
--color-syntax-background: light-dark(#fafafa, #0a0a0a);
|
|
--color-background-surface: light-dark(#FFFFFF, #0F0F10);
|
|
--color-background-body: light-dark(#FAFAFA, #000000);
|
|
--color-background-card: light-dark(#FFFFFF, #171717);
|
|
--color-background-popover: light-dark(#FFFFFF, #171717);
|
|
--color-background-muted: light-dark(#F1F1F2, #202124);
|
|
--color-accent: light-dark(#262626, #202124);
|
|
--color-accent-muted: light-dark(#F1F1F2, #27272A);
|
|
--color-neutral: light-dark(#0000000F, #202124);
|
|
--color-overlay: light-dark(#00000080, #000000CC);
|
|
--color-overlay-hover: light-dark(#0000000D, #FFFFFF0F);
|
|
--color-overlay-pressed: light-dark(#0000001A, #FFFFFF1A);
|
|
--color-text-primary: light-dark(#171717, #FFFFFF);
|
|
--color-text-secondary: light-dark(#737373, #A1A1AA);
|
|
--color-text-disabled: light-dark(#A1A1AA, #71717A);
|
|
--color-text-accent: light-dark(#171717, #FFFFFF);
|
|
--color-on-dark: #FFFFFF;
|
|
--color-on-light: #171717;
|
|
--color-on-accent: light-dark(#FFFFFF, #FFFFFF);
|
|
--color-on-success: light-dark(#FFFFFF, #0A0A0A);
|
|
--color-on-error: light-dark(#FFFFFF, #0A0A0A);
|
|
--color-on-warning: #171717;
|
|
--color-icon-accent: light-dark(#171717, #FFFFFF);
|
|
--color-icon-primary: light-dark(#171717, #FFFFFF);
|
|
--color-icon-secondary: light-dark(#71717A, #A1A1AA);
|
|
--color-icon-disabled: light-dark(#A1A1AA, #71717A);
|
|
--color-success: light-dark(#15803D, #4ADE80);
|
|
--color-error: light-dark(#B91C1C, #F87171);
|
|
--color-warning: light-dark(#B45309, #FBBF24);
|
|
--color-success-muted: light-dark(#DCFCE7, #22C55E29);
|
|
--color-error-muted: light-dark(#FEE2E2, #EF444429);
|
|
--color-warning-muted: light-dark(#FEF3C7, #F59E0B29);
|
|
--color-border: light-dark(#E5E5E5, #2F2F2F);
|
|
--color-border-emphasized: light-dark(#D4D4D8, #3F3F46);
|
|
--color-skeleton: light-dark(#EBEBEB, #27272A);
|
|
--color-shadow: light-dark(#0000001A, #00000099);
|
|
--color-tint-hover: light-dark(black, white);
|
|
--color-background-red: light-dark(#facecb, #ff9e973D);
|
|
--color-border-red: light-dark(#e6bab8, #ff6f6c);
|
|
--color-icon-red: light-dark(#89001a, #ff9e97);
|
|
--color-text-red: light-dark(#89001a, #ffc6c1);
|
|
--color-background-orange: light-dark(#E4E4E7, #202124);
|
|
--color-border-orange: light-dark(#D4D4D8, #2F2F2F);
|
|
--color-icon-orange: light-dark(#52525B, #A1A1AA);
|
|
--color-text-orange: light-dark(#27272A, #E4E4E7);
|
|
--color-background-yellow: light-dark(#f8da9d, #deb4333D);
|
|
--color-border-yellow: light-dark(#e4c279, #c0990e);
|
|
--color-icon-yellow: light-dark(#584400, #deb433);
|
|
--color-text-yellow: light-dark(#584400, #fdcf4f);
|
|
--color-background-green: light-dark(#c5e5c0, #84c9803D);
|
|
--color-border-green: light-dark(#b2d1ac, #69ad67);
|
|
--color-icon-green: light-dark(#0c5700, #84c980);
|
|
--color-text-green: light-dark(#0c5700, #9fe59b);
|
|
--color-background-teal: light-dark(#E4E4E7, #202124);
|
|
--color-border-teal: light-dark(#D4D4D8, #2F2F2F);
|
|
--color-icon-teal: light-dark(#52525B, #A1A1AA);
|
|
--color-text-teal: light-dark(#27272A, #E4E4E7);
|
|
--color-background-cyan: light-dark(#E4E4E7, #202124);
|
|
--color-border-cyan: light-dark(#D4D4D8, #2F2F2F);
|
|
--color-icon-cyan: light-dark(#52525B, #A1A1AA);
|
|
--color-text-cyan: light-dark(#27272A, #E4E4E7);
|
|
--color-background-blue: light-dark(#E4E4E7, #202124);
|
|
--color-border-blue: light-dark(#D4D4D8, #2F2F2F);
|
|
--color-icon-blue: light-dark(#52525B, #A1A1AA);
|
|
--color-text-blue: light-dark(#27272A, #E4E4E7);
|
|
--color-background-purple: light-dark(#E4E4E7, #202124);
|
|
--color-border-purple: light-dark(#D4D4D8, #2F2F2F);
|
|
--color-icon-purple: light-dark(#52525B, #A1A1AA);
|
|
--color-text-purple: light-dark(#27272A, #E4E4E7);
|
|
--color-background-pink: light-dark(#E4E4E7, #202124);
|
|
--color-border-pink: light-dark(#D4D4D8, #2F2F2F);
|
|
--color-icon-pink: light-dark(#52525B, #A1A1AA);
|
|
--color-text-pink: light-dark(#27272A, #E4E4E7);
|
|
--color-background-gray: light-dark(#E4E4E7, #202124);
|
|
--color-border-gray: light-dark(#D4D4D8, #2F2F2F);
|
|
--color-icon-gray: light-dark(#52525B, #A1A1AA);
|
|
--color-text-gray: light-dark(#27272A, #E4E4E7);
|
|
--radius-none: 0.25rem;
|
|
--radius-inner: 0.375rem;
|
|
--radius-element: 0.5rem;
|
|
--radius-container: 0.75rem;
|
|
--radius-page: 1rem;
|
|
--radius-full: 9999px;
|
|
--shadow-low: 0 1px 2px light-dark(oklch(0 0 0 / 5%), oklch(0 0 0 / 60%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 6%));
|
|
--shadow-med: 0 2px 8px light-dark(oklch(0 0 0 / 8%), oklch(0 0 0 / 70%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 9%));
|
|
--shadow-high: 0 8px 24px light-dark(oklch(0 0 0 / 12%), oklch(0 0 0 / 80%)), inset 0 0 0 1px light-dark(transparent, oklch(1 0 0 / 12%));
|
|
--shadow-inset-hover: inset 0 0 0 2px #52525B;
|
|
--shadow-inset-selected: inset 0 0 0 2px #E4E4E7;
|
|
--shadow-inset-success: inset 0px 0px 0px 2px #1981004D;
|
|
--shadow-inset-warning: inset 0px 0px 0px 2px #ffce2f4D;
|
|
--shadow-inset-error: inset 0px 0px 0px 2px #e33f4a4D;
|
|
--color-background-inverted: light-dark(#171717, #E4E4E7);
|
|
--color-track: light-dark(#E4E4E7, #27272A);
|
|
--color-data-gray-1: light-dark(#E4E4E7, #3F3F46);
|
|
--color-data-gray-2: light-dark(#A1A1AA, #52525B);
|
|
--color-data-gray-3: light-dark(#71717A, #71717A);
|
|
--color-data-gray-4: light-dark(#52525B, #A1A1AA);
|
|
--color-data-gray-5: light-dark(#27272A, #E4E4E7);
|
|
--color-data-neutral: light-dark(#71717A, #52525B);
|
|
--color-data-categorical-blue: light-dark(#27272A, #E4E4E7);
|
|
--color-data-categorical-orange: light-dark(#52525B, #A1A1AA);
|
|
--color-data-categorical-green: light-dark(#71717A, #71717A);
|
|
--color-data-categorical-purple: light-dark(#A1A1AA, #52525B);
|
|
--color-data-categorical-cyan: light-dark(#D4D4D8, #3F3F46);
|
|
--color-data-categorical-red: light-dark(#27272A, #E4E4E7);
|
|
--color-data-categorical-teal: light-dark(#52525B, #A1A1AA);
|
|
--color-data-categorical-pink: light-dark(#71717A, #71717A);
|
|
--color-data-categorical-brown: light-dark(#A1A1AA, #52525B);
|
|
--color-data-categorical-indigo: light-dark(#D4D4D8, #3F3F46);
|
|
}
|
|
|
|
.astryx-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);
|
|
}
|
|
|
|
.astryx-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);
|
|
}
|
|
|
|
.astryx-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);
|
|
}
|
|
|
|
.astryx-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);
|
|
}
|
|
|
|
.astryx-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);
|
|
}
|
|
|
|
.astryx-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);
|
|
}
|
|
|
|
.astryx-text.body {
|
|
font-family: var(--font-family-body);
|
|
font-size: var(--text-body-size);
|
|
line-height: var(--text-body-leading);
|
|
}
|
|
|
|
.astryx-text.large {
|
|
font-family: var(--font-family-body);
|
|
font-size: var(--text-large-size);
|
|
line-height: var(--text-large-leading);
|
|
}
|
|
|
|
.astryx-text.label {
|
|
font-family: var(--font-family-body);
|
|
font-size: var(--text-label-size);
|
|
line-height: var(--text-label-leading);
|
|
}
|
|
|
|
.astryx-text.code {
|
|
font-family: var(--font-family-code);
|
|
font-size: var(--text-code-size);
|
|
line-height: var(--text-code-leading);
|
|
}
|
|
|
|
.astryx-text.supporting {
|
|
font-family: var(--font-family-body);
|
|
font-size: var(--text-supporting-size);
|
|
line-height: var(--text-supporting-leading);
|
|
}
|
|
|
|
.astryx-text.display-1 {
|
|
font-family: var(--font-family-heading);
|
|
font-size: var(--text-display-1-size);
|
|
line-height: var(--text-display-1-leading);
|
|
}
|
|
|
|
.astryx-text.display-2 {
|
|
font-family: var(--font-family-heading);
|
|
font-size: var(--text-display-2-size);
|
|
line-height: var(--text-display-2-leading);
|
|
}
|
|
|
|
.astryx-text.display-3 {
|
|
font-family: var(--font-family-heading);
|
|
font-size: var(--text-display-3-size);
|
|
line-height: var(--text-display-3-leading);
|
|
}
|
|
|
|
.astryx-button.destructive {
|
|
background-color: var(--color-error);
|
|
color: var(--color-on-error);
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: var(--color-error);
|
|
}
|
|
|
|
.astryx-button.destructive:hover {
|
|
filter: brightness(1.1);
|
|
}
|
|
|
|
.astryx-button.destructive:active {
|
|
filter: brightness(0.95);
|
|
}
|
|
|
|
.astryx-button.primary {
|
|
background-color: var(--color-text-primary);
|
|
color: var(--color-background-body);
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: var(--color-text-primary);
|
|
}
|
|
|
|
.astryx-button.primary:hover {
|
|
background-color: #E4E4E7;
|
|
border-color: #E4E4E7;
|
|
}
|
|
|
|
.astryx-button.primary:active {
|
|
background-color: #A1A1AA;
|
|
border-color: #A1A1AA;
|
|
}
|
|
|
|
.astryx-button.secondary {
|
|
background-color: var(--color-neutral);
|
|
color: var(--color-text-primary);
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
border-color: var(--color-border-emphasized);
|
|
}
|
|
|
|
.astryx-button.secondary:hover {
|
|
background-color: #27272A;
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.astryx-button.secondary:active {
|
|
background-color: var(--color-background-card);
|
|
}
|
|
|
|
.astryx-button.ghost:hover {
|
|
background-color: var(--color-overlay-hover);
|
|
}
|
|
|
|
.astryx-button.ghost:active {
|
|
background-color: var(--color-overlay-pressed);
|
|
}
|
|
|
|
.astryx-button:focus-visible {
|
|
outline: 2px solid var(--color-text-primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.astryx-button:disabled {
|
|
background-color: var(--color-background-card);
|
|
color: var(--color-text-disabled);
|
|
border-color: transparent;
|
|
opacity: 1;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.astryx-badge.info {
|
|
background-color: var(--color-background-gray);
|
|
color: var(--color-text-gray);
|
|
}
|
|
|
|
.astryx-badge.neutral {
|
|
background-color: var(--color-background-gray);
|
|
color: var(--color-text-gray);
|
|
}
|
|
|
|
.astryx-badge.success {
|
|
background-color: light-dark(#198100, #64af4c);
|
|
color: light-dark(#ffffff, #171717);
|
|
}
|
|
|
|
.astryx-badge.warning {
|
|
background-color: #ffce2f;
|
|
color: #171717;
|
|
}
|
|
|
|
.astryx-badge.error {
|
|
background-color: light-dark(#e33f4a, #ff705d);
|
|
color: light-dark(#ffffff, #171717);
|
|
}
|
|
|
|
.astryx-badge.red {
|
|
background-color: var(--color-background-red);
|
|
color: var(--color-text-red);
|
|
}
|
|
|
|
.astryx-badge.orange {
|
|
background-color: var(--color-background-orange);
|
|
color: var(--color-text-orange);
|
|
}
|
|
|
|
.astryx-badge.yellow {
|
|
background-color: var(--color-background-yellow);
|
|
color: var(--color-text-yellow);
|
|
}
|
|
|
|
.astryx-badge.green {
|
|
background-color: var(--color-background-green);
|
|
color: var(--color-text-green);
|
|
}
|
|
|
|
.astryx-badge.teal {
|
|
background-color: var(--color-background-teal);
|
|
color: var(--color-text-teal);
|
|
}
|
|
|
|
.astryx-badge.cyan {
|
|
background-color: var(--color-background-cyan);
|
|
color: var(--color-text-cyan);
|
|
}
|
|
|
|
.astryx-badge.blue {
|
|
background-color: var(--color-background-blue);
|
|
color: var(--color-text-blue);
|
|
}
|
|
|
|
.astryx-badge.purple {
|
|
background-color: var(--color-background-purple);
|
|
color: var(--color-text-purple);
|
|
}
|
|
|
|
.astryx-badge.pink {
|
|
background-color: var(--color-background-pink);
|
|
color: var(--color-text-pink);
|
|
}
|
|
|
|
.astryx-badge.gray {
|
|
background-color: var(--color-background-gray);
|
|
color: var(--color-text-gray);
|
|
}
|
|
|
|
.astryx-statusdot.success {
|
|
background-color: light-dark(#198100, #64af4c);
|
|
}
|
|
|
|
.astryx-statusdot.warning {
|
|
background-color: #ffce2f;
|
|
}
|
|
|
|
.astryx-statusdot.error {
|
|
background-color: light-dark(#e33f4a, #ff705d);
|
|
}
|
|
|
|
.astryx-statusdot.accent {
|
|
background-color: #A1A1AA;
|
|
}
|
|
|
|
.astryx-banner.info {
|
|
background-color: var(--color-background-blue);
|
|
--color-accent-muted: transparent;
|
|
--color-text-primary: var(--color-text-blue);
|
|
--color-text-secondary: var(--color-text-blue);
|
|
--color-accent: var(--color-text-blue);
|
|
}
|
|
|
|
.astryx-banner.success {
|
|
--color-text-primary: var(--color-text-green);
|
|
--color-text-secondary: var(--color-text-green);
|
|
--color-success: var(--color-text-green);
|
|
}
|
|
|
|
.astryx-banner.warning {
|
|
--color-text-primary: var(--color-text-yellow);
|
|
--color-text-secondary: var(--color-text-yellow);
|
|
--color-warning: var(--color-text-yellow);
|
|
}
|
|
|
|
.astryx-banner.error {
|
|
--color-text-primary: var(--color-text-red);
|
|
--color-text-secondary: var(--color-text-red);
|
|
--color-error: var(--color-text-red);
|
|
}
|
|
|
|
.astryx-switch {
|
|
--color-background-gray: var(--color-border-emphasized);
|
|
}
|
|
|
|
.astryx-progressbar {
|
|
--color-background-muted: var(--color-border-emphasized);
|
|
}
|
|
|
|
.astryx-progressbar.accent {
|
|
--color-accent: #E4E4E7;
|
|
}
|
|
|
|
.astryx-progressbar.success {
|
|
--color-success: #198100;
|
|
}
|
|
|
|
.astryx-progressbar.warning {
|
|
--color-warning: #ffce2f;
|
|
}
|
|
|
|
.astryx-progressbar.error {
|
|
--color-error: #e33f4a;
|
|
}
|
|
|
|
.astryx-card {
|
|
border-color: var(--color-border);
|
|
--astryx-card-padding: var(--spacing-6);
|
|
}
|
|
|
|
.astryx-section {
|
|
--astryx-section-padding: var(--spacing-3);
|
|
}
|
|
|
|
.astryx-text-input {
|
|
background-color: var(--color-background-body);
|
|
border-color: var(--color-border-emphasized);
|
|
}
|
|
|
|
.astryx-text-input:hover {
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.astryx-text-input:focus-within {
|
|
border-color: var(--color-text-primary);
|
|
outline: none;
|
|
}
|
|
|
|
.astryx-textarea {
|
|
background-color: var(--color-background-body);
|
|
border-color: var(--color-border-emphasized);
|
|
}
|
|
|
|
.astryx-textarea:hover {
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.astryx-textarea:focus-within {
|
|
border-color: var(--color-text-primary);
|
|
outline: none;
|
|
}
|
|
|
|
.astryx-number-input {
|
|
background-color: var(--color-background-body);
|
|
border-color: var(--color-border-emphasized);
|
|
}
|
|
|
|
.astryx-number-input:hover {
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.astryx-selector {
|
|
background-color: var(--color-background-body);
|
|
border-color: var(--color-border-emphasized);
|
|
}
|
|
|
|
.astryx-selector:hover {
|
|
border-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.astryx-dropdown-menu-item:hover {
|
|
background-color: var(--color-background-muted);
|
|
}
|
|
|
|
.astryx-dropdown-menu-item:focus-visible {
|
|
background-color: var(--color-background-muted);
|
|
outline: none;
|
|
}
|
|
|
|
.astryx-selector-option:hover {
|
|
background-color: var(--color-background-muted);
|
|
}
|
|
|
|
.astryx-selector-option.selected {
|
|
background-color: var(--color-background-muted);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.astryx-item:hover {
|
|
background-color: var(--color-background-muted);
|
|
}
|
|
|
|
.astryx-item.selected {
|
|
background-color: var(--color-background-muted);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.astryx-table-cell {
|
|
padding-inline-start: var(--spacing-3);
|
|
padding-inline-end: var(--spacing-3);
|
|
}
|
|
|
|
.astryx-table-cell:first-child {
|
|
padding-inline-start: var(--spacing-6);
|
|
}
|
|
|
|
.astryx-table-cell:last-child {
|
|
padding-inline-end: var(--spacing-8);
|
|
}
|
|
|
|
.astryx-table-header-cell {
|
|
padding-inline-start: var(--spacing-3);
|
|
padding-inline-end: var(--spacing-3);
|
|
}
|
|
|
|
.astryx-table-header-cell:first-child {
|
|
padding-inline-start: var(--spacing-6);
|
|
}
|
|
|
|
.astryx-table-header-cell:last-child {
|
|
padding-inline-end: var(--spacing-8);
|
|
}
|
|
|
|
.astryx-text.primary { color: var(--color-text-primary); }
|
|
|
|
.astryx-heading.primary { color: var(--color-text-primary); }
|
|
|
|
.astryx-text.secondary { color: var(--color-text-secondary); }
|
|
|
|
.astryx-heading.secondary { color: var(--color-text-secondary); }
|
|
|
|
.astryx-text.disabled { color: var(--color-text-disabled); }
|
|
|
|
.astryx-heading.disabled { color: var(--color-text-disabled); }
|
|
|
|
.astryx-text.placeholder { color: var(--color-text-secondary); }
|
|
|
|
.astryx-heading.placeholder { color: var(--color-text-secondary); }
|
|
|
|
.astryx-text.accent { color: var(--color-text-accent); }
|
|
|
|
.astryx-heading.accent { color: var(--color-text-accent); }
|
|
|
|
.astryx-text.size-4xs { font-size: var(--font-size-4xs); }
|
|
|
|
.astryx-text.size-3xs { font-size: var(--font-size-3xs); }
|
|
|
|
.astryx-text.size-2xs { font-size: var(--font-size-2xs); }
|
|
|
|
.astryx-text.xsm { font-size: var(--font-size-xs); }
|
|
|
|
.astryx-text.sm { font-size: var(--font-size-sm); }
|
|
|
|
.astryx-text.base { font-size: var(--font-size-base); }
|
|
|
|
.astryx-text.lg { font-size: var(--font-size-lg); }
|
|
|
|
.astryx-text.xl { font-size: var(--font-size-xl); }
|
|
|
|
.astryx-text.size-2xl { font-size: var(--font-size-2xl); }
|
|
|
|
.astryx-text.size-3xl { font-size: var(--font-size-3xl); }
|
|
|
|
.astryx-text.size-4xl { font-size: var(--font-size-4xl); }
|
|
}
|
|
}
|
|
|
|
@layer astryx-theme {
|
|
@scope ([data-astryx-theme="loyaly"]) to ([data-astryx-theme]) {
|
|
[data-astryx-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-astryx-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);
|
|
}
|
|
}
|
|
}
|