From 3717ddd021dd85d4d4edc0a462fa3596515f642d Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Mon, 21 Oct 2024 17:05:51 +0200 Subject: [PATCH 1/2] Generate proper font fallbacks which match the metrics of the font we use --- package.json | 2 + src/configs/getWebConfig.ts | 21 ++++ src/utils/fontFallbacks.ts | 221 ++++++++++++++++++++++++++++++++++ src/utils/generateCssIndex.ts | 7 +- yarn.lock | 17 +++ 5 files changed, 267 insertions(+), 1 deletion(-) create mode 100644 src/utils/fontFallbacks.ts diff --git a/package.json b/package.json index f251a0fa..bd0366bd 100644 --- a/package.json +++ b/package.json @@ -49,6 +49,8 @@ "@babel/plugin-transform-react-jsx": "^7.24.7", "@babel/types": "^7.24.7", "@biomejs/biome": "^1.8.3", + "@capsizecss/core": "^4.1.2", + "@capsizecss/metrics": "^3.3.0", "@svgr/core": "^8.1.0", "@svgr/plugin-jsx": "^8.1.0", "@tokens-studio/sd-transforms": "^1.0.0", diff --git a/src/configs/getWebConfig.ts b/src/configs/getWebConfig.ts index 245c0255..e3338d5e 100644 --- a/src/configs/getWebConfig.ts +++ b/src/configs/getWebConfig.ts @@ -15,6 +15,7 @@ limitations under the License. */ import { camelCase } from "lodash-es"; +import StyleDictionary from "style-dictionary"; import type { File, PlatformConfig } from "style-dictionary/types"; import type { Theme } from "../@types"; import { isCoreColor } from "../filters/isCoreColor"; @@ -25,9 +26,22 @@ import { type Tier, cssFileName, } from "../utils/cssFileName"; +import { fontFaces, fontFamilyOverrides } from "../utils/fontFallbacks"; const basePxFontSize = 16; +StyleDictionary.registerFormat({ + name: "css/fontFallbacks", + format: () => fontFaces, +}); + +StyleDictionary.registerTransform({ + name: "css/fontFallbacks", + type: "value", + filter: (token) => token.type === "fontFamilies", + transform: (token) => fontFamilyOverrides[token.value] ?? token.value, +}); + export default function ( target: "js" | "css" | "ts", theme: Theme, @@ -42,6 +56,7 @@ export default function ( "attribute/cti", "css/pxToRem", "css/percentageToUnitless", + "css/fontFallbacks", target === "css" ? "name/kebab" : "camelCaseDecimal", ]; @@ -115,6 +130,11 @@ function getFilesFormat(theme: Theme, target: "css" | "js" | "ts"): File[] { }, }); + const fontFaces = { + destination: `${COMPOUND_TOKENS_NAMESPACE}-font-fallbacks.css`, + format: "css/fontFallbacks", + }; + return [ common("base"), common("semantic"), @@ -126,5 +146,6 @@ function getFilesFormat(theme: Theme, target: "css" | "js" | "ts"): File[] { // This file is to be imported with a media query import themed("base", true), themed("semantic", true), + fontFaces, ]; } diff --git a/src/utils/fontFallbacks.ts b/src/utils/fontFallbacks.ts new file mode 100644 index 00000000..ada01e73 --- /dev/null +++ b/src/utils/fontFallbacks.ts @@ -0,0 +1,221 @@ +import { createFontStack } from "@capsizecss/core"; + +// The goal of this is to generate @font-face rules to fallback to local fonts, +// but with font metrics adjusted to match the ones of the font we actually use. +// This way, we can display temporarily a local sans-serif font, laid out very +// close to what Inter will look like once we actually loaded it. +// +// Out of this file, we get two exports: +// - fontFamilyOverrides: a mapping from font we have in tokens to a font-family +// which has all the overrides +// - fontFaces: the @font-face rules to inject + +// Inter: the font we actually use +import inter500 from "@capsizecss/metrics/inter/500"; +import inter500Italic from "@capsizecss/metrics/inter/500italic"; +import inter600 from "@capsizecss/metrics/inter/600"; +import inter600Italic from "@capsizecss/metrics/inter/600italic"; +import inter400Italic from "@capsizecss/metrics/inter/italic"; +import inter400 from "@capsizecss/metrics/inter/regular"; + +// Roboto +import roboto500 from "@capsizecss/metrics/roboto/500"; +import roboto500Italic from "@capsizecss/metrics/roboto/500italic"; +import roboto700 from "@capsizecss/metrics/roboto/700"; +import roboto700Italic from "@capsizecss/metrics/roboto/700italic"; +import roboto400Italic from "@capsizecss/metrics/roboto/italic"; +import roboto400 from "@capsizecss/metrics/roboto/regular"; + +// Segoe UI +import segoeUI600 from "@capsizecss/metrics/segoeUI/600"; +import segoeUI600Italic from "@capsizecss/metrics/segoeUI/600italic"; +import segoeUI700 from "@capsizecss/metrics/segoeUI/700"; +import segoeUI700Italic from "@capsizecss/metrics/segoeUI/700italic"; +import segoeUI400Italic from "@capsizecss/metrics/segoeUI/italic"; +import segoeUI400 from "@capsizecss/metrics/segoeUI/regular"; + +// Helvetica Neue +import helveticaNeue500 from "@capsizecss/metrics/helveticaNeue/500"; +import helveticaNeue500Italic from "@capsizecss/metrics/helveticaNeue/500italic"; +import helveticaNeue700 from "@capsizecss/metrics/helveticaNeue/700"; +import helveticaNeue700Italic from "@capsizecss/metrics/helveticaNeue/700italic"; +import helveticaNeue400Italic from "@capsizecss/metrics/helveticaNeue/italic"; +import helveticaNeue400 from "@capsizecss/metrics/helveticaNeue/regular"; + +// Ubuntu +import ubuntu500 from "@capsizecss/metrics/ubuntu/500"; +import ubuntu500Italic from "@capsizecss/metrics/ubuntu/500italic"; +import ubuntu700 from "@capsizecss/metrics/ubuntu/700"; +import ubuntu700Italic from "@capsizecss/metrics/ubuntu/700italic"; +import ubuntu400Italic from "@capsizecss/metrics/ubuntu/italic"; +import ubuntu400 from "@capsizecss/metrics/ubuntu/regular"; + +// Fira Sans +import firaSans500 from "@capsizecss/metrics/firaSans/500"; +import firaSans500Italic from "@capsizecss/metrics/firaSans/500italic"; +import firaSans600 from "@capsizecss/metrics/firaSans/600"; +import firaSans600Italic from "@capsizecss/metrics/firaSans/600italic"; +import firaSans400Italic from "@capsizecss/metrics/firaSans/italic"; +import firaSans400 from "@capsizecss/metrics/firaSans/regular"; + +// Noto Sans +import notoSans500 from "@capsizecss/metrics/notoSans/500"; +import notoSans500Italic from "@capsizecss/metrics/notoSans/500italic"; +import notoSans600 from "@capsizecss/metrics/notoSans/600"; +import notoSans600Italic from "@capsizecss/metrics/notoSans/600italic"; +import notoSans400Italic from "@capsizecss/metrics/notoSans/italic"; +import notoSans400 from "@capsizecss/metrics/notoSans/regular"; + +// The ultimate sans-serif fallback: Arial +import arial700 from "@capsizecss/metrics/arial/700"; +import arial700Italic from "@capsizecss/metrics/arial/700italic"; +import arial400Italic from "@capsizecss/metrics/arial/italic"; +import arial400 from "@capsizecss/metrics/arial/regular"; + +const { fontFamily: interFontFamily, fontFaces: inter400Stack } = + createFontStack( + [ + inter400, + helveticaNeue400, + segoeUI400, + roboto400, + ubuntu400, + firaSans400, + notoSans400, + arial400, + ], + { + fontFaceProperties: { + fontStyle: "normal", + fontWeight: 400, + fontDisplay: "swap", + }, + }, + ); + +const { fontFaces: inter400ItalicStack } = createFontStack( + [ + inter400Italic, + helveticaNeue400Italic, + segoeUI400Italic, + roboto400Italic, + ubuntu400Italic, + firaSans400Italic, + notoSans400Italic, + arial400Italic, + ], + { + fontFaceProperties: { + fontStyle: "italic", + fontWeight: 400, + fontDisplay: "swap", + }, + }, +); + +const { fontFaces: inter500Stack } = createFontStack( + [ + inter500, + helveticaNeue500, + segoeUI600, + roboto500, + ubuntu500, + firaSans500, + notoSans500, + ], + { + fontFaceProperties: { + fontStyle: "normal", + fontWeight: 500, + fontDisplay: "swap", + }, + }, +); + +const { fontFaces: inter500ItalicStack } = createFontStack( + [ + inter500Italic, + helveticaNeue500Italic, + segoeUI600Italic, + roboto500Italic, + ubuntu500Italic, + firaSans500Italic, + notoSans500Italic, + ], + { + fontFaceProperties: { + fontStyle: "italic", + fontWeight: 500, + fontDisplay: "swap", + }, + }, +); + +const { fontFaces: inter600Stack } = createFontStack( + [ + inter600, + helveticaNeue700, + segoeUI700, + roboto700, + ubuntu700, + firaSans600, + notoSans600, + arial700, + ], + { + fontFaceProperties: { + fontStyle: "normal", + fontWeight: 600, + fontDisplay: "swap", + }, + }, +); + +const { fontFaces: inter600ItalicStack } = createFontStack( + [ + inter600Italic, + helveticaNeue700Italic, + segoeUI700Italic, + roboto700Italic, + ubuntu700Italic, + firaSans600Italic, + notoSans600Italic, + arial700Italic, + ], + { + fontFaceProperties: { + fontStyle: "italic", + fontWeight: 600, + fontDisplay: "swap", + }, + }, +); + +// The font token -> font-family mapping used to override +export const fontFamilyOverrides: Record = { + Inter: `${interFontFamily}, sans-serif`, + + // We don't bother to compute accurate fallbacks for the monospace font for + // now, as we don't use it as much, but we make sure we have at least a + // cross-browser fallback for it + Inconsolata: "Inconsolata, ui-monospace, monospace", +}; + +// The CSS @font-face rules to inject +export const fontFaces = `/* Fallback for Inter regular */ +${inter400Stack} + +${inter400ItalicStack} + + +/* Fallback for Inter medium */ +${inter500Stack} + +${inter500ItalicStack} + + +/* Fallback for Inter semibold */ +${inter600Stack} + +${inter600ItalicStack} +`; diff --git a/src/utils/generateCssIndex.ts b/src/utils/generateCssIndex.ts index 7ebafd0e..13ccffa5 100644 --- a/src/utils/generateCssIndex.ts +++ b/src/utils/generateCssIndex.ts @@ -17,7 +17,11 @@ limitations under the License. import path from "node:path"; import fs from "fs-extra"; import type { Theme } from "../@types"; -import { type Tier, cssFileName } from "./cssFileName"; +import { + COMPOUND_TOKENS_NAMESPACE, + type Tier, + cssFileName, +} from "./cssFileName"; const header = `/* Establish a layer order that allows semantic tokens to be customized, but not base tokens. * The layers are prefixed by 'cpd-' because Tailwind will interpret '@layer base' directives. @@ -29,6 +33,7 @@ const tiers: Tier[] = ["base", "semantic"]; export function generateCssIndex(): void { const imports = [ + `@import url("./${COMPOUND_TOKENS_NAMESPACE}-font-fallbacks.css");`, ...(function* () { for (const theme of themes) { for (const tier of tiers) { diff --git a/yarn.lock b/yarn.lock index 2d3d7ae7..6ed07b67 100644 --- a/yarn.lock +++ b/yarn.lock @@ -315,6 +315,18 @@ dependencies: postcss-calc-ast-parser "^0.1.4" +"@capsizecss/core@^4.1.2": + version "4.1.2" + resolved "https://registry.yarnpkg.com/@capsizecss/core/-/core-4.1.2.tgz#a278e19953ed4922653d2c2a7614915fd8fc5f24" + integrity sha512-5tMjLsVsaEEwJ816y3eTfhhTIyUWNFt58x6YcHni0eV5tta8MGDOAIe+CV5ICb5pguXgDpNGLprqhPqBWtkFSg== + dependencies: + csstype "^3.1.1" + +"@capsizecss/metrics@^3.3.0": + version "3.3.0" + resolved "https://registry.yarnpkg.com/@capsizecss/metrics/-/metrics-3.3.0.tgz#bbbe3df4cd5acedbb605757ae0ba440cf7ea9d17" + integrity sha512-WAQtKgyz7fZDEMuERSLPmWXuV53O/HDJZLof8BMWEX1GTWYiiNdqGA6j56+GCSSeVyzYDxkBnm5taIh0YyW6fQ== + "@esbuild/aix-ppc64@0.23.1": version "0.23.1" resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.23.1.tgz#51299374de171dbd80bb7d838e1cfce9af36f353" @@ -1031,6 +1043,11 @@ csso@^4.2.0: dependencies: css-tree "^1.1.2" +csstype@^3.1.1: + version "3.1.3" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81" + integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw== + debug@^3.2.7: version "3.2.7" resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz" From 9f4ed7f059c4cbd7390211930bbf1ac7db2d06cd Mon Sep 17 00:00:00 2001 From: Quentin Gliech Date: Mon, 21 Oct 2024 17:06:39 +0200 Subject: [PATCH 2/2] Regenerate files --- assets/web/css/compound-design-tokens.css | 1 + assets/web/css/cpd-common-base.css | 4 +- assets/web/css/cpd-font-fallbacks.css | 427 ++++++++++++++++++++++ assets/web/js/cpdDark.js | 46 +-- assets/web/js/cpdDarkHc.js | 46 +-- assets/web/js/cpdLight.js | 46 +-- assets/web/js/cpdLightHc.js | 46 +-- 7 files changed, 522 insertions(+), 94 deletions(-) create mode 100644 assets/web/css/cpd-font-fallbacks.css diff --git a/assets/web/css/compound-design-tokens.css b/assets/web/css/compound-design-tokens.css index bebe86dd..0d03c467 100644 --- a/assets/web/css/compound-design-tokens.css +++ b/assets/web/css/compound-design-tokens.css @@ -3,6 +3,7 @@ */ @layer cpd-semantic, custom, cpd-base; +@import url("./cpd-font-fallbacks.css"); @import url("./cpd-common-base.css") layer(cpd-base) screen; @import url("./cpd-common-semantic.css") layer(cpd-semantic) screen; @import url("./cpd-theme-light-base.css") layer(cpd-base) screen; diff --git a/assets/web/css/cpd-common-base.css b/assets/web/css/cpd-common-base.css index 1da64b3c..29d16b10 100644 --- a/assets/web/css/cpd-common-base.css +++ b/assets/web/css/cpd-common-base.css @@ -12,8 +12,8 @@ --cpd-border-width-2: 2px; --cpd-border-width-4: 4px; --cpd-border-width-0-5: 0.5px; - --cpd-font-family-sans: Inter; - --cpd-font-family-mono: Inconsolata; + --cpd-font-family-sans: Inter, "Inter Fallback: Helvetica Neue", "Inter Fallback: Segoe UI", "Inter Fallback: Roboto", "Inter Fallback: Ubuntu", "Inter Fallback: Fira Sans", "Inter Fallback: Noto Sans", "Inter Fallback: Arial", "Helvetica Neue", "Segoe UI", Roboto, Ubuntu, "Fira Sans", "Noto Sans", Arial, sans-serif; + --cpd-font-family-mono: Inconsolata, ui-monospace, monospace; --cpd-font-weight-regular: 400; --cpd-font-weight-medium: 500; --cpd-font-weight-semibold: 600; diff --git a/assets/web/css/cpd-font-fallbacks.css b/assets/web/css/cpd-font-fallbacks.css new file mode 100644 index 00000000..8f76a986 --- /dev/null +++ b/assets/web/css/cpd-font-fallbacks.css @@ -0,0 +1,427 @@ +/* Fallback for Inter regular */ +@font-face { + font-family: "Inter Fallback: Helvetica Neue"; + src: local('Helvetica Neue'), local('HelveticaNeue'); + font-style: normal; + font-weight: 400; + font-display: swap; + ascent-override: 91.2883%; + descent-override: 22.7301%; + line-gap-override: 0%; + size-adjust: 106.1198%; +} +@font-face { + font-family: "Inter Fallback: Segoe UI"; + src: local('Segoe UI'), local('SegoeUI'); + font-style: normal; + font-weight: 400; + font-display: swap; + ascent-override: 89.9412%; + descent-override: 22.3946%; + size-adjust: 107.7093%; +} +@font-face { + font-family: "Inter Fallback: Roboto"; + src: local('Roboto'), local('Roboto-Regular'); + font-style: normal; + font-weight: 400; + font-display: swap; + ascent-override: 90.2384%; + descent-override: 22.4686%; + size-adjust: 107.3546%; +} +@font-face { + font-family: "Inter Fallback: Ubuntu"; + src: local('Ubuntu Regular'), local('Ubuntu-Regular'); + font-style: normal; + font-weight: 400; + font-display: swap; + ascent-override: 92.3027%; + descent-override: 22.9826%; + line-gap-override: 0%; + size-adjust: 104.9536%; +} +@font-face { + font-family: "Inter Fallback: Fira Sans"; + src: local('Fira Sans Regular'), local('FiraSans-Regular'); + font-style: normal; + font-weight: 400; + font-display: swap; + ascent-override: 92.9112%; + descent-override: 23.1342%; + size-adjust: 104.2662%; +} +@font-face { + font-family: "Inter Fallback: Noto Sans"; + src: local('Noto Sans Regular'), local('NotoSans-Regular'); + font-style: normal; + font-weight: 400; + font-display: swap; + ascent-override: 96.1571%; + descent-override: 23.9423%; + size-adjust: 100.7466%; +} +@font-face { + font-family: "Inter Fallback: Arial"; + src: local('Arial'), local('ArialMT'); + font-style: normal; + font-weight: 400; + font-display: swap; + ascent-override: 90.4365%; + descent-override: 22.518%; + line-gap-override: 0%; + size-adjust: 107.1194%; +} + +@font-face { + font-family: "Inter Fallback: Helvetica Neue"; + src: local('Helvetica Neue Italic'), local('HelveticaNeue-Italic'); + font-style: italic; + font-weight: 400; + font-display: swap; + ascent-override: 90.3285%; + descent-override: 22.4911%; + line-gap-override: 0%; + size-adjust: 107.2475%; +} +@font-face { + font-family: "Inter Fallback: Segoe UI"; + src: local('Segoe UI Italic'), local('SegoeUI-Italic'); + font-style: italic; + font-weight: 400; + font-display: swap; + ascent-override: 87.4238%; + descent-override: 21.7678%; + size-adjust: 110.8108%; +} +@font-face { + font-family: "Inter Fallback: Roboto"; + src: local('Roboto Italic'), local('Roboto-Italic'); + font-style: italic; + font-weight: 400; + font-display: swap; + ascent-override: 87.916%; + descent-override: 21.8904%; + size-adjust: 110.1904%; +} +@font-face { + font-family: "Inter Fallback: Ubuntu"; + src: local('Ubuntu Italic'), local('Ubuntu-Italic'); + font-style: italic; + font-weight: 400; + font-display: swap; + ascent-override: 88.7154%; + descent-override: 22.0894%; + line-gap-override: 0%; + size-adjust: 109.1974%; +} +@font-face { + font-family: "Inter Fallback: Fira Sans"; + src: local('Fira Sans Italic'), local('FiraSans-Italic'); + font-style: italic; + font-weight: 400; + font-display: swap; + ascent-override: 91.3366%; + descent-override: 22.7421%; + size-adjust: 106.0637%; +} +@font-face { + font-family: "Inter Fallback: Noto Sans"; + src: local('Noto Sans Italic'), local('NotoSans-Italic'); + font-style: italic; + font-weight: 400; + font-display: swap; + ascent-override: 90.1268%; + descent-override: 22.4409%; + size-adjust: 107.4874%; +} +@font-face { + font-family: "Inter Fallback: Arial"; + src: local('Arial Italic'), local('Arial-ItalicMT'); + font-style: italic; + font-weight: 400; + font-display: swap; + ascent-override: 89.885%; + descent-override: 22.3806%; + line-gap-override: 0%; + size-adjust: 107.7766%; +} + + +/* Fallback for Inter medium */ +@font-face { + font-family: "Inter Fallback: Helvetica Neue"; + src: local('Helvetica Neue Medium'), local('HelveticaNeue-Medium'); + font-style: normal; + font-weight: 500; + font-display: swap; + ascent-override: 93.3765%; + descent-override: 23.25%; + line-gap-override: 0%; + size-adjust: 103.7466%; +} +@font-face { + font-family: "Inter Fallback: Segoe UI"; + src: local('Segoe UI Semibold'), local('SegoeUI-Semibold'); + font-style: normal; + font-weight: 500; + font-display: swap; + ascent-override: 91.8744%; + descent-override: 22.876%; + size-adjust: 105.4429%; +} +@font-face { + font-family: "Inter Fallback: Roboto"; + src: local('Roboto Medium'), local('Roboto-Medium'); + font-style: normal; + font-weight: 500; + font-display: swap; + ascent-override: 90.2075%; + descent-override: 22.4609%; + size-adjust: 107.3913%; +} +@font-face { + font-family: "Inter Fallback: Ubuntu"; + src: local('Ubuntu Medium'), local('Ubuntu-Medium'); + font-style: normal; + font-weight: 500; + font-display: swap; + ascent-override: 93.5773%; + descent-override: 23.3%; + line-gap-override: 0%; + size-adjust: 103.524%; +} +@font-face { + font-family: "Inter Fallback: Fira Sans"; + src: local('Fira Sans Medium'), local('FiraSans-Medium'); + font-style: normal; + font-weight: 500; + font-display: swap; + ascent-override: 92.1717%; + descent-override: 22.95%; + size-adjust: 105.1028%; +} +@font-face { + font-family: "Inter Fallback: Noto Sans"; + src: local('Noto Sans Medium'), local('NotoSans-Medium'); + font-style: normal; + font-weight: 500; + font-display: swap; + ascent-override: 96.9911%; + descent-override: 24.15%; + size-adjust: 99.8803%; +} + +@font-face { + font-family: "Inter Fallback: Helvetica Neue"; + src: local('Helvetica Neue Medium Italic'), local('HelveticaNeue-MediumItalic'); + font-style: italic; + font-weight: 500; + font-display: swap; + ascent-override: 92.8129%; + descent-override: 23.1097%; + line-gap-override: 0%; + size-adjust: 104.3767%; +} +@font-face { + font-family: "Inter Fallback: Segoe UI"; + src: local('Segoe UI Semibold Italic'), local('SegoeUI-SemiboldItalic'); + font-style: italic; + font-weight: 500; + font-display: swap; + ascent-override: 90.3452%; + descent-override: 22.4952%; + line-gap-override: 0%; + size-adjust: 107.2276%; +} +@font-face { + font-family: "Inter Fallback: Roboto"; + src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'); + font-style: italic; + font-weight: 500; + font-display: swap; + ascent-override: 87.9087%; + descent-override: 21.8886%; + size-adjust: 110.1996%; +} +@font-face { + font-family: "Inter Fallback: Ubuntu"; + src: local('Ubuntu Medium Italic'), local('Ubuntu-MediumItalic'); + font-style: italic; + font-weight: 500; + font-display: swap; + ascent-override: 90.6173%; + descent-override: 22.563%; + line-gap-override: 0%; + size-adjust: 106.9056%; +} +@font-face { + font-family: "Inter Fallback: Fira Sans"; + src: local('Fira Sans Medium Italic'), local('FiraSans-MediumItalic'); + font-style: italic; + font-weight: 500; + font-display: swap; + ascent-override: 90.2181%; + descent-override: 22.4636%; + size-adjust: 107.3787%; +} +@font-face { + font-family: "Inter Fallback: Noto Sans"; + src: local('Noto Sans Medium Italic'), local('NotoSans-MediumItalic'); + font-style: italic; + font-weight: 500; + font-display: swap; + ascent-override: 91.0165%; + descent-override: 22.6624%; + size-adjust: 106.4367%; +} + + +/* Fallback for Inter semibold */ +@font-face { + font-family: "Inter Fallback: Helvetica Neue"; + src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'); + font-style: normal; + font-weight: 600; + font-display: swap; + ascent-override: 95.4228%; + descent-override: 23.7595%; + line-gap-override: 0%; + size-adjust: 101.5218%; +} +@font-face { + font-family: "Inter Fallback: Segoe UI"; + src: local('Segoe UI Bold'), local('SegoeUI-Bold'); + font-style: normal; + font-weight: 600; + font-display: swap; + ascent-override: 94.4483%; + descent-override: 23.5169%; + size-adjust: 102.5694%; +} +@font-face { + font-family: "Inter Fallback: Roboto"; + src: local('Roboto Bold'), local('Roboto-Bold'); + font-style: normal; + font-weight: 600; + font-display: swap; + ascent-override: 89.886%; + descent-override: 22.3809%; + size-adjust: 107.7754%; +} +@font-face { + font-family: "Inter Fallback: Ubuntu"; + src: local('Ubuntu Bold'), local('Ubuntu-Bold'); + font-style: normal; + font-weight: 600; + font-display: swap; + ascent-override: 95.4228%; + descent-override: 23.7595%; + line-gap-override: 0%; + size-adjust: 101.5218%; +} +@font-face { + font-family: "Inter Fallback: Fira Sans"; + src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold'); + font-style: normal; + font-weight: 600; + font-display: swap; + ascent-override: 91.2481%; + descent-override: 22.72%; + size-adjust: 106.1666%; +} +@font-face { + font-family: "Inter Fallback: Noto Sans"; + src: local('Noto Sans SemiBold'), local('NotoSans-SemiBold'); + font-style: normal; + font-weight: 600; + font-display: swap; + ascent-override: 98.0072%; + descent-override: 24.403%; + size-adjust: 98.8448%; +} +@font-face { + font-family: "Inter Fallback: Arial"; + src: local('Arial Bold'), local('Arial-BoldMT'); + font-style: normal; + font-weight: 600; + font-display: swap; + ascent-override: 95.419%; + descent-override: 23.7586%; + line-gap-override: 0%; + size-adjust: 101.5259%; +} + +@font-face { + font-family: "Inter Fallback: Helvetica Neue"; + src: local('Helvetica Neue Bold Italic'), local('HelveticaNeue-BoldItalic'); + font-style: italic; + font-weight: 600; + font-display: swap; + ascent-override: 94.9556%; + descent-override: 23.6432%; + line-gap-override: 0%; + size-adjust: 102.0213%; +} +@font-face { + font-family: "Inter Fallback: Segoe UI"; + src: local('Segoe UI Bold Italic'), local('SegoeUI-BoldItalic'); + font-style: italic; + font-weight: 600; + font-display: swap; + ascent-override: 93.4049%; + descent-override: 23.2571%; + size-adjust: 103.7152%; +} +@font-face { + font-family: "Inter Fallback: Roboto"; + src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'); + font-style: italic; + font-weight: 600; + font-display: swap; + ascent-override: 87.6213%; + descent-override: 21.817%; + size-adjust: 110.5611%; +} +@font-face { + font-family: "Inter Fallback: Ubuntu"; + src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'); + font-style: italic; + font-weight: 600; + font-display: swap; + ascent-override: 92.3893%; + descent-override: 23.0042%; + line-gap-override: 0%; + size-adjust: 104.8553%; +} +@font-face { + font-family: "Inter Fallback: Fira Sans"; + src: local('Fira Sans SemiBold Italic'), local('FiraSans-SemiBoldItalic'); + font-style: italic; + font-weight: 600; + font-display: swap; + ascent-override: 89.2306%; + descent-override: 22.2177%; + size-adjust: 108.567%; +} +@font-face { + font-family: "Inter Fallback: Noto Sans"; + src: local('Noto Sans SemiBold Italic'), local('NotoSans-SemiBoldItalic'); + font-style: italic; + font-weight: 600; + font-display: swap; + ascent-override: 91.9944%; + descent-override: 22.9059%; + size-adjust: 105.3053%; +} +@font-face { + font-family: "Inter Fallback: Arial"; + src: local('Arial Bold Italic'), local('Arial-BoldItalicMT'); + font-style: italic; + font-weight: 600; + font-display: swap; + ascent-override: 94.7544%; + descent-override: 23.5931%; + line-gap-override: 0%; + size-adjust: 102.238%; +} diff --git a/assets/web/js/cpdDark.js b/assets/web/js/cpdDark.js index fb119b2d..97129e6f 100644 --- a/assets/web/js/cpdDark.js +++ b/assets/web/js/cpdDark.js @@ -31,8 +31,8 @@ export const cpdBorderWidth1 = "1px"; export const cpdBorderWidth2 = "2px"; export const cpdBorderWidth4 = "4px"; export const cpdBorderWidth0_5 = "0.5px"; -export const cpdFontFamilySans = "Inter"; -export const cpdFontFamilyMono = "Inconsolata"; +export const cpdFontFamilySans = "Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontFamilyMono = "Inconsolata, ui-monospace, monospace"; export const cpdFontWeightRegular = "400"; export const cpdFontWeightMedium = "500"; export const cpdFontWeightSemibold = "600"; @@ -56,27 +56,27 @@ export const cpdFontLetterSpacingHeadingSm = "-0.0166em"; export const cpdFontLetterSpacingHeadingMd = "-0.0195em"; export const cpdFontLetterSpacingHeadingLg = "-0.0209em"; export const cpdFontLetterSpacingHeadingXl = "-0.0216em"; -export const cpdFontBodyXsRegular = "400 0.6875rem/1.5 Inter"; -export const cpdFontBodyXsMedium = "500 0.6875rem/1.5 Inter"; -export const cpdFontBodyXsSemibold = "600 0.6875rem/1.5 Inter"; -export const cpdFontBodySmRegular = "400 0.8125rem/1.5 Inter"; -export const cpdFontBodySmMedium = "500 0.8125rem/1.5 Inter"; -export const cpdFontBodySmSemibold = "600 0.8125rem/1.5 Inter"; -export const cpdFontBodyMdRegular = "400 0.9375rem/1.5 Inter"; -export const cpdFontBodyMdMedium = "500 0.9375rem/1.5 Inter"; -export const cpdFontBodyMdSemibold = "600 0.9375rem/1.5 Inter"; -export const cpdFontBodyLgRegular = "400 1.0625rem/1.5 Inter"; -export const cpdFontBodyLgMedium = "500 1.0625rem/1.5 Inter"; -export const cpdFontBodyLgSemibold = "600 1.0625rem/1.5 Inter"; -export const cpdFontHeadingSmRegular = "400 1.25rem/1.25 Inter"; -export const cpdFontHeadingSmMedium = "500 1.25rem/1.25 Inter"; -export const cpdFontHeadingSmSemibold = "600 1.25rem/1.25 Inter"; -export const cpdFontHeadingMdRegular = "400 1.5rem/1.25 Inter"; -export const cpdFontHeadingMdSemibold = "600 1.5rem/1.25 Inter"; -export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter"; -export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter"; -export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter"; -export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter"; +export const cpdFontBodyXsRegular = "400 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyXsMedium = "500 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyXsSemibold = "600 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmRegular = "400 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmMedium = "500 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmSemibold = "600 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdRegular = "400 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdMedium = "500 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdSemibold = "600 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgRegular = "400 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgMedium = "500 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgSemibold = "600 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmRegular = "400 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmMedium = "500 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmSemibold = "600 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingMdRegular = "400 1.5rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingMdSemibold = "600 1.5rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; export const cpdIconAdmin = "icons/admin.svg"; export const cpdIconArrowDown = "icons/arrow-down.svg"; export const cpdIconArrowLeft = "icons/arrow-left.svg"; diff --git a/assets/web/js/cpdDarkHc.js b/assets/web/js/cpdDarkHc.js index de7653fe..115cedd8 100644 --- a/assets/web/js/cpdDarkHc.js +++ b/assets/web/js/cpdDarkHc.js @@ -31,8 +31,8 @@ export const cpdBorderWidth1 = "1px"; export const cpdBorderWidth2 = "2px"; export const cpdBorderWidth4 = "4px"; export const cpdBorderWidth0_5 = "0.5px"; -export const cpdFontFamilySans = "Inter"; -export const cpdFontFamilyMono = "Inconsolata"; +export const cpdFontFamilySans = "Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontFamilyMono = "Inconsolata, ui-monospace, monospace"; export const cpdFontWeightRegular = "400"; export const cpdFontWeightMedium = "500"; export const cpdFontWeightSemibold = "600"; @@ -56,27 +56,27 @@ export const cpdFontLetterSpacingHeadingSm = "-0.0166em"; export const cpdFontLetterSpacingHeadingMd = "-0.0195em"; export const cpdFontLetterSpacingHeadingLg = "-0.0209em"; export const cpdFontLetterSpacingHeadingXl = "-0.0216em"; -export const cpdFontBodyXsRegular = "400 0.6875rem/1.5 Inter"; -export const cpdFontBodyXsMedium = "500 0.6875rem/1.5 Inter"; -export const cpdFontBodyXsSemibold = "600 0.6875rem/1.5 Inter"; -export const cpdFontBodySmRegular = "400 0.8125rem/1.5 Inter"; -export const cpdFontBodySmMedium = "500 0.8125rem/1.5 Inter"; -export const cpdFontBodySmSemibold = "600 0.8125rem/1.5 Inter"; -export const cpdFontBodyMdRegular = "400 0.9375rem/1.5 Inter"; -export const cpdFontBodyMdMedium = "500 0.9375rem/1.5 Inter"; -export const cpdFontBodyMdSemibold = "600 0.9375rem/1.5 Inter"; -export const cpdFontBodyLgRegular = "400 1.0625rem/1.5 Inter"; -export const cpdFontBodyLgMedium = "500 1.0625rem/1.5 Inter"; -export const cpdFontBodyLgSemibold = "600 1.0625rem/1.5 Inter"; -export const cpdFontHeadingSmRegular = "400 1.25rem/1.25 Inter"; -export const cpdFontHeadingSmMedium = "500 1.25rem/1.25 Inter"; -export const cpdFontHeadingSmSemibold = "600 1.25rem/1.25 Inter"; -export const cpdFontHeadingMdRegular = "400 1.5rem/1.25 Inter"; -export const cpdFontHeadingMdSemibold = "600 1.5rem/1.25 Inter"; -export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter"; -export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter"; -export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter"; -export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter"; +export const cpdFontBodyXsRegular = "400 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyXsMedium = "500 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyXsSemibold = "600 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmRegular = "400 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmMedium = "500 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmSemibold = "600 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdRegular = "400 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdMedium = "500 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdSemibold = "600 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgRegular = "400 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgMedium = "500 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgSemibold = "600 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmRegular = "400 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmMedium = "500 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmSemibold = "600 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingMdRegular = "400 1.5rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingMdSemibold = "600 1.5rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; export const cpdIconAdmin = "icons/admin.svg"; export const cpdIconArrowDown = "icons/arrow-down.svg"; export const cpdIconArrowLeft = "icons/arrow-left.svg"; diff --git a/assets/web/js/cpdLight.js b/assets/web/js/cpdLight.js index b378b743..c189c0b5 100644 --- a/assets/web/js/cpdLight.js +++ b/assets/web/js/cpdLight.js @@ -31,8 +31,8 @@ export const cpdBorderWidth1 = "1px"; export const cpdBorderWidth2 = "2px"; export const cpdBorderWidth4 = "4px"; export const cpdBorderWidth0_5 = "0.5px"; -export const cpdFontFamilySans = "Inter"; -export const cpdFontFamilyMono = "Inconsolata"; +export const cpdFontFamilySans = "Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontFamilyMono = "Inconsolata, ui-monospace, monospace"; export const cpdFontWeightRegular = "400"; export const cpdFontWeightMedium = "500"; export const cpdFontWeightSemibold = "600"; @@ -56,27 +56,27 @@ export const cpdFontLetterSpacingHeadingSm = "-0.0166em"; export const cpdFontLetterSpacingHeadingMd = "-0.0195em"; export const cpdFontLetterSpacingHeadingLg = "-0.0209em"; export const cpdFontLetterSpacingHeadingXl = "-0.0216em"; -export const cpdFontBodyXsRegular = "400 0.6875rem/1.5 Inter"; -export const cpdFontBodyXsMedium = "500 0.6875rem/1.5 Inter"; -export const cpdFontBodyXsSemibold = "600 0.6875rem/1.5 Inter"; -export const cpdFontBodySmRegular = "400 0.8125rem/1.5 Inter"; -export const cpdFontBodySmMedium = "500 0.8125rem/1.5 Inter"; -export const cpdFontBodySmSemibold = "600 0.8125rem/1.5 Inter"; -export const cpdFontBodyMdRegular = "400 0.9375rem/1.5 Inter"; -export const cpdFontBodyMdMedium = "500 0.9375rem/1.5 Inter"; -export const cpdFontBodyMdSemibold = "600 0.9375rem/1.5 Inter"; -export const cpdFontBodyLgRegular = "400 1.0625rem/1.5 Inter"; -export const cpdFontBodyLgMedium = "500 1.0625rem/1.5 Inter"; -export const cpdFontBodyLgSemibold = "600 1.0625rem/1.5 Inter"; -export const cpdFontHeadingSmRegular = "400 1.25rem/1.25 Inter"; -export const cpdFontHeadingSmMedium = "500 1.25rem/1.25 Inter"; -export const cpdFontHeadingSmSemibold = "600 1.25rem/1.25 Inter"; -export const cpdFontHeadingMdRegular = "400 1.5rem/1.25 Inter"; -export const cpdFontHeadingMdSemibold = "600 1.5rem/1.25 Inter"; -export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter"; -export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter"; -export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter"; -export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter"; +export const cpdFontBodyXsRegular = "400 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyXsMedium = "500 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyXsSemibold = "600 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmRegular = "400 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmMedium = "500 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmSemibold = "600 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdRegular = "400 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdMedium = "500 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdSemibold = "600 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgRegular = "400 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgMedium = "500 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgSemibold = "600 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmRegular = "400 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmMedium = "500 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmSemibold = "600 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingMdRegular = "400 1.5rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingMdSemibold = "600 1.5rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; export const cpdIconAdmin = "icons/admin.svg"; export const cpdIconArrowDown = "icons/arrow-down.svg"; export const cpdIconArrowLeft = "icons/arrow-left.svg"; diff --git a/assets/web/js/cpdLightHc.js b/assets/web/js/cpdLightHc.js index 76b7b302..f578343a 100644 --- a/assets/web/js/cpdLightHc.js +++ b/assets/web/js/cpdLightHc.js @@ -31,8 +31,8 @@ export const cpdBorderWidth1 = "1px"; export const cpdBorderWidth2 = "2px"; export const cpdBorderWidth4 = "4px"; export const cpdBorderWidth0_5 = "0.5px"; -export const cpdFontFamilySans = "Inter"; -export const cpdFontFamilyMono = "Inconsolata"; +export const cpdFontFamilySans = "Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontFamilyMono = "Inconsolata, ui-monospace, monospace"; export const cpdFontWeightRegular = "400"; export const cpdFontWeightMedium = "500"; export const cpdFontWeightSemibold = "600"; @@ -56,27 +56,27 @@ export const cpdFontLetterSpacingHeadingSm = "-0.0166em"; export const cpdFontLetterSpacingHeadingMd = "-0.0195em"; export const cpdFontLetterSpacingHeadingLg = "-0.0209em"; export const cpdFontLetterSpacingHeadingXl = "-0.0216em"; -export const cpdFontBodyXsRegular = "400 0.6875rem/1.5 Inter"; -export const cpdFontBodyXsMedium = "500 0.6875rem/1.5 Inter"; -export const cpdFontBodyXsSemibold = "600 0.6875rem/1.5 Inter"; -export const cpdFontBodySmRegular = "400 0.8125rem/1.5 Inter"; -export const cpdFontBodySmMedium = "500 0.8125rem/1.5 Inter"; -export const cpdFontBodySmSemibold = "600 0.8125rem/1.5 Inter"; -export const cpdFontBodyMdRegular = "400 0.9375rem/1.5 Inter"; -export const cpdFontBodyMdMedium = "500 0.9375rem/1.5 Inter"; -export const cpdFontBodyMdSemibold = "600 0.9375rem/1.5 Inter"; -export const cpdFontBodyLgRegular = "400 1.0625rem/1.5 Inter"; -export const cpdFontBodyLgMedium = "500 1.0625rem/1.5 Inter"; -export const cpdFontBodyLgSemibold = "600 1.0625rem/1.5 Inter"; -export const cpdFontHeadingSmRegular = "400 1.25rem/1.25 Inter"; -export const cpdFontHeadingSmMedium = "500 1.25rem/1.25 Inter"; -export const cpdFontHeadingSmSemibold = "600 1.25rem/1.25 Inter"; -export const cpdFontHeadingMdRegular = "400 1.5rem/1.25 Inter"; -export const cpdFontHeadingMdSemibold = "600 1.5rem/1.25 Inter"; -export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter"; -export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter"; -export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter"; -export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter"; +export const cpdFontBodyXsRegular = "400 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyXsMedium = "500 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyXsSemibold = "600 0.6875rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmRegular = "400 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmMedium = "500 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodySmSemibold = "600 0.8125rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdRegular = "400 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdMedium = "500 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyMdSemibold = "600 0.9375rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgRegular = "400 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgMedium = "500 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontBodyLgSemibold = "600 1.0625rem/1.5 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmRegular = "400 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmMedium = "500 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingSmSemibold = "600 1.25rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingMdRegular = "400 1.5rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingMdSemibold = "600 1.5rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingLgRegular = "400 1.75rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingLgSemibold = "600 1.75rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingXlRegular = "400 2rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; +export const cpdFontHeadingXlSemibold = "600 2rem/1.25 Inter, \"Inter Fallback: Helvetica Neue\", \"Inter Fallback: Segoe UI\", \"Inter Fallback: Roboto\", \"Inter Fallback: Ubuntu\", \"Inter Fallback: Fira Sans\", \"Inter Fallback: Noto Sans\", \"Inter Fallback: Arial\", \"Helvetica Neue\", \"Segoe UI\", Roboto, Ubuntu, \"Fira Sans\", \"Noto Sans\", Arial, sans-serif"; export const cpdIconAdmin = "icons/admin.svg"; export const cpdIconArrowDown = "icons/arrow-down.svg"; export const cpdIconArrowLeft = "icons/arrow-left.svg";