@sckyzo/cosmos-theme 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ All notable changes to `@sckyzo/cosmos-theme` are documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.4.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-theme@0.3.0...@sckyzo/cosmos-theme@0.4.0) (2026-10-30)
+
+
+### Features
+
+* **react:** add density to appearance settings and a compact DataTable ([000d1c2](https://github.com/SckyzO/cosmos/commit/000d1c211c4a4bfffd22e1b119558d0e0cb57235))
+* **theme:** add 20px and 24px row padding tokens ([e4acd79](https://github.com/SckyzO/cosmos/commit/e4acd79ac1cc8e47551e1b2d82efe032c7ed95fa))
+* **theme:** add a 4px row padding token ([4886cf3](https://github.com/SckyzO/cosmos/commit/4886cf3c65edbdef99ee88a4f9dc822ae8ea3000))
+* **theme:** add a 5px row token that stops at 4px ([842804d](https://github.com/SckyzO/cosmos/commit/842804d10ab958a7c3f083ebd842597ffb16bd78))
+* **theme:** add data-density and its spacing tokens ([070f74a](https://github.com/SckyzO/cosmos/commit/070f74a8135fe3564b4609a8a53755fc9e12d002))
+* **theme:** follow the nearest dir attribute in the rtl variant ([6e25a80](https://github.com/SckyzO/cosmos/commit/6e25a800d64c3c3208c1d0eea940fe60980842d3))
+* **theme:** rescale every corner with data-radius ([2bdea86](https://github.com/SckyzO/cosmos/commit/2bdea865a341d3052e9a1fe10a1c7875f6793f9f))
+
 ## [0.3.0](https://github.com/SckyzO/cosmos/compare/@sckyzo/cosmos-theme@0.2.0...@sckyzo/cosmos-theme@0.3.0) (2026-10-27)
 
 

package/README.md

@@ -55,6 +55,11 @@ Two independent settings, both on the `<html>` element:
 
   `.dark` and `.deep-blue` both enable Tailwind's `dark:` variant.
 
+- **Direction**: the native `dir` attribute, on `<html>` or any ancestor. Tailwind's `rtl:` variant is
+  redefined to follow the nearest `dir` attribute, so a `dir="ltr"` island inside a right-to-left
+  page is not flipped. It does not follow `dir="auto"`, nor a `dir="rtl"` nested inside such an
+  island.
+
 - **Accent**: a `data-accent` attribute that swaps the whole `--color-brand-*`
   scale (and with it `--color-accent` and the focus ring). Leave it off for
   `blue`. The others are `indigo`, `violet`, `purple`, `rose`, `teal`, `cyan`,
@@ -130,6 +135,62 @@ Two more settings on `<html>`, both optional:
 
 Both attributes also work on an element below `<html>`, for one part of a page.
 
+## Density
+
+A `data-density` attribute on `<html>` tightens or loosens the vertical rhythm of
+every control and row at once: `compact`, none for the default, or `comfortable`.
+Only the heights and the vertical padding of rows move; panel padding, gaps and
+horizontal padding stay. It applies on touch screens too: the user's choice wins.
+
+| Token                          | Default    | `compact` | `comfortable` | Used by                     |
+| ------------------------------ | ---------- | --------- | ------------- | --------------------------- |
+| `h-ctrl-28` … `h-ctrl-48`      | 28–48px    | 4px less  | 4px more      | buttons, fields, segments   |
+| `py-row-4` … `py-row-24`       | 4–24px     | 2px less  | 2px more      | list rows, menu items, tabs |
+| `py-cell-head`, `py-cell-body` | 12px, 14px | 8px, 10px | 16px, 20px    | table cells                 |
+
+The token is named by its default size: `h-ctrl-36` is today's `h-9`. The smallest
+control, 28px, stays at 24px in `compact`, the WCAG 2.5.8 floor, and `py-row-5`
+stops at 4px for the same reason. They are `--spacing-ctrl-*`, `--spacing-row-*` and
+`--spacing-cell-*` theme variables, so any utility of the spacing scale takes
+them (`h-ctrl-36`, `min-h-ctrl-36`, `size-ctrl-32`, `py-row-8`). Use them for a
+control or a row of your own and it follows the page.
+
+```html
+<html class="sand" data-density="compact"></html>
+```
+
+The attribute also works on an element below `<html>`; `data-density="default"`
+opts a part of a compact or comfortable page out (a `DataTable` with its own
+`density` does this).
+
+## Radius
+
+A `data-radius` attribute on `<html>` rescales every corner at once: `none`,
+`sm`, none for the default, or `lg`. It rebuilds Tailwind's own `--radius-*`
+variables, the ones `rounded-sm` to `rounded-4xl` read, so a component needs
+nothing more than those utilities.
+
+| Step      | `--radius-*`                    | `rounded-lg` (8px by default) |
+| --------- | ------------------------------- | ----------------------------- |
+| `none`    | 2px, every one                  | 2px                           |
+| `sm`      | half of Tailwind's              | 4px                           |
+| (default) | Tailwind's, nothing moves       | 8px                           |
+| `lg`      | one and a half times Tailwind's | 12px                          |
+
+`rounded-full` and `rounded-none` are literals and never change: avatars,
+status dots, switches, badges and pill buttons stay round at every step. A
+corner that must follow the page goes through the scale. A bare `rounded` is a
+fixed `0.25rem` in Tailwind 4, so write `rounded-sm` (the same value, through
+the variable); an arbitrary `rounded-[10px]` is fixed too, and
+`rounded-[calc(var(--radius-lg)*1.25)]` is not.
+
+```html
+<html class="sand" data-radius="lg"></html>
+```
+
+The attribute also works on an element below `<html>`; `data-radius="default"`
+opts a part of the page out of its parent's radius.
+
 ## Tokens
 
 See [`css/tailwind-tokens.css`](css/tailwind-tokens.css) for the full source.

package/css/css-vars.css

@@ -500,6 +500,111 @@
   }
 }
 
+/* ── Density ───────────────────────────────────────────────────────────────
+ * data-density moves the vertical rhythm only: the height of controls
+ * (--spacing-ctrl-*), the vertical padding of rows (--spacing-row-*) and of
+ * table cells (--spacing-cell-*). Panel padding, gaps and the horizontal
+ * padding stay. compact takes 4px off a control (the smallest, 28px, stays at
+ * 24px, the WCAG 2.5.8 floor) and 2px off each side of a row; comfortable adds
+ * as much. No attribute keeps today's values; 'default' is the same, spelled
+ * out so a part of the page (a DataTable) can opt out of its parent's density.
+ *
+ * Declared again here for the same reason as the text sizes: a custom property
+ * resolves var() on the element that declares it, so the tokens are rebuilt
+ * on every element that carries the attribute. */
+[data-density] {
+  --spacing-ctrl-28: calc(1.75rem + var(--cosmos-density-control, 0rem));
+  --spacing-ctrl-32: calc(2rem + var(--cosmos-density-control, 0rem));
+  --spacing-ctrl-36: calc(2.25rem + var(--cosmos-density-control, 0rem));
+  --spacing-ctrl-40: calc(2.5rem + var(--cosmos-density-control, 0rem));
+  --spacing-ctrl-44: calc(2.75rem + var(--cosmos-density-control, 0rem));
+  --spacing-ctrl-48: calc(3rem + var(--cosmos-density-control, 0rem));
+  --spacing-row-4: calc(0.25rem + var(--cosmos-density-row, 0rem));
+  /* 5px rows are 26px sidebar rows of 16px text: compact stops at 4px, the 24px floor. */
+  --spacing-row-5: max(0.25rem, calc(0.3125rem + var(--cosmos-density-row, 0rem)));
+  --spacing-row-6: calc(0.375rem + var(--cosmos-density-row, 0rem));
+  --spacing-row-8: calc(0.5rem + var(--cosmos-density-row, 0rem));
+  --spacing-row-10: calc(0.625rem + var(--cosmos-density-row, 0rem));
+  --spacing-row-12: calc(0.75rem + var(--cosmos-density-row, 0rem));
+  --spacing-row-14: calc(0.875rem + var(--cosmos-density-row, 0rem));
+  --spacing-row-16: calc(1rem + var(--cosmos-density-row, 0rem));
+  --spacing-row-20: calc(1.25rem + var(--cosmos-density-row, 0rem));
+  --spacing-row-24: calc(1.5rem + var(--cosmos-density-row, 0rem));
+  --spacing-cell-head: calc(0.75rem + var(--cosmos-density-cell-head, 0rem));
+  --spacing-cell-body: calc(0.875rem + var(--cosmos-density-cell-body, 0rem));
+}
+
+[data-density='default'] {
+  --cosmos-density-control: 0rem;
+  --cosmos-density-row: 0rem;
+  --cosmos-density-cell-head: 0rem;
+  --cosmos-density-cell-body: 0rem;
+  --cosmos-density-virtual-cell: calc(48em / 14);
+}
+
+[data-density='compact'] {
+  --cosmos-density-control: -0.25rem;
+  --cosmos-density-row: -0.125rem;
+  --cosmos-density-cell-head: -0.25rem;
+  --cosmos-density-cell-body: -0.25rem;
+  --cosmos-density-virtual-cell: calc(40em / 14);
+}
+
+[data-density='comfortable'] {
+  --cosmos-density-control: 0.25rem;
+  --cosmos-density-row: 0.125rem;
+  --cosmos-density-cell-head: 0.25rem;
+  --cosmos-density-cell-body: 0.375rem;
+  --cosmos-density-virtual-cell: calc(60em / 14);
+}
+
+/* ── Radius ────────────────────────────────────────────────────────────────
+ * data-radius rescales Tailwind's own --radius-* tokens, the ones rounded-sm
+ * to rounded-4xl read, so every corner of a component follows. none squares
+ * them all to 2px (a scale cannot get there from 4px to 32px), sm halves
+ * them, lg takes them one and a half times. No attribute keeps today's
+ * values; 'default' is the same, spelled out so a part of the page can opt
+ * out of its parent's radius. rounded-full and rounded-none are literals and
+ * never move: avatars, dots, switches, badges and pill buttons stay round.
+ *
+ * Declared again here for the same reason as the text sizes and the density:
+ * a custom property resolves var() on the element that declares it, so the
+ * tokens are rebuilt on every element that carries the attribute. The values
+ * are Tailwind's (theme.css); check-contrast.mjs fails if one goes missing. */
+[data-radius] {
+  --radius-xs: calc(0.125rem * var(--cosmos-radius-scale, 1));
+  --radius-sm: calc(0.25rem * var(--cosmos-radius-scale, 1));
+  --radius-md: calc(0.375rem * var(--cosmos-radius-scale, 1));
+  --radius-lg: calc(0.5rem * var(--cosmos-radius-scale, 1));
+  --radius-xl: calc(0.75rem * var(--cosmos-radius-scale, 1));
+  --radius-2xl: calc(1rem * var(--cosmos-radius-scale, 1));
+  --radius-3xl: calc(1.5rem * var(--cosmos-radius-scale, 1));
+  --radius-4xl: calc(2rem * var(--cosmos-radius-scale, 1));
+}
+
+[data-radius='default'] {
+  --cosmos-radius-scale: 1;
+}
+
+[data-radius='sm'] {
+  --cosmos-radius-scale: 0.5;
+}
+
+[data-radius='lg'] {
+  --cosmos-radius-scale: 1.5;
+}
+
+[data-radius='none'] {
+  --radius-xs: 2px;
+  --radius-sm: 2px;
+  --radius-md: 2px;
+  --radius-lg: 2px;
+  --radius-xl: 2px;
+  --radius-2xl: 2px;
+  --radius-3xl: 2px;
+  --radius-4xl: 2px;
+}
+
 /* Smooth theme switching transition — opt-in via .cosmos-bg-transition class
    on the app shell (not body, to avoid transitioning every DOM element). */
 .cosmos-bg-transition {

package/css/tailwind-tokens.css

@@ -16,6 +16,15 @@
    `focus:border-brand-500`, so form controls lost their focus border in the dark themes. */
 @custom-variant dark (&:where(.dark, .dark *, .deep-blue, .deep-blue *));
 
+/* Tailwind rtl variant: the nearest `dir` attribute. Not `:dir(rtl)`: Tailwind's build lowers
+   it to a list of `:lang()` for its browser targets, which a page that only sets `dir` never
+   matches (the dev server skips that step, so only a build shows it). Tailwind's default adds
+   `[dir="rtl"] *`, which also holds in a `dir="ltr"` island inside a right-to-left page (a code
+   sample, a phone number field) and would flip its icons: the `:not()` leaves the island out.
+   Not followed: `dir="auto"`, and a `dir="rtl"` nested in such an island.
+   `tests/e2e/specs/rtl-variant.spec.ts` checks it in the static build. */
+@custom-variant rtl (&:where([dir="rtl"], [dir="rtl"] *):not(:where([dir="rtl"] [dir="ltr"], [dir="rtl"] [dir="ltr"] *)));
+
 /* The colors the charts read as plain CSS variables (var(--color-brand-500),
  * var(--color-status-warn)…), with no utility behind them. Tailwind only emits
  * a theme variable that a utility uses, so these are `static`: always in the
@@ -72,6 +81,32 @@
   --text-2xs: 0.6875rem;
   --text-3xs: 0.625rem;
 
+  /* ── Density ────────────────────────────────────────────────────────────── */
+  /* The vertical rhythm that data-density moves (css-vars.css redefines these
+     under the attribute): the height of a control, named by its default
+     height in px (h-ctrl-36 is h-9), and the vertical padding of a row, named
+     the same way (py-row-8 is py-2). A table cell has its own two. The
+     horizontal padding and the gaps stay where they are. Without the
+     attribute these are the values the components always had. */
+  --spacing-ctrl-28: 1.75rem;
+  --spacing-ctrl-32: 2rem;
+  --spacing-ctrl-36: 2.25rem;
+  --spacing-ctrl-40: 2.5rem;
+  --spacing-ctrl-44: 2.75rem;
+  --spacing-ctrl-48: 3rem;
+  --spacing-row-4: 0.25rem;
+  --spacing-row-5: 0.3125rem;
+  --spacing-row-6: 0.375rem;
+  --spacing-row-8: 0.5rem;
+  --spacing-row-10: 0.625rem;
+  --spacing-row-12: 0.75rem;
+  --spacing-row-14: 0.875rem;
+  --spacing-row-16: 1rem;
+  --spacing-row-20: 1.25rem;
+  --spacing-row-24: 1.5rem;
+  --spacing-cell-head: 0.75rem;
+  --spacing-cell-body: 0.875rem;
+
   /* ── Card shadows — work on both light and dark backgrounds ────────────── */
   --shadow-card: 0 1px 3px rgb(0 0 0 / 40%), 0 1px 2px rgb(0 0 0 / 30%);
   --shadow-card-hover: 0 10px 25px rgb(0 0 0 / 50%), 0 4px 6px rgb(0 0 0 / 20%);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sckyzo/cosmos-theme",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Tailwind 4 theme and design tokens for the Cosmos design system — palette, typography, radii and CSS variables for its light, sand, dark and deep-blue themes.",
   "license": "MIT",
   "author": "SckyzO",