@epignosis_llc/gnosis 6.7.3 → 6.7.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,222 +0,0 @@
1
-
2
- /**
3
- * @license
4
- * author: epignosis front-end team
5
- * @epignosis_llc/gnosis.js v6.6.16
6
- * Released under the MIT license.
7
- */
8
-
9
- /**
10
- * Gnosis Design Tokens
11
- *
12
- * This file is a single source of truth for all design tokens in the Gnosis design system.
13
- * Tokens are aligned with Figma design tokens.
14
- */
15
-
16
- // ---------------------------------------------------------------------------
17
- // COLORS
18
- // ---------------------------------------------------------------------------
19
- // Base hex values
20
- var colorBase = {
21
- primary: "#0046AB",
22
- secondary: "#9EA5A9",
23
- green: "#1B7855",
24
- orange: "#FF9C28",
25
- red: "#D12525",
26
- black: "#000000",
27
- white: "#FFFFFF",
28
- blue: "#0046AB"
29
- };
30
-
31
- // Full palette — each color generated with palletGenerator (color lib lighten/darken)
32
- var colors = {
33
- primary: {
34
- lightest25: "rgba(36, 125, 255, 0.25)",
35
- lightest50: "rgba(36, 125, 255, 0.5)",
36
- lightest: "#247DFF",
37
- lighter: "#0169FF",
38
- light: "#0054CD",
39
- base: "#0046AB",
40
- dark: "#003889",
41
- darker50: "rgba(0, 42, 103, 0.5)",
42
- darker: "#002A67",
43
- darkest: "#001C44"
44
- },
45
- secondary: {
46
- lightest: "#FFFFFF",
47
- lighter: "#F5F5F6",
48
- light: "#C1C5C8",
49
- base: "#9EA5A9",
50
- dark: "#7B858A",
51
- darker: "#5C6468",
52
- darkest: "#3D4245"
53
- },
54
- green: {
55
- lightest: "#2ECC90",
56
- lighter: "#29B47F",
57
- light50: "rgba(32, 144, 102, 0.5)",
58
- light: "#209066",
59
- base: "#1B7855",
60
- dark: "#166044",
61
- darker: "#104833",
62
- darkest: "#0B3022"
63
- },
64
- orange: {
65
- lightest: "#FFFBF6",
66
- lighter: "#FFE0BB",
67
- light: "#FFB763",
68
- base50: "rgba(255, 156, 40, 0.5)",
69
- base: "#FF9C28",
70
- dark: "#EC7F00",
71
- darker: "#B15F00",
72
- darkest: "#764000"
73
- },
74
- red: {
75
- lightest: "#F1B1B1",
76
- lighter: "#EA8787",
77
- light50: "rgba(223, 73, 73, 0.5)",
78
- light: "#DF4949",
79
- base: "#D12525",
80
- dark: "#A71E1E",
81
- darker: "#7D1616",
82
- darkest: "#540F0F"
83
- },
84
- black: "#000000",
85
- white: "#FFFFFF",
86
- blue: "#0046AB"
87
- };
88
-
89
- // ---------------------------------------------------------------------------
90
- // TYPOGRAPHY
91
- // ---------------------------------------------------------------------------
92
- var typography = {
93
- // Font families
94
- fontFamily: {
95
- body: '"Mulish", Arial, sans-serif'
96
- },
97
- // Type scale (aligned with Figma design tokens)
98
- fontSize: {
99
- xxs: "0.5rem",
100
- // 8px
101
- xs: "0.75rem",
102
- // 12px
103
- sm: "0.875rem",
104
- // 14px
105
- md: "1rem",
106
- // 16px ← base
107
- lg: "1.125rem",
108
- // 18px
109
- xl: "1.375rem",
110
- // 22px
111
- "2xl": "1.75rem",
112
- // 28px
113
- "3xl": "2.125rem" // 34px
114
- },
115
- // Global line height
116
- lineHeight: {
117
- base: 1.5715
118
- },
119
- // Font weights (browser defaults relied upon; explicit values used in components)
120
- fontWeight: {
121
- regular: 400,
122
- semibold: 600,
123
- bold: 700,
124
- extrabold: 800
125
- }
126
- };
127
-
128
- // ---------------------------------------------------------------------------
129
- // SPACING
130
- // ---------------------------------------------------------------------------
131
- // Aligned with Figma design tokens
132
- var spacing = {
133
- none: "0",
134
- // 0px
135
- xxs: "0.25rem",
136
- // 4px
137
- xs: "0.5rem",
138
- // 8px
139
- sm: "0.75rem",
140
- // 12px
141
- md: "1rem",
142
- // 16px
143
- lg: "1.5rem",
144
- // 24px
145
- xl: "2rem" // 32px
146
- };
147
-
148
- // ---------------------------------------------------------------------------
149
- // BORDER RADIUS
150
- // ---------------------------------------------------------------------------
151
- // Aligned with Figma design tokens
152
- var borderRadius = {
153
- none: "0",
154
- // 0px
155
- sm: "5px",
156
- // 5px - buttons, cards, alerts, chips, dropdowns, tooltips, pagination
157
- xl: "30px",
158
- // 30px - rounded elements
159
- full: "50%" // circular elements
160
- };
161
-
162
- // ---------------------------------------------------------------------------
163
- // SHADOWS
164
- // ---------------------------------------------------------------------------
165
- // Shadow color = colors.secondary.light (#C1C5C8)
166
- var shadows = {
167
- sm: "0 3px 6px #C1C5C8",
168
- // dropdown, pagination, result card
169
- checkbox: "0px 0px 0px 9px rgba(36, 125, 255, 0.25)" // focus ring on checkboxes
170
- };
171
-
172
- // ---------------------------------------------------------------------------
173
- // BREAKPOINTS
174
- // ---------------------------------------------------------------------------
175
- // From src/theme/utils/breakpoints.ts
176
- var breakpoints = {
177
- xs: 320,
178
- sm: 576,
179
- md: 768,
180
- lg: 992,
181
- xl: 1200,
182
- xxl: 1600,
183
- "3xl": 1920
184
- };
185
-
186
- // Corresponding media queries (min-width)
187
- var mediaQueries = {
188
- xs: "@media screen and (min-width: 320px)",
189
- sm: "@media screen and (min-width: 576px)",
190
- md: "@media screen and (min-width: 768px)",
191
- lg: "@media screen and (min-width: 992px)",
192
- xl: "@media screen and (min-width: 1200px)",
193
- xxl: "@media screen and (min-width: 1600px)",
194
- "3xl": "@media screen and (min-width: 1920px)"
195
- };
196
-
197
- // ---------------------------------------------------------------------------
198
- // Z-INDEX
199
- // ---------------------------------------------------------------------------
200
- var zIndex = {
201
- base: 0,
202
- raised: 1,
203
- overlay: 2,
204
- drawer: 3,
205
- dropdown: 100,
206
- sidebar: 1001,
207
- modal: 1001
208
- };
209
-
210
- // ---------------------------------------------------------------------------
211
- // TRANSITIONS
212
- // ---------------------------------------------------------------------------
213
- var transitions = {
214
- fast: "0.2s",
215
- base: "0.3s",
216
- easeIn: "0.2s ease-in",
217
- easeInOut: "0.3s ease-in-out",
218
- easeOut: "0.2s ease"
219
- };
220
-
221
- export { borderRadius, breakpoints, colorBase, colors, mediaQueries, shadows, spacing, transitions, typography, zIndex };
222
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sources":["../../src/theme/tokens.ts"],"sourcesContent":["/**\n * Gnosis Design Tokens\n *\n * This file is a single source of truth for all design tokens in the Gnosis design system.\n * Tokens are aligned with Figma design tokens.\n */\n\n// ---------------------------------------------------------------------------\n// COLORS\n// ---------------------------------------------------------------------------\n// Base hex values\nexport const colorBase = {\n primary: \"#0046AB\",\n secondary: \"#9EA5A9\",\n green: \"#1B7855\",\n orange: \"#FF9C28\",\n red: \"#D12525\",\n black: \"#000000\",\n white: \"#FFFFFF\",\n blue: \"#0046AB\",\n} as const;\n\n// Full palette — each color generated with palletGenerator (color lib lighten/darken)\nexport const colors = {\n primary: {\n lightest25: \"rgba(36, 125, 255, 0.25)\",\n lightest50: \"rgba(36, 125, 255, 0.5)\",\n lightest: \"#247DFF\",\n lighter: \"#0169FF\",\n light: \"#0054CD\",\n base: \"#0046AB\",\n dark: \"#003889\",\n darker50: \"rgba(0, 42, 103, 0.5)\",\n darker: \"#002A67\",\n darkest: \"#001C44\",\n },\n secondary: {\n lightest: \"#FFFFFF\",\n lighter: \"#F5F5F6\",\n light: \"#C1C5C8\",\n base: \"#9EA5A9\",\n dark: \"#7B858A\",\n darker: \"#5C6468\",\n darkest: \"#3D4245\",\n },\n green: {\n lightest: \"#2ECC90\",\n lighter: \"#29B47F\",\n light50: \"rgba(32, 144, 102, 0.5)\",\n light: \"#209066\",\n base: \"#1B7855\",\n dark: \"#166044\",\n darker: \"#104833\",\n darkest: \"#0B3022\",\n },\n orange: {\n lightest: \"#FFFBF6\",\n lighter: \"#FFE0BB\",\n light: \"#FFB763\",\n base50: \"rgba(255, 156, 40, 0.5)\",\n base: \"#FF9C28\",\n dark: \"#EC7F00\",\n darker: \"#B15F00\",\n darkest: \"#764000\",\n },\n red: {\n lightest: \"#F1B1B1\",\n lighter: \"#EA8787\",\n light50: \"rgba(223, 73, 73, 0.5)\",\n light: \"#DF4949\",\n base: \"#D12525\",\n dark: \"#A71E1E\",\n darker: \"#7D1616\",\n darkest: \"#540F0F\",\n },\n black: \"#000000\",\n white: \"#FFFFFF\",\n blue: \"#0046AB\",\n} as const;\n\n// ---------------------------------------------------------------------------\n// TYPOGRAPHY\n// ---------------------------------------------------------------------------\nexport const typography = {\n // Font families\n fontFamily: {\n body: '\"Mulish\", Arial, sans-serif',\n },\n\n // Type scale (aligned with Figma design tokens)\n fontSize: {\n xxs: \"0.5rem\", // 8px\n xs: \"0.75rem\", // 12px\n sm: \"0.875rem\", // 14px\n md: \"1rem\", // 16px ← base\n lg: \"1.125rem\", // 18px\n xl: \"1.375rem\", // 22px\n \"2xl\": \"1.75rem\", // 28px\n \"3xl\": \"2.125rem\", // 34px\n },\n\n // Global line height\n lineHeight: {\n base: 1.5715,\n },\n\n // Font weights (browser defaults relied upon; explicit values used in components)\n fontWeight: {\n regular: 400,\n semibold: 600,\n bold: 700,\n extrabold: 800,\n },\n} as const;\n\n// ---------------------------------------------------------------------------\n// SPACING\n// ---------------------------------------------------------------------------\n// Aligned with Figma design tokens\nexport const spacing = {\n none: \"0\", // 0px\n xxs: \"0.25rem\", // 4px\n xs: \"0.5rem\", // 8px\n sm: \"0.75rem\", // 12px\n md: \"1rem\", // 16px\n lg: \"1.5rem\", // 24px\n xl: \"2rem\", // 32px\n} as const;\n\n// ---------------------------------------------------------------------------\n// BORDER RADIUS\n// ---------------------------------------------------------------------------\n// Aligned with Figma design tokens\nexport const borderRadius = {\n none: \"0\", // 0px\n sm: \"5px\", // 5px - buttons, cards, alerts, chips, dropdowns, tooltips, pagination\n xl: \"30px\", // 30px - rounded elements\n full: \"50%\", // circular elements\n} as const;\n\n// ---------------------------------------------------------------------------\n// SHADOWS\n// ---------------------------------------------------------------------------\n// Shadow color = colors.secondary.light (#C1C5C8)\nexport const shadows = {\n sm: \"0 3px 6px #C1C5C8\", // dropdown, pagination, result card\n checkbox: \"0px 0px 0px 9px rgba(36, 125, 255, 0.25)\", // focus ring on checkboxes\n} as const;\n\n// ---------------------------------------------------------------------------\n// BREAKPOINTS\n// ---------------------------------------------------------------------------\n// From src/theme/utils/breakpoints.ts\nexport const breakpoints = {\n xs: 320,\n sm: 576,\n md: 768,\n lg: 992,\n xl: 1200,\n xxl: 1600,\n \"3xl\": 1920,\n} as const;\n\n// Corresponding media queries (min-width)\nexport const mediaQueries = {\n xs: \"@media screen and (min-width: 320px)\",\n sm: \"@media screen and (min-width: 576px)\",\n md: \"@media screen and (min-width: 768px)\",\n lg: \"@media screen and (min-width: 992px)\",\n xl: \"@media screen and (min-width: 1200px)\",\n xxl: \"@media screen and (min-width: 1600px)\",\n \"3xl\": \"@media screen and (min-width: 1920px)\",\n} as const;\n\n// ---------------------------------------------------------------------------\n// Z-INDEX\n// ---------------------------------------------------------------------------\nexport const zIndex = {\n base: 0,\n raised: 1,\n overlay: 2,\n drawer: 3,\n dropdown: 100,\n sidebar: 1001,\n modal: 1001,\n} as const;\n\n// ---------------------------------------------------------------------------\n// TRANSITIONS\n// ---------------------------------------------------------------------------\nexport const transitions = {\n fast: \"0.2s\",\n base: \"0.3s\",\n easeIn: \"0.2s ease-in\",\n easeInOut: \"0.3s ease-in-out\",\n easeOut: \"0.2s ease\",\n} as const;\n"],"names":["colorBase","primary","secondary","green","orange","red","black","white","blue","colors","lightest25","lightest50","lightest","lighter","light","base","dark","darker50","darker","darkest","light50","base50","typography","fontFamily","body","fontSize","xxs","xs","sm","md","lg","xl","lineHeight","fontWeight","regular","semibold","bold","extrabold","spacing","none","borderRadius","full","shadows","checkbox","breakpoints","xxl","mediaQueries","zIndex","raised","overlay","drawer","dropdown","sidebar","modal","transitions","fast","easeIn","easeInOut","easeOut"],"mappings":"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"}
@@ -1,174 +0,0 @@
1
- /**
2
- * Gnosis Design Tokens — CSS Custom Properties
3
- *
4
- * All design tokens exported as CSS variables for use in CSS/SCSS.
5
- * These mirror the tokens defined in src/theme/tokens.ts
6
- */
7
-
8
- :root {
9
- /* ---------------------------------------------------------------------------
10
- * COLORS - Base
11
- * ---------------------------------------------------------------------------*/
12
- --color-base-primary: #0046ab;
13
- --color-base-secondary: #9ea5a9;
14
- --color-base-green: #1b7855;
15
- --color-base-orange: #ff9c28;
16
- --color-base-red: #d12525;
17
- --color-base-black: #000000;
18
- --color-base-white: #ffffff;
19
- --color-base-blue: #0046ab;
20
-
21
- /* ---------------------------------------------------------------------------
22
- * COLORS - Primary Palette
23
- * ---------------------------------------------------------------------------*/
24
- --color-primary-lightest25: rgba(36, 125, 255, 0.25);
25
- --color-primary-lightest50: rgba(36, 125, 255, 0.5);
26
- --color-primary-lightest: #247dff;
27
- --color-primary-lighter: #0169ff;
28
- --color-primary-light: #0054cd;
29
- --color-primary-base: #0046ab;
30
- --color-primary-dark: #003889;
31
- --color-primary-darker50: rgba(0, 42, 103, 0.5);
32
- --color-primary-darker: #002a67;
33
- --color-primary-darkest: #001c44;
34
-
35
- /* ---------------------------------------------------------------------------
36
- * COLORS - Secondary Palette
37
- * ---------------------------------------------------------------------------*/
38
- --color-secondary-lightest: #ffffff;
39
- --color-secondary-lighter: #f5f5f6;
40
- --color-secondary-light: #c1c5c8;
41
- --color-secondary-base: #9ea5a9;
42
- --color-secondary-dark: #7b858a;
43
- --color-secondary-darker: #5c6468;
44
- --color-secondary-darkest: #3d4245;
45
-
46
- /* ---------------------------------------------------------------------------
47
- * COLORS - Green Palette
48
- * ---------------------------------------------------------------------------*/
49
- --color-green-lightest: #2ecc90;
50
- --color-green-lighter: #29b47f;
51
- --color-green-light50: rgba(32, 144, 102, 0.5);
52
- --color-green-light: #209066;
53
- --color-green-base: #1b7855;
54
- --color-green-dark: #166044;
55
- --color-green-darker: #104833;
56
- --color-green-darkest: #0b3022;
57
-
58
- /* ---------------------------------------------------------------------------
59
- * COLORS - Orange Palette
60
- * ---------------------------------------------------------------------------*/
61
- --color-orange-lightest: #fffbf6;
62
- --color-orange-lighter: #ffe0bb;
63
- --color-orange-light: #ffb763;
64
- --color-orange-base50: rgba(255, 156, 40, 0.5);
65
- --color-orange-base: #ff9c28;
66
- --color-orange-dark: #ec7f00;
67
- --color-orange-darker: #b15f00;
68
- --color-orange-darkest: #764000;
69
-
70
- /* ---------------------------------------------------------------------------
71
- * COLORS - Red Palette
72
- * ---------------------------------------------------------------------------*/
73
- --color-red-lightest: #f1b1b1;
74
- --color-red-lighter: #ea8787;
75
- --color-red-light50: rgba(223, 73, 73, 0.5);
76
- --color-red-light: #df4949;
77
- --color-red-base: #d12525;
78
- --color-red-dark: #a71e1e;
79
- --color-red-darker: #7d1616;
80
- --color-red-darkest: #540f0f;
81
-
82
- /* ---------------------------------------------------------------------------
83
- * COLORS - Named
84
- * ---------------------------------------------------------------------------*/
85
- --color-black: #000000;
86
- --color-white: #ffffff;
87
- --color-blue: #0046ab;
88
-
89
- /* ---------------------------------------------------------------------------
90
- * TYPOGRAPHY - Font Family
91
- * ---------------------------------------------------------------------------*/
92
- --font-family-body: "Mulish", Arial, sans-serif;
93
-
94
- /* ---------------------------------------------------------------------------
95
- * TYPOGRAPHY - Font Size (aligned with Figma)
96
- * ---------------------------------------------------------------------------*/
97
- --font-size-xxs: 0.5rem; /* 8px */
98
- --font-size-xs: 0.75rem; /* 12px */
99
- --font-size-sm: 0.875rem; /* 14px */
100
- --font-size-md: 1rem; /* 16px - base */
101
- --font-size-lg: 1.125rem; /* 18px */
102
- --font-size-xl: 1.375rem; /* 22px */
103
- --font-size-2xl: 1.75rem; /* 28px */
104
- --font-size-3xl: 2.125rem; /* 34px */
105
-
106
- /* ---------------------------------------------------------------------------
107
- * TYPOGRAPHY - Line Height
108
- * ---------------------------------------------------------------------------*/
109
- --line-height-base: 1.5715;
110
-
111
- /* ---------------------------------------------------------------------------
112
- * TYPOGRAPHY - Font Weight
113
- * ---------------------------------------------------------------------------*/
114
- --font-weight-regular: 400;
115
- --font-weight-semibold: 600;
116
- --font-weight-bold: 700;
117
- --font-weight-extrabold: 800;
118
-
119
- /* ---------------------------------------------------------------------------
120
- * SPACING (aligned with Figma)
121
- * ---------------------------------------------------------------------------*/
122
- --spacing-none: 0; /* 0px */
123
- --spacing-xxs: 0.25rem; /* 4px */
124
- --spacing-xs: 0.5rem; /* 8px */
125
- --spacing-sm: 0.75rem; /* 12px */
126
- --spacing-md: 1rem; /* 16px */
127
- --spacing-lg: 1.5rem; /* 24px */
128
- --spacing-xl: 2rem; /* 32px */
129
-
130
- /* ---------------------------------------------------------------------------
131
- * BORDER RADIUS (aligned with Figma)
132
- * ---------------------------------------------------------------------------*/
133
- --border-radius-none: 0;
134
- --border-radius-sm: 5px;
135
- --border-radius-xl: 30px;
136
- --border-radius-full: 50%;
137
-
138
- /* ---------------------------------------------------------------------------
139
- * SHADOWS
140
- * ---------------------------------------------------------------------------*/
141
- --shadow-sm: 0 3px 6px #c1c5c8;
142
- --shadow-checkbox: 0px 0px 0px 9px rgba(36, 125, 255, 0.25);
143
-
144
- /* ---------------------------------------------------------------------------
145
- * BREAKPOINTS (px values)
146
- * ---------------------------------------------------------------------------*/
147
- --breakpoint-xs: 320px;
148
- --breakpoint-sm: 576px;
149
- --breakpoint-md: 768px;
150
- --breakpoint-lg: 992px;
151
- --breakpoint-xl: 1200px;
152
- --breakpoint-xxl: 1600px;
153
- --breakpoint-3xl: 1920px;
154
-
155
- /* ---------------------------------------------------------------------------
156
- * Z-INDEX
157
- * ---------------------------------------------------------------------------*/
158
- --z-index-base: 0;
159
- --z-index-raised: 1;
160
- --z-index-overlay: 2;
161
- --z-index-drawer: 3;
162
- --z-index-dropdown: 100;
163
- --z-index-sidebar: 1001;
164
- --z-index-modal: 1001;
165
-
166
- /* ---------------------------------------------------------------------------
167
- * TRANSITIONS
168
- * ---------------------------------------------------------------------------*/
169
- --transition-fast: 0.2s;
170
- --transition-base: 0.3s;
171
- --transition-ease-in: 0.2s ease-in;
172
- --transition-ease-in-out: 0.3s ease-in-out;
173
- --transition-ease-out: 0.2s ease;
174
- }
@@ -1,143 +0,0 @@
1
- export declare const colorBase: {
2
- readonly primary: "#0046AB";
3
- readonly secondary: "#9EA5A9";
4
- readonly green: "#1B7855";
5
- readonly orange: "#FF9C28";
6
- readonly red: "#D12525";
7
- readonly black: "#000000";
8
- readonly white: "#FFFFFF";
9
- readonly blue: "#0046AB";
10
- };
11
- export declare const colors: {
12
- readonly primary: {
13
- readonly lightest25: "rgba(36, 125, 255, 0.25)";
14
- readonly lightest50: "rgba(36, 125, 255, 0.5)";
15
- readonly lightest: "#247DFF";
16
- readonly lighter: "#0169FF";
17
- readonly light: "#0054CD";
18
- readonly base: "#0046AB";
19
- readonly dark: "#003889";
20
- readonly darker50: "rgba(0, 42, 103, 0.5)";
21
- readonly darker: "#002A67";
22
- readonly darkest: "#001C44";
23
- };
24
- readonly secondary: {
25
- readonly lightest: "#FFFFFF";
26
- readonly lighter: "#F5F5F6";
27
- readonly light: "#C1C5C8";
28
- readonly base: "#9EA5A9";
29
- readonly dark: "#7B858A";
30
- readonly darker: "#5C6468";
31
- readonly darkest: "#3D4245";
32
- };
33
- readonly green: {
34
- readonly lightest: "#2ECC90";
35
- readonly lighter: "#29B47F";
36
- readonly light50: "rgba(32, 144, 102, 0.5)";
37
- readonly light: "#209066";
38
- readonly base: "#1B7855";
39
- readonly dark: "#166044";
40
- readonly darker: "#104833";
41
- readonly darkest: "#0B3022";
42
- };
43
- readonly orange: {
44
- readonly lightest: "#FFFBF6";
45
- readonly lighter: "#FFE0BB";
46
- readonly light: "#FFB763";
47
- readonly base50: "rgba(255, 156, 40, 0.5)";
48
- readonly base: "#FF9C28";
49
- readonly dark: "#EC7F00";
50
- readonly darker: "#B15F00";
51
- readonly darkest: "#764000";
52
- };
53
- readonly red: {
54
- readonly lightest: "#F1B1B1";
55
- readonly lighter: "#EA8787";
56
- readonly light50: "rgba(223, 73, 73, 0.5)";
57
- readonly light: "#DF4949";
58
- readonly base: "#D12525";
59
- readonly dark: "#A71E1E";
60
- readonly darker: "#7D1616";
61
- readonly darkest: "#540F0F";
62
- };
63
- readonly black: "#000000";
64
- readonly white: "#FFFFFF";
65
- readonly blue: "#0046AB";
66
- };
67
- export declare const typography: {
68
- readonly fontFamily: {
69
- readonly body: "\"Mulish\", Arial, sans-serif";
70
- };
71
- readonly fontSize: {
72
- readonly xxs: "0.5rem";
73
- readonly xs: "0.75rem";
74
- readonly sm: "0.875rem";
75
- readonly md: "1rem";
76
- readonly lg: "1.125rem";
77
- readonly xl: "1.375rem";
78
- readonly "2xl": "1.75rem";
79
- readonly "3xl": "2.125rem";
80
- };
81
- readonly lineHeight: {
82
- readonly base: 1.5715;
83
- };
84
- readonly fontWeight: {
85
- readonly regular: 400;
86
- readonly semibold: 600;
87
- readonly bold: 700;
88
- readonly extrabold: 800;
89
- };
90
- };
91
- export declare const spacing: {
92
- readonly none: "0";
93
- readonly xxs: "0.25rem";
94
- readonly xs: "0.5rem";
95
- readonly sm: "0.75rem";
96
- readonly md: "1rem";
97
- readonly lg: "1.5rem";
98
- readonly xl: "2rem";
99
- };
100
- export declare const borderRadius: {
101
- readonly none: "0";
102
- readonly sm: "5px";
103
- readonly xl: "30px";
104
- readonly full: "50%";
105
- };
106
- export declare const shadows: {
107
- readonly sm: "0 3px 6px #C1C5C8";
108
- readonly checkbox: "0px 0px 0px 9px rgba(36, 125, 255, 0.25)";
109
- };
110
- export declare const breakpoints: {
111
- readonly xs: 320;
112
- readonly sm: 576;
113
- readonly md: 768;
114
- readonly lg: 992;
115
- readonly xl: 1200;
116
- readonly xxl: 1600;
117
- readonly "3xl": 1920;
118
- };
119
- export declare const mediaQueries: {
120
- readonly xs: "@media screen and (min-width: 320px)";
121
- readonly sm: "@media screen and (min-width: 576px)";
122
- readonly md: "@media screen and (min-width: 768px)";
123
- readonly lg: "@media screen and (min-width: 992px)";
124
- readonly xl: "@media screen and (min-width: 1200px)";
125
- readonly xxl: "@media screen and (min-width: 1600px)";
126
- readonly "3xl": "@media screen and (min-width: 1920px)";
127
- };
128
- export declare const zIndex: {
129
- readonly base: 0;
130
- readonly raised: 1;
131
- readonly overlay: 2;
132
- readonly drawer: 3;
133
- readonly dropdown: 100;
134
- readonly sidebar: 1001;
135
- readonly modal: 1001;
136
- };
137
- export declare const transitions: {
138
- readonly fast: "0.2s";
139
- readonly base: "0.3s";
140
- readonly easeIn: "0.2s ease-in";
141
- readonly easeInOut: "0.3s ease-in-out";
142
- readonly easeOut: "0.2s ease";
143
- };