@softure-ai/theme-kit 0.1.1 → 0.1.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 Newest first. Each version lists what changed for an app or a theme package that uses the kit.
 
+## 0.1.2
+
+- `base.css` (#718): the page base for an app on the scoped `preflight.css`: `body` without the browser's margin, on
+  the theme's `background`, `foreground` and sans font, in `@layer base`. Radix portals on `body` inherit it.
+- `maplibre.css` (#718): the theme's sans font on MapLibre maps, unlayered and more specific than `maplibre-gl.css`,
+  so it wins in any load order.
+- Both read only contract tokens and go through the app's Tailwind (`--theme()`), after the theme's `theme.css`.
+
 ## 0.1.1
 
 - No change to the package itself: the first version published through the npm trusted publisher (OIDC) with

package/README.md

@@ -6,7 +6,8 @@ the token contract, the way a theme is declared, the CSS generator, the build co
 theme is a new `themes/theme-<name>` folder that follows the contract below; nothing in the kit changes.
 
 Apps install a theme package (e.g. [`@softure-ai/theme-notion`](../theme-notion/README.md)), which depends on the kit.
-An app imports the kit directly only for `preflight.css`, `useIsMobile`, or to build its own variant of a theme.
+An app imports the kit directly only for its stylesheets (`preflight.css`, `base.css`, `maplibre.css`), `useIsMobile`,
+or to build its own variant of a theme.
 
 ## Design
 
@@ -44,9 +45,14 @@ ThemeDefinition (data)  ──defineTheme──▶  theme (checked)  ──build
 | `createCn(options)`, `createThemeCn(definition)` | shadcn/ui's `cn`, with tailwind-merge told the theme's named text styles and shadows (`text-body` and `text-muted-foreground` both stay) |
 | `useIsMobile()`, `MOBILE_BREAKPOINT` (`/react`) | The sidebar's breakpoint (768 px), on `useSyncExternalStore`; the server renders the desktop layout |
 | `preflight.css` | Tailwind's preflight scoped to `[data-slot]` elements, in `@layer base` with zero specificity, plus `prefers-reduced-motion` |
+| `base.css` | The page base: `body` without the browser's margin, on the theme's `background`, `foreground` and sans font, in `@layer base` (Radix portals on `body` inherit it) |
+| `maplibre.css` | The theme's sans font on MapLibre maps (`body .maplibregl-map`, unlayered, so it beats `maplibre-gl.css` in any load order) |
 | `softure-theme-css [packageDir]` | Builds a theme package's stylesheets after `tsc` (the contract below) |
 | `/build`: `parseThemePackageConfig`, `buildThemeStylesheet`, `writeThemeStylesheets`, `buildThemePackage` | The code behind the command, for tests and tools (Node only) |
 
+`base.css` and `maplibre.css` read the font with `--theme()`, so they are imported through the app's Tailwind, after
+the theme's `theme.css`. They read only contract tokens, so they work with every theme.
+
 ## The theme package contract
 
 Every `themes/theme-<name>` package (named `@softure-ai/theme-<name>` by its folder):

package/dist/base.css

@@ -0,0 +1,16 @@
+/*
+ * The page base for an app that takes the scoped `preflight.css`: nothing else styles `body` then, so the page keeps
+ * the browser's 8 px margin, serif font, black text and white background, and Radix portals mounted on `body`
+ * (select lists, menus, sheets) inherit them. In `@layer base`, so every component and utility overrides it.
+ *
+ * Reads `--background` and `--foreground` (colour roles every theme defines) and the theme's `--font-sans`. Import it
+ * after the theme's `theme.css`, through the app's Tailwind (it reads the font with `--theme()`).
+ */
+@layer base {
+  body {
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+    font-family: --theme(--font-sans);
+  }
+}

package/dist/maplibre.css

@@ -0,0 +1,11 @@
+/*
+ * The theme's sans font on MapLibre maps: `maplibre-gl.css` is unlayered and sets its own font family on
+ * `.maplibregl-map`, so markers, popups and the attribution render in Helvetica. Unlayered too, since an unlayered
+ * rule beats every layered one, and one type selector more specific, so it wins whatever order the sheets load in.
+ * Only the family changes; MapLibre's size and line height stay.
+ *
+ * Import it if the app shows MapLibre maps, through the app's Tailwind (it reads the font with `--theme()`).
+ */
+body .maplibregl-map {
+  font-family: --theme(--font-sans);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@softure-ai/theme-kit",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "SOFTURE AI theme kit: the theme contract (defineTheme), the theme CSS generator and build command, cn and the scoped preflight every shadcn/ui theme package shares.",
   "license": "MIT",
   "type": "module",
@@ -46,7 +46,9 @@
       "types": "./dist/build/index.d.ts",
       "default": "./dist/build/index.js"
     },
-    "./preflight.css": "./dist/preflight.css"
+    "./preflight.css": "./dist/preflight.css",
+    "./base.css": "./dist/base.css",
+    "./maplibre.css": "./dist/maplibre.css"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node scripts/copy-css.mjs"

package/src/base.css

@@ -0,0 +1,16 @@
+/*
+ * The page base for an app that takes the scoped `preflight.css`: nothing else styles `body` then, so the page keeps
+ * the browser's 8 px margin, serif font, black text and white background, and Radix portals mounted on `body`
+ * (select lists, menus, sheets) inherit them. In `@layer base`, so every component and utility overrides it.
+ *
+ * Reads `--background` and `--foreground` (colour roles every theme defines) and the theme's `--font-sans`. Import it
+ * after the theme's `theme.css`, through the app's Tailwind (it reads the font with `--theme()`).
+ */
+@layer base {
+  body {
+    margin: 0;
+    background: var(--background);
+    color: var(--foreground);
+    font-family: --theme(--font-sans);
+  }
+}

package/src/maplibre.css

@@ -0,0 +1,11 @@
+/*
+ * The theme's sans font on MapLibre maps: `maplibre-gl.css` is unlayered and sets its own font family on
+ * `.maplibregl-map`, so markers, popups and the attribution render in Helvetica. Unlayered too, since an unlayered
+ * rule beats every layered one, and one type selector more specific, so it wins whatever order the sheets load in.
+ * Only the family changes; MapLibre's size and line height stay.
+ *
+ * Import it if the app shows MapLibre maps, through the app's Tailwind (it reads the font with `--theme()`).
+ */
+body .maplibregl-map {
+  font-family: --theme(--font-sans);
+}