-
-
Notifications
You must be signed in to change notification settings - Fork 100
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
51 changed files
with
2,619 additions
and
1,121 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@twind/preset-typography': patch | ||
--- | ||
|
||
use flattend color name to lookup dark shade for a color |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@twind/preset-tailwind': minor | ||
--- | ||
|
||
allow to omit the default color palette |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
--- | ||
'@twind/preset-radix-ui': patch | ||
'@sites/twind.run': patch | ||
'@sites/twind.style': patch | ||
--- | ||
|
||
add radix-ui example to twind.run |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
'@twind/preset-radix-ui': patch | ||
--- | ||
|
||
add radix ui preset |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, | ||
}) | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// ONLY FOR TYPESCRIPT TO FIND @twind/preset-radix-ui/colors | ||
|
||
export * from './src/colors' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// ONLY FOR TYPESCRIPT TO FIND @twind/preset-radix-ui/darkColor | ||
|
||
export { default } from './src/darkColor' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
// ONLY FOR TYPESCRIPT TO FIND @twind/preset-radix-ui/defaultTheme | ||
|
||
export { default } from './src/defaultTheme' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' |
Oops, something went wrong.