add radix ui preset (#419)

.changeset/beige-crabs-call.md

@@ -0,0 +1,5 @@
+---
+'@twind/preset-typography': patch
+---
+
+use flattend color name to lookup dark shade for a color

.changeset/breezy-beans-promise.md

@@ -0,0 +1,5 @@
+---
+'@twind/preset-tailwind': minor
+---
+
+allow to omit the default color palette

.changeset/cold-zoos-nail.md

@@ -0,0 +1,7 @@
+---
+'@twind/preset-radix-ui': patch
+'@sites/twind.run': patch
+'@sites/twind.style': patch
+---
+
+add radix-ui example to twind.run

.changeset/pink-rivers-leave.md

@@ -0,0 +1,5 @@
+---
+'@twind/preset-radix-ui': patch
+---
+
+add radix ui preset

.codesandbox/ci.json

@@ -19,6 +19,7 @@
     "@twind/preset-container-queries": "packages/preset-container-queries/dist",
     "@twind/preset-ext": "packages/preset-ext/dist",
     "@twind/preset-line-clamp": "packages/preset-line-clamp/dist",
+    "@twind/preset-radix-ui": "packages/preset-radix-ui/dist",
     "@twind/preset-tailwind": "packages/preset-tailwind/dist",
     "@twind/preset-tailwind-forms": "packages/preset-tailwind-forms/dist",
     "@twind/preset-typography": "packages/preset-typography/dist",

.github/actions/publish-prerelease/action.yml

@@ -40,6 +40,19 @@ runs:
       shell: bash
       run: pnpm changeset --empty
 
+    - name: 📝  Ensure sites versions are bumped
+      uses: fertrig/create-file-action@1.0.2
+      with:
+        path: '.changesets'
+        file: 'sites-versions-bump.md'
+        content: |
+          ---
+          '@sites/twind.run': patch
+          '@sites/twind.style': patch
+          ---
+
+          bump version
+
     - name: 📦  Update packages
       shell: bash
       run: pnpm changeset version --no-git-tag --snapshot ${{ inputs.tag }} --snapshot-prerelease-template "${{ inputs.template }}"

.github/workflows/ci.yml

@@ -172,7 +172,7 @@ jobs:
         uses: thollander/actions-comment-pull-request@v2
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          comment_includes: '## Deployed site previews with [![Cloudflare Pages]'
+          comment_tag: '## Deployed site previews with [![Cloudflare Pages]'
           message: |
             > **Latest commit**: ${{ github.sha }}
 

.stackblitz/codeflow.json

@@ -8,6 +8,7 @@
       "@twind/preset-container-queries": "./packages/preset-container-queries",
       "@twind/preset-ext": "./packages/preset-ext",
       "@twind/preset-line-clamp": "./packages/preset-line-clamp",
+      "@twind/preset-radix-ui": "./packages/preset-radix-ui",
       "@twind/preset-tailwind": "./packages/preset-tailwind",
       "@twind/preset-tailwind-forms": "./packages/preset-tailwind-forms",
       "@twind/preset-typography": "./packages/preset-typography",

CHANGELOG.md

@@ -10,6 +10,7 @@
 - [@twind/preset-conatiner-queries](./packages/preset-conatiner-queries/CHANGELOG.md)
 - [@twind/preset-ext](./packages/preset-ext/CHANGELOG.md)
 - [@twind/preset-line-clamp](./packages/preset-line-clamp/CHANGELOG.md)
+- [@twind/preset-radix-ui](./packages/preset-radix-ui/CHANGELOG.md)
 - [@twind/preset-tailwind](./packages/preset-tailwind/CHANGELOG.md)
 - [@twind/preset-tailwind-forms](./packages/preset-tailwind-forms/CHANGELOG.md)
 - [@twind/preset-typography](./packages/preset-typography/CHANGELOG.md)

documentation/preset-line-clamp.md

@@ -5,7 +5,7 @@ package: '@twind/preset-line-clamp'
 playground: true
 excerpt: |
   A preset that provides utilities for visually truncating text after a fixed number of lines.
-next: ./preset-tailwind.md
+next: ./preset-radix-ui.md
 ---
 
 > **Note**

documentation/preset-radix-ui.md

@@ -0,0 +1,208 @@
+---
+section: Presets
+label: Radix UI
+package: '@twind/preset-radix-ui'
+playground: true
+excerpt: |
+  The [Radix UI](https://www.radix-ui.com/colors) [color scales](https://www.radix-ui.com/docs/colors/palette-composition/the-scales) as a twind preset with automatic dark colors.
+next: ./preset-tailwind.md
+---
+
+## 🤝 Compatibility
+
+| @twind/preset-tailwind | @radix-ui/colors |
+| ---------------------- | ---------------- |
+| `>=1.1.0 <1.2.0`       | `0.1.8`          |
+
+## 📦 Installation
+
+> **Important**
+> This preset only includes the [color scales](https://www.radix-ui.com/docs/colors/palette-composition/the-scales) from [Radix UI › Colors](https://www.radix-ui.com/colors) and a dark color function to enable automatic dark colors. It does not include any rules or variants. Please read the [Usage](#-usage) guide for detailed instructions.
+
+**with [@twind/core](./installation#local--bundler)**
+
+Install from npm:
+
+```sh
+npm install @twind/core @twind/preset-radix-ui
+```
+
+Add the preset to your twind config:
+
+```js title="twind.config.js"
+import { defineConfig } from '@twind/core'
+import presetRadixUi from '@twind/preset-radix-ui'
+
+export default defineConfig({
+  presets: [presetRadixUi()],
+  /* config */
+})
+```
+
+<details><summary>Usage with a script tag</summary>
+
+```html
+<head>
+  <script
+    src="https://cdn.jsdelivr.net/combine/npm/@twind/core@1,npm/@twind/preset-radix-ui@1"
+    crossorigin
+  ></script>
+  <script>
+    twind.install({
+      presets: [twind.presetRadixUi()],
+      /* config */
+    })
+  </script>
+</head>
+```
+
+</details>
+
+**with [Twind CDN](./installation#twind-cdn)**
+
+```html
+<head>
+  <script src="https://cdn.twind.style/radix-ui" crossorigin></script>
+  <script>
+    twind.install({
+      presets: [twind.presetRadixUi()],
+      /* config */
+    })
+  </script>
+</head>
+```
+
+## 🙇 Usage
+
+This preset does not include any rules or variants but it includes all [colors](https://www.radix-ui.com/docs/colors/palette-composition/the-scales). To reduce the package size it is advised to select only the colors you'll need. Please refer to [Radix UI › Colors › Composing a color palette](https://www.radix-ui.com/docs/colors/palette-composition/composing-a-palette) for a guide how to compose a color palette and [Radix UI › Colors › Understanding the scale](https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale) to learn which scale step is the most appropriate for each use case.
+
+### With @twind/preset-tailwind
+
+The following example shows how to use the colors with [@twind/preset-tailwind](./preset-tailwind) using [semantic color names](https://www.radix-ui.com/docs/colors/palette-composition/composing-a-palette#choosing-semantic-scales) with automatic dark colors.
+
+```js title="twind.config.js"
+import { defineConfig } from '@twind/core'
+import presetAutoprefix from '@twind/preset-autoprefix'
+// Using @twind/preset-tailwind/base to exclude the default tailwind colors
+import presetTailwind from '@twind/preset-tailwind/base'
+
+// Following https://www.radix-ui.com/docs/colors/palette-composition/composing-a-palette
+// This color palette is used on this site
+import {
+  sky as brand,
+  skyDark as brandDark,
+  plum as accent,
+  plumDark as accentDark,
+  slate as neutral,
+  slateDark as neutralDark,
+
+  // Error: Red/Tomato/Crimson
+  tomato as error,
+  tomatoDark as errorDark,
+
+  // Success: Teal/Green/Grass/Mint
+  green as success,
+  greenDark as successDark,
+
+  // Warning: Yellow/Amber
+  amber as warning,
+  amberDark as warningDark,
+
+  // Info: Blue/Sky/Cyan
+  cyan as info,
+  cyanDark as infoDark,
+} from '@twind/preset-radix-ui/colors'
+
+// Optional: enable automatic dark colors
+import darkColor from '@twind/preset-radix-ui/darkColor'
+
+export default defineConfig({
+  presets: [
+    presetAutoprefix(),
+    presetTailwind({
+      colors: {
+        brand,
+        brandDark,
+        accent,
+        accentDark,
+        neutral,
+        neutralDark,
+
+        // Error: Red/Tomato/Crimson
+        error,
+        errorDark,
+
+        // Success: Teal/Green/Grass/Mint
+        success,
+        successDark,
+
+        // Warning: Yellow/Amber
+        warning,
+        warningDark,
+
+        // Info: Blue/Sky/Cyan
+        info,
+        infoDark,
+      },
+    }),
+  ],
+  // auto dark colors
+  darkColor,
+})
+```
+
+> **Hint**
+> Radix UI uses a different [color scale](https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale) that tailwindcss. There are 12 steps in each scale. Each step was designed for at least one specific use case.
+
+```html
+<main class="bg-brand-1 text-brand-11"></main>
+```
+
+### With @twind/preset-typography
+
+The following example shows how to use the colors with [@twind/preset-typography](./preset-typography).
+
+```js title="twind.config.js"
+import { defineConfig } from '@twind/core'
+import presetAutoprefix from '@twind/preset-autoprefix'
+import presetTailwind from '@twind/preset-tailwind/base'
+import presetTypography from '@twind/preset-typography'
+
+// Import other colors as needed
+import { sky as brand, skyDark as brandDark } from '@twind/preset-radix-ui/colors'
+
+// Use automatic dark colors
+import darkColor from '@twind/preset-radix-ui/darkColor'
+
+export default defineConfig({
+  presets: [
+    presetAutoprefix(),
+    presetTailwind({ colors: { brand, brandDark /* define other colors as needed */ } }),
+    presetTypography({
+      // The color to use when `prose` without a color is used
+      defaultColor: 'brand',
+      colors: {
+        body: '11',
+        headings: '12',
+        lead: '11',
+        links: '12',
+        bold: '12',
+        counters: '7',
+        bullets: '6',
+        hr: '6',
+        quotes: '12',
+        'quote-borders': '6',
+        captions: '11',
+        code: '11',
+        'pre-code': '11',
+        'pre-bg': '3',
+        'th-borders': '7',
+        'td-borders': '6',
+        // invert colors (dark mode) — default to auto dark color
+        dark: null,
+      },
+    }),
+  ],
+  darkColor,
+})
+```

documentation/preset-tailwind.md

@@ -70,3 +70,34 @@ All utilities and variants from [Tailwind CSS](https://tailwindcss.com) are avai
 This preset can be configured with the following options:
 
 - `disablePreflight: boolean` — allows to disable the [preflight](https://tailwindcss.com/docs/preflight)
+
+## 🪄 Advanced
+
+This presets allows to omit the [default color palette](https://tailwindcss.com/docs/customizing-colors) to reduce the file size.
+
+The following example selectively imports colors from the default palette but different colors can be used as well (see [@twind/preset-radix-ui](./preset-radix-ui#with-twindpreset-tailwind) for an example).
+
+```js title="twind.config.js"
+import { defineConfig } from '@twind/core'
+import presetAutoprefix from '@twind/preset-autoprefix'
+// Using @twind/preset-tailwind/base to exclude the default tailwind colors
+import presetTailwind from '@twind/preset-tailwind/base'
+
+// Selectively import colors
+import {
+  slate as gray,
+  red,
+  amber as yellow,
+  emerald as green,
+  indigo as blue,
+} from '@twind/preset-tailwind/colors'
+
+export default defineConfig({
+  presets: [
+    presetAutoprefix(),
+    presetTailwind({
+      colors: { gray, yellow, green, blue },
+    }),
+  ],
+})
+```

packages/preset-radix-ui/README.md

@@ -0,0 +1,31 @@
+# @twind/preset-radix-ui [![MIT License](https://flat.badgen.net/github/license/tw-in-js/twind)](https://github.com/tw-in-js/twind/blob/main/LICENSE) [![Latest Release](https://flat.badgen.net/npm/v/@twind/preset-radix-ui?icon=npm&label&cache=10800&color=blue)](https://www.npmjs.com/package/@twind/preset-radix-ui) [![Github](https://flat.badgen.net/badge/icon/tw-in-js%2Ftwind%23preset-radix-ui?icon=github&label)](https://github.com/tw-in-js/twind/tree/main/packages/preset-radix-ui)
+
+The [Radix UI](https://www.radix-ui.com/colors) [color scales](https://www.radix-ui.com/docs/colors/palette-composition/the-scales) as a twind preset with automatic dark colors.
+
+- 📖 Study [the documentation](https://twind.style/preset-radix-ui)
+- 🤖 Try [the playground](https://twind.run/preset-radix-ui)
+- 🧭 Explore [the examples](https://twind.style/examples)
+- 📓 Consult [the API reference](https://twind.style/packages/@twind/preset-radix-ui)
+- 📜 Read [the changelog](https://github.com/tw-in-js/twind/tree/main/packages/preset-radix-ui/CHANGELOG.md)
+
+## 📖 Documentation
+
+The full documentation is available at [twind.style/preset-radix-ui](https://twind.style/preset-radix-ui).
+
+## 💬 Community
+
+For help, discussion about best practices, or any other conversation that would benefit from being searchable use [Github Discussions](https://github.com/tw-in-js/twind/discussions).
+
+To ask questions and discuss with other Twind users in real time use [Discord Chat](https://chat.twind.style).
+
+## 🧱 Contribute
+
+See the [Contributing Guide](../../CONTRIBUTING.md) for information on how to contribute to this project.
+
+## 📜 Changelog
+
+The Changelog for this package is [available on GitHub](https://github.com/tw-in-js/twind/tree/main/packages/preset-radix-ui/CHANGELOG.md).
+
+## ⚖️ License
+
+The [MIT license](https://github.com/tw-in-js/twind/blob/main/LICENSE) governs your use of Twind.

packages/preset-radix-ui/colors.d.ts

@@ -0,0 +1,3 @@
+// ONLY FOR TYPESCRIPT TO FIND @twind/preset-radix-ui/colors
+
+export * from './src/colors'

packages/preset-radix-ui/darkColor.d.ts

@@ -0,0 +1,3 @@
+// ONLY FOR TYPESCRIPT TO FIND @twind/preset-radix-ui/darkColor
+
+export { default } from './src/darkColor'

packages/preset-radix-ui/defaultTheme.d.ts

@@ -0,0 +1,3 @@
+// ONLY FOR TYPESCRIPT TO FIND @twind/preset-radix-ui/defaultTheme
+
+export { default } from './src/defaultTheme'

packages/preset-radix-ui/index.d.ts

@@ -0,0 +1,8 @@
+// ONLY FOR TYPEDOC TO FIND the exports (https://github.com/TypeStrong/typedoc/issues/1937)
+
+export { default } from './src/index'
+export * from './src/index'
+
+export * as colors from './src/colors'
+export * as darkColor from './src/darkColor'
+export * as defaultTheme from './src/defaultTheme'