baseline-kit 2.1.0 → 3.0.0

package/dist/styles.css

@@ -1 +1 @@
-.spr_zbcF6{position:relative;width:var(--bksw);height:var(--bksh);flex-shrink:0}.line_qHW69:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border:1px solid var(--bkscl);z-index:calc(var(--bkzi))}.flat_gqixr{background-color:var(--bkscf)}.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, 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)}.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);pointer-events:none;z-index:var(--bkzio)}.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, auto);height:var(--bkkh, auto)}.lay_zNlaC .line_THMgb:after,.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);pointer-events:none;z-index:var(--bkzio)}.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;gap:var(--bkgg);grid-template-columns:var(--bkgt);justify-content:var(--bkgj);width:var(--bkwf);height:var(--bkhf)}.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)}.col_rlbsL[data-variant=fixed]{background-color:var(--bkgcf)}.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(--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

@@ -1,46 +1,44 @@
 /**
  * Baseline Kit Theme System
- *
- * Organization:
- * 1. Color Palette (HSL values)
- * 2. Component Theme Colors
- * 3. Dark Mode Overrides
+ * 
+ * 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 */
-
-   /* ───────────────────────────────────────────────────────
+  /* 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)
@@ -48,38 +46,38 @@
       - 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);
+  /* 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);
 }
 
 /* ───────────────────────────────────────────────────────
@@ -89,52 +87,56 @@
 ─────────────────────────────────────────────────────── */
 
 @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);
-   }
-}
+  :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

@@ -17,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/math.d.ts

@@ -1,23 +1,10 @@
 /**
  * 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;
@@ -29,32 +16,14 @@ 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 */
@@ -74,12 +43,6 @@ type RowCountParams = {
  *
  * @param params - Parameters for calculation
  * @returns Number of rows that fit in the space
- *
- * @example
- * ```ts
- * calculateRowCount({ height: 100, top: 10, bottom: 10, base: 8 }) // => 10
- * calculateRowCount({ height: 20, top: 0, bottom: 0, base: 8 }) // => 2
- * ```
  */
 export declare function calculateRowCount(params: RowCountParams): number;
 export {};