@baloise/ds-tokens 20.0.0-next.7 → 20.0.0-next.8

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 (13) hide show
  1. package/dist/css/base.tokens.css +198 -198
  2. package/dist/docs/base.tokens.json +44096 -44115
  3. package/dist/js/base.tokens.js +212 -212
  4. package/dist/out-tsc/config.brand.js +1 -1
  5. package/dist/out-tsc/css-naming.js +26 -0
  6. package/dist/out-tsc/css-preview.js +8 -0
  7. package/dist/out-tsc/css-value.js +86 -0
  8. package/dist/out-tsc/formatter.js +3 -3
  9. package/dist/out-tsc/transformers.js +6 -79
  10. package/dist/sass/base.tokens.scss +187 -187
  11. package/dist/web/base.tokens.json +217 -217
  12. package/package.json +6 -1
  13. package/sbom.cdx.json +36584 -18456
package/dist/out-tsc/transformers.js CHANGED
@@ -1,3 +1,5 @@
1
+ import { colorValueToCss, numberValueToCssSize, roundNumberValue } from './css-value.js';
2
+ import { tokenNameToCssVar } from './css-naming.js';
1
3
  export const registerCustomTransformers = (sd) => {
2
4
  /**
3
5
  * Transform color tokens with hex and alpha properties to rgba() format
@@ -9,19 +11,7 @@ export const registerCustomTransformers = (sd) => {
9
11
  filter: token => token.$type === 'color',
10
12
  transform: token => {
11
13
  const value = token.$value ?? token.value;
12
- // Handle object values with hex and alpha properties
13
- if (typeof value === 'object' && value !== null && 'hex' in value && 'alpha' in value && value.alpha < 1) {
14
- const hex = value.hex.replace('#', '');
15
- const r = parseInt(hex.substring(0, 2), 16);
16
- const g = parseInt(hex.substring(2, 4), 16);
17
- const b = parseInt(hex.substring(4, 6), 16);
18
- const a = parseFloat(value.alpha);
19
- return `rgba(${r}, ${g}, ${b}, ${a})`;
20
- }
21
- if (value.hex) {
22
- return value.hex;
23
- }
24
- return value;
14
+ return colorValueToCss(value) ?? value;
25
15
  },
26
16
  });
27
17
  /**
@@ -48,23 +38,7 @@ export const registerCustomTransformers = (sd) => {
48
38
  type: `name`,
49
39
  transitive: true,
50
40
  name: `ds/css/name`,
51
- transform: token => {
52
- let tokenName = token.name;
53
- const isComponent = token.path.includes('🧩 Component');
54
- if (isComponent) {
55
- tokenName = tokenName.replace('-component', '');
56
- }
57
- // we use t-shirt sizes and need to make sure that 2xl becomes 2xl and not 2-xl
58
- // check if token names has number followed by xl or xs and replace it with numberxl without dash
59
- if (/-?([0-9]+)-(xl|xs)/.test(tokenName)) {
60
- tokenName = tokenName.replace(/-?([0-9]+)-(xl|xs)/, '-$1$2');
61
- }
62
- // check that no name has double dash and replace it with single dash
63
- if (tokenName.includes('--')) {
64
- tokenName = tokenName.replace(/--+/g, '-');
65
- }
66
- return tokenName;
67
- },
41
+ transform: (token, config) => tokenNameToCssVar(token.path, config.prefix ?? 'ds'),
68
42
  });
69
43
  /**
70
44
  * Transform token names for CSS usage
@@ -88,47 +62,7 @@ export const registerCustomTransformers = (sd) => {
88
62
  transitive: true,
89
63
  name: `ds/size/rem`,
90
64
  filter: token => token.$type === 'number',
91
- transform: token => {
92
- // const name = token.name
93
- const value = token.$value;
94
- // const originalValue = token.original.$value
95
- const path = token.path;
96
- // const isReference =
97
- // typeof originalValue === 'string' && originalValue.startsWith('{') && originalValue.endsWith('}')
98
- if (`${value}`.endsWith('px')) {
99
- return value;
100
- }
101
- if (`${value}`.endsWith('rem')) {
102
- return value;
103
- }
104
- // Number only values with no unit
105
- const tokenToBeNumberOnly = [
106
- 'LineHeight',
107
- 'FontWeight',
108
- 'Opacity',
109
- '🌫️ Opacity',
110
- 'ZIndex',
111
- 'Z-Index',
112
- '🗂️ ZIndex',
113
- '🗂️ Z-Index',
114
- 'Interaction',
115
- '✨ Interaction',
116
- ];
117
- if (tokenToBeNumberOnly.some(ignored => path.includes(ignored))) {
118
- return Math.round(value * 10) / 10;
119
- }
120
- // Number only values with no unit
121
- const tokenToBeNumberPixel = ['📐 Breakpoint', 'Breakpoint', '🗃️ Container', 'Container'];
122
- if (tokenToBeNumberPixel.some(ignored => path.includes(ignored))) {
123
- return value + 'px';
124
- }
125
- // Extra case for rounded radius
126
- if (value === 9999) {
127
- return value + 'px';
128
- }
129
- // turn pixel into rem
130
- return value / 16 + 'rem';
131
- },
65
+ transform: token => numberValueToCssSize(token.$value, token.path),
132
66
  });
133
67
  sd.registerTransform({
134
68
  type: `value`,
@@ -139,14 +73,7 @@ export const registerCustomTransformers = (sd) => {
139
73
  const value = token.$value ?? token.value;
140
74
  const name = token.name;
141
75
  const tokenName = Array.isArray(name) ? name.join('-') : String(name ?? '');
142
- // if line-height round the value to 1 decimal place
143
- if (tokenName.includes('line-height') ||
144
- tokenName.includes('opacity') ||
145
- tokenName.includes('LineHeight') ||
146
- tokenName.includes('Opacity')) {
147
- return Math.round(value * 10) / 10;
148
- }
149
- return value;
76
+ return roundNumberValue(value, tokenName);
150
77
  },
151
78
  });
152
79
  };
package/dist/sass/base.tokens.scss CHANGED
@@ -1,6 +1,112 @@
1
1
 
2
2
  // Do not edit directly, this file was auto-generated.
3
3
 
4
+ $ds-alias-interaction-focus-size-inner: 2;
5
+ $ds-alias-interaction-focus-size-outer: 5;
6
+ $ds-alias-interaction-focus-size-inner-inset: 3;
7
+ $ds-alias-interaction-focus-size-outer-inset: 5;
8
+ $ds-backdrop-filter: blur(4px);
9
+ $ds-footer-space-gap-column: 0.5rem 1rem;
10
+ $ds-footer-space-link-gap: 0.5rem 1.5rem;
11
+ $ds-footer-space-padding-base: 2rem;
12
+ $ds-heading-color-base: inherit;
13
+ $ds-card-color-base-text: inherit;
14
+ $ds-card-color-white-text: inherit;
15
+ $ds-card-color-info-text: inherit;
16
+ $ds-card-color-success-text: inherit;
17
+ $ds-card-color-warning-text: inherit;
18
+ $ds-card-color-danger-text: inherit;
19
+ $ds-card-color-grey-light-text: inherit;
20
+ $ds-card-color-grey-text: inherit;
21
+ $ds-card-color-red-lighter-text: inherit;
22
+ $ds-card-color-red-light-text: inherit;
23
+ $ds-card-color-red-text: inherit;
24
+ $ds-card-color-purple-lighter-text: inherit;
25
+ $ds-card-color-purple-light-text: inherit;
26
+ $ds-card-color-purple-text: inherit;
27
+ $ds-card-color-green-lighter-text: inherit;
28
+ $ds-card-color-green-light-text: inherit;
29
+ $ds-card-color-green-text: inherit;
30
+ $ds-card-color-yellow-lighter-text: inherit;
31
+ $ds-card-color-yellow-light-text: inherit;
32
+ $ds-card-color-yellow-text: inherit;
33
+ $ds-close-color-background-hover: rgba(0, 7, 57, 0.1);
34
+ $ds-close-color-background-active: rgba(0, 7, 57, 0.2);
35
+ $ds-close-inverted-color-background-hover: rgba(255, 255, 255, 0.3);
36
+ $ds-close-inverted-color-background-active: rgba(255, 255, 255, 0.5);
37
+ $ds-notification-color-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
38
+ $ds-notification-color-info-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
39
+ $ds-notification-color-success-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
40
+ $ds-notification-color-warning-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
41
+ $ds-notification-color-danger-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
42
+ $ds-notification-color-outline-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
43
+ $ds-notification-color-outline-purple-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
44
+ $ds-notification-color-outline-green-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
45
+ $ds-notification-color-outline-yellow-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
46
+ $ds-notification-color-outline-red-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
47
+ $ds-link-family: inherit;
48
+ $ds-navbar-base-layout-height: 5rem;
49
+ $ds-navbar-base-hamburger-transition-duration: 0.2s;
50
+ $ds-navbar-base-sidebar-max-width: 25rem;
51
+ $ds-navbar-base-sidebar-slide-duration: 300ms;
52
+ $ds-navbar-base-sidebar-backdrop-color: #000000;
53
+ $ds-navbar-base-sidebar-panel-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
54
+ $ds-navbar-base-menu-item-transition-duration: 0.2s;
55
+ $ds-segment-item-icon-gap: 0.375rem;
56
+ $ds-accordion-summary-color-base: inherit;
57
+ $ds-tabs-panel-padding: 1rem 0;
58
+ $ds-tabs-tab-padding: 0.25rem 1rem;
59
+ $ds-tab-panel-padding: 1rem 0;
60
+ $ds-steps-circle-size: 2rem;
61
+ $ds-steps-circle-size-sm: 1.5rem;
62
+ $ds-steps-panel-padding: 1rem 0;
63
+ $ds-step-panel-padding: 1rem 0;
64
+ $ds-carousel-dot-size: 8px;
65
+ $ds-carousel-dot-size-active: 10px;
66
+ $ds-table-cell-padding: 0.5em 0.75em;
67
+ $ds-table-cell-border-width: 0 0 2px;
68
+ $ds-table-head-cell-border-width: 0 0 1px;
69
+ $ds-table-foot-cell-border-width: 0 0 0;
70
+ $ds-popup-min-width: 16rem;
71
+ $ds-drawer-max-height: 85dvh;
72
+ $ds-global-size-border-0: 0rem;
73
+ $ds-global-size-border-1: 0.0625rem;
74
+ $ds-global-size-border-2: 0.125rem;
75
+ $ds-global-size-border-3: 0.25rem;
76
+ $ds-global-size-radius-0: 0rem;
77
+ $ds-global-size-radius-1: 0.25rem;
78
+ $ds-global-size-radius-2: 0.75rem;
79
+ $ds-global-size-radius-3: 9999px;
80
+ $ds-global-size-breakpoint-1: 769px;
81
+ $ds-global-size-breakpoint-2: 1024px;
82
+ $ds-global-size-breakpoint-3: 1280px;
83
+ $ds-global-size-breakpoint-4: 1440px;
84
+ $ds-global-size-breakpoint-5: 1920px;
85
+ $ds-global-size-container-1: 320px;
86
+ $ds-global-size-container-2: 480px;
87
+ $ds-global-size-container-3: 640px;
88
+ $ds-global-size-container-4: 896px;
89
+ $ds-global-size-container-5: 1496px;
90
+ $ds-global-size-container-full: 100%;
91
+ $ds-global-size-space-0: 0rem;
92
+ $ds-global-size-space-1: 0.0625rem;
93
+ $ds-global-size-space-2: 0.125rem;
94
+ $ds-global-size-space-4: 0.25rem;
95
+ $ds-global-size-space-8: 0.5rem;
96
+ $ds-global-size-space-12: 0.75rem;
97
+ $ds-global-size-space-14: 0.875rem;
98
+ $ds-global-size-space-16: 1rem;
99
+ $ds-global-size-space-20: 1.25rem;
100
+ $ds-global-size-space-24: 1.5rem;
101
+ $ds-global-size-space-32: 2rem;
102
+ $ds-global-size-space-40: 2.5rem;
103
+ $ds-global-size-space-48: 3rem;
104
+ $ds-global-size-space-56: 3.5rem;
105
+ $ds-global-size-space-64: 4rem;
106
+ $ds-global-size-space-72: 4.5rem;
107
+ $ds-global-size-space-96: 6rem;
108
+ $ds-global-size-space-128: 8rem;
109
+ $ds-global-size-space-auto: auto;
4
110
  $ds-global-color-white: #ffffff;
5
111
  $ds-global-color-black: #000000;
6
112
  $ds-global-color-neutral: rgba(255, 255, 255, 0);
@@ -71,27 +177,6 @@ $ds-global-color-primary-3: #656ea8;
71
177
  $ds-global-color-primary-4: #293485;
72
178
  $ds-global-color-primary-5: #000d6e;
73
179
  $ds-global-color-primary-6: #000739;
74
- $ds-global-elevation-shadow-0: none;
75
- $ds-global-elevation-shadow-1: 0 2px 5px 1px rgba(0, 7, 57, 0.12);
76
- $ds-global-elevation-shadow-2: 0 4px 4px 0 rgba(0, 7, 57, 0.15);
77
- $ds-global-elevation-shadow-3: 0 0 10px 0 rgba(0, 7, 57, 0.15);
78
- $ds-global-elevation-shadow-4: 0 0 30px 0 rgba(0, 7, 57, 0.15);
79
- $ds-global-elevation-opacity-0: 0;
80
- $ds-global-elevation-opacity-30: 0.3;
81
- $ds-global-elevation-opacity-40: 0.4;
82
- $ds-global-elevation-opacity-50: 0.5;
83
- $ds-global-elevation-opacity-60: 0.6;
84
- $ds-global-elevation-opacity-80: 0.8;
85
- $ds-global-elevation-opacity-100: 1;
86
- $ds-global-elevation-z-index-100: 100;
87
- $ds-global-elevation-z-index-200: 200;
88
- $ds-global-elevation-z-index-300: 300;
89
- $ds-global-elevation-z-index-400: 400;
90
- $ds-global-elevation-z-index-1000: 1000;
91
- $ds-global-elevation-z-index-1100: 1100;
92
- $ds-global-elevation-z-index-1200: 1200;
93
- $ds-global-elevation-z-index-1300: 1300;
94
- $ds-global-elevation-z-index-behind-all: -999999;
95
180
  $ds-global-font-shadow-0: none;
96
181
  $ds-global-font-shadow-1: 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);
97
182
  $ds-global-font-size-0: 0rem;
@@ -116,112 +201,27 @@ $ds-global-font-line-height-1: 1;
116
201
  $ds-global-font-line-height-2: 1.3;
117
202
  $ds-global-font-line-height-3: 1.5;
118
203
  $ds-global-font-line-height-4: 2;
119
- $ds-global-size-border-0: 0rem;
120
- $ds-global-size-border-1: 0.0625rem;
121
- $ds-global-size-border-2: 0.125rem;
122
- $ds-global-size-border-3: 0.25rem;
123
- $ds-global-size-radius-0: 0rem;
124
- $ds-global-size-radius-1: 0.25rem;
125
- $ds-global-size-radius-2: 0.75rem;
126
- $ds-global-size-radius-3: 9999px;
127
- $ds-global-size-breakpoint-1: 769px;
128
- $ds-global-size-breakpoint-2: 1024px;
129
- $ds-global-size-breakpoint-3: 1280px;
130
- $ds-global-size-breakpoint-4: 1440px;
131
- $ds-global-size-breakpoint-5: 1920px;
132
- $ds-global-size-container-1: 320px;
133
- $ds-global-size-container-2: 480px;
134
- $ds-global-size-container-3: 640px;
135
- $ds-global-size-container-4: 896px;
136
- $ds-global-size-container-5: 1496px;
137
- $ds-global-size-container-full: 100%;
138
- $ds-global-size-space-0: 0rem;
139
- $ds-global-size-space-1: 0.0625rem;
140
- $ds-global-size-space-2: 0.125rem;
141
- $ds-global-size-space-4: 0.25rem;
142
- $ds-global-size-space-8: 0.5rem;
143
- $ds-global-size-space-12: 0.75rem;
144
- $ds-global-size-space-14: 0.875rem;
145
- $ds-global-size-space-16: 1rem;
146
- $ds-global-size-space-20: 1.25rem;
147
- $ds-global-size-space-24: 1.5rem;
148
- $ds-global-size-space-32: 2rem;
149
- $ds-global-size-space-40: 2.5rem;
150
- $ds-global-size-space-48: 3rem;
151
- $ds-global-size-space-56: 3.5rem;
152
- $ds-global-size-space-64: 4rem;
153
- $ds-global-size-space-72: 4.5rem;
154
- $ds-global-size-space-96: 6rem;
155
- $ds-global-size-space-128: 8rem;
156
- $ds-global-size-space-auto: auto;
157
- $ds-alias-interaction-focus-size-inner: 2;
158
- $ds-alias-interaction-focus-size-outer: 5;
159
- $ds-alias-interaction-focus-size-inner-inset: 3;
160
- $ds-alias-interaction-focus-size-outer-inset: 5;
161
- $ds-backdrop-filter: blur(4px);
162
- $ds-footer-space-gap-column: 0.5rem 1rem;
163
- $ds-footer-space-link-gap: 0.5rem 1.5rem;
164
- $ds-footer-space-padding-base: 2rem;
165
- $ds-heading-color-base: inherit;
166
- $ds-card-color-base-text: inherit;
167
- $ds-card-color-white-text: inherit;
168
- $ds-card-color-info-text: inherit;
169
- $ds-card-color-success-text: inherit;
170
- $ds-card-color-warning-text: inherit;
171
- $ds-card-color-danger-text: inherit;
172
- $ds-card-color-grey-light-text: inherit;
173
- $ds-card-color-grey-text: inherit;
174
- $ds-card-color-red-lighter-text: inherit;
175
- $ds-card-color-red-light-text: inherit;
176
- $ds-card-color-red-text: inherit;
177
- $ds-card-color-purple-lighter-text: inherit;
178
- $ds-card-color-purple-light-text: inherit;
179
- $ds-card-color-purple-text: inherit;
180
- $ds-card-color-green-lighter-text: inherit;
181
- $ds-card-color-green-light-text: inherit;
182
- $ds-card-color-green-text: inherit;
183
- $ds-card-color-yellow-lighter-text: inherit;
184
- $ds-card-color-yellow-light-text: inherit;
185
- $ds-card-color-yellow-text: inherit;
186
- $ds-close-color-background-hover: rgba(0, 7, 57, 0.1);
187
- $ds-close-color-background-active: rgba(0, 7, 57, 0.3);
188
- $ds-close-color-background-inverted-hover: rgba(255, 255, 255, 0.3);
189
- $ds-close-color-background-inverted-active: rgba(255, 255, 255, 0.5);
190
- $ds-notification-color-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
191
- $ds-notification-color-info-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
192
- $ds-notification-color-success-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
193
- $ds-notification-color-warning-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
194
- $ds-notification-color-danger-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
195
- $ds-notification-color-outline-base-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z" fill="black"/></svg>');
196
- $ds-notification-color-outline-purple-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z" fill="black"/></svg>');
197
- $ds-notification-color-outline-green-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z" fill="black"/></svg>');
198
- $ds-notification-color-outline-yellow-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
199
- $ds-notification-color-outline-red-icon: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><path d="M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z" fill="black"/></svg>');
200
- $ds-link-family: inherit;
201
- $ds-navbar-base-layout-height: 5rem;
202
- $ds-navbar-base-hamburger-transition-duration: 0.2s;
203
- $ds-navbar-base-sidebar-max-width: 25rem;
204
- $ds-navbar-base-sidebar-slide-duration: 300ms;
205
- $ds-navbar-base-sidebar-backdrop-color: #000000;
206
- $ds-navbar-base-sidebar-panel-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
207
- $ds-navbar-base-menu-item-transition-duration: 0.2s;
208
- $ds-segment-item-icon-gap: 0.375rem;
209
- $ds-accordion-summary-color-base: inherit;
210
- $ds-tabs-panel-padding: 1rem 0;
211
- $ds-tabs-tab-padding: 0.25rem 1rem;
212
- $ds-tab-panel-padding: 1rem 0;
213
- $ds-steps-circle-size: 2rem;
214
- $ds-steps-circle-size-sm: 1.5rem;
215
- $ds-steps-panel-padding: 1rem 0;
216
- $ds-step-panel-padding: 1rem 0;
217
- $ds-carousel-dot-size: 8px;
218
- $ds-carousel-dot-size-active: 10px;
219
- $ds-table-cell-padding: 0.5em 0.75em;
220
- $ds-table-cell-border-width: 0 0 2px;
221
- $ds-table-head-cell-border-width: 0 0 1px;
222
- $ds-table-foot-cell-border-width: 0 0 0;
223
- $ds-popup-min-width: 16rem;
224
- $ds-drawer-max-height: 85dvh;
204
+ $ds-global-elevation-shadow-0: none;
205
+ $ds-global-elevation-shadow-1: 0 2px 5px 1px rgba(0, 7, 57, 0.12);
206
+ $ds-global-elevation-shadow-2: 0 4px 4px 0 rgba(0, 7, 57, 0.15);
207
+ $ds-global-elevation-shadow-3: 0 0 10px 0 rgba(0, 7, 57, 0.15);
208
+ $ds-global-elevation-shadow-4: 0 0 30px 0 rgba(0, 7, 57, 0.15);
209
+ $ds-global-elevation-z-index-100: 100;
210
+ $ds-global-elevation-z-index-200: 200;
211
+ $ds-global-elevation-z-index-300: 300;
212
+ $ds-global-elevation-z-index-400: 400;
213
+ $ds-global-elevation-z-index-1000: 1000;
214
+ $ds-global-elevation-z-index-1100: 1100;
215
+ $ds-global-elevation-z-index-1200: 1200;
216
+ $ds-global-elevation-z-index-1300: 1300;
217
+ $ds-global-elevation-z-index-behind-all: -999999;
218
+ $ds-global-elevation-opacity-0: 0;
219
+ $ds-global-elevation-opacity-30: 0.3;
220
+ $ds-global-elevation-opacity-40: 0.4;
221
+ $ds-global-elevation-opacity-50: 0.5;
222
+ $ds-global-elevation-opacity-60: 0.6;
223
+ $ds-global-elevation-opacity-80: 0.8;
224
+ $ds-global-elevation-opacity-100: 1;
225
225
  $ds-alias-background-color-white: $ds-global-color-white;
226
226
  $ds-alias-background-color-selected: $ds-global-color-primary-2;
227
227
  $ds-alias-background-color-hover: $ds-global-color-grey-0;
@@ -512,8 +512,8 @@ $ds-navbar-light-button-color-background-active: $ds-global-color-sky-1;
512
512
  $ds-navbar-light-button-color-border-base: $ds-global-color-grey-1;
513
513
  $ds-navbar-light-button-color-border-hover: $ds-global-color-sky-1;
514
514
  $ds-navbar-light-button-color-border-active: $ds-global-color-sky-1;
515
- $ds-snackbar-default-color-progress-bar-base: $ds-global-color-primary-5;
516
- $ds-snackbar-default-color-progress-bg-base: $ds-global-color-primary-2;
515
+ $ds-snackbar-primary-color-progress-bar-base: $ds-global-color-primary-5;
516
+ $ds-snackbar-primary-color-progress-bg-base: $ds-global-color-primary-2;
517
517
  $ds-snackbar-success-color-progress-bar-base: $ds-global-color-success-6;
518
518
  $ds-snackbar-success-color-progress-bg-base: $ds-global-color-success-3;
519
519
  $ds-snackbar-info-color-progress-bar-base: $ds-global-color-info-6;
@@ -522,8 +522,8 @@ $ds-snackbar-warning-color-progress-bar-base: $ds-global-color-warning-6;
522
522
  $ds-snackbar-warning-color-progress-bg-base: $ds-global-color-warning-3;
523
523
  $ds-snackbar-danger-color-progress-bar-base: $ds-global-color-danger-6;
524
524
  $ds-snackbar-danger-color-progress-bg-base: $ds-global-color-danger-3;
525
- $ds-toast-default-color-progress-bar-base: $ds-global-color-primary-5;
526
- $ds-toast-default-color-progress-bg-base: $ds-global-color-primary-2;
525
+ $ds-toast-primary-color-progress-bar-base: $ds-global-color-primary-5;
526
+ $ds-toast-primary-color-progress-bg-base: $ds-global-color-primary-2;
527
527
  $ds-toast-success-color-progress-bar-base: $ds-global-color-success-6;
528
528
  $ds-toast-success-color-progress-bg-base: $ds-global-color-success-3;
529
529
  $ds-toast-info-color-progress-bar-base: $ds-global-color-info-6;
@@ -594,54 +594,54 @@ $ds-heading-5-space: $ds-alias-space-xs-mobile;
594
594
  $ds-heading-5-size-mobile: $ds-alias-text-size-base-mobile;
595
595
  $ds-heading-5-size-tablet: $ds-alias-text-size-base-tablet;
596
596
  $ds-heading-5-size-desktop: $ds-alias-text-size-base-desktop;
597
- $ds-heading-family: $ds-alias-text-family-heading;
598
- $ds-heading-weight: $ds-alias-text-weight-bold;
597
+ $ds-heading-font-family: $ds-alias-text-family-heading;
598
+ $ds-heading-font-weight: $ds-alias-text-weight-bold;
599
599
  $ds-heading-line-height: $ds-alias-text-line-height-heading;
600
- $ds-heading-color-primary: $ds-alias-text-color-primary;
601
- $ds-heading-color-white: $ds-alias-text-color-white;
602
- $ds-heading-color-info: $ds-alias-text-color-info;
603
- $ds-heading-color-success: $ds-alias-text-color-success;
604
- $ds-heading-color-warning: $ds-alias-text-color-warning;
605
- $ds-heading-color-danger: $ds-alias-text-color-danger;
606
- $ds-heading-display1-space: $ds-alias-space-base-mobile;
607
- $ds-heading-display1-size-mobile: $ds-alias-text-size-5xl-mobile;
608
- $ds-heading-display1-size-tablet: $ds-alias-text-size-5xl-tablet;
609
- $ds-heading-display1-size-desktop: $ds-alias-text-size-5xl-desktop;
610
- $ds-heading-display2-space: $ds-alias-space-base-mobile;
611
- $ds-heading-display2-size-mobile: $ds-alias-text-size-4xl-mobile;
612
- $ds-heading-display2-size-tablet: $ds-alias-text-size-4xl-tablet;
613
- $ds-heading-display2-size-desktop: $ds-alias-text-size-4xl-desktop;
614
- $ds-heading-subtitle-family: $ds-alias-text-family-heading;
600
+ $ds-heading-primary-color-base: $ds-alias-text-color-primary;
601
+ $ds-heading-white-color-base: $ds-alias-text-color-white;
602
+ $ds-heading-info-color-base: $ds-alias-text-color-info;
603
+ $ds-heading-success-color-base: $ds-alias-text-color-success;
604
+ $ds-heading-warning-color-base: $ds-alias-text-color-warning;
605
+ $ds-heading-danger-color-base: $ds-alias-text-color-danger;
606
+ $ds-heading-display-1-space: $ds-alias-space-base-mobile;
607
+ $ds-heading-display-1-size-mobile: $ds-alias-text-size-5xl-mobile;
608
+ $ds-heading-display-1-size-tablet: $ds-alias-text-size-5xl-tablet;
609
+ $ds-heading-display-1-size-desktop: $ds-alias-text-size-5xl-desktop;
610
+ $ds-heading-display-2-space: $ds-alias-space-base-mobile;
611
+ $ds-heading-display-2-size-mobile: $ds-alias-text-size-4xl-mobile;
612
+ $ds-heading-display-2-size-tablet: $ds-alias-text-size-4xl-tablet;
613
+ $ds-heading-display-2-size-desktop: $ds-alias-text-size-4xl-desktop;
614
+ $ds-heading-subtitle-font-family: $ds-alias-text-family-heading;
615
615
  $ds-heading-subtitle-line-height: $ds-alias-text-line-height-heading;
616
- $ds-heading-subtitle-weight: $ds-alias-text-weight-light;
617
- $ds-badge-text-family: $ds-alias-text-family-heading;
618
- $ds-badge-text-weight: $ds-alias-text-weight-bold;
619
- $ds-badge-text-size-sm: $ds-alias-text-size-none-mobile;
620
- $ds-badge-text-size-base: $ds-alias-text-size-xs-mobile;
621
- $ds-badge-text-size-lg: $ds-alias-text-size-base-mobile;
616
+ $ds-heading-subtitle-font-weight: $ds-alias-text-weight-light;
622
617
  $ds-badge-size-sm: $ds-alias-space-sm-mobile;
623
618
  $ds-badge-size-base: $ds-alias-space-lg-mobile;
624
619
  $ds-badge-size-lg: $ds-alias-space-xl-mobile;
625
- $ds-badge-color-base-text: $ds-alias-text-color-primary;
626
- $ds-badge-color-base-background: $ds-alias-background-color-red;
627
- $ds-badge-color-info-text: $ds-alias-text-color-primary;
628
- $ds-badge-color-info-background: $ds-alias-background-color-purple;
629
- $ds-badge-color-success-text: $ds-alias-text-color-primary;
630
- $ds-badge-color-success-background: $ds-alias-background-color-green;
631
- $ds-badge-color-warning-text: $ds-alias-text-color-primary;
632
- $ds-badge-color-warning-background: $ds-alias-background-color-yellow-light;
633
- $ds-badge-color-danger-text: $ds-alias-text-color-primary;
634
- $ds-badge-color-danger-background: $ds-alias-background-color-red;
635
- $ds-badge-color-red-text: $ds-alias-text-color-primary;
636
- $ds-badge-color-red-background: $ds-alias-background-color-red-light;
637
- $ds-badge-color-purple-text: $ds-alias-text-color-primary;
638
- $ds-badge-color-purple-background: $ds-alias-background-color-purple-light;
639
- $ds-badge-color-green-text: $ds-alias-text-color-primary;
640
- $ds-badge-color-green-background: $ds-alias-background-color-green-light;
641
- $ds-badge-color-yellow-text: $ds-alias-text-color-primary;
642
- $ds-badge-color-yellow-background: $ds-alias-background-color-yellow-lighter;
643
- $ds-badge-color-grey-text: $ds-alias-text-color-grey;
644
- $ds-badge-color-grey-background: $ds-alias-background-color-grey-light;
620
+ $ds-badge-font-family: $ds-alias-text-family-heading;
621
+ $ds-badge-font-weight: $ds-alias-text-weight-bold;
622
+ $ds-badge-font-size-sm: $ds-alias-text-size-none-mobile;
623
+ $ds-badge-font-size-base: $ds-alias-text-size-xs-mobile;
624
+ $ds-badge-font-size-lg: $ds-alias-text-size-base-mobile;
625
+ $ds-badge-base-color-text: $ds-alias-text-color-primary;
626
+ $ds-badge-base-color-background: $ds-alias-background-color-red;
627
+ $ds-badge-info-color-text: $ds-alias-text-color-primary;
628
+ $ds-badge-info-color-background: $ds-alias-background-color-purple;
629
+ $ds-badge-success-color-text: $ds-alias-text-color-primary;
630
+ $ds-badge-success-color-background: $ds-alias-background-color-green;
631
+ $ds-badge-warning-color-text: $ds-alias-text-color-primary;
632
+ $ds-badge-warning-color-background: $ds-alias-background-color-yellow-light;
633
+ $ds-badge-danger-color-text: $ds-alias-text-color-primary;
634
+ $ds-badge-danger-color-background: $ds-alias-background-color-red;
635
+ $ds-badge-red-color-text: $ds-alias-text-color-primary;
636
+ $ds-badge-red-color-background: $ds-alias-background-color-red;
637
+ $ds-badge-purple-color-text: $ds-alias-text-color-primary;
638
+ $ds-badge-purple-color-background: $ds-alias-background-color-purple;
639
+ $ds-badge-green-color-text: $ds-alias-text-color-primary;
640
+ $ds-badge-green-color-background: $ds-alias-background-color-green;
641
+ $ds-badge-yellow-color-text: $ds-alias-text-color-primary;
642
+ $ds-badge-yellow-color-background: $ds-alias-background-color-yellow;
643
+ $ds-badge-grey-color-text: $ds-alias-text-color-grey;
644
+ $ds-badge-grey-color-background: $ds-alias-background-color-grey-light;
645
645
  $ds-button-family: $ds-alias-text-family-heading;
646
646
  $ds-button-weight: $ds-alias-text-weight-bold;
647
647
  $ds-button-line-height: $ds-alias-text-line-height-heading;
@@ -913,9 +913,9 @@ $ds-card-outline-width: $ds-alias-border-width-base;
913
913
  $ds-close-radius: $ds-alias-radius-rounded;
914
914
  $ds-close-color-background-base: $ds-alias-background-color-transparent;
915
915
  $ds-close-color-background-disabled: $ds-alias-background-color-grey;
916
- $ds-close-color-icon-base: $ds-alias-text-color-primary;
917
- $ds-close-color-icon-inverted: $ds-alias-text-color-white;
918
- $ds-close-color-icon-disabled: $ds-alias-text-color-disabled;
916
+ $ds-close-icon-color-base: $ds-alias-text-color-primary;
917
+ $ds-close-icon-color-disabled: $ds-alias-text-color-disabled;
918
+ $ds-close-inverted-icon-color-base: $ds-alias-text-color-white;
919
919
  $ds-date-calendar-family: $ds-alias-text-family-body;
920
920
  $ds-date-calendar-weight: $ds-alias-text-weight-bold;
921
921
  $ds-date-calendar-radius: $ds-alias-radius-base;
@@ -1254,9 +1254,9 @@ $ds-navbar-light-button-color-text-base: $ds-alias-text-color-primary;
1254
1254
  $ds-navbar-light-button-color-text-hover: $ds-alias-text-color-primary-hover;
1255
1255
  $ds-navbar-light-button-color-text-active: $ds-alias-text-color-primary-active;
1256
1256
  $ds-snackbar-radius: $ds-alias-radius-base;
1257
- $ds-snackbar-default-color-bg-base: $ds-alias-background-color-grey-light;
1258
- $ds-snackbar-default-color-border-base: $ds-alias-background-color-grey-light;
1259
- $ds-snackbar-default-color-text-base: $ds-alias-text-color-primary;
1257
+ $ds-snackbar-primary-color-bg-base: $ds-alias-background-color-grey-light;
1258
+ $ds-snackbar-primary-color-border-base: $ds-alias-background-color-grey-light;
1259
+ $ds-snackbar-primary-color-text-base: $ds-alias-text-color-primary;
1260
1260
  $ds-snackbar-success-color-bg-base: $ds-alias-background-color-success-light;
1261
1261
  $ds-snackbar-success-color-border-base: $ds-alias-background-color-success-light;
1262
1262
  $ds-snackbar-success-color-text-base: $ds-alias-text-color-primary;
@@ -1274,12 +1274,12 @@ $ds-spinner-circle-border-width: $ds-alias-border-width-md;
1274
1274
  $ds-spinner-circle-size: $ds-alias-space-lg-mobile;
1275
1275
  $ds-spinner-circle-color-background: $ds-alias-background-color-grey;
1276
1276
  $ds-spinner-circle-color-progress: $ds-alias-background-color-primary;
1277
- $ds-spinner-circle-color-inverted-background: $ds-alias-background-color-white;
1278
- $ds-spinner-circle-color-inverted-progress: $ds-alias-background-color-primary;
1277
+ $ds-spinner-inverted-circle-color-background: $ds-alias-background-color-white;
1278
+ $ds-spinner-inverted-circle-color-progress: $ds-alias-background-color-primary;
1279
1279
  $ds-toast-radius: $ds-alias-radius-base;
1280
- $ds-toast-default-color-bg-base: $ds-alias-background-color-grey-light;
1281
- $ds-toast-default-color-border-base: $ds-alias-background-color-grey-light;
1282
- $ds-toast-default-color-text-base: $ds-alias-text-color-primary;
1280
+ $ds-toast-primary-color-bg-base: $ds-alias-background-color-grey-light;
1281
+ $ds-toast-primary-color-border-base: $ds-alias-background-color-grey-light;
1282
+ $ds-toast-primary-color-text-base: $ds-alias-text-color-primary;
1283
1283
  $ds-toast-success-color-bg-base: $ds-alias-background-color-success-light;
1284
1284
  $ds-toast-success-color-border-base: $ds-alias-background-color-success-light;
1285
1285
  $ds-toast-success-color-text-base: $ds-alias-text-color-primary;
@@ -1345,8 +1345,8 @@ $ds-tag-yellow-color-bg-base: $ds-alias-background-color-yellow;
1345
1345
  $ds-tag-yellow-light-color-text-base: $ds-alias-text-color-primary;
1346
1346
  $ds-tag-yellow-light-color-bg-base: $ds-alias-background-color-yellow-light;
1347
1347
  $ds-tag-yellow-dark-color-text-base: $ds-alias-text-color-white;
1348
- $ds-tag-default-color-text-base: $ds-alias-text-color-primary;
1349
- $ds-tag-default-color-bg-base: $ds-alias-background-color-grey;
1348
+ $ds-tag-base-color-text-base: $ds-alias-text-color-primary;
1349
+ $ds-tag-base-color-bg-base: $ds-alias-background-color-grey;
1350
1350
  $ds-segment-radius: $ds-alias-radius-base;
1351
1351
  $ds-segment-background: $ds-alias-background-color-grey-light;
1352
1352
  $ds-segment-gap: $ds-alias-space-2xs-mobile;