baseline-kit 2.1.0 → 3.0.0

package/README.md

@@ -41,6 +41,27 @@ import 'baseline-kit/styles';  // Required core styles
 import 'baseline-kit/theme';   // Recommended theme (or use your own)
 ```
 
+For frameworks like Remix that use URL imports in a links function:
+
+```tsx
+export const links = () => [
+  { rel: "stylesheet", href: "baseline-kit/styles" },
+  { rel: "stylesheet", href: "baseline-kit/theme" }
+];
+```
+
+If you prefer a single CSS file that includes everything:
+
+```tsx
+// Alternative: Import everything in one file
+import 'baseline-kit/full';
+
+// For Remix:
+export const links = () => [
+  { rel: "stylesheet", href: "baseline-kit/full" }
+];
+```
+
 Baseline Kit is written in TypeScript and includes built-in type definitions—no additional packages required.
 
 ## Quick Start
@@ -210,24 +231,59 @@ debugging = "none"           // Removes debug elements entirely
 
 ## Theme System
 
-Baseline Kit comes with two CSS files:
+Baseline Kit comes with a flexible CSS structure and theming system:
+
+1. `core.css` - Contains the core component styles required for functionality (imported via `baseline-kit/styles`)
+2. `theme.css` - Contains color variables and theming with automatic dark mode support (imported via `baseline-kit/theme`)
+3. `baseline-kit.css` - Combined file with both core and theme styles (imported via `baseline-kit/full`)
+
+### CSS Import Options
+
+Baseline Kit gives you flexibility in how you include the styles:
 
-1. `styles.css` - Contains the core component styles required for functionality
-2. `theme.css` - Contains color variables and theming (optional but recommended)
+```tsx
+// Option 1: Import core styles and theme separately (recommended)
+import 'baseline-kit/styles';
+import 'baseline-kit/theme';
+
+// Option 2: Import everything in one file
+import 'baseline-kit/full';
+```
 
 ### Theme Options
 
-You have three options for using the theme system:
+You now have four options for using the theme system:
 
-#### 1. Use the Built-in Theme
+#### 1. Use the Built-in Theme (with automatic dark mode)
 
 ```tsx
 import 'baseline-kit/theme';  // Default theme with light/dark mode support
 ```
 
-#### 2. Create a Custom Theme
+#### 2. Use Specific Theme Variants
+
+```tsx
+// Use only the light theme (no dark mode)
+import 'baseline-kit/theme/default';
+
+// Use only the dark theme
+import 'baseline-kit/theme/dark';
+
+// Example: Apply dark theme regardless of system preference
+import 'baseline-kit/styles';
+import 'baseline-kit/theme/dark';
+```
+
+#### 3. Create a Custom Theme
 
-Create your own theme.css file:
+You can use the tokens template as a starting point:
+
+```tsx
+// First check the token template to see available variables
+import 'baseline-kit/theme/tokens';  // Just for reference (contains no values)
+```
+
+Then create your own custom theme file:
 
 ```css
 /* yourCustomTheme.css */
@@ -253,7 +309,7 @@ import 'baseline-kit/styles';  // Required core styles
 import './path/to/yourCustomTheme.css';  // Your custom theme
 ```
 
-#### 3. Override via Config
+#### 4. Override via Config
 
 For minor adjustments, use the Config component:
 
@@ -353,4 +409,80 @@ Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines.
 
 ## License
 
-MIT © [François Denavaut](https://github.com/dnvt)
+MIT © [François Denavaut](https://github.com/dnvt)
+
+## Integration with Remix
+
+Baseline Kit is fully compatible with Remix. Follow these steps to integrate it into your Remix application:
+
+### Standard Integration
+
+In your Remix application, create a `root.tsx` file with proper links to the CSS:
+
+```tsx
+// app/root.tsx
+import type { LinksFunction } from '@remix-run/node';
+
+export const links: LinksFunction = () => [
+  // Option 1: Use the combined CSS file (simplest approach)
+  { rel: 'stylesheet', href: 'npm:baseline-kit/dist/baseline-kit.css' },
+
+  // Option 2: Or use core styles and theme separately
+  // { rel: 'stylesheet', href: 'npm:baseline-kit/dist/styles.css' },
+  // { rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme.css' },
+];
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+```
+
+Note the use of `npm:` prefix which is the recommended way to reference CSS from node_modules in Remix.
+
+### Troubleshooting CSS in Remix
+
+If you're experiencing styling issues with components not showing properly:
+
+1. **Copy to public directory**: For a completely reliable solution, copy the CSS files to your public directory:
+   ```shell
+   mkdir -p public/css
+   cp node_modules/baseline-kit/dist/*.css public/css/
+   ```
+
+   Then reference these local files:
+   ```tsx
+   export const links: LinksFunction = () => [
+     { rel: 'stylesheet', href: '/css/baseline-kit.css' }
+   ];
+   ```
+
+2. **Check CSS specificity**: Make sure your application's CSS isn't overriding Baseline Kit styles. You may need to adjust specificity or load order of your stylesheets.
+
+### Custom Theme Integration
+
+For custom theming:
+
+```tsx
+export const links: LinksFunction = () => [
+  // Core styles (required)
+  { rel: 'stylesheet', href: 'npm:baseline-kit/dist/styles.css' },
+  // Choose one of these theme options:
+  { rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme/default.css' }, // Light theme only
+  { rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme/dark.css' },    // Dark theme only
+  { rel: 'stylesheet', href: '/css/custom-theme.css' },                  // Your custom theme
+];
+```

package/dist/README.md

@@ -41,6 +41,27 @@ import 'baseline-kit/styles';  // Required core styles
 import 'baseline-kit/theme';   // Recommended theme (or use your own)
 ```
 
+For frameworks like Remix that use URL imports in a links function:
+
+```tsx
+export const links = () => [
+  { rel: "stylesheet", href: "baseline-kit/styles" },
+  { rel: "stylesheet", href: "baseline-kit/theme" }
+];
+```
+
+If you prefer a single CSS file that includes everything:
+
+```tsx
+// Alternative: Import everything in one file
+import 'baseline-kit/full';
+
+// For Remix:
+export const links = () => [
+  { rel: "stylesheet", href: "baseline-kit/full" }
+];
+```
+
 Baseline Kit is written in TypeScript and includes built-in type definitions—no additional packages required.
 
 ## Quick Start
@@ -210,24 +231,59 @@ debugging = "none"           // Removes debug elements entirely
 
 ## Theme System
 
-Baseline Kit comes with two CSS files:
+Baseline Kit comes with a flexible CSS structure and theming system:
+
+1. `core.css` - Contains the core component styles required for functionality (imported via `baseline-kit/styles`)
+2. `theme.css` - Contains color variables and theming with automatic dark mode support (imported via `baseline-kit/theme`)
+3. `baseline-kit.css` - Combined file with both core and theme styles (imported via `baseline-kit/full`)
+
+### CSS Import Options
+
+Baseline Kit gives you flexibility in how you include the styles:
 
-1. `styles.css` - Contains the core component styles required for functionality
-2. `theme.css` - Contains color variables and theming (optional but recommended)
+```tsx
+// Option 1: Import core styles and theme separately (recommended)
+import 'baseline-kit/styles';
+import 'baseline-kit/theme';
+
+// Option 2: Import everything in one file
+import 'baseline-kit/full';
+```
 
 ### Theme Options
 
-You have three options for using the theme system:
+You now have four options for using the theme system:
 
-#### 1. Use the Built-in Theme
+#### 1. Use the Built-in Theme (with automatic dark mode)
 
 ```tsx
 import 'baseline-kit/theme';  // Default theme with light/dark mode support
 ```
 
-#### 2. Create a Custom Theme
+#### 2. Use Specific Theme Variants
+
+```tsx
+// Use only the light theme (no dark mode)
+import 'baseline-kit/theme/default';
+
+// Use only the dark theme
+import 'baseline-kit/theme/dark';
+
+// Example: Apply dark theme regardless of system preference
+import 'baseline-kit/styles';
+import 'baseline-kit/theme/dark';
+```
+
+#### 3. Create a Custom Theme
 
-Create your own theme.css file:
+You can use the tokens template as a starting point:
+
+```tsx
+// First check the token template to see available variables
+import 'baseline-kit/theme/tokens';  // Just for reference (contains no values)
+```
+
+Then create your own custom theme file:
 
 ```css
 /* yourCustomTheme.css */
@@ -253,7 +309,7 @@ import 'baseline-kit/styles';  // Required core styles
 import './path/to/yourCustomTheme.css';  // Your custom theme
 ```
 
-#### 3. Override via Config
+#### 4. Override via Config
 
 For minor adjustments, use the Config component:
 
@@ -353,4 +409,80 @@ Please see [CONTRIBUTING.md](./CONTRIBUTING.md) for detailed guidelines.
 
 ## License
 
-MIT © [François Denavaut](https://github.com/dnvt)
+MIT © [François Denavaut](https://github.com/dnvt)
+
+## Integration with Remix
+
+Baseline Kit is fully compatible with Remix. Follow these steps to integrate it into your Remix application:
+
+### Standard Integration
+
+In your Remix application, create a `root.tsx` file with proper links to the CSS:
+
+```tsx
+// app/root.tsx
+import type { LinksFunction } from '@remix-run/node';
+
+export const links: LinksFunction = () => [
+  // Option 1: Use the combined CSS file (simplest approach)
+  { rel: 'stylesheet', href: 'npm:baseline-kit/dist/baseline-kit.css' },
+
+  // Option 2: Or use core styles and theme separately
+  // { rel: 'stylesheet', href: 'npm:baseline-kit/dist/styles.css' },
+  // { rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme.css' },
+];
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  );
+}
+```
+
+Note the use of `npm:` prefix which is the recommended way to reference CSS from node_modules in Remix.
+
+### Troubleshooting CSS in Remix
+
+If you're experiencing styling issues with components not showing properly:
+
+1. **Copy to public directory**: For a completely reliable solution, copy the CSS files to your public directory:
+   ```shell
+   mkdir -p public/css
+   cp node_modules/baseline-kit/dist/*.css public/css/
+   ```
+
+   Then reference these local files:
+   ```tsx
+   export const links: LinksFunction = () => [
+     { rel: 'stylesheet', href: '/css/baseline-kit.css' }
+   ];
+   ```
+
+2. **Check CSS specificity**: Make sure your application's CSS isn't overriding Baseline Kit styles. You may need to adjust specificity or load order of your stylesheets.
+
+### Custom Theme Integration
+
+For custom theming:
+
+```tsx
+export const links: LinksFunction = () => [
+  // Core styles (required)
+  { rel: 'stylesheet', href: 'npm:baseline-kit/dist/styles.css' },
+  // Choose one of these theme options:
+  { rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme/default.css' }, // Light theme only
+  { rel: 'stylesheet', href: 'npm:baseline-kit/dist/theme/dark.css' },    // Dark theme only
+  { rel: 'stylesheet', href: '/css/custom-theme.css' },                  // Your custom theme
+];
+```

package/dist/baseline-kit.css

@@ -0,0 +1,151 @@
+/* Baseline Kit - Combined CSS */
+/* This file contains both core styles and theme */
+
+/* Core Styles */
+*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}ul[role=list],ol[role=list]{list-style:none}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}img,picture{max-width:100%;display:block}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}:root{--bkb: 8px;--bkzi: 1;--bkzio: 2;--bk-transition-base: .18s ease;--bk-width-default: fit-content;--bk-height-default: fit-content;--bkwf: 100%;--bkhf: 100%;--bkxb: var(--bkb);--bkxw: var(--bk-width-default);--bkxh: var(--bk-height-default);--bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, .6));--bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, .2));--bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, .9));--bkkw: var(--bkwf);--bkkh: var(--bk-height-default);--bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, .6));--bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, .2));--bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, .9));--bkbw: 100%;--bkbh: 100%;--bkrt: 0;--bkrh: 1px;--bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, .15));--bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, .2));--bkgw: 100vw;--bkgh: 100vh;--bkgg: var(--bkb);--bkgj: center;--bkgt: auto;--bkgpb: 0;--bkgpi: 0;--bkgcl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, .15));--bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, .2));--bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, .15));--bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, .15));--bklw: var(--bk-width-default);--bklh: var(--bk-height-default);--bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, .6));--bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, .2));--bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, .9));--bklgtc: repeat(auto-fill, minmax(100px, 1fr));--bklgtr: auto;--bklg: 0;--bklcg: 0;--bklrg: 0;--bklji: stretch;--bklai: stretch;--bkljc: start;--bklac: start;--bkpw: var(--bk-width-default);--bkph: var(--bk-height-default);--bkpc: var(--bk-padder-color-theme, hsla(270, 60%, 40%, .6));--bksw: var(--bkwf);--bksh: var(--bkhf);--bkscl: var(--bk-spacer-color-line-theme, hsla(270, 60%, 40%, .6));--bkscf: var(--bk-spacer-color-flat-theme, hsla(230, 100%, 70%, .2));--bksct: var(--bk-spacer-color-text-theme, hsla(270, 60%, 40%, 1))}.guide{--bkgcl: var(--bk-guide-color-line-theme, hsla(240, 60%, 40%, .15));--bkgcp: var(--bk-guide-color-pattern-theme, hsla(230, 100%, 70%, .2));--bkgca: var(--bk-guide-color-auto-theme, hsla(200, 100%, 70%, .15));--bkgcf: var(--bk-guide-color-fixed-theme, hsla(200, 100%, 70%, .15))}.baseline{--bkbcl: var(--bk-baseline-color-line-theme, hsla(240, 60%, 40%, .15));--bkbcf: var(--bk-baseline-color-flat-theme, hsla(230, 100%, 70%, .2))}.box{--bkxcl: var(--bk-box-color-line-theme, hsla(300, 60%, 40%, .6));--bkxcf: var(--bk-box-color-flat-theme, hsla(260, 100%, 70%, .2));--bkxci: var(--bk-box-color-text-theme, hsla(300, 60%, 40%, .9))}.stack{--bkkcl: var(--bk-stack-color-line-theme, hsla(330, 60%, 40%, .6));--bkkcf: var(--bk-stack-color-flat-theme, hsla(0, 100%, 70%, .2));--bkkci: var(--bk-stack-color-text-theme, hsla(330, 60%, 40%, .9))}.layout{--bklcl: var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, .6));--bklcf: var(--bk-layout-color-flat-theme, hsla(0, 100%, 70%, .2));--bklci: var(--bk-layout-color-text-theme, hsla(330, 60%, 40%, .9))}.box{position:relative;width:var(--bkxw);height:var(--bkxh)}.v:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkxcl);pointer-events:none;z-index:var(--bkzi)}.gde{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:var(--bkgpb) var(--bkgpi)}.line{left:-.5px}.cols{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;column-gap:var(--bkgg);grid-template-rows:1fr;grid-template-columns:var(--bkgt);justify-content:var(--bkgj);width:var(--bkwf);height:var(--bkhf);overflow:hidden}.col{min-width:0;width:var(--bkwf);height:var(--bkhf)}.col[data-variant=line]{width:1px;background-color:var(--bkgcl)}.col[data-variant=pattern]{background-color:var(--bkgcp)}.col[data-variant=auto]{background-color:var(--bkgca);overflow:hidden}.col[data-variant=fixed]{background-color:var(--bkgcf)}.ssr{box-sizing:border-box;display:grid;position:relative;z-index:1;pointer-events:none;min-height:100px}.pad{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;width:var(--bkpw, auto);height:var(--bkph, auto)}.v:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkpc, var(--bk-padder-color-theme));pointer-events:none;z-index:var(--bkzi)}.spr{position:relative;box-sizing:border-box;width:var(--bksw, 100%);height:var(--bksh, auto);flex-shrink:0;display:block;margin:0;padding:0}.line:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkscl, hsla(270, 60%, 40%, .6));z-index:calc(var(--bkzi, 1))}.flat{background-color:var(--bkscf, hsla(230, 100%, 70%, .2))}.stk{display:flex;position:relative;width:var(--bkkw);height:var(--bkkh)}.stk .line:after{border:none}.v:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkkcl, hsla(330, 60%, 40%, .6));pointer-events:none;z-index:var(--bkzio, 2)}.flat{background-color:var(--bkkcf, hsla(0, 100%, 70%, .2))}.lay{display:grid;position:relative;box-sizing:border-box;width:var(--bklw, var(--bk-width-default, auto));height:var(--bklh, var(--bk-height-default, auto));grid-template-columns:var( --bklgtc, repeat(auto-fill, minmax(100px, 1fr)) );grid-template-rows:var(--bklgtr, auto);gap:var(--bklg, 0);column-gap:var(--bklcg, 0);row-gap:var(--bklrg, 0);justify-items:var(--bklji, stretch);align-items:var(--bklai, stretch);justify-content:var(--bkljc, start);align-content:var(--bklac, start)}.lay .line:after,.stk .line:after{border:none}.v:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bklcl, var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, .6)));pointer-events:none;z-index:var(--bkzio, 2)}.bas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;width:var(--bkbw);height:var(--bkbh);overflow:hidden}.row{left:0;right:0;position:absolute;top:var(--bkrt);height:var(--bkrh);background-color:var(--bkbc)}.ssr{box-sizing:border-box;display:grid;position:relative;z-index:1;pointer-events:none}.v{opacity:1;visibility:visible;transition:opacity var(--bk-transition-base),visibility 0ms linear}.h{opacity:0;visibility:hidden;transition:opacity var(--bk-transition-base),visibility 0ms linear .18s}:root{--bk-color-black-primary: 0, 0%, 10%;--bk-color-black-secondary: 0, 10%, 30%;--bk-color-white-primary: 0, 100%, 90%;--bk-color-white-secondary: 0, 0%, 90%;--bk-color-pink-primary: 300, 60%, 40%;--bk-color-pink-secondary: 260, 100%, 70%;--bk-color-purple-primary: 270, 60%, 40%;--bk-color-purple-secondary: 230, 100%, 70%;--bk-color-blue-primary: 240, 60%, 40%;--bk-color-blue-secondary: 200, 100%, 70%;--bk-color-cyan-primary: 200, 60%, 40%;--bk-color-cyan-secondary: 160, 100%, 70%;--bk-color-green-primary: 160, 60%, 40%;--bk-color-green-secondary: 110, 100%, 70%;--bk-color-yellow-primary: 30, 60%, 40%;--bk-color-yellow-secondary: 70, 100%, 70%;--bk-color-orange-primary: 10, 60%, 40%;--bk-color-orange-secondary: 30, 100%, 70%;--bk-color-red-primary: 330, 60%, 40%;--bk-color-red-secondary: 0, 100%, 70%;--bk-guide-color-line-theme: hsla(var(--bk-color-blue-primary), .15);--bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), .2);--bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), .15);--bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), .15);--bk-baseline-color-line-theme: hsla(var(--bk-color-blue-primary), .15);--bk-baseline-color-flat-theme: hsla(var(--bk-color-purple-secondary), .2);--bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), .6);--bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), .2);--bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);--bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), .6);--bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), .2);--bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), .9);--bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), .6);--bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), .2);--bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), .9);--bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), .6);--bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), .2);--bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), .9);--bk-padder-color-theme: hsla(var(--bk-color-purple-primary), .6)}@media (prefers-color-scheme: dark){:root{--bk-color-black-primary: 0, 10%, 30%;--bk-color-black-secondary: 0, 0%, 10%;--bk-color-white-primary: 0, 0%, 90%;--bk-color-white-secondary: 0, 100%, 90%;--bk-color-pink-primary: 260, 100%, 70%;--bk-color-pink-secondary: 300, 60%, 40%;--bk-color-purple-primary: 230, 100%, 70%;--bk-color-purple-secondary: 270, 60%, 40%;--bk-color-blue-primary: 200, 100%, 70%;--bk-color-blue-secondary: 240, 60%, 40%;--bk-color-cyan-primary: 160, 100%, 70%;--bk-color-cyan-secondary: 200, 60%, 40%;--bk-color-green-primary: 110, 100%, 70%;--bk-color-green-secondary: 160, 60%, 40%;--bk-color-yellow-primary: 70, 100%, 70%;--bk-color-yellow-secondary: 30, 60%, 40%;--bk-color-orange-primary: 30, 100%, 70%;--bk-color-orange-secondary: 10, 60%, 40%;--bk-color-red-primary: 0, 100%, 70%;--bk-color-red-secondary: 330, 60%, 40%;--bk-baseline-color-line-theme: hsla(var(--bk-color-white-primary), .1);--bk-baseline-color-flat-theme: hsla(var(--bk-color-white-secondary), .2);--bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), .6);--bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), .3);--bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), .9);--bk-guide-color-line-theme: hsla(var(--bk-color-white-primary), .1);--bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), .25);--bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), .2);--bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), .2);--bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), .6);--bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), .3);--bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), .9);--bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), .6);--bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), .3);--bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), .9);--bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), .7);--bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), .3);--bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1)}}.spr_zbcF6{position:relative;box-sizing:border-box;width:var(--bksw, 100%);height:var(--bksh, auto);flex-shrink:0;display:block;margin:0;padding:0}.line_qHW69:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkscl, hsla(270, 60%, 40%, .6));z-index:calc(var(--bkzi, 1))}.flat_gqixr{background-color:var(--bkscf, hsla(230, 100%, 70%, .2))}.pad_w2-sL{position:relative;display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto 1fr auto;width:var(--bkpw, auto);height:var(--bkph, auto)}.lay_Ew8za .line_ESlzk:after,.stk_7SJoE .line_ESlzk:after{border:none}.v_lhGBy:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkpc, var(--bk-padder-color-theme));pointer-events:none;z-index:var(--bkzi)}.lay_5cMu5{display:grid;position:relative;box-sizing:border-box;width:var(--bklw, var(--bk-width-default, auto));height:var(--bklh, var(--bk-height-default, auto));grid-template-columns:var( --bklgtc, repeat(auto-fill, minmax(100px, 1fr)) );grid-template-rows:var(--bklgtr, auto);gap:var(--bklg, 0);column-gap:var(--bklcg, 0);row-gap:var(--bklrg, 0);justify-items:var(--bklji, stretch);align-items:var(--bklai, stretch);justify-content:var(--bkljc, start);align-content:var(--bklac, start)}.lay_5cMu5 .line_j2f8-:after,.stk_3Spwo .line_j2f8-:after{border:none}.v_dprVE:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bklcl, var(--bk-layout-color-line-theme, hsla(330, 60%, 40%, .6)));pointer-events:none;z-index:var(--bkzio, 2)}.box_rDCRX{position:relative;width:var(--bkxw);height:var(--bkxh)}.v_0MMHD:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkxcl);pointer-events:none;z-index:var(--bkzi)}.stk_l-58l{display:flex;position:relative;width:var(--bkkw);height:var(--bkkh)}.stk_l-58l .line_THMgb:after{border:none}.v_-k3qw:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkkcl, hsla(330, 60%, 40%, .6));pointer-events:none;z-index:var(--bkzio, 2)}.flat_j15hF{background-color:var(--bkkcf, hsla(0, 100%, 70%, .2))}.gde_-Naxo{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:var(--bkgpb) var(--bkgpi)}.line_-VS-e{left:-.5px}.cols_8lD6D{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;column-gap:var(--bkgg);grid-template-rows:1fr;grid-template-columns:var(--bkgt);justify-content:var(--bkgj);width:var(--bkwf);height:var(--bkhf);overflow:hidden}.col_rlbsL{min-width:0;width:var(--bkwf);height:var(--bkhf)}.col_rlbsL[data-variant=line]{width:1px;background-color:var(--bkgcl)}.col_rlbsL[data-variant=pattern]{background-color:var(--bkgcp)}.col_rlbsL[data-variant=auto]{background-color:var(--bkgca);overflow:hidden}.col_rlbsL[data-variant=fixed]{background-color:var(--bkgcf)}.ssr_VGvpO{box-sizing:border-box;display:grid;position:relative;z-index:1;pointer-events:none;min-height:100px}.bas_e-SXr{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;width:var(--bkbw);height:var(--bkbh);overflow:hidden}.row_q-FZb{left:0;right:0;position:absolute;top:var(--bkrt);height:var(--bkrh);background-color:var(--bkbc)}.ssr_W1N5g{box-sizing:border-box;display:grid;position:relative;z-index:1;pointer-events:none}
+
+
+/* Theme */
+/**
+ * Baseline Kit Theme System
+ * 
+ * This file contains all color variables for theming.
+ * For light and dark mode themes separately, see the theme directory.
+ */
+
+:root {
+  /* ───────────────────────────────────────────────────────
+      Color Palette - Light Theme
+      - Primary: More muted/dimmed colors
+      - Secondary: Brighter, more vibrant colors
+   ─────────────────────────────────────────────────────── */
+
+  /* Neutral Colors */
+  --bk-color-black-primary: 0, 0%, 10%; /* #1A1A1A */
+  --bk-color-black-secondary: 0, 10%, 30%; /* #544545 */
+  --bk-color-white-primary: 0, 100%, 90%; /* #FFCCCC */
+  --bk-color-white-secondary: 0, 0%, 90%; /* #E6E6E6 */
+
+  /* Brand Colors */
+  --bk-color-pink-primary: 300, 60%, 40%; /* #A329A3 */
+  --bk-color-pink-secondary: 260, 100%, 70%; /* #9966FF */
+  --bk-color-purple-primary: 270, 60%, 40%; /* #6629A3 */
+  --bk-color-purple-secondary: 230, 100%, 70%; /* #6680FF */
+  --bk-color-blue-primary: 240, 60%, 40%; /* #2929A3 */
+  --bk-color-blue-secondary: 200, 100%, 70%; /* #66CCFF */
+
+  /* Supporting Colors */
+  --bk-color-cyan-primary: 200, 60%, 40%; /* #297AA3 */
+  --bk-color-cyan-secondary: 160, 100%, 70%; /* #66FFCC */
+  --bk-color-green-primary: 160, 60%, 40%; /* #29A37A */
+  --bk-color-green-secondary: 110, 100%, 70%; /* #80FF66 */
+  --bk-color-yellow-primary: 30, 60%, 40%; /* #A36629 */
+  --bk-color-yellow-secondary: 70, 100%, 70%; /* #A36629 */
+  --bk-color-orange-primary: 10, 60%, 40%; /* #A33D29 */
+  --bk-color-orange-secondary: 30, 100%, 70%; /* #FFB266 */
+  --bk-color-red-primary: 330, 60%, 40%; /* #A32966 */
+  --bk-color-red-secondary: 0, 100%, 70%; /* #FF6666 */
+
+  /* ───────────────────────────────────────────────────────
+      Component Theme Colors - Light
+      Using consistent alpha values:
+      - Line: 0.6 (borders)
+      - Flat: 0.2 (backgrounds)
+      - text: 0.9-1.0 (indicators)
+   ─────────────────────────────────────────────────────── */
+
+  /* Guide Component Theme */
+  --bk-guide-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
+  --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+  --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.15);
+  --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.15);
+
+  /* Baseline Component Theme */
+  --bk-baseline-color-line-theme: hsla(var(--bk-color-blue-primary), 0.15);
+  --bk-baseline-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+
+  /* Spacer Component Theme */
+  --bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), 0.6);
+  --bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.2);
+  --bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);
+
+  /* Box Component Theme */
+  --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
+  --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.2);
+  --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
+
+  /* Stack Component Theme */
+  --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+  --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
+  --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+  /* Layout Component Theme */
+  --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+  --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.2);
+  --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+  /* Padder Component Theme */
+  --bk-padder-color-theme: hsla(var(--bk-color-purple-primary), 0.6);
+}
+
+/* ───────────────────────────────────────────────────────
+   Dark Theme
+   - Inverts Primary/Secondary relationships
+   - Adjusts alpha values for better contrast
+─────────────────────────────────────────────────────── */
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    /* Neutral Colors - Dark */
+    --bk-color-black-primary: 0, 10%, 30%; /* #544545 */
+    --bk-color-black-secondary: 0, 0%, 10%; /* #1A1A1A */
+    --bk-color-white-primary: 0, 0%, 90%; /* #E6E6E6 */
+    --bk-color-white-secondary: 0, 100%, 90%; /* #FFCCCC */
+
+    /* Brand Colors - Dark */
+    --bk-color-pink-primary: 260, 100%, 70%; /* #9966FF */
+    --bk-color-pink-secondary: 300, 60%, 40%; /* #A329A3 */
+    --bk-color-purple-primary: 230, 100%, 70%; /* #6680FF */
+    --bk-color-purple-secondary: 270, 60%, 40%; /* #6629A3 */
+    --bk-color-blue-primary: 200, 100%, 70%; /* #66CCFF */
+    --bk-color-blue-secondary: 240, 60%, 40%; /* #2929A3 */
+
+    /* Supporting Colors - Dark */
+    --bk-color-cyan-primary: 160, 100%, 70%; /* #66FFCC */
+    --bk-color-cyan-secondary: 200, 60%, 40%; /* #297AA3 */
+    --bk-color-green-primary: 110, 100%, 70%; /* #80FF66 */
+    --bk-color-green-secondary: 160, 60%, 40%; /* #29A37A */
+    --bk-color-yellow-primary: 70, 100%, 70%; /* #A36629 */
+    --bk-color-yellow-secondary: 30, 60%, 40%; /* #A36629 */
+    --bk-color-orange-primary: 30, 100%, 70%; /* #FFB266 */
+    --bk-color-orange-secondary: 10, 60%, 40%; /* #A33D29 */
+    --bk-color-red-primary: 0, 100%, 70%; /* #FF6666 */
+    --bk-color-red-secondary: 330, 60%, 40%; /* #A32966 */
+
+    /* Component Theme Overrides - Dark */
+    --bk-baseline-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
+    --bk-baseline-color-flat-theme: hsla(var(--bk-color-white-secondary), 0.2);
+
+    --bk-box-color-line-theme: hsla(var(--bk-color-pink-primary), 0.6);
+    --bk-box-color-flat-theme: hsla(var(--bk-color-pink-secondary), 0.3);
+    --bk-box-color-text-theme: hsla(var(--bk-color-pink-primary), 0.9);
+
+    --bk-guide-color-line-theme: hsla(var(--bk-color-white-primary), 0.1);
+    --bk-guide-color-pattern-theme: hsla(var(--bk-color-purple-secondary), 0.25);
+    --bk-guide-color-auto-theme: hsla(var(--bk-color-blue-secondary), 0.2);
+    --bk-guide-color-fixed-theme: hsla(var(--bk-color-blue-secondary), 0.2);
+
+    --bk-stack-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+    --bk-stack-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
+    --bk-stack-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+
+    --bk-layout-color-line-theme: hsla(var(--bk-color-red-primary), 0.6);
+    --bk-layout-color-flat-theme: hsla(var(--bk-color-red-secondary), 0.3);
+    --bk-layout-color-text-theme: hsla(var(--bk-color-red-primary), 0.9);
+    
+    --bk-spacer-color-line-theme: hsla(var(--bk-color-purple-primary), 0.7);
+    --bk-spacer-color-flat-theme: hsla(var(--bk-color-purple-secondary), 0.3);
+    --bk-spacer-color-text-theme: hsla(var(--bk-color-purple-primary), 1);
+  }
+}
+

package/dist/components/Baseline/Baseline.d.ts

@@ -16,28 +16,6 @@ export type BaselineProps = {
     /** Flag to enable SSR-compatible mode (simplified initial render) */
     ssrMode?: boolean;
 } & ComponentsProps;
-/** Creates default baseline styles */
-export declare const createDefaultBaselineStyles: (base: number, lineColor: string, flatColor: string) => Record<string, string>;
-/** Create row styles for baseline lines */
-type RowStyleParams = {
-    /** Row index */
-    index: number;
-    /** Base unit for calculations */
-    base: number;
-    /** Baseline visual variant */
-    variant: BaselineVariant;
-    /** Selected color for the baseline */
-    chosenColor: string;
-    /** Theme line color */
-    lineColor: string;
-    /** Theme flat color */
-    flatColor: string;
-};
-/**
- * Creates styles for an individual baseline row.
- * Applies positioning and visual styling based on variant.
- */
-export declare const createBaselineRowStyle: (params: RowStyleParams) => React.CSSProperties;
 /**
  * Renders horizontal guidelines for maintaining vertical rhythm and baseline alignment.
  *
@@ -68,4 +46,3 @@ export declare const createBaselineRowStyle: (params: RowStyleParams) => React.C
  * ```
  */
 export declare const Baseline: React.NamedExoticComponent<BaselineProps>;
-export {};

package/dist/components/Box/Box.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { ComponentsProps } from '../types';
 /**
  * Determines how the Box component aligns to the baseline grid.
  *
@@ -8,29 +9,19 @@ import * as React from 'react';
  * - `clamp`: Both height and spacing values snap to base unit multiples
  */
 export type SnappingMode = 'none' | 'height' | 'clamp';
-/**
- * Creates default box styles with theme values.
- * Sets CSS variables for width, height, base unit, and colors.
- */
-export declare const createDefaultBoxStyles: (base: number, lineColor: string) => Record<string, string>;
-/** Parameters for creating box custom styles */
-type BoxCustomStylesParams = {
-    /** Width property for the box */
-    width?: React.CSSProperties['width'];
-    /** Height property for the box */
-    height?: React.CSSProperties['height'];
-    /** Base unit for measurements */
-    base: number;
-    /** Line color from theme */
-    lineColor: string;
-    /** Default styles for comparison */
-    defaultStyles: Record<string, string>;
-};
-/**
- * Creates custom styles for the box.
- * Combines all style properties and only applies changes when needed.
- */
-export declare const createBoxCustomStyles: ({ width, height, base, lineColor, defaultStyles }: BoxCustomStylesParams) => React.CSSProperties;
+export type BoxProps = {
+    /** Number of columns to span in a grid layout */
+    colSpan?: number;
+    /** Number of rows to span in a grid layout */
+    rowSpan?: number;
+    /** Shorthand for equal column and row span. Takes precedence over individual spans */
+    span?: number;
+    /** Controls baseline grid alignment behavior */
+    snapping?: SnappingMode;
+    /** Flag to enable SSR-compatible mode (simplified initial render) */
+    ssrMode?: boolean;
+    children?: React.ReactNode;
+} & ComponentsProps;
 /**
  * A foundational container component that ensures consistent spacing and baseline alignment.
  *
@@ -80,4 +71,3 @@ export declare const Box: React.NamedExoticComponent<{
     height?: React.CSSProperties["height"];
     width?: React.CSSProperties["width"];
 } & import("..").SpacingProps & React.RefAttributes<HTMLDivElement>>;
-export {};