@autofleet/theme 0.1.1 → 0.1.3-beta-2e1378da.0
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.
- package/colors/atomic-colors.d.ts +132 -0
- package/colors/index.d.ts +12 -0
- package/colors/tokens/color-token-mapping.d.ts +8 -0
- package/colors/tokens/color-tokens.d.ts +17 -0
- package/colors-utils.d.ts +57 -0
- package/const.d.ts +4 -0
- package/fonts/atomic-fonts.d.ts +13 -0
- package/fonts/index.d.ts +20 -0
- package/index.d.ts +77 -0
- package/index.js +1396 -0
- package/index.js.map +1 -0
- package/package.json +9 -3
- package/shadow/index.d.ts +19 -0
- package/spacing/border-radius.d.ts +8 -0
- package/spacing/index.d.ts +25 -0
- package/spacing/spacing.d.ts +15 -0
- package/.nvmrc +0 -1
- package/README.md +0 -9
- package/project.json +0 -40
- package/src/colors/atomic-colors.ts +0 -169
- package/src/colors/index.ts +0 -31
- package/src/colors/tokens/color-token-mapping.ts +0 -909
- package/src/colors/tokens/color-tokens.ts +0 -110
- package/src/colors-utils.ts +0 -196
- package/src/const.ts +0 -4
- package/src/fonts/atomic-fonts.ts +0 -102
- package/src/fonts/index.ts +0 -22
- package/src/index.ts +0 -38
- package/src/shadow/index.ts +0 -54
- package/src/spacing/border-radius.ts +0 -8
- package/src/spacing/index.ts +0 -7
- package/src/spacing/spacing.ts +0 -15
- package/tsconfig.json +0 -22
- package/tsconfig.lib.json +0 -10
- package/tsconfig.spec.json +0 -20
- package/vite.config.ts +0 -15
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
import { RGBColor } from '../colors-utils';
|
|
2
|
+
export declare const ATOMIC_COLORS: {
|
|
3
|
+
'n-00': string;
|
|
4
|
+
'n-01': string;
|
|
5
|
+
'n-02': string;
|
|
6
|
+
'n-03': string;
|
|
7
|
+
'n-04': string;
|
|
8
|
+
'n-05': string;
|
|
9
|
+
'n-opa-10': string;
|
|
10
|
+
'n-opa-16': string;
|
|
11
|
+
'n-opa-24': string;
|
|
12
|
+
'n-opa-32': string;
|
|
13
|
+
'n-00-opa-32': string;
|
|
14
|
+
brand: string;
|
|
15
|
+
'brand-hover': string;
|
|
16
|
+
'brand-opa-10': string;
|
|
17
|
+
'brand-opa-16': string;
|
|
18
|
+
'brand-opa-24': string;
|
|
19
|
+
'brand-opa-32': string;
|
|
20
|
+
'b-01': string;
|
|
21
|
+
'b-02': string;
|
|
22
|
+
'b-03': string;
|
|
23
|
+
'b-04': string;
|
|
24
|
+
'b-05': string;
|
|
25
|
+
'b-06': string;
|
|
26
|
+
'b-07': string;
|
|
27
|
+
'b-opa-10': string;
|
|
28
|
+
'b-opa-16': string;
|
|
29
|
+
'b-opa-24': string;
|
|
30
|
+
'b-opa-32': string;
|
|
31
|
+
'g-01': string;
|
|
32
|
+
'g-02': string;
|
|
33
|
+
'g-03': string;
|
|
34
|
+
'g-04': string;
|
|
35
|
+
'g-05': string;
|
|
36
|
+
'g-06': string;
|
|
37
|
+
'g-07': string;
|
|
38
|
+
'g-opa-10': string;
|
|
39
|
+
'g-opa-16': string;
|
|
40
|
+
'g-opa-24': string;
|
|
41
|
+
'g-opa-32': string;
|
|
42
|
+
'y-01': string;
|
|
43
|
+
'y-02': string;
|
|
44
|
+
'y-03': string;
|
|
45
|
+
'y-04': string;
|
|
46
|
+
'y-05': string;
|
|
47
|
+
'y-06': string;
|
|
48
|
+
'y-07': string;
|
|
49
|
+
'y-opa-10': string;
|
|
50
|
+
'y-opa-16': string;
|
|
51
|
+
'y-opa-24': string;
|
|
52
|
+
'y-opa-32': string;
|
|
53
|
+
'r-01': string;
|
|
54
|
+
'r-02': string;
|
|
55
|
+
'r-03': string;
|
|
56
|
+
'r-04': string;
|
|
57
|
+
'r-05': string;
|
|
58
|
+
'r-06': string;
|
|
59
|
+
'r-07': string;
|
|
60
|
+
'r-opa-10': string;
|
|
61
|
+
'r-opa-16': string;
|
|
62
|
+
'r-opa-24': string;
|
|
63
|
+
'r-opa-32': string;
|
|
64
|
+
'pu-02': string;
|
|
65
|
+
'pu-06': string;
|
|
66
|
+
'pu-07': string;
|
|
67
|
+
'pu-opa-10': string;
|
|
68
|
+
'pu-opa-16': string;
|
|
69
|
+
'pu-opa-24': string;
|
|
70
|
+
'or-02': string;
|
|
71
|
+
'or-06': string;
|
|
72
|
+
'or-07': string;
|
|
73
|
+
'or-opa-10': string;
|
|
74
|
+
'or-opa-16': string;
|
|
75
|
+
'or-opa-24': string;
|
|
76
|
+
'tu-02': string;
|
|
77
|
+
'tu-06': string;
|
|
78
|
+
'tu-07': string;
|
|
79
|
+
'tu-opa-10': string;
|
|
80
|
+
'tu-opa-16': string;
|
|
81
|
+
'tu-opa-24': string;
|
|
82
|
+
'pi-02': string;
|
|
83
|
+
'pi-06': string;
|
|
84
|
+
'pi-07': string;
|
|
85
|
+
'pi-opa-10': string;
|
|
86
|
+
'pi-opa-16': string;
|
|
87
|
+
'pi-opa-24': string;
|
|
88
|
+
'ul-02': string;
|
|
89
|
+
'ul-06': string;
|
|
90
|
+
'ul-07': string;
|
|
91
|
+
'ul-opa-10': string;
|
|
92
|
+
'ul-opa-16': string;
|
|
93
|
+
'ul-opa-24': string;
|
|
94
|
+
'pe-02': string;
|
|
95
|
+
'pe-06': string;
|
|
96
|
+
'pe-07': string;
|
|
97
|
+
'pe-opa-10': string;
|
|
98
|
+
'pe-opa-16': string;
|
|
99
|
+
'pe-opa-24': string;
|
|
100
|
+
'ap-02': string;
|
|
101
|
+
'ap-06': string;
|
|
102
|
+
'ap-07': string;
|
|
103
|
+
'ap-opa-10': string;
|
|
104
|
+
'ap-opa-16': string;
|
|
105
|
+
'ap-opa-24': string;
|
|
106
|
+
'bu-02': string;
|
|
107
|
+
'bu-06': string;
|
|
108
|
+
'bu-07': string;
|
|
109
|
+
'bu-opa-10': string;
|
|
110
|
+
'bu-opa-16': string;
|
|
111
|
+
'bu-opa-24': string;
|
|
112
|
+
'oc-02': string;
|
|
113
|
+
'oc-06': string;
|
|
114
|
+
'oc-07': string;
|
|
115
|
+
'oc-opa-10': string;
|
|
116
|
+
'oc-opa-16': string;
|
|
117
|
+
'oc-opa-24': string;
|
|
118
|
+
'br-02': string;
|
|
119
|
+
'br-06': string;
|
|
120
|
+
'br-07': string;
|
|
121
|
+
'br-opa-10': string;
|
|
122
|
+
'br-opa-16': string;
|
|
123
|
+
'br-opa-24': string;
|
|
124
|
+
};
|
|
125
|
+
export declare const generateBrandColors: (rgb: RGBColor) => {
|
|
126
|
+
brand: string;
|
|
127
|
+
'brand-hover': string;
|
|
128
|
+
'brand-opa-10': string;
|
|
129
|
+
'brand-opa-16': string;
|
|
130
|
+
'brand-opa-24': string;
|
|
131
|
+
'brand-opa-32': string;
|
|
132
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { RGBColor } from '../colors-utils';
|
|
2
|
+
import { LABEL_OPTIONS } from '../const';
|
|
3
|
+
import { COLOR_TOKEN_MAP } from './tokens/color-token-mapping';
|
|
4
|
+
export interface ThemeColorOptions {
|
|
5
|
+
lightMode: 'dark' | 'light';
|
|
6
|
+
label: (typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS];
|
|
7
|
+
primaryColor?: RGBColor;
|
|
8
|
+
}
|
|
9
|
+
export type ColorTokenResponse = {
|
|
10
|
+
[type in keyof typeof COLOR_TOKEN_MAP]: string;
|
|
11
|
+
};
|
|
12
|
+
export declare const generateColorsForTheme: (themeOptions: ThemeColorOptions) => ColorTokenResponse;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { LABEL_OPTIONS } from '../../const';
|
|
2
|
+
import { ATOMIC_COLORS } from '../atomic-colors';
|
|
3
|
+
import { COLOR_TOKENS } from './color-tokens';
|
|
4
|
+
export type ColorTokenMap = Record<(typeof COLOR_TOKENS)[number], Record<(typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS], {
|
|
5
|
+
light: keyof typeof ATOMIC_COLORS;
|
|
6
|
+
dark: keyof typeof ATOMIC_COLORS;
|
|
7
|
+
}>>;
|
|
8
|
+
export declare const COLOR_TOKEN_MAP: ColorTokenMap;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export declare const COLOR_TOKENS: readonly ["bg-primary", "bg-secondary", "bg-info", "bg-success", "bg-warning", "bg-error", "divider-neutral", "divider-invert", "divider-brand", "divider-info", "divider-success", "divider-warning", "divider-error", "primary-btn", "primary-btn-hover", "primary-btn-opa-01", "primary-btn-opa-02", "other", "other-hover", "other-opa-01", "other-opa-02", "other-text", "neutral", "neutral-dark", "neutral-text", "neutral-charcoal", "neutral-light", "neutral-invert", "neutral-opa-01", "neutral-opa-02", "info-hover", "info", "info-opa-01", "info-opa-02", "info-text", "success-hover", "success", "success-opa-01", "success-opa-02", "success-text", "warning-hover", "warning", "warning-opa-01", "warning-opa-02", "warning-text", "error-hover", "error", "error-opa-01", "error-opa-02", "error-text", "purple", "purple-opa-01", "purple-opa-02", "purple-text", "orange", "orange-opa-01", "orange-opa-02", "orange-text", "turquoise", "turquoise-opa-01", "turquoise-opa-02", "turquoise-text", "pink", "pink-opa-01", "pink-opa-02", "pink-text", "ultramarine", "ultramarine-opa-01", "ultramarine-opa-02", "ultramarine-text", "peach", "peach-opa-01", "peach-opa-02", "peach-text", "apple", "apple-opa-01", "apple-opa-02", "apple-text", "bubblegum", "bubblegum-opa-01", "bubblegum-opa-02", "bubblegum-text", "ocher", "ocher-opa-01", "ocher-opa-02", "ocher-text", "blueberry", "blueberry-opa-01", "blueberry-opa-02", "blueberry-text"];
|
|
2
|
+
type NoDash<T> = T extends `${string}-${string}` ? never : T;
|
|
3
|
+
type WithText<T> = T extends `${infer P}-text` ? P : never;
|
|
4
|
+
type COLOR_TOKEN = (typeof COLOR_TOKENS)[number];
|
|
5
|
+
/**
|
|
6
|
+
* Colors that are used as primary colors in the design system.
|
|
7
|
+
*/
|
|
8
|
+
export type MAIN_COLOR_TOKEN = NoDash<COLOR_TOKEN>;
|
|
9
|
+
/**
|
|
10
|
+
* {@link MAIN_COLOR_TOKEN} with text colors only. TODO: Maintain this list manually.
|
|
11
|
+
*/
|
|
12
|
+
export type MAIN_COLOR_TOKEN_WITH_TEXT = WithText<COLOR_TOKEN>;
|
|
13
|
+
/**
|
|
14
|
+
* The main colors in the design system, i.e colors that are not shades or opacities.
|
|
15
|
+
*/
|
|
16
|
+
export declare const mainColorTokens: ("info" | "error" | "success" | "warning" | "other" | "neutral" | "purple" | "orange" | "turquoise" | "pink" | "ultramarine" | "peach" | "apple" | "bubblegum" | "ocher" | "blueberry")[];
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
export declare const adjustBrightness: (color: string) => string;
|
|
2
|
+
type ColorVariant = Record<string, string>;
|
|
3
|
+
interface IColorVariants {
|
|
4
|
+
[key: string]: string | ColorVariant;
|
|
5
|
+
infoColor: string;
|
|
6
|
+
infoColorHover: string;
|
|
7
|
+
infoColorOpacityWeak: string;
|
|
8
|
+
infoColorOpacityStrong: string;
|
|
9
|
+
infoHoverComponentBgColor: string;
|
|
10
|
+
errorColor: string;
|
|
11
|
+
errorColorHover: string;
|
|
12
|
+
errorColorOpacityWeak: string;
|
|
13
|
+
errorColorOpacityStrong: string;
|
|
14
|
+
errorHoverComponentBgColor: string;
|
|
15
|
+
successColor: string;
|
|
16
|
+
successColorHover: string;
|
|
17
|
+
successColorOpacityWeak: string;
|
|
18
|
+
successColorOpacityStrong: string;
|
|
19
|
+
successHoverComponentBgColor: string;
|
|
20
|
+
warningColor: string;
|
|
21
|
+
warningColorHover: string;
|
|
22
|
+
warningColorOpacityWeak: string;
|
|
23
|
+
warningColorOpacityStrong: string;
|
|
24
|
+
warningHoverComponentBgColor: string;
|
|
25
|
+
primaryColor: string;
|
|
26
|
+
primaryColorHover: string;
|
|
27
|
+
primaryColorOpacityWeak: string;
|
|
28
|
+
primaryColorOpacityStrong: string;
|
|
29
|
+
primaryHoverComponentBgColor: string;
|
|
30
|
+
primaryBackgroundText: string;
|
|
31
|
+
primaryBackgroundHoverText: string;
|
|
32
|
+
primaryTextColor: string;
|
|
33
|
+
secondaryTextColor: string;
|
|
34
|
+
disabledTextColor: string;
|
|
35
|
+
placeholderTextColor: string;
|
|
36
|
+
primaryBackgroundColor: string;
|
|
37
|
+
secondaryBackgroundColor: string;
|
|
38
|
+
dividerColor: string;
|
|
39
|
+
secondaryButtonsHoverColor: string;
|
|
40
|
+
}
|
|
41
|
+
export declare const COLORS_DARK_MODE_HANDLED: {
|
|
42
|
+
primaryTextColor: (isDarkMode: boolean) => string;
|
|
43
|
+
secondaryTextColor: (isDarkMode: boolean) => string;
|
|
44
|
+
disabledTextColor: (isDarkMode: boolean) => string;
|
|
45
|
+
placeholderTextColor: (isDarkMode: boolean) => string;
|
|
46
|
+
primaryBackgroundColor: (isDarkMode: boolean) => string;
|
|
47
|
+
secondaryBackgroundColor: (isDarkMode: boolean) => string;
|
|
48
|
+
dividerColor: (isDarkMode: boolean) => string;
|
|
49
|
+
secondaryButtonsHoverColor: (isDarkMode: boolean) => string;
|
|
50
|
+
};
|
|
51
|
+
export declare const getColorVariants: (givenPrimary: string, type: 'light' | 'dark') => IColorVariants;
|
|
52
|
+
export interface RGBColor {
|
|
53
|
+
red: number;
|
|
54
|
+
green: number;
|
|
55
|
+
blue: number;
|
|
56
|
+
}
|
|
57
|
+
export {};
|
package/const.d.ts
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
export declare const ATOMIC_FONTS: {
|
|
2
|
+
'typo-11': "\n font-family: Montserrat, sans-serif !important;\n font-size: 48px;\n font-style: normal;\n font-weight: 700;\n line-height: 60px;";
|
|
3
|
+
'typo-10': "\n font-family: Montserrat, sans-serif !important;\n font-size: 24px;\n font-style: normal;\n font-weight: 700;\n line-height: 60px;";
|
|
4
|
+
'typo-9': "\n font-family: Montserrat, sans-serif !important;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 30px;";
|
|
5
|
+
'typo-8': "\n font-family: Montserrat, sans-serif !important;\n font-size: 20px;\n font-style: normal;\n font-weight: 700;\n line-height: 26px;";
|
|
6
|
+
'typo-7': "\n font-family: Montserrat, sans-serif !important;\n font-size: 18px;\n font-style: normal;\n font-weight: 700;\n line-height: 24px;";
|
|
7
|
+
'typo-6': "\n font-family: Montserrat, sans-serif !important;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: 24px;";
|
|
8
|
+
'typo-5': "\n font-family: Montserrat, sans-serif !important;\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: 24px;";
|
|
9
|
+
'typo-4': "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;";
|
|
10
|
+
'typo-3': "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px;";
|
|
11
|
+
'typo-2': "\n font-family: Montserrat, sans-serif !important;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 16px;";
|
|
12
|
+
'typo-1': "\n font-family: Montserrat, sans-serif !important;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px;";
|
|
13
|
+
};
|
package/fonts/index.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
export declare const getThemeFonts: () => {
|
|
2
|
+
desktop: {
|
|
3
|
+
largeTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 48px;\n font-style: normal;\n font-weight: 700;\n line-height: 60px;";
|
|
4
|
+
mediumTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 24px;\n font-style: normal;\n font-weight: 700;\n line-height: 60px;";
|
|
5
|
+
placeHolderTitleInput: "\n font-family: Montserrat, sans-serif !important;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 30px;";
|
|
6
|
+
smallTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 18px;\n font-style: normal;\n font-weight: 700;\n line-height: 24px;";
|
|
7
|
+
fine: "\n font-family: Montserrat, sans-serif !important;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px;";
|
|
8
|
+
fineStrong: "\n font-family: Montserrat, sans-serif !important;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 16px;";
|
|
9
|
+
bodyStrong: "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px;";
|
|
10
|
+
body: "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;";
|
|
11
|
+
};
|
|
12
|
+
mobile: {
|
|
13
|
+
bodyStrong: "\n font-family: Montserrat, sans-serif !important;\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: 24px;";
|
|
14
|
+
body: "\n font-family: Montserrat, sans-serif !important;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: 24px;";
|
|
15
|
+
smallTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 20px;\n font-style: normal;\n font-weight: 700;\n line-height: 26px;";
|
|
16
|
+
largeTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 24px;\n font-style: normal;\n font-weight: 700;\n line-height: 60px;";
|
|
17
|
+
fineStrong: "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px;";
|
|
18
|
+
fine: "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;";
|
|
19
|
+
};
|
|
20
|
+
};
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { RGBColor } from './colors-utils';
|
|
2
|
+
import { LABEL_OPTIONS } from './const';
|
|
3
|
+
interface IThemeProps {
|
|
4
|
+
isDarkMode: boolean;
|
|
5
|
+
label?: (typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS] | undefined;
|
|
6
|
+
primaryColor?: RGBColor;
|
|
7
|
+
}
|
|
8
|
+
export declare const loadThemeStyles: ({ isDarkMode, label, primaryColor, }: IThemeProps) => {
|
|
9
|
+
colors: import('./colors').ColorTokenResponse;
|
|
10
|
+
fonts: {
|
|
11
|
+
desktop: {
|
|
12
|
+
largeTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 48px;\n font-style: normal;\n font-weight: 700;\n line-height: 60px;";
|
|
13
|
+
mediumTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 24px;\n font-style: normal;\n font-weight: 700;\n line-height: 60px;";
|
|
14
|
+
placeHolderTitleInput: "\n font-family: Montserrat, sans-serif !important;\n font-size: 24px;\n font-style: normal;\n font-weight: 400;\n line-height: 30px;";
|
|
15
|
+
smallTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 18px;\n font-style: normal;\n font-weight: 700;\n line-height: 24px;";
|
|
16
|
+
fine: "\n font-family: Montserrat, sans-serif !important;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px;";
|
|
17
|
+
fineStrong: "\n font-family: Montserrat, sans-serif !important;\n font-size: 12px;\n font-style: normal;\n font-weight: 700;\n line-height: 16px;";
|
|
18
|
+
bodyStrong: "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px;";
|
|
19
|
+
body: "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;";
|
|
20
|
+
};
|
|
21
|
+
mobile: {
|
|
22
|
+
bodyStrong: "\n font-family: Montserrat, sans-serif !important;\n font-size: 16px;\n font-style: normal;\n font-weight: 700;\n line-height: 24px;";
|
|
23
|
+
body: "\n font-family: Montserrat, sans-serif !important;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: 24px;";
|
|
24
|
+
smallTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 20px;\n font-style: normal;\n font-weight: 700;\n line-height: 26px;";
|
|
25
|
+
largeTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 24px;\n font-style: normal;\n font-weight: 700;\n line-height: 60px;";
|
|
26
|
+
fineStrong: "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 700;\n line-height: 20px;";
|
|
27
|
+
fine: "\n font-family: Montserrat, sans-serif !important;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px;";
|
|
28
|
+
};
|
|
29
|
+
};
|
|
30
|
+
shadows: {
|
|
31
|
+
readonly 'shadow-map-element': `0px 3px 8px ${string}`;
|
|
32
|
+
readonly 'shadow-neutral-low': `0px 2px 4px ${string}`;
|
|
33
|
+
readonly 'shadow-neutral-medium': `0px 4px 8px ${string}`;
|
|
34
|
+
readonly 'shadow-neutral-high': `0px 8px 40px ${string}`;
|
|
35
|
+
readonly 'shadow-info-low': `0px 2px 4px ${string}`;
|
|
36
|
+
readonly 'shadow-info-medium': `0px 4px 8px ${string}`;
|
|
37
|
+
readonly 'shadow-info-high': `0px 8px 40px ${string}`;
|
|
38
|
+
readonly 'shadow-success-low': `0px 2px 4px ${string}`;
|
|
39
|
+
readonly 'shadow-success-medium': `0px 4px 8px ${string}`;
|
|
40
|
+
readonly 'shadow-success-high': `0px 8px 40px ${string}`;
|
|
41
|
+
readonly 'shadow-warning-low': `0px 2px 4px ${string}`;
|
|
42
|
+
readonly 'shadow-warning-medium': `0px 4px 8px ${string}`;
|
|
43
|
+
readonly 'shadow-warning-high': `0px 8px 40px ${string}`;
|
|
44
|
+
readonly 'shadow-error-low': `0px 2px 4px ${string}`;
|
|
45
|
+
readonly 'shadow-error-medium': `0px 4px 8px ${string}`;
|
|
46
|
+
readonly 'shadow-error-high': `0px 8px 40px ${string}`;
|
|
47
|
+
};
|
|
48
|
+
borderRadius: {
|
|
49
|
+
readonly NONE: "0px";
|
|
50
|
+
readonly XS: "2px";
|
|
51
|
+
readonly SM: "4px";
|
|
52
|
+
readonly MD: "6px";
|
|
53
|
+
readonly LG: "8px";
|
|
54
|
+
readonly XL: "16px";
|
|
55
|
+
};
|
|
56
|
+
spacings: {
|
|
57
|
+
readonly NONE: "0px";
|
|
58
|
+
readonly XS: "2px";
|
|
59
|
+
readonly SM: "4px";
|
|
60
|
+
readonly MD: "6px";
|
|
61
|
+
readonly LG: "8px";
|
|
62
|
+
readonly XL: "12px";
|
|
63
|
+
readonly '2XL': "16px";
|
|
64
|
+
readonly '3XL': "24px";
|
|
65
|
+
readonly '4XL': "32px";
|
|
66
|
+
readonly '5XL': "40px";
|
|
67
|
+
readonly '6XL': "48px";
|
|
68
|
+
readonly '7XL': "56px";
|
|
69
|
+
readonly '8XL': "64px";
|
|
70
|
+
};
|
|
71
|
+
};
|
|
72
|
+
type IThemeStyle = ReturnType<typeof loadThemeStyles>;
|
|
73
|
+
export interface ITheme {
|
|
74
|
+
theme: IThemeStyle;
|
|
75
|
+
}
|
|
76
|
+
export * from './colors-utils';
|
|
77
|
+
export * from './colors/tokens/color-tokens';
|