@typestyles/open-props 0.0.0-unstable.b43e2f3d324c → 0.0.0-unstable.b5a2077e79ce

package/LICENSE

@@ -0,0 +1,204 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   Copyright 2026 The TypeStyles Authors
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,171 @@
+# @typestyles/open-props
+
+Type-safe [Open Props](https://open-props.style/) design tokens for [typestyles](https://github.com/type-styles/typestyles).
+
+Open Props is a curated set of CSS custom properties for spacing, color, typography, shadows, easings, and more. This package registers every scale through `tokens.create()` so you get **`var(--token-name)` references with full TypeScript autocomplete** — no separate `@import 'open-props'` step, no stringly-typed token names.
+
+Full guide: [Open Props integration](https://typestyles.dev/docs/open-props)
+
+## Why not raw Open Props?
+
+| Raw Open Props                          | `@typestyles/open-props`                                       |
+| --------------------------------------- | -------------------------------------------------------------- |
+| CSS `@import` + `var(--size-3)` strings | Typed `sizes['3']` → `var(--size-3)`                           |
+| No autocomplete for token names         | Autocomplete for every scale and key                           |
+| Separate from your component styles     | Same token system as `tokens.create` — composable and themable |
+
+Tokens register on `:root` when imported, identical to hand-written `tokens.create` calls. They work in plain CSS too: `padding: var(--size-4)`.
+
+## Installation
+
+```bash
+npm install @typestyles/open-props typestyles
+```
+
+No additional CSS file is required — importing a token module registers the custom properties.
+
+## Quick start
+
+```ts
+import { createTypeStyles } from 'typestyles';
+import { sizes, radius, color, font } from '@typestyles/open-props';
+
+const { recipe } = createTypeStyles({ scopeId: 'app' });
+
+const card = recipe('card', {
+  base: {
+    padding: sizes['4'],
+    borderRadius: radius['3'],
+    backgroundColor: color['gray-2'],
+    fontFamily: font['sans'],
+  },
+});
+```
+
+Rendered CSS uses standard custom properties:
+
+```css
+.card-base {
+  padding: var(--size-4);
+  border-radius: var(--radius-3);
+  background-color: var(--color-gray-2);
+  font-family: var(--font-sans);
+}
+```
+
+## Available scales
+
+Import only what you need — each export is a separate `tokens.create` registration:
+
+| Export              | Namespace                | Examples                                                     |
+| ------------------- | ------------------------ | ------------------------------------------------------------ |
+| `sizes`             | `--size-*`               | `sizes['4']`, `sizes['fluid-2']`, `sizes['content-1']`       |
+| `radius`            | `--radius-*`             | `radius['3']`, `radius.pill`                                 |
+| `color`             | `--color-*`              | `color['gray-5']`, `color['blue-6']` — 19 scales × 13 shades |
+| `shadow`            | `--shadow-*`             | `shadow['2']`, `shadow['inner-1']`                           |
+| `font`              | `--font-*`               | `font.sans`, `font.mono`, `font['neo-grotesque']`            |
+| `fontSize`          | `--font-size-*`          | `fontSize['2']`, `fontSize['fluid-1']`                       |
+| `fontWeight`        | `--font-weight-*`        | `fontWeight['5']`                                            |
+| `fontLetterspacing` | `--font-letterspacing-*` |                                                              |
+| `fontLineheight`    | `--font-lineheight-*`    |                                                              |
+| `easing`            | `--ease-*`               | `easing['3']`, `easing['elastic-out-3']`                     |
+| `animation`         | `--animation-*`          | `animation['fade-in']`, `animation.spin`                     |
+| `duration`          | `--duration-*`           |                                                              |
+| `gradient`          | `--gradient-*`           | `gradient['12']`                                             |
+| `media`             | `--media-*`              | `media.md`, `media.dark` — use in `@media ${media.md}`       |
+| `zIndex`            | `--zindex-*`             |                                                              |
+| `ratio`             | `--ratio-*`              | `ratio.golden`, `ratio.widescreen`                           |
+| `borderSize`        | `--border-size-*`        |                                                              |
+| `brand`             | `--brand-*`              | Social/platform brand colors                                 |
+| `palette`           | `--palette-*`            | OKLCH palette steps                                          |
+| `noise`             | `--noise-*`              |                                                              |
+| `masksEdges`        | `--masks-edge-*`         |                                                              |
+| `masksCornerCuts`   | `--masks-corner-cuts-*`  |                                                              |
+
+Bracket notation is required for numeric keys: `sizes['4']`, not `sizes.4`.
+
+## Reference tokens defined elsewhere
+
+If tokens are registered in a shared design-system package, reference them without re-importing definitions:
+
+```ts
+import { useOpenProps } from '@typestyles/open-props';
+
+const spacing = useOpenProps('size');
+spacing['4']; // var(--size-4)
+```
+
+`useOpenProps` is an alias for `tokens.use()` with Open Props typing.
+
+## Mix with custom tokens
+
+```ts
+import { createTypeStyles } from 'typestyles';
+import { color, sizes } from '@typestyles/open-props';
+
+const { recipe, tokens } = createTypeStyles({ scopeId: 'app' });
+
+const brand = tokens.create('brand', {
+  primary: '#ff6b6b',
+});
+
+const hero = recipe('hero', {
+  base: {
+    padding: sizes['6'],
+    backgroundColor: brand.primary,
+    color: color['gray-0'],
+  },
+});
+```
+
+## Theming
+
+Open Props tokens are CSS custom properties — override them like any typestyles token:
+
+```tsx
+import { createTypeStyles } from 'typestyles';
+import { color } from '@typestyles/open-props';
+
+const { tokens } = createTypeStyles({ scopeId: 'app' });
+
+const dark = tokens.createTheme('dark', {
+  base: {
+    color: {
+      'gray-0': color['gray-10'],
+      'gray-1': color['gray-9'],
+    },
+  },
+});
+
+<div className={dark.className}>...</div>;
+```
+
+See [Theming](https://typestyles.dev/docs/theming) for `createTheme`, dark mode presets, and `Theme`.
+
+## Production builds
+
+Import Open Props scales from your [convention entry](https://typestyles.dev/docs/zero-runtime) so token `:root` rules land in the extracted CSS:
+
+```ts
+// src/typestyles-entry.ts
+import { sizes, color, radius } from '@typestyles/open-props';
+import './components';
+```
+
+Or import scales in the modules that use them — side-effect registration runs at module load.
+
+## Related packages
+
+| Package                         | Role                                           |
+| ------------------------------- | ---------------------------------------------- |
+| [`typestyles`](../typestyles)   | Core styling API                               |
+| [`@typestyles/props`](../props) | Build utility props on top of these scales     |
+| [`@typestyles/vite`](../vite)   | Extract static CSS including token definitions |
+
+## Credits
+
+Token values are derived from [Open Props](https://open-props.style/) by [Adam Argyle](https://github.com/argyleink). TypeStyles integration maintains naming parity with the upstream `--*` custom properties.
+
+## License
+
+Apache-2.0

package/dist/index.cjs

@@ -3,7 +3,8 @@
 var typestyles = require('typestyles');
 
 // src/index.ts
-var sizes = typestyles.tokens.create("size", {
+var tokens = typestyles.createTokens();
+var sizes = tokens.create("size", {
   "0": "0",
   "1": "0.25rem",
   "2": "0.5rem",
@@ -27,7 +28,7 @@ var sizes = typestyles.tokens.create("size", {
   "fluid-7": "clamp(8rem, 30vw, 12rem)",
   "fluid-8": "clamp(12rem, 40vw, 20rem)"
 });
-var radius = typestyles.tokens.create("radius", {
+var radius = tokens.create("radius", {
   "0": "0",
   "1": "2px",
   "2": "4px",
@@ -62,7 +63,7 @@ var radius = typestyles.tokens.create("radius", {
   round: "100%",
   pill: "9999px"
 });
-var shadow = typestyles.tokens.create("shadow", {
+var shadow = tokens.create("shadow", {
   "1": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
   "2": "0 2px 4px 0 rgb(0 0 0 / 0.05), 0 4px 8px 0 rgb(0 0 0 / 0.05)",
   "3": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
@@ -75,7 +76,7 @@ var shadow = typestyles.tokens.create("shadow", {
   "inner-4": "inset 0 10px 15px -3px rgb(0 0 0 / 0.1), inset 0 4px 6px -4px rgb(0 0 0 / 0.1)",
   "inner-5": "inset 0 20px 25px -5px rgb(0 0 0 / 0.1), inset 0 8px 10px -6px rgb(0 0 0 / 0.1)"
 });
-var easing = typestyles.tokens.create("ease", {
+var easing = tokens.create("ease", {
   "1": "0.25, 0.1, 0.25, 1",
   "2": "0.42, 0, 1, 1",
   "3": "0, 0, 0.58, 1",
@@ -117,7 +118,7 @@ var easing = typestyles.tokens.create("ease", {
   "bounce-4": "0.45, 0.05, 0.55, 0.95",
   "bounce-5": "0.45, 0.05, 0.55, 0.95"
 });
-var animation = typestyles.tokens.create("animation", {
+var animation = tokens.create("animation", {
   "fade-in": "fade-in 0.5s var(--ease-3)",
   "fade-out": "fade-out 0.5s var(--ease-3)",
   "scale-in": "scale-in 0.2s var(--ease-3)",
@@ -140,7 +141,7 @@ var animation = typestyles.tokens.create("animation", {
   pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
   pop: "pop 0.3s var(--ease-out-4)"
 });
-var fontSize = typestyles.tokens.create("font-size", {
+var fontSize = tokens.create("font-size", {
   "00": "0.5rem",
   "0": "0.75rem",
   "1": "1rem",
@@ -156,7 +157,7 @@ var fontSize = typestyles.tokens.create("font-size", {
   "fluid-2": "clamp(1.5rem, 6vw, 2.5rem)",
   "fluid-3": "clamp(2rem, 9vw, 3.5rem)"
 });
-var fontWeight = typestyles.tokens.create("font-weight", {
+var fontWeight = tokens.create("font-weight", {
   "1": "100",
   "2": "200",
   "3": "300",
@@ -167,7 +168,7 @@ var fontWeight = typestyles.tokens.create("font-weight", {
   "8": "800",
   "9": "900"
 });
-var fontLetterspacing = typestyles.tokens.create("font-letterspacing", {
+var fontLetterspacing = tokens.create("font-letterspacing", {
   "0": "-.05em",
   "1": ".025em",
   "2": ".050em",
@@ -177,7 +178,7 @@ var fontLetterspacing = typestyles.tokens.create("font-letterspacing", {
   "6": ".750em",
   "7": "1em"
 });
-var fontLineheight = typestyles.tokens.create("font-lineheight", {
+var fontLineheight = tokens.create("font-lineheight", {
   "00": ".95",
   "0": "1.1",
   "1": "1.25",
@@ -186,7 +187,7 @@ var fontLineheight = typestyles.tokens.create("font-lineheight", {
   "4": "1.75",
   "5": "2"
 });
-var zIndex = typestyles.tokens.create("zindex", {
+var zIndex = tokens.create("zindex", {
   "1": "100",
   "2": "200",
   "3": "300",
@@ -194,7 +195,7 @@ var zIndex = typestyles.tokens.create("zindex", {
   "5": "500",
   max: "9999"
 });
-var ratio = typestyles.tokens.create("ratio", {
+var ratio = tokens.create("ratio", {
   square: "1",
   landscape: "4/3",
   portrait: "3/4",
@@ -202,7 +203,7 @@ var ratio = typestyles.tokens.create("ratio", {
   ultrawide: "18/5",
   golden: "1.6180/1"
 });
-var gradient = typestyles.tokens.create("gradient", {
+var gradient = tokens.create("gradient", {
   "1": "linear-gradient(to bottom right, #e0e7ff, #faf5ff, #f0fdfa)",
   "2": "linear-gradient(to bottom right, #e0e7ff, #f5f3ff, #fdf4ff)",
   "3": "linear-gradient(to bottom right, #e0e7ff, #f5f3ff, #faf5ff)",
@@ -234,7 +235,7 @@ var gradient = typestyles.tokens.create("gradient", {
   "29": "linear-gradient(to bottom right, #030712, #4a044e, #f0abfc)",
   "30": "linear-gradient(to bottom right, #030712, #2e1065, #c4b5fd)"
 });
-var media = typestyles.tokens.create("media", {
+var media = tokens.create("media", {
   motion: "(prefers-reduced-motion: no-preference)",
   motionReduce: "(prefers-reduced-motion: reduce)",
   dark: "(prefers-color-scheme: dark)",
@@ -255,7 +256,7 @@ var media = typestyles.tokens.create("media", {
   "8xl": "(min-width: 96rem)",
   "9xl": "(min-width: 100rem)"
 });
-var duration = typestyles.tokens.create("duration", {
+var duration = tokens.create("duration", {
   "0": "0s",
   "1": "0.05s",
   "2": "0.1s",
@@ -263,7 +264,7 @@ var duration = typestyles.tokens.create("duration", {
   "4": "0.4s",
   "5": "0.8s"
 });
-var borderSize = typestyles.tokens.create("border-size", {
+var borderSize = tokens.create("border-size", {
   "0": "0",
   "1": "1px",
   "2": "2px",
@@ -271,7 +272,7 @@ var borderSize = typestyles.tokens.create("border-size", {
   "4": "8px",
   "5": "16px"
 });
-var noise = typestyles.tokens.create("noise", {
+var noise = tokens.create("noise", {
   "1": 'url("data:image/svg+xml,")',
   "2": 'url("data:image/svg+xml,")',
   "3": 'url("data:image/svg+xml,")',
@@ -600,8 +601,8 @@ for (const colorName of colors) {
     });
   }
 }
-var color = typestyles.tokens.create("color", colorValues);
-var brand = typestyles.tokens.create("brand", {
+var color = tokens.create("color", colorValues);
+var brand = tokens.create("brand", {
   facebook: "#1877f2",
   youtube: "#ff0000",
   twitter: "#1da1f2",
@@ -633,7 +634,7 @@ var brand = typestyles.tokens.create("brand", {
   amazon: "#ff9900",
   twitch: "#9146ff"
 });
-var font = typestyles.tokens.create("font", {
+var font = tokens.create("font", {
   "system-ui": "system-ui, sans-serif",
   transitional: "Charter, Bitstream Charter, Sitka Text, Cambria, serif",
   "old-style": "Iowan Old Style, Palatino Linotype, URW Palladio L, P052, serif",
@@ -653,7 +654,7 @@ var font = typestyles.tokens.create("font", {
   serif: 'Georgia, Cambria, "Times New Roman", Times, serif',
   mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
 });
-var palette = typestyles.tokens.create("palette", {
+var palette = tokens.create("palette", {
   "1": "oklch(97% .014 260)",
   "2": "oklch(94% .028 261)",
   "3": "oklch(88% .057 261)",
@@ -671,14 +672,14 @@ var palette = typestyles.tokens.create("palette", {
   "15": "oklch(29% .14 259)",
   "16": "oklch(27% .12 259)"
 });
-var masksEdges = typestyles.tokens.create("masks-edge", {
+var masksEdges = tokens.create("masks-edge", {
   "0": "linear-gradient(to right, #000 90%, transparent 90% 100%)",
   "1": "linear-gradient(to right, #000 80%, transparent 80% 100%)",
   "2": "linear-gradient(to right, #000 70%, transparent 70% 100%)",
   "3": "linear-gradient(to right, #000 60%, transparent 60% 100%)",
   "4": "linear-gradient(to right, #000 50%, transparent 50% 100%)"
 });
-var masksCornerCuts = typestyles.tokens.create("masks-corner-cuts", {
+var masksCornerCuts = tokens.create("masks-corner-cuts", {
   "1": "polygon(0 8%, 8% 0, 100% 0, 100% 100%, 0 100%)",
   "2": "polygon(0 15%, 15% 0, 100% 0, 100% 100%, 0 100%)",
   "3": "polygon(0 22%, 22% 0, 100% 0, 100% 100%, 0 100%)",
@@ -687,13 +688,9 @@ var masksCornerCuts = typestyles.tokens.create("masks-corner-cuts", {
   "6": "polygon(0 15%, 15% 0, 85% 0, 100% 15%, 100% 100%, 0 100%)"
 });
 function useOpenProps(namespace) {
-  return typestyles.tokens.use(namespace);
+  return tokens.use(namespace);
 }
 
-Object.defineProperty(exports, "tokens", {
-  enumerable: true,
-  get: function () { return typestyles.tokens; }
-});
 exports.animation = animation;
 exports.borderSize = borderSize;
 exports.brand = brand;
@@ -715,6 +712,7 @@ exports.radius = radius;
 exports.ratio = ratio;
 exports.shadow = shadow;
 exports.sizes = sizes;
+exports.tokens = tokens;
 exports.useOpenProps = useOpenProps;
 exports.zIndex = zIndex;
 //# sourceMappingURL=index.cjs.map