@fruits-chain/design-tokens-bailu

Design Tokens Bailu

24jieqi 团队白露设计规范变量

使用方式

yarn add @fruits-chain/design-tokens-bailu

小暑

import React from 'react'

import DesignTokensBailu from '@fruits-chain/design-tokens-bailu'
import DesignTokensBailuVar from '@fruits-chain/design-tokens-bailu/lib/e-stylesheet.js'
import { Provider } from '@fruits-chain/react-native-xiaoshu'

import EStyleSheet from '@/lib/react-native-extended-stylesheet'

EStyleSheet.build({
  // $开头，_符号链接
  ...DesignTokensBailuVar,
  // 自定义覆盖
  $brand_6: '#f30',
})

import Routes from './routes'

const App = () => {
  return (
    <Provider theme={DesignTokensBailu}>
      <Routes />
    </Provider>
  )
}

export default App

Antd

craco.config.js

import DesignTokensBailuAntdModify from '@fruits-chain/design-tokens-bailu/lib/antd-modify.js'
import DesignTokensBailuLessGlobal from '@fruits-chain/design-tokens-bailu/lib/less-global.js'
const CracoLessPlugin = require('craco-less')

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            globalVars: {
              // -符号链接
              ...DesignTokensBailuLessGlobal,
            },
            modifyVars: {
              ...DesignTokensBailuAntdModify,
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
}

AntdMobile

import React from 'react'

// 注入基础变量
import '@fruits-chain/design-tokens-bailu/lib/index.css'

// 覆盖 mobile
import '@fruits-chain/design-tokens-bailu/lib/antd-mobile.css'

import Routes from './routes'

const App = () => {
  return <Routes />
}

export default App