baseline-kit 2.0.1 → 3.0.0

package/dist/styles.css

@@ -1 +1 @@
-.spr_4aLVm{position:relative;width:var(--bksw);height:var(--bksh);flex-shrink:0}.line_lUa33:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkscl);z-index:calc(var(--bkzi))}.flat_zXVQF{background-color:var(--bkscf)}.pad_I0i9S{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_E0FRN: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_yGGkG{display:grid;position:relative;box-sizing:border-box;width:var(--bklw, auto);height:var(--bklh, auto);grid-template-columns:var(--bklgtc, repeat(auto-fit, minmax(100px, 1fr)));grid-template-rows:var(--bklgtr, auto);gap:var(--bklg);column-gap:var(--bklcg);row-gap:var(--bklrg);justify-items:var(--bklji);align-items:var(--bklai);justify-content:var(--bkljc);align-content:var(--bklac)}.v_uVoBP:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bklcl);pointer-events:none;z-index:var(--bkzio)}.box_LHy8B{position:relative;width:var(--bkxw);height:var(--bkxh)}.v_q3Ozc: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_4t2AU{display:flex;position:relative;width:var(--bkkw, auto);height:var(--bkkh, auto)}.v_Uwir6:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkkcl);pointer-events:none;z-index:var(--bkzio)}.gde_eT-MH{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;padding:var(--bkgpb) var(--bkgpi)}.line_xcGxq{left:-.5px}.cols_LoPVp{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;gap:var(--bkgg);grid-template-columns:var(--bkgt);justify-content:var(--bkgj);width:var(--bkwf);height:var(--bkhf)}.col_ZgTMC{min-width:0;width:var(--bkwf);height:var(--bkhf)}.col_ZgTMC[data-variant=line]{width:1px;background-color:var(--bkgcl)}.col_ZgTMC[data-variant=pattern]{background-color:var(--bkgcp)}.col_ZgTMC[data-variant=auto]{background-color:var(--bkgca)}.col_ZgTMC[data-variant=fixed]{background-color:var(--bkgcf)}.bas_qAJSK{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;width:var(--bkbw);height:var(--bkbh);overflow:hidden}.row_y6My5{left:0;right:0;position:absolute;top:var(--bkrt);height:var(--bkrh);background-color:var(--bkbcl)}
+*,*: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}

package/dist/styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Style Entry Point
+ * @description Clean import path for core CSS styles
+ * @module baseline-kit/styles
+ */
+import './components/styles/core.css';

package/dist/theme/dark.css

@@ -0,0 +1,67 @@
+/**
+ * Baseline Kit Dark Theme
+ *
+ * Organization:
+ * 1. Color Palette (HSL values)
+ * 2. Component Theme Colors
+ */
+
+:root {
+  /* ───────────────────────────────────────────────────────
+      Color Palette - Dark Theme
+      - Inverts Primary/Secondary relationships
+      - Adjusts values for better contrast
+   ─────────────────────────────────────────────────────── */
+
+  /* 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 Colors - Dark
+      - Adjusts alpha values for better contrast
+   ─────────────────────────────────────────────────────── */
+
+  /* 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);
+}

package/dist/theme/default.css

@@ -0,0 +1,82 @@
+/**
+ * Baseline Kit Default Theme (Light)
+ *
+ * Organization:
+ * 1. Color Palette (HSL values)
+ * 2. Component Theme Colors
+ */
+
+: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);
+}

package/dist/theme/tokens.css

@@ -0,0 +1,82 @@
+/**
+ * Baseline Kit Theme Tokens Template
+ * 
+ * Use this file as a starting point for creating your own custom theme.
+ * This file contains all theme variables but no values.
+ * 
+ * To create a custom theme:
+ * 1. Copy this file
+ * 2. Fill in your custom values
+ * 3. Import it in your application after the core styles
+ */
+
+:root {
+  /* ───────────────────────────────────────────────────────
+      Color Palette
+      Provide HSL values in the format: hue, saturation%, lightness%
+   ─────────────────────────────────────────────────────── */
+
+  /* Neutral Colors */
+  --bk-color-black-primary: ;
+  --bk-color-black-secondary: ;
+  --bk-color-white-primary: ;
+  --bk-color-white-secondary: ;
+
+  /* Brand Colors */
+  --bk-color-pink-primary: ;
+  --bk-color-pink-secondary: ;
+  --bk-color-purple-primary: ;
+  --bk-color-purple-secondary: ;
+  --bk-color-blue-primary: ;
+  --bk-color-blue-secondary: ;
+
+  /* Supporting Colors */
+  --bk-color-cyan-primary: ;
+  --bk-color-cyan-secondary: ;
+  --bk-color-green-primary: ;
+  --bk-color-green-secondary: ;
+  --bk-color-yellow-primary: ;
+  --bk-color-yellow-secondary: ;
+  --bk-color-orange-primary: ;
+  --bk-color-orange-secondary: ;
+  --bk-color-red-primary: ;
+  --bk-color-red-secondary: ;
+
+  /* ───────────────────────────────────────────────────────
+      Component Theme Colors
+      Use hsla(var(--color-variable), alpha) format for transparency
+   ─────────────────────────────────────────────────────── */
+
+  /* Guide Component Theme */
+  --bk-guide-color-line-theme: ;
+  --bk-guide-color-pattern-theme: ;
+  --bk-guide-color-auto-theme: ;
+  --bk-guide-color-fixed-theme: ;
+
+  /* Baseline Component Theme */
+  --bk-baseline-color-line-theme: ;
+  --bk-baseline-color-flat-theme: ;
+
+  /* Spacer Component Theme */
+  --bk-spacer-color-line-theme: ;
+  --bk-spacer-color-flat-theme: ;
+  --bk-spacer-color-text-theme: ;
+
+  /* Box Component Theme */
+  --bk-box-color-line-theme: ;
+  --bk-box-color-flat-theme: ;
+  --bk-box-color-text-theme: ;
+
+  /* Stack Component Theme */
+  --bk-stack-color-line-theme: ;
+  --bk-stack-color-flat-theme: ;
+  --bk-stack-color-text-theme: ;
+
+  /* Layout Component Theme */
+  --bk-layout-color-line-theme: ;
+  --bk-layout-color-flat-theme: ;
+  --bk-layout-color-text-theme: ;
+
+  /* Padder Component Theme */
+  --bk-padder-color-theme: ;
+}

package/dist/theme.css

@@ -0,0 +1,142 @@
+/**
+ * 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/theme.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @file Theme Entry Point
+ * @description Clean import path for theme CSS styles
+ * @module baseline-kit/theme
+ */
+import './components/styles/theme.css';

package/dist/utils/convert.d.ts

@@ -1,8 +1,3 @@
-/**
- * @file convert.ts
- * @description Unit conversion and dimension calculation utilities
- * @module utils
- */
 export interface ConversionContext {
     /** Parent element dimension for relative units */
     parentSize?: number;
@@ -22,25 +17,8 @@ export declare const RELATIVE_UNITS: string[];
 /**
  * Converts CSS values to pixels.
  *
- * @remarks
- * Handles conversion of:
- * - Absolute units (px, in, cm, mm, pt, pc)
- * - Relative units (em, rem, vh, vw, vmin, vmax, %)
- * - Number values (treated as pixels)
- *
  * @param value - CSS value to convert
  * @param context - Optional context for relative unit conversion
  * @returns Value in pixels or null if conversion fails
- *
- * @example
- * ```ts
- * // Absolute units
- * convertValue('100px') // => 100
- * convertValue('1in')   // => 96
- *
- * // Relative units with context
- * convertValue('50%', { parentSize: 200 }) // => 100
- * convertValue('2em', { parentFontSize: 16 }) // => 32
- * ```
  */
 export declare function convertValue(value: number | string | undefined, context?: ConversionContext): number | null;

package/dist/utils/grid.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @file grid.ts
+ * @description Grid layout utilities
+ * @module utils
+ */
+import * as React from 'react';
+/**
+ * Creates grid span styles based on span props.
+ * Handles both combined span and individual col/row span values.
+ *
+ * @param span - Optional equal span for both rows and columns
+ * @param colSpan - Optional column span value
+ * @param rowSpan - Optional row span value
+ * @returns CSS properties object with grid span values
+ *
+ * @example
+ * ```ts
+ * createGridSpanStyles(2) // => { gridColumn: "span 2", gridRow: "span 2" }
+ * createGridSpanStyles(undefined, 3, 2) // => { gridColumn: "span 3", gridRow: "span 2" }
+ * ```
+ */
+export declare const createGridSpanStyles: (span?: number, colSpan?: number, rowSpan?: number) => React.CSSProperties;

package/dist/utils/index.d.ts

@@ -8,6 +8,8 @@ export * from './math';
 export * from './normalize';
 export * from './padding';
 export * from './snapping';
+export * from './grid';
 export * from './merge';
 export * from './parse';
 export * from './timing';
+export * from './ssr';

package/dist/utils/math.d.ts

@@ -1,28 +1,10 @@
-/**
- * @file math.ts
- * @description Mathematical calculation utilities
- * @module utils
- */
 /**
  * Calculates the modulo (remainder) of a CSS value when divided by a base unit.
  *
- * @remarks
- * Useful for:
- * - Baseline grid alignment
- * - Spacing calculations
- * - Grid fitting
- *
  * @param value - Input value (number or CSS string)
  * @param base - Base unit to calculate remainder against
  * @param options - Optional calculation controls
  * @returns Remainder in pixel units (e.g., "6px")
- *
- * @example
- * ```ts
- * moduloize(14, 8)      // => "6px"
- * moduloize('14px', 8)  // => "6px"
- * moduloize(14.3, 8, { round: false }) // => "6.3px"
- * ```
  */
 export declare function moduloize(value: number | string | undefined, base: number, options?: {
     round?: boolean;
@@ -34,31 +16,33 @@ export declare function moduloize(value: number | string | undefined, base: numb
  * @param min - Minimum allowed value
  * @param max - Maximum allowed value
  * @returns Clamped value
- *
- * @example
- * ```ts
- * clamp(5, 0, 10)   // => 5
- * clamp(-5, 0, 10)  // => 0
- * clamp(15, 0, 10)  // => 10
- * ```
  */
 export declare function clamp(value: number, min: number, max: number): number;
 /**
  * Rounds a number to specified precision.
  *
- * @remarks
- * Supports:
- * - Positive precision (decimal places)
- * - Negative precision (powers of 10)
- *
  * @param value - Number to round
  * @param precision - Decimal places (default: 0)
  * @returns Rounded number
- *
- * @example
- * ```ts
- * round(1.234, 2)   // => 1.23
- * round(123.4, -1)  // => 120
- * ```
  */
 export declare function round(value: number, precision?: number): number;
+/** Parameters for row count calculation */
+type RowCountParams = {
+    /** Available height for the container */
+    height?: number;
+    /** Top padding/offset value */
+    top: number;
+    /** Bottom padding/offset value */
+    bottom: number;
+    /** Base unit for calculations */
+    base: number;
+};
+/**
+ * Calculates the number of rows that fit in the available space.
+ * Ensures at least one row is always returned.
+ *
+ * @param params - Parameters for calculation
+ * @returns Number of rows that fit in the space
+ */
+export declare function calculateRowCount(params: RowCountParams): number;
+export {};

package/dist/utils/merge.d.ts

@@ -1,8 +1,3 @@
-/**
- * @file merge.ts
- * @description Style and class merging utilities
- * @module utils
- */
 import * as React from 'react';
 /**
  * Combines class names, filtering out falsy values.
@@ -66,3 +61,57 @@ export declare const mergeStyles: <T extends React.CSSProperties>(...styles: Arr
  * ```
  */
 export declare function mergeRefs<T>(...refs: Array<React.Ref<T> | null | undefined>): React.RefCallback<T>;
+/**
+ * Parameters for creating a style override
+ */
+export type StyleOverrideParams = {
+    /** CSS variable key to potentially override */
+    key: string;
+    /** Value to use if override is needed */
+    value: string;
+    /** Default styles to compare against */
+    defaultStyles: Record<string, string>;
+    /** Special case dimensions that should be skipped for specific values */
+    skipDimensions?: {
+        /** Dimensions that should be skipped when they're set to "fit-content" */
+        fitContent?: string[];
+        /** Dimensions that should be skipped when they're set to "auto" */
+        auto?: string[];
+        /** Dimensions that should be skipped when they're set to % values (like "100%") */
+        fullSize?: string[];
+    };
+};
+/**
+ * Creates style overrides for CSS variables, conditionally based on comparison to defaults.
+ * Only applies overrides when the value differs from the default, optimizing style objects.
+ *
+ * @param params - Style override parameters or individual arguments
+ * @param value
+ * @param defaultStyles
+ * @returns Style object with override (if needed)
+ *
+ * @example
+ * ```ts
+ * // Object parameter style:
+ * createStyleOverride({
+ *   key: '--color',
+ *   value: 'red',
+ *   defaultStyles: { '--color': 'blue' }
+ * })
+ * // => { '--color': 'red' }
+ *
+ * // With dimension skipping:
+ * createStyleOverride({
+ *   key: '--width',
+ *   value: 'fit-content',
+ *   defaultStyles: { '--width': 'auto' },
+ *   skipDimensions: { fitContent: ['--width', '--height'] }
+ * })
+ * // => {}
+ *
+ * // Legacy style with separate arguments:
+ * createStyleOverride('--color', 'red', { '--color': 'blue' })
+ * // => { '--color': 'red' }
+ * ```
+ */
+export declare function createStyleOverride(params: StyleOverrideParams | string, value?: string, defaultStyles?: Record<string, string>): Record<string, string | number>;