UNPKG

5.83 kBCSSView Raw
1/*
2
3 SKINS
4 Docs: http://tachyons.io/docs/themes/skins/
5
6 Classes for setting foreground and background colors on elements.
7 If you haven't declared a border color, but set border on an element, it will
8 be set to the current text color.
9
10*/
11
12/* Text colors */
13
14.black-90 { color: var(--black-90); }
15.black-80 { color: var(--black-80); }
16.black-70 { color: var(--black-70); }
17.black-60 { color: var(--black-60); }
18.black-50 { color: var(--black-50); }
19.black-40 { color: var(--black-40); }
20.black-30 { color: var(--black-30); }
21.black-20 { color: var(--black-20); }
22.black-10 { color: var(--black-10); }
23.black-05 { color: var(--black-05); }
24
25.white-90 { color: var(--white-90); }
26.white-80 { color: var(--white-80); }
27.white-70 { color: var(--white-70); }
28.white-60 { color: var(--white-60); }
29.white-50 { color: var(--white-50); }
30.white-40 { color: var(--white-40); }
31.white-30 { color: var(--white-30); }
32.white-20 { color: var(--white-20); }
33.white-10 { color: var(--white-10); }
34
35.black { color: var(--black); }
36.near-black { color: var(--near-black); }
37.dark-gray { color: var(--dark-gray); }
38.mid-gray { color: var(--mid-gray); }
39.gray { color: var(--gray); }
40.silver { color: var(--silver); }
41.light-silver { color: var(--light-silver); }
42.moon-gray { color: var(--moon-gray); }
43.light-gray { color: var(--light-gray); }
44.near-white { color: var(--near-white); }
45.white { color: var(--white); }
46
47.dark-red { color: var(--dark-red); }
48.red { color: var(--red); }
49.light-red { color: var(--light-red); }
50.orange { color: var(--orange); }
51.gold { color: var(--gold); }
52.yellow { color: var(--yellow); }
53.light-yellow { color: var(--light-yellow); }
54.purple { color: var(--purple); }
55.light-purple { color: var(--light-purple); }
56.dark-pink { color: var(--dark-pink); }
57.hot-pink { color: var(--hot-pink); }
58.pink { color: var(--pink); }
59.light-pink { color: var(--light-pink); }
60.dark-green { color: var(--dark-green); }
61.green { color: var(--green); }
62.light-green { color: var(--light-green); }
63.navy { color: var(--navy); }
64.dark-blue { color: var(--dark-blue); }
65.blue { color: var(--blue); }
66.light-blue { color: var(--light-blue); }
67.lightest-blue { color: var(--lightest-blue); }
68.washed-blue { color: var(--washed-blue); }
69.washed-green { color: var(--washed-green); }
70.washed-yellow { color: var(--washed-yellow); }
71.washed-red { color: var(--washed-red); }
72.color-inherit { color: inherit; }
73
74.bg-black-90 { background-color: var(--black-90); }
75.bg-black-80 { background-color: var(--black-80); }
76.bg-black-70 { background-color: var(--black-70); }
77.bg-black-60 { background-color: var(--black-60); }
78.bg-black-50 { background-color: var(--black-50); }
79.bg-black-40 { background-color: var(--black-40); }
80.bg-black-30 { background-color: var(--black-30); }
81.bg-black-20 { background-color: var(--black-20); }
82.bg-black-10 { background-color: var(--black-10); }
83.bg-black-05 { background-color: var(--black-05); }
84.bg-white-90 { background-color: var(--white-90); }
85.bg-white-80 { background-color: var(--white-80); }
86.bg-white-70 { background-color: var(--white-70); }
87.bg-white-60 { background-color: var(--white-60); }
88.bg-white-50 { background-color: var(--white-50); }
89.bg-white-40 { background-color: var(--white-40); }
90.bg-white-30 { background-color: var(--white-30); }
91.bg-white-20 { background-color: var(--white-20); }
92.bg-white-10 { background-color: var(--white-10); }
93
94
95
96/* Background colors */
97
98.bg-black { background-color: var(--black); }
99.bg-near-black { background-color: var(--near-black); }
100.bg-dark-gray { background-color: var(--dark-gray); }
101.bg-mid-gray { background-color: var(--mid-gray); }
102.bg-gray { background-color: var(--gray); }
103.bg-silver { background-color: var(--silver); }
104.bg-light-silver { background-color: var(--light-silver); }
105.bg-moon-gray { background-color: var(--moon-gray); }
106.bg-light-gray { background-color: var(--light-gray); }
107.bg-near-white { background-color: var(--near-white); }
108.bg-white { background-color: var(--white); }
109.bg-transparent { background-color: var(--transparent); }
110
111.bg-dark-red { background-color: var(--dark-red); }
112.bg-red { background-color: var(--red); }
113.bg-light-red { background-color: var(--light-red); }
114.bg-orange { background-color: var(--orange); }
115.bg-gold { background-color: var(--gold); }
116.bg-yellow { background-color: var(--yellow); }
117.bg-light-yellow { background-color: var(--light-yellow); }
118.bg-purple { background-color: var(--purple); }
119.bg-light-purple { background-color: var(--light-purple); }
120.bg-dark-pink { background-color: var(--dark-pink); }
121.bg-hot-pink { background-color: var(--hot-pink); }
122.bg-pink { background-color: var(--pink); }
123.bg-light-pink { background-color: var(--light-pink); }
124.bg-dark-green { background-color: var(--dark-green); }
125.bg-green { background-color: var(--green); }
126.bg-light-green { background-color: var(--light-green); }
127.bg-navy { background-color: var(--navy); }
128.bg-dark-blue { background-color: var(--dark-blue); }
129.bg-blue { background-color: var(--blue); }
130.bg-light-blue { background-color: var(--light-blue); }
131.bg-lightest-blue { background-color: var(--lightest-blue); }
132.bg-washed-blue { background-color: var(--washed-blue); }
133.bg-washed-green { background-color: var(--washed-green); }
134.bg-washed-yellow { background-color: var(--washed-yellow); }
135.bg-washed-red { background-color: var(--washed-red); }
136.bg-inherit { background-color: inherit; }