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