chore: Restore dictionary to an app

Remove as a library since we are not confident the pros outway the cons for now

.github/labeler.yml

@@ -134,8 +134,6 @@ o3-tooltip:
   - components/o3-tooltip/**/*
 o3-typography:
   - components/o3-typography/**/*
-dictionary:
-  - libraries/dictionary/**/*
 ftdomdelegate:
   - libraries/ftdomdelegate/**/*
 math:
@@ -154,6 +152,8 @@ o-utils:
   - libraries/o-utils/**/*
 o3-figma-sb-links:
   - libraries/o3-figma-sb-links/**/*
+o3-tooling-token:
+  - libraries/o3-tooling-token/**/*
 sass-mq:
   - libraries/sass-mq/**/*
 eslint-config-origami-component:
@@ -196,6 +196,8 @@ markdown-tabs:
   - apps/o2-storybook/addons/markdown-tabs/**/*
 astro-website:
   - apps/astro-website/**/*
+dictionary:
+  - apps/dictionary/**/*
 for-everyone-website:
   - apps/for-everyone-website/**/*
 o2-storybook:

.github/workflows/test.yml

@@ -137,8 +137,6 @@ jobs:
             - 'components/o3-tooltip/**'
           components/o3-typography:
             - 'components/o3-typography/**'
-          libraries/dictionary:
-            - 'libraries/dictionary/**'
           libraries/ftdomdelegate:
             - 'libraries/ftdomdelegate/**'
           libraries/math:
@@ -157,6 +155,8 @@ jobs:
             - 'libraries/o-utils/**'
           libraries/o3-figma-sb-links:
             - 'libraries/o3-figma-sb-links/**'
+          libraries/o3-tooling-token:
+            - 'libraries/o3-tooling-token/**'
           libraries/sass-mq:
             - 'libraries/sass-mq/**'
           presets/eslint-config-origami-component:
@@ -199,6 +199,8 @@ jobs:
             - 'apps/o2-storybook/addons/markdown-tabs/**'
           apps/astro-website:
             - 'apps/astro-website/**'
+          apps/dictionary:
+            - 'apps/dictionary/**'
           apps/for-everyone-website:
             - 'apps/for-everyone-website/**'
           apps/o2-storybook:

.release-please-manifest.json

@@ -57,7 +57,6 @@
 	"components/o3-foundation": "2.3.0",
 	"components/o3-social-sign-in": "1.0.1",
 	"components/o3-tooltip": "2.0.0",
-	"libraries/dictionary": "0.0.0",
 	"libraries/ftdomdelegate": "5.0.1",
 	"libraries/math": "1.1.1",
 	"libraries/o-autoinit": "3.1.4",

libraries/dictionary/package.json → apps/dictionary/package.json

@@ -14,7 +14,7 @@
 		"package.json",
 		"README.md"
 	],
-	"private": false,
+	"private": true,
 	"scripts": {
 		"build": "node src/build.js"
 	},

libraries/dictionary/src/config/platforms/css.js → apps/dictionary/src/config/platforms/css.js

@@ -1,3 +1,4 @@
+import path from 'node:path';
 import {sharedTransformers} from '../transformers.js';
 import components from '../components.js';
 import {outputReferencesTransformed} from 'style-dictionary/utils';
@@ -11,7 +12,7 @@ function cssConfigForBrand(brand) {
 			'value/figma-shadow-shorthand',
 			'value/transformSVG',
 		],
-		buildPath: `css/`,
+		buildPath: path.join(process.cwd(), '../../components/'),
 		files: [
 			{
 				filter: token => {
@@ -26,7 +27,7 @@ function cssConfigForBrand(brand) {
 						token.path[1] !== 'icons'
 					);
 				},
-				destination: `${parentBrand}/foundation.css`,
+				destination: `o3-foundation/src/css/tokens/${brand}/_variables.css`,
 				format: 'css/brand/classes',
 				options: {
 					outputReferences: outputReferencesTransformed,
@@ -37,7 +38,7 @@ function cssConfigForBrand(brand) {
 				filter: token => {
 					return token.path[1] === 'icons';
 				},
-				destination: `icons.css`,
+				destination: `o3-foundation/src/css/tokens/_icons.css`,
 				format: 'css/variables',
 				options: {
 					outputReferences: outputReferencesTransformed,
@@ -52,7 +53,7 @@ function cssConfigForBrand(brand) {
 						filter: token => {
 							return token.name.match(`^_?(${componentName})`);
 						},
-						destination: `${parentBrand}/${componentName}.css`,
+						destination: `${componentName}/src/css/tokens/${brand}/${componentName}/_variables.css`,
 						format: 'css/brand/classes',
 						options: {
 							outputReferences: outputReferencesTransformed,

apps/dictionary/src/config/platforms/tooling.js

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import {sharedTransformers} from '../transformers.js';
+
+function toolingConfigForBrand(brand) {
+	const parentBrand = brand.split('/').slice(-1);
+	return {
+		transformGroup: 'js',
+		transforms: [...sharedTransformers, 'Origami/tintGroup'],
+		buildPath: path.join(
+			process.cwd(),
+			'../../libraries/o3-tooling-token/build/'
+		),
+		files: [
+			{
+				filter: token => {
+					token.path[1] === 'icons';
+				},
+				destination: 'icons/_variables.js',
+				format: 'tooling/esm',
+			},
+			{
+				filter: token => {
+					return (
+						token.path[1] !== 'icons' &&
+						!token.filePath.includes(`/components/`) &&
+						token.original.value !== '{DO-NOT-USE}' &&
+						token.path[0] !== 'DO-NOT-USE'
+					);
+				},
+				destination: `${brand}/_variables.js`,
+				format: 'tooling/esm',
+			},
+		],
+	};
+}
+
+export {toolingConfigForBrand};

apps/for-everyone-website/package.json

@@ -26,6 +26,7 @@
 		"@financial-times/o3-form": "^0.5.0",
 		"@financial-times/o3-foundation": "^2.0.0",
 		"@financial-times/o3-social-sign-in": "^1.0.0",
+		"@financial-times/o3-tooling-token": "^0.0.0",
 		"@financial-times/o3-tooltip": "^2.0.0",
 		"astro": "^4.0.9",
 		"autoprefixer": "^10.4.20",
@@ -35,8 +36,7 @@
 		"react-dom": "^18.2.0",
 		"sharp": "^0.32.5",
 		"svelte": "^4.2.17",
-		"typescript": "^5.4.5",
-		"@financial-times/origami-dictionary": "^0.0.0"
+		"typescript": "^5.4.5"
 	},
 	"volta": {
 		"node": "22.2.0"

apps/for-everyone-website/src/components/Icons.astro

@@ -1,5 +1,5 @@
 ---
-const tokens = await import(`@financial-times/origami-dictionary/js/${Astro.props.brand}/tooling.js`);
+const tokens = await import(`@financial-times/o3-tooling-token/icons.js`);
 
 const iconTokens = Object.entries(tokens.default).filter(([key, value]) => value.path[1] === 'icons' ).map(([key, value]) => {
 	value.name = key;

apps/for-everyone-website/src/components/Palette.astro

@@ -1,5 +1,5 @@
 ---
-const tokens = await import(`@financial-times/origami-dictionary/js/${Astro.props.brand}/tooling.js`);
+const tokens = await import(`@financial-times/o3-tooling-token/${Astro.props.brand}.js`);
 const ColorTokens = Object.entries(tokens.default).filter(([key, value]) => value.type === 'color').map(([key, value]) => {
     value.name = key;
     return value

apps/for-everyone-website/src/components/Spacing.astro

@@ -1,6 +1,6 @@
 ---
 const tokens = await import(
-	`@financial-times/origami-dictionary/js/${Astro.props.brand}/tooling.js`
+	`@financial-times/o3-tooling-token/${Astro.props.brand}.js`
 );
 const spacingTokens = Object.entries(tokens.default)
 	.filter(([_key, value]) => value.path[1] === 'spacing')
@@ -40,7 +40,7 @@ const spacingsHaveDescription = Boolean(
 						</td>
 						{spacingsHaveDescription && <td>{token.description}</td>}
 						<td>
-							{token.value} ({token.originalValue})
+							{token.value}
 						</td>
 					</tr>
 				);

apps/for-everyone-website/src/components/TypeScale.astro

@@ -1,7 +1,7 @@
 ---
 import {Code} from '@astrojs/starlight/components';
 
-const allTokens = await import(`@financial-times/origami-dictionary/js/${Astro.props.brand}/tooling.js`);
+const allTokens = await import(`@financial-times/o3-tooling-token/${Astro.props.brand}.js`);
 
 function isTypeScaleToken(token) {
 	if(token.type !== 'fontSize' && token.type !== 'lineHeights') {
@@ -79,7 +79,7 @@ const typeScaleOrdered = Object.entries(typeScale).sort((a, b) => {
 			return (<tr>
 					<td
 						class={`token-sample ${Astro.props.scaleFamily ? `token-sample--${Astro.props.scaleFamily}` : ''}`}
-						style=`line-height: ${scale.lineHeights.value}; font-size: ${scale.fontSize.value}px`>Make sense of it all</td>
+						style=`line-height: ${scale.lineHeights.value}; font-size: ${scale.fontSize.value}`>Make sense of it all</td>
 					<td>{scaleKey}</td>
 					<td class="token-value">
 							{scale.fontSize.originalValue}px / {scale.lineHeights.originalValue}px <br>

components/o3-button/package.json

@@ -30,8 +30,7 @@
 	},
 	"private": false,
 	"peerDependencies": {
-		"@financial-times/o3-foundation": "^2.0.0",
-		"@financial-times/origami-dictionary": "^0.0.0"
+		"@financial-times/o3-foundation": "^2.0.0"
 	},
 	"devDependencies": {
 		"@financial-times/o3-figma-sb-links": "^0.0.0"

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

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/core.css';
-@import '@financial-times/origami-dictionary/css/core/o3-button.css';
+@import '../tokens/core/o3-button/_variables.css';
 @import '../../../main.css';

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

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/internal.css';
-@import '@financial-times/origami-dictionary/css/internal/o3-button.css';
+@import '../tokens/internal/o3-button/_variables.css';
 @import '../../../main.css';

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

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/professional.css';
-@import '@financial-times/origami-dictionary/css/professional/o3-button.css';
+@import '../tokens/core/professional/o3-button/_variables.css';
 @import '../../../main.css';

components/o3-button/src/css/brands/sustainable-views.css

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/sustainable-views.css';
-@import '@financial-times/origami-dictionary/css/sustainable-views/o3-button.css';
+@import '../tokens/sustainable-views/o3-button/_variables.css';
 @import '../../../main.css';

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

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/whitelabel.css';
-@import '@financial-times/origami-dictionary/css/whitelabel/o3-button.css';
+@import '../tokens/whitelabel/o3-button/_variables.css';
 @import '../../../main.css';

components/o3-editorial-typography/package.json

@@ -31,8 +31,7 @@
 	},
 	"private": false,
 	"peerDependencies": {
-		"@financial-times/o3-foundation": "^2.0.0",
-		"@financial-times/origami-dictionary": "^0.0.0"
+		"@financial-times/o3-foundation": "^2.0.0"
 	},
 	"devDependencies": {
 		"@financial-times/o3-figma-sb-links": "^0.0.0"

components/o3-editorial-typography/src/css/brands/core.css

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/core.css';
-@import '@financial-times/origami-dictionary/css/core/o3-editorial-typography.css';
+@import '../tokens/core/o3-editorial-typography/_variables.css';
 @import '../../../main.css';

components/o3-editorial-typography/src/css/brands/professional.css

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/professional.css';
-@import '@financial-times/origami-dictionary/css/professional/o3-editorial-typography.css';
+@import '../tokens/core/professional/o3-editorial-typography/_variables.css';
 @import '../../../main.css';

components/o3-editorial-typography/src/css/brands/sustainable-views.css

@@ -1,4 +1,4 @@
 @import '@financial-times/o3-foundation/css/sustainable-views.css';
-@import '@financial-times/origami-dictionary/css/sustainable-views/o3-editorial-typography.css';
+@import '../tokens/sustainable-views/o3-editorial-typography/_variables.css';
 @import '../../../main.css';
 @import '../../../summary.css';

components/o3-editorial-typography/src/css/brands/whitelabel.css

@@ -1,5 +1,5 @@
 @import '@financial-times/o3-foundation/css/whitelabel.css';
-@import '@financial-times/origami-dictionary/css/whitelabel/o3-editorial-typography.css';
+@import '../tokens/whitelabel/o3-editorial-typography/_variables.css';
 @import '../../../main.css';
 
 /* Currently unsupported by brands,

components/o3-form/package.json

@@ -36,8 +36,7 @@
 	"peerDependencies": {
 		"@financial-times/o-utils": "^2.2.1",
 		"@financial-times/o3-figma-sb-links": "^0.0.0",
-		"@financial-times/o3-foundation": "^2.0.0",
-		"@financial-times/origami-dictionary": "^0.0.0"
+		"@financial-times/o3-foundation": "^2.0.0"
 	},
 	"engines": {
 		"npm": ">7"

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

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/core.css';
-@import '@financial-times/origami-dictionary/css/core/o3-form.css';
+@import '../tokens/core/o3-form/_variables.css';
 @import '../../../main.css';

components/o3-form/src/css/brands/internal.css

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/internal.css';
-@import '@financial-times/origami-dictionary/css/internal/o3-form.css';
+@import '../tokens/internal/o3-form/_variables.css';
 @import '../../../main.css';

components/o3-form/src/css/brands/professional.css

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/professional.css';
-@import '@financial-times/origami-dictionary/css/professional/o3-form.css';
+@import '../tokens/core/professional/o3-form/_variables.css';
 @import '../../../main.css';

components/o3-form/src/css/brands/sustainable-views.css

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/sustainable-views.css';
-@import '@financial-times/origami-dictionary/css/sustainable-views/o3-form.css';
+@import '../tokens/sustainable-views/o3-form/_variables.css';
 @import '../../../main.css';

components/o3-form/src/css/brands/whitelabel.css

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/whitelabel.css';
-@import '@financial-times/origami-dictionary/css/whitelabel/o3-form.css';
+@import '../tokens/whitelabel/o3-form/_variables.css';
 @import '../../../main.css';

components/o3-foundation/main.css

@@ -1,4 +1,4 @@
-@import '@financial-times/origami-dictionary/css/icons.css';
+@import './src/css/tokens/_icons.css';
 @import './src/css/components/fonts.css';
 @import './src/css/components/normalise.css';
 @import './src/css/components/z-index.css';

components/o3-foundation/package.json

@@ -36,8 +36,5 @@
 	"devDependencies": {
 		"@financial-times/o3-figma-sb-links": "^0.0.0"
 	},
-	"peerDependencies": {
-		"@financial-times/origami-dictionary": "^0.0.0"
-	},
 	"private": false
 }

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

@@ -1,9 +1,8 @@
-@import '@financial-times/origami-dictionary/css/core/foundation.css';
+@import '../tokens/core/_variables.css';
 @import '../../../main.css';
 
 @font-face {
-	src: url('https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=FinancierDisplay-VF&system_code=origami&font_format=woff2')
-		format('woff2-variations');
+	src: url('https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=FinancierDisplay-VF&system_code=origami&font_format=woff2') format('woff2-variations');
 	font-family: 'financier display VF';
 	font-weight: 300 800;
 	font-style: normal;

components/o3-foundation/src/css/brands/internal.css

@@ -1,2 +1,2 @@
-@import '@financial-times/origami-dictionary/css/internal/foundation.css';
+@import '../tokens/internal/_variables.css';
 @import '../../../main.css';

components/o3-foundation/src/css/brands/professional.css

@@ -1,2 +1,2 @@
-@import '@financial-times/origami-dictionary/css/professional/foundation.css';
+@import '../tokens/core/professional/_variables.css';
 @import '../../../main.css';

components/o3-foundation/src/css/brands/sustainable-views.css

@@ -1,18 +1,16 @@
-@import '@financial-times/origami-dictionary/css/sustainable-views/foundation.css';
+@import '../tokens/sustainable-views/_variables.css';
 @import '../../../main.css';
 
 @font-face {
-	src: url('https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=FinancierDisplay-VF&system_code=origami&font_format=woff2')
-		format('woff2-variations');
+	src: url('https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=FinancierDisplay-VF&system_code=origami&font_format=woff2') format('woff2-variations');
 	font-family: 'financier display VF';
 	font-weight: 300 800;
 	font-style: normal;
 	font-display: swap;
 }
 
 @font-face {
-	src: url('https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=FinancierTextWeb-VF&system_code=origami&font_format=woff2')
-		format('woff2-variations');
+	src: url('https://www.ft.com/__origami/service/build/v3/font?version=1.13&font_name=FinancierTextWeb-VF&system_code=origami&font_format=woff2') format('woff2-variations');
 	font-family: 'financier text VF';
 	font-weight: 1 800;
 	font-style: normal;

components/o3-foundation/src/css/brands/whitelabel.css

@@ -1,2 +1,2 @@
-@import '@financial-times/origami-dictionary/css/whitelabel/foundation.css';
+@import '../tokens/whitelabel/_variables.css';
 @import '../../../main.css';

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

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/core.css';
-@import '@financial-times/origami-dictionary/css/core/o3-tooltip.css';
+@import '../tokens/core/o3-tooltip/_variables.css';
 @import '../../../main.css';

components/o3-tooltip/src/css/brands/internal.css

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/internal.css';
-@import '@financial-times/origami-dictionary/css/internal/o3-tooltip.css';
+@import '../tokens/internal/o3-tooltip/_variables.css';
 @import '../../../main.css';

components/o3-tooltip/src/css/brands/professional.css

@@ -1,3 +1,3 @@
 @import '@financial-times/o3-foundation/css/professional.css';
-@import '@financial-times/origami-dictionary/css/professional/o3-tooltip.css';
+@import '../tokens/core/professional/o3-tooltip/_variables.css';
 @import '../../../main.css';