@baloise/ds-tokens 19.9.5 → 20.0.0-next.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.
Files changed (31) hide show
  1. package/LICENSE +2 -2
  2. package/README.md +2 -6
  3. package/dist/css/base.tokens.css +1417 -0
  4. package/dist/css/tcs.tokens.css +35 -0
  5. package/dist/docs/base.tokens.json +49885 -0
  6. package/dist/js/base.tokens.js +1236 -0
  7. package/dist/out-tsc/config.base.js +85 -0
  8. package/dist/out-tsc/config.brand.js +82 -0
  9. package/dist/out-tsc/formatter.js +236 -0
  10. package/dist/out-tsc/index.js +43 -0
  11. package/dist/out-tsc/transformers.js +150 -0
  12. package/dist/sass/base.tokens.scss +1192 -0
  13. package/dist/web/base.tokens.json +1191 -0
  14. package/package.json +13 -8
  15. package/dist/deprecated/tokens.css +0 -119
  16. package/dist/deprecated/tokens.css.scss +0 -119
  17. package/dist/deprecated/tokens.docs.json +0 -2764
  18. package/dist/deprecated/tokens.json +0 -114
  19. package/dist/deprecated/tokens.less +0 -116
  20. package/dist/deprecated/tokens.scss +0 -116
  21. package/dist/figma/color.json +0 -606
  22. package/dist/figma/size.json +0 -232
  23. package/dist/tokens.css +0 -270
  24. package/dist/tokens.css.scss +0 -270
  25. package/dist/tokens.docs.json +0 -5853
  26. package/dist/tokens.esm.js +0 -268
  27. package/dist/tokens.js +0 -270
  28. package/dist/tokens.json +0 -265
  29. package/dist/tokens.less +0 -267
  30. package/dist/tokens.scss +0 -267
  31. package/dist/types/tokens.d.ts +0 -350
package/dist/tokens.esm.js DELETED
@@ -1,268 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 18 May 2026 09:23:43 GMT
4
- */
5
-
6
- export const balColorBackgroundPrimary = "#000d6e"; // Blue is our accent color and it is present on every touchpoint. Our logo, text, buttons and links are blue.
7
- export const balColorBackgroundGreenLight = "#e9fbf7"; // Default brand background color to use
8
- export const balColorBackgroundGreen = "#94e3d4"; // Use this background for call to action sections
9
- export const balColorBackgroundPurpleLight = "#f9f3ff"; // Default brand background color to use
10
- export const balColorBackgroundPurple = "#b8b2ff"; // Use this background for call to action sections
11
- export const balColorBackgroundYellowLight = "#fff9e8"; // Default brand background color to use
12
- export const balColorBackgroundYellow = "#fae052"; // Use this background for call to action sections
13
- export const balColorBackgroundRedLight = "#ffeef1"; // Default brand background color to use
14
- export const balColorBackgroundRed = "#ffaca6"; // Use this background for call to action sections
15
- export const balColorBackgroundWhite = "#ffffff";
16
- export const balColorBackgroundGreyLight = "#f6f6f6";
17
- export const balColorBackgroundGrey = "#e8e8e8";
18
- export const balColorBackgroundDisabled = "#e8e8e8";
19
- export const balColorBackgroundInfo = "#60a0e0";
20
- export const balColorBackgroundSuccess = "#5bab7a";
21
- export const balColorBackgroundWarning = "#ffd25e";
22
- export const balColorBackgroundDanger = "#f05d4d";
23
- export const balColorBorder = "#e8e8e8"; // Default border color
24
- export const balColorBorderPrimary = "#000d6e"; // Use for focused or selected state.
25
- export const balColorBorderPrimaryLight = "#656ea8"; // Disabled or secondary color on dark backgrounds
26
- export const balColorBorderGreyLight = "#f6f6f6"; // Default input color or can be use for a divider
27
- export const balColorBorderGrey = "#e8e8e8"; // Default border color
28
- export const balColorBorderGreyDark = "#b6b6b6"; // Use for disabled state.
29
- export const balColorBorderWhite = "#ffffff"; // Default color on dark backgrounds.
30
- export const balColorBorderInfo = "#1c77d2";
31
- export const balColorBorderSuccess = "#168741"; // Use for valid state.
32
- export const balColorBorderWarning = "#f99319"; // Use for warning/hint state.
33
- export const balColorBorderDanger = "#ea1800"; // Use for invalid state.
34
- export const balColorBorderInfoHovered = "#155ba3";
35
- export const balColorBorderInfoPressed = "#0e457b";
36
- export const balColorBorderPrimaryHovered = "#0014aa";
37
- export const balColorBorderPrimaryPressed = "#000739";
38
- export const balColorBorderSuccessHovered = "#116b34";
39
- export const balColorBorderSuccessPressed = "#0b5227";
40
- export const balColorBorderWarningHovered = "#f99319";
41
- export const balColorBorderWarningPressed = "#c97612";
42
- export const balColorBorderDangerHovered = "#cb1501";
43
- export const balColorBorderDangerPressed = "#a01100";
44
- export const balColorBorderGreenHovered = "#00b28f";
45
- export const balColorBorderGreenPressed = "#1b5951";
46
- export const balColorBorderPurpleHovered = "#9f52cc";
47
- export const balColorBorderPurplePressed = "#6c2273";
48
- export const balColorBorderRedHovered = "#d9304c";
49
- export const balColorBorderRedPressed = "#99172d";
50
- export const balColorBorderYellowHovered = "#fa9319";
51
- export const balColorBorderYellowPressed = "#b24a00";
52
- export const balColorBorderInverted = "#ffffff"; // Default color on dark backgrounds.
53
- export const balColorBorderInvertedDisabled = "#656ea8"; // Disabled.
54
- export const balColorBorderInvertedPrimary = "#293485";
55
- export const balColorBorderInvertedPrimaryHovered = "#a7d1fa";
56
- export const balColorBorderInvertedPrimaryPressed = "#6672cc";
57
- export const balColorPrimary = "#000d6e";
58
- export const balColorGrey = "#e8e8e8";
59
- export const balColorLightBlue = "#e5f1fe";
60
- export const balColorPurple = "#b8b2ff";
61
- export const balColorGreen = "#94e3d4";
62
- export const balColorYellow = "#fae052";
63
- export const balColorRed = "#ffaca6";
64
- export const balColorInfo = "#60a0e0";
65
- export const balColorSuccess = "#5bab7a";
66
- export const balColorWarning = "#ffd25e";
67
- export const balColorDanger = "#f05d4d";
68
- export const balColorPrimary1 = "#e5e7f0";
69
- export const balColorPrimary2 = "#b3b6d4";
70
- export const balColorPrimary3 = "#656ea8";
71
- export const balColorPrimary4 = "#293485";
72
- export const balColorPrimary5 = "#000d6e";
73
- export const balColorPrimary6 = "#000739";
74
- export const balColorWhite = "#ffffff";
75
- export const balColorGreen1 = "#e9fbf7";
76
- export const balColorGreen2 = "#cbf2ec";
77
- export const balColorGreen3 = "#94e3d4";
78
- export const balColorGreen4 = "#21d9ac";
79
- export const balColorGreen5 = "#00b28f";
80
- export const balColorGreen6 = "#1b5951";
81
- export const balColorPurple1 = "#f9f3ff";
82
- export const balColorPurple2 = "#e1d9ff";
83
- export const balColorPurple3 = "#b8b2ff";
84
- export const balColorPurple4 = "#be82fa";
85
- export const balColorPurple5 = "#9f52cc";
86
- export const balColorPurple6 = "#6c2273";
87
- export const balColorYellow1 = "#fff9e8";
88
- export const balColorYellow2 = "#ffecbc";
89
- export const balColorYellow3 = "#fae052";
90
- export const balColorYellow4 = "#ffbe19";
91
- export const balColorYellow5 = "#fa9319";
92
- export const balColorYellow6 = "#b24a00";
93
- export const balColorRed1 = "#ffeef1";
94
- export const balColorRed2 = "#ffd7d7";
95
- export const balColorRed3 = "#ffaca6";
96
- export const balColorRed4 = "#ff596f";
97
- export const balColorRed5 = "#d9304c";
98
- export const balColorRed6 = "#99172d";
99
- export const balColorGrey1 = "#fafafa";
100
- export const balColorGrey2 = "#f6f6f6";
101
- export const balColorGrey3 = "#e8e8e8";
102
- export const balColorGrey4 = "#b6b6b6";
103
- export const balColorGrey5 = "#747474";
104
- export const balColorGrey6 = "#313131";
105
- export const balColorBlack = "#000000";
106
- export const balColorLightBlue1 = "#e5f1fe";
107
- export const balColorLightBlue2 = "#a7d1fa";
108
- export const balColorLightBlue3 = "#56a7f5";
109
- export const balColorLightBlue4 = "#6672cc";
110
- export const balColorLightBlue5 = "#0014aa";
111
- export const balColorLightBlue6 = "#000a55";
112
- export const balColorInfo1 = "#e8f1fb";
113
- export const balColorInfo2 = "#a4c9ed";
114
- export const balColorInfo3 = "#60a0e0";
115
- export const balColorInfo4 = "#1c77d2";
116
- export const balColorInfo5 = "#155ba3";
117
- export const balColorInfo6 = "#0e457b";
118
- export const balColorSuccess1 = "#e8f3ec";
119
- export const balColorSuccess2 = "#a1cfb3";
120
- export const balColorSuccess3 = "#5bab7a";
121
- export const balColorSuccess4 = "#168741";
122
- export const balColorSuccess5 = "#116b34";
123
- export const balColorSuccess6 = "#0b5227";
124
- export const balColorWarning1 = "#fff9e8";
125
- export const balColorWarning2 = "#ffe5a3";
126
- export const balColorWarning3 = "#ffd25e";
127
- export const balColorWarning4 = "#ffbe19";
128
- export const balColorWarning5 = "#f99319";
129
- export const balColorWarning6 = "#c97612";
130
- export const balColorDanger1 = "#fce8e6";
131
- export const balColorDanger2 = "#f7a299";
132
- export const balColorDanger3 = "#f05d4d";
133
- export const balColorDanger4 = "#ea1800";
134
- export const balColorDanger5 = "#cb1501";
135
- export const balColorDanger6 = "#a01100";
136
- export const balColorShadowFocusStart = "#ffffff";
137
- export const balColorShadowFocusEnd = "#6c2273";
138
- export const balColorShadowFocusInvertedStart = "#ffffff";
139
- export const balColorShadowFocusInvertedEnd = "#fae052";
140
- export const balColorTextPrimary = "#000d6e"; // Main font color for all headings and paragraphs.
141
- export const balColorTextPrimaryLight = "#656ea8"; // Secondary font color for help messages.
142
- export const balColorTextWhite = "#ffffff"; // Main font color for all headings and paragraphs on a dark background.
143
- export const balColorTextGreyLight = "#b6b6b6"; // Font color for disabled texts
144
- export const balColorTextGrey = "#747474"; // Font color for placeholders
145
- export const balColorTextGreyDark = "#313131"; // Font color for disabled elements
146
- export const balColorTextInfo = "#1c77d2";
147
- export const balColorTextWarning = "#f99319";
148
- export const balColorTextSuccess = "#168741";
149
- export const balColorTextDanger = "#ea1800";
150
- export const balColorTextBlack = "#000000";
151
- export const balColorTextPrimaryHovered = "#0014aa";
152
- export const balColorTextPrimaryPressed = "#000739";
153
- export const balColorTextDangerHovered = "#cb1501";
154
- export const balColorTextDangerPressed = "#a01100";
155
- export const balColorTextInverted = "#ffffff";
156
- export const balColorTextInvertedDisabled = "#656ea8";
157
- export const balColorTextInvertedHovered = "#a7d1fa";
158
- export const balColorTextInvertedPressed = "#60a0e0";
159
- export const balBorderWidthSmall = "0.063rem"; // The small border size is crafted for subtle, refined delineation.
160
- export const balBorderWidthNormal = "0.125rem"; // The normal border size strikes a harmonious balance, offering a versatile choice for defining boundaries within your design.
161
- export const balBorderWidthLarge = "0.25rem"; // The large border size makes a bold statement, creating strong visual contrasts and emphasizing key elements within your interface.
162
- export const balBreakpointTablet = "769px"; // Tailored for tablet devices, this breakpoint ensures a seamless and optimized user experience on medium-sized screens.
163
- export const balBreakpointDesktop = "1024px"; // Optimized for desktop screens, this breakpoint provides a spacious canvas for your design, allowing for more intricate layouts and detailed content presentation.
164
- export const balBreakpointHighDefinition = "1280px"; // Designed for high-definition displays, this breakpoint elevates your interface to a level of visual richness and clarity.
165
- export const balBreakpointWidescreen = "1440px"; // Tailored for widescreen monitors, this breakpoint offers a panoramic view that accommodates expansive content layouts.
166
- export const balBreakpointFullhd = "1920px"; // Crafted for Full HD displays, this breakpoint strikes a balance between detail and performance.
167
- export const balContainerSizeDetailPage = "744px"; // Deprecated container size for the website
168
- export const balContainerSizeCompact = "896px"; // Tailored container size designed for form wizard applications or pages.
169
- export const balContainerSizeNormal = "1496px"; // The default container size is versatile and suitable for various applications and website pages.
170
- export const balContainerSizeFluid = "100%"; // The container for fullscreen application with a large table for example.
171
- export const balContainerSpace = "1rem"; // Default space of a container to left and right side.
172
- export const balContainerSpaceTablet = "2.5rem"; // Default space on tablets of a container to left and right side.
173
- export const balContainerSpaceDesktop = "3rem"; // Default space on desktops of a container to left and right side.
174
- export const balColumnGap = "1rem";
175
- export const balRadiusNormal = "0.25rem"; // The normal radius token strikes a balance between softness and structure.
176
- export const balRadiusLarge = "0.75rem"; // The large radius token makes a bold visual statement by significantly rounding the corners of elements.
177
- export const balRadiusRounded = "9999px"; // The rounded radius token embraces a curvier design language, introducing a high degree of softness and fluidity to your elements.
178
- export const balSpaceXxSmall = "0.25rem"; // Minimum space between two elements
179
- export const balSpaceXxSmallTablet = "0.25rem";
180
- export const balSpaceXxSmallDesktop = "0.25rem";
181
- export const balSpaceXSmall = "0.5rem"; // Space between text and icons or headings and content or clickable elements
182
- export const balSpaceXSmallTablet = "0.5rem";
183
- export const balSpaceXSmallDesktop = "0.5rem";
184
- export const balSpaceSmall = "0.75rem";
185
- export const balSpaceSmallTablet = "0.75rem";
186
- export const balSpaceSmallDesktop = "0.75rem";
187
- export const balSpaceNormal = "1rem"; // Space between large headings and content.
188
- export const balSpaceNormalTablet = "1rem";
189
- export const balSpaceNormalDesktop = "1rem";
190
- export const balSpaceMedium = "1.25rem"; // Inner padding of cards
191
- export const balSpaceMediumTablet = "1.25rem";
192
- export const balSpaceMediumDesktop = "1.5rem";
193
- export const balSpaceLarge = "1.5rem"; // Space between cards
194
- export const balSpaceLargeTablet = "1.5rem";
195
- export const balSpaceLargeDesktop = "2rem";
196
- export const balSpaceXLarge = "2rem"; // Space between heading and card
197
- export const balSpaceXLargeTablet = "2.5rem";
198
- export const balSpaceXLargeDesktop = "3rem";
199
- export const balSpaceXxLarge = "3rem";
200
- export const balSpaceXxLargeTablet = "3.5rem";
201
- export const balSpaceXxLargeDesktop = "4rem";
202
- export const balSpaceXxxLarge = "3.5rem"; // Footer bottom padding
203
- export const balSpaceXxxLargeTablet = "4.5rem";
204
- export const balSpaceXxxLargeDesktop = "6rem";
205
- export const balSpaceXxxxLarge = "4rem"; // Space between sections
206
- export const balSpaceXxxxLargeTablet = "6rem";
207
- export const balSpaceXxxxLargeDesktop = "8rem";
208
- export const balFontWeightBold = "700"; // Bold is used for headings, links and buttons.
209
- export const balFontWeightRegular = "400"; // Default width of paragraphs. Only available with the font BaloiseCreateText.
210
- export const balFontWeightLight = "300"; // Can be used for secondary headings. Only available with the font BaloiseCreateHeadline.
211
- export const balTextSizeXSmall = "0.75rem"; // Should only be used for helper texts or validation messages of a form control.
212
- export const balTextSizeXSmallTablet = "0.75rem";
213
- export const balTextSizeXSmallDesktop = "0.75rem";
214
- export const balTextSizeSmall = "0.875rem"; // Should only be used for label texts.
215
- export const balTextSizeSmallTablet = "0.875rem";
216
- export const balTextSizeSmallDesktop = "0.875rem";
217
- export const balTextSizeNormal = "1rem"; // Should only be used for label texts.
218
- export const balTextSizeNormalTablet = "1rem";
219
- export const balTextSizeNormalDesktop = "1rem";
220
- export const balTextSizeMedium = "1rem"; // Should only be used in a 2/3 grid column to improve readability.
221
- export const balTextSizeMediumTablet = "1.125rem";
222
- export const balTextSizeMediumDesktop = "1.125rem";
223
- export const balTextSizeLarge = "1.125rem"; // Should only be used for standard card titles and headings of level 4 or for lead text/paragraphs after a heading.
224
- export const balTextSizeLargeTablet = "1.25rem";
225
- export const balTextSizeLargeDesktop = "1.25rem";
226
- export const balTextSizeXLarge = "1.25rem"; // Should only be used for form titles, quick link navigation's and headings of level 3.
227
- export const balTextSizeXLargeTablet = "1.5rem";
228
- export const balTextSizeXLargeDesktop = "1.5rem";
229
- export const balTextSizeXxLarge = "1.5rem"; // Should only be used for content titles and headings of level 2.
230
- export const balTextSizeXxLargeTablet = "2rem";
231
- export const balTextSizeXxLargeDesktop = "2rem";
232
- export const balTextSizeXxxLarge = "1.75rem"; // Should only be used for stage titles and headings of level 1.
233
- export const balTextSizeXxxLargeTablet = "2.5rem";
234
- export const balTextSizeXxxLargeDesktop = "2.5rem";
235
- export const balTextSizeXxxxLarge = "2rem"; // Should only be uses to illustrate large stage areas.
236
- export const balTextSizeXxxxLargeTablet = "3rem";
237
- export const balTextSizeXxxxLargeDesktop = "3rem";
238
- export const balTextSizeXxxxxLarge = "3rem"; // Should only be uses to illustrate large stage areas.
239
- export const balTextSizeXxxxxLargeTablet = "5rem";
240
- export const balTextSizeXxxxxLargeDesktop = "5rem";
241
- export const balTextLineHeightTitle = "1.3"; // Standard line-height for the headings.
242
- export const balTextLineHeightText = "1.5"; // Default line height for all text elements.
243
- export const balZIndexDeep = "-999999"; // Deep z-index is used to stack something behind everything else.
244
- export const balZIndex = "1"; // The default z-index for components and elements inside components.
245
- export const balZIndexMasked = "100"; // Default z-index for masked interface elements.
246
- export const balZIndexMask = "200"; // Default z-index for masking interface elements.
247
- export const balZIndexSticky = "300"; // Default z-index for sticky interface elements.
248
- export const balZIndexNavigation = "400"; // Default z-index for navigation.
249
- export const balZIndexPopup = "1000"; // Default z-index for popups that stacks on top of all other elements.
250
- export const balZIndexModal = "1100"; // Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible.
251
- export const balZIndexToast = "1200"; // Default z-index for toast and snackbar messages.
252
- export const balZIndexTooltip = "1300"; // Default z-index for tooltips.
253
- export const balAnimationTransitionDuration = "300ms";
254
- export const balAnimationTransitionEasing = "cubic-bezier(0.25, 0.8, 0.5, 1)";
255
- export const balShadowSmall = "0px 2px 5px 1px rgba(0, 7, 57, 0.12)";
256
- export const balShadowNormal = "0 0 10px 0 rgba(0, 7, 57, 0.15)"; // Default shadow size to elevate an element.
257
- export const balShadowLarge = "0 0 30px 0 rgba(0, 7, 57, 0.15)"; // Large shadow are used for hover effects.
258
- export const balShadowHeader = "0 4px 4px 0 rgba(0, 7, 57, 0.15)"; // Shadow effect for a header bar
259
- export const balFontFamilyTitle = "BaloiseCreateHeadline, Arial, sans-serif";
260
- export const balFontFamilyText = "BaloiseCreateText, Arial, sans-serif";
261
- export const balOpacity0 = "0";
262
- export const balOpacity30 = "0.3";
263
- export const balOpacity40 = "0.4";
264
- export const balOpacity50 = "0.5";
265
- export const balOpacity60 = "0.6";
266
- export const balOpacity80 = "0.8";
267
- export const balOpacity100 = "1";
268
- export const balTextShadowNormal = "0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5)"; // Increases readability when used on a image background.
package/dist/tokens.js DELETED
@@ -1,270 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Mon, 18 May 2026 09:23:43 GMT
4
- */
5
-
6
- module.exports = {
7
- "balColorBackgroundPrimary": "#000d6e",
8
- "balColorBackgroundGreenLight": "#e9fbf7",
9
- "balColorBackgroundGreen": "#94e3d4",
10
- "balColorBackgroundPurpleLight": "#f9f3ff",
11
- "balColorBackgroundPurple": "#b8b2ff",
12
- "balColorBackgroundYellowLight": "#fff9e8",
13
- "balColorBackgroundYellow": "#fae052",
14
- "balColorBackgroundRedLight": "#ffeef1",
15
- "balColorBackgroundRed": "#ffaca6",
16
- "balColorBackgroundWhite": "#ffffff",
17
- "balColorBackgroundGreyLight": "#f6f6f6",
18
- "balColorBackgroundGrey": "#e8e8e8",
19
- "balColorBackgroundDisabled": "#e8e8e8",
20
- "balColorBackgroundInfo": "#60a0e0",
21
- "balColorBackgroundSuccess": "#5bab7a",
22
- "balColorBackgroundWarning": "#ffd25e",
23
- "balColorBackgroundDanger": "#f05d4d",
24
- "balColorBorder": "#e8e8e8",
25
- "balColorBorderPrimary": "#000d6e",
26
- "balColorBorderPrimaryLight": "#656ea8",
27
- "balColorBorderGreyLight": "#f6f6f6",
28
- "balColorBorderGrey": "#e8e8e8",
29
- "balColorBorderGreyDark": "#b6b6b6",
30
- "balColorBorderWhite": "#ffffff",
31
- "balColorBorderInfo": "#1c77d2",
32
- "balColorBorderSuccess": "#168741",
33
- "balColorBorderWarning": "#f99319",
34
- "balColorBorderDanger": "#ea1800",
35
- "balColorBorderInfoHovered": "#155ba3",
36
- "balColorBorderInfoPressed": "#0e457b",
37
- "balColorBorderPrimaryHovered": "#0014aa",
38
- "balColorBorderPrimaryPressed": "#000739",
39
- "balColorBorderSuccessHovered": "#116b34",
40
- "balColorBorderSuccessPressed": "#0b5227",
41
- "balColorBorderWarningHovered": "#f99319",
42
- "balColorBorderWarningPressed": "#c97612",
43
- "balColorBorderDangerHovered": "#cb1501",
44
- "balColorBorderDangerPressed": "#a01100",
45
- "balColorBorderGreenHovered": "#00b28f",
46
- "balColorBorderGreenPressed": "#1b5951",
47
- "balColorBorderPurpleHovered": "#9f52cc",
48
- "balColorBorderPurplePressed": "#6c2273",
49
- "balColorBorderRedHovered": "#d9304c",
50
- "balColorBorderRedPressed": "#99172d",
51
- "balColorBorderYellowHovered": "#fa9319",
52
- "balColorBorderYellowPressed": "#b24a00",
53
- "balColorBorderInverted": "#ffffff",
54
- "balColorBorderInvertedDisabled": "#656ea8",
55
- "balColorBorderInvertedPrimary": "#293485",
56
- "balColorBorderInvertedPrimaryHovered": "#a7d1fa",
57
- "balColorBorderInvertedPrimaryPressed": "#6672cc",
58
- "balColorPrimary": "#000d6e",
59
- "balColorGrey": "#e8e8e8",
60
- "balColorLightBlue": "#e5f1fe",
61
- "balColorPurple": "#b8b2ff",
62
- "balColorGreen": "#94e3d4",
63
- "balColorYellow": "#fae052",
64
- "balColorRed": "#ffaca6",
65
- "balColorInfo": "#60a0e0",
66
- "balColorSuccess": "#5bab7a",
67
- "balColorWarning": "#ffd25e",
68
- "balColorDanger": "#f05d4d",
69
- "balColorPrimary1": "#e5e7f0",
70
- "balColorPrimary2": "#b3b6d4",
71
- "balColorPrimary3": "#656ea8",
72
- "balColorPrimary4": "#293485",
73
- "balColorPrimary5": "#000d6e",
74
- "balColorPrimary6": "#000739",
75
- "balColorWhite": "#ffffff",
76
- "balColorGreen1": "#e9fbf7",
77
- "balColorGreen2": "#cbf2ec",
78
- "balColorGreen3": "#94e3d4",
79
- "balColorGreen4": "#21d9ac",
80
- "balColorGreen5": "#00b28f",
81
- "balColorGreen6": "#1b5951",
82
- "balColorPurple1": "#f9f3ff",
83
- "balColorPurple2": "#e1d9ff",
84
- "balColorPurple3": "#b8b2ff",
85
- "balColorPurple4": "#be82fa",
86
- "balColorPurple5": "#9f52cc",
87
- "balColorPurple6": "#6c2273",
88
- "balColorYellow1": "#fff9e8",
89
- "balColorYellow2": "#ffecbc",
90
- "balColorYellow3": "#fae052",
91
- "balColorYellow4": "#ffbe19",
92
- "balColorYellow5": "#fa9319",
93
- "balColorYellow6": "#b24a00",
94
- "balColorRed1": "#ffeef1",
95
- "balColorRed2": "#ffd7d7",
96
- "balColorRed3": "#ffaca6",
97
- "balColorRed4": "#ff596f",
98
- "balColorRed5": "#d9304c",
99
- "balColorRed6": "#99172d",
100
- "balColorGrey1": "#fafafa",
101
- "balColorGrey2": "#f6f6f6",
102
- "balColorGrey3": "#e8e8e8",
103
- "balColorGrey4": "#b6b6b6",
104
- "balColorGrey5": "#747474",
105
- "balColorGrey6": "#313131",
106
- "balColorBlack": "#000000",
107
- "balColorLightBlue1": "#e5f1fe",
108
- "balColorLightBlue2": "#a7d1fa",
109
- "balColorLightBlue3": "#56a7f5",
110
- "balColorLightBlue4": "#6672cc",
111
- "balColorLightBlue5": "#0014aa",
112
- "balColorLightBlue6": "#000a55",
113
- "balColorInfo1": "#e8f1fb",
114
- "balColorInfo2": "#a4c9ed",
115
- "balColorInfo3": "#60a0e0",
116
- "balColorInfo4": "#1c77d2",
117
- "balColorInfo5": "#155ba3",
118
- "balColorInfo6": "#0e457b",
119
- "balColorSuccess1": "#e8f3ec",
120
- "balColorSuccess2": "#a1cfb3",
121
- "balColorSuccess3": "#5bab7a",
122
- "balColorSuccess4": "#168741",
123
- "balColorSuccess5": "#116b34",
124
- "balColorSuccess6": "#0b5227",
125
- "balColorWarning1": "#fff9e8",
126
- "balColorWarning2": "#ffe5a3",
127
- "balColorWarning3": "#ffd25e",
128
- "balColorWarning4": "#ffbe19",
129
- "balColorWarning5": "#f99319",
130
- "balColorWarning6": "#c97612",
131
- "balColorDanger1": "#fce8e6",
132
- "balColorDanger2": "#f7a299",
133
- "balColorDanger3": "#f05d4d",
134
- "balColorDanger4": "#ea1800",
135
- "balColorDanger5": "#cb1501",
136
- "balColorDanger6": "#a01100",
137
- "balColorShadowFocusStart": "#ffffff",
138
- "balColorShadowFocusEnd": "#6c2273",
139
- "balColorShadowFocusInvertedStart": "#ffffff",
140
- "balColorShadowFocusInvertedEnd": "#fae052",
141
- "balColorTextPrimary": "#000d6e",
142
- "balColorTextPrimaryLight": "#656ea8",
143
- "balColorTextWhite": "#ffffff",
144
- "balColorTextGreyLight": "#b6b6b6",
145
- "balColorTextGrey": "#747474",
146
- "balColorTextGreyDark": "#313131",
147
- "balColorTextInfo": "#1c77d2",
148
- "balColorTextWarning": "#f99319",
149
- "balColorTextSuccess": "#168741",
150
- "balColorTextDanger": "#ea1800",
151
- "balColorTextBlack": "#000000",
152
- "balColorTextPrimaryHovered": "#0014aa",
153
- "balColorTextPrimaryPressed": "#000739",
154
- "balColorTextDangerHovered": "#cb1501",
155
- "balColorTextDangerPressed": "#a01100",
156
- "balColorTextInverted": "#ffffff",
157
- "balColorTextInvertedDisabled": "#656ea8",
158
- "balColorTextInvertedHovered": "#a7d1fa",
159
- "balColorTextInvertedPressed": "#60a0e0",
160
- "balBorderWidthSmall": "0.063rem",
161
- "balBorderWidthNormal": "0.125rem",
162
- "balBorderWidthLarge": "0.25rem",
163
- "balBreakpointTablet": "769px",
164
- "balBreakpointDesktop": "1024px",
165
- "balBreakpointHighDefinition": "1280px",
166
- "balBreakpointWidescreen": "1440px",
167
- "balBreakpointFullhd": "1920px",
168
- "balContainerSizeDetailPage": "744px",
169
- "balContainerSizeCompact": "896px",
170
- "balContainerSizeNormal": "1496px",
171
- "balContainerSizeFluid": "100%",
172
- "balContainerSpace": "1rem",
173
- "balContainerSpaceTablet": "2.5rem",
174
- "balContainerSpaceDesktop": "3rem",
175
- "balColumnGap": "1rem",
176
- "balRadiusNormal": "0.25rem",
177
- "balRadiusLarge": "0.75rem",
178
- "balRadiusRounded": "9999px",
179
- "balSpaceXxSmall": "0.25rem",
180
- "balSpaceXxSmallTablet": "0.25rem",
181
- "balSpaceXxSmallDesktop": "0.25rem",
182
- "balSpaceXSmall": "0.5rem",
183
- "balSpaceXSmallTablet": "0.5rem",
184
- "balSpaceXSmallDesktop": "0.5rem",
185
- "balSpaceSmall": "0.75rem",
186
- "balSpaceSmallTablet": "0.75rem",
187
- "balSpaceSmallDesktop": "0.75rem",
188
- "balSpaceNormal": "1rem",
189
- "balSpaceNormalTablet": "1rem",
190
- "balSpaceNormalDesktop": "1rem",
191
- "balSpaceMedium": "1.25rem",
192
- "balSpaceMediumTablet": "1.25rem",
193
- "balSpaceMediumDesktop": "1.5rem",
194
- "balSpaceLarge": "1.5rem",
195
- "balSpaceLargeTablet": "1.5rem",
196
- "balSpaceLargeDesktop": "2rem",
197
- "balSpaceXLarge": "2rem",
198
- "balSpaceXLargeTablet": "2.5rem",
199
- "balSpaceXLargeDesktop": "3rem",
200
- "balSpaceXxLarge": "3rem",
201
- "balSpaceXxLargeTablet": "3.5rem",
202
- "balSpaceXxLargeDesktop": "4rem",
203
- "balSpaceXxxLarge": "3.5rem",
204
- "balSpaceXxxLargeTablet": "4.5rem",
205
- "balSpaceXxxLargeDesktop": "6rem",
206
- "balSpaceXxxxLarge": "4rem",
207
- "balSpaceXxxxLargeTablet": "6rem",
208
- "balSpaceXxxxLargeDesktop": "8rem",
209
- "balFontWeightBold": "700",
210
- "balFontWeightRegular": "400",
211
- "balFontWeightLight": "300",
212
- "balTextSizeXSmall": "0.75rem",
213
- "balTextSizeXSmallTablet": "0.75rem",
214
- "balTextSizeXSmallDesktop": "0.75rem",
215
- "balTextSizeSmall": "0.875rem",
216
- "balTextSizeSmallTablet": "0.875rem",
217
- "balTextSizeSmallDesktop": "0.875rem",
218
- "balTextSizeNormal": "1rem",
219
- "balTextSizeNormalTablet": "1rem",
220
- "balTextSizeNormalDesktop": "1rem",
221
- "balTextSizeMedium": "1rem",
222
- "balTextSizeMediumTablet": "1.125rem",
223
- "balTextSizeMediumDesktop": "1.125rem",
224
- "balTextSizeLarge": "1.125rem",
225
- "balTextSizeLargeTablet": "1.25rem",
226
- "balTextSizeLargeDesktop": "1.25rem",
227
- "balTextSizeXLarge": "1.25rem",
228
- "balTextSizeXLargeTablet": "1.5rem",
229
- "balTextSizeXLargeDesktop": "1.5rem",
230
- "balTextSizeXxLarge": "1.5rem",
231
- "balTextSizeXxLargeTablet": "2rem",
232
- "balTextSizeXxLargeDesktop": "2rem",
233
- "balTextSizeXxxLarge": "1.75rem",
234
- "balTextSizeXxxLargeTablet": "2.5rem",
235
- "balTextSizeXxxLargeDesktop": "2.5rem",
236
- "balTextSizeXxxxLarge": "2rem",
237
- "balTextSizeXxxxLargeTablet": "3rem",
238
- "balTextSizeXxxxLargeDesktop": "3rem",
239
- "balTextSizeXxxxxLarge": "3rem",
240
- "balTextSizeXxxxxLargeTablet": "5rem",
241
- "balTextSizeXxxxxLargeDesktop": "5rem",
242
- "balTextLineHeightTitle": "1.3",
243
- "balTextLineHeightText": "1.5",
244
- "balZIndexDeep": "-999999",
245
- "balZIndex": "1",
246
- "balZIndexMasked": "100",
247
- "balZIndexMask": "200",
248
- "balZIndexSticky": "300",
249
- "balZIndexNavigation": "400",
250
- "balZIndexPopup": "1000",
251
- "balZIndexModal": "1100",
252
- "balZIndexToast": "1200",
253
- "balZIndexTooltip": "1300",
254
- "balAnimationTransitionDuration": "300ms",
255
- "balAnimationTransitionEasing": "cubic-bezier(0.25, 0.8, 0.5, 1)",
256
- "balShadowSmall": "0px 2px 5px 1px rgba(0, 7, 57, 0.12)",
257
- "balShadowNormal": "0 0 10px 0 rgba(0, 7, 57, 0.15)",
258
- "balShadowLarge": "0 0 30px 0 rgba(0, 7, 57, 0.15)",
259
- "balShadowHeader": "0 4px 4px 0 rgba(0, 7, 57, 0.15)",
260
- "balFontFamilyTitle": "BaloiseCreateHeadline, Arial, sans-serif",
261
- "balFontFamilyText": "BaloiseCreateText, Arial, sans-serif",
262
- "balOpacity0": "0",
263
- "balOpacity30": "0.3",
264
- "balOpacity40": "0.4",
265
- "balOpacity50": "0.5",
266
- "balOpacity60": "0.6",
267
- "balOpacity80": "0.8",
268
- "balOpacity100": "1",
269
- "balTextShadowNormal": "0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5)"
270
- };