@baloise/ds-tokens 19.9.4 → 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.
- package/LICENSE +2 -2
- package/README.md +2 -6
- package/dist/css/base.tokens.css +1417 -0
- package/dist/css/tcs.tokens.css +35 -0
- package/dist/docs/base.tokens.json +49885 -0
- package/dist/js/base.tokens.js +1236 -0
- package/dist/out-tsc/config.base.js +85 -0
- package/dist/out-tsc/config.brand.js +82 -0
- package/dist/out-tsc/formatter.js +236 -0
- package/dist/out-tsc/index.js +43 -0
- package/dist/out-tsc/transformers.js +150 -0
- package/dist/sass/base.tokens.scss +1192 -0
- package/dist/web/base.tokens.json +1191 -0
- package/package.json +13 -8
- package/dist/deprecated/tokens.css +0 -119
- package/dist/deprecated/tokens.css.scss +0 -119
- package/dist/deprecated/tokens.docs.json +0 -2764
- package/dist/deprecated/tokens.json +0 -114
- package/dist/deprecated/tokens.less +0 -116
- package/dist/deprecated/tokens.scss +0 -116
- package/dist/figma/color.json +0 -606
- package/dist/figma/size.json +0 -232
- package/dist/tokens.css +0 -270
- package/dist/tokens.css.scss +0 -270
- package/dist/tokens.docs.json +0 -5853
- package/dist/tokens.esm.js +0 -268
- package/dist/tokens.js +0 -270
- package/dist/tokens.json +0 -265
- package/dist/tokens.less +0 -267
- package/dist/tokens.scss +0 -267
- package/dist/types/tokens.d.ts +0 -350
package/dist/tokens.css.scss
DELETED
|
@@ -1,270 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Do not edit directly
|
|
3
|
-
* Generated on Sun, 26 Apr 2026 06:32:31 GMT
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
:root {
|
|
7
|
-
--bal-text-shadow-normal: 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. */
|
|
8
|
-
--bal-opacity-100: 1;
|
|
9
|
-
--bal-opacity-80: 0.8;
|
|
10
|
-
--bal-opacity-60: 0.6;
|
|
11
|
-
--bal-opacity-50: 0.5;
|
|
12
|
-
--bal-opacity-40: 0.4;
|
|
13
|
-
--bal-opacity-30: 0.3;
|
|
14
|
-
--bal-opacity-0: 0;
|
|
15
|
-
--bal-font-family-text: BaloiseCreateText, Arial, sans-serif;
|
|
16
|
-
--bal-font-family-title: BaloiseCreateHeadline, Arial, sans-serif;
|
|
17
|
-
--bal-shadow-header: 0 4px 4px 0 rgba(0, 7, 57, 0.15); /* Shadow effect for a header bar */
|
|
18
|
-
--bal-shadow-large: 0 0 30px 0 rgba(0, 7, 57, 0.15); /* Large shadow are used for hover effects. */
|
|
19
|
-
--bal-shadow-normal: 0 0 10px 0 rgba(0, 7, 57, 0.15); /* Default shadow size to elevate an element. */
|
|
20
|
-
--bal-shadow-small: 0px 2px 5px 1px rgba(0, 7, 57, 0.12);
|
|
21
|
-
--bal-animation-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1);
|
|
22
|
-
--bal-animation-transition-duration: 300ms;
|
|
23
|
-
--bal-z-index-tooltip: 1300; /* Default z-index for tooltips. */
|
|
24
|
-
--bal-z-index-toast: 1200; /* Default z-index for toast and snackbar messages. */
|
|
25
|
-
--bal-z-index-modal: 1100; /* Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible. */
|
|
26
|
-
--bal-z-index-popup: 1000; /* Default z-index for popups that stacks on top of all other elements. */
|
|
27
|
-
--bal-z-index-navigation: 400; /* Default z-index for navigation. */
|
|
28
|
-
--bal-z-index-sticky: 300; /* Default z-index for sticky interface elements. */
|
|
29
|
-
--bal-z-index-mask: 200; /* Default z-index for masking interface elements. */
|
|
30
|
-
--bal-z-index-masked: 100; /* Default z-index for masked interface elements. */
|
|
31
|
-
--bal-z-index: 1; /* The default z-index for components and elements inside components. */
|
|
32
|
-
--bal-z-index-deep: -999999; /* Deep z-index is used to stack something behind everything else. */
|
|
33
|
-
--bal-text-line-height-text: 1.5; /* Default line height for all text elements. */
|
|
34
|
-
--bal-text-line-height-title: 1.3; /* Standard line-height for the headings. */
|
|
35
|
-
--bal-text-size-xxxxx-large-tablet: 5rem;
|
|
36
|
-
--bal-text-size-xxxxx-large: 3rem; /* Should only be uses to illustrate large stage areas. */
|
|
37
|
-
--bal-text-size-xxxx-large-tablet: 3rem;
|
|
38
|
-
--bal-text-size-xxxx-large: 2rem; /* Should only be uses to illustrate large stage areas. */
|
|
39
|
-
--bal-text-size-xxx-large-tablet: 2.5rem;
|
|
40
|
-
--bal-text-size-xxx-large: 1.75rem; /* Should only be used for stage titles and headings of level 1. */
|
|
41
|
-
--bal-text-size-xx-large-tablet: 2rem;
|
|
42
|
-
--bal-text-size-xx-large: 1.5rem; /* Should only be used for content titles and headings of level 2. */
|
|
43
|
-
--bal-text-size-x-large-tablet: 1.5rem;
|
|
44
|
-
--bal-text-size-x-large: 1.25rem; /* Should only be used for form titles, quick link navigation's and headings of level 3. */
|
|
45
|
-
--bal-text-size-large-tablet: 1.25rem;
|
|
46
|
-
--bal-text-size-large: 1.125rem; /* Should only be used for standard card titles and headings of level 4 or for lead text/paragraphs after a heading. */
|
|
47
|
-
--bal-text-size-medium-tablet: 1.125rem;
|
|
48
|
-
--bal-text-size-medium: 1rem; /* Should only be used in a 2/3 grid column to improve readability. */
|
|
49
|
-
--bal-text-size-normal: 1rem; /* Should only be used for label texts. */
|
|
50
|
-
--bal-text-size-small: 0.875rem; /* Should only be used for label texts. */
|
|
51
|
-
--bal-text-size-x-small: 0.75rem; /* Should only be used for helper texts or validation messages of a form control. */
|
|
52
|
-
--bal-font-weight-light: 300; /* Can be used for secondary headings. Only available with the font BaloiseCreateHeadline. */
|
|
53
|
-
--bal-font-weight-regular: 400; /* Default width of paragraphs. Only available with the font BaloiseCreateText. */
|
|
54
|
-
--bal-font-weight-bold: 700; /* Bold is used for headings, links and buttons. */
|
|
55
|
-
--bal-space-xxxx-large-desktop: 8rem;
|
|
56
|
-
--bal-space-xxxx-large-tablet: 6rem;
|
|
57
|
-
--bal-space-xxxx-large: 4rem; /* Space between sections */
|
|
58
|
-
--bal-space-xxx-large-desktop: 6rem;
|
|
59
|
-
--bal-space-xxx-large-tablet: 4.5rem;
|
|
60
|
-
--bal-space-xxx-large: 3.5rem; /* Footer bottom padding */
|
|
61
|
-
--bal-space-xx-large-desktop: 4rem;
|
|
62
|
-
--bal-space-xx-large-tablet: 3.5rem;
|
|
63
|
-
--bal-space-xx-large: 3rem;
|
|
64
|
-
--bal-space-x-large-desktop: 3rem;
|
|
65
|
-
--bal-space-x-large-tablet: 2.5rem;
|
|
66
|
-
--bal-space-x-large: 2rem; /* Space between heading and card */
|
|
67
|
-
--bal-space-large-desktop: 2rem;
|
|
68
|
-
--bal-space-large: 1.5rem; /* Space between cards */
|
|
69
|
-
--bal-space-medium-desktop: 1.5rem;
|
|
70
|
-
--bal-space-medium: 1.25rem; /* Inner padding of cards */
|
|
71
|
-
--bal-space-normal: 1rem; /* Space between large headings and content. */
|
|
72
|
-
--bal-space-small: 0.75rem;
|
|
73
|
-
--bal-space-x-small: 0.5rem; /* Space between text and icons or headings and content or clickable elements */
|
|
74
|
-
--bal-space-xx-small: 0.25rem; /* Minimum space between two elements */
|
|
75
|
-
--bal-radius-rounded: 9999px; /* The rounded radius token embraces a curvier design language, introducing a high degree of softness and fluidity to your elements. */
|
|
76
|
-
--bal-radius-large: 0.75rem; /* The large radius token makes a bold visual statement by significantly rounding the corners of elements. */
|
|
77
|
-
--bal-radius-normal: 0.25rem; /* The normal radius token strikes a balance between softness and structure. */
|
|
78
|
-
--bal-container-size-fluid: 100%; /* The container for fullscreen application with a large table for example. */
|
|
79
|
-
--bal-container-size-normal: 1496px; /* The default container size is versatile and suitable for various applications and website pages. */
|
|
80
|
-
--bal-container-size-compact: 896px; /* Tailored container size designed for form wizard applications or pages. */
|
|
81
|
-
--bal-container-size-detail-page: 744px; /* Deprecated container size for the website */
|
|
82
|
-
--bal-breakpoint-fullhd: 1920px; /* Crafted for Full HD displays, this breakpoint strikes a balance between detail and performance. */
|
|
83
|
-
--bal-breakpoint-widescreen: 1440px; /* Tailored for widescreen monitors, this breakpoint offers a panoramic view that accommodates expansive content layouts. */
|
|
84
|
-
--bal-breakpoint-high-definition: 1280px; /* Designed for high-definition displays, this breakpoint elevates your interface to a level of visual richness and clarity. */
|
|
85
|
-
--bal-breakpoint-desktop: 1024px; /* Optimized for desktop screens, this breakpoint provides a spacious canvas for your design, allowing for more intricate layouts and detailed content presentation. */
|
|
86
|
-
--bal-breakpoint-tablet: 769px; /* Tailored for tablet devices, this breakpoint ensures a seamless and optimized user experience on medium-sized screens. */
|
|
87
|
-
--bal-border-width-large: 0.25rem; /* The large border size makes a bold statement, creating strong visual contrasts and emphasizing key elements within your interface. */
|
|
88
|
-
--bal-border-width-normal: 0.125rem; /* The normal border size strikes a harmonious balance, offering a versatile choice for defining boundaries within your design. */
|
|
89
|
-
--bal-border-width-small: 0.063rem; /* The small border size is crafted for subtle, refined delineation. */
|
|
90
|
-
--bal-color-danger-6: #a01100;
|
|
91
|
-
--bal-color-danger-5: #cb1501;
|
|
92
|
-
--bal-color-danger-4: #ea1800;
|
|
93
|
-
--bal-color-danger-3: #f05d4d;
|
|
94
|
-
--bal-color-danger-2: #f7a299;
|
|
95
|
-
--bal-color-danger-1: #fce8e6;
|
|
96
|
-
--bal-color-warning-6: #c97612;
|
|
97
|
-
--bal-color-warning-5: #f99319;
|
|
98
|
-
--bal-color-warning-4: #ffbe19;
|
|
99
|
-
--bal-color-warning-3: #ffd25e;
|
|
100
|
-
--bal-color-warning-2: #ffe5a3;
|
|
101
|
-
--bal-color-warning-1: #fff9e8;
|
|
102
|
-
--bal-color-success-6: #0b5227;
|
|
103
|
-
--bal-color-success-5: #116b34;
|
|
104
|
-
--bal-color-success-4: #168741;
|
|
105
|
-
--bal-color-success-3: #5bab7a;
|
|
106
|
-
--bal-color-success-2: #a1cfb3;
|
|
107
|
-
--bal-color-success-1: #e8f3ec;
|
|
108
|
-
--bal-color-info-6: #0e457b;
|
|
109
|
-
--bal-color-info-5: #155ba3;
|
|
110
|
-
--bal-color-info-4: #1c77d2;
|
|
111
|
-
--bal-color-info-3: #60a0e0;
|
|
112
|
-
--bal-color-info-2: #a4c9ed;
|
|
113
|
-
--bal-color-info-1: #e8f1fb;
|
|
114
|
-
--bal-color-light-blue-6: #000a55;
|
|
115
|
-
--bal-color-light-blue-5: #0014aa;
|
|
116
|
-
--bal-color-light-blue-4: #6672cc;
|
|
117
|
-
--bal-color-light-blue-3: #56a7f5;
|
|
118
|
-
--bal-color-light-blue-2: #a7d1fa;
|
|
119
|
-
--bal-color-light-blue-1: #e5f1fe;
|
|
120
|
-
--bal-color-black: #000000;
|
|
121
|
-
--bal-color-grey-6: #313131;
|
|
122
|
-
--bal-color-grey-5: #747474;
|
|
123
|
-
--bal-color-grey-4: #b6b6b6;
|
|
124
|
-
--bal-color-grey-3: #e8e8e8;
|
|
125
|
-
--bal-color-grey-2: #f6f6f6;
|
|
126
|
-
--bal-color-grey-1: #fafafa;
|
|
127
|
-
--bal-color-red-6: #99172d;
|
|
128
|
-
--bal-color-red-5: #d9304c;
|
|
129
|
-
--bal-color-red-4: #ff596f;
|
|
130
|
-
--bal-color-red-3: #ffaca6;
|
|
131
|
-
--bal-color-red-2: #ffd7d7;
|
|
132
|
-
--bal-color-red-1: #ffeef1;
|
|
133
|
-
--bal-color-yellow-6: #b24a00;
|
|
134
|
-
--bal-color-yellow-5: #fa9319;
|
|
135
|
-
--bal-color-yellow-4: #ffbe19;
|
|
136
|
-
--bal-color-yellow-3: #fae052;
|
|
137
|
-
--bal-color-yellow-2: #ffecbc;
|
|
138
|
-
--bal-color-yellow-1: #fff9e8;
|
|
139
|
-
--bal-color-purple-6: #6c2273;
|
|
140
|
-
--bal-color-purple-5: #9f52cc;
|
|
141
|
-
--bal-color-purple-4: #be82fa;
|
|
142
|
-
--bal-color-purple-3: #b8b2ff;
|
|
143
|
-
--bal-color-purple-2: #e1d9ff;
|
|
144
|
-
--bal-color-purple-1: #f9f3ff;
|
|
145
|
-
--bal-color-green-6: #1b5951;
|
|
146
|
-
--bal-color-green-5: #00b28f;
|
|
147
|
-
--bal-color-green-4: #21d9ac;
|
|
148
|
-
--bal-color-green-3: #94e3d4;
|
|
149
|
-
--bal-color-green-2: #cbf2ec;
|
|
150
|
-
--bal-color-green-1: #e9fbf7;
|
|
151
|
-
--bal-color-white: #ffffff;
|
|
152
|
-
--bal-color-primary-6: #000739;
|
|
153
|
-
--bal-color-primary-5: #000d6e;
|
|
154
|
-
--bal-color-primary-4: #293485;
|
|
155
|
-
--bal-color-primary-3: #656ea8;
|
|
156
|
-
--bal-color-primary-2: #b3b6d4;
|
|
157
|
-
--bal-color-primary-1: #e5e7f0;
|
|
158
|
-
--bal-text-size-xxxxx-large-desktop: var(--bal-text-size-xxxxx-large-tablet);
|
|
159
|
-
--bal-text-size-xxxx-large-desktop: var(--bal-text-size-xxxx-large-tablet);
|
|
160
|
-
--bal-text-size-xxx-large-desktop: var(--bal-text-size-xxx-large-tablet);
|
|
161
|
-
--bal-text-size-xx-large-desktop: var(--bal-text-size-xx-large-tablet);
|
|
162
|
-
--bal-text-size-x-large-desktop: var(--bal-text-size-x-large-tablet);
|
|
163
|
-
--bal-text-size-large-desktop: var(--bal-text-size-large-tablet);
|
|
164
|
-
--bal-text-size-medium-desktop: var(--bal-text-size-medium-tablet);
|
|
165
|
-
--bal-text-size-normal-desktop: var(--bal-text-size-normal);
|
|
166
|
-
--bal-text-size-normal-tablet: var(--bal-text-size-normal);
|
|
167
|
-
--bal-text-size-small-desktop: var(--bal-text-size-small);
|
|
168
|
-
--bal-text-size-small-tablet: var(--bal-text-size-small);
|
|
169
|
-
--bal-text-size-x-small-desktop: var(--bal-text-size-x-small);
|
|
170
|
-
--bal-text-size-x-small-tablet: var(--bal-text-size-x-small);
|
|
171
|
-
--bal-space-large-tablet: var(--bal-space-large);
|
|
172
|
-
--bal-space-medium-tablet: var(--bal-space-medium);
|
|
173
|
-
--bal-space-normal-desktop: var(--bal-space-normal);
|
|
174
|
-
--bal-space-normal-tablet: var(--bal-space-normal);
|
|
175
|
-
--bal-space-small-desktop: var(--bal-space-small);
|
|
176
|
-
--bal-space-small-tablet: var(--bal-space-small);
|
|
177
|
-
--bal-space-x-small-desktop: var(--bal-space-x-small);
|
|
178
|
-
--bal-space-x-small-tablet: var(--bal-space-x-small);
|
|
179
|
-
--bal-space-xx-small-desktop: var(--bal-space-xx-small);
|
|
180
|
-
--bal-space-xx-small-tablet: var(--bal-space-xx-small);
|
|
181
|
-
--bal-column-gap: var(--bal-space-normal);
|
|
182
|
-
--bal-container-space-desktop: var(--bal-space-x-large-desktop); /* Default space on desktops of a container to left and right side. */
|
|
183
|
-
--bal-container-space-tablet: var(--bal-space-x-large-tablet); /* Default space on tablets of a container to left and right side. */
|
|
184
|
-
--bal-container-space: var(--bal-space-normal); /* Default space of a container to left and right side. */
|
|
185
|
-
--bal-color-text-inverted-pressed: var(--bal-color-info-3);
|
|
186
|
-
--bal-color-text-inverted-hovered: var(--bal-color-light-blue-2);
|
|
187
|
-
--bal-color-text-inverted-disabled: var(--bal-color-primary-3);
|
|
188
|
-
--bal-color-text-inverted: var(--bal-color-white);
|
|
189
|
-
--bal-color-text-danger-pressed: var(--bal-color-danger-6);
|
|
190
|
-
--bal-color-text-danger-hovered: var(--bal-color-danger-5);
|
|
191
|
-
--bal-color-text-primary-pressed: var(--bal-color-primary-6);
|
|
192
|
-
--bal-color-text-primary-hovered: var(--bal-color-light-blue-5);
|
|
193
|
-
--bal-color-text-black: var(--bal-color-black);
|
|
194
|
-
--bal-color-text-danger: var(--bal-color-danger-4);
|
|
195
|
-
--bal-color-text-success: var(--bal-color-success-4);
|
|
196
|
-
--bal-color-text-warning: var(--bal-color-warning-5);
|
|
197
|
-
--bal-color-text-info: var(--bal-color-info-4);
|
|
198
|
-
--bal-color-text-grey-dark: var(--bal-color-grey-6); /* Font color for disabled elements */
|
|
199
|
-
--bal-color-text-grey: var(--bal-color-grey-5); /* Font color for placeholders */
|
|
200
|
-
--bal-color-text-grey-light: var(--bal-color-grey-4); /* Font color for disabled texts */
|
|
201
|
-
--bal-color-text-white: var(--bal-color-white); /* Main font color for all headings and paragraphs on a dark background. */
|
|
202
|
-
--bal-color-text-primary-light: var(--bal-color-primary-3); /* Secondary font color for help messages. */
|
|
203
|
-
--bal-color-text-primary: var(--bal-color-primary-5); /* Main font color for all headings and paragraphs. */
|
|
204
|
-
--bal-color-shadow-focus-inverted-end: var(--bal-color-yellow-3);
|
|
205
|
-
--bal-color-shadow-focus-inverted-start: var(--bal-color-white);
|
|
206
|
-
--bal-color-shadow-focus-end: var(--bal-color-purple-6);
|
|
207
|
-
--bal-color-shadow-focus-start: var(--bal-color-white);
|
|
208
|
-
--bal-color-danger: var(--bal-color-danger-3);
|
|
209
|
-
--bal-color-warning: var(--bal-color-warning-3);
|
|
210
|
-
--bal-color-success: var(--bal-color-success-3);
|
|
211
|
-
--bal-color-info: var(--bal-color-info-3);
|
|
212
|
-
--bal-color-red: var(--bal-color-red-3);
|
|
213
|
-
--bal-color-yellow: var(--bal-color-yellow-3);
|
|
214
|
-
--bal-color-green: var(--bal-color-green-3);
|
|
215
|
-
--bal-color-purple: var(--bal-color-purple-3);
|
|
216
|
-
--bal-color-light-blue: var(--bal-color-light-blue-1);
|
|
217
|
-
--bal-color-grey: var(--bal-color-grey-3);
|
|
218
|
-
--bal-color-primary: var(--bal-color-primary-5);
|
|
219
|
-
--bal-color-border-inverted-primary-pressed: var(--bal-color-light-blue-4);
|
|
220
|
-
--bal-color-border-inverted-primary-hovered: var(--bal-color-light-blue-2);
|
|
221
|
-
--bal-color-border-inverted-primary: var(--bal-color-primary-4);
|
|
222
|
-
--bal-color-border-inverted-disabled: var(--bal-color-primary-3); /* Disabled. */
|
|
223
|
-
--bal-color-border-inverted: var(--bal-color-white); /* Default color on dark backgrounds. */
|
|
224
|
-
--bal-color-border-yellow-pressed: var(--bal-color-yellow-6);
|
|
225
|
-
--bal-color-border-yellow-hovered: var(--bal-color-yellow-5);
|
|
226
|
-
--bal-color-border-red-pressed: var(--bal-color-red-6);
|
|
227
|
-
--bal-color-border-red-hovered: var(--bal-color-red-5);
|
|
228
|
-
--bal-color-border-purple-pressed: var(--bal-color-purple-6);
|
|
229
|
-
--bal-color-border-purple-hovered: var(--bal-color-purple-5);
|
|
230
|
-
--bal-color-border-green-pressed: var(--bal-color-green-6);
|
|
231
|
-
--bal-color-border-green-hovered: var(--bal-color-green-5);
|
|
232
|
-
--bal-color-border-danger-pressed: var(--bal-color-danger-6);
|
|
233
|
-
--bal-color-border-danger-hovered: var(--bal-color-danger-5);
|
|
234
|
-
--bal-color-border-warning-pressed: var(--bal-color-warning-6);
|
|
235
|
-
--bal-color-border-warning-hovered: var(--bal-color-warning-5);
|
|
236
|
-
--bal-color-border-success-pressed: var(--bal-color-success-6);
|
|
237
|
-
--bal-color-border-success-hovered: var(--bal-color-success-5);
|
|
238
|
-
--bal-color-border-primary-pressed: var(--bal-color-primary-6);
|
|
239
|
-
--bal-color-border-primary-hovered: var(--bal-color-light-blue-5);
|
|
240
|
-
--bal-color-border-info-pressed: var(--bal-color-info-6);
|
|
241
|
-
--bal-color-border-info-hovered: var(--bal-color-info-5);
|
|
242
|
-
--bal-color-border-danger: var(--bal-color-danger-4); /* Use for invalid state. */
|
|
243
|
-
--bal-color-border-warning: var(--bal-color-warning-5); /* Use for warning/hint state. */
|
|
244
|
-
--bal-color-border-success: var(--bal-color-success-4); /* Use for valid state. */
|
|
245
|
-
--bal-color-border-info: var(--bal-color-info-4);
|
|
246
|
-
--bal-color-border-white: var(--bal-color-white); /* Default color on dark backgrounds. */
|
|
247
|
-
--bal-color-border-grey-dark: var(--bal-color-grey-4); /* Use for disabled state. */
|
|
248
|
-
--bal-color-border-grey: var(--bal-color-grey-3); /* Default border color */
|
|
249
|
-
--bal-color-border-grey-light: var(--bal-color-grey-2); /* Default input color or can be use for a divider */
|
|
250
|
-
--bal-color-border-primary-light: var(--bal-color-primary-3); /* Disabled or secondary color on dark backgrounds */
|
|
251
|
-
--bal-color-border-primary: var(--bal-color-primary-5); /* Use for focused or selected state. */
|
|
252
|
-
--bal-color-border: var(--bal-color-grey-3); /* Default border color */
|
|
253
|
-
--bal-color-background-danger: var(--bal-color-danger-3);
|
|
254
|
-
--bal-color-background-warning: var(--bal-color-warning-3);
|
|
255
|
-
--bal-color-background-success: var(--bal-color-success-3);
|
|
256
|
-
--bal-color-background-info: var(--bal-color-info-3);
|
|
257
|
-
--bal-color-background-disabled: var(--bal-color-grey-3);
|
|
258
|
-
--bal-color-background-grey: var(--bal-color-grey-3);
|
|
259
|
-
--bal-color-background-grey-light: var(--bal-color-grey-2);
|
|
260
|
-
--bal-color-background-white: var(--bal-color-white);
|
|
261
|
-
--bal-color-background-red: var(--bal-color-red-3); /* Use this background for call to action sections */
|
|
262
|
-
--bal-color-background-red-light: var(--bal-color-red-1); /* Default brand background color to use */
|
|
263
|
-
--bal-color-background-yellow: var(--bal-color-yellow-3); /* Use this background for call to action sections */
|
|
264
|
-
--bal-color-background-yellow-light: var(--bal-color-yellow-1); /* Default brand background color to use */
|
|
265
|
-
--bal-color-background-purple: var(--bal-color-purple-3); /* Use this background for call to action sections */
|
|
266
|
-
--bal-color-background-purple-light: var(--bal-color-purple-1); /* Default brand background color to use */
|
|
267
|
-
--bal-color-background-green: var(--bal-color-green-3); /* Use this background for call to action sections */
|
|
268
|
-
--bal-color-background-green-light: var(--bal-color-green-1); /* Default brand background color to use */
|
|
269
|
-
--bal-color-background-primary: var(--bal-color-primary-5); /* Blue is our accent color and it is present on every touchpoint. Our logo, text, buttons and links are blue. */
|
|
270
|
-
}
|