chore(deps): update dependency @vanilla-extract/css to v1.17.0

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
@vanilla-extract/css (source)	1.16.1 -> 1.17.0
@vanilla-extract/css (source)	^1.16.1 -> ^1.17.0

---

Release Notes

vanilla-extract-css/vanilla-extract (@​vanilla-extract/css)

v1.17.0

Compare Source

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][@​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;
  }

---

Configuration

📅 Schedule: Branch creation - "* 0-3 * * 1" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.

---

• If you want to rebase/retry this PR, check this box

---

This PR was generated by Mend Renovate. View the repository job log.