Demo: fix sites theme color palettes (#2965)

vivid-planet · Dec 19, 2024 · 30c217f · 30c217f
1 parent 20f6341
commit 30c217f
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 22 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,14 +66,14 @@ 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 {
         text-decoration: underline;
     }
 
     &.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
@@ -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};
     }
 `;