~wuz/wuz.sh

ref: 4815a9d347a9cad0e033e3bf834756843db669c4 wuz.sh/_includes/styles/atoms/color.scss -rw-r--r-- 1.3 KiB
4815a9d3 — Conlin Durbin Fix kit link 8 months ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
$colors: (black, cream, brand, brand-secondary, hacker-pink, electric-blue, purple-ping, relay-red);
@each $color in $colors {
	.text\:$color {
		color: var(--c-$color);
	}

	.text\:$color\:dark {
		color: darken(var(--c-$color), 10);
	}

	.text-shadow\:$color {
		text-shadow: 0.02em 0.02em 0.1em var(--c-$color);
	}

	.text\:$color\:hov:hover {
		color: var(--c-$color);
	}

	.bg\:$color {
		background-color: var(--c-$color);
	}

	.fill\:$color {
		fill: var(--c-$color);
	}

	.fill\:$color\:hover:hover {
		color: var(--c-$color);
	}

	.stroke\:$color {
		stroke: var(--c-$color);
	}

	.dark-mode.d\:bg\:$color {
		background-color: var(--c-$color);
	}

	.dark-mode.d\:text\:$color {
		color: var(--c-$color);
	}

	.dark-mode .d\:text\:$color {
		color: var(--c-$color);
	}

	.dark-mode .d\:bg\:$color {
		background-color: var(--c-$color);
	}

	.dark-mode .d\:fill\:$color {
		fill: var(--c-$color);
	}

	.dark-mode .d\:stroke\:$color {
		stroke: var(--c-$color);
	}
}

.text-gradient\:hacker {
	background: linear-gradient(45deg, var(--c-brand), var(--c-brand-secondary));
	background-size: 100% 100%;

	/* Use the text as a mask for the background. */
	/* This will show the gradient as a text color rather than element bg. */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-moz-background-clip: text;
	-moz-text-fill-color: transparent;
}