@loidolt/theme-styles 0.8.0 → 0.9.0

package/README.md

@@ -15,6 +15,15 @@ Deep entry points include `/tokens`, `/base`, `/components`, `/utilities`, `/acc
 `/fonts`, `/dark`, and `/dark-auto`. Every slice except `/tokens` expects the token custom
 properties to be loaded first.
 
+`/core` is the whole stylesheet without the styles for media, charts, maps, long-form prose and
+docs, for an app that uses only the Svelte components. Add an extra back through
+`/components/*`, inside the components layer:
+
+```css
+@import '@loidolt/theme-styles/core';
+@import '@loidolt/theme-styles/components/prose' layer(loidolt.components);
+```
+
 Built-in style presets live under `/presets/*`: `loidolt`, `soft` and `compact`, each with
 `-dark` and `-dark-auto` companions. They apply under `data-preset="<name>"`.
 

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@loidolt/theme-styles",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "description": "Base styles, fonts, accessibility helpers, and utilities for Loidolt applications",
   "license": "MIT",
   "type": "module",
   "style": "./src/index.css",
   "exports": {
     ".": "./src/index.css",
+    "./core": "./src/core.css",
     "./tokens": "./src/tokens.css",
     "./dark": "./src/dark.css",
     "./dark-auto": "./src/dark-auto.css",
@@ -15,6 +16,7 @@
     "./accessibility": "./src/accessibility.css",
     "./utilities": "./src/utilities.css",
     "./components": "./src/components.css",
+    "./components/*": "./src/components/*.css",
     "./fonts": "./src/fonts.css",
     "./fonts/*": "./src/fonts/*",
     "./package.json": "./package.json"
@@ -29,7 +31,7 @@
     "build": "node -e \"console.log('theme-styles: source CSS is publish-ready')\""
   },
   "dependencies": {
-    "@loidolt/theme-tokens": "^0.8.0"
+    "@loidolt/theme-tokens": "^0.9.0"
   },
   "publishConfig": {
     "access": "public",

package/src/components/overlays.css

@@ -9,7 +9,11 @@
   z-index: var(--loidolt-z-dialog);
   top: 50%;
   left: 50%;
-  display: grid;
+  /* A column whose body alone shrinks and scrolls, so the header and the footer's actions stay in
+     view however tall the content (or short the screen). Flex rather than grid rows, because an
+     AlertDialog without content has no body. */
+  display: flex;
+  flex-direction: column;
   width: min(var(--ldt-dialog-width, 34rem), calc(100vw - 2rem));
   max-height: min(48rem, calc(100dvh - 2rem));
   overflow: hidden;
@@ -36,7 +40,6 @@
   --ldt-dialog-width: 100vw;
   height: calc(100dvh - 2rem);
   max-height: none;
-  grid-template-rows: auto minmax(0, 1fr) auto;
 }
 .ldt-dialog__actions {
   display: flex;
@@ -49,6 +52,10 @@
 .ldt-dialog__footer {
   padding: var(--loidolt-pad-overlay);
 }
+.ldt-dialog__header,
+.ldt-dialog__footer {
+  flex: none;
+}
 .ldt-dialog__header {
   display: flex;
   align-items: start;
@@ -61,6 +68,8 @@
   min-width: 0;
 }
 .ldt-dialog__body {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
 }
 .ldt-dialog__footer {

package/src/core.css

@@ -0,0 +1,42 @@
+/*
+ * Layer order is declared up front so consumers can slot their own layers between ours.
+ *
+ * `loidolt.reset` is intentionally empty and reserved: the reset lives in `base.css` behind
+ * `:where()` (zero specificity), and this slot lets an app opt into its own reset ahead of
+ * our base styles without reordering the rest.
+ *
+ * `loidolt.a11y` is last so the focus ring and the reduced-motion overrides beat component
+ * styles by layer order alone — no `!important` needed, which keeps app CSS able to override
+ * them (unlayered styles outrank every layer for normal declarations).
+ *
+ * `loidolt.vendor` holds third-party stylesheets a loidolt package ships with — MapLibre's, for
+ * `@loidolt/theme-maps`. Vendor CSS left unlayered would outrank every layer here; slotted after
+ * `base` and before `components`, our resets cannot break it and our component styles can
+ * restyle it, whichever order the two stylesheets are imported in.
+ */
+@layer loidolt.tokens, loidolt.reset, loidolt.base, loidolt.vendor, loidolt.components,
+  loidolt.utilities, loidolt.a11y;
+
+/*
+ * `core.css` is the stylesheet for the Svelte components and app layout, without the extras a
+ * page may not use: media players and galleries, charts, maps, long-form prose and docs. Add any
+ * of those back one at a time through `components/*`, inside the components layer:
+ *
+ *   @import '@loidolt/theme-styles/core';
+ *   @import '@loidolt/theme-styles/components/prose' layer(loidolt.components);
+ *
+ * `index.css` is exactly this plus every extra.
+ */
+@import '@loidolt/theme-tokens/css' layer(loidolt.tokens);
+@import './fonts.css' layer(loidolt.base);
+@import './base.css' layer(loidolt.base);
+@import './components/actions.css' layer(loidolt.components);
+@import './components/forms.css' layer(loidolt.components);
+@import './components/surfaces.css' layer(loidolt.components);
+@import './components/data.css' layer(loidolt.components);
+@import './components/feedback.css' layer(loidolt.components);
+@import './components/overlays.css' layer(loidolt.components);
+@import './components/selection.css' layer(loidolt.components);
+@import './components/layout.css' layer(loidolt.components);
+@import './utilities.css' layer(loidolt.utilities);
+@import './accessibility.css' layer(loidolt.a11y);

package/src/index.css

@@ -1,25 +1,11 @@
 /*
- * Layer order is declared up front so consumers can slot their own layers between ours.
- *
- * `loidolt.reset` is intentionally empty and reserved: the reset lives in `base.css` behind
- * `:where()` (zero specificity), and this slot lets an app opt into its own reset ahead of
- * our base styles without reordering the rest.
- *
- * `loidolt.a11y` is last so the focus ring and the reduced-motion overrides beat component
- * styles by layer order alone — no `!important` needed, which keeps app CSS able to override
- * them (unlayered styles outrank every layer for normal declarations).
- *
- * `loidolt.vendor` holds third-party stylesheets a loidolt package ships with — MapLibre's, for
- * `@loidolt/theme-maps`. Vendor CSS left unlayered would outrank every layer here; slotted after
- * `base` and before `components`, our resets cannot break it and our component styles can
- * restyle it, whichever order the two stylesheets are imported in.
+ * The whole stylesheet: `core.css` (layer order, tokens, base, the component and layout styles,
+ * utilities and accessibility) plus the extras for media, charts, maps, prose and docs. Pages
+ * that need none of the extras can import `@loidolt/theme-styles/core` instead.
  */
-@layer loidolt.tokens, loidolt.reset, loidolt.base, loidolt.vendor, loidolt.components,
-  loidolt.utilities, loidolt.a11y;
-
-@import '@loidolt/theme-tokens/css' layer(loidolt.tokens);
-@import './fonts.css' layer(loidolt.base);
-@import './base.css' layer(loidolt.base);
-@import './components.css' layer(loidolt.components);
-@import './utilities.css' layer(loidolt.utilities);
-@import './accessibility.css' layer(loidolt.a11y);
+@import './core.css';
+@import './components/media.css' layer(loidolt.components);
+@import './components/charts.css' layer(loidolt.components);
+@import './components/maps.css' layer(loidolt.components);
+@import './components/prose.css' layer(loidolt.components);
+@import './components/docs.css' layer(loidolt.components);