From 5073191016bec805aff43ff741aa73db10f4d9f5 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Wed, 8 Jan 2025 13:04:49 -0500 Subject: [PATCH 1/2] fix(design-tokens): fixed font family --- .../styles-dictionary/css/variables.css | 510 +++++++++++++----- .../styles-dictionary/design-tokens/font.json | 17 +- .../styles-dictionary/json/tailwind.json | 116 ++-- .../styles-dictionary/scss/_variables.scss | 124 ++--- 4 files changed, 509 insertions(+), 258 deletions(-) diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index e50645e8..9571a8e9 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -202,138 +202,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: "Inter", sans-serif; - --sds-font-font-family-body-narrow: "Inter", sans-serif; - --sds-font-font-family-caps: "Inter", sans-serif; - --sds-font-font-family-caps-narrow: "Inter", 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: "Inter", sans-serif; - --sds-font-font-family-header-narrow: "Inter", sans-serif; - --sds-font-font-family-tabular: "Inter", sans-serif; - --sds-font-font-family-tabular-narrow: "Inter", sans-serif; - --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; - --sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", 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 "Inter", sans-serif; - --sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", 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 "Inter", sans-serif; - --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", 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 "Inter", sans-serif; - --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", 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 "Inter", sans-serif; - --sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", 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 "Inter", sans-serif; - --sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", 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; @@ -580,138 +705,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: "Inter", sans-serif; - --sds-font-font-family-body-narrow: "Inter", sans-serif; - --sds-font-font-family-caps: "Inter", sans-serif; - --sds-font-font-family-caps-narrow: "Inter", 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: "Inter", sans-serif; - --sds-font-font-family-header-narrow: "Inter", sans-serif; - --sds-font-font-family-tabular: "Inter", sans-serif; - --sds-font-font-family-tabular-narrow: "Inter", sans-serif; - --sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; - --sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", 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 "Inter", sans-serif; - --sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", 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 "Inter", sans-serif; - --sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", 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 "Inter", sans-serif; - --sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", 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 "Inter", sans-serif; - --sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", 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 "Inter", sans-serif; - --sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", 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 "Inter", sans-serif; - --sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", 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 "Inter", sans-serif; - --sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", 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 "Inter", sans-serif; - --sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", 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/font.json b/packages/components/src/common/styles-dictionary/design-tokens/font.json index bd5ead15..058ecb58 100644 --- a/packages/components/src/common/styles-dictionary/design-tokens/font.json +++ b/packages/components/src/common/styles-dictionary/design-tokens/font.json @@ -1,26 +1,27 @@ { "sds": { "font": { + "inter-font": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif", "font-family": { "body": { - "value": "\"Inter\", sans-serif", - "narrowValue": "\"Inter\", sans-serif" + "value": "{sds.font.inter-font}", + "narrowValue": "{sds.font.inter-font}" }, "caps": { - "value": "\"Inter\", sans-serif", - "narrowValue": "\"Inter\", sans-serif" + "value": "{sds.font.inter-font}", + "narrowValue": "{sds.font.inter-font}" }, "code": { "value": "\"IBM Plex Mono\", monospace", "narrowValue": "\"IBM Plex Mono\", monospace" }, "header": { - "value": "\"Inter\", sans-serif", - "narrowValue": "\"Inter\", sans-serif" + "value": "{sds.font.inter-font}", + "narrowValue": "{sds.font.inter-font}" }, "tabular": { - "value": "\"Inter\", sans-serif", - "narrowValue": "\"Inter\", sans-serif" + "value": "{sds.font.inter-font}", + "narrowValue": "{sds.font.inter-font}" } }, "body": { diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json index 78ea0a0d..42ef3308 100644 --- a/packages/components/src/common/styles-dictionary/json/tailwind.json +++ b/packages/components/src/common/styles-dictionary/json/tailwind.json @@ -1,10 +1,10 @@ { "fontFamily": { - "sds-body": "\"Inter\", sans-serif", - "sds-caps": "\"Inter\", sans-serif", + "sds-body": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif", + "sds-caps": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif", "sds-code": "\"IBM Plex Mono\", monospace", - "sds-header": "\"Inter\", sans-serif", - "sds-tabular": "\"Inter\", sans-serif" + "sds-header": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif", + "sds-tabular": "var(--font-inter),Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,\"Helvetica Neue\",Helvetica,Arial,sans-serif" }, "fontSize": { "sds-body-xxxs-400-narrow": "12px", @@ -329,7 +329,7 @@ "typography": { "sds-body-xxxs-400-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -341,7 +341,7 @@ }, "sds-body-xxxs-400-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "11px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -353,7 +353,7 @@ }, "sds-body-xxxs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -365,7 +365,7 @@ }, "sds-body-xxxs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "11px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -377,7 +377,7 @@ }, "sds-body-xxs-400-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -389,7 +389,7 @@ }, "sds-body-xxs-400-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -401,7 +401,7 @@ }, "sds-body-xxs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -413,7 +413,7 @@ }, "sds-body-xxs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -425,7 +425,7 @@ }, "sds-body-xs-400-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -437,7 +437,7 @@ }, "sds-body-xs-400-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -449,7 +449,7 @@ }, "sds-body-xs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -461,7 +461,7 @@ }, "sds-body-xs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -473,7 +473,7 @@ }, "sds-body-s-400-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -485,7 +485,7 @@ }, "sds-body-s-400-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -497,7 +497,7 @@ }, "sds-body-s-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -509,7 +509,7 @@ }, "sds-body-s-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -521,7 +521,7 @@ }, "sds-body-m-400-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -533,7 +533,7 @@ }, "sds-body-m-400-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "16px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -545,7 +545,7 @@ }, "sds-body-m-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -557,7 +557,7 @@ }, "sds-body-m-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "16px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -569,7 +569,7 @@ }, "sds-body-l-400-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "16px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -581,7 +581,7 @@ }, "sds-body-l-400-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "18px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -593,7 +593,7 @@ }, "sds-body-l-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "16px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -605,7 +605,7 @@ }, "sds-body-l-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "18px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -617,7 +617,7 @@ }, "sds-caps-xxxxs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "11px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -629,7 +629,7 @@ }, "sds-caps-xxxxs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "10px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -641,7 +641,7 @@ }, "sds-caps-xxxs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "11px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -653,7 +653,7 @@ }, "sds-caps-xxxs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "11px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -665,7 +665,7 @@ }, "sds-caps-xxs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -677,7 +677,7 @@ }, "sds-caps-xxs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -689,7 +689,7 @@ }, "sds-header-xxxs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -701,7 +701,7 @@ }, "sds-header-xxxs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "11px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -713,7 +713,7 @@ }, "sds-header-xxs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -725,7 +725,7 @@ }, "sds-header-xxs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "12px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -737,7 +737,7 @@ }, "sds-header-xs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -749,7 +749,7 @@ }, "sds-header-xs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -761,7 +761,7 @@ }, "sds-header-s-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -773,7 +773,7 @@ }, "sds-header-s-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -785,7 +785,7 @@ }, "sds-header-m-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -797,7 +797,7 @@ }, "sds-header-m-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "16px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -809,7 +809,7 @@ }, "sds-header-l-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "16px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -821,7 +821,7 @@ }, "sds-header-l-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "18px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -833,7 +833,7 @@ }, "sds-header-xl-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "18px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -845,7 +845,7 @@ }, "sds-header-xl-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "22px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -857,7 +857,7 @@ }, "sds-header-xxl-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "22px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -869,7 +869,7 @@ }, "sds-header-xxl-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "26px", "fontStyle": "normal", "fontVariantNumeric": "normal", @@ -881,7 +881,7 @@ }, "sds-tabular-xs-400-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "tabular-nums", @@ -893,7 +893,7 @@ }, "sds-tabular-xs-400-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "tabular-nums", @@ -905,7 +905,7 @@ }, "sds-tabular-xs-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "tabular-nums", @@ -917,7 +917,7 @@ }, "sds-tabular-xs-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "13px", "fontStyle": "normal", "fontVariantNumeric": "tabular-nums", @@ -929,7 +929,7 @@ }, "sds-tabular-s-400-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "tabular-nums", @@ -941,7 +941,7 @@ }, "sds-tabular-s-400-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "tabular-nums", @@ -953,7 +953,7 @@ }, "sds-tabular-s-600-narrow": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "tabular-nums", @@ -965,7 +965,7 @@ }, "sds-tabular-s-600-wide": { "css": { - "fontFamily": "Inter, sans-serif", + "fontFamily": "var(--font-inter), Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif", "fontSize": "14px", "fontStyle": "normal", "fontVariantNumeric": "tabular-nums", diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss index 9e43cc9e..affd8c88 100644 --- a/packages/components/src/common/styles-dictionary/scss/_variables.scss +++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss @@ -399,134 +399,134 @@ $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-none: none; -$sds-font-font-family-body: "Inter", sans-serif; -$sds-font-font-family-body-narrow: "Inter", sans-serif; -$sds-font-font-family-caps: "Inter", sans-serif; -$sds-font-font-family-caps-narrow: "Inter", 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: "Inter", sans-serif; -$sds-font-font-family-header-narrow: "Inter", sans-serif; -$sds-font-font-family-tabular: "Inter", sans-serif; -$sds-font-font-family-tabular-narrow: "Inter", sans-serif; -$sds-font-body-xxxs-400-font: 400 11px/16px "Inter", sans-serif; -$sds-font-body-xxxs-400-font-narrow: 400 12px/18px "Inter", 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 "Inter", sans-serif; -$sds-font-body-xxxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; -$sds-font-body-xxs-400-font-narrow: 400 12px/18px "Inter", 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 "Inter", sans-serif; -$sds-font-body-xxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; -$sds-font-body-xs-400-font-narrow: 400 13px/20px "Inter", 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 "Inter", sans-serif; -$sds-font-body-xs-600-font-narrow: 600 13px/20px "Inter", 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 "Inter", sans-serif; -$sds-font-body-s-400-font-narrow: 400 14px/24px "Inter", 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 "Inter", sans-serif; -$sds-font-body-s-600-font-narrow: 600 14px/24px "Inter", 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 "Inter", sans-serif; -$sds-font-body-m-400-font-narrow: 400 14px/24px "Inter", 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 "Inter", sans-serif; -$sds-font-body-m-600-font-narrow: 600 14px/24px "Inter", 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 "Inter", sans-serif; -$sds-font-body-l-400-font-narrow: 400 16px/26px "Inter", 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 "Inter", sans-serif; -$sds-font-body-l-600-font-narrow: 600 16px/26px "Inter", 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 "Inter", sans-serif; -$sds-font-caps-xxxxs-600-font-narrow: 600 11px/16px "Inter", 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 "Inter", sans-serif; -$sds-font-caps-xxxs-600-font-narrow: 600 11px/16px "Inter", 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 "Inter", sans-serif; -$sds-font-caps-xxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; -$sds-font-header-xxxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; -$sds-font-header-xxs-600-font-narrow: 600 12px/18px "Inter", 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 "Inter", sans-serif; -$sds-font-header-xs-600-font-narrow: 600 13px/18px "Inter", 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 "Inter", sans-serif; -$sds-font-header-s-600-font-narrow: 600 14px/20px "Inter", 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 "Inter", sans-serif; -$sds-font-header-m-600-font-narrow: 600 14px/20px "Inter", 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 "Inter", sans-serif; -$sds-font-header-l-600-font-narrow: 600 16px/22px "Inter", 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 "Inter", sans-serif; -$sds-font-header-xl-600-font-narrow: 600 18px/24px "Inter", 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 "Inter", sans-serif; -$sds-font-header-xxl-600-font-narrow: 600 22px/30px "Inter", 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 "Inter", sans-serif; -$sds-font-tabular-xs-400-font-narrow: 400 13px/20px "Inter", 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 "Inter", sans-serif; -$sds-font-tabular-xs-600-font-narrow: 600 13px/20px "Inter", 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 "Inter", sans-serif; -$sds-font-tabular-s-400-font-narrow: 400 14px/24px "Inter", 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 "Inter", sans-serif; -$sds-font-tabular-s-600-font-narrow: 600 14px/24px "Inter", 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; From ee1fb9af8d256d28854b6bec040d40633a65d7f3 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Thu, 9 Jan 2025 16:44:39 -0500 Subject: [PATCH 2/2] docs(design-tokens): adding a comment about font-family --- .../src/common/styles-dictionary/config.mjs | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/packages/components/src/common/styles-dictionary/config.mjs b/packages/components/src/common/styles-dictionary/config.mjs index ffd0982f..8926d83e 100644 --- a/packages/components/src/common/styles-dictionary/config.mjs +++ b/packages/components/src/common/styles-dictionary/config.mjs @@ -1,3 +1,16 @@ +/* Font-family explanation: + The following font stack is designed to provide compatibility across multiple operating systems: + - var(--font-inter): Custom Inter font defined by Next.js. + - Inter: Standard Inter font fallback. + - -apple-system, BlinkMacSystemFont: macOS-specific system fonts. + - Segoe UI: Default system font for Windows. + - Roboto: Default system font for most Linux distributions. + - Helvetica Neue, Helvetica, Arial, sans-serif: General fallbacks to ensure compatibility. + Reference: + An article explaining how platforms like GitHub and Medium use similar fallback font stacks. + Link: https://css-tricks.com/snippets/css/system-font-stack/ +*/ + const config = { platforms: { css: {