@noxickon/onyx 6.1.0 → 6.1.2

package/dist/tokens/tones.css

@@ -0,0 +1,730 @@
+:root {
+  --primary: var(--color-primary-600);
+  --primary-fg: var(--fg-on-solid);
+  --primary-ink: var(--color-primary-400);
+  --primary-soft: color-mix(in oklab, var(--color-primary-500) 18%, transparent);
+  --primary-soft-fg: var(--color-primary-300);
+  --primary-outline: color-mix(in oklab, var(--color-primary-500) 42%, transparent);
+
+  --neutral: var(--color-neutral-700);
+  --neutral-fg: var(--fg-on-solid);
+  --neutral-ink: var(--color-neutral-400);
+  --neutral-soft: color-mix(in oklab, var(--color-neutral-500) 18%, transparent);
+  --neutral-soft-fg: var(--color-neutral-300);
+  --neutral-outline: color-mix(in oklab, var(--color-neutral-500) 42%, transparent);
+
+  --info: var(--color-info-700);
+  --info-fg: var(--fg-on-solid);
+  --info-ink: var(--color-info-400);
+  --info-soft: color-mix(in oklab, var(--color-info-500) 18%, transparent);
+  --info-soft-fg: var(--color-info-300);
+  --info-outline: color-mix(in oklab, var(--color-info-500) 42%, transparent);
+
+  --success: var(--color-success-700);
+  --success-fg: var(--fg-on-solid);
+  --success-ink: var(--color-success-400);
+  --success-soft: color-mix(in oklab, var(--color-success-500) 18%, transparent);
+  --success-soft-fg: var(--color-success-300);
+  --success-outline: color-mix(in oklab, var(--color-success-500) 42%, transparent);
+
+  --warning: var(--color-warning-700);
+  --warning-fg: var(--fg-on-solid);
+  --warning-ink: oklch(0.83 0.155 85);
+  --warning-soft: color-mix(in oklab, var(--color-warning-500) 18%, transparent);
+  --warning-soft-fg: var(--color-warning-300);
+  --warning-outline: color-mix(in oklab, var(--color-warning-500) 42%, transparent);
+
+  --danger: var(--color-danger-600);
+  --danger-fg: oklch(0.965 0.013 25);
+  --danger-ink: oklch(0.705 0.142 25);
+  --danger-soft: color-mix(in oklab, var(--color-danger-500) 18%, transparent);
+  --danger-soft-fg: var(--color-danger-300);
+  --danger-outline: color-mix(in oklab, var(--color-danger-500) 42%, transparent);
+
+  --trace-log: var(--color-trace-log-700);
+  --trace-log-fg: var(--fg-on-solid);
+  --trace-log-ink: var(--color-trace-log-400);
+  --trace-log-soft: color-mix(in oklab, var(--color-trace-log-500) 18%, transparent);
+  --trace-log-soft-fg: var(--color-trace-log-300);
+  --trace-log-outline: color-mix(in oklab, var(--color-trace-log-500) 42%, transparent);
+
+  --debug-log: var(--color-debug-log-700);
+  --debug-log-fg: var(--fg-on-solid);
+  --debug-log-ink: var(--color-debug-log-400);
+  --debug-log-soft: color-mix(in oklab, var(--color-debug-log-500) 18%, transparent);
+  --debug-log-soft-fg: var(--color-debug-log-300);
+  --debug-log-outline: color-mix(in oklab, var(--color-debug-log-500) 42%, transparent);
+
+  --info-log: var(--color-info-log-700);
+  --info-log-fg: var(--fg-on-solid);
+  --info-log-ink: var(--color-info-log-400);
+  --info-log-soft: color-mix(in oklab, var(--color-info-log-500) 18%, transparent);
+  --info-log-soft-fg: var(--color-info-log-300);
+  --info-log-outline: color-mix(in oklab, var(--color-info-log-500) 42%, transparent);
+
+  --warn-log: var(--color-warn-log-700);
+  --warn-log-fg: var(--fg-on-solid);
+  --warn-log-ink: var(--color-warn-log-400);
+  --warn-log-soft: color-mix(in oklab, var(--color-warn-log-500) 18%, transparent);
+  --warn-log-soft-fg: var(--color-warn-log-300);
+  --warn-log-outline: color-mix(in oklab, var(--color-warn-log-500) 42%, transparent);
+
+  --error-log: var(--color-error-log-600);
+  --error-log-fg: var(--fg-on-solid);
+  --error-log-ink: var(--color-error-log-400);
+  --error-log-soft: color-mix(in oklab, var(--color-error-log-500) 18%, transparent);
+  --error-log-soft-fg: var(--color-error-log-300);
+  --error-log-outline: color-mix(in oklab, var(--color-error-log-500) 42%, transparent);
+
+  --fatal-log: var(--color-fatal-log-600);
+  --fatal-log-fg: var(--fg-on-solid);
+  --fatal-log-ink: var(--color-fatal-log-400);
+  --fatal-log-soft: color-mix(in oklab, var(--color-fatal-log-500) 18%, transparent);
+  --fatal-log-soft-fg: var(--color-fatal-log-300);
+  --fatal-log-outline: color-mix(in oklab, var(--color-fatal-log-500) 42%, transparent);
+
+  --slate: var(--color-slate-700);
+  --slate-fg: var(--fg-on-solid);
+  --slate-ink: var(--color-slate-400);
+  --slate-soft: color-mix(in oklab, var(--color-slate-500) 18%, transparent);
+  --slate-soft-fg: var(--color-slate-300);
+  --slate-outline: color-mix(in oklab, var(--color-slate-500) 42%, transparent);
+
+  --gray: var(--color-gray-700);
+  --gray-fg: var(--fg-on-solid);
+  --gray-ink: var(--color-gray-400);
+  --gray-soft: color-mix(in oklab, var(--color-gray-500) 18%, transparent);
+  --gray-soft-fg: var(--color-gray-300);
+  --gray-outline: color-mix(in oklab, var(--color-gray-500) 42%, transparent);
+
+  --zinc: var(--color-zinc-700);
+  --zinc-fg: var(--fg-on-solid);
+  --zinc-ink: var(--color-zinc-400);
+  --zinc-soft: color-mix(in oklab, var(--color-zinc-500) 18%, transparent);
+  --zinc-soft-fg: var(--color-zinc-300);
+  --zinc-outline: color-mix(in oklab, var(--color-zinc-500) 42%, transparent);
+
+  --stone: var(--color-stone-700);
+  --stone-fg: var(--fg-on-solid);
+  --stone-ink: var(--color-stone-400);
+  --stone-soft: color-mix(in oklab, var(--color-stone-500) 18%, transparent);
+  --stone-soft-fg: var(--color-stone-300);
+  --stone-outline: color-mix(in oklab, var(--color-stone-500) 42%, transparent);
+
+  --red: var(--color-red-600);
+  --red-fg: var(--fg-on-solid);
+  --red-ink: var(--color-red-400);
+  --red-soft: color-mix(in oklab, var(--color-red-500) 18%, transparent);
+  --red-soft-fg: var(--color-red-300);
+  --red-outline: color-mix(in oklab, var(--color-red-500) 42%, transparent);
+
+  --sky: var(--color-sky-700);
+  --sky-fg: var(--fg-on-solid);
+  --sky-ink: var(--color-sky-400);
+  --sky-soft: color-mix(in oklab, var(--color-sky-500) 18%, transparent);
+  --sky-soft-fg: var(--color-sky-300);
+  --sky-outline: color-mix(in oklab, var(--color-sky-500) 42%, transparent);
+
+  --blue: var(--color-blue-700);
+  --blue-fg: var(--fg-on-solid);
+  --blue-ink: var(--color-blue-400);
+  --blue-soft: color-mix(in oklab, var(--color-blue-500) 18%, transparent);
+  --blue-soft-fg: var(--color-blue-300);
+  --blue-outline: color-mix(in oklab, var(--color-blue-500) 42%, transparent);
+
+  --indigo: var(--color-indigo-700);
+  --indigo-fg: var(--fg-on-solid);
+  --indigo-ink: var(--color-indigo-400);
+  --indigo-soft: color-mix(in oklab, var(--color-indigo-500) 18%, transparent);
+  --indigo-soft-fg: var(--color-indigo-300);
+  --indigo-outline: color-mix(in oklab, var(--color-indigo-500) 42%, transparent);
+
+  --violet: var(--color-violet-600);
+  --violet-fg: var(--fg-on-solid);
+  --violet-ink: var(--color-violet-400);
+  --violet-soft: color-mix(in oklab, var(--color-violet-500) 18%, transparent);
+  --violet-soft-fg: var(--color-violet-300);
+  --violet-outline: color-mix(in oklab, var(--color-violet-500) 42%, transparent);
+
+  --purple: var(--color-purple-600);
+  --purple-fg: var(--fg-on-solid);
+  --purple-ink: var(--color-purple-400);
+  --purple-soft: color-mix(in oklab, var(--color-purple-500) 18%, transparent);
+  --purple-soft-fg: var(--color-purple-300);
+  --purple-outline: color-mix(in oklab, var(--color-purple-500) 42%, transparent);
+
+  --fuchsia: var(--color-fuchsia-600);
+  --fuchsia-fg: var(--fg-on-solid);
+  --fuchsia-ink: var(--color-fuchsia-400);
+  --fuchsia-soft: color-mix(in oklab, var(--color-fuchsia-500) 18%, transparent);
+  --fuchsia-soft-fg: var(--color-fuchsia-300);
+  --fuchsia-outline: color-mix(in oklab, var(--color-fuchsia-500) 42%, transparent);
+
+  --pink: var(--color-pink-600);
+  --pink-fg: var(--fg-on-solid);
+  --pink-ink: var(--color-pink-400);
+  --pink-soft: color-mix(in oklab, var(--color-pink-500) 18%, transparent);
+  --pink-soft-fg: var(--color-pink-300);
+  --pink-outline: color-mix(in oklab, var(--color-pink-500) 42%, transparent);
+
+  --rose: var(--color-rose-600);
+  --rose-fg: var(--fg-on-solid);
+  --rose-ink: var(--color-rose-400);
+  --rose-soft: color-mix(in oklab, var(--color-rose-500) 18%, transparent);
+  --rose-soft-fg: var(--color-rose-300);
+  --rose-outline: color-mix(in oklab, var(--color-rose-500) 42%, transparent);
+
+  --orange: var(--color-orange-700);
+  --orange-fg: var(--fg-on-solid);
+  --orange-ink: var(--color-orange-400);
+  --orange-soft: color-mix(in oklab, var(--color-orange-500) 18%, transparent);
+  --orange-soft-fg: var(--color-orange-300);
+  --orange-outline: color-mix(in oklab, var(--color-orange-500) 42%, transparent);
+
+  --amber: var(--color-amber-700);
+  --amber-fg: var(--fg-on-solid);
+  --amber-ink: var(--color-amber-400);
+  --amber-soft: color-mix(in oklab, var(--color-amber-500) 18%, transparent);
+  --amber-soft-fg: var(--color-amber-300);
+  --amber-outline: color-mix(in oklab, var(--color-amber-500) 42%, transparent);
+
+  --yellow: var(--color-yellow-700);
+  --yellow-fg: var(--fg-on-solid);
+  --yellow-ink: var(--color-yellow-400);
+  --yellow-soft: color-mix(in oklab, var(--color-yellow-500) 18%, transparent);
+  --yellow-soft-fg: var(--color-yellow-300);
+  --yellow-outline: color-mix(in oklab, var(--color-yellow-500) 42%, transparent);
+
+  --lime: var(--color-lime-700);
+  --lime-fg: var(--fg-on-solid);
+  --lime-ink: var(--color-lime-400);
+  --lime-soft: color-mix(in oklab, var(--color-lime-500) 18%, transparent);
+  --lime-soft-fg: var(--color-lime-300);
+  --lime-outline: color-mix(in oklab, var(--color-lime-500) 42%, transparent);
+
+  --green: var(--color-green-700);
+  --green-fg: var(--fg-on-solid);
+  --green-ink: var(--color-green-400);
+  --green-soft: color-mix(in oklab, var(--color-green-500) 18%, transparent);
+  --green-soft-fg: var(--color-green-300);
+  --green-outline: color-mix(in oklab, var(--color-green-500) 42%, transparent);
+
+  --emerald: var(--color-emerald-700);
+  --emerald-fg: var(--fg-on-solid);
+  --emerald-ink: var(--color-emerald-400);
+  --emerald-soft: color-mix(in oklab, var(--color-emerald-500) 18%, transparent);
+  --emerald-soft-fg: var(--color-emerald-300);
+  --emerald-outline: color-mix(in oklab, var(--color-emerald-500) 42%, transparent);
+
+  --teal: var(--color-teal-700);
+  --teal-fg: var(--fg-on-solid);
+  --teal-ink: var(--color-teal-400);
+  --teal-soft: color-mix(in oklab, var(--color-teal-500) 18%, transparent);
+  --teal-soft-fg: var(--color-teal-300);
+  --teal-outline: color-mix(in oklab, var(--color-teal-500) 42%, transparent);
+
+  --cyan: var(--color-cyan-700);
+  --cyan-fg: var(--fg-on-solid);
+  --cyan-ink: var(--color-cyan-400);
+  --cyan-soft: color-mix(in oklab, var(--color-cyan-500) 18%, transparent);
+  --cyan-soft-fg: var(--color-cyan-300);
+  --cyan-outline: color-mix(in oklab, var(--color-cyan-500) 42%, transparent);
+}
+
+[data-ox-scheme='light'] {
+  --primary: var(--color-primary-600);
+  --primary-fg: var(--fg-on-solid);
+  --primary-ink: var(--color-primary-700);
+  --primary-soft: var(--color-primary-100);
+  --primary-soft-fg: var(--color-primary-700);
+  --primary-outline: var(--color-primary-300);
+
+  --neutral: var(--color-neutral-700);
+  --neutral-fg: var(--fg-on-solid);
+  --neutral-ink: var(--color-neutral-700);
+  --neutral-soft: var(--color-neutral-100);
+  --neutral-soft-fg: var(--color-neutral-700);
+  --neutral-outline: var(--color-neutral-300);
+
+  --info: var(--color-info-700);
+  --info-fg: var(--fg-on-solid);
+  --info-ink: var(--color-info-700);
+  --info-soft: var(--color-info-100);
+  --info-soft-fg: var(--color-info-700);
+  --info-outline: var(--color-info-300);
+
+  --success: var(--color-success-700);
+  --success-fg: var(--fg-on-solid);
+  --success-ink: var(--color-success-800);
+  --success-soft: var(--color-success-100);
+  --success-soft-fg: var(--color-success-800);
+  --success-outline: var(--color-success-300);
+
+  --warning: var(--color-warning-700);
+  --warning-fg: var(--fg-on-solid);
+  --warning-ink: var(--color-warning-700);
+  --warning-soft: var(--color-warning-100);
+  --warning-soft-fg: var(--color-warning-700);
+  --warning-outline: var(--color-warning-300);
+
+  --danger: var(--color-danger-600);
+  --danger-fg: var(--fg-on-solid);
+  --danger-ink: var(--color-danger-700);
+  --danger-soft: var(--color-danger-100);
+  --danger-soft-fg: var(--color-danger-700);
+  --danger-outline: var(--color-danger-300);
+
+  --trace-log: var(--color-trace-log-700);
+  --trace-log-fg: var(--fg-on-solid);
+  --trace-log-ink: var(--color-trace-log-700);
+  --trace-log-soft: var(--color-trace-log-100);
+  --trace-log-soft-fg: var(--color-trace-log-700);
+  --trace-log-outline: var(--color-trace-log-300);
+
+  --debug-log: var(--color-debug-log-700);
+  --debug-log-fg: var(--fg-on-solid);
+  --debug-log-ink: var(--color-debug-log-700);
+  --debug-log-soft: var(--color-debug-log-100);
+  --debug-log-soft-fg: var(--color-debug-log-700);
+  --debug-log-outline: var(--color-debug-log-300);
+
+  --info-log: var(--color-info-log-700);
+  --info-log-fg: var(--fg-on-solid);
+  --info-log-ink: var(--color-info-log-800);
+  --info-log-soft: var(--color-info-log-100);
+  --info-log-soft-fg: var(--color-info-log-800);
+  --info-log-outline: var(--color-info-log-300);
+
+  --warn-log: var(--color-warn-log-700);
+  --warn-log-fg: var(--fg-on-solid);
+  --warn-log-ink: var(--color-warn-log-700);
+  --warn-log-soft: var(--color-warn-log-100);
+  --warn-log-soft-fg: var(--color-warn-log-700);
+  --warn-log-outline: var(--color-warn-log-300);
+
+  --error-log: var(--color-error-log-600);
+  --error-log-fg: var(--fg-on-solid);
+  --error-log-ink: var(--color-error-log-700);
+  --error-log-soft: var(--color-error-log-100);
+  --error-log-soft-fg: var(--color-error-log-700);
+  --error-log-outline: var(--color-error-log-300);
+
+  --fatal-log: var(--color-fatal-log-600);
+  --fatal-log-fg: var(--fg-on-solid);
+  --fatal-log-ink: var(--color-fatal-log-700);
+  --fatal-log-soft: var(--color-fatal-log-100);
+  --fatal-log-soft-fg: var(--color-fatal-log-700);
+  --fatal-log-outline: var(--color-fatal-log-300);
+
+  --slate: var(--color-slate-700);
+  --slate-fg: var(--fg-on-solid);
+  --slate-ink: var(--color-slate-700);
+  --slate-soft: var(--color-slate-100);
+  --slate-soft-fg: var(--color-slate-700);
+  --slate-outline: var(--color-slate-300);
+
+  --gray: var(--color-gray-700);
+  --gray-fg: var(--fg-on-solid);
+  --gray-ink: var(--color-gray-700);
+  --gray-soft: var(--color-gray-100);
+  --gray-soft-fg: var(--color-gray-700);
+  --gray-outline: var(--color-gray-300);
+
+  --zinc: var(--color-zinc-700);
+  --zinc-fg: var(--fg-on-solid);
+  --zinc-ink: var(--color-zinc-700);
+  --zinc-soft: var(--color-zinc-100);
+  --zinc-soft-fg: var(--color-zinc-700);
+  --zinc-outline: var(--color-zinc-300);
+
+  --stone: var(--color-stone-700);
+  --stone-fg: var(--fg-on-solid);
+  --stone-ink: var(--color-stone-700);
+  --stone-soft: var(--color-stone-100);
+  --stone-soft-fg: var(--color-stone-700);
+  --stone-outline: var(--color-stone-300);
+
+  --red: var(--color-red-600);
+  --red-fg: var(--fg-on-solid);
+  --red-ink: var(--color-red-700);
+  --red-soft: var(--color-red-100);
+  --red-soft-fg: var(--color-red-700);
+  --red-outline: var(--color-red-300);
+
+  --sky: var(--color-sky-700);
+  --sky-fg: var(--fg-on-solid);
+  --sky-ink: var(--color-sky-700);
+  --sky-soft: var(--color-sky-100);
+  --sky-soft-fg: var(--color-sky-700);
+  --sky-outline: var(--color-sky-300);
+
+  --blue: var(--color-blue-700);
+  --blue-fg: var(--fg-on-solid);
+  --blue-ink: var(--color-blue-700);
+  --blue-soft: var(--color-blue-100);
+  --blue-soft-fg: var(--color-blue-700);
+  --blue-outline: var(--color-blue-300);
+
+  --indigo: var(--color-indigo-700);
+  --indigo-fg: var(--fg-on-solid);
+  --indigo-ink: var(--color-indigo-700);
+  --indigo-soft: var(--color-indigo-100);
+  --indigo-soft-fg: var(--color-indigo-700);
+  --indigo-outline: var(--color-indigo-300);
+
+  --violet: var(--color-violet-600);
+  --violet-fg: var(--fg-on-solid);
+  --violet-ink: var(--color-violet-700);
+  --violet-soft: var(--color-violet-100);
+  --violet-soft-fg: var(--color-violet-700);
+  --violet-outline: var(--color-violet-300);
+
+  --purple: var(--color-purple-600);
+  --purple-fg: var(--fg-on-solid);
+  --purple-ink: var(--color-purple-700);
+  --purple-soft: var(--color-purple-100);
+  --purple-soft-fg: var(--color-purple-700);
+  --purple-outline: var(--color-purple-300);
+
+  --fuchsia: var(--color-fuchsia-600);
+  --fuchsia-fg: var(--fg-on-solid);
+  --fuchsia-ink: var(--color-fuchsia-700);
+  --fuchsia-soft: var(--color-fuchsia-100);
+  --fuchsia-soft-fg: var(--color-fuchsia-700);
+  --fuchsia-outline: var(--color-fuchsia-300);
+
+  --pink: var(--color-pink-600);
+  --pink-fg: var(--fg-on-solid);
+  --pink-ink: var(--color-pink-700);
+  --pink-soft: var(--color-pink-100);
+  --pink-soft-fg: var(--color-pink-700);
+  --pink-outline: var(--color-pink-300);
+
+  --rose: var(--color-rose-600);
+  --rose-fg: var(--fg-on-solid);
+  --rose-ink: var(--color-rose-700);
+  --rose-soft: var(--color-rose-100);
+  --rose-soft-fg: var(--color-rose-700);
+  --rose-outline: var(--color-rose-300);
+
+  --orange: var(--color-orange-700);
+  --orange-fg: var(--fg-on-solid);
+  --orange-ink: var(--color-orange-700);
+  --orange-soft: var(--color-orange-100);
+  --orange-soft-fg: var(--color-orange-700);
+  --orange-outline: var(--color-orange-300);
+
+  --amber: var(--color-amber-700);
+  --amber-fg: var(--fg-on-solid);
+  --amber-ink: var(--color-amber-700);
+  --amber-soft: var(--color-amber-100);
+  --amber-soft-fg: var(--color-amber-700);
+  --amber-outline: var(--color-amber-300);
+
+  --yellow: var(--color-yellow-700);
+  --yellow-fg: var(--fg-on-solid);
+  --yellow-ink: var(--color-yellow-700);
+  --yellow-soft: var(--color-yellow-100);
+  --yellow-soft-fg: var(--color-yellow-700);
+  --yellow-outline: var(--color-yellow-300);
+
+  --lime: var(--color-lime-700);
+  --lime-fg: var(--fg-on-solid);
+  --lime-ink: var(--color-lime-700);
+  --lime-soft: var(--color-lime-100);
+  --lime-soft-fg: var(--color-lime-700);
+  --lime-outline: var(--color-lime-300);
+
+  --green: var(--color-green-700);
+  --green-fg: var(--fg-on-solid);
+  --green-ink: var(--color-green-800);
+  --green-soft: var(--color-green-100);
+  --green-soft-fg: var(--color-green-800);
+  --green-outline: var(--color-green-300);
+
+  --emerald: var(--color-emerald-700);
+  --emerald-fg: var(--fg-on-solid);
+  --emerald-ink: var(--color-emerald-800);
+  --emerald-soft: var(--color-emerald-100);
+  --emerald-soft-fg: var(--color-emerald-800);
+  --emerald-outline: var(--color-emerald-300);
+
+  --teal: var(--color-teal-700);
+  --teal-fg: var(--fg-on-solid);
+  --teal-ink: var(--color-teal-800);
+  --teal-soft: var(--color-teal-100);
+  --teal-soft-fg: var(--color-teal-800);
+  --teal-outline: var(--color-teal-300);
+
+  --cyan: var(--color-cyan-700);
+  --cyan-fg: var(--fg-on-solid);
+  --cyan-ink: var(--color-cyan-800);
+  --cyan-soft: var(--color-cyan-100);
+  --cyan-soft-fg: var(--color-cyan-800);
+  --cyan-outline: var(--color-cyan-300);
+}
+
+[data-ox-tone='primary'] {
+  --tone: var(--primary);
+  --tone-fg: var(--primary-fg);
+  --tone-ink: var(--primary-ink);
+  --tone-soft: var(--primary-soft);
+  --tone-soft-fg: var(--primary-soft-fg);
+  --tone-outline: var(--primary-outline);
+}
+[data-ox-tone='neutral'] {
+  --tone: var(--neutral);
+  --tone-fg: var(--neutral-fg);
+  --tone-ink: var(--neutral-ink);
+  --tone-soft: var(--neutral-soft);
+  --tone-soft-fg: var(--neutral-soft-fg);
+  --tone-outline: var(--neutral-outline);
+}
+[data-ox-tone='info'] {
+  --tone: var(--info);
+  --tone-fg: var(--info-fg);
+  --tone-ink: var(--info-ink);
+  --tone-soft: var(--info-soft);
+  --tone-soft-fg: var(--info-soft-fg);
+  --tone-outline: var(--info-outline);
+}
+[data-ox-tone='success'] {
+  --tone: var(--success);
+  --tone-fg: var(--success-fg);
+  --tone-ink: var(--success-ink);
+  --tone-soft: var(--success-soft);
+  --tone-soft-fg: var(--success-soft-fg);
+  --tone-outline: var(--success-outline);
+}
+[data-ox-tone='warning'] {
+  --tone: var(--warning);
+  --tone-fg: var(--warning-fg);
+  --tone-ink: var(--warning-ink);
+  --tone-soft: var(--warning-soft);
+  --tone-soft-fg: var(--warning-soft-fg);
+  --tone-outline: var(--warning-outline);
+}
+[data-ox-tone='danger'] {
+  --tone: var(--danger);
+  --tone-fg: var(--danger-fg);
+  --tone-ink: var(--danger-ink);
+  --tone-soft: var(--danger-soft);
+  --tone-soft-fg: var(--danger-soft-fg);
+  --tone-outline: var(--danger-outline);
+}
+[data-ox-tone='trace-log'] {
+  --tone: var(--trace-log);
+  --tone-fg: var(--trace-log-fg);
+  --tone-ink: var(--trace-log-ink);
+  --tone-soft: var(--trace-log-soft);
+  --tone-soft-fg: var(--trace-log-soft-fg);
+  --tone-outline: var(--trace-log-outline);
+}
+[data-ox-tone='debug-log'] {
+  --tone: var(--debug-log);
+  --tone-fg: var(--debug-log-fg);
+  --tone-ink: var(--debug-log-ink);
+  --tone-soft: var(--debug-log-soft);
+  --tone-soft-fg: var(--debug-log-soft-fg);
+  --tone-outline: var(--debug-log-outline);
+}
+[data-ox-tone='info-log'] {
+  --tone: var(--info-log);
+  --tone-fg: var(--info-log-fg);
+  --tone-ink: var(--info-log-ink);
+  --tone-soft: var(--info-log-soft);
+  --tone-soft-fg: var(--info-log-soft-fg);
+  --tone-outline: var(--info-log-outline);
+}
+[data-ox-tone='warn-log'] {
+  --tone: var(--warn-log);
+  --tone-fg: var(--warn-log-fg);
+  --tone-ink: var(--warn-log-ink);
+  --tone-soft: var(--warn-log-soft);
+  --tone-soft-fg: var(--warn-log-soft-fg);
+  --tone-outline: var(--warn-log-outline);
+}
+[data-ox-tone='error-log'] {
+  --tone: var(--error-log);
+  --tone-fg: var(--error-log-fg);
+  --tone-ink: var(--error-log-ink);
+  --tone-soft: var(--error-log-soft);
+  --tone-soft-fg: var(--error-log-soft-fg);
+  --tone-outline: var(--error-log-outline);
+}
+[data-ox-tone='fatal-log'] {
+  --tone: var(--fatal-log);
+  --tone-fg: var(--fatal-log-fg);
+  --tone-ink: var(--fatal-log-ink);
+  --tone-soft: var(--fatal-log-soft);
+  --tone-soft-fg: var(--fatal-log-soft-fg);
+  --tone-outline: var(--fatal-log-outline);
+}
+[data-ox-tone='slate'] {
+  --tone: var(--slate);
+  --tone-fg: var(--slate-fg);
+  --tone-ink: var(--slate-ink);
+  --tone-soft: var(--slate-soft);
+  --tone-soft-fg: var(--slate-soft-fg);
+  --tone-outline: var(--slate-outline);
+}
+[data-ox-tone='gray'] {
+  --tone: var(--gray);
+  --tone-fg: var(--gray-fg);
+  --tone-ink: var(--gray-ink);
+  --tone-soft: var(--gray-soft);
+  --tone-soft-fg: var(--gray-soft-fg);
+  --tone-outline: var(--gray-outline);
+}
+[data-ox-tone='zinc'] {
+  --tone: var(--zinc);
+  --tone-fg: var(--zinc-fg);
+  --tone-ink: var(--zinc-ink);
+  --tone-soft: var(--zinc-soft);
+  --tone-soft-fg: var(--zinc-soft-fg);
+  --tone-outline: var(--zinc-outline);
+}
+[data-ox-tone='stone'] {
+  --tone: var(--stone);
+  --tone-fg: var(--stone-fg);
+  --tone-ink: var(--stone-ink);
+  --tone-soft: var(--stone-soft);
+  --tone-soft-fg: var(--stone-soft-fg);
+  --tone-outline: var(--stone-outline);
+}
+[data-ox-tone='red'] {
+  --tone: var(--red);
+  --tone-fg: var(--red-fg);
+  --tone-ink: var(--red-ink);
+  --tone-soft: var(--red-soft);
+  --tone-soft-fg: var(--red-soft-fg);
+  --tone-outline: var(--red-outline);
+}
+[data-ox-tone='sky'] {
+  --tone: var(--sky);
+  --tone-fg: var(--sky-fg);
+  --tone-ink: var(--sky-ink);
+  --tone-soft: var(--sky-soft);
+  --tone-soft-fg: var(--sky-soft-fg);
+  --tone-outline: var(--sky-outline);
+}
+[data-ox-tone='blue'] {
+  --tone: var(--blue);
+  --tone-fg: var(--blue-fg);
+  --tone-ink: var(--blue-ink);
+  --tone-soft: var(--blue-soft);
+  --tone-soft-fg: var(--blue-soft-fg);
+  --tone-outline: var(--blue-outline);
+}
+[data-ox-tone='indigo'] {
+  --tone: var(--indigo);
+  --tone-fg: var(--indigo-fg);
+  --tone-ink: var(--indigo-ink);
+  --tone-soft: var(--indigo-soft);
+  --tone-soft-fg: var(--indigo-soft-fg);
+  --tone-outline: var(--indigo-outline);
+}
+[data-ox-tone='violet'] {
+  --tone: var(--violet);
+  --tone-fg: var(--violet-fg);
+  --tone-ink: var(--violet-ink);
+  --tone-soft: var(--violet-soft);
+  --tone-soft-fg: var(--violet-soft-fg);
+  --tone-outline: var(--violet-outline);
+}
+[data-ox-tone='purple'] {
+  --tone: var(--purple);
+  --tone-fg: var(--purple-fg);
+  --tone-ink: var(--purple-ink);
+  --tone-soft: var(--purple-soft);
+  --tone-soft-fg: var(--purple-soft-fg);
+  --tone-outline: var(--purple-outline);
+}
+[data-ox-tone='fuchsia'] {
+  --tone: var(--fuchsia);
+  --tone-fg: var(--fuchsia-fg);
+  --tone-ink: var(--fuchsia-ink);
+  --tone-soft: var(--fuchsia-soft);
+  --tone-soft-fg: var(--fuchsia-soft-fg);
+  --tone-outline: var(--fuchsia-outline);
+}
+[data-ox-tone='pink'] {
+  --tone: var(--pink);
+  --tone-fg: var(--pink-fg);
+  --tone-ink: var(--pink-ink);
+  --tone-soft: var(--pink-soft);
+  --tone-soft-fg: var(--pink-soft-fg);
+  --tone-outline: var(--pink-outline);
+}
+[data-ox-tone='rose'] {
+  --tone: var(--rose);
+  --tone-fg: var(--rose-fg);
+  --tone-ink: var(--rose-ink);
+  --tone-soft: var(--rose-soft);
+  --tone-soft-fg: var(--rose-soft-fg);
+  --tone-outline: var(--rose-outline);
+}
+[data-ox-tone='orange'] {
+  --tone: var(--orange);
+  --tone-fg: var(--orange-fg);
+  --tone-ink: var(--orange-ink);
+  --tone-soft: var(--orange-soft);
+  --tone-soft-fg: var(--orange-soft-fg);
+  --tone-outline: var(--orange-outline);
+}
+[data-ox-tone='amber'] {
+  --tone: var(--amber);
+  --tone-fg: var(--amber-fg);
+  --tone-ink: var(--amber-ink);
+  --tone-soft: var(--amber-soft);
+  --tone-soft-fg: var(--amber-soft-fg);
+  --tone-outline: var(--amber-outline);
+}
+[data-ox-tone='yellow'] {
+  --tone: var(--yellow);
+  --tone-fg: var(--yellow-fg);
+  --tone-ink: var(--yellow-ink);
+  --tone-soft: var(--yellow-soft);
+  --tone-soft-fg: var(--yellow-soft-fg);
+  --tone-outline: var(--yellow-outline);
+}
+[data-ox-tone='lime'] {
+  --tone: var(--lime);
+  --tone-fg: var(--lime-fg);
+  --tone-ink: var(--lime-ink);
+  --tone-soft: var(--lime-soft);
+  --tone-soft-fg: var(--lime-soft-fg);
+  --tone-outline: var(--lime-outline);
+}
+[data-ox-tone='green'] {
+  --tone: var(--green);
+  --tone-fg: var(--green-fg);
+  --tone-ink: var(--green-ink);
+  --tone-soft: var(--green-soft);
+  --tone-soft-fg: var(--green-soft-fg);
+  --tone-outline: var(--green-outline);
+}
+[data-ox-tone='emerald'] {
+  --tone: var(--emerald);
+  --tone-fg: var(--emerald-fg);
+  --tone-ink: var(--emerald-ink);
+  --tone-soft: var(--emerald-soft);
+  --tone-soft-fg: var(--emerald-soft-fg);
+  --tone-outline: var(--emerald-outline);
+}
+[data-ox-tone='teal'] {
+  --tone: var(--teal);
+  --tone-fg: var(--teal-fg);
+  --tone-ink: var(--teal-ink);
+  --tone-soft: var(--teal-soft);
+  --tone-soft-fg: var(--teal-soft-fg);
+  --tone-outline: var(--teal-outline);
+}
+[data-ox-tone='cyan'] {
+  --tone: var(--cyan);
+  --tone-fg: var(--cyan-fg);
+  --tone-ink: var(--cyan-ink);
+  --tone-soft: var(--cyan-soft);
+  --tone-soft-fg: var(--cyan-soft-fg);
+  --tone-outline: var(--cyan-outline);
+}