Skip to content

Commit ad73970

Browse files
author
Hector Arce De Las Heras
committed
Include new styles
Add styles for slider, pagination and badge components
1 parent 2de3cff commit ad73970

File tree

11 files changed

+533
-0
lines changed

11 files changed

+533
-0
lines changed

‎src/designSystem/kubit/components/badge/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './styles';
2+
export * from './variants';

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

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { BadgeStatus, BadgeStylesType } from '@/components/badge/types/';
2+
3+
import { COLORS, FONT_WEIGHT, SIZES, SPACINGS } from '../../foundations';
4+
import { TextVariantType } from '../text';
5+
import { BadgeSize, BadgeVariant } from './variants';
6+
7+
export const BADGE_STYLES: BadgeStylesType<BadgeVariant, BadgeSize> = {
8+
[BadgeSize.DEFAULT]: {
9+
icon: {
10+
width: SIZES.size_250,
11+
height: SIZES.size_250,
12+
},
13+
},
14+
[BadgeVariant.PRIMARY]: {
15+
container: {
16+
gap: SPACINGS.spacing_150,
17+
},
18+
label: {
19+
font_variant: TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
20+
font_weight: FONT_WEIGHT.font_weight_400,
21+
},
22+
labelIcon: {
23+
width: SIZES.size_150,
24+
height: SIZES.size_150,
25+
},
26+
[BadgeStatus.OPEN]: {
27+
iconColor: COLORS.BRAND.color_brand_icon_50,
28+
labelFontColor: COLORS.ACCENT.color_accent_default_font_100,
29+
labelIconColor: COLORS.BRAND.color_brand_icon_50,
30+
},
31+
[BadgeStatus.CLOSE]: {
32+
iconColor: COLORS.NEUTRAL.color_neutral_icon_50,
33+
labelFontColor: COLORS.NEUTRAL.color_neutral_font_50,
34+
labelIconColor: COLORS.NEUTRAL.color_neutral_icon_50,
35+
},
36+
},
37+
[BadgeVariant.ALTERNATIVE]: {
38+
container: {
39+
gap: SPACINGS.spacing_150,
40+
},
41+
label: {
42+
font_variant: TextVariantType.PARAGRAPH_CAPTION_EXTENDED,
43+
font_weight: FONT_WEIGHT.font_weight_400,
44+
},
45+
labelIcon: {
46+
width: SIZES.size_150,
47+
height: SIZES.size_150,
48+
},
49+
[BadgeStatus.OPEN]: {
50+
iconColor: COLORS.NEUTRAL.color_neutral_icon_250,
51+
labelFontColor: COLORS.NEUTRAL.color_neutral_font_250,
52+
labelIconColor: COLORS.NEUTRAL.color_neutral_icon_250,
53+
},
54+
[BadgeStatus.CLOSE]: {
55+
iconColor: COLORS.NEUTRAL.color_neutral_icon_250,
56+
labelFontColor: COLORS.NEUTRAL.color_neutral_font_250,
57+
labelIconColor: COLORS.NEUTRAL.color_neutral_icon_250,
58+
},
59+
},
60+
};

‎src/designSystem/kubit/components/badge/variants.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export enum BadgeVariant {
2+
PRIMARY = 'PRIMARY',
3+
ALTERNATIVE = 'ALTERNATIVE',
4+
}
5+
6+
export enum BadgeSize {
7+
DEFAULT = 'DEFAULT',
8+
}

‎src/designSystem/kubit/components/pagination/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './styles';
2+
export * from './variants';

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
import {
2+
PaginationCommonProps,
3+
PaginationState,
4+
PaginationThemeProps,
5+
} from '@/components/pagination/types';
6+
import { DeviceBreakpointsType } from '@/types';
7+
8+
import { COLORS, FONT_WEIGHT, SIZES, SPACINGS } from '../../foundations';
9+
import { TextVariantType } from '../text';
10+
import { PaginationVariantsTheme } from './variants';
11+
12+
const commonPageContainer = {
13+
display: 'flex',
14+
align_items: 'center',
15+
justify_content: 'center',
16+
height: SIZES.size_300,
17+
width: SIZES.size_300,
18+
clickable: {
19+
cursor: 'pointer',
20+
},
21+
};
22+
23+
const commonProps: PaginationCommonProps = {
24+
container: {
25+
display: 'flex',
26+
align_items: 'center',
27+
justify_content: 'center',
28+
height: 'auto',
29+
width: 'auto',
30+
},
31+
pagesContainer: {
32+
display: 'flex',
33+
align_items: 'center',
34+
justify_content: 'center',
35+
height: 'auto',
36+
width: 'auto',
37+
column_gap: SPACINGS.spacing_150,
38+
margin: `0 ${SPACINGS.spacing_300}`,
39+
},
40+
paginationLeftArrowIcon: {
41+
width: SIZES.size_300,
42+
height: SIZES.size_300,
43+
color: COLORS.BRAND.color_brand_bg_50,
44+
disabled: {
45+
width: SIZES.size_300,
46+
height: SIZES.size_300,
47+
color: COLORS.DISABLED.color_accentDisabled_icon_50,
48+
},
49+
},
50+
paginationRightArrowIcon: {
51+
width: SIZES.size_300,
52+
height: SIZES.size_300,
53+
color: COLORS.BRAND.color_brand_bg_50,
54+
disabled: {
55+
width: SIZES.size_300,
56+
height: SIZES.size_300,
57+
color: COLORS.DISABLED.color_accentDisabled_icon_50,
58+
},
59+
},
60+
paginationCountersNumber: {
61+
[DeviceBreakpointsType.LARGE_DESKTOP]: {
62+
counters: 5,
63+
},
64+
[DeviceBreakpointsType.DESKTOP]: {
65+
counters: 5,
66+
},
67+
[DeviceBreakpointsType.TABLET]: {
68+
counters: 5,
69+
},
70+
[DeviceBreakpointsType.MOBILE]: {
71+
counters: 4,
72+
},
73+
},
74+
};
75+
76+
export const PAGINATION_STYLES: PaginationThemeProps<PaginationVariantsTheme> = {
77+
[PaginationVariantsTheme.DEFAULT]: {
78+
...commonProps,
79+
[PaginationState.DEFAULT]: {
80+
pageContainer: {
81+
...commonPageContainer,
82+
},
83+
page: {
84+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
85+
color: COLORS.NEUTRAL.color_neutral_font_50,
86+
font_weight: FONT_WEIGHT.font_weight_400,
87+
},
88+
},
89+
[PaginationState.SELECTED]: {
90+
pageContainer: {
91+
...commonPageContainer,
92+
background_color: COLORS.SECONDARY.color_secondary_bg_100,
93+
},
94+
page: {
95+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
96+
color: COLORS.NEUTRAL.color_neutral_font_250,
97+
font_weight: 700,
98+
},
99+
},
100+
},
101+
};

‎src/designSystem/kubit/components/pagination/variants.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export enum PaginationVariantsTheme {
2+
DEFAULT = 'DEFAULT',
3+
}

‎src/designSystem/kubit/components/slider/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './styles';
2+
export * from './variants';

0 commit comments

Comments
 (0)