fix(Chip): dark mode colors

sikka-software · May 17, 2024 · 36ae3f9 · 36ae3f9
1 parent 761a32d
commit 36ae3f9
Show file tree

Hide file tree

Showing 9 changed files with 628 additions and 780 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.63
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.34.1
+
 ## 0.0.62
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.4.0",
     "@radix-ui/react-accessible-icon": "^1.0.3",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
@@ -55,8 +55,8 @@
     "cmdk": "^1.0.0",
     "contentlayer": "0.3.4",
     "date-fns": "^3.6.0",
-    "embla-carousel-autoplay": "8.0.4",
-    "embla-carousel-react": "8.0.4",
+    "embla-carousel-autoplay": "8.1.0",
+    "embla-carousel-react": "8.1.0",
     "geist": "^1.3.0",
     "jotai": "^2.8.0",
     "lodash.template": "^4.5.0",
@@ -73,7 +73,7 @@
     "react-resizable-panels": "^2.0.19",
     "react-wrap-balancer": "^1.1.0",
     "recharts": "^2.12.7",
-    "sharp": "^0.33.3",
+    "sharp": "^0.33.4",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "vaul": "^0.9.1",
@@ -85,7 +85,7 @@
     "@types/react": "^18.3.2",
     "@types/react-color": "^3.0.12",
     "@types/react-dom": "^18.3.0",
-    "esbuild": "^0.21.2",
+    "esbuild": "^0.21.3",
     "eslint": "^9.2.0",
     "mdast-util-toc": "^7.0.1",
     "postcss": "^8.4.38",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.34.1
+
+### Patch Changes
+
+- Improve `Chip` colors in dark mode
+
 ## 0.34.0
 
 ### Minor Changes

diff --git a/packages/components/elements/chip/Chip.tsx b/packages/components/elements/chip/Chip.tsx
@@ -68,20 +68,20 @@ export const Chip = React.forwardRef<HTMLSpanElement, ChipTypes>(
     };
     let colorStyles: any = {
       green:
-        "hawa-bg-green-100 hawa-text-green-500 dark:hawa-bg-green-400 dark:hawa-text-green-800",
-      blue: "hawa-bg-blue-100 hawa-text-blue-500 dark:hawa-bg-blue-400 dark:hawa-text-blue-100",
-      red: "hawa-bg-red-100 hawa-text-red-500 dark:hawa-bg-red-400 dark:hawa-text-red-100",
+        "hawa-bg-green-200 hawa-text-green-700 dark:hawa-bg-green-700 dark:hawa-text-green-200",
+      blue: "hawa-bg-blue-200 hawa-text-blue-700 dark:hawa-bg-blue-700 dark:hawa-text-blue-100",
+      red: "hawa-bg-red-200 hawa-text-red-700 dark:hawa-bg-red-700 dark:hawa-text-red-100",
       yellow:
-        "hawa-bg-yellow-100 hawa-text-yellow-600 dark:hawa-bg-yellow-400 dark:hawa-text-yellow-800",
+        "hawa-bg-yellow-200 hawa-text-yellow-700 dark:hawa-bg-yellow-600 dark:hawa-text-black",
       orange:
-        "hawa-bg-orange-100 hawa-text-orange-500 dark:hawa-bg-orange-400 dark:hawa-text-orange-100",
+        "hawa-bg-orange-200 hawa-text-orange-700 dark:hawa-bg-orange-700 dark:hawa-text-orange-100",
       purple:
-        "hawa-bg-purple-100 hawa-text-purple-500 dark:hawa-bg-purple-400 dark:hawa-text-purple-100",
-      cyan: "hawa-bg-cyan-100 hawa-text-cyan-800 dark:hawa-bg-cyan-400 dark:hawa-text-cyan-800",
+        "hawa-bg-purple-200 hawa-text-purple-700 dark:hawa-bg-purple-700 dark:hawa-text-purple-100",
+      cyan: "hawa-bg-cyan-200 hawa-text-cyan-700 dark:hawa-bg-cyan-700 dark:hawa-text-cyan-100",
       hyper:
-        "hawa-text-white hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
+        "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-tl hawa-from-pink-500 hawa-via-red-500 hawa-to-yellow-500 ",
       oceanic:
-        "hawa-text-white hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
+        "hawa-text-white dark:hawa-text-black hawa-bg-gradient-to-bl hawa-from-green-300 hawa-via-blue-500 hawa-to-purple-600"
     };
     if (label) {
       return (

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
@@ -59,7 +59,7 @@
     "react-dom": "18.3.1"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.3.4",
+    "@hookform/resolvers": "^3.4.0",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
@@ -81,8 +81,8 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
-    "embla-carousel-auto-height": "^8.0.4",
-    "embla-carousel-react": "^8.0.4",
+    "embla-carousel-auto-height": "^8.1.0",
+    "embla-carousel-react": "^8.1.0",
     "eslint": "^9.2.0",
     "eslint-config-next": "^14.2.3",
     "libphonenumber-js": "^1.11.1",
@@ -111,7 +111,7 @@
     "autoprefixer": "^10.4.19",
     "boxen": "^7.1.1",
     "chalk": "^5.3.0",
-    "embla-carousel": "8.0.4",
+    "embla-carousel": "8.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lucide-react": "^0.378.0",

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.83
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.34.1
+
 ## 0.26.82
 
 ### Patch Changes

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-storybook",
-  "version": "0.26.82",
+  "version": "0.26.83",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
@@ -35,16 +35,16 @@
     "@sikka/alam": "^0.0.4",
     "@types/react": "^18.3.2",
     "@types/react-dom": "^18.3.0",
-    "@storybook/addon-essentials": "^8.1.0",
-    "@storybook/addon-interactions": "^8.1.0",
-    "@storybook/addon-links": "^8.1.0",
-    "@storybook/addon-mdx-gfm": "^8.1.0",
-    "@storybook/blocks": "^8.1.0",
-    "@storybook/manager-api": "^8.1.0",
-    "@storybook/nextjs": "^8.1.0",
-    "@storybook/react": "^8.1.0",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/addon-mdx-gfm": "^8.1.1",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/manager-api": "^8.1.1",
+    "@storybook/nextjs": "^8.1.1",
+    "@storybook/react": "^8.1.1",
     "@storybook/testing-library": "^0.2.2",
-    "@storybook/theming": "^8.1.0",
+    "@storybook/theming": "^8.1.1",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -62,7 +62,7 @@
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.14",
     "recharts": "^2.12.7",
-    "storybook": "^8.1.0",
+    "storybook": "^8.1.1",
     "storybook-dark-mode": "^4.0.1",
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.3",

diff --git a/packages/storybook/stories/ElementsStories/Chip.stories.tsx b/packages/storybook/stories/ElementsStories/Chip.stories.tsx
@@ -8,7 +8,7 @@ import { setLocale, t } from "../../translations/i18n";
 
 const meta = {
   title: "Elements/Chip",
-  component: Chip
+  component: Chip,
 } satisfies Meta<typeof Chip>;
 
 export default meta;
@@ -25,14 +25,15 @@ export const Colors: Story = {
         <Chip size="normal" label={t("Green")} color={"green"} />
         <Chip size="normal" label={t("Blue")} color={"blue"} />
         <Chip size="normal" label={t("Yellow")} color={"yellow"} />
+        <Chip size="normal" label={t("Orange")} color={"orange"} />
         <Chip size="normal" label={t("Purple")} color={"purple"} />
         <Chip size="normal" label={t("Cyan")} color={"cyan"} />
         <Chip size="normal" label={t("Hyper")} color={"hyper"} />
         <Chip size="normal" label={t("Oceanic")} color={"oceanic"} />
         <Chip size="normal" label={t("No Color")} />
       </div>
     );
-  }
+  },
 };
 export const Sizes: Story = {
   render: (args: any, globals: any) => {
@@ -46,7 +47,7 @@ export const Sizes: Story = {
         <Chip size="large" label={t("large")} color={"green"} />
       </div>
     );
-  }
+  },
 };
 export const AsStatus: Story = {
   render: (args: any, globals: any) => {
@@ -71,7 +72,7 @@ export const AsStatus: Story = {
         />
       </div>
     );
-  }
+  },
 };
 export const WithIcons: Story = {
   render: (args: any, globals: any) => {
@@ -103,7 +104,7 @@ export const WithIcons: Story = {
         />
       </div>
     );
-  }
+  },
 };
 export const Radius: Story = {
   render: () => (
@@ -112,5 +113,5 @@ export const Radius: Story = {
       <Chip radius="inherit" size="large" label="Inherit" color="green" />
       <Chip radius="full" size="large" label="Full" color="green" />
     </div>
-  )
+  ),
 };