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": {
|
||||
"import": "./src/assets/css/tailwind.css",
|
||||
"types": "./src/index.d.ts"
|
||||
},
|
||||
"./theme": {
|
||||
"import": "./src/assets/css/tailwind.css",
|
||||
"types": "./src/index.d.ts"
|
||||
}
|
||||
},
|
||||
"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;
|
||||
|
||||
--primary: #d4b278;
|
||||
--primary-fg: #0e0c08;
|
||||
--primary-fg: #fff8e8;
|
||||
|
||||
--warn: #e08840;
|
||||
--warn-subtle: #281808;
|
||||
|
|
@ -173,7 +173,7 @@
|
|||
}
|
||||
html {
|
||||
font-family: var(--font-sans);
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-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 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: {
|
||||
variant: {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { cva } from 'class-variance-authority'
|
|||
export { default as Button } from './Button.vue'
|
||||
|
||||
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: {
|
||||
variant: {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import type { Preview } from '@storybook/vue3-vite'
|
||||
import { useGlobals } from 'storybook/preview-api'
|
||||
import '@nychthemeron/library/theme'
|
||||
import '@nychthemeron/library/style'
|
||||
|
||||
const preview: Preview = {
|
||||
parameters: {
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export const WithLabels: Story = {
|
|||
return { honey, wine, laurel }
|
||||
},
|
||||
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;">
|
||||
<NychCheckbox v-model="honey" /> Honey
|
||||
</label>
|
||||
|
|
@ -85,7 +85,7 @@ export const Group: Story = {
|
|||
return { honey, wine, laurel }
|
||||
},
|
||||
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">
|
||||
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||||
<NychCheckbox v-model="honey" /> Honey
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ export const WithLabels: Story = {
|
|||
return { god }
|
||||
},
|
||||
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">
|
||||
<label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer;">
|
||||
<NychRadioGroupItem value="apollo" /> Apollo
|
||||
|
|
|
|||
Loading…
Reference in a new issue