Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated theme to work via css variables #433

Merged
merged 13 commits into from
Aug 4, 2023
Merged

Updated theme to work via css variables #433

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
96503d9
feat: updated variables to unified format
hexnickk4997 Jul 28, 2023
3c15d2a
feat: basic working theme on css variables
hexnickk4997 Aug 1, 2023
7088f43
Merge branch 'v4' into feature/ui-866-migrate-theme
hexnickk4997 Aug 1, 2023
89efd11
fix: incorrect import
hexnickk4997 Aug 1, 2023
7d47e68
feat: font is custom uihead property
hexnickk4997 Aug 1, 2023
2df7ddb
fix: removed extra import
hexnickk4997 Aug 1, 2023
f978a8f
fix: content-theme props
hexnickk4997 Aug 2, 2023
d820828
Merge branch 'v4' into feature/ui-866-migrate-theme
hexnickk4997 Aug 2, 2023
53ce683
Merge branch 'v4' into feature/ui-866-migrate-theme
hexnickk4997 Aug 2, 2023
07643a9
feat: added RBG variants
hexnickk4997 Aug 4, 2023
a83adc7
feat: added script comments
hexnickk4997 Aug 4, 2023
a003a25
Merge branch 'v4' into feature/ui-866-migrate-theme
hexnickk4997 Aug 4, 2023
5eef49d
chore: format fix
hexnickk4997 Aug 4, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions packages/accordion/Accordion.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 {
Expand Down
8 changes: 4 additions & 4 deletions packages/block/Block.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
42 changes: 21 additions & 21 deletions packages/button/Button.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down Expand Up @@ -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);
}
}

Expand All @@ -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);
}
}

Expand All @@ -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);
}
}

Expand All @@ -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);
}
}

Expand All @@ -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);
}
}

Expand All @@ -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);
}
}

Expand Down
6 changes: 3 additions & 3 deletions packages/button/Button.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
Expand Down
8 changes: 4 additions & 4 deletions packages/checkbox/Checkbox.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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 {
Expand All @@ -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 */
}
Expand Down
4 changes: 2 additions & 2 deletions packages/chip/Chip.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion packages/container/Container.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
7 changes: 0 additions & 7 deletions packages/content-theme/content-theme.module.css
View file
Open in desktop

This file was deleted.

18 changes: 0 additions & 18 deletions packages/content-theme/content-theme.tsx
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion packages/cookie-theme-toggler/index.ts
View file
Open in desktop

This file was deleted.

4 changes: 2 additions & 2 deletions packages/cookies-tooltip/cookies-tooltip.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -110,7 +110,7 @@
color: var(--lido-color-foreground);

&:hover {
background-color: var(--lido-color-textSecondary);
background-color: var(--lido-color-text-secondary);
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/cookies-tooltip/cookies-tooltip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
2 changes: 1 addition & 1 deletion packages/data-table/DataTable.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
}

.title {
color: var(--lido-color-textSecondary);
color: var(--lido-color-text-secondary);
flex-grow: 1;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/heading/Heading.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,5 @@
}

.heading.secondary {
color: var(--lido-color-textSecondary);
color: var(--lido-color-text-secondary);
}
6 changes: 3 additions & 3 deletions packages/identicon/IdenticonBadge.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 0 additions & 2 deletions packages/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Loading