{"_id":"@derekjwilliams/stylextras-open-props-pr","_rev":"5-4587addf8c6e5b436b2fcbaef9f18d6d","name":"@derekjwilliams/stylextras-open-props-pr","dist-tags":{"latest":"0.11.4"},"versions":{"0.11.0":{"name":"@derekjwilliams/stylextras-open-props-pr","version":"0.11.0","license":"MIT","_id":"@derekjwilliams/stylextras-open-props-pr@0.11.0","maintainers":[{"name":"derekjwilliams","email":"derek61@gmail.com"}],"homepage":"https://github.com/facebook/stylex#readme","bugs":{"url":"https://github.com/facebook/stylex/issues"},"dist":{"shasum":"577458af496db870e034246bd44b039c30c22899","tarball":"https://registry.npmjs.org/@derekjwilliams/stylextras-open-props-pr/-/stylextras-open-props-pr-0.11.0.tgz","fileCount":62,"integrity":"sha512-g7VCaP2b0tJmHBvl3+I0IdopUQoBcmxeKqP6ld7NyQOLSX5SnWvacMhgaS91AnQTH6woTIFB3ILDU1FtilA6bw==","signatures":[{"sig":"MEUCIGC/74vhyRByExCZ0O1RNxkjXbKVOf/QkGXK4Ya9058hAiEA0QEFXAkCVtkTfbUAqvRngGrsG6mIjdtW1bJrGb3Ztg4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":104760},"jest":{},"type":"module","exports":{".":"./lib/index.js","./svg.stylex":"./lib/svg.stylex.js","./fonts.stylex":"./lib/fonts.stylex.js","./sizes.stylex":"./lib/sizes.stylex.js","./colors.stylex":"./lib/colors.stylex.js","./zIndex.stylex":"./lib/zIndex.stylex.js","./aspects.stylex":"./lib/aspects.stylex.js","./borders.stylex":"./lib/borders.stylex.js","./easings.stylex":"./lib/easings.stylex.js","./layouts.stylex":"./lib/layouts.stylex.js","./lib/svg.stylex":"./lib/svg.stylex.js","./shadows.stylex":"./lib/shadows.stylex.js","./colorsHSL.stylex":"./lib/colorsHSL.stylex.js","./gradients.stylex":"./lib/gradients.stylex.js","./grayOKLCH.stylex":"./lib/grayOKLCH.stylex.js","./lib/fonts.stylex":"./lib/fonts.stylex.js","./lib/sizes.stylex":"./lib/sizes.stylex.js","./animations.stylex":"./lib/animations.stylex.js","./highlights.stylex":"./lib/highlights.stylex.js","./lib/colors.stylex":"./lib/colors.stylex.js","./lib/zIndex.stylex":"./lib/zIndex.stylex.js","./masksEdges.stylex":"./lib/masksEdges.stylex.js","./colorsOKLCH.stylex":"./lib/colorsOKLCH.stylex.js","./lib/aspects.stylex":"./lib/aspects.stylex.js","./lib/borders.stylex":"./lib/borders.stylex.js","./lib/easings.stylex":"./lib/easings.stylex.js","./lib/layouts.stylex":"./lib/layouts.stylex.js","./lib/shadows.stylex":"./lib/shadows.stylex.js","./lib/colorsHSL.stylex":"./lib/colorsHSL.stylex.js","./lib/gradients.stylex":"./lib/gradients.stylex.js","./lib/grayOKLCH.stylex":"./lib/grayOKLCH.stylex.js","./lib/animations.stylex":"./lib/animations.stylex.js","./lib/highlights.stylex":"./lib/highlights.stylex.js","./lib/masksEdges.stylex":"./lib/masksEdges.stylex.js","./colorsOKLCHHues.stylex":"./lib/colorsOKLCHHues.stylex.js","./lib/colorsOKLCH.stylex":"./lib/colorsOKLCH.stylex.js","./masksCornerCuts.stylex":"./lib/masksCornerCuts.stylex.js","./lib/animationNames.stylex":"./lib/animationNames.stylex.js","./lib/colorsOKLCHHues.stylex":"./lib/colorsOKLCHHues.stylex.js","./lib/masksCornerCuts.stylex":"./lib/masksCornerCuts.stylex.js"},"gitHead":"0bfd7a12443395a990a2a88a998efa3d2bce600e","scripts":{"test":"jest","build":"babel src/ --out-dir lib/ --copy-files","prebuild":"gen-types -i src/ -o lib/"},"_npmUser":{"name":"derekjwilliams","email":"derek61@gmail.com"},"repository":{"url":"git+https://github.com/facebook/stylex.git","type":"git"},"_npmVersion":"11.2.0","description":"A library common values as variables to be used with Stylex.","directories":{},"_nodeVersion":"22.11.0","dependencies":{"@stylexjs/stylex":"*"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.26.4","@babel/preset-flow":"^7.25.9","@stylextras/scripts":"0.11.0"},"_npmOperationalInternal":{"tmp":"tmp/stylextras-open-props-pr_0.11.0_1744662637583_0.9887304703330677","host":"s3://npm-registry-packages-npm-production"}},"0.11.1":{"name":"@derekjwilliams/stylextras-open-props-pr","version":"0.11.1","license":"MIT","_id":"@derekjwilliams/stylextras-open-props-pr@0.11.1","maintainers":[{"name":"derekjwilliams","email":"derek61@gmail.com"}],"homepage":"https://github.com/facebook/stylex#readme","bugs":{"url":"https://github.com/facebook/stylex/issues"},"dist":{"shasum":"88538f760bd3fccdf3c6b0c87adaf22db5f8afa7","tarball":"https://registry.npmjs.org/@derekjwilliams/stylextras-open-props-pr/-/stylextras-open-props-pr-0.11.1.tgz","fileCount":64,"integrity":"sha512-/OOLK+lDCFPqtEco8aJa2OP64qzuDfAqSIecKjBuDRb0GavmKfCcXEitnZRFdY9AuAITr5s+yw+IFcO8kcf5dQ==","signatures":[{"sig":"MEQCIArV46TTesaeukpFQFT4QA75qoOMqotMq8stWE2vo/cNAiAwTAR3WYHuUgk8gtphI13RzZS2Q6DVd/VDd6N9QsD2AA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":106007},"jest":{},"type":"module","exports":{".":"./lib/index.stylex.js","./svg.stylex":"./lib/svg.stylex.js","./fonts.stylex":"./lib/fonts.stylex.js","./sizes.stylex":"./lib/sizes.stylex.js","./colors.stylex":"./lib/colors.stylex.js","./zIndex.stylex":"./lib/zIndex.stylex.js","./aspects.stylex":"./lib/aspects.stylex.js","./borders.stylex":"./lib/borders.stylex.js","./easings.stylex":"./lib/easings.stylex.js","./layouts.stylex":"./lib/layouts.stylex.js","./shadows.stylex":"./lib/shadows.stylex.js","./colorsHSL.stylex":"./lib/colorsHSL.stylex.js","./gradients.stylex":"./lib/gradients.stylex.js","./grayOKLCH.stylex":"./lib/grayOKLCH.stylex.js","./animations.stylex":"./lib/animations.stylex.js","./highlights.stylex":"./lib/highlights.stylex.js","./masksEdges.stylex":"./lib/masksEdges.stylex.js","./colorsOKLCH.stylex":"./lib/colorsOKLCH.stylex.js","./colorsOKLCHHues.stylex":"./lib/colorsOKLCHHues.stylex.js","./masksCornerCuts.stylex":"./lib/masksCornerCuts.stylex.js"},"gitHead":"0bfd7a12443395a990a2a88a998efa3d2bce600e","scripts":{"test":"jest","build":"babel src/ --out-dir lib/ --copy-files","prebuild":"gen-types -i src/ -o lib/"},"_npmUser":{"name":"derekjwilliams","email":"derek61@gmail.com"},"repository":{"url":"git+https://github.com/facebook/stylex.git","type":"git"},"_npmVersion":"11.2.0","description":"A library common values as variables to be used with Stylex.","directories":{},"_nodeVersion":"22.11.0","dependencies":{"@stylexjs/stylex":"*"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.26.4","@babel/preset-flow":"^7.25.9","@stylextras/scripts":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/stylextras-open-props-pr_0.11.1_1744665439606_0.8354332361517325","host":"s3://npm-registry-packages-npm-production"}},"0.11.2":{"name":"@derekjwilliams/stylextras-open-props-pr","version":"0.11.2","license":"MIT","_id":"@derekjwilliams/stylextras-open-props-pr@0.11.2","maintainers":[{"name":"derekjwilliams","email":"derek61@gmail.com"}],"homepage":"https://github.com/facebook/stylex#readme","bugs":{"url":"https://github.com/facebook/stylex/issues"},"dist":{"shasum":"c76f26f9ff05ef88fce2593c79b82943a226c721","tarball":"https://registry.npmjs.org/@derekjwilliams/stylextras-open-props-pr/-/stylextras-open-props-pr-0.11.2.tgz","fileCount":64,"integrity":"sha512-NJ3WVGw3mmx/zsBrBg2QsSl9a/cIjEPLDYwZ8ZERVtw8KOomJIvHbjeEjqdmELGw1iPxqfR8HXNQQEORLcxUXg==","signatures":[{"sig":"MEYCIQCuZENtMuxEowrRR8jtGSciqbS0+1TbY/dW+6fOVOIBAwIhAKLvQic3m0H9jw7bZxI5serKLec+lbj1QniECIHSNpH/","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":107062},"jest":{},"type":"module","exports":{".":"./lib/index.stylex.js","./svg.stylex":"./lib/svg.stylex.js","./fonts.stylex":"./lib/fonts.stylex.js","./sizes.stylex":"./lib/sizes.stylex.js","./colors.stylex":"./lib/colors.stylex.js","./zIndex.stylex":"./lib/zIndex.stylex.js","./aspects.stylex":"./lib/aspects.stylex.js","./borders.stylex":"./lib/borders.stylex.js","./easings.stylex":"./lib/easings.stylex.js","./layouts.stylex":"./lib/layouts.stylex.js","./lib/svg.stylex":"./lib/svg.stylex.js","./shadows.stylex":"./lib/shadows.stylex.js","./colorsHSL.stylex":"./lib/colorsHSL.stylex.js","./gradients.stylex":"./lib/gradients.stylex.js","./grayOKLCH.stylex":"./lib/grayOKLCH.stylex.js","./lib/fonts.stylex":"./lib/fonts.stylex.js","./lib/sizes.stylex":"./lib/sizes.stylex.js","./animations.stylex":"./lib/animations.stylex.js","./highlights.stylex":"./lib/highlights.stylex.js","./lib/colors.stylex":"./lib/colors.stylex.js","./lib/zIndex.stylex":"./lib/zIndex.stylex.js","./masksEdges.stylex":"./lib/masksEdges.stylex.js","./colorsOKLCH.stylex":"./lib/colorsOKLCH.stylex.js","./lib/aspects.stylex":"./lib/aspects.stylex.js","./lib/borders.stylex":"./lib/borders.stylex.js","./lib/easings.stylex":"./lib/easings.stylex.js","./lib/layouts.stylex":"./lib/layouts.stylex.js","./lib/shadows.stylex":"./lib/shadows.stylex.js","./lib/colorsHSL.stylex":"./lib/colorsHSL.stylex.js","./lib/gradients.stylex":"./lib/gradients.stylex.js","./lib/grayOKLCH.stylex":"./lib/grayOKLCH.stylex.js","./lib/animations.stylex":"./lib/animations.stylex.js","./lib/highlights.stylex":"./lib/highlights.stylex.js","./lib/masksEdges.stylex":"./lib/masksEdges.stylex.js","./colorsOKLCHHues.stylex":"./lib/colorsOKLCHHues.stylex.js","./lib/colorsOKLCH.stylex":"./lib/colorsOKLCH.stylex.js","./masksCornerCuts.stylex":"./lib/masksCornerCuts.stylex.js","./lib/animationNames.stylex":"./lib/animationNames.stylex.js","./lib/colorsOKLCHHues.stylex":"./lib/colorsOKLCHHues.stylex.js","./lib/masksCornerCuts.stylex":"./lib/masksCornerCuts.stylex.js"},"gitHead":"0bfd7a12443395a990a2a88a998efa3d2bce600e","scripts":{"test":"jest","build":"babel src/ --out-dir lib/ --copy-files","prebuild":"gen-types -i src/ -o lib/"},"_npmUser":{"name":"derekjwilliams","email":"derek61@gmail.com"},"repository":{"url":"git+https://github.com/facebook/stylex.git","type":"git"},"_npmVersion":"11.2.0","description":"A library common values as variables to be used with Stylex.","directories":{},"_nodeVersion":"22.11.0","dependencies":{"@stylexjs/stylex":"*"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.26.4","@babel/preset-flow":"^7.25.9","@stylextras/scripts":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/stylextras-open-props-pr_0.11.2_1744668039979_0.8502223870166941","host":"s3://npm-registry-packages-npm-production"}},"0.11.3":{"name":"@derekjwilliams/stylextras-open-props-pr","version":"0.11.3","license":"MIT","_id":"@derekjwilliams/stylextras-open-props-pr@0.11.3","maintainers":[{"name":"derekjwilliams","email":"derek61@gmail.com"}],"homepage":"https://github.com/facebook/stylex#readme","bugs":{"url":"https://github.com/facebook/stylex/issues"},"dist":{"shasum":"04e9257bf3f5743a9cfe3249933b6e0800477979","tarball":"https://registry.npmjs.org/@derekjwilliams/stylextras-open-props-pr/-/stylextras-open-props-pr-0.11.3.tgz","fileCount":65,"integrity":"sha512-faPssMMknQg/VLh0o2g6gmzM4FVfpgZs/Jdu+9yvbgV7/4ulDqiiFHH7Yo5NuWBlULmpEKh+TeeAEEca12gbzw==","signatures":[{"sig":"MEUCIDp8dVPmC3VZ9VCi+OJ44WFNAoBs2qMjbJErksV+uVb+AiEA67Y8eYhjcf2cGul3SVY3E48LWmK5E/Jom2NusQKTM/0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":118487},"jest":{},"type":"module","exports":{"./svg.stylex":"./lib/svg.stylex.js","./fonts.stylex":"./lib/fonts.stylex.js","./sizes.stylex":"./lib/sizes.stylex.js","./colors.stylex":"./lib/colors.stylex.js","./zIndex.stylex":"./lib/zIndex.stylex.js","./aspects.stylex":"./lib/aspects.stylex.js","./borders.stylex":"./lib/borders.stylex.js","./easings.stylex":"./lib/easings.stylex.js","./layouts.stylex":"./lib/layouts.stylex.js","./lib/svg.stylex":"./lib/svg.stylex.js","./shadows.stylex":"./lib/shadows.stylex.js","./colorsHSL.stylex":"./lib/colorsHSL.stylex.js","./gradients.stylex":"./lib/gradients.stylex.js","./grayOKLCH.stylex":"./lib/grayOKLCH.stylex.js","./lib/fonts.stylex":"./lib/fonts.stylex.js","./lib/sizes.stylex":"./lib/sizes.stylex.js","./animations.stylex":"./lib/animations.stylex.js","./highlights.stylex":"./lib/highlights.stylex.js","./lib/colors.stylex":"./lib/colors.stylex.js","./lib/zIndex.stylex":"./lib/zIndex.stylex.js","./masksEdges.stylex":"./lib/masksEdges.stylex.js","./colorsOKLCH.stylex":"./lib/colorsOKLCH.stylex.js","./lib/aspects.stylex":"./lib/aspects.stylex.js","./lib/borders.stylex":"./lib/borders.stylex.js","./lib/easings.stylex":"./lib/easings.stylex.js","./lib/layouts.stylex":"./lib/layouts.stylex.js","./lib/shadows.stylex":"./lib/shadows.stylex.js","./lib/colorsHSL.stylex":"./lib/colorsHSL.stylex.js","./lib/gradients.stylex":"./lib/gradients.stylex.js","./lib/grayOKLCH.stylex":"./lib/grayOKLCH.stylex.js","./animationNames.stylex":"./lib/animationNames.stylex.js","./lib/animations.stylex":"./lib/animations.stylex.js","./lib/highlights.stylex":"./lib/highlights.stylex.js","./lib/masksEdges.stylex":"./lib/masksEdges.stylex.js","./colorsOKLCHHues.stylex":"./lib/colorsOKLCHHues.stylex.js","./lib/colorsOKLCH.stylex":"./lib/colorsOKLCH.stylex.js","./masksCornerCuts.stylex":"./lib/masksCornerCuts.stylex.js","./lib/animationNames.stylex":"./lib/animationNames.stylex.js","./lib/colorsOKLCHHues.stylex":"./lib/colorsOKLCHHues.stylex.js","./lib/masksCornerCuts.stylex":"./lib/masksCornerCuts.stylex.js"},"gitHead":"fa643c344457d38a8b72ee03acc578ea03254b2a","scripts":{"test":"jest","build":"babel src/ --out-dir lib/ --copy-files","prebuild":"gen-types -i src/ -o lib/"},"_npmUser":{"name":"derekjwilliams","email":"derek61@gmail.com"},"repository":{"url":"git+https://github.com/facebook/stylex.git","type":"git"},"_npmVersion":"11.2.0","description":"A library common values as variables to be used with Stylex.","directories":{},"_nodeVersion":"22.11.0","dependencies":{"@stylexjs/stylex":"*"},"_hasShrinkwrap":false,"devDependencies":{"@babel/cli":"^7.26.4","@babel/preset-flow":"^7.25.9","@stylextras/scripts":"workspace:*"},"_npmOperationalInternal":{"tmp":"tmp/stylextras-open-props-pr_0.11.3_1744674304185_0.17519532686417194","host":"s3://npm-registry-packages-npm-production"}},"0.11.4":{"name":"@derekjwilliams/stylextras-open-props-pr","version":"0.11.4","description":"A library common values as variables to be used with Stylex.","type":"module","exports":{"./lib/animationNames.stylex":"./lib/animationNames.stylex.js","./lib/animations.stylex":"./lib/animations.stylex.js","./lib/aspects.stylex":"./lib/aspects.stylex.js","./lib/borders.stylex":"./lib/borders.stylex.js","./lib/colors.stylex":"./lib/colors.stylex.js","./lib/colorsHSL.stylex":"./lib/colorsHSL.stylex.js","./lib/colorsOKLCH.stylex":"./lib/colorsOKLCH.stylex.js","./lib/colorsOKLCHHues.stylex":"./lib/colorsOKLCHHues.stylex.js","./lib/easings.stylex":"./lib/easings.stylex.js","./lib/fonts.stylex":"./lib/fonts.stylex.js","./lib/gradients.stylex":"./lib/gradients.stylex.js","./lib/grayOKLCH.stylex":"./lib/grayOKLCH.stylex.js","./lib/highlights.stylex":"./lib/highlights.stylex.js","./lib/layouts.stylex":"./lib/layouts.stylex.js","./lib/masksCornerCuts.stylex":"./lib/masksCornerCuts.stylex.js","./lib/masksEdges.stylex":"./lib/masksEdges.stylex.js","./lib/shadows.stylex":"./lib/shadows.stylex.js","./lib/sizes.stylex":"./lib/sizes.stylex.js","./lib/svg.stylex":"./lib/svg.stylex.js","./lib/zIndex.stylex":"./lib/zIndex.stylex.js","./animationNames.stylex":"./lib/animationNames.stylex.js","./colors.stylex":"./lib/colors.stylex.js","./animations.stylex":"./lib/animations.stylex.js","./aspects.stylex":"./lib/aspects.stylex.js","./borders.stylex":"./lib/borders.stylex.js","./colorsHSL.stylex":"./lib/colorsHSL.stylex.js","./colorsOKLCH.stylex":"./lib/colorsOKLCH.stylex.js","./colorsOKLCHHues.stylex":"./lib/colorsOKLCHHues.stylex.js","./easings.stylex":"./lib/easings.stylex.js","./fonts.stylex":"./lib/fonts.stylex.js","./gradients.stylex":"./lib/gradients.stylex.js","./grayOKLCH.stylex":"./lib/grayOKLCH.stylex.js","./highlights.stylex":"./lib/highlights.stylex.js","./layouts.stylex":"./lib/layouts.stylex.js","./masksCornerCuts.stylex":"./lib/masksCornerCuts.stylex.js","./masksEdges.stylex":"./lib/masksEdges.stylex.js","./shadows.stylex":"./lib/shadows.stylex.js","./sizes.stylex":"./lib/sizes.stylex.js","./svg.stylex":"./lib/svg.stylex.js","./zIndex.stylex":"./lib/zIndex.stylex.js"},"repository":{"type":"git","url":"git+https://github.com/derekjwilliams/stylextras.git"},"license":"MIT","scripts":{"test":"jest","prebuild":"gen-types -i src/ -o lib/","build":"babel src/ --out-dir lib/ --copy-files"},"dependencies":{"@stylexjs/stylex":"*"},"devDependencies":{"@babel/cli":"^7.26.4","@babel/preset-flow":"^7.25.9","@stylextras/scripts":"workspace:*"},"jest":{},"_id":"@derekjwilliams/stylextras-open-props-pr@0.11.4","gitHead":"b4627690286223e0b9b926790c9134b2b5837fd8","bugs":{"url":"https://github.com/derekjwilliams/stylextras/issues"},"homepage":"https://github.com/derekjwilliams/stylextras#readme","_nodeVersion":"22.11.0","_npmVersion":"11.3.0","dist":{"integrity":"sha512-P/8KUFoi2kYYpeAFgoVuUJVsL7PZKcL7F/raOwn6vaw5vYcOgMOl4uA0q9XQ/c20gf8I7y+SwO5PbaKVxpJCzQ==","shasum":"59c4ffff70f494907c1180097069372a44ed263f","tarball":"https://registry.npmjs.org/@derekjwilliams/stylextras-open-props-pr/-/stylextras-open-props-pr-0.11.4.tgz","fileCount":65,"unpackedSize":118511,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIC25ZClfMYoE9TlWC4QVzp7EHjk4i5bw3hoyeKCWcJi5AiAk3ZbYBNxWKZ1eRTCHvsEBAElWNQQbEpWOISyh6gAsvA=="}]},"_npmUser":{"name":"derekjwilliams","email":"derek61@gmail.com"},"directories":{},"maintainers":[{"name":"derekjwilliams","email":"derek61@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/stylextras-open-props-pr_0.11.4_1748292900706_0.47228385002374274"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-14T20:30:37.505Z","modified":"2025-05-26T20:55:01.125Z","0.11.0":"2025-04-14T20:30:37.757Z","0.11.1":"2025-04-14T21:17:19.800Z","0.11.2":"2025-04-14T22:00:40.219Z","0.11.3":"2025-04-14T23:45:04.461Z","0.11.4":"2025-05-26T20:55:00.960Z"},"bugs":{"url":"https://github.com/derekjwilliams/stylextras/issues"},"license":"MIT","homepage":"https://github.com/derekjwilliams/stylextras#readme","repository":{"type":"git","url":"git+https://github.com/derekjwilliams/stylextras.git"},"description":"A library common values as variables to be used with Stylex.","maintainers":[{"name":"derekjwilliams","email":"derek61@gmail.com"}],"readme":"# @stylextras/open-props\n\nThis package provides the ability to easily use Open Props with StyleX.\n\n### Installation\n\n```bash\nnpm install @derekjwilliams/stylextras-open-props-pr\n```\n\n## Usage\n\n### Direct Imports\n\nYou can import specific token categories directly:\n\n```typescript\nimport * as stylex from '@stylexjs/stylex';\nimport { colors } from '@stylextras/open-props/colors.stylex';\nimport { fonts } from '@stylextras/open-props/fonts.stylex';\nimport { sizes } from '@stylextras/open-props/sizes.stylex';\n\nconst styles = stylex.create({\n  container: {\n    backgroundColor: colors.blue2,\n    color: colors.gray10,\n    fontSize: fonts.size3,\n    padding: sizes.spacing2,\n  },\n});\n```\n\n### Creating a Design Token System (Recommended)\n\nFor better organization, theming support, and consistent design language, you can create a design token system using StyleX's `defineVars`:\n\n1.  Create a tokens file:\n\n```typescript\n// src/utils/tokens.stylex.ts\nimport { defineVars } from '@stylexjs/stylex';\nimport { colors as openPropsColors } from '@stylextras/open-props/colors.stylex';\nimport { sizes as openPropsSizes } from '@stylextras/open-props/sizes.stylex';\nimport { fonts as openPropsFonts } from '@stylextras/open-props/fonts.stylex';\nimport { shadows as openPropsShadows } from '@stylextras/open-props/shadows.stylex';\n\n// Define your color tokens\nexport const colors = defineVars({\n  // Core colors\n  primary: openPropsColors.blue6,\n  secondary: openPropsColors.purple6,\n  accent: openPropsColors.orange6,\n\n  // Text colors\n  textPrimary: openPropsColors.gray9,\n  textSecondary: openPropsColors.gray7,\n  textInverse: openPropsColors.gray0,\n\n  // Background colors\n  backgroundPrimary: openPropsColors.gray0,\n  backgroundSecondary: openPropsColors.gray1,\n  backgroundTertiary: openPropsColors.gray2,\n\n  // Status colors\n  success: openPropsColors.green6,\n  warning: openPropsColors.yellow6,\n  error: openPropsColors.red6,\n  info: openPropsColors.blue5,\n\n  // Direct mappings for backward compatibility\n  blue2: openPropsColors.blue2,\n  blue6: openPropsColors.blue6,\n  gray10: openPropsColors.gray10,\n  // Add other mappings as needed\n});\n\n// Define your spacing tokens\nexport const spacing = defineVars({\n  xs: openPropsSizes.spacing1,\n  sm: openPropsSizes.spacing2,\n  md: openPropsSizes.spacing3,\n  lg: openPropsSizes.spacing4,\n  xl: openPropsSizes.spacing5,\n\n  // Direct mappings\n  spacing1: openPropsSizes.spacing1,\n  spacing2: openPropsSizes.spacing2,\n  // Add other mappings as needed\n});\n\n// Define your typography tokens\nexport const typography = defineVars({\n  fontSizeSmall: openPropsFonts.size2,\n  fontSizeMedium: openPropsFonts.size3,\n  fontSizeLarge: openPropsFonts.size4,\n\n  fontWeightRegular: openPropsFonts.weight4,\n  fontWeightMedium: openPropsFonts.weight5,\n  fontWeightBold: openPropsFonts.weight7,\n\n  // Direct mappings\n  size3: openPropsFonts.size3,\n  // Add other mappings as needed\n});\n\n// Define your elevation tokens\nexport const elevation = defineVars({\n  low: openPropsShadows.shadow1,\n  medium: openPropsShadows.shadow2,\n  high: openPropsShadows.shadow3,\n\n  // Direct mappings\n  shadow1: openPropsShadows.shadow1,\n  shadow2: openPropsShadows.shadow2,\n  // Add other mappings as needed\n});\n\n```\n\n2.  Then use these tokens in your components:\n\n\n```typescript\nimport * as stylex from '@stylexjs/stylex';\nimport { colors, spacing, typography } from '../utils/tokens.stylex';\n\nconst styles = stylex.create({\n  button: {\n    padding: `${spacing.xs} ${spacing.md}`,\n    fontSize: typography.fontSizeMedium,\n    backgroundColor: colors.primary,\n    color: colors.textInverse,\n    border: 'none',\n    borderRadius: spacing.xs,\n    cursor: 'pointer',\n  },\n});\n\nexport function Button({ children, onClick }: { children: React.ReactNode; onClick?: () => void }) {\n  return (\n    <button {...stylex.props(styles.button)} onClick={onClick}>\n      {children}\n    </button>\n  );\n}\n```\n\n### Theming\n \nOne of the major benefits of using `defineVars` is the ability to create and switch between themes:\n\n\n```typescript\n// src/utils/themes.stylex.ts\nimport * as stylex from '@stylexjs/stylex';\nimport { colors } from './tokens.stylex';\nimport { colors as openPropsColors } from '@stylextras/open-props/colors.stylex';\n\n// Light theme (default)\nexport const lightTheme = stylex.createTheme(colors, {\n  // Core colors remain the same as defaults\n\n  // Background colors\n  backgroundPrimary: openPropsColors.gray0,\n  backgroundSecondary: openPropsColors.gray1,\n  backgroundTertiary: openPropsColors.gray2,\n\n  // Text colors\n  textPrimary: openPropsColors.gray9,\n  textSecondary: openPropsColors.gray7,\n});\n\n// Dark theme\nexport const darkTheme = stylex.createTheme(colors, {\n  // Core colors with adjusted brightness for dark mode\n  primary: openPropsColors.blue5,\n  secondary: openPropsColors.purple5,\n  accent: openPropsColors.orange5,\n\n  // Background colors\n  backgroundPrimary: openPropsColors.gray9,\n  backgroundSecondary: openPropsColors.gray8,\n  backgroundTertiary: openPropsColors.gray7,\n\n  // Text colors\n  textPrimary: openPropsColors.gray0,\n  textSecondary: openPropsColors.gray2,\n  textInverse: openPropsColors.gray9,\n});\n\n// Brand theme example\nexport const brandTheme = stylex.createTheme(colors, {\n  primary: '#ff0066', // Custom brand color\n  secondary: '#6600cc',\n  accent: '#00ccff',\n\n  // Other colors adjusted for brand\n  success: '#00cc66',\n  warning: '#ffcc00',\n  error: '#ff3300',\n});\n\n```\n\nApplying themes in your application, example for Next.js\n\n```tsx\n// src/components/theme/ThemeProvider.tsx\n'use client';\n\nimport * as stylex from '@stylexjs/stylex';\nimport { lightTheme, darkTheme } from '../../utils/themes.stylex';\nimport { useState } from 'react';\nimport { colors } from '@stylextras/open-props/colors.stylex'\nimport { sizes } from '@stylextras/open-props/sizes.stylex';\nimport { fonts } from '@stylextras/open-props/fonts.stylex';\nimport { borders } from '@stylextras/open-props/borders.stylex';\nexport default function ThemeProvider({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  const [isDarkMode, setIsDarkMode] = useState(false);\n\n  return (\n    <div {...stylex.props(isDarkMode ? darkTheme : lightTheme)}>\n      <button\n        onClick={() => setIsDarkMode(!isDarkMode)}\n        {...stylex.props(styles.button)}\n      >\n        {isDarkMode ? '☀️ Light Mode' : '🌙 Dark Mode'}\n      </button>\n      {children}\n    </div>\n  );\n}\n\nconst styles = stylex.create({\n  button: {\n    position: 'fixed',\n    top: sizes.spacing3,\n    right: sizes.spacing3,\n    padding: `${sizes.spacing2} ${sizes.spacing3}`,\n    borderRadius: borders.radius2,\n    borderWidth: borders.size1,\n    borderStyle: 'solid',\n    borderColor: colors.gray7,\n    backgroundColor: colors.gray7,\n    color: colors.gray0,\n    fontSize: fonts.size1,\n    cursor: 'pointer',\n    boxShadow: colors.gray8,\n    transitionProperty: 'all',\n    transitionDuration: '0.2s',\n    transitionTimingFunction: 'ease',\n    ':hover': {\n      backgroundColor: colors.gray5,\n      boxShadow: colors.gray4,\n    },\n    ':active': {\n      transform: 'scale(0.98)',\n    },\n  },\n});\n\n```\n\nThen in the application (Next.js example):\n\n```tsx\n// app/layout.tsx\nimport ThemeProvider from '../components/theme/ThemeProvider';\n\nexport default function RootLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <html lang=\"en\">\n      <body>\n        <ThemeProvider>\n          {children}\n        </ThemeProvider>\n      </body>\n    </html>\n  );\n}\n```\n\n### Available Token Categories\n\n| Category | Import Path | Description |\n| --- | --- | --- |\n| Colors | `colors.stylex` | Core color palette |\n| HSL Colors | `colorsHSL.stylex` | Colors in HSL format |\n| OKLCH Colors | `colorsOKLCH.stylex` | Colors in OKLCH format |\n| OKLCH Hues | `colorsOKLCHHues.stylex` | OKLCH color hues |\n| Gray OKLCH | `grayOKLCH.stylex` | Gray scale in OKLCH |\n| Highlights | `highlights.stylex` | Highlight colors |\n| Typography | `fonts.stylex` | Font sizes, families, weights |\n| Spacing | `sizes.stylex` | Spacing and sizing tokens |\n| Layouts | `layouts.stylex` | Layout-related tokens |\n| Aspect Ratios | `aspects.stylex` | Common aspect ratios |\n| Z-Index | `zIndex.stylex` | Z-index values |\n| Animations | `animations.stylex` | Animation durations and properties |\n| Animation Names | `animationNames.stylex` | Named animations |\n| Easings | `easings.stylex` | Easing functions |\n| Borders | `borders.stylex` | Border styles and radii |\n| Gradients | `gradients.stylex` | Predefined gradients |\n| Masks | `masksCornerCuts.stylex`, `masksEdges.stylex` | CSS masks |\n| Shadows | `shadows.stylex` | Box and text shadows |\n| SVG | `svg.stylex` | SVG-related tokens |\n\n\n## Example Components\n\n\n### Button Component with Variants\n\n```typescript\nimport * as stylex from '@stylexjs/stylex';\nimport { colors, spacing, typography } from '../utils/tokens.stylex';\n\nconst styles = stylex.create({\n  base: {\n    padding: `${spacing.xs} ${spacing.md}`,\n    fontSize: typography.fontSizeMedium,\n    fontWeight: typography.fontWeightMedium,\n    borderRadius: spacing.xs,\n    border: 'none',\n    cursor: 'pointer',\n    transition: 'background-color 0.2s ease',\n  },\n  primary: {\n    backgroundColor: colors.primary,\n    color: colors.textInverse,\n    ':hover': {\n      backgroundColor: colors.blue7, // Darker shade on hover\n    },\n  },\n  secondary: {\n    backgroundColor: colors.secondary,\n    color: colors.textInverse,\n    ':hover': {\n      backgroundColor: colors.purple7, // Darker shade on hover\n    },\n  },\n  outline: {\n    backgroundColor: 'transparent',\n    color: colors.primary,\n    border: `1px solid ${colors.primary}`,\n    ':hover': {\n      backgroundColor: colors.backgroundSecondary,\n    },\n  },\n  small: {\n    padding: `${spacing.xs} ${spacing.sm}`,\n    fontSize: typography.fontSizeSmall,\n  },\n  large: {\n    padding: `${spacing.sm} ${spacing.lg}`,\n    fontSize: typography.fontSizeLarge,\n  },\n});\n\nexport function Button({\n  children,\n  variant = 'primary',\n  size = 'medium',\n  onClick\n}) {\n  return (\n    <button\n      {...stylex.props(\n        styles.base,\n        variant === 'primary' && styles.primary,\n        variant === 'secondary' && styles.secondary,\n        variant === 'outline' && styles.outline,\n        size === 'small' && styles.small,\n        size === 'large' && styles.large,\n      )}\n      onClick={onClick}\n    >\n      {children}\n    </button>\n  );\n}\n\n```\n\n### Card Component with Elevation\n\n```typescript\nimport * as stylex from '@stylexjs/stylex';\nimport { colors, spacing, elevation } from '../utils/tokens.stylex';\n\nconst styles = stylex.create({\n  card: {\n    padding: spacing.lg,\n    borderRadius: spacing.sm,\n    backgroundColor: colors.backgroundPrimary,\n    transition: 'box-shadow 0.3s ease',\n  },\n  low: {\n    boxShadow: elevation.low,\n  },\n  medium: {\n    boxShadow: elevation.medium,\n  },\n  high: {\n    boxShadow: elevation.high,\n  },\n  interactive: {\n    cursor: 'pointer',\n    ':hover': {\n      boxShadow: elevation.high,\n    },\n  },\n});\n\nexport function Card({\n  children,\n  elevation = 'medium',\n  interactive = false,\n  onClick\n}) {\n  return (\n    <div\n      {...stylex.props(\n        styles.card,\n        elevation === 'low' && styles.low,\n        elevation === 'medium' && styles.medium,\n        elevation === 'high' && styles.high,\n        interactive && styles.interactive,\n      )}\n      onClick={interactive ? onClick : undefined}\n    >\n      {children}\n    </div>\n  );\n}\n```","readmeFilename":"README.md"}