Layers

All tokens and styles in Winnie CSS make use of a concept in CSS called Layers which allow Winnie CSS to define styles in a specific order of precedence.

Winnie CSS defines tokens an styles in the following order from least to most precedence:

@layer reset, base, component;

Any styles defined outside of the layer will take precedence. This means that in your apps, if there are styles that you don’t quite like, you can easily override them with no additional specificity.

Reset

The reset layer is used to remove any default browser styles that get in the way. This means, elements like buttons and inputs will not have any styles by default. This is similar to how tailwind preflight styles are configured.

Default margins are removed

The reset layer removes margins from all of the heading and paragraph elements. Often times these user-agent margins conflict with the spacing scale provided by Winnie. So we remove these margins to make styling these elements more predictable.

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

Box Sizing

All elements and pseudo elements are reset to border-box. This allows padding and margin to be applied to elements without changing the overall dimensions of the elements. For example, an element that has a height of 100px and a width of 100px will maintain those dimensions regardless of the amount of padding or width of the border applied to it.

*,
*::after,
*::before {
  box-sizing: border-box;
}

Base

The base layer is where most of the tokens and base styles are applied. This includes common tokens like animation, borders, colors, spacing, scaling, shadows and typography. These are the styles that you will spend most of your time using while building your components and apps. All styles defined on the base layer are css variables.

@layer base {
  :root {
    --wui-font-weight-normal: 400;
    --wui-font-weight-medium: 500;
    --wui-font-weight-bold: 700;
    --wui-font-weight-extra-bold: 800;

    --wui-letter-spacing-1: 0.0025em;
    --wui-letter-spacing-2: 0em;
    --wui-letter-spacing-3: -0.0025em;
    --wui-letter-spacing-4: -0.005em;
    --wui-letter-spacing-5: -0.00625em;
    --wui-letter-spacing-6: -0.0075em;
    --wui-letter-spacing-7: -0.01em;
    --wui-letter-spacing-8: -0.025em;
  }
}

Component

The component layer is reserved for styles that pertain to design system components like buttons, selects and inputs.

@layer component {
  .[data-component="button"] {
    background: var(--wui-color-purple-9);
    color: var(--wui-color-purple-contrast);
  }
}