@nightshadeui/stylesheets 2.6.1 → 2.8.0

package/AGENTS.md

@@ -0,0 +1,57 @@
+# AGENTS Guide: @nightshadeui/stylesheets
+
+## Purpose
+
+`@nightshadeui/stylesheets` defines Nightshade’s CSS foundation: variables, semantic mappings, base element styles, utility classes, and optional modules.
+
+## Shared Repository Guidelines (Required)
+
+All edits in this package must follow the shared repository guidelines in `docs/GUIDELINES.md`.
+
+## Existing Architecture
+
+- Entry: `index.css` imports all core variable and utility files.
+- Layering: imports use `layer(nightshade)` and should stay consistent.
+- Modules: more opinionated extras not included in core, those are exported separately and must be imported explicitly by the users.
+- Package exports:
+  - `.` -> `index.css`
+  - `./dynamic-palette`
+  - `./kbd`
+  - `./transitions`
+
+## Variable System Conventions
+
+- Variables are layered and delegated, not flat.
+- Main naming families:
+  - `--color-<token>-<scale>` for color ramps (`base`, `primary`, etc.; scales like `0..950`).
+  - `--ui-<token>-*` for semantic UI assignments (`surface`, `border`, `focus`, etc.).
+  - `--input-*` for sizing/radius/input rhythm.
+  - `--sp*` for spacing scale.
+- UI classes map semantic token sets into generic active vars:
+  - `.ui-base`, `.ui-primary`, etc. provide `--ui-*` values.
+- Size classes map input metrics:
+  - `.input-size-xs|s|m|l|xl`.
+
+## Utility/Module Conventions
+
+- `commons.css`: global reset/base semantics.
+- `util.css`: small, single-purpose utility classes.
+- `modules/*`: opt-in extras with dedicated entrypoints and index files.
+
+## Dynamic Palette Conventions
+
+- Dynamic palette uses OKLCH for generating color ramps using a few input variables.
+- Those are generated at runtime, thus Browser must support OKLCH. Because of this it's not included by default.
+- A recommended approach for most users is to use a static palette generator.
+
+## Editing Rules
+
+- Use existing variable naming schema.
+- Use existing token vocabulary.
+- Preserve existing naming and token vocabulary; avoid parallel alias systems.
+- If adding a new module, export it in `package.json` and include an `index.css` entry for that module.
+- Keep classes composable and low-specificity.
+
+## Useful Commands
+
+- Build is consumed via workspace build: `npm run build`

package/index.css

@@ -4,6 +4,7 @@
 @import './variables/font.css' layer(nightshade);
 @import './variables/ui.css' layer(nightshade);
 @import './variables/colors.css' layer(nightshade);
+@import './variables/input-sizes.css' layer(nightshade);
 
 @import './commons.css' layer(nightshade);
 @import './util.css' layer(nightshade);

package/modules/kbd/kbd.css

@@ -11,7 +11,7 @@ kbd {
     min-width: 1.5em;
     padding: 0 .25em;
     margin: 0 2px;
-    border-radius: var(--border-radius-xs);
+    border-radius: 4px;
 
     border: 1px solid var(--color-base-200);
     border-bottom-color: var(--color-base-400);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nightshadeui/stylesheets",
-    "version": "2.6.1",
+    "version": "2.8.0",
     "description": "Nightshade UI CSS",
     "author": "Boris Okunskiy",
     "license": "ISC",

package/variables/base.css

@@ -1,42 +1,23 @@
 :root {
 
+    /* Main colors */
+
     --base-color: var(--ui-base-surface-color);
     --text-color: var(--ui-base-text-color);
     --text-color-subtle: var(--color-base-600);
     --text-color-sublime: var(--color-base-500);
-
-    /* Border radius */
-
-    --border-radius: var(--border-radius-s);
-
-    --border-radius-none: 0;
-    --border-radius-xxs: 1px;
-    --border-radius-xs: 2px;
-    --border-radius-s: 4px;
-    --border-radius-m: 8px;
-    --border-radius-l: 16px;
-    --border-radius-xl: 32px;
-    --border-radius-xxl: 64px;
-
+    --overlay-surface: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.2));
+    
     /* Shadows */
-
+    
     --shadow-color-light: light-dark(rgba(0,0,0,.1), rgba(0,0,0,.2));
     --shadow-color-medium: light-dark(rgba(0,0,0,.2), rgba(0,0,0,.4));
     --shadow-color-heavy: light-dark(rgba(0,0,0,.3), rgba(0,0,0,.6));
-
+    
     /* Inputs */
-
-    --input-size: var(--input-size-m);
-    --input-size-xs: var(--sp2);
-    --input-size-s: var(--sp3);
-    --input-size-m: var(--sp4);
-    --input-size-l: var(--sp5);
-    --input-size-xl: var(--sp6);
-
-    --input-radius: var(--border-radius-s);
-    --input-radius-round: var(--border-radius-l);
-    --input-radius-full: var(--border-radius-xl);
-
+    
+    --border-radius: 4px;
+    --input-radius: var(--border-radius);
     --input-border-size: 1px;
     --input-outline-size: 2px;
     --input-outline-offset: 0;

package/variables/font.css

@@ -4,14 +4,14 @@
     --font-monospace: monospace;
 
     --font-size: var(--font-size-m);
-    --font-size-xxs: 10px;
-    --font-size-xs: 12px;
-    --font-size-s: 14px;
+    --font-size-xxs: calc(var(--font-size-m) - 6px);
+    --font-size-xs: calc(var(--font-size-m) - 4px);
+    --font-size-s: calc(var(--font-size-m) - 2px);
     --font-size-m: 16px;
-    --font-size-l: 18px;
-    --font-size-xl: 24px;
-    --font-size-xxl: 48px;
-    --font-size-xxxl: 64px;
+    --font-size-l: calc(var(--font-size-m) * 1.25);
+    --font-size-xl: calc(var(--font-size-m) * 1.5);
+    --font-size-xxl: calc(var(--font-size-m) * 1.875);
+    --font-size-xxxl: calc(var(--font-size-m) * 2.25);
 
     --font-weight: var(--font-weight-normal);
     --font-weight-thin: 200;

package/variables/input-sizes.css

@@ -0,0 +1,95 @@
+:root {
+
+    /* Default size */
+
+    --input-height: var(--input-size-m-height);
+    --input-font-size: var(--font-size-m);
+    --input-padding-md: var(--sp1-5);
+    --input-padding-sm: var(--sp1);
+    --input-gap: var(--sp1);
+
+    --input-radius-round: var(--border-radius-l);
+
+    /* Sizes */
+
+    --input-size-xs-height: var(--sp2-5);
+    --input-size-xs-font-size: var(--font-size-xs);
+    --input-size-xs-padding-md: var(--sp1);
+    --input-size-xs-padding-sm: var(--sp0-25);
+    --input-size-xs-gap: var(--sp0-25);
+    --input-size-xs-radius-round: var(--sp1-5);
+
+    --input-size-s-height: var(--sp3);
+    --input-size-s-font-size: var(--font-size-s);
+    --input-size-s-padding-md: var(--sp1);
+    --input-size-s-padding-sm: var(--sp0-5);
+    --input-size-s-gap: var(--sp0-5);
+    --input-size-s-radius-round: var(--sp1-5);
+
+    --input-size-m-height: var(--sp4);
+    --input-size-m-font-size: var(--font-size-m);
+    --input-size-m-padding-md: var(--sp1-5);
+    --input-size-m-padding-sm: var(--sp1);
+    --input-size-m-gap: var(--sp1);
+    --input-size-m-radius-round: var(--sp2);
+
+    --input-size-l-height: var(--sp5);
+    --input-size-l-font-size: var(--font-size-m);
+    --input-size-l-padding-md: var(--sp2);
+    --input-size-l-padding-sm: var(--sp1);
+    --input-size-l-gap: var(--sp1);
+    --input-size-l-radius-round: var(--sp2-5);
+
+    --input-size-xl-height: var(--sp6);
+    --input-size-xl-font-size: var(--font-size-l);
+    --input-size-xl-padding-md: var(--sp2-5);
+    --input-size-xl-padding-sm: var(--sp1-5);
+    --input-size-xl-gap: var(--sp1-5);
+    --input-size-xl-radius-round: var(--sp3);
+
+}
+
+.input-size-xs {
+    --input-height: var(--input-size-xs-height);
+    --input-font-size: var(--input-size-xs-font-size);
+    --input-padding-md: var(--input-size-xs-padding-md);
+    --input-padding-sm: var(--input-size-xs-padding-sm);
+    --input-gap: var(--input-size-xs-gap);
+    --input-radius-round: var(--input-size-xs-radius-round);
+}
+
+.input-size-s, .input-size-small {
+    --input-height: var(--input-size-s-height);
+    --input-font-size: var(--input-size-s-font-size);
+    --input-padding-md: var(--input-size-s-padding-md);
+    --input-padding-sm: var(--input-size-s-padding-sm);
+    --input-gap: var(--input-size-s-gap);
+    --input-radius-round: var(--input-size-s-radius-round);
+}
+
+.input-size-m, .input-size-medium, .input-size-normal {
+    --input-height: var(--input-size-m-height);
+    --input-font-size: var(--input-size-m-font-size);
+    --input-padding-md: var(--input-size-m-padding-md);
+    --input-padding-sm: var(--input-size-m-padding-sm);
+    --input-gap: var(--input-size-m-gap);
+    --input-radius-round: var(--input-size-m-radius-round);
+}
+
+.input-size-l, .input-size-large {
+    --input-height: var(--input-size-l-height); 
+    --input-font-size: var(--input-size-l-font-size);
+    --input-padding-md: var(--input-size-l-padding-md);
+    --input-padding-sm: var(--input-size-l-padding-sm);
+    --input-gap: var(--input-size-l-gap);
+    --input-radius-round: var(--input-size-l-radius-round);
+}
+
+.input-size-xl {
+    --input-height: var(--input-size-xl-height);
+    --input-font-size: var(--input-size-xl-font-size);
+    --input-padding-md: var(--input-size-xl-padding-md);
+    --input-padding-sm: var(--input-size-xl-padding-sm);
+    --input-gap: var(--input-size-xl-gap);
+    --input-radius-round: var(--input-size-xl-radius-round);
+}

package/variables/ui.css

@@ -5,7 +5,7 @@
     --ui-base-surface-top-color: light-dark(var(--color-base-0), var(--color-base-200));
     --ui-base-surface-bottom-color: light-dark(var(--color-base-200), var(--color-base-0));
     --ui-base-surface-text-color: var(--color-base-text);
-    --ui-base-surface-text-shadow-color: var(--color-base-200);
+    --ui-base-surface-text-shadow-color: var(--color-base-50);
     --ui-base-border-color: var(--color-base-400);
     --ui-base-shadow-color: var(--shadow-color-medium);
     --ui-base-focus-light-color: light-dark(var(--color-secondary-300), var(--color-secondary-700));