From 96503d9626179786e16ee288eb9603bfb4088fed Mon Sep 17 00:00:00 2001 From: Nikita Date: Fri, 28 Jul 2023 18:04:07 +0200 Subject: [PATCH 01/10] feat: updated variables to unified format --- packages/accordion/Accordion.module.css | 4 +- packages/block/Block.module.css | 8 +- packages/button/Button.module.css | 42 ++--- packages/checkbox/Checkbox.module.css | 8 +- packages/chip/Chip.module.css | 4 +- packages/container/Container.stories.tsx | 2 +- .../content-theme/content-theme.module.css | 4 +- .../cookie-theme-toggler.module.css | 4 +- .../cookies-tooltip.module.css | 4 +- packages/data-table/DataTable.module.css | 2 +- packages/heading/Heading.module.css | 2 +- packages/identicon/IdenticonBadge.module.css | 6 +- packages/input/Input.module.css | 60 +++---- packages/input/SliderInput.module.css | 2 +- packages/link/LinkStyles.module.css | 4 +- packages/modal/ModalExtraStyles.tsx | 2 +- packages/modal/ModalStyles.tsx | 2 +- packages/pagination/PaginationItem.module.css | 6 +- packages/popover/Popover.module.css | 2 +- packages/popup-menu/PopupMenuItemStyles.ts | 2 +- packages/popup-menu/PopupMenuStyles.ts | 2 +- packages/select/SelectArrow.module.css | 2 +- packages/table/styles.tsx | 2 +- packages/text/Text.module.css | 2 +- packages/theme/base/borders.css | 7 - packages/theme/base/colors.css | 30 ---- packages/theme/base/index.css | 7 - packages/theme/base/shadows.css | 8 - packages/theme/base/spacing.css | 8 - packages/theme/base/transitions.css | 29 ---- packages/theme/base/typography.css | 12 -- packages/theme/index.css | 1 - packages/theme/index.ts | 3 +- packages/theme/theme.css | 147 ++++++++++++++++++ packages/toast/ToastContainer.tsx | 12 +- packages/toast/ToastPendingStyles.tsx | 2 +- packages/tooltip/Tooltip.module.css | 4 +- packages/utils/index.ts | 3 - scripts/verify-allowed-css-variables.mjs | 37 +++++ 39 files changed, 283 insertions(+), 205 deletions(-) delete mode 100644 packages/theme/base/borders.css delete mode 100644 packages/theme/base/colors.css delete mode 100644 packages/theme/base/index.css delete mode 100644 packages/theme/base/shadows.css delete mode 100644 packages/theme/base/spacing.css delete mode 100644 packages/theme/base/transitions.css delete mode 100644 packages/theme/base/typography.css delete mode 100644 packages/theme/index.css create mode 100644 packages/theme/theme.css create mode 100644 scripts/verify-allowed-css-variables.mjs diff --git a/packages/accordion/Accordion.module.css b/packages/accordion/Accordion.module.css index eb26c636..664a90de 100644 --- 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 index f31c8712..b0c2e4bb 100644 --- a/packages/block/Block.module.css +++ b/packages/block/Block.module.css @@ -1,16 +1,16 @@ .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 { @@ -18,7 +18,7 @@ } .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 index f42cf5b7..fb55a4b9 100644 --- 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/checkbox/Checkbox.module.css b/packages/checkbox/Checkbox.module.css index 27f2014e..074ef274 100644 --- 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 index 6c04edad..1b93f8b7 100644 --- 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 index e85f12ce..9678cb9a 100644 --- 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 index d0937636..16e8cb6e 100644 --- a/packages/content-theme/content-theme.module.css +++ b/packages/content-theme/content-theme.module.css @@ -1,7 +1,7 @@ .dark { - display: var(--lido-color-darkDisplay, contents); + display: var(--lido-color-dark-display, contents); } .light { - display: var(--lido-color-lightDisplay, contents); + display: var(--lido-color-light-display, contents); } diff --git a/packages/cookie-theme-toggler/cookie-theme-toggler.module.css b/packages/cookie-theme-toggler/cookie-theme-toggler.module.css index f5643254..eb47ab7e 100644 --- a/packages/cookie-theme-toggler/cookie-theme-toggler.module.css +++ b/packages/cookie-theme-toggler/cookie-theme-toggler.module.css @@ -6,12 +6,12 @@ .light { composes: icon; - visibility: var(--lido-color-darkModeVisibility); + visibility: var(--lido-dark-mode-visibility); } .dark { composes: icon; - visibility: var(--lido-color-lightModeVisibility); + visibility: var(--lido-light-mode-visibility); } .themeToggler { diff --git a/packages/cookies-tooltip/cookies-tooltip.module.css b/packages/cookies-tooltip/cookies-tooltip.module.css index dda1d844..667c82e4 100644 --- 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/data-table/DataTable.module.css b/packages/data-table/DataTable.module.css index 4c4de5f0..0b9a3339 100644 --- 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 index 737b8122..c65d35fc 100644 --- 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 index 027c08a3..87323747 100644 --- 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/input/Input.module.css b/packages/input/Input.module.css index ea629535..f5efa651 100644 --- a/packages/input/Input.module.css +++ b/packages/input/Input.module.css @@ -55,20 +55,20 @@ &.error { background: var(--lido-color-error); - color: var(--lido-color-errorContrast); - box-shadow: var(--lido-shadows-sm) var(--lido-color-shadowLight); + color: var(--lido-color-error-contrast); + box-shadow: var(--lido-shadows-sm) var(--lido-color-shadow-light); } &.warning { background: var(--lido-color-warning); - color: var(--lido-color-warningContrast); - box-shadow: var(--lido-shadows-sm) var(--lido-color-shadowLight); + color: var(--lido-color-warning-contrast); + box-shadow: var(--lido-shadows-sm) var(--lido-color-shadow-light); } &.success { background: var(--lido-color-success); - color: var(--lido-color-successContrast); - box-shadow: var(--lido-shadows-sm) var(--lido-color-shadowLight); + color: var(--lido-color-success-contrast); + box-shadow: var(--lido-shadows-sm) var(--lido-color-shadow-light); } } @@ -91,11 +91,11 @@ opacity: 1; &.colorDefault { - color: var(--lido-color-textSecondary); + color: var(--lido-color-text-secondary); } &.colorAccent { - color: var(--lido-color-accentContrastSecondary); + color: var(--lido-color-accent-contrast-secondary); } } @@ -121,7 +121,7 @@ &:focus-within { z-index: 2; - border-color: var(--lido-color-borderActive); + border-color: var(--lido-color-border-active); .label { color: var(--lido-color-primary); @@ -132,7 +132,7 @@ @layer content-color { .content.colorDefault { - background: var(--lido-color-controlBg); + background: var(--lido-color-control-bg); border-color: var(--lido-color-border); color: var(--lido-color-text); @@ -142,23 +142,23 @@ &:not(.disabled) { &:hover { - border-color: var(--lido-color-borderHover); + border-color: var(--lido-color-border-hover); } } } .content.colorAccent { - background: var(--lido-color-accentControlBg); - border-color: var(--lido-color-accentBorder); - color: var(--lido-color-accentText); + background: var(--lido-color-accent-control-bg); + border-color: var(--lido-color-accent-border); + color: var(--lido-color-accent-text); &.disabled { - background: var(--lido-color-controlBg); + background: var(--lido-color-control-bg); } &:not(.disabled) { &:hover { - border-color: var(--lido-color-accentBorderHover); + border-color: var(--lido-color-accent-border-hover); } } } @@ -193,7 +193,7 @@ &:hover, &:focus-within { z-index: 2; - border-color: var(--lido-color-borderActive); + border-color: var(--lido-color-border-active); /* stylelint-disable-next-line no-descending-specificity */ .label { @@ -258,11 +258,11 @@ opacity: 0.5; &.colorDefault { - color: var(--lido-color-textSecondary); + color: var(--lido-color-text-secondary); } &.colorAccent { - color: var(--lido-color-accentContrastSecondary); + color: var(--lido-color-accent-contrast-secondary); } } @@ -276,15 +276,15 @@ color: var(--lido-color-text); &:disabled { - color: var(--lido-color-textSecondary); + color: var(--lido-color-text-secondary); } &::placeholder { - color: var(--lido-color-textSecondary); + color: var(--lido-color-text-secondary); } &:-webkit-autofill { - box-shadow: 0 0 0 100px var(--lido-color-controlBg) inset !important; + box-shadow: 0 0 0 100px var(--lido-color-control-bg) inset !important; color: var(--lido-color-text) !important; -webkit-text-fill-color: var(--lido-color-text) !important; } @@ -296,28 +296,28 @@ } .input.colorAccent { - color: var(--lido-color-accentText); + color: var(--lido-color-accent-text); opacity: 1; &:disabled { - color: var(--lido-color-accentText); + color: var(--lido-color-accent-text); opacity: 0.5; } &::placeholder { - color: var(--lido-color-accentText); + color: var(--lido-color-accent-text); opacity: 0.5; } &:-webkit-autofill { - box-shadow: 0 0 0 100px var(--lido-color-accentControlBg) inset !important; - color: var(--lido-color-accentContrast) !important; - -webkit-text-fill-color: var(--lido-color-accentContrast) !important; + box-shadow: 0 0 0 100px var(--lido-color-accent-control-bg) inset !important; + color: var(--lido-color-accent-contrast) !important; + -webkit-text-fill-color: var(--lido-color-accent-contrast) !important; } &:-internal-autofill-selected { - color: var(--lido-color-accentContrast) !important; - -webkit-text-fill-color: var(--lido-color-accentContrast) !important; + color: var(--lido-color-accent-contrast) !important; + -webkit-text-fill-color: var(--lido-color-accent-contrast) !important; } } diff --git a/packages/input/SliderInput.module.css b/packages/input/SliderInput.module.css index 323f49b3..ef8a792e 100644 --- a/packages/input/SliderInput.module.css +++ b/packages/input/SliderInput.module.css @@ -71,7 +71,7 @@ height: 56px; padding: 16px 20px; box-sizing: border-box; - background: var(--lido-color-accentControlBg); + background: var(--lido-color-accent-control-bg); overflow: hidden; } diff --git a/packages/link/LinkStyles.module.css b/packages/link/LinkStyles.module.css index 9caac660..42e4c5f3 100644 --- a/packages/link/LinkStyles.module.css +++ b/packages/link/LinkStyles.module.css @@ -3,12 +3,12 @@ color: var(--lido-color-primary); :hover { - color: var(--lido-color-primaryHover); + color: var(--lido-color-primary-hover); } } .link.fadedVisited { &:visited { - color: var(--lido-color-primaryVisited); + color: var(--lido-color-primary-visited); } } diff --git a/packages/modal/ModalExtraStyles.tsx b/packages/modal/ModalExtraStyles.tsx index bc162af7..c1146f7d 100644 --- a/packages/modal/ModalExtraStyles.tsx +++ b/packages/modal/ModalExtraStyles.tsx @@ -2,7 +2,7 @@ import styled from 'styled-components' export const ModalExtraStyle = styled.div` margin-top: ${({ theme }) => -theme.borderRadiusesMap.xl}px; - color: var(--lido-color-accentContrast); + color: var(--lido-color-accent-contrast); background: var(--lido-color-accent); padding: ${({ theme }) => theme.spaceMap.xxl}px; padding-top: ${({ theme }) => diff --git a/packages/modal/ModalStyles.tsx b/packages/modal/ModalStyles.tsx index 1e536455..a4b3ad55 100644 --- a/packages/modal/ModalStyles.tsx +++ b/packages/modal/ModalStyles.tsx @@ -125,7 +125,7 @@ export const ModalCloseStyle = styled(ButtonIcon).attrs({ size: 'xs', })` margin: 0 -10px 0 0; - color: var(--lido-color-textSecondary); + color: var(--lido-color-text-secondary); flex-shrink: 0; border-radius: 50%; ` diff --git a/packages/pagination/PaginationItem.module.css b/packages/pagination/PaginationItem.module.css index 822f1cd0..7cdd05fc 100644 --- a/packages/pagination/PaginationItem.module.css +++ b/packages/pagination/PaginationItem.module.css @@ -21,8 +21,8 @@ color: var(--lido-color-primary); &:not(:disabled):hover { - border-color: var(--lido-color-primaryVisited); - color: var(--lido-color-primaryVisited); + border-color: var(--lido-color-primary-visited); + color: var(--lido-color-primary-visited); } } @@ -40,7 +40,7 @@ @layer item-disabled { .item:disabled { border-color: var(--lido-color-border); - color: var(--lido-color-textSecondary); + color: var(--lido-color-text-secondary); cursor: unset; } } diff --git a/packages/popover/Popover.module.css b/packages/popover/Popover.module.css index 0544260d..be9fbc44 100644 --- a/packages/popover/Popover.module.css +++ b/packages/popover/Popover.module.css @@ -5,7 +5,7 @@ line-height: 1.5em; font-weight: 400; border-radius: var(--lido-border-radius-lg); - box-shadow: var(--lido-shadows-xs) var(--lido-color-shadowLight); + box-shadow: var(--lido-shadows-xs) var(--lido-color-shadow-light); padding: var(--lido-space-lg); overflow: auto; } diff --git a/packages/popup-menu/PopupMenuItemStyles.ts b/packages/popup-menu/PopupMenuItemStyles.ts index 4fab9a3c..8a5f6d36 100644 --- a/packages/popup-menu/PopupMenuItemStyles.ts +++ b/packages/popup-menu/PopupMenuItemStyles.ts @@ -24,7 +24,7 @@ export const PopupMenuItemStyle = styled.button<{ $active: boolean }>` &:disabled { cursor: default; - color: var(--lido-color-textSecondary); + color: var(--lido-color-text-secondary); } &:before { diff --git a/packages/popup-menu/PopupMenuStyles.ts b/packages/popup-menu/PopupMenuStyles.ts index 46b2290f..c049baaa 100644 --- a/packages/popup-menu/PopupMenuStyles.ts +++ b/packages/popup-menu/PopupMenuStyles.ts @@ -10,7 +10,7 @@ export const PopupMenuStyle = styled(Popover)` overflow: auto; overflow-x: hidden; box-shadow: ${({ theme }) => theme.boxShadows.xs} - var(--lido-color-shadowLight); + var(--lido-color-shadow-light); padding: 0; ${PopupMenuItemStyle}:first-child { diff --git a/packages/select/SelectArrow.module.css b/packages/select/SelectArrow.module.css index ef5e4a3e..e3d22422 100644 --- a/packages/select/SelectArrow.module.css +++ b/packages/select/SelectArrow.module.css @@ -11,7 +11,7 @@ } .big { - fill: var(--lido-color-textSecondary); + fill: var(--lido-color-text-secondary); } .small { diff --git a/packages/table/styles.tsx b/packages/table/styles.tsx index 72f63aac..475578f0 100644 --- a/packages/table/styles.tsx +++ b/packages/table/styles.tsx @@ -36,7 +36,7 @@ type InjectedPropsTd = { const getMainColorTd = (props: InjectedPropsTd) => ({ primary: `var(--lido-color-primary)`, - secondary: `var(--lido-color-textSecondary)`, + secondary: `var(--lido-color-text-secondary)`, warning: `var(--lido-color-warning)`, error: `var(--lido-color-error)`, success: `var(--lido-color-success)`, diff --git a/packages/text/Text.module.css b/packages/text/Text.module.css index 75701294..d154ed7b 100644 --- a/packages/text/Text.module.css +++ b/packages/text/Text.module.css @@ -50,7 +50,7 @@ } .secondary { - color: var(--lido-color-textSecondary); + color: var(--lido-color-text-secondary); } .primary { diff --git a/packages/theme/base/borders.css b/packages/theme/base/borders.css deleted file mode 100644 index 452b9ddb..00000000 --- a/packages/theme/base/borders.css +++ /dev/null @@ -1,7 +0,0 @@ -:root { - --lido-border-radius-xs: 4px; - --lido-border-radius-sm: 6px; - --lido-border-radius-md: 8px; - --lido-border-radius-lg: 10px; - --lido-border-radius-xl: 20px; -} diff --git a/packages/theme/base/colors.css b/packages/theme/base/colors.css deleted file mode 100644 index fc9eac0d..00000000 --- a/packages/theme/base/colors.css +++ /dev/null @@ -1,30 +0,0 @@ -:root { - --lido-color-dark-theme-opacity: 0; - --lido-color-light-theme-opacity: 1; - --lido-color-light-mode-visibility: visible; - --lido-color-dark-mode-visibility: hidden; - --lido-color-light-display: initial; - --lido-color-dark-display: none; - --lido-color-primary: #00a3ff; - --lido-color-primary-hover: #009bf2; - --lido-color-primary-contrast: #fff; - --lido-color-primary-visited: #4bbeff; - --lido-color-accent: #27272e; - --lido-color-accent-contrast: #fff; - --lido-color-accent-contrast-secondary: rgb(255 255 255 / 60%); - --lido-color-accent-darken: rgb(0 0 0 / 20%); - --lido-color-accent-control-bg: rgb(0 0 0 / 10%); - --lido-color-accent-border: rgb(255 255 255 / 20%); - --lido-color-accent-border-hover: rgb(255 255 255 / 30%); - --lido-color-error: #e14d4d; - --lido-color-error-hover: #d44c4d; - --lido-color-error-contrast: #fff; - --lido-color-warning: #ec8600; - --lido-color-warning-hover: #f0a431; - --lido-color-warning-contrast: #fff; - --lido-color-warning-background: #fffae0; - --lido-color-text-dark: #273852; - --lido-color-success: #53ba95; - --lido-color-success-hover: #4ba886; - --lido-color-success-contrast: #fff; -} diff --git a/packages/theme/base/index.css b/packages/theme/base/index.css deleted file mode 100644 index 3012c374..00000000 --- a/packages/theme/base/index.css +++ /dev/null @@ -1,7 +0,0 @@ -@import url('./borders.css'); -@import url('./breakpoints.css'); -@import url('./colors.css'); -@import url('./shadows.css'); -@import url('./spacing.css'); -@import url('./transitions.css'); -@import url('./typography.css'); diff --git a/packages/theme/base/shadows.css b/packages/theme/base/shadows.css deleted file mode 100644 index c66cabd9..00000000 --- a/packages/theme/base/shadows.css +++ /dev/null @@ -1,8 +0,0 @@ -:root { - --lido-shadows-xxl: 0px 8px 44px 0px; - --lido-shadows-xl: 0px 8px 32px 0px; - --lido-shadows-lg: 0px 8px 24px 0px; - --lido-shadows-md: 0px 4px 16px 0px; - --lido-shadows-sm: 0px 4px 12px 0px; - --lido-shadows-xs: 0px 4px 8px 0px; -} diff --git a/packages/theme/base/spacing.css b/packages/theme/base/spacing.css deleted file mode 100644 index 073f3521..00000000 --- a/packages/theme/base/spacing.css +++ /dev/null @@ -1,8 +0,0 @@ -:root { - --lido-space-xs: 4px; - --lido-space-sm: 8px; - --lido-space-md: 16px; - --lido-space-lg: 20px; - --lido-space-xl: 24px; - --lido-space-xxl: 32px; -} diff --git a/packages/theme/base/transitions.css b/packages/theme/base/transitions.css deleted file mode 100644 index 7d861fdf..00000000 --- a/packages/theme/base/transitions.css +++ /dev/null @@ -1,29 +0,0 @@ -:root { - --lido-transition-duration-fast: 100ms; - --lido-transition-duration-med: 150ms; - --lido-transition-duration-norm: 200ms; - --lido-transition-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); - --lido-transition-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); - --lido-transition-inout-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); - --lido-transition-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); - --lido-transition-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); - --lido-transition-inout-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); - --lido-transition-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); - --lido-transition-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); - --lido-transition-inout-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); - --lido-transition-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); - --lido-transition-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); - --lido-transition-inout-quart: cubic-bezier(0.77, 0, 0.175, 1); - --lido-transition-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); - --lido-transition-out-quint: cubic-bezier(0.23, 1, 0.32, 1); - --lido-transition-inout-quint: cubic-bezier(0.86, 0, 0.07, 1); - --lido-transition-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); - --lido-transition-out-expo: cubic-bezier(0.19, 1, 0.22, 1); - --lido-transition-inout-expo: cubic-bezier(1, 0, 0, 1); - --lido-transition-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); - --lido-transition-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); - --lido-transition-inout-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); - --lido-transition-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); - --lido-transition-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); - --lido-transition-inout-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); -} diff --git a/packages/theme/base/typography.css b/packages/theme/base/typography.css deleted file mode 100644 index ae2ddbd7..00000000 --- a/packages/theme/base/typography.css +++ /dev/null @@ -1,12 +0,0 @@ -:root { - --lido-font-size-xxxs: 10px; - --lido-font-size-xxs: 12px; - --lido-font-size-xs: 14px; - --lido-font-size-sm: 16px; - --lido-font-size-md: 18px; - --lido-font-size-lg: 20px; - --lido-font-size-xl: 26px; - --lido-font-size-xxl: 32px; - --lido-font-size-xxxl: 40px; - --lido-font-size-xxxxl: 50px; -} diff --git a/packages/theme/index.css b/packages/theme/index.css deleted file mode 100644 index 209e088f..00000000 --- a/packages/theme/index.css +++ /dev/null @@ -1 +0,0 @@ -@import url('./base/index.css'); diff --git a/packages/theme/index.ts b/packages/theme/index.ts index 1054d424..2297dafd 100644 --- a/packages/theme/index.ts +++ b/packages/theme/index.ts @@ -3,8 +3,7 @@ export * from './theme-provider' export * from './document-head-contents' export * from './constants' export * from './themes' -export * from './hooks' export * from './types' export { migrationThemeCookiesToCrossDomainCookiesClientSide } from './utils/cookies-migration' -import './index.css' +import './theme.css' diff --git a/packages/theme/theme.css b/packages/theme/theme.css new file mode 100644 index 00000000..e67b52a3 --- /dev/null +++ b/packages/theme/theme.css @@ -0,0 +1,147 @@ +@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800"); + +body { + font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, + Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +} + +:root { + --lido-border-radius-xs: 4px; + --lido-border-radius-sm: 6px; + --lido-border-radius-md: 8px; + --lido-border-radius-lg: 10px; + --lido-border-radius-xl: 20px; + --lido-color-primary: #00a3ff; + --lido-color-primary-hover: #009bf2; + --lido-color-primary-contrast: #fff; + --lido-color-primary-visited: #4bbeff; + --lido-color-accent: #27272e; + --lido-color-accent-contrast: #fff; + --lido-color-accent-contrast-secondary: rgb(255 255 255 / 60%); + --lido-color-accent-darken: rgb(0 0 0 / 20%); + --lido-color-accent-control-bg: rgb(0 0 0 / 10%); + --lido-color-accent-border: rgb(255 255 255 / 20%); + --lido-color-accent-border-hover: rgb(255 255 255 / 30%); + --lido-color-error: #e14d4d; + --lido-color-error-hover: #d44c4d; + --lido-color-error-contrast: #fff; + --lido-color-warning: #ec8600; + --lido-color-warning-hover: #f0a431; + --lido-color-warning-contrast: #fff; + --lido-color-warning-background: #fffae0; + --lido-color-text-dark: #273852; + --lido-color-success: #53ba95; + --lido-color-success-hover: #4ba886; + --lido-color-success-contrast: #fff; + --lido-shadows-xxl: 0px 8px 44px 0px; + --lido-shadows-xl: 0px 8px 32px 0px; + --lido-shadows-lg: 0px 8px 24px 0px; + --lido-shadows-md: 0px 4px 16px 0px; + --lido-shadows-sm: 0px 4px 12px 0px; + --lido-shadows-xs: 0px 4px 8px 0px; + --lido-space-xs: 4px; + --lido-space-sm: 8px; + --lido-space-md: 16px; + --lido-space-lg: 20px; + --lido-space-xl: 24px; + --lido-space-xxl: 32px; + --lido-transition-duration-fast: 100ms; + --lido-transition-duration-med: 150ms; + --lido-transition-duration-norm: 200ms; + --lido-transition-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715); + --lido-transition-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1); + --lido-transition-inout-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95); + --lido-transition-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); + --lido-transition-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); + --lido-transition-inout-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); + --lido-transition-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19); + --lido-transition-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1); + --lido-transition-inout-cubic: cubic-bezier(0.645, 0.045, 0.355, 1); + --lido-transition-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22); + --lido-transition-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1); + --lido-transition-inout-quart: cubic-bezier(0.77, 0, 0.175, 1); + --lido-transition-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06); + --lido-transition-out-quint: cubic-bezier(0.23, 1, 0.32, 1); + --lido-transition-inout-quint: cubic-bezier(0.86, 0, 0.07, 1); + --lido-transition-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035); + --lido-transition-out-expo: cubic-bezier(0.19, 1, 0.22, 1); + --lido-transition-inout-expo: cubic-bezier(1, 0, 0, 1); + --lido-transition-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335); + --lido-transition-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1); + --lido-transition-inout-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86); + --lido-transition-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045); + --lido-transition-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275); + --lido-transition-inout-back: cubic-bezier(0.68, -0.55, 0.265, 1.55); + --lido-font-size-xxxs: 10px; + --lido-font-size-xxs: 12px; + --lido-font-size-xs: 14px; + --lido-font-size-sm: 16px; + --lido-font-size-md: 18px; + --lido-font-size-lg: 20px; + --lido-font-size-xl: 26px; + --lido-font-size-xxl: 32px; + --lido-font-size-xxxl: 40px; + --lido-font-size-xxxxl: 50px; +} + +html[data-lido-theme="light"] { + --lido-dark-theme-opacity: 0; + --lido-light-theme-opacity: 1; + --lido-light-mode-visibility: visible; + --lido-dark-mode-visibility: hidden; + --lido-light-display: initial; + --lido-dark-display: none; + --lido-color-secondary: #273852; + --lido-color-secondary-hover: #212f45; + --lido-color-secondary-contrast: #fff; + --lido-color-background: #f2f4f6; + --lido-color-background-darken: #dae0e5; + --lido-color-background-secondary: #EFF2F6; + --lido-color-foreground: #fff; + --lido-color-overlay: rgb(0 0 0 / 50%); + --lido-color-shadow-light: rgb(39 56 82 / 8%); + --lido-color-shadow-dark: rgb(0 0 0 / 25%); + --lido-color-text: #273852; + --lido-color-text-secondary: #7a8aa0; + --lido-color-accent-text: #273852; + --lido-color-border: rgb(0 10 61 / 12%); + --lido-color-border-active: rgb(0 10 61 / 48%); + --lido-color-border-hover: rgb(0 10 61 / 24%); + --lido-color-border-light: #dfe5eb; + --lido-color-accent-border: rgb(0 10 61 / 12%); + --lido-color-accent-border-hover: rgb(0 10 61 / 24%); + --lido-color-control-bg: #fff; + --lido-color-accent-control-bg: rgb(239 242 246 / 56%); + --lido-popup-menu-item-bg-active-hover: #000a3d; +} + +html[data-lido-theme="dark"] { + --lido-dark-theme-opacity: 1; + --lido-light-theme-opacity: 0; + --lido-light-mode-visibility: hidden; + --lido-dark-mode-visibility: visible; + --lido-light-display: none; + --lido-dark-display: initial; + --lido-color-secondary: rgb(255 255 255 / 80%); + --lido-color-secondary-hover: #fff; + --lido-color-secondary-contrast: #273852; + --lido-color-background: #1c1c21; + --lido-color-background-darken: #131317; + --lido-color-background-secondary: #27272E; + --lido-color-foreground: #34343d; + --lido-color-overlay: rgb(0 0 0 / 50%); + --lido-color-shadow-light: rgb(0 0 0 / 25%); + --lido-color-shadow-dark: rgb(0 0 0 / 50%); + --lido-color-text: #fff; + --lido-color-text-secondary: rgb(255 255 255 / 80%); + --lido-color-accent-text: #fff; + --lido-color-border: rgb(255 255 255 / 12%); + --lido-color-border-active: rgb(255 255 255 / 48%); + --lido-color-border-hover: rgb(255 255 255 / 24%); + --lido-color-border-light: #484855; + --lido-color-accent-border: rgb(255 255 255 / 12%); + --lido-color-accent-border-hover: rgb(255 255 255 / 24%); + --lido-color-control-bg: #2f2f37; + --lido-color-accent-control-bg: rgb(39 39 46 / 56%); + --lido-popup-menu-item-bg-active-hover: #fff; +} \ No newline at end of file diff --git a/packages/toast/ToastContainer.tsx b/packages/toast/ToastContainer.tsx index d4802c87..db1c7e86 100644 --- a/packages/toast/ToastContainer.tsx +++ b/packages/toast/ToastContainer.tsx @@ -391,12 +391,12 @@ export const ToastContainer = styled(SourceToastContainer).attrs({ border-radius: ${({ theme }) => theme.borderRadiusesMap.md}px; box-shadow: ${({ theme }) => theme.boxShadows.xs} - var(--lido-color-shadowLight); + var(--lido-color-shadow-light); margin: ${({ theme }) => theme.spaceMap.xs}px 0; padding: ${({ theme }) => theme.spaceMap.sm}px ${({ theme }) => theme.spaceMap.md}px; background-color: var(--lido-color-accent); - color: var(--lido-color-accentContrast); + color: var(--lido-color-accent-contrast); font-size: ${({ theme }) => theme.fontSizesMap.xs}px; line-height: 1.3em; font-family: inherit; @@ -461,19 +461,19 @@ export const ToastContainer = styled(SourceToastContainer).attrs({ //} &__toast--info { background-color: var(--lido-color-accent); - color: var(--lido-color-accentContrast); + color: var(--lido-color-accent-contrast); } &__toast--error { background-color: var(--lido-color-error); - color: var(--lido-color-errorContrast); + color: var(--lido-color-error-contrast); } &__toast--warning { background-color: var(--lido-color-warning); - color: var(--lido-color-warningContrast); + color: var(--lido-color-warning-contrast); } &__toast--success { background-color: var(--lido-color-success); - color: var(--lido-color-successContrast); + color: var(--lido-color-success-contrast); } /* /Variants */ diff --git a/packages/toast/ToastPendingStyles.tsx b/packages/toast/ToastPendingStyles.tsx index 2d063d8d..070f592a 100644 --- a/packages/toast/ToastPendingStyles.tsx +++ b/packages/toast/ToastPendingStyles.tsx @@ -12,6 +12,6 @@ export const ToastPendingLoaderStyle = styled(Loader)` margin: ${({ theme }) => -theme.spaceMap.xs}px; margin-right: ${({ theme }) => theme.spaceMap.md}px; svg { - color: var(--lido-color-accentContrast); + color: var(--lido-color-accent-contrast); } ` diff --git a/packages/tooltip/Tooltip.module.css b/packages/tooltip/Tooltip.module.css index 58717260..1a263e80 100644 --- a/packages/tooltip/Tooltip.module.css +++ b/packages/tooltip/Tooltip.module.css @@ -1,11 +1,11 @@ .tooltip { padding: 12px; background: var(--lido-color-accent); - color: var(--lido-color-accentContrast); + color: var(--lido-color-accent-contrast); font-size: var(--lido-font-size-xxxs); line-height: 1.8em; font-weight: 400; max-width: 256px; border-radius: var(--lido-border-radius-md); - box-shadow: var(--lido-shadows-sm) var(--lido-color-shadowLight); + box-shadow: var(--lido-shadows-sm) var(--lido-color-shadow-light); } diff --git a/packages/utils/index.ts b/packages/utils/index.ts index aa9e7cba..b9a48dac 100644 --- a/packages/utils/index.ts +++ b/packages/utils/index.ts @@ -2,6 +2,3 @@ export * from './types' export { default as modalRoot } from './modalRoot' export * from './get-top-level-domain' export * from './cookies-client-side' - -// eslint-disable-next-line @typescript-eslint/no-empty-function -export const VOID_FN = () => {} diff --git a/scripts/verify-allowed-css-variables.mjs b/scripts/verify-allowed-css-variables.mjs new file mode 100644 index 00000000..67dc934d --- /dev/null +++ b/scripts/verify-allowed-css-variables.mjs @@ -0,0 +1,37 @@ +const getDefinedVariables = async () => { + const content = await fs.readFile('./packages/theme/theme.css', 'utf-8') + const matches = content.match(/--lido-[^:]+/g) + return new Set(matches) +} + +const getUsedVariables = async () => { + const files = await glob('packages/**/*.module.css') + const usedVars = (await Promise.all(files.map(async file => { + const content = await fs.readFile(file, 'utf-8') + const matches = content.match(/var\(--lido-[^,)]+\)/g) + const vars = matches?.map(rawVariable => rawVariable.match(/--lido-[^,)]+/)?.[0]) + return vars + }))) + .flat() + .filter(result => result != null) + return new Set(usedVars) +} + +// TODO: this can by stylelint plugin +const main = async () => { + const usedVars = await getUsedVariables() + const definedVars = await getDefinedVariables() + // console.log(definedVars) + const usedButNotDefined = [...usedVars].filter(usedVar => !definedVars.has(usedVar)) + if (usedButNotDefined.length === 0) { + console.log('All used variables are defined') + process.exit(0) + } + + for (let weirdVar of usedButNotDefined) { + console.error(`var(${weirdVar}) used but not defined`) + } + process.exit(1) +} + +void main() \ No newline at end of file From 3c15d2a266c93f08f79287242748688aee3c4864 Mon Sep 17 00:00:00 2001 From: Nikita Date: Tue, 1 Aug 2023 16:23:33 +0200 Subject: [PATCH 02/10] feat: basic working theme on css variables --- packages/button/Button.test.tsx | 6 +- .../content-theme/content-theme.module.css | 7 - packages/cookie-theme-toggler/index.ts | 1 - packages/cookies-tooltip/cookies-tooltip.tsx | 2 +- packages/index.ts | 3 +- packages/theme/base/borders.ts | 14 -- packages/theme/base/breakpoints.ts | 40 --- packages/theme/base/colors.ts | 40 --- packages/theme/base/index.ts | 17 -- packages/theme/base/shadows.ts | 10 - packages/theme/base/spacing.ts | 15 -- packages/theme/base/transitions.ts | 44 ---- packages/theme/base/typography.ts | 19 -- packages/theme/{base => }/breakpoints.css | 0 packages/theme/constants.ts | 16 -- .../content-theme/content-theme.module.css | 9 + .../content-theme/content-theme.stories.tsx | 2 +- .../content-theme/content-theme.tsx | 0 packages/{ => theme}/content-theme/index.ts | 0 packages/theme/cookie-theme-provider.tsx | 28 ++- .../document-head-contents/element-fonts.tsx | 9 - .../element-theme-colors.tsx | 55 ---- .../theme/document-head-contents/index.tsx | 22 -- packages/theme/index.ts | 10 +- packages/theme/theme-legacy.css | 238 ++++++++++++++++++ packages/theme/theme-provider.tsx | 46 ---- packages/theme/theme-provider/index.ts | 1 + .../theme-provider.stories.tsx | 31 +-- .../theme/theme-provider/theme-provider.tsx | 15 ++ packages/theme/theme-toggler/index.ts | 1 + .../theme-toggler/theme-toggler.module.css} | 0 .../theme-toggler/theme-toggler.stories.tsx} | 8 +- .../theme-toggler/theme-toggler.tsx} | 8 +- packages/theme/theme.css | 28 ++- packages/theme/themes.ts | 161 +++++++++++- packages/theme/types.ts | 12 - .../theme/{hooks.ts => use-theme-toggle.ts} | 3 +- packages/theme/utils/cookies-migration.ts | 4 +- packages/theme/utils/cookies.ts | 2 +- .../document-head-contents.tsx} | 20 +- .../utils/generate-css-color-variables.ts | 36 --- packages/theme/utils/set-theme-cookie.ts | 5 +- postcss.config.js | 2 +- scripts/verify-allowed-css-variables.mjs | 29 ++- 44 files changed, 536 insertions(+), 483 deletions(-) delete mode 100644 packages/content-theme/content-theme.module.css delete mode 100644 packages/cookie-theme-toggler/index.ts delete mode 100644 packages/theme/base/borders.ts delete mode 100644 packages/theme/base/breakpoints.ts delete mode 100644 packages/theme/base/colors.ts delete mode 100644 packages/theme/base/index.ts delete mode 100644 packages/theme/base/shadows.ts delete mode 100644 packages/theme/base/spacing.ts delete mode 100644 packages/theme/base/transitions.ts delete mode 100644 packages/theme/base/typography.ts rename packages/theme/{base => }/breakpoints.css (100%) delete mode 100644 packages/theme/constants.ts create mode 100644 packages/theme/content-theme/content-theme.module.css rename packages/{ => theme}/content-theme/content-theme.stories.tsx (92%) rename packages/{ => theme}/content-theme/content-theme.tsx (100%) rename packages/{ => theme}/content-theme/index.ts (100%) delete mode 100644 packages/theme/document-head-contents/element-fonts.tsx delete mode 100644 packages/theme/document-head-contents/element-theme-colors.tsx delete mode 100644 packages/theme/document-head-contents/index.tsx create mode 100644 packages/theme/theme-legacy.css delete mode 100644 packages/theme/theme-provider.tsx create mode 100644 packages/theme/theme-provider/index.ts rename packages/theme/{ => theme-provider}/theme-provider.stories.tsx (64%) create mode 100644 packages/theme/theme-provider/theme-provider.tsx create mode 100644 packages/theme/theme-toggler/index.ts rename packages/{cookie-theme-toggler/cookie-theme-toggler.module.css => theme/theme-toggler/theme-toggler.module.css} (100%) rename packages/{cookie-theme-toggler/cookie-theme-toggler.stories.tsx => theme/theme-toggler/theme-toggler.stories.tsx} (83%) rename packages/{cookie-theme-toggler/cookie-theme-toggler.tsx => theme/theme-toggler/theme-toggler.tsx} (77%) delete mode 100644 packages/theme/types.ts rename packages/theme/{hooks.ts => use-theme-toggle.ts} (56%) rename packages/theme/{document-head-contents/element-theme-script.tsx => utils/document-head-contents.tsx} (83%) delete mode 100644 packages/theme/utils/generate-css-color-variables.ts diff --git a/packages/button/Button.test.tsx b/packages/button/Button.test.tsx index 9d279605..81daa6f8 100644 --- a/packages/button/Button.test.tsx +++ b/packages/button/Button.test.tsx @@ -1,14 +1,14 @@ import React from 'react' 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( - + - , + , ) expect(container.firstChild?.firstChild).toMatchSnapshot() diff --git a/packages/content-theme/content-theme.module.css b/packages/content-theme/content-theme.module.css deleted file mode 100644 index 16e8cb6e..00000000 --- a/packages/content-theme/content-theme.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.dark { - display: var(--lido-color-dark-display, contents); -} - -.light { - display: var(--lido-color-light-display, contents); -} diff --git a/packages/cookie-theme-toggler/index.ts b/packages/cookie-theme-toggler/index.ts deleted file mode 100644 index 74bb9deb..00000000 --- a/packages/cookie-theme-toggler/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './cookie-theme-toggler' diff --git a/packages/cookies-tooltip/cookies-tooltip.tsx b/packages/cookies-tooltip/cookies-tooltip.tsx index 20d6fabe..dd9c3b66 100644 --- 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/index.ts b/packages/index.ts index b4217187..10c2940f 100644 --- a/packages/index.ts +++ b/packages/index.ts @@ -34,6 +34,5 @@ export * from './toast' export * from './tooltip' export * from './transition' export * from './utils' -export * from './cookie-theme-toggler' -export * from './content-theme' +export * from './theme/content-theme' export * from './cookies-tooltip' diff --git a/packages/theme/base/borders.ts b/packages/theme/base/borders.ts deleted file mode 100644 index a08e6045..00000000 --- a/packages/theme/base/borders.ts +++ /dev/null @@ -1,14 +0,0 @@ -const borderRadiuses = [4, 6, 8, 10, 12] as const - -const borderRadiusesMap = { - xs: 4, - sm: 6, - md: 8, - lg: 10, - xl: 20, -} as const - -export default { - borderRadiuses, - borderRadiusesMap, -} diff --git a/packages/theme/base/breakpoints.ts b/packages/theme/base/breakpoints.ts deleted file mode 100644 index 4dcab159..00000000 --- a/packages/theme/base/breakpoints.ts +++ /dev/null @@ -1,40 +0,0 @@ -type Breakpoint = { - width: `${number}px` - height: `${number}px` -} - -const sm: Breakpoint = { - width: '359px', - height: '639px', -} - -const md: Breakpoint = { - width: '479px', - height: '799px', -} - -const lg: Breakpoint = { - width: '767px', - height: '1023px', -} - -const xl: Breakpoint = { - width: '1023px', - height: '1365px', -} - -const mediaQueries = { - sm: `@media screen and (max-width: ${sm.width})`, - md: `@media screen and (max-width: ${md.width})`, - lg: `@media screen and (max-width: ${lg.width})`, - xl: `@media screen and (max-width: ${xl.width})`, -} - -const breakpointsMap = { sm, md, lg, xl } -const breakpoints = [sm.width, md.width, lg.width, xl.width] - -export default { - breakpoints, - breakpointsMap, - mediaQueries, -} diff --git a/packages/theme/base/colors.ts b/packages/theme/base/colors.ts deleted file mode 100644 index bbf96813..00000000 --- a/packages/theme/base/colors.ts +++ /dev/null @@ -1,40 +0,0 @@ -const colors = { - darkThemeOpacity: '0', - lightThemeOpacity: '1', - - lightModeVisibility: 'visible', - darkModeVisibility: 'hidden', - - lightDisplay: 'initial', - darkDisplay: 'none', - - primary: '#00a3ff', - primaryHover: '#009bf2', - primaryContrast: '#fff', - primaryVisited: '#4bbeff', - - accent: '#27272e', - accentContrast: '#fff', - accentContrastSecondary: 'rgba(255, 255, 255, 0.6)', - accentDarken: 'rgba(0, 0, 0, .2)', - accentControlBg: 'rgba(0, 0, 0, .1)', - accentBorder: 'rgba(255, 255, 255, 0.2)', - accentBorderHover: 'rgba(255, 255, 255, 0.3)', - - error: '#e14d4d', - errorHover: '#d44c4d', - errorContrast: '#fff', - - warning: '#EC8600', - warningHover: '#f0a431', - warningContrast: '#fff', - warningBackground: '#FFFAE0', - - textDark: '#273852', - - success: '#53BA95', - successHover: '#4ba886', - successContrast: '#fff', -} as const - -export default { colors } diff --git a/packages/theme/base/index.ts b/packages/theme/base/index.ts deleted file mode 100644 index aaa8f68a..00000000 --- a/packages/theme/base/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -import colors from './colors' -import breakpoints from './breakpoints' -import spacing from './spacing' -import transitions from './transitions' -import typography from './typography' -import borders from './borders' -import shadows from './shadows' - -export default { - ...spacing, - ...breakpoints, - ...colors, - ...transitions, - ...typography, - ...borders, - ...shadows, -} diff --git a/packages/theme/base/shadows.ts b/packages/theme/base/shadows.ts deleted file mode 100644 index e9a5cec9..00000000 --- a/packages/theme/base/shadows.ts +++ /dev/null @@ -1,10 +0,0 @@ -const boxShadows = { - xs: '0px 4px 8px 0px', - sm: '0px 4px 12px 0px', - md: '0px 4px 16px 0px', - lg: '0px 8px 24px 0px', - xl: '0px 8px 32px 0px', - xxl: '0px 8px 44px 0px', -} as const - -export default { boxShadows } diff --git a/packages/theme/base/spacing.ts b/packages/theme/base/spacing.ts deleted file mode 100644 index 5cc16750..00000000 --- a/packages/theme/base/spacing.ts +++ /dev/null @@ -1,15 +0,0 @@ -const space = [4, 8, 16, 24, 32] as const - -const spaceMap = { - xs: 4, - sm: 8, - md: 16, - lg: 20, - xl: 24, - xxl: 32, -} as const - -export default { - space, - spaceMap, -} diff --git a/packages/theme/base/transitions.ts b/packages/theme/base/transitions.ts deleted file mode 100644 index 0b899d23..00000000 --- a/packages/theme/base/transitions.ts +++ /dev/null @@ -1,44 +0,0 @@ -const duration = { - fast: '100ms', - med: '150ms', - norm: '200ms', -} as const - -const ease = { - inSine: 'cubic-bezier(0.47, 0, 0.745, 0.715)', - outSine: 'cubic-bezier(0.39, 0.575, 0.565, 1)', - inOutSine: 'cubic-bezier(0.445, 0.05, 0.55, 0.95)', - - inQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)', - outQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)', - inOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)', - - inCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)', - outCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)', - inOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)', - - inQuart: 'cubic-bezier(0.895, 0.03, 0.685, 0.22)', - outQuart: 'cubic-bezier(0.165, 0.84, 0.44, 1)', - inOutQuart: 'cubic-bezier(0.77, 0, 0.175, 1)', - - inQuint: 'cubic-bezier(0.755, 0.05, 0.855, 0.06)', - outQuint: 'cubic-bezier(0.23, 1, 0.32, 1)', - inOutQuint: 'cubic-bezier(0.86, 0, 0.07, 1)', - - inExpo: 'cubic-bezier(0.95, 0.05, 0.795, 0.035)', - outExpo: 'cubic-bezier(0.19, 1, 0.22, 1)', - inOutExpo: 'cubic-bezier(1, 0, 0, 1)', - - inCirc: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)', - outCirc: 'cubic-bezier(0.075, 0.82, 0.165, 1)', - inOutCirc: 'cubic-bezier(0.785, 0.135, 0.15, 0.86)', - - inBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)', - outBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)', - inOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)', -} as const - -export default { - duration, - ease, -} diff --git a/packages/theme/base/typography.ts b/packages/theme/base/typography.ts deleted file mode 100644 index 5db1dd79..00000000 --- a/packages/theme/base/typography.ts +++ /dev/null @@ -1,19 +0,0 @@ -const fontSizes = [10, 12, 14, 16, 18, 20, 26, 32, 40, 50] as const - -const fontSizesMap = { - xxxs: 10, - xxs: 12, - xs: 14, - sm: 16, - md: 18, - lg: 20, - xl: 26, - xxl: 32, - xxxl: 40, - xxxxl: 50, -} as const - -export default { - fontSizes, - fontSizesMap, -} diff --git a/packages/theme/base/breakpoints.css b/packages/theme/breakpoints.css similarity index 100% rename from packages/theme/base/breakpoints.css rename to packages/theme/breakpoints.css diff --git a/packages/theme/constants.ts b/packages/theme/constants.ts deleted file mode 100644 index aa3f9a7f..00000000 --- a/packages/theme/constants.ts +++ /dev/null @@ -1,16 +0,0 @@ -export enum ThemeName { - light = 'light', - dark = 'dark', -} - -export const DEFAULT_THEME_NAME = ThemeName.light - -export const themeCookieKey = 'lido-theme-manual' -export const globalStyleDataAttribute = 'data-lido-ui-global-style' - -export const themeCookieExpire = 365 - -export const prefersDarkThemeMediaQuery = - typeof window !== 'undefined' - ? window.matchMedia?.('(prefers-color-scheme: dark)') - : undefined diff --git a/packages/theme/content-theme/content-theme.module.css b/packages/theme/content-theme/content-theme.module.css new file mode 100644 index 00000000..7ad64056 --- /dev/null +++ b/packages/theme/content-theme/content-theme.module.css @@ -0,0 +1,9 @@ +@layer contentTheme { + .dark { + display: var(--lido-dark-display, contents); + } + + .light { + display: var(--lido-light-display, contents); + } +} diff --git a/packages/content-theme/content-theme.stories.tsx b/packages/theme/content-theme/content-theme.stories.tsx similarity index 92% rename from packages/content-theme/content-theme.stories.tsx rename to packages/theme/content-theme/content-theme.stories.tsx index b1670ca0..f3ed6a99 100644 --- a/packages/content-theme/content-theme.stories.tsx +++ b/packages/theme/content-theme/content-theme.stories.tsx @@ -1,5 +1,5 @@ import { StoryFn, Meta } from '@storybook/react' -import { Block } from '../block' +import { Block } from '../../block' import { ContentTheme } from '.' export default { diff --git a/packages/content-theme/content-theme.tsx b/packages/theme/content-theme/content-theme.tsx similarity index 100% rename from packages/content-theme/content-theme.tsx rename to packages/theme/content-theme/content-theme.tsx diff --git a/packages/content-theme/index.ts b/packages/theme/content-theme/index.ts similarity index 100% rename from packages/content-theme/index.ts rename to packages/theme/content-theme/index.ts diff --git a/packages/theme/cookie-theme-provider.tsx b/packages/theme/cookie-theme-provider.tsx index 512638cf..6939863a 100644 --- a/packages/theme/cookie-theme-provider.tsx +++ b/packages/theme/cookie-theme-provider.tsx @@ -8,21 +8,33 @@ import React, { useState, } from 'react' import { ThemeProvider as StyledThemeProvider } from 'styled-components' -import { - DEFAULT_THEME_NAME, - prefersDarkThemeMediaQuery, - ThemeName, -} from './constants' import { themeMap } from './themes' import { getThemeNameFromCookies } from './utils/cookies' -import { initColors } from './document-head-contents' -import { updateGlobalTheme } from './document-head-contents/element-theme-script' -import { ThemeContext } from './types' +import { initColors } from './utils/document-head-contents' +import { updateGlobalTheme } from './utils/document-head-contents' + +export enum ThemeName { + light = 'light', + dark = 'dark', +} +export type ThemeNames = keyof typeof ThemeName + +export type ThemeContext = { + toggleTheme: () => void + themeName: ThemeNames +} const defaultThemeContext = {} as ThemeContext export const ThemeToggleContext = createContext(defaultThemeContext) +export const DEFAULT_THEME_NAME = ThemeName.light + +export const prefersDarkThemeMediaQuery = + typeof window !== 'undefined' + ? window.matchMedia?.('(prefers-color-scheme: dark)') + : undefined + // we need to initialize this before react component code if we're using this provider or ThemeProvider initColors() diff --git a/packages/theme/document-head-contents/element-fonts.tsx b/packages/theme/document-head-contents/element-fonts.tsx deleted file mode 100644 index a7416ded..00000000 --- a/packages/theme/document-head-contents/element-fonts.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const CSS_FONTS = `@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800); -body { -font-family: Manrope, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, - Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; -}` - -export const Fonts = (): JSX.Element => diff --git a/packages/theme/document-head-contents/element-theme-colors.tsx b/packages/theme/document-head-contents/element-theme-colors.tsx deleted file mode 100644 index 0009769f..00000000 --- a/packages/theme/document-head-contents/element-theme-colors.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { themeDark, themeLight } from '../themes' -import { generateCssColorVariables } from '../utils/generate-css-color-variables' -import { globalStyleDataAttribute, ThemeName } from '../constants' -import { VOID_FN } from '../../utils' - -/** - * What is happening here: - * We want to have React dehydrated HTML to be loaded after theme is initialized. - * That means that we need to have some code executed BEFORE main react components code, - * before even injected script itself, so we need to provide some CSS and JS in document head - * to read the theme from cookie and make global CSS follow preferred palette. - * This file is providing CSS themes that defines custom CSS variables with palette to - * make HTML document styled even before any code is loaded - * */ - -const darkThemeColors = generateCssColorVariables(themeDark.colors) -const lightThemeColors = generateCssColorVariables(themeLight.colors) - -export let initGlobalColors = VOID_FN -export const themeCSSValueString = ` -html, [data-lido-theme='${ThemeName.light}'] { -color-theme: light; -${lightThemeColors} -} -@media (prefers-color-scheme: dark) { -html:not([data-lido-theme='${ThemeName.light}']) { -color-theme: dark; -${darkThemeColors} -} -} -[data-lido-theme='${ThemeName.dark}'] { -color-theme: dark; -${darkThemeColors} -}` - -if (typeof window !== 'undefined') { - if (!document.querySelector(`style[${globalStyleDataAttribute}]`)) { - initGlobalColors = () => { - const style = document.createElement('style') - style.setAttribute(globalStyleDataAttribute, '') - style.innerHTML = themeCSSValueString - - document.head.appendChild(style) - // eslint-disable-next-line @typescript-eslint/no-empty-function - initGlobalColors = VOID_FN - } - } -} - -export const StyleThemeColors = () => ( - + export const LidoUIHead: FC<{ jsStyleScript?: boolean -}> = ({ jsStyleScript = true }) => ( - <>{jsStyleScript ? : null} + cssFont?: boolean +}> = ({ jsStyleScript = true, cssFont = false }) => ( + <> + {jsStyleScript ? : null} + {cssFont ? : null} + ) From 2df7ddb48f25a0cd94f15cf85345a5e794001dee Mon Sep 17 00:00:00 2001 From: Nikita Date: Tue, 1 Aug 2023 16:55:18 +0200 Subject: [PATCH 05/10] fix: removed extra import --- packages/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/index.ts b/packages/index.ts index 4aa5fa57..edb41c5b 100644 --- a/packages/index.ts +++ b/packages/index.ts @@ -32,5 +32,4 @@ export * from './toast' export * from './tooltip' export * from './transition' export * from './utils' -export * from './theme/content-theme' export * from './cookies-tooltip' From f978a8f04482ec0a974e504b7843a30b6e8d091a Mon Sep 17 00:00:00 2001 From: Nikita Date: Wed, 2 Aug 2023 12:13:20 +0200 Subject: [PATCH 06/10] fix: content-theme props --- packages/theme/content-theme/content-theme.tsx | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/packages/theme/content-theme/content-theme.tsx b/packages/theme/content-theme/content-theme.tsx index d6c3c612..b2dbaf4c 100644 --- a/packages/theme/content-theme/content-theme.tsx +++ b/packages/theme/content-theme/content-theme.tsx @@ -1,3 +1,4 @@ +import cn from 'classnames' import { ComponentPropsWithoutRef, FC, ReactElement } from 'react' import styles from './content-theme.module.css' @@ -6,13 +7,20 @@ export type ContentThemeProps = ComponentPropsWithoutRef<'div'> & { lightContent: ReactElement } -export const ContentTheme: FC = ( - props: ContentThemeProps, -) => { +export const ContentTheme: FC = ({ + darkContent, + lightContent, + className, + ...rest +}: ContentThemeProps) => { return ( <> -
{props.darkContent}
-
{props.lightContent}
+
+ {darkContent} +
+
+ {lightContent} +
) } From d820828bb8226d770853739386004cf35c7347ae Mon Sep 17 00:00:00 2001 From: Nikita Date: Wed, 2 Aug 2023 12:17:20 +0200 Subject: [PATCH 07/10] Merge branch 'v4' into feature/ui-866-migrate-theme --- packages/accordion/Accordion.tsx | 9 +++++++-- packages/button/Button.test.tsx | 1 - packages/checkbox/Checkbox.tsx | 9 +++++++-- packages/chip/Chip.tsx | 9 +++++++-- packages/hooks/useMergeRefs.ts | 8 ++++---- packages/hooks/useOutsideClick.ts | 4 ++-- packages/identicon/Identicon.tsx | 11 ++++++++--- packages/identicon/declarations.d.ts | 8 +++++--- packages/input/OptionsSlider.tsx | 4 ++-- packages/input/Textarea.tsx | 8 +++++--- packages/modal/Modal.tsx | 8 +++++--- packages/modal/useModalClose.ts | 8 ++++---- packages/modal/useModalFocus.ts | 4 ++-- packages/pagination/Pagination.tsx | 5 +++-- packages/popover/PopoverRoot.tsx | 11 ++++++++--- packages/popover/usePopoverPosition.ts | 12 +++++++++--- packages/popup-menu/PopupMenuItem.tsx | 11 ++++++++--- packages/popup-menu/PopupMenuProvider.tsx | 9 ++++----- packages/select/Select.tsx | 4 ++-- packages/select/useSelect.ts | 17 ++++++++-------- packages/stack/HStack.tsx | 2 +- packages/stack/StackItem.tsx | 6 +----- packages/stack/StackProvider.tsx | 9 +++++---- packages/stack/VStack.tsx | 4 ++-- packages/stack/types.tsx | 1 - packages/table/Td.tsx | 6 +----- packages/table/Tfoot.tsx | 6 +----- packages/table/Th.tsx | 6 +----- packages/table/Thead.tsx | 6 +----- packages/table/Tr.tsx | 6 +----- packages/theme/cookie-theme-provider.tsx | 5 +++-- packages/tooltip/Tooltip.tsx | 7 ++++--- packages/transition/withTransition.tsx | 24 +++++++++++++++-------- 33 files changed, 137 insertions(+), 111 deletions(-) delete mode 100644 packages/stack/types.tsx diff --git a/packages/accordion/Accordion.tsx b/packages/accordion/Accordion.tsx index 83cf364a..837e2e6b 100644 --- a/packages/accordion/Accordion.tsx +++ b/packages/accordion/Accordion.tsx @@ -1,4 +1,9 @@ -import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' +import { + ComponentPropsWithoutRef, + ForwardedRef, + forwardRef, + ReactNode, +} from 'react' import { useExpanded } from './useExpanded' import { ArrowBottom } from '../icons' import styles from './Accordion.module.css' @@ -6,7 +11,7 @@ import cn from 'classnames' export type AccordionProps = ComponentPropsWithoutRef<'div'> & { defaultExpanded?: boolean - summary: React.ReactNode + summary: ReactNode } export const Accordion = forwardRef( diff --git a/packages/button/Button.test.tsx b/packages/button/Button.test.tsx index 81daa6f8..e50ab82a 100644 --- a/packages/button/Button.test.tsx +++ b/packages/button/Button.test.tsx @@ -1,4 +1,3 @@ -import React from 'react' import { render } from '@testing-library/react' import { LightThemeProvider } from '../theme' import 'jest-styled-components' diff --git a/packages/checkbox/Checkbox.tsx b/packages/checkbox/Checkbox.tsx index d612bb52..932cfe0c 100644 --- a/packages/checkbox/Checkbox.tsx +++ b/packages/checkbox/Checkbox.tsx @@ -1,11 +1,16 @@ -import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' +import { + ComponentPropsWithoutRef, + ForwardedRef, + forwardRef, + RefObject, +} from 'react' import { Text } from '../text' import cn from 'classnames' import styles from './Checkbox.module.css' import { Check } from '../icons' export type CheckboxProps = ComponentPropsWithoutRef<'input'> & { - wrapperRef?: React.RefObject + wrapperRef?: RefObject children?: never label?: string } diff --git a/packages/chip/Chip.tsx b/packages/chip/Chip.tsx index e7312fb3..36290700 100644 --- a/packages/chip/Chip.tsx +++ b/packages/chip/Chip.tsx @@ -1,4 +1,9 @@ -import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' +import { + ComponentPropsWithoutRef, + ForwardedRef, + forwardRef, + RefObject, +} from 'react' import cn from 'classnames' import styles from './Chip.module.css' @@ -11,7 +16,7 @@ export enum ChipVariant { export type ChipVariants = keyof typeof ChipVariant export type ChipProps = ComponentPropsWithoutRef<'button'> & { - wrapperRef?: React.RefObject + wrapperRef?: RefObject variant?: ChipVariants } diff --git a/packages/hooks/useMergeRefs.ts b/packages/hooks/useMergeRefs.ts index 651a24af..5cfa62fc 100644 --- a/packages/hooks/useMergeRefs.ts +++ b/packages/hooks/useMergeRefs.ts @@ -1,10 +1,10 @@ import { useMergeRefs as useCallbackMergeRefs } from 'use-callback-ref' -import React from 'react' +import { ForwardedRef, MutableRefObject } from 'react' export const useMergeRefs = ( - refs: (React.ForwardedRef | undefined)[], -): React.MutableRefObject => { + refs: (ForwardedRef | undefined)[], +): MutableRefObject => { return useCallbackMergeRefs( - refs.filter((ref): ref is React.ForwardedRef => !!ref), + refs.filter((ref): ref is ForwardedRef => !!ref), ) } diff --git a/packages/hooks/useOutsideClick.ts b/packages/hooks/useOutsideClick.ts index 7a2ab8e8..39f7e0ad 100644 --- a/packages/hooks/useOutsideClick.ts +++ b/packages/hooks/useOutsideClick.ts @@ -1,9 +1,9 @@ -import React, { useCallback, useEffect, useRef } from 'react' +import { RefObject, useCallback, useEffect, useRef } from 'react' export const useOutsideClick = ( callback?: () => void, ): { - ref: React.RefObject + ref: RefObject } => { const ref = useRef(null) diff --git a/packages/identicon/Identicon.tsx b/packages/identicon/Identicon.tsx index ff70a5b3..372f4b42 100644 --- a/packages/identicon/Identicon.tsx +++ b/packages/identicon/Identicon.tsx @@ -1,4 +1,9 @@ -import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' +import { + ComponentPropsWithoutRef, + CSSProperties, + ForwardedRef, + forwardRef, +} from 'react' import Jazzicon, { jsNumberForAddress } from 'react-jazzicon' import cn from 'classnames' import styles from './Identicon.module.css' @@ -6,8 +11,8 @@ import styles from './Identicon.module.css' export type IdenticonProps = ComponentPropsWithoutRef<'div'> & { address: string diameter?: number - paperStyles?: React.CSSProperties - svgStyles?: React.CSSProperties + paperStyles?: CSSProperties + svgStyles?: CSSProperties } export const Identicon = forwardRef( diff --git a/packages/identicon/declarations.d.ts b/packages/identicon/declarations.d.ts index dfc47d86..12980b3a 100644 --- a/packages/identicon/declarations.d.ts +++ b/packages/identicon/declarations.d.ts @@ -1,11 +1,13 @@ declare module 'react-jazzicon' { + import { CSSProperties, PureComponent } from 'react' + export function jsNumberForAddress(address: string): number - export default class Jazzicon extends React.PureComponent { + export default class Jazzicon extends PureComponent { props: { seed: number diameter: number - paperStyles?: React.CSSProperties - svgStyles?: React.CSSProperties + paperStyles?: CSSProperties + svgStyles?: CSSProperties } } } diff --git a/packages/input/OptionsSlider.tsx b/packages/input/OptionsSlider.tsx index 2a39d74d..6360db40 100644 --- a/packages/input/OptionsSlider.tsx +++ b/packages/input/OptionsSlider.tsx @@ -1,4 +1,4 @@ -import { ForwardedRef, ReactNode, forwardRef } from 'react' +import { ForwardedRef, ReactNode, forwardRef, ChangeEvent } from 'react' import { SliderInput, SliderInputProps } from './SliderInput' export type SliderOptionValue = string | number @@ -34,7 +34,7 @@ export const OptionsSlider = forwardRef( return options[optionIndex].label } - const handleSliderChange = (e: React.ChangeEvent) => { + const handleSliderChange = (e: ChangeEvent) => { const optionIndex = Number(e.target.value) onChange(options[optionIndex].value, optionIndex) } diff --git a/packages/input/Textarea.tsx b/packages/input/Textarea.tsx index c9032d69..0d23cfb1 100644 --- a/packages/input/Textarea.tsx +++ b/packages/input/Textarea.tsx @@ -6,8 +6,8 @@ import cn from 'classnames' export type TextareaProps = ComponentPropsWithoutRef<'textarea'> & CommonProps export const Textarea = forwardRef( - (props: TextareaProps, ref?: ForwardedRef) => { - const { + ( + { id, disabled = false, label, @@ -24,7 +24,9 @@ export const Textarea = forwardRef( wrapperRef, children, ...rest - } = props + }: TextareaProps, + ref?: ForwardedRef, + ) => { const hasLabel = !!label && variant === 'default' const hasError = !!error diff --git a/packages/modal/Modal.tsx b/packages/modal/Modal.tsx index 4d5a914d..d9b062de 100644 --- a/packages/modal/Modal.tsx +++ b/packages/modal/Modal.tsx @@ -15,8 +15,8 @@ export type ModalProps = Omit & { } export const Modal = forwardRef( - (props: ModalProps, ref?: ForwardedRef) => { - const { + ( + { children, title, titleIcon, @@ -27,7 +27,9 @@ export const Modal = forwardRef( onClose, onBack, ...rest - } = props + }: ModalProps, + ref?: ForwardedRef, + ) => { const withTitleIcon = !!titleIcon const withSubtitle = !!subtitle const withCloseButton = !!onClose diff --git a/packages/modal/useModalClose.ts b/packages/modal/useModalClose.ts index c97721a4..40ee614d 100644 --- a/packages/modal/useModalClose.ts +++ b/packages/modal/useModalClose.ts @@ -1,15 +1,15 @@ -import React, { useCallback, useRef } from 'react' +import { useCallback, useRef, MouseEvent, RefObject } from 'react' export const useModalClose = ( callback?: () => void, ): { - ref: React.RefObject - handleClick: (event: React.MouseEvent) => void + ref: RefObject + handleClick: (event: MouseEvent) => void } => { const ref = useRef(null) const handleClick = useCallback( - (event: React.MouseEvent) => { + (event: MouseEvent) => { const contentElement = ref.current if (!contentElement) return diff --git a/packages/modal/useModalFocus.ts b/packages/modal/useModalFocus.ts index 529497f7..8f9df892 100644 --- a/packages/modal/useModalFocus.ts +++ b/packages/modal/useModalFocus.ts @@ -1,8 +1,8 @@ -import React, { useCallback, useEffect, useRef } from 'react' +import { RefObject, useCallback, useEffect, useRef } from 'react' import { useInterceptFocus } from '../hooks' import { FOCUSABLE_ELEMENTS } from './constants' -export const useModalFocus = (): React.RefObject => { +export const useModalFocus = (): RefObject => { const modalRef = useRef(null) const getFocusableNodes = useCallback(() => { diff --git a/packages/pagination/Pagination.tsx b/packages/pagination/Pagination.tsx index 7a715c77..5e963a3d 100644 --- a/packages/pagination/Pagination.tsx +++ b/packages/pagination/Pagination.tsx @@ -4,6 +4,7 @@ import { useEffect, FC, ComponentPropsWithoutRef, + MouseEvent, } from 'react' import { ArrowLeft, ArrowRight } from '../icons' import getShowingPages from './getShowingPages' @@ -23,7 +24,7 @@ const getActiveItem = (length: number, activeItem: number): number => { export type SiblingsCount = 0 | 1 -export type onItemClick = (index: number, e?: React.MouseEvent) => void +export type onItemClick = (index: number, e?: MouseEvent) => void export type PaginationProps = Omit< ComponentPropsWithoutRef<'div'>, @@ -60,7 +61,7 @@ export const Pagination: FC = ({ return null } - const onPageItemClick = (page: number, e: React.MouseEvent) => { + const onPageItemClick = (page: number, e: MouseEvent) => { onItemClick(page, e) setCurrPage(page) } diff --git a/packages/popover/PopoverRoot.tsx b/packages/popover/PopoverRoot.tsx index 8efae32e..66ae975a 100644 --- a/packages/popover/PopoverRoot.tsx +++ b/packages/popover/PopoverRoot.tsx @@ -1,4 +1,9 @@ -import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' +import { + ComponentPropsWithoutRef, + ForwardedRef, + forwardRef, + RefObject, +} from 'react' import ReactDOM from 'react-dom' import { modalRoot } from '../utils' import { useMergeRefs, useOutsideClick, useEscape } from '../hooks' @@ -35,8 +40,8 @@ export type PopoverRootOwnProps = Omit< ComponentPropsWithoutRef<'div'>, 'children' > & { - wrapperRef?: React.RefObject - anchorRef: React.RefObject + wrapperRef?: RefObject + anchorRef: RefObject placement?: PopoverPlacements backdrop?: boolean onClose?: () => void diff --git a/packages/popover/usePopoverPosition.ts b/packages/popover/usePopoverPosition.ts index b96e4713..15627bd3 100644 --- a/packages/popover/usePopoverPosition.ts +++ b/packages/popover/usePopoverPosition.ts @@ -1,4 +1,10 @@ -import React, { useRef, useLayoutEffect, useState, CSSProperties } from 'react' +import { + useRef, + useLayoutEffect, + useState, + CSSProperties, + RefObject, +} from 'react' import { useWindowSize } from '../hooks' import { PopoverRootProps } from './PopoverRoot' import { INITIAL_STYLE, DEFAULT_PLACEMENT } from './constants' @@ -12,8 +18,8 @@ export const usePopoverPosition = < anchorRef, style, }: Pick): { - popoverRef: React.RefObject

- wrapperRef: React.RefObject + popoverRef: RefObject

+ wrapperRef: RefObject customStyle: CSSProperties } => { const popoverRef = useRef

(null) diff --git a/packages/popup-menu/PopupMenuItem.tsx b/packages/popup-menu/PopupMenuItem.tsx index 800565dd..6724dfc5 100644 --- a/packages/popup-menu/PopupMenuItem.tsx +++ b/packages/popup-menu/PopupMenuItem.tsx @@ -1,11 +1,16 @@ -import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' +import { + ComponentPropsWithoutRef, + ForwardedRef, + forwardRef, + ReactNode, +} from 'react' import { usePopupMenuContext } from './PopupMenuProvider' import cn from 'classnames' import styles from './PopupMenu.module.css' export type PopupMenuItemProps = ComponentPropsWithoutRef<'button'> & { - leftDecorator?: React.ReactNode - rightDecorator?: React.ReactNode + leftDecorator?: ReactNode + rightDecorator?: ReactNode active?: boolean } diff --git a/packages/popup-menu/PopupMenuProvider.tsx b/packages/popup-menu/PopupMenuProvider.tsx index d66459f3..ef296cf1 100644 --- a/packages/popup-menu/PopupMenuProvider.tsx +++ b/packages/popup-menu/PopupMenuProvider.tsx @@ -11,10 +11,9 @@ export const usePopupMenuContext = (): PopupMenuContext => { return useContext(Context) } -export const PopupMenuProvider: FC> = ( - props, -) => { - const { variant, ...rest } = props - +export const PopupMenuProvider: FC> = ({ + variant, + ...rest +}) => { return } diff --git a/packages/select/Select.tsx b/packages/select/Select.tsx index d7965737..2c709796 100644 --- a/packages/select/Select.tsx +++ b/packages/select/Select.tsx @@ -1,4 +1,4 @@ -import { ForwardedRef, forwardRef, useRef } from 'react' +import { ForwardedRef, forwardRef, RefObject, useRef } from 'react' import { SelectArrow, SelectArrowVariants } from './SelectArrow' import { useMergeRefs } from '../hooks' import { PopupMenu } from '../popup-menu' @@ -15,7 +15,7 @@ export type SelectProps = Omit< InputProps, 'type' | 'readonly' | 'onChange' | 'value' | 'defaultValue' > & { - anchorRef?: React.RefObject + anchorRef?: RefObject arrow?: SelectArrowVariants value?: SelectOptionValue defaultValue?: SelectOptionValue diff --git a/packages/select/useSelect.ts b/packages/select/useSelect.ts index 7322e0aa..434a8eda 100644 --- a/packages/select/useSelect.ts +++ b/packages/select/useSelect.ts @@ -1,21 +1,20 @@ -import React, { +import { useCallback, useMemo, useState, Children, cloneElement, useEffect, + MouseEvent, + KeyboardEvent, + ReactNode, } from 'react' import { isElement } from 'react-is' import { SelectOptionValue, SelectHandleChange, SelectProps } from './Select' -type SelectHandleClick = ( - event: React.MouseEvent, -) => void +type SelectHandleClick = (event: MouseEvent) => void -type SelectHandleKeyDown = ( - event: React.KeyboardEvent, -) => void +type SelectHandleKeyDown = (event: KeyboardEvent) => void type SelectHandleClose = () => void @@ -36,7 +35,7 @@ type UseSelect = ( handleKeyDown: SelectHandleKeyDown opened: boolean title: string - options: React.ReactNode + options: ReactNode } export const useSelect: UseSelect = ({ @@ -99,7 +98,7 @@ export const useSelect: UseSelect = ({ const { values, options } = useMemo(() => { const values = new Map() - const options: React.ReactNode = Children.map(children, (child) => { + const options: ReactNode = Children.map(children, (child) => { if (!isElement(child)) return child const value = child.props.value diff --git a/packages/stack/HStack.tsx b/packages/stack/HStack.tsx index 81a73a6f..982efe24 100644 --- a/packages/stack/HStack.tsx +++ b/packages/stack/HStack.tsx @@ -1,4 +1,4 @@ -import React, { ForwardedRef, forwardRef } from 'react' +import { ForwardedRef, forwardRef } from 'react' import { Stack, StackProps } from './Stack' export type HStackProps = { diff --git a/packages/stack/StackItem.tsx b/packages/stack/StackItem.tsx index b06eb85d..317df068 100644 --- a/packages/stack/StackItem.tsx +++ b/packages/stack/StackItem.tsx @@ -1,8 +1,4 @@ -import React, { - ComponentPropsWithoutRef, - ForwardedRef, - forwardRef, -} from 'react' +import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' import { useStackContext } from './StackProvider' import cn from 'classnames' import styles from './StackItem.module.css' diff --git a/packages/stack/StackProvider.tsx b/packages/stack/StackProvider.tsx index 285337cd..d85d2b88 100644 --- a/packages/stack/StackProvider.tsx +++ b/packages/stack/StackProvider.tsx @@ -1,4 +1,4 @@ -import React, { PropsWithChildren, createContext, useContext, FC } from 'react' +import { PropsWithChildren, createContext, useContext, FC } from 'react' import { StackSpacings } from './Stack' export interface StackContext { @@ -11,8 +11,9 @@ export const useStackContext = (): StackContext => { return useContext(Context) } -export const StackProvider: FC> = (props) => { - const { spacing, ...rest } = props - +export const StackProvider: FC> = ({ + spacing, + ...rest +}) => { return } diff --git a/packages/stack/VStack.tsx b/packages/stack/VStack.tsx index 21c341e0..0a78186f 100644 --- a/packages/stack/VStack.tsx +++ b/packages/stack/VStack.tsx @@ -1,4 +1,4 @@ -import React, { ForwardedRef, forwardRef } from 'react' +import { ForwardedRef, forwardRef } from 'react' import { Stack, StackProps } from './Stack' export type VStackProps = { @@ -15,4 +15,4 @@ export const VStack = forwardRef( }, ) -VStack.displayName = 'Vstack' +VStack.displayName = 'VStack' diff --git a/packages/stack/types.tsx b/packages/stack/types.tsx deleted file mode 100644 index c382735d..00000000 --- a/packages/stack/types.tsx +++ /dev/null @@ -1 +0,0 @@ -export type { Theme } from '../theme' diff --git a/packages/table/Td.tsx b/packages/table/Td.tsx index 3c6f3514..bd0e3ce4 100644 --- a/packages/table/Td.tsx +++ b/packages/table/Td.tsx @@ -1,8 +1,4 @@ -import React, { - ComponentPropsWithoutRef, - ForwardedRef, - forwardRef, -} from 'react' +import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' import cn from 'classnames' import styles from './Td.module.css' diff --git a/packages/table/Tfoot.tsx b/packages/table/Tfoot.tsx index 1feb2698..cd4a3889 100644 --- a/packages/table/Tfoot.tsx +++ b/packages/table/Tfoot.tsx @@ -1,8 +1,4 @@ -import React, { - ComponentPropsWithoutRef, - ForwardedRef, - forwardRef, -} from 'react' +import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' import cn from 'classnames' import styles from './Table.module.css' diff --git a/packages/table/Th.tsx b/packages/table/Th.tsx index 2e93ca8a..77660967 100644 --- a/packages/table/Th.tsx +++ b/packages/table/Th.tsx @@ -1,8 +1,4 @@ -import React, { - ComponentPropsWithoutRef, - ForwardedRef, - forwardRef, -} from 'react' +import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' import styles from './Th.module.css' import cn from 'classnames' import { className } from 'postcss-selector-parser' diff --git a/packages/table/Thead.tsx b/packages/table/Thead.tsx index 2f5f4a48..96193013 100644 --- a/packages/table/Thead.tsx +++ b/packages/table/Thead.tsx @@ -1,8 +1,4 @@ -import React, { - ComponentPropsWithoutRef, - ForwardedRef, - forwardRef, -} from 'react' +import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' import styles from './Thead.module.css' import { className } from 'postcss-selector-parser' import cn from 'classnames' diff --git a/packages/table/Tr.tsx b/packages/table/Tr.tsx index 8f6ed382..7b65cc05 100644 --- a/packages/table/Tr.tsx +++ b/packages/table/Tr.tsx @@ -1,8 +1,4 @@ -import React, { - ComponentPropsWithoutRef, - ForwardedRef, - forwardRef, -} from 'react' +import { ComponentPropsWithoutRef, ForwardedRef, forwardRef } from 'react' import cn from 'classnames' import styles from './Tr.module.css' diff --git a/packages/theme/cookie-theme-provider.tsx b/packages/theme/cookie-theme-provider.tsx index 6939863a..c6e55c4f 100644 --- a/packages/theme/cookie-theme-provider.tsx +++ b/packages/theme/cookie-theme-provider.tsx @@ -1,6 +1,7 @@ -import React, { +import { createContext, FC, + memo, PropsWithChildren, useContext, useEffect, @@ -53,7 +54,7 @@ export const CookieThemeProvider: FC< initialThemeName?: ThemeName overrideThemeName?: ThemeName }> -> = React.memo( +> = memo( ({ children, initialThemeName, diff --git a/packages/tooltip/Tooltip.tsx b/packages/tooltip/Tooltip.tsx index 2a13641a..061772fa 100644 --- a/packages/tooltip/Tooltip.tsx +++ b/packages/tooltip/Tooltip.tsx @@ -1,4 +1,4 @@ -import React, { +import { ForwardedRef, forwardRef, Children, @@ -8,6 +8,7 @@ import React, { ReactNode, ReactElement, RefAttributes, + MouseEvent, } from 'react' import { useMergeRefs } from '../hooks' import { Popover, PopoverProps } from '../popover' @@ -55,11 +56,11 @@ export const Tooltip = forwardRef( <> {cloneElement(child, { ref: mergedRef, - onMouseEnter(event: React.MouseEvent) { + onMouseEnter(event: MouseEvent) { handleMouseEnter() child.props.onMouseEnter?.(event) }, - onMouseLeave(event: React.MouseEvent) { + onMouseLeave(event: MouseEvent) { handleMouseLeave() child.props.onMouseLeave?.(event) }, diff --git a/packages/transition/withTransition.tsx b/packages/transition/withTransition.tsx index cfcfde6d..00dfd998 100644 --- a/packages/transition/withTransition.tsx +++ b/packages/transition/withTransition.tsx @@ -1,4 +1,11 @@ -import React, { ForwardedRef, forwardRef } from 'react' +import { + ComponentType, + ForwardedRef, + forwardRef, + ForwardRefExoticComponent, + PropsWithoutRef, + RefAttributes, +} from 'react' import { useMergeRefs } from '../hooks' import { Transition } from 'react-transition-group' import { DEFAULT_DURATION } from './constants' @@ -11,12 +18,12 @@ export default function withTransition< P extends TransitionInnerProps, E extends HTMLElement, >( - Component: React.ComponentType

, -): React.ForwardRefExoticComponent< - React.PropsWithoutRef> & React.RefAttributes + Component: ComponentType

, +): ForwardRefExoticComponent< + PropsWithoutRef> & RefAttributes > { - function Wrapped(props: WrappedProps

, externalRef: ForwardedRef) { - const { + function Wrapped( + { in: state = false, timeout = DEFAULT_DURATION, mountOnEnter = true, @@ -32,8 +39,9 @@ export default function withTransition< onExiting, onExited, ...rest - } = props - + }: WrappedProps

, + externalRef: ForwardedRef, + ) { const transitionProps = { in: state, timeout, From 07643a9559c9fc6e87642652ab4f03702664ba1c Mon Sep 17 00:00:00 2001 From: Nikita Date: Fri, 4 Aug 2023 19:00:37 +0200 Subject: [PATCH 08/10] feat: added RBG variants --- packages/theme/theme.css | 39 +++++++++++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 4 deletions(-) diff --git a/packages/theme/theme.css b/packages/theme/theme.css index 02a0209e..b649bc64 100644 --- a/packages/theme/theme.css +++ b/packages/theme/theme.css @@ -7,29 +7,42 @@ --lido-color-primary: #00a3ff; --lido-rgb-primary: 0, 163, 255; --lido-color-primary-hover: #009bf2; + --lido-rgb-primary-hover: 0, 155, 242; --lido-color-primary-contrast: #fff; + --lido-rgb-primary-contrast: 255, 255, 255; --lido-color-primary-visited: #4bbeff; + --lido-rgb-primary-visited: 75, 190, 255; --lido-color-accent: #27272e; + --lido-rgb-accent: 39, 39, 46; --lido-color-accent-contrast: #fff; + --lido-rgb-accent-contrast: 255, 255, 255; --lido-color-accent-contrast-secondary: rgb(255 255 255 / 60%); --lido-color-accent-darken: rgb(0 0 0 / 20%); - --lido-color-accent-control-bg: rgb(0 0 0 / 10%); - --lido-color-accent-border: rgb(255 255 255 / 20%); - --lido-color-accent-border-hover: rgb(255 255 255 / 30%); + --lido-color-accent-control-bg: rgb(239 242 246 / 56%); + --lido-color-accent-border: rgb(0 10 61 / 12%); + --lido-color-accent-border-hover: rgb(0 10 61 / 24%); --lido-color-error: #e14d4d; --lido-rgb-error: 225, 77, 77; --lido-color-error-hover: #d44c4d; + --lido-rgb-error-hover: 212, 76, 77; --lido-color-error-contrast: #fff; + --lido-rgb-error-contrast: 255, 255, 255; --lido-color-warning: #ec8600; --lido-rgb-warning: 236, 134, 0; --lido-color-warning-hover: #f0a431; + --lido-rgb-warning-hover: 240, 164, 49; --lido-color-warning-contrast: #fff; + --lido-rgb-warning-contrast: 255, 255, 255; --lido-color-warning-background: #fffae0; + --lido-rgb-warning-background: 255, 250, 224; --lido-color-text-dark: #273852; - --lido-rgb-success: 83, 186, 149; + --lido-rgb-text-dark: 39, 56, 82; --lido-color-success: #53ba95; + --lido-rgb-success: 83, 186, 149; --lido-color-success-hover: #4ba886; + --lido-rgb-success-hover: 75, 168, 134; --lido-color-success-contrast: #fff; + --lido-rgb-success-contrast: 255, 255, 255; --lido-shadows-xxl: 0px 8px 44px 0px; --lido-shadows-xl: 0px 8px 32px 0px; --lido-shadows-lg: 0px 8px 24px 0px; @@ -90,18 +103,28 @@ --lido-light-display: initial; --lido-dark-display: none; --lido-color-secondary: #273852; + --lido-rgb-secondary: 39, 56, 82; --lido-color-secondary-hover: #212f45; + --lido-rgb-secondary-hover: 33, 47, 69; --lido-color-secondary-contrast: #fff; + --lido-rgb-secondary-contrast: 255, 255, 255; --lido-color-background: #f2f4f6; + --lido-rgb-background: 242, 244, 246; --lido-color-background-darken: #dae0e5; + --lido-rgb-background-darken: 218, 224, 229; --lido-color-background-secondary: #eff2f6; + --lido-rgb-background-secondary: 239, 242, 246; --lido-color-foreground: #fff; + --lido-rgb-foreground: 255, 255, 255; --lido-color-overlay: rgb(0 0 0 / 50%); --lido-color-shadow-light: rgb(39 56 82 / 8%); --lido-color-shadow-dark: rgb(0 0 0 / 25%); --lido-color-text: #273852; + --lido-rgb-text: 39, 56, 82; --lido-color-text-secondary: #7a8aa0; + --lido-rgb-text-secondary: 122, 138, 160; --lido-color-accent-text: #273852; + --lido-rgb-accent-text: 39, 56, 82; --lido-color-border: rgb(0 10 61 / 12%); --lido-color-border-active: rgb(0 10 61 / 48%); --lido-color-border-hover: rgb(0 10 61 / 24%); @@ -122,17 +145,25 @@ --lido-dark-display: initial; --lido-color-secondary: rgb(255 255 255 / 80%); --lido-color-secondary-hover: #fff; + --lido-rgb-secondary-hover: 255, 255, 255; --lido-color-secondary-contrast: #273852; + --lido-rgb-secondary-contrast: 39, 56, 82; --lido-color-background: #1c1c21; + --lido-rgb-background: 28, 28, 33; --lido-color-background-darken: #131317; + --lido-rgb-background-darken: 19, 19, 23; --lido-color-background-secondary: #27272e; + --lido-rgb-background-secondary: 39, 39, 46; --lido-color-foreground: #34343d; + --lido-rgb-foreground: 52, 52, 61; --lido-color-overlay: rgb(0 0 0 / 50%); --lido-color-shadow-light: rgb(0 0 0 / 25%); --lido-color-shadow-dark: rgb(0 0 0 / 50%); --lido-color-text: #fff; + --lido-rgb-text: 255, 255, 255; --lido-color-text-secondary: rgb(255 255 255 / 80%); --lido-color-accent-text: #fff; + --lido-rgb-accent-text: 255, 255, 255; --lido-color-border: rgb(255 255 255 / 12%); --lido-color-border-active: rgb(255 255 255 / 48%); --lido-color-border-hover: rgb(255 255 255 / 24%); From a83adc75ef77ebf6c4134e197ddf19103a404229 Mon Sep 17 00:00:00 2001 From: Nikita Date: Fri, 4 Aug 2023 19:03:39 +0200 Subject: [PATCH 09/10] feat: added script comments --- scripts/verify-allowed-css-variables.mjs | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/scripts/verify-allowed-css-variables.mjs b/scripts/verify-allowed-css-variables.mjs index 5284739b..55ab68f6 100644 --- a/scripts/verify-allowed-css-variables.mjs +++ b/scripts/verify-allowed-css-variables.mjs @@ -1,3 +1,11 @@ +/* + * This script was used during migration to css variables + * to ensure all variables used in each component were declared. + * + * This is not establised part of pipeline, so use with caution and + * double-check results. + */ + const getDefinedVariables = async () => { const content = await fs.readFile('./packages/theme/theme.css', 'utf-8') const matches = content.match(/--lido-[^:]+/g) @@ -23,7 +31,7 @@ const getUsedVariables = async () => { return new Set(usedVars) } -// TODO: this can by stylelint plugin +// TODO: consider to use as stylelint plugin const main = async () => { const usedVars = await getUsedVariables() const definedVars = await getDefinedVariables() From 5eef49d7d717ba47afed2cb172df8f13d2fa0395 Mon Sep 17 00:00:00 2001 From: Nikita Date: Fri, 4 Aug 2023 19:06:38 +0200 Subject: [PATCH 10/10] chore: format fix --- scripts/verify-allowed-css-variables.mjs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/verify-allowed-css-variables.mjs b/scripts/verify-allowed-css-variables.mjs index 55ab68f6..0c6797d8 100644 --- a/scripts/verify-allowed-css-variables.mjs +++ b/scripts/verify-allowed-css-variables.mjs @@ -1,7 +1,7 @@ /* - * This script was used during migration to css variables + * This script was used during migration to css variables * to ensure all variables used in each component were declared. - * + * * This is not establised part of pipeline, so use with caution and * double-check results. */