142 lines
4.6 KiB
CSS
142 lines
4.6 KiB
CSS
/*
|
|
* @generated by `astryx theme build` — do not edit manually.
|
|
* Source: src\theme\nearle.ts
|
|
* Command: astryx theme build src\theme\nearle.ts
|
|
* CLI: @astryxdesign/cli@0.4.5
|
|
* Core: @astryxdesign/core@0.4.5
|
|
*/
|
|
|
|
@layer reset {
|
|
@scope ([data-astryx-theme="nearle"]) 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(--text-heading-1-size);
|
|
font-weight: var(--text-heading-1-weight);
|
|
line-height: var(--text-heading-1-leading);
|
|
}
|
|
|
|
:where(h2) {
|
|
font-size: 20px;
|
|
font-weight: var(--text-heading-2-weight);
|
|
line-height: var(--text-heading-2-leading);
|
|
}
|
|
|
|
:where(h3) {
|
|
font-size: 17px;
|
|
font-weight: var(--text-heading-3-weight);
|
|
line-height: var(--text-heading-3-leading);
|
|
}
|
|
|
|
:where(h4) {
|
|
font-size: var(--text-heading-4-size);
|
|
font-weight: var(--text-heading-4-weight);
|
|
line-height: var(--text-heading-4-leading);
|
|
}
|
|
|
|
:where(h5) {
|
|
font-size: var(--text-heading-5-size);
|
|
font-weight: var(--text-heading-5-weight);
|
|
line-height: var(--text-heading-5-leading);
|
|
}
|
|
|
|
:where(h6) {
|
|
font-size: var(--text-heading-6-size);
|
|
font-weight: var(--text-heading-6-weight);
|
|
line-height: var(--text-heading-6-leading);
|
|
}
|
|
|
|
:where(p) {
|
|
font-family: var(--font-family-body);
|
|
font-size: 14px;
|
|
font-weight: var(--text-body-weight);
|
|
line-height: var(--text-body-leading);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
:where(small) {
|
|
font-size: var(--text-supporting-size);
|
|
font-weight: var(--text-supporting-weight);
|
|
line-height: var(--text-supporting-leading);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
:where(code, pre) {
|
|
font-family: var(--font-family-code);
|
|
font-size: var(--text-code-size);
|
|
line-height: var(--text-code-leading);
|
|
}
|
|
|
|
: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="nearle"]) to ([data-astryx-theme]) {
|
|
:scope {
|
|
--font-family-body: Inter, ui-sans-serif, system-ui, sans-serif;
|
|
--font-family-heading: Sora, ui-sans-serif, system-ui, sans-serif;
|
|
--font-family-code: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
|
|
--radius-element: 10px;
|
|
--radius-container: 14px;
|
|
--radius-page: 14px;
|
|
--radius-chat: 14px;
|
|
--text-body-size: 14px;
|
|
--text-label-size: 14px;
|
|
--text-large-size: 17px;
|
|
--text-heading-3-size: 17px;
|
|
--text-heading-2-size: 20px;
|
|
--color-accent: light-dark(var(--color-brand), #B57FD0);
|
|
--color-on-accent: light-dark(#FFFFFF, #1B1420);
|
|
--color-accent-muted: light-dark(#66258218, #B57FD024);
|
|
--color-text-accent: light-dark(var(--color-brand), #B57FD0);
|
|
--color-icon-accent: light-dark(var(--color-brand), #B57FD0);
|
|
--color-text-primary: light-dark(var(--color-slate-900), #ECE6F1);
|
|
--color-text-secondary: light-dark(var(--color-slate-500), #B3A8BD);
|
|
--color-text-disabled: light-dark(var(--color-slate-400), #85798F);
|
|
--color-background-surface: light-dark(#FFFFFF, #1C1724);
|
|
--color-background-body: light-dark(transparent, #14101A);
|
|
--color-background-card: light-dark(#FFFFFF, #1C1724);
|
|
--color-background-popover: light-dark(#FFFFFF, #241D2E);
|
|
--color-background-muted: light-dark(var(--color-slate-100), #241D2E);
|
|
--color-border: light-dark(var(--color-slate-200), #352C40);
|
|
--color-border-emphasized: light-dark(var(--color-slate-300), #4A3E58);
|
|
--color-skeleton: light-dark(var(--color-slate-100), #241D2E);
|
|
--color-success: light-dark(#10b981, #34D399);
|
|
--color-error: light-dark(#ef4444, #F87171);
|
|
--color-warning: light-dark(#f59e0b, #FBBF24);
|
|
--shadow-low: light-dark(0 2px 10px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(0, 0, 0, 0.45));
|
|
--shadow-med: light-dark(0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 14px 40px rgba(0, 0, 0, 0.55));
|
|
--shadow-high: light-dark(0 12px 28px -6px rgba(15, 23, 42, 0.12), 0 18px 50px rgba(0, 0, 0, 0.65));
|
|
}
|
|
}
|
|
}
|
|
|
|
@layer astryx-theme {
|
|
@scope ([data-astryx-theme="nearle"]) 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);
|
|
}
|
|
}
|
|
}
|