diff --git a/package.json b/package.json index eacd5d27e..7e9b514ea 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,7 @@ "webpack": "^5.90.1" }, "scripts": { - "start": "storybook dev -p 6006 --no-open", + "start": "NODE_OPTIONS=\"--max-old-space-size=8192\" && storybook dev -p 6006 --no-open", "build-storybook": "storybook build -o docs-build", "test-storybook": "test-storybook", "storybook:axe": "yarn build-storybook && yarn storybook:axeOnly", diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index 792abb262..71f23aeb8 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -98,9 +98,13 @@ --sds-color-semantic-base-background-tertiary: #dfdfdf; --sds-color-semantic-base-border: #6c6c6c; --sds-color-semantic-base-border-disabled: #c3c3c3; + --sds-color-semantic-base-border-disabled-inverse: #6c6c6c; --sds-color-semantic-base-border-hover: #000000; - --sds-color-semantic-base-border-inverse: #ffffff; + --sds-color-semantic-base-border-hover-inverse: #ffffff; + --sds-color-semantic-base-border-inverse: #c3c3c3; + --sds-color-semantic-base-border-on-fill: #ffffff; --sds-color-semantic-base-border-pressed: #000000; + --sds-color-semantic-base-border-pressed-inverse: #ffffff; --sds-color-semantic-base-border-table: #c3c3c3; --sds-color-semantic-base-divider: #dfdfdf; --sds-color-semantic-base-divider-inverse: #6c6c6c; @@ -111,15 +115,18 @@ --sds-color-semantic-base-fill-primary: #ffffff; --sds-color-semantic-base-fill-selected: #000000; --sds-color-semantic-base-ornament-disabled: #c3c3c3; + --sds-color-semantic-base-ornament-disabled-inverse: #6c6c6c; --sds-color-semantic-base-ornament-on-fill: #ffffff; --sds-color-semantic-base-ornament-primary: #000000; --sds-color-semantic-base-ornament-primary-inverse: #ffffff; --sds-color-semantic-base-ornament-secondary: #6c6c6c; + --sds-color-semantic-base-ornament-secondary-inverse: #c3c3c3; --sds-color-semantic-base-ornament-secondary-hover: #000000; --sds-color-semantic-base-ornament-secondary-pressed: #000000; --sds-color-semantic-base-surface: #ffffff; --sds-color-semantic-base-surface-inverse: #000000; --sds-color-semantic-base-text-disabled: #c3c3c3; + --sds-color-semantic-base-text-disabled-inverse: #6c6c6c; --sds-color-semantic-base-text-primary: #000000; --sds-color-semantic-base-text-primary-inverse: #ffffff; --sds-color-semantic-base-text-secondary: #6c6c6c; @@ -202,138 +209,263 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), + 0px 2px 4px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; - --sds-font-font-family-body: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-body-narrow: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-caps: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-caps-narrow: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-font-family-body: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-body-narrow: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-caps: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-caps-narrow: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; --sds-font-font-family-code: "IBM Plex Mono", monospace; --sds-font-font-family-code-narrow: "IBM Plex Mono", monospace; - --sds-font-font-family-header: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-header-narrow: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-tabular: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-tabular-narrow: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxxs-400-font: 400 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxxs-400-font-narrow: 400 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-font-family-header: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-header-narrow: var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-font-family-tabular: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-tabular-narrow: var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxxs-400-font: 400 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxxs-400-font-narrow: 400 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xxxs-400-letter-spacing: 0.1px; --sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px; - --sds-font-body-xxxs-600-font: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xxxs-600-font: 600 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxxs-600-font-narrow: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xxxs-600-letter-spacing: 0.1px; --sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px; - --sds-font-body-xxs-400-font: 400 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxs-400-font-narrow: 400 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xxs-400-font: 400 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxs-400-font-narrow: 400 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xxs-400-letter-spacing: 0.1px; --sds-font-body-xxs-400-letter-spacing-narrow: 0.1px; - --sds-font-body-xxs-600-font: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xxs-600-font: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxs-600-font-narrow: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xxs-600-letter-spacing: 0.1px; --sds-font-body-xxs-600-letter-spacing-narrow: 0.1px; - --sds-font-body-xs-400-font: 400 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xs-400-font-narrow: 400 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xs-400-font: 400 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xs-400-font-narrow: 400 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xs-400-letter-spacing: 0.08px; --sds-font-body-xs-400-letter-spacing-narrow: 0.08px; - --sds-font-body-xs-600-font: 600 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xs-600-font-narrow: 600 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xs-600-font: 600 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xs-600-font-narrow: 600 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xs-600-letter-spacing: 0.08px; --sds-font-body-xs-600-letter-spacing-narrow: 0.08px; - --sds-font-body-s-400-font: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-s-400-font-narrow: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-s-400-font: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-s-400-font-narrow: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-s-400-letter-spacing: 0.08px; --sds-font-body-s-400-letter-spacing-narrow: 0.08px; - --sds-font-body-s-600-font: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-s-600-font-narrow: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-s-600-font: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-s-600-font-narrow: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-s-600-letter-spacing: 0.08px; --sds-font-body-s-600-letter-spacing-narrow: 0.08px; - --sds-font-body-m-400-font: 400 16px/26px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-m-400-font-narrow: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-m-400-font: 400 16px/26px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-m-400-font-narrow: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-m-400-letter-spacing: 0px; --sds-font-body-m-400-letter-spacing-narrow: 0px; - --sds-font-body-m-600-font: 600 16px/26px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-m-600-font-narrow: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-m-600-font: 600 16px/26px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-m-600-font-narrow: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-m-600-letter-spacing: 0px; --sds-font-body-m-600-letter-spacing-narrow: 0px; - --sds-font-body-l-400-font: 400 18px/28px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-l-400-font-narrow: 400 16px/26px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-l-400-font: 400 18px/28px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-l-400-font-narrow: 400 16px/26px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-l-400-letter-spacing: 0px; --sds-font-body-l-400-letter-spacing-narrow: 0px; - --sds-font-body-l-600-font: 600 18px/28px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-l-600-font-narrow: 600 16px/26px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-l-600-font: 600 18px/28px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-l-600-font-narrow: 600 16px/26px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-l-600-letter-spacing: 0px; --sds-font-body-l-600-letter-spacing-narrow: 0px; - --sds-font-caps-xxxxs-600-font: 600 10px/14px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-caps-xxxxs-600-font: 600 10px/14px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-caps-xxxxs-600-letter-spacing: 0.5px; --sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px; --sds-font-caps-xxxxs-600-text-transform: uppercase; --sds-font-caps-xxxxs-600-text-transform-narrow: uppercase; - --sds-font-caps-xxxs-600-font: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-caps-xxxs-600-font: 600 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-caps-xxxs-600-letter-spacing: 0.5px; --sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px; --sds-font-caps-xxxs-600-text-transform: uppercase; --sds-font-caps-xxxs-600-text-transform-narrow: uppercase; - --sds-font-caps-xxs-600-font: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-caps-xxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-caps-xxs-600-font: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-caps-xxs-600-font-narrow: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-caps-xxs-600-letter-spacing: 0.5px; --sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px; --sds-font-caps-xxs-600-text-transform: uppercase; --sds-font-caps-xxs-600-text-transform-narrow: uppercase; - --sds-font-header-xxxs-600-font: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xxxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xxxs-600-font: 600 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xxxs-600-font-narrow: 600 12px/18px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-header-xxxs-600-letter-spacing: 0.1px; --sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px; - --sds-font-header-xxs-600-font: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xxs-600-font: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xxs-600-font-narrow: 600 12px/18px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-header-xxs-600-letter-spacing: 0.1px; --sds-font-header-xxs-600-letter-spacing-narrow: 0.1px; - --sds-font-header-xs-600-font: 600 13px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xs-600-font-narrow: 600 13px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xs-600-font: 600 13px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xs-600-font-narrow: 600 13px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-xs-600-letter-spacing: 0.08px; --sds-font-header-xs-600-letter-spacing-narrow: 0.08px; - --sds-font-header-s-600-font: 600 14px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-s-600-font-narrow: 600 14px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-s-600-font: 600 14px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-s-600-font-narrow: 600 14px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-s-600-letter-spacing: 0.08px; --sds-font-header-s-600-letter-spacing-narrow: 0.08px; - --sds-font-header-m-600-font: 600 16px/22px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-m-600-font-narrow: 600 14px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-m-600-font: 600 16px/22px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-m-600-font-narrow: 600 14px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-m-600-letter-spacing: 0px; --sds-font-header-m-600-letter-spacing-narrow: 0.08px; - --sds-font-header-l-600-font: 600 18px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-l-600-font-narrow: 600 16px/22px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-l-600-font: 600 18px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-l-600-font-narrow: 600 16px/22px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-l-600-letter-spacing: 0px; --sds-font-header-l-600-letter-spacing-narrow: 0px; - --sds-font-header-xl-600-font: 600 22px/30px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xl-600-font-narrow: 600 18px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xl-600-font: 600 22px/30px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xl-600-font-narrow: 600 18px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-xl-600-letter-spacing: 0px; --sds-font-header-xl-600-letter-spacing-narrow: 0px; - --sds-font-header-xxl-600-font: 600 26px/34px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xxl-600-font-narrow: 600 22px/30px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xxl-600-font: 600 26px/34px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xxl-600-font-narrow: 600 22px/30px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-header-xxl-600-letter-spacing: 0px; --sds-font-header-xxl-600-letter-spacing-narrow: 0px; - --sds-font-tabular-xs-400-font: 400 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-tabular-xs-400-font-narrow: 400 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-tabular-xs-400-font: 400 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-tabular-xs-400-font-narrow: 400 13px/20px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums; --sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-xs-400-letter-spacing: 0px; --sds-font-tabular-xs-400-letter-spacing-narrow: 0px; - --sds-font-tabular-xs-600-font: 600 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-tabular-xs-600-font-narrow: 600 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-tabular-xs-600-font: 600 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-tabular-xs-600-font-narrow: 600 13px/20px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums; --sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-xs-600-letter-spacing: 0px; --sds-font-tabular-xs-600-letter-spacing-narrow: 0px; - --sds-font-tabular-s-400-font: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-tabular-s-400-font-narrow: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-tabular-s-400-font: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-tabular-s-400-font-narrow: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-tabular-s-400-font-variant-numeric: tabular-nums; --sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-s-400-letter-spacing: 0px; --sds-font-tabular-s-400-letter-spacing-narrow: 0px; - --sds-font-tabular-s-600-font: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-tabular-s-600-font-narrow: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-tabular-s-600-font: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-tabular-s-600-font-narrow: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-tabular-s-600-font-variant-numeric: tabular-nums; --sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-s-600-letter-spacing: 0px; @@ -476,9 +608,13 @@ --sds-color-semantic-base-background-tertiary: #494949; --sds-color-semantic-base-border: #cdcdcd; --sds-color-semantic-base-border-disabled: #696969; + --sds-color-semantic-base-border-disabled-inverse: #cdcdcd; --sds-color-semantic-base-border-hover: #ffffff; - --sds-color-semantic-base-border-inverse: #000000; + --sds-color-semantic-base-border-hover-inverse: #000000; + --sds-color-semantic-base-border-inverse: #696969; + --sds-color-semantic-base-border-on-fill: #000000; --sds-color-semantic-base-border-pressed: #ffffff; + --sds-color-semantic-base-border-pressed-inverse: #000000; --sds-color-semantic-base-border-table: #696969; --sds-color-semantic-base-divider: #494949; --sds-color-semantic-base-divider-inverse: #cdcdcd; @@ -489,15 +625,18 @@ --sds-color-semantic-base-fill-primary: #000000; --sds-color-semantic-base-fill-selected: #ffffff; --sds-color-semantic-base-ornament-disabled: #696969; + --sds-color-semantic-base-ornament-disabled-inverse: #cdcdcd; --sds-color-semantic-base-ornament-on-fill: #000000; --sds-color-semantic-base-ornament-primary: #ffffff; --sds-color-semantic-base-ornament-primary-inverse: #000000; --sds-color-semantic-base-ornament-secondary: #cdcdcd; + --sds-color-semantic-base-ornament-secondary-inverse: #696969; --sds-color-semantic-base-ornament-secondary-hover: #ffffff; --sds-color-semantic-base-ornament-secondary-pressed: #ffffff; --sds-color-semantic-base-surface: #000000; --sds-color-semantic-base-surface-inverse: #ffffff; --sds-color-semantic-base-text-disabled: #696969; + --sds-color-semantic-base-text-disabled-inverse: #cdcdcd; --sds-color-semantic-base-text-primary: #ffffff; --sds-color-semantic-base-text-primary-inverse: #000000; --sds-color-semantic-base-text-secondary: #cdcdcd; @@ -580,138 +719,263 @@ --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), + 0px 2px 4px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; - --sds-font-font-family-body: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-body-narrow: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-caps: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-caps-narrow: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-font-family-body: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-body-narrow: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-caps: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-caps-narrow: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; --sds-font-font-family-code: "IBM Plex Mono", monospace; --sds-font-font-family-code-narrow: "IBM Plex Mono", monospace; - --sds-font-font-family-header: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-header-narrow: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-tabular: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-font-family-tabular-narrow: var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxxs-400-font: 400 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxxs-400-font-narrow: 400 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-font-family-header: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-header-narrow: var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-font-family-tabular: var(--font-inter), Inter, -apple-system, + BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, + sans-serif; + --sds-font-font-family-tabular-narrow: var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxxs-400-font: 400 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxxs-400-font-narrow: 400 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xxxs-400-letter-spacing: 0.1px; --sds-font-body-xxxs-400-letter-spacing-narrow: 0.1px; - --sds-font-body-xxxs-600-font: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xxxs-600-font: 600 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxxs-600-font-narrow: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xxxs-600-letter-spacing: 0.1px; --sds-font-body-xxxs-600-letter-spacing-narrow: 0.1px; - --sds-font-body-xxs-400-font: 400 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxs-400-font-narrow: 400 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xxs-400-font: 400 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxs-400-font-narrow: 400 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xxs-400-letter-spacing: 0.1px; --sds-font-body-xxs-400-letter-spacing-narrow: 0.1px; - --sds-font-body-xxs-600-font: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xxs-600-font: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xxs-600-font-narrow: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xxs-600-letter-spacing: 0.1px; --sds-font-body-xxs-600-letter-spacing-narrow: 0.1px; - --sds-font-body-xs-400-font: 400 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xs-400-font-narrow: 400 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xs-400-font: 400 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xs-400-font-narrow: 400 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xs-400-letter-spacing: 0.08px; --sds-font-body-xs-400-letter-spacing-narrow: 0.08px; - --sds-font-body-xs-600-font: 600 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-xs-600-font-narrow: 600 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-xs-600-font: 600 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-xs-600-font-narrow: 600 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-xs-600-letter-spacing: 0.08px; --sds-font-body-xs-600-letter-spacing-narrow: 0.08px; - --sds-font-body-s-400-font: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-s-400-font-narrow: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-s-400-font: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-s-400-font-narrow: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-s-400-letter-spacing: 0.08px; --sds-font-body-s-400-letter-spacing-narrow: 0.08px; - --sds-font-body-s-600-font: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-s-600-font-narrow: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-s-600-font: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-s-600-font-narrow: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-s-600-letter-spacing: 0.08px; --sds-font-body-s-600-letter-spacing-narrow: 0.08px; - --sds-font-body-m-400-font: 400 16px/26px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-m-400-font-narrow: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-m-400-font: 400 16px/26px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-m-400-font-narrow: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-m-400-letter-spacing: 0px; --sds-font-body-m-400-letter-spacing-narrow: 0px; - --sds-font-body-m-600-font: 600 16px/26px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-m-600-font-narrow: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-m-600-font: 600 16px/26px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-m-600-font-narrow: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-m-600-letter-spacing: 0px; --sds-font-body-m-600-letter-spacing-narrow: 0px; - --sds-font-body-l-400-font: 400 18px/28px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-l-400-font-narrow: 400 16px/26px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-l-400-font: 400 18px/28px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-l-400-font-narrow: 400 16px/26px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-l-400-letter-spacing: 0px; --sds-font-body-l-400-letter-spacing-narrow: 0px; - --sds-font-body-l-600-font: 600 18px/28px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-body-l-600-font-narrow: 600 16px/26px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-body-l-600-font: 600 18px/28px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-body-l-600-font-narrow: 600 16px/26px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-body-l-600-letter-spacing: 0px; --sds-font-body-l-600-letter-spacing-narrow: 0px; - --sds-font-caps-xxxxs-600-font: 600 10px/14px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-caps-xxxxs-600-font: 600 10px/14px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-caps-xxxxs-600-letter-spacing: 0.5px; --sds-font-caps-xxxxs-600-letter-spacing-narrow: 0.5px; --sds-font-caps-xxxxs-600-text-transform: uppercase; --sds-font-caps-xxxxs-600-text-transform-narrow: uppercase; - --sds-font-caps-xxxs-600-font: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-caps-xxxs-600-font: 600 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-caps-xxxs-600-letter-spacing: 0.5px; --sds-font-caps-xxxs-600-letter-spacing-narrow: 0.5px; --sds-font-caps-xxxs-600-text-transform: uppercase; --sds-font-caps-xxxs-600-text-transform-narrow: uppercase; - --sds-font-caps-xxs-600-font: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-caps-xxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-caps-xxs-600-font: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-caps-xxs-600-font-narrow: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-caps-xxs-600-letter-spacing: 0.5px; --sds-font-caps-xxs-600-letter-spacing-narrow: 0.5px; --sds-font-caps-xxs-600-text-transform: uppercase; --sds-font-caps-xxs-600-text-transform-narrow: uppercase; - --sds-font-header-xxxs-600-font: 600 11px/16px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xxxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xxxs-600-font: 600 11px/16px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xxxs-600-font-narrow: 600 12px/18px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-header-xxxs-600-letter-spacing: 0.1px; --sds-font-header-xxxs-600-letter-spacing-narrow: 0.1px; - --sds-font-header-xxs-600-font: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xxs-600-font-narrow: 600 12px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xxs-600-font: 600 12px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xxs-600-font-narrow: 600 12px/18px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-header-xxs-600-letter-spacing: 0.1px; --sds-font-header-xxs-600-letter-spacing-narrow: 0.1px; - --sds-font-header-xs-600-font: 600 13px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xs-600-font-narrow: 600 13px/18px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xs-600-font: 600 13px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xs-600-font-narrow: 600 13px/18px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-xs-600-letter-spacing: 0.08px; --sds-font-header-xs-600-letter-spacing-narrow: 0.08px; - --sds-font-header-s-600-font: 600 14px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-s-600-font-narrow: 600 14px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-s-600-font: 600 14px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-s-600-font-narrow: 600 14px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-s-600-letter-spacing: 0.08px; --sds-font-header-s-600-letter-spacing-narrow: 0.08px; - --sds-font-header-m-600-font: 600 16px/22px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-m-600-font-narrow: 600 14px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-m-600-font: 600 16px/22px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-m-600-font-narrow: 600 14px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-m-600-letter-spacing: 0px; --sds-font-header-m-600-letter-spacing-narrow: 0.08px; - --sds-font-header-l-600-font: 600 18px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-l-600-font-narrow: 600 16px/22px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-l-600-font: 600 18px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-l-600-font-narrow: 600 16px/22px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-l-600-letter-spacing: 0px; --sds-font-header-l-600-letter-spacing-narrow: 0px; - --sds-font-header-xl-600-font: 600 22px/30px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xl-600-font-narrow: 600 18px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xl-600-font: 600 22px/30px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xl-600-font-narrow: 600 18px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-header-xl-600-letter-spacing: 0px; --sds-font-header-xl-600-letter-spacing-narrow: 0px; - --sds-font-header-xxl-600-font: 600 26px/34px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-header-xxl-600-font-narrow: 600 22px/30px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-header-xxl-600-font: 600 26px/34px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-header-xxl-600-font-narrow: 600 22px/30px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-header-xxl-600-letter-spacing: 0px; --sds-font-header-xxl-600-letter-spacing-narrow: 0px; - --sds-font-tabular-xs-400-font: 400 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-tabular-xs-400-font-narrow: 400 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-tabular-xs-400-font: 400 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-tabular-xs-400-font-narrow: 400 13px/20px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-tabular-xs-400-font-variant-numeric: tabular-nums; --sds-font-tabular-xs-400-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-xs-400-letter-spacing: 0px; --sds-font-tabular-xs-400-letter-spacing-narrow: 0px; - --sds-font-tabular-xs-600-font: 600 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-tabular-xs-600-font-narrow: 600 13px/20px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-tabular-xs-600-font: 600 13px/20px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-tabular-xs-600-font-narrow: 600 13px/20px var(--font-inter), + Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + "Helvetica Neue", Helvetica, Arial, sans-serif; --sds-font-tabular-xs-600-font-variant-numeric: tabular-nums; --sds-font-tabular-xs-600-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-xs-600-letter-spacing: 0px; --sds-font-tabular-xs-600-letter-spacing-narrow: 0px; - --sds-font-tabular-s-400-font: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-tabular-s-400-font-narrow: 400 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-tabular-s-400-font: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-tabular-s-400-font-narrow: 400 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-tabular-s-400-font-variant-numeric: tabular-nums; --sds-font-tabular-s-400-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-s-400-letter-spacing: 0px; --sds-font-tabular-s-400-letter-spacing-narrow: 0px; - --sds-font-tabular-s-600-font: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; - --sds-font-tabular-s-600-font-narrow: 600 14px/24px var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif; + --sds-font-tabular-s-600-font: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; + --sds-font-tabular-s-600-font-narrow: 600 14px/24px var(--font-inter), Inter, + -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", + Helvetica, Arial, sans-serif; --sds-font-tabular-s-600-font-variant-numeric: tabular-nums; --sds-font-tabular-s-600-font-variant-numeric-narrow: tabular-nums; --sds-font-tabular-s-600-letter-spacing: 0px; diff --git a/packages/components/src/common/styles-dictionary/design-tokens/colors.json b/packages/components/src/common/styles-dictionary/design-tokens/colors.json index 477426d5b..929323479 100644 --- a/packages/components/src/common/styles-dictionary/design-tokens/colors.json +++ b/packages/components/src/common/styles-dictionary/design-tokens/colors.json @@ -106,11 +106,23 @@ "value": "{sds.color.primitive.gray.300.value}", "darkValue": "{sds.color.primitive.gray.300.darkValue}" }, + "border-disabled-inverse": { + "value": "{sds.color.primitive.gray.600.value}", + "darkValue": "{sds.color.primitive.gray.600.darkValue}" + }, "border-hover": { "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" }, + "border-hover-inverse": { + "value": "{sds.color.primitive.gray.50.value}", + "darkValue": "{sds.color.primitive.gray.50.darkValue}" + }, "border-inverse": { + "value": "{sds.color.primitive.gray.300.value}", + "darkValue": "{sds.color.primitive.gray.300.darkValue}" + }, + "border-on-fill": { "value": "{sds.color.primitive.gray.50.value}", "darkValue": "{sds.color.primitive.gray.50.darkValue}" }, @@ -118,6 +130,10 @@ "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" }, + "border-pressed-inverse": { + "value": "{sds.color.primitive.gray.50.value}", + "darkValue": "{sds.color.primitive.gray.50.darkValue}" + }, "border-table": { "value": "{sds.color.primitive.gray.300.value}", "darkValue": "{sds.color.primitive.gray.300.darkValue}" @@ -158,6 +174,10 @@ "value": "{sds.color.primitive.gray.300.value}", "darkValue": "{sds.color.primitive.gray.300.darkValue}" }, + "ornament-disabled-inverse": { + "value": "{sds.color.primitive.gray.600.value}", + "darkValue": "{sds.color.primitive.gray.600.darkValue}" + }, "ornament-on-fill": { "value": "{sds.color.primitive.gray.50.value}", "darkValue": "{sds.color.primitive.gray.50.darkValue}" @@ -174,6 +194,10 @@ "value": "{sds.color.primitive.gray.600.value}", "darkValue": "{sds.color.primitive.gray.600.darkValue}" }, + "ornament-secondary-inverse": { + "value": "{sds.color.primitive.gray.300.value}", + "darkValue": "{sds.color.primitive.gray.300.darkValue}" + }, "ornament-secondary-hover": { "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" @@ -194,6 +218,10 @@ "value": "{sds.color.primitive.gray.300.value}", "darkValue": "{sds.color.primitive.gray.300.darkValue}" }, + "text-disabled-inverse": { + "value": "{sds.color.primitive.gray.600.value}", + "darkValue": "{sds.color.primitive.gray.600.darkValue}" + }, "text-primary": { "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json index 42ef33082..3ea037c33 100644 --- a/packages/components/src/common/styles-dictionary/json/tailwind.json +++ b/packages/components/src/common/styles-dictionary/json/tailwind.json @@ -1165,9 +1165,13 @@ "sds-color-semantic-base-background-tertiary": "#494949", "sds-color-semantic-base-border": "#cdcdcd", "sds-color-semantic-base-border-disabled": "#696969", + "sds-color-semantic-base-border-disabled-inverse": "#cdcdcd", "sds-color-semantic-base-border-hover": "#ffffff", - "sds-color-semantic-base-border-inverse": "#000000", + "sds-color-semantic-base-border-hover-inverse": "#000000", + "sds-color-semantic-base-border-inverse": "#696969", + "sds-color-semantic-base-border-on-fill": "#000000", "sds-color-semantic-base-border-pressed": "#ffffff", + "sds-color-semantic-base-border-pressed-inverse": "#000000", "sds-color-semantic-base-border-table": "#696969", "sds-color-semantic-base-divider": "#494949", "sds-color-semantic-base-divider-inverse": "#cdcdcd", @@ -1178,15 +1182,18 @@ "sds-color-semantic-base-fill-primary": "#000000", "sds-color-semantic-base-fill-selected": "#ffffff", "sds-color-semantic-base-ornament-disabled": "#696969", + "sds-color-semantic-base-ornament-disabled-inverse": "#cdcdcd", "sds-color-semantic-base-ornament-on-fill": "#000000", "sds-color-semantic-base-ornament-primary": "#ffffff", "sds-color-semantic-base-ornament-primary-inverse": "#000000", "sds-color-semantic-base-ornament-secondary": "#cdcdcd", + "sds-color-semantic-base-ornament-secondary-inverse": "#696969", "sds-color-semantic-base-ornament-secondary-hover": "#ffffff", "sds-color-semantic-base-ornament-secondary-pressed": "#ffffff", "sds-color-semantic-base-surface": "#000000", "sds-color-semantic-base-surface-inverse": "#ffffff", "sds-color-semantic-base-text-disabled": "#696969", + "sds-color-semantic-base-text-disabled-inverse": "#cdcdcd", "sds-color-semantic-base-text-primary": "#ffffff", "sds-color-semantic-base-text-primary-inverse": "#000000", "sds-color-semantic-base-text-secondary": "#cdcdcd", @@ -1327,9 +1334,13 @@ "sds-color-semantic-base-background-tertiary": "#dfdfdf", "sds-color-semantic-base-border": "#6c6c6c", "sds-color-semantic-base-border-disabled": "#c3c3c3", + "sds-color-semantic-base-border-disabled-inverse": "#6c6c6c", "sds-color-semantic-base-border-hover": "#000000", - "sds-color-semantic-base-border-inverse": "#ffffff", + "sds-color-semantic-base-border-hover-inverse": "#ffffff", + "sds-color-semantic-base-border-inverse": "#c3c3c3", + "sds-color-semantic-base-border-on-fill": "#ffffff", "sds-color-semantic-base-border-pressed": "#000000", + "sds-color-semantic-base-border-pressed-inverse": "#ffffff", "sds-color-semantic-base-border-table": "#c3c3c3", "sds-color-semantic-base-divider": "#dfdfdf", "sds-color-semantic-base-divider-inverse": "#6c6c6c", @@ -1340,15 +1351,18 @@ "sds-color-semantic-base-fill-primary": "#ffffff", "sds-color-semantic-base-fill-selected": "#000000", "sds-color-semantic-base-ornament-disabled": "#c3c3c3", + "sds-color-semantic-base-ornament-disabled-inverse": "#6c6c6c", "sds-color-semantic-base-ornament-on-fill": "#ffffff", "sds-color-semantic-base-ornament-primary": "#000000", "sds-color-semantic-base-ornament-primary-inverse": "#ffffff", "sds-color-semantic-base-ornament-secondary": "#6c6c6c", + "sds-color-semantic-base-ornament-secondary-inverse": "#c3c3c3", "sds-color-semantic-base-ornament-secondary-hover": "#000000", "sds-color-semantic-base-ornament-secondary-pressed": "#000000", "sds-color-semantic-base-surface": "#ffffff", "sds-color-semantic-base-surface-inverse": "#000000", "sds-color-semantic-base-text-disabled": "#c3c3c3", + "sds-color-semantic-base-text-disabled-inverse": "#6c6c6c", "sds-color-semantic-base-text-primary": "#000000", "sds-color-semantic-base-text-primary-inverse": "#ffffff", "sds-color-semantic-base-text-secondary": "#6c6c6c", diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss index affd8c88e..843b7ee5d 100644 --- a/packages/components/src/common/styles-dictionary/scss/_variables.scss +++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss @@ -191,12 +191,20 @@ $sds-color-semantic-base-border: #6c6c6c; $sds-color-semantic-base-border-dark: #cdcdcd; $sds-color-semantic-base-border-disabled: #c3c3c3; $sds-color-semantic-base-border-disabled-dark: #696969; +$sds-color-semantic-base-border-disabled-inverse: #6c6c6c; +$sds-color-semantic-base-border-disabled-inverse-dark: #cdcdcd; $sds-color-semantic-base-border-hover: #000000; $sds-color-semantic-base-border-hover-dark: #ffffff; -$sds-color-semantic-base-border-inverse: #ffffff; -$sds-color-semantic-base-border-inverse-dark: #000000; +$sds-color-semantic-base-border-hover-inverse: #ffffff; +$sds-color-semantic-base-border-hover-inverse-dark: #000000; +$sds-color-semantic-base-border-inverse: #c3c3c3; +$sds-color-semantic-base-border-inverse-dark: #696969; +$sds-color-semantic-base-border-on-fill: #ffffff; +$sds-color-semantic-base-border-on-fill-dark: #000000; $sds-color-semantic-base-border-pressed: #000000; $sds-color-semantic-base-border-pressed-dark: #ffffff; +$sds-color-semantic-base-border-pressed-inverse: #ffffff; +$sds-color-semantic-base-border-pressed-inverse-dark: #000000; $sds-color-semantic-base-border-table: #c3c3c3; $sds-color-semantic-base-border-table-dark: #696969; $sds-color-semantic-base-divider: #dfdfdf; @@ -217,6 +225,8 @@ $sds-color-semantic-base-fill-selected: #000000; $sds-color-semantic-base-fill-selected-dark: #ffffff; $sds-color-semantic-base-ornament-disabled: #c3c3c3; $sds-color-semantic-base-ornament-disabled-dark: #696969; +$sds-color-semantic-base-ornament-disabled-inverse: #6c6c6c; +$sds-color-semantic-base-ornament-disabled-inverse-dark: #cdcdcd; $sds-color-semantic-base-ornament-on-fill: #ffffff; $sds-color-semantic-base-ornament-on-fill-dark: #000000; $sds-color-semantic-base-ornament-primary: #000000; @@ -225,6 +235,8 @@ $sds-color-semantic-base-ornament-primary-inverse: #ffffff; $sds-color-semantic-base-ornament-primary-inverse-dark: #000000; $sds-color-semantic-base-ornament-secondary: #6c6c6c; $sds-color-semantic-base-ornament-secondary-dark: #cdcdcd; +$sds-color-semantic-base-ornament-secondary-inverse: #c3c3c3; +$sds-color-semantic-base-ornament-secondary-inverse-dark: #696969; $sds-color-semantic-base-ornament-secondary-hover: #000000; $sds-color-semantic-base-ornament-secondary-hover-dark: #ffffff; $sds-color-semantic-base-ornament-secondary-pressed: #000000; @@ -235,6 +247,8 @@ $sds-color-semantic-base-surface-inverse: #000000; $sds-color-semantic-base-surface-inverse-dark: #ffffff; $sds-color-semantic-base-text-disabled: #c3c3c3; $sds-color-semantic-base-text-disabled-dark: #696969; +$sds-color-semantic-base-text-disabled-inverse: #6c6c6c; +$sds-color-semantic-base-text-disabled-inverse-dark: #cdcdcd; $sds-color-semantic-base-text-primary: #000000; $sds-color-semantic-base-text-primary-dark: #ffffff; $sds-color-semantic-base-text-primary-inverse: #ffffff; diff --git a/packages/components/src/common/warnings.ts b/packages/components/src/common/warnings.ts index 4a04b962e..ad3b69332 100644 --- a/packages/components/src/common/warnings.ts +++ b/packages/components/src/common/warnings.ts @@ -2,6 +2,7 @@ export enum SDSWarningTypes { ButtonMinimalIsAllCaps = "buttonMinimalIsAllCaps", ButtonMissingSDSProps = "buttonMissingProps", ButtonIconMissingIconProp = "buttonIconMissingIconProp", + ButtonDropdownMinimal = "buttonDropdownMinimal", ButtonToggleMissingIconProp = "buttonToggleMissingIconProp", ChipDeprecated = "chipDeprecated", MenuSelectDeprecated = "menuSelectDeprecated", @@ -14,7 +15,7 @@ export const SDS_WARNINGS = { [SDSWarningTypes.ButtonMinimalIsAllCaps]: { hasWarned: false, message: - "Warning: isAllCaps is only applied to buttons with sdsStyle='minimal'.", + "Warning: isAllCaps can not be applied to buttons with sdsStyle='icon'.", }, [SDSWarningTypes.ButtonMissingSDSProps]: { hasWarned: false, @@ -26,6 +27,10 @@ export const SDS_WARNINGS = { message: "Warning: Buttons with an SDS type of icon require an icon prop to be provided.", }, + [SDSWarningTypes.ButtonDropdownMinimal]: { + hasWarned: false, + message: "Warning: Button Dropdowns can not be of type minimal!", + }, [SDSWarningTypes.ButtonToggleMissingIconProp]: { hasWarned: false, message: "Warning: Button Toggles require an icon prop to be provided.", diff --git a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap index 177bce31e..5f88cc1c9 100644 --- a/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/components/src/core/Autocomplete/__tests__/__snapshots__/index.test.tsx.snap @@ -6,16 +6,16 @@ exports[` ControlledOpen story renders snapshot 1`] = ` >
ControlledOpen story renders snapshot 1`] = `
-
ControlledOpen story renders snapshot 1`] = ` class="MuiInputAdornment-root MuiInputAdornment-positionEnd MuiInputAdornment-outlined MuiInputAdornment-sizeSmall css-1is7ehy-MuiInputAdornment-root" >

ControlledOpen story renders snapshot 1`] = ` class="css-tiqrog" >
`; @@ -109,7 +98,7 @@ exports[` Dialog all sizes match the snapshots 4`] = ` >

Dialog all sizes match the snapshots 6`] = ` data-testid="dialog-actions" > `; @@ -196,7 +176,7 @@ exports[`

Dialog all sizes match the snapshots 7`] = ` >

Dialog all sizes match the snapshots 9`] = ` data-testid="dialog-actions" > `; @@ -283,7 +254,7 @@ exports[`

Dialog all sizes match the snapshots 10`] = ` >

Dialog all sizes match the snapshots 12`] = ` data-testid="dialog-actions" > `; @@ -368,24 +330,18 @@ exports[`

renders Dialog left positioned buttons 1`] = ` data-testid="dialog-actions" > `; diff --git a/packages/components/src/core/Dialog/components/DialogTitle/index.tsx b/packages/components/src/core/Dialog/components/DialogTitle/index.tsx index 741edeefd..db63df162 100644 --- a/packages/components/src/core/Dialog/components/DialogTitle/index.tsx +++ b/packages/components/src/core/Dialog/components/DialogTitle/index.tsx @@ -35,7 +35,9 @@ const DialogTitle = forwardRef( {children || ( <> - {onClose && } + {onClose && ( + + )} {overline} {title} {subtitle} diff --git a/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap index 223e219fe..d1034b1fc 100644 --- a/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/components/src/core/Dropdown/__tests__/__snapshots__/index.test.tsx.snap @@ -3,7 +3,7 @@ exports[` Default story renders snapshot 1`] = ` `; @@ -48,7 +45,7 @@ exports[` Default story renders snapshot 1`] = ` exports[` MultiColumnWithButtons story renders snapshot 1`] = ` `; diff --git a/packages/components/src/core/InputDropdown/__storybook__/stories/default.tsx b/packages/components/src/core/InputDropdown/__storybook__/stories/default.tsx index d7f51910e..9d1cac229 100644 --- a/packages/components/src/core/InputDropdown/__storybook__/stories/default.tsx +++ b/packages/components/src/core/InputDropdown/__storybook__/stories/default.tsx @@ -3,7 +3,6 @@ import { Args } from "@storybook/react"; import { useEffect, useState } from "react"; import { DefaultAutocompleteOption } from "src/core/Autocomplete"; import Callout from "src/core/Callout"; -import CalloutTitle from "src/core/Callout/components/CalloutTitle"; import DropdownMenu from "src/core/DropdownMenu"; import { StyledInputDropdown } from "../style"; @@ -125,12 +124,12 @@ export const InputDropdown = < return (
{invalid ? ( - - Invalid props! - When using the InputDropdown component, please note that the - combination of setting the sdsType prop to "value" and the - multiple prop to "true" is not allowed. - + ) : ( Default story renders snapshot 1`] = `
-
`; diff --git a/packages/components/src/core/InputDropdown/style.ts b/packages/components/src/core/InputDropdown/style.ts index db3486c5e..53f2a3b32 100644 --- a/packages/components/src/core/InputDropdown/style.ts +++ b/packages/components/src/core/InputDropdown/style.ts @@ -77,6 +77,7 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => { ${labelStyle(props)} border: ${borders?.base?.default}; + box-shadow: none !important; cursor: pointer; padding: ${padding}; justify-content: start; @@ -105,7 +106,7 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => { &:hover { background-color: transparent; - border-color: ${semanticColors?.base?.borderHover}; + border: ${borders?.base?.hover}; color: ${semanticColors?.base?.textPrimary}; path { @@ -118,6 +119,7 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => { } &:active { + background-color: transparent; border: ${borders?.base?.pressed}; color: ${semanticColors?.base?.textPrimary}; @@ -127,6 +129,7 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => { } &:focus { + background-color: transparent; outline-offset: -1px; } `; @@ -142,7 +145,7 @@ const minimal = (props: InputDropdownProps): SerializedStyles => { /* this is needed to left align the label text */ align-items: flex-start; - border: none; + border: none !important; flex-direction: column; padding: ${spaces?.xs}px ${spaces?.s}px; background-color: transparent; @@ -199,6 +202,7 @@ const square = (props: InputDropdownProps): SerializedStyles => { return css` border-radius: ${corners?.m}px; min-width: 90px; + background-color: transparent; `; }; @@ -208,6 +212,7 @@ const rounded = (props: InputDropdownProps): SerializedStyles => { return css` border-radius: ${corners?.l}px; min-width: 90px; + background-color: transparent; `; }; diff --git a/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap index 1b604ded8..626efebeb 100644 --- a/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/components/src/core/InputSearch/__tests__/__snapshots__/index.test.tsx.snap @@ -2,7 +2,7 @@ exports[` Default story renders snapshot 1`] = `