@adrienlcp/styles 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Adrien Lacourpaille
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,86 @@
+# @adrienlcp/styles
+
+The styling floor every app of mine starts from: a reset, a reduced-motion
+switch, and the Sass mixins that CSS cannot write yet. Plain `.css` for what
+CSS can say, `.sass` only for what it cannot — a custom property is not allowed
+in a media query or in `unicode-range`, and CSS has no mixins.
+
+```bash
+pnpm add @adrienlcp/styles
+```
+
+## Plain CSS
+
+| 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` |
+| `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:
+
+```sass
+@use '@adrienlcp/styles/reset.css'
+@use '@adrienlcp/styles/reduced-motion.css'
+```
+
+`reset.css` declares a layer: set the order in the document head before any
+stylesheet loads, so the reset stays under every component rule —
+`<style>@layer reset, tokens, base, components;</style>`.
+
+## Sass
+
+Resolved through the `sass` export condition, which Vite reads; with the Sass
+CLI, use `pkg:@adrienlcp/styles/focus` and `--pkg-importer=node`.
+
+### `breakpoints`
+
+```sass
+@use '@adrienlcp/styles/breakpoints'
+
+.page
+  @include breakpoints.wide
+    grid-template-columns: 1fr 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)`.
+
+### `focus`
+
+`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.
+
+```sass
+@use '@adrienlcp/styles/focus'
+
+.button
+  @include focus.ring
+
+  @include focus.hovered($except: '[data-disabled]')
+    background: var(--hover)
+```
+
+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)
+```
+
+### `fonts`
+
+`$latin` and `$latin-ext` are the unicode ranges Google Fonts cuts a Latin face
+into; `font-face` declares one self-hosted `woff2` file.
+
+```sass
+@use '@adrienlcp/styles/fonts'
+
+@include fonts.font-face('Archivo', '/fonts/archivo-latin.woff2', fonts.$latin, $weight: 100 900, $stretch: 62% 125%)
+@include fonts.font-face('Archivo', '/fonts/archivo-latin-ext.woff2', fonts.$latin-ext, $weight: 100 900, $stretch: 62% 125%)
+```
+
+`$weight`, `$style` (`normal`), `$stretch` (left out) and `$display` (`swap`)
+are optional.

package/package.json

@@ -0,0 +1,58 @@
+{
+  "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"
+}

package/src/_breakpoints.sass

@@ -0,0 +1,13 @@
+/// 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)`.
+$wide-screen: 900px !default
+
+/// `wide` and `narrow` are exact complements: every width is one or the other.
+@mixin wide
+  @media (width >= $wide-screen)
+    @content
+
+@mixin narrow
+  @media (width < $wide-screen)
+    @content

package/src/_focus.sass

@@ -0,0 +1,32 @@
+/// 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

package/src/_fonts.sass

@@ -0,0 +1,16 @@
+/// The two subsets Google Fonts cuts a Latin face into: a page in English or
+/// French downloads the first file only.
+$latin: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
+$latin-ext: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
+
+/// One self-hosted `woff2` file. `$weight` and `$stretch` take a range for a
+/// variable face.
+@mixin font-face($family, $url, $unicode-range, $weight: 400, $style: normal, $stretch: null, $display: swap)
+  @font-face
+    font-display: $display
+    font-family: $family
+    font-stretch: $stretch
+    font-style: $style
+    font-weight: $weight
+    src: url($url) format('woff2')
+    unicode-range: $unicode-range

package/src/reduced-motion.css

@@ -0,0 +1,8 @@
+/* Unlayered, so it beats the token definitions whatever layer or file they sit in. */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --transition-fast: 0ms;
+    --transition-base: 0ms;
+    --transition-slow: 0ms;
+  }
+}

package/src/reset.css

@@ -0,0 +1,61 @@
+@layer reset {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  * {
+    padding: 0;
+    margin: 0;
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+  }
+
+  body {
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.5;
+  }
+
+  img,
+  picture,
+  svg,
+  canvas,
+  video {
+    display: block;
+    max-width: 100%;
+  }
+
+  button,
+  input,
+  select,
+  textarea {
+    font: inherit;
+    color: inherit;
+  }
+
+  button {
+    cursor: pointer;
+    background: none;
+    border: none;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    text-wrap: balance;
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  ul,
+  ol {
+    list-style: none;
+  }
+}