From 30c217ffc018e998500d48633d015339829eb3d9 Mon Sep 17 00:00:00 2001
From: "Piotr G." <piotr.gulbis@vivid-planet.com>
Date: Thu, 19 Dec 2024 16:41:47 +0100
Subject: [PATCH] Demo: fix sites theme color palettes (#2965)

---
 demo/site-pages/src/components/Breadcrumbs.sc.ts     | 6 +++---
 demo/site-pages/src/header/Header.tsx                | 2 +-
 demo/site-pages/src/pages/_app.tsx                   | 2 +-
 demo/site-pages/src/topNavigation/TopNavigation.tsx  | 6 +++---
 demo/site/src/common/blocks/TextLinkBlock.tsx        | 4 ++--
 demo/site/src/common/components/Breadcrumbs.sc.ts    | 6 +++---
 demo/site/src/common/helpers/CookiePlaceholders.tsx  | 2 +-
 demo/site/src/layout/header/Header.tsx               | 4 ++--
 demo/site/src/layout/topNavigation/TopNavigation.tsx | 8 ++++----
 demo/site/src/news/NewsList.tsx                      | 4 ++--
 10 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/demo/site-pages/src/components/Breadcrumbs.sc.ts b/demo/site-pages/src/components/Breadcrumbs.sc.ts
index 9fe80f90e5..dbe4305839 100644
--- a/demo/site-pages/src/components/Breadcrumbs.sc.ts
+++ b/demo/site-pages/src/components/Breadcrumbs.sc.ts
@@ -6,14 +6,14 @@ export const Container = styled.div`
 `;
 
 export const Link = styled.a`
-    color: ${({ theme }) => theme.colors.n400};
+    color: ${({ theme }) => theme.palette.primary.main};
     text-decoration: none;
 
     font-size: 14px;
 
     :last-child {
         font-weight: 500;
-        color: ${({ theme }) => theme.colors.black};
+        color: ${({ theme }) => theme.palette.text.primary};
     }
 `;
 
@@ -22,5 +22,5 @@ export const Divider = styled.span`
     width: 15px;
     height: 1px;
     margin: 0 10px 5px 10px;
-    background-color: ${({ theme }) => theme.colors.n200};
+    background-color: ${({ theme }) => theme.palette.primary.main};
 `;
diff --git a/demo/site-pages/src/header/Header.tsx b/demo/site-pages/src/header/Header.tsx
index 3f3c22c984..168c744a31 100644
--- a/demo/site-pages/src/header/Header.tsx
+++ b/demo/site-pages/src/header/Header.tsx
@@ -88,7 +88,7 @@ const TopLevelLinkContainer = styled.li`
 const Link = styled.a<{ $active: boolean }>`
     text-decoration: none;
     padding: 5px 10px;
-    color: ${({ $active, theme }) => ($active ? theme.colors.primary : theme.colors.black)};
+    color: ${({ $active, theme }) => ($active ? theme.palette.primary.main : theme.palette.text.primary)};
 
     &:hover {
         text-decoration: underline;
diff --git a/demo/site-pages/src/pages/_app.tsx b/demo/site-pages/src/pages/_app.tsx
index 2d7b2f7d49..e8130f1b83 100644
--- a/demo/site-pages/src/pages/_app.tsx
+++ b/demo/site-pages/src/pages/_app.tsx
@@ -11,7 +11,7 @@ const GlobalStyle = createGlobalStyle`
     body {
         margin: 0;
         -webkit-text-size-adjust: none;
-        color: ${({ theme }) => theme.colors.textPrimary};
+        color: ${({ theme }) => theme.palette.text.primary};
         font-family: ${({ theme }) => theme.fonts.primary};
         font-weight: 400;
     }
diff --git a/demo/site-pages/src/topNavigation/TopNavigation.tsx b/demo/site-pages/src/topNavigation/TopNavigation.tsx
index 484007ab96..971ce98d0d 100644
--- a/demo/site-pages/src/topNavigation/TopNavigation.tsx
+++ b/demo/site-pages/src/topNavigation/TopNavigation.tsx
@@ -48,7 +48,7 @@ const TopLevelNavigation = styled.ol`
     list-style-type: none;
     padding: 0;
     margin: 0;
-    background-color: ${({ theme }) => theme.colors.primary};
+    background-color: ${({ theme }) => theme.palette.primary.main};
 `;
 
 const SubLevelNavigation = styled.ol`
@@ -57,7 +57,7 @@ const SubLevelNavigation = styled.ol`
     min-width: 100px;
     list-style-type: none;
     padding: 5px;
-    background-color: ${({ theme }) => theme.colors.primary};
+    background-color: ${({ theme }) => theme.palette.primary.main};
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
 `;
 
@@ -76,7 +76,7 @@ const TopLevelLinkContainer = styled.li`
 const Link = styled.a<{ $active: boolean }>`
     text-decoration: none;
     padding: 5px 10px;
-    color: ${({ $active, theme }) => ($active ? theme.colors.white : theme.colors.n200)};
+    color: ${({ $active, theme }) => ($active ? theme.palette.text.inverted : theme.palette.primary.main)};
     font-size: 12px;
 
     &:hover {
diff --git a/demo/site/src/common/blocks/TextLinkBlock.tsx b/demo/site/src/common/blocks/TextLinkBlock.tsx
index 0ab14f92be..e7fff8e330 100644
--- a/demo/site/src/common/blocks/TextLinkBlock.tsx
+++ b/demo/site/src/common/blocks/TextLinkBlock.tsx
@@ -23,8 +23,8 @@ export const TextLinkBlock = withPreview(
 );
 
 const Link = styled(LinkBlock)`
-    color: ${({ theme }) => theme.colors.black};
+    color: ${({ theme }) => theme.palette.text.primary};
     &:hover {
-        color: ${({ theme }) => theme.colors.primary};
+        color: ${({ theme }) => theme.palette.primary.main};
     }
 `;
diff --git a/demo/site/src/common/components/Breadcrumbs.sc.ts b/demo/site/src/common/components/Breadcrumbs.sc.ts
index 70a049a80e..ab45cda132 100644
--- a/demo/site/src/common/components/Breadcrumbs.sc.ts
+++ b/demo/site/src/common/components/Breadcrumbs.sc.ts
@@ -6,14 +6,14 @@ export const Container = styled.div`
 `;
 
 export const Link = styled.a`
-    color: ${({ theme }) => theme.colors.n400};
+    color: ${({ theme }) => theme.palette.primary.main};
     text-decoration: none;
 
     font-size: 14px;
 
     :last-child {
         font-weight: 500;
-        color: ${({ theme }) => theme.colors.black};
+        color: ${({ theme }) => theme.palette.text.primary};
     }
 `;
 
@@ -22,7 +22,7 @@ export const Divider = styled.span`
     width: 15px;
     height: 1px;
     margin: 0 10px 5px 10px;
-    background-color: ${({ theme }) => theme.colors.n200};
+    background-color: ${({ theme }) => theme.palette.primary.light};
 `;
 
 export const GridRoot = styled.div`
diff --git a/demo/site/src/common/helpers/CookiePlaceholders.tsx b/demo/site/src/common/helpers/CookiePlaceholders.tsx
index 0d875c495b..fa44077aea 100644
--- a/demo/site/src/common/helpers/CookiePlaceholders.tsx
+++ b/demo/site/src/common/helpers/CookiePlaceholders.tsx
@@ -26,5 +26,5 @@ const Root = styled.div`
     justify-content: center;
     text-align: center;
     align-items: center;
-    background-color: ${({ theme }) => theme.colors.n200};
+    background-color: ${({ theme }) => theme.palette.primary.light};
 `;
diff --git a/demo/site/src/layout/header/Header.tsx b/demo/site/src/layout/header/Header.tsx
index 4a702eca4f..156d88232c 100644
--- a/demo/site/src/layout/header/Header.tsx
+++ b/demo/site/src/layout/header/Header.tsx
@@ -73,14 +73,14 @@ const TopLevelLinkContainer = styled.li`
 const Link = styled(PageLink)`
     text-decoration: none;
     padding: 5px 10px;
-    color: ${({ theme }) => theme.colors.black};
+    color: ${({ theme }) => theme.palette.text.primary};
 
     &:hover {
         text-decoration: underline;
     }
 
     &.active {
-        color: ${({ theme }) => theme.colors.primary};
+        color: ${({ theme }) => theme.palette.primary.main};
     }
 `;
 
diff --git a/demo/site/src/layout/topNavigation/TopNavigation.tsx b/demo/site/src/layout/topNavigation/TopNavigation.tsx
index cce721d527..1c71cb305d 100644
--- a/demo/site/src/layout/topNavigation/TopNavigation.tsx
+++ b/demo/site/src/layout/topNavigation/TopNavigation.tsx
@@ -38,7 +38,7 @@ const TopLevelNavigation = styled.ol`
     list-style-type: none;
     padding: 0;
     margin: 0;
-    background-color: ${({ theme }) => theme.colors.primary};
+    background-color: ${({ theme }) => theme.palette.primary.main};
 `;
 
 const SubLevelNavigation = styled.ol`
@@ -47,7 +47,7 @@ const SubLevelNavigation = styled.ol`
     min-width: 100px;
     list-style-type: none;
     padding: 5px;
-    background-color: ${({ theme }) => theme.colors.primary};
+    background-color: ${({ theme }) => theme.palette.primary.main};
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
 `;
 
@@ -66,7 +66,7 @@ const TopLevelLinkContainer = styled.li`
 const Link = styled(PageLink)`
     text-decoration: none;
     padding: 5px 10px;
-    color: ${({ theme }) => theme.colors.n200};
+    color: ${({ theme }) => theme.palette.text.primary};
     font-size: 12px;
 
     &:hover {
@@ -74,6 +74,6 @@ const Link = styled(PageLink)`
     }
 
     &.active {
-        color: ${({ theme }) => theme.colors.white};
+        color: ${({ theme }) => theme.palette.text.inverted};
     }
 `;
diff --git a/demo/site/src/news/NewsList.tsx b/demo/site/src/news/NewsList.tsx
index 118f5ff6be..51d29e4d99 100644
--- a/demo/site/src/news/NewsList.tsx
+++ b/demo/site/src/news/NewsList.tsx
@@ -32,9 +32,9 @@ const Card = styled(Link)`
     padding: 5px;
     color: black;
     text-decoration: none;
-    border: 1px solid ${({ theme }) => theme.colors.lightGray};
+    border: 1px solid ${({ theme }) => theme.palette.gray[200]};
 
     &:hover {
-        border-color: ${({ theme }) => theme.colors.primary};
+        border-color: ${({ theme }) => theme.palette.primary.main};
     }
 `;