baseline-kit 3.0.2 → 5.0.0

package/README.md

@@ -4,7 +4,7 @@
 ![npm version](https://img.shields.io/npm/v/baseline-kit)
 ![License](https://img.shields.io/github/license/dnvt/baseline-kit)
 
-Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible layout components, and theme-aware configuration—all optimized for performance and built with TypeScript. The library is based on the "Padded Grid" concept, originally explored in [this article](http://medium.com/design-bootcamp/the-padded-grid-a-designers-hack-to-achieve-baseline-fit-fc40d022bc84) on achieving perfect baseline alignment in digital layouts.
+Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, spacing primitives, and theme-aware configuration—all optimized for performance and built with TypeScript. The library is based on the "Padded Grid" concept, originally explored in [this article](http://medium.com/design-bootcamp/the-padded-grid-a-designers-hack-to-achieve-baseline-fit-fc40d022bc84) on achieving perfect baseline alignment in digital layouts.
 
 ![Demo visual](kit.png)
 
@@ -44,8 +44,7 @@ Baseline Kit is a lightweight development tool for visualizing and debugging gri
 - 📏 **Baseline Grid:** Core system for maintaining vertical rhythm and consistent spacing across your layouts
 - 🎯 **Column Grid Guide:** Customizable overlay system for visualizing column-based layouts and alignment
 - 📦 **Box Component:** Basic container with configurable spacing that snaps to the baseline grid
-- 🧩 **Layout Component:** CSS Grid-based container with automatic column calculations and baseline alignment
-- 📐 **Stack Component:** Flex-based container that maintains consistent spacing and baseline alignment
+- 🧱 **Padder & Spacer:** Spacing primitives with optional baseline snapping
 - 🎨 **Theme System:** Customizable colors and debug visuals through a centralized configuration
 
 ## Requirements
@@ -66,35 +65,44 @@ yarn add baseline-kit
 pnpm add baseline-kit
 ```
 
-After installation, import both the styles and theme in your application:
+After installation, import the smallest entry point that matches your use case.
+For a development grid overlay, use the guide-only React and CSS subpaths:
 
 ```tsx
-// Import in your main entry file (e.g., index.js, App.js)
-import 'baseline-kit/styles';  // Required core styles
-import 'baseline-kit/theme';   // Recommended theme (or use your own)
+import 'baseline-kit/styles/guide'
+import { Config, Guide } from 'baseline-kit/guide'
 ```
 
 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" }
-];
+  { rel: 'stylesheet', href: 'baseline-kit/styles/guide' },
+]
 ```
 
-If you prefer a single CSS file that includes everything:
+For the full component set, import the root package and root component styles:
 
 ```tsx
-// Alternative: Import everything in one file
-import 'baseline-kit/full';
+import 'baseline-kit/styles'
+import 'baseline-kit/theme'
+import { Config, Guide, Baseline, Box } from 'baseline-kit'
+```
+
+If you prefer a single CSS file for every component plus the theme:
+
+```tsx
+import 'baseline-kit/styles/full'
 
 // For Remix:
 export const links = () => [
-  { rel: "stylesheet", href: "baseline-kit/full" }
-];
+  { rel: 'stylesheet', href: 'baseline-kit/styles/full' },
+]
 ```
 
+The browser reset is not included by default. Import `baseline-kit/reset` or
+`baseline-kit/styles/reset` only when you want Baseline Kit to provide one.
+
 Baseline Kit is written in TypeScript and includes built-in type definitions—no additional packages required.
 
 ## Quick Start
@@ -153,12 +161,12 @@ unit:
 
 ```tsx
 <Config base={8}>     // Sets 8px as the base unit
-  <Layout
+  <Padder
     block={17}        // Will be rounded to 16px (2 * base)
     inline={22}       // Will be rounded to 24px (3 * base)
   >
     {/* Content automatically aligned to the 8px grid */}
-  </Layout>
+  </Padder>
 </Config>
 ```
 
@@ -182,8 +190,7 @@ block={{ start: 2, end: 3 }}  // Same as above
 Components automatically adjust their spacing to maintain baseline grid alignment:
 
 - **Box**: Adjusts bottom padding to ensure total height aligns with base unit
-- **Stack**: Maintains baseline alignment in flex layouts
-- **Layout**: Ensures grid cells align with baseline
+- **Padder**: Snaps padded content to baseline-aligned multiples of the base unit
 
 ### Debugging Modes
 
@@ -199,21 +206,20 @@ debugging = "none"           // Removes debug elements entirely
 
 ### Component Hierarchy
 
-#### 1. Core Components
+#### 1. Spacing primitives
 
-- **`Box`** Basic container for text alignment
-- **`Stack`** Flex-based layouts (one-dimensional)
-- **`Layout`** Grid-based layouts (two-dimensional)
+- **`Box`** Basic container that snaps its height to the baseline grid
+- **`Padder`** Padding wrapper that snaps padded content to baseline multiples
+- **`Spacer`** Fixed-size spacer with optional measurement indicator overlay
 
-#### 2. Development Tools
+#### 2. Debug overlays
 
-- **`Baseline`** Horizontal grid overlay
-- **`Guide`** Vertical grid overlay
-- **`Spacer`** Precise spacing measurement
+- **`Baseline`** Horizontal baseline-grid overlay
+- **`Guide`** Column-grid overlay (line / pattern / fixed / auto variants)
 
 #### 3. Configuration
 
-- **`Config`** Theme and settings provider
+- **`Config`** Theme and settings provider (base unit, colors, debug modes)
 
 ### Key Components
 
@@ -255,7 +261,7 @@ debugging = "none"           // Removes debug elements entirely
 ```tsx
 <Box
   block={[2, 5]}         // Vertical padding in base units
-  span={2}               // Grid column span when used in Layout
+  span={2}               // Grid column span when placed in a CSS grid parent
   snapping="height"      // "none", "height", or "clamp"
 >
   <p>Content aligned to baseline grid</p>
@@ -266,21 +272,29 @@ debugging = "none"           // Removes debug elements entirely
 
 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`)
+1. `guide.css` - Guide-only overlay styles (imported via `baseline-kit/styles/guide`)
+2. `styles.css` - Root component styles and base variables (imported via `baseline-kit/styles`)
+3. `theme.css` - Color variables and theming with automatic dark mode support (imported via `baseline-kit/theme`)
+4. `reset.css` - Optional browser reset (imported via `baseline-kit/reset` or `baseline-kit/styles/reset`)
+5. `baseline-kit.css` - Combined root component styles and theme (imported via `baseline-kit/styles/full`)
 
 ### CSS Import Options
 
 Baseline Kit gives you flexibility in how you include the styles:
 
 ```tsx
-// Option 1: Import core styles and theme separately (recommended)
-import 'baseline-kit/styles';
-import 'baseline-kit/theme';
+// Guide-only overlay styles
+import 'baseline-kit/styles/guide'
+
+// Root component styles and theme separately
+import 'baseline-kit/styles'
+import 'baseline-kit/theme'
+
+// Root component styles and theme in one file
+import 'baseline-kit/styles/full'
 
-// Option 2: Import everything in one file
-import 'baseline-kit/full';
+// Optional reset
+import 'baseline-kit/reset'
 ```
 
 ### Theme Options
@@ -290,21 +304,21 @@ You now have four options for using the theme system:
 #### 1. Use the Built-in Theme (with automatic dark mode)
 
 ```tsx
-import 'baseline-kit/theme';  // Default theme with light/dark mode support
+import 'baseline-kit/theme' // Default theme with light/dark mode support
 ```
 
 #### 2. Use Specific Theme Variants
 
 ```tsx
 // Use only the light theme (no dark mode)
-import 'baseline-kit/theme/default';
+import 'baseline-kit/theme/default'
 
 // Use only the dark theme
-import 'baseline-kit/theme/dark';
+import 'baseline-kit/theme/dark'
 
 // Example: Apply dark theme regardless of system preference
-import 'baseline-kit/styles';
-import 'baseline-kit/theme/dark';
+import 'baseline-kit/styles'
+import 'baseline-kit/theme/dark'
 ```
 
 #### 3. Create a Custom Theme
@@ -313,7 +327,7 @@ 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)
+import 'baseline-kit/theme/tokens' // Just for reference (contains no values)
 ```
 
 Then create your own custom theme file:
@@ -338,8 +352,8 @@ Then create your own custom theme file:
 Then import your custom theme:
 
 ```tsx
-import 'baseline-kit/styles';            // Required core styles
-import './path/to/yourCustomTheme.css';  // Your custom theme
+import 'baseline-kit/styles' // Required component styles
+import './path/to/yourCustomTheme.css' // Your custom theme
 ```
 
 #### 4. Override via Config
@@ -366,9 +380,8 @@ For minor adjustments, use the Config component:
 | Baseline  | `--bk-baseline-color-[line/flat]-theme` | Colors for lines and backgrounds |
 | Guide     | `--bk-guide-color-[line/pattern/auto/fixed]-theme` | Colors for different guide variants |
 | Box       | `--bk-box-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
-| Stack     | `--bk-stack-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
-| Layout    | `--bk-layout-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
 | Spacer    | `--bk-spacer-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
+| Padder    | `--bk-padder-color-theme` | Padder edge color |
 
 See the [tokens file](https://github.com/dnvt/baseline-kit/blob/main/dist/theme/tokens.css) for a complete list of available variables.
 
@@ -412,12 +425,16 @@ Components accept an `ssrMode` prop to explicitly optimize for server rendering:
 ```
 
 With `ssrMode` enabled, components use simplified rendering during SSR and initial hydration, then enhance with full features after client-side hydration completes.
+For debug overlays such as `Guide` and `Baseline`, `ssrMode` keeps the simplified fallback markup to avoid client measurement and row/column rendering in SSR-sensitive paths.
 
 ## Development
 
 ```shell
 # Clone the repository
-git clone https://github.com/dnvt/baseline-kit.git
+git clone --recurse-submodules https://github.com/dnvt/baseline-kit.git
+
+# If you already cloned without submodules
+git submodule update --init --recursive
 
 # Install dependencies
 bun install
@@ -429,6 +446,11 @@ bun run dev
 bun run test
 ```
 
+The `.maestro/source` directory is a workflow submodule. Generated local
+workflow surfaces such as `.claude/`, `maestro/`, `progress/`, and `plans/` are
+ignored. Do not run the Maestro layout migration until the submodule source is
+mounted at `.maestro/source` and the migration plan has been reviewed.
+
 ## Performance Features
 
 - Virtualizes large grid overlays

package/dist/README.md

@@ -4,7 +4,7 @@
 ![npm version](https://img.shields.io/npm/v/baseline-kit)
 ![License](https://img.shields.io/github/license/dnvt/baseline-kit)
 
-Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible layout components, and theme-aware configuration—all optimized for performance and built with TypeScript. The library is based on the "Padded Grid" concept, originally explored in [this article](http://medium.com/design-bootcamp/the-padded-grid-a-designers-hack-to-achieve-baseline-fit-fc40d022bc84) on achieving perfect baseline alignment in digital layouts.
+Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, spacing primitives, and theme-aware configuration—all optimized for performance and built with TypeScript. The library is based on the "Padded Grid" concept, originally explored in [this article](http://medium.com/design-bootcamp/the-padded-grid-a-designers-hack-to-achieve-baseline-fit-fc40d022bc84) on achieving perfect baseline alignment in digital layouts.
 
 ![Demo visual](kit.png)
 
@@ -44,8 +44,7 @@ Baseline Kit is a lightweight development tool for visualizing and debugging gri
 - 📏 **Baseline Grid:** Core system for maintaining vertical rhythm and consistent spacing across your layouts
 - 🎯 **Column Grid Guide:** Customizable overlay system for visualizing column-based layouts and alignment
 - 📦 **Box Component:** Basic container with configurable spacing that snaps to the baseline grid
-- 🧩 **Layout Component:** CSS Grid-based container with automatic column calculations and baseline alignment
-- 📐 **Stack Component:** Flex-based container that maintains consistent spacing and baseline alignment
+- 🧱 **Padder & Spacer:** Spacing primitives with optional baseline snapping
 - 🎨 **Theme System:** Customizable colors and debug visuals through a centralized configuration
 
 ## Requirements
@@ -66,35 +65,44 @@ yarn add baseline-kit
 pnpm add baseline-kit
 ```
 
-After installation, import both the styles and theme in your application:
+After installation, import the smallest entry point that matches your use case.
+For a development grid overlay, use the guide-only React and CSS subpaths:
 
 ```tsx
-// Import in your main entry file (e.g., index.js, App.js)
-import 'baseline-kit/styles';  // Required core styles
-import 'baseline-kit/theme';   // Recommended theme (or use your own)
+import 'baseline-kit/styles/guide'
+import { Config, Guide } from 'baseline-kit/guide'
 ```
 
 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" }
-];
+  { rel: 'stylesheet', href: 'baseline-kit/styles/guide' },
+]
 ```
 
-If you prefer a single CSS file that includes everything:
+For the full component set, import the root package and root component styles:
 
 ```tsx
-// Alternative: Import everything in one file
-import 'baseline-kit/full';
+import 'baseline-kit/styles'
+import 'baseline-kit/theme'
+import { Config, Guide, Baseline, Box } from 'baseline-kit'
+```
+
+If you prefer a single CSS file for every component plus the theme:
+
+```tsx
+import 'baseline-kit/styles/full'
 
 // For Remix:
 export const links = () => [
-  { rel: "stylesheet", href: "baseline-kit/full" }
-];
+  { rel: 'stylesheet', href: 'baseline-kit/styles/full' },
+]
 ```
 
+The browser reset is not included by default. Import `baseline-kit/reset` or
+`baseline-kit/styles/reset` only when you want Baseline Kit to provide one.
+
 Baseline Kit is written in TypeScript and includes built-in type definitions—no additional packages required.
 
 ## Quick Start
@@ -153,12 +161,12 @@ unit:
 
 ```tsx
 <Config base={8}>     // Sets 8px as the base unit
-  <Layout
+  <Padder
     block={17}        // Will be rounded to 16px (2 * base)
     inline={22}       // Will be rounded to 24px (3 * base)
   >
     {/* Content automatically aligned to the 8px grid */}
-  </Layout>
+  </Padder>
 </Config>
 ```
 
@@ -182,8 +190,7 @@ block={{ start: 2, end: 3 }}  // Same as above
 Components automatically adjust their spacing to maintain baseline grid alignment:
 
 - **Box**: Adjusts bottom padding to ensure total height aligns with base unit
-- **Stack**: Maintains baseline alignment in flex layouts
-- **Layout**: Ensures grid cells align with baseline
+- **Padder**: Snaps padded content to baseline-aligned multiples of the base unit
 
 ### Debugging Modes
 
@@ -199,21 +206,20 @@ debugging = "none"           // Removes debug elements entirely
 
 ### Component Hierarchy
 
-#### 1. Core Components
+#### 1. Spacing primitives
 
-- **`Box`** Basic container for text alignment
-- **`Stack`** Flex-based layouts (one-dimensional)
-- **`Layout`** Grid-based layouts (two-dimensional)
+- **`Box`** Basic container that snaps its height to the baseline grid
+- **`Padder`** Padding wrapper that snaps padded content to baseline multiples
+- **`Spacer`** Fixed-size spacer with optional measurement indicator overlay
 
-#### 2. Development Tools
+#### 2. Debug overlays
 
-- **`Baseline`** Horizontal grid overlay
-- **`Guide`** Vertical grid overlay
-- **`Spacer`** Precise spacing measurement
+- **`Baseline`** Horizontal baseline-grid overlay
+- **`Guide`** Column-grid overlay (line / pattern / fixed / auto variants)
 
 #### 3. Configuration
 
-- **`Config`** Theme and settings provider
+- **`Config`** Theme and settings provider (base unit, colors, debug modes)
 
 ### Key Components
 
@@ -255,7 +261,7 @@ debugging = "none"           // Removes debug elements entirely
 ```tsx
 <Box
   block={[2, 5]}         // Vertical padding in base units
-  span={2}               // Grid column span when used in Layout
+  span={2}               // Grid column span when placed in a CSS grid parent
   snapping="height"      // "none", "height", or "clamp"
 >
   <p>Content aligned to baseline grid</p>
@@ -266,21 +272,29 @@ debugging = "none"           // Removes debug elements entirely
 
 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`)
+1. `guide.css` - Guide-only overlay styles (imported via `baseline-kit/styles/guide`)
+2. `styles.css` - Root component styles and base variables (imported via `baseline-kit/styles`)
+3. `theme.css` - Color variables and theming with automatic dark mode support (imported via `baseline-kit/theme`)
+4. `reset.css` - Optional browser reset (imported via `baseline-kit/reset` or `baseline-kit/styles/reset`)
+5. `baseline-kit.css` - Combined root component styles and theme (imported via `baseline-kit/styles/full`)
 
 ### CSS Import Options
 
 Baseline Kit gives you flexibility in how you include the styles:
 
 ```tsx
-// Option 1: Import core styles and theme separately (recommended)
-import 'baseline-kit/styles';
-import 'baseline-kit/theme';
+// Guide-only overlay styles
+import 'baseline-kit/styles/guide'
+
+// Root component styles and theme separately
+import 'baseline-kit/styles'
+import 'baseline-kit/theme'
+
+// Root component styles and theme in one file
+import 'baseline-kit/styles/full'
 
-// Option 2: Import everything in one file
-import 'baseline-kit/full';
+// Optional reset
+import 'baseline-kit/reset'
 ```
 
 ### Theme Options
@@ -290,21 +304,21 @@ You now have four options for using the theme system:
 #### 1. Use the Built-in Theme (with automatic dark mode)
 
 ```tsx
-import 'baseline-kit/theme';  // Default theme with light/dark mode support
+import 'baseline-kit/theme' // Default theme with light/dark mode support
 ```
 
 #### 2. Use Specific Theme Variants
 
 ```tsx
 // Use only the light theme (no dark mode)
-import 'baseline-kit/theme/default';
+import 'baseline-kit/theme/default'
 
 // Use only the dark theme
-import 'baseline-kit/theme/dark';
+import 'baseline-kit/theme/dark'
 
 // Example: Apply dark theme regardless of system preference
-import 'baseline-kit/styles';
-import 'baseline-kit/theme/dark';
+import 'baseline-kit/styles'
+import 'baseline-kit/theme/dark'
 ```
 
 #### 3. Create a Custom Theme
@@ -313,7 +327,7 @@ 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)
+import 'baseline-kit/theme/tokens' // Just for reference (contains no values)
 ```
 
 Then create your own custom theme file:
@@ -338,8 +352,8 @@ Then create your own custom theme file:
 Then import your custom theme:
 
 ```tsx
-import 'baseline-kit/styles';            // Required core styles
-import './path/to/yourCustomTheme.css';  // Your custom theme
+import 'baseline-kit/styles' // Required component styles
+import './path/to/yourCustomTheme.css' // Your custom theme
 ```
 
 #### 4. Override via Config
@@ -366,9 +380,8 @@ For minor adjustments, use the Config component:
 | Baseline  | `--bk-baseline-color-[line/flat]-theme` | Colors for lines and backgrounds |
 | Guide     | `--bk-guide-color-[line/pattern/auto/fixed]-theme` | Colors for different guide variants |
 | Box       | `--bk-box-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
-| Stack     | `--bk-stack-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
-| Layout    | `--bk-layout-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
 | Spacer    | `--bk-spacer-color-[line/flat/text]-theme` | Colors for borders, backgrounds and text |
+| Padder    | `--bk-padder-color-theme` | Padder edge color |
 
 See the [tokens file](https://github.com/dnvt/baseline-kit/blob/main/dist/theme/tokens.css) for a complete list of available variables.
 
@@ -412,12 +425,16 @@ Components accept an `ssrMode` prop to explicitly optimize for server rendering:
 ```
 
 With `ssrMode` enabled, components use simplified rendering during SSR and initial hydration, then enhance with full features after client-side hydration completes.
+For debug overlays such as `Guide` and `Baseline`, `ssrMode` keeps the simplified fallback markup to avoid client measurement and row/column rendering in SSR-sensitive paths.
 
 ## Development
 
 ```shell
 # Clone the repository
-git clone https://github.com/dnvt/baseline-kit.git
+git clone --recurse-submodules https://github.com/dnvt/baseline-kit.git
+
+# If you already cloned without submodules
+git submodule update --init --recursive
 
 # Install dependencies
 bun install
@@ -429,6 +446,11 @@ bun run dev
 bun run test
 ```
 
+The `.maestro/source` directory is a workflow submodule. Generated local
+workflow surfaces such as `.claude/`, `maestro/`, `progress/`, and `plans/` are
+ignored. Do not run the Maestro layout migration until the submodule source is
+mounted at `.maestro/source` and the migration plan has been reviewed.
+
 ## Performance Features
 
 - Virtualizes large grid overlays

package/dist/baseline-kit.css

@@ -1,8 +1,8 @@
 /* Baseline Kit - Combined CSS */
-/* This file contains both core styles and theme */
+/* This file contains component styles and theme variables */
 
-/* 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}
+/* Component Styles */
+:root{--bk-base:8px;--bk-zi:1;--bk-zio:2;--bk-transition-base:.18s ease;--bk-width-default:fit-content;--bk-height-default:fit-content;--bk-wf:100%;--bk-hf:100%;--bkbx-b:var(--bk-base);--bkbx-w:var(--bk-width-default);--bkbx-h:var(--bk-height-default);--bkbx-cl:var(--bk-box-color-line-theme,#a329a399);--bkbx-cf:var(--bk-box-color-flat-theme,#96f3);--bkbx-ct:var(--bk-box-color-text-theme,#a329a3e6);--bkbl-w:100%;--bkbl-h:100%;--bkbl-rt:0;--bkbl-rh:1px;--bkbl-cl:var(--bk-baseline-color-line-theme,#2929a326);--bkbl-cf:var(--bk-baseline-color-flat-theme,#667fff33);--bkgd-w:100vw;--bkgd-h:100vh;--bkgd-g:var(--bk-base);--bkgd-j:center;--bkgd-t:auto;--bkgd-pb:0;--bkgd-pi:0;--bkgd-cl:var(--bk-guide-color-line-theme,#2929a326);--bkgd-cp:var(--bk-guide-color-pattern-theme,#667fff33);--bkgd-ca:var(--bk-guide-color-auto-theme,#66ccff26);--bkgd-cf:var(--bk-guide-color-fixed-theme,#66ccff26);--bkpd-w:var(--bk-width-default);--bkpd-h:var(--bk-height-default);--bkpd-c:var(--bk-padder-color-theme,#6629a399);--bksp-w:var(--bk-wf);--bksp-h:var(--bk-hf);--bksp-cl:var(--bk-spacer-color-line-theme,#6629a399);--bksp-cf:var(--bk-spacer-color-flat-theme,#667fff33);--bksp-ct:var(--bk-spacer-color-text-theme,#6629a3)}.bas_4Emvv{pointer-events:none;width:var(--bkbl-w);height:var(--bkbl-h);contain:layout style paint;position:absolute;inset:0;overflow:hidden}.v_lNfeX{opacity:1;visibility:visible;transition:opacity var(--bk-transition-base), visibility 0s linear}.h_PbNDU{opacity:0;visibility:hidden;transition:opacity var(--bk-transition-base), visibility 0s linear .18s}.row_J1Wva{left:0;right:0;top:var(--bkbl-rt);height:var(--bkbl-rh);background-color:var(--bkbl-c);position:absolute}.ssr_PQAP-{box-sizing:border-box;z-index:1;pointer-events:none;display:grid;position:relative}.gde_4PKz3{box-sizing:border-box;width:var(--bkgd-w,100%);height:var(--bkgd-h,100%);max-width:var(--bkgd-mw,none);pointer-events:none;padding:var(--bkgd-pb,0) var(--bkgd-pi,0);margin-inline:auto;position:absolute;inset:0}.v_yAvN0{opacity:1;visibility:visible;transition:opacity var(--bk-transition-base), visibility 0s linear}.h_XcWcy{opacity:0;visibility:hidden;transition:opacity var(--bk-transition-base), visibility 0s linear .18s}.line_UaLjW{left:-.5px}.cols_ibtT4{column-gap:var(--bkgd-g);grid-template-rows:1fr;grid-template-columns:var(--bkgd-t);justify-content:var(--bkgd-j);width:var(--bk-wf);height:var(--bk-hf);contain:layout style paint;display:grid;position:absolute;inset:0;overflow:hidden}.col_QPSDI{min-width:0;width:var(--bk-wf);height:var(--bk-hf)}.col_QPSDI[data-variant=line]{background-color:var(--bkgd-cl);width:1px}.cols_ibtT4[data-variant=line]{background-image:repeating-linear-gradient(to right, var(--bkgd-line-color,var(--bkgd-cl)) 0 1px, transparent 1px var(--bkgd-line-period,1px));display:block}.col_QPSDI[data-variant=pattern]{background-color:var(--bkgd-cp)}.col_QPSDI[data-variant=auto]{background-color:var(--bkgd-ca);overflow:hidden}.col_QPSDI[data-variant=fixed]{background-color:var(--bkgd-cf)}.ssr_4UN4k{box-sizing:border-box;z-index:1;pointer-events:none;min-height:100px;display:grid;position:relative}.spr_syfhf{box-sizing:border-box;width:var(--bksp-w,100%);height:var(--bksp-h,auto);flex-shrink:0;margin:0;padding:0;display:block;position:relative}.line_nzGsp:after{content:"";border:1px solid var(--bksp-cl,#6629a399);z-index:calc(var(--bk-zi,1));position:absolute;inset:0}.flat_XJWHt{background-color:var(--bksp-cf,#667fff33)}.pad_NizuS{width:var(--bkpd-w,auto);height:var(--bkpd-h,auto);grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;display:grid;position:relative}.lay_ZdQLz .line_7S7iI:after,.stk_X79YA .line_7S7iI:after{border:none}.v_dowAz:after{content:"";border:1px solid var(--bkpd-c,var(--bk-padder-color-theme));pointer-events:none;z-index:var(--bk-zi);position:absolute;inset:0}.box_sPqFs{width:var(--bkbx-w);height:var(--bkbx-h);position:relative}.v_ZrZ5j:after{content:"";border:1px solid var(--bkbx-cl);pointer-events:none;z-index:var(--bk-zi);position:absolute;inset:0}
 
 
 /* Theme */
@@ -74,16 +74,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);
 }
@@ -135,14 +125,6 @@
     --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/core/src/config/defaults.d.ts

@@ -0,0 +1,2 @@
+import type { ConfigSchema } from './schema';
+export declare const DEFAULT_CONFIG: ConfigSchema;

package/dist/core/src/config/index.d.ts

@@ -0,0 +1,3 @@
+export type { ConfigSchema } from './schema';
+export { DEFAULT_CONFIG } from './defaults';
+export { mergeConfig, createCSSVariables } from './merge';

package/dist/core/src/config/merge.d.ts

@@ -0,0 +1,21 @@
+import type { ConfigSchema } from './schema';
+type MergeConfigParams = {
+    parentConfig: ConfigSchema;
+    base?: number;
+    baseline?: Partial<ConfigSchema['baseline']>;
+    guide?: Partial<ConfigSchema['guide']>;
+    spacer?: Partial<ConfigSchema['spacer']>;
+    box?: Partial<ConfigSchema['box']>;
+    padder?: Partial<ConfigSchema['padder']>;
+};
+export declare const mergeConfig: (params: MergeConfigParams) => ConfigSchema;
+type CSSVariablesParams = {
+    base: number;
+    baseline: ConfigSchema['baseline'];
+    guide: ConfigSchema['guide'];
+    spacer: ConfigSchema['spacer'];
+    box: ConfigSchema['box'];
+    padder: ConfigSchema['padder'];
+};
+export declare const createCSSVariables: (params: CSSVariablesParams) => Record<string, string>;
+export {};