Skip to content

Commit 7ffcf5c

Browse files
author
Kubit
committed
Add TagV2 wireframe styles
1 parent eee29a3 commit 7ffcf5c

File tree

2 files changed

+162
-2
lines changed

2 files changed

+162
-2
lines changed

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

Lines changed: 156 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,5 +40,160 @@ export const getTagStylesV2 = (COLORS: {
4040
text_overflow: 'ellipsis',
4141
},
4242
},
43+
[TagVariantTypeV2.SUCCESS]: {
44+
container: {
45+
width: 'fit-content',
46+
max_width: '100%',
47+
display: 'flex',
48+
flex_direction: 'row',
49+
align_items: 'center',
50+
border_width: BORDERS.border_50,
51+
border_radius: RADIUS.radius_100,
52+
padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`,
53+
gap: SPACINGS.spacing_150,
54+
...transformShadow(RADIUS.radius_100),
55+
...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'),
56+
background_color: COLORS.FEEDBACK.color_feedback_success_bg_50,
57+
border_color: COLORS.FEEDBACK.color_feedback_success_border_50,
58+
border_style: 'solid',
59+
},
60+
icon: {
61+
color: COLORS.SECONDARY.color_secondary_bg_150,
62+
height: SIZES.size_200,
63+
width: SIZES.size_200,
64+
},
65+
label: {
66+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
67+
font_weight: FONT_WEIGHT.font_weight_600,
68+
color: COLORS.NEUTRAL.color_neutral_font_50,
69+
overflow: 'hidden',
70+
white_space: 'nowrap',
71+
text_overflow: 'ellipsis',
72+
},
73+
},
74+
[TagVariantTypeV2.ISSUE]: {
75+
container: {
76+
width: 'fit-content',
77+
max_width: '100%',
78+
display: 'flex',
79+
flex_direction: 'row',
80+
align_items: 'center',
81+
border_width: BORDERS.border_50,
82+
border_radius: RADIUS.radius_100,
83+
padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`,
84+
gap: SPACINGS.spacing_150,
85+
...transformShadow(RADIUS.radius_100),
86+
...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'),
87+
background_color: COLORS.FEEDBACK.color_feedback_warning_bg_50,
88+
border_color: COLORS.FEEDBACK.color_feedback_warning_border_50,
89+
border_style: 'solid',
90+
},
91+
icon: {
92+
color: COLORS.SECONDARY.color_secondary_bg_150,
93+
height: SIZES.size_200,
94+
width: SIZES.size_200,
95+
},
96+
label: {
97+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
98+
font_weight: FONT_WEIGHT.font_weight_600,
99+
color: COLORS.NEUTRAL.color_neutral_font_50,
100+
overflow: 'hidden',
101+
white_space: 'nowrap',
102+
text_overflow: 'ellipsis',
103+
},
104+
},
105+
[TagVariantTypeV2.DORMANT]: {
106+
container: {
107+
width: 'fit-content',
108+
max_width: '100%',
109+
display: 'flex',
110+
flex_direction: 'row',
111+
align_items: 'center',
112+
border_width: BORDERS.border_50,
113+
border_radius: RADIUS.radius_100,
114+
padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`,
115+
gap: SPACINGS.spacing_150,
116+
...transformShadow(RADIUS.radius_100),
117+
...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'),
118+
background_color: COLORS.FEEDBACK.color_feedback_error_bg_50,
119+
border_color: COLORS.FEEDBACK.color_feedback_error_border_50,
120+
border_style: 'solid',
121+
},
122+
icon: {
123+
color: COLORS.SECONDARY.color_secondary_bg_150,
124+
height: SIZES.size_200,
125+
width: SIZES.size_200,
126+
},
127+
label: {
128+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
129+
font_weight: FONT_WEIGHT.font_weight_600,
130+
color: COLORS.NEUTRAL.color_neutral_font_50,
131+
overflow: 'hidden',
132+
white_space: 'nowrap',
133+
text_overflow: 'ellipsis',
134+
},
135+
},
136+
[TagVariantTypeV2.DEPRECATED]: {
137+
container: {
138+
width: 'fit-content',
139+
max_width: '100%',
140+
display: 'flex',
141+
flex_direction: 'row',
142+
align_items: 'center',
143+
border_width: BORDERS.border_50,
144+
border_radius: RADIUS.radius_100,
145+
padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`,
146+
gap: SPACINGS.spacing_150,
147+
...transformShadow(RADIUS.radius_100),
148+
...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'),
149+
background_color: COLORS.NEUTRAL.color_neutral_bg_200,
150+
border_color: COLORS.NEUTRAL.color_neutral_border_50,
151+
border_style: 'solid',
152+
},
153+
icon: {
154+
color: COLORS.SECONDARY.color_secondary_bg_150,
155+
height: SIZES.size_200,
156+
width: SIZES.size_200,
157+
},
158+
label: {
159+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
160+
font_weight: FONT_WEIGHT.font_weight_600,
161+
color: COLORS.NEUTRAL.color_neutral_font_50,
162+
overflow: 'hidden',
163+
white_space: 'nowrap',
164+
text_overflow: 'ellipsis',
165+
},
166+
},
167+
[TagVariantTypeV2.INFORMATIVE]: {
168+
container: {
169+
width: 'fit-content',
170+
max_width: '100%',
171+
display: 'flex',
172+
flex_direction: 'row',
173+
align_items: 'center',
174+
border_width: BORDERS.border_50,
175+
border_radius: RADIUS.radius_100,
176+
padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`,
177+
gap: SPACINGS.spacing_150,
178+
...transformShadow(RADIUS.radius_100),
179+
...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'),
180+
background_color: COLORS.FEEDBACK.color_feedback_info_bg_50,
181+
border_color: COLORS.FEEDBACK.color_feedback_info_border_50,
182+
border_style: 'solid',
183+
},
184+
icon: {
185+
color: COLORS.SECONDARY.color_secondary_bg_150,
186+
height: SIZES.size_200,
187+
width: SIZES.size_200,
188+
},
189+
label: {
190+
font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED,
191+
font_weight: FONT_WEIGHT.font_weight_600,
192+
color: COLORS.NEUTRAL.color_neutral_font_50,
193+
overflow: 'hidden',
194+
white_space: 'nowrap',
195+
text_overflow: 'ellipsis',
196+
},
197+
},
43198
};
44-
};
199+
};

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
11
export enum TagVariantTypeV2 {
22
DEFAULT = 'DEFAULT',
3-
}
3+
SUCCESS = 'SUCCESS',
4+
ISSUE = 'ISSUE',
5+
DORMANT = 'DORMANT',
6+
DEPRECATED = 'DEPRECATED',
7+
INFORMATIVE = 'INFORMATIVE',
8+
}

0 commit comments

Comments
 (0)