Moved to text size

AlfieJones · Jan 26, 2023 · 38abfea · 38abfea · vercel · Jan 26, 2023
1 parent 0b7e393
commit 38abfea
Show file tree

Hide file tree

Showing 30 changed files with 49 additions and 15 deletions.
diff --git a/packages/core/assets/svgs/around.svg b/packages/core/assets/svgs/around.svg
diff --git a/packages/core/assets/svgs/classic.svg b/packages/core/assets/svgs/classic.svg
diff --git a/packages/core/assets/svgs/dark-inner.svg b/packages/core/assets/svgs/dark-inner.svg
diff --git a/packages/core/assets/svgs/dark-side.svg b/packages/core/assets/svgs/dark-side.svg
diff --git a/packages/core/assets/svgs/eclipse.svg b/packages/core/assets/svgs/eclipse.svg
diff --git a/packages/core/assets/svgs/expand.svg b/packages/core/assets/svgs/expand.svg
diff --git a/packages/core/assets/svgs/half-sun.svg b/packages/core/assets/svgs/half-sun.svg
diff --git a/packages/core/assets/svgs/horizon.svg b/packages/core/assets/svgs/horizon.svg
diff --git a/packages/core/assets/svgs/inner-moon.svg b/packages/core/assets/svgs/inner-moon.svg
diff --git a/packages/core/assets/svgs/lightbulb.svg b/packages/core/assets/svgs/lightbulb.svg
diff --git a/packages/core/assets/svgs/simple.svg b/packages/core/assets/svgs/simple.svg
diff --git a/packages/core/assets/svgs/within.svg b/packages/core/assets/svgs/within.svg
diff --git a/packages/react/src/toggles/Around.tsx b/packages/react/src/toggles/Around.tsx
@@ -48,6 +48,8 @@ const Around = forwardRefWithAs(function Around<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__around"

diff --git a/packages/react/src/toggles/Classic.tsx b/packages/react/src/toggles/Classic.tsx
@@ -48,6 +48,8 @@ const Classic = forwardRefWithAs(function Classic<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__classic"

diff --git a/packages/react/src/toggles/DarkInner.tsx b/packages/react/src/toggles/DarkInner.tsx
@@ -48,6 +48,8 @@ const DarkInner = forwardRefWithAs(function DarkInner<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__dark-inner"

diff --git a/packages/react/src/toggles/DarkSide.tsx b/packages/react/src/toggles/DarkSide.tsx
@@ -48,6 +48,8 @@ const DarkSide = forwardRefWithAs(function DarkSide<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__dark-side"

diff --git a/packages/react/src/toggles/Eclipse.tsx b/packages/react/src/toggles/Eclipse.tsx
@@ -48,6 +48,8 @@ const Eclipse = forwardRefWithAs(function Eclipse<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__eclipse"

diff --git a/packages/react/src/toggles/Expand.tsx b/packages/react/src/toggles/Expand.tsx
@@ -48,6 +48,8 @@ const Expand = forwardRefWithAs(function Expand<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__expand"

diff --git a/packages/react/src/toggles/HalfSun.tsx b/packages/react/src/toggles/HalfSun.tsx
@@ -48,6 +48,8 @@ const HalfSun = forwardRefWithAs(function HalfSun<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__half-sun"

diff --git a/packages/react/src/toggles/Horizon.tsx b/packages/react/src/toggles/Horizon.tsx
@@ -48,6 +48,8 @@ const Horizon = forwardRefWithAs(function Horizon<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__horizon"

diff --git a/packages/react/src/toggles/InnerMoon.tsx b/packages/react/src/toggles/InnerMoon.tsx
@@ -48,6 +48,8 @@ const InnerMoon = forwardRefWithAs(function InnerMoon<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__inner-moon"

diff --git a/packages/react/src/toggles/Lightbulb.tsx b/packages/react/src/toggles/Lightbulb.tsx
@@ -48,6 +48,8 @@ const Lightbulb = forwardRefWithAs(function Lightbulb<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           stroke="currentColor"
           strokeLinecap="round"

diff --git a/packages/react/src/toggles/Simple.tsx b/packages/react/src/toggles/Simple.tsx
@@ -48,6 +48,8 @@ const Simple = forwardRefWithAs(function Simple<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__simple"

diff --git a/packages/react/src/toggles/Within.tsx b/packages/react/src/toggles/Within.tsx
@@ -48,6 +48,8 @@ const Within = forwardRefWithAs(function Within<
       {
         <svg
           xmlns="http://www.w3.org/2000/svg"
+          width="1em"
+          height="1em"
           fill="currentColor"
           aria-hidden="true"
           className="theme-toggle__within"

diff --git a/website/src/app/toggle/[toggle]/utils.tsx b/website/src/app/toggle/[toggle]/utils.tsx
@@ -64,7 +64,7 @@ export function ToggleConfiguration({
             style={{ color }}
             reversed={reversed}
             duration={duration}
-            className="w-32 h-32"
+            className="text-[10rem]"
             toggled={toggled}
             onToggle={onToggle}
           />

diff --git a/website/src/components/Button2.tsx → website/src/components/Button.tsx b/website/src/components/Button2.tsx → website/src/components/Button.tsx
diff --git a/website/src/components/Docs.tsx b/website/src/components/Docs.tsx
@@ -1,4 +1,4 @@
-import Button from '@/components/Button2'
+import Button from '@/components/Button'
 import { Heading } from '@/components/Heading'
 
 const guides = [

diff --git a/website/src/components/Navigation.tsx b/website/src/components/Navigation.tsx
@@ -189,9 +189,7 @@ export const navigation = [
     title: 'Framework Guides',
     links: [
       { title: 'HTML', href: '/docs/html' },
-      { title: 'React', href: '/docs/react' },
-      { title: 'Svelte', href: '/docs/svelte' },
-      { title: 'Vue', href: '/docs/vue' },
+      { title: 'React', href: '/docs/react' }
     ],
   },
 ]

diff --git a/website/src/components/ToggleUtils.tsx b/website/src/components/ToggleUtils.tsx
@@ -69,7 +69,7 @@ export function Toggle({ toggle, colorDark, colorLight }: any) {
       <div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
       <div className="relative w-full px-6 pt-6 pb-2 rounded-2xl">
         <Toggle
-          className="relative z-10 block w-24 h-24 mx-auto text-custom-dark dark:text-custom-dark"
+          className="relative z-10 block mx-auto text-[8rem] text-custom-dark dark:text-custom-dark"
           idPrefix={id}
           toggled={toggled}
           onToggle={setToggle}

diff --git a/website/src/components/index.ts b/website/src/components/index.ts
@@ -1,2 +1,2 @@
-export { default as Button } from './Button2'
+export { default as Button } from './Button'
 export * from './Code'