ColorScheme: Tailwind CSS

tony · Jan 6, 2024 · 6c4a6b7 · 6c4a6b7
1 parent 527d27c
commit 6c4a6b7
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 16 deletions.
diff --git a/packages/react/src/TopNav/ColorScheme.css b/packages/react/src/TopNav/ColorScheme.css
@@ -21,23 +21,10 @@
   justify-content: center;
 }
 
-.color-scheme-toggler {
-  display: flex;
-  margin-right: var(--top-nav-icon-size);
-}
-
-.color-scheme-toggler-button
-  > .color-scheme-toggle
-  > .color-scheme-toggle--icon {
-  width: 18px;
-  margin-right: 3px;
-}
-
 .color-scheme-toggle {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  width: 6rem;
   gap: 0.3rem;
   border-radius: 0.25rem;
   color: var(--top-nav-site-name-text-color);

diff --git a/packages/react/src/TopNav/ColorScheme.tsx b/packages/react/src/TopNav/ColorScheme.tsx
@@ -93,7 +93,7 @@ export const ColorSchemeToggle: React.FC = () => {
       <FloatingFocusManager context={context} modal={false}>
         {isTooltipOpen && (
           <div
-          className="color-scheme-popover backdrop-blur flex-none lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-blue-900/85 text-white supports-backdrop-blur:bg-white/60 dark:bg-black-pearl-900/95"
+          className="color-scheme-popover backdrop-blur flex-none lg:z-50 lg:border-b lg:border-slate-900/10 dark:border-slate-50/[0.06] bg-blue-900/85 text-white supports-backdrop-blur:bg-white/60 dark:bg-black-pearl-900/95 w-24"
             ref={refs.setFloating}
             style={floatingStyles}
             aria-labelledby={headingId}
@@ -162,12 +162,12 @@ export const ColorSchemeToggle: React.FC = () => {
         )}
       </FloatingFocusManager>
       <div
-        className="color-scheme-toggler-button"
+        className="color-scheme-toggler-button w-24"
         ref={refs.setReference}
         {...getReferenceProps()}
       >
         <div className="color-scheme-toggle">
-          <div className="color-scheme-toggle--icon">
+          <div className="color-scheme-toggle--icon w-5 mr-0.5">
             {colorScheme === ColorScheme.DARK ? (
               <div
                 className="color-scheme-toggle--icon--mode color-scheme-toggle--icon--dark-mode"