From 0efb08e617b0761d4b53340dcf323d8dccce1f1e Mon Sep 17 00:00:00 2001 From: Christian Vuerings Date: Fri, 1 Mar 2024 11:08:27 -0800 Subject: [PATCH] Add tests + fallback colors --- apps/storybook/.storybook/preview.tsx | 1 - apps/storybook/stories/Colors.tsx | 5 +- .../syntax-core/src/Button/Button.module.css | 12 --- .../syntax-core/src/IconButton/IconButton.tsx | 5 +- .../syntax-core/src/LinkButton/LinkButton.tsx | 5 +- .../src/ThemeProvider/ThemeProvider.test.tsx | 43 ++++++++ .../src/ThemeProvider/ThemeProvider.tsx | 98 ++++++++++++++++++- .../syntax-core/src/colors/colors.module.css | 8 ++ packages/syntax-design-tokens/config.json | 72 -------------- .../tokens/color/base.json | 18 ++-- packages/syntax-tsconfig/react-library.json | 1 + turbo.json | 2 +- 12 files changed, 165 insertions(+), 105 deletions(-) diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx index 061bb47e..1beacaff 100644 --- a/apps/storybook/.storybook/preview.tsx +++ b/apps/storybook/.storybook/preview.tsx @@ -1,7 +1,6 @@ import React from "react"; import { Preview } from "@storybook/react"; import ThemeProvider from "../../../packages/syntax-core/src/ThemeProvider/ThemeProvider"; -import "@cambly/syntax-design-tokens/dist/css/variables.css"; const preview: Preview = { globalTypes: { diff --git a/apps/storybook/stories/Colors.tsx b/apps/storybook/stories/Colors.tsx index e0d764c6..42b4674b 100644 --- a/apps/storybook/stories/Colors.tsx +++ b/apps/storybook/stories/Colors.tsx @@ -51,15 +51,14 @@ export default function Colors() { color: [ "color-cambio-white", - "color-cambio-gray-88", - "color-cambio-gray-96", "color-cambio-cream", "color-cambio-pink", "color-cambio-sky", - "color-cambio-yellow", + "color-cambio-yellow-700", "color-cambio-transparent-full", "color-base-gray-10", "color-base-gray-30", + "color-base-yellow-700", "color-base-white", ].includes(key) || (number && parseInt(number) < 400) diff --git a/packages/syntax-core/src/Button/Button.module.css b/packages/syntax-core/src/Button/Button.module.css index 5d0f7bb7..2ae0cd6a 100644 --- a/packages/syntax-core/src/Button/Button.module.css +++ b/packages/syntax-core/src/Button/Button.module.css @@ -126,18 +126,6 @@ border: 1px solid var(--color-base-destructive-300); } -.cambioSecondaryBorder { - border: 1px solid var(--color-cambio-black); -} - -.cambioSecondaryDestructiveBorder { - border: 1px solid var(--color-cambio-destructive); -} - -.cambioSecondarySuccessBorder { - border: 1px solid var(--color-cambio-success); -} - @keyframes syntaxButtonLoadingRotate { 0% { transform-origin: 50% 50%; diff --git a/packages/syntax-core/src/IconButton/IconButton.tsx b/packages/syntax-core/src/IconButton/IconButton.tsx index ae2bdfd6..244fd3cc 100644 --- a/packages/syntax-core/src/IconButton/IconButton.tsx +++ b/packages/syntax-core/src/IconButton/IconButton.tsx @@ -33,14 +33,13 @@ type IconButtonProps = { * The color of the button * * Classic only: - * * `destructive-tertiary` - * * `success-primary` - * * `success-secondary` * * `inverse` + * * `success` * * Cambio only: * * `success-primary` * * `success-secondary` + * * `success-tertiary` * * @defaultValue "primary" */ diff --git a/packages/syntax-core/src/LinkButton/LinkButton.tsx b/packages/syntax-core/src/LinkButton/LinkButton.tsx index 0313340a..aa1e1af8 100644 --- a/packages/syntax-core/src/LinkButton/LinkButton.tsx +++ b/packages/syntax-core/src/LinkButton/LinkButton.tsx @@ -47,14 +47,13 @@ type LinkButtonProps = { * The color of the button * * Classic only: - * * `success-primary` - * * `success-secondary` * * `inverse` + * * `success` * * Cambio only: - * * `destructive-tertiary` * * `success-primary` * * `success-secondary` + * * `success-tertiary` * * @defaultValue "primary" */ diff --git a/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx b/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx index b471a7c5..afff5c4e 100644 --- a/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx +++ b/packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx @@ -27,4 +27,47 @@ describe("themeProvider", () => { expect(screen.getByTestId("themeName")).toHaveTextContent(themeName); }); + + it("renders the correct classic styles", () => { + render( + + + , + ); + + expect(screen.getByTestId("themeprovider-style")).toContainHTML( + "--color-base-black: #000000;", + ); + expect(screen.getByTestId("themeprovider-style")).toContainHTML( + "--color-base-white: #ffffff;", + ); + expect(screen.getByTestId("themeprovider-style")).toContainHTML( + "--color-base-gray-10: rgba(203, 203, 203, 0.5);", + ); + expect(screen.getByTestId("themeprovider-style")).not.toContainHTML( + "cambio", + ); + }); + + it("renders the correct cambio styles", () => { + render( + + + , + ); + + expect(screen.getByTestId("themeprovider-style")).toContainHTML( + "--color-base-black: #050500;", + ); + expect(screen.getByTestId("themeprovider-style")).toContainHTML( + "--color-base-white: #ffffff;", + ); + expect(screen.getByTestId("themeprovider-style")).toContainHTML( + "--color-base-gray-100: #faf4eb;", + ); + expect(screen.getByTestId("themeprovider-style")).toContainHTML( + "--color-base-primary-100: #faf4eb;", + ); + expect(screen.getByTestId("themeprovider-style")).toContainHTML("cambio"); + }); }); diff --git a/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx b/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx index ed700cbe..033d2cc9 100644 --- a/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx +++ b/packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx @@ -1,4 +1,5 @@ import React, { useMemo } from "react"; +import variables from "@cambly/syntax-design-tokens/dist/json/variables.json"; type ThemeName = "classic" | "cambio"; @@ -11,6 +12,92 @@ const ThemeContext = React.createContext({ }); ThemeContext.displayName = "ThemeContext"; +const classicToCambioKeyLookup = { + "color-base-black": "color-cambio-black", + "color-base-destructive-100": "color-cambio-destructive-100", + "color-base-destructive-200": undefined, // Deprecated - to be deleted + "color-base-destructive-300": "color-cambio-destructive-300", + "color-base-destructive-700": "color-cambio-destructive-700", + "color-base-destructive-800": undefined, // Deprecated - to be deleted + "color-base-destructive-900": "color-cambio-destructive-900", + "color-base-gray-10": "color-cambio-gray-370", + "color-base-gray-30": "color-cambio-gray-370", + "color-base-gray-60": "color-cambio-gray-870", + "color-base-gray-80": "color-cambio-gray-870", + "color-base-gray-100": "color-cambio-gray-100", + "color-base-gray-200": "color-cambio-gray-200", + "color-base-gray-300": "color-cambio-gray-300", + "color-base-gray-700": "color-cambio-gray-700", + "color-base-gray-800": "color-cambio-gray-800", + "color-base-gray-900": "color-cambio-gray-900", + "color-base-orange-100": undefined, // Deprecated - to be deleted + "color-base-orange-200": undefined, // Deprecated - to be deleted + "color-base-orange-300": undefined, // Deprecated - to be deleted + "color-base-orange-700": "color-cambio-orange", + "color-base-orange-800": undefined, // Deprecated - to be deleted + "color-base-orange-900": undefined, // Deprecated - to be deleted + "color-base-primary-100": "color-cambio-gray-100", + "color-base-primary-200": "color-cambio-gray-200", + "color-base-primary-300": "color-cambio-gray-300", + "color-base-primary-700": "color-cambio-gray-700", + "color-base-primary-800": "color-cambio-gray-800", + "color-base-primary-900": "color-cambio-gray-900", + "color-base-success-100": "color-cambio-success-100", + "color-base-success-200": undefined, // Deprecated - to be deleted + "color-base-success-300": "color-cambio-success-300", + "color-base-success-700": "color-cambio-success-700", + "color-base-success-800": undefined, // Deprecated - to be deleted + "color-base-success-900": "color-cambio-success-900", + "color-base-purple-100": undefined, // Deprecated - to be deleted + "color-base-purple-200": undefined, // Deprecated - to be deleted + "color-base-purple-300": undefined, // Deprecated - to be deleted + "color-base-purple-700": "color-cambio-purple", + "color-base-purple-800": undefined, // Deprecated - to be deleted + "color-base-purple-900": undefined, // Deprecated - to be deleted + "color-base-yellow-100": undefined, // Deprecated - to be deleted + "color-base-yellow-200": undefined, // Deprecated - to be deleted + "color-base-yellow-300": undefined, // Deprecated - to be deleted + "color-base-yellow-700": "color-cambio-yellow-700", + "color-base-yellow-800": undefined, // Deprecated - to be deleted + "color-base-yellow-900": undefined, // Deprecated - to be deleted + "color-base-white": "color-cambio-white", +}; + +function stylesForTheme(themeName: ThemeName) { + // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment + const tokenVariables: Record = variables; + return ` + :root { + ${Object.entries(tokenVariables) + .filter(([key]) => { + return themeName === "classic" ? !key.includes("cambio") : true; + }) + .map(([key, value]) => { + // Replace classic values with cambio ones if they exist + if ( + themeName === "cambio" && + classicToCambioKeyLookup[ + key as keyof typeof classicToCambioKeyLookup + ] + ) { + return [ + key, + tokenVariables[ + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + classicToCambioKeyLookup[ + key as keyof typeof classicToCambioKeyLookup + ]! + ], + ]; + } + return [key, value]; + }) + .map(([key, value]) => `--${key}: ${value};`) + .join("\n")} + } + `; +} + export default function ThemeProvider({ themeName = "classic", children, @@ -19,8 +106,17 @@ export default function ThemeProvider({ children: React.ReactNode; }): React.ReactElement { const value = useMemo(() => ({ themeName }), [themeName]); + + const innerStyles = useMemo(() => stylesForTheme(themeName), [themeName]); + return ( - {children} + + + {children} + ); } diff --git a/packages/syntax-core/src/colors/colors.module.css b/packages/syntax-core/src/colors/colors.module.css index 610059b3..5872a087 100644 --- a/packages/syntax-core/src/colors/colors.module.css +++ b/packages/syntax-core/src/colors/colors.module.css @@ -212,6 +212,14 @@ background-color: var(--color-base-yellow-700); } +.yellow800BackgroundColor { + background-color: var(--color-base-yellow-800); +} + +.yellow900BackgroundColor { + background-color: var(--color-base-yellow-900); +} + /* Cambio colors */ .cambioBlackColor { color: var(--color-cambio-black); diff --git a/packages/syntax-design-tokens/config.json b/packages/syntax-design-tokens/config.json index d3d6276f..e71fa705 100644 --- a/packages/syntax-design-tokens/config.json +++ b/packages/syntax-design-tokens/config.json @@ -40,78 +40,6 @@ "format": "json/flat" } ] - }, - "android": { - "transformGroup": "android", - "buildPath": "dist/android/", - "files": [ - { - "destination": "colors.xml", - "format": "android/colors" - } - ] - }, - "compose": { - "transformGroup": "compose", - "buildPath": "dist/compose/", - "files": [ - { - "destination": "StyleDictionaryColor.kt", - "format": "compose/object", - "className": "StyleDictionaryColor", - "packageName": "StyleDictionaryColor", - "filter": { - "attributes": { - "category": "color" - } - } - } - ] - }, - "ios-swift": { - "transformGroup": "ios-swift", - "buildPath": "dist/ios-swift/", - "files": [ - { - "destination": "StyleDictionary+Class.swift", - "format": "ios-swift/class.swift", - "className": "StyleDictionaryClass", - "filter": {} - }, - { - "destination": "StyleDictionary+Enum.swift", - "format": "ios-swift/enum.swift", - "className": "StyleDictionaryEnum", - "filter": {} - }, - { - "destination": "StyleDictionary+Struct.swift", - "format": "ios-swift/any.swift", - "className": "StyleDictionaryStruct", - "filter": {}, - "options": { - "imports": "SwiftUI", - "objectType": "struct", - "accessControl": "internal" - } - } - ] - }, - "ios-swift-separate-enums": { - "transformGroup": "ios-swift-separate", - "buildPath": "dist/ios-swift/", - "files": [ - { - "destination": "StyleDictionaryColor.swift", - "format": "ios-swift/enum.swift", - "className": "StyleDictionaryColor", - "filter": { - "attributes": { - "category": "color" - } - } - } - ] } } } diff --git a/packages/syntax-design-tokens/tokens/color/base.json b/packages/syntax-design-tokens/tokens/color/base.json index bc654aea..6ad7cc45 100644 --- a/packages/syntax-design-tokens/tokens/color/base.json +++ b/packages/syntax-design-tokens/tokens/color/base.json @@ -102,20 +102,20 @@ "900": { "value": "#312b23" } }, "destructive": { - "100": { "value": "#FFDEDA" }, - "300": { "value": "#FF8071" }, + "100": { "value": "#ffdeda" }, + "300": { "value": "#ff8071" }, "370": { "value": "rgba(255,128,113,0.7)" }, - "700": { "value": "#C93F32" }, + "700": { "value": "#c93f32" }, "770": { "value": "rgba(201,63,50,0.7)" }, - "900": { "value": "#6D0002" } + "900": { "value": "#6d0002" } }, "success": { - "100": { "value": "#DAF2C8" }, - "300": { "value": "#84CE64" }, + "100": { "value": "#daf2c8" }, + "300": { "value": "#84ce64" }, "370": { "value": "rgba(132,206,100,0.7)" }, - "700": { "value": "#3C7F20" }, + "700": { "value": "#3c7f20" }, "770": { "value": "rgba(60,127,32,0.7)" }, - "900": { "value": "#103E00" } + "900": { "value": "#103e00" } }, "red": { "value": "#f56e56" }, "orange": { "value": "#ff8f57" }, @@ -130,7 +130,7 @@ "slate": { "value": "#7c9fc6" }, "sky": { "value": "#b1e8fc" }, "yellow": { - "700": { "value": "#FFE733" } + "700": { "value": "#ffe733" } }, "transparent": { "full": { diff --git a/packages/syntax-tsconfig/react-library.json b/packages/syntax-tsconfig/react-library.json index f5ad7b4b..80dce82f 100644 --- a/packages/syntax-tsconfig/react-library.json +++ b/packages/syntax-tsconfig/react-library.json @@ -7,6 +7,7 @@ "lib": ["dom", "ES2015"], "module": "ESNext", "plugins": [{ "name": "typescript-plugin-css-modules" }], + "resolveJsonModule": true, "target": "es6" } } diff --git a/turbo.json b/turbo.json index bda8e4c4..004dfcbe 100644 --- a/turbo.json +++ b/turbo.json @@ -7,7 +7,7 @@ }, "test": { "outputs": ["coverage/**"], - "dependsOn": [] + "dependsOn": ["^build"] }, "test:watch": { "cache": false