+ twind.style +
++ The smallest, fastest, most feature complete tailwind-in-js solution in + existence. +
+ + +From 290999932cc5621fc8de42d4b3557db3584d5e80 Mon Sep 17 00:00:00 2001
From: Sascha Tandel <514405+sastan@users.noreply.github.com>
Date: Wed, 14 Dec 2022 22:19:24 +0100
Subject: [PATCH] add radix ui preset (#419)
---
.changeset/beige-crabs-call.md | 5 +
.changeset/breezy-beans-promise.md | 5 +
.changeset/cold-zoos-nail.md | 7 +
.changeset/pink-rivers-leave.md | 5 +
.codesandbox/ci.json | 1 +
.github/actions/publish-prerelease/action.yml | 13 +
.github/workflows/ci.yml | 2 +-
.stackblitz/codeflow.json | 1 +
CHANGELOG.md | 1 +
documentation/preset-line-clamp.md | 2 +-
documentation/preset-radix-ui.md | 208 ++++
documentation/preset-tailwind.md | 31 +
packages/preset-radix-ui/README.md | 31 +
packages/preset-radix-ui/colors.d.ts | 3 +
packages/preset-radix-ui/darkColor.d.ts | 3 +
packages/preset-radix-ui/defaultTheme.d.ts | 3 +
packages/preset-radix-ui/index.d.ts | 8 +
packages/preset-radix-ui/package.json | 74 ++
.../scripts/generate-colors.js | 54 ++
packages/preset-radix-ui/src/colors.ts | 846 +++++++++++++++++
packages/preset-radix-ui/src/darkColor.ts | 9 +
packages/preset-radix-ui/src/defaultTheme.ts | 3 +
packages/preset-radix-ui/src/index.ts | 8 +
packages/preset-radix-ui/tsconfig.json | 7 +
packages/preset-tailwind/base.d.ts | 4 +
packages/preset-tailwind/baseTheme.d.ts | 4 +
packages/preset-tailwind/index.d.ts | 2 +
packages/preset-tailwind/package.json | 17 +
packages/preset-tailwind/src/base.ts | 53 ++
packages/preset-tailwind/src/baseTheme.ts | 897 ++++++++++++++++++
packages/preset-tailwind/src/colors.ts | 6 -
packages/preset-tailwind/src/defaultTheme.ts | 893 +----------------
packages/preset-tailwind/src/index.ts | 22 +-
packages/preset-tailwind/src/preflight.ts | 8 +-
packages/preset-typography/src/index.ts | 2 +-
pnpm-lock.yaml | 20 +-
sites/cdn.twind.style/src/index.ts | 1 +
sites/twind.run/package.json | 2 +-
.../lib/templates/preset-radix-ui/config.tpl | 67 ++
.../lib/templates/preset-radix-ui/html.tpl | 29 +
.../lib/templates/preset-radix-ui/index.ts | 12 +
.../lib/templates/preset-radix-ui/script.tpl | 15 +
sites/twind.run/src/lib/transpile.api.ts | 58 +-
.../src/routes/[[key]]/+page.server.ts | 6 +-
.../twind.run/src/routes/[[key]]/+page.svelte | 105 +-
.../src/routes/[[key]]/discover.svelte | 2 +-
.../twind.run/src/routes/[[key]]/info.svelte | 17 +-
sites/twind.run/src/twind.config.ts | 83 +-
sites/twind.style/package.json | 2 +-
.../src/lib/markdown/remark-code.ts | 2 +-
sites/twind.style/src/twind.config.ts | 81 +-
51 files changed, 2619 insertions(+), 1121 deletions(-)
create mode 100644 .changeset/beige-crabs-call.md
create mode 100644 .changeset/breezy-beans-promise.md
create mode 100644 .changeset/cold-zoos-nail.md
create mode 100644 .changeset/pink-rivers-leave.md
create mode 100644 documentation/preset-radix-ui.md
create mode 100644 packages/preset-radix-ui/README.md
create mode 100644 packages/preset-radix-ui/colors.d.ts
create mode 100644 packages/preset-radix-ui/darkColor.d.ts
create mode 100644 packages/preset-radix-ui/defaultTheme.d.ts
create mode 100644 packages/preset-radix-ui/index.d.ts
create mode 100644 packages/preset-radix-ui/package.json
create mode 100644 packages/preset-radix-ui/scripts/generate-colors.js
create mode 100644 packages/preset-radix-ui/src/colors.ts
create mode 100644 packages/preset-radix-ui/src/darkColor.ts
create mode 100644 packages/preset-radix-ui/src/defaultTheme.ts
create mode 100644 packages/preset-radix-ui/src/index.ts
create mode 100644 packages/preset-radix-ui/tsconfig.json
create mode 100644 packages/preset-tailwind/base.d.ts
create mode 100644 packages/preset-tailwind/baseTheme.d.ts
create mode 100644 packages/preset-tailwind/src/base.ts
create mode 100644 packages/preset-tailwind/src/baseTheme.ts
create mode 100644 sites/twind.run/src/lib/templates/preset-radix-ui/config.tpl
create mode 100644 sites/twind.run/src/lib/templates/preset-radix-ui/html.tpl
create mode 100644 sites/twind.run/src/lib/templates/preset-radix-ui/index.ts
create mode 100644 sites/twind.run/src/lib/templates/preset-radix-ui/script.tpl
diff --git a/.changeset/beige-crabs-call.md b/.changeset/beige-crabs-call.md
new file mode 100644
index 000000000..2ab4d64d5
--- /dev/null
+++ b/.changeset/beige-crabs-call.md
@@ -0,0 +1,5 @@
+---
+'@twind/preset-typography': patch
+---
+
+use flattend color name to lookup dark shade for a color
diff --git a/.changeset/breezy-beans-promise.md b/.changeset/breezy-beans-promise.md
new file mode 100644
index 000000000..a0b76ad3d
--- /dev/null
+++ b/.changeset/breezy-beans-promise.md
@@ -0,0 +1,5 @@
+---
+'@twind/preset-tailwind': minor
+---
+
+allow to omit the default color palette
diff --git a/.changeset/cold-zoos-nail.md b/.changeset/cold-zoos-nail.md
new file mode 100644
index 000000000..c048908c4
--- /dev/null
+++ b/.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
diff --git a/.changeset/pink-rivers-leave.md b/.changeset/pink-rivers-leave.md
new file mode 100644
index 000000000..a412134b9
--- /dev/null
+++ b/.changeset/pink-rivers-leave.md
@@ -0,0 +1,5 @@
+---
+'@twind/preset-radix-ui': patch
+---
+
+add radix ui preset
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
index eff0960fa..22de310db 100644
--- a/.codesandbox/ci.json
+++ b/.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",
diff --git a/.github/actions/publish-prerelease/action.yml b/.github/actions/publish-prerelease/action.yml
index 665679971..e7c210efc 100644
--- a/.github/actions/publish-prerelease/action.yml
+++ b/.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 }}"
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 03da2ec40..6ff0da200 100644
--- a/.github/workflows/ci.yml
+++ b/.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 }}
diff --git a/.stackblitz/codeflow.json b/.stackblitz/codeflow.json
index 632b7dbc9..873767cf7 100644
--- a/.stackblitz/codeflow.json
+++ b/.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",
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 415ecbb89..47b105d20 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/documentation/preset-line-clamp.md b/documentation/preset-line-clamp.md
index 34010453c..81ddb9075 100644
--- a/documentation/preset-line-clamp.md
+++ b/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**
diff --git a/documentation/preset-radix-ui.md b/documentation/preset-radix-ui.md
new file mode 100644
index 000000000..93c0fa85c
--- /dev/null
+++ b/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 */
+})
+```
+
+Usage with a script tag
+
+```html
+
+
+
+
+```
+
+
+ The smallest, fastest, most feature complete tailwind-in-js solution in + existence. +
+ + +- v{manifest.version} -
- {#if selected} -
- {#if manifest.pr}
-
- PR #{manifest.pr}
- β still in development
- {:else if manifest['dist-tag'] === 'latest'}
- stable version β for most users
- {:else if manifest['dist-tag'] === 'next'}
- next version β for early adopters
- {:else}
- canary version β still in development
- {/if}
+ {#each data.manifests as manifest (manifest.version)}
+
+ v{manifest.version}
+ {#if manifest.pr}
+
+ PR #{manifest.pr}
+ β still in development
+ {:else if manifest['dist-tag'] === 'latest'}
+ stable version β for most users
+ {:else if manifest['dist-tag'] === 'next'}
+ next version β for early adopters
+ {:else}
+ canary version β still in development
+ {/if}
+