@gridkitjs/theme-css 0.0.0-dev-20261108090704 → 0.0.0-dev-20261108091259

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridkitjs/theme-css",
-  "version": "0.0.0-dev-20261108090704",
+  "version": "0.0.0-dev-20261108091259",
   "description": "Plain-CSS theme for GridKit — palette tokens, dark mode and grid styles, no Tailwind needed.",
   "license": "MIT",
   "author": "Blagoja Blazhevski",
@@ -17,7 +17,8 @@
     "css"
   ],
   "exports": {
-    "./styles.css": "./src/styles.css"
+    "./styles.css": "./src/styles.css",
+    "./presets/*": "./src/presets/*"
   },
   "files": [
     "src",
@@ -29,7 +30,7 @@
     "prettier": "^3.9.6"
   },
   "scripts": {
-    "build": "node scripts/write-stylesheet.mjs",
+    "build": "node scripts/write-stylesheet.mjs && node scripts/copy-presets.mjs",
     "test": "node --test \"scripts/*.test.mjs\""
   }
 }

package/src/presets/comfortable.css

@@ -0,0 +1,58 @@
+/*
+ * GridKit preset: Comfortable. Roomy rows, soft violet tints, rounded
+ * corners and no lines between columns.
+ *
+ * Load it after the theme's stylesheet, from the same package:
+ *
+ *   @import "@gridkitjs/theme-tailwind/styles.css";
+ *   @import "@gridkitjs/theme-tailwind/presets/comfortable.css";
+ *
+ * or the same two files from @gridkitjs/theme-css.
+ */
+:root {
+  --gridkit-surface-light: oklch(1 0 0);
+  --gridkit-surface-dark: oklch(0.23 0.015 285);
+  --gridkit-surface-muted-light: oklch(0.975 0.007 285);
+  --gridkit-surface-muted-dark: oklch(0.28 0.02 285);
+  --gridkit-line-light: oklch(0.93 0.01 285);
+  --gridkit-line-dark: oklch(0.33 0.02 285);
+  --gridkit-hover-line-light: oklch(0.72 0.08 285);
+  --gridkit-hover-line-dark: oklch(0.7 0.08 285);
+  --gridkit-fg-light: oklch(0.27 0.02 285);
+  --gridkit-fg-dark: oklch(0.95 0.006 285);
+  --gridkit-fg-muted-light: oklch(0.5 0.03 285);
+  --gridkit-fg-muted-dark: oklch(0.75 0.025 285);
+  --gridkit-accent-light: oklch(0.56 0.15 285);
+  --gridkit-accent-dark: oklch(0.75 0.12 285);
+  --gridkit-selected-light: oklch(0.955 0.025 285);
+  --gridkit-selected-dark: oklch(0.33 0.05 285);
+  --gridkit-selected-strong-light: oklch(0.92 0.045 285);
+  --gridkit-selected-strong-dark: oklch(0.39 0.07 285);
+  --gridkit-header-fg-light: var(--gridkit-fg-muted-light);
+  --gridkit-header-fg-dark: var(--gridkit-fg-muted-dark);
+  --gridkit-overlay-shadow-color-light: oklch(0.3 0.05 285 / 0.16);
+  --gridkit-overlay-shadow-color-dark: oklch(0 0 0 / 0.45);
+
+  --gridkit-menu-font-size: 0.9375rem;
+  --gridkit-bar-font-size: 0.875rem;
+  --gridkit-header-font-weight: 600;
+
+  --gridkit-spacing: 0.3125rem;
+  --gridkit-cell-padding-x: calc(var(--gridkit-spacing) * 3);
+  --gridkit-cell-padding-y: calc(var(--gridkit-spacing) * 2.5);
+
+  --gridkit-column-line-width: 0;
+  --gridkit-outer-border-width: var(--gridkit-border-width);
+
+  --gridkit-radius: 0.75rem;
+  --gridkit-menu-radius: 0.75rem;
+  --gridkit-control-radius: 0.5rem;
+
+  --gridkit-icon-size: 1.125rem;
+  --gridkit-header-icon-size: 16px;
+  --gridkit-overlay-shadow: 0 8px 24px;
+  --gridkit-menu-min-width: 14rem;
+  --gridkit-column-chooser-width: 18rem;
+  --gridkit-filter-menu-width: 20rem;
+  --gridkit-transition-duration: 0.15s;
+}

package/src/presets/default.css

@@ -0,0 +1,111 @@
+/*
+ * GridKit preset: Default. The grid's own look, with every theme token set
+ * to its default.
+ *
+ * Copy it to start a theme of your own: change the tokens you want to, and
+ * delete the ones you keep. Load it after the theme's stylesheet, from the
+ * same package:
+ *
+ *   @import "@gridkitjs/theme-tailwind/styles.css";
+ *   @import "@gridkitjs/theme-tailwind/presets/default.css";
+ *
+ * or the same two files from @gridkitjs/theme-css.
+ */
+:root {
+  /* Colours, each a light and dark pair */
+  --gridkit-surface-light: oklch(1 0 0);
+  --gridkit-surface-dark: oklch(0.21 0.01 250);
+  --gridkit-surface-muted-light: oklch(0.97 0.003 250);
+  --gridkit-surface-muted-dark: oklch(0.26 0.012 250);
+  --gridkit-line-light: oklch(0.92 0.005 250);
+  --gridkit-line-dark: oklch(0.33 0.014 250);
+  --gridkit-hover-line-light: oklch(0.65 0.09 255);
+  --gridkit-hover-line-dark: oklch(0.75 0.09 255);
+  --gridkit-fg-light: oklch(0.21 0.01 250);
+  --gridkit-fg-dark: oklch(0.97 0.003 250);
+  --gridkit-fg-muted-light: oklch(0.5 0.015 250);
+  --gridkit-fg-muted-dark: oklch(0.7 0.015 250);
+  --gridkit-accent-light: oklch(0.6 0.17 255);
+  --gridkit-accent-dark: oklch(0.7 0.15 255);
+  --gridkit-selected-light: oklch(0.94 0.03 255);
+  --gridkit-selected-dark: oklch(0.32 0.05 255);
+  --gridkit-selected-strong-light: oklch(0.9 0.05 255);
+  --gridkit-selected-strong-dark: oklch(0.38 0.07 255);
+  --gridkit-header-bg-light: var(--gridkit-surface-light);
+  --gridkit-header-bg-dark: var(--gridkit-surface-dark);
+  --gridkit-header-fg-light: currentColor;
+  --gridkit-header-fg-dark: currentColor;
+  --gridkit-group-row-bg-light: var(--gridkit-surface-muted-light);
+  --gridkit-group-row-bg-dark: var(--gridkit-surface-muted-dark);
+  --gridkit-row-hover-bg-light: var(--gridkit-surface-muted-light);
+  --gridkit-row-hover-bg-dark: var(--gridkit-surface-muted-dark);
+  --gridkit-row-stripe-bg-light: transparent;
+  --gridkit-row-stripe-bg-dark: transparent;
+  --gridkit-focus-ring-light: var(--gridkit-accent-light);
+  --gridkit-focus-ring-dark: var(--gridkit-accent-dark);
+  --gridkit-accent-fg-light: var(--gridkit-surface-light);
+  --gridkit-accent-fg-dark: var(--gridkit-surface-dark);
+  --gridkit-error-light: oklch(from var(--gridkit-accent-light) l c 25);
+  --gridkit-error-dark: oklch(from var(--gridkit-accent-dark) l c 25);
+  --gridkit-scrollbar-thumb-light: color-mix(
+    in oklch,
+    var(--gridkit-fg-muted-light) 45%,
+    transparent
+  );
+  --gridkit-scrollbar-thumb-dark: color-mix(
+    in oklch,
+    var(--gridkit-fg-muted-dark) 45%,
+    transparent
+  );
+  --gridkit-overlay-shadow-color-light: oklch(0 0 0 / 0.15);
+  --gridkit-overlay-shadow-color-dark: oklch(0 0 0 / 0.15);
+
+  /* Typography */
+  --gridkit-font-family: inherit;
+  --gridkit-font-size: 1em;
+  --gridkit-menu-font-size: 0.875rem;
+  --gridkit-bar-font-size: 0.8125rem;
+  --gridkit-hint-font-size: 0.75rem;
+  --gridkit-header-font-weight: 700;
+  --gridkit-header-text-transform: inherit;
+  --gridkit-header-letter-spacing: inherit;
+  --gridkit-group-font-weight: 600;
+  --gridkit-font-variant-numeric: inherit;
+
+  /* Density */
+  --gridkit-spacing: 0.25rem;
+  --gridkit-cell-padding-x: calc(var(--gridkit-spacing) * 2);
+  --gridkit-cell-padding-y: calc(var(--gridkit-spacing) * 2);
+  --gridkit-header-padding-x: var(--gridkit-cell-padding-x);
+  --gridkit-header-padding-y: var(--gridkit-cell-padding-y);
+  --gridkit-toolbar-padding: calc(var(--gridkit-spacing) * 2);
+  --gridkit-group-by-bar-padding: calc(var(--gridkit-spacing) * 2);
+  --gridkit-pager-padding: calc(var(--gridkit-spacing) * 2);
+  --gridkit-menu-item-padding-x: calc(var(--gridkit-spacing) * 3);
+  --gridkit-menu-item-padding-y: calc(var(--gridkit-spacing) * 1.5);
+
+  /* Borders */
+  --gridkit-border-width: 1px;
+  --gridkit-border-style: solid;
+  --gridkit-row-line-width: var(--gridkit-border-width);
+  --gridkit-column-line-width: var(--gridkit-border-width);
+  --gridkit-outer-border-width: 0;
+
+  /* Shape */
+  --gridkit-radius: 0.25rem;
+  --gridkit-menu-radius: 0.375rem;
+  --gridkit-control-radius: 0.25rem;
+
+  /* Details */
+  --gridkit-icon-size: 1rem;
+  --gridkit-header-icon-size: 14px;
+  --gridkit-focus-ring-width: 2px;
+  --gridkit-indicator-width: 2px;
+  --gridkit-overlay-shadow: 0 4px 12px;
+  --gridkit-menu-min-width: 12rem;
+  --gridkit-column-chooser-width: 16rem;
+  --gridkit-filter-menu-width: 18rem;
+  --gridkit-column-chooser-max-height: 17.5rem;
+  --gridkit-filter-checklist-height: 12rem;
+  --gridkit-transition-duration: 0.1s;
+}

package/src/presets/high-contrast.css

@@ -0,0 +1,56 @@
+/*
+ * GridKit preset: High contrast. Black on white, or white on black, with
+ * strong lines, larger small text, thick focus rings and WCAG AAA contrast
+ * for the menus' text.
+ *
+ * Load it after the theme's stylesheet, from the same package:
+ *
+ *   @import "@gridkitjs/theme-tailwind/styles.css";
+ *   @import "@gridkitjs/theme-tailwind/presets/high-contrast.css";
+ *
+ * or the same two files from @gridkitjs/theme-css.
+ */
+:root {
+  --gridkit-surface-light: oklch(1 0 0);
+  --gridkit-surface-dark: oklch(0 0 0);
+  --gridkit-surface-muted-light: oklch(0.94 0 0);
+  --gridkit-surface-muted-dark: oklch(0.26 0 0);
+  --gridkit-line-light: oklch(0.45 0 0);
+  --gridkit-line-dark: oklch(0.72 0 0);
+  --gridkit-hover-line-light: oklch(0 0 0);
+  --gridkit-hover-line-dark: oklch(1 0 0);
+  --gridkit-fg-light: oklch(0 0 0);
+  --gridkit-fg-dark: oklch(1 0 0);
+  --gridkit-fg-muted-light: oklch(0.33 0 0);
+  --gridkit-fg-muted-dark: oklch(0.88 0 0);
+  --gridkit-accent-light: oklch(0.45 0.2 265);
+  --gridkit-accent-dark: oklch(0.82 0.12 230);
+  --gridkit-selected-light: oklch(0.9 0.06 265);
+  --gridkit-selected-dark: oklch(0.33 0.1 265);
+  --gridkit-selected-strong-light: oklch(0.84 0.09 265);
+  --gridkit-selected-strong-dark: oklch(0.4 0.12 265);
+  --gridkit-header-bg-light: oklch(0.9 0 0);
+  --gridkit-header-bg-dark: oklch(0.2 0 0);
+  --gridkit-header-fg-light: oklch(0 0 0);
+  --gridkit-header-fg-dark: oklch(1 0 0);
+  --gridkit-focus-ring-dark: oklch(0.9 0.17 95);
+  --gridkit-overlay-shadow-color-light: oklch(0 0 0 / 0.35);
+  --gridkit-overlay-shadow-color-dark: oklch(0 0 0 / 0.6);
+
+  --gridkit-menu-font-size: 0.9375rem;
+  --gridkit-bar-font-size: 0.875rem;
+  --gridkit-hint-font-size: 0.8125rem;
+  --gridkit-group-font-weight: 700;
+
+  --gridkit-outer-border-width: var(--gridkit-border-width);
+
+  --gridkit-radius: 0.125rem;
+  --gridkit-menu-radius: 0.25rem;
+  --gridkit-control-radius: 0.125rem;
+
+  --gridkit-icon-size: 1.125rem;
+  --gridkit-header-icon-size: 16px;
+  --gridkit-focus-ring-width: 3px;
+  --gridkit-indicator-width: 3px;
+  --gridkit-transition-duration: 0s;
+}

package/src/presets/index.json

@@ -0,0 +1,35 @@
+{
+  "schemaVersion": 1,
+  "presets": [
+    {
+      "id": "default",
+      "label": "Default",
+      "description": "The grid's own look, with every token at its default: a template to copy.",
+      "file": "default.css"
+    },
+    {
+      "id": "spreadsheet",
+      "label": "Spreadsheet",
+      "description": "Dense rows, square corners, a grey header and firm lines between every cell.",
+      "file": "spreadsheet.css"
+    },
+    {
+      "id": "comfortable",
+      "label": "Comfortable",
+      "description": "Roomy rows, soft violet tints, rounded corners and no lines between columns.",
+      "file": "comfortable.css"
+    },
+    {
+      "id": "high-contrast",
+      "label": "High contrast",
+      "description": "Black and white with strong lines, larger small text and thick focus rings, at WCAG AAA contrast.",
+      "file": "high-contrast.css"
+    },
+    {
+      "id": "midnight",
+      "label": "Midnight",
+      "description": "Deep indigo and a vivid violet accent, with an uppercase header and striped rows.",
+      "file": "midnight.css"
+    }
+  ]
+}

package/src/presets/midnight.css

@@ -0,0 +1,56 @@
+/*
+ * GridKit preset: Midnight. Deep indigo and a vivid violet accent, with an
+ * uppercase header and striped rows, at its strongest in dark mode.
+ *
+ * Load it after the theme's stylesheet, from the same package:
+ *
+ *   @import "@gridkitjs/theme-tailwind/styles.css";
+ *   @import "@gridkitjs/theme-tailwind/presets/midnight.css";
+ *
+ * or the same two files from @gridkitjs/theme-css.
+ */
+:root {
+  --gridkit-surface-light: oklch(0.985 0.008 275);
+  --gridkit-surface-dark: oklch(0.2 0.04 272);
+  --gridkit-surface-muted-light: oklch(0.955 0.016 275);
+  --gridkit-surface-muted-dark: oklch(0.25 0.05 272);
+  --gridkit-line-light: oklch(0.9 0.02 275);
+  --gridkit-line-dark: oklch(0.32 0.05 272);
+  --gridkit-hover-line-light: oklch(0.6 0.16 290);
+  --gridkit-hover-line-dark: oklch(0.72 0.14 290);
+  --gridkit-fg-light: oklch(0.25 0.06 275);
+  --gridkit-fg-dark: oklch(0.95 0.015 275);
+  --gridkit-fg-muted-light: oklch(0.47 0.06 275);
+  --gridkit-fg-muted-dark: oklch(0.76 0.04 275);
+  --gridkit-accent-light: oklch(0.5 0.22 290);
+  --gridkit-accent-dark: oklch(0.72 0.17 295);
+  --gridkit-selected-light: oklch(0.93 0.04 290);
+  --gridkit-selected-dark: oklch(0.32 0.09 285);
+  --gridkit-selected-strong-light: oklch(0.88 0.07 290);
+  --gridkit-selected-strong-dark: oklch(0.38 0.11 285);
+  --gridkit-header-bg-light: oklch(0.93 0.03 275);
+  --gridkit-header-bg-dark: oklch(0.16 0.04 272);
+  --gridkit-header-fg-light: oklch(0.32 0.1 280);
+  --gridkit-header-fg-dark: oklch(0.86 0.06 285);
+  --gridkit-row-stripe-bg-light: oklch(0.975 0.01 275);
+  --gridkit-row-stripe-bg-dark: oklch(0.22 0.04 272);
+  --gridkit-accent-fg-light: oklch(1 0 0);
+  --gridkit-overlay-shadow-color-light: oklch(0.25 0.1 275 / 0.2);
+  --gridkit-overlay-shadow-color-dark: oklch(0 0 0 / 0.5);
+
+  --gridkit-bar-font-size: 0.75rem;
+  --gridkit-header-font-weight: 600;
+  --gridkit-header-text-transform: uppercase;
+  --gridkit-header-letter-spacing: 0.06em;
+
+  --gridkit-cell-padding-x: calc(var(--gridkit-spacing) * 3);
+
+  --gridkit-row-line-width: 0;
+
+  --gridkit-radius: 0.5rem;
+  --gridkit-menu-radius: 0.5rem;
+  --gridkit-control-radius: 0.375rem;
+
+  --gridkit-indicator-width: 3px;
+  --gridkit-overlay-shadow: 0 10px 30px;
+}

package/src/presets/spreadsheet.css

@@ -0,0 +1,57 @@
+/*
+ * GridKit preset: Spreadsheet. Dense rows, square corners, a grey header and
+ * firm lines between every cell, with a green accent.
+ *
+ * It restyles the lines the grid's borders prop draws, so pair it with
+ * borders="all" for lines between columns too. Load it after the theme's
+ * stylesheet, from the same package:
+ *
+ *   @import "@gridkitjs/theme-tailwind/styles.css";
+ *   @import "@gridkitjs/theme-tailwind/presets/spreadsheet.css";
+ *
+ * or the same two files from @gridkitjs/theme-css.
+ */
+:root {
+  --gridkit-surface-light: oklch(1 0 0);
+  --gridkit-surface-dark: oklch(0.2 0 0);
+  --gridkit-surface-muted-light: oklch(0.96 0 0);
+  --gridkit-surface-muted-dark: oklch(0.26 0 0);
+  --gridkit-line-light: oklch(0.85 0 0);
+  --gridkit-line-dark: oklch(0.38 0 0);
+  --gridkit-hover-line-light: oklch(0.6 0.1 150);
+  --gridkit-hover-line-dark: oklch(0.7 0.1 150);
+  --gridkit-fg-light: oklch(0.2 0 0);
+  --gridkit-fg-dark: oklch(0.95 0 0);
+  --gridkit-fg-muted-light: oklch(0.47 0 0);
+  --gridkit-fg-muted-dark: oklch(0.74 0 0);
+  --gridkit-accent-light: oklch(0.52 0.13 150);
+  --gridkit-accent-dark: oklch(0.72 0.15 150);
+  --gridkit-selected-light: oklch(0.94 0.04 150);
+  --gridkit-selected-dark: oklch(0.31 0.05 150);
+  --gridkit-selected-strong-light: oklch(0.89 0.07 150);
+  --gridkit-selected-strong-dark: oklch(0.37 0.07 150);
+  --gridkit-header-bg-light: oklch(0.94 0 0);
+  --gridkit-header-bg-dark: oklch(0.27 0 0);
+  --gridkit-overlay-shadow-color-light: oklch(0 0 0 / 0.2);
+  --gridkit-overlay-shadow-color-dark: oklch(0 0 0 / 0.4);
+
+  --gridkit-font-size: 0.875em;
+  --gridkit-menu-font-size: 0.8125rem;
+  --gridkit-bar-font-size: 0.8125rem;
+  --gridkit-header-font-weight: 600;
+  --gridkit-font-variant-numeric: tabular-nums;
+
+  --gridkit-spacing: 0.1875rem;
+  --gridkit-cell-padding-y: var(--gridkit-spacing);
+
+  --gridkit-outer-border-width: var(--gridkit-border-width);
+
+  --gridkit-radius: 0;
+  --gridkit-menu-radius: 0;
+  --gridkit-control-radius: 0;
+
+  --gridkit-icon-size: 0.875rem;
+  --gridkit-header-icon-size: 12px;
+  --gridkit-overlay-shadow: 0 2px 6px;
+  --gridkit-transition-duration: 0s;
+}