@greese/ui 1.1.0 → 1.2.0

package/dist/tokens.css

@@ -56,6 +56,7 @@
     --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;
@@ -111,7 +112,7 @@
     --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;
   }
@@ -251,3 +252,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/typography.js

@@ -94,7 +94,7 @@ export const typography = {
     p2: { base: t('1rem', '400', '1.55') },
     p3: { base: t('0.875rem', '400', '1.5') },
     caption: { base: t('0.75rem', '400', '1.4', '0.02em') },
-    button: { base: t('0.9375rem', '600', '1.25') },
+    button: { base: t('0.9375rem', '700', '1.25') },
 };
 /** `--greese-type-h1-font-size`, for the type property `fontSize`. */
 export const typeVar = (variant, prop) => `--greese-type-${variant}-${cssProperty(prop)}`;

package/dist/utilities.css

@@ -2019,6 +2019,219 @@
   .border-color-current {
     border-color: currentcolor;
   }
+  .fill-canvas {
+    fill: var(--greese-color-canvas);
+  }
+  .fill-surface {
+    fill: var(--greese-color-surface);
+  }
+  .fill-surface-overlay {
+    fill: var(--greese-color-surface-overlay);
+  }
+  .fill-fg {
+    fill: var(--greese-color-fg);
+  }
+  .fill-fg-muted {
+    fill: var(--greese-color-fg-muted);
+  }
+  .fill-border {
+    fill: var(--greese-color-border);
+  }
+  .fill-border-strong {
+    fill: var(--greese-color-border-strong);
+  }
+  .fill-track {
+    fill: var(--greese-color-track);
+  }
+  .fill-primary {
+    fill: var(--greese-color-primary);
+  }
+  .fill-primary-strong {
+    fill: var(--greese-color-primary-strong);
+  }
+  .fill-primary-content {
+    fill: var(--greese-color-primary-content);
+  }
+  .fill-secondary {
+    fill: var(--greese-color-secondary);
+  }
+  .fill-secondary-strong {
+    fill: var(--greese-color-secondary-strong);
+  }
+  .fill-secondary-content {
+    fill: var(--greese-color-secondary-content);
+  }
+  .fill-tertiary {
+    fill: var(--greese-color-tertiary);
+  }
+  .fill-tertiary-strong {
+    fill: var(--greese-color-tertiary-strong);
+  }
+  .fill-tertiary-content {
+    fill: var(--greese-color-tertiary-content);
+  }
+  .fill-accent {
+    fill: var(--greese-color-accent);
+  }
+  .fill-accent-strong {
+    fill: var(--greese-color-accent-strong);
+  }
+  .fill-accent-content {
+    fill: var(--greese-color-accent-content);
+  }
+  .fill-focus-ring {
+    fill: var(--greese-color-focus-ring);
+  }
+  .fill-positive {
+    fill: var(--greese-color-positive);
+  }
+  .fill-negative {
+    fill: var(--greese-color-negative);
+  }
+  .fill-negative-content {
+    fill: var(--greese-color-negative-content);
+  }
+  .fill-warning {
+    fill: var(--greese-color-warning);
+  }
+  .fill-info {
+    fill: var(--greese-color-info);
+  }
+  .fill-white {
+    fill: var(--greese-color-white);
+  }
+  .fill-black {
+    fill: var(--greese-color-black);
+  }
+  .fill-scrim {
+    fill: var(--greese-color-scrim);
+  }
+  .fill-transparent {
+    fill: transparent;
+  }
+  .fill-inherit {
+    fill: inherit;
+  }
+  .fill-current {
+    fill: currentcolor;
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke-canvas {
+    stroke: var(--greese-color-canvas);
+  }
+  .stroke-surface {
+    stroke: var(--greese-color-surface);
+  }
+  .stroke-surface-overlay {
+    stroke: var(--greese-color-surface-overlay);
+  }
+  .stroke-fg {
+    stroke: var(--greese-color-fg);
+  }
+  .stroke-fg-muted {
+    stroke: var(--greese-color-fg-muted);
+  }
+  .stroke-border {
+    stroke: var(--greese-color-border);
+  }
+  .stroke-border-strong {
+    stroke: var(--greese-color-border-strong);
+  }
+  .stroke-track {
+    stroke: var(--greese-color-track);
+  }
+  .stroke-primary {
+    stroke: var(--greese-color-primary);
+  }
+  .stroke-primary-strong {
+    stroke: var(--greese-color-primary-strong);
+  }
+  .stroke-primary-content {
+    stroke: var(--greese-color-primary-content);
+  }
+  .stroke-secondary {
+    stroke: var(--greese-color-secondary);
+  }
+  .stroke-secondary-strong {
+    stroke: var(--greese-color-secondary-strong);
+  }
+  .stroke-secondary-content {
+    stroke: var(--greese-color-secondary-content);
+  }
+  .stroke-tertiary {
+    stroke: var(--greese-color-tertiary);
+  }
+  .stroke-tertiary-strong {
+    stroke: var(--greese-color-tertiary-strong);
+  }
+  .stroke-tertiary-content {
+    stroke: var(--greese-color-tertiary-content);
+  }
+  .stroke-accent {
+    stroke: var(--greese-color-accent);
+  }
+  .stroke-accent-strong {
+    stroke: var(--greese-color-accent-strong);
+  }
+  .stroke-accent-content {
+    stroke: var(--greese-color-accent-content);
+  }
+  .stroke-focus-ring {
+    stroke: var(--greese-color-focus-ring);
+  }
+  .stroke-positive {
+    stroke: var(--greese-color-positive);
+  }
+  .stroke-negative {
+    stroke: var(--greese-color-negative);
+  }
+  .stroke-negative-content {
+    stroke: var(--greese-color-negative-content);
+  }
+  .stroke-warning {
+    stroke: var(--greese-color-warning);
+  }
+  .stroke-info {
+    stroke: var(--greese-color-info);
+  }
+  .stroke-white {
+    stroke: var(--greese-color-white);
+  }
+  .stroke-black {
+    stroke: var(--greese-color-black);
+  }
+  .stroke-scrim {
+    stroke: var(--greese-color-scrim);
+  }
+  .stroke-transparent {
+    stroke: transparent;
+  }
+  .stroke-inherit {
+    stroke: inherit;
+  }
+  .stroke-current {
+    stroke: currentcolor;
+  }
+  .stroke-none {
+    stroke: none;
+  }
+  .stroke-width-0 {
+    stroke-width: 0;
+  }
+  .stroke-width-1 {
+    stroke-width: 1;
+  }
+  .stroke-width-2 {
+    stroke-width: 2;
+  }
+  .stroke-width-3 {
+    stroke-width: 3;
+  }
+  .stroke-width-4 {
+    stroke-width: 4;
+  }
   .opacity-0 {
     opacity: 0;
   }
@@ -2070,6 +2283,30 @@
   .user-select-auto {
     user-select: auto;
   }
+  .touch-action-none {
+    touch-action: none;
+  }
+  .touch-action-auto {
+    touch-action: auto;
+  }
+  .touch-action-pan-x {
+    touch-action: pan-x;
+  }
+  .touch-action-pan-y {
+    touch-action: pan-y;
+  }
+  .touch-action-manipulation {
+    touch-action: manipulation;
+  }
+  .scrollbar-width-auto {
+    scrollbar-width: auto;
+  }
+  .scrollbar-width-thin {
+    scrollbar-width: thin;
+  }
+  .scrollbar-width-none {
+    scrollbar-width: none;
+  }
   .transition {
     transition-property: color, background-color, border-color, opacity, box-shadow, translate, scale, rotate;
     transition-duration: var(--greese-duration-normal);
@@ -2388,6 +2625,204 @@
     .hover-border-color-current:hover {
       border-color: currentcolor;
     }
+    .hover-fill-canvas:hover {
+      fill: var(--greese-color-canvas);
+    }
+    .hover-fill-surface:hover {
+      fill: var(--greese-color-surface);
+    }
+    .hover-fill-surface-overlay:hover {
+      fill: var(--greese-color-surface-overlay);
+    }
+    .hover-fill-fg:hover {
+      fill: var(--greese-color-fg);
+    }
+    .hover-fill-fg-muted:hover {
+      fill: var(--greese-color-fg-muted);
+    }
+    .hover-fill-border:hover {
+      fill: var(--greese-color-border);
+    }
+    .hover-fill-border-strong:hover {
+      fill: var(--greese-color-border-strong);
+    }
+    .hover-fill-track:hover {
+      fill: var(--greese-color-track);
+    }
+    .hover-fill-primary:hover {
+      fill: var(--greese-color-primary);
+    }
+    .hover-fill-primary-strong:hover {
+      fill: var(--greese-color-primary-strong);
+    }
+    .hover-fill-primary-content:hover {
+      fill: var(--greese-color-primary-content);
+    }
+    .hover-fill-secondary:hover {
+      fill: var(--greese-color-secondary);
+    }
+    .hover-fill-secondary-strong:hover {
+      fill: var(--greese-color-secondary-strong);
+    }
+    .hover-fill-secondary-content:hover {
+      fill: var(--greese-color-secondary-content);
+    }
+    .hover-fill-tertiary:hover {
+      fill: var(--greese-color-tertiary);
+    }
+    .hover-fill-tertiary-strong:hover {
+      fill: var(--greese-color-tertiary-strong);
+    }
+    .hover-fill-tertiary-content:hover {
+      fill: var(--greese-color-tertiary-content);
+    }
+    .hover-fill-accent:hover {
+      fill: var(--greese-color-accent);
+    }
+    .hover-fill-accent-strong:hover {
+      fill: var(--greese-color-accent-strong);
+    }
+    .hover-fill-accent-content:hover {
+      fill: var(--greese-color-accent-content);
+    }
+    .hover-fill-focus-ring:hover {
+      fill: var(--greese-color-focus-ring);
+    }
+    .hover-fill-positive:hover {
+      fill: var(--greese-color-positive);
+    }
+    .hover-fill-negative:hover {
+      fill: var(--greese-color-negative);
+    }
+    .hover-fill-negative-content:hover {
+      fill: var(--greese-color-negative-content);
+    }
+    .hover-fill-warning:hover {
+      fill: var(--greese-color-warning);
+    }
+    .hover-fill-info:hover {
+      fill: var(--greese-color-info);
+    }
+    .hover-fill-white:hover {
+      fill: var(--greese-color-white);
+    }
+    .hover-fill-black:hover {
+      fill: var(--greese-color-black);
+    }
+    .hover-fill-scrim:hover {
+      fill: var(--greese-color-scrim);
+    }
+    .hover-fill-transparent:hover {
+      fill: transparent;
+    }
+    .hover-fill-inherit:hover {
+      fill: inherit;
+    }
+    .hover-fill-current:hover {
+      fill: currentcolor;
+    }
+    .hover-fill-none:hover {
+      fill: none;
+    }
+    .hover-stroke-canvas:hover {
+      stroke: var(--greese-color-canvas);
+    }
+    .hover-stroke-surface:hover {
+      stroke: var(--greese-color-surface);
+    }
+    .hover-stroke-surface-overlay:hover {
+      stroke: var(--greese-color-surface-overlay);
+    }
+    .hover-stroke-fg:hover {
+      stroke: var(--greese-color-fg);
+    }
+    .hover-stroke-fg-muted:hover {
+      stroke: var(--greese-color-fg-muted);
+    }
+    .hover-stroke-border:hover {
+      stroke: var(--greese-color-border);
+    }
+    .hover-stroke-border-strong:hover {
+      stroke: var(--greese-color-border-strong);
+    }
+    .hover-stroke-track:hover {
+      stroke: var(--greese-color-track);
+    }
+    .hover-stroke-primary:hover {
+      stroke: var(--greese-color-primary);
+    }
+    .hover-stroke-primary-strong:hover {
+      stroke: var(--greese-color-primary-strong);
+    }
+    .hover-stroke-primary-content:hover {
+      stroke: var(--greese-color-primary-content);
+    }
+    .hover-stroke-secondary:hover {
+      stroke: var(--greese-color-secondary);
+    }
+    .hover-stroke-secondary-strong:hover {
+      stroke: var(--greese-color-secondary-strong);
+    }
+    .hover-stroke-secondary-content:hover {
+      stroke: var(--greese-color-secondary-content);
+    }
+    .hover-stroke-tertiary:hover {
+      stroke: var(--greese-color-tertiary);
+    }
+    .hover-stroke-tertiary-strong:hover {
+      stroke: var(--greese-color-tertiary-strong);
+    }
+    .hover-stroke-tertiary-content:hover {
+      stroke: var(--greese-color-tertiary-content);
+    }
+    .hover-stroke-accent:hover {
+      stroke: var(--greese-color-accent);
+    }
+    .hover-stroke-accent-strong:hover {
+      stroke: var(--greese-color-accent-strong);
+    }
+    .hover-stroke-accent-content:hover {
+      stroke: var(--greese-color-accent-content);
+    }
+    .hover-stroke-focus-ring:hover {
+      stroke: var(--greese-color-focus-ring);
+    }
+    .hover-stroke-positive:hover {
+      stroke: var(--greese-color-positive);
+    }
+    .hover-stroke-negative:hover {
+      stroke: var(--greese-color-negative);
+    }
+    .hover-stroke-negative-content:hover {
+      stroke: var(--greese-color-negative-content);
+    }
+    .hover-stroke-warning:hover {
+      stroke: var(--greese-color-warning);
+    }
+    .hover-stroke-info:hover {
+      stroke: var(--greese-color-info);
+    }
+    .hover-stroke-white:hover {
+      stroke: var(--greese-color-white);
+    }
+    .hover-stroke-black:hover {
+      stroke: var(--greese-color-black);
+    }
+    .hover-stroke-scrim:hover {
+      stroke: var(--greese-color-scrim);
+    }
+    .hover-stroke-transparent:hover {
+      stroke: transparent;
+    }
+    .hover-stroke-inherit:hover {
+      stroke: inherit;
+    }
+    .hover-stroke-current:hover {
+      stroke: currentcolor;
+    }
+    .hover-stroke-none:hover {
+      stroke: none;
+    }
     .hover-opacity-0:hover {
       opacity: 0;
     }

package/dist/utilities.d.ts

@@ -64,6 +64,14 @@ export declare const utilityClasses: ({ prefix, groups, breakpoints, }?: Utility
  * `purgeUtilities`).
  */
 export declare const generateUtilities: (options?: UtilityOptions) => string;
+/**
+ * The utility table as a Sass module, written to `dist/_utilities-table.scss`
+ * for `pkg:@greese/ui/scss/utilities`: every definition's group, stem and
+ * variants, and each value's declarations, in the order `generateUtilities`
+ * writes them. The Sass mixin there writes the same classes, with the
+ * breakpoints the stylesheet is built with (a test keeps the two equal).
+ */
+export declare const utilitiesScss: () => string;
 /** Every token in some source text that could be a class name. */
 export declare const scanContent: (text: string) => Set<string>;
 export interface PurgeOptions extends Omit<UtilityOptions, 'used'> {

package/dist/utilities.js

@@ -514,6 +514,27 @@ const definitions = [
         values: colors,
         hover: true,
     },
+    // SVG paint: a drawing's fills and strokes in the theme's colors.
+    {
+        group: 'color',
+        stem: 'fill',
+        property: 'fill',
+        values: { ...colors, none: 'none' },
+        hover: true,
+    },
+    {
+        group: 'color',
+        stem: 'stroke',
+        property: 'stroke',
+        values: { ...colors, none: 'none' },
+        hover: true,
+    },
+    {
+        group: 'color',
+        stem: 'stroke-width',
+        property: 'stroke-width',
+        values: { '0': '0', '1': '1', '2': '2', '3': '3', '4': '4' },
+    },
     // Effects and interaction.
     {
         group: 'effects',
@@ -540,6 +561,27 @@ const definitions = [
         property: 'user-select',
         values: same('none', 'text', 'all', 'auto'),
     },
+    /*
+     * Two whole-element concerns a dense interface needs, in the same shape as
+     * `cursor` and `user-select` beside them. A tool surface that pans and zooms
+     * has to tell the browser not to scroll or pinch it
+     * (`touch-action-none`), and a panel that scrolls inside a packed layout
+     * needs its scrollbar out of the way (`scrollbar-width-thin`). Both were
+     * found in a consumer's stylesheets, where each was the only reason the file
+     * existed.
+     */
+    {
+        group: 'effects',
+        stem: 'touch-action',
+        property: 'touch-action',
+        values: same('none', 'auto', 'pan-x', 'pan-y', 'manipulation'),
+    },
+    {
+        group: 'effects',
+        stem: 'scrollbar-width',
+        property: 'scrollbar-width',
+        values: same('auto', 'thin', 'none'),
+    },
     {
         group: 'effects',
         stem: 'transition',
@@ -614,6 +656,39 @@ export const generateUtilities = (options = {}) => {
             .map((c) => rule(`.${c.name}${variant === 'hover' ? ':hover' : ''}`, c.declarations, '  ')));
     return `/* GENERATED by @greese/ui from src/utilities.ts - do not edit. */\n${LAYER_ORDER}\n${blocks.length ? `@layer greese.utilities {\n${blocks.join('\n')}\n}\n` : ''}`;
 };
+/**
+ * The utility table as a Sass module, written to `dist/_utilities-table.scss`
+ * for `pkg:@greese/ui/scss/utilities`: every definition's group, stem and
+ * variants, and each value's declarations, in the order `generateUtilities`
+ * writes them. The Sass mixin there writes the same classes, with the
+ * breakpoints the stylesheet is built with (a test keeps the two equal).
+ */
+export const utilitiesScss = () => {
+    const str = (value) => JSON.stringify(value);
+    const entries = definitions.map((d) => {
+        const values = Object.entries(d.values).map(([value, setting]) => {
+            const declarations = Object.entries(declarationsOf(d, setting))
+                .map(([property, v]) => `${str(property)}: ${str(v)}`)
+                .join(', ');
+            return `      ${str(value)}: (${declarations}),`;
+        });
+        return `  (
+    group: ${d.group},
+    stem: ${str(d.stem)},
+    responsive: ${!!d.responsive},
+    hover: ${!!d.hover},
+    values: (
+${values.join('\n')}
+    ),
+  ),`;
+    });
+    return `// GENERATED by @greese/ui from src/utilities.ts - do not edit.
+$groups: (${[...new Set(definitions.map((d) => d.group))].join(', ')});
+$definitions: (
+${entries.join('\n')}
+);
+`;
+};
 /** Every token in some source text that could be a class name. */
 export const scanContent = (text) => new Set(text.match(/[A-Za-z0-9_-]+/g) ?? []);
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@greese/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "greese ui's CSS and design tokens: a framework-free stylesheet, per-component CSS, custom properties, Sass kit and TypeScript constants. Works in plain HTML, or under any framework.",
   "keywords": [
     "css",
@@ -66,6 +66,10 @@
       "types": "./dist/utilitiesFiles.d.ts",
       "default": "./dist/utilitiesFiles.js"
     },
+    "./theme-files": {
+      "types": "./dist/themeFiles/index.d.ts",
+      "default": "./dist/themeFiles/index.js"
+    },
     "./vite": {
       "types": "./dist/vite.d.ts",
       "default": "./dist/vite.js"
@@ -86,9 +90,15 @@
     "./scss/config": {
       "sass": "./src/styles/_config.scss"
     },
+    "./scss/core": {
+      "sass": "./src/styles/_core.scss"
+    },
     "./scss/mixins": {
       "sass": "./src/styles/public/_mixins.scss"
     },
+    "./scss/breakpoints": {
+      "sass": "./src/styles/public/_breakpoints.scss"
+    },
     "./scss/tones": {
       "sass": "./src/styles/public/_tones.scss"
     },
@@ -98,6 +108,15 @@
     "./scss/controls": {
       "sass": "./src/styles/public/_controls.scss"
     },
+    "./scss/slides": {
+      "sass": "./src/styles/public/_slides.scss"
+    },
+    "./scss/utilities": {
+      "sass": "./src/styles/public/_utilities.scss"
+    },
+    "./scss/components/*": {
+      "sass": "./dist/scss/components/_*.scss"
+    },
     "./scss/tokens": "./dist/_tokens.scss",
     "./scss/layers": "./dist/_layers.scss",
     "./scss/maps": "./dist/_maps.scss",

package/src/components/AutoLayout/AutoLayout.scss

@@ -1,4 +1,4 @@
-@use '../../styles/mixins';
+@use '../../styles/layout-props';
 
 // Registered so they never inherit: a nested item without a size must not
 // pick up its parent item's.
@@ -62,29 +62,5 @@
     );
   }
 
-  // `gap` sets both gaps and tells the items the column gap.
-  @include mixins.responsive-prop(
-    'greese-AutoLayout',
-    'gap',
-    (column-gap, row-gap, --greese-autolayout-column-gap),
-    mixins.space-tokens()
-  );
-
-  // After `gap`, so it wins where both apply.
-  @include mixins.responsive-prop(
-    'greese-AutoLayout',
-    'row-gap',
-    row-gap,
-    mixins.space-tokens()
-  );
-  @include mixins.responsive-prop(
-    'greese-AutoLayoutItem',
-    'size',
-    --greese-autolayoutitem-s
-  );
-  @include mixins.responsive-prop(
-    'greese-AutoLayoutItem',
-    'max',
-    --greese-autolayoutitem-m
-  );
+  @include layout-props.autolayout;
 }