From 966c362fd336a31ef5c4526d708556518bd1832f Mon Sep 17 00:00:00 2001 From: Davie Date: Thu, 16 Nov 2023 13:32:16 +0000 Subject: [PATCH] CSS Extraction & Disable Style Injection (#2655) Co-authored-by: origami-z --- .changeset/early-jars-speak.md | 12 + .prettierignore | 2 + .storybook/preview.tsx | 19 +- docs/components/QAContainer.tsx | 14 +- .../QAContainerNoStyleInjection.tsx | 42 + docs/components/index.ts | 1 + docs/css/salt-core.css | 1975 +++++++ docs/css/salt-lab.css | 4812 +++++++++++++++++ docs/decorators/withTheme.tsx | 12 +- package.json | 6 +- packages/core/package.json | 8 +- packages/core/scripts/build.mjs | 68 + .../core/src/salt-provider/SaltProvider.tsx | 19 +- packages/core/src/switch/Switch.css | 5 +- .../accordion/accordion.qa.stories.tsx | 227 +- .../core/stories/avatar/avatar.qa.stories.tsx | 21 +- .../core/stories/banner/banner.qa.stories.tsx | 56 +- .../core/stories/button/button.qa.stories.tsx | 39 +- .../core/stories/card/card.qa.stories.tsx | 34 +- .../stories/checkbox/checkbox.qa.stories.tsx | 21 +- .../form-field/form-field.qa.stories.tsx | 26 +- .../core/stories/input/input.qa.stories.tsx | 91 +- .../core/stories/link/link.qa.stories.tsx | 38 +- .../multiline-input.qa.stories.tsx | 139 +- .../core/stories/panel/panel.qa.stories.tsx | 27 +- .../radio-button/radio-button.qa.stories.tsx | 20 +- .../stories/spinner/spinner.qa.stories.tsx | 22 +- .../status-indicator.qa.stories.tsx | 27 +- .../core/stories/switch/switch.qa.stories.tsx | 22 +- .../core/stories/text/text.qa.stories.tsx | 55 +- .../core/stories/toast/toast.qa.stories.tsx | 81 +- .../toggle-button-group.qa.stories.tsx | 52 +- .../toggle-button.qa.stories.tsx | 34 +- .../stories/tooltip/tooltip.qa.stories.tsx | 38 +- packages/icons/package.json | 6 +- packages/icons/scripts/copyCss.mjs | 19 + packages/lab/package.json | 8 +- packages/lab/scripts/build.mjs | 68 + packages/styles/src/index.ts | 1 + .../src/style-injection-provider/index.tsx | 6 + .../use-style-injection/useStyleInjection.ts | 4 +- 41 files changed, 7991 insertions(+), 186 deletions(-) create mode 100644 .changeset/early-jars-speak.md create mode 100644 docs/components/QAContainerNoStyleInjection.tsx create mode 100644 docs/css/salt-core.css create mode 100644 docs/css/salt-lab.css create mode 100644 packages/core/scripts/build.mjs create mode 100644 packages/icons/scripts/copyCss.mjs create mode 100644 packages/lab/scripts/build.mjs create mode 100644 packages/styles/src/style-injection-provider/index.tsx diff --git a/.changeset/early-jars-speak.md b/.changeset/early-jars-speak.md new file mode 100644 index 00000000000..12c51f3ccc9 --- /dev/null +++ b/.changeset/early-jars-speak.md @@ -0,0 +1,12 @@ +--- +"@salt-ds/core": minor +"@salt-ds/icons": minor +"@salt-ds/lab": minor +"@salt-ds/styles": minor +--- + +Supports turning off style injection via `SaltProvider`. + +``` + +``` diff --git a/.prettierignore b/.prettierignore index 5bf099f622e..5e74e8a1bc3 100644 --- a/.prettierignore +++ b/.prettierignore @@ -18,6 +18,8 @@ storybook-static # Autogenerated CSS /packages/ag-grid-theme/uitk-ag-theme.css /packages/ag-grid-theme/salt-ag-theme.css +/docs/css/salt-core.css +/docs/css/salt-lab.css /site/snapshots /docs/public/mockServiceWorker.js diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 6e6c3dcc70d..3a8aac6ef1e 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -106,6 +106,15 @@ export const globalTypes: GlobalTypes = { title: "Scaffold", }, }, + styleInjection: { + name: "Component Style Injection", + description: "Turn on/off component style injection", + defaultValue: "enable", + toolbar: { + items: ["disable", "enable"], + title: "Component Style Injection", + }, + }, }; export const argTypes: ArgTypes = { @@ -144,8 +153,14 @@ export const parameters: Parameters = { ...rest }: ComponentProps) => ( - {/* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */} - + {children} diff --git a/docs/components/QAContainer.tsx b/docs/components/QAContainer.tsx index 46dcb796ad7..2cffd0af89d 100644 --- a/docs/components/QAContainer.tsx +++ b/docs/components/QAContainer.tsx @@ -16,6 +16,7 @@ const withBaseName = makePrefixer("saltQAContainer"); export interface QAContainerProps extends HTMLAttributes { cols?: number; height?: number; + enableStyleInjection?: boolean; imgSrc?: string; itemPadding?: number; itemWidthAuto?: boolean; @@ -65,6 +66,7 @@ export const QAContainer = ({ children, className, cols = 3, + enableStyleInjection = true, height, itemPadding, itemWidthAuto, @@ -107,10 +109,18 @@ export const QAContainer = ({ ) : ( DensityValues.map((d, i) => ( - + {children} - + {children} diff --git a/docs/components/QAContainerNoStyleInjection.tsx b/docs/components/QAContainerNoStyleInjection.tsx new file mode 100644 index 00000000000..f14d77565c1 --- /dev/null +++ b/docs/components/QAContainerNoStyleInjection.tsx @@ -0,0 +1,42 @@ +import { useEffect } from "react"; +import { QAContainer, QAContainerProps } from "./QAContainer"; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +// eslint-disable-next-line import/no-unresolved +import coreCss from "../css/salt-core.css?inline"; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +// eslint-disable-next-line import/no-unresolved +import iconCss from "../../packages/icons/src/icon/Icon.css?inline"; + +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore +// eslint-disable-next-line import/no-unresolved +import labCss from "../css/salt-lab.css?inline"; + +export const useDynamicStyleSheet = (styleSheet: string, id: string): void => { + useEffect(() => { + const styleElement = document.createElement("style"); + styleElement.id = id; + styleElement.innerHTML = styleSheet; + document.head.append(styleElement); + return () => styleElement.remove(); + }, [styleSheet, id]); +}; + +export interface QAContainerNoStyleInjectionProps extends QAContainerProps { + enableStyleInjection: false; +} + +export const QAContainerNoStyleInjection = ( + props: QAContainerNoStyleInjectionProps +) => { + // order is important! + useDynamicStyleSheet(String(iconCss), "salt-icon-css"); + useDynamicStyleSheet(String(coreCss), "salt-core-css"); + useDynamicStyleSheet(String(labCss), "salt-lab-css"); + + return ; +}; diff --git a/docs/components/index.ts b/docs/components/index.ts index d3feea8b454..951215c39d1 100644 --- a/docs/components/index.ts +++ b/docs/components/index.ts @@ -1,3 +1,4 @@ export * from "./AllRenderer"; export * from "./BackgroundBlock"; export * from "./QAContainer"; +export * from "./QAContainerNoStyleInjection"; diff --git a/docs/css/salt-core.css b/docs/css/salt-core.css new file mode 100644 index 00000000000..fc2b21abab3 --- /dev/null +++ b/docs/css/salt-core.css @@ -0,0 +1,1975 @@ +/* src/accordion/Accordion.css */ +.saltAccordion { + border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor); +} +.saltAccordion-error { + border-top-color: var(--salt-status-error-borderColor); +} +.saltAccordion-warning { + border-top-color: var(--salt-status-warning-borderColor); +} +.saltAccordion-success { + border-top-color: var(--salt-status-success-borderColor); +} + +/* src/accordion/AccordionGroup.css */ +.saltAccordionGroup { + border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor); +} + +/* src/accordion/AccordionHeader.css */ +.saltAccordionHeader { + display: flex; + gap: var(--salt-spacing-100); + padding: var(--salt-spacing-50) var(--salt-spacing-100); + align-items: center; + border: 0; + width: 100%; + min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + background: var(--salt-actionable-secondary-background); + font-size: var(--salt-text-fontSize); + line-height: var(--salt-text-lineHeight); + font-family: var(--salt-text-fontFamily); + color: var(--salt-text-primary-foreground); + font-weight: var(--salt-text-fontWeight-strong); + --saltIcon-color: currentcolor; + text-align: left; + cursor: var(--salt-actionable-cursor-hover); +} +.saltAccordionHeader:focus-visible { + outline: var(--salt-focused-outline); + outline-offset: calc(-1 * var(--salt-focused-outlineWidth)); +} +.saltAccordionHeader:disabled { + background: var(--salt-actionable-secondary-background); + color: var(--salt-text-primary-foreground-disabled); + --saltIcon-fill: var(--salt-text-primary-foreground-disabled); +} +.saltAccordionHeader-icon { + transition: transform var(--salt-duration-perceptible) ease-in-out; +} +.saltAccordionHeader[aria-expanded=true] > .saltAccordionHeader-icon { + transform: rotate(90deg); +} +.saltAccordionHeader-error { + background: var(--salt-status-error-background); +} +.saltAccordionHeader-error:focus-visible { + outline-color: var(--salt-status-error-borderColor); +} +.saltAccordionHeader-warning { + background: var(--salt-status-warning-background); +} +.saltAccordionHeader-warning:focus-visible { + outline-color: var(--salt-status-warning-borderColor); +} +.saltAccordionHeader-success { + background: var(--salt-status-success-background); +} +.saltAccordionHeader-success:focus-visible { + outline-color: var(--salt-status-error-borderColor); +} +.saltAccordionHeader .saltAccordionHeader-statusIndicator { + margin-left: auto; +} + +/* src/accordion/AccordionPanel.css */ +.saltAccordionPanel { + display: grid; + transition: + grid-template-rows var(--salt-duration-perceptible) ease-in-out, + opacity var(--salt-duration-perceptible) ease-in-out, + visibility var(--salt-duration-perceptible) ease-in-out; +} +.saltAccordionPanel[aria-hidden=true] { + grid-template-rows: 0fr; + opacity: 0; + visibility: hidden; +} +.saltAccordionPanel { + grid-template-rows: 1fr; + opacity: 1; + visibility: visible; +} +.saltAccordionPanel-inner { + overflow: hidden; +} +.saltAccordionPanel-content { + padding-left: calc(var(--salt-spacing-200) + var(--salt-size-icon)); + padding-right: var(--salt-spacing-100); + padding-top: var(--salt-spacing-300); + padding-bottom: var(--salt-spacing-300); +} +@media (prefers-reduced-motion: reduce) { + .saltAccordionPanel { + transition: none; + } +} + +/* src/avatar/Avatar.css */ +.saltAvatar { + --avatar-foreground: var(--saltAvatar-foreground, var(--salt-accent-foreground)); + --avatar-size-multiplier: var(--saltAvatar-size-multiplier, 1); + --avatar-base-size: var(--salt-size-base, 12px); + --avatar-base-fontSize: var(--saltAvatar-fontSize, var(--salt-accent-fontSize)); + --avatar-container-size: calc(var(--avatar-base-size) * var(--avatar-size-multiplier)); + --avatar-fontSize: calc(var(--avatar-base-fontSize) * var(--avatar-size-multiplier)); + --saltIcon-color: var(--avatar-foreground); + --salt-icon-size-base: calc(var(--avatar-container-size) / 2); +} +.saltAvatar { + line-height: var(--saltAvatar-lineHeight, var(--salt-accent-lineHeight)); + display: flex; + justify-content: center; + align-items: center; + background: var(--saltAvatar-background, var(--salt-accent-background)); + color: var(--avatar-foreground); + font-size: var(--avatar-fontSize); + width: var(--avatar-container-size); + min-width: var(--avatar-container-size); + height: var(--avatar-container-size); + min-height: var(--avatar-container-size); + overflow: hidden; + user-select: none; + border-radius: 50%; +} +.saltAvatar:has(img), +.saltAvatar-withImage { + background: none; +} +.saltAvatar > img, +.saltAvatar > svg:not(.saltIcon) { + width: 100%; + height: 100%; +} + +/* src/badge/Badge.css */ +.saltBadge { + display: inline-flex; + position: relative; + flex-shrink: 0; + vertical-align: middle; +} +.saltBadge-badge { + padding-left: var(--salt-spacing-50); + padding-right: var(--salt-spacing-50); + line-height: var(--salt-accent-lineHeight); + height: var(--salt-accent-lineHeight); + min-width: var(--salt-accent-lineHeight); + border-radius: 9999px; + white-space: nowrap; + z-index: var(--salt-zIndex-notification); + align-items: center; + justify-content: center; + display: inline-flex; + margin: auto; + font-size: var(--salt-accent-fontSize); + font-weight: var(--salt-accent-fontWeight); + background: var(--salt-accent-background); + color: var(--salt-accent-foreground); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.saltBadge-topRight { + position: absolute; + right: var(--salt-spacing-100); + transform: translateX(100%); +} + +/* src/banner/Banner.css */ +.saltBanner { + --banner-background: var(--salt-container-primary-background); + background: var(--saltBanner-background, var(--banner-background)); + border-color: var(--saltBanner-borderColor, var(--banner-borderColor)); + border-width: var(--saltBanner-borderWidth, var(--salt-size-border)); + border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle)); + box-sizing: border-box; + display: inline-flex; + gap: var(--salt-spacing-75); + padding: var(--saltBanner-padding, var(--salt-spacing-50) var(--salt-spacing-100)); + width: 100%; + min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); +} +.saltBanner-icon.saltIcon { + min-height: var(--salt-size-base); +} +.saltBanner-info { + --banner-borderColor: var(--salt-status-info-borderColor); +} +.saltBanner-error { + --banner-borderColor: var(--salt-status-error-borderColor); +} +.saltBanner-warning { + --banner-borderColor: var(--salt-status-warning-borderColor); +} +.saltBanner-success { + --banner-borderColor: var(--salt-status-success-borderColor); +} +.saltBanner-secondary.saltBanner-info { + --banner-background: var(--salt-status-info-background); +} +.saltBanner-secondary.saltBanner-error { + --banner-background: var(--salt-status-error-background); +} +.saltBanner-secondary.saltBanner-warning { + --banner-background: var(--salt-status-warning-background); +} +.saltBanner-secondary.saltBanner-success { + --banner-background: var(--salt-status-success-background); +} + +/* src/banner/BannerActions.css */ +.saltBannerActions { + margin-bottom: auto; + display: flex; + gap: var(--salt-spacing-100); + align-items: center; + min-height: var(--salt-size-base); +} + +/* src/banner/BannerContent.css */ +.saltBannerContent { + flex: 1 0; + margin: var(--salt-spacing-75) 0; +} + +/* src/border-item/BorderItem.css */ +.saltBorderItem-sticky { + position: sticky; + overflow: auto; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +/* src/button/Button.css */ +.saltButton-cta { + --button-background: var(--salt-actionable-cta-background); + --button-background-active: var(--salt-actionable-cta-background-active); + --button-background-disabled: var(--salt-actionable-cta-background-disabled); + --button-background-hover: var(--salt-actionable-cta-background-hover); + --button-fontWeight: var(--salt-actionable-cta-fontWeight); + --button-text-color: var(--salt-actionable-cta-foreground); + --button-text-color-active: var(--salt-actionable-cta-foreground-active); + --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled); + --button-text-color-hover: var(--salt-actionable-cta-foreground-hover); +} +.saltButton-cta { + --saltIcon-color: var(--salt-actionable-cta-foreground); +} +.saltButton-cta:hover { + --saltIcon-color: var(--salt-actionable-cta-foreground-hover); +} +.saltButton-cta:active, +.saltButton-cta.saltButton-active { + --saltIcon-color: var(--salt-actionable-cta-foreground-active); +} +.saltButton-cta.saltButton-disabled { + --saltIcon-color: var(--salt-actionable-cta-foreground-disabled); +} +.saltButton-primary { + --button-background: var(--salt-actionable-primary-background); + --button-background-active: var(--salt-actionable-primary-background-active); + --button-background-disabled: var(--salt-actionable-primary-background-disabled); + --button-background-hover: var(--salt-actionable-primary-background-hover); + --button-fontWeight: var(--salt-actionable-primary-fontWeight); + --button-text-color: var(--salt-actionable-primary-foreground); + --button-text-color-active: var(--salt-actionable-primary-foreground-active); + --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled); + --button-text-color-hover: var(--salt-actionable-primary-foreground-hover); +} +.saltButton-primary { + --saltIcon-color: var(--salt-actionable-primary-foreground); +} +.saltButton-primary:hover { + --saltIcon-color: var(--salt-actionable-primary-foreground-hover); +} +.saltButton-primary:active, +.saltButton-primary.saltButton-active { + --saltIcon-color: var(--salt-actionable-primary-foreground-active); +} +.saltButton-primary.saltButton-disabled { + --saltIcon-color: var(--salt-actionable-primary-foreground-disabled); +} +.saltButton-secondary { + --button-background: var(--salt-actionable-secondary-background); + --button-background-active: var(--salt-actionable-secondary-background-active); + --button-background-disabled: var(--salt-actionable-secondary-background-disabled); + --button-background-hover: var(--salt-actionable-secondary-background-hover); + --button-fontWeight: var(--salt-actionable-secondary-fontWeight); + --button-text-color: var(--salt-actionable-secondary-foreground); + --button-text-color-active: var(--salt-actionable-secondary-foreground-active); + --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled); + --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover); +} +.saltButton-secondary { + --saltIcon-color: var(--salt-actionable-secondary-foreground); +} +.saltButton-secondary:hover { + --saltIcon-color: var(--salt-actionable-secondary-foreground-hover); +} +.saltButton-secondary:active, +.saltButton-secondary.saltButton-active { + --saltIcon-color: var(--salt-actionable-secondary-foreground-active); +} +.saltButton-secondary.saltButton-disabled { + --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled); +} +.saltButton { + align-items: var(--saltButton-alignItems, center); + appearance: none; + background: var(--saltButton-background, var(--button-background)); + border-color: var(--saltButton-borderColor, transparent); + border-style: var(--saltButton-borderStyle, solid); + border-width: var(--saltButton-borderWidth, 0); + border-radius: var(--saltButton-borderRadius, 0); + color: var(--saltButton-text-color, var(--button-text-color)); + cursor: var(--saltButton-cursor, pointer); + display: inline-flex; + gap: var(--salt-spacing-50); + justify-content: var(--saltButton-justifyContent, center); + font-size: var(--saltButton-fontSize, var(--salt-text-fontSize)); + font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily)); + line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight)); + letter-spacing: var(--saltButton-letterSpacing, var(--salt-actionable-letterSpacing)); + text-transform: var(--saltButton-textTransform, var(--salt-actionable-textTransform)); + padding: 0 var(--saltButton-padding, var(--salt-size-unit)); + margin: var(--saltButton-margin, 0); + height: var(--saltButton-height, var(--salt-size-base)); + min-width: var(--saltButton-minWidth, unset); + position: relative; + text-align: var(--saltButton-textAlign, var(--salt-actionable-textAlign)); + text-decoration: none; + transition: none; + width: var(--saltButton-width, auto); + -webkit-appearance: none; + -webkit-tap-highlight-color: transparent; + font-weight: var(--saltButton-fontWeight, var(--button-fontWeight)); +} +.saltButton:focus-visible { + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); + outline-color: var(--salt-focused-outlineColor); + outline-offset: var(--salt-focused-outlineOffset); + background: var(--saltButton-background-hover, var(--button-background-hover)); + color: var(--saltButton-text-color-hover, var(--button-text-color-hover)); +} +.saltButton.saltButton-active:focus-visible, +.saltButton:focus-visible(:active) { + background: var(--saltButton-background-active-hover, var(--button-background)); + color: var(--saltButton-text-color-active-hover, var(--button-text-color)); +} +.saltButton:hover { + background: var(--saltButton-background-hover, var(--button-background-hover)); + color: var(--saltButton-text-color-hover, var(--button-text-color-hover)); +} +.saltButton:active, +.saltButton.saltButton-active { + background: var(--saltButton-background-active, var(--button-background-active)); + color: var(--saltButton-text-color-active, var(--button-text-color-active)); +} +.saltButton:disabled, +.saltButton-disabled, +.saltButton-disabled:active, +.saltButton-disabled:focus-visible, +.saltButton-disabled:hover { + background: var(--saltButton-background-disabled, var(--button-background-disabled)); + color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled)); + cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled)); +} +.saltButton[href] { + display: inline-flex; +} + +/* src/card/Card.css */ +.saltCard { + box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow)); + border-width: var(--salt-size-border); + border-style: var(--salt-container-borderStyle); + padding: var(--saltCard-padding, var(--salt-spacing-300)); +} +.saltCard-primary { + background: var(--saltCard-background, var(--salt-container-primary-background)); + border-color: var(--salt-container-primary-borderColor); +} +.saltCard-secondary { + background: var(--saltCard-background, var(--salt-container-secondary-background)); + border-color: var(--salt-container-secondary-borderColor); +} +.saltCard-interactable { + display: block; + transition: none; +} +a:focus .saltCard-interactable, +.saltCard-interactable:hover { + box-shadow: var(--saltCard-boxShadow-hover, var(--salt-overlayable-shadow-hover)); + cursor: var(--saltCard-cursor-hover, var(--salt-selectable-cursor-hover)); + position: relative; +} +.saltCard-interactable:active { + box-shadow: var(--saltCard-boxShadow-active, var(--salt-overlayable-shadow-hover)); + outline: var(--salt-focused-outline); + outline-offset: var(--salt-focused-outlineOffset); +} +a:focus .saltCard-interactable.saltCard-disabled, +.saltCard-interactable.saltCard-disabled:hover, +.saltCard-interactable.saltCard-disabled:active { + box-shadow: var(--saltCard-boxShadow-disabled, var(--salt-overlayable-shadow)); +} +.saltCard-disabled, +.saltCard-disabled.saltCard-interactable, +a:focus .saltCard-interactable.saltCard-disabled { + border-color: var(--salt-container-primary-borderColor-disabled); + color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled)); + cursor: var(--saltCard-cursor-disabled, var(--salt-selectable-cursor-disabled)); + outline: none; +} +.saltCard-disabled div { + pointer-events: none; +} + +/* src/card/InteractableCard.css */ +.saltInteractableCard { + box-shadow: var(--saltCard-boxShadow, var(--salt-overlayable-shadow)); + border-width: var(--saltCard-borderWidth, var(--card-borderWidth)); + border-style: var(--saltCard-borderStyle, var(--salt-container-borderStyle)); + border-color: var(--saltCard-borderColor, var(--salt-accent-borderColor)); + border-radius: var(--saltCard-borderRadius, 0); + display: block; + transition: box-shadow var(--salt-duration-instant) cubic-bezier(0.4, 0, 0.2, 1); + padding: var(--saltCard-padding, var(--salt-spacing-300)); +} +.saltInteractableCard-primary { + background: var(--saltCard-background, var(--salt-container-primary-background)); +} +.saltInteractableCard-secondary { + background: var(--saltCard-background, var(--salt-container-secondary-background)); +} +.saltInteractableCard-accentBottom { + --card-borderWidth: 0 0 var(--salt-size-accent) 0; +} +.saltInteractableCard-accentLeft { + --card-borderWidth: 0 0 0 var(--salt-size-accent); +} +.saltInteractableCard-accentTop { + --card-borderWidth: var(--salt-size-accent) 0 0 0; +} +.saltInteractableCard-accentRight { + --card-borderWidth: 0 var(--salt-size-accent) 0 0; +} +a:focus-visible .saltInteractableCard, +.saltInteractableCard:focus-visible { + cursor: var(--saltCard-interactable-cursor-focus, var(--salt-selectable-cursor-hover)); + box-shadow: var(--saltCard-interactable-shadow-focus, var(--salt-overlayable-shadow-hover)); + color: var(--saltCard-color-focus, var(--salt-text-primary-foreground)); + outline-color: var(--salt-focused-outlineColor); + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); + outline-offset: var(--salt-focused-outlineOffset); +} +a:link .saltInteractableCard * { + text-decoration: none; +} +.saltInteractableCard:active { + cursor: var(--saltCard-interactable-cursor-active, var(--salt-selectable-cursor-active)); + box-shadow: var(--saltCard-interactable-shadow-active, var(--salt-overlayable-shadow-hover)); +} +.saltInteractableCard:hover { + cursor: var(--saltCard-interactable-cursor-hover, var(--salt-selectable-cursor-hover)); + box-shadow: var(--saltCard-interactable-shadow-hover, var(--salt-overlayable-shadow-hover)); +} +.saltInteractableCard-disabled, +.saltInteractableCard-disabled:focus, +.saltInteractableCard-disabled:hover, +.saltInteractableCard-disabled:active { + box-shadow: var(--saltCard-interactable-shadow, var(--salt-overlayable-shadow)); + color: var(--saltCard-color-disabled, var(--salt-text-primary-foreground-disabled)); + cursor: var(--saltCard-interactable-cursor-disabled, var(--salt-selectable-cursor-disabled)); + outline: none; +} +.saltInteractableCard-primary.saltInteractableCard-disabled, +.saltInteractableCard-primary.saltInteractableCard-disabled:focus, +.saltInteractableCard-primary.saltInteractableCard-disabled:hover, +.saltInteractableCard-primary.saltInteractableCard-disabled:active { + border-color: var(--saltCard-borderColor-disabled, var(--salt-container-primary-borderColor-disabled)); + background: var(--saltCard-background-disabled, var(--salt-container-primary-background-disabled)); +} +.saltInteractableCard-secondary.saltInteractableCard-disabled, +.saltInteractableCard-secondary.saltInteractableCard-disabled:focus, +.saltInteractableCard-secondary.saltInteractableCard-disabled:hover, +.saltInteractableCard-secondary.saltInteractableCard-disabled:active { + border-color: var(--saltCard-borderColor-disabled, var(--salt-container-secondary-borderColor-disabled)); + background: var(--saltCard-background-disabled, var(--salt-container-secondary-background)); +} +.saltInteractableCard-disabled div { + pointer-events: none; +} +.saltInteractableCard-link { + color: var(--saltCard-link-color, var(--salt-text-primary-foreground)); + inset: var(--salt-focused-outlineInset); + outline-color: var(--salt-focused-outlineColor); + outline-offset: var(--salt-focused-outlineOffset); + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); +} + +/* src/checkbox/Checkbox.css */ +.saltCheckbox { + display: flex; + gap: var(--salt-spacing-100); + position: relative; + cursor: var(--salt-selectable-cursor-hover); + font-size: var(--salt-text-fontSize); + line-height: var(--salt-text-lineHeight); + font-family: var(--salt-text-fontFamily); + font-weight: var(--salt-text-fontWeight); +} +.saltCheckbox-disabled { + color: var(--salt-text-primary-foreground-disabled); + cursor: var(--salt-selectable-cursor-disabled); +} +.saltCheckbox-readOnly { + color: var(--salt-text-primary-foreground); + cursor: var(--salt-selectable-cursor-readonly); +} +.saltCheckbox-input, +.saltCheckboxIcon { + margin-top: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2); +} +.saltCheckboxIcon > svg { + transform: translate(0px, 0px); +} +.saltCheckbox-input:focus-visible + .saltCheckboxIcon { + outline-offset: var(--salt-focused-outlineOffset); + outline: var(--saltCheckbox-outline, var(--salt-focused-outline)); + border-color: var(--salt-selectable-borderColor-hover); + color: var(--salt-selectable-foreground-hover); +} +.saltCheckbox-input:focus-visible + .saltCheckboxIcon-checked { + border-color: var(--salt-selectable-borderColor-selected); + color: var(--salt-selectable-foreground-selected); +} +.saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon { + outline-color: var(--salt-status-error-foreground); + border-color: var(--salt-status-error-foreground); + color: var(--salt-status-error-foreground); +} +.saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon { + outline-color: var(--salt-status-warning-foreground); + border-color: var(--salt-status-warning-foreground); + color: var(--salt-status-warning-foreground); +} +.saltCheckbox-input { + cursor: inherit; + margin: 0; + opacity: 0; + padding: 0; + position: absolute; + z-index: var(--salt-zIndex-default); +} + +/* src/checkbox/CheckboxGroup.css */ +.saltCheckboxGroup { + border: none; + margin: 0; + padding: 0; +} +.saltCheckboxGroup-horizontal { + display: flex; + gap: var(--salt-spacing-200); + flex-direction: row; + flex-wrap: wrap; +} +.saltCheckboxGroup-vertical { + display: flex; + gap: var(--salt-spacing-100); + flex-direction: column; +} +.saltCheckboxGroup-noWrap { + flex-wrap: nowrap; +} +.saltCheckboxGroup-noWrap .saltCheckbox { + white-space: break-spaces; +} +.saltFormField-labelLeft .saltCheckboxGroup, +.saltFormField-labelRight .saltCheckboxGroup { + padding-top: var(--salt-spacing-100); +} + +/* src/checkbox/CheckboxIcon.css */ +.saltCheckboxIcon { + --checkbox-size: var(--salt-size-selectable); + width: var(--checkbox-size); + min-width: var(--checkbox-size); + height: var(--checkbox-size); + min-height: var(--checkbox-size); + border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor); + color: var(--salt-selectable-foreground); + background: var(--salt-container-primary-background); + position: relative; + --saltIcon-color: currentColor; + --saltIcon-size: 100%; + display: flex; +} +.saltCheckbox:hover .saltCheckboxIcon, +.saltCheckbox:hover .saltCheckboxIcon-indeterminate { + border-color: var(--salt-selectable-borderColor-hover); + color: var(--salt-selectable-foreground-hover); +} +.saltCheckboxIcon-checked, +.saltCheckbox:hover .saltCheckboxIcon-checked { + border-color: var(--salt-selectable-borderColor-selected); + color: var(--salt-selectable-foreground-selected); +} +.saltCheckboxIcon-disabled, +.saltCheckbox:hover .saltCheckboxIcon-disabled, +.saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate, +.saltCheckbox:hover .saltCheckboxIcon-disabled.saltCheckboxIcon-indeterminate { + border-color: var(--salt-selectable-borderColor-disabled); + background: var(--salt-container-primary-background-disabled); + color: var(--salt-selectable-foreground-disabled); +} +.saltCheckboxIcon-checked.saltCheckboxIcon-disabled, +.saltCheckbox:hover .saltCheckboxIcon-checked.saltCheckboxIcon-disabled { + border-color: var(--salt-selectable-borderColor-selectedDisabled); + color: var(--salt-selectable-foreground-selectedDisabled); +} +.saltCheckboxIcon-indeterminate::before { + content: ""; + position: absolute; + top: 50%; + left: 50%; + width: calc(var(--checkbox-size) - 6px); + height: 2px; + background: currentColor; + transform: translate(-50%, -50%); +} +.saltCheckboxIcon-error, +.saltCheckbox:hover .saltCheckboxIcon-error { + color: var(--salt-status-error-foreground); + border-color: var(--salt-status-error-borderColor); + outline-color: var(--salt-status-error-foreground); +} +.saltCheckboxIcon-warning, +.saltCheckbox:hover .saltCheckboxIcon-warning { + color: var(--salt-status-warning-foreground); + border-color: var(--salt-status-warning-borderColor); + outline-color: var(--salt-status-warning-foreground); +} +.saltCheckboxIcon-readOnly, +.saltCheckbox:hover .saltCheckboxIcon-readOnly { + border-color: var(--salt-selectable-borderColor-readonly); + color: var(--salt-text-primary-foreground); +} + +/* src/flex-item/FlexItem.css */ +.saltFlexItem { + --saltFlexItem-alignment: auto; + --saltFlexItem-shrink: 1; + --saltFlexItem-grow: 0; + --saltFlexItem-basis: auto; +} +.saltFlexItem { + position: relative; + align-self: var(--saltFlexItem-alignment); + flex-grow: var(--saltFlexItem-grow); + flex-shrink: var(--saltFlexItem-shrink); + flex-basis: var(--saltFlexItem-basis); +} +.saltFlexItem-stacked { + flex-grow: 2; +} + +/* src/flex-layout/FlexLayout.css */ +.saltFlexLayout { + --flexLayout-gap-multiplier: var(--flexLayout-gap-density-multiplier, 3); + --flexLayout-layout-display: flex; + --flexLayout-direction: row; + --flexLayout-wrap: nowrap; + --flexLayout-justify: flex-start; + --flexLayout-align: stretch; + --flexLayout-separator: var(--salt-size-border); + --flexLayout-gap: calc(var(--salt-size-unit) * var(--flexLayout-gap-multiplier)); +} +.saltFlexLayout { + gap: var(--flexLayout-gap); + display: var(--flexLayout-layout-display); + flex-direction: var(--flexLayout-direction); + flex-wrap: var(--flexLayout-wrap); + justify-content: var(--flexLayout-justify); + align-items: var(--flexLayout-align); +} +.saltFlexLayout-separator { + gap: calc(var(--flexLayout-gap) * 2); +} +.saltFlexLayout-separator > * { + position: relative; +} +.saltFlexLayout-separator > *:not(:last-child)::after { + position: absolute; + display: block; + content: ""; + background-color: var(--salt-separable-secondary-borderColor); +} +.saltFlexLayout-separator-row > *:not(:last-child)::after { + height: 100%; +} +.saltFlexLayout-separator-row > *:not(:last-child)::after { + width: var(--flexLayout-separator); + top: 0; +} +.saltFlexLayout-separator-row-start > *:not(:last-child)::after { + right: 0; +} +.saltFlexLayout-separator-row-center > *:not(:last-child)::after { + right: calc(var(--flexLayout-gap) * -1); +} +.saltFlexLayout-separator-row-end > *:not(:last-child)::after { + right: calc(var(--flexLayout-gap) * -2); +} +.saltFlexLayout-separator-column > *:not(:last-child)::after { + width: 100%; +} +.saltFlexLayout-separator-column > *:not(:last-child)::after { + height: var(--flexLayout-separator); + left: 0; + width: 100%; +} +.saltFlexLayout-separator-column-start > *:not(:last-child)::after { + bottom: 0; +} +.saltFlexLayout-separator-column-center > *:not(:last-child)::after { + bottom: calc(var(--flexLayout-gap) * -1); +} +.saltFlexLayout-separator-column-end > *:not(:last-child)::after { + bottom: calc(var(--flexLayout-gap) * -2); +} + +/* src/form-field/FormField.css */ +.saltFormField { + display: inline-grid; + position: relative; + gap: var(--salt-spacing-100); + text-align: left; + width: var(--saltFormField-width, 100%); +} +.saltFormField-labelTop { + grid-template-areas: "label" "controls"; +} +.saltFormField-labelTop .saltFormFieldHelperText { + grid-area: 3 / 1; +} +.saltFormField-labelLeft { + align-self: center; + grid-template-columns: var(--formField-label-width, 40%) 1fr; + grid-template-areas: "label controls"; +} +.saltFormField-labelRight { + align-self: center; + grid-template-columns: var(--formField-label-width, 40%) 1fr; + grid-template-areas: "label controls"; +} +.saltFormField-labelLeft .saltFormFieldHelperText, +.saltFormField-labelRight .saltFormFieldHelperText { + grid-area: 2 / 2; +} +.saltFormField-labelRight .saltFormFieldLabel, +.saltFormField-labelLeft .saltFormFieldLabel { + padding-top: var(--salt-spacing-100); +} +.saltFormField-labelRight .saltFormFieldLabel { + text-align: right; +} +.saltFormField-controls { + align-items: center; + display: grid; + grid-auto-columns: minmax(0, 1fr); + grid-auto-flow: column; + grid-column-gap: var(--salt-spacing-100); +} +.saltFormFieldLabel { + grid-area: label; +} +.saltFormFieldHelperText { + grid-area: helperText; +} +.saltFormField-disabled { + --saltInput-outline: none; + --saltCheckbox-outline: none; + --saltRadioButton-outline: none; +} + +/* src/form-field/FormFieldHelperText.css */ +.saltFormFieldHelperText { + cursor: default; + display: flex; + flex-direction: row; + width: 100%; +} +.saltFormFieldHelperText .saltText { + font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle)); +} +.saltFormFieldHelperText-withValidation { + column-gap: var(--salt-spacing-75); +} + +/* src/form-field/FormFieldLabel.css */ +.saltFormFieldLabel.saltText { + font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong)); + width: 100%; +} +.saltFormFieldLabel:hover + .saltFormField-controls * { + --input-borderColor: var(--input-borderColor-hover); +} +.saltFormField-labelLeft .saltFormFieldLabel.saltText { + align-self: baseline; + padding-top: var(--salt-spacing-100); +} +.saltFormFieldLabel-necessityLabel { + font-weight: var(--salt-text-fontWeight); + font-style: var(--salt-editable-help-fontStyle); +} +.saltFormFieldLabel-sentence.saltText { + color: var(--salt-text-primary-foreground); + font-size: var(--salt-text-fontSize); +} + +/* src/grid-item/GridItem.css */ +.saltGridItem { + justify-self: var(--gridItem-justifySelf); + align-self: var(--gridItem-alignSelf); + grid-row-start: var(--gridItem-gridRowStart); + grid-column-start: var(--gridItem-gridColumnStart); + grid-row-end: var(--gridItem-gridRowEnd); + grid-column-end: var(--gridItem-gridColumnEnd); +} +.saltGridItem-area { + grid-area: var(--gridItem-gridArea); +} + +/* src/grid-layout/GridLayout.css */ +.salt-density-touch { + --gridLayout-gap-density-multiplier: 2; +} +.saltGridLayout { + --gridLayout-space: 1fr; + --gridLayout-rowGap: var(--gridLayout-gap-density-multiplier, 3); + --gridLayout-columnGap: var(--gridLayout-gap-density-multiplier, 3); +} +.saltGridLayout { + display: grid; + column-gap: calc(var(--salt-size-unit) * var(--gridLayout-columnGap)); + row-gap: calc(var(--salt-size-unit) * var(--gridLayout-rowGap)); + grid-template-columns: repeat(var(--gridLayout-columns), var(--gridLayout-space)); + grid-template-rows: repeat(var(--gridLayout-rows), var(--gridLayout-space)); + grid-auto-columns: auto; + grid-auto-rows: auto; +} +.saltGridLayout-area { + grid-template: var(--gridLayout-gridTemplate); + grid-template-columns: min-content 1fr min-content; + grid-template-rows: min-content 1fr min-content; +} + +/* src/input/Input.css */ +.saltInput { + --input-borderColor: var(--salt-editable-borderColor); + --input-borderStyle: var(--salt-editable-borderStyle); + --input-outlineColor: var(--salt-focused-outlineColor); + --input-borderWidth: var(--salt-size-border); + align-items: center; + background: var(--saltInput-background, var(--input-background)); + color: var(--saltInput-color, var(--salt-text-primary-foreground)); + display: inline-flex; + font-family: var(--salt-text-fontFamily); + font-size: var(--saltInput-fontSize, var(--salt-text-fontSize)); + height: var(--saltInput-height, var(--salt-size-base)); + line-height: var(--saltInput-lineHeight, var(--salt-text-lineHeight)); + min-height: var(--saltInput-minHeight, var(--salt-size-base)); + min-width: var(--saltInput-minWidth, 4em); + padding-left: var(--saltInput-paddingLeft, var(--salt-spacing-100)); + padding-right: var(--saltInput-paddingRight, var(--salt-spacing-100)); + position: relative; + width: 100%; +} +.saltInput:hover { + --input-borderStyle: var(--salt-editable-borderStyle-hover); + --input-borderColor: var(--salt-editable-borderColor-hover); + background: var(--saltInput-background-hover, var(--input-background-hover)); + cursor: var(--salt-editable-cursor-hover); +} +.saltInput:active { + --input-borderColor: var(--salt-editable-borderColor-active); + --input-borderStyle: var(--salt-editable-borderStyle-active); + --input-borderWidth: var(--salt-editable-borderWidth-active); + background: var(--saltInput-background-active, var(--input-background-active)); + cursor: var(--salt-editable-cursor-active); +} +.saltInput-primary { + --input-background: var(--salt-editable-primary-background); + --input-background-active: var(--salt-editable-primary-background-active); + --input-background-hover: var(--salt-editable-primary-background-hover); + --input-background-disabled: var(--salt-editable-primary-background-disabled); + --input-background-readonly: var(--salt-editable-primary-background-readonly); +} +.saltInput-secondary { + --input-background: var(--salt-editable-secondary-background); + --input-background-active: var(--salt-editable-secondary-background-active); + --input-background-hover: var(--salt-editable-secondary-background-active); + --input-background-disabled: var(--salt-editable-secondary-background-disabled); + --input-background-readonly: var(--salt-editable-secondary-background-readonly); +} +.saltInput-error, +.saltInput-error:hover { + --input-background: var(--salt-status-error-background); + --input-background-active: var(--salt-status-error-background); + --input-background-hover: var(--salt-status-error-background); + --input-borderColor: var(--salt-status-error-borderColor); + --input-outlineColor: var(--salt-status-error-borderColor); +} +.saltInput-warning, +.saltInput-warning:hover { + --input-background: var(--salt-status-warning-background); + --input-background-active: var(--salt-status-warning-background); + --input-background-hover: var(--salt-status-warning-background); + --input-borderColor: var(--salt-status-warning-borderColor); + --input-outlineColor: var(--salt-status-warning-borderColor); +} +.saltInput-success, +.saltInput-success:hover { + --input-background: var(--salt-status-success-background); + --input-background-active: var(--salt-status-success-background); + --input-background-hover: var(--salt-status-success-background); + --input-borderColor: var(--salt-status-success-borderColor); + --input-outlineColor: var(--salt-status-success-borderColor); +} +.saltInput-input { + background: none; + border: none; + box-sizing: content-box; + color: inherit; + cursor: inherit; + display: block; + flex: 1; + font: inherit; + height: 100%; + letter-spacing: var(--saltInput-letterSpacing, 0); + margin: 0; + min-width: 0; + overflow: hidden; + padding: 0; + text-align: var(--input-textAlign); + width: 100%; +} +.saltInput-input:focus { + outline: none; +} +.saltInput-input::selection { + background: var(--salt-text-background-selected); +} +.saltInput-input::placeholder { + font-weight: var(--salt-text-fontWeight-small); +} +.saltInput-focused { + --input-borderColor: var(--input-outlineColor); + --input-borderWidth: var(--salt-editable-borderWidth-active); + outline: var(--saltInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor)); +} +.saltInput.saltInput-readOnly { + --input-borderColor: var(--salt-editable-borderColor-readonly); + --input-borderStyle: var(--salt-editable-borderStyle-readonly); + --input-borderWidth: var(--salt-size-border); + background: var(--input-background-readonly); + cursor: var(--salt-editable-cursor-readonly); +} +.saltInput-focused.saltInput-disabled { + --input-borderWidth: var(--salt-size-border); + outline: none; +} +.saltInput-focused.saltInput-readOnly { + --input-borderWidth: var(--salt-size-border); +} +.saltInput-disabled .saltInput-input::selection { + background: none; +} +.saltInput.saltInput-disabled, +.saltInput.saltInput-disabled:hover, +.saltInput.saltInput-disabled:active { + --input-borderColor: var(--salt-editable-borderColor-disabled); + --input-borderStyle: var(--salt-editable-borderStyle-disabled); + --input-borderWidth: var(--salt-size-border); + background: var(--input-background-disabled); + cursor: var(--salt-editable-cursor-disabled); + color: var(--saltInput-color-disabled, var(--salt-text-primary-foreground-disabled)); +} +.saltInput-activationIndicator { + left: 0; + bottom: 0; + width: 100%; + position: absolute; + border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor); +} +.saltInput-startAdornmentContainer { + align-items: center; + display: inline-flex; + padding-right: var(--salt-spacing-100); + column-gap: var(--salt-spacing-100); +} +.saltInput-endAdornmentContainer { + align-items: center; + display: inline-flex; + padding-left: var(--salt-spacing-100); + column-gap: var(--salt-spacing-100); +} +.saltInput-readOnly .saltInput-startAdornmentContainer { + margin-left: var(--salt-spacing-50); +} +.saltInput-startAdornmentContainer .saltButton ~ .saltButton { + margin-left: calc(-1 * var(--salt-spacing-50)); +} +.saltInput-endAdornmentContainer .saltButton ~ .saltButton { + margin-left: calc(-1 * var(--salt-spacing-50)); +} +.saltInput-startAdornmentContainer .saltButton:first-child { + margin-left: calc(var(--salt-spacing-50) * -1); +} +.saltInput-endAdornmentContainer .saltButton:last-child { + margin-right: calc(var(--salt-spacing-50) * -1); +} +.saltInput .saltButton { + --saltButton-padding: 0; + --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100)); + --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-100)); +} + +/* src/link/Link.css */ +.saltLink { + --link-color-hover: var(--saltLink-color-hover, var(--salt-text-link-foreground-hover)); + --link-color-active: var(--saltLink-color-active, var(--salt-text-link-foreground-active)); + --link-color-visited: var(--saltLink-color-visited, var(--salt-text-link-foreground-visited)); + --link-color-focus: var(--saltLink-color-focus, var(--link-color-hover)); + --link-textDecoration: var(--salt-text-link-textDecoration); + --link-textDecoration-hover: var(--salt-text-link-textDecoration-hover); + --link-fontFamily: var(--salt-text-fontFamily); + --link-focus-outline: var(--salt-focused-outline); +} +.saltLink { + color: var(--link-color); + letter-spacing: 0px; + text-decoration: var(--link-textDecoration); + font-family: var(--link-fontFamily); +} +.saltText-primary { + --link-color: var(--salt-text-primary-foreground); +} +.saltText-secondary { + --link-color: var(--salt-text-secondary-foreground); +} +.saltLink-icon { + margin-left: var(--salt-size-adornmentGap); + margin-bottom: -2px; +} +.saltLink:visited { + --saltIcon-color: var(--link-color-visited); + color: var(--link-color-visited); +} +.saltLink:hover { + --saltIcon-color: var(--link-color-hover); + color: var(--link-color-hover); + text-decoration: var(--link-textDecoration-hover); +} +.saltLink:active { + --saltIcon-color: var(--link-color-active); + color: var(--link-color-active); +} +.saltLink:focus { + --saltIcon-color: var(--link-color-focus); + outline: var(--link-focus-outline); + color: var(--link-color-focus); + text-decoration: var(--link-textDecoration-hover); +} +.saltLink-externalLinkADA { + display: block; + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + top: 0px; + left: 0px; + opacity: 0; +} + +/* src/multiline-input/MultilineInput.css */ +.saltMultilineInput { + --multilineInput-borderColor: var(--salt-editable-borderColor); + --multilineInput-borderStyle: var(--salt-editable-borderStyle); + --multilineInput-outlineColor: var(--salt-focused-outlineColor); + --multilineInput-border: none; + --multilineInput-activationIndicator-borderWidth: var(--salt-size-border); + align-items: center; + background: var(--multilineInput-background); + border: var(--multilineInput-border); + color: var(--salt-text-primary-foreground); + display: inline-flex; + font-family: var(--salt-text-fontFamily); + font-size: var(--salt-text-fontSize); + height: auto; + line-height: var(--salt-text-lineHeight); + min-height: var(--salt-size-base); + min-width: 4em; + padding-left: var(--salt-spacing-100); + padding-right: var(--salt-spacing-100); + position: relative; + width: 100%; +} +.saltMultilineInput:hover { + --multilineInput-borderStyle: var(--salt-editable-borderStyle-hover); + --multilineInput-borderColor: var(--salt-editable-borderColor-hover); + background: var(--multilineInput-background-hover); + cursor: var(--salt-editable-cursor-hover); +} +.saltMultilineInput:active { + --multilineInput-borderColor: var(--salt-editable-borderColor-active); + --multilineInput-borderStyle: var(--salt-editable-borderStyle-active); + --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active); + background: var(--multilineInput-background-active); + cursor: var(--salt-editable-cursor-active); +} +.saltMultilineInput-primary { + --multilineInput-background: var(--salt-editable-primary-background); + --multilineInput-background-active: var(--salt-editable-primary-background-active); + --multilineInput-background-hover: var(--salt-editable-primary-background-hover); + --multilineInput-background-disabled: var(--salt-editable-primary-background-disabled); + --multilineInput-background-readonly: var(--salt-editable-primary-background-readonly); +} +.saltMultilineInput-secondary { + --multilineInput-background: var(--salt-editable-secondary-background); + --multilineInput-background-active: var(--salt-editable-secondary-background-active); + --multilineInput-background-hover: var(--salt-editable-secondary-background-active); + --multilineInput-background-disabled: var(--salt-editable-secondary-background-disabled); + --multilineInput-background-readonly: var(--salt-editable-secondary-background-readonly); +} +.saltMultilineInput-error, +.saltMultilineInput-error:hover { + --multilineInput-background: var(--salt-status-error-background); + --multilineInput-background-active: var(--salt-status-error-background); + --multilineInput-background-hover: var(--salt-status-error-background); + --multilineInput-borderColor: var(--salt-status-error-borderColor); + --multilineInput-outlineColor: var(--salt-status-error-borderColor); +} +.saltMultilineInput-warning, +.saltMultilineInput-warning:hover { + --multilineInput-background: var(--salt-status-warning-background); + --multilineInput-background-active: var(--salt-status-warning-background); + --multilineInput-background-hover: var(--salt-status-warning-background); + --multilineInput-borderColor: var(--salt-status-warning-borderColor); + --multilineInput-outlineColor: var(--salt-status-warning-borderColor); +} +.saltMultilineInput-success, +.saltMultilineInput-success:hover { + --multilineInput-background: var(--salt-status-success-background); + --multilineInput-background-active: var(--salt-status-success-background); + --multilineInput-background-hover: var(--salt-status-success-background); + --multilineInput-borderColor: var(--salt-status-success-borderColor); + --multilineInput-outlineColor: var(--salt-status-success-borderColor); +} +.saltMultilineInput.saltMultilineInput-withAdornmentRow { + display: flex; + flex-wrap: wrap; +} +.saltMultilineInput-textarea { + background: none; + border: none; + box-sizing: content-box; + color: inherit; + cursor: inherit; + display: inline-flex; + height: calc(var(--saltMultilineInput-rows, 3) * var(--salt-text-lineHeight)); + flex-grow: 1; + font: inherit; + letter-spacing: 0; + margin: var(--salt-spacing-75) 0; + min-width: 0; + overflow: hidden; + resize: none; + padding: 0; +} +.saltMultilineInput-textarea::placeholder { + font-weight: var(--salt-text-fontWeight-small); +} +.saltMultilineInput-textarea:focus { + outline: none; +} +.saltMultilineInput-textarea::selection { + background: var(--salt-text-background-selected); +} +.saltMultilineInput-focused { + --multilineInput-borderColor: var(--multilineInput-outlineColor); + --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active); + outline: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--multilineInput-outlineColor); +} +.saltMultilineInput-readOnly, +.saltMultilineInput-readOnly:active, +.saltMultilineInput-readOnly:hover { + --multilineInput-borderColor: var(--salt-editable-borderColor-readonly); + --multilineInput-borderStyle: var(--salt-editable-borderStyle-readonly); + --multilineInput-activationIndicator-borderWidth: var(--salt-size-border); + background: var(--multilineInput-background-readonly); + cursor: var(--salt-editable-cursor-readonly); +} +.saltMultilineInput-disabled .saltMultilineInput-textarea::selection { + background: none; +} +.saltMultilineInput-disabled, +.saltMultilineInput-disabled:hover, +.saltMultilineInput-disabled:active { + --multilineInput-borderColor: var(--salt-editable-borderColor-disabled); + --multilineInput-borderStyle: var(--salt-editable-borderStyle-disabled); + --multilineInput-activationIndicator-borderWidth: var(--salt-size-border); + background: var(--multilineInput-background-disabled); + cursor: var(--salt-editable-cursor-disabled); + color: var(--salt-text-primary-foreground-disabled); +} +.saltMultilineInput-activationIndicator { + left: 0; + bottom: 0; + width: 100%; + position: absolute; + border-bottom: var(--multilineInput-activationIndicator-borderWidth) var(--multilineInput-borderStyle) var(--multilineInput-borderColor); +} +.saltMultilineInput.saltMultilineInput-bordered { + --multilineInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--multilineInput-borderColor); + --multilineInput-activationIndicator-borderWidth: 0; +} +.saltMultilineInput-bordered:active, +.saltMultilineInput-bordered.saltMultilineInput-focused { + --multilineInput-activationIndicator-borderWidth: var(--salt-editable-borderWidth-active); +} +.saltMultilineInput-bordered.saltMultilineInput-readOnly:hover, +.saltMultilineInput-bordered.saltMultilineInput-disabled:hover { + --multilineInput-activationIndicator-borderWidth: 0; +} +.saltMultilineInput-endAdornmentContainer, +.saltMultilineInput-startAdornmentContainer { + align-items: center; + display: inline-flex; + min-height: var(--salt-size-base); + column-gap: var(--salt-spacing-100); +} +.saltMultilineInput-startAdornmentContainer { + align-self: self-start; + padding-right: var(--salt-spacing-100); +} +.saltMultilineInput-suffixAdornments { + align-self: self-end; +} +.saltMultilineInput-withAdornmentRow .saltMultilineInput-suffixAdornments { + display: inline-flex; + flex-basis: 100%; + justify-content: flex-end; +} +.saltMultilineInput-endAdornmentContainer { + padding-left: var(--salt-spacing-100); +} +.saltMultilineInput-statusAdornmentContainer { + align-self: self-end; + display: inline-flex; + min-height: var(--salt-size-base); +} +.saltMultilineInput-startAdornmentContainer .saltButton:first-child { + margin-left: calc(var(--salt-spacing-50) * -1); +} +.saltMultilineInput-endAdornmentContainer .saltButton:last-child { + margin-right: calc(var(--salt-spacing-50) * -1); +} +.saltMultilineInput-readOnly .saltMultilineInput-endAdornmentContainer .saltButton:last-child { + margin-right: 0; +} +.saltMultilineInput .saltButton { + --saltButton-padding: 0; + --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-50)); + --saltButton-width: calc(var(--salt-size-base) - var(--salt-spacing-50)); +} + +/* src/panel/Panel.css */ +.saltPanel-primary.saltPanel { + --panel-background: var(--salt-container-primary-background); +} +.saltPanel-secondary.saltPanel { + --panel-background: var(--salt-container-secondary-background); +} +.saltPanel { + background: var(--saltPanel-background, var(--panel-background)); + color: var(--saltPanel-color, initial); + height: var(--saltPanel-height, 100%); + overflow: auto; + padding: var(--saltPanel-padding, var(--salt-size-container-spacing)); + width: var(--saltPanel-width, 100%); +} + +/* src/radio-button/RadioButton.css */ +.saltRadioButton { + display: flex; + gap: var(--salt-spacing-100); + cursor: var(--salt-selectable-cursor-hover); + position: relative; + font-size: var(--salt-text-fontSize); + line-height: var(--salt-text-lineHeight); + font-family: var(--salt-text-fontFamily); + font-weight: var(--salt-text-fontWeight); + --radioButton-icon-marginTop: calc((var(--salt-text-lineHeight) - var(--salt-size-selectable)) / 2); +} +.saltRadioButton-disabled { + color: var(--salt-text-primary-foreground-disabled); + cursor: var(--salt-selectable-cursor-disabled); +} +.saltRadioButton-readOnly { + color: var(--salt-text-primary-foreground); + cursor: var(--salt-selectable-cursor-readonly); +} +.saltRadioButton-input { + cursor: inherit; + position: absolute; + height: var(--salt-size-selectable); + opacity: 0; + margin: var(--radioButton-icon-marginTop) 0 0 0; + padding: 0; + width: var(--salt-size-selectable); + z-index: var(--salt-zIndex-default); +} +.saltRadioButtonIcon { + margin-top: var(--radioButton-icon-marginTop); +} +.saltRadioButtonIcon > svg { + transform: translate(0px, 0px); +} +.saltRadioButton-input:focus-visible + .saltRadioButtonIcon { + outline: var(--saltRadioButton-outline, var(--salt-focused-outline)); + outline-offset: var(--salt-focused-outlineOffset); + border-color: var(--salt-selectable-borderColor-hover); + color: var(--salt-selectable-foreground-hover); +} +.saltRadioButton-input:focus-visible + .saltRadioButtonIcon-checked { + border-color: var(--salt-selectable-borderColor-selected); + color: var(--salt-selectable-foreground-selected); +} +.saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon { + outline-color: var(--salt-status-error-foreground); + border-color: var(--salt-status-error-foreground); + color: var(--salt-status-error-foreground); +} +.saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon { + outline-color: var(--salt-status-warning-foreground); + border-color: var(--salt-status-warning-foreground); + color: var(--salt-status-warning-foreground); +} + +/* src/radio-button/RadioButtonGroup.css */ +.saltRadioButtonGroup { + border: none; + margin: 0; + padding: 0; +} +.saltRadioButtonGroup-vertical { + display: flex; + gap: var(--salt-spacing-100); + flex-direction: column; +} +.saltRadioButtonGroup-horizontal { + display: flex; + gap: var(--salt-spacing-200); + flex-direction: row; + flex-wrap: wrap; +} +.saltRadioButtonGroup-noWrap { + flex-wrap: nowrap; +} +.saltRadioButtonGroup-noWrap .saltRadioButton { + white-space: break-spaces; +} +.saltFormField-labelLeft .saltRadioButtonGroup, +.saltFormField-labelRight .saltRadioButtonGroup { + padding-top: var(--salt-spacing-100); +} + +/* src/radio-button/RadioButtonIcon.css */ +.saltRadioButtonIcon { + --radioButton-size: var(--salt-size-selectable); + width: var(--radioButton-size); + height: var(--radioButton-size); + min-width: var(--radioButton-size); + min-height: var(--radioButton-size); + border-radius: 50%; + border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor); + color: var(--salt-selectable-foreground); + background: var(--salt-container-primary-background); + --saltIcon-color: currentColor; + --saltIcon-size: 100%; + display: flex; +} +.saltRadioButton:hover .saltRadioButtonIcon { + border-color: var(--salt-selectable-borderColor-hover); + color: var(--salt-selectable-foreground-hover); +} +.saltRadioButtonIcon-checked, +.saltRadioButton:hover .saltRadioButtonIcon-checked { + border-color: var(--salt-selectable-borderColor-selected); + color: var(--salt-selectable-foreground-selected); +} +.saltRadioButtonIcon-disabled, +.saltRadioButton:hover .saltRadioButtonIcon-disabled { + border-color: var(--salt-selectable-borderColor-disabled); + background: var(--salt-container-primary-background-disabled); + color: var(--salt-selectable-foreground-disabled); +} +.saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled, +.saltRadioButton:hover .saltRadioButtonIcon-checked.saltRadioButtonIcon-disabled { + border-color: var(--salt-selectable-borderColor-selectedDisabled); + color: var(--salt-selectable-foreground-selectedDisabled); +} +.saltRadioButtonIcon-error, +.saltRadioButton:hover .saltRadioButtonIcon-error { + color: var(--salt-status-error-foreground); + border-color: var(--salt-status-error-borderColor); + outline-color: var(--salt-status-error-foreground); +} +.saltRadioButtonIcon-warning, +.saltRadioButton:hover .saltRadioButtonIcon-warning { + color: var(--salt-status-warning-foreground); + border-color: var(--salt-status-warning-borderColor); + outline-color: var(--salt-status-warning-foreground); +} +.saltRadioButtonIcon-readOnly, +.saltRadioButton:hover .saltRadioButtonIcon-readOnly { + border-color: var(--salt-selectable-borderColor-readonly); + color: var(--salt-text-primary-foreground); +} + +/* src/salt-provider/SaltProvider.css */ +.salt-provider { + display: contents; +} + +/* src/spinner/Spinner.css */ +.saltSpinner { + position: relative; +} +.saltSpinner-gradientStop { + stop-color: var(--saltSpinner-gradient-color, var(--salt-accent-background)); +} +.saltSpinner-medium { + --spinner-strokeWidth: var(--salt-size-bar); + height: var(--salt-size-base); + width: var(--salt-size-base); +} +.saltSpinner-large { + --spinner-strokeWidth: var(--salt-size-bar); + height: calc(var(--salt-size-base) * 2); + width: calc(var(--salt-size-base) * 2); +} +.saltSpinner-small { + --spinner-strokeWidth: var(--salt-size-bar-small); + height: var(--salt-size-icon); + width: var(--salt-size-icon); +} +.saltSpinner-spinner { + animation: spinner 0.9s linear infinite; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; +} +@keyframes spinner { + 0% { + transform: rotate(0); + } + 100% { + transform: rotate(360deg); + } +} + +/* src/split-layout/SplitLayout.css */ +.saltSplitLayout { + flex-grow: 1; +} + +/* src/stack-layout/StackLayout.css */ +.saltStackLayout { + --stackLayout-gap-multiplier: var(--stackLayout-gap-density-multiplier, 3); + --stackLayout-separator-weight: var(--salt-size-border, 1); + --stackLayout-gap: calc(var(--salt-size-unit) * var(--stackLayout-gap-multiplier)); +} +.saltStackLayout-separator > * { + position: relative; +} +.saltStackLayout-separator > *:not(:last-child)::after { + position: absolute; + display: block; + content: ""; + background-color: var(--salt-separable-secondary-borderColor); +} +.saltStackLayout-separator-start { + --stackLayout-seperator-offset: calc(var(--stackLayout-separator-weight) * -1); +} +.saltStackLayout-separator-center { + --stackLayout-seperator-offset: calc((var(--stackLayout-gap) * -0.5) + (var(--stackLayout-separator-weight) * -0.5)); +} +.saltStackLayout-separator-end { + --stackLayout-seperator-offset: calc(var(--stackLayout-gap) * -1); +} +.saltStackLayout-row.saltStackLayout-separator > *:not(:last-child)::after { + height: 100%; + width: var(--stackLayout-separator-weight); + right: var(--stackLayout-seperator-offset); + top: 0; +} +.saltStackLayout-column.saltStackLayout-separator > *:not(:last-child)::after { + width: 100%; + height: var(--stackLayout-separator-weight); + bottom: var(--stackLayout-seperator-offset); + left: 0; +} + +/* src/status-adornment/StatusAdornment.css */ +.saltStatusAdornment { + align-self: center; + display: inline-block; + fill: var(--saltStatusAdornment-color, var(--statusAdornment-color)); + height: var(--salt-icon-size-status-adornment); + min-height: var(--salt-icon-size-status-adornment); + padding-left: var(--salt-spacing-100); + position: relative; +} +.saltStatusAdornment-error { + --statusAdornment-color: var(--salt-status-error-foreground); +} +.saltStatusAdornment-warning { + --statusAdornment-color: var(--salt-status-warning-foreground); +} +.saltStatusAdornment-success { + --statusAdornment-color: var(--salt-status-success-foreground); +} + +/* src/status-indicator/StatusIndicator.css */ +.saltStatusIndicator { + --statusIndicator-warning-color: var(--salt-status-warning-foreground); + --statusIndicator-info-color: var(--salt-status-info-foreground); + --statusIndicator-success-color: var(--salt-status-success-foreground); + --statusIndicator-error-color: var(--salt-status-error-foreground); + --saltIcon-color: var(--statusIndicator-Color); + color: var(--statusIndicator-Color); +} +.saltStatusIndicator-error { + --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-error-color)); +} +.saltStatusIndicator-warning { + --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-warning-color)); +} +.saltStatusIndicator-success { + --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-success-color)); +} +.saltStatusIndicator-info { + --statusIndicator-Color: var(--saltStatusIndicator-color, var(--statusIndicator-info-color)); +} + +/* src/switch/Switch.css */ +.saltSwitch { + display: flex; + gap: var(--salt-spacing-100); + position: relative; + cursor: var(--salt-selectable-cursor-hover); + color: var(--salt-text-primary-foreground); +} +.saltSwitch-disabled { + color: var(--salt-text-primary-foreground-disabled); + cursor: var(--salt-selectable-cursor-disabled); +} +.saltSwitch-track { + border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor); + --saltIcon-color: currentColor; + --saltIcon-size: 100%; + display: flex; + flex-shrink: 0; + height: calc(var(--salt-size-base) - var(--salt-spacing-100)); + width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2); + align-items: center; + color: var(--salt-selectable-foreground); + background: var(--salt-container-primary-background); +} +.saltSwitch-label { + padding-top: var(--salt-spacing-25); +} +.saltSwitch-input:focus-visible + .saltSwitch-track { + outline-offset: var(--salt-focused-outlineOffset); + outline: var(--salt-focused-outline); + border-color: var(--salt-selectable-borderColor-hover); + color: var(--salt-selectable-foreground-hover); +} +.saltSwitch:hover .saltSwitch-track { + border-color: var(--salt-selectable-borderColor-hover); + color: var(--salt-selectable-foreground-hover); +} +.saltSwitch-checked .saltSwitch-track, +.saltSwitch-checked:hover .saltSwitch-track { + border-color: var(--salt-selectable-borderColor-selected); + color: var(--salt-selectable-foreground-selected); +} +.saltSwitch-disabled .saltSwitch-track, +.saltSwitch-disabled:hover .saltSwitch-track { + border-color: var(--salt-selectable-borderColor-disabled); + color: var(--salt-selectable-foreground-disabled); + background: var(--salt-container-primary-background-disabled); +} +.saltSwitch-checked.saltSwitch-disabled .saltSwitch-track, +.saltSwitch-checked.saltSwitch-disabled:hover .saltSwitch-track { + border-color: var(--salt-selectable-borderColor-selectedDisabled); + color: var(--salt-selectable-foreground-selectedDisabled); +} +.saltSwitch-thumb { + display: flex; + aspect-ratio: 1; + height: var(--salt-size-selectable); + background: currentColor; + margin: var(--salt-spacing-25); + border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor); +} +.saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb, +.saltSwitch:hover .saltSwitch-thumb { + border-color: var(--salt-selectable-borderColor-hover); + transition: transform var(--salt-duration-perceptible) ease-in-out; +} +.saltSwitch-checked .saltSwitch-thumb, +.saltSwitch-checked:hover .saltSwitch-thumb { + background: transparent; + border-color: var(--salt-selectable-borderColor-selected); + transform: translateX(100%); +} +.saltSwitch-disabled .saltSwitch-thumb, +.saltSwitch-disabled:hover .saltSwitch-thumb { + border: 0; +} +.saltSwitch-input { + cursor: inherit; + left: 0; + margin: 0; + opacity: 0; + padding: 0; + position: absolute; + top: 0; + z-index: var(--salt-zIndex-default); + height: calc(var(--salt-size-base) - var(--salt-spacing-100)); + width: calc((var(--salt-size-selectable) + var(--salt-spacing-25) + var(--salt-size-border)) * 2); +} +@media (prefers-reduced-motion) { + .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb, + .saltSwitch:hover .saltSwitch-thumb { + transition: none; + } +} +.salt-density-high .saltSwitch-thumb { + border: 0; +} + +/* src/text/Text.css */ +.saltText { + color: var(--saltText-color, var(--text-color)); + font-family: var(--saltText-fontFamily, var(--salt-text-fontFamily)); +} +.saltText::selection { + background: var(--saltText-highlight, var(--salt-text-background-selected)); +} +.saltText-lineClamp { + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: var(--text-max-rows, 0); + overflow: hidden; + word-break: break-word; +} +.saltText-primary { + --text-color: var(--salt-text-primary-foreground); +} +.saltText-primary.saltText-disabled { + --text-color: var(--salt-text-primary-foreground-disabled); +} +.saltText-secondary { + --text-color: var(--salt-text-secondary-foreground); +} +.saltText-secondary.saltText-disabled { + --text-color: var(--salt-text-secondary-foreground-disabled); +} +.saltText strong { + font-weight: var(--salt-text-fontWeight-strong); +} +.saltText small { + font-size: inherit; + font-weight: var(--salt-text-fontWeight-small); +} +.saltText-display1.saltText { + font-family: var(--salt-text-display1-fontFamily); + font-size: var(--salt-text-display1-fontSize); + font-weight: var(--salt-text-display1-fontWeight); + line-height: var(--salt-text-display1-lineHeight); +} +.saltText-display2.saltText { + font-family: var(--salt-text-display2-fontFamily); + font-size: var(--salt-text-display2-fontSize); + font-weight: var(--salt-text-display2-fontWeight); + line-height: var(--salt-text-display2-lineHeight); +} +.saltText-display3.saltText { + font-family: var(--salt-text-display3-fontFamily); + font-size: var(--salt-text-display3-fontSize); + font-weight: var(--salt-text-display3-fontWeight); + line-height: var(--salt-text-display3-lineHeight); +} +h1.saltText, +.saltText-h1.saltText { + font-family: var(--salt-text-h1-fontFamily); + font-size: var(--salt-text-h1-fontSize); + font-weight: var(--salt-text-h1-fontWeight); + line-height: var(--salt-text-h1-lineHeight); +} +h1.saltText strong, +.saltText-h1.saltText strong { + font-weight: var(--salt-text-h1-fontWeight-strong); +} +h1.saltText small, +.saltText-h1.saltText small { + font-size: inherit; + font-weight: var(--salt-text-h1-fontWeight-small); +} +h2.saltText, +.saltText-h2.saltText { + font-family: var(--salt-text-h2-fontFamily); + font-size: var(--salt-text-h2-fontSize); + font-weight: var(--salt-text-h2-fontWeight); + line-height: var(--salt-text-h2-lineHeight); +} +h2.saltText strong, +.saltText-h2.saltText strong { + font-weight: var(--salt-text-h2-fontWeight-strong); +} +h2.saltText small, +.saltText-h2.saltText small { + font-size: inherit; + font-weight: var(--salt-text-h2-fontWeight-small); +} +h3.saltText, +.saltText-h3.saltText { + font-family: var(--salt-text-h3-fontFamily); + font-size: var(--salt-text-h3-fontSize); + font-weight: var(--salt-text-h3-fontWeight); + line-height: var(--salt-text-h3-lineHeight); +} +h3.saltText strong, +.saltText-h3.saltText strong { + font-weight: var(--salt-text-h3-fontWeight-strong); +} +h3.saltText small, +.saltText-h3.saltText small { + font-size: inherit; + font-weight: var(--salt-text-h3-fontWeight-small); +} +h4.saltText, +.saltText-h4.saltText { + font-family: var(--salt-text-h4-fontFamily); + font-size: var(--salt-text-h4-fontSize); + font-weight: var(--salt-text-h4-fontWeight); + line-height: var(--salt-text-h4-lineHeight); +} +h4.saltText strong, +.saltText-h4.saltText strong { + font-weight: var(--salt-text-h4-fontWeight-strong); +} +h4.saltText small, +.saltText-h4.saltText small { + font-size: inherit; + font-weight: var(--salt-text-h4-fontWeight-small); +} +label.saltText, +.saltText-label.saltText { + font-family: var(--salt-text-label-fontFamily); + font-size: var(--salt-text-label-fontSize); + line-height: var(--salt-text-label-lineHeight); + font-weight: var(--salt-text-fontWeight); +} +label.saltText strong, +.saltText-label.saltText strong { + font-weight: var(--salt-text-label-fontWeight-strong); +} +label.saltText small, +.saltText-label.saltText small { + font-size: inherit; + font-weight: var(--salt-text-fontWeight-small); +} + +/* src/toast/Toast.css */ +.saltToast { + --toast-background: var(--salt-container-primary-background); + background: var(--saltToast-background, var(--toast-background)); + border-color: var(--saltToast-borderColor, var(--toast-borderColor)); + border-width: var(--saltToast-borderWidth, var(--salt-size-border)); + border-style: var(--saltToast-borderStyle, var(--salt-container-borderStyle)); + box-sizing: border-box; + box-shadow: var(--salt-overlayable-shadow-popout); + display: flex; + gap: var(--salt-spacing-75); + padding: var(--saltToast-padding, var(--salt-spacing-100)); + min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + margin: 0 var(--salt-spacing-100) var(--salt-spacing-100) var(--salt-spacing-100); +} +.saltToast:last-child { + margin-bottom: var(--salt-spacing-200); +} +.saltToast-icon.saltIcon { + margin: calc(var(--salt-spacing-75) + 2px) 0 var(--salt-spacing-75) 0; +} +.salt-density-high.saltToast-icon.saltIcon { + margin: calc(var(--salt-spacing-75) + 1px) 0 var(--salt-spacing-75) 0; +} +.saltToast-info { + --toast-borderColor: var(--salt-status-info-borderColor); +} +.saltToast-error { + --toast-borderColor: var(--salt-status-error-borderColor); +} +.saltToast-warning { + --toast-borderColor: var(--salt-status-warning-borderColor); +} +.saltToast-success { + --toast-borderColor: var(--salt-status-success-borderColor); +} + +/* src/toast/ToastContent.css */ +.saltToastContent { + flex: 1 0; + margin: var(--salt-spacing-75) 0; +} + +/* src/toggle-button/ToggleButton.css */ +.saltToggleButton { + align-items: center; + justify-content: center; + appearance: none; + -webkit-appearance: none; + display: inline-flex; + background: var(--salt-actionable-secondary-background); + border: 0 solid transparent; + border-radius: 0; + height: var(--salt-size-base); + color: var(--salt-actionable-secondary-foreground); + text-transform: var(--salt-actionable-textTransform); + font-weight: var(--salt-actionable-secondary-fontWeight); + font-family: var(--salt-text-fontFamily); + text-align: var(--salt-actionable-textAlign); + letter-spacing: var(--salt-actionable-letterSpacing); + line-height: var(--salt-text-lineHeight); + font-size: var(--salt-text-fontSize); + padding-left: var(--salt-spacing-100); + padding-right: var(--salt-spacing-100); + gap: var(--salt-spacing-50); + --saltIcon-color: var(--salt-actionable-secondary-foreground); +} +.saltToggleButton:hover { + background: var(--salt-actionable-secondary-background-hover); + color: var(--salt-actionable-secondary-foreground-hover); + cursor: var(--salt-actionable-cursor-hover); + --saltIcon-color: var(--salt-actionable-secondary-foreground-hover); +} +.saltToggleButton:focus-visible { + outline: var(--salt-focused-outline); + background: var(--salt-actionable-secondary-background-hover); + color: var(--salt-actionable-secondary-foreground-hover); + cursor: var(--salt-actionable-cursor-hover); + --saltIcon-color: var(--salt-actionable-secondary-foreground-hover); +} +.saltToggleButton[aria-checked=true]:focus-visible { + background: var(--salt-actionable-secondary-background-active); + color: var(--salt-actionable-secondary-foreground-active); + cursor: var(--salt-actionable-cursor-active); + --saltIcon-color: var(--salt-actionable-secondary-foreground-active); +} +.saltToggleButton[aria-checked=true] { + background: var(--salt-actionable-secondary-background-active); + color: var(--salt-actionable-secondary-foreground-active); + cursor: var(--salt-actionable-cursor-active); + --saltIcon-color: var(--salt-actionable-secondary-foreground-active); +} +.saltToggleButton:disabled { + background: var(--salt-actionable-secondary-background-disabled); + cursor: var(--salt-actionable-cursor-disabled); + color: var(--salt-actionable-secondary-foreground-disabled); + --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled); +} + +/* src/toggle-button-group/ToggleButtonGroup.css */ +.saltToggleButtonGroup { + display: flex; + background: var(--salt-container-primary-background); + border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor); + width: fit-content; + gap: var(--salt-spacing-50); + padding: calc(var(--salt-spacing-50) - var(--salt-size-border)); + flex-direction: row; +} +.saltToggleButtonGroup-horizontal .saltToggleButton { + height: calc(var(--salt-size-base) - var(--salt-spacing-100)); +} +.saltToggleButtonGroup-vertical { + flex-direction: column; +} +.saltToggleButtonGroup-vertical .saltToggleButton { + justify-content: start; +} + +/* src/tooltip/Tooltip.css */ +.saltTooltip { + --tooltip-background: var(--saltTooltip-background, var(--salt-container-primary-background)); + --tooltip-zIndex: var(--saltTooltip-zIndex, var(--salt-zIndex-flyover)); + --tooltip-icon-marginTop: calc((var(--salt-text-lineHeight) - max(var(--salt-icon-size-base), 12px)) / 2); +} +.saltTooltip { + background: var(--tooltip-background); + border-color: var(--saltTooltip-borderColor, var(--tooltip-status-borderColor)); + border-style: var(--saltTooltip-borderStyle, var(--salt-container-borderStyle)); + border-width: var(--saltTooltip-borderWidth, var(--salt-size-border)); + box-shadow: var(--saltTooltip-shadow, var(--salt-overlayable-shadow-popout)); + color: var(--saltTooltip-text-color, var(--salt-text-primary-foreground)); + font-size: var(--saltTooltip-fontSize, var(--salt-text-fontSize)); + font-weight: var(--saltTooltip-fontWeight, var(--salt-text-fontWeight)); + line-height: var(--saltTooltip-lineHeight, var(--salt-text-lineHeight)); + max-width: var(--saltTooltip-maxWidth, 230px); + padding: var(--saltTooltip-padding, var(--salt-size-unit)); + position: relative; + text-align: var(--saltTooltip-textAlign, left); + z-index: var(--tooltip-zIndex); +} +.saltTooltip-container { + display: flex; + align-items: baseline; + position: relative; +} +.saltTooltip-content { + overflow: hidden; +} +.saltTooltip-icon { + --saltIcon-margin: var(--tooltip-icon-marginTop) var(--saltTooltip-icon-marginRight, 6px) 0 0; + vertical-align: top; + align-self: flex-start; +} +.saltTooltip-info { + --tooltip-status-borderColor: var(--salt-status-info-borderColor); +} +.saltTooltip-error { + --tooltip-status-borderColor: var(--salt-status-error-borderColor); +} +.saltTooltip-warning { + --tooltip-status-borderColor: var(--salt-status-warning-borderColor); +} +.saltTooltip-success { + --tooltip-status-borderColor: var(--salt-status-success-borderColor); +} + +/* src/10396537-7be3-41f4-bd67-c82c5001316e.css */ diff --git a/docs/css/salt-lab.css b/docs/css/salt-lab.css new file mode 100644 index 00000000000..5cb3d49d0a4 --- /dev/null +++ b/docs/css/salt-lab.css @@ -0,0 +1,4812 @@ +/* src/app-header/AppHeader.css */ +.salt-density-medium, +.salt-density-low, +.salt-density-touch { + --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 2)); +} +.salt-density-high { + --appHeader-height: var(--saltAppHeader-height, calc(var(--salt-size-base) + var(--salt-size-unit) * 3)); +} +.saltAppHeader { + --appHeader-background: var(--salt-container-primary-background); + --appHeader-separable-bar: var(--salt-separable-secondary-borderColor); + --appHeader-shadow: var(--saltAppHeader-shadow, var(--salt-overlayable-shadow-borderRegion)); + --appHeader-padding: var(--salt-size-container-spacing); + --appHeader-paddingLeft: 8px; + --appHeader-paddingRight: var(--appHeader-padding); + --saltToolbar-width: auto; +} +.saltAppHeader .saltTabstrip { + --saltTabs-tabstrip-height: var(--appHeader-height); + --saltTabs-activationIndicator-height: 0px; + --saltTabs-activationIndicator-thumb-inset: -2px 0 0 0; +} +.saltAppHeader { + align-items: flex-start; + background: var(--appHeader-background); + border-bottom: var(--salt-container-borderStyle) var(--salt-size-border) var(--salt-container-primary-borderColor); + box-shadow: var(--appHeader-shadow); + box-sizing: content-box; + display: flex; + flex: 0 0 auto; + height: var(--appHeader-height); + overflow: hidden; + padding: 0 var(--appHeader-paddingRight) 0 var(--appHeader-paddingLeft); + width: 100%; +} +.saltAppHeader > .Responsive-inner { + width: 100%; + display: flex; + flex-wrap: wrap; + align-items: center; + flex: 1; + min-height: var(--appHeader-height); +} +.saltAppHeader > .Responsive-inner > .responsive-pillar { + width: 0; + height: var(--appHeader-height); +} +.saltAppHeader-navMenu { + margin-right: 12px; + padding-right: 8px; +} +.saltAppHeader-navMenu::after { + top: 0; + right: 0; + width: var(--salt-size-border); + bottom: 0; + content: ""; + position: absolute; + background: var(--appHeader-separable-bar); +} +.saltAppHeader .saltLogo:not(.saltLogo-compact) { + margin-left: 16px; +} +.saltAppHeader > .Responsive-inner > .Tabstrip { + align-self: flex-end; + flex: 0 0 auto; + margin-left: 48px; +} +.saltAppHeader > .Responsive-inner > [data-pad-end] { + margin-right: auto; +} +.saltAppHeader > .Responsive-inner > * { + flex-shrink: 0; +} +.saltAppHeader > .Responsive-inner > .Toolbar { + justify-content: flex-end; + margin-left: 48px; +} +.saltAppHeader > .Responsive-inner > [data-pad-start=true] { + margin-left: auto; +} +.saltAppHeader > .Responsive-inner[data-collapsing=true] { + flex-wrap: nowrap; +} +.saltAppHeader > .Responsive-inner > *[data-collapsing=true] { + flex-shrink: 1; +} +.saltAppHeader > .Responsive-inner > *[data-collapsible=dynamic][data-collapsed=true] { + flex-basis: 0; + flex-grow: 0; + flex-shrink: 0; +} + +/* src/breadcrumbs/Breadcrumb.css */ +.saltBreadcrumb { + --breadcrumbs-crumb-color: var(--saltBreadcrumbs-crumb-color, var(--salt-actionable-primary-foreground)); + --breadcrumbs-crumb-color-hover: var(--saltBreadcrumbs-crumb-color-hover, var(--salt-actionable-primary-foreground-hover)); + --breadcrumbs-crumb-color-active: var(--saltBreadcrumbs-crumb-color-active, var(--salt-actionable-primary-foreground-active)); + --breadcrumbs-crumb-icon-color: var(--saltBreadcrumbs-crumb-icon-color, var(--breadcrumbs-crumb-color)); + --breadcrumbs-crumb-marginLeft: 0px; +} +.saltBreadcrumb { + padding: 0px; +} +.saltBreadcrumb-regular { + display: flex; + gap: calc(var(--salt-size-unit) / 2); + align-items: center; + color: var(--breadcrumbs-crumb-color); +} +.saltBreadcrumb-regular:visited { + color: currentColor; +} +.saltBreadcrumb-regular:visited .saltBreadcrumb-icon { + color: currentColor; +} +.saltBreadcrumb-regular:hover { + color: var(--breadcrumbs-crumb-color-hover); +} +.saltBreadcrumb-regular:hover .saltBreadcrumb-icon { + color: var(--breadcrumbs-crumb-color-hover); +} +.saltBreadcrumb-regular:active { + color: var(--breadcrumbs-crumb-color-active); +} +.saltBreadcrumb-regular:active .saltBreadcrumb-icon { + color: var(--breadcrumbs-crumb-color-active); +} +.saltBreadcrumb-currentLevel { + color: var(--breadcrumbs-crumb-color); +} +.saltBreadcrumb-icon { + color: var(--breadcrumbs-crumb-icon-color); + margin-left: var(--saltBreadcrumbs-crumb-marginLeft, var(--breadcrumbs-crumb-marginLeft)); +} +.saltBreadcrumb-justifyContentCenter { + justify-content: center; +} +.saltBreadcrumb-text { + text-decoration: underline; +} + +/* src/breadcrumbs/Breadcrumbs.css */ +.saltBreadcrumbs-ol { + --breadcrumbs-ol-gap: var(--salt-size-unit); + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0; + margin: 0; + gap: var(--breadcrumbs-ol-gap); +} +.saltBreadcrumbs-li { + --breadcrumbs-li-marginRight: 0px; + --breadcrumbs-li-padding: 0px; + flex: 0 1 auto; + list-style: none; + margin-right: var(--breadcrumbs-li-marginRight); + padding: var(--breadcrumbs-li-padding); +} +.saltBreadcrumbs-separator { + --breadcrumbs-separator-marginRight: 0px; + display: flex; + margin-right: var(--breadcrumbs-separator-marginRight); + user-select: none; +} +.saltBreadcrumbs-ol-wrap { + flex-wrap: wrap; +} +.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-li, +.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-separator { + --breadcrumbs-ol-wrap-li-marginBottom: 0px; + margin-bottom: var(--breadcrumbs-ol-wrap-li-marginBottom); +} + +/* src/button-bar/ButtonBar.css */ +.saltButtonBar { + width: 100%; + display: flex; + justify-content: flex-end; + gap: var(--salt-size-unit); +} +.saltButtonBar-alignLeft { + justify-content: flex-start; +} + +/* src/button-bar/OrderedButton.css */ +.saltOrderedButton-alignLeft { + margin-right: auto; +} +.saltOrderedButton-alignRight { + margin-left: auto; +} + +/* src/calendar/Calendar.css */ +.saltCalendar { + width: min-content; +} + +/* src/carousel/Carousel.css */ +.saltGridLayout.saltCarousel { + grid-template-columns: min-content auto min-content; + grid-template-areas: "prev-button slider next-button" "dots dots dots"; +} +.saltCarousel.saltCarousel-compact { + grid-template-areas: "slider slider slider" "prev-button dots next-button"; +} +.saltCarousel-prev-button { + grid-area: prev-button; + height: 100%; +} +.saltCarousel-next-button { + grid-area: next-button; + height: 100%; +} +.saltCarousel-slider { + grid-area: slider; +} +.saltCarousel-dots { + grid-area: dots; + justify-self: center; +} + +/* src/cascading-menu/CascadingMenuItem.css */ +.saltMenuItem { + background: var(--salt-selectable-background); + display: flex; + align-items: center; + justify-content: space-between; + right: 0; + cursor: pointer; + overflow: hidden; + text-align: left; + user-select: none; + white-space: nowrap; + text-overflow: ellipsis; +} +.saltMenuItem-menuItemText { + flex-grow: 2; + white-space: nowrap; +} +.saltMenuItem-menuItemEndAdornment { + margin-left: 8px; +} +.saltMenuItem-menuItemStartAdornmentContainer { + margin-right: var(--salt-size-unit); + width: 12px; +} +.saltMenuItem-menuItemAdornmentHidden { + visibility: hidden; +} +.saltMenuItem.saltMenuItem-menuItemDivider { + border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor); +} +.saltMenuItem-menuItemHover:hover { + background: var(--salt-selectable-background-hover); +} +.saltMenuItem.saltMenuItem-menuItemBlurSelected { + background: var(--salt-selectable-background-blurSelected) !important; +} + +/* src/cascading-menu/CascadingMenuList.css */ +.saltCascadingMenuList-popper { + background: var(--salt-container-primary-background); +} +.saltCascadingMenuList-popper { + --list-box-content: content-box; + --list-boxShadow: var(--salt-overlayable-shadow-popout); +} + +/* src/color-chooser/ColorChooser.css */ +.saltColorChooser-overlayButtonSwatch { + margin-right: 10px; + height: calc(2 * var(--salt-size-unit)); + width: calc(2 * var(--salt-size-unit)); +} +.saltColorChooser-overlayButtonSwatchWithBorder { + border: 0.2px solid var(--salt-editable-borderColor); +} +.saltColorChooser-overlayButtonSwatchTransparent { + height: calc(var(--salt-size-container-spacing) - 2px) !important; + width: calc(var(--salt-size-container-spacing) - 2px) !important; + border: 1px solid var(--salt-status-negative-foreground); + background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%); +} +.saltColorChooser-overlayButtonText { + font-weight: var(--salt-text-fontWeight); + font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily)); + font-size: var(--salt-text-fontSize); + letter-spacing: normal; +} +.saltColorChooser-overlayButton { + background: transparent; + text-transform: none; + justify-content: flex-start; +} +.saltColorChooser-overlayButtonHiddenLabel { + width: var(--salt-size-container-spacing); + display: contents; +} +.saltColorChooser-overlayButtonClose { + margin: 5px; +} +.saltColorChooser-defaultButton { + float: right; + background: transparent; + padding: 6px 2px 6px 2px; + height: var(--salt-size-stackable); +} +.saltColorChooser-defaultButton { + border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor); +} +.saltColorChooser-overlayContent { + max-width: 100%; +} +.saltColorChooser-refreshIcon { + padding-right: 5px; +} + +/* src/color-chooser/ColorPicker.css */ +.saltColorChooserPicker { + display: flex; + flex-direction: row; +} +.saltColorChooserPicker-inputContainer { + display: flex; + flex-direction: column; + justify-content: space-around; + border-left: 1px solid var(--salt-separable-secondary-borderColor); +} +.saltColorChooserPicker-applyButtonDiv { + padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit)); + align-self: center; +} +.saltColorChooserPicker-textDivOverrides { + font-size: var(--salt-text-label-fontSize); + font-weight: var(--salt-text-fontWeight-strong); + color: var(--salt-text-primary-foreground); + padding: 0px !important; +} +.saltColorChooserPicker-inputDivs { + display: flex; + flex-direction: column; + align-content: stretch; + padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit); +} +.root, +.rootDisabledAlpha { + box-shadow: none !important; + padding: 8px 8px 0px 0px !important; + background: transparent !important; + width: calc(9 * var(--salt-size-stackable)) !important; +} +.root .flexbox-fix, +.rootDisabledAlpha .flexbox-fix { + padding-top: 8px !important; +} +.rootDisabledAlpha .flexbox-fix ~ .flexbox-fix, +.root .flexbox-fix ~ .flexbox-fix { + display: none !important; +} +.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div { + height: calc(var(--salt-size-stackable) / 2) !important; +} +.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div { + height: calc(var(--salt-size-stackable) / 2 - 2px) !important; +} +.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div { + height: calc(var(--salt-size-stackable) / 2 - 2px) !important; +} +.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div { + width: calc(var(--salt-size-stackable) / 2) !important; +} +.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div { + height: calc(var(--salt-size-stackable) / 2 - 2px) !important; +} +.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div { + height: calc(var(--salt-size-stackable) / 2 - 2px) !important; +} +.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div { + width: calc(var(--salt-size-base) / 4) !important; + height: calc(var(--salt-size-base) / 4) !important; +} +.rootDisabledAlpha .hue-horizontal > div > div { + position: relative; + margin-top: 0px !important; + width: 4px !important; + height: calc(var(--salt-size-stackable) / 2 - 2px) !important; + background: var(--salt-container-primary-background) !important; + border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor); +} + +/* src/color-chooser/DictTabs.css */ +.salt-theme[data-mode=light] .saltColorChooserDictTabs-text { + background-color: transparent; + color: var(--salt-text-primary-foreground) !important; +} + +/* src/color-chooser/HexInput.css */ +.saltColorChooserHexInput { + display: flex; + flex-direction: row; + padding: 0px 0px var(--salt-size-container-spacing) 0px; +} +.saltColorChooserHexInput-hashSign { + margin-top: 5px; + font-size: var(--salt-text-label-fontSize); + padding-right: 6px; + color: var(--salt-text-secondary-foreground); + padding-left: 6px; +} +.saltColorChooserHexInput-input { + width: var(--salt-size-unit); + border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor); +} + +/* src/color-chooser/RGBAInput.css */ +.saltColorChooser-rgbaInput { + width: var(--salt-size-unit); + border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor); + padding-top: var(--salt-size-unit); +} +.saltColorChooser-opacityInput { + min-width: 40px !important; + width: 40px !important; + min-height: unset !important; + border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor); +} +.saltColorChooser-rgbaText { + margin-top: 5px; + font-size: var(--salt-text-label-fontSize); + color: var(--salt-text-secondary-foreground); + padding-top: 4px; + padding-right: 6px; + padding-left: 6px; +} +.saltColorChooser-rgbaInputDiv { + display: flex; + flex-direction: row; + padding: 0px 0px var(--salt-size-unit) 0px; +} +.saltColorChooser-overrideInput { + min-width: 0em; + background: transparent !important; + color: var(--salt-text-primary-foreground); + border-bottom: 1px solid var(--salt-text-primary-foreground); +} +.saltColorChooser-alphaSpacerDiv { + height: 24px; +} +.saltColorChooser-textDivOverrides { + font-size: var(--salt-text-label-fontSize); + font-weight: var(--salt-text-fontWeight-strong); + color: var(--salt-text-primary-foreground); + padding: 0px !important; +} + +/* src/color-chooser/Swatch.css */ +.saltColorChooserSwatch-swatch, +.saltColorChooserSwatch-graySwatch { + margin-bottom: 1px; + margin-left: 1px; + cursor: pointer; +} +.salt-density-touch, +.salt-density-low, +.salt-density-medium, +.salt-density-high { + --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit)); + --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit)); + --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit)); + --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit)); +} +.salt-density-touch { + --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size); +} +.salt-density-low { + --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size); +} +.salt-density-medium { + --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size); +} +.salt-density-high { + --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size); +} +.saltColorChooserSwatch-swatch, +.salt-theme[data-mode=light] .saltColorChooserSwatch-graySwatch { + width: var(--colorChooser-swatch-size-unit); + height: var(--colorChooser-swatch-size-unit); +} +.saltColorChooserSwatch-whiteSwatch { + margin-bottom: 1px; + margin-left: 1px; + cursor: pointer; +} +.salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch { + border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor); +} +.salt-theme[data-mode=light] .saltColorChooserSwatch-whiteSwatch, +.salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch { + width: calc(var(--colorChooser-swatch-size-unit) - 2); + height: calc(var(--colorChooser-swatch-size-unit) - 2); +} +.salt-theme[data-mode=dark] .saltColorChooserSwatch-whiteSwatch, +.saltColorChooserSwatch-graySwatch { + border: 0px; +} +.salt-theme[data-mode=dark] .saltColorChooserSwatch-whiteSwatch { + width: calc(var(--colorChooser-swatch-size-unit) - 2); + height: calc(var(--colorChooser-swatch-size-unit) - 2); +} +.salt-theme[data-mode=dark] .saltColorChooserSwatch-graySwatch { + border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor); +} +.saltColorChooserSwatch-active { + outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor); + border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important; + margin-bottom: 1px; + margin-left: 1px; + cursor: pointer; +} +.saltColorChooserSwatch-transparent { + border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important; + width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important; + height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important; + margin-bottom: 1px; + margin-left: 1px; + background: linear-gradient(to top left, rgba(166, 21, 11, 0) 0%, rgba(166, 21, 11, 0) calc(50% - 0.8px), rgba(166, 21, 11, 1) 50%, rgba(166, 21, 11, 0) calc(50% + 0.8px), rgba(166, 21, 11, 0) 100%) !important; +} + +/* src/color-chooser/Swatches.css */ +.saltColorChooserSwatches-colorNameTextDiv { + font-size: var(--salt-text-fontSize); + font-weight: var(--salt-text-fontWeight-strong); +} +.saltColorChooserSwatches-colorNameTextDiv, +.saltColorChooserSwatches-colorTextDiv, +.saltColorChooserSwatches-alphaTextDiv { + color: var(--salt-text-secondary-foreground); +} +.saltColorChooserSwatches-colorTextDiv { + font-size: var(--salt-text-fontSize); + margin-right: var(--salt-size-unit); +} +.saltColorChooserSwatches-alphaTextDiv { + font-size: var(--salt-text-fontSize); + margin-right: var(--salt-size-unit); +} +.saltColorChooserSwatches-textDiv { + display: flex; + justify-content: space-between; + padding: 8px 8px 0px 8px; +} +.saltColorChooserSwatches-pickerDiv { + padding-top: calc(2 * var(--salt-size-unit)); +} + +/* src/combo-box-deprecated/ComboBox.css */ +.saltComboBox { + width: 100%; +} +.saltComboBox-field { +} +.saltComboBox-disabled { +} +.saltComboBox-listWindowRoot { + z-index: calc(var(--salt-zIndex-flyover) - 1); +} + +/* src/combo-box-next/ComboBoxNext.css */ +.saltComboBoxNext-highlight { + font-weight: var(--salt-text-fontWeight-strong); +} +.saltComboBoxNext-input:hover { + --saltInput-borderColor: var(--salt-focused-outlineColor); +} +.saltComboBoxNext-list.saltListNext { + border-color: var(--salt-selectable-borderColor-selected); + box-shadow: var(--salt-overlayable-shadow-popout); + max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * var(--comboBoxNext-itemCount, 5)); + z-index: calc(var(--salt-zIndex-modal) + 1); +} + +/* src/contact-details/ContactDetails.css */ +.salt-density-touch { + --contactDetails-default-primary-fontSize: 30px; + --contactDetails-default-secondary-fontSize: 16px; + --contactDetails-compact-primary-fontSize: 16px; + --contactDetails-compact-secondary-fontSize: 14px; + --contactDetails-icon-size: 18px; + --contactDetails-label-width: 80px; +} +.salt-density-low { + --contactDetails-compact-primary-fontSize: 14px; + --contactDetails-default-primary-fontSize: 24px; + --contactDetails-compact-secondary-fontSize: 14px; + --contactDetails-default-secondary-fontSize: 14px; + --contactDetails-label-width: 70px; + --contactDetails-icon-size: 16px; +} +.salt-density-medium { + --contactDetails-compact-primary-fontSize: 12px; + --contactDetails-default-primary-fontSize: 18px; + --contactDetails-compact-secondary-fontSize: 12px; + --contactDetails-default-secondary-fontSize: 12px; + --contactDetails-label-width: 60px; + --contactDetails-icon-size: 14px; +} +.salt-density-high { + --contactDetails-compact-primary-fontSize: 11px; + --contactDetails-default-primary-fontSize: 14px; + --contactDetails-compact-secondary-fontSize: 11px; + --contactDetails-default-secondary-fontSize: 11px; + --contactDetails-label-width: 60px; + --contactDetails-icon-size: 12px; +} +.saltContactDetails { + --contactDetails-color: var(--salt-text-primary-foreground); + --contactDetails-label-color: var(--salt-text-secondary-foreground); + --contactDetails-noAvatar-color: var(--salt-accent-background); + --contactDetails-noAvatar-indicator-width: 4px; + --contactDetails-favoriteToggle-fill: var(--contactDetails-deselected-icon-color); + --contactDetails-favoriteToggle-marginRight: 0px; + --contactDetails-favoriteToggle-marginTop: 0px; + --contactDetails-mini-secondaryInfo-marginLeft: var(--salt-size-unit); + --contactDetails-mini-stacked-secondaryInfo-marginLeft: calc(var(--salt-size-unit) * 2); + --contactDetails-compact-tertiaryInfo-marginLeft: var(--salt-size-unit); + --contactDetails-separator-color: var(--salt-separable-secondary-borderColor); +} +.saltContactDetails { + display: grid; + padding: var(--salt-size-unit); +} +.saltContactDetails.saltContactDetails-noAvatar { + padding-left: 0; +} +.saltContactDetails.saltContactDetails-embedded { + padding: 0; +} +.saltContactDetails-default, +.saltContactDetails-default-stacked { + --contactDetails-primary-fontSize: var(--contactDetails-default-primary-fontSize); + --contactDetails-secondary-fontSize: var(--contactDetails-default-secondary-fontSize); +} +.saltContactDetails-compact, +.saltContactDetails-compact-stacked { + --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize); + --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize); +} +.saltContactDetails-mini, +.saltContactDetails-mini-stacked { + --contactDetails-primary-fontSize: var(--contactDetails-compact-primary-fontSize); + --contactDetails-secondary-fontSize: var(--contactDetails-compact-secondary-fontSize); +} +.saltContactDetails-default { + color: var(--contactDetails-color); + grid-template-columns: auto auto 1fr auto; + grid-template-rows: auto auto auto auto auto; + grid-template-areas: "noAvatar avatar primary favorite" "noAvatar avatar secondary secondary" "noAvatar avatar tertiary tertiary" ". . actions metadataExpander" ". . metadata metadata"; +} +.saltContactDetails-default-stacked { + grid-template-columns: auto 1fr auto; + grid-template-rows: auto auto auto auto auto auto; + grid-template-areas: "noAvatar avatar avatar" "noAvatar primary favorite" "noAvatar secondary secondary" "noAvatar tertiary tertiary" ". actions metadataExpander" ". metadata metadata"; +} +.saltContactDetails-compact { + grid-template-columns: auto auto auto 1fr auto; + grid-template-rows: auto auto auto; + grid-template-areas: "noAvatar avatar primary primary favorite" "noAvatar avatar secondary tertiary tertiary" ". . actions actions actions"; +} +.saltContactDetails-compact-stacked { + grid-template-columns: auto auto 1fr auto; + grid-template-rows: auto auto auto auto; + grid-template-areas: "noAvatar avatar primary favorite" "noAvatar avatar secondary favorite" "noAvatar avatar tertiary tertiary" ". . actions actions"; +} +.saltContactDetails-mini, +.saltContactDetails-mini-stacked { + grid-template-columns: auto minmax(60px, 1fr) auto; + grid-template-rows: auto; + grid-template-areas: "primary secondary favorite"; +} +.saltContactDetails-noAvatar-indicator { + grid-area: noAvatar; + width: var(--contactDetails-noAvatar-indicator-width); + background: var(--contactDetails-noAvatar-color); + margin-right: var(--salt-size-unit); +} +.saltContactAvatar { + grid-area: avatar; + margin-right: var(--salt-size-unit); +} +.saltContactAvatar-stacked { + margin-bottom: var(--salt-size-unit); +} +.saltContactActions { + grid-area: actions; + display: flex; + margin-top: var(--salt-size-unit); + margin-left: calc(var(--salt-size-unit) * -1); +} +.saltContactPrimaryInfo { + grid-area: primary; +} +.saltContactDetails-default .saltContactPrimaryInfo { + margin-bottom: calc(var(--salt-size-unit) * 0.5); +} +.saltContactSecondaryInfo { + grid-area: secondary; +} +.saltContactDetails-mini .saltContactSecondaryInfo { + margin-left: var(--contactDetails-mini-secondaryInfo-marginLeft); +} +.saltContactDetails-mini-stacked .saltContactSecondaryInfo { + margin-left: var(--contactDetails-mini-stacked-secondaryInfo-marginLeft); +} +.saltContactSecondaryInfo-icon { + margin-right: calc(var(--salt-size-unit) * 0.5); +} +.saltContactTertiaryInfo { + grid-area: tertiary; +} +.saltContactDetails-compact .saltContactTertiaryInfo { + margin-left: var(--contactDetails-compact-tertiaryInfo-marginLeft); +} +.saltContactTertiaryInfo-icon { + margin-right: calc(var(--salt-size-unit) * 0.5); +} +.saltContactMetadata { + grid-area: metadata; + display: flex; + flex-direction: column; + padding-top: var(--salt-size-unit); + padding-bottom: var(--salt-size-unit); +} +.saltContactMetadata-expander { + grid-area: metadataExpander; + margin-top: var(--salt-size-unit); +} +.saltContactMetadata-separator { + width: 100%; + height: 1px; + background: var(--contactDetails-separator-color); + margin-bottom: var(--salt-size-unit); +} +.saltContactMetadataItem { + display: flex; + flex-direction: row; + align-items: center; + margin-bottom: calc(var(--salt-size-unit) * 0.5); +} +.saltContactMetadataItem:last-child { + margin-bottom: unset; +} +.saltContactMetadata-stacked .saltContactMetadataItem { + flex-direction: column; + align-items: flex-start; +} +.saltContactMetadataItem-icon { + margin-right: calc(var(--salt-size-unit) * 2); + padding-left: 1px; +} +.saltContactMetadataItem-label { + flex-shrink: 0; + color: var(--contactDetails-label-color); + margin-right: calc(var(--salt-size-unit) * 2); + width: var(--contactDetails-label-width); +} +.saltContactFavoriteToggle { + align-self: start; + grid-area: favorite; + justify-self: center; + line-height: var(--contactDetails-primary-fontSize); + margin-right: var(--contactDetails-favoriteToggle-marginRight); + margin-top: var(--contactDetails-favoriteToggle-marginTop); +} +.saltContactFavoriteToggle-svg { + fill: var(--contactDetails-favoriteToggle-fill); +} +.saltContactFavoriteToggle-focusVisible { + outline: none; +} +.saltContactFavoriteToggle-focused { + outline: var(--salt-focused-outline); +} +.saltContactFavoriteToggle-deselected { + --contactDetails-favoriteToggle-fill: var(--salt-accent-borderColor); +} +.saltContactFavoriteToggle-selecting { + --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover); +} +.saltContactFavoriteToggle-selected { + --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-selected); +} +.saltContactFavoriteToggle-deselecting { + --contactDetails-favoriteToggle-fill: var(--salt-selectable-foreground-hover); +} +.saltContactFavoriteToggle-svg { + height: var(--contactDetails-icon-size); + width: var(--contactDetails-icon-size); +} + +/* src/content-status/ContentStatus.css */ +.saltContentStatus { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: var(--salt-text-textAlign-embedded); + gap: var(--salt-size-unit); +} +.saltContentStatus-content { + color: var(--saltContentStatus-content-color, var(--salt-text-primary-foreground)); + display: flex; + flex-direction: column; + gap: var(--salt-size-unit); +} +.saltContentStatus-title { + font-weight: var(--salt-text-display1-fontWeight); +} +.saltContentStatus-message { +} +.saltContentStatus-actions { + margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit)); +} + +/* src/deck-item/DeckItem.css */ +.saltDeckItem { + display: inline-block; +} +.saltDeckLayout-slide-vertical .saltDeckItem { + display: block; +} +.saltDeckItem-fade-previous, +.saltDeckItem-fade-next, +.saltDeckItem-static-previous, +.saltDeckItem-static-next { + display: none; +} +.saltDeckItem-fade-in { + animation: var(--salt-animation-fade-in-center); +} +.saltDeckItem-fade-out { + animation: var(--salt-animation-fade-out-back); +} + +/* src/deck-layout/DeckLayout.css */ +.saltDeckLayout { + overflow: hidden; +} +.saltDeckLayout-animate { + white-space: nowrap; +} +.saltDeckLayout-slide-horizontal { + width: var(--deckLayout-width); + transition: transform var(--salt-animation-duration); + transform: translateX(var(--deckLayout-transform-value)); +} +.saltDeckLayout-slide-vertical { + height: var(--deckLayout-height); + transition: transform var(--salt-animation-duration); + transform: translateY(var(--deckLayout-transform-value)); +} + +/* src/dialog/Dialog.css */ +.saltDialog { + position: relative; + display: flex; + flex-direction: column; + padding-top: var(--salt-spacing-300); + padding-bottom: var(--salt-spacing-300); + background: var(--salt-container-primary-background); + max-height: 100%; + max-width: 100%; + box-shadow: var(--salt-overlayable-shadow-modal); + z-index: calc(var(--salt-zIndex-appHeader) - 1); + overflow-y: auto; +} +.salt-density-high { + --saltDialog-minWidth: 240px; +} +.salt-density-medium { + --saltDialog-minWidth: 320px; +} +.salt-density-low { + --saltDialog-minWidth: 400px; +} +.salt-density-touch { + --saltDialog-minWidth: 480px; +} +.saltDialog-overlay { + background: var(--salt-overlayable-background); + display: flex; + align-items: center; + justify-content: center; + padding: var(--salt-spacing-100); + z-index: var(--salt-zIndex-modal); +} +.saltDialog-withStatus { + border-width: var(--salt-size-border); + border-style: var(--salt-container-borderStyle); +} +.saltDialog-info { + border-color: var(--salt-status-info-borderColor); +} +.saltDialog-error { + border-color: var(--salt-status-error-borderColor); +} +.saltDialog-warning { + border-color: var(--salt-status-warning-borderColor); +} +.saltDialog-success { + border-color: var(--salt-status-success-borderColor); +} +.saltDialog.saltDialog-enterAnimation { + animation: var(--salt-animation-fade-in-center); +} +.saltDialog.saltDialog-exitAnimation { + animation: var(--salt-animation-fade-out-back); +} +@media screen and (min-width: 480px) { + .saltDialog { + min-width: var(--saltDialog-minWidth); + } + .saltDialog-overlay { + padding: var(--salt-spacing-400); + } +} + +/* src/dialog/DialogActions.css */ +.saltDialogActions { + padding: var(--salt-spacing-300); + padding-bottom: 0; + display: flex; + justify-content: flex-end; + gap: var(--salt-spacing-100); +} + +/* src/dialog/DialogCloseButton.css */ +.saltButton.saltDialogCloseButton { + position: absolute; + top: 0; + right: 0; +} + +/* src/dialog/DialogContent.css */ +.saltDialogContent { + color: var(--salt-text-primary-foreground); + padding-left: var(--salt-spacing-300); + padding-right: var(--salt-spacing-300); + flex: 1 1 auto; + min-height: var(--salt-text-lineHeight); + font-size: var(--salt-text-fontSize); + line-height: var(--salt-text-lineHeight); + overflow-y: auto; +} + +/* src/dialog/DialogTitle.css */ +.saltDialogTitle { + display: flex; + gap: var(--salt-spacing-100); + padding-bottom: var(--salt-spacing-100); + padding-left: var(--salt-spacing-300); + padding-right: var(--salt-spacing-300); + margin: 0; +} +.saltDialogTitle .saltStatusIndicator.saltIcon { + --icon-size: var(--salt-text-h2-lineHeight); +} +.saltDialogTitle-withAccent { + position: relative; +} +.saltDialogTitle-withAccent::before { + content: ""; + position: absolute; + top: 0; + left: 0; + bottom: var(--salt-spacing-100); + width: var(--salt-size-accent); + background: var(--salt-accent-background); +} +.saltDialogTitle-error::before { + background: var(--salt-status-error-borderColor); +} +.saltDialogTitle-info::before { + background: var(--salt-status-info-borderColor); +} +.saltDialogTitle-success::before { + background: var(--salt-status-success-borderColor); +} +.saltDialogTitle-warning::before { + background: var(--salt-status-warning-borderColor); +} + +/* src/drawer/Drawer.css */ +.saltDrawer { + background: var(--drawer-background); + display: flex; + flex-direction: column; + max-height: 100%; + max-width: 100%; + overflow: auto; + padding: var(--salt-spacing-300); + box-shadow: var(--salt-overlayable-shadow-modal); + z-index: calc(var(--salt-zIndex-appHeader) - 1); + position: fixed; + top: 0; +} +.saltDrawer-overlay { + background: var(--salt-overlayable-background); + z-index: var(--salt-zIndex-drawer); +} +.saltDrawer-primary { + --drawer-background: var(--salt-container-primary-background); +} +.saltDrawer-secondary { + --drawer-background: var(--salt-container-secondary-background); +} +.saltDrawer-top { + left: 0; + right: 0; + bottom: auto; +} +.saltDrawer-top.saltDrawer-enterAnimation { + animation: var(--salt-animation-slide-in-bottom); +} +.saltDrawer-top.saltDrawer-exitAnimation { + animation: var(--salt-animation-slide-out-bottom); +} +.saltDrawer-right, +.saltDrawer-left { + width: calc(10 * var(--salt-size-base)); +} +.saltDrawer-right { + left: auto; + right: 0; + height: 100%; +} +.saltDrawer-right.saltDrawer-enterAnimation { + animation: var(--salt-animation-slide-in-right); +} +.saltDrawer-right.saltDrawer-exitAnimation { + animation: var(--salt-animation-slide-out-right); +} +.saltDrawer-left { + left: 0; + right: auto; + height: 100%; +} +.saltDrawer-left.saltDrawer-enterAnimation { + animation: var(--salt-animation-slide-in-left); +} +.saltDrawer-left.saltDrawer-exitAnimation { + animation: var(--salt-animation-slide-out-left); +} +.saltDrawer-bottom { + left: 0; + right: 0; + bottom: 0; + top: auto; +} +.saltDrawer-bottom.saltDrawer-enterAnimation { + animation: var(--salt-animation-slide-in-top); +} +.saltDrawer-bottom.saltDrawer-exitAnimation { + animation: var(--salt-animation-slide-out-top); +} + +/* src/dropdown/Dropdown.css */ +.saltDropdown { + --saltIcon-margin: 2px 0 0 8px; + display: inline-block; + line-height: 0; + position: relative; +} +.saltDropdown-fullWidth { + width: 100%; +} +.saltDropdown-popup { + background: var(--salt-container-primary-background); + z-index: calc(var(--salt-zIndex-flyover) - 1); +} + +/* src/dropdown/DropdownButton.css */ +.saltDropdownButton { + --saltButton-background-hover: var(--salt-actionable-secondary-background); + --saltButton-background-active: var(--salt-actionable-secondary-background); + --saltButton-fontWeight: var(--salt-text-fontWeight-strong); + --saltButton-textAlign: left; + --saltButton-textTransform: none; + --saltButton-width: 100%; +} +.saltDropdownButton:active { + --saltIcon-color: var(--salt-actionable-secondary-foreground); + --saltButton-text-color-active: var(--salt-actionable-secondary-foreground); +} +.saltDropdownButton-fullwidth { + width: 100%; +} +.saltDropdownButton-content { + align-items: center; + flex: 1; + width: 100%; + display: flex; + white-space: nowrap; +} +.saltDropdownButton-buttonLabel { + display: inline-block; + letter-spacing: 0; + overflow: hidden; + text-overflow: ellipsis; + width: 100%; +} +.saltDropdownButton-formField.saltButton:focus, +.saltDropdownButton-formField.saltButton:focus-visible { + outline: none; +} + +/* src/dropdown-next/DropdownNext.css */ +.saltDropdownNext-button { + --dropdownNext-borderColor: var(--salt-editable-borderColor); + --dropdownNext-borderStyle: var(--salt-editable-borderStyle); + --dropdownNext-borderWidth: var(--salt-size-border); + align-items: center; + background: var(--saltDropdownNext-background, var(--dropdownNext-background)); + color: var(--saltDropdownNext-color, var(--salt-text-primary-foreground)); + display: flex; + font-family: var(--salt-text-fontFamily); + font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize)); + height: var(--saltDropdownNext-height, var(--salt-size-base)); + line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight)); + min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base)); + min-width: var(--saltDropdownNext-minWidth, 160px); + padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100)); + padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100)); + position: relative; + border: none; + border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor); + justify-content: space-between; +} +.saltDropdownNext-button:hover { + --dropdownNext-borderColor: var(--salt-editable-borderColor-hover); + cursor: var(--salt-selectable-cursor-hover); +} +.saltDropdownNext-button:focus, +.saltDropdownNext-button:active { + --dropdownNext-borderColor: var(--salt-editable-borderColor-active); + --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active); + outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor)); +} +.saltDropdownNext-buttonText { + text-align: left; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding-right: var(--salt-spacing-100); + user-select: text; +} +.saltDropdownNext-list.saltListNext { + border-color: var(--salt-selectable-borderColor-selected); + box-shadow: var(--salt-overlayable-shadow-popout); + max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5); + z-index: calc(var(--salt-zIndex-modal) + 1); +} +.saltDropdownNext-disabled, +.saltDropdownNext-disabled:hover, +.saltDropdownNext-disabled:active { + --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled); + --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled); + --dropdownNext-borderWidth: var(--salt-size-border); + cursor: var(--salt-selectable-cursor-disabled); + background: var(--dropdownNext-background-disabled); + color: var(--saltDropdownNext-color-disabled, var(--salt-text-primary-foreground-disabled)); + outline: 0; +} +.saltDropdownNext-button.saltDropdownNext-readOnly, +.saltDropdownNext-button.saltDropdownNext-readOnly:hover, +.saltDropdownNext-button.saltDropdownNext-readOnly:active { + --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly); + --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly); + --dropdownNext-borderWidth: var(--salt-size-border); + cursor: var(--salt-editable-cursor-readonly); + background: var(--dropdownNext-background-readonly); + padding-right: 0; +} +.saltDropdownNext-icon.saltDropdownNext-disabled, +.saltDropdownNext-icon.saltDropdownNext-disabled:hover, +.saltDropdownNext-icon.saltDropdownNext-disabled:active, +.saltDropdownNext-icon.saltDropdownNext-readOnly, +.saltDropdownNext-icon.saltDropdownNext-readOnly:hover, +.saltDropdownNext-icon.saltDropdownNext-readOnly:active { + color: var(--salt-text-primary-foreground-disabled); +} +.saltDropdownNext-primary { + --dropdownNext-background: var(--salt-editable-primary-background); + --dropdownNext-background-active: var(--salt-editable-primary-background-active); + --dropdownNext-background-hover: var(--salt-editable-primary-background-hover); + --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled); + --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly); +} +.saltDropdownNext-secondary { + --dropdownNext-background: var(--salt-editable-secondary-background); + --dropdownNext-background-active: var(--salt-editable-secondary-background-active); + --dropdownNext-background-hover: var(--salt-editable-secondary-background-active); + --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled); + --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly); +} + +/* src/editable-label/EditableLabel.css */ +.saltEditableLabel { + --saltInputLegacy-minWidth: 14px; + --saltInputLegacy-position: absolute; + --editableLabel-padding: var(--saltEditableLabel-padding, 6px); + --editableLabel-height: var(--saltEditableLabel-height, 26px); + color: inherit; + display: flex; + flex-direction: column; + font-size: var(--salt-text-fontSize); + height: var(--editableLabel-height); + justify-content: center; + padding: 0 var(--editableLabel-padding); + position: relative; + z-index: var(--salt-zIndex-default); +} +.saltEditableLabel:before { + content: attr(data-text); + display: block; + height: 0px; + visibility: hidden; + white-space: pre-wrap; +} +.saltEditableLabel .saltInputLegacy { + font-weight: var(--salt-text-fontWeight); + left: var(--editableLabel-padding, 0); + padding: 0; + outline-style: none; + right: var(--editableLabel-padding, 0); +} +.saltEditableLabel-input { + outline: none; +} + +/* src/file-drop-zone/FileDropZone.css */ +.saltFileDropZone { + --fileDropZone-background: var(--salt-container-secondary-background); + --fileDropZone-borderColor: var(--salt-container-secondary-borderColor); + --fileDropZone-borderWidth: var(--salt-size-border); + --fileDropZone-borderStyle: var(--salt-target-borderStyle); + --fileDropZone-text-color: var(--salt-text-primary-foreground); + --fileDropZone-icon-color: var(--salt-text-primary-foreground); + --fileDropZone-padding: var(--salt-size-container-spacing); + --fileDropZone-title-fontSize: var(--salt-text-fontSize); + --fileDropZone-title-lineHeight: var(--salt-text-lineHeight); +} +.saltFileDropZone { + color: var(--saltFileDropZone-text-color, var(--fileDropZone-text-color)); + display: inline-flex; + background: var(--saltFileDropZone-background, var(--fileDropZone-background)); + text-align: center; + align-items: stretch; + justify-content: center; + border-color: var(--saltFileDropZone-borderColor, var(--fileDropZone-borderColor)); + border-style: var(--saltFileDropZone-borderStyle, var(--fileDropZone-borderStyle)); + border-width: var(--saltFileDropZone-borderWidth, var(--fileDropZone-borderWidth)); + flex-direction: column; + padding: var(--saltFileDropZone-padding, var(--fileDropZone-padding)); +} +.saltFileDropZone *:not(.saltFileDropZone-inputRoot, .saltFileDropZone-inputRoot *) { + pointer-events: none; +} +.saltFileDropZone-icon { + fill: var(--fileDropZone-icon-color); + margin-bottom: var(--salt-size-unit); +} +.saltFileDropZone .saltFileDropZone-title:not(:last-child), +.saltFileDropZone .saltFileDropZone-inputRoot:not(:last-child) { + margin-bottom: calc(var(--salt-size-unit) * 2); +} +.saltFileDropZone-active:not(.saltFileDropZone-disabled) { + --fileDropZone-background: var(--salt-target-background-hover); +} +.saltFileDropZone-error .saltFileDropZone-description { + margin-bottom: calc(var(--salt-size-unit) * 2); +} +.saltFileDropZone-error { + --fileDropZone-background: var(--salt-status-error-background); + --fileDropZone-borderColor: var(--salt-status-error-borderColor); + --fileDropZone-icon-color: var(--salt-status-error-foreground); +} +.saltFileDropZone-error:not(.saltFileDropZone-disabled).saltFileDropZone-active { + --fileDropZone-background: var(--salt-target-background-hover); + --fileDropZone-borderColor: var(--salt-container-secondary-borderColor); +} +.saltFileDropZone-title, +.saltFileDropZone-description { + font-size: var(--saltFileDropZone-title-fontSize, var(--fileDropZone-title-fontSize)); + line-height: var(--saltFileDropZone-title-lineHeight, var(--fileDropZone-title-lineHeight)); +} +.saltFileDropZone-title { + font-weight: var(--saltFileDropZone-fontWeight, var(--salt-text-fontWeight-strong)); +} +.saltFileDropZone-inputButton { + display: inline-flex; +} +.saltFileDropZone-inputRoot { + line-height: 1; +} +.saltFileDropZone-inputRoot .input-hidden { + position: absolute; + clip: rect(0, 0, 0, 0); + visibility: hidden; +} +.saltFileDropZone-disabled { + --fileDropZone-borderColor: var(--salt-container-secondary-borderColor-disabled); + cursor: var(--salt-target-cursor-disabled); +} +.saltFileDropZone-disabled .saltFileDropZone-icon, +.saltFileDropZone-disabled .saltFileDropZone-title { + --fileDropZone-text-color: var(--salt-text-primary-foreground-disabled); + --fileDropZone-icon-color: var(--salt-text-primary-foreground-disabled); +} + +/* src/form-field-legacy/FormActivationIndicator.css */ +.salt-density-touch { + --formFieldLegacy-activationIndicator-icon-size: 7px; +} +.salt-density-low { + --formFieldLegacy-activationIndicator-icon-size: 5px; +} +.salt-density-medium { + --formFieldLegacy-activationIndicator-icon-size: 5px; +} +.salt-density-high { + --formFieldLegacy-activationIndicator-icon-size: 3px; +} +.saltFormActivationIndicator { + height: 0px; + width: 100%; + position: relative; +} +.saltFormActivationIndicator-bar { + bottom: 0px; + border-color: var(--saltFormFieldLegacy-activationIndicator-borderColor, var(--formFieldLegacy-activationIndicator-color)); + border-bottom-width: var(--saltFormFieldLegacy-activationIndicator-borderWidth, var(--formFieldLegacy-activationIndicator-size)); + border-bottom-style: var(--saltFormFieldLegacy-activationIndicator-borderStyle, var(--formFieldLegacy-activationIndicator-style)); + height: 0; + opacity: var(--saltFormFieldLegacy-activationIndicator-opacity, 1); + position: absolute; + width: 100%; +} +.saltFormActivationIndicator-icon { + width: var(--saltFormFieldLegacy-activationIndicator-icon-size, var(--formFieldLegacy-activationIndicator-icon-size)); + height: var(--saltFormFieldLegacy-activationIndicator-icon-size, var(--formFieldLegacy-activationIndicator-icon-size)); + fill: var(--saltFormFieldLegacy-activationIndicator-icon-color, var(--formFieldLegacy-activationIndicator-color)); + opacity: var(--saltFormFieldLegacy-activationIndicator-opacity, 1); + position: absolute; + bottom: 3px; + right: 2px; +} + +/* src/form-field-legacy/FormFieldLegacy.css */ +.salt-density-high { + --formFieldLegacy-label-top-marginBottom: 2px; +} +.salt-density-medium { + --formFieldLegacy-label-top-marginBottom: 2px; +} +.salt-density-low { + --formFieldLegacy-label-top-marginBottom: 4px; +} +.salt-density-touch { + --formFieldLegacy-label-top-marginBottom: 8px; +} +.saltFormFieldLegacy { + --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor); + --formFieldLegacy-activationIndicator-size: var(--salt-size-border); + --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle); + --formFieldLegacy-background: var(--salt-editable-primary-background); + --formFieldLegacy-focused-outlineColor: var(--salt-focused-outlineColor); + --formFieldLegacy-helperText-height: 0px; +} +.saltFormFieldLegacy-secondary.saltFormFieldLegacy { + --formFieldLegacy-background: var(--salt-editable-secondary-background); +} +.saltFormFieldLegacy { + border: 0; + display: inline-grid; + font-size: var(--saltFormFieldLegacy-fontSize, var(--salt-text-fontSize)); + margin: var(--saltFormFieldLegacy-margin, 0); + padding: 0; + position: relative; + min-width: 0; + vertical-align: top; + width: var(--saltFormFieldLegacy-width, auto); +} +.saltFormFieldLegacy:hover { + --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-hover); + --formFieldLegacy-activationIndicator-size: var(--salt-size-border); + --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-hover); + --saltInputLegacy-cursor: var(--salt-editable-cursor-hover); +} +.saltFormFieldLegacy-focused, +.saltFormFieldLegacy-lowFocused, +.saltFormFieldLegacy.saltFormFieldLegacy-focused:hover, +.saltFormFieldLegacy.saltFormFieldLegacy-lowFocused:hover { + --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-active); + --formFieldLegacy-activationIndicator-size: var(--salt-editable-borderWidth-active); + --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-active); + --saltInputLegacy-cursor: var(--salt-editable-cursor-active); +} +.saltFormFieldLegacy-withHelperText { + --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-default); + --formFieldLegacy-activationIndicator-offsetBottom: calc(var(--formFieldLegacy-helperText-marginTop) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))); +} +.saltFormFieldLegacy-fullWidth.saltFormFieldLegacy-withHelperText { + --formFieldLegacy-helperText-marginTop: var(--formFieldLegacy-helperText-marginTop-fullWidth); + --formFieldLegacy-activationIndicator-offsetBottom: calc( var(--formFieldLegacy-helperText-marginTop-fullWidth) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height)) ); +} +.saltFormFieldLegacy-withHelperText { + --formFieldLegacy-helperText-fontSize: var(--saltFormFieldLegacy-helperText-fontSize, var(--salt-text-fontSize)); + --formFieldLegacy-helperText-baseHeight: calc(1.3 * var(--formFieldLegacy-helperText-fontSize)); + --formFieldLegacy-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formFieldLegacy-helperText-baseHeight)); + --formFieldLegacy-helperText-height: calc(var(--formFieldLegacy-helperText-calculatedHeight) + var(--formFieldLegacy-helperText-marginTop)); +} +.saltFormFieldLegacy-fullWidth { + width: 100%; +} +.saltFormFieldLegacy-disabled { + --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled); + --formFieldLegacy-activationIndicator-opacity: var(--salt-palette-opacity-disabled); + --formFieldLegacy-activationIndicator-size: var(--salt-size-border); + --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled); + --formFieldLegacy-helperText-opacity: var(--salt-palette-opacity-disabled); + --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled); +} +.saltFormFieldLegacy.saltFormFieldLegacy-disabled:hover { + --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-disabled); + --formFieldLegacy-activationIndicator-size: var(--salt-size-border); + --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-disabled); + --saltInputLegacy-cursor: var(--salt-editable-cursor-disabled); +} +.saltFormFieldLegacy.saltFormFieldLegacy-warning { + --formFieldLegacy-focused-outlineColor: var(--salt-status-warning-borderColor); + --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor); +} +.saltFormFieldLegacy.saltFormFieldLegacy-warning:hover { + --formFieldLegacy-activationIndicator-color: var(--salt-status-warning-borderColor); +} +.saltFormFieldLegacy.saltFormFieldLegacy-error { + --formFieldLegacy-focused-outlineColor: var(--salt-status-error-borderColor); + --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor); +} +.saltFormFieldLegacy.saltFormFieldLegacy-error:hover { + --formFieldLegacy-activationIndicator-color: var(--salt-status-error-borderColor); +} +.saltFormFieldLegacy-secondary.saltFormFieldLegacy-error { + --formFieldLegacy-background: var(--salt-status-error-background); +} +.saltFormFieldLegacy-secondary.saltFormFieldLegacy-warning { + --formFieldLegacy-background: var(--salt-status-warning-background); +} +.saltFormFieldLegacy-labelLeft { + --formFieldLegacy-label-marginTop: var(--salt-size-unit); + --formFieldLegacy-label-paddingLeft: 0px; + --formFieldLegacy-label-paddingRight: calc(0.75 * var(--salt-size-unit)); + align-self: start; + grid-template-columns: auto 1fr; +} +.saltFormFieldLegacy-labelTop { + --formFieldLegacy-label-marginBottom: var(--formFieldLegacy-label-top-marginBottom); + --formFieldLegacy-label-marginTop: 0; + --formFieldLegacy-label-paddingLeft: var(--salt-size-unit); + --formFieldLegacy-label-paddingRight: var(--salt-size-unit); + --formFieldLegacy-background-offset-height: calc(var(--formFieldLegacy-helperText-marginTop, 0px) + var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height))); + background: linear-gradient(to top, transparent var(--formFieldLegacy-background-offset-height), var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)) var(--formFieldLegacy-background-offset-height)); +} +.saltFormFieldLegacy-labelTop.saltFormFieldLegacy-withHelperText { + --formFieldLegacy-background-offset-height: var(--formFieldLegacy-helperText-background-offset-height); +} +.saltFormFieldLegacy > * { + grid-column-start: 1; + grid-column-end: 2; + grid-row-start: 2; + grid-row-end: 3; +} +.saltFormFieldLegacy-labelLeft > * { + grid-row-start: 1; + grid-row-end: 2; +} +.saltFormFieldLegacy > .saltFormLabel { + grid-row-start: 1; + grid-row-end: 2; +} +.saltFormFieldLegacy > .saltFormActivationIndicator { + grid-row-start: 3; + grid-row-end: 4; +} +.saltFormFieldLegacy > .saltFormHelperText { + grid-row-start: 4; + grid-row-end: 5; +} +.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * { + grid-column-start: 2; + grid-column-end: 2; +} +.saltFormFieldLegacy-readOnly { + --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly); + --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly); +} +.saltFormFieldLegacy.saltFormFieldLegacy-readOnly:hover { + --formFieldLegacy-activationIndicator-color: var(--salt-editable-borderColor-readonly); + --formFieldLegacy-activationIndicator-size: var(--salt-size-border); + --formFieldLegacy-activationIndicator-style: var(--salt-editable-borderStyle-readonly); + --saltInputLegacy-cursor: var(--salt-editable-cursor-readonly); +} +.saltFormFieldLegacy:not(.saltFormFieldLegacy-withHelperText):not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before { + content: " "; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: var(--saltFormFieldLegacy-helperText-lineHeight, var(--formFieldLegacy-helperText-height, 0px)); + outline-color: var(--formFieldLegacy-focused-outlineColor); + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); +} +.saltFormFieldLegacy-withHelperText:not(.saltFormFieldLegacy-labelLeft).saltFormFieldLegacy-focused:before { + content: " "; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: var(--formFieldLegacy-helperText-height, 0px); + outline-color: var(--formFieldLegacy-focused-outlineColor); + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); +} +.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused:before { + content: none; +} +.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > *:before { + content: " "; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0px; + outline-color: var(--formFieldLegacy-focused-outlineColor); + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); + z-index: -1; +} +.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before { + content: none; +} +.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused { + outline: none; +} +.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused > :is(.saltFormFieldLegacy-activationIndicator, .saltFormFieldLegacy-helperText, .saltFormLabel):before { + content: none; +} +.saltFormFieldLegacy-labelLeft.saltFormFieldLegacy-focused .saltFormLabel + * { + outline: none; +} +.saltFormFieldLegacy-tertiary.saltFormFieldLegacy.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ * { + background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)); +} +.saltFormFieldLegacy-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) { + background: var(--saltFormFieldLegacy-background, var(--formFieldLegacy-background)); +} +.saltFormFieldLegacy-tertiary.saltFormFieldLegacy { + --formFieldLegacy-background: var(--salt-editable-tertiary-background); +} + +/* src/form-field-legacy/FormHelperText.css */ +.salt-density-high { + --formFieldLegacy-helperText-marginTop-default: 2px; + --formFieldLegacy-helperText-marginTop-fullWidth: 3px; + --formFieldLegacy-helperText-background-offset-height: 17px; +} +.salt-density-medium { + --formFieldLegacy-helperText-marginTop-default: 2px; + --formFieldLegacy-helperText-marginTop-fullWidth: 3px; + --formFieldLegacy-helperText-transform: translate(0, 2px); + --formFieldLegacy-helperText-background-offset-height: 19px; +} +.salt-density-touch { + --formFieldLegacy-helperText-marginTop-default: 8px; + --formFieldLegacy-helperText-marginTop-fullWidth: 5px; + --formFieldLegacy-helperText-transform: translate(0, -3px); + --formFieldLegacy-helperText-background-offset-height: 21px; +} +.salt-density-low { + --formFieldLegacy-helperText-marginTop-default: 4px; + --formFieldLegacy-helperText-marginTop-fullWidth: 5px; + --formFieldLegacy-helperText-transform: translate(0, 1px); + --formFieldLegacy-helperText-background-offset-height: 21px; +} +.saltFormFieldLegacy-fullWidth { + --formFieldLegacy-helperText-transform: none; +} +.saltFormHelperText { + --formFieldLegacy-helperText-opacity: 1; + color: var(--saltFormFieldLegacy-helperText-color, var(--salt-text-secondary-foreground)); + font-size: var(--formFieldLegacy-helperText-fontSize); + font-style: var(--saltFormFieldLegacy-helperText-fontStyle, var(--salt-editable-help-fontStyle)); + letter-spacing: var(--saltFormFieldLegacy-helperText-letterSpacing, 0); + line-height: var(--saltFormFieldLegacy-helperText-lineHeight, var(--salt-text-lineHeight)); + min-height: var(--saltFormFieldLegacy-helperText-minHeight, var(--salt-text-label-minHeight)); + margin-bottom: var(--saltFormFieldLegacy-helperText-marginBottom, 0); + margin-top: var(--saltFormFieldLegacy-helperText-marginTop, var(--formFieldLegacy-helperText-marginTop)); + opacity: var(--saltFormFieldLegacy-helperText-opacity, var(--formFieldLegacy-helperText-opacity)); + padding-left: var(--saltFormFieldLegacy-helperText-paddingLeft, var(--salt-size-unit)); + padding-right: var(--saltFormFieldLegacy-helperText-paddingRight, var(--salt-size-unit)); + transform: var(--saltFormFieldLegacy-helperText-transform, var(--formFieldLegacy-helperText-transform, none)); +} + +/* src/form-field-legacy/FormLabel.css */ +.salt-density-touch { + --formFieldLegacy-label-default-top: 11px; + --formFieldLegacy-label-left-top: 16px; + --formFieldLegacy-label-minHeight: 16px; +} +.salt-density-low { + --formFieldLegacy-label-default-top: 7px; + --formFieldLegacy-label-left-top: 12px; +} +.salt-density-medium { + --formFieldLegacy-label-default-top: 5px; + --formFieldLegacy-label-left-top: 8px; +} +.salt-density-high { + --formFieldLegacy-label-default-top: 3px; + --formFieldLegacy-label-left-top: 4px; +} +.saltFormLabel { + --formFieldLegacy-label-fontSize: var(--saltFormFieldLegacy-label-fontSize, var(--salt-text-label-fontSize)); + --formFieldLegacy-label-top: var(--formFieldLegacy-label-default-top); + --formFieldLegacy-label-width: 100%; +} +.saltFormFieldLegacy-labelLeft .saltFormLabel { + --formFieldLegacy-label-top: var(--formFieldLegacy-label-left-top); + --formFieldLegacy-label-width: auto; +} +.saltFormLabel { + align-items: center; + color: var(--saltFormFieldLegacy-label-text-color, var(--salt-text-secondary-foreground)); + display: block; + font-size: var(--formFieldLegacy-label-fontSize); + margin-bottom: var(--saltFormFieldLegacy-label-marginBottom, var(--formFieldLegacy-label-marginBottom)); + min-height: var(--saltFormFieldLegacy-label-minHeight, var(--formFieldLegacy-label-minHeight, var(--salt-text-label-minHeight))); + margin-top: var(--saltFormFieldLegacy-label-marginTop, 0px); + line-height: var(--saltFormFieldLegacy-label-lineHeight, var(--salt-text-label-lineHeight)); + overflow: hidden; + padding-left: var(--saltFormFieldLegacy-label-paddingLeft, var(--formFieldLegacy-label-paddingLeft)); + padding-right: var(--saltFormFieldLegacy-label-paddingRight, var(--formFieldLegacy-label-paddingRight)); + padding-top: var(--saltFormFieldLegacy-label-paddingTop, 0); + padding-bottom: var(--saltFormFieldLegacy-label-paddingBottom, 0); + text-overflow: ellipsis; + top: var(--saltFormFieldLegacy-label-top, var(--formFieldLegacy-label-top)); + transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top))); + white-space: nowrap; + width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%)); +} +.saltFormLabel ~ * { + z-index: 1; +} +.saltFormLabel-disabled { + color: var(--saltFormFieldLegacy-label-text-color-disabled, var(--salt-text-secondary-foreground-disabled)); + cursor: var(--salt-editable-cursor-disabled); +} +.saltFormLabel-necessityIndicator { + font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle)); + margin-left: 1ch; +} +.saltFormLabel-statusIndicator { + margin-left: 6px; + vertical-align: top; +} + +/* src/form-group/FormGroup.css */ +.saltFormGroup { + display: flex; + flex-direction: column; + flex-wrap: wrap; + justify-content: space-between; +} +.saltFormGroup-row { + flex-direction: row; + float: left; +} + +/* src/formatted-input/FormattedInput.css */ +.saltFormattedInput { + --formattedInput-mask-color: var(--salt-text-secondary-foreground); +} +.saltFormattedInput-inputWrapper { + position: relative; + width: 100%; + display: inline-flex; +} +.saltFormattedInput-mask { + position: absolute; + color: var(--formattedInput-mask-color); + pointer-events: none; + display: flex; + align-items: center; + top: 0; + left: 0; +} +.saltFormattedInput-mask i { + color: transparent; + opacity: 0; + visibility: hidden; + font: inherit; +} + +/* src/input-legacy/InputLegacy.css */ +.salt-density-touch { + --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5); + --inputLegacy-button-inset: 4px; +} +.salt-density-low { + --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 2 / 3); + --inputLegacy-button-inset: 4px; +} +.salt-density-medium { + --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit) * 0.5); + --inputLegacy-button-inset: 2px; +} +.salt-density-high { + --inputLegacy-adornment-height: calc(var(--salt-size-base) + var(--salt-size-unit)); + --inputLegacy-button-inset: 2px; +} +.saltInputLegacy { + align-items: center; + background: var(--saltInputLegacy-background, none); + border: var(--saltInputLegacy-border, none); + border-radius: var(--saltInputLegacy-borderRadius, 0); + color: var(--saltInputLegacy-text-color, var(--salt-text-primary-foreground)); + cursor: var(--saltInputLegacy-cursor, default); + display: inline-flex; + font-family: var(--saltInputLegacy-fontFamily, var(--salt-text-fontFamily)); + font-size: var(--saltInputLegacy-fontSize, var(--salt-text-fontSize)); + height: var(--saltInputLegacy-height, var(--salt-size-base)); + line-height: var(--salt-text-lineHeight); + min-height: var(--saltInputLegacy-minHeight, var(--salt-size-base)); + min-width: var(--saltInputLegacy-minWidth, 8em); + padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit)); + position: var(--saltInputLegacy-position, relative); + width: 100%; +} +.saltInputLegacy-input:focus { + outline: none; +} +.saltInputLegacy-focused { + outline-style: var(--saltInputLegacy-focused-outlineStyle, var(--salt-focused-outlineStyle)); + outline-width: var(--saltInputLegacy-focused-outlineWidth, var(--salt-focused-outlineWidth)); + outline-color: var(--saltInputLegacy-focused-outlineColor, var(--salt-focused-outlineColor)); + outline-offset: var(--saltInputLegacy-focused-outlineOffset, var(--salt-focused-outlineOffset)); +} +.saltInputLegacy-input::selection { + background-color: var(--saltInputLegacy-highlight-color, var(--salt-text-background-selected)); +} +.saltInputLegacy-input { + background: var(--saltInputLegacy-background, none); + border: none; + box-sizing: content-box; + color: inherit; + display: block; + flex: 1; + font: inherit; + letter-spacing: var(--saltInputLegacy-letterSpacing, 0); + margin: 0; + min-width: 0; + overflow: hidden; + padding: 0; + height: 100%; + width: 100%; +} +.saltInputLegacy-disabled .saltInputLegacy-input { + cursor: var(--salt-editable-cursor-disabled); + color: var(--saltInputLegacy-text-color-disabled, var(--salt-text-primary-foreground-disabled)); +} +.saltInputLegacy-suffixContainer, +.saltInputLegacy-prefixContainer { + display: flex; + align-items: center; + height: var(--inputLegacy-adornment-height); +} +.saltInputLegacy-inputAdornedStart { + padding-left: var(--saltInputLegacy-adornedStart-padding, 0); +} +.saltInputLegacy-inputAdornedStart .saltInputLegacy-input { + padding-left: var(--saltInputLegacy-adornedStart-input-padding, var(--salt-size-unit)); +} +.saltInputLegacy-inputAdornedEnd { + padding-right: var(--saltInputLegacy-adornedEnd-padding, 0); +} +.saltInputLegacy-inputAdornedEnd .saltInputLegacy-input { + padding-right: var(--saltInputLegacy-adornedEnd-input-padding, var(--salt-size-unit)); +} +.saltInputLegacy .saltInputLegacy-suffixContainer > .saltButton, +.saltInputLegacy .saltInputLegacy-prefixContainer > .saltButton { + height: calc(var(--saltButton-height, var(--salt-size-base)) - (var(--inputLegacy-button-inset) * 2)); + margin: var(--inputLegacy-button-inset); + padding: 0 calc(var(--salt-size-unit) - var(--inputLegacy-button-inset)); +} +.saltInputLegacy-leftTextAlign .saltInputLegacy-input { + text-align: left; +} +.saltInputLegacy-centerTextAlign .saltInputLegacy-input { + text-align: center; +} +.saltInputLegacy-rightTextAlign .saltInputLegacy-input { + text-align: right; +} +.saltInputLegacy-formField { + min-width: var(--saltFormFieldLegacy-input-minWidth, 0px); + width: 100%; +} + +/* src/input-legacy/StaticInputAdornment.css */ +.saltStaticInputAdornment { + --inputLegacy-staticAdornment-padding: var(--salt-size-unit); +} +.saltStaticInputAdornment { + display: flex; + align-items: center; +} +.saltInputLegacy-prefixContainer .saltStaticInputAdornment { + padding-left: var(--inputLegacy-staticAdornment-padding); +} +.saltInputLegacy-suffixContainer .saltStaticInputAdornment { + padding-right: var(--inputLegacy-staticAdornment-padding); +} + +/* src/layer-layout/LayerLayout.css */ +.saltLayerLayout { + --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal)); + --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background)); + --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-size-container-spacing)); + --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-size-container-spacing)); +} +.saltLayerLayout { + background: var(--layerLayout-background); + display: flex; + flex-direction: column; + max-height: 100%; + max-width: 100%; + overflow: auto; + padding: var(--layerLayout-padding); + box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow)); + z-index: calc(var(--salt-zIndex-appHeader) - 1); +} +.saltLayerLayout-fullScreen { + width: 100vw; + height: 100vh; + margin: 0; + position: fixed; + top: 0; + left: 0; +} +.saltLayerLayout-center { + margin: var(--saltLayerLayout-margin, var(--layerLayout-margin)); +} +.saltLayerLayout-center.saltLayerLayout-enter-animation, +.saltLayerLayout-fullScreen.saltLayerLayout-enter-animation, +.saltScrim.saltLayerLayout-enter-animation { + animation: var(--salt-animation-fade-in-center); +} +.saltLayerLayout-center.saltLayerLayout-exit-animation, +.saltLayerLayout-fullScreen.saltLayerLayout-exit-animation, +.saltScrim.saltLayerLayout-exit-animation { + animation: var(--salt-animation-fade-out-back); +} +.saltLayerLayout-anchor { + position: fixed; + max-height: 100%; + top: 0; +} +.saltLayerLayout-top { + left: 0; + right: 0; + bottom: auto; +} +.saltLayerLayout-top.saltLayerLayout-enter-animation { + animation: var(--salt-animation-slide-in-bottom); +} +.saltLayerLayout-top.saltLayerLayout-exit-animation { + animation: var(--salt-animation-slide-out-bottom); +} +.saltLayerLayout-right { + left: auto; + right: 0; + height: 100%; +} +.saltLayerLayout-right.saltLayerLayout-enter-animation { + animation: var(--salt-animation-slide-in-right); +} +.saltLayerLayout-right.saltLayerLayout-exit-animation { + animation: var(--salt-animation-slide-out-right); +} +.saltLayerLayout-left { + left: 0; + right: auto; + height: 100%; +} +.saltLayerLayout-left.saltLayerLayout-enter-animation { + animation: var(--salt-animation-slide-in-left); +} +.saltLayerLayout-left.saltLayerLayout-exit-animation { + animation: var(--salt-animation-slide-out-left); +} +.saltLayerLayout-bottom { + left: 0; + right: 0; + bottom: 0; + top: auto; +} +.saltLayerLayout-bottom.saltLayerLayout-enter-animation { + animation: var(--salt-animation-slide-in-top); +} +.saltLayerLayout-bottom.saltLayerLayout-exit-animation { + animation: var(--salt-animation-slide-out-top); +} + +/* src/list/Highlighter.css */ +.saltHighlighter-highlight { + font-weight: var(--salt-text-fontWeight-strong); +} + +/* src/list/List.css */ +.saltList { + --list-background: var(--salt-container-primary-background); + --list-borderStyle: var(--salt-container-borderStyle); + --list-borderWidth: var(--salt-size-border); + --list-height: auto; + --list-item-height: var(--salt-size-stackable); + --list-item-gap: 0px; + --list-maxHeight: 100%; + background: var(--list-background); + border-color: var(--salt-container-primary-borderColor); + border-style: var(--list-borderStyle); + border-width: var(--list-borderWidth); + height: var(--saltList-height, var(--list-height)); + max-height: var(--list-maxHeight); + outline: none; + overflow-y: auto; + position: relative; + user-select: none; + width: var(--saltList-width, auto); +} +.saltList-borderless { + --list-borderStyle: none; +} +.saltList-viewport { + --list-item-height: 30px; + max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth)); + overflow: auto; +} +.saltListItemHeader { + --saltList-item-background: var(--list-item-header-background); + color: var(--list-item-header-color); +} +.saltListItemHeader[data-sticky=true] { + --saltList-item-background: var(--list-background); + position: sticky; + top: 0; + z-index: 1; +} +.saltList-collapsible .saltListItemHeader:after { + border-width: var(--checkbox-borderWidth); + border-color: var(--checkbox-borderColor); + content: var(--list-item-header-twisty-content); + -webkit-mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat; + mask: var(--list-svg-chevron-down) center center/12px 12px no-repeat; + background: var(--list-item-header-twisty-color); + height: 12px; + left: var(--list-item-header-twisty-left); + right: var(--list-item-header-twisty-right); + margin-top: -8px; + position: absolute; + top: var(--list-item-header-twisty-top); + transition: transform 0.3s; + width: 12px; +} +.saltListItemHeader[aria-expanded=false]:after { + transform: rotate(-90deg); +} +.saltList-scrollingContentContainer { + box-sizing: inherit; + position: relative; +} +.saltList-virtualized .saltListItem { + line-height: 30px; + position: absolute; + top: 0; + left: 0; + right: 0; + will-change: transform; +} +.saltList.saltFocusVisible:after { + inset: 2px; +} + +/* src/list/ListItem.css */ +.saltListItem { + --list-item-text-color: var(--salt-text-primary-foreground); + --list-item-background: var(--saltList-item-background, var(--salt-selectable-background)); + --list-item-text-color-active: var(--salt-text-primary-foreground); + --list-item-background-active: var(--salt-selectable-background-selected); + --list-item-alignItems: center; +} +.saltListItem.saltHighlighted { + --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-hover); + --list-item-background: var(--salt-selectable-background-hover); +} +.saltListItemHeader { + font-weight: var(--salt-text-fontWeight-strong); +} +.saltListItemHeader[data-sticky] { + position: sticky; + top: 0; + z-index: 1; +} +.saltListItem { + color: var(--list-item-text-color); + cursor: var(--saltList-item-cursor, pointer); + background: var(--saltList-item-background, var(--list-item-background)); + font-size: var(--salt-text-fontSize); + text-align: var(--salt-text-textAlign); + line-height: var(--salt-text-lineHeight); + height: var(--saltList-item-height, var(--list-item-height, auto)); + margin-bottom: var(--list-item-gap); + padding: 0 var(--salt-size-unit); + left: 0; + right: 0; + display: flex; + position: relative; + align-items: var(--list-item-alignItems); + white-space: nowrap; +} +.saltListItem:last-child { + margin-bottom: 0px; +} +.saltListItem-checkbox { + --list-item-background-active: var(--salt-selectable-background); + --list-item-text-color-active: var(--salt-text-primary-foreground); + --list-item-text-padding: 0 0 0 var(--salt-size-unit); +} +.saltListItem[aria-selected=true]:not(.saltListItem-checkbox) { + --list-item-background: var(--list-item-background-active); + color: var(--list-item-text-color-active); +} +.saltListItem.saltDisabled { + --list-item-text-color: var(--salt-text-primary-foreground-disabled); + cursor: var(--salt-selectable-cursor-disabled); +} +.saltListItem.saltFocusVisible { + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); + outline-offset: -2px; + outline-color: var(--salt-focused-outlineColor); +} +.saltListItem.saltFocusVisible:after { + content: none; +} +.saltListItem[aria-selected=true]:not(.saltListItem-checkbox).saltFocusVisible { + outline-color: var(--list-item-selected-focus-outlineColor); +} +.saltListItem-textWrapper { + flex: 1; + overflow: hidden; + padding: var(--list-item-text-padding, 0px); + white-space: nowrap; + text-overflow: ellipsis; +} +.saltListItem-proxy { + position: absolute !important; + visibility: hidden; +} + +/* src/list-deprecated/List.css */ +.saltListDeprecated-wrapper { + --list-background: var(--salt-container-primary-background); + --list-borderColor: var(--salt-container-primary-borderColor); + --list-borderStyle: var(--salt-container-borderStyle); + --list-borderWidth: var(--salt-size-border); + --list-borderRadius: 0; + --list-boxShadow: none; + --list-disabled-cursor: var(--salt-actionable-cursor-disabled); +} +.saltListDeprecated-wrapper { + position: relative; +} +.saltListDeprecated { + overflow-y: auto; +} +.saltListDeprecated:focus { + outline: none; +} +.saltListDeprecated-wrapper:not(.saltListDeprecated-borderless) { + border-color: var(--list-borderColor); + border-style: var(--list-borderStyle); + border-width: var(--list-borderWidth); + border-radius: var(--list-borderRadius); +} +.saltListDeprecated-wrapper { + background: var(--list-background); + box-shadow: var(--list-boxShadow); + position: relative; +} +.saltListDeprecated-borderless { + border: none; +} +.saltListDeprecated-disabled { + cursor: var(--list-disabled-cursor); +} + +/* src/list-deprecated/ListItem.css */ +.saltListItemDeprecated { + --list-item-text-color: var(--salt-selectable-foreground); + --list-item-background: var(--salt-selectable-background); + --list-item-background-hover: var(--salt-selectable-background-hover); + --list-item-selected-focus-outlineColor: var(--salt-accent-foreground); + --list-item-text-color-active: var(--salt-selectable-foreground-selected); + --list-item-background-active: var(--salt-selectable-background-selected); + --list-item-textAlign: var(--salt-text-textAlign); + --list-item-fontSize: var(--salt-text-fontSize); + --list-item-lineHeight: var(--salt-text-lineHeight); + --list-item-padding: 0 var(--salt-size-unit); + --list-item-gap: 0px; + --list-item-alignItems: center; + --list-item-selectable-cursor: pointer; + --list-item-cursor: default; + --list-item-disabled-cursor: var(--salt-selectable-cursor-disabled); + --list-item-disabled-regular-opacity: var(--salt-palette-opacity-disabled); +} +.saltListItemDeprecated { + color: var(--list-item-text-color); + background: var(--list-item-background); + text-align: var(--list-item-textAlign); + line-height: var(--list-item-lineHeight); + font-size: var(--list-item-fontSize); + padding: var(--list-item-padding); + left: 0; + right: 0; + display: flex; + position: relative; + align-items: var(--list-item-alignItems); + white-space: nowrap; +} +.saltListItemDeprecated { + margin-bottom: var(--list-item-gap); + cursor: var(--list-item-selectable-cursor); +} +.saltListItemDeprecated:last-child { + margin-bottom: 0px; +} +.saltListItemDeprecated.saltListItemDeprecated-highlighted:not(.saltListItemDeprecated-selected) { + background: var(--list-item-background-hover); +} +.saltListItemDeprecated.saltListItemDeprecated-deselectable { + cursor: var(--list-item-selectable-cursor); +} +.saltListItemDeprecated-textWrapper { + flex: 1; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.saltListItemDeprecated-selected { + color: var(--list-item-text-color-active); + background: var(--list-item-background-active); + cursor: var(--list-item-cursor); +} +.saltListItemDeprecated-disabled { + cursor: var(--list-item-disabled-cursor); + opacity: var(--list-item-disabled-regular-opacity); +} +.saltListItemDeprecated-focusVisible:after { + top: 2px; + left: 2px; + right: 2px; + bottom: 2px; + content: ""; + position: absolute; + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); + outline-color: var(--salt-focused-outlineColor); + outline-offset: var(--salt-focused-outlineOffset); +} +.saltListItemDeprecated-focusVisible.saltListItemDeprecated-selected:after { + outline-color: var(--list-item-selected-focus-outlineColor); +} + +/* src/list-next/ListItemNext.css */ +.saltListItemNext { + --listNext-item-text-color: var(--salt-text-primary-foreground); + --listNext-item-background: none; +} +.saltListItemNext { + color: var(--listNext-item-text-color); + background: var(--listNext-item-background); + height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + padding-left: var(--salt-spacing-100); + padding-right: var(--salt-spacing-100); + display: flex; + gap: var(--salt-size-unit); + position: relative; + align-items: center; + white-space: nowrap; + margin-top: var(--salt-size-border); + margin-bottom: var(--salt-size-border); + border: var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) transparent; +} +.saltListItemNext-focused { + border: var(--salt-focused-outline); +} +.saltListItemNext-highlighted:not([aria-disabled="true"]) { + --listNext-item-background: var(--salt-selectable-background-hover); + cursor: var(--salt-selectable-cursor-hover); +} +.saltListItemNext[aria-selected=true] { + outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selected); + --listNext-item-background: var(--salt-selectable-background-selected); + --saltIcon-color: var(--salt-selectable-foreground-selected); +} +.saltListItemNext[aria-disabled=true] { + --listNext-item-text-color: var(--salt-text-primary-foreground-disabled); + cursor: var(--salt-selectable-cursor-disabled); +} +.saltListItemNext[aria-disabled=true] .saltText { + color: var(--listNext-item-text-color); +} +.saltListItemNext[aria-disabled=true][aria-selected=true] { + outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-selectable-borderColor-selectedDisabled); + --listNext-item-background: var(--salt-selectable-background-selectedDisabled); +} + +/* src/list-next/ListNext.css */ +.saltListNext { + margin: 0; + background: var(--salt-container-primary-background); + border-color: var(--salt-container-primary-borderColor); + border-style: var(--salt-container-borderStyle); + border-width: var(--salt-size-border); + height: 100%; + outline: none; + overflow-y: auto; + overflow-x: hidden; + position: relative; + padding-inline-start: 0; + box-sizing: content-box; +} + +/* src/logo/Logo.css */ +.saltLogo { + display: inline-flex; + position: relative; + align-items: center; + justify-content: center; + height: var(--salt-size-base); + gap: var(--salt-spacing-100); +} +.saltLogo svg { + fill: var(--salt-text-secondary-foreground); + stroke: none; +} + +/* src/logo/LogoImage.css */ +.saltLogoImage { + max-height: 100%; +} + +/* src/logo/LogoSeparator.css */ +.saltLogoSeparator { + height: var(--salt-size-separator-height); + border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor); +} + +/* src/menu-button/MenuButton.css */ + +/* src/menu-button/MenuButtonTrigger.css */ +.saltMenuButtonTrigger { + --menuButton-trigger-open-color: var(--saltMenuButton-trigger-open-color, var(--salt-actionable-primary-foreground-active)); +} +.saltMenuButtonTrigger { + display: inline-flex; + line-height: 1; +} +.saltMenuButtonTrigger-buttonOpen { + background: var(--saltMenuButton-trigger-open-background, var(--salt-actionable-primary-background-active)); + color: var(--menuButton-trigger-open-color); +} +.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-caretIcon { + color: var(--menuButton-trigger-open-color); +} +.saltMenuButtonTrigger-buttonOpen:not(:hover) .saltMenuButtonTrigger-icon { + color: var(--menuButton-trigger-open-color); +} +.saltMenuButtonTrigger-icon { +} +.saltMenuButtonTrigger-caretIcon { + --saltIcon-margin: 0 0 0 var(--salt-size-unit); +} + +/* src/metric/Metric.css */ +.saltMetric { + display: flex; + align-items: flex-start; + padding: 0px; + color: var(--saltMetric-color, var(--salt-text-primary-foreground)); +} +.saltMetric-orientation-horizontal { + flex-direction: row; + gap: var(--metric-horizontal-gap, 16px); + margin-top: var(--metric-horizontal-marginTop, 0px); +} +.saltMetric-orientation-vertical { + flex-direction: column; + justify-content: center; +} +.saltMetric-orientation-vertical.saltMetric-align-center { + align-items: center; +} +.saltMetric-orientation-vertical.saltMetric-align-right { + align-items: flex-end; +} + +/* src/metric/MetricContent.css */ +.saltMetricContent { + display: flex; + flex-direction: column; + margin-top: var(--metric-content-marginTop, 0px); +} +.saltMetricContent-value-container { + align-items: baseline; + display: flex; + flex-direction: row; + gap: calc(var(--salt-size-unit) / 2); + margin-top: var(--metric-content-valueContainer-marginTop, 0px); +} +.saltMetric-direction-up .saltMetricContent-indicator { + fill: var(--salt-status-positive-foreground); +} +.saltMetric-direction-up .saltMetricContent-subvalue { + color: var(--salt-status-positive-foreground); +} +.saltMetric-direction-down .saltMetricContent-indicator { + fill: var(--salt-status-negative-foreground); +} +.saltMetric-direction-down .saltMetricContent-subvalue { + color: var(--salt-status-negative-foreground); +} +.saltMetricContent-subvalue { + margin-top: var(--metric-content-subvalue-marginTop, 0px); +} +.saltMetric-align-left .saltMetricContent { + text-align: left; +} +.saltMetric-align-center .saltMetricContent { + align-items: center; + text-align: center; +} +.saltMetric-align-right .saltMetricContent { + align-items: flex-end; + text-align: right; +} + +/* src/metric/MetricHeader.css */ +.saltMetricHeader { + --metric-title-color: var(--salt-text-primary-foreground); + --metric-subtitle-color: var(--salt-text-secondary-foreground); +} +.saltMetricHeader { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: calc(var(--salt-size-unit) * 0.25); +} +.saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader { + padding-top: 4px; +} +.saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader { + padding-top: 8px; +} +.saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader { + padding-top: 14px; +} +.saltMetricHeader-title { + color: var(--metric-title-color); +} +.saltMetricHeader-subtitle { + color: var(--metric-subtitle-color); + font-weight: var(--salt-text-fontWeight); +} +.saltMetric-align-center .saltMetricHeader { + align-items: center; +} +.saltMetric-align-right .saltMetricHeader { + align-items: flex-end; +} + +/* src/navigation-item/NavigationItem.css */ +.saltNavigationItem { + --navigationItem-color: var(--salt-text-primary-foreground); + --navigationItem-fill: var(--salt-text-primary-foreground); + --navigationItem-bar-inset: var(--salt-spacing-25); + --navigationItem-bar-size: var(--salt-size-indicator); + --navigationItem-indicator-background: var(--salt-navigable-indicator-active); + --navigationItem-gap: var(--salt-spacing-100); +} +.saltNavigationItem-active, +.saltNavigationItem-rootItem { + --navigationItem-fontWeight: var(--salt-text-fontWeight-strong); +} +.saltNavigationItem-blurActive, +.saltNavigationItem-active.saltNavigationItem-nested { + --navigationItem-fontWeight: var(--salt-text-fontWeight); +} +.saltNavigationItem-wrapper { + display: flex; + align-items: center; + position: relative; + gap: var(--navigationItem-gap); + font-weight: var(--navigationItem-fontWeight); + text-decoration: none; + transition: all var(--salt-duration-instant) ease-in-out; +} +.saltNavigationItem-wrapper.saltLink { + --link-textDecoration: none; +} +.saltNavigationItem-wrapper .saltIcon { + fill: var(--navigationItem-fill); + top: var(--salt-size-border); +} +.saltNavigationItem-label .saltBadge { + margin-left: auto; +} +.saltNavigationItem { + margin: 0 var(--navigationItem-gap); +} +.saltNavigationItem-wrapper.saltNavigationItem-horizontal { + min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap)); + padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0; + width: fit-content; +} +.saltNavigationItem-wrapper.saltNavigationItem-vertical { + min-height: calc(var(--salt-size-base)); + padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset)); + padding-right: var(--navigationItem-gap); + margin: var(--salt-spacing-50) 0; +} +.saltNavigationItem-wrapper .saltNavigationItem-label { + --link-color-visited: var(--navigationItem-color); + --link-color-hover: var(--navigationItem-color); + color: var(--navigationItem-color); + line-height: var(--salt-text-lineHeight); + font-family: var(--salt-text-fontFamily); + padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap)); + flex: 1; + text-align: left; + display: flex; + align-items: baseline; + gap: var(--navigationItem-gap); +} +.saltNavigationItem-wrapper.saltNavigationItem-nested { + padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400)); +} +.saltNavigationItem-wrapper.saltNavigationItem-expandButton { + --saltButton-background-hover: none; + --saltButton-background-active: none; + --saltButton-textTransform: none; + --saltButton-width: 100%; + --saltButton-letterSpacing: none; + gap: var(--navigationItem-gap); + outline-offset: var(--salt-size-border); +} +.saltNavigationItem-wrapper .saltNavigationItem-expandIcon { + --saltIcon-color: var(--navigationItem-fill); + top: 0; +} +.saltNavigationItem-wrapper:focus-visible { + outline: var(--salt-focused-outline); +} +.saltNavigationItem-horizontal:focus-visible { + border-right: var(--navigationItem-gap) solid transparent; + border-left: var(--navigationItem-gap) solid transparent; + margin: 0 calc(var(--navigationItem-gap) * -1); +} +.saltNavigationItem-wrapper:focus:not(:focus-visible) { + outline: 0; +} +.saltNavigationItem-wrapper::after { + content: ""; + position: absolute; + top: 0; + left: 0; + display: block; +} +.saltNavigationItem-horizontal::after { + width: 100%; + height: var(--navigationItem-bar-size); + top: var(--navigationItem-bar-inset); +} +.saltNavigationItem-vertical::after { + width: var(--navigationItem-bar-size); + left: var(--navigationItem-bar-inset); + top: var(--navigationItem-bar-inset); + height: calc(100% - var(--salt-spacing-50)); +} +.saltNavigationItem-wrapper:hover::after, +.saltNavigationItem-wrapper:focus-visible::after { + background: var(--salt-navigable-indicator-hover); + transition: all var(--salt-duration-perceptible) ease-in-out; +} +.saltNavigationItem-wrapper.saltNavigationItem-active::after, +.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after, +.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after { + background: var(--navigationItem-indicator-background); + transition: all var(--salt-duration-perceptible) ease-in-out; +} + +/* src/overlay/Overlay.css */ +.saltOverlay { + --overlay-text-color: var(--salt-text-primary-foreground); + --overlay-spacing: var(--salt-size-unit); + --overlay-fontSize: var(--salt-text-fontSize); + --overlay-background: var(--salt-container-primary-background); + --overlay-borderColor: var(--salt-container-primary-borderColor); + --overlay-zindex: var(--salt-zIndex-flyover); +} +.saltOverlay-secondary.saltOverlay { + --overlay-background: var(--salt-container-secondary-background); + --overlay-borderColor: var(--salt-container-secondary-borderColor); +} +.saltOverlay-content { + display: flex; + padding: calc(var(--overlay-spacing) * 2); + font-size: var(--overlay-fontSize); + border: 1px solid var(--overlay-borderColor); + box-shadow: var(--salt-overlayable-shadow-popout); + line-height: var(--salt-text-lineHeight); + background: var(--overlay-background); + color: var(--overlay-text-color); + position: relative; + opacity: 1; + overflow: visible; + z-index: var(--overlay-zindex); +} +.saltOverlay-arrow, +.saltOverlay-arrow::after { + border: 8px solid transparent; + position: absolute; +} +.saltOverlay-arrow::after { + content: ""; +} +.saltOverlay[data-placement^=top] .saltOverlay-arrow { + border-top-color: var(--overlay-borderColor); + bottom: -17px; +} +.saltOverlay[data-placement^=bottom] .saltOverlay-arrow { + border-bottom-color: var(--overlay-borderColor); + top: -17px; +} +.saltOverlay[data-placement^=left] .saltOverlay-arrow { + border-left-color: var(--overlay-borderColor); + right: -17px; +} +.saltOverlay[data-placement^=right] .saltOverlay-arrow { + border-right-color: var(--overlay-borderColor); + left: -17px; +} +.saltOverlay[data-placement^=top] .saltOverlay-arrow::after { + border-top-color: var(--overlay-background); + bottom: -7px; + left: calc(100% - 8px); +} +.saltOverlay[data-placement^=bottom] .saltOverlay-arrow::after { + border-bottom-color: var(--overlay-background); + top: -7px; + left: calc(100% - 8px); +} +.saltOverlay[data-placement^=left] .saltOverlay-arrow::after { + border-left-color: var(--overlay-background); + right: -7px; + top: calc(100% - 8px); +} +.saltOverlay[data-placement^=right] .saltOverlay-arrow::after { + border-right-color: var(--overlay-background); + left: -7px; + top: calc(100% - 8px); +} +.saltOverlay-close { + position: absolute; + right: 0; + top: 0; + z-index: var(--salt-zIndex-default); +} + +/* src/pagination/Pagination.css */ +.salt-density-medium { + --pagination-button-size: 28px; + --pagination-fontSize: 12px; +} +.salt-density-high { + --pagination-button-size: 20px; + --pagination-fontSize: 11px; +} +.salt-density-low { + --pagination-button-size: 36px; + --pagination-fontSize: 14px; +} +.salt-density-touch { + --pagination-button-size: 44px; + --pagination-fontSize: 16px; +} +.saltPagination { + display: flex; + flex-direction: row; +} +.saltPagination-arrowButton { + width: var(--pagination-button-size); + height: var(--pagination-button-size); +} +.saltPagination-previousButton { + margin-right: var(--salt-size-unit); +} +.saltPagination-nextButton { + margin-left: var(--salt-size-unit); +} +.saltPagination-pageButton { + min-width: var(--pagination-button-size); + height: var(--pagination-button-size); + --saltButton-fontWeight: var(--salt-text-fontWeight); +} +.saltPagination-pageButtonSelected { + background: var(--salt-selectable-background-selected); + color: var(--salt-selectable-cta-foreground-selected); +} +.saltPagination-pageButtonFixed { + padding: 0; +} +.saltPagination-ellipsis { + width: var(--pagination-button-size); + height: var(--pagination-button-size); + text-align: center; +} +.saltPagination-accessibleText { + display: block; + position: absolute; + width: 1px; + height: 1px; + overflow: hidden; + top: 0; + left: 0; + opacity: 0; +} +.saltPagination-compactInputField { +} +.saltPagination-compactInput { + height: var(--pagination-button-size); + min-width: unset; +} +.saltPagination-compactInputFixed { + min-width: var(--pagination-button-size); + width: var(--pagination-button-size); +} +.saltPagination-compactSeparator { + height: var(--pagination-button-size); + width: var(--pagination-button-size); + text-align: center; + font-size: var(--pagination-fontSize); + line-height: var(--pagination-button-size); +} +.saltPagination-goToInputWrapper { +} +.saltPagination-leftGoToInput { + margin-right: var(--salt-size-unit); +} +.saltPagination-rightGoToInput { + margin-left: var(--salt-size-unit); + min-width: unset; +} +.saltPagination-goToInputField { +} +.saltPagination-goToInput { + height: var(--pagination-button-size); + min-width: unset; +} +.saltPagination-goToInputFixed { + min-width: var(--pagination-button-size); + width: var(--pagination-button-size); +} + +/* src/parent-child-item/ParentChildItem.css */ +.saltParentChildItem-slide-top { + animation: var(--salt-animation-slide-in-top); +} +.saltParentChildItem-slide-bottom { + animation: var(--salt-animation-slide-in-bottom); +} +.saltParentChildItem-slide-left { + animation: var(--salt-animation-slide-in-left); +} +.saltParentChildItem-slide-right { + animation: var(--salt-animation-slide-in-right); +} + +/* src/parent-child-layout/ParentChildLayout.css */ +.saltParentChildLayout { +} + +/* src/pill/Pill.css */ +.salt-density-high { + --pill-icon-offset: 1px; +} +.salt-density-medium { + --pill-icon-offset: 2px; +} +.salt-density-low { + --pill-icon-offset: 3px; +} +.salt-density-touch { + --pill-icon-offset: 4px; +} +.saltPill { + --pill-background: var(--saltPill-background, var(--salt-taggable-background)); + --pill-background-active: var(--saltPill-background-active, var(--salt-taggable-background-active)); + --pill-background-disabled: var(--saltPill-background-disabled, var(--salt-taggable-background-disabled)); + --pill-background-hover: var(--saltPill-background-hover, var(--salt-taggable-background-hover)); + --pill-checkbox-size: var(--saltPill-checkbox-size, calc(var(--pill-height) - 2px)); + --pill-fontSize: var(--saltPill-fontSize, var(--salt-text-label-fontSize)); + --pill-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 1.5)); + --pill-icon-color: var(--saltPill-icon-color, var(--salt-taggable-foreground)); + --pill-icon-color-active: var(--saltPill-icon-color-active, var(--salt-taggable-foreground-active)); + --pill-icon-color-hover: var(--saltPill-icon-color-hover, var(--salt-taggable-foreground-hover)); + --pill-icon-color-disabled: var(--saltPill-icon-color-disabled, var(--salt-taggable-foreground-disabled)); + --pill-text-color: var(--saltPill-text-color, var(--salt-taggable-foreground)); + --pill-text-color-active: var(--saltPill-text-color-active, var(--salt-taggable-foreground-active)); + --pill-text-color-hover: var(--saltPill-text-color-hover, var(--salt-taggable-foreground-hover)); + --pill-text-color-disabled: var(--saltPill-text-color-disabled, var(--salt-taggable-foreground-disabled)); + --saltButton-fontWeight: var(--saltPill-button-fontWeight, var(--salt-text-fontWeight)); + --saltButton-padding: var(--saltPill-button-padding, 0); + --saltButton-textTransform: var(--saltPill-button-textTransform, unset); + --saltButton-cursor: normal; + --saltButton-height: var(--saltPill-height, var(--pill-checkbox-size)); + --saltButton-background: var(--pill-background); + --saltButton-color: var(--pill-text-color); + --saltButton-fontSize: var(--pill-fontSize); + --saltButton-letterSpacing: var(--saltPill-letterSpacing, 0); + --saltButton-lineHeight: var(--saltPill-lineHeight, var(--salt-text-label-lineHeight)); + --saltButton-minWidth: var(--saltPill-minWidth, 40px); +} +.saltPill { + align-items: center; + border-radius: var(--saltPill-borderRadius, 0); + display: inline-flex; + max-width: var(--saltPill-maxWidth, 160px); + min-height: var(--saltPill-minHeight, var(--salt-text-minHeight)); + outline: var(--saltPill-outline, 0); + position: relative; + gap: 0; +} +.saltPill:hover { + --saltButton-background-active: var(--pill-background-active); + --saltButton-background-hover: var(--pill-background-hover); + --saltIcon-color: var(--pill-icon-color); + --saltIcon-color-hover: var(--pill-icon-color-hover); + background: var(--pill-background-hover); +} +.saltPill:active, +.saltPill-active { + --saltButton-background-active: var(--pill-background-active); +} +.saltPill:focus { + outline-color: var(--saltPill-focused-outlineColor, var(--salt-focused-outlineColor)); + outline-style: var(--saltPill-focused-outlineStyle, var(--salt-focused-outlineStyle)); + outline-width: var(--salt-focused-outlineWidth); + outline-offset: var(--salt-focused-outlineOffset); +} +.saltPill-clickable { + --saltButton-background-active: var(--pill-background); + --saltButton-background-hover: var(--pill-background); + cursor: var(--salt-selectable-cursor-hover); + user-select: none; +} +.saltPill-deletable { + --saltButton-background-active: var(--pill-background); + --saltButton-background-hover: var(--pill-background); +} +.saltPill-selectable:hover, +.saltPill-deletable:hover { + --saltButton-background-active: var(--pill-background); + --saltButton-background-hover: var(--pill-background); +} +.saltPill-selectable:active, +.saltPill-active.saltPill-selectable { + --saltButton-background-active: var(--pill-background); +} +.saltPill-disabled, +.saltPill-disabled:hover, +.saltPill-disabled:active { + --saltButton-background-active: var(--pill-background-disabled); + --saltButton-background-hover: var(--pill-background-disabled); + --saltButton-text-color-active: var(--pill-text-color); + --saltButton-text-color-hover: var(--pill-text-color); + --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled); + --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled); + background: var(--pill-background-disabled); + cursor: var(--salt-selectable-cursor-disabled); +} +.saltPill-disabled .saltPill-checkbox { + --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground-disabled); + --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor-disabled); + --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor-disabled); +} +.saltPill-label { + color: var(--saltPill-text-color, var(--pill-text-color)); + display: inline; + flex-grow: 1; + font-weight: var(--saltPill-fontWeight, var(--salt-text-fontWeight)); + overflow: hidden; + padding-left: var(--saltPill-label-paddingLeft, var(--salt-size-adornmentGap)); + padding-right: var(--saltPill-label-paddingRight, var(--salt-size-adornmentGap)); + pointer-events: none; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; +} +.saltPill-deletable .saltPill-label { + padding-right: 0px; +} +.saltPill-innerLabel { + vertical-align: top; + line-height: var(--pill-height); +} +.saltPill-disabled .saltPill-label, +.saltPill-disabled .saltIcon { + cursor: var(--salt-selectable-cursor-disabled); + opacity: var(--salt-palette-opacity-disabled); + --saltIcon-color: var(--pill-icon-color-disabled); + --saltIcon-color-hover: var(--pill-icon-color-disabled); +} +.saltPill-deleteButton { + --saltButton-background-hover: var(--pill-background-hover); + --saltButton-background-active: var(--pill-background-active); + --saltButton-cursor: pointer; + flex-shrink: 0; + height: var(--pill-checkbox-size); + margin-left: calc(var(--salt-size-unit) / 2); + min-height: var(--saltPill-minHeight, var(--salt-text-minHeight)); + padding-right: calc(var(--salt-size-unit) / 2); +} +.saltPill-deleteButton-disabled { + --saltButton-background-hover: var(--pill-background-disabled); + --saltButton-background-active: var(--pill-background-disabled); + --saltButton-background-disabled: initial; +} +.saltPill-deleteButton .saltPill-deleteIcon { + left: var(--saltPill-deleteButton-left, var(--pill-icon-offset)); + position: relative; +} +.saltPill-deleteButton:active .saltPill-deleteIcon { + --saltIcon-color: var(--saltPill-deleteButton-color-active, var(--pill-icon-color-active)); +} +.saltPill-disabled:active .saltPill-deleteIcon { + --saltButton-background-active: var(--pill-background-disabled); + --saltIcon-color: var(--saltPill-deleteButton-color-disabled, var(--pill-icon-color)); +} +.saltPill .saltPill-icon { + fill: var(--pill-icon-color); + height: 12px; + margin-left: var(--salt-size-adornmentGap); + margin-right: calc(var(--salt-size-unit) * 0.5); +} +.saltPill:active .saltPill-icon, +.saltPill-active .saltPill-icon { + fill: var(--pill-icon-color-active); +} +.saltPill:not(.saltPill-deletable) .saltPill-icon + .saltPill-label { + padding-left: 0; +} +.saltPill:hover .saltPill-label { + color: var(--pill-text-color-hover); +} +.saltPill:active .saltPill-label { + color: var(--pill-text-color-active); +} +.saltPill-selectable .saltPill-label, +.saltPill-selectable:active .saltPill-label, +.saltPill-deletable .saltPill-label, +.saltPill-deletable:active .saltPill-label { + background: var(--pill-background); + color: var(--pill-text-color); +} +.saltPill-disabled .saltPill-label, +.saltPill-disabled:active .saltPill-label { + background: initial; + color: var(--pill-text-color-disabled); +} + +/* src/pill-next/PillNext.css */ +.saltPillNext { + display: flex; + max-width: 100%; +} +.saltPillNext-action { + --pillNext-background: var(--salt-actionable-primary-background); + --pillNext-background-active: var(--salt-actionable-primary-background-active); + --pillNext-background-disabled: var(--salt-actionable-primary-background-disabled); + --pillNext-background-hover: var(--salt-actionable-primary-background-hover); + --pillNext-text-color: var(--salt-actionable-primary-foreground); + --pillNext-text-color-active: var(--salt-actionable-primary-foreground-active); + --pillNext-text-color-hover: var(--salt-actionable-primary-foreground-hover); + --pillNext-text-color-disabled: var(--salt-actionable-primary-foreground-disabled); +} +.saltPillNext-action { + appearance: none; + -webkit-appearance: none; + display: inline-flex; + align-items: center; + background: var(--pillNext-background); + border-radius: 0; + border: 0; + height: calc(var(--salt-size-base) - var(--salt-spacing-100)); + min-height: var(--salt-text-minHeight); + outline: 0; + position: relative; + gap: var(--salt-spacing-50); + padding-left: var(--salt-spacing-50); + padding-right: var(--salt-spacing-50); + color: var(--pillNext-text-color); + font-family: var(--salt-text-fontFamily); + font-size: var(--salt-text-fontSize); + font-weight: var(--salt-text-fontWeight); + line-height: var(--salt-text-lineHeight); + min-width: 4em; +} +.saltPillNext-label { + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.saltPillNext-close-button { + --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100)); + --saltButton-padding: var(--salt-spacing-50); +} +.saltPillNext-action .saltIcon { + --saltIcon-color: currentColor; +} +.saltPillNext-clickable { + cursor: var(--salt-selectable-cursor-hover); +} +.saltPillNext-clickable:hover, +.saltPillNext-clickable:focus-visible { + color: var(--pillNext-text-color-hover); + background: var(--pillNext-background-hover); +} +.saltPillNext-clickable.saltPillNext-disabled:hover { + color: var(--pillNext-text-color); + background: var(--pillNext-background); +} +.saltPillNext-clickable.saltPillNext-active, +.saltPillNext-clickable:active { + background: var(--pillNext-background-active); + color: var(--pillNext-text-color-active); +} +.saltPillNext-clickable.saltPillNext-disabled.saltPillNext-active, +.saltPillNext-clickable.saltPillNext-disabled:active { + background: var(--pillNext-background); + color: var(--pillNext-text-color); +} +.saltPillNext-action:focus-visible { + outline: var(--salt-focused-outline); + z-index: var(--salt-zIndex-default); +} +.saltPillNext-action.saltPillNext-disabled, +.saltPillNext-action.saltPillNext-disabled:hover { + color: var(--pillNext-text-color-disabled); + background: var(--pillNext-background-disabled); + cursor: var(--salt-selectable-cursor-disabled); +} + +/* src/query-input/QueryInput.css */ +.saltQueryInput { +} +.saltQueryInputBody { + display: flex; + flex-direction: row; + align-items: center; +} +.saltQueryInputBody > .saltIcon { + padding: var(--salt-size-unit); + align-self: start; +} +.saltQueryInputBody-separator { + width: 1px; + background: var(--salt-separable-secondary-borderColor); + margin: 0 var(--salt-size-unit); + align-self: stretch; +} +.saltQueryInputBody-buttonGroup { + flex-shrink: 0; + align-self: start; + margin-bottom: var(--salt-size-unit); +} +.saltQueryInputBody-input { + flex-grow: 1; +} +.saltQueryInputValueSelector { +} +.saltQueryInputValueSelector-content { + display: flex; + flex-direction: row; +} +.saltCategoryList-categoryWidthMeasure { + position: fixed; + left: -1000px; + top: 0; + border: solid 1px black; +} +.saltCategoryList-category { + font-size: var(--salt-text-fontSize); +} +.saltCategoryListItem-text { + flex-shrink: 0; + margin-right: calc(var(--salt-size-unit) * 1.5); +} +.saltCategoryListItem-valuesContainer { + font-style: italic; + color: var(--salt-text-secondary-foreground); + flex-grow: 1; + display: flex; + flex-direction: row; + overflow: hidden; +} +.saltCategoryListItem-values { + overflow: hidden; + text-overflow: ellipsis; +} +.saltCategoryListItem-chevron { + flex-shrink: 0; + margin-left: var(--salt-size-unit); +} +.saltListItem-selected .saltIcon { + fill: var(--list-item-text-color-active); +} +.saltQueryInputValueList { + border: solid 1px var(--salt-container-primary-borderColor); +} +.saltQueryInputValueList-back { + display: flex; + flex-direction: row; + align-items: center; + border-bottom: solid 1px var(--salt-separable-secondary-borderColor); + cursor: pointer; +} +.saltQueryInputValueList-back .saltIcon { + margin-right: var(--salt-size-unit); +} +.saltQueryInputValueList-category { + font-size: var(--salt-text-fontSize); + flex-grow: 1; +} +.saltQueryInputSearchList { +} +.saltQueryInputSearchList-group { +} +.saltQueryInputSearchList-addKeyword { + border-top: solid 1px var(--salt-separable-secondary-borderColor); +} +.saltQueryInputSearchList-categoryTitle { + color: var(--salt-text-primary-foreground); + background: var(--salt-container-primary-background); + font-size: var(--salt-text-fontSize); + font-weight: var(--salt-text-fontWeight-strong); + display: flex; + align-items: center; + padding: 0 var(--salt-size-unit); + position: sticky; + top: 0; + z-index: var(--salt-zIndex-default); +} +.saltQueryInputSearchList-value { +} + +/* src/scrim/Scrim.css */ +.saltScrim { + top: 0; + left: 0; + right: 0; + width: 100%; + bottom: 0; + height: 100%; + display: flex; + z-index: 1199; + position: fixed; + align-items: center; + justify-content: center; + background: var(--saltScrim-background, var(--salt-overlayable-background)); + -webkit-tap-highlight-color: transparent; +} +.saltScrim:focus { + outline: none; +} +.saltScrim-containerFix { + position: absolute; + z-index: calc(var(--salt-zIndex-appHeader) - 1); +} + +/* src/search-input/SearchInput.css */ +.saltSearchInput .saltInputLegacy-input::-webkit-search-cancel-button { + display: none; +} + +/* src/skip-link/SkipLink.css */ +.saltSkipLink { + --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit)); + --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit)); + --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background)); + --skipLink-color: var(--saltSkipLink-color, var(--salt-text-primary-foreground)); +} +.saltSkipLink { + --saltLink-color-focus: var(--skipLink-color); +} +.saltSkipLink-target { + --skipLink-target-focus: var(--salt-focused-outline); +} +.saltSkipLink { + top: 0; + left: 0; + width: 1px; + height: 1px; + display: block; + opacity: 0; + overflow: hidden; + position: absolute; +} +.saltSkipLink:focus { + opacity: 1; + width: auto; + height: auto; + white-space: nowrap; + margin: var(--skipLink-margin); + padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding); + background: var(--skipLink-background); + color: var(--skipLink-color); + box-shadow: var(--salt-overlayable-shadow-popout); +} +.saltSkipLink { + font-size: var(--salt-text-fontSize); + font-family: var(--saltSkipLink-fontFamily, var(--salt-text-fontFamily)); + line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight)); +} +.saltSkipLink-target { + outline: var(--skipLink-target-focus); +} + +/* src/skip-link/SkipLinks.css */ +.saltSkipLinks { + position: relative; + float: left; + list-style: none; + margin: 0; + padding: 0; +} + +/* src/slider/Slider.css */ +.salt-density-high { + --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 2px); + --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 2px); + --slider-paddingTop: var(--saltSlider-paddingTop, 3px); + --slider-paddingBottom: var(--saltSlider-paddingBottom, 0); +} +.salt-density-medium { + --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 4px); + --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 4px); + --slider-paddingTop: var(--saltSlider-paddingTop, 6px); + --slider-paddingBottom: var(--saltSlider-paddingBottom, 0); +} +.salt-density-low { + --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 8px); + --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 8px); + --slider-paddingTop: var(--saltSlider-paddingTop, 9px); + --slider-paddingBottom: var(--saltSlider-paddingBottom, 0); +} +.salt-density-touch { + --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 12px); + --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 12px); + --slider-paddingTop: var(--saltSlider-paddingTop, 12px); + --slider-paddingBottom: var(--saltSlider-paddingBottom, 0); +} +.saltSlider { + --slider-rail-height: var(--saltSlider-rail-height, 8px); + --slider-rail-color: var(--saltSlider-rail-color, var(--salt-track-borderColor)); + --slider-rail-mark-height: var(--saltSlider-rail-mark-height, 7px); + --slider-rail-mark-color: var(--saltSlider-rail-mark-color, var(--slider-rail-color)); + --slider-selection-color: var(--saltSlider-selection-color, var(--salt-accent-background)); + --slider-selection-height: var(--saltSlider-selection-height, 2px); + --slider-handle-size: var(--saltSlider-handle-size, calc(var(--salt-size-base) * 0.5)); + --slider-handle-outlineStyle: var(--saltSlider-handle-outlineStyle, var(--salt-focused-outlineStyle)); + --slider-handle-outlineWidth: var(--saltSlider-handle-outlineWidth, var(--salt-focused-outlineWidth)); + --slider-handle-outlineColor: var(--saltSlider-handle-outlineColor, var(--salt-focused-outlineColor)); + --slider-handle-outlineOffset: var(--saltSlider-handle-outlineOffset, var(--salt-focused-outlineOffset)); + --slider-arrow-height: var(--saltSlider-arrow-height, 6px); + --slider-arrow-width: var(--saltSlider-arrow-width, 8px); + --slider-arrow-color: var(--saltSlider-arrow-color, var(--slider-selection-color)); + --slider-borderStyle: var(--saltSlider-borderStyle, none); + --slider-borderWidth: var(--saltSlider-borderWidth, 0); + --slider-borderColor: var(--saltSlider-borderColor, transparent); + --slider-width: var(--saltSlider-width, 300px); + --slider-clickable-paddingLeft: var(--saltSlider-clickable-paddingLeft, calc(var(--salt-size-base) * 0.5)); + --slider-clickable-paddingRight: var(--saltSlider-clickable-paddingRight, calc(var(--salt-size-base) * 0.5)); + --slider-label-fontSize: var(--saltSlider-label-fontSize, var(--salt-text-label-fontSize)); + --slider-label-paddingLeft: var(--saltSlider-label-paddingLeft, 0); + --slider-label-paddingRight: var(--saltSlider-label-paddingRight, 0); +} +.saltSlider { + width: var(--slider-width); + border-style: var(--slider-borderStyle); + border-width: var(--slider-borderWidth); + border-color: var(--slider-borderColor); + display: flex; + flex-direction: column; + align-items: stretch; + padding-top: var(--slider-paddingTop); + padding-bottom: var(--slider-paddingBottom); +} +.saltSlider-disabled { +} +.saltSlider-clickable { + padding: var(--slider-clickable-paddingTop) var(--slider-clickable-paddingRight) var(--slider-clickable-paddingBottom) var(--slider-clickable-paddingLeft); + margin-right: calc(-1 * var(--slider-clickable-paddingRight)); + margin-left: calc(-1 * var(--slider-clickable-paddingLeft)); + display: flex; + flex-direction: column; + justify-content: center; + align-items: stretch; +} +.saltSlider-track { + display: grid; + grid-template-rows: auto auto auto; + align-items: end; + grid-template-columns: auto auto auto; + row-gap: 0; + transition: grid-template-columns 100ms ease; +} +.saltSliderRail { + grid-row: 1; + grid-column-start: 1; + grid-column-end: -1; + height: var(--slider-rail-height); + border-style: solid; + border-width: 0 1px 1px 1px; + border-color: var(--slider-rail-color); +} +.saltSliderRailMarks { + grid-row: 2; + grid-column-start: 1; + grid-column-end: -1; + display: grid; + grid-template-rows: auto; +} +.saltSliderRailMarks-mark { + grid-row: 1; + width: 0; + height: var(--slider-rail-mark-height); + border-left: 1px solid var(--slider-rail-mark-color); +} +.saltSliderRailMarks-max { + margin-left: -1px; +} +.saltSliderMarkLabels { + grid-row: 3; + grid-column-start: 1; + grid-column-end: -1; + display: grid; + grid-template-rows: auto; + justify-items: center; +} +.saltSliderMarkLabels-label { + color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground)); + font-size: var(--slider-label-fontSize); + margin-top: var(--saltSlider-label-marginTop); + line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight)); + white-space: nowrap; +} +.saltSliderSelection { + grid-row: 1; + grid-column-start: 1; + grid-column-end: -2; + height: var(--slider-selection-height); + background: var(--slider-selection-color); +} +.saltSliderSelection-range { + grid-row: 1; + grid-column-start: 2; + grid-column-end: -2; + height: var(--slider-selection-height); + background: var(--slider-selection-color); +} +.saltSliderHandle-box:focus-visible { + outline-style: var(--slider-handle-outlineStyle); + outline-width: var(--slider-handle-outlineWidth); + outline-color: var(--slider-handle-outlineColor); + outline-offset: var(--slider-handle-outlineOffset); +} +.saltSliderHandle { + margin-left: calc(var(--slider-arrow-width) * -0.5); + grid-row: 1; + width: 0; + height: 0; + border-left: calc(var(--slider-arrow-width) * 0.5) solid transparent; + border-right: calc(var(--slider-arrow-width) * 0.5) solid transparent; + border-bottom: calc(var(--slider-arrow-height)) solid var(--slider-arrow-color); + position: relative; +} +.saltSliderHandle-min { + border-left: none; + margin-left: 0; +} +.saltSliderHandle-max { + border-right: none; +} +.saltSlider-label { + color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground)); + font-size: var(--slider-label-fontSize); + margin-top: var(--saltSlider-label-marginTop); + line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight)); + padding-left: var(--slider-label-paddingLeft); + padding-right: var(--slider-label-paddingRight); + white-space: nowrap; + text-overflow: ellipsis; +} + +/* src/stepped-tracker/SteppedTracker.css */ +.saltSteppedTracker { + margin: 0; + padding: 0; + text-indent: 0; + list-style-type: none; + display: flex; + flex-direction: row; + width: 100%; + position: relative; +} + +/* src/stepper-input/StepperInput.css */ +.salt-density-medium { + --stepperInput-adornment-container-top: -2px; + --stepperInput-button-height: 12px; + --stepperInput-button-margin: 2px; + --stepperInput-button-width: 24px; + --stepperInput-input-maxHeight: 28px; + --stepperInput-secondary-button-height: 26px; + --stepperInput-secondary-button-width: 26px; + --stepperInput-secondary-button-marginRight: 2px; +} +.salt-density-touch { + --stepperInput-adornment-container-top: 0; + --stepperInput-button-height: 16px; + --stepperInput-button-margin: 4px; + --stepperInput-button-width: 36px; + --stepperInput-secondary-button-height: 36px; + --stepperInput-secondary-button-width: 36px; + --stepperInput-secondary-button-marginRight: 4px; +} +.salt-density-low { + --stepperInput-adornment-container-top: 0; + --stepperInput-button-height: 12px; + --stepperInput-button-margin: 4px; + --stepperInput-button-width: 28px; + --stepperInput-secondary-button-height: 28px; + --stepperInput-secondary-button-width: 28px; + --stepperInput-secondary-button-marginRight: 4px; +} +.salt-density-high { + --stepperInput-adornment-container-top: -2px; + --stepperInput-button-height: 8px; + --stepperInput-button-margin: 2px; + --stepperInput-button-width: 16px; + --stepperInput-input-maxHeight: 20px; + --stepperInput-secondary-button-height: 18px; + --stepperInput-secondary-button-width: 18px; + --stepperInput-secondary-button-marginRight: 2px; +} +.saltStepperInput-adornmentContainer { + display: flex; + position: relative; + top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top)); +} +.saltStepperInput-secondaryButton { + --saltButton-height: var(--stepperInput-secondary-button-height); + --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin); + --saltButton-width: var(--stepperInput-secondary-button-width); +} +.saltStepperInput-hideSecondaryButton { + visibility: hidden; +} +.saltStepperInput-buttonContainer { + display: flex; + flex-direction: column; + justify-content: center; +} +.saltStepperInput-stepperButton { + --saltButton-height: var(--stepperInput-button-height); + --saltButton-margin: var(--stepperInput-button-margin); + --saltButton-width: var(--stepperInput-button-width); +} +.saltStepperInput-increment { +} +.saltStepperInput-decrement { + --saltButton-margin: 0 var(--stepperInput-button-margin) var(--stepperInput-button-margin) var(--stepperInput-button-margin); +} +.saltStepperInput-stepperButtonIcon { +} +.saltStepperInput-input { + max-height: var(--saltStepperInput-maxHeight, unset); +} + +/* src/tabs/Tab.css */ +.saltTab { + --saltEditableLabel-padding: 0; + --saltEditableLabel-height: var(--tabs-tabstrip-height); + --saltInputLegacy-minWidth: 4em; + --tabs-tab-background: var(--salt-navigable-primary-background); + --tabs-tab-cursor: pointer; + --tabs-tab-spacing: var(--salt-size-unit); + --tabs-tab-position: relative; +} +.saltTab { + align-items: center; + align-self: stretch; + background: var(--saltTabs-tab-background, var(--tabs-tab-background)); + border: none; + border-radius: 0; + color: var(--salt-text-primary-foreground); + cursor: var(--saltTabs-tab-cursor, var(--tabs-tab-cursor)); + display: var(--tabs-tabstrip-display); + height: var(--saltTabs-tab-height, var(--tabs-tabstrip-height)); + letter-spacing: var(--saltTabs-tab-letterSpacing, var(--tabs-tab-letterSpacing, 0)); + min-width: var(--saltTabs-tab-minWidth, 40px); + outline: none; + position: var(--saltTabs-tab-position, var(--tabs-tab-position)); + user-select: none; +} +.saltTab.saltFocusVisible:after { + inset: 2px 2px 4px 2px; +} +.saltTab:not(.saltTab-vertical) { + margin: 0 var(--tabs-tab-spacing) 0 0; +} +.saltTab[aria-selected=true] { + color: var(--salt-text-primary-foreground); + font-weight: var(--salt-navigable-fontWeight-active); +} +.saltTab-dragAway { + display: none; +} +.saltTab-main { + background: inherit; + border: none; + color: inherit; + cursor: inherit; + font-family: inherit; + font-size: inherit; + font-weight: inherit; + height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable)); + outline: none; + padding: 0 var(--tabs-tab-spacing); + position: relative; +} +.saltTab-closeable .saltTab-main { + border-right: solid transparent var(--salt-size-unit); +} +.saltTab .saltTab-closeButton { + display: flex; + align-items: center; + justify-content: center; +} +.saltTab-close-icon { + display: block; +} +.saltTab .saltTab-text { + display: inline-block; + position: relative; + overflow: hidden; + text-align: var(--salt-text-textAlign-embedded); + text-overflow: ellipsis; + top: var(--saltTabs-tab-top, var(--tabs-tab-top, auto)); + white-space: nowrap; + z-index: var(--salt-zIndex-default); +} +.saltTab-vertical .saltTab-text { + text-align: var(--salt-text-textAlign); +} +.saltTab .saltTab-text:before { + height: 0; + content: attr(data-text); + display: block; + visibility: hidden; + font-weight: var(--salt-navigable-fontWeight-active); +} +.saltTab-editing:after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 2px; + outline-color: var(--salt-focused-outlineColor); + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); + outline-offset: -2px; +} +.saltTab-vertical.saltTab-editing:after { + right: 2px; + bottom: 0; +} +.saltTab-vertical .saltFocusVisible:not([aria-selected="true"]):before { + left: auto; + height: auto; + top: 0; + width: 2px; +} +.saltTab.saltFocusVisible { + background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover)); +} +.saltTab:before { + content: var(--tabs-tab-before-content, none); + background: var(--tabs-tab-before-background); + height: var(--tabs-tab-before-height); + inset: var(--tabs-tab-before-inset); + position: absolute; + width: var(--tabs-tab-before-width); + z-index: 1; +} +.saltTabstrip-draggingTab .saltTab[aria-selected=true]:before { + --tabs-tab-before-content: ""; + --tabs-tab-before-background: var(--salt-navigable-indicator-color-active); + --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height); + --tabs-tab-before-inset: var(--tabs-activationIndicator-inset); + --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width); +} +.saltTab:not([aria-selected="true"]).saltFocusVisible:before, +.saltTab:hover:not([aria-selected="true"]):before { + --tabs-tab-before-content: ""; + --tabs-tab-before-background: var(--salt-navigable-indicator-hover); + --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height); + --tabs-tab-before-inset: var(--tabs-activationIndicator-inset); + --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width); +} +.saltTab:hover:not(.saltTab-closeHover) { + background: var(--saltTabs-tab-hover-background, var(--salt-navigable-primary-background-hover)); +} + +/* src/tabs/TabActivationIndicator.css */ +.saltTabActivationIndicator-no-background { + --tabs-activationIndicator-background: transparent !important; +} +.saltTabActivationIndicator { + --tabs-activationIndicator-background: var(--salt-container-primary-borderColor); + background: var(--saltTabs-activationIndicator-background, var(--tabs-activationIndicator-background)); + bottom: 0; + height: var(--saltTabs-activationIndicator-height, auto); + inset: var(--tabs-activationIndicator-inset); + position: absolute; + width: var(--tabs-activationIndicator-width, auto); +} +.saltTabActivationIndicator-thumb { + inset: var(--saltTabs-activationIndicator-thumb-inset); + position: absolute; + height: var(--tabs-activationIndicator-thumb-height, auto); + background: var(--salt-navigable-indicator-active); + transition: var(--saltTabs-activationIndicator-transition, var(--tabs-activationIndicator-transition, left 0.3s ease)); + width: var(--tabs-activationIndicator-thumb-width, auto); + z-index: 1; +} + +/* src/tabs/TabPanel.css */ +.saltTabPanel { + flex: 1 1 auto; +} + +/* src/tabs/Tabs.css */ +.saltTabs { + display: flex; + flex-direction: column; +} + +/* src/tabs/Tabstrip.css */ +.saltTabstrip { + --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable)); + --tabs-tabstrip-dragging-display: none; + --tabs-tabstrip-display: inline-flex; + --tabs-tabstrip-background: transparent; + align-items: flex-start; + align-self: var(--saltTabs-tabstrip-alignSelf, stretch); + font-size: var(--salt-text-fontSize); + font-weight: var(--salt-text-fontWeight); + position: relative; + overflow: hidden; + display: flex; + min-width: 28px; + width: 100%; +} +.saltTabstrip-horizontal { + --saltTabs-activationIndicator-height: 1px; + --saltTabs-activationIndicator-thumb-inset: -1px 0 0 0; + --tabs-activationIndicator-borderStyle: none none solid none; + --tabs-activationIndicator-inset: auto 0px 0px 0px; + --tabs-activationIndicator-transitionProperty: left; + --tabs-activationIndicator-thumb-height: 2px; +} +.saltTabstrip-vertical { + --saltTabs-activationIndicator-thumb-inset: 0 0 0 -1px; + --tabs-activationIndicator-transition: top 0.3s ease; + --tabs-activationIndicator-borderStyle: none solid none none; + --tabs-activationIndicator-inset: 0px 0px 0px auto; + --tabs-activationIndicator-transitionProperty: top; + --tabs-activationIndicator-width: 1px; + --tabs-activationIndicator-thumb-width: 2px; + align-self: flex-start; + display: inline-flex; +} +.saltTabstrip-draggingTab { + --saltTabs-activationIndicator-transition: none; +} +.saltTabstrip-draggingTab .saltTab { + pointer-events: none; +} +.saltTabstrip-horizontal { + height: var(--tabs-tabstrip-height); +} +.saltTabstrip-addButton, +.saltDropdown.saltTabstrip-overflowMenu { + margin-left: var(--salt-size-unit); +} +.saltTabstrip-overflowMenu.saltDropdown { + --saltIcon-margin: 2px 0 0 0px; +} +.saltTabstrip-overflowMenu-open { + --saltButton-background: var(--salt-actionable-secondary-background-active); + --saltButton-text-color: var(--salt-actionable-secondary-text-color-active); +} +.saltTabstrip-overflowMenu-open .saltButton { + --saltIcon-color: var(--salt-actionable-secondary-foreground-active); +} +.saltTabstrip-inner { + width: 100%; + align-items: center; + display: flex; + flex-basis: auto; + flex-grow: 0; + flex-shrink: 1; + flex-wrap: wrap; + justify-content: flex-start; + line-height: var(--tabs-tabstrip-height); +} +.saltTabstrip-vertical .saltTabstrip-inner { + flex-direction: column; + height: auto; +} +.saltTabstrip-centered .saltTabstrip-inner { + justify-content: center; +} +.saltDraggable[class*=tabstrip] { + --tabs-tabstrip-display: flex; + --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable)); + --tabs-tabstrip-dragging-display: block; + --tabs-tab-background: var(--salt-navigable-primary-background-hover); + --tabs-tab-before-content: ""; + --tabs-tab-before-background: var(--salt-navigable-indicator-hover); + --tabs-tab-before-height: var(--tabs-activationIndicator-thumb-height); + --tabs-tab-before-inset: var(--tabs-activationIndicator-inset); + --tabs-tab-before-width: var(--tabs-activationIndicator-thumb-width); + --tabs-tab-cursor: var(--salt-draggable-grab-cursor-active); + --tabs-tab-position: static; + font-size: 12px; +} +.saltDraggable-tabstrip-horizontal { + --tabs-tabstrip-height: var(--saltTabs-tabstrip-height, var(--salt-size-stackable)); + --tabs-activationIndicator-thumb-height: 2px; + --tabs-activationIndicator-inset: auto 0px 0px 0px; + line-height: var(--tabs-tabstrip-height); +} +.saltDraggable-tabstrip-vertical { + --tabs-activationIndicator-inset: 0px 0px 0px auto; + --tabs-activationIndicator-thumb-width: 2px; +} +.saltDraggable[class*=tabstrip] .saltTab[aria-selected=true]:before { + --tabs-tab-before-background: var(--salt-navigable-indicator-active); +} +.saltDraggable[class*=tabstrip] .saltTab { + box-shadow: var(--salt-overlayable-shadow-drag); +} +[data-overflowed] { + order: 99; + visibility: hidden; +} +.saltTabstrip-overflowMenu-dropTarget:after { + background: var(--salt-selectable-background-selected); + content: ""; + position: absolute; + height: 2px; + left: 0; + right: 0; + bottom: 0; +} + +/* src/tabs/ThemeTabstrip.css */ +.salt-density-touch { + --toolbar-depth: calc(var(--salt-size-basis-unit) * 13); +} +.salt-density-low { + --toolbar-depth: calc(var(--salt-size-basis-unit) * 11); +} +.salt-density-medium { + --toolbar-depth: calc(var(--salt-size-basis-unit) * 9); +} +.salt-density-high { + --toolbar-depth: calc(var(--salt-size-basis-unit) * 7); +} + +/* src/tabs-next/TabNext.css */ +.saltTabNext { + align-items: center; + justify-content: center; + appearance: none; + -webkit-appearance: none; + display: inline-flex; + background: var(--salt-navigable-primary-background); + gap: var(--salt-spacing-100); + border: none; + border-left: var(--salt-size-border) var(--salt-container-borderStyle) transparent; + border-right: var(--salt-size-border) var(--salt-container-borderStyle) transparent; + border-radius: 0; + white-space: pre; + min-height: calc(var(--salt-size-base) + var(--salt-spacing-100)); + min-width: 4em; + padding: var(--salt-spacing-50) var(--salt-spacing-100); + position: relative; + flex-shrink: 0; + cursor: var(--salt-navigable-cursor-hover); + color: var(--salt-text-primary-foreground); + font-weight: var(--salt-navigable-fontWeight); + font-family: var(--salt-text-fontFamily); + text-align: var(--salt-text-textAlign); + letter-spacing: var(--salt-text-letterSpacing); + line-height: var(--salt-text-lineHeight); + font-size: var(--salt-text-fontSize); +} +.saltTabNext-primary { + --tabNext-background-active: var(--salt-container-primary-background); +} +.saltTabNext-secondary { + --tabNext-background-active: var(--salt-container-secondary-background); +} +.saltTabNext::after { + content: ""; + position: absolute; + left: calc(var(--salt-size-border) * -1); + right: calc(var(--salt-size-border) * -1); + height: var(--salt-size-indicator); +} +.saltTabNext-main::after { + top: 0; +} +.saltTabNext-inline::after { + bottom: 0; +} +.saltTabNext:hover::after, +.saltTabNext:focus-visible::after { + background: var(--salt-navigable-indicator-hover); +} +.saltTabNext:disabled:hover::after, +.saltTabNext:disabled:focus-visible::after { + background: none; +} +.saltTabNext:focus-visible { + outline: var(--salt-focused-outline); +} +.saltTabNext-main[aria-selected=true] { + background: var(--tabNext-background-active); + border-left: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor); + border-right: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor); +} +.saltTabNext[aria-selected=true]::after { + background: var(--salt-navigable-indicator-active); +} +.saltTabNext:disabled { + cursor: var(--salt-navigable-cursor-disabled); + color: var(--salt-text-primary-foreground-disabled); +} + +/* src/tabs-next/TabstripNext.css */ +.saltTabstripNext { + display: flex; + flex-wrap: nowrap; + justify-content: var(--tabstripNext-justifyContent); + align-items: center; + position: relative; + background: transparent; + width: 100%; + padding-left: var(--salt-spacing-300); + padding-right: var(--salt-spacing-300); +} +.saltTabstripNext-main::before { + content: ""; + position: absolute; + inset: auto 0 0 0; + height: var(--salt-size-border); + border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor); +} +.saltTabstripNext .saltTabNext-wrapper:not(:last-child) { + padding-right: var(--salt-spacing-100); +} + +/* src/toast-group/ToastGroup.css */ +.saltToastGroup { + width: var(--toastGroup-width); + max-height: calc(100% - var(--salt-spacing-300) * 2); + margin: var(--salt-spacing-300) var(--salt-spacing-200) var(--salt-spacing-100) var(--salt-spacing-200); + overflow: auto; + display: flex-inline; + flex-direction: column; + position: fixed; + z-index: var(--salt-zIndex-flyover); +} +.saltToastGroup-bottom-right { + bottom: 0; + right: 0; + justify-content: flex-end; +} +.saltToastGroup-top-right { + top: 0; + right: 0; + justify-content: flex-start; +} +.salt-density-high { + --toastGroup-width: 210px; +} +.salt-density-medium { + --toastGroup-width: 260px; +} +.salt-density-low { + --toastGroup-width: 310px; +} +.salt-density-touch { + --toastGroup-width: 360px; +} + +/* src/tokenized-input/TokenizedInput.css */ +.salt-density-medium { + --tokenizedInput-gutter-size: var(--salt-size-basis-unit); + --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2); + --tokenizedInput-last-pill-margin: var(--salt-size-unit); +} +.salt-density-touch { + --tokenizedInput-gutter-size: var(--salt-size-basis-unit); + --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 2px); + --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2); +} +.salt-density-low { + --tokenizedInput-gutter-size: var(--salt-size-basis-unit); + --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px); + --tokenizedInput-last-pill-margin: calc(var(--salt-size-unit) / 2); +} +.salt-density-high { + --tokenizedInput-gutter-size: calc(var(--salt-size-basis-unit) - 1px); + --tokenizedInput-pill-group-y-padding: calc(var(--salt-size-unit) / 2 + 1px); + --tokenizedInput-last-pill-margin: var(--salt-size-unit); +} +.saltTokenizedInput { + --tokenizedInput-spacing: var(--salt-size-unit); + --tokenizedInput-height: var(--salt-size-base); +} +.saltTokenizedInput { + display: inline-flex; + justify-content: space-between; + min-width: 8em; + width: 100%; +} +.saltTokenizedInput:hover { + cursor: var(--salt-selectable-cursor-hover); +} +.saltTokenizedInput.saltTokenizedInput-disabled:hover { + cursor: var(--salt-selectable-cursor-disabled); +} +.saltTokenizedInput-pillGroup { + align-content: flex-start; + display: flex; + flex: 1; + flex-wrap: wrap; + min-height: var(--tokenizedInput-height); + padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing); +} +.saltTokenizedInput-disabled { + cursor: var(--salt-editable-cursor-disabled); + opacity: var(--saltTokenizedInput-disabled-opacity, var(--salt-palette-opacity-disabled)); +} +.saltTokenizedInput-focused { + outline: var(--saltTokenizedInput-focused-outline, var(--salt-focused-outline)); +} +.saltTokenizedInput-expanded { + height: auto; + --saltPill-maxWidth: calc(100px - var(--salt-size-unit)); +} +.saltTokenizedInput-hidden, +.saltTokenizedInput-input.saltTokenizedInput-hidden, +.saltButton.saltTokenizedInput-hidden { + display: none; +} +.saltInputLegacy.saltTokenizedInput-input { + align-items: flex-start; + cursor: text; + flex-grow: 1; + padding: 0; + outline: none; + width: auto; + height: auto; + min-width: 0; + min-height: 0; +} +.saltTokenizedInput-clearButton { + flex: none; + align-self: flex-end; +} +.saltTokenizedInput-expandButton.saltButton { + padding: 0 calc(var(--tokenizedInput-spacing) / 4); + --saltButton-height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5); + --saltButton-margin: calc(var(--tokenizedInput-gutter-size) / 2) 0; +} +.saltTokenizedInput-expanded, +.saltTokenizedInput-expanded .saltTokenizedInput-pillGroup { + height: auto; +} +.saltTokenizedInput .saltInputPill, +.saltInputLegacy.saltTokenizedInput-input, +.saltTokenizedInput-inputField.saltTokenizedInput-inputMultiline .saltTokenizedInput-input { + margin: calc(var(--tokenizedInput-gutter-size) / 2) 0; + height: calc(var(--tokenizedInput-height) - var(--tokenizedInput-spacing) * 1.5); +} +.saltTokenizedInput .saltInputPill { + min-width: 0; + margin-right: var(--tokenizedInput-gutter-size); + --saltPill-maxWidth: 100px; +} +.saltTokenizedInput .saltInputPill > * { + min-width: 0; +} +.saltTokenizedInput .saltInputPill.saltInputPill-hidden { + display: none; +} +.saltTokenizedInput .saltInputPill-pillLastVisible { + margin-right: var(--saltTokenizedInput-pill-last-visible-marginRight, var(--tokenizedInput-last-pill-margin)); +} +.saltTokenizedInput .saltInputPill-pillActive { + background: var(--saltTokenizedInput-pill-background-active, var(--salt-selectable-background-hover)); +} +.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteIcon { + color: var(--saltTokenizedInput-pill-delete-icon-color, var(--salt-actionable-cta-foreground-hover)); +} +.saltTokenizedInput .saltInputPill-pillActive .saltPill-deleteButton { + color: var(--saltTokenizedInput-pill-delete-button-color-active, var(--salt-actionable-cta-foreground-hover)); + background: var(--saltTokenizedInput-pill-delete-button-background-active, var(--salt-actionable-cta-background-hover)); +} + +/* src/toolbar/Toolbar.css */ +.saltToolbar { + --toolbar-background: var(--salt-container-secondary-background); + --toolbar-fontSize: var(--salt-text-fontSize); +} +.saltToolbar { + --toolbar-size: calc(var(--salt-size-base) + var(--salt-size-unit) * 2); + background: var(--saltToolbar-background, var(--toolbar-background)); + font-size: var(--toolbar-fontSize); + justify-content: flex-start; + overflow: hidden; + position: relative; +} +.saltToolbar > .Responsive-inner { + align-items: center; + flex: 1; + flex-wrap: wrap; + justify-content: inherit; + margin: 0 !important; + overflow: hidden; + padding: 0 !important; +} +.saltToolbar[aria-orientation=horizontal] { + display: flex; + height: var(--saltToolbar-height, var(--toolbar-size)); + line-height: normal; + min-width: 0; + white-space: nowrap; + width: var(--saltToolbar-width, 100%); +} +.saltToolbar[aria-orientation=horizontal] > .Responsive-inner { + display: flex; + flex-direction: row; + width: 100%; +} +.saltToolbar[aria-orientation=horizontal] > .Responsive-inner > :not(.saltTooltray) { + margin-right: var(--salt-size-unit); + align-self: center; +} +.saltToolbar[aria-orientation=horizontal] > .Responsive-inner > .saltTooltray > .Responsive-inner > * { + margin-top: var(--salt-size-unit); +} +.saltToolbar[aria-orientation=horizontal] > .Responsive-inner > .saltTooltray { + margin-top: 0; +} +.saltToolbar[aria-orientation=horizontal] > .Responsive-inner > [data-pad-end=true] { + margin-right: auto; +} +.saltToolbar[aria-orientation=vertical] > .Responsive-inner > [data-pad-end=true] { + margin-bottom: auto; +} +.saltToolbar[aria-orientation=horizontal] > .Responsive-inner > *:first-child { + margin-left: var(--salt-size-unit); +} +.saltToolbar[aria-orientation=vertical] { + display: inline-flex; + flex-direction: column; + height: 100%; + min-height: 0; +} +.saltToolbar[aria-orientation=vertical] > .Responsive-inner { + display: inline-flex; + flex-direction: column; + max-height: 100%; +} +.saltToolbar > .Responsive-inner[data-collapsing=true] { + flex-wrap: nowrap; +} +.saltToolbar > .Responsive-inner[data-collapsing=true] > *[data-overflowed=true] { + min-width: 0; + flex-shrink: 1; + flex-basis: 0; + padding: 0; + margin: 0; + visibility: visible; +} +.saltToolbar > .Responsive-inner > *[data-pad-start=true] { + margin-left: auto; +} +.saltToolbarField-start { + margin-left: 0 !important; + order: -1; +} +.saltToolbar > .Responsive-inner > .saltToolbarField { + flex-shrink: 0; + flex-grow: 0; +} +.saltToolbarField.saltFormFieldLegacy-labelLeft > .saltFormLabel { + padding-left: var(--salt-size-unit); +} +.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton { + background: var(--toolbar-background); +} +.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:hover { + background: var(--salt-actionable-secondary-background-hover); +} +.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltButton-active, +.saltToolbar .saltFormFieldLegacy-primary.saltFormFieldLegacy > .saltToolbarButton:active { + background: var(--salt-actionable-secondary-background-active) !important; +} +[data-overflowed] { + order: 99; + visibility: hidden; +} + +/* src/toolbar/ToolbarButton.css */ +.saltToolbarButton:not([data-is-inside-panel]) { + --saltButton-fontSize: 0; + --saltButton-letterSpacing: 0; + gap: 0; +} + +/* src/toolbar/Tooltray.css */ +.saltTooltray { + --toolbar-tooltray-height: var(--toolbar-size); +} +.saltTooltray { + background: inherit; + flex-shrink: 0; + flex-grow: 0; + position: relative; + overflow: hidden; + align-items: flex-start; + justify-content: flex-start; +} +.saltTooltray-horizontal { + height: var(--toolbar-tooltray-height); +} +.saltTooltray > .Responsive-inner > .saltToolbarField { + flex-shrink: 0; + flex-grow: 0; +} +.saltTooltray > .Responsive-inner { + align-items: center; + display: flex; + flex: 1; + flex-wrap: nowrap; + gap: 0 !important; + justify-content: inherit; +} +.saltTooltray-horizontal > .Responsive-inner > * { + margin-top: var(--salt-size-unit); + margin-right: var(--salt-size-unit); +} +.saltTooltray-horizontal:not(:first-child) { + margin-left: var(--salt-size-unit); + padding-left: calc(var(--salt-size-unit) * 2); +} +.saltTooltray-horizontal:not(:first-child):before { + content: ""; + position: absolute; + background: var(--salt-separable-primary-borderColor); + top: 8px; + left: 0; + width: 1px; + height: 28px; +} +.saltTooltray > .Responsive-inner > .saltToolbarField { + flex: 0 0 auto; +} +.saltTooltray > .Responsive-inner > *[data-pad-start=true] { + margin-left: auto; +} +.saltTooltray[data-collapsible=dynamic] { + flex-shrink: 0; +} +.saltTooltray[data-collapsible=dynamic] > .Responsive-inner { + flex-wrap: wrap; +} +.saltTooltray[data-collapsing=true] { + flex-shrink: 1; +} +.saltTooltray[data-collapsed=true] { + flex-shrink: 1; +} +.saltTooltray[data-collapsible=dynamic][data-collapsed=true] { + flex-basis: 0; +} + +/* src/tree/Tree.css */ +.saltTree { + --tree-node-collapse: var(--saltTree-node-collapse, var(--list-svg-tree-node-collapse)); + --tree-node-expand: var(--saltTree-node-expand, var(--list-svg-tree-node-expand)); + --tree-node-expanded-transform: var(--saltTree-node-expanded-transform, none); + --tree-node-indent: 0px; + --tree-toggle-width: 12px; + --list-background-highlighted: rgba(1, 1, 1, 0.1); + --list-item-height: 30px; + --list-item-padding: 0 6px; + --list-item-header-background: black; + --list-item-header-color: white; + --list-item-header-fontWeight: bold; + --list-item-header-twisty-color: black; + --list-item-header-twisty-content: ""; + --list-item-header-twisty-top: 50%; + --list-item-header-twisty-left: -18px; + --list-item-header-twisty-right: auto; + --list-item-selected-color: white; + margin: 0; + padding: 0 1px; + font-size: var(--saltTree-fontSize, 14px); + max-height: inherit; + outline: none; + overflow-y: auto; + position: relative; + user-select: none; +} +.saltTree-child-nodes { + width: 100%; +} +.saltTree-scrollingContentContainer { + box-sizing: inherit; + list-style: none; + margin: 0; + position: relative; +} + +/* src/tree/TreeNode.css */ +.saltTreeNode { + --tree-item-text-color: var(--salt-text-primary-foreground); + --tree-item-background: var(--salt-selectable-background); + --tree-item-background-hover: var(--salt-selectable-background-hover); + --tree-node-height: var(--saltTree-node-height, var(--salt-size-stackable)); + --tree-node-icon-size: 12px; + --tree-node-icon-transform: none; + --tree-node-paddingLeft: 6px; + align-items: flex-start; + min-height: var(--tree-node-height, auto); + line-height: var(--salt-text-lineHeight); + list-style: none; + position: relative; + text-align: var(--list-item-textAlign); +} +.saltTreeNode-highlighted { + --tree-item-background: var(--salt-selectable-background-hover); +} +.saltTreeNode-item[aria-selected=true] { + background: var(--salt-selectable-background-selected); + color: var(--salt-text-primary-foreground); + --saltIcon-color: var(--salt-text-primary-foreground); +} +.saltTreeNode[aria-expanded=true] { + --tree-node-icon-transform: rotate(45deg) translate(1px, 1px); +} +.saltTreeNode-item { + align-items: center; + background: var(--tree-item-background); + display: flex; + height: var(--tree-node-height); + padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-node-indent)); + position: relative; +} +.saltTreeNode-toggle { + display: inline-block; + flex: 0 0 18px; + height: var(--tree-node-icon-size); + transform: var(--tree-node-icon-transform); + transition: transform 0.1s ease; +} +.saltTreeNode-label { + align-items: center; + display: inline-flex; + height: var(--tree-node-height); +} +.saltTreeNode-description { + align-items: center; + display: inline-flex; + height: var(--tree-node-height); + padding-left: var(--salt-size-unit); +} +.saltTreeNode[aria-expanded] > .saltTreeNode-label { + --checkbox-borderColor: black; + --checkbox-borderWidth: 1px; + --checkbox-tick: black; + --list-svg-toggle: var(--tree-node-collapse); + color: var(--list-item-text-color); + flex-wrap: nowrap; + line-height: var(--tree-node-height); + padding: var(--list-item-padding); + position: relative; + cursor: default; + margin: 0; + white-space: nowrap; +} +.saltTreeNode:not([aria-expanded]) { + padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent)); +} +.saltTreeNode[aria-expanded] > .saltTreeNode-label { + padding-left: calc(var(--tree-node-paddingLeft) + var(--tree-toggle-width) + var(--tree-node-indent)); +} +.saltTreeNode[aria-expanded] { + flex-direction: column; +} +.saltTreeNode[aria-expanded] { + flex-direction: column; + height: auto; +} +.saltTreeNode > *[role=group] { + padding-left: 0px; +} +[aria-level="2"] { + --tree-node-indent: 24px; +} +[aria-level="3"] { + --tree-node-indent: 36px; +} +[aria-level="4"] { + --tree-node-indent: 48px; +} +.saltTreeNode:not(.focusVisible):not([aria-expanded])[data-highlighted], +.saltTreeNode:not(.focusVisible)[aria-expanded][data-highlighted] > div:first-child { + background: var(--list-background-highlighted); +} +.saltTree-toggle { + cursor: pointer; +} +.saltTreeNode[aria-selected=true] { + --list-item-header-twisty-color: var(--list-item-selected-color); +} +.saltTreeNode:not(.focusVisible):focus { + background: rgba(0, 0, 0, 0.1); +} +.saltTreeNode:not([aria-expanded]).focusVisible:before, +.saltTreeNode[aria-expanded].focusVisible > div:first-child:before { + content: ""; + position: absolute; + top: 0px; + left: var(--tree-offset-left-focusVisible, 0px); + right: 0; + bottom: 0px; + border: dotted rgb(141, 154, 179) 2px; + background: var(--list-background-highlighted); +} +.saltTreeNode[aria-expanded=false] > *:first-child:after { + --list-svg-toggle: var(--tree-node-expand); +} +.saltTreeNode[aria-expanded=true] > *:first-child:after { + transform: var(--tree-node-expanded-transform); +} +.saltTree:not(.checkbox-only) .saltTreeNode:not([aria-expanded])[aria-selected=true], +.saltTree:not(.checkbox-only) .saltTreeNode[aria-expanded][aria-selected=true] > div:first-child { + --checkbox-borderColor: var(--list-item-selected-color); + --checkbox-tick: var(--list-item-selected-color); + --tree-borderColor-focusVisible: var(--list-item-selected-color); + background: var(--list-item-background-active); + color: var(--list-item-selected-color); +} +.with-checkbox .saltTreeNode { + padding-left: 28px; +} +.with-checkbox .saltTreeNode:before { + border-style: solid; + border-width: var(--checkbox-borderWidth); + border-color: var(--checkbox-borderColor); + content: ""; + height: 12px; + left: 3px; + margin-top: -7px; + position: absolute; + top: 50%; + width: 12px; +} + +/* src/window/ElectronWindow.css */ +.saltWindow { + --saltDialog-boxShadow: none; + --saltDialog-margin: 0; + width: max-content; + height: max-content; + position: fixed; + overflow: hidden; +} + +/* src/calendar/internal/CalendarCarousel.css */ +.saltCalendarCarousel-track { + display: grid; + grid-auto-flow: column; +} +.saltCalendarCarousel-track > * { + position: absolute; + left: 0; + width: 100%; +} +.saltCalendarCarousel-track > :nth-child(2) { + position: relative; +} +.saltCalendarCarousel-shouldAnimate { + transition: transform 200ms ease-in-out; +} + +/* src/calendar/internal/CalendarDay.css */ +.saltCalendarDay { + --calendar-day-text-color: var(--salt-text-primary-foreground); + --calendar-day-background: var(--salt-selectable-background); + --calendar-day-background-hover: var(--salt-selectable-background-hover); + --calendar-day-text-color-hover: var(--salt-text-primary-foreground); + --calendar-day-outOfRange-text-color: var(--salt-text-secondary-foreground-disabled); + --calendar-day-blocked-text-color: var(--salt-text-primary-foreground); + --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled); + --calendar-day-blocked-icon-color: var(--salt-status-error-foreground); + --calendar-day-blocked-background: var(--calendar-day-background); + --calendar-day-unselectable-text-color: var(--salt-text-secondary-foreground-disabled); + --calendar-day-unselectable-background: var(--calendar-day-background); + --calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled); + --calendar-day-selected-background: var(--salt-selectable-background-selected); + --calendar-day-selected-text-color: var(--salt-text-primary-foreground); + --calendar-day-selectedStart-background: var(--salt-selectable-background-selected); + --calendar-day-selectedStart-text-color: var(--salt-text-primary-foreground); + --calendar-day-selectedEnd-background: var(--salt-selectable-background-selected); + --calendar-day-selectedEnd-text-color: var(--salt-text-primary-foreground); + --calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected); + --calendar-day-selectedSpan-text-color: var(--salt-text-primary-foreground); + --calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover); + --calendar-day-hoveredSpan-text-color: var(--salt-text-primary-foreground); + --calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover); + --calendar-day-hoveredOffset-text-color: var(--salt-text-primary-foreground); + --calendar-day-currentDay-borderColor: var(--salt-text-primary-foreground); + --calendar-day-focused-outline: var(--salt-focused-outline); + --calendar-day-size: var(--salt-size-base); + --calendar-day-fontSize: var(--salt-text-fontSize); +} +.saltCalendarDay { + width: var(--calendar-day-size); + height: var(--calendar-day-size); + color: var(--calendar-day-text-color); + background-color: var(--calendar-day-background); + font-size: var(--calendar-day-fontSize); + border: 0; + cursor: pointer; + position: relative; + display: flex; + justify-content: center; + align-items: center; +} +.saltCalendarDay:focus-visible { + outline: var(--calendar-day-focused-outline); + outline-offset: calc(0px - var(--salt-focused-outlineWidth)); +} +.saltCalendarDay-outOfRange { + color: var(--calendar-day-outOfRange-text-color); +} +.saltCalendarDay:hover { + background: var(--calendar-day-background-hover); + color: var(--calendar-day-text-color-hover); +} +.saltCalendarDay-unselectableMedium, +.saltCalendarDay-unselectableMedium:hover { + color: var(--calendar-day-blocked-text-color); + cursor: var(--calendar-day-blocked-cursor); + background: var(--calendar-day-blocked-background); +} +.saltCalendarDay-today { + border: 1px solid var(--calendar-day-currentDay-borderColor); +} +.saltCalendarDay-selectedSpan { + background: var(--calendar-day-selectedSpan-background); + color: var(--calendar-day-selectedSpan-text-color); +} +.saltCalendarDay-hoveredSpan, +.saltCalendarDay-hoveredSpan:hover { + background: var(--calendar-day-hoveredSpan-background); + color: var(--calendar-day-hoveredSpan-text-color); +} +.saltCalendarDay-hoveredOffset, +.saltCalendarDay-hoveredOffset:hover { + background: var(--calendar-day-hoveredOffset-background); + color: var(--calendar-day-hoveredOffset-text-color); +} +.saltCalendarDay-selected, +.saltCalendarDay-selected:hover { + background: var(--calendar-day-selected-background); + color: var(--calendar-day-selected-text-color); +} +.saltCalendarDay-selectedStart, +.saltCalendarDay-selectedStart:hover { + background: var(--calendar-day-selectedStart-background); + color: var(--calendar-day-selectedStart-text-color); +} +.saltCalendarDay-selectedEnd, +.saltCalendarDay-selectedEnd:hover { + background: var(--calendar-day-selectedEnd-background); + color: var(--calendar-day-selectedEnd-text-color); +} +.saltCalendarDay-selected:focus-visible { + outline-color: var(--calendar-day-selected-focused-outlineColor); +} +.saltCalendarDay-selectedStart:focus-visible { + outline-color: var(--calendar-day-selectedStart-focused-outlineColor); +} +.saltCalendarDay-selectedEnd:focus-visible { + outline-color: var(--calendar-day-selectedEnd-focused-outlineColor); +} +.saltCalendarDay-unselectableLow, +.saltCalendarDay-unselectableLow:hover { + color: var(--calendar-day-unselectable-text-color); + background: var(--calendar-day-unselectable-background); + cursor: var(--calendar-day-unselectable-cursor); + text-decoration: line-through; +} +.salt-density-high { + --calendar-day-blocked-icon-size: 14px; +} +.salt-density-medium { + --calendar-day-blocked-icon-size: 18px; +} +.salt-density-low { + --calendar-day-blocked-icon-size: 24px; +} +.salt-density-touch { + --calendar-day-blocked-icon-size: 28px; +} +.saltCalendarDay-blockedIcon { + fill: var(--calendar-day-blocked-icon-color); + position: absolute; + --icon-size: var(--calendar-day-blocked-icon-size); + pointer-events: none; + line-height: 1.29; +} +.saltCalendarDay-hidden { + visibility: hidden; +} + +/* src/calendar/internal/CalendarMonth.css */ +.saltCalendarMonth-dateGrid { + display: grid; + grid-template-columns: repeat(7, 1fr); + text-align: center; +} + +/* src/calendar/internal/CalendarNavigation.css */ +.salt-density-medium, +.salt-density-touch, +.salt-density-low { + --calendar-navigation-gap: calc(var(--salt-size-unit) * 0.5); +} +.salt-density-high { + --calendar-navigation-gap: 0px; +} +.saltCalendarNavigation-hideYearDropdown { + --calendar-navigation-gap: calc(var(--salt-size-unit) * 2); +} +.saltCalendarNavigation { + display: grid; + grid-template-columns: min-content auto auto min-content; + grid-gap: var(--calendar-navigation-gap); +} +.saltCalendarNavigation-hideYearDropdown { + grid-template-columns: min-content auto min-content; +} + +/* src/calendar/internal/CalendarWeekHeader.css */ +.saltCalendarWeekHeader { + --calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor); + --calendar-week-header-text-color: var(--salt-text-secondary-foreground); + --calendar-week-header-size: var(--salt-size-base); + --calendar-week-header-fontSize: var(--saltCalendar-week-header-fontSize, var(--salt-text-label-fontSize)); +} +.saltCalendarWeekHeader { + display: grid; + grid-template-columns: repeat(7, 1fr); + text-align: center; + box-shadow: inset 0 -1px 0 var(--calendar-week-header-underline-color); +} +.saltCalendarWeekHeader-dayOfWeek { + width: var(--calendar-week-header-size); + height: var(--calendar-week-header-size); + color: var(--calendar-week-header-text-color); + line-height: var(--calendar-week-header-size); + font-size: var(--calendar-week-header-fontSize); +} + +/* src/list-deprecated/internal/Highlighter.css */ +.saltHighlighter-highlight { + font-weight: 700; +} + +/* src/pill/internal/PillCheckbox.css */ +.saltPill-checkbox { + height: var(--pill-checkbox-size); + margin-left: 1px; + padding-right: 0; + width: var(--pill-checkbox-size); + --saltCheckbox-icon-stroke: var(--salt-selectable-borderColor); + --saltCheckbox-icon-stroke-hover: var(--salt-selectable-borderColor); + --saltCheckbox-icon-fill: none; + --saltCheckbox-icon-fill-checked: none; + --saltCheckbox-icon-borderWidth-checked: var(--salt-size-border); + --saltCheckbox-icon-tick-color: var(--salt-taggable-foreground); +} + +/* src/progress/CircularProgress/CircularProgress.css */ +.saltCircularProgress { + color: var(--salt-text-primary-foreground); + display: inline-flex; + position: relative; +} +.saltCircularProgress-progressValue { + align-items: center; + color: var(--salt-text-primary-foreground); + display: flex; + font-family: var(--salt-text-fontFamily); + font-size: var(--salt-text-label-fontSize); + font-weight: var(--salt-text-label-fontWeight-strong); + height: 100%; + justify-content: center; + left: 0; + position: absolute; + width: 100%; +} +.saltCircularProgress-track { + inline-size: calc(var(--salt-size-base) * 3); + block-size: calc(var(--salt-size-base) * 3); + border-style: var(--salt-track-borderStyle); + border-width: var(--salt-size-bar-small); + border-radius: calc(var(--salt-size-base) * 3); + border-color: var(--salt-palette-neutral-secondary-border); +} +.saltCircularProgress-bar { + inline-size: calc(var(--salt-size-base) * 3); + block-size: calc(var(--salt-size-base) * 3); + border-style: var(--salt-track-borderStyle); + border-width: var(--salt-size-bar-strong); + border-radius: calc(var(--salt-size-base) * 3); + border-color: var(--salt-accent-background); +} +.saltCircularProgress-bars { + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + inline-size: 100%; + block-size: 100%; +} +.saltCircularProgress-barOverlayRight, +.saltCircularProgress-barOverlayLeft { + inline-size: 50%; + block-size: 100%; + transform-origin: 100% center; + transform: rotate(180deg); + overflow: hidden; + position: absolute; +} +.saltCircularProgress-barSubOverlayRight, +.saltCircularProgress-barSubOverlayLeft { + inline-size: 100%; + block-size: 100%; + transform-origin: 100% center; + overflow: hidden; + transform: rotate(-180deg); +} +.saltCircularProgress-barOverlayLeft { + transform: rotate(0deg); +} + +/* src/progress/LinearProgress/LinearProgress.css */ +.saltLinearProgress { + align-items: center; + color: var(--salt-text-primary-foreground); + display: flex; + min-width: 400px; + font-size: var(--linearProgress-fontSize); +} +.saltLinearProgress-barContainer { + background: none; + position: relative; + width: 100%; + overflow: hidden; + height: var(--salt-size-bar-strong); +} +.saltLinearProgress-bar { + width: 100%; + position: absolute; + left: 0; + bottom: 0; + top: 0; + transition: transform 0.2s linear; + transform-origin: left; + background: var(--salt-accent-background); + z-index: 2; +} +.saltLinearProgress-track { + background: var(--salt-palette-neutral-secondary-border); + width: 100%; + height: var(--salt-size-bar-small); + position: absolute; + top: calc((var(--salt-size-bar-strong) - var(--salt-size-bar-small)) / 2); + transition: transform 0.2s linear; + transform-origin: left; +} +.saltLinearProgress-progressValue { + color: inherit; + font-family: var(--salt-text-fontFamily); + font-size: var(--salt-text-label-fontSize); + font-weight: var(--salt-text-label-fontWeight-strong); + margin: 0; + white-space: nowrap; + padding-left: var(--salt-spacing-100); +} + +/* src/stepped-tracker/StepLabel/StepLabel.css */ +.saltStepLabel { + width: 100%; + text-align: center; +} + +/* src/stepped-tracker/TrackerConnector/TrackerConnector.css */ +.saltTrackerConnector { + --trackerConnector-style-default: var(--saltTrackerConnector-style-default, var(--salt-track-borderStyle-incomplete)); + --trackerConnector-style-active: var(--saltTrackerConnector-style-active, var(--salt-track-borderStyle-active)); + --trackerConnector-color: var(--saltTrackerConnector-color, var(--salt-track-borderColor)); + --trackerConnector-thickness: var(--saltTrackerConnector-thickness, var(--salt-track-borderWidth)); + --trackerConnector-margin: var(--saltTrackerConnector-margin, var(--salt-spacing-100)); +} +.saltTrackerConnector { + height: 0; + border-top-width: var(--trackerConnector-thickness); + border-top-style: var(--trackerConnector-style-default); + border-top-color: var(--trackerConnector-color); + position: absolute; + width: calc(100% - (var(--saltIcon-size)) - (var(--trackerConnector-margin) * 2)); + left: calc(50% + (var(--saltIcon-size) / 2) + var(--trackerConnector-margin)); + top: calc(var(--saltIcon-size) / 2 - (var(--trackerConnector-thickness) / 2)); +} +.saltTrackerConnector.saltTrackerConnector-active { + border-top-style: var(--trackerConnector-style-active); +} + +/* src/stepped-tracker/TrackerStep/TrackerStep.css */ +.saltTrackerStep { + --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground)); + --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground)); + --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground)); + --saltIcon-color: var(--trackerStep-icon-color); + --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-icon-size-base), 12px)); +} +.saltTrackerStep { + margin: 0; + padding: 0; + text-indent: 0; + list-style-type: none; + flex: 1; + position: relative; + display: flex; + align-items: center; + flex-direction: column; + width: var(--saltTrackerStep-width, 100%); + gap: var(--salt-spacing-50); + color: var(--salt-text-primary-foreground); + font-size: var(--salt-text-label-fontSize); + line-height: var(--salt-text-label-lineHeight); + padding: 0 var(--salt-spacing-25); +} +.saltTrackerStep:focus-visible { + outline-style: var(--salt-focused-outlineStyle); + outline-width: var(--salt-focused-outlineWidth); + outline-color: var(--salt-focused-outlineColor); + outline-offset: var(--salt-focused-outlineOffset); +} +.saltTrackerStep .saltTrackerStep-body { + width: 100%; + display: flex; + align-items: center; + flex-direction: column; +} +.saltTrackerStep.saltTrackerStep-active { + --trackerStep-icon-color: var(--trackerStep-icon-color-active); +} +.saltTrackerStep.saltTrackerStep-completed { + --trackerStep-icon-color: var(--trackerStep-icon-color-completed); +} + +/* src/tabs/drag-drop/Draggable.css */ +.saltDraggable { + background: transparent; + box-shadow: var(--salt-overlayable-shadow-drag); + cursor: var(--salt-draggable-grab-cursor-active); + position: absolute; +} +.saltDraggable-spacer { + display: inline-block; + height: var(--tabs-tabstrip-height); + transition: width 0.4s ease; + width: 0; +} + +/* src/tabs/drag-drop/DropIndicator.css */ +.saltDropIndicator { + background: var(--salt-accent-background); + cursor: move; + position: absolute; + transform: translate(-4px, 0); +} + +/* src/tokenized-input/internal/InputRuler.css */ +.saltInputRuler { + position: absolute; + left: 0; + white-space: nowrap; + visibility: hidden; + overflow: hidden; + max-width: 100%; +} + +/* src/toolbar/overflow-panel/OverflowPanel.css */ +.saltOverflowPanel.saltDropdown-popup { + background: var(--salt-container-primary-background); + border: solid 1px var(--salt-selectable-borderColor-hover); + box-shadow: var(--salt-overlayable-shadow-popout); +} +.saltOverflowPanel-content { + --saltButton-justifyContent: flex-start; + --saltDropdown-popup-maxHeight: auto; + align-items: stretch; + color: var(--salt-text-primary-foreground); + border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor); + display: flex; + flex-direction: column; + padding: calc(var(--salt-size-unit) * 1.5) 0; + outline: none; +} +.saltOverflowPanel [aria-expanded=true] { + --saltButton-background: var(--salt-actionable-secondary-background-active); + --saltButton-background-hover: var(--salt-actionable-secondary-background-active); + --saltIcon-color: var(--salt-actionable-secondary-foreground-active); +} +.saltOverflowPanel.saltDropdown { + --saltIcon-margin: 2px 0 0 0px; +} +.saltOverflowPanel.saltDropdown-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) { + --saltFormFieldLegacy-margin: 0 12px 8px 12px; +} + +/* src/toolbar/overflow-panel/OverflowSeparator.css */ +.saltOverflowSeparator { + background: var(--salt-separable-tertiary-borderColor); + height: var(--salt-size-border); + margin: calc(var(--salt-size-unit) / 2) 0; +} + +/* src/59615056-3be8-4027-8e08-41bcd960f6d5.css */ diff --git a/docs/decorators/withTheme.tsx b/docs/decorators/withTheme.tsx index 6167d7f10dd..fb6b411c809 100644 --- a/docs/decorators/withTheme.tsx +++ b/docs/decorators/withTheme.tsx @@ -64,7 +64,7 @@ function SetBackground({ viewMode, id }: { viewMode: string; id: string }) { } export const withTheme: Decorator = (StoryFn, context) => { - const { density, mode } = context.globals; + const { density, mode, styleInjection } = context.globals; if (mode === "side-by-side" || mode === "stacked") { const isStacked = mode === "stacked"; @@ -88,7 +88,8 @@ export const withTheme: Decorator = (StoryFn, context) => { applyClassesTo={"child"} density={density} mode={mode} - key={mode} + key={`${mode}-${styleInjection}`} + enableStyleInjection={styleInjection === "enable"} > @@ -100,7 +101,12 @@ export const withTheme: Decorator = (StoryFn, context) => { } return ( - + diff --git a/package.json b/package.json index d5a4f68d304..929b3ad1179 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,7 @@ }, "scripts": { "start": "yarn storybook", - "build": "yarn build:core && yarn build:lab && yarn build:icons && yarn build:countries && yarn build:theme && yarn build:data-grid && yarn build:ag-grid-theme && yarn build:window && yarn build:styles", + "build": "yarn build:core && yarn build:lab && yarn build:icons && yarn build:countries && yarn build:theme && yarn build:data-grid && yarn build:ag-grid-theme && yarn build:window && yarn build:styles && yarn bundle:css", "build:core": "modular build @salt-ds/core", "build:icons": "modular build @salt-ds/icons", "build:countries": "modular build @salt-ds/countries", @@ -26,6 +26,10 @@ "build:window": "modular build @salt-ds/window", "build:styles": "modular build @salt-ds/styles", "build:ag-grid-theme": "yarn workspace @salt-ds/ag-grid-theme build", + "bundle:css": "yarn bundle:core:css && yarn bundle:lab:css && yarn copy:icon:css", + "bundle:core:css": "yarn workspace @salt-ds/core bundle:css", + "bundle:lab:css": "yarn workspace @salt-ds/lab bundle:css", + "copy:icon:css": "yarn workspace @salt-ds/icons copy:css", "test": "vitest", "test:components": "cypress run --component --browser chrome --headless", "test:components:local": "cypress open --component --browser electron", diff --git a/packages/core/package.json b/packages/core/package.json index 744bad6514a..61d06e60f03 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -27,5 +27,11 @@ "publishConfig": { "directory": "../../dist/salt-ds-core", "provenance": true - } + }, + "scripts": { + "bundle:css": "yarn node ./scripts/build.mjs" + }, + "files": [ + "css" + ] } diff --git a/packages/core/scripts/build.mjs b/packages/core/scripts/build.mjs new file mode 100644 index 00000000000..4c145c9c7a7 --- /dev/null +++ b/packages/core/scripts/build.mjs @@ -0,0 +1,68 @@ +import esbuild from "esbuild"; +import path, { dirname } from "node:path"; +import fs from "node:fs"; +import { deleteSync } from "del"; +import { fileURLToPath } from "node:url"; +import glob from "fast-glob"; +import crypto from "node:crypto"; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const buildFolder = path.join(__dirname, "../../../dist/salt-ds-core/css"); +const absWorkingDir = path.resolve(__dirname, ".."); +const outfileName = "salt-core.css"; +const entryFile = `src/${crypto.randomUUID()}.css`; + +/** MAIN */ +deleteSync([buildFolder], { force: true }); +createCssEntryFile(runBuild); + +function createCssEntryFile(callback) { + const cssFiles = glob.sync(["src/**/*.css"]); + console.log(`Merging ${cssFiles.length} into entry file ${entryFile}`); + + const entry = fs.createWriteStream(entryFile, { + flags: "as", // preserve existing file data and create if doesn't exist + }); + + const writeLine = (line, index) => + index == 0 ? entry.write(line) : entry.write(`\n${line}`); + + cssFiles.forEach((cssFile, index) => { + writeLine( + `@import "${path.relative(path.dirname(entryFile), cssFile)}";`, + index + ); + }); + + entry.close(() => { + console.log("closed filestream"); + callback(); + }); +} + +function runBuild() { + esbuild + .build({ + absWorkingDir, + entryPoints: [entryFile], + outfile: path.join(buildFolder, outfileName), + loader: { + ".ttf": "file", + }, + write: true, + bundle: true, + logLevel: "info", + }) + .then(() => { + // copy built file to storybook dir + const cssFolder = path.join(__dirname, "../../../docs/css"); + fs.mkdirSync(cssFolder, { recursive: true }); + fs.copyFileSync( + path.join(buildFolder, outfileName), + path.join(cssFolder, outfileName) + ); + + //delete generated entry file + deleteSync([entryFile], { force: true }); + }); +} diff --git a/packages/core/src/salt-provider/SaltProvider.tsx b/packages/core/src/salt-provider/SaltProvider.tsx index 5df217bb46b..6e1f4d21451 100644 --- a/packages/core/src/salt-provider/SaltProvider.tsx +++ b/packages/core/src/salt-provider/SaltProvider.tsx @@ -15,7 +15,10 @@ import { useIsomorphicLayoutEffect } from "../utils"; import saltProviderCss from "./SaltProvider.css"; import { useWindow } from "@salt-ds/window"; -import { useComponentCssInjection } from "@salt-ds/styles"; +import { + useComponentCssInjection, + StyleInjectionProvider, +} from "@salt-ds/styles"; export const DEFAULT_DENSITY = "medium"; @@ -94,6 +97,7 @@ type SaltProviderBaseProps = { theme?: ThemeName; mode?: Mode; breakpoints?: Breakpoints; + enableStyleInjection?: boolean; }; interface SaltProviderThatAppliesClassesToChild extends SaltProviderBaseProps { @@ -115,7 +119,7 @@ type SaltProviderProps = | SaltProviderThatInjectsThemeElement | SaltProviderThatClassesToRoot; -export function SaltProvider({ +function InternalSaltProvider({ applyClassesTo: applyClassesToProp, children, density: densityProp, @@ -204,6 +208,17 @@ export function SaltProvider({ } } +export function SaltProvider({ + enableStyleInjection = true, + ...restProps +}: SaltProviderProps) { + return ( + + + + ); +} + export const useTheme = (): ThemeContextProps => { return useContext(ThemeContext); }; diff --git a/packages/core/src/switch/Switch.css b/packages/core/src/switch/Switch.css index 965be9c09e5..5b336949e5d 100644 --- a/packages/core/src/switch/Switch.css +++ b/packages/core/src/switch/Switch.css @@ -67,12 +67,12 @@ background: currentColor; margin: var(--salt-spacing-25); border: var(--salt-size-border) var(--salt-selectable-borderStyle) var(--salt-selectable-borderColor); - transition: transform var(--salt-duration-perceptible) ease-in-out; } .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb, .saltSwitch:hover .saltSwitch-thumb { border-color: var(--salt-selectable-borderColor-hover); + transition: transform var(--salt-duration-perceptible) ease-in-out; } .saltSwitch-checked .saltSwitch-thumb, @@ -102,7 +102,8 @@ } @media (prefers-reduced-motion) { - .saltSwitch-thumb { + .saltSwitch-input:focus-visible + .saltSwitch-track .saltSwitch-thumb, + .saltSwitch:hover .saltSwitch-thumb { transition: none; } } diff --git a/packages/core/stories/accordion/accordion.qa.stories.tsx b/packages/core/stories/accordion/accordion.qa.stories.tsx index b5465566c61..9bd6c8aecc3 100644 --- a/packages/core/stories/accordion/accordion.qa.stories.tsx +++ b/packages/core/stories/accordion/accordion.qa.stories.tsx @@ -9,120 +9,141 @@ import { Input, } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerProps, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, +} from "docs/components"; export default { title: "Core/Accordion/Accordion QA", component: Accordion, } as Meta; +const UI = () => ( + + + Accordion label + + + This is content inside of an Accordion. + + Disclosure ID + + + + Email + + + + Justification + + + + + + + Accordion label + + + This is content inside of an Accordion. + + Disclosure ID + + + + Email + + + + Justification + + + + + + + Accordion label + + + This is content inside of an Accordion. + + Disclosure ID + + + + Email + + + + Justification + + + + + + + Accordion label + + + This is content inside of an Accordion. + + Disclosure ID + + + + Email + + + + Justification + + + + + + + Accordion label + + + This is content inside of an Accordion. + + Disclosure ID + + + + Email + + + + Justification + + + + + + +); + export const AllVariantsGrid: StoryFn = (props) => ( - - - Accordion label - - - This is content inside of an Accordion. - - Disclosure ID - - - - Email - - - - Justification - - - - - - - Accordion label - - - This is content inside of an Accordion. - - Disclosure ID - - - - Email - - - - Justification - - - - - - - Accordion label - - - This is content inside of an Accordion. - - Disclosure ID - - - - Email - - - - Justification - - - - - - - Accordion label - - - This is content inside of an Accordion. - - Disclosure ID - - - - Email - - - - Justification - - - - - - - Accordion label - - - This is content inside of an Accordion. - - Disclosure ID - - - - Email - - - - Justification - - - - - - + ); AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/avatar/avatar.qa.stories.tsx b/packages/core/stories/avatar/avatar.qa.stories.tsx index c09d975450c..3b9aea19955 100644 --- a/packages/core/stories/avatar/avatar.qa.stories.tsx +++ b/packages/core/stories/avatar/avatar.qa.stories.tsx @@ -1,6 +1,11 @@ import { Avatar } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; import persona1 from "../assets/avatar.png"; export default { @@ -19,3 +24,17 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/banner/banner.qa.stories.tsx b/packages/core/stories/banner/banner.qa.stories.tsx index 095bb3f86dc..e0287f512b5 100644 --- a/packages/core/stories/banner/banner.qa.stories.tsx +++ b/packages/core/stories/banner/banner.qa.stories.tsx @@ -11,6 +11,11 @@ import { } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; import { CloseIcon } from "@salt-ds/icons"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, +} from "docs/components"; export default { title: "Core/Banner/Banner QA", @@ -37,31 +42,36 @@ const ErrorBanner = () => ; const WarningBanner = () => ; const SuccessBanner = () => ; -export const ExamplesGrid: StoryFn = () => ( - - -
- -
- - -
- -
- - -
- -
- - -
- -
- - +export const ExamplesGrid: StoryFn = (props) => ( + + + + + + ); ExamplesGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/button/button.qa.stories.tsx b/packages/core/stories/button/button.qa.stories.tsx index ab340c4dd08..529739badc5 100644 --- a/packages/core/stories/button/button.qa.stories.tsx +++ b/packages/core/stories/button/button.qa.stories.tsx @@ -1,7 +1,12 @@ import { Button } from "@salt-ds/core"; import { SearchIcon } from "@salt-ds/icons"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerProps, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, +} from "docs/components"; export default { title: "Core/Button/Button QA", @@ -41,3 +46,35 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + + + + + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/card/card.qa.stories.tsx b/packages/core/stories/card/card.qa.stories.tsx index 82a0fdf0dc6..203a2ff4754 100644 --- a/packages/core/stories/card/card.qa.stories.tsx +++ b/packages/core/stories/card/card.qa.stories.tsx @@ -1,6 +1,11 @@ import { Card, H1, InteractableCard, Text } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Card/Card QA", @@ -34,3 +39,30 @@ export const AllExamplesUsingText: StoryFn< AllExamplesUsingText.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + +

Card with density

+ Content + + +

Secondary card with density

+ Content + + +

Interactable card with density

+ Content + + +

Secondary interactable with density

+ Content + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/checkbox/checkbox.qa.stories.tsx b/packages/core/stories/checkbox/checkbox.qa.stories.tsx index 5b0bb476fba..724826bfd86 100644 --- a/packages/core/stories/checkbox/checkbox.qa.stories.tsx +++ b/packages/core/stories/checkbox/checkbox.qa.stories.tsx @@ -7,7 +7,12 @@ import { FormFieldLabel, FormFieldHelperText, } from "@salt-ds/core"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Checkbox/Checkbox QA", @@ -74,3 +79,17 @@ export const AllExamplesGrid: StoryFn = (props) => { AllExamplesGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/form-field/form-field.qa.stories.tsx b/packages/core/stories/form-field/form-field.qa.stories.tsx index 496520ca690..6e46707708b 100644 --- a/packages/core/stories/form-field/form-field.qa.stories.tsx +++ b/packages/core/stories/form-field/form-field.qa.stories.tsx @@ -1,6 +1,11 @@ import { FormField, FormFieldLabel, FormFieldHelperText } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Form Field/Form Field QA", @@ -23,3 +28,22 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + Form Field label + Helper text + + + Form Field label + Helper text + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/input/input.qa.stories.tsx b/packages/core/stories/input/input.qa.stories.tsx index a970e6dc02d..58743b9f113 100644 --- a/packages/core/stories/input/input.qa.stories.tsx +++ b/packages/core/stories/input/input.qa.stories.tsx @@ -1,6 +1,11 @@ import { Button, Input, Text } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; import { CloseIcon, CreditCardIcon, @@ -89,3 +94,87 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + + } + endAdornment={ + <> + % + + + } + defaultValue={"Static adornments"} + /> + + + + } + endAdornment={ + + } + defaultValue={"Button adornments"} + /> + + + + + + } + endAdornment={ + <> + % + + + } + defaultValue={"Static adornments"} + /> + + + + } + endAdornment={ + + } + defaultValue={"Button adornments"} + /> + + + + + + } + endAdornment={} + defaultValue={"Error with adornments"} + validationStatus="error" + /> + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/link/link.qa.stories.tsx b/packages/core/stories/link/link.qa.stories.tsx index 3e62b43720b..8438b2898a2 100644 --- a/packages/core/stories/link/link.qa.stories.tsx +++ b/packages/core/stories/link/link.qa.stories.tsx @@ -1,6 +1,11 @@ import { Link } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Link/Link QA", @@ -35,3 +40,34 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + Link + + Link target blank + +
+ + Strong and small truncation example + +
+ + Secondary Link + + + Secondary Link target blank + +
+ + Strong and small truncation example + +
+ +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/multiline-input/multiline-input.qa.stories.tsx b/packages/core/stories/multiline-input/multiline-input.qa.stories.tsx index 565468bed24..ea269b41e15 100644 --- a/packages/core/stories/multiline-input/multiline-input.qa.stories.tsx +++ b/packages/core/stories/multiline-input/multiline-input.qa.stories.tsx @@ -7,7 +7,12 @@ import { SendIcon, } from "@salt-ds/icons"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Multiline Input/MultilineInput QA", @@ -138,3 +143,135 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + + £} + endAdornment={ + <> + GBP + + + + } + /> + + + + + + + + + £} + endAdornment={ + <> + GBP + + + + } + /> + + + + + } + endAdornment={} + validationStatus="success" + defaultValue="Success" + /> + } + endAdornment={ + <> + % + + + } + validationStatus="error" + defaultValue="Error" + /> + + + } + endAdornment={} + validationStatus="success" + defaultValue="Success bordered" + bordered + /> + } + endAdornment={ + <> + % + + + } + validationStatus="error" + defaultValue="Error bordered" + bordered + /> + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/panel/panel.qa.stories.tsx b/packages/core/stories/panel/panel.qa.stories.tsx index b3ddcdd4a46..26dec7381a5 100644 --- a/packages/core/stories/panel/panel.qa.stories.tsx +++ b/packages/core/stories/panel/panel.qa.stories.tsx @@ -1,6 +1,11 @@ import { Meta, StoryFn } from "@storybook/react"; import { Panel } from "@salt-ds/core"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Panel/Panel QA", @@ -18,3 +23,23 @@ export const ExamplesGrid: StoryFn = (props) => ( ExamplesGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + +

This is a panel around some text

+ + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/radio-button/radio-button.qa.stories.tsx b/packages/core/stories/radio-button/radio-button.qa.stories.tsx index 73cfade3c39..dbc2452d0f3 100644 --- a/packages/core/stories/radio-button/radio-button.qa.stories.tsx +++ b/packages/core/stories/radio-button/radio-button.qa.stories.tsx @@ -6,7 +6,12 @@ import { RadioButtonGroupProps, } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Radio Button/Radio Button QA", @@ -68,3 +73,16 @@ export const AllExamplesGrid: StoryFn = (props) => { AllExamplesGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/spinner/spinner.qa.stories.tsx b/packages/core/stories/spinner/spinner.qa.stories.tsx index d21de1970e9..5da9db4b60e 100644 --- a/packages/core/stories/spinner/spinner.qa.stories.tsx +++ b/packages/core/stories/spinner/spinner.qa.stories.tsx @@ -1,6 +1,11 @@ import { Spinner } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; import "./spinner.qa.stories.css"; export default { @@ -20,3 +25,18 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/status-indicator/status-indicator.qa.stories.tsx b/packages/core/stories/status-indicator/status-indicator.qa.stories.tsx index 91faf852cf3..0cb5f5e822e 100644 --- a/packages/core/stories/status-indicator/status-indicator.qa.stories.tsx +++ b/packages/core/stories/status-indicator/status-indicator.qa.stories.tsx @@ -1,6 +1,11 @@ import { StatusIndicator } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Status Indicator/Status Indicator QA", @@ -24,3 +29,23 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + + + + + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/switch/switch.qa.stories.tsx b/packages/core/stories/switch/switch.qa.stories.tsx index bef371786a7..32233ef8c23 100644 --- a/packages/core/stories/switch/switch.qa.stories.tsx +++ b/packages/core/stories/switch/switch.qa.stories.tsx @@ -1,6 +1,11 @@ import { Switch } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Switch/Switch QA", @@ -29,3 +34,18 @@ export const AllExamplesGrid: StoryFn< AllExamplesGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn< + QAContainerNoStyleInjectionProps +> = ({ className, ...restProps }) => ( + + + + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx index 04cfd995a69..cb49d341621 100644 --- a/packages/core/stories/text/text.qa.stories.tsx +++ b/packages/core/stories/text/text.qa.stories.tsx @@ -10,7 +10,12 @@ import { Text, } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Text/Text QA", @@ -62,3 +67,51 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + Primary strong and small text + + + Primary disabled strong and small text + + + + Secondary strong and small text + + + Secondary disabled strong and small text + + + Display 1 strong and small text + + + Display 2 strong and small text + + + Display 3 strong and small text + +

+ H1 strong and small text +

+

+ H2 strong and small text +

+

+ H3 strong and small text +

+

+ H4 strong and small text +

+ + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/toast/toast.qa.stories.tsx b/packages/core/stories/toast/toast.qa.stories.tsx index 6cf68152d17..5f4715675e7 100644 --- a/packages/core/stories/toast/toast.qa.stories.tsx +++ b/packages/core/stories/toast/toast.qa.stories.tsx @@ -1,6 +1,11 @@ import { Meta, StoryFn } from "@storybook/react"; import { Button, StackLayout, Toast, ToastContent } from "@salt-ds/core"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; import { CloseIcon } from "@salt-ds/icons"; export default { @@ -8,37 +13,59 @@ export default { component: Toast, } as Meta; +const UI = () => ( + + + This is a toast + + + + This is a toast + + + + This is a toast + + + + This is a toast + + + +); + export const ExamplesGrid: StoryFn = (props) => ( - - - This is a toast - - - - This is a toast - - - - This is a toast - - - - This is a toast - - - + ); ExamplesGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/toggle-button-group/toggle-button-group.qa.stories.tsx b/packages/core/stories/toggle-button-group/toggle-button-group.qa.stories.tsx index 9fbe905463a..a23b20969a8 100644 --- a/packages/core/stories/toggle-button-group/toggle-button-group.qa.stories.tsx +++ b/packages/core/stories/toggle-button-group/toggle-button-group.qa.stories.tsx @@ -1,7 +1,12 @@ import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core"; import { AppSwitcherIcon, FolderClosedIcon, VisibleIcon } from "@salt-ds/icons"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; export default { title: "Core/Toggle Button Group/ToggleButton Group QA", @@ -44,3 +49,48 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + All + + + + Active + + + + Archived + + + + + + All + + + + Active + + + + Archived + + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/toggle-button/toggle-button.qa.stories.tsx b/packages/core/stories/toggle-button/toggle-button.qa.stories.tsx index 3cef8579cbc..b915d106529 100644 --- a/packages/core/stories/toggle-button/toggle-button.qa.stories.tsx +++ b/packages/core/stories/toggle-button/toggle-button.qa.stories.tsx @@ -1,6 +1,11 @@ import { ToggleButton } from "@salt-ds/core"; import { Meta, StoryFn } from "@storybook/react"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; import { FavoriteSolidIcon, HomeIcon } from "@salt-ds/icons"; export default { @@ -32,3 +37,30 @@ export const AllVariantsGrid: StoryFn = (props) => ( AllVariantsGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + + AND + + Home + + + + + + AND + + + Home + + +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/core/stories/tooltip/tooltip.qa.stories.tsx b/packages/core/stories/tooltip/tooltip.qa.stories.tsx index e4dd25d903d..9b1e97dfe46 100644 --- a/packages/core/stories/tooltip/tooltip.qa.stories.tsx +++ b/packages/core/stories/tooltip/tooltip.qa.stories.tsx @@ -1,5 +1,10 @@ import { Tooltip, TooltipProps } from "@salt-ds/core"; -import { QAContainer, QAContainerProps } from "docs/components"; +import { + QAContainer, + QAContainerNoStyleInjection, + QAContainerNoStyleInjectionProps, + QAContainerProps, +} from "docs/components"; import { Meta, StoryFn } from "@storybook/react"; import { InfoSolidIcon } from "@salt-ds/icons"; @@ -54,3 +59,34 @@ export const AllExamplesGrid: StoryFn = (props) => { AllExamplesGrid.parameters = { chromatic: { disableSnapshot: false }, }; + +export const NoStyleInjectionGrid: StoryFn = ( + props +) => ( + + + + } + /> +
+ +
+ +); + +NoStyleInjectionGrid.parameters = { + chromatic: { disableSnapshot: false }, +}; diff --git a/packages/icons/package.json b/packages/icons/package.json index 2791eea25e5..0d9f1294690 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -12,6 +12,7 @@ "sideEffects": false, "scripts": { "build": "yarn clean && yarn node ./scripts/generateIcons.mjs '*.svg'", + "copy:css": "yarn node ./scripts/copyCss.mjs", "clean": "rimraf ./src/components" }, "dependencies": { @@ -36,5 +37,8 @@ "publishConfig": { "directory": "../../dist/salt-ds-icons", "provenance": true - } + }, + "files": [ + "css" + ] } diff --git a/packages/icons/scripts/copyCss.mjs b/packages/icons/scripts/copyCss.mjs new file mode 100644 index 00000000000..eb518dc080c --- /dev/null +++ b/packages/icons/scripts/copyCss.mjs @@ -0,0 +1,19 @@ +import { copyFile, mkdir } from "node:fs/promises"; +import path from "node:path"; +import { fileURLToPath } from "node:url"; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const srcFolder = path.join(__dirname, "../src"); +const buildFolder = path.join(__dirname, "../../../dist/salt-ds-icons"); +const cssFolder = path.join(buildFolder, "/css"); + +try { + await mkdir(cssFolder, { recursive: true }); + await copyFile( + path.join(srcFolder, "/icon/Icon.css"), + path.join(cssFolder, "/salt-icon.css") + ); + console.log(`Icon.css copied to: ${cssFolder} `); +} catch (err) { + console.error(err.message); +} diff --git a/packages/lab/package.json b/packages/lab/package.json index 837406f10db..7bcd97ebe87 100644 --- a/packages/lab/package.json +++ b/packages/lab/package.json @@ -40,5 +40,11 @@ "publishConfig": { "directory": "../../dist/salt-ds-lab", "provenance": true - } + }, + "scripts": { + "bundle:css": "yarn node ./scripts/build.mjs" + }, + "files": [ + "css" + ] } diff --git a/packages/lab/scripts/build.mjs b/packages/lab/scripts/build.mjs new file mode 100644 index 00000000000..92f19a443b4 --- /dev/null +++ b/packages/lab/scripts/build.mjs @@ -0,0 +1,68 @@ +import esbuild from "esbuild"; +import path from "node:path"; +import fs from "node:fs"; +import { deleteSync } from "del"; +import { fileURLToPath } from "node:url"; +import glob from "fast-glob"; +import crypto from "node:crypto"; + +const __dirname = path.dirname(fileURLToPath(import.meta.url)); +const buildFolder = path.join(__dirname, "../../../dist/salt-ds-lab/css"); +const absWorkingDir = path.resolve(__dirname, ".."); +const outfileName = "salt-lab.css"; +const entryFile = `src/${crypto.randomUUID()}.css`; + +/** MAIN */ +deleteSync([buildFolder], { force: true }); +createCssEntryFile(runBuild); + +function createCssEntryFile(callback) { + const cssFiles = glob.sync(["src/**/*.css"]); + console.log(`Merging ${cssFiles.length} into entry file ${entryFile}`); + + const entry = fs.createWriteStream(entryFile, { + flags: "as", // preserve existing file data and create if doesn't exist + }); + + const writeLine = (line, index) => + index == 0 ? entry.write(line) : entry.write(`\n${line}`); + + cssFiles.forEach((cssFile, index) => { + writeLine( + `@import "${path.relative(path.dirname(entryFile), cssFile)}";`, + index + ); + }); + + entry.close(() => { + console.log("closed filestream"); + callback(); + }); +} + +function runBuild() { + esbuild + .build({ + absWorkingDir, + entryPoints: [entryFile], + outfile: path.join(buildFolder, outfileName), + loader: { + ".ttf": "file", + }, + write: true, + bundle: true, + logLevel: "info", + }) + .then(() => { + // copy built file to storybook dir + const cssFolder = path.join(__dirname, "../../../docs/css"); + fs.mkdirSync(cssFolder, { recursive: true }); + fs.copyFileSync( + path.join(buildFolder, outfileName), + path.join(cssFolder, outfileName) + ); + + //delete generated entry file + deleteSync([entryFile], { force: true }); + }); +} diff --git a/packages/styles/src/index.ts b/packages/styles/src/index.ts index 31c77038c0e..6d28b96a9ae 100644 --- a/packages/styles/src/index.ts +++ b/packages/styles/src/index.ts @@ -1 +1,2 @@ export * from "./use-style-injection"; +export * from "./style-injection-provider"; diff --git a/packages/styles/src/style-injection-provider/index.tsx b/packages/styles/src/style-injection-provider/index.tsx new file mode 100644 index 00000000000..548f1101265 --- /dev/null +++ b/packages/styles/src/style-injection-provider/index.tsx @@ -0,0 +1,6 @@ +import { createContext, useContext } from "react"; + +const StyleInjectionContext = createContext(true); + +export const useStyleInjection = () => useContext(StyleInjectionContext); +export const StyleInjectionProvider = StyleInjectionContext.Provider; diff --git a/packages/styles/src/use-style-injection/useStyleInjection.ts b/packages/styles/src/use-style-injection/useStyleInjection.ts index 57b2c298645..34d084864ec 100644 --- a/packages/styles/src/use-style-injection/useStyleInjection.ts +++ b/packages/styles/src/use-style-injection/useStyleInjection.ts @@ -1,5 +1,6 @@ import * as React from "react"; import { useInsertionPoint } from "./InsertionPointProvider"; +import { useStyleInjection } from "../style-injection-provider"; /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any -- Workaround for https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985 */ const maybeUseInsertionEffect: typeof React.useLayoutEffect = @@ -26,10 +27,11 @@ export function useComponentCssInjection({ css, window: targetWindow, }: UseComponentCssInjection): void { + const styleInjectionEnabled = useStyleInjection(); const insertionPoint = useInsertionPoint(); maybeUseInsertionEffect(() => { - if (!targetWindow) { + if (!targetWindow || !styleInjectionEnabled) { return; }