-
-
Notifications
You must be signed in to change notification settings - Fork 13
/
colorSchemeTree.scss
119 lines (106 loc) · 5.39 KB
/
colorSchemeTree.scss
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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
// [Color Scheme - Forest] Light Theme
.theme-light.pt-color-scheme-pistachio-lt {
// The color variables below are comma separated HSL values. This format is necessary for using these
// variables down the line in the theme and being able to create variants with varying alpha values (HSLA).
// Base colours are used for the backgrounds in the accented color areas.
--color-grey-base-hsl: 0, 0%, 90%;
--color-red-base-hsl: 8, 100%, 93%;
--color-orange-base-hsl: 26, 89%, 89%;
--color-yellow-base-hsl: 41, 90%, 84%;
--color-green-base-hsl: 109, 52%, 86%;
--color-mint-base-hsl: 152, 65%, 85%;
--color-cyan-base-hsl: 184, 63%, 85%;
--color-blue-base-hsl: 220, 85%, 92%;
--color-purple-base-hsl: 250, 100%, 94%;
--color-pink-base-hsl: 327, 84%, 93%;
// Tint colours are used for the borders in the accented color areas.
--color-grey-tint-hsl: 0, 0%, 73%;
--color-red-tint-hsl: 7, 85%, 79%;
--color-orange-tint-hsl: 27, 83%, 69%;
--color-yellow-tint-hsl: 44, 70%, 56%;
--color-green-tint-hsl: 108, 52%, 60%;
--color-mint-tint-hsl: 160, 61%, 52%;
--color-cyan-tint-hsl: 184, 64%, 55%;
--color-blue-tint-hsl: 220, 78%, 78%;
--color-purple-tint-hsl: 252, 90%, 84%;
--color-pink-tint-hsl: 326, 76%, 79%;
// Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours
// e.g. Syntax Highlighting, Mark Highlight System, etc.
--color-grey-text-hsl: 0, 0%, 47%;
--color-red-text-hsl: 2, 71%, 52%;
--color-orange-text-hsl: 30, 100%, 36%;
--color-yellow-text-hsl: 39, 71%, 36%;
--color-green-text-hsl: 116, 42%, 37%;
--color-mint-text-hsl: 160, 100%, 27%;
--color-cyan-text-hsl: 185, 100%, 28%;
--color-blue-text-hsl: 221, 72%, 56%;
--color-purple-text-hsl: 259, 80%, 64%;
--color-pink-text-hsl: 319, 65%, 50%;
// Default theme variable overwrites for different shades of text used in the editor and around the UI.
--text-normal-hsl: 101, 35%, 15%;
--text-muted-hsl: 101, 35%, 20%;
--text-faint-hsl: 101, 35%, 35%;
// Default theme variable overwrites for the UI background colours.
--background-primary-hsl: 101, 35%, 99%;
--background-primary-alt-hsl: 101, 35%, 95%;
--background-secondary-hsl: 101, 35%, 91%;
--background-secondary-blur-hsl: 101, 35%, 90%;
--background-secondary-alt-hsl: 101, 35%, 62%;
// Default theme variable overwrites for shadows used on modals and popups.
--shadow-color-hsl: 101, 35%, 7%;
--shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0;
--shadow-l: hsla(var(--shadow-color-hsl), 4%) 0 1px 2px, hsla(var(--shadow-color-hsl), 4%) 0 2px 4px, hsla(var(--shadow-color-hsl), 4%) 0 4px 8px, hsla(var(--shadow-color-hsl), 4%) 0 6px 12px;
}
// [Color Scheme - Forest] Dark Theme
.theme-dark.pt-color-scheme-pine-dt {
// The color variables below are comma separated HSL values. This format is necessary for using these
// variables down the line in the theme and being able to create variants with varying alpha values (HSLA).
// Base colours are used for the backgrounds in the accented color areas.
--color-grey-base-hsl: 0, 0%, 17%;
--color-red-base-hsl: 2, 50%, 20%;
--color-orange-base-hsl: 26, 59%, 15%;
--color-yellow-base-hsl: 43, 66%, 13%;
--color-green-base-hsl: 122, 48%, 13%;
--color-mint-base-hsl: 164, 75%, 11%;
--color-cyan-base-hsl: 196, 56%, 14%;
--color-blue-base-hsl: 225, 48%, 21%;
--color-purple-base-hsl: 272, 45%, 21%;
--color-pink-base-hsl: 326, 52%, 19%;
// Tint colours are used for the borders in the accented color areas.
--color-grey-tint-hsl: 0, 0%, 40%;
--color-red-tint-hsl: 3, 46%, 47%;
--color-orange-tint-hsl: 26, 49%, 38%;
--color-yellow-tint-hsl: 43, 52%, 32%;
--color-green-tint-hsl: 123, 39%, 33%;
--color-mint-tint-hsl: 165, 60%, 28%;
--color-cyan-tint-hsl: 195, 48%, 35%;
--color-blue-tint-hsl: 225, 42%, 49%;
--color-purple-tint-hsl: 271, 41%, 51%;
--color-pink-tint-hsl: 327, 44%, 46%;
// Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours
// e.g. Syntax Highlighting, Mark Highlight System, etc.
--color-grey-text-hsl: 0, 0%, 66%;
--color-red-text-hsl: 5, 70%, 73%;
--color-orange-text-hsl: 26, 78%, 63%;
--color-yellow-text-hsl: 43, 56%, 53%;
--color-green-text-hsl: 123, 44%, 55%;
--color-mint-text-hsl: 165, 56%, 48%;
--color-cyan-text-hsl: 196, 63%, 58%;
--color-blue-text-hsl: 226, 56%, 74%;
--color-purple-text-hsl: 268, 48%, 74%;
--color-pink-text-hsl: 330, 59%, 73%;
// Default theme variable overwrites for different shades of text used in the editor and around the UI.
--text-normal-hsl: 123, 39%, 93%;
--text-muted-hsl: 123, 39%, 88%;
--text-faint-hsl: 123, 39%, 83%;
// Default theme variable overwrites for the UI background colours.
--background-primary-hsl: 123, 39%, 15%;
--background-primary-alt-hsl: 123, 39%, 23%;
--background-secondary-hsl: 123, 39%, 9%;
--background-secondary-blur-hsl: 123, 39%, 10%;
--background-secondary-alt-hsl: 123, 39%, 6%;
// Default theme variable overwrites for shadows used on modals and popups.
--shadow-color-hsl: 123, 39%, 7%;
--shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0;
--shadow-l: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px, hsla(var(--shadow-color-hsl), 10%) 0 2px 4px, hsla(var(--shadow-color-hsl), 10%) 0 4px 8px, hsla(var(--shadow-color-hsl), 10%) 0 6px 12px;
}