feat: create o3-foundation package instead of o3-web-token

* feat: create o3-foundation package instead of o3-web-token

.github/labeler.yml

@@ -122,10 +122,10 @@ o-visual-effects:
   - components/o-visual-effects/**/*
 o3-button:
   - components/o3-button/**/*
+o3-foundation:
+  - components/o3-foundation/**/*
 o3-tooltip:
   - components/o3-tooltip/**/*
-o3-web-token:
-  - components/o3-web-token/**/*
 ftdomdelegate:
   - libraries/ftdomdelegate/**/*
 math:

.github/workflows/test.yml

@@ -125,10 +125,10 @@ jobs:
             - 'components/o-visual-effects/**'
           components/o3-button:
             - 'components/o3-button/**'
+          components/o3-foundation:
+            - 'components/o3-foundation/**'
           components/o3-tooltip:
             - 'components/o3-tooltip/**'
-          components/o3-web-token:
-            - 'components/o3-web-token/**'
           libraries/ftdomdelegate:
             - 'libraries/ftdomdelegate/**'
           libraries/math:

.release-please-manifest.json

@@ -1 +1 @@
-{"components/ft-concept-button":"1.2.3","components/g-audio":"2.0.3","components/n-notification":"8.2.6","components/o-audio":"2.1.4","components/o-autocomplete":"1.9.1","components/o-banner":"4.5.2","components/o-big-number":"3.2.3","components/o-buttons":"7.9.2","components/o-colors":"6.6.3","components/o-comments":"10.3.8","components/o-cookie-message":"6.7.1","components/o-date":"6.1.0","components/o-editorial-layout":"2.4.3","components/o-editorial-typography":"2.4.1","components/o-expander":"6.2.7","components/o-fonts":"5.3.5","components/o-footer":"9.2.9","components/o-footer-services":"4.2.8","components/o-forms":"9.12.1","components/o-ft-affiliate-ribbon":"5.2.2","components/o-grid":"6.1.8","components/o-header":"11.2.0","components/o-header-services":"5.5.3","components/o-icons":"7.7.1","components/o-labels":"6.5.8","components/o-layout":"5.3.4","components/o-lazy-load":"3.1.3","components/o-loading":"5.2.3","components/o-message":"5.4.4","components/o-meter":"3.2.5","components/o-multi-select":"2.2.5","components/o-normalise":"3.3.2","components/o-overlay":"4.2.12","components/o-quote":"5.3.4","components/o-share":"10.0.1","components/o-social-follow":"1.0.10","components/o-spacing":"3.2.5","components/o-stepped-progress":"4.0.9","components/o-subs-card":"6.2.6","components/o-syntax-highlight":"4.2.5","components/o-table":"9.3.4","components/o-tabs":"8.1.4","components/o-teaser":"6.3.0","components/o-teaser-collection":"4.2.5","components/o-toggle":"3.2.6","components/o-tooltip":"5.3.2","components/o-top-banner":"1.0.4","components/o-topper":"6.0.8","components/o-typography":"7.6.2","components/o-video":"7.2.11","components/o-viewport":"5.1.2","components/o-visual-effects":"4.2.2","components/o3-button":"0.4.5","components/o3-tooltip":"0.1.1","components/o3-web-token":"0.5.1","libraries/ftdomdelegate":"5.0.1","libraries/math":"1.1.1","libraries/o-autoinit":"3.1.4","libraries/o-brand":"4.2.2","libraries/o-errors":"5.2.3","libraries/o-tracking":"4.5.2","libraries/o-utils":"2.2.1","libraries/sass-mq":"5.2.4","presets/eslint-config-origami-component":"2.2.0","presets/remark-preset-lint-origami-component":"2.0.2","presets/stylelint-config-origami-component":"1.0.6","tools/origami-bower-safe-version-supervisor":"1.1.2"}
+{"components/ft-concept-button":"1.2.3","components/g-audio":"2.0.3","components/n-notification":"8.2.6","components/o-audio":"2.1.4","components/o-autocomplete":"1.9.1","components/o-banner":"4.5.2","components/o-big-number":"3.2.3","components/o-buttons":"7.9.2","components/o-colors":"6.6.3","components/o-comments":"10.3.8","components/o-cookie-message":"6.7.1","components/o-date":"6.1.0","components/o-editorial-layout":"2.4.3","components/o-editorial-typography":"2.4.1","components/o-expander":"6.2.7","components/o-fonts":"5.3.5","components/o-footer":"9.2.9","components/o-footer-services":"4.2.8","components/o-forms":"9.12.1","components/o-ft-affiliate-ribbon":"5.2.2","components/o-grid":"6.1.8","components/o-header":"11.2.0","components/o-header-services":"5.5.3","components/o-icons":"7.7.1","components/o-labels":"6.5.8","components/o-layout":"5.3.4","components/o-lazy-load":"3.1.3","components/o-loading":"5.2.3","components/o-message":"5.4.4","components/o-meter":"3.2.5","components/o-multi-select":"2.2.5","components/o-normalise":"3.3.2","components/o-overlay":"4.2.12","components/o-quote":"5.3.4","components/o-share":"10.0.1","components/o-social-follow":"1.0.10","components/o-spacing":"3.2.5","components/o-stepped-progress":"4.0.9","components/o-subs-card":"6.2.6","components/o-syntax-highlight":"4.2.5","components/o-table":"9.3.4","components/o-tabs":"8.1.4","components/o-teaser":"6.3.0","components/o-teaser-collection":"4.2.5","components/o-toggle":"3.2.6","components/o-tooltip":"5.3.2","components/o-top-banner":"1.0.4","components/o-topper":"6.0.8","components/o-typography":"7.6.2","components/o-video":"7.2.11","components/o-viewport":"5.1.2","components/o-visual-effects":"4.2.2","components/o3-button":"0.4.5","components/o3-foundation":"0.5.1","components/o3-tooltip":"0.1.1","libraries/ftdomdelegate":"5.0.1","libraries/math":"1.1.1","libraries/o-autoinit":"3.1.4","libraries/o-brand":"4.2.2","libraries/o-errors":"5.2.3","libraries/o-tracking":"4.5.2","libraries/o-utils":"2.2.1","libraries/sass-mq":"5.2.4","presets/eslint-config-origami-component":"2.2.0","presets/remark-preset-lint-origami-component":"2.0.2","presets/stylelint-config-origami-component":"1.0.6","tools/origami-bower-safe-version-supervisor":"1.1.2"}

apps/dictionary/scripts/build-config/build.js

@@ -12,15 +12,15 @@ function buildBrandCSS() {
 		const nonComponentTokenFilter = source =>
 			!source.includes(`${brand}/components/`);
 		const sources = getBrandSources(brand).filter(nonComponentTokenFilter);
-		const destination = `build/${brand}/_variables.css`;
+		const destination = `src/css/tokens/${brand}/_variables.css`;
 		const parentSelector = `[data-o3-brand="${brand.split('/').slice(-1)}"]`;
 		buildCSS({sources, destination, parentSelector});
 	});
 }
 
 function buildIconCSS() {
 	const sources = [path.join(getBasePath(), 'tokens/icons/icons.json')];
-	const destination = 'build/icons/_variables.css';
+	const destination = 'build/icons.css';
 	buildCSS({sources, destination});
 }
 

apps/dictionary/scripts/build-config/utils.js

@@ -309,9 +309,10 @@ export function getBrandSources(brand) {
 		.filter(theme => tokenStudioThemeToBrand(theme) === brand)
 		.flatMap(theme => {
 			const selectedTokenSets = Object.keys(theme.selectedTokenSets);
+
 			const componentTokenSets = selectedTokenSets.filter(tokenSet => {
 				return (
-					isEnabledTokenStudioSet(theme, tokenSet) &&
+					isEnabledTokenStudioSet(theme, tokenSet) ||
 					isSetBelongsToSubBrand(theme, tokenSet)
 				);
 			});

components/o3-button/src/css/brands/core.css

@@ -1,3 +1,2 @@
-@import '@financial-times/o3-web-token/core.css';
 @import '../tokens/core/o3-button/_variables.css';
 @import '../../../main.css';

components/o3-web-token/.gitignore → components/o3-foundation/.gitignore

@@ -7,3 +7,4 @@
 /demos/local
 /coverage
 !icons/
+/build/

components/o3-foundation/README.md

@@ -0,0 +1,92 @@
+# o3-foundation
+
+- [o3-foundation](#o3-foundation)
+  - [Usage](#usage)
+  - [Normalisation](#normalisation)
+    - [Normalisation](#normalisation)
+    - [Focus rings](#focus-rings)
+    - [Fonts](#fonts)
+    - [Helper classes](#helper-classes)
+  - [Migration](#migration)
+  - [Contact](#contact)
+  - [Licence](#licence)
+
+## Usage
+
+`o3-foundation` provides CSS Custom Properties for design tokens representing colours, typographic scale, spacing, and iconography.
+
+`o3-foundation` supports brands: `core`, `internal`, `professional`, `sustainable-views` and `whitelabel`.
+
+Import your chosen brand to begin using tokens in your CSS:
+
+```css
+@import '@financial-times/o3-foundation/core.css';
+
+body {
+ background-color: var(--o3-color-use-case-page-background);
+ font-size: var(--o3-font-size-1);
+ line-height: var(--o3-font-lineheight-1);
+}
+```
+
+To add support for another brand, import its tokens too:
+
+```diff
++@import '@financial-times/o3-foundation/core.css';
++@import '@financial-times/o3-foundation/internal.css';
+
+.example-custom-link {
+ color: var(--o3-color-link);
+ font-size: var(--o3-font-size-3);
+ line-height: var(--o3-lineheight-3);
+}
+```
+
+Then apply the brand data selector `data-o3-brand="[BRAND]"` on a container element within your HTML.
+
+```html
+<body data-o3-brand="core">
+ <a href="#" class="example-custom-link">Example</a>
+</body>
+```
+
+### Normalisation
+
+`o3-foundation` provides a set of CSS Custom Properties for normalising the default browser styles and also applies a set of defaults to elements. This is to ensure a consistent starting point for all projects and respective brands. The list of normalisations includes:
+
+- Normalising styles for `<html>, <body>`
+- Adding font-smoothing to mozilla and webkit browsers
+- Reducing motion for users who have requested it
+- Normalising links
+- Normalising text related elements
+- Normalising form elements
+
+### Focus rings
+
+`o3-foundation` provides a focus rings that is visually consistent across all brands. The focus rings consist two rings that are black and white. By default the outer ring is black and the inner ring is white. If you are using inverse theme the rings will revert to white and black respectively. To revert the focus rings, use the `o3-revert-focus` class on the element.
+
+### Fonts
+
+`o3-foundation` defines two `@font-face`-s. The first one is `Metric2-VF` and it is used fot all brands. The second one is `FinancierDisplayWeb` and currently used by core brand only.
+
+### Helper classes
+
+`o3-foundation` provides a set of helper classes to help with common tasks. The list of helper classes includes:
+
+- `o3-visually-hidden`: Hides an element visually, but leaves it available to screen readers
+- `o3-clearfix`: Clears floats on the current element
+- `o3-box-sizing-border-box`: Applies `box-sizing: border-box` to the current element and all its children
+
+## Migration
+
+|   State   | Major Version | Last Minor Release | Migration guide |
+| :-------: | :-----------: | :----------------: | :-------------: |
+| ✨ active |       0       |        N/A         |       N/A       |
+
+## Contact
+
+If you have any questions or comments about this component, or need help using it, please either [raise an issue](https://github.com/Financial-Times/origami/issues/new?labels=o3-foundation,components), visit [#origami-support](https://financialtimes.slack.com/messages/#origami-support/) or email [[email protected]](mailto:[email protected]).
+
+## Licence
+
+This software is published by the Financial Times under the [MIT licence](http://opensource.org/licenses/MIT).

components/o3-foundation/main.css

@@ -0,0 +1,221 @@
+/* Default Font styles */
+
+@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-weight: 400;
+	font-style: normal;
+	font-display: swap;
+}
+
+/*
+* Adds normalising styles to general html elements
+* effects: <html>, <body>,
+*/
+html,
+body {
+	margin: 0;
+	text-rendering: optimizeLegibility;
+}
+
+/* Adds font smoothing */
+.o3-font-smoothing {
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+/* Reduce motion */
+@media (prefers-reduced-motion: reduce) {
+	*,
+	*:before,
+	*:after {
+		animation-duration: 0.001s !important; /* stylelint-disable-line declaration-no-important */
+		transition-duration: 0.001s !important; /* stylelint-disable-line declaration-no-important */
+		animation-iteration-count: 1 !important; /* stylelint-disable-line declaration-no-important */
+	}
+}
+
+/* add normalising to links */
+a:active,
+a:hover {
+	outline-width: 0;
+}
+
+/* add normalising to text related elements */
+
+/* 1. Remove the bottom border in Firefox 39-. */
+/* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */
+/* stylelint-disable-next-line selector-no-qualifying-type */
+abbr[title] {
+	border-bottom: 0; /* [1] */
+	text-decoration: underline; /*  [2] */
+	/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
+	text-decoration: underline dotted; /* [2] */
+}
+
+/* Prevent the duplicate application of `bolder` by the next rule in Safari 6. */
+b,
+strong {
+	font-weight: inherit;
+}
+
+/* Add the correct font weight in Chrome, Edge, and Safari. */
+b,
+strong {
+	font-weight: bolder;
+}
+
+/* Add the correct font style in Android 4.3-. */
+dfn {
+	font-style: italic;
+}
+
+/*
+* Prevent `sub` and `sup` elements from affecting the line height in
+* all browsers.
+*/
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+/* add normalising styles to form elements */
+/* Restore the font weight unset by the previous rule. */
+optgroup {
+	font-weight: bold;
+}
+
+/* Remove the margin in Safari. */
+/* 1. Remove the margin in Firefox and Safari. */
+button,
+input,
+select,
+textarea {
+	/* [1] */
+	margin: 0;
+}
+
+/* Change the cursor in all browsers (opinionated). */
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+	cursor: pointer;
+}
+
+/* Restore the default cursor to disabled elements unset by the previous rule. */
+[disabled] {
+	cursor: default;
+}
+
+/* Remove the inner border and padding in Firefox. */
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+	border: 0;
+	padding: 0;
+}
+
+/*
+* Visually hide an element while still
+*	allowing it to be read by screen readers
+*/
+.o3-visually-hidden {
+	position: absolute;
+	clip: rect(0 0 0 0);
+	clip-path: polygon(0 0, 0 0);
+	margin: -1px;
+	border: 0;
+	overflow: hidden;
+	padding: 0;
+	width: 2px;
+	height: 2px;
+	white-space: nowrap;
+}
+
+/* Clearfix styles on the current element */
+.o3-clearfix::after {
+	zoom: 1;
+
+	:before,
+	:after {
+		content: '';
+		display: table;
+		/* stylelint-disable-next-line declaration-block-no-duplicate-properties */
+		display: flex;
+	}
+	:after {
+		clear: both;
+	}
+}
+
+/* Adds box sizing to current and all children elements */
+.o3-box-sizing-border-box {
+	box-sizing: border-box;
+	*,
+	*:before,
+	*:after {
+		box-sizing: inherit;
+	}
+}
+
+/* global focus styles */
+:focus {
+	box-shadow: var(--o3-box-shadow-focus-ring-inner),
+		var(--o3-box-shadow-focus-ring-outer);
+	outline: unset;
+}
+
+[data-o3-theme='inverse']:focus,
+:where([data-o3-theme='inverse']) :focus {
+	box-shadow: var(--o3-box-shadow-focus-ring-inverse-inner),
+		var(--o3-box-shadow-focus-ring-inverse-outer);
+}
+
+@supports selector(:focus-visible) {
+	:focus {
+		box-shadow: unset;
+	}
+
+	:focus-visible {
+		box-shadow: var(--o3-box-shadow-focus-ring-inner),
+			var(--o3-box-shadow-focus-ring-outer);
+		outline: unset;
+	}
+	[data-o3-theme='inverse']:focus-visible,
+	:where([data-o3-theme='inverse']) :focus-visible {
+		box-shadow: var(--o3-box-shadow-focus-ring-inverse-inner),
+			var(--o3-box-shadow-focus-ring-inverse-outer);
+	}
+}
+
+/* revert global styles */
+.o3-revert-focus:focus {
+	outline: revert;
+	box-shadow: revert;
+}
+
+.o3-revert-focus:focus-visible {
+	outline: revert;
+	box-shadow: revert;
+}

components/o3-web-token/origami.json → components/o3-foundation/origami.json

@@ -2,7 +2,7 @@
 	"origamiType": "component",
 	"origamiVersion": "3.0",
 	"brands": ["core", "internal", "whitelabel"],
-	"support": "https://github.com/Financial-Times/origami/issues/new?labels=o3-web-token-experimental,components",
+	"support": "https://github.com/Financial-Times/origami/issues/new?labels=o3-foundation-experimental,components",
 	"supportContact": {
 		"email": "[email protected]",
 		"slack": "#origami-support"