Skip to content

Commit e322b22

Browse files
author
Kubit
committed
Fix Link styles wireframe Theme
1 parent ea857b9 commit e322b22

File tree

6 files changed

+177
-28
lines changed

6 files changed

+177
-28
lines changed

‎src/designSystem/kubitWireframe/astra/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { getComponentsStyles } from '../commons/components/styles';
44
import { getFoundations } from '../commons/foundations';
55
import { getColors } from '../commons/foundations/colors';
66

7-
const COLORS = { ...getColors('#A092F1') };
7+
const COLORS = { ...getColors('#A092F1', '#6E64A6') };
88
const COMPONENTS_STYLES = { ...getComponentsStyles(COLORS) };
99
const FOUNDATIONS_STYLES = { ...getFoundations('#A092F1') };
1010

‎src/designSystem/kubitWireframe/commons/components/link/styles.ts

Lines changed: 169 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,10 @@ const commonContainerTokens = COLORS => ({
2424
font_variant: TextVariantType.PARAGRAPH_SMALL_EXPANDED,
2525
font_weight: FONT_WEIGHT.font_weight_400,
2626
cursor: 'pointer',
27-
...transformShadow(RADIUS.radius_300),
27+
...transformShadow(RADIUS.radius_00),
2828
...shadowAfterStylesSpecificProps(
2929
RADIUS.radius_300,
30-
COLORS.BRAND.color_brand_bg_50,
30+
COLORS,
3131
SPACINGS.spacing_50,
3232
`calc(100% + ${SPACINGS.spacing_100})`,
3333
SPACINGS.spacing_50,
@@ -60,14 +60,25 @@ export const getLinkStyles = (COLORS: {
6060
...commonTokens,
6161
container: {
6262
...commonContainerTokens(COLORS),
63-
color: COLORS.ACCENT.color_neutral_font_50,
63+
color: COLORS.ACCENT.color_accent_default_font_100,
6464
},
6565
icon: {
6666
...commonIconTokens,
67-
color: COLORS.ACCENT.color_neutral_icon_50,
67+
color: COLORS.ACCENT.color_accent_default_icon_100,
68+
},
69+
},
70+
[LinkStateType.PRESSED]: {
71+
...commonTokens,
72+
container: {
73+
...commonContainerTokens(COLORS),
74+
color: COLORS.PRESSED.color_accent_pressed_font_200,
75+
background_color: COLORS.PRESSED.color_accent_pressed_bg_100,
76+
},
77+
icon: {
78+
...commonIconTokens,
79+
color: COLORS.PRESSED.color_accent_pressed_icon_200,
6880
},
6981
},
70-
[LinkStateType.PRESSED]: {},
7182
[LinkStateType.VISITED]: {},
7283
[LinkStateType.DISABLED]: {
7384
...commonTokens,
@@ -84,27 +95,38 @@ export const getLinkStyles = (COLORS: {
8495
...commonTokens,
8596
container: {
8697
...commonContainerTokens(COLORS),
87-
color: COLORS.ACCENT.color_neutral_font_50,
98+
color: COLORS.ACCENT.color_accent_default_font_100,
8899
},
89100
icon: {
90101
...commonIconTokens,
91-
color: COLORS.ACCENT.color_neutral_icon_50,
102+
color: COLORS.ACCENT.color_accent_default_icon_100,
92103
},
93104
},
94105
},
95106
[LinkVariantType.SECONDARY]: {
96107
[LinkStateType.DEFAULT]: {
97108
...commonTokens,
98109
container: {
99-
...commonContainerTokensWithouShadow,
100-
color: COLORS.ACCENT.color_neutral_font_50,
110+
...commonContainerTokens(COLORS),
111+
color: COLORS.ACCENT.color_accent_default_font_50,
101112
},
102113
icon: {
103114
...commonIconTokens,
104-
color: COLORS.ACCENT.color_neutral_icon_50,
115+
color: COLORS.ACCENT.color_accent_default_icon_50,
116+
},
117+
},
118+
[LinkStateType.PRESSED]: {
119+
...commonTokens,
120+
container: {
121+
...commonContainerTokens(COLORS),
122+
color: COLORS.PRESSED.color_accent_pressed_font_150,
123+
background_color: COLORS.PRESSED.color_accent_pressed_bg_100,
124+
},
125+
icon: {
126+
...commonIconTokens,
127+
color: COLORS.PRESSED.color_accent_pressed_icon_150,
105128
},
106129
},
107-
[LinkStateType.PRESSED]: {},
108130
[LinkStateType.VISITED]: {},
109131
[LinkStateType.DISABLED]: {
110132
...commonTokens,
@@ -118,14 +140,62 @@ export const getLinkStyles = (COLORS: {
118140
},
119141
},
120142
[LinkStateType.HOVER]: {
143+
...commonTokens,
144+
container: {
145+
...commonContainerTokens(COLORS),
146+
color: COLORS.ACCENT.color_accent_default_font_50,
147+
},
148+
icon: {
149+
...commonIconTokens,
150+
color: COLORS.ACCENT.color_accent_default_icon_50,
151+
},
152+
},
153+
},
154+
[LinkVariantType.SECONDARY_ALT]: {
155+
[LinkStateType.DEFAULT]: {
156+
...commonTokens,
157+
container: {
158+
...commonContainerTokens(COLORS),
159+
color: COLORS.ACCENT.color_accent_default_font_150,
160+
},
161+
icon: {
162+
...commonIconTokens,
163+
color: COLORS.ACCENT.color_accent_default_icon_150,
164+
},
165+
},
166+
[LinkStateType.PRESSED]: {
167+
...commonTokens,
168+
container: {
169+
...commonContainerTokens(COLORS),
170+
color: COLORS.PRESSED.color_accent_pressed_font_100,
171+
background_color: COLORS.PRESSED.color_accent_pressed_bg_200,
172+
},
173+
icon: {
174+
...commonIconTokens,
175+
color: COLORS.PRESSED.color_accent_pressed_icon_100,
176+
},
177+
},
178+
[LinkStateType.VISITED]: {},
179+
[LinkStateType.DISABLED]: {
121180
...commonTokens,
122181
container: {
123182
...commonContainerTokensWithouShadow,
124-
color: COLORS.ACCENT.color_neutral_font_50,
183+
color: COLORS.DISABLED.color_accentDisabled_font_100,
184+
},
185+
icon: {
186+
...commonIconTokens,
187+
color: COLORS.DISABLED.color_accentDisabled_icon_100,
188+
},
189+
},
190+
[LinkStateType.HOVER]: {
191+
...commonTokens,
192+
container: {
193+
...commonContainerTokens(COLORS),
194+
color: COLORS.ACCENT.color_accent_default_font_150,
125195
},
126196
icon: {
127197
...commonIconTokens,
128-
color: COLORS.ACCENT.color_neutral_icon_50,
198+
color: COLORS.ACCENT.color_accent_default_icon_150,
129199
},
130200
},
131201
},
@@ -136,14 +206,25 @@ export const getLinkStyles = (COLORS: {
136206
...commonTokens,
137207
container: {
138208
...commonContainerTokens(COLORS),
139-
color: COLORS.ACCENT.color_neutral_font_50,
209+
color: COLORS.ACCENT.color_accent_default_font_100,
140210
},
141211
icon: {
142212
...commonIconTokens,
143-
color: COLORS.ACCENT.color_neutral_icon_50,
213+
color: COLORS.ACCENT.color_accent_default_icon_100,
214+
},
215+
},
216+
[LinkStateType.PRESSED]: {
217+
...commonTokens,
218+
container: {
219+
...commonContainerTokens(COLORS),
220+
color: COLORS.PRESSED.color_accent_pressed_font_200,
221+
background_color: COLORS.PRESSED.color_accent_pressed_bg_100,
222+
},
223+
icon: {
224+
...commonIconTokens,
225+
color: COLORS.PRESSED.color_accent_pressed_icon_200,
144226
},
145227
},
146-
[LinkStateType.PRESSED]: {},
147228
[LinkStateType.VISITED]: {},
148229
[LinkStateType.DISABLED]: {
149230
...commonTokens,
@@ -153,33 +234,46 @@ export const getLinkStyles = (COLORS: {
153234
},
154235
icon: {
155236
color: COLORS.DISABLED.color_accentDisabled_icon_100,
237+
width: SPACINGS.spacing_350,
238+
height: SPACINGS.spacing_350,
156239
},
157240
},
158241
[LinkStateType.HOVER]: {
159242
...commonTokens,
160243
container: {
161244
...commonContainerTokens(COLORS),
162-
color: COLORS.ACCENT.color_neutral_font_50,
245+
color: COLORS.ACCENT.color_accent_default_font_100,
163246
},
164247
icon: {
165248
...commonIconTokens,
166-
color: COLORS.ACCENT.color_neutral_icon_50,
249+
color: COLORS.ACCENT.color_accent_default_icon_100,
167250
},
168251
},
169252
},
170253
[LinkVariantType.SECONDARY]: {
171254
[LinkStateType.DEFAULT]: {
172255
...commonTokens,
173256
container: {
174-
...commonContainerTokensWithouShadow,
175-
color: COLORS.ACCENT.color_neutral_font_50,
257+
...commonContainerTokens(COLORS),
258+
color: COLORS.ACCENT.color_accent_default_font_50,
259+
},
260+
icon: {
261+
...commonIconTokens,
262+
color: COLORS.ACCENT.color_accent_default_icon_50,
263+
},
264+
},
265+
[LinkStateType.PRESSED]: {
266+
...commonTokens,
267+
container: {
268+
...commonContainerTokens(COLORS),
269+
color: COLORS.PRESSED.color_accent_pressed_font_150,
270+
background_color: COLORS.PRESSED.color_accent_pressed_bg_100,
176271
},
177272
icon: {
178273
...commonIconTokens,
179-
color: COLORS.ACCENT.color_neutral_icon_50,
274+
color: COLORS.PRESSED.color_accent_pressed_icon_150,
180275
},
181276
},
182-
[LinkStateType.PRESSED]: {},
183277
[LinkStateType.VISITED]: {},
184278
[LinkStateType.DISABLED]: {
185279
...commonTokens,
@@ -189,17 +283,68 @@ export const getLinkStyles = (COLORS: {
189283
},
190284
icon: {
191285
color: COLORS.DISABLED.color_accentDisabled_icon_100,
286+
width: SPACINGS.spacing_350,
287+
height: SPACINGS.spacing_350,
192288
},
193289
},
194290
[LinkStateType.HOVER]: {
291+
...commonTokens,
292+
container: {
293+
...commonContainerTokens(COLORS),
294+
color: COLORS.ACCENT.color_accent_default_font_50,
295+
},
296+
icon: {
297+
...commonIconTokens,
298+
color: COLORS.ACCENT.color_accent_default_icon_50,
299+
},
300+
},
301+
},
302+
[LinkVariantType.SECONDARY_ALT]: {
303+
[LinkStateType.DEFAULT]: {
304+
...commonTokens,
305+
container: {
306+
...commonContainerTokens(COLORS),
307+
color: COLORS.ACCENT.color_accent_default_font_150,
308+
},
309+
icon: {
310+
...commonIconTokens,
311+
color: COLORS.ACCENT.color_accent_default_icon_150,
312+
},
313+
},
314+
[LinkStateType.PRESSED]: {
315+
...commonTokens,
316+
container: {
317+
...commonContainerTokens(COLORS),
318+
color: COLORS.PRESSED.color_accent_pressed_font_100,
319+
background_color: COLORS.PRESSED.color_accent_pressed_bg_200,
320+
},
321+
icon: {
322+
...commonIconTokens,
323+
color: COLORS.PRESSED.color_accent_pressed_icon_100,
324+
},
325+
},
326+
[LinkStateType.VISITED]: {},
327+
[LinkStateType.DISABLED]: {
195328
...commonTokens,
196329
container: {
197330
...commonContainerTokensWithouShadow,
198-
color: COLORS.ACCENT.color_neutral_font_50,
331+
color: COLORS.DISABLED.color_accentDisabled_font_100,
332+
},
333+
icon: {
334+
color: COLORS.DISABLED.color_accentDisabled_icon_100,
335+
width: SPACINGS.spacing_350,
336+
height: SPACINGS.spacing_350,
337+
},
338+
},
339+
[LinkStateType.HOVER]: {
340+
...commonTokens,
341+
container: {
342+
...commonContainerTokens(COLORS),
343+
color: COLORS.ACCENT.color_accent_default_font_150,
199344
},
200345
icon: {
201346
...commonIconTokens,
202-
color: COLORS.ACCENT.color_neutral_icon_50,
347+
color: COLORS.ACCENT.color_accent_default_icon_150,
203348
},
204349
},
205350
},

‎src/designSystem/kubitWireframe/commons/components/link/variants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
export enum LinkVariantType {
22
PRIMARY = 'PRIMARY',
33
SECONDARY = 'SECONDARY',
4+
SECONDARY_ALT = 'SECONDARY_ALT',
45
}

‎src/designSystem/kubitWireframe/commons/foundations/colors.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
export const getColors = (
2-
accentColor = '#DF2B51'
2+
accentColor = '#DF2B51',
3+
accentColorPressed = '#99354B'
34
): {
45
[key: string]: { [key: string]: string };
56
} => {
@@ -94,6 +95,7 @@ export const getColors = (
9495
color_accent_pressed_font_50: '#A01D39',
9596
color_accent_pressed_font_100: '#F4F4F4',
9697
color_accent_pressed_font_150: '#4F4F4F',
98+
color_accent_pressed_font_200: accentColorPressed,
9799

98100
color_accent_pressed_bg_50: '#A01D39',
99101
color_accent_pressed_bg_100: '#F4F4F4',
@@ -102,6 +104,7 @@ export const getColors = (
102104
color_accent_pressed_icon_50: '#A01D39',
103105
color_accent_pressed_icon_100: '#F4F4F4',
104106
color_accent_pressed_icon_150: '#4F4F4F',
107+
color_accent_pressed_icon_200: accentColorPressed,
105108
color_accent_pressed_icon_250: '#FFFFFF',
106109

107110
color_accent_pressed_border_50: '#A01D39',

‎src/designSystem/kubitWireframe/root/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { getComponentsStyles } from '../commons/components/styles';
44
import { getFoundations } from '../commons/foundations';
55
import { getColors } from '../commons/foundations/colors';
66

7-
const COLORS = { ...getColors('#62D8C0') };
7+
const COLORS = { ...getColors('#62D8C0', '#347366') };
88
const COMPONENTS_STYLES = { ...getComponentsStyles(COLORS) };
99
const FOUNDATIONS_STYLES = { ...getFoundations('#62D8C0') };
1010

‎src/designSystem/kubitWireframe/vulcan/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { getComponentsStyles } from '../commons/components/styles';
44
import { getFoundations } from '../commons/foundations';
55
import { getColors } from '../commons/foundations/colors';
66

7-
const COLORS = { ...getColors('#FF597D') };
7+
const COLORS = { ...getColors('#FF597D', '#99354B') };
88
const COMPONENTS_STYLES = { ...getComponentsStyles(COLORS) };
99
const FOUNDATIONS_STYLES = { ...getFoundations('#FF597D') };
1010

0 commit comments

Comments
 (0)