#What is the right pattern for setting up a base styles, fonts, etc from design system to apps?

5 messages · Page 1 of 1 (latest)

ionic tapir
#

If I have multiple apps that use the same base fonts, colors, etc, how do I create a theme and wrap my app in that theme?

weak wolf
#

Style libs are the ones that usually define patterns for this.

For instance, if all your apps use css-in-js, you might export a package for your theme object separately and import it into each app.

ionic tapir
#

I think that's what I'm doing but it's not really working

#

I'm attempting to make a theme object in my design-system story book "BaseTheme".

import React, { ReactNode } from 'react'
import { ThemeProvider } from 'styled-components'
import BaseStyles from './base-theme.module.scss'

export interface BaseThemeProps extends React.HTMLAttributes<HTMLDivElement> {
  // theme?: any
  children?: ReactNode
}

export function BaseTheme({ children }: BaseThemeProps) {
  // TODO: implement theme https://storybook.js.org/blog/how-to-build-connected-components-in-storybook/
  // const storyTheme = theme === 'dark' ? darkTheme : lightTheme
  return <ThemeProvider theme={BaseStyles}>{children}</ThemeProvider>
}


@tailwind base;
@tailwind components;
@tailwind utilities;

I wrap my preview.js with this so I can test what it would behave like in the actual app:

import { BaseTheme } from '../src/themes/base-theme/BaseTheme'

const withTheme = (Story, context) => {
  // Get the active theme value from the story parameter
  // const { theme } = context.parameters
  // const storyTheme = theme === 'dark' ? darkTheme : lightTheme
  return (
    <BaseTheme>
      <Story />
    </BaseTheme>
  )
}

export const decorators = [withTheme]

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  theme: 'base',
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}

This seems to apply the tailwind base styles but does not pick up on the classes (e.g., className={"fixed right-0"}). Here is my tailwind config and main.js

const webpack = require('webpack')

module.exports = {
  features: {
    buildStoriesJson: true,
  },
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    // '@storybook/preset-create-react-app',
    // '@storybook/preset-scss',
    // '@storybook/preset-typescript',
  ],
  framework: '@storybook/react',
  core: {
    builder: '@storybook/builder-webpack5',
  },
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Make whatever fine-grained changes you need
    config.module.rules.push({
      test: /\.scss$/,
      sideEffects: true, //scss is considered a side effect of sass
      use: ['style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
      // include: path.resolve(__dirname, '../src'), // I didn't need this path set
    })

    config.plugins.push(
      new webpack.ProvidePlugin({
        Buffer: ['buffer', 'Buffer'],
      })
    )

    // Return the altered config
    return config
  },
}


/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,jsx,tsx,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
weak wolf
#

Thanks for the context! Will leave this question for someone who uses Tailwind 😅