feat: theme tokens update after figma variables release (#8)

* feat: theme tokens update after figma variables release * fix(theme): rename tokens --------- Co-authored-by: mwleklinskiVL <[email protected]>
VirtusLab · Jul 17, 2023 · 124ce87 · 124ce87
1 parent e0ecd6f
commit 124ce87
Show file tree

Hide file tree

Showing 5 changed files with 2,015 additions and 1,893 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -5,7 +5,7 @@ export const Button = () => {
   const [clicked, setClicked] = useState(false);
   return (
     <tet.button
-      color="$a-color-action-destructive-active"
+      color="action-destructive-active"
       onClick={() => setClicked(true)}
       disabled={clicked}
     >

diff --git a/src/tetrisly/tetrisly.test.tsx b/src/tetrisly/tetrisly.test.tsx
@@ -7,23 +7,23 @@ describe("check tetrisly provider, and correct styling", () => {
   it("with no theme provided should use default theme", () => {
     render(
       <TetrislyProvider>
-        <tet.button color="$g-color-blue-+1">Click me</tet.button>
+        <tet.button color="blue-+1">Click me</tet.button>
       </TetrislyProvider>
     );
     const button = screen.getByText("Click me");
-    expect(button).toHaveStyle(`color: ${theme.colors["$g-color-blue-+1"]}`);
+    expect(button).toHaveStyle(`color: ${theme.colors["blue-+1"]}`);
   });
   it("with theme provided should use theme", () => {
     const customColor = "rgb(255, 0, 0)";
     render(
       <TetrislyProvider
         theme={{
           colors: {
-            "$g-color-blue-+1": customColor,
+            "blue-+1": customColor,
           },
         }}
       >
-        <tet.button color="$g-color-blue-+1" backgroundColor="$g-color-blue-+2">
+        <tet.button color="blue-+1" backgroundColor="blue-+2">
           Click me
         </tet.button>
       </TetrislyProvider>
@@ -37,19 +37,19 @@ describe("check tetrisly provider, and correct styling", () => {
       <TetrislyProvider
         theme={{
           colors: {
-            "$g-color-blue-+1": customColor,
+            "blue-+1": customColor,
           },
         }}
       >
-        <tet.button color="$g-color-blue-+1" backgroundColor="$g-color-blue-+2">
+        <tet.button color="blue-+1" backgroundColor="blue-+2">
           Click me
         </tet.button>
       </TetrislyProvider>
     );
     const button = screen.getByText("Click me");
     expect(button).toHaveStyle(`color: ${customColor}`);
     expect(button).toHaveStyle(
-      `background-color: ${theme.colors["$g-color-blue-+2"]}`
+      `background-color: ${theme.colors["blue-+2"]}`
     );
   });
 });