Version Packages (#278)

Author: seek-oss-ci

.changeset/clever-vans-prove.md

@@ -7,6 +7,6 @@
   "private": true,
   "dependencies": {
     "@vanilla-extract/css": "1.2.2",
-    "@vanilla-extract/dynamic": "1.0.0"
+    "@vanilla-extract/dynamic": "2.0.0"
   }
 }

fixtures/themed/package.json

@@ -1,12 +1,137 @@
 # @vanilla-extract/dynamic
 
-## 1.0.0
+## 2.0.0
+
 ### Major Changes
 
+- [#276](https://github.com/seek-oss/vanilla-extract/pull/276) [`4bcbd6f`](https://github.com/seek-oss/vanilla-extract/commit/4bcbd6f4ac0170a09553ce8d44ca84361782cce5) Thanks [@markdalgleish](https://github.com/markdalgleish)! - Add `assignInlineVars` and `setElementVars` functions
 
+  **assignInlineVars**
 
-- [#171](https://github.com/seek-oss/vanilla-extract/pull/171) [`84a8611`](https://github.com/seek-oss/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1
+  Assigns CSS Variables as inline styles.
+
+  ```tsx
+  // app.tsx
+
+  import { assignInlineVars } from '@vanilla-extract/dynamic';
+  import { vars } from './vars.css.ts';
+
+  const MyComponent = () => (
+    <section
+      style={assignInlineVars({
+        [vars.colors.brand]: 'pink',
+        [vars.colors.accent]: 'green',
+      })}
+    >
+      ...
+    </section>
+  );
+  ```
+
+  You can also assign collections of variables by passing a theme contract as the first argument. All variables must be assigned or it’s a type error.
+
+  ```tsx
+  // app.tsx
+
+  import { assignInlineVars } from '@vanilla-extract/dynamic';
+  import { vars } from './vars.css.ts';
+
+  const MyComponent = () => (
+    <section
+      style={assignInlineVars(vars.colors, {
+        brand: 'pink',
+        accent: 'green',
+      })}
+    >
+      ...
+    </section>
+  );
+  ```
+
+  Even though this function returns an object of inline styles, its `toString` method returns a valid `style` attribute value so that it can be used in string templates.
+
+  ```tsx
+  // app.ts
+
+  import { assignInlineVars } from '@vanilla-extract/dynamic';
+  import { vars } from './vars.css.ts';
+
+  document.write(`
+    <section style="${assignInlineVars({
+      [vars.colors.brand]: 'pink',
+      [vars.colors.accent]: 'green',
+    })}">
+      ...
+    </section>
+  `);
+  ```
+
+  **setElementVars**
+
+  Sets CSS Variables on a DOM element.
+
+  ```tsx
+  // app.ts
+
+  import { setElementVars } from '@vanilla-extract/dynamic';
+  import { vars } from './styles.css.ts';
+
+  const el = document.getElementById('myElement');
 
+  setElementVars(el, {
+    [vars.colors.brand]: 'pink',
+    [vars.colors.accent]: 'green',
+  });
+  ```
+
+  You can also set collections of variables by passing a theme contract as the second argument. All variables must be set or it’s a type error.
+
+  ```tsx
+  // app.ts
+
+  import { setElementVars } from '@vanilla-extract/dynamic';
+  import { vars } from './styles.css.ts';
+
+  const el = document.getElementById('myElement');
+
+  setElementVars(el, vars.colors, {
+    brand: 'pink',
+    accent: 'green',
+  });
+  ```
+
+  **BREAKING CHANGE**
+
+  These functions replace `createInlineTheme`, `setElementTheme` and `setElementVar`.
+
+  `assignInlineVars` works as a drop-in replacement for `createInlineTheme`.
+
+  ```diff
+  -createInlineTheme(vars, { brandColor: 'red' });
+  +assignInlineVars(vars, { brandColor: 'red' });
+  ```
+
+  `setElementVars` works as a drop-in replacement for `setElementTheme`.
+
+  ```diff
+  -setElementTheme(el, vars, { brandColor: 'red' });
+  +setElementVars(el, vars, { brandColor: 'red' });
+  ```
+
+  You can replicate the functionality of `setElementVar` by passing an object with dynamic keys to `setElementVars`. This now makes it easy to support setting multiple vars at once.
+
+  ```diff
+  -setElementVar(el, vars.brandColor, 'red');
+  +setElementVars(el, {
+  +  [vars.brandColor]: 'red'
+  +});
+  ```
+
+## 1.0.0
+
+### Major Changes
+
+- [#171](https://github.com/seek-oss/vanilla-extract/pull/171) [`84a8611`](https://github.com/seek-oss/vanilla-extract/commit/84a8611972f32a00a6cbd85267a01dd2d31be869) Thanks [@mattcompiles](https://github.com/mattcompiles)! - Release v1
 
 ### Patch Changes
 

packages/dynamic/CHANGELOG.md

@@ -1,6 +1,6 @@
 {
   "name": "@vanilla-extract/dynamic",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Zero-runtime Stylesheets-in-TypeScript",
   "sideEffects": false,
   "main": "dist/vanilla-extract-dynamic.cjs.js",

packages/dynamic/package.json

@@ -1773,7 +1773,7 @@ __metadata:
   resolution: "@fixtures/themed@workspace:fixtures/themed"
   dependencies:
     "@vanilla-extract/css": 1.2.2
-    "@vanilla-extract/dynamic": 1.0.0
+    "@vanilla-extract/dynamic": 2.0.0
   languageName: unknown
   linkType: soft
 
@@ -3199,7 +3199,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@vanilla-extract/dynamic@1.0.0, @vanilla-extract/dynamic@workspace:packages/dynamic":
+"@vanilla-extract/dynamic@2.0.0, @vanilla-extract/dynamic@workspace:packages/dynamic":
   version: 0.0.0-use.local
   resolution: "@vanilla-extract/dynamic@workspace:packages/dynamic"
   dependencies: