@greese/ui 1.1.0 → 1.2.0

package/README.md

@@ -24,20 +24,25 @@ the framework packages provide.
 
 ## What's in it
 
-| Import                           | What                                                                                                                                                            |
-| -------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `@greese/ui/styles.css`          | Tokens and every component's styles                                                                                                                             |
-| `@greese/ui/base.css`            | Opt-in reset and page defaults                                                                                                                                  |
-| `@greese/ui/css/<Name>.css`      | One component's own styles (plus the shared core). A component built on others (a Dialog uses Button) needs theirs too; the framework packages wire that up     |
-| `@greese/ui/tokens.css`          | `--greese-*` custom properties, in `@layer greese.tokens`                                                                                                       |
-| `@greese/ui/palette.css`         | Opt-in: the palette as `--greese-<hue>-<shade>` (`--greese-lavender-600`), about 1.5 kB compressed                                                              |
-| `@greese/ui/scss`                | The whole stylesheet as Sass, configurable (`@use 'pkg:@greese/ui/scss' with ($breakpoints: …)`)                                                                |
-| `@greese/ui/scss/kit`            | The theming kit: `@use 'pkg:@greese/ui/scss/kit' as greese`, build-time themes that reject unknown names                                                        |
-| `@greese/ui/scss/tokens`         | The token CSS, plus `$breakpoints` and `$space-keys` Sass maps                                                                                                  |
-| `@greese/ui/scss/layers`         | Only the cascade layer order statement                                                                                                                          |
-| `@greese/ui/scss/maps`           | Only the Sass maps (`$breakpoints`, `$space-keys`, every token default as `$color` and `$scalars`, the palette as `$palette`, and `$layer-order`); emits no CSS |
-| `@greese/ui/style-manifest.json` | Every component's styling API, read from the compiled CSS                                                                                                       |
-| `@greese/ui`                     | TypeScript constants (`color`, `palette` and each hue, `space`, `radius`, `lineHeight`, `shadow`, `breakpoints`, …), `createTheme()` and `getSchemeScript()`    |
+| Import                                                              | What                                                                                                                                                            |
+| ------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@greese/ui/styles.css`                                             | Tokens and every component's styles                                                                                                                             |
+| `@greese/ui/base.css`                                               | Opt-in reset and page defaults                                                                                                                                  |
+| `@greese/ui/css/<Name>.css`                                         | One component's own styles (plus the shared core). A component built on others (a Dialog uses Button) needs theirs too; the framework packages wire that up     |
+| `@greese/ui/tokens.css`                                             | `--greese-*` custom properties, in `@layer greese.tokens`                                                                                                       |
+| `@greese/ui/palette.css`                                            | Opt-in: the palette as `--greese-<hue>-<shade>` (`--greese-lavender-600`), about 1.5 kB compressed                                                              |
+| `@greese/ui/scss`                                                   | The whole stylesheet as Sass, configurable (`@use 'pkg:@greese/ui/scss' with ($breakpoints: …)`)                                                                |
+| `@greese/ui/scss/kit`                                               | The theming kit: `@use 'pkg:@greese/ui/scss/kit' as greese`, build-time themes that reject unknown names                                                        |
+| `@greese/ui/scss/tokens`                                            | The token CSS, plus `$breakpoints` and `$space-keys` Sass maps                                                                                                  |
+| `@greese/ui/scss/layers`                                            | Only the cascade layer order statement                                                                                                                          |
+| `@greese/ui/scss/maps`                                              | Only the Sass maps (`$breakpoints`, `$space-keys`, every token default as `$color` and `$scalars`, the palette as `$palette`, and `$layer-order`); emits no CSS |
+| `@greese/ui/scss/mixins`, `tones`, `floating`, `controls`, `slides` | The library's own mixins and maps for theme authors (ADR 0021); emit no CSS                                                                                     |
+| `@greese/ui/scss/utilities`                                         | The utility classes from Sass, built with the configured breakpoints: `@include utilities.classes(…)`                                                           |
+| `@greese/ui/scss/core`, `scss/components/<Name>`                    | For a Sass build that picks its components: core (tokens, type system) and one component's own stylesheet                                                       |
+| `@greese/ui/css/resets.css`                                         | Opt-in: `.greese-reset-color`, `-shape`, `-motion` and `.greese-reset`, which take a theme's layers back from part of a page                                    |
+| `@greese/ui/theme-files`                                            | A theme as data (Theme Studio's JSON) and the SCSS it becomes: `specToLayout()`, the documented folder of modules, or `specToScss()`, one file (ADR 0034)       |
+| `@greese/ui/style-manifest.json`                                    | Every component's styling API, read from the compiled CSS                                                                                                       |
+| `@greese/ui`                                                        | TypeScript constants (`color`, `palette` and each hue, `space`, `radius`, `lineHeight`, `shadow`, `breakpoints`, …), `createTheme()` and `getSchemeScript()`    |
 
 It has no dependencies.
 

package/dist/_maps.scss

@@ -284,7 +284,7 @@ $typography: (
   'button': (
     'base': (
     'font-size': "0.9375rem",
-    'font-weight': "600",
+    'font-weight': "700",
     'line-height': "1.25",
     'letter-spacing': "0",
   ),

package/dist/_tokens-base.scss

@@ -1,5 +1,6 @@
 /* GENERATED by @greese/ui from src/tokens.ts - do not edit. */
-// Internal: the tokens without the type system (src/styles/_typography-vars.scss).
+// Internal: the tokens without the breakpoints (src/styles/_breakpoint-vars.scss)
+// or the type system (src/styles/_typography-vars.scss).
 @layer greese.reset, greese.tokens, greese.theme, greese.base, greese.components, greese.overrides, greese.utilities;
 @layer greese.tokens {
   :root {
@@ -52,11 +53,6 @@
     --greese-easing-standard: cubic-bezier(0.2, 0, 0, 1);
     --greese-easing-enter: cubic-bezier(0, 0, 0, 1);
     --greese-easing-exit: cubic-bezier(0.3, 0, 1, 1);
-    --greese-breakpoint-xs: 0px;
-    --greese-breakpoint-sm: 600px;
-    --greese-breakpoint-md: 900px;
-    --greese-breakpoint-lg: 1200px;
-    --greese-breakpoint-xl: 1536px;
   }
 
 
@@ -172,3 +168,31 @@
     }
   }
 }
+
+@layer greese.utilities {
+  [data-greese-motion='reduce'],
+  [data-greese-motion='reduce'] [data-greese-theme] {
+    --greese-duration-fast: 0.01ms;
+    --greese-duration-normal: 0.01ms;
+    --greese-duration-slow: 0.01ms;
+  }
+
+  [data-greese-motion='reduce'],
+  [data-greese-motion='reduce'] *,
+  [data-greese-motion='reduce'] ::before,
+  [data-greese-motion='reduce'] ::after {
+    animation-duration: 0.01ms;
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+    transition-delay: 0s;
+    scroll-behavior: auto;
+  }
+
+  :root[data-greese-motion='reduce']::view-transition-group(*),
+  :root[data-greese-motion='reduce']::view-transition-old(*),
+  :root[data-greese-motion='reduce']::view-transition-new(*) {
+    animation-duration: 0.01ms;
+    animation-delay: 0s;
+  }
+}

package/dist/_tokens.scss

@@ -287,7 +287,7 @@ $typography: (
   'button': (
     'base': (
     'font-size': "0.9375rem",
-    'font-weight': "600",
+    'font-weight': "700",
     'line-height': "1.25",
     'letter-spacing': "0",
   ),
@@ -1943,6 +1943,7 @@ $layer-order: 'greese.reset, greese.tokens, greese.theme, greese.base, greese.co
     --greese-breakpoint-md: 900px;
     --greese-breakpoint-lg: 1200px;
     --greese-breakpoint-xl: 1536px;
+    --greese-breakpoint-keys: xs sm md lg xl;
     --greese-type-p1-font-size: 1.125rem;
     --greese-type-p1-font-weight: 400;
     --greese-type-p1-line-height: 1.6;
@@ -1998,7 +1999,7 @@ $layer-order: 'greese.reset, greese.tokens, greese.theme, greese.base, greese.co
     --greese-type-caption-line-height: 1.4;
     --greese-type-caption-letter-spacing: 0.02em;
     --greese-type-button-font-size: 0.9375rem;
-    --greese-type-button-font-weight: 600;
+    --greese-type-button-font-weight: 700;
     --greese-type-button-line-height: 1.25;
     --greese-type-button-letter-spacing: 0;
   }
@@ -2138,3 +2139,31 @@ $layer-order: 'greese.reset, greese.tokens, greese.theme, greese.base, greese.co
     }
   }
 }
+
+@layer greese.utilities {
+  [data-greese-motion='reduce'],
+  [data-greese-motion='reduce'] [data-greese-theme] {
+    --greese-duration-fast: 0.01ms;
+    --greese-duration-normal: 0.01ms;
+    --greese-duration-slow: 0.01ms;
+  }
+
+  [data-greese-motion='reduce'],
+  [data-greese-motion='reduce'] *,
+  [data-greese-motion='reduce'] ::before,
+  [data-greese-motion='reduce'] ::after {
+    animation-duration: 0.01ms;
+    animation-delay: 0s;
+    animation-iteration-count: 1;
+    transition-duration: 0.01ms;
+    transition-delay: 0s;
+    scroll-behavior: auto;
+  }
+
+  :root[data-greese-motion='reduce']::view-transition-group(*),
+  :root[data-greese-motion='reduce']::view-transition-old(*),
+  :root[data-greese-motion='reduce']::view-transition-new(*) {
+    animation-duration: 0.01ms;
+    animation-delay: 0s;
+  }
+}