fix: enable typography and editorial-typography for professional brand (

#1506) fix: - fix o3-tooltip build issues - fix font reference error for sv brand - update web-token-references to o3-foundation refs - update o-colors migraiont guide to match it to new package
Financial-Times · Mar 21, 2024 · 2289423 · 2289423
1 parent bcd4ab3
commit 2289423
Show file tree

Hide file tree

Showing 41 changed files with 353 additions and 237 deletions.
diff --git a/apps/dictionary/tokens/$metadata.json b/apps/dictionary/tokens/$metadata.json
@@ -24,8 +24,8 @@
     "internal/components/o3-tooltip",
     "sustainable-views/base/spacing",
     "sustainable-views/base/typography",
-    "sustainable-views/use-case/typography-editorial",
     "sustainable-views/base/color",
+    "sustainable-views/use-case/typography-editorial",
     "sustainable-views/use-case/typography",
     "sustainable-views/components/o3-tooltip",
     "sustainable-views/components/o3-button",
@@ -38,10 +38,8 @@
     "whitelabel/use-case/typography",
     "whitelabel/use-case/typography-editorial",
     "whitelabel/components/o3-button",
-    "whitelabel/components/o3-toggle",
-    "whitelabel/components/o3-tooltip1",
+    "whitelabel/components/o3-tooltip",
     "utility-tokens",
-    "icons/icons",
-    "whitelabel/component/toggle"
+    "icons/icons"
   ]
 }
diff --git a/apps/dictionary/tokens/$themes.json b/apps/dictionary/tokens/$themes.json
@@ -11,7 +11,7 @@
       "core/use-case/box-shadow": "enabled",
       "core/use-case/typography": "enabled",
       "core/use-case/typography-editorial": "enabled",
-      "core/components/o3-tooltip": "enabled",
+      "core/components/o3-tooltip": "source",
       "core/use-case/color": "enabled"
     },
     "$figmaStyleReferences": {
@@ -218,8 +218,9 @@
       "core/base/typography": "enabled",
       "core/use-case/color": "enabled",
       "core/use-case/box-shadow": "enabled",
-      "core/use-case/typography-editorial": "disabled",
-      "core/professional/components/o3-tooltip": "enabled"
+      "core/professional/components/o3-tooltip": "source",
+      "core/use-case/typography": "enabled",
+      "core/use-case/typography-editorial": "enabled"
     },
     "$figmaStyleReferences": {
       "color-usecase.background.button.primary.active": "S:55d4b73d90c40ff305a097a15d86f53de276da57,",
@@ -412,7 +413,7 @@
       "internal/base/typography": "enabled",
       "internal/use-case/box-shadow": "enabled",
       "internal/use-case/typography": "enabled",
-      "internal/components/o3-tooltip": "enabled",
+      "internal/components/o3-tooltip": "source",
       "internal/use-case/color": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:4618:1487",
@@ -487,8 +488,8 @@
       "whitelabel/base/typography": "enabled",
       "whitelabel/use-case/typography": "enabled",
       "whitelabel/use-case/typography-editorial": "enabled",
-      "whitelabel/components/o3-tooltip": "enabled",
-      "whitelabel/use-case/color": "enabled"
+      "whitelabel/use-case/color": "enabled",
+      "whitelabel/components/o3-tooltip": "source"
     },
     "$figmaCollectionId": "VariableCollectionId:4618:1701",
     "$figmaModeId": "4618:6",
@@ -545,7 +546,7 @@
       "sustainable-views/use-case/typography": "enabled",
       "sustainable-views/use-case/typography-editorial": "enabled",
       "sustainable-views/components/o3-button": "source",
-      "sustainable-views/components/o3-tooltip": "enabled",
+      "sustainable-views/components/o3-tooltip": "source",
       "sustainable-views/base/color": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:4618:1555",
@@ -574,4 +575,4 @@
     },
     "group": "sustainable-views"
   }
-]
+]
diff --git a/apps/dictionary/tokens/core/use-case/color.json b/apps/dictionary/tokens/core/use-case/color.json
@@ -87,8 +87,7 @@
         },
         "muted-inverse": {
           "value": "#a8aaad",
-          "type": "color",
-          "$extensions": {}
+          "type": "color"
         }
       }
     }

diff --git a/apps/dictionary/tokens/internal/use-case/color.json b/apps/dictionary/tokens/internal/use-case/color.json
@@ -97,8 +97,7 @@
         },
         "muted-inverse": {
           "value": "#a8aaad",
-          "type": "color",
-          "$extensions": {}
+          "type": "color"
         }
       }
     }

diff --git a/apps/dictionary/tokens/sustainable-views/base/typography.json b/apps/dictionary/tokens/sustainable-views/base/typography.json
@@ -9,6 +9,10 @@
         "financier-display": {
           "value": "financier display VF",
           "type": "fontFamilies"
+        },
+        "georgia": {
+          "value": "georgia",
+          "type": "fontFamilies"
         }
       },
       "weight": {

diff --git a/apps/dictionary/tokens/whitelabel/component/toggle.json b/apps/dictionary/tokens/whitelabel/component/toggle.json
diff --git a/apps/dictionary/tokens/whitelabel/components/o3-toggle.json b/apps/dictionary/tokens/whitelabel/components/o3-toggle.json
diff --git a/...ns/whitelabel/components/o3-tooltip1.json → ...ens/whitelabel/components/o3-tooltip.json b/...ns/whitelabel/components/o3-tooltip1.json → ...ens/whitelabel/components/o3-tooltip.json
diff --git a/apps/dictionary/tokens/whitelabel/use-case/color.json b/apps/dictionary/tokens/whitelabel/use-case/color.json
@@ -97,8 +97,7 @@
         },
         "muted-inverse": {
           "value": "#808080",
-          "type": "color",
-          "$extensions": {}
+          "type": "color"
         }
       }
     }

diff --git a/apps/for-everyone-website/package.json b/apps/for-everyone-website/package.json
@@ -17,10 +17,10 @@
 	"dependencies": {
 		"@astrojs/react": "^3.0.9",
 		"@astrojs/starlight": "^0.15.2",
-		"@financial-times/o3-button": "^0.4.4",
+		"@financial-times/o3-button": "^0.5.0",
 		"@financial-times/o3-tooltip": "^0.1.0",
 		"@financial-times/o3-tooling-token": "^0.0.0",
-		"@financial-times/o3-web-token": "^0.5.0",
+		"@financial-times/o3-foundation": "^0.6.0",
 		"astro": "^4.0.9",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",

diff --git a/apps/for-everyone-website/src/components/Hero.astro b/apps/for-everyone-website/src/components/Hero.astro
@@ -1,6 +1,6 @@
 ---
 import { Image } from 'astro:assets';
-import '@financial-times/o3-web-token/internal.css';
+import '@financial-times/o3-foundation/internal.css';
 import '@financial-times/o3-button/css/internal.css';
 
 const { data } = Astro.props.entry;

diff --git a/apps/for-everyone-website/src/content/docs/guides/icons.mdx b/apps/for-everyone-website/src/content/docs/guides/icons.mdx
@@ -6,7 +6,7 @@ import Icons from '../../../components/Icons.astro';
 
 A set of icons for use across FT Group brands.
 
-- The below is a subset of FT Icons, redesigned to create a cohesive set. See our [new icon Figma library](https://www.figma.com/file/cDQZHPJ8e962o9827vugBW/Iconography?type=design&mode=design&t=L6pzL8orfc78JUJo-0) or include CSS Custom Properties for icons via our [o3-web-token](https://origami-for-everyone.ft.com/guides/icons/npmjs.com/package/@financial-times/o3-web-token/) npm package.
+- The below is a subset of FT Icons, redesigned to create a cohesive set. See our [new icon Figma library](https://www.figma.com/file/cDQZHPJ8e962o9827vugBW/Iconography?type=design&mode=design&t=L6pzL8orfc78JUJo-0) or include CSS Custom Properties for icons via our [o3-foundation](https://origami-for-everyone.ft.com/guides/icons/npmjs.com/package/@financial-times/o3-foundation/) npm package.
 - More FT icons are available. See our [legacy Figma UI library](https://www.figma.com/file/MyHQ1qdwYyek5IBdhEEaND/FT-UI-Library?type=design&node-id=0-1498&mode=design&t=uIN7fzq8QDfpjZ4r-0), and [o-icons component](https://main--655f72ec522e424302dc6201.chromatic.com/?path=/story/o2-core_components) for more information.
 - The size and weight of our audited iconography has been adjusted to create a cohesive set of icons. Otherwise, they largely align with our legacy set of icons.
 

diff --git a/apps/for-everyone-website/src/styles/custom.css b/apps/for-everyone-website/src/styles/custom.css
@@ -1,5 +1,5 @@
 
-@import '@financial-times/o3-web-token/internal.css';
+@import '@financial-times/o3-foundation/internal.css';
 
 /* Dark mode colors. */
 :root {

diff --git a/components/o-colors/MIGRATION.md b/components/o-colors/MIGRATION.md
@@ -1,16 +1,16 @@
 ## Migration Guide
 
-### Migrating from v6 to o3-web-token
+### Migrating from v6 to o3-foundation
 
 #### Mixins
 
 ##### `oColors`
 
 ###### Replace `o-colors-*` classes.
 
-`o3-web-token` provides [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) but no utility CSS classes. Instead, author your own CSS to apply the correct colours to either `background` or `color`.
+`o3-foundation` provides [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) but no utility CSS classes. Instead, author your own CSS to apply the correct colours to either `background` or `color`.
 
-| o-colors class           | o3-web-token CSS                                     |
+| o-colors class           | o3-foundation CSS                                    |
 | ------------------------ | ---------------------------------------------------- |
 | o-colors-page-background | background: var(--o3-color-use-case-page-background) |
 | o-colors-body-text       | color: var(--o3-color-use-case-body-text)            |
@@ -31,17 +31,17 @@ $o-brand: '[your-brand]';
 Becomes:
 
 ```css
-@import '@financial-times/o3-web-token/[your-brand].css';
+@import '@financial-times/o3-foundation/[your-brand].css';
 body {
 	background-color: var(--o3-color-use-case-page-background);
 }
 ```
 
 ###### Replace `--o-colors-*` CSS Custom Properties.
 
-Instead, use `o3-web-token` [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
+Instead, use `o3-foundation` [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
 
-| o-colors                   | o3-web-token                                                                                                                      |
+| o-colors                   | o3-foundation                                                                                                                     |
 | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
 | --o-colors-page-background | --o3-color-use-case-page-background                                                                                               |
 | --o-colors-box-background  | Removed. Use the palette directly (core brand: --o3-color-palette-wheat; --o3-color-palette-slate-white-5 for the internal brand) |
@@ -52,7 +52,7 @@ Instead, use `o3-web-token` [CSS Custom Properties](https://developer.mozilla.or
 
 Some colour use-case CSS Custom Properties have no direct replacement. Instead use the colour palette directly, according to your brand.
 
-| o-colors                  | o3-web-token (core)      | o3-web-token (internal)          |
+| o-colors                  | o3-foundation (core)     | o3-foundation (internal)         |
 | ------------------------- | ------------------------ | -------------------------------- |
 | --o-colors-box-background | --o3-color-palette-wheat | --o3-color-palette-slate-white-5 |
 
@@ -97,7 +97,7 @@ E.g. if working on a project `ft-example-project` to define a custom usecase for
 
 ##### `oColorsByName`
 
-Use `o3-web-token` CSS Custom Properties instead, `--o3-color-palette-[name]`.
+Use `o3-foundation` CSS Custom Properties instead, `--o3-color-palette-[name]`.
 
 ```diff
 -color: oColorsByName('ft-pink');
@@ -108,9 +108,9 @@ See our [colour design guidelines](https://origami-for-everyone.ft.com/guides/co
 
 ##### `oColorsByUsecase`
 
-Use `o3-web-token` CSS Custom Properties instead, `--o3-color-use-case-[usecase]`.
+Use `o3-foundation` CSS Custom Properties instead, `--o3-color-use-case-[usecase]`.
 
-| o-colors                                        | o3-web-token                                     |
+| o-colors                                        | o3-foundation                                    |
 | ----------------------------------------------- | ------------------------------------------------ |
 | oColorsByUsecase('focus', 'outline');           | var(--o3-color-use-case-focus-outline-standard)  |
 | oColorsByUsecase('page', 'background');         | var(--o3-color-use-case-page-background)         |
@@ -123,7 +123,7 @@ Use `o3-web-token` CSS Custom Properties instead, `--o3-color-use-case-[usecase]
 
 Some colour use-cases have no direct replacement. Instead use the colour palette directly, according to your brand.
 
-| o-colors                                                      | o3-web-token (core)               | o3-web-token (internal)                |
+| o-colors                                                      | o3-foundation (core)              | o3-foundation (internal)               |
 | ------------------------------------------------------------- | --------------------------------- | -------------------------------------- |
 | oColorsByUsecase('box', 'background');                        | var(--o3-color-palette-wheat)     | var(--o3-color-palette-slate-white-5)  |
 | oColorsByUsecase('link-title', 'text');                       | var(--o3-color-palette-black-80)  | var(--o3-color-palette-slate-white-15) |
@@ -162,7 +162,7 @@ E.g:
 
 ##### `oColorsGetTone`
 
-use `o3-web-token` CSS Custom Properties for tints (also known as tones), use these instead of `oColorsGetTone`.
+use `o3-foundation` CSS Custom Properties for tints (also known as tones), use these instead of `oColorsGetTone`.
 
 E.g:
 
@@ -202,7 +202,7 @@ We recommend this path as [we found there is little consistency in how these mix
 
 ##### `oColorsGetTextColor`
 
-There is no direct replacement for `oColorsGetTextColor`. We recommend manually using the `o3-web-token` CSS Custom Property `--o3-color-use-case-body` for light backgrounds and `--o3-color-use-case-body-inverse` for dark backgrounds.
+There is no direct replacement for `oColorsGetTextColor`. We recommend manually using the `o3-foundation` CSS Custom Property `--o3-color-use-case-body` for light backgrounds and `--o3-color-use-case-body-inverse` for dark backgrounds.
 
 Please contact the Origami team for support if this is not possible or practical.
 

diff --git a/components/o3-button/main.css b/components/o3-button/main.css
@@ -1,13 +1,4 @@
-@import '@financial-times/o3-web-token/icons.css';
-
-@font-face {
-	src: url('https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=Metric2-VF&system_code=origami&font_format=woff2')
-		format('woff2');
-	font-family: 'Metric2-VF';
-	font-weight: 500;
-	font-style: normal;
-	font-display: swap;
-}
+@import '@financial-times/o3-foundation/icons.css';
 
 .o3-button {
 	--_o3-button-min-width: 80px;
@@ -37,7 +28,7 @@
 	font-size: var(--_o3-button-font-size);
 	line-height: var(--_o3-button-lineheight);
 	font-weight: 450;
-	font-family: 'Metric2-VF', sans-serif;
+	font-family: var(--o3-font-family-metric), sans-serif;
 	border: var(--_o3-button-border-size) solid transparent;
 	text-align: center;
 	text-decoration: none;
@@ -57,34 +48,6 @@
 	visibility: hidden;
 }
 
-.o3-button:focus {
-	box-shadow: var(--o3-box-shadow-focus-ring-inner),
-		var(--o3-box-shadow-focus-ring-outer);
-	outline: unset;
-}
-
-.o3-button[data-o3-theme='inverse']:focus,
-:where([data-o3-theme='inverse']) .o3-button:focus {
-	box-shadow: var(--o3-box-shadow-focus-ring-inverse-inner),
-		var(--o3-box-shadow-focus-ring-inverse-outer);
-}
-
-@supports selector(:focus-visible) {
-	.o3-button:focus {
-		box-shadow: unset;
-	}
-
-	.o3-button:focus-visible {
-		box-shadow: var(--o3-box-shadow-focus-ring-inner),
-			var(--o3-box-shadow-focus-ring-outer);
-		outline: unset;
-	}
-	.o3-button[data-o3-theme='inverse']:focus-visible,
-	:where([data-o3-theme='inverse']) .o3-button:focus-visible {
-		box-shadow: var(--o3-box-shadow-focus-ring-inverse-inner),
-			var(--o3-box-shadow-focus-ring-inverse-outer);
-	}
-}
 
 /* PRIMARY */
 

diff --git a/components/o3-button/package.json b/components/o3-button/package.json
@@ -37,6 +37,6 @@
 	},
 	"private": false,
 	"peerDependencies": {
-		"@financial-times/o3-web-token": "^0.5.0"
+		"@financial-times/o3-foundation": "^0.6.0"
 	}
 }
diff --git a/components/o3-button/src/css/brands/core.css b/components/o3-button/src/css/brands/core.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-web-token/core.css';
+@import '@financial-times/o3-foundation/core.css';
 @import '../tokens/core/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-button/src/css/brands/internal.css b/components/o3-button/src/css/brands/internal.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-web-token/internal.css';
+@import '@financial-times/o3-foundation/internal.css';
 @import '../tokens/internal/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-button/src/css/brands/professional.css b/components/o3-button/src/css/brands/professional.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-web-token/professional.css';
+@import '@financial-times/o3-foundation/professional.css';
 @import '../tokens/core/professional/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-button/src/css/brands/sustainable-views.css b/components/o3-button/src/css/brands/sustainable-views.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-web-token/sustainable-views.css';
+@import '@financial-times/o3-foundation/sustainable-views.css';
 @import '../tokens/sustainable-views/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-button/src/css/brands/whitelabel.css b/components/o3-button/src/css/brands/whitelabel.css
@@ -1,3 +1,3 @@
-@import '@financial-times/o3-web-token/whitelabel.css';
+@import '@financial-times/o3-foundation/whitelabel.css';
 @import '../tokens/whitelabel/o3-button/_variables.css';
 @import '../../../main.css';
diff --git a/components/o3-foundation/main.css b/components/o3-foundation/main.css
@@ -3,16 +3,7 @@
 @font-face {
 	src: url('https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=Metric2-VF&system_code=origami&font_format=woff2')
 		format('woff2');
-	font-family: 'Metric2-VF';
-	font-weight: 400;
-	font-style: normal;
-	font-display: swap;
-}
-
-@font-face {
-	src: url('https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=FinancierDisplayWeb-Medium&system_code=origami&version=1.12')
-		format('woff2');
-	font-family: 'FinancierDisplayWeb';
+	font-family: var(--o3-font-family-metric);
 	font-weight: 400;
 	font-style: normal;
 	font-display: swap;

diff --git a/components/o3-foundation/src/css/brands/core.css b/components/o3-foundation/src/css/brands/core.css
@@ -1,2 +1,12 @@
 @import '../tokens/core/_variables.css';
 @import '../../../main.css';
+
+
+@font-face {
+	src: url('https://www.ft.com/__origami/service/build/v3/font?font_format=woff2&font_name=FinancierDisplayWeb-Medium&system_code=origami&version=1.12')
+		format('woff2');
+	font-family: var(--o3-font-family-financier-display);
+	font-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}