Skip to content

Commit bf1a0c9

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1600 from dxc-technology/gomezivann/core-tokens
Core tokens review
2 parents 99f7576 + 430caea commit bf1a0c9

File tree

11 files changed

+1418
-1341
lines changed

11 files changed

+1418
-1341
lines changed

‎lib/src/button/Button.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ export const Chromatic = () => (
133133
<Title title="Only icon (image)" theme="light" level={4} />
134134
<DxcButton
135135
mode="secondary"
136-
icon="https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png"
136+
icon="https://www.freepnglogos.com/uploads/facebook-logo-design-1.png"
137137
/>
138138
</ExampleContainer>
139139
<Title title="Text" theme="light" level={2} />

‎lib/src/common/OpenSans.css‎

Lines changed: 68 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,69 @@
1+
@font-face {
2+
font-family: "Open Sans";
3+
src: url("./fonts/OpenSans-Light.ttf") format("truetype");
4+
font-style: normal;
5+
font-weight: 200;
6+
}
17

2-
@font-face {
3-
font-family: 'Open Sans';
4-
src: url('./fonts/OpenSans-Light.ttf')
5-
format('truetype');
6-
font-style: normal;
7-
font-weight: 200;
8-
}
9-
10-
@font-face {
11-
font-family: 'Open Sans';
12-
src: url('./fonts/OpenSans-Regular.ttf')
13-
format('truetype');
14-
font-style: normal;
15-
font-weight: 400;
16-
}
17-
18-
@font-face {
19-
font-family: 'Open Sans';
20-
src: url('./fonts/OpenSans-SemiBold.ttf')
21-
format('truetype');
22-
font-style: normal;
23-
font-weight: 600;
24-
}
25-
26-
@font-face {
27-
font-family: 'Open Sans';
28-
src: url('./fonts/OpenSans-Bold.ttf')
29-
format('truetype');
30-
font-style: normal;
31-
font-weight: 700;
32-
}
33-
34-
@font-face {
35-
font-family: 'Open Sans';
36-
src: url('./fonts/OpenSans-ExtraBold.ttf')
37-
format('truetype');
38-
font-style: normal;
39-
font-weight: 800;
40-
}
41-
42-
@font-face {
43-
font-family: 'Open Sans';
44-
src: url('./fonts/OpenSans-LightItalic.ttf')
45-
format('truetype');
46-
font-style: italic;
47-
font-weight: 200;
48-
}
49-
50-
@font-face {
51-
font-family: 'Open Sans';
52-
src: url('./fonts/OpenSans-Italic.ttf')
53-
format('truetype');
54-
font-style: italic;
55-
font-weight: 400;
56-
}
57-
58-
@font-face {
59-
font-family: 'Open Sans';
60-
src: url('./fonts/OpenSans-SemiBoldItalic.ttf')
61-
format('truetype');
62-
font-style: italic;
63-
font-weight: 600;
64-
}
65-
66-
@font-face {
67-
font-family: 'Open Sans';
68-
src: url('./fonts/OpenSans-BoldItalic.ttf')
69-
format('truetype');
70-
font-style: italic;
71-
font-weight: 700;
72-
}
73-
74-
@font-face {
75-
font-family: 'Open Sans';
76-
src: url('./fonts/OpenSans-ExtraBoldItalic.ttf')
77-
format('truetype');
78-
font-style: italic;
79-
font-weight: 800;
80-
}
81-
8+
@font-face {
9+
font-family: "Open Sans";
10+
src: url("./fonts/OpenSans-Regular.ttf") format("truetype");
11+
font-style: normal;
12+
font-weight: 400;
13+
}
14+
15+
@font-face {
16+
font-family: "Open Sans";
17+
src: url("./fonts/OpenSans-SemiBold.ttf") format("truetype");
18+
font-style: normal;
19+
font-weight: 600;
20+
}
21+
22+
@font-face {
23+
font-family: "Open Sans";
24+
src: url("./fonts/OpenSans-Bold.ttf") format("truetype");
25+
font-style: normal;
26+
font-weight: 700;
27+
}
28+
29+
@font-face {
30+
font-family: "Open Sans";
31+
src: url("./fonts/OpenSans-ExtraBold.ttf") format("truetype");
32+
font-style: normal;
33+
font-weight: 800;
34+
}
35+
36+
@font-face {
37+
font-family: "Open Sans";
38+
src: url("./fonts/OpenSans-LightItalic.ttf") format("truetype");
39+
font-style: italic;
40+
font-weight: 200;
41+
}
42+
43+
@font-face {
44+
font-family: "Open Sans";
45+
src: url("./fonts/OpenSans-Italic.ttf") format("truetype");
46+
font-style: italic;
47+
font-weight: 400;
48+
}
49+
50+
@font-face {
51+
font-family: "Open Sans";
52+
src: url("./fonts/OpenSans-SemiBoldItalic.ttf") format("truetype");
53+
font-style: italic;
54+
font-weight: 600;
55+
}
56+
57+
@font-face {
58+
font-family: "Open Sans";
59+
src: url("./fonts/OpenSans-BoldItalic.ttf") format("truetype");
60+
font-style: italic;
61+
font-weight: 700;
62+
}
63+
64+
@font-face {
65+
font-family: "Open Sans";
66+
src: url("./fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype");
67+
font-style: italic;
68+
font-weight: 800;
69+
}

‎lib/src/common/coreTokens.ts‎

Lines changed: 177 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,177 @@
1+
const CORE_TOKENS = {
2+
inherit: "inherit",
3+
4+
// Color
5+
// Absolutes
6+
color_black: "#000000",
7+
color_white: "#ffffff",
8+
color_transparent: "transparent",
9+
10+
// Greyscale
11+
// Solid variants
12+
color_grey_50: "#fafafa",
13+
color_grey_100: "#f2f2f2",
14+
color_grey_200: "#e6e6e6",
15+
color_grey_300: "#cccccc",
16+
color_grey_400: "#bfbfbf",
17+
color_grey_500: "#999999",
18+
color_grey_600: "#808080",
19+
color_grey_700: "#666666",
20+
color_grey_800: "#4d4d4d",
21+
color_grey_900: "#333333",
22+
// Trasparent variants
23+
color_grey_50_a: "#00000005",
24+
color_grey_100_a: "#0000000d",
25+
color_grey_200_a: "#0000001a",
26+
color_grey_300_a: "#00000033",
27+
color_grey_400_a: "#0000004d",
28+
color_grey_500_a: "#00000066",
29+
color_grey_600_a: "#00000080",
30+
color_grey_700_a: "#00000099",
31+
color_grey_800_a: "#000000b3",
32+
color_grey_900_a: "#000000cc",
33+
34+
// Purple
35+
color_purple_50: "#faf7fd",
36+
color_purple_100: "#f2eafa",
37+
color_purple_200: "#e5d5f6",
38+
color_purple_300: "#cbacec",
39+
color_purple_400: "#b182e3",
40+
color_purple_500: "#a46ede",
41+
color_purple_600: "#7d2fd0",
42+
color_purple_700: "#5f249f",
43+
color_purple_800: "#4b1c7d",
44+
color_purple_900: "#321353",
45+
46+
// Blue
47+
color_blue_50: "#f5fbff",
48+
color_blue_100: "#e6f4ff",
49+
color_blue_200: "#cceaff",
50+
color_blue_300: "#99d5ff",
51+
color_blue_400: "#66bfff",
52+
color_blue_500: "#33aaff",
53+
color_blue_600: "#0095ff",
54+
color_blue_700: "#0086e6",
55+
color_blue_800: "#0067b3",
56+
color_blue_900: "#003c66",
57+
58+
// Red
59+
color_red_50: "#fff5f6",
60+
color_red_100: "#ffe6e9",
61+
color_red_200: "#ffccd3",
62+
color_red_300: "#fe9aa7",
63+
color_red_400: "#fe677b",
64+
color_red_500: "#fe344f",
65+
color_red_600: "#fe0123",
66+
color_red_700: "#d0011b",
67+
color_red_800: "#980115",
68+
color_red_900: "#65010e",
69+
70+
// Green
71+
color_green_50: "#f7fdf9",
72+
color_green_100: "#eafaef",
73+
color_green_200: "#d5f6df",
74+
color_green_300: "#acecbe",
75+
color_green_400: "#82e39e",
76+
color_green_500: "#59d97d",
77+
color_green_600: "#2fd05d",
78+
color_green_700: "#24a148",
79+
color_green_800: "#1c7d38",
80+
color_green_900: "#135325",
81+
82+
// Yellow
83+
color_yellow_50: "#fffdf5",
84+
color_yellow_100: "#fef9e6",
85+
color_yellow_200: "#fdf4ce",
86+
color_yellow_300: "#fbe89d",
87+
color_yellow_400: "#fadd6b",
88+
color_yellow_500: "#f7cf2b",
89+
color_yellow_600: "#f6c709",
90+
color_yellow_700: "#c59f07",
91+
color_yellow_800: "#947705",
92+
color_yellow_900: "#624f04",
93+
94+
// Orange
95+
color_orange_50: "#fefaf5",
96+
color_orange_100: "#fef3e7",
97+
color_orange_200: "#fce7cf",
98+
color_orange_300: "#facf9e",
99+
color_orange_400: "#f7b76e",
100+
color_orange_500: "#f59f3d",
101+
color_orange_600: "#f38f20",
102+
color_orange_700: "#c26c0a",
103+
color_orange_800: "#915108",
104+
color_orange_900: "#613605",
105+
106+
// Typography
107+
type_sans: "Open Sans, sans-serif",
108+
109+
type_scale_root: "16px",
110+
type_scale_08: "3.75rem",
111+
type_scale_07: "2.5rem",
112+
type_scale_06: "2rem",
113+
type_scale_05: "1.5rem",
114+
type_scale_04: "1.25rem",
115+
type_scale_03: "1rem",
116+
type_scale_02: "0.875rem",
117+
type_scale_01: "0.75rem",
118+
119+
type_light: "300",
120+
type_regular: "400",
121+
type_semibold: "600",
122+
type_bold: "bold",
123+
type_italic: "italic",
124+
type_normal: "normal",
125+
126+
type_spacing_tight_02: "-0.05em",
127+
type_spacing_tight_01: "-0.025em",
128+
type_spacing_normal: "0em",
129+
type_spacing_wide_01: "0.025em",
130+
type_spacing_wide_02: "0.05em",
131+
type_spacing_wide_03: "0.1em",
132+
133+
type_initial: "initial",
134+
type_uppercase: "uppercase",
135+
type_no_line: "none",
136+
type_underline: "underline",
137+
type_line_through: "line-through",
138+
139+
type_leading_compact_03: "1em",
140+
type_leading_compact_02: "1.25em",
141+
type_leading_compact_01: "1.365em",
142+
type_leading_normal: "1.5em",
143+
type_leading_loose_01: "1.715em",
144+
type_leading_loose_02: "2em",
145+
146+
// Spacing
147+
spacing_0: "0rem",
148+
spacing_2: "0.125rem",
149+
spacing_4: "0.25rem",
150+
spacing_8: "0.5rem",
151+
spacing_12: "0.75rem",
152+
spacing_16: "1rem",
153+
spacing_24: "1.5rem",
154+
spacing_32: "2rem",
155+
spacing_40: "2.5rem",
156+
spacing_48: "3rem",
157+
spacing_56: "3.5rem",
158+
spacing_64: "4rem",
159+
spacing_80: "5rem",
160+
spacing_96: "6rem",
161+
spacing_112: "7rem",
162+
163+
// Border
164+
border_width_0: "0px",
165+
border_width_1: "1px",
166+
border_width_2: "2px",
167+
border_width_4: "4px",
168+
border_radius_none: "0rem",
169+
border_radius_small: "0.125rem",
170+
border_radius_medium: "0.25rem",
171+
border_radius_large: "0.375rem",
172+
border_solid: "solid",
173+
border_dashed: "dashed",
174+
border_none: "none",
175+
};
176+
177+
export default CORE_TOKENS;

0 commit comments

Comments
 (0)