baseline-kit 3.0.2 → 5.1.0

package/dist/styles.css

@@ -1 +1 @@
-*,*: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}
+: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}.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}.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)}.indicator_inw1x{color:var(--bksp-ct,#6629a3)}.pad_NizuS{width:var(--bkpd-w,auto);height:var(--bkpd-h,auto);text-box-trim:trim-both;text-box-edge:ex alphabetic;grid-template-rows:auto 1fr auto;grid-template-columns:auto 1fr auto;display:grid;position:relative}.content_xFX0U{text-box-trim:trim-both;text-box-edge:ex alphabetic}.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);text-box-trim:trim-both;text-box-edge:ex alphabetic;position:relative}.v_ZrZ5j:after{content:"";border:1px solid var(--bkbx-cl);pointer-events:none;z-index:var(--bk-zi);position:absolute;inset:0}

package/dist/theme/dark.css

@@ -56,12 +56,4 @@
   --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

@@ -67,16 +67,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

@@ -7,7 +7,7 @@
  * 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
+ * 3. Import it in your application after the component styles
  */
 
 :root {
@@ -67,16 +67,6 @@
   --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

@@ -66,16 +66,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);
 }
@@ -123,18 +113,13 @@
     --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-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/package.json

@@ -1,24 +1,52 @@
 {
   "scripts": {
-    "build": "vite build && bun run build:type && bun run build:combine-css",
-    "build:type": "tsc -p tsconfig.build.json",
-    "build:combine-css": "node scripts/combine-css.js",
+    "build": "vite build && bun run build:guide && bun run build:remix && bun run emit:declarations && bun run bundle:declarations && bun run build:css && bun run verify:artifacts",
+    "build:guide": "vite build --config vite.guide.config.ts",
+    "build:remix": "vite build --config vite.remix.config.ts && vite build --config vite.remix-server.config.ts",
+    "emit:declarations": "tsc -p tsconfig.build.json",
+    "bundle:declarations": "rollup -c rollup.declarations.config.mjs",
+    "build:css": "node scripts/combine-css.js",
+    "verify:artifacts": "node scripts/verify-artifacts.js",
     "changeset": "changeset",
-    "dev": "vite",
-    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
-    "lint": "eslint src --fix",
-    "prepare": "bun run build && bun run build:type",
-    "prepublishOnly": "bun run build && bun run build:type",
+    "dev": "vite --config tests/browser/vite.config.ts",
+    "format": "prettier --write \"packages/**/*.{ts,tsx,css}\"",
+    "lint": "eslint packages --fix",
+    "lint:check": "eslint packages",
+    "prepack": "bun run build",
+    "prepublishOnly": "bun run build",
     "release": "changeset publish",
     "test": "vitest",
+    "test:browser": "playwright test",
+    "test:browser:repeat": "node scripts/repeat-browser-gate.js",
+    "test:integration:remix": "node scripts/test-remix-package.js",
+    "test:react-core": "vitest run --exclude \"tests/remix/**\"",
+    "test:remix": "vitest run tests/remix",
+    "test:unit": "vitest run",
     "test:coverage": "vitest run --coverage",
     "typecheck": "tsc --noEmit",
+    "verify:integration": "bun run typecheck && bun run lint:check && bun run test:react-core && bun run test:unit && bun run build && bun run test:integration:remix && bun run test:browser:repeat",
     "version": "changeset version"
   },
+  "packageManager": "bun@1.3.12",
   "peerDependencies": {
+    "remix": "3.0.0-rc.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2 || ^6.0.0 || ^7.0.2"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "remix": {
+      "optional": true
+    },
+    "typescript": {
+      "optional": true
+    }
   },
   "main": "dist/index.cjs",
   "engines": {
@@ -27,15 +55,12 @@
   "keywords": [
     "react",
     "grid",
-    "layout",
     "typescript",
     "baseline",
     "guide",
     "box",
-    "layout",
     "typography",
     "spacing",
-    "stack",
     "padding",
     "debug",
     "dev-tool",
@@ -47,36 +72,45 @@
     "url": "git+https://github.com/dnvt/baseline-kit.git"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.28.1",
-    "@eslint/js": "^9.21.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@types/node": "^22.13.9",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.26.0",
-    "@typescript-eslint/parser": "^8.26.0",
-    "@vitejs/plugin-react-swc": "^3.8.0",
-    "@vitest/coverage-v8": "^3.0.8",
-    "autoprefixer": "^10.4.20",
-    "cssnano": "^7.0.6",
-    "eslint": "^9.0.0",
-    "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-prettier": "^5.2.3",
-    "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-react-hooks": "^5.2.0",
-    "jsdom": "^26.0.0",
-    "prettier": "^3.5.3",
-    "rollup": "^4.34.9",
-    "rollup-plugin-dts": "^6.1.1",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "vite": "6.2.1",
-    "vite-plugin-static-copy": "^2.3.0",
-    "vitest": "3.0.8"
+    "@changesets/cli": "^3.0.3",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@typescript/typescript6": "^6.0.2",
+    "@playwright/test": "1.63.0",
+    "@types/node": "^22.20.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.70.0",
+    "@typescript-eslint/parser": "^8.70.0",
+    "@vitejs/plugin-react-swc": "^4.3.3",
+    "@vitest/coverage-v8": "^5.0.1",
+    "eslint": "^10.10.0",
+    "eslint-plugin-prettier": "^5.5.6",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "jsdom": "^30.0.1",
+    "prettier": "^3.9.7",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "remix": "3.0.0-rc.2",
+    "rollup": "^4.63.3",
+    "rollup-plugin-dts": "^6.5.1",
+    "rollup-plugin-visualizer": "^7.1.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.0",
+    "vite-plugin-static-copy": "^4.1.1",
+    "vitest": "^5.0.1"
   },
   "name": "baseline-kit",
-  "version": "3.0.2",
+  "version": "5.1.0",
   "type": "module",
+  "workspaces": [
+    ".",
+    "packages/*"
+  ],
+  "overrides": {
+    "esbuild": "0.28.2"
+  },
   "homepage": "https://github.com/dnvt/baseline-kit#readme",
   "types": "dist/index.d.ts",
   "exports": {
@@ -86,11 +120,58 @@
       "require": "./dist/index.cjs",
       "default": "./dist/index.mjs"
     },
+    "./guide": {
+      "types": "./dist/guide.d.ts",
+      "import": "./dist/guide.mjs",
+      "require": "./dist/guide.cjs",
+      "default": "./dist/guide.mjs"
+    },
+    "./core": {
+      "types": "./dist/core.d.ts",
+      "import": "./dist/core.mjs",
+      "require": "./dist/core.cjs",
+      "default": "./dist/core.mjs"
+    },
+    "./remix": {
+      "types": "./dist/remix.d.ts",
+      "import": "./dist/remix.mjs",
+      "default": "./dist/remix.mjs"
+    },
+    "./remix/server": {
+      "types": "./dist/remix-server.d.ts",
+      "node": "./dist/remix-server.mjs",
+      "default": "./dist/remix-server.mjs"
+    },
+    "./styles/remix": {
+      "import": "./dist/remix.css",
+      "require": "./dist/remix.css",
+      "default": "./dist/remix.css"
+    },
     "./styles": {
       "import": "./dist/styles.css",
       "require": "./dist/styles.css",
       "default": "./dist/styles.css"
     },
+    "./styles/guide": {
+      "import": "./dist/guide.css",
+      "require": "./dist/guide.css",
+      "default": "./dist/guide.css"
+    },
+    "./styles/full": {
+      "import": "./dist/baseline-kit.css",
+      "require": "./dist/baseline-kit.css",
+      "default": "./dist/baseline-kit.css"
+    },
+    "./styles/reset": {
+      "import": "./dist/reset.css",
+      "require": "./dist/reset.css",
+      "default": "./dist/reset.css"
+    },
+    "./reset": {
+      "import": "./dist/reset.css",
+      "require": "./dist/reset.css",
+      "default": "./dist/reset.css"
+    },
     "./theme": {
       "import": "./dist/theme.css",
       "require": "./dist/theme.css",
@@ -117,6 +198,8 @@
       "default": "./dist/baseline-kit.css"
     },
     "./dist/styles.css": "./dist/styles.css",
+    "./dist/guide.css": "./dist/guide.css",
+    "./dist/reset.css": "./dist/reset.css",
     "./dist/theme.css": "./dist/theme.css",
     "./dist/theme/default.css": "./dist/theme/default.css",
     "./dist/theme/dark.css": "./dist/theme/dark.css",
@@ -125,13 +208,23 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "dist",
+    "dist/*.mjs",
+    "dist/*.cjs",
+    "dist/*.js",
+    "dist/*.map",
+    "dist/*.d.ts",
+    "dist/*.css",
+    "dist/theme",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "style": "dist/styles.css",
   "sideEffects": [
     "dist/styles.css",
+    "dist/remix.css",
+    "dist/guide.css",
+    "dist/reset.css",
     "dist/theme.css",
     "dist/theme/default.css",
     "dist/theme/dark.css",
@@ -147,9 +240,5 @@
     "access": "public"
   },
   "author": "Francois Denavaut",
-  "description": "Baseline Kit is a lightweight development tool for visualizing and debugging grid systems and spacing in React applications. It provides configurable overlays for both column-based and baseline grids, flexible spacing components, and theme-aware configuration—all optimized for performance and built with TypeScript.",
-  "dependencies": {
-    "esbuild": "^0.25.0",
-    "postcss-preset-env": "^10.1.5"
-  }
+  "description": "React 19 baseline and column-grid overlays, spacing primitives, themeable debug visuals, and a React-free Remix 3 adapter."
 }