hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-02 02:10:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Override styled components default theme

Browse Source
This commit is contained in:
Hazem Krimi
2021-01-07 14:45:14 +01:00
parent 0eaf23ad60
commit 065413eaf5
5 changed files with 80 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Button.tsx
+26 -13
View File
@@ -1,8 +1,7 @@
import { FC, useContext } from 'react';
import { DarkModeContext } from '../components/DarkMode';
import styled from 'styled-components';
export interface Props {
interface Props {
variant?: 'outline' | 'text' | 'action';
onClick?: () => void;
dark?: boolean;
@@ -14,16 +13,18 @@ const Btn = styled.button<Props>`
cursor: pointer;
background: none;
outline: none;
color: ${({ dark }) => (dark ? 'white' : 'black')};
color: ${({ dark, theme }) => (dark ? theme.colors.dark.text : theme.colors.light.text)};
padding: 1rem;
border: ${({ variant, dark }) =>
variant === 'outline' ? `2px solid ${dark ? 'white' : 'black'}` : 'none'};
border: ${({ variant, dark, theme }) =>
variant === 'outline'
? `2px solid ${dark ? theme.colors.dark.text : theme.colors.light.text}`
: 'none'};
font-weight: bold;
font-size: ${({ variant }) => (variant === 'outline' ? '1.05rem' : 'inherit')};
text-transform: ${({ variant }) => (variant === 'outline' ? 'uppercase' : 'inherit')};
padding: ${({ variant }) => (variant === 'outline' ? '.5rem 1rem' : '0rem')};
transition: color 300ms ease-in-out;
transition: color 250ms ease-in-out;
z-index: 1;
&::before {
@@ -34,21 +35,33 @@ const Btn = styled.button<Props>`
bottom: 0;
right: 0;
z-index: -1;
background-color: ${({ variant, dark }) =>
variant === 'outline' ? (dark ? 'white' : 'black') : 'inherit'};
transition: transform 300ms ease-in-out;
background-color: ${({ variant, dark, theme }) =>
variant === 'outline'
? dark
? theme.colors.dark.text
: theme.colors.light.text
: 'inherit'};
transition: transform 250ms ease-in-out;
transform: scaleX(0);
transform-origin: left;
}
&:hover {
color: ${({ variant, dark }) =>
variant === 'outline' ? (dark ? '#262626' : '#F9F9F9') : 'inherit'};
color: ${({ variant, dark, theme }) =>
variant === 'outline'
? dark
? theme.colors.dark.background
: theme.colors.light.background
: 'inherit'};
}
&:focus {
color: ${({ variant, dark }) =>
variant === 'outline' ? (dark ? '#262626' : '#F9F9F9') : 'inherit'};
color: ${({ variant, dark, theme }) =>
variant === 'outline'
? dark
? theme.colors.dark.background
: theme.colors.light.background
: 'inherit'};
}
&:hover::before {