@codenhub/styles 0.1.0 → 0.1.1

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 (45) hide show
  1. package/README.md +7 -69
  2. package/dist/aesthetics/chunky-tile.css +1 -1
  3. package/dist/aesthetics/index.css +1 -1
  4. package/dist/components.css +1 -1
  5. package/dist/index.css +1 -1
  6. package/dist/native.css +1 -1
  7. package/dist/theme.css +1 -1
  8. package/dist/tw/aesthetics/chunky-tile.css +4 -2
  9. package/dist/tw/box.css +21 -0
  10. package/dist/tw/components/button.css +23 -3
  11. package/dist/tw/components/form.css +0 -2
  12. package/dist/tw/components/index.css +16 -6
  13. package/dist/tw/components/surface.css +29 -5
  14. package/dist/tw/elevation.css +14 -7
  15. package/dist/tw/index.css +20 -5
  16. package/dist/tw/intent.css +20 -0
  17. package/dist/tw/native.css +4 -20
  18. package/dist/tw/reset.css +20 -33
  19. package/dist/tw/theme.css +12 -7
  20. package/dist/tw/utilities/content.css +14 -2
  21. package/docs/accessibility.md +58 -48
  22. package/docs/changelog/0.1.0.md +37 -0
  23. package/docs/changelog/0.1.1.md +10 -0
  24. package/docs/changelog/index.md +10 -0
  25. package/docs/concepts.md +20 -46
  26. package/docs/index.md +18 -45
  27. package/docs/integrating/astro.md +13 -7
  28. package/docs/integrating/index.md +25 -16
  29. package/docs/integrating/nextjs.md +31 -8
  30. package/docs/integrating/svelte.md +14 -8
  31. package/docs/integrating/tailwind.md +31 -15
  32. package/docs/integrating/vue.md +13 -7
  33. package/docs/setup.md +35 -55
  34. package/docs/usage/aesthetics.md +30 -107
  35. package/docs/usage/buttons.md +19 -35
  36. package/docs/usage/composing.md +25 -100
  37. package/docs/usage/content-and-layout.md +56 -81
  38. package/docs/usage/customizing.md +25 -90
  39. package/docs/usage/feedback.md +11 -49
  40. package/docs/usage/forms.md +16 -58
  41. package/docs/usage/index.md +9 -17
  42. package/docs/usage/theming.md +25 -81
  43. package/docs/usage/tooltips.md +15 -21
  44. package/llms-full.txt +1060 -1506
  45. package/package.json +121 -44
package/README.md CHANGED
@@ -10,8 +10,7 @@ pnpm add @codenhub/styles
10
10
 
11
11
  ## Usage
12
12
 
13
- Import the compiled stylesheet for the complete token, reset, utility, and
14
- component-class surface:
13
+ Import the compiled stylesheet for the complete token, reset, utility, and component-class surface:
15
14
 
16
15
  ```css
17
16
  @import "@codenhub/styles";
@@ -25,71 +24,15 @@ component-class surface:
25
24
  </main>
26
25
  ```
27
26
 
28
- Apps using Tailwind CSS v4 can instead process the source entrypoint:
29
-
30
- ```css
31
- @import "tailwindcss";
32
- @import "@codenhub/styles/tw";
33
-
34
- @source "./src";
35
- ```
36
-
37
- The root follows the system color-scheme preference. Apply `.light` or `.dark`
38
- to force a theme for the root or a subtree.
39
-
40
- ```html
41
- <html class="dark">
42
- <body>
43
- <button class="btn primary">Dark themed button</button>
44
- </body>
45
- </html>
46
- ```
47
-
48
- The aliases `.theme-light`, `.theme-dark`, and `data-theme="light|dark"` are
49
- also supported. See [Concepts](./docs/concepts.md#theme-selection) for
50
- precedence details.
51
-
52
- `.solid`, `.soft`, and `.ghost` set how much intent fills a component; `.edged`
53
- and `.edgeless` set whether it draws a boundary. Both axes cascade, so a
54
- container sets the look below it and any element can still override it.
55
- `.solid` also takes the boundary away, because a filled box ringed in another
56
- color is what the blend behind `.edged` exists to prevent; `.solid.edged` is the
57
- way back to a line.
58
-
59
- ```html
60
- <div class="soft">
61
- <button class="btn primary">Soft</button>
62
- <span class="badge success">Soft</span>
63
- <button class="btn primary ghost edged">Outlined</button>
64
- </div>
65
- ```
66
-
67
- Aesthetics decide what a component is made of. They are opt-in, so import the
68
- stylesheet after the base one to make `.neobrutalism`, `.glass`, `.pixel`, and
69
- `.chunky-tile` available. They cascade to any subtree the same way, and each is
70
- also importable on its own from `@codenhub/styles/aesthetics/<name>`.
71
-
72
- ```css
73
- @import "@codenhub/styles";
74
- @import "@codenhub/styles/aesthetics";
75
- ```
76
-
77
- ```html
78
- <section class="neobrutalism">
79
- <button class="btn primary">Thick ink and a hard shadow</button>
80
- </section>
81
- ```
27
+ For the Tailwind CSS v4 entrypoint, theme selection, the intent/presentation axes, and opt-in aesthetics, see [Setup](./docs/setup.md), [Concepts](./docs/concepts.md), and [Usage](./docs/usage/index.md).
82
28
 
83
29
  ## Documentation
84
30
 
85
- - [Documentation overview](./docs/index.md): What the package is, what it
86
- does and does not do, and where to go next.
31
+ - [Documentation overview](./docs/index.md): What the package is, what it does and does not do, and where to go next.
87
32
  - [Setup](./docs/setup.md): Installation, entrypoints, and configuration.
88
33
  - [Concepts](./docs/concepts.md): The three-axis model and the token system.
89
- - [Usage](./docs/usage/index.md): Composing, theming, customizing,
90
- aesthetics, and each component family.
91
- - [Integrating](./docs/integrating/index.md): Wiring the stylesheet into
92
- Next.js, Vue, Svelte, Astro, or a Tailwind CSS v4 build.
34
+ - [Usage](./docs/usage/index.md): Composing, theming, customizing, aesthetics, and each component family.
35
+ - [Integrating](./docs/integrating/index.md): Wiring the stylesheet into Next.js, Vue, Svelte, Astro, or a Tailwind CSS v4 build.
93
36
  - [Accessibility](./docs/accessibility.md): CSS accessibility hooks and non-goals.
94
37
 
95
38
  ## Requirements
@@ -103,13 +46,8 @@ also importable on its own from `@codenhub/styles/aesthetics/<name>`.
103
46
 
104
47
  ## Notes
105
48
 
106
- This package has no JavaScript behavior. `--layout-gap` replaces the removed
107
- `--layout-stack-gap` and `--layout-cluster-gap` tokens; no compatibility aliases
108
- are provided.
49
+ This package has no JavaScript behavior. `--layout-gap` replaces the removed `--layout-stack-gap` and `--layout-cluster-gap` tokens, and `--color-text-subtle` is removed because nothing read it; no compatibility aliases are provided.
109
50
 
110
51
  ## License
111
52
 
112
- Licensed under Apache-2.0. Embedded SVG icons derived from
113
- [Lucide](https://lucide.dev) are ISC-licensed, and loaders derived from
114
- [svg-spinners](https://github.com/n3r4zzurr0/svg-spinners) are MIT-licensed.
115
- See [NOTICE](NOTICE) for the required notices.
53
+ Licensed under Apache-2.0. Embedded SVG icons derived from [Lucide](https://lucide.dev) are ISC-licensed, and loaders derived from [svg-spinners](https://github.com/n3r4zzurr0/svg-spinners) are MIT-licensed. See [NOTICE](NOTICE) for the required notices.
package/dist/aesthetics/chunky-tile.css CHANGED
@@ -1 +1 @@
1
- .chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-sans,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}
1
+ .chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}
package/dist/aesthetics/index.css CHANGED
@@ -1,2 +1,2 @@
1
1
  /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
2
- .neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.neobrutalism .alert{--_d-elevation:1}.glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-surface-ground:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.glass{--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent)}}.glass{--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-sans,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}
2
+ .neobrutalism{--_neo-offset:var(--neo-offset,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:100px;--ui-shadow-ink:100%;--ui-shadow-x:var(--_neo-offset);--ui-shadow-y:var(--_neo-offset);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translate(var(--_neo-offset), var(--_neo-offset));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none}.neobrutalism .alert{--_d-elevation:1}.glass{--ui-radius:var(--glass-radius,.75rem);--ui-radius-surface:var(--glass-radius-surface,1rem);--ui-border-width:1px;--ui-border-max:100px;--ui-ink:light-dark(#ffffffa6,#ffffff38);--ui-bg-alpha:.8;--ui-backdrop:blur(14px) saturate(1.6);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-surface-ground:var(--color-background)}@supports (color:color-mix(in lab, red, red)){.glass{--ui-surface-ground:color-mix(in srgb, var(--color-background) 45%, transparent)}}.glass{--ui-surface-shadow:0 1px 2px -1px var(--elevation-color), 0 18px 40px -16px var(--elevation-color);--ui-clip:none;--ui-clip-tight:none;--ui-shadow-edge:initial;--ui-hover-transform:none;--ui-active-transform:none}@media (prefers-reduced-transparency:reduce){.glass{--ui-bg-alpha:1;--ui-backdrop:none;--ui-surface-ground:var(--color-background)}}.pixel{--_pixel-unit:var(--pixel-unit,4px);--ui-ink:light-dark(var(--color-neutral-950),var(--color-neutral-50));--ui-radius:0;--ui-radius-surface:0;--ui-border-width:2px;--ui-border-max:0px;--ui-shadow-inset:inset;--ui-shadow-edge: ;--ui-shadow-spread:var(--_pixel-unit);--ui-shadow-x:0px;--ui-shadow-y:0px;--ui-shadow-blur:0px;--ui-focus-inset:calc(var(--_pixel-unit) + var(--focus-ring-width));--ui-clip:polygon(0 var(--_pixel-unit), var(--_pixel-unit) var(--_pixel-unit), var(--_pixel-unit) 0, calc(100% - var(--_pixel-unit)) 0, calc(100% - var(--_pixel-unit)) var(--_pixel-unit), 100% var(--_pixel-unit), 100% calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) calc(100% - var(--_pixel-unit)), calc(100% - var(--_pixel-unit)) 100%, var(--_pixel-unit) 100%, var(--_pixel-unit) calc(100% - var(--_pixel-unit)), 0 calc(100% - var(--_pixel-unit)));--ui-clip-tight:none;--ui-hover-transform:none;--ui-active-transform:none;--ui-backdrop:none;font-family:var(--font-pixel,ui-monospace, SFMono-Regular, Menlo, Consolas, monospace)}.chunky-tile{--_tile-lift:var(--tile-lift,4px);--_tile-radius:var(--tile-radius,.75rem);--ui-ink:light-dark(var(--color-neutral-400),var(--color-neutral-600));--ui-radius:var(--_tile-radius);--ui-radius-surface:var(--_tile-radius);--ui-border-width:2px;--ui-border-max:100px;--elevation-color:#000;--ui-shadow-ink:72%;--ui-shadow-x:0px;--ui-shadow-y:var(--_tile-lift);--ui-shadow-blur:0px;--ui-shadow-spread:0px;--ui-active-shadow-x:0px;--ui-active-shadow-y:0px;--ui-active-transform:translateY(var(--_tile-lift));--ui-clip:none;--ui-clip-tight:none;--ui-shadow-inset: ;--ui-shadow-edge:initial;--ui-backdrop:none;--ui-bg-alpha:1;font-family:var(--font-rounded,var(--font-default,ui-sans-serif, system-ui, sans-serif))}.chunky-tile :is(.btn,button){letter-spacing:.04em;font-weight:800}