-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Switch from a static demo to vitepress for docs
- Loading branch information
Showing
13 changed files
with
793 additions
and
125 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,66 @@ | ||
# Sample workflow for building and deploying a VitePress site to GitHub Pages | ||
# | ||
name: Deploy VitePress site to Pages | ||
|
||
on: | ||
# Runs on pushes targeting the `main` branch. Change this to `master` if you're | ||
# using the `master` branch as the default branch. | ||
push: | ||
branches: [main] | ||
|
||
# Allows you to run this workflow manually from the Actions tab | ||
workflow_dispatch: | ||
|
||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages | ||
permissions: | ||
contents: read | ||
pages: write | ||
id-token: write | ||
|
||
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. | ||
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. | ||
concurrency: | ||
group: pages | ||
cancel-in-progress: false | ||
|
||
jobs: | ||
# Build job | ||
build: | ||
runs-on: ubuntu-latest | ||
steps: | ||
- name: Checkout | ||
uses: actions/checkout@v3 | ||
with: | ||
fetch-depth: 0 # Not needed if lastUpdated is not enabled | ||
# - uses: pnpm/action-setup@v2 # Uncomment this if you're using pnpm | ||
# - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun | ||
- name: Setup Node | ||
uses: actions/setup-node@v3 | ||
with: | ||
node-version: 18 | ||
cache: npm # or pnpm / yarn | ||
- name: Setup Pages | ||
uses: actions/configure-pages@v3 | ||
- name: Install dependencies | ||
run: npm ci # or pnpm install / yarn install / bun install | ||
- name: Build with VitePress | ||
run: | | ||
pnpm run docs:build | ||
touch docs/.vitepress/dist/.nojekyll | ||
- name: Upload artifact | ||
uses: actions/upload-pages-artifact@v2 | ||
with: | ||
path: docs/.vitepress/dist | ||
|
||
# Deployment job | ||
deploy: | ||
environment: | ||
name: github-pages | ||
url: ${{ steps.deployment.outputs.page_url }} | ||
needs: build | ||
runs-on: ubuntu-latest | ||
name: Deploy | ||
steps: | ||
- name: Deploy to GitHub Pages | ||
id: deployment | ||
uses: actions/deploy-pages@v2 |
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 |
---|---|---|
|
@@ -9,4 +9,6 @@ lib-cov | |
logs | ||
node_modules | ||
temp | ||
.vercel | ||
.vercel | ||
docs/.vitepress/dist | ||
docs/.vitepress/cache |
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,59 @@ | ||
import { defineConfig } from "vitepress"; | ||
import { presetUno } from "unocss"; | ||
import { presetRadix, radixColors } from "../../src"; | ||
import unocss from "unocss/vite"; | ||
|
||
// https://vitepress.dev/reference/site-config | ||
export default defineConfig({ | ||
title: "unocss-preset-radix", | ||
base: "/unocss-preset-radix/", | ||
vite: { | ||
plugins: [ | ||
unocss({ | ||
presets: [ | ||
presetUno(), | ||
presetRadix({ | ||
palette: radixColors, | ||
darkSelector: ".dark", | ||
|
||
aliases: { | ||
testa: "red", | ||
testb: "amber", | ||
}, | ||
}), | ||
], | ||
safelist: [ | ||
...radixColors.map((p) => `hue-${p}`), | ||
...Array.from({ length: 12 }, (_, i) => `bg-hue${i + 1}`), | ||
...Array.from({ length: 12 }, (_, i) => `bg-hue${i + 1}A`), | ||
], | ||
}), | ||
], | ||
}, | ||
description: "A unocss preset for radix colors", | ||
themeConfig: { | ||
nav: [{ text: "Home", link: "/" }], | ||
|
||
sidebar: [ | ||
{ | ||
text: "Guides", | ||
items: [ | ||
{ text: "Installation & Usage", link: "/usage" }, | ||
{ text: "Configuration", link: "/configuration" }, | ||
{ text: "Hue Utility", link: "/hues" }, | ||
], | ||
}, | ||
{ | ||
text: "Other", | ||
items: [{ text: "Colors", link: "/colors" }], | ||
}, | ||
], | ||
|
||
socialLinks: [ | ||
{ | ||
icon: "github", | ||
link: "https://github.com/endigma/unocss-preset-radix", | ||
}, | ||
], | ||
}, | ||
}); |
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,4 @@ | ||
import DefaultTheme from "vitepress/theme"; | ||
import "uno.css"; | ||
|
||
export default 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,53 @@ | ||
<script setup> | ||
import { ref } from 'vue' | ||
import { radixColors } from "../src"; | ||
</script> | ||
|
||
# Colors | ||
|
||
<div v-for="scale in radixColors"> | ||
<div :class="`hue-${scale} text-hue9`"> | ||
<h2 class="block mt-10">{{ scale }}</h2> | ||
<div class="flex flex-row gap-0.5"> | ||
<span class="swatch p-4"></span> | ||
<div v-for="i in 12"> | ||
<div class="swatch text-center text-sage11">{{ i }}</div> | ||
</div> | ||
</div> | ||
<div class="flex flex-col gap-0.5"> | ||
<div v-for="theme in ['dark', 'light']"> | ||
<div class="flex flex-col gap-0.5"> | ||
<div class="flex flex-row gap-0.5"> | ||
<span class="swatch p-4 text-sage11">{{ theme }}</span> | ||
<div class="flex flex-row gap-0.5" :class="`${theme}-theme`"> | ||
<div v-for="i in 12"> | ||
<div | ||
class="swatch" | ||
:class="`bg-hue${i} ${ i < 9 ? 'text-hue12' : 'text-hue-fg' }`" | ||
> | ||
fg | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
<div class="flex flex-row gap-0.5"> | ||
<span class="swatch p-4 text-sage11">alpha</span> | ||
<div class="flex flex-row gap-0.5" :class="`${theme}`"> | ||
<div v-for="i in 12"> | ||
<div class="swatch" :class="`bg-hue${i}A`"></div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<style> | ||
.swatch { | ||
width: 3rem; | ||
height: 2rem; | ||
padding: 5px; | ||
} | ||
</style> |
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,25 @@ | ||
# Configuration | ||
|
||
### palette | ||
|
||
An array of the Radix UI Colors you'd like to include. Dark mode and alpha variants are automatic. Overlay colors are added by default. | ||
|
||
### prefix | ||
|
||
The prefix used for the CSS variables generated by the preset. Default is `--un-preset-radix`. | ||
|
||
### darkSelector | ||
|
||
The selector used for dark mode palette. Default is `.dark-theme`. | ||
|
||
### lightSelector | ||
|
||
The selector used for dark mode palette. Default is `:root, .light-theme`. | ||
|
||
### aliases | ||
|
||
A key value object of color aliases in the format `alias: target` that allows you to set aliases for the color palette. You cannot set aliases to other aliases. Alpha variants for aliases are generated automatically, so for then given alias `brand: blue`, an alias `brandA: blueA` will also be generated. | ||
|
||
### extend | ||
|
||
A boolean that sets whether or not the preset will completely overwrite or merge with the previous palette. Default is `false`. |
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,14 @@ | ||
# Hue Utility | ||
|
||
With any scale included in your palette, you can use the utility `hue-{scale}` like `hue-red` or `hue-sand`. This sets a series of CSS variables that allow usage of `hue` in place of a color. For example: | ||
|
||
```html | ||
<div class="hue-red bg-hue4"></div> | ||
<div class="bg-red4"></div> | ||
``` | ||
|
||
are equivilant. | ||
|
||
This allows you to add all the `hues` you'd like to use to your safelist, and be able to dynamically choose the colorway of an element using JS or whatever your poison of choice is. | ||
|
||
This feature is heavily inspired by [Imba's `hue`](https://imba.io/docs/css/properties/hue) |
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,24 @@ | ||
--- | ||
# https://vitepress.dev/reference/default-theme-home-page | ||
layout: home | ||
|
||
hero: | ||
name: "unocss-preset-radix" | ||
text: "A unocss preset for Radix Colors" | ||
tagline: My great project tagline | ||
actions: | ||
- theme: brand | ||
text: Installation & Usage | ||
link: /usage | ||
- theme: alt | ||
text: Colors Showcase | ||
link: /colors | ||
|
||
features: | ||
- title: Alphas | ||
details: Fully supports alpha scales. You can use them like <code>bg-blue5A</code>. | ||
- title: Foregrounds | ||
details: The optimized foreground colors are available as -fg shades. For example text-blue-fg for white text-amber-fg for white. These colors are based on the Radix docs. This also works with hues and aliases. | ||
- title: Hues | ||
details: Inspired by Imba's `hue` utility, you can dynamically set the hue of an element and its children. | ||
--- |
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,70 @@ | ||
--- | ||
outline: deep | ||
--- | ||
|
||
# Getting Started | ||
|
||
## Installation | ||
|
||
::: code-group | ||
|
||
```sh [npm] | ||
$ npm add -D unocss-preset-radix | ||
``` | ||
|
||
```sh [pnpm] | ||
$ pnpm add -D unocss-preset-radix | ||
``` | ||
|
||
```sh [yarn] | ||
$ yarn add -D unocss-preset-radix | ||
``` | ||
|
||
::: | ||
|
||
## Usage | ||
|
||
```ts | ||
// uno.config.ts (or vite.config.ts) | ||
import { defineConfig, presetUno } from "unocss"; | ||
import { presetRadix } from "unocss-preset-radix"; | ||
|
||
export default defineConfig({ | ||
presets: [ | ||
presetUno(), | ||
presetRadix({ | ||
palette: ["blue", "green", "red"], | ||
aliases: { | ||
primary: "green", | ||
base: "slate", | ||
}, | ||
}), | ||
], | ||
}); | ||
``` | ||
|
||
You will now have access to colors from your palette, like: | ||
|
||
```html | ||
<p class="text-red9"> | ||
Lorem ipsum dolor sit amet consectetur adipisicing elit. | ||
</p> | ||
``` | ||
|
||
Which will render as: | ||
|
||
<p class="text-red9"> | ||
Lorem ipsum dolor sit amet consectetur adipisicing elit. | ||
</p> | ||
|
||
The colors automatically support dark mode, so you can use: | ||
|
||
```html | ||
<div class="p-4 bg-gray1 text-gray12">Text on gray background</div> | ||
``` | ||
|
||
Which will render as: | ||
|
||
<div class="p-4 bg-gray1 text-gray12">Text on gray background</div> | ||
|
||
You can switch the docs theme in the ... menu in the top right corner of the page. |
Oops, something went wrong.