Skip to content

Commit e06ee92

Browse files
author
Hector Arce De Las Heras
committed
Improve styles for Media components
1 parent b18d96b commit e06ee92

File tree

3 files changed

+120
-72
lines changed

3 files changed

+120
-72
lines changed

‎src/designSystem/kubit/components/mediaButton/styles.ts

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,52 +5,65 @@ import { COLORS, RADIUS, SPACINGS } from '../../foundations';
55
import { LoaderVariantType } from '../loader';
66
import { MediaButtonVariantType } from './variants';
77

8+
const commonButtonContainerProps = {
9+
position: 'relative',
10+
cursor: 'pointer',
11+
border_radius: RADIUS.radius_100,
12+
margin: SPACINGS.spacing_100,
13+
};
14+
15+
const commonContainerProps = {
16+
position: 'relative',
17+
display: 'flex',
18+
cursor: 'pointer',
19+
border_radius: RADIUS.radius_100,
20+
};
21+
22+
const commonDefaultProps = {
23+
container: { ...commonContainerProps },
24+
buttonContainer: { ...commonButtonContainerProps },
25+
icon: {
26+
color: COLORS.BRAND.color_brand_bg_50,
27+
disabled: {
28+
color: COLORS.ACCENT.color_accent_default_bg_100,
29+
},
30+
},
31+
iconToTransition: {
32+
color: COLORS.BRAND.color_brand_bg_50,
33+
},
34+
loader: {
35+
variant: LoaderVariantType.PRIMARY_WHITE,
36+
},
37+
};
38+
839
export const MEDIA_BUTTON_STYLES: MediaButtonStylesType<MediaButtonVariantType> = {
940
[MediaButtonVariantType.DEFAULT]: {
1041
[MediaButtonSizeType.LARGE]: {
42+
...commonDefaultProps,
1143
container: {
12-
position: 'relative',
13-
display: 'flex',
14-
cursor: 'pointer',
44+
...commonContainerProps,
1545
background_color: COLORS.NEUTRAL.color_neutral_bg_100,
16-
padding: SPACINGS.spacing_100,
17-
border_radius: RADIUS.radius_100,
18-
width: SPACINGS.spacing_100,
19-
height: SPACINGS.spacing_100,
20-
min_width: SPACINGS.spacing_100,
21-
min_height: SPACINGS.spacing_100,
22-
},
23-
icon: {
24-
color: COLORS.BRAND.color_brand_bg_50,
2546
},
26-
iconToTransition: {
27-
color: COLORS.BRAND.color_brand_bg_50,
28-
},
29-
loader: {
30-
variant: LoaderVariantType.PRIMARY_WHITE,
47+
buttonContainer: {
48+
...commonButtonContainerProps,
49+
width: SPACINGS.spacing_500,
50+
height: SPACINGS.spacing_500,
51+
min_width: SPACINGS.spacing_500,
52+
min_height: SPACINGS.spacing_500,
3153
},
3254
},
3355
[MediaButtonSizeType.SMALL]: {
56+
...commonDefaultProps,
3457
container: {
35-
position: 'relative',
36-
display: 'flex',
37-
cursor: 'pointer',
58+
...commonContainerProps,
3859
background_color: COLORS.NEUTRAL.color_neutral_bg_100,
39-
padding: SPACINGS.spacing_100,
40-
border_radius: RADIUS.radius_100,
41-
width: SPACINGS.spacing_100,
42-
height: SPACINGS.spacing_100,
43-
min_width: SPACINGS.spacing_100,
44-
min_height: SPACINGS.spacing_100,
45-
},
46-
icon: {
47-
color: COLORS.BRAND.color_brand_bg_50,
48-
},
49-
iconToTransition: {
50-
color: COLORS.BRAND.color_brand_bg_50,
5160
},
52-
loader: {
53-
variant: LoaderVariantType.PRIMARY_WHITE,
61+
buttonContainer: {
62+
...commonButtonContainerProps,
63+
width: SPACINGS.spacing_400,
64+
height: SPACINGS.spacing_400,
65+
min_width: SPACINGS.spacing_400,
66+
min_height: SPACINGS.spacing_400,
5467
},
5568
},
5669
},

‎src/designSystem/kubit/components/mediaProgressBar/styles.ts

Lines changed: 35 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,76 @@
11
import { MediaProgressBarStylesType } from '@/components/mediaProgressBar';
22
import { DeviceBreakpointsType } from '@/types';
33

4-
import { COLORS, RADIUS, SPACINGS } from '../../foundations';
4+
import { BORDERS, COLORS, RADIUS, SPACINGS } from '../../foundations';
55
import { MediaProgressBarVariantType } from './variants';
66

77
const commonProps = {
88
container: {
9-
width: 'inherit',
109
display: 'flex',
11-
gap: SPACINGS.spacing_100,
1210
},
1311
barContainer: {
14-
position: 'relative',
15-
width: '100%',
16-
height: SPACINGS.spacing_200,
12+
display: 'flex',
13+
align_items: 'center',
1714
cursor: 'pointer',
15+
justify_content: 'center',
16+
width: SPACINGS.spacing_400,
17+
height: SPACINGS.spacing_400,
18+
filled: {
19+
width: SPACINGS.spacing_500,
20+
},
1821
[DeviceBreakpointsType.TABLET]: {
19-
min_width: SPACINGS.spacing_100,
22+
width: SPACINGS.spacing_550,
23+
height: SPACINGS.spacing_550,
2024
},
2125
[DeviceBreakpointsType.MOBILE]: {
22-
min_width: SPACINGS.spacing_100,
26+
width: SPACINGS.spacing_550,
27+
height: SPACINGS.spacing_550,
2328
},
2429
},
2530
progressBar: {
26-
position: 'absolute',
2731
top: '40%',
2832
left: '0',
29-
width: '0',
30-
height: SPACINGS.spacing_100,
31-
border_radius: RADIUS.radius_100,
32-
background: COLORS.BRAND.color_brand_bg_50,
33+
width: SPACINGS.spacing_150,
34+
height: SPACINGS.spacing_150,
35+
margin: SPACINGS.spacing_100,
36+
border_radius: RADIUS.radius_75,
37+
background: COLORS.NEUTRAL.color_neutral_bg_150,
3338
},
3439
bullet: {
35-
width: SPACINGS.spacing_200,
36-
height: SPACINGS.spacing_200,
40+
width: SPACINGS.spacing_400,
41+
height: SPACINGS.spacing_400,
3742
background_color: COLORS.ACCENT.color_accent_default_bg_100,
3843
position: 'absolute',
3944
top: '50%',
4045
right: '0',
41-
border_radius: RADIUS.radius_100,
46+
border_radius: RADIUS.radius_75,
4247
transform: 'translate(50%, -50%)',
4348
cursor: 'grab',
4449
},
4550
};
4651

4752
const commonBar = {
48-
position: 'absolute',
49-
top: '50%',
50-
left: '0',
51-
width: 'inherit',
52-
height: SPACINGS.spacing_100,
53-
border_radius: RADIUS.radius_50,
53+
border_radius: RADIUS.radius_75,
54+
border_style: 'solid',
55+
border_width: BORDERS.border_50,
56+
width: SPACINGS.spacing_450,
57+
height: SPACINGS.spacing_300,
58+
display: 'flex',
59+
align_items: 'center',
5460
};
5561

5662
export const MEDIA_PROGRESS_BAR_STYLES: MediaProgressBarStylesType<MediaProgressBarVariantType> = {
5763
[MediaProgressBarVariantType.DEFAULT]: {
5864
...commonProps,
5965
bar: {
6066
...commonBar,
61-
background: COLORS.NEUTRAL.color_neutral_bg_100,
67+
background: COLORS.NEUTRAL.color_neutral_bg_200,
68+
border_color: COLORS.BRAND.color_brand_border_50,
69+
filled: {
70+
padding: SPACINGS.spacing_100,
71+
width: SPACINGS.spacing_300,
72+
height: SPACINGS.spacing_300,
73+
},
6274
},
6375
},
6476
};

‎src/designSystem/kubit/components/pageControlAutomate/styles.ts

Lines changed: 38 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,41 +10,64 @@ const commonProps = {
1010
container: {
1111
display: 'flex',
1212
align_items: 'center',
13-
height: SPACINGS.spacing_250,
14-
column_gap: SPACINGS.spacing_50,
13+
width: 'auto',
1514
[DeviceBreakpointsType.DESKTOP]: {
16-
width: '100%',
15+
height: SPACINGS.spacing_400,
16+
max_height: SPACINGS.spacing_450,
1717
},
1818
[DeviceBreakpointsType.TABLET]: {
19-
width: '100%',
19+
height: SPACINGS.spacing_550,
2020
},
2121
[DeviceBreakpointsType.MOBILE]: {
22-
width: '20.5rem',
22+
height: SPACINGS.spacing_550,
2323
},
2424
},
2525
indicatorsContainer: {
2626
display: 'flex',
27-
width: '100%',
28-
column_gap: SPACINGS.spacing_150,
27+
},
28+
mediaButtonContainer: {
29+
margin_right: SPACINGS.spacing_300,
2930
},
3031
mediaButton: {
3132
iconSize: MediaButtonSizeType.SMALL,
3233
},
34+
leftArrowContainer: {
35+
[DeviceBreakpointsType.DESKTOP]: {
36+
margin_right: SPACINGS.spacing_300,
37+
},
38+
[DeviceBreakpointsType.TABLET]: {
39+
margin_right: SPACINGS.spacing_150,
40+
},
41+
[DeviceBreakpointsType.MOBILE]: {
42+
margin_right: SPACINGS.spacing_150,
43+
},
44+
},
45+
rightArrowContainer: {
46+
[DeviceBreakpointsType.DESKTOP]: {
47+
margin_left: SPACINGS.spacing_300,
48+
},
49+
[DeviceBreakpointsType.TABLET]: {
50+
margin_left: SPACINGS.spacing_150,
51+
},
52+
[DeviceBreakpointsType.MOBILE]: {
53+
margin_left: SPACINGS.spacing_150,
54+
},
55+
},
3356
leftArrowIcon: {
34-
width: SIZES.size_150,
35-
height: SIZES.size_150,
57+
width: SIZES.size_250,
58+
height: SIZES.size_250,
3659
disabled: {
37-
width: SIZES.size_150,
38-
height: SIZES.size_150,
60+
width: SIZES.size_250,
61+
height: SIZES.size_250,
3962
color: COLORS.ACCENT.color_accent_default_bg_100,
4063
},
4164
},
4265
rightArrowIcon: {
43-
width: SIZES.size_150,
44-
height: SIZES.size_150,
66+
width: SIZES.size_250,
67+
height: SIZES.size_250,
4568
disabled: {
46-
width: SIZES.size_150,
47-
height: SIZES.size_150,
69+
width: SIZES.size_250,
70+
height: SIZES.size_250,
4871
color: COLORS.ACCENT.color_accent_default_bg_100,
4972
},
5073
},

0 commit comments

Comments
 (0)