roobie
Version:
A collection of CSS classes to keep you writing business logic in your HTML. Easily build maintainable web & mobile applications with 100s of pre-built CSS classes at your fingertips.
106 lines • 3.29 kB
CSS
[theme="light"] {
/*Base*/
--primary: rgb(21, 206, 166);
--secondary: var(--bg4);
/*Status*/
--success: rgba(81, 190, 73, 0.7);
--warning: rgba(235, 119, 42, .7);
--danger: rgba(248, 62, 52, .7);
--info: rgba(152, 217, 243, .7);
/*Shade 1*/
--white: rgb(240, 240, 240);
--black: rgb(20, 20, 20);
--grey: rgb(199, 199, 199);
--red: rgb(167, 32, 32);
--orange: rgb(243, 162, 11);
--yellow: rgb(221, 221, 25);
--green: rgb(19, 172, 82);
--blue: rgb(23, 23, 192);
--indigo: rgb(117, 13, 117);
--violet: rgb(184, 88, 184);
/* Shade 2*/
--white2: rgba(240, 240, 240, .7);
--black2: rgba(20, 20, 20, .7);
--grey2: rgba(199, 199, 199, .7);
--red2: rgb(182, 26, 26, .7);
--orange2: rgba(243, 162, 11, .7);
--yellow2: rgba(221, 221, 25, .7);
--green2: rgba(19, 172, 82, .7);
--blue2: rgba(23, 23, 192, .7);
--indigo2: rgba(117, 13, 117, .7);
--violet2: rgba(184, 88, 184, .7);
/* Shade 3*/
--white3: rgba(240, 240, 240, .5);
--black3: rgba(20, 20, 20, .5);
--grey3: rgba(199, 199, 199, .5);
--red3: rgba(182, 26, 26, .5);
--orange3: rgba(243, 162, 11, .5);
--yellow3: rgba(221, 221, 25, .5);
--green3: rgba(19, 172, 82, .5);
--blue3: rgba(23, 23, 192, .5);
--indigo3: rgba(117, 13, 117, .5);
--violet3: rgba(184, 88, 184, .5);
/*Text*/
--t1: rgb(20, 20, 20);
--t2: rgb(35, 35, 35);
--t3: rgb(50, 50, 50);
--t4: rgb(65, 65, 65);
--t5: rgb(80, 80, 80);
--t6: rgb(95, 95, 95);
/*Background*/
--bg1: rgb(240, 240, 240);
--bg2: rgb(230, 230, 230);
--bg3: rgb(220, 220, 220);
--bg4: rgb(210, 210, 210);
--bg5: rgb(200, 200, 200);
--bg6: rgb(190, 190, 190);
/*Heading*/
--h1: var(--t1);
--h2: var(--t1);
--h3: var(--t2);
--h4: var(--t2);
--h5: var(--t5);
--h6: var(--t5);
/*Link*/
--a1: var(--red2);
--a2: white;
--a3: white;
--a4: white;
--a5: white;
--a6: white;
/*Paragraph*/
--p1: var(--t2);
--p2: var(--t2);
--p3: var(--t2);
--p4: var(--t2);
--p5: var(--t2);
--p6: var(--t2);
/*Border*/
--bdr1: .5px solid var(--bg5);
--bdr2: 1px solid var(--bg5);
--bdr3: 2px solid var(--bg5);
--bdr4: 3px solid var(--bg5);
--bdr5: 5px solid var(--bg5);
--bdr6: 7px solid var(--bg5);
/*Inset*/
--in1: inset 0px 0px 1px 1px rgb(17, 17, 17, .1);
--in2: inset 0px 0px 2px 2px rgb(17, 17, 17, .2);
--in3: inset 0px 0px 3px 3px rgb(17, 17, 17, .2);
--in4: inset 0px 0px 3px 3px rgb(17, 17, 17, .3);
--in5: inset 0px 0px 3px 3px rgb(17, 17, 17, .3);
--in6: inset 0px 0px 3px 3px rgb(17, 17, 17, .3);
/*Box Shadow*/
--box1: 0 0 1px 1px rgb(17, 17, 17, .1);
--box2: 0 0 2px 2px rgb(17, 17, 17, .2);
--box3: 0 0 3px 3px rgb(17, 17, 17, .2);
--box4: 0 0 3px 3px rgb(17, 17, 17, .3);
--box5: 0 0 4px 4px rgb(17, 17, 17, .3);
--box6: 0 0 5px 5px rgb(17, 17, 17, .3);
/*Text Shadow*/
--txts1: 1px 1px rgb(17, 17, 17, .1);
--txts2: 2px 2px rgb(17, 17, 17, .2);
--txts3: 3px 3px rgb(17, 17, 17, .2);
--txts4: 3px 3px rgb(17, 17, 17, .3);
--txts5: 4px 4px rgb(17, 17, 17, .3);
--txts6: 5px 5px rgb(17, 17, 17, .3);
}