v1.0.32

gluestack · Jan 10, 2024 · 89fbf78 · 89fbf78
1 parent 5febbdf
commit 89fbf78
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 3 deletions.
diff --git a/packages/styled/react/CHANGELOG.md b/packages/styled/react/CHANGELOG.md
@@ -1,5 +1,65 @@
 # @gluestack-style/react
 
+## 1.0.32
+
+### Features
+
+- Tokens are now injected as CSS variables on web.
+- Multiple Theme support.
+
+```jsx
+import { styled, StyledProvider } from '@gluestack-style/react';
+
+const config = {
+  aliases: {},
+  tokens: {
+    colors: {
+      primary: 'green',
+    },
+  },
+  themes: {
+    dark: {
+      colors: {
+        primary: 'black',
+      },
+    },
+    modern: {
+      colors: {
+        primary: 'red',
+      },
+    },
+  },
+};
+
+const App = () => {
+  const Box = styled(View, {
+    bg: '$primary',
+    p: '$10',
+  });
+
+  return (
+    <StyledProvider config={config}>
+      <Theme name="dark">
+        <Theme name="modern">
+          <Box />
+        </Theme>
+      </Theme>
+    </StyledProvider>
+  );
+};
+```
+
+- We have removed the default colorMode from the `StyledProvider`, you can now use the Theme component to change the theme. or you can pass `colorMode` prop inside `StyledProvider` for `colorMode`.
+- Added utility prop support for themes, you can prefix theme name with `$t_${{theme_name}}-${{style_property}}` to define style for theme.
+
+```jsx
+<Box $t_dark-bg="$primary" />
+```
+
+- `useToken` hook now supports theme tokens, it will return the current theme token value if there exist any.
+- Typescript improvements for `useToken` hook
+- Babel plugin support for the themes
+
 ## 1.0.31
 
 ### Patch Changes

diff --git a/packages/styled/react/package.json b/packages/styled/react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@gluestack-style/react",
   "description": "A universal & performant styling library for React Native, Next.js & React",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "keywords": [
     "React Native",
     "Next.js",

diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @gluestack-ui/themed
 
+## 1.0.35
+
+### Patch Changes
+
+- Fix
+- Updated dependencies
+  - @gluestack-style/react@1.0.32
+
 ## 1.0.34
 
 ### Patch Changes

diff --git a/packages/themed/package.json b/packages/themed/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gluestack-ui/themed",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "main": "build/index.js",
   "types": "build/index.d.ts",
   "module": "build/index",
@@ -69,7 +69,7 @@
     "@babel/preset-env": "^7.22.9",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@gluestack-style/react": "^1.0.22",
+    "@gluestack-style/react": "^1.0.32",
     "@types/react-native": "^0.72.3",
     "file-loader": "^6.2.0",
     "react": "^18.2.0",