Skip to content

fix(presets): improve Matrix contrast, inverted surfaces, and stacked Toast rendering #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
carllosnc wants to merge 6 commits into
base: master
Choose a base branch
from
Open

fix(presets): improve Matrix contrast, inverted surfaces, and stacked Toast rendering #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
280e195
fix(presets): fix Matrix dark ds-0 and contrast ramp
carllosnc Nov 12, 2026
035f56f
fix(toast): keep stacked toasts opaque and apply preset surface tokens
carllosnc Nov 12, 2026
228c55d
style(presets): use default sans font in Matrix preset
carllosnc Nov 12, 2026
4fae4a2
docs(presets): update Matrix preset font metadata to sans-serif
carllosnc Nov 12, 2026
1de4f59
docs(customization): remove monospace mention from Matrix preset
carllosnc Nov 12, 2026
956e5c3
style(presets): refine Matrix light and dark surface elevation tones
carllosnc Nov 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/dashkit/Toast/Toast.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ function ToastItem({

const offset = index * 12;
const scale = 1 - index * 0.05;
const opacity = 1 - index * 0.2;
const opacity = index >= 3 ? 0 : 1;

return (
<motion.div
Expand All @@ -134,7 +134,7 @@ function ToastItem({
onFocus={() => pauseToastTimer(toast.id)}
onBlur={() => resumeToastTimer(toast.id)}
className={cn(
'group absolute w-full pointer-events-auto border ds-rounded shadow-2xl p-4 flex items-center gap-4 transition-shadow',
'group absolute w-full pointer-events-auto border ds-border-width ds-rounded shadow-2xl ds-card-shadow p-4 flex items-center gap-4 transition-shadow',
invert
? 'bg-ds-950 text-ds-50 border-ds-800 dark:bg-ds-0 dark:text-ds-950 dark:border-ds-200'
: 'bg-card text-card-foreground border-border',
Expand Down
115 changes: 57 additions & 58 deletions src/dashkit/presets/matrix.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,40 +2,39 @@
Dashkit Preset: Matrix
@preset matrix
@recommended-attrs class="dark" data-base="zinc" data-primary="green" data-preset="matrix"
@description Phosphor-green CRT terminal palette, 2px technical corners, monospace UI, subtle glow.
@description Phosphor-green CRT terminal palette, 2px technical corners, subtle glow.
───────────────────────────────────────────────────────────────────────────── */

[data-preset="matrix"] {
/* 1. Geometry, Typography & Surface Elevation */
/* 1. Geometry & Surface Elevation */
--radius: 0.125rem;
--ds-pill-radius: var(--radius-md);
--ds-border-width: 1px;
--ds-primary-gradient: none;
--ds-danger-gradient: none;
--font-sans: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);

--ds-button-border: #16a34a;
--ds-button-shadow: 0 0 10px -2px rgb(22 163 74 / 0.35);
--ds-button-outlined-shadow: 0 0 8px -2px rgb(22 163 74 / 0.2);
--ds-button-border: #15803d;
--ds-button-shadow: 0 0 10px -2px rgb(22 163 74 / 0.28);
--ds-button-outlined-shadow: 0 0 8px -2px rgb(22 163 74 / 0.14);
--ds-button-soft-shadow: none;
--ds-card-shadow: 0 0 20px -8px rgb(22 163 74 / 0.2);
--ds-input-shadow: inset 0 0 6px -2px rgb(22 163 74 / 0.15);
--ds-card-shadow: 0 1px 3px 0 rgb(5 46 22 / 0.06), 0 0 20px -8px rgb(22 163 74 / 0.14);
--ds-input-shadow: inset 0 1px 2px 0 rgb(5 46 22 / 0.04);

/* 2. Base Scale Override (Phosphor Green Monochromatic Ramp)
Ensures components using ds-0..ds-950 (Pagination, ProgressBar track,
ButtonGroup active state, Slider, Switch, Divider) match the CRT palette. */
--ds-color-0: #ecfdf5;
--ds-color-50: #ecfdf5;
--ds-color-100: #d1fae5;
--ds-color-200: #bbf7d0;
--ds-color-300: #86efac;
--ds-color-0: #fafdfb;
--ds-color-50: #f2f7f4;
--ds-color-100: #e4efe8;
--ds-color-200: #cfe5d7;
--ds-color-300: #94c9a9;
--ds-color-400: #4ade80;
--ds-color-500: #22c55e;
--ds-color-600: #16a34a;
--ds-color-700: #14532d;
--ds-color-800: #0a2612;
--ds-color-900: #05160a;
--ds-color-950: #020804;
--ds-color-500: #16a34a;
--ds-color-600: #166534;
--ds-color-700: #144328;
--ds-color-800: #0c2416;
--ds-color-900: #07140c;
--ds-color-950: #030705;

/* 3. Info Scale Override (Terminal Cyan-Emerald Tint) */
--ds-color-info-50: #ecfdf5;
Expand All @@ -51,35 +50,35 @@
--ds-color-info-950: #022c22;

/* 4. Core Surfaces & Borders (Light) */
--ds-bg: #ecfdf5;
--ds-bg: #f2f7f4;
--ds-fg: #052e16;
--ds-card: #f0fdf4;
--ds-card: #fafdfb;
--ds-card-fg: #052e16;
--ds-popover: #f0fdf4;
--ds-popover: #ffffff;
--ds-popover-fg: #052e16;
--ds-popover-border: #16a34a;
--ds-popover-item: #dcfce7;
--ds-popover-item-selected: #bbf7d0;
--ds-popover-border: #94c9a9;
--ds-popover-item: #ebf3ee;
--ds-popover-item-selected: #d1e7d9;
--ds-popover-item-selected-fg: #052e16;

--ds-border: #16a34a;
--ds-border-subtle: #86efac;
--ds-border: #94c9a9;
--ds-border-subtle: #cfe5d7;

/* 5. Interactive & Muted Tokens (Light) */
--ds-primary: #15803d;
--ds-primary-fg: #f0fdf4;
--ds-secondary: #dcfce7;
--ds-secondary: #e4efe8;
--ds-secondary-fg: #052e16;
--ds-muted: #dcfce7;
--ds-muted-fg: #15803d;
--ds-accent: #bbf7d0;
--ds-muted: #e4efe8;
--ds-muted-fg: #166534;
--ds-accent: #d1e7d9;
--ds-accent-fg: #052e16;
--ds-info: #059669;
--ds-info-fg: #ecfdf5;

/* 6. Form Controls & Charts (Light) */
--ds-input-bg: #f0fdf4;
--ds-input-border: #16a34a;
--ds-input-bg: #ffffff;
--ds-input-border: #84bfa0;
--ds-input-focus: #15803d;
--ds-input-fg: #052e16;
--ds-input-ring: #22c55e;
Expand All @@ -93,47 +92,47 @@

.dark[data-preset="matrix"],
.dark [data-preset="matrix"] {
/* Phosphor highlight for ds-0 elements (Slider thumb, inverted Tooltip/Toast) */
--ds-color-0: #4ade80;
/* Crisp phosphor-mint for ds-0 elements (Slider thumb, Switch thumb, inverted Tooltip/Toast) */
--ds-color-0: #dcfce7;

/* Core Surfaces & Borders (Dark CRT) */
--ds-bg: #020804;
--ds-bg: #030705;
--ds-fg: #4ade80;
--ds-card: #041007;
--ds-card: #07120c;
--ds-card-fg: #86efac;
--ds-popover: #051409;
--ds-popover: #0a1710;
--ds-popover-fg: #86efac;
--ds-popover-border: #15803d;
--ds-popover-item: #092210;
--ds-popover-item-selected: #14532d;
--ds-popover-item-selected-fg: #86efac;
--ds-popover-border: #1a4d2e;
--ds-popover-item: #11281b;
--ds-popover-item-selected: #163a25;
--ds-popover-item-selected-fg: #bbf7d0;

--ds-border: #14532d;
--ds-border-subtle: #0a2914;
--ds-border: #164229;
--ds-border-subtle: #0e2a1a;

/* Interactive & Muted Tokens (Dark CRT) */
--ds-primary: #22c55e;
--ds-primary-fg: #020804;
--ds-secondary: #0a2612;
--ds-primary-fg: #030705;
--ds-secondary: #102519;
--ds-secondary-fg: #86efac;
--ds-muted: #07190c;
--ds-muted-fg: #4ade80;
--ds-accent: #14532d;
--ds-accent-fg: #86efac;
--ds-muted: #0c1d13;
--ds-muted-fg: #22c55e;
--ds-accent: #163a25;
--ds-accent-fg: #bbf7d0;
--ds-info: #10b981;
--ds-info-fg: #020804;
--ds-info-fg: #030705;

/* Surface Elevation (Dark CRT Glow) */
--ds-button-border: #22c55e;
--ds-button-shadow: 0 0 12px -2px rgb(34 197 94 / 0.45);
--ds-button-outlined-shadow: 0 0 10px -2px rgb(34 197 94 / 0.25);
--ds-button-soft-shadow: 0 0 8px -2px rgb(34 197 94 / 0.2);
--ds-card-shadow: 0 0 24px -8px rgb(34 197 94 / 0.22);
--ds-input-shadow: inset 0 0 8px -2px rgb(34 197 94 / 0.18);
--ds-button-shadow: 0 0 12px -2px rgb(34 197 94 / 0.4);
--ds-button-outlined-shadow: 0 0 10px -2px rgb(34 197 94 / 0.2);
--ds-button-soft-shadow: 0 0 8px -2px rgb(34 197 94 / 0.16);
--ds-card-shadow: 0 0 28px -10px rgb(34 197 94 / 0.18), inset 0 1px 0 0 rgb(74 222 128 / 0.06);
--ds-input-shadow: inset 0 1px 4px 0 rgb(0 0 0 / 0.45), inset 0 0 8px -2px rgb(34 197 94 / 0.14);

/* Form Controls & Charts (Dark CRT) */
--ds-input-bg: #030c05;
--ds-input-border: #15803d;
--ds-input-bg: #040a07;
--ds-input-border: #1a4d2e;
--ds-input-focus: #22c55e;
--ds-input-fg: #86efac;
--ds-input-ring: #16a34a;
Expand Down
2 changes: 1 addition & 1 deletion src/pages/customization.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,5 +111,5 @@ Presets are token-override layers scoped to `[data-preset="<name>"]`:

- `src/dashkit/dashkit.css`: Base engine and default token values.
- `src/dashkit/presets/brutalist.css`: Neo-Brutalist preset (`--radius: 0rem`, `--ds-pill-radius: 0rem`, `--ds-border-width: 2px`, hard offset shadows).
- `src/dashkit/presets/matrix.css`: Cyber Terminal preset (`--radius: 0.125rem`, phosphor green palette, CRT glow shadows, monospace font).
- `src/dashkit/presets/matrix.css`: Cyber Terminal preset (`--radius: 0.125rem`, phosphor green palette, CRT glow shadows).
- `src/dashkit/presets/index.css`: Preset aggregator.
11 changes: 2 additions & 9 deletions src/partials/themeConfig.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -436,7 +436,7 @@ export const THEME_PRESETS: ThemePresetOption[] = [
label: 'Matrix',
tagline: 'Cyber terminal',
description:
'Phosphor-green terminal palette on deep OLED black, crisp 2px technical corners (0.125rem), flat surfaces, and full-interface monospace typography.',
'Phosphor-green terminal palette on deep OLED black, crisp 2px technical corners (0.125rem), and flat CRT surfaces.',
baseColor: 'zinc',
primaryColor: 'green',
darkBg: 'oled',
Expand All @@ -449,7 +449,7 @@ export const THEME_PRESETS: ThemePresetOption[] = [
xl: '2.6px (calc(0.125rem * 1.3333))',
'2xl': '3.3px (calc(0.125rem * 1.6667))',
},
fontLabel: 'JetBrains Mono (Monospace)',
fontLabel: 'Inter (Sans-serif)',
surfaceLabel: 'CRT Terminal Phosphor',
accentHex: '#22c55e',
presetFile: 'src/dashkit/presets/matrix.css',
Expand Down Expand Up @@ -563,13 +563,6 @@ export const THEME_PRESETS: ThemePresetOption[] = [
lightValue: '0 0 20px -8px rgb(22 163 74 / 0.2)',
darkValue: '0 0 24px -8px rgb(34 197 94 / 0.22)',
},
{
variable: '--font-sans',
category: 'Form & Geometry',
description: 'Global monospace font override',
lightValue: 'var(--font-mono)',
darkValue: 'var(--font-mono)',
},
],
cssSnippet: matrixCssRaw.trim(),
},
Expand Down
Loading