Styles desafio de frontend Mentor,

App.style.ts

import styled, { createGlobalStyle } from "styled-components";

type Props = {
  color?: string;
  bg?: string;
  bdbox?: string;
  gc?: string;
};

type Theme = {
  theme: string;
};

export const Container = styled.div`
  max-width: 500px;
  min-width: 300px;
  margin: 0 auto;
  user-select: none;

  @media screen and (min-width: 450px) {
   min-width: 340px 
  }
`;

export const Flex = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

export const Header = styled(Flex)`
  justify-content: space-between;
  color: var(--white-text);
  font-size: 1.2rem;
`;

export const Input = styled.div`
  width: 100%;
  height: 79px;
  padding: 25px;
  font-size: 1.5rem;
  color: var(--white-text);
  background-color: var(--screen-background);
  text-align: right;
  margin: 1.3rem 0;
  border-radius: 0.5rem;
`;

export const ButtonContainer = styled.div`
  width: 100%;
  padding: 15px 10px;
  background-color: var(--toggle-background);
  min-height: 290px;
  border-radius: 0.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 65px));
  grid-auto-rows: 40px;
  gap: 1.2rem 0.9rem;
  align-items: center;

  @media screen and (min-width: 450px) {
    grid-template-columns: repeat(auto-fill, minmax(65px, 67px));
  }
`;

export const Button = styled(Flex)<Props>`
  border-radius: 0.3rem;
  padding: 10px;
  font-size: 1.2rem;
  opacity: 0.8;
  cursor: pointer;
  max-width: ${(props) => (props.gc ? "100%" : "65px")};
  grid-column: ${(props) => (props.gc ? props.gc : "auto")};
  background-color: ${(props) =>
    props.bg ? props.bg : "var(--key-background-orange) "};
  color: ${(props) =>
    props.color ? props.color : "var(--very-dark-grayish-blue)"};
  box-shadow: 0 3px 0
    ${(props) => (props.bdbox ? props.bdbox : "var(--key-shadow-orange)")};

  &:hover {
    opacity: 1;
  }
`;

export const WrapperSwitch = styled(Flex)`
  width: 115px;
  font-size: 0.85rem;
  align-items: flex-end;
  justify-content: space-between;
`;

export const Switch = styled.div`
  font-size: 0.9rem;
  flex: 0.75;
  justify-content: center;
  align-items: center;

  > div:first-of-type {
    width: 80%;
    font-size: 0.65rem;
    font-weight: 100;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
  }
`;

export const SwitcherContainer = styled.div`
  background-color: var(--toggle-background);
  width: 100%;
  min-height: 17px;
  border-radius: 2rem;
  position: relative;
  z-index: 20;
  cursor: pointer;
`;

export const Switcher = styled.div<Theme>`
  width: 11px;
  height: 11px;
  min-height: 11px;
  background-color: var(--key-background-red);
  border-radius: 2rem;
  position: absolute;
  left: ${(props) => props.theme};
  top: 17%;
  transition: all 0.1s linear;

`;

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

index.html

<!-- FONTS -->
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap"
      rel="stylesheet"
/>

theme1.ts

import { createGlobalStyle } from "styled-components";

export default createGlobalStyle`
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html:root { 
    --main-background: hsl(222, 26%, 31%);
    --toggle-background: hsl(223, 31%, 20%);
    --screen-background: hsl(224, 36%, 15%);


    --key-background-dark-blue: hsl(225, 21%, 49%);
    --key-shadow-dark-blue: hsl(224, 28%, 35%);

    --key-background-red: hsl(6, 63%, 50%);
    --key-shadow-dark-red: hsl(6, 70%, 34%);

    --key-background-orange: hsl(30, 25%, 89%);
    --key-shadow-orange: hsl(28, 16%, 65%);


    --very-dark-grayish-blue: hsl(221, 14%, 31%);
    --white: #fff;
    --white-text: #fff;
}

body{
    min-width: 100vw;
    min-height: 100vh;
    background-color: var(--main-background);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Spartan', sans-serif;
}

`;

theme2.ts

import { createGlobalStyle } from "styled-components";

export default createGlobalStyle`
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html:root { 

    //BACKGROUND
    --main-background: hsl(0, 0%, 90%);
    --toggle-background: hsl(0, 5%, 81%);
    --screen-background:hsl(0, 0%, 93%);

    //KEYS
    --key-background-dark-blue: hsl(185, 42%, 37%);
    --key-shadow-dark-blue: hsl(185, 58%, 25%);

    --key-background-red: hsl(25, 98%, 40%);
    --key-shadow-dark-red:  hsl(25, 99%, 27%);

    --key-background-orange: hsl(45, 7%, 89%);
    --key-shadow-orange: hsl(35, 11%, 61%);

    //TEXT
    --very-dark-grayish-blue:  hsl(60, 10%, 19%);
    --white: #fff;
    --white-text: #000;
}

body{
    min-width: 100vw;
    min-height: 100vh;
    background-color: var(--main-background);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Spartan', sans-serif;
}

`;

theme3.ts

import { createGlobalStyle } from "styled-components";

export default createGlobalStyle`
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html:root { 
    //BACKGROUND
    --main-background: hsl(268, 75%, 9%);
    --toggle-background: hsl(268, 71%, 12%);
    --screen-background:  hsl(268, 71%, 12%);

    //KEYS
    --key-background-dark-blue: hsl(281, 89%, 26%);
    --key-shadow-dark-blue: hsl(285, 91%, 52%);

    --key-background-red: hsl(176, 100%, 44%);
    --key-shadow-dark-red:   hsl(177, 92%, 70%);

    --key-background-orange: hsl(268, 47%, 21%);
    --key-shadow-orange:hsl(290, 70%, 36%);

    //TEXT
    --very-dark-grayish-blue: hsl(52, 100%, 62%);
    --white: #fff;
    --white-text: hsl(52, 100%, 62%);

}

body{
    min-width: 100vw;
    min-height: 100vh;
    background-color: var(--main-background);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Spartan', sans-serif;
}

`;