chore(staking): symlink design tokens

input-output-hk · May 8, 2024 · 369914f · 369914f
1 parent 60a93c1
commit 369914f
Show file tree

Hide file tree

Showing 26 changed files with 39 additions and 43 deletions.
diff --git 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
@@ -0,0 +1 @@
+../../ui/src/design-tokens
diff --git 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
@@ -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/...ing/src/features/BrowsePools/BrowsePoolsPreferencesCard/BrowsePoolsPreferencesCard.css.ts b/...ing/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
@@ -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
@@ -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/...atures/BrowsePools/StakePoolCard/SkatePoolCardProgressBar/StakePoolCardProgressBar.css.ts b/...atures/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
@@ -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
@@ -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
@@ -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
@@ -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/...BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolSkeletonCellRenderer.css.ts b/...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/...res/BrowsePools/StakePoolsList/StakePoolsListRowSkeleton/StakePoolsListRowSkeleton.css.ts b/...res/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
@@ -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
@@ -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/...taking/src/features/Drawer/preferences/DelegationRatioSlider/DelegationRatioSlider.css.ts b/...taking/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"