monica-alexandria 2.6.0 → 2.7.0

package/dist/index.es.js

@@ -308,7 +308,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
             fill: var(--mainLight);
         }
     }
-`,$=r(o)`
+`,y=r(o)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -330,7 +330,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
             fill: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
         }
     }
-`,y=r(i)`
+`,$=r(i)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -569,7 +569,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,I=r.input`
+`,F=r.input`
     width: 100%;
     border: none;
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
@@ -583,13 +583,13 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
         outline: 0;
         box-shadow: ${r=>"dark"===r.theme?"var(--insetShineFocus)":"var(--insetShadowFocus)"};
     }
-`,M=r(I)`
+`,I=r(F)`
     padding: var(--inputSmallPads);
     font-size: var(--inputSmallText);
-`,F=r(I)`
+`,M=r(F)`
     padding: var(--inputNormalPads);
     font-size: var(--inputNormalText);
-`,X=r(I)`
+`,X=r(F)`
     padding: var(--inputLargePads);
     font-size: var(--inputLargeText);
 `,O=r.label`
@@ -1038,9 +1038,9 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
     100% { 
         transform: translate(0); 
     }
-`,$r=r.div`
-    padding: 7rem 4rem 2rem 4rem;
 `,yr=r.div`
+    padding: 7rem 4rem 2rem 4rem;
+`,$r=r.div`
     padding-top: 2rem 4rem;
 `,wr=r.div`
     padding-top: 7rem;
@@ -1070,51 +1070,43 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
     @media ${lr.md} {
         display: none;
     }
-`,zr=r.div`
-    background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
-    transition-property: background;
-    transition-duration: .5s;
-    height: 100%;
-    min-height: calc(100vh);
+`,zr={id:"light",background:"var(--light)",color:"var(--black)",low:"var(--greyLight)",mid:"var(--grey)",high:"var(--greyDark)",overlay:"var(--blackOverlay)",in:"var(--insetShadow)",inFocus:"var(--insetShadowFocus)",out:"var(--outShadow)",outFocus:"var(--outShadowFocus)"},Nr={id:"dark",background:"var(--dark)",color:"var(--blanc)",low:"var(--gloomLight)",mid:"var(--gloom)",high:"var(--gloomDark)",overlay:"var(--blancOverlay)",in:"var(--insetShine)",inFocus:"var(--insetShineFocus)",out:"var(--outShine)",outFocus:"var(--outShineFocus)"},Tr=r.div`
+    min-height: 100vh;
     width: 100%;
-
-    html{
-        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
-    }
+    background: ${r=>r.theme.background};
 
     h1,h2,h3,h4,h5,h6,p{
-        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
-        transition: color .5s;
+        color: ${r=>r.theme.color};
     }
-`,Nr=r.div`
+`,Pr=r.div`
     padding: var(--smallDist);
 
     h4{
         margin-bottom: 2rem;
     }
-`,Tr=r.div`
+`,jr=r.div`
     
-`,Pr=r.div`
+`,Fr=r.div`
     
-`,jr=r.div`
+`,Ir=r.div`
     
     img{
         height: 4rem;
     }
-`,Ir=r.div`
-    max-width: 45rem;
 `,Mr=r.div`
     max-width: 45rem;
+`,Xr=r.div`
+    max-width: 45rem;
 
     h1{
         margin: var(--smallDist);
     }
-`,Fr=r.form`
+`,Or=r.form`
     padding: var(--normalDist);
     background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     border-radius: var(--normalRadius);
     box-shadow: ${r=>"dark"===r.theme?"var(--outShine)":"var(--outShadow)"};
-`,Xr=r.div`
+`,Yr=r.div`
     display: flex;
     gap: 1rem;
     align-items: center;
@@ -1126,7 +1118,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
         gap: .5rem;
         align-items: center;
     }
-`,Or=r.div`
+`,qr=r.div`
     display: flex;
     align-items: flex-start;
     gap: 1rem;
@@ -1134,17 +1126,17 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
     input{
         margin-top: .3rem;
     }
-`,Yr=r.div`
+`,Ar=r.div`
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-gap: 1rem;
     margin: 2rem 1rem;
-`,qr=r.div`
+`,Br=r.div`
     display: flex;
     align-items: center;
     justify-content: center;
     margin-top: 4rem;
-`,Ar=r.div`
+`,Cr=r.div`
     margin-bottom: 4rem;
     
     section{
@@ -1153,7 +1145,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
             margin-bottom: 2rem;
         }
     }
-`,Br=r.div`
+`,Er=r.div`
     
     picture{
         width: 100%;
@@ -1174,7 +1166,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
         display: flex;
         gap: 1rem;
     }
-`,Cr=r.div`
+`,Gr=r.div`
     display: grid;
     grid-template-columns: 20rem 1fr;
     grid-gap: 2rem;
@@ -1199,7 +1191,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
         flex-direction: column;
         gap: 1rem;
     }
-`,Er=r.ul`
+`,Hr=r.ul`
     background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     padding: var(--smallDist);
     border-radius: var(--smallRadius);
@@ -1224,7 +1216,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
     li{
         margin-top: .5rem;
     }
-`,Gr=r.div`
+`,Jr=r.div`
     display: grid;
     grid-template-columns: auto 1fr;
     align-items: flex-start;
@@ -1234,7 +1226,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
     form{
         margin-top: 4rem;
     }
-`,Hr=r.div`
+`,Kr=r.div`
     padding: var(--smallDist);
 
     ul{
@@ -1250,14 +1242,14 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
             }
         }
     }
-`,Jr=r.div`
+`,Qr=r.div`
     position: fixed;
     top: 0;
     left: 0;
     z-index: 500;
     height: 100vh;
     width: 100%;
-`,Kr=r.div`
+`,Ur=r.div`
     position: fixed;
     top: 0;
     left: 0;
@@ -1265,7 +1257,7 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
     height: 100vh;
     width: 100%;
     background: ${r=>"dark"===r.theme?"var(--blancOverlay)":"var(--blackOverlay)"};
-`,Qr=r.div`
+`,Vr=r.div`
     position: fixed;
     right: 0;
     z-index: 502;
@@ -1283,11 +1275,11 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
     @media ${lr.sm} {
         width: 100%;
     }
-`,Ur=r.div`
+`,Wr=r.div`
     max-height: calc(100vh - 9rem);
     overflow-x: hidden;
     overflow-y: auto;
-`,Vr=r.div`
+`,Zr=r.div`
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -1302,4 +1294,4 @@ import r,{keyframes as a}from"styled-components";const e=r.button`
             display: none;
         }
     }
-`;export{qr as AuthActions,Yr as AuthCap,Or as AuthCheck,Ir as AuthContainer,Fr as AuthForm,jr as AuthLogo,Xr as AuthSecondary,Mr as AuthWrapper,_ as BoxActions,Z as BoxContent,V as BoxGrid,W as BoxWrapper,Tr as Container,l as CtaButtonLarge,n as CtaButtonNormal,d as CtaButtonSmall,S as DeleteButtonLarge,D as DeleteButtonNormal,L as DeleteButtonSmall,Hr as EditList,Gr as EditSelect,Er as EditTips,Cr as EditUploadAvatar,Br as EditUploadCover,Ar as EditWrapper,K as ErrorValidator,m as FocusButtonLarge,v as FocusButtonNormal,s as FocusButtonSmall,c as FocusPlainButtonLarge,h as FocusPlainButtonNormal,g as FocusPlainButtonSmall,N as GreyButtonLarge,z as GreyButtonNormal,R as GreyButtonSmall,ar as GreyDropdownNormal,j as GreyLinkButtonLarge,P as GreyLinkButtonNormal,T as GreyLinkButtonSmall,E as InputAdd,B as InputGroup,G as InputIcon,X as InputLarge,H as InputMandatory,F as InputNormal,C as InputSearch,M as InputSmall,A as LabelLarge,q as LabelNormal,Y as LabelSmall,k as MainButtonLarge,u as MainButtonNormal,p as MainButtonSmall,x as MainPlainButtonLarge,f as MainPlainButtonNormal,b as MainPlainButtonSmall,sr as Navbar,gr as NavbarCta,pr as NavbarHam,ur as NavbarHamList,br as NavbarHamListItem,fr as NavbarHamMobileItem,kr as NavbarHamTitle,cr as NavbarList,vr as NavbarLogo,hr as NavbarRight,mr as NavbarText,Sr as PageAlwaysVisible,Dr as PageForty,Rr as PageMobileHidden,$r as PagePaddings,yr as PageSamePaddings,Lr as PageSixty,wr as PageTopPaddings,Pr as Section,xr as SlideIn,Jr as Slider,Kr as SliderBg,Qr as SliderContainer,Vr as SliderTitle,Ur as SliderWrapper,Q as SuccessValidator,tr as TextareaLarge,ir as TextareaNormal,or as TextareaSmall,zr as Theme,U as TipValidator,w as WhitePlainButtonLarge,y as WhitePlainButtonNormal,$ as WhitePlainButtonSmall,Nr as Wrapper,dr as breakPoints,nr as breakSize,lr as device};
+`;export{Br as AuthActions,Ar as AuthCap,qr as AuthCheck,Mr as AuthContainer,Or as AuthForm,Ir as AuthLogo,Yr as AuthSecondary,Xr as AuthWrapper,_ as BoxActions,Z as BoxContent,V as BoxGrid,W as BoxWrapper,jr as Container,l as CtaButtonLarge,n as CtaButtonNormal,d as CtaButtonSmall,S as DeleteButtonLarge,D as DeleteButtonNormal,L as DeleteButtonSmall,Kr as EditList,Jr as EditSelect,Hr as EditTips,Gr as EditUploadAvatar,Er as EditUploadCover,Cr as EditWrapper,K as ErrorValidator,m as FocusButtonLarge,v as FocusButtonNormal,s as FocusButtonSmall,c as FocusPlainButtonLarge,h as FocusPlainButtonNormal,g as FocusPlainButtonSmall,N as GreyButtonLarge,z as GreyButtonNormal,R as GreyButtonSmall,ar as GreyDropdownNormal,j as GreyLinkButtonLarge,P as GreyLinkButtonNormal,T as GreyLinkButtonSmall,E as InputAdd,B as InputGroup,G as InputIcon,X as InputLarge,H as InputMandatory,M as InputNormal,C as InputSearch,I as InputSmall,A as LabelLarge,q as LabelNormal,Y as LabelSmall,k as MainButtonLarge,u as MainButtonNormal,p as MainButtonSmall,x as MainPlainButtonLarge,f as MainPlainButtonNormal,b as MainPlainButtonSmall,sr as Navbar,gr as NavbarCta,pr as NavbarHam,ur as NavbarHamList,br as NavbarHamListItem,fr as NavbarHamMobileItem,kr as NavbarHamTitle,cr as NavbarList,vr as NavbarLogo,hr as NavbarRight,mr as NavbarText,Sr as PageAlwaysVisible,Dr as PageForty,Rr as PageMobileHidden,yr as PagePaddings,$r as PageSamePaddings,Lr as PageSixty,wr as PageTopPaddings,Fr as Section,xr as SlideIn,Qr as Slider,Ur as SliderBg,Vr as SliderContainer,Zr as SliderTitle,Wr as SliderWrapper,Q as SuccessValidator,tr as TextareaLarge,ir as TextareaNormal,or as TextareaSmall,Tr as Theme,Nr as ThemeDark,zr as ThemeLight,U as TipValidator,w as WhitePlainButtonLarge,$ as WhitePlainButtonNormal,y as WhitePlainButtonSmall,Pr as Wrapper,dr as breakPoints,nr as breakSize,lr as device};

package/dist/index.js

@@ -546,7 +546,7 @@
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,I=e.default(d)`
+`,F=e.default(d)`
     background: transparent;
     border: 1px solid transparent;
 
@@ -569,7 +569,7 @@
             fill: ${r=>"dark"===r.theme?"var(--gloom)":"var(--grey)"};
         }
     }
-`,M=e.default.input`
+`,I=e.default.input`
     width: 100%;
     border: none;
     background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
@@ -583,13 +583,13 @@
         outline: 0;
         box-shadow: ${r=>"dark"===r.theme?"var(--insetShineFocus)":"var(--insetShadowFocus)"};
     }
-`,j=e.default(M)`
+`,M=e.default(I)`
     padding: var(--inputSmallPads);
     font-size: var(--inputSmallText);
-`,F=e.default(M)`
+`,j=e.default(I)`
     padding: var(--inputNormalPads);
     font-size: var(--inputNormalText);
-`,A=e.default(M)`
+`,A=e.default(I)`
     padding: var(--inputLargePads);
     font-size: var(--inputLargeText);
 `,C=e.default.label`
@@ -654,7 +654,7 @@
             }
         }
     }
-`,V=e.default(H)`
+`,O=e.default(H)`
     
     aside{
         display: block;
@@ -669,7 +669,7 @@
             display: none;
         }
     }
-`,O=e.default.div`
+`,V=e.default.div`
     position: absolute;
     top: 1.2rem;
     right: 2rem;
@@ -1071,20 +1071,12 @@
         display: none;
     }
 `,Tr=e.default.div`
-    background: ${r=>"dark"===r.theme?"var(--dark)":"var(--white)"};
-    transition-property: background;
-    transition-duration: .5s;
-    height: 100%;
-    min-height: calc(100vh);
+    min-height: 100vh;
     width: 100%;
-
-    html{
-        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
-    }
+    background: ${r=>r.theme.background};
 
     h1,h2,h3,h4,h5,h6,p{
-        color: ${r=>"dark"===r.theme?"var(--blanc)":"var(--black)"};
-        transition: color .5s;
+        color: ${r=>r.theme.color};
     }
 `,Rr=e.default.div`
     padding: var(--smallDist);
@@ -1094,16 +1086,16 @@
     }
 `,zr=e.default.div`
     
-`,Ir=e.default.div`
+`,Fr=e.default.div`
     
-`,Mr=e.default.div`
+`,Ir=e.default.div`
     
     img{
         height: 4rem;
     }
-`,jr=e.default.div`
+`,Mr=e.default.div`
     max-width: 45rem;
-`,Fr=e.default.div`
+`,jr=e.default.div`
     max-width: 45rem;
 
     h1{
@@ -1174,7 +1166,7 @@
         display: flex;
         gap: 1rem;
     }
-`,Vr=e.default.div`
+`,Or=e.default.div`
     display: grid;
     grid-template-columns: 20rem 1fr;
     grid-gap: 2rem;
@@ -1199,7 +1191,7 @@
         flex-direction: column;
         gap: 1rem;
     }
-`,Or=e.default.ul`
+`,Vr=e.default.ul`
     background: ${r=>"dark"===r.theme?"var(--gloomDark)":"var(--greyLight)"};
     padding: var(--smallDist);
     border-radius: var(--smallRadius);
@@ -1302,4 +1294,4 @@
             display: none;
         }
     }
-`;exports.AuthActions=Er,exports.AuthCap=Wr,exports.AuthCheck=Gr,exports.AuthContainer=jr,exports.AuthForm=Ar,exports.AuthLogo=Mr,exports.AuthSecondary=Cr,exports.AuthWrapper=Fr,exports.BoxActions=rr,exports.BoxContent=Z,exports.BoxGrid=K,exports.BoxWrapper=Q,exports.Container=zr,exports.CtaButtonLarge=s,exports.CtaButtonNormal=n,exports.CtaButtonSmall=l,exports.DeleteButtonLarge=N,exports.DeleteButtonNormal=D,exports.DeleteButtonSmall=S,exports.EditList=Yr,exports.EditSelect=Ur,exports.EditTips=Or,exports.EditUploadAvatar=Vr,exports.EditUploadCover=Xr,exports.EditWrapper=Hr,exports.ErrorValidator=_,exports.FocusButtonLarge=g,exports.FocusButtonNormal=m,exports.FocusButtonSmall=v,exports.FocusPlainButtonLarge=h,exports.FocusPlainButtonNormal=p,exports.FocusPlainButtonSmall=u,exports.GreyButtonLarge=T,exports.GreyButtonNormal=B,exports.GreyButtonSmall=P,exports.GreyDropdownNormal=tr,exports.GreyLinkButtonLarge=I,exports.GreyLinkButtonNormal=z,exports.GreyLinkButtonSmall=R,exports.InputAdd=V,exports.InputGroup=H,exports.InputIcon=O,exports.InputLarge=A,exports.InputMandatory=U,exports.InputNormal=F,exports.InputSearch=X,exports.InputSmall=j,exports.LabelLarge=E,exports.LabelNormal=W,exports.LabelSmall=G,exports.MainButtonLarge=k,exports.MainButtonNormal=f,exports.MainButtonSmall=c,exports.MainPlainButtonLarge=y,exports.MainPlainButtonNormal=b,exports.MainPlainButtonSmall=x,exports.Navbar=mr,exports.NavbarCta=pr,exports.NavbarHam=fr,exports.NavbarHamList=kr,exports.NavbarHamListItem=br,exports.NavbarHamMobileItem=yr,exports.NavbarHamTitle=xr,exports.NavbarList=cr,exports.NavbarLogo=gr,exports.NavbarRight=hr,exports.NavbarText=ur,exports.PageAlwaysVisible=Pr,exports.PageForty=Nr,exports.PageMobileHidden=Br,exports.PagePaddings=wr,exports.PageSamePaddings=Lr,exports.PageSixty=Dr,exports.PageTopPaddings=Sr,exports.Section=Ir,exports.SlideIn=$r,exports.Slider=_r,exports.SliderBg=qr,exports.SliderContainer=Jr,exports.SliderTitle=Qr,exports.SliderWrapper=Kr,exports.SuccessValidator=q,exports.TextareaLarge=lr,exports.TextareaNormal=dr,exports.TextareaSmall=ir,exports.Theme=Tr,exports.TipValidator=J,exports.WhitePlainButtonLarge=L,exports.WhitePlainButtonNormal=w,exports.WhitePlainButtonSmall=$,exports.Wrapper=Rr,exports.breakPoints=nr,exports.breakSize=sr,exports.device=vr;
+`;exports.AuthActions=Er,exports.AuthCap=Wr,exports.AuthCheck=Gr,exports.AuthContainer=Mr,exports.AuthForm=Ar,exports.AuthLogo=Ir,exports.AuthSecondary=Cr,exports.AuthWrapper=jr,exports.BoxActions=rr,exports.BoxContent=Z,exports.BoxGrid=K,exports.BoxWrapper=Q,exports.Container=zr,exports.CtaButtonLarge=s,exports.CtaButtonNormal=n,exports.CtaButtonSmall=l,exports.DeleteButtonLarge=N,exports.DeleteButtonNormal=D,exports.DeleteButtonSmall=S,exports.EditList=Yr,exports.EditSelect=Ur,exports.EditTips=Vr,exports.EditUploadAvatar=Or,exports.EditUploadCover=Xr,exports.EditWrapper=Hr,exports.ErrorValidator=_,exports.FocusButtonLarge=g,exports.FocusButtonNormal=m,exports.FocusButtonSmall=v,exports.FocusPlainButtonLarge=h,exports.FocusPlainButtonNormal=p,exports.FocusPlainButtonSmall=u,exports.GreyButtonLarge=T,exports.GreyButtonNormal=B,exports.GreyButtonSmall=P,exports.GreyDropdownNormal=tr,exports.GreyLinkButtonLarge=F,exports.GreyLinkButtonNormal=z,exports.GreyLinkButtonSmall=R,exports.InputAdd=O,exports.InputGroup=H,exports.InputIcon=V,exports.InputLarge=A,exports.InputMandatory=U,exports.InputNormal=j,exports.InputSearch=X,exports.InputSmall=M,exports.LabelLarge=E,exports.LabelNormal=W,exports.LabelSmall=G,exports.MainButtonLarge=k,exports.MainButtonNormal=f,exports.MainButtonSmall=c,exports.MainPlainButtonLarge=y,exports.MainPlainButtonNormal=b,exports.MainPlainButtonSmall=x,exports.Navbar=mr,exports.NavbarCta=pr,exports.NavbarHam=fr,exports.NavbarHamList=kr,exports.NavbarHamListItem=br,exports.NavbarHamMobileItem=yr,exports.NavbarHamTitle=xr,exports.NavbarList=cr,exports.NavbarLogo=gr,exports.NavbarRight=hr,exports.NavbarText=ur,exports.PageAlwaysVisible=Pr,exports.PageForty=Nr,exports.PageMobileHidden=Br,exports.PagePaddings=wr,exports.PageSamePaddings=Lr,exports.PageSixty=Dr,exports.PageTopPaddings=Sr,exports.Section=Fr,exports.SlideIn=$r,exports.Slider=_r,exports.SliderBg=qr,exports.SliderContainer=Jr,exports.SliderTitle=Qr,exports.SliderWrapper=Kr,exports.SuccessValidator=q,exports.TextareaLarge=lr,exports.TextareaNormal=dr,exports.TextareaSmall=ir,exports.Theme=Tr,exports.ThemeDark={id:"dark",background:"var(--dark)",color:"var(--blanc)",low:"var(--gloomLight)",mid:"var(--gloom)",high:"var(--gloomDark)",overlay:"var(--blancOverlay)",in:"var(--insetShine)",inFocus:"var(--insetShineFocus)",out:"var(--outShine)",outFocus:"var(--outShineFocus)"},exports.ThemeLight={id:"light",background:"var(--light)",color:"var(--black)",low:"var(--greyLight)",mid:"var(--grey)",high:"var(--greyDark)",overlay:"var(--blackOverlay)",in:"var(--insetShadow)",inFocus:"var(--insetShadowFocus)",out:"var(--outShadow)",outFocus:"var(--outShadowFocus)"},exports.TipValidator=J,exports.WhitePlainButtonLarge=L,exports.WhitePlainButtonNormal=w,exports.WhitePlainButtonSmall=$,exports.Wrapper=Rr,exports.breakPoints=nr,exports.breakSize=sr,exports.device=vr;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monica-alexandria",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "description": "A styled-components styles library for Doitforme platorm and universal tweeks to create your own new styled library for your project",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/components/layout/Theme.jsx

@@ -1,23 +1,39 @@
 import styled from "styled-components";
 
-const Theme = styled.div`
-    background: ${props => props.theme === 'dark' ? 'var(--dark)' : 'var(--white)'};
-    transition-property: background;
-    transition-duration: .5s;
-    height: 100%;
-    min-height: calc(100vh);
-    width: 100%;
+export const ThemeLight = {
+    id: 'light',
+    background: 'var(--light)',
+    color: 'var(--black)',
+    low: 'var(--greyLight)',
+    mid: 'var(--grey)',
+    high: 'var(--greyDark)',
+    overlay: 'var(--blackOverlay)',
+    in: 'var(--insetShadow)',
+    inFocus: 'var(--insetShadowFocus)',
+    out: 'var(--outShadow)',
+    outFocus: 'var(--outShadowFocus)'
+}
 
-    html{
-        color: ${props => props.theme === 'dark' ? "var(--blanc)" : "var(--black)"};
-    }
+export const ThemeDark = {
+    id: 'dark',
+    background: 'var(--dark)',
+    color: 'var(--blanc)',
+    low: 'var(--gloomLight)',
+    mid: 'var(--gloom)',
+    high: 'var(--gloomDark)',
+    overlay: 'var(--blancOverlay)',
+    in: 'var(--insetShine)',
+    inFocus: 'var(--insetShineFocus)',
+    out: 'var(--outShine)',
+    outFocus: 'var(--outShineFocus)'
+}
+
+export const Theme = styled.div`
+    min-height: 100vh;
+    width: 100%;
+    background: ${p => p.theme.background};
 
     h1,h2,h3,h4,h5,h6,p{
-        color: ${props => props.theme === 'dark' ? "var(--blanc)" : "var(--black)"};
-        transition: color .5s;
+        color: ${p => p.theme.color};
     }
-`
-
-export {
-    Theme
-}
+`