+
Usage
+
Paste this CSS into your project after the SLASHED import.
{`@import 'slashed/slashed.full.css';
diff --git a/configurator/src/components/panels/GenericTokenPanel.svelte b/configurator/src/components/panels/GenericTokenPanel.svelte
index 40d72fbc..6310a705 100644
--- a/configurator/src/components/panels/GenericTokenPanel.svelte
+++ b/configurator/src/components/panels/GenericTokenPanel.svelte
@@ -33,7 +33,7 @@
{domain} tokens
{#if modifiedCount > 0}
-
{modifiedCount} modified
+
{modifiedCount} modified
{/if}
@@ -42,11 +42,11 @@
placeholder={`Search ${domain} tokens…`}
value={query}
oninput={(e) => { query = (e.target as HTMLInputElement).value; }}
- class="w-full bg-white/5 border border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+ class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-3 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
/>
{#if filtered().length === 0}
- No tokens found
+ No tokens found
{:else}
{#each filtered().slice(0, 60) as t (t.name)}
@@ -58,7 +58,7 @@
/>
{/each}
{#if filtered().length > 60}
-
+
{filtered().length - 60} more — refine your search
{/if}
diff --git a/configurator/src/components/panels/HomePanel.svelte b/configurator/src/components/panels/HomePanel.svelte
index 3a695283..48218a06 100644
--- a/configurator/src/components/panels/HomePanel.svelte
+++ b/configurator/src/components/panels/HomePanel.svelte
@@ -68,13 +68,13 @@
-
- SLASHED Studio
+
+ SLASHED Studio
-
+
Configure every SLASHED design token visually. Changes appear live in the preview.
{#if overridesCount > 0}
- You have {overridesCount} active override{overridesCount !== 1 ? "s" : ""}.
+ You have {overridesCount} active override{overridesCount !== 1 ? "s" : ""}.
{:else}
Pick any domain below to get started.
{/if}
@@ -82,7 +82,7 @@
{#if overridesCount > 0}
@@ -98,19 +98,19 @@
{@const DomainIcon = d.icon}
@@ -155,28 +155,28 @@
bind:value={newName}
placeholder="Save current as…"
onkeydown={(e) => { if (e.key === "Enter") handleQuickSave(); }}
- class="flex-1 min-w-0 bg-white/5 border border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
+ class="flex-1 min-w-0 bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded-lg px-2 py-1.5 text-[11px] text-slate-800 dark:text-slate-200 placeholder:text-slate-600 focus:outline-none focus:border-indigo-500"
/>
No saved themes yet. Configure tokens, then save.
+ No saved themes yet. Configure tokens, then save.
{:else}
{#each savedThemes.slice(0, 6) as theme (theme.id)}
diff --git a/configurator/src/components/panels/LayoutPanel.svelte b/configurator/src/components/panels/LayoutPanel.svelte
index 89b8f2c7..8eddc9f3 100644
--- a/configurator/src/components/panels/LayoutPanel.svelte
+++ b/configurator/src/components/panels/LayoutPanel.svelte
@@ -90,7 +90,7 @@
-
Wide
+
Wide
-
+
{#each [
{ label: "narrow", value: containerNarrow, max: containerWide, unit: "rem" },
{ label: "prose", value: containerProse, max: containerWide * 1.5, unit: "ch" },
@@ -136,8 +136,8 @@
{ label: "wide", value: containerWide, max: containerWide, unit: "rem" },
] as row (row.label)}
-
{row.label}
-
+
{row.label}
+
-
+
@@ -186,7 +186,7 @@
{/if}
-
+
@@ -208,7 +208,7 @@
/>
-
Named sizes (grid-min-xs → 2xl)
+
Named sizes (grid-min-xs → 2xl)
{#each [
{ label: "xs", token: "--sf-grid-min-xs", def: 10 },
@@ -227,21 +227,21 @@
{/each}
-
Preview at 360px panel width
+
+
Preview at 360px panel width
{#each Array.from({ length: 8 }) as _, i (i)}
-
col
+
col
{/each}
{/if}
-
+
@@ -256,7 +256,7 @@
{#if showHeaderHeight}
-
+
{#each [1, 2, 3] as i (i)}
-
+
{/each}
-
{headerMobile}rem mobile · {headerDesktop}rem desktop
+
{headerMobile}rem mobile · {headerDesktop}rem desktop
{/if}
-
+
@@ -304,10 +304,10 @@
{showStickyOffset ? "▲" : "▼"}
{#if showStickyOffset}
- Offsets position:sticky elements below a fixed header. Defaults to header heights.
+ Offsets position:sticky elements below a fixed header. Defaults to header heights.
-
Desktop
+
Desktop
-
+
@@ -354,26 +354,26 @@
onChange={(v) => onSet("--sf-sidebar-width", `${v}rem`)}
onReset={() => onReset("--sf-sidebar-width")}
/>
-
+
- {sidebarWidth}rem
+ {sidebarWidth}rem
-
+
{/if}
-
+
-
+
@@ -401,7 +401,7 @@
onclick={() => { showMore = !showMore; }}
aria-expanded={showMore}
aria-controls="more-layout-primitives"
- class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-400 hover:text-slate-200 transition-colors cursor-pointer py-1"
+ class="w-full flex items-center justify-between text-[10px] font-semibold text-slate-600 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-200 transition-colors cursor-pointer py-1"
>
More layout primitives
{showMore ? "▲" : "▼"}
@@ -441,21 +441,21 @@
{ label: "Justify", token: "--sf-cluster-justify", def: "flex-start", opts: ["flex-start","center","flex-end","space-between","space-around"] },
] as row (row.token)}
- {row.label}
+ {row.label}
{#if row.token in overrides}
-
+
{/if}
{/each}
@@ -472,7 +472,7 @@
onReset={() => onReset("--sf-equal-min-col")}
/>
-
Named column counts (equal-min-col-2/3/4/6)
+
Named column counts (equal-min-col-2/3/4/6)
{#each [
{ label: "2-col", token: "--sf-equal-min-col-2", def: 28 },
@@ -506,15 +506,15 @@
Frame ratio
- --sf-frame-ratio — aspect ratio for .sf-frame
+ --sf-frame-ratio — aspect ratio for .sf-frame
{#each FRAME_PRESETS as r (r)}
{/each}
@@ -524,21 +524,21 @@
Reel
- --sf-reel-item-width — width of each item in a horizontal .sf-reel
+ --sf-reel-item-width — width of each item in a horizontal .sf-reel
{#each REEL_PRESETS as p (p.value)}
{/each}
- Height
+ Height
{#if "--sf-reel-height" in overrides}
-
+
{/if}
@@ -613,7 +613,7 @@
{/if}
@@ -627,7 +627,7 @@
{#if showNamedRatios}
-
Override the built-in named aspect ratios used by .sf-ratio-* utilities.
+
Override the built-in named aspect ratios used by .sf-ratio-* utilities.
{#each [
{ label: "Square", token: "--sf-ratio-square", def: "1" },
{ label: "Portrait", token: "--sf-ratio-portrait", def: "3 / 4" },
@@ -638,7 +638,7 @@
{ label: "Golden", token: "--sf-ratio-golden", def: "1.618 / 1" },
] as r (r.token)}
- {r.label}
+ {r.label}
{#if r.token in overrides}
-
+
{/if}
{/each}
@@ -658,7 +658,7 @@
{/if}
-
+
@@ -672,27 +672,27 @@
{#if showBgLayer}
-
Default values for the .sf-bg full-bleed background utility.
+
Default values for the .sf-bg full-bleed background utility.
{#each [
{ label: "Fit", token: "--sf-bg-fit", placeholder: "cover", opts: ["cover","contain","fill","none","scale-down"] },
{ label: "Position", token: "--sf-bg-position", placeholder: "50% 50%", opts: ["50% 50%","top","bottom","left","right","center"] },
] as row (row.token)}
- {row.label}
+ {row.label}
{#if row.token in overrides}
-
+
{/if}
{/each}
diff --git a/configurator/src/components/panels/MacrosPanel.svelte b/configurator/src/components/panels/MacrosPanel.svelte
index 62203918..577a59a0 100644
--- a/configurator/src/components/panels/MacrosPanel.svelte
+++ b/configurator/src/components/panels/MacrosPanel.svelte
@@ -70,11 +70,11 @@
-
- Tokens for the framework's utility macros — .sf-prose,
- .sf-flow, .sf-line-clamp,
- .sf-aspect, .sf-scroll-shadow
- and .sf-scrim.
+
+ Tokens for the framework's utility macros — .sf-prose,
+ .sf-flow, .sf-line-clamp,
+ .sf-aspect, .sf-scroll-shadow
+ and .sf-scrim.
@@ -98,7 +98,7 @@
currentRaw={overrides["--sf-flow-space"]}
onRawSet={(v) => onSet("--sf-flow-space", v)}
/>
-
+
{#each [0, 1, 2] as i (i)}
{/each}
@@ -106,7 +106,7 @@
{/if}
-
+
@@ -126,9 +126,9 @@
onChange={(v) => onSet("--sf-line-clamp", String(v))}
onReset={() => onReset("--sf-line-clamp")}
/>
-
+
SLASHED is a token-first CSS framework. This sample paragraph repeats so you
@@ -140,7 +140,7 @@
{/if}
-
+
@@ -153,29 +153,29 @@
{showAspect ? "▲" : "▼"}
{#if showAspect}
- --sf-aspect — default ratio for .sf-aspect / .sf-frame
+ --sf-aspect — default ratio for .sf-aspect / .sf-frame
{#each ASPECT_PRESETS as p (p.value)}
{/each}
-
+
{/if}
-
+
@@ -198,7 +198,7 @@
currentRaw={overrides["--sf-scroll-shadow-size"]}
onRawSet={(v) => onSet("--sf-scroll-shadow-size", v)}
/>
-
+
-
+
@@ -220,9 +220,9 @@
{showScrim ? "▲" : "▼"}
{#if showScrim}
- --sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim
+ --sf-scrim-color / --sf-scrim-direction — darkening gradient for .sf-scrim
-
Color
+
Color
{#if "--sf-scrim-color" in overrides}
-
+
{/if}
-
Direction
+
Direction
{#each SCRIM_DIRECTIONS as d (d.value)}
{/each}
-
Text shadow
+
Text shadow
{#if "--sf-scrim-text-shadow" in overrides}
-
+
{/if}
-
+
@@ -289,7 +289,7 @@
{showProse ? "▲" : "▼"}
{#if showProse}
- Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.
+ Spacing tokens for .sf-prose. Defaults track the space scale; sliders write rem overrides.
{#each PROSE_SPACE as t (t.token)}
onSet("--sf-prose-media-radius", v)}
/>
-
Marker color
+
Marker color
{#if "--sf-prose-marker-color" in overrides}
-
+
{/if}
- --sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages.
+
+ --sf-content-intrinsic-size — placeholder size used with content-visibility: auto to improve scroll performance on tall pages.
-
Intrinsic size
+
Intrinsic size
{#if "--sf-content-intrinsic-size" in overrides}
-
+
{/if}
-
+
- All tokens tab — edit every prose, scrim and surface token directly.
+ All tokens tab — edit every prose, scrim and surface token directly.
diff --git a/configurator/src/components/panels/MiscPanel.svelte b/configurator/src/components/panels/MiscPanel.svelte
index e8fc861a..faa73823 100644
--- a/configurator/src/components/panels/MiscPanel.svelte
+++ b/configurator/src/components/panels/MiscPanel.svelte
@@ -88,19 +88,19 @@
onReset={() => onReset("--sf-touch-target")}
/>
-
+
{touchTarget}px
-
Minimum interactive area — ensures accessibility on touch devices.
+
Minimum interactive area — ensures accessibility on touch devices.
{/if}
-
+
@@ -119,8 +119,8 @@
onclick={() => b.value === "smooth" ? onReset("--sf-scroll-behavior") : onSet("--sf-scroll-behavior", b.value)}
class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer ${
scrollBehavior === b.value
- ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
- : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+ ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+ : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
}`}
>
{b.label}
@@ -130,7 +130,7 @@
{/if}
-
+
@@ -150,22 +150,22 @@
onChange={(v) => onSet("--sf-z-base", String(v))}
onReset={() => onReset("--sf-z-base")}
/>
-
+
{#each Z_INDEX_STEPS as z (z.token)}
{@const isOverridden = z.token in overrides}
-
-
{z.label}
-
{z.note}
+
+
{z.label}
+
{z.note}
{z.token.replace("--sf-z-", "")}
{/each}
-
Override individual z-index tokens in the "All tokens" tab.
+
Override individual z-index tokens in the "All tokens" tab.
{/if}
-
+
@@ -180,7 +180,7 @@
{#if showTextSelection}
-
Selection background
+
Selection background
-
Selection text color
+
Selection text color
-
+
Select this text to preview the selection color.
@@ -214,7 +214,7 @@
{/if}
-
+
@@ -234,8 +234,8 @@
onclick={() => style === "solid" ? onReset("--sf-focus-ring-style") : onSet("--sf-focus-ring-style", style)}
class={`flex-1 py-2 rounded-lg text-[10px] border transition-all cursor-pointer capitalize ${
current === style
- ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
- : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+ ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+ : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
}`}
>
{style}
@@ -243,9 +243,9 @@
{/each}
-
+
Focus ring · {focusRingStyle}
@@ -254,7 +254,7 @@
{/if}
-
+
@@ -267,7 +267,7 @@
{showComponentSizes ? "▲" : "▼"}
{#if showComponentSizes}
-
+
Controls the height / tap-target of all sized components (buttons, inputs, badges).
@@ -283,7 +283,7 @@
{/each}
-
+
{#each SIZE_TOKENS as s (s.token)}
{@const val = getSizeValue(s)}
@@ -291,14 +291,14 @@
class="w-full bg-indigo-500/30 border border-indigo-500/30 rounded flex items-center justify-center"
style={`height: ${Math.min(val * 14, 64)}px`}
>
-
{s.label}
+
{s.label}
{/each}
-
+
@@ -312,7 +312,7 @@
{#if showCaretLinks}
-
Caret color
+
Caret color
- Underline thickness
+ Underline thickness
{#if "--sf-link-underline-thickness" in overrides}
-
+
{/if}
@@ -342,26 +342,26 @@
onclick={() => val === "auto" ? onReset("--sf-link-underline-thickness") : onSet("--sf-link-underline-thickness", val)}
class={`flex-1 py-1.5 rounded-lg text-[10px] border transition-all cursor-pointer ${
underlineThickness === val
- ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-200"
- : "border-white/8 text-slate-400 hover:bg-white/5 hover:text-slate-200"
+ ? "bg-indigo-500/15 border-indigo-500/40 text-indigo-800 dark:text-indigo-200"
+ : "border-black/8 dark:border-white/8 text-slate-600 dark:text-slate-400 hover:bg-black/5 dark:hover:bg-white/5 hover:text-slate-800 dark:hover:text-slate-200"
}`}
>{label}
{/each}
-
+
-
+
A e.preventDefault()}
- class="text-indigo-300"
+ class="text-indigo-700 dark:text-indigo-300"
style={`text-decoration:underline;text-underline-offset:${underlineOffset}em;text-decoration-thickness:${underlineThickness}`}
>sample link with the current underline settings.
@@ -369,7 +369,7 @@
{/if}
-
+
@@ -382,8 +382,8 @@
{showIconSizes ? "▲" : "▼"}
{#if showIconSizes}
-
- Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text.
+
+ Icon scale tokens used by .sf-icon-* utilities. Values are in em units relative to surrounding text.
{#each [
@@ -412,7 +412,7 @@
{/if}
-
+
@@ -425,24 +425,24 @@
{showObjectFit ? "▲" : "▼"}
{#if showObjectFit}
- Default values for .sf-media images and replaced elements.
+ Default values for .sf-media images and replaced elements.
-
Fit
+
Fit
{#each ["cover","contain","fill","none"] as v (v)}
{@const cur = overrides["--sf-object-fit"] ?? "cover"}
{/each}
{#if "--sf-object-fit" in overrides}
-
+
{/if}
- Position
+ Position
{#if "--sf-object-position" in overrides}
-
+
{/if}
{/if}
-
+
@@ -473,8 +473,8 @@
{showSafeArea ? "▲" : "▼"}
{#if showSafeArea}
-
- Default to the device's env(safe-area-inset-*). Override only if you need fixed padding regardless of notch/home-indicator.
+
+ Default to the device's env(safe-area-inset-*). Override only if you need fixed padding regardless of notch/home-indicator.
{#each [
@@ -484,7 +484,7 @@
{ label: "Left", token: "--sf-safe-left", placeholder: "env(safe-area-inset-left, 0px)" },
] as row (row.token)}
- {row.label}
+ {row.label}
{#if row.token in overrides}
-
+
{/if}
{/each}
@@ -504,7 +504,7 @@
{/if}
-
+
@@ -517,15 +517,15 @@
{showPrint ? "▲" : "▼"}
{#if showPrint}
- Applied inside @media print via optional/print.css.
+ Applied inside @media print via optional/print.css.
-
Page size
+
Page size
{#each ["a4","letter","legal","a3"] as v (v)}
{@const cur = overrides["--sf-print-page-size"] ?? "a4"}
{/each}
@@ -535,7 +535,7 @@
{ label: "Page margin", token: "--sf-print-page-margin", placeholder: "2cm" },
] as row (row.token)}
- {row.label}
+ {row.label}
{#if row.token in overrides}
-
+
{/if}
{/each}
{/if}
-
+
@@ -567,7 +567,7 @@
{showStateFlags ? "▲" : "▼"}
{#if showStateFlags}
-
+
Boolean CSS custom property flags (0 = off, 1 = on). Components toggle these to activate state-specific styles.
Overriding globally forces all matching elements into that state — useful for testing and demos.
@@ -585,20 +585,20 @@
aria-label={f.label}
aria-pressed={cur === "1"}
onclick={() => cur === "1" ? onReset(f.token) : onSet(f.token, "1")}
- class={`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${cur === "1" ? "bg-indigo-600" : "bg-white/10"}`}
+ class={`w-8 h-4 rounded-full transition-colors relative cursor-pointer shrink-0 ${cur === "1" ? "bg-indigo-600" : "bg-black/10 dark:bg-white/10"}`}
>
- {f.label}
- {f.note}
+ {f.label}
+ {f.note}
{#if f.token in overrides}
-
+
{/if}
- Required marker
+ Required marker
{#if "--sf-field-required-marker" in overrides}
-
+
{/if}
{/if}
-
+
-
+
Selection colors, caret, links, focus ring, borders and sizes all render in the
- live preview (try the Components template).
- Scroll behavior applies to the page
+ live preview (try the Components template).
+ Scroll behavior applies to the page
itself and can't be shown in the static canvas.
diff --git a/configurator/src/components/panels/MotionPanel.svelte b/configurator/src/components/panels/MotionPanel.svelte
index b25dff18..172b6820 100644
--- a/configurator/src/components/panels/MotionPanel.svelte
+++ b/configurator/src/components/panels/MotionPanel.svelte
@@ -94,9 +94,9 @@
-
+
-
Disable motion
+
Disable motion
Respects prefers-reduced-motion