Skip to content

Commit 93eead0

Browse files
zernoniamarkjaniczak
zernonia
and
markjaniczak
authored
feat: color components (#2478)
* feat: enable compat * feat: enable compat * chore: add dist artifacts * chore: add dist artifacts * fix: fix accessibility label * chore: build artifacts * fix: daterangepickerfield not resetting * fix: do not prevent event on paste * fix: do not prevent keydown if ctrl or meta key is held * fix: tags input * feat: add open on focus option * fix: revert * fix: revert * fix: focus * fix: focus * fix: focus * feat: add copy paste function to date field input * chore: update artifacts * feat: add to date range field * chore: update artifacts * feat: add readonly to number field * feat: add color swatches * feat: use radix colors * feat: update docs * feat: docs * feat: comments * feat: tests * feat: change color picker colors * feat: docs * feat: utils * chore: remove console.log * chore: remove console log * fix: build errors * chore: update build artifacts * chore: remove dist * chore: update gitignore * fix: handled coderabbit feedback * chore: position folder, add test * revert: compatConfig * revert: unneeded stuff * revert: unneeded change * feat: new ColorArea component * feat: new ColorField component * feat: new ColorSlider component * refactor: swatches component * feat: demos and shared function * fix: adapt feedback * docs: add color docs * docs: update comments * docs: chore gen * fix: quick test setup, feedback --------- Co-authored-by: Mark Janiczak <mark@janiczak.me>
1 parent 806da2b commit 93eead0

File tree

90 files changed

+8107
-46
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

90 files changed

+8107
-46
lines changed

‎.histoire/vite.config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default defineConfig({
2828
tree: {
2929
groups: [
3030
{ title: 'Components', include: _file => true },
31+
{ title: 'Compounds', id: 'compounds' },
3132
{ id: 'utilities', title: 'Utilities' },
3233
],
3334
},

‎docs/.vitepress/config.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,19 @@ export default defineConfig({
162162
{ text: 'Toggle Group', link: '/docs/components/toggle-group' },
163163
],
164164
},
165+
{
166+
text: 'Color',
167+
items: [
168+
{ text: `Color Area ${BadgeHTML('Alpha', true)}`, link: '/docs/components/color-area' },
169+
{ text: `Color Field ${BadgeHTML('Alpha', true)}`, link: '/docs/components/color-field' },
170+
{ text: `Color Slider ${BadgeHTML('Alpha', true)}`, link: '/docs/components/color-slider' },
171+
{ text: `Color Swatch ${BadgeHTML('Alpha', true)}`, link: '/docs/components/color-swatch' },
172+
{
173+
text: `Color Swatch Picker ${BadgeHTML('Alpha', true)}`,
174+
link: '/docs/components/color-swatch-picker',
175+
},
176+
],
177+
},
165178
{
166179
text: 'Dates',
167180
items: [
@@ -314,6 +327,12 @@ export default defineConfig({
314327
{ text: 'Checkbox Group', link: '/examples/checkbox-group' },
315328
],
316329
},
330+
{
331+
text: 'Color',
332+
items: [
333+
{ text: 'Color Picker', link: '/examples/color-picker' },
334+
],
335+
},
317336
{
318337
text: 'Combobox',
319338
items: [

‎docs/components/demo/ColorArea/tailwind/index.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
import {
3+
ColorAreaArea,
4+
ColorAreaRoot,
5+
ColorAreaThumb,
6+
} from 'reka-ui'
7+
import { ref } from 'vue'
8+
9+
const color = ref('#ff0000')
10+
</script>
11+
12+
<template>
13+
<div class="flex flex-col gap-4">
14+
<div class="text-sm text-gray-600 dark:text-gray-400">
15+
Current: {{ color }}
16+
</div>
17+
18+
<ColorAreaRoot
19+
v-slot="{ style }"
20+
v-model="color"
21+
class="relative"
22+
>
23+
<ColorAreaArea
24+
class="relative w-[200px] h-[200px] rounded-lg overflow-hidden focus:outline-none focus:ring-2 focus:ring-green-500"
25+
:style="style"
26+
>
27+
<ColorAreaThumb class="block w-4 h-4 rounded-full bg-white border-2 border-gray-400 shadow cursor-pointer" />
28+
</ColorAreaArea>
29+
</ColorAreaRoot>
30+
</div>
31+
</template>

‎docs/components/demo/ColorField/tailwind/index.vue‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script setup lang="ts">
2+
import {
3+
ColorFieldInput,
4+
ColorFieldRoot,
5+
} from 'reka-ui'
6+
import { ref } from 'vue'
7+
8+
const color = ref('#3b82f6')
9+
</script>
10+
11+
<template>
12+
<div class="flex flex-col gap-3">
13+
<ColorFieldRoot
14+
v-model="color"
15+
class="inline-flex flex-col gap-1"
16+
>
17+
<label class="text-sm font-medium text-gray-900 dark:text-gray-100">
18+
Color
19+
</label>
20+
<div class="flex items-center gap-2">
21+
<div
22+
class="w-8 h-8 rounded border border-gray-200 dark:border-gray-700 shrink-0"
23+
:style="{ background: color }"
24+
/>
25+
<ColorFieldInput
26+
class="px-3 py-2 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:opacity-50 disabled:cursor-not-allowed w-32"
27+
/>
28+
</div>
29+
</ColorFieldRoot>
30+
31+
<div class="flex items-center gap-2 text-xs text-gray-500">
32+
<span>Value: {{ color }}</span>
33+
</div>
34+
</div>
35+
</template>

‎docs/components/demo/ColorSlider/tailwind/index.vue‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script setup lang="ts">
2+
import {
3+
ColorSliderRoot,
4+
ColorSliderThumb,
5+
ColorSliderTrack,
6+
} from 'reka-ui'
7+
import { ref } from 'vue'
8+
9+
const color = ref('#10b981')
10+
</script>
11+
12+
<template>
13+
<div class="flex flex-col gap-4">
14+
<ColorSliderRoot
15+
v-model="color"
16+
channel="hue"
17+
class="relative flex items-center select-none touch-none w-[200px] h-5"
18+
>
19+
<ColorSliderTrack
20+
class="relative flex-1 rounded-full h-3"
21+
>
22+
<div class="absolute inset-0 rounded-full" />
23+
</ColorSliderTrack>
24+
<ColorSliderThumb
25+
class="block w-5 h-5 rounded-full bg-white border-2 border-gray-400 shadow-lg cursor-pointer hover:scale-110 transition-transform focus:outline-none focus:ring-2 focus:ring-green-500"
26+
/>
27+
</ColorSliderRoot>
28+
29+
<div class="flex items-center gap-2 text-xs text-gray-500">
30+
<div
31+
class="w-5 h-5 rounded border border-gray-200 shrink-0"
32+
:style="{ background: color }"
33+
/>
34+
<span class="font-mono">{{ color }}</span>
35+
</div>
36+
</div>
37+
</template>

‎docs/components/demo/ColorSwatch/css/index.vue‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<script setup lang="ts">
2+
import { green } from '@radix-ui/colors'
3+
import { ColorSwatch } from 'reka-ui'
4+
import './styles.css'
5+
</script>
6+
7+
<template>
8+
<ColorSwatch
9+
:color="green.green9"
10+
class="swatch"
11+
/>
12+
</template>

‎docs/components/demo/ColorSwatch/css/styles.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.swatch {
2+
width: 32px;
3+
height: 32px;
4+
border-radius: 4px;
5+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
6+
flex-shrink: 0;
7+
}
8+
9+
.dark .swatch {
10+
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
11+
}

‎docs/components/demo/ColorSwatch/tailwind/index.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { green } from '@radix-ui/colors'
3+
import { ColorSwatch } from 'reka-ui'
4+
</script>
5+
6+
<template>
7+
<ColorSwatch
8+
:color="green.green9"
9+
class="size-8 shrink-0 bg-[--reka-color-swatch-color] rounded ring-1 ring-inset ring-black/15 dark:ring-white/15"
10+
/>
11+
</template>

‎docs/components/demo/ColorSwatch/tailwind/tailwind.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: ['./**/*.vue'],
4+
theme: {},
5+
plugins: [],
6+
}

‎docs/components/demo/ColorSwatchPicker/css/index.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script setup lang="ts">
2+
import { Icon } from '@iconify/vue'
3+
import {
4+
blue,
5+
green,
6+
orange,
7+
pink,
8+
red,
9+
violet,
10+
yellow,
11+
} from '@radix-ui/colors'
12+
import { ColorSwatchPickerItem, ColorSwatchPickerItemIndicator, ColorSwatchPickerItemSwatch, ColorSwatchPickerRoot } from 'reka-ui'
13+
import './styles.css'
14+
15+
const colors = [
16+
red.red9,
17+
pink.pink9,
18+
violet.violet9,
19+
blue.blue9,
20+
green.green9,
21+
orange.orange9,
22+
yellow.yellow9,
23+
]
24+
</script>
25+
26+
<template>
27+
<ColorSwatchPickerRoot class="root">
28+
<ColorSwatchPickerItem
29+
v-for="color in colors"
30+
:key="color"
31+
:value="color"
32+
class="item"
33+
>
34+
<ColorSwatchPickerItemSwatch
35+
class="swatch"
36+
/>
37+
<ColorSwatchPickerItemIndicator class="indicator">
38+
<Icon icon="radix-icons:check" />
39+
</ColorSwatchPickerItemIndicator>
40+
</ColorSwatchPickerItem>
41+
</ColorSwatchPickerRoot>
42+
</template>

0 commit comments

Comments
 (0)