From 369914fa6be395239d06351bdf0d8457bf39d72f Mon Sep 17 00:00:00 2001 From: Renan Ferreira Date: Wed, 8 May 2024 11:13:55 -0300 Subject: [PATCH] chore(staking): symlink design tokens --- packages/staking/package.json | 3 +++ packages/staking/src/design-tokens | 1 + .../features/BrowsePools/BrowsePools.css.ts | 2 +- .../BrowsePools/BrowsePoolsHeader.css.ts | 2 +- .../BrowsePoolsPreferencesCard.css.ts | 2 +- .../features/BrowsePools/PortfolioBar.css.ts | 2 +- .../PoolMetric/PoolMetric.css.ts | 2 +- .../StakePoolCardProgressBar.css.ts | 2 +- .../StakePoolCard/StakePoolCard.css.ts | 2 +- .../StakePoolsGrid/StakePoolsGrid.css.ts | 2 +- .../StakePoolsList/StakePoolListCell.css.ts | 2 +- .../StakePoolsList/StakePoolsList.css.ts | 2 +- .../StakePoolSkeletonCellRenderer.css.ts | 2 +- .../StakePoolsListRowSkeleton.css.ts | 2 +- .../BrowsePools/StakePoolsSearchEmpty.css.ts | 2 +- .../DelegationCard/DelegationTooltip.css.ts | 2 +- .../DelegationRatioSlider.css.ts | 2 +- .../Drawer/preferences/NoPoolsSelected.css.ts | 2 +- .../PoolDetailsCard/PoolDetailsCard.css.ts | 2 +- .../PoolDetailsCardData.css.ts | 2 +- .../PoolDetailsCard/RatioInput.css.ts | 2 +- .../preferences/StepPreferencesContent.css.ts | 2 +- .../activity/NoStakingActivity.css.ts | 2 +- .../features/overview/GetStartedSteps.css.ts | 2 +- .../staking/src/features/theme/theme.css.ts | 11 ++++++++- yarn.lock | 23 +++---------------- 26 files changed, 39 insertions(+), 43 deletions(-) create mode 120000 packages/staking/src/design-tokens diff --git a/packages/staking/package.json b/packages/staking/package.json index aea7c6b19..bcf4319e1 100644 --- a/packages/staking/package.json +++ b/packages/staking/package.json @@ -92,8 +92,11 @@ "@svgr/plugin-jsx": "^8.0.1", "@testing-library/react-hooks": "^8.0.1", "@tsconfig/create-react-app": "^1.0.3", + "@vanilla-extract/css": "^1.10.0", + "@vanilla-extract/css-utils": "^0.1.3", "@vanilla-extract/esbuild-plugin": "^2.2.2", "@vanilla-extract/recipes": "^0.5.1", + "@vanilla-extract/sprinkles": "^1.5.1", "@vanilla-extract/vite-plugin": "^3.9.3", "@vitest/coverage-c8": "^0.31.0", "antd": "^4.24.10", diff --git a/packages/staking/src/design-tokens b/packages/staking/src/design-tokens new file mode 120000 index 000000000..239c51b19 --- /dev/null +++ b/packages/staking/src/design-tokens @@ -0,0 +1 @@ +../../ui/src/design-tokens \ No newline at end of file diff --git a/packages/staking/src/features/BrowsePools/BrowsePools.css.ts b/packages/staking/src/features/BrowsePools/BrowsePools.css.ts index d415d77f1..0339e6a43 100644 --- a/packages/staking/src/features/BrowsePools/BrowsePools.css.ts +++ b/packages/staking/src/features/BrowsePools/BrowsePools.css.ts @@ -1,4 +1,4 @@ -import { sx } from '@lace/ui'; +import { sx } from '../../design-tokens'; export const browsePools = sx({ alignItems: 'stretch', diff --git a/packages/staking/src/features/BrowsePools/BrowsePoolsHeader.css.ts b/packages/staking/src/features/BrowsePools/BrowsePoolsHeader.css.ts index 32cea475f..1c200603e 100644 --- a/packages/staking/src/features/BrowsePools/BrowsePoolsHeader.css.ts +++ b/packages/staking/src/features/BrowsePools/BrowsePoolsHeader.css.ts @@ -1,5 +1,5 @@ -import { style } from '@lace/ui'; import { theme } from 'features/theme'; +import { style } from '../../design-tokens'; export const title = style({ color: theme.colors.$titleColor, diff --git a/packages/staking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.css.ts b/packages/staking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.css.ts index 5fe02481d..b79d97b5d 100644 --- a/packages/staking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.css.ts +++ b/packages/staking/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.css.ts @@ -1,5 +1,5 @@ -import { style, sx } from '@lace/ui'; import { theme } from 'features/theme'; +import { style, sx } from '../../../design-tokens'; export const textBoxLeft = style({ borderBottomRightRadius: 0, diff --git a/packages/staking/src/features/BrowsePools/PortfolioBar.css.ts b/packages/staking/src/features/BrowsePools/PortfolioBar.css.ts index 598535554..e2148c458 100644 --- a/packages/staking/src/features/BrowsePools/PortfolioBar.css.ts +++ b/packages/staking/src/features/BrowsePools/PortfolioBar.css.ts @@ -1,4 +1,4 @@ -import { style, sx } from '@lace/ui'; +import { style, sx } from '../../design-tokens'; import { theme } from '../theme'; const minimumScreenSize = '668px'; diff --git a/packages/staking/src/features/BrowsePools/StakePoolCard/PoolMetric/PoolMetric.css.ts b/packages/staking/src/features/BrowsePools/StakePoolCard/PoolMetric/PoolMetric.css.ts index f37884e33..802ed5d13 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolCard/PoolMetric/PoolMetric.css.ts +++ b/packages/staking/src/features/BrowsePools/StakePoolCard/PoolMetric/PoolMetric.css.ts @@ -1,4 +1,4 @@ -import { style, sx } from '@lace/ui'; +import { style, sx } from '../../../../design-tokens'; import { theme } from '../../../theme'; export const metric = style({ diff --git a/packages/staking/src/features/BrowsePools/StakePoolCard/SkatePoolCardProgressBar/StakePoolCardProgressBar.css.ts b/packages/staking/src/features/BrowsePools/StakePoolCard/SkatePoolCardProgressBar/StakePoolCardProgressBar.css.ts index 28a4adb81..b2d16a423 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolCard/SkatePoolCardProgressBar/StakePoolCardProgressBar.css.ts +++ b/packages/staking/src/features/BrowsePools/StakePoolCard/SkatePoolCardProgressBar/StakePoolCardProgressBar.css.ts @@ -1,5 +1,5 @@ -import { style, sx } from '@lace/ui'; import { recipe } from '@vanilla-extract/recipes'; +import { style, sx } from '../../../../design-tokens'; import { theme } from '../../../theme'; export const wrapper = sx({ diff --git a/packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCard.css.ts b/packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCard.css.ts index e11621839..44917c5fd 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCard.css.ts +++ b/packages/staking/src/features/BrowsePools/StakePoolCard/StakePoolCard.css.ts @@ -1,6 +1,6 @@ -import { style, sx } from '@lace/ui'; import { recipe } from '@vanilla-extract/recipes'; import type { RecipeVariants } from '@vanilla-extract/recipes'; +import { style, sx } from '../../../design-tokens'; import { theme } from '../../theme'; import { STAKE_POOL_CARD_HEIGHT } from './constants'; diff --git a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.css.ts b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.css.ts index 0bb08e818..f6d2becaf 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.css.ts +++ b/packages/staking/src/features/BrowsePools/StakePoolsGrid/StakePoolsGrid.css.ts @@ -1,5 +1,5 @@ -import { style, sx } from '@lace/ui'; import { theme } from 'features/theme'; +import { style, sx } from '../../../design-tokens'; // TODO use new @lace/ui Grid when available: https://input-output.atlassian.net/browse/LW-9791 export const grid = style([ diff --git a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolListCell.css.ts b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolListCell.css.ts index 1799021d7..bb6bc3db8 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolListCell.css.ts +++ b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolListCell.css.ts @@ -1,6 +1,6 @@ -import { sx } from '@lace/ui'; import { recipe } from '@vanilla-extract/recipes'; import { theme } from 'features/theme'; +import { sx } from '../../../design-tokens'; export const dot = recipe({ base: [ diff --git a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.css.ts b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.css.ts index e8dd40f09..9ceeaf1dd 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.css.ts +++ b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsList.css.ts @@ -1,5 +1,5 @@ -import { style } from '@lace/ui'; import { theme } from 'features/theme'; +import { style } from '../../../design-tokens'; export const selectedTitle = style({ color: theme.colors.$titleColor, diff --git a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolSkeletonCellRenderer.css.ts b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolSkeletonCellRenderer.css.ts index 4e24d1186..cd1a5e018 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolSkeletonCellRenderer.css.ts +++ b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolSkeletonCellRenderer.css.ts @@ -1,7 +1,7 @@ -import { style, sx } from '@lace/ui'; import { recipe } from '@vanilla-extract/recipes'; import { theme } from 'features/theme'; import type { RecipeVariants } from '@vanilla-extract/recipes'; +import { style, sx } from '../../../../design-tokens'; export const cellPlaceholder = recipe({ base: [ diff --git a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolsListRowSkeleton.css.ts b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolsListRowSkeleton.css.ts index 965d225a6..d64c588bc 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolsListRowSkeleton.css.ts +++ b/packages/staking/src/features/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolsListRowSkeleton.css.ts @@ -1,4 +1,4 @@ -import { style, sx, vars } from '@lace/ui'; +import { style, sx, vars } from '../../../../design-tokens'; export const row = style([ { diff --git a/packages/staking/src/features/BrowsePools/StakePoolsSearchEmpty.css.ts b/packages/staking/src/features/BrowsePools/StakePoolsSearchEmpty.css.ts index ba2660908..b053d763d 100644 --- a/packages/staking/src/features/BrowsePools/StakePoolsSearchEmpty.css.ts +++ b/packages/staking/src/features/BrowsePools/StakePoolsSearchEmpty.css.ts @@ -1,4 +1,4 @@ -import { style, sx, vars } from '@lace/ui'; +import { style, sx, vars } from '../../design-tokens'; export const icon = style([ { diff --git a/packages/staking/src/features/DelegationCard/DelegationTooltip.css.ts b/packages/staking/src/features/DelegationCard/DelegationTooltip.css.ts index 9a37418d1..bddad7e8e 100644 --- a/packages/staking/src/features/DelegationCard/DelegationTooltip.css.ts +++ b/packages/staking/src/features/DelegationCard/DelegationTooltip.css.ts @@ -1,4 +1,4 @@ -import { style, sx } from '@lace/ui'; +import { style, sx } from '../../design-tokens'; import { theme } from '../theme'; export const tooltip = style([ diff --git a/packages/staking/src/features/Drawer/preferences/DelegationRatioSlider/DelegationRatioSlider.css.ts b/packages/staking/src/features/Drawer/preferences/DelegationRatioSlider/DelegationRatioSlider.css.ts index bec926bf2..3eaad7026 100644 --- a/packages/staking/src/features/Drawer/preferences/DelegationRatioSlider/DelegationRatioSlider.css.ts +++ b/packages/staking/src/features/Drawer/preferences/DelegationRatioSlider/DelegationRatioSlider.css.ts @@ -1,4 +1,4 @@ -import { style, sx } from '@lace/ui'; +import { style, sx } from '../../../../design-tokens'; import { theme } from '../../../theme'; export const SliderContainer = style([ diff --git a/packages/staking/src/features/Drawer/preferences/NoPoolsSelected.css.ts b/packages/staking/src/features/Drawer/preferences/NoPoolsSelected.css.ts index 60fa0fb1e..7c86f1471 100644 --- a/packages/staking/src/features/Drawer/preferences/NoPoolsSelected.css.ts +++ b/packages/staking/src/features/Drawer/preferences/NoPoolsSelected.css.ts @@ -1,4 +1,4 @@ -import { style } from '@lace/ui'; +import { style } from '../../../design-tokens'; import { theme } from '../../theme'; export const container = style({ diff --git a/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/PoolDetailsCard.css.ts b/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/PoolDetailsCard.css.ts index 5f62ae603..996d0d579 100644 --- a/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/PoolDetailsCard.css.ts +++ b/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/PoolDetailsCard.css.ts @@ -1,4 +1,4 @@ -import { style, sx } from '@lace/ui'; +import { style, sx } from '../../../../design-tokens'; import { theme } from '../../../theme'; export const root = style({ diff --git a/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/PoolDetailsCardData.css.ts b/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/PoolDetailsCardData.css.ts index 041252efe..aef84469c 100644 --- a/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/PoolDetailsCardData.css.ts +++ b/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/PoolDetailsCardData.css.ts @@ -1,4 +1,4 @@ -import { style } from '@lace/ui'; +import { style } from '../../../../design-tokens'; import { theme } from '../../../theme'; export const root = style({ diff --git a/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/RatioInput.css.ts b/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/RatioInput.css.ts index 8c80dc1c4..5fc2ac1d5 100644 --- a/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/RatioInput.css.ts +++ b/packages/staking/src/features/Drawer/preferences/PoolDetailsCard/RatioInput.css.ts @@ -1,4 +1,4 @@ -import { style } from '@lace/ui'; +import { style } from '../../../../design-tokens'; import { theme } from '../../../theme'; export const inputContainer = style({ diff --git a/packages/staking/src/features/Drawer/preferences/StepPreferencesContent.css.ts b/packages/staking/src/features/Drawer/preferences/StepPreferencesContent.css.ts index 08b390fce..b4a76affc 100644 --- a/packages/staking/src/features/Drawer/preferences/StepPreferencesContent.css.ts +++ b/packages/staking/src/features/Drawer/preferences/StepPreferencesContent.css.ts @@ -1,4 +1,4 @@ -import { style } from '@lace/ui'; +import { style } from '../../../design-tokens'; import { theme } from '../../theme'; export const delegationCardWrapper = style({ diff --git a/packages/staking/src/features/activity/NoStakingActivity.css.ts b/packages/staking/src/features/activity/NoStakingActivity.css.ts index ebbfc6e56..e429b4d5a 100644 --- a/packages/staking/src/features/activity/NoStakingActivity.css.ts +++ b/packages/staking/src/features/activity/NoStakingActivity.css.ts @@ -1,5 +1,5 @@ -import { style } from '@lace/ui'; import { theme } from 'features/theme'; +import { style } from '../../design-tokens'; export const sadFaceIcon = style({ height: theme.spacing.$112, diff --git a/packages/staking/src/features/overview/GetStartedSteps.css.ts b/packages/staking/src/features/overview/GetStartedSteps.css.ts index 77443fff3..d66267462 100644 --- a/packages/staking/src/features/overview/GetStartedSteps.css.ts +++ b/packages/staking/src/features/overview/GetStartedSteps.css.ts @@ -1,5 +1,5 @@ -import { vars } from '@lace/ui'; import { style } from '@vanilla-extract/css'; +import { vars } from '../../design-tokens'; import { theme } from '../theme'; export const stepCircle = style({ diff --git a/packages/staking/src/features/theme/theme.css.ts b/packages/staking/src/features/theme/theme.css.ts index 1fc244d6b..5c81bb496 100644 --- a/packages/staking/src/features/theme/theme.css.ts +++ b/packages/staking/src/features/theme/theme.css.ts @@ -1,5 +1,14 @@ -import { elevation, fontFamily, fontSizes, fontWeights, lineHeights, opacities, radius, spacing } from '@lace/ui'; import { createGlobalTheme, createThemeContract } from '@vanilla-extract/css'; +import { + elevation, + fontFamily, + fontSizes, + fontWeights, + lineHeights, + opacities, + radius, + spacing, +} from '../../design-tokens'; import { colorsContract, darkThemeColors, lightThemeColors } from './colors'; const themeCommon = { diff --git a/yarn.lock b/yarn.lock index cd352db2b..7fc95bc1e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10851,9 +10851,11 @@ __metadata: "@svgr/plugin-jsx": ^8.0.1 "@testing-library/react-hooks": ^8.0.1 "@tsconfig/create-react-app": ^1.0.3 - "@vanilla-extract/css": ^1.11.1 + "@vanilla-extract/css": ^1.10.0 + "@vanilla-extract/css-utils": ^0.1.3 "@vanilla-extract/esbuild-plugin": ^2.2.2 "@vanilla-extract/recipes": ^0.5.1 + "@vanilla-extract/sprinkles": ^1.5.1 "@vanilla-extract/vite-plugin": ^3.9.3 "@vitest/coverage-c8": ^0.31.0 antd: ^4.24.10 @@ -20909,25 +20911,6 @@ __metadata: languageName: node linkType: hard -"@vanilla-extract/css@npm:^1.11.1": - version: 1.11.1 - resolution: "@vanilla-extract/css@npm:1.11.1" - dependencies: - "@emotion/hash": ^0.9.0 - "@vanilla-extract/private": ^1.0.3 - ahocorasick: 1.0.2 - chalk: ^4.1.1 - css-what: ^6.1.0 - cssesc: ^3.0.0 - csstype: ^3.0.7 - deep-object-diff: ^1.1.9 - deepmerge: ^4.2.2 - media-query-parser: ^2.0.2 - outdent: ^0.8.0 - checksum: 1498ced4ba1fd78f3e42567a49daac9eea15e0fa1418d39e4ba5a3e84ded66a5567733f5fa364eaf5fe9c0354124bd62a32ffd603427b76e36004ed49b55c7d2 - languageName: node - linkType: hard - "@vanilla-extract/css@npm:^1.14.0": version: 1.14.0 resolution: "@vanilla-extract/css@npm:1.14.0"