@vanilla-bean/components 1.0.0

package/theme/code.js

@@ -0,0 +1,123 @@
+export default ({ colors, fonts }) => `
+	@font-face {
+		font-family: 'FontWithASyntaxHighlighter';
+		src:
+			url('@vanilla-bean/components/FontWithASyntaxHighlighter-Regular.woff2')
+			format('woff2')
+		;
+	}
+
+	@font-palette-values --vbc-javascript-theme {
+		font-family: 'FontWithASyntaxHighlighter';
+		override-colors:
+			0 ${colors.lighter(colors.purple)}, /* keywords, {} */
+			1 ${colors.light(colors.gray)}, /* comments */
+			2 ${colors.light(colors.orange)}, /* literals */
+			3 ${colors.light(colors.orange)}, /* numbers */
+			4 ${colors.lighter(colors.blue)}, /* functions, [] */
+			5 ${colors.white}, /* js others */
+			6 ${colors.black}, /* not in use */
+			7 ${colors.light(colors.green)}, /* inside quotes, css properties, few chars */
+			8 ${colors.light(colors.green)} /* few chars */
+		;
+	}
+
+	@font-palette-values --vbc-json-theme {
+		font-family: 'FontWithASyntaxHighlighter';
+		override-colors:
+			0 ${colors.lighter(colors.purple)}, /* keywords, {} */
+			1 ${colors.light(colors.red)}, /* comments */
+			2 ${colors.light(colors.green)}, /* literals */
+			3 ${colors.light(colors.orange)}, /* numbers */
+			4 ${colors.lighter(colors.blue)}, /* functions, [] */
+			5 ${colors.white}, /* others */
+			6 ${colors.black}, /* not in use */
+			7 ${colors.light(colors.green)}, /* inside quotes, css properties, few chars */
+			8 ${colors.green} /* few chars */
+		;
+	}
+
+	@font-palette-values --vbc-html-theme {
+		font-family: 'FontWithASyntaxHighlighter';
+		override-colors:
+			0 ${colors.lighter(colors.red)}, /* keywords */
+			1 ${colors.light(colors.gray)}, /* comments */
+			2 ${colors.light(colors.red)}, /* literals */
+			3 ${colors.light(colors.orange)}, /* numbers */
+			4 ${colors.lighter(colors.blue)}, /* functions, [] */
+			5 ${colors.pink}, /* others */
+			6 ${colors.black}, /* not in use */
+			7 ${colors.light(colors.green)}, /* inside quotes, few chars */
+			8 ${colors.light(colors.red)} /* quotes, tags */
+		;
+	}
+
+	@font-palette-values --vbc-css-theme {
+		font-family: 'FontWithASyntaxHighlighter';
+		override-colors:
+			0 ${colors.lighter(colors.purple)}, /* keywords, {} */
+			1 ${colors.light(colors.gray)}, /* comments */
+			2 ${colors.light(colors.orange)}, /* literals */
+			3 ${colors.light(colors.green)}, /* numbers */
+			4 ${colors.lighter(colors.blue)}, /* functions, [] */
+			5 ${colors.white}, /* others */
+			6 ${colors.black}, /* not in use */
+			7 ${colors.light(colors.green)}, /* inside quotes, css properties, few chars */
+			8 ${colors.light(colors.green)} /* few chars */
+		;
+	}
+
+	pre[class*="language-"] {
+		position: relative;
+		background-color: ${colors.black};
+		display: inline-block;
+		padding: 12px;
+		border-radius: 3px;
+		text-decoration: inherit;
+		max-width: 100%;
+
+		&:has(> button) {
+			padding-right: 34px;
+		}
+
+		button {
+			position: absolute !important;
+			top: 4px;
+			right: 4px;
+			width: 26px !important;
+			height: 26px !important;
+			font-size: 13px;
+			opacity: 0.5;
+
+			&:hover, &:focus {
+				opacity: 0.8;
+				top: 3px;
+			}
+		}
+
+		code {
+			display: block;
+			overflow: auto;
+			width: 100%;
+		}
+	}
+
+	code, textarea.syntax-highlighting, input.syntax-highlighting, pre[lang] {
+		${fonts.code}
+
+		&[class*="language-html"] {
+			font-palette: --vbc-html-theme;
+			color: ${colors.white};
+		}
+
+		&[class*="language-css"] {
+			font-palette: --vbc-css-theme;
+			color: ${colors.light(colors.green)};
+		}
+
+		&[class*="language-json"] {
+			font-palette: --vbc-json-theme;
+			color: ${colors.white};
+		}
+	}
+`;

package/theme/colors.js

@@ -0,0 +1,42 @@
+import { TinyColor, random, readability, isReadable, mostReadable } from '@ctrl/tinycolor';
+
+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%)'),
+	green: new TinyColor('hsl(74, 55%, 45%)'),
+	teal: new TinyColor('hsl(164, 55%, 45%)'),
+	blue: new TinyColor('hsl(209, 55%, 45%)'),
+	purple: new TinyColor('hsl(254, 55%, 45%)'),
+	pink: new TinyColor('hsl(314, 55%, 45%)'),
+	red: new TinyColor('hsl(359, 55%, 45%)'),
+	transparent: new TinyColor('rgba(255, 255, 255, 0)'),
+	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();
+	},
+
+	whiteish: (color = colors.gray) => color.lighten(45),
+	lightest: color => color.lighten(40),
+	lighter: color => color.lighten(27),
+	light: color => color.lighten(17),
+	dark: color => color.darken(15),
+	darker: color => color.darken(25),
+	darkest: color => color.darken(30),
+	blackish: (color = colors.gray) => color.darken(35),
+	alpha: (color, alpha) => new TinyColor(color.toHslString()).setAlpha(alpha),
+};
+
+export default colors;

package/theme/fonts.js

@@ -0,0 +1,42 @@
+import colors from './colors';
+
+const fontAwesome = `
+	-moz-osx-font-smoothing: grayscale;
+	-webkit-font-smoothing: antialiased;
+	display: inline-block;
+	font-style: normal;
+	font-variant: normal;
+	text-rendering: auto;
+	line-height: 1;
+	font-family: 'Font Awesome 6 Free';
+	font-weight: 400;
+`;
+
+export default {
+	get code() {
+		return `
+		font-family: "FontWithASyntaxHighlighter", monospace;
+		font-palette: --vbc-javascript-theme;
+		padding: 3px;
+		width: fit-content;
+		color: ${colors.light(colors.red)}; /* default color */
+		background-color: ${colors.black};
+	`;
+	},
+	fontAwesome,
+	fontAwesomeBrands: `
+		${fontAwesome}
+
+		font-family: 'Font Awesome 6 Brands';
+		font-weight: normal;
+	`,
+	fontAwesomeSolid: `
+		${fontAwesome}
+
+		font-weight: 600;
+	`,
+	kodeMono: `
+		font-family: 'Kode Mono Variable', monospace;
+		line-height: normal;
+	`,
+};

package/theme/index.js

@@ -0,0 +1,33 @@
+import _button from './button';
+import _code from './code';
+import colors from './colors';
+import fonts from './fonts';
+import _input from './input';
+import _page from './page';
+import _scrollbar from './scrollbar';
+import _table from './table';
+
+const theme = {
+	colors,
+	fonts,
+	get button() {
+		return _button(this);
+	},
+	get code() {
+		return _code(this);
+	},
+	get input() {
+		return _input(this);
+	},
+	get scrollbar() {
+		return _scrollbar(this);
+	},
+	get table() {
+		return _table(this);
+	},
+	get page() {
+		return _page(this);
+	},
+};
+
+export default theme;

package/theme/input.js

@@ -0,0 +1,64 @@
+export const number = ({ colors }) => `
+	input[type='number'] {
+		color: ${colors.light(colors.orange)};
+		background-color: ${colors.black};
+	}
+`;
+
+export const checkbox = ({ colors }) => `
+	input[type='checkbox'] {
+		/* Remove most all native input styles */
+		appearance: none;
+
+		margin: 0;
+		margin-right: 6px;
+		font: inherit;
+		color: currentColor;
+		width: 1.15em;
+		height: 1.15em;
+		border: 0.15em solid currentColor;
+		border-radius: 3px;
+		transform: translateY(-0.075em);
+		display: inline-grid;
+		place-content: center;
+		cursor: pointer;
+
+		&:before {
+			content: "";
+			width: 0.65em;
+			height: 0.65em;
+			border-radius: 2px;
+		}
+
+		&:checked:before {
+			box-shadow: inset 1em 1em ${colors.blue};
+		}
+
+		&:focus {
+			border: 0.15em solid currentColor;
+		}
+	}
+`;
+
+export default ({ colors }) => `
+	display: block;
+	border-radius: 3px;
+	border: inset 3px ${colors.lightest(colors.teal).setAlpha(0.8)};
+	box-sizing: border-box;
+	width: 100%;
+	color: ${colors.light(colors.red)};
+	accent-color: ${colors.blue};
+	background-color: ${colors.black};
+	outline-color: ${colors.lighter(colors.orange)};
+	padding: 2px 4px;
+
+	&:disabled {
+		color: ${colors.black};
+		background-color: ${colors.darker(colors.gray)};
+	}
+
+	&:not(.syntax-highlighting).validation-errors {
+		background-color: ${colors.dark(colors.red)};
+		color: ${colors.white};
+	}
+`;

package/theme/page.js

@@ -0,0 +1,208 @@
+import _button from './button';
+import _code from './code';
+import colors from './colors';
+import fonts from './fonts';
+import _input, { number, checkbox } from './input';
+import _scrollbar from './scrollbar';
+import _table from './table';
+
+export default theme => `
+	html {
+		height: 100%;
+	}
+
+	body {
+		display: flex;
+		position: relative;
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		overflow: hidden;
+		line-height: normal;
+		tab-size: 2;
+		background: ${colors.black};
+		color: ${colors.white};
+		margin: 0;
+	}
+
+	* {
+		touch-action: manipulation;
+		-webkit-text-size-adjust: none;
+
+		font-size: 16px;
+		${fonts.kodeMono}
+
+		sub, sup {
+			font-size: smaller;
+		}
+	}
+
+	#app {
+		width: 100%;
+		height: 100%;
+	}
+
+	h1, h2, h3, h4, h5, h6 {
+		color: ${colors.green};
+
+		&:before {
+			margin-right: 3px;
+			font-size: 0.7em;
+			opacity: 0.7;
+		}
+	}
+
+	h1 {
+		font-size: 30px;
+
+		&:first-child {
+			margin-top: 0;
+		}
+
+		&:before {
+			content: "#";
+		}
+	}
+
+	h2 {
+		font-size: 24px;
+
+		&:before {
+			content: "##";
+		}
+	}
+
+	h3 {
+		font-size: 18px;
+
+		&:before {
+			content: "###";
+		}
+	}
+
+	h4 {
+		font-size: 18px;
+
+		&:before {
+			content: "####";
+		}
+	}
+
+	h5 {
+		font-size: 18px;
+
+		&:before {
+			content: "#####";
+		}
+	}
+
+	h6 {
+		font-size: 18px;
+
+		&:before {
+			content: "######";
+		}
+	}
+
+	a {
+		color: ${colors.light(colors.blue)};
+
+		&:visited {
+			color: ${colors.light(colors.purple)};
+		}
+
+		&.disabled {
+			pointer-events: none;
+
+			&:hover .tooltip {
+				display: none;
+			}
+		}
+	}
+
+	@viewport {
+		width: device-width;
+		zoom: 1;
+		min-zoom: 1;
+		max-zoom: 1;
+	}
+
+	${_code(theme)}
+
+	${_scrollbar(theme)}
+
+	input, select, textarea { ${_input(theme)} }
+	${number(theme)}
+	${checkbox(theme)}
+
+	button, a.variant-button, kbd { ${_button(theme)} }
+
+	kbd {
+		background-color: ${colors.dark(colors.gray)};
+		padding: 4px 6px 6px 6px;
+	}
+
+	table { ${_table(theme)} }
+
+	blockquote {
+		background-color: ${colors.white.setAlpha(0.06)};
+    border-left: 6px solid ${colors.white.setAlpha(0.06)};
+    margin: 0;
+    padding: 1px 12px;
+
+		&.NOTE {
+			background-color: ${colors.alpha(colors.blue, 0.09)};
+			border-color: ${colors.alpha(colors.blue, 0.3)};
+
+			p:first-child {
+				font-weight: bold;
+				color: ${colors.lighter(colors.blue)};
+			}
+		}
+
+		&.TIP {
+			background-color: ${colors.alpha(colors.green, 0.09)};
+			border-color: ${colors.alpha(colors.green, 0.3)};
+
+			p:first-child {
+				font-weight: bold;
+				color: ${colors.lighter(colors.green)};
+			}
+		}
+
+		&.IMPORTANT {
+			background-color: ${colors.alpha(colors.purple, 0.09)};
+			border-color: ${colors.alpha(colors.purple, 0.3)};
+
+			p:first-child {
+				font-weight: bold;
+				color: ${colors.lighter(colors.purple)};
+			}
+		}
+
+		&.WARNING {
+			background-color: ${colors.alpha(colors.yellow, 0.09)};
+			border-color: ${colors.alpha(colors.yellow, 0.3)};
+
+			p:first-child {
+				font-weight: bold;
+				color: ${colors.lighter(colors.yellow)};
+			}
+		}
+
+		&.CAUTION {
+			background-color: ${colors.alpha(colors.red, 0.09)};
+			border-color: ${colors.alpha(colors.red, 0.3)};
+
+			p:first-child {
+				font-weight: bold;
+				color: ${colors.lighter(colors.red)};
+			}
+		}
+	}
+
+	.fa-support:before {
+		${fonts.fontAwesomeSolid}
+		content: var(--fa);
+	}
+`;

package/theme/scrollbar.js

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

package/theme/table.js

@@ -0,0 +1,53 @@
+export default ({ colors }) => `
+	position: relative;
+	border-collapse: collapse;
+
+	thead {
+		background-color: ${colors.gray.darken(38)};
+		text-align: left;
+	}
+
+	tbody {
+		background-color: ${colors.black};
+	}
+
+	tfoot {
+		background-color: ${colors.gray.darken(36)};
+	}
+
+	tr {
+		color: ${colors.light(colors.gray)};
+	}
+
+	thead, tbody > tr:not(:last-of-type) {
+		border-bottom: 1px solid ${colors.darker(colors.gray)};
+	}
+
+	tfoot {
+		border-top: 1px solid ${colors.darker(colors.gray)};
+		color: ${colors.lighter(colors.gray)};
+	}
+
+	th, td {
+		padding: 9px;
+	}
+
+	th:not(:first-of-type), td:not(:first-of-type) {
+		border-left: 1px solid ${colors.darker(colors.gray)};
+	}
+
+	th {
+		font-weight: 900;
+		color: ${colors.lightest(colors.gray)};
+	}
+
+	tr:hover {
+		background-color: ${colors.blackish(colors.blue)};
+		color: ${colors.lighter(colors.gray)};
+	}
+
+	td:hover, th:hover {
+		background-color: ${colors.blue.darken(32)};
+		color: ${colors.white};
+	}
+`;