2025 release

.github/labeler.yml

@@ -82,6 +82,8 @@ o-normalise:
   - components/o-normalise/**/*
 o-overlay:
   - components/o-overlay/**/*
+o-private-foundation:
+  - components/o-private-foundation/**/*
 o-quote:
   - components/o-quote/**/*
 o-share:

.github/workflows/test.yml

@@ -85,6 +85,8 @@ jobs:
             - 'components/o-normalise/**'
           components/o-overlay:
             - 'components/o-overlay/**'
+          components/o-private-foundation:
+            - 'components/o-private-foundation/**'
           components/o-quote:
             - 'components/o-quote/**'
           components/o-share:
@@ -236,7 +238,6 @@ jobs:
       - name: Install node modules
         run: npm ci
       - run: npm run -w ${{ matrix.component }} lint --if-present
-      - run: npm run -w ${{ matrix.component }} build --if-present
       - run: npm run -w ${{ matrix.component }} test --if-present
   test-results:
     runs-on: ubuntu-latest

.prettierignore

@@ -3,4 +3,4 @@ tools/*
 !tools/create-component
 !tools/o3-chrome-extension
 apps/website/_emails/
-apps/dictionary/tokens
+apps/dictionary/tokens

.release-please-manifest.json

@@ -32,6 +32,7 @@
 	"components/o-multi-select": "2.2.7",
 	"components/o-normalise": "3.3.2",
 	"components/o-overlay": "4.2.13",
+	"components/o-private-foundation": "0.0.0",
 	"components/o-quote": "5.3.4",
 	"components/o-share": "10.0.3",
 	"components/o-social-follow": "1.0.11",

README.md

@@ -116,7 +116,7 @@ brew install rg
 
      ```shell
      npm run build-storybook -w apps/o3-storybook/
-     npm run storybook -w apps/o3-storybook/ 
+     npm run storybook -w apps/o3-storybook/
      ```
 
    - For Origami Design System website, run the following command:
@@ -137,7 +137,6 @@ Follow the [quick start guide](#quick-start) to get started developing component
 
 Storybook can be run locally with the `storybook` command.
 
-
 ```shell
 npm run storybook
 ```
@@ -207,6 +206,14 @@ Run tests for a given component with the npm `test` script.
 npm run test -w components/o-example
 ```
 
+Run tests for all components with the npm `test` script.
+
+```shell
+npm run test -w components
+```
+
+_Note: This will take a good amount of time when running on localhost._
+
 Run JavaScript tests in a browser using the `debug:js` script.
 
 ```shell
@@ -219,6 +226,14 @@ Lint the code of a given component with the npm `lint` script.
 npm run lint -w components/o-example
 ```
 
+Run linting for all components with the npm `test` script.
+
+```shell
+npm run lint -w components
+```
+
+_Note: This will take a good amount of time when running on localhost._
+
 ### Tips
 
 - If you're working on the storybook configuration and it starts acting weird

apps/dictionary/package.json

@@ -20,7 +20,7 @@
 	},
 	"devDependencies": {
 		"@tokens-studio/sd-transforms": "^1.2.3",
-		"style-dictionary": "^4.1.0"
+		"style-dictionary": "^4.1.3"
 	},
 	"volta": {
 		"node": "22.11.0"

apps/dictionary/src/build.js

@@ -1,6 +1,7 @@
 import {StyleDictionaryPackageWithTransforms} from './config/styledictionary.js';
 import {getBrandSourcesAndIncludes, getBrandNames} from './utils.js';
 import {cssConfigForBrand} from './config/platforms/css.js';
+import {sassConfigForBrand} from './config/platforms/sass.js';
 import {toolingConfigForBrand} from './config/platforms/tooling.js';
 
 const brands = getBrandNames();
@@ -32,6 +33,7 @@ export async function buildForBrand(brand) {
 		},
 		platforms: {
 			css: cssConfigForBrand(brand),
+			sass: sassConfigForBrand(brand),
 			tooling: toolingConfigForBrand(brand),
 		},
 	};

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

@@ -23,8 +23,7 @@ function cssConfigForBrand(brand) {
 						return false;
 					}
 					return (
-						!token.filePath.includes(`/components/`) &&
-						token.path[1] !== 'icons'
+						!token.filePath.includes(`/components/`) && token.path[1] !== 'icon'
 					);
 				},
 				destination: `o3-foundation/src/css/tokens/${brand}/_variables.css`,
@@ -36,7 +35,7 @@ function cssConfigForBrand(brand) {
 			},
 			{
 				filter: token => {
-					return token.path[1] === 'icons';
+					return token.path[1] === 'icon';
 				},
 				destination: `o3-foundation/src/css/tokens/_icons.css`,
 				format: 'css/variables',

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

@@ -0,0 +1,26 @@
+import path from 'node:path';
+import {sharedTransformers} from '../transformers.js';
+
+function sassConfigForBrand(brand) {
+	const parentBrand = brand.split('/').slice(-1);
+	return {
+		transformGroup: 'scss',
+		transforms: [
+			...sharedTransformers,
+			'value/figma-shadow-shorthand',
+			'value/transformSVG',
+		],
+		buildPath: path.join(process.cwd(), '../../components/'),
+		files: [
+			{
+				destination: `o-private-foundation/src/scss/tokens/${parentBrand}.scss`,
+				format: 'origami/scss/map-flat',
+				options: {
+					outputReferences: false,
+				},
+			},
+		],
+	};
+}
+
+export {sassConfigForBrand};

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

@@ -13,15 +13,15 @@ function toolingConfigForBrand(brand) {
 		files: [
 			{
 				filter: token => {
-					token.path[1] === 'icons';
+					return token.path[1] === 'icon';
 				},
 				destination: 'icons/_variables.js',
 				format: 'tooling/esm',
 			},
 			{
 				filter: token => {
 					return (
-						token.path[1] !== 'icons' &&
+						token.path[1] !== 'icon' &&
 						!token.filePath.includes(`/components/`) &&
 						token.original.value !== '{DO-NOT-USE}' &&
 						token.path[0] !== 'DO-NOT-USE'

apps/dictionary/src/config/styledictionary.js

@@ -9,6 +9,10 @@ import {privatePrefix} from '../transforms/private-prefix.js';
 
 register(StyleDictionaryPackage);
 
+StyleDictionaryPackage.format
+
+const originalScssMapFlat = StyleDictionaryPackage.hooks.formats['scss/map-flat'];
+
 StyleDictionaryPackage.registerTransform({
 	name: 'name/origamiPrivatePrefix',
 	type: 'name',
@@ -44,6 +48,24 @@ StyleDictionaryPackage.registerTransform({
 	transform: tintGroup,
 });
 
+// Workaround to allow font families to be processed correctly by map-flat. From https://github.com/amzn/style-dictionary/issues/298#issuecomment-2173382666
+StyleDictionaryPackage.registerFormat({
+	name: 'origami/scss/map-flat',
+	format: (args) => {
+		const { dictionary } = args;
+		const fontFamilyTokens =
+			dictionary.allTokens.filter(({ type }) => type === 'fontFamily');
+		fontFamilyTokens.forEach((token) => {
+			const { value } = token;
+			// encase in interpolation so map value is treated as singular value
+			token.value = `(${value})`;
+		});
+
+		return originalScssMapFlat(args);
+	},
+});
+
+
 StyleDictionaryPackage.registerTransform({
 	name: 'value/figma-shadow-shorthand',
 	type: 'value',

apps/dictionary/src/formatters/js/tooling.js

@@ -14,6 +14,11 @@ const toolingFormat = ({dictionary}) => {
 					originalValue: token.original.value,
 					type,
 					description: token.description,
+					attributes: {
+						item: token.attributes.item,
+						subitem: token.attributes.subitem,
+						state: token.attributes.state,
+					},
 					origamiKeys: token.origamiKeys,
 					path: token.path,
 					origamiTint: token.origamiTint,

apps/dictionary/src/transforms/private-prefix.js

@@ -1,7 +1,20 @@
 import {tokenStudioThemeToBrand, getTokenStudioThemes} from '../utils.js';
 
+const sourceExceptions = ['base/typography', 'base/border-radius']
+
 const privatePrefix = token => {
-	return isTokenStudioSource(token) ? `_${token.name}` : token.name;
+	const isSourceExceptionForEngineering = token => {
+		// We do not want to export our typography scale and border radius in Figma for end users.
+		// However, to support migration efforts we want it to still be available in the engineering token set.
+		if (sourceExceptions.find((sourceException) => token.filePath.includes(sourceException))) {
+			return true;
+		}
+		return false;
+	};
+
+	return isTokenStudioSource(token) && !isSourceExceptionForEngineering(token)
+		? `_${token.name}`
+		: token.name;
 };
 
 /*Get token theme from brand in token set file path.*/

apps/dictionary/tokens/$metadata.json

@@ -14,25 +14,14 @@
     "core/components/o3-form/use-case",
     "core/professional/base/color",
     "core/professional/use-case/color",
-    "core/professional/use-case/typography",
     "core/professional/components/o3-form",
     "core/professional/components/o3-form/use-case",
     "core/professional/components/o3-button",
     "core/professional/components/o3-tooltip",
-    "sustainable-views/base/spacing",
-    "sustainable-views/base/typography",
-    "sustainable-views/base/color",
-    "sustainable-views/use-case/color",
-    "sustainable-views/use-case/focus",
-    "sustainable-views/use-case/typography",
-    "sustainable-views/components/o3-editorial-typography",
-    "sustainable-views/components/o3-button",
-    "sustainable-views/components/o3-tooltip",
-    "sustainable-views/components/o3-form",
-    "sustainable-views/components/o3-form/use-case",
     "internal/base/color",
     "internal/base/typography",
     "internal/base/spacing",
+    "internal/base/border-radius",
     "internal/use-case/color",
     "internal/use-case/focus",
     "internal/use-case/typography",
@@ -52,6 +41,18 @@
     "whitelabel/components/o3-form",
     "whitelabel/components/o3-form/use-case",
     "whitelabel/components/o3-editorial-typography",
+    "sustainable-views/base/border-radius",
+    "sustainable-views/base/spacing",
+    "sustainable-views/base/typography",
+    "sustainable-views/base/color",
+    "sustainable-views/use-case/color",
+    "sustainable-views/use-case/focus",
+    "sustainable-views/use-case/typography",
+    "sustainable-views/components/o3-editorial-typography",
+    "sustainable-views/components/o3-button",
+    "sustainable-views/components/o3-tooltip",
+    "sustainable-views/components/o3-form",
+    "sustainable-views/components/o3-form/use-case",
     "utility-tokens",
     "icons/icons"
   ]