@nqmcreative/ui 0.2.1 → 0.2.3

package/dist/styles/sprout/theme.css

@@ -0,0 +1,255 @@
+/*
+ * sprout — design tokens.
+ *
+ * The warm one: leaf green on cream, fully rounded corners, and a display face
+ * with round terminals. Built for school, community and family sites, where the
+ * reader is a parent on a phone rather than an operator at a desk. Import this
+ * after `@import "tailwindcss";` in your app's CSS entry point.
+ *
+ * The token *names* are a contract shared by every style — `core` and every
+ * component are written against them, so only the values below change from one
+ * style to the next. Each hue follows the same 4-step shape:
+ *
+ *   --color-<tone>          base / solid fill / text on light surfaces
+ *   --color-<tone>-hover    darker step for hover + active
+ *   --color-<tone>-light    tinted surface (soft variants, alerts, badges)
+ *   --color-<tone>-border   hairline that reads against the tinted surface
+ */
+@theme {
+	/*
+	 * Surfaces are cream rather than white, and the greys are green-cast. A
+	 * neutral grey next to this much foliage reads as a printing error, so every
+	 * step of the scale carries a little of the brand hue.
+	 */
+	/* --- surfaces --- */
+	--color-bg: #fffefb;
+	--color-bg-alt: #f0fdf4;
+	--color-bg-inset: #e3f6e9;
+	--color-hairline: #ecefe7;
+	--color-hairline-strong: #d3e0d1;
+
+	/* --- text --- */
+	--color-text: #1a3a1f;
+	--color-text-secondary: #2f5135;
+	--color-text-muted: #5f6f62;
+	--color-text-inverse: #ffffff;
+
+	/*
+	 * Every base below is used two ways — as a solid fill under inverse text,
+	 * and as text on a light surface — so each one is picked to clear 4.5:1
+	 * against `--color-bg` and white. The brand is the deliberate exception:
+	 * #16a34a is the leaf green this style exists to reproduce, and it reaches
+	 * only 3.3:1 as text. It is kept because it *is* the identity, and because
+	 * it is overwhelmingly used as a fill, where white sits on it at button
+	 * sizes. If your project needs AA on brand-coloured text, move this one
+	 * value down a step to #15803d (5.0:1) and leave everything else alone —
+	 * nothing in the style depends on the brighter value.
+	 */
+	/* --- brand / primary (leaf) --- */
+	--color-brand: #16a34a;
+	--color-brand-hover: #15803d;
+	--color-brand-light: #dcfce7;
+	--color-brand-border: #a7e8bf;
+
+	/*
+	 * Honey. The base is dark enough to carry white text; the bright sunflower
+	 * the source site puts on its second call to action lives in
+	 * `--color-accent-border`, which is where a component reaches for a fill it
+	 * will put *dark* text on.
+	 */
+	/* --- accent (honey) --- */
+	--color-accent: #a16207;
+	--color-accent-hover: #854d0e;
+	--color-accent-light: #fff5d6;
+	--color-accent-border: #fbbf24;
+
+	/* --- violet --- */
+	--color-violet: #7c3aed;
+	--color-violet-hover: #6d28d9;
+	--color-violet-light: #f4f0fe;
+	--color-violet-border: #dccffb;
+
+	/* --- info (sky) --- */
+	--color-info: #0369a1;
+	--color-info-hover: #075985;
+	--color-info-light: #e8f5fd;
+	--color-info-border: #a5dcf3;
+
+	/* --- success (emerald) --- */
+	--color-success: #047857;
+	--color-success-hover: #065f46;
+	--color-success-light: #e6f8f0;
+	--color-success-border: #9ee0c3;
+
+	/* --- warning (amber) --- */
+	--color-warning: #b45309;
+	--color-warning-hover: #92400e;
+	--color-warning-light: #fff6e8;
+	--color-warning-border: #fbd79b;
+
+	/* --- danger (red) --- */
+	--color-danger: #d11f1f;
+	--color-danger-hover: #b91c1c;
+	--color-danger-light: #fdeeee;
+	--color-danger-border: #f7bcbc;
+
+	/* --- neutral (sage) --- */
+	--color-neutral: #5f6f62;
+	--color-neutral-hover: #4a584d;
+	--color-neutral-light: #eef3ec;
+	--color-neutral-border: #cbd8c9;
+
+	/* --- type --- */
+	/*
+	 * Two faces, and the split is the point. Fredoka sets headings: geometric,
+	 * round-terminalled, drawn wide — the same warmth the shapes have. Work
+	 * Sans sets everything a reader has to get through, because Fredoka at 15px
+	 * in a paragraph is charm at the cost of the sentence — and it is the body
+	 * face in every style, so only the headings change voice when you swap.
+	 *
+	 * Both are variable files, one request per subset — see `fonts.css`.
+	 * Everything degrades to the system stack if that file is not imported, so
+	 * the webfonts stay optional.
+	 */
+	--font-sans: 'Work Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+	--font-heading:
+		'Fredoka', 'Work Sans', ui-rounded, ui-sans-serif, system-ui, -apple-system, sans-serif;
+	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
+
+	/* --- motion --- */
+	/*
+	 * A little overshoot on the way in — the one place sprout spends motion.
+	 * `--ease-brand-out` stays honest for anything that has to feel immediate,
+	 * like a hover colour change.
+	 */
+	--ease-brand: cubic-bezier(0.34, 1.4, 0.64, 1);
+	--ease-brand-out: cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+/*
+ * Dark mode. Two ways in, and they cooperate:
+ *
+ *   1. put `class="dark"` on <html> — an explicit choice always wins
+ *   2. do nothing — the OS preference applies, unless <html> says `class="light"`
+ *
+ * Both blocks below carry the same values on purpose; keep them in sync.
+ * Every utility built on these tokens follows automatically, so components
+ * need no `dark:` classes of their own.
+ *
+ * The dark palette is a night garden rather than a neutral slate: the surfaces
+ * keep the green cast, and every hue lifts a step or two so it still reads
+ * against them.
+ */
+@custom-variant dark (&:where(.dark, .dark *));
+
+.dark {
+	color-scheme: dark;
+
+	--color-bg: #0e1a11;
+	--color-bg-alt: #14251a;
+	--color-bg-inset: #1b3020;
+	--color-hairline: #1e3524;
+	--color-hairline-strong: #2f4a36;
+
+	--color-text: #f0f7f0;
+	--color-text-secondary: #cadfcd;
+	--color-text-muted: #94ad99;
+	--color-text-inverse: #0e1a11;
+
+	--color-brand: #4ade80;
+	--color-brand-hover: #86efac;
+	--color-brand-light: #0f2f1c;
+	--color-brand-border: #1f5533;
+
+	--color-accent: #fbbf24;
+	--color-accent-hover: #fcd34d;
+	--color-accent-light: #33260a;
+	--color-accent-border: #5e4514;
+
+	--color-violet: #a78bfa;
+	--color-violet-hover: #c4b5fd;
+	--color-violet-light: #271c47;
+	--color-violet-border: #4c3a86;
+
+	--color-info: #56b6ec;
+	--color-info-hover: #7fc9f2;
+	--color-info-light: #0d2a3d;
+	--color-info-border: #17496a;
+
+	--color-success: #34d399;
+	--color-success-hover: #6ee7b7;
+	--color-success-light: #082a1f;
+	--color-success-border: #10543c;
+
+	--color-warning: #f0a63c;
+	--color-warning-hover: #f5bc63;
+	--color-warning-light: #35240a;
+	--color-warning-border: #5e4114;
+
+	--color-danger: #f38080;
+	--color-danger-hover: #f7a3a3;
+	--color-danger-light: #3a1616;
+	--color-danger-border: #6b2727;
+
+	--color-neutral: #9db3a1;
+	--color-neutral-hover: #c7d8ca;
+	--color-neutral-light: #1b3020;
+	--color-neutral-border: #2f4a36;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root:not(.light) {
+		color-scheme: dark;
+
+		--color-bg: #0e1a11;
+		--color-bg-alt: #14251a;
+		--color-bg-inset: #1b3020;
+		--color-hairline: #1e3524;
+		--color-hairline-strong: #2f4a36;
+
+		--color-text: #f0f7f0;
+		--color-text-secondary: #cadfcd;
+		--color-text-muted: #94ad99;
+		--color-text-inverse: #0e1a11;
+
+		--color-brand: #4ade80;
+		--color-brand-hover: #86efac;
+		--color-brand-light: #0f2f1c;
+		--color-brand-border: #1f5533;
+
+		--color-accent: #fbbf24;
+		--color-accent-hover: #fcd34d;
+		--color-accent-light: #33260a;
+		--color-accent-border: #5e4514;
+
+		--color-violet: #a78bfa;
+		--color-violet-hover: #c4b5fd;
+		--color-violet-light: #271c47;
+		--color-violet-border: #4c3a86;
+
+		--color-info: #56b6ec;
+		--color-info-hover: #7fc9f2;
+		--color-info-light: #0d2a3d;
+		--color-info-border: #17496a;
+
+		--color-success: #34d399;
+		--color-success-hover: #6ee7b7;
+		--color-success-light: #082a1f;
+		--color-success-border: #10543c;
+
+		--color-warning: #f0a63c;
+		--color-warning-hover: #f5bc63;
+		--color-warning-light: #35240a;
+		--color-warning-border: #5e4114;
+
+		--color-danger: #f38080;
+		--color-danger-hover: #f7a3a3;
+		--color-danger-light: #3a1616;
+		--color-danger-border: #6b2727;
+
+		--color-neutral: #9db3a1;
+		--color-neutral-hover: #c7d8ca;
+		--color-neutral-light: #1b3020;
+		--color-neutral-border: #2f4a36;
+	}
+}

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nqmcreative/ui",
-	"version": "0.2.1",
-	"description": "Svelte 5 + Tailwind CSS v4 component library — two styles (matte, paper), 65 components each, one shared behaviour core. No runtime dependencies.",
+	"version": "0.2.3",
+	"description": "Svelte 5 + Tailwind CSS v4 component library — three styles (matte, paper, sprout), 65 components each, one shared behaviour core. No runtime dependencies.",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && svelte-kit sync && svelte-package && node scripts/strip-dist-tests.mjs && node scripts/generate-index.mjs && node scripts/generate-exports.mjs && node scripts/generate-registry.mjs && node scripts/generate-scoped-css.mjs && node scripts/generate-demos.mjs && publint",
@@ -618,7 +618,273 @@
 			"svelte": "./dist/styles/paper/Tooltip.svelte"
 		},
 		"./paper/theme.css": "./dist/styles/paper/theme.css",
-		"./paper/fonts.css": "./dist/styles/paper/fonts.css"
+		"./paper/fonts.css": "./dist/styles/paper/fonts.css",
+		"./sprout": {
+			"types": "./dist/styles/sprout/index.d.ts",
+			"svelte": "./dist/styles/sprout/index.js"
+		},
+		"./sprout/locale-provider": {
+			"types": "./dist/styles/sprout/LocaleProvider.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/LocaleProvider.svelte"
+		},
+		"./sprout/button": {
+			"types": "./dist/styles/sprout/Button.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Button.svelte"
+		},
+		"./sprout/link": {
+			"types": "./dist/styles/sprout/Link.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Link.svelte"
+		},
+		"./sprout/input": {
+			"types": "./dist/styles/sprout/Input.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Input.svelte"
+		},
+		"./sprout/textarea": {
+			"types": "./dist/styles/sprout/Textarea.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Textarea.svelte"
+		},
+		"./sprout/select": {
+			"types": "./dist/styles/sprout/Select.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Select.svelte"
+		},
+		"./sprout/checkbox": {
+			"types": "./dist/styles/sprout/Checkbox.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Checkbox.svelte"
+		},
+		"./sprout/radio": {
+			"types": "./dist/styles/sprout/Radio.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Radio.svelte"
+		},
+		"./sprout/switch": {
+			"types": "./dist/styles/sprout/Switch.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Switch.svelte"
+		},
+		"./sprout/field": {
+			"types": "./dist/styles/sprout/Field.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Field.svelte"
+		},
+		"./sprout/label": {
+			"types": "./dist/styles/sprout/Label.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Label.svelte"
+		},
+		"./sprout/password-input": {
+			"types": "./dist/styles/sprout/PasswordInput.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/PasswordInput.svelte"
+		},
+		"./sprout/number-input": {
+			"types": "./dist/styles/sprout/NumberInput.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/NumberInput.svelte"
+		},
+		"./sprout/slider": {
+			"types": "./dist/styles/sprout/Slider.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Slider.svelte"
+		},
+		"./sprout/radio-group": {
+			"types": "./dist/styles/sprout/RadioGroup.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/RadioGroup.svelte"
+		},
+		"./sprout/checkbox-group": {
+			"types": "./dist/styles/sprout/CheckboxGroup.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/CheckboxGroup.svelte"
+		},
+		"./sprout/segmented-control": {
+			"types": "./dist/styles/sprout/SegmentedControl.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/SegmentedControl.svelte"
+		},
+		"./sprout/input-group": {
+			"types": "./dist/styles/sprout/InputGroup.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/InputGroup.svelte"
+		},
+		"./sprout/combobox": {
+			"types": "./dist/styles/sprout/Combobox.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Combobox.svelte"
+		},
+		"./sprout/multi-select": {
+			"types": "./dist/styles/sprout/MultiSelect.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/MultiSelect.svelte"
+		},
+		"./sprout/date-picker": {
+			"types": "./dist/styles/sprout/DatePicker.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/DatePicker.svelte"
+		},
+		"./sprout/calendar": {
+			"types": "./dist/styles/sprout/Calendar.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Calendar.svelte"
+		},
+		"./sprout/dropzone": {
+			"types": "./dist/styles/sprout/Dropzone.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Dropzone.svelte"
+		},
+		"./sprout/badge": {
+			"types": "./dist/styles/sprout/Badge.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Badge.svelte"
+		},
+		"./sprout/avatar": {
+			"types": "./dist/styles/sprout/Avatar.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Avatar.svelte"
+		},
+		"./sprout/avatar-group": {
+			"types": "./dist/styles/sprout/AvatarGroup.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/AvatarGroup.svelte"
+		},
+		"./sprout/card": {
+			"types": "./dist/styles/sprout/Card.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Card.svelte"
+		},
+		"./sprout/stat": {
+			"types": "./dist/styles/sprout/Stat.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Stat.svelte"
+		},
+		"./sprout/table": {
+			"types": "./dist/styles/sprout/Table.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Table.svelte"
+		},
+		"./sprout/kbd": {
+			"types": "./dist/styles/sprout/Kbd.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Kbd.svelte"
+		},
+		"./sprout/alert": {
+			"types": "./dist/styles/sprout/Alert.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Alert.svelte"
+		},
+		"./sprout/progress": {
+			"types": "./dist/styles/sprout/Progress.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Progress.svelte"
+		},
+		"./sprout/spinner": {
+			"types": "./dist/styles/sprout/Spinner.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Spinner.svelte"
+		},
+		"./sprout/skeleton": {
+			"types": "./dist/styles/sprout/Skeleton.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Skeleton.svelte"
+		},
+		"./sprout/empty-state": {
+			"types": "./dist/styles/sprout/EmptyState.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/EmptyState.svelte"
+		},
+		"./sprout/toaster": {
+			"types": "./dist/styles/sprout/Toaster.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Toaster.svelte"
+		},
+		"./sprout/divider": {
+			"types": "./dist/styles/sprout/Divider.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Divider.svelte"
+		},
+		"./sprout/tabs": {
+			"types": "./dist/styles/sprout/Tabs.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Tabs.svelte"
+		},
+		"./sprout/accordion": {
+			"types": "./dist/styles/sprout/Accordion.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Accordion.svelte"
+		},
+		"./sprout/accordion-item": {
+			"types": "./dist/styles/sprout/AccordionItem.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/AccordionItem.svelte"
+		},
+		"./sprout/breadcrumb": {
+			"types": "./dist/styles/sprout/Breadcrumb.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Breadcrumb.svelte"
+		},
+		"./sprout/pagination": {
+			"types": "./dist/styles/sprout/Pagination.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Pagination.svelte"
+		},
+		"./sprout/steps": {
+			"types": "./dist/styles/sprout/Steps.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Steps.svelte"
+		},
+		"./sprout/navbar": {
+			"types": "./dist/styles/sprout/Navbar.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Navbar.svelte"
+		},
+		"./sprout/sidebar": {
+			"types": "./dist/styles/sprout/Sidebar.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Sidebar.svelte"
+		},
+		"./sprout/footer": {
+			"types": "./dist/styles/sprout/Footer.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Footer.svelte"
+		},
+		"./sprout/hero-section": {
+			"types": "./dist/styles/sprout/HeroSection.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/HeroSection.svelte"
+		},
+		"./sprout/feature-grid": {
+			"types": "./dist/styles/sprout/FeatureGrid.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/FeatureGrid.svelte"
+		},
+		"./sprout/feature-card": {
+			"types": "./dist/styles/sprout/FeatureCard.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/FeatureCard.svelte"
+		},
+		"./sprout/pricing-card": {
+			"types": "./dist/styles/sprout/PricingCard.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/PricingCard.svelte"
+		},
+		"./sprout/testimonial": {
+			"types": "./dist/styles/sprout/Testimonial.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Testimonial.svelte"
+		},
+		"./sprout/logo-cloud": {
+			"types": "./dist/styles/sprout/LogoCloud.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/LogoCloud.svelte"
+		},
+		"./sprout/cta-section": {
+			"types": "./dist/styles/sprout/CTASection.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/CTASection.svelte"
+		},
+		"./sprout/stats-band": {
+			"types": "./dist/styles/sprout/StatsBand.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/StatsBand.svelte"
+		},
+		"./sprout/modal": {
+			"types": "./dist/styles/sprout/Modal.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Modal.svelte"
+		},
+		"./sprout/drawer": {
+			"types": "./dist/styles/sprout/Drawer.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Drawer.svelte"
+		},
+		"./sprout/confirm-dialog": {
+			"types": "./dist/styles/sprout/ConfirmDialog.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/ConfirmDialog.svelte"
+		},
+		"./sprout/command-palette": {
+			"types": "./dist/styles/sprout/CommandPalette.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/CommandPalette.svelte"
+		},
+		"./sprout/context-menu": {
+			"types": "./dist/styles/sprout/ContextMenu.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/ContextMenu.svelte"
+		},
+		"./sprout/dropdown": {
+			"types": "./dist/styles/sprout/Dropdown.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Dropdown.svelte"
+		},
+		"./sprout/menu-item": {
+			"types": "./dist/styles/sprout/MenuItem.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/MenuItem.svelte"
+		},
+		"./sprout/menu-separator": {
+			"types": "./dist/styles/sprout/MenuSeparator.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/MenuSeparator.svelte"
+		},
+		"./sprout/popover": {
+			"types": "./dist/styles/sprout/Popover.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Popover.svelte"
+		},
+		"./sprout/theme-toggle": {
+			"types": "./dist/styles/sprout/ThemeToggle.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/ThemeToggle.svelte"
+		},
+		"./sprout/tooltip": {
+			"types": "./dist/styles/sprout/Tooltip.svelte.d.ts",
+			"svelte": "./dist/styles/sprout/Tooltip.svelte"
+		},
+		"./sprout/theme.css": "./dist/styles/sprout/theme.css",
+		"./sprout/fonts.css": "./dist/styles/sprout/fonts.css"
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"