Skip to content

Commit

Permalink
Add tests + fallback colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@christianvuerings
christianvuerings committed Mar 1, 2024
1 parent 3b4c21f commit 0efb08e
Show file tree
Hide file tree
Showing 12 changed files with 165 additions and 105 deletions.
1 change: 0 additions & 1 deletion apps/storybook/.storybook/preview.tsx
View file
@@ -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: {
Expand Down
5 changes: 2 additions & 3 deletions apps/storybook/stories/Colors.tsx
View file
Expand Up @@ -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)
Expand Down
12 changes: 0 additions & 12 deletions packages/syntax-core/src/Button/Button.module.css
View file
Expand Up @@ -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%;
Expand Down
5 changes: 2 additions & 3 deletions packages/syntax-core/src/IconButton/IconButton.tsx
View file
Expand Up @@ -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"
*/
Expand Down
5 changes: 2 additions & 3 deletions packages/syntax-core/src/LinkButton/LinkButton.tsx
View file
Expand Up @@ -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"
*/
Expand Down
43 changes: 43 additions & 0 deletions packages/syntax-core/src/ThemeProvider/ThemeProvider.test.tsx
View file
Expand Up @@ -27,4 +27,47 @@ describe("themeProvider", () => {

expect(screen.getByTestId("themeName")).toHaveTextContent(themeName);
});

it("renders the correct classic styles", () => {
render(
<ThemeProvider themeName="classic">
<ExampleComponent />
</ThemeProvider>,
);

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(
<ThemeProvider themeName="cambio">
<ExampleComponent />
</ThemeProvider>,
);

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");
});
});
98 changes: 97 additions & 1 deletion packages/syntax-core/src/ThemeProvider/ThemeProvider.tsx
View file
@@ -1,4 +1,5 @@
import React, { useMemo } from "react";
import variables from "@cambly/syntax-design-tokens/dist/json/variables.json";

type ThemeName = "classic" | "cambio";

Expand All @@ -11,6 +12,92 @@ const ThemeContext = React.createContext<Theme>({
});
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<string, string> = 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,
Expand All @@ -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 (
<ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
<ThemeContext.Provider value={value}>
<style
dangerouslySetInnerHTML={{ __html: innerStyles }}
data-testid="themeprovider-style"
></style>
{children}
</ThemeContext.Provider>
);
}

Expand Down
8 changes: 8 additions & 0 deletions packages/syntax-core/src/colors/colors.module.css
View file
Expand Up @@ -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);
Expand Down
72 changes: 0 additions & 72 deletions packages/syntax-design-tokens/config.json
View file
Expand Up @@ -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"
}
}
}
]
}
}
}
18 changes: 9 additions & 9 deletions packages/syntax-design-tokens/tokens/color/base.json
View file
Expand Up @@ -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" },
Expand All @@ -130,7 +130,7 @@
"slate": { "value": "#7c9fc6" },
"sky": { "value": "#b1e8fc" },
"yellow": {
"700": { "value": "#FFE733" }
"700": { "value": "#ffe733" }
},
"transparent": {
"full": {
Expand Down
1 change: 1 addition & 0 deletions packages/syntax-tsconfig/react-library.json
View file
Expand Up @@ -7,6 +7,7 @@
"lib": ["dom", "ES2015"],
"module": "ESNext",
"plugins": [{ "name": "typescript-plugin-css-modules" }],
"resolveJsonModule": true,
"target": "es6"
}
}
2 changes: 1 addition & 1 deletion turbo.json
View file
Expand Up @@ -7,7 +7,7 @@
},
"test": {
"outputs": ["coverage/**"],
"dependsOn": []
"dependsOn": ["^build"]
},
"test:watch": {
"cache": false
Expand Down

0 comments on commit 0efb08e

Please sign in to comment.