@troennes/minium 0.1.0 → 0.2.0

package/dist/themes/yellow.css

@@ -0,0 +1,159 @@
+@layer tokens, theme, reset, base, layout, components, project, utilities;
+
+/* Theme: yellow (neutral: sand, primary: yellow, accent: green, success: teal, warning: orange). Generated by scripts/build-themes.mjs from scripts/themes.json. Do not edit. */
+@layer theme {
+  :root {
+    /* neutral: sand */
+    --neutral-1: light-dark(#fdfdfc, #111110);
+    --neutral-2: light-dark(#f9f9f8, #191918);
+    --neutral-3: light-dark(#f1f0ef, #222221);
+    --neutral-4: light-dark(#e9e8e6, #2a2a28);
+    --neutral-5: light-dark(#e2e1de, #31312e);
+    --neutral-8: light-dark(#bcbbb5, #62605b);
+    --neutral-11: light-dark(#63635e, #b5b3ad);
+    --neutral-12: light-dark(#21201c, #eeeeec);
+    --neutral-a2: light-dark(#25250007, #f4f4f309);
+    --neutral-a3: light-dark(#20100010, #f6f6f513);
+    --neutral-a4: light-dark(#1f150019, #fefef31b);
+    --neutral-a5: light-dark(#1f180021, #fbfbeb23);
+    --neutral-a6: light-dark(#19130029, #fffaed2d);
+    --neutral-a7: light-dark(#19140035, #fffbed3c);
+
+    /* primary: yellow */
+    --primary-7: light-dark(#e4c767, #665417);
+    --primary-9: light-dark(#ffe629, #ffe629);
+    --primary-10: light-dark(#ffdc00, #ffff57);
+    --primary-11: light-dark(#9e6c00, #f5e147);
+    --primary-a2: light-dark(#f4dd0016, #f9b4000b);
+    --primary-a3: light-dark(#ffee0047, #ffaa001e);
+    --primary-a4: light-dark(#ffe3016b, #fdb70028);
+    --primary-a5: light-dark(#ffd5008f, #febb0036);
+    --primary-a6: light-dark(#ebbc0097, #fec40046);
+    --primary-a7: light-dark(#d2a10098, #fdcb225c);
+    --primary-a11: light-dark(#9e6c00, #fee949f5);
+    --primary-text: light-dark(var(--neutral-12), var(--primary-11));
+    --primary-inverse: light-dark(var(--neutral-12), var(--neutral-1));
+
+    /* accent: green */
+    --accent-7: light-dark(#8eceaa, #28684a);
+    --accent-9: light-dark(#30a46c, #30a46c);
+    --accent-10: light-dark(#2b9a66, #33b074);
+    --accent-11: light-dark(#218358, #3dd68c);
+    --accent-a2: light-dark(#00a32f0b, #29f99d0b);
+    --accent-a3: light-dark(#00a43319, #22ff991e);
+    --accent-a4: light-dark(#00a83829, #11ff992d);
+    --accent-a5: light-dark(#019c393b, #2bffa23c);
+    --accent-a6: light-dark(#00963c52, #44ffaa4b);
+    --accent-a7: light-dark(#00914071, #50fdac5e);
+    --accent-a11: light-dark(#00713fde, #46fea5d4);
+    --accent-text: var(--accent-11);
+    --accent-inverse: white;
+
+    /* success: teal */
+    --success-7: light-dark(#83cdc1, #1c6961);
+    --success-9: light-dark(#12a594, #12a594);
+    --success-10: light-dark(#0d9b8a, #0eb39e);
+    --success-11: light-dark(#008573, #0bd8b6);
+    --success-a2: light-dark(#00aa800c, #12fbe60c);
+    --success-a3: light-dark(#00c69d1f, #00ffe61e);
+    --success-a4: light-dark(#00c39633, #00ffe92d);
+    --success-a5: light-dark(#00b49047, #00ffea3b);
+    --success-a6: light-dark(#00a6855e, #1cffe84b);
+    --success-a7: light-dark(#0099807c, #2efde85f);
+    --success-a11: light-dark(#008573, #0afed5d6);
+    --success-text: var(--success-11);
+    --success-inverse: white;
+
+    /* warning: orange */
+    --warning-7: light-dark(#f5ae73, #7e451d);
+    --warning-9: light-dark(#f76b15, #f76b15);
+    --warning-10: light-dark(#ef5f00, #ff801f);
+    --warning-11: light-dark(#cc4e00, #ffa057);
+    --warning-a2: light-dark(#ff8e0012, #fe6d000e);
+    --warning-a3: light-dark(#ff9c0029, #fb6a0025);
+    --warning-a4: light-dark(#ff91014a, #ff590039);
+    --warning-a5: light-dark(#ff8b0065, #ff61004a);
+    --warning-a6: light-dark(#ff81007d, #fd75045c);
+    --warning-a7: light-dark(#ed6c008c, #ff832c75);
+    --warning-a11: light-dark(#cc4e00, #ffa057);
+    --warning-text: var(--warning-11);
+    --warning-inverse: white;
+
+    /* icons */
+    --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2312a594' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      :root {
+        /* neutral: sand */
+        --neutral-1: light-dark(color(display-p3 0.992 0.992 0.989), color(display-p3 0.067 0.067 0.063));
+        --neutral-2: light-dark(color(display-p3 0.977 0.977 0.973), color(display-p3 0.098 0.098 0.094));
+        --neutral-3: light-dark(color(display-p3 0.943 0.942 0.936), color(display-p3 0.135 0.135 0.129));
+        --neutral-4: light-dark(color(display-p3 0.913 0.912 0.903), color(display-p3 0.164 0.163 0.156));
+        --neutral-5: light-dark(color(display-p3 0.885 0.883 0.873), color(display-p3 0.193 0.192 0.183));
+        --neutral-8: light-dark(color(display-p3 0.738 0.734 0.713), color(display-p3 0.384 0.378 0.357));
+        --neutral-11: light-dark(color(display-p3 0.388 0.388 0.37), color(display-p3 0.707 0.703 0.68));
+        --neutral-12: light-dark(color(display-p3 0.129 0.126 0.111), color(display-p3 0.933 0.933 0.926));
+        --neutral-a2: light-dark(color(display-p3 0.161 0.161 0.024 / 0.028), color(display-p3 0.992 0.992 0.988 / 0.034));
+        --neutral-a3: light-dark(color(display-p3 0.067 0.067 0.008 / 0.063), color(display-p3 0.996 0.996 0.992 / 0.072));
+        --neutral-a4: light-dark(color(display-p3 0.129 0.129 0.012 / 0.099), color(display-p3 0.992 0.992 0.953 / 0.106));
+        --neutral-a5: light-dark(color(display-p3 0.098 0.067 0.008 / 0.126), color(display-p3 1 1 0.965 / 0.135));
+        --neutral-a6: light-dark(color(display-p3 0.102 0.075 0.004 / 0.161), color(display-p3 1 0.976 0.929 / 0.177));
+        --neutral-a7: light-dark(color(display-p3 0.098 0.098 0.004 / 0.208), color(display-p3 1 0.984 0.929 / 0.236));
+
+        /* primary: yellow */
+        --primary-7: light-dark(color(display-p3 0.876 0.785 0.46), color(display-p3 0.389 0.331 0.135));
+        --primary-9: light-dark(color(display-p3 1 0.92 0.22), color(display-p3 1 0.92 0.22));
+        --primary-10: light-dark(color(display-p3 0.977 0.868 0.291), color(display-p3 1 1 0.456));
+        --primary-11: light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392));
+        --primary-a2: light-dark(color(display-p3 0.953 0.855 0.008 / 0.079), color(display-p3 0.996 0.792 0 / 0.038));
+        --primary-a3: light-dark(color(display-p3 0.988 0.925 0.004 / 0.251), color(display-p3 0.996 0.71 0 / 0.11));
+        --primary-a4: light-dark(color(display-p3 0.98 0.875 0.004 / 0.373), color(display-p3 0.996 0.741 0 / 0.152));
+        --primary-a5: light-dark(color(display-p3 0.969 0.816 0.004 / 0.491), color(display-p3 0.996 0.765 0 / 0.202));
+        --primary-a6: light-dark(color(display-p3 0.875 0.71 0 / 0.526), color(display-p3 0.996 0.816 0.082 / 0.261));
+        --primary-a7: light-dark(color(display-p3 0.769 0.604 0 / 0.542), color(display-p3 1 0.831 0.263 / 0.345));
+        --primary-a11: light-dark(color(display-p3 0.6 0.44 0), color(display-p3 0.948 0.885 0.392));
+
+        /* accent: green */
+        --accent-7: light-dark(color(display-p3 0.61 0.801 0.675), color(display-p3 0.227 0.403 0.298));
+        --accent-9: light-dark(color(display-p3 0.332 0.634 0.442), color(display-p3 0.332 0.634 0.442));
+        --accent-10: light-dark(color(display-p3 0.308 0.595 0.417), color(display-p3 0.357 0.682 0.474));
+        --accent-11: light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573));
+        --accent-a2: light-dark(color(display-p3 0.024 0.565 0.129 / 0.036), color(display-p3 0.341 0.98 0.616 / 0.043));
+        --accent-a3: light-dark(color(display-p3 0.012 0.596 0.145 / 0.087), color(display-p3 0.376 0.996 0.655 / 0.114));
+        --accent-a4: light-dark(color(display-p3 0.008 0.588 0.145 / 0.142), color(display-p3 0.341 0.996 0.635 / 0.173));
+        --accent-a5: light-dark(color(display-p3 0.004 0.541 0.157 / 0.204), color(display-p3 0.408 1 0.678 / 0.232));
+        --accent-a6: light-dark(color(display-p3 0.004 0.518 0.157 / 0.283), color(display-p3 0.475 1 0.706 / 0.29));
+        --accent-a7: light-dark(color(display-p3 0.004 0.486 0.165 / 0.389), color(display-p3 0.514 1 0.706 / 0.362));
+        --accent-a11: light-dark(color(display-p3 0.19 0.5 0.32), color(display-p3 0.434 0.828 0.573));
+
+        /* success: teal */
+        --success-7: light-dark(color(display-p3 0.581 0.798 0.756), color(display-p3 0.205 0.406 0.379));
+        --success-9: light-dark(color(display-p3 0.297 0.637 0.581), color(display-p3 0.297 0.637 0.581));
+        --success-10: light-dark(color(display-p3 0.275 0.599 0.542), color(display-p3 0.319 0.69 0.62));
+        --success-11: light-dark(color(display-p3 0.08 0.5 0.43), color(display-p3 0.388 0.835 0.719));
+        --success-a2: light-dark(color(display-p3 0.02 0.647 0.467 / 0.044), color(display-p3 0.235 0.988 0.902 / 0.047));
+        --success-a3: light-dark(color(display-p3 0.004 0.741 0.557 / 0.106), color(display-p3 0.235 1 0.898 / 0.118));
+        --success-a4: light-dark(color(display-p3 0.004 0.702 0.537 / 0.169), color(display-p3 0.18 0.996 0.929 / 0.173));
+        --success-a5: light-dark(color(display-p3 0.004 0.643 0.494 / 0.24), color(display-p3 0.31 1 0.933 / 0.227));
+        --success-a6: light-dark(color(display-p3 0.004 0.569 0.447 / 0.318), color(display-p3 0.396 1 0.933 / 0.286));
+        --success-a7: light-dark(color(display-p3 0.004 0.518 0.424 / 0.42), color(display-p3 0.443 1 0.925 / 0.366));
+        --success-a11: light-dark(color(display-p3 0.08 0.5 0.43), color(display-p3 0.388 0.835 0.719));
+
+        /* warning: orange */
+        --warning-7: light-dark(color(display-p3 0.919 0.693 0.486), color(display-p3 0.465 0.283 0.147));
+        --warning-9: light-dark(color(display-p3 0.9 0.45 0.2), color(display-p3 0.9 0.45 0.2));
+        --warning-10: light-dark(color(display-p3 0.87 0.409 0.164), color(display-p3 0.98 0.51 0.23));
+        --warning-11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
+        --warning-a2: light-dark(color(display-p3 0.886 0.533 0.008 / 0.067), color(display-p3 0.992 0.529 0 / 0.051));
+        --warning-a3: light-dark(color(display-p3 0.922 0.584 0.008 / 0.15), color(display-p3 0.996 0.486 0 / 0.131));
+        --warning-a4: light-dark(color(display-p3 1 0.604 0.004 / 0.314), color(display-p3 0.996 0.384 0 / 0.211));
+        --warning-a5: light-dark(color(display-p3 1 0.569 0.004 / 0.416), color(display-p3 1 0.455 0 / 0.265));
+        --warning-a6: light-dark(color(display-p3 0.949 0.494 0.004 / 0.455), color(display-p3 1 0.529 0.129 / 0.332));
+        --warning-a7: light-dark(color(display-p3 0.839 0.408 0 / 0.514), color(display-p3 1 0.569 0.251 / 0.429));
+        --warning-a11: light-dark(color(display-p3 0.76 0.34 0), color(display-p3 1 0.63 0.38));
+      }
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@troennes/minium",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "The minimum CSS and HTML to build anything. A semantic-first, pure-CSS, modern CSS library",
   "type": "module",
   "license": "MIT",
@@ -28,6 +28,7 @@
     ".": "./dist/minium.css",
     "./min": "./dist/minium.min.css",
     "./integrations/*": "./dist/integrations/*",
+    "./themes/*": "./dist/themes/*",
     "./fonts/*": "./dist/fonts/*",
     "./package.json": "./package.json"
   },
@@ -46,8 +47,10 @@
   },
   "scripts": {
     "build": "node scripts/build-css.mjs",
-    "test": "npm run test:lint && npm run test:size",
+    "build:themes": "node scripts/build-themes.mjs",
+    "test": "npm run test:lint && npm run test:themes && npm run test:size",
     "test:lint": "stylelint \"css/**/*.css\"",
+    "test:themes": "node scripts/check-themes.mjs",
     "test:size": "node scripts/check-size.mjs",
     "prepublishOnly": "npm run build && npm test"
   },
@@ -55,6 +58,7 @@
     "access": "public"
   },
   "devDependencies": {
+    "@radix-ui/colors": "^3.0.0",
     "stylelint": "^16.10.0",
     "stylelint-config-standard": "^36.0.1"
   }