Theme

@happeouikit/theme

yarn add @happeouikit/theme

Colors

Border radius (rounded rectangles)

Lines

Each line has its own component <Line300 />, <Line400 />, <Line600 />.

Line300

Line400

Line600

Shadows

Animations

Animations have three parameters: easing, duration, and keyframes.

Easing is linear by default (if unspecified), but usually we want it to be smoother and nicer, so we use e.g. --animatino-easing-ease-out. Duration is usually less than one second - you can use e.g. --animation-duration-fast-lg. Keyframes really depend on your animation goal, but we have several reusable ones, e.g. animationKeyframes.dropFade. Note that the keyframes can't be used as CSS variables, you'll need to import them.

Example:

export const ElementDropFade = styled.div`
  margin: var(--space-md);
  width: var(--space-xxl);
  height: var(--space-xxl);
  border-radius: var(--radius-md);
  background-color: green;
  animation: ${animationKeyframes.dropFade} var(--animation-duration-fast-lg) var(--animation-easing-ease-out) infinite;
`;

Examples of all animation constants: