Skip to content

Commit 1e8a4ed

Browse files
tenphitenphi
committed
feat(Button): type color rework
1 parent f338e7d commit 1e8a4ed

File tree

4 files changed

+61
-66
lines changed

4 files changed

+61
-66
lines changed

‎.changeset/rich-otters-tan.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@cube-dev/ui-kit": minor
3+
---
4+
5+
Change neutral and outline types visually for Button component and set outline as the default type.

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

Lines changed: 49 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ export const DEFAULT_BUTTON_STYLES: Styles = {
5555
textDecoration: 'none',
5656
transition: 'theme',
5757
reset: 'button',
58+
outlineOffset: 1,
5859
padding: {
5960
'': '0 (2x - 1bw)',
6061
'[data-size="small"]': '0 (1x - 1bw)',
@@ -97,25 +98,23 @@ const ButtonElement = tasty({
9798
styles: DEFAULT_BUTTON_STYLES,
9899
variants: {
99100
default: {
100-
shadow: {
101-
'': false,
102-
'[data-type="link"]': '0 @border-width 0 0 #purple.20',
103-
'[data-type="link"] & (pressed | hovered | [disabled])':
104-
'0 0 0 0 #purple.20',
105-
},
106101
outline: {
107-
'': '0 #focus.0',
108-
focused: '@outline-width #focus',
102+
'': '0 #purple-text.0',
103+
'focused & ([data-type="primary"] | [data-type="link"])':
104+
'1bw #purple-text',
109105
},
110106
border: {
111-
// default
112-
'': '#clear',
107+
'': '#border',
108+
'[data-type="primary"]': '#clear',
113109
'[data-type="primary"] & pressed': '#purple-text',
110+
'[data-type="secondary"]': '#purple.15',
114111
'[data-type="secondary"] & pressed': '#purple.3',
115-
'[data-type="outline"]': '#purple.3',
112+
'[data-type="outline"]': '#border',
116113
'[data-type="outline"] & [disabled]': '#dark.12',
114+
'[data-type="clear"]': '#clear',
117115
'([data-type="clear"] | [data-type="outline"]) & pressed':
118116
'#purple-text.10',
117+
focused: '#purple-text',
119118
'[data-type="link"]': '0',
120119
},
121120
fill: {
@@ -129,52 +128,48 @@ const ButtonElement = tasty({
129128
'[data-type="secondary"] & hovered': '#purple.16',
130129
'[data-type="secondary"] & pressed': '#purple-text.10',
131130

132-
'[data-type="neutral"]': '#dark.0',
133-
'[data-type="neutral"] & hovered': '#dark.04',
134-
'[data-type="neutral"] & pressed': '#dark.05',
131+
'[data-type="neutral"] | [data-type="outline"]': '#dark.0',
132+
'([data-type="neutral"] | [data-type="outline"]) & hovered': '#dark-bg',
133+
'([data-type="neutral"] | [data-type="outline"]) & pressed':
134+
'#light-border',
135135

136136
'[disabled] & ![data-type="link"]': '#dark.04',
137137

138-
'([data-type="clear"] | [data-type="outline"])': '#purple.0',
139-
'([data-type="clear"] | [data-type="outline"]) & hovered': '#purple.16',
140-
'([data-type="clear"] | [data-type="outline"]) & pressed': '#purple.10',
141-
'([data-type="clear"] | [data-type="outline"]) & [disabled]':
142-
'#purple.0',
138+
'[data-type="clear"]': '#purple.0',
139+
'[data-type="clear"] & hovered': '#purple.16',
140+
'[data-type="clear"] & pressed': '#purple.10',
141+
'[data-type="clear"] & [disabled]': '#purple.0',
143142
},
144143
color: {
145144
// default
146145
'': '#white',
147146
'[data-type="secondary"]': '#purple',
148-
'[data-type="clear"] | [data-type="outline"] | [data-type="link"]':
149-
'#purple-text',
147+
'[data-type="clear"] | [data-type="link"]': '#purple-text',
150148
'[data-type="link"] & pressed': '#purple',
151-
'[data-type="neutral"]': '#dark-02',
152-
'[data-type="neutral"] & hovered': '#dark-02',
153-
'[data-type="neutral"] & pressed': '#purple',
149+
'[data-type="neutral"] | [data-type="outline"]': '#dark-02',
150+
'([data-type="neutral"] | [data-type="outline"]) & hovered': '#dark-02',
151+
'([data-type="neutral"] | [data-type="outline"]) & pressed': '#dark',
154152

155153
// other
156154
'[disabled]': '#dark.30',
157155
},
158156
},
159157
danger: {
160-
shadow: {
161-
'': false,
162-
'[data-type="link"]': '0 @border-width 0 0 #danger.20',
163-
'[data-type="link"] & (pressed | hovered | [disabled])':
164-
'0 0 0 0 #danger.20',
165-
},
166158
outline: {
167-
'': '0 #danger.0',
168-
focused: '@outline-width #danger.50',
159+
'': '0 #danger-text.0',
160+
'focused & ([data-type="primary"] | [data-type="link"])':
161+
'1bw #danger-text',
169162
},
170163
border: {
171-
'': '#clear',
164+
'': '#border',
165+
'[data-type="primary"]': '#clear',
172166
'[data-type="primary"] & pressed': '#danger-text',
167+
'[data-type="secondary"]': '#danger.15',
173168
'[data-type="secondary"] & pressed': '#danger.3',
174-
'[data-type="outline"]': '#danger-text.3',
175-
'([data-type="clear"] | [data-type="outline"]) & pressed':
176-
'#danger-text.10',
169+
'[data-type="clear"]': '#clear',
170+
'[data-type="outline"]': '#danger.15',
177171
'[data-type="outline"] & pressed': '#danger.3',
172+
focused: '#danger-text',
178173
'[data-type="link"]': '#clear',
179174
},
180175
fill: {
@@ -214,24 +209,21 @@ const ButtonElement = tasty({
214209
},
215210
},
216211
success: {
217-
shadow: {
218-
'': false,
219-
'[data-type="link"]': '0 @border-width 0 0 #success.20',
220-
'[data-type="link"] & (pressed | hovered | [disabled])':
221-
'0 0 0 0 #success.20',
222-
},
223212
outline: {
224-
'': '0 #success.0',
225-
focused: '@outline-width #success.50',
213+
'': '0 #success-text.0',
214+
'focused & ([data-type="primary"] | [data-type="link"])':
215+
'1bw #success-text',
226216
},
227217
border: {
228-
'': '#clear',
218+
'': '#border',
219+
'[data-type="primary"]': '#clear',
229220
'[data-type="primary"] & pressed': '#success-text',
221+
'[data-type="secondary"]': '#success.15',
230222
'[data-type="secondary"] & pressed': '#success.3',
231-
'[data-type="outline"]': '#success-text.3',
232-
'([data-type="clear"] | [data-type="outline"]) & pressed':
233-
'#success-text.10',
223+
'[data-type="clear"]': '#clear',
224+
'[data-type="outline"]': '#success.15',
234225
'[data-type="outline"] & pressed': '#success.3',
226+
focused: '#success-text',
235227
'[data-type="link"]': '#clear',
236228
},
237229
fill: {
@@ -272,24 +264,20 @@ const ButtonElement = tasty({
272264
},
273265
},
274266
special: {
275-
shadow: {
276-
'': false,
277-
'[data-type="link"]': '0 @border-width 0 0 #white.44',
278-
'[data-type="link"] & (pressed | hovered | [disabled])':
279-
'0 0 0 0 #white.44',
280-
},
281267
outline: {
282268
'': '0 #white.0',
283-
focused: '@outline-width #white.44',
284-
'([data-type="primary"] | [data-type="clear"])': '0 #dark-03.80',
285-
'([data-type="primary"] | [data-type="clear"]) & focused':
286-
'@outline-width #purple-03.80',
269+
'focused & ([data-type="primary"] | [data-type="link"] | [data-type="clear"])':
270+
'1bw #white',
287271
},
288272
border: {
289273
'': '#clear',
290274
'[data-type="primary"] & pressed': '#purple-03',
291-
'[data-type="secondary"] & pressed': '#white.44',
292-
'[data-type="outline"] & !pressed': '#white.44',
275+
'[data-type="secondary"]': '#white.3',
276+
'[data-type="secondary"] & pressed': '#white.4',
277+
'([data-type="outline"] | [data-type="neutral"]) & !pressed':
278+
'#white.3',
279+
'![data-type="primary"] & focused': '#white',
280+
'[data-type="link"]': false,
293281
},
294282
fill: {
295283
'': '#clear',
@@ -416,7 +404,7 @@ export const Button = forwardRef(function Button(
416404
disabled={isDisabledElement}
417405
variant={theme as 'default' | 'danger' | 'special' | 'success'}
418406
data-theme={theme}
419-
data-type={type ?? 'secondary'}
407+
data-type={type ?? 'outline'}
420408
data-size={size ?? 'medium'}
421409
styles={styles}
422410
>

‎src/components/overlays/Dialog/Dialog.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const STYLES_LIST = [...BASE_STYLES, ...DIMENSION_STYLES, ...BLOCK_STYLES];
3333
const DialogElement = tasty({
3434
as: 'section',
3535
styles: {
36+
fill: '#border',
3637
pointerEvents: 'auto',
3738
position: {
3839
'': 'relative',
@@ -57,7 +58,6 @@ const DialogElement = tasty({
5758
'[data-type="tray"]': '1cr top',
5859
'[data-type="fullscreenTakeover"]': '0r',
5960
},
60-
fill: '#white',
6161
shadow: {
6262
'': '0 2x 4x #shadow',
6363
'[data-type="popover"] | [data-type="panel"]': '0px .5x 2x #shadow',
@@ -72,11 +72,11 @@ const DialogElement = tasty({
7272
'[data-type="popover"]': '1x',
7373
},
7474
'@dialog-content-padding-v': {
75-
'': '3x',
75+
'': '2x',
7676
'[data-type="popover"]': '2x',
7777
},
7878
'@dialog-padding-h': {
79-
'': '3x',
79+
'': '2x',
8080
'[data-type="popover"]': '2x',
8181
},
8282
'@dialog-footer-v': {
@@ -86,13 +86,15 @@ const DialogElement = tasty({
8686
'@dialog-content-gap': '3x',
8787

8888
DialogContainer: {
89+
position: 'relative',
8990
display: 'flex',
9091
flow: 'column',
9192
placeItems: 'stretch',
9293
placeContent: 'stretch',
9394
placeSelf: 'stretch',
95+
fill: '#white',
9496
border: {
95-
'': '1bw solid #light-border',
97+
'': '1bw solid #dark-05',
9698
'[data-type="popover"]': 0,
9799
},
98100
radius: { '': '(1cr - 1ow)', '[data-type="popover"]': '1cr' },

‎src/tasty/styles/predefined.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ export function predefine() {
149149
.join('/');
150150
});
151151
// Other styles
152-
defineStyleAlias('outlineOffset', 'outlineOffset', numberConverter);
152+
defineStyleAlias('outlineOffset', 'outline-offset', numberConverter);
153153

154154
[
155155
displayStyle,

0 commit comments

Comments
 (0)