jb-core
Version:
jb design system core modules
2 lines • 4.07 kB
JavaScript
var e=class{get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,n){this.variableName=n,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function n(n){return new e({lightness:6*(3+1.3*n)*.01,chroma:.001*(14+.09*n),hue:258.36},`--jb-neutral-${n}`)}function t(n){return new e({lightness:n.lightness+.07,chroma:n.chroma+.07,hue:n.hue},`${n.variableName}-hover`)}function a(n){return new e({lightness:n.lightness-.1,chroma:n.chroma-.05,hue:n.hue},`${n.variableName}-pressed`)}function r(n){const t=Math.min(n.lightness+.12*(1-n.lightness),.985),a=n.chroma*(1-.15*(t-n.lightness));return new e({lightness:t,chroma:Number(a.toFixed(3)),hue:n.hue},`${n.variableName}-l`)}function i(n){const t=Math.max(n.lightness-.12*n.lightness,.02),a=n.chroma*(1-.15*(t-n.lightness));return new e({lightness:t,chroma:a,hue:n.hue},`${n.variableName}-d`)}function s(n){const t=Math.min(n.lightness+.65*(1-n.lightness),.93),a=.55*n.chroma*(1-.08*(t-n.lightness)),r=n.hue>=70&&n.hue<=162?5:-3,i=n.hue+r;return new e({lightness:t,chroma:Number(a.toFixed(3)),hue:i},`${n.variableName}-subtle`)}function h(n){const t=Math.max(n.lightness-.35,.22),a=Math.min(1.6*n.chroma,.28);return new e({lightness:Number(t.toFixed(3)),chroma:Number(a.toFixed(3)),hue:n.hue},`${n.variableName}-contrast`)}function l(e){return{main:e,hover:t(e),pressed:a(e),light:r(e),dark:i(e),subtle:s(e),contrast:h(e)}}const u=new e({lightness:.6,chroma:.26,hue:256},"--jb-primary"),o=new e({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),c=new e({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),m=new e({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),g=new e({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),b={single:{black:new e({lightness:.14,chroma:0,hue:0},"--jb-black"),white:new e({lightness:1,chroma:0,hue:0},"--jb-white"),highlight:new e({lightness:.93,chroma:.2302,hue:125.18},"--jb-highlight")},neutral:[n(0),n(1),n(2),n(3),n(4),n(5),n(6),n(7),n(8),n(9),n(10)],primary:l(u),secondary:l(o),yellow:l(c),green:l(m),red:l(g)};function d(e){try{const{value:n,...t}=e;window.CSS.registerProperty({...t}),y(e.name,n)}catch(e){}}function y(e,n){try{n&&(document.documentElement.style.getPropertyValue(e)||document.documentElement.style.setProperty(e,n))}catch(e){}}function w(e,n){d({name:n??e.variableName,syntax:"<color>",inherits:!0,initialValue:e.value})}function p(){var e;!function(e){w(e.neutral[0],"--jb-neutral"),w(e.primary.main),w(e.secondary.main),w(e.single.black),w(e.single.white),w(e.single.highlight),w(e.yellow.main),w(e.green.main),w(e.red.main),w(e.red.main);for(let n=1;n<=10;n++)w(e.neutral[n])}(b),w((e=b).single.black,"--jb-text-primary"),w(e.neutral[7],"--jb-text-secondary"),w(e.single.white,"--jb-text-contrast")}function v(e){function n(e){document.documentElement.style.setProperty(e.variableName,e.value)}function t(e){n(e.main),n(e.light),n(e.dark),n(e.contrast),n(e.subtle),n(e.hover),n(e.pressed)}e.primary&&t(e.primary),e.secondary&&t(e.secondary),e.green&&t(e.green),e.red&&t(e.red),e.yellow&&t(e.yellow)}function x(n){const t={};return Object.keys(n).forEach((a=>{const r=l(new e(n[a],`---jb-${a}`));t[a]=r})),t}function f(){d({name:"--jb-radius",inherits:!0,value:"1rem",initialValue:"16px",syntax:"<length-percentage>"}),d({name:"--jb-radius-xs",inherits:!0,value:"0.5rem",initialValue:"8px",syntax:"<length-percentage>"}),d({name:"--jb-radius-sm",inherits:!0,value:"0.75rem",initialValue:"12px",syntax:"<length-percentage>"}),d({name:"--jb-radius-lg",inherits:!0,value:"1.25rem",initialValue:"20px",syntax:"<length-percentage>"}),d({name:"--jb-radius-xl",inherits:!0,value:"1.5rem",initialValue:"24px",syntax:"<length-percentage>"})}function j(){f(),p()}export{l as createColorGroup,x as createThemeColor,b as defaultColors,p as defineColors,f as defineSizes,h as getContrastColor,i as getDarkerColor,t as getHoverColor,r as getLighterColor,n as getNeutralColor,a as getPressedColor,s as getSubtleColor,d as registerCssProperty,j as registerDefaultVariables,v as setColors,y as setCssProperty};
//# sourceMappingURL=index.js.map