Skip to content

Commit 76d3081

Browse files
var-porovar-poro
committed
refactor(theme-generator): update styles and improve integration of ThemeGeneratorColorPicker 
1 parent 963f9d3 commit 76d3081

File tree

4 files changed

+98
-98
lines changed

4 files changed

+98
-98
lines changed

‎packages/storybook/src/components/themeGenerator/ThemeGeneratorColorPicker/ThemeGeneratorColorPicker.tsx‎

Lines changed: 47 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import { Button, BUTTON_SIZE, BUTTON_COLOR, BUTTON_VARIANT, Icon, ICON_NAME } from '@ovhcloud/ods-react';
21
import { ColorPicker, parseColor } from '@ark-ui/react/color-picker';
32
import React from 'react';
3+
import { FormField, FormFieldLabel, Input, Quantity, QuantityControl, QuantityInput } from '@ovhcloud/ods-react';
44
import styles from './themeGeneratorColorPicker.module.css';
55

66
interface ThemeGeneratorColorPickerProps {
@@ -75,10 +75,10 @@ const ThemeGeneratorColorPicker = ({
7575
return (
7676
<ColorPicker.Root
7777
className={`${styles['theme-generator-color-picker']} ${className}`}
78-
value={parseColorWithRoundedAlpha(value)}
79-
onValueChange={handleValueChange}
80-
disabled={disabled}
81-
onClick={handleClick}
78+
disabled={ disabled }
79+
onClick={ handleClick }
80+
onValueChange={ handleValueChange }
81+
value={ parseColorWithRoundedAlpha(value) }
8282
>
8383
{showLabel && label && (
8484
<ColorPicker.Label className={styles['theme-generator-color-picker__label']}>
@@ -87,47 +87,59 @@ const ThemeGeneratorColorPicker = ({
8787
)}
8888

8989
<ColorPicker.Control className={styles['theme-generator-color-picker__control']}>
90-
<ColorPicker.Trigger className={styles['theme-generator-color-picker__trigger']}>
91-
<ColorPicker.ValueSwatch className={styles['theme-generator-color-picker__swatch']} />
90+
<ColorPicker.Trigger className={styles['theme-generator-color-picker__control__trigger']}>
91+
<ColorPicker.ValueSwatch className={styles['theme-generator-color-picker__control__trigger__swatch']} />
9292
</ColorPicker.Trigger>
9393
</ColorPicker.Control>
9494

9595
<ColorPicker.Positioner>
9696
<ColorPicker.Content className={styles['theme-generator-color-picker__popover']}>
97-
<ColorPicker.Area className={styles['theme-generator-color-picker__area']}>
98-
<ColorPicker.AreaBackground className={styles['theme-generator-color-picker__area-background']} />
99-
<ColorPicker.AreaThumb className={styles['theme-generator-color-picker__area-thumb']} />
97+
<ColorPicker.Area className={styles['theme-generator-color-picker__popover__area']}>
98+
<ColorPicker.AreaBackground className={styles['theme-generator-color-picker__popover__area__background']} />
99+
<ColorPicker.AreaThumb className={styles['theme-generator-color-picker__popover__area__thumb']} />
100100
</ColorPicker.Area>
101101

102-
<ColorPicker.ChannelSlider channel="hue" className={styles['theme-generator-color-picker__slider']}>
103-
<ColorPicker.ChannelSliderTrack className={styles['theme-generator-color-picker__slider-track']} />
104-
<ColorPicker.ChannelSliderThumb className={styles['theme-generator-color-picker__slider-thumb']} />
102+
<ColorPicker.ChannelSlider channel="hue" className={styles['theme-generator-color-picker__popover__slider']}>
103+
<ColorPicker.ChannelSliderTrack className={styles['theme-generator-color-picker__popover__slider__track']} />
104+
<ColorPicker.ChannelSliderThumb className={styles['theme-generator-color-picker__popover__slider__thumb']} />
105105
</ColorPicker.ChannelSlider>
106106

107-
<ColorPicker.ChannelSlider channel="alpha" className={styles['theme-generator-color-picker__slider']}>
108-
<ColorPicker.TransparencyGrid className={styles['theme-generator-color-picker__transparency-grid']} />
109-
<ColorPicker.ChannelSliderTrack className={styles['theme-generator-color-picker__slider-track']} />
110-
<ColorPicker.ChannelSliderThumb className={styles['theme-generator-color-picker__slider-thumb']} />
107+
<ColorPicker.ChannelSlider channel="alpha" className={styles['theme-generator-color-picker__popover__slider']}>
108+
<ColorPicker.TransparencyGrid className={styles['theme-generator-color-picker__popover__slider__transparency-grid']} />
109+
<ColorPicker.ChannelSliderTrack className={styles['theme-generator-color-picker__popover__slider__track']} />
110+
<ColorPicker.ChannelSliderThumb className={styles['theme-generator-color-picker__popover__slider__thumb']} />
111111
</ColorPicker.ChannelSlider>
112112

113-
<div className={styles['theme-generator-color-picker__inputs']}>
114-
<ColorPicker.EyeDropperTrigger asChild>
115-
<Button variant={BUTTON_VARIANT.default} size={BUTTON_SIZE.sm}>
116-
<Icon name={ICON_NAME.flaskHalf} color={BUTTON_COLOR.primary} />
117-
</Button>
118-
</ColorPicker.EyeDropperTrigger>
119-
<ColorPicker.ChannelInput
120-
channel="hex"
121-
className={styles['theme-generator-color-picker__channel-input']}
122-
onKeyDown={(e) => e.stopPropagation()}
123-
/>
124-
<ColorPicker.ChannelInput
125-
channel="alpha"
126-
className={styles['theme-generator-color-picker__channel-input']}
127-
onKeyDown={handleAlphaKeyDown}
128-
onBlur={handleAlphaBlur}
129-
step={0.01}
130-
/>
113+
<div className={styles['theme-generator-color-picker__popover__inputs']}>
114+
<FormField>
115+
<FormFieldLabel>
116+
Hex
117+
</FormFieldLabel>
118+
<ColorPicker.ChannelInput
119+
asChild
120+
channel="hex"
121+
onKeyDown={(e) => e.stopPropagation()}
122+
>
123+
<Input type="text" />
124+
</ColorPicker.ChannelInput>
125+
</FormField>
126+
<FormField>
127+
<FormFieldLabel>
128+
Alpha
129+
</FormFieldLabel>
130+
<ColorPicker.ChannelInput
131+
asChild
132+
channel="alpha"
133+
onKeyDown={handleAlphaKeyDown}
134+
onBlur={handleAlphaBlur}
135+
>
136+
<Quantity min={0} max={1} step={0.01}>
137+
<QuantityControl>
138+
<QuantityInput />
139+
</QuantityControl>
140+
</Quantity>
141+
</ColorPicker.ChannelInput>
142+
</FormField>
131143
</div>
132144
</ColorPicker.Content>
133145
</ColorPicker.Positioner>

‎packages/storybook/src/components/themeGenerator/ThemeGeneratorColorPicker/themeGeneratorColorPicker.module.css‎

Lines changed: 41 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -6,140 +6,126 @@
66
width: 100%;
77
}
88

9+
.theme-generator-color-picker:not(:has(.theme-generator-color-picker__label)) {
10+
justify-content: flex-end;
11+
width: auto;
12+
}
13+
914
.theme-generator-color-picker__label {
1015
flex: 1;
1116
color: var(--ods-color-text);
1217
}
1318

1419
.theme-generator-color-picker__control {
15-
border: 0;
1620
display: flex;
21+
border: 0;
1722
}
1823

19-
.theme-generator-color-picker__trigger {
24+
.theme-generator-color-picker__control__trigger {
2025
border: 0;
2126
background-color: transparent;
2227
cursor: pointer;
2328
}
2429

25-
.theme-generator-color-picker__trigger:disabled {
26-
cursor: not-allowed;
30+
.theme-generator-color-picker__control__trigger:disabled {
2731
opacity: 0.5;
32+
cursor: not-allowed;
2833
}
2934

30-
.theme-generator-color-picker__swatch {
35+
.theme-generator-color-picker__control__trigger__swatch {
36+
border: 1px solid var(--ods-color-neutral-300);
3137
cursor: pointer;
3238
width: 16px;
3339
height: 16px;
34-
border: 1px solid var(--ods-color-neutral-300);
3540
}
3641

3742
.theme-generator-color-picker__popover {
3843
flex-direction: column;
3944
gap: 16px;
40-
padding: 16px;
41-
background-color: var(--ods-color-neutral-000);
45+
z-index: 1000;
4246
border: 1px solid var(--ods-color-neutral-300);
4347
border-radius: var(--ods-border-radius-md);
4448
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
45-
z-index: 1000;
49+
background-color: var(--ods-color-neutral-000);
50+
padding: 16px;
4651
}
4752

4853
.theme-generator-color-picker__popover[data-state="open"] {
4954
display: flex;
5055
}
5156

52-
.theme-generator-color-picker__area {
57+
.theme-generator-color-picker__popover__area {
5358
position: relative;
5459
min-width: 200px;
5560
min-height: 200px;
5661
overflow: hidden;
5762
}
5863

59-
.theme-generator-color-picker__area-background {
64+
.theme-generator-color-picker__popover__area__background {
6065
width: 100%;
61-
height: 100%;
6266
min-width: 200px;
67+
height: 100%;
6368
min-height: 200px;
6469
}
6570

66-
.theme-generator-color-picker__area-thumb {
71+
.theme-generator-color-picker__popover__area__thumb {
6772
position: absolute;
68-
width: 24px;
69-
height: 24px;
70-
border-radius: 50%;
73+
transform: translate(-50%, -50%);
7174
border: 2px solid var(--ods-color-neutral-000);
75+
border-radius: 50%;
7276
box-shadow: 0 0 0 1px var(--ods-color-neutral-500);
7377
cursor: pointer;
74-
transform: translate(-50%, -50%);
78+
width: 24px;
79+
height: 24px;
7580
}
7681

77-
.theme-generator-color-picker__slider {
82+
.theme-generator-color-picker__popover__slider {
7883
position: relative;
84+
border-radius: var(--ods-border-radius-sm);
85+
cursor: pointer;
7986
width: 100%;
8087
min-width: 200px;
8188
height: 12px;
8289
min-height: 12px;
83-
border-radius: var(--ods-border-radius-sm);
84-
cursor: pointer;
8590
}
8691

87-
.theme-generator-color-picker__slider-track {
92+
.theme-generator-color-picker__popover__slider__track {
93+
border-radius: var(--ods-border-radius-sm);
8894
width: 100%;
8995
height: 100%;
90-
border-radius: var(--ods-border-radius-sm);
9196
}
9297

93-
.theme-generator-color-picker__slider-thumb {
98+
.theme-generator-color-picker__popover__slider__thumb {
9499
position: absolute;
95-
width: 10px;
96-
height: 10px;
97-
min-width: 10px;
98-
min-height: 10px;
99-
border-radius: 50%;
100+
top: 50%;
101+
transform: translate(-50%, -50%);
100102
border: 2px solid var(--ods-color-neutral-000);
103+
border-radius: 50%;
101104
box-shadow: 0 0 0 1px var(--ods-color-neutral-500);
102105
cursor: pointer;
103-
transform: translate(-50%, -50%);
104-
top: 50%;
106+
width: 10px;
107+
min-width: 10px;
108+
height: 10px;
109+
min-height: 10px;
105110
}
106111

107-
.theme-generator-color-picker__transparency-grid {
112+
.theme-generator-color-picker__popover__slider__transparency-grid {
108113
position: absolute;
109-
width: 100%;
110-
height: 100%;
111114
border-radius: var(--ods-border-radius-sm);
112-
background-image:
115+
background-image:
113116
linear-gradient(45deg, var(--ods-color-neutral-200) 25%, transparent 25%),
114117
linear-gradient(-45deg, var(--ods-color-neutral-200) 25%, transparent 25%),
115118
linear-gradient(45deg, transparent 75%, var(--ods-color-neutral-200) 75%),
116119
linear-gradient(-45deg, transparent 75%, var(--ods-color-neutral-200) 75%);
120+
background-position: 0 0, 0 4px, 4px -4px, -4px 0;
117121
background-size: 8px 8px;
118-
background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
122+
width: 100%;
123+
height: 100%;
119124
}
120125

121-
.theme-generator-color-picker__inputs {
126+
.theme-generator-color-picker__popover__inputs {
122127
display: flex;
123128
gap: 8px;
124129
min-width: 200px;
125130
}
126131

127-
.theme-generator-color-picker__channel-input {
128-
box-sizing: border-box;
129-
border: var(--ods-border-width-sm) solid var(--ods-color-form-element-border-default);
130-
border-radius: var(--ods-border-radius-sm);
131-
padding: 3px 8px;
132-
height: var(--ods-form-element-input-height);
133-
flex: 1;
134-
min-width: 0;
135-
color: var(--ods-color-text);
136-
font-family: inherit;
137-
font-size: 1rem;
138-
background-color: var(--ods-color-neutral-000);
139-
}
140-
141-
.theme-generator-color-picker__channel-input:focus {
142-
outline: 2px solid var(--ods-color-primary-500);
143-
outline-offset: 2px;
144-
border-color: var(--ods-color-primary-500);
145-
}

‎packages/storybook/src/components/themeGenerator/themeGeneratorPaletteModal/ThemeGeneratorPaletteModal.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -102,17 +102,17 @@ const ThemeGeneratorPaletteModal = ({ open, onClose, onApply, currentVariables }
102102
<ModalBody>
103103
<div className={styles['theme-generator-palette-modal__preview']}>
104104
<TreeView
105-
className={styles['theme-generator-palette-modal__tree-view']}
105+
className={styles['theme-generator-palette-modal__preview__tree-view']}
106106
items={treeItems}
107107
>
108108
<TreeViewNodes>
109109
{treeItems.map((item) => (
110110
<TreeViewNode key={item.id} item={item}>
111111
{({ item, isBranch }: { item: TreeItem; isBranch: boolean }) => (
112-
<div className={styles['theme-generator-palette-modal__tree-item']}>
112+
<div className={styles['theme-generator-palette-modal__preview__tree-view__tree-item']}>
113113
{isBranch ? (
114114
<>
115-
<Text className={styles['theme-generator-palette-modal__tree-item-name']}>
115+
<Text className={styles['theme-generator-palette-modal__preview__tree-view__tree-item__name']}>
116116
{item.name}
117117
</Text>
118118
<ThemeGeneratorColorPicker

‎packages/storybook/src/components/themeGenerator/themeGeneratorPaletteModal/themeGeneratorPaletteModal.module.css‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,21 @@
1010
overflow: auto;
1111
}
1212

13-
.theme-generator-palette-modal__tree-view {
14-
width: 100%;
13+
.theme-generator-palette-modal__preview__tree-view {
14+
padding: 1rem;
15+
height: 100%;
16+
overflow: auto;
1517
}
1618

17-
.theme-generator-palette-modal__tree-item {
19+
.theme-generator-palette-modal__preview__tree-view__tree-item {
1820
display: flex;
19-
gap: 8px;
21+
gap: 0.5rem;
2022
align-items: center;
2123
justify-content: space-between;
2224
width: 100%;
2325
}
2426

25-
.theme-generator-palette-modal__tree-item-name {
27+
.theme-generator-palette-modal__preview__tree-view__tree-item__name {
2628
flex: 1;
2729
color: var(--ods-color-text);
2830
}

0 commit comments

Comments
 (0)