Merge pull request #433 from lidofinance/feature/ui-866-migrate-theme

Updated theme to work via css variables
lidofinance · Aug 4, 2023 · eb82ed6 · eb82ed6
2 parents da10b80 + 5eef49d
commit eb82ed6
Show file tree

Hide file tree

Showing 80 changed files with 870 additions and 693 deletions.
diff --git a/packages/accordion/Accordion.module.css b/packages/accordion/Accordion.module.css
@@ -27,7 +27,7 @@
 }
 
 .content {
-  color: var(--lido-color-textSecondary);
+  color: var(--lido-color-text-secondary);
   font-weight: 400;
   font-size: var(--lido-font-size-xxs);
   line-height: 1.6em;
@@ -61,7 +61,7 @@
   flex-shrink: 0;
   margin: -2px;
   margin-left: var(--lido-space-md);
-  fill: var(--lido-color-textSecondary);
+  fill: var(--lido-color-text-secondary);
 }
 
 .arrowExpanded {

diff --git a/packages/block/Block.module.css b/packages/block/Block.module.css
@@ -1,24 +1,24 @@
 .foreground {
   background: var(--lido-color-foreground);
-  color: var(--lido-color-textSecondary);
+  color: var(--lido-color-text-secondary);
 }
 
 .background {
   background: var(--lido-color-background);
-  color: var(--lido-color-textSecondary);
+  color: var(--lido-color-text-secondary);
 }
 
 .accent {
   background: var(--lido-color-accent);
-  color: var(--lido-color-accentContrast);
+  color: var(--lido-color-accent-contrast);
 }
 
 .flat {
   box-shadow: none;
 }
 
 .shadow {
-  box-shadow: var(--lido-shadows-lg) var(--lido-color-shadowLight);
+  box-shadow: var(--lido-shadows-lg) var(--lido-color-shadow-light);
 }
 
 .padding {

diff --git a/packages/button/Button.module.css b/packages/button/Button.module.css
@@ -95,7 +95,7 @@
     line-height: 1em;
     font-size: var(--lido-font-size-sm);
     border-radius: var(--lido-border-radius-lg);
-    box-shadow: var(--lido-shadows-md) var(--lido-color-shadowDark);
+    box-shadow: var(--lido-shadows-md) var(--lido-color-shadow-dark);
     padding: 24px 64px;
     min-width: 160px;
   }
@@ -127,52 +127,52 @@
   }
 
   .filled.primary {
-    color: var(--lido-color-primaryContrast);
+    color: var(--lido-color-primary-contrast);
     background-color: var(--lido-color-primary);
 
     &:focus-visible,
     &:not(:disabled):hover {
-      background-color: var(--lido-color-primaryHover);
+      background-color: var(--lido-color-primary-hover);
     }
   }
 
   .filled.secondary {
-    color: var(--lido-color-secondaryContrast);
+    color: var(--lido-color-secondary-contrast);
     background-color: var(--lido-color-secondary);
 
     &:focus-visible,
     &:not(:disabled):hover {
-      background-color: var(--lido-color-secondaryHover);
+      background-color: var(--lido-color-secondary-hover);
     }
   }
 
   .filled.warning {
-    color: var(--lido-color-warningContrast);
+    color: var(--lido-color-warning-contrast);
     background-color: var(--lido-color-warning);
 
     &:focus-visible,
     &:not(:disabled):hover {
-      background-color: var(--lido-color-warningHover);
+      background-color: var(--lido-color-warning-hover);
     }
   }
 
   .filled.error {
-    color: var(--lido-color-errorContrast);
+    color: var(--lido-color-error-contrast);
     background-color: var(--lido-color-error);
 
     &:focus-visible,
     &:not(:disabled):hover {
-      background-color: var(--lido-color-errorHover);
+      background-color: var(--lido-color-error-hover);
     }
   }
 
   .filled.success {
-    color: var(--lido-color-successContrast);
+    color: var(--lido-color-success-contrast);
     background-color: var(--lido-color-success);
 
     &:focus-visible,
     &:not(:disabled):hover {
-      background-color: var(--lido-color-successHover);
+      background-color: var(--lido-color-success-hover);
     }
   }
 
@@ -195,8 +195,8 @@
 
     &:focus-visible,
     &:not(:disabled):hover {
-      color: var(--lido-color-primaryContrast);
-      background-color: var(--lido-color-primaryHover);
+      color: var(--lido-color-primary-contrast);
+      background-color: var(--lido-color-primary-hover);
     }
   }
 
@@ -209,8 +209,8 @@
 
     &:focus-visible,
     &:not(:disabled):hover {
-      color: var(--lido-color-secondaryContrast);
-      background-color: var(--lido-color-secondaryHover);
+      color: var(--lido-color-secondary-contrast);
+      background-color: var(--lido-color-secondary-hover);
     }
   }
 
@@ -223,8 +223,8 @@
 
     &:focus-visible,
     &:not(:disabled):hover {
-      color: var(--lido-color-warningContrast);
-      background-color: var(--lido-color-warningHover);
+      color: var(--lido-color-warning-contrast);
+      background-color: var(--lido-color-warning-hover);
     }
   }
 
@@ -237,8 +237,8 @@
 
     &:focus-visible,
     &:not(:disabled):hover {
-      color: var(--lido-color-errorContrast);
-      background-color: var(--lido-color-errorHover);
+      color: var(--lido-color-error-contrast);
+      background-color: var(--lido-color-error-hover);
     }
   }
 
@@ -251,8 +251,8 @@
 
     &:focus-visible,
     &:not(:disabled):hover {
-      color: var(--lido-color-successContrast);
-      background-color: var(--lido-color-successHover);
+      color: var(--lido-color-success-contrast);
+      background-color: var(--lido-color-success-hover);
     }
   }
 

diff --git a/packages/button/Button.test.tsx b/packages/button/Button.test.tsx
@@ -1,13 +1,13 @@
 import { render } from '@testing-library/react'
-import { ThemeProvider, themeDefault } from '../theme'
+import { LightThemeProvider } from '../theme'
 import 'jest-styled-components'
 import { Button } from './Button'
 
 it('renders correctly', () => {
   const { container } = render(
-    <ThemeProvider theme={themeDefault}>
+    <LightThemeProvider>
       <Button>Test</Button>
-    </ThemeProvider>,
+    </LightThemeProvider>,
   )
 
   expect(container.firstChild?.firstChild).toMatchSnapshot()

diff --git a/packages/checkbox/Checkbox.module.css b/packages/checkbox/Checkbox.module.css
@@ -14,7 +14,7 @@
   transition:
     box-shadow 0.1s ease,
     background-color 0.1s ease;
-  fill: var(--lido-color-primaryContrast);
+  fill: var(--lido-color-primary-contrast);
 }
 
 .input {
@@ -30,12 +30,12 @@
 
   /* stylelint-disable-next-line selector-not-notation */
   label:hover &:not(:disabled):not(:checked) + .icon {
-    box-shadow: inset 0 0 0 1px var(--lido-color-borderHover);
+    box-shadow: inset 0 0 0 1px var(--lido-color-border-hover);
   }
 
   /* stylelint-disable no-descending-specificity */
   & + .icon {
-    background-color: var(--lido-color-controlBg);
+    background-color: var(--lido-color-control-bg);
     box-shadow: inset 0 0 0 1px var(--lido-color-border);
 
     path {
@@ -62,7 +62,7 @@
   }
 
   &:focus-visible:checked + .icon {
-    box-shadow: inset 0 0 0 1px var(--lido-color-borderHover);
+    box-shadow: inset 0 0 0 1px var(--lido-color-border-hover);
   }
   /* stylelint-enable no-descending-specificity */
 }

diff --git a/packages/chip/Chip.module.css b/packages/chip/Chip.module.css
@@ -9,8 +9,8 @@
 }
 
 .gray {
-  background: var(--lido-color-shadowLight);
-  color: var(--lido-color-textSecondary);
+  background: var(--lido-color-shadow-light);
+  color: var(--lido-color-text-secondary);
 }
 
 .warning {

diff --git a/packages/container/Container.stories.tsx b/packages/container/Container.stories.tsx
@@ -16,7 +16,7 @@ export default {
 const StyledDiv = styled.div`
   height: 100px;
   background: var(--lido-color-foreground);
-  color: var(--lido-color-textSecondary);
+  color: var(--lido-color-text-secondary);
   display: flex;
   align-items: center;
   justify-content: center;

diff --git a/packages/content-theme/content-theme.module.css b/packages/content-theme/content-theme.module.css
diff --git a/packages/content-theme/content-theme.tsx b/packages/content-theme/content-theme.tsx
diff --git a/packages/cookie-theme-toggler/index.ts b/packages/cookie-theme-toggler/index.ts
diff --git a/packages/cookies-tooltip/cookies-tooltip.module.css b/packages/cookies-tooltip/cookies-tooltip.module.css
@@ -57,7 +57,7 @@
   font-weight: 500;
   font-size: 14px;
   line-height: 22px;
-  color: var(--lido-color-textSecondary);
+  color: var(--lido-color-text-secondary);
   width: 100%;
   text-align: center;
 
@@ -110,7 +110,7 @@
   color: var(--lido-color-foreground);
 
   &:hover {
-    background-color: var(--lido-color-textSecondary);
+    background-color: var(--lido-color-text-secondary);
   }
 }
 

diff --git a/packages/cookies-tooltip/cookies-tooltip.tsx b/packages/cookies-tooltip/cookies-tooltip.tsx
@@ -5,7 +5,7 @@ import {
   ComponentPropsWithoutRef,
 } from 'react'
 import { Cookie, CookieInverse } from '../icons'
-import { ContentTheme } from '../content-theme'
+import { ContentTheme } from '../theme/content-theme'
 import { getCrossDomainCookieClientSide } from '../utils'
 import { allowCookies, declineCookies } from './utils'
 import { COOKIE_ALLOWED_KEY } from './constants'

diff --git a/packages/data-table/DataTable.module.css b/packages/data-table/DataTable.module.css
@@ -15,7 +15,7 @@
 }
 
 .title {
-  color: var(--lido-color-textSecondary);
+  color: var(--lido-color-text-secondary);
   flex-grow: 1;
 }
 

diff --git a/packages/heading/Heading.module.css b/packages/heading/Heading.module.css
@@ -24,5 +24,5 @@
 }
 
 .heading.secondary {
-  color: var(--lido-color-textSecondary);
+  color: var(--lido-color-text-secondary);
 }
diff --git a/packages/identicon/IdenticonBadge.module.css b/packages/identicon/IdenticonBadge.module.css
@@ -13,12 +13,12 @@
 
 .background {
   background: var(--lido-color-background);
-  color: var(--lido-color-textSecondary);
+  color: var(--lido-color-text-secondary);
 }
 
 .accent {
-  background: var(--lido-color-accentDarken);
-  color: var(--lido-color-accentContrast);
+  background: var(--lido-color-accent-darken);
+  color: var(--lido-color-accent-contrast);
 }
 
 .wrapper {

diff --git a/packages/index.ts b/packages/index.ts
@@ -32,6 +32,4 @@ export * from './toast'
 export * from './tooltip'
 export * from './transition'
 export * from './utils'
-export * from './cookie-theme-toggler'
-export * from './content-theme'
 export * from './cookies-tooltip'