Tweaked styling
This commit is contained in:
parent
38674be217
commit
9bb6bcad9f
GPG key ID:
3D64A2E70F58D07C
9 changed files with 8 additions and 908 deletions
|
|
@ -15,10 +15,6 @@
|
||||||
"./style": {
|
"./style": {
|
||||||
"import": "./src/assets/css/tailwind.css",
|
"import": "./src/assets/css/tailwind.css",
|
||||||
"types": "./src/index.d.ts"
|
"types": "./src/index.d.ts"
|
||||||
},
|
|
||||||
"./theme": {
|
|
||||||
"import": "./src/assets/css/tailwind.css",
|
|
||||||
"types": "./src/index.d.ts"
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"files": [
|
"files": [
|
||||||
|
|
|
||||||
|
|
@ -1,169 +0,0 @@
|
||||||
/* ============================================================
|
|
||||||
nychthemeron.css
|
|
||||||
Toggle themes by setting data-theme on <html>:
|
|
||||||
<html data-theme="hades">
|
|
||||||
<html data-theme="apollo">
|
|
||||||
============================================================ */
|
|
||||||
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500&display=swap');
|
|
||||||
|
|
||||||
/* ── HADES ───────────────────────────────────────────────── */
|
|
||||||
[data-theme='hades'] {
|
|
||||||
/* surfaces */
|
|
||||||
--surface-0: #18160f;
|
|
||||||
--surface-1: #28241a;
|
|
||||||
--surface-2: #2e2a1e;
|
|
||||||
--surface-3: #322e22;
|
|
||||||
--track: #32302a;
|
|
||||||
|
|
||||||
/* borders */
|
|
||||||
--border: #4a4538;
|
|
||||||
--border-hi: #5a5040;
|
|
||||||
--border-lo: #38342a;
|
|
||||||
|
|
||||||
/* primary */
|
|
||||||
--primary: #d4b278;
|
|
||||||
--primary-fg: #0e0c08;
|
|
||||||
|
|
||||||
/* semantic */
|
|
||||||
--warn: #e08840; /* phlegethon */
|
|
||||||
--warn-subtle: #281808;
|
|
||||||
--warn-border: #4a2c10;
|
|
||||||
--warn-fg: #fff8e8;
|
|
||||||
|
|
||||||
--danger: #7a1a1a; /* plague */
|
|
||||||
--danger-subtle: #200808;
|
|
||||||
--danger-border: #3a1010;
|
|
||||||
--danger-fg: #fff8e8;
|
|
||||||
|
|
||||||
--info: #88aec8; /* cocytus */
|
|
||||||
--info-subtle: #101e2c;
|
|
||||||
--info-border: #1e3850;
|
|
||||||
--info-fg: #0a1828;
|
|
||||||
|
|
||||||
--neutral: #7a6e60; /* acheron */
|
|
||||||
--neutral-fg: #fff8e8;
|
|
||||||
|
|
||||||
--success: #6aaa7a; /* laurel */
|
|
||||||
--success-subtle: #0e2214;
|
|
||||||
--success-border: #1e4228;
|
|
||||||
--success-fg: #fff8e8;
|
|
||||||
|
|
||||||
/* text */
|
|
||||||
--text-high: #f4f0e8;
|
|
||||||
--text-body: #d0c8b8;
|
|
||||||
--text-muted: #908878;
|
|
||||||
--text-dim: #807868;
|
|
||||||
--text-label: #c0b8a8;
|
|
||||||
|
|
||||||
/* focus ring */
|
|
||||||
--focus-ring: 0 0 0 3px rgba(212, 178, 120, 0.65);
|
|
||||||
|
|
||||||
/* fonts */
|
|
||||||
--font-serif: 'Cinzel', Georgia, serif;
|
|
||||||
--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
|
|
||||||
--font-mono: 'IBM Plex Mono', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── APOLLO ──────────────────────────────────────────────── */
|
|
||||||
[data-theme='apollo'] {
|
|
||||||
/* surfaces */
|
|
||||||
--surface-0: #faf7f2;
|
|
||||||
--surface-1: #f4f0e8;
|
|
||||||
--surface-2: #eee9df;
|
|
||||||
--surface-3: #e4ddd0;
|
|
||||||
--track: #e4ddd0;
|
|
||||||
|
|
||||||
/* borders */
|
|
||||||
--border: #bab2a0;
|
|
||||||
--border-hi: #c0b8a8;
|
|
||||||
--border-lo: #ccc4b4;
|
|
||||||
|
|
||||||
/* primary */
|
|
||||||
--primary: #b8860b;
|
|
||||||
--primary-fg: #fff8e8;
|
|
||||||
|
|
||||||
/* semantic */
|
|
||||||
--warn: #9a6020; /* harmony */
|
|
||||||
--warn-subtle: #fdf3e0;
|
|
||||||
--warn-border: #e8d0a0;
|
|
||||||
--warn-fg: #fff8e8;
|
|
||||||
|
|
||||||
--danger: #7a1a1a; /* plague */
|
|
||||||
--danger-subtle: #faeaea;
|
|
||||||
--danger-border: #c8a0a0;
|
|
||||||
--danger-fg: #fff8e8;
|
|
||||||
|
|
||||||
--info: #3a5a8a; /* oracle */
|
|
||||||
--info-subtle: #e8eef8;
|
|
||||||
--info-border: #b0c4e0;
|
|
||||||
--info-fg: #fff8e8;
|
|
||||||
|
|
||||||
--neutral: #8a8070; /* marble */
|
|
||||||
--neutral-fg: #fff8e8;
|
|
||||||
|
|
||||||
--success: #5a7a40; /* laurel */
|
|
||||||
--success-subtle: #eef4e8;
|
|
||||||
--success-border: #c0d4a8;
|
|
||||||
--success-fg: #fff8e8;
|
|
||||||
|
|
||||||
/* text */
|
|
||||||
--text-high: #1a1610;
|
|
||||||
--text-body: #3a3020;
|
|
||||||
--text-muted: #5a5040;
|
|
||||||
--text-dim: #8a8070;
|
|
||||||
--text-label: #5a5040;
|
|
||||||
|
|
||||||
/* focus ring */
|
|
||||||
--focus-ring: 0 0 0 3px rgba(184, 134, 11, 0.65);
|
|
||||||
|
|
||||||
/* fonts */
|
|
||||||
--font-serif: 'Cinzel', Georgia, serif;
|
|
||||||
--font-sans: 'IBM Plex Sans', system-ui, sans-serif;
|
|
||||||
--font-mono: 'IBM Plex Mono', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ── BASE RESET ──────────────────────────────────────────── */
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'],
|
|
||||||
[class^='nych-']::before,
|
|
||||||
[class^='nych-']::after {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
font-size: 14px;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-']:focus-visible {
|
|
||||||
outline: 2px solid transparent; /* visible in forced-colors / Windows High Contrast */
|
|
||||||
box-shadow: var(--focus-ring);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--surface-0);
|
|
||||||
color: var(--text-body);
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes nych-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.nych-loading-icon .wreath {
|
|
||||||
transform-origin: 340px 180px;
|
|
||||||
animation: nych-spin 2s linear infinite;
|
|
||||||
}
|
|
||||||
|
|
@ -77,7 +77,7 @@
|
||||||
--border-lo: #38342a;
|
--border-lo: #38342a;
|
||||||
|
|
||||||
--primary: #d4b278;
|
--primary: #d4b278;
|
||||||
--primary-fg: #0e0c08;
|
--primary-fg: #fff8e8;
|
||||||
|
|
||||||
--warn: #e08840;
|
--warn: #e08840;
|
||||||
--warn-subtle: #281808;
|
--warn-subtle: #281808;
|
||||||
|
|
@ -173,7 +173,7 @@
|
||||||
}
|
}
|
||||||
html {
|
html {
|
||||||
font-family: var(--font-sans);
|
font-family: var(--font-sans);
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,727 +0,0 @@
|
||||||
@import url('../css/nychthemeron.css');
|
|
||||||
|
|
||||||
/* Restore serif font for nych- components even if consumer overrides html font-family */
|
|
||||||
[class^='nych-'] {
|
|
||||||
font-family: var(--font-serif);
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-']:disabled {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-button'] {
|
|
||||||
padding: 7px;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0px 0px 10px var(--text-high);
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: box-shadow 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-button']:hover:not(:disabled) {
|
|
||||||
box-shadow: 0px 0px 8px var(--text-high);
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-button'][data-p~='loading'] {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-button'][data-p~='loading'] span {
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'][class$='-primary'] {
|
|
||||||
background-color: var(--primary);
|
|
||||||
color: var(--primary-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'][class$='-secondary'],
|
|
||||||
[class^='nych-'][class$='-muted'] {
|
|
||||||
background-color: var(--neutral);
|
|
||||||
color: var(--neutral-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'][class$='-info'] {
|
|
||||||
background-color: var(--info);
|
|
||||||
color: var(--info-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'][class$='-success'] {
|
|
||||||
background-color: var(--success);
|
|
||||||
color: var(--success-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'][class$='-warning'] {
|
|
||||||
background-color: var(--warn);
|
|
||||||
color: var(--warn-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'][class$='-danger'],
|
|
||||||
[class^='nych-'][class$='-error'] {
|
|
||||||
background-color: var(--danger);
|
|
||||||
color: var(--danger-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-loading-icon .wreath path {
|
|
||||||
fill: var(--primary-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-loading-icon .wreath line {
|
|
||||||
stroke: var(--text-high);
|
|
||||||
}
|
|
||||||
|
|
||||||
button[data-p~='loading'] > .nych-loading-icon {
|
|
||||||
margin-right: 5px;
|
|
||||||
margin-top: 0px;
|
|
||||||
height: 25px;
|
|
||||||
font-size: 12pt;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'][data-p~='small'] :not(svg, svg *) {
|
|
||||||
height: 15px !important;
|
|
||||||
font-size: 8pt !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'][data-p~='normal'] :not(svg, svg *) {
|
|
||||||
height: 25px !important;
|
|
||||||
font-size: 12pt !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^='nych-'][data-p~='large'] :not(svg, svg *) {
|
|
||||||
height: 40px !important;
|
|
||||||
font-size: 20pt !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
Text inputs — InputText, Textarea
|
|
||||||
============================================================ */
|
|
||||||
.nych-input,
|
|
||||||
.nych-textarea {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px 11px;
|
|
||||||
color: var(--text-body);
|
|
||||||
background-color: var(--surface-1);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 5px;
|
|
||||||
transition:
|
|
||||||
border-color 0.2s ease,
|
|
||||||
box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-input::placeholder,
|
|
||||||
.nych-textarea::placeholder {
|
|
||||||
color: var(--text-dim);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-input:hover:not(:disabled),
|
|
||||||
.nych-textarea:hover:not(:disabled) {
|
|
||||||
border-color: var(--border-hi);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-input:focus,
|
|
||||||
.nych-textarea:focus {
|
|
||||||
outline: none;
|
|
||||||
border-color: var(--primary);
|
|
||||||
box-shadow: var(--focus-ring);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-input[data-p~='invalid'],
|
|
||||||
.nych-textarea[data-p~='invalid'] {
|
|
||||||
border-color: var(--danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-input[data-p~='small'] {
|
|
||||||
padding: 5px 8px;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-input[data-p~='large'] {
|
|
||||||
padding: 11px 13px;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-textarea {
|
|
||||||
resize: vertical;
|
|
||||||
min-height: 84px;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
Checkbox
|
|
||||||
============================================================ */
|
|
||||||
.nych-checkbox,
|
|
||||||
.nych-radio {
|
|
||||||
position: relative;
|
|
||||||
display: inline-flex;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-checkbox-input,
|
|
||||||
.nych-radio-input {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-checkbox-box,
|
|
||||||
.nych-radio-box {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
background-color: var(--surface-1);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
transition:
|
|
||||||
background-color 0.2s ease,
|
|
||||||
border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-checkbox-box {
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-radio-box {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-checkbox:hover .nych-checkbox-box,
|
|
||||||
.nych-radio:hover .nych-radio-box {
|
|
||||||
border-color: var(--border-hi);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-checkbox[data-p-checked='true'] .nych-checkbox-box {
|
|
||||||
background-color: var(--primary);
|
|
||||||
border-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-checkbox-icon {
|
|
||||||
width: 13px;
|
|
||||||
height: 13px;
|
|
||||||
color: var(--primary-fg);
|
|
||||||
fill: var(--primary-fg);
|
|
||||||
stroke: var(--primary-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-checkbox[data-p-disabled='true'] .nych-checkbox-box,
|
|
||||||
.nych-radio[data-p-disabled='true'] .nych-radio-box {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Group containers (CheckboxGroup / RadioButtonGroup) — layout only. */
|
|
||||||
.nych-checkbox-group,
|
|
||||||
.nych-radio-group {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-checkbox-input:focus-visible + .nych-checkbox-box,
|
|
||||||
.nych-radio-input:focus-visible + .nych-radio-box {
|
|
||||||
box-shadow: var(--focus-ring);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Keep the visually-hidden native control hidden even when disabled — the
|
|
||||||
global [class^='nych-']:disabled opacity would otherwise reveal it. */
|
|
||||||
.nych-checkbox .nych-checkbox-input,
|
|
||||||
.nych-radio .nych-radio-input,
|
|
||||||
.nych-toggleswitch .nych-toggleswitch-input {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
Radio button
|
|
||||||
============================================================ */
|
|
||||||
.nych-radio-icon {
|
|
||||||
width: 9px;
|
|
||||||
height: 9px;
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: transparent;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-radio[data-p-checked='true'] .nych-radio-box {
|
|
||||||
border-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-radio[data-p-checked='true'] .nych-radio-icon {
|
|
||||||
background-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
Toggle switch
|
|
||||||
============================================================ */
|
|
||||||
.nych-toggleswitch {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
width: 44px;
|
|
||||||
height: 24px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-toggleswitch-input {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
opacity: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-toggleswitch-slider {
|
|
||||||
position: absolute;
|
|
||||||
inset: 0;
|
|
||||||
background-color: var(--track);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 999px;
|
|
||||||
transition:
|
|
||||||
background-color 0.2s ease,
|
|
||||||
border-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-toggleswitch-handle {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 3px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
background-color: var(--text-muted);
|
|
||||||
border-radius: 50%;
|
|
||||||
transition:
|
|
||||||
left 0.2s ease,
|
|
||||||
background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-toggleswitch[data-p-checked='true'] .nych-toggleswitch-slider {
|
|
||||||
background-color: var(--primary);
|
|
||||||
border-color: var(--primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-toggleswitch[data-p-checked='true'] .nych-toggleswitch-handle {
|
|
||||||
left: 25px;
|
|
||||||
background-color: var(--primary-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-toggleswitch-input:focus-visible + .nych-toggleswitch-slider {
|
|
||||||
box-shadow: var(--focus-ring);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-toggleswitch[data-p-disabled='true'] .nych-toggleswitch-slider,
|
|
||||||
.nych-toggleswitch[data-p-disabled='true'] .nych-toggleswitch-handle {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
Select
|
|
||||||
============================================================ */
|
|
||||||
.nych-select {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 8px;
|
|
||||||
min-width: 13rem;
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
padding: 8px 11px;
|
|
||||||
color: var(--text-body);
|
|
||||||
background-color: var(--surface-1);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition:
|
|
||||||
border-color 0.2s ease,
|
|
||||||
box-shadow 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select:hover {
|
|
||||||
border-color: var(--border-hi);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select[data-p~='focus'] {
|
|
||||||
border-color: var(--primary);
|
|
||||||
box-shadow: var(--focus-ring);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select[data-p~='disabled'] {
|
|
||||||
cursor: not-allowed;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-label {
|
|
||||||
flex: 1;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-label[data-p~='placeholder'] {
|
|
||||||
color: var(--text-dim);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-dropdown {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-dropdownIcon {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-overlay {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
margin-top: 4px;
|
|
||||||
background-color: var(--surface-2);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 6px;
|
|
||||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-list {
|
|
||||||
list-style: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 4px;
|
|
||||||
max-height: 14rem;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-option {
|
|
||||||
padding: 8px 11px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: var(--text-body);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.15s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-option[data-p-focused='true'],
|
|
||||||
.nych-select-option:hover {
|
|
||||||
background-color: var(--surface-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-option[data-p-selected='true'] {
|
|
||||||
background-color: var(--primary);
|
|
||||||
color: var(--primary-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-select-emptyMessage {
|
|
||||||
padding: 8px 11px;
|
|
||||||
color: var(--text-dim);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
Card
|
|
||||||
============================================================ */
|
|
||||||
.nych-card {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: var(--surface-1);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
|
|
||||||
overflow: hidden;
|
|
||||||
color: var(--text-body);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-card-header :where(img) {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-card-body {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-card-caption {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-card-title {
|
|
||||||
font-family: var(--font-serif);
|
|
||||||
font-size: 1.4rem;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
color: var(--text-high);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-card-subtitle {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
font-size: 0.95rem;
|
|
||||||
color: var(--text-muted);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-card-content {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-card-footer {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
padding-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
Message
|
|
||||||
============================================================ */
|
|
||||||
.nych-message {
|
|
||||||
color: var(--text-body);
|
|
||||||
background-color: var(--surface-1);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-left: 3px solid var(--border);
|
|
||||||
border-radius: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 11px 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message-icon {
|
|
||||||
display: flex;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message-text {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message-closeButton {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-left: auto;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
padding: 0;
|
|
||||||
color: inherit;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 0.7;
|
|
||||||
transition:
|
|
||||||
opacity 0.2s ease,
|
|
||||||
background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message-closeButton:hover {
|
|
||||||
opacity: 1;
|
|
||||||
background-color: rgba(128, 128, 128, 0.18);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message-closeIcon {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Severity tints are mixed from the semantic colour into the surface so they
|
|
||||||
read consistently in both the dark (Hades) and light (Apollo) themes,
|
|
||||||
rather than relying on the very-dark *-subtle tokens that muddied Hades. */
|
|
||||||
.nych-message[data-p~='info'] {
|
|
||||||
background-color: color-mix(in srgb, var(--info) 15%, var(--surface-1));
|
|
||||||
border-color: color-mix(in srgb, var(--info) 30%, var(--border));
|
|
||||||
border-left-color: var(--info);
|
|
||||||
}
|
|
||||||
.nych-message[data-p~='info'] .nych-message-icon {
|
|
||||||
color: var(--info);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message[data-p~='success'] {
|
|
||||||
background-color: color-mix(in srgb, var(--success) 15%, var(--surface-1));
|
|
||||||
border-color: color-mix(in srgb, var(--success) 30%, var(--border));
|
|
||||||
border-left-color: var(--success);
|
|
||||||
}
|
|
||||||
.nych-message[data-p~='success'] .nych-message-icon {
|
|
||||||
color: var(--success);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message[data-p~='warn'] {
|
|
||||||
background-color: color-mix(in srgb, var(--warn) 16%, var(--surface-1));
|
|
||||||
border-color: color-mix(in srgb, var(--warn) 32%, var(--border));
|
|
||||||
border-left-color: var(--warn);
|
|
||||||
}
|
|
||||||
.nych-message[data-p~='warn'] .nych-message-icon {
|
|
||||||
color: var(--warn);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message[data-p~='error'] {
|
|
||||||
background-color: color-mix(in srgb, var(--danger) 20%, var(--surface-1));
|
|
||||||
border-color: color-mix(in srgb, var(--danger) 38%, var(--border));
|
|
||||||
border-left-color: var(--danger);
|
|
||||||
}
|
|
||||||
.nych-message[data-p~='error'] .nych-message-icon {
|
|
||||||
color: var(--danger);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-message[data-p~='secondary'] {
|
|
||||||
background-color: var(--surface-2);
|
|
||||||
border-left-color: var(--neutral);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
Tag
|
|
||||||
============================================================ */
|
|
||||||
.nych-tag {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 3px 8px;
|
|
||||||
font-size: 0.8rem;
|
|
||||||
font-weight: 600;
|
|
||||||
letter-spacing: 0.03em;
|
|
||||||
line-height: 1;
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: var(--primary);
|
|
||||||
color: var(--primary-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-tag[data-p~='rounded'] {
|
|
||||||
border-radius: 999px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-tag-icon {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-tag[data-p~='secondary'] {
|
|
||||||
background-color: var(--neutral);
|
|
||||||
color: var(--neutral-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-tag[data-p~='info'] {
|
|
||||||
background-color: var(--info);
|
|
||||||
color: var(--info-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-tag[data-p~='success'] {
|
|
||||||
background-color: var(--success);
|
|
||||||
color: var(--success-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-tag[data-p~='warn'] {
|
|
||||||
background-color: var(--warn);
|
|
||||||
color: var(--warn-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-tag[data-p~='danger'] {
|
|
||||||
background-color: var(--danger);
|
|
||||||
color: var(--danger-fg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-tag[data-p~='contrast'] {
|
|
||||||
background-color: var(--text-high);
|
|
||||||
color: var(--surface-0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============================================================
|
|
||||||
Dialog
|
|
||||||
============================================================ */
|
|
||||||
.nych-dialog-mask {
|
|
||||||
position: fixed;
|
|
||||||
inset: 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 1rem;
|
|
||||||
background-color: rgba(0, 0, 0, 0.55);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-dialog {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
max-width: 92vw;
|
|
||||||
max-height: 90vh;
|
|
||||||
color: var(--text-body);
|
|
||||||
background-color: var(--surface-1);
|
|
||||||
border: 1px solid var(--border);
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-dialog-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-bottom: 1px solid var(--border-lo);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-dialog-title {
|
|
||||||
font-family: var(--font-serif);
|
|
||||||
font-size: 1.3rem;
|
|
||||||
letter-spacing: 0.02em;
|
|
||||||
color: var(--text-high);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-dialog-headerActions {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-dialog-headerActions button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
padding: 0;
|
|
||||||
color: var(--text-muted);
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition:
|
|
||||||
background-color 0.2s ease,
|
|
||||||
color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-dialog-headerActions button:hover {
|
|
||||||
color: var(--text-high);
|
|
||||||
background-color: var(--surface-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-dialog-headerActions button svg {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-dialog-content {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
padding: 20px;
|
|
||||||
line-height: 1.6;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nych-dialog-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
gap: 8px;
|
|
||||||
padding: 16px 20px;
|
|
||||||
border-top: 1px solid var(--border-lo);
|
|
||||||
}
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority'
|
||||||
export { default as Badge } from './Badge.vue'
|
export { default as Badge } from './Badge.vue'
|
||||||
|
|
||||||
export const badgeVariants = cva(
|
export const badgeVariants = cva(
|
||||||
'inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border border-transparent px-2 py-0.5 text-xs font-semibold [&>svg]:size-3',
|
'inline-flex w-fit shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-full border border-transparent px-2 py-0.5 text-xs font-serif font-semibold [&>svg]:size-3',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority'
|
||||||
export { default as Button } from './Button.vue'
|
export { default as Button } from './Button.vue'
|
||||||
|
|
||||||
export const buttonVariants = cva(
|
export const buttonVariants = cva(
|
||||||
'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg border border-transparent font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
|
'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap rounded-lg border border-transparent font-serif font-medium transition-all outline-none disabled:pointer-events-none disabled:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import type { Preview } from '@storybook/vue3-vite'
|
import type { Preview } from '@storybook/vue3-vite'
|
||||||
import { useGlobals } from 'storybook/preview-api'
|
import { useGlobals } from 'storybook/preview-api'
|
||||||
import '@nychthemeron/library/theme'
|
import '@nychthemeron/library/style'
|
||||||
|
|
||||||
const preview: Preview = {
|
const preview: Preview = {
|
||||||
parameters: {
|
parameters: {
|
||||||
|
|
|
||||||
|
|
@ -59,7 +59,7 @@ export const WithLabels: Story = {
|
||||||
return { honey, wine, laurel }
|
return { honey, wine, laurel }
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div style="display: flex; flex-direction: column; gap: 0.75rem; font-family: var(--font-sans); color: var(--text-body);">
|
<div style="display: flex; flex-direction: column; gap: 0.75rem; font-family: var(--font-serif); color: var(--text-body);">
|
||||||
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||||||
<NychCheckbox v-model="honey" /> Honey
|
<NychCheckbox v-model="honey" /> Honey
|
||||||
</label>
|
</label>
|
||||||
|
|
@ -85,7 +85,7 @@ export const Group: Story = {
|
||||||
return { honey, wine, laurel }
|
return { honey, wine, laurel }
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div style="font-family: var(--font-sans); color: var(--text-body);">
|
<div style="font-family: var(--font-serif); color: var(--text-body);">
|
||||||
<NychCheckboxGroup name="offerings">
|
<NychCheckboxGroup name="offerings">
|
||||||
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||||||
<NychCheckbox v-model="honey" /> Honey
|
<NychCheckbox v-model="honey" /> Honey
|
||||||
|
|
|
||||||
|
|
@ -51,7 +51,7 @@ export const WithLabels: Story = {
|
||||||
return { god }
|
return { god }
|
||||||
},
|
},
|
||||||
template: `
|
template: `
|
||||||
<div style="font-family: var(--font-sans); color: var(--text-body);">
|
<div style="font-family: var(--font-serif); color: var(--text-body);">
|
||||||
<NychRadioGroup v-model="god">
|
<NychRadioGroup v-model="god">
|
||||||
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||||||
<NychRadioGroupItem value="apollo" /> Apollo
|
<NychRadioGroupItem value="apollo" /> Apollo
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue