@gridkitjs/theme-css 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Blagoja Blazhevski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,55 @@
-# Temporary Holding Version
+# @gridkitjs/theme-css
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Plain-CSS theme for [GridKit](https://github.com/gridkitjs/gridkitjs) —
+palette tokens, dark mode and the grid's styles, for an app without
+Tailwind. It is generated from
+[`@gridkitjs/theme-tailwind`](https://www.npmjs.com/package/@gridkitjs/theme-tailwind),
+so both draw the same grid.
+
+> **Early development.** The API is still moving and may break between minor
+> versions.
+
+```bash
+pnpm add @gridkitjs/theme-css
+```
+
+Import it once, before your own CSS:
+
+```css
+@import "@gridkitjs/theme-css/styles.css";
+```
+
+`@gridkitjs/react` renders semantic class names (`gridkit-data-grid`,
+`header-cell`, `grid-row`), and this stylesheet targets them directly.
+
+## Dark mode
+
+The grid follows the system's colour scheme (`prefers-color-scheme`). An app
+with its own light and dark switch puts `.gridkit-light` or `.gridkit-dark`
+on `<html>`, or on any ancestor of one grid to pin that grid alone:
+
+```js
+document.documentElement.classList.toggle("gridkit-dark", isDark);
+document.documentElement.classList.toggle("gridkit-light", !isDark);
+```
+
+## Theming
+
+Every colour, size and line is a `--gridkit-*` custom property. Override the
+ones you change on `:root`, after the import; a colour is set by its light
+and dark pair:
+
+```css
+:root {
+  --gridkit-spacing: 0.1875rem;
+  --gridkit-accent-light: oklch(0.6 0.17 145);
+  --gridkit-accent-dark: oklch(0.7 0.15 145);
+}
+```
+
+Every token and its default is listed at
+[gridkitjs.com](https://gridkitjs.com/en/docs/theme-tailwind/tokens).
+
+## License
+
+MIT © Blagoja Blazhevski

package/package.json

@@ -1,6 +1,36 @@
 {
   "name": "@gridkitjs/theme-css",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "description": "Plain-CSS theme for GridKit — palette tokens, dark mode and grid styles, no Tailwind needed.",
+  "license": "MIT",
+  "author": "Blagoja Blazhevski",
+  "homepage": "https://github.com/gridkitjs/gridkitjs#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gridkitjs/gridkitjs.git",
+    "directory": "packages/theme-css"
+  },
+  "keywords": [
+    "gridkit",
+    "datagrid",
+    "theme",
+    "css"
+  ],
+  "exports": {
+    "./styles.css": "./src/styles.css",
+    "./presets/*": "./src/presets/*"
+  },
+  "files": [
+    "src",
+    "LICENSE",
+    "README.md"
+  ],
+  "devDependencies": {
+    "postcss": "^8.5.25",
+    "prettier": "^3.9.6"
+  },
+  "scripts": {
+    "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;
+}