@autofleet/theme 0.3.14 → 0.3.16
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/dist/fonts.module.css +48 -1
- package/dist/fonts.module.css.map +1 -0
- package/dist/index.d.ts +345 -77
- package/dist/index.js +7 -1401
- package/dist/index.js.map +1 -1
- package/dist/main.css +1694 -1
- package/dist/main.css.map +1 -0
- package/package.json +4 -2
- package/dist/colors/atomic-colors.d.ts +0 -132
- package/dist/colors/index.d.ts +0 -12
- package/dist/colors/tokens/color-token-mapping.d.ts +0 -8
- package/dist/colors/tokens/color-tokens.d.ts +0 -17
- package/dist/colors-utils.d.ts +0 -57
- package/dist/const.d.ts +0 -4
- package/dist/fonts/atomic-fonts.d.ts +0 -13
- package/dist/fonts/index.d.ts +0 -20
- package/dist/shadow/index.d.ts +0 -19
- package/dist/spacing/border-radius.d.ts +0 -9
- package/dist/spacing/index.d.ts +0 -29
- package/dist/spacing/spacing.d.ts +0 -15
package/dist/fonts.module.css
CHANGED
|
@@ -1 +1,48 @@
|
|
|
1
|
-
|
|
1
|
+
/* TODO: when CSS @mixin is a thing, these should be replaced with mixins. */
|
|
2
|
+
|
|
3
|
+
.desktopLargeTitle, .mobileExtraLargeTitle {
|
|
4
|
+
font: var(--theme-font-desktop-large-title);
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.desktopMediumTitle, .mobileLargeTitle {
|
|
8
|
+
font: var(--theme-font-desktop-medium-title);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.desktopPlaceHolderTitleInput {
|
|
12
|
+
font: var(--theme-font-desktop-placeholder-title-input);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.desktopSmallTitle {
|
|
16
|
+
font: var(--theme-font-desktop-small-title);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.desktopFine {
|
|
20
|
+
font: var(--theme-font-desktop-fine);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.desktopFineStrong {
|
|
24
|
+
font: var(--theme-font-desktop-fine-strong);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.desktopBodyStrong, .mobileFineStrong {
|
|
28
|
+
font: var(--theme-font-desktop-body-strong);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.desktopBody, .mobileFine {
|
|
32
|
+
font: var(--theme-font-desktop-body);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.mobileBodyStrong {
|
|
36
|
+
font: var(--theme-font-mobile-body-strong);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.mobileBody {
|
|
40
|
+
font: var(--theme-font-mobile-body);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.mobileSmallTitle {
|
|
44
|
+
font: var(--theme-font-mobile-small-title);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
/*# sourceMappingURL=fonts.css.map*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"fonts.css","names":[],"sources":["../../src/fonts/fonts.css"],"sourcesContent":["/* TODO: when CSS @mixin is a thing, these should be replaced with mixins. */\n\n.desktopLargeTitle, .mobileExtraLargeTitle {\n font: var(--theme-font-desktop-large-title);\n}\n\n.desktopMediumTitle, .mobileLargeTitle {\n font: var(--theme-font-desktop-medium-title);\n}\n\n.desktopPlaceHolderTitleInput {\n font: var(--theme-font-desktop-placeholder-title-input);\n}\n\n.desktopSmallTitle {\n font: var(--theme-font-desktop-small-title);\n}\n\n.desktopFine {\n font: var(--theme-font-desktop-fine);\n}\n\n.desktopFineStrong {\n font: var(--theme-font-desktop-fine-strong);\n}\n\n.desktopBodyStrong, .mobileFineStrong {\n font: var(--theme-font-desktop-body-strong);\n}\n\n.desktopBody, .mobileFine {\n font: var(--theme-font-desktop-body);\n}\n\n.mobileBodyStrong {\n font: var(--theme-font-mobile-body-strong);\n}\n\n.mobileBody {\n font: var(--theme-font-mobile-body);\n}\n\n.mobileSmallTitle {\n font: var(--theme-font-mobile-small-title);\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,80 +1,348 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
//#region src/colors-utils.d.ts
|
|
2
|
+
declare const adjustBrightness: (color: string) => string;
|
|
3
|
+
type ColorVariant = Record<string, string>;
|
|
4
|
+
interface IColorVariants {
|
|
5
|
+
[key: string]: string | ColorVariant;
|
|
6
|
+
infoColor: string;
|
|
7
|
+
infoColorHover: string;
|
|
8
|
+
infoColorOpacityWeak: string;
|
|
9
|
+
infoColorOpacityStrong: string;
|
|
10
|
+
infoHoverComponentBgColor: string;
|
|
11
|
+
errorColor: string;
|
|
12
|
+
errorColorHover: string;
|
|
13
|
+
errorColorOpacityWeak: string;
|
|
14
|
+
errorColorOpacityStrong: string;
|
|
15
|
+
errorHoverComponentBgColor: string;
|
|
16
|
+
successColor: string;
|
|
17
|
+
successColorHover: string;
|
|
18
|
+
successColorOpacityWeak: string;
|
|
19
|
+
successColorOpacityStrong: string;
|
|
20
|
+
successHoverComponentBgColor: string;
|
|
21
|
+
warningColor: string;
|
|
22
|
+
warningColorHover: string;
|
|
23
|
+
warningColorOpacityWeak: string;
|
|
24
|
+
warningColorOpacityStrong: string;
|
|
25
|
+
warningHoverComponentBgColor: string;
|
|
26
|
+
primaryColor: string;
|
|
27
|
+
primaryColorHover: string;
|
|
28
|
+
primaryColorOpacityWeak: string;
|
|
29
|
+
primaryColorOpacityStrong: string;
|
|
30
|
+
primaryHoverComponentBgColor: string;
|
|
31
|
+
primaryBackgroundText: string;
|
|
32
|
+
primaryBackgroundHoverText: string;
|
|
33
|
+
primaryTextColor: string;
|
|
34
|
+
secondaryTextColor: string;
|
|
35
|
+
disabledTextColor: string;
|
|
36
|
+
placeholderTextColor: string;
|
|
37
|
+
primaryBackgroundColor: string;
|
|
38
|
+
secondaryBackgroundColor: string;
|
|
39
|
+
dividerColor: string;
|
|
40
|
+
secondaryButtonsHoverColor: string;
|
|
41
|
+
}
|
|
42
|
+
declare const COLORS_DARK_MODE_HANDLED: {
|
|
43
|
+
primaryTextColor: (isDarkMode: boolean) => string;
|
|
44
|
+
secondaryTextColor: (isDarkMode: boolean) => string;
|
|
45
|
+
disabledTextColor: (isDarkMode: boolean) => string;
|
|
46
|
+
placeholderTextColor: (isDarkMode: boolean) => string;
|
|
47
|
+
primaryBackgroundColor: (isDarkMode: boolean) => string;
|
|
48
|
+
secondaryBackgroundColor: (isDarkMode: boolean) => string;
|
|
49
|
+
dividerColor: (isDarkMode: boolean) => string;
|
|
50
|
+
secondaryButtonsHoverColor: (isDarkMode: boolean) => string;
|
|
51
|
+
};
|
|
52
|
+
declare const getColorVariants: (givenPrimary: string, type: "light" | "dark") => IColorVariants;
|
|
53
|
+
interface RGBColor {
|
|
54
|
+
red: number;
|
|
55
|
+
green: number;
|
|
56
|
+
blue: number;
|
|
57
|
+
}
|
|
58
|
+
//#endregion
|
|
59
|
+
//#region src/const.d.ts
|
|
60
|
+
declare const LABEL_OPTIONS: {
|
|
61
|
+
readonly AUTOFLEET: "autofleet";
|
|
62
|
+
readonly WHITE_LABELED: "whiteLabel";
|
|
63
|
+
};
|
|
64
|
+
//#endregion
|
|
65
|
+
//#region src/colors/atomic-colors.d.ts
|
|
66
|
+
declare const ATOMIC_COLORS: {
|
|
67
|
+
// neutral colors
|
|
68
|
+
"n-00": string;
|
|
69
|
+
"n-01": string;
|
|
70
|
+
"n-02": string;
|
|
71
|
+
"n-03": string;
|
|
72
|
+
"n-04": string;
|
|
73
|
+
"n-05": string;
|
|
74
|
+
"n-opa-10": string;
|
|
75
|
+
"n-opa-16": string;
|
|
76
|
+
"n-opa-24": string;
|
|
77
|
+
"n-opa-32": string;
|
|
78
|
+
"n-00-opa-32": string;
|
|
79
|
+
// brand colors
|
|
80
|
+
brand: string;
|
|
81
|
+
"brand-hover": string;
|
|
82
|
+
"brand-opa-10": string;
|
|
83
|
+
"brand-opa-16": string;
|
|
84
|
+
"brand-opa-24": string;
|
|
85
|
+
"brand-opa-32": string;
|
|
86
|
+
// blue colors
|
|
87
|
+
"b-01": string;
|
|
88
|
+
"b-02": string;
|
|
89
|
+
"b-03": string;
|
|
90
|
+
"b-04": string;
|
|
91
|
+
"b-05": string;
|
|
92
|
+
"b-06": string;
|
|
93
|
+
"b-07": string;
|
|
94
|
+
"b-opa-10": string;
|
|
95
|
+
"b-opa-16": string;
|
|
96
|
+
"b-opa-24": string;
|
|
97
|
+
"b-opa-32": string;
|
|
98
|
+
// green colors
|
|
99
|
+
"g-01": string;
|
|
100
|
+
"g-02": string;
|
|
101
|
+
"g-03": string;
|
|
102
|
+
"g-04": string;
|
|
103
|
+
"g-05": string;
|
|
104
|
+
"g-06": string;
|
|
105
|
+
"g-07": string;
|
|
106
|
+
"g-opa-10": string;
|
|
107
|
+
"g-opa-16": string;
|
|
108
|
+
"g-opa-24": string;
|
|
109
|
+
"g-opa-32": string;
|
|
110
|
+
// yellow colors
|
|
111
|
+
"y-01": string;
|
|
112
|
+
"y-02": string;
|
|
113
|
+
"y-03": string;
|
|
114
|
+
"y-04": string;
|
|
115
|
+
"y-05": string;
|
|
116
|
+
"y-06": string;
|
|
117
|
+
"y-07": string;
|
|
118
|
+
"y-opa-10": string;
|
|
119
|
+
"y-opa-16": string;
|
|
120
|
+
"y-opa-24": string;
|
|
121
|
+
"y-opa-32": string;
|
|
122
|
+
// red colors
|
|
123
|
+
"r-01": string;
|
|
124
|
+
"r-02": string;
|
|
125
|
+
"r-03": string;
|
|
126
|
+
"r-04": string;
|
|
127
|
+
"r-05": string;
|
|
128
|
+
"r-06": string;
|
|
129
|
+
"r-07": string;
|
|
130
|
+
"r-opa-10": string;
|
|
131
|
+
"r-opa-16": string;
|
|
132
|
+
"r-opa-24": string;
|
|
133
|
+
"r-opa-32": string;
|
|
134
|
+
// purple colors
|
|
135
|
+
"pu-02": string;
|
|
136
|
+
"pu-06": string;
|
|
137
|
+
"pu-07": string;
|
|
138
|
+
"pu-opa-10": string;
|
|
139
|
+
"pu-opa-16": string;
|
|
140
|
+
"pu-opa-24": string;
|
|
141
|
+
// orange colors
|
|
142
|
+
"or-02": string;
|
|
143
|
+
"or-06": string;
|
|
144
|
+
"or-07": string;
|
|
145
|
+
"or-opa-10": string;
|
|
146
|
+
"or-opa-16": string;
|
|
147
|
+
"or-opa-24": string;
|
|
148
|
+
// turquoise colors
|
|
149
|
+
"tu-02": string;
|
|
150
|
+
"tu-06": string;
|
|
151
|
+
"tu-07": string;
|
|
152
|
+
"tu-opa-10": string;
|
|
153
|
+
"tu-opa-16": string;
|
|
154
|
+
"tu-opa-24": string;
|
|
155
|
+
// pink colors
|
|
156
|
+
"pi-02": string;
|
|
157
|
+
"pi-06": string;
|
|
158
|
+
"pi-07": string;
|
|
159
|
+
"pi-opa-10": string;
|
|
160
|
+
"pi-opa-16": string;
|
|
161
|
+
"pi-opa-24": string;
|
|
162
|
+
// ultramarine colors
|
|
163
|
+
"ul-02": string;
|
|
164
|
+
"ul-06": string;
|
|
165
|
+
"ul-07": string;
|
|
166
|
+
"ul-opa-10": string;
|
|
167
|
+
"ul-opa-16": string;
|
|
168
|
+
"ul-opa-24": string;
|
|
169
|
+
// peach colors
|
|
170
|
+
"pe-02": string;
|
|
171
|
+
"pe-06": string;
|
|
172
|
+
"pe-07": string;
|
|
173
|
+
"pe-opa-10": string;
|
|
174
|
+
"pe-opa-16": string;
|
|
175
|
+
"pe-opa-24": string;
|
|
176
|
+
// apple colors
|
|
177
|
+
"ap-02": string;
|
|
178
|
+
"ap-06": string;
|
|
179
|
+
"ap-07": string;
|
|
180
|
+
"ap-opa-10": string;
|
|
181
|
+
"ap-opa-16": string;
|
|
182
|
+
"ap-opa-24": string;
|
|
183
|
+
// bubblegum colors
|
|
184
|
+
"bu-02": string;
|
|
185
|
+
"bu-06": string;
|
|
186
|
+
"bu-07": string;
|
|
187
|
+
"bu-opa-10": string;
|
|
188
|
+
"bu-opa-16": string;
|
|
189
|
+
"bu-opa-24": string;
|
|
190
|
+
// ocher colors
|
|
191
|
+
"oc-02": string;
|
|
192
|
+
"oc-06": string;
|
|
193
|
+
"oc-07": string;
|
|
194
|
+
"oc-opa-10": string;
|
|
195
|
+
"oc-opa-16": string;
|
|
196
|
+
"oc-opa-24": string;
|
|
197
|
+
// bluberry colors
|
|
198
|
+
"br-02": string;
|
|
199
|
+
"br-06": string;
|
|
200
|
+
"br-07": string;
|
|
201
|
+
"br-opa-10": string;
|
|
202
|
+
"br-opa-16": string;
|
|
203
|
+
"br-opa-24": string;
|
|
204
|
+
};
|
|
205
|
+
//#endregion
|
|
206
|
+
//#region src/colors/tokens/color-tokens.d.ts
|
|
207
|
+
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"];
|
|
208
|
+
type NoDash<T> = T extends `${string}-${string}` ? never : T;
|
|
209
|
+
type WithText<T> = T extends `${infer P}-text` ? P : never;
|
|
210
|
+
type COLOR_TOKEN = (typeof COLOR_TOKENS)[number];
|
|
211
|
+
/**
|
|
212
|
+
* Colors that are used as primary colors in the design system.
|
|
213
|
+
*/
|
|
214
|
+
type MAIN_COLOR_TOKEN = NoDash<COLOR_TOKEN>;
|
|
215
|
+
/**
|
|
216
|
+
* {@link MAIN_COLOR_TOKEN} with text colors only. TODO: Maintain this list manually.
|
|
217
|
+
*/
|
|
218
|
+
type MAIN_COLOR_TOKEN_WITH_TEXT = WithText<COLOR_TOKEN>;
|
|
219
|
+
/**
|
|
220
|
+
* The main colors in the design system, i.e colors that are not shades or opacities.
|
|
221
|
+
*/
|
|
222
|
+
declare const mainColorTokens: NoDash<COLOR_TOKEN>[];
|
|
223
|
+
//#endregion
|
|
224
|
+
//#region src/colors/tokens/color-token-mapping.d.ts
|
|
225
|
+
type ColorTokenMap = Record<(typeof COLOR_TOKENS)[number], Record<(typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS], {
|
|
226
|
+
light: keyof typeof ATOMIC_COLORS;
|
|
227
|
+
dark: keyof typeof ATOMIC_COLORS;
|
|
228
|
+
}>>;
|
|
229
|
+
// With References:
|
|
230
|
+
declare const COLOR_TOKEN_MAP: ColorTokenMap;
|
|
231
|
+
//#endregion
|
|
232
|
+
//#region src/colors/index.d.ts
|
|
233
|
+
type ColorTokenResponse = { [type in keyof typeof COLOR_TOKEN_MAP]: string };
|
|
234
|
+
//#endregion
|
|
235
|
+
//#region src/fonts/atomic-fonts.d.ts
|
|
236
|
+
type IFontResult<TSize extends string, TStyle extends string, TWeight extends string, TLineHeight extends string, TFamily extends string = string> = `
|
|
237
|
+
font-family: ${TFamily};
|
|
238
|
+
font-size: ${TSize};
|
|
239
|
+
font-style: ${TStyle};
|
|
240
|
+
font-weight: ${TWeight};
|
|
241
|
+
line-height: ${TLineHeight};`;
|
|
242
|
+
type Font = "Montserrat, sans-serif !important";
|
|
243
|
+
interface IAtomicFonts {
|
|
244
|
+
"typo-11": IFontResult<"48px", "normal", "700", "60px", Font>;
|
|
245
|
+
"typo-10": IFontResult<"24px", "normal", "700", "60px", Font>;
|
|
246
|
+
"typo-9": IFontResult<"24px", "normal", "400", "30px", Font>;
|
|
247
|
+
"typo-8": IFontResult<"20px", "normal", "700", "26px", Font>;
|
|
248
|
+
"typo-7": IFontResult<"18px", "normal", "700", "24px", Font>;
|
|
249
|
+
"typo-6": IFontResult<"16px", "normal", "500", "24px", Font>;
|
|
250
|
+
"typo-5": IFontResult<"16px", "normal", "700", "24px", Font>;
|
|
251
|
+
"typo-4": IFontResult<"14px", "normal", "500", "20px", Font>;
|
|
252
|
+
"typo-3": IFontResult<"14px", "normal", "700", "20px", Font>;
|
|
253
|
+
"typo-2": IFontResult<"12px", "normal", "700", "16px", Font>;
|
|
254
|
+
"typo-1": IFontResult<"12px", "normal", "500", "16px", Font>;
|
|
255
|
+
}
|
|
256
|
+
//#endregion
|
|
257
|
+
//#region src/fonts/index.d.ts
|
|
258
|
+
interface ThemeFonts {
|
|
259
|
+
desktop: {
|
|
260
|
+
largeTitle: IAtomicFonts["typo-11"];
|
|
261
|
+
mediumTitle: IAtomicFonts["typo-10"];
|
|
262
|
+
placeHolderTitleInput: IAtomicFonts["typo-9"];
|
|
263
|
+
smallTitle: IAtomicFonts["typo-7"];
|
|
264
|
+
fine: IAtomicFonts["typo-1"];
|
|
265
|
+
fineStrong: IAtomicFonts["typo-2"];
|
|
266
|
+
bodyStrong: IAtomicFonts["typo-3"];
|
|
267
|
+
body: IAtomicFonts["typo-4"];
|
|
268
|
+
};
|
|
269
|
+
mobile: {
|
|
270
|
+
bodyStrong: IAtomicFonts["typo-5"];
|
|
271
|
+
body: IAtomicFonts["typo-6"];
|
|
272
|
+
smallTitle: IAtomicFonts["typo-8"];
|
|
273
|
+
largeTitle: IAtomicFonts["typo-10"];
|
|
274
|
+
fineStrong: IAtomicFonts["typo-3"];
|
|
275
|
+
fine: IAtomicFonts["typo-4"];
|
|
276
|
+
};
|
|
7
277
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
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
|
-
readonly '2XL': "24px";
|
|
56
|
-
};
|
|
57
|
-
spacings: {
|
|
58
|
-
readonly NONE: "0px";
|
|
59
|
-
readonly XS: "2px";
|
|
60
|
-
readonly SM: "4px";
|
|
61
|
-
readonly MD: "6px";
|
|
62
|
-
readonly LG: "8px";
|
|
63
|
-
readonly XL: "12px";
|
|
64
|
-
readonly '2XL': "16px";
|
|
65
|
-
readonly '3XL': "24px";
|
|
66
|
-
readonly '4XL': "32px";
|
|
67
|
-
readonly '5XL': "40px";
|
|
68
|
-
readonly '6XL': "48px";
|
|
69
|
-
readonly '7XL': "56px";
|
|
70
|
-
readonly '8XL': "64px";
|
|
71
|
-
};
|
|
72
|
-
spacingNumbers: Record<string, number>;
|
|
73
|
-
borderRadiusNumbers: Record<string, number>;
|
|
278
|
+
//#endregion
|
|
279
|
+
//#region src/spacing/spacing.d.ts
|
|
280
|
+
declare const SPACING: {
|
|
281
|
+
readonly NONE: "0px";
|
|
282
|
+
readonly XS: "2px";
|
|
283
|
+
readonly SM: "4px";
|
|
284
|
+
readonly MD: "6px";
|
|
285
|
+
readonly LG: "8px";
|
|
286
|
+
readonly XL: "12px";
|
|
287
|
+
readonly "2XL": "16px";
|
|
288
|
+
readonly "3XL": "24px";
|
|
289
|
+
readonly "4XL": "32px";
|
|
290
|
+
readonly "5XL": "40px";
|
|
291
|
+
readonly "6XL": "48px";
|
|
292
|
+
readonly "7XL": "56px";
|
|
293
|
+
readonly "8XL": "64px";
|
|
74
294
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
295
|
+
//#endregion
|
|
296
|
+
//#region src/shadow/index.d.ts
|
|
297
|
+
declare const getLowShadow: (color: string, opacity?: number) => `${typeof SPACING.NONE} ${typeof SPACING.XS} ${typeof SPACING.SM} ${string}`;
|
|
298
|
+
declare const getMedShadow: (color: string, opacity?: number) => `${typeof SPACING.NONE} ${typeof SPACING.SM} ${typeof SPACING.LG} ${string}`;
|
|
299
|
+
declare const getHighShadow: (color: string, opacity?: number) => `${typeof SPACING.NONE} ${typeof SPACING.LG} ${typeof SPACING["5XL"]} ${string}`;
|
|
300
|
+
type ShadowVariant = "neutral" | "info" | "success" | "warning" | "error";
|
|
301
|
+
type LowShadows = Record<`shadow-${ShadowVariant}-low`, ReturnType<typeof getLowShadow>>;
|
|
302
|
+
type MedShadows = Record<`shadow-${ShadowVariant}-medium`, ReturnType<typeof getMedShadow>>;
|
|
303
|
+
type HighShadows = Record<`shadow-${ShadowVariant}-high`, ReturnType<typeof getHighShadow>>;
|
|
304
|
+
interface ThemeShadows extends LowShadows, MedShadows, HighShadows {
|
|
305
|
+
"shadow-map-element": `${typeof SPACING.NONE} 3px ${typeof SPACING.LG} ${string}`;
|
|
306
|
+
}
|
|
307
|
+
//#endregion
|
|
308
|
+
//#region src/spacing/border-radius.d.ts
|
|
309
|
+
declare const BORDER_RADIUS: {
|
|
310
|
+
readonly NONE: "0px";
|
|
311
|
+
readonly XS: "2px";
|
|
312
|
+
readonly SM: "4px";
|
|
313
|
+
readonly MD: "6px";
|
|
314
|
+
readonly LG: "8px";
|
|
315
|
+
readonly XL: "16px";
|
|
316
|
+
readonly "2XL": "24px";
|
|
317
|
+
};
|
|
318
|
+
//#endregion
|
|
319
|
+
//#region src/spacing/index.d.ts
|
|
320
|
+
interface ThemeSpacings {
|
|
321
|
+
borderRadius: typeof BORDER_RADIUS;
|
|
322
|
+
spacings: typeof SPACING;
|
|
323
|
+
spacingNumbers: Record<keyof typeof SPACING, number>;
|
|
324
|
+
borderRadiusNumbers: Record<keyof typeof BORDER_RADIUS, number>;
|
|
325
|
+
}
|
|
326
|
+
//#endregion
|
|
327
|
+
//#region src/index.d.ts
|
|
328
|
+
interface IThemeProps {
|
|
329
|
+
isDarkMode: boolean;
|
|
330
|
+
label?: (typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS] | undefined;
|
|
331
|
+
primaryColor?: RGBColor;
|
|
332
|
+
}
|
|
333
|
+
interface IThemeStyle extends ThemeSpacings {
|
|
334
|
+
colors: ColorTokenResponse;
|
|
335
|
+
fonts: ThemeFonts;
|
|
336
|
+
shadows: ThemeShadows;
|
|
337
|
+
}
|
|
338
|
+
declare const loadThemeStyles: ({
|
|
339
|
+
isDarkMode,
|
|
340
|
+
label,
|
|
341
|
+
primaryColor
|
|
342
|
+
}: IThemeProps) => IThemeStyle;
|
|
343
|
+
interface ITheme {
|
|
344
|
+
theme: IThemeStyle;
|
|
78
345
|
}
|
|
79
|
-
|
|
80
|
-
export
|
|
346
|
+
//#endregion
|
|
347
|
+
export { COLORS_DARK_MODE_HANDLED, COLOR_TOKENS, ITheme, IThemeStyle, MAIN_COLOR_TOKEN, MAIN_COLOR_TOKEN_WITH_TEXT, RGBColor, adjustBrightness, getColorVariants, loadThemeStyles, mainColorTokens };
|
|
348
|
+
//# sourceMappingURL=index.d.ts.map
|