artin/tachyons
1
0
Fork 0
mirror of https://github.com/tachyons-css/tachyons.git synced 2026-02-06 14:06:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adds new gradients module. A few patterns to iron out still.

Browse Source 
Want to keep things very composable, flexible, and overrideable at
multiple levels without bloating the library too to much. With variables
I believe there is a lot of room for fun animations
This commit is contained in:
mrmrs 2023-07-12 13:53:23 -07:00
parent c97ceb67eb
commit 5324af7fe6
2 changed files with 415 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/_gradients.css Normal file
View File

@ -0,0 +1,57 @@
/*
GRADIENTS
*/
.gradient-1 {
background: linear-gradient(
var(--gradient-degree),
var(--gradient-color-1),
var(--gradient-color-2)
);
}
.gradient-2 {
background: linear-gradient(
var(--gradient-degree),
var(--gradient-color-1) var(--gradient-stop),
var(--gradient-color-2) var(--gradient-stop)
);
}
.gradient-3 {
background: repeating-linear-gradient(
var(--gradient-degree),
transparent 0px,
transparent var(--gradient-stripe-width),
var(--gradient-color-1) var(--gradient-stripe-width),
var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2))
);
}
.gradient-4 {
background: repeating-radial-gradient(
circle,
transparent 0px,
transparent var(--gradient-stripe-width),
var(--gradient-color-1) var(--gradient-stripe-width),
var(--gradient-color-1) calc(var(--gradient-stripe-width) + var(--gradient-stripe-width-2))
);
}
@media (--breakpoint-small) {
}
@media (--breakpoint-medium) {
}
@media (--breakpoint-large) {
}

358
src/_variables.css Normal file
View File

@ -0,0 +1,358 @@
/*
VARIABLES
*/
:root {
/*
* COLORS
* A balanced color system optimized for accessibility
* Theme generated with https://components.ai/theme
* The first six steps in each scale are accessible with white
*
*/
--overlay-tint-0: hsla(0, 0%, 100%, 0.035);
--overlay-tint-1: hsla(0, 0%, 100%, 0.1);
--overlay-tint-2: hsla(0, 0%, 100%, 0.19);
--overlay-tint-3: hsla(0, 0%, 100%, 0.28);
--overlay-tint-4: hsla(0, 0%, 100%, 0.36);
--overlay-tint-5: hsla(0, 0%, 100%, 0.45);
--overlay-tint-6: hsla(0, 0%, 100%, 0.55);
--overlay-tint-7: hsla(0, 0%, 100%, 0.64);
--overlay-tint-8: hsla(0, 0%, 100%, 0.73);
--overlay-tint-9: hsla(0, 0%, 100%, 0.815);
--overlay-tint-10: hsla(0, 0%, 100%, 0.895);
--overlay-tint-11: hsla(0, 0%, 100%, 0.94);
--overlay-shadow-0: hsla(0, 0%, 0%, 0.94);
--overlay-shadow-1: hsla(0, 0%, 0%, 0.895);
--overlay-shadow-2: hsla(0, 0%, 0%, 0.815);
--overlay-shadow-3: hsla(0, 0%, 0%, 0.73);
--overlay-shadow-4: hsla(0, 0%, 0%, 0.64);
--overlay-shadow-5: hsla(0, 0%, 0%, 0.55);
--overlay-shadow-6: hsla(0, 0%, 0%, 0.45);
--overlay-shadow-7: hsla(0, 0%, 0%, 0.36);
--overlay-shadow-8: hsla(0, 0%, 0%, 0.28);
--overlay-shadow-9: hsla(0, 0%, 0%, 0.19);
--overlay-shadow-10: hsla(0, 0%, 0%, 0.1);
--overlay-shadow-11: hsla(0, 0%, 0%, 0.035);
--gray-0: #000000;
--gray-1: #171717;
--gray-2: #2f2f2f;
--gray-3: #464646;
--gray-4: #5e5e5e;
--gray-5: #757575;
--gray-6: #8c8c8c;
--gray-7: #a3a3a3;
--gray-8: #bababa;
--gray-9: #d1d1d1;
--gray-10: #e8e8e8;
--gray-11: #ffffff;
--slate-gray-0: #09090b;
--slate-gray-1: #1d1d22;
--slate-gray-2: #313138;
--slate-gray-3: #45444f;
--slate-gray-4: #595866;
--slate-gray-5: #6d6c7d;
--slate-gray-6: #838292;
--slate-gray-7: #9a9aa7;
--slate-gray-8: #b2b1bb;
--slate-gray-9: #c9c9d0;
--slate-gray-10: #e1e0e4;
--slate-gray-11: #f8f8f9;
--blue-0: #030b18;
--blue-1: #071e3f;
--blue-2: #0c3166;
--blue-3: #10448d;
--blue-4: #1556b4;
--blue-5: #1969db;
--blue-6: #317fed;
--blue-7: #5797f0;
--blue-8: #7daef4;
--blue-9: #a3c6f7;
--blue-10: #c9ddfa;
--blue-11: #eff5fe;
--indigo-0: #080614;
--indigo-1: #19143f;
--indigo-2: #2a216a;
--indigo-3: #3a2e95;
--indigo-4: #4b3bc0;
--indigo-5: #5c49eb;
--indigo-6: #725fff;
--indigo-7: #8c7cff;
--indigo-8: #a69aff;
--indigo-9: #c0b7ff;
--indigo-10: #dad5ff;
--indigo-11: #f4f3ff;
--violet-0: #110517;
--violet-1: #2e0d3e;
--violet-2: #4b1465;
--violet-3: #681c8c;
--violet-4: #8424b3;
--violet-5: #a12cda;
--violet-6: #b543ec;
--violet-7: #c366f0;
--violet-8: #d089f3;
--violet-9: #deabf7;
--violet-10: #eccefa;
--violet-11: #f9f0fe;
--magenta-0: #13040f;
--magenta-1: #350a2c;
--magenta-2: #581148;
--magenta-3: #7b1765;
--magenta-4: #9e1e82;
--magenta-5: #c1249e;
--magenta-6: #d43cb2;
--magenta-7: #dc61c1;
--magenta-8: #e485cf;
--magenta-9: #eca9dd;
--magenta-10: #f4ceec;
--magenta-11: #fcf2fa;
--red-0: #120205;
--red-1: #39050f;
--red-2: #5f0819;
--red-3: #860b24;
--red-4: #ac0e2e;
--red-5: #d31138;
--red-6: #e7284e;
--red-7: #ec506f;
--red-8: #f07790;
--red-9: #f49fb0;
--red-10: #f9c7d1;
--red-11: #fdeef1;
--red-orange-0: #190b05;
--red-orange-1: #3d1307;
--red-orange-2: #601b0a;
--red-orange-3: #84240c;
--red-orange-4: #a72c0e;
--red-orange-5: #cb3411;
--red-orange-6: #ee3c13;
--red-orange-7: #fe562f;
--red-orange-8: #fe7d5e;
--red-orange-9: #ffa48e;
--red-orange-10: #ffccbe;
--red-orange-11: #fff3ee;
--orange-0: #150d04;
--orange-1: #2e1c08;
--orange-2: #472a0c;
--orange-3: #603910;
--orange-4: #794714;
--orange-5: #a65d13;
--orange-6: #d37413;
--orange-7: #ff8a14;
--orange-8: #ffa54a;
--orange-9: #ffc081;
--orange-10: #ffdab7;
--orange-11: #fff5ed;
--gold-0: #140e05;
--gold-1: #2c1f0a;
--gold-2: #432f0e;
--gold-3: #5b4013;
--gold-4: #725118;
--gold-5: #946818;
--gold-6: #d4950d;
--gold-7: #eeb028;
--gold-8: #f2c259;
--gold-9: #f7d38a;
--gold-10: #fbe5bc;
--gold-11: #fff5e9;
--yellow-0: #111006;
--yellow-1: #252405;
--yellow-2: #3a3804;
--yellow-3: #4e4d03;
--yellow-4: #636101;
--yellow-5: #777500;
--yellow-6: #ccc500;
--yellow-7: #fcf433;
--yellow-8: #fdf67a;
--yellow-9: #fdf89b;
--yellow-10: #fef9bb;
--yellow-11: #fefadb;
--green-0: #091108;
--green-1: #0f2611;
--green-2: #153c1a;
--green-3: #1b5122;
--green-4: #21662b;
--green-5: #25833a;
--green-6: #26b056;
--green-7: #35d272;
--green-8: #63dd90;
--green-9: #90e8ae;
--green-10: #bdf3cc;
--green-11: #eafeea;
--teal-0: #07100c;
--teal-1: #0c231a;
--teal-2: #113628;
--teal-3: #164936;
--teal-4: #1b5b45;
--teal-5: #177f63;
--teal-6: #12a282;
--teal-7: #2abb9b;
--teal-8: #5acab1;
--teal-9: #8bdac7;
--teal-10: #bbe9dc;
--teal-11: #ecf8f2;
--cyan-0: #0a1211;
--cyan-1: #102425;
--cyan-2: #153639;
--cyan-3: #1b484c;
--cyan-4: #215a60;
--cyan-5: #247981;
--cyan-6: #24a9b6;
--cyan-7: #28d6e6;
--cyan-8: #57e0ec;
--cyan-9: #85eaf2;
--cyan-10: #b4f5f9;
--cyan-11: #e2ffff;
--transparent: hsla(0,0,0,0);
--degrees-1: 0;
--degrees-2: 45deg;
--degrees-3: 90deg;
--degrees-4: 135deg;
--degrees-5: 180deg;
--degrees-6: 225deg;
--degrees-7: 270deg;
--degrees-8: 315deg;
--gradient-degree-0: var(--degrees-1, 0);
--gradient-degree: var(--degrees-2, 45deg);
--gradient-degree-2: var(--degrees-4, 135deg);
--gradient-stripe-width: 12px;
--gradient-stripe-width-2: var(--border-width-1);
--gradient-color-1: var(--blue-2);
--gradient-color-2: var(--magenta-6);
--gradient-color-3: var(--red-5);
--gradient-color-4: var(--indigo-5);
--gradient-color-5: var(--violet-0);
--gradient-color-6: var(--violet-5);
--gradient-color-7: var(--magenta-0);
--gradient-color-8: var(--magenta-5);
--gradient-color-9: var(--red-0);
--gradient-color-10: var(--red-5);
--gradient-color-11: var(--red-orange-0);
--gradient-color-12: var(--red-orange-5);
--gradient-color-13: var(--orange-0);
--gradient-color-14: var(--orange-5);
--gradient-color-15: var(--gold-0);
--gradient-color-16: var(--gold-5);
--gradient-color-17: var(--yellow-0);
--gradient-color-18: var(--yellow-5);;
--gradient-color-19: var(--green-0);
--gradient-color-20: var(--green-5);
--gradient-color-21: var(--teal-0);
--gradient-color-22: var(--teal-5);
--gradient-color-23: var(--cyan-0);
--gradient-color-24: var(--cyan-5);
--gradient-stop: 50%;
--font-size-0: 10px;
--font-size-1: 12px;
--font-size-2: 14px;
--font-size-3: 16px;
--font-size-4: 20px;
--font-size-5: 24px;
--font-size-6: 48px;
--font-size-7: 64px;
--font-size-8: 96px;
--font-size-9: 128px;
--font-size-10: 192px;
--font-size-11: 256px;
--border-radius-0: 0;
--border-radius-1: 4px;
--border-radius-2: 6px;
--border-radius-3: 8px;
--border-radius-4: 12px;
--border-radius-5: 16px;
--border-radius-6: 20px;
--border-radius-7: 24px;
--border-radius-8: 32px;
--border-radius-9: 48px;
--border-radius-10: 64px;
--border-radius-11: 9999px;
--border-width-0: 0;
--border-width-1: 1px;
--border-width-2: 2px;
--border-width-3: 4px;
--border-width-4: 8px;
--border-width-5: 16px;
--border-width: var(--border-width-1,1px);
--border-color: var(--gray-5, gray);
--line-height-solid: 1;
--line-height-heading: 1.25;
--line-height-body: 1.5;
--letter-spacing-tracked: 0.1em;
--letter-spacing-tight: -0.05em;
--letter-spacing-large: 0.25em;
--font-family-heading: Inter, sans-serif;
--font-family-body: Inter, sans-serif;
--font-family-mono: Inconsolata, monospace;
--spacing-0: 0;
--spacing-1: 4px;
--spacing-2: 8px;
--spacing-3: 16px;
--spacing-4: 32px;
--spacing-5: 64px;
--spacing-6: 128px;
--spacing-7: 256px;
--spacing-8: 512px;
--size-0: 0;
--size-1: 1rem;
--size-2: 2rem;
--size-3: 3rem;
--size-4: 4rem;
--size-5: 8rem;
--size-6: 16rem;
--size-7: 32rem;
--size-8: 64rem;
--shadow-color: 0 0 0;
--shadow-color-invert: 255 255 255;
--shadow-border-width: 1px;
--shadow-opacity: .25;
// Opacity scale
--opacity-0: 0;
--opacity-1: .025;
--opacity-2: .05;
--opacity-3: .1;
--opacity-4: .2;
--opacity-5: .3;
--opacity-6: .4;
--opacity-7: .5;
--opacity-8: .6;
--opacity-9: .7;
--opacity-10: .8;
--opacity-11: .9;
--opacity-12: 1;
--duration-0: 125ms;
--duration-1: 250ms;
--duration-2: 500ms;
--easing-function-0: cubic-bezier(0.543, 1.086, 0.5, -0.383);
--easing-function-1: ease;
--easing-function-2: ease-out;
--easing-function-3: ease-in-out;
--easing-function-4: linear;
}
@media (prefers-color-scheme: dark) {
--shadow-color: 255 255 255;
}