UNPKG

@salesforce-ux/design-tokens

Version:

Salesforce Design System Tokens & Styling Hooks

531 lines • 62.2 kB
/**
 * Do not edit directly, this file was auto-generated.
 */

:root, .slds-theme_cosmos {
  --slds-g-duration-immediately: 0.05s; /** 0.05 seconds, 3 frames */
  --slds-g-duration-instantly: 0s; /** 0 seconds, 0 frames */
  --slds-g-duration-paused: 3.2s; /** 3.2 seconds, 192 frames */
  --slds-g-duration-promptly: 0.2s; /** 0.2 seconds, 12 frames */
  --slds-g-duration-quickly: 0.1s; /** 0.1 seconds, 6 frames */
  --slds-g-duration-slowly: 0.4s; /** 0.4 seconds, 24 frames */
  --slds-g-duration-toast-medium: 9.6s; /** 9.6 seconds */
  --slds-g-duration-toast-short: 4.8s; /** 4.8 seconds */
  --slds-g-ratio-square: 1; /** Ratio Square. */
  --slds-g-ratio-landscape: 4/3; /** Ratio Landscape. */
  --slds-g-ratio-portrait: 3/4; /** Ratio Portrait. */
  --slds-g-ratio-wide: 16/9; /** Ratio Wide. */
  --slds-g-ratio-ultrawide: 18/5; /** Ratio Ultrawide. */
  --slds-g-sizing-1: 0.125rem; /** Sizing 1 | 2px. */
  --slds-g-sizing-2: 0.25rem; /** Sizing 2 | 4px. */
  --slds-g-sizing-3: 0.5rem; /** Sizing 3 | 8px. */
  --slds-g-sizing-4: 0.75rem; /** Sizing 4 | 12px. */
  --slds-g-sizing-5: 1rem; /** Sizing 5 | 16px. */
  --slds-g-sizing-6: 1.25rem; /** Sizing 6 | 20px. */
  --slds-g-sizing-7: 1.5rem; /** Sizing 7 | 24px. */
  --slds-g-sizing-8: 1.75rem; /** Sizing 8 | 28px. */
  --slds-g-sizing-9: 2rem; /** Sizing 9. */
  --slds-g-sizing-10: 3rem; /** Sizing 10 | 48px. */
  --slds-g-sizing-11: 4rem; /** Sizing 11 | 64px. */
  --slds-g-sizing-12: 5rem; /** Sizing 12 | 80px. */
  --slds-g-sizing-13: 10rem; /** Sizing 13 | 160px. */
  --slds-g-sizing-14: 15rem; /** Sizing 14 | 240px. */
  --slds-g-sizing-15: 20rem; /** Sizing 15 | 320px. */
  --slds-g-sizing-16: 30rem; /** Sizing 16 | 480px. */
  --slds-g-sizing-base: 1rem; /** Base size multiplier. */
  --slds-g-sizing-border-1: 1px; /** Border Width 1 | 1px. */
  --slds-g-sizing-border-2: 2px; /** Border Width 2 | 2px. */
  --slds-g-sizing-border-3: 3px; /** Border Width 3 | 3px. */
  --slds-g-sizing-border-4: 4px; /** Border Width 4 | 4px. */
  --slds-g-sizing-content-1: 20ch; /** Sizing Content 1. */
  --slds-g-sizing-content-2: 45ch; /** Sizing Content 2. */
  --slds-g-sizing-content-3: 60ch; /** Sizing Content 3. */
  --slds-g-sizing-heading-1: 20ch; /** Sizing Heading 1. */
  --slds-g-sizing-heading-2: 25ch; /** Sizing Heading 2. */
  --slds-g-sizing-heading-3: 35ch; /** Sizing Heading 3. */
  --slds-g-spacing-1: 0.25rem; /** Spacing 1 | 4px. */
  --slds-g-spacing-2: 0.5rem; /** Spacing 2 | 8px. */
  --slds-g-spacing-3: 0.75rem; /** Spacing 3 | 12px. */
  --slds-g-spacing-4: 1rem; /** Spacing 4 | 16px. */
  --slds-g-spacing-5: 1.5rem; /** Spacing 5 | 24px. */
  --slds-g-spacing-6: 2rem; /** Spacing 6 | 32px. */
  --slds-g-spacing-7: 2.5rem; /** Spacing 7 | 40px. */
  --slds-g-spacing-8: 3rem; /** Spacing 8 | 48px. */
  --slds-g-spacing-9: 3.5rem; /** Spacing 9 | 56px. */
  --slds-g-spacing-10: 4rem; /** Spacing 10 | 64px. */
  --slds-g-spacing-11: 4.5rem; /** Spacing 11 | 72px. */
  --slds-g-spacing-12: 5rem; /** Spacing 12 | 80px. */
  --slds-g-spacing-var-1: var(--slds-g-spacing-1); /** Comfy (default) = 0.25rem | Compact = 0.125rem. */
  --slds-g-spacing-var-2: var(--slds-g-spacing-2); /** Comfy (default) = 0.5rem | Compact = 0.125rem. */
  --slds-g-spacing-var-3: var(--slds-g-spacing-3); /** Comfy (default) = 0.75rem | Compact = 0.25rem. */
  --slds-g-spacing-var-4: var(--slds-g-spacing-4); /** Comfy (default) = 1rem | Compact = 0.5rem. */
  --slds-g-spacing-var-5: var(--slds-g-spacing-5); /** Comfy (default) = 1.5rem | Compact = 0.75rem. */
  --slds-g-spacing-var-6: var(--slds-g-spacing-6); /** Comfy (default) = 2rem | Compact = 1rem. */
  --slds-g-spacing-var-7: var(--slds-g-spacing-7); /** Comfy (default) = 2.5rem | Compact = 1.5rem. */
  --slds-g-spacing-var-8: var(--slds-g-spacing-8); /** Comfy (default) = 3rem | Compact = 2rem. */
  --slds-g-spacing-var-9: var(--slds-g-spacing-9); /** Comfy (default) = 3.5rem | Compact = 2.5rem. */
  --slds-g-spacing-var-10: var(--slds-g-spacing-10); /** Comfy (default) = 4rem | Compact = 3rem. */
  --slds-g-spacing-var-11: var(--slds-g-spacing-11); /** Comfy (default) = 4.5rem | Compact = 3.5rem. */
  --slds-g-spacing-var-12: var(--slds-g-spacing-12); /** Comfy (default) = 5rem | Compact = 4rem. */
  --slds-g-spacing-var-block-1: var(--slds-g-spacing-1); /** Comfy (default) = 0.25rem | Compact = 0.125rem. */
  --slds-g-spacing-var-block-2: var(--slds-g-spacing-2); /** Comfy (default) = 0.5rem | Compact = 0.25rem. */
  --slds-g-spacing-var-block-3: var(--slds-g-spacing-3); /** Comfy (default) = 0.75rem | Compact = 0.5rem. */
  --slds-g-spacing-var-block-4: var(--slds-g-spacing-4); /** Comfy (default) = 1rem | Compact = 0.5rem. */
  --slds-g-spacing-var-block-5: var(--slds-g-spacing-5); /** Comfy (default) = 1.5rem | Compact = 0.75rem. */
  --slds-g-spacing-var-block-6: var(--slds-g-spacing-6); /** Comfy (default) = 2rem | Compact = 1rem. */
  --slds-g-spacing-var-block-7: var(--slds-g-spacing-7); /** Comfy (default) = 2.5rem | Compact = 1.5rem. */
  --slds-g-spacing-var-block-8: var(--slds-g-spacing-8); /** Comfy (default) = 3rem | Compact = 2rem. */
  --slds-g-spacing-var-block-9: var(--slds-g-spacing-9); /** Comfy (default) = 3.5rem | Compact = 2.5rem. */
  --slds-g-spacing-var-block-10: var(--slds-g-spacing-10); /** Comfy (default) = 4rem | Compact = 3rem. */
  --slds-g-spacing-var-block-11: var(--slds-g-spacing-11); /** Comfy (default) = 4.5rem | Compact = 3.5rem. */
  --slds-g-spacing-var-block-12: var(--slds-g-spacing-12); /** Comfy (default) = 5rem | Compact = 4rem. */
  --slds-g-spacing-var-inline-1: var(--slds-g-spacing-1); /** Comfy (default) = 0.25rem | Compact = 0.125rem. */
  --slds-g-spacing-var-inline-2: var(--slds-g-spacing-2); /** Comfy (default) = 0.5rem | Compact = 0.25rem. */
  --slds-g-spacing-var-inline-3: var(--slds-g-spacing-3); /** Comfy (default) = 0.75rem | Compact = 0.5rem. */
  --slds-g-spacing-var-inline-4: var(--slds-g-spacing-4); /** Comfy (default) = 1rem | Compact = 0.75rem. */
  --slds-g-spacing-var-inline-5: var(--slds-g-spacing-5); /** Comfy (default) = 1.5rem | Compact = 0.75rem. */
  --slds-g-spacing-var-inline-6: var(--slds-g-spacing-6); /** Comfy (default) = 2rem | Compact = 1rem. */
  --slds-g-spacing-var-inline-7: var(--slds-g-spacing-7); /** Comfy (default) = 2.5rem | Compact = 1.5rem. */
  --slds-g-spacing-var-inline-8: var(--slds-g-spacing-8); /** Comfy (default) = 3rem | Compact = 2rem. */
  --slds-g-spacing-var-inline-9: var(--slds-g-spacing-9); /** Comfy (default) = 3.5rem | Compact = 2.5rem. */
  --slds-g-spacing-var-inline-10: var(--slds-g-spacing-10); /** Comfy (default) = 4rem | Compact = 3rem. */
  --slds-g-spacing-var-inline-11: var(--slds-g-spacing-11); /** Comfy (default) = 4.5rem | Compact = 3.5rem. */
  --slds-g-spacing-var-inline-12: var(--slds-g-spacing-12); /** Comfy (default) = 5rem | Compact = 4rem. */
  --slds-g-radius-border-1: 0.25rem; /** Radius Border 1 | 4px. */
  --slds-g-radius-border-2: 0.5rem; /** Radius Border 2 | 8px. */
  --slds-g-radius-border-3: 0.75rem; /** Radius Border 3 | 12px. */
  --slds-g-radius-border-4: 1.25rem; /** Radius Border 4 | 20px. */
  --slds-g-radius-border-pill: 15rem; /** Radius Border Pill. */
  --slds-g-radius-border-circle: 100%; /** Radius Border Circle | 100% 100px. */
  --slds-g-font-family: var(--slds-g-font-family-base); /** System font stack for your application. */
  --slds-g-font-family-base: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /** Font Family Base. */
  --slds-g-font-family-monospace: Consolas, Menlo, Monaco, Courier, monospace; /** Font Family Monospace. */
  --slds-g-font-weight-1: 100; /** Font Weight 1 | 100. */
  --slds-g-font-weight-2: 200; /** Font Weight 2 | 200. */
  --slds-g-font-weight-3: 300; /** Light | 300. */
  --slds-g-font-weight-4: 400; /** Regular | 400. */
  --slds-g-font-weight-5: 500; /** Font Weight 5 | 500. */
  --slds-g-font-weight-6: 600; /** SemiBold | 600. */
  --slds-g-font-weight-7: 700; /** Bold | 700. */
  --slds-g-font-weight-bold: bold; /** Bold font-weight, use to increase emphasis. */
  --slds-g-font-line-height-1: 1; /** Line-height 1. */
  --slds-g-font-line-height-2: 1.25; /** Line-height 2. */
  --slds-g-font-line-height-3: 1.375; /** Line-height 3. */
  --slds-g-font-line-height-4: 1.5; /** Line-height 4. */
  --slds-g-font-line-height-5: 1.75; /** Line-height 5. */
  --slds-g-font-line-height-6: 2; /** Line-height 6. */
  --slds-g-font-line-height-base: 1.5; /** Default line-height for your application. */
  --slds-g-font-line-height-var-base: var(--slds-g-font-line-height-base); /** Default variable line-height for your application. */
  --slds-g-font-lineheight-1: var(--slds-g-font-line-height-1); /** Font Lineheight 1 | 16px. */
  --slds-g-font-lineheight-2: var(--slds-g-font-line-height-2); /** Font Lineheight 2 | 20px. */
  --slds-g-font-lineheight-3: var(--slds-g-font-line-height-3); /** Font Lineheight 3 | 22px. */
  --slds-g-font-lineheight-4: var(--slds-g-font-line-height-4); /** Font Lineheight 4 | 24px. */
  --slds-g-font-lineheight-5: var(--slds-g-font-line-height-5); /** Font Lineheight 5 | 28px. */
  --slds-g-font-lineheight-6: var(--slds-g-font-line-height-6); /** Font Lineheight 6 | 32px. */
  --slds-g-font-lineheight-base: var(--slds-g-font-line-height-base); /** Font Lineheight Base | 1.5. */
  --slds-g-font-lineheight-var-base: var(--slds-g-font-line-height-var-base);
  --slds-g-font-scale-1: 0.875rem; /** Font Scale 1 | 14px. */
  --slds-g-font-scale-2: 1rem; /** Font Scale 2 | 16px. */
  --slds-g-font-scale-3: 1.25rem; /** Font Scale 3 | 20px. */
  --slds-g-font-scale-4: 1.5rem; /** Font Scale 4 | 24px. */
  --slds-g-font-scale-5: 1.75rem; /** Font Scale 5 | 28px. */
  --slds-g-font-scale-6: 2rem; /** Font Scale 6 | 32px. */
  --slds-g-font-scale-7: 2.5rem; /** Font Scale 7 | 40px. */
  --slds-g-font-scale-8: 3rem; /** Font Scale 8 | 48px. */
  --slds-g-font-scale-9: var(--slds-g-font-scale-8); /** Font Scale 9 | 48px. */
  --slds-g-font-scale-10: var(--slds-g-font-scale-8); /** Font Scale 10 | 48px. */
  --slds-g-font-scale-base: 0.8125rem; /** Default font-scale ratio for your application. */
  --slds-g-font-scale-ratio: 1.15; /** Font Scale Ratio | 1.15. */
  --slds-g-font-scale-neg-1: 0.75rem; /** Font Scale Neg 1 | 12px. */
  --slds-g-font-scale-neg-2: 0.625rem; /** Font Scale Neg 2 | 10px. */
  --slds-g-font-scale-neg-3: var(--slds-g-font-scale-neg-2); /** Font Scale Neg 3 | 10px. */
  --slds-g-font-scale-neg-4: var(--slds-g-font-scale-neg-3); /** Font Scale Neg 4 | 10px. */
  --slds-g-font-scale-var-1: var(--slds-g-font-scale-1); /** Comfy (default) = 0.875rem | Compact = 0.875rem. */
  --slds-g-font-scale-var-2: var(--slds-g-font-scale-2); /** Comfy (default) = 1rem | Compact = 0.875rem. */
  --slds-g-font-scale-var-3: var(--slds-g-font-scale-3); /** Comfy (default) = 1.25rem | Compact = 1rem. */
  --slds-g-font-scale-var-4: var(--slds-g-font-scale-4); /** Comfy (default) = 1.5rem | Compact = 1.25rem. */
  --slds-g-font-scale-var-5: var(--slds-g-font-scale-5); /** Comfy (default) = 1.75rem | Compact = 1.75rem. */
  --slds-g-font-scale-var-6: var(--slds-g-font-scale-6); /** Comfy (default) = 2rem | Compact = 2rem. */
  --slds-g-font-scale-var-7: var(--slds-g-font-scale-7); /** Comfy (default) = 2.5rem | Compact = 2.5rem. */
  --slds-g-font-scale-var-8: var(--slds-g-font-scale-8); /** Comfy (default) = 3rem | Compact = 3rem. */
  --slds-g-font-scale-var-9: var(--slds-g-font-scale-var-8); /** Comfy (default) = 3rem | Compact = 3rem. */
  --slds-g-font-scale-var-10: var(--slds-g-font-scale-var-8); /** Comfy (default) = 3rem | Compact = 3rem. */
  --slds-g-font-scale-var-base: var(--slds-g-font-scale-base); /** Default variable font-scale ratio for your application. */
  --slds-g-font-scale-var-neg-1: var(--slds-g-font-scale-neg-1); /** Comfy (default) = 0.75rem | Compact = 0.75rem. */
  --slds-g-font-scale-var-neg-2: var(--slds-g-font-scale-neg-2); /** Comfy (default) = 0.625rem | Compact = 0.625rem. */
  --slds-g-font-scale-var-neg-3: var(--slds-g-font-scale-var-neg-2); /** Comfy (default) = 0.625rem | Compact = 0.625rem. */
  --slds-g-font-scale-var-neg-4: var(--slds-g-font-scale-var-neg-3); /** Comfy (default) = 0.625rem | Compact = 0.625rem. */
  --slds-g-font-size-base: var(--slds-g-font-scale-base); /** Font Size Base | 13px. */
  --slds-g-font-line-clamp: 3; /** Default line-clamp. */
  --slds-g-color-palette-neutral-0: light-dark(#000, #fff); /** Step 0 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-10: light-dark(#181818, #e5e5e5); /** Step 10 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-15: light-dark(#242424, #d7d7d7); /** Step 15 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-20: light-dark(#2e2e2e, #c9c9c9); /** Step 20 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-30: light-dark(#444, #aeaeae); /** Step 30 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-40: light-dark(#5c5c5c, #939393); /** Step 40 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-50: #757575; /** Step 50 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-60: light-dark(#939393, #5c5c5c); /** Step 60 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-65: light-dark(#a0a0a0, #515151); /** Step 65 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-70: light-dark(#aeaeae, #444); /** Step 70 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-80: light-dark(#c9c9c9, #2e2e2e); /** Step 80 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-90: light-dark(#e5e5e5, #181818); /** Step 90 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-95: light-dark(#f3f3f3, #020202); /** Step 95 in the palette Neutral scale. */
  --slds-g-color-palette-neutral-100: light-dark(#fff, #000); /** Step 100 in the palette Neutral scale. */
  --slds-g-color-palette-blue-10: light-dark(#001639, #d8e6fe); /** Step 10 in the palette Blue scale. */
  --slds-g-color-palette-blue-15: light-dark(#03234d, #c2d8ff); /** Step 15 in the palette Blue scale. */
  --slds-g-color-palette-blue-20: light-dark(#032d60, #aacbff); /** Step 20 in the palette Blue scale. */
  --slds-g-color-palette-blue-30: light-dark(#014486, #78b0fd); /** Step 30 in the palette Blue scale. */
  --slds-g-color-palette-blue-40: light-dark(#0b5cab, #1b96ff); /** Step 40 in the palette Blue scale. */
  --slds-g-color-palette-blue-50: #0176d3; /** Step 50 in the palette Blue scale. */
  --slds-g-color-palette-blue-60: light-dark(#1b96ff, #0b5cab); /** Step 60 in the palette Blue scale. */
  --slds-g-color-palette-blue-65: light-dark(#57a3fd, #044f98); /** Step 65 in the palette Blue scale. */
  --slds-g-color-palette-blue-70: light-dark(#78b0fd, #014486); /** Step 70 in the palette Blue scale. */
  --slds-g-color-palette-blue-80: light-dark(#aacbff, #032d60); /** Step 80 in the palette Blue scale. */
  --slds-g-color-palette-blue-90: light-dark(#d8e6fe, #001639); /** Step 90 in the palette Blue scale. */
  --slds-g-color-palette-blue-95: light-dark(#eef4ff, #000310); /** Step 95 in the palette Blue scale. */
  --slds-g-color-palette-cloud-blue-10: light-dark(#001a28, #cfe9fe); /** Step 10 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-15: light-dark(#0a2636, #aeddfe); /** Step 15 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-20: light-dark(#023248, #90d0fe); /** Step 20 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-30: light-dark(#084968, #1ab9ff); /** Step 30 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-40: light-dark(#05628a, #0d9dda); /** Step 40 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-50: #107cad; /** Step 50 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-60: light-dark(#0d9dda, #05628a); /** Step 60 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-65: light-dark(#08abed, #075579); /** Step 65 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-70: light-dark(#1ab9ff, #084968); /** Step 70 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-80: light-dark(#90d0fe, #023248); /** Step 80 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-90: light-dark(#cfe9fe, #001a28); /** Step 90 in the palette Cloud Blue scale. */
  --slds-g-color-palette-cloud-blue-95: light-dark(#eaf5fe, #000409); /** Step 95 in the palette Cloud Blue scale. */
  --slds-g-color-palette-electric-blue-10: light-dark(#001642, #d6e6ff); /** Step 10 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-15: light-dark(#001e5b, #c2daff); /** Step 15 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-20: light-dark(#002775, #a8cbff); /** Step 20 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-30: light-dark(#022ac0, #7cb1fe); /** Step 30 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-40: light-dark(#0250d9, #4992fe); /** Step 40 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-50: #066afe; /** Step 50 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-60: light-dark(#4992fe, #0250d9); /** Step 60 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-65: light-dark(#5f9ffe, #003ecd); /** Step 65 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-70: light-dark(#7cb1fe, #022ac0); /** Step 70 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-80: light-dark(#a8cbff, #002775); /** Step 80 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-90: light-dark(#d6e6ff, #001642); /** Step 90 in the palette Electric Blue scale. */
  --slds-g-color-palette-electric-blue-95: light-dark(#edf4ff, #000314); /** Step 95 in the palette Electric Blue scale. */
  --slds-g-color-palette-green-10: light-dark(#071b12, #cdefc4); /** Step 10 in the palette Green scale. */
  --slds-g-color-palette-green-15: light-dark(#0c2912, #aee4a9); /** Step 15 in the palette Green scale. */
  --slds-g-color-palette-green-20: light-dark(#143b25, #91db8b); /** Step 20 in the palette Green scale. */
  --slds-g-color-palette-green-30: light-dark(#194e31, #45c65a); /** Step 30 in the palette Green scale. */
  --slds-g-color-palette-green-40: light-dark(#396547, #3ba755); /** Step 40 in the palette Green scale. */
  --slds-g-color-palette-green-50: #2e844a; /** Step 50 in the palette Green scale. */
  --slds-g-color-palette-green-60: light-dark(#3ba755, #396547); /** Step 60 in the palette Green scale. */
  --slds-g-color-palette-green-65: light-dark(#41b658, #1e5c39); /** Step 65 in the palette Green scale. */
  --slds-g-color-palette-green-70: light-dark(#45c65a, #194e31); /** Step 70 in the palette Green scale. */
  --slds-g-color-palette-green-80: light-dark(#91db8b, #143b25); /** Step 80 in the palette Green scale. */
  --slds-g-color-palette-green-90: light-dark(#cdefc4, #071b12); /** Step 90 in the palette Green scale. */
  --slds-g-color-palette-green-95: light-dark(#ebf7e6, #010502); /** Step 95 in the palette Green scale. */
  --slds-g-color-palette-hot-orange-10: light-dark(#281202, #ffded5); /** Step 10 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-15: light-dark(#421604, #feccbd); /** Step 15 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-20: light-dark(#4a2413, #feb9a5); /** Step 20 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-30: light-dark(#7e2600, #ff906e); /** Step 30 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-40: light-dark(#aa3001, #ff5d2d); /** Step 40 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-50: #d83a00; /** Step 50 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-60: light-dark(#ff5d2d, #aa3001); /** Step 60 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-65: light-dark(#ff784f, #942b00); /** Step 65 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-70: light-dark(#ff906e, #7e2600); /** Step 70 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-80: light-dark(#feb9a5, #4a2413); /** Step 80 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-90: light-dark(#ffded5, #281202); /** Step 90 in the palette Hot Orange scale. */
  --slds-g-color-palette-hot-orange-95: light-dark(#fef1ed, #090200); /** Step 95 in the palette Hot Orange scale. */
  --slds-g-color-palette-indigo-10: light-dark(#17094e, #e0e5f8); /** Step 10 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-15: light-dark(#1f0974, #cfd4f7); /** Step 15 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-20: light-dark(#270c92, #bec7f6); /** Step 20 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-30: light-dark(#2f2cb7, #9ea9f1); /** Step 30 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-40: light-dark(#3a49da, #7f8ced); /** Step 40 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-50: #5867e8; /** Step 50 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-60: light-dark(#7f8ced, #3a49da); /** Step 60 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-65: light-dark(#8e9bef, #343bc8); /** Step 65 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-70: light-dark(#9ea9f1, #2f2cb7); /** Step 70 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-80: light-dark(#bec7f6, #270c92); /** Step 80 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-90: light-dark(#e0e5f8, #17094e); /** Step 90 in the palette Indigo scale. */
  --slds-g-color-palette-indigo-95: light-dark(#f1f3fb, #060116); /** Step 95 in the palette Indigo scale. */
  --slds-g-color-palette-orange-10: light-dark(#201600, #fedfd0); /** Step 10 in the palette Orange scale. */
  --slds-g-color-palette-orange-15: light-dark(#2e2204, #ffccad); /** Step 15 in the palette Orange scale. */
  --slds-g-color-palette-orange-20: light-dark(#3e2b02, #ffba90); /** Step 20 in the palette Orange scale. */
  --slds-g-color-palette-orange-30: light-dark(#5f3e02, #fe9339); /** Step 30 in the palette Orange scale. */
  --slds-g-color-palette-orange-40: light-dark(#825101, #dd7a01); /** Step 40 in the palette Orange scale. */
  --slds-g-color-palette-orange-50: #a96404; /** Step 50 in the palette Orange scale. */
  --slds-g-color-palette-orange-60: light-dark(#dd7a01, #825101); /** Step 60 in the palette Orange scale. */
  --slds-g-color-palette-orange-65: light-dark(#f38303, #704801); /** Step 65 in the palette Orange scale. */
  --slds-g-color-palette-orange-70: light-dark(#fe9339, #5f3e02); /** Step 70 in the palette Orange scale. */
  --slds-g-color-palette-orange-80: light-dark(#ffba90, #3e2b02); /** Step 80 in the palette Orange scale. */
  --slds-g-color-palette-orange-90: light-dark(#fedfd0, #201600); /** Step 90 in the palette Orange scale. */
  --slds-g-color-palette-orange-95: light-dark(#fff1ea, #060300); /** Step 95 in the palette Orange scale. */
  --slds-g-color-palette-pink-10: light-dark(#370114, #fddde3); /** Step 10 in the palette Pink scale. */
  --slds-g-color-palette-pink-15: light-dark(#4b0620, #fec8d4); /** Step 15 in the palette Pink scale. */
  --slds-g-color-palette-pink-20: light-dark(#61022a, #fdb6c5); /** Step 20 in the palette Pink scale. */
  --slds-g-color-palette-pink-30: light-dark(#8a033e, #fe8aa7); /** Step 30 in the palette Pink scale. */
  --slds-g-color-palette-pink-40: light-dark(#b60554, #ff538a); /** Step 40 in the palette Pink scale. */
  --slds-g-color-palette-pink-50: #e3066a; /** Step 50 in the palette Pink scale. */
  --slds-g-color-palette-pink-60: light-dark(#ff538a, #b60554); /** Step 60 in the palette Pink scale. */
  --slds-g-color-palette-pink-65: light-dark(#fe7298, #a00449); /** Step 65 in the palette Pink scale. */
  --slds-g-color-palette-pink-70: light-dark(#fe8aa7, #8a033e); /** Step 70 in the palette Pink scale. */
  --slds-g-color-palette-pink-80: light-dark(#fdb6c5, #61022a); /** Step 80 in the palette Pink scale. */
  --slds-g-color-palette-pink-90: light-dark(#fddde3, #370114); /** Step 90 in the palette Pink scale. */
  --slds-g-color-palette-pink-95: light-dark(#fef0f3, #0f0003); /** Step 95 in the palette Pink scale. */
  --slds-g-color-palette-purple-10: light-dark(#240643, #ece1f9); /** Step 10 in the palette Purple scale. */
  --slds-g-color-palette-purple-15: light-dark(#300b60, #e2d0f6); /** Step 15 in the palette Purple scale. */
  --slds-g-color-palette-purple-20: light-dark(#401075, #d7bff2); /** Step 20 in the palette Purple scale. */
  --slds-g-color-palette-purple-30: light-dark(#5a1ba9, #c29ef1); /** Step 30 in the palette Purple scale. */
  --slds-g-color-palette-purple-40: light-dark(#7526e3, #ad7bee); /** Step 40 in the palette Purple scale. */
  --slds-g-color-palette-purple-50: #9050e9; /** Step 50 in the palette Purple scale. */
  --slds-g-color-palette-purple-60: light-dark(#ad7bee, #7526e3); /** Step 60 in the palette Purple scale. */
  --slds-g-color-palette-purple-65: light-dark(#b78def, #681dc9); /** Step 65 in the palette Purple scale. */
  --slds-g-color-palette-purple-70: light-dark(#c29ef1, #5a1ba9); /** Step 70 in the palette Purple scale. */
  --slds-g-color-palette-purple-80: light-dark(#d7bff2, #401075); /** Step 80 in the palette Purple scale. */
  --slds-g-color-palette-purple-90: light-dark(#ece1f9, #240643); /** Step 90 in the palette Purple scale. */
  --slds-g-color-palette-purple-95: light-dark(#f6f2fb, #070114); /** Step 95 in the palette Purple scale. */
  --slds-g-color-palette-red-10: light-dark(#300c01, #feded8); /** Step 10 in the palette Red scale. */
  --slds-g-color-palette-red-15: light-dark(#4a0c04, #feccc3); /** Step 15 in the palette Red scale. */
  --slds-g-color-palette-red-20: light-dark(#640103, #feb8ab); /** Step 20 in the palette Red scale. */
  --slds-g-color-palette-red-30: light-dark(#8e030f, #fe8f7d); /** Step 30 in the palette Red scale. */
  --slds-g-color-palette-red-40: light-dark(#ba0517, #fe5c4c); /** Step 40 in the palette Red scale. */
  --slds-g-color-palette-red-50: #ea001e; /** Step 50 in the palette Red scale. */
  --slds-g-color-palette-red-60: light-dark(#fe5c4c, #ba0517); /** Step 60 in the palette Red scale. */
  --slds-g-color-palette-red-65: light-dark(#fe7765, #a40413); /** Step 65 in the palette Red scale. */
  --slds-g-color-palette-red-70: light-dark(#fe8f7d, #8e030f); /** Step 70 in the palette Red scale. */
  --slds-g-color-palette-red-80: light-dark(#feb8ab, #640103); /** Step 80 in the palette Red scale. */
  --slds-g-color-palette-red-90: light-dark(#feded8, #300c01); /** Step 90 in the palette Red scale. */
  --slds-g-color-palette-red-95: light-dark(#fef1ee, #0c0200); /** Step 95 in the palette Red scale. */
  --slds-g-color-palette-teal-10: light-dark(#071b12, #acf3e4); /** Step 10 in the palette Teal scale. */
  --slds-g-color-palette-teal-15: light-dark(#072825, #76ead9); /** Step 15 in the palette Teal scale. */
  --slds-g-color-palette-teal-20: light-dark(#023434, #04e1cb); /** Step 20 in the palette Teal scale. */
  --slds-g-color-palette-teal-30: light-dark(#024d4c, #01c3b3); /** Step 30 in the palette Teal scale. */
  --slds-g-color-palette-teal-40: light-dark(#056764, #06a59a); /** Step 40 in the palette Teal scale. */
  --slds-g-color-palette-teal-50: #0b827c; /** Step 50 in the palette Teal scale. */
  --slds-g-color-palette-teal-60: light-dark(#06a59a, #056764); /** Step 60 in the palette Teal scale. */
  --slds-g-color-palette-teal-65: light-dark(#03b4a7, #035a58); /** Step 65 in the palette Teal scale. */
  --slds-g-color-palette-teal-70: light-dark(#01c3b3, #024d4c); /** Step 70 in the palette Teal scale. */
  --slds-g-color-palette-teal-80: light-dark(#04e1cb, #023434); /** Step 80 in the palette Teal scale. */
  --slds-g-color-palette-teal-90: light-dark(#acf3e4, #071b12); /** Step 90 in the palette Teal scale. */
  --slds-g-color-palette-teal-95: light-dark(#def9f3, #010502); /** Step 95 in the palette Teal scale. */
  --slds-g-color-palette-violet-10: light-dark(#2e0039, #f2defe); /** Step 10 in the palette Violet scale. */
  --slds-g-color-palette-violet-15: light-dark(#3d0157, #eccdfe); /** Step 15 in the palette Violet scale. */
  --slds-g-color-palette-violet-20: light-dark(#580276, #e5b9fe); /** Step 20 in the palette Violet scale. */
  --slds-g-color-palette-violet-30: light-dark(#730394, #d892fe); /** Step 30 in the palette Violet scale. */
  --slds-g-color-palette-violet-40: light-dark(#9602c7, #cb65ff); /** Step 40 in the palette Violet scale. */
  --slds-g-color-palette-violet-50: #ba01ff; /** Step 50 in the palette Violet scale. */
  --slds-g-color-palette-violet-60: light-dark(#cb65ff, #9602c7); /** Step 60 in the palette Violet scale. */
  --slds-g-color-palette-violet-65: light-dark(#d17dfe, #8402ad); /** Step 65 in the palette Violet scale. */
  --slds-g-color-palette-violet-70: light-dark(#d892fe, #730394); /** Step 70 in the palette Violet scale. */
  --slds-g-color-palette-violet-80: light-dark(#e5b9fe, #580276); /** Step 80 in the palette Violet scale. */
  --slds-g-color-palette-violet-90: light-dark(#f2defe, #2e0039); /** Step 90 in the palette Violet scale. */
  --slds-g-color-palette-violet-95: light-dark(#f9f0ff, #060300); /** Step 95 in the palette Violet scale. */
  --slds-g-color-palette-yellow-10: light-dark(#281202, #f9e3b6); /** Step 10 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-15: light-dark(#371e03, #f8d462); /** Step 15 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-20: light-dark(#4f2100, #fcc003); /** Step 20 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-30: light-dark(#6f3400, #e4a201); /** Step 30 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-40: light-dark(#8c4b02, #ca8501); /** Step 40 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-50: #a96504; /** Step 50 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-60: light-dark(#ca8501, #8c4b02); /** Step 60 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-65: light-dark(#da9401, #824308); /** Step 65 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-70: light-dark(#e4a201, #6f3400); /** Step 70 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-80: light-dark(#fcc003, #4f2100); /** Step 80 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-90: light-dark(#f9e3b6, #281202); /** Step 90 in the palette Yellow scale. */
  --slds-g-color-palette-yellow-95: light-dark(#fbf3e0, #090200); /** Step 95 in the palette Yellow scale. */
  --slds-g-color-surface-1: light-dark(#fff, #242424); /** Color surface used for page backgrounds. */
  --slds-g-color-surface-2: light-dark(#f3f3f3, #181818); /** Color surface used for darker page backgrounds. */
  --slds-g-color-surface-3: light-dark(#f3f3f3, #2e2e2e); /** Color surface used for containers. */
  --slds-g-color-surface-container-1: light-dark(#fff, #242424); /** Default container background fill for components such as cards and modals. */
  --slds-g-color-surface-container-2: light-dark(#f3f3f3, #181818); /** Darker color for container background fill for components. */
  --slds-g-color-surface-container-3: light-dark(#e5e5e5, #2e2e2e); /** Darkest color for container background fill for components. */
  --slds-g-color-surface-container-inverse-1: light-dark(#032d60, #aacbff); /** Inverse color container background fill for components. Always pair with on-surface-inverse-1. */
  --slds-g-color-surface-container-inverse-2: light-dark(#03234d, #78b0fd); /** Inverse darker color container background fill for components. Always pair with on-surface-inverse-2. */
  --slds-g-color-surface-inverse-1: light-dark(#032d60, #aacbff); /** Inverse page background. Always pair with on-surface-inverse-1. */
  --slds-g-color-surface-inverse-2: light-dark(#03234d, #d8e6fe); /** Darker inverse page background. Always pair with on-surface-inverse-2. */
  --slds-g-color-on-accent-1: #fff; /** Text and icon fill color displayed on branded containers. Always pair with on-accent-container-1. */
  --slds-g-color-on-accent-2: light-dark(#fff, var(--slds-r-color-brand-40)); /** Text and icon fill color displayed on branded containers. Always pair with on-accent-container-2. */
  --slds-g-color-on-accent-3: light-dark(#fff, var(--slds-r-color-brand-30)); /** Text and icon fill color displayed on branded containers. Always pair with on-accent-container-3. */
  --slds-g-color-on-surface-1: light-dark(#5c5c5c, #aeaeae); /** Lightest text and icon fill. Used for body text, placeholder text, field labels, sub-headings, and taglines. */
  --slds-g-color-on-surface-2: light-dark(#2e2e2e, #e5e5e5); /** Darker text and icon fills used for secondary and tertiary headings, dark body copy, and filled input fields. */
  --slds-g-color-on-surface-3: light-dark(#03234d, #d8e6fe); /** Darkest text and icon fill used for title and pages or components. */
  --slds-g-color-on-surface-inverse-1: light-dark(#fff, #181818); /** Lightest text and icon fill on dark backgrounds. Always pair with surface-inverse-1 or surface-container-inverse-1. */
  --slds-g-color-on-surface-inverse-2: light-dark(#a8cbff, #002775); /** Darker text and icon fill on dark backgrounds (50 to 100). Always pair with surface-inverse-2 or surface-container-inverse-2. */
  --slds-g-color-on-info-1: light-dark(var(--slds-r-color-info-40), var(--slds-r-color-info-90)); /** Step 1 in the On Info scale for colors that define the on info colors. */
  --slds-g-color-on-success-1: light-dark(var(--slds-r-color-success-40), var(--slds-r-color-success-90)); /** Step 1 in the On Success scale for colors that define the on success colors. */
  --slds-g-color-on-success-2: light-dark(var(--slds-r-color-success-30), var(--slds-r-color-success-95)); /** Step 2 in the On Success scale for colors that define the on success colors. */
  --slds-g-color-on-warning-1: light-dark(var(--slds-r-color-warning-40), var(--slds-r-color-warning-90)); /** Step 1 in the On Warning scale. */
  --slds-g-color-on-error-1: light-dark(var(--slds-r-color-error-40), var(--slds-r-color-error-90)); /** Fill color for text and icons displayed within an error container. Always pair with error-container-1. */
  --slds-g-color-on-error-2: light-dark(var(--slds-r-color-error-30), var(--slds-r-color-error-95)); /** Fill color for text and icons displayed within an error container. Always pair with error-container-2. */
  --slds-g-color-on-disabled-1: #757575; /** Fill color for text and icons displayed within disabled-container-1 (netural-100). Always pair with disabled-container-1. */
  --slds-g-color-on-disabled-2: light-dark(#757575, #939393); /** Fill color for text and icons displayed within disabled-container-2 (neutral-80). Always pair with disabled-container-2. */
  --slds-g-color-border-1: light-dark(#c9c9c9, #444); /** Borders for decorative components or divider lines between content. */
  --slds-g-color-border-2: light-dark(#5c5c5c, #757575); /** Border for functional or interactive components. */
  --slds-g-color-border-accent-1: var(--slds-r-color-brand-50); /** Border color for branded containers. */
  --slds-g-color-border-accent-2: light-dark(var(--slds-r-color-brand-40), var(--slds-r-color-brand-70)); /** Border color for branded containers. */
  --slds-g-color-border-accent-3: light-dark(var(--slds-r-color-brand-30), var(--slds-r-color-brand-80)); /** Hover border color for branded containers. */
  --slds-g-color-border-inverse-1: light-dark(#f3f3f3, #181818); /** Border for functional or interactive components on dark backgrounds. */
  --slds-g-color-border-inverse-2: light-dark(#032d60, #aacbff); /** Borders for decorative components or divider lines between content on dark backgrounds. */
  --slds-g-color-border-success-1: var(--slds-g-color-success-base-40); /** Step 1 in the Border Success scale for colors that define the borders of success containers. */
  --slds-g-color-border-success-2: var(--slds-g-color-success-base-30); /** Step 2 in the Border Success scale for colors that define the borders of success containers. */
  --slds-g-color-border-warning-1: light-dark(var(--slds-r-color-warning-60), var(--slds-r-color-warning-70)); /** Step 1 in the Border Warning scale for colors that define the borders of warning containers. */
  --slds-g-color-border-error-1: light-dark(var(--slds-r-color-error-40), var(--slds-r-color-error-70)); /** Border color for error containers such as destructive buttons. */
  --slds-g-color-border-error-2: light-dark(var(--slds-r-color-error-30), var(--slds-r-color-error-80)); /** Hover border color for error containers such as destructive buttons. */
  --slds-g-color-border-disabled-1: var(--slds-g-color-neutral-base-50); /** Border color for disabled containers (border-2 becomes border-disabled-1 for disabled states). */
  --slds-g-color-border-disabled-2: var(--slds-g-color-neutral-base-40); /** Border color for disabled UI elements. This is one step darker than disabled-border-1. */
  --slds-g-color-accent-1: var(--slds-r-color-brand-50); /** Emphasis color for large text and icon fills. */
  --slds-g-color-accent-2: light-dark(var(--slds-r-color-brand-40), var(--slds-r-color-brand-70)); /** Emphasis color for text, links, and icon color fills. Hover state color for interactive elements. */
  --slds-g-color-accent-3: light-dark(var(--slds-r-color-brand-30), var(--slds-r-color-brand-80)); /** Emphasis color for text, links, and icon alternative colors. Hover state color for interactive elements. */
  --slds-g-color-accent-container-1: var(--slds-r-color-brand-50); /** Background fill for containers that emphasize branded component and interactive elements such as Brand buttons. Always pair with on-accent-1. */
  --slds-g-color-accent-container-2: light-dark(var(--slds-r-color-brand-40), var(--slds-r-color-brand-90)); /** Background fill on hover state for containers that emphasize branded component and interactive elements such as Brand buttons. Always pair with on-accent-2. */
  --slds-g-color-accent-container-3: light-dark(var(--slds-r-color-brand-30), var(--slds-r-color-brand-80)); /** Alternative background fill on hover state for containers that emphasize branded component and interactive elements such as Brand buttons. Always pair with on-accent-3. */
  --slds-g-color-accent-light-1: #edf4ff; /** Color Accent Light 1. */
  --slds-g-color-accent-light-2: #d6e6ff; /** Color Accent Light 2. */
  --slds-g-color-accent-dark-1: #002775; /** Color Accent Dark 1. */
  --slds-g-color-accent-dark-2: #001642; /** Color Accent Dark 2. */
  --slds-g-color-error-1: light-dark(var(--slds-r-color-error-40), var(--slds-r-color-error-70)); /** Fill color for text and icons displaying an error. */
  --slds-g-color-error-container-1: light-dark(var(--slds-r-color-error-90), var(--slds-r-color-error-30)); /** Container background fill for error components such as toast or alerts. Always pair with on-error-1. */
  --slds-g-color-error-container-2: light-dark(var(--slds-r-color-error-80), var(--slds-r-color-error-40)); /** Container background fill for error components such as destructive buttons. Always pair with on-error-2. */
  --slds-g-color-error-base-10: light-dark(var(--slds-r-color-error-10), var(--slds-r-color-error-90)); /** Step 10 in the Error color scale. */
  --slds-g-color-error-base-15: light-dark(var(--slds-r-color-error-15), var(--slds-r-color-error-85)); /** Error Base 15 - if used as a background, please use Error Base 100-65 to meet accessibility guidelines. */
  --slds-g-color-error-base-20: light-dark(var(--slds-r-color-error-20), var(--slds-r-color-error-80)); /** Step 20 in the Error color scale. */
  --slds-g-color-error-base-30: light-dark(var(--slds-r-color-error-30), var(--slds-r-color-error-70)); /** Step 30 in the Error color scale. */
  --slds-g-color-error-base-40: light-dark(var(--slds-r-color-error-40), var(--slds-r-color-error-60)); /** Step 40 in the Error color scale. */
  --slds-g-color-error-base-45: light-dark(var(--slds-r-color-error-45), var(--slds-r-color-error-55)); /** Error Base 45 - if used as a background, please use Error Base 100-80 to meet accessibility guidelines. */
  --slds-g-color-error-base-50: var(--slds-r-color-error-50); /** Step 50 in the Error color scale. */
  --slds-g-color-error-base-55: light-dark(var(--slds-r-color-error-55), var(--slds-r-color-error-45)); /** Error Base 55 - if used as a background, please use Error Base 100-90 to meet accessibility guidelines. */
  --slds-g-color-error-base-60: light-dark(var(--slds-r-color-error-60), var(--slds-r-color-error-40)); /** Step 60 in the Error color scale. */
  --slds-g-color-error-base-65: light-dark(var(--slds-r-color-error-65), var(--slds-r-color-error-35)); /** Error Base 65 - if used as a background, please use Error Base 20-10 to meet accessibility guidelines. */
  --slds-g-color-error-base-70: light-dark(var(--slds-r-color-error-70), var(--slds-r-color-error-30)); /** Step 70 in the Error color scale. */
  --slds-g-color-error-base-80: light-dark(var(--slds-r-color-error-80), var(--slds-r-color-error-20)); /** Step 80 in the Error color scale. */
  --slds-g-color-error-base-90: light-dark(var(--slds-r-color-error-90), var(--slds-r-color-error-10)); /** Step 90 in the Error color scale. */
  --slds-g-color-error-base-95: light-dark(var(--slds-r-color-error-95), var(--slds-r-color-error-5)); /** Step 95 in the Error color scale. */
  --slds-g-color-error-base-100: var(--slds-g-color-neutral-base-100); /** Step 100 in the Error color scale. */
  --slds-g-color-warning-1: light-dark(var(--slds-r-color-warning-40), var(--slds-r-color-warning-70)); /** Color Warning 1. */
  --slds-g-color-warning-container-1: light-dark(var(--slds-r-color-warning-90), var(--slds-r-color-warning-30)); /** Color Warning Container 1. */
  --slds-g-color-warning-base-10: light-dark(var(--slds-r-color-warning-10), var(--slds-r-color-warning-90)); /** Step 10 in the Warning color scale. */
  --slds-g-color-warning-base-15: light-dark(var(--slds-r-color-warning-15), var(--slds-r-color-warning-85)); /** Warning Base 15 - if used as a background, please use Warning Base 100-50 to meet accessibility guidelines. */
  --slds-g-color-warning-base-20: light-dark(var(--slds-r-color-warning-20), var(--slds-r-color-warning-80)); /** Step 20 in the Warning color scale. */
  --slds-g-color-warning-base-30: light-dark(var(--slds-r-color-warning-30), var(--slds-r-color-warning-70)); /** Step 30 in the Warning color scale. */
  --slds-g-color-warning-base-40: light-dark(var(--slds-r-color-warning-40), var(--slds-r-color-warning-60)); /** Step 40 in the Warning color scale. */
  --slds-g-color-warning-base-45: light-dark(var(--slds-r-color-warning-45), var(--slds-r-color-warning-55)); /** Warning Base 45 - if used as a background, please use Warning Base 100-80 to meet accessibility guidelines. */
  --slds-g-color-warning-base-50: var(--slds-r-color-warning-50); /** Step 50 in the Warning color scale. */
  --slds-g-color-warning-base-55: light-dark(var(--slds-r-color-warning-55), var(--slds-r-color-warning-45)); /** Warning Base 55 - if used as a background, please use Warning Base 100-90 to meet accessibility guidelines. */
  --slds-g-color-warning-base-60: light-dark(var(--slds-r-color-warning-60), var(--slds-r-color-warning-40)); /** Step 60 in the Warning color scale. */
  --slds-g-color-warning-base-65: light-dark(var(--slds-r-color-warning-65), var(--slds-r-color-warning-35)); /** Warning Base 65 - if used as a background, please use Warning Base 20-10 to meet accessibility guidelines. */
  --slds-g-color-warning-base-70: light-dark(var(--slds-r-color-warning-70), var(--slds-r-color-warning-30)); /** Step 70 in the Warning color scale. */
  --slds-g-color-warning-base-80: light-dark(var(--slds-r-color-warning-80), var(--slds-r-color-warning-20)); /** Step 80 in the Warning color scale. */
  --slds-g-color-warning-base-90: light-dark(var(--slds-r-color-warning-90), var(--slds-r-color-warning-10)); /** Step 90 in the Warning color scale. */
  --slds-g-color-warning-base-95: light-dark(var(--slds-r-color-warning-95), var(--slds-r-color-warning-5)); /** Step 95 in the Warning color scale. */
  --slds-g-color-warning-base-100: var(--slds-g-color-neutral-base-100); /** Step 100 in the Warning color scale. */
  --slds-g-color-success-1: light-dark(var(--slds-r-color-success-40), var(--slds-r-color-success-70)); /** Color Success 1. */
  --slds-g-color-success-container-1: light-dark(var(--slds-r-color-success-90), var(--slds-r-color-success-30)); /** Color Success Container 1. */
  --slds-g-color-success-container-2: light-dark(var(--slds-r-color-success-80), var(--slds-r-color-success-40)); /** Color Success Container 2. */
  --slds-g-color-success-base-10: light-dark(var(--slds-r-color-success-10), var(--slds-r-color-success-90)); /** Step 10 in the Success color scale. */
  --slds-g-color-success-base-15: light-dark(var(--slds-r-color-success-15), var(--slds-r-color-success-85)); /** Success Base 15 - if used as a background, please use Success Base 100-65 to meet accessibility guidelines. */
  --slds-g-color-success-base-20: light-dark(var(--slds-r-color-success-20), var(--slds-r-color-success-80)); /** Step 20 in the Success color scale. */
  --slds-g-color-success-base-30: light-dark(var(--slds-r-color-success-30), var(--slds-r-color-success-70)); /** Step 30 in the Success color scale. */
  --slds-g-color-success-base-40: light-dark(var(--slds-r-color-success-40), var(--slds-r-color-success-60)); /** Step 40 in the Success color scale. */
  --slds-g-color-success-base-45: light-dark(var(--slds-r-color-success-45), var(--slds-r-color-success-55)); /** Success Base 45 - if used as a background, please use Success Base 100-80 to meet accessibility guidelines. */
  --slds-g-color-success-base-50: var(--slds-r-color-success-50); /** Step 50 in the Success color scale. */
  --slds-g-color-success-base-55: light-dark(var(--slds-r-color-success-55), var(--slds-r-color-success-45)); /** Success Base 55 - if used as a background, please use Success Base 100-90 to meet accessibility guidelines. */
  --slds-g-color-success-base-60: light-dark(var(--slds-r-color-success-60), var(--slds-r-color-success-40)); /** Step 60 in the Success color scale. */
  --slds-g-color-success-base-65: light-dark(var(--slds-r-color-success-65), var(--slds-r-color-success-35)); /** Success Base 65 - if used as a background, please use Success Base 20-10 to meet accessibility guidelines. */
  --slds-g-color-success-base-70: light-dark(var(--slds-r-color-success-70), var(--slds-r-color-success-30)); /** Step 70 in the Success color scale. */
  --slds-g-color-success-base-80: light-dark(var(--slds-r-color-success-80), var(--slds-r-color-success-20)); /** Step 80 in the Success color scale. */
  --slds-g-color-success-base-90: light-dark(var(--slds-r-color-success-90), var(--slds-r-color-success-10)); /** Step 90 in the Success color scale. */
  --slds-g-color-success-base-95: light-dark(var(--slds-r-color-success-95), var(--slds-r-color-success-5)); /** Step 95 in the Success color scale. */
  --slds-g-color-success-base-100: var(--slds-g-color-neutral-base-100); /** Step 100 in the Success color scale. */
  --slds-g-color-info-1: light-dark(var(--slds-r-color-info-40), var(--slds-r-color-info-70)); /** Step 1 in the Info scale for colors that define the info colors. */
  --slds-g-color-info-container-1: light-dark(var(--slds-r-color-info-90), var(--slds-r-color-info-30)); /** Step 1 in the Info Container scale for colors that define the info containers. */
  --slds-g-color-info-base-10: light-dark(var(--slds-r-color-info-10), var(--slds-r-color-info-90)); /** Info Base 10 - if used as a background, please use Info Base 100-65 to meet accessibility guidelines. */
  --slds-g-color-info-base-15: light-dark(var(--slds-r-color-info-15), var(--slds-r-color-info-85)); /** Info Base 15 - if used as a background, please use Info Base 100-65 to meet accessibility guidelines. */
  --slds-g-color-info-base-20: light-dark(var(--slds-r-color-info-20), var(--slds-r-color-info-80)); /** Info Base 20 - if used as a background, please use Info Base 100-70 to meet accessibility guidelines. */
  --slds-g-color-info-base-30: light-dark(var(--slds-r-color-info-30), var(--slds-r-color-info-70)); /** Info Base 30 - if used as a background, please use Info Base 100-80 to meet accessibility guidelines. */
  --slds-g-color-info-base-35: light-dark(var(--slds-r-color-info-35), var(--slds-r-color-info-65)); /** Info Base 35 - if used as a background, please use Info Base 100-80 to meet accessibility guidelines. */
  --slds-g-color-info-base-40: light-dark(var(--slds-r-color-info-40), var(--slds-r-color-info-60)); /** Info Base 40 - if used as a background, please use Info Base 100-90 to meet accessibility guidelines. */
  --slds-g-color-info-base-45: light-dark(var(--slds-r-color-info-45), var(--slds-r-color-info-55)); /** Info Base 45 - if used as a background, please use Info Base 100-90 to meet accessibility guidelines. */
  --slds-g-color-info-base-50: var(--slds-r-color-info-50); /** Info Base 50 - if used as a background, please use Info Base 100-95 to meet accessibility guidelines. */
  --slds-g-color-info-base-55: light-dark(var(--slds-r-color-info-55), var(--slds-r-color-info-45)); /** Info Base 55 - if used as a background, please use Info Base 100-95 to meet accessibility guidelines. */
  --slds-g-color-info-base-60: light-dark(var(--slds-r-color-info-60), var(--slds-r-color-info-40)); /** Info Base 60 - if used as a background, please use Info Base 100 to meet accessibility guidelines. */
  --slds-g-color-info-base-65: light-dark(var(--slds-r-color-info-65), var(--slds-r-color-info-35)); /** Info Base 65 - if used as a background, please use Info Base 15-10 to meet accessibility guidelines. */
  --slds-g-color-info-base-70: light-dark(var(--slds-r-color-info-70), var(--slds-r-color-info-30)); /** Info Base 70 - if used as a background, please use Info Base 20-10 to meet accessibility guidelines. */
  --slds-g-color-info-base-80: light-dark(var(--slds-r-color-info-80), var(--slds-r-color-info-20)); /** Info Base 80 - if used as a background, please use Info Base 30-10 to meet accessibility guidelines. */
  --slds-g-color-info-base-90: light-dark(var(--slds-r-color-info-90), var(--slds-r-color-info-10)); /** Info Base 90 - if used as a background, please use Info Base 40-10 to meet accessibility guidelines. */
  --slds-g-color-info-base-95: light-dark(var(--slds-r-color-info-95), var(--slds-r-color-info-5)); /** Info Base 95 - if used as a background, please use Info Base 50-10 to meet accessibility guidelines. */
  --slds-g-color-info-base-100: var(--slds-g-color-neutral-base-100); /** Info Base 100 - if used as a background, please use Info Base 60-10 to meet accessibility guidelines. */
  --slds-g-color-disabled-1: var(--slds-g-color-neutral-base-50); /** Fill color fo text and icons in disabled components or with disabled content. */
  --slds-g-color-disabled-2: var(--slds-g-color-neutral-base-40); /** Color denoting disabled UI elements. This is one step darker than disabled-1. */
  --slds-g-color-disabled-container-1: light-dark(#e5e5e5, #2e2e2e); /** Disabled container background fill for white components. Always pair with on-disabled-1. */
  --slds-g-color-disabled-container-2: light-dark(#c9c9c9, #444); /** Disabled container background fill for grey components. Always pair with on-disabled-2. */
  --slds-g-color-neutral-base-0: light-dark(#000, #fff); /** Step 0 in the Neutral color scale. */
  --slds-g-color-neutral-base-10: light-dark(#181818, #e5e5e5); /** Step 10 in the Neutral color scale. */
  --slds-g-color-neutral-base-15: light-dark(#242424, #d7d7d7); /** Step 15 in the Neutral color scale. */
  --slds-g-color-neutral-base-20: light-dark(#2e2e2e, #c9c9c9); /** Step 20 in the Neutral color scale. */
  --slds-g-color-neutral-base-30: light-dark(#444, #aeaeae); /** Step 30 in the Neutral color scale. */
  --slds-g-color-neutral-base-40: light-dark(#5c5c5c, #939393); /** Step 40 in the Neutral color scale. */
  --slds-g-color-neutral-base-45: light-dark(#696969, #848484); /** Neutral Base 45 - if used as a background, please use Neutral Base 100-90 to meet accessibility guidelines. */
  --slds-g-color-neutral-base-50: #757575; /** Step 50 in the Neutral color scale. */
  --slds-g-color-neutral-base-55: light-dark(#848484, #696969); /** Neutral Base 55 - if used as a background, please use Neutral Base 100-95 to meet accessibility guidelines. */
  --slds-g-color-neutral-base-60: light-dark(#939393, #5c5c5c); /** Step 60 in the Neutral color scale. */
  --slds-g-color-neutral-base-65: light-dark(#a0a0a0, #515151); /** Step 65 in the Neutral color scale. */
  --slds-g-color-neutral-base-70: light-dark(#aeaeae, #444); /** Step 70 in the Neutral color scale. */
  --slds-g-color-neutral-base-80: light-dark(#c9c9c9, #2e2e2e); /** Step 80 in the Neutral color scale. */
  --slds-g-color-neutral-base-90: light-dark(#e5e5e5, #181818); /** Step 90 in the Neutral color scale. */
  --slds-g-color-neutral-base-95: light-dark(#f3f3f3, #020202); /** Step 95 in the Neutral color scale. */
  --slds-g-color-neutral-base-100: light-dark(#fff, #000); /** Step 100 in the Neutral color scale. */
  --slds-g-color-brand-base-10: light-dark(var(--slds-r-color-brand-10), var(--slds-r-color-brand-90)); /** Step 10 in the Brand color scale. */
  --slds-g-color-brand-base-15: light-dark(var(--slds-r-color-brand-15), var(--slds-r-color-brand-85)); /** Step 15 in the Brand color scale. */
  --slds-g-color-brand-base-20: light-dark(var(--slds-r-color-brand-20), var(--slds-r-color-brand-80)); /** Step 20 in the Brand color scale. */
  --slds-g-color-brand-base-30: light-dark(var(--slds-r-color-brand-30), var(--slds-r-color-brand-70)); /** Step 30 in the Brand color scale. */
  --slds-g-color-brand-base-40: light-dark(var(--slds-r-color-brand-40), var(--slds-r-color-brand-60)); /** Step 40 in the Brand color scale. */
  --slds-g-color-brand-base-45: light-dark(var(--slds-r-color-brand-45), var(--slds-r-color-brand-55)); /** Brand Base 45 - if used as a background, please use Brand Base 100-90 to meet accessibility guidelines. */
  --slds-g-color-brand-base-50: var(--slds-r-color-brand-50); /** Step 50 in the Brand color scale. */
  --slds-g-color-brand-base-55: light-dark(var(--slds-r-color-brand-55), var(--slds-r-color-brand-45)); /** Brand Base 55 - if used as a background, please use Brand Base 100-95 to meet accessibility guidelines. */
  --slds-g-color-brand-base-60: light-dark(var(--slds-r-color-brand-60), var(--slds-r-color-brand-40)); /** Step 60 in the Brand color scale. */
  --slds-g-color-brand-base-65: light-dark(var(--slds-r-color-brand-65), var(--slds-r-color-brand-35)); /** Step 65 in the Brand color scale. */
  --slds-g-color-brand-base-70: light-dark(var(--slds-r-color-brand-70), var(--slds-r-color-brand-30)); /** Step 70 in the Brand color scale. */
  --slds-g-color-brand-base-80: light-dark(var(--slds-r-color-brand-80), var(--slds-r-color-brand-20)); /** Step 80 in the Brand color scale. */
  --slds-g-color-brand-base-90: light-dark(var(--slds-r-color-brand-90), var(--slds-r-color-brand-10)); /** Step 90 in the Brand color scale. */
  --slds-g-color-brand-base-95: light-dark(var(--slds-r-color-brand-95), var(--slds-r-color-brand-5)); /** Step 95 in the Brand color scale. */
  --slds-g-color-brand-base-100: var(--slds-g-color-neutral-base-100); /** Step 100 in the Brand color scale. */
  --slds-g-shadow-1: 0px 0px 2px 0px light-dark(#0000002e, #0000005c), 0px 2px 2px 0px light-dark(#0000002e, #0000005c), 0px -1px 2px 0px light-dark(#0000001a, #00000033); /** Shadow 1. */
  --slds-g-shadow-2: 0px 0px 5px 0px light-dark(#00000029, #00000052), 0px 3px 3px 0px light-dark(#00000029, #00000052), 0px -1px 2px 0px light-dark(#00000017, #0000002e); /** Shadow 2. */
  --slds-g-shadow-3: 0px 0px 7px 0px light-dark(#00000024, #00000047), 0px 5px 5px 0px light-dark(#00000024, #00000047), 0px -1px 2px 0px light-dark(#00000014, #00000029); /** Shadow 3. */
  --slds-g-shadow-4: 0px 0px 10px 0px light-dark(#0000001f, #0000003d), 0px 7px 7px 0px light-dark(#0000001f, #0000003d), 0px -1px 3px 0px light-dark(#00000012, #00000024); /** Shadow 4. */
  --slds-g-shadow-5: var(--slds-g-shadow-4); /** Shadow 5. */
  --slds-g-shadow-6: var(--slds-g-shadow-4); /** Shadow 6. */
  --slds-g-shadow-outline-focus-1: 0px 0px 0px 2px var(--slds-g-color-brand-base-15); /** Shadow Outline Focus 1. */
  --slds-g-shadow-outset-focus-1: 0px 0px 0px 2px var(--slds-g-color-neutral-base-100), 0px 0px 0px 4px var(--slds-g-color-brand-base-15); /** Shadow Outset Focus 1. */
  --slds-g-shadow-inset-focus-1: 0px 0px 0px 2px var(--slds-g-color-brand-base-15) inset; /** Shadow Inset Focus 1. */
  --slds-g-shadow-inset-inverse-focus-1: 0px 0px 0px 2px var(--slds-g-color-brand-base-15) inset, 0px 0px 0px 4px var(--slds-g-color-neutral-base-100) inset; /** Shadow inset inverse focus */
  --slds-g-shadow-inverse-1: 0 0 3px #f3f3f3; /** Shadow Inverse 1 */
  --slds-g-shadow-insetinverse-focus-1: var(--slds-g-shadow-inset-inverse-focus-1); /** Shadow Inset inverse Focus 1. */
  --slds-g-shadow-block-start-1: 0px 0px 2px 0px light-dark(#0000002e, #0000005c), 0px -2px 2px 0px light-dark(#0000002e, #0000005c), 0px 1px 2px 0px light-dark(#0000001a, #00000033); /** Shadow depth 1 - up */
  --slds-g-shadow-block-start-2: 0px 0px 5px 0px light-dark(#00000029, #00000052), 0px -3px 3px 0px light-dark(#00000029, #00000052), 0px 1px 2px 0px light-dark(#00000017, #0000002e); /** Shadow depth 2 - up */
  --slds-g-shadow-block-start-3: 0px 0px 7px 0px light-dark(#00000024, #00000047), 0px -5px 5px 0px light-dark(#00000024, #00000047), 0px 1px 2px 0px light-dark(#00000014, #00000029); /** Shadow depth 3 - up */
  --slds-g-shadow-block-start-4: 0px 0px 10px 0px light-dark(#0000001f, #0000003d), 0px -7px 7px 0px light-dark(#0000001f, #0000003d), 0px 1px 3px 0px light-dark(#00000012, #00000024); /** Shadow depth 4 - up */
  --slds-g-shadow-block-end-1: var(--slds-g-shadow-1); /** Shadow depth 1 - down */
  --slds-g-shadow-block-end-2: var(--slds-g-shadow-2); /** Shadow depth 2 - down */
  --slds-g-shadow-block-end-3: var(--slds-g-shadow-3); /** Shadow depth 3 - down */
  --slds-g-shadow-block-end-4: var(--slds-g-shadow-4); /** Shadow depth 4 - down */
  --slds-g-shadow-blockstart-1: var(--slds-g-shadow-block-start-1); /** Shadow Blockstart 1. */
  --slds-g-shadow-blockstart-2: var(--slds-g-shadow-block-start-2); /** Shadow Blockstart 2. */
  --slds-g-shadow-blockstart-3: var(--slds-g-shadow-block-start-3); /** Shadow Blockstart 3. */
  --slds-g-shadow-blockstart-4: var(--slds-g-shadow-block-start-4); /** Shadow Blockstart 4. */
  --slds-g-shadow-blockend-1: var(--slds-g-shadow-block-end-1); /** Shadow Blockend 1. */
  --slds-g-shadow-blockend-2: var(--slds-g-shadow-block-end-2); /** Shadow Blockend 2. */
  --slds-g-shadow-blockend-3: var(--slds-g-shadow-block-end-3); /** Shadow Blockend 3. */
  --slds-g-shadow-blockend-4: var(--slds-g-shadow-block-end-4); /** Shadow Blockend 4. */
  --slds-g-shadow-inline-start-1: 0px 0px 2px 0px light-dark(#0000002e, #0000005c), -2px 0px 2px 0px light-dark(#0000002e, #0000005c), 1px 0px 2px 0px light-dark(#0000001a, #00000033); /** Shadow depth 1 - left */
  --slds-g-shadow-inline-start-2: 0px 0px 5px 0px light-dark(#00000029, #00000052), -3px 0px 3px 0px light-dark(#00000029, #00000052), 1px 0px 2px 0px light-dark(#00000017, #0000002e); /** Shadow depth 2 - left */
  --slds-g-shadow-inline-start-3: 0px 0px 7px 0px light-dark(#00000024, #00000047), -5px 0px 5px 0px light-dark(#00000024, #00000047), 1px 0px 2px 0px light-dark(#00000014, #00000029); /** Shadow depth 3 - left */
  --slds-g-shadow-inline-start-4: 0px 0px 10px 0px light-dark(#0000001f, #0000003d), -7px 0px 7px 0px light-dark(#0000001f, #0000003d), 1px 0px 3px 0px light-dark(#00000012, #00000024); /** Shadow depth 4 - left */
  --slds-g-shadow-inline-end-1: 0px 0px 2px 0px light-dark(#0000002e, #0000005c), 2px 0px 2px 0px light-dark(#0000002e, #0000005c), -1px 0 2px 0 light-dark(#0000001a, #00000033); /** Shadow depth 1 - right */
  --slds-g-shadow-inline-end-2: 0px 0px 5px 0px light-dark(#00000029, #00000052), 3px 0px 3px 0px light-dark(#00000029, #00000052), -1px 0px 2px 0px light-dark(#00000017, #0000002e); /** Shadow depth 2 - right */
  --slds-g-shadow-inline-end-3: 0px 0px 7px 0px light-dark(#00000024, #00000047), 5px 0px 5px 0px light-dark(#00000024, #00000047), -1px 0px 3px 0px light-dark(#00000014, #00000029); /** Shadow depth 3 - right */
  --slds-g-shadow-inline-end-4: 0px 0px 10px 0px light-dark(#0000001f, #0000003d), 7px 0px 7px 0px light-dark(#0000001f, #0000003d), -1px 0px 3px 0px light-dark(#00000012, #00000024); /** Shadow depth 4 - right */
  --slds-g-shadow-inlinestart-1: var(--slds-g-shadow-inline-start-1); /** Shadow Inlinestart 1. */
  --slds-g-shadow-inlinestart-2: var(--slds-g-shadow-inline-start-2); /** Shadow Inlinestart 2. */
  --slds-g-shadow-inlinestart-3: var(--slds-g-shadow-inline-start-3); /** Shadow Inlinestart 3. */
  --slds-g-shadow-inlinestart-4: var(--slds-g-shadow-inline-start-4); /** Shadow Inlinestart 4. */
  --slds-g-shadow-inlineend-1: var(--slds-g-shadow-inline-end-1); /** Shadow Inlineend 1. */
  --slds-g-shadow-inlineend-2: var(--slds-g-shadow-inline-end-2); /** Shadow Inlineend 2. */
  --slds-g-shadow-inlineend-3: var(--slds-g-shadow-inline-end-3); /** Shadow Inlineend 3. */
  --slds-g-shadow-inlineend-4: var(--slds-g-shadow-inline-end-4); /** Shadow Inlineend 4. */
}