@vueless/storybook-dark-mode 10.0.4 → 10.0.5

package/dist/manager.js

@@ -2,7 +2,7 @@ import { addons, useParameter } from 'storybook/manager-api';
 import { Addon_TypesEnum } from 'storybook/internal/types';
 import { themes } from 'storybook/theming';
 import * as React from 'react';
-import { IconButton } from 'storybook/internal/components';
+import { Button } from 'storybook/internal/components';
 import { SunIcon, MoonIcon } from '@storybook/icons';
 import { STORY_CHANGED, SET_STORIES, DOCS_RENDERED } from 'storybook/internal/core-events';
 import { global } from '@storybook/global';
@@ -169,10 +169,13 @@ function DarkMode({ api }) {
     }
   }, [defaultMode, updateMode, userHasExplicitlySetTheTheme]);
   return /* @__PURE__ */ React.createElement(
-    IconButton,
+    Button,
     {
       key: "dark-mode",
+      variant: "ghost",
+      padding: "small",
       title: isDark ? "Change theme to light mode" : "Change theme to dark mode",
+      "aria-label": isDark ? "Change theme to light mode" : "Change theme to dark mode",
       onClick: handleIconClick
     },
     isDark ? /* @__PURE__ */ React.createElement(SunIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ React.createElement(MoonIcon, { "aria-hidden": "true" })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueless/storybook-dark-mode",
-  "version": "10.0.4",
+  "version": "10.0.5",
   "description": "Toggle between light and dark mode in Storybook",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "repository": {

package/src/Tool.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { IconButton } from "storybook/internal/components";
+import { Button } from "storybook/internal/components";
 import { MoonIcon, SunIcon } from "@storybook/icons";
 import { API, useParameter } from "storybook/manager-api";
 import { SET_STORIES, DOCS_RENDERED, STORY_CHANGED } from "storybook/internal/core-events";
@@ -132,13 +132,16 @@ export function DarkMode({ api }: DarkModeProps) {
   }, [defaultMode, updateMode, userHasExplicitlySetTheTheme]);
 
   return (
-    <IconButton
+    <Button
       key="dark-mode"
+      variant="ghost"
+      padding="small"
       title={isDark ? "Change theme to light mode" : "Change theme to dark mode"}
+      aria-label={isDark ? "Change theme to light mode" : "Change theme to dark mode"}
       onClick={handleIconClick}
     >
       {isDark ? <SunIcon aria-hidden="true" /> : <MoonIcon aria-hidden="true" />}
-    </IconButton>
+    </Button>
   );
 }