@loidolt/theme-tokens 0.6.0 → 0.8.0

package/README.md

@@ -13,6 +13,7 @@ import { colors, semantic, spacing, tokens } from '@loidolt/theme-tokens';
 ```css
 @import '@loidolt/theme-tokens/css';
 @import '@loidolt/theme-tokens/css/dark';
+@import '@loidolt/theme-tokens/css/presets/soft'; /* built-in presets: loidolt, soft, compact */
 ```
 
 WCAG contrast arithmetic, for colours chosen at runtime:
@@ -26,3 +27,7 @@ getContrastTextColor(userColour); // the theme ink that reads best on it
 
 Named media frames live in `aspectRatio` (`square`, `video`, `photo`, `portrait`, `wide`) and as
 `--loidolt-aspect-*`.
+
+Define your own style presets with `definePreset()`, write their stylesheets with
+`presetStylesheets()`, and check them with `auditContrast()`. See the
+[Presets](https://github.com/loidolt/loidolt-theme#presets) section of the main README.

package/dist/dark-auto.css

@@ -36,6 +36,44 @@
   --loidolt-focus-ring: #f0895c;
   --loidolt-shadow-color: #000000;
   --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent);
+  --loidolt-chart-1: #e0672f;
+  --loidolt-chart-2: #6ea5bd;
+  --loidolt-chart-3: #93b287;
+  --loidolt-chart-4: #d9ab63;
+  --loidolt-chart-5: #c49ac0;
+  --loidolt-chart-6: #b8ad96;
+  --loidolt-chart-7: #6fb8a6;
+  --loidolt-chart-8: #c79a78;
+  --loidolt-chart-sequential-1: #3a2a1d;
+  --loidolt-chart-sequential-2: #6b4225;
+  --loidolt-chart-sequential-3: #a4602f;
+  --loidolt-chart-sequential-4: #d98a4d;
+  --loidolt-chart-sequential-5: #f2bd8a;
+  --loidolt-chart-diverging-1: #85b6ca;
+  --loidolt-chart-diverging-2: #5a8ea3;
+  --loidolt-chart-diverging-3: #35596a;
+  --loidolt-chart-diverging-4: #3a3d34;
+  --loidolt-chart-diverging-5: #7a4428;
+  --loidolt-chart-diverging-6: #bf6a3a;
+  --loidolt-chart-diverging-7: #f0895c;
+  --loidolt-chart-positive: #93b287;
+  --loidolt-chart-negative: #e88b81;
+  --loidolt-map-land: #161814;
+  --loidolt-map-water: #1d2b31;
+  --loidolt-map-park: #1f271c;
+  --loidolt-map-road: #2b2e26;
+  --loidolt-map-road-major: #3a3d34;
+  --loidolt-map-building: #24271f;
+  --loidolt-map-boundary: #787c6b;
+  --loidolt-map-label: #ebe7dc;
+  --loidolt-map-label-halo: #161814;
+  --loidolt-syntax-keyword: #a9441d;
+  --loidolt-syntax-string: #3f5139;
+  --loidolt-syntax-comment: #5f5b50;
+  --loidolt-syntax-constant: #7c4d17;
+  --loidolt-syntax-function: #265162;
+  --loidolt-syntax-parameter: #7a4a78;
+  --loidolt-syntax-punctuation: #474a42;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -76,5 +114,43 @@
     --loidolt-focus-ring: #f0895c;
     --loidolt-shadow-color: #000000;
     --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent);
+    --loidolt-chart-1: #e0672f;
+    --loidolt-chart-2: #6ea5bd;
+    --loidolt-chart-3: #93b287;
+    --loidolt-chart-4: #d9ab63;
+    --loidolt-chart-5: #c49ac0;
+    --loidolt-chart-6: #b8ad96;
+    --loidolt-chart-7: #6fb8a6;
+    --loidolt-chart-8: #c79a78;
+    --loidolt-chart-sequential-1: #3a2a1d;
+    --loidolt-chart-sequential-2: #6b4225;
+    --loidolt-chart-sequential-3: #a4602f;
+    --loidolt-chart-sequential-4: #d98a4d;
+    --loidolt-chart-sequential-5: #f2bd8a;
+    --loidolt-chart-diverging-1: #85b6ca;
+    --loidolt-chart-diverging-2: #5a8ea3;
+    --loidolt-chart-diverging-3: #35596a;
+    --loidolt-chart-diverging-4: #3a3d34;
+    --loidolt-chart-diverging-5: #7a4428;
+    --loidolt-chart-diverging-6: #bf6a3a;
+    --loidolt-chart-diverging-7: #f0895c;
+    --loidolt-chart-positive: #93b287;
+    --loidolt-chart-negative: #e88b81;
+    --loidolt-map-land: #161814;
+    --loidolt-map-water: #1d2b31;
+    --loidolt-map-park: #1f271c;
+    --loidolt-map-road: #2b2e26;
+    --loidolt-map-road-major: #3a3d34;
+    --loidolt-map-building: #24271f;
+    --loidolt-map-boundary: #787c6b;
+    --loidolt-map-label: #ebe7dc;
+    --loidolt-map-label-halo: #161814;
+    --loidolt-syntax-keyword: #a9441d;
+    --loidolt-syntax-string: #3f5139;
+    --loidolt-syntax-comment: #5f5b50;
+    --loidolt-syntax-constant: #7c4d17;
+    --loidolt-syntax-function: #265162;
+    --loidolt-syntax-parameter: #7a4a78;
+    --loidolt-syntax-punctuation: #474a42;
   }
 }

package/dist/dark.css

@@ -36,4 +36,42 @@
   --loidolt-focus-ring: #f0895c;
   --loidolt-shadow-color: #000000;
   --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent);
+  --loidolt-chart-1: #e0672f;
+  --loidolt-chart-2: #6ea5bd;
+  --loidolt-chart-3: #93b287;
+  --loidolt-chart-4: #d9ab63;
+  --loidolt-chart-5: #c49ac0;
+  --loidolt-chart-6: #b8ad96;
+  --loidolt-chart-7: #6fb8a6;
+  --loidolt-chart-8: #c79a78;
+  --loidolt-chart-sequential-1: #3a2a1d;
+  --loidolt-chart-sequential-2: #6b4225;
+  --loidolt-chart-sequential-3: #a4602f;
+  --loidolt-chart-sequential-4: #d98a4d;
+  --loidolt-chart-sequential-5: #f2bd8a;
+  --loidolt-chart-diverging-1: #85b6ca;
+  --loidolt-chart-diverging-2: #5a8ea3;
+  --loidolt-chart-diverging-3: #35596a;
+  --loidolt-chart-diverging-4: #3a3d34;
+  --loidolt-chart-diverging-5: #7a4428;
+  --loidolt-chart-diverging-6: #bf6a3a;
+  --loidolt-chart-diverging-7: #f0895c;
+  --loidolt-chart-positive: #93b287;
+  --loidolt-chart-negative: #e88b81;
+  --loidolt-map-land: #161814;
+  --loidolt-map-water: #1d2b31;
+  --loidolt-map-park: #1f271c;
+  --loidolt-map-road: #2b2e26;
+  --loidolt-map-road-major: #3a3d34;
+  --loidolt-map-building: #24271f;
+  --loidolt-map-boundary: #787c6b;
+  --loidolt-map-label: #ebe7dc;
+  --loidolt-map-label-halo: #161814;
+  --loidolt-syntax-keyword: #a9441d;
+  --loidolt-syntax-string: #3f5139;
+  --loidolt-syntax-comment: #5f5b50;
+  --loidolt-syntax-constant: #7c4d17;
+  --loidolt-syntax-function: #265162;
+  --loidolt-syntax-parameter: #7a4a78;
+  --loidolt-syntax-punctuation: #474a42;
 }