@codenhub/styles 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/dist/aesthetics/chunky-tile.css +1 -1
  2. package/dist/aesthetics/cyber.css +1 -0
  3. package/dist/aesthetics/glass.css +1 -1
  4. package/dist/aesthetics/index.css +1 -1
  5. package/dist/aesthetics/neobrutalism.css +1 -1
  6. package/dist/aesthetics/pixel.css +1 -1
  7. package/dist/components.css +1 -1
  8. package/dist/index.css +1 -1
  9. package/dist/native.css +1 -1
  10. package/dist/tw/aesthetics/chunky-tile.css +71 -0
  11. package/dist/tw/aesthetics/cyber.css +190 -0
  12. package/dist/tw/aesthetics/glass.css +46 -0
  13. package/dist/tw/aesthetics/index.css +1 -0
  14. package/dist/tw/aesthetics/neobrutalism.css +53 -0
  15. package/dist/tw/aesthetics/pixel.css +48 -0
  16. package/dist/tw/box.css +7 -0
  17. package/dist/tw/components/button.css +3 -0
  18. package/dist/tw/components/feedback.css +13 -5
  19. package/dist/tw/components/form.css +16 -5
  20. package/dist/tw/components/tooltip.css +1 -1
  21. package/dist/tw/utilities/content.css +2 -2
  22. package/docs/changelog/0.4.0.md +12 -0
  23. package/docs/changelog/index.md +1 -0
  24. package/docs/concepts.md +5 -5
  25. package/docs/index.md +2 -2
  26. package/docs/setup.md +3 -3
  27. package/docs/usage/aesthetics.md +75 -1
  28. package/docs/usage/customizing.md +57 -42
  29. package/llms-full.txt +151 -52
  30. package/package.json +12 -2
package/llms-full.txt CHANGED
@@ -68,7 +68,7 @@ The package ships as ready-to-import compiled CSS, or as Tailwind CSS v4 source
68
68
  - Publishes color, foundation, intent, presentation, and material design tokens as CSS custom properties, themed with `light-dark()`.
69
69
  - Provides a reset, focus-visible handling, and responsive layout/content utilities.
70
70
  - Provides composable classes for buttons, form controls and toggles, alerts, badges, loaders, progress, cards/panels, tables, quotes, code, and tooltips.
71
- - Provides four opt-in aesthetics that restyle the same components by setting material tokens, not by adding component variants.
71
+ - Provides five opt-in aesthetics that restyle the same components by setting material tokens, not by adding component variants, each with a solo class that paints the look onto an element the package does not style.
72
72
  - Provides classless mappings so plain HTML elements pick up base styling without added classes, from a dedicated entrypoint.
73
73
  - Publishes Tailwind CSS v4 source entrypoints alongside the compiled output.
74
74
 
@@ -77,7 +77,7 @@ The package ships as ready-to-import compiled CSS, or as Tailwind CSS v4 source
77
77
  - No JavaScript. There is no runtime, no framework bindings, and no build-time code generation beyond the CSS itself.
78
78
  - No semantic HTML, ARIA, keyboard behavior, focus management, validation, or announcement timing. See [Accessibility](docs/accessibility.md) for the exact line between what the CSS provides and what an application must still add.
79
79
  - No theme-toggling logic. Theme selection is a class or attribute a consumer applies; wiring a toggle to system preference, storage, or a user setting is outside this package. The `@codenhub/theme` package covers that need for consumers who want it.
80
- - No shipped font binaries. `.pixel` and `.chunky-tile` accept a consumer-supplied font and fall back to a system stack when none is given.
80
+ - No shipped font binaries. `.pixel`, `.chunky-tile`, and `.cyber` accept a consumer-supplied font and fall back to a system stack when none is given.
81
81
  - No compatibility layer for removed tokens or classes. Breaking changes are documented, not silently aliased.
82
82
 
83
83
  ## Next steps
@@ -175,8 +175,8 @@ Compiled entrypoints are ready-to-import CSS and require only tooling that can r
175
175
  | `@codenhub/styles/palette` | Generated, self-contained `--palette-*` custom properties: every intent/presentation cell's fill, text, and edge color, plus the flat `border`/`surface`/`text` neutral tokens, pre-composed to a flat value. For a consumer that cannot take this package as a build-time dependency (an optional peer, for example) but wants to look consistent with it. Not a replacement for the components themselves when Tailwind is available -- see [Customizing → Generated palette](docs/usage/customizing.md#generated-palette). |
176
176
  | `@codenhub/styles/components` | Compiled theme tokens, typography utilities, and every component class. Includes static reduced-motion loader masks; no reset, layout/content utilities, or native mappings. |
177
177
  | `@codenhub/styles/native` | Compiled complete surface plus classless mappings for headings, text, content elements, form controls, and buttons. Applies the reset and broad element selectors. |
178
- | `@codenhub/styles/aesthetics` | Compiled `.neobrutalism`, `.glass`, `.pixel`, and `.chunky-tile` classes. Adds no tokens or components of its own; import after the base stylesheet. |
179
- | `@codenhub/styles/aesthetics/*` | One compiled aesthetic: `/neobrutalism`, `/glass`, `/pixel`, or `/chunky-tile`. Same rules and ordering as the combined file. |
178
+ | `@codenhub/styles/aesthetics` | Compiled `.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile`, and `.cyber` classes, and each one's `-solo` class. Adds no tokens or components of its own; import after the base stylesheet. |
179
+ | `@codenhub/styles/aesthetics/*` | One compiled aesthetic and its solo class: `/neobrutalism`, `/glass`, `/pixel`, `/chunky-tile`, or `/cyber`. Same rules and ordering as the combined file. |
180
180
  | `@codenhub/styles/tw` | Source equivalent of the complete stylesheet. Imports Tailwind itself, theme, typography, utilities, components, and reset; applies the same global rules. |
181
181
  | `@codenhub/styles/tw/theme` | Source theme, tokens, and presentation classes. Imports Tailwind's theme layer; emits root/system/explicit theme selectors and defines the package's custom `dark:` variant. |
182
182
  | `@codenhub/styles/tw/components` | Published Tailwind source for theme, typography, buttons, feedback, forms, loaders, surfaces, and tooltips, including static reduced-motion loader masks. No reset, layout/content utilities, or native mappings. |
@@ -190,7 +190,7 @@ Compiled entrypoints are ready-to-import CSS and require only tooling that can r
190
190
  | `@codenhub/styles/tw/native` | Source complete surface plus reset and classless native-element mappings; broadest global effects. |
191
191
  | `@codenhub/styles/tw/typography` | Source theme plus typography utilities; sets theme selectors but no reset or classless mappings. |
192
192
  | `@codenhub/styles/tw/utilities` | Source theme and typography composition plus layout and content utilities; safelists the package utility names. |
193
- | `@codenhub/styles/tw/aesthetics` | Source aesthetics, combined. `/tw/aesthetics/neobrutalism`, `/glass`, `/pixel`, and `/chunky-tile` publish one apiece. Plain CSS with no theme or reset side effects. |
193
+ | `@codenhub/styles/tw/aesthetics` | Source aesthetics, combined. `/tw/aesthetics/neobrutalism`, `/glass`, `/pixel`, `/chunky-tile`, and `/cyber` publish one apiece. Plain CSS with no theme or reset side effects. |
194
194
 
195
195
  Avoid importing overlapping entrypoints in the same build unless duplicate generated CSS is acceptable; pick the narrowest entrypoint that covers what a page needs.
196
196
 
@@ -211,11 +211,11 @@ Read this before the usage guides. It explains the mental model every component,
211
211
 
212
212
  Every component separates three independent choices, so each can change without a component-specific variant:
213
213
 
214
- | Axis | Question | Classes | Inheritance |
215
- | ------------ | --------------- | ----------------------------------------------------------------------------------------- | ------------ |
216
- | Intent | Which color? | `.primary`, `.secondary`, `.success`, `.warning`, `.destructive`, `.info` | Element only |
217
- | Presentation | How much of it? | `.solid`, `.soft`, `.ghost`, `.edged`, `.edgeless` | Cascades |
218
- | Aesthetic | Made of what? | `.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile` from an optional aesthetic stylesheet | Cascades |
214
+ | Axis | Question | Classes | Inheritance |
215
+ | ------------ | --------------- | --------------------------------------------------------------------------------------------------- | ------------ |
216
+ | Intent | Which color? | `.primary`, `.secondary`, `.success`, `.warning`, `.destructive`, `.info` | Element only |
217
+ | Presentation | How much of it? | `.solid`, `.soft`, `.ghost`, `.edged`, `.edgeless` | Cascades |
218
+ | Aesthetic | Made of what? | `.neobrutalism`, `.glass`, `.pixel`, `.chunky-tile`, `.cyber` from an optional aesthetic stylesheet | Cascades |
219
219
 
220
220
  ```html
221
221
  <section class="soft pixel">
@@ -621,35 +621,38 @@ Material tokens describe what a component is _made of_ rather than which intent
621
621
 
622
622
  Components read each with a fallback, so leaving them unset produces the default look. Setting them on a container restyles the whole subtree. Only shadow geometry is split into colorless parts that inherit safely; color-capable inputs such as `--ui-ink` and `--ui-surface-shadow` may include their own colors.
623
623
 
624
- | Token | Purpose | Fallback |
625
- | ----------------------- | ------------------------------------------------------------------------------------------------------------- | -------------------- |
626
- | `--ui-radius` | Corner radius for controls. | `--radius-control` |
627
- | `--ui-radius-surface` | Corner radius for surfaces. | `--radius-surface` |
628
- | `--ui-border-width` | Edge thickness. | `--border-width` |
629
- | `--ui-border-max` | Ceiling on computed edge width. | `100px` |
630
- | `--ui-ink` | Neutral line color when no intent is set. | `--color-border` |
631
- | `--ui-rule` | Lines inside a table. Unset draws the head and foot boundaries only; `0%` draws none; `100%` rules every row. | unset |
632
- | `--ui-shadow-x` | Shadow horizontal offset. | `0px` |
633
- | `--ui-shadow-y` | Shadow vertical offset. | `0px` |
634
- | `--ui-shadow-blur` | Shadow blur radius. | `0px` |
635
- | `--ui-shadow-spread` | Shadow spread radius. | `0px` |
636
- | `--ui-shadow-inset` | The `inset` keyword for an inner ring. | Empty |
637
- | `--ui-hover-shadow-x` | Shadow horizontal offset while hovered. | `--ui-shadow-x` |
638
- | `--ui-hover-shadow-y` | Shadow vertical offset while hovered. | `--ui-shadow-y` |
639
- | `--ui-active-shadow-x` | Shadow horizontal offset while pressed. | `--ui-shadow-x` |
640
- | `--ui-active-shadow-y` | Shadow vertical offset while pressed. | `--ui-shadow-y` |
641
- | `--ui-active-transform` | Transform while pressed. `none` under `prefers-reduced-motion`. | `scale(0.97)` |
642
- | `--ui-shadow-ink` | Percentage of shadow color taken from intent ink. | `0%` |
643
- | `--ui-shadow-edge` | Declared, even empty, when the shadow is the element's edge rather than its depth. Read for presence. | Unset |
644
- | `--ui-elevation` | Unitless multiplier over shadow geometry. | `1` |
645
- | `--ui-surface-shadow` | Complete multi-layer shadow accepted by surfaces only. | Unset |
646
- | `--ui-surface-ground` | Ground a surface sits on. | `--color-background` |
647
- | `--ui-bg-alpha` | Multiplier over fill for translucent materials. | `1` |
648
- | `--ui-backdrop` | Backdrop filter accepted by surfaces only. | `none` |
649
- | `--ui-hover-transform` | Transform while an interactive element is hovered. | `none` |
650
- | `--ui-clip` | Structural component silhouette. | `none` |
651
- | `--ui-clip-tight` | Compact component silhouette. | `--ui-clip` |
652
- | `--ui-focus-inset` | Inset focus layer width. | Unset |
624
+ | Token | Purpose | Fallback |
625
+ | ----------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------- |
626
+ | `--ui-radius` | Corner radius for controls. | `--radius-control` |
627
+ | `--ui-radius-surface` | Corner radius for surfaces. | `--radius-surface` |
628
+ | `--ui-corner-shape` | What every corner the two radii set draws: `round`, or `bevel` for a straight cut. Chromium only today. | `round` |
629
+ | `--ui-radius-pill` | Corner for what is fully round by default: badges, switches, progress, the tooltip icon. | `--ui-radius`, then full |
630
+ | `--ui-radius-tight` | Corner for chips -- checkbox, `.kbd`, `.code` -- before their `--radius-small` cap. | `--ui-radius`, then small |
631
+ | `--ui-border-width` | Edge thickness. | `--border-width` |
632
+ | `--ui-border-max` | Ceiling on computed edge width. | `100px` |
633
+ | `--ui-ink` | Neutral line color when no intent is set. | `--color-border` |
634
+ | `--ui-rule` | Lines inside a table. Unset draws the head and foot boundaries only; `0%` draws none; `100%` rules every row. | unset |
635
+ | `--ui-shadow-x` | Shadow horizontal offset. | `0px` |
636
+ | `--ui-shadow-y` | Shadow vertical offset. | `0px` |
637
+ | `--ui-shadow-blur` | Shadow blur radius. | `0px` |
638
+ | `--ui-shadow-spread` | Shadow spread radius. | `0px` |
639
+ | `--ui-shadow-inset` | The `inset` keyword for an inner ring. | Empty |
640
+ | `--ui-hover-shadow-x` | Shadow horizontal offset while hovered. | `--ui-shadow-x` |
641
+ | `--ui-hover-shadow-y` | Shadow vertical offset while hovered. | `--ui-shadow-y` |
642
+ | `--ui-active-shadow-x` | Shadow horizontal offset while pressed. | `--ui-shadow-x` |
643
+ | `--ui-active-shadow-y` | Shadow vertical offset while pressed. | `--ui-shadow-y` |
644
+ | `--ui-active-transform` | Transform while pressed. `none` under `prefers-reduced-motion`. | `scale(0.97)` |
645
+ | `--ui-shadow-ink` | Percentage of shadow color taken from intent ink. | `0%` |
646
+ | `--ui-shadow-edge` | Declared, even empty, when the shadow is the element's edge rather than its depth. Read for presence. | Unset |
647
+ | `--ui-elevation` | Unitless multiplier over shadow geometry. | `1` |
648
+ | `--ui-surface-shadow` | Complete multi-layer shadow accepted by surfaces only. | Unset |
649
+ | `--ui-surface-ground` | Ground a surface sits on. | `--color-background` |
650
+ | `--ui-bg-alpha` | Multiplier over fill for translucent materials. | `1` |
651
+ | `--ui-backdrop` | Backdrop filter accepted by surfaces only. | `none` |
652
+ | `--ui-hover-transform` | Transform while an interactive element is hovered. | `none` |
653
+ | `--ui-clip` | Structural component silhouette. | `none` |
654
+ | `--ui-clip-tight` | Compact component silhouette. | `--ui-clip` |
655
+ | `--ui-focus-inset` | Inset focus layer width. | Unset |
653
656
 
654
657
  ```html
655
658
  <section style="--ui-radius: 0; --ui-border-width: 3px">
@@ -664,6 +667,10 @@ Components read each with a fallback, so leaving them unset produces the default
664
667
 
665
668
  Clipping removes borders, outlines, and outer shadows. An aesthetic that uses a clip can replace the border with an inset shadow by setting `--ui-shadow-inset` and the four shadow geometry parts. Set `--ui-border-max: 0px` when that ring replaces the component border. Focusable components restore the clipped focus outline through `--ui-focus-inset`.
666
669
 
670
+ A clip is not the only way to cut a corner. `--ui-corner-shape: bevel` draws the corner the radius sets as a straight cut instead of an arc, and the border, outer shadow, focus outline, and backdrop all follow it -- so a bevelled element keeps its glow and its line, where a clipped one loses both. `.cyber` uses it. Engines without `corner-shape` ignore it and draw the radius round, so an aesthetic that bevels should square its radius under `@supports not (corner-shape: bevel)`. A bevel on a full radius cuts to points: a radio, a `.btn.pill`, and anything reading `--ui-radius-pill` become diamonds or pointed hexagons.
671
+
672
+ Because `--ui-radius` accepts any `border-radius` value, it can also place the corner per side: `10px 0` cuts only top-left and bottom-right. The pill and chip corners are separate tokens for that reason -- a pill's full radius and a chip's `min()` cap cannot take a per-corner value -- and each falls back to `--ui-radius` when unset.
673
+
667
674
  Declare `--ui-shadow-edge` when that ring _is_ the border. The ring then takes the element's edge color, which carries the edge axis as its alpha, so `.edged` draws it and `.edgeless` does not — the same answer a real border gives. Without it the ring paints on every component the aesthetic reaches and the edge classes have no effect. Use `--ui-shadow-ink` instead when the shadow is depth cast in the intent's own ink, such as a hard offset slab, which an `.edgeless` element still gets.
668
675
 
669
676
  The token is read for its presence, not its value: declare it empty to switch the ring on, and `initial` to switch it back off in an aesthetic nested inside one that declares it.
@@ -689,18 +696,24 @@ Variables prefixed `--_` are internal composition outputs — `--_bg`, `--_fg`,
689
696
 
690
697
  The shipped [aesthetic classes](docs/usage/aesthetics.md) set material tokens for you. Only aesthetics with a token listed below expose an aesthetic-specific token. Tune all other behavior through the shared material tokens above. Listed tokens are available only where that aesthetic's stylesheet is imported.
691
698
 
692
- | Token | Aesthetic | Purpose | Default |
693
- | ------------------------ | --------------- | ----------------------------------------------------------- | --------------------------------- |
694
- | `--neo-offset` | `.neobrutalism` | Hard shadow offset and distance the press travels. | `4px` |
695
- | `--glass-radius` | `.glass` | Control corner radius. | `0.75rem` |
696
- | `--glass-radius-surface` | `.glass` | Surface corner radius. | `1rem` |
697
- | `--pixel-unit` | `.pixel` | One pixel of the grid. The corner cut and the ring are one. | `4px` |
698
- | `--font-pixel` | `.pixel` | Consumer-supplied pixel font stack. | Falls back to the monospace stack |
699
- | `--tile-radius` | `.chunky-tile` | Corner radius, on controls and surfaces alike. | `0.75rem` |
700
- | `--tile-lift` | `.chunky-tile` | Depth of the seated bar, and how far a press travels. | `4px` |
701
- | `--font-rounded` | `.chunky-tile` | Consumer-supplied rounded font stack. | Falls back to the page stack |
702
-
703
- All four aesthetics reach the same way: each knob is _read_ with its default as a `var()` fallback rather than declared, so it resolves once into a private on the aesthetic's own class (`--_pixel-unit`, `--_neo-offset`, `--_tile-radius`, `--_tile-lift`, and so on). Set a knob on the element carrying the aesthetic class, or on any ancestor including `:root`:
699
+ | Token | Aesthetic | Purpose | Default |
700
+ | ------------------------ | --------------- | --------------------------------------------------------------------------------------------- | ---------------------------------- |
701
+ | `--neo-offset` | `.neobrutalism` | Hard shadow offset and distance the press travels. | `4px` |
702
+ | `--glass-radius` | `.glass` | Control corner radius. | `0.75rem` |
703
+ | `--glass-radius-surface` | `.glass` | Surface corner radius. | `1rem` |
704
+ | `--pixel-unit` | `.pixel` | One pixel of the grid. The corner cut and the ring are one. | `4px` |
705
+ | `--font-pixel` | `.pixel` | Consumer-supplied pixel font stack. | Falls back to the monospace stack |
706
+ | `--tile-radius` | `.chunky-tile` | Corner radius, on controls and surfaces alike. | `0.75rem` |
707
+ | `--tile-lift` | `.chunky-tile` | Depth of the seated bar, and how far a press travels. | `4px` |
708
+ | `--font-rounded` | `.chunky-tile` | Consumer-supplied rounded font stack. | Falls back to the page stack |
709
+ | `--cyber-cut` | `.cyber` | Largest cut, on controls and surfaces alike; the default shapes cap it at 25% of the element. | `0.625rem` |
710
+ | `--cyber-shape` | `.cyber` | Where controls take the cut: any `border-radius` value. | `<cut> 0` (top-left, bottom-right) |
711
+ | `--cyber-shape-surface` | `.cyber` | Where surfaces take the cut: any `border-radius` value. | `0 <cut>` (top-right, bottom-left) |
712
+ | `--cyber-glow` | `.cyber` | Blur of the glow. | `8px` |
713
+ | `--cyber-ink` | `.cyber` | Neutral line and glow colour, where no intent sets one. | Theme ink (near-black, near-white) |
714
+ | `--font-cyber` | `.cyber` | Consumer-supplied technical font stack. | Falls back to the monospace stack |
715
+
716
+ Every aesthetic's knobs reach the same way: each knob is _read_ with its default as a `var()` fallback rather than declared, so it resolves once into a private on the aesthetic's own class (`--_pixel-unit`, `--_neo-offset`, `--_tile-radius`, `--_tile-lift`, and so on). Set a knob on the element carrying the aesthetic class, or on any ancestor including `:root`:
704
717
 
705
718
  ```html
706
719
  <section class="pixel" style="--pixel-unit: 6px">
@@ -718,7 +731,9 @@ All four aesthetics reach the same way: each knob is _read_ with its default as
718
731
 
719
732
  Knobs and material tokens reach in opposite directions, and telling them apart matters. A knob resolves once at the aesthetic's own class and inherits down already-resolved, so it reaches the aesthetic **from above**: setting it on the element or any ancestor works, but setting it on a _descendant_ of the aesthetic class changes nothing — the value has already been read. `--ui-radius` and the other material tokens above are read fresh by each component as it draws, so they reach **at or below** the element carrying them, which is how you round one card differently from its neighbours without touching the knob at all.
720
733
 
721
- Shipped aesthetics set the shared material tokens above. `.neobrutalism` and `.pixel` set `--ui-ink` for their neutral outline; intent classes still override the intent slots on each component.
734
+ Shipped aesthetics set the shared material tokens above. `.neobrutalism`, `.pixel`, and `.cyber` set `--ui-ink` for their neutral outline; intent classes still override the intent slots on each component.
735
+
736
+ The same knobs tune each aesthetic's [solo class](docs/usage/aesthetics.md#solo-classes), which reads them on its own element.
722
737
 
723
738
  ## Generated palette
724
739
 
@@ -785,6 +800,7 @@ Like presentation, an aesthetic class cascades to any subtree:
785
800
  | `.glass` | Translucent surfaces over a blurred backdrop with a hairline highlight edge. |
786
801
  | `.pixel` | Corners cut by one grid unit, a chunky outline drawn as an inset ring, and the consumer-supplied `--font-pixel` over monospace. |
787
802
  | `.chunky-tile` | Rounded slabs seated on a darker shade of themselves, with a press that moves the element down into its own bar. |
803
+ | `.cyber` | Bevelled corners, a thin bright edge, and a glow in the component's own colour. |
788
804
 
789
805
  Aesthetics compose with every supported fill and edge pair. `.ghost.edgeless` intentionally removes the visible material traits from components whose aesthetic is expressed only through their fill, edge, or elevation.
790
806
 
@@ -875,6 +891,79 @@ The bar is a darker shade of the element's own colour rather than a shadow under
875
891
  - The shipped `.primary` is a near-black-or-near-white monochrome depending on theme, and the bar mixes toward a fixed black regardless of theme. In light theme this leaves a primary button's bar almost invisible against its own near-black plate (measured `1.04:1`, 10 units of sRGB distance); in dark theme the near-white plate against the same black-anchored bar reads fine (`2.48:1`, 154 units). Give `.primary` a hue of its own if it is the call to action and needs the depth cue in both themes.
876
892
  - Depth in this aesthetic is the bar, never a blurred drop shadow. Anything the registry rests flat sits flush on the page.
877
893
 
894
+ ## Cyber
895
+
896
+ Bevelled corners, a 1px edge, and a glow in the component's own colour: a success button glows green, a destructive card red. The bevel is drawn with `corner-shape`, so the border, the glow, and the focus outline all follow the cut rather than being clipped by it.
897
+
898
+ Controls and surfaces take the cut on opposite diagonals, so a button and the card around it read as the same material and as different things: buttons and fields cut top-left and bottom-right, cards, panels, and alerts top-right and bottom-left. Anything fully round cuts to points -- a radio, a switch knob, and the tooltip icon become diamonds, a pill button or a badge a pointed hexagon -- and chips square, so the checkbox reads as a plain square beside the diamond radio.
899
+
900
+ `--cyber-cut` is the largest cut, `0.625rem`: the default shapes cap it at a quarter of the element's own box, so a normal button or a card takes the full cut and a small icon button a smaller one rather than losing its corners. `--cyber-shape` and `--cyber-shape-surface` place it, and take any `border-radius` value. `--cyber-glow` is the glow's blur, `8px`. `--cyber-ink` is the neutral line and glow colour, which follows the theme by default -- near-black on light, near-white on dark -- and is where a neon neutral goes if you want one.
901
+
902
+ ```html
903
+ <section class="cyber" style="--cyber-ink: rgb(0 229 255); --cyber-cut: 0.75rem">
904
+ <button class="btn">Jack in</button>
905
+ </section>
906
+ ```
907
+
908
+ Other shapes are a value away. Set them on the `.cyber` element or any ancestor; `--ui-radius` set on one element changes just that element. A shape you set is used as written, so wrap a length in `min(..., 25%)` if small controls should keep the cap.
909
+
910
+ | Shape | Value |
911
+ | ---------------------- | --------------------- |
912
+ | All four corners | `0.625rem` |
913
+ | The other diagonal | `0 0.625rem` |
914
+ | Hexagon (pointed ends) | `0.625rem / 50%` |
915
+ | Parallelogram | `0.625rem 0 / 100% 0` |
916
+ | One notch, top-right | `0 0.625rem 0 0` |
917
+
918
+ ```html
919
+ <section class="cyber" style="--cyber-shape: 0.625rem / 50%">
920
+ <button class="btn primary">Hexagonal buttons</button>
921
+ </section>
922
+ ```
923
+
924
+ A parallelogram slants its sides into the content, so give a surface that takes one extra inline padding.
925
+
926
+ **Exceptions:**
927
+
928
+ - The bevel is Chromium-only today. Firefox and Safari do not draw `corner-shape` yet, and there the aesthetic squares its cut corners instead of rounding them, and what is fully round stays round, so the look degrades to square, lined, and glowing. It picks up the bevel with no change once an engine ships it.
929
+ - The glow is depth, so it reaches what the registry rests above zero -- buttons and cards -- and anything you raise with `.raised` or `.floating`. Fields, badges, and alerts keep the edge without the glow, and `.flat` takes it off anything.
930
+ - In the light theme the glow of a neutral or `.primary` component is its near-black ink, which reads as a soft shadow rather than as light. The look is at its strongest on a dark page, or with a hued `--cyber-ink`.
931
+ - A plain `.btn.icon` is a square control, so it takes the control diagonal; a `.btn.icon.pill` is round, so it becomes a diamond.
932
+ - `--font-cyber` is yours to supply. The package ships no font binary, so the aesthetic falls back to the monospace stack.
933
+ - Casing is left alone, for the reason [Chunky tile](#chunky-tile) gives.
934
+
935
+ ## Solo classes
936
+
937
+ An aesthetic class sets material tokens and nothing paints until a component reads them, so `.glass` on an element this package does not style -- a toast from another library, a dialog, a plain `<div>` on a page without the base stylesheet -- changes nothing. Each aesthetic also ships a solo class that paints its look directly onto the one element carrying it:
938
+
939
+ | Aesthetic | Solo class | Paints |
940
+ | --------------- | -------------------- | ----------------------------------------------------------------------------------------- |
941
+ | `.glass` | `.glass-solo` | Translucent ground, hairline edge, blur, the tucked two-layer shadow, the surface corner. |
942
+ | `.neobrutalism` | `.neobrutalism-solo` | 2px ink edge, square corners, the hard offset slab. |
943
+ | `.pixel` | `.pixel-solo` | The stepped silhouette, the inset ring in place of a border, the pixel font. |
944
+ | `.chunky-tile` | `.chunky-tile-solo` | The tile corner, 2px edge, the bar under it, the rounded font. |
945
+ | `.cyber` | `.cyber-solo` | The surface diagonal (the control one on an action), 1px edge, the glow, the font. |
946
+
947
+ ```css
948
+ /* The only stylesheet from this package on the page. */
949
+ @import "@codenhub/styles/aesthetics/glass";
950
+ ```
951
+
952
+ ```html
953
+ <div class="toast glass-solo">A pane over whatever is behind it.</div>
954
+ ```
955
+
956
+ A solo class ships in the same entrypoint as its aesthetic, and needs nothing else loaded:
957
+
958
+ - **It paints material, not colour.** Edge, corner, depth, silhouette, backdrop, font, and press. No intent, no fill amount, no hover tint -- the element has no presentation to compose. Glass's translucent ground is the one fill, because it is glass's material.
959
+ - **It reads its aesthetic's knobs and the theme's tokens, with the shipped values as fallbacks.** `--glass-radius-surface`, `--neo-offset`, `--pixel-unit`, `--tile-lift`, `--tile-radius`, `--cyber-cut`, `--cyber-shape`, `--cyber-shape-surface`, `--cyber-glow`, `--cyber-ink`, and the font knobs all work, set on the element or any ancestor. With the theme loaded it follows it; without it, it renders the shipped look.
960
+ - **It ignores the aesthetic around it.** It reads no `--ui-*` or `--elevation-color`, so a `.glass-solo` inside a `.pixel` region keeps its corners. The elevation modifiers do not reach it either.
961
+ - **It beats a foreign component's own styles.** The rules are unlayered and one class deep, so they win over a component's zero-specificity or layered rules wherever the two load. The flip side is that a Tailwind utility on the same element (`rounded-none`) loses to it: tune a solo class through its knobs.
962
+ - **It presses only an action.** Neobrutalism, chunky tile, and cyber press a `button`, `a[href]`, `[role="button"]`, `summary`, or button-type `input` that is not disabled; a container stays put, so a toast does not sink when clicked. Reduced motion drops the movement. Chunky tile's heavier label follows the same rule.
963
+ - **Dark values need a colour scheme.** Light and dark pairs are `light-dark()`, which follows the element's `color-scheme`. The package theme sets it; a page without it gets the light values.
964
+
965
+ Do not put a solo class on this package's own components. On a `.card` it would replace the composed fill, edge, and intent with material alone; use the aesthetic class there.
966
+
878
967
  <!-- Source: docs/usage/buttons.md -->
879
968
 
880
969
  # Buttons
@@ -1756,6 +1845,16 @@ Use ARIA or data attributes when native attributes are not available for the ele
1756
1845
 
1757
1846
  `aria-disabled="true"` communicates disabled state but does not prevent activation. JavaScript or element choice must prevent activation when required.
1758
1847
 
1848
+ <!-- Source: docs/changelog/0.4.0.md -->
1849
+
1850
+ # 0.4.0
1851
+
1852
+ ## Added
1853
+
1854
+ - **`.cyber`**, a fifth aesthetic from `@codenhub/styles/aesthetics/cyber` (and `/tw/aesthetics/cyber`, and both aggregates): bevelled corners, a 1px edge, and a glow in each component's own colour. Controls cut top-left and bottom-right, surfaces top-right and bottom-left; what is fully round (a radio, a switch, a pill, a badge) cuts to diamonds and pointed hexagons, and chips square. Knobs: `--cyber-cut`, `--cyber-shape`, `--cyber-shape-surface`, `--cyber-glow`, `--cyber-ink`, and the consumer-supplied `--font-cyber`. The bevel is drawn with `corner-shape`, which only Chromium supports today; Firefox and Safari get square cut corners and round round ones. See [Aesthetics → Cyber](docs/usage/aesthetics.md#cyber).
1855
+ - **A solo class for every aesthetic**: `.glass-solo`, `.neobrutalism-solo`, `.pixel-solo`, `.chunky-tile-solo`, and `.cyber-solo` paint the aesthetic's look onto the one element carrying the class, for an element this package does not style -- a toast from another library, or a `<div>` on a page without the base stylesheet. Each ships in its aesthetic's existing entrypoint and needs nothing else loaded. See [Aesthetics → Solo classes](docs/usage/aesthetics.md#solo-classes).
1856
+ - **Three material tokens**: `--ui-corner-shape` (what a corner draws: `round`, or a `bevel` cut), `--ui-radius-pill` (the corner of what is fully round by default), and `--ui-radius-tight` (the corner of chips, before their `--radius-small` cap). All three default to today's look, so nothing changes unless an aesthetic or your own CSS sets them. See [Customizing → Material tokens](docs/usage/customizing.md#material-tokens).
1857
+
1759
1858
  <!-- Source: docs/changelog/0.3.0.md -->
1760
1859
 
1761
1860
  # 0.3.0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@codenhub/styles",
3
- "version": "0.3.0",
3
+ "version": "0.4.0",
4
4
  "private": false,
5
5
  "description": "CSS-only Codenhub design tokens, base styles, and composable UI helper classes.",
6
6
  "homepage": "https://github.com/codenhub/codenhub/tree/main/packages/styles",
@@ -68,6 +68,11 @@
68
68
  "import": "./dist/aesthetics/chunky-tile.css",
69
69
  "default": "./dist/aesthetics/chunky-tile.css"
70
70
  },
71
+ "./aesthetics/cyber": {
72
+ "style": "./dist/aesthetics/cyber.css",
73
+ "import": "./dist/aesthetics/cyber.css",
74
+ "default": "./dist/aesthetics/cyber.css"
75
+ },
71
76
  "./tw": {
72
77
  "style": "./dist/tw/index.css",
73
78
  "import": "./dist/tw/index.css",
@@ -158,6 +163,11 @@
158
163
  "import": "./dist/tw/aesthetics/chunky-tile.css",
159
164
  "default": "./dist/tw/aesthetics/chunky-tile.css"
160
165
  },
166
+ "./tw/aesthetics/cyber": {
167
+ "style": "./dist/tw/aesthetics/cyber.css",
168
+ "import": "./dist/tw/aesthetics/cyber.css",
169
+ "default": "./dist/tw/aesthetics/cyber.css"
170
+ },
161
171
  "./native": {
162
172
  "style": "./dist/native.css",
163
173
  "import": "./dist/native.css",
@@ -176,7 +186,7 @@
176
186
  "generate": "node scripts/generate-palette.mjs",
177
187
  "build": "pnpm clean && pnpm build:styles && pnpm build:aesthetics && pnpm build:tw",
178
188
  "build:styles": "tailwindcss -i ./src/index.css -o ./dist/index.css --minify && tailwindcss -i ./src/theme.css -o ./dist/theme.css --minify && tailwindcss -i ./src/palette.css -o ./dist/palette.css --minify && tailwindcss -i ./src/components/index.css -o ./dist/components.css --minify && tailwindcss -i ./src/native.css -o ./dist/native.css --minify",
179
- "build:aesthetics": "tailwindcss -i ./src/aesthetics/index.css -o ./dist/aesthetics/index.css --minify && tailwindcss -i ./src/aesthetics/neobrutalism.css -o ./dist/aesthetics/neobrutalism.css --minify && tailwindcss -i ./src/aesthetics/glass.css -o ./dist/aesthetics/glass.css --minify && tailwindcss -i ./src/aesthetics/pixel.css -o ./dist/aesthetics/pixel.css --minify && tailwindcss -i ./src/aesthetics/chunky-tile.css -o ./dist/aesthetics/chunky-tile.css --minify",
189
+ "build:aesthetics": "tailwindcss -i ./src/aesthetics/index.css -o ./dist/aesthetics/index.css --minify && tailwindcss -i ./src/aesthetics/neobrutalism.css -o ./dist/aesthetics/neobrutalism.css --minify && tailwindcss -i ./src/aesthetics/glass.css -o ./dist/aesthetics/glass.css --minify && tailwindcss -i ./src/aesthetics/pixel.css -o ./dist/aesthetics/pixel.css --minify && tailwindcss -i ./src/aesthetics/chunky-tile.css -o ./dist/aesthetics/chunky-tile.css --minify && tailwindcss -i ./src/aesthetics/cyber.css -o ./dist/aesthetics/cyber.css --minify",
180
190
  "build:tw": "node scripts/build-tw.mjs",
181
191
  "prepublishOnly": "pnpm build && pnpm typecheck && pnpm test",
182
192
  "status:npm": "npm view @codenhub/styles version dist-tags time --json && npm dist-tag ls @codenhub/styles && npm access get status @codenhub/styles",