baseline-kit 3.0.1 → 5.0.0

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 {};

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

@@ -0,0 +1,33 @@
+import type { GuideVariant, BaselineVariant, Variant, DebuggingMode } from '../types';
+type DebugColors = {
+    line: string;
+    flat: string;
+    text: string;
+};
+export type ConfigSchema = {
+    base: number;
+    baseline: {
+        variant: BaselineVariant;
+        debugging: DebuggingMode;
+        colors: Record<BaselineVariant, string>;
+    };
+    guide: {
+        variant: GuideVariant;
+        debugging: DebuggingMode;
+        colors: Record<GuideVariant, string>;
+    };
+    spacer: {
+        variant: Variant;
+        debugging: DebuggingMode;
+        colors: DebugColors;
+    };
+    box: {
+        debugging: DebuggingMode;
+        colors: DebugColors;
+    };
+    padder: {
+        debugging: DebuggingMode;
+        color: string;
+    };
+};
+export {};

package/dist/core/src/descriptors/baseline.d.ts

@@ -0,0 +1,26 @@
+import type { BaselineVariant } from '../types';
+export interface BaselineDescriptorParams {
+    base: number;
+    colors: Record<BaselineVariant, string>;
+    variant: BaselineVariant;
+    width?: number | string;
+    height?: number | string;
+    color?: string;
+    containerWidth: number;
+    containerHeight: number;
+    spacing: Record<string, unknown>;
+    isVisible: boolean;
+}
+export interface BaselineDescriptor {
+    containerStyle: Record<string, string>;
+    rowCount: number;
+    getRowStyle: (index: number) => Record<string, string>;
+    padding: string | undefined;
+    isVisible: boolean;
+    classTokens: string[];
+}
+/**
+ * Computes all styles and data needed to render a Baseline component.
+ * Pure function — framework-agnostic.
+ */
+export declare function createBaselineDescriptor(params: BaselineDescriptorParams): BaselineDescriptor;

package/dist/core/src/descriptors/box.d.ts

@@ -0,0 +1,20 @@
+export interface BoxDescriptorParams {
+    base: number;
+    lineColor: string;
+    width?: number | string;
+    height?: number | string;
+    span?: number;
+    colSpan?: number;
+    rowSpan?: number;
+    isVisible: boolean;
+}
+export interface BoxDescriptor {
+    boxStyle: Record<string, string>;
+    gridSpanStyle: Record<string, string>;
+    classTokens: string[];
+}
+/**
+ * Computes styles needed to render a Box component.
+ * Pure function — framework-agnostic.
+ */
+export declare function createBoxDescriptor(params: BoxDescriptorParams): BoxDescriptor;

package/dist/core/src/descriptors/guide.d.ts

@@ -0,0 +1,44 @@
+import type { GuideVariant, GuideConfig } from '../types';
+export interface GuideDescriptorParams {
+    base: number;
+    colors: Record<GuideVariant, string>;
+    variant: GuideVariant;
+    align: string;
+    width?: number | string;
+    height?: number | string;
+    columnWidth?: number | string;
+    maxWidth?: number | string;
+    color?: string;
+    /** Pre-computed guide template result (from useGuide or calculateGuideTemplate) */
+    template: string;
+    columnsCount: number;
+    calculatedGap: number;
+    isVisible: boolean;
+}
+export interface GuideDescriptor {
+    containerStyle: Record<string, string>;
+    columnColor: string;
+    columnsCount: number;
+    calculatedGap: number;
+    template: string;
+    isVisible: boolean;
+    isLineVariant: boolean;
+    classTokens: string[];
+}
+export interface GuideConfigParams {
+    variant: GuideVariant;
+    base: number;
+    gap: number;
+    columns?: number | readonly (string | number | undefined | 'auto')[];
+    columnWidth?: number | string;
+}
+/**
+ * Creates a GuideConfig from component props.
+ * Pure function — no React or DOM dependency.
+ */
+export declare function createGuideConfig({ variant, base, gap, columns, columnWidth, }: GuideConfigParams): GuideConfig;
+/**
+ * Computes all styles and data needed to render a Guide component.
+ * Pure function — framework-agnostic.
+ */
+export declare function createGuideDescriptor(params: GuideDescriptorParams): GuideDescriptor;

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

@@ -0,0 +1,5 @@
+export * from './guide';
+export * from './baseline';
+export * from './box';
+export * from './spacer';
+export * from './padder';

package/dist/core/src/descriptors/padder.d.ts

@@ -0,0 +1,19 @@
+import type { Padding } from '../types';
+export interface PadderDescriptorParams {
+    base: number;
+    color: string;
+    width?: number | string;
+    height?: number | string;
+    padding: Padding;
+    enableSpacers: boolean;
+    isVisible: boolean;
+}
+export interface PadderDescriptor {
+    containerStyle: Record<string, string>;
+    classTokens: string[];
+}
+/**
+ * Computes styles needed to render a Padder component.
+ * Pure function — framework-agnostic.
+ */
+export declare function createPadderDescriptor(params: PadderDescriptorParams): PadderDescriptor;

package/dist/core/src/descriptors/spacer.d.ts

@@ -0,0 +1,24 @@
+export interface SpacerDescriptorParams {
+    base: number;
+    colors: {
+        line: string;
+        flat: string;
+        text: string;
+    };
+    width?: number | string;
+    height?: number | string;
+    color?: string;
+    variant: string;
+    isVisible: boolean;
+}
+export interface SpacerDescriptor {
+    style: Record<string, string>;
+    normWidth: number;
+    normHeight: number;
+    classTokens: string[];
+}
+/**
+ * Computes styles needed to render a Spacer component.
+ * Pure function — framework-agnostic.
+ */
+export declare function createSpacerDescriptor(params: SpacerDescriptorParams): SpacerDescriptor;

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

@@ -0,0 +1,10 @@
+/**
+ * @baseline-kit/core
+ * Pure TypeScript core: types, utilities, config, validation, and descriptors
+ * Zero dependencies — works in any JavaScript runtime
+ */
+export * from './types';
+export * from './config';
+export * from './utils';
+export * from './validation';
+export * from './descriptors';

package/dist/core/src/types.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @baseline-kit/core - Pure type definitions
+ * Framework-agnostic types for the baseline-kit system
+ */
+export type Spacing = number | [number, number] | {
+    start?: number;
+    end?: number;
+};
+export type PaddingValue = number | [number, number] | [number, number, number] | [number, number, number, number] | {
+    top?: number;
+    bottom?: number;
+    left?: number;
+    right?: number;
+};
+export type Padding = {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+export type SpacingProps = {
+    padding?: PaddingValue;
+    block?: Spacing;
+    inline?: Spacing;
+};
+export type GuideVariant = 'line' | 'pattern' | 'fixed' | 'auto';
+export type GuideColumnValue = string | number | undefined | 'auto';
+export type GuideColumnsPattern = readonly GuideColumnValue[];
+export declare const GRID_ALIGNMENTS: readonly ["start", "center", "end"];
+export type GridAlignment = (typeof GRID_ALIGNMENTS)[number];
+export declare const PADD_VARIANTS: readonly ["line", "flat"];
+export type PaddedVariant = (typeof PADD_VARIANTS)[number];
+export type Variant = 'line' | 'flat' | 'pattern';
+export type BaselineVariant = Exclude<Variant, 'pattern'>;
+export type SnappingMode = 'none' | 'height' | 'clamp';
+export type DebuggingMode = 'none' | 'hidden' | 'visible';
+type BaseGuideConfig = {
+    gap?: number | string;
+    base?: number;
+};
+export type PatternConfig = BaseGuideConfig & {
+    variant: 'pattern';
+    columns: GuideColumnsPattern;
+    columnWidth?: never;
+};
+export type FixedConfig = BaseGuideConfig & {
+    variant: 'fixed';
+    columns: number;
+    columnWidth?: number | string;
+};
+export type AutoConfig = BaseGuideConfig & {
+    variant: 'auto';
+    columnWidth: number | string;
+    columns?: never;
+};
+export type LineConfig = BaseGuideConfig & {
+    variant?: 'line';
+    columns?: never;
+    columnWidth?: never;
+};
+export type GuideConfig = PatternConfig | AutoConfig | FixedConfig | LineConfig;
+export {};

package/dist/core/src/utils/convert.d.ts

@@ -0,0 +1,10 @@
+export interface ConversionContext {
+    parentSize?: number;
+    viewportWidth?: number;
+    viewportHeight?: number;
+    rootFontSize?: number;
+    parentFontSize?: number;
+}
+export declare const ABSOLUTE_UNIT_CONVERSIONS: Record<string, number>;
+export declare const RELATIVE_UNITS: string[];
+export declare function convertValue(value: number | string | undefined, context?: ConversionContext): number | null;

package/dist/core/src/utils/grid.d.ts

@@ -0,0 +1,18 @@
+import type { GuideConfig } from '../types';
+import { type ConversionContext } from './convert';
+export interface GuideResult {
+    template: string;
+    columnsCount: number;
+    calculatedGap: number;
+    isValid: boolean;
+}
+/**
+ * Pure calculation of grid template from container width and guide config.
+ * Framework-agnostic — can be used outside React.
+ *
+ * Sizing note: the `line` variant still reports the number of pixel tracks as
+ * metadata, but React renders line guides with a CSS gradient so dense grids do
+ * not allocate one DOM node per line.
+ */
+export declare function calculateGuideTemplate(width: number, config: GuideConfig, context?: ConversionContext): GuideResult;
+export declare const createGridSpanStyles: (span?: number, colSpan?: number, rowSpan?: number) => Record<string, string>;

package/dist/{utils → core/src/utils}/index.d.ts

@@ -1,15 +1,8 @@
-/**
- * @file Utility Exports (utils/index.ts)
- * @description Utility functions for baseline-kit operations
- * @module baseline-kit/utils
- */
+export * from './parse';
 export * from './convert';
 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';
+export * from './grid';

package/dist/core/src/utils/math.d.ts

@@ -0,0 +1,9 @@
+export declare function clamp(value: number, min: number, max: number): number;
+type RowCountParams = {
+    height?: number;
+    top: number;
+    bottom: number;
+    base: number;
+};
+export declare function calculateRowCount(params: RowCountParams): number;
+export {};

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

@@ -0,0 +1,28 @@
+import type { DebuggingMode } from '../types';
+/**
+ * Combines class names, filtering out falsy values.
+ * Lightweight alternative to clsx/classnames.
+ */
+export declare const cx: (...classes: Array<string | boolean | undefined | null>) => string;
+/**
+ * Resolves component debug/visibility state from prop and config.
+ * Pure function — framework-agnostic.
+ */
+export interface DebugState {
+    isShown: boolean;
+    isHidden: boolean;
+    isNone: boolean;
+    debugging: DebuggingMode | undefined;
+}
+export declare function resolveDebugState(debuggingProp?: DebuggingMode, debuggingConfig?: DebuggingMode): DebugState;
+export type StyleOverrideParams = {
+    key: string;
+    value: string;
+    defaultStyles: Record<string, string>;
+    skipDimensions?: {
+        fitContent?: string[];
+        auto?: string[];
+        fullSize?: string[];
+    };
+};
+export declare function createStyleOverride(params: StyleOverrideParams | string, value?: string, defaultStyles?: Record<string, string>): Record<string, string>;

package/dist/core/src/utils/normalize.d.ts

@@ -0,0 +1,13 @@
+import { type ConversionContext } from './convert';
+export interface NormalizationOptions {
+    base?: number;
+    round?: boolean;
+    clamp?: {
+        min?: number;
+        max?: number;
+    };
+    suppressWarnings?: boolean;
+    context?: ConversionContext;
+}
+export declare function normalizeValue(value: string | number | undefined, options?: NormalizationOptions): number;
+export declare function normalizeValuePair(values: [string | number | undefined, string | number | undefined] | undefined, defaults: [number, number], options?: NormalizationOptions): [number, number];

package/dist/core/src/utils/padding.d.ts

@@ -0,0 +1,2 @@
+import type { Padding, SpacingProps } from '../types';
+export declare function parsePadding(spacing: SpacingProps): Padding;

package/dist/core/src/utils/parse.d.ts

@@ -0,0 +1,5 @@
+export declare function parseUnit(value: string): {
+    value: number;
+    unit: string;
+} | null;
+export declare function formatValue(value: string | number | undefined, defaultValue?: number): string;

package/dist/core/src/utils/snapping.d.ts

@@ -0,0 +1,2 @@
+import type { SnappingMode, Padding, PaddingValue } from '../types';
+export declare function calculateSnappedSpacing(height: number, base: number, initial: PaddingValue, snapping: SnappingMode): Padding;

package/dist/core/src/validation/guide.d.ts

@@ -0,0 +1,3 @@
+import type { GuideColumnsPattern, GuideColumnValue } from '../types';
+export declare const isValidGuideColumnValue: (value: unknown) => value is GuideColumnValue;
+export declare const isValidGuidePattern: (pattern: unknown) => pattern is GuideColumnsPattern;

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

@@ -0,0 +1 @@
+export * from './guide';

package/dist/core.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./src-CMjyHjX5.cjs`);exports.ABSOLUTE_UNIT_CONVERSIONS=e.b,exports.DEFAULT_CONFIG=e.k,exports.GRID_ALIGNMENTS=e.T,exports.PADD_VARIANTS=e.E,exports.RELATIVE_UNITS=e.x,exports.calculateGuideTemplate=e.s,exports.calculateRowCount=e.v,exports.calculateSnappedSpacing=e.m,exports.clamp=e.y,exports.convertValue=e.S,exports.createBaselineDescriptor=e.i,exports.createBoxDescriptor=e.r,exports.createCSSVariables=e.D,exports.createGridSpanStyles=e.c,exports.createGuideConfig=e.a,exports.createGuideDescriptor=e.o,exports.createPadderDescriptor=e.t,exports.createSpacerDescriptor=e.n,exports.createStyleOverride=e.d,exports.cx=e.f,exports.formatValue=e.C,exports.isValidGuideColumnValue=e.l,exports.isValidGuidePattern=e.u,exports.mergeConfig=e.O,exports.normalizeValue=e.g,exports.normalizeValuePair=e._,exports.parsePadding=e.h,exports.parseUnit=e.w,exports.resolveDebugState=e.p;