Skip to content
This repository was archived by the owner on Feb 18, 2026. It is now read-only.

Commit 5ad7551

Browse files
estherbrunnerestherbrunner
committed
docs(examples): add module-coloreditor example
1 parent fd6a54a commit 5ad7551

File tree

234 files changed

+5826
-1054
lines changed

Some content is hidden

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

234 files changed

+5826
-1054
lines changed

‎docs-src/components/card-colorscale/card-colorscale.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,8 @@ export type CardColorscaleProps = {
1717
color: Oklch
1818
}
1919

20+
const CONTRAST_THRESHOLD = 0.71 // lightness
21+
2022
export default component(
2123
'card-colorscale',
2224
{
@@ -32,7 +34,7 @@ export default component(
3234
() =>
3335
effect((): undefined => {
3436
const props = new Map()
35-
const isLight = el.color.l > 0.71
37+
const isLight = el.color.l > CONTRAST_THRESHOLD
3638
const softStep = isLight ? 0.1 : 0.9
3739
props.set('base', formatCss(el.color))
3840
props.set('text', isLight ? 'black' : 'white')

‎docs-src/components/form-colorgraph/form-colorgraph.css‎

Lines changed: 319 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,319 @@
1+
form-colorgraph {
2+
--color-base: transparent;
3+
--step-size: 1.25rem;
4+
5+
display: grid;
6+
grid-template-areas: "graph graph graph" "slider slider slider" "lightness chroma hue";
7+
grid-template-columns: 1fr 1fr 1fr;
8+
column-gap: var(--space-m);
9+
margin: var(--space-m) 0;
10+
11+
> .graph {
12+
--canvas-size: 400px;
13+
14+
grid-area: graph;
15+
position: relative;
16+
width: 100%;
17+
display: block;
18+
user-select: none;
19+
transition: opacity var(--transition-medium) var(--easing-inout);
20+
21+
& canvas {
22+
width: var(--canvas-size);
23+
height: var(--canvas-size);
24+
aspect-ratio: 1;
25+
user-select: none;
26+
}
27+
28+
.knob {
29+
position: absolute;
30+
top: 0;
31+
left: 0;
32+
width: var(--input-height);
33+
height: var(--input-height);
34+
border-radius: 50%;
35+
background-color: var(--color-base);
36+
border: 1px solid var(--color-border);
37+
box-shadow: 0 0 var(--space-xxs) 2px var(--color-shadow);
38+
cursor: move;
39+
user-select: none;
40+
touch-action: none;
41+
transform: translate(
42+
calc(var(--input-height) / -2),
43+
calc(var(--input-height) / -2)
44+
);
45+
46+
&:focus-visible {
47+
box-shadow: 0 0 var(--space-xxs) 2px var(--color-selection);
48+
}
49+
}
50+
51+
/* .knob span {
52+
display: inline-block;
53+
background: rgba(0 0 0 / var(--opacity-dimmed));
54+
color: white;
55+
font-size: var(--font-size-xs);
56+
position: absolute;
57+
left: var(--input-height);
58+
padding: var(--space-xxs);
59+
border-radius: var(--space-xxs);
60+
transform: translateY(-50%);
61+
margin-left: var(--space-xs);
62+
}
63+
64+
.knob span:before {
65+
position: absolute;
66+
left: calc(-1 * var(--space-xs));
67+
top: calc(50% - var(--space-xs));
68+
content: "";
69+
width: 0;
70+
height: 0;
71+
border: var(--space-xs) solid transparent;
72+
border-left-width: 0;
73+
border-right-color: rgba(0 0 0 / var(--opacity-dimmed));
74+
} */
75+
76+
& ol {
77+
list-style: none;
78+
margin: 0;
79+
padding: 0;
80+
user-select: none;
81+
}
82+
83+
& li {
84+
position: absolute;
85+
box-sizing: border-box;
86+
top: 0;
87+
left: 0;
88+
width: var(--step-size);
89+
height: var(--step-size);
90+
transform: translate(
91+
calc(var(--step-size) / -2),
92+
calc(var(--step-size) / -2)
93+
);
94+
border-radius: 100%;
95+
background-color: transparent;
96+
border: 1px solid black;
97+
opacity: var(--opacity-dimmed);
98+
user-select: none;
99+
}
100+
101+
.lighten80 {
102+
background: var(--color-lighten80);
103+
}
104+
.lighten60 {
105+
background: var(--color-lighten60);
106+
}
107+
.lighten40 {
108+
background: var(--color-lighten40);
109+
}
110+
.lighten20 {
111+
background: var(--color-lighten20);
112+
}
113+
.darken20 {
114+
background: var(--color-darken20);
115+
}
116+
.darken40 {
117+
background: var(--color-darken40);
118+
}
119+
.darken60 {
120+
background: var(--color-darken60);
121+
}
122+
.darken80 {
123+
background: var(--color-darken80);
124+
}
125+
}
126+
127+
> .lightness {
128+
grid-area: lightness;
129+
}
130+
131+
> .chroma {
132+
grid-area: chroma;
133+
}
134+
135+
> .hue {
136+
grid-area: hue;
137+
}
138+
139+
> .lightness,
140+
> .chroma,
141+
> .hue {
142+
display: grid;
143+
align-items: center;
144+
column-gap: var(--space-xs);
145+
grid-template-areas: "label buttons" "input buttons";
146+
grid-template-columns: 1fr auto;
147+
}
148+
149+
& label,
150+
& button {
151+
opacity: var(--opacity-dimmed);
152+
transition: opacity var(--transition-short) var(--easing-inout);
153+
}
154+
155+
& label {
156+
grid-area: label;
157+
display: block;
158+
font-size: var(--font-size-s);
159+
color: var(--color-text);
160+
}
161+
162+
& input {
163+
display: inline-block;
164+
box-sizing: border-box;
165+
background: var(--color-input);
166+
color: var(--color-text);
167+
border: none;
168+
border-bottom: 1px solid var(--color-border);
169+
padding: var(--space-xs) var(--space-xxs);
170+
font-size: var(--font-size-m);
171+
text-align: right;
172+
height: var(--input-height);
173+
width: 100%;
174+
transition: color var(--transition-short) var(--easing-inout);
175+
176+
&[aria-invalid="true"] {
177+
box-shadow: 0 0 var(--space-xxs) 2px var(--color-error-invalid);
178+
}
179+
180+
&::placeholder {
181+
color: var(--color-text);
182+
opacity: var(--opacity-translucent);
183+
}
184+
}
185+
186+
.input {
187+
grid-area: input;
188+
display: inline-flex;
189+
align-items: center;
190+
column-gap: var(--space-xxs);
191+
}
192+
193+
.slider {
194+
--slider-width: 400px;
195+
--slider-height: 40px;
196+
--track-width: 360px;
197+
--track-height: 8px;
198+
--track-offset: 20px;
199+
200+
grid-area: slider;
201+
position: relative;
202+
display: inline-block;
203+
height: var(--slider-height);
204+
user-select: none;
205+
transition: opacity var(--transition-medium) var(--easing-inout);
206+
207+
& canvas {
208+
width: calc(100% - 2 * var(--track-offset));
209+
height: var(--track-height);
210+
margin: calc(var(--track-offset) - var(--track-height) / 2)
211+
var(--track-offset);
212+
user-select: none;
213+
}
214+
}
215+
216+
.thumb {
217+
position: absolute;
218+
top: calc(var(--slider-height) / 2);
219+
left: var(--track-offset);
220+
width: var(--input-height);
221+
height: var(--input-height);
222+
background-color: var(--color-base);
223+
box-sizing: border-box;
224+
border: 1px solid var(--color-border);
225+
border-radius: 50%;
226+
box-shadow: 0 0 var(--space-xxs) 2px var(--color-shadow);
227+
cursor: ew-resize;
228+
user-select: none;
229+
touch-action: none;
230+
opacity: var(--opacity-dimmed);
231+
transform: translate(
232+
calc(var(--input-height) / -2),
233+
calc(var(--input-height) / -2)
234+
);
235+
}
236+
237+
/* .tooltip {
238+
display: inline-block;
239+
font-size: var(--font-size-xs);
240+
background: rgba(0 0 0 / var(--opacity-dimmed));
241+
color: white;
242+
position: absolute;
243+
top: calc(-1 * var(--input-height));
244+
left: calc(0.5 * var(--input-height) - 2px);
245+
transform: translateX(-50%);
246+
padding: var(--space-xxs);
247+
border-radius: var(--space-xxs);
248+
margin-bottom: var(--space-xs);
249+
}
250+
251+
.tooltip:before {
252+
position: absolute;
253+
bottom: calc(-1 * var(--space-xs));
254+
left: calc(50% - var(--space-xs));
255+
content: "";
256+
width: 0;
257+
height: 0;
258+
border: var(--space-xs) solid transparent;
259+
border-bottom-width: 0;
260+
border-top-color: rgba(0 0 0 / var(--opacity-dimmed));
261+
} */
262+
263+
.buttons {
264+
grid-area: buttons;
265+
display: flex;
266+
flex-direction: column-reverse;
267+
align-items: center;
268+
269+
& button {
270+
flex-grow: 0;
271+
box-sizing: border-box;
272+
height: var(--input-height);
273+
min-width: var(--input-height);
274+
border: 1px solid var(--color-border);
275+
background-color: var(--color-secondary);
276+
color: var(--color-text);
277+
padding: 0 var(--space-s);
278+
font-size: var(--font-size-s);
279+
line-height: var(--line-height-s);
280+
white-space: nowrap;
281+
cursor: pointer;
282+
transition: all var(--transition-shorter) var(--easing-inout);
283+
284+
&:disabled {
285+
opacity: var(--opacity-translucent);
286+
}
287+
288+
&:not(:disabled) {
289+
cursor: pointer;
290+
opacity: var(--opacity-solid);
291+
292+
&:hover {
293+
background-color: var(--color-secondary-hover);
294+
}
295+
296+
&:active {
297+
background-color: var(--color-secondary-active);
298+
}
299+
}
300+
301+
&:first-of-type {
302+
border-radius: 0 0 50% 50%;
303+
border-top-width: 0;
304+
}
305+
306+
&:last-of-type {
307+
border-radius: 50% 50% 0 0;
308+
}
309+
}
310+
}
311+
312+
input::-webkit-textfield-decoration-container {
313+
height: 100%;
314+
}
315+
316+
input::-webkit-inner-form-spinbutton {
317+
appearance: none;
318+
}
319+
}

0 commit comments

Comments
 (0)