.

demo/src/features/index.ts

@@ -1,2 +1,3 @@
-export * from './button';
-export * from './typography';
+export * from './button'
+export * from './input'
+export * from './typography'

demo/src/features/input.ts

@@ -0,0 +1,46 @@
+import { $LitElement } from '@mhmo91/lit-mixins/src'
+import { customElement } from 'lit/decorators.js'
+import { css, html } from 'lit'
+
+@customElement('demo-input')
+export class DemoInput extends $LitElement(css`
+	:host {
+		display: block;
+	}
+`) {
+	render() {
+		return html`
+			<schmancy-grid gap="md">
+				<schmancy-input label="Input" placeholder="placeholder"></schmancy-input>
+				<schmancy-input label="disabled Input" placeholder="placeholder" disabled></schmancy-input>
+
+				<schmancy-autocomplete label="Status" value="All">
+					${[
+						'All',
+						'New',
+						'Paid CC',
+						'Approved',
+						'Modified',
+						'Checked-In',
+						'Checked-Out',
+						'No show',
+						'Cancelled',
+						'Invalid CC',
+						'Debtor',
+						'Problematic',
+						'Prepaid',
+						'Paid',
+						'Paid bank',
+						'Completed',
+					].map(o => html` <schmancy-option .value="${o}"> ${o}</schmancy-option>`)}
+				</schmancy-autocomplete>
+			</schmancy-grid>
+		`
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'demo-input': DemoInput
+	}
+}

demo/src/index.ts

@@ -2,21 +2,39 @@ import { $LitElement } from '@mhmo91/lit-mixins/src'
 import '@schmancy/index'
 import { html } from 'lit'
 import { customElement } from 'lit/decorators.js'
+
 import './features/index'
+import { Hct, argbFromHex, themeFromSourceColor } from '@material/material-color-utilities'
+
 @customElement('schmancy-demo')
 export default class SchmancyDemo extends $LitElement() {
 	connectedCallback(): void {
 		super.connectedCallback()
+
+		// Get the theme from a hex color
+		const theme = themeFromSourceColor(argbFromHex('#008000'))
+
+		// Print out the theme as JSON
+		console.log(JSON.stringify(theme, null, 2))
+
+		// Simple demonstration of HCT.
+		const color = Hct.fromInt(0xff4285f4)
+		console.log(`Hue: ${color.hue}`)
+		console.log(`Chrome: ${color.chroma}`)
+		console.log(`Tone: ${color.tone}`)
 	}
 	render() {
 		return html`
 			<schmancy-flex class="w-full mx-4 my-6" gap="md" flow="row" align="center">
 				<schmancy-typography type="display">Schmancy Demo</schmancy-typography>
 				<schmancy-tab-group>
+					<schmancy-tab active label="Inputs">
+						<demo-input class="py-4"></demo-input>
+					</schmancy-tab>
 					<schmancy-tab label="Typography">
 						<demo-typography class="py-4"></demo-typography>
 					</schmancy-tab>
-					<schmancy-tab active label="Buttons">
+					<schmancy-tab label="Buttons">
 						<demo-button class="py-4"></demo-button>
 					</schmancy-tab>
 				</schmancy-tab-group>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mhmo91/schmancy",
-	"version": "0.0.23",
+	"version": "0.0.24",
 	"description": "UI library build with web components",
 	"main": "./dist/index.js",
 	"repository": {
@@ -42,6 +42,7 @@
 	"dependencies": {
 		"@lit-labs/motion": "^1.0.3",
 		"@lit/context": "^1.1.0",
+		"@material/material-color-utilities": "^0.2.7",
 		"@mhmo91/lit-kit": "latest",
 		"@mhmo91/lit-mixins": "latest",
 		"animejs": "^3.2.1",

src/autocomplete/autocomplete.scss

@@ -1,4 +1,5 @@
 :host {
+	display: block;
 	border: unset !important;
 	line-height: unset !important;
 	background: unset !important;

src/autocomplete/autocomplete.ts

@@ -1,3 +1,5 @@
+import { SchmancyTheme } from '@schmancy/theme/theme.interface'
+import { color } from '@schmancy/directives'
 import { ref } from 'lit/directives/ref.js'
 import SchmancyInput from '@schmancy/input/input'
 import TailwindElement from '@schmancy/mixin/tailwind/tailwind.mixin'
@@ -128,13 +130,16 @@ export class SchmancyAutocomplete extends TailwindElement(style) {
 				</schmancy-input>
 				<ul
 					tabindex="-1"
-					class="absolute z-30 mt-1 max-h-auto w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+					class="absolute z-30 mt-1 max-h-auto w-full overflow-auto rounded-md shadow-2"
 					id="options"
 					role="listbox"
 					hidden
 					@click=${(e: SchmancyOptionChangeEvent) => {
 						this.handleOptionClick(e.detail.value)
 					}}
+					${color({
+						bgColor: SchmancyTheme.sys.color.surface.default,
+					})}
 				>
 					<li
 						id="empty"

src/autocomplete/readme.md

@@ -1,4 +1,4 @@
-````js
+```js
 <schmancy-autocomplete
   label="Status"
   .value="${this.filter.status}"
@@ -9,5 +9,5 @@
   'Approved', 'Modified', 'Checked-In', 'Checked-Out', 'No show', 'Cancelled', 'Invalid CC',
   'Debtor', 'Problematic', 'Prepaid', 'Paid', 'Paid bank', 'Completed' ].map((o) => html`
   <schmancy-option .value="${o}"> ${o}</schmancy-option>`)} </schmancy-autocomplete
->```
-````
+>
+```

src/directives/color.ts

@@ -1,7 +1,7 @@
 import { Part, nothing } from 'lit'
 import { Directive, PartInfo, PartType, directive } from 'lit/directive.js'
 
-interface ColorConfig {
+export type ColorConfig = {
 	bgColor?: string
 	color?: string
 }

src/input/input.scss

@@ -1,13 +1,17 @@
 :host {
-  border: unset !important;
-  line-height: unset !important;
-  background: unset !important;
-  padding: unset !important;
-  font-size: unset !important;
-  box-shadow: unset !important;
-  width: -webkit-fill-available;
+	border: unset !important;
+	line-height: unset !important;
+	background: unset !important;
+	padding: unset !important;
+	font-size: unset !important;
+	box-shadow: unset !important;
+	width: -webkit-fill-available;
 }
 
 :host:focus {
-  box-shadow: unset !important;
+	box-shadow: unset !important;
+}
+
+input:focus-visible {
+	outline: none !important;
 }

src/input/input.ts

@@ -1,3 +1,5 @@
+import { SchmancyTheme } from '@schmancy/theme/theme.interface'
+import { color } from '@schmancy/directives'
 import TailwindElement from '@schmancy/mixin/tailwind/tailwind.mixin'
 import { LitElement, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
@@ -238,23 +240,40 @@ export default class SchmancyInput extends TailwindElement(style) {
 	}
 
 	protected render(): unknown {
+		const classes = {
+			'block min-w-fit w-full h-[56px] rounded-[4px] border-0 px-2 py-3 text-gray-900 shadow-sm sm:text-sm sm:leading-6':
+				true,
+			'disabled:opacity-40 disabled:cursor-not-allowed': true,
+			'placeholder:text-gray-400': true,
+			'ring-1 ring-inset ring-gray-300  focus:ring-2 focus:ring-inset focus:ring-primary-default': true,
+		}
+		const labelClasses = {
+			'opacity-40': this.disabled,
+		}
 		return html`
-			<label for=${this.id} class="block text-sm font-medium leading-6 text-gray-500">${this.label}</label>
-
-			<input
-				${ref(this.inputRef)}
-				.value=${this.value}
-				.id=${this.id}
-				.name=${this.name}
-				.type=${this.type}
-				.autocomplete=${this.autocomplete}
-				.placeholder=${this.placeholder}
-				.required=${this.required}
-				minlength=${ifDefined(this.minlength)}
-				.inputMode=${this.inputmode}
-				class="block min-w-fit w-full rounded-md border-0 px-2 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200"
-				.disabled=${this.disabled}
-			/>
+			<label class=${this.classMap(labelClasses)} for=${this.id}>
+				<schmancy-typography type="label" token="lg">${this.label}</schmancy-typography>
+			</label>
+			<schmancy-typography type="body">
+				<input
+					${color({
+						bgColor: SchmancyTheme.sys.color.surface.highest,
+						color: SchmancyTheme.sys.color.surface.on,
+					})}
+					${ref(this.inputRef)}
+					.value=${this.value}
+					.id=${this.id}
+					.name=${this.name}
+					.type=${this.type}
+					.autocomplete=${this.autocomplete}
+					.placeholder=${this.placeholder}
+					.required=${this.required}
+					minlength=${ifDefined(this.minlength)}
+					.inputMode=${this.inputmode}
+					class=${this.classMap(classes)}
+					.disabled=${this.disabled}
+				/>
+			</schmancy-typography>
 
 			<slot name="hint"></slot>
 		`

src/theme/defaultTheme.ts

@@ -8,15 +8,15 @@ export const defaultTheme: TSchmancyTheme = {
 			surface: {
 				default: '#FFFFFF',
 				low: '#F5F5F5',
-				high: '#333333',
-				highest: '#000000',
+				high: '#FFD54F',
+				highest: '#E6E0E9',
 				lowest: '#CCCCCC',
-				on: '#000000',
-				onVariant: '#666666',
+				on: '#1D1B20',
+				onVariant: '#1D1B20',
 			},
 
 			primary: {
-				default: '#C19A6B', // Camel color
+				default: '#6750A4', // Camel color
 				on: '#FFFFFF',
 				container: '#C19A6B',
 				onContainer: '#FFFFFF',
@@ -37,7 +37,7 @@ export const defaultTheme: TSchmancyTheme = {
 			},
 
 			error: {
-				default: '#FF0000',
+				default: '#6750A4',
 				on: '#FFFFFF',
 				container: '#FF0000',
 				onContainer: '#FFFFFF',