@telegraph/style-engine 0.1.14 → 0.1.15
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/CHANGELOG.md +7 -0
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.mjs +10 -10
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @telegraph/style-engine
|
|
2
2
|
|
|
3
|
+
## 0.1.15
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies [[`fd14d50`](https://github.com/knocklabs/telegraph/commit/fd14d509c3f3f76eafc07d08c73e30db79255a2e)]:
|
|
8
|
+
- @telegraph/tokens@0.1.1
|
|
9
|
+
|
|
3
10
|
## 0.1.14
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
package/dist/cjs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),w={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},k={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},f={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},x={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),w={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},k={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},f={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},x={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)","0_5":"var(--tgph-spacing-0_5)","1_5":"var(--tgph-spacing-1_5)","2_5":"var(--tgph-spacing-2_5)","3_5":"var(--tgph-spacing-3_5)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},m={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},I={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},V={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},z={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},O={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},S={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},_={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},j={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:w,rounded:k,shadow:f,spacing:x,family:m,leading:I,tracking:V,text:z,weight:O,breakpoint:S,zIndex:_},P=({currentValueOfCssVar:r="0 0 0 0",value:a,direction:e})=>{const[p,g,v,n]=r.split(" "),t={top:p,right:g,bottom:v,left:n};return e==="top"&&(t.top=a),e==="right"&&(t.right=a),e==="bottom"&&(t.bottom=a),e==="left"&&(t.left=a),e==="all"&&(t.top=a,t.right=a,t.bottom=a,t.left=a),e==="x"&&(t.left=a,t.right=a),e==="y"&&(t.top=a,t.bottom=a),e==="side-top"&&(t.top=a,t.right=a),e==="side-bottom"&&(t.bottom=a,t.left=a),e==="side-left"&&(t.top=a,t.left=a),e==="side-right"&&(t.right=a,t.bottom=a),Object.values(t).join(" ")},d=r=>{const{cssVars:a}=r;if(!(r!=null&&r.props)||Object.keys(r.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:e={},...p}=r.props;let g=e;const v={};let n=!1;return Object.keys(p).forEach(t=>{const h=t,s=h,l=a==null?void 0:a[s];if(!l){Object.assign(v,{[h]:p[h]});return}const i=p==null?void 0:p[h];if(!i){Object.assign(g,{[h]:p[h]});return}const o=l.value.replace("VARIABLE",i),c=l.cssVar;if(l.interactive&&(n=!0),l.direction){const b=g==null?void 0:g[c],u=P({currentValueOfCssVar:b,value:o,direction:l.direction});g={...g,[c]:u};return}g={...g,[c]:o}}),{styleProp:g,otherProps:v,interactive:n}},E=r=>y.useMemo(()=>d(r),[r]);exports.getStyleProp=d;exports.tokens=j;exports.useStyleEngine=E;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n | \"x\"\n | \"y\"\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"all\"\n | \"side-top\"\n | \"side-bottom\"\n | \"side-left\"\n | \"side-right\";\n\nexport type CssVarProp = {\n cssVar: string;\n value: string;\n direction?: Direction;\n interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n currentValueOfCssVar: string | undefined;\n value: string;\n direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n currentValueOfCssVar = \"0 0 0 0\",\n value,\n direction,\n}: ApplyDirectionProps) => {\n const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n const newValues = {\n top,\n right,\n bottom,\n left,\n };\n\n if (direction === \"top\") {\n newValues.top = value;\n }\n\n if (direction === \"right\") {\n newValues.right = value;\n }\n\n if (direction === \"bottom\") {\n newValues.bottom = value;\n }\n\n if (direction === \"left\") {\n newValues.left = value;\n }\n\n if (direction === \"all\") {\n newValues.top = value;\n newValues.right = value;\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"x\") {\n newValues.left = value;\n newValues.right = value;\n }\n\n if (direction === \"y\") {\n newValues.top = value;\n newValues.bottom = value;\n }\n\n // \"side\" direction is used for things like border-radius\n // where we are settings values on corners instead of sides\n // entire sides like padding and margin provide.\n if (direction === \"side-top\") {\n newValues.top = value;\n newValues.right = value;\n }\n\n if (direction === \"side-bottom\") {\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"side-left\") {\n newValues.top = value;\n newValues.left = value;\n }\n\n if (direction === \"side-right\") {\n newValues.right = value;\n newValues.bottom = value;\n }\n\n const newValuesString = Object.values(newValues).join(\" \");\n\n return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n | Omit<\n {\n [key in keyof Props]: Props[key];\n },\n CssVarPropKey<CssVars>\n >\n | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n | {\n [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n }\n | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n props: Props & { style?: Record<string, string> };\n cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: GetStylePropParams<CssVars, Props>,\n): {\n styleProp: StyleProp<CssVars>;\n otherProps: OtherProps<CssVars, Props>;\n interactive: boolean;\n} => {\n const { cssVars } = params;\n\n if (!params?.props || Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {}, interactive: false };\n }\n\n // Assign the additional styles to the style object so that it can be passed\n // to the component as a prop.\n const { style = {}, ...props } = params.props;\n\n let styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\n let interactive = false;\n\n Object.keys(props).forEach((_key) => {\n const key = _key as keyof typeof props;\n const cssVarsKey = key as unknown as keyof typeof cssVars;\n const matchingCssVar = cssVars?.[cssVarsKey];\n\n // If the prop is not a css var, just add it to the otherProps\n if (!matchingCssVar) {\n Object.assign(otherProps, { [key]: props[key] });\n return;\n }\n\n const matchingPropValue = props?.[key] as string | undefined;\n\n if (!matchingPropValue) {\n Object.assign(styleProp, { [key]: props[key] });\n return;\n }\n\n // Replace the VARIABLE placeholder with the actual value of the prop\n const mappedValueOfCssVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n matchingPropValue,\n );\n\n const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n // If the style contains an interactive prop, set the interactive flag to true\n // so that the component can include the interactive class\n if (matchingCssVar.interactive) {\n interactive = true;\n }\n\n if (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n styleProp = {\n ...styleProp,\n [cssVarName]: directionalValue,\n };\n return;\n }\n\n styleProp = {\n ...styleProp,\n [cssVarName]: mappedValueOfCssVar,\n };\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine","React"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n | \"x\"\n | \"y\"\n | \"top\"\n | \"bottom\"\n | \"left\"\n | \"right\"\n | \"all\"\n | \"side-top\"\n | \"side-bottom\"\n | \"side-left\"\n | \"side-right\";\n\nexport type CssVarProp = {\n cssVar: string;\n value: string;\n direction?: Direction;\n interactive?: boolean;\n};\n\ntype ApplyDirectionProps = {\n currentValueOfCssVar: string | undefined;\n value: string;\n direction?: Direction;\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n currentValueOfCssVar = \"0 0 0 0\",\n value,\n direction,\n}: ApplyDirectionProps) => {\n const [top, right, bottom, left] = currentValueOfCssVar.split(\" \");\n\n const newValues = {\n top,\n right,\n bottom,\n left,\n };\n\n if (direction === \"top\") {\n newValues.top = value;\n }\n\n if (direction === \"right\") {\n newValues.right = value;\n }\n\n if (direction === \"bottom\") {\n newValues.bottom = value;\n }\n\n if (direction === \"left\") {\n newValues.left = value;\n }\n\n if (direction === \"all\") {\n newValues.top = value;\n newValues.right = value;\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"x\") {\n newValues.left = value;\n newValues.right = value;\n }\n\n if (direction === \"y\") {\n newValues.top = value;\n newValues.bottom = value;\n }\n\n // \"side\" direction is used for things like border-radius\n // where we are settings values on corners instead of sides\n // entire sides like padding and margin provide.\n if (direction === \"side-top\") {\n newValues.top = value;\n newValues.right = value;\n }\n\n if (direction === \"side-bottom\") {\n newValues.bottom = value;\n newValues.left = value;\n }\n\n if (direction === \"side-left\") {\n newValues.top = value;\n newValues.left = value;\n }\n\n if (direction === \"side-right\") {\n newValues.right = value;\n newValues.bottom = value;\n }\n\n const newValuesString = Object.values(newValues).join(\" \");\n\n return newValuesString;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n | Omit<\n {\n [key in keyof Props]: Props[key];\n },\n CssVarPropKey<CssVars>\n >\n | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n | {\n [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n }\n | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n props: Props & { style?: Record<string, string> };\n cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: GetStylePropParams<CssVars, Props>,\n): {\n styleProp: StyleProp<CssVars>;\n otherProps: OtherProps<CssVars, Props>;\n interactive: boolean;\n} => {\n const { cssVars } = params;\n\n if (!params?.props || Object.keys(params.props).length === 0) {\n return { styleProp: {}, otherProps: {}, interactive: false };\n }\n\n // Assign the additional styles to the style object so that it can be passed\n // to the component as a prop.\n const { style = {}, ...props } = params.props;\n\n let styleProp: StyleProp<CssVars> = style;\n const otherProps: OtherProps<CssVars, Props> = {};\n let interactive = false;\n\n Object.keys(props).forEach((_key) => {\n const key = _key as keyof typeof props;\n const cssVarsKey = key as unknown as keyof typeof cssVars;\n const matchingCssVar = cssVars?.[cssVarsKey];\n\n // If the prop is not a css var, just add it to the otherProps\n if (!matchingCssVar) {\n Object.assign(otherProps, { [key]: props[key] });\n return;\n }\n\n const matchingPropValue = props?.[key] as string | undefined;\n\n if (!matchingPropValue) {\n Object.assign(styleProp, { [key]: props[key] });\n return;\n }\n\n // Replace the VARIABLE placeholder with the actual value of the prop\n const mappedValueOfCssVar = matchingCssVar.value.replace(\n \"VARIABLE\",\n matchingPropValue,\n );\n\n const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n // If the style contains an interactive prop, set the interactive flag to true\n // so that the component can include the interactive class\n if (matchingCssVar.interactive) {\n interactive = true;\n }\n\n if (matchingCssVar.direction) {\n const currentValueOfCssVar = styleProp?.[cssVarName];\n\n const directionalValue = applyDirectionalValues({\n currentValueOfCssVar,\n value: mappedValueOfCssVar,\n direction: matchingCssVar.direction,\n });\n\n styleProp = {\n ...styleProp,\n [cssVarName]: directionalValue,\n };\n return;\n }\n\n styleProp = {\n ...styleProp,\n [cssVarName]: mappedValueOfCssVar,\n };\n });\n\n return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n CssVars extends CssVarsPropObject<CssVars>,\n Props extends Record<string, unknown>,\n>(\n params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["applyDirectionalValues","currentValueOfCssVar","value","direction","top","right","bottom","left","newValues","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","cssVarName","directionalValue","useStyleEngine","React"],"mappings":"mrQA2BMA,EAAyB,CAAC,CAC9B,qBAAAC,EAAuB,UACvB,MAAAC,EACA,UAAAC,CACF,IAA2B,CACzB,KAAM,CAACC,EAAKC,EAAOC,EAAQC,CAAI,EAAIN,EAAqB,MAAM,GAAG,EAE3DO,EAAY,CAChB,IAAAJ,EACA,MAAAC,EACA,OAAAC,EACA,KAAAC,CAAA,EAGF,OAAIJ,IAAc,QAChBK,EAAU,IAAMN,GAGdC,IAAc,UAChBK,EAAU,MAAQN,GAGhBC,IAAc,WAChBK,EAAU,OAASN,GAGjBC,IAAc,SAChBK,EAAU,KAAON,GAGfC,IAAc,QAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,EAClBM,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,MAChBK,EAAU,KAAON,EACjBM,EAAU,MAAQN,GAGhBC,IAAc,MAChBK,EAAU,IAAMN,EAChBM,EAAU,OAASN,GAMjBC,IAAc,aAChBK,EAAU,IAAMN,EAChBM,EAAU,MAAQN,GAGhBC,IAAc,gBAChBK,EAAU,OAASN,EACnBM,EAAU,KAAON,GAGfC,IAAc,cAChBK,EAAU,IAAMN,EAChBM,EAAU,KAAON,GAGfC,IAAc,eAChBK,EAAU,MAAQN,EAClBM,EAAU,OAASN,GAGG,OAAO,OAAOM,CAAS,EAAE,KAAK,GAAG,CAG3D,EA8BaC,EAIXC,GAKG,CACH,KAAM,CAAE,QAAAC,GAAYD,EAEpB,GAAI,EAACA,GAAA,MAAAA,EAAQ,QAAS,OAAO,KAAKA,EAAO,KAAK,EAAE,SAAW,EACzD,MAAO,CAAE,UAAW,CAAA,EAAI,WAAY,CAAA,EAAI,YAAa,EAAA,EAKvD,KAAM,CAAE,MAAAE,EAAQ,CAAA,EAAI,GAAGC,CAAA,EAAUH,EAAO,MAExC,IAAII,EAAgCF,EACpC,MAAMG,EAAyC,CAAA,EAC/C,IAAIC,EAAc,GAElB,cAAO,KAAKH,CAAK,EAAE,QAASI,GAAS,CACnC,MAAMC,EAAMD,EACNE,EAAaD,EACbE,EAAiBT,GAAA,YAAAA,EAAUQ,GAGjC,GAAI,CAACC,EAAgB,CACnB,OAAO,OAAOL,EAAY,CAAE,CAACG,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC/C,MACF,CAEA,MAAMG,EAAoBR,GAAA,YAAAA,EAAQK,GAElC,GAAI,CAACG,EAAmB,CACtB,OAAO,OAAOP,EAAW,CAAE,CAACI,CAAG,EAAGL,EAAMK,CAAG,EAAG,EAC9C,MACF,CAGA,MAAMI,EAAsBF,EAAe,MAAM,QAC/C,WACAC,CAAA,EAGIE,EAAaH,EAAe,OAQlC,GAJIA,EAAe,cACjBJ,EAAc,IAGZI,EAAe,UAAW,CAC5B,MAAMnB,EAAuBa,GAAA,YAAAA,EAAYS,GAEnCC,EAAmBxB,EAAuB,CAC9C,qBAAAC,EACA,MAAOqB,EACP,UAAWF,EAAe,SAAA,CAC3B,EAEDN,EAAY,CACV,GAAGA,EACH,CAACS,CAAU,EAAGC,CAAA,EAEhB,MACF,CAEAV,EAAY,CACV,GAAGA,EACH,CAACS,CAAU,EAAGD,CAAA,CAElB,CAAC,EAEM,CAAE,UAAAR,EAAW,WAAAC,EAAY,YAAAC,CAAA,CAClC,EC3MaS,EAIXf,GAEOgB,EAAM,QAAQ,IAAMjB,EAAaC,CAAM,EAAG,CAACA,CAAM,CAAC"}
|
package/dist/esm/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import u from "react";
|
|
2
|
-
const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, w = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, k = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)",
|
|
2
|
+
const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, w = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, k = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, f = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", "0_5": "var(--tgph-spacing-0_5)", "1_5": "var(--tgph-spacing-1_5)", "2_5": "var(--tgph-spacing-2_5)", "3_5": "var(--tgph-spacing-3_5)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, m = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, I = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, V = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, z = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, _ = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, O = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, C = {
|
|
3
3
|
"border-style": { solid: "var(--tgph-border-style-solid)", dashed: "var(--tgph-border-style-dashed)" },
|
|
4
4
|
color: y,
|
|
5
5
|
rounded: w,
|
|
@@ -10,9 +10,9 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
|
|
|
10
10
|
tracking: I,
|
|
11
11
|
text: V,
|
|
12
12
|
weight: z,
|
|
13
|
-
breakpoint:
|
|
14
|
-
zIndex:
|
|
15
|
-
},
|
|
13
|
+
breakpoint: _,
|
|
14
|
+
zIndex: O
|
|
15
|
+
}, j = ({
|
|
16
16
|
currentValueOfCssVar: e = "0 0 0 0",
|
|
17
17
|
value: a,
|
|
18
18
|
direction: r
|
|
@@ -24,7 +24,7 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
|
|
|
24
24
|
left: n
|
|
25
25
|
};
|
|
26
26
|
return r === "top" && (t.top = a), r === "right" && (t.right = a), r === "bottom" && (t.bottom = a), r === "left" && (t.left = a), r === "all" && (t.top = a, t.right = a, t.bottom = a, t.left = a), r === "x" && (t.left = a, t.right = a), r === "y" && (t.top = a, t.bottom = a), r === "side-top" && (t.top = a, t.right = a), r === "side-bottom" && (t.bottom = a, t.left = a), r === "side-left" && (t.top = a, t.left = a), r === "side-right" && (t.right = a, t.bottom = a), Object.values(t).join(" ");
|
|
27
|
-
},
|
|
27
|
+
}, P = (e) => {
|
|
28
28
|
const { cssVars: a } = e;
|
|
29
29
|
if (!(e != null && e.props) || Object.keys(e.props).length === 0)
|
|
30
30
|
return { styleProp: {}, otherProps: {}, interactive: !1 };
|
|
@@ -48,7 +48,7 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
|
|
|
48
48
|
i
|
|
49
49
|
), c = v.cssVar;
|
|
50
50
|
if (v.interactive && (n = !0), v.direction) {
|
|
51
|
-
const s = p == null ? void 0 : p[c], b =
|
|
51
|
+
const s = p == null ? void 0 : p[c], b = j({
|
|
52
52
|
currentValueOfCssVar: s,
|
|
53
53
|
value: o,
|
|
54
54
|
direction: v.direction
|
|
@@ -64,10 +64,10 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
|
|
|
64
64
|
[c]: o
|
|
65
65
|
};
|
|
66
66
|
}), { styleProp: p, otherProps: l, interactive: n };
|
|
67
|
-
},
|
|
67
|
+
}, E = (e) => u.useMemo(() => P(e), [e]);
|
|
68
68
|
export {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
69
|
+
P as getStyleProp,
|
|
70
|
+
C as tokens,
|
|
71
|
+
E as useStyleEngine
|
|
72
72
|
};
|
|
73
73
|
//# sourceMappingURL=index.mjs.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@telegraph/style-engine",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.15",
|
|
4
4
|
"description": "A wrappar around vanilla extract to style telegraph",
|
|
5
5
|
"repository": "https://github.com/knocklabs/telegraph/tree/main/packages/style-engine",
|
|
6
6
|
"author": "@knocklabs",
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
"preview": "vite preview"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
|
-
"@telegraph/tokens": "^0.1.
|
|
40
|
+
"@telegraph/tokens": "^0.1.1",
|
|
41
41
|
"postcss": "^8.5.3"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"@types/react": "^18.3.18",
|
|
51
51
|
"eslint": "^8.56.0",
|
|
52
52
|
"globby": "^14.1.0",
|
|
53
|
-
"lightningcss": "^1.
|
|
53
|
+
"lightningcss": "^1.30.1",
|
|
54
54
|
"react": "^18.3.1",
|
|
55
55
|
"react-dom": "^18.3.1",
|
|
56
56
|
"typescript": "^5.7.3",
|