@dorsk/tsumikit 0.14.0 → 0.15.0

package/README.md

@@ -129,6 +129,10 @@ triggers, and `SegmentedControl`. Each renders an exact
 original ghost icon-button default. Use `control` on `Button` or `Popover` when
 the roomier shared `--control-height` composer contract is required.
 
+Button and Popover share the same semantic tones. For a confirmed positive
+action, `tone="success"` gives neutral controls a success tint; combine it with
+`variant="primary"` for a filled success action without consumer CSS.
+
 ## Built on the platform
 
 Interactive components lean on modern web features rather than reimplementing

package/dist/components/atoms/Button.svelte

@@ -6,8 +6,8 @@
 		variant?: 'default' | 'primary' | 'ghost' | 'danger';
 		// Semantic state tint layered on top of the variant: tints text/border and
 		// adds a subtle fill on hover. For stateful controls — an "on"/active toggle
-		// (`accent`), or cost/severity states (`info`, `warn`).
-		tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
+		// (`accent`), positive actions (`success`), or cost/severity states.
+		tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 		size?: 'sm' | 'md' | 'lg';
 		control?: boolean;
 		block?: boolean;
@@ -66,6 +66,7 @@
 	class:btn-icon={icon}
 	class:btn-chip={chip}
 	class:btn-tone-accent={tone === 'accent'}
+	class:btn-tone-success={tone === 'success'}
 	class:btn-tone-info={tone === 'info'}
 	class:btn-tone-warn={tone === 'warn'}
 	class:btn-tone-danger={tone === 'danger'}
@@ -156,6 +157,9 @@
 	.btn-tone-accent {
 		--btn-tone: var(--accent);
 	}
+	.btn-tone-success {
+		--btn-tone: var(--ok);
+	}
 	.btn-tone-info {
 		--btn-tone: var(--info);
 	}
@@ -166,6 +170,7 @@
 		--btn-tone: var(--danger);
 	}
 	.btn-tone-accent,
+	.btn-tone-success,
 	.btn-tone-info,
 	.btn-tone-warn,
 	.btn-tone-danger {
@@ -173,6 +178,7 @@
 		border-color: color-mix(in srgb, var(--btn-tone) 50%, var(--border));
 	}
 	.btn-tone-accent:hover:not(:disabled),
+	.btn-tone-success:hover:not(:disabled),
 	.btn-tone-info:hover:not(:disabled),
 	.btn-tone-warn:hover:not(:disabled),
 	.btn-tone-danger:hover:not(:disabled) {
@@ -234,6 +240,26 @@
 		border-color: var(--accent);
 		filter: brightness(1.08);
 	}
+	.btn-control.btn-tone-success {
+		color: var(--ok);
+		border-color: color-mix(in srgb, var(--ok) 50%, var(--border));
+	}
+	.btn-control.btn-tone-success:hover:not(:disabled) {
+		background: color-mix(in srgb, var(--ok) 14%, transparent);
+		border-color: var(--ok);
+	}
+	/* A positive primary action uses success as its fill, not merely as the
+	   neutral tint. This follows the control override so both heights match. */
+	.btn-primary.btn-tone-success {
+		background: var(--ok);
+		border-color: var(--ok);
+		color: var(--text-on-success);
+	}
+	.btn-primary.btn-tone-success:hover:not(:disabled) {
+		background: var(--ok);
+		border-color: var(--ok);
+		filter: brightness(1.08);
+	}
 
 	/* Icon-only buttons (IconButton). Square box = consistent 2.25rem tap target. */
 	.btn-icon {

package/dist/components/atoms/Button.svelte.d.ts

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 type ButtonProps = HTMLButtonAttributes & {
     variant?: 'default' | 'primary' | 'ghost' | 'danger';
-    tone?: 'none' | 'accent' | 'info' | 'warn' | 'danger';
+    tone?: 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
     size?: 'sm' | 'md' | 'lg';
     control?: boolean;
     block?: boolean;

package/dist/components/molecules/Popover.svelte

@@ -13,7 +13,7 @@
 
 	type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 	type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
-	type TriggerTone = 'none' | 'accent' | 'info' | 'warn' | 'danger';
+	type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 	type TriggerSize = 'sm' | 'md' | 'lg';
 
 	let {
@@ -101,6 +101,7 @@
 	class:trigger-control={control}
 	class:trigger-block={block}
 	class:trigger-tone-accent={tone === 'accent'}
+	class:trigger-tone-success={tone === 'success'}
 	class:trigger-tone-info={tone === 'info'}
 	class:trigger-tone-warn={tone === 'warn'}
 	class:trigger-tone-danger={tone === 'danger'}
@@ -212,6 +213,9 @@
 	.pop-trigger.trigger-tone-accent {
 		--pop-trigger-tone: var(--accent);
 	}
+	.pop-trigger.trigger-tone-success {
+		--pop-trigger-tone: var(--ok);
+	}
 	.pop-trigger.trigger-tone-info {
 		--pop-trigger-tone: var(--info);
 	}
@@ -222,6 +226,7 @@
 		--pop-trigger-tone: var(--danger);
 	}
 	.pop-trigger.trigger-tone-accent,
+	.pop-trigger.trigger-tone-success,
 	.pop-trigger.trigger-tone-info,
 	.pop-trigger.trigger-tone-warn,
 	.pop-trigger.trigger-tone-danger {
@@ -229,12 +234,23 @@
 		border-color: color-mix(in srgb, var(--pop-trigger-tone) 50%, var(--border));
 	}
 	.pop-trigger.trigger-tone-accent:hover:not(:disabled),
+	.pop-trigger.trigger-tone-success:hover:not(:disabled),
 	.pop-trigger.trigger-tone-info:hover:not(:disabled),
 	.pop-trigger.trigger-tone-warn:hover:not(:disabled),
 	.pop-trigger.trigger-tone-danger:hover:not(:disabled) {
 		background: color-mix(in srgb, var(--pop-trigger-tone) 14%, transparent);
 		border-color: var(--pop-trigger-tone);
 	}
+	.pop-trigger.trigger-primary.trigger-tone-success {
+		background: var(--ok);
+		border-color: var(--ok);
+		color: var(--text-on-success);
+	}
+	.pop-trigger.trigger-primary.trigger-tone-success:hover:not(:disabled) {
+		background: var(--ok);
+		border-color: var(--ok);
+		filter: brightness(1.08);
+	}
 	.pop-trigger:disabled {
 		opacity: 0.45;
 		cursor: not-allowed;

package/dist/components/molecules/Popover.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { Snippet } from 'svelte';
 type Placement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
 type TriggerVariant = 'default' | 'primary' | 'ghost' | 'danger';
-type TriggerTone = 'none' | 'accent' | 'info' | 'warn' | 'danger';
+type TriggerTone = 'none' | 'accent' | 'success' | 'info' | 'warn' | 'danger';
 type TriggerSize = 'sm' | 'md' | 'lg';
 type $$ComponentProps = {
     placement?: Placement;

package/dist/styles/variables.css

@@ -73,6 +73,9 @@
   --text-muted: var(--c-text-muted);
   --text-faint: var(--c-text-faint);
   --text-on-accent: var(--c-accent-ink);
+  /* Adaptive ink for filled positive actions: dark canvas ink on bright greens,
+     light canvas ink on the darker greens used by light themes. */
+  --text-on-success: var(--bg);
 
   --accent: var(--c-accent);
   --accent-dim: var(--c-accent-dim);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",