4
0
forked from crowetic/commerce

Normalizing Style Sheets

This commit is contained in:
Belen Curcio 2020-10-15 16:12:46 -03:00
parent ab45e28813
commit 0c9f3ef8d0
9 changed files with 20 additions and 14 deletions

View File

@ -15,13 +15,14 @@
--hover: rgba(0, 0, 0, 0.075); --hover: rgba(0, 0, 0, 0.075);
--cyan: #50e3c2; --cyan: #50e3c2;
--purple: #f81ce5;
--violet: #7928ca;
--pink: #ff0080;
--blue: #0070f3;
--green: #37b679; --green: #37b679;
--red: #da3c3c; --red: #da3c3c;
--pink: #ff0080;
--purple: #f81ce5;
--violet: #7928ca;
--blue: #0070f3;
--accents-0: #fff;
--accents-1: #fafafa; --accents-1: #fafafa;
--accents-2: #eaeaea; --accents-2: #eaeaea;
--accents-3: #999999; --accents-3: #999999;
@ -30,6 +31,7 @@
--accents-6: #444444; --accents-6: #444444;
--accents-7: #333333; --accents-7: #333333;
--accents-8: #111111; --accents-8: #111111;
--accents-9: #000;
} }
[data-theme='dark'] { [data-theme='dark'] {
@ -44,6 +46,7 @@
--text-primary: white; --text-primary: white;
--text-secondary: black; --text-secondary: black;
--accents-0: #000;
--accents-1: #111111; --accents-1: #111111;
--accents-2: #333333; --accents-2: #333333;
--accents-3: #444444; --accents-3: #444444;
@ -52,6 +55,7 @@
--accents-6: #999999; --accents-6: #999999;
--accents-7: #eaeaea; --accents-7: #eaeaea;
--accents-8: #fafafa; --accents-8: #fafafa;
--accents-9: #fff;
} }
.fit { .fit {
@ -80,7 +84,7 @@ body {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
background-color: var(--bg-primary); background-color: var(--primary);
color: var(--text-primary); color: var(--text-primary);
} }

View File

@ -10,7 +10,7 @@ interface Props {
const Featurebar: FC<Props> = ({ title, description, className }) => { const Featurebar: FC<Props> = ({ title, description, className }) => {
const rootClassName = cn( const rootClassName = cn(
'hidden py-2 px-6 bg-primary-accent text-base text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-primary-accent', 'hidden py-2 px-6 bg-accents-1 border-b border-accents-2 text-base text-sm text-gray-600 md:flex flex-row justify-center items-center font-medium border-b border-accents-1',
className className
) )
return ( return (

View File

@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
return ( return (
<div <div
className={cn( className={cn(
'relative rounded-lg text-sm bg-primary-accent text-base w-full', 'relative rounded-lg text-sm bg-accents-1 text-base w-full border border-accents-2',
className className
)} )}
> >

View File

@ -29,7 +29,7 @@ const UserNav: FC<Props> = ({ className }) => {
> >
<Bag /> <Bag />
{itemsCount > 0 && ( {itemsCount > 0 && (
<span className="bg-secondary text-base h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs"> <span className="border border-accent-1 bg-secondary text-secondary h-4 w-4 absolute rounded-full right-3 top-3 flex items-center justify-center font-bold text-xs">
{itemsCount} {itemsCount}
</span> </span>
)} )}

View File

@ -1,12 +1,12 @@
.root { .root {
@apply text-accents-8 cursor-pointer inline-flex px-10 rounded-sm leading-6 @apply text-accents-1 cursor-pointer inline-flex px-10 rounded-sm leading-6
bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold bg-secondary transition ease-in-out duration-150 shadow-sm font-semibold
text-center justify-center uppercase py-4 uppercase text-center focus:outline-none text-center justify-center uppercase py-4 uppercase text-center focus:outline-none
border border-transparent items-center; border border-transparent items-center;
} }
.root:hover { .root:hover {
@apply bg-primary-2 text-base border border-secondary; @apply bg-accents-0 text-base border border-secondary;
} }
.root:focus { .root:focus {

View File

@ -6,12 +6,12 @@ const Logo = () => (
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<rect width="32" height="32" rx="16" fill="var(--bg-secondary)" /> <rect width="32" height="32" rx="16" fill="var(--secondary)" />
<path <path
fillRule="evenodd" fillRule="evenodd"
clipRule="evenodd" clipRule="evenodd"
d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z" d="M17.6482 10.1305L15.8785 7.02583L7.02979 22.5499H10.5278L17.6482 10.1305ZM19.8798 14.0457L18.11 17.1983L19.394 19.4511H16.8453L15.1056 22.5499H24.7272L19.8798 14.0457Z"
fill="var(--bg-primary)" fill="var(--primary)"
/> />
</svg> </svg>
) )

View File

@ -73,7 +73,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
leaveTo="translate-x-full" leaveTo="translate-x-full"
> >
<div className="h-full w-screen max-w-lg"> <div className="h-full w-screen max-w-lg">
<div className="h-full flex flex-col text-base bg-primary-accent shadow-xl overflow-y-auto"> <div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
{children} {children}
</div> </div>
</div> </div>

View File

@ -1,5 +1,5 @@
.root { .root {
@apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-hover; @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-accents-2;
&:nth-child(3n + 1) { &:nth-child(3n + 1) {
& .productBg { & .productBg {

View File

@ -19,6 +19,7 @@ module.exports = {
secondary: 'var(--secondary)', secondary: 'var(--secondary)',
'secondary-2': 'var(--secondary-2)', 'secondary-2': 'var(--secondary-2)',
hover: 'var(--hover)', hover: 'var(--hover)',
'accents-0': 'var(--accents-0)',
'accents-1': 'var(--accents-1)', 'accents-1': 'var(--accents-1)',
'accents-2': 'var(--accents-2)', 'accents-2': 'var(--accents-2)',
'accents-3': 'var(--accents-3)', 'accents-3': 'var(--accents-3)',
@ -27,6 +28,7 @@ module.exports = {
'accents-6': 'var(--accents-6)', 'accents-6': 'var(--accents-6)',
'accents-7': 'var(--accents-7)', 'accents-7': 'var(--accents-7)',
'accents-8': 'var(--accents-8)', 'accents-8': 'var(--accents-8)',
'accents-9': 'var(--accents-9)',
violet: 'var(--violet)', violet: 'var(--violet)',
pink: 'var(--pink)', pink: 'var(--pink)',
cyan: 'var(--cyan)', cyan: 'var(--cyan)',