@leftium/nimble.css 0.12.0 → 0.13.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 (16) hide show
  1. package/README.md +9 -8
  2. package/dist/nimble-base.css +1 -12
  3. package/dist/nimble-base.min.css +1 -1
  4. package/dist/nimble-core.css +695 -690
  5. package/dist/nimble-core.min.css +1 -1
  6. package/dist/nimble.css +779 -774
  7. package/dist/nimble.min.css +1 -1
  8. package/no-nimble.js +111 -0
  9. package/package.json +4 -2
  10. package/src/_config.scss +1 -1
  11. package/src/_document.scss +8 -8
  12. package/src/_grid-columns.scss +23 -23
  13. package/src/_layout-utilities.scss +38 -12
  14. package/src/_typography.scss +1 -16
  15. package/src/nimble-core.scss +8 -0
  16. package/src/nimble.scss +8 -0
package/README.md CHANGED
@@ -92,14 +92,15 @@ That's it. Write semantic HTML and it just works.
92
92
 
93
93
  ## Utility Classes
94
94
 
95
- Content is centered at `720px` by default — no class needed. These opt-in utilities handle the rest. Disable all with `$enable-utilities: false`.
95
+ Content is centered at `60ch` by default — no class needed. These opt-in utilities handle the rest. Disable all with `$enable-utilities: false`.
96
96
 
97
97
  | Class | Description |
98
98
  |---|---|
99
99
  | `.fluid` | Full viewport width with padding (opt out of centering) |
100
100
  | `.container` | Re-center content inside a `.fluid` layout |
101
- | `.full-bleed` | Break out of centered layout to full width |
102
- | `.wide` | Break out to wide max-width (1200px) |
101
+ | `.bleed-full` | Break out of centered layout to full viewport width |
102
+ | `.bleed-wide` | Break out to wide max-width (1200px) |
103
+ | `.bleed-edge` | Break out to shadow/paper edge (tracks shadow visibility) |
103
104
  | `.striped` | Striped table rows (apply to table wrapper) |
104
105
  | `.visually-hidden` | Hidden visually, accessible to screen readers |
105
106
  | `.overflow-auto` | Scrollable container |
@@ -109,11 +110,11 @@ Content is centered at `720px` by default — no class needed. These opt-in util
109
110
  nimble.css styles can conflict with third-party components (datatables, rich text editors, etc.) that expect unstyled elements. Add `.no-nimble` to opt out of nimble's component styles inside a subtree:
110
111
 
111
112
  ```html
112
- <main class="fluid full-bleed">
113
+ <main class="fluid bleed-full">
113
114
  <h1>Styled by nimble</h1>
114
115
 
115
116
  <!-- Third-party component: nimble styles don't apply inside -->
116
- <div class="no-nimble full-bleed">
117
+ <div class="no-nimble bleed-full">
117
118
  <ThirdPartyDataTable />
118
119
  </div>
119
120
  </main>
@@ -121,7 +122,7 @@ nimble.css styles can conflict with third-party components (datatables, rich tex
121
122
 
122
123
  **What's excluded:** Typography, links, buttons, forms, tables, code, media, article, details, dialog, and non-layout utilities.
123
124
 
124
- **What still applies:** Reset, colors/custom properties, body grid, layout utilities (`.fluid`, `.full-bleed`, `.wide`, `.container`), and print styles. This means layout classes work on `.no-nimble` elements.
125
+ **What still applies:** Reset, colors/custom properties, body grid, layout utilities (`.fluid`, `.bleed-full`, `.bleed-wide`, `.bleed-edge`, `.container`), and print styles. This means layout classes work on `.no-nimble` elements.
125
126
 
126
127
  This works via CSS `@scope` (Chrome 118+, Safari 17.4+, Firefox 128+). To disable scoping entirely (smaller output, no opt-out):
127
128
 
@@ -161,7 +162,7 @@ Override at runtime — no build step needed. Hover and focus states auto-derive
161
162
  /* Layout */
162
163
  --nc-spacing: 1rem;
163
164
  --nc-radius: 0.25rem;
164
- --nc-content-width: 720px;
165
+ --nc-content-width: 60ch;
165
166
  }
166
167
  ```
167
168
 
@@ -219,7 +220,7 @@ Build a CSS file with new defaults. SCSS-unique options listed first; the rest m
219
220
  // Layout
220
221
  $spacing: 1rem,
221
222
  $radius: 0.25rem,
222
- $content-width: 720px,
223
+ $content-width: 60ch,
223
224
  );
224
225
  ```
225
226
 
package/dist/nimble-base.css CHANGED
@@ -45,7 +45,7 @@
45
45
  }
46
46
  body {
47
47
  display: grid;
48
- grid-template-columns: 1fr var(--nc-content-shadow-gap) min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing) - 2 * var(--nc-content-shadow-gap))) var(--nc-content-shadow-gap) 1fr;
48
+ grid-template-columns: 1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;
49
49
  min-height: 100dvh;
50
50
  padding-block: var(--nc-spacing);
51
51
  position: relative;
@@ -104,17 +104,6 @@
104
104
  font-weight: 700;
105
105
  text-wrap: balance;
106
106
  }
107
- @media (max-width: 720px) {
108
- h1 {
109
- font-size: 1.75rem;
110
- }
111
- h2 {
112
- font-size: 1.5rem;
113
- }
114
- h3 {
115
- font-size: 1.3rem;
116
- }
117
- }
118
107
  p, ul, ol, dl, blockquote, pre, table, figure, form, fieldset {
119
108
  margin-top: 0;
120
109
  margin-bottom: var(--nc-spacing);
package/dist/nimble-base.min.css CHANGED
@@ -1 +1 @@
1
- @layer nimble.reset;@layer nimble.base{:root{color-scheme:light dark;--nc-surface-hue:250;--nc-surface-1:light-dark(oklch(.985 .002 var(--nc-surface-hue)),oklch(.17 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-2:light-dark(oklch(.955 .002 var(--nc-surface-hue)),oklch(.2 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-3:light-dark(oklch(.925 .002 var(--nc-surface-hue)),oklch(.23 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-4:light-dark(oklch(.885 .002 var(--nc-surface-hue)),oklch(.27 .005 calc(var(--nc-surface-hue) + 10)));--nc-text:light-dark(oklch(.28 .005 var(--nc-surface-hue)),oklch(.86 .005 var(--nc-surface-hue)));--nc-border:light-dark(oklch(.83 .005 var(--nc-surface-hue)),oklch(.28 .005 calc(var(--nc-surface-hue) + 10)));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(from var(--nc-primary) calc(l - .1) c h),oklch(from var(--nc-primary) calc(l + .1) c h));--nc-primary-focus:oklch(from var(--nc-primary) l c h / .4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(from var(--nc-secondary) calc(l - .1) c h),oklch(from var(--nc-secondary) calc(l + .1) c h));--nc-secondary-focus:oklch(from var(--nc-secondary) l c h / .3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:60ch;--nc-content-shadow-gap:1rem;--nc-content-shadow:0 0 .15rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .02),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .015)), 0 0 .3rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .03),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .02)), 0 0 .75rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .04),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .025)), 0 0 1.35rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .04),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .03)), 0 0 2.5rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .05),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .035)), 0 0 6rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .06),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .04)), 0 0 0rem .0625rem light-dark(oklch(.55 .01 var(--nc-surface-hue) / .015),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .01))}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text);background-color:var(--nc-surface-1);scrollbar-gutter:stable;font-size:100%;line-height:1.5}body{grid-template-columns:1fr var(--nc-content-shadow-gap) min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing) - 2 * var(--nc-content-shadow-gap))) var(--nc-content-shadow-gap) 1fr;min-height:100dvh;padding-block:var(--nc-spacing);display:grid;position:relative}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:2rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}@media (width<=720px){h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.3rem}}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}body>:first-child,body>:first-child>:first-child{margin-top:0}body>:nth-last-child(1 of :not(script,style,dialog)),body>:nth-last-child(1 of :not(script,style,dialog))>:last-child{margin-bottom:0}ul,ol{padding-inline-start:1.5em}:where(li){margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:var(--nc-spacing) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}}
1
+ @layer nimble.reset;@layer nimble.base{:root{color-scheme:light dark;--nc-surface-hue:250;--nc-surface-1:light-dark(oklch(.985 .002 var(--nc-surface-hue)),oklch(.17 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-2:light-dark(oklch(.955 .002 var(--nc-surface-hue)),oklch(.2 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-3:light-dark(oklch(.925 .002 var(--nc-surface-hue)),oklch(.23 .005 calc(var(--nc-surface-hue) + 10)));--nc-surface-4:light-dark(oklch(.885 .002 var(--nc-surface-hue)),oklch(.27 .005 calc(var(--nc-surface-hue) + 10)));--nc-text:light-dark(oklch(.28 .005 var(--nc-surface-hue)),oklch(.86 .005 var(--nc-surface-hue)));--nc-border:light-dark(oklch(.83 .005 var(--nc-surface-hue)),oklch(.28 .005 calc(var(--nc-surface-hue) + 10)));--nc-primary:light-dark(oklch(50% .2 250),oklch(60% .2 250));--nc-primary-hover:light-dark(oklch(from var(--nc-primary) calc(l - .1) c h),oklch(from var(--nc-primary) calc(l + .1) c h));--nc-primary-focus:oklch(from var(--nc-primary) l c h / .4);--nc-primary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-secondary:light-dark(oklch(45% .05 250),oklch(60% .05 250));--nc-secondary-hover:light-dark(oklch(from var(--nc-secondary) calc(l - .1) c h),oklch(from var(--nc-secondary) calc(l + .1) c h));--nc-secondary-focus:oklch(from var(--nc-secondary) l c h / .3);--nc-secondary-contrast:light-dark(#fff,oklch(15% .005 250));--nc-valid:light-dark(oklch(52% .17 145),oklch(65% .2 145));--nc-invalid:light-dark(oklch(55% .22 25),oklch(65% .22 25));--nc-font-sans:system-ui, sans-serif;--nc-font-mono:ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;--nc-spacing:1rem;--nc-radius:.25rem;--nc-content-width:60ch;--nc-content-shadow-gap:1rem;--nc-content-shadow:0 0 .15rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .02),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .015)), 0 0 .3rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .03),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .02)), 0 0 .75rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .04),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .025)), 0 0 1.35rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .04),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .03)), 0 0 2.5rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .05),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .035)), 0 0 6rem 0 light-dark(oklch(.55 .01 var(--nc-surface-hue) / .06),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .04)), 0 0 0rem .0625rem light-dark(oklch(.55 .01 var(--nc-surface-hue) / .015),oklch(.85 .01 calc(var(--nc-surface-hue) + 10) / .01))}[data-theme=dark]{color-scheme:dark}[data-theme=light]{color-scheme:light}html{font-family:var(--nc-font-sans);color:var(--nc-text);background-color:var(--nc-surface-1);scrollbar-gutter:stable;font-size:100%;line-height:1.5}body{grid-template-columns:1fr min(var(--nc-content-width), calc(100% - 2 * var(--nc-spacing))) 1fr;min-height:100dvh;padding-block:var(--nc-spacing);display:grid;position:relative}::selection{background-color:var(--nc-primary-focus);color:var(--nc-text)}h1{margin-top:0;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:2rem;font-weight:700;line-height:1.1}h2{margin-top:2rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.75rem;font-weight:700;line-height:1.15}h3{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.5rem;font-weight:700;line-height:1.2}h4{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.25rem;font-weight:700;line-height:1.3}h5{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1.125rem;font-weight:700;line-height:1.4}h6{margin-top:1.5rem;margin-bottom:var(--nc-spacing);text-wrap:balance;font-size:1rem;font-weight:700;line-height:1.5}p,ul,ol,dl,blockquote,pre,table,figure,form,fieldset{margin-top:0;margin-bottom:var(--nc-spacing)}body>:first-child,body>:first-child>:first-child{margin-top:0}body>:nth-last-child(1 of :not(script,style,dialog)),body>:nth-last-child(1 of :not(script,style,dialog))>:last-child{margin-bottom:0}ul,ol{padding-inline-start:1.5em}:where(li){margin-bottom:.25em}:where(li)>:where(ul,ol){margin-bottom:0}dt{font-weight:600}dd{margin-inline-start:1.5em;margin-bottom:.5em}blockquote{margin-block:var(--nc-spacing);padding:.25em var(--nc-spacing);border-inline-start:.25rem solid var(--nc-border);margin-inline:0;font-style:italic}:where(blockquote) footer,:where(blockquote) cite{color:color-mix(in oklch, var(--nc-text), transparent 40%);font-size:.9em;font-style:normal}hr{background-color:color-mix(in oklch, var(--nc-border), transparent 40%);height:1px;margin:var(--nc-spacing) 0;border:none}mark{color:light-dark(inherit,oklch(95% .01 85));background-color:light-dark(#fde68a,oklch(55% .12 85));border-radius:2px;padding:.1em .25em}address{font-style:normal}}