Merge pull request #32 from enhance-dev/light-dark-theme

Adds minimal light / dark theme support with accent color

README.md

@@ -103,26 +103,35 @@ The default stacks are:
 `theme` is the set of theme colors.
 Colors must be hexidecimal.
 Colors can be named however you like.
-Colors included in the theme seting will have a color scale generated.
+Colors included in the theme setting will have a color scale generated.
 It is recommended to pick a color, then choose a middle lightness as the basis of the scale so as to maximize the amount of steps in the scale that are not white or black.
 You can choose your naming convention.
 Bootstrap like themes will use generic names such as "primary"
 Material like themes will choose a theme color name i.e. 'indigo'
-There are two special names, light and dark. These will not have a scale generated.
+There are special names, light and dark, accent and accent-contrast. These will not have a scale generated and will be used as the basis for the default theme. The default theme will adjust to user set dark and light modes.
 - `light` is meant to be used as a light text color
 - `dark` is meant to be used as a dark text color
+- `accent` will be set as the [`accent-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) for the document and will be reflected in input and focus styling.
+- `accent-contrast` will be used as the text color used with accented backgrounds. This color should meet accessibility guidelines for contrast.
+
+## UPGRADE GUIDE
+If you want to restore the default Boostrap theme colors the copy and paste the code below into your `config.json`
+```json
+"theme": {
+  "accent": "#007AFF",
+  "accent-cotrast": "#fff",
+  "light": "#f8f9fa",
+  "dark": "#343a40",
+  "primary": "#007bff",
+  "secondary": "#6c757d",
+  "success": "#28a745",
+  "info": "#17a2b8",
+  "warning": "#ffc107",
+  "error": "#dc3545"
+}
+```
 
-The default theme uses a Boostrap like naming convention
-- light "#fff"
-- dark "#222"
-- primary "#1f74d6"
-- secondary "#7327ce"
-- success "#2cdd93"
-- info "#2196f3"
-- warning "#ffeb3b"
-- error "#e21893"
-
-These theme scales are intended to give you enough colors for all use cases including hover, disabled, active and visited states.
+Theme scales are intended to give you enough colors for all use cases including hover, disabled, active and visited states.
 
 #### example color theme scale
 ```css

config.json

@@ -25,20 +25,15 @@
   "theme": {
     "light": "#f8f9fa",
     "dark": "#343a40",
-    "primary": "#007bff",
-    "secondary": "#6c757d",
-    "success": "#28a745",
-    "info": "#17a2b8",
-    "warning": "#ffc107",
-    "error": "#dc3545"
+    "accent": "#007aff",
+    "primary": "#007aff"
   },
   "color": {
-    "crimson": "#eb0052",
-    "muted": "#6c757d",
-    "white": "#fff"
+    "error": "#ff3b2f",
+    "warn": "#ffcc02",
+    "success": "#35c759"
   },
   "properties": {
-    "gradient": "linear-gradient(var(--primary), var(--secondary))"
   },
   "grid": {
     "steps": 6

reset.mjs

@@ -14,9 +14,6 @@ export default function reset (query) {
 html:focus-within {
   scroll-behavior: smooth;
 }
-body {
-  min-height: 100vh;
-}
 audio,
 canvas,
 embed,

size.mjs

@@ -5,21 +5,17 @@ export default function size (query='') {
 .sb-auto${query}{block-size:auto}
 .sb-100${query}{block-size:100%}
 .sb-min-0${query}{min-block-size:0}
-.sb-min-none${query}{min-block-size:none}
 .sb-min-100${query}{min-block-size:100%}
 .sb-max-0${query}{max-block-size:0}
-.sb-max-none${query}{max-block-size:none}
 .sb-max-100${query}{max-block-size:100%}
 .sb-100vw${query}{block-size:100vw}
 .sb-100vh${query}{block-size:100vh}
 .si-0${query}{inline-size:0}
 .si-auto${query}{inline-size:auto}
 .si-100${query}{inline-size:100%}
 .si-min-0${query}{min-inline-size:0}
-.si-min-none${query}{min-inline-size:none}
 .si-min-100${query}{min-inline-size:100%}
 .si-max0${query}{max-inline-size:0}
-.si-max-none${query}{max-inline-size:none}
 .si-max-100${query}{max-inline-size:100%}
 .si-100vw${query}{inline-size:100vw}
 .si-100vh${query}{inline-size:100vh}

theme-color.mjs

@@ -2,7 +2,14 @@ import hextohsl from './hex-to-hsl.mjs'
 
 export default function themeColor({ config }) {
   const { color={}, theme={} } = config
-  theme['grey'] = theme && theme.grey || '#777'
+  const defaultLight = '#f8f9fa'
+  const defaultDark = '#343a40'
+  const lightParts = hextohsl(theme['light'] || defaultLight);
+  const defaultAccent = '#007aff'
+  const defaultAccentContrast = defaultDark
+  theme['accent'] = theme['accent'] || defaultAccent
+  theme['accent-contrast'] = theme['accent-contrast'] || defaultAccentContrast
+
 
   function colorSteps(color, name) {
     const hue = color.h
@@ -22,19 +29,56 @@ export default function themeColor({ config }) {
     `
   }
 
+
   return /*css*/`
 /*** Theme Colors ***/
 :root {
 ${Object.keys(theme).map(name => {
-if (name === 'light' || name === 'dark') {
+  if (name === 'light' ||
+      name === 'dark' ||
+      name === 'accent' ||
+      name === 'accent-contrast') {
   return `  --${name}: ${theme[name]};`
 }
-
 else {
   return colorSteps(hextohsl(theme[name]), name)
 }
 }).join('\n')}
+
 ${Object.keys(color).map(name => `  --${name}: ${color[name]};`).join('\n')}
+  --back: var(--light, ${defaultLight});
+  --fore: var(--dark, ${defaultDark});
+  ${colorSteps({ h: lightParts.h, s: 0, l: 50}, 'grey')}
+  --focus-size: 1px;
+  --focus-offset: 1px;
+  accent-color: var(--accent);
+  color-scheme: light dark;
+}
+
+:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
+  outline: none;
+}
+
+:is(a, button, input, textarea, summary):focus-visible {
+  outline: max(var(--focus-size), 1px) solid var(--accent);
+  outline-offset: var(--focus-offset);
+}
+
+:is(a, button, input, textarea, summary):not(:focus):not(:placeholder-shown):invalid {
+  outline: max(var(--focus-size), 1px) solid var(--error);
+  outline-offset: var(--focus-offset);
+}
+
+:is(a, button, input, textarea, summary):not(:focus):not(:placeholder-shown):invalid {
+  outline: max(var(--focus-size), 1px) solid var(--error);
+  outline-offset: var(--focus-offset);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --back: var(--dark, ${defaultDark});
+    --fore: var(--light, ${defaultLight});
+  }
 }
 `