feat(ThemeToggle): rework stories, add missing examples

shuriken-ui · Dec 9, 2023 · 7969142 · 7969142
1 parent 12105e5
commit 7969142
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 3 deletions.
diff --git a/src/plugins/components/theme-switch/index.ts b/src/plugins/components/theme-switch/index.ts
@@ -112,7 +112,7 @@ export default plugin.withOptions(
             },
           },
           //Toggle:not-inverted
-          [`&.not(${prefix}theme-switch-inverted)`]: {
+          [`&:not(${prefix}theme-switch-inverted)`]: {
             //Ring
             [`@apply ring-offset-${config.inverted.disabled.ring.light} dark:ring-offset-${config.inverted.disabled.ring.dark}`]:
               {},

diff --git a/src/plugins/components/theme-switch/theme-switch.doc.mdx b/src/plugins/components/theme-switch/theme-switch.doc.mdx
@@ -14,6 +14,25 @@ The theme switch is a control that lets you toggle between light and dark mode.
 
 <Controls />
 
+## Variants
+
+<br />
+
+### Inverted
+
+Theme switches can be inverted to be more visible on dark backgrounds.
+
+<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-xs">
+    <div>
+      <Story of={ThemeSwitchStories.InvertedFalse} />
+    </div>
+    <div>
+      <Story of={ThemeSwitchStories.InvertedTrue} />
+    </div>
+  </div>
+</div>
+
 <br />
 <br />
 

diff --git a/src/plugins/components/theme-switch/theme-switch.stories.ts b/src/plugins/components/theme-switch/theme-switch.stories.ts
@@ -29,3 +29,19 @@ export const Main: Story = {
   args: {},
 }
 // #endregion
+
+// #region Inverted:false
+export const InvertedFalse: Story = {
+  name: 'Inverted: false',
+  args: {},
+}
+// #endregion
+
+// #region Inverted:true
+export const InvertedTrue: Story = {
+  name: 'Inverted: true',
+  args: {
+    inverted: true,
+  },
+}
+// #endregion
diff --git a/src/plugins/components/theme-toggle/index.ts b/src/plugins/components/theme-toggle/index.ts
@@ -103,12 +103,12 @@ export default plugin.withOptions(
               {},
 
             [`.${prefix}toggle-inner`]: {
-              [`@apply bg-${config.inverted.enabled.inner.background.light} dark:bg-${config.inverted.enabled.inner.background.dark}`]:
+              [`@apply !bg-${config.inverted.enabled.inner.background.light} dark:!bg-${config.inverted.enabled.inner.background.dark}`]:
                 {},
             },
           },
           //Toggle:not-inverted
-          [`&.not(${prefix}theme-toggle-inverted)`]: {
+          [`&:not(${prefix}theme-toggle-inverted)`]: {
             //Ring
             [`@apply ring-offset-${config.inverted.disabled.ring.light} dark:ring-offset-${config.inverted.disabled.ring.dark}`]:
               {},

diff --git a/src/plugins/components/theme-toggle/theme-toggle.doc.mdx b/src/plugins/components/theme-toggle/theme-toggle.doc.mdx
@@ -14,6 +14,25 @@ The theme toggle is a control that lets you switch between light and dark mode.
 
 <Controls />
 
+## Variants
+
+<br />
+
+### Inverted
+
+Theme toggles can be inverted to be more visible on dark backgrounds.
+
+<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-xs">
+    <div>
+      <Story of={ThemeToggleStories.InvertedFalse} />
+    </div>
+    <div>
+      <Story of={ThemeToggleStories.InvertedTrue} />
+    </div>
+  </div>
+</div>
+
 <br />
 <br />
 

diff --git a/src/plugins/components/theme-toggle/theme-toggle.stories.ts b/src/plugins/components/theme-toggle/theme-toggle.stories.ts
@@ -29,3 +29,19 @@ export const Main: Story = {
   args: {},
 }
 // #endregion
+
+// #region Inverted:false
+export const InvertedFalse: Story = {
+  name: 'Inverted: false',
+  args: {},
+}
+// #endregion
+
+// #region Inverted:true
+export const InvertedTrue: Story = {
+  name: 'Inverted: true',
+  args: {
+    inverted: true,
+  },
+}
+// #endregion