jb-core 0.13.0 → 0.14.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/theme/dist/color/utils.d.ts +4 -0
- package/theme/dist/color/utils.d.ts.map +1 -1
- package/theme/dist/index.cjs.js +1 -1
- package/theme/dist/index.cjs.js.br +0 -0
- package/theme/dist/index.cjs.js.gz +0 -0
- package/theme/dist/index.cjs.js.map +1 -1
- package/theme/dist/index.d.ts +3 -0
- package/theme/dist/index.d.ts.map +1 -1
- package/theme/dist/index.js +1 -1
- package/theme/dist/index.js.br +0 -0
- package/theme/dist/index.js.gz +0 -0
- package/theme/dist/index.js.map +1 -1
- package/theme/dist/index.umd.js +1 -1
- package/theme/dist/index.umd.js.br +0 -0
- package/theme/dist/index.umd.js.gz +0 -0
- package/theme/dist/index.umd.js.map +1 -1
- package/theme/dist/sizes/index.d.ts +2 -0
- package/theme/dist/sizes/index.d.ts.map +1 -0
- package/theme/dist/theme.d.ts +2 -0
- package/theme/dist/theme.d.ts.map +1 -0
- package/theme/dist/utils.d.ts +5 -1
- package/theme/dist/utils.d.ts.map +1 -1
- package/theme/lib/color/index.ts +15 -15
- package/theme/lib/index.ts +4 -1
- package/theme/lib/sizes/index.ts +43 -0
- package/theme/lib/theme.ts +7 -0
- package/theme/lib/utils.ts +21 -3
- package/theme/stories/colors.mdx +73 -7
- package/theme/dist/colors.d.ts +0 -45
- package/theme/dist/colors.d.ts.map +0 -1
package/package.json
CHANGED
|
@@ -5,5 +5,9 @@ export declare function getPressedColor(color: JBColor): JBColor;
|
|
|
5
5
|
export declare function getLighterColor(color: JBColor): JBColor;
|
|
6
6
|
export declare function getDarkerColor(color: JBColor): JBColor;
|
|
7
7
|
export declare function getSubtleColor(color: JBColor): JBColor;
|
|
8
|
+
/**
|
|
9
|
+
* contrast is the color mostly used for text on top of the background. in light mode it is really dark and in dark mode it is really light.
|
|
10
|
+
* It is not the same as the text color, and can be used elsewhere too.
|
|
11
|
+
*/
|
|
8
12
|
export declare function getContrastColor(color: JBColor): JBColor;
|
|
9
13
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/color/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../lib/color/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAKrC,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,WAE5C;AACD,wBAAgB,aAAa,CAAC,KAAK,EAAE,OAAO,WAE3C;AACD,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,WAE7C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,OAAO,WAQ7C;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,WAQ5C;AACD,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,WAe5C;AACD;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,OAAO,WAoB9C"}
|
package/theme/dist/index.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=class{get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,a){this.variableName=a,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function a(a){return new e({lightness:6*(3+1.3*a)*.01,chroma:.001*(14+.09*a),hue:258.36},`--jb-neutral-${a}`)}function
|
|
1
|
+
"use strict";var e=class{get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,a){this.variableName=a,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function a(a){return new e({lightness:6*(3+1.3*a)*.01,chroma:.001*(14+.09*a),hue:258.36},`--jb-neutral-${a}`)}function n(a){return new e({lightness:a.lightness+.07,chroma:a.chroma+.07,hue:a.hue},`${a.variableName}-hover`)}function i(a){return new e({lightness:a.lightness-.1,chroma:a.chroma-.05,hue:a.hue},`${a.variableName}-pressed`)}function t(a){const n=Math.min(a.lightness+.12*(1-a.lightness),.985),i=a.chroma*(1-.15*(n-a.lightness));return new e({lightness:n,chroma:Number(i.toFixed(3)),hue:a.hue},`${a.variableName}-l`)}function r(a){const n=Math.max(a.lightness-.12*a.lightness,.02),i=a.chroma*(1-.15*(n-a.lightness));return new e({lightness:n,chroma:i,hue:a.hue},`${a.variableName}-d`)}function l(a){const n=Math.min(a.lightness+.65*(1-a.lightness),.93),i=.55*a.chroma*(1-.08*(n-a.lightness)),t=a.hue>=70&&a.hue<=162?5:-3,r=a.hue+t;return new e({lightness:n,chroma:Number(i.toFixed(3)),hue:r},`${a.variableName}-subtle`)}function s(a){const n=Math.max(a.lightness-.35,.22),i=Math.min(1.6*a.chroma,.28);return new e({lightness:Number(n.toFixed(3)),chroma:Number(i.toFixed(3)),hue:a.hue},`${a.variableName}-contrast`)}const h=new e({lightness:.6,chroma:.26,hue:256},"--jb-primary"),o=new e({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),u=new e({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),m=new e({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),c=new e({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),g={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:[a(0),a(1),a(2),a(3),a(4),a(5),a(6),a(7),a(8),a(9),a(10)],primary:{main:h,hover:n(h),pressed:i(h),light:t(h),dark:r(h),subtle:l(h),contrast:s(h)},secondary:{main:o,hover:n(o),pressed:i(o),light:t(o),dark:r(o),subtle:l(o),contrast:s(o)},yellow:{main:u,hover:n(u),pressed:i(u),light:t(u),dark:r(u),subtle:l(u),contrast:s(u)},green:{main:m,hover:n(m),pressed:i(m),light:t(m),dark:r(m),subtle:l(m),contrast:s(m)},red:{main:c,hover:n(c),pressed:i(c),light:t(c),dark:r(c),subtle:l(c),contrast:s(c)}};function b(e){try{const{value:a,...n}=e;window.CSS.registerProperty({...n}),v(e.name,a)}catch(e){}}function v(e,a){try{a&&(document.documentElement.style.getPropertyValue(e)||document.documentElement.style.setProperty(e,a))}catch(e){}}function y(){var e;!function(e){b({name:e.primary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.primary.main.value}),b({name:e.secondary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.secondary.main.value}),b({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value}),b({name:e.single.black.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.black.value}),b({name:e.single.white.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.white.value}),b({name:e.single.highlight.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.highlight.value}),b({name:e.yellow.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.yellow.main.value}),b({name:e.green.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.green.main.value}),b({name:e.red.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.red.main.value}),b({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value});for(let a=1;a<=10;a++)b({name:e.neutral[a].variableName,syntax:"<color>",inherits:!0,initialValue:e.neutral[a].value})}(g),b({name:"--jb-text-primary",syntax:"<color>",inherits:!0,initialValue:(e=g).single.black.value}),b({name:"--jb-text-secondary",syntax:"<color>",inherits:!0,initialValue:e.neutral[7].value}),b({name:"--jb-text-contrast",syntax:"<color>",inherits:!0,initialValue:e.single.white.value})}function x(){b({name:"--jb-radius",inherits:!0,syntax:"<length-percentage>",value:"1rem",initialValue:"16px"}),b({name:"--jb-radius-xs",inherits:!0,value:"0.5rem",initialValue:"8px",syntax:"<length-percentage>"}),b({name:"--jb-radius-sm",inherits:!0,value:"0.75rem",initialValue:"12px",syntax:"<length-percentage>"}),b({name:"--jb-radius-lg",inherits:!0,value:"1.25rem",initialValue:"20px",syntax:"<length-percentage>"}),b({name:"--jb-radius-xl",inherits:!0,value:"1.5rem",initialValue:"24px",syntax:"<length-percentage>"})}exports.defaultColors=g,exports.defineColors=y,exports.defineSizes=x,exports.registerCssProperty=b,exports.registerDefaultVariables=function(){x(),y()},exports.setCssProperty=v;
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
|
Binary file
|
|
Binary file
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","names":[],"sources":["../lib/color/jb-color.ts","../lib/color/utils.ts","../lib/color/constants.ts","../lib/utils.ts","../lib/color/index.ts"],"sourcesContent":["","","","",""],"mappings":"iBAAa,EAAP,MAKJ,SAAI,GACF,MAAA,SAAgB,KAAK,aAAa,KAAK,UAAU,KAAK,MACvD,CACD,WAAA,CAAY,EAA8D,GACxE,KAAK,aAAe,EACpB,KAAK,UAAY,EAAY,UAC7B,KAAK,OAAS,EAAY,OAC1B,KAAK,IAAM,EAAY,GACxB,
|
|
1
|
+
{"version":3,"file":"index.cjs.js","names":[],"sources":["../lib/color/jb-color.ts","../lib/color/utils.ts","../lib/color/constants.ts","../lib/utils.ts","../lib/color/index.ts","../lib/sizes/index.ts","../lib/theme.ts"],"sourcesContent":["","","","","","",""],"mappings":"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"}
|
package/theme/dist/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}
|
package/theme/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var e=class{get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,a){this.variableName=a,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function a(a){return new e({lightness:6*(3+1.3*a)*.01,chroma:.001*(14+.09*a),hue:258.36},`--jb-neutral-${a}`)}function
|
|
1
|
+
var e=class{get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,a){this.variableName=a,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function a(a){return new e({lightness:6*(3+1.3*a)*.01,chroma:.001*(14+.09*a),hue:258.36},`--jb-neutral-${a}`)}function n(a){return new e({lightness:a.lightness+.07,chroma:a.chroma+.07,hue:a.hue},`${a.variableName}-hover`)}function i(a){return new e({lightness:a.lightness-.1,chroma:a.chroma-.05,hue:a.hue},`${a.variableName}-pressed`)}function t(a){const n=Math.min(a.lightness+.12*(1-a.lightness),.985),i=a.chroma*(1-.15*(n-a.lightness));return new e({lightness:n,chroma:Number(i.toFixed(3)),hue:a.hue},`${a.variableName}-l`)}function l(a){const n=Math.max(a.lightness-.12*a.lightness,.02),i=a.chroma*(1-.15*(n-a.lightness));return new e({lightness:n,chroma:i,hue:a.hue},`${a.variableName}-d`)}function r(a){const n=Math.min(a.lightness+.65*(1-a.lightness),.93),i=.55*a.chroma*(1-.08*(n-a.lightness)),t=a.hue>=70&&a.hue<=162?5:-3,l=a.hue+t;return new e({lightness:n,chroma:Number(i.toFixed(3)),hue:l},`${a.variableName}-subtle`)}function s(a){const n=Math.max(a.lightness-.35,.22),i=Math.min(1.6*a.chroma,.28);return new e({lightness:Number(n.toFixed(3)),chroma:Number(i.toFixed(3)),hue:a.hue},`${a.variableName}-contrast`)}const h=new e({lightness:.6,chroma:.26,hue:256},"--jb-primary"),u=new e({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),o=new e({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),m=new e({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),c=new e({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),g={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:[a(0),a(1),a(2),a(3),a(4),a(5),a(6),a(7),a(8),a(9),a(10)],primary:{main:h,hover:n(h),pressed:i(h),light:t(h),dark:l(h),subtle:r(h),contrast:s(h)},secondary:{main:u,hover:n(u),pressed:i(u),light:t(u),dark:l(u),subtle:r(u),contrast:s(u)},yellow:{main:o,hover:n(o),pressed:i(o),light:t(o),dark:l(o),subtle:r(o),contrast:s(o)},green:{main:m,hover:n(m),pressed:i(m),light:t(m),dark:l(m),subtle:r(m),contrast:s(m)},red:{main:c,hover:n(c),pressed:i(c),light:t(c),dark:l(c),subtle:r(c),contrast:s(c)}};function b(e){try{const{value:a,...n}=e;window.CSS.registerProperty({...n}),v(e.name,a)}catch(e){}}function v(e,a){try{a&&(document.documentElement.style.getPropertyValue(e)||document.documentElement.style.setProperty(e,a))}catch(e){}}function y(){var e;!function(e){b({name:e.primary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.primary.main.value}),b({name:e.secondary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.secondary.main.value}),b({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value}),b({name:e.single.black.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.black.value}),b({name:e.single.white.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.white.value}),b({name:e.single.highlight.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.highlight.value}),b({name:e.yellow.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.yellow.main.value}),b({name:e.green.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.green.main.value}),b({name:e.red.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.red.main.value}),b({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value});for(let a=1;a<=10;a++)b({name:e.neutral[a].variableName,syntax:"<color>",inherits:!0,initialValue:e.neutral[a].value})}(g),b({name:"--jb-text-primary",syntax:"<color>",inherits:!0,initialValue:(e=g).single.black.value}),b({name:"--jb-text-secondary",syntax:"<color>",inherits:!0,initialValue:e.neutral[7].value}),b({name:"--jb-text-contrast",syntax:"<color>",inherits:!0,initialValue:e.single.white.value})}function x(){b({name:"--jb-radius",inherits:!0,syntax:"<length-percentage>",value:"1rem",initialValue:"16px"}),b({name:"--jb-radius-xs",inherits:!0,value:"0.5rem",initialValue:"8px",syntax:"<length-percentage>"}),b({name:"--jb-radius-sm",inherits:!0,value:"0.75rem",initialValue:"12px",syntax:"<length-percentage>"}),b({name:"--jb-radius-lg",inherits:!0,value:"1.25rem",initialValue:"20px",syntax:"<length-percentage>"}),b({name:"--jb-radius-xl",inherits:!0,value:"1.5rem",initialValue:"24px",syntax:"<length-percentage>"})}function d(){x(),y()}export{g as defaultColors,y as defineColors,x as defineSizes,b as registerCssProperty,d as registerDefaultVariables,v as setCssProperty};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/theme/dist/index.js.br
CHANGED
|
Binary file
|
package/theme/dist/index.js.gz
CHANGED
|
Binary file
|
package/theme/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../lib/color/jb-color.ts","../lib/color/utils.ts","../lib/color/constants.ts","../lib/utils.ts","../lib/color/index.ts"],"sourcesContent":["","","","",""],"mappings":"IAAa,EAAP,MAKJ,SAAI,GACF,MAAA,SAAgB,KAAK,aAAa,KAAK,UAAU,KAAK,MACvD,CACD,WAAA,CAAY,EAA8D,GACxE,KAAK,aAAe,EACpB,KAAK,UAAY,EAAY,UAC7B,KAAK,OAAS,EAAY,OAC1B,KAAK,IAAM,EAAY,GACxB,
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../lib/color/jb-color.ts","../lib/color/utils.ts","../lib/color/constants.ts","../lib/utils.ts","../lib/color/index.ts","../lib/sizes/index.ts","../lib/theme.ts"],"sourcesContent":["","","","","","",""],"mappings":"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"}
|
package/theme/dist/index.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?a(exports):"function"==typeof define&&define.amd?define(["exports"],a):a((e="undefined"!=typeof globalThis?globalThis:e||self).JBCoreTheme={})}(this,(function(e){"use strict";var a=class{get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,a){this.variableName=a,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function
|
|
1
|
+
!function(e,a){"object"==typeof exports&&"undefined"!=typeof module?a(exports):"function"==typeof define&&define.amd?define(["exports"],a):a((e="undefined"!=typeof globalThis?globalThis:e||self).JBCoreTheme={})}(this,(function(e){"use strict";var a=class{get value(){return`oklch(${this.lightness} ${this.chroma} ${this.hue})`}constructor(e,a){this.variableName=a,this.lightness=e.lightness,this.chroma=e.chroma,this.hue=e.hue}};function n(e){return new a({lightness:6*(3+1.3*e)*.01,chroma:.001*(14+.09*e),hue:258.36},`--jb-neutral-${e}`)}function i(e){return new a({lightness:e.lightness+.07,chroma:e.chroma+.07,hue:e.hue},`${e.variableName}-hover`)}function t(e){return new a({lightness:e.lightness-.1,chroma:e.chroma-.05,hue:e.hue},`${e.variableName}-pressed`)}function r(e){const n=Math.min(e.lightness+.12*(1-e.lightness),.985),i=e.chroma*(1-.15*(n-e.lightness));return new a({lightness:n,chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-l`)}function l(e){const n=Math.max(e.lightness-.12*e.lightness,.02),i=e.chroma*(1-.15*(n-e.lightness));return new a({lightness:n,chroma:i,hue:e.hue},`${e.variableName}-d`)}function s(e){const n=Math.min(e.lightness+.65*(1-e.lightness),.93),i=.55*e.chroma*(1-.08*(n-e.lightness)),t=e.hue>=70&&e.hue<=162?5:-3,r=e.hue+t;return new a({lightness:n,chroma:Number(i.toFixed(3)),hue:r},`${e.variableName}-subtle`)}function h(e){const n=Math.max(e.lightness-.35,.22),i=Math.min(1.6*e.chroma,.28);return new a({lightness:Number(n.toFixed(3)),chroma:Number(i.toFixed(3)),hue:e.hue},`${e.variableName}-contrast`)}const o=new a({lightness:.6,chroma:.26,hue:256},"--jb-primary"),u=new a({lightness:.6,chroma:.26,hue:286},"--jb-secondary"),m=new a({lightness:.75,chroma:.18,hue:70},"--jb-yellow"),c=new a({lightness:.68,chroma:.1484,hue:162.1},"--jb-green"),g=new a({lightness:.6,chroma:.22,hue:23.21},"--jb-red"),b={single:{black:new a({lightness:.14,chroma:0,hue:0},"--jb-black"),white:new a({lightness:1,chroma:0,hue:0},"--jb-white"),highlight:new a({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:{main:o,hover:i(o),pressed:t(o),light:r(o),dark:l(o),subtle:s(o),contrast:h(o)},secondary:{main:u,hover:i(u),pressed:t(u),light:r(u),dark:l(u),subtle:s(u),contrast:h(u)},yellow:{main:m,hover:i(m),pressed:t(m),light:r(m),dark:l(m),subtle:s(m),contrast:h(m)},green:{main:c,hover:i(c),pressed:t(c),light:r(c),dark:l(c),subtle:s(c),contrast:h(c)},red:{main:g,hover:i(g),pressed:t(g),light:r(g),dark:l(g),subtle:s(g),contrast:h(g)}};function d(e){try{const{value:a,...n}=e;window.CSS.registerProperty({...n}),y(e.name,a)}catch(e){}}function y(e,a){try{a&&(document.documentElement.style.getPropertyValue(e)||document.documentElement.style.setProperty(e,a))}catch(e){}}function v(){var e;!function(e){d({name:e.primary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.primary.main.value}),d({name:e.secondary.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.secondary.main.value}),d({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value}),d({name:e.single.black.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.black.value}),d({name:e.single.white.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.white.value}),d({name:e.single.highlight.variableName,syntax:"<color>",inherits:!0,initialValue:e.single.highlight.value}),d({name:e.yellow.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.yellow.main.value}),d({name:e.green.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.green.main.value}),d({name:e.red.main.variableName,syntax:"<color>",inherits:!0,initialValue:e.red.main.value}),d({name:"--jb-neutral",syntax:"<color>",inherits:!0,initialValue:e.neutral[0].value});for(let a=1;a<=10;a++)d({name:e.neutral[a].variableName,syntax:"<color>",inherits:!0,initialValue:e.neutral[a].value})}(b),d({name:"--jb-text-primary",syntax:"<color>",inherits:!0,initialValue:(e=b).single.black.value}),d({name:"--jb-text-secondary",syntax:"<color>",inherits:!0,initialValue:e.neutral[7].value}),d({name:"--jb-text-contrast",syntax:"<color>",inherits:!0,initialValue:e.single.white.value})}function x(){d({name:"--jb-radius",inherits:!0,syntax:"<length-percentage>",value:"1rem",initialValue:"16px"}),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>"})}e.defaultColors=b,e.defineColors=v,e.defineSizes=x,e.registerCssProperty=d,e.registerDefaultVariables=function(){x(),v()},e.setCssProperty=y}));
|
|
2
2
|
//# sourceMappingURL=index.umd.js.map
|
|
Binary file
|
|
Binary file
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.umd.js","names":[],"sources":["../lib/color/jb-color.ts","../lib/color/utils.ts","../lib/color/constants.ts","../lib/utils.ts","../lib/color/index.ts"],"sourcesContent":["","","","",""],"mappings":"uPAAa,EAAP,MAKJ,SAAI,GACF,MAAA,SAAgB,KAAK,aAAa,KAAK,UAAU,KAAK,MACvD,CACD,WAAA,CAAY,EAA8D,GACxE,KAAK,aAAe,EACpB,KAAK,UAAY,EAAY,UAC7B,KAAK,OAAS,EAAY,OAC1B,KAAK,IAAM,EAAY,GACxB,
|
|
1
|
+
{"version":3,"file":"index.umd.js","names":[],"sources":["../lib/color/jb-color.ts","../lib/color/utils.ts","../lib/color/constants.ts","../lib/utils.ts","../lib/color/index.ts","../lib/sizes/index.ts","../lib/theme.ts"],"sourcesContent":["","","","","","",""],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/sizes/index.ts"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,SAE1B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../lib/theme.ts"],"names":[],"mappings":"AAGA,wBAAgB,wBAAwB,SAGvC"}
|
package/theme/dist/utils.d.ts
CHANGED
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type PropertyDefinitionParameter = PropertyDefinition & {
|
|
2
|
+
value?: string;
|
|
3
|
+
};
|
|
4
|
+
export declare function registerCssProperty(parameter: PropertyDefinitionParameter): void;
|
|
5
|
+
export declare function setCssProperty(name: string, value?: string): void;
|
|
2
6
|
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../lib/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,cAAc,CAAC,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../lib/utils.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GAAG,kBAAkB,GAAG;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAA;AAED,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,2BAA2B,QAUzE;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,QAU1D"}
|
package/theme/lib/color/index.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { defaultColors } from "./constants";
|
|
2
|
-
import {
|
|
2
|
+
import { registerCssProperty } from "../utils";
|
|
3
3
|
|
|
4
4
|
export type JBThemeColors = typeof defaultColors;
|
|
5
5
|
export {defaultColors};
|
|
@@ -8,68 +8,68 @@ export function defineColors() {
|
|
|
8
8
|
defineTextColors(defaultColors);
|
|
9
9
|
}
|
|
10
10
|
function defineColorCodes(colors:JBThemeColors){
|
|
11
|
-
|
|
11
|
+
registerCssProperty({
|
|
12
12
|
name: colors.primary.main.variableName,
|
|
13
13
|
syntax: "<color>",
|
|
14
14
|
inherits: true,
|
|
15
15
|
initialValue: colors.primary.main.value,
|
|
16
16
|
});
|
|
17
|
-
|
|
17
|
+
registerCssProperty({
|
|
18
18
|
name: colors.secondary.main.variableName,
|
|
19
19
|
syntax: "<color>",
|
|
20
20
|
inherits: true,
|
|
21
21
|
initialValue: colors.secondary.main.value,
|
|
22
22
|
});
|
|
23
|
-
|
|
23
|
+
registerCssProperty({
|
|
24
24
|
name: "--jb-neutral",
|
|
25
25
|
syntax: "<color>",
|
|
26
26
|
inherits: true,
|
|
27
27
|
initialValue: colors.neutral[0].value,
|
|
28
28
|
});
|
|
29
|
-
|
|
29
|
+
registerCssProperty({
|
|
30
30
|
name: colors.single.black.variableName,
|
|
31
31
|
syntax: "<color>",
|
|
32
32
|
inherits: true,
|
|
33
33
|
initialValue: colors.single.black.value,
|
|
34
34
|
});
|
|
35
|
-
|
|
35
|
+
registerCssProperty({
|
|
36
36
|
name: colors.single.white.variableName,
|
|
37
37
|
syntax: "<color>",
|
|
38
38
|
inherits: true,
|
|
39
39
|
initialValue: colors.single.white.value,
|
|
40
40
|
});
|
|
41
|
-
|
|
41
|
+
registerCssProperty({
|
|
42
42
|
name: colors.single.highlight.variableName,
|
|
43
43
|
syntax: "<color>",
|
|
44
44
|
inherits: true,
|
|
45
45
|
initialValue: colors.single.highlight.value,
|
|
46
46
|
});
|
|
47
|
-
|
|
47
|
+
registerCssProperty({
|
|
48
48
|
name: colors.yellow.main.variableName,
|
|
49
49
|
syntax: "<color>",
|
|
50
50
|
inherits: true,
|
|
51
51
|
initialValue: colors.yellow.main.value,
|
|
52
52
|
});
|
|
53
|
-
|
|
53
|
+
registerCssProperty({
|
|
54
54
|
name: colors.green.main.variableName,
|
|
55
55
|
syntax: "<color>",
|
|
56
56
|
inherits: true,
|
|
57
57
|
initialValue: colors.green.main.value,
|
|
58
58
|
});
|
|
59
|
-
|
|
59
|
+
registerCssProperty({
|
|
60
60
|
name: colors.red.main.variableName,
|
|
61
61
|
syntax: "<color>",
|
|
62
62
|
inherits: true,
|
|
63
63
|
initialValue: colors.red.main.value,
|
|
64
64
|
});
|
|
65
|
-
|
|
65
|
+
registerCssProperty({
|
|
66
66
|
name: `--jb-neutral`,
|
|
67
67
|
syntax: "<color>",
|
|
68
68
|
inherits: true,
|
|
69
69
|
initialValue: colors.neutral[0].value,
|
|
70
70
|
});
|
|
71
71
|
for(let i=1;i<=10;i++){
|
|
72
|
-
|
|
72
|
+
registerCssProperty({
|
|
73
73
|
name: colors.neutral[i].variableName,
|
|
74
74
|
syntax: "<color>",
|
|
75
75
|
inherits: true,
|
|
@@ -78,19 +78,19 @@ function defineColorCodes(colors:JBThemeColors){
|
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
function defineTextColors(colors:JBThemeColors) {
|
|
81
|
-
|
|
81
|
+
registerCssProperty({
|
|
82
82
|
name: "--jb-text-primary",
|
|
83
83
|
syntax: "<color>",
|
|
84
84
|
inherits: true,
|
|
85
85
|
initialValue: colors.single.black.value,
|
|
86
86
|
});
|
|
87
|
-
|
|
87
|
+
registerCssProperty({
|
|
88
88
|
name: "--jb-text-secondary",
|
|
89
89
|
syntax: "<color>",
|
|
90
90
|
inherits: true,
|
|
91
91
|
initialValue: colors.neutral[7].value,
|
|
92
92
|
});
|
|
93
|
-
|
|
93
|
+
registerCssProperty({
|
|
94
94
|
name: "--jb-text-contrast",
|
|
95
95
|
syntax: "<color>",
|
|
96
96
|
inherits: true,
|
package/theme/lib/index.ts
CHANGED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { registerCssProperty } from "../utils.js";
|
|
2
|
+
|
|
3
|
+
export function defineSizes(){
|
|
4
|
+
defineRadiusVariables();
|
|
5
|
+
}
|
|
6
|
+
function defineRadiusVariables(){
|
|
7
|
+
// we use px instead of rem because css variables are not support rem as default value and we need to set rem value in a root element
|
|
8
|
+
registerCssProperty({
|
|
9
|
+
name:'--jb-radius',
|
|
10
|
+
inherits:true,
|
|
11
|
+
value:'1rem',
|
|
12
|
+
initialValue:'16px',
|
|
13
|
+
syntax:'<length-percentage>',
|
|
14
|
+
});
|
|
15
|
+
registerCssProperty({
|
|
16
|
+
name:'--jb-radius-xs',
|
|
17
|
+
inherits:true,
|
|
18
|
+
value:`0.5rem`,
|
|
19
|
+
initialValue:'8px',
|
|
20
|
+
syntax:'<length-percentage>'
|
|
21
|
+
});
|
|
22
|
+
registerCssProperty({
|
|
23
|
+
name:'--jb-radius-sm',
|
|
24
|
+
inherits:true,
|
|
25
|
+
value:`0.75rem`,
|
|
26
|
+
initialValue:'12px',
|
|
27
|
+
syntax:'<length-percentage>'
|
|
28
|
+
});
|
|
29
|
+
registerCssProperty({
|
|
30
|
+
name:'--jb-radius-lg',
|
|
31
|
+
inherits:true,
|
|
32
|
+
value:`1.25rem`,
|
|
33
|
+
initialValue:'20px',
|
|
34
|
+
syntax:'<length-percentage>'
|
|
35
|
+
});
|
|
36
|
+
registerCssProperty({
|
|
37
|
+
name:'--jb-radius-xl',
|
|
38
|
+
inherits:true,
|
|
39
|
+
value:`1.5rem`,
|
|
40
|
+
initialValue:'24px',
|
|
41
|
+
syntax:'<length-percentage>'
|
|
42
|
+
});
|
|
43
|
+
}
|
package/theme/lib/utils.ts
CHANGED
|
@@ -1,9 +1,27 @@
|
|
|
1
|
-
export
|
|
1
|
+
export type PropertyDefinitionParameter = PropertyDefinition & {
|
|
2
|
+
value?: string,
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
export function registerCssProperty(parameter: PropertyDefinitionParameter) {
|
|
2
6
|
try {
|
|
7
|
+
const {value, ...rest} = parameter;
|
|
3
8
|
window.CSS.registerProperty({
|
|
4
|
-
...
|
|
9
|
+
...rest
|
|
5
10
|
});
|
|
11
|
+
setCssProperty(parameter.name, value);
|
|
6
12
|
} catch (e) {
|
|
7
|
-
// if property is already defined
|
|
13
|
+
// if property is already defined or any other type of error
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export function setCssProperty(name: string, value?: string) {
|
|
18
|
+
try {
|
|
19
|
+
if(value) {
|
|
20
|
+
if(!document.documentElement.style.getPropertyValue(name)){
|
|
21
|
+
document.documentElement.style.setProperty(name, value);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
} catch (e) {
|
|
25
|
+
//
|
|
8
26
|
}
|
|
9
27
|
}
|
package/theme/stories/colors.mdx
CHANGED
|
@@ -15,6 +15,60 @@ import {getNeutralColor, defaultColors as colors} from 'jb-core/theme';
|
|
|
15
15
|
<ColorItem title="warning" description="" colors={{'main':colors.yellow.main.value, 'lighter':colors.yellow.light.value, dark:colors.yellow.dark.value,'subtle':colors.yellow.subtle.value, 'contrast':colors.yellow.contrast.value,'hover':colors.yellow.hover.value, 'pressed':colors.yellow.pressed.value}}/>
|
|
16
16
|
</ColorPalette>
|
|
17
17
|
|
|
18
|
+
|
|
19
|
+
<Subheading>Customize Component colors</Subheading>
|
|
20
|
+
|
|
21
|
+
<p>in jb design system you have 3 way to change the components parts colors</p>
|
|
22
|
+
- <p>1. **general approach:** set the color palette variables base on your app design.</p>
|
|
23
|
+
- <p>2. **specific part approach:** set the color variables of specific part of the component.</p>
|
|
24
|
+
- <p>3. **component approach:** set the color variables of specific component.</p>
|
|
25
|
+
|
|
26
|
+
<p> for the first approach you can use the `--jb-*` variables of the color palette in your css. for example:</p>
|
|
27
|
+
```css
|
|
28
|
+
:root{
|
|
29
|
+
--jb-primary: oklch(0.6 0.26 256);
|
|
30
|
+
--jb-secondary: oklch(0.6 0.26 286);
|
|
31
|
+
--jb-green: oklch(0.6 0.26 120);
|
|
32
|
+
--jb-red: oklch(0.6 0.26 0);
|
|
33
|
+
--jb-yellow: oklch(0.6 0.26 60);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
<p>in this approach all components part that use primary color will use your primary color instead.</p>
|
|
37
|
+
<p> remember you can set this variable in every scope in your app like in your app root or in your page root. this will allow you to have multiple palette ot theme in one app.</p>
|
|
38
|
+
<p>for the second approach you can use the `--jb-component-name-*` variables</p>
|
|
39
|
+
<p>in this case component will override it's default color value for that specific parts. for example jb-input dont have any border by default but you can set it like this</p>
|
|
40
|
+
```css
|
|
41
|
+
:root{
|
|
42
|
+
--jb-input-border-color: oklch(0.6 0.26 256);
|
|
43
|
+
/*or*/
|
|
44
|
+
--jb-input-border-color: var(--jb-primary);
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
<p>this will set the border color of the jb-input component to your primary color.</p>
|
|
48
|
+
<p>for the third approach you can use the `component-name` selector and set direct variable within</p>
|
|
49
|
+
```css
|
|
50
|
+
jb-input{
|
|
51
|
+
--border-color: oklch(0.6 0.26 256);
|
|
52
|
+
/*or*/
|
|
53
|
+
--border-color: var(--jb-primary);
|
|
54
|
+
}
|
|
55
|
+
```
|
|
56
|
+
<p>this will be most useful when you want to set the variable or style in some specific state</p>
|
|
57
|
+
<p>for example you can set the border color of the jb-input component to your primary color when it is focused.</p>
|
|
58
|
+
```css
|
|
59
|
+
jb-input:focus{
|
|
60
|
+
--border-color: oklch(0.6 0.26 256);
|
|
61
|
+
/*or*/
|
|
62
|
+
--border-color: var(--jb-primary);
|
|
63
|
+
}
|
|
64
|
+
/*or show red border when input is in invalid state*/
|
|
65
|
+
jb-input:state(invalid){
|
|
66
|
+
--border-color: oklch(0.6 0.26 0);
|
|
67
|
+
/*or*/
|
|
68
|
+
--border-color: var(--jb-red);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
18
72
|
<Subheading>Color Rules</Subheading>
|
|
19
73
|
|
|
20
74
|
we use `oklch()` color space for all colors in our design system. This allows us to create a consistent and harmonious color palette that is easy to use and understand.
|
|
@@ -27,17 +81,29 @@ for pressed state we subtract `0.1` to lightness and `0.05` to chroma so it gets
|
|
|
27
81
|
<Subheading>Define custom colors</Subheading>
|
|
28
82
|
<br/>
|
|
29
83
|
<p>
|
|
30
|
-
|
|
84
|
+
we use `JBColor` type for all colors in our design system. This allows us to create a consistent and harmonious color palette that is easy to use and understand.
|
|
85
|
+
to creating your own custom color you must use `oklch()` color space for all colors in our design system. This allows us to create a consistent and harmonious color palette that is easy to use and understand.
|
|
86
|
+
for example primary color is `oklch(0.6 0.26 256)` which is a blue color with a lightness of 60%, chroma of 0.26, and hue of 256 degrees.
|
|
87
|
+
</p>
|
|
88
|
+
<p>
|
|
89
|
+
after you define your color create a instance of `JBColor` class by providing the color you want to use. for example:
|
|
90
|
+
|
|
91
|
+
```ts
|
|
92
|
+
const primary = new JBColor({lightness:0.6,chroma:0.26,hue:256},'--jb-primary');
|
|
93
|
+
```
|
|
94
|
+
after you all your base colors you can create a color variants base on your base color. for example:
|
|
31
95
|
</p>
|
|
32
96
|
<p>
|
|
33
97
|
there are several function that will give you the color you want:
|
|
34
98
|
- `getNeutralColor(lightness:number)` will give you a neutral color based on the lightness value you provide. it will return a color that is in the range of 0 to 10.
|
|
35
|
-
- `getHoverColor(
|
|
36
|
-
- `getPressedColor(
|
|
37
|
-
- `getLighterColor(
|
|
38
|
-
- `getDarkerColor(
|
|
99
|
+
- `getHoverColor(color:JBColor)` will give you a hover color based on the color you provide. it will return a color that is a little lighter and brighter than the original color.
|
|
100
|
+
- `getPressedColor(color:JBColor)` will give you a pressed color based on the color you provide. it will return a color that is a little darker and dimmer than the original color.
|
|
101
|
+
- `getLighterColor(color:JBColor)` will give you a lighter color based on the color you provide. it will return a color that is a little lighter than the original color.
|
|
102
|
+
- `getDarkerColor(color:JBColor)` will give you a darker color based on the color you provide. it will return a color that is a little darker than the original color.
|
|
103
|
+
- `getSubtleColor(color:JBColor)` will give you a subtle color based on the color you provide. it will return a color that is a more like pastel color for quieter tone.
|
|
104
|
+
- `getContrastColor(color:JBColor)` will give you a contrast color based on the color you provide. it will give you a most contrast color based on your background color in light mode it is Dark and in light mode its light.
|
|
39
105
|
</p>
|
|
40
106
|
<br/>
|
|
41
|
-
<p>
|
|
107
|
+
{/* <p>
|
|
42
108
|
after you define your colors you can define them in your components by using the `jb-core/theme` `defineColors` function by providing `JBThemeColors` object.
|
|
43
|
-
</p>
|
|
109
|
+
</p> */}
|
package/theme/dist/colors.d.ts
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
export declare const defaultColors: {
|
|
2
|
-
readonly single: {
|
|
3
|
-
readonly black: "oklch(0.14 0 0)";
|
|
4
|
-
readonly white: "oklch(1 0 0)";
|
|
5
|
-
readonly highlight: "oklch(0.93 0.2302 125.18)";
|
|
6
|
-
};
|
|
7
|
-
readonly primary: {
|
|
8
|
-
readonly main: "oklch(0.6 0.26 256)";
|
|
9
|
-
readonly hover: string;
|
|
10
|
-
readonly pressed: string;
|
|
11
|
-
readonly lighter: string;
|
|
12
|
-
};
|
|
13
|
-
readonly secondary: {
|
|
14
|
-
readonly main: "oklch(0.6 0.26 286)";
|
|
15
|
-
readonly hover: string;
|
|
16
|
-
readonly pressed: string;
|
|
17
|
-
readonly lighter: string;
|
|
18
|
-
};
|
|
19
|
-
readonly neutral: readonly [string, string, string, string, string, string, string, string, string, string, string];
|
|
20
|
-
readonly yellow: {
|
|
21
|
-
readonly main: "oklch(0.75 0.18 70)";
|
|
22
|
-
readonly hover: string;
|
|
23
|
-
readonly pressed: string;
|
|
24
|
-
readonly lighter: string;
|
|
25
|
-
};
|
|
26
|
-
readonly green: {
|
|
27
|
-
readonly main: "oklch(0.68 0.1484 162.1)";
|
|
28
|
-
readonly hover: string;
|
|
29
|
-
readonly pressed: string;
|
|
30
|
-
readonly lighter: string;
|
|
31
|
-
};
|
|
32
|
-
readonly red: {
|
|
33
|
-
readonly main: "oklch(0.6 0.22 23.21)";
|
|
34
|
-
readonly hover: string;
|
|
35
|
-
readonly pressed: string;
|
|
36
|
-
readonly lighter: string;
|
|
37
|
-
};
|
|
38
|
-
};
|
|
39
|
-
export type JBThemeColors = typeof defaultColors;
|
|
40
|
-
export declare function defineColors(colors: JBThemeColors): void;
|
|
41
|
-
export declare function getNeutralColor(index: number): string;
|
|
42
|
-
export declare function getHoverColor(lightness: number, chroma: number, hue: number): string;
|
|
43
|
-
export declare function getPressedColor(lightness: number, chroma: number, hue: number): string;
|
|
44
|
-
export declare function getLighterColor(lightness: number, chroma: number, hue: number): string;
|
|
45
|
-
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../lib/colors.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqChB,CAAC;AACX,MAAM,MAAM,aAAa,GAAG,OAAO,aAAa,CAAC;AAEjD,wBAAgB,YAAY,CAAC,MAAM,EAAC,aAAa,QAGhD;AA6FD,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,UAE5C;AACD,wBAAgB,aAAa,CAAC,SAAS,EAAC,MAAM,EAAE,MAAM,EAAC,MAAM,EAAE,GAAG,EAAC,MAAM,UAExE;AACD,wBAAgB,eAAe,CAAC,SAAS,EAAC,MAAM,EAAE,MAAM,EAAC,MAAM,EAAE,GAAG,EAAC,MAAM,UAE1E;AAED,wBAAgB,eAAe,CAAC,SAAS,EAAE,MAAM,EAAC,MAAM,EAAE,MAAM,EAAC,GAAG,EAAE,MAAM,UAS3E"}
|