-
Notifications
You must be signed in to change notification settings - Fork 4
/
Example SCSScheme.scsscheme
134 lines (106 loc) · 2.83 KB
/
Example SCSScheme.scsscheme
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
@purpose "This is just an example file to show how you can use this tool";
// This at-rule is optional
// @name "Example SCSScheme";
// This at-rule tells CSScheme to generate a `.hidden-tmTheme` file
@hidden true;
// FLAGS
$punctuation: true;
// The color palette (from http://serennu.com/colour/colourcalculator.php)
// Don't try these at home!
$back: #202020;
$fore: #FFF;
$col0: #FF69B4; // Hotpink Colour Wheel
$col1: #FF6868; // (adjacent)
$col2: #FFB368;
$col3: #FFFE68;
$col4: #B4FF68; // (triad)
$col5: #69FF68; // (split complementary)
$col6: #68FFB3; // (complementary)
$col7: #68FFFE; // (split complementary)
$col8: #68B4FF; // (triad)
$col9: #6869FF;
$col10: #B368FF;
$col11: #FE68FF; // (adjacent)
$caret: complement($col0); // same as $col6, probably
// This '*' rule is required too, it will serve as the general-purpose settings
// such as the global background color and line highlight background color.
* {
background: $back;
foreground: $fore;
caret: $caret;
lineHighlight: transparentize($col1, 0.8);
selection: transparentize($col1, 0.7);
@each $pre in bracketContents, brackets, tags {
#{$pre}Foreground: $caret;
#{$pre}Options: underline;
}
}
@mixin contrast($col) {
foreground: $col;
background: transparentize(complement($col), .6); // or invert()
}
string {
/* This is the name that will be displayed when editing the file in a different
* color scheme editor - after compilation. Usually you won't need this. */
@name "String";
foreground: $col1;
@if $punctuation {
punctuation {
foreground: complement($col1);
}
}
&.constant {
foreground: saturate($col1, 20%);
}
}
constant {
foreground: desaturate($col2, 30%);
&.numeric {
foreground: $col2;
}
}
comment {
foreground: $col3;
fontStyle: italic;
@if $punctuation {
punctuation {
foreground: darken($col3, 40%);
}
}
}
support {
foreground: $col4;
&.constant {
foreground: desaturate($col2, 20%);
}
}
entity {
foreground: $col5;
// We need to escape the subtract operator here because SASS doesn't
// recognize it as a valid selector otherwise.
// The dumper will take care of it.
&.name \- &.name.tag {
background: transparentize(desaturate($col5, 30%), .75);
}
}
invalid {
foreground: $col7;
&.illegal {
@include contrast($col7); // alt. $back
}
}
keyword {
foreground: $col8;
}
storage {
foreground: $col9;
}
variable, support.variable {
foreground: $col10;
}
// This is an example of advanced operator usage ...
\(source.csscheme, source.scsscheme\) \& \(meta.selector \- punctuation.section.group\),
// ... and using backslashes to escape any character.
markup.heading.\1 {
fontStyle: italic;
}