@vanilla-bean/components 1.0.2 → 1.1.1

package/theme/.test.js

@@ -2,11 +2,14 @@ import { TinyColor } from '@ctrl/tinycolor';
 import theme from '.';
 
 const ORIGINAL_BLUE = 'hsl(209, 55%, 45%)';
+const ORIGINAL_YELLOW = 'hsl(44, 55%, 45%)';
 const ORIGINAL_GRAY = 'hsl(0, 0%, 45%)';
 
 afterEach(() => {
 	theme.colors.blue = new TinyColor(ORIGINAL_BLUE);
+	theme.colors.yellow = new TinyColor(ORIGINAL_YELLOW);
 	theme.colors.gray = new TinyColor(ORIGINAL_GRAY);
+	theme.colors.selected = undefined;
 });
 
 describe('theme colors', () => {
@@ -16,11 +19,24 @@ describe('theme colors', () => {
 		expect(theme.colors.blue.toString()).not.toBe(before);
 	});
 
-	test('white derives from gray — updates when gray is reassigned', () => {
+	test('white derives from gray - updates when gray is reassigned', () => {
 		const before = theme.colors.white.toString();
 		theme.colors.gray = new TinyColor('hsl(200, 30%, 45%)');
 		expect(theme.colors.white.toString()).not.toBe(before);
 	});
+
+	test('selected follows yellow - updates when yellow is reassigned', () => {
+		const custom = new TinyColor('hsl(120, 55%, 45%)');
+		theme.colors.yellow = custom;
+		expect(theme.colors.selected.toString()).toBe(custom.toString());
+	});
+
+	test('selected can be assigned independently of yellow', () => {
+		const custom = new TinyColor('hsl(280, 55%, 45%)');
+		theme.colors.selected = custom;
+		expect(theme.colors.selected.toString()).toBe(custom.toString());
+		expect(theme.colors.yellow.toString()).toBe(new TinyColor(ORIGINAL_YELLOW).toString());
+	});
 });
 
 describe('theme lazy strings', () => {
@@ -32,19 +48,19 @@ describe('theme lazy strings', () => {
 
 	test('theme.table reflects a color mutation', () => {
 		const before = theme.table;
-		theme.colors.blue = new TinyColor('hsl(120, 55%, 45%)');
+		theme.colors.yellow = new TinyColor('hsl(120, 55%, 45%)');
 		expect(theme.table).not.toBe(before);
 	});
 
 	test('theme.scrollbar reflects a color mutation', () => {
 		const custom = new TinyColor('hsl(120, 55%, 45%)');
-		theme.colors.blue = custom;
+		theme.colors.yellow = custom;
 		expect(theme.scrollbar).toContain(custom.toString());
 	});
 
 	test('theme.input reflects a color mutation', () => {
 		const custom = new TinyColor('hsl(120, 55%, 45%)');
-		theme.colors.blue = custom;
+		theme.colors.yellow = custom;
 		expect(theme.input).toContain(custom.toString());
 	});
 

package/theme/README.md

@@ -15,10 +15,10 @@ That said, the theme system is layered. You can work at any layer depending on h
 For one-off overrides on a specific component instance, pass `styles` as an option:
 
 ```js
-// Object form — applied as inline styles
+// Object form - applied as inline styles
 new Button({ styles: { backgroundColor: '#your-brand', borderRadius: '4px' } });
 
-// Function form — receives theme, generates scoped CSS
+// Function form - receives theme, generates scoped CSS
 new Dialog({
 	styles: ({ colors }) => `
         border-color: ${colors.purple};
@@ -69,10 +69,10 @@ The theme singleton is imported once and shared across all `styled()` calls. Mut
 import { theme } from '@vanilla-bean/components';
 import { TinyColor } from '@ctrl/tinycolor';
 
-// Replace the accent color — affects every component that uses colors.teal
+// Replace the accent color - affects every component that uses colors.teal
 theme.colors.teal = new TinyColor('#3d7aed');
 
-// Then import and use components as normal — they'll use your teal
+// Then import and use components as normal - they'll use your teal
 import { Button, Dialog } from '@vanilla-bean/components';
 ```
 
@@ -279,10 +279,16 @@ Special utility colors and WCAG compliance helpers:
 ```js
 // Utility colors
 colors.transparent; // Transparent - for overlays, hidden elements
-colors.white; // Pure white - text on dark backgrounds
-colors.black; // Pure black - text on light backgrounds
-colors.superWhite; // #fefefe - slightly warmer white
-colors.vantablack; // #0a0a0a - rich black alternative
+colors.white; // Near-white derived from gray (gray lightened 45%) - text on dark backgrounds
+colors.black; // Near-black derived from gray (gray darkened 35%) - backgrounds, text on light surfaces
+colors.superWhite; // #ffffff - pure white constant, independent of gray
+colors.vantablack; // #000000 - pure black constant, independent of gray
+
+// Semantic accent - the "focused/selected/active" color (focus outlines,
+// ::selection, hover highlights, checked controls, scrollbar thumbs).
+// Follows colors.yellow unless assigned its own color:
+colors.selected;
+theme.colors.selected = new TinyColor('#3d7aed'); // decouple from yellow
 
 // Accessibility functions
 colors.mostReadable(baseColor, [colors.white, colors.black]);
@@ -566,6 +572,7 @@ interface ColorSystem {
 	transparent: TinyColor;
 	white: TinyColor;
 	black: TinyColor;
+	selected: TinyColor;
 	superWhite: TinyColor;
 	vantablack: TinyColor;
 

package/theme/button.js

@@ -6,7 +6,7 @@ export default ({ colors, fonts }) => `
 	text-decoration: none;
 	color: ${colors.white};
 	background-color: ${colors.blue};
-	outline-color: ${colors.lighter(colors.orange)};
+	outline-color: ${colors.lighter(colors.selected)};
 	text-align: center;
 	position: relative;
 	white-space: nowrap;

package/theme/colors.js

@@ -1,12 +1,13 @@
 import { TinyColor, random, readability, isReadable, mostReadable } from '@ctrl/tinycolor';
 
+let selectedOverride;
+
 const colors = {
 	random,
 	readability,
 	isReadable,
 	mostReadable,
 
-	// Base colors — plain writable properties so theme.colors.X = new TinyColor(...) works
 	orange: new TinyColor('hsl(29, 55%, 45%)'),
 	gray: new TinyColor('hsl(0, 0%, 45%)'),
 	yellow: new TinyColor('hsl(44, 55%, 45%)'),
@@ -20,7 +21,6 @@ const colors = {
 	superWhite: new TinyColor('hsl(0, 100%, 100%)'),
 	vantablack: new TinyColor('hsl(0, 0%, 0%)'),
 
-	// Derived — getters so they recompute when gray is reassigned
 	get white() {
 		return colors.whiteish();
 	},
@@ -28,6 +28,13 @@ const colors = {
 		return colors.blackish();
 	},
 
+	get selected() {
+		return selectedOverride ?? colors.yellow;
+	},
+	set selected(color) {
+		selectedOverride = color;
+	},
+
 	whiteish: (color = colors.gray) => color.lighten(45),
 	lightest: color => color.lighten(40),
 	lighter: color => color.lighten(27),

package/theme/input.js

@@ -31,7 +31,7 @@ export const checkbox = ({ colors }) => `
 		}
 
 		&:checked:before {
-			box-shadow: inset 1em 1em ${colors.blue};
+			box-shadow: inset 1em 1em ${colors.selected};
 		}
 
 		&:focus {
@@ -47,9 +47,9 @@ export default ({ colors }) => `
 	box-sizing: border-box;
 	width: 100%;
 	color: ${colors.light(colors.red)};
-	accent-color: ${colors.blue};
+	accent-color: ${colors.selected};
 	background-color: ${colors.black};
-	outline-color: ${colors.lighter(colors.orange)};
+	outline-color: ${colors.lighter(colors.selected)};
 	padding: 2px 4px;
 
 	&:disabled {

package/theme/page.js

@@ -9,6 +9,7 @@ import _table from './table';
 export default theme => `
 	html {
 		height: 100%;
+		color-scheme: ${colors.black.isDark() ? 'dark' : 'light'};
 	}
 
 	body {
@@ -25,6 +26,11 @@ export default theme => `
 		margin: 0;
 	}
 
+	::selection {
+		background: ${colors.lighter(colors.selected)};
+		color: ${colors.black};
+	}
+
 	* {
 		touch-action: manipulation;
 		-webkit-text-size-adjust: none;

package/theme/scrollbar.js

@@ -1,4 +1,8 @@
 export default ({ colors }) => `
+	html {
+		scrollbar-color: ${colors.alpha(colors.selected, 0.6)} ${colors.white.setAlpha(0.06)};
+	}
+
 	::-webkit-scrollbar {
 		width: 24px;
 		height: 24px;
@@ -10,15 +14,15 @@ export default ({ colors }) => `
 	}
 	::-webkit-scrollbar-thumb {
 		background: ${colors.white.setAlpha(0.06)};
-		-webkit-box-shadow: inset 0 0 2px 1px ${colors.blue};
+		-webkit-box-shadow: inset 0 0 2px 1px ${colors.selected};
 		border-radius: 12px;
 	}
 	::-webkit-scrollbar-thumb:hover {
 		background: ${colors.white.setAlpha(0.09)};
-		-webkit-box-shadow: inset 0 0 3px 1px ${colors.blue};
+		-webkit-box-shadow: inset 0 0 3px 1px ${colors.selected};
 	}
 	::-webkit-scrollbar-thumb:active {
 		background: ${colors.white.setAlpha(0.12)};
-		-webkit-box-shadow: inset 0 0 4px 2px ${colors.blue};
+		-webkit-box-shadow: inset 0 0 4px 2px ${colors.selected};
 	}
 `;

package/theme/table.js

@@ -42,12 +42,12 @@ export default ({ colors }) => `
 	}
 
 	tr:hover {
-		background-color: ${colors.blackish(colors.blue)};
+		background-color: ${colors.blackish(colors.selected)};
 		color: ${colors.lighter(colors.gray)};
 	}
 
 	td:hover, th:hover {
-		background-color: ${colors.blue.darken(32)};
+		background-color: ${colors.selected.darken(32)};
 		color: ${colors.white};
 	}
 `;

package/utils/browser.js

@@ -13,7 +13,7 @@ export const isDev = (() => {
 			(import.meta.env?.DEV === true || import.meta.env?.NODE_ENV === 'development')
 		)
 			return true;
-		// Bare browser import with no bundler — treat localhost as dev so warnings surface
+		// Bare browser import with no bundler - treat localhost as dev so warnings surface
 		if (typeof location !== 'undefined' && (location.hostname === 'localhost' || location.hostname === '127.0.0.1'))
 			return true;
 		return false;