SCWeb/colors.ts at master · TheAnimatrix/SCWeb · GitHub

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
71
72
73
74
75
76
77
78
79
80
export const custom_colors = {
	// Base colors
	transparent: 'transparent',
	current: 'currentColor',

	// Theme colors
	accent: {
		DEFAULT: 'hsl(205, 100%, 75%)',  // Primary accent color - bright blue
		light: 'hsla(205, 100%, 75%, 0.15)',
		lighter: 'hsla(205, 100%, 75%, 0.06)',
		dark: 'hsla(205, 100%, 75%, 0.5)',
	},

	// Background colors
	background: {
		DEFAULT: 'hsl(0, 0%, 5%)',
		light: 'hsl(0, 0%, 8%)',
		lighter: 'hsl(0, 0%, 15%)',
		lightest: 'hsl(0, 0%, 21%)',
	},

	// Semantic colors
	success: '#4CAF50',
	error: '#C53333',
	warning: '#FFA726',
	info: '#00BCD4',

	// SC Theme Colors
	sc: {
		// Background shades
		bg: '#232323',
		bgl1: '#2c2c2c',
		bgl2: '#343434',
		bgl3: '#383838',

		// Blue shades
		blue: 'hsl(213, 99%, 71%)',
		blued1: 'hsl(213, 49%, 12%)',
		blued2: 'hsl(213, 50%, 16%)',
		blued3: 'hsl(213, 43%, 22%)',
		bluek1: 'hsl(213, 44%, 5%)',
		bluek2: 'hsl(213, 57%, 11%)',
		bluel0: 'hsl(213, 92%, 73%)',
		bluel1: 'hsl(213, 92%, 86%)',
		bluel2: 'hsl(213, 92%, 93%)',

		// Purple shades
		purple: 'hsl(225, 100%, 61.18%)',
		purpled1: 'hsl(225, 49.21%, 12.35%)',
		purpled2: 'hsl(225, 43.86%, 22.35%)',
		purpled3: 'hsl(225, 43.86%, 22.35%)',
		purpled4: 'hsl(225, 48.39%, 30.39%)',
		purpled0: 'hsl(225, 71.72%, 61.18%)',
		purplel0: 'hsl(225, 92.59%, 73.53%)',
		purplel1: 'hsl(225, 100%, 85.69%)',
		purplel2: 'hsl(225, 100%, 96.27%)',
		purplek1: 'hsl(225, 44.83%, 7%)',
		purplek2: 'hsl(225, 57.14%, 12%)',

		// Orange shades
		orange: '#e58529',
		oranged1: '#1c120a',
		oranged2: '#2a1f1a',
		oranged3: '#3B2F4A',
		oranged0: '#8955e3',
		orangel0: '#ab7dfa',
		orangel1: '#f4b679',
		orangel2: '#F4ECFF',

		// Cyan shades
		cyan: '#93CFC0',
		cyanl1: '#B3FFE0',
		cyand1: '#182322',

		// Red shades
		red: '#C53333',
		redd1: '#171313',
		redl1: 'hsl(5, 60%, 88%)'
	}
};