@salesforce-ux/design-tokens
Version:
Salesforce Design System Tokens & Styling Hooks
521 lines • 53.2 kB
CSS
/**
* Do not edit directly, this file was auto-generated.
*/
:root, .slds-theme_lightning-blue {
--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.125rem; /** Small border radius for UI elements. */
--slds-g-radius-border-2: 0.25rem; /** Medium border radius for UI elements. */
--slds-g-radius-border-3: 0.5rem; /** Large border radius for UI elements. */
--slds-g-radius-border-4: 1rem; /** Extra Large border radius for UI elements. */
--slds-g-radius-border-pill: 15rem; /** Pill shaped border radius for UI elements. */
--slds-g-radius-border-circle: 100%; /** Circular border radius for UI elements. */
--slds-g-font-weight-1: 100; /** Font weight 1 */
--slds-g-font-weight-2: 200; /** Font weight 2 */
--slds-g-font-weight-3: 300; /** Light */
--slds-g-font-weight-4: 400; /** Regular */
--slds-g-font-weight-5: 500;
--slds-g-font-weight-6: 600; /** SemiBold */
--slds-g-font-weight-7: 700; /** Bold */
--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);
--slds-g-font-lineheight-2: var(--slds-g-font-line-height-2);
--slds-g-font-lineheight-3: var(--slds-g-font-line-height-3);
--slds-g-font-lineheight-4: var(--slds-g-font-line-height-4);
--slds-g-font-lineheight-5: var(--slds-g-font-line-height-5);
--slds-g-font-lineheight-6: var(--slds-g-font-line-height-6);
--slds-g-font-lineheight-base: var(--slds-g-font-line-height-base);
--slds-g-font-lineheight-var-base: var(--slds-g-font-line-height-var-base);
--slds-g-font-scale-1: 0.875rem; /** 1 step up from base font-size. */
--slds-g-font-scale-2: 1rem; /** 2 steps up from base font-size. */
--slds-g-font-scale-3: 1.125rem; /** 3 steps up from base font-size. */
--slds-g-font-scale-4: 1.25rem; /** 4 steps up from base font-size. */
--slds-g-font-scale-5: 1.5rem; /** 5 steps up from base font-size. */
--slds-g-font-scale-6: 1.75rem; /** 6 steps up from base font-size. */
--slds-g-font-scale-7: 2rem; /** 7 steps up from base font-size. */
--slds-g-font-scale-8: 2.625rem; /** 8 steps up from base font-size. */
--slds-g-font-scale-9: var(--slds-g-font-scale-8); /** 9 steps up from base font-size. */
--slds-g-font-scale-10: var(--slds-g-font-scale-8); /** 10 steps up from base font-size. */
--slds-g-font-scale-ratio: 1.15; /** Default ratio for your font scale. */
--slds-g-font-scale-base: 0.8125rem; /** Default font-scale ratio for your application. */
--slds-g-font-scale-neg-1: 0.75rem; /** 1 step down from base font-size. */
--slds-g-font-scale-neg-2: 0.625rem; /** 2 steps down from base font-size. */
--slds-g-font-scale-neg-3: var(--slds-g-font-scale-neg-2); /** 3 steps down from base font-size. */
--slds-g-font-scale-neg-4: var(--slds-g-font-scale-neg-3); /** 4 steps down from base font-size. */
--slds-g-font-scale-var-1: var(--slds-g-font-scale-1); /** 1 step up from base font-size. */
--slds-g-font-scale-var-2: var(--slds-g-font-scale-2); /** 2 steps up from base font-size. */
--slds-g-font-scale-var-3: var(--slds-g-font-scale-3); /** 3 steps up from base font-size. */
--slds-g-font-scale-var-4: var(--slds-g-font-scale-4); /** 4 steps up from base font-size. */
--slds-g-font-scale-var-5: var(--slds-g-font-scale-5); /** 5 steps up from base font-size. */
--slds-g-font-scale-var-6: var(--slds-g-font-scale-6); /** 6 steps up from base font-size. */
--slds-g-font-scale-var-7: var(--slds-g-font-scale-7); /** 7 steps up from base font-size. */
--slds-g-font-scale-var-8: var(--slds-g-font-scale-8); /** 8 steps up from base font-size. */
--slds-g-font-scale-var-9: var(--slds-g-font-scale-var-8); /** 9 steps up from base font-size. */
--slds-g-font-scale-var-10: var(--slds-g-font-scale-var-8); /** 10 steps up from base font-size. */
--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); /** 1 step down from base font-size. */
--slds-g-font-scale-var-neg-2: var(--slds-g-font-scale-neg-2); /** 2 steps down from base font-size. */
--slds-g-font-scale-var-neg-3: var(--slds-g-font-scale-var-neg-2); /** 3 steps down from base font-size. */
--slds-g-font-scale-var-neg-4: var(--slds-g-font-scale-var-neg-3); /** 4 steps down from base font-size. */
--slds-g-font-size-base: var(--slds-g-font-scale-base); /** Default font-size for your application. */
--slds-g-font-family: var(--slds-g-font-family-base);
--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'; /** System font stack for your application. */
--slds-g-font-family-monospace: Consolas, Menlo, Monaco, Courier, monospace; /** Monospace font stack for your application. */
--slds-g-font-line-clamp: 3; /** Default line-clamp. */
--slds-g-color-palette-neutral-0: #000; /** Neutral 0 */
--slds-g-color-palette-neutral-10: #181818; /** Neutral 10 */
--slds-g-color-palette-neutral-15: #242424; /** Neutral 15 */
--slds-g-color-palette-neutral-20: #2e2e2e; /** Neutral 20 */
--slds-g-color-palette-neutral-30: #444; /** Neutral 30 */
--slds-g-color-palette-neutral-40: #5c5c5c; /** Neutral 40 */
--slds-g-color-palette-neutral-50: #757575; /** Neutral 50 */
--slds-g-color-palette-neutral-60: #939393; /** Neutral 60 */
--slds-g-color-palette-neutral-65: #a0a0a0; /** Neutral 65 */
--slds-g-color-palette-neutral-70: #aeaeae; /** Neutral 70 */
--slds-g-color-palette-neutral-80: #c9c9c9; /** Neutral 80 */
--slds-g-color-palette-neutral-90: #e5e5e5; /** Neutral 90 */
--slds-g-color-palette-neutral-95: #f3f3f3; /** Neutral 95 */
--slds-g-color-palette-neutral-100: #fff; /** Neutral 100 */
--slds-g-color-palette-blue-10: #001639; /** Blue 10 */
--slds-g-color-palette-blue-15: #03234d; /** Blue 15 */
--slds-g-color-palette-blue-20: #032d60; /** Blue 20 */
--slds-g-color-palette-blue-30: #014486; /** Blue 30 */
--slds-g-color-palette-blue-40: #0b5cab; /** Blue 40 */
--slds-g-color-palette-blue-50: #0176d3; /** Blue 50 */
--slds-g-color-palette-blue-60: #1b96ff; /** Blue 60 */
--slds-g-color-palette-blue-65: #57a3fd; /** Blue 65 */
--slds-g-color-palette-blue-70: #78b0fd; /** Blue 70 */
--slds-g-color-palette-blue-80: #aacbff; /** Blue 80 */
--slds-g-color-palette-blue-90: #d8e6fe; /** Blue 90 */
--slds-g-color-palette-blue-95: #eef4ff; /** Blue 95 */
--slds-g-color-palette-cloud-blue-10: #001a28; /** Cloud Blue 10 */
--slds-g-color-palette-cloud-blue-15: #0a2636; /** Cloud Blue 15 */
--slds-g-color-palette-cloud-blue-20: #023248; /** Cloud Blue 20 */
--slds-g-color-palette-cloud-blue-30: #084968; /** Cloud Blue 30 */
--slds-g-color-palette-cloud-blue-40: #05628a; /** Cloud Blue 40 */
--slds-g-color-palette-cloud-blue-50: #107cad; /** Cloud Blue 50 */
--slds-g-color-palette-cloud-blue-60: #0d9dda; /** Cloud Blue 60 */
--slds-g-color-palette-cloud-blue-65: #08abed; /** Cloud Blue 65 */
--slds-g-color-palette-cloud-blue-70: #1ab9ff; /** Cloud Blue 70 */
--slds-g-color-palette-cloud-blue-80: #90d0fe; /** Cloud Blue 80 */
--slds-g-color-palette-cloud-blue-90: #cfe9fe; /** Cloud Blue 90 */
--slds-g-color-palette-cloud-blue-95: #eaf5fe; /** Cloud Blue 95 */
--slds-g-color-palette-electric-blue-10: #001642; /** Electric-Blue-10 maps to Brand-Base-10 */
--slds-g-color-palette-electric-blue-15: #001e5b; /** Electric-Blue-15 maps to Brand-Base-15 */
--slds-g-color-palette-electric-blue-20: #002775; /** Electric-Blue-20 maps to Brand-Base-20 */
--slds-g-color-palette-electric-blue-30: #022ac0; /** Electric-Blue-30 maps to Brand-Base-30 */
--slds-g-color-palette-electric-blue-40: #0250d9; /** Electric-Blue-40 maps to Brand-Base-40 */
--slds-g-color-palette-electric-blue-50: #066afe; /** Electric-Blue-50 maps to Brand-Base-50 */
--slds-g-color-palette-electric-blue-60: #4992fe; /** Electric-Blue-60 maps to Brand-Base-60 */
--slds-g-color-palette-electric-blue-65: #5f9ffe; /** Electric-Blue-65 maps to Brand-Base-65 */
--slds-g-color-palette-electric-blue-70: #7cb1fe; /** Electric-Blue-70 maps to Brand-Base-70 */
--slds-g-color-palette-electric-blue-80: #a8cbff; /** Electric-Blue-80 maps to Brand-Base-80 */
--slds-g-color-palette-electric-blue-90: #d6e6ff; /** Electric-Blue-90 maps to Brand-Base-90 */
--slds-g-color-palette-electric-blue-95: #edf4ff; /** Electric-Blue-95 maps to Brand-Base-95 */
--slds-g-color-palette-green-10: #071b12; /** Green 10 */
--slds-g-color-palette-green-15: #0c2912; /** Green 15 */
--slds-g-color-palette-green-20: #143b25; /** Green 20 */
--slds-g-color-palette-green-30: #194e31; /** Green 30 */
--slds-g-color-palette-green-40: #396547; /** Green 40 */
--slds-g-color-palette-green-50: #2e844a; /** Green 50 */
--slds-g-color-palette-green-60: #3ba755; /** Green 60 */
--slds-g-color-palette-green-65: #41b658; /** Green 65 */
--slds-g-color-palette-green-70: #45c65a; /** Green 70 */
--slds-g-color-palette-green-80: #91db8b; /** Green 80 */
--slds-g-color-palette-green-90: #cdefc4; /** Green 90 */
--slds-g-color-palette-green-95: #ebf7e6; /** Green 95 */
--slds-g-color-palette-hot-orange-10: #281202; /** Hot Orange 10 */
--slds-g-color-palette-hot-orange-15: #421604; /** Hot Orange 15 */
--slds-g-color-palette-hot-orange-20: #4a2413; /** Hot Orange 20 */
--slds-g-color-palette-hot-orange-30: #7e2600; /** Hot Orange 30 */
--slds-g-color-palette-hot-orange-40: #aa3001; /** Hot Orange 40 */
--slds-g-color-palette-hot-orange-50: #d83a00; /** Hot Orange 50 */
--slds-g-color-palette-hot-orange-60: #ff5d2d; /** Hot Orange 60 */
--slds-g-color-palette-hot-orange-65: #ff784f; /** Hot Orange 65 */
--slds-g-color-palette-hot-orange-70: #ff906e; /** Hot Orange 70 */
--slds-g-color-palette-hot-orange-80: #feb9a5; /** Hot Orange 80 */
--slds-g-color-palette-hot-orange-90: #ffded5; /** Hot Orange 90 */
--slds-g-color-palette-hot-orange-95: #fef1ed; /** Hot Orange 95 */
--slds-g-color-palette-indigo-10: #17094e; /** Indigo 10 */
--slds-g-color-palette-indigo-15: #1f0974; /** Indigo 15 */
--slds-g-color-palette-indigo-20: #270c92; /** Indigo 20 */
--slds-g-color-palette-indigo-30: #2f2cb7; /** Indigo 30 */
--slds-g-color-palette-indigo-40: #3a49da; /** Indigo 40 */
--slds-g-color-palette-indigo-50: #5867e8; /** Indigo 50 */
--slds-g-color-palette-indigo-60: #7f8ced; /** Indigo 60 */
--slds-g-color-palette-indigo-65: #8e9bef; /** Indigo 65 */
--slds-g-color-palette-indigo-70: #9ea9f1; /** Indigo 70 */
--slds-g-color-palette-indigo-80: #bec7f6; /** Indigo 80 */
--slds-g-color-palette-indigo-90: #e0e5f8; /** Indigo 90 */
--slds-g-color-palette-indigo-95: #f1f3fb; /** Indigo 95 */
--slds-g-color-palette-orange-10: #201600; /** Orange 10 */
--slds-g-color-palette-orange-15: #2e2204; /** Orange 15 */
--slds-g-color-palette-orange-20: #3e2b02; /** Orange 20 */
--slds-g-color-palette-orange-30: #5f3e02; /** Orange 30 */
--slds-g-color-palette-orange-40: #825101; /** Orange 40 */
--slds-g-color-palette-orange-50: #a96404; /** Orange 50 */
--slds-g-color-palette-orange-60: #dd7a01; /** Orange 60 */
--slds-g-color-palette-orange-65: #f38303; /** Orange 65 */
--slds-g-color-palette-orange-70: #fe9339; /** Orange 70 */
--slds-g-color-palette-orange-80: #ffba90; /** Orange 80 */
--slds-g-color-palette-orange-90: #fedfd0; /** Orange 90 */
--slds-g-color-palette-orange-95: #fff1ea; /** Orange 95 */
--slds-g-color-palette-pink-10: #370114; /** Pink 10 */
--slds-g-color-palette-pink-15: #4b0620; /** Pink 15 */
--slds-g-color-palette-pink-20: #61022a; /** Pink 20 */
--slds-g-color-palette-pink-30: #8a033e; /** Pink 30 */
--slds-g-color-palette-pink-40: #b60554; /** Pink 40 */
--slds-g-color-palette-pink-50: #e3066a; /** Pink 50 */
--slds-g-color-palette-pink-60: #ff538a; /** Pink 60 */
--slds-g-color-palette-pink-65: #fe7298; /** Pink 65 */
--slds-g-color-palette-pink-70: #fe8aa7; /** Pink 70 */
--slds-g-color-palette-pink-80: #fdb6c5; /** Pink 80 */
--slds-g-color-palette-pink-90: #fddde3; /** Pink 90 */
--slds-g-color-palette-pink-95: #fef0f3; /** Pink 95 */
--slds-g-color-palette-purple-10: #240643; /** Purple 10 */
--slds-g-color-palette-purple-15: #300b60; /** Purple 15 */
--slds-g-color-palette-purple-20: #401075; /** Purple 20 */
--slds-g-color-palette-purple-30: #5a1ba9; /** Purple 30 */
--slds-g-color-palette-purple-40: #7526e3; /** Purple 40 */
--slds-g-color-palette-purple-50: #9050e9; /** Purple 50 */
--slds-g-color-palette-purple-60: #ad7bee; /** Purple 60 */
--slds-g-color-palette-purple-65: #b78def; /** Purple 65 */
--slds-g-color-palette-purple-70: #c29ef1; /** Purple 70 */
--slds-g-color-palette-purple-80: #d7bff2; /** Purple 80 */
--slds-g-color-palette-purple-90: #ece1f9; /** Purple 90 */
--slds-g-color-palette-purple-95: #f6f2fb; /** Purple 95 */
--slds-g-color-palette-red-10: #300c01; /** Red 10 */
--slds-g-color-palette-red-15: #4a0c04; /** Red 15 */
--slds-g-color-palette-red-20: #640103; /** Red 20 */
--slds-g-color-palette-red-30: #8e030f; /** Red 30 */
--slds-g-color-palette-red-40: #ba0517; /** Red 40 */
--slds-g-color-palette-red-50: #ea001e; /** Red 50 */
--slds-g-color-palette-red-60: #fe5c4c; /** Red 60 */
--slds-g-color-palette-red-65: #fe7765; /** Red 65 */
--slds-g-color-palette-red-70: #fe8f7d; /** Red 70 */
--slds-g-color-palette-red-80: #feb8ab; /** Red 80 */
--slds-g-color-palette-red-90: #feded8; /** Red 90 */
--slds-g-color-palette-red-95: #fef1ee; /** Red 95 */
--slds-g-color-palette-teal-10: #071b12; /** Teal 10 */
--slds-g-color-palette-teal-15: #072825; /** Teal 15 */
--slds-g-color-palette-teal-20: #023434; /** Teal 20 */
--slds-g-color-palette-teal-30: #024d4c; /** Teal 30 */
--slds-g-color-palette-teal-40: #056764; /** Teal 40 */
--slds-g-color-palette-teal-50: #0b827c; /** Teal 50 */
--slds-g-color-palette-teal-60: #06a59a; /** Teal 60 */
--slds-g-color-palette-teal-65: #03b4a7; /** Teal 65 */
--slds-g-color-palette-teal-70: #01c3b3; /** Teal 70 */
--slds-g-color-palette-teal-80: #04e1cb; /** Teal 80 */
--slds-g-color-palette-teal-90: #acf3e4; /** Teal 90 */
--slds-g-color-palette-teal-95: #def9f3; /** Teal 95 */
--slds-g-color-palette-violet-10: #2e0039; /** Violet 10 */
--slds-g-color-palette-violet-15: #3d0157; /** Violet 15 */
--slds-g-color-palette-violet-20: #580276; /** Violet 20 */
--slds-g-color-palette-violet-30: #730394; /** Violet 30 */
--slds-g-color-palette-violet-40: #9602c7; /** Violet 40 */
--slds-g-color-palette-violet-50: #ba01ff; /** Violet 50 */
--slds-g-color-palette-violet-60: #cb65ff; /** Violet 60 */
--slds-g-color-palette-violet-65: #d17dfe; /** Violet 65 */
--slds-g-color-palette-violet-70: #d892fe; /** Violet 70 */
--slds-g-color-palette-violet-80: #e5b9fe; /** Violet 80 */
--slds-g-color-palette-violet-90: #f2defe; /** Violet 90 */
--slds-g-color-palette-violet-95: #f9f0ff; /** Violet 95 */
--slds-g-color-palette-yellow-10: #281202; /** Yellow 10 */
--slds-g-color-palette-yellow-15: #371e03; /** Yellow 15 */
--slds-g-color-palette-yellow-20: #4f2100; /** Yellow 20 */
--slds-g-color-palette-yellow-30: #6f3400; /** Yellow 30 */
--slds-g-color-palette-yellow-40: #8c4b02; /** Yellow 40 */
--slds-g-color-palette-yellow-50: #a96504; /** Yellow 50 */
--slds-g-color-palette-yellow-60: #ca8501; /** Yellow 60 */
--slds-g-color-palette-yellow-65: #da9401; /** Yellow 65 */
--slds-g-color-palette-yellow-70: #e4a201; /** Yellow 70 */
--slds-g-color-palette-yellow-80: #fcc003; /** Yellow 80 */
--slds-g-color-palette-yellow-90: #f9e3b6; /** Yellow 90 */
--slds-g-color-palette-yellow-95: #fbf3e0; /** Yellow 95 */
--slds-g-color-border-1: var(--slds-g-color-neutral-base-80); /** Neutral border color for UI elements. */
--slds-g-color-border-2: var(--slds-g-color-neutral-base-50); /** Neutral border color for UI elements. */
--slds-g-color-border-accent-1: var(--slds-r-color-brand-50); /** Brand border color for UI elements. */
--slds-g-color-border-accent-2: var(--slds-r-color-brand-40); /** Alternate brand border color for UI elements. */
--slds-g-color-border-accent-3: var(--slds-r-color-brand-30); /** Alternate brand border color for UI elements. */
--slds-g-color-border-error-1: var(--slds-r-color-error-40); /** Border color for elements denoting an error. This is the lightest value of the error border ranges. */
--slds-g-color-border-error-2: var(--slds-r-color-error-30); /** Border color for elements denoting an error. This is one step darker than border-error-1. */
--slds-g-color-border-warning-1: var(--slds-r-color-warning-60); /** Border color for elements denoting an warning. This is the lightest value of the warning border ranges. */
--slds-g-color-border-success-1: var(--slds-r-color-success-50); /** Border color for elements denoting an success. This is the lightest value of the success border ranges. */
--slds-g-color-border-success-2: var(--slds-r-color-success-40); /** Border color for elements denoting an success. This is one step darker than color-border-success-1. */
--slds-g-color-border-inverse-1: #f3f3f3; /** Border color for UI elements that sit on top of or with a inversed surface color. This is the lightest value of the inversed border colors. */
--slds-g-color-border-inverse-2: #032d60; /** Border color for UI elements that sit on top of or with a inversed surface color. This is one step darker than surface-1. */
--slds-g-color-border-disabled-1: #c9c9c9; /** Border color for disabled UI elements. This is the lightest value of the disabled ranges. */
--slds-g-color-border-disabled-2: #aeaeae; /** Border color for disabled UI elements. This is one step darker than disabled-border-1. */
--slds-g-color-surface-1: #fff; /** Neutral surface color for UI elements. This is the lightest value of the surface ranges. */
--slds-g-color-surface-2: #f3f3f3; /** Neutral surface color for UI elements. This is one step darker than surface-1. */
--slds-g-color-surface-3: #e5e5e5; /** Neutral surface color for UI elements. This is one step darker than surface-2. */
--slds-g-color-surface-container-1: #fff; /** Neutral surface container color for UI elements. This sits on top of a surface. This is the lightest value of the surface container ranges. */
--slds-g-color-surface-container-2: #f3f3f3; /** Neutral surface container color for UI elements. This sits on top of a surface. This is one step darker than surface-container-1. */
--slds-g-color-surface-container-3: #e5e5e5; /** Neutral surface container color for UI elements. This sits on top of a surface. This is one step darker than surface-container-2. */
--slds-g-color-surface-container-inverse-1: #032d60; /** Reversed color of neutral surface color, used selectively to create a contrasting effect. This is the lightest value of the surface inverse ranges. */
--slds-g-color-surface-container-inverse-2: #001639; /** Reversed color of neutral surface color, used selectively to create a contrasting effect. This is 1 step darker than surface-container-inverse-1. */
--slds-g-color-surface-inverse-1: #032d60; /** Reversed color of neutral surface color, used selectively to create a contrasting effect. This is the lightest value of the surface inverse ranges. */
--slds-g-color-surface-inverse-2: #001639; /** Reversed color of neutral surface color, used selectively to create a contrasting effect. This is 1 step darker than surface-inverse-1. */
--slds-g-color-on-surface-1: #757575; /** Text/icon color that sits on top of a neutral surface color for UI elements. This is the lightest value of the on surface ranges. */
--slds-g-color-on-surface-2: #2e2e2e; /** Text/icon color that sits on top of a neutral surface color for UI elements. This is one step darker than on-surface-1. */
--slds-g-color-on-surface-3: #181818; /** Text/icon color that sits on top of a neutral surface color for UI elements. This is one step darker than on-surface-2. */
--slds-g-color-on-surface-inverse-1: #fff; /** Text/icon color that sits on top of a inversed surface color for UI elements. This is the lightest value of the on inversed surface ranges. */
--slds-g-color-on-surface-inverse-2: #aeaeae; /** Text/icon color that sits on top of a inversed surface color for UI elements. This is one step darker than on-surface-inverse-1. */
--slds-g-color-on-accent-1: var(--slds-g-color-neutral-base-100); /** Text/icon color that sits on top of a brand accent color for UI elements. This is the lightest value of the accent ranges. */
--slds-g-color-on-accent-2: var(--slds-g-color-neutral-base-100); /** Text/icon color that sits on top of a brand accent color for UI elements. This is the lightest value of the accent ranges. */
--slds-g-color-on-accent-3: var(--slds-g-color-neutral-base-100); /** Text/icon color that sits on top of a brand accent color for UI elements. This is the lightest value of the accent ranges. */
--slds-g-color-on-error-1: #fff; /** Text/icon color that sits on top of an error color for UI elements. */
--slds-g-color-on-error-2: #fff; /** Text/icon color that sits on top of an error color for UI elements. */
--slds-g-color-on-warning-1: #181818; /** Text/icon color that sits on top of an warning color for UI elements. */
--slds-g-color-on-success-1: #fff; /** Text/icon color that sits on top of a success accent color for UI elements. This is the lightest value of the success ranges. */
--slds-g-color-on-success-2: #181818; /** Text/icon color that sits on top of a success accent color for UI elements. This is one step darker than on-success-1. */
--slds-g-color-on-info-1: #fff; /** Text/icon color that sits on top of an info color for UI elements. */
--slds-g-color-on-disabled-1: #c9c9c9; /** Text/icon color that sits on top of an disabled color for UI elements. This is the base disabled text color value. */
--slds-g-color-on-disabled-2: #939393; /** Text/icon color that sits on top of an disabled color for UI elements. This is the alt disabled text color value. */
--slds-g-color-accent-1: var(--lwc-brandPrimary, var(--slds-r-color-brand-60)); /** Brand accent color for UI elements. This is the lightest value of the accent ranges. This accent should not have any text/icon on top of it. */
--slds-g-color-accent-2: var(--lwc-brandPrimaryActive, var(--slds-r-color-brand-50)); /** Brand accent color for UI elements. This is one step darker than accent-1. This accent should not have any text/icon on top of it. */
--slds-g-color-accent-3: var(--slds-r-color-brand-40); /** Brand accent color for UI elements. This is one step darker than accent-2. This accent should not have any text/icon on top of it. */
--slds-g-color-accent-container-1: var(--lwc-brandAccessible, var(--slds-r-color-brand-50)); /** Brand accent color for UI elements contain text/icon. This is the lightest value of the accent container ranges. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-accent-1. */
--slds-g-color-accent-container-2: var(--lwc-brandAccessibleActive, var(--slds-r-color-brand-40)); /** Brand accent color for UI elements contain text/icon. This is one step darker than accent-container-1. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-accent-1. */
--slds-g-color-accent-container-3: var(--slds-r-color-brand-30); /** Brand accent color for UI elements contain text/icon. This is one step darker than accent-container-2. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-accent-1. */
--slds-g-color-accent-dark-1: var(--lwc-brandDark, var(--slds-g-color-brand-base-20)); /** Brand accent color for UI elements. This is the lightest value of the dark accent ranges. This accent should not have any text/icon on top of it. */
--slds-g-color-accent-dark-2: var(--lwc-brandDarkActive, var(--slds-g-color-brand-base-10)); /** Brand accent color for UI elements. This is one step darker than accent-dark-1. This accent should not have any text/icon on top of it. */
--slds-g-color-accent-light-1: var(--lwc-brandLight, var(--slds-g-color-brand-base-95)); /** Brand accent color for UI elements. This is the lightest value of the light accent ranges. This accent should not have any text/icon on top of it. */
--slds-g-color-accent-light-2: var(--lwc-brandLightActive, var(--slds-g-color-brand-base-90)); /** Brand accent color for UI elements. This is one step darker than accent-light-1. This accent should not have any text/icon on top of it. */
--slds-g-color-error-1: var(--slds-r-color-error-40); /** Accent color denoting an error for UI elements. This is the lightest value of the error ranges. */
--slds-g-color-error-container-1: var(--slds-r-color-error-40); /** Error accent color for UI elements containing a text or icon. This is the lightest value of the error container ranges. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-error-1. */
--slds-g-color-error-container-2: var(--slds-r-color-error-30); /** Brand accent color for UI elements contain text/icon. This is one step darker than error-container-1. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-accent-1. */
--slds-g-color-error-base-10: var(--slds-r-color-error-10); /** Error Base 10 - if used as a background, please use Error Base 100-50 to meet accessibility guidelines. */
--slds-g-color-error-base-15: var(--slds-r-color-error-15); /** Error Base 15 - if used as a background, please use Error Base 100-65 to meet accessibility guidelines. */
--slds-g-color-error-base-20: var(--slds-r-color-error-20); /** Error Base 20 - if used as a background, please use Error Base 100-60 to meet accessibility guidelines. */
--slds-g-color-error-base-30: var(--slds-r-color-error-30); /** Error Base 30 - if used as a background, please use Error Base 100-70 to meet accessibility guidelines. */
--slds-g-color-error-base-40: var(--slds-r-color-error-40); /** Error Base 40 - 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); /** Error Base 50 - if used as a background, please use Error Base 100-90 to meet accessibility guidelines. */
--slds-g-color-error-base-60: var(--slds-r-color-error-60); /** Error Base 60 - if used as a background, please use Error Base 20-10 to meet accessibility guidelines. */
--slds-g-color-error-base-65: var(--slds-r-color-error-65); /** Error Base 65 - if used as a background, please use Error Base 20-10 to meet accessibility guidelines. */
--slds-g-color-error-base-70: var(--slds-r-color-error-70); /** Error Base 70 - if used as a background, please use Error Base 30-10 to meet accessibility guidelines. */
--slds-g-color-error-base-80: var(--slds-r-color-error-80); /** Error Base 80 - if used as a background, please use Error Base 40-10 to meet accessibility guidelines. */
--slds-g-color-error-base-90: var(--slds-r-color-error-90); /** Error Base 90 - if used as a background, please use Error Base 50-10 to meet accessibility guidelines. */
--slds-g-color-error-base-95: var(--slds-r-color-error-95); /** Error Base 95 - if used as a background, please use Error Base 50-10 to meet accessibility guidelines. */
--slds-g-color-error-base-100: var(--slds-g-color-neutral-base-100); /** Error Base 100 - if used as a background, please use Error Base 60-10 to meet accessibility guidelines. */
--slds-g-color-warning-1: var(--slds-r-color-warning-40); /** Accent color denoting an warning for UI elements. This is the lightest value of the warning ranges. */
--slds-g-color-warning-container-1: var(--slds-r-color-warning-60); /** Warning accent color for UI elements containing a text or icon. This is the lightest value of the warning container ranges. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-warning-1. */
--slds-g-color-warning-base-10: var(--slds-r-color-warning-10); /** Warning Base 10 - if used as a background, please use Warning Base 100-50 to meet accessibility guidelines. */
--slds-g-color-warning-base-15: var(--slds-r-color-warning-15); /** Warning Base 15 - if used as a background, please use Warning Base 100-50 to meet accessibility guidelines. */
--slds-g-color-warning-base-20: var(--slds-r-color-warning-20); /** Warning Base 20 - if used as a background, please use Warning Base 100-60 to meet accessibility guidelines. */
--slds-g-color-warning-base-30: var(--slds-r-color-warning-30); /** Warning Base 30 - if used as a background, please use Warning Base 100-70 to meet accessibility guidelines. */
--slds-g-color-warning-base-40: var(--slds-r-color-warning-40); /** Warning Base 40 - 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); /** Warning Base 50 - if used as a background, please use Warning Base 100-90 to meet accessibility guidelines. */
--slds-g-color-warning-base-60: var(--slds-r-color-warning-60); /** Warning Base 60 - if used as a background, please use Warning Base 20-10 to meet accessibility guidelines. */
--slds-g-color-warning-base-65: var(--slds-r-color-warning-65); /** Warning Base 65 - if used as a background, please use Warning Base 20-10 to meet accessibility guidelines. */
--slds-g-color-warning-base-70: var(--slds-r-color-warning-70); /** Warning Base 70 - if used as a background, please use Warning Base 30-10 to meet accessibility guidelines. */
--slds-g-color-warning-base-80: var(--slds-r-color-warning-80); /** Warning Base 80 - if used as a background, please use Warning Base 40-10 to meet accessibility guidelines. */
--slds-g-color-warning-base-90: var(--slds-r-color-warning-90); /** Warning Base 90 - if used as a background, please use Warning Base 50-10 to meet accessibility guidelines. */
--slds-g-color-warning-base-95: var(--slds-r-color-warning-95); /** Warning Base 95 - if used as a background, please use Warning Base 50-10 to meet accessibility guidelines. */
--slds-g-color-warning-base-100: var(--slds-g-color-neutral-base-100); /** Warning Base 100 - if used as a background, please use Warning Base 60-10 to meet accessibility guidelines. */
--slds-g-color-success-1: var(--slds-r-color-success-50); /** Accent color denoting an success for UI elements. This is the lightest value of the success ranges. */
--slds-g-color-success-container-1: var(--slds-r-color-success-50); /** success accent color for UI elements containing a text or icon. This is the lightest value of the success container ranges. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-success-1. */
--slds-g-color-success-container-2: var(--slds-r-color-success-30); /** success accent color for UI elements containing a text or icon. This is one step darker than success-container-1. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-success-1. */
--slds-g-color-success-base-10: var(--slds-r-color-success-10); /** Success Base 10 - if used as a background, please use Success Base 100-50 to meet accessibility guidelines. */
--slds-g-color-success-base-15: var(--slds-r-color-success-15); /** Success Base 15 - if used as a background, please use Success Base 100-65 to meet accessibility guidelines. */
--slds-g-color-success-base-20: var(--slds-r-color-success-20); /** Success Base 20 - if used as a background, please use Success Base 100-60 to meet accessibility guidelines. */
--slds-g-color-success-base-30: var(--slds-r-color-success-30); /** Success Base 30 - if used as a background, please use Success Base 100-70 to meet accessibility guidelines. */
--slds-g-color-success-base-40: var(--slds-r-color-success-40); /** Success Base 40 - 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); /** Success Base 50 - if used as a background, please use Success Base 100-90 to meet accessibility guidelines. */
--slds-g-color-success-base-60: var(--slds-r-color-success-60); /** Success Base 60 - if used as a background, please use Success Base 20-10 to meet accessibility guidelines. */
--slds-g-color-success-base-65: var(--slds-r-color-success-65); /** Success Base 65 - if used as a background, please use Success Base 20-10 to meet accessibility guidelines. */
--slds-g-color-success-base-70: var(--slds-r-color-success-70); /** Success Base 70 - if used as a background, please use Success Base 30-10 to meet accessibility guidelines. */
--slds-g-color-success-base-80: var(--slds-r-color-success-80); /** Success Base 80 - if used as a background, please use Success Base 40-10 to meet accessibility guidelines. */
--slds-g-color-success-base-90: var(--slds-r-color-success-90); /** Success Base 90 - if used as a background, please use Success Base 50-10 to meet accessibility guidelines. */
--slds-g-color-success-base-95: var(--slds-r-color-success-95); /** Success Base 95 - if used as a background, please use Success Base 50-10 to meet accessibility guidelines. */
--slds-g-color-success-base-100: var(--slds-g-color-neutral-base-100); /** Success Base 100 - if used as a background, please use Success Base 60-10 to meet accessibility guidelines. */
--slds-g-color-info-1: var(--slds-r-color-info-30); /** Accent color denoting an info for UI elements. This is the lightest value of the info ranges. */
--slds-g-color-info-container-1: var(--slds-r-color-info-40); /** Info accent color for UI elements containing a text or icon. This is the lightest value of the info container ranges. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-info-1. */
--slds-g-color-info-base-10: var(--slds-r-color-info-10); /** Info Base 10 - if used as a background, please use Info Base 100-65 to meet accessibility guidelines. */
--slds-g-color-info-base-15: var(--slds-r-color-info-15); /** Info Base 15 - if used as a background, please use Info Base 100-65 to meet accessibility guidelines. */
--slds-g-color-info-base-20: var(--slds-r-color-info-20); /** Info Base 20 - if used as a background, please use Info Base 100-70 to meet accessibility guidelines. */
--slds-g-color-info-base-30: var(--slds-r-color-info-30); /** Info Base 30 - if used as a background, please use Info Base 100-80 to meet accessibility guidelines. */
--slds-g-color-info-base-35: var(--slds-r-color-info-35); /** Info Base 35 - if used as a background, please use Info Base 100-80 to meet accessibility guidelines. */
--slds-g-color-info-base-40: var(--slds-r-color-info-40); /** Info Base 40 - 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-60: var(--slds-r-color-info-60); /** Info Base 60 - if used as a background, please use Info Base 100 to meet accessibility guidelines. */
--slds-g-color-info-base-65: var(--slds-r-color-info-65); /** Info Base 65 - if used as a background, please use Info Base 15-10 to meet accessibility guidelines. */
--slds-g-color-info-base-70: var(--slds-r-color-info-70); /** Info Base 70 - if used as a background, please use Info Base 20-10 to meet accessibility guidelines. */
--slds-g-color-info-base-80: var(--slds-r-color-info-80); /** Info Base 80 - if used as a background, please use Info Base 30-10 to meet accessibility guidelines. */
--slds-g-color-info-base-90: var(--slds-r-color-info-90); /** Info Base 90 - if used as a background, please use Info Base 40-10 to meet accessibility guidelines. */
--slds-g-color-info-base-95: var(--slds-r-color-info-95); /** 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: #c9c9c9; /** Color denoting disabled UI elements. This is the lightest value of the disabled ranges. */
--slds-g-color-disabled-2: #aeaeae; /** Color denoting disabled UI elements. This is one step darker than disabled-1. */
--slds-g-color-disabled-container-1: #fff; /** Disabled color for UI elements containing a text or icon. This is the lightest value of the disabled container ranges. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-disabled-1. */
--slds-g-color-disabled-container-2: #c9c9c9; /** Disabled color for UI elements containing a text or icon. This is two steps darker than disabled-container-1. This needs to be accompanied by a text/icon color that meets accessibility guidelines, such as on-disabled-1. */
--slds-g-color-neutral-base-0: #000; /** Neutral Base 0 - if used as a background, please use Neutral Base 100-50 to meet accessibility guidelines. */
--slds-g-color-neutral-base-10: #181818; /** Neutral Base 10 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines. */
--slds-g-color-neutral-base-15: #242424; /** Neutral Base 15 - if used as a background, please use Neutral Base 100-65 to meet accessibility guidelines. */
--slds-g-color-neutral-base-20: #2e2e2e; /** Neutral Base 20 - if used as a background, please use Neutral Base 100-70 to meet accessibility guidelines. */
--slds-g-color-neutral-base-30: #444; /** Neutral Base 30 - if used as a background, please use Neutral Base 100-80 to meet accessibility guidelines. */
--slds-g-color-neutral-base-40: #5c5c5c; /** Neutral Base 40 - if used as a background, please use Neutral Base 100-90 to meet accessibility guidelines. */
--slds-g-color-neutral-base-50: #757575; /** Neutral Base 50 - if used as a background, please use Neutral Base 100-95 to meet accessibility guidelines. */
--slds-g-color-neutral-base-60: #939393; /** Neutral Base 60 - if used as a background, please use Neutral Base 100 to meet accessibility guidelines. */
--slds-g-color-neutral-base-65: #a0a0a0; /** Neutral Base 65 - if used as a background, please use Neutral Base 15-10 to meet accessibility guidelines. */
--slds-g-color-neutral-base-70: #aeaeae; /** Neutral Base 70 - if used as a background, please use Neutral Base 20-10 to meet accessibility guidelines. */
--slds-g-color-neutral-base-80: #c9c9c9; /** Neutral Base 80 - if used as a background, please use Neutral Base 30-10 to meet accessibility guidelines. */
--slds-g-color-neutral-base-90: #e5e5e5; /** Neutral Base 90 - if used as a background, please use Neutral Base 40-10 to meet accessibility guidelines. */
--slds-g-color-neutral-base-95: #f3f3f3; /** Neutral Base 95 - if used as a background, please use Neutral Base 50-10 to meet accessibility guidelines. */
--slds-g-color-neutral-base-100: #fff; /** Neutral Base 100 - if used as a background, please use Neutral Base 60-10 to meet accessibility guidelines. */
--slds-g-color-brand-base-10: var(--slds-r-color-brand-10); /** Brand Base 10 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines. */
--slds-g-color-brand-base-15: var(--slds-r-color-brand-15); /** Brand Base 15 - if used as a background, please use Brand Base 100-65 to meet accessibility guidelines. */
--slds-g-color-brand-base-20: var(--slds-r-color-brand-20); /** Brand Base 20 - if used as a background, please use Brand Base 100-70 to meet accessibility guidelines. */
--slds-g-color-brand-base-30: var(--slds-r-color-brand-30); /** Brand Base 30 - if used as a background, please use Brand Base 100-80 to meet accessibility guidelines. */
--slds-g-color-brand-base-40: var(--slds-r-color-brand-40); /** Brand Base 40 - if used as a background, please use Brand Base 100-90 to meet accessibility guidelines. */
--slds-g-color-brand-base-45: var(--slds-r-color-brand-45); /** 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); /** Brand Base 50 - if used as a background, please use Brand Base 100-95 to meet accessibility guidelines. */
--slds-g-color-brand-base-55: var(--slds-r-color-brand-55); /** Brand Base 55 - if used as a background, please use Brand Base 100-95 to meet accessibility guidelines. */
--slds-g-color-brand-base-60: var(--slds-r-color-brand-60); /** Brand Base 60 - if used as a background, please use Brand Base 100 to meet accessibility guidelines. */
--slds-g-color-brand-base-65: var(--slds-r-color-brand-65); /** Brand Base 65 - if used as a background, please use Brand Base 15-10 to meet accessibility guidelines. */
--slds-g-color-brand-base-70: var(--slds-r-color-brand-70); /** Brand Base 70 - if used as a background, please use Brand Base 20-10 to meet accessibility guidelines. */
--slds-g-color-brand-base-80: var(--slds-r-color-brand-80); /** Brand Base 80 - if used as a background, please use Brand Base 30-10 to meet accessibility guidelines. */
--slds-g-color-brand-base-90: var(--slds-r-color-brand-90); /** Brand Base 90 - if used as a background, please use Brand Base 40-10 to meet accessibility guidelines. */
--slds-g-color-brand-base-95: var(--slds-r-color-brand-95); /** Brand Base 95 - if used as a background, please use Brand Base 50-10 to meet accessibility guidelines. */
--slds-g-color-brand-base-100: var(--slds-g-color-neutral-base-100); /** Brand Base 100 - if used as a background, please use Brand Base 60-10 to meet accessibility guidelines. */
--slds-g-shadow-1: 0px 2px 2px 0px #0000001A; /** Shadow depth 1 */
--slds-g-shadow-2: 0px 2px 3px 0px #00000027; /** Shadow depth 2 */
--slds-g-shadow-3: 0px 2px 4px 0px #00000027; /** Shadow depth 3 */
--slds-g-shadow-4: 0px 2px 5px 0px #00000027; /** Shadow depth 4 */
--slds-g-shadow-5: var(--slds-g-shadow-4); /** Shadow depth 5 */
--slds-g-shadow-6: var(--slds-g-shadow-4); /** Shadow depth 6 */
--slds-g-shadow-outline-focus-1: 0px 0px 0px 2px var(--slds-g-color-brand-base-40); /** Shadow outline focus */
--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-40); /** Shadow outset focus */
--slds-g-shadow-inset-focus-1: 0px 0px 0px 2px var(--slds-g-color-brand-base-40) inset; /** Shadow inset focus */
--slds-g-shadow-inset-inverse-focus-1: 0px 0px 0px 2px var(--slds-g-color-brand-base-40) 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 depth 1 */
--slds-g-shadow-insetinverse-focus-1: var(--slds-g-shadow-inset-inverse-focus-1);
--slds-g-shadow-block-start-1: 0px -2px 2px 0px #0000001A; /** Shadow depth 1 - up */
--slds-g-shadow-block-start-2: 0px -2px 3px 0px #00000027; /** Shadow depth 2 - up */
--slds-g-shadow-block-start-3: 0px -2px 4px 0px #00000027; /** Shadow depth 3 - up */
--slds-g-shadow-block-start-4: 0px -2px 4px 0px #00000027; /** 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);
--slds-g-shadow-blockstart-2: var(--slds-g-shadow-block-start-2);
--slds-g-shadow-blockstart-3: var(--slds-g-shadow-block-start-3);
--slds-g-shadow-blockstart-4: var(--slds-g-shadow-block-start-4);
--slds-g-shadow-blockend-1: var(--slds-g-shadow-block-end-1);
--slds-g-shadow-blockend-2: var(--slds-g-shadow-block-end-2);
--slds-g-shadow-blockend-3: var(--slds-g-shadow-block-end-3);
--slds-g-shadow-blockend-4: var(--slds-g-shadow-block-end-4);
--slds-g-shadow-inline-start-1: -2px 0px 2px 0px #0000001A; /** Shadow depth 1 - left */
--slds-g-shadow-inline-start-2: -2px 0px 3px 0px #00000027; /** Shadow depth 2 - left */
--slds-g-shadow-inline-start-3: -2px 0px 4px 0px #00000027; /** Shadow depth 3 - left */
--slds-g-shadow-inline-start-4: -2px 0px 4px 0px #00000027; /** Shadow depth 4 - left */
--slds-g-shadow-inline-end-1: 2px 0px 2px 0px #0000001A; /** Shadow depth 1 - right */
--slds-g-shadow-inline-end-2: 2px 0px 3px 0px #00000027; /** Shadow depth 2 - right */
--slds-g-shadow-inline-end-3: 2px 0px 4px 0px #00000027; /** Shadow depth 3 - right */
--slds-g-shadow-inline-end-4: 2px 0px 4px 0px #00000027; /** Shadow depth 4 - right */
--slds-g-shadow-inlinestart-1: var(--slds-g-shadow-inline-start-1);
--slds-g-shadow-inlinestart-2: var(--slds-g-shadow-inline-start-2);
--slds-g-shadow-inlinestart-3: var(--slds-g-shadow-inline-start-3);
--slds-g-shadow-inlinestart-4: var(--slds-g-shadow-inline-start-4);
--slds-g-shadow-inlineend-1: var(--slds-g-shadow-inline-end-1);
--slds-g-shadow-inlineend-2: var(--slds-g-shadow-inline-end-2);
--slds-g-shadow-inlineend-3: var(--slds-g-shadow-inline-end-3);
--slds-g-shadow-inlineend-4: var(--slds-g-shadow-inline-end-4);
}