@vanilla-extract/[email protected]

Patch Changes

• Updated dependencies []:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Patch Changes

• Updated dependencies []:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Patch Changes

• Updated dependencies []:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Patch Changes

• Updated dependencies []:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Patch Changes

• Updated dependencies []:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Patch Changes

• Updated dependencies []:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Patch Changes

• Updated dependencies [fd673f6, fd673f6, 4abfc0b, fd673f6]:
  • @vanilla-extract/[email protected]
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Patch Changes

• Updated dependencies []:
  • @vanilla-extract/[email protected]

@vanilla-extract/[email protected]

Minor Changes

• #1092 fd673f6 Thanks @z4o4z! - keyframes: Add support for a vars property to steps within keyframes declarations

  Example usage:

  import {
    createVar,
    keyframes
  } from '@vanilla-extract/css';
  
  const angle = createVar({
    syntax: '<angle>',
    inherits: false,
    initialValue: '0deg'
  });
  
  export const angleKeyframes = keyframes({
    '0%': {
      vars: {
        [angle]: '0deg'
      }
    },
    '100%': {
      vars: {
        [angle]: '360deg'
      }
    }
  });

• #1512 4abfc0b Thanks @askoufis! - createTheme, createGlobalTheme: Add support for assigning themes to a layer

  Themes can now be assigned to a layer by name using the @layer key at the top-level of the theme definition.

  EXAMPLE USAGE:

  // themes.css.ts
  import {
    createTheme,
    createGlobalTheme,
    layer
  } from '@vanilla-extract/css';
  
  export const themeLayer = layer();
  
  export const [themeA, vars] = createTheme({
    '@layer': themeLayer,
    color: {
      brand: 'blue'
    },
    font: {
      body: 'arial'
    }
  });
  
  export const vars2 = createGlobalTheme(':root', {
    '@layer': themeLayer,
    space: {
      small: '10px',
      large: '20px'
    }
  });

  This will generate the following CSS:

  @layer themes_themeLayer__1k6oxph0;
  @layer themes_themeLayer__1k6oxph0 {
    .themes_themeA__1k6oxph1 {
      --color-brand__1k6oxph2: blue;
      --font-body__1k6oxph3: arial;
    }
  
    :root {
      --space-small__z05zdf1: 10px;
      --space-large__z05zdf2: 20px;
    }
  }

• #1092 fd673f6 Thanks @z4o4z! - createVar: Add support for defining @property rules

  Example usage:

  import { createVar } from '@vanilla-extract/css';
  
  export const myVar = createVar({
    syntax: '<number>',
    inherits: false,
    initialValue: '0.5'
  });

  This will generate the following CSS:

  @property --myVar__jteyb14 {
    syntax: '<number>';
    inherits: false;
    initial-value: 0.5;
  }

@vanilla-extract/[email protected]

Minor Changes

• #1092 fd673f6 Thanks @z4o4z! - Add support for createVar calls that declare @property rules