Skip to content

Commit 4a3f33d

Browse files
tenphitenphi
committed
fix(Menu): button styles
1 parent 323a136 commit 4a3f33d

File tree

2 files changed

+71
-75
lines changed

2 files changed

+71
-75
lines changed

‎src/components/actions/Button/Button.tsx‎

Lines changed: 58 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export interface CubeButtonProps extends CubeActionProps {
3232

3333
const STYLE_PROPS = [...CONTAINER_STYLES, ...TEXT_STYLES];
3434

35-
export const DEFAULT_BUTTON_STYLES: Styles = {
35+
export const DEFAULT_BUTTON_STYLES = {
3636
display: 'inline-grid',
3737
placeItems: 'center stretch',
3838
placeContent: 'center',
@@ -82,68 +82,70 @@ export const DEFAULT_BUTTON_STYLES: Styles = {
8282
'': true,
8383
'[data-type="link"] & !focused': 0,
8484
},
85-
};
85+
} as const;
8686

87-
const ButtonElement = tasty({
88-
qa: 'Button',
89-
styles: DEFAULT_BUTTON_STYLES,
90-
variants: {
91-
default: {
92-
outline: {
93-
'': '0 #purple-text.0',
94-
'focused & ([data-type="primary"] | [data-type="link"])':
95-
'1bw #purple-text',
96-
},
97-
border: {
98-
'': '#border',
99-
'[data-type="primary"]': '#clear',
100-
'[data-type="primary"] & pressed': '#purple-text',
101-
'[data-type="secondary"]': '#purple.15',
102-
'[data-type="secondary"] & pressed': '#purple.3',
103-
'[data-type="clear"]': '#clear',
104-
'[data-type="clear"] & pressed': '#purple-text.10',
105-
'[data-type="outline"]': '#dark.12',
106-
'[data-type="neutral"] | [disabled]': '#clear',
107-
focused: '#purple-text',
108-
'[data-type="link"]': '0',
109-
},
110-
fill: {
111-
'': '#clear',
87+
export const DEFAULT_THEME_STYLES = {
88+
outline: {
89+
'': '0 #purple-text.0',
90+
'focused & ([data-type="primary"] | [data-type="link"])':
91+
'1bw #purple-text',
92+
},
93+
border: {
94+
'': '#border',
95+
'[data-type="primary"]': '#clear',
96+
'[data-type="primary"] & pressed': '#purple-text',
97+
'[data-type="secondary"]': '#purple.15',
98+
'[data-type="secondary"] & pressed': '#purple.3',
99+
'[data-type="clear"]': '#clear',
100+
'[data-type="clear"] & pressed': '#purple-text.10',
101+
'[data-type="outline"]': '#dark.12',
102+
'[data-type="neutral"] | [disabled]': '#clear',
103+
focused: '#purple-text',
104+
'[data-type="link"]': '0',
105+
},
106+
fill: {
107+
'': '#clear',
112108

113-
'[data-type="primary"]': '#purple',
114-
'[data-type="primary"] & hovered': '#purple-text',
115-
'[data-type="primary"] & pressed': '#purple',
109+
'[data-type="primary"]': '#purple',
110+
'[data-type="primary"] & hovered': '#purple-text',
111+
'[data-type="primary"] & pressed': '#purple',
116112

117-
'[data-type="secondary"]': '#purple.10',
118-
'[data-type="secondary"] & hovered': '#purple.16',
119-
'[data-type="secondary"] & pressed': '#purple-text.10',
113+
'[data-type="secondary"]': '#purple.10',
114+
'[data-type="secondary"] & hovered': '#purple.16',
115+
'[data-type="secondary"] & pressed': '#purple-text.10',
120116

121-
'[data-type="neutral"] | [data-type="outline"]': '#dark.0',
122-
'([data-type="neutral"] | [data-type="outline"]) & hovered': '#dark.03',
123-
'([data-type="neutral"] | [data-type="outline"]) & (pressed | selected)':
124-
'#dark.06',
117+
'[data-type="neutral"] | [data-type="outline"]': '#dark.0',
118+
'([data-type="neutral"] | [data-type="outline"]) & hovered': '#dark.03',
119+
'([data-type="neutral"] | [data-type="outline"]) & (pressed | selected)':
120+
'#dark.06',
125121

126-
'[disabled] & ![data-type="link"]': '#dark.04',
122+
'[disabled] & ![data-type="link"]': '#dark.04',
127123

128-
'[data-type="clear"]': '#purple.0',
129-
'[data-type="clear"] & hovered': '#purple.16',
130-
'[data-type="clear"] & pressed': '#purple.10',
131-
'[data-type="clear"] & [disabled]': '#purple.0',
132-
},
133-
color: {
134-
// default
135-
'': '#white',
136-
'[data-type="secondary"]': '#purple',
137-
'[data-type="clear"] | [data-type="link"]': '#purple-text',
138-
'[data-type="link"] & pressed': '#purple',
139-
'[data-type="neutral"] | [data-type="outline"]': '#dark-02',
140-
'([data-type="neutral"] | [data-type="outline"]) & hovered': '#dark-02',
141-
'([data-type="neutral"] | [data-type="outline"]) & pressed': '#dark',
124+
'[data-type="clear"]': '#purple.0',
125+
'[data-type="clear"] & hovered': '#purple.16',
126+
'[data-type="clear"] & pressed': '#purple.10',
127+
'[data-type="clear"] & [disabled]': '#purple.0',
128+
},
129+
color: {
130+
// default
131+
'': '#white',
132+
'[data-type="secondary"]': '#purple',
133+
'[data-type="clear"] | [data-type="link"]': '#purple-text',
134+
'[data-type="link"] & pressed': '#purple',
135+
'[data-type="neutral"] | [data-type="outline"]': '#dark-02',
136+
'([data-type="neutral"] | [data-type="outline"]) & hovered': '#dark-02',
137+
'([data-type="neutral"] | [data-type="outline"]) & pressed': '#dark',
138+
139+
// other
140+
'[disabled]': '#dark.30',
141+
},
142+
} as const;
142143

143-
// other
144-
'[disabled]': '#dark.30',
145-
},
146-
},
144+
const ButtonElement = tasty({
145+
qa: 'Button',
146+
styles: DEFAULT_BUTTON_STYLES,
147+
variants: {
148+
default: DEFAULT_THEME_STYLES,
147149
danger: {
148150
outline: {
149151
'': '0 #danger-text.0',

‎src/components/pickers/Menu/MenuButton.tsx‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,39 @@ import { ReactElement, ReactNode } from 'react';
22

33
import { CheckIcon } from '../../../icons';
44
import { tasty } from '../../../tasty';
5-
import { DEFAULT_BUTTON_STYLES } from '../../actions/index';
5+
import {
6+
DEFAULT_BUTTON_STYLES,
7+
DEFAULT_THEME_STYLES,
8+
} from '../../actions/index';
69
import { Block, CubeBlockProps } from '../../Block';
710
import { Text } from '../../content/Text';
811
import { Space } from '../../layout/Space';
912

1013
const StyledButton = tasty(Block, {
1114
styles: {
1215
...DEFAULT_BUTTON_STYLES,
16+
...DEFAULT_THEME_STYLES,
1317
border: {
1418
'': '#clear',
1519
pressed: '#clear',
20+
'focused & !hovered': '#purple-text',
1621
},
1722
fill: {
1823
'': '#clear',
19-
'hovered | focused': '#dark.04',
20-
'pressed | selected': '#purple.10',
21-
'focused & selected': '##purple.16',
22-
'focused & pressed': '#purple.10',
23-
disabled: '#clear',
24-
},
25-
color: {
26-
'': '#dark-02',
27-
'hovered | focused': '#dark-02',
28-
'pressed | selected': '#purple-text',
29-
'focused & selected': '#purple-text',
30-
'focused & pressed': '#purple-text',
31-
disabled: '#dark-04',
24+
hovered: '#dark.03',
25+
'pressed | selected': '#dark.06',
26+
'[disabled] & ![data-type="link"]': '#dark.04',
3227
},
3328
cursor: {
3429
'': 'pointer',
3530
disabled: 'default',
3631
},
3732
shadow: '#clear',
3833
padding: {
39-
'': '(0.75x - 1px) (1.5x - 1px)',
40-
'selectable & !selected':
41-
'(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px)',
34+
'': '0 (1.5x - 1px)',
35+
'selectable & !selected': '0 (1.5x - 1px) 0 (1.5x - 1px)',
4236
'selectionIcon & selectable & !selected':
43-
'(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px + 22px)',
37+
'0 (1.5x - 1px) 0 (1.5x - 1px + 22px)',
4438
},
4539
display: 'flex',
4640
flow: 'row',
@@ -140,7 +134,7 @@ export function MenuButton({
140134
};
141135

142136
return (
143-
<StyledButton {...rest} mods={mods}>
137+
<StyledButton data-type="neutral" data-size="small" {...rest} mods={mods}>
144138
{checkIcon ? <div data-element="ButtonIcon">{checkIcon}</div> : null}
145139
{icon ? <div data-element="ButtonIcon">{icon}</div> : null}
146140
<Space gap="1x" placeContent="space-between" overflow="clip" width="100%">

0 commit comments

Comments
 (0)