/
colorSchemeFruit.scss
119 lines (106 loc) · 5.35 KB
/
colorSchemeFruit.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 - Fruit] Light Theme
.theme-light.pt-color-scheme-peach-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: 9, 90%, 92%;
--color-orange-base-hsl: 25, 96%, 89%;
--color-yellow-base-hsl: 41, 91%, 83%;
--color-green-base-hsl: 101, 53%, 85%;
--color-mint-base-hsl: 153, 64%, 84%;
--color-cyan-base-hsl: 184, 63%, 85%;
--color-blue-base-hsl: 221, 85%, 92%;
--color-purple-base-hsl: 250, 100%, 94%;
--color-pink-base-hsl: 328, 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, 79%, 78%;
--color-orange-tint-hsl: 26, 89%, 69%;
--color-yellow-tint-hsl: 44, 70%, 56%;
--color-green-tint-hsl: 98, 52%, 58%;
--color-mint-tint-hsl: 160, 61%, 52%;
--color-cyan-tint-hsl: 184, 63%, 54%;
--color-blue-tint-hsl: 219, 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: 4, 67%, 51%;
--color-orange-text-hsl: 29, 100%, 37%;
--color-yellow-text-hsl: 39, 70%, 36%;
--color-green-text-hsl: 95, 100%, 26%;
--color-mint-text-hsl: 160, 100%, 26%;
--color-cyan-text-hsl: 185, 100%, 28%;
--color-blue-text-hsl: 221, 72%, 56%;
--color-purple-text-hsl: 259, 81%, 64%;
--color-pink-text-hsl: 319, 66%, 49%;
// Default theme variable overwrites for different shades of text used in the editor and around the UI.
--text-normal-hsl: 3, 55%, 15%;
--text-muted-hsl: 3, 55%, 20%;
--text-faint-hsl: 3, 55%, 35%;
// Default theme variable overwrites for the UI background colours.
--background-primary-hsl: 3, 55%, 98%;
--background-primary-alt-hsl: 3, 55%, 95%;
--background-secondary-hsl: 3, 55%, 93%;
--background-secondary-blur-hsl: 3, 55%, 92%;
--background-secondary-alt-hsl: 3, 55%, 74%;
// Default theme variable overwrites for shadows used on modals and popups.
--shadow-color-hsl: 3, 55%, 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 - Fruit] Dark Theme
.theme-dark.pt-color-scheme-cherry-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%, 16%;
--color-yellow-base-hsl: 43, 64%, 13%;
--color-green-base-hsl: 124, 48%, 14%;
--color-mint-base-hsl: 165, 75%, 11%;
--color-cyan-base-hsl: 196, 57%, 15%;
--color-blue-base-hsl: 225, 47%, 21%;
--color-purple-base-hsl: 272, 45%, 22%;
--color-pink-base-hsl: 326, 50%, 20%;
// Tint colours are used for the borders in the accented color areas.
--color-grey-tint-hsl: 0, 0%, 41%;
--color-red-tint-hsl: 4, 46%, 47%;
--color-orange-tint-hsl: 26, 49%, 38%;
--color-yellow-tint-hsl: 43, 53%, 32%;
--color-green-tint-hsl: 123, 39%, 33%;
--color-mint-tint-hsl: 164, 61%, 29%;
--color-cyan-tint-hsl: 196, 48%, 36%;
--color-blue-tint-hsl: 225, 42%, 50%;
--color-purple-tint-hsl: 272, 42%, 51%;
--color-pink-tint-hsl: 326, 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%, 67%;
--color-red-text-hsl: 4, 70%, 74%;
--color-orange-text-hsl: 26, 80%, 63%;
--color-yellow-text-hsl: 43, 57%, 54%;
--color-green-text-hsl: 123, 45%, 55%;
--color-mint-text-hsl: 165, 56%, 48%;
--color-cyan-text-hsl: 195, 64%, 59%;
--color-blue-text-hsl: 226, 56%, 74%;
--color-purple-text-hsl: 268, 48%, 75%;
--color-pink-text-hsl: 330, 60%, 74%;
// Default theme variable overwrites for different shades of text used in the editor and around the UI.
--text-normal-hsl: 2, 48%, 93%;
--text-muted-hsl: 2, 48%, 88%;
--text-faint-hsl: 2, 48%, 83%;
// Default theme variable overwrites for the UI background colours.
--background-primary-hsl: 2, 48%, 19%;
--background-primary-alt-hsl: 2, 48%, 29%;
--background-secondary-hsl: 2, 48%, 12%;
--background-secondary-blur-hsl: 2, 48%, 13%;
--background-secondary-alt-hsl: 2, 48%, 8%;
// Default theme variable overwrites for shadows used on modals and popups.
--shadow-color-hsl: 2, 48%, 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;
}