1(()=>{"use strict";var o,r,e,s,d,a,n,t,i,l,c,A,u,g,b={644(o,r,e){e.d(r,{A:()=>t});var s=e(877),d=e.n(s),a=e(267),n=e.n(a)()(d());n.push([o.id,"@import url(https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap);"]),n.push([o.id,` 2@layer base, legacy-overrides, theme, large-font, components, utilities; 3/* 4 * CSS Cascade Layers Organization 5 * Layers are applied in declaration order (base â utilities) 6 * This provides explicit cascade control and better browser optimization 7 * 8 * Note: Using @import ... layer() syntax (CSS standard) 9 * Build warnings are expected until build tools fully support this syntax 10 * The code still works correctly in browsers 11 * 12 * Related: DS-566 Sprint 2 - CSS @layer implementation 13 */ 14/* Google Fonts import (outside layers for optimal loading) */ 15/* Layer 1: Base variables (color palette, dimensions, spacing, typography) */ 16@layer base{ 17 18/** 19 * Do not edit directly, this file was auto-generated. 20 */ 21 22:root, :host { 23 --ds-font-size-rem: 1rem; 24 --ds-font-size-tier-0: 0.5rem; 25 --ds-font-size-tier-1: 0.625rem; 26 --ds-font-size-tier-2: 0.75rem; 27 --ds-font-size-tier-3: 0.875rem; 28 --ds-font-size-tier-4: 1rem; 29 --ds-font-size-tier-5: 1.125rem; 30 --ds-font-size-tier-6: 1.25rem; 31 --ds-font-size-tier-7: 1.5rem; 32 --ds-font-size-tier-8: 1.75rem; 33 --ds-font-size-tier-9: 2rem; 34 --ds-font-size-tier-10: 2.25rem; 35 --ds-font-size-tier-11: 2.5rem; 36 --ds-font-size-tier-12: 2.75rem; 37 --ds-font-size-tier-13: 3rem; 38 --ds-font-size-tier-14: 3.25rem; 39 --ds-font-size-tier-15: 3.5rem; 40 --ds-font-size-tier-16: 3.75rem; 41 --ds-font-size-tier-17: 4rem; 42 --ds-font-size-tier-18: 4.5rem; 43 --ds-font-size-tier-19: 5rem; 44 --ds-font-size-tier-20: 5.5rem; 45 --ds-font-size-tier-base: 0.01rem; 46 --ds-font-size-xs: 0.75rem; 47 --ds-font-size-s: 0.875rem; 48 --ds-font-size-m: 1rem; 49 --ds-font-size-l: 1.125rem; 50 --ds-font-size-xl: 1.25rem; 51 --ds-font-size-2xl: 1.5rem; 52 --ds-font-size-3xl: 2rem; 53 --ds-font-size-4xl: 2.5rem; 54 --ds-font-size-html: 16px; 55 --ds-global-size-universal-scale: 1rem; 56 --ds-border-width-tier-0: 0; 57 --ds-border-width-tier-1: 0.5px; 58 --ds-border-width-tier-2: 1px; 59 --ds-border-width-tier-3: 1.5px; 60 --ds-border-width-tier-4: 2px; 61 --ds-border-width-tier-5: 3px; 62 --ds-border-width-tier-6: 4px; 63 --ds-dimension-tier-0: 0rem; 64 --ds-dimension-tier-1: 0.0625rem; 65 --ds-dimension-tier-2: 0.125rem; 66 --ds-dimension-tier-3: 0.25rem; 67 --ds-dimension-tier-4: 0.375rem; 68 --ds-dimension-tier-5: 0.5rem; 69 --ds-dimension-tier-6: 0.75rem; 70 --ds-dimension-tier-7: 1rem; 71 --ds-dimension-tier-8: 1.25rem; 72 --ds-dimension-tier-9: 1.5rem; 73 --ds-dimension-tier-10: 1.75rem; 74 --ds-dimension-tier-11: 2rem; 75 --ds-dimension-tier-12: 2.25rem; 76 --ds-dimension-tier-13: 2.5rem; 77 --ds-dimension-tier-14: 2.75rem; 78 --ds-dimension-tier-15: 3rem; 79 --ds-dimension-tier-16: 3.5rem; 80 --ds-dimension-tier-17: 4rem; 81 --ds-dimension-tier-18: 4.5rem; 82 --ds-dimension-tier-19: 5rem; 83 --ds-dimension-tier-20: 6rem; 84 --ds-dimension-tier-base: 0.01rem; 85 --ds-opacity-total: 1; 86 --ds-opacity-high: 0.8; 87 --ds-opacity-medium: 0.5; 88 --ds-opacity-soft: 0.3; 89 --ds-opacity-light: 0.15; 90 --ds-opacity-zero: 0; 91 --ds-border-solid: solid; 92 --ds-border-dashed: dashed; 93 --ds-z-index-tier-0: -100; 94 --ds-z-index-tier-1: 1; 95 --ds-z-index-tier-2: 100; 96 --ds-z-index-tier-3: 200; 97 --ds-z-index-tier-4: 300; 98 --ds-z-index-tier-5: 500; 99 --ds-z-index-tier-6: 700; 100 --ds-z-index-tier-7: 800; 101 --ds-z-index-tier-8: 900; 102 --ds-z-index-tier-9: 1000; 103 --ds-textcase-uppercase: uppercase; 104 --ds-textcase-lowercase: lowercase; 105 --ds-textcase-capitalize: capitalize; 106 --ds-size-breakpoint-mobile: 375px; 107 --ds-size-breakpoint-mobile-xl: 576px; 108 --ds-size-breakpoint-tablet-s: 768px; 109 --ds-size-breakpoint-tablet: 1024px; 110 --ds-size-breakpoint-desktop-s: 1200px; 111 --ds-size-breakpoint-desktop: 1440px; 112 --ds-size-breakpoint-desktop-xl: 1920px; 113 --ds-size-actions-3xs: 1rem; 114 --ds-size-actions-2xs: 1.25rem; 115 --ds-size-actions-xs: 1.5rem; 116 --ds-size-actions-s: 1.75rem; 117 --ds-size-actions-m: 2rem; 118 --ds-size-actions-l: 2.25rem; 119 --ds-size-actions-xl: 2.5rem; 120 --ds-size-actions-2xl: 2.75rem; 121 --ds-size-actions-3xl: 3rem; 122 --ds-size-actions-4xl: 3.5rem; 123 --ds-size-actions-5xl: 4rem; 124 --ds-size-icon-2xs: 0.5rem; 125 --ds-size-icon-xs: 0.75rem; 126 --ds-size-icon-s: 1rem; 127 --ds-size-icon-m: 1.25rem; 128 --ds-size-icon-l: 1.5rem; 129 --ds-size-icon-xl: 2rem; 130 --ds-size-icon-2xl: 2.5rem; 131 --ds-font-family-base: Inter; 132 --ds-font-family-mono: Inter; 133 --ds-font-weight-heading: 600; 134 --ds-font-weight-body: 400; 135 --ds-font-weight-body-strong: 500; 136 --ds-font-weight-body-strongest: 600; 137 --ds-line-height-body-xs: 1.125rem; 138 --ds-line-height-body-s: 1.3125rem; 139 --ds-line-height-body-m: 1.5rem; 140 --ds-line-height-body-l: 1.6875rem; 141 --ds-line-height-body-xl: 1.875rem; 142 --ds-line-height-heading-xs: 1.8rem; 143 --ds-line-height-heading-s: 2.4rem; 144 --ds-line-height-heading-m: 3rem; 145 --ds-space-page-inset-none: 0rem; 146 --ds-space-page-inset-xs: 0.75rem; 147 --ds-space-page-inset-s: 1rem; 148 --ds-space-page-inset-m: 1.5rem; 149 --ds-space-page-inset-l: 2rem; 150 --ds-space-page-inset-xl: 3rem; 151 --ds-space-page-inside-none: 0rem; 152 --ds-space-page-inside-2xs: 0.25rem; 153 --ds-space-page-inside-xs: 0.5rem; 154 --ds-space-page-inside-s: 0.75rem; 155 --ds-space-page-inside-m: 1rem; 156 --ds-space-page-inside-l: 1.25rem; 157 --ds-space-page-inside-xl: 1.5rem; 158 --ds-space-page-inside-2xl: 2rem; 159 --ds-space-page-inside-3xl: 3rem; 160 --ds-radius-none: 0px; 161 --ds-radius-2xs: 2px; 162 --ds-radius-xs: 4px; 163 --ds-radius-s: 6px; 164 --ds-radius-m: 8px; 165 --ds-radius-l: 12px; 166 --ds-radius-xl: 16px; 167 --ds-radius-2xl: 24px; 168 --ds-radius-full: 9999px; 169 --ds-radius-base: 1px; 170 --ds-color-neutral-25: #fdfdfd; 171 --ds-color-neutral-50: #fafafa; 172 --ds-color-neutral-100: #f5f5f5; 173 --ds-color-neutral-200: #e5e5e5; 174 --ds-color-neutral-300: #d4d4d4; 175 --ds-color-neutral-400: #a3a3a3; 176 --ds-color-neutral-500: #737373; 177 --ds-color-neutral-600: #525252; 178 --ds-color-neutral-700: #404040; 179 --ds-color-neutral-800: #262626; 180 --ds-color-neutral-900: #171717; 181 --ds-color-neutral-1000: #0c0c0c; 182 --ds-color-seafoam-25: #f5fdfc; 183 --ds-color-seafoam-50: #edf9f7; 184 --ds-color-seafoam-100: #d4f2ec; 185 --ds-color-seafoam-200: #b9e9e1; 186 --ds-color-seafoam-300: #9de2d6; 187 --ds-color-seafoam-400: #80d9ca; 188 --ds-color-seafoam-500: #66c6b4; 189 --ds-color-seafoam-600: #4aad9a; 190 --ds-color-seafoam-700: #338f7e; 191 --ds-color-seafoam-800: #1f6f61; 192 --ds-color-seafoam-900: #0f4f45; 193 --ds-color-seafoam-1000: #052e28; 194 --ds-color-red-25: #fff9f9; 195 --ds-color-red-50: #fef2f2; 196 --ds-color-red-100: #fee2e2; 197 --ds-color-red-200: #fecaca; 198 --ds-color-red-300: #fca5a5; 199 --ds-color-red-400: #f87171; 200 --ds-color-red-500: #ef4444; 201 --ds-color-red-600: #dc2626; 202 --ds-color-red-700: #b91c1c; 203 --ds-color-red-800: #991b1b; 204 --ds-color-red-900: #7f1d1d; 205 --ds-color-red-1000: #4b1a1a; 206 --ds-color-green-25: #f7fef9; 207 --ds-color-green-50: #f0fdf4; 208 --ds-color-green-100: #dcfce7; 209 --ds-color-green-200: #bbf7d0; 210 --ds-color-green-300: #86efac; 211 --ds-color-green-400: #4ade80; 212 --ds-color-green-500: #22c55e; 213 --ds-color-green-600: #16a34a; 214 --ds-color-green-700: #15803d; 215 --ds-color-green-800: #166534; 216 --ds-color-green-900: #14532d; 217 --ds-color-green-1000: #1d3d2a; 218 --ds-color-purple-25: #faf9fc; 219 --ds-color-purple-50: #f4f3f7; 220 --ds-color-purple-100: #e4e3eb; 221 --ds-color-purple-200: #d5d3df; 222 --ds-color-purple-300: #c5c2d4; 223 --ds-color-purple-400: #b4b1c7; 224 --ds-color-purple-500: #9590b0; 225 --ds-color-purple-600: #7b7598; 226 --ds-color-purple-700: #625c7e; 227 --ds-color-purple-800: #4a4462; 228 --ds-color-purple-900: #342f48; 229 --ds-color-purple-1000: #1c1929; 230 --ds-color-amber-25: #fffdf5; 231 --ds-color-amber-50: #fffbeb; 232 --ds-color-amber-100: #fef3c7; 233 --ds-color-amber-200: #fde68a; 234 --ds-color-amber-300: #fcd34d; 235 --ds-color-amber-400: #fbbf24; 236 --ds-color-amber-500: #f59e0b; 237 --ds-color-amber-600: #d97706; 238 --ds-color-amber-700: #b45309; 239 --ds-color-amber-800: #92400e; 240 --ds-color-amber-900: #78350f; 241 --ds-color-amber-1000: #3c1b08; 242 --ds-color-yellow-25: #fefdf0; 243 --ds-color-yellow-50: #fefbe8; 244 --ds-color-yellow-100: #fef7c3; 245 --ds-color-yellow-200: #feee95; 246 --ds-color-yellow-300: #fde272; 247 --ds-color-yellow-400: #fac515; 248 --ds-color-yellow-500: #eaaa08; 249 --ds-color-yellow-600: #ca8504; 250 --ds-color-yellow-700: #a15c07; 251 --ds-color-yellow-800: #854a0e; 252 --ds-color-yellow-900: #713b12; 253 --ds-color-yellow-1000: #542c0d; 254 --ds-color-pink-25: #fff5fb; 255 --ds-color-pink-50: #feeef6; 256 --ds-color-pink-100: #fdd9ea; 257 --ds-color-pink-200: #fcc0d8; 258 --ds-color-pink-300: #fea3b4; 259 --ds-color-pink-400: #faa7e0; 260 --ds-color-pink-500: #f472b6; 261 --ds-color-pink-600: #db2777; 262 --ds-color-pink-700: #be185d; 263 --ds-color-pink-800: #9d174d; 264 --ds-color-pink-900: #831843; 265 --ds-color-pink-1000: #4a0d26; 266 --ds-color-base-white: #ffffff; 267 --ds-color-base-black: #0c0c0c; 268 --ds-color-teal-25: #e6f1f2; 269 --ds-color-teal-50: #cce4e6; 270 --ds-color-teal-100: #a6cfd3; 271 --ds-color-teal-200: #80bbc0; 272 --ds-color-teal-300: #5ba7ad; 273 --ds-color-teal-400: #35929a; 274 --ds-color-teal-500: #1b858e; 275 --ds-color-teal-600: #027781; 276 --ds-color-teal-700: #016570; 277 --ds-color-teal-800: #01565c; 278 --ds-color-teal-900: #014c52; 279 --ds-color-teal-1000: #013b40; 280 --ds-color-brand-25: #faf9ff; 281 --ds-color-brand-50: #f5f3ff; 282 --ds-color-brand-100: #ede9fe; 283 --ds-color-brand-200: #ddd6fe; 284 --ds-color-brand-300: #c4b5fd; 285 --ds-color-brand-400: #a78bfa; 286 --ds-color-brand-500: #8b5cf6; 287 --ds-color-brand-600: #7c3aed; 288 --ds-color-brand-700: #6d28d9; 289 --ds-color-brand-800: #5b21b6; 290 --ds-color-brand-900: #4c1d95; 291 --ds-color-brand-1000: #391670; 292 --ds-color-blue-25: #f7fbff; 293 --ds-color-blue-50: #eff6ff; 294 --ds-color-blue-100: #dbeafe; 295 --ds-color-blue-200: #bfdbfe; 296 --ds-color-blue-300: #93c5fd; 297 --ds-color-blue-400: #60a5fa; 298 --ds-color-blue-500: #3b82f6; 299 --ds-color-blue-600: #2563eb; 300 --ds-color-blue-700: #1d4ed8; 301 --ds-color-blue-800: #1e40af; 302 --ds-color-blue-900: #1e3a8a; 303 --ds-color-blue-1000: #1b2951; 304 --ds-color-actions-ring: #fcd34d; 305 --ds-color-actions-text: #2563eb; 306 --ds-color-actions-text-hover: #1e40af; 307 --ds-color-overlay-light: #ffffff; 308 --ds-color-overlay-medium: #ffffff; 309 --ds-color-overlay-strong: #ffffff; 310 --ds-color-violet-25: #faf9ff; 311 --ds-color-violet-50: #f5f3ff; 312 --ds-color-violet-100: #ede9fe; 313 --ds-color-violet-200: #ddd6fe; 314 --ds-color-violet-300: #c4b5fd; 315 --ds-color-violet-400: #a78bfa; 316 --ds-color-violet-500: #8b5cf6; 317 --ds-color-violet-600: #7c3aed; 318 --ds-color-violet-700: #6d28d9; 319 --ds-color-violet-800: #5b21b6; 320 --ds-color-violet-900: #4c1d95; 321 --ds-color-violet-1000: #391670; 322 --ds-font-heading-xs: 600 1.5rem/1.8rem Inter; 323 --ds-font-heading-s: 600 2rem/2.4rem Inter; 324 --ds-font-heading-m: 600 2.5rem/3rem Inter; 325 --ds-font-body-strongest-xs: 600 0.75rem/1.125rem Inter; 326 --ds-font-body-strongest-s: 600 0.875rem/1.3125rem Inter; 327 --ds-font-body-strongest-m: 600 1rem/1.5rem Inter; 328 --ds-font-body-strongest-l: 600 1.125rem/1.6875rem Inter; 329 --ds-font-body-strongest-xl: 600 1.25rem/1.875rem Inter; 330 --ds-font-body-default-xs: 400 0.75rem/1.125rem Inter; 331 --ds-font-body-default-s: 400 0.875rem/1.3125rem Inter; 332 --ds-font-body-default-m: 400 1rem/1.5rem Inter; 333 --ds-font-body-default-l: 400 1.125rem/1.6875rem Inter; 334 --ds-font-body-default-xl: 400 1.25rem/1.875rem Inter; 335 --ds-font-body-strong-xs: 500 0.75rem/1.125rem Inter; 336 --ds-font-body-strong-s: 500 0.875rem/1.3125rem Inter; 337 --ds-font-body-strong-m: 500 1rem/1.5rem Inter; 338 --ds-font-body-strong-l: 500 1.125rem/1.6875rem Inter; 339 --ds-font-body-strong-xl: 500 1.25rem/1.875rem Inter; 340} 341} 342/* Layer 2: Legacy overrides (dimension/font/size changes for legacy color scheme) */ 343@layer legacy-overrides{ 344/** 345 * This colors are made by the original "teal" color and splitted into 1000 shades 346 * by the same logic as in a new theme. 347 */ 348[data-color-scheme="legacy"] { 349 /* Teal color scale following the same pattern as other colors in variables.css */ 350 --ds-color-teal-25: oklch(0.98 0.015 205); 351 --ds-color-teal-50: oklch(0.95 0.03 205); 352 --ds-color-teal-100: oklch(0.90 0.045 205); 353 --ds-color-teal-200: oklch(0.83 0.06 205); 354 --ds-color-teal-300: oklch(0.75 0.08 205); 355 --ds-color-teal-400: oklch(0.67 0.10 205); 356 --ds-color-teal-500: rgb(0, 145, 157); 357 --ds-color-teal-600: rgb(0, 119, 129); 358 --ds-color-teal-700: rgb(0, 94, 102); 359 --ds-color-teal-800: rgb(0, 73, 80); 360 --ds-color-teal-900: rgb(0, 53, 58); 361 --ds-color-teal-1000: rgb(0, 37, 40); 362 363 --ds-dimension-tier-0: 0rem; /* 0rem; */ 364 --ds-dimension-tier-1: 0.0312rem; /* 0.0625rem; */ 365 --ds-dimension-tier-2: 0.0625rem; /* 0.125rem; */ 366 --ds-dimension-tier-3: 0.125rem; /* 0.25rem; */ 367 --ds-dimension-tier-4: 0.1875rem; /* 0.375rem; */ 368 --ds-dimension-tier-5: 0.25rem; /* 0.5rem; */ 369 --ds-dimension-tier-6: 0.3125rem; /* 0.75rem; */ 370 --ds-dimension-tier-7: 0.5rem; /* 1rem; */ 371 --ds-dimension-tier-8: 0.625rem; /* 1.25rem; */ 372 --ds-dimension-tier-9: 0.75rem; /* 1.5rem; */ 373 --ds-dimension-tier-10: 0.875rem; /* 1.75rem; */ 374 --ds-dimension-tier-11: 1rem; /* 2rem; */ 375 --ds-dimension-tier-12: 1.125rem; /* 2.25rem; */ 376 --ds-dimension-tier-13: 1.25rem; /* 2.5rem; */ 377 --ds-dimension-tier-14: 1.375rem; /* 2.75rem; */ 378 --ds-dimension-tier-15: 1.5rem; /* 3rem; */ 379 --ds-dimension-tier-16: 1.625rem; /* 3.5rem; */ 380 --ds-dimension-tier-17: 1.75rem; /* 4rem; */ 381 --ds-dimension-tier-18: 2.25rem; /* 4.5rem; */ 382 --ds-dimension-tier-19: 2.5rem; /* 5rem; */ 383 --ds-dimension-tier-20: 3rem; /* 6rem; */ 384 --ds-dimension-tier-base: 0.01rem; /* 0.01rem; */ 385 386 --ds-size-icon-2xs: 0.25rem; /* 0.5rem; */ 387 --ds-size-icon-xs: 0.5rem; /* 0.75rem; */ 388 --ds-size-icon-s: 0.75rem; /* 1rem; */ 389 --ds-size-icon-m: 1rem; /* 1.25rem; */ 390 --ds-size-icon-l: 1.25rem; /* 1.5rem; */ 391 --ds-size-icon-xl: 1.75rem; /* 2rem; */ 392 --ds-size-icon-2xl: 2.25rem; /* 2.5rem; */ 393 394 --ds-size-actions-3xs: 0.5rem; /* 1rem */ 395 --ds-size-actions-2xs: 0.75rem; /* 1.25rem */ 396 --ds-size-actions-xs: 1rem; /* 1.5rem */ 397 --ds-size-actions-s: 1.25rem; /* 1.75rem */ 398 --ds-size-actions-m: 1.5rem; /* 2rem */ 399 --ds-size-actions-l: 1.75rem; /* 2.25rem */ 400 --ds-size-actions-xl: 2rem; /* 2.5rem */ 401 --ds-size-actions-2xl: 2.25rem; /* 2.75rem */ 402 --ds-size-actions-3xl: 2.5rem; /* 3rem */ 403 --ds-size-actions-4xl: 3rem; /* 3.5rem */ 404 --ds-size-actions-5xl: 3.5rem; /* 4rem */ 405 406 --ds-space-page-inset-none: 0rem; /* 0rem */ 407 --ds-space-page-inset-xs: 0.5rem; /* 0.75rem */ 408 --ds-space-page-inset-s: 0.75rem; /* 1rem */ 409 --ds-space-page-inset-m: 1rem; /* 1.5rem */ 410 --ds-space-page-inset-l: 1.5rem; /* 2rem */ 411 --ds-space-page-inset-xl: 2rem; /* 3rem */ 412 --ds-space-page-inside-none: 0rem; /* 0rem */ 413 --ds-space-page-inside-2xs: 0.125rem; /* 0.25rem */ 414 --ds-space-page-inside-xs: 0.25rem; /* 0.5rem */ 415 --ds-space-page-inside-s: 0.5rem; /* 0.75rem */ 416 --ds-space-page-inside-m: 1rem; /* 1rem */ 417 --ds-space-page-inside-l: 1.25rem; /* 1.5rem */ 418 --ds-space-page-inside-xl: 2rem; /* 2rem */ 419 --ds-space-page-inside-2xl: 2.5rem; /* 3rem */ 420 421 --ds-font-heading-xs: 600 1.5rem/1.8rem adelle-sans, sans-serif; 422 --ds-font-heading-s: 600 2rem/2.4rem adelle-sans, sans-serif; 423 --ds-font-heading-m: 600 2.5rem/3rem adelle-sans, sans-serif; 424 --ds-font-body-strongest-xs: 600 0.75rem/1.125rem adelle-sans, sans-serif; 425 --ds-font-body-strongest-s: 600 0.875rem/1.3125rem adelle-sans, sans-serif; 426 --ds-font-body-strongest-m: 600 1rem/1.5rem adelle-sans, sans-serif; 427 --ds-font-body-strongest-l: 600 1.125rem/1.6875rem adelle-sans, sans-serif; 428 --ds-font-body-strongest-xl: 600 1.25rem/1.875rem adelle-sans, sans-serif; 429 --ds-font-body-default-xs: 400 0.75rem/1.125rem adelle-sans, sans-serif; 430 --ds-font-body-default-s: 400 0.875rem/1.3125rem adelle-sans, sans-serif; 431 --ds-font-body-default-m: 400 1rem/1.5rem adelle-sans, sans-serif; 432 --ds-font-body-default-l: 400 1.125rem/1.6875rem adelle-sans, sans-serif; 433 --ds-font-body-default-xl: 400 1.25rem/1.875rem adelle-sans, sans-serif; 434 --ds-font-body-strong-xs: 500 0.75rem/1.125rem adelle-sans, sans-serif; 435 --ds-font-body-strong-s: 500 0.875rem/1.3125rem adelle-sans, sans-serif; 436 --ds-font-body-strong-m: 500 1
436rem/1.5rem adelle-sans, sans-serif; 437 --ds-font-body-strong-l: 500 1.125rem/1.6875rem adelle-sans, sans-serif; 438 --ds-font-body-strong-xl: 500 1.25rem/1.875rem adelle-sans, sans-serif; 439 440 --ds-radius-none: 0px; 441 --ds-radius-2xs: 1px; 442 --ds-radius-xs: 2px; 443 --ds-radius-s: 3px; 444 --ds-radius-m: 4px; 445 --ds-radius-l: 6px; 446 --ds-radius-xl: 8px; 447 --ds-radius-2xl: 12px; 448 449 /* support for hard changes in variable naming */ 450 --ds-font-size-xxl: var(--ds-font-size-2xl); 451 --ds-size-icon-xxs: var(--ds-size-icon-2xs); 452 --ds-size-icon-xxl: var(--ds-size-icon-2xl); 453 --ds-size-actions-xxs: var(--ds-size-actions-2xs); 454 --ds-space-page-inside-xxs: var(--ds-space-page-inside-2xs); 455 --ds-space-page-inside-xxl: var(--ds-space-page-inside-2xl); 456 --ds-radius-xxs: var(--ds-radius-2xs); 457 --ds-radius-xxl: var(--ds-radius-2xl); 458} 459 460@media (color-gamut: p3){ 461[data-color-scheme="legacy"] { 462 --ds-color-teal-500: oklch(0.60 0.12 205); 463} 464} 465 466@media (color-gamut: rec2020){ 467[data-color-scheme="legacy"] { 468 --ds-color-teal-600: oklch(0.52 0.13 205); 469 --ds-color-teal-700: oklch(0.44 0.13 205); 470 --ds-color-teal-800: oklch(0.37 0.12 205); 471 --ds-color-teal-900: oklch(0.30 0.10 205); 472 --ds-color-teal-1000: oklch(0.24 0.08 205); 473} 474} 475} 476/* Layer 3: Theme variations (light/dark \xd7 smartling/legacy semantic tokens) */ 477@layer theme{ 478 479/** 480 * Do not edit directly, this file was auto-generated. 481 */ 482 483:root, :host { 484 --ds-color-border-transparent: rgba(0, 0, 0, 0); 485 --ds-shadow-focus-ring-default: 0 0 0 4px rgba(152,162,179,0.14); 486 --ds-shadow-standard-xs: 0 1px 2px 0 rgba(16,24,41,0.05); 487 --ds-shadow-standard-s: 0 1px 2px 0 rgba(16,24,41,0.06), 0 2px 3px 0 rgba(16,24,41,0.10); 488 --ds-shadow-standard-m: 0 2px 4px -2px rgba(16,24,41,0.06), 0 4px 8px 2px rgba(16,24,41,0.10); 489 --ds-shadow-standard-l: 0 4px 6px -2px rgba(16,24,41,0.03), 0 12px 16px -4px rgba(16,24,41,0.08); 490 --ds-shadow-standard-xl: 0 8px 8px -4px rgba(16,24,41,0.03), 0 20px 24px -4px rgba(16,24,41,0.08); 491 --ds-shadow-standard-2xl: 0 24px 48px -12px rgba(16,24,41,0.18); 492 --ds-shadow-standard-3xl: 0 32px 64px -12px rgba(16,24,41,0.14); 493 --ds-blur-default-background-filter: blur(30px); 494 --ds-blur-default-background-color: rgba(38, 38, 38, 0.25); 495 --ds-color-surface-main: var(--ds-color-base-white); 496 --ds-color-surface-main-hover: var(--ds-color-neutral-100); 497 --ds-color-surface-main-pressed: var(--ds-color-neutral-200); 498 --ds-color-surface-soft: var(--ds-color-neutral-50); 499 --ds-color-surface-moderate: var(--ds-color-neutral-100); 500 --ds-color-surface-strong: var(--ds-color-neutral-300); 501 --ds-color-surface-disabled: var(--ds-color-neutral-100); 502 --ds-color-surface-solid: var(--ds-color-neutral-1000); 503 --ds-color-surface-inverse: var(--ds-color-neutral-900); 504 --ds-color-surface-error-main: var(--ds-color-red-50); 505 --ds-color-surface-error-moderate: var(--ds-color-red-100); 506 --ds-color-surface-error-solid: var(--ds-color-red-600); 507 --ds-color-surface-error-solid-hover: var(--ds-color-red-700); 508 --ds-color-surface-error-solid-pressed: var(--ds-color-red-800); 509 --ds-color-surface-warning-main: var(--ds-color-amber-50); 510 --ds-color-surface-warning-moderate: var(--ds-color-amber-100); 511 --ds-color-surface-warning-solid: var(--ds-color-amber-600); 512 --ds-color-surface-warning-solid-hover: var(--ds-color-amber-700); 513 --ds-color-surface-warning-solid-pressed: var(--ds-color-amber-800); 514 --ds-color-surface-success-main: var(--ds-color-green-50); 515 --ds-color-surface-success-moderate: var(--ds-color-green-100); 516 --ds-color-surface-success-solid: var(--ds-color-green-600); 517 --ds-color-surface-success-solid-hover: var(--ds-color-green-700); 518 --ds-color-surface-success-solid-pressed: var(--ds-color-green-800); 519 --ds-color-surface-blue-outline: var(--ds-color-blue-50); 520 --ds-color-surface-blue-moderate: var(--ds-color-blue-100); 521 --ds-color-surface-violet-outline: var(--ds-color-violet-50); 522 --ds-color-surface-violet-moderate: var(--ds-color-violet-100); 523 --ds-color-surface-yellow-outline: var(--ds-color-yellow-100); 524 --ds-color-surface-grey-outline: var(--ds-color-neutral-50); 525 --ds-color-surface-orange-outline: var(--ds-color-amber-100); 526 --ds-color-surface-blue-solid: var(--ds-color-blue-700); 527 --ds-color-surface-violet-solid: var(--ds-color-violet-700); 528 --ds-color-surface-yellow-solid: var(--ds-color-yellow-400); 529 --ds-color-surface-grey-solid: var(--ds-color-neutral-700); 530 --ds-color-surface-green-solid: var(--ds-color-green-700); 531 --ds-color-surface-orange-solid: var(--ds-color-amber-500); 532 --ds-color-surface-red-solid: var(--ds-color-red-600); 533 --ds-color-border-main: var(--ds-color-neutral-500); 534 --ds-color-border-soft: var(--ds-color-neutral-300); 535 --ds-color-border-moderate: var(--ds-color-neutral-200); 536 --ds-color-border-disabled: var(--ds-color-neutral-300); 537 --ds-color-border-solid: var(--ds-color-base-black); 538 --ds-color-border-error-main: var(--ds-color-red-500); 539 --ds-color-border-error-soft: var(--ds-color-red-300); 540 --ds-color-border-error-strong: var(--ds-color-red-800); 541 --ds-color-border-success-main: var(--ds-color-green-500); 542 --ds-color-border-success-soft: var(--ds-color-green-300); 543 --ds-color-border-success-strong: var(--ds-color-green-800); 544 --ds-color-border-warning-main: var(--ds-color-amber-500); 545 --ds-color-border-warning-soft: var(--ds-color-amber-300); 546 --ds-color-border-warning-strong: var(--ds-color-amber-800); 547 --ds-color-border-blue-outline: var(--ds-color-blue-300); 548 --ds-color-border-violet-outline: var(--ds-color-violet-300); 549 --ds-color-border-yellow-outline: var(--ds-color-yellow-500); 550 --ds-color-border-grey-outline: var(--ds-color-neutral-300); 551 --ds-color-border-green-outline: var(--ds-color-green-300); 552 --ds-color-border-orange-outline: var(--ds-color-amber-500); 553 --ds-color-border-red-outline: var(--ds-color-red-300); 554 --ds-color-foreground-main: var(--ds-color-neutral-900); 555 --ds-color-foreground-main-onbrand: var(--ds-color-base-white); 556 --ds-color-foreground-soft: var(--ds-color-neutral-700); 557 --ds-color-foreground-soft-hover: var(--ds-color-neutral-800); 558 --ds-color-foreground-moderate: var(--ds-color-neutral-600); 559 --ds-color-foreground-moderate-hover: var(--ds-color-neutral-700); 560 --ds-color-foreground-strong: var(--ds-color-neutral-400); 561 --ds-color-foreground-strong-hover: var(--ds-color-neutral-500); 562 --ds-color-foreground-disabled: var(--ds-color-neutral-500); 563 --ds-color-foreground-white: var(--ds-color-base-white); 564 --ds-color-foreground-link: var(--ds-color-blue-600); 565 --ds-color-foreground-link-hover: var(--ds-color-blue-800); 566 --ds-color-foreground-error-main: var(--ds-color-red-700); 567 --ds-color-foreground-error-soft: var(--ds-color-red-600); 568 --ds-color-foreground-warning-main: var(--ds-color-amber-700); 569 --ds-color-foreground-warning-soft: var(--ds-color-amber-600); 570 --ds-color-foreground-success-main: var(--ds-color-green-700); 571 --ds-color-foreground-success-soft: var(--ds-color-green-600); 572 --ds-color-foreground-form-selected: var(--ds-color-base-white); 573 --ds-color-text-main: var(--ds-color-neutral-800); 574 --ds-color-text-main-onbrand: var(--ds-color-base-white); 575 --ds-color-text-soft: var(--ds-color-neutral-700); 576 --ds-color-text-soft-hover: var(--ds-color-neutral-800); 577 --ds-color-text-moderate: var(--ds-color-neutral-600); 578 --ds-color-text-moderate-hover: var(--ds-color-neutral-700); 579 --ds-color-text-strong: var(--ds-color-neutral-400); 580 --ds-color-text-strong-hover: var(--ds-color-neutral-500); 581 --ds-color-text-disabled: var(--ds-color-neutral-500); 582 --ds-color-text-placeholder: var(--ds-color-neutral-500); 583 --ds-color-text-white: var(--ds-color-base-white); 584 --ds-color-text-error-main: var(--ds-color-red-700); 585 --ds-color-text-error-main-hover: var(--ds-color-red-800); 586 --ds-color-text-error-soft: var(--ds-color-red-600); 587 --ds-color-text-warning-main: var(--ds-color-amber-700); 588 --ds-color-text-warning-soft: var(--ds-color-amber-600); 589 --ds-color-text-success-main: var(--ds-color-green-700); 590 --ds-color-text-success-soft: var(--ds-color-green-600); 591 --ds-color-text-blue-outline: var(--ds-color-blue-700); 592 --ds-color-text-violet-outline: var(--ds-color-violet-700); 593 --ds-color-text-yellow-outline: var(--ds-color-yellow-700); 594 --ds-color-text-grey-outline: var(--ds-color-neutral-700); 595 --ds-color-text-green-outline: var(--ds-color-green-700); 596 --ds-color-text-orange-outline: var(--ds-color-amber-900); 597 --ds-color-text-red-outline: var(--ds-color-red-700); 598 --ds-color-text-orange-solid: var(--ds-color-amber-1000); 599 --ds-color-surface-link-pressed: var(--ds-color-actions-ring); 600 --ds-color-surface-brand-main: var(--ds-color-brand-50); 601 --ds-color-surface-brand-moderate: var(--ds-color-brand-100); 602 --ds-color-surface-brand-solid: var(--ds-color-brand-700); 603 --ds-color-surface-brand-solid-hover: var(--ds-color-brand-800); 604 --ds-color-surface-brand-solid-pressed: var(--ds-color-brand-800); 605 --ds-color-surface-form-selected: var(--ds-color-surface-inverse); 606 --ds-color-surface-green-outline: var(--ds-color-surface-success-main); 607 --ds-color-surface-red-outline: var(--ds-color-surface-error-main); 608 --ds-color-border-brand-main: var(--ds-color-brand-500); 609 --ds-color-border-brand-soft: var(--ds-color-brand-300); 610 --ds-color-border-brand-strong: var(--ds-color-brand-800); 611 --ds-color-foreground-brand-main: var(--ds-color-brand-700); 612 --ds-color-foreground-brand-main-hover: var(--ds-color-brand-300); 613 --ds-color-foreground-brand-soft: var(--ds-color-brand-600); 614 --ds-color-foreground-brand-soft-hover: var(--ds-color-brand-700); 615 --ds-color-text-soft-onbrand: var(--ds-color-brand-200); 616 --ds-color-text-moderate-onbrand: var(--ds-color-brand-200); 617 --ds-color-text-strong-onbrand: var(--ds-color-brand-300); 618 --ds-color-text-link: var(--ds-color-actions-text); 619 --ds-color-text-link-hover: var(--ds-color-actions-text-hover); 620 --ds-color-text-brand-main: var(--ds-color-brand-700); 621 --ds-color-text-brand-main-hover: var(--ds-color-brand-800); 622 --ds-color-text-brand-soft: var(--ds-color-brand-600); 623 --ds-color-text-brand-soft-hover: var(--ds-color-brand-700); 624 --ds-color-text-blue-solid: var(--ds-color-text-main-onbrand); 625 --ds-color-text-violet-solid: var(--ds-color-text-main-onbrand); 626 --ds-color-text-yellow-solid: var(--ds-color-text-main); 627 --ds-color-text-grey-solid: var(--ds-color-text-main-onbrand); 628 --ds-color-text-green-solid: var(--ds-color-text-main-onbrand); 629 --ds-color-text-red-solid: var(--ds-color-text-main-onbrand);
630 --ds-shadow-focus-ring-brand: 0 0 0 4px var(--ds-color-brand-200); 631 --ds-shadow-focus-ring-error: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 6px var(--ds-color-red-700); 632 --ds-shadow-focus-ring-actions: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 6px var(--ds-color-amber-300); 633} 634} 635@layer theme{ 636 637/** 638 * Do not edit directly, this file was auto-generated. 639 */ 640 641[data-theme="dark"][data-color-scheme="smartling"] { 642 --ds-color-border-transparent: rgba(0, 0, 0, 0); 643 --ds-shadow-focus-ring-default: 0 0 0 4px rgba(152,162,179,0.14); 644 --ds-shadow-standard-xs: 0 1px 2px 0 rgba(16,24,41,0.05); 645 --ds-shadow-standard-s: 0 1px 2px 0 rgba(16,24,41,0.06), 0 2px 3px 0 rgba(16,24,41,0.10); 646 --ds-shadow-standard-m: 0 2px 4px -2px rgba(16,24,41,0.06), 0 4px 8px 2px rgba(16,24,41,0.10); 647 --ds-shadow-standard-l: 0 4px 6px -2px rgba(16,24,41,0.03), 0 12px 16px -4px rgba(16,24,41,0.08); 648 --ds-shadow-standard-xl: 0 8px 8px -4px rgba(16,24,41,0.03), 0 20px 24px -4px rgba(16,24,41,0.08); 649 --ds-shadow-standard-2xl: 0 24px 48px -12px rgba(16,24,41,0.18); 650 --ds-shadow-standard-3xl: 0 32px 64px -12px rgba(16,24,41,0.14); 651 --ds-blur-default-background-filter: blur(30px); 652 --ds-blur-default-background-color: rgba(38, 38, 38, 0.5); 653 --ds-color-surface-main: var(--ds-color-neutral-900); 654 --ds-color-surface-main-hover: var(--ds-color-neutral-800); 655 --ds-color-surface-main-pressed: var(--ds-color-neutral-700); 656 --ds-color-surface-soft: var(--ds-color-neutral-800); 657 --ds-color-surface-moderate: var(--ds-color-neutral-700); 658 --ds-color-surface-strong: var(--ds-color-neutral-600); 659 --ds-color-surface-disabled: var(--ds-color-neutral-800); 660 --ds-color-surface-solid: var(--ds-color-neutral-800); 661 --ds-color-surface-inverse: var(--ds-color-base-white); 662 --ds-color-surface-error-main: var(--ds-color-red-1000); 663 --ds-color-surface-error-moderate: var(--ds-color-red-900); 664 --ds-color-surface-error-solid: var(--ds-color-red-700); 665 --ds-color-surface-error-solid-hover: var(--ds-color-red-600); 666 --ds-color-surface-error-solid-pressed: var(--ds-color-red-400); 667 --ds-color-surface-warning-main: var(--ds-color-amber-1000); 668 --ds-color-surface-warning-moderate: var(--ds-color-amber-900); 669 --ds-color-surface-warning-solid: var(--ds-color-amber-700); 670 --ds-color-surface-warning-solid-hover: var(--ds-color-amber-600); 671 --ds-color-surface-warning-solid-pressed: var(--ds-color-amber-600); 672 --ds-color-surface-success-main: var(--ds-color-green-1000); 673 --ds-color-surface-success-moderate: var(--ds-color-green-900); 674 --ds-color-surface-success-solid: var(--ds-color-green-700); 675 --ds-color-surface-success-solid-hover: var(--ds-color-green-600); 676 --ds-color-surface-success-solid-pressed: var(--ds-color-green-600); 677 --ds-color-surface-blue-outline: var(--ds-color-blue-1000); 678 --ds-color-surface-blue-moderate: var(--ds-color-blue-900); 679 --ds-color-surface-violet-outline: var(--ds-color-violet-1000); 680 --ds-color-surface-violet-moderate: var(--ds-color-violet-900); 681 --ds-color-surface-yellow-outline: var(--ds-color-yellow-1000); 682 --ds-color-surface-grey-outline: var(--ds-color-neutral-1000); 683 --ds-color-surface-green-outline: var(--ds-color-green-1000); 684 --ds-color-surface-orange-outline: var(--ds-color-amber-1000); 685 --ds-color-surface-red-outline: var(--ds-color-red-1000); 686 --ds-color-surface-blue-solid: var(--ds-color-blue-200); 687 --ds-color-surface-violet-solid: var(--ds-color-violet-200); 688 --ds-color-surface-yellow-solid: var(--ds-color-yellow-200); 689 --ds-color-surface-grey-solid: var(--ds-color-neutral-200); 690 --ds-color-surface-green-solid: var(--ds-color-green-200); 691 --ds-color-surface-orange-solid: var(--ds-color-amber-300); 692 --ds-color-surface-red-solid: var(--ds-color-red-200); 693 --ds-color-border-main: var(--ds-color-neutral-700); 694 --ds-color-border-solid: var(--ds-color-base-white); 695 --ds-color-border-soft: var(--ds-color-neutral-800); 696 --ds-color-border-moderate: var(--ds-color-neutral-700); 697 --ds-color-border-disabled: var(--ds-color-neutral-700); 698 --ds-color-border-error-main: var(--ds-color-red-400); 699 --ds-color-border-error-soft: var(--ds-color-red-400); 700 --ds-color-border-error-strong: var(--ds-color-red-600); 701 --ds-color-border-success-main: var(--ds-color-green-400); 702 --ds-color-border-success-soft: var(--ds-color-green-400); 703 --ds-color-border-success-strong: var(--ds-color-green-600); 704 --ds-color-border-warning-main: var(--ds-color-amber-400); 705 --ds-color-border-warning-soft: var(--ds-color-amber-400); 706 --ds-color-border-warning-strong: var(--ds-color-amber-600); 707 --ds-color-border-blue-outline: var(--ds-color-blue-400); 708 --ds-color-border-violet-outline: var(--ds-color-violet-400); 709 --ds-color-border-yellow-outline: var(--ds-color-yellow-400); 710 --ds-color-border-grey-outline: var(--ds-color-neutral-400); 711 --ds-color-border-green-outline: var(--ds-color-green-400); 712 --ds-color-border-orange-outline: var(--ds-color-amber-400); 713 --ds-color-border-red-outline: var(--ds-color-red-400); 714 --ds-color-foreground-main: var(--ds-color-base-white); 715 --ds-color-foreground-main-onbrand: var(--ds-color-base-white); 716 --ds-color-foreground-soft: var(--ds-color-neutral-300); 717 --ds-color-foreground-soft-hover: var(--ds-color-neutral-200); 718 --ds-color-foreground-moderate: var(--ds-color-neutral-400); 719 --ds-color-foreground-moderate-hover: var(--ds-color-neutral-300); 720 --ds-color-foreground-strong: var(--ds-color-neutral-500); 721 --ds-color-foreground-strong-hover: var(--ds-color-neutral-400); 722 --ds-color-foreground-disabled: var(--ds-color-neutral-400); 723 --ds-color-foreground-white: var(--ds-color-base-white); 724 --ds-color-foreground-link: var(--ds-color-blue-400); 725 --ds-color-foreground-link-hover: var(--ds-color-blue-300); 726 --ds-color-foreground-error-main: var(--ds-color-red-500); 727 --ds-color-foreground-error-soft: var(--ds-color-red-400); 728 --ds-color-foreground-warning-main: var(--ds-color-amber-500); 729 --ds-color-foreground-warning-soft: var(--ds-color-amber-400); 730 --ds-color-foreground-success-main: var(--ds-color-green-500); 731 --ds-color-foreground-success-soft: var(--ds-color-green-400); 732 --ds-color-foreground-form-selected: var(--ds-color-neutral-900); 733 --ds-color-text-main: var(--ds-color-neutral-50); 734 --ds-color-text-main-onbrand: var(--ds-color-base-white); 735 --ds-color-text-soft: var(--ds-color-neutral-300); 736 --ds-color-text-soft-hover: var(--ds-color-neutral-200); 737 --ds-color-text-soft-onbrand: var(--ds-color-neutral-300); 738 --ds-color-text-moderate: var(--ds-color-neutral-400); 739 --ds-color-text-moderate-hover: var(--ds-color-neutral-300); 740 --ds-color-text-moderate-onbrand: var(--ds-color-neutral-400); 741 --ds-color-text-strong: var(--ds-color-neutral-400); 742 --ds-color-text-strong-hover: var(--ds-color-neutral-300); 743 --ds-color-text-strong-onbrand: var(--ds-color-neutral-400); 744 --ds-color-text-disabled: var(--ds-color-neutral-400); 745 --ds-color-text-placeholder: var(--ds-color-neutral-400); 746 --ds-color-text-white: var(--ds-color-base-white); 747 --ds-color-text-link: var(--ds-color-blue-400); 748 --ds-color-text-link-hover: var(--ds-color-blue-300); 749 --ds-color-text-brand-main: var(--ds-color-neutral-50); 750 --ds-color-text-brand-main-hover: var(--ds-color-neutral-25); 751 --ds-color-text-brand-soft: var(--ds-color-neutral-400); 752 --ds-color-text-brand-soft-hover: var(--ds-color-neutral-300); 753 --ds-color-text-error-main: var(--ds-color-red-400); 754 --ds-color-text-error-main-hover: var(--ds-color-red-300); 755 --ds-color-text-error-soft: var(--ds-color-red-600); 756 --ds-color-text-warning-main: var(--ds-color-amber-400); 757 --ds-color-text-warning-soft: var(--ds-color-amber-600); 758 --ds-color-text-success-main: var(--ds-color-green-400); 759 --ds-color-text-success-soft: var(--ds-color-green-600); 760 --ds-color-text-blue-outline: var(--ds-color-blue-400); 761 --ds-color-text-violet-outline: var(--ds-color-violet-400); 762 --ds-color-text-yellow-outline: var(--ds-color-yellow-400); 763 --ds-color-text-grey-outline: var(--ds-color-neutral-400); 764 --ds-color-text-green-outline: var(--ds-color-green-400); 765 --ds-color-text-orange-outline: var(--ds-color-amber-400); 766 --ds-color-text-red-outline: var(--ds-color-red-400); 767 --ds-color-text-blue-solid: var(--ds-color-blue-800); 768 --ds-color-text-violet-solid: var(--ds-color-violet-800); 769 --ds-color-text-yellow-solid: var(--ds-color-yellow-900); 770 --ds-color-text-grey-solid: var(--ds-color-neutral-800); 771 --ds-color-text-green-solid: var(--ds-color-green-800); 772 --ds-color-text-orange-solid: var(--ds-color-amber-900); 773 --ds-color-text-red-solid: var(--ds-color-red-800); 774 --ds-color-surface-link-pressed: var(--ds-color-actions-ring); 775 --ds-color-surface-brand-main: var(--ds-color-brand-1000); 776 --ds-color-surface-brand-moderate: var(--ds-color-brand-900); 777 --ds-color-surface-brand-solid: var(--ds-color-brand-700); 778 --ds-color-surface-brand-solid-hover: var(--ds-color-brand-600); 779 --ds-color-surface-brand-solid-pressed: var(--ds-color-brand-600); 780 --ds-color-surface-form-selected: var(--ds-color-surface-inverse); 781 --ds-color-border-brand-main: var(--ds-color-brand-400); 782 --ds-color-border-brand-soft: var(--ds-color-brand-400); 783 --ds-color-border-brand-strong: var(--ds-color-brand-600); 784 --ds-color-foreground-brand-main: var(--ds-color-brand-500); 785 --ds-color-foreground-brand-main-hover: var(--ds-color-brand-400); 786 --ds-color-foreground-brand-soft: var(--ds-color-brand-500); 787 --ds-color-foreground-brand-soft-hover: var(--ds-color-brand-600);
788 --ds-shadow-focus-ring-brand: 0 0 0 4px var(--ds-color-brand-800); 789 --ds-shadow-focus-ring-error: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 6px var(--ds-color-red-500); 790 --ds-shadow-focus-ring-actions: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 6px var(--ds-color-amber-400); 791} 792} 793@layer theme{ 794 795/** 796 * This theme is made by smartling dark theme, 797 * but all violet colors are replaced with teal. 798 */ 799 800[data-theme="light"][data-color-scheme="legacy"] { 801 --ds-color-border-transparent: rgba(0, 0, 0, 0); 802 --ds-shadow-focus-ring-default: 0 0 0 4px rgba(152,162,179,0.14); 803 --ds-shadow-standard-xs: 0 1px 2px 0 rgba(16,24,41,0.05); 804 --ds-shadow-standard-s: 0 1px 2px 0 rgba(16,24,41,0.06), 0 2px 3px 0 rgba(16,24,41,0.10); 805 --ds-shadow-standard-m: 0 2px 4px -2px rgba(16,24,41,0.06), 0 4px 8px 2px rgba(16,24,41,0.10); 806 --ds-shadow-standard-l: 0 4px 6px -2px rgba(16,24,41,0.03), 0 12px 16px -4px rgba(16,24,41,0.08); 807 --ds-shadow-standard-xl: 0 8px 8px -4px rgba(16,24,41,0.03), 0 20px 24px -4px rgba(16,24,41,0.08); 808 --ds-shadow-standard-2xl: 0 24px 48px -12px rgba(16,24,41,0.18); 809 --ds-shadow-standard-3xl: 0 32px 64px -12px rgba(16,24,41,0.14); 810 --ds-blur-default-background-filter: blur(1px); 811 --ds-blur-default-background-color: rgba(0, 0, 0, 0.4); 812 --ds-color-surface-main: var(--ds-color-base-white); 813 --ds-color-surface-main-hover: var(--ds-color-neutral-100); /* Primary background hover color. This acts as the default hover state background color for components with white backgrounds (input dropdown menu items, buttons etc). */ 814 --ds-color-surface-soft: var(--ds-color-neutral-50); 815 --ds-color-surface-moderate: var(--ds-color-neutral-100); 816 --ds-color-surface-strong: var(--ds-color-neutral-300); 817 --ds-color-surface-disabled: var(--ds-color-neutral-100); 818 --ds-color-surface-solid: var(--ds-color-neutral-1000); /* The darkest background-color used across layouts and components. This switches to surface.soft when in dark mode and is useful for components such as tooltips and WYSIWYG tooltips. */ 819 --ds-color-surface-inverse: var(--ds-color-neutral-900); 820 --ds-color-surface-link-pressed: var(--ds-color-amber-300); 821 --ds-color-surface-error-main: var(--ds-color-red-50); 822 --ds-color-surface-error-moderate: var(--ds-color-red-100); 823 --ds-color-surface-error-solid: var(--ds-color-red-600); 824 --ds-color-surface-error-solid-hover: var(--ds-color-red-700); 825 --ds-color-surface-warning-main: var(--ds-color-amber-50); 826 --ds-color-surface-warning-moderate: var(--ds-color-amber-100); 827 --ds-color-surface-warning-solid: var(--ds-color-amber-600); 828 --ds-color-surface-warning-solid-hover: var(--ds-color-amber-700); 829 --ds-color-surface-success-main: var(--ds-color-green-50); 830 --ds-color-surface-success-moderate: var(--ds-color-green-50); 831 --ds-color-surface-success-solid: var(--ds-color-green-600); 832 --ds-color-surface-success-solid-hover: var(--ds-color-green-700); 833 --ds-color-surface-brand-main: var(--ds-color-teal-50); 834 --ds-color-surface-brand-moderate: var(--ds-color-teal-100); 835 --ds-color-surface-brand-solid: var(--ds-color-teal-600); 836 --ds-color-surface-brand-solid-hover: var(--ds-color-teal-700); 837 --ds-color-border-main: var(--ds-color-neutral-300); 838 --ds-color-border-soft: var(--ds-color-neutral-200); 839 /* neutral-200, not neutral-100: Figma resolves color/border/moderate to #e8e9e9 in 840 legacy-light, distinctly lighter than the #f2f2f2 it gives color/surface/moderate. 841 Mapping both to neutral-100 collapsed them, so every border bound to this token was 842 the same colour as the surface behind it and did not render. neutral-200 #e5e5e5 is 843 the nearest we have, and matches what modern-light already maps this token to. */ 844 --ds-color-border-moderate: var(--ds-color-neutral-200); 845 --ds-color-border-disabled: var(--ds-color-neutral-300); 846 --ds-color-border-solid: var(--ds-color-base-black); 847 --ds-color-border-error-main: var(--ds-color-red-500); 848 --ds-color-border-error-soft: var(--ds-color-red-300); 849 --ds-color-border-error-strong: var(--ds-color-red-800); 850 --ds-color-border-brand-main: var(--ds-color-teal-500); 851 --ds-color-border-brand-soft: var(--ds-color-teal-300); 852 --ds-color-border-brand-strong: var(--ds-color-teal-800); 853 --ds-color-border-success-main: var(--ds-color-green-500); 854 --ds-color-border-success-soft: var(--ds-color-green-300); 855 --ds-color-border-success-strong: var(--ds-color-green-800); 856 --ds-color-border-warning-main: var(--ds-color-amber-500); 857 --ds-color-border-warning-soft: var(--ds-color-amber-300); 858 --ds-color-border-warning-strong: var(--ds-color-amber-800); 859 --ds-color-foreground-main: var(--ds-color-neutral-900); /* Foreground color tokens are made to manage all non-text foreground elements in designs across (light/dark) themes, like icons, arrows, etc */ 860 --ds-color-foreground-main-onbrand: var(--ds-color-base-white); /* Foreground color tokens are made to manage all non-text foreground elements in designs across (light/dark) themes, like icons, arrows, etc */ 861 --ds-color-foreground-soft: var(--ds-color-neutral-700); 862 --ds-color-foreground-soft-hover: var(--ds-color-neutral-800); 863 --ds-color-foreground-moderate: var(--ds-color-neutral-600); 864 --ds-color-foreground-moderate-hover: var(--ds-color-neutral-700); 865 --ds-color-foreground-strong: var(--ds-color-neutral-400); 866 --ds-color-foreground-strong-hover: var(--ds-color-neutral-500); 867 --ds-color-foreground-disabled: var(--ds-color-neutral-400); 868 --ds-color-foreground-white: var(--ds-color-base-white); 869 --ds-color-foreground-link: var(--ds-color-teal-600); 870 --ds-color-foreground-link-hover: var(--ds-color-teal-800); 871 --ds-color-foreground-brand-main: var(--ds-color-teal-700); 872 --ds-color-foreground-brand-main-hover: var(--ds-color-teal-300); 873 --ds-color-foreground-brand-soft: var(--ds-color-teal-600); 874 --ds-color-foreground-brand-soft-hover: var(--ds-color-teal-700); 875 --ds-color-foreground-error-main: var(--ds-color-red-700); 876 --ds-color-foreground-error-soft: var(--ds-color-red-600); 877 --ds-color-foreground-warning-main: var(--ds-color-amber-700); 878 --ds-color-foreground-warning-soft: var(--ds-color-amber-600); 879 --ds-color-foreground-success-main: var(--ds-color-green-700); 880 --ds-color-foreground-success-soft: var(--ds-color-green-600); 881 --ds-color-foreground-form-selected: var(--ds-color-base-white); 882 --ds-color-text-main: var(--ds-color-neutral-800); /* Text color tokens to manage all text fill colors in designs across (light/dark) themes. */ 883 --ds-color-text-main-onbrand: var(--ds-color-base-white); /* Primary text when used on solid brand color backgrounds. Commonly used for brand theme /primary buttons, for example. */ 884 --ds-color-text-soft: var(--ds-color-neutral-700); 885 --ds-color-text-soft-hover: var(--ds-color-neutral-800); 886 --ds-color-text-soft-onbrand: var(--ds-color-teal-200); 887 --ds-color-text-moderate: var(--ds-color-neutral-600); 888 --ds-color-text-moderate-hover: var(--ds-color-neutral-700); 889 --ds-color-text-moderate-onbrand: var(--ds-color-teal-200); 890 --ds-color-text-strong: var(--ds-color-neutral-400); 891 --ds-color-text-strong-hover: var(--ds-color-neutral-500); 892 --ds-color-text-strong-onbrand: var(--ds-color-teal-300); 893 --ds-color-text-disabled: var(--ds-color-neutral-400); 894 --ds-color-text-placeholder: var(--ds-color-neutral-500); 895 --ds-color-text-white: var(--ds-color-base-white); 896 --ds-color-text-link: var(--ds-color-teal-600); 897 --ds-color-text-link-hover: var(--ds-color-teal-800); 898 --ds-color-text-brand-main: var(--ds-color-teal-700); 899 --ds-color-text-brand-main-hover: var(--ds-color-teal-800); 900 --ds-color-text-brand-soft: var(--ds-color-teal-600); 901 --ds-color-text-brand-soft-hover: var(--ds-color-teal-700); 902 --ds-color-text-error-main: var(--ds-color-red-600); 903 --ds-color-text-error-soft: var(--ds-color-red-700); 904 --ds-color-text-warning-main: var(--ds-color-amber-600); 905 --ds-color-text-warning-soft: var(--ds-color-amber-700); 906 --ds-color-text-success-main: var(--ds-color-green-600); 907 --ds-color-text-success-soft: var(--ds-color-green-700);
908 --ds-shadow-focus-ring-brand: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-teal-600); 909 --ds-shadow-focus-ring-error: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-red-500); 910 --ds-color-surface-form-selected: var(--ds-color-surface-inverse); 911 --ds-shadow-focus-ring-actions: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-teal-600); 912 --ds-color-surface-main-pressed: var(--ds-color-neutral-200); 913 --ds-color-surface-error-solid-pressed: var(--ds-color-red-800); 914 --ds-color-surface-warning-solid-pressed: var(--ds-color-amber-800); 915 --ds-color-surface-success-solid-pressed: var(--ds-color-green-800); 916 --ds-color-surface-brand-solid-pressed: var(--ds-color-brand-800); 917 --ds-color-surface-blue-outline: var(--ds-color-blue-50); 918 --ds-color-text-blue-outline: var(--ds-color-blue-700); 919 --ds-color-border-blue-outline: var(--ds-color-blue-300); 920 --ds-color-surface-violet-outline: var(--ds-color-violet-50); 921 --ds-color-text-violet-outline: var(--ds-color-violet-700); 922 --ds-color-border-violet-outline: var(--ds-color-violet-300); 923 --ds-color-surface-yellow-outline: var(--ds-color-yellow-100); 924 --ds-color-text-yellow-outline: var(--ds-color-yellow-700); 925 --ds-color-border-yellow-outline: var(--ds-color-yellow-500); 926 --ds-color-surface-grey-outline: var(--ds-color-neutral-50); 927 --ds-color-text-grey-outline: var(--ds-color-neutral-700); 928 --ds-color-border-grey-outline: var(--ds-color-neutral-300); 929 --ds-color-text-green-outline: var(--ds-color-green-700); 930 --ds-color-border-green-outline: var(--ds-color-green-300); 931 --ds-color-surface-orange-outline: var(--ds-color-amber-100); 932 --ds-color-text-orange-outline: var(--ds-color-amber-900); 933 --ds-color-border-orange-outline: var(--ds-color-amber-500); 934 --ds-color-text-red-outline: var(--ds-color-red-700); 935 --ds-color-border-red-outline: var(--ds-color-red-300); 936 --ds-color-surface-blue-solid: var(--ds-color-blue-700); 937 --ds-color-surface-violet-solid: var(--ds-color-violet-700); 938 --ds-color-surface-yellow-solid: var(--ds-color-yellow-400); 939 --ds-color-surface-grey-solid: var(--ds-color-neutral-700); 940 --ds-color-surface-green-solid: var(--ds-color-green-700); 941 --ds-color-surface-orange-solid: var(--ds-color-amber-500); 942 --ds-color-text-orange-solid: var(--ds-color-amber-1000); 943 --ds-color-surface-red-solid: var(--ds-color-red-600); 944 --ds-color-surface-green-outline: var(--ds-color-surface-success-main); 945 --ds-color-surface-red-outline: var(--ds-color-surface-error-main); 946 --ds-color-text-blue-solid: var(--ds-color-text-main-onbrand); 947 --ds-color-text-violet-solid: var(--ds-color-text-main-onbrand); 948 --ds-color-text-yellow-solid: var(--ds-color-text-main); 949 --ds-color-text-grey-solid: var(--ds-color-text-main-onbrand); 950 --ds-color-text-green-solid: var(--ds-color-text-main-onbrand); 951 --ds-color-text-red-solid: var(--ds-color-text-main-onbrand); 952 --ds-color-text-error-main-hover: var(--ds-color-red-800); 953 --ds-color-surface-blue-moderate: var(--ds-color-blue-100); 954 --ds-color-surface-violet-moderate: var(--ds-color-violet-100); 955 /* support for hard changes in variable naming */ 956 --ds-shadow-standard-xxl: var(--ds-shadow-standard-2xl); 957} 958} 959@layer theme{ 960 961/** 962 * This theme is made by smartling dark theme, 963 * but all violet colors are replaced with teal. 964 */ 965 966[data-theme="dark"][data-color-scheme="legacy"] { 967 --ds-color-border-transparent: rgba(0, 0, 0, 0); 968 --ds-shadow-focus-ring-default: 0 0 0 4px rgba(152,162,179,0.14); 969 --ds-shadow-standard-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2); 970 --ds-shadow-standard-s: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 3px 0 rgba(0, 0, 0, 0.15); 971 --ds-shadow-standard-m: 0 2px 4px -2px rgba(0, 0, 0, 0.3), 0 4px 8px 2px rgba(0, 0, 0, 0.15); 972 --ds-shadow-standard-l: 0 4px 6px -2px rgba(0, 0, 0, 0.2), 0 12px 16px -4px rgba(0, 0, 0, 0.1); 973 --ds-shadow-standard-xl: 0 8px 8px -4px rgba(0, 0, 0, 0.2), 0 20px 24px -4px rgba(0, 0, 0, 0.1); 974 --ds-shadow-standard-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.25); 975 --ds-shadow-standard-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.2); 976 --ds-blur-default-background-filter: blur(1px); 977 --ds-blur-default-background-color: rgba(0, 0, 0, 0.4); 978 --ds-color-surface-main: var(--ds-color-neutral-900); 979 --ds-color-surface-main-hover: var(--ds-color-neutral-800); /* Primary background hover color. This acts as the default hover state background color for components with white backgrounds (input dropdown menu items, buttons etc). */ 980 --ds-color-surface-soft: var(--ds-color-neutral-800); 981 --ds-color-surface-moderate: var(--ds-color-neutral-700); 982 --ds-color-surface-strong: var(--ds-color-neutral-600); 983 --ds-color-surface-disabled: var(--ds-color-neutral-800); 984 --ds-color-surface-solid: var(--ds-color-neutral-800); /* The darkest background-color used across layouts and components. This switches to surface.soft when in dark mode and is useful for components such as tooltips and WYSIWYG tooltips. */ 985 --ds-color-surface-inverse: var(--ds-color-base-white); 986 --ds-color-surface-link-pressed: var(--ds-color-amber-400); 987 --ds-color-surface-error-main: var(--ds-color-red-1000); 988 --ds-color-surface-error-moderate: var(--ds-color-red-800); 989 --ds-color-surface-error-solid: var(--ds-color-red-600); 990 --ds-color-surface-error-solid-hover: var(--ds-color-red-700); 991 --ds-color-surface-warning-main: var(--ds-color-amber-1000); 992 --ds-color-surface-warning-moderate: var(--ds-color-amber-900); 993 --ds-color-surface-warning-solid: var(--ds-color-amber-700); 994 --ds-color-surface-warning-solid-hover: var(--ds-color-amber-600); 995 --ds-color-surface-success-main: var(--ds-color-green-1000); 996 --ds-color-surface-success-moderate: var(--ds-color-green-900); 997 --ds-color-surface-success-solid: var(--ds-color-green-600); 998 --ds-color-surface-success-solid-hover: var(--ds-color-green-700); 999 --ds-color-surface-brand-main: var(--ds-color-teal-1000); 1000 --ds-color-surface-brand-moderate: var(--ds-color-teal-900); 1001 --ds-color-surface-brand-solid: var(--ds-color-teal-600); 1002 --ds-color-surface-brand-solid-hover: var(--ds-color-teal-500); 1003 --ds-color-border-main: var(--ds-color-neutral-700); 1004 --ds-color-border-solid: var(--ds-color-base-white); 1005 --ds-color-border-soft: var(--ds-color-neutral-800); 1006 --ds-color-border-moderate: var(--ds-color-neutral-800); 1007 --ds-color-border-disabled: var(--ds-color-neutral-700); 1008 --ds-color-border-error-main: var(--ds-color-red-400); 1009 --ds-color-border-error-soft: var(--ds-color-red-400); 1010 --ds-color-border-error-strong: var(--ds-color-red-600); 1011 --ds-color-border-brand-main: var(--ds-color-teal-400); 1012 --ds-color-border-brand-soft: var(--ds-color-teal-400); 1013 --ds-color-border-brand-strong: var(--ds-color-teal-600); 1014 --ds-color-border-success-main: var(--ds-color-green-400); 1015 --ds-color-border-success-soft: var(--ds-color-green-400); 1016 --ds-color-border-success-strong: var(--ds-color-green-600); 1017 --ds-color-border-warning-main: var(--ds-color-amber-400); 1018 --ds-color-border-warning-soft: var(--ds-color-amber-400); 1019 --ds-color-border-warning-strong: var(--ds-color-amber-600); 1020 --ds-color-foreground-main: var(--ds-color-base-white); /* Foreground color tokens are made to manage all non-text foreground elements in designs across (light/dark) themes, like icons, arrows, etc */ 1021 --ds-color-foreground-main-onbrand: var(--ds-color-base-white); /* Foreground color tokens are made to manage all non-text foreground elements in designs across (light/dark) themes, like icons, arrows, etc */ 1022 --ds-color-foreground-soft: var(--ds-color-neutral-300); 1023 --ds-color-foreground-soft-hover: var(--ds-color-neutral-200); 1024 --ds-color-foreground-moderate: var(--ds-color-neutral-400); 1025 --ds-color-foreground-moderate-hover: var(--ds-color-neutral-300); 1026 --ds-color-foreground-strong: var(--ds-color-neutral-500); 1027 --ds-color-foreground-strong-hover: var(--ds-color-neutral-400); 1028 --ds-color-foreground-disabled: var(--ds-color-neutral-400); 1029 --ds-color-foreground-white: var(--ds-color-base-white); 1030 --ds-color-foreground-link: var(--ds-color-teal-600); 1031 --ds-color-foreground-link-hover: var(--ds-color-blue-400); 1032 --ds-color-foreground-brand-main: var(--ds-color-teal-500); 1033 --ds-color-foreground-brand-main-hover: var(--ds-color-teal-400); 1034 --ds-color-foreground-brand-soft: var(--ds-color-teal-500); 1035 --ds-color-foreground-brand-soft-hover: var(--ds-color-teal-600); 1036 --ds-color-foreground-error-main: var(--ds-color-red-500); 1037 --ds-color-foreground-error-soft: var(--ds-color-red-400); 1038 --ds-color-foreground-warning-main: var(--ds-color-amber-500); 1039 --ds-color-foreground-warning-soft: var(--ds-color-amber-400); 1040 --ds-color-foreground-success-main: var(--ds-color-green-500); 1041 --ds-color-foreground-success-soft: var(--ds-color-green-400); 1042 --ds-color-foreground-form-selected: var(--ds-color-neutral-900); 1043 --ds-color-text-main: var(--ds-color-neutral-50); /* Text color tokens to manage all text fill colors in designs across (light/dark) themes. */ 1044 --ds-color-text-main-onbrand: var(--ds-color-base-white); /* Primary text when used on solid brand color backgrounds. Commonly used for brand theme /primary buttons, for example. */ 1045 --ds-color-text-soft: var(--ds-color-neutral-300); 1046 --ds-color-text-soft-hover: var(--ds-color-neutral-200); 1047 --ds-color-text-soft-onbrand: var(--ds-color-neutral-300); 1048 --ds-color-text-moderate: var(--ds-color-neutral-400); 1049 --ds-color-text-moderate-hover: var(--ds-color-neutral-300); 1050 --ds-color-text-moderate-onbrand: var(--ds-color-neutral-400); 1051 --ds-color-text-strong: var(--ds-color-neutral-400); 1052 --ds-color-text-strong-hover: var(--ds-color-neutral-300); 1053 --ds-color-text-strong-onbrand: var(--ds-color-neutral-400); 1054 --ds-color-text-disabled: var(--ds-color-neutral-500); 1055 --ds-color-text-placeholder: var(--ds-color-neutral-400); 1056 --ds-color-text-white: var(--ds-color-base-white); 1057 --ds-color-text-link: var(--ds-color-teal-600); 1058 --ds-color-text-link-hover: var(--ds-color-blue-400); 1059 --ds-color-text-brand-main: var(--ds-color-neutral-50); 1060 --ds-color-text-brand-main-hover: var(--ds-color-neutral-25); 1061 --ds-color-text-brand-soft: var(--ds-color-neutral-400); 1062 --ds-color-text-brand-soft-hover: var(--ds-color-neutral-300); 1063 --ds-color-text-error-main: var(--ds-color-red-400); 1064 --ds-color-text-error-soft: var(--ds-color-red-600); 1065 --ds-color-text-warning-main: var(--ds-color-amber-400); 1066 --ds-color-text-warning-soft: var(--ds-color-amber-600); 1067 --ds-color-text-success-main: var(--ds-color-green-400); 1068 --ds-color-text-success-soft: var(--ds-color-green-600);
1069 --ds-shadow-focus-ring-brand: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-teal-500); 1070 --ds-shadow-focus-ring-error: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-red-500); 1071 --ds-color-surface-form-selected: var(--ds-color-surface-inverse); 1072 --ds-shadow-focus-ring-actions: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-teal-500); 1073 --ds-color-surface-main-pressed: var(--ds-color-neutral-700); 1074 --ds-color-surface-error-solid-pressed: var(--ds-color-red-400); 1075 --ds-color-surface-warning-solid-pressed: var(--ds-color-amber-600); 1076 --ds-color-surface-success-solid-pressed: var(--ds-color-green-600); 1077 --ds-color-surface-brand-solid-pressed: var(--ds-color-brand-600); 1078 --ds-color-surface-blue-outline: var(--ds-color-blue-1000); 1079 --ds-color-text-blue-outline: var(--ds-color-blue-400); 1080 --ds-color-border-blue-outline: var(--ds-color-blue-400); 1081 --ds-color-surface-violet-outline: var(--ds-color-violet-1000); 1082 --ds-color-text-violet-outline: var(--ds-color-violet-400); 1083 --ds-color-border-violet-outline: var(--ds-color-violet-400); 1084 --ds-color-surface-yellow-outline: var(--ds-color-yellow-1000); 1085 --ds-color-text-yellow-outline: var(--ds-color-yellow-400); 1086 --ds-color-border-yellow-outline: var(--ds-color-yellow-400); 1087 --ds-color-surface-grey-outline: var(--ds-color-neutral-1000); 1088 --ds-color-text-grey-outline: var(--ds-color-neutral-400); 1089 --ds-color-border-grey-outline: var(--ds-color-neutral-400); 1090 --ds-color-surface-green-outline: var(--ds-color-green-1000); 1091 --ds-color-text-green-outline: var(--ds-color-green-400); 1092 --ds-color-border-green-outline: var(--ds-color-green-400); 1093 --ds-color-surface-orange-outline: var(--ds-color-amber-1000); 1094 --ds-color-text-orange-outline: var(--ds-color-amber-400); 1095 --ds-color-border-orange-outline: var(--ds-color-amber-400); 1096 --ds-color-surface-red-outline: var(--ds-color-red-1000); 1097 --ds-color-text-red-outline: var(--ds-color-red-400); 1098 --ds-color-border-red-outline: var(--ds-color-red-400); 1099 --ds-color-surface-blue-solid: var(--ds-color-blue-200); 1100 --ds-color-text-blue-solid: var(--ds-color-blue-800); 1101 --ds-color-surface-violet-solid: var(--ds-color-violet-200); 1102 --ds-color-text-violet-solid: var(--ds-color-violet-800); 1103 --ds-color-surface-yellow-solid: var(--ds-color-yellow-200); 1104 --ds-color-text-yellow-solid: var(--ds-color-yellow-900); 1105 --ds-color-surface-grey-solid: var(--ds-color-neutral-200); 1106 --ds-color-text-grey-solid: var(--ds-color-neutral-800); 1107 --ds-color-surface-green-solid: var(--ds-color-green-200); 1108 --ds-color-text-green-solid: var(--ds-color-green-800); 1109 --ds-color-surface-orange-solid: var(--ds-color-amber-300); 1110 --ds-color-text-orange-solid: var(--ds-color-amber-900); 1111 --ds-color-surface-red-solid: var(--ds-color-red-200); 1112 --ds-color-text-red-solid: var(--ds-color-red-800); 1113 --ds-color-text-error-main-hover: var(--ds-color-red-300); 1114 --ds-color-surface-blue-moderate: var(--ds-color-blue-900); 1115 --ds-color-surface-violet-moderate: var(--ds-color-violet-900); 1116 /* support for hard changes in variable naming */ 1117 --ds-shadow-standard-xxl: var(--ds-shadow-standard-2xl); 1118} 1119} 1120/* Layer 4: Font size overrides (large text mode) */ 1121@layer large-font{ 1122 1123/** 1124 * Do not edit directly, this file was auto-generated. 1125 */ 1126 1127[data-font-size="large"] { 1128 --ds-global-size-universal-scale: 1rem; 1129 --ds-font-size-rem: 1rem; 1130 --ds-font-size-html: 20px; 1131} 1132} 1133/* Layer 5: Component-specific variables */ 1134@layer components{ 1135:root, :host { 1136 /* Item */ 1137 /* Box/Collapsed "Container fill" Default -> color/surface/moderate */ 1138 --ds-accordion-item-background-color-box: var(--ds-color-surface-moderate); 1139 /* Box/Collapsed "Container fill" Hover & Focus -> color/surface/main-pressed */ 1140 --ds-accordion-item-background-color-box-hovered: var(--ds-color-surface-main-pressed); 1141 /* Box/Expanded "Container fill" -> color/surface/main (white); the Header keeps 1142 -background-box (moderate) so the two-tone split only appears once expanded */ 1143 --ds-accordion-item-background-color-box-expanded: var(--ds-color-surface-main); 1144 /* Box/Expanded container shadow -> shadow/standard/xs (absent when collapsed) */ 1145 --ds-accordion-item-box-shadow-expanded: var(--ds-shadow-standard-xs); 1146 /* Box's stroke is a real border wrapping a filled, rounded container, so it 1147 occupies layout and the Trigger subtracts this width twice for that variant 1148 (see Trigger/styles.module.css). Outline and No border draw their block 1149 strokes as box-shadow instead -- outside the row, taking no layout space -- 1150 so every variant's item border-box lands exactly on the height token. */ 1151 --ds-accordion-item-border-width: var(--ds-border-width-tier-2); 1152 /* Box/Expanded "Container stroke" -> color/border/moderate; Box style renders a
1153 1px border on all sides per Structure (only the expanded section names a 1154 stroke color, so it is reused for the collapsed box border too) */ 1155 --ds-accordion-item-border-box: var(--ds-accordion-item-border-width) solid var(--ds-color-border-moderate); 1156 /* Outline/Collapsed & Outline/Expanded "Container stroke" Default -> color/border/soft. 1157 Block-start + block-end only, drawn as a pair of hard 1px shadows so the rules 1158 sit immediately outside the row instead of inflating it. */ 1159 --ds-accordion-item-box-shadow-outline: 1160 0 calc(-1 * var(--ds-accordion-item-border-width)) 0 0 var(--ds-color-border-soft), 1161 0 var(--ds-accordion-item-border-width) 0 0 var(--ds-color-border-soft); 1162 /* Outline Hover "Container stroke" -> color/border/main. Outline only: Box swaps its 1163 container fill instead (-background-color-box-hovered), and No border has stroke 1164 weight 0 in every state including Hover, so it must not consume this. */ 1165 --ds-accordion-item-box-shadow-hovered: 1166 0 calc(-1 * var(--ds-accordion-item-border-width)) 0 0 var(--ds-color-border-main), 1167 0 var(--ds-accordion-item-border-width) 0 0 var(--ds-color-border-main); 1168 /* Figma "radius/m" -> --ds-radius-m (8px), confirmed via Figma's dev-mode 1169 CSS output (var(--radius-m, 8px)) */ 1170 --ds-accordion-item-border-radius: var(--ds-radius-m); 1171 /* "horizontalPadding" -> space/page/inside/m (16), Box style only */ 1172 --ds-accordion-item-padding-inline: var(--ds-space-page-inside-m); 1173 /* Outline/No border sit flush against the surrounding layout (no container fill to 1174 inset from), so they use a much tighter horizontal inset than Box -- matched 1175 by VALUE (2px) to dimension/tier/2, no space/page/inside token is that small */ 1176 --ds-accordion-item-padding-inline-tight: var(--ds-dimension-tier-2); 1177 1178 /* Trigger - size-scaled */ 1179 /* Figma "height" per size (40/48/56) -> size/actions/{xl,3xl,4xl}. Not three 1180 consecutive steps of the actions ramp -- -2xl (44) sits between xl and 3xl. 1181 This is the VISIBLE row height in every variant: Box's item box measures it 1182 outright, Outline/No border measure it between their strokes. */ 1183 --ds-accordion-trigger-height-sm: var(--ds-size-actions-xl); 1184 --ds-accordion-trigger-height-md: var(--ds-size-actions-3xl); 1185 --ds-accordion-trigger-height-lg: var(--ds-size-actions-4xl); 1186 1187 /* "leadingIconSize" per size -> size/icon/s (sm/md), size/icon/m (lg) */ 1188 --ds-accordion-trigger-icon-size-sm: var(--ds-size-icon-s); 1189 --ds-accordion-trigger-icon-size-md: var(--ds-size-icon-s); 1190 --ds-accordion-trigger-icon-size-lg: var(--ds-size-icon-m); 1191 1192 /* "textStyle" per size -> font/body/strongest/{s,m,l} */ 1193 --ds-accordion-trigger-title-font-sm: var(--ds-font-body-strongest-s); 1194 --ds-accordion-trigger-title-font-md: var(--ds-font-body-strongest-m); 1195 --ds-accordion-trigger-title-font-lg: var(--ds-font-body-strongest-l); 1196 1197 /* "trailingIconSize" per size -- Structure gives raw px (20/24/24) with no 1198 Figma token name; matched by VALUE to the closest size/icon/* token */ 1199 --ds-accordion-trigger-chevron-size-sm: var(--ds-size-icon-m); 1200 --ds-accordion-trigger-chevron-size-md: var(--ds-size-icon-l); 1201 --ds-accordion-trigger-chevron-size-lg: var(--ds-size-icon-l); 1202 1203 /* "badgeMinHeight" per size -> dimension/tier/8 (sm/md), dimension/tier/9 (lg) */ 1204 --ds-accordion-trigger-badge-min-height-sm: var(--ds-dimension-tier-8); 1205 --ds-accordion-trigger-badge-min-height-md: var(--ds-dimension-tier-8); 1206 --ds-accordion-trigger-badge-min-height-lg: var(--ds-dimension-tier-9); 1207 1208 /* Trigger - constants */ 1209 /* Figma "verticalPadding" is a constant 12 across all three sizes -- it does 1210 NOT scale with size -> space/page/inside/s. The per-size -height-* tokens 1211 above are authoritative for the row's measured height; at sm the 20px 1212 chevron is taller than the 16px content box this padding leaves, so the 1213 flex row centers it and the effective padding there is ~10px. */ 1214 --ds-accordion-trigger-padding-block: var(--ds-space-page-inside-s); 1215 /* "Content itemSpacing" (title cluster <-> chevron) = 24, no Figma token name 1216 given; matched by VALUE to space/page/inside/xl */ 1217 --ds-accordion-trigger-gap: var(--ds-space-page-inside-xl); 1218 /* "Text and icons itemSpacing" (icon <-> title <-> badge) = 8, no Figma token 1219 name given; matched by VALUE to space/page/inside/xs */ 1220 --ds-accordion-trigger-title-cluster-gap: var(--ds-space-page-inside-xs); 1221 1222 /* Trigger - color/state */ 1223 /* "Title label" Default -> color/text/soft (constant across Outline/No border and 1224 Box/Collapsed; Box/Expanded's Default of color/text/main is applied by the 1225 component layer via [data-open], reusing -color-hovered below) */ 1226 --ds-accordion-trigger-color: var(--ds-color-text-soft); 1227 /* "Title label" Hover -> color/text/main (constant across every Style x 1228 Expanded section) */ 1229 --ds-accordion-trigger-color-hovered: var(--ds-color-text-main); 1230 /* Chevron fill ->
1230 color/foreground/strong (constant, does not follow the 1231 title's hover/expanded color changes) */ 1232 --ds-accordion-trigger-chevron-color: var(--ds-color-foreground-strong); 1233 /* Outline + No border Focus: Figma highlights the title label itself 1234 ("Title label" fill -> color/surface/link-pressed) rather than drawing the 1235 Box variant's ring around the item. */ 1236 --ds-accordion-trigger-title-background-color-focused: var(--ds-color-surface-link-pressed); 1237 1238 /* Header */ 1239 /* Box Header "Container fill" -> color/surface/moderate, constant across 1240 Collapsed/Expanded. Blends into the item's own Box/Collapsed background 1241 (also -moderate); only visible as a distinct band once Expanded switches 1242 the item's own background to -background-box-expanded (white). */ 1243 --ds-accordion-header-background-color-box: var(--ds-color-surface-moderate); 1244 /* Box/Expanded "Header stroke" -> color/border/moderate; renders as the 1px 1245 divider under the Header row when the item is open */ 1246 --ds-accordion-header-divider-color: var(--ds-color-border-moderate); 1247 /* Expanded state Header "borderWidthBottom" = 1 */ 1248 --ds-accordion-header-divider-width: var(--ds-border-width-tier-2); 1249 /* Focus ring (outer) + Focus ring (inner) -> shadow/focus-ring/actions (the two Figma 1250 rows are already the outer+inner pair baked into this one token). Box only -- 1251 Outline and No border mark focus on the title instead (see the Trigger group). 1252 Applied on Header, not Item, so the ring wraps only the header row -- an open
1253 item no longer rings its own expanded panel too. */ 1254 --ds-accordion-header-focus-ring-shadow: var(--ds-shadow-focus-ring-actions); 1255 1256 /* Panel */ 1257 /* paddingTop=space/page/inside/l (20) / paddingBottom=space/page/inside/m (16) */ 1258 --ds-accordion-panel-padding-block: var(--ds-space-page-inside-l) var(--ds-space-page-inside-m); 1259 /* Expanded "Body container" horizontalPadding -> space/page/inside/m (16) */ 1260 --ds-accordion-panel-body-padding-inline: var(--ds-space-page-inside-m); 1261 /* "Body container" itemSpacing = 8, no Figma token name given; matched by 1262 VALUE to space/page/inside/xs */ 1263 --ds-accordion-panel-body-gap: var(--ds-space-page-inside-xs); 1264 1265 /* Motion */ 1266 /* No --ds-motion-* / --ds-transition-* semantic token exists in the theme yet 1267 (see packages/components/expandable/README.md for the same unimplemented 1268 precedent, --ds-expandable-transition-duration/-timing-function). Using 1269 literal values consistent with that precedent (target: 200ms / ease-out). */ 1270 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "200ms" with a semantic token; no --ds-motion-duration-* token exists yet */ 1271 --ds-accordion-transition-duration: 200ms; 1272 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "ease-out" with a semantic token; no --ds-motion-easing-* token exists yet */ 1273 --ds-accordion-transition-timing-function: ease-out; 1274} 1275} 1276@layer components{ 1277:root, :host { 1278 /* Avatar shape */ 1279 --ds-avatar-border-radius: var(--ds-radius-full); 1280 1281 /* Avatar sizes (width = height) */ 1282 --ds-avatar-size-xs: var(--ds-dimension-tier-9); 1283 --ds-avatar-size-sm: var(--ds-dimension-tier-11); 1284 --ds-avatar-size-md: var(--ds-dimension-tier-13); 1285 --ds-avatar-size-lg: var(--ds-dimension-tier-15); 1286 --ds-avatar-size-xl: var(--ds-dimension-tier-17); 1287 --ds-avatar-size-2xl: var(--ds-dimension-tier-18); 1288 1289 /* Avatar contrast border */ 1290 --ds-avatar-border-color: var(--ds-color-border-solid); 1291 --ds-avatar-border-width: var(--ds-border-width-tier-1); 1292 /* No exact opacity token for 0.08; closest is --ds-opacity-light (0.15) */ 1293 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0.08" with a semantic token */ 1294 --ds-avatar-border-opacity: 0.08; 1295 1296 /* Avatar fallback (initials) */ 1297 --ds-avatar-fallback-background-color: var(--ds-color-surface-soft); 1298 --ds-avatar-fallback-color: var(--ds-color-text-soft); 1299 1300 --ds-avatar-fallback-font-xs: var(--ds-font-body-strong-xs); 1301 --ds-avatar-fallback-font-sm: var(--ds-font-body-strong-xs); 1302 --ds-avatar-fallback-font-md: var(--ds-font-body-strong-s); 1303 --ds-avatar-fallback-font-lg: var(--ds-font-body-strong-m); 1304 --ds-avatar-fallback-font-xl: var(--ds-font-body-strong-l); 1305 --ds-avatar-fallback-font-2xl: var(--ds-font-body-strong-xl); 1306} 1307} 1308@layer components{ 1309:root, :host { 1310 /* Badge base (neutral variant) */ 1311 --ds-badge-color: var(--ds-color-text-soft); 1312 --ds-badge-background-color: var(--ds-color-surface-soft); 1313 --ds-badge-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft); 1314 --ds-badge-border-radius: var(--ds-radius-full); 1315 1316 /* Badge success variant â text uses -main (darker, emphasis) for contrast on the soft bg */ 1317 --ds-badge-color-success: var(--ds-color-text-success-main); 1318 --ds-badge-background-color-success: var(--ds-color-surface-success-main); 1319 --ds-badge-border-success: var(--ds-border-width-tier-2) solid var(--ds-color-border-success-main); 1320 1321 /* Badge warning variant */ 1322 --ds-badge-color-warning: var(--ds-color-text-warning-main); 1323 --ds-badge-background-color-warning: var(--ds-color-surface-warning-main); 1324 --ds-badge-border-warning: var(--ds-border-width-tier-2) solid var(--ds-color-border-warning-main); 1325 1326 /* Badge error variant */ 1327 --ds-badge-color-error: var(--ds-color-text-error-main); 1328 --ds-badge-background-color-error: var(--ds-color-surface-error-main); 1329 --ds-badge-border-error: var(--ds-border-width-tier-2) solid var(--ds-color-border-error-main); 1330 1331 /* Badge outline color tokens â alias to theme-palette tokens (theme-aware via light/dark CSS) */ 1332 --ds-badge-color-outline-grey: var(--ds-color-text-grey-outline); 1333 --ds-badge-background-color-outline-grey: var(--ds-color-surface-grey-outline); 1334 --ds-badge-border-outline-grey: var(--ds-border-width-tier-2) solid var(--ds-color-border-grey-outline); 1335 1336 --ds-badge-color-outline-blue: var(--ds-color-text-blue-outline); 1337 --ds-badge-background-color-outline-blue: var(--ds-color-surface-blue-outline); 1338 --ds-badge-border-outline-blue: var(--ds-border-width-tier-2) solid var(--ds-color-border-blue-outline); 1339 1340 --ds-badge-color-outline-green: var(--ds-color-text-green-outline); 1341 --ds-badge-background-color-outline-green: var(--ds-color-surface-green-outline); 1342 --ds-badge-border-outline-green: var(--ds-border-width-tier-2) solid var(--ds-color-border-green-outline); 1343 1344 --ds-badge-color-outline-orange: var(--ds-color-text-orange-outline); 1345 --ds-badge-background-color-outline-orange: var(--ds-color-surface-orange-outline); 1346 --ds-badge-border-outline-orange: var(--ds-border-width-tier-2) solid var(--ds-color-border-orange-outline); 1347 1348 --ds-badge-color-outline-violet: var(--ds-color-text-violet-outline); 1349 --ds-badge-background-color-outline-violet: var(--ds-color-surface-violet-outline); 1350 --ds-badge-border-outline-violet: var(--ds-border-width-tier-2) solid var(--ds-color-border-violet-outline); 1351 1352 --ds-badge-color-outline-red: var(--ds-color-text-red-outline); 1353 --ds-badge-background-color-outline-red: var(--ds-color-surface-red-outline); 1354 --ds-badge-border-outline-red: var(--ds-border-width-tier-2) solid var(--ds-color-border-red-outline); 1355 1356 --ds-badge-color-outline-yellow: var(--ds-color-text-yellow-outline); 1357 --ds-badge-background-color-outline-yellow: var(--ds-color-surface-yellow-outline); 1358 --ds-badge-border-outline-yellow: var(--ds-border-width-tier-2) solid var(--ds-color-border-yellow-outline); 1359 1360 /* Badge solid color tokens â alias to theme-palette tokens (Figma defines no border, use transparent) */ 1361 --ds-badge-color-solid-grey: var(--ds-color-text-grey-solid); 1362 --ds-badge-background-color-solid-grey: var(--ds-color-surface-grey-solid); 1363 --ds-badge-border-solid-grey: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent); 1364 1365 --ds-badge-color-solid-blue: var(--ds-color-text-blue-solid); 1366 --ds-badge-background-color-solid-blue: var(--ds-color-surface-blue-solid); 1367 --ds-badge-border-solid-blue: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent); 1368 1369 --ds-badge-color-solid-green: var(--ds-color-text-green-solid); 1370 --ds-badge-background-color-solid-green: var(--ds-color-surface-green-solid); 1371 --ds-badge-border-solid-green: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent); 1372 1373 --ds-badge-color-solid-orange: var(--ds-color-text-orange-solid); 1374 --ds-badge-background-color-solid-orange: var(--ds-color-surface-orange-solid); 1375 --ds-badge-border-solid-orange: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent); 1376 1377 --ds-badge-color-solid-violet: var(--ds-color-text-violet-solid); 1378 --ds-badge-background-color-solid-violet: var(--ds-color-surface-violet-solid); 1379 --ds-badge-border-solid-violet: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent); 1380 1381 --ds-badge-color-solid-red: var(--ds-color-text-red-solid); 1382 --ds-badge-background-color-solid-red: var(--ds-color-surface-red-solid); 1383 --ds-badge-border-solid-red: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent); 1384 1385 --ds-badge-color-solid-yellow: var(--ds-color-text-yellow-solid); 1386 --ds-badge-background-color-solid-yellow: var(--ds-color-surface-yellow-solid); 1387 --ds-badge-border-solid-yellow: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent); 1388 1389 /* Badge sizes */ 1390 --ds-badge-sm-height: var(--ds-size-actions-2xs); 1391 --ds-badge-sm-padding: 0 var(--ds-space-page-inside-xs); 1392 --ds-badge-sm-font: var(--ds-font-body-strong-xs); 1393 1394 --ds-badge-md-height: var(--ds-size-actions-xs); 1395 --ds-badge-md-padding: var(--ds-dimension-tier-2) var(--ds-space-page-inside-s); 1396 --ds-badge-md-font: var(--ds-font-body-strong-s); 1397 1398 --ds-badge-lg-height: var(--ds-size-actions-s); 1399 --ds-badge-lg-padding: var(--ds-dimension-tier-3) var(--ds-space-page-inside-m); 1400 --ds-badge-lg-font: var(--ds-font-body-strong-m); 1401 1402 /* Badge icon sizing and spacing */ 1403 --ds-badge-icon-gap: var(--ds-space-page-inside-2xs); 1404 --ds-badge-icon-gap-sm: var(--ds-space-page-inside-2xs); 1405 --ds-badge-icon-gap-md: var(--ds-space-page-inside-2xs); 1406 --ds-badge-icon-gap-lg: var(--ds-space-page-inside-2xs); 1407 1408 --ds-badge-icon-size-sm: var(--ds-size-icon-xs); 1409 --ds-badge-icon-size-md: var(--ds-size-icon-s); 1410 --ds-badge-icon-size-lg: var(--ds-size-icon-m); 1411} 1412} 1413@layer components{ 1414[data-color-scheme="legacy"] { 1415 /* Badge scaling factors */ 1416 --badge-sm-height-scale: 1.67; 1417 --badge-sm-padding-scale: 2.15; 1418 --badge-md-height-scale: 1.5; 1419 --badge-md-padding-scale: 1.5; 1420 --badge-lg-height-scale: 1.34; 1421 --badge-lg-padding-scale: 0.91; 1422 1423 /* Badge sizes with legacy scaling */ 1424 --ds-badge-sm-height: calc(var(--ds-size-actions-2xs) * var(--badge-sm-height-scale)); 1425 --ds-badge-sm-padding: 0 calc(var(--ds-space-page-inside-xs) * var(--badge-sm-padding-scale)); 1426 --ds-badge-sm-font: var(--ds-font-body-strong-xs); 1427 1428 --ds-badge-md-height: calc(var(--ds-size-actions-xs) * var(--badge-md-height-scale)); 1429 --ds-badge-md-padding: var(--ds-dimension-tier-2) calc(var(--ds-space-page-inside-s) * var(--badge-md-padding-scale)); 1430 --ds-badge-md-font: var(--ds-font-body-strong-s); 1431 1432 --ds-badge-lg-height: calc(var(--ds-size-actions-m) * var(--badge-lg-height-scale)); 1433 --ds-badge-lg-padding: var(--ds-dimension-tier-3) calc(var(--ds-space-page-inside-m) * var(--badge-lg-padding-scale)); 1434 --ds-badge-lg-font: var(--ds-font-body-strong-l); 1435 1436 /* 1437 * Compensate for legacy's scaled-down primitive tokens (legacy size-icon-xs 1438 * is 0.5rem vs 0.75rem in the new theme, space-page-inside-2xs is 0.125rem 1439 * vs 0.25rem). Bumping each by one tier here keeps badge icons and the 1440 * icon/text gap at the same physical size as the new theme: 1441 * icons: sm=12px, md=16px, lg=20px 1442 * gap: 4px across all sizes 1443 */ 1444 --ds-badge-icon-size-sm: var(--ds-size-icon-s); 1445 --ds-badge-icon-size-md: var(--ds-size-icon-m); 1446 --ds-badge-icon-size-lg: var(--ds-size-icon-l); 1447 1448 --ds-badge-icon-gap-sm: var(--ds-space-page-inside-xs); 1449 --ds-badge-icon-gap-md: var(--ds-space-page-inside-xs); 1450 --ds-badge-icon-gap-lg: var(--ds-space-page-inside-xs); 1451} 1452} 1453@layer components{ 1454:root, :host { 1455 /* Banner backgrounds */ 1456 --ds-banner-background-color-feature: var(--ds-color-surface-moderate); 1457 --ds-banner-background-color-ai: var(--ds-color-surface-violet-moderate); 1458 --ds-banner-background-color-success: var(--ds-color-surface-success-main); 1459 --ds-banner-background-color-warning: var(--ds-color-surface-warning-main); 1460 --ds-banner-background-color-info: var(--ds-color-surface-blue-moderate); 1461 --ds-banner-background-color-error: var(--ds-color-surface-error-moderate); 1462 1463 /* Banner borders */ 1464 --ds-banner-border-color-feature: var(--ds-color-border-soft); 1465 --ds-banner-border-color-ai: var(--ds-color-border-violet-outline); 1466 --ds-banner-border-color-success: var(--ds-color-border-success-soft); 1467 --ds-banner-border-color-warning: var(--ds-color-border-warning-soft); 1468 --ds-banner-border-color-info: var(--ds-color-border-blue-outline); 1469 --ds-banner-border-color-error: var(--ds-color-border-error-soft); 1470 1471 /* Banner icon colors */ 1472 --ds-banner-icon-color-feature: var(--ds-color-text-soft); 1473 --ds-banner-icon-color-ai: var(--ds-color-text-violet-outline); 1474 --ds-banner-icon-color-success: var(--ds-color-text-success-main); 1475 --ds-banner-icon-color-warning: var(--ds-color-text-warning-main); 1476 --ds-banner-icon-color-info: var(--ds-color-text-blue-outline); 1477 --ds-banner-icon-color-error: var(--ds-color-text-error-main); 1478 1479 /* Banner text */ 1480 --ds-banner-text-color: var(--ds-color-text-main); 1481 --ds-banner-close-button-color: var(--ds-color-text-soft); 1482 1483 /* Banner layout */ 1484 --ds-banner-padding: var(--ds-space-page-inside-s); 1485 --ds-banner-gap: var(--ds-space-page-inside-xs); 1486 --ds-banner-border-radius: var(--ds-radius-m); 1487 --ds-banner-border-width: var(--ds-border-width-tier-2); 1488 --ds-banner-close-button-size: var(--ds-size-actions-xs); /* WCAG 2.5.8 â interactive target size */ 1489 --ds-banner-font: var(--ds-font-body-default-s); 1490 --ds-banner-icon-size: var(--ds-size-icon-m); 1491} 1492} 1493@layer components{ 1494:root[data-color-scheme="legacy"], div[data-color-scheme="legacy"] { 1495 --ds-banner-icon-size: var(--ds-size-icon-l); 1496 --ds-banner-padding: calc(var(--ds-space-page-inside-xs) + var(--ds-space-page-inside-s)); 1497 --ds-banner-gap: var(--ds-space-page-inside-s); 1498} 1499} 1500@layer components{ 1501:root, :host { 1502 /* Button base */ 1503 --ds-button-gap: var(--ds-space-page-inside-xs); 1504 --ds-button-border-radius: var(--ds-radius-m); 1505 --ds-button-outline: none; 1506 --ds-button-cursor: pointer; 1507 --ds-button-cursor-disabled: not-allowed; 1508 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "progress" with a semantic token */ 1509 --ds-button-cursor-loading: progress; 1510 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0.7" with a semantic token */ 1511 --ds-button-opacity-loading: 0.7; 1512 1513 /* Button sizes */ 1514 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "1.6rem" with a semantic token */ 1515 --ds-button-xs-height: 1.6rem; /* no semantic size token â matches default line-height */ 1516 --ds-button-xs-padding-vertical: 0; 1517 --ds-button-xs-padding-horizontal: var(--ds-space-page-inside-2xs); 1518 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "1.6rem" with a semantic token */ 1519 --ds-button-xs-icon-width: 1.6rem; /* no semantic size token â matches default line-height */ 1520 --ds-button-xs-icon-padding: var(--ds-space-page-inside-2xs); 1521 1522 --ds-button-sm-height: var(--ds-size-actions-l); 1523 --ds-button-sm-padding-vertical: var(--ds-space-page-inside-xs); 1524 --ds-button-sm-padding-horizontal: var(--ds-space-page-inside-s); 1525 --ds-button-sm-icon-width: var(--ds-size-actions-l); 1526 --ds-button-sm-icon-padding: var(--ds-space-page-inside-xs); 1527 1528 --ds-button-md-height: var(--ds-size-actions-xl); 1529 --ds-button-md-padding-vertical: var(--ds-space-page-inside-s); 1530 --ds-button-md-padding-horizontal: var(--ds-space-page-inside-m); 1531 --ds-button-md-icon-width: var(--ds-size-actions-xl); 1532 --ds-button-md-icon-padding: var(--ds-space-page-inside-s); 1533 1534 --ds-button-lg-height: var(--ds-size-actions-2xl); 1535 --ds-button-lg-padding-vertical: var(--ds-space-page-inside-m); 1536 --ds-button-lg-padding-horizontal: var(--ds-space-page-inside-l); 1537 --ds-button-lg-icon-width: var(--ds-size-actions-2xl); 1538 --ds-button-lg-icon-padding: var(--ds-space-page-inside-m); 1539 1540 --ds-button-xl-height: var(--ds-size-actions-3xl); 1541 --ds-button-xl-padding-vertical: var(--ds-space-page-inside-l); 1542 --ds-button-xl-padding-horizontal: var(--ds-space-page-inside-xl); 1543 --ds-button-xl-icon-width: var(--ds-size-actions-3xl); 1544 --ds-button-xl-icon-padding: var(--ds-space-page-inside-l); 1545 1546 /* Button fonts */ 1547 --ds-button-font-xs: var(--ds-font-body-strongest-s); 1548 --ds-button-font-sm: var(--ds-font-body-strongest-s); 1549 --ds-button-font-md: var(--ds-font-body-strongest-s); 1550 --ds-button-font-lg: var(--ds-font-body-strongest-m); 1551 --ds-button-font-xl: var(--ds-font-body-strongest-m); 1552 1553 /* Button disabled */ 1554 --ds-button-disabled-color: var(--ds-color-text-disabled); 1555 --ds-button-disabled-background-color: var(--ds-color-surface-disabled); 1556 --ds-button-disabled-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled); 1557 1558 /* Button Primary */ 1559 --ds-button-primary-color: var(--ds-color-text-main-onbrand); 1560 --ds-button-primary-background-color: var(--ds-color-surface-br
1560and-solid); 1561 --ds-button-primary-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-brand-solid); 1562 --ds-button-primary-background-color-hovered: var(--ds-color-surface-brand-solid-hover); 1563 --ds-button-primary-background-color-activated: var(--ds-color-surface-brand-solid); 1564 1565 --ds-button-primary-focused-shadow: var(--ds-shadow-focus-ring-actions); 1566 /* Button Secondary */ 1567 --ds-button-secondary-color: var(--ds-color-text-main); 1568 --ds-button-secondary-background-color: var(--ds-color-surface-main); 1569 --ds-button-secondary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main); 1570 --ds-button-secondary-background-color-hovered: var(--ds-color-surface-main-hover); 1571 --ds-button-secondary-background-color-activated: var(--ds-color-surface-main); 1572 1573 --ds-button-secondary-focused-shadow: var(--ds-shadow-focus-ring-actions); 1574 /* Button Tertiary */ 1575 --ds-button-tertiary-color: var(--ds-color-text-brand-main); 1576 --ds-button-tertiary-background-color: var(--ds-color-surface-brand-main); 1577 --ds-button-tertiary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-brand-soft); 1578 --ds-button-tertiary-background-color-hovered: var(--ds-color-surface-brand-moderate); 1579 --ds-button-tertiary-background-color-activated: var(--ds-color-surface-brand-main); 1580 1581 --ds-button-tertiary-focused-shadow: var(--ds-shadow-focus-ring-actions); 1582 /* Button Delete Primary */ 1583 --ds-button-delete-primary-color: var(--ds-color-text-white); 1584 --ds-button-delete-primary-background-color: var(--ds-color-surface-error-solid); 1585 --ds-button-delete-primary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent); 1586 --ds-button-delete-primary-background-color-hovered: var(--ds-color-surface-error-solid-hover); 1587 --ds-button-delete-primary-background-color-activated: var(--ds-color-surface-error-solid); 1588 1589 --ds-button-delete-primary-focused-shadow: var(--ds-shadow-focus-ring-error); 1590 /* Button Delete Secondary */ 1591 --ds-button-delete-secondary-color: var(--ds-color-text-error-main); 1592 --ds-button-delete-secondary-background-color: var(--ds-color-surface-main); 1593 --ds-button-delete-secondary-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-error-solid); 1594 --ds-button-delete-secondary-background-color-hovered: var(--ds-color-surface-error-main); 1595 --ds-button-delete-secondary-background-color-activated: var(--ds-color-surface-main); 1596 1597 --ds-button-delete-secondary-focused-shadow: var(--ds-shadow-focus-ring-error); 1598 /* Button Link */ 1599 --ds-button-link-color: var(--ds-color-foreground-brand-main); 1600 --ds-button-link-background-color: transparent; 1601 --ds-button-link-border: none; 1602 --ds-button-link-background-color-hovered: var(--ds-color-surface-main-hover); 1603 --ds-button-link-background-color-activated: var(--ds-color-surface-main); 1604 1605 --ds-button-link-focused-shadow: var(--ds-shadow-focus-ring-actions); 1606 /* Button Link Secondary */ 1607 --ds-button-link-secondary-color: var(--ds-color-text-main); 1608 --ds-button-link-secondary-background-color: transparent; 1609 --ds-button-link-secondary-border: none; 1610 --ds-button-link-secondary-color-hovered: var(--ds-color-text-moderate-hover); 1611 --ds-button-link-secondary-background-color-hovered: var(--ds-color-surface-main-hover); 1612 --ds-button-link-secondary-background-color-activated: var(--ds-color-surface-main); 1613 1614 --ds-button-link-secondary-focused-shadow: var(--ds-shadow-focus-ring-actions); 1615 /* Icon wrapper */ 1616 --ds-button-icon-max-width: var(--ds-size-icon-m); 1617 --ds-button-icon-max-height: var(--ds-size-icon-m); 1618} 1619} 1620@layer components{ 1621/* 1622 * Deprecated token aliases â DO NOT edit manually. 1623 * Generated by: pnpm deprecate-token 1624 * 1625 * Each alias maps an old token name to the current one via var(). 1626 * This file is loaded in :root for global backward compatibility. 1627 */ 1628:root, :host { 1629 1630 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-primary-background-color-hovered */ 1631 --ds-button-primary-background-color-hover: var(--ds-button-primary-background-color-hovered); 1632 1633 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-primary-background-color-activated */ 1634 --ds-button-primary-background-color-active: var(--ds-button-primary-background-color-activated); 1635 1636 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-primary-focused-shadow */ 1637 --ds-button-primary-focus-shadow: var(--ds-button-primary-focused-shadow); 1638 1639 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-secondary-background-color-hovered */ 1640 --ds-button-secondary-background-color-hover: var(--ds-button-secondary-background-color-hovered); 1641 1642 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-secondary-background-color-activated */ 1643 --ds-button-secondary-background-color-active: var(--ds-button-secondary-background-color-activated); 1644 1645 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-secondary-focused-shadow */ 1646 --ds-button-secondary-focus-shadow: var(--ds-button-secondary-focused-shadow); 1647 1648 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-tertiary-background-color-hovered */ 1649 --ds-button-tertiary-background-color-hover: var(--ds-button-tertiary-background-color-hovered); 1650 1651 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-tertiary-background-color-activated */ 1652 --ds-button-tertiary-background-color-active: var(--ds-button-tertiary-background-color-activated); 1653 1654 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-tertiary-focused-shadow */ 1655 --ds-button-tertiary-focus-shadow: var(--ds-button-tertiary-focused-shadow); 1656 1657 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-primary-background-color-hovered */ 1658 --ds-button-delete-primary-background-color-hover: var(--ds-button-delete-primary-background-color-hovered); 1659 1660 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-primary-background-color-activated */ 1661 --ds-button-delete-primary-background-color-active: var(--ds-button-delete-primary-background-color-activated); 1662 1663 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-primary-focused-shadow */ 1664 --ds-button-delete-primary-focus-shadow: var(--ds-button-delete-primary-focused-shadow); 1665 1666 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-secondary-background-color-hovered */ 1667 --ds-button-delete-secondary-background-color-hover: var(--ds-button-delete-secondary-background-color-hovered); 1668 1669 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-secondary-background-color-activated */ 1670 --ds-button-delete-secondary-background-color-active: var(--ds-button-delete-secondary-background-color-activated); 1671 1672 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-secondary-focused-shadow */ 1673 --ds-button-delete-secondary-focus-shadow: var(--ds-button-delete-secondary-focused-shadow); 1674 1675 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-background-color-hovered */ 1676 --ds-button-link-background-color-hover: var(--ds-button-link-background-color-hovered); 1677 1678 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-background-color-activated */ 1679 --ds-button-link-background-color-active: var(--ds-button-link-background-color-activated); 1680 1681 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-focused-shadow */ 1682 --ds-button-link-focus-shadow: var(--ds-button-link-focused-shadow); 1683 1684 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-secondary-color-hovered */ 1685 --ds-button-link-secondary-color-hover: var(--ds-button-link-secondary-color-hovered); 1686 1687 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-secondary-background-color-hovered */ 1688 --ds-button-link-secondary-background-color-hover: var(--ds-button-link-secondary-background-color-hovered); 1689 1690 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-secondary-background-color-activated */ 1691 --ds-button-link-secondary-background-color-active: var(--ds-button-link-secondary-background-color-activated); 1692 1693 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-secondary-focused-shadow */ 1694 --ds-button-link-secondary-focus-shadow: var(--ds-button-link-secondary-focused-shadow); 1695} 1696} 1697@layer components{ 1698/* Legacy theme overrides */ 1699:root[data-color-scheme="legacy"], div[data-color-scheme="legacy"] { 1700 /* Button base */ 1701 --ds-button-gap: var(--ds-space-page-inside-xs); 1702 --ds-button-border-radius: var(--ds-radius-m); 1703 --ds-button-outline: none; 1704 --ds-button-cursor: pointer; 1705 --ds-button-cursor-disabled: not-allowed; 1706 --ds-button-cursor-loading: progress; 1707 --ds-button-opacity-loading: 0.7; 1708 1709 /* Button sizes */ 1710 --ds-button-xs-height: 1.6rem; /* no semantic size token â matches default line-height */ 1711 --ds-button-xs-padding-vertical: 0; 1712 --ds-button-xs-padding-horizontal: var(--ds-space-page-inside-2xs); 1713 --ds-button-xs-icon-width: 1.6rem; /* no semantic size token â matches default line-height */ 1714 --ds-button-xs-icon-padding: var(--ds-space-page-inside-2xs); 1715 1716 --ds-button-sm-height: var(--ds-size-actions-l); 1717 --ds-button-sm-padding-vertical: var(--ds-space-page-inside-xs); 1718 --ds-button-sm-padding-horizontal: var(--ds-space-page-inside-s); 1719 --ds-button-sm-icon-width: var(--ds-size-actions-l); 1720 --ds-button-sm-icon-padding: var(--ds-space-page-inside-xs); 1721 1722 --ds-button-md-height: var(--ds-size-actions-xl); 1723 --ds-button-md-padding-vertical: var(--ds-space-page-inside-s); 1724 --ds-button-md-padding-horizontal: 0.75rem; 1725 --ds-button-md-icon-width: var(--ds-size-actions-xl); 1726 --ds-button-md-icon-padding: var(--ds-space-page-inside-s); 1727 1728 --ds-button-lg-height: var(--ds-size-actions-2xl); 1729 --ds-button-lg-padding-vertical: var(--ds-space-page-inside-m); 1730 --ds-button-lg-padding-horizontal: 1rem; 1731 --ds-button-lg-icon-width: var(--ds-size-actions-2xl); 1732 --ds-button-lg-icon-padding: var(--ds-space-page-inside-m); 1733 1734 --ds-button-xl-height: var(--ds-size-actions-3xl); 1735 --ds-button-xl-padding-vertical: var(--ds-space-page-inside-l); 1736 --ds-button-xl-padding-horizontal: 1.25rem; 1737 --ds-button-xl-icon-width: var(--ds-size-actions-3xl); 1738 --ds-button-xl-icon-padding: var(--ds-space-page-inside-l); 1739 1740 /* Button fonts */ 1741 --ds-button-font-xs: var(--ds-font-body-default-s); 1742 --ds-button-font-sm: var(--ds-font-body-default-s); 1743 --ds-button-font-md: var(--ds-font-body-default-s); 1744 --ds-button-font-lg: var(--ds-font-body-default-m); 1745 --ds-button-font-xl: var(--ds-font-body-default-m); 1746 1747 /* Button disabled */ 1748 --ds-button-disabled-color: var(--ds-color-text-disabled); 1749 --ds-button-disabled-background-color: var(--ds-color-surface-disabled); 1750 --ds-button-disabled-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled); 1751 1752 /* Button Primary */ 1753 --ds-button-primary-color: var(--ds-color-text-main-onbrand); 1754 --ds-button-primary-background-color: var(--ds-color-surface-brand-solid); 1755 --ds-button-primary-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-brand-solid); 1756 --ds-button-primary-background-color-hover: var(--ds-color-surface-brand-solid-hover); 1757 --ds-button-primary-background-color-hovered: var(--ds-color-surface-brand-solid-hover); 1758 --ds-button-primary-background-color-active: var(--ds-color-surface-brand-solid); 1759 --ds-button-primary-background-color-activated: var(--ds-color-surface-brand-solid); 1760 --ds-button-primary-focus-shadow: var(--ds-shadow-focus-ring-actions); 1761 --ds-button-primary-focused-shadow: var(--ds-shadow-focus-ring-actions); 1762 1763 /* Button Secondary */ 1764 --ds-button-secondary-color: var(--ds-color-text-main); 1765 --ds-button-secondary-background-color: var(--ds-color-surface-main); 1766 --ds-button-secondary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main); 1767 --ds-button-secondary-background-color-hover: var(--ds-color-surface-main-hover); 1768 --ds-button-secondary-background-color-hovered: var(--ds-color-surface-main-hover); 1769 --ds-button-secondary-background-color-active: var(--ds-color-surface-main); 1770 --ds-button-secondary-background-color-activated: var(--ds-color-surface-main); 1771 --ds-button-secondary-focus-shadow: var(--ds-shadow-focus-ring-actions); 1772 --ds-button-secondary-focused-shadow: var(--ds-shadow-focus-ring-actions); 1773 1774 /* Button Tertiary */ 1775 --ds-button-tertiary-color: var(--ds-color-text-brand-main); 1776 --ds-button-tertiary-background-color: var(--ds-color-surface-brand-main); 1777 --ds-button-tertiary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-brand-soft); 1778 --ds-button-tertiary-background-color-hover: var(--ds-color-surface-brand-moderate); 1779 --ds-button-tertiary-background-color-hovered: var(--ds-color-surface-brand-moderate); 1780 --ds-button-tertiary-background-color-active: var(--ds-color-surface-brand-main); 1781 --ds-button-tertiary-background-color-activated: var(--ds-color-surface-brand-main); 1782 --ds-button-tertiary-focus-shadow: var(--ds-shadow-focus-ring-actions); 1783 --ds-button-tertiary-focused-shadow: var(--ds-shadow-focus-ring-actions); 1784 1785 /* Button Delete Primary */ 1786 --ds-button-delete-primary-color: var(--ds-color-text-white); 1787 --ds-button-delete-primary-background-color: var(--ds-color-surface-error-solid); 1788 --ds-button-delete-primary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent); 1789 --ds-button-delete-primary-background-color-hover: var(--ds-color-surface-error-solid-hover); 1790 --ds-button-delete-primary-background-color-hovered: var(--ds-color-surface-error-solid-hover); 1791 --ds-button-delete-primary-background-color-active: var(--ds-color-surface-error-solid); 1792 --ds-button-delete-primary-background-color-activated: var(--ds-color-surface-error-solid); 1793 --ds-button-delete-primary-focus-shadow: var(--ds-shadow-focus-ring-error); 1794 --ds-button-delete-primary-focused-shadow: var(--ds-shadow-focus-ring-error); 1795 1796 /* Button Delete Secondary */ 1797 --ds-button-delete-secondary-color: var(--ds-color-text-error-main); 1798 --ds-button-delete-secondary-background-color: var(--ds-color-surface-main); 1799 --ds-button-delete-secondary-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-error-solid); 1800 --ds-button-delete-secondary-background-color-hover: var(--ds-color-surface-error-main); 1801 --ds-button-delete-secondary-background-color-hovered: var(--ds-color-surface-error-main); 1802 --ds-button-delete-secondary-background-color-active: var(--ds-color-surface-main); 1803 --ds-button-delete-secondary-background-color-activated: var(--ds-color-surface-main); 1804 --ds-button-delete-secondary-focus-shadow: var(--ds-shadow-focus-ring-error); 1805 --ds-button-delete-secondary-focused-shadow: var(--ds-shadow-focus-ring-error); 1806 1807 /* Button Link */ 1808 --ds-button-link-color: var(--ds-color-foreground-brand-main); 1809 --ds-button-link-background-color: transparent; 1810 --ds-button-link-border: none; 1811 --ds-button-link-background-color-hover: var(--ds-color-surface-main-hover); 1812 --ds-button-link-background-color-hovered: var(--ds-color-surface-main-hover); 1813 --ds-button-link-background-color-active: var(--ds-color-surface-main); 1814 --ds-button-link-background-color-activated: var(--ds-color-surface-main); 1815 --ds-button-link-focus-shadow: var(--ds-shadow-focus-ring-actions); 1816 --ds-button-link-focused-shadow: var(--ds-shadow-focus-ring-actions); 1817 1818 /* Button Link Secondary */ 1819 --ds-button-link-secondary-color: var(--ds-color-text-main); 1820 --ds-button-link-secondary-background-color: transparent; 1821 --ds-button-link-secondary-border: none; 1822 --ds-button-link-secondary-color-hover: var(--ds-color-text-moderate-hover); 1823 --ds-button-link-secondary-color-hovered: var(--ds-color-text-moderate-hover); 1824 --ds-button-link-secondary-background-color-hover: var(--ds-color-surface-main-hover); 1825 --ds-button-link-secondary-background-color-hovered: var(--ds-color-surface-main-hover); 1826 --ds-button-link-secondary-background-color-active: var(--ds-color-surface-main); 1827 --ds-button-link-secondary-background-color-activated: var(--ds-color-surface-main); 1828 --ds-button-link-secondary-focus-shadow: var(--ds-shadow-focus-ring-actions); 1829 --ds-button-link-secondary-focused-shadow: var(--ds-shadow-focus-ring-actions); 1830 1831 /* Icon wrapper */ 1832 --ds-button-icon-
1832max-width: var(--ds-size-icon-m); 1833 --ds-button-icon-max-height: var(--ds-size-icon-m); 1834} 1835} 1836@layer components{ 1837:root, :host { 1838 /* ---- Default variant â neutral outlined rounded-rectangle tag (UI Kit "Tag") ---- */ 1839 --ds-chip-default-color: var(--ds-color-text-soft); 1840 --ds-chip-default-background-color: var(--ds-color-surface-main); 1841 --ds-chip-default-background-color-hovered: var(--ds-color-surface-main-hover); 1842 --ds-chip-default-background-color-pressed: var(--ds-color-surface-main-pressed); 1843 --ds-chip-default-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-grey-outline); 1844 --ds-chip-default-remove-color: var(--ds-color-foreground-moderate); 1845 /* Default focus â brand-tinted fill + 2px "selected" inset outline */ 1846 --ds-chip-default-background-color-focused: var(--ds-color-surface-brand-main); 1847 --ds-chip-default-border-focused: var(--ds-border-width-tier-4) solid var(--ds-color-surface-form-selected); 1848 1849 /* ---- Button variant â solid brand fill (primary-Button palette) ---- */ 1850 --ds-chip-button-color: var(--ds-color-text-main-onbrand); 1851 --ds-chip-button-background-color: var(--ds-color-surface-brand-solid); 1852 --ds-chip-button-background-color-hovered: var(--ds-color-surface-brand-solid-hover); 1853 --ds-chip-button-background-color-pressed: var(--ds-color-surface-brand-solid-hover); 1854 --ds-chip-button-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-brand-solid); 1855 --ds-chip-button-remove-color: var(--ds-color-text-main-onbrand); 1856 /* White text (not text-brand-main): the meta badge sits on a deep brand shade in every state, so on-brand white keeps AA. */ 1857 --ds-chip-button-meta-color: var(--ds-color-text-main-onbrand); 1858 /* At rest the badge is one step deeper than the solid fill (solid -> solid-hover): a subtle inset like the default variant's badge (surface-main -> surface-moderate), not the near-white brand-moderate. */ 1859 --ds-chip-button-meta-background-color: var(--ds-color-surface-brand-solid-hover); 1860 /* When the fill darkens to solid-hover (hover/active/focus), the badge takes the brand solid (a step lighter than the darkened fill) so it stays distinct instead of blending into it. Also drives the focused badge in styles.module.css. */ 1861 --ds-chip-button-meta-background-color-hovered: var(--ds-color-surface-brand-solid); 1862 /* Button focus adopts the hover fill (solid-hover) plus the amber/teal ring; the badge follows via the same hovered token above. No inset "selected" outline â unnecessary on the solid brand fill (the default variant keeps its inset). */ 1863 --ds-chip-button-background-color-focused: var(--ds-color-surface-brand-solid-hover); 1864 --ds-chip-button-border-focused: none; 1865 1866 /* ---- Shared across variants ---- */ 1867 --ds-chip-focus-ring-shadow: var(--ds-shadow-focus-ring-actions); 1868 --ds-chip-outline-offset: calc(var(--ds-border-width-tier-4) * -1); 1869 --ds-chip-background-color-disabled: var(--ds-color-surface-disabled); 1870 --ds-chip-color-disabled: var(--ds-color-text-disabled); 1871 --ds-chip-border-disabled: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled); 1872 --ds-chip-max-width: 12.5rem; /* no semantic max-width token â component cap before the label truncates */ 1873 --ds-chip-border-radius: var(--ds-radius-s); 1874 1875 /* Invalid (error) state â red border + tinted fill, conveyed via aria-invalid (mirrors input's -error tokens). Overrides the variant palette. */ 1876 --ds-chip-color-error: var(--ds-color-text-error-main); 1877 --ds-chip-background-color-error: var(--ds-color-surface-error-main); 1878 --ds-chip-border-error: var(--ds-border-width-tier-2) solid var(--ds-color-border-error-soft); 1879 1880 /* Meta â contained grey badge for a count or short label (Figma "_Tag count" atom) */ 1881 --ds-chip-meta-color: var(--ds-color-text-soft); 1882 --ds-chip-meta-color-disabled: var(--ds-color-text-disabled); 1883 --ds-chip-meta-background-color: var(--ds-color-surface-moderate); 1884 --ds-chip-meta-background-color-focused: var(--ds-color-surface-brand-moderate); 1885 --ds-chip-meta-border-radius: var(--ds-radius-xs); 1886 --ds-chip-meta-padding-sm: 0 var(--ds-space-page-inside-2xs); 1887 --ds-chip-meta-padding-md: 0 var(--ds-space-page-inside-2xs); 1888 --ds-chip-meta-padding-lg: 0 var(--ds-space-page-inside-xs); 1889 --ds-chip-meta-padding-xl: 0 var(--ds-space-page-inside-xs); 1890 --ds-chip-meta-font-sm: var(--ds-font-body-strong-xs); 1891 --ds-chip-meta-font-md: var(--ds-font-body-strong-s); 1892 --ds-chip-meta-font-lg: var(--ds-font-body-strong-m); 1893 --ds-chip-meta-font-xl: var(--ds-font-body-strong-m); 1894 1895 /* Height (20/24/28/32 = tier-8/9/10/11) */ 1896 --ds-chip-height-sm: var(--ds-dimension-tier-8); 1897 --ds-chip-height-md: var(--ds-dimension-tier-9); 1898 --ds-chip-height-lg: var(--ds-dimension-tier-10); 1899 --ds-chip-height-xl: var(--ds-dimension-tier-11); 1900 1901 /* Inline padding symmetric (8/8/8/12) â base when no asymmetric trigger is present */
1902 --ds-chip-padding-inline-sm: var(--ds-space-page-inside-xs); 1903 --ds-chip-padding-inline-md: var(--ds-space-page-inside-xs); 1904 --ds-chip-padding-inline-lg: var(--ds-space-page-inside-xs); 1905 --ds-chip-padding-inline-xl: var(--ds-space-page-inside-s); 1906 1907 /* Inline-start padding when leading icon is present (6px sm/md, unchanged lg/xl) */ 1908 --ds-chip-padding-inline-start-sm: var(--ds-dimension-tier-4); 1909 --ds-chip-padding-inline-start-md: var(--ds-dimension-tier-4); 1910 --ds-chip-padding-inline-start-lg: var(--ds-space-page-inside-xs); 1911 --ds-chip-padding-inline-start-xl: var(--ds-space-page-inside-s); 1912 1913 /* Inline-end padding when meta or remove is present (6px sm/md, unchanged lg/xl) */ 1914 --ds-chip-padding-inline-end-sm: var(--ds-dimension-tier-4); 1915 --ds-chip-padding-inline-end-md: var(--ds-dimension-tier-4); 1916 --ds-chip-padding-inline-end-lg: var(--ds-space-page-inside-xs); 1917 --ds-chip-padding-inline-end-xl: var(--ds-space-page-inside-s); 1918 1919 /* Padding (block 4px at sm/md, 6px at lg/xl) */ 1920 --ds-chip-padding-sm: var(--ds-space-page-inside-2xs) var(--ds-chip-padding-inline-sm); 1921 --ds-chip-padding-md: var(--ds-space-page-inside-2xs) var(--ds-chip-padding-inline-md); 1922 --ds-chip-padding-lg: var(--ds-dimension-tier-4) var(--ds-chip-padding-inline-lg); 1923 --ds-chip-padding-xl: var(--ds-dimension-tier-4) var(--ds-chip-padding-inline-xl); 1924 1925 /* Gap (2xs = 4px at every size) */ 1926 --ds-chip-gap-sm: var(--ds-space-page-inside-2xs); 1927 --ds-chip-gap-md: var(--ds-space-page-inside-2xs); 1928 --ds-chip-gap-lg: var(--ds-space-page-inside-2xs); 1929 --ds-chip-gap-xl: var(--ds-space-page-inside-2xs); 1930 1931 /* Label font (strong-xs/s/m/m = 12/14/16/16) */ 1932 --ds-chip-font-sm: var(--ds-font-body-strong-xs); 1933 --ds-chip-font-md: var(--ds-font-body-strong-s); 1934 --ds-chip-font-lg: var(--ds-font-body-strong-m); 1935 --ds-chip-font-xl: var(--ds-font-body-strong-m); 1936 1937 /* Leading icon glyph (12/16/16/16) */ 1938 --ds-chip-icon-size-sm: var(--ds-size-icon-xs); 1939 --ds-chip-icon-size-md: var(--ds-size-icon-s); 1940 --ds-chip-icon-size-lg: var(--ds-size-icon-s); 1941 --ds-chip-icon-size-xl: var(--ds-size-icon-s); 1942 1943 /* Remove (x) glyph (12/16/16/16 = tier-6/7/7/7) */ 1944 --ds-chip-remove-size-sm: var(--ds-dimension-tier-6); 1945 --ds-chip-remove-size-md: var(--ds-dimension-tier-7); 1946 --ds-chip-remove-size-lg: var(--ds-dimension-tier-7); 1947 --ds-chip-remove-size-xl: var(--ds-dimension-tier-7); 1948} 1949} 1950@layer components{ 1951[data-color-scheme="legacy"] { 1952 /* 1953 * Legacy "Chip" Tag scale, finalized from the leg-chips Figma 1954 * (docs/legacy/components/chip.md): height 20/24/28/32, label font 1955 * 12/14/16/16, symmetric padding 8/8\xb78/8\xb78/8\xb712/12 (6px on icon/meta/remove 1956 * sides for sm/md), constant 4px gap. 1957 * 1958 * Legacy downshifts the size/space ladders (~half the new theme), so the 1959 * shared tokens in chip.css would render the chip too small here. We re-hit 1960 * the spec px by picking the legacy token whose VALUE matches the target: 1961 * height climbs the actions ladder to s/m/l/2xl; 8px = space-page-inside-s, 1962 * 12px = 0.75rem, 6px = 0.375rem. 1963 * Colors â incl. the violet->teal remap and the teal focus ring 1964 * (shared --ds-shadow-focus-ring-actions, kept system-consistent) â still 1965 * come from chip.css's aliases and are intentionally not touched here. 1966 * 1967 * NOT covered by check-legacy-sync â keep in step with chip.css by hand. 1968 */ 1969 1970 /* Height â climb the actions ladder to undo legacy's downshift (-> 20/24/28/32) */ 1971 --ds-chip-height-sm: var(--ds-size-actions-s); 1972 --ds-chip-height-md: var(--ds-size-actions-m); 1973 --ds-chip-height-lg: var(--ds-size-actions-l); 1974 --ds-chip-height-xl: var(--ds-size-actions-xl); 1975 1976 /* Inter-element gap â constant 4px (legacy -2xs is 2px, so step up one rung to -xs) */ 1977 --ds-chip-gap-sm: var(--ds-space-page-inside-xs); 1978 --ds-chip-gap-md: var(--ds-space-page-inside-xs); 1979 --ds-chip-gap-lg: var(--ds-space-page-inside-xs); 1980 --ds-chip-gap-xl: var(--ds-space-page-inside-xs); 1981 1982 /* Inline padding symmetric (8/8/8/12) â base when no asymmetric trigger is present */
1983 --ds-chip-padding-inline-sm: var(--ds-space-page-inside-s); 1984 --ds-chip-padding-inline-md: var(--ds-space-page-inside-s); 1985 --ds-chip-padding-inline-lg: var(--ds-space-page-inside-s); 1986 --ds-chip-padding-inline-xl: 0.75rem; 1987 1988 /* Inline-start padding when leading icon is present (6px sm/md = 0.375rem, unchanged lg/xl) */ 1989 --ds-chip-padding-inline-start-sm: 0.375rem; 1990 --ds-chip-padding-inline-start-md: 0.375rem; 1991 --ds-chip-padding-inline-start-lg: var(--ds-space-page-inside-s); 1992 --ds-chip-padding-inline-start-xl: 0.75rem; 1993 1994 /* Inline-end padding when meta or remove is present (6px sm/md = 0.375rem, unchanged lg/xl) */ 1995 --ds-chip-padding-inline-end-sm: 0.375rem; 1996 --ds-chip-padding-inline-end-md: 0.375rem; 1997 --ds-chip-padding-inline-end-lg: var(--ds-space-page-inside-s); 1998 --ds-chip-padding-inline-end-xl: 0.75rem; 1999 2000 /* Padding (block 4px at sm/md, 6px at lg/xl) */ 2001 --ds-chip-padding-sm: var(--ds-space-page-inside-xs) var(--ds-chip-padding-inline-sm); 2002 --ds-chip-padding-md: var(--ds-space-page-inside-xs) var(--ds-chip-padding-inline-md); 2003 --ds-chip-padding-lg: 0.375rem var(--ds-chip-padding-inline-lg); 2004 --ds-chip-padding-xl: 0.375rem var(--ds-chip-padding-inline-xl); 2005 2006 /* Meta padding (0 4px at sm/md, 0 8px at lg/xl) */ 2007 --ds-chip-meta-padding-sm: 0 var(--ds-space-page-inside-xs); 2008 --ds-chip-meta-padding-md: 0 var(--ds-space-page-inside-xs); 2009 --ds-chip-meta-padding-lg: 0 var(--ds-space-page-inside-s); 2010 --ds-chip-meta-padding-xl: 0 var(--ds-space-page-inside-s); 2011 2012 /* 2013 * Icon/glyph sizing â legacy icon primitives are smaller, so bump a rung to re-hit the 2014 * spec px. Leading icon = 12/16/16/16 (icon-s/m/m/m). The remove (x) glyphs default to 2015 * 12/16/16/16; legacy tier-6/7 would halve them, so re-point to icon-s/m/m/m. 2016 */ 2017 --ds-chip-icon-size-sm: var(--ds-size-icon-s); 2018 --ds-chip-icon-size-md: var(--ds-size-icon-m); 2019 --ds-chip-icon-size-lg: var(--ds-size-icon-m); 2020 --ds-chip-icon-size-xl: var(--ds-size-icon-m); 2021 2022 --ds-chip-remove-size-sm: var(--ds-size-icon-s); 2023 --ds-chip-remove-size-md: var(--ds-size-icon-m); 2024 --ds-chip-remove-size-lg: var(--ds-size-icon-m); 2025 --ds-chip-remove-size-xl: var(--ds-size-icon-m); 2026} 2027} 2028@layer components{ 2029:root, :host { 2030 /* Root */ 2031 /* Actual for small screens */ 2032 --ds-dialog-max-width: calc(100vw - var(--ds-space-page-inside-m) * 2); 2033 --ds-dialog-max-height: calc(100vh - var(--ds-space-page-inside-m) * 2); 2034 2035 /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-" */ 2036 --ds-dialog--fullscreen-inset: var(--ds-space-page-inside-m); 2037 2038 /* space between header and body, and between body and footer */ 2039 --ds-dialog-space-inside: var(--ds-space-page-inside-l); 2040 2041 /* border between header and body, and between body and footer */ 2042 --ds-dialog-border: none; 2043 2044 /* border radius of the dialog */ 2045 --ds-dialog-content-border-radius: var(--ds-radius-2xl); 2046 2047 /* padding of the main content */ 2048 --ds-dialog-padding-top: var(--ds-dialog-space-inside); 2049 --ds-dialog-padding-bottom: var(--ds-dialog-space-inside); 2050 --ds-dialog-padding-right: var(--ds-dialog-space-inside); 2051 --ds-dialog-padding-left: var(--ds-dialog-space-inside); 2052 2053 /* Overlay */ 2054 --ds-dialog-backdrop-z-index: var(--ds-z-index-tier-3); 2055 --ds-dialog-backdrop-background-color: var(--ds-blur-default-background-color); 2056 --ds-dialog-backdrop-backdrop-filter: var(--ds-blur-default-background-filter); 2057 2058 /* Content */ 2059 --ds-dialog-content-z-index: var(--ds-z-index-tier-4); 2060 --ds-dialog-content-background-color: var(--ds-color-surface-main); 2061 --ds-dialog-content-box-shadow: var(--ds-shadow-standard-m); 2062 /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-"; R7: replace "20rem" with a semantic token */ 2063 --ds-dialog--size-xs: 20rem; 2064 /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-"; R7: replace "30rem" with a semantic token */ 2065 --ds-dialog--size-s: 30rem; 2066 /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-"; R7: replace "45rem" with a semantic token */ 2067 --ds-dialog--size-m: 45rem; 2068 /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-"; R7: replace "81rem" with a semantic token */ 2069 --ds-dialog--size-l: 81rem; 2070 2071 /* Header */ 2072 --ds-dialog-header-padding-bottom: calc(var(--ds-dialog-space-inside) / 2); 2073 --ds-dialog-header-border-bottom: var(--ds-dialog-border); 2074 --ds-dialog-header-padding-right: var(--ds-dialog-padding-right); 2075 --ds-dialog-header-padding-left: var(--ds-dialog-padding-left); 2076 2077 /* Title */ 2078 --ds-dialog-title-color: var(--ds-color-text-main); 2079 --ds-dialog-title-font-size: var(--ds-font-heading-xs); 2080 2081 /* Description */ 2082 --ds-dialog-description-color: var(--ds-color-text-main); 2083 --ds-dialog-description-font: var(--ds-font-body-default-m); 2084 2085 /* Body */ 2086 --ds-dialog-body-color: var(--ds-color-text-soft); 2087 --ds-dialog-body-font: var(--ds-font-body-default-m); 2088 --ds-dialog-body-padding-size: calc(var(--ds-dialog-space-inside) / 2); 2089 --ds-dialog-body-with-scrollbar-padding-right: calc(var(--ds-dialog-space-inside) / 2); 2090 --ds-dialog-body-with-scrollbar-padding-left: calc(var(--ds-dialog-space-inside) / 2); 2091 --ds-dialog-body-with-scrollbar-box-shadow: var(--ds-shadow-focus-ring-actions); 2092 --ds-dialog-body-border-radius: var(--ds-radius-m); 2093 --ds-dialog-body-padding-right: calc(var(--ds-dialog-padding-right) / 2); 2094 --ds-dialog-body-padding-left: calc(var(--ds-dialog-padding-left) / 2); 2095 --ds-dialog-body-margin-right: calc(var(--ds-dialog-padding-right) / 2); 2096 --ds-dialog-body-margin-left: calc(var(--ds-dialog-padding-left) / 2); 2097 --ds-dialog-body-gap: calc(var(--ds-dialog-space-inside) / 2); 2098 2099 /* Form Dialog Body */ 2100 /* stylelint-disable-next-line smartling-ds/token-naming -- R2: component "form" does not match file "dialog.css" */ 2101 --ds-form-dialog-description-font: var(--ds-font-body-default-m); 2102 /* stylelint-disable-next-line smartling-ds/token-naming -- R2: component "form" does not match file "dialog.css" */ 2103 --ds-form-dialog-body-font: var(--ds-font-body-default-m); 2104 2105 2106 /* Footer */ 2107 --ds-dialog-footer-padding-top: calc(var(--ds-dialog-space-inside) / 2); 2108 --ds-dialog-footer-border-top: var(--ds-dialog-border); 2109 --ds-dialog-footer-gap: var(--ds-space-page-inside-s); 2110 --ds-dialog-footer-margin-right: var(--ds-dialog-padding-right); 2111 --ds-dialog-footer-margin-left: var(--ds-dialog-padding-left); 2112 --ds-dialog-footer-justify-content: flex-end; 2113 2114 /* Close */ 2115 --ds-dialog-close-button-size: var(--ds-size-actions-m); 2116 --ds-dialog-close-button-top: calc(var(--ds-space-page-inside-l) - 0.2rem); 2117 --ds-dialog-close-button-right: var(--ds-space-page-inside-m); 2118 --ds-dialog-close-button-color: var(--ds-color-foreground-moderate); 2119} 2120} 2121@layer components{ 2122[data-color-scheme="legacy"] { 2123 /* Root */ 2124 /* Actual for small screens */ 2125 --ds-dialog-max-width: calc(100vw - var(--ds-space-page-inside-m) * 2); 2126 --ds-dialog-max-height: calc(100vh - var(--ds-space-page-inside-m) * 2); 2127 2128 --ds-dialog--fullscreen-inset: var(--ds-space-page-inside-xl) var(--ds-space-page-inside-xl) var(--ds-space-page-inside-2xl) var(--ds-space-page-inside-xl); 2129 2130 /* space between header and body, and between body and footer */ 2131 --ds-dialog-space-inside: 1.5rem; 2132 2133 /* border between header and body, and between body and footer */ 2134 --ds-dialog-border: none; 2135 2136 /* border radius of the dialog */ 2137 --ds-dialog-content-border-radius: var(--ds-radius-l); 2138 2139 /* padding of the main content */ 2140 --ds-dialog-padding-top: var(--ds-dialog-space-inside); 2141 --ds-dialog-padding-bottom: var(--ds-dialog-space-inside); 2142 --ds-dialog-padding-right: var(--ds-dialog-space-inside); 2143 --ds-dialog-padding-left: var(--ds-dialog-space-inside); 2144 2145 /* Overlay */ 2146 --ds-dialog-backdrop-z-index: var(--ds-z-index-tier-3); 2147 --ds-dialog-backdrop-background-color: var(--ds-blur-default-background-color); 2148 --ds-dialog-backdrop-backdrop-filter: var(--ds-blur-default-background-filter); 2149 2150 /* Content */ 2151 --ds-dialog-content-z-index: var(--ds-z-index-tier-4); 2152 --ds-dialog-content-background-color: var(--ds-color-surface-main); 2153 --ds-dialog-content-box-shadow: var(--ds-shadow-standard-m); 2154 --ds-dialog--size-xs: 20rem; 2155 --ds-dialog--size-s: 30rem; 2156 --ds-dialog--size-m: 50rem; 2157 --ds-dialog--size-l: 81rem; 2158 2159 /* Header */ 2160 --ds-dialog-header-padding-bottom: calc(var(--ds-dialog-space-inside) / 2); 2161 --ds-dialog-header-border-bottom: var(--ds-dialog-border); 2162 --ds-dialog-header-margin-left: 40px; 2163 --ds-dialog-header-padding-right: var(--ds-dialog-padding-right); 2164 --ds-dialog-header-padding-left: var(--ds-dialog-padding-left); 2165 2166 /* Title */ 2167 --ds-dialog-title-color: var(--ds-color-text-main); 2168 --ds-dialog-title-font-size: var(--ds-font-heading-xs); 2169 2170 /* Description */ 2171 --ds-dialog-description-color: var(--ds-color-text-soft); 2172 --ds-dialog-description-font: var(--ds-font-body-default-m); 2173 2174 /* Form Dialog Description */ 2175 --ds-form-dialog-description-font: var(--ds-font-body-default-s); 2176 2177 /* Body */ 2178 --ds-dialog-body-color: var(--ds-color-text-soft); 2179 --ds-dialog-body-font: var(--ds-font-body-default-m); 2180 --ds-dialog-body-padding-size: calc(var(--ds-dialog-space-inside) / 2); 2181 --ds-dialog-body-with-scrollbar-padding-right: calc(var(--ds-dialog-space-inside) / 2); 2182 --ds-dialog-body-with-scrollbar-padding-left: calc(var(--ds-dialog-space-inside) / 2); 2183 --ds-dialog-body-with-scrollbar-box-shadow: var(--ds-shadow-focus-ring-actions); 2184 --ds-dialog-body-border-radius: var(--ds-radius-m); 2185 --ds-dialog-body-padding-right: calc(var(--ds-dialog-padding-right) / 2); 2186 --ds-dialog-body-padding-left: calc(var(--ds-dialog-padding-left) / 2); 2187 --ds-dialog-body-margin-right: calc(var(--ds-dialog-padding-right) / 2); 2188 --ds-dialog-body-margin-left: calc(var(--ds-dialog-padding-left) / 2); 2189 --ds-dialog-body-gap: calc(var(--ds-dialog-space-inside) / 2); 2190 2191 /* Form Dialog Body */ 2192 --ds-form-dialog-body-font: var(--ds-font-body-default-s); 2193 2194 2195 /* Footer */ 2196 --ds-dialog-footer-padding-top: calc(var(--ds-dialog-space-inside) / 2); 2197 --ds-dialog-footer-border-top: var(--ds-dialog-border); 2198 --ds-dialog-footer-gap: calc(var(--ds-dialog-space-inside) / 2); 2199 --ds-dialog-footer-margin-right: var(--ds-dialog-padding-right); 2200 --ds-dialog-footer-margin-left: var(--ds-dialog-padding-left); 2201 --ds-dialog-footer-justify-content: flex-end; 2202 2203 /* Close */ 2204 --ds-dialog-close-button-size: var(--ds-size-actions-l); 2205 --ds-dialog-close-button-top: 1.46rem; 2206 --ds-dialog-close-button-right: 1.2rem; 2207 --ds-dialog-close-button-color: var(--ds-color-foreground-moderate); 2208} 2209} 2210@layer components{ 2211:root, :host { 2212 /* Content */ 2213 --ds-dropdown-menu-content-z-index: var(--ds-z-index-tier-4); 2214 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "9rem" with a semantic token */ 2215 --ds-dropdown-menu-content-min-width: 9rem; 2216 --ds-dropdown-menu-content-color: var(--ds-color-text-soft); 2217 --ds-dropdown-menu-content-background-color: var(--ds-color-surface-main); 2218 --ds-dropdown-menu-content-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft); 2219 --ds-dropdown-menu-content-border-radius: var(--ds-radius-m); 2220 --ds-dropdown-menu-content-box-shadow: var(--ds-shadow-standard-m); 2221 2222 /* SubContent */ 2223 --ds-dropdown-menu-sub-content-z-index: var(--ds-z-index-tier-5); 2224 --ds-dropdown-menu-sub-content-color: var(--ds-color-text-soft); 2225 --ds-dropdown-menu-sub-content-background-color: var(--ds-color-surface-main); 2226 --ds-dropdown-menu-sub-content-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft); 2227 --ds-dropdown-menu-sub-content-border-radius: var(--ds-radius-m); 2228 --ds-dropdown-menu-sub-content-box-shadow: var(--ds-shadow-standard-l); 2229 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "7rem" with a semantic token */ 2230 --ds-dropdown-menu-sub-content-min-width: 7rem; 2231 2232 /* Base Item - Common variables for all interactive items */ 2233 --ds-dropdown-menu-item-margin: var(--ds-space-page-inside-2xs) var(--ds-space-page-inside-xs); 2234 --ds-dropdown-menu-item-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s); 2235 --ds-dropdown-menu-item-gap: var(--ds-space-page-inside-xs); 2236 --ds-dropdown-menu-item-font: var(--ds-font-body-strong-s); 2237 --ds-dropdown-menu-item-border-radius: var(--ds-radius-s); 2238 --ds-dropdown-menu-item-margin-top: var(--ds-dimension-tier-5); 2239 --ds-dropdown-menu-item-margin-bottom: var(--ds-dimension-tier-5); 2240 --ds-dropdown-menu-item-color: var(--ds-color-text-soft); 2241 --ds-dropdown-menu-item-color-hovered: var(--ds-color-text-soft); 2242 --ds-dropdown-menu-item-background-color-hovered: var(--ds-color-surface-main-hover); 2243 --ds-dropdown-menu-item-background-color-activated: var(--ds-color-surface-soft); 2244 --ds-dropdown-menu-item-opacity-disabled: var(--ds-opacity-medium); 2245 2246 /* CheckboxItem - Component-specific variables */ 2247 --ds-dropdown-menu-checkbox-item-indicator-size: var(--ds-size-icon-s); 2248 2249 /* RadioItem - Component-specific variables */ 2250 --ds-dropdown-menu-radio-item-indicator-size: var(--ds-size-actions-2xs); 2251 --ds-dropdown-menu-radio-item-dot-size: var(--ds-size-icon-xs); 2252 --ds-dropdown-menu-radio-item-dot-background: var(--ds-color-surface-brand-solid); 2253 --ds-dropdown-menu-radio-item-dot-border-radius: var(--ds-radius-full); 2254 2255 /* SubTrigger - Component-specific variables */ 2256 --ds-dropdown-menu-sub-trigger-chevron-size: var(--ds-size-icon-s); 2257 --ds-dropdown-menu-sub-trigger-inset-padding-left: var(--ds-space-page-inside-xl); 2258 2259 /* Label */ 2260 --ds-dropdown-menu-label-padding: var(--ds-space-page-inside-s) var(--ds-space-page-inside-m); 2261 --ds-dropdown-menu-label-font: var(--ds-font-body-strongest-s); 2262 2263 /* Separator */ 2264 --ds-dropdown-menu-separator-height: var(--ds-border-width-tier-2); 2265 --ds-dropdown-menu-separator-background-color: var(--ds-color-border-soft); 2266 2267 /* Shortcut */ 2268 --ds-dropdown-menu-shortcut-color: var(--ds-color-text-moderate); 2269 --ds-dropdown-menu-shortcut-font: var(--ds-font-body-default-xs); 2270 2271 /* Legacy wrapper */ 2272 /* Legacy Base Item - Common variables for legacy dropdown menu items */ 2273 --ds-dropdown-menu-legacy-base-item-gap: var(--ds-space-page-inside-xs); 2274 --ds-dropdown-menu-legacy-base-item-indicator-size: var(--ds-size-actions-2xs); 2275 --ds-dropdown-menu-legacy-base-item-dot-size: var(--ds-size-icon-xs); 2276 --ds-dropdown-menu-legacy-base-item-dot-background: var(--ds-color-surface-brand-solid); 2277 --ds-dropdown-menu-legacy-base-item-dot-border-radius: var(--ds-radius-full); 2278 2279 /* Legacy EllipsisDropdownMenu - Component-specific variables */ 2280 --ds-dropdown-menu-legacy-ellipsis-button-border-radius: var(--ds-radius-m); 2281} 2282} 2283@layer components{ 2284/* 2285 * Deprecated token aliases â DO NOT edit manually. 2286 * Generated by: pnpm deprecate-token 2287 * 2288 * Each alias maps an old token name to the current one via var(). 2289 * This file is loaded in :root for global backward compatibility. 2290 */ 2291:root, :host { 2292 2293 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-dropdown-menu-item-color-hovered */ 2294 --ds-dropdown-menu-item-color-hover: var(--ds-dropdown-menu-item-color-hovered); 2295 2296 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-dropdown-menu-item-background-color-hovered */ 2297 --ds-dropdown-menu-item-background-color-hover: var(--ds-dropdown-menu-item-background-color-hovered); 2298 2299 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-dropdown-menu-item-background-color-activated */ 2300 --ds-dropdown-menu-item-background-color-active: var(--ds-dropdown-menu-item-background-color-activated); 2301} 2302} 2303@layer components{ 2304[data-color-scheme="legacy"] { 2305 /* Content */ 2306 --ds-dropdown-menu-content-z-index: var(--ds-z-index-tier-4); 2307 --ds-dropdown-menu-content-min-width: 9rem; 2308 --ds-dropdown-menu-content-color: var(--ds-color-text-soft); 2309 --ds-dropdown-menu-content-background-color: var(--ds-color-surface-main); 2310 --ds-dropdown-menu-content-border: var(--ds-bo
2310rder-width-tier-2) solid var(--ds-color-border-soft); 2311 --ds-dropdown-menu-content-border-radius: var(--ds-radius-m); 2312 --ds-dropdown-menu-content-box-shadow: var(--ds-shadow-standard-m); 2313 2314 /* SubContent */ 2315 --ds-dropdown-menu-sub-content-z-index: var(--ds-z-index-tier-5); 2316 --ds-dropdown-menu-sub-content-color: var(--ds-color-text-soft); 2317 --ds-dropdown-menu-sub-content-background-color: var(--ds-color-surface-main); 2318 --ds-dropdown-menu-sub-content-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft); 2319 --ds-dropdown-menu-sub-content-border-radius: var(--ds-radius-m); 2320 --ds-dropdown-menu-sub-content-box-shadow: var(--ds-shadow-standard-l); 2321 2322 /* Base Item - Common variables for all interactive items */ 2323 --ds-dropdown-menu-item-margin: var(--ds-space-page-inside-2xs) var(--ds-space-page-inside-xs); 2324 --ds-dropdown-menu-item-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s); 2325 --ds-dropdown-menu-item-gap: 0.5rem; 2326 --ds-dropdown-menu-item-font: var(--ds-font-body-default-s); 2327 --ds-dropdown-menu-item-border-radius: var(--ds-radius-s); 2328 --ds-dropdown-menu-item-margin-top: var(--ds-dimension-tier-5); 2329 --ds-dropdown-menu-item-margin-bottom: var(--ds-dimension-tier-5); 2330 --ds-dropdown-menu-item-color: var(--ds-color-text-soft); 2331 --ds-dropdown-menu-item-color-hover: var(--ds-color-text-soft); 2332 --ds-dropdown-menu-item-color-hovered: var(--ds-color-text-soft); 2333 --ds-dropdown-menu-item-background-color-hover: var(--ds-color-surface-main-hover); 2334 --ds-dropdown-menu-item-background-color-hovered: var(--ds-color-surface-main-hover); 2335 --ds-dropdown-menu-item-background-color-active: var(--ds-color-surface-soft); 2336 --ds-dropdown-menu-item-background-color-activated: var(--ds-color-surface-soft); 2337 --ds-dropdown-menu-item-opacity-disabled: var(--ds-opacity-medium); 2338 --ds-dropdown-menu-sub-content-min-width: 7rem; 2339 2340 /* CheckboxItem - Component-specific variables */ 2341 --ds-dropdown-menu-checkbox-item-indicator-size: var(--ds-size-actions-xs); 2342 2343 /* RadioItem - Component-specific variables */ 2344 --ds-dropdown-menu-radio-item-indicator-size: var(--ds-size-actions-xs); 2345 --ds-dropdown-menu-radio-item-dot-size: 0.625rem; 2346 --ds-dropdown-menu-radio-item-dot-background: var(--ds-color-surface-brand-solid); 2347 --ds-dropdown-menu-radio-item-dot-border-radius: var(--ds-radius-full); 2348 2349 /* SubTrigger - Component-specific variables */ 2350 --ds-dropdown-menu-sub-trigger-chevron-size: var(--ds-size-icon-s); 2351 --ds-dropdown-menu-sub-trigger-inset-padding-left: var(--ds-space-page-inside-xl); 2352 2353 /* Label */ 2354 --ds-dropdown-menu-label-padding: var(--ds-space-page-inside-s) var(--ds-space-page-inside-m); 2355 --ds-dropdown-menu-label-font: var(--ds-font-body-strongest-s); 2356 2357 /* Separator */ 2358 --ds-dropdown-menu-separator-height: var(--ds-border-width-tier-2); 2359 --ds-dropdown-menu-separator-background-color: var(--ds-color-border-soft); 2360 2361 /* Shortcut */ 2362 --ds-dropdown-menu-shortcut-color: var(--ds-color-text-moderate); 2363 --ds-dropdown-menu-shortcut-font: var(--ds-font-body-default-xs); 2364 2365 /* Legacy wrapper */ 2366 /* Legacy Base Item - Common variables for legacy dropdown menu items */ 2367 --ds-dropdown-menu-legacy-base-item-gap: 0.5rem; 2368 --ds-dropdown-menu-legacy-base-item-indicator-size: var(--ds-size-actions-2xs); 2369 --ds-dropdown-menu-legacy-base-item-dot-size: 0.625rem; 2370 --ds-dropdown-menu-legacy-base-item-dot-background: var(--ds-color-surface-brand-solid); 2371 --ds-dropdown-menu-legacy-base-item-dot-border-radius: var(--ds-radius-full); 2372 2373 /* Legacy EllipsisDropdownMenu - Component-specific variables */ 2374 --ds-dropdown-menu-legacy-ellipsis-button-border-radius: var(--ds-radius-m); 2375} 2376} 2377@layer components{ 2378:root, :host { 2379 --ds-input-color: var(--ds-color-text-main); 2380 --ds-input-color-disabled: var(--ds-color-text-disabled); 2381 --ds-input-color-read-only: var(--ds-color-text-soft); 2382 2383 --ds-input-placeholder-color: var(--ds-color-text-placeholder); 2384 2385 --ds-input-background-color: var(--ds-color-surface-main); 2386 --ds-input-background-color-disabled: var(--ds-color-surface-disabled); 2387 --ds-input-background-color-read-only: var(--ds-color-surface-soft); 2388 2389 --ds-input-border-radius: var(--ds-radius-m); 2390 2391 --ds-input-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main); 2392 --ds-input-border-focused: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid); 2393 --ds-input-border-error: var(--ds-border-width-tier-2) solid var(--ds-color-border-error-soft); 2394 --ds-input-border-disabled: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled); 2395 --ds-input-border-read-only: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft); 2396 --ds-input-border-read-only-focused: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid); 2397 2398 --ds-input-shadow: var(--ds-shadow-standard-xs); 2399 --ds-input-shadow-focused: var(--ds-shadow-focus-ring-actions); 2400 --ds-input-shadow-read-only-focused: var(--ds-shadow-focus-ring-actions); 2401 --ds-input-shadow-error-focused: var(--ds-shadow-focus-ring-actions); 2402 2403 --ds-input-outline-offset: calc(var(--ds-border-width-tier-4) * -1); 2404 2405 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "border-color 0.2s linear, box-shadow 0.2s linear" with a semantic token */ 2406 --ds-input-transition: border-color 0.2s linear, box-shadow 0.2s linear; 2407 2408 /* File input specific styling */ 2409 --ds-input-file-button-color: var(--ds-color-text-main); 2410 --ds-input-file-button-background-color: transparent; 2411 --ds-input-file-button-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main); 2412 --ds-input-file-button-border-radius: var(--ds-radius-s); 2413 --ds-input-file-button-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s); 2414 2415 --ds-input-font-sm: var(--ds-font-body-default-s); 2416 --ds-input-height-sm: var(--ds-size-actions-l); 2417 --ds-input-padding-vertical-sm: var(--ds-space-page-inside-xs); 2418 --ds-input-padding-horizontal-sm: var(--ds-space-page-inside-s); 2419 2420 --ds-input-font-md: var(--ds-font-body-default-m); 2421 --ds-input-height-md: var(--ds-size-actions-xl); 2422 --ds-input-padding-vertical-md: var(--ds-space-page-inside-xs); 2423 --ds-input-padding-horizontal-md: var(--ds-space-page-inside-s); 2424} 2425} 2426@layer components{ 2427/* 2428 * Deprecated token aliases â DO NOT edit manually. 2429 * Generated by: pnpm deprecate-token 2430 * 2431 * Each alias maps an old token name to the current one via var(). 2432 * This file is loaded in :root for global backward compatibility. 2433 */ 2434:root, :host { 2435 2436 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-border-read-only-focused */ 2437 --ds-input-border-focus-readonly: var(--ds-input-border-read-only-focused); 2438 2439 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-shadow-read-only-focused */ 2440 --ds-input-shadow-focus-readonly: var(--ds-input-shadow-read-only-focused); 2441 2442 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-shadow-error-focused */ 2443 --ds-input-shadow-focus-error: var(--ds-input-shadow-error-focused); 2444 2445 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-border-focused */ 2446 --ds-input-border-focus: var(--ds-input-border-focused); 2447 2448 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-shadow-focused */ 2449 --ds-input-shadow-focus: var(--ds-input-shadow-focused); 2450} 2451} 2452@layer components{ 2453[data-color-scheme="legacy"] { 2454 --ds-input-color: var(--ds-color-text-main); 2455 --ds-input-color-disabled: var(--ds-color-text-disabled); 2456 --ds-input-color-read-only: var(--ds-color-text-soft); 2457 2458 --ds-input-placeholder-color: var(--ds-color-text-placeholder); 2459 2460 --ds-input-background-color: var(--ds-color-surface-main); 2461 --ds-input-background-color-disabled: var(--ds-color-surface-disabled); 2462 --ds-input-background-color-read-only: var(--ds-color-surface-soft); 2463 2464 --ds-input-border-radius: var(--ds-radius-m); 2465 2466 --ds-input-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main); 2467 --ds-input-border-focus: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid); 2468 --ds-input-border-focused: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid); 2469 --ds-input-border-error: var(--ds-border-width-tier-2) solid var(--ds-color-border-error-soft); 2470 --ds-input-border-disabled: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled); 2471 --ds-input-border-read-only: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft); 2472 /* @deprecated: use --ds-input-border-read-only-focused */ 2473 --ds-input-border-focus-readonly: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid); 2474 --ds-input-border-read-only-focused: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid); 2475 2476 --ds-input-shadow: var(--ds-shadow-standard-xs); 2477 --ds-input-shadow-focus: var(--ds-shadow-focus-ring-actions); 2478 --ds-input-shadow-focused: var(--ds-shadow-focus-ring-actions); 2479 /* @deprecated: use --ds-input-shadow-read-only-focused */ 2480 --ds-input-shadow-focus-readonly: var(--ds-shadow-focus-ring-actions); 2481 --ds-input-shadow-read-only-focused: var(--ds-shadow-focus-ring-actions); 2482 /* @deprecated: use --ds-input-shadow-error-focused */ 2483 --ds-input-shadow-focus-error: var(--ds-shadow-focus-ring-actions); 2484 --ds-input-shadow-error-focused: var(--ds-shadow-focus-ring-actions); 2485 2486 --ds-input-outline-offset: calc(var(--ds-border-width-tier-4) * -1); 2487 2488 --ds-input-transition: border-color 0.2s linear, box-shadow 0.2s linear; 2489 2490 /* File input specific styling */ 2491 --ds-input-file-button-color: var(--ds-color-text-main); 2492 --ds-input-file-button-background-color: transparent; 2493 --ds-input-file-button-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main); 2494 --ds-input-file-button-border-radius: var(--ds-radius-s); 2495 --ds-input-file-button-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s); 2496 2497 --ds-input-font-sm: var(--ds-font-body-default-s); 2498 --ds-input-height-sm: var(--ds-size-actions-l); 2499 --ds-input-padding-vertical-sm: var(--ds-space-page-inside-xs); 2500 --ds-input-padding-horizontal-sm: var(--ds-space-page-inside-s); 2501 2502 --ds-input-font-md: var(--ds-font-body-default-m); 2503 --ds-input-height-md: var(--ds-size-actions-xl); 2504 --ds-input-padding-vertical-md: var(--ds-space-page-inside-xs); 2505 --ds-input-padding-horizontal-md: var(--ds-space-page-inside-s); 2506} 2507} 2508@layer components{ 2509:root, :host { 2510 /* Root â text color */ 2511 --ds-input-group-color: var(--ds-input-color); 2512 --ds-input-group-color-disabled: var(--ds-input-color-disabled); 2513 --ds-input-group-placeholder-color: var(--ds-input-placeholder-color); 2514 2515 /* Root â background */ 2516 --ds-input-group-background-color: var(--ds-input-background-color); 2517 --ds-input-group-background-color-disabled: var(--ds-input-background-color-disabled); 2518 2519 /* Root â border */ 2520 --ds-input-group-border-width: var(--ds-border-width-tier-2); 2521 --ds-input-group-border-width-focused: var(--ds-border-width-tier-4); 2522 --ds-input-group-border: var(--ds-input-border); 2523 --ds-input-group-border-radius: var(--ds-input-border-radius); 2524 --ds-input-group-border-focused: var(--ds-input-border-focused); 2525 --ds-input-group-border-error: var(--ds-input-border-error); 2526 --ds-input-group-border-disabled: var(--ds-input-border-disabled); 2527 2528 /* Root â shadow */ 2529 --ds-input-group-shadow: var(--ds-input-shadow); 2530 --ds-input-group-shadow-focused: var(--ds-input-shadow-focused); 2531 --ds-input-group-shadow-error-focused: var(--ds-input-shadow-error-focused); 2532 2533 /* Root â opacity */ 2534 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0.6" with a semantic token */ 2535 --ds-input-group-opacity-disabled: 0.6; /* no semantic opacity token available */ 2536 2537 /* Root â size: sm */ 2538 --ds-input-group-height-sm: var(--ds-input-height-sm); 2539 --ds-input-group-padding-vertical-sm: var(--ds-input-padding-vertical-sm); 2540 --ds-input-group-padding-horizontal-sm: var(--ds-input-padding-horizontal-sm); 2541 --ds-input-group-font-sm: var(--ds-input-font-sm); 2542 2543 /* Root â size: md */ 2544 --ds-input-group-height-md: var(--ds-input-height-md); 2545 --ds-input-group-padding-vertical-md: var(--ds-input-padding-vertical-md); 2546 --ds-input-group-padding-horizontal-md: var(--ds-input-padding-horizontal-md); 2547 --ds-input-group-font-md: var(--ds-input-font-md); 2548 2549 /* Button */ 2550 --ds-input-group-button-outline-focused: var(--ds-input-group-border-focused); 2551 --ds-input-group-button-separator: 0; /* intentionally hidden â separator rendered via border-left/right in InputGroupButton CSS */ 2552 --ds-input-group-button-padding-vertical: var(--ds-space-page-inside-xs); 2553 --ds-input-group-button-padding-horizontal: var(--ds-space-page-inside-s); 2554 --ds-input-group-button-padding-icon: var(--ds-space-page-inside-2xs); 2555 --ds-input-group-button-border-radius: calc(var(--ds-input-group-border-radius) - var(--ds-input-group-border-width)); 2556 2557 /* Addon */ 2558 --ds-input-group-addon-color: var(--ds-color-text-soft); 2559 --ds-input-group-addon-gap: var(--ds-space-page-inside-2xs); 2560 /* Block addon vertical padding intentionally reuses horizontal padding for visual consistency */ 2561 --ds-input-group-addon-block-padding-vertical-sm: var(--ds-input-group-padding-horizontal-sm); 2562 --ds-input-group-addon-block-padding-vertical-md: var(--ds-input-group-padding-horizontal-md); 2563 2564 /* Text */ 2565 --ds-input-group-text-color: var(--ds-color-text-soft); 2566 --ds-input-group-text-gap: var(--ds-space-page-inside-xs); 2567 --ds-input-group-text-icon-size: var(--ds-size-icon-s); 2568} 2569} 2570@layer components{ 2571[data-color-scheme="legacy"] { 2572 --ds-input-group-text-icon-size: var(--ds-size-icon-m); 2573} 2574} 2575@layer components{ 2576:root, :host { 2577 /* label */ 2578 --ds-label-color: var(--ds-color-text-soft); 2579 2580 /* helper text */ 2581 --ds-label-helper-text-color: var(--ds-color-text-moderate); 2582 2583 /* inactive state */ 2584 --ds-label-inactive-color: var(--ds-color-text-disabled); 2585 --ds-label-inactive-helper-text-color: var(--ds-color-text-disabled); 2586 2587 /* sm */ 2588 --ds-label-sm-container-gap: 0; 2589 --ds-label-sm-font: var(--ds-font-body-strong-s); 2590 --ds-label-sm-helper-text-font: var(--ds-font-body-default-s); 2591 2592 /* md */ 2593 --ds-label-md-container-gap: var(--ds-space-page-inside-2xs); 2594 --ds-label-font-md: var(--ds-font-body-strong-m);
2595 --ds-label-md-helper-text-font: var(--ds-font-body-default-m); 2596} 2597} 2598@layer components{ 2599/* 2600 * Deprecated token aliases â DO NOT edit manually. 2601 * Generated by: pnpm deprecate-token 2602 * 2603 * Each alias maps an old token name to the current one via var(). 2604 * This file is loaded in :root for global backward compatibility. 2605 */ 2606:root, :host { 2607 2608 /* @deprecated 2026-05-25 v0.3.7 -- use --ds-label-font-md */ 2609 --ds-label-md-font: var(--ds-label-font-md); 2610} 2611} 2612@layer components{ 2613[data-color-scheme="legacy"] { 2614 /* label */ 2615 --ds-label-color: var(--ds-color-text-soft); 2616 2617 /* helper text */ 2618 --ds-label-helper-text-color: var(--ds-color-text-moderate); 2619 2620 /* inactive state */ 2621 --ds-label-inactive-color: var(--ds-color-text-disabled); 2622 --ds-label-inactive-helper-text-color: var(--ds-color-text-disabled); 2623 2624 /* sm */ 2625 --ds-label-sm-container-gap: 0; 2626 --ds-label-sm-font: var(--ds-font-body-strong-s); 2627 --ds-label-sm-helper-text-font: var(--ds-font-body-default-s); 2628 2629 /* md */ 2630 --ds-label-md-container-gap: var(--ds-space-page-inside-xs); 2631 --ds-label-md-font: var(--ds-font-body-strong-m);
2632 --ds-label-md-helper-text-font: var(--ds-font-body-default-m); 2633} 2634} 2635@layer components{ 2636 2637/* 2638 * Layout (@smartling-ui/layout) gap scale. 2639 * 2640 * The public gap names carry the t-shirt scale of the component API; the 2641 * theme's inside-scale spells the same steps s/m/l. Only the mapping lives 2642 * here â the lengths belong to the spacing tokens. 2643 */ 2644 2645:root, :host { 2646 /* Root â gap by size */ 2647 --ds-layout-gap-none: var(--ds-space-page-inside-none); 2648 --ds-layout-gap-2xs: var(--ds-space-page-inside-2xs); 2649 --ds-layout-gap-xs: var(--ds-space-page-inside-xs); 2650 --ds-layout-gap-sm: var(--ds-space-page-inside-s); 2651 --ds-layout-gap-md: var(--ds-space-page-inside-m); 2652 --ds-layout-gap-lg: var(--ds-space-page-inside-l); 2653 --ds-layout-gap-xl: var(--ds-space-page-inside-xl); 2654 --ds-layout-gap-2xl: var(--ds-space-page-inside-2xl); 2655 --ds-layout-gap-3xl: var(--ds-space-page-inside-3xl); 2656} 2657} 2658@layer components{ 2659:root, :host { 2660 --ds-popover-z-index: var(--ds-z-index-tier-4); 2661 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "9rem" with a semantic token */ 2662 --ds-popover-min-width: 9rem; 2663 --ds-popover-font: var(--ds-font-body-default-m); 2664 --ds-popover-color: var(--ds-color-text-soft); 2665 --ds-popover-background-color: var(--ds-color-surface-main); 2666 --ds-popover-border-radius: var(--ds-radius-m); 2667 --ds-popover-box-shadow: var(--ds-shadow-standard-m); 2668 --ds-popover-padding: var(--ds-space-page-inside-s); 2669 --ds-popover-gap: var(--ds-space-page-inside-2xs); 2670 2671 --ds-popover-title-font: var(--ds-font-body-strongest-m); 2672 --ds-popover-title-color: var(--ds-color-text-main); 2673 --ds-popover-title-margin: 0; 2674 2675 --ds-popover-description-font: var(--ds-shadow-standard-m); 2676 --ds-popover-description-color: var(--ds-color-text-soft); 2677} 2678} 2679@layer components{ 2680[data-color-scheme="legacy"] { 2681 --ds-popover-z-index: var(--ds-z-index-tier-4); 2682 --ds-popover-min-width: 9rem; 2683 --ds-popover-font: var(--ds-font-body-default-m); 2684 --ds-popover-color: var(--ds-color-text-soft); 2685 --ds-popover-background-color: var(--ds-color-surface-main); 2686 --ds-popover-border-radius: var(--ds-radius-l); 2687 --ds-popover-box-shadow: var(--ds-shadow-standard-m); 2688 --ds-popover-padding: 0.75rem; 2689 --ds-popover-gap: 0.5rem; 2690 2691 --ds-popover-title-font: var(--ds-font-body-strongest-m); 2692 --ds-popover-title-color: var(--ds-color-text-main); 2693 --ds-popover-title-margin: 0; 2694 2695 --ds-popover-description-font: var(--ds-shadow-standard-m); 2696 --ds-popover-description-color: var(--ds-color-text-soft); 2697} 2698} 2699@layer components{ 2700:root, :host { 2701 /* Root */ 2702 /* Host container "height" 40 -> size/actions/3xl, the ramp for control heights. 2703 2.5rem in legacy, which is the 40 Figma draws; 3rem (48) in modern, because the 2704 whole actions ramp steps up between schemes. That per-scheme difference is the 2705 ramp's intent rather than a discrepancy with the design, which is drawn in 2706 legacy. 2707 2708 Figma binds font-size/4xl here instead, the one token that is 2.5rem in both 2709 schemes -- but it is a font token driving a layout property (TOKEN_FAMILY_MISMATCH 2710 in the spec) and is shared with --ds-heading-font-size-2xl, so retuning a heading 2711 step would silently resize this row. No --ds-size-*, --ds-dimension-* or 2712 --ds-space-* token is 2.5rem in both schemes, so a single cross-scheme 40 is not 2713 expressible with today's tokens; it would need a new sizing token in tokens.json. 2714 2715 --ds-stepper-step-chevron-width derives from this, so it follows: 20 in legacy, 2716 24 in modern. */ 2717 --ds-stepper-height: var(--ds-size-actions-3xl); 2718 /* Host container "cornerRadius" 6 -> radius/l (legacy 6px, modern 12px) */ 2719 --ds-stepper-border-radius: var(--ds-radius-l); 2720 /* Host container "borderWidth" 1, borderAlign inside -> border-width/tier/2 */ 2721 --ds-stepper-border-width: var(--ds-border-width-tier-2); 2722 /* "Container stroke" -> color/border/moderate, the variable Figma binds, matched by 2723 name and by value. Figma's four modes give it #e5e5e5 (modern light), #404040 2724 (modern dark), #e8e9e9 (legacy light) and #4a4f50 (legacy dark); our modern 2725 schemes map the token to exactly those two values already. 2726 2727 This was routed through border/soft for a while because legacy-light mapped 2728 border/moderate to neutral-100 -- the pill's own fill -- leaving the stroke 2729 invisible. That was a bug in the legacy theme rather than a reason to bind 2730 elsewhere, and it is fixed at the source now (see legacy-light-theme.css), so the 2731 component can name the token the design does. 2732 2733 Do NOT reroute this to the chevron rule's token. Figma draws the two as distinct 2734 greys in the light modes and the stroke is the LIGHTER of them -- #e8e9e9 = 232 2735 here against #d8d8d8 = 216 on the divider. Flattening them drops the edge about 2736 20 points too dark; it was tried and reverted. 2737
2738 KNOWN, AND MATCHING FIGMA: in BOTH dark modes Figma gives border/moderate and 2739 surface/moderate the same value -- #404040 and #404040 in modern, #4a4f50 and 2740 #4a4f50 in legacy -- so the design specifies no visible outline in dark at all. 2741 Our modern-dark reproduces that exactly. Our legacy-dark still differs, mapping 2742 border/moderate to neutral-800 against a neutral-700 fill, so a faint groove 2743 renders there where Figma would show none; that is the legacy theme's remaining 2744 drift, not this component's binding. */ 2745 --ds-stepper-border-color: var(--ds-color-border-moderate); 2746 /* "Container drop shadow" -> shadow/standard/xs */ 2747 --ds-stepper-box-shadow: var(--ds-shadow-standard-xs); 2748 /* "Container fill" -> color/surface/moderate. Also the pending step fill, so a 2749 step that is not current simply lets the root show through. */ 2750 --ds-stepper-background-color: var(--ds-color-surface-moderate); 2751 2752 /* Step */ 2753 /* Chevron notch depth -- half the row height, which makes the notch a true 45 2754 degrees. That angle is load-bearing: the divider filling the notch is a square 2755 rotated 45deg (see Step's ::after), because a rotated square is the only shape 2756 whose edges an inset box-shadow can follow onto the diagonal, and rotating one 2757 fixes its slope at 1:1. Notch and divider have to agree or the rule drifts off 2758 the boundary near the tips. The steps get the full row height -- the container's 2759 stroke is an overlay, not a border, so it takes nothing off the content box (see 2760 Root's .list::after). 2761 2762 Figma is no help in pinning the number: its divider FRAME is a fixed 21.3 wide 2763 at every Steps value while the arrow VECTOR inside it is 13.417, so the file 2764 disagrees with itself, and neither figure is derivable from a token. Deriving 2765 from the row keeps the notch on the theme's own scale -- 20 in legacy, 24 in 2766 modern -- and matches the old @smartling/react-stepper's height/2 look. Aliasing 2767 a dimension tier was rejected because its legacy->modern step doubles, which 2768 would turn a 20px notch into 40px. */ 2769 --ds-stepper-step-chevron-width: calc(var(--ds-stepper-height) / 2); 2770 /* The rule along the chevron boundary -- Figma's two inner shadows on the divider 2771 vector, ported effect for effect. Figma's divider is an arrow whose SVG export 2772 is: 2773 2774 <path d="M0 0L0 40L21.3031 20L0 0Z" fill="#F2F2F2"/> 2775 <filter id="filter0_ii"> two inner shadows 2776 <feOffset dy="-1"/> ... 0.847059 -> #D8D8D8, opacity 1, no blur 2777 <feOffset dy="1"/> ... 0.847059 -> #D8D8D8, opacity 1, no blur 2778 2779 THE FILL IS NOT THIS TOKEN, and needs no token at all. It is the one 2780 variable-bound property on that node and it tracks the step the arrow trails: 2781 color/surface/moderate after a pending step (Legacy-UI 11482:32160), 2782 color/surface/main after the current one (11482:32188). The divider here is 2783 painted by the step it belongs to and takes that step's own 2784 --ds-stepper-step-background-color, so both cases fall out for free. 2785 2786 What did need a token is the #D8D8D8, a raw hex with no variable behind it: 216 2787 grey. border/grey-outline resolves to neutral-300 #d4d4d4 = 212 in both light 2788 schemes -- four points off Figma, and the nearest neutral by a wide margin, with 2789 neutral-200 #e5e5e5 = 229 the next candidate up. 2790 2791 Because that hex is raw, Figma has no dark value for it: the whole Stepper set is 2792 drawn once, in legacy light, and only the fill is variable-bound, so the file 2793 would put the same #D8D8D8 on a dark arrow. Dark is therefore ours to choose, and 2794 border/grey-outline is picked over surface/strong for it. The two are the SAME 2795 neutral-300 in both light schemes, so they are interchangeable against Figma; they 2796 part company in the dark ones, where surface/strong is neutral-600 #525252 against 2797 a neutral-700 #404040 arrow -- 1.33:1, a rule that all but disappears -- while 2798 border/grey-outline is neutral-400 #a3a3a3, 4.1:1, and reads as the same divider 2799 the light schemes show. It is also the border token Chip and Badge already use for 2800 a grey outline, so the stepper's rule tracks them rather than a surface ramp. 2801 2802 The offset directions differ from Figma's, because the shapes differ. Figma's 2803 arrow is a standalone 21.3-wide frame whose only non-vertical edges are the two 2804 diagonals, so dy=+-1 can land on nothing else. Ours is a square rotated 45deg,
2805 where those same two diagonals are the square's own top and right edges -- hence 2806 inset 0 +1 and inset -1 0. Anything overriding this token has to keep that 2807 pairing, or the rule lands on the wrong two edges of the square. 2808 2809 Named box-shadow, not border, per R10: it emulates a border on a shape a border 2810 cannot follow, and it is a single token rather than a colour/width pair because 2811 the two insets are one effect and only make sense together. */ 2812 --ds-stepper-step-divider-box-shadow: 2813 inset 0 var(--ds-border-width-tier-2) 0 0 var(--ds-color-border-grey-outline), 2814 inset calc(-1 * var(--ds-border-width-tier-2)) 0 0 0 2815 var(--ds-color-border-grey-outline); 2816 /* Label inline breathing room either side of the chevron geometry. Figma's 2817 final-step frame claims horizontalPadding 300 via z-index/tier/4 -- it 2818 overflows the 326.8 frame and clips the label, flagged as a design anomaly 2819 in the spec. Using the standard inside-page inset instead. */ 2820 --ds-stepper-step-padding-inline: var(--ds-space-page-inside-s); 2821 2822 /* "Step pill fill (pending)" -> color/surface/moderate */ 2823 --ds-stepper-step-background-color: var(--ds-color-surface-moderate); 2824 /* "Step pill fill (current)" -> color/surface/main (white) */ 2825 --ds-stepper-step-background-color-current: var(--ds-color-surface-main); 2826 /* "Step label (pending)" -> color/text/soft */ 2827 --ds-stepper-step-color: var(--ds-color-text-soft); 2828 /* "Step label (current)" -> color/text/main */ 2829 --ds-stepper-step-color-current: var(--ds-color-text-main); 2830 /* Label typography -> font/body/default/m (16/24), which is what every Label node 2831 in the file is bound to. An earlier note here claimed the design was 2832 POSITION_DRIVEN_TYPOGRAPHY -- size 16 at positions 1-2, size 14 from 3 on -- and 2833 normalised the component down to s on that basis. It does not reproduce: reading 2834 the bound variables per Label across Steps=6/Active=1 (positions 1, 2, 3 and 6) 2835 and Steps=4/Active=3 (positions 3 and 4) gives Font Size/16 + Line Height/24 2836 every time. Only weight and colour move, and only with active state. 2837 2838 The size 14 in that note is most likely the file's container-level font-size/s 2839 binding, read as if it were the label's. This file routinely binds font and 2840 z-index variables to layout properties -- font-size/4xl drives the row height, 2841 z-index/tier/4 the step padding -- so a font-size variable appearing in a 2842 subtree's bindings does not mean any text uses it. */ 2843 --ds-stepper-step-font: var(--ds-font-body-default-m); 2844 /* Active step's label bolds -> font/body/strongest/m. Figma's strongest is weight 2845 700; this token is 600, a pre-existing difference in the type ramp rather than 2846 anything this component chose. */ 2847 --ds-stepper-step-font-current: var(--ds-font-body-strongest-m); 2848} 2849} 2850@layer components{ 2851:root, :host { 2852 /* Table container */ 2853 --ds-table-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main); 2854 --ds-table-border-radius: var(--ds-radius-m); 2855 --ds-table-background-color: var(--ds-color-surface-main); 2856 --ds-table-color: var(--ds-color-text-main); 2857 --ds-table-font: var(--ds-font-body-default-s); 2858 2859 /* Table cell */ 2860 --ds-table-cell-padding: var(--ds-space-page-inside-s); 2861 2862 /* Table head */ 2863 --ds-table-head-padding: var(--ds-space-page-inside-s); 2864 --ds-table-head-font: var(--ds-font-body-strongest-s); 2865 --ds-table-head-background-color: var(--ds-color-surface-moderate); 2866 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: the --ds-z-index-tier-* scale 2867 (1, 100, 200, ...) jumps too coarsely to express this table's intra-component 1/2/3 2868 stacking order; a literal value is intentional here, not a placeholder for a tier */ 2869 --ds-table-head-z-index: 2; 2870 2871 /* Table sticky column */ 2872 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: see --ds-table-head-z-index above */ 2873 --ds-table-sticky-column-z-index: 1; 2874 /* distinct from --ds-table-head-z-index: a doubly-sticky corner cell (fixedHeader 2875 + fixedFirstColumn/fixedLastColumn) needs its own tier, not a tie, to avoid a 2876 Chromium paint bug where the corner cell fails to repaint on scroll */ 2877 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: see --ds-table-head-z-index above */ 2878 --ds-table-sticky-corner-z-index: 3; 2879 /* opt-in mitigation for WCAG 2.2 SC 2.4.11: keeps a focused control from being scrolled 2880 underneath a pinned column. sized to the pinned column's actual width, which the 2881 component can't know, so this default is 0 and consumers override it per-instance */ 2882 --ds-table-sticky-column-scroll-padding-inline-start: 0; 2883 --ds-table-sticky-column-scroll-padding-inline-end: 0; 2884 2885 /* Table caption */ 2886 --ds-table-caption-padding: var(--ds-space-page-inside-s); 2887 --ds-table-caption-font: var(--ds-font-body-strongest-s); 2888 2889 /* Table footer */ 2890 --ds-table-footer-padding: var(--ds-space-page-inside-s); 2891 --ds-table-footer-font: var(--ds-font-body-strongest-s); 2892 --ds-table-footer-border-top: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft); 2893 2894 /* Table row */ 2895 --ds-table-row-border-bottom: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft); 2896 --ds-table-row-hovered-background-color: var(--ds-color-surface-main-hover); 2897} 2898} 2899@layer components{ 2900/* 2901 * Deprecated token aliases â DO NOT edit manually. 2902 * Generated by: pnpm deprecate-token 2903 * 2904 * Each alias maps an old token name to the current one via var(). 2905 * This file is loaded in :root for global backward compatibility. 2906 */ 2907:root, :host { 2908 2909 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-table-row-hovered-background-color */ 2910 --ds-table-row-hover-background-color: var(--ds-table-row-hovered-background-color); 2911} 2912} 2913@layer components{ 2914[data-color-scheme="legacy"] { 2915 /* Table container */ 2916 --ds-table-border: 1px solid var(--ds-color-border-main); 2917 --ds-table-border-radius: 8px; 2918 --ds-table-background-color: var(--ds-color-surface-main); 2919 --ds-table-color: var(--ds-color-text-main); 2920 --ds-table-font: var(--ds-font-body-default-s); 2921 2922 /* Table cell */ 2923 --ds-table-cell-padding: 0.75rem; 2924 2925 /* Table head */ 2926 --ds-table-head-padding: 0.75rem; 2927 --ds-table-head-font: var(--ds-font-body-strongest-s); 2928 --ds-table-head-background-color: var(--ds-color-surface-moderate); 2929 --ds-table-head-z-index: 2; 2930 2931 /* Table caption */ 2932 --ds-table-caption-padding: 0.75rem; 2933 --ds-table-caption-font: var(--ds-font-body-strongest-s); 2934 2935 /* Table footer */ 2936 --ds-table-footer-padding: 0.75rem; 2937 --ds-table-footer-font: var(--ds-font-body-strongest-s); 2938 --ds-table-footer-border-top: 1px solid var(--ds-color-border-soft); 2939 2940 /* Table row */ 2941 --ds-table-row-border-bottom: 1px solid var(--ds-color-border-soft); 2942 --ds-table-row-hover-background-color: var(--ds-color-surface-main-hover); 2943 --ds-table-row-hovered-background-color: var(--ds-color-surface-main-hover); 2944} 2945} 2946@layer components{ 2947:root, :host { 2948 /* Legend */ 2949 --ds-radio-legend-sm-margin-bottom: var(--ds-space-page-inside-xs); 2950 --ds-radio-legend-md-margin-bottom: var(--ds-space-page-inside-s); 2951 2952 /* Radio */ 2953 --ds-radio-background-color: var(--ds-color-surface-main); 2954 --ds-radio-checked-background-color: var(--ds-color-foreground-main); 2955 --ds-radio-disabled-background-color: var(--ds-color-surface-disabled); 2956 2957 --ds-radio-dot-background-color: var(--ds-color-surface-main); 2958 --ds-radio-dot-disabled-background-color: var(--ds-color-foreground-moderate); 2959 2960 --ds-radio-border-width: var(--ds-border-width-tier-2); 2961 2962 --ds-radio-border-color: var(--ds-color-border-solid); 2963 --ds-radio-hovered-border-color: var(--ds-color-border-solid); 2964 --ds-radio-checked-border-color: var(--ds-color-foreground-main); 2965 --ds-radio-disabled-border-color: var(--ds-color-border-disabled); 2966 2967 --ds-radio-focus-ring-shadow: var(--ds-shadow-focus-ring-actions); 2968 2969 --ds-radio-label-color: var(--ds-color-text-soft); 2970 --ds-radio-label-disabled-color: var(--ds-color-text-disabled); 2971 2972 --ds-radio-helper-text-color: var(--ds-color-text-moderate); 2973 --ds-radio-helper-text-disabled-color: var(--ds-color-text-disabled); 2974 2975 /* Radio List */ 2976 --ds-radio-list-sm-gap: var(--ds-space-page-inside-xs); 2977 --ds-radio-list-md-gap: var(--ds-space-page-inside-s); 2978 2979 /* Sizes: sm */ 2980 --ds-radio-sm-size: var(--ds-dimension-tier-7); 2981 --ds-radio-dot-sm-size: var(--ds-dimension-tier-4); 2982 --ds-radio-label-sm-gap: var(--ds-space-page-inside-xs); 2983 --ds-radio-label-sm-font-size: var(--ds-font-size-s); 2984 --ds-radio-helper-text-sm-font-size: var(--ds-font-size-s); 2985 2986 /* Sizes: md */ 2987 --ds-radio-md-size: var(--ds-dimension-tier-8); 2988 --ds-radio-dot-md-size: var(--ds-dimension-tier-5); 2989 --ds-radio-label-md-gap: var(--ds-space-page-inside-s); 2990 --ds-radio-label-md-font-size: var(--ds-font-size-m); 2991 --ds-radio-helper-text-md-font-size: var(--ds-font-size-m); 2992} 2993} 2994@layer components{ 2995/* 2996 * Deprecated token aliases â DO NOT edit manually. 2997 * Generated by: pnpm deprecate-token 2998 * 2999 * Each alias maps an old token name to the current one via var(). 3000 * This file is loaded in :root for global backward compatibility. 3001 */ 3002:root, :host { 3003 3004 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-radio-hovered-border-color */ 3005 --ds-radio-hover-border-color: var(--ds-radio-hovered-border-color); 3006} 3007} 3008@layer components{ 3009/* Legacy theme overrides */ 3010:root[data-color-scheme="legacy"], div[data-color-scheme="legacy"] { 3011 /* Legend */ 3012 --ds-radio-legend-sm-margin-bottom: 0.5rem; 3013 --ds-radio-legend-md-margin-bottom: 0.75rem; 3014 3015 /* Radio */ 3016 --ds-radio-background-color: var(--ds-color-surface-main); 3017 --ds-radio-checked-background-color: var(--ds-color-foreground-main); 3018 --ds-radio-disabled-background-color: var(--ds-color-surface-disabled); 3019 3020 --ds-radio-dot-background-color: var(--ds-color-surface-main); 3021 --ds-radio-dot-disabled-background-color: var(--ds-color-foreground-moderate); 3022 3023 --ds-radio-border-width: var(--ds-border-width-tier-2); 3024 3025 --ds-radio-border-color: var(--ds-color-border-solid); 3026 --ds-radio-hover-border-color: var(--ds-color-border-solid); 3027 --ds-radio-hovered-border-color: var(--ds-color-border-solid); 3028 --ds-radio-checked-border-color: var(--ds-color-foreground-main); 3029 --ds-radio-disabled-border-color: var(--ds-color-border-disabled); 3030 3031 --ds-radio-focus-ring-shadow: var(--ds-shadow-focus-ring-actions); 3032 3033 --ds-radio-label-color: var(--ds-color-text-soft); 3034 --ds-radio-label-disabled-color: var(--ds-color-text-disabled); 3035 3036 --ds-radio-helper-text-color: var(--ds-color-text-moderate); 3037 --ds-radio-helper-text-disabled-color: var(--ds-color-text-disabled); 3038 3039 /* Radio List */ 3040 --ds-radio-list-sm-gap: 0.5rem; 3041 --ds-radio-list-md-gap: 0.75rem; 3042 3043 /* Sizes: sm */ 3044 --ds-radio-sm-size: 1rem; 3045 --ds-radio-dot-sm-size: 0.375rem; 3046 --ds-radio-label-sm-gap: 0.5rem; 3047 --ds-radio-label-sm-font-size: var(--ds-font-size-s); 3048 --ds-radio-helper-text-sm-font-size: var(--ds-font-size-s); 3049 3050 /* Sizes: md */ 3051 --ds-radio-md-size: 1.25rem; 3052 --ds-radio-dot-md-size: 0.5rem; 3053 --ds-radio-label-md-gap: 0.625rem; 3054 --ds-radio-label-md-font-size: var(--ds-font-size-m); 3055 --ds-radio-helper-text-md-font-size: var(--ds-font-size-m); 3056} 3057} 3058@layer components{ 3059:root, :host { 3060 /* Root */ 3061 --ds-tabs-border-radius: var(--ds-radius-s); 3062 --ds-tabs-outline: none; 3063 --ds-tabs-cursor: pointer; 3064 --ds-tabs-cursor-disabled: not-allowed; 3065 --ds-tabs-gap: var(--ds-space-page-inside-xs); /* gap inside tab (icon/text/badge/close) */ 3066 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "background-color 0.2s, color 0.2s, border-color 0.2s" with a semantic token */ 3067 --ds-tabs-transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* no semantic transition token available */ 3068 --ds-tabs-color-disabled: var(--ds-color-text-disabled); 3069 --ds-tabs-opacity-disabled: var(--ds-opacity-medium); 3070 3071 /* Root - Sizes */ 3072 --ds-tabs-height-sm: var(--ds-size-actions-l); 3073 --ds-tabs-font-sm: var(--ds-font-body-strongest-s); 3074 --ds-tabs-icon-size-sm: var(--ds-size-icon-m); 3075 3076 --ds-tabs-height-md: var(--ds-size-actions-xl); 3077 --ds-tabs-font-md: var(--ds-font-body-strongest-s); 3078 --ds-tabs-icon-size-md: var(--ds-size-icon-m); 3079 3080 --ds-tabs-height-lg: var(--ds-size-actions-2xl); 3081 --ds-tabs-font-lg: var(--ds-font-body-strongest-m); 3082 --ds-tabs-icon-size-lg: var(--ds-size-icon-m); 3083 3084 /* List */ 3085 --ds-tabs-list-gap-sm: var(--ds-space-page-inside-2xs); 3086 --ds-tabs-list-gap-md: var(--ds-space-page-inside-2xs); 3087 --ds-tabs-list-gap-lg: var(--ds-space-page-inside-2xs); 3088 --ds-tabs-list-border-bottom-underlined: inset 0 calc(-1 * var(--ds-border-width-tier-2)) 0 0 var(--ds-color-border-soft); 3089 3090 /* Tab - Contained */ 3091 --ds-tabs-padding-contained-sm: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s); 3092 --ds-tabs-padding-contained-md: var(--ds-space-page-inside-s) var(--ds-space-page-inside-m); 3093 --ds-tabs-padding-contained-lg: var(--ds-space-page-inside-m) var(--ds-space-page-inside-l); 3094 --ds-tabs-color-contained: var(--ds-color-text-moderate); 3095 --ds-tabs-color-contained-hovered: var(--ds-color-text-brand-main); 3096 --ds-tabs-border-contained: none; 3097 --ds-tabs-color-contained-selected: var(--ds-color-text-brand-main); 3098 --ds-tabs-background-color-contained-selected: var(--ds-color-surface-brand-main);
3099 --ds-tabs-box-shadow-contained-focused: var(--ds-shadow-focus-ring-actions); 3100 3101 /* Tab - Underlined */ 3102 --ds-tabs-padding-underlined-horizontal-sm: var(--ds-space-page-inside-none) var(--ds-space-page-inside-s) var(--ds-space-page-inside-s); 3103 --ds-tabs-padding-underlined-horizontal-md: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-m) var(--ds-space-page-inside-s); 3104 --ds-tabs-padding-underlined-horizontal-lg: var(--ds-space-page-inside-s) var(--ds-space-page-inside-l) var(--ds-space-page-inside-s); 3105 --ds-tabs-padding-underlined-vertical-sm: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s); 3106 --ds-tabs-padding-underlined-vertical-md: var(--ds-space-page-inside-s) var(--ds-space-page-inside-m); 3107 --ds-tabs-padding-underlined-vertical-lg: var(--ds-space-page-inside-m) var(--ds-space-page-inside-l); 3108 --ds-tabs-color-underlined: var(--ds-color-text-moderate); 3109 --ds-tabs-color-underlined-hovered: var(--ds-color-text-brand-main); 3110 --ds-tabs-border-underlined: none; 3111 --ds-tabs-color-underlined-selected: var(--ds-color-text-brand-main); 3112 --ds-tabs-border-bottom-color-underlined-selected: var(--ds-color-foreground-brand-main); 3113 --ds-tabs-box-shadow-underlined-focused: none; 3114 3115 /* Label */ 3116 --ds-tabs-label-color-underlined-focused: var(--ds-color-text-main); 3117 --ds-tabs-label-line-height-underlined-focused: var(--ds-line-height-body-xs); 3118 --ds-tabs-label-text-decoration-underlined-focused: underline var(--ds-color-text-main) var(--ds-border-width-tier-4); 3119 --ds-tabs-label-background-color-underlined-focused: var(--ds-color-surface-link-pressed); 3120 3121 /* Content */ 3122 --ds-tabs-content-box-shadow-focused: var(--ds-shadow-focus-ring-actions); 3123 3124 /* Indicator */ 3125 --ds-tabs-indicator-height: var(--ds-border-width-tier-4); 3126 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)" with a semantic token */ 3127 --ds-tabs-indicator-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* no semantic transition token available */ 3128} 3129} 3130@layer components{ 3131[data-color-scheme="legacy"] { 3132 /* Tabs Contained variant - Focus state */ 3133 --ds-tabs-box-shadow-contained-focused: var(--ds-shadow-focus-ring-brand); 3134 3135 --ds-tabs-box-shadow-underlined-focused: var(--ds-shadow-focus-ring-brand); 3136 3137 /* Underlined variant - remove focus effect on .text element */ 3138 --ds-tabs-label-line-height-underlined-focused: inherit; 3139 --ds-tabs-label-text-decoration-underlined-focused: none; 3140 --ds-tabs-label-background-color-underlined-focused: transparent; 3141 3142 --ds-tabs-padding-underlined-horizontal-sm: var(--ds-space-page-inside-none) var(--ds-space-page-inside-s) var(--ds-space-page-inside-s); 3143 --ds-tabs-padding-underlined-horizontal-md: var(--ds-space-page-inside-none) var(--ds-space-page-inside-m) var(--ds-space-page-inside-s); 3144 --ds-tabs-padding-underlined-horizontal-lg: var(--ds-space-page-inside-none) var(--ds-space-page-inside-l) var(--ds-space-page-inside-s); 3145} 3146} 3147@layer components{ 3148:root, :host { 3149 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0.7" with a semantic token */ 3150 --ds-toggle-opacity-disabled: 0.7; 3151 3152 --ds-toggle-outlined-color-pressed: var(--ds-color-text-brand-soft); 3153 --ds-toggle-outlined-color-unpressed: var(--ds-color-text-main); 3154 --ds-toggle-outlined-color-disabled-pressed: var(--ds-color-text-strong-onbrand); 3155 --ds-toggle-outlined-color-disabled-unpressed: var(--ds-color-text-soft); 3156 3157 --ds-toggle-outlined-background-color-pressed: var(--ds-color-surface-brand-main); 3158 --ds-toggle-outlined-background-color-unpressed: var(--ds-color-surface-main); 3159 --ds-toggle-outlined-background-color-disabled-pressed: var(--ds-color-surface-main); 3160 --ds-toggle-outlined-background-color-disabled-unpressed: var(--ds-color-surface-main); 3161 3162 --ds-toggle-outlined-border-color-pressed: var(--ds-color-border-main); 3163 --ds-toggle-outlined-border-color-unpressed: var(--ds-color-border-main); 3164 --ds-toggle-outlined-border-color-disabled-pressed: var(--ds-color-border-disabled); 3165 --ds-toggle-outlined-border-color-disabled-unpressed: var(--ds-color-border-disabled); 3166
3167 --ds-toggle-outlined-box-shadow-pressed: none; 3168 --ds-toggle-outlined-box-shadow-unpressed: none; 3169 3170 --ds-toggle-text-color-pressed: var(--ds-color-text-brand-main); 3171 --ds-toggle-text-color-unpressed: var(--ds-color-text-main); 3172 --ds-toggle-text-color-disabled-pressed: var(--ds-color-text-strong-onbrand); 3173 --ds-toggle-text-color-disabled-unpressed: var(--ds-color-text-main); 3174 3175 --ds-toggle-text-background-color-pressed: var(--ds-color-surface-brand-main); 3176 --ds-toggle-text-background-color-unpressed: transparent; 3177 --ds-toggle-text-background-color-disabled-pressed: var(--ds-color-surface-disabled); 3178 --ds-toggle-text-background-color-disabled-unpressed: var(--ds-color-surface-disabled); 3179 3180 --ds-toggle-text-border-pressed: none; 3181 --ds-toggle-text-border-unpressed: none; 3182 --ds-toggle-text-border-disabled-pressed: none; 3183 --ds-toggle-text-border-disabled-unpressed: none; 3184 3185 --ds-toggle-text-box-shadow-pressed: none; 3186 --ds-toggle-text-box-shadow-unpressed: none; 3187} 3188} 3189@layer components{ 3190[data-color-scheme="legacy"] { 3191 --ds-toggle-opacity-disabled: 0.7; 3192 3193 --ds-toggle-outlined-color-pressed: var(--ds-color-text-main); 3194 --ds-toggle-outlined-color-unpressed: var(--ds-color-text-main); 3195 --ds-toggle-outlined-color-disabled-pressed: var(--ds-color-text-main); 3196 --ds-toggle-outlined-color-disabled-unpressed: var(--ds-color-text-main); 3197 3198 --ds-toggle-outlined-background-color-pressed: var(--ds-color-surface-strong); 3199 --ds-toggle-outlined-background-color-unpressed: var(--ds-color-surface-main); 3200 --ds-toggle-outlined-background-color-disabled-pressed: var(--ds-color-surface-disabled); 3201 --ds-toggle-outlined-background-color-disabled-unpressed: var(--ds-color-surface-disabled); 3202 3203 --ds-toggle-outlined-border-color-pressed: var(--ds-color-border-main); 3204 --ds-toggle-outlined-border-color-unpressed: var(--ds-color-border-main); 3205 --ds-toggle-outlined-border-color-disabled-pressed: var(--ds-color-border-main); 3206 --ds-toggle-outlined-border-color-disabled-unpressed: var(--ds-color-border-main); 3207 3208 --ds-toggle-outlined-box-shadow-pressed: inset 1px 1px 4px rgba(0, 0, 0, 0.06), inset -1px -1px 4px rgba(0, 0, 0, 0.06); 3209 --ds-toggle-outlined-box-shadow-unpressed: none; 3210 3211 --ds-toggle-text-color-pressed: var(--ds-color-text-main); 3212 --ds-toggle-text-color-unpressed: var(--ds-color-text-main); 3213 --ds-toggle-text-color-disabled-pressed: var(--ds-color-text-main); 3214 --ds-toggle-text-color-disabled-unpressed: var(--ds-color-text-main); 3215 3216 --ds-toggle-text-background-color-pressed: var(--ds-color-surface-strong); 3217 --ds-toggle-text-background-color-unpressed: transparent; 3218 --ds-toggle-text-background-color-disabled-pressed: var(--ds-color-surface-disabled); 3219 --ds-toggle-text-background-color-disabled-unpressed: var(--ds-color-surface-disabled); 3220 3221 --ds-toggle-text-border-pressed: none; 3222 --ds-toggle-text-border-unpressed: none; 3223 --ds-toggle-text-border-disabled-pressed: none; 3224 --ds-toggle-text-border-disabled-unpressed: none; 3225 3226 --ds-toggle-text-box-shadow-pressed: inset 1px 1px 4px rgba(0, 0, 0, 0.06), inset -1px -1px 4px rgba(0, 0, 0, 0.06); 3227 --ds-toggle-text-box-shadow-unpressed: none; 3228} 3229} 3230@layer components{ 3231:root, :host { 3232 /* Tooltip content wrapper */ 3233 --ds-tooltip-border-radius: var(--ds-radius-m); 3234 --ds-tooltip-background-color: var(--ds-color-surface-solid); 3235 --ds-tooltip-padding-vertical: var(--ds-space-page-inside-xs); 3236 --ds-tooltip-padding-horizontal: var(--ds-space-page-inside-s); 3237 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "1050" with a semantic token */ 3238 --ds-tooltip-z-index: 1050; /* TODO: remove this once we have a proper z-index tokens in smartling DS */ 3239 --ds-tooltip-content-gap: var(--ds-space-page-inside-2xs); 3240 3241 /* Tooltip title */ 3242 --ds-tooltip-title-color: var(--ds-color-text-white); 3243 --ds-tooltip-title-font: var(--ds-font-body-strongest-xs); 3244 3245 /* Tooltip description */ 3246 --ds-tooltip-description-color: var(--ds-color-text-white); 3247 --ds-tooltip-description-font: var(--ds-font-body-default-xs); 3248 3249 /* Tooltip arrow */ 3250 --ds-tooltip-arrow-fill: var(--ds-color-surface-solid); 3251} 3252} 3253@layer components{ 3254[data-color-scheme="legacy"] { 3255 /* Tooltip content wrapper */ 3256 --ds-tooltip-border-radius: 8px; 3257 --ds-tooltip-background-color: var(--ds-color-surface-solid); 3258 --ds-tooltip-padding-vertical: 0.375rem; 3259 --ds-tooltip-padding-horizontal: 0.5rem; 3260 --ds-tooltip-z-index: 1050; /* TODO: remove this once we have a proper z-index tokens in smartling DS */ 3261 --ds-tooltip-content-gap: 0.25rem; 3262 3263 /* Tooltip title */ 3264 --ds-tooltip-title-color: var(--ds-color-text-white); 3265 --ds-tooltip-title-font: var(--ds-font-body-strongest-s); 3266 3267 /* Tooltip description */ 3268 --ds-tooltip-description-color: var(--ds-color-text-white); 3269 --ds-tooltip-description-font: var(--ds-font-body-default-s); 3270 3271 /* Tooltip arrow */ 3272 --ds-tooltip-arrow-fill: var(--ds-color-surface-solid); 3273} 3274} 3275@layer components{ 3276:root, :host { 3277 /* Checkbox */ 3278 --ds-checkbox-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main); 3279 /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */ 3280 --ds-checkbox-checked-bg-color: var(--ds-color-foreground-main); 3281 --ds-checkbox-border-disabled: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled); 3282 --ds-checkbox-background-color-disabled: var(--ds-color-surface-disabled); 3283 --ds-checkbox-focus-ring-shadow: var(--ds-shadow-focus-ring-actions); 3284 3285 /* Indicator */ 3286 --ds-checkbox-indicator-color: var(--ds-color-surface-main); 3287 --ds-checkbox-indicator-color-disabled: var(--ds-color-foreground-disabled); 3288 3289 /* Transitions */ 3290 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "opacity 120ms linear" with a semantic token */ 3291 --ds-checkbox-indicator-transition: opacity 120ms linear; 3292 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "background-color 120ms linear, border-color 120ms linear" with a semantic token */ 3293 --ds-checkbox-background-transition: background-color 120ms linear, border-color 120ms linear; 3294 3295 /* Sizes: sm */ 3296 --ds-checkbox-sm-label-gap: var(--ds-space-page-inside-xs); 3297 --ds-checkbox-sm-width: var(--ds-size-actions-3xs); 3298 --ds-checkbox-sm-height: var(--ds-size-actions-3xs); 3299 --ds-checkbox-sm-border-radius: var(--ds-radius-xs); 3300 --ds-checkbox-sm-icon-width: var(--ds-size-icon-xs); 3301 --ds-checkbox-sm-icon-height: var(--ds-size-icon-xs); 3302 3303 /* Sizes: md */ 3304 --ds-checkbox-md-label-gap: calc(var(--ds-space-page-inside-xs) * 1.5); 3305 --ds-checkbox-md-width: var(--ds-size-actions-2xs); 3306 --ds-checkbox-md-height: var(--ds-size-actions-2xs); 3307 --ds-checkbox-md-border-radius: var(--ds-radius-s); 3308 --ds-checkbox-md-icon-width: var(--ds-size-icon-s); 3309 --ds-checkbox-md-icon-height: var(--ds-size-icon-s); 3310} 3311} 3312@layer components{ 3313/* 3314 * Deprecated token aliases â DO NOT edit manually. 3315 * Generated by: pnpm deprecate-token 3316 * 3317 * Each alias maps an old token name to the current one via var(). 3318 * This file is loaded in :root for global backward compatibility. 3319 */ 3320:root, :host { 3321 3322 /* @deprecated 2026-06-06 v0.3.12 -- use --ds-checkbox-indicator-color-disabled */ 3323 --ds-checkbox-indicator-disabled-color: var(--ds-checkbox-indicator-color-disabled); 3324} 3325} 3326@layer components{ 3327/* Legacy theme overrides */ 3328:root[data-color-scheme="legacy"], div[data-color-scheme="legacy"] { 3329 /* Checkbox */ 3330 --ds-checkbox-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main); 3331 --ds-checkbox-checked-bg-color: var(--ds-color-surface-brand-solid); 3332 --ds-checkbox-focus-ring-shadow: var(--ds-shadow-focus-ring-actions); 3333 3334 /* Indicator */ 3335 --ds-checkbox-indicator-color: var(--ds-color-foreground-main-onbrand); 3336 3337 /* Transitions */ 3338 --ds-checkbox-indicator-transition: opacity 120ms linear; 3339 --ds-checkbox-background-transition: background-color 120ms linear, border-color 100ms linear; 3340 3341 /* Sizes: sm */ 3342 --ds-checkbox-sm-label-gap: var(--ds-space-page-inside-s); 3343 --ds-checkbox-sm-width: calc(var(--ds-size-actions-3xs) * 2); 3344 --ds-checkbox-sm-height: calc(var(--ds-size-actions-3xs) * 2); 3345 --ds-checkbox-sm-border-radius: var(--ds-radius-xs); 3346 --ds-checkbox-sm-icon-width: calc(var(--ds-size-icon-xs) * 1.5); 3347 --ds-checkbox-sm-icon-height: calc(var(--ds-size-icon-xs) * 1.5); 3348 3349 /* Sizes: md */ 3350 --ds-checkbox-md-label-gap: calc(var(--ds-space-page-inside-s) * 1.5); 3351 --ds-checkbox-md-width: calc(var(--ds-size-actions-2xs) * 1.667); 3352 --ds-checkbox-md-height: calc(var(--ds-size-actions-2xs) * 1.667); 3353 --ds-checkbox-md-border-radius: var(--ds-radius-s); 3354 --ds-checkbox-md-icon-width: calc(var(--ds-size-icon-s) * 1.3); 3355 --ds-checkbox-md-icon-height: calc(var(--ds-size-icon-s) * 1.3); 3356} 3357} 3358@layer components{ 3359:root, :host { 3360 /* Switch */ 3361 --ds-switch-border-radius: var(--ds-radius-full); 3362 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "background-color 100ms linear" with a semantic token */ 3363 --ds-switch-transition: background-color 100ms linear; 3364 /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */ 3365 --ds-switch-bg-color-checked: var(--ds-color-surface-form-selected); 3366 --ds-switch-focus-ring-shadow: var(--ds-shadow-focus-ring-actions); 3367 /* Track border, drawn as an inset box-shadow so it never shifts the track size / thumb position */
3368 --ds-switch-track-box-shadow-focused: inset 0 0 0 var(--ds-border-width-tier-4) var(--ds-color-border-solid); 3369 --ds-switch-track-box-shadow-disabled: inset 0 0 0 var(--ds-border-width-tier-2) var(--ds-color-border-disabled); 3370 /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */ 3371 --ds-switch-bg-color-disabled: var(--ds-color-surface-disabled); 3372 /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */ 3373 --ds-switch-bg-color-unchecked: var(--ds-color-surface-strong); 3374 /* Switch thumb */ 3375 /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */ 3376 --ds-switch-thumb-bg-color: var(--ds-color-surface-main); 3377 --ds-switch-thumb-background-color-disabled: var(--ds-color-foreground-disabled); 3378 --ds-switch-thumb-box-shadow: var(--ds-shadow-standard-s); 3379 --ds-switch-thumb-border-radius: var(--ds-radius-full); 3380 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "transform 100ms linear" with a semantic token */ 3381 --ds-switch-thumb-transition: transform 100ms linear; 3382 3383 /* Sizes: sm */ 3384 --ds-switch-sm-width: var(--ds-size-actions-l); 3385 --ds-switch-sm-height: var(--ds-size-actions-2xs); 3386 --ds-switch-sm-thumb-size: var(--ds-size-actions-3xs); 3387 --ds-switch-sm-thumb-offset: calc(var(--ds-global-size-universal-scale) * 0.2); 3388 --ds-switch-sm-label-gap: var(--ds-space-page-inside-xs); 3389 3390 /* Sizes: md */ 3391 --ds-switch-md-width: var(--ds-size-actions-2xl); 3392 --ds-switch-md-height: var(--ds-size-actions-xs); 3393 --ds-switch-md-thumb-size: var(--ds-size-actions-2xs); 3394 --ds-switch-md-thumb-offset: calc(var(--ds-global-size-universal-scale) * 0.2); 3395 --ds-switch-md-label-gap: var(--ds-space-page-inside-s); 3396} 3397} 3398@layer components{ 3399/* 3400 * Deprecated token aliases â DO NOT edit manually. 3401 * Generated by: pnpm deprecate-token 3402 * 3403 * Each alias maps an old token name to the current one via var(). 3404 * This file is loaded in :root for global backward compatibility. 3405 */ 3406:root, :host { 3407 3408 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-switch-box-shadow-focused */ 3409 --ds-switch-box-shadow-focus: var(--ds-switch-box-shadow-focused); 3410 3411 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-switch-background-color-unchecked-focused */ 3412 --ds-switch-bg-color-unchecked-focus: var(--ds-switch-background-color-unchecked-focused); 3413 3414 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-switch-background-color-checked-hovered */ 3415 --ds-switch-bg-color-checked-hover: var(--ds-switch-background-color-checked-hovered); 3416 3417 /* @deprecated 2026-05-30 v0.3.11 -- use --ds-switch-focus-ring-shadow */ 3418 --ds-switch-box-shadow-focused: var(--ds-switch-focus-ring-shadow); 3419 3420 /* @deprecated 2026-05-30 v0.3.11 -- use --ds-switch-bg-color-checked */ 3421 --ds-switch-background-color-checked-hovered: var(--ds-switch-bg-color-checked); 3422 3423 /* @deprecated 2026-05-30 v0.3.11 -- use --ds-switch-bg-color-unchecked */ 3424 --ds-switch-background-color-unchecked-focused: var(--ds-switch-bg-color-unchecked); 3425} 3426} 3427@layer components{ 3428/* Legacy theme overrides */ 3429:root[data-color-scheme="legacy"], div[data-color-scheme="legacy"] { 3430 /* Switch */ 3431 --ds-switch-border-radius: var(--ds-radius-full); 3432 --ds-switch-transition: background-color 100ms linear; 3433 --ds-switch-bg-color-checked: var(--ds-color-surface-brand-solid); 3434 --ds-switch-focus-ring-shadow: var(--ds-shadow-focus-ring-brand); 3435 --ds-switch-bg-color-disabled: var(--ds-color-surface-soft); 3436 --ds-switch-bg-color-unchecked: var(--ds-color-surface-strong); 3437 3438 /* Switch thumb */ 3439 --ds-switch-thumb-bg-color: var(--ds-color-surface-main); 3440 --ds-switch-thumb-box-shadow: var(--ds-shadow-standard-s); 3441 --ds-switch-thumb-border-radius: var(--ds-radius-full); 3442 --ds-switch-thumb-transition: transform 100ms linear; 3443 3444 /* Switch track */
3445 --ds-switch-track-box-shadow-focused: inset 0 0 transparent; 3446 3447 /* Sizes: sm */ 3448 --ds-switch-sm-width: calc(var(--ds-size-actions-l) * 1.3); 3449 --ds-switch-sm-height: calc(var(--ds-size-actions-xs) * 1.25); 3450 --ds-switch-sm-thumb-size: var(--ds-size-actions-xs); 3451 --ds-switch-sm-thumb-offset: calc(var(--ds-global-size-universal-scale) * 0.18); 3452 --ds-switch-sm-label-gap: calc(var(--ds-space-page-inside-xs) * 2); 3453 3454 /* Sizes: md */ 3455 --ds-switch-md-width: calc(var(--ds-size-actions-3xl) * 1.1); 3456 --ds-switch-md-height: calc(var(--ds-size-actions-xs) * 1.5); 3457 --ds-switch-md-thumb-size: var(--ds-size-actions-s); 3458 --ds-switch-md-thumb-offset: calc(var(--ds-global-size-universal-scale) * 0.18); 3459 --ds-switch-md-label-gap: calc(var(--ds-space-page-inside-s) * 1.5); 3460} 3461} 3462@layer components{ 3463:root, :host { 3464 /* Link base */ 3465 --ds-link-icon-offset-y: calc(-1 * var(--ds-dimension-tier-2)); 3466 --ds-link-color: var(--ds-color-text-link); 3467 --ds-link-background-color: transparent; 3468 --ds-link-border: none; 3469 --ds-link-cursor: pointer; 3470 --ds-link-cursor-disabled: not-allowed; 3471 3472 /* Link hover */ 3473 --ds-link-color-hovered: var(--ds-color-text-link-hover); 3474 3475 /* Link focus/active */ 3476 --ds-link-color-activated: var(--ds-color-text-main); 3477 --ds-link-background-gradient: linear-gradient( 3478 var(--ds-color-surface-link-pressed) 0, 3479 var(--ds-color-surface-link-pressed) 100% 3480 ); 3481 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "100% 1rem" with a semantic token */ 3482 --ds-link-background-size-activated: 100% 1rem; 3483 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0 50%" with a semantic token */ 3484 --ds-link-background-position: 0 50%; 3485 --ds-link-outline: none; 3486 --ds-link-outline-offset: 0; 3487 3488 /* Link disabled */ 3489 --ds-link-color-disabled: var(--ds-color-text-disabled); 3490 3491 /* Link icon */ 3492 --ds-link-icon-color: var(--ds-color-foreground-link); 3493 --ds-link-icon-color-hovered: var(--ds-color-foreground-link-hover); 3494 --ds-link-icon-padding-left: var(--ds-space-page-inside-2xs); 3495 /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "1" with a semantic token */ 3496 --ds-link-icon-line-height: 1; 3497 3498 /* Link sizes - xs */ 3499 --ds-link-xs-font: var(--ds-font-body-default-xs); 3500 --ds-link-xs-background-size: 100% var(--ds-font-size-xs); 3501 --ds-link-xs-icon-size: var(--ds-size-icon-xs); 3502 3503 /* Link sizes - sm */ 3504 --ds-link-sm-font: var(--ds-font-body-default-s); 3505 --ds-link-sm-background-size: 100% var(--ds-font-size-xs); 3506 --ds-link-sm-icon-size: var(--ds-size-icon-xs); 3507 3508 /* Link sizes - md */ 3509 --ds-link-md-font: var(--ds-font-body-default-m); 3510 --ds-link-md-background-size: 100% var(--ds-font-size-m); 3511 --ds-link-md-icon-size: var(--ds-size-icon-s); 3512 3513 /* Link sizes - lg */ 3514 --ds-link-lg-font: var(--ds-font-body-default-l); 3515 --ds-link-lg-background-size: 100% var(--ds-font-size-m); 3516 --ds-link-lg-icon-size: var(--ds-size-icon-s); 3517 3518 /* Link font weights */ 3519 --ds-link-font-weight-regular: var(--ds-font-weight-body); 3520 --ds-link-font-weight-medium: var(--ds-font-weight-body-strong); 3521 --ds-link-font-weight-strongest: var(--ds-font-weight-body-strongest); 3522} 3523} 3524@layer components{ 3525/* 3526 * Deprecated token aliases â DO NOT edit manually. 3527 * Generated by: pnpm deprecate-token 3528 * 3529 * Each alias maps an old token name to the current one via var(). 3530 * This file is loaded in :root for global backward compatibility. 3531 */ 3532:root, :host { 3533 3534 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-link-color-hovered */ 3535 --ds-link-color-hover: var(--ds-link-color-hovered); 3536 3537 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-link-color-activated */ 3538 --ds-link-color-active: var(--ds-link-color-activated); 3539 3540 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-link-background-size-activated */ 3541 --ds-link-background-size-active: var(--ds-link-background-size-activated); 3542 3543 /* @deprecated 2026-04-17 v0.3.0 -- use --ds-link-icon-color-hovered */ 3544 --ds-link-icon-color-hover: var(--ds-link-icon-color-hovered); 3545 3546 /* @deprecated 2026-05-25 v0.3.7 -- size="md" inherited typography from the parent via an unresolved var(); use size="inherit" instead. Remove once all consumers are on @smartling-ui/[email protected]+ and @smartling-ui/[email protected]+ (when size="inherit" became the default). */ 3547 /* stylelint-disable-next-line smartling-ds/no-undefined-tokens -- intentional: unresolved var() makes md inherit font from its parent (legacy behavior) */ 3548 --ds-link-md-font: var(--ds-font-body-default-md); 3549} 3550 3551[data-color-scheme="legacy"] { 3552 /* Same mdâinherit deprecation as above, scoped to the legacy color scheme. !important is required because link-legacy.css loads after this file (per the variables.css convention) and would otherwise win by source order at equal specificity. */ 3553 /* stylelint-disable-next-line smartling-ds/no-undefined-tokens -- intentional: unresolved var() makes md inherit font from its parent (legacy behavior) */ 3554 --ds-link-md-font: var(--ds-font-body-default-md) !important; 3555} 3556} 3557@layer components{ 3558[data-color-scheme="legacy"] { 3559 /* Link base */ 3560 --ds-link-icon-offset-y: calc(-1 * var(--ds-dimension-tier-4)); 3561 --ds-link-color: var(--ds-color-text-link); 3562 --ds-link-background-color: transparent; 3563 --ds-link-border: none; 3564 --ds-link-cursor: pointer; 3565 --ds-link-cursor-disabled: not-allowed; 3566 3567 /* Link hover */ 3568 --ds-link-color-hover: var(--ds-color-text-link-hover); 3569 --ds-link-color-hovered: var(--ds-color-text-link-hover); 3570 3571 /* Link focus/active */ 3572 --ds-link-color-active: var(--ds-color-text-main); 3573 --ds-link-color-activated: var(--ds-color-text-main); 3574 --ds-link-background-gradient: linear-gradient( 3575 var(--ds-color-surface-link-pressed) 0, 3576 var(--ds-color-surface-link-pressed) 100% 3577 ); 3578 --ds-link-background-size-active: 100% 1rem; 3579 --ds-link-background-size-activated: 100% 1rem; 3580 --ds-link-background-position: 0 50%; 3581 --ds-link-outline: none; 3582 --ds-link-outline-offset: 0; 3583 3584 /* Link disabled */ 3585 --ds-link-color-disabled: var(--ds-color-text-disabled); 3586 3587 /* Link icon */ 3588 --ds-link-icon-color: var(--ds-color-foreground-link); 3589 --ds-link-icon-color-hover: var(--ds-color-foreground-link-hover); 3590 --ds-link-icon-color-hovered: var(--ds-color-foreground-link-hover); 3591 --ds-link-icon-padding-left: var(--ds-space-page-inside-2xs); 3592 --ds-link-icon-line-height: 1; 3593 3594 /* Link sizes - xs */ 3595 --ds-link-xs-font: var(--ds-font-body-default-xs); 3596 --ds-link-xs-background-size: 100% var(--ds-font-size-xs); 3597 --ds-link-xs-icon-size: var(--ds-size-icon-s); 3598 3599 /* Link sizes - sm */ 3600 --ds-link-sm-font: var(--ds-font-body-default-s); 3601 --ds-link-sm-background-size: 100% var(--ds-font-size-xs); 3602 --ds-link-sm-icon-size: var(--ds-size-icon-s); 3603 3604 /* Link sizes - md */ 3605 --ds-link-md-font: var(--ds-font-body-default-m); 3606 --ds-link-md-background-size: 100% var(--ds-font-size-m); 3607 --ds-link-md-icon-size: var(--ds-size-icon-m); 3608 3609 /* Link sizes - lg */ 3610 --ds-link-lg-font: var(--ds-font-body-default-l); 3611 --ds-link-lg-background-size: 100% var(--ds-font-size-m); 3612 --ds-link-lg-icon-size: var(--ds-size-icon-m); 3613 3614 /* Link font weights */ 3615 --ds-link-font-weight-regular: var(--ds-font-weight-body); 3616 --ds-link-font-weight-medium: var(--ds-font-weight-body-strong); 3617 --ds-link-font-weight-strongest: var(--ds-font-weight-body-strongest); 3618} 3619} 3620@layer components{ 3621:root, :host { 3622 /* 3623 * Text tokens are decomposed into individual properties (font-size, 3624 * line-height, font-family) rather than the \`font\` shorthand. The shorthand 3625 * resets every font property (including font-weight), which would silently 3626 * pin the weight even when a consumer sets \`weight="inherit"\`. Keeping the 3627 * axes (size, weight, color) genuinely independent requires per-property 3628 * tokens. 3629 * 3630 * Naming follows the convention --ds-{component}-{css-property}-{variant}: 3631 * size/state segments come AFTER the css-property segment. 3632 */ 3633 3634 /* Text â font-size by size */ 3635 --ds-text-font-size-xs: var(--ds-font-size-xs); 3636 --ds-text-font-size-sm: var(--ds-font-size-s); 3637 --ds-text-font-size-md: var(--ds-font-size-m); 3638 --ds-text-font-size-lg: var(--ds-font-size-l); 3639 --ds-text-font-size-xl: var(--ds-font-size-xl); 3640 3641 /* Text â line-height by size */ 3642 --ds-text-line-height-xs: var(--ds-line-height-body-xs); 3643 --ds-text-line-height-sm: var(--ds-line-height-body-s); 3644 --ds-text-line-height-md: var(--ds-line-height-body-m); 3645 --ds-text-line-height-lg: var(--ds-line-height-body-l); 3646 --ds-text-line-height-xl: var(--ds-line-height-body-xl); 3647 3648 /* Text â font-family (shared across all sizes) */ 3649 --ds-text-font-family: var(--ds-font-family-base); 3650 3651 /* Text â font-weight by variant */
3652 --ds-text-font-weight-regular: var(--ds-font-weight-body); 3653 --ds-text-font-weight-medium: var(--ds-font-weight-body-strong); 3654 --ds-text-font-weight-strongest: var(--ds-font-weight-body-strongest); 3655 3656 /* Shared text colors (used by both Text and Heading) */ 3657 --ds-text-color-main: var(--ds-color-text-main); 3658 --ds-text-color-soft: var(--ds-color-text-soft); 3659 --ds-text-color-moderate: var(--ds-color-text-moderate); 3660 --ds-text-color-strong: var(--ds-color-text-strong); 3661 --ds-text-color-disabled: var(--ds-color-text-disabled); 3662} 3663} 3664@layer components{ 3665:root, :host { 3666 /* 3667 * Heading tokens â visual scale decoupled from semantic level. All weights 3668 * are fixed at 600 (--ds-font-weight-heading), so the size class only sets 3669 * font-size, line-height, and font-family. The base .heading class owns 3670 * font-weight, not the size class. 3671 * 3672 * Six visual sizes mirror the dev-facing "Default Headings" scale from the 3673 * Figma typography spec â one slot per HTML heading level: 16/18/20/24/32/40. 3674 * 3675 * Font properties are exposed as individual tokens (not the \`font\` 3676 * shorthand) to keep the implementation contract from the README's 3677 * Functional Requirement 12. 3678 * 3679 * Naming follows the convention --ds-{component}-{css-property}-{variant}: 3680 * size segments come AFTER the css-property segment. 3681 */ 3682 3683 /* Heading â font-size by size */ 3684 --ds-heading-font-size-xs: var(--ds-font-size-m); 3685 --ds-heading-font-size-sm: var(--ds-font-size-l); 3686 --ds-heading-font-size-md: var(--ds-font-size-xl); 3687 --ds-heading-font-size-lg: var(--ds-font-size-2xl); 3688 --ds-heading-font-size-xl: var(--ds-font-size-3xl); 3689 --ds-heading-font-size-2xl: var(--ds-font-size-4xl); 3690 3691 /* Heading â line-height by size */ 3692 --ds-heading-line-height-xs: var(--ds-line-height-body-m); 3693 --ds-heading-line-height-sm: var(--ds-line-height-body-l); 3694 --ds-heading-line-height-md: var(--ds-line-height-body-xl); 3695 --ds-heading-line-height-lg: var(--ds-line-height-heading-xs); 3696 --ds-heading-line-height-xl: var(--ds-line-height-heading-s); 3697 --ds-heading-line-height-2xl: var(--ds-line-height-heading-m); 3698 3699 /* Heading â font-family (shared) */ 3700 --ds-heading-font-family: var(--ds-font-family-base); 3701 3702 /* Heading â fixed font-weight */ 3703 --ds-heading-font-weight: var(--ds-font-weight-heading); 3704} 3705} 3706@layer components{ 3707:root, :host { 3708 /* Root */ 3709 --ds-field-gap-sm: var(--ds-space-page-inside-s); 3710 --ds-field-gap-md: var(--ds-space-page-inside-s); 3711 3712 /* Label */ 3713 --ds-field-label-color: var(--ds-color-text-soft); 3714 --ds-field-label-color-disabled: var(--ds-color-text-disabled); 3715 --ds-field-label-font-sm: var(--ds-font-body-strong-s); 3716 --ds-field-label-font-md: var(--ds-font-body-strong-s); 3717 3718 /* Description */ 3719 --ds-field-description-color: var(--ds-color-text-moderate); 3720 --ds-field-description-color-hovered: var(--ds-color-text-moderate-hover); 3721 --ds-field-description-color-disabled: var(--ds-color-text-disabled); 3722 --ds-field-description-font-sm: var(--ds-font-body-default-s); 3723 --ds-field-description-font-md: var(--ds-font-body-default-s); 3724 3725 /* Error */ 3726 --ds-field-error-color: var(--ds-color-text-error-main); 3727 --ds-field-error-color-hovered: var(--ds-color-text-error-main-hover); 3728 --ds-field-error-font-sm: var(--ds-font-body-strong-s); 3729 --ds-field-error-font-md: var(--ds-font-body-strong-s); 3730 --ds-field-error-gap: var(--ds-space-page-inside-2xs); 3731 3732 /* Group */ 3733 --ds-field-group-gap: var(--ds-space-page-inside-m); 3734 3735 /* FieldSet */ 3736 --ds-field-fieldset-border: var(--ds-border-width-tier-1) solid var(--ds-color-border-moderate); 3737 --ds-field-fieldset-border-radius: var(--ds-radius-m); 3738 --ds-field-fieldset-padding: var(--ds-space-page-inside-m); 3739 3740 /* FieldLegend */ 3741 --ds-field-legend-font: var(--ds-font-body-strong-m); 3742 --ds-field-legend-color: var(--ds-color-text-main); 3743 3744 /* Separator */ 3745 --ds-field-separator-border-width: var(--ds-border-width-tier-1); 3746 --ds-field-separator-border-color: var(--ds-color-border-soft); 3747 --ds-field-separator-text-padding: var(--ds-space-page-inside-xs); 3748 --ds-field-separator-text-font-size: var(--ds-font-size-s); 3749 3750 /* Error â icon & list */ 3751 --ds-field-error-icon-size: var(--ds-size-icon-s); 3752 --ds-field-error-list-padding: var(--ds-space-page-inside-l); 3753 --ds-field-error-text-margin: 0.18rem; 3754 3755 /* Label alignment in responsive horizontal layout */ 3756 --ds-field-label-padding-top-sm: var(--ds-input-padding-vertical-sm); 3757 --ds-field-label-padding-top-md: var(--ds-input-padding-vertical-md); 3758} 3759} 3760@layer components{ 3761[data-color-scheme="legacy"] { 3762 /* Root */ 3763 --ds-field-gap-sm: 0.625rem; 3764 --ds-field-gap-md: 0.625rem; 3765 3766 /* Label */ 3767 --ds-field-label-color: var(--ds-color-text-soft); 3768 --ds-field-label-color-disabled: var(--ds-color-text-disabled); 3769 --ds-field-label-font-sm: var(--ds-font-body-strongest-s); 3770 --ds-field-label-font-md: var(--ds-font-body-strongest-s); 3771 3772 /* Description */ 3773 --ds-field-description-color: var(--ds-color-text-moderate); 3774 --ds-field-description-color-disabled: var(--ds-color-text-disabled); 3775 --ds-field-description-font-sm: var(--ds-font-body-default-s); 3776 --ds-field-description-font-md: var(--ds-font-body-default-s); 3777 3778 /* Error */ 3779 --ds-field-error-color: var(--ds-color-text-error-main); 3780 --ds-field-error-font-sm: var(--ds-font-body-strong-s); 3781 --ds-field-error-font-md: var(--ds-font-body-strong-s); 3782 --ds-field-error-gap: var(--ds-space-page-inside-2xs); 3783 --ds-field-error-text-margin: 0.18rem; 3784} 3785} 3786@layer components{ 3787:root, :host { 3788 --ds-uic-anchor-box-shadow-focused: var(--ds-shadow-focus-ring-actions); 3789} 3790} 3791@layer components{ 3792[data-color-scheme="legacy"] { 3793 --ds-uic-anchor-box-shadow-focused: var(--ds-shadow-focus-ring-actions); 3794} 3795} 3796@layer components{ 3797:root, :host { 3798 --ds-uic-results-toolbar-color: var(--ds-color-text-main); 3799 --ds-uic-results-toolbar-font: var(--ds-font-body-default-s); 3800 --ds-uic-results-toolbar-background-color: var(--ds-color-surface-solid); 3801 3802 --ds-uic-results-toolbar-first-row-height: var(--ds-space-page-inside-xl); 3803 --ds-uic-results-toolbar-first-row-padding: var(--ds-space-page-inside-s); 3804 3805 /* Selection items by props */ 3806 --ds-uic-results-toolbar-gap: var(--ds-space-page-inside-s); 3807 --ds-uic-results-toolbar-selection-items-gap: var(--ds-uic-results-toolbar-gap); 3808 --ds-uic-results-toolbar-selection-items-divider-color: var(--ds-color-border-main); 3809 3810 /* Actions button on first row */ 3811 --ds-uic-results-toolbar-actions-button-width: fit-content; 3812 3813 /* Sorting button on first row */ 3814 --ds-uic-results-toolbar-sorting-button-padding-left: 0; 3815 --ds-uic-results-toolbar-sorting-button-padding-right: 0; 3816 3817 /* Second row */ 3818 --ds-uic-results-toolbar-second-row-height: fit-content; 3819 --ds-uic-results-toolbar-second-row-background-color: var(--ds-color-neutral-200);
3820 --ds-uic-results-toolbar-second-row-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s); 3821 --ds-uic-results-toolbar-second-row-border-radius: 0; 3822 3823 /* Filter token provided by props on second row */ 3824 --ds-uic-results-toolbar-filter-token-color: var(--ds-color-text-main); 3825} 3826} 3827@layer components{ 3828[data-color-scheme="legacy"] { 3829 --ds-uic-results-toolbar-color: var(--ds-color-text-main); 3830 --ds-uic-results-toolbar-font: var(--ds-font-body-default-s); 3831 --ds-uic-results-toolbar-background-color: var(--ds-color-surface-solid); 3832 3833 --ds-uic-results-toolbar-first-row-height: fit-content; 3834 --ds-uic-results-toolbar-first-row-padding: 0; 3835 3836 /* Selection items by props */ 3837 --ds-uic-results-toolbar-gap: var(--ds-space-page-inside-s); 3838 --ds-uic-results-toolbar-selection-items-gap: var(--ds-uic-results-toolbar-gap); 3839 --ds-uic-results-toolbar-selection-items-divider-color: var(--ds-color-border-main); 3840 3841 /* Actions button on first row */ 3842 --ds-uic-results-toolbar-actions-button-width: fit-content; 3843 3844 /* Sorting button on first row */ 3845 --ds-uic-results-toolbar-sorting-button-padding-left: 0; 3846 --ds-uic-results-toolbar-sorting-button-padding-right: 0; 3847 3848 /* Second row */ 3849 --ds-uic-results-toolbar-second-row-height: 2.5rem; 3850 --ds-uic-results-toolbar-second-row-background-color: var(--ds-color-neutral-200); 3851 --ds-uic-results-toolbar-second-row-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s); 3852 --ds-uic-results-toolbar-second-row-border-radius: var(--ds-radius-m) var(--ds-radius-m) 0 0; 3853 3854 /* Filter token provided by props on second row */ 3855 --ds-uic-results-toolbar-filter-token-color: var(--ds-color-text-main); 3856} 3857} 3858@layer components{ 3859:root, :host { 3860 --ds-uic-pagination-toolbar-font: var(--ds-font-body-default-s); 3861 --ds-uic-pagination-toolbar-color: var(--ds-color-text-main); 3862 --ds-uic-pagination-toolbar-gap: var(--ds-space-page-inside-xs); 3863 3864 --ds-uic-pagination-toolbar-text-input-padding: 0; 3865 --ds-uic-pagination-toolbar-text-input-width: 2.75rem; 3866} 3867} 3868@layer components{ 3869[data-color-scheme="legacy"] { 3870 --ds-uic-pagination-toolbar-font: var(--ds-font-body-default-s); 3871 --ds-uic-pagination-toolbar-color: var(--ds-color-text-main); 3872 --ds-uic-pagination-toolbar-gap: var(--ds-space-page-inside-xs); 3873 3874 --ds-uic-pagination-toolbar-text-input-padding: 0; 3875 --ds-uic-pagination-toolbar-text-input-width: 2.75rem; 3876} 3877} 3878/* Layer 6: Utility overrides (highest priority in cascade) */ 3879@layer utilities { 3880 [data-theme="dark"], [data-theme="light"] { 3881 /* Override existing font-size: 16px!important */ 3882 font-size: var(--ds-font-size-html) !important; 3883 } 3884 3885 [data-color-scheme="smartling"] { 3886 font-family: "Inter", sans-serif; 3887 font-optical-sizing: auto; 3888 font-weight: normal; 3889 font-style: normal; 3890 } 3891 3892 a[class*="src-_anchor"], button[class*="buttonStyles-_tertiary"] { 3893 color: var(--ds-color-text-link); 3894 } 3895 3896 button[class*="buttonStyles-_tertiary"]:hover, a[class*="src-_anchor"]:hover { 3897 color: var(--ds-color-text-link-hover); 3898 } 3899} 3900 3901`,"",{version:3,sources:["webpack://./src/theme.css","webpack://./src/css/variables.css","webpack://./src/css/legacy-variables.css","webpack://./src/css/light-theme.css","webpack://./src/css/dark-theme.css","webpack://./src/css/legacy-light-theme.css","webpack://./src/css/legacy-dark-theme.css","webpack://./src/css/large-theme.css","webpack://./src/components/accordion.css","webpack://./src/components/avatar.css","webpack://./src/components/badge.css","webpack://./src/components/badge-legacy.css","webpack://./src/components/banner.css","webpack://./src/components/banner-legacy.css","webpack://./src/components/button.css","webpack://./src/components/button-deprecated.css","webpack://./src/components/button-legacy.css","webpack://./src/components/chip.css","webpack://./src/components/chip-legacy.css","webpack://./src/components/dialog.css","webpack://./src/components/dialog-legacy.css","webpack://./src/components/dropdown-menu.css","webpack://./src/components/dropdown-menu-deprecated.css","webpack://./src/components/dropdown-menu-legacy.css","webpack://./src/components/input.css","webpack://./src/components/input-deprecated.css","webpack://./src/components/input-legacy.css","webpack://./src/components/input-group.css","webpack://./src/components/input-group-legacy.css","webpack://./src/components/label.css","webpack://./src/components/label-deprecated.css","webpack://./src/components/label-legacy.css","webpack://./src/components/layout.css","webpack://./src/components/popover.css","webpack://./src/components/popover-legacy.css","webpack://./src/components/stepper.css","webpack://./src/components/table.css","webpack://./src/components/table-deprecated.css","webpack://./src/components/table-legacy.css","webpack://./src/components/radio.css","webpack://./src/components/radio-deprecated.css","webpack://./src/components/radio-legacy.css","webpack://./src/components/tabs.css","webpack://./src/components/tabs-legacy.css","webpack://./src/components/toggle.css","webpack://./src/components/toggle-legacy.css","webpack://./src/components/tooltip.css","webpack://./src/components/tooltip-legacy.css","webpack://./src/components/checkbox.css","webpack://./src/components/checkbox-deprecated.css","webpack://./src/components/checkbox-legacy.css","webpack://./src/components/switch.css","webpack://./src/components/switch-deprecated.css","webpack://./src/components/switch-legacy.css","webpack://./src/components/link.css","webpack://./src/components/link-deprecated.css","webpack://./src/components/link-legacy.css","webpack://./src/components/text.css","webpack://./src/components/heading.css","webpack://./src/components/field.css","webpack://./src/components/field-legacy.css","webpack://./src/components/legacy-uic/anchor.css","webpack://./src/components/legacy-uic/anchor-legacy.css","webpack://./src/components/legacy-uic/results-toolbar.css","webpack://./src/components/legacy-uic/results-toolbar-legacy.css","webpack://./src/components/legacy-uic/pagination.css","webpack://./src/components/legacy-uic/pagination-legacy.css"],names:[],mappings:"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",sourcesContent:['/*\n * CSS Cascade Layers Organization\n * Layers are applied in declaration order (base â utilities)\n * This provides explicit cascade control and better browser optimization\n *\n * Note: Using @import ... layer() syntax (CSS standard)\n * Build warnings are expected until build tools fully support this syntax\n * The code still works correctly in browsers\n *\n * Related: DS-566 Sprint 2 - CSS @layer implementation\n */\n@layer base, legacy-overrides, theme, large-font, components, utilities;\n\n/* Google Fonts import (outside layers for optimal loading) */\n@import url(\'https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap\');\n\n/* Layer 1: Base variables (color palette, dimensions, spacing, typography) */\n@import "./css/variables.css" layer(base);\n\n/* Layer 2: Legacy overrides (dimension/font/size changes for legacy color scheme) */\n@import "./css/legacy-variables.css" layer(legacy-overrides);\n\n/* Layer 3: Theme variations (light/dark \xd7 smartling/legacy semantic tokens) */\n@import "./css/light-theme.css" layer(theme);\n@import "./css/dark-theme.css" layer(theme);\n@import "./css/legacy-light-theme.css" layer(theme);\n@import "./css/legacy-dark-theme.css" layer(theme);\n\n/* Layer 4: Font size overrides (large text mode) */\n@import "./css/large-theme.css" layer(large-font);\n\n/* Layer 5: Component-specific variables */\n@import "./components/variables.css" layer(components);\n@import "./components/legacy-uic/variables.css" layer(components);\n\n/* Layer 6: Utility overrides (highest priority in cascade) */\n@layer utilities {\n [data-theme="dark"],\n [data-theme="light"] {\n /* Override existing font-size: 16px!important */\n font-size: var(--ds-font-size-html) !important;\n }\n\n [data-color-scheme="smartling"] {\n font-family: "Inter", sans-serif;\n font-optical-sizing: auto;\n font-weight: normal;\n font-style: normal;\n }\n\n a[class*="src-_anchor"],\n button[class*="buttonStyles-_tertiary"] {\n color: var(--ds-color-text-link);\n }\n\n button[class*="buttonStyles-_tertiary"]:hover,\n a[class*="src-_anchor"]:hover {\n color: var(--ds-color-text-link-hover);\n }\n}\n\n',"/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --ds-font-size-rem: 1rem;\n --ds-font-size-tier-0: 0.5rem;\n --ds-font-size-tier-1: 0.625rem;\n --ds-font-size-tier-2: 0.75rem;\n --ds-font-size-tier-3: 0.875rem;\n --ds-font-size-tier-4: 1rem;\n --ds-font-size-tier-5: 1.125rem;\n --ds-font-size-tier-6: 1.25rem;\n --ds-font-size-tier-7: 1.5rem;\n --ds-font-size-tier-8: 1.75rem;\n --ds-font-size-tier-9: 2rem;\n --ds-font-size-tier-10: 2.25rem;\n --ds-font-size-tier-11: 2.5rem;\n --ds-font-size-tier-12: 2.75rem;\n --ds-font-size-tier-13: 3rem;\n --ds-font-size-tier-14: 3.25rem;\n --ds-font-size-tier-15: 3.5rem;\n --ds-font-size-tier-16: 3.75rem;\n --ds-font-size-tier-17: 4rem;\n --ds-font-size-tier-18: 4.5rem;\n --ds-font-size-tier-19: 5rem;\n --ds-font-size-tier-20: 5.5rem;\n --ds-font-size-tier-base: 0.01rem;\n --ds-font-size-xs: 0.75rem;\n --ds-font-size-s: 0.875rem;\n --ds-font-size-m: 1rem;\n --ds-font-size-l: 1.125rem;\n --ds-font-size-xl: 1.25rem;\n --ds-font-size-2xl: 1.5rem;\n --ds-font-size-3xl: 2rem;\n --ds-font-size-4xl: 2.5rem;\n --ds-font-size-html: 16px;\n --ds-global-size-universal-scale: 1rem;\n --ds-border-width-tier-0: 0;\n --ds-border-width-tier-1: 0.5px;\n --ds-border-width-tier-2: 1px;\n --ds-border-width-tier-3: 1.5px;\n --ds-border-width-tier-4: 2px;\n --ds-border-width-tier-5: 3px;\n --ds-border-width-tier-6: 4px;\n --ds-dimension-tier-0: 0rem;\n --ds-dimension-tier-1: 0.0625rem;\n --ds-dimension-tier-2: 0.125rem;\n --ds-dimension-tier-3: 0.25rem;\n --ds-dimension-tier-4: 0.375rem;\n --ds-dimension-tier-5: 0.5rem;\n --ds-dimension-tier-6: 0.75rem;\n --ds-dimension-tier-7: 1rem;\n --ds-dimension-tier-8: 1.25rem;\n --ds-dimension-tier-9: 1.5rem;\n --ds-dimension-tier-10: 1.75rem;\n --ds-dimension-tier-11: 2rem;\n --ds-dimension-tier-12: 2.25rem;\n --ds-dimension-tier-13: 2.5rem;\n --ds-dimension-tier-14: 2.75rem;\n --ds-dimension-tier-15: 3rem;\n --ds-dimension-tier-16: 3.5rem;\n --ds-dimension-tier-17: 4rem;\n --ds-dimension-tier-18: 4.5rem;\n --ds-dimension-tier-19: 5rem;\n --ds-dimension-tier-20: 6rem;\n --ds-dimension-tier-base: 0.01rem;\n --ds-opacity-total: 1;\n --ds-opacity-high: 0.8;\n --ds-opacity-medium: 0.5;\n --ds-opacity-soft: 0.3;\n --ds-opacity-light: 0.15;\n --ds-opacity-zero: 0;\n --ds-border-solid: solid;\n --ds-border-dashed: dashed;\n --ds-z-index-tier-0: -100;\n --ds-z-index-tier-1: 1;\n --ds-z-index-tier-2: 100;\n --ds-z-index-tier-3: 200;\n --ds-z-index-tier-4: 300;\n --ds-z-index-tier-5: 500;\n --ds-z-index-tier-6: 700;\n --ds-z-index-tier-7: 800;\n --ds-z-index-tier-8: 900;\n --ds-z-index-tier-9: 1000;\n --ds-textcase-uppercase: uppercase;\n --ds-textcase-lowercase: lowercase;\n --ds-textcase-capitalize: capitalize;\n --ds-size-breakpoint-mobile: 375px;\n --ds-size-breakpoint-mobile-xl: 576px;\n --ds-size-breakpoint-tablet-s: 768px;\n --ds-size-breakpoint-tablet: 1024px;\n --ds-size-breakpoint-desktop-s: 1200px;\n --ds-size-breakpoint-desktop: 1440px;\n --ds-size-breakpoint-desktop-xl: 1920px;\n --ds-size-actions-3xs: 1rem;\n --ds-size-actions-2xs: 1.25rem;\n --ds-size-actions-xs: 1.5rem;\n --ds-size-actions-s: 1.75rem;\n --ds-size-actions-m: 2rem;\n --ds-size-actions-l: 2.25rem;\n --ds-size-actions-xl: 2.5rem;\n --ds-size-actions-2xl: 2.75rem;\n --ds-size-actions-3xl: 3rem;\n --ds-size-actions-4xl: 3.5rem;\n --ds-size-actions-5xl: 4rem;\n --ds-size-icon-2xs: 0.5rem;\n --ds-size-icon-xs: 0.75rem;\n --ds-size-icon-s: 1rem;\n --ds-size-icon-m: 1.25rem;\n --ds-size-icon-l: 1.5rem;\n --ds-size-icon-xl: 2rem;\n --ds-size-icon-2xl: 2.5rem;\n --ds-font-family-base: Inter;\n --ds-font-family-mono: Inter;\n --ds-font-weight-heading: 600;\n --ds-font-weight-body: 400;\n --ds-font-weight-body-strong: 500;\n --ds-font-weight-body-strongest: 600;\n --ds-line-height-body-xs: 1.125rem;\n --ds-line-height-body-s: 1.3125rem;\n --ds-line-height-body-m: 1.5rem;\n --ds-line-height-body-l: 1.6875rem;\n --ds-line-height-body-xl: 1.875rem;\n --ds-line-height-heading-xs: 1.8rem;\n --ds-line-height-heading-s: 2.4rem;\n --ds-line-height-heading-m: 3rem;\n --ds-space-page-inset-none: 0rem;\n --ds-space-page-inset-xs: 0.75rem;\n --ds-space-page-inset-s: 1rem;\n --ds-space-page-inset-m: 1.5rem;\n --ds-space-page-inset-l: 2rem;\n --ds-space-page-inset-xl: 3rem;\n --ds-space-page-inside-none: 0rem;\n --ds-space-page-inside-2xs: 0.25rem;\n --ds-space-page-inside-xs: 0.5rem;\n --ds-space-page-inside-s: 0.75rem;\n --ds-space-page-inside-m: 1rem;\n --ds-space-page-inside-l: 1.25rem;\n --ds-space-page-inside-xl: 1.5rem;\n --ds-space-page-inside-2xl: 2rem;\n --ds-space-page-inside-3xl: 3rem;\n --ds-radius-none: 0px;\n --ds-radius-2xs: 2px;\n --ds-radius-xs: 4px;\n --ds-radius-s: 6px;\n --ds-radius-m: 8px;\n --ds-radius-l: 12px;\n --ds-radius-xl: 16px;\n --ds-radius-2xl: 24px;\n --ds-radius-full: 9999px;\n --ds-radius-base: 1px;\n --ds-color-neutral-25: #fdfdfd;\n --ds-color-neutral-50: #fafafa;\n --ds-color-neutral-100: #f5f5f5;\n --ds-color-neutral-200: #e5e5e5;\n --ds-color-neutral-300: #d4d4d4;\n --ds-color-neutral-400: #a3a3a3;\n --ds-color-neutral-500: #737373;\n --ds-color-neutral-600: #525252;\n --ds-color-neutral-700: #404040;\n --ds-color-neutral-800: #262626;\n --ds-color-neutral-900: #171717;\n --ds-color-neutral-1000: #0c0c0c;\n --ds-color-seafoam-25: #f5fdfc;\n --ds-color-seafoam-50: #edf9f7;\n --ds-color-seafoam-100: #d4f2ec;\n --ds-color-seafoam-200: #b9e9e1;\n --ds-color-seafoam-300: #9de2d6;\n --ds-color-seafoam-400: #80d9ca;\n --ds-color-seafoam-500: #66c6b4;\n --ds-color-seafoam-600: #4aad9a;\n --ds-color-seafoam-700: #338f7e;\n --ds-color-seafoam-800: #1f6f61;\n --ds-color-seafoam-900: #0f4f45;\n --ds-color-seafoam-1000: #052e28;\n --ds-color-red-25: #fff9f9;\n --ds-color-red-50: #fef2f2;\n --ds-color-red-100: #fee2e2;\n --ds-color-red-200: #fecaca;\n --ds-color-red-300: #fca5a5;\n --ds-color-red-400: #f87171;\n --ds-color-red-500: #ef4444;\n --ds-color-red-600: #dc2626;\n --ds-color-red-700: #b91c1c;\n --ds-color-red-800: #991b1b;\n --ds-color-red-900: #7f1d1d;\n --ds-color-red-1000: #4b1a1a;\n --ds-color-green-25: #f7fef9;\n --ds-color-green-50: #f0fdf4;\n --ds-color-green-100: #dcfce7;\n --ds-color-green-200: #bbf7d0;\n --ds-color-green-300: #86efac;\n --ds-color-green-400: #4ade80;\n --ds-color-green-500: #22c55e;\n --ds-color-green-600: #16a34a;\n --ds-color-green-700: #15803d;\n --ds-color-green-800: #166534;\n --ds-color-green-900: #14532d;\n --ds-color-green-1000: #1d3d2a;\n --ds-color-purple-25: #faf9fc;\n --ds-color-purple-50: #f4f3f7;\n --ds-color-purple-100: #e4e3eb;\n --ds-color-purple-200: #d5d3df;\n --ds-color-purple-300: #c5c2d4;\n --ds-color-purple-400: #b4b1c7;\n --ds-color-purple-500: #9590b0;\n --ds-color-purple-600: #7b7598;
3901\n --ds-color-purple-700: #625c7e;\n --ds-color-purple-800: #4a4462;\n --ds-color-purple-900: #342f48;\n --ds-color-purple-1000: #1c1929;\n --ds-color-amber-25: #fffdf5;\n --ds-color-amber-50: #fffbeb;\n --ds-color-amber-100: #fef3c7;\n --ds-color-amber-200: #fde68a;\n --ds-color-amber-300: #fcd34d;\n --ds-color-amber-400: #fbbf24;\n --ds-color-amber-500: #f59e0b;\n --ds-color-amber-600: #d97706;\n --ds-color-amber-700: #b45309;\n --ds-color-amber-800: #92400e;\n --ds-color-amber-900: #78350f;\n --ds-color-amber-1000: #3c1b08;\n --ds-color-yellow-25: #fefdf0;\n --ds-color-yellow-50: #fefbe8;\n --ds-color-yellow-100: #fef7c3;\n --ds-color-yellow-200: #feee95;\n --ds-color-yellow-300: #fde272;\n --ds-color-yellow-400: #fac515;\n --ds-color-yellow-500: #eaaa08;\n --ds-color-yellow-600: #ca8504;\n --ds-color-yellow-700: #a15c07;\n --ds-color-yellow-800: #854a0e;\n --ds-color-yellow-900: #713b12;\n --ds-color-yellow-1000: #542c0d;\n --ds-color-pink-25: #fff5fb;\n --ds-color-pink-50: #feeef6;\n --ds-color-pink-100: #fdd9ea;\n --ds-color-pink-200: #fcc0d8;\n --ds-color-pink-300: #fea3b4;\n --ds-color-pink-400: #faa7e0;\n --ds-color-pink-500: #f472b6;\n --ds-color-pink-600: #db2777;\n --ds-color-pink-700: #be185d;\n --ds-color-pink-800: #9d174d;\n --ds-color-pink-900: #831843;\n --ds-color-pink-1000: #4a0d26;\n --ds-color-base-white: #ffffff;\n --ds-color-base-black: #0c0c0c;\n --ds-color-teal-25: #e6f1f2;\n --ds-color-teal-50: #cce4e6;\n --ds-color-teal-100: #a6cfd3;\n --ds-color-teal-200: #80bbc0;\n --ds-color-teal-300: #5ba7ad;\n --ds-color-teal-400: #35929a;\n --ds-color-teal-500: #1b858e;\n --ds-color-teal-600: #027781;\n --ds-color-teal-700: #016570;\n --ds-color-teal-800: #01565c;\n --ds-color-teal-900: #014c52;\n --ds-color-teal-1000: #013b40;\n --ds-color-brand-25: #faf9ff;\n --ds-color-brand-50: #f5f3ff;\n --ds-color-brand-100: #ede9fe;\n --ds-color-brand-200: #ddd6fe;\n --ds-color-brand-300: #c4b5fd;\n --ds-color-brand-400: #a78bfa;\n --ds-color-brand-500: #8b5cf6;\n --ds-color-brand-600: #7c3aed;\n --ds-color-brand-700: #6d28d9;\n --ds-color-brand-800: #5b21b6;\n --ds-color-brand-900: #4c1d95;\n --ds-color-brand-1000: #391670;\n --ds-color-blue-25: #f7fbff;\n --ds-color-blue-50: #eff6ff;\n --ds-color-blue-100: #dbeafe;\n --ds-color-blue-200: #bfdbfe;\n --ds-color-blue-300: #93c5fd;\n --ds-color-blue-400: #60a5fa;\n --ds-color-blue-500: #3b82f6;\n --ds-color-blue-600: #2563eb;\n --ds-color-blue-700: #1d4ed8;\n --ds-color-blue-800: #1e40af;\n --ds-color-blue-900: #1e3a8a;\n --ds-color-blue-1000: #1b2951;\n --ds-color-actions-ring: #fcd34d;\n --ds-color-actions-text: #2563eb;\n --ds-color-actions-text-hover: #1e40af;\n --ds-color-overlay-light: #ffffff;\n --ds-color-overlay-medium: #ffffff;\n --ds-color-overlay-strong: #ffffff;\n --ds-color-violet-25: #faf9ff;\n --ds-color-violet-50: #f5f3ff;\n --ds-color-violet-100: #ede9fe;\n --ds-color-violet-200: #ddd6fe;\n --ds-color-violet-300: #c4b5fd;\n --ds-color-violet-400: #a78bfa;\n --ds-color-violet-500: #8b5cf6;\n --ds-color-violet-600: #7c3aed;\n --ds-color-violet-700: #6d28d9;\n --ds-color-violet-800: #5b21b6;\n --ds-color-violet-900: #4c1d95;\n --ds-color-violet-1000: #391670;\n --ds-font-heading-xs: 600 1.5rem/1.8rem Inter;\n --ds-font-heading-s: 600 2rem/2.4rem Inter;\n --ds-font-heading-m: 600 2.5rem/3rem Inter;\n --ds-font-body-strongest-xs: 600 0.75rem/1.125rem Inter;\n --ds-font-body-strongest-s: 600 0.875rem/1.3125rem Inter;\n --ds-font-body-strongest-m: 600 1rem/1.5rem Inter;\n --ds-font-body-strongest-l: 600 1.125rem/1.6875rem Inter;\n --ds-font-body-strongest-xl: 600 1.25rem/1.875rem Inter;\n --ds-font-body-default-xs: 400 0.75rem/1.125rem Inter;\n --ds-font-body-default-s: 400 0.875rem/1.3125rem Inter;\n --ds-font-body-default-m: 400 1rem/1.5rem Inter;\n --ds-font-body-default-l: 400 1.125rem/1.6875rem Inter;\n --ds-font-body-default-xl: 400 1.25rem/1.875rem Inter;\n --ds-font-body-strong-xs: 500 0.75rem/1.125rem Inter;\n --ds-font-body-strong-s: 500 0.875rem/1.3125rem Inter;\n --ds-font-body-strong-m: 500 1rem/1.5rem Inter;\n --ds-font-body-strong-l: 500 1.125rem/1.6875rem Inter;\n --ds-font-body-strong-xl: 500 1.25rem/1.875rem Inter;\n}\n",'/**\n * This colors are made by the original "teal" color and splitted into 1000 shades\n * by the same logic as in a new theme.\n */\n[data-color-scheme="legacy"] {\n /* Teal color scale following the same pattern as other colors in variables.css */\n --ds-color-teal-25: oklch(0.98 0.015 205);\n --ds-color-teal-50: oklch(0.95 0.03 205);\n --ds-color-teal-100: oklch(0.90 0.045 205);\n --ds-color-teal-200: oklch(0.83 0.06 205);\n --ds-color-teal-300: oklch(0.75 0.08 205);\n --ds-color-teal-400: oklch(0.67 0.10 205);\n --ds-color-teal-500: oklch(0.60 0.12 205);\n --ds-color-teal-600: oklch(0.52 0.13 205);\n --ds-color-teal-700: oklch(0.44 0.13 205);\n --ds-color-teal-800: oklch(0.37 0.12 205);\n --ds-color-teal-900: oklch(0.30 0.10 205);\n --ds-color-teal-1000: oklch(0.24 0.08 205);\n\n --ds-dimension-tier-0: 0rem; /* 0rem; */\n --ds-dimension-tier-1: 0.0312rem; /* 0.0625rem; */\n --ds-dimension-tier-2: 0.0625rem; /* 0.125rem; */\n --ds-dimension-tier-3: 0.125rem; /* 0.25rem; */\n --ds-dimension-tier-4: 0.1875rem; /* 0.375rem; */\n --ds-dimension-tier-5: 0.25rem; /* 0.5rem; */\n --ds-dimension-tier-6: 0.3125rem; /* 0.75rem; */\n --ds-dimension-tier-7: 0.5rem; /* 1rem; */\n --ds-dimension-tier-8: 0.625rem; /* 1.25rem; */\n --ds-dimension-tier-9: 0.75rem; /* 1.5rem; */\n --ds-dimension-tier-10: 0.875rem; /* 1.75rem; */\n --ds-dimension-tier-11: 1rem; /* 2rem; */\n --ds-dimension-tier-12: 1.125rem; /* 2.25rem; */\n --ds-dimension-tier-13: 1.25rem; /* 2.5rem; */\n --ds-dimension-tier-14: 1.375rem; /* 2.75rem; */\n --ds-dimension-tier-15: 1.5rem; /* 3rem; */\n --ds-dimension-tier-16: 1.625rem; /* 3.5rem; */\n --ds-dimension-tier-17: 1.75rem; /* 4rem; */\n --ds-dimension-tier-18: 2.25rem; /* 4.5rem; */\n --ds-dimension-tier-19: 2.5rem; /* 5rem; */\n --ds-dimension-tier-20: 3rem; /* 6rem; */\n --ds-dimension-tier-base: 0.01rem; /* 0.01rem; */\n\n --ds-size-icon-2xs: 0.25rem; /* 0.5rem; */\n --ds-size-icon-xs: 0.5rem; /* 0.75rem; */\n --ds-size-icon-s: 0.75rem; /* 1rem; */\n --ds-size-icon-m: 1rem; /* 1.25rem; */\n --ds-size-icon-l: 1.25rem; /* 1.5rem; */\n --ds-size-icon-xl: 1.75rem; /* 2rem; */\n --ds-size-icon-2xl: 2.25rem; /* 2.5rem; */\n\n --ds-size-actions-3xs: 0.5rem; /* 1rem */\n --ds-size-actions-2xs: 0.75rem; /* 1.25rem */\n --ds-size-actions-xs: 1rem; /* 1.5rem */\n --ds-size-actions-s: 1.25rem; /* 1.75rem */\n --ds-size-actions-m: 1.5rem; /* 2rem */\n --ds-size-actions-l: 1.75rem; /* 2.25rem */\n --ds-size-actions-xl: 2rem; /* 2.5rem */\n --ds-size-actions-2xl: 2.25rem; /* 2.75rem */\n --ds-size-actions-3xl: 2.5rem; /* 3rem */\n --ds-size-actions-4xl: 3rem; /* 3.5rem */\n --ds-size-actions-5xl: 3.5rem; /* 4rem */\n\n --ds-space-page-inset-none: 0rem; /* 0rem */\n --ds-space-page-inset-xs: 0.5rem; /* 0.75rem */\n --ds-space-page-inset-s: 0.75rem; /* 1rem */\n --ds-space-page-inset-m: 1rem; /* 1.5rem */\n --ds-space-page-inset-l: 1.5rem; /* 2rem */\n --ds-space-page-inset-xl: 2rem; /* 3rem */\n --ds-space-page-inside-none: 0rem; /* 0rem */\n --ds-space-page-inside-2xs: 0.125rem; /* 0.25rem */\n --ds-space-page-inside-xs: 0.25rem; /* 0.5rem */\n --ds-space-page-inside-s: 0.5rem; /* 0.75rem */\n --ds-space-page-inside-m: 1rem; /* 1rem */\n --ds-space-page-inside-l: 1.25rem; /* 1.5rem */\n --ds-space-page-inside-xl: 2rem; /* 2rem */\n --ds-space-page-inside-2xl: 2.5rem; /* 3rem */\n\n --ds-font-heading-xs: 600 1.5rem/1.8rem adelle-sans, sans-serif;\n --ds-font-heading-s: 600 2rem/2.4rem adelle-sans, sans-serif;\n --ds-font-heading-m: 600 2.5rem/3rem adelle-sans, sans-serif;\n --ds-font-body-strongest-xs: 600 0.75rem/1.125rem adelle-sans, sans-serif;\n --ds-font-body-strongest-s: 600 0.875rem/1.3125rem adelle-sans, sans-serif;\n --ds-font-body-strongest-m: 600 1rem/1.5rem adelle-sans, sans-serif;\n --ds-font-body-strongest-l: 600 1.125rem/1.6875rem adelle-sans, sans-serif;\n --ds-font-body-strongest-xl: 600 1.25rem/1.875rem adelle-sans, sans-serif;\n --ds-font-body-default-xs: 400 0.75rem/1.125rem adelle-sans, sans-serif;\n --ds-font-body-default-s: 400 0.875rem/1.3125rem adelle-sans, sans-serif;\n --ds-font-body-default-m: 400 1rem/1.5rem adelle-sans, sans-serif;\n --ds-font-body-default-l: 400 1.125rem/1.6875rem adelle-sans, sans-serif;\n --ds-font-body-default-xl: 400 1.25rem/1.875rem adelle-sans, sans-serif;\n --ds-font-body-strong-xs: 500 0.75rem/1.125rem adelle-sans, sans-serif;\n --ds-font-body-strong-s: 500 0.875rem/1.3125rem adelle-sans, sans-serif;\n --ds-font-body-strong-m: 500 1rem/1.5rem adelle-sans, sans-serif;\n --ds-font-body-strong-l: 500 1.125rem/1.6875rem adelle-sans, sans-serif;\n --ds-font-body-strong-xl: 500 1.25rem/1.875rem adelle-sans, sans-serif;\n\n --ds-radius-none: 0px;\n --ds-radius-2xs: 1px;\n --ds-radius-xs: 2px;\n --ds-radius-s: 3px;\n --ds-radius-m: 4px;\n --ds-radius-l: 6px;\n --ds-radius-xl: 8px;\n --ds-radius-2xl: 12px;\n\n /* support for hard changes in variable naming */\n --ds-font-size-xxl: var(--ds-font-size-2xl);\n --ds-size-icon-xxs: var(--ds-size-icon-2xs);\n --ds-size-icon-xxl: var(--ds-size-icon-2xl);\n --ds-size-actions-xxs: var(--ds-size-actions-2xs);\n --ds-space-page-inside-xxs: var(--ds-space-page-inside-2xs);\n --ds-space-page-inside-xxl: var(--ds-space-page-inside-2xl);\n --ds-radius-xxs: var(--ds-radius-2xs);\n --ds-radius-xxl: var(--ds-radius-2xl);\n}\n',"/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --ds-color-border-transparent: rgba(0, 0, 0, 0);
3901\n --ds-shadow-focus-ring-default: 0 0 0 4px rgba(152,162,179,0.14);\n --ds-shadow-standard-xs: 0 1px 2px 0 rgba(16,24,41,0.05);\n --ds-shadow-standard-s: 0 1px 2px 0 rgba(16,24,41,0.06), 0 2px 3px 0 rgba(16,24,41,0.10);\n --ds-shadow-standard-m: 0 2px 4px -2px rgba(16,24,41,0.06), 0 4px 8px 2px rgba(16,24,41,0.10);\n --ds-shadow-standard-l: 0 4px 6px -2px rgba(16,24,41,0.03), 0 12px 16px -4px rgba(16,24,41,0.08);\n --ds-shadow-standard-xl: 0 8px 8px -4px rgba(16,24,41,0.03), 0 20px 24px -4px rgba(16,24,41,0.08);\n --ds-shadow-standard-2xl: 0 24px 48px -12px rgba(16,24,41,0.18);\n --ds-shadow-standard-3xl: 0 32px 64px -12px rgba(16,24,41,0.14);\n --ds-blur-default-background-filter: blur(30px);\n --ds-blur-default-background-color: rgba(38, 38, 38, 0.25);\n --ds-color-surface-main: var(--ds-color-base-white);\n --ds-color-surface-main-hover: var(--ds-color-neutral-100);\n --ds-color-surface-main-pressed: var(--ds-color-neutral-200);\n --ds-color-surface-soft: var(--ds-color-neutral-50);\n --ds-color-surface-moderate: var(--ds-color-neutral-100);\n --ds-color-surface-strong: var(--ds-color-neutral-300);\n --ds-color-surface-disabled: var(--ds-color-neutral-100);\n --ds-color-surface-solid: var(--ds-color-neutral-1000);\n --ds-color-surface-inverse: var(--ds-color-neutral-900);\n --ds-color-surface-error-main: var(--ds-color-red-50);\n --ds-color-surface-error-moderate: var(--ds-color-red-100);\n --ds-color-surface-error-solid: var(--ds-color-red-600);\n --ds-color-surface-error-solid-hover: var(--ds-color-red-700);\n --ds-color-surface-error-solid-pressed: var(--ds-color-red-800);\n --ds-color-surface-warning-main: var(--ds-color-amber-50);\n --ds-color-surface-warning-moderate: var(--ds-color-amber-100);\n --ds-color-surface-warning-solid: var(--ds-color-amber-600);\n --ds-color-surface-warning-solid-hover: var(--ds-color-amber-700);\n --ds-color-surface-warning-solid-pressed: var(--ds-color-amber-800);\n --ds-color-surface-success-main: var(--ds-color-green-50);\n --ds-color-surface-success-moderate: var(--ds-color-green-100);\n --ds-color-surface-success-solid: var(--ds-color-green-600);\n --ds-color-surface-success-solid-hover: var(--ds-color-green-700);\n --ds-color-surface-success-solid-pressed: var(--ds-color-green-800);\n --ds-color-surface-blue-outline: var(--ds-color-blue-50);\n --ds-color-surface-blue-moderate: var(--ds-color-blue-100);\n --ds-color-surface-violet-outline: var(--ds-color-violet-50);\n --ds-color-surface-violet-moderate: var(--ds-color-violet-100);\n --ds-color-surface-yellow-outline: var(--ds-color-yellow-100);\n --ds-color-surface-grey-outline: var(--ds-color-neutral-50);\n --ds-color-surface-orange-outline: var(--ds-color-amber-100);\n --ds-color-surface-blue-solid: var(--ds-color-blue-700);\n --ds-color-surface-violet-solid: var(--ds-color-violet-700);\n --ds-color-surface-yellow-solid: var(--ds-color-yellow-400);\n --ds-color-surface-grey-solid: var(--ds-color-neutral-700);\n --ds-color-surface-green-solid: var(--ds-color-green-700);\n --ds-color-surface-orange-solid: var(--ds-color-amber-500);\n --ds-color-surface-red-solid: var(--ds-color-red-600);\n --ds-color-border-main: var(--ds-color-neutral-500);\n --ds-color-border-soft: var(--ds-color-neutral-300);\n --ds-color-border-moderate: var(--ds-color-neutral-200);\n --ds-color-border-disabled: var(--ds-color-neutral-300);\n --ds-color-border-solid: var(--ds-color-base-black);\n --ds-color-border-error-main: var(--ds-color-red-500);\n --ds-color-border-error-soft: var(--ds-color-red-300);\n --ds-color-border-error-strong: var(--ds-color-red-800);\n --ds-color-border-success-main: var(--ds-color-green-500);\n --ds-color-border-success-soft: var(--ds-color-green-300);\n --ds-color-border-success-strong: var(--ds-color-green-800);\n --ds-color-border-warning-main: var(--ds-color-amber-500);\n --ds-color-border-warning-soft: var(--ds-color-amber-300);\n --ds-color-border-warning-strong: var(--ds-color-amber-800);\n --ds-color-border-blue-outline: var(--ds-color-blue-300);\n --ds-color-border-violet-outline: var(--ds-color-violet-300);\n --ds-color-border-yellow-outline: var(--ds-color-yellow-500);\n --ds-color-border-grey-outline: var(--ds-color-neutral-300);\n --ds-color-border-green-outline: var(--ds-color-green-300);\n --ds-color-border-orange-outline: var(--ds-color-amber-500);\n --ds-color-border-red-outline: var(--ds-color-red-300);\n --ds-color-foreground-main: var(--ds-color-neutral-900);\n --ds-color-foreground-main-onbrand: var(--ds-color-base-white);\n --ds-color-foreground-soft: var(--ds-color-neutral-700);\n --ds-color-foreground-soft-hover: var(--ds-color-neutral-800);\n --ds-color-foreground-moderate: var(--ds-color-neutral-600);\n --ds-color-foreground-moderate-hover: var(--ds-color-neutral-700);\n --ds-color-foreground-strong: var(--ds-color-neutral-400);\n --ds-color-foreground-strong-hover: var(--ds-color-neutral-500);\n --ds-color-foreground-disabled: var(--ds-color-neutral-500);\n --ds-color-foreground-white: var(--ds-color-base-white);\n --ds-color-foreground-link: var(--ds-color-blue-600);\n --ds-color-foreground-link-hover: var(--ds-color-blue-800);\n --ds-color-foreground-error-main: var(--ds-color-red-700);\n --ds-color-foreground-error-soft: var(--ds-color-red-600);\n --ds-color-foreground-warning-main: var(--ds-color-amber-700);\n --ds-color-foreground-warning-soft: var(--ds-color-amber-600);\n --ds-color-foreground-success-main: var(--ds-color-green-700);\n --ds-color-foreground-success-soft: var(--ds-color-green-600);\n --ds-color-foreground-form-selected: var(--ds-color-base-white);\n --ds-color-text-main: var(--ds-color-neutral-800);\n --ds-color-text-main-onbrand: var(--ds-color-base-white);\n --ds-color-text-soft: var(--ds-color-neutral-700);\n --ds-color-text-soft-hover: var(--ds-color-neutral-800);\n --ds-color-text-moderate: var(--ds-color-neutral-600);\n --ds-color-text-moderate-hover: var(--ds-color-neutral-700);\n --ds-color-text-strong: var(--ds-color-neutral-400);\n --ds-color-text-strong-hover: var(--ds-color-neutral-500);\n --ds-color-text-disabled: var(--ds-color-neutral-500);\n --ds-color-text-placeholder: var(--ds-color-neutral-500);\n --ds-color-text-white: var(--ds-color-base-white);\n --ds-color-text-error-main: var(--ds-color-red-700);\n --ds-color-text-error-main-hover: var(--ds-color-red-800);\n --ds-color-text-error-soft: var(--ds-color-red-600);\n --ds-color-text-warning-main: var(--ds-color-amber-700);\n --ds-color-text-warning-soft: var(--ds-color-amber-600);\n --ds-color-text-success-main: var(--ds-color-green-700);\n --ds-color-text-success-soft: var(--ds-color-green-600);\n --ds-color-text-blue-outline: var(--ds-color-blue-700);\n --ds-color-text-violet-outline: var(--ds-color-violet-700);\n --ds-color-text-yellow-outline: var(--ds-color-yellow-700);\n --ds-color-text-grey-outline: var(--ds-color-neutral-700);\n --ds-color-text-green-outline: var(--ds-color-green-700);\n --ds-color-text-orange-outline: var(--ds-color-amber-900);\n --ds-color-text-red-outline: var(--ds-color-red-700);\n --ds-color-text-orange-solid: var(--ds-color-amber-1000);\n --ds-color-surface-link-pressed: var(--ds-color-actions-ring);\n --ds-color-surface-brand-main: var(--ds-color-brand-50);\n --ds-color-surface-brand-moderate: var(--ds-color-brand-100);\n --ds-color-surface-brand-solid: var(--ds-color-brand-700);\n --ds-color-surface-brand-solid-hover: var(--ds-color-brand-800);\n --ds-color-surface-brand-solid-pressed: var(--ds-color-brand-800);\n --ds-color-surface-form-selected: var(--ds-color-surface-inverse);\n --ds-color-surface-green-outline: var(--ds-color-surface-success-main);\n --ds-color-surface-red-outline: var(--ds-color-surface-error-main);\n --ds-color-border-brand-main: var(--ds-color-brand-500);\n --ds-color-border-brand-soft: var(--ds-color-brand-300);\n --ds-color-border-brand-strong: var(--ds-color-brand-800);\n --ds-color-foreground-brand-main: var(--ds-color-brand-700);\n --ds-color-foreground-brand-main-hover: var(--ds-color-brand-300);\n --ds-color-foreground-brand-soft: var(--ds-color-brand-600);\n --ds-color-foreground-brand-soft-hover: var(--ds-color-brand-700);\n --ds-color-text-soft-onbrand: var(--ds-color-brand-200);\n --ds-color-text-moderate-onbrand: var(--ds-color-brand-200);\n --ds-color-text-strong-onbrand: var(--ds-color-brand-300);\n --ds-color-text-link: var(--ds-color-actions-text);\n --ds-color-text-link-hover: var(--ds-color-actions-text-hover);\n --ds-color-text-brand-main: var(--ds-color-brand-700);\n --ds-color-text-brand-main-hover: var(--ds-color-brand-800);\n --ds-color-text-brand-soft: var(--ds-color-brand-600);\n --ds-color-text-brand-soft-hover: var(--ds-color-brand-700);\n --ds-color-text-blue-solid: var(--ds-color-text-main-onbrand);\n --ds-color-text-violet-solid: var(--ds-color-text-main-onbrand);\n --ds-color-text-yellow-solid: var(--ds-color-text-main);\n --ds-color-text-grey-solid: var(--ds-color-text-main-onbrand);\n --ds-color-text-green-solid: var(--ds-color-text-main-onbrand);\n --ds-color-text-red-solid: var(--ds-color-text-main-onbrand);
3901\n --ds-shadow-focus-ring-brand: 0 0 0 4px var(--ds-color-brand-200);\n --ds-shadow-focus-ring-error: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 6px var(--ds-color-red-700);\n --ds-shadow-focus-ring-actions: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 6px var(--ds-color-amber-300);\n}\n",'/**\n * Do not edit directly, this file was auto-generated.\n */\n\n[data-theme="dark"][data-color-scheme="smartling"] {\n --ds-color-border-transparent: rgba(0, 0, 0, 0);\n --ds-shadow-focus-ring-default: 0 0 0 4px rgba(152,162,179,0.14);\n --ds-shadow-standard-xs: 0 1px 2px 0 rgba(16,24,41,0.05);\n --ds-shadow-standard-s: 0 1px 2px 0 rgba(16,24,41,0.06), 0 2px 3px 0 rgba(16,24,41,0.10);\n --ds-shadow-standard-m: 0 2px 4px -2px rgba(16,24,41,0.06), 0 4px 8px 2px rgba(16,24,41,0.10);\n --ds-shadow-standard-l: 0 4px 6px -2px rgba(16,24,41,0.03), 0 12px 16px -4px rgba(16,24,41,0.08);\n --ds-shadow-standard-xl: 0 8px 8px -4px rgba(16,24,41,0.03), 0 20px 24px -4px rgba(16,24,41,0.08);\n --ds-shadow-standard-2xl: 0 24px 48px -12px rgba(16,24,41,0.18);
3901\n --ds-shadow-standard-3xl: 0 32px 64px -12px rgba(16,24,41,0.14);\n --ds-blur-default-background-filter: blur(30px);\n --ds-blur-default-background-color: rgba(38, 38, 38, 0.5);\n --ds-color-surface-main: var(--ds-color-neutral-900);\n --ds-color-surface-main-hover: var(--ds-color-neutral-800);\n --ds-color-surface-main-pressed: var(--ds-color-neutral-700);\n --ds-color-surface-soft: var(--ds-color-neutral-800);\n --ds-color-surface-moderate: var(--ds-color-neutral-700);\n --ds-color-surface-strong: var(--ds-color-neutral-600);\n --ds-color-surface-disabled: var(--ds-color-neutral-800);\n --ds-color-surface-solid: var(--ds-color-neutral-800);\n --ds-color-surface-inverse: var(--ds-color-base-white);\n --ds-color-surface-error-main: var(--ds-color-red-1000);\n --ds-color-surface-error-moderate: var(--ds-color-red-900);\n --ds-color-surface-error-solid: var(--ds-color-red-700);\n --ds-color-surface-error-solid-hover: var(--ds-color-red-600);\n --ds-color-surface-error-solid-pressed: var(--ds-color-red-400);\n --ds-color-surface-warning-main: var(--ds-color-amber-1000);\n --ds-color-surface-warning-moderate: var(--ds-color-amber-900);\n --ds-color-surface-warning-solid: var(--ds-color-amber-700);\n --ds-color-surface-warning-solid-hover: var(--ds-color-amber-600);\n --ds-color-surface-warning-solid-pressed: var(--ds-color-amber-600);\n --ds-color-surface-success-main: var(--ds-color-green-1000);\n --ds-color-surface-success-moderate: var(--ds-color-green-900);\n --ds-color-surface-success-solid: var(--ds-color-green-700);\n --ds-color-surface-success-solid-hover: var(--ds-color-green-600);\n --ds-color-surface-success-solid-pressed: var(--ds-color-green-600);\n --ds-color-surface-blue-outline: var(--ds-color-blue-1000);\n --ds-color-surface-blue-moderate: var(--ds-color-blue-900);\n --ds-color-surface-violet-outline: var(--ds-color-violet-1000);\n --ds-color-surface-violet-moderate: var(--ds-color-violet-900);\n --ds-color-surface-yellow-outline: var(--ds-color-yellow-1000);\n --ds-color-surface-grey-outline: var(--ds-color-neutral-1000);\n --ds-color-surface-green-outline: var(--ds-color-green-1000);\n --ds-color-surface-orange-outline: var(--ds-color-amber-1000);\n --ds-color-surface-red-outline: var(--ds-color-red-1000);\n --ds-color-surface-blue-solid: var(--ds-color-blue-200);\n --ds-color-surface-violet-solid: var(--ds-color-violet-200);\n --ds-color-surface-yellow-solid: var(--ds-color-yellow-200);\n --ds-color-surface-grey-solid: var(--ds-color-neutral-200);\n --ds-color-surface-green-solid: var(--ds-color-green-200);\n --ds-color-surface-orange-solid: var(--ds-color-amber-300);\n --ds-color-surface-red-solid: var(--ds-color-red-200);\n --ds-color-border-main: var(--ds-color-neutral-700);\n --ds-color-border-solid: var(--ds-color-base-white);\n --ds-color-border-soft: var(--ds-color-neutral-800);\n --ds-color-border-moderate: var(--ds-color-neutral-700);\n --ds-color-border-disabled: var(--ds-color-neutral-700);\n --ds-color-border-error-main: var(--ds-color-red-400);\n --ds-color-border-error-soft: var(--ds-color-red-400);\n --ds-color-border-error-strong: var(--ds-color-red-600);\n --ds-color-border-success-main: var(--ds-color-green-400);\n --ds-color-border-success-soft: var(--ds-color-green-400);\n --ds-color-border-success-strong: var(--ds-color-green-600);\n --ds-color-border-warning-main: var(--ds-color-amber-400);\n --ds-color-border-warning-soft: var(--ds-color-amber-400);\n --ds-color-border-warning-strong: var(--ds-color-amber-600);\n --ds-color-border-blue-outline: var(--ds-color-blue-400);\n --ds-color-border-violet-outline: var(--ds-color-violet-400);\n --ds-color-border-yellow-outline: var(--ds-color-yellow-400);\n --ds-color-border-grey-outline: var(--ds-color-neutral-400);\n --ds-color-border-green-outline: var(--ds-color-green-400);\n --ds-color-border-orange-outline: var(--ds-color-amber-400);\n --ds-color-border-red-outline: var(--ds-color-red-400);\n --ds-color-foreground-main: var(--ds-color-base-white);\n --ds-color-foreground-main-onbrand: var(--ds-color-base-white);\n --ds-color-foreground-soft: var(--ds-color-neutral-300);\n --ds-color-foreground-soft-hover: var(--ds-color-neutral-200);\n --ds-color-foreground-moderate: var(--ds-color-neutral-400);\n --ds-color-foreground-moderate-hover: var(--ds-color-neutral-300);\n --ds-color-foreground-strong: var(--ds-color-neutral-500);\n --ds-color-foreground-strong-hover: var(--ds-color-neutral-400);\n --ds-color-foreground-disabled: var(--ds-color-neutral-400);\n --ds-color-foreground-white: var(--ds-color-base-white);\n --ds-color-foreground-link: var(--ds-color-blue-400);\n --ds-color-foreground-link-hover: var(--ds-color-blue-300);\n --ds-color-foreground-error-main: var(--ds-color-red-500);\n --ds-color-foreground-error-soft: var(--ds-color-red-400);\n --ds-color-foreground-warning-main: var(--ds-color-amber-500);\n --ds-color-foreground-warning-soft: var(--ds-color-amber-400);\n --ds-color-foreground-success-main: var(--ds-color-green-500);\n --ds-color-foreground-success-soft: var(--ds-color-green-400);\n --ds-color-foreground-form-selected: var(--ds-color-neutral-900);\n --ds-color-text-main: var(--ds-color-neutral-50);\n --ds-color-text-main-onbrand: var(--ds-color-base-white);\n --ds-color-text-soft: var(--ds-color-neutral-300);\n --ds-color-text-soft-hover: var(--ds-color-neutral-200);\n --ds-color-text-soft-onbrand: var(--ds-color-neutral-300);\n --ds-color-text-moderate: var(--ds-color-neutral-400);\n --ds-color-text-moderate-hover: var(--ds-color-neutral-300);\n --ds-color-text-moderate-onbrand: var(--ds-color-neutral-400);\n --ds-color-text-strong: var(--ds-color-neutral-400);\n --ds-color-text-strong-hover: var(--ds-color-neutral-300);\n --ds-color-text-strong-onbrand: var(--ds-color-neutral-400);\n --ds-color-text-disabled: var(--ds-color-neutral-400);\n --ds-color-text-placeholder: var(--ds-color-neutral-400);\n --ds-color-text-white: var(--ds-color-base-white);\n --ds-color-text-link: var(--ds-color-blue-400);\n --ds-color-text-link-hover: var(--ds-color-blue-300);\n --ds-color-text-brand-main: var(--ds-color-neutral-50);\n --ds-color-text-brand-main-hover: var(--ds-color-neutral-25);\n --ds-color-text-brand-soft: var(--ds-color-neutral-400);\n --ds-color-text-brand-soft-hover: var(--ds-color-neutral-300);\n --ds-color-text-error-main: var(--ds-color-red-400);\n --ds-color-text-error-main-hover: var(--ds-color-red-300);\n --ds-color-text-error-soft: var(--ds-color-red-600);\n --ds-color-text-warning-main: var(--ds-color-amber-400);\n --ds-color-text-warning-soft: var(--ds-color-amber-600);\n --ds-color-text-success-main: var(--ds-color-green-400);\n --ds-color-text-success-soft: var(--ds-color-green-600);\n --ds-color-text-blue-outline: var(--ds-color-blue-400);\n --ds-color-text-violet-outline: var(--ds-color-violet-400);\n --ds-color-text-yellow-outline: var(--ds-color-yellow-400);\n --ds-color-text-grey-outline: var(--ds-color-neutral-400);\n --ds-color-text-green-outline: var(--ds-color-green-400);\n --ds-color-text-orange-outline: var(--ds-color-amber-400);\n --ds-color-text-red-outline: var(--ds-color-red-400);\n --ds-color-text-blue-solid: var(--ds-color-blue-800);\n --ds-color-text-violet-solid: var(--ds-color-violet-800);\n --ds-color-text-yellow-solid: var(--ds-color-yellow-900);\n --ds-color-text-grey-solid: var(--ds-color-neutral-800);\n --ds-color-text-green-solid: var(--ds-color-green-800);\n --ds-color-text-orange-solid: var(--ds-color-amber-900);\n --ds-color-text-red-solid: var(--ds-color-red-800);\n --ds-color-surface-link-pressed: var(--ds-color-actions-ring);\n --ds-color-surface-brand-main: var(--ds-color-brand-1000);\n --ds-color-surface-brand-moderate: var(--ds-color-brand-900);\n --ds-color-surface-brand-solid: var(--ds-color-brand-700);\n --ds-color-surface-brand-solid-hover: var(--ds-color-brand-600);\n --ds-color-surface-brand-solid-pressed: var(--ds-color-brand-600);\n --ds-color-surface-form-selected: var(--ds-color-surface-inverse);\n --ds-color-border-brand-main: var(--ds-color-brand-400);\n --ds-color-border-brand-soft: var(--ds-color-brand-400);\n --ds-color-border-brand-strong: var(--ds-color-brand-600);\n --ds-color-foreground-brand-main: var(--ds-color-brand-500);\n --ds-color-foreground-brand-main-hover: var(--ds-color-brand-400);\n --ds-color-foreground-brand-soft: var(--ds-color-brand-500);\n --ds-color-foreground-brand-soft-hover: var(--ds-color-brand-600);
3901\n --ds-shadow-focus-ring-brand: 0 0 0 4px var(--ds-color-brand-800);\n --ds-shadow-focus-ring-error: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 6px var(--ds-color-red-500);\n --ds-shadow-focus-ring-actions: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 6px var(--ds-color-amber-400);\n}\n','/**\n * This theme is made by smartling dark theme,\n * but all violet colors are replaced with teal.\n */\n\n[data-theme="light"][data-color-scheme="legacy"] {\n --ds-color-border-transparent: rgba(0, 0, 0, 0);\n --ds-shadow-focus-ring-default: 0 0 0 4px rgba(152,162,179,0.14);\n --ds-shadow-standard-xs: 0 1px 2px 0 rgba(16,24,41,0.05);\n --ds-shadow-standard-s: 0 1px 2px 0 rgba(16,24,41,0.06), 0 2px 3px 0 rgba(16,24,41,0.10);\n --ds-shadow-standard-m: 0 2px 4px -2px rgba(16,24,41,0.06), 0 4px 8px 2px rgba(16,24,41,0.10);\n --ds-shadow-standard-l: 0 4px 6px -2px rgba(16,24,41,0.03), 0 12px 16px -4px rgba(16,24,41,0.08);\n --ds-shadow-standard-xl: 0 8px 8px -4px rgba(16,24,41,0.03), 0 20px 24px -4px rgba(16,24,41,0.08);
3901\n --ds-shadow-standard-2xl: 0 24px 48px -12px rgba(16,24,41,0.18);\n --ds-shadow-standard-3xl: 0 32px 64px -12px rgba(16,24,41,0.14);\n --ds-blur-default-background-filter: blur(1px);\n --ds-blur-default-background-color: rgba(0, 0, 0, 0.4);\n --ds-color-surface-main: var(--ds-color-base-white);\n --ds-color-surface-main-hover: var(--ds-color-neutral-100); /* Primary background hover color. This acts as the default hover state background color for components with white backgrounds (input dropdown menu items, buttons etc). */\n --ds-color-surface-soft: var(--ds-color-neutral-50);\n --ds-color-surface-moderate: var(--ds-color-neutral-100);\n --ds-color-surface-strong: var(--ds-color-neutral-300);\n --ds-color-surface-disabled: var(--ds-color-neutral-100);\n --ds-color-surface-solid: var(--ds-color-neutral-1000); /* The darkest background-color used across layouts and components. This switches to surface.soft when in dark mode and is useful for components such as tooltips and WYSIWYG tooltips. */\n --ds-color-surface-inverse: var(--ds-color-neutral-900);\n --ds-color-surface-link-pressed: var(--ds-color-amber-300);\n --ds-color-surface-error-main: var(--ds-color-red-50);\n --ds-color-surface-error-moderate: var(--ds-color-red-100);\n --ds-color-surface-error-solid: var(--ds-color-red-600);\n --ds-color-surface-error-solid-hover: var(--ds-color-red-700);\n --ds-color-surface-warning-main: var(--ds-color-amber-50);\n --ds-color-surface-warning-moderate: var(--ds-color-amber-100);\n --ds-color-surface-warning-solid: var(--ds-color-amber-600);\n --ds-color-surface-warning-solid-hover: var(--ds-color-amber-700);\n --ds-color-surface-success-main: var(--ds-color-green-50);\n --ds-color-surface-success-moderate: var(--ds-color-green-50);\n --ds-color-surface-success-solid: var(--ds-color-green-600);\n --ds-color-surface-success-solid-hover: var(--ds-color-green-700);\n --ds-color-surface-brand-main: var(--ds-color-teal-50);\n --ds-color-surface-brand-moderate: var(--ds-color-teal-100);\n --ds-color-surface-brand-solid: var(--ds-color-teal-600);\n --ds-color-surface-brand-solid-hover: var(--ds-color-teal-700);\n --ds-color-border-main: var(--ds-color-neutral-300);\n --ds-color-border-soft: var(--ds-color-neutral-200);\n /* neutral-200, not neutral-100: Figma resolves color/border/moderate to #e8e9e9 in\n legacy-light, distinctly lighter than the #f2f2f2 it gives color/surface/moderate.\n Mapping both to neutral-100 collapsed them, so every border bound to this token was\n the same colour as the surface behind it and did not render. neutral-200 #e5e5e5 is\n the nearest we have, and matches what modern-light already maps this token to. */\n --ds-color-border-moderate: var(--ds-color-neutral-200);\n --ds-color-border-disabled: var(--ds-color-neutral-300);\n --ds-color-border-solid: var(--ds-color-base-black);\n --ds-color-border-error-main: var(--ds-color-red-500);\n --ds-color-border-error-soft: var(--ds-color-red-300);\n --ds-color-border-error-strong: var(--ds-color-red-800);\n --ds-color-border-brand-main: var(--ds-color-teal-500);\n --ds-color-border-brand-soft: var(--ds-color-teal-300);\n --ds-color-border-brand-strong: var(--ds-color-teal-800);\n --ds-color-border-success-main: var(--ds-color-green-500);\n --ds-color-border-success-soft: var(--ds-color-green-300);\n --ds-color-border-success-strong: var(--ds-color-green-800);\n --ds-color-border-warning-main: var(--ds-color-amber-500);\n --ds-color-border-warning-soft: var(--ds-color-amber-300);\n --ds-color-border-warning-strong: var(--ds-color-amber-800);\n --ds-color-foreground-main: var(--ds-color-neutral-900); /* Foreground color tokens are made to manage all non-text foreground elements in designs across (light/dark) themes, like icons, arrows, etc */\n --ds-color-foreground-main-onbrand: var(--ds-color-base-white); /* Foreground color tokens are made to manage all non-text foreground elements in designs across (light/dark) themes, like icons, arrows, etc */\n --ds-color-foreground-soft: var(--ds-color-neutral-700);\n --ds-color-foreground-soft-hover: var(--ds-color-neutral-800);\n --ds-color-foreground-moderate: var(--ds-color-neutral-600);\n --ds-color-foreground-moderate-hover: var(--ds-color-neutral-700);\n --ds-color-foreground-strong: var(--ds-color-neutral-400);\n --ds-color-foreground-strong-hover: var(--ds-color-neutral-500);\n --ds-color-foreground-disabled: var(--ds-color-neutral-400);\n --ds-color-foreground-white: var(--ds-color-base-white);\n --ds-color-foreground-link: var(--ds-color-teal-600);\n --ds-color-foreground-link-hover: var(--ds-color-teal-800);\n --ds-color-foreground-brand-main: var(--ds-color-teal-700);\n --ds-color-foreground-brand-main-hover: var(--ds-color-teal-300);\n --ds-color-foreground-brand-soft: var(--ds-color-teal-600);\n --ds-color-foreground-brand-soft-hover: var(--ds-color-teal-700);\n --ds-color-foreground-error-main: var(--ds-color-red-700);\n --ds-color-foreground-error-soft: var(--ds-color-red-600);\n --ds-color-foreground-warning-main: var(--ds-color-amber-700);\n --ds-color-foreground-warning-soft: var(--ds-color-amber-600);\n --ds-color-foreground-success-main: var(--ds-color-green-700);\n --ds-color-foreground-success-soft: var(--ds-color-green-600);\n --ds-color-foreground-form-selected: var(--ds-color-base-white);\n --ds-color-text-main: var(--ds-color-neutral-800); /* Text color tokens to manage all text fill colors in designs across (light/dark) themes. */\n --ds-color-text-main-onbrand: var(--ds-color-base-white); /* Primary text when used on solid brand color backgrounds. Commonly used for brand theme /primary buttons, for example. */\n --ds-color-text-soft: var(--ds-color-neutral-700);\n --ds-color-text-soft-hover: var(--ds-color-neutral-800);\n --ds-color-text-soft-onbrand: var(--ds-color-teal-200);\n --ds-color-text-moderate: var(--ds-color-neutral-600);\n --ds-color-text-moderate-hover: var(--ds-color-neutral-700);\n --ds-color-text-moderate-onbrand: var(--ds-color-teal-200);\n --ds-color-text-strong: var(--ds-color-neutral-400);\n --ds-color-text-strong-hover: var(--ds-color-neutral-500);\n --ds-color-text-strong-onbrand: var(--ds-color-teal-300);\n --ds-color-text-disabled: var(--ds-color-neutral-400);\n --ds-color-text-placeholder: var(--ds-color-neutral-500);\n --ds-color-text-white: var(--ds-color-base-white);\n --ds-color-text-link: var(--ds-color-teal-600);\n --ds-color-text-link-hover: var(--ds-color-teal-800);\n --ds-color-text-brand-main: var(--ds-color-teal-700);\n --ds-color-text-brand-main-hover: var(--ds-color-teal-800);\n --ds-color-text-brand-soft: var(--ds-color-teal-600);\n --ds-color-text-brand-soft-hover: var(--ds-color-teal-700);\n --ds-color-text-error-main: var(--ds-color-red-600);\n --ds-color-text-error-soft: var(--ds-color-red-700);\n --ds-color-text-warning-main: var(--ds-color-amber-600);\n --ds-color-text-warning-soft: var(--ds-color-amber-700);\n --ds-color-text-success-main: var(--ds-color-green-600);\n --ds-color-text-success-soft: var(--ds-color-green-700);
3901\n --ds-shadow-focus-ring-brand: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-teal-600);\n --ds-shadow-focus-ring-error: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-red-500);\n --ds-color-surface-form-selected: var(--ds-color-surface-inverse);\n --ds-shadow-focus-ring-actions: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-teal-600);\n --ds-color-surface-main-pressed: var(--ds-color-neutral-200);\n --ds-color-surface-error-solid-pressed: var(--ds-color-red-800);\n --ds-color-surface-warning-solid-pressed: var(--ds-color-amber-800);\n --ds-color-surface-success-solid-pressed: var(--ds-color-green-800);\n --ds-color-surface-brand-solid-pressed: var(--ds-color-brand-800);\n --ds-color-surface-blue-outline: var(--ds-color-blue-50);\n --ds-color-text-blue-outline: var(--ds-color-blue-700);\n --ds-color-border-blue-outline: var(--ds-color-blue-300);\n --ds-color-surface-violet-outline: var(--ds-color-violet-50);\n --ds-color-text-violet-outline: var(--ds-color-violet-700);\n --ds-color-border-violet-outline: var(--ds-color-violet-300);\n --ds-color-surface-yellow-outline: var(--ds-color-yellow-100);\n --ds-color-text-yellow-outline: var(--ds-color-yellow-700);\n --ds-color-border-yellow-outline: var(--ds-color-yellow-500);\n --ds-color-surface-grey-outline: var(--ds-color-neutral-50);\n --ds-color-text-grey-outline: var(--ds-color-neutral-700);\n --ds-color-border-grey-outline: var(--ds-color-neutral-300);\n --ds-color-text-green-outline: var(--ds-color-green-700);\n --ds-color-border-green-outline: var(--ds-color-green-300);\n --ds-color-surface-orange-outline: var(--ds-color-amber-100);\n --ds-color-text-orange-outline: var(--ds-color-amber-900);\n --ds-color-border-orange-outline: var(--ds-color-amber-500);\n --ds-color-text-red-outline: var(--ds-color-red-700);\n --ds-color-border-red-outline: var(--ds-color-red-300);\n --ds-color-surface-blue-solid: var(--ds-color-blue-700);\n --ds-color-surface-violet-solid: var(--ds-color-violet-700);\n --ds-color-surface-yellow-solid: var(--ds-color-yellow-400);\n --ds-color-surface-grey-solid: var(--ds-color-neutral-700);\n --ds-color-surface-green-solid: var(--ds-color-green-700);\n --ds-color-surface-orange-solid: var(--ds-color-amber-500);\n --ds-color-text-orange-solid: var(--ds-color-amber-1000);\n --ds-color-surface-red-solid: var(--ds-color-red-600);\n --ds-color-surface-green-outline: var(--ds-color-surface-success-main);\n --ds-color-surface-red-outline: var(--ds-color-surface-error-main);\n --ds-color-text-blue-solid: var(--ds-color-text-main-onbrand);\n --ds-color-text-violet-solid: var(--ds-color-text-main-onbrand);\n --ds-color-text-yellow-solid: var(--ds-color-text-main);\n --ds-color-text-grey-solid: var(--ds-color-text-main-onbrand);\n --ds-color-text-green-solid: var(--ds-color-text-main-onbrand);\n --ds-color-text-red-solid: var(--ds-color-text-main-onbrand);\n --ds-color-text-error-main-hover: var(--ds-color-red-800);\n --ds-color-surface-blue-moderate: var(--ds-color-blue-100);\n --ds-color-surface-violet-moderate: var(--ds-color-violet-100);\n /* support for hard changes in variable naming */\n --ds-shadow-standard-xxl: var(--ds-shadow-standard-2xl);\n}\n','/**\n * This theme is made by smartling dark theme,\n * but all violet colors are replaced with teal.\n */\n\n[data-theme="dark"][data-color-scheme="legacy"] {\n --ds-color-border-transparent: rgba(0, 0, 0, 0);\n --ds-shadow-focus-ring-default: 0 0 0 4px rgba(152,162,179,0.14);
3901\n --ds-shadow-standard-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n --ds-shadow-standard-s: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 3px 0 rgba(0, 0, 0, 0.15);\n --ds-shadow-standard-m: 0 2px 4px -2px rgba(0, 0, 0, 0.3), 0 4px 8px 2px rgba(0, 0, 0, 0.15);\n --ds-shadow-standard-l: 0 4px 6px -2px rgba(0, 0, 0, 0.2), 0 12px 16px -4px rgba(0, 0, 0, 0.1);\n --ds-shadow-standard-xl: 0 8px 8px -4px rgba(0, 0, 0, 0.2), 0 20px 24px -4px rgba(0, 0, 0, 0.1);\n --ds-shadow-standard-2xl: 0 24px 48px -12px rgba(0, 0, 0, 0.25);\n --ds-shadow-standard-3xl: 0 32px 64px -12px rgba(0, 0, 0, 0.2);\n --ds-blur-default-background-filter: blur(1px);\n --ds-blur-default-background-color: rgba(0, 0, 0, 0.4);\n --ds-color-surface-main: var(--ds-color-neutral-900);\n --ds-color-surface-main-hover: var(--ds-color-neutral-800); /* Primary background hover color. This acts as the default hover state background color for components with white backgrounds (input dropdown menu items, buttons etc). */\n --ds-color-surface-soft: var(--ds-color-neutral-800);\n --ds-color-surface-moderate: var(--ds-color-neutral-700);\n --ds-color-surface-strong: var(--ds-color-neutral-600);\n --ds-color-surface-disabled: var(--ds-color-neutral-800);\n --ds-color-surface-solid: var(--ds-color-neutral-800); /* The darkest background-color used across layouts and components. This switches to surface.soft when in dark mode and is useful for components such as tooltips and WYSIWYG tooltips. */\n --ds-color-surface-inverse: var(--ds-color-base-white);\n --ds-color-surface-link-pressed: var(--ds-color-amber-400);\n --ds-color-surface-error-main: var(--ds-color-red-1000);\n --ds-color-surface-error-moderate: var(--ds-color-red-800);\n --ds-color-surface-error-solid: var(--ds-color-red-600);\n --ds-color-surface-error-solid-hover: var(--ds-color-red-700);\n --ds-color-surface-warning-main: var(--ds-color-amber-1000);\n --ds-color-surface-warning-moderate: var(--ds-color-amber-900);\n --ds-color-surface-warning-solid: var(--ds-color-amber-700);\n --ds-color-surface-warning-solid-hover: var(--ds-color-amber-600);\n --ds-color-surface-success-main: var(--ds-color-green-1000);\n --ds-color-surface-success-moderate: var(--ds-color-green-900);\n --ds-color-surface-success-solid: var(--ds-color-green-600);\n --ds-color-surface-success-solid-hover: var(--ds-color-green-700);\n --ds-color-surface-brand-main: var(--ds-color-teal-1000);\n --ds-color-surface-brand-moderate: var(--ds-color-teal-900);\n --ds-color-surface-brand-solid: var(--ds-color-teal-600);\n --ds-color-surface-brand-solid-hover: var(--ds-color-teal-500);\n --ds-color-border-main: var(--ds-color-neutral-700);\n --ds-color-border-solid: var(--ds-color-base-white);\n --ds-color-border-soft: var(--ds-color-neutral-800);\n --ds-color-border-moderate: var(--ds-color-neutral-800);\n --ds-color-border-disabled: var(--ds-color-neutral-700);\n --ds-color-border-error-main: var(--ds-color-red-400);\n --ds-color-border-error-soft: var(--ds-color-red-400);\n --ds-color-border-error-strong: var(--ds-color-red-600);\n --ds-color-border-brand-main: var(--ds-color-teal-400);\n --ds-color-border-brand-soft: var(--ds-color-teal-400);\n --ds-color-border-brand-strong: var(--ds-color-teal-600);\n --ds-color-border-success-main: var(--ds-color-green-400);\n --ds-color-border-success-soft: var(--ds-color-green-400);\n --ds-color-border-success-strong: var(--ds-color-green-600);\n --ds-color-border-warning-main: var(--ds-color-amber-400);\n --ds-color-border-warning-soft: var(--ds-color-amber-400);\n --ds-color-border-warning-strong: var(--ds-color-amber-600);\n --ds-color-foreground-main: var(--ds-color-base-white); /* Foreground color tokens are made to manage all non-text foreground elements in designs across (light/dark) themes, like icons, arrows, etc */\n --ds-color-foreground-main-onbrand: var(--ds-color-base-white); /* Foreground color tokens are made to manage all non-text foreground elements in designs across (light/dark) themes, like icons, arrows, etc */\n --ds-color-foreground-soft: var(--ds-color-neutral-300);\n --ds-color-foreground-soft-hover: var(--ds-color-neutral-200);\n --ds-color-foreground-moderate: var(--ds-color-neutral-400);\n --ds-color-foreground-moderate-hover: var(--ds-color-neutral-300);\n --ds-color-foreground-strong: var(--ds-color-neutral-500);\n --ds-color-foreground-strong-hover: var(--ds-color-neutral-400);\n --ds-color-foreground-disabled: var(--ds-color-neutral-400);\n --ds-color-foreground-white: var(--ds-color-base-white);\n --ds-color-foreground-link: var(--ds-color-teal-600);\n --ds-color-foreground-link-hover: var(--ds-color-blue-400);\n --ds-color-foreground-brand-main: var(--ds-color-teal-500);\n --ds-color-foreground-brand-main-hover: var(--ds-color-teal-400);\n --ds-color-foreground-brand-soft: var(--ds-color-teal-500);\n --ds-color-foreground-brand-soft-hover: var(--ds-color-teal-600);\n --ds-color-foreground-error-main: var(--ds-color-red-500);\n --ds-color-foreground-error-soft: var(--ds-color-red-400);\n --ds-color-foreground-warning-main: var(--ds-color-amber-500);\n --ds-color-foreground-warning-soft: var(--ds-color-amber-400);\n --ds-color-foreground-success-main: var(--ds-color-green-500);\n --ds-color-foreground-success-soft: var(--ds-color-green-400);\n --ds-color-foreground-form-selected: var(--ds-color-neutral-900);\n --ds-color-text-main: var(--ds-color-neutral-50); /* Text color tokens to manage all text fill colors in designs across (light/dark) themes. */\n --ds-color-text-main-onbrand: var(--ds-color-base-white); /* Primary text when used on solid brand color backgrounds. Commonly used for brand theme /primary buttons, for example. */\n --ds-color-text-soft: var(--ds-color-neutral-300);\n --ds-color-text-soft-hover: var(--ds-color-neutral-200);\n --ds-color-text-soft-onbrand: var(--ds-color-neutral-300);\n --ds-color-text-moderate: var(--ds-color-neutral-400);\n --ds-color-text-moderate-hover: var(--ds-color-neutral-300);\n --ds-color-text-moderate-onbrand: var(--ds-color-neutral-400);\n --ds-color-text-strong: var(--ds-color-neutral-400);\n --ds-color-text-strong-hover: var(--ds-color-neutral-300);\n --ds-color-text-strong-onbrand: var(--ds-color-neutral-400);\n --ds-color-text-disabled: var(--ds-color-neutral-500);\n --ds-color-text-placeholder: var(--ds-color-neutral-400);\n --ds-color-text-white: var(--ds-color-base-white);\n --ds-color-text-link: var(--ds-color-teal-600);\n --ds-color-text-link-hover: var(--ds-color-blue-400);\n --ds-color-text-brand-main: var(--ds-color-neutral-50);\n --ds-color-text-brand-main-hover: var(--ds-color-neutral-25);\n --ds-color-text-brand-soft: var(--ds-color-neutral-400);\n --ds-color-text-brand-soft-hover: var(--ds-color-neutral-300);\n --ds-color-text-error-main: var(--ds-color-red-400);\n --ds-color-text-error-soft: var(--ds-color-red-600);\n --ds-color-text-warning-main: var(--ds-color-amber-400);\n --ds-color-text-warning-soft: var(--ds-color-amber-600);\n --ds-color-text-success-main: var(--ds-color-green-400);\n --ds-color-text-success-soft: var(--ds-color-green-600);
3901\n --ds-shadow-focus-ring-brand: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-teal-500);\n --ds-shadow-focus-ring-error: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-red-500);\n --ds-color-surface-form-selected: var(--ds-color-surface-inverse);\n --ds-shadow-focus-ring-actions: 0 0 0 2px var(--ds-color-surface-main), 0 0 0 4px var(--ds-color-teal-500);\n --ds-color-surface-main-pressed: var(--ds-color-neutral-700);\n --ds-color-surface-error-solid-pressed: var(--ds-color-red-400);\n --ds-color-surface-warning-solid-pressed: var(--ds-color-amber-600);\n --ds-color-surface-success-solid-pressed: var(--ds-color-green-600);\n --ds-color-surface-brand-solid-pressed: var(--ds-color-brand-600);\n --ds-color-surface-blue-outline: var(--ds-color-blue-1000);\n --ds-color-text-blue-outline: var(--ds-color-blue-400);\n --ds-color-border-blue-outline: var(--ds-color-blue-400);\n --ds-color-surface-violet-outline: var(--ds-color-violet-1000);\n --ds-color-text-violet-outline: var(--ds-color-violet-400);\n --ds-color-border-violet-outline: var(--ds-color-violet-400);\n --ds-color-surface-yellow-outline: var(--ds-color-yellow-1000);\n --ds-color-text-yellow-outline: var(--ds-color-yellow-400);\n --ds-color-border-yellow-outline: var(--ds-color-yellow-400);\n --ds-color-surface-grey-outline: var(--ds-color-neutral-1000);\n --ds-color-text-grey-outline: var(--ds-color-neutral-400);\n --ds-color-border-grey-outline: var(--ds-color-neutral-400);\n --ds-color-surface-green-outline: var(--ds-color-green-1000);\n --ds-color-text-green-outline: var(--ds-color-green-400);\n --ds-color-border-green-outline: var(--ds-color-green-400);\n --ds-color-surface-orange-outline: var(--ds-color-amber-1000);\n --ds-color-text-orange-outline: var(--ds-color-amber-400);\n --ds-color-border-orange-outline: var(--ds-color-amber-400);\n --ds-color-surface-red-outline: var(--ds-color-red-1000);\n --ds-color-text-red-outline: var(--ds-color-red-400);\n --ds-color-border-red-outline: var(--ds-color-red-400);\n --ds-color-surface-blue-solid: var(--ds-color-blue-200);\n --ds-color-text-blue-solid: var(--ds-color-blue-800);\n --ds-color-surface-violet-solid: var(--ds-color-violet-200);\n --ds-color-text-violet-solid: var(--ds-color-violet-800);\n --ds-color-surface-yellow-solid: var(--ds-color-yellow-200);\n --ds-color-text-yellow-solid: var(--ds-color-yellow-900);\n --ds-color-surface-grey-solid: var(--ds-color-neutral-200);\n --ds-color-text-grey-solid: var(--ds-color-neutral-800);\n --ds-color-surface-green-solid: var(--ds-color-green-200);\n --ds-color-text-green-solid: var(--ds-color-green-800);\n --ds-color-surface-orange-solid: var(--ds-color-amber-300);\n --ds-color-text-orange-solid: var(--ds-color-amber-900);\n --ds-color-surface-red-solid: var(--ds-color-red-200);\n --ds-color-text-red-solid: var(--ds-color-red-800);\n --ds-color-text-error-main-hover: var(--ds-color-red-300);\n --ds-color-surface-blue-moderate: var(--ds-color-blue-900);\n --ds-color-surface-violet-moderate: var(--ds-color-violet-900);\n /* support for hard changes in variable naming */\n --ds-shadow-standard-xxl: var(--ds-shadow-standard-2xl);\n}\n','/**\n * Do not edit directly, this file was auto-generated.\n */\n\n[data-font-size="large"] {\n --ds-global-size-universal-scale: 1rem;\n --ds-font-size-rem: 1rem;\n --ds-font-size-html: 20px;\n}\n',':root {\n /* Item */\n /* Box/Collapsed "Container fill" Default -> color/surface/moderate */\n --ds-accordion-item-background-color-box: var(--ds-color-surface-moderate);\n /* Box/Collapsed "Container fill" Hover & Focus -> color/surface/main-pressed */\n --ds-accordion-item-background-color-box-hovered: var(--ds-color-surface-main-pressed);\n /* Box/Expanded "Container fill" -> color/surface/main (white); the Header keeps\n -background-box (moderate) so the two-tone split only appears once expanded */\n --ds-accordion-item-background-color-box-expanded: var(--ds-color-surface-main);\n /* Box/Expanded container shadow -> shadow/standard/xs (absent when collapsed) */\n --ds-accordion-item-box-shadow-expanded: var(--ds-shadow-standard-xs);\n /* Box\'s stroke is a real border wrapping a filled, rounded container, so it\n occupies layout and the Trigger subtracts this width twice for that variant\n (see Trigger/styles.module.css). Outline and No border draw their block\n strokes as box-shadow instead -- outside the row, taking no layout space --\n so every variant\'s item border-box lands exactly on the height token. */\n --ds-accordion-item-border-width: var(--ds-border-width-tier-2);\n /* Box/Expanded "Container stroke" -> color/border/moderate; Box style renders a\n 1px border on all sides per Structure (only the exp
3901anded section names a\n stroke color, so it is reused for the collapsed box border too) */\n --ds-accordion-item-border-box: var(--ds-accordion-item-border-width) solid var(--ds-color-border-moderate);\n /* Outline/Collapsed & Outline/Expanded "Container stroke" Default -> color/border/soft.\n Block-start + block-end only, drawn as a pair of hard 1px shadows so the rules\n sit immediately outside the row instead of inflating it. */\n --ds-accordion-item-box-shadow-outline:\n 0 calc(-1 * var(--ds-accordion-item-border-width)) 0 0 var(--ds-color-border-soft),\n 0 var(--ds-accordion-item-border-width) 0 0 var(--ds-color-border-soft);\n /* Outline Hover "Container stroke" -> color/border/main. Outline only: Box swaps its\n container fill instead (-background-color-box-hovered), and No border has stroke\n weight 0 in every state including Hover, so it must not consume this. */\n --ds-accordion-item-box-shadow-hovered:\n 0 calc(-1 * var(--ds-accordion-item-border-width)) 0 0 var(--ds-color-border-main),\n 0 var(--ds-accordion-item-border-width) 0 0 var(--ds-color-border-main);\n /* Figma "radius/m" -> --ds-radius-m (8px), confirmed via Figma\'s dev-mode\n CSS output (var(--radius-m, 8px)) */\n --ds-accordion-item-border-radius: var(--ds-radius-m);\n /* "horizontalPadding" -> space/page/inside/m (16), Box style only */\n --ds-accordion-item-padding-inline: var(--ds-space-page-inside-m);\n /* Outline/No border sit flush against the surrounding layout (no container fill to\n inset from), so they use a much tighter horizontal inset than Box -- matched\n by VALUE (2px) to dimension/tier/2, no space/page/inside token is that small */\n --ds-accordion-item-padding-inline-tight: var(--ds-dimension-tier-2);\n\n /* Trigger - size-scaled */\n /* Figma "height" per size (40/48/56) -> size/actions/{xl,3xl,4xl}. Not three\n consecutive steps of the actions ramp -- -2xl (44) sits between xl and 3xl.\n This is the VISIBLE row height in every variant: Box\'s item box measures it\n outright, Outline/No border measure it between their strokes. */\n --ds-accordion-trigger-height-sm: var(--ds-size-actions-xl);\n --ds-accordion-trigger-height-md: var(--ds-size-actions-3xl);\n --ds-accordion-trigger-height-lg: var(--ds-size-actions-4xl);\n\n /* "leadingIconSize" per size -> size/icon/s (sm/md), size/icon/m (lg) */\n --ds-accordion-trigger-icon-size-sm: var(--ds-size-icon-s);\n --ds-accordion-trigger-icon-size-md: var(--ds-size-icon-s);\n --ds-accordion-trigger-icon-size-lg: var(--ds-size-icon-m);\n\n /* "textStyle" per size -> font/body/strongest/{s,m,l} */\n --ds-accordion-trigger-title-font-sm: var(--ds-font-body-strongest-s);\n --ds-accordion-trigger-title-font-md: var(--ds-font-body-strongest-m);\n --ds-accordion-trigger-title-font-lg: var(--ds-font-body-strongest-l);\n\n /* "trailingIconSize" per size -- Structure gives raw px (20/24/24) with no\n Figma token name; matched by VALUE to the closest size/icon/* token */\n --ds-accordion-trigger-chevron-size-sm: var(--ds-size-icon-m);\n --ds-accordion-trigger-chevron-size-md: var(--ds-size-icon-l);\n --ds-accordion-trigger-chevron-size-lg: var(--ds-size-icon-l);\n\n /* "badgeMinHeight" per size -> dimension/tier/8 (sm/md), dimension/tier/9 (lg) */\n --ds-accordion-trigger-badge-min-height-sm: var(--ds-dimension-tier-8);\n --ds-accordion-trigger-badge-min-height-md: var(--ds-dimension-tier-8);\n --ds-accordion-trigger-badge-min-height-lg: var(--ds-dimension-tier-9);\n\n /* Trigger - constants */\n /* Figma "verticalPadding" is a constant 12 across all three sizes -- it does\n NOT scale with size -> space/page/inside/s. The per-size -height-* tokens\n above are authoritative for the row\'s measured height; at sm the 20px\n chevron is taller than the 16px content box this padding leaves, so the\n flex row centers it and the effective padding there is ~10px. */\n --ds-accordion-trigger-padding-block: var(--ds-space-page-inside-s);\n /* "Content itemSpacing" (title cluster <-> chevron) = 24, no Figma token name\n given; matched by VALUE to space/page/inside/xl */\n --ds-accordion-trigger-gap: var(--ds-space-page-inside-xl);\n /* "Text and icons itemSpacing" (icon <-> title <-> badge) = 8, no Figma token\n name given; matched by VALUE to space/page/inside/xs */\n --ds-accordion-trigger-title-cluster-gap: var(--ds-space-page-inside-xs);\n\n /* Trigger - color/state */\n /* "Title label" Default -> color/text/soft (constant across Outline/No border and\n Box/Collapsed; Box/Expanded\'s Default of color/text/main is applied by the\n component layer via [data-open], reusing -color-hovered below) */\n --ds-accordion-trigger-color: var(--ds-color-text-soft);\n /* "Title label" Hover -> color/text/main (constant across every Style x\n Expanded section) */\n --ds-accordion-trigger-color-hovered: var(--ds-color-text-main);\n /* Chevron fill ->
3901 color/foreground/strong (constant, does not follow the\n title\'s hover/expanded color changes) */\n --ds-accordion-trigger-chevron-color: var(--ds-color-foreground-strong);\n /* Outline + No border Focus: Figma highlights the title label itself\n ("Title label" fill -> color/surface/link-pressed) rather than drawing the\n Box variant\'s ring around the item. */\n --ds-accordion-trigger-title-background-color-focused: var(--ds-color-surface-link-pressed);\n\n /* Header */\n /* Box Header "Container fill" -> color/surface/moderate, constant across\n Collapsed/Expanded. Blends into the item\'s own Box/Collapsed background\n (also -moderate); only visible as a distinct band once Expanded switches\n the item\'s own background to -background-box-expanded (white). */\n --ds-accordion-header-background-color-box: var(--ds-color-surface-moderate);\n /* Box/Expanded "Header stroke" -> color/border/moderate; renders as the 1px\n divider under the Header row when the item is open */\n --ds-accordion-header-divider-color: var(--ds-color-border-moderate);\n /* Expanded state Header "borderWidthBottom" = 1 */\n --ds-accordion-header-divider-width: var(--ds-border-width-tier-2);\n /* Focus ring (outer) + Focus ring (inner) -> shadow/focus-ring/actions (the two Figma\n rows are already the outer+inner pair baked into this one token). Box only --\n Outline and No border mark focus on the title instead (see the Trigger group).\n Applied on Header, not Item, so the ring wraps only the header row -- an open\n item no longer r
3901ings its own expanded panel too. */\n --ds-accordion-header-focus-ring-shadow: var(--ds-shadow-focus-ring-actions);\n\n /* Panel */\n /* paddingTop=space/page/inside/l (20) / paddingBottom=space/page/inside/m (16) */\n --ds-accordion-panel-padding-block: var(--ds-space-page-inside-l) var(--ds-space-page-inside-m);\n /* Expanded "Body container" horizontalPadding -> space/page/inside/m (16) */\n --ds-accordion-panel-body-padding-inline: var(--ds-space-page-inside-m);\n /* "Body container" itemSpacing = 8, no Figma token name given; matched by\n VALUE to space/page/inside/xs */\n --ds-accordion-panel-body-gap: var(--ds-space-page-inside-xs);\n\n /* Motion */\n /* No --ds-motion-* / --ds-transition-* semantic token exists in the theme yet\n (see packages/components/expandable/README.md for the same unimplemented\n precedent, --ds-expandable-transition-duration/-timing-function). Using\n literal values consistent with that precedent (target: 200ms / ease-out). */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "200ms" with a semantic token; no --ds-motion-duration-* token exists yet */\n --ds-accordion-transition-duration: 200ms;\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "ease-out" with a semantic token; no --ds-motion-easing-* token exists yet */\n --ds-accordion-transition-timing-function: ease-out;\n}\n',':root {\n /* Avatar shape */\n --ds-avatar-border-radius: var(--ds-radius-full);\n\n /* Avatar sizes (width = height) */\n --ds-avatar-size-xs: var(--ds-dimension-tier-9);\n --ds-avatar-size-sm: var(--ds-dimension-tier-11);\n --ds-avatar-size-md: var(--ds-dimension-tier-13);\n --ds-avatar-size-lg: var(--ds-dimension-tier-15);\n --ds-avatar-size-xl: var(--ds-dimension-tier-17);\n --ds-avatar-size-2xl: var(--ds-dimension-tier-18);\n\n /* Avatar contrast border */\n --ds-avatar-border-color: var(--ds-color-border-solid);\n --ds-avatar-border-width: var(--ds-border-width-tier-1);\n /* No exact opacity token for 0.08; closest is --ds-opacity-light (0.15) */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0.08" with a semantic token */\n --ds-avatar-border-opacity: 0.08;\n\n /* Avatar fallback (initials) */\n --ds-avatar-fallback-background-color: var(--ds-color-surface-soft);\n --ds-avatar-fallback-color: var(--ds-color-text-soft);\n\n --ds-avatar-fallback-font-xs: var(--ds-font-body-strong-xs);\n --ds-avatar-fallback-font-sm: var(--ds-font-body-strong-xs);\n --ds-avatar-fallback-font-md: var(--ds-font-body-strong-s);\n --ds-avatar-fallback-font-lg: var(--ds-font-body-strong-m);\n --ds-avatar-fallback-font-xl: var(--ds-font-body-strong-l);\n --ds-avatar-fallback-font-2xl: var(--ds-font-body-strong-xl);\n}\n',":root {\n /* Badge base (neutral variant) */\n --ds-badge-color: var(--ds-color-text-soft);\n --ds-badge-background-color: var(--ds-color-surface-soft);\n --ds-badge-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft);\n --ds-badge-border-radius: var(--ds-radius-full);\n\n /* Badge success variant â text uses -main (darker, emphasis) for contrast on the soft bg */\n --ds-badge-color-success: var(--ds-color-text-success-main);\n --ds-badge-background-color-success: var(--ds-color-surface-success-main);\n --ds-badge-border-success: var(--ds-border-width-tier-2) solid var(--ds-color-border-success-main);\n\n /* Badge warning variant */\n --ds-badge-color-warning: var(--ds-color-text-warning-main);\n --ds-badge-background-color-warning: var(--ds-color-surface-warning-main);\n --ds-badge-border-warning: var(--ds-border-width-tier-2) solid var(--ds-color-border-warning-main);\n\n /* Badge error variant */\n --ds-badge-color-error: var(--ds-color-text-error-main);\n --ds-badge-background-color-error: var(--ds-color-surface-error-main);\n --ds-badge-border-error: var(--ds-border-width-tier-2) solid var(--ds-color-border-error-main);\n\n /* Badge outline color tokens â alias to theme-palette tokens (theme-aware via light/dark CSS) */\n --ds-badge-color-outline-grey: var(--ds-color-text-grey-outline);\n --ds-badge-background-color-outline-grey: var(--ds-color-surface-grey-outline);\n --ds-badge-border-outline-grey: var(--ds-border-width-tier-2) solid var(--ds-color-border-grey-outline);\n\n --ds-badge-color-outline-blue: var(--ds-color-text-blue-outline);\n --ds-badge-background-color-outline-blue: var(--ds-color-surface-blue-outline);\n --ds-badge-border-outline-blue: var(--ds-border-width-tier-2) solid var(--ds-color-border-blue-outline);\n\n --ds-badge-color-outline-green: var(--ds-color-text-green-outline);\n --ds-badge-background-color-outline-green: var(--ds-color-surface-green-outline);\n --ds-badge-border-outline-green: var(--ds-border-width-tier-2) solid var(--ds-color-border-green-outline);\n\n --ds-badge-color-outline-orange: var(--ds-color-text-orange-outline);\n --ds-badge-background-color-outline-orange: var(--ds-color-surface-orange-outline);\n --ds-badge-border-outline-orange: var(--ds-border-width-tier-2) solid var(--ds-color-border-orange-outline);\n\n --ds-badge-color-outline-violet: var(--ds-color-text-violet-outline);\n --ds-badge-background-color-outline-violet: var(--ds-color-surface-violet-outline);\n --ds-badge-border-outline-violet: var(--ds-border-width-tier-2) solid var(--ds-color-border-violet-outline);\n\n --ds-badge-color-outline-red: var(--ds-color-text-red-outline);\n --ds-badge-background-color-outline-red: var(--ds-color-surface-red-outline);\n --ds-badge-border-outline-red: var(--ds-border-width-tier-2) solid var(--ds-color-border-red-outline);\n\n --ds-badge-color-outline-yellow: var(--ds-color-text-yellow-outline);\n --ds-badge-background-color-outline-yellow: var(--ds-color-surface-yellow-outline);\n --ds-badge-border-outline-yellow: var(--ds-border-width-tier-2) solid var(--ds-color-border-yellow-outline);\n\n /* Badge solid color tokens â alias to theme-palette tokens (Figma defines no border, use transparent) */\n --ds-badge-color-solid-grey: var(--ds-color-text-grey-solid);\n --ds-badge-background-color-solid-grey: var(--ds-color-surface-grey-solid);\n --ds-badge-border-solid-grey: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent);\n\n --ds-badge-color-solid-blue: var(--ds-color-text-blue-solid);\n --ds-badge-background-color-solid-blue: var(--ds-color-surface-blue-solid);\n --ds-badge-border-solid-blue: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent);\n\n --ds-badge-color-solid-green: var(--ds-color-text-green-solid);\n --ds-badge-background-color-solid-green: var(--ds-color-surface-green-solid);\n --ds-badge-border-solid-green: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent);\n\n --ds-badge-color-solid-orange: var(--ds-color-text-orange-solid);\n --ds-badge-background-color-solid-orange: var(--ds-color-surface-orange-solid);\n --ds-badge-border-solid-orange: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent);\n\n --ds-badge-color-solid-violet: var(--ds-color-text-violet-solid);\n --ds-badge-background-color-solid-violet: var(--ds-color-surface-violet-solid);\n --ds-badge-border-solid-violet: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent);\n\n --ds-badge-color-solid-red: var(--ds-color-text-red-solid);\n --ds-badge-background-color-solid-red: var(--ds-color-surface-red-solid);\n --ds-badge-border-solid-red: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent);\n\n --ds-badge-color-solid-yellow: var(--ds-color-text-yellow-solid);\n --ds-badge-background-color-solid-yellow: var(--ds-color-surface-yellow-solid);\n --ds-badge-border-solid-yellow: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent);\n\n /* Badge sizes */\n --ds-badge-sm-height: var(--ds-size-actions-2xs);\n --ds-badge-sm-padding: 0 var(--ds-space-page-inside-xs);\n --ds-badge-sm-font: var(--ds-font-body-strong-xs);\n\n --ds-badge-md-height: var(--ds-size-actions-xs);\n --ds-badge-md-padding: var(--ds-dimension-tier-2) var(--ds-space-page-inside-s);\n --ds-badge-md-font: var(--ds-font-body-strong-s);\n\n --ds-badge-lg-height: var(--ds-size-actions-s);\n --ds-badge-lg-padding: var(--ds-dimension-tier-3) var(--ds-space-page-inside-m);\n --ds-badge-lg-font: var(--ds-font-body-strong-m);\n\n /* Badge icon sizing and spacing */\n --ds-badge-icon-gap: var(--ds-space-page-inside-2xs);\n --ds-badge-icon-gap-sm: var(--ds-space-page-inside-2xs);\n --ds-badge-icon-gap-md: var(--ds-space-page-inside-2xs);\n --ds-badge-icon-gap-lg: var(--ds-space-page-inside-2xs);\n\n --ds-badge-icon-size-sm: var(--ds-size-icon-xs);\n --ds-badge-icon-size-md: var(--ds-size-icon-s);\n --ds-badge-icon-size-lg: var(--ds-size-icon-m);\n}\n",'[data-color-scheme="legacy"] {\n /* Badge scaling factors */\n --badge-sm-height-scale: 1.67;\n --badge-sm-padding-scale: 2.15;\n --badge-md-height-scale: 1.5;\n --badge-md-padding-scale: 1.5;\n --badge-lg-height-scale: 1.34;\n --badge-lg-padding-scale: 0.91;\n\n /* Badge sizes with legacy scaling */\n --ds-badge-sm-height: calc(var(--ds-size-actions-2xs) * var(--badge-sm-height-scale));\n --ds-badge-sm-padding: 0 calc(var(--ds-space-page-inside-xs) * var(--badge-sm-padding-scale));\n --ds-badge-sm-font: var(--ds-font-body-strong-xs);\n\n --ds-badge-md-height: calc(var(--ds-size-actions-xs) * var(--badge-md-height-scale));\n --ds-badge-md-padding: var(--ds-dimension-tier-2) calc(var(--ds-space-page-inside-s) * var(--badge-md-padding-scale));\n --ds-badge-md-font: var(--ds-font-body-strong-s);\n\n --ds-badge-lg-height: calc(var(--ds-size-actions-m) * var(--badge-lg-height-scale));\n --ds-badge-lg-padding: var(--ds-dimension-tier-3) calc(var(--ds-space-page-inside-m) * var(--badge-lg-padding-scale));\n --ds-badge-lg-font: var(--ds-font-body-strong-l);\n\n /*\n * Compensate for legacy\'s scaled-down primitive tokens (legacy size-icon-xs\n * is 0.5rem vs 0.75rem in the new theme, space-page-inside-2xs is 0.125rem\n * vs 0.25rem). Bumping each by one tier here keeps badge icons and the\n * icon/text gap at the same physical size as the new theme:\n * icons: sm=12px, md=16px, lg=20px\n * gap: 4px across all sizes\n */\n --ds-badge-icon-size-sm: var(--ds-size-icon-s);\n --ds-badge-icon-size-md: var(--ds-size-icon-m);\n --ds-badge-icon-size-lg: var(--ds-size-icon-l);\n\n --ds-badge-icon-gap-sm: var(--ds-space-page-inside-xs);\n --ds-badge-icon-gap-md: var(--ds-space-page-inside-xs);\n --ds-badge-icon-gap-lg: var(--ds-space-page-inside-xs);\n}\n',":root {\n /* Banner backgrounds */\n --ds-banner-background-color-feature: var(--ds-color-surface-moderate);\n --ds-banner-background-color-ai: var(--ds-color-surface-violet-moderate);\n --ds-banner-background-color-success: var(--ds-color-surface-success-main);\n --ds-banner-background-color-warning: var(--ds-color-surface-warning-main);\n --ds-banner-background-color-info: var(--ds-color-surface-blue-moderate);\n --ds-banner-background-color-error: var(--ds-color-surface-error-moderate);\n\n /* Banner borders */\n --ds-banner-border-color-feature: var(--ds-color-border-soft);\n --ds-banner-border-color-ai: var(--ds-color-border-violet-outline);\n --ds-banner-border-color-success: var(--ds-color-border-success-soft);\n --ds-banner-border-color-warning: var(--ds-color-border-warning-soft);\n --ds-banner-border-color-info: var(--ds-color-border-blue-outline);\n --ds-banner-border-color-error: var(--ds-color-border-error-soft);\n\n /* Banner icon colors */\n --ds-banner-icon-color-feature: var(--ds-color-text-soft);\n --ds-banner-icon-color-ai: var(--ds-color-text-violet-outline);\n --ds-banner-icon-color-success: var(--ds-color-text-success-main);\n --ds-banner-icon-color-warning: var(--ds-color-text-warning-main);\n --ds-banner-icon-color-info: var(--ds-color-text-blue-outline);\n --ds-banner-icon-color-error: var(--ds-color-text-error-main);\n\n /* Banner text */\n --ds-banner-text-color: var(--ds-color-text-main);\n --ds-banner-close-button-color: var(--ds-color-text-soft);\n\n /* Banner layout */\n --ds-banner-padding: var(--ds-space-page-inside-s);\n --ds-banner-gap: var(--ds-space-page-inside-xs);\n --ds-banner-border-radius: var(--ds-radius-m);\n --ds-banner-border-width: var(--ds-border-width-tier-2);\n --ds-banner-close-button-size: var(--ds-size-actions-xs); /* WCAG 2.5.8 â interactive target size */\n --ds-banner-font: var(--ds-font-body-default-s);\n --ds-banner-icon-size: var(--ds-size-icon-m);\n}\n",':root[data-color-scheme="legacy"],\ndiv[data-color-scheme="legacy"] {\n --ds-banner-icon-size: var(--ds-size-icon-l);\n --ds-banner-padding: calc(var(--ds-space-page-inside-xs) + var(--ds-space-page-inside-s));\n --ds-banner-gap: var(--ds-space-page-inside-s);\n}\n',':root {\n /* Button base */\n --ds-button-gap: var(--ds-space-page-inside-xs);\n --ds-button-border-radius: var(--ds-radius-m);\n --ds-button-outline: none;\n --ds-button-cursor: pointer;\n --ds-button-cursor-disabled: not-allowed;\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "progress" with a semantic token */\n --ds-button-cursor-loading: progress;\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0.7" with a semantic token */\n --ds-button-opacity-loading: 0.7;\n\n /* Button sizes */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "1.6rem" with a semantic token */\n --ds-button-xs-height: 1.6rem; /* no semantic size token â matches default line-height */\n --ds-button-xs-padding-vertical: 0;\n --ds-button-xs-padding-horizontal: var(--ds-space-page-inside-2xs);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "1.6rem" with a semantic token */\n --ds-button-xs-icon-width: 1.6rem; /* no semantic size token â matches default line-height */\n --ds-button-xs-icon-padding: var(--ds-space-page-inside-2xs);\n\n --ds-button-sm-height: var(--ds-size-actions-l);\n --ds-button-sm-padding-vertical: var(--ds-space-page-inside-xs);\n --ds-button-sm-padding-horizontal: var(--ds-space-page-inside-s);\n --ds-button-sm-icon-width: var(--ds-size-actions-l);\n --ds-button-sm-icon-padding: var(--ds-space-page-inside-xs);\n\n --ds-button-md-height: var(--ds-size-actions-xl);\n --ds-button-md-padding-vertical: var(--ds-space-page-inside-s);\n --ds-button-md-padding-horizontal: var(--ds-space-page-inside-m);\n --ds-button-md-icon-width: var(--ds-size-actions-xl);\n --ds-button-md-icon-padding: var(--ds-space-page-inside-s);\n\n --ds-button-lg-height: var(--ds-size-actions-2xl);\n --ds-button-lg-padding-vertical: var(--ds-space-page-inside-m);\n --ds-button-lg-padding-horizontal: var(--ds-space-page-inside-l);\n --ds-button-lg-icon-width: var(--ds-size-actions-2xl);\n --ds-button-lg-icon-padding: var(--ds-space-page-inside-m);\n\n --ds-button-xl-height: var(--ds-size-actions-3xl);\n --ds-button-xl-padding-vertical: var(--ds-space-page-inside-l);\n --ds-button-xl-padding-horizontal: var(--ds-space-page-inside-xl);\n --ds-button-xl-icon-width: var(--ds-size-actions-3xl);\n --ds-button-xl-icon-padding: var(--ds-space-page-inside-l);\n\n /* Button fonts */\n --ds-button-font-xs: var(--ds-font-body-strongest-s);\n --ds-button-font-sm: var(--ds-font-body-strongest-s);\n --ds-button-font-md: var(--ds-font-body-strongest-s);\n --ds-button-font-lg: var(--ds-font-body-strongest-m);\n --ds-button-font-xl: var(--ds-font-body-strongest-m);\n\n /* Button disabled */\n --ds-button-disabled-color: var(--ds-color-text-disabled);\n --ds-button-disabled-background-color: var(--ds-color-surface-disabled);\n --ds-button-disabled-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled);\n\n /* Button Primary
3901*/\n --ds-button-primary-color: var(--ds-color-text-main-onbrand);\n --ds-button-primary-background-color: var(--ds-color-surface-brand-solid);\n --ds-button-primary-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-brand-solid);\n --ds-button-primary-background-color-hovered: var(--ds-color-surface-brand-solid-hover);\n --ds-button-primary-background-color-activated: var(--ds-color-surface-brand-solid);\n\n --ds-button-primary-focused-shadow: var(--ds-shadow-focus-ring-actions);\n /* Button Secondary */\n --ds-button-secondary-color: var(--ds-color-text-main);\n --ds-button-secondary-background-color: var(--ds-color-surface-main);\n --ds-button-secondary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main);\n --ds-button-secondary-background-color-hovered: var(--ds-color-surface-main-hover);\n --ds-button-secondary-background-color-activated: var(--ds-color-surface-main);\n\n --ds-button-secondary-focused-shadow: var(--ds-shadow-focus-ring-actions);\n /* Button Tertiary */\n --ds-button-tertiary-color: var(--ds-color-text-brand-main);\n --ds-button-tertiary-background-color: var(--ds-color-surface-brand-main);\n --ds-button-tertiary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-brand-soft);\n --ds-button-tertiary-background-color-hovered: var(--ds-color-surface-brand-moderate);\n --ds-button-tertiary-background-color-activated: var(--ds-color-surface-brand-main);\n\n --ds-button-tertiary-focused-shadow: var(--ds-shadow-focus-ring-actions);\n /* Button Delete Primary */\n --ds-button-delete-primary-color: var(--ds-color-text-white);\n --ds-button-delete-primary-background-color: var(--ds-color-surface-error-solid);\n --ds-button-delete-primary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent);\n --ds-button-delete-primary-background-color-hovered: var(--ds-color-surface-error-solid-hover);\n --ds-button-delete-primary-background-color-activated: var(--ds-color-surface-error-solid);\n\n --ds-button-delete-primary-focused-shadow: var(--ds-shadow-focus-ring-error);\n /* Button Delete Secondary */\n --ds-button-delete-secondary-color: var(--ds-color-text-error-main);\n --ds-button-delete-secondary-background-color: var(--ds-color-surface-main);\n --ds-button-delete-secondary-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-error-solid);\n --ds-button-delete-secondary-background-color-hovered: var(--ds-color-surface-error-main);\n --ds-button-delete-secondary-background-color-activated: var(--ds-color-surface-main);\n\n --ds-button-delete-secondary-focused-shadow: var(--ds-shadow-focus-ring-error);\n /* Button Link */\n --ds-button-link-color: var(--ds-color-foreground-brand-main);\n --ds-button-link-background-color: transparent;\n --ds-button-link-border: none;\n --ds-button-link-background-color-hovered: var(--ds-color-surface-main-hover);\n --ds-button-link-background-color-activated: var(--ds-color-surface-main);\n\n --ds-button-link-focused-shadow: var(--ds-shadow-focus-ring-actions);\n /* Button Link Secondary */\n --ds-button-link-secondary-color: var(--ds-color-text-main);\n --ds-button-link-secondary-background-color: transparent;\n --ds-button-link-secondary-border: none;\n --ds-button-link-secondary-color-hovered: var(--ds-color-text-moderate-hover);\n --ds-button-link-secondary-background-color-hovered: var(--ds-color-surface-main-hover);\n --ds-button-link-secondary-background-color-activated: var(--ds-color-surface-main);\n\n --ds-button-link-secondary-focused-shadow: var(--ds-shadow-focus-ring-actions);\n /* Icon wrapper */\n --ds-button-icon-max-width: var(--ds-size-icon-m);\n --ds-button-icon-max-height: var(--ds-size-icon-m);\n}\n',"/*\n * Deprecated token aliases â DO NOT edit manually.\n * Generated by: pnpm deprecate-token\n *\n * Each alias maps an old token name to the current one via var().\n * This file is loaded in :root for global backward compatibility.\n */\n:root {\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-primary-background-color-hovered */\n --ds-button-primary-background-color-hover: var(--ds-button-primary-background-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-primary-background-color-activated */\n --ds-button-primary-background-color-active: var(--ds-button-primary-background-color-activated);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-primary-focused-shadow */\n --ds-button-primary-focus-shadow: var(--ds-button-primary-focused-shadow);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-secondary-background-color-hovered */\n --ds-button-secondary-background-color-hover: var(--ds-button-secondary-background-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-secondary-background-color-activated */\n --ds-button-secondary-background-color-active: var(--ds-button-secondary-background-color-activated);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-secondary-focused-shadow */\n --ds-button-secondary-focus-shadow: var(--ds-button-secondary-focused-shadow);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-tertiary-background-color-hovered */\n --ds-button-tertiary-background-color-hover: var(--ds-button-tertiary-background-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-tertiary-background-color-activated */\n --ds-button-tertiary-background-color-active: var(--ds-button-tertiary-background-color-activated);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-tertiary-focused-shadow */\n --ds-button-tertiary-focus-shadow: var(--ds-button-tertiary-focused-shadow);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-primary-background-color-hovered */\n --ds-button-delete-primary-background-color-hover: var(--ds-button-delete-primary-background-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-primary-background-color-activated */\n --ds-button-delete-primary-background-color-active: var(--ds-button-delete-primary-background-color-activated);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-primary-focused-shadow */\n --ds-button-delete-primary-focus-shadow: var(--ds-button-delete-primary-focused-shadow);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-secondary-background-color-hovered */\n --ds-button-delete-secondary-background-color-hover: var(--ds-button-delete-secondary-background-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-secondary-background-color-activated */\n --ds-button-delete-secondary-background-color-active: var(--ds-button-delete-secondary-background-color-activated);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-delete-secondary-focused-shadow */\n --ds-button-delete-secondary-focus-shadow: var(--ds-button-delete-secondary-focused-shadow);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-background-color-hovered */\n --ds-button-link-background-color-hover: var(--ds-button-link-background-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-background-color-activated */\n --ds-button-link-background-color-active: var(--ds-button-link-background-color-activated);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-focused-shadow */\n --ds-button-link-focus-shadow: var(--ds-button-link-focused-shadow);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-secondary-color-hovered */\n --ds-button-link-secondary-color-hover: var(--ds-button-link-secondary-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-secondary-background-color-hovered */\n --ds-button-link-secondary-background-color-hover: var(--ds-button-link-secondary-background-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-secondary-background-color-activated */\n --ds-button-link-secondary-background-color-active: var(--ds-button-link-secondary-background-color-activated);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-button-link-secondary-focused-shadow */\n --ds-button-link-secondary-focus-shadow: var(--ds-button-link-secondary-focused-shadow);\n}\n",'/* Legacy theme overrides */\n:root[data-color-scheme="legacy"],\ndiv[data-color-scheme="legacy"] {\n /* Button base */\n --ds-button-gap: var(--ds-space-page-inside-xs);\n --ds-button-border-radius: var(--ds-radius-m);\n --ds-button-outline: none;\n --ds-button-cursor: pointer;\n --ds-button-cursor-disabled: not-allowed;\n --ds-button-cursor-loading: progress;\n --ds-button-opacity-loading: 0.7;\n\n /* Button sizes */\n --ds-button-xs-height: 1.6rem; /* no semantic size token â matches default line-height */\n --ds-button-xs-padding-vertical: 0;\n --ds-button-xs-padding-horizontal: var(--ds-space-page-inside-2xs);\n --ds-button-xs-icon-width: 1.6rem; /* no semantic size token â matches default line-height */\n --ds-button-xs-icon-padding: var(--ds-space-page-inside-2xs);\n\n --ds-button-sm-height: var(--ds-size-actions-l);\n --ds-button-sm-padding-vertical: var(--ds-space-page-inside-xs);\n --ds-button-sm-padding-horizontal: var(--ds-space-page-inside-s);\n --ds-button-sm-icon-width: var(--ds-size-actions-l);\n --ds-button-sm-icon-padding: var(--ds-space-page-inside-xs);\n\n --ds-button-md-height: var(--ds-size-actions-xl);\n --ds-button-md-padding-vertical: var(--ds-space-page-inside-s);\n --ds-button-md-padding-horizontal: 0.75rem;\n --ds-button-md-icon-width: var(--ds-size-actions-xl);\n --ds-button-md-icon-padding: var(--ds-space-page-inside-s);\n\n --ds-button-lg-height: var(--ds-size-actions-2xl);\n --ds-button-lg-padding-vertical: var(--ds-space-page-inside-m);\n --ds-button-lg-padding-horizontal: 1rem;\n --ds-button-lg-icon-width: var(--ds-size-actions-2xl);\n --ds-button-lg-icon-padding: var(--ds-space-page-inside-m);\n\n --ds-button-xl-height: var(--ds-size-actions-3xl);\n --ds-button-xl-padding-vertical: var(--ds-space-page-inside-l);\n --ds-button-xl-padding-horizontal: 1.25rem;\n --ds-button-xl-icon-width: var(--ds-size-actions-3xl);\n --ds-button-xl-icon-padding: var(--ds-space-page-inside-l);\n\n /* Button fonts */\n --ds-button-font-xs: var(--ds-font-body-default-s);\n --ds-button-font-sm: var(--ds-font-body-default-s);\n --ds-button-font-md: var(--ds-font-body-default-s);\n --ds-button-font-lg: var(--ds-font-body-default-m);\n --ds-button-font-xl: var(--ds-font-body-default-m);\n\n /* Button disabled */\n --ds-button-disabled-color: var(--ds-color-text-disabled);\n --ds-button-disabled-background-color: var(--ds-color-surface-disabled);\n --ds-button-disabled-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled);\n\n /* Button Primary */\n --ds-button-primary-color: var(--ds-color-text-main-onbrand);\n --ds-button-primary-background-color: var(--ds-color-surface-brand-solid);\n --ds-button-primary-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-brand-solid);\n --ds-button-primary-background-color-hover: var(--ds-color-surface-brand-solid-hover);\n --ds-button-primary-background-color-hovered: var(--ds-color-surface-brand-solid-hover);\n --ds-button-primary-background-color-active: var(--ds-color-surface-brand-solid);\n --ds-button-primary-background-color-activated: var(--ds-color-surface-brand-solid);\n --ds-button-primary-focus-shadow: var(--ds-shadow-focus-ring-actions);\n --ds-button-primary-focused-shadow: var(--ds-shadow-focus-ring-actions);\n\n /* Button Secondary */\n --ds-button-secondary-color: var(--ds-color-text-main);\n --ds-button-secondary-background-color: var(--ds-color-surface-main);\n --ds-button-secondary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main);\n --ds-button-secondary-background-color-hover: var(--ds-color-surface-main-hover);\n --ds-button-secondary-background-color-hovered: var(--ds-color-surface-main-hover);\n --ds-button-secondary-background-color-active: var(--ds-color-surface-main);\n --ds-button-secondary-background-color-activated: var(--ds-color-surface-main);\n --ds-button-secondary-focus-shadow: var(--ds-shadow-focus-ring-actions);\n --ds-button-secondary-focused-shadow: var(--ds-shadow-focus-ring-actions);\n\n /* Button Tertiary */\n --ds-button-tertiary-color: var(--ds-color-text-brand-main);\n --ds-button-tertiary-background-color: var(--ds-color-surface-brand-main);\n --ds-button-tertiary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-brand-soft);\n --ds-button-tertiary-background-color-hover: var(--ds-color-surface-brand-moderate);\n --ds-button-tertiary-background-color-hovered: var(--ds-color-surface-brand-moderate);\n --ds-button-tertiary-background-color-active: var(--ds-color-surface-brand-main);\n --ds-button-tertiary-background-color-activated: var(--ds-color-surface-brand-main);\n --ds-button-tertiary-focus-shadow: var(--ds-shadow-focus-ring-actions);\n --ds-button-tertiary-focused-shadow: var(--ds-shadow-focus-ring-actions);\n\n /* Button Delete Primary */\n --ds-button-delete-primary-color: var(--ds-color-text-white);\n --ds-button-delete-primary-background-color: var(--ds-color-surface-error-solid);\n --ds-button-delete-primary-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-transparent);\n --ds-button-delete-primary-background-color-hover: var(--ds-color-surface-error-solid-hover);\n --ds-button-delete-primary-background-color-hovered: var(--ds-color-surface-error-solid-hover);\n --ds-button-delete-primary-background-color-active: var(--ds-color-surface-error-solid);\n --ds-button-delete-primary-background-color-activated: var(--ds-color-surface-error-solid);\n --ds-button-delete-primary-focus-shadow: var(--ds-shadow-focus-ring-error);\n --ds-button-delete-primary-focused-shadow: var(--ds-shadow-focus-ring-error);\n\n /* Button Delete Secondary */\n --ds-button-delete-secondary-color: var(--ds-color-text-error-main);\n --ds-button-delete-secondary-background-color: var(--ds-color-surface-main);\n --ds-button-delete-secondary-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-error-solid);\n --ds-button-delete-secondary-background-color-hover: var(--ds-color-surface-error-main);\n --ds-button-delete-secondary-background-color-hovered: var(--ds-color-surface-error-main);\n --ds-button-delete-secondary-background-color-active: var(--ds-color-surface-main);\n --ds-button-delete-secondary-background-color-activated: var(--ds-color-surface-main);\n --ds-button-delete-secondary-focus-shadow: var(--ds-shadow-focus-ring-error);\n --ds-button-delete-secondary-focused-shadow: var(--ds-shadow-focus-ring-error);\n\n /* Button Link */\n --ds-button-link-color: var(--ds-color-foreground-brand-main);\n --ds-button-link-background-color: transparent;\n --ds-button-link-border: none;\n --ds-button-link-background-color-hover: var(--ds-color-surface-main-hover);\n --ds-button-link-background-color-hovered: var(--ds-color-surface-main-hover);\n --ds-button-link-background-color-active: var(--ds-color-surface-main);\n --ds-button-link-background-color-activated: var(--ds-color-surface-main);\n --ds-button-link-focus-shadow: var(--ds-shadow-focus-ring-actions);\n --ds-button-link-focused-shadow: var(--ds-shadow-focus-ring-actions);\n\n /* Button Link Secondary */\n --ds-button-link-secondary-color: var(--ds-color-text-main);\n --ds-button-link-secondary-background-color: transparent;\n --ds-button-link-secondary-border: none;\n --ds-button-link-secondary-color-hover: var(--ds-color-text-moderate-hover);\n --ds-button-link-secondary-color-hovered: var(--ds-color-text-moderate-hover);\n --ds-button-link-secondary-background-color-hover: var(--ds-color-surface-main-hover);\n --ds-button-link-secondary-background-color-hovered: var(--ds-color-surface-main-hover);\n --ds-button-link-seconda
3901ry-background-color-active: var(--ds-color-surface-main);\n --ds-button-link-secondary-background-color-activated: var(--ds-color-surface-main);\n --ds-button-link-secondary-focus-shadow: var(--ds-shadow-focus-ring-actions);\n --ds-button-link-secondary-focused-shadow: var(--ds-shadow-focus-ring-actions);\n\n /* Icon wrapper */\n --ds-button-icon-max-width: var(--ds-size-icon-m);\n --ds-button-icon-max-height: var(--ds-size-icon-m);\n}\n',':root {\n /* ---- Default variant â neutral outlined rounded-rectangle tag (UI Kit "Tag") ---- */\n --ds-chip-default-color: var(--ds-color-text-soft);\n --ds-chip-default-background-color: var(--ds-color-surface-main);\n --ds-chip-default-background-color-hovered: var(--ds-color-surface-main-hover);\n --ds-chip-default-background-color-pressed: var(--ds-color-surface-main-pressed);\n --ds-chip-default-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-grey-outline);\n --ds-chip-default-remove-color: var(--ds-color-foreground-moderate);\n /* Default focus â brand-tinted fill + 2px "selected" inset outline */\n --ds-chip-default-background-color-focused: var(--ds-color-surface-brand-main);\n --ds-chip-default-border-focused: var(--ds-border-width-tier-4) solid var(--ds-color-surface-form-selected);\n\n /* ---- Button variant â solid brand fill (primary-Button palette) ---- */\n --ds-chip-button-color: var(--ds-color-text-main-onbrand);\n --ds-chip-button-background-color: var(--ds-color-surface-brand-solid);\n --ds-chip-button-background-color-hovered: var(--ds-color-surface-brand-solid-hover);\n --ds-chip-button-background-color-pressed: var(--ds-color-surface-brand-solid-hover);\n --ds-chip-button-border: var(--ds-border-width-tier-2) solid var(--ds-color-surface-brand-solid);\n --ds-chip-button-remove-color: var(--ds-color-text-main-onbrand);\n /* White text (not text-brand-main): the meta badge sits on a deep brand shade in every state, so on-brand white keeps AA. */\n --ds-chip-button-meta-color: var(--ds-color-text-main-onbrand);\n /* At rest the badge is one step deeper than the solid fill (solid -> solid-hover): a subtle inset like the default variant\'s badge (surface-main -> surface-moderate), not the near-white brand-moderate. */\n --ds-chip-button-meta-background-color: var(--ds-color-surface-brand-solid-hover);\n /* When the fill darkens to solid-hover (hover/active/focus), the badge takes the brand solid (a step lighter than the darkened fill) so it stays distinct instead of blending into it. Also drives the focused badge in styles.module.css. */\n --ds-chip-button-meta-background-color-hovered: var(--ds-color-surface-brand-solid);\n /* Button focus adopts the hover fill (solid-hover) plus the amber/teal ring; the badge follows via the same hovered token above. No inset "selected" outline â unnecessary on the solid brand fill (the default variant keeps its inset). */\n --ds-chip-button-background-color-focused: var(--ds-color-surface-brand-solid-hover);\n --ds-chip-button-border-focused: none;\n\n /* ---- Shared across variants ---- */\n --ds-chip-focus-ring-shadow: var(--ds-shadow-focus-ring-actions);\n --ds-chip-outline-offset: calc(var(--ds-border-width-tier-4) * -1);\n --ds-chip-background-color-disabled: var(--ds-color-surface-disabled);\n --ds-chip-color-disabled: var(--ds-color-text-disabled);\n --ds-chip-border-disabled: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled);\n --ds-chip-max-width: 12.5rem; /* no semantic max-width token â component cap before the label truncates */\n --ds-chip-border-radius: var(--ds-radius-s);\n\n /* Invalid (error) state â red border + tinted fill, conveyed via aria-invalid (mirrors input\'s -error tokens). Overrides the variant palette. */\n --ds-chip-color-error: var(--ds-color-text-error-main);\n --ds-chip-background-color-error: var(--ds-color-surface-error-main);\n --ds-chip-border-error: var(--ds-border-width-tier-2) solid var(--ds-color-border-error-soft);\n\n /* Meta â contained grey badge for a count or short label (Figma "_Tag count" atom) */\n --ds-chip-meta-color: var(--ds-color-text-soft);\n --ds-chip-meta-color-disabled: var(--ds-color-text-disabled);\n --ds-chip-meta-background-color: var(--ds-color-surface-moderate);\n --ds-chip-meta-background-color-focused: var(--ds-color-surface-brand-moderate);\n --ds-chip-meta-border-radius: var(--ds-radius-xs);\n --ds-chip-meta-padding-sm: 0 var(--ds-space-page-inside-2xs);\n --ds-chip-meta-padding-md: 0 var(--ds-space-page-inside-2xs);\n --ds-chip-meta-padding-lg: 0 var(--ds-space-page-inside-xs);\n --ds-chip-meta-padding-xl: 0 var(--ds-space-page-inside-xs);\n --ds-chip-meta-font-sm: var(--ds-font-body-strong-xs);\n --ds-chip-meta-font-md: var(--ds-font-body-strong-s);\n --ds-chip-meta-font-lg: var(--ds-font-body-strong-m);\n --ds-chip-meta-font-xl: var(--ds-font-body-strong-m);\n\n /* Height (20/24/28/32 = tier-8/9/10/11) */\n --ds-chip-height-sm: var(--ds-dimension-tier-8);\n --ds-chip-height-md: var(--ds-dimension-tier-9);\n --ds-chip-height-lg: var(--ds-dimension-tier-10);\n --ds-chip-height-xl: var(--ds-dimension-tier-11);\n\n /* Inline padding symmetric (8/8/8/12) â base when no asymmetric trigger is present */\n --ds-chip-padding-inline-sm
3901: var(--ds-space-page-inside-xs);\n --ds-chip-padding-inline-md: var(--ds-space-page-inside-xs);\n --ds-chip-padding-inline-lg: var(--ds-space-page-inside-xs);\n --ds-chip-padding-inline-xl: var(--ds-space-page-inside-s);\n\n /* Inline-start padding when leading icon is present (6px sm/md, unchanged lg/xl) */\n --ds-chip-padding-inline-start-sm: var(--ds-dimension-tier-4);\n --ds-chip-padding-inline-start-md: var(--ds-dimension-tier-4);\n --ds-chip-padding-inline-start-lg: var(--ds-space-page-inside-xs);\n --ds-chip-padding-inline-start-xl: var(--ds-space-page-inside-s);\n\n /* Inline-end padding when meta or remove is present (6px sm/md, unchanged lg/xl) */\n --ds-chip-padding-inline-end-sm: var(--ds-dimension-tier-4);\n --ds-chip-padding-inline-end-md: var(--ds-dimension-tier-4);\n --ds-chip-padding-inline-end-lg: var(--ds-space-page-inside-xs);\n --ds-chip-padding-inline-end-xl: var(--ds-space-page-inside-s);\n\n /* Padding (block 4px at sm/md, 6px at lg/xl) */\n --ds-chip-padding-sm: var(--ds-space-page-inside-2xs) var(--ds-chip-padding-inline-sm);\n --ds-chip-padding-md: var(--ds-space-page-inside-2xs) var(--ds-chip-padding-inline-md);\n --ds-chip-padding-lg: var(--ds-dimension-tier-4) var(--ds-chip-padding-inline-lg);\n --ds-chip-padding-xl: var(--ds-dimension-tier-4) var(--ds-chip-padding-inline-xl);\n\n /* Gap (2xs = 4px at every size) */\n --ds-chip-gap-sm: var(--ds-space-page-inside-2xs);\n --ds-chip-gap-md: var(--ds-space-page-inside-2xs);\n --ds-chip-gap-lg: var(--ds-space-page-inside-2xs);\n --ds-chip-gap-xl: var(--ds-space-page-inside-2xs);\n\n /* Label font (strong-xs/s/m/m = 12/14/16/16) */\n --ds-chip-font-sm: var(--ds-font-body-strong-xs);\n --ds-chip-font-md: var(--ds-font-body-strong-s);\n --ds-chip-font-lg: var(--ds-font-body-strong-m);\n --ds-chip-font-xl: var(--ds-font-body-strong-m);\n\n /* Leading icon glyph (12/16/16/16) */\n --ds-chip-icon-size-sm: var(--ds-size-icon-xs);\n --ds-chip-icon-size-md: var(--ds-size-icon-s);\n --ds-chip-icon-size-lg: var(--ds-size-icon-s);\n --ds-chip-icon-size-xl: var(--ds-size-icon-s);\n\n /* Remove (x) glyph (12/16/16/16 = tier-6/7/7/7) */\n --ds-chip-remove-size-sm: var(--ds-dimension-tier-6);\n --ds-chip-remove-size-md: var(--ds-dimension-tier-7);\n --ds-chip-remove-size-lg: var(--ds-dimension-tier-7);\n --ds-chip-remove-size-xl: var(--ds-dimension-tier-7);\n}\n','[data-color-scheme="legacy"] {\n /*\n * Legacy "Chip" Tag scale, finalized from the leg-chips Figma\n * (docs/legacy/components/chip.md): height 20/24/28/32, label font\n * 12/14/16/16, symmetric padding 8/8\xb78/8\xb78/8\xb712/12 (6px on icon/meta/remove\n * sides for sm/md), constant 4px gap.\n *\n * Legacy downshifts the size/space ladders (~half the new theme), so the\n * shared tokens in chip.css would render the chip too small here. We re-hit\n * the spec px by picking the legacy token whose VALUE matches the target:\n * height climbs the actions ladder to s/m/l/2xl; 8px = space-page-inside-s,\n * 12px = 0.75rem, 6px = 0.375rem.\n * Colors â incl. the violet->teal remap and the teal focus ring\n * (shared --ds-shadow-focus-ring-actions, kept system-consistent) â still\n * come from chip.css\'s aliases and are intentionally not touched here.\n *\n * NOT covered by check-legacy-sync â keep in step with chip.css by hand.\n */\n\n /* Height â climb the actions ladder to undo legacy\'s downshift (-> 20/24/28/32) */\n --ds-chip-height-sm: var(--ds-size-actions-s);\n --ds-chip-height-md: var(--ds-size-actions-m);\n --ds-chip-height-lg: var(--ds-size-actions-l);\n --ds-chip-height-xl: var(--ds-size-actions-xl);\n\n /* Inter-element gap â constant 4px (legacy -2xs is 2px, so step up one rung to -xs) */\n --ds-chip-gap-sm: var(--ds-space-page-inside-xs);\n --ds-chip-gap-md: var(--ds-space-page-inside-xs);\n --ds-chip-gap-lg: var(--ds-space-page-inside-xs);\n --ds-chip-gap-xl: var(--ds-space-page-inside-xs);\n\n /* Inline padding symmetric (8/8/8/12) â base when no asymmetric trigger is present */\n --ds-chip-padding-inline-sm
3901: var(--ds-space-page-inside-s);\n --ds-chip-padding-inline-md: var(--ds-space-page-inside-s);\n --ds-chip-padding-inline-lg: var(--ds-space-page-inside-s);\n --ds-chip-padding-inline-xl: 0.75rem;\n\n /* Inline-start padding when leading icon is present (6px sm/md = 0.375rem, unchanged lg/xl) */\n --ds-chip-padding-inline-start-sm: 0.375rem;\n --ds-chip-padding-inline-start-md: 0.375rem;\n --ds-chip-padding-inline-start-lg: var(--ds-space-page-inside-s);\n --ds-chip-padding-inline-start-xl: 0.75rem;\n\n /* Inline-end padding when meta or remove is present (6px sm/md = 0.375rem, unchanged lg/xl) */\n --ds-chip-padding-inline-end-sm: 0.375rem;\n --ds-chip-padding-inline-end-md: 0.375rem;\n --ds-chip-padding-inline-end-lg: var(--ds-space-page-inside-s);\n --ds-chip-padding-inline-end-xl: 0.75rem;\n\n /* Padding (block 4px at sm/md, 6px at lg/xl) */\n --ds-chip-padding-sm: var(--ds-space-page-inside-xs) var(--ds-chip-padding-inline-sm);\n --ds-chip-padding-md: var(--ds-space-page-inside-xs) var(--ds-chip-padding-inline-md);\n --ds-chip-padding-lg: 0.375rem var(--ds-chip-padding-inline-lg);\n --ds-chip-padding-xl: 0.375rem var(--ds-chip-padding-inline-xl);\n\n /* Meta padding (0 4px at sm/md, 0 8px at lg/xl) */\n --ds-chip-meta-padding-sm: 0 var(--ds-space-page-inside-xs);\n --ds-chip-meta-padding-md: 0 var(--ds-space-page-inside-xs);\n --ds-chip-meta-padding-lg: 0 var(--ds-space-page-inside-s);\n --ds-chip-meta-padding-xl: 0 var(--ds-space-page-inside-s);\n\n /*\n * Icon/glyph sizing â legacy icon primitives are smaller, so bump a rung to re-hit the\n * spec px. Leading icon = 12/16/16/16 (icon-s/m/m/m). The remove (x) glyphs default to\n * 12/16/16/16; legacy tier-6/7 would halve them, so re-point to icon-s/m/m/m.\n */\n --ds-chip-icon-size-sm: var(--ds-size-icon-s);\n --ds-chip-icon-size-md: var(--ds-size-icon-m);\n --ds-chip-icon-size-lg: var(--ds-size-icon-m);\n --ds-chip-icon-size-xl: var(--ds-size-icon-m);\n\n --ds-chip-remove-size-sm: var(--ds-size-icon-s);\n --ds-chip-remove-size-md: var(--ds-size-icon-m);\n --ds-chip-remove-size-lg: var(--ds-size-icon-m);\n --ds-chip-remove-size-xl: var(--ds-size-icon-m);\n}\n',':root {\n /* Root */\n /* Actual for small screens */\n --ds-dialog-max-width: calc(100vw - var(--ds-space-page-inside-m) * 2);\n --ds-dialog-max-height: calc(100vh - var(--ds-space-page-inside-m) * 2);\n\n /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-" */\n --ds-dialog--fullscreen-inset: var(--ds-space-page-inside-m);\n\n /* space between header and body, and between body and footer */\n --ds-dialog-space-inside: var(--ds-space-page-inside-l);\n\n /* border between header and body, and between body and footer */\n --ds-dialog-border: none;\n\n /* border radius of the dialog */\n --ds-dialog-content-border-radius: var(--ds-radius-2xl);\n\n /* padding of the main content */\n --ds-dialog-padding-top: var(--ds-dialog-space-inside);\n --ds-dialog-padding-bottom: var(--ds-dialog-space-inside);\n --ds-dialog-padding-right: var(--ds-dialog-space-inside);\n --ds-dialog-padding-left: var(--ds-dialog-space-inside);\n\n /* Overlay */\n --ds-dialog-backdrop-z-index: var(--ds-z-index-tier-3);\n --ds-dialog-backdrop-background-color: var(--ds-blur-default-background-color);\n --ds-dialog-backdrop-backdrop-filter: var(--ds-blur-default-background-filter);\n\n /* Content */\n --ds-dialog-content-z-index: var(--ds-z-index-tier-4);\n --ds-dialog-content-background-color: var(--ds-color-surface-main);\n --ds-dialog-content-box-shadow: var(--ds-shadow-standard-m);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-"; R7: replace "20rem" with a semantic token */\n --ds-dialog--size-xs: 20rem;\n /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-"; R7: replace "30rem" with a semantic token */\n --ds-dialog--size-s: 30rem;\n /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-"; R7: replace "45rem" with a semantic token */\n --ds-dialog--size-m: 45rem;\n /* stylelint-disable-next-line smartling-ds/token-naming -- R3: replace "--" with "-"; R7: replace "81rem" with a semantic token */\n --ds-dialog--size-l: 81rem;\n\n /* Header */\n --ds-dialog-header-padding-bottom: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-header-border-bottom: var(--ds-dialog-border);\n --ds-dialog-header-padding-right: var(--ds-dialog-padding-right);\n --ds-dialog-header-padding-left: var(--ds-dialog-padding-left);\n\n /* Title */\n --ds-dialog-title-color: var(--ds-color-text-main);\n --ds-dialog-title-font-size: var(--ds-font-heading-xs);\n\n /* Description */\n --ds-dialog-description-color: var(--ds-color-text-main);\n --ds-dialog-description-font: var(--ds-font-body-default-m);\n\n /* Body */\n --ds-dialog-body-color: var(--ds-color-text-soft);\n --ds-dialog-body-font: var(--ds-font-body-default-m);\n --ds-dialog-body-padding-size: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-body-with-scrollbar-padding-right: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-body-with-scrollbar-padding-left: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-body-with-scrollbar-box-shadow: var(--ds-shadow-focus-ring-actions);\n --ds-dialog-body-border-radius: var(--ds-radius-m);\n --ds-dialog-body-padding-right: calc(var(--ds-dialog-padding-right) / 2);\n --ds-dialog-body-padding-left: calc(var(--ds-dialog-padding-left) / 2);\n --ds-dialog-body-margin-right: calc(var(--ds-dialog-padding-right) / 2);\n --ds-dialog-body-margin-left: calc(var(--ds-dialog-padding-left) / 2);\n --ds-dialog-body-gap: calc(var(--ds-dialog-space-inside) / 2);\n\n /* Form Dialog Body */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R2: component "form" does not match file "dialog.css" */\n --ds-form-dialog-description-font: var(--ds-font-body-default-m);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R2: component "form" does not match file "dialog.css" */\n --ds-form-dialog-body-font: var(--ds-font-body-default-m);\n\n\n /* Footer */\n --ds-dialog-footer-padding-top: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-footer-border-top: var(--ds-dialog-border);\n --ds-dialog-footer-gap: var(--ds-space-page-inside-s);\n --ds-dialog-footer-margin-right: var(--ds-dialog-padding-right);\n --ds-dialog-footer-margin-left: var(--ds-dialog-padding-left);\n --ds-dialog-footer-justify-content: flex-end;\n\n /* Close */\n --ds-dialog-close-button-size: var(--ds-size-actions-m);\n --ds-dialog-close-button-top: calc(var(--ds-space-page-inside-l) - 0.2rem);\n --ds-dialog-close-button-right: var(--ds-space-page-inside-m);\n --ds-dialog-close-button-color: var(--ds-color-foreground-moderate);\n}\n','[data-color-scheme="legacy"] {\n /* Root */\n /* Actual for small screens */\n --ds-dialog-max-width: calc(100vw - var(--ds-space-page-inside-m) * 2);\n --ds-dialog-max-height: calc(100vh - var(--ds-space-page-inside-m) * 2);\n\n --ds-dialog--fullscreen-inset: var(--ds-space-page-inside-xl) var(--ds-space-page-inside-xl) var(--ds-space-page-inside-2xl) var(--ds-space-page-inside-xl);\n\n /* space between header and body, and between body and footer */\n --ds-dialog-space-inside: 1.5rem;\n\n /* border between header and body, and between body and footer */\n --ds-dialog-border: none;\n\n /* border radius of the dialog */\n --ds-dialog-content-border-radius: var(--ds-radius-l);\n\n /* padding of the main content */\n --ds-dialog-padding-top: var(--ds-dialog-space-inside);\n --ds-dialog-padding-bottom: var(--ds-dialog-space-inside);\n --ds-dialog-padding-right: var(--ds-dialog-space-inside);\n --ds-dialog-padding-left: var(--ds-dialog-space-inside);\n\n /* Overlay */\n --ds-dialog-backdrop-z-index: var(--ds-z-index-tier-3);\n --ds-dialog-backdrop-background-color: var(--ds-blur-default-background-color);\n --ds-dialog-backdrop-backdrop-filter: var(--ds-blur-default-background-filter);\n\n /* Content */\n --ds-dialog-content-z-index: var(--ds-z-index-tier-4);\n --ds-dialog-content-background-color: var(--ds-color-surface-main);\n --ds-dialog-content-box-shadow: var(--ds-shadow-standard-m);\n --ds-dialog--size-xs: 20rem;\n --ds-dialog--size-s: 30rem;\n --ds-dialog--size-m: 50rem;\n --ds-dialog--size-l: 81rem;\n\n /* Header */\n --ds-dialog-header-padding-bottom: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-header-border-bottom: var(--ds-dialog-border);\n --ds-dialog-header-margin-left: 40px;\n --ds-dialog-header-padding-right: var(--ds-dialog-padding-right);\n --ds-dialog-header-padding-left: var(--ds-dialog-padding-left);\n\n /* Title */\n --ds-dialog-title-color: var(--ds-color-text-main);\n --ds-dialog-title-font-size: var(--ds-font-heading-xs);\n\n /* Description */\n --ds-dialog-description-color: var(--ds-color-text-soft);\n --ds-dialog-description-font: var(--ds-font-body-default-m);\n\n /* Form Dialog Description */\n --ds-form-dialog-description-font: var(--ds-font-body-default-s);\n\n /* Body */\n --ds-dialog-body-color: var(--ds-color-text-soft);\n --ds-dialog-body-font: var(--ds-font-body-default-m);\n --ds-dialog-body-padding-size: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-body-with-scrollbar-padding-right: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-body-with-scrollbar-padding-left: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-body-with-scrollbar-box-shadow: var(--ds-shadow-focus-ring-actions);\n --ds-dialog-body-border-radius: var(--ds-radius-m);\n --ds-dialog-body-padding-right: calc(var(--ds-dialog-padding-right) / 2);\n --ds-dialog-body-padding-left: calc(var(--ds-dialog-padding-left) / 2);\n --ds-dialog-body-margin-right: calc(var(--ds-dialog-padding-right) / 2);\n --ds-dialog-body-margin-left: calc(var(--ds-dialog-padding-left) / 2);\n --ds-dialog-body-gap: calc(var(--ds-dialog-space-inside) / 2);\n\n /* Form Dialog Body */\n --ds-form-dialog-body-font: var(--ds-font-body-default-s);\n\n\n /* Footer */\n --ds-dialog-footer-padding-top: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-footer-border-top: var(--ds-dialog-border);\n --ds-dialog-footer-gap: calc(var(--ds-dialog-space-inside) / 2);\n --ds-dialog-footer-margin-right: var(--ds-dialog-padding-right);\n --ds-dialog-footer-margin-left: var(--ds-dialog-padding-left);\n --ds-dialog-footer-justify-content: flex-end;\n\n /* Close */\n --ds-dialog-close-button-size: var(--ds-size-actions-l);\n --ds-dialog-close-button-top: 1.46rem;\n --ds-dialog-close-button-right: 1.2rem;\n --ds-dialog-close-button-color: var(--ds-color-foreground-moderate);\n}\n',':root {\n /* Content */\n --ds-dropdown-menu-content-z-index: var(--ds-z-index-tier-4);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "9rem" with a semantic token */\n --ds-dropdown-menu-content-min-width: 9rem;\n --ds-dropdown-menu-content-color: var(--ds-color-text-soft);\n --ds-dropdown-menu-content-background-color: var(--ds-color-surface-main);\n --ds-dropdown-menu-content-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft);\n --ds-dropdown-menu-content-border-radius: var(--ds-radius-m);\n --ds-dropdown-menu-content-box-shadow: var(--ds-shadow-standard-m);\n\n /* SubContent */\n --ds-dropdown-menu-sub-content-z-index: var(--ds-z-index-tier-5);\n --ds-dropdown-menu-sub-content-color: var(--ds-color-text-soft);\n --ds-dropdown-menu-sub-content-background-color: var(--ds-color-surface-main);\n --ds-dropdown-menu-sub-content-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft);\n --ds-dropdown-menu-sub-content-border-radius: var(--ds-radius-m);\n --ds-dropdown-menu-sub-content-box-shadow: var(--ds-shadow-standard-l);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "7rem" with a semantic token */\n --ds-dropdown-menu-sub-content-min-width: 7rem;\n\n /* Base Item - Common variables for all interactive items */\n --ds-dropdown-menu-item-margin: var(--ds-space-page-inside-2xs) var(--ds-space-page-inside-xs);\n --ds-dropdown-menu-item-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s);\n --ds-dropdown-menu-item-gap: var(--ds-space-page-inside-xs);\n --ds-dropdown-menu-item-font: var(--ds-font-body-strong-s);\n --ds-dropdown-menu-item-border-radius: var(--ds-radius-s);\n --ds-dropdown-menu-item-margin-top: var(--ds-dimension-tier-5);\n --ds-dropdown-menu-item-margin-bottom: var(--ds-dimension-tier-5);\n --ds-dropdown-menu-item-color: var(--ds-color-text-soft);\n --ds-dropdown-menu-item-color-hovered: var(--ds-color-text-soft);\n --ds-dropdown-menu-item-background-color-hovered: var(--ds-color-surface-main-hover);\n --ds-dropdown-menu-item-background-color-activated: var(--ds-color-surface-soft);\n --ds-dropdown-menu-item-opacity-disabled: var(--ds-opacity-medium);\n\n /* CheckboxItem - Component-specific variables */\n --ds-dropdown-menu-checkbox-item-indicator-size: var(--ds-size-icon-s);\n\n /* RadioItem - Component-specific variables */\n --ds-dropdown-menu-radio-item-indicator-size: var(--ds-size-actions-2xs);\n --ds-dropdown-menu-radio-item-dot-size: var(--ds-size-icon-xs);\n --ds-dropdown-menu-radio-item-dot-background: var(--ds-color-surface-brand-solid);\n --ds-dropdown-menu-radio-item-dot-border-radius: var(--ds-radius-full);\n\n /* SubTrigger - Component-specific variables */\n --ds-dropdown-menu-sub-trigger-chevron-size: var(--ds-size-icon-s);\n --ds-dropdown-menu-sub-trigger-inset-padding-left: var(--ds-space-page-inside-xl);\n\n /* Label */\n --ds-dropdown-menu-label-padding: var(--ds-space-page-inside-s) var(--ds-space-page-inside-m);\n --ds-dropdown-menu-label-font: var(--ds-font-body-strongest-s);\n\n /* Separator */\n --ds-dropdown-menu-separator-height: var(--ds-border-width-tier-2);\n --ds-dropdown-menu-separator-background-color: var(--ds-color-border-soft);\n\n /* Shortcut */\n --ds-dropdown-menu-shortcut-color: var(--ds-color-text-moderate);\n --ds-dropdown-menu-shortcut-font: var(--ds-font-body-default-xs);\n\n /* Legacy wrapper */\n /* Legacy Base Item - Common variables for legacy dropdown menu items */\n --ds-dropdown-menu-legacy-base-item-gap: var(--ds-space-page-inside-xs);\n --ds-dropdown-menu-legacy-base-item-indicator-size: var(--ds-size-actions-2xs);\n --ds-dropdown-menu-legacy-base-item-dot-size: var(--ds-size-icon-xs);\n --ds-dropdown-menu-legacy-base-item-dot-background: var(--ds-color-surface-brand-solid);\n --ds-dropdown-menu-legacy-base-item-dot-border-radius: var(--ds-radius-full);\n\n /* Legacy EllipsisDropdownMenu - Component-specific variables */\n --ds-dropdown-menu-legacy-ellipsis-button-border-radius: var(--ds-radius-m);\n}\n\n',"/*\n * Deprecated token aliases â DO NOT edit manually.\n * Generated by: pnpm deprecate-token\n *\n * Each alias maps an old token name to the current one via var().\n * This file is loaded in :root for global backward compatibility.\n */\n:root {\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-dropdown-menu-item-color-hovered */\n --ds-dropdown-menu-item-color-hover: var(--ds-dropdown-menu-item-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-dropdown-menu-item-background-color-hovered */\n --ds-dropdown-menu-item-background-color-hover: var(--ds-dropdown-menu-item-background-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-dropdown-menu-item-background-color-activated */\n --ds-dropdown-menu-item-background-color-active: var(--ds-dropdown-menu-item-background-color-activated);\n}\n",'[data-color-scheme="legacy"] {\n /* Content */\n --ds-dropdown-menu-content-z-index: var(--ds-z-index-tier-4);\n --ds-dropdown-menu-content-min-width: 9rem;\n --ds-dropdown-m
3901enu-content-color: var(--ds-color-text-soft);\n --ds-dropdown-menu-content-background-color: var(--ds-color-surface-main);\n --ds-dropdown-menu-content-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft);\n --ds-dropdown-menu-content-border-radius: var(--ds-radius-m);\n --ds-dropdown-menu-content-box-shadow: var(--ds-shadow-standard-m);\n\n /* SubContent */\n --ds-dropdown-menu-sub-content-z-index: var(--ds-z-index-tier-5);\n --ds-dropdown-menu-sub-content-color: var(--ds-color-text-soft);\n --ds-dropdown-menu-sub-content-background-color: var(--ds-color-surface-main);\n --ds-dropdown-menu-sub-content-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft);\n --ds-dropdown-menu-sub-content-border-radius: var(--ds-radius-m);\n --ds-dropdown-menu-sub-content-box-shadow: var(--ds-shadow-standard-l);\n\n /* Base Item - Common variables for all interactive items */\n --ds-dropdown-menu-item-margin: var(--ds-space-page-inside-2xs) var(--ds-space-page-inside-xs);\n --ds-dropdown-menu-item-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s);\n --ds-dropdown-menu-item-gap: 0.5rem;\n --ds-dropdown-menu-item-font: var(--ds-font-body-default-s);\n --ds-dropdown-menu-item-border-radius: var(--ds-radius-s);\n --ds-dropdown-menu-item-margin-top: var(--ds-dimension-tier-5);\n --ds-dropdown-menu-item-margin-bottom: var(--ds-dimension-tier-5);\n --ds-dropdown-menu-item-color: var(--ds-color-text-soft);\n --ds-dropdown-menu-item-color-hover: var(--ds-color-text-soft);\n --ds-dropdown-menu-item-color-hovered: var(--ds-color-text-soft);\n --ds-dropdown-menu-item-background-color-hover: var(--ds-color-surface-main-hover);\n --ds-dropdown-menu-item-background-color-hovered: var(--ds-color-surface-main-hover);\n --ds-dropdown-menu-item-background-color-active: var(--ds-color-surface-soft);\n --ds-dropdown-menu-item-background-color-activated: var(--ds-color-surface-soft);\n --ds-dropdown-menu-item-opacity-disabled: var(--ds-opacity-medium);\n --ds-dropdown-menu-sub-content-min-width: 7rem;\n\n /* CheckboxItem - Component-specific variables */\n --ds-dropdown-menu-checkbox-item-indicator-size: var(--ds-size-actions-xs);\n\n /* RadioItem - Component-specific variables */\n --ds-dropdown-menu-radio-item-indicator-size: var(--ds-size-actions-xs);\n --ds-dropdown-menu-radio-item-dot-size: 0.625rem;\n --ds-dropdown-menu-radio-item-dot-background: var(--ds-color-surface-brand-solid);\n --ds-dropdown-menu-radio-item-dot-border-radius: var(--ds-radius-full);\n\n /* SubTrigger - Component-specific variables */\n --ds-dropdown-menu-sub-trigger-chevron-size: var(--ds-size-icon-s);\n --ds-dropdown-menu-sub-trigger-inset-padding-left: var(--ds-space-page-inside-xl);\n\n /* Label */\n --ds-dropdown-menu-label-padding: var(--ds-space-page-inside-s) var(--ds-space-page-inside-m);\n --ds-dropdown-menu-label-font: var(--ds-font-body-strongest-s);\n\n /* Separator */\n --ds-dropdown-menu-separator-height: var(--ds-border-width-tier-2);\n --ds-dropdown-menu-separator-background-color: var(--ds-color-border-soft);\n\n /* Shortcut */\n --ds-dropdown-menu-shortcut-color: var(--ds-color-text-moderate);\n --ds-dropdown-menu-shortcut-font: var(--ds-font-body-default-xs);\n\n /* Legacy wrapper */\n /* Legacy Base Item - Common variables for legacy dropdown menu items */\n --ds-dropdown-menu-legacy-base-item-gap: 0.5rem;\n --ds-dropdown-menu-legacy-base-item-indicator-size: var(--ds-size-actions-2xs);\n --ds-dropdown-menu-legacy-base-item-dot-size: 0.625rem;\n --ds-dropdown-menu-legacy-base-item-dot-background: var(--ds-color-surface-brand-solid);\n --ds-dropdown-menu-legacy-base-item-dot-border-radius: var(--ds-radius-full);\n\n /* Legacy EllipsisDropdownMenu - Component-specific variables */\n --ds-dropdown-menu-legacy-ellipsis-button-border-radius: var(--ds-radius-m);\n}\n',':root {\n --ds-input-color: var(--ds-color-text-main);\n --ds-input-color-disabled: var(--ds-color-text-disabled);\n --ds-input-color-read-only: var(--ds-color-text-soft);\n\n --ds-input-placeholder-color: var(--ds-color-text-placeholder);\n\n --ds-input-background-color: var(--ds-color-surface-main);\n --ds-input-background-color-disabled: var(--ds-color-surface-disabled);\n --ds-input-background-color-read-only: var(--ds-color-surface-soft);\n\n --ds-input-border-radius: var(--ds-radius-m);\n\n --ds-input-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main);\n --ds-input-border-focused: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid);\n --ds-input-border-error: var(--ds-border-width-tier-2) solid var(--ds-color-border-error-soft);\n --ds-input-border-disabled: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled);\n --ds-input-border-read-only: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft);\n --ds-input-border-read-only-focused: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid);\n\n --ds-input-shadow: var(--ds-shadow-standard-xs);\n --ds-input-shadow-focused: var(--ds-shadow-focus-ring-actions);\n --ds-input-shadow-read-only-focused: var(--ds-shadow-focus-ring-actions);\n --ds-input-shadow-error-focused: var(--ds-shadow-focus-ring-actions);\n\n --ds-input-outline-offset: calc(var(--ds-border-width-tier-4) * -1);\n\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "border-color 0.2s linear, box-shadow 0.2s linear" with a semantic token */\n --ds-input-transition: border-color 0.2s linear, box-shadow 0.2s linear;\n\n /* File input specific styling */\n --ds-input-file-button-color: var(--ds-color-text-main);\n --ds-input-file-button-background-color: transparent;\n --ds-input-file-button-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main);\n --ds-input-file-button-border-radius: var(--ds-radius-s);\n --ds-input-file-button-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s);\n\n --ds-input-font-sm: var(--ds-font-body-default-s);\n --ds-input-height-sm: var(--ds-size-actions-l);\n --ds-input-padding-vertical-sm: var(--ds-space-page-inside-xs);\n --ds-input-padding-horizontal-sm: var(--ds-space-page-inside-s);\n\n --ds-input-font-md: var(--ds-font-body-default-m);\n --ds-input-height-md: var(--ds-size-actions-xl);\n --ds-input-padding-vertical-md: var(--ds-space-page-inside-xs);\n --ds-input-padding-horizontal-md: var(--ds-space-page-inside-s);\n}\n',"/*\n * Deprecated token aliases â DO NOT edit manually.\n * Generated by: pnpm deprecate-token\n *\n * Each alias maps an old token name to the current one via var().\n * This file is loaded in :root for global backward compatibility.\n */\n:root {\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-border-read-only-focused */\n --ds-input-border-focus-readonly: var(--ds-input-border-read-only-focused);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-shadow-read-only-focused */\n --ds-input-shadow-focus-readonly: var(--ds-input-shadow-read-only-focused);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-shadow-error-focused */\n --ds-input-shadow-focus-error: var(--ds-input-shadow-error-focused);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-border-focused */\n --ds-input-border-focus: var(--ds-input-border-focused);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-input-shadow-focused */\n --ds-input-shadow-focus: var(--ds-input-shadow-focused);\n}\n",'[data-color-scheme="legacy"] {\n --ds-input-color: var(--ds-color-text-main);\n --ds-input-color-disabled: var(--ds-color-text-disabled);\n --ds-input-color-read-only: var(--ds-color-text-soft);\n\n --ds-input-placeholder-color: var(--ds-color-text-placeholder);\n\n --ds-input-background-color: var(--ds-color-surface-main);\n --ds-input-background-color-disabled: var(--ds-color-surface-disabled);\n --ds-input-background-color-read-only: var(--ds-color-surface-soft);\n\n --ds-input-border-radius: var(--ds-radius-m);\n\n --ds-input-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main);\n --ds-input-border-focus: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid);\n --ds-input-border-focused: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid);\n --ds-input-border-error: var(--ds-border-width-tier-2) solid var(--ds-color-border-error-soft);\n --ds-input-border-disabled: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled);\n --ds-input-border-read-only: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft);\n /* @deprecated: use --ds-input-border-read-only-focused */\n --ds-input-border-focus-readonly: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid);\n --ds-input-border-read-only-focused: var(--ds-border-width-tier-4) solid var(--ds-color-border-solid);\n\n --ds-input-shadow: var(--ds-shadow-standard-xs);\n --ds-input-shadow-focus: var(--ds-shadow-focus-ring-actions);\n --ds-input-shadow-focused: var(--ds-shadow-focus-ring-actions);\n /* @deprecated: use --ds-input-shadow-read-only-focused */\n --ds-input-shadow-focus-readonly: var(--ds-shadow-focus-ring-actions);\n --ds-input-shadow-read-only-focused: var(--ds-shadow-focus-ring-actions);\n /* @deprecated: use --ds-input-shadow-error-focused */\n --ds-input-shadow-focus-error: var(--ds-shadow-focus-ring-actions);\n --ds-input-shadow-error-focused: var(--ds-shadow-focus-ring-actions);\n\n --ds-input-outline-offset: calc(var(--ds-border-width-tier-4) * -1);\n\n --ds-input-transition: border-color 0.2s linear, box-shadow 0.2s linear;\n\n /* File input specific styling */\n --ds-input-file-button-color: var(--ds-color-text-main);\n --ds-input-file-button-background-color: transparent;\n --ds-input-file-button-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main);\n --ds-input-file-button-border-radius: var(--ds-radius-s);\n --ds-input-file-button-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s);\n\n --ds-input-font-sm: var(--ds-font-body-default-s);\n --ds-input-height-sm: var(--ds-size-actions-l);\n --ds-input-padding-vertical-sm: var(--ds-space-page-inside-xs);\n --ds-input-padding-horizontal-sm: var(--ds-space-page-inside-s);\n\n --ds-input-font-md: var(--ds-font-body-default-m);\n --ds-input-height-md: var(--ds-size-actions-xl);\n --ds-input-padding-vertical-md: var(--ds-space-page-inside-xs);\n --ds-input-padding-horizontal-md: var(--ds-space-page-inside-s);\n}\n',':root {\n /* Root â text color */\n --ds-input-group-color: var(--ds-input-color);\n --ds-input-group-color-disabled: var(--ds-input-color-disabled);\n --ds-input-group-placeholder-color: var(--ds-input-placeholder-color);\n\n /* Root â background */\n --ds-input-group-background-color: var(--ds-input-background-color);\n --ds-input-group-background-color-disabled: var(--ds-input-background-color-disabled);\n\n /* Root â border */\n --ds-input-group-border-width: var(--ds-border-width-tier-2);\n --ds-input-group-border-width-focused: var(--ds-border-width-tier-4);\n --ds-input-group-border: var(--ds-input-border);\n --ds-input-group-border-radius: var(--ds-input-border-radius);\n --ds-input-group-border-focused: var(--ds-input-border-focused);\n --ds-input-group-border-error: var(--ds-input-border-error);\n --ds-input-group-border-disabled: var(--ds-input-border-disabled);\n\n /* Root â shadow */\n --ds-input-group-shadow: var(--ds-input-shadow);\n --ds-input-group-shadow-focused: var(--ds-input-shadow-focused);\n --ds-input-group-shadow-error-focused: var(--ds-input-shadow-error-focused);\n\n /* Root â opacity */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0.6" with a semantic token */\n --ds-input-group-opacity-disabled: 0.6; /* no semantic opacity token available */\n\n /* Root â size: sm */\n --ds-input-group-height-sm: var(--ds-input-height-sm);\n --ds-input-group-padding-vertical-sm: var(--ds-input-padding-vertical-sm);\n --ds-input-group-padding-horizontal-sm: var(--ds-input-padding-horizontal-sm);\n --ds-input-group-font-sm: var(--ds-input-font-sm);\n\n /* Root â size: md */\n --ds-input-group-height-md: var(--ds-input-height-md);\n --ds-input-group-padding-vertical-md: var(--ds-input-padding-vertical-md);\n --ds-input-group-padding-horizontal-md: var(--ds-input-padding-horizontal-md);\n --ds-input-group-font-md: var(--ds-input-font-md);\n\n /* Button */\n --ds-input-group-button-outline-focused: var(--ds-input-group-border-focused);\n --ds-input-group-button-separator: 0; /* intentionally hidden â separator rendered via border-left/right in InputGroupButton CSS */\n --ds-input-group-button-padding-vertical: var(--ds-space-page-inside-xs);\n --ds-input-group-button-padding-horizontal: var(--ds-space-page-inside-s);\n --ds-input-group-button-padding-icon: var(--ds-space-page-inside-2xs);\n --ds-input-group-button-border-radius: calc(var(--ds-input-group-border-radius) - var(--ds-input-group-border-width));\n\n /* Addon */\n --ds-input-group-addon-color: var(--ds-color-text-soft);\n --ds-input-group-addon-gap: var(--ds-space-page-inside-2xs);\n /* Block addon vertical padding intentionally reuses horizontal padding for visual consistency */\n --ds-input-group-addon-block-padding-vertical-sm: var(--ds-input-group-padding-horizontal-sm);\n --ds-input-group-addon-block-padding-vertical-md: var(--ds-input-group-padding-horizontal-md);\n\n /* Text */\n --ds-input-group-text-color: var(--ds-color-text-soft);\n --ds-input-group-text-gap: var(--ds-space-page-inside-xs);\n --ds-input-group-text-icon-size: var(--ds-size-icon-s);\n}\n','[data-color-scheme="legacy"] {\n --ds-input-group-text-icon-size: var(--ds-size-icon-m);\n}\n',":root {\n /* label */\n --ds-label-color: var(--ds-color-text-soft);\n\n /* helper text */\n --ds-label-helper-text-color: var(--ds-color-text-moderate);\n\n /* inactive state */\n --ds-label-inactive-color: var(--ds-color-text-disabled);\n --ds-label-inactive-helper-text-color: var(--ds-color-text-disabled);\n\n /* sm */\n --ds-label-sm-container-gap: 0;\n --ds-label-sm-font: var(--ds-font-body-strong-s);\n --ds-label-sm-helper-text-font: var(--ds-font-body-default-s);\n\n /* md */\n --ds-label-md-container-gap: var(--ds-space-page-inside-2xs);\n --ds-label-font-md: var(--ds-font-body-strong-m);
3901\n --ds-label-md-helper-text-font: var(--ds-font-body-default-m);\n}\n","/*\n * Deprecated token aliases â DO NOT edit manually.\n * Generated by: pnpm deprecate-token\n *\n * Each alias maps an old token name to the current one via var().\n * This file is loaded in :root for global backward compatibility.\n */\n:root {\n\n /* @deprecated 2026-05-25 v0.3.7 -- use --ds-label-font-md */\n --ds-label-md-font: var(--ds-label-font-md);\n}\n",'[data-color-scheme="legacy"] {\n /* label */\n --ds-label-color: var(--ds-color-text-soft);\n\n /* helper text */\n --ds-label-helper-text-color: var(--ds-color-text-moderate);\n\n /* inactive state */\n --ds-label-inactive-color: var(--ds-color-text-disabled);\n --ds-label-inactive-helper-text-color: var(--ds-color-text-disabled);\n\n /* sm */\n --ds-label-sm-container-gap: 0;\n --ds-label-sm-font: var(--ds-font-body-strong-s);\n --ds-label-sm-helper-text-font: var(--ds-font-body-default-s);\n\n /* md */\n --ds-label-md-container-gap: var(--ds-space-page-inside-xs);\n --ds-label-md-font: var(--ds-font-body-strong-m);
3901\n --ds-label-md-helper-text-font: var(--ds-font-body-default-m);\n}\n',"/*\n * Layout (@smartling-ui/layout) gap scale.\n *\n * The public gap names carry the t-shirt scale of the component API; the\n * theme's inside-scale spells the same steps s/m/l. Only the mapping lives\n * here â the lengths belong to the spacing tokens.\n */\n\n:root {\n /* Root â gap by size */\n --ds-layout-gap-none: var(--ds-space-page-inside-none);\n --ds-layout-gap-2xs: var(--ds-space-page-inside-2xs);\n --ds-layout-gap-xs: var(--ds-space-page-inside-xs);\n --ds-layout-gap-sm: var(--ds-space-page-inside-s);\n --ds-layout-gap-md: var(--ds-space-page-inside-m);\n --ds-layout-gap-lg: var(--ds-space-page-inside-l);\n --ds-layout-gap-xl: var(--ds-space-page-inside-xl);\n --ds-layout-gap-2xl: var(--ds-space-page-inside-2xl);\n --ds-layout-gap-3xl: var(--ds-space-page-inside-3xl);\n}\n",':root {\n --ds-popover-z-index: var(--ds-z-index-tier-4);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "9rem" with a semantic token */\n --ds-popover-min-width: 9rem;\n --ds-popover-font: var(--ds-font-body-default-m);\n --ds-popover-color: var(--ds-color-text-soft);\n --ds-popover-background-color: var(--ds-color-surface-main);\n --ds-popover-border-radius: var(--ds-radius-m);\n --ds-popover-box-shadow: var(--ds-shadow-standard-m);\n --ds-popover-padding: var(--ds-space-page-inside-s);\n --ds-popover-gap: var(--ds-space-page-inside-2xs);\n\n --ds-popover-title-font: var(--ds-font-body-strongest-m);\n --ds-popover-title-color: var(--ds-color-text-main);\n --ds-popover-title-margin: 0;\n\n --ds-popover-description-font: var(--ds-shadow-standard-m);\n --ds-popover-description-color: var(--ds-color-text-soft);\n}\n\n','[data-color-scheme="legacy"] {\n --ds-popover-z-index: var(--ds-z-index-tier-4);\n --ds-popover-min-width: 9rem;\n --ds-popover-font: var(--ds-font-body-default-m);\n --ds-popover-color: var(--ds-color-text-soft);\n --ds-popover-background-color: var(--ds-color-surface-main);\n --ds-popover-border-radius: var(--ds-radius-l);\n --ds-popover-box-shadow: var(--ds-shadow-standard-m);\n --ds-popover-padding: 0.75rem;\n --ds-popover-gap: 0.5rem;\n\n --ds-popover-title-font: var(--ds-font-body-strongest-m);\n --ds-popover-title-color: var(--ds-color-text-main);\n --ds-popover-title-margin: 0;\n\n --ds-popover-description-font: var(--ds-shadow-standard-m);\n --ds-popover-description-color: var(--ds-color-text-soft);\n}\n',':root {\n /* Root */\n /* Host container "height" 40 -> size/actions/3xl, the ramp for control heights.\n 2.5rem in legacy, which is the 40 Figma draws; 3rem (48) in modern, because the\n whole actions ramp steps up between schemes. That per-scheme difference is the\n ramp\'s intent rather than a discrepancy with the design, which is drawn in\n legacy.\n\n Figma binds font-size/4xl here instead, the one token that is 2.5rem in both\n schemes -- but it is a font token driving a layout property (TOKEN_FAMILY_MISMATCH\n in the spec) and is shared with --ds-heading-font-size-2xl, so retuning a heading\n step would silently resize this row. No --ds-size-*, --ds-dimension-* or\n --ds-space-* token is 2.5rem in both schemes, so a single cross-scheme 40 is not\n expressible with today\'s tokens; it would need a new sizing token in tokens.json.\n\n --ds-stepper-step-chevron-width derives from this, so it follows: 20 in legacy,\n 24 in modern. */\n --ds-stepper-height: var(--ds-size-actions-3xl);\n /* Host container "cornerRadius" 6 -> radius/l (legacy 6px, modern 12px) */\n --ds-stepper-border-radius: var(--ds-radius-l);\n /* Host container "borderWidth" 1, borderAlign inside -> border-width/tier/2 */\n --ds-stepper-border-width: var(--ds-border-width-tier-2);\n /* "Container stroke" -> color/border/moderate, the variable Figma binds, matched by\n name and by value. Figma\'s four modes give it #e5e5e5 (modern light), #404040\n (modern dark), #e8e9e9 (legacy light) and #4a4f50 (legacy dark); our modern\n schemes map the token to exactly those two values already.\n\n This was routed through border/soft for a while because legacy-light mapped\n border/moderate to neutral-100 -- the pill\'s own fill -- leaving the stroke\n invisible. That was a bug in the legacy theme rather than a reason to bind\n elsewhere, and it is fixed at the source now (see legacy-light-theme.css), so the\n component can name the token the design does.\n\n Do NOT reroute this to the chevron rule\'s token. Figma draws the two as distinct\n greys in the light modes and the stroke is the LIGHTER of them -- #e8e9e9 = 232\n here against #d8d8d8 = 216 on the divider. Flattening them drops the edge about\n 20 points too dark;
3901 it was tried and reverted.\n\n KNOWN, AND MATCHING FIGMA: in BOTH dark modes Figma gives border/moderate and\n surface/moderate the same value -- #404040 and #404040 in modern, #4a4f50 and\n #4a4f50 in legacy -- so the design specifies no visible outline in dark at all.\n Our modern-dark reproduces that exactly. Our legacy-dark still differs, mapping\n border/moderate to neutral-800 against a neutral-700 fill, so a faint groove\n renders there where Figma would show none; that is the legacy theme\'s remaining\n drift, not this component\'s binding. */\n --ds-stepper-border-color: var(--ds-color-border-moderate);\n /* "Container drop shadow" -> shadow/standard/xs */\n --ds-stepper-box-shadow: var(--ds-shadow-standard-xs);\n /* "Container fill" -> color/surface/moderate. Also the pending step fill, so a\n step that is not current simply lets the root show through. */\n --ds-stepper-background-color: var(--ds-color-surface-moderate);\n\n /* Step */\n /* Chevron notch depth -- half the row height, which makes the notch a true 45\n degrees. That angle is load-bearing: the divider filling the notch is a square\n rotated 45deg (see Step\'s ::after), because a rotated square is the only shape\n whose edges an inset box-shadow can follow onto the diagonal, and rotating one\n fixes its slope at 1:1. Notch and divider have to agree or the rule drifts off\n the boundary near the tips. The steps get the full row height -- the container\'s\n stroke is an overlay, not a border, so it takes nothing off the content box (see\n Root\'s .list::after).\n\n Figma is no help in pinning the number: its divider FRAME is a fixed 21.3 wide\n at every Steps value while the arrow VECTOR inside it is 13.417, so the file\n disagrees with itself, and neither figure is derivable from a token. Deriving\n from the row keeps the notch on the theme\'s own scale -- 20 in legacy, 24 in\n modern -- and matches the old @smartling/react-stepper\'s height/2 look. Aliasing\n a dimension tier was rejected because its legacy->modern step doubles, which\n would turn a 20px notch into 40px. */\n --ds-stepper-step-chevron-width: calc(var(--ds-stepper-height) / 2);\n /* The rule along the chevron boundary -- Figma\'s two inner shadows on the divider\n vector, ported effect for effect. Figma\'s divider is an arrow whose SVG export\n is:\n\n <path d="M0 0L0 40L21.3031 20L0 0Z" fill="#F2F2F2"/>\n <filter id="filter0_ii"> two inner shadows\n <feOffset dy="-1"/> ... 0.847059 -> #D8D8D8, opacity 1, no blur\n <feOffset dy="1"/> ... 0.847059 -> #D8D8D8, opacity 1, no blur\n\n THE FILL IS NOT THIS TOKEN, and needs no token at all. It is the one\n variable-bound property on that node and it tracks the step the arrow trails:\n color/surface/moderate after a pending step (Legacy-UI 11482:32160),\n color/surface/main after the current one (11482:32188). The divider here is\n painted by the step it belongs to and takes that step\'s own\n --ds-stepper-step-background-color, so both cases fall out for free.\n\n What did need a token is the #D8D8D8, a raw hex with no variable behind it: 216\n grey. border/grey-outline resolves to neutral-300 #d4d4d4 = 212 in both light\n schemes -- four points off Figma, and the nearest neutral by a wide margin, with\n neutral-200 #e5e5e5 = 229 the next candidate up.\n\n Because that hex is raw, Figma has no dark value for it: the whole Stepper set is\n drawn once, in legacy light, and only the fill is variable-bound, so the file\n would put the same #D8D8D8 on a dark arrow. Dark is therefore ours to choose, and\n border/grey-outline is picked over surface/strong for it. The two are the SAME\n neutral-300 in both light schemes, so they are interchangeable against Figma; they\n part company in the dark ones, where surface/strong is neutral-600 #525252 against\n a neutral-700 #404040 arrow -- 1.33:1, a rule that all but disappears -- while\n border/grey-outline is neutral-400 #a3a3a3, 4.1:1, and reads as the same divider\n the light schemes show. It is also the border token Chip and Badge already use for\n a grey outline, so the stepper\'s rule tracks them rather than a surface ramp.\n\n The offset directions differ from Figma\'s, because the shapes differ. Figma\'s\n arrow is a standalone 21.3-wide frame whose only non-vertical edges are the two\n diagonals, so dy=+-1 can land on nothing else. Ours is a square rotated 45deg,\n where those same tw
3901o diagonals are the square\'s own top and right edges -- hence\n inset 0 +1 and inset -1 0. Anything overriding this token has to keep that\n pairing, or the rule lands on the wrong two edges of the square.\n\n Named box-shadow, not border, per R10: it emulates a border on a shape a border\n cannot follow, and it is a single token rather than a colour/width pair because\n the two insets are one effect and only make sense together. */\n --ds-stepper-step-divider-box-shadow:\n inset 0 var(--ds-border-width-tier-2) 0 0 var(--ds-color-border-grey-outline),\n inset calc(-1 * var(--ds-border-width-tier-2)) 0 0 0\n var(--ds-color-border-grey-outline);\n /* Label inline breathing room either side of the chevron geometry. Figma\'s\n final-step frame claims horizontalPadding 300 via z-index/tier/4 -- it\n overflows the 326.8 frame and clips the label, flagged as a design anomaly\n in the spec. Using the standard inside-page inset instead. */\n --ds-stepper-step-padding-inline: var(--ds-space-page-inside-s);\n\n /* "Step pill fill (pending)" -> color/surface/moderate */\n --ds-stepper-step-background-color: var(--ds-color-surface-moderate);\n /* "Step pill fill (current)" -> color/surface/main (white) */\n --ds-stepper-step-background-color-current: var(--ds-color-surface-main);\n /* "Step label (pending)" -> color/text/soft */\n --ds-stepper-step-color: var(--ds-color-text-soft);\n /* "Step label (current)" -> color/text/main */\n --ds-stepper-step-color-current: var(--ds-color-text-main);\n /* Label typography -> font/body/default/m (16/24), which is what every Label node\n in the file is bound to. An earlier note here claimed the design was\n POSITION_DRIVEN_TYPOGRAPHY -- size 16 at positions 1-2, size 14 from 3 on -- and\n normalised the component down to s on that basis. It does not reproduce: reading\n the bound variables per Label across Steps=6/Active=1 (positions 1, 2, 3 and 6)\n and Steps=4/Active=3 (positions 3 and 4) gives Font Size/16 + Line Height/24\n every time. Only weight and colour move, and only with active state.\n\n The size 14 in that note is most likely the file\'s container-level font-size/s\n binding, read as if it were the label\'s. This file routinely binds font and\n z-index variables to layout properties -- font-size/4xl drives the row height,\n z-index/tier/4 the step padding -- so a font-size variable appearing in a\n subtree\'s bindings does not mean any text uses it. */\n --ds-stepper-step-font: var(--ds-font-body-default-m);\n /* Active step\'s label bolds -> font/body/strongest/m. Figma\'s strongest is weight\n 700; this token is 600, a pre-existing difference in the type ramp rather than\n anything this component chose. */\n --ds-stepper-step-font-current: var(--ds-font-body-strongest-m);\n}\n',":root {\n /* Table container */\n --ds-table-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main);\n --ds-table-border-radius: var(--ds-radius-m);\n --ds-table-background-color: var(--ds-color-surface-main);\n --ds-table-color: var(--ds-color-text-main);\n --ds-table-font: var(--ds-font-body-default-s);\n\n /* Table cell */\n --ds-table-cell-padding: var(--ds-space-page-inside-s);\n\n /* Table head */\n --ds-table-head-padding: var(--ds-space-page-inside-s);\n --ds-table-head-font: var(--ds-font-body-strongest-s);\n --ds-table-head-background-color: var(--ds-color-surface-moderate);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: the --ds-z-index-tier-* scale\n (1, 100, 200, ...) jumps too coarsely to express this table's intra-component 1/2/3\n stacking order; a literal value is intentional here, not a placeholder for a tier */\n --ds-table-head-z-index: 2;\n\n /* Table sticky column */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: see --ds-table-head-z-index above */\n --ds-table-sticky-column-z-index: 1;\n /* distinct from --ds-table-head-z-index: a doubly-sticky corner cell (fixedHeader\n + fixedFirstColumn/fixedLastColumn) needs its own tier, not a tie, to avoid a\n Chromium paint bug where the corner cell fails to repaint on scroll */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: see --ds-table-head-z-index above */\n --ds-table-sticky-corner-z-index: 3;\n /* opt-in mitigation for WCAG 2.2 SC 2.4.11: keeps a focused control from being scrolled\n underneath a pinned column. sized to the pinned column's actual width, which the\n component can't know, so this default is 0 and consumers override it per-instance */\n --ds-table-sticky-column-scroll-padding-inline-start: 0;\n --ds-table-sticky-column-scroll-padding-inline-end: 0;\n\n /* Table caption */\n --ds-table-caption-padding: var(--ds-space-page-inside-s);\n --ds-table-caption-font: var(--ds-font-body-strongest-s);\n\n /* Table footer */\n --ds-table-footer-padding: var(--ds-space-page-inside-s);\n --ds-table-footer-font: var(--ds-font-body-strongest-s);\n --ds-table-footer-border-top: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft);\n\n /* Table row */\n --ds-table-row-border-bottom: var(--ds-border-width-tier-2) solid var(--ds-color-border-soft);\n --ds-table-row-hovered-background-color: var(--ds-color-surface-main-hover);\n}\n","/*\n * Deprecated token aliases â DO NOT edit manually.\n * Generated by: pnpm deprecate-token\n *\n * Each alias maps an old token name to the current one via var().\n * This file is loaded in :root for global backward compatibility.\n */\n:root {\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-table-row-hovered-background-color */\n --ds-table-row-hover-background-color: var(--ds-table-row-hovered-background-color);\n}\n",'[data-color-scheme="legacy"] {\n /* Table container */\n --ds-table-border: 1px solid var(--ds-color-border-main);\n --ds-table-border-radius: 8px;\n --ds-table-background-color: var(--ds-color-surface-main);\n --ds-table-color: var(--ds-color-text-main);\n --ds-table-font: var(--ds-font-body-default-s);\n\n /* Table cell */\n --ds-table-cell-padding: 0.75rem;\n\n /* Table head */\n --ds-table-head-padding: 0.75rem;\n --ds-table-head-font: var(--ds-font-body-strongest-s);\n --ds-table-head-background-color: var(--ds-color-surface-moderate);\n --ds-table-head-z-index: 2;\n\n /* Table caption */\n --ds-table-caption-padding: 0.75rem;\n --ds-table-caption-font: var(--ds-font-body-strongest-s);\n\n /* Table footer */\n --ds-table-footer-padding: 0.75rem;\n --ds-table-footer-font: var(--ds-font-body-strongest-s);\n --ds-table-footer-border-top: 1px solid var(--ds-color-border-soft);\n\n /* Table row */\n --ds-table-row-border-bottom: 1px solid var(--ds-color-border-soft);\n --ds-table-row-hover-background-color: var(--ds-color-surface-main-hover);\n --ds-table-row-hovered-background-color: var(--ds-color-surface-main-hover);\n}\n',":root {\n /* Legend */\n --ds-radio-legend-sm-margin-bottom: var(--ds-space-page-inside-xs);\n --ds-radio-legend-md-margin-bottom: var(--ds-space-page-inside-s);\n\n /* Radio */\n --ds-radio-background-color: var(--ds-color-surface-main);\n --ds-radio-checked-background-color: var(--ds-color-foreground-main);\n --ds-radio-disabled-background-color: var(--ds-color-surface-disabled);\n\n --ds-radio-dot-background-color: var(--ds-color-surface-main);\n --ds-radio-dot-disabled-background-color: var(--ds-color-foreground-moderate);\n\n --ds-radio-border-width: var(--ds-border-width-tier-2);\n\n --ds-radio-border-color: var(--ds-color-border-solid);\n --ds-radio-hovered-border-color: var(--ds-color-border-solid);\n --ds-radio-checked-border-color: var(--ds-color-foreground-main);\n --ds-radio-disabled-border-color: var(--ds-color-border-disabled);\n\n --ds-radio-focus-ring-shadow: var(--ds-shadow-focus-ring-actions);\n\n --ds-radio-label-color: var(--ds-color-text-soft);\n --ds-radio-label-disabled-color: var(--ds-color-text-disabled);\n\n --ds-radio-helper-text-color: var(--ds-color-text-moderate);\n --ds-radio-helper-text-disabled-color: var(--ds-color-text-disabled);\n\n /* Radio List */\n --ds-radio-list-sm-gap: var(--ds-space-page-inside-xs);\n --ds-radio-list-md-gap: var(--ds-space-page-inside-s);\n\n /* Sizes: sm */\n --ds-radio-sm-size: var(--ds-dimension-tier-7);\n --ds-radio-dot-sm-size: var(--ds-dimension-tier-4);\n --ds-radio-label-sm-gap: var(--ds-space-page-inside-xs);\n --ds-radio-label-sm-font-size: var(--ds-font-size-s);\n --ds-radio-helper-text-sm-font-size: var(--ds-font-size-s);\n\n /* Sizes: md */\n --ds-radio-md-size: var(--ds-dimension-tier-8);\n --ds-radio-dot-md-size: var(--ds-dimension-tier-5);\n --ds-radio-label-md-gap: var(--ds-space-page-inside-s);\n --ds-radio-label-md-font-size: var(--ds-font-size-m);\n --ds-radio-helper-text-md-font-size: var(--ds-font-size-m);\n}\n","/*\n * Deprecated token aliases â DO NOT edit manually.\n * Generated by: pnpm deprecate-token\n *\n * Each alias maps an old token name to the current one via var().\n * This file is loaded in :root for global backward compatibility.\n */\n:root {\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-radio-hovered-border-color */\n --ds-radio-hover-border-color: var(--ds-radio-hovered-border-color);\n}\n",'/* Legacy theme overrides */\n:root[data-color-scheme="legacy"],\ndiv[data-color-scheme="legacy"] {\n /* Legend */\n --ds-radio-legend-sm-margin-bottom: 0.5rem;\n --ds-radio-legend-md-margin-bottom: 0.75rem;\n\n /* Radio */\n --ds-radio-background-color: var(--ds-color-surface-main);\n --ds-radio-checked-background-color: var(--ds-color-foreground-main);\n --ds-radio-disabled-background-color: var(--ds-color-surface-disabled);\n\n --ds-radio-dot-background-color: var(--ds-color-surface-main);\n --ds-radio-dot-disabled-background-color: var(--ds-color-foreground-moderate);\n\n --ds-radio-border-width: var(--ds-border-width-tier-2);\n\n --ds-radio-border-color: var(--ds-color-border-solid);\n --ds-radio-hover-border-color: var(--ds-color-border-solid);\n --ds-radio-hovered-border-color: var(--ds-color-border-solid);\n --ds-radio-checked-border-color: var(--ds-color-foreground-main);\n --ds-radio-disabled-border-color: var(--ds-color-border-disabled);\n\n --ds-radio-focus-ring-shadow: var(--ds-shadow-focus-ring-actions);\n\n --ds-radio-label-color: var(--ds-color-text-soft);\n --ds-radio-label-disabled-color: var(--ds-color-text-disabled);\n\n --ds-radio-helper-text-color: var(--ds-color-text-moderate);\n --ds-radio-helper-text-disabled-color: var(--ds-color-text-disabled);\n\n /* Radio List */\n --ds-radio-list-sm-gap: 0.5rem;\n --ds-radio-list-md-gap: 0.75rem;\n\n /* Sizes: sm */\n --ds-radio-sm-size: 1rem;\n --ds-radio-dot-sm-size: 0.375rem;\n --ds-radio-label-sm-gap: 0.5rem;\n --ds-radio-label-sm-font-size: var(--ds-font-size-s);\n --ds-radio-helper-text-sm-font-size: var(--ds-font-size-s);\n\n /* Sizes: md */\n --ds-radio-md-size: 1.25rem;\n --ds-radio-dot-md-size: 0.5rem;\n --ds-radio-label-md-gap: 0.625rem;\n --ds-radio-label-md-font-size: var(--ds-font-size-m);\n --ds-radio-helper-text-md-font-size: var(--ds-font-size-m);\n}\n',':root {\n /* Root */\n --ds-tabs-border-radius: var(--ds-radius-s);\n --ds-tabs-outline: none;\n --ds-tabs-cursor: pointer;\n --ds-tabs-cursor-disabled: not-allowed;\n --ds-tabs-gap: var(--ds-space-page-inside-xs); /* gap inside tab (icon/text/badge/close) */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "background-color 0.2s, color 0.2s, border-color 0.2s" with a semantic token */\n --ds-tabs-transition: background-color 0.2s, color 0.2s, border-color 0.2s; /* no semantic transition token available */\n --ds-tabs-color-disabled: var(--ds-color-text-disabled);\n --ds-tabs-opacity-disabled: var(--ds-opacity-medium);\n\n /* Root - Sizes */\n --ds-tabs-height-sm: var(--ds-size-actions-l);\n --ds-tabs-font-sm: var(--ds-font-body-strongest-s);\n --ds-tabs-icon-size-sm: var(--ds-size-icon-m);\n\n --ds-tabs-height-md: var(--ds-size-actions-xl);\n --ds-tabs-font-md: var(--ds-font-body-strongest-s);\n --ds-tabs-icon-size-md: var(--ds-size-icon-m);\n\n --ds-tabs-height-lg: var(--ds-size-actions-2xl);\n --ds-tabs-font-lg: var(--ds-font-body-strongest-m);\n --ds-tabs-icon-size-lg: var(--ds-size-icon-m);\n\n /* List */\n --ds-tabs-list-gap-sm: var(--ds-space-page-inside-2xs);\n --ds-tabs-list-gap-md: var(--ds-space-page-inside-2xs);\n --ds-tabs-list-gap-lg: var(--ds-space-page-inside-2xs);\n --ds-tabs-list-border-bottom-underlined: inset 0 calc(-1 * var(--ds-border-width-tier-2)) 0 0 var(--ds-color-border-soft);\n\n /* Tab - Contained */\n --ds-tabs-padding-contained-sm: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s);\n --ds-tabs-padding-contained-md: var(--ds-space-page-inside-s) var(--ds-space-page-inside-m);\n --ds-tabs-padding-contained-lg: var(--ds-space-page-inside-m) var(--ds-space-page-inside-l);\n --ds-tabs-color-contained: var(--ds-color-text-moderate);\n --ds-tabs-color-contained-hovered: var(--ds-color-text-brand-main);\n --ds-tabs-border-contained: none;\n --ds-tabs-color-contained-selected: var(--ds-color-text-brand-main);\n --ds-tabs-background-color-contained-selected: var(--ds-color-surface-brand-main);
3901\n --ds-tabs-box-shadow-contained-focused: var(--ds-shadow-focus-ring-actions);\n\n /* Tab - Underlined */\n --ds-tabs-padding-underlined-horizontal-sm: var(--ds-space-page-inside-none) var(--ds-space-page-inside-s) var(--ds-space-page-inside-s);\n --ds-tabs-padding-underlined-horizontal-md: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-m) var(--ds-space-page-inside-s);\n --ds-tabs-padding-underlined-horizontal-lg: var(--ds-space-page-inside-s) var(--ds-space-page-inside-l) var(--ds-space-page-inside-s);\n --ds-tabs-padding-underlined-vertical-sm: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s);\n --ds-tabs-padding-underlined-vertical-md: var(--ds-space-page-inside-s) var(--ds-space-page-inside-m);\n --ds-tabs-padding-underlined-vertical-lg: var(--ds-space-page-inside-m) var(--ds-space-page-inside-l);\n --ds-tabs-color-underlined: var(--ds-color-text-moderate);\n --ds-tabs-color-underlined-hovered: var(--ds-color-text-brand-main);\n --ds-tabs-border-underlined: none;\n --ds-tabs-color-underlined-selected: var(--ds-color-text-brand-main);\n --ds-tabs-border-bottom-color-underlined-selected: var(--ds-color-foreground-brand-main);\n --ds-tabs-box-shadow-underlined-focused: none;\n\n /* Label */\n --ds-tabs-label-color-underlined-focused: var(--ds-color-text-main);\n --ds-tabs-label-line-height-underlined-focused: var(--ds-line-height-body-xs);\n --ds-tabs-label-text-decoration-underlined-focused: underline var(--ds-color-text-main) var(--ds-border-width-tier-4);\n --ds-tabs-label-background-color-underlined-focused: var(--ds-color-surface-link-pressed);\n\n /* Content */\n --ds-tabs-content-box-shadow-focused: var(--ds-shadow-focus-ring-actions);\n\n /* Indicator */\n --ds-tabs-indicator-height: var(--ds-border-width-tier-4);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)" with a semantic token */\n --ds-tabs-indicator-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* no semantic transition token available */\n}\n','[data-color-scheme="legacy"] {\n /* Tabs Contained variant - Focus state */\n --ds-tabs-box-shadow-contained-focused: var(--ds-shadow-focus-ring-brand);\n\n --ds-tabs-box-shadow-underlined-focused: var(--ds-shadow-focus-ring-brand);\n\n /* Underlined variant - remove focus effect on .text element */\n --ds-tabs-label-line-height-underlined-focused: inherit;\n --ds-tabs-label-text-decoration-underlined-focused: none;\n --ds-tabs-label-background-color-underlined-focused: transparent;\n\n --ds-tabs-padding-underlined-horizontal-sm: var(--ds-space-page-inside-none) var(--ds-space-page-inside-s) var(--ds-space-page-inside-s);\n --ds-tabs-padding-underlined-horizontal-md: var(--ds-space-page-inside-none) var(--ds-space-page-inside-m) var(--ds-space-page-inside-s);\n --ds-tabs-padding-underlined-horizontal-lg: var(--ds-space-page-inside-none) var(--ds-space-page-inside-l) var(--ds-space-page-inside-s);\n}\n',':root {\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0.7" with a semantic token */\n --ds-toggle-opacity-disabled: 0.7;\n\n --ds-toggle-outlined-color-pressed: var(--ds-color-text-brand-soft);\n --ds-toggle-outlined-color-unpressed: var(--ds-color-text-main);\n --ds-toggle-outlined-color-disabled-pressed: var(--ds-color-text-strong-onbrand);\n --ds-toggle-outlined-color-disabled-unpressed: var(--ds-color-text-soft);\n\n --ds-toggle-outlined-background-color-pressed: var(--ds-color-surface-brand-main);\n --ds-toggle-outlined-background-color-unpressed: var(--ds-color-surface-main);\n --ds-toggle-outlined-background-color-disabled-pressed: var(--ds-color-surface-main);\n --ds-toggle-outlined-background-color-disabled-unpressed: var(--ds-color-surface-main);\n\n --ds-toggle-outlined-border-color-pressed: var(--ds-color-border-main);\n --ds-toggle-outlined-border-color-unpressed: var(--ds-color-border-main);\n --ds-toggle-outlined-border-color-disabled-pressed: var(--ds-color-border-disabled);\n --ds-toggle-outlined-border-color-disabled-unpressed: var(--ds-color-border-disabled);
3901\n\n --ds-toggle-outlined-box-shadow-pressed: none;\n --ds-toggle-outlined-box-shadow-unpressed: none;\n\n --ds-toggle-text-color-pressed: var(--ds-color-text-brand-main);\n --ds-toggle-text-color-unpressed: var(--ds-color-text-main);\n --ds-toggle-text-color-disabled-pressed: var(--ds-color-text-strong-onbrand);\n --ds-toggle-text-color-disabled-unpressed: var(--ds-color-text-main);\n\n --ds-toggle-text-background-color-pressed: var(--ds-color-surface-brand-main);\n --ds-toggle-text-background-color-unpressed: transparent;\n --ds-toggle-text-background-color-disabled-pressed: var(--ds-color-surface-disabled);\n --ds-toggle-text-background-color-disabled-unpressed: var(--ds-color-surface-disabled);\n\n --ds-toggle-text-border-pressed: none;\n --ds-toggle-text-border-unpressed: none;\n --ds-toggle-text-border-disabled-pressed: none;\n --ds-toggle-text-border-disabled-unpressed: none;\n\n --ds-toggle-text-box-shadow-pressed: none;\n --ds-toggle-text-box-shadow-unpressed: none;\n}\n','[data-color-scheme="legacy"] {\n --ds-toggle-opacity-disabled: 0.7;\n\n --ds-toggle-outlined-color-pressed: var(--ds-color-text-main);\n --ds-toggle-outlined-color-unpressed: var(--ds-color-text-main);\n --ds-toggle-outlined-color-disabled-pressed: var(--ds-color-text-main);\n --ds-toggle-outlined-color-disabled-unpressed: var(--ds-color-text-main);\n\n --ds-toggle-outlined-background-color-pressed: var(--ds-color-surface-strong);\n --ds-toggle-outlined-background-color-unpressed: var(--ds-color-surface-main);\n --ds-toggle-outlined-background-color-disabled-pressed: var(--ds-color-surface-disabled);\n --ds-toggle-outlined-background-color-disabled-unpressed: var(--ds-color-surface-disabled);\n\n --ds-toggle-outlined-border-color-pressed: var(--ds-color-border-main);\n --ds-toggle-outlined-border-color-unpressed: var(--ds-color-border-main);\n --ds-toggle-outlined-border-color-disabled-pressed: var(--ds-color-border-main);\n --ds-toggle-outlined-border-color-disabled-unpressed: var(--ds-color-border-main);\n\n --ds-toggle-outlined-box-shadow-pressed: inset 1px 1px 4px rgba(0, 0, 0, 0.06), inset -1px -1px 4px rgba(0, 0, 0, 0.06);\n --ds-toggle-outlined-box-shadow-unpressed: none;\n\n --ds-toggle-text-color-pressed: var(--ds-color-text-main);\n --ds-toggle-text-color-unpressed: var(--ds-color-text-main);\n --ds-toggle-text-color-disabled-pressed: var(--ds-color-text-main);\n --ds-toggle-text-color-disabled-unpressed: var(--ds-color-text-main);\n\n --ds-toggle-text-background-color-pressed: var(--ds-color-surface-strong);\n --ds-toggle-text-background-color-unpressed: transparent;\n --ds-toggle-text-background-color-disabled-pressed: var(--ds-color-surface-disabled);\n --ds-toggle-text-background-color-disabled-unpressed: var(--ds-color-surface-disabled);\n\n --ds-toggle-text-border-pressed: none;\n --ds-toggle-text-border-unpressed: none;\n --ds-toggle-text-border-disabled-pressed: none;\n --ds-toggle-text-border-disabled-unpressed: none;\n\n --ds-toggle-text-box-shadow-pressed: inset 1px 1px 4px rgba(0, 0, 0, 0.06), inset -1px -1px 4px rgba(0, 0, 0, 0.06);\n --ds-toggle-text-box-shadow-unpressed: none;\n}\n',':root {\n /* Tooltip content wrapper */\n --ds-tooltip-border-radius: var(--ds-radius-m);\n --ds-tooltip-background-color: var(--ds-color-surface-solid);\n --ds-tooltip-padding-vertical: var(--ds-space-page-inside-xs);\n --ds-tooltip-padding-horizontal: var(--ds-space-page-inside-s);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "1050" with a semantic token */\n --ds-tooltip-z-index: 1050; /* TODO: remove this once we have a proper z-index tokens in smartling DS */\n --ds-tooltip-content-gap: var(--ds-space-page-inside-2xs);\n\n /* Tooltip title */\n --ds-tooltip-title-color: var(--ds-color-text-white);\n --ds-tooltip-title-font: var(--ds-font-body-strongest-xs);\n\n /* Tooltip description */\n --ds-tooltip-description-color: var(--ds-color-text-white);\n --ds-tooltip-description-font: var(--ds-font-body-default-xs);\n\n /* Tooltip arrow */\n --ds-tooltip-arrow-fill: var(--ds-color-surface-solid);\n}\n\n','[data-color-scheme="legacy"] {\n /* Tooltip content wrapper */\n --ds-tooltip-border-radius: 8px;\n --ds-tooltip-background-color: var(--ds-color-surface-solid);\n --ds-tooltip-padding-vertical: 0.375rem;\n --ds-tooltip-padding-horizontal: 0.5rem;\n --ds-tooltip-z-index: 1050; /* TODO: remove this once we have a proper z-index tokens in smartling DS */\n --ds-tooltip-content-gap: 0.25rem;\n\n /* Tooltip title */\n --ds-tooltip-title-color: var(--ds-color-text-white);\n --ds-tooltip-title-font: var(--ds-font-body-strongest-s);\n\n /* Tooltip description */\n --ds-tooltip-description-color: var(--ds-color-text-white);\n --ds-tooltip-description-font: var(--ds-font-body-default-s);\n\n /* Tooltip arrow */\n --ds-tooltip-arrow-fill: var(--ds-color-surface-solid);\n}\n',':root {\n /* Checkbox */\n --ds-checkbox-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */\n --ds-checkbox-checked-bg-color: var(--ds-color-foreground-main);\n --ds-checkbox-border-disabled: var(--ds-border-width-tier-2) solid var(--ds-color-border-disabled);\n --ds-checkbox-background-color-disabled: var(--ds-color-surface-disabled);\n --ds-checkbox-focus-ring-shadow: var(--ds-shadow-focus-ring-actions);\n\n /* Indicator */\n --ds-checkbox-indicator-color: var(--ds-color-surface-main);\n --ds-checkbox-indicator-color-disabled: var(--ds-color-foreground-disabled);\n\n /* Transitions */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "opacity 120ms linear" with a semantic token */\n --ds-checkbox-indicator-transition: opacity 120ms linear;\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "background-color 120ms linear, border-color 120ms linear" with a semantic token */\n --ds-checkbox-background-transition: background-color 120ms linear, border-color 120ms linear;\n\n /* Sizes: sm */\n --ds-checkbox-sm-label-gap: var(--ds-space-page-inside-xs);\n --ds-checkbox-sm-width: var(--ds-size-actions-3xs);\n --ds-checkbox-sm-height: var(--ds-size-actions-3xs);\n --ds-checkbox-sm-border-radius: var(--ds-radius-xs);\n --ds-checkbox-sm-icon-width: var(--ds-size-icon-xs);\n --ds-checkbox-sm-icon-height: var(--ds-size-icon-xs);\n\n /* Sizes: md */\n --ds-checkbox-md-label-gap: calc(var(--ds-space-page-inside-xs) * 1.5);\n --ds-checkbox-md-width: var(--ds-size-actions-2xs);\n --ds-checkbox-md-height: var(--ds-size-actions-2xs);\n --ds-checkbox-md-border-radius: var(--ds-radius-s);\n --ds-checkbox-md-icon-width: var(--ds-size-icon-s);\n --ds-checkbox-md-icon-height: var(--ds-size-icon-s);\n}\n',"/*\n * Deprecated token aliases â DO NOT edit manually.\n * Generated by: pnpm deprecate-token\n *\n * Each alias maps an old token name to the current one via var().\n * This file is loaded in :root for global backward compatibility.\n */\n:root {\n\n /* @deprecated 2026-06-06 v0.3.12 -- use --ds-checkbox-indicator-color-disabled */\n --ds-checkbox-indicator-disabled-color: var(--ds-checkbox-indicator-color-disabled);\n}\n",'/* Legacy theme overrides */\n:root[data-color-scheme="legacy"],\ndiv[data-color-scheme="legacy"] {\n /* Checkbox */\n --ds-checkbox-border: var(--ds-border-width-tier-2) solid var(--ds-color-border-main);\n --ds-checkbox-checked-bg-color: var(--ds-color-surface-brand-solid);\n --ds-checkbox-focus-ring-shadow: var(--ds-shadow-focus-ring-actions);\n\n /* Indicator */\n --ds-checkbox-indicator-color: var(--ds-color-foreground-main-onbrand);\n\n /* Transitions */\n --ds-checkbox-indicator-transition: opacity 120ms linear;\n --ds-checkbox-background-transition: background-color 120ms linear, border-color 100ms linear;\n\n /* Sizes: sm */\n --ds-checkbox-sm-label-gap: var(--ds-space-page-inside-s);\n --ds-checkbox-sm-width: calc(var(--ds-size-actions-3xs) * 2);\n --ds-checkbox-sm-height: calc(var(--ds-size-actions-3xs) * 2);\n --ds-checkbox-sm-border-radius: var(--ds-radius-xs);\n --ds-checkbox-sm-icon-width: calc(var(--ds-size-icon-xs) * 1.5);\n --ds-checkbox-sm-icon-height: calc(var(--ds-size-icon-xs) * 1.5);\n\n /* Sizes: md */\n --ds-checkbox-md-label-gap: calc(var(--ds-space-page-inside-s) * 1.5);\n --ds-checkbox-md-width: calc(var(--ds-size-actions-2xs) * 1.667);\n --ds-checkbox-md-height: calc(var(--ds-size-actions-2xs) * 1.667);\n --ds-checkbox-md-border-radius: var(--ds-radius-s);\n --ds-checkbox-md-icon-width: calc(var(--ds-size-icon-s) * 1.3);\n --ds-checkbox-md-icon-height: calc(var(--ds-size-icon-s) * 1.3);\n}\n',':root {\n /* Switch */\n --ds-switch-border-radius: var(--ds-radius-full);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "background-color 100ms linear" with a semantic token */\n --ds-switch-transition: background-color 100ms linear;\n /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */\n --ds-switch-bg-color-checked: var(--ds-color-surface-form-selected);\n --ds-switch-focus-ring-shadow: var(--ds-shadow-focus-ring-actions);\n /* Track border, drawn as an inset box-shadow so it never shifts the track size / thumb position */\n --ds-switch-track-box-sha
3901dow-focused: inset 0 0 0 var(--ds-border-width-tier-4) var(--ds-color-border-solid);\n --ds-switch-track-box-shadow-disabled: inset 0 0 0 var(--ds-border-width-tier-2) var(--ds-color-border-disabled);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */\n --ds-switch-bg-color-disabled: var(--ds-color-surface-disabled);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */\n --ds-switch-bg-color-unchecked: var(--ds-color-surface-strong);\n /* Switch thumb */\n /* stylelint-disable-next-line smartling-ds/token-naming -- R6: "bg" â "background" */\n --ds-switch-thumb-bg-color: var(--ds-color-surface-main);\n --ds-switch-thumb-background-color-disabled: var(--ds-color-foreground-disabled);\n --ds-switch-thumb-box-shadow: var(--ds-shadow-standard-s);\n --ds-switch-thumb-border-radius: var(--ds-radius-full);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "transform 100ms linear" with a semantic token */\n --ds-switch-thumb-transition: transform 100ms linear;\n\n /* Sizes: sm */\n --ds-switch-sm-width: var(--ds-size-actions-l);\n --ds-switch-sm-height: var(--ds-size-actions-2xs);\n --ds-switch-sm-thumb-size: var(--ds-size-actions-3xs);\n --ds-switch-sm-thumb-offset: calc(var(--ds-global-size-universal-scale) * 0.2);\n --ds-switch-sm-label-gap: var(--ds-space-page-inside-xs);\n\n /* Sizes: md */\n --ds-switch-md-width: var(--ds-size-actions-2xl);\n --ds-switch-md-height: var(--ds-size-actions-xs);\n --ds-switch-md-thumb-size: var(--ds-size-actions-2xs);\n --ds-switch-md-thumb-offset: calc(var(--ds-global-size-universal-scale) * 0.2);\n --ds-switch-md-label-gap: var(--ds-space-page-inside-s);\n}\n',"/*\n * Deprecated token aliases â DO NOT edit manually.\n * Generated by: pnpm deprecate-token\n *\n * Each alias maps an old token name to the current one via var().\n * This file is loaded in :root for global backward compatibility.\n */\n:root {\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-switch-box-shadow-focused */\n --ds-switch-box-shadow-focus: var(--ds-switch-box-shadow-focused);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-switch-background-color-unchecked-focused */\n --ds-switch-bg-color-unchecked-focus: var(--ds-switch-background-color-unchecked-focused);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-switch-background-color-checked-hovered */\n --ds-switch-bg-color-checked-hover: var(--ds-switch-background-color-checked-hovered);\n\n /* @deprecated 2026-05-30 v0.3.11 -- use --ds-switch-focus-ring-shadow */\n --ds-switch-box-shadow-focused: var(--ds-switch-focus-ring-shadow);\n\n /* @deprecated 2026-05-30 v0.3.11 -- use --ds-switch-bg-color-checked */\n --ds-switch-background-color-checked-hovered: var(--ds-switch-bg-color-checked);\n\n /* @deprecated 2026-05-30 v0.3.11 -- use --ds-switch-bg-color-unchecked */\n --ds-switch-background-color-unchecked-focused: var(--ds-switch-bg-color-unchecked);\n}\n",'/* Legacy theme overrides */\n:root[data-color-scheme="legacy"],\ndiv[data-color-scheme="legacy"] {\n /* Switch */\n --ds-switch-border-radius: var(--ds-radius-full);\n --ds-switch-transition: background-color 100ms linear;\n --ds-switch-bg-color-checked: var(--ds-color-surface-brand-solid);\n --ds-switch-focus-ring-shadow: var(--ds-shadow-focus-ring-brand);\n --ds-switch-bg-color-disabled: var(--ds-color-surface-soft);\n --ds-switch-bg-color-unchecked: var(--ds-color-surface-strong);\n\n /* Switch thumb */\n --ds-switch-thumb-bg-color: var(--ds-color-surface-main);\n --ds-switch-thumb-box-shadow: var(--ds-shadow-standard-s);\n --ds-switch-thumb-border-radius: var(--ds-radius-full);\n --ds-switch-thumb-transition: transform 100ms linear;
3901\n\n /* Switch track */\n --ds-switch-track-box-shadow-focused: inset 0 0 transparent;\n\n /* Sizes: sm */\n --ds-switch-sm-width: calc(var(--ds-size-actions-l) * 1.3);\n --ds-switch-sm-height: calc(var(--ds-size-actions-xs) * 1.25);\n --ds-switch-sm-thumb-size: var(--ds-size-actions-xs);\n --ds-switch-sm-thumb-offset: calc(var(--ds-global-size-universal-scale) * 0.18);\n --ds-switch-sm-label-gap: calc(var(--ds-space-page-inside-xs) * 2);\n\n /* Sizes: md */\n --ds-switch-md-width: calc(var(--ds-size-actions-3xl) * 1.1);\n --ds-switch-md-height: calc(var(--ds-size-actions-xs) * 1.5);\n --ds-switch-md-thumb-size: var(--ds-size-actions-s);\n --ds-switch-md-thumb-offset: calc(var(--ds-global-size-universal-scale) * 0.18);\n --ds-switch-md-label-gap: calc(var(--ds-space-page-inside-s) * 1.5);\n}\n',':root {\n /* Link base */\n --ds-link-icon-offset-y: calc(-1 * var(--ds-dimension-tier-2));\n --ds-link-color: var(--ds-color-text-link);\n --ds-link-background-color: transparent;\n --ds-link-border: none;\n --ds-link-cursor: pointer;\n --ds-link-cursor-disabled: not-allowed;\n\n /* Link hover */\n --ds-link-color-hovered: var(--ds-color-text-link-hover);\n\n /* Link focus/active */\n --ds-link-color-activated: var(--ds-color-text-main);\n --ds-link-background-gradient: linear-gradient(\n var(--ds-color-surface-link-pressed) 0,\n var(--ds-color-surface-link-pressed) 100%\n );\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "100% 1rem" with a semantic token */\n --ds-link-background-size-activated: 100% 1rem;\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "0 50%" with a semantic token */\n --ds-link-background-position: 0 50%;\n --ds-link-outline: none;\n --ds-link-outline-offset: 0;\n\n /* Link disabled */\n --ds-link-color-disabled: var(--ds-color-text-disabled);\n\n /* Link icon */\n --ds-link-icon-color: var(--ds-color-foreground-link);\n --ds-link-icon-color-hovered: var(--ds-color-foreground-link-hover);\n --ds-link-icon-padding-left: var(--ds-space-page-inside-2xs);\n /* stylelint-disable-next-line smartling-ds/token-naming -- R7: replace "1" with a semantic token */\n --ds-link-icon-line-height: 1;\n\n /* Link sizes - xs */\n --ds-link-xs-font: var(--ds-font-body-default-xs);\n --ds-link-xs-background-size: 100% var(--ds-font-size-xs);\n --ds-link-xs-icon-size: var(--ds-size-icon-xs);\n\n /* Link sizes - sm */\n --ds-link-sm-font: var(--ds-font-body-default-s);\n --ds-link-sm-background-size: 100% var(--ds-font-size-xs);\n --ds-link-sm-icon-size: var(--ds-size-icon-xs);\n\n /* Link sizes - md */\n --ds-link-md-font: var(--ds-font-body-default-m);\n --ds-link-md-background-size: 100% var(--ds-font-size-m);\n --ds-link-md-icon-size: var(--ds-size-icon-s);\n\n /* Link sizes - lg */\n --ds-link-lg-font: var(--ds-font-body-default-l);\n --ds-link-lg-background-size: 100% var(--ds-font-size-m);\n --ds-link-lg-icon-size: var(--ds-size-icon-s);\n\n /* Link font weights */\n --ds-link-font-weight-regular: var(--ds-font-weight-body);\n --ds-link-font-weight-medium: var(--ds-font-weight-body-strong);\n --ds-link-font-weight-strongest: var(--ds-font-weight-body-strongest);\n}\n','/*\n * Deprecated token aliases â DO NOT edit manually.\n * Generated by: pnpm deprecate-token\n *\n * Each alias maps an old token name to the current one via var().\n * This file is loaded in :root for global backward compatibility.\n */\n:root {\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-link-color-hovered */\n --ds-link-color-hover: var(--ds-link-color-hovered);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-link-color-activated */\n --ds-link-color-active: var(--ds-link-color-activated);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-link-background-size-activated */\n --ds-link-background-size-active: var(--ds-link-background-size-activated);\n\n /* @deprecated 2026-04-17 v0.3.0 -- use --ds-link-icon-color-hovered */\n --ds-link-icon-color-hover: var(--ds-link-icon-color-hovered);\n\n /* @deprecated 2026-05-25 v0.3.7 -- size="md" inherited typography from the parent via an unresolved var(); use size="inherit" instead. Remove once all consumers are on @smartling-ui/[email protected]+ and @smartling-ui/[email protected]+ (when size="inherit" became the default). */\n /* stylelint-disable-next-line smartling-ds/no-undefined-tokens -- intentional: unresolved var() makes md inherit font from its parent (legacy behavior) */\n --ds-link-md-font: var(--ds-font-body-default-md);\n}\n\n[data-color-scheme="legacy"] {\n /* Same mdâinherit deprecation as above, scoped to the legacy color scheme. !important is required because link-legacy.css loads after this file (per the variables.css convention) and would otherwise win by source order at equal specificity. */\n /* stylelint-disable-next-line smartling-ds/no-undefined-tokens -- intentional: unresolved var() makes md inherit font from its parent (legacy behavior) */\n --ds-link-md-font: var(--ds-font-body-default-md) !important;\n}\n','[data-color-scheme="legacy"] {\n /* Link base */\n --ds-link-icon-offset-y: calc(-1 * var(--ds-dimension-tier-4));\n --ds-link-color: var(--ds-color-text-link);\n --ds-link-background-color: transparent;\n --ds-link-border: none;\n --ds-link-cursor: pointer;\n --ds-link-cursor-disabled: not-allowed;\n\n /* Link hover */\n --ds-link-color-hover: var(--ds-color-text-link-hover);\n --ds-link-color-hovered: var(--ds-color-text-link-hover);\n\n /* Link focus/active */\n --ds-link-color-active: var(--ds-color-text-main);\n --ds-link-color-activated: var(--ds-color-text-main);\n --ds-link-background-gradient: linear-gradient(\n var(--ds-color-surface-link-pressed) 0,\n var(--ds-color-surface-link-pressed) 100%\n );\n --ds-link-background-size-active: 100% 1rem;\n --ds-link-background-size-activated: 100% 1rem;\n --ds-link-background-position: 0 50%;\n --ds-link-outline: none;\n --ds-link-outline-offset: 0;\n\n /* Link disabled */\n --ds-link-color-disabled: var(--ds-color-text-disabled);\n\n /* Link icon */\n --ds-link-icon-color: var(--ds-color-foreground-link);\n --ds-link-icon-color-hover: var(--ds-color-foreground-link-hover);\n --ds-link-icon-color-hovered: var(--ds-color-foreground-link-hover);\n --ds-link-icon-padding-left: var(--ds-space-page-inside-2xs);\n --ds-link-icon-line-height: 1;\n\n /* Link sizes - xs */\n --ds-link-xs-font: var(--ds-font-body-default-xs);\n --ds-link-xs-background-size: 100% var(--ds-font-size-xs);\n --ds-link-xs-icon-size: var(--ds-size-icon-s);\n\n /* Link sizes - sm */\n --ds-link-sm-font: var(--ds-font-body-default-s);\n --ds-link-sm-background-size: 100% var(--ds-font-size-xs);\n --ds-link-sm-icon-size: var(--ds-size-icon-s);\n\n /* Link sizes - md */\n --ds-link-md-font: var(--ds-font-body-default-m);\n --ds-link-md-background-size: 100% var(--ds-font-size-m);\n --ds-link-md-icon-size: var(--ds-size-icon-m);\n\n /* Link sizes - lg */\n --ds-link-lg-font: var(--ds-font-body-default-l);\n --ds-link-lg-background-size: 100% var(--ds-font-size-m);\n --ds-link-lg-icon-size: var(--ds-size-icon-m);\n\n /* Link font weights */\n --ds-link-font-weight-regular: var(--ds-font-weight-body);\n --ds-link-font-weight-medium: var(--ds-font-weight-body-strong);\n --ds-link-font-weight-strongest: var(--ds-font-weight-body-strongest);\n}\n',':root {\n /*\n * Text tokens are decomposed into individual properties (font-size,\n * line-height, font-family) rather than the `font` shorthand. The shorthand\n * resets every font property (including font-weight), which would silently\n * pin the weight even when a consumer sets `weight="inherit"`. Keeping the\n * axes (size, weight, color) genuinely independent requires per-property\n * tokens.\n *\n * Naming follows the convention --ds-{component}-{css-property}-{variant}:\n * size/state segments come AFTER the css-property segment.\n */\n\n /* Text â font-size by size */\n --ds-text-font-size-xs: var(--ds-font-size-xs);\n --ds-text-font-size-sm: var(--ds-font-size-s);\n --ds-text-font-size-md: var(--ds-font-size-m);\n --ds-text-font-size-lg: var(--ds-font-size-l);\n --ds-text-font-size-xl: var(--ds-font-size-xl);\n\n /* Text â line-height by size */\n --ds-text-line-height-xs: var(--ds-line-height-body-xs);\n --ds-text-line-height-sm: var(--ds-line-height-body-s);\n --ds-text-line-height-md: var(--ds-line-height-body-m);\n --ds-text-line-height-lg: var(--ds-line-height-body-l);\n --ds-text-line-height-xl: var(--ds-line-height-body-xl);\n\n /* Text â font-family (shared across all sizes) */\n --ds-text-font-family: var(--ds-font-family-base);\n\n /* Text â font-weight by variant */\n --ds-text-font-we
3901ight-regular: var(--ds-font-weight-body);\n --ds-text-font-weight-medium: var(--ds-font-weight-body-strong);\n --ds-text-font-weight-strongest: var(--ds-font-weight-body-strongest);\n\n /* Shared text colors (used by both Text and Heading) */\n --ds-text-color-main: var(--ds-color-text-main);\n --ds-text-color-soft: var(--ds-color-text-soft);\n --ds-text-color-moderate: var(--ds-color-text-moderate);\n --ds-text-color-strong: var(--ds-color-text-strong);\n --ds-text-color-disabled: var(--ds-color-text-disabled);\n}\n',':root {\n /*\n * Heading tokens â visual scale decoupled from semantic level. All weights\n * are fixed at 600 (--ds-font-weight-heading), so the size class only sets\n * font-size, line-height, and font-family. The base .heading class owns\n * font-weight, not the size class.\n *\n * Six visual sizes mirror the dev-facing "Default Headings" scale from the\n * Figma typography spec â one slot per HTML heading level: 16/18/20/24/32/40.\n *\n * Font properties are exposed as individual tokens (not the `font`\n * shorthand) to keep the implementation contract from the README\'s\n * Functional Requirement 12.\n *\n * Naming follows the convention --ds-{component}-{css-property}-{variant}:\n * size segments come AFTER the css-property segment.\n */\n\n /* Heading â font-size by size */\n --ds-heading-font-size-xs: var(--ds-font-size-m);\n --ds-heading-font-size-sm: var(--ds-font-size-l);\n --ds-heading-font-size-md: var(--ds-font-size-xl);\n --ds-heading-font-size-lg: var(--ds-font-size-2xl);\n --ds-heading-font-size-xl: var(--ds-font-size-3xl);\n --ds-heading-font-size-2xl: var(--ds-font-size-4xl);\n\n /* Heading â line-height by size */\n --ds-heading-line-height-xs: var(--ds-line-height-body-m);\n --ds-heading-line-height-sm: var(--ds-line-height-body-l);\n --ds-heading-line-height-md: var(--ds-line-height-body-xl);\n --ds-heading-line-height-lg: var(--ds-line-height-heading-xs);\n --ds-heading-line-height-xl: var(--ds-line-height-heading-s);\n --ds-heading-line-height-2xl: var(--ds-line-height-heading-m);\n\n /* Heading â font-family (shared) */\n --ds-heading-font-family: var(--ds-font-family-base);\n\n /* Heading â fixed font-weight */\n --ds-heading-font-weight: var(--ds-font-weight-heading);\n}\n',":root {\n /* Root */\n --ds-field-gap-sm: var(--ds-space-page-inside-s);\n --ds-field-gap-md: var(--ds-space-page-inside-s);\n\n /* Label */\n --ds-field-label-color: var(--ds-color-text-soft);\n --ds-field-label-color-disabled: var(--ds-color-text-disabled);\n --ds-field-label-font-sm: var(--ds-font-body-strong-s);\n --ds-field-label-font-md: var(--ds-font-body-strong-s);\n\n /* Description */\n --ds-field-description-color: var(--ds-color-text-moderate);\n --ds-field-description-color-hovered: var(--ds-color-text-moderate-hover);\n --ds-field-description-color-disabled: var(--ds-color-text-disabled);\n --ds-field-description-font-sm: var(--ds-font-body-default-s);\n --ds-field-description-font-md: var(--ds-font-body-default-s);\n\n /* Error */\n --ds-field-error-color: var(--ds-color-text-error-main);\n --ds-field-error-color-hovered: var(--ds-color-text-error-main-hover);\n --ds-field-error-font-sm: var(--ds-font-body-strong-s);\n --ds-field-error-font-md: var(--ds-font-body-strong-s);\n --ds-field-error-gap: var(--ds-space-page-inside-2xs);\n\n /* Group */\n --ds-field-group-gap: var(--ds-space-page-inside-m);\n\n /* FieldSet */\n --ds-field-fieldset-border: var(--ds-border-width-tier-1) solid var(--ds-color-border-moderate);\n --ds-field-fieldset-border-radius: var(--ds-radius-m);\n --ds-field-fieldset-padding: var(--ds-space-page-inside-m);\n\n /* FieldLegend */\n --ds-field-legend-font: var(--ds-font-body-strong-m);\n --ds-field-legend-color: var(--ds-color-text-main);\n\n /* Separator */\n --ds-field-separator-border-width: var(--ds-border-width-tier-1);\n --ds-field-separator-border-color: var(--ds-color-border-soft);\n --ds-field-separator-text-padding: var(--ds-space-page-inside-xs);\n --ds-field-separator-text-font-size: var(--ds-font-size-s);\n\n /* Error â icon & list */\n --ds-field-error-icon-size: var(--ds-size-icon-s);\n --ds-field-error-list-padding: var(--ds-space-page-inside-l);\n --ds-field-error-text-margin: 0.18rem;\n\n /* Label alignment in responsive horizontal layout */\n --ds-field-label-padding-top-sm: var(--ds-input-padding-vertical-sm);\n --ds-field-label-padding-top-md: var(--ds-input-padding-vertical-md);\n}\n",'[data-color-scheme="legacy"] {\n /* Root */\n --ds-field-gap-sm: 0.625rem;\n --ds-field-gap-md: 0.625rem;\n\n /* Label */\n --ds-field-label-color: var(--ds-color-text-soft);\n --ds-field-label-color-disabled: var(--ds-color-text-disabled);\n --ds-field-label-font-sm: var(--ds-font-body-strongest-s);\n --ds-field-label-font-md: var(--ds-font-body-strongest-s);\n\n /* Description */\n --ds-field-description-color: var(--ds-color-text-moderate);\n --ds-field-description-color-disabled: var(--ds-color-text-disabled);\n --ds-field-description-font-sm: var(--ds-font-body-default-s);\n --ds-field-description-font-md: var(--ds-font-body-default-s);\n\n /* Error */\n --ds-field-error-color: var(--ds-color-text-error-main);\n --ds-field-error-font-sm: var(--ds-font-body-strong-s);\n --ds-field-error-font-md: var(--ds-font-body-strong-s);\n --ds-field-error-gap: var(--ds-space-page-inside-2xs);\n --ds-field-error-text-margin: 0.18rem;\n}\n',":root {\n --ds-uic-anchor-box-shadow-focused: var(--ds-shadow-focus-ring-actions);\n}\n\n",'[data-color-scheme="legacy"] {\n --ds-uic-anchor-box-shadow-focused: var(--ds-shadow-focus-ring-actions);\n}\n',":root {\n --ds-uic-results-toolbar-color: var(--ds-color-text-main);\n --ds-uic-results-toolbar-font: var(--ds-font-body-default-s);\n --ds-uic-results-toolbar-background-color: var(--ds-color-surface-solid);\n\n --ds-uic-results-toolbar-first-row-height: var(--ds-space-page-inside-xl);\n --ds-uic-results-toolbar-first-row-padding: var(--ds-space-page-inside-s);\n\n /* Selection items by props */\n --ds-uic-results-toolbar-gap: var(--ds-space-page-inside-s);\n --ds-uic-results-toolbar-selection-items-gap: var(--ds-uic-results-toolbar-gap);\n --ds-uic-results-toolbar-selection-items-divider-color: var(--ds-color-border-main);\n\n /* Actions button on first row */\n --ds-uic-results-toolbar-actions-button-width: fit-content;\n\n /* Sorting button on first row */\n --ds-uic-results-toolbar-sorting-button-padding-left: 0;\n --ds-uic-results-toolbar-sorting-button-padding-right: 0;\n\n /* Second row */\n --ds-uic-results-toolbar-second-row-height: fit-content;\n --ds-uic-results-toolbar-second-row-background-color: var(--ds-color-neutral-200);
3901\n --ds-uic-results-toolbar-second-row-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s);\n --ds-uic-results-toolbar-second-row-border-radius: 0;\n\n /* Filter token provided by props on second row */\n --ds-uic-results-toolbar-filter-token-color: var(--ds-color-text-main);\n}\n",'[data-color-scheme="legacy"] {\n --ds-uic-results-toolbar-color: var(--ds-color-text-main);\n --ds-uic-results-toolbar-font: var(--ds-font-body-default-s);\n --ds-uic-results-toolbar-background-color: var(--ds-color-surface-solid);\n\n --ds-uic-results-toolbar-first-row-height: fit-content;\n --ds-uic-results-toolbar-first-row-padding: 0;\n\n /* Selection items by props */\n --ds-uic-results-toolbar-gap: var(--ds-space-page-inside-s);\n --ds-uic-results-toolbar-selection-items-gap: var(--ds-uic-results-toolbar-gap);\n --ds-uic-results-toolbar-selection-items-divider-color: var(--ds-color-border-main);\n\n /* Actions button on first row */\n --ds-uic-results-toolbar-actions-button-width: fit-content;\n\n /* Sorting button on first row */\n --ds-uic-results-toolbar-sorting-button-padding-left: 0;\n --ds-uic-results-toolbar-sorting-button-padding-right: 0;\n\n /* Second row */\n --ds-uic-results-toolbar-second-row-height: 2.5rem;\n --ds-uic-results-toolbar-second-row-background-color: var(--ds-color-neutral-200);\n --ds-uic-results-toolbar-second-row-padding: var(--ds-space-page-inside-xs) var(--ds-space-page-inside-s);\n --ds-uic-results-toolbar-second-row-border-radius: var(--ds-radius-m) var(--ds-radius-m) 0 0;\n\n /* Filter token provided by props on second row */\n --ds-uic-results-toolbar-filter-token-color: var(--ds-color-text-main);\n}\n',":root {\n --ds-uic-pagination-toolbar-font: var(--ds-font-body-default-s);\n --ds-uic-pagination-toolbar-color: var(--ds-color-text-main);\n --ds-uic-pagination-toolbar-gap: var(--ds-space-page-inside-xs);\n\n --ds-uic-pagination-toolbar-text-input-padding: 0;\n --ds-uic-pagination-toolbar-text-input-width: 2.75rem;\n}\n\n",'[data-color-scheme="legacy"] {\n --ds-uic-pagination-toolbar-font: var(--ds-font-body-default-s);\n --ds-uic-pagination-toolbar-color: var(--ds-color-text-main);\n --ds-uic-pagination-toolbar-gap: var(--ds-space-page-inside-xs);\n\n --ds-uic-pagination-toolbar-text-input-padding: 0;\n --ds-uic-pagination-toolbar-text-input-width: 2.75rem;\n}\n'],sourceRoot:""}]);let t=n},267(o){o.exports=function(o){var r=[];return r.toString=function(){return this.map(function(r){var e="",s=void 0!==r[5];return r[4]&&(e+="@supports (".concat(r[4],") {")),r[2]&&(e+="@media ".concat(r[2]," {")),s&&(e+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),e+=o(r),s&&(e+="}"),r[2]&&(e+="}"),r[4]&&(e+="}"),e}).join("")},r.i=function(o,e,s,d,a){"string"==typeof o&&(o=[[null,o,void 0]]);var n={};if(s)for(var t=0;t<this.length;t++){var i=this[t][0];null!=i&&(n[i]=!0)}for(var l=0;l<o.length;l++){var c=[].concat(o[l]);s&&n[c[0]]||(void 0!==a&&(void 0===c[5]||(c[1]="@layer".concat(c[5].length>0?" ".concat(c[5]):""," {").concat(c[1],"}")),c[5]=a),e&&(c[2]&&(c[1]="@media ".concat(c[2]," {").concat(c[1],"}")),c[2]=e),d&&(c[4]?(c[1]="@supports (".concat(c[4],") {").concat(c[1],"}"),c[4]=d):c[4]="".concat(d)),r.push(c))}},r}},877(o){o.exports=function(o){var r=o[1],e=o[3];if(!e)return r;if("function"==typeof btoa){var s=btoa(unescape(encodeURIComponent(JSON.stringify(e))));return[r].concat(["/*# ".concat("sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(s)," */")]).join("\n")}return[r].join("\n")}},60(o){var r=[];function e(o){for(var e=-1,s=0;s<r.length;s++)if(r[s].identifier===o){e=s;break}return e}function s(o,s){for(var d={},a=[],n=0;n<o.length;n++){var t=o[n],i=s.base?t[0]+s.base:t[0],l=d[i]||0,c="".concat(i," ").concat(l);d[i]=l+1;var A=e(c),u={css:t[1],media:t[2],sourceMap:t[3],supports:t[4],layer:t[5]};if(-1!==A)r[A].references++,r[A].updater(u);else{var g=function(o,r){var e=r.domAPI(r);return e.update(o),function(r){r?(r.css!==o.css||r.media!==o.media||r.sourceMap!==o.sourceMap||r.supports!==o.supports||r.layer!==o.layer)&&e.update(o=r):e.remove()}}(u,s);s.byIndex=n,r.splice(n,0,{identifier:c,updater:g,references:1})}a.push(c)}return a}o.exports=function(o,d){var a=s(o=o||[],d=d||{});return function(o){o=o||[];for(var n=0;n<a.length;n++){var t=e(a[n]);r[t].references--}for(var i=s(o,d),l=0;l<a.length;l++){var c=e(a[l]);0===r[c].references&&(r[c].updater(),r.splice(c,1))}a=i}}},895(o){var r={};
3901o.exports=function(o,e){var s=function(o){if(void 0===r[o]){var e=document.querySelector(o);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(o){e=null}r[o]=e}return r[o]}(o);if(!s)throw Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");s.appendChild(e)}},360(o){o.exports=function(o){var r=document.createElement("style");return o.setAttributes(r,o.attributes),o.insert(r,o.options),r}},836(o,r,e){o.exports=function(o){var r=e.nc;r&&o.setAttribute("nonce",r)}},949(o){o.exports=function(o){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var r=o.insertStyleElement(o);return{update:function(e){var s,d,a;s="",e.supports&&(s+="@supports (".concat(e.supports,") {")),e.media&&(s+="@media ".concat(e.media," {")),(d=void 0!==e.layer)&&(s+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),s+=e.css,d&&(s+="}"),e.media&&(s+="}"),e.supports&&(s+="}"),(a=e.sourceMap)&&"undefined"!=typeof btoa&&(s+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),o.styleTagTransform(s,r,o.options)},remove:function(){var o;null===(o=r).parentNode||o.parentNode.removeChild(o)}}}},61(o){o.exports=function(o,r){if(r.styleSheet)r.styleSheet.cssText=o;else{for(;r.firstChild;)r.removeChild(r.firstChild);r.appendChild(document.createTextNode(o))}}}},v={};function p(o){var r=v[o];if(void 0!==r)return r.exports;var e=v[o]={id:o,exports:{}};return b[o](e,e.exports,p),e.exports}p.n=o=>{var r=o&&o.__esModule?()=>o.default:()=>o;return p.d(r,{a:r}),r},p.d=(o,r)=>{for(var e in r)p.o(r,e)&&!p.o(o,e)&&Object.defineProperty(o,e,{enumerable:!0,get:r[e]})},p.o=(o,r)=>Object.prototype.hasOwnProperty.call(o,r),p.nc=void 0,p.rv=()=>"1.6.8",p.ruid="[email protected]",o=p(60),r=p.n(o),e=p(949),s=p.n(e),d=p(895),a=p.n(d),n=p(836),t=p.n(n),i=p(360),l=p.n(i),c=p(61),A=p.n(c),u=p(644),(g={}).styleTagTransform=A(),g.setAttributes=t(),g.insert=a().bind(null,"head"),g.domAPI=s(),g.insertStyleElement=l(),r()(u.A,g),u.A&&u.A.locals&&u.A.locals})(); 3902//# sourceMappingURL=main.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.