/**
* Sparkles Design System (spui) v1
* Framework-onafhankelijk HTML/CSS design system, geïnspireerd op shadcn/ui.
*
* Gebruik:
*
* of data-theme="dark"
*
* Namespace: .spui-* (componenten) — geen globale shop-styles overschrijven.
* Tokens: semantische shadcn-namen (--background, --primary, …).
*
* STABIEL: tokens + basiscomponenten in dit bestand.
* EXPERIMENTEEL: zie sectie "Experimental" onderaan (opt-in).
*/
/* ==========================================================================
1. Design tokens — Light theme (shadcn/ui OKLCH defaults)
========================================================================== */
:root,
[data-theme="light"],
.spui-root {
color-scheme: light;
/* Surfaces */
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
/* Brand / actions */
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
/* Subtle / muted */
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
/* Status */
--destructive: oklch(0.577 0.245 27.325);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.55 0.16 145);
--success-foreground: oklch(0.985 0 0);
--warning: oklch(0.75 0.15 75);
--warning-foreground: oklch(0.205 0 0);
--info: oklch(0.55 0.14 250);
--info-foreground: oklch(0.985 0 0);
/* Chrome */
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
/* Charts (shadcn) */
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
/* Radius — shadcn --radius */
--radius: 0.5rem;
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-full: 9999px;
/* Typography */
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--letter-spacing-tight: -0.025em;
/* Spacing scale (4px base) */
--space-0: 0;
--space-0-5: 0.125rem;
--space-1: 0.25rem;
--space-1-5: 0.375rem;
--space-2: 0.5rem;
--space-2-5: 0.625rem;
--space-3: 0.75rem;
--space-4: 1rem;
--space-5: 1.25rem;
--space-6: 1.5rem;
--space-8: 2rem;
--space-10: 2.5rem;
--space-12: 3rem;
--space-16: 4rem;
/* Shadows */
--shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.05);
--shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.1), 0 1px 2px -1px oklch(0 0 0 / 0.1);
--shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.1), 0 2px 4px -2px oklch(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1);
--shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.1), 0 8px 10px -6px oklch(0 0 0 / 0.1);
/* Z-index layers */
--z-base: 0;
--z-dropdown: 1000;
--z-sticky: 1100;
--z-fixed: 1200;
--z-modal-backdrop: 1300;
--z-modal: 1400;
--z-popover: 1500;
--z-toast: 1600;
--z-tooltip: 1700;
/* Motion */
--duration-fast: 150ms;
--duration-normal: 200ms;
--duration-slow: 300ms;
--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
/* Focus ring */
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
/* Control sizes */
--control-height-sm: 2rem;
--control-height-md: 2.5rem;
--control-height-lg: 2.75rem;
--control-px-sm: 0.75rem;
--control-px-md: 1rem;
--control-px-lg: 1.5rem;
}
/* ==========================================================================
2. Design tokens — Dark theme
========================================================================== */
[data-theme="dark"] {
color-scheme: dark;
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--success: oklch(0.65 0.15 145);
--success-foreground: oklch(0.145 0 0);
--warning: oklch(0.8 0.14 75);
--warning-foreground: oklch(0.145 0 0);
--info: oklch(0.65 0.12 250);
--info-foreground: oklch(0.145 0 0);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--shadow-xs: 0 1px 2px 0 oklch(0 0 0 / 0.3);
--shadow-sm: 0 1px 3px 0 oklch(0 0 0 / 0.4), 0 1px 2px -1px oklch(0 0 0 / 0.4);
--shadow-md: 0 4px 6px -1px oklch(0 0 0 / 0.4), 0 2px 4px -2px oklch(0 0 0 / 0.4);
--shadow-lg: 0 10px 15px -3px oklch(0 0 0 / 0.45), 0 4px 6px -4px oklch(0 0 0 / 0.4);
--shadow-xl: 0 20px 25px -5px oklch(0 0 0 / 0.5), 0 8px 10px -6px oklch(0 0 0 / 0.45);
}
/* Prefers-color-scheme fallback when geen data-theme is gezet */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--destructive-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
}
}
/* ==========================================================================
3. Scoped base / reset
Alleen binnen .spui-root of op .spui-* — geen globale * reset.
========================================================================== */
.spui-root {
background-color: var(--background);
color: var(--foreground);
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.spui-root *,
.spui-root *::before,
.spui-root *::after,
[class^="spui-"],
[class*=" spui-"] {
box-sizing: border-box;
}
.spui-root img,
.spui-root svg,
.spui-root video {
display: block;
max-width: 100%;
}
.spui-root button,
.spui-root input,
.spui-root select,
.spui-root textarea {
font: inherit;
}
/* ==========================================================================
4. Shared focus & disabled
========================================================================== */
.spui-focus-ring:focus-visible,
.spui-button:focus-visible,
.spui-input:focus-visible,
.spui-select:focus-visible,
.spui-tabs__trigger:focus-visible,
.spui-dialog__close:focus-visible {
outline: var(--focus-ring-width) solid var(--ring);
outline-offset: var(--focus-ring-offset);
}
.spui-button:disabled,
.spui-button[aria-disabled="true"],
.spui-input:disabled,
.spui-select:disabled,
.spui-tabs__trigger:disabled {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
/* ==========================================================================
5. Button
========================================================================== */
.spui-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: var(--control-height-md);
padding: 0 var(--control-px-md);
border: 1px solid transparent;
border-radius: var(--radius-md);
background-color: var(--primary);
color: var(--primary-foreground);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: 1;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
transition:
background-color var(--duration-fast) var(--ease-default),
color var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default),
opacity var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.spui-button:hover:not(:disabled):not([aria-disabled="true"]) {
background-color: color-mix(in oklch, var(--primary) 90%, transparent);
}
.spui-button--primary {
background-color: var(--primary);
color: var(--primary-foreground);
}
.spui-button--secondary {
background-color: var(--secondary);
color: var(--secondary-foreground);
}
.spui-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
background-color: color-mix(in oklch, var(--secondary) 80%, var(--foreground));
}
.spui-button--outline {
background-color: var(--background);
color: var(--foreground);
border-color: var(--border);
}
.spui-button--outline:hover:not(:disabled):not([aria-disabled="true"]) {
background-color: var(--accent);
color: var(--accent-foreground);
}
.spui-button--ghost {
background-color: transparent;
color: var(--foreground);
}
.spui-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
background-color: var(--accent);
color: var(--accent-foreground);
}
.spui-button--destructive {
background-color: var(--destructive);
color: var(--destructive-foreground);
}
.spui-button--destructive:hover:not(:disabled):not([aria-disabled="true"]) {
background-color: color-mix(in oklch, var(--destructive) 90%, transparent);
}
.spui-button--link {
height: auto;
padding: 0;
background: transparent;
color: var(--primary);
text-decoration: underline;
text-underline-offset: 4px;
}
.spui-button--link:hover:not(:disabled):not([aria-disabled="true"]) {
background: transparent;
opacity: 0.8;
}
.spui-button--sm {
height: var(--control-height-sm);
padding: 0 var(--control-px-sm);
font-size: var(--font-size-xs);
border-radius: var(--radius-sm);
}
.spui-button--lg {
height: var(--control-height-lg);
padding: 0 var(--control-px-lg);
font-size: var(--font-size-base);
}
.spui-button--icon {
width: var(--control-height-md);
padding: 0;
}
.spui-button--icon.spui-button--sm {
width: var(--control-height-sm);
}
.spui-button--icon.spui-button--lg {
width: var(--control-height-lg);
}
.spui-button--block {
display: flex;
width: 100%;
}
/* ==========================================================================
6. Label
========================================================================== */
.spui-label {
display: inline-block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
color: var(--foreground);
cursor: default;
}
.spui-label[for] {
cursor: pointer;
}
.spui-label--muted {
color: var(--muted-foreground);
font-weight: var(--font-weight-normal);
}
.spui-label + .spui-input,
.spui-label + .spui-select,
.spui-field .spui-label + * {
margin-top: var(--space-1-5);
}
/* ==========================================================================
7. Input
========================================================================== */
.spui-input {
display: flex;
width: 100%;
height: var(--control-height-md);
padding: 0 var(--space-3);
border: 1px solid var(--input);
border-radius: var(--radius-md);
background-color: transparent;
color: var(--foreground);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
transition:
border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.spui-input::placeholder {
color: var(--muted-foreground);
}
.spui-input:focus-visible {
border-color: var(--ring);
outline: var(--focus-ring-width) solid var(--ring);
outline-offset: 0;
}
.spui-input[aria-invalid="true"],
.spui-input.spui-input--invalid {
border-color: var(--destructive);
}
.spui-input[aria-invalid="true"]:focus-visible,
.spui-input.spui-input--invalid:focus-visible {
outline-color: var(--destructive);
}
.spui-input--sm {
height: var(--control-height-sm);
font-size: var(--font-size-xs);
}
.spui-input--lg {
height: var(--control-height-lg);
font-size: var(--font-size-base);
}
textarea.spui-input {
height: auto;
min-height: 5rem;
padding: var(--space-2) var(--space-3);
resize: vertical;
}
.spui-field {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
}
.spui-field__hint,
.spui-field__error {
font-size: var(--font-size-xs);
line-height: var(--line-height-normal);
}
.spui-field__hint {
color: var(--muted-foreground);
}
.spui-field__error {
color: var(--destructive);
}
/* ==========================================================================
8. Select / dropdown (native + custom listbox basis)
========================================================================== */
.spui-select {
display: flex;
width: 100%;
height: var(--control-height-md);
padding: 0 var(--space-8) 0 var(--space-3);
border: 1px solid var(--input);
border-radius: var(--radius-md);
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--space-3) center;
background-size: 1rem;
color: var(--foreground);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
appearance: none;
cursor: pointer;
transition:
border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.spui-select:focus-visible {
border-color: var(--ring);
outline: var(--focus-ring-width) solid var(--ring);
outline-offset: 0;
}
/* Custom dropdown panel (gebruik met JS of details/summary) */
.spui-dropdown {
position: relative;
display: inline-block;
}
.spui-dropdown__menu {
position: absolute;
top: calc(100% + var(--space-1));
left: 0;
z-index: var(--z-dropdown);
min-width: 12rem;
padding: var(--space-1);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background-color: var(--popover);
color: var(--popover-foreground);
box-shadow: var(--shadow-md);
}
.spui-dropdown__menu[hidden] {
display: none;
}
.spui-dropdown__item {
display: flex;
align-items: center;
width: 100%;
padding: var(--space-1-5) var(--space-2);
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: inherit;
font-size: var(--font-size-sm);
text-align: left;
cursor: pointer;
}
.spui-dropdown__item:hover,
.spui-dropdown__item:focus-visible,
.spui-dropdown__item[aria-selected="true"] {
background-color: var(--accent);
color: var(--accent-foreground);
outline: none;
}
.spui-dropdown__separator {
height: 1px;
margin: var(--space-1) 0;
background-color: var(--border);
border: 0;
}
/* ==========================================================================
9. Card
========================================================================== */
.spui-card {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background-color: var(--card);
color: var(--card-foreground);
box-shadow: var(--shadow-xs);
}
.spui-card__header {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
}
.spui-card__title {
margin: 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
}
.spui-card__description {
margin: 0;
font-size: var(--font-size-sm);
color: var(--muted-foreground);
line-height: var(--line-height-normal);
}
.spui-card__content {
font-size: var(--font-size-sm);
}
.spui-card__footer {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: auto;
}
/* ==========================================================================
10. Badge
========================================================================== */
.spui-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0.125rem 0.5rem;
border: 1px solid transparent;
border-radius: var(--radius-md);
background-color: var(--primary);
color: var(--primary-foreground);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-normal);
white-space: nowrap;
}
.spui-badge--secondary {
background-color: var(--secondary);
color: var(--secondary-foreground);
}
.spui-badge--outline {
background-color: transparent;
color: var(--foreground);
border-color: var(--border);
}
.spui-badge--destructive {
background-color: var(--destructive);
color: var(--destructive-foreground);
}
.spui-badge--muted {
background-color: var(--muted);
color: var(--muted-foreground);
}
.spui-badge--success {
background-color: var(--success);
color: var(--success-foreground);
}
/* ==========================================================================
11. Alert
========================================================================== */
.spui-alert {
position: relative;
width: 100%;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background-color: var(--background);
color: var(--foreground);
}
.spui-alert__title {
margin: 0 0 var(--space-1);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
}
.spui-alert__description {
margin: 0;
font-size: var(--font-size-sm);
color: var(--muted-foreground);
line-height: var(--line-height-relaxed);
}
.spui-alert--destructive {
border-color: color-mix(in oklch, var(--destructive) 50%, var(--border));
color: var(--destructive);
}
.spui-alert--destructive .spui-alert__description {
color: color-mix(in oklch, var(--destructive) 90%, var(--foreground));
}
.spui-alert--success {
border-color: color-mix(in oklch, var(--success) 50%, var(--border));
color: var(--success);
}
.spui-alert--warning {
border-color: color-mix(in oklch, var(--warning) 50%, var(--border));
color: color-mix(in oklch, var(--warning) 70%, var(--foreground));
}
.spui-alert--info {
border-color: color-mix(in oklch, var(--info) 50%, var(--border));
color: var(--info);
}
/* ==========================================================================
12. Dialog (basis — open via [open] of .spui-dialog--open)
========================================================================== */
.spui-dialog::backdrop {
background-color: oklch(0 0 0 / 0.5);
}
.spui-dialog {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: none;
place-items: center;
width: min(100% - 2rem, 32rem);
max-height: calc(100% - 2rem);
margin: auto;
padding: 0;
border: 1px solid var(--border);
border-radius: var(--radius-xl);
background-color: var(--background);
color: var(--foreground);
box-shadow: var(--shadow-lg);
overflow: auto;
}
.spui-dialog[open],
.spui-dialog.spui-dialog--open {
display: grid;
}
.spui-dialog__content {
display: flex;
flex-direction: column;
gap: var(--space-4);
padding: var(--space-6);
}
.spui-dialog__header {
display: flex;
flex-direction: column;
gap: var(--space-1-5);
padding-right: var(--space-8);
}
.spui-dialog__title {
margin: 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}
.spui-dialog__description {
margin: 0;
font-size: var(--font-size-sm);
color: var(--muted-foreground);
}
.spui-dialog__footer {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: var(--space-2);
}
.spui-dialog__close {
position: absolute;
top: var(--space-4);
right: var(--space-4);
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
padding: 0;
border: 0;
border-radius: var(--radius-sm);
background: transparent;
color: var(--muted-foreground);
cursor: pointer;
}
.spui-dialog__close:hover {
background-color: var(--accent);
color: var(--accent-foreground);
}
/* Non-