Add TailwindCSS in Marigold

[sarahgm]

🗒 Open ToDo's:

• simplify design tokens for B2B
• convert emotion styles to tailwind for B2B
• add test for system/utils/get
• ignore coverage for create-preset
• deprecated Box?
• delete token package
• delete theme-old after B2B migration is done
• Documentation: Required Migration for Tailwind #3022

-> Components lists here #2961

• done

System finished

• Box (Test, Story, Component)
• useResponsivevalue (Test, Story, Function)
• useTheme (Test. Function)
• useComponentStyles (Test, Function)

✅ Done:

• Tailwind works in all components
• Tailwind Presets
  - every theme should be a preset
• finish core theme
• Handle extending theme
  - maybe solved through presets
  - create-preset package
• Tailwind on Storybook
  - works with theme switcher (Badge core + unicorn)
• Build Tailwind with tsup in theme.
  - type safty makes problems
• Build CSS in components (Layout Components) for things like spacing/alignment
  - kinda works I have to save the classNames as safelist and an ugly if else condition
• create a theme
• parts as slots
• useResponsiveValue
• how to handle css selector classes // do we need them?!
• handle stacked theme in storybook not 100% sure
• HelpText (Test): some tests didn't work - can colors or size set via theme anymore?

related Issue is: #2153

[sarahgm]

@sebald notice: data attributes must be written as data-[disabled] for example. With shortcuts like this: https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes it is not possible. So how do we handle it? Should we just keep guessing if it has an data or not. Like in Button it just work with disabled: selector 🤷‍♀️

[sarahgm]

root styles on body

[sarahgm]

�twMerge� sequence is important so first we should write the base styles within components than the classNames from the theme

[sarahgm]

some tailwind listbox issues:

• fontsize,
• background image,
  • linear gradients -> Select
    -> not working: focus-visible:bg-[linear-gradient(to_right_bottom,#3875d7 20%),#2a62bc 90%)),focus-visible:bg- [gradient-to-r:(#2a62bc 90%), focus-visible:bg-gradient-to-r:[(#3875d7 20%),(#2a62bc, 90%)],
• selected attribute
• types -> context

[sarahgm]

Use Cases

API

1. Component consists of only one element/part -> needs one className (e.g. <Button>)
2. Component consists if mulitple elements/parts -> needs mulitple className (e.g. <Table>)

a. Components may have variants and sizes
b. Components may have style props (e.g. space,padding, ...)

• All Components allow to set a className

Internal API

• styles are passed down via React context

---

Case 1a

const Component = ({ className, variant, size }) => {
  const classNames = useClassNames('Component', {
    variant,
    size,
    className,
  });

  return <div className={classNames}>...</div>;
};

Case 1b

const Component = ({ className, variant, size, space }) => {
  //
  const classNames = useClassNames('Component', {
    variant,
    size,
    className,
    space,
  });

  return <div className={classNames}>...</div>;
};

<Component className="w-[500px]" space="3" />;

Case 2a

const Component = ({ className, variant, size }) => {
  const classNames = useClassNames('Component', {
    variant,
    size,
    className,
    slots: ['container', 'button'],
  });

  return (
    <div className={classNames.container}>
      <button className={classNames.button}>Click me!</button>
    </div>
  );
};

Case 2b

const Component = ({ className, variant, size, containerColor }) => {
  // TODO: color???
  const classNames = useClassNames('Component', { variant, size, classNames });

  return (
    <div className={classNames.container}>
      <button className={classNames.button}>Click me!</button>
    </div>
  );
};

type ClassNames = string | { [slot: string]: string };

---

Style Props

• Style props = mappings between React and Tailwind classes

export const fontWeight = {
 thin: 'font-thin',
 extralight: 'font-extralight',
 light: 'font-light',
 normal: 'font-normal',
 medium: 'font-medium',
 semibold: 'font-semibold',
 bold: 'font-bold',
 extrabold: 'font-extrabold',
 black: 'font-black',
}

export type FontWeightProp = { fontWeight: keyof typeof fontWeight };

Idea 1:

import { space } from '@marigold/style-props';

const component = tv({
  base: [],
  variants: {
    variant: {},
    size: {},

    // Styles Props
    space,
  },
});

// @marigold/style-props
export const space = {
  1: 'gap-1',
  2: 'gap-2',
};

Idea 2:

// @marigold/style-props
export const space = {
  1: 'gap-1',
  2: 'gap-2',
};

// Component File
import { space, spaceProps } from '@marigold/style-props';

interface Props extends SpaceProps {}

const LayoutComponent = (props: Props) => {
  return <div className={space[props.space]}>...</div>;
};

<LayoutComponent space={1} />;

---

Using CSS Vars

// This doesn't work just a palceholder
const createVar = o =>
  Object.entries(o).map(
    ([name, val]) => ({ [`--${name}`]: val } as React.CSSProperties)
  );

const Component = ({ variant, size, labelWidth }) => {
  const classNames = useClassNames({
    variant,
    size,
    className: 'w-[var(--labelWidth)]',
  });

  return (
    <div className={classNames} style={createVar({ labelWidth })}>
      ...
    </div>
  );
};

[sarahgm]

@sebald to 'Using CSS Vars' if I add .shift() at the end it's working .. don't know if it's good enough and haven't tested with more than one variable.

[sebald]

Not sure I follow, show me tomorrow? :)