diff --git a/packages/checklist/src/sanoma-learning-theme.scss.ts b/packages/checklist/src/sanoma-learning-theme.scss.ts index 33b081365e..61c135ba38 100644 --- a/packages/checklist/src/sanoma-learning-theme.scss.ts +++ b/packages/checklist/src/sanoma-learning-theme.scss.ts @@ -1,3 +1,5221 @@ import { css } from 'lit'; -export default css``; +export default css` + /** + * Copyright 2024 Sanoma Learning + * SPDX-License-Identifier: Apache-2.0 + */ + /** + * Copyright 2024 Sanoma Learning + * SPDX-License-Identifier: Apache-2.0 + */ + /** + * Copyright 2024 Sanoma Learning + * SPDX-License-Identifier: Apache-2.0 + */ + :host { + --sl-color-palette-transparent-base: rgba(0, 0, 0, 0); /* color.palette.transparent.base */ + --sl-color-palette-white-base: #fefefe; /* color.palette.white.base */ + --sl-color-palette-black-base: #222222; /* color.palette.black.base */ + --sl-color-palette-danger-base: #ff575c; /* color.palette.danger.base */ + --sl-color-palette-danger-900: #260808; /* color.palette.danger.900 */ + --sl-color-palette-danger-800: #470d0d; /* color.palette.danger.800 */ + --sl-color-palette-danger-700: #6b1313; /* color.palette.danger.700 */ + --sl-color-palette-danger-600: #992224; /* color.palette.danger.600 */ + --sl-color-palette-danger-500: #c73434; /* color.palette.danger.500 */ + --sl-color-palette-danger-400: #e5454a; /* color.palette.danger.400 */ + --sl-color-palette-danger-200: #ff8e8a; /* color.palette.danger.200 */ + --sl-color-palette-danger-150: #ffbcb8; /* color.palette.danger.150 */ + --sl-color-palette-danger-100: #ffd6d1; /* color.palette.danger.100 */ + --sl-color-palette-danger-50: #ffedeb; /* color.palette.danger.50 */ + --sl-color-palette-warning-base: #ffae00; /* color.palette.warning.base */ + --sl-color-palette-warning-900: #331e00; /* color.palette.warning.900 */ + --sl-color-palette-warning-800: #593400; /* color.palette.warning.800 */ + --sl-color-palette-warning-700: #804b00; /* color.palette.warning.700 */ + --sl-color-palette-warning-600: #a66100; /* color.palette.warning.600 */ + --sl-color-palette-warning-500: #cc7700; /* color.palette.warning.500 */ + --sl-color-palette-warning-400: #ffae00; /* color.palette.warning.400 */ + --sl-color-palette-warning-300: #ffd170; /* color.palette.warning.300 */ + --sl-color-palette-warning-200: #ffe2a3; /* color.palette.warning.200 */ + --sl-color-palette-warning-150: #ffefcb; /* color.palette.warning.150 */ + --sl-color-palette-warning-100: #fff8e8; /* color.palette.warning.100 */ + --sl-color-palette-warning-50: #fffdf9; /* color.palette.warning.50 */ + --sl-color-palette-success-base: #45cc80; /* color.palette.success.base */ + --sl-color-palette-success-900: #082613; /* color.palette.success.900 */ + --sl-color-palette-success-800: #0b331a; /* color.palette.success.800 */ + --sl-color-palette-success-700: #114224; /* color.palette.success.700 */ + --sl-color-palette-success-600: #1b6137; /* color.palette.success.600 */ + --sl-color-palette-success-500: #28854e; /* color.palette.success.500 */ + --sl-color-palette-success-400: #39b26c; /* color.palette.success.400 */ + --sl-color-palette-success-200: #70e09d; /* color.palette.success.200 */ + --sl-color-palette-success-150: #aeebc4; + --sl-color-palette-success-100: #d7f5e1; /* color.palette.success.100 */ + --sl-color-palette-success-50: #ebf5ee; /* color.palette.success.50 */ + --sl-color-palette-info-base: #3366ff; /* color.palette.info.base */ + --sl-color-palette-info-900: #000d33; /* color.palette.info.900 */ + --sl-color-palette-info-800: #00175f; /* color.palette.info.800 */ + --sl-color-palette-info-700: #09298e; /* color.palette.info.700 */ + --sl-color-palette-info-600: #1138ad; /* color.palette.info.600 */ + --sl-color-palette-info-500: #2351db; /* color.palette.info.500 */ + --sl-color-palette-info-300: #5985ff; /* color.palette.info.300 */ + --sl-color-palette-info-200: #9ebaff; /* color.palette.info.200 */ + --sl-color-palette-info-150: #ccdbff; /* color.palette.info.150 */ + --sl-color-palette-info-100: #e0eaff; /* color.palette.info.100 */ + --sl-color-palette-info-50: #f0f5ff; /* color.palette.info.50 */ + --sl-color-palette-neutral-base: #222222; /* color.palette.neutral.base */ + --sl-color-palette-neutral-900: #2e2e2e; /* color.palette.neutral.900 */ + --sl-color-palette-neutral-800: #3e3d3d; /* color.palette.neutral.800 */ + --sl-color-palette-neutral-700: #4e4e4e; /* color.palette.neutral.700 */ + --sl-color-palette-neutral-600: #605f5f; /* color.palette.neutral.600 */ + --sl-color-palette-neutral-500: #737373; /* color.palette.neutral.500 */ + --sl-color-palette-neutral-400: #898989; /* color.palette.neutral.400 */ + --sl-color-palette-neutral-300: #a2a1a1; /* color.palette.neutral.300 */ + --sl-color-palette-neutral-200: #bcbcbc; /* color.palette.neutral.200 */ + --sl-color-palette-neutral-150: #d5d5d5; /* color.palette.neutral.150 */ + --sl-color-palette-neutral-100: #eaeaea; /* color.palette.neutral.100 */ + --sl-color-palette-neutral-50: #f3f3f3; /* color.palette.neutral.50 */ + --sl-color-palette-accent-base: #3366ff; /* color.palette.accent.base */ + --sl-color-palette-accent-900: #000d33; /* color.palette.accent.900 */ + --sl-color-palette-accent-800: #00175f; /* color.palette.accent.800 */ + --sl-color-palette-accent-700: #09298e; /* color.palette.accent.700 */ + --sl-color-palette-accent-600: #1138ad; /* color.palette.accent.600 */ + --sl-color-palette-accent-500: #2351db; /* color.palette.accent.500 */ + --sl-color-palette-accent-300: #5985ff; /* color.palette.accent.300 */ + --sl-color-palette-accent-200: #9ebaff; /* color.palette.accent.200 */ + --sl-color-palette-accent-150: #ccdbff; /* color.palette.accent.150 */ + --sl-color-palette-accent-100: #e0eaff; /* color.palette.accent.100 */ + --sl-color-palette-accent-50: #edf2fc; /* color.palette.accent.50 */ + --sl-color-palette-primary-base: #222222; /* color.palette.primary.base */ + --sl-color-palette-primary-900: #262626; /* color.palette.primary.900 */ + --sl-color-palette-primary-800: #3e3d3d; /* color.palette.primary.800 */ + --sl-color-palette-primary-700: #4e4e4e; /* color.palette.primary.700 */ + --sl-color-palette-primary-600: #605f5f; /* color.palette.primary.600 */ + --sl-color-palette-primary-500: #737373; /* color.palette.primary.500 */ + --sl-color-palette-primary-400: #898989; /* color.palette.primary.400 */ + --sl-color-palette-primary-300: #a2a1a1; /* color.palette.primary.300 */ + --sl-color-palette-primary-200: #bcbcbc; /* color.palette.primary.200 */ + --sl-color-palette-primary-150: #d5d5d5; /* color.palette.primary.150 */ + --sl-color-palette-primary-100: #eaeaea; /* color.palette.primary.100 */ + --sl-color-palette-primary-50: #fefefe; /* color.palette.primary.50 */ + --sl-justify-content-end: end; + --sl-justify-content-space-between: space-between; + --sl-justify-content-start: start; + --sl-flex-direction-row: row; + --sl-flex-direction-row-reverse: row-reverse; + --sl-flex-direction-column-reverse: column-reverse; + --sl-flex-direction-column: column; + --sl-animation-easing-ease-in-out: ease-in-out; /* animation.easing.ease-in-out */ + --sl-animation-duration-slow: 500ms; /* animation.duration.slow */ + --sl-animation-duration-normal: 200ms; /* animation.duration.normal */ + --sl-animation-duration-fast: 90ms; /* animation.duration.fast */ + --sl-icon-typeset-font-size-2xs: 10px; /* icon.typeset.fontSize.xs */ + --sl-icon-core-search: magnifying-glass; /* icon.core.search */ + --sl-icon-core-breadcrumb-separator: slash-forward; /* icon.core.breadcrumb-separator */ + --sl-icon-core-angle-down: angle-down; /* icon.core.angle-down */ + --sl-icon-core-home-blank: home-blank; /* icon.core.home-blank */ + --sl-icon-core-ellipsis: ellipsis; /* icon.core.ellipsis */ + --sl-icon-core-circle-check-solid: circle-check; /* icon.core.circle-check-solid */ + --sl-icon-core-triangle-exclamation-solid: triangle-exclamation; /* icon.core.triangle-exclamation-solid */ + --sl-icon-core-octagon-exclamation-solid: octagon-exclamation; /* icon.core.octagon-exclamation-solid */ + --sl-icon-core-circle-exclamation-solid: circle-exclamation; /* icon.core.circle-exclamation-solid */ + --sl-icon-core-xmark: xmark; /* icon.core.xmark */ + --sl-icon-core-check-solid: check; /* icon.core.check-solid */ + --sl-icon-core-check: check; /* icon.core.check */ + --sl-icon-core-chevron-right: chevron-right; /* icon.core.chevron-right */ + --sl-icon-core-chevron-down: chevron-down; /* icon.core.chevron-down */ + --sl-icon-core-pinata-solid: pinata; /* icon.core.pinata */ + --sl-icon-core-pinata: pinata; /* icon.core.pinata */ + --sl-icon-core-fav: star; /* icon.core.fav */ + --sl-icon-core-menu: bars; /* icon.core.menu */ + --sl-icon-core-face-smile: face-smile; /* icon.core.face-smile */ + --sl-icon-font-family-sharp: font-awesome-6-sharp; + --sl-icon-font-family-classic: font-awesome-6-pro; + --sl-text-text-field: [object Object]; + --sl-text-typeset-letter-spacing-xl: 0.02em; /* text.typeset.letterSpacing.xl */ + --sl-text-typeset-letter-spacing-lg: 0.01em; /* text.typeset.letterSpacing.lg */ + --sl-text-typeset-letter-spacing-md: 0em; /* text.typeset.letterSpacing.md */ + --sl-text-typeset-letter-spacing-sm: -0.01em; /* text.typeset.letterSpacing.sm */ + --sl-text-typeset-letter-spacing-xs: -0.02em; /* text.typeset.letterSpacing.xs */ + --sl-text-typeset-letter-spacing-none: 0em; /* text.typeset.letterSpacing.none */ + --sl-text-typeset-text-case-capitalize: capitalize; /* text.typeset.textCase.capitalize */ + --sl-text-typeset-text-case-lowercase: lowercase; /* text.typeset.textCase.lowercase */ + --sl-text-typeset-text-case-uppercase: uppercase; /* text.typeset.textCase.uppercase */ + --sl-text-typeset-text-case-none: none; /* text.typeset.textCase.none */ + --sl-text-typeset-text-decoration-strikethrough: strikethrough; /* text.typeset.textDecoration.strikethrough */ + --sl-text-typeset-text-decoration-underline: underline; /* text.typeset.textDecoration.underline */ + --sl-text-typeset-text-decoration-none: none; /* text.typeset.textDecoration.none */ + --sl-text-typeset-paragraph-spacing-5xl: 64px; /* text.typeset.paragraphSpacing.5xl */ + --sl-text-typeset-paragraph-spacing-4xl: 58px; /* text.typeset.paragraphSpacing.4xl */ + --sl-text-typeset-paragraph-spacing-3xl: 42px; /* text.typeset.paragraphSpacing.3xl */ + --sl-text-typeset-paragraph-spacing-2xl: 34px; /* text.typeset.paragraphSpacing.2xl */ + --sl-text-typeset-paragraph-spacing-xl: 28px; /* text.typeset.paragraphSpacing.xl */ + --sl-text-typeset-paragraph-spacing-lg: 24px; /* text.typeset.paragraphSpacing.lg */ + --sl-text-typeset-paragraph-spacing-md: 22px; /* text.typeset.paragraphSpacing.md */ + --sl-text-typeset-paragraph-spacing-sm: 18px; /* text.typeset.paragraphSpacing.sm */ + --sl-text-typeset-paragraph-spacing-xs: 14px; /* text.typeset.paragraphSpacing.xs */ + --sl-text-typeset-paragraph-spacing-none: 0rem; /* text.typeset.paragraphSpacing.none */ + --sl-text-typeset-line-height-5xl: 64px; /* text.typeset.lineHeight.5xl */ + --sl-text-typeset-line-height-4xl: 58px; /* text.typeset.lineHeight.4xl */ + --sl-text-typeset-line-height-3xl: 42px; /* text.typeset.lineHeight.3xl */ + --sl-text-typeset-line-height-2xl: 34px; /* text.typeset.lineHeight.2xl */ + --sl-text-typeset-line-height-xl: 28px; /* text.typeset.lineHeight.xl */ + --sl-text-typeset-line-height-lg: 24px; /* text.typeset.lineHeight.lg */ + --sl-text-typeset-line-height-md: 20px; /* text.typeset.lineHeight.md */ + --sl-text-typeset-line-height-sm: 16px; /* text.typeset.lineHeight.sm */ + --sl-text-typeset-line-height-xs: 14px; /* text.typeset.lineHeight.xs */ + --sl-text-typeset-line-height-xxs: 12px; /* text.typeset.lineHeight.xs */ + --sl-text-typeset-font-size-5xl: 54px; /* text.typeset.fontSize.5xl */ + --sl-text-typeset-font-size-4xl: 48px; /* text.typeset.fontSize.4xl */ + --sl-text-typeset-font-size-3xl: 32px; /* text.typeset.fontSize.3xl */ + --sl-text-typeset-font-size-2xl: 24px; /* text.typeset.fontSize.2xl */ + --sl-text-typeset-font-size-xl: 18px; /* text.typeset.fontSize.xl */ + --sl-text-typeset-font-size-lg: 16px; /* text.typeset.fontSize.lg */ + --sl-text-typeset-font-size-md: 14px; /* text.typeset.fontSize.md */ + --sl-text-typeset-font-size-sm: 12px; /* text.typeset.fontSize.sm */ + --sl-text-typeset-font-size-xs: 10px; /* text.typeset.fontSize.xs */ + --sl-text-typeset-font-weight-bold: 700; /* text.typeset.fontWeight.bold */ + --sl-text-typeset-font-weight-demibold: 600; + --sl-text-typeset-font-weight-regular: 400; /* text.typeset.fontWeight.regular */ + --sl-text-typeset-font-weight-icon-solid: Solid; /* text.typeset.fontWeight.icon-solid */ + --sl-text-typeset-font-weight-icon-regular: 400; /* text.typeset.fontWeight.icon-regular */ + --sl-text-typeset-font-weight-icon-light: 300; /* text.typeset.fontWeight.icon-light */ + --sl-text-typeset-font-weight-icon-thin: 100; /* text.typeset.fontWeight.icon-thin */ + --sl-text-typeset-font-family-body: source-sans-pro; /* text.typeset.fontFamily.body */ + --sl-text-typeset-font-family-heading: the-message; /* text.typeset.fontFamily.heading */ + --sl-space-badge-label-inline-xl: 3px; + --sl-space-badge-label-inline-lg: 3px; + --sl-space-badge-label-inline-md: 3px; + --sl-space-badge-icon-block-lg: 1px; + --sl-space-badge-icon-inline-lg: 1px; + --sl-space-dialog-message-mobile-container-inline: 100%; + --sl-space-3xl: 40px; /* space.3xl */ + --sl-space-2xl: 30px; /* space.2xl */ + --sl-space-xl: 24px; /* space.xl */ + --sl-space-lg: 16px; /* space.lg */ + --sl-space-md: 12px; /* space.md */ + --sl-space-sm: 8px; /* space.sm */ + --sl-space-xs: 4px; /* space.xs */ + --sl-space-2xs: 2px; /* space.2xs */ + --sl-space-none: 0rem; /* space.none */ + --sl-size-accordion-icon-height: 28px; + --sl-size-tabbar-vertical-maxwidth: 200px; + --sl-size-avatar-3xl: 80px; + --sl-size-avatar-xl: 52px; + --sl-size-avatar-lg: 40px; + --sl-size-dialog-message-mobile-min: 300px; /* size.input.md */ + --sl-size-dialog-full: 100%; /* size.input.lg */ + --sl-size-dialog-max: 960px; /* size.input.lg */ + --sl-size-dialog-min: 400px; /* size.input.md */ + --sl-size-icon-2xs: 10px; + --sl-size-icon-3xs: 5px; + --sl-size-4xl: 64px; /* size.4xl */ + --sl-size-3xl: 48px; /* size.3xl */ + --sl-size-2xl: 32px; /* size.2xl */ + --sl-size-xl: 24px; /* size.xl */ + --sl-size-lg: 20px; /* size.lg */ + --sl-size-md: 16px; /* size.md */ + --sl-size-sm: 14px; /* size.sm */ + --sl-size-xs: 12px; /* size.xs */ + --sl-size-2xs: 8px; /* size.2xs */ + --sl-size-3xs: 4px; /* size.3xs */ + --sl-size-4xs: 2px; /* size.4xs */ + --sl-size-none: 0rem; /* size.none */ + --sl-opacity-transparent: 0; /* opacity.transparent */ + --sl-opacity-1000: 1; /* opacity.1000 */ + --sl-opacity-900: 0.8; /* opacity.900 */ + --sl-opacity-800: 0.64; /* opacity.800 */ + --sl-opacity-700: 0.48; /* opacity.700 */ + --sl-opacity-600: 0.32; /* opacity.600 */ + --sl-opacity-500: 0.2; /* opacity.500 */ + --sl-opacity-400: 0.16; /* opacity.400 */ + --sl-opacity-300: 0.12; /* opacity.300 */ + --sl-opacity-200: 0.08; /* opacity.200 */ + --sl-opacity-150: 0.06; /* opacity.150 */ + --sl-opacity-100: 0.04; /* opacity.100 */ + --sl-opacity-50: 0.02; /* opacity.50 */ + --sl-border-width-2xl: 6px; /* border.width.2xl */ + --sl-border-width-xl: 5px; /* border.width.xl */ + --sl-border-width-lg: 4px; /* border.width.lg */ + --sl-border-width-md: 3px; /* border.width.md */ + --sl-border-width-sm: 2px; /* border.width.sm */ + --sl-border-width-xs: 1px; /* border.width.xs */ + --sl-border-width-2xs: 0.5px; /* 2xs */ + --sl-border-width-none: 0rem; /* border.width.none */ + --sl-border-radius-full: 50rem; /* border.radius.full */ + --sl-border-radius-3xl: 18px; /* border.radius.3xl */ + --sl-border-radius-2xl: 16px; + --sl-border-radius-xl: 14px; /* border.radius.xl */ + --sl-border-radius-lg: 12px; /* border.radius.lg */ + --sl-border-radius-md: 10px; /* border.radius.md */ + --sl-border-radius-sm: 8px; /* border.radius.sm */ + --sl-border-radius-xs: 6px; /* border.radius.xs */ + --sl-border-radius-2xs: 4px; /* border.radius.2xs */ + --sl-border-radius-3xs: 2px; /* border.radius.3xs */ + --sl-border-radius-none: 0rem; /* border.radius.none */ + --sl-text-case-badge-text-transform: var(--sl-text-typeset-text-case-uppercase); + --sl-dialog-footer-justify-content: var(--sl-justify-content-end); + --sl-dialog-footer-flex-direction: var(--sl-flex-direction-row); + --sl-dialog-header-flex-direction: var(--sl-flex-direction-column); + --sl-component-button-md: [object Object]; + --sl-component-button-lg: [object Object]; + --sl-conceptual-border-width-default: var(--sl-border-width-xs); /* Conceptual Theme Border Token */ + --sl-color-palette-danger-300: var(--sl-color-palette-danger-base); /* color.palette.danger.300 */ + --sl-color-palette-success-300: var(--sl-color-palette-success-base); /* color.palette.success.300 */ + --sl-color-palette-info-400: var(--sl-color-palette-info-base); /* color.palette.info.400 */ + --sl-color-palette-accent-400: var(--sl-color-palette-accent-base); /* color.palette.accent.400 */ + --sl-border-radius-slds-checklist: var(--sl-border-radius-2xl); + --sl-border-radius-badge-full: var(--sl-border-radius-full); + --sl-border-radius-select-indicator: var(--sl-border-radius-3xs); + --sl-border-radius-select-item: var(--sl-border-radius-3xs); + --sl-border-radius-select-listbox: var(--sl-border-radius-2xs); + --sl-border-radius-dialog-mobile: var(--sl-border-radius-none); + --sl-border-radius-checkbox: var(--sl-border-radius-3xs); + --sl-border-radius-circle: var(--sl-border-radius-full); /* borderRadius.button */ + --sl-border-radius-default: var(--sl-border-radius-3xs); /* borderRadius.button */ + --sl-border-radius-button-icon-only-lg: var(--sl-border-radius-3xs); /* borderRadius.button */ + --sl-border-radius-button-icon-only-md: var(--sl-border-radius-3xs); /* borderRadius.button */ + --sl-border-radius-button-icon-only-sm: var(--sl-border-radius-3xs); /* borderRadius.button */ + --sl-border-radius-button-lg: var(--sl-border-radius-3xs); /* borderRadius.button */ + --sl-border-radius-button-md: var(--sl-border-radius-3xs); /* borderRadius.button */ + --sl-border-radius-button-sm: var(--sl-border-radius-3xs); /* borderRadius.button */ + --sl-border-radius-focusring-full: var(--sl-border-radius-full); + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(34, 34, 34, var(--sl-opacity-50)), + 0 4px 8px 0 rgba(34, 34, 34, var(--sl-opacity-150)); + --sl-elevation-shadow-none: var(--sl-opacity-transparent) 0 0 0 rgba(34, 34, 34, 0); + --sl-elevation-shadow-lg: 0 0 4px 0 rgba(34, 34, 34, var(--sl-opacity-100)), + 0 8px 16px 0 rgba(34, 34, 34, var(--sl-opacity-200)); + --sl-elevation-shadow-md: 0 0 4px 0 rgba(34, 34, 34, var(--sl-opacity-50)), + 0 4px 8px 0 rgba(34, 34, 34, var(--sl-opacity-150)); + --sl-elevation-shadow-sm: 0 0 6px 0 rgba(34, 34, 34, var(--sl-opacity-50)), + 0 2px 4px 0 rgba(34, 34, 34, var(--sl-opacity-200)); + --sl-button-label-lg: var(--sl-text-typeset-line-height-lg); + --sl-button-label-md: var(--sl-text-typeset-line-height-sm); + --sl-button-label-sm: var(--sl-text-typeset-line-height-sm); + --sl-animation-button-easing: var(--sl-animation-easing-ease-in-out); /* animation.button.easing */ + --sl-animation-button-duration: var(--sl-animation-duration-normal); /* animation.button.duration */ + --sl-icon-style-solid: var(--sl-text-typeset-font-weight-icon-solid); + --sl-icon-style-outline: var(--sl-text-typeset-font-weight-icon-regular); + --sl-icon-typeset-font-size-4xl: var(--sl-size-4xl); /* icon.typeset.fontSize.4xl */ + --sl-icon-typeset-font-size-3xl: var(--sl-size-3xl); /* icon.typeset.fontSize.3xl */ + --sl-icon-typeset-font-size-2xl: var(--sl-size-2xl); /* icon.typeset.fontSize.2xl */ + --sl-icon-typeset-font-size-xl: var(--sl-size-xl); /* icon.typeset.fontSize.xl */ + --sl-icon-typeset-font-size-lg: var(--sl-size-lg); /* icon.typeset.fontSize.lg */ + --sl-icon-typeset-font-size-md: var(--sl-size-md); /* icon.typeset.fontSize.md */ + --sl-icon-typeset-font-size-sm: var(--sl-size-sm); /* icon.typeset.fontSize.sm */ + --sl-icon-typeset-font-size-xs: var(--sl-size-xs); /* icon.typeset.fontSize.xs */ + --sl-text-tag-label-lg: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-tag-label-md: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); + --sl-text-accordion-body: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-accordion-title: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-xl) / + var(--sl-text-typeset-line-height-xl) var(--sl-text-typeset-font-family-heading); + --sl-text-href-disabled-lg: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-lg) / 24px + var(--sl-text-typeset-font-family-body); + --sl-text-href-disabled-md: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-href-disabled-sm: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-sm) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-href-active-lg: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-lg) / 24px + var(--sl-text-typeset-font-family-body); + --sl-text-href-active-md: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-href-active-sm: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-sm) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-href-hover-lg: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-lg) / 24px + var(--sl-text-typeset-font-family-body); + --sl-text-href-hover-md: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-href-hover-sm: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-sm) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-href-idle-lg: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-lg) / 24px + var(--sl-text-typeset-font-family-body); + --sl-text-href-idle-md: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-href-idle-sm: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-sm) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-href-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / 24px + var(--sl-text-typeset-font-family-body); + --sl-text-href-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-href-sm: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-sm) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-popover-text-title: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-popover-text-text: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-select-selectbox-title-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-line-height-xs) / + var(--sl-icon-typeset-font-size-sm) var(--sl-text-typeset-font-family-body); + --sl-text-select-selectbox-title-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-line-height-xxs) / + var(--sl-icon-typeset-font-size-xs) var(--sl-text-typeset-font-family-body); + --sl-text-select-selectbox-text-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-select-selectbox-text-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-switch-input-field-bold-lg: var(--sl-text-typeset-font-weight-bold) + var(--sl-text-typeset-font-size-xl) / var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); /* Font size xl is 18px need to be change to 20px to match 4-Grid layout. */ + --sl-text-input-switch-input-field-bold-md: var(--sl-text-typeset-font-weight-bold) + var(--sl-text-typeset-font-size-lg) / var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-switch-input-field-bold-sm: var(--sl-text-typeset-font-weight-bold) + var(--sl-text-typeset-font-size-md) / var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-switch-input-field-regular-lg: var(--sl-text-typeset-font-weight-regular) + var(--sl-text-typeset-font-size-xl) / var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); /* Font size xl is 18px need to be change to 20px to match 4-Grid layout. */ + --sl-text-input-switch-input-field-regular-md: var(--sl-text-typeset-font-weight-regular) + var(--sl-text-typeset-font-size-lg) / var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-switch-input-field-regular-sm: var(--sl-text-typeset-font-weight-regular) + var(--sl-text-typeset-font-size-md) / var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-helper-text-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-input-helper-text-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-helper-text-sm: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-field-label-hint-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* Font size xl is 18px need to be change to 20px to match 4-Grid layout. */ + --sl-text-input-field-label-hint-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-field-label-hint-sm: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-field-label-label-lg: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); /* Font size xl is 18px need to be change to 20px to match 4-Grid layout. */ + --sl-text-input-field-label-label-md: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-field-label-label-sm: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-option-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); /* Is use in Radio and Checkbox */ + --sl-text-input-option-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* Is use in Radio and Checkbox */ + --sl-text-input-text-field-text-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-input-text-field-text-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* UPDATED - Line height md from 22px to 20px */ + --sl-text-input-text-field-font-icon-md: var(--sl-text-typeset-font-weight-icon-solid) 15px / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-icon); + --sl-text-slds-checklist-listitem: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-slds-checklist-body: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); + --sl-text-slds-checklist-heading: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-xl) / + var(--sl-text-typeset-line-height-xl) var(--sl-text-typeset-font-family-heading); + --sl-text-tooltip-text-title: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-sm) / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); + --sl-text-tooltip-text-tip: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-sm) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-breadcrumb-disabled: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-breadcrumb-current: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-breadcrumb-link: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-button-link-disabled-lg: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + 24px var(--sl-text-typeset-font-family-body); + --sl-text-button-link-disabled-md: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + 16px var(--sl-text-typeset-font-family-body); + --sl-text-button-link-disabled-sm: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + 16px var(--sl-text-typeset-font-family-body); + --sl-text-button-link-active-lg: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + 24px var(--sl-text-typeset-font-family-body); + --sl-text-button-link-active-md: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + 16px var(--sl-text-typeset-font-family-body); + --sl-text-button-link-active-sm: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + 16px var(--sl-text-typeset-font-family-body); + --sl-text-button-link-hover-lg: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 24px + var(--sl-text-typeset-font-family-body); + --sl-text-button-link-hover-md: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-button-link-hover-sm: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-button-link-idle-lg: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 24px + var(--sl-text-typeset-font-family-body); + --sl-text-button-link-idle-md: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-button-link-idle-sm: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-button-link-lg: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 24px + var(--sl-text-typeset-font-family-body); + --sl-text-button-link-md: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-button-link-sm: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-button-font-icon-lg: var(--sl-text-typeset-font-size-md) / var(--sl-text-typeset-line-height-sm) sans-serif; + --sl-text-button-font-icon-md: var(--sl-text-typeset-line-height-xs) / var(--sl-text-typeset-font-size-md) sans-serif; + --sl-text-button-font-icon-sm: var(--sl-text-typeset-font-size-md) / var(--sl-text-typeset-line-height-xxs) sans-serif; + --sl-text-button-text-lg: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 24px + var(--sl-text-typeset-font-family-body); + --sl-text-button-text-md: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-button-text-sm: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / 16px + var(--sl-text-typeset-font-family-body); + --sl-text-list-sm-normal: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-tab-subtitle: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-tab-title: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-body-lg-bold: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); /* text.typeset.body.lg.bold */ + --sl-text-body-lg-demibold: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); /* text.typeset.body.lg.demibold */ + --sl-text-body-lg-normal: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-body); /* text.typeset.body.lg.normal */ + --sl-text-body-md-bold: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* text.typeset.body.md.bold */ + --sl-text-body-md-demibold: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* text.typeset.body.md.demibold */ + --sl-text-body-md-normal: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); /* text.typeset.body.md.normal */ + --sl-text-body-sm-bold: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-sm) / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); /* text.typeset.body.sm.bold */ + --sl-text-body-sm-demibold: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-sm) / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); /* text.typeset.body.sm.demibold */ + --sl-text-body-sm-normal: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-sm) / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); /* text.typeset.body.sm.normal */ + --sl-text-heading-4: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-lg) var(--sl-text-typeset-font-family-heading); /* text.typeset.heading.4 */ + --sl-text-heading-3: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-xl) / + var(--sl-text-typeset-line-height-xl) var(--sl-text-typeset-font-family-heading); /* text.typeset.heading.3 */ + --sl-text-heading-2: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-2xl) / + var(--sl-text-typeset-line-height-2xl) var(--sl-text-typeset-font-family-heading); /* text.typeset.heading.2 */ + --sl-text-heading-1: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-3xl) / + var(--sl-text-typeset-line-height-3xl) var(--sl-text-typeset-font-family-heading); /* text.typeset.heading.1 */ + --sl-text-heading-0: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-4xl) / + var(--sl-text-typeset-line-height-4xl) var(--sl-text-typeset-font-family-heading); /* text.typeset.heading.0 */ + --sl-text-avatar-subheader-3xl: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 18px + var(--sl-text-typeset-font-family-body); + --sl-text-avatar-subheader-2xl: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 18px + var(--sl-text-typeset-font-family-body); + --sl-text-avatar-subheader-xl: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 18px + var(--sl-text-typeset-font-family-body); + --sl-text-avatar-subheader-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 18px + var(--sl-text-typeset-font-family-body); + --sl-text-avatar-subheader-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-sm) / 18px + var(--sl-text-typeset-font-family-body); + --sl-text-avatar-subheader-sm: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-sm) / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); + --sl-text-avatar-header-3xl: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-avatar-header-2xl: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-avatar-header-xl: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-avatar-header-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 18px + var(--sl-text-typeset-font-family-body); + --sl-text-avatar-header-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 18px + var(--sl-text-typeset-font-family-body); + --sl-text-avatar-header-sm: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) / 18px + var(--sl-text-typeset-font-family-body); + --sl-text-avatar-initials-3xl: var(--sl-text-typeset-font-weight-bold) var(--sl-icon-typeset-font-size-2xl) / + var(--sl-text-typeset-line-height-2xl) var(--sl-text-typeset-font-family-body); + --sl-text-avatar-initials-2xl: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-2xl) / + var(--sl-text-typeset-line-height-2xl) var(--sl-text-typeset-font-family-body); + --sl-text-avatar-initials-xl: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-xl) / + var(--sl-text-typeset-line-height-xl) var(--sl-text-typeset-font-family-body); + --sl-text-avatar-initials-lg: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-avatar-initials-md: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-sm) / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); + --sl-text-avatar-initials-sm: var(--sl-text-typeset-font-weight-bold) var(--sl-text-typeset-font-size-xs) / + var(--sl-text-typeset-line-height-xs) var(--sl-text-typeset-font-family-body); + --sl-text-dialog-subheading: var(--sl-text-typeset-font-weight-demibold) var(--sl-icon-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-dialog-heading: var(--sl-text-typeset-font-weight-bold) var(--sl-icon-typeset-font-size-xl) / + var(--sl-text-typeset-line-height-2xl) var(--sl-text-typeset-font-family-heading); + --sl-text-dialog-message-mobile-subheading: var(--sl-text-typeset-font-weight-demibold) + var(--sl-icon-typeset-font-size-sm) / var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); + --sl-text-dialog-message-mobile-heading: var(--sl-text-typeset-font-weight-bold) var(--sl-icon-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-heading); + --sl-text-badge-text-lg: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-body); + --sl-text-badge-text-md: var(--sl-text-typeset-font-weight-demibold) var(--sl-text-typeset-font-size-sm) / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-body); + --sl-text-typeset-font-family-icon: var(--sl-icon-font-family-classic); /* text.typeset.fontFamily.fontIcon */ + --sl-space-accordion-gap: var(--sl-space-md); + --sl-space-accordion-block: var(--sl-space-lg); + --sl-space-accordion-inline: var(--sl-space-3xl); + --sl-space-accordion-title-gap: var(--sl-space-sm); + --sl-space-accordion-title-block: var(--sl-space-lg); + --sl-space-accordion-title-inline: var(--sl-space-sm); + --sl-space-accordion-content-block: var(--sl-space-lg); + --sl-space-accordion-content-inline: var(--sl-space-3xl); + --sl-space-tag-list-lg: calc(var(--sl-space-xs) + var(--sl-space-2xs)); + --sl-space-tag-list-md: var(--sl-space-xs); + --sl-space-tag-gap-lg: var(--sl-space-md); /* 8px */ + --sl-space-tag-gap-md: var(--sl-space-sm); /* 4px */ + --sl-space-tag-inline-lg: var(--sl-space-md); /* space.button.solid.inline.lg */ + --sl-space-tag-inline-md: var(--sl-space-sm); /* space.button.solid.inline.md */ + --sl-space-tag-block-lg: var(--sl-space-sm); /* space.button.solid.block.lg */ + --sl-space-tag-block-md: var(--sl-space-xs); /* space.button.solid.block.md */ + --sl-space-progressbar-horizontal-gap: var(--sl-space-lg); + --sl-space-progressbar-vertical-gap: var(--sl-space-sm); + --sl-space-form-gap: var(--sl-space-xl); + --sl-space-breadcrumb-gap-home: var(--sl-space-xs); + --sl-space-breadcrumb-gap-short: var(--sl-space-sm); + --sl-space-breadcrumb-gap-full: var(--sl-space-lg); + --sl-space-menu-item-gap: var(--sl-space-sm); + --sl-space-menu-item-inline: var(--sl-space-sm); + --sl-space-menu-item-block: var(--sl-space-sm); + --sl-space-menu-container-gap: var(--sl-space-xs); + --sl-space-menu-container-inline: var(--sl-space-sm); + --sl-space-menu-container-block: var(--sl-space-sm); + --sl-space-card-gap-header-block: var(--sl-space-none); + --sl-space-card-gap-header-inline: var(--sl-space-none); + --sl-space-card-gap-content-block: var(--sl-space-lg); + --sl-space-card-gap-content-inline: var(--sl-space-sm); + --sl-space-card-slotheader-badges-gap: var(--sl-space-sm); + --sl-space-card-slotheader-badges-block: var(--sl-space-xs); + --sl-space-card-slotheader-badges-inline: var(--sl-space-none); + --sl-space-card-horizontal-gap: var(--sl-space-none); + --sl-space-card-horizontal-block: var(--sl-space-xl); + --sl-space-card-horizontal-inline: var(--sl-space-none); + --sl-space-card-vertical-gap: var(--sl-space-none); + --sl-space-card-vertical-block: var(--sl-space-xl); + --sl-space-card-vertical-inline: var(--sl-space-none); + --sl-space-card-content-block: var(--sl-space-xl); + --sl-space-card-content-inline: var(--sl-space-xl); + --sl-space-card-media-margins: var(--sl-space-sm); + --sl-space-card-media-full: var(--sl-space-none); + --sl-space-tab-content-vertical-gap: var(--sl-space-xl); + --sl-space-tab-content-vertical-block: var(--sl-space-sm); + --sl-space-tab-content-vertical-inline: var(--sl-space-xl); + --sl-space-tab-content-horizontal-gap: var(--sl-space-xl); + --sl-space-tab-content-horizontal-block: var(--sl-space-xl); + --sl-space-tab-content-horizontal-inline: var(--sl-space-xl); + --sl-space-tab-more-block: var(--sl-space-sm); + --sl-space-tab-more-inline: var(--sl-space-md); + --sl-space-tab-gap: var(--sl-space-sm); + --sl-space-tab-block: var(--sl-space-md); + --sl-space-tab-inline: var(--sl-space-xl); + --sl-space-inline-message-content-gap: var(--sl-space-xs); + --sl-space-inline-message-gap: var(--sl-space-lg); + --sl-space-inline-message-inline-end: var(--sl-space-md); /* space.inline-message.inline.end */ + --sl-space-inline-message-inline-start: calc( + var(--sl-space-lg) + var(--sl-size-inline-message-start) + ); /* space.inline-message.inline.start */ + --sl-space-inline-message-block: var(--sl-space-md); /* space.inline-message.block.md */ + --sl-space-popover-arrow-offset: var(--sl-space-lg); + --sl-space-popover-links-block: var(--sl-space-xs); + --sl-space-popover-links-gap: var(--sl-space-sm); + --sl-space-popover-offset: var(--sl-space-xs); + --sl-space-popover-gap: var(--sl-space-xs); /* space.popover.gap */ + --sl-space-popover-inline: var(--sl-space-md); /* space.button.solid.inline.md */ + --sl-space-popover-block: var(--sl-space-sm); /* space.button.solid.block.md */ + --sl-space-avatar-badge-margin: var(--sl-space-2xs); + --sl-space-avatar-badge-inset-3xl: var(--sl-space-2xs); + --sl-space-avatar-badge-inset-2xl: calc(var(--sl-space-2xs) * -1); + --sl-space-avatar-badge-inset-xl: calc(var(--sl-space-2xs) * -1); + --sl-space-avatar-badge-inset-lg: calc(var(--sl-space-xs) * -1); + --sl-space-avatar-badge-inset-md: var(--sl-space-none); + --sl-space-avatar-badge-inset-sm: calc(var(--sl-space-2xs) * -1); + --sl-space-avatar-block-3xl: var(--sl-space-sm); + --sl-space-avatar-block-2xl: var(--sl-space-sm); + --sl-space-avatar-block-xl: var(--sl-space-sm); + --sl-space-avatar-block-lg: var(--sl-space-sm); + --sl-space-avatar-block-md: var(--sl-space-sm); + --sl-space-avatar-block-sm: var(--sl-space-sm); + --sl-space-avatar-inline-3xl: var(--sl-space-lg); + --sl-space-avatar-inline-2xl: var(--sl-space-lg); + --sl-space-avatar-inline-xl: var(--sl-space-lg); + --sl-space-avatar-inline-lg: var(--sl-space-lg); + --sl-space-avatar-inline-md: var(--sl-space-sm); + --sl-space-avatar-inline-sm: var(--sl-space-sm); + --sl-space-badge-label-inline-sm: var(--sl-space-2xs); + --sl-space-badge-label-inline-xs: var(--sl-space-2xs); + --sl-space-badge-label-inline-2xs: var(--sl-space-2xs); + --sl-space-badge-icon-block-xl: var(--sl-space-2xs); + --sl-space-badge-icon-block-md: var(--sl-space-none); + --sl-space-badge-icon-block-sm: var(--sl-space-none); + --sl-space-badge-icon-block-xs: var(--sl-space-none); + --sl-space-badge-icon-block-2xs: var(--sl-space-none); + --sl-space-badge-icon-inline-xl: var(--sl-space-2xs); + --sl-space-badge-icon-inline-md: var(--sl-space-none); + --sl-space-badge-icon-inline-sm: var(--sl-space-none); + --sl-space-badge-icon-inline-xs: var(--sl-space-none); + --sl-space-badge-icon-inline-2xs: var(--sl-space-none); + --sl-space-badge-gap-lg: var(--sl-space-xs); + --sl-space-badge-gap-md: var(--sl-space-xs); + --sl-space-badge-gap-sm: var(--sl-space-2xs); + --sl-space-badge-block-lg: var(--sl-space-2xs); + --sl-space-badge-block-md: var(--sl-space-2xs); + --sl-space-badge-block-sm: var(--sl-space-2xs); + --sl-space-badge-inline-lg: var(--sl-space-sm); + --sl-space-badge-inline-md: var(--sl-space-sm); + --sl-space-badge-inline-sm: var(--sl-space-2xs); + --sl-space-tooltip-arrow-offset: var(--sl-space-sm); + --sl-space-tooltip-offset: var(--sl-space-xs); + --sl-space-tooltip-gap: var(--sl-space-xs); + --sl-space-tooltip-inline: var(--sl-space-sm); /* space.button.solid.inline.md */ + --sl-space-tooltip-block: var(--sl-space-sm); /* space.button.solid.block.md */ + --sl-space-select-divider-line-md: var(--sl-space-sm); + --sl-space-select-divider-line-lg: var(--sl-space-sm); + --sl-space-select-divider-gap-md: var(--sl-space-sm); + --sl-space-select-divider-gap-lg: var(--sl-space-sm); + --sl-space-select-divider-inline-md: var(--sl-space-md); + --sl-space-select-divider-inline-lg: var(--sl-space-md); + --sl-space-select-divider-block-md: var(--sl-space-sm); + --sl-space-select-divider-block-lg: var(--sl-space-sm); + --sl-space-select-listbox-gap-md: var(--sl-space-xs); + --sl-space-select-listbox-gap-lg: var(--sl-space-xs); + --sl-space-select-listbox-inline-md: calc(var(--sl-space-sm) - var(--sl-border-width-xs)); + --sl-space-select-listbox-inline-lg: calc(var(--sl-space-sm) - var(--sl-border-width-xs)); + --sl-space-select-listbox-block-md: calc(var(--sl-space-sm) - var(--sl-border-width-xs)); + --sl-space-select-listbox-block-lg: calc(var(--sl-space-sm) - var(--sl-border-width-xs)); + --sl-space-group-xl: var(--sl-space-sm); + --sl-space-group-lg: var(--sl-space-sm); + --sl-space-group-md: var(--sl-space-xs); + --sl-space-group-sm: var(--sl-space-2xs); + --sl-space-button-bar-gap-ghost-icon-block: var(--sl-space-xs); + --sl-space-button-bar-gap-default-block: var(--sl-space-sm); + --sl-space-dialog-message-mobile-container-padding-right: var(--sl-space-xl); + --sl-space-dialog-message-mobile-container-padding-left: var(--sl-space-xl); + --sl-space-dialog-gap-header: var(--sl-space-none); /* space.button.solid.block.md */ + --sl-space-dialog-subtitle-padding-bottom: var(--sl-space-xs); /* space.button.solid.block.md */ + --sl-space-dialog-mobile-body-gap: var(--sl-space-lg); /* space.button.solid.block.md */ + --sl-space-dialog-mobile-body-inline: var(--sl-space-lg); /* space.button.solid.block.md */ + --sl-space-dialog-mobile-body-block: var(--sl-space-lg); /* space.button.solid.block.md */ + --sl-space-dialog-mobile-container-padding-bottom: var(--sl-space-none); /* space.button.solid.block.md */ + --sl-space-dialog-mobile-container-inline: var(--sl-space-none); /* space.button.solid.block.md */ + --sl-space-dialog-mobile-container-padding-top: calc(var(--sl-space-xl) * 2); /* space.button.solid.block.md */ + --sl-space-dialog-desktop-body-gap: var(--sl-space-xl); /* space.dialog.desktop.body.gap */ + --sl-space-dialog-desktop-body-inline: var(--sl-space-xl); /* space.dialog.desktop.body.inline */ + --sl-space-dialog-desktop-body-block: var(--sl-space-xl); /* space.dialog.desktop.body.block */ + --sl-space-dialog-desktop-container-padding-bottom: var( + --sl-space-xl + ); /* space.dialog.desktop.container.paddingBottom */ + --sl-space-dialog-desktop-container-inline: var(--sl-space-xl); /* space.dialog.desktop.container.inline */ + --sl-space-dialog-desktop-container-padding-top: var(--sl-space-xl); /* space.dialog.desktop.container.paddingTop */ + --sl-space-input-switch-margin-bottom-none: var(--sl-space-none); /* space.switch.padding.outer */ + --sl-space-input-switch-margin-bottom-lg: var(--sl-space-none); /* space.switch.padding.outer */ + --sl-space-input-switch-margin-bottom-md: var(--sl-space-xs); /* space.switch.padding.outer */ + --sl-space-input-switch-margin-bottom-sm: var(--sl-space-none); /* space.switch.padding.outer */ + --sl-space-input-switch-margin-left: var(--sl-space-sm); /* space.switch.padding.outer */ + --sl-space-input-switch-margin-top-none: var(--sl-space-none); /* space.switch.padding.outer */ + --sl-space-input-switch-margin-top-lg: var(--sl-space-sm); /* space.switch.padding.outer */ + --sl-space-input-switch-margin-top-md: var(--sl-space-sm); /* space.switch.padding.outer */ + --sl-space-input-switch-margin-top-sm: var(--sl-space-sm); /* space.switch.padding.outer */ + --sl-space-input-switch-gap: var(--sl-space-none); /* space.input.switch.padding.gap */ + --sl-space-input-switch-padding-row-none: var(--sl-space-none); /* space.switch.padding.outer */ + --sl-space-input-switch-padding-controller: var(--sl-space-2xs); /* space.switch.padding.outer */ + --sl-space-input-switch-padding-container: var(--sl-space-xs); /* space.switch.padding.outer */ + --sl-space-input-field-label-padding-bottom-none: var(--sl-space-none); /* 8px */ + --sl-space-input-field-label-padding-bottom-lg: var(--sl-space-sm); /* 4px */ + --sl-space-input-field-label-padding-bottom-md: var(--sl-space-sm); /* 4px */ + --sl-space-input-field-label-padding-bottom-sm: var(--sl-space-sm); /* 4px */ + --sl-space-input-field-label-icon-lg: var(--sl-space-xs); /* 4px */ + --sl-space-input-field-label-icon-md: var(--sl-space-2xs); /* 4px */ + --sl-space-input-field-label-gap-lg: var(--sl-space-sm); /* 8px */ + --sl-space-input-field-label-gap-md: var(--sl-space-xs); /* 4px */ + --sl-space-input-field-label-gap-sm: var(--sl-space-xs); /* 4px */ + --sl-space-input-helper-padding-top-none: var(--sl-space-none); /* 8px */ + --sl-space-input-helper-padding-top-lg: var(--sl-space-xs); /* 8px */ + --sl-space-input-helper-padding-top-md: var(--sl-space-xs); /* 4px */ + --sl-space-input-helper-padding-top-sm: var(--sl-space-xs); /* 4px */ + --sl-space-input-helper-gap-lg: var(--sl-space-xs); /* 8px */ + --sl-space-input-helper-gap-md: var(--sl-space-xs); /* 4px */ + --sl-space-input-helper-gap-sm: var(--sl-space-xs); /* 4px */ + --sl-space-input-text-field-gap-lg: var(--sl-space-sm); /* 8px */ + --sl-space-input-text-field-gap-md: var(--sl-space-sm); /* 4px */ + --sl-space-input-text-field-inline-lg: calc( + var(--sl-space-lg) - var(--sl-conceptual-border-width-default) + ); /* space.button.solid.inline.lg */ + --sl-space-input-text-field-inline-md: calc( + var(--sl-space-md) - var(--sl-conceptual-border-width-default) + ); /* space.button.solid.inline.md */ + --sl-space-input-text-field-block-lg: calc( + var(--sl-space-sm) - var(--sl-conceptual-border-width-default) + ); /* space.button.solid.block.lg */ + --sl-space-input-text-field-block-md: calc( + var(--sl-space-xs) + var(--sl-conceptual-border-width-default) + ); /* space.button.solid.block.md */ + --sl-space-input-option-gap-lg: var(--sl-space-sm); /* 8px */ + --sl-space-input-option-gap-md: var(--sl-space-sm); /* 4px */ + --sl-space-input-option-gap-sm: var(--sl-space-sm); /* 4px */ + --sl-space-input-option-inline-lg: var(--sl-space-none); /* space.button.solid.inline.lg */ + --sl-space-input-option-inline-md: var(--sl-space-none); /* space.button.solid.inline.md */ + --sl-space-input-option-inline-sm: var(--sl-space-none); /* space.button.solid.inline.md */ + --sl-space-input-option-block-lg: var(--sl-space-xs); /* space.button.solid.block.lg */ + --sl-space-input-option-block-md: var(--sl-space-xs); /* space.button.solid.block.md */ + --sl-space-input-option-block-sm: var(--sl-space-none); /* space.button.solid.block.md */ + --sl-space-button-link-icon-only-lg: calc(var(--sl-space-sm) - var(--sl-border-width-button-link)); + --sl-space-button-link-icon-only-md: calc(var(--sl-space-sm) - var(--sl-border-width-button-link)); + --sl-space-button-link-icon-only-sm: calc(var(--sl-space-xs) - var(--sl-border-width-button-link)); + --sl-space-button-link-inline-lg: var(--sl-space-none); /* space.button.solid.inline.lg */ + --sl-space-button-link-inline-md: var(--sl-space-none); /* space.button.solid.inline.md */ + --sl-space-button-link-inline-sm: var(--sl-space-none); /* space.button.solid.inline.sm */ + --sl-space-button-link-block-lg: calc( + var(--sl-space-sm) - var(--sl-border-width-button-link) + ); /* space.button.solid.block.lg */ + --sl-space-button-link-block-md: calc( + var(--sl-space-sm) - var(--sl-border-width-button-link) + ); /* space.button.solid.block.md */ + --sl-space-button-link-block-sm: calc( + var(--sl-space-xs) - var(--sl-border-width-button-link) + ); /* space.button.solid.block.sm */ + --sl-space-button-gap-lg: var(--sl-space-sm); /* 8px */ + --sl-space-button-gap-md: var(--sl-space-xs); /* 4px */ + --sl-space-button-gap-sm: var(--sl-space-xs); /* 4px */ + --sl-space-button-ghost-icon-only-lg: calc(var(--sl-space-sm) - var(--sl-border-width-button-ghost)); + --sl-space-button-ghost-icon-only-md: calc(var(--sl-space-sm) - var(--sl-border-width-button-ghost)); + --sl-space-button-ghost-icon-only-sm: calc(var(--sl-space-xs) - var(--sl-border-width-button-ghost)); + --sl-space-button-ghost-inline-lg: calc( + var(--sl-space-xl) - var(--sl-border-width-button-ghost) + ); /* space.button.solid.inline.lg */ + --sl-space-button-ghost-inline-md: calc( + var(--sl-space-xl) - var(--sl-border-width-button-ghost) + ); /* space.button.solid.inline.md */ + --sl-space-button-ghost-inline-sm: calc( + var(--sl-space-lg) - var(--sl-border-width-button-ghost) + ); /* space.button.solid.inline.sm */ + --sl-space-button-ghost-block-lg: calc( + var(--sl-space-sm) - var(--sl-border-width-button-ghost) + ); /* space.button.solid.block.lg */ + --sl-space-button-ghost-block-md: calc( + var(--sl-space-sm) - var(--sl-border-width-button-ghost) + ); /* space.button.solid.block.md */ + --sl-space-button-ghost-block-sm: calc( + var(--sl-space-xs) - var(--sl-border-width-button-ghost) + ); /* space.button.solid.block.sm */ + --sl-space-button-outline-icon-only-lg: calc(var(--sl-space-sm) - var(--sl-border-width-button-outline)); + --sl-space-button-outline-icon-only-md: calc(var(--sl-space-sm) - var(--sl-border-width-button-outline)); + --sl-space-button-outline-icon-only-sm: calc(var(--sl-space-xs) - var(--sl-border-width-button-outline)); + --sl-space-button-outline-inline-text-only-lg: var(--sl-space-2xl); + --sl-space-button-outline-inline-text-only-md: var(--sl-space-2xl); + --sl-space-button-outline-inline-lg: calc( + var(--sl-space-xl) - var(--sl-border-width-button-outline) + ); /* space.button.solid.inline.lg */ + --sl-space-button-outline-inline-md: calc( + var(--sl-space-xl) - var(--sl-border-width-button-outline) + ); /* space.button.solid.inline.md */ + --sl-space-button-outline-inline-sm: calc( + var(--sl-space-lg) - var(--sl-border-width-button-outline) + ); /* space.button.solid.inline.sm */ + --sl-space-button-outline-block-lg: calc( + var(--sl-space-sm) - var(--sl-border-width-button-outline) + ); /* space.button.solid.block.lg */ + --sl-space-button-outline-block-md: calc( + var(--sl-space-sm) - var(--sl-border-width-button-outline) + ); /* space.button.solid.block.md */ + --sl-space-button-outline-block-sm: calc( + var(--sl-space-xs) - var(--sl-border-width-button-outline) + ); /* space.button.solid.block.sm */ + --sl-space-button-solid-icon-only-lg: calc(var(--sl-space-sm) - var(--sl-border-width-button-solid)); + --sl-space-button-solid-icon-only-md: calc(var(--sl-space-sm) - var(--sl-border-width-button-solid)); + --sl-space-button-solid-icon-only-sm: calc(var(--sl-space-xs) - var(--sl-border-width-button-solid)); + --sl-space-button-solid-inline-lg: calc( + var(--sl-space-xl) - var(--sl-border-width-button-solid) + ); /* space.button.solid.inline.lg */ + --sl-space-button-solid-inline-md: calc( + var(--sl-space-xl) - var(--sl-border-width-button-solid) + ); /* space.button.solid.inline.md */ + --sl-space-button-solid-inline-sm: calc( + var(--sl-space-lg) - var(--sl-border-width-button-solid) + ); /* space.button.solid.inline.sm */ + --sl-space-button-solid-block-lg: calc( + var(--sl-space-sm) - var(--sl-border-width-button-solid) + ); /* space.button.solid.block.lg */ + --sl-space-button-solid-block-md: calc( + var(--sl-space-sm) - var(--sl-border-width-button-solid) + ); /* space.button.solid.block.md */ + --sl-space-button-solid-block-sm: calc( + var(--sl-space-xs) - var(--sl-border-width-button-solid) + ); /* space.button.solid.block.sm */ + --sl-size-inline-message-start: var(--sl-size-3xs); + --sl-size-select-indicator: var(--sl-size-3xs); + --sl-size-tag-lg: var(--sl-size-2xl); + --sl-size-tag-md: var(--sl-size-xl); + --sl-size-progressbar: var(--sl-size-3xs); + --sl-size-tab-indicator: var(--sl-size-4xs); + --sl-size-breadcrumb: var(--sl-size-2xl); + --sl-size-spinner-4xl: var(--sl-size-4xl); + --sl-size-spinner-3xl: var(--sl-size-3xl); + --sl-size-spinner-2xl: var(--sl-size-2xl); + --sl-size-spinner-xl: var(--sl-size-xl); + --sl-size-spinner-lg: var(--sl-size-lg); + --sl-size-spinner-md: var(--sl-size-md); + --sl-size-spinner-sm: var(--sl-size-sm); + --sl-size-spinner-xs: var(--sl-size-xs); + --sl-size-skeleton-min-height: var(--sl-size-2xs); + --sl-size-avatar-badge-lg: var(--sl-size-lg); + --sl-size-avatar-badge-md: var(--sl-size-md); + --sl-size-avatar-badge-sm: var(--sl-size-2xs); + --sl-size-avatar-2xl: var(--sl-size-4xl); + --sl-size-avatar-md: var(--sl-size-2xl); + --sl-size-avatar-sm: var(--sl-size-xl); + --sl-size-badge-lg: var(--sl-size-lg); + --sl-size-badge-md: var(--sl-size-md); + --sl-size-badge-sm: var(--sl-size-2xs); + --sl-size-button-icon-container-inline-lg: var(--sl-size-md); + --sl-size-button-icon-container-inline-md: var(--sl-size-sm); + --sl-size-button-icon-container-inline-sm: var(--sl-size-xs); + --sl-size-button-icon-container-icon-only-lg: var(--sl-size-xl); + --sl-size-button-icon-container-icon-only-md: var(--sl-size-md); + --sl-size-button-icon-container-icon-only-sm: var(--sl-size-md); + --sl-size-icon-4xl: var(--sl-size-4xl); + --sl-size-icon-3xl: var(--sl-size-3xl); + --sl-size-icon-2xl: var(--sl-size-2xl); + --sl-size-icon-xl: var(--sl-size-xl); + --sl-size-icon-lg: var(--sl-size-lg); + --sl-size-icon-md: var(--sl-size-md); + --sl-size-icon-sm: var(--sl-size-sm); + --sl-size-icon-xs: var(--sl-size-xs); + --sl-size-input-switch-controller-width-lg: var(--sl-size-4xl); /* size.switch.controller.lg */ + --sl-size-input-switch-controller-width-md: var(--sl-size-3xl); /* size.switch.controller.md */ + --sl-size-input-switch-controller-width-sm: var(--sl-size-2xl); /* size.switch.controller.sm */ + --sl-size-input-switch-controller-height-lg: var(--sl-size-2xl); /* size.switch.controller.lg */ + --sl-size-input-switch-controller-height-md: var(--sl-size-xl); /* size.switch.controller.md */ + --sl-size-input-switch-controller-height-sm: var(--sl-size-md); /* size.switch.controller.sm */ + --sl-size-input-switch-handle-lg: calc( + var(--sl-size-2xl) - (2 * var(--sl-space-input-switch-padding-controller)) + ); /* size.input.md */ + --sl-size-input-switch-handle-md: calc( + var(--sl-size-xl) - (2 * var(--sl-space-input-switch-padding-controller)) + ); /* size.input.md */ + --sl-size-input-switch-handle-sm: calc( + var(--sl-size-md) - (2 * var(--sl-space-input-switch-padding-controller)) + ); /* size.input.md */ + --sl-size-input-option-lg: var(--sl-size-2xl); /* size.input.lg */ + --sl-size-input-option-md: var(--sl-size-xl); /* size.input.md */ + --sl-size-input-option-sm: var(--sl-size-lg); + --sl-opacity-spinner-shadow: var(--sl-opacity-600); + --sl-border-width-slds-checklist: var(--sl-border-width-xs); + --sl-border-width-card-border: var(--sl-border-width-xs); + --sl-border-width-border-tabbar: var(--sl-border-width-xs); + --sl-border-width-border-tab: var(--sl-border-width-xs); + --sl-border-width-inline-message-start: var(--sl-border-width-lg); + --sl-border-width-popover-border: var(--sl-border-width-xs); /* border.width.button.outline */ + --sl-border-width-popover-none: var(--sl-border-width-none); /* border.width.button.default */ + --sl-border-width-tooltip-border: var(--sl-border-width-xs); /* border.width.button.outline */ + --sl-border-width-tooltip-none: var(--sl-border-width-none); /* border.width.button.default */ + --sl-border-width-divider: var(--sl-border-width-xs); + --sl-border-width-dialog-default: var(--sl-border-width-none); + --sl-border-width-focusring-offset: var(--sl-border-width-sm); + --sl-border-width-focusring-inside: var(--sl-border-width-xs); + --sl-border-width-focusring-default: var(--sl-border-width-sm); + --sl-border-width-input-option: var(--sl-border-width-xs); /* border.width.button.outline */ + --sl-border-width-input-none: var(--sl-border-width-none); /* border.width.button.default */ + --sl-border-radius-card-image-margin: var(--sl-border-radius-default); + --sl-border-radius-card-default: var(--sl-border-radius-default); + --sl-border-radius-skeleton-default: var(--sl-border-radius-default); + --sl-border-radius-inline-message-default: var(--sl-border-radius-default); /* borderRadius.button */ + --sl-border-radius-avatar-square: var(--sl-border-radius-default); + --sl-border-radius-dialog-desktop: var(--sl-border-radius-default); + --sl-border-radius-popover-default: var(--sl-border-radius-default); /* borderRadius.button */ + --sl-border-radius-focusring-checkbox: calc(var(--sl-border-radius-checkbox) - 1px); + --sl-border-radius-focusring-inside: calc(var(--sl-border-radius-default) - 1); + --sl-border-radius-focusring-default: calc(var(--sl-border-radius-default) - 1px); + --sl-text-tag-close-lg: var(--sl-text-typeset-font-weight-icon-solid) var(--sl-text-typeset-font-size-md) / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-icon); + --sl-text-tag-close-md: var(--sl-text-typeset-font-weight-icon-solid) var(--sl-text-typeset-font-size-sm) / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-icon); + --sl-text-card-body: var(--sl-text-body-md-normal); + --sl-text-card-subtitle: var(--sl-text-body-lg-normal); + --sl-text-card-title: var(--sl-text-heading-3); + --sl-text-icon-font-icon-lg: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-lg) + var(--sl-text-typeset-font-family-icon); + --sl-text-icon-font-icon-md: var(--sl-text-typeset-font-weight-regular) var(--sl-text-typeset-font-size-md) + var(--sl-text-typeset-font-family-icon); + --sl-text-icon-font-icon-sm: var(--sl-text-typeset-font-weight-regular) var(--sl-icon-typeset-font-size-xs) + var(--sl-text-typeset-font-family-icon); + --sl-text-input-helper-font-icon-lg: var(--sl-text-typeset-font-weight-icon-solid) 15px / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-icon); + --sl-text-input-helper-font-icon-md: var(--sl-text-typeset-font-weight-icon-solid) 15px / + var(--sl-text-typeset-line-height-sm) var(--sl-text-typeset-font-family-icon); + --sl-text-input-text-field-font-icon-lg: var(--sl-text-typeset-font-weight-icon-solid) 18px / + var(--sl-text-typeset-line-height-md) var(--sl-text-typeset-font-family-icon); + --sl-text-avatar-icon-3xl: var(--sl-icon-style-outline) var(--sl-icon-typeset-font-size-2xl) + var(--sl-text-typeset-font-family-icon); + --sl-text-avatar-icon-2xl: var(--sl-icon-style-outline) var(--sl-icon-typeset-font-size-2xl) + var(--sl-text-typeset-font-family-icon); + --sl-text-avatar-icon-xl: var(--sl-icon-style-outline) var(--sl-text-typeset-font-size-2xl) + var(--sl-text-typeset-font-family-icon); + --sl-text-avatar-icon-lg: var(--sl-icon-style-outline) var(--sl-text-typeset-font-size-xl) + var(--sl-text-typeset-font-family-icon); + --sl-text-avatar-icon-md: var(--sl-icon-style-outline) var(--sl-text-typeset-font-size-lg) + var(--sl-text-typeset-font-family-icon); + --sl-text-avatar-icon-sm: var(--sl-icon-style-outline) var(--sl-text-typeset-font-size-md) + var(--sl-text-typeset-font-family-icon); + --sl-space-focus-gap: var(--sl-border-width-focusring-default) + var(--sl-border-width-focusring-offset); + --sl-space-tag-counter-gap: calc(-1 * var(--sl-border-radius-default) / 2); + --sl-space-select-item-gap-lg: var(--sl-space-input-text-field-gap-lg); /* 8px */ + --sl-space-select-item-gap-md: var(--sl-space-input-text-field-gap-md); /* 4px */ + --sl-space-select-item-inline-lg: var(--sl-space-input-text-field-inline-lg); /* space.button.solid.inline.lg */ + --sl-space-select-item-inline-md: var(--sl-space-input-text-field-inline-md); /* space.button.solid.inline.md */ + --sl-space-select-item-block-lg: var(--sl-space-input-text-field-block-lg); /* space.button.solid.block.lg */ + --sl-space-select-item-block-md: var(--sl-space-input-text-field-block-md); /* space.button.solid.block.md */ + --sl-space-select-selectbox-gap-lg: var(--sl-space-input-text-field-gap-lg); /* 8px */ + --sl-space-select-selectbox-gap-md: var(--sl-space-input-text-field-gap-md); /* 4px */ + --sl-space-select-selectbox-inline-lg: var(--sl-space-input-text-field-inline-lg); /* space.button.solid.inline.lg */ + --sl-space-select-selectbox-inline-md: var(--sl-space-input-text-field-inline-md); /* space.button.solid.inline.md */ + --sl-space-select-selectbox-block-lg: var(--sl-space-input-text-field-block-lg); /* space.button.solid.block.lg */ + --sl-space-select-selectbox-block-md: var(--sl-space-input-text-field-block-md); /* space.button.solid.block.md */ + --sl-space-button-bar-gap-ghost-icon-inline: var(--sl-space-button-bar-gap-ghost-icon-block); + --sl-space-button-bar-gap-default-inline: var(--sl-space-button-bar-gap-default-block); + --sl-space-input-switch-padding-row-lg: calc( + var(--sl-space-input-switch-margin-left) + var(--sl-size-input-switch-controller-width-lg) + + (var(--sl-space-input-switch-padding-container) * 2) + ); /* space.switch.padding.outer */ + --sl-space-input-switch-padding-row-md: calc( + var(--sl-space-input-switch-margin-left) + var(--sl-size-input-switch-controller-width-md) + + (var(--sl-space-input-switch-padding-container) * 2) + ); /* space.switch.padding.outer */ + --sl-space-input-switch-padding-row-sm: calc( + var(--sl-space-input-switch-margin-left) + var(--sl-size-input-switch-controller-width-sm) + + (var(--sl-space-input-switch-padding-container) * 2) + ); /* space.switch.padding.outer */ + --sl-size-tag-counter: calc(var(--sl-border-radius-default) + var(--sl-border-radius-default)); + --sl-size-input-option-checkbox-icon-lg: var(--sl-size-icon-lg); /* size.input.lg */ + --sl-size-input-option-checkbox-icon-md: var(--sl-size-icon-md); /* size.input.md */ + --sl-size-input-option-checkbox-icon-sm: var(--sl-size-icon-xs); + --sl-border-width-inline-message-default: var(--sl-conceptual-border-width-default); + --sl-border-width-input-border: var(--sl-conceptual-border-width-default); /* border.width.button.outline */ + --sl-border-width-select-listbox: var(--sl-conceptual-border-width-default); /* border.width.button.default */ + --sl-border-width-button-link: var(--sl-conceptual-border-width-default); /* border.width.button.link */ + --sl-border-width-button-ghost: var(--sl-conceptual-border-width-default); /* border.width.button.ghost */ + --sl-border-width-button-outline: var(--sl-conceptual-border-width-default); /* border.width.button.outline */ + --sl-border-width-button-solid: var(--sl-conceptual-border-width-default); /* border.width.button.solid */ + } + @media (prefers-color-scheme: light) { + :host { + --sl-color-field-button-default-active-background: rgba( + 34, + 34, + 34, + 0.13 + ); /* color.button.default.active.background */ + --sl-color-field-button-default-hover-background: rgba( + 34, + 34, + 34, + 0.07 + ); /* color.button.default.hover.background */ + --sl-body-surface-overlay: color-mix( + in srgb, + var(--sl-color-palette-primary-base) calc(var(--sl-opacity-700) * 100%), + transparent + ); /* body.surface.200 */ + --sl-body-surface-200: var(--sl-color-palette-neutral-150); /* body.surface.100 */ + --sl-body-surface-100: var(--sl-color-palette-neutral-100); /* body.surface.100 */ + --sl-body-foreground: var(--sl-color-palette-primary-base); /* color.body.foreground */ + --sl-body-background: var(--sl-color-palette-white-base); /* color.body.background */ + --sl-color-tag-bold-close-active-background: var(--sl-color-palette-accent-600); + --sl-color-tag-bold-disabled-border: var(--sl-color-palette-neutral-400); + --sl-color-tag-bold-disabled-foreground: var(--sl-color-palette-neutral-100); + --sl-color-tag-bold-disabled-background: var(--sl-color-palette-neutral-300); + --sl-color-tag-bold-active-border: var(--sl-color-palette-info-150); + --sl-color-tag-bold-active-foreground: var(--sl-color-palette-info-500); + --sl-color-tag-bold-active-background: var(--sl-color-palette-info-100); + --sl-color-tag-bold-hover-border: var(--sl-color-palette-info-600); + --sl-color-tag-bold-hover-foreground: var(--sl-color-palette-white-base); + --sl-color-tag-bold-hover-background: var(--sl-color-palette-info-500); + --sl-color-tag-bold-idle-border: var(--sl-color-palette-info-500); + --sl-color-tag-bold-idle-foreground: var(--sl-color-palette-white-base); + --sl-color-tag-subtle-close-active-foreground: var(--sl-color-palette-accent-500); + --sl-color-tag-subtle-close-active-background: var(--sl-color-palette-accent-200); + --sl-color-tag-subtle-disabled-border: var(--sl-color-palette-neutral-150); + --sl-color-tag-subtle-disabled-foreground: var(--sl-color-palette-neutral-300); + --sl-color-tag-subtle-disabled-background: var(--sl-color-palette-neutral-100); + --sl-color-tag-subtle-active-border: var(--sl-color-palette-info-500); + --sl-color-tag-subtle-active-foreground: var(--sl-color-palette-white-base); + --sl-color-tag-subtle-hover-border: var(--sl-color-palette-info-200); + --sl-color-tag-subtle-hover-foreground: var(--sl-color-palette-accent-500); + --sl-color-tag-subtle-hover-background: var(--sl-color-palette-info-150); + --sl-color-tag-subtle-idle-border: var(--sl-color-palette-info-150); + --sl-color-tag-subtle-idle-foreground: var(--sl-color-palette-accent-500); + --sl-color-tag-subtle-idle-background: var(--sl-color-palette-info-100); + --sl-color-progressbar-background: var(--sl-color-palette-neutral-150); + --sl-color-progressbar-warning-track: var(--sl-color-palette-warning-500); + --sl-color-progressbar-indeterminate-track: var(--sl-color-palette-accent-base); + --sl-color-progressbar-error-track: var(--sl-color-palette-danger-500); + --sl-color-progressbar-success-track: var(--sl-color-palette-success-500); + --sl-color-progressbar-active-track: var(--sl-color-palette-accent-base); + --sl-color-field-button-default-disabled-foreground: var( + --sl-color-palette-neutral-100 + ); /* color.button.default.disabled.foreground */ + --sl-color-field-button-default-disabled-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.disabled.background */ + --sl-color-field-button-default-active-foreground: var( + --sl-color-palette-primary-base + ); /* color.button.default.active.foreground */ + --sl-color-field-button-default-hover-foreground: var( + --sl-color-palette-primary-base + ); /* color.button.default.hover.foreground */ + --sl-color-field-button-default-idle-foreground: var(--sl-color-palette-neutral-400); + --sl-color-field-button-default-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.idle.background */ + --sl-color-slds-checklist-link-active: var(--sl-color-palette-info-600); + --sl-color-slds-checklist-link-hover: var(--sl-color-palette-info-500); + --sl-color-slds-checklist-icon-danger: var(--sl-color-palette-danger-400); + --sl-color-slds-checklist-icon-success: var(--sl-color-palette-success-500); + --sl-color-slds-checklist-divider: var(--sl-color-palette-neutral-200); + --sl-color-slds-checklist-border: var(--sl-color-palette-neutral-200); + --sl-color-accordion-active-icon: var(--sl-color-palette-accent-800); + --sl-color-accordion-active-foreground: var(--sl-color-palette-accent-800); + --sl-color-accordion-active-header: var(--sl-color-palette-accent-150); + --sl-color-accordion-disabled-icon: var(--sl-color-palette-neutral-200); + --sl-color-accordion-disabled-foreground: var(--sl-color-palette-neutral-400); + --sl-color-accordion-disabled-header: var(--sl-color-palette-neutral-100); + --sl-color-accordion-disabled-background: var(--sl-color-palette-neutral-100); + --sl-color-accordion-hover-icon: var(--sl-color-palette-accent-500); + --sl-color-accordion-hover-foreground: var(--sl-color-palette-accent-500); + --sl-color-accordion-hover-header: var(--sl-color-palette-accent-50); + --sl-color-accordion-default-border: var(--sl-color-palette-neutral-200); + --sl-color-breadcrumb-divider: var( + --sl-color-palette-neutral-200 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-href-disabled-foreground: var( + --sl-color-palette-neutral-200 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-href-active-foreground: var( + --sl-color-palette-accent-900 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-href-hover-foreground: var( + --sl-color-palette-accent-base + ); /* color.button.default.outline.hover.foreground */ + --sl-color-href-idle-foreground: var( + --sl-color-palette-neutral-500 + ); /* color.button.default.outline.idle.foreground */ + --sl-color-card-border: var(--sl-color-palette-neutral-200); + --sl-color-spinner-danger: var(--sl-color-palette-danger-base); + --sl-color-spinner-warning: var(--sl-color-palette-warning-base); + --sl-color-spinner-success: var(--sl-color-palette-success-base); + --sl-color-spinner-info: var(--sl-color-palette-info-base); + --sl-color-spinner-accent: var(--sl-color-palette-accent-base); + --sl-color-spinner-white: var(--sl-color-palette-white-base); + --sl-color-spinner-default: var(--sl-color-palette-primary-500); + --sl-color-skeleton-pulse: var(--sl-color-palette-neutral-100); /* body.surface.100 */ + --sl-color-skeleton-effect: var(--sl-color-palette-neutral-150); /* body.surface.100 */ + --sl-color-skeleton-base: var(--sl-color-palette-neutral-100); /* body.surface.100 */ + --sl-color-tab-active-border: var(--sl-color-palette-neutral-200); + --sl-color-tab-active-background: var(--sl-color-palette-accent-150); + --sl-color-tab-tabbar-border: var(--sl-color-palette-neutral-200); + --sl-color-tab-disabled-border: var(--sl-color-palette-neutral-200); + --sl-color-tab-disabled-foreground: var(--sl-color-palette-neutral-200); + --sl-color-tab-hover-border: var(--sl-color-palette-neutral-200); + --sl-color-tab-hover-background: var(--sl-color-palette-accent-100); + --sl-color-tab-indicator: var(--sl-color-palette-accent-base); + --sl-color-tab-default-border: var(--sl-color-palette-neutral-200); + --sl-color-inline-message-danger-icon: var(--sl-color-palette-danger-600); + --sl-color-inline-message-danger-border: var(--sl-color-palette-danger-600); + --sl-color-inline-message-danger-foreground: var(--sl-color-palette-danger-600); + --sl-color-inline-message-danger-background: var(--sl-color-palette-danger-50); + --sl-color-inline-message-warning-icon: var(--sl-color-palette-warning-700); + --sl-color-inline-message-warning-border: var(--sl-color-palette-warning-700); + --sl-color-inline-message-warning-foreground: var(--sl-color-palette-warning-700); + --sl-color-inline-message-warning-background: var(--sl-color-palette-warning-100); + --sl-color-inline-message-success-icon: var(--sl-color-palette-success-700); + --sl-color-inline-message-success-border: var(--sl-color-palette-success-700); + --sl-color-inline-message-success-foreground: var(--sl-color-palette-success-700); + --sl-color-inline-message-success-background: var(--sl-color-palette-success-50); + --sl-color-inline-message-info-icon: var(--sl-color-palette-info-600); + --sl-color-inline-message-info-border: var(--sl-color-palette-info-600); + --sl-color-inline-message-info-foreground: var(--sl-color-palette-info-600); + --sl-color-inline-message-info-background: var(--sl-color-palette-info-50); + --sl-color-popover-border: var(--sl-color-palette-neutral-200); + --sl-color-popover-background: var(--sl-color-palette-white-base); + --sl-color-focusring-inversed-copy: var(--sl-color-palette-white-base); + --sl-color-focusring-inversed: var(--sl-color-palette-white-base); + --sl-color-focusring-default: var(--sl-color-palette-accent-base); + --sl-color-tooltip-border: var(--sl-color-palette-transparent-base); + --sl-color-tooltip-foreground: var(--sl-color-palette-white-base); + --sl-color-tooltip-background: var(--sl-color-palette-black-base); + --sl-color-select-listbox-background: var(--sl-color-palette-white-base); + --sl-color-select-selectbox-default-focus-border: var(--sl-color-palette-primary-base); + --sl-color-select-selectbox-default-active-border: var(--sl-color-palette-primary-base); + --sl-color-select-item-group-title-foreground: var(--sl-color-palette-neutral-200); + --sl-color-select-item-divider-line: var(--sl-color-palette-neutral-200); + --sl-color-select-item-disabled-indicator: var(--sl-color-palette-neutral-200); + --sl-color-select-item-disabled-border: var(--sl-color-palette-neutral-100); + --sl-color-select-item-disabled-foreground: var(--sl-color-palette-neutral-400); + --sl-color-select-item-disabled-background: var(--sl-color-palette-neutral-100); + --sl-color-select-item-focus-indicator: var(--sl-color-palette-accent-base); + --sl-color-select-item-focus-foreground: var(--sl-color-palette-neutral-600); + --sl-color-select-item-active-indicator: var(--sl-color-palette-accent-base); + --sl-color-select-item-active-foreground: var(--sl-color-palette-neutral-600); + --sl-color-select-item-active-background: var(--sl-color-palette-accent-150); + --sl-color-select-item-hover-indicator: var(--sl-color-palette-accent-base); + --sl-color-select-item-hover-foreground: var(--sl-color-palette-neutral-600); + --sl-color-select-item-hover-background: var(--sl-color-palette-accent-100); + --sl-color-select-item-default-indicator: var(--sl-color-palette-accent-base); + --sl-color-select-item-default-foreground: var(--sl-color-palette-neutral-600); + --sl-color-input-field-label-icon-disabled: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-text-invalid: var( + --sl-color-palette-danger-500 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-text-disabled: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-icon-disabled: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-icon-default: var( + --sl-color-palette-neutral-600 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-text-invalid: var( + --sl-color-palette-danger-500 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-text-disabled: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-text-default: var( + --sl-color-palette-neutral-600 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-active-background: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-hover-background: var( + --sl-color-palette-success-50 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-default-icon: var( + --sl-color-palette-success-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-background: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-placeholder: var( + --sl-color-palette-neutral-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-border: var( + --sl-color-palette-danger-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-background: var( + --sl-color-palette-danger-50 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-icon: var( + --sl-color-palette-danger-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-border: var( + --sl-color-palette-danger-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-background: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-disabled-placeholder: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-disabled-input-text: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-disabled-icon: var( + --sl-color-palette-neutral-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-disabled-label: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-disabled-border: var( + --sl-color-palette-neutral-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-disabled-background: var( + --sl-color-palette-neutral-100 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-active-border: var( + --sl-color-palette-accent-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-active-background: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-hover-icon: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-hover-background: var( + --sl-color-palette-accent-50 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-default-placeholder: var( + --sl-color-palette-neutral-500 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-default-icon: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-default-border: var( + --sl-color-palette-neutral-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-default-background: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-focus-handle: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-active-handle: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-active-background: var( + --sl-color-palette-success-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-hover-handle: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-hover-background: var( + --sl-color-palette-success-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-default-handle: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-default-background: var( + --sl-color-palette-success-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-disabled-handle: var( + --sl-color-palette-neutral-100 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-disabled-icon: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-disabled-text: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-disabled-background: var( + --sl-color-palette-neutral-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-active-handle: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-active-background: var( + --sl-color-palette-neutral-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-hover-handle: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-hover-background: var( + --sl-color-palette-neutral-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-default-handle: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-default-background: var( + --sl-color-palette-neutral-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-focus-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-active-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-active-background: var( + --sl-color-palette-success-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-hover-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-hover-background: var( + --sl-color-palette-success-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-default-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-default-background: var( + --sl-color-palette-success-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-focus-icon: var( + --sl-color-palette-success-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-focus-border: var( + --sl-color-palette-success-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-active-icon: var( + --sl-color-palette-success-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-active-border: var( + --sl-color-palette-success-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-active-background: var( + --sl-color-palette-success-100 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-hover-icon: var( + --sl-color-palette-success-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-hover-border: var( + --sl-color-palette-success-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-hover-background: var( + --sl-color-palette-success-50 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-default-icon: var( + --sl-color-palette-success-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-default-border: var( + --sl-color-palette-success-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-default-background: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-focus-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-active-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-active-background: var( + --sl-color-palette-danger-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-hover-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-hover-background: var( + --sl-color-palette-danger-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-default-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-default-background: var( + --sl-color-palette-danger-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-active-icon: var( + --sl-color-palette-danger-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-active-border: var( + --sl-color-palette-danger-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-active-background: var( + --sl-color-palette-danger-100 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-hover-icon: var( + --sl-color-palette-danger-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-hover-border: var( + --sl-color-palette-danger-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-hover-background: var( + --sl-color-palette-danger-50 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-default-icon: var( + --sl-color-palette-danger-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-default-border: var( + --sl-color-palette-danger-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-default-background: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-disabled-icon: var( + --sl-color-palette-neutral-100 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-disabled-label: var( + --sl-color-palette-neutral-500 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-disabled-background: var( + --sl-color-palette-neutral-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-focus-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-focus-background: var( + --sl-color-palette-accent-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-active-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-active-background: var( + --sl-color-palette-accent-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-hover-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-hover-background: var( + --sl-color-palette-accent-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-default-icon: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-default-background: var( + --sl-color-palette-accent-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-disabled-icon: var( + --sl-color-palette-neutral-100 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-disabled-label: var( + --sl-color-palette-neutral-500 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-unchecked-disabled-border: var( + --sl-color-palette-neutral-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-disabled-background: var( + --sl-color-palette-neutral-100 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-active-icon: var( + --sl-color-palette-accent-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-active-border: var( + --sl-color-palette-accent-600 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-active-background: var( + --sl-color-palette-accent-100 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-hover-icon: var( + --sl-color-palette-accent-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-hover-border: var( + --sl-color-palette-accent-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-hover-background: var( + --sl-color-palette-accent-50 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-default-icon: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-default-border: var( + --sl-color-palette-neutral-500 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-default-background: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-surface-solid-accent-foreground: var( + --sl-color-palette-accent-50 + ); /* color.surface.solid.accent.foreground */ + --sl-color-surface-solid-accent-background: var( + --sl-color-palette-accent-base + ); /* color.surface.solid.accent.backgorund */ + --sl-color-surface-solid-secondary-foreground: var( + --sl-color-palette-white-base + ); /* color.surface.solid.secondary.foreground */ + --sl-color-surface-solid-secondary-background: var( + --sl-color-palette-neutral-200 + ); /* color.surface.solid.secondary.background */ + --sl-color-surface-solid-primary-foreground: var( + --sl-color-palette-black-base + ); /* color.surface.solid.primary.foreground */ + --sl-color-surface-solid-primary-background: var( + --sl-color-palette-white-base + ); /* color.surface.solid.primary.background */ + --sl-color-button-info-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.active.border */ + --sl-color-button-info-link-active-foreground: var( + --sl-color-palette-info-800 + ); /* color.button.info.outline.active.foreground */ + --sl-color-button-info-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.active.background */ + --sl-color-button-info-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.hover.border */ + --sl-color-button-info-link-hover-foreground: var( + --sl-color-palette-info-700 + ); /* color.button.info.outline.hover.foreground */ + --sl-color-button-info-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.hover.background */ + --sl-color-button-info-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.idle.border */ + --sl-color-button-info-link-idle-foreground: var( + --sl-color-palette-info-600 + ); /* color.button.info.outline.idle.foreground */ + --sl-color-button-info-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.idle.background */ + --sl-color-button-info-ghost-active-border: var( + --sl-color-palette-info-700 + ); /* color.button.info.outline.active.border */ + --sl-color-button-info-ghost-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.info.outline.active.foreground */ + --sl-color-button-info-ghost-active-background: var( + --sl-color-palette-info-700 + ); /* color.button.info.outline.active.background */ + --sl-color-button-info-ghost-hover-border: var( + --sl-color-palette-info-600 + ); /* color.button.info.outline.hover.border */ + --sl-color-button-info-ghost-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.info.outline.hover.foreground */ + --sl-color-button-info-ghost-hover-background: var( + --sl-color-palette-info-600 + ); /* color.button.info.outline.hover.background */ + --sl-color-button-info-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.idle.border */ + --sl-color-button-info-ghost-idle-foreground: var( + --sl-color-palette-info-600 + ); /* color.button.info.outline.idle.foreground */ + --sl-color-button-info-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.idle.background */ + --sl-color-button-info-outline-active-border: var( + --sl-color-palette-info-700 + ); /* color.button.info.outline.active.border */ + --sl-color-button-info-outline-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.info.outline.active.foreground */ + --sl-color-button-info-outline-active-background: var( + --sl-color-palette-info-700 + ); /* color.button.info.outline.active.background */ + --sl-color-button-info-outline-hover-border: var( + --sl-color-palette-info-600 + ); /* color.button.info.outline.hover.border */ + --sl-color-button-info-outline-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.info.outline.hover.foreground */ + --sl-color-button-info-outline-hover-background: var( + --sl-color-palette-info-600 + ); /* color.button.info.outline.hover.background */ + --sl-color-button-info-outline-idle-border: var( + --sl-color-palette-info-600 + ); /* color.button.info.outline.idle.border */ + --sl-color-button-info-outline-idle-foreground: var( + --sl-color-palette-info-600 + ); /* color.button.info.outline.idle.foreground */ + --sl-color-button-info-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.idle.background */ + --sl-color-button-info-solid-active-border: var( + --sl-color-palette-info-700 + ); /* color.button.info.solid.active.border */ + --sl-color-button-info-solid-active-foreground: var( + --sl-color-palette-info-700 + ); /* color.button.info.solid.active.foreground */ + --sl-color-button-info-solid-active-background: var( + --sl-color-palette-info-50 + ); /* color.button.info.solid.active.background */ + --sl-color-button-info-solid-hover-border: var( + --sl-color-palette-info-600 + ); /* color.button.info.solid.hover.border */ + --sl-color-button-info-solid-hover-foreground: var( + --sl-color-palette-info-600 + ); /* color.button.info.solid.hover.foreground */ + --sl-color-button-info-solid-hover-background: var( + --sl-color-palette-white-base + ); /* color.button.info.solid.hover.background */ + --sl-color-button-info-solid-idle-border: var( + --sl-color-palette-info-600 + ); /* color.button.info.warning.idle.border */ + --sl-color-button-info-solid-idle-foreground: var( + --sl-color-palette-white-base + ); /* color.button.info.solid.idle.foreground */ + --sl-color-button-info-solid-idle-background: var( + --sl-color-palette-info-600 + ); /* color.button.info.warning.idle.background */ + --sl-color-button-danger-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.active.border */ + --sl-color-button-danger-link-active-foreground: var( + --sl-color-palette-danger-800 + ); /* color.button.danger.outline.active.foreground */ + --sl-color-button-danger-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.active.background */ + --sl-color-button-danger-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.hover.border */ + --sl-color-button-danger-link-hover-foreground: var( + --sl-color-palette-danger-700 + ); /* color.button.danger.outline.hover.foreground */ + --sl-color-button-danger-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.hover.background */ + --sl-color-button-danger-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.border */ + --sl-color-button-danger-link-idle-foreground: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.outline.idle.foreground */ + --sl-color-button-danger-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.background */ + --sl-color-button-danger-ghost-active-border: var( + --sl-color-palette-danger-700 + ); /* color.button.danger.outline.active.border */ + --sl-color-button-danger-ghost-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.danger.outline.active.foreground */ + --sl-color-button-danger-ghost-active-background: var( + --sl-color-palette-danger-700 + ); /* color.button.danger.outline.active.background */ + --sl-color-button-danger-ghost-hover-border: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.outline.hover.border */ + --sl-color-button-danger-ghost-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.danger.outline.hover.foreground */ + --sl-color-button-danger-ghost-hover-background: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.outline.hover.background */ + --sl-color-button-danger-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.border */ + --sl-color-button-danger-ghost-idle-foreground: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.outline.idle.foreground */ + --sl-color-button-danger-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.background */ + --sl-color-button-danger-outline-active-border: var( + --sl-color-palette-danger-700 + ); /* color.button.danger.outline.active.border */ + --sl-color-button-danger-outline-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.danger.outline.active.foreground */ + --sl-color-button-danger-outline-active-background: var( + --sl-color-palette-danger-700 + ); /* color.button.danger.outline.active.background */ + --sl-color-button-danger-outline-hover-border: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.outline.hover.border */ + --sl-color-button-danger-outline-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.danger.outline.hover.foreground */ + --sl-color-button-danger-outline-hover-background: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.outline.hover.background */ + --sl-color-button-danger-outline-idle-border: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.outline.idle.border */ + --sl-color-button-danger-outline-idle-foreground: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.outline.idle.foreground */ + --sl-color-button-danger-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.background */ + --sl-color-button-danger-solid-active-border: var( + --sl-color-palette-danger-700 + ); /* color.button.danger.solid.active.border */ + --sl-color-button-danger-solid-active-foreground: var( + --sl-color-palette-danger-700 + ); /* color.button.danger.solid.active.foreground */ + --sl-color-button-danger-solid-active-background: var( + --sl-color-palette-danger-50 + ); /* color.button.danger.solid.active.background */ + --sl-color-button-danger-solid-hover-border: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.solid.hover.border */ + --sl-color-button-danger-solid-hover-foreground: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.solid.hover.foreground */ + --sl-color-button-danger-solid-hover-background: var( + --sl-color-palette-white-base + ); /* color.button.danger.solid.hover.background */ + --sl-color-button-danger-solid-idle-border: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.warning.idle.border */ + --sl-color-button-danger-solid-idle-foreground: var( + --sl-color-palette-white-base + ); /* color.button.danger.solid.idle.foreground */ + --sl-color-button-danger-solid-idle-background: var( + --sl-color-palette-danger-600 + ); /* color.button.danger.warning.idle.background */ + --sl-color-button-warning-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.active.border */ + --sl-color-button-warning-link-active-foreground: var( + --sl-color-palette-warning-900 + ); /* color.button.warning.outline.active.foreground */ + --sl-color-button-warning-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.active.background */ + --sl-color-button-warning-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.hover.border */ + --sl-color-button-warning-link-hover-foreground: var( + --sl-color-palette-warning-800 + ); /* color.button.warning.outline.hover.foreground */ + --sl-color-button-warning-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.hover.background */ + --sl-color-button-warning-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.border */ + --sl-color-button-warning-link-idle-foreground: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.outline.idle.foreground */ + --sl-color-button-warning-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.background */ + --sl-color-button-warning-ghost-active-border: var( + --sl-color-palette-warning-800 + ); /* color.button.warning.outline.active.border */ + --sl-color-button-warning-ghost-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.warning.outline.active.foreground */ + --sl-color-button-warning-ghost-active-background: var( + --sl-color-palette-warning-800 + ); /* color.button.warning.outline.active.background */ + --sl-color-button-warning-ghost-hover-border: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.outline.hover.border */ + --sl-color-button-warning-ghost-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.warning.outline.hover.foreground */ + --sl-color-button-warning-ghost-hover-background: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.outline.hover.background */ + --sl-color-button-warning-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.border */ + --sl-color-button-warning-ghost-idle-foreground: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.outline.idle.foreground */ + --sl-color-button-warning-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.background */ + --sl-color-button-warning-outline-active-border: var( + --sl-color-palette-warning-800 + ); /* color.button.warning.outline.active.border */ + --sl-color-button-warning-outline-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.warning.outline.active.foreground */ + --sl-color-button-warning-outline-active-background: var( + --sl-color-palette-warning-800 + ); /* color.button.warning.outline.active.background */ + --sl-color-button-warning-outline-hover-border: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.outline.hover.border */ + --sl-color-button-warning-outline-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.warning.outline.hover.foreground */ + --sl-color-button-warning-outline-hover-background: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.outline.hover.background */ + --sl-color-button-warning-outline-idle-border: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.outline.idle.border */ + --sl-color-button-warning-outline-idle-foreground: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.outline.idle.foreground */ + --sl-color-button-warning-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.background */ + --sl-color-button-warning-solid-active-border: var( + --sl-color-palette-warning-800 + ); /* color.button.warning.solid.active.border */ + --sl-color-button-warning-solid-active-foreground: var( + --sl-color-palette-warning-800 + ); /* color.button.warning.solid.active.foreground */ + --sl-color-button-warning-solid-active-background: var( + --sl-color-palette-warning-100 + ); /* color.button.warning.solid.active.background */ + --sl-color-button-warning-solid-hover-border: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.solid.hover.border */ + --sl-color-button-warning-solid-hover-foreground: var( + --sl-color-palette-warning-700 + ); /* color.button.warning.solid.hover.foreground */ + --sl-color-button-warning-solid-hover-background: var( + --sl-color-palette-white-base + ); /* color.button.warning.solid.hover.background */ + --sl-color-button-warning-solid-idle-border: var( + --sl-color-palette-warning-700 + ); /* color.button.info.warning.idle.border */ + --sl-color-button-warning-solid-idle-foreground: var( + --sl-color-palette-white-base + ); /* color.button.warning.solid.idle.foreground */ + --sl-color-button-warning-solid-idle-background: var( + --sl-color-palette-warning-700 + ); /* color.button.info.warning.idle.background */ + --sl-color-button-success-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.active.border */ + --sl-color-button-success-link-active-foreground: var( + --sl-color-palette-success-900 + ); /* color.button.success.outline.active.foreground */ + --sl-color-button-success-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.active.background */ + --sl-color-button-success-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.hover.border */ + --sl-color-button-success-link-hover-foreground: var( + --sl-color-palette-success-800 + ); /* color.button.success.outline.hover.foreground */ + --sl-color-button-success-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.hover.background */ + --sl-color-button-success-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.border */ + --sl-color-button-success-link-idle-foreground: var( + --sl-color-palette-success-700 + ); /* color.button.success.outline.idle.foreground */ + --sl-color-button-success-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.background */ + --sl-color-button-success-ghost-active-border: var( + --sl-color-palette-success-800 + ); /* color.button.success.outline.active.border */ + --sl-color-button-success-ghost-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.success.outline.active.foreground */ + --sl-color-button-success-ghost-active-background: var( + --sl-color-palette-success-800 + ); /* color.button.success.outline.active.background */ + --sl-color-button-success-ghost-hover-border: var( + --sl-color-palette-success-700 + ); /* color.button.success.outline.hover.border */ + --sl-color-button-success-ghost-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.success.outline.hover.foreground */ + --sl-color-button-success-ghost-hover-background: var( + --sl-color-palette-success-700 + ); /* color.button.success.outline.hover.background */ + --sl-color-button-success-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.border */ + --sl-color-button-success-ghost-idle-foreground: var( + --sl-color-palette-success-700 + ); /* color.button.success.outline.idle.foreground */ + --sl-color-button-success-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.background */ + --sl-color-button-success-outline-active-border: var( + --sl-color-palette-success-800 + ); /* color.button.success.outline.active.border */ + --sl-color-button-success-outline-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.success.outline.active.foreground */ + --sl-color-button-success-outline-active-background: var( + --sl-color-palette-success-800 + ); /* color.button.success.outline.active.background */ + --sl-color-button-success-outline-hover-border: var( + --sl-color-palette-success-700 + ); /* color.button.success.outline.hover.border */ + --sl-color-button-success-outline-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.success.outline.hover.foreground */ + --sl-color-button-success-outline-hover-background: var( + --sl-color-palette-success-700 + ); /* color.button.success.outline.hover.background */ + --sl-color-button-success-outline-idle-border: var( + --sl-color-palette-success-700 + ); /* color.button.success.outline.idle.border */ + --sl-color-button-success-outline-idle-foreground: var( + --sl-color-palette-success-700 + ); /* color.button.success.outline.idle.foreground */ + --sl-color-button-success-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.background */ + --sl-color-button-success-solid-active-border: var( + --sl-color-palette-success-800 + ); /* color.button.success.solid.active.border */ + --sl-color-button-success-solid-active-foreground: var( + --sl-color-palette-success-800 + ); /* color.button.success.solid.active.foreground */ + --sl-color-button-success-solid-active-background: var( + --sl-color-palette-success-50 + ); /* color.button.success.solid.active.background */ + --sl-color-button-success-solid-hover-border: var( + --sl-color-palette-success-700 + ); /* color.button.success.solid.hover.border */ + --sl-color-button-success-solid-hover-foreground: var( + --sl-color-palette-success-700 + ); /* color.button.success.solid.hover.foreground */ + --sl-color-button-success-solid-hover-background: var( + --sl-color-palette-white-base + ); /* color.button.success.solid.hover.background */ + --sl-color-button-success-solid-idle-border: var( + --sl-color-palette-success-700 + ); /* color.button.success.solid.idle.border */ + --sl-color-button-success-solid-idle-foreground: var( + --sl-color-palette-white-base + ); /* color.button.success.solid.idle.foreground */ + --sl-color-button-success-solid-idle-background: var( + --sl-color-palette-success-700 + ); /* color.button.success.solid.idle.background */ + --sl-color-button-primary-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.active.border */ + --sl-color-button-primary-link-active-foreground: var( + --sl-color-palette-accent-600 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-primary-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.active.background */ + --sl-color-button-primary-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.hover.border */ + --sl-color-button-primary-link-hover-foreground: var( + --sl-color-palette-accent-500 + ); /* color.button.primary.outline.hover.foreground */ + --sl-color-button-primary-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.hover.background */ + --sl-color-button-primary-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.border */ + --sl-color-button-primary-link-idle-foreground: var( + --sl-color-palette-accent-base + ); /* color.button.primary.outline.idle.foreground */ + --sl-color-button-primary-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.background */ + --sl-color-button-primary-ghost-active-border: var( + --sl-color-palette-accent-500 + ); /* color.button.primary.outline.active.border */ + --sl-color-button-primary-ghost-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-primary-ghost-active-background: var( + --sl-color-palette-accent-500 + ); /* color.button.primary.outline.active.background */ + --sl-color-button-primary-ghost-hover-border: var( + --sl-color-palette-accent-base + ); /* color.button.primary.outline.hover.border */ + --sl-color-button-primary-ghost-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.primary.outline.hover.foreground */ + --sl-color-button-primary-ghost-hover-background: var( + --sl-color-palette-accent-base + ); /* color.button.primary.outline.hover.background */ + --sl-color-button-primary-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.border */ + --sl-color-button-primary-ghost-idle-foreground: var( + --sl-color-palette-accent-base + ); /* color.button.primary.outline.idle.foreground */ + --sl-color-button-primary-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.background */ + --sl-color-button-primary-outline-active-border: var( + --sl-color-palette-accent-500 + ); /* color.button.primary.outline.active.border */ + --sl-color-button-primary-outline-active-foreground: var( + --sl-color-palette-white-base + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-primary-outline-active-background: var( + --sl-color-palette-accent-500 + ); /* color.button.primary.outline.active.background */ + --sl-color-button-primary-outline-hover-border: var( + --sl-color-palette-accent-base + ); /* color.button.primary.outline.hover.border */ + --sl-color-button-primary-outline-hover-foreground: var( + --sl-color-palette-white-base + ); /* color.button.primary.outline.hover.foreground */ + --sl-color-button-primary-outline-hover-background: var( + --sl-color-palette-accent-base + ); /* color.button.primary.outline.hover.background */ + --sl-color-button-primary-outline-idle-border: var( + --sl-color-palette-accent-base + ); /* color.button.primary.outline.idle.border */ + --sl-color-button-primary-outline-idle-foreground: var( + --sl-color-palette-accent-base + ); /* color.button.primary.outline.idle.foreground */ + --sl-color-button-primary-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.background */ + --sl-color-button-primary-solid-active-border: var( + --sl-color-palette-accent-base + ); /* color.button.primary.default.active.border */ + --sl-color-button-primary-solid-active-foreground: var( + --sl-color-palette-accent-500 + ); /* color.button.primary.solid.active.foreground */ + --sl-color-button-primary-solid-active-background: var( + --sl-color-palette-accent-50 + ); /* color.button.primary.solid.active.background */ + --sl-color-button-primary-solid-hover-border: var( + --sl-color-palette-accent-base + ); /* color.button.primary.default.hover.border */ + --sl-color-button-primary-solid-hover-foreground: var( + --sl-color-palette-accent-base + ); /* color.button.primary.solid.hover.foreground */ + --sl-color-button-primary-solid-hover-background: var( + --sl-color-palette-white-base + ); /* color.button.primary.solid.hover.background */ + --sl-color-button-primary-solid-idle-border: var( + --sl-color-palette-accent-base + ); /* color.button.primary.solid.idle.border */ + --sl-color-button-primary-solid-idle-foreground: var( + --sl-color-palette-white-base + ); /* color.button.primary.solid.idle.foreground */ + --sl-color-button-primary-solid-idle-background: var( + --sl-color-palette-accent-base + ); /* color.button.primary.solid.idle.background */ + --sl-color-button-default-link-disabled-border: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-link-disabled-foreground: var( + --sl-color-palette-neutral-300 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-link-disabled-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-default-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-link-active-foreground: var( + --sl-color-palette-accent-500 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-link-hover-foreground: var( + --sl-color-palette-accent-base + ); /* color.button.default.outline.hover.foreground */ + --sl-color-button-default-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-link-idle-foreground: var( + --sl-color-palette-primary-base + ); /* color.button.default.outline.idle.foreground */ + --sl-color-button-default-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-ghost-disabled-border: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-ghost-disabled-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-default-ghost-active-border: var( + --sl-color-palette-neutral-150 + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-ghost-active-foreground: var( + --sl-color-palette-neutral-base + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-ghost-active-background: var( + --sl-color-palette-neutral-150 + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-ghost-hover-border: var( + --sl-color-palette-neutral-100 + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-ghost-hover-foreground: var( + --sl-color-palette-neutral-base + ); /* color.button.default.outline.hover.foreground */ + --sl-color-button-default-ghost-hover-background: var( + --sl-color-palette-neutral-100 + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-ghost-idle-foreground: var( + --sl-color-palette-primary-base + ); /* color.button.default.outline.idle.foreground */ + --sl-color-button-default-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-outline-selected-disabled-border: var( + --sl-color-palette-neutral-300 + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-outline-selected-disabled-foreground: var( + --sl-color-palette-neutral-300 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-outline-selected-disabled-background: var( + --sl-color-palette-neutral-100 + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-default-outline-selected-active-background: var( + --sl-color-palette-accent-300 + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-outline-selected-hover-background: var( + --sl-color-palette-accent-200 + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-outline-selected-idle-background: var( + --sl-color-palette-accent-150 + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-outline-disabled-border: var( + --sl-color-palette-neutral-300 + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-outline-disabled-foreground: var( + --sl-color-palette-neutral-300 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-outline-disabled-background: var( + --sl-color-palette-neutral-100 + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-default-outline-active-border: var( + --sl-color-palette-neutral-base + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-outline-active-foreground: var( + --sl-color-palette-neutral-base + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-outline-active-background: var( + --sl-color-palette-primary-150 + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-outline-hover-border: var( + --sl-color-palette-neutral-base + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-outline-hover-foreground: var( + --sl-color-palette-neutral-base + ); /* color.button.default.outline.hover.foreground */ + --sl-color-button-default-outline-hover-background: var( + --sl-color-palette-primary-100 + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-outline-idle-border: var( + --sl-color-palette-primary-base + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-outline-idle-foreground: var( + --sl-color-palette-primary-base + ); /* color.button.default.outline.idle.foreground */ + --sl-color-button-default-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-solid-disabled-border: var( + --sl-color-palette-neutral-300 + ); /* color.button.default.disabled.border */ + --sl-color-button-default-solid-disabled-foreground: var( + --sl-color-palette-neutral-100 + ); /* color.button.default.disabled.foreground */ + --sl-color-button-default-solid-disabled-background: var( + --sl-color-palette-neutral-300 + ); /* color.button.default.disabled.background */ + --sl-color-button-default-solid-active-border: var( + --sl-color-palette-primary-base + ); /* color.button.default.active.border */ + --sl-color-button-default-solid-active-foreground: var( + --sl-color-palette-primary-base + ); /* color.button.default.active.foreground */ + --sl-color-button-default-solid-active-background: var( + --sl-color-palette-primary-100 + ); /* color.button.default.active.background */ + --sl-color-button-default-solid-hover-border: var( + --sl-color-palette-primary-base + ); /* color.button.default.hover.border */ + --sl-color-button-default-solid-hover-foreground: var( + --sl-color-palette-primary-base + ); /* color.button.default.hover.foreground */ + --sl-color-button-default-solid-hover-background: var( + --sl-color-palette-white-base + ); /* color.button.default.hover.background */ + --sl-color-button-default-solid-idle-border: var( + --sl-color-palette-primary-base + ); /* color.button.default.idle.border */ + --sl-color-button-default-solid-idle-foreground: var( + --sl-color-palette-white-base + ); /* color.button.default.idle.foreground */ + --sl-color-button-default-solid-idle-background: var( + --sl-color-palette-primary-base + ); /* color.button.default.idle.background */ + --sl-color-badge-subtle-primary-foreground: var(--sl-color-palette-neutral-600); + --sl-color-badge-subtle-primary-background: var(--sl-color-palette-primary-100); + --sl-color-badge-subtle-neutral-foreground: var(--sl-color-palette-neutral-600); + --sl-color-badge-subtle-neutral-background: var(--sl-color-palette-neutral-100); + --sl-color-badge-subtle-accent-foreground: var(--sl-color-palette-accent-500); + --sl-color-badge-subtle-accent-background: var(--sl-color-palette-accent-100); + --sl-color-badge-subtle-warning-foreground: var(--sl-color-palette-warning-700); + --sl-color-badge-subtle-warning-background: var(--sl-color-palette-warning-100); + --sl-color-badge-subtle-success-foreground: var(--sl-color-palette-success-600); + --sl-color-badge-subtle-success-background: var(--sl-color-palette-success-100); + --sl-color-badge-subtle-danger-foreground: var(--sl-color-palette-danger-600); + --sl-color-badge-subtle-danger-background: var(--sl-color-palette-danger-100); + --sl-color-badge-subtle-info-foreground: var(--sl-color-palette-info-500); + --sl-color-badge-subtle-info-background: var(--sl-color-palette-info-100); + --sl-color-badge-bold-primary-foreground: var(--sl-color-palette-white-base); + --sl-color-badge-bold-primary-background: var(--sl-color-palette-primary-base); + --sl-color-badge-bold-neutral-foreground: var(--sl-color-palette-black-base); + --sl-color-badge-bold-neutral-background: var(--sl-color-palette-neutral-200); + --sl-color-badge-bold-accent-foreground: var(--sl-color-palette-white-base); + --sl-color-badge-bold-accent-background: var(--sl-color-palette-accent-base); + --sl-color-badge-bold-warning-foreground: var(--sl-color-palette-white-base); + --sl-color-badge-bold-warning-background: var(--sl-color-palette-warning-600); + --sl-color-badge-bold-success-foreground: var(--sl-color-palette-white-base); + --sl-color-badge-bold-success-background: var(--sl-color-palette-success-500); + --sl-color-badge-bold-danger-foreground: var(--sl-color-palette-white-base); + --sl-color-badge-bold-danger-background: var(--sl-color-palette-danger-500); + --sl-color-badge-bold-info-foreground: var(--sl-color-palette-white-base); + --sl-color-avatar-foreground: var(--sl-color-palette-white-base); + --sl-color-avatar-background: var(--sl-color-palette-accent-base); + --sl-box-shadow-none: 0 0 0 0 var(--sl-color-palette-transparent-base); /* boxShadow.none */ + --sl-box-shadow-focus: 0 0 0 3px rgba(51, 102, 255, var(--sl-opacity-500)); /* boxShadow.focus */ + --sl-box-shadow-slds-checklist: 0 0 4px 0 rgba(34, 34, 34, var(--sl-opacity-50)), + 0 4px 8px 0 rgba(34, 34, 34, var(--sl-opacity-150)); + --sl-color-tag-bold-close-active-border: var(--sl-color-tag-bold-close-active-background); + --sl-color-tag-bold-close-hover-foreground: var(--sl-color-tag-bold-hover-foreground); + --sl-color-tag-bold-close-hover-background: var(--sl-color-tag-bold-hover-background); + --sl-color-tag-bold-idle-background: var(--sl-color-palette-info-400); + --sl-color-tag-subtle-close-active-border: var(--sl-color-tag-subtle-close-active-background); + --sl-color-tag-subtle-close-hover-foreground: var(--sl-color-tag-subtle-hover-foreground); + --sl-color-tag-subtle-close-hover-background: var(--sl-color-tag-subtle-hover-background); + --sl-color-tag-subtle-active-background: var(--sl-color-focusring-default); + --sl-color-slds-checklist-link-idle: var(--sl-color-palette-info-400); + --sl-color-slds-checklist-foreground: var(--sl-body-foreground); + --sl-color-slds-checklist-background: var(--sl-body-background); + --sl-color-accordion-active-border: var(--sl-color-accordion-default-border); + --sl-color-accordion-active-background: var(--sl-body-background); + --sl-color-accordion-disabled-border: var(--sl-color-accordion-default-border); + --sl-color-accordion-hover-border: var(--sl-color-accordion-default-border); + --sl-color-accordion-hover-background: var(--sl-body-background); + --sl-color-accordion-default-icon: var(--sl-body-foreground); + --sl-color-accordion-default-foreground: var(--sl-body-foreground); + --sl-color-accordion-default-header: var(--sl-body-background); + --sl-color-accordion-default-background: var(--sl-body-background); + --sl-color-card-foreground: var(--sl-body-foreground); + --sl-color-card-background: var(--sl-body-background); + --sl-color-skeleton-shimmer: linear-gradient + ( + 90deg, + var(--sl-color-skeleton-base) 0%, + var(--sl-color-skeleton-base) 10%, + var(--sl-color-skeleton-effect) 50%, + var(--sl-color-skeleton-base) 90%, + var(--sl-color-skeleton-base) 100% + ); /* body.surface.100 */ + --sl-color-tab-content-foreground: var(--sl-body-foreground); + --sl-color-tab-content-background: var(--sl-body-background); + --sl-color-tab-active-foreground: var(--sl-body-foreground); + --sl-color-tab-tabbar-foreground: var(--sl-body-foreground); + --sl-color-tab-tabbar-background: var(--sl-body-background); + --sl-color-tab-disabled-background: var(--sl-body-background); + --sl-color-tab-hover-foreground: var(--sl-body-foreground); + --sl-color-tab-default-foreground: var(--sl-body-foreground); + --sl-color-tab-default-background: var(--sl-body-background); + --sl-color-popover-foreground: var(--sl-body-foreground); + --sl-color-dialog-border: var(--sl-body-background); /* color.surface.solid.primary.background */ + --sl-color-dialog-foreground: var(--sl-body-foreground); /* color.surface.solid.primary.background */ + --sl-color-dialog-background: var(--sl-body-background); /* color.surface.solid.primary.background */ + --sl-color-select-selectbox-valid-disabled-placeholder: var( + --sl-color-input-text-field-default-disabled-placeholder + ); + --sl-color-select-selectbox-valid-active-background: var(--sl-color-input-text-field-valid-active-background); + --sl-color-select-selectbox-valid-hover-background: var(--sl-color-input-text-field-valid-hover-background); + --sl-color-select-selectbox-valid-default-icon: var(--sl-color-input-text-field-valid-default-icon); + --sl-color-select-selectbox-invalid-active-background: var(--sl-color-input-text-field-invalid-active-background); + --sl-color-select-selectbox-invalid-hover-placeholder: var(--sl-color-input-text-field-invalid-hover-placeholder); + --sl-color-select-selectbox-invalid-hover-border: var(--sl-color-input-text-field-invalid-hover-border); + --sl-color-select-selectbox-invalid-hover-background: var(--sl-color-input-text-field-invalid-hover-background); + --sl-color-select-selectbox-invalid-default-icon: var(--sl-color-input-text-field-invalid-default-icon); + --sl-color-select-selectbox-invalid-default-border: var(--sl-color-input-text-field-invalid-default-border); + --sl-color-select-selectbox-invalid-default-background: var(--sl-color-input-text-field-invalid-default-background); + --sl-color-select-selectbox-default-disabled-placeholder: var( + --sl-color-input-text-field-default-disabled-placeholder + ); + --sl-color-select-selectbox-default-disabled-input-text: var( + --sl-color-input-text-field-default-disabled-input-text + ); + --sl-color-select-selectbox-default-disabled-icon: var(--sl-color-input-text-field-default-disabled-icon); + --sl-color-select-selectbox-default-disabled-label: var(--sl-color-input-text-field-default-disabled-label); + --sl-color-select-selectbox-default-disabled-border: var(--sl-color-input-text-field-default-disabled-border); + --sl-color-select-selectbox-default-disabled-background: var( + --sl-color-input-text-field-default-disabled-background + ); + --sl-color-select-selectbox-default-active-background: var(--sl-color-input-text-field-default-active-background); + --sl-color-select-selectbox-default-hover-icon: var(--sl-color-input-text-field-default-hover-icon); + --sl-color-select-selectbox-default-hover-background: var(--sl-color-input-text-field-default-hover-background); + --sl-color-select-selectbox-default-default-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); + --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); + --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); + --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); + --sl-color-select-item-focus-border: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-focus-background: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-100) * 100%), + transparent + ); + --sl-color-select-item-active-border: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-hover-border: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-default-border: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-default-background: var(--sl-body-background); + --sl-color-input-field-label-hint-invalid: var( + --sl-color-input-field-label-text-invalid + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-hint-disabled: var( + --sl-color-input-field-label-text-disabled + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-icon-invalid: var( + --sl-color-input-text-field-invalid-default-icon + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-icon-default: var(--sl-body-foreground); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-text-default: var(--sl-body-foreground); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-icon-invalid: var( + --sl-color-input-text-field-invalid-default-icon + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-disabled-input-text: var( + --sl-color-input-text-field-default-disabled-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-disabled-icon: var( + --sl-color-input-text-field-default-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-disabled-label: var( + --sl-color-input-text-field-default-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-disabled-border: var( + --sl-color-input-text-field-default-disabled-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-disabled-background: var( + --sl-color-input-text-field-default-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-focus-icon: var( + --sl-color-input-text-field-valid-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-focus-background: var( + --sl-color-input-text-field-valid-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-active-icon: var( + --sl-color-input-text-field-valid-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-active-border: var( + --sl-color-input-text-field-default-active-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-hover-icon: var( + --sl-color-input-text-field-valid-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-default-border: var( + --sl-color-input-text-field-default-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-default-background: var( + --sl-color-input-text-field-default-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-placeholder: var( + --sl-color-input-text-field-default-disabled-placeholder + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-input-text: var( + --sl-color-input-text-field-default-disabled-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-icon: var( + --sl-color-input-text-field-default-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-label: var( + --sl-color-input-text-field-default-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-invalid-disabled-border: var( + --sl-color-input-text-field-default-disabled-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-background: var( + --sl-color-input-text-field-default-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-icon: var( + --sl-color-input-text-field-invalid-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-invalid-focus-border: var( + --sl-color-input-text-field-invalid-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-background: var( + --sl-color-input-text-field-invalid-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-icon: var( + --sl-color-input-text-field-invalid-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-invalid-active-border: var( + --sl-color-input-text-field-default-active-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-icon: var( + --sl-color-input-text-field-invalid-hover-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-invalid-default-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-focus-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-focus-icon: var( + --sl-color-input-text-field-default-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-focus-border: var( + --sl-color-input-text-field-default-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-focus-background: var( + --sl-color-input-text-field-default-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-active-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-active-icon: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-hover-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-hover-border: var( + --sl-color-input-text-field-default-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-default-input-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-disabled-handle: var( + --sl-color-input-switch-default-unchecked-disabled-handle + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-disabled-icon: var( + --sl-color-input-switch-default-unchecked-disabled-icon + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-disabled-text: var( + --sl-color-input-switch-default-unchecked-disabled-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-disabled-background: var( + --sl-color-input-switch-default-unchecked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-focus-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-focus-background: var( + --sl-color-input-switch-default-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-active-icon: var( + --sl-color-input-switch-default-checked-active-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-active-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-hover-icon: var( + --sl-color-input-switch-default-checked-hover-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-hover-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-default-icon: var( + --sl-color-input-switch-default-checked-default-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-default-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-focus-handle: var( + --sl-color-input-switch-default-unchecked-default-handle + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-focus-background: var( + --sl-color-input-switch-default-unchecked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-active-icon: var( + --sl-color-input-switch-default-unchecked-active-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-active-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-hover-icon: var( + --sl-color-input-switch-default-unchecked-hover-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-hover-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-default-icon: var( + --sl-color-input-switch-default-unchecked-default-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-default-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-disabled-icon: var( + --sl-color-input-option-default-checked-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-disabled-label: var( + --sl-color-input-option-default-checked-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-disabled-background: var( + --sl-color-input-option-default-checked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-focus-background: var( + --sl-color-input-option-valid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-active-border: var( + --sl-color-input-option-valid-checked-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-hover-border: var( + --sl-color-input-option-valid-checked-hover-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-default-border: var( + --sl-color-input-option-valid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-disabled-icon: var( + --sl-color-input-option-default-unchecked-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-disabled-label: var( + --sl-color-input-option-default-unchecked-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-unchecked-disabled-border: var( + --sl-color-input-option-default-unchecked-disabled-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-disabled-background: var( + --sl-color-input-option-default-unchecked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-unchecked-focus-background: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-100) * 100%), + transparent + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-unchecked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-unchecked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-disabled-icon: var( + --sl-color-input-option-default-checked-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-disabled-label: var( + --sl-color-input-option-default-checked-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-disabled-background: var( + --sl-color-input-option-default-checked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-focus-background: var( + --sl-color-input-option-invalid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-active-border: var( + --sl-color-input-option-invalid-checked-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-hover-border: var( + --sl-color-input-option-invalid-checked-hover-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-default-border: var( + --sl-color-input-option-invalid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-disabled-icon: var( + --sl-color-input-option-default-unchecked-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-disabled-label: var( + --sl-color-input-option-default-unchecked-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-unchecked-disabled-border: var( + --sl-color-input-option-default-unchecked-disabled-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-disabled-background: var( + --sl-color-input-option-default-unchecked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-focus-icon: var( + --sl-color-input-option-invalid-unchecked-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-unchecked-focus-border: var( + --sl-color-input-option-invalid-unchecked-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-focus-background: var( + --sl-color-input-option-invalid-unchecked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-unchecked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-unchecked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-disabled-border: var( + --sl-color-input-option-default-checked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-focus-border: var( + --sl-color-input-option-default-checked-focus-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-active-border: var( + --sl-color-input-option-default-checked-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-hover-border: var( + --sl-color-input-option-default-checked-hover-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-default-border: var( + --sl-color-input-option-default-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-focus-icon: var( + --sl-color-input-option-default-unchecked-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-focus-border: var( + --sl-color-input-option-default-unchecked-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-focus-background: var( + --sl-color-input-option-default-unchecked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-unchecked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-unchecked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-button-info-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-info-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-info-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-info-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-info-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-info-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-info-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-info-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-info-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.info.default.disabled.border */ + --sl-color-button-info-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.info.solid.disabled.foreground */ + --sl-color-button-info-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.info.solid.disabled.background */ + --sl-color-button-danger-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.danger.outline.disabled.border */ + --sl-color-button-danger-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.danger.outline.disabled.foreground */ + --sl-color-button-danger-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.danger.outline.disabled.background */ + --sl-color-button-danger-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.danger.outline.disabled.border */ + --sl-color-button-danger-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.danger.outline.disabled.background */ + --sl-color-button-danger-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.danger.outline.disabled.border */ + --sl-color-button-danger-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.danger.outline.disabled.foreground */ + --sl-color-button-danger-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.danger.outline.disabled.background */ + --sl-color-button-danger-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.danger.default.disabled.border */ + --sl-color-button-danger-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.danger.solid.disabled.foreground */ + --sl-color-button-danger-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.danger.solid.disabled.background */ + --sl-color-button-warning-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.warning.outline.disabled.border */ + --sl-color-button-warning-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.warning.outline.disabled.foreground */ + --sl-color-button-warning-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.warning.outline.disabled.background */ + --sl-color-button-warning-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.warning.outline.disabled.border */ + --sl-color-button-warning-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.warning.outline.disabled.background */ + --sl-color-button-warning-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.warning.outline.disabled.border */ + --sl-color-button-warning-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.warning.outline.disabled.foreground */ + --sl-color-button-warning-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.warning.outline.disabled.background */ + --sl-color-button-warning-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.warning.default.disabled.border */ + --sl-color-button-warning-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.warning.solid.disabled.foreground */ + --sl-color-button-warning-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.warning.solid.disabled.background */ + --sl-color-button-success-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.success.outline.disabled.border */ + --sl-color-button-success-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.success.outline.disabled.foreground */ + --sl-color-button-success-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.success.outline.disabled.background */ + --sl-color-button-success-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.success.outline.disabled.border */ + --sl-color-button-success-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.success.outline.disabled.background */ + --sl-color-button-success-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.success.outline.disabled.border */ + --sl-color-button-success-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.success.outline.disabled.foreground */ + --sl-color-button-success-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.success.outline.disabled.background */ + --sl-color-button-success-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.success.solid.disabled.border */ + --sl-color-button-success-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.success.solid.disabled.foreground */ + --sl-color-button-success-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.success.solid.disabled.background */ + --sl-color-button-primary-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.primary.outline.disabled.border */ + --sl-color-button-primary-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.primary.outline.disabled.foreground */ + --sl-color-button-primary-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.primary.outline.disabled.background */ + --sl-color-button-primary-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.primary.outline.disabled.border */ + --sl-color-button-primary-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.primary.outline.disabled.background */ + --sl-color-button-primary-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.primary.outline.disabled.border */ + --sl-color-button-primary-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.primary.outline.disabled.foreground */ + --sl-color-button-primary-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.primary.outline.disabled.background */ + --sl-color-button-primary-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.primary.default.disabled.border */ + --sl-color-button-primary-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.primary.solid.disabled.foreground */ + --sl-color-button-primary-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.primary.solid.disabled.background */ + --sl-color-button-default-ghost-selected-disabled-border: var( + --sl-color-button-default-outline-selected-disabled-background + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-ghost-selected-disabled-foreground: var( + --sl-color-button-default-outline-selected-disabled-foreground + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-ghost-selected-disabled-background: var( + --sl-color-button-default-outline-selected-disabled-background + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-default-ghost-selected-active-border: var( + --sl-color-button-default-outline-selected-active-background + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-ghost-selected-active-background: var( + --sl-color-button-default-outline-selected-active-background + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-ghost-selected-hover-border: var( + --sl-color-button-default-outline-selected-hover-background + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-ghost-selected-hover-background: var( + --sl-color-button-default-outline-selected-hover-background + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-ghost-selected-idle-border: var( + --sl-color-button-default-outline-selected-idle-background + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-ghost-selected-idle-background: var( + --sl-color-button-default-outline-selected-idle-background + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-ghost-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-outline-selected-active-border: var( + --sl-color-button-default-outline-hover-border + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-outline-selected-active-foreground: var( + --sl-color-button-default-outline-hover-foreground + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-outline-selected-idle-border: var( + --sl-color-button-default-outline-idle-border + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-outline-selected-idle-foreground: var( + --sl-color-button-default-outline-idle-foreground + ); /* color.button.default.outline.idle.foreground */ + --sl-color-badge-bold-info-background: var(--sl-color-palette-info-400); + --sl-color-avatar-subheader: var(--sl-color-input-helper-text-default); + --sl-color-tag-bold-close-active-foreground: var(--sl-color-tag-bold-close-hover-foreground); + --sl-color-tag-bold-close-hover-border: var(--sl-color-tag-bold-close-hover-background); + --sl-color-tag-subtle-close-hover-border: var(--sl-color-tag-subtle-close-hover-background); + --sl-color-select-listbox-border: var(--sl-color-select-selectbox-default-default-border); + --sl-color-select-selectbox-valid-disabled-input-text: var(--sl-color-input-text-field-valid-disabled-input-text); + --sl-color-select-selectbox-valid-disabled-icon: var(--sl-color-input-text-field-valid-disabled-icon); + --sl-color-select-selectbox-valid-disabled-label: var(--sl-color-input-text-field-valid-disabled-label); + --sl-color-select-selectbox-valid-disabled-border: var(--sl-color-input-text-field-valid-disabled-border); + --sl-color-select-selectbox-valid-disabled-background: var(--sl-color-input-text-field-valid-disabled-background); + --sl-color-select-selectbox-valid-focus-placeholder: var(--sl-color-input-text-field-invalid-default-placeholder); + --sl-color-select-selectbox-valid-focus-icon: var(--sl-color-input-text-field-valid-focus-icon); + --sl-color-select-selectbox-valid-focus-label: var(--sl-color-input-text-field-valid-focus-label); + --sl-color-select-selectbox-valid-focus-background: var(--sl-color-input-text-field-valid-focus-background); + --sl-color-select-selectbox-valid-active-placeholder: var(--sl-color-input-text-field-invalid-default-placeholder); + --sl-color-select-selectbox-valid-active-icon: var(--sl-color-input-text-field-valid-active-icon); + --sl-color-select-selectbox-valid-active-label: var(--sl-color-input-text-field-valid-active-label); + --sl-color-select-selectbox-valid-active-border: var(--sl-color-input-text-field-valid-active-border); + --sl-color-select-selectbox-valid-hover-placeholder: var(--sl-color-input-text-field-invalid-default-placeholder); + --sl-color-select-selectbox-valid-hover-icon: var(--sl-color-input-text-field-valid-hover-icon); + --sl-color-select-selectbox-valid-hover-label: var(--sl-color-input-text-field-valid-hover-label); + --sl-color-select-selectbox-valid-default-placeholder: var(--sl-color-input-text-field-invalid-default-placeholder); + --sl-color-select-selectbox-valid-default-label: var(--sl-color-input-text-field-valid-default-label); + --sl-color-select-selectbox-valid-default-border: var(--sl-color-input-text-field-valid-default-border); + --sl-color-select-selectbox-valid-default-background: var(--sl-color-input-text-field-valid-default-background); + --sl-color-select-selectbox-invalid-disabled-placeholder: var( + --sl-color-input-text-field-invalid-disabled-placeholder + ); + --sl-color-select-selectbox-invalid-disabled-input-text: var( + --sl-color-input-text-field-invalid-disabled-input-text + ); + --sl-color-select-selectbox-invalid-disabled-icon: var(--sl-color-input-text-field-invalid-disabled-icon); + --sl-color-select-selectbox-invalid-disabled-label: var(--sl-color-input-text-field-invalid-disabled-label); + --sl-color-select-selectbox-invalid-disabled-border: var(--sl-color-input-text-field-invalid-disabled-border); + --sl-color-select-selectbox-invalid-disabled-background: var( + --sl-color-input-text-field-invalid-disabled-background + ); + --sl-color-select-selectbox-invalid-focus-placeholder: var(--sl-color-input-text-field-invalid-focus-placeholder); + --sl-color-select-selectbox-invalid-focus-icon: var(--sl-color-input-text-field-invalid-focus-icon); + --sl-color-select-selectbox-invalid-focus-label: var(--sl-color-input-text-field-invalid-focus-label); + --sl-color-select-selectbox-invalid-focus-border: var(--sl-color-input-text-field-invalid-focus-border); + --sl-color-select-selectbox-invalid-focus-background: var(--sl-color-input-text-field-invalid-focus-background); + --sl-color-select-selectbox-invalid-active-placeholder: var(--sl-color-input-text-field-invalid-active-placeholder); + --sl-color-select-selectbox-invalid-active-icon: var(--sl-color-input-text-field-invalid-active-icon); + --sl-color-select-selectbox-invalid-active-label: var(--sl-color-input-text-field-invalid-active-label); + --sl-color-select-selectbox-invalid-active-border: var(--sl-color-input-text-field-invalid-active-border); + --sl-color-select-selectbox-invalid-hover-icon: var(--sl-color-input-text-field-invalid-hover-icon); + --sl-color-select-selectbox-invalid-hover-label: var(--sl-color-input-text-field-invalid-hover-label); + --sl-color-select-selectbox-invalid-default-placeholder: var( + --sl-color-input-text-field-invalid-default-placeholder + ); + --sl-color-select-selectbox-invalid-default-label: var(--sl-color-input-text-field-invalid-default-label); + --sl-color-select-selectbox-default-focus-placeholder: var(--sl-color-input-text-field-default-focus-placeholder); + --sl-color-select-selectbox-default-focus-icon: var(--sl-color-input-text-field-default-focus-icon); + --sl-color-select-selectbox-default-focus-background: var(--sl-color-input-text-field-default-focus-background); + --sl-color-select-selectbox-default-active-placeholder: var(--sl-color-input-text-field-default-active-placeholder); + --sl-color-select-selectbox-default-active-icon: var(--sl-color-input-text-field-default-active-icon); + --sl-color-select-selectbox-default-active-label: var(--sl-color-input-text-field-default-active-label); + --sl-color-select-selectbox-default-hover-placeholder: var(--sl-color-input-text-field-default-hover-placeholder); + --sl-color-select-selectbox-default-hover-label: var(--sl-color-input-text-field-default-hover-label); + --sl-color-select-selectbox-default-hover-border: var(--sl-color-input-text-field-default-hover-border); + --sl-color-select-selectbox-default-default-input-text: var(--sl-color-input-text-field-default-default-input-text); + --sl-color-select-selectbox-default-default-label: var(--sl-color-input-text-field-default-default-label); + --sl-color-input-field-label-hint-default: var( + --sl-color-input-field-label-text-default + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-focus-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-focus-border: var( + --sl-color-input-text-field-valid-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-active-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-hover-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-hover-border: var( + --sl-color-input-text-field-default-hover-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-default-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-focus-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-focus-label: var( + --sl-color-input-text-field-default-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-active-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-hover-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-focus-icon: var( + --sl-color-input-switch-default-checked-default-icon + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-focus-icon: var( + --sl-color-input-switch-default-unchecked-default-icon + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-focus-text: var( + --sl-color-input-switch-default-unchecked-default-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-disabled-border: var( + --sl-color-input-option-default-checked-disabled-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-focus-border: var( + --sl-color-input-option-valid-checked-focus-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-disabled-border: var( + --sl-color-input-option-invalid-checked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-focus-border: var( + --sl-color-input-option-invalid-checked-focus-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-focus-label: var( + --sl-color-input-option-default-unchecked-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-button-info-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-danger-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.danger.outline.disabled.foreground */ + --sl-color-button-warning-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.warning.outline.disabled.foreground */ + --sl-color-button-success-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.success.outline.disabled.foreground */ + --sl-color-button-primary-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.primary.outline.disabled.foreground */ + --sl-color-button-default-ghost-selected-active-foreground: var( + --sl-color-button-default-outline-selected-active-foreground + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-ghost-selected-idle-foreground: var( + --sl-color-button-default-outline-selected-idle-foreground + ); /* color.button.default.outline.idle.foreground */ + --sl-color-button-default-outline-selected-hover-border: var( + --sl-color-button-default-outline-selected-idle-border + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-outline-selected-hover-foreground: var( + --sl-color-button-default-outline-selected-idle-foreground + ); /* color.button.default.outline.hover.foreground */ + --sl-color-avatar-header: var(--sl-color-input-field-label-text-default); + --sl-color-select-selectbox-valid-focus-input-text: var(--sl-color-input-text-field-valid-focus-input-text); + --sl-color-select-selectbox-valid-focus-border: var(--sl-color-input-text-field-valid-focus-border); + --sl-color-select-selectbox-valid-active-input-text: var(--sl-color-input-text-field-valid-active-input-text); + --sl-color-select-selectbox-valid-hover-input-text: var(--sl-color-input-text-field-valid-hover-input-text); + --sl-color-select-selectbox-valid-hover-border: var(--sl-color-input-text-field-valid-hover-border); + --sl-color-select-selectbox-valid-default-input-text: var(--sl-color-input-text-field-valid-default-input-text); + --sl-color-select-selectbox-invalid-focus-input-text: var(--sl-color-input-text-field-invalid-focus-input-text); + --sl-color-select-selectbox-invalid-active-input-text: var(--sl-color-input-text-field-invalid-active-input-text); + --sl-color-select-selectbox-invalid-hover-input-text: var(--sl-color-input-text-field-invalid-hover-input-text); + --sl-color-select-selectbox-invalid-default-input-text: var(--sl-color-input-text-field-invalid-default-input-text); + --sl-color-select-selectbox-default-focus-input-text: var(--sl-color-input-text-field-default-focus-input-text); + --sl-color-select-selectbox-default-focus-label: var(--sl-color-input-text-field-default-focus-label); + --sl-color-select-selectbox-default-active-input-text: var(--sl-color-input-text-field-default-active-input-text); + --sl-color-select-selectbox-default-hover-input-text: var(--sl-color-input-text-field-default-hover-input-text); + --sl-color-button-default-ghost-selected-hover-foreground: var( + --sl-color-button-default-outline-selected-hover-foreground + ); /* color.button.default.outline.hover.foreground */ + } + } + @media (prefers-color-scheme: dark) { + :host { + --sl-color-field-button-default-active-background: rgba( + 255, + 255, + 255, + 0.13 + ); /* color.button.default.active.background */ + --sl-color-field-button-default-hover-background: rgba( + 255, + 255, + 255, + 0.07 + ); /* color.button.default.hover.background */ + --sl-body-surface-overlay: color-mix( + in srgb, + var(--sl-color-palette-white-base) calc(var(--sl-opacity-500) * 100%), + transparent + ); /* body.surface.200 */ + --sl-body-surface-200: var(--sl-color-palette-neutral-800); /* color.body.default.foreground */ + --sl-body-surface-100: var(--sl-color-palette-neutral-900); /* color.body.default.foreground */ + --sl-body-foreground: var(--sl-color-palette-white-base); /* color.body.default.foreground */ + --sl-body-background: var(--sl-color-palette-black-base); /* color.body.default.background */ + --sl-color-tag-bold-close-active-background: var(--sl-color-palette-info-500); + --sl-color-tag-bold-disabled-border: var(--sl-color-palette-neutral-800); + --sl-color-tag-bold-disabled-foreground: var(--sl-color-palette-neutral-800); + --sl-color-tag-bold-disabled-background: var(--sl-color-palette-neutral-500); + --sl-color-tag-bold-active-border: var(--sl-color-palette-info-800); + --sl-color-tag-bold-active-foreground: var(--sl-color-palette-info-300); + --sl-color-tag-bold-active-background: var(--sl-color-palette-info-900); + --sl-color-tag-bold-hover-border: var(--sl-color-palette-info-300); + --sl-color-tag-bold-hover-foreground: var(--sl-color-palette-black-base); + --sl-color-tag-bold-hover-background: var(--sl-color-palette-info-200); + --sl-color-tag-bold-idle-foreground: var(--sl-color-palette-black-base); + --sl-color-tag-bold-idle-background: var(--sl-color-palette-info-300); + --sl-color-tag-subtle-close-active-foreground: var(--sl-color-palette-accent-300); + --sl-color-tag-subtle-close-active-background: var(--sl-color-palette-accent-700); + --sl-color-tag-subtle-disabled-border: var(--sl-color-palette-neutral-800); + --sl-color-tag-subtle-disabled-foreground: var(--sl-color-palette-neutral-800); + --sl-color-tag-subtle-disabled-background: var(--sl-color-palette-neutral-500); + --sl-color-tag-subtle-active-foreground: var(--sl-color-palette-black-base); + --sl-color-tag-subtle-active-background: var(--sl-color-palette-info-300); + --sl-color-tag-subtle-hover-border: var(--sl-color-palette-info-700); + --sl-color-tag-subtle-hover-foreground: var(--sl-color-palette-accent-300); + --sl-color-tag-subtle-hover-background: var(--sl-color-palette-info-800); + --sl-color-tag-subtle-idle-border: var(--sl-color-palette-info-800); + --sl-color-tag-subtle-idle-foreground: var(--sl-color-palette-accent-300); + --sl-color-tag-subtle-idle-background: var(--sl-color-palette-info-900); + --sl-color-progressbar-background: var(--sl-color-palette-neutral-150); + --sl-color-progressbar-warning-track: var(--sl-color-palette-warning-500); + --sl-color-progressbar-indeterminate-track: var(--sl-color-palette-accent-base); + --sl-color-progressbar-error-track: var(--sl-color-palette-danger-500); + --sl-color-progressbar-success-track: var(--sl-color-palette-success-500); + --sl-color-progressbar-active-track: var(--sl-color-palette-accent-base); + --sl-color-field-button-default-disabled-foreground: var( + --sl-color-palette-neutral-100 + ); /* color.button.default.disabled.foreground */ + --sl-color-field-button-default-disabled-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.disabled.background */ + --sl-color-field-button-default-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.idle.background */ + --sl-color-href-disabled-foreground: var( + --sl-color-palette-neutral-200 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-href-active-foreground: var( + --sl-color-palette-accent-900 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-href-hover-foreground: var( + --sl-color-palette-accent-base + ); /* color.button.default.outline.hover.foreground */ + --sl-color-href-idle-foreground: var( + --sl-color-palette-neutral-500 + ); /* color.button.default.outline.idle.foreground */ + --sl-color-breadcrumb-divider: var( + --sl-color-palette-neutral-200 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-card-border: var(--sl-color-palette-neutral-800); + --sl-color-accordion-active-icon: var(--sl-color-palette-accent-200); + --sl-color-accordion-active-foreground: var(--sl-color-palette-accent-200); + --sl-color-accordion-active-header: color-mix( + in srgb, + var(--sl-color-palette-accent-base) calc(var(--sl-opacity-400) * 100%), + transparent + ); + --sl-color-accordion-disabled-icon: var(--sl-color-palette-neutral-400); + --sl-color-accordion-disabled-foreground: var(--sl-color-palette-neutral-400); + --sl-color-accordion-disabled-header: var(--sl-color-palette-neutral-900); + --sl-color-accordion-disabled-background: var(--sl-color-palette-neutral-900); + --sl-color-accordion-hover-icon: var(--sl-color-palette-accent-200); + --sl-color-accordion-hover-foreground: var(--sl-color-palette-accent-200); + --sl-color-accordion-hover-header: color-mix( + in srgb, + var(--sl-color-palette-accent-base) calc(var(--sl-opacity-200) * 100%), + transparent + ); + --sl-color-accordion-default-border: var(--sl-color-palette-neutral-700); + --sl-color-slds-checklist-link-active: var(--sl-color-palette-info-150); + --sl-color-slds-checklist-link-hover: var(--sl-color-palette-info-200); + --sl-color-slds-checklist-link-idle: var(--sl-color-palette-info-300); + --sl-color-slds-checklist-icon-success: var(--sl-color-palette-success-400); + --sl-color-slds-checklist-divider: var(--sl-color-palette-neutral-800); + --sl-color-slds-checklist-border: var(--sl-color-palette-neutral-800); + --sl-color-tab-active-border: var(--sl-color-palette-neutral-700); + --sl-color-tab-active-background: var(--sl-color-palette-neutral-800); + --sl-color-tab-tabbar-border: var(--sl-color-palette-neutral-700); + --sl-color-tab-disabled-border: var(--sl-color-palette-neutral-700); + --sl-color-tab-disabled-foreground: var(--sl-color-palette-neutral-400); + --sl-color-tab-disabled-background: var(--sl-color-palette-neutral-700); + --sl-color-tab-hover-border: var(--sl-color-palette-neutral-700); + --sl-color-tab-hover-background: var(--sl-color-palette-neutral-900); + --sl-color-tab-default-indicator: var(--sl-color-palette-accent-base); + --sl-color-tab-default-border: var(--sl-color-palette-neutral-700); + --sl-color-skeleton-pulse: var(--sl-color-palette-neutral-700); /* body.surface.100 */ + --sl-color-skeleton-effect: var(--sl-color-palette-neutral-800); /* body.surface.100 */ + --sl-color-skeleton-base: var(--sl-color-palette-neutral-700); /* body.surface.100 */ + --sl-color-select-listbox-border: var(--sl-color-palette-neutral-400); + --sl-color-select-selectbox-default-focus-border: var(--sl-color-palette-primary-base); + --sl-color-select-selectbox-default-active-border: var(--sl-color-palette-primary-base); + --sl-color-select-item-group-title-foreground: var(--sl-color-palette-neutral-200); + --sl-color-select-item-divider-line: var(--sl-color-palette-neutral-700); + --sl-color-select-item-disabled-indicator: var(--sl-color-palette-neutral-300); + --sl-color-select-item-disabled-foreground: var(--sl-color-palette-neutral-300); + --sl-color-select-item-focus-indicator: var(--sl-color-palette-accent-base); + --sl-color-select-item-focus-foreground: var(--sl-color-palette-neutral-600) + var(--sl-color-input-text-field-default-default-input-text); + --sl-color-select-item-active-indicator: var(--sl-color-palette-accent-base); + --sl-color-select-item-active-background: color-mix( + in srgb, + var(--sl-color-palette-accent-base) calc(var(--sl-opacity-700) * 100%), + transparent + ); + --sl-color-select-item-hover-indicator: var(--sl-color-palette-accent-base); + --sl-color-select-item-hover-background: color-mix( + in srgb, + var(--sl-color-palette-accent-base) calc(var(--sl-opacity-500) * 100%), + transparent + ); + --sl-color-select-item-default-indicator: var(--sl-color-palette-accent-base); + --sl-color-inline-message-danger-icon: var(--sl-color-palette-danger-base); + --sl-color-inline-message-danger-border: var(--sl-color-palette-danger-base); + --sl-color-inline-message-danger-foreground: var(--sl-color-palette-danger-base); + --sl-color-inline-message-warning-icon: var(--sl-color-palette-warning-base); + --sl-color-inline-message-warning-border: var(--sl-color-palette-warning-base); + --sl-color-inline-message-warning-foreground: var(--sl-color-palette-warning-base); + --sl-color-inline-message-success-icon: var(--sl-color-palette-success-base); + --sl-color-inline-message-success-border: var(--sl-color-palette-success-base); + --sl-color-inline-message-success-foreground: var(--sl-color-palette-success-base); + --sl-color-inline-message-info-icon: var(--sl-color-palette-info-300); + --sl-color-inline-message-info-border: var(--sl-color-palette-info-300); + --sl-color-inline-message-info-foreground: var(--sl-color-palette-info-300); + --sl-color-popover-border: var(--sl-color-palette-neutral-400); + --sl-color-focusring-inversed: var(--sl-color-palette-black-base); + --sl-color-focusring-default: var(--sl-color-palette-accent-300); + --sl-color-tooltip-border: var(--sl-color-palette-transparent-base); + --sl-color-tooltip-foreground: var(--sl-color-palette-black-base); + --sl-color-tooltip-background: var(--sl-color-palette-white-base); + --sl-color-input-field-label-icon-invalid: var( + --sl-color-palette-danger-200 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-icon-disabled: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-text-invalid: var( + --sl-color-palette-danger-200 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-text-disabled: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-icon-invalid: var( + --sl-color-palette-danger-200 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-icon-disabled: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-text-invalid: var( + --sl-color-palette-danger-200 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-text-disabled: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-focus-icon: var( + --sl-color-palette-success-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-active-icon: var( + --sl-color-palette-success-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-hover-icon: var( + --sl-color-palette-success-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-default-icon: var( + --sl-color-palette-success-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-background: var( + --sl-color-palette-neutral-900 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-border: var( + --sl-color-palette-danger-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-disabled-placeholder: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-disabled-input-text: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-disabled-icon: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-disabled-label: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-disabled-border: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-disabled-background: var( + --sl-color-palette-neutral-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-focus-border: var( + --sl-color-palette-primary-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-active-border: var( + --sl-color-palette-accent-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-hover-background: var( + --sl-color-palette-neutral-900 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-default-placeholder: var( + --sl-color-palette-neutral-300 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-default-border: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-focus-handle: var( + --sl-color-palette-black-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-active-handle: var( + --sl-color-palette-black-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-active-background: var( + --sl-color-palette-success-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-hover-handle: var( + --sl-color-palette-black-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-default-handle: var( + --sl-color-palette-black-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-default-background: var( + --sl-color-palette-success-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-disabled-handle: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-disabled-icon: var( + --sl-color-palette-neutral-700 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-disabled-text: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-disabled-background: var( + --sl-color-palette-neutral-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-active-handle: var( + --sl-color-palette-black-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-active-background: var( + --sl-color-palette-neutral-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-hover-handle: var( + --sl-color-palette-black-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-hover-background: var( + --sl-color-palette-neutral-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-default-handle: var( + --sl-color-palette-black-base + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-default-background: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-disabled-icon: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-disabled-label: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-active-background: var( + --sl-color-palette-success-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-default-background: var( + --sl-color-palette-success-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-active-border: var( + --sl-color-palette-success-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-hover-border: var( + --sl-color-palette-success-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-default-border: var( + --sl-color-palette-success-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-active-background: var( + --sl-color-palette-danger-150 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-hover-background: var( + --sl-color-palette-danger-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-hover-background: var( + --sl-color-palette-neutral-900 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-disabled-icon: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-disabled-label: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-disabled-background: var( + --sl-color-palette-neutral-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-focus-background: var( + --sl-color-palette-accent-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-active-background: var( + --sl-color-palette-accent-150 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-hover-background: var( + --sl-color-palette-accent-200 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-default-background: var( + --sl-color-palette-accent-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-disabled-icon: var( + --sl-color-palette-neutral-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-disabled-label: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-unchecked-disabled-border: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-disabled-background: var( + --sl-color-palette-neutral-700 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-active-border: var( + --sl-color-palette-accent-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-hover-border: var( + --sl-color-palette-accent-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-hover-background: var( + --sl-color-palette-neutral-900 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-default-border: var( + --sl-color-palette-neutral-400 + ); /* color.surface.solid.primary.background */ + --sl-color-surface-solid-accent-foreground: var( + --sl-color-palette-accent-50 + ); /* color.surface.solid.accent.foreground */ + --sl-color-surface-solid-accent-background: var( + --sl-color-palette-accent-base + ); /* color.surface.solid.accent.background */ + --sl-color-surface-solid-secondary-foreground: var( + --sl-color-palette-accent-50 + ); /* color.surface.solid.secondary.foreground */ + --sl-color-surface-solid-primary-foreground: var( + --sl-color-palette-primary-50 + ); /* color.surface.solid.primary.foreground */ + --sl-color-surface-solid-primary-background: var( + --sl-color-palette-primary-base + ); /* color.surface.solid.primary.background */ + --sl-color-button-info-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.active.border */ + --sl-color-button-info-link-active-foreground: var( + --sl-color-palette-info-150 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-info-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.active.background */ + --sl-color-button-info-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.hover.border */ + --sl-color-button-info-link-hover-foreground: var( + --sl-color-palette-info-200 + ); /* color.button.primary.outline.hover.foreground */ + --sl-color-button-info-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.hover.background */ + --sl-color-button-info-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.border */ + --sl-color-button-info-link-idle-foreground: var( + --sl-color-palette-info-300 + ); /* color.button.primary.outline.idle.foreground */ + --sl-color-button-info-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.background */ + --sl-color-button-info-ghost-active-border: var( + --sl-color-palette-info-200 + ); /* color.button.primary.outline.active.border */ + --sl-color-button-info-ghost-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-info-ghost-active-background: var( + --sl-color-palette-info-200 + ); /* color.button.primary.outline.active.background */ + --sl-color-button-info-ghost-hover-border: var( + --sl-color-palette-info-300 + ); /* color.button.primary.outline.hover.border */ + --sl-color-button-info-ghost-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.outline.hover.foreground */ + --sl-color-button-info-ghost-hover-background: var( + --sl-color-palette-info-300 + ); /* color.button.primary.outline.hover.background */ + --sl-color-button-info-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.border */ + --sl-color-button-info-ghost-idle-foreground: var( + --sl-color-palette-info-300 + ); /* color.button.primary.outline.idle.foreground */ + --sl-color-button-info-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.background */ + --sl-color-button-info-outline-active-border: var( + --sl-color-palette-info-200 + ); /* color.button.primary.outline.active.border */ + --sl-color-button-info-outline-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-info-outline-active-background: var( + --sl-color-palette-info-200 + ); /* color.button.primary.outline.active.background */ + --sl-color-button-info-outline-hover-border: var( + --sl-color-palette-info-300 + ); /* color.button.primary.outline.hover.border */ + --sl-color-button-info-outline-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.outline.hover.foreground */ + --sl-color-button-info-outline-hover-background: var( + --sl-color-palette-info-300 + ); /* color.button.primary.outline.hover.background */ + --sl-color-button-info-outline-idle-border: var( + --sl-color-palette-info-300 + ); /* color.button.primary.outline.idle.border */ + --sl-color-button-info-outline-idle-foreground: var( + --sl-color-palette-info-300 + ); /* color.button.primary.outline.idle.foreground */ + --sl-color-button-info-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.background */ + --sl-color-button-info-solid-active-border: var( + --sl-color-palette-info-200 + ); /* color.button.primary.default.active.border */ + --sl-color-button-info-solid-active-foreground: var( + --sl-color-palette-info-200 + ); /* color.button.primary.solid.active.foreground */ + --sl-color-button-info-solid-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.button.primary.solid.active.background */ + --sl-color-button-info-solid-hover-border: var( + --sl-color-palette-info-300 + ); /* color.button.primary.default.hover.border */ + --sl-color-button-info-solid-hover-foreground: var( + --sl-color-palette-info-300 + ); /* color.button.primary.solid.hover.foreground */ + --sl-color-button-info-solid-hover-background: var( + --sl-color-palette-black-base + ); /* color.button.primary.solid.hover.background */ + --sl-color-button-info-solid-idle-border: var( + --sl-color-palette-info-300 + ); /* color.button.primary.solid.idle.border */ + --sl-color-button-info-solid-idle-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.solid.idle.foreground */ + --sl-color-button-info-solid-idle-background: var( + --sl-color-palette-info-300 + ); /* color.button.primary.solid.idle.background */ + --sl-color-button-danger-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.active.border */ + --sl-color-button-danger-link-active-foreground: var( + --sl-color-palette-danger-150 + ); /* color.button.danger.outline.active.foreground */ + --sl-color-button-danger-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.active.background */ + --sl-color-button-danger-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.hover.border */ + --sl-color-button-danger-link-hover-foreground: var( + --sl-color-palette-danger-200 + ); /* color.button.danger.outline.hover.foreground */ + --sl-color-button-danger-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.hover.background */ + --sl-color-button-danger-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.border */ + --sl-color-button-danger-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.background */ + --sl-color-button-danger-ghost-active-border: var( + --sl-color-palette-danger-200 + ); /* color.button.danger.outline.active.border */ + --sl-color-button-danger-ghost-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.danger.outline.active.foreground */ + --sl-color-button-danger-ghost-active-background: var( + --sl-color-palette-danger-200 + ); /* color.button.danger.outline.active.background */ + --sl-color-button-danger-ghost-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.danger.outline.hover.foreground */ + --sl-color-button-danger-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.border */ + --sl-color-button-danger-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.background */ + --sl-color-button-danger-outline-active-border: var( + --sl-color-palette-danger-200 + ); /* color.button.danger.outline.active.border */ + --sl-color-button-danger-outline-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.danger.outline.active.foreground */ + --sl-color-button-danger-outline-active-background: var( + --sl-color-palette-danger-200 + ); /* color.button.danger.outline.active.background */ + --sl-color-button-danger-outline-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.danger.outline.hover.foreground */ + --sl-color-button-danger-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.danger.outline.idle.background */ + --sl-color-button-danger-solid-active-border: var( + --sl-color-palette-danger-200 + ); /* color.button.danger.solid.active.border */ + --sl-color-button-danger-solid-active-foreground: var( + --sl-color-palette-danger-200 + ); /* color.button.danger.solid.active.foreground */ + --sl-color-button-danger-solid-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.button.danger.solid.active.background */ + --sl-color-button-danger-solid-hover-background: var( + --sl-color-palette-black-base + ); /* color.button.danger.solid.hover.background */ + --sl-color-button-danger-solid-idle-foreground: var( + --sl-color-palette-black-base + ); /* color.button.danger.solid.idle.foreground */ + --sl-color-button-warning-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.active.border */ + --sl-color-button-warning-link-active-foreground: var( + --sl-color-palette-warning-200 + ); /* color.button.warning.outline.active.foreground */ + --sl-color-button-warning-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.active.background */ + --sl-color-button-warning-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.hover.border */ + --sl-color-button-warning-link-hover-foreground: var( + --sl-color-palette-warning-300 + ); /* color.button.warning.outline.hover.foreground */ + --sl-color-button-warning-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.hover.background */ + --sl-color-button-warning-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.border */ + --sl-color-button-warning-link-idle-foreground: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.outline.idle.foreground */ + --sl-color-button-warning-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.background */ + --sl-color-button-warning-ghost-active-border: var( + --sl-color-palette-warning-300 + ); /* color.button.warning.outline.active.border */ + --sl-color-button-warning-ghost-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.warning.outline.active.foreground */ + --sl-color-button-warning-ghost-active-background: var( + --sl-color-palette-warning-300 + ); /* color.button.warning.outline.active.background */ + --sl-color-button-warning-ghost-hover-border: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.outline.hover.border */ + --sl-color-button-warning-ghost-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.warning.outline.hover.foreground */ + --sl-color-button-warning-ghost-hover-background: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.outline.hover.background */ + --sl-color-button-warning-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.border */ + --sl-color-button-warning-ghost-idle-foreground: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.outline.idle.foreground */ + --sl-color-button-warning-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.background */ + --sl-color-button-warning-outline-active-border: var( + --sl-color-palette-warning-300 + ); /* color.button.warning.outline.active.border */ + --sl-color-button-warning-outline-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.warning.outline.active.foreground */ + --sl-color-button-warning-outline-active-background: var( + --sl-color-palette-warning-300 + ); /* color.button.warning.outline.active.background */ + --sl-color-button-warning-outline-hover-border: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.outline.hover.border */ + --sl-color-button-warning-outline-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.warning.outline.hover.foreground */ + --sl-color-button-warning-outline-hover-background: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.outline.hover.background */ + --sl-color-button-warning-outline-idle-border: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.outline.idle.border */ + --sl-color-button-warning-outline-idle-foreground: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.outline.idle.foreground */ + --sl-color-button-warning-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.warning.outline.idle.background */ + --sl-color-button-warning-solid-active-border: var( + --sl-color-palette-warning-300 + ); /* color.button.warning.solid.active.border */ + --sl-color-button-warning-solid-active-foreground: var( + --sl-color-palette-warning-300 + ); /* color.button.warning.solid.active.foreground */ + --sl-color-button-warning-solid-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.button.warning.solid.active.background */ + --sl-color-button-warning-solid-hover-border: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.solid.hover.border */ + --sl-color-button-warning-solid-hover-foreground: var( + --sl-color-palette-warning-400 + ); /* color.button.warning.solid.hover.foreground */ + --sl-color-button-warning-solid-hover-background: var( + --sl-color-palette-black-base + ); /* color.button.warning.solid.hover.background */ + --sl-color-button-warning-solid-idle-border: var( + --sl-color-palette-warning-400 + ); /* color.button.info.warning.idle.border */ + --sl-color-button-warning-solid-idle-foreground: var( + --sl-color-palette-black-base + ); /* color.button.warning.solid.idle.foreground */ + --sl-color-button-warning-solid-idle-background: var( + --sl-color-palette-warning-400 + ); /* color.button.info.warning.idle.background */ + --sl-color-button-success-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.active.border */ + --sl-color-button-success-link-active-foreground: var( + --sl-color-palette-success-150 + ); /* color.button.success.outline.active.foreground */ + --sl-color-button-success-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.active.background */ + --sl-color-button-success-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.hover.border */ + --sl-color-button-success-link-hover-foreground: var( + --sl-color-palette-success-200 + ); /* color.button.success.outline.hover.foreground */ + --sl-color-button-success-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.hover.background */ + --sl-color-button-success-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.border */ + --sl-color-button-success-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.background */ + --sl-color-button-success-ghost-active-border: var( + --sl-color-palette-success-200 + ); /* color.button.success.outline.active.border */ + --sl-color-button-success-ghost-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.success.outline.active.foreground */ + --sl-color-button-success-ghost-active-background: var( + --sl-color-palette-success-200 + ); /* color.button.success.outline.active.background */ + --sl-color-button-success-ghost-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.success.outline.hover.foreground */ + --sl-color-button-success-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.border */ + --sl-color-button-success-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.background */ + --sl-color-button-success-outline-active-border: var( + --sl-color-palette-success-200 + ); /* color.button.success.outline.active.border */ + --sl-color-button-success-outline-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.success.outline.active.foreground */ + --sl-color-button-success-outline-active-background: var( + --sl-color-palette-success-200 + ); /* color.button.success.outline.active.background */ + --sl-color-button-success-outline-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.success.outline.hover.foreground */ + --sl-color-button-success-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.success.outline.idle.background */ + --sl-color-button-success-solid-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.button.success.solid.active.background */ + --sl-color-button-success-solid-hover-background: var( + --sl-color-palette-black-base + ); /* color.button.success.solid.hover.background */ + --sl-color-button-success-solid-idle-foreground: var( + --sl-color-palette-black-base + ); /* color.button.success.solid.idle.foreground */ + --sl-color-button-primary-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.active.border */ + --sl-color-button-primary-link-active-foreground: var( + --sl-color-palette-accent-150 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-primary-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.active.background */ + --sl-color-button-primary-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.hover.border */ + --sl-color-button-primary-link-hover-foreground: var( + --sl-color-palette-accent-200 + ); /* color.button.primary.outline.hover.foreground */ + --sl-color-button-primary-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.hover.background */ + --sl-color-button-primary-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.border */ + --sl-color-button-primary-link-idle-foreground: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.outline.idle.foreground */ + --sl-color-button-primary-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.background */ + --sl-color-button-primary-ghost-active-border: var( + --sl-color-palette-accent-200 + ); /* color.button.primary.outline.active.border */ + --sl-color-button-primary-ghost-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-primary-ghost-active-background: var( + --sl-color-palette-accent-200 + ); /* color.button.primary.outline.active.background */ + --sl-color-button-primary-ghost-hover-border: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.outline.hover.border */ + --sl-color-button-primary-ghost-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.outline.hover.foreground */ + --sl-color-button-primary-ghost-hover-background: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.outline.hover.background */ + --sl-color-button-primary-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.border */ + --sl-color-button-primary-ghost-idle-foreground: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.outline.idle.foreground */ + --sl-color-button-primary-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.background */ + --sl-color-button-primary-outline-active-border: var( + --sl-color-palette-accent-200 + ); /* color.button.primary.outline.active.border */ + --sl-color-button-primary-outline-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-primary-outline-active-background: var( + --sl-color-palette-accent-200 + ); /* color.button.primary.outline.active.background */ + --sl-color-button-primary-outline-hover-border: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.outline.hover.border */ + --sl-color-button-primary-outline-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.outline.hover.foreground */ + --sl-color-button-primary-outline-hover-background: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.outline.hover.background */ + --sl-color-button-primary-outline-idle-border: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.outline.idle.border */ + --sl-color-button-primary-outline-idle-foreground: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.outline.idle.foreground */ + --sl-color-button-primary-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.primary.outline.idle.background */ + --sl-color-button-primary-solid-active-border: var( + --sl-color-palette-accent-200 + ); /* color.button.primary.default.active.border */ + --sl-color-button-primary-solid-active-foreground: var( + --sl-color-palette-accent-200 + ); /* color.button.primary.solid.active.foreground */ + --sl-color-button-primary-solid-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.button.primary.solid.active.background */ + --sl-color-button-primary-solid-hover-border: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.default.hover.border */ + --sl-color-button-primary-solid-hover-foreground: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.solid.hover.foreground */ + --sl-color-button-primary-solid-hover-background: var( + --sl-color-palette-black-base + ); /* color.button.primary.solid.hover.background */ + --sl-color-button-primary-solid-idle-border: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.solid.idle.border */ + --sl-color-button-primary-solid-idle-foreground: var( + --sl-color-palette-black-base + ); /* color.button.primary.solid.idle.foreground */ + --sl-color-button-primary-solid-idle-background: var( + --sl-color-palette-accent-300 + ); /* color.button.primary.solid.idle.background */ + --sl-color-button-default-link-disabled-border: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-link-disabled-foreground: var( + --sl-color-palette-neutral-500 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-link-disabled-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-default-link-active-border: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-link-active-foreground: var( + --sl-color-palette-neutral-100 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-link-active-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-link-hover-border: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-link-hover-foreground: var( + --sl-color-palette-neutral-150 + ); /* color.button.default.outline.hover.foreground */ + --sl-color-button-default-link-hover-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-link-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-link-idle-foreground: var( + --sl-color-palette-primary-200 + ); /* color.button.default.outline.idle.foreground */ + --sl-color-button-default-link-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-ghost-selected-disabled-border: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-ghost-selected-disabled-foreground: var( + --sl-color-palette-neutral-300 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-ghost-selected-disabled-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-default-ghost-selected-active-border: var( + --sl-color-palette-neutral-800 + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-ghost-selected-active-foreground: var( + --sl-color-palette-primary-50 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-ghost-selected-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-ghost-selected-hover-border: var( + --sl-color-palette-neutral-900 + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-ghost-selected-hover-foreground: var( + --sl-color-palette-primary-50 + ); /* color.button.default.outline.hover.foreground */ + --sl-color-button-default-ghost-selected-hover-background: var( + --sl-color-palette-neutral-900 + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-ghost-selected-idle-border: var( + --sl-color-palette-neutral-900 + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-ghost-selected-idle-foreground: var( + --sl-color-palette-primary-50 + ); /* color.button.default.outline.idle.foreground */ + --sl-color-button-default-ghost-selected-idle-background: var( + --sl-color-palette-neutral-900 + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-ghost-disabled-border: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-ghost-disabled-foreground: var( + --sl-color-palette-neutral-300 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-ghost-disabled-background: var( + --sl-color-palette-transparent-base + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-default-ghost-active-border: var( + --sl-color-palette-neutral-800 + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-ghost-active-foreground: var( + --sl-color-palette-neutral-200 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-ghost-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-ghost-hover-border: var( + --sl-color-palette-neutral-900 + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-ghost-hover-foreground: var( + --sl-color-palette-neutral-200 + ); /* color.button.default.outline.hover.foreground */ + --sl-color-button-default-ghost-hover-background: var( + --sl-color-palette-neutral-900 + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-ghost-idle-border: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-ghost-idle-foreground: var( + --sl-color-palette-neutral-200 + ); /* color.button.default.outline.idle.foreground */ + --sl-color-button-default-ghost-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-outline-selected-active-border: var( + --sl-color-palette-primary-50 + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-outline-selected-active-foreground: var( + --sl-color-palette-neutral-50 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-outline-selected-active-background: var( + --sl-color-palette-primary-800 + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-outline-selected-hover-border: var( + --sl-color-palette-neutral-50 + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-outline-selected-hover-foreground: var( + --sl-color-palette-neutral-50 + ); /* color.button.default.outline.hover.foreground */ + --sl-color-button-default-outline-selected-hover-background: var( + --sl-color-palette-neutral-900 + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-outline-selected-idle-border: var( + --sl-color-palette-primary-50 + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-outline-selected-idle-foreground: var( + --sl-color-palette-neutral-50 + ); /* color.button.default.outline.idle.foreground */ + --sl-color-button-default-outline-selected-idle-background: var( + --sl-color-palette-neutral-900 + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-outline-disabled-border: var( + --sl-color-palette-neutral-500 + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-outline-disabled-foreground: var( + --sl-color-palette-neutral-500 + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-outline-disabled-background: var( + --sl-color-palette-neutral-800 + ); /* color.button.info.outline.disabled.background */ + --sl-color-button-default-outline-active-border: var( + --sl-color-palette-neutral-200 + ); /* color.button.default.outline.active.border */ + --sl-color-button-default-outline-active-foreground: var( + --sl-color-palette-neutral-200 + ); /* color.button.primary.outline.active.foreground */ + --sl-color-button-default-outline-active-background: var( + --sl-color-palette-neutral-800 + ); /* color.button.default.outline.active.background */ + --sl-color-button-default-outline-hover-border: var( + --sl-color-palette-neutral-200 + ); /* color.button.default.outline.hover.border */ + --sl-color-button-default-outline-hover-foreground: var( + --sl-color-palette-neutral-200 + ); /* color.button.default.outline.hover.foreground */ + --sl-color-button-default-outline-hover-background: var( + --sl-color-palette-neutral-900 + ); /* color.button.default.outline.hover.background */ + --sl-color-button-default-outline-idle-border: var( + --sl-color-palette-neutral-200 + ); /* color.button.default.outline.idle.border */ + --sl-color-button-default-outline-idle-foreground: var( + --sl-color-palette-neutral-200 + ); /* color.button.default.outline.idle.foreground */ + --sl-color-button-default-outline-idle-background: var( + --sl-color-palette-transparent-base + ); /* color.button.default.outline.idle.background */ + --sl-color-button-default-solid-disabled-border: var( + --sl-color-palette-neutral-500 + ); /* color.button.default.disabled.border */ + --sl-color-button-default-solid-disabled-foreground: var( + --sl-color-palette-neutral-800 + ); /* color.button.default.disabled.foreground */ + --sl-color-button-default-solid-disabled-background: var( + --sl-color-palette-neutral-500 + ); /* color.button.default.disabled.background */ + --sl-color-button-default-solid-active-border: var( + --sl-color-palette-primary-100 + ); /* color.button.default.active.border */ + --sl-color-button-default-solid-active-foreground: var( + --sl-color-palette-black-base + ); /* color.button.default.active.foreground */ + --sl-color-button-default-solid-active-background: var( + --sl-color-palette-primary-100 + ); /* color.button.default.active.background */ + --sl-color-button-default-solid-hover-border: var( + --sl-color-palette-primary-150 + ); /* color.button.default.hover.border */ + --sl-color-button-default-solid-hover-foreground: var( + --sl-color-palette-black-base + ); /* color.button.default.hover.foreground */ + --sl-color-button-default-solid-hover-background: var( + --sl-color-palette-neutral-150 + ); /* color.button.default.hover.background */ + --sl-color-button-default-solid-idle-border: var( + --sl-color-palette-primary-200 + ); /* color.button.default.idle.border */ + --sl-color-button-default-solid-idle-foreground: var( + --sl-color-palette-black-base + ); /* color.button.default.idle.foreground */ + --sl-color-button-default-solid-idle-background: var( + --sl-color-palette-primary-200 + ); /* color.button.default.idle.background */ + --sl-color-badge-subtle-primary-foreground: var(--sl-color-palette-neutral-200); + --sl-color-badge-subtle-primary-background: var(--sl-color-palette-primary-800); + --sl-color-badge-subtle-neutral-foreground: var(--sl-color-palette-neutral-200); + --sl-color-badge-subtle-neutral-background: var(--sl-color-palette-neutral-800); + --sl-color-badge-subtle-accent-foreground: var(--sl-color-palette-accent-300); + --sl-color-badge-subtle-accent-background: var(--sl-color-palette-accent-800); + --sl-color-badge-subtle-warning-foreground: var(--sl-color-palette-warning-400); + --sl-color-badge-subtle-warning-background: var(--sl-color-palette-warning-900); + --sl-color-badge-subtle-success-background: var(--sl-color-palette-success-800); + --sl-color-badge-subtle-danger-foreground: var(--sl-color-palette-danger-base); + --sl-color-badge-subtle-danger-background: var(--sl-color-palette-danger-800); + --sl-color-badge-subtle-info-foreground: var(--sl-color-palette-info-300); + --sl-color-badge-subtle-info-background: var(--sl-color-palette-info-800); + --sl-color-badge-bold-primary-foreground: var(--sl-color-palette-black-base); + --sl-color-badge-bold-primary-background: var(--sl-color-palette-primary-50); + --sl-color-badge-bold-neutral-foreground: var(--sl-color-palette-black-base); + --sl-color-badge-bold-neutral-background: var(--sl-color-palette-neutral-400); + --sl-color-badge-bold-accent-foreground: var(--sl-color-palette-black-base); + --sl-color-badge-bold-accent-background: var(--sl-color-palette-accent-300); + --sl-color-badge-bold-warning-foreground: var(--sl-color-palette-black-base); + --sl-color-badge-bold-warning-background: var(--sl-color-palette-warning-base); + --sl-color-badge-bold-success-foreground: var(--sl-color-palette-black-base); + --sl-color-badge-bold-success-background: var(--sl-color-palette-success-base); + --sl-color-badge-bold-danger-foreground: var(--sl-color-palette-black-base); + --sl-color-badge-bold-danger-background: var(--sl-color-palette-danger-base); + --sl-color-badge-bold-info-foreground: var(--sl-color-palette-black-base); + --sl-color-badge-bold-info-background: var(--sl-color-palette-info-300); + --sl-color-avatar-foreground: var(--sl-color-palette-black-base); + --sl-color-avatar-background: var(--sl-color-palette-accent-300); + --sl-box-shadow-none: 0 0 0 0 var(--sl-color-palette-transparent-base); /* boxShadow.none */ + --sl-box-shadow-focus: 0 0 0 3px rgba(51, 102, 255, var(--sl-opacity-800)); + --sl-color-tag-bold-close-active-border: var(--sl-color-tag-bold-close-active-background); + --sl-color-tag-bold-close-hover-foreground: var(--sl-color-tag-bold-hover-foreground); + --sl-color-tag-bold-close-hover-background: var(--sl-color-palette-info-400); + --sl-color-tag-bold-idle-border: var(--sl-color-palette-info-400); + --sl-color-tag-subtle-close-active-border: var(--sl-color-tag-subtle-close-active-background); + --sl-color-tag-subtle-close-hover-foreground: var(--sl-color-tag-subtle-hover-foreground); + --sl-color-tag-subtle-close-hover-background: var(--sl-color-tag-subtle-hover-background); + --sl-color-tag-subtle-active-border: var(--sl-color-palette-info-400); + --sl-color-field-button-default-active-foreground: var( + --sl-body-foreground + ); /* color.button.default.active.foreground */ + --sl-color-field-button-default-hover-foreground: var( + --sl-body-foreground + ); /* color.button.default.hover.foreground */ + --sl-color-field-button-default-idle-foreground: var(--sl-body-foreground); + --sl-color-card-foreground: var(--sl-body-foreground); + --sl-color-card-background: var(--sl-body-background); + --sl-color-accordion-active-border: var(--sl-color-accordion-default-border); + --sl-color-accordion-active-background: var(--sl-body-background); + --sl-color-accordion-disabled-border: var(--sl-color-accordion-default-border); + --sl-color-accordion-hover-border: var(--sl-color-accordion-default-border); + --sl-color-accordion-hover-background: var(--sl-body-background); + --sl-color-accordion-default-icon: var(--sl-body-foreground); + --sl-color-accordion-default-foreground: var(--sl-body-foreground); + --sl-color-accordion-default-header: var(--sl-body-background); + --sl-color-accordion-default-background: var(--sl-body-background); + --sl-color-slds-checklist-icon-danger: var(--sl-color-palette-danger-300); + --sl-color-slds-checklist-foreground: var(--sl-body-foreground); + --sl-color-slds-checklist-background: var(--sl-body-background); + --sl-color-tab-content-foreground: var(--sl-body-foreground); + --sl-color-tab-content-background: var(--sl-body-background); + --sl-color-tab-active-foreground: var(--sl-body-foreground); + --sl-color-tab-tabbar-foreground: var(--sl-body-foreground); + --sl-color-tab-tabbar-background: var(--sl-body-background); + --sl-color-tab-hover-foreground: var(--sl-body-foreground); + --sl-color-tab-default-foreground: var(--sl-body-foreground); + --sl-color-tab-default-background: var(--sl-body-background); + --sl-color-skeleton-shimmer: linear-gradient + ( + 90deg, + var(--sl-color-skeleton-base) 0%, + var(--sl-color-skeleton-base) 10%, + var(--sl-color-skeleton-effect) 50%, + var(--sl-color-skeleton-base) 90%, + var(--sl-color-skeleton-base) 100% + ); /* body.surface.100 */ + --sl-color-select-listbox-background: var(--sl-body-background); + --sl-color-select-selectbox-valid-disabled-placeholder: var( + --sl-color-input-text-field-default-disabled-placeholder + ); + --sl-color-select-selectbox-valid-focus-icon: var(--sl-color-input-text-field-valid-focus-icon); + --sl-color-select-selectbox-valid-active-icon: var(--sl-color-input-text-field-valid-active-icon); + --sl-color-select-selectbox-valid-hover-icon: var(--sl-color-input-text-field-valid-hover-icon); + --sl-color-select-selectbox-valid-default-icon: var(--sl-color-input-text-field-valid-default-icon); + --sl-color-select-selectbox-invalid-hover-background: var(--sl-color-input-text-field-invalid-hover-background); + --sl-color-select-selectbox-invalid-default-border: var(--sl-color-input-text-field-invalid-default-border); + --sl-color-select-selectbox-default-disabled-placeholder: var( + --sl-color-input-text-field-default-disabled-placeholder + ); + --sl-color-select-selectbox-default-disabled-input-text: var( + --sl-color-input-text-field-default-disabled-input-text + ); + --sl-color-select-selectbox-default-disabled-icon: var(--sl-color-input-text-field-default-disabled-icon); + --sl-color-select-selectbox-default-disabled-label: var(--sl-color-input-text-field-default-disabled-label); + --sl-color-select-selectbox-default-disabled-border: var(--sl-color-input-text-field-default-disabled-border); + --sl-color-select-selectbox-default-disabled-background: var( + --sl-color-input-text-field-default-disabled-background + ); + --sl-color-select-selectbox-default-hover-background: var(--sl-color-input-text-field-default-hover-background); + --sl-color-select-selectbox-default-default-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); + --sl-color-select-selectbox-default-default-border: var(--sl-color-input-text-field-default-default-border); + --sl-color-select-item-disabled-border: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-disabled-background: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-focus-border: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-focus-background: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-100) * 100%), + transparent + ); + --sl-color-select-item-active-border: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-hover-border: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-default-border: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-select-item-default-background: color-mix( + in srgb, + var(--sl-body-background) calc(var(--sl-opacity-transparent) * 100%), + transparent + ); + --sl-color-inline-message-danger-background: var(--sl-body-background); + --sl-color-inline-message-warning-background: var(--sl-body-background); + --sl-color-inline-message-success-background: var(--sl-body-background); + --sl-color-inline-message-info-background: var(--sl-body-background); + --sl-color-popover-foreground: var(--sl-body-foreground); + --sl-color-popover-background: var(--sl-body-background); + --sl-color-dialog-border: var(--sl-body-background); /* color.surface.solid.primary.background */ + --sl-color-dialog-foreground: var(--sl-body-foreground); /* color.surface.solid.primary.background */ + --sl-color-dialog-background: var(--sl-body-background); /* color.surface.solid.primary.background */ + --sl-color-input-field-label-hint-invalid: var( + --sl-color-input-field-label-text-invalid + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-hint-disabled: var( + --sl-color-input-field-label-text-disabled + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-icon-default: var(--sl-body-foreground); /* color.surface.solid.primary.foreground */ + --sl-color-input-field-label-text-default: var(--sl-body-foreground); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-icon-default: var(--sl-body-foreground); /* color.surface.solid.primary.foreground */ + --sl-color-input-helper-text-default: var(--sl-body-foreground); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-disabled-input-text: var( + --sl-color-input-text-field-default-disabled-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-disabled-icon: var( + --sl-color-input-text-field-default-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-disabled-label: var( + --sl-color-input-text-field-default-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-disabled-border: var( + --sl-color-input-text-field-default-disabled-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-disabled-background: var( + --sl-color-input-text-field-default-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-focus-border: var( + --sl-color-input-text-field-default-focus-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-active-border: var( + --sl-color-input-text-field-default-active-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-hover-background: var( + --sl-color-input-text-field-default-hover-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-default-border: var( + --sl-color-input-text-field-default-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-placeholder: var( + --sl-color-input-text-field-default-disabled-placeholder + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-input-text: var( + --sl-color-input-text-field-default-disabled-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-icon: var( + --sl-color-input-text-field-default-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-label: var( + --sl-color-input-text-field-default-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-invalid-disabled-border: var( + --sl-color-input-text-field-default-disabled-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-disabled-background: var( + --sl-color-input-text-field-default-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-background: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-icon: var( + --sl-color-palette-danger-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-border: var( + --sl-color-palette-danger-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-icon: var( + --sl-color-input-text-field-invalid-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-background: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-focus-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-focus-icon: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-active-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-active-icon: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-active-background: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-hover-placeholder: var( + --sl-color-input-text-field-default-default-placeholder + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-hover-icon: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-hover-border: var( + --sl-color-input-text-field-default-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-default-input-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-default-icon: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-default-background: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-disabled-handle: var( + --sl-color-input-switch-default-unchecked-disabled-handle + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-disabled-icon: var( + --sl-color-input-switch-default-unchecked-disabled-icon + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-disabled-text: var( + --sl-color-input-switch-default-unchecked-disabled-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-disabled-background: var( + --sl-color-input-switch-default-unchecked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-focus-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-focus-background: var( + --sl-color-input-switch-default-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-active-icon: var( + --sl-color-input-switch-default-checked-active-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-active-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-hover-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-hover-background: var( + --sl-color-palette-success-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-checked-default-icon: var( + --sl-color-input-switch-default-checked-default-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-default-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-focus-handle: var( + --sl-color-input-switch-default-unchecked-default-handle + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-focus-background: var( + --sl-color-input-switch-default-unchecked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-active-icon: var( + --sl-color-input-switch-default-unchecked-active-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-hover-icon: var( + --sl-color-input-switch-default-unchecked-hover-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-default-icon: var( + --sl-color-input-switch-default-unchecked-default-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-default-text: var( + --sl-body-foreground + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-disabled-background: var( + --sl-color-input-option-default-checked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-focus-background: var( + --sl-color-input-option-valid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-active-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-active-border: var( + --sl-color-input-option-valid-checked-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-hover-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-hover-background: var( + --sl-color-palette-success-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-default-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-checked-default-border: var( + --sl-color-input-option-valid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-disabled-icon: var( + --sl-color-input-option-default-unchecked-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-disabled-label: var( + --sl-color-input-option-default-unchecked-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-unchecked-disabled-border: var( + --sl-color-input-option-default-unchecked-disabled-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-disabled-background: var( + --sl-color-input-option-default-unchecked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-focus-icon: var( + --sl-color-input-option-valid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-unchecked-focus-border: var( + --sl-color-input-option-valid-unchecked-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-active-icon: var( + --sl-color-input-option-valid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-unchecked-active-background: var( + --sl-color-input-option-default-unchecked-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-hover-icon: var( + --sl-color-input-option-valid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-unchecked-hover-background: var( + --sl-color-input-option-default-unchecked-hover-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-default-icon: var( + --sl-color-input-option-valid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-disabled-icon: var( + --sl-color-input-option-default-checked-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-disabled-label: var( + --sl-color-input-option-default-checked-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-disabled-background: var( + --sl-color-input-option-default-checked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-active-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-active-border: var( + --sl-color-input-option-invalid-checked-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-hover-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-hover-border: var( + --sl-color-input-option-invalid-checked-hover-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-default-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-default-background: var( + --sl-color-palette-danger-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-disabled-icon: var( + --sl-color-input-option-default-unchecked-disabled-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-disabled-label: var( + --sl-color-input-option-default-unchecked-disabled-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-unchecked-disabled-border: var( + --sl-color-input-option-default-unchecked-disabled-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-disabled-background: var( + --sl-color-input-option-default-unchecked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-unchecked-active-border: var( + --sl-color-palette-danger-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-unchecked-hover-border: var( + --sl-color-palette-danger-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-unchecked-default-border: var( + --sl-color-palette-danger-300 + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-default-background: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-disabled-border: var( + --sl-color-input-option-default-checked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-focus-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-focus-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-focus-border: var( + --sl-color-input-option-default-checked-focus-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-active-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-active-border: var( + --sl-color-input-option-default-checked-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-hover-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-hover-border: var( + --sl-color-input-option-default-checked-hover-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-default-icon: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-checked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-checked-default-border: var( + --sl-color-input-option-default-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-focus-icon: var( + --sl-color-input-option-default-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-focus-border: var( + --sl-color-input-option-default-unchecked-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-active-icon: var( + --sl-color-input-option-default-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-active-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-unchecked-hover-icon: var( + --sl-color-input-option-default-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-hover-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-unchecked-default-icon: var( + --sl-color-input-option-default-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-default-label: var( + --sl-body-foreground + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-unchecked-default-background: var( + --sl-body-background + ); /* color.surface.solid.primary.background */ + --sl-color-surface-solid-secondary-background: var( + --sl-color-palette-accent-400 + ); /* color.surface.solid.secondary.background */ + --sl-color-button-info-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.primary.outline.disabled.border */ + --sl-color-button-info-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.primary.outline.disabled.foreground */ + --sl-color-button-info-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.primary.outline.disabled.background */ + --sl-color-button-info-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.primary.outline.disabled.border */ + --sl-color-button-info-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.primary.outline.disabled.foreground */ + --sl-color-button-info-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.primary.outline.disabled.background */ + --sl-color-button-info-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.primary.outline.disabled.border */ + --sl-color-button-info-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.primary.outline.disabled.foreground */ + --sl-color-button-info-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.primary.outline.disabled.background */ + --sl-color-button-info-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.primary.default.disabled.border */ + --sl-color-button-info-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.primary.solid.disabled.foreground */ + --sl-color-button-info-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.primary.solid.disabled.background */ + --sl-color-button-danger-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.danger.outline.disabled.border */ + --sl-color-button-danger-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.danger.outline.disabled.foreground */ + --sl-color-button-danger-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.danger.outline.disabled.background */ + --sl-color-button-danger-link-idle-foreground: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.outline.idle.foreground */ + --sl-color-button-danger-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.danger.outline.disabled.border */ + --sl-color-button-danger-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.danger.outline.disabled.foreground */ + --sl-color-button-danger-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.danger.outline.disabled.background */ + --sl-color-button-danger-ghost-hover-border: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.outline.hover.border */ + --sl-color-button-danger-ghost-hover-background: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.outline.hover.background */ + --sl-color-button-danger-ghost-idle-foreground: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.outline.idle.foreground */ + --sl-color-button-danger-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.danger.outline.disabled.border */ + --sl-color-button-danger-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.danger.outline.disabled.foreground */ + --sl-color-button-danger-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.danger.outline.disabled.background */ + --sl-color-button-danger-outline-hover-border: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.outline.hover.border */ + --sl-color-button-danger-outline-hover-background: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.outline.hover.background */ + --sl-color-button-danger-outline-idle-border: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.outline.idle.border */ + --sl-color-button-danger-outline-idle-foreground: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.outline.idle.foreground */ + --sl-color-button-danger-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.danger.default.disabled.border */ + --sl-color-button-danger-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.danger.solid.disabled.foreground */ + --sl-color-button-danger-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.danger.solid.disabled.background */ + --sl-color-button-danger-solid-hover-border: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.solid.hover.border */ + --sl-color-button-danger-solid-hover-foreground: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.solid.hover.foreground */ + --sl-color-button-danger-solid-idle-border: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.warning.idle.border */ + --sl-color-button-danger-solid-idle-background: var( + --sl-color-palette-danger-300 + ); /* color.button.danger.warning.idle.background */ + --sl-color-button-warning-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.warning.outline.disabled.border */ + --sl-color-button-warning-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.warning.outline.disabled.foreground */ + --sl-color-button-warning-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.warning.outline.disabled.background */ + --sl-color-button-warning-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.warning.outline.disabled.border */ + --sl-color-button-warning-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.warning.outline.disabled.foreground */ + --sl-color-button-warning-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.warning.outline.disabled.background */ + --sl-color-button-warning-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.warning.outline.disabled.border */ + --sl-color-button-warning-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.warning.outline.disabled.foreground */ + --sl-color-button-warning-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.warning.outline.disabled.background */ + --sl-color-button-warning-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.warning.default.disabled.border */ + --sl-color-button-warning-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.warning.solid.disabled.foreground */ + --sl-color-button-warning-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.warning.solid.disabled.background */ + --sl-color-button-success-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.success.outline.disabled.border */ + --sl-color-button-success-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.success.outline.disabled.foreground */ + --sl-color-button-success-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.success.outline.disabled.background */ + --sl-color-button-success-link-idle-foreground: var( + --sl-color-palette-success-300 + ); /* color.button.success.outline.idle.foreground */ + --sl-color-button-success-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.success.outline.disabled.border */ + --sl-color-button-success-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.success.outline.disabled.foreground */ + --sl-color-button-success-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.success.outline.disabled.background */ + --sl-color-button-success-ghost-hover-border: var( + --sl-color-palette-success-300 + ); /* color.button.success.outline.hover.border */ + --sl-color-button-success-ghost-hover-background: var( + --sl-color-palette-success-300 + ); /* color.button.success.outline.hover.background */ + --sl-color-button-success-ghost-idle-foreground: var( + --sl-color-palette-success-300 + ); /* color.button.success.outline.idle.foreground */ + --sl-color-button-success-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.success.outline.disabled.border */ + --sl-color-button-success-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.success.outline.disabled.foreground */ + --sl-color-button-success-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.success.outline.disabled.background */ + --sl-color-button-success-outline-hover-border: var( + --sl-color-palette-success-300 + ); /* color.button.success.outline.hover.border */ + --sl-color-button-success-outline-hover-background: var( + --sl-color-palette-success-300 + ); /* color.button.success.outline.hover.background */ + --sl-color-button-success-outline-idle-border: var( + --sl-color-palette-success-300 + ); /* color.button.success.outline.idle.border */ + --sl-color-button-success-outline-idle-foreground: var( + --sl-color-palette-success-300 + ); /* color.button.success.outline.idle.foreground */ + --sl-color-button-success-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.success.solid.disabled.border */ + --sl-color-button-success-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.success.solid.disabled.foreground */ + --sl-color-button-success-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.success.solid.disabled.background */ + --sl-color-button-success-solid-active-border: var( + --sl-color-palette-success-300 + ); /* color.button.success.solid.active.border */ + --sl-color-button-success-solid-active-foreground: var( + --sl-color-palette-success-300 + ); /* color.button.success.solid.active.foreground */ + --sl-color-button-success-solid-hover-border: var( + --sl-color-palette-success-300 + ); /* color.button.success.solid.hover.border */ + --sl-color-button-success-solid-hover-foreground: var( + --sl-color-palette-success-300 + ); /* color.button.success.solid.hover.foreground */ + --sl-color-button-success-solid-idle-border: var( + --sl-color-palette-success-300 + ); /* color.button.success.solid.idle.border */ + --sl-color-button-success-solid-idle-background: var( + --sl-color-palette-success-300 + ); /* color.button.success.solid.idle.background */ + --sl-color-button-primary-link-disabled-border: var( + --sl-color-button-default-link-disabled-border + ); /* color.button.primary.outline.disabled.border */ + --sl-color-button-primary-link-disabled-foreground: var( + --sl-color-button-default-link-disabled-foreground + ); /* color.button.primary.outline.disabled.foreground */ + --sl-color-button-primary-link-disabled-background: var( + --sl-color-button-default-link-disabled-background + ); /* color.button.primary.outline.disabled.background */ + --sl-color-button-primary-ghost-disabled-border: var( + --sl-color-button-default-ghost-disabled-border + ); /* color.button.primary.outline.disabled.border */ + --sl-color-button-primary-ghost-disabled-foreground: var( + --sl-color-button-default-ghost-disabled-foreground + ); /* color.button.primary.outline.disabled.foreground */ + --sl-color-button-primary-ghost-disabled-background: var( + --sl-color-button-default-ghost-disabled-background + ); /* color.button.primary.outline.disabled.background */ + --sl-color-button-primary-outline-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.primary.outline.disabled.border */ + --sl-color-button-primary-outline-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.primary.outline.disabled.foreground */ + --sl-color-button-primary-outline-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.primary.outline.disabled.background */ + --sl-color-button-primary-solid-disabled-border: var( + --sl-color-button-default-solid-disabled-border + ); /* color.button.primary.default.disabled.border */ + --sl-color-button-primary-solid-disabled-foreground: var( + --sl-color-button-default-solid-disabled-foreground + ); /* color.button.primary.solid.disabled.foreground */ + --sl-color-button-primary-solid-disabled-background: var( + --sl-color-button-default-solid-disabled-background + ); /* color.button.primary.solid.disabled.background */ + --sl-color-button-default-outline-selected-disabled-border: var( + --sl-color-button-default-outline-disabled-border + ); /* color.button.info.outline.disabled.border */ + --sl-color-button-default-outline-selected-disabled-foreground: var( + --sl-color-button-default-outline-disabled-foreground + ); /* color.button.info.outline.disabled.foreground */ + --sl-color-button-default-outline-selected-disabled-background: var( + --sl-color-button-default-outline-disabled-background + ); /* color.button.info.outline.disabled.background */ + --sl-color-badge-subtle-success-foreground: var(--sl-color-palette-success-300); + --sl-color-avatar-subheader: var(--sl-body-foreground); + --sl-color-avatar-header: var(--sl-body-foreground); + --sl-color-tag-bold-close-active-foreground: var(--sl-color-tag-bold-close-hover-foreground); + --sl-color-tag-bold-close-hover-border: var(--sl-color-tag-bold-close-hover-background); + --sl-color-tag-subtle-close-hover-border: var(--sl-color-tag-subtle-close-hover-background); + --sl-color-select-selectbox-valid-disabled-input-text: var(--sl-color-input-text-field-valid-disabled-input-text); + --sl-color-select-selectbox-valid-disabled-icon: var(--sl-color-input-text-field-valid-disabled-icon); + --sl-color-select-selectbox-valid-disabled-label: var(--sl-color-input-text-field-valid-disabled-label); + --sl-color-select-selectbox-valid-disabled-border: var(--sl-color-input-text-field-valid-disabled-border); + --sl-color-select-selectbox-valid-disabled-background: var(--sl-color-input-text-field-valid-disabled-background); + --sl-color-select-selectbox-valid-focus-placeholder: var(--sl-color-input-text-field-invalid-default-placeholder); + --sl-color-select-selectbox-valid-focus-border: var(--sl-color-input-text-field-valid-focus-border); + --sl-color-select-selectbox-valid-active-placeholder: var(--sl-color-input-text-field-invalid-default-placeholder); + --sl-color-select-selectbox-valid-active-border: var(--sl-color-input-text-field-valid-active-border); + --sl-color-select-selectbox-valid-hover-placeholder: var(--sl-color-input-text-field-invalid-default-placeholder); + --sl-color-select-selectbox-valid-hover-background: var(--sl-color-input-text-field-valid-hover-background); + --sl-color-select-selectbox-valid-default-placeholder: var(--sl-color-input-text-field-invalid-default-placeholder); + --sl-color-select-selectbox-valid-default-border: var(--sl-color-input-text-field-valid-default-border); + --sl-color-select-selectbox-invalid-disabled-placeholder: var( + --sl-color-input-text-field-invalid-disabled-placeholder + ); + --sl-color-select-selectbox-invalid-disabled-input-text: var( + --sl-color-input-text-field-invalid-disabled-input-text + ); + --sl-color-select-selectbox-invalid-disabled-icon: var(--sl-color-input-text-field-invalid-disabled-icon); + --sl-color-select-selectbox-invalid-disabled-label: var(--sl-color-input-text-field-invalid-disabled-label); + --sl-color-select-selectbox-invalid-disabled-border: var(--sl-color-input-text-field-invalid-disabled-border); + --sl-color-select-selectbox-invalid-disabled-background: var( + --sl-color-input-text-field-invalid-disabled-background + ); + --sl-color-select-selectbox-invalid-focus-placeholder: var(--sl-color-input-text-field-invalid-focus-placeholder); + --sl-color-select-selectbox-invalid-active-placeholder: var(--sl-color-input-text-field-invalid-active-placeholder); + --sl-color-select-selectbox-invalid-active-background: var(--sl-color-input-text-field-invalid-active-background); + --sl-color-select-selectbox-invalid-hover-placeholder: var(--sl-color-input-text-field-invalid-hover-placeholder); + --sl-color-select-selectbox-invalid-hover-icon: var(--sl-color-input-text-field-invalid-hover-icon); + --sl-color-select-selectbox-invalid-hover-border: var(--sl-color-input-text-field-invalid-hover-border); + --sl-color-select-selectbox-invalid-default-placeholder: var( + --sl-color-input-text-field-invalid-default-placeholder + ); + --sl-color-select-selectbox-invalid-default-icon: var(--sl-color-input-text-field-invalid-default-icon); + --sl-color-select-selectbox-invalid-default-background: var(--sl-color-input-text-field-invalid-default-background); + --sl-color-select-selectbox-default-focus-placeholder: var(--sl-color-input-text-field-default-focus-placeholder); + --sl-color-select-selectbox-default-focus-icon: var(--sl-color-input-text-field-default-focus-icon); + --sl-color-select-selectbox-default-active-placeholder: var(--sl-color-input-text-field-default-active-placeholder); + --sl-color-select-selectbox-default-active-icon: var(--sl-color-input-text-field-default-active-icon); + --sl-color-select-selectbox-default-active-background: var(--sl-color-input-text-field-default-active-background); + --sl-color-select-selectbox-default-hover-placeholder: var(--sl-color-input-text-field-default-hover-placeholder); + --sl-color-select-selectbox-default-hover-icon: var(--sl-color-input-text-field-default-hover-icon); + --sl-color-select-selectbox-default-hover-border: var(--sl-color-input-text-field-default-hover-border); + --sl-color-select-selectbox-default-default-input-text: var(--sl-color-input-text-field-default-default-input-text); + --sl-color-select-selectbox-default-default-icon: var(--sl-color-input-text-field-default-default-icon); + --sl-color-select-selectbox-default-default-label: var(--sl-color-input-text-field-default-default-label); + --sl-color-select-selectbox-default-default-background: var(--sl-color-input-text-field-default-default-background); + --sl-color-select-item-active-foreground: var(--sl-color-input-text-field-default-default-input-text); + --sl-color-select-item-hover-foreground: var(--sl-color-input-text-field-default-default-input-text); + --sl-color-select-item-default-foreground: var(--sl-color-input-text-field-default-default-input-text); + --sl-color-input-field-label-hint-default: var( + --sl-color-input-field-label-text-default + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-active-background: var( + --sl-color-input-text-field-default-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-hover-border: var( + --sl-color-input-text-field-default-hover-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-default-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-default-label: var( + --sl-color-input-text-field-default-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-default-background: var( + --sl-color-input-text-field-default-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-icon: var( + --sl-color-input-text-field-invalid-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-label: var( + --sl-color-input-text-field-default-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-invalid-focus-border: var( + --sl-color-input-text-field-invalid-hover-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-focus-background: var( + --sl-color-input-text-field-invalid-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-icon: var( + --sl-color-input-text-field-invalid-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-active-label: var( + --sl-color-input-text-field-default-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-invalid-active-border: var( + --sl-color-input-text-field-invalid-hover-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-hover-label: var( + --sl-color-input-text-field-default-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-invalid-default-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-invalid-default-label: var( + --sl-color-input-text-field-default-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-focus-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-focus-label: var( + --sl-color-input-text-field-default-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-focus-background: var( + --sl-color-input-text-field-default-active-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-default-active-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-active-label: var( + --sl-color-input-text-field-default-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-hover-input-text: var( + --sl-color-input-text-field-default-default-input-text + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-default-hover-label: var( + --sl-color-input-text-field-default-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-focus-icon: var( + --sl-color-input-switch-default-checked-focus-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-checked-hover-icon: var( + --sl-color-input-switch-default-checked-hover-background + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-focus-icon: var( + --sl-color-input-switch-default-unchecked-default-icon + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-switch-default-unchecked-focus-text: var( + --sl-color-input-switch-default-unchecked-default-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-active-text: var( + --sl-color-input-switch-default-unchecked-default-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-switch-default-unchecked-hover-text: var( + --sl-color-input-switch-default-unchecked-default-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-disabled-border: var( + --sl-color-input-option-valid-checked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-focus-icon: var( + --sl-color-input-option-valid-checked-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-focus-border: var( + --sl-color-input-option-valid-checked-focus-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-checked-hover-border: var( + --sl-color-input-option-valid-checked-hover-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-valid-unchecked-default-background: var( + --sl-color-input-option-default-unchecked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-disabled-border: var( + --sl-color-input-option-invalid-checked-disabled-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-focus-icon: var( + --sl-color-input-option-invalid-checked-default-icon + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-focus-label: var( + --sl-color-input-option-invalid-checked-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-checked-focus-background: var( + --sl-color-input-option-invalid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-default-border: var( + --sl-color-input-option-invalid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-focus-icon: var( + --sl-color-input-option-invalid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-focus-label: var( + --sl-color-input-option-invalid-unchecked-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-invalid-unchecked-focus-border: var( + --sl-color-input-option-invalid-unchecked-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-focus-background: var( + --sl-color-input-option-invalid-unchecked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-active-icon: var( + --sl-color-input-option-invalid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-hover-icon: var( + --sl-color-input-option-invalid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-unchecked-default-icon: var( + --sl-color-input-option-invalid-checked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-default-unchecked-focus-label: var( + --sl-color-input-option-default-unchecked-default-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-default-unchecked-focus-background: var( + --sl-color-input-option-default-unchecked-default-background + ); /* color.surface.solid.primary.background */ + --sl-color-select-selectbox-valid-active-background: var(--sl-color-input-text-field-valid-active-background); + --sl-color-select-selectbox-valid-hover-border: var(--sl-color-input-text-field-valid-hover-border); + --sl-color-select-selectbox-valid-default-input-text: var(--sl-color-input-text-field-valid-default-input-text); + --sl-color-select-selectbox-valid-default-label: var(--sl-color-input-text-field-valid-default-label); + --sl-color-select-selectbox-valid-default-background: var(--sl-color-input-text-field-valid-default-background); + --sl-color-select-selectbox-invalid-focus-input-text: var(--sl-color-input-text-field-invalid-focus-input-text); + --sl-color-select-selectbox-invalid-focus-icon: var(--sl-color-input-text-field-invalid-focus-icon); + --sl-color-select-selectbox-invalid-focus-label: var(--sl-color-input-text-field-invalid-focus-label); + --sl-color-select-selectbox-invalid-focus-border: var(--sl-color-input-text-field-invalid-focus-border); + --sl-color-select-selectbox-invalid-focus-background: var(--sl-color-input-text-field-invalid-focus-background); + --sl-color-select-selectbox-invalid-active-input-text: var(--sl-color-input-text-field-invalid-active-input-text); + --sl-color-select-selectbox-invalid-active-icon: var(--sl-color-input-text-field-invalid-active-icon); + --sl-color-select-selectbox-invalid-active-label: var(--sl-color-input-text-field-invalid-active-label); + --sl-color-select-selectbox-invalid-active-border: var(--sl-color-input-text-field-invalid-active-border); + --sl-color-select-selectbox-invalid-hover-input-text: var(--sl-color-input-text-field-invalid-hover-input-text); + --sl-color-select-selectbox-invalid-hover-label: var(--sl-color-input-text-field-invalid-hover-label); + --sl-color-select-selectbox-invalid-default-input-text: var(--sl-color-input-text-field-invalid-default-input-text); + --sl-color-select-selectbox-invalid-default-label: var(--sl-color-input-text-field-invalid-default-label); + --sl-color-select-selectbox-default-focus-input-text: var(--sl-color-input-text-field-default-focus-input-text); + --sl-color-select-selectbox-default-focus-label: var(--sl-color-input-text-field-default-focus-label); + --sl-color-select-selectbox-default-focus-background: var(--sl-color-input-text-field-default-focus-background); + --sl-color-select-selectbox-default-active-input-text: var(--sl-color-input-text-field-default-active-input-text); + --sl-color-select-selectbox-default-active-label: var(--sl-color-input-text-field-default-active-label); + --sl-color-select-selectbox-default-hover-input-text: var(--sl-color-input-text-field-default-hover-input-text); + --sl-color-select-selectbox-default-hover-label: var(--sl-color-input-text-field-default-hover-label); + --sl-color-input-text-field-valid-focus-input-text: var( + --sl-color-input-text-field-default-focus-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-focus-label: var( + --sl-color-input-text-field-default-focus-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-focus-background: var( + --sl-color-input-text-field-default-focus-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-active-input-text: var( + --sl-color-input-text-field-default-active-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-active-label: var( + --sl-color-input-text-field-default-active-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-text-field-valid-hover-input-text: var( + --sl-color-input-text-field-default-hover-input-text + ); /* color.surface.solid.primary.background */ + --sl-color-input-text-field-valid-hover-label: var( + --sl-color-input-text-field-default-hover-label + ); /* color.surface.solid.primary.foreground */ + --sl-color-input-option-valid-unchecked-focus-background: var( + --sl-color-input-option-default-unchecked-focus-background + ); /* color.surface.solid.primary.background */ + --sl-color-input-option-invalid-checked-focus-border: var( + --sl-color-input-option-invalid-checked-default-border + ); /* color.surface.solid.primary.background */ + --sl-color-select-selectbox-valid-focus-input-text: var(--sl-color-input-text-field-valid-focus-input-text); + --sl-color-select-selectbox-valid-focus-label: var(--sl-color-input-text-field-valid-focus-label); + --sl-color-select-selectbox-valid-focus-background: var(--sl-color-input-text-field-valid-focus-background); + --sl-color-select-selectbox-valid-active-input-text: var(--sl-color-input-text-field-valid-active-input-text); + --sl-color-select-selectbox-valid-active-label: var(--sl-color-input-text-field-valid-active-label); + --sl-color-select-selectbox-valid-hover-input-text: var(--sl-color-input-text-field-valid-hover-input-text); + --sl-color-select-selectbox-valid-hover-label: var(--sl-color-input-text-field-valid-hover-label); + } + } +`; diff --git a/packages/components/data-source/src/array-data-source.ts b/packages/components/data-source/src/array-data-source.ts index 32b87fb988..0b0105a79a 100644 --- a/packages/components/data-source/src/array-data-source.ts +++ b/packages/components/data-source/src/array-data-source.ts @@ -10,6 +10,7 @@ import { export class ArrayDataSource extends DataSource { #filteredItems: T[] = []; #items: T[]; + #paginatedItems: T[] = []; get items(): T[] { return this.#filteredItems; @@ -20,6 +21,16 @@ export class ArrayDataSource extends DataSource { this.update(); } + get paginatedItems(): T[] { + return this.#paginatedItems; + } + + set paginatedItems(items: T[]) { + this.#paginatedItems = items; + console.log('test', this.#paginatedItems, items, this.items); + this.update(); + } + get size(): number { return this.#items.length; } @@ -28,6 +39,7 @@ export class ArrayDataSource extends DataSource { super(); this.#filteredItems = [...items]; this.#items = [...items]; + this.#paginatedItems = [...items]; } update(): void { @@ -125,6 +137,37 @@ export class ArrayDataSource extends DataSource { }); } + console.log('items before paginated, but should be filtered if filtered', items, this.filters, this.filters.size > 0, this.filters.values()); + + this.#paginatedItems = items; + + // paginate items + if (this.paginateItems) { + console.log('this.paginateItems', this.paginateItems); + // const pagination = {pageNumber: pageNumber, pageSize: pageSize}; + // console.log('pagination in paginate', pagination); + + // const pageNumber = /*filtersChanged /!*this.filters.size > 0*!/ ? 1 :*/ this.paginateItems.pageNumber; + // this.paginateItems.pageNumber = pageNumber; + // this.paginate(10, pageNumber); + // this.paginateItems.pageNumber = pageNumber; + + const startIndex = (this.paginateItems.pageNumber /*pageNumber*/ - 1) * this.paginateItems.pageSize; + const endIndex = startIndex + this.paginateItems.pageSize; + // console.log('pageNumber in array data source', pageNumber, filtersChanged, startIndex); + // Get the items for the current page + /*const paginatedItems*/items = /*this.*/items.slice(startIndex, endIndex); + // console.log('paginated data', paginatedItems); + // Update this.items with the paginated items + // this.paginatedItems/*items*/ = paginatedItems; + // console.log('updated items', this.items, this.paginatedItems, items); + } + + // TODO: I need to have amount of all filtered data for total to show in the paginator... + + console.log('paginateditems?', this.paginatedItems); + console.log('items in array data', items); + this.#filteredItems = items; this.dispatchEvent(new CustomEvent('sl-update', { detail: { dataSource: this } })); } diff --git a/packages/components/data-source/src/data-source.ts b/packages/components/data-source/src/data-source.ts index f5298541ec..f9f4bc201b 100644 --- a/packages/components/data-source/src/data-source.ts +++ b/packages/components/data-source/src/data-source.ts @@ -35,6 +35,8 @@ export type DataSourceSortByFunction = { export type DataSourceSort = DataSourceSortByFunction | DataSourceSortByPath; +export type DataSourcePagination = { pageNumber: number, pageSize: number }; + // eslint-disable-next-line @typescript-eslint/no-explicit-any export type DataSourceUpdateEvent = CustomEvent<{ dataSource: DataSource }>; @@ -46,12 +48,16 @@ export abstract class DataSource extends EventTarget { /** Order the items by grouping them on the given attributes. */ #groupBy?: DataSourceGroupBy; + #paginateItems?: DataSourcePagination; + /** * The value and path/function to use for sorting. When setting this property, * it will cause the data to be automatically sorted. */ #sort?: DataSourceSort; + // #pagination + get filters(): Map> { return this.#filters; } @@ -60,6 +66,10 @@ export abstract class DataSource extends EventTarget { return this.#groupBy; } + get paginateItems(): DataSourcePagination| undefined { + return this.#paginateItems; + } + get sort(): DataSourceSort | undefined { return this.#sort; } @@ -67,10 +77,13 @@ export abstract class DataSource extends EventTarget { /** The filtered & sorted array of items. */ abstract items: T[]; + /** The array of all items, used for pagination. */ + // abstract paginatedItems?: T[]; + /** Total number of items in this data source. */ abstract readonly size: number; - /** Updates the list of items using filter and sorting if available. */ + /** Updates the list of items using filter, sorting and pagination if available. */ abstract update(): void; addFilter>( @@ -78,12 +91,13 @@ export abstract class DataSource extends EventTarget { pathOrFilter: U, value?: string | string[] ): void { + console.log('value in addFilter', value); if (typeof pathOrFilter === 'string') { this.#filters.set(id, { path: pathOrFilter, value: value ?? '' }); } else { this.#filters.set(id, { filter: pathOrFilter, value }); } - } + } // TODO: maybe here emit an event? removeFilter(id: string): void { this.#filters.delete(id); @@ -147,4 +161,15 @@ export abstract class DataSource extends EventTarget { this.update(); } + + /** + * Use to get the paginated data for usage with the sl-paginator component. + * */ + paginate(pageNumber: number, pageSize: number): void { + this.#paginateItems = { pageNumber: pageNumber, pageSize: pageSize}; + + this.update(); + } + + // TODO: paginatedData } diff --git a/packages/components/grid/src/grid.ts b/packages/components/grid/src/grid.ts index 2232d5b0af..0c6ac6c311 100644 --- a/packages/components/grid/src/grid.ts +++ b/packages/components/grid/src/grid.ts @@ -262,6 +262,7 @@ export class Grid extends ScopedElementsMixin(LitElement) { } override willUpdate(changes: PropertyValues): void { + console.log('changes in willChange', changes); if (changes.has('dataSource')) { this.#updateDataSource(this.dataSource); } @@ -286,6 +287,7 @@ export class Grid extends ScopedElementsMixin(LitElement) { } override render(): TemplateResult { + console.log('in grid render', this.items, this.dataSource); return html` + + + + + + + + + ` + } +}; + +export const PaginatedDataSourceWithFilter: Story = { + render: (_, { loaded: { people } }) => { + const pageSizes = [5, 10, 15, 20], + dataSource = new ArrayDataSource(people as Person[]); + + let total = dataSource.paginatedItems.length; + dataSource.paginate(1, 10); + + setTimeout(() => { + const paginator = document.querySelector('sl-paginator') as Paginator, + pageSize = document.querySelector('sl-page-size') as PageSize, + visibleItems = document.querySelector('sl-items-counter') as ItemsCounter, + grid = document.querySelector('sl-grid') as Grid; + + paginator?.addEventListener('sl-page-change', event => { + dataSource.paginate(event.detail, paginator.itemsPerPage ?? pageSizes[0]); + visibleItems.activePage = event.detail; + }); + + pageSize?.addEventListener('sl-page-size-change', event => { + paginator.itemsPerPage = event.detail; + visibleItems.itemsPerPage = event.detail; + dataSource.paginate(paginator.activePage, event.detail); + }); + + dataSource?.addEventListener('sl-update', () => { + paginator.total = dataSource.paginatedItems.length; + visibleItems.total = dataSource.paginatedItems.length; + }); + + grid?.addEventListener('sl-filter-value-change', () => { + // go back to the first page on filter change + paginator.activePage = 1; + }); + }); + + return html` + + + + + + + + + + `; + } +}; + +export const PaginatedDataSourceWithSorter: Story = { + render: (_, { loaded: { people } }) => { + const sorter = (a: Person, b: Person): number => { + const lastNameCmp = a.lastName.localeCompare(b.lastName); + + if (lastNameCmp === 0) { + return a.firstName.localeCompare(b.firstName); + } else { + return lastNameCmp; + } + }; + + const dataSource = new ArrayDataSource(people as Person[]); + dataSource.setSort('custom', sorter, 'asc'); + + const pageSizes = [10, 15, 20]; + let total = dataSource.paginatedItems.length; + dataSource.paginate(1, 10); + + setTimeout(() => { + const paginator = document.querySelector('sl-paginator') as Paginator, + pageSize = document.querySelector('sl-page-size') as PageSize, + visibleItems = document.querySelector('sl-items-counter') as ItemsCounter, + grid = document.querySelector('sl-grid') as Grid; + + paginator?.addEventListener('sl-page-change', event => { + dataSource.paginate(event.detail, paginator.itemsPerPage ?? pageSizes[0]); + visibleItems.activePage = event.detail; + }); + + pageSize?.addEventListener('sl-page-size-change', event => { + paginator.itemsPerPage = event.detail; + visibleItems.itemsPerPage = event.detail; + dataSource.paginate(paginator.activePage, event.detail); + }); + + dataSource?.addEventListener('sl-update', () => { + paginator.total = dataSource.paginatedItems.length; + visibleItems.total = dataSource.paginatedItems.length; + }); + + grid?.addEventListener('sl-sort-direction-change', () => { + // go back to the first page on filter change + paginator.activePage = 1; + }); + }); + + return html` + +

This grid sorts people by last name, then first name, via a custom sorter on the data directly.

+ + + + + + + `; + } +}; + + diff --git a/packages/components/grid/src/view-model.ts b/packages/components/grid/src/view-model.ts index 580e493291..1a09f7f496 100644 --- a/packages/components/grid/src/view-model.ts +++ b/packages/components/grid/src/view-model.ts @@ -221,4 +221,6 @@ export class GridViewModel { return [columns]; } } + + // TODO: get Paginated data ? or in the data-source maybe? } diff --git a/packages/components/paginator/index.ts b/packages/components/paginator/index.ts new file mode 100644 index 0000000000..71c395dcaf --- /dev/null +++ b/packages/components/paginator/index.ts @@ -0,0 +1,3 @@ +export * from './src/paginator.js'; +export * from './src/page-size.js'; +export * from './src/items-counter'; diff --git a/packages/components/paginator/package.json b/packages/components/paginator/package.json new file mode 100644 index 0000000000..9634a3e2de --- /dev/null +++ b/packages/components/paginator/package.json @@ -0,0 +1,55 @@ +{ + "name": "@sl-design-system/paginator", + "version": "0.0.0", + "description": "Paginator component for the SL Design System", + "license": "Apache-2.0", + "publishConfig": { + "registry": "https://npm.pkg.github.com" + }, + "repository": { + "type": "git", + "url": "https://github.com/sl-design-system/components.git", + "directory": "packages/components/paginator" + }, + "homepage": "https://sanomalearning.design/components/paginator", + "bugs": { + "url": "https://github.com/sl-design-system/components/issues" + }, + "type": "module", + "main": "./index.js", + "module": "./index.js", + "types": "./index.d.ts", + "customElements": "custom-elements.json", + "exports": { + ".": "./index.js", + "./package.json": "./package.json", + "./register.js": "./register.js" + }, + "files": [ + "**/*.d.ts", + "**/*.js", + "**/*.js.map", + "custom-elements.json" + ], + "sideEffects": [ + "register.js" + ], + "scripts": { + "test": "echo \"Error: run tests from monorepo root.\" && exit 1" + }, + "dependencies": { + "@sl-design-system/button": "^1.0.3", + "@sl-design-system/icon": "^1.0.2", + "@sl-design-system/menu": "^0.1.1", + "@sl-design-system/select": "^1.1.1", + "@sl-design-system/shared": "^0.3.0" + }, + "devDependencies": { + "@lit/localize": "^0.12.1", + "@open-wc/scoped-elements": "^3.0.5" + }, + "peerDependencies": { + "@lit/localize": "^0.12.1", + "@open-wc/scoped-elements": "^3.0.5" + } +} diff --git a/packages/components/paginator/register.ts b/packages/components/paginator/register.ts new file mode 100644 index 0000000000..3c176558ac --- /dev/null +++ b/packages/components/paginator/register.ts @@ -0,0 +1,7 @@ +import { Paginator } from './src/paginator.js'; +import { PageSize } from './src/page-size.js'; +import { ItemsCounter } from './src/items-counter'; + +customElements.define('sl-paginator', Paginator); +customElements.define('sl-page-size', PageSize); +customElements.define('sl-items-counter', ItemsCounter); diff --git a/packages/components/paginator/src/items-counter.scss b/packages/components/paginator/src/items-counter.scss new file mode 100644 index 0000000000..5269794999 --- /dev/null +++ b/packages/components/paginator/src/items-counter.scss @@ -0,0 +1,5 @@ +:host { + display: block; + padding: 0; + text-wrap: nowrap; +} diff --git a/packages/components/paginator/src/items-counter.ts b/packages/components/paginator/src/items-counter.ts new file mode 100644 index 0000000000..14783abe28 --- /dev/null +++ b/packages/components/paginator/src/items-counter.ts @@ -0,0 +1,111 @@ +import { localized } from '@lit/localize'; +import {type CSSResultGroup, LitElement, type TemplateResult, html, type PropertyValues} from 'lit'; +import { property, state } from 'lit/decorators.js'; +import styles from './items-counter.scss.js'; + +declare global { + interface HTMLElementTagNameMap { + 'sl-items-counter': ItemsCounter; + } +} + +/** + * A component that can be used with the paginator component. + * Contains information about currently visible items on the page and total amount of items. + */ +@localized() +export class ItemsCounter extends LitElement { + /** @internal */ + static override styles: CSSResultGroup = styles; + + // TODO: accessibility + + // TODO: unit tests + + /** Total amount of items. */ + @property() total?: number; + + /** Items per page, if not set - default to 10. */ + @property({ type: Number, attribute: 'items-per-page' }) itemsPerPage?: number; + + /** @internal pages amount */ // TODO: state maybe? + #pages: number = 1; + + /** @internal active */ // TODO: state maybe? + @property() activePage: number = 1; // TODO: should be possible to set manually!!! + + /** @internal currently visible items on the current page */ + @state() currentlyVisibleItems: number = 1; + + override connectedCallback(): void { + super.connectedCallback(); + + const total = this.total ?? 0; + this.itemsPerPage = this.itemsPerPage ?? 10; + this.#pages = Math.ceil(total / this.itemsPerPage) || 1; + + if (this.activePage < 1) { + this.activePage = 1; + } else if (this.activePage > this.#pages) { + this.activePage = this.#pages; + } + + this.#setCurrentlyVisibleItems(); + } + + override updated(changes: PropertyValues): void { + super.updated(changes); + + console.log('changes in updated in ItemsCounter', changes); + + if (changes.has('itemsPerPage') || changes.has('total')) { + const total = this.total ?? 0; + const itemsPerPage = this.itemsPerPage ?? 10; + this.#pages = Math.ceil(total / itemsPerPage) || 2; + this.itemsPerPage = this.itemsPerPage ?? 10; + this.#setCurrentlyVisibleItems(); + } + + if (changes.has('activePage')) { + if (this.activePage < 1) { + this.activePage = 1; + } else if (this.activePage > this.#pages) { + this.activePage = this.#pages; + } + + const total = this.total ?? 0; + const itemsPerPage = this.itemsPerPage ?? 10; + this.#pages = Math.ceil(total / itemsPerPage) || 2; + this.itemsPerPage = this.itemsPerPage ?? 10; + this.#setCurrentlyVisibleItems(); + } + } + + override render(): TemplateResult { + const total = this.total ?? 0; + const itemsPerPage = this.itemsPerPage ?? 10; + const start = this.activePage === 1 ? 1 : ((this.activePage - 1) * itemsPerPage) + 1; + const end = this.activePage === this.#pages ? total : this.activePage * this.currentlyVisibleItems; + + return html` + ${start} - ${end} of ${this.total} items + `; + } // TODO: add msg localize str + + #setCurrentlyVisibleItems(): void { + if (!this.itemsPerPage || !this.#pages) { + return; + } + + if (this.activePage === this.#pages) { + const total = this.total ?? 0; + // const itemsPerPage = this.itemsPerPage ?? 10; + console.log('last page is active'); + const itemsOnLastPage = total % this.itemsPerPage; + this.currentlyVisibleItems = itemsOnLastPage === 0 ? this.itemsPerPage : itemsOnLastPage; + } else { + this.currentlyVisibleItems = this.itemsPerPage!; + } + } +} + diff --git a/packages/components/paginator/src/page-size.scss b/packages/components/paginator/src/page-size.scss new file mode 100644 index 0000000000..5631f4bb78 --- /dev/null +++ b/packages/components/paginator/src/page-size.scss @@ -0,0 +1,11 @@ +:host { + display: block; + padding: 0; +} + +.page-sizes { + display: flex; + align-items: center; + gap: 8px; + text-wrap: nowrap; +} diff --git a/packages/components/paginator/src/page-size.ts b/packages/components/paginator/src/page-size.ts new file mode 100644 index 0000000000..a2e66cc66e --- /dev/null +++ b/packages/components/paginator/src/page-size.ts @@ -0,0 +1,90 @@ +import { faChevronLeft, faChevronRight } from '@fortawesome/pro-solid-svg-icons'; +import { localized } from '@lit/localize'; +import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js'; +import { Icon } from '@sl-design-system/icon'; +import { Select, SelectOption } from '@sl-design-system/select'; +import {type EventEmitter, event} from '@sl-design-system/shared'; +import {type CSSResultGroup, LitElement, type TemplateResult, html, nothing, type PropertyValues} from 'lit'; +import { property, state } from 'lit/decorators.js'; +import styles from './page-size.scss.js'; + +declare global { + interface GlobalEventHandlersEventMap { + 'sl-page-size-change': SlPageSizeChangeEvent; + } + + interface HTMLElementTagNameMap { + 'sl-page-size': PageSize; + } +} + +Icon.register(faChevronLeft, faChevronRight); + +export type SlPageSizeChangeEvent = CustomEvent; + +/** + * A component that can be used with paginator. Add possibility to select/change the amount of items + * that would be visible per page. + */ +@localized() +export class PageSize extends ScopedElementsMixin(LitElement) { + /** @internal */ + static get scopedElements(): ScopedElementsMap { + return { + 'sl-select': Select, + 'sl-select-option': SelectOption + }; // TODO: update dependencies + } + + /** @internal */ + static override styles: CSSResultGroup = styles; + + /** @internal Emits when the page size has been selected/changed. */ + @event({ name: 'sl-page-size-change' }) pageSizeChangeEvent!: EventEmitter; + + // data - how to connect with data? make an example / story + + /** Page sizes - array of possible page sizes e.g. [5, 10, 15] */ + @property({ type: Number, attribute: 'page-sizes' }) pageSizes?: number[]; + + /** Items per page. Default to the first item of pageSizes, if pageSizes is not set - default to 10. */ + @property({ type: Number, attribute: 'items-per-page' }) itemsPerPage?: number; + + override connectedCallback(): void { + super.connectedCallback(); + + if (!this.itemsPerPage) { + this.itemsPerPage = this.pageSizes ? this.pageSizes[0] : 10; + } + } + + override render(): TemplateResult { + return html` +
+ Items per page: + ${this.pageSizes ? + html` + + ${this.pageSizes?.map( + (size) => html` + ${size} +
+ ` + : nothing} + `; + } + + #setValue(event: Event & { target: SelectOption }): void { + this.itemsPerPage = Number(event.target.value); + + /** Emits amount of selected items per page */ + this.pageSizeChangeEvent.emit(this.itemsPerPage); + } +} + +// TODO: accessibility + +// TODO: translationg with msg diff --git a/packages/components/paginator/src/page.scss b/packages/components/paginator/src/page.scss new file mode 100644 index 0000000000..df8d328169 --- /dev/null +++ b/packages/components/paginator/src/page.scss @@ -0,0 +1,87 @@ +:host { + //inline-size: 40px; // TODO: use tokens + //padding-block: 7px; + --_background: var(--sl-color-button-default-ghost-idle-background); + + --_focus-outline-offset: var(--sl-border-width-focusring-offset); + --_focus-outline: var(--sl-color-focusring-default) solid var(--sl-border-width-focusring-default); + //--_focus-space: calc(var(--sl-border-width-focusring-default) + var(--sl-border-width-focusring-offset)); + --_transition-duration: var(--sl-animation-button-duration); + --_transition-easing: var(--sl-animation-button-easing); + + + //border: var(--sl-border-width-button-ghost) solid var(--sl-color-button-default-ghost-idle-border); + //border-radius: var(--_border-radius); +} + +button:focus-visible { + outline: var(--_focus-outline); + outline-offset: var(--_focus-outline-offset); + z-index: 1; +} + +//button:focus-visible::before { +// background: var(--_indicator-color); +// border-radius: var(--_indicator-listbox-border-radius); +// content: ''; +// inline-size: var(--_indicator-size); +// inset: 0 auto 0 0; +// position: absolute; +//} + +button:where(:active, :hover) { + transition-duration: var(--_transition-duration); + transition-property: background, border-color, color, outline-color; + transition-timing-function: var(--_transition-easing); +} + +button { + position: relative; + min-inline-size: 40px; // TODO: use tokens + padding-block: 7px; + padding-inline: 0; + display: inline-flex; + justify-content: center; + background: var(--_background); + border: var(--sl-border-width-button-ghost) solid var(--sl-color-button-default-ghost-idle-border); + border-radius: var(--sl-border-radius-button-lg); + cursor: pointer; + font: var(--sl-text-button-text-lg); +} + +:host(:not([disabled]):hover) { + --_background: var(--sl-color-button-default-ghost-hover-background); + --_border-color: var(--sl-color-button-default-ghost-hover-border); + --_color: var(--sl-color-button-default-ghost-hover-foreground); + --_transform: var(--sl-transform-button-default-ghost-hover); +} + +:host(:not([disabled]):active) { + --_background: var(--sl-color-button-default-ghost-active-background); + --_border-color: var(--sl-color-button-default-ghost-active-border); + --_color: var(--sl-color-button-default-ghost-active-foreground); + --_transform: var(--sl-transform-button-default-ghost-active); +} + +:host([active]) { // TODO: maybe better use aria-current for links instead of active class + --_background: var(--sl-color-button-default-ghost-selected-idle-background); + //border: 1px solid var(--sl-color-button-default-ghost-selected-idle-border); //#0d1a24; + //color: var(--sl-color-button-default-ghost-selected-idle-foreground); + // --_background: var(--sl-color-button-default-ghost-selected-idle-background); + // --_border-color: var(--sl-color-button-default-ghost-selected-idle-border); + // --_color: var(--sl-color-button-default-ghost-selected-idle-foreground); +} + +:host([active]:not([disabled]):hover) { + --_background: var(--sl-color-button-default-ghost-selected-hover-background); + --_border-color: var(--sl-color-button-default-ghost-selected-hover-border); + --_color: var(--sl-color-button-default-ghost-hover-foreground); + --_transform: var(--sl-transform-button-default-ghost-hover); +} + +:host([active]:not([disabled]):active) { + --_background: var(--sl-color-button-default-ghost-selected-active-background); + --_border-color: var(--sl-color-button-default-ghost-selected-active-border); + --_color: var(--sl-color-button-default-ghost-active-foreground); + --_transform: var(--sl-transform-button-default-ghost-active); +} diff --git a/packages/components/paginator/src/page.ts b/packages/components/paginator/src/page.ts new file mode 100644 index 0000000000..a1152ba70b --- /dev/null +++ b/packages/components/paginator/src/page.ts @@ -0,0 +1,52 @@ +import {type CSSResultGroup, LitElement, type TemplateResult, html, type PropertyValues} from 'lit'; +import styles from './page.scss.js'; + +declare global { + // interface GlobalEventHandlersEventMap { + // 'sl-page-change': SlPageChangeEvent; // SlTabChangeEvent + // } + + interface HTMLElementTagNameMap { + 'sl-page': Page; + } +} + +// export type SlPageChangeEvent = CustomEvent; + +/** + * A page component that can be used as part of the paginator, representing pages in the paginator. + * + */ +export class Page extends LitElement { + /** @internal */ + static override styles: CSSResultGroup = styles; + + // /** @internal Emits when the page has been selected/changed. */ + // @event({ name: 'sl-page-change' }) pageChangeEvent!: EventEmitter; + + + override async connectedCallback(): Promise { + super.connectedCallback(); + + // if (!this.hasAttribute('tabindex')) { + // this.setAttribute('tabindex', '0'); + // } + + // TODO: any arias needed here? + + } + + override updated(changes: PropertyValues): void { + super.updated(changes); + + console.log('changes in updated', changes); + } + + override render(): TemplateResult { + return html` + + `; + } +} diff --git a/packages/components/paginator/src/paginator.scss b/packages/components/paginator/src/paginator.scss new file mode 100644 index 0000000000..97697887c7 --- /dev/null +++ b/packages/components/paginator/src/paginator.scss @@ -0,0 +1,59 @@ +:host { + --_focus-outline: var(--sl-color-focusring-default) solid var(--sl-border-width-focusring-default); + --_focus-outline-offset: var(--sl-border-width-focusring-offset); + --_focus-space: calc(var(--sl-border-width-focusring-default) + var(--sl-border-width-focusring-offset)); + --_padding-block: var(--sl-space-sm); + --_padding-inline: var(--sl-space-sm); + --_wrapper-padding-inline: var(--sl-space-sm); + + //border: 1px solid var(--sl-color-palette-neutral-200); + //border-radius: var(--sl-border-radius-2xs); + // display: flex; + // justify-content: space-between;; + // flex-direction: column; + //padding-block: 8px; + //padding-inline: 0; +// padding-inline: 4px; + // align-items: center; + // gap: 16px; + // display: grid; + // grid-template-columns: 1fr auto 2fr; + display: flex; + justify-content: center; +} + +.pages-wrapper { + display: flex; + overflow-x: hidden; + align-items: center; + padding: var(--_focus-space); //4px; // TODO: to make focus-ring visible with overflow hidden +} + +ul { + // display: flex; + align-items: center; + // gap: 8px; + display: grid; + grid-template-columns: 1fr auto 1fr; + padding: 0; + //margin: 0; + margin: calc(var(--_focus-space) * -1); //-4px; // TODO: to make focus-ring visible with overflow hidden +} + +ul[mobile] { + grid-template-columns: auto; +} + +li { + list-style: none; + min-inline-size: 0; +} + +.select-wrapper { + display: flex; + gap: 16px; + //width: max-content; + align-items: center; + flex-wrap: wrap; + padding: var(--_focus-space); //4px; // TODO: to make focus-ring visible with overflow hidden +} diff --git a/packages/components/paginator/src/paginator.spec.ts b/packages/components/paginator/src/paginator.spec.ts new file mode 100644 index 0000000000..881bef134b --- /dev/null +++ b/packages/components/paginator/src/paginator.spec.ts @@ -0,0 +1,206 @@ +// import { expect, fixture } from '@open-wc/testing'; +// import '@sl-design-system/button/register.js'; +// import { type SlToggleEvent } from '@sl-design-system/shared/events.js'; +// import { sendKeys } from '@web/test-runner-commands'; +// import { html } from 'lit'; +// import { spy } from 'sinon'; +// import '../register.js'; +// import { type Panel } from './panel.js'; +// +// describe('sl-panel', () => { +// let el: Panel; +// +// describe('defaults', () => { +// beforeEach(async () => { +// el = await fixture(html`Body content`); +// }); +// +// it('should not be collapsible', () => { +// expect(el.collapsible).not.to.be.true; +// expect(el).not.to.have.attribute('collapsible'); +// }); +// +// it('should not be collapsed', () => { +// expect(el.collapsed).not.to.be.true; +// expect(el).not.to.have.attribute('collapsed'); +// }); +// +// it('should not render the wrapper as a button', () => { +// const wrapper = el.renderRoot.querySelector('[part="wrapper"]'); +// +// expect(wrapper?.tagName).not.to.equal('BUTTON'); +// }); +// +// it('should not have a body with a role of "region"', () => { +// const body = el.renderRoot.querySelector('[part="body"]'); +// +// expect(body).not.to.have.attribute('role', 'region'); +// }); +// +// it('should render the heading into the heading slot', () => { +// const heading = el.renderRoot.querySelector('slot[name="heading"]'); +// +// expect(heading).to.have.trimmed.text('Heading'); +// }); +// }); +// +// describe('collapsible', () => { +// beforeEach(async () => { +// el = await fixture(html`Body content`); +// }); +// +// it('should be collapsible', () => { +// expect(el.collapsible).to.be.true; +// }); +// +// it('should not be collapsed', () => { +// expect(el.collapsed).not.to.be.true; +// expect(el).not.to.have.attribute('collapsed'); +// }); +// +// it('should render the wrapper as a button', () => { +// const wrapper = el.renderRoot.querySelector('[part="wrapper"]'); +// +// expect(wrapper?.tagName).to.equal('BUTTON'); +// }); +// +// it('should use ARIA to indicate expanded state', async () => { +// const button = el.renderRoot.querySelector('button'); +// +// expect(button).to.have.attribute('aria-controls', 'body'); +// expect(button).to.have.attribute('aria-expanded', 'true'); +// +// button?.click(); +// await el.updateComplete; +// +// expect(button).to.have.attribute('aria-expanded', 'false'); +// }); +// +// it('should have a body with a role of "region"', () => { +// const body = el.renderRoot.querySelector('[part="body"]'); +// +// expect(body).to.have.attribute('role', 'region'); +// }); +// +// it('should emit an sl-toggle event when button is clicked', async () => { +// const button = el.renderRoot.querySelector('button'), +// onToggle = spy(); +// +// el.addEventListener('sl-toggle', (event: SlToggleEvent) => { +// onToggle(event.detail); +// }); +// +// button?.click(); +// await el.updateComplete; +// +// expect(onToggle).to.have.been.calledOnce; +// expect(onToggle.lastCall.args[0]).to.be.true; +// +// button?.click(); +// await el.updateComplete; +// +// expect(onToggle).to.have.been.calledTwice; +// expect(onToggle.lastCall.args[0]).to.be.false; +// }); +// +// it('should emit an sl-toggle event when Enter is pressed while the button has focus', async () => { +// const button = el.renderRoot.querySelector('button'), +// onToggle = spy(); +// +// el.addEventListener('sl-toggle', (event: SlToggleEvent) => { +// onToggle(event.detail); +// }); +// +// button?.focus(); +// await sendKeys({ press: 'Enter' }); +// +// expect(onToggle).to.have.been.calledOnce; +// expect(onToggle.lastCall.args[0]).to.be.true; +// +// await sendKeys({ press: 'Enter' }); +// +// expect(onToggle).to.have.been.calledTwice; +// expect(onToggle.lastCall.args[0]).to.be.false; +// }); +// +// it('should emit an sl-toggle event when Space is pressed while the button has focus', async () => { +// const button = el.renderRoot.querySelector('button'), +// onToggle = spy(); +// +// el.addEventListener('sl-toggle', (event: SlToggleEvent) => { +// onToggle(event.detail); +// }); +// +// button?.focus(); +// await sendKeys({ press: 'Space' }); +// +// expect(onToggle).to.have.been.calledOnce; +// expect(onToggle.lastCall.args[0]).to.be.true; +// +// await sendKeys({ press: 'Space' }); +// +// expect(onToggle).to.have.been.calledTwice; +// expect(onToggle.lastCall.args[0]).to.be.false; +// }); +// +// it('should emit an sl-toggle event when toggle() is called', () => { +// const onToggle = spy(); +// +// el.addEventListener('sl-toggle', (event: SlToggleEvent) => { +// onToggle(event.detail); +// }); +// +// el.toggle(); +// +// expect(onToggle).to.have.been.calledOnce; +// expect(onToggle.lastCall.args[0]).to.be.true; +// +// el.toggle(); +// +// expect(onToggle).to.have.been.calledTwice; +// expect(onToggle.lastCall.args[0]).to.be.false; +// }); +// }); +// +// describe('slotted elements', () => { +// beforeEach(async () => { +// el = await fixture(html` +// +//
Custom heading
+// Action +//
Content
+// +// `); +// }); +// +// it('should slot the heading into the heading slot', () => { +// const elements = el.renderRoot +// .querySelector('slot[name="heading"') +// ?.assignedElements({ flatten: true }); +// +// expect(elements).to.have.lengthOf(1); +// expect(elements?.at(0)).to.match('div'); +// expect(elements?.at(0)).to.have.text('Custom heading'); +// }); +// +// it('should slot the button into the actions slot', () => { +// const elements = el.renderRoot +// .querySelector('slot[name="actions"') +// ?.assignedElements({ flatten: true }); +// +// expect(elements).to.have.lengthOf(1); +// expect(elements?.at(0)).to.match('sl-button'); +// expect(elements?.at(0)).to.have.text('Action'); +// }); +// +// it('should slot the content into the default slot', () => { +// const elements = el.renderRoot +// .querySelector('slot:not([name])') +// ?.assignedElements({ flatten: true }); +// +// expect(elements).to.have.lengthOf(1); +// expect(elements?.at(0)).to.match('div'); +// expect(elements?.at(0)).to.have.text('Content'); +// }); +// }); +// }); diff --git a/packages/components/paginator/src/paginator.stories.ts b/packages/components/paginator/src/paginator.stories.ts new file mode 100644 index 0000000000..4ba7ddc4ea --- /dev/null +++ b/packages/components/paginator/src/paginator.stories.ts @@ -0,0 +1,331 @@ +import '@sl-design-system/button/register.js'; +import '@sl-design-system/icon/register.js'; +import '@sl-design-system/card/register.js'; +import '@sl-design-system/menu/register.js'; +import '@sl-design-system/paginator/register.js'; +import { type Meta, type StoryObj } from '@storybook/web-components'; +import { type TemplateResult, html } from 'lit'; +import '../register.js'; +import { type Paginator } from './paginator.js'; +import { type PageSize } from './page-size.js'; +import {ItemsCounter} from "./items-counter"; + +type Props = Pick & { + actions?(): string | TemplateResult; + content?(): string | TemplateResult; +}; +type Story = StoryObj; + +export default { + title: 'Navigation/Paginator', + tags: ['draft'], + args: { + total: 52, + itemsPerPage: 15, + pageSizes: [5, 10, 15], + activePage: 2, + }, + argTypes: { + actions: { + table: { disable: true } + }, + content: { + table: { disable: true } + } + }, + parameters: { + viewport: { + defaultViewport: 'reset' + } + }, + render: ({ activePage, itemsPerPage, pageSizes, total }) => { // itemsPerPage + setTimeout(() => { + const paginator = document.querySelector('sl-paginator') as Paginator; + const pageSize = document.querySelector('sl-page-size') as PageSize; + const visibleItems = document.querySelector('sl-items-counter') as ItemsCounter; + console.log('paginator story', paginator, 'pageSize', pageSize, pageSize.itemsPerPage); + // paginator.itemsPerPage = pageSize.itemsPerPage; + paginator?.addEventListener('sl-page-change', event => { + console.log('sl-page-change event', event, event.detail); + // pageSize.activePage = event.detail; + visibleItems.activePage = event.detail; + // visibleItems.requestUpdate(); + // + // selectedTabIndex = event.detail; + }); + pageSize?.addEventListener('sl-page-size-change', event => { + console.log('sl-page-size-change event', event, event.detail); + paginator.itemsPerPage = event.detail; + visibleItems.itemsPerPage = event.detail; + // paginator.requestUpdate(); + // + // selectedTabIndex = event.detail; + }); + }); // .itemsPerPage=${itemsPerPage} + return html` + + + + `; + } +} satisfies Meta; + +// TODO: is slot necessary? + + +//

With links

+// + +export const Basic: Story = { + args: { + actions: () => html`Remove`, + content: () => html`

Panel content

` + } +}; + +export const Overflow: Story = { + args: { + ...Basic.args, + total: 1000 + } +}; + +// TODO: Mobile +export const Mobile: Story = { + args: { + ...Basic.args, + total: 100 + }, + parameters: { + viewport: { + defaultViewport: 'iphone5' + } + } +}; + +export const ItemsPerPage: Story = { + args: { + ...Basic.args, + total: 100 + }, + render: ({pageSizes, itemsPerPage}) => { + let pageSize = document.querySelector('sl-page-size') as PageSize; + setTimeout(() => { + pageSize = document.querySelector('sl-page-size') as PageSize; + + pageSize?.addEventListener('sl-page-size-change', event => { + console.log('sl-page-size-change event', event, event.detail); + itemsPerPage = event.detail; + const pEl = document.querySelector('p.info'); + console.log('pEl', pEl); + }); + }) + return html` + +

TODO...

+ +

There will be shown ${itemsPerPage} items per page. ${pageSize?.itemsPerPage}

+ `} +}; + + +export const VisibleItemsAmount: Story = { + render: () => html` + +

TODO...

+ ` +}; + + +// export const Links: Story = { +// args: { +// ...Basic.args, +// total: 100 +// } +// }; + +// export const LinksSlotted: Story = { +// args: { +// total: 52, +// itemsPerPage: 15, +// pageSizes: [5, 10, 15] +// }, +// argTypes: { +// actions: { +// table: { disable: true } +// }, +// content: { +// table: { disable: true } +// } +// }, +// render: ({total, itemsPerPage, pageSizes}) => html` +// +// +// 1 +// 2 +// 3 +// +// ` +// }; + +export const ExampleWithCards: Story = { + render: () => { + // setTimeout(() => { + const total = 100; + const pageSizes = [5, 10, 15]; + let itemsPerPage = 10; + let activePage = 2; + let items: TemplateResult[] = []; + let start = 1; + let end = 1; + let currentlyVisibleItems = 15; + + const pages = Math.ceil(total / itemsPerPage) || 2; + + if (activePage === pages) { + console.log('last page is active'); + currentlyVisibleItems = total % itemsPerPage; + } else { + currentlyVisibleItems = itemsPerPage; + } + + start = activePage === 1 ? 0 : ((activePage - 1) * itemsPerPage); + end = activePage === pages ? total : activePage * currentlyVisibleItems; + + console.log('1in example start and end', start, end, Array.from({length: total}).slice(start, end).map((_, index) => index)); + + items = Array.from({length: total}).map( // TODO: slice the array + (_, index) => html` + +

Card number ${index + 1}

+

Example body text

+ + ` + ); + + // items.slice(start, end); + + requestAnimationFrame(() => { + const paginator = document.querySelector('sl-paginator') as Paginator; + console.log('paginator in example cards', paginator, paginator?.activePage); + + // TODO: use itemsPerPage and activePage + items = Array.from({length: total}).map( // TODO: slice the array + (_, index) => html` + +

Card number ${index + 1}

+

Example body text

+ + ` + ); + + const pages = Math.ceil(total / itemsPerPage) || 2; + + // TODO: use paginator activePage and so on + start = paginator.activePage === 1 ? 1 : ((paginator.activePage - 1) * itemsPerPage) + 1; + end = paginator.activePage === pages ? total : paginator.activePage * paginator.currentlyVisibleItems; + + + console.log('in example start and end', start, end); + + + paginator?.addEventListener('sl-page-change', event => { + console.log('sl-page-change event', event, event.detail); + + start = event.detail === 1 ? 0 : ((event.detail - 1) * itemsPerPage); + end = event.detail === pages ? total : event.detail * currentlyVisibleItems; + + const toRemove = document.querySelector('.results')?.children; + + console.log('in example start and end on page change', start, end, items.slice(start, end), toRemove); + + // toRemove?.remove(); + // document drop and appendchild with new items? + + + // TODO: request update?? + + + }); + }); + + + // TODO: use paginator activePage and so on + // const start = this.activePage === 1 ? 1 : ((this.activePage - 1) * itemsPerPage) + 1; + // const end = this.activePage === this.#pages ? this.total : this.activePage * this.currentlyVisibleItems; + +/* // TODO: use itemsPerPage and activePage + const items = Array.from({length: total}).map( // TODO: slice the array + (_, index) => html` + +

Card number ${index + 1}

+

Example body text

+ + ` + );*/ + // }); + + console.log('items and sliced', items, items.slice(start, end)); + + return html` + +

Paginator with example content

+
+ start: ${start} end: ${end} + ${items.slice(start, end)} +
+ +

Captivating Nyhavn Moments

+

Example body text

+ + + ` + } +}; + +export const All: Story = { + render: () => html` + +

TODO...

+ ` +}; + +// TODO: example with cards + +// TODO: example with grid and dataSource diff --git a/packages/components/paginator/src/paginator.ts b/packages/components/paginator/src/paginator.ts new file mode 100644 index 0000000000..134a5e7dec --- /dev/null +++ b/packages/components/paginator/src/paginator.ts @@ -0,0 +1,725 @@ +import { faCaretLeft, faCaretRight } from '@fortawesome/pro-solid-svg-icons'; +import { localized } from '@lit/localize'; +import { type ScopedElementsMap, ScopedElementsMixin } from '@open-wc/scoped-elements/lit-element.js'; +import { Button } from '@sl-design-system/button'; +import { Icon } from '@sl-design-system/icon'; +import { Select, SelectOption } from '@sl-design-system/select'; +import {Menu, MenuButton, MenuItem} from '@sl-design-system/menu'; +import {type EventEmitter, event} from '@sl-design-system/shared'; +import {type CSSResultGroup, LitElement, type TemplateResult, html, type PropertyValues} from 'lit'; +import { property, state } from 'lit/decorators.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; +import styles from './paginator.scss.js'; +import { Page } from './page.js'; + +declare global { + interface GlobalEventHandlersEventMap { + 'sl-page-change': SlPageChangeEvent; + } + + interface HTMLElementTagNameMap { + 'sl-paginator': Paginator; + } +} + +Icon.register(faCaretLeft, faCaretRight); + +export type SlPageChangeEvent = CustomEvent; + +/** + * A paginator component used when there are a lot of data that needs to be shown and cannot be shown at once, in one view/page. + * + */ +@localized() +export class Paginator extends ScopedElementsMixin(LitElement) { + /** @internal */ + static get scopedElements(): ScopedElementsMap { + return { + 'sl-button': Button, + 'sl-icon': Icon, + 'sl-menu-button': MenuButton, + 'sl-menu': Menu, + 'sl-menu-item': MenuItem, + 'sl-page': Page, + 'sl-select': Select, + 'sl-select-option': SelectOption + }; // TODO: update dependencies + } + + /** @internal */ + static override styles: CSSResultGroup = styles; + + /** + * Observe changes in size of the container. + */ + #observer = new ResizeObserver(() => {requestAnimationFrame(() => this.#onResize())}); + + #activePage = 1; + + get activePage(): number { + return this.#activePage; + } + + /** Currently active page. */ + @property() + set activePage(value: number) { + // console.log('value in setter activePage', value); + // this.#activePage = value ?? 1; + console.log('value in set activePage', value); + + // const oldValue = this.#activePage; + this.#activePage = value; // ?? 1; + this.pageChangeEvent.emit(this.#activePage); + // this.requestUpdate('activePage', oldValue); + console.log('value in setter activePage', value, this.#activePage); + } + + /** @internal Emits when the page has been selected/changed. */ + @event({ name: 'sl-page-change' }) pageChangeEvent!: EventEmitter; + + // TODO: elements per page? + + // TODO: disabled? + + /** Total amount of items */ + @property() total?: number; + + /** Page sizes - array of possible page sizes e.g. [5, 10, 15] */ + @property({ type: Number, attribute: 'page-sizes' }) pageSizes?: number[]; + + /** Items per page. Default to the first item of pageSizes, if pageSizes is not set - default to 10. */ + @property({ type: Number, attribute: 'items-per-page' }) itemsPerPage?: number; + + /** @internal pages amount */ // TODO: state maybe? + #pages: number = 1; + + /** @internal currently visible items on the current page */ + @state() currentlyVisibleItems: number = 1; + + /** The width of the menu button; used for calculating the (in)visible pages. */ + #menuButtonWidth = 0; + + /** Whether there is a mobile variant with `sl-select` instead of `pages` visible or not. */ + #mobileVariant: boolean = false; + + /** To check whether it's a first update. */ + #firstUpdate = true; + + override async connectedCallback(): Promise { + super.connectedCallback(); + + // Calculate the max inline size of the moreButton *before* we start the observer + this.#menuButtonWidth = await this.#getMenuButtonWidth(); + + if (!this.itemsPerPage) { + this.itemsPerPage = this.pageSizes ? this.pageSizes[0] : 10; + } + + const total = this.total ?? 0; + const itemsPerPage = this.itemsPerPage ?? 10; + this.#pages = Math.ceil(total / itemsPerPage) || 1; + + if (this.activePage < 1) { + this.activePage = 1; + } else if (this.activePage > this.#pages) { + this.activePage = this.#pages; + } + + console.log('pages in connectedCallback', this.#pages, this.activePage, itemsPerPage, total % itemsPerPage); + + this.#setCurrentlyVisibleItems(); + + requestAnimationFrame(() => { + this.#observer.observe(this); + + const selectWrapper = this.renderRoot.querySelector('.select-wrapper'); + + if (!this.#mobileVariant && selectWrapper) { + selectWrapper.style.display = 'none'; + } + }); + } + + override disconnectedCallback(): void { + this.#observer.disconnect(); + + super.disconnectedCallback(); + } + + override updated(changes: PropertyValues): void { + super.updated(changes); + + console.log('changes in updated', changes, this.activePage); + + if (changes.has('itemsPerPage')) { + const total = this.total ?? 0; + const itemsPerPage = this.itemsPerPage ?? 10; + this.#pages = Math.ceil(total / itemsPerPage) || 2; + + this.#setCurrentlyVisibleItems(); + + if (!this.#firstUpdate) { + // always go back to the first page when items per page has changed, but not for the first time + this.activePage = 1; + } + + requestAnimationFrame(() => { + this.#onResize(); + }); + + // TODO: on resize is not working? still mobilevariant when it should not be? + } + + if (changes.has('activePage')) { + console.log('this.activePage-1', this.activePage); + if (this.activePage < 1) { + this.activePage = 1; + } else if (this.activePage > this.#pages) { + this.activePage = this.#pages; + } + + this.#setCurrentlyVisibleItems(); + + this.#onResize(); + console.log('this.activePage-2', this.activePage); + } + + if (changes.has('total')) { + if (!this.#firstUpdate) { + // always go back to the first page when the total amount of items has changed, but not for the first time + this.activePage = 1; + } + + requestAnimationFrame(() => { + this.#onResize(); + // this.requestUpdate(); + }); + } + + this.#firstUpdate = false; + } + + override render(): TemplateResult { + const total = this.total ?? 0; + const itemsPerPage = this.itemsPerPage ?? 10; + const pages = Math.ceil(total / itemsPerPage) || 2; + + // TODO: next and previous should be wrapped by 'li' as well + + return html` + + `; + } + + // TODO: which items should be shown on current page? st. like between 16 and 30? or not necessary for data? or just im event emit activePage * visible items? + + // TODO: select for items per page? + + /** + * Handles `click` event on the previous button. + */ + #onClickPrevButton() { + this.activePage--; + + this.pageChangeEvent.emit(this.activePage); + + this.#setCurrentlyVisibleItems(); + + this.#onResize(); + } + + /** + * Handles `click` event on the next button. + */ + #onClickNextButton() { + this.activePage++; + + this.pageChangeEvent.emit(this.activePage); + + this.#setCurrentlyVisibleItems(); + + this.#onResize(); // TODO: maybe move to activePage setter? + } + + #setActive(event: Event) { + const target = event.target as HTMLElement; + this.activePage = Number(target.innerText?.trim()); + + this.pageChangeEvent.emit(this.activePage); + + this.#setCurrentlyVisibleItems(); + + this.#onResize(); + } + + #onResize(): void { // TODO: rename to #onChange ??? + const pagesWrapper = this.renderRoot.querySelector('.pages-wrapper') as HTMLDivElement; + const container = this.renderRoot.querySelector('.container'); + const buttonPrev = this.renderRoot.querySelector('sl-button.prev') as Button; + const buttonNext = this.renderRoot.querySelector('sl-button.next') as Button; + const selectWrapper = this.renderRoot.querySelector('.select-wrapper') as HTMLDivElement; + const ulElement = this.renderRoot.querySelector('ul') as HTMLUListElement; + + // reset display to check the width + pagesWrapper.style.display = ''; + buttonPrev.style.display = ''; + buttonNext.style.display = ''; + selectWrapper.style.display = 'none'; + ulElement.removeAttribute('mobile'); + this.requestUpdate(); + + console.log( + 'on RESIZE - pagesWrapper', + pagesWrapper.getBoundingClientRect().width, + pagesWrapper && pagesWrapper.clientWidth - this.#menuButtonWidth < pagesWrapper.scrollWidth, + pagesWrapper && pagesWrapper.clientWidth < pagesWrapper.scrollWidth - this.#menuButtonWidth, + pagesWrapper.clientWidth < pagesWrapper.scrollWidth - this.#menuButtonWidth, + pagesWrapper.clientWidth < pagesWrapper.scrollWidth, + pagesWrapper, + pagesWrapper?.clientWidth, + pagesWrapper?.scrollWidth, + pagesWrapper.scrollWidth - this.#menuButtonWidth, + (pagesWrapper as HTMLDivElement)?.offsetWidth, + 'container', + container, + container?.clientWidth, + container?.scrollWidth, + (container as HTMLElement)?.offsetWidth, + 'this.#menuButtonWidth', + this.#menuButtonWidth, + pagesWrapper.getBoundingClientRect(), + 'selectWrapper', + selectWrapper, + selectWrapper.clientWidth, + this.#menuButtonWidth + ); + + const pages = this.renderRoot.querySelectorAll('sl-page.page'); //this.renderRoot.querySelectorAll