From a63968a6e48ea7d853c9748e12d3e7e9320bc7f5 Mon Sep 17 00:00:00 2001 From: Krivonos Aleksandr Date: Tue, 7 Nov 2023 05:16:49 +0300 Subject: [PATCH] feat(plasma-typo): add font family fallback for asdk --- .../plasma-tokens/data/legacyThemes/index.js | 36 +++++++++---------- packages/plasma-tokens/src/typo/mobile.ts | 36 +++++++++---------- packages/plasma-tokens/src/typo/sberBox.ts | 36 +++++++++---------- packages/plasma-tokens/src/typo/sberPortal.ts | 36 +++++++++---------- .../plasma-tokens/src/typography/body1.ts | 2 +- .../plasma-tokens/src/typography/body2.ts | 2 +- .../plasma-tokens/src/typography/body3.ts | 2 +- .../plasma-tokens/src/typography/button1.ts | 2 +- .../plasma-tokens/src/typography/button2.ts | 2 +- .../plasma-tokens/src/typography/caption.ts | 2 +- .../plasma-tokens/src/typography/display1.ts | 2 +- .../plasma-tokens/src/typography/display2.ts | 2 +- .../plasma-tokens/src/typography/display3.ts | 2 +- .../plasma-tokens/src/typography/footnote1.ts | 2 +- .../plasma-tokens/src/typography/footnote2.ts | 2 +- .../plasma-tokens/src/typography/headline1.ts | 2 +- .../plasma-tokens/src/typography/headline2.ts | 2 +- .../plasma-tokens/src/typography/headline3.ts | 2 +- .../plasma-tokens/src/typography/headline4.ts | 2 +- .../src/typography/paragraph1.ts | 2 +- .../src/typography/paragraph2.ts | 2 +- .../plasma-tokens/src/typography/underline.ts | 2 +- .../src/typographyValues/fonts.ts | 8 ++--- packages/plasma-typo/src/helpers.ts | 8 +++-- 24 files changed, 100 insertions(+), 96 deletions(-) diff --git a/packages/plasma-tokens/data/legacyThemes/index.js b/packages/plasma-tokens/data/legacyThemes/index.js index be62fbefa1..bb0e013965 100644 --- a/packages/plasma-tokens/data/legacyThemes/index.js +++ b/packages/plasma-tokens/data/legacyThemes/index.js @@ -920,7 +920,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Medium.otf', type: 'font' }, name: 'SBSansText-Medium', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -935,7 +935,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Medium.otf', type: 'font' }, name: 'SBSansText-Medium', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -950,7 +950,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Medium.otf', type: 'font' }, name: 'SBSansText-Medium', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -965,7 +965,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Bold.otf', type: 'font' }, name: 'SBSansText-Bold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -980,7 +980,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Semibold.otf', type: 'font' }, name: 'SBSansText-Semibold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -995,7 +995,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Semibold.otf', type: 'font' }, name: 'SBSansText-Semibold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1010,7 +1010,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Bold.otf', type: 'font' }, name: 'SBSansText-Bold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1025,7 +1025,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Medium.otf', type: 'font' }, name: 'SBSansText-Medium', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1040,7 +1040,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Semibold.otf', type: 'font' }, name: 'SBSansText-Semibold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1055,7 +1055,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Bold.otf', type: 'font' }, name: 'SBSansText-Bold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1070,7 +1070,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Regular.otf', type: 'font' }, name: 'SBSansText-Regular', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1085,7 +1085,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Semibold.otf', type: 'font' }, name: 'SBSansText-Semibold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1100,7 +1100,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Medium.otf', type: 'font' }, name: 'SBSansText-Medium', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1115,7 +1115,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Semibold.otf', type: 'font' }, name: 'SBSansText-Semibold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1130,7 +1130,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Semibold.otf', type: 'font' }, name: 'SBSansText-Semibold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1145,7 +1145,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Semibold.otf', type: 'font' }, name: 'SBSansText-Semibold', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1160,7 +1160,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Medium.otf', type: 'font' }, name: 'SBSansText-Medium', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, @@ -1175,7 +1175,7 @@ class Typography { font: { file: { src: 'assets/PlasmaStyles.figma.contents/fonts/SBSansText-Medium.otf', type: 'font' }, name: 'SBSansText-Medium', - fallbacks: ['Helvetica', 'Arial', 'sans-serif'], + fallbacks: ['SBSansText', 'Helvetica', 'Arial', 'sans-serif'], weight: 400, style: 'normal', }, diff --git a/packages/plasma-tokens/src/typo/mobile.ts b/packages/plasma-tokens/src/typo/mobile.ts index 149600a95d..2a4c180c80 100644 --- a/packages/plasma-tokens/src/typo/mobile.ts +++ b/packages/plasma-tokens/src/typo/mobile.ts @@ -2,109 +2,109 @@ export const mobile = { ':root': { - '--plasma-typo-display1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-display1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-display1-fontWeight': '500', '--plasma-typo-display1-fontStyle': 'normal', '--plasma-typo-display1-fontSize': '6rem', '--plasma-typo-display1-letterSpacing': '-0.0190em', '--plasma-typo-display1-lineHeight': '6rem', - '--plasma-typo-display2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-display2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-display2-fontWeight': '500', '--plasma-typo-display2-fontStyle': 'normal', '--plasma-typo-display2-fontSize': '3.75rem', '--plasma-typo-display2-letterSpacing': '-0.0190em', '--plasma-typo-display2-lineHeight': '4rem', - '--plasma-typo-display3-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-display3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-display3-fontWeight': '500', '--plasma-typo-display3-fontStyle': 'normal', '--plasma-typo-display3-fontSize': '3rem', '--plasma-typo-display3-letterSpacing': 'normal', '--plasma-typo-display3-lineHeight': '3.25rem', - '--plasma-typo-headline1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline1-fontWeight': '700', '--plasma-typo-headline1-fontStyle': 'normal', '--plasma-typo-headline1-fontSize': '2rem', '--plasma-typo-headline1-letterSpacing': '-0.0110em', '--plasma-typo-headline1-lineHeight': '2.25rem', - '--plasma-typo-headline2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline2-fontWeight': '600', '--plasma-typo-headline2-fontStyle': 'normal', '--plasma-typo-headline2-fontSize': '1.5rem', '--plasma-typo-headline2-letterSpacing': '-0.0220em', '--plasma-typo-headline2-lineHeight': '1.75rem', - '--plasma-typo-headline3-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline3-fontWeight': '600', '--plasma-typo-headline3-fontStyle': 'normal', '--plasma-typo-headline3-fontSize': '1.25rem', '--plasma-typo-headline3-letterSpacing': '-0.0250em', '--plasma-typo-headline3-lineHeight': '1.5rem', - '--plasma-typo-headline4-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline4-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline4-fontWeight': '700', '--plasma-typo-headline4-fontStyle': 'normal', '--plasma-typo-headline4-fontSize': '1.25rem', '--plasma-typo-headline4-letterSpacing': '-0.0250em', '--plasma-typo-headline4-lineHeight': '1.5rem', - '--plasma-typo-body1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-body1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-body1-fontWeight': '500', '--plasma-typo-body1-fontStyle': 'normal', '--plasma-typo-body1-fontSize': '1rem', '--plasma-typo-body1-letterSpacing': '-0.0190em', '--plasma-typo-body1-lineHeight': '1.25rem', - '--plasma-typo-body2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-body2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-body2-fontWeight': '600', '--plasma-typo-body2-fontStyle': 'normal', '--plasma-typo-body2-fontSize': '1rem', '--plasma-typo-body2-letterSpacing': '-0.0190em', '--plasma-typo-body2-lineHeight': '1.25rem', - '--plasma-typo-body3-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-body3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-body3-fontWeight': '700', '--plasma-typo-body3-fontStyle': 'normal', '--plasma-typo-body3-fontSize': '1rem', '--plasma-typo-body3-letterSpacing': '-0.0190em', '--plasma-typo-body3-lineHeight': '1.25rem', - '--plasma-typo-paragraph1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-paragraph1-fontWeight': '400', '--plasma-typo-paragraph1-fontStyle': 'normal', '--plasma-typo-paragraph1-fontSize': '1rem', '--plasma-typo-paragraph1-letterSpacing': '-0.0190em', '--plasma-typo-paragraph1-lineHeight': '1.375rem', - '--plasma-typo-paragraph2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-paragraph2-fontWeight': '600', '--plasma-typo-paragraph2-fontStyle': 'normal', '--plasma-typo-paragraph2-fontSize': '1rem', '--plasma-typo-paragraph2-letterSpacing': '-0.0190em', '--plasma-typo-paragraph2-lineHeight': '1.375rem', - '--plasma-typo-footnote1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-footnote1-fontWeight': '500', '--plasma-typo-footnote1-fontStyle': 'normal', '--plasma-typo-footnote1-fontSize': '0.875rem', '--plasma-typo-footnote1-letterSpacing': '-0.0190em', '--plasma-typo-footnote1-lineHeight': '1.125rem', - '--plasma-typo-footnote2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-footnote2-fontWeight': '600', '--plasma-typo-footnote2-fontStyle': 'normal', '--plasma-typo-footnote2-fontSize': '0.875rem', '--plasma-typo-footnote2-letterSpacing': '-0.0190em', '--plasma-typo-footnote2-lineHeight': '1.125rem', - '--plasma-typo-button1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-button1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-button1-fontWeight': '600', '--plasma-typo-button1-fontStyle': 'normal', '--plasma-typo-button1-fontSize': '1rem', '--plasma-typo-button1-letterSpacing': 'normal', '--plasma-typo-button1-lineHeight': '1.25rem', - '--plasma-typo-button2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-button2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-button2-fontWeight': '600', '--plasma-typo-button2-fontStyle': 'normal', '--plasma-typo-button2-fontSize': '0.875rem', '--plasma-typo-button2-letterSpacing': 'normal', '--plasma-typo-button2-lineHeight': '1rem', - '--plasma-typo-caption-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-caption-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-caption-fontWeight': '500', '--plasma-typo-caption-fontStyle': 'normal', '--plasma-typo-caption-fontSize': '0.75rem', '--plasma-typo-caption-letterSpacing': '-0.0220em', '--plasma-typo-caption-lineHeight': '1rem', - '--plasma-typo-underline-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-underline-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-underline-fontWeight': '500', '--plasma-typo-underline-fontStyle': 'normal', '--plasma-typo-underline-fontSize': '0.625rem', diff --git a/packages/plasma-tokens/src/typo/sberBox.ts b/packages/plasma-tokens/src/typo/sberBox.ts index a4bbb3adc5..7f03ee7818 100644 --- a/packages/plasma-tokens/src/typo/sberBox.ts +++ b/packages/plasma-tokens/src/typo/sberBox.ts @@ -2,109 +2,109 @@ export const sberBox = { ':root': { - '--plasma-typo-display1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-display1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-display1-fontWeight': '500', '--plasma-typo-display1-fontStyle': 'normal', '--plasma-typo-display1-fontSize': '6rem', '--plasma-typo-display1-letterSpacing': '-0.0190em', '--plasma-typo-display1-lineHeight': '6rem', - '--plasma-typo-display2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-display2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-display2-fontWeight': '500', '--plasma-typo-display2-fontStyle': 'normal', '--plasma-typo-display2-fontSize': '3.75rem', '--plasma-typo-display2-letterSpacing': '-0.0190em', '--plasma-typo-display2-lineHeight': '4rem', - '--plasma-typo-display3-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-display3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-display3-fontWeight': '500', '--plasma-typo-display3-fontStyle': 'normal', '--plasma-typo-display3-fontSize': '3rem', '--plasma-typo-display3-letterSpacing': 'normal', '--plasma-typo-display3-lineHeight': '3.25rem', - '--plasma-typo-headline1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline1-fontWeight': '700', '--plasma-typo-headline1-fontStyle': 'normal', '--plasma-typo-headline1-fontSize': '2rem', '--plasma-typo-headline1-letterSpacing': '-0.0110em', '--plasma-typo-headline1-lineHeight': '2.25rem', - '--plasma-typo-headline2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline2-fontWeight': '600', '--plasma-typo-headline2-fontStyle': 'normal', '--plasma-typo-headline2-fontSize': '1.5rem', '--plasma-typo-headline2-letterSpacing': '-0.0220em', '--plasma-typo-headline2-lineHeight': '1.75rem', - '--plasma-typo-headline3-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline3-fontWeight': '600', '--plasma-typo-headline3-fontStyle': 'normal', '--plasma-typo-headline3-fontSize': '1.25rem', '--plasma-typo-headline3-letterSpacing': '-0.0250em', '--plasma-typo-headline3-lineHeight': '1.5rem', - '--plasma-typo-headline4-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline4-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline4-fontWeight': '700', '--plasma-typo-headline4-fontStyle': 'normal', '--plasma-typo-headline4-fontSize': '1.25rem', '--plasma-typo-headline4-letterSpacing': '-0.0250em', '--plasma-typo-headline4-lineHeight': '1.5rem', - '--plasma-typo-body1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-body1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-body1-fontWeight': '500', '--plasma-typo-body1-fontStyle': 'normal', '--plasma-typo-body1-fontSize': '1rem', '--plasma-typo-body1-letterSpacing': '-0.0190em', '--plasma-typo-body1-lineHeight': '1.25rem', - '--plasma-typo-body2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-body2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-body2-fontWeight': '600', '--plasma-typo-body2-fontStyle': 'normal', '--plasma-typo-body2-fontSize': '1rem', '--plasma-typo-body2-letterSpacing': '-0.0190em', '--plasma-typo-body2-lineHeight': '1.25rem', - '--plasma-typo-body3-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-body3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-body3-fontWeight': '700', '--plasma-typo-body3-fontStyle': 'normal', '--plasma-typo-body3-fontSize': '1rem', '--plasma-typo-body3-letterSpacing': '-0.0190em', '--plasma-typo-body3-lineHeight': '1.25rem', - '--plasma-typo-paragraph1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-paragraph1-fontWeight': '400', '--plasma-typo-paragraph1-fontStyle': 'normal', '--plasma-typo-paragraph1-fontSize': '1rem', '--plasma-typo-paragraph1-letterSpacing': '-0.0190em', '--plasma-typo-paragraph1-lineHeight': '1.375rem', - '--plasma-typo-paragraph2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-paragraph2-fontWeight': '600', '--plasma-typo-paragraph2-fontStyle': 'normal', '--plasma-typo-paragraph2-fontSize': '1rem', '--plasma-typo-paragraph2-letterSpacing': '-0.0190em', '--plasma-typo-paragraph2-lineHeight': '1.375rem', - '--plasma-typo-footnote1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-footnote1-fontWeight': '500', '--plasma-typo-footnote1-fontStyle': 'normal', '--plasma-typo-footnote1-fontSize': '0.875rem', '--plasma-typo-footnote1-letterSpacing': '-0.0190em', '--plasma-typo-footnote1-lineHeight': '1.125rem', - '--plasma-typo-footnote2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-footnote2-fontWeight': '600', '--plasma-typo-footnote2-fontStyle': 'normal', '--plasma-typo-footnote2-fontSize': '0.875rem', '--plasma-typo-footnote2-letterSpacing': '-0.0190em', '--plasma-typo-footnote2-lineHeight': '1.125rem', - '--plasma-typo-button1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-button1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-button1-fontWeight': '600', '--plasma-typo-button1-fontStyle': 'normal', '--plasma-typo-button1-fontSize': '1rem', '--plasma-typo-button1-letterSpacing': 'normal', '--plasma-typo-button1-lineHeight': '1.25rem', - '--plasma-typo-button2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-button2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-button2-fontWeight': '600', '--plasma-typo-button2-fontStyle': 'normal', '--plasma-typo-button2-fontSize': '0.875rem', '--plasma-typo-button2-letterSpacing': 'normal', '--plasma-typo-button2-lineHeight': '1rem', - '--plasma-typo-caption-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-caption-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-caption-fontWeight': '500', '--plasma-typo-caption-fontStyle': 'normal', '--plasma-typo-caption-fontSize': '0.75rem', '--plasma-typo-caption-letterSpacing': '-0.0220em', '--plasma-typo-caption-lineHeight': '1rem', - '--plasma-typo-underline-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-underline-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-underline-fontWeight': '500', '--plasma-typo-underline-fontStyle': 'normal', '--plasma-typo-underline-fontSize': '0.625rem', diff --git a/packages/plasma-tokens/src/typo/sberPortal.ts b/packages/plasma-tokens/src/typo/sberPortal.ts index dc05fdcc11..7ff237bc9e 100644 --- a/packages/plasma-tokens/src/typo/sberPortal.ts +++ b/packages/plasma-tokens/src/typo/sberPortal.ts @@ -2,109 +2,109 @@ export const sberPortal = { ':root': { - '--plasma-typo-display1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-display1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-display1-fontWeight': '500', '--plasma-typo-display1-fontStyle': 'normal', '--plasma-typo-display1-fontSize': '6rem', '--plasma-typo-display1-letterSpacing': '-0.0190em', '--plasma-typo-display1-lineHeight': '6rem', - '--plasma-typo-display2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-display2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-display2-fontWeight': '500', '--plasma-typo-display2-fontStyle': 'normal', '--plasma-typo-display2-fontSize': '3.75rem', '--plasma-typo-display2-letterSpacing': '-0.0190em', '--plasma-typo-display2-lineHeight': '4rem', - '--plasma-typo-display3-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-display3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-display3-fontWeight': '500', '--plasma-typo-display3-fontStyle': 'normal', '--plasma-typo-display3-fontSize': '3rem', '--plasma-typo-display3-letterSpacing': 'normal', '--plasma-typo-display3-lineHeight': '3.25rem', - '--plasma-typo-headline1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline1-fontWeight': '700', '--plasma-typo-headline1-fontStyle': 'normal', '--plasma-typo-headline1-fontSize': '2rem', '--plasma-typo-headline1-letterSpacing': '-0.0110em', '--plasma-typo-headline1-lineHeight': '2.25rem', - '--plasma-typo-headline2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline2-fontWeight': '600', '--plasma-typo-headline2-fontStyle': 'normal', '--plasma-typo-headline2-fontSize': '1.5rem', '--plasma-typo-headline2-letterSpacing': '-0.0220em', '--plasma-typo-headline2-lineHeight': '1.75rem', - '--plasma-typo-headline3-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline3-fontWeight': '600', '--plasma-typo-headline3-fontStyle': 'normal', '--plasma-typo-headline3-fontSize': '1.25rem', '--plasma-typo-headline3-letterSpacing': '-0.0250em', '--plasma-typo-headline3-lineHeight': '1.5rem', - '--plasma-typo-headline4-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-headline4-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-headline4-fontWeight': '700', '--plasma-typo-headline4-fontStyle': 'normal', '--plasma-typo-headline4-fontSize': '1.25rem', '--plasma-typo-headline4-letterSpacing': '-0.0250em', '--plasma-typo-headline4-lineHeight': '1.5rem', - '--plasma-typo-body1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-body1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-body1-fontWeight': '500', '--plasma-typo-body1-fontStyle': 'normal', '--plasma-typo-body1-fontSize': '1rem', '--plasma-typo-body1-letterSpacing': '-0.0190em', '--plasma-typo-body1-lineHeight': '1.25rem', - '--plasma-typo-body2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-body2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-body2-fontWeight': '600', '--plasma-typo-body2-fontStyle': 'normal', '--plasma-typo-body2-fontSize': '1rem', '--plasma-typo-body2-letterSpacing': '-0.0190em', '--plasma-typo-body2-lineHeight': '1.25rem', - '--plasma-typo-body3-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-body3-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-body3-fontWeight': '700', '--plasma-typo-body3-fontStyle': 'normal', '--plasma-typo-body3-fontSize': '1rem', '--plasma-typo-body3-letterSpacing': '-0.0190em', '--plasma-typo-body3-lineHeight': '1.25rem', - '--plasma-typo-paragraph1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-paragraph1-fontWeight': '400', '--plasma-typo-paragraph1-fontStyle': 'normal', '--plasma-typo-paragraph1-fontSize': '1rem', '--plasma-typo-paragraph1-letterSpacing': '-0.0190em', '--plasma-typo-paragraph1-lineHeight': '1.375rem', - '--plasma-typo-paragraph2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-paragraph2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-paragraph2-fontWeight': '600', '--plasma-typo-paragraph2-fontStyle': 'normal', '--plasma-typo-paragraph2-fontSize': '1rem', '--plasma-typo-paragraph2-letterSpacing': '-0.0190em', '--plasma-typo-paragraph2-lineHeight': '1.375rem', - '--plasma-typo-footnote1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-footnote1-fontWeight': '500', '--plasma-typo-footnote1-fontStyle': 'normal', '--plasma-typo-footnote1-fontSize': '0.875rem', '--plasma-typo-footnote1-letterSpacing': '-0.0190em', '--plasma-typo-footnote1-lineHeight': '1.125rem', - '--plasma-typo-footnote2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-footnote2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-footnote2-fontWeight': '600', '--plasma-typo-footnote2-fontStyle': 'normal', '--plasma-typo-footnote2-fontSize': '0.875rem', '--plasma-typo-footnote2-letterSpacing': '-0.0190em', '--plasma-typo-footnote2-lineHeight': '1.125rem', - '--plasma-typo-button1-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-button1-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-button1-fontWeight': '600', '--plasma-typo-button1-fontStyle': 'normal', '--plasma-typo-button1-fontSize': '1rem', '--plasma-typo-button1-letterSpacing': 'normal', '--plasma-typo-button1-lineHeight': '1.25rem', - '--plasma-typo-button2-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-button2-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-button2-fontWeight': '600', '--plasma-typo-button2-fontStyle': 'normal', '--plasma-typo-button2-fontSize': '0.875rem', '--plasma-typo-button2-letterSpacing': 'normal', '--plasma-typo-button2-lineHeight': '1rem', - '--plasma-typo-caption-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-caption-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-caption-fontWeight': '500', '--plasma-typo-caption-fontStyle': 'normal', '--plasma-typo-caption-fontSize': '0.75rem', '--plasma-typo-caption-letterSpacing': '-0.0220em', '--plasma-typo-caption-lineHeight': '1rem', - '--plasma-typo-underline-fontFamily': '"SB Sans Text","Helvetica","Arial",sans-serif', + '--plasma-typo-underline-fontFamily': '"SB Sans Text","SBSansText","Helvetica","Arial",sans-serif', '--plasma-typo-underline-fontWeight': '500', '--plasma-typo-underline-fontStyle': 'normal', '--plasma-typo-underline-fontSize': '0.625rem', diff --git a/packages/plasma-tokens/src/typography/body1.ts b/packages/plasma-tokens/src/typography/body1.ts index cb7c4d9ec1..d365644c59 100644 --- a/packages/plasma-tokens/src/typography/body1.ts +++ b/packages/plasma-tokens/src/typography/body1.ts @@ -10,7 +10,7 @@ type Body1 = { }; export const body1: Body1 = { - fontFamily: "var(--plasma-typo-body1-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-body1-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-body1-font-weight, 500)', fontStyle: 'var(--plasma-typo-body1-font-style, normal)', fontSize: 'var(--plasma-typo-body1-font-size, 1rem)', diff --git a/packages/plasma-tokens/src/typography/body2.ts b/packages/plasma-tokens/src/typography/body2.ts index 7ea16c9626..b778a948ca 100644 --- a/packages/plasma-tokens/src/typography/body2.ts +++ b/packages/plasma-tokens/src/typography/body2.ts @@ -10,7 +10,7 @@ type Body2 = { }; export const body2: Body2 = { - fontFamily: "var(--plasma-typo-body2-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-body2-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-body2-font-weight, 600)', fontStyle: 'var(--plasma-typo-body2-font-style, normal)', fontSize: 'var(--plasma-typo-body2-font-size, 1rem)', diff --git a/packages/plasma-tokens/src/typography/body3.ts b/packages/plasma-tokens/src/typography/body3.ts index dd860beabc..e144ce4db3 100644 --- a/packages/plasma-tokens/src/typography/body3.ts +++ b/packages/plasma-tokens/src/typography/body3.ts @@ -10,7 +10,7 @@ type Body3 = { }; export const body3: Body3 = { - fontFamily: "var(--plasma-typo-body3-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-body3-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-body3-font-weight, 700)', fontStyle: 'var(--plasma-typo-body3-font-style, normal)', fontSize: 'var(--plasma-typo-body3-font-size, 1rem)', diff --git a/packages/plasma-tokens/src/typography/button1.ts b/packages/plasma-tokens/src/typography/button1.ts index 670f3bc6c1..73eedc67b3 100644 --- a/packages/plasma-tokens/src/typography/button1.ts +++ b/packages/plasma-tokens/src/typography/button1.ts @@ -10,7 +10,7 @@ type Button1 = { }; export const button1: Button1 = { - fontFamily: "var(--plasma-typo-button1-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-button1-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-button1-font-weight, 600)', fontStyle: 'var(--plasma-typo-button1-font-style, normal)', fontSize: 'var(--plasma-typo-button1-font-size, 1rem)', diff --git a/packages/plasma-tokens/src/typography/button2.ts b/packages/plasma-tokens/src/typography/button2.ts index cf6d7ae254..d3724ce685 100644 --- a/packages/plasma-tokens/src/typography/button2.ts +++ b/packages/plasma-tokens/src/typography/button2.ts @@ -10,7 +10,7 @@ type Button2 = { }; export const button2: Button2 = { - fontFamily: "var(--plasma-typo-button2-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-button2-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-button2-font-weight, 600)', fontStyle: 'var(--plasma-typo-button2-font-style, normal)', fontSize: 'var(--plasma-typo-button2-font-size, 0.875rem)', diff --git a/packages/plasma-tokens/src/typography/caption.ts b/packages/plasma-tokens/src/typography/caption.ts index 5457910b20..6d9fe7bbb8 100644 --- a/packages/plasma-tokens/src/typography/caption.ts +++ b/packages/plasma-tokens/src/typography/caption.ts @@ -10,7 +10,7 @@ type Caption = { }; export const caption: Caption = { - fontFamily: "var(--plasma-typo-caption-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-caption-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-caption-font-weight, 500)', fontStyle: 'var(--plasma-typo-caption-font-style, normal)', fontSize: 'var(--plasma-typo-caption-font-size, 0.75rem)', diff --git a/packages/plasma-tokens/src/typography/display1.ts b/packages/plasma-tokens/src/typography/display1.ts index 2ac95a1339..5efe29aa57 100644 --- a/packages/plasma-tokens/src/typography/display1.ts +++ b/packages/plasma-tokens/src/typography/display1.ts @@ -10,7 +10,7 @@ type Display1 = { }; export const display1: Display1 = { - fontFamily: "var(--plasma-typo-display1-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-display1-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-display1-font-weight, 500)', fontStyle: 'var(--plasma-typo-display1-font-style, normal)', fontSize: 'var(--plasma-typo-display1-font-size, 6rem)', diff --git a/packages/plasma-tokens/src/typography/display2.ts b/packages/plasma-tokens/src/typography/display2.ts index ee4f2bdc77..e01e531830 100644 --- a/packages/plasma-tokens/src/typography/display2.ts +++ b/packages/plasma-tokens/src/typography/display2.ts @@ -10,7 +10,7 @@ type Display2 = { }; export const display2: Display2 = { - fontFamily: "var(--plasma-typo-display2-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-display2-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-display2-font-weight, 500)', fontStyle: 'var(--plasma-typo-display2-font-style, normal)', fontSize: 'var(--plasma-typo-display2-font-size, 3.75rem)', diff --git a/packages/plasma-tokens/src/typography/display3.ts b/packages/plasma-tokens/src/typography/display3.ts index 24c792f675..a92bbd0ba4 100644 --- a/packages/plasma-tokens/src/typography/display3.ts +++ b/packages/plasma-tokens/src/typography/display3.ts @@ -10,7 +10,7 @@ type Display3 = { }; export const display3: Display3 = { - fontFamily: "var(--plasma-typo-display3-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-display3-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-display3-font-weight, 500)', fontStyle: 'var(--plasma-typo-display3-font-style, normal)', fontSize: 'var(--plasma-typo-display3-font-size, 3rem)', diff --git a/packages/plasma-tokens/src/typography/footnote1.ts b/packages/plasma-tokens/src/typography/footnote1.ts index 46ffcc21ac..3329939c94 100644 --- a/packages/plasma-tokens/src/typography/footnote1.ts +++ b/packages/plasma-tokens/src/typography/footnote1.ts @@ -10,7 +10,7 @@ type Footnote1 = { }; export const footnote1: Footnote1 = { - fontFamily: "var(--plasma-typo-footnote1-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-footnote1-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-footnote1-font-weight, 500)', fontStyle: 'var(--plasma-typo-footnote1-font-style, normal)', fontSize: 'var(--plasma-typo-footnote1-font-size, 0.875rem)', diff --git a/packages/plasma-tokens/src/typography/footnote2.ts b/packages/plasma-tokens/src/typography/footnote2.ts index d89aebaf76..582b951f6d 100644 --- a/packages/plasma-tokens/src/typography/footnote2.ts +++ b/packages/plasma-tokens/src/typography/footnote2.ts @@ -10,7 +10,7 @@ type Footnote2 = { }; export const footnote2: Footnote2 = { - fontFamily: "var(--plasma-typo-footnote2-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-footnote2-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-footnote2-font-weight, 600)', fontStyle: 'var(--plasma-typo-footnote2-font-style, normal)', fontSize: 'var(--plasma-typo-footnote2-font-size, 0.875rem)', diff --git a/packages/plasma-tokens/src/typography/headline1.ts b/packages/plasma-tokens/src/typography/headline1.ts index f3bfe3daff..b5505babcb 100644 --- a/packages/plasma-tokens/src/typography/headline1.ts +++ b/packages/plasma-tokens/src/typography/headline1.ts @@ -10,7 +10,7 @@ type Headline1 = { }; export const headline1: Headline1 = { - fontFamily: "var(--plasma-typo-headline1-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-headline1-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-headline1-font-weight, 700)', fontStyle: 'var(--plasma-typo-headline1-font-style, normal)', fontSize: 'var(--plasma-typo-headline1-font-size, 2rem)', diff --git a/packages/plasma-tokens/src/typography/headline2.ts b/packages/plasma-tokens/src/typography/headline2.ts index bf04508ce4..8831df436e 100644 --- a/packages/plasma-tokens/src/typography/headline2.ts +++ b/packages/plasma-tokens/src/typography/headline2.ts @@ -10,7 +10,7 @@ type Headline2 = { }; export const headline2: Headline2 = { - fontFamily: "var(--plasma-typo-headline2-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-headline2-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-headline2-font-weight, 600)', fontStyle: 'var(--plasma-typo-headline2-font-style, normal)', fontSize: 'var(--plasma-typo-headline2-font-size, 1.5rem)', diff --git a/packages/plasma-tokens/src/typography/headline3.ts b/packages/plasma-tokens/src/typography/headline3.ts index b51f7466ea..150784d07d 100644 --- a/packages/plasma-tokens/src/typography/headline3.ts +++ b/packages/plasma-tokens/src/typography/headline3.ts @@ -10,7 +10,7 @@ type Headline3 = { }; export const headline3: Headline3 = { - fontFamily: "var(--plasma-typo-headline3-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-headline3-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-headline3-font-weight, 600)', fontStyle: 'var(--plasma-typo-headline3-font-style, normal)', fontSize: 'var(--plasma-typo-headline3-font-size, 1.25rem)', diff --git a/packages/plasma-tokens/src/typography/headline4.ts b/packages/plasma-tokens/src/typography/headline4.ts index d410e7c7a3..22e2d857c1 100644 --- a/packages/plasma-tokens/src/typography/headline4.ts +++ b/packages/plasma-tokens/src/typography/headline4.ts @@ -10,7 +10,7 @@ type Headline4 = { }; export const headline4: Headline4 = { - fontFamily: "var(--plasma-typo-headline4-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-headline4-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-headline4-font-weight, 700)', fontStyle: 'var(--plasma-typo-headline4-font-style, normal)', fontSize: 'var(--plasma-typo-headline4-font-size, 1.25rem)', diff --git a/packages/plasma-tokens/src/typography/paragraph1.ts b/packages/plasma-tokens/src/typography/paragraph1.ts index 59dafe3443..afe5d7fbdb 100644 --- a/packages/plasma-tokens/src/typography/paragraph1.ts +++ b/packages/plasma-tokens/src/typography/paragraph1.ts @@ -10,7 +10,7 @@ type Paragraph1 = { }; export const paragraph1: Paragraph1 = { - fontFamily: "var(--plasma-typo-paragraph1-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-paragraph1-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-paragraph1-font-weight, 400)', fontStyle: 'var(--plasma-typo-paragraph1-font-style, normal)', fontSize: 'var(--plasma-typo-paragraph1-font-size, 1rem)', diff --git a/packages/plasma-tokens/src/typography/paragraph2.ts b/packages/plasma-tokens/src/typography/paragraph2.ts index 3324cbdd9d..11cff28ca3 100644 --- a/packages/plasma-tokens/src/typography/paragraph2.ts +++ b/packages/plasma-tokens/src/typography/paragraph2.ts @@ -10,7 +10,7 @@ type Paragraph2 = { }; export const paragraph2: Paragraph2 = { - fontFamily: "var(--plasma-typo-paragraph2-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-paragraph2-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-paragraph2-font-weight, 600)', fontStyle: 'var(--plasma-typo-paragraph2-font-style, normal)', fontSize: 'var(--plasma-typo-paragraph2-font-size, 1rem)', diff --git a/packages/plasma-tokens/src/typography/underline.ts b/packages/plasma-tokens/src/typography/underline.ts index 7318ea4595..e98ae95e6b 100644 --- a/packages/plasma-tokens/src/typography/underline.ts +++ b/packages/plasma-tokens/src/typography/underline.ts @@ -11,7 +11,7 @@ type Underline = { }; export const underline: Underline = { - fontFamily: "var(--plasma-typo-underline-font-family, 'SB Sans Text','Helvetica','Arial',sans-serif)", + fontFamily: "var(--plasma-typo-underline-font-family, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", fontWeight: 'var(--plasma-typo-underline-font-weight, 500)', fontStyle: 'var(--plasma-typo-underline-font-style, normal)', fontSize: 'var(--plasma-typo-underline-font-size, 0.625rem)', diff --git a/packages/plasma-tokens/src/typographyValues/fonts.ts b/packages/plasma-tokens/src/typographyValues/fonts.ts index 002aae32d2..8ff134d4d4 100644 --- a/packages/plasma-tokens/src/typographyValues/fonts.ts +++ b/packages/plasma-tokens/src/typographyValues/fonts.ts @@ -1,8 +1,8 @@ // Generated by robots, do not change this manually! export const fonts = { - Medium: "var(--plasma-typo-fonts-medium, 'SB Sans Text','Helvetica','Arial',sans-serif)", - Bold: "var(--plasma-typo-fonts-bold, 'SB Sans Text','Helvetica','Arial',sans-serif)", - Semibold: "var(--plasma-typo-fonts-semibold, 'SB Sans Text','Helvetica','Arial',sans-serif)", - Regular: "var(--plasma-typo-fonts-regular, 'SB Sans Text','Helvetica','Arial',sans-serif)", + Medium: "var(--plasma-typo-fonts-medium, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", + Bold: "var(--plasma-typo-fonts-bold, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", + Semibold: "var(--plasma-typo-fonts-semibold, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", + Regular: "var(--plasma-typo-fonts-regular, 'SB Sans Text','SBSansText','Helvetica','Arial',sans-serif)", }; diff --git a/packages/plasma-typo/src/helpers.ts b/packages/plasma-typo/src/helpers.ts index b617db2532..4f055cd2c7 100644 --- a/packages/plasma-typo/src/helpers.ts +++ b/packages/plasma-typo/src/helpers.ts @@ -65,8 +65,12 @@ export const createVariablesByArcheType = ({ }> => { return ({ deviceScale = 1, breakWord = true }) => css` :root { - --plasma-typo-display-font-family: '${displayFontFamily}', sans-serif; - --plasma-typo-text-font-family: '${textFontFamily}', sans-serif; + --plasma-typo-display-font-family: '${displayFontFamily}', '${displayFontFamily + ?.split(' ') + .join('')}', sans-serif; + --plasma-typo-text-font-family: '${textFontFamily}', '${textFontFamily + ?.split(' ') + .join('')}', sans-serif; --plasma-typo-dspl-l-font-family: var(--plasma-typo-display-font-family); --plasma-typo-dspl-l-font-style: normal; --plasma-typo-dspl-l-letter-spacing: normal;