@adrienlcp/styles 0.1.0 → 0.3.0

package/README.md

@@ -13,7 +13,7 @@ pnpm add @adrienlcp/styles
 
 | File | Does |
 | --- | --- |
-| `reset.css` | Box sizing, zeroed margins and paddings, inherited fonts on controls, bare buttons and lists, balanced headings, pretty paragraphs. Inside `@layer reset` |
+| `reset.css` | Box sizing, zeroed margins and paddings, inherited fonts on controls, bare buttons and lists, balanced headings, pretty paragraphs, and `interpolate-size: allow-keywords` so a transition reaches `height: auto` (Chromium; elsewhere the size snaps as before). Inside `@layer reset` |
 | `reduced-motion.css` | Collapses `--transition-fast`, `--transition-base` and `--transition-slow` to `0ms` under `prefers-reduced-motion: reduce`. Unlayered, so it beats the tokens wherever they are defined |
 
 Import them once — from JavaScript, or from the global stylesheet in Sass:
@@ -30,45 +30,55 @@ stylesheet loads, so the reset stays under every component rule —
 ## Sass
 
 Resolved through the `sass` export condition, which Vite reads; with the Sass
-CLI, use `pkg:@adrienlcp/styles/focus` and `--pkg-importer=node`.
+CLI, use `pkg:@adrienlcp/styles/breakpoints` and `--pkg-importer=node`.
 
-### `breakpoints`
+### `containers`
+
+A component answers the room it is given, not the screen: the same card
+lays out the same way in a sidebar on a desktop and full width on a phone.
 
 ```sass
-@use '@adrienlcp/styles/breakpoints'
+@use '@adrienlcp/styles/containers'
 
-.page
-  @include breakpoints.wide
-    grid-template-columns: 1fr 1fr
+.card
+  @include containers.container
+
+  .card-body
+    @include containers.container-wide(30rem)
+      grid-template-columns: auto 1fr
 ```
 
-`$wide-screen` is `900px`; `wide` is `width >= $wide-screen` and `narrow` its
-exact complement. Another value: `@use '@adrienlcp/styles/breakpoints' with
-($wide-screen: 1024px)`.
+- `container($name: null)` sets `container-type: inline-size`, and
+  `container-name` when given one.
+- `container-wide($width, $name: null)` is `width >= $width` on the nearest
+  container, or on the one named; `container-narrow` is its exact complement.
+- **An element queries an ancestor, never itself** — the container wraps what
+  changes.
+- **A container no longer takes its width from its content**: inside a flex row
+  without a width, an `auto` grid track or an absolutely positioned box, it
+  collapses to zero. Its parent gives it a width.
+- **With no container above, neither mixin matches.** Make `body` one in the
+  global stylesheet, so an unwrapped component falls back to the page width;
+  `position: fixed` stays on the viewport.
+- The width is Sass interpolated into `@container`, so pass a value, not a
+  custom property — `@container` cannot read one either.
 
-### `focus`
+### `breakpoints`
 
-`ring` and `ring-inset` draw the outline on `[data-focus-visible]` (react-aria)
-and `:focus-visible` (a native element). `hovered` wraps a hover style in
-`(hover: hover) and (pointer: fine)`, since a touch screen replays hover after a
-tap and leaves it stuck; `$except` skips a state.
+For what depends on the device rather than the room a component has: the page
+shell, a sidebar that turns into a drawer, an overlay pinned to the viewport.
 
 ```sass
-@use '@adrienlcp/styles/focus'
-
-.button
-  @include focus.ring
+@use '@adrienlcp/styles/breakpoints'
 
-  @include focus.hovered($except: '[data-disabled]')
-    background: var(--hover)
+.shell
+  @include breakpoints.wide
+    grid-template-columns: 16rem 1fr
 ```
 
-Configure the ring once, in the app's own `_focus.sass`, and have components
-`@use` that file:
-
-```sass
-@forward '@adrienlcp/styles/focus' with ($ring-color: var(--focus), $ring-offset: 3px, $ring-width: 3px)
-```
+`$wide-screen` is `900px`; `wide` is `width >= $wide-screen` and `narrow` its
+exact complement. Another value: `@use '@adrienlcp/styles/breakpoints' with
+($wide-screen: 1024px)`.
 
 ### `fonts`
 

package/package.json

@@ -1,58 +1,57 @@
-{
-  "author": "Adrien Lacourpaille",
-  "bugs": "https://github.com/AdrienLcp/packages/issues",
-  "description": "A reset, a reduced-motion switch, and Sass mixins for self-hosted fonts, a breakpoint, focus rings and pointer-only hover",
-  "devDependencies": {
-    "sass": "^1.105.0"
-  },
-  "exports": {
-    "./breakpoints": {
-      "sass": "./src/_breakpoints.sass"
-    },
-    "./focus": {
-      "sass": "./src/_focus.sass"
-    },
-    "./fonts": {
-      "sass": "./src/_fonts.sass"
-    },
-    "./package.json": "./package.json",
-    "./reduced-motion.css": "./src/reduced-motion.css",
-    "./reset.css": "./src/reset.css"
-  },
-  "files": [
-    "src/*.css",
-    "src/*.sass"
-  ],
-  "homepage": "https://github.com/AdrienLcp/packages/tree/main/packages/styles#readme",
-  "keywords": [
-    "css",
-    "focus-visible",
-    "font-face",
-    "reset",
-    "sass"
-  ],
-  "license": "MIT",
-  "name": "@adrienlcp/styles",
-  "peerDependencies": {
-    "sass": ">=1.80.0"
-  },
-  "peerDependenciesMeta": {
-    "sass": {
-      "optional": true
-    }
-  },
-  "repository": {
-    "directory": "packages/styles",
-    "type": "git",
-    "url": "git+https://github.com/AdrienLcp/packages.git"
-  },
-  "scripts": {
-    "test": "vitest run",
-    "test:watch": "vitest --watch"
-  },
-  "sideEffects": [
-    "*.css"
-  ],
-  "type": "module",
-  "version": "0.1.0"
-}
+{
+  "author": "Adrien Lacourpaille",
+  "bugs": "https://github.com/AdrienLcp/packages/issues",
+  "description": "A reset, a reduced-motion switch, and Sass mixins for self-hosted fonts, container queries and a breakpoint",
+  "devDependencies": {
+    "sass": "^1.105.0"
+  },
+  "exports": {
+    "./breakpoints": {
+      "sass": "./src/_breakpoints.sass"
+    },
+    "./containers": {
+      "sass": "./src/_containers.sass"
+    },
+    "./fonts": {
+      "sass": "./src/_fonts.sass"
+    },
+    "./package.json": "./package.json",
+    "./reduced-motion.css": "./src/reduced-motion.css",
+    "./reset.css": "./src/reset.css"
+  },
+  "files": [
+    "src/*.css",
+    "src/*.sass"
+  ],
+  "homepage": "https://github.com/AdrienLcp/packages/tree/main/packages/styles#readme",
+  "keywords": [
+    "css",
+    "font-face",
+    "reset",
+    "sass"
+  ],
+  "license": "MIT",
+  "name": "@adrienlcp/styles",
+  "peerDependencies": {
+    "sass": ">=1.80.0"
+  },
+  "peerDependenciesMeta": {
+    "sass": {
+      "optional": true
+    }
+  },
+  "repository": {
+    "directory": "packages/styles",
+    "type": "git",
+    "url": "git+https://github.com/AdrienLcp/packages.git"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "type": "module",
+  "version": "0.3.0",
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest --watch"
+  }
+}

package/src/_breakpoints.sass

@@ -1,6 +1,8 @@
 /// Where a screen stops being a phone's. A media query cannot read a custom
 /// property, so the breakpoint is a Sass value; override it with
 /// `@use '@adrienlcp/styles/breakpoints' with ($wide-screen: 1024px)`.
+/// Only for what depends on the device — the page shell, a fixed overlay; a
+/// component answers its container through `containers`.
 $wide-screen: 900px !default
 
 /// `wide` and `narrow` are exact complements: every width is one or the other.

package/src/_containers.sass

@@ -0,0 +1,24 @@
+/// Makes the element a container its descendants query by inline size. It can
+/// no longer take its width from its content, so its parent gives it one —
+/// a block, a stretched flex or grid item, a sized track.
+@mixin container($name: null)
+  container-type: inline-size
+  @if $name
+    container-name: $name
+
+/// Matches when the nearest container — or the one named — is at least
+/// `$width` wide. With no container above, neither this nor
+/// `container-narrow` matches.
+@mixin container-wide($width, $name: null)
+  @container #{_condition($name, 'width >= #{$width}')}
+    @content
+
+/// The exact complement of `container-wide` for the same `$width` and `$name`.
+@mixin container-narrow($width, $name: null)
+  @container #{_condition($name, 'width < #{$width}')}
+    @content
+
+@function _condition($name, $feature)
+  @if $name
+    @return '#{$name} (#{$feature})'
+  @return '(#{$feature})'

package/src/reset.css

@@ -11,6 +11,7 @@
   }
 
   html {
+    interpolate-size: allow-keywords;
     -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
   }

package/src/_focus.sass

@@ -1,32 +0,0 @@
-/// Configure once, in the app's own `_focus.sass`:
-/// `@forward '@adrienlcp/styles/focus' with ($ring-color: var(--focus) !default)`.
-$ring-width: 2px !default
-$ring-color: currentColor !default
-$ring-offset: 3px !default
-
-/// react-aria stamps `data-focus-visible` on keyboard focus only; the
-/// `:focus-visible` twin covers a native element.
-@mixin ring
-  &[data-focus-visible],
-  &:focus-visible
-    outline: $ring-width solid $ring-color
-    outline-offset: $ring-offset
-
-/// The ring drawn inside the box, for an element a clipping ancestor would cut.
-@mixin ring-inset
-  &[data-focus-visible],
-  &:focus-visible
-    outline: $ring-width solid $ring-color
-    outline-offset: calc(-1 * $ring-width)
-
-/// Only a real pointer hovers: a touch screen replays hover after a tap and
-/// leaves it stuck until the next one. `$except` skips a state, as in
-/// `hovered($except: '[data-disabled]')`.
-@mixin hovered($except: null)
-  @media (hover: hover) and (pointer: fine)
-    @if $except
-      &[data-hovered]:not(#{$except})
-        @content
-    @else
-      &[data-hovered]
-        @content