@plumeria/wind 0.0.0-stage → 21.2.0

package/LICENSE-tailwindcss

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,26 @@
-# Temporary Holding Version
+# @plumeria/wind
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Tailwind CSS design values as Plumeria static tokens. It generates no utility classes.
+
+```ts
+import * as css from '@plumeria/core';
+import { blue, slate, spacing, radius, text, spin, animate } from '@plumeria/wind';
+
+const styles = css.create({
+  button: {
+    paddingInline: spacing[4],
+    fontSize: text.sm,
+    color: slate[50],
+    backgroundColor: blue[600],
+    borderRadius: radius.md,
+  },
+  loader: {
+    animation: `${spin} ${animate.spin}`,
+  },
+});
+```
+
+The values are compiled into your styles at build time, so the package adds nothing to your bundle.
+
+The values are taken from Tailwind CSS V4 (MIT).   
+See [LICENSE-tailwindcss](./LICENSE-tailwindcss).

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@plumeria/wind",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "21.2.0",
+  "description": "Tailwind CSS design-tokens for Plumeria",
+  "author": "Refirst 11",
+  "license": "MIT",
+  "homepage": "https://plumeria.dev",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zss-labs/plumeria.git",
+    "directory": "packages/wind"
+  },
+  "bugs": {
+    "url": "https://github.com/zss-labs/plumeria/issues"
+  },
+  "keywords": [
+    "plumeria",
+    "tailwindcss",
+    "tokens",
+    "design-tokens",
+    "css-in-js"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "plumeria": "./src/index.ts",
+      "types": "./src/index.ts"
+    }
+  },
+  "type": "module",
+  "types": "./src/index.ts",
+  "files": [
+    "src/",
+    "LICENSE-tailwindcss"
+  ],
+  "peerDependencies": {
+    "@plumeria/core": "^21.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "generate": "node scripts/generate.mjs"
+  }
 }

package/src/index.ts

@@ -0,0 +1,621 @@
+import * as css from '@plumeria/core';
+
+export const font = css.createStatic({
+  sans: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
+  serif: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif",
+  mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+});
+
+export const red = css.createStatic({
+  '50': 'oklch(97.1% 0.013 17.38)',
+  '100': 'oklch(93.6% 0.032 17.717)',
+  '200': 'oklch(88.5% 0.062 18.334)',
+  '300': 'oklch(80.8% 0.114 19.571)',
+  '400': 'oklch(70.4% 0.191 22.216)',
+  '500': 'oklch(63.7% 0.237 25.331)',
+  '600': 'oklch(57.7% 0.245 27.325)',
+  '700': 'oklch(50.5% 0.213 27.518)',
+  '800': 'oklch(44.4% 0.177 26.899)',
+  '900': 'oklch(39.6% 0.141 25.723)',
+  '950': 'oklch(25.8% 0.092 26.042)',
+});
+
+export const orange = css.createStatic({
+  '50': 'oklch(98% 0.016 73.684)',
+  '100': 'oklch(95.4% 0.038 75.164)',
+  '200': 'oklch(90.1% 0.076 70.697)',
+  '300': 'oklch(83.7% 0.128 66.29)',
+  '400': 'oklch(75% 0.183 55.934)',
+  '500': 'oklch(70.5% 0.213 47.604)',
+  '600': 'oklch(64.6% 0.222 41.116)',
+  '700': 'oklch(55.3% 0.195 38.402)',
+  '800': 'oklch(47% 0.157 37.304)',
+  '900': 'oklch(40.8% 0.123 38.172)',
+  '950': 'oklch(26.6% 0.079 36.259)',
+});
+
+export const amber = css.createStatic({
+  '50': 'oklch(98.7% 0.022 95.277)',
+  '100': 'oklch(96.2% 0.059 95.617)',
+  '200': 'oklch(92.4% 0.12 95.746)',
+  '300': 'oklch(87.9% 0.169 91.605)',
+  '400': 'oklch(82.8% 0.189 84.429)',
+  '500': 'oklch(76.9% 0.188 70.08)',
+  '600': 'oklch(66.6% 0.179 58.318)',
+  '700': 'oklch(55.5% 0.163 48.998)',
+  '800': 'oklch(47.3% 0.137 46.201)',
+  '900': 'oklch(41.4% 0.112 45.904)',
+  '950': 'oklch(27.9% 0.077 45.635)',
+});
+
+export const yellow = css.createStatic({
+  '50': 'oklch(98.7% 0.026 102.212)',
+  '100': 'oklch(97.3% 0.071 103.193)',
+  '200': 'oklch(94.5% 0.129 101.54)',
+  '300': 'oklch(90.5% 0.182 98.111)',
+  '400': 'oklch(85.2% 0.199 91.936)',
+  '500': 'oklch(79.5% 0.184 86.047)',
+  '600': 'oklch(68.1% 0.162 75.834)',
+  '700': 'oklch(55.4% 0.135 66.442)',
+  '800': 'oklch(47.6% 0.114 61.907)',
+  '900': 'oklch(42.1% 0.095 57.708)',
+  '950': 'oklch(28.6% 0.066 53.813)',
+});
+
+export const lime = css.createStatic({
+  '50': 'oklch(98.6% 0.031 120.757)',
+  '100': 'oklch(96.7% 0.067 122.328)',
+  '200': 'oklch(93.8% 0.127 124.321)',
+  '300': 'oklch(89.7% 0.196 126.665)',
+  '400': 'oklch(84.1% 0.238 128.85)',
+  '500': 'oklch(76.8% 0.233 130.85)',
+  '600': 'oklch(64.8% 0.2 131.684)',
+  '700': 'oklch(53.2% 0.157 131.589)',
+  '800': 'oklch(45.3% 0.124 130.933)',
+  '900': 'oklch(40.5% 0.101 131.063)',
+  '950': 'oklch(27.4% 0.072 132.109)',
+});
+
+export const green = css.createStatic({
+  '50': 'oklch(98.2% 0.018 155.826)',
+  '100': 'oklch(96.2% 0.044 156.743)',
+  '200': 'oklch(92.5% 0.084 155.995)',
+  '300': 'oklch(87.1% 0.15 154.449)',
+  '400': 'oklch(79.2% 0.209 151.711)',
+  '500': 'oklch(72.3% 0.219 149.579)',
+  '600': 'oklch(62.7% 0.194 149.214)',
+  '700': 'oklch(52.7% 0.154 150.069)',
+  '800': 'oklch(44.8% 0.119 151.328)',
+  '900': 'oklch(39.3% 0.095 152.535)',
+  '950': 'oklch(26.6% 0.065 152.934)',
+});
+
+export const emerald = css.createStatic({
+  '50': 'oklch(97.9% 0.021 166.113)',
+  '100': 'oklch(95% 0.052 163.051)',
+  '200': 'oklch(90.5% 0.093 164.15)',
+  '300': 'oklch(84.5% 0.143 164.978)',
+  '400': 'oklch(76.5% 0.177 163.223)',
+  '500': 'oklch(69.6% 0.17 162.48)',
+  '600': 'oklch(59.6% 0.145 163.225)',
+  '700': 'oklch(50.8% 0.118 165.612)',
+  '800': 'oklch(43.2% 0.095 166.913)',
+  '900': 'oklch(37.8% 0.077 168.94)',
+  '950': 'oklch(26.2% 0.051 172.552)',
+});
+
+export const teal = css.createStatic({
+  '50': 'oklch(98.4% 0.014 180.72)',
+  '100': 'oklch(95.3% 0.051 180.801)',
+  '200': 'oklch(91% 0.096 180.426)',
+  '300': 'oklch(85.5% 0.138 181.071)',
+  '400': 'oklch(77.7% 0.152 181.912)',
+  '500': 'oklch(70.4% 0.14 182.503)',
+  '600': 'oklch(60% 0.118 184.704)',
+  '700': 'oklch(51.1% 0.096 186.391)',
+  '800': 'oklch(43.7% 0.078 188.216)',
+  '900': 'oklch(38.6% 0.063 188.416)',
+  '950': 'oklch(27.7% 0.046 192.524)',
+});
+
+export const cyan = css.createStatic({
+  '50': 'oklch(98.4% 0.019 200.873)',
+  '100': 'oklch(95.6% 0.045 203.388)',
+  '200': 'oklch(91.7% 0.08 205.041)',
+  '300': 'oklch(86.5% 0.127 207.078)',
+  '400': 'oklch(78.9% 0.154 211.53)',
+  '500': 'oklch(71.5% 0.143 215.221)',
+  '600': 'oklch(60.9% 0.126 221.723)',
+  '700': 'oklch(52% 0.105 223.128)',
+  '800': 'oklch(45% 0.085 224.283)',
+  '900': 'oklch(39.8% 0.07 227.392)',
+  '950': 'oklch(30.2% 0.056 229.695)',
+});
+
+export const sky = css.createStatic({
+  '50': 'oklch(97.7% 0.013 236.62)',
+  '100': 'oklch(95.1% 0.026 236.824)',
+  '200': 'oklch(90.1% 0.058 230.902)',
+  '300': 'oklch(82.8% 0.111 230.318)',
+  '400': 'oklch(74.6% 0.16 232.661)',
+  '500': 'oklch(68.5% 0.169 237.323)',
+  '600': 'oklch(58.8% 0.158 241.966)',
+  '700': 'oklch(50% 0.134 242.749)',
+  '800': 'oklch(44.3% 0.11 240.79)',
+  '900': 'oklch(39.1% 0.09 240.876)',
+  '950': 'oklch(29.3% 0.066 243.157)',
+});
+
+export const blue = css.createStatic({
+  '50': 'oklch(97% 0.014 254.604)',
+  '100': 'oklch(93.2% 0.032 255.585)',
+  '200': 'oklch(88.2% 0.059 254.128)',
+  '300': 'oklch(80.9% 0.105 251.813)',
+  '400': 'oklch(70.7% 0.165 254.624)',
+  '500': 'oklch(62.3% 0.214 259.815)',
+  '600': 'oklch(54.6% 0.245 262.881)',
+  '700': 'oklch(48.8% 0.243 264.376)',
+  '800': 'oklch(42.4% 0.199 265.638)',
+  '900': 'oklch(37.9% 0.146 265.522)',
+  '950': 'oklch(28.2% 0.091 267.935)',
+});
+
+export const indigo = css.createStatic({
+  '50': 'oklch(96.2% 0.018 272.314)',
+  '100': 'oklch(93% 0.034 272.788)',
+  '200': 'oklch(87% 0.065 274.039)',
+  '300': 'oklch(78.5% 0.115 274.713)',
+  '400': 'oklch(67.3% 0.182 276.935)',
+  '500': 'oklch(58.5% 0.233 277.117)',
+  '600': 'oklch(51.1% 0.262 276.966)',
+  '700': 'oklch(45.7% 0.24 277.023)',
+  '800': 'oklch(39.8% 0.195 277.366)',
+  '900': 'oklch(35.9% 0.144 278.697)',
+  '950': 'oklch(25.7% 0.09 281.288)',
+});
+
+export const violet = css.createStatic({
+  '50': 'oklch(96.9% 0.016 293.756)',
+  '100': 'oklch(94.3% 0.029 294.588)',
+  '200': 'oklch(89.4% 0.057 293.283)',
+  '300': 'oklch(81.1% 0.111 293.571)',
+  '400': 'oklch(70.2% 0.183 293.541)',
+  '500': 'oklch(60.6% 0.25 292.717)',
+  '600': 'oklch(54.1% 0.281 293.009)',
+  '700': 'oklch(49.1% 0.27 292.581)',
+  '800': 'oklch(43.2% 0.232 292.759)',
+  '900': 'oklch(38% 0.189 293.745)',
+  '950': 'oklch(28.3% 0.141 291.089)',
+});
+
+export const purple = css.createStatic({
+  '50': 'oklch(97.7% 0.014 308.299)',
+  '100': 'oklch(94.6% 0.033 307.174)',
+  '200': 'oklch(90.2% 0.063 306.703)',
+  '300': 'oklch(82.7% 0.119 306.383)',
+  '400': 'oklch(71.4% 0.203 305.504)',
+  '500': 'oklch(62.7% 0.265 303.9)',
+  '600': 'oklch(55.8% 0.288 302.321)',
+  '700': 'oklch(49.6% 0.265 301.924)',
+  '800': 'oklch(43.8% 0.218 303.724)',
+  '900': 'oklch(38.1% 0.176 304.987)',
+  '950': 'oklch(29.1% 0.149 302.717)',
+});
+
+export const fuchsia = css.createStatic({
+  '50': 'oklch(97.7% 0.017 320.058)',
+  '100': 'oklch(95.2% 0.037 318.852)',
+  '200': 'oklch(90.3% 0.076 319.62)',
+  '300': 'oklch(83.3% 0.145 321.434)',
+  '400': 'oklch(74% 0.238 322.16)',
+  '500': 'oklch(66.7% 0.295 322.15)',
+  '600': 'oklch(59.1% 0.293 322.896)',
+  '700': 'oklch(51.8% 0.253 323.949)',
+  '800': 'oklch(45.2% 0.211 324.591)',
+  '900': 'oklch(40.1% 0.17 325.612)',
+  '950': 'oklch(29.3% 0.136 325.661)',
+});
+
+export const pink = css.createStatic({
+  '50': 'oklch(97.1% 0.014 343.198)',
+  '100': 'oklch(94.8% 0.028 342.258)',
+  '200': 'oklch(89.9% 0.061 343.231)',
+  '300': 'oklch(82.3% 0.12 346.018)',
+  '400': 'oklch(71.8% 0.202 349.761)',
+  '500': 'oklch(65.6% 0.241 354.308)',
+  '600': 'oklch(59.2% 0.249 0.584)',
+  '700': 'oklch(52.5% 0.223 3.958)',
+  '800': 'oklch(45.9% 0.187 3.815)',
+  '900': 'oklch(40.8% 0.153 2.432)',
+  '950': 'oklch(28.4% 0.109 3.907)',
+});
+
+export const rose = css.createStatic({
+  '50': 'oklch(96.9% 0.015 12.422)',
+  '100': 'oklch(94.1% 0.03 12.58)',
+  '200': 'oklch(89.2% 0.058 10.001)',
+  '300': 'oklch(81% 0.117 11.638)',
+  '400': 'oklch(71.2% 0.194 13.428)',
+  '500': 'oklch(64.5% 0.246 16.439)',
+  '600': 'oklch(58.6% 0.253 17.585)',
+  '700': 'oklch(51.4% 0.222 16.935)',
+  '800': 'oklch(45.5% 0.188 13.697)',
+  '900': 'oklch(41% 0.159 10.272)',
+  '950': 'oklch(27.1% 0.105 12.094)',
+});
+
+export const slate = css.createStatic({
+  '50': 'oklch(98.4% 0.003 247.858)',
+  '100': 'oklch(96.8% 0.007 247.896)',
+  '200': 'oklch(92.9% 0.013 255.508)',
+  '300': 'oklch(86.9% 0.022 252.894)',
+  '400': 'oklch(70.4% 0.04 256.788)',
+  '500': 'oklch(55.4% 0.046 257.417)',
+  '600': 'oklch(44.6% 0.043 257.281)',
+  '700': 'oklch(37.2% 0.044 257.287)',
+  '800': 'oklch(27.9% 0.041 260.031)',
+  '900': 'oklch(20.8% 0.042 265.755)',
+  '950': 'oklch(12.9% 0.042 264.695)',
+});
+
+export const gray = css.createStatic({
+  '50': 'oklch(98.5% 0.002 247.839)',
+  '100': 'oklch(96.7% 0.003 264.542)',
+  '200': 'oklch(92.8% 0.006 264.531)',
+  '300': 'oklch(87.2% 0.01 258.338)',
+  '400': 'oklch(70.7% 0.022 261.325)',
+  '500': 'oklch(55.1% 0.027 264.364)',
+  '600': 'oklch(44.6% 0.03 256.802)',
+  '700': 'oklch(37.3% 0.034 259.733)',
+  '800': 'oklch(27.8% 0.033 256.848)',
+  '900': 'oklch(21% 0.034 264.665)',
+  '950': 'oklch(13% 0.028 261.692)',
+});
+
+export const zinc = css.createStatic({
+  '50': 'oklch(98.5% 0 none)',
+  '100': 'oklch(96.7% 0.001 286.375)',
+  '200': 'oklch(92% 0.004 286.32)',
+  '300': 'oklch(87.1% 0.006 286.286)',
+  '400': 'oklch(70.5% 0.015 286.067)',
+  '500': 'oklch(55.2% 0.016 285.938)',
+  '600': 'oklch(44.2% 0.017 285.786)',
+  '700': 'oklch(37% 0.013 285.805)',
+  '800': 'oklch(27.4% 0.006 286.033)',
+  '900': 'oklch(21% 0.006 285.885)',
+  '950': 'oklch(14.1% 0.005 285.823)',
+});
+
+export const neutral = css.createStatic({
+  '50': 'oklch(98.5% 0 none)',
+  '100': 'oklch(97% 0 none)',
+  '200': 'oklch(92.2% 0 none)',
+  '300': 'oklch(87% 0 none)',
+  '400': 'oklch(70.8% 0 none)',
+  '500': 'oklch(55.6% 0 none)',
+  '600': 'oklch(43.9% 0 none)',
+  '700': 'oklch(37.1% 0 none)',
+  '800': 'oklch(26.9% 0 none)',
+  '900': 'oklch(20.5% 0 none)',
+  '950': 'oklch(14.5% 0 none)',
+});
+
+export const stone = css.createStatic({
+  '50': 'oklch(98.5% 0.001 106.423)',
+  '100': 'oklch(97% 0.001 106.424)',
+  '200': 'oklch(92.3% 0.003 48.717)',
+  '300': 'oklch(86.9% 0.005 56.366)',
+  '400': 'oklch(70.9% 0.01 56.259)',
+  '500': 'oklch(55.3% 0.013 58.071)',
+  '600': 'oklch(44.4% 0.011 73.639)',
+  '700': 'oklch(37.4% 0.01 67.558)',
+  '800': 'oklch(26.8% 0.007 34.298)',
+  '900': 'oklch(21.6% 0.006 56.043)',
+  '950': 'oklch(14.7% 0.004 49.25)',
+});
+
+export const mauve = css.createStatic({
+  '50': 'oklch(98.5% 0 none)',
+  '100': 'oklch(96% 0.003 325.6)',
+  '200': 'oklch(92.2% 0.005 325.62)',
+  '300': 'oklch(86.5% 0.012 325.68)',
+  '400': 'oklch(71.1% 0.019 323.02)',
+  '500': 'oklch(54.2% 0.034 322.5)',
+  '600': 'oklch(43.5% 0.029 321.78)',
+  '700': 'oklch(36.4% 0.029 323.89)',
+  '800': 'oklch(26.3% 0.024 320.12)',
+  '900': 'oklch(21.2% 0.019 322.12)',
+  '950': 'oklch(14.5% 0.008 326)',
+});
+
+export const olive = css.createStatic({
+  '50': 'oklch(98.8% 0.003 106.5)',
+  '100': 'oklch(96.6% 0.005 106.5)',
+  '200': 'oklch(93% 0.007 106.5)',
+  '300': 'oklch(88% 0.011 106.6)',
+  '400': 'oklch(73.7% 0.021 106.9)',
+  '500': 'oklch(58% 0.031 107.3)',
+  '600': 'oklch(46.6% 0.025 107.3)',
+  '700': 'oklch(39.4% 0.023 107.4)',
+  '800': 'oklch(28.6% 0.016 107.4)',
+  '900': 'oklch(22.8% 0.013 107.4)',
+  '950': 'oklch(15.3% 0.006 107.1)',
+});
+
+export const mist = css.createStatic({
+  '50': 'oklch(98.7% 0.002 197.1)',
+  '100': 'oklch(96.3% 0.002 197.1)',
+  '200': 'oklch(92.5% 0.005 214.3)',
+  '300': 'oklch(87.2% 0.007 219.6)',
+  '400': 'oklch(72.3% 0.014 214.4)',
+  '500': 'oklch(56% 0.021 213.5)',
+  '600': 'oklch(45% 0.017 213.2)',
+  '700': 'oklch(37.8% 0.015 216)',
+  '800': 'oklch(27.5% 0.011 216.9)',
+  '900': 'oklch(21.8% 0.008 223.9)',
+  '950': 'oklch(14.8% 0.004 228.8)',
+});
+
+export const taupe = css.createStatic({
+  '50': 'oklch(98.6% 0.002 67.8)',
+  '100': 'oklch(96% 0.002 17.2)',
+  '200': 'oklch(92.2% 0.005 34.3)',
+  '300': 'oklch(86.8% 0.007 39.5)',
+  '400': 'oklch(71.4% 0.014 41.2)',
+  '500': 'oklch(54.7% 0.021 43.1)',
+  '600': 'oklch(43.8% 0.017 39.3)',
+  '700': 'oklch(36.7% 0.016 35.7)',
+  '800': 'oklch(26.8% 0.011 36.5)',
+  '900': 'oklch(21.4% 0.009 43.1)',
+  '950': 'oklch(14.7% 0.004 49.3)',
+});
+
+export const color = css.createStatic({
+  black: '#000',
+  white: '#fff',
+});
+
+export const breakpoint = css.createStatic({
+  sm: '40rem',
+  md: '48rem',
+  lg: '64rem',
+  xl: '80rem',
+  '2xl': '96rem',
+});
+
+export const container = css.createStatic({
+  '3xs': '16rem',
+  '2xs': '18rem',
+  xs: '20rem',
+  sm: '24rem',
+  md: '28rem',
+  lg: '32rem',
+  xl: '36rem',
+  '2xl': '42rem',
+  '3xl': '48rem',
+  '4xl': '56rem',
+  '5xl': '64rem',
+  '6xl': '72rem',
+  '7xl': '80rem',
+});
+
+export const text = css.createStatic({
+  xs: '0.75rem',
+  sm: '0.875rem',
+  base: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+  '2xl': '1.5rem',
+  '3xl': '1.875rem',
+  '4xl': '2.25rem',
+  '5xl': '3rem',
+  '6xl': '3.75rem',
+  '7xl': '4.5rem',
+  '8xl': '6rem',
+  '9xl': '8rem',
+});
+
+export const textLineHeight = css.createStatic({
+  xs: 'calc(1 / 0.75)',
+  sm: 'calc(1.25 / 0.875)',
+  base: 'calc(1.5 / 1)',
+  lg: 'calc(1.75 / 1.125)',
+  xl: 'calc(1.75 / 1.25)',
+  '2xl': 'calc(2 / 1.5)',
+  '3xl': 'calc(2.25 / 1.875)',
+  '4xl': 'calc(2.5 / 2.25)',
+  '5xl': '1',
+  '6xl': '1',
+  '7xl': '1',
+  '8xl': '1',
+  '9xl': '1',
+});
+
+export const fontWeight = css.createStatic({
+  thin: '100',
+  extralight: '200',
+  light: '300',
+  normal: '400',
+  medium: '500',
+  semibold: '600',
+  bold: '700',
+  extrabold: '800',
+  black: '900',
+});
+
+export const tracking = css.createStatic({
+  tighter: '-0.05em',
+  tight: '-0.025em',
+  normal: '0em',
+  wide: '0.025em',
+  wider: '0.05em',
+  widest: '0.1em',
+});
+
+export const leading = css.createStatic({
+  tight: '1.25',
+  snug: '1.375',
+  normal: '1.5',
+  relaxed: '1.625',
+  loose: '2',
+});
+
+export const radius = css.createStatic({
+  xs: '0.125rem',
+  sm: '0.25rem',
+  md: '0.375rem',
+  lg: '0.5rem',
+  xl: '0.75rem',
+  '2xl': '1rem',
+  '3xl': '1.5rem',
+  '4xl': '2rem',
+});
+
+export const shadow = css.createStatic({
+  '2xs': '0 1px rgb(0 0 0 / 0.05)',
+  xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+  sm: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+  md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+  lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+  xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
+});
+
+export const insetShadow = css.createStatic({
+  '2xs': 'inset 0 1px rgb(0 0 0 / 0.05)',
+  xs: 'inset 0 1px 1px rgb(0 0 0 / 0.05)',
+  sm: 'inset 0 2px 4px rgb(0 0 0 / 0.05)',
+});
+
+export const dropShadow = css.createStatic({
+  xs: '0 1px 1px rgb(0 0 0 / 0.05)',
+  sm: '0 1px 2px rgb(0 0 0 / 0.15)',
+  md: '0 3px 3px rgb(0 0 0 / 0.12)',
+  lg: '0 4px 4px rgb(0 0 0 / 0.15)',
+  xl: '0 9px 7px rgb(0 0 0 / 0.1)',
+  '2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
+});
+
+export const textShadow = css.createStatic({
+  '2xs': '0px 1px 0px rgb(0 0 0 / 0.15)',
+  xs: '0px 1px 1px rgb(0 0 0 / 0.2)',
+  sm: '0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075)',
+  md: '0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)',
+  lg: '0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)',
+});
+
+export const ease = css.createStatic({
+  in: 'cubic-bezier(0.4, 0, 1, 1)',
+  out: 'cubic-bezier(0, 0, 0.2, 1)',
+  'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+});
+
+export const blur = css.createStatic({
+  xs: '4px',
+  sm: '8px',
+  md: '12px',
+  lg: '16px',
+  xl: '24px',
+  '2xl': '40px',
+  '3xl': '64px',
+});
+
+export const perspective = css.createStatic({
+  dramatic: '100px',
+  near: '300px',
+  normal: '500px',
+  midrange: '800px',
+  distant: '1200px',
+});
+
+export const aspect = css.createStatic({
+  video: '16 / 9',
+});
+
+export const transition = css.createStatic({
+  duration: '150ms',
+  timingFunction: 'cubic-bezier(0.4, 0, 0.2, 1)',
+});
+
+export const spacing = css.createStatic({
+  px: '1px',
+  '0': '0',
+  '0.5': '0.125rem',
+  '1': '0.25rem',
+  '1.5': '0.375rem',
+  '2': '0.5rem',
+  '2.5': '0.625rem',
+  '3': '0.75rem',
+  '3.5': '0.875rem',
+  '4': '1rem',
+  '5': '1.25rem',
+  '6': '1.5rem',
+  '7': '1.75rem',
+  '8': '2rem',
+  '9': '2.25rem',
+  '10': '2.5rem',
+  '11': '2.75rem',
+  '12': '3rem',
+  '14': '3.5rem',
+  '16': '4rem',
+  '20': '5rem',
+  '24': '6rem',
+  '28': '7rem',
+  '32': '8rem',
+  '36': '9rem',
+  '40': '10rem',
+  '44': '11rem',
+  '48': '12rem',
+  '52': '13rem',
+  '56': '14rem',
+  '60': '15rem',
+  '64': '16rem',
+  '72': '18rem',
+  '80': '20rem',
+  '96': '24rem',
+});
+
+export const animate = css.createStatic({
+  spin: '1s linear infinite',
+  ping: '1s cubic-bezier(0, 0, 0.2, 1) infinite',
+  pulse: '2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+  bounce: '1s infinite',
+});
+
+export const spin = css.keyframes({
+  to: {
+    transform: 'rotate(360deg)',
+  },
+});
+
+export const ping = css.keyframes({
+  '75%': {
+    transform: 'scale(2)',
+    opacity: '0',
+  },
+  '100%': {
+    transform: 'scale(2)',
+    opacity: '0',
+  },
+});
+
+export const pulse = css.keyframes({
+  '50%': {
+    opacity: '0.5',
+  },
+});
+
+export const bounce = css.keyframes({
+  '0%': {
+    transform: 'translateY(-25%)',
+    animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
+  },
+  '100%': {
+    transform: 'translateY(-25%)',
+    animationTimingFunction: 'cubic-bezier(0.8, 0, 1, 1)',
+  },
+  '50%': {
+    transform: 'none',
+    animationTimingFunction: 'cubic-bezier(0, 0, 0.2, 1)',
+  },
+});