Styles

Color Styles

In Figma

Default colors naming

• Default/white
• Default/black
• Default/primary/100~900
• Default/gray/100~900
• Default/red/100~900
• Default/yellow/100~900
• Default/green/100~900
• Default/blue/100~900
• Default/indigo/100~900
• Default/purple/100~900
• Default/pink/100~900
• Default/orange/100~900
• Default/teal/100~900

Service colors naming

• [ServiceName]/primary/100~900

In Tailwind

packages/tailwindconfig/baseStyle.js

• 'primary-100~900': 'var(--primary-100~900)'
• 'gray-100~900': 'values-from-figma'
• 'red-100~900': 'values-from-figma'
• 'yellow-100~900': 'values-from-figma'
• 'green-100~900': 'values-from-figma'
• 'blue-100~900': 'values-from-figma'
• 'indigo-100~900': 'values-from-figma'
• 'purple-100~900': 'values-from-figma'
• 'pink-100~900': 'values-from-figma'
• 'orange-100~900': 'values-from-figma'
• 'teal-100~900': 'values-from-figma'

packages/bds/tailwind-input.css

• Define CSS Variables for each service in this CSS file (via @layer base).

Text Styles

1. Use combinations of tailwind classNames. e.g) text-base/font-medium (in Figma) is converted to className="bk-text-base bk-font-medium"

2. If there are combinations used oftenly, make it as utilites in the tailwind config (packages/tailwindconfig/baseStyle.js). e.g) leading-none/text-sm/font-medium (in Figma) is converted to

   '.textButton': {
        fontSize: theme('fontSize.sm'),
        fontWeight: theme('fontWeight.medium'),
        color: theme('colors.primary-700'),
        lineHeight: theme('lineHeight.none')
    }

   * need to restart dev server if new utilite is added.