@vanilla-bean/components 1.0.1 → 1.1.0

package/components/Menu/Menu.js

@@ -18,12 +18,12 @@ const StyledList = styled(
 			}
 
 			&:hover, &:focus, &:focus-visible, & a:hover, & a:focus, & a:focus-visible  {
-				color: ${colors.light(colors.blue)} !important;
-				border-color: ${colors.light(colors.blue)};
+				color: ${colors.light(colors.selected)} !important;
+				border-color: ${colors.light(colors.selected)};
 			}
 
 			&:focus-visible, & a:focus-visible {
-				outline: 2px solid ${colors.light(colors.blue)};
+				outline: 2px solid ${colors.light(colors.selected)};
 				outline-offset: -2px;
 			}
 		}

package/index.d.ts

@@ -25,6 +25,7 @@ export interface ThemeColors {
 	teal: ThemeColor;
 	white: ThemeColor;
 	black: ThemeColor;
+	selected: ThemeColor;
 	transparent: ThemeColor;
 	superWhite: ThemeColor;
 	vantablack: ThemeColor;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vanilla-bean/components",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"type": "module",
 	"module": "./index.js",
 	"types": "./index.d.ts",

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', () => {
@@ -21,6 +24,19 @@ describe('theme colors', () => {
 		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

@@ -284,6 +284,12 @@ colors.black; // Pure black - text on light backgrounds
 colors.superWhite; // #fefefe - slightly warmer white
 colors.vantablack; // #0a0a0a - rich black alternative
 
+// 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]);
 // Returns the highest contrast color for optimal readability
@@ -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,12 +21,18 @@ 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();
 	},
 	get black() {
-		return colors.blackish();
+		return colors.gray.darken(45);
+	},
+
+	get selected() {
+		return selectedOverride ?? colors.yellow;
+	},
+	set selected(color) {
+		selectedOverride = color;
 	},
 
 	whiteish: (color = colors.gray) => color.lighten(45),

package/theme/fonts.js

@@ -8,7 +8,7 @@ const fontAwesome = `
 	font-variant: normal;
 	text-rendering: auto;
 	line-height: 1;
-	font-family: 'Font Awesome 6 Free';
+	font-family: 'Font Awesome 7 Free';
 	font-weight: 400;
 `;
 
@@ -27,13 +27,13 @@ export default {
 	fontAwesomeBrands: `
 		${fontAwesome}
 
-		font-family: 'Font Awesome 6 Brands';
+		font-family: 'Font Awesome 7 Brands';
 		font-weight: normal;
 	`,
 	fontAwesomeSolid: `
 		${fontAwesome}
 
-		font-weight: 600;
+		font-weight: 900;
 	`,
 	kodeMono: `
 		font-family: 'Kode Mono Variable', monospace;

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};
 	}
 `;