Skip to content

Commit 9831e06

Browse files
thomasheyenbrockthomasheyenbrock
committed
use hsl values and reduce number of CSS variables (#2637)
1 parent 7a4e85f commit 9831e06

28 files changed

+186
-211
lines changed

‎packages/graphiql-react/src/editor/style/auto-insertion.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,6 @@
1313

1414
15%,
1515
85% {
16-
background-color: var(--color-orche-background);
16+
background-color: hsla(var(--color-orche), 0.07);
1717
}
1818
}

‎packages/graphiql-react/src/editor/style/codemirror.css

+27-27
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
.CodeMirror,
1717
.CodeMirror-gutters {
1818
background: none;
19-
background-color: var(--editor-background, var(--color-neutral-0));
19+
background-color: var(--editor-background, hsl(var(--color-base)));
2020
}
2121

2222
/* No padding around line number */
@@ -35,94 +35,94 @@
3535

3636
.cm-s-graphiql {
3737
/* Default to punctuation */
38-
color: var(--color-neutral-60);
38+
color: hsla(var(--color-neutral), 0.6);
3939

4040
/* OperationType, `fragment`, `on` */
4141
& .cm-keyword {
42-
color: var(--color-pink);
42+
color: hsl(var(--color-pink));
4343
}
4444
/* Name (OperationDefinition), FragmentName */
4545
& .cm-def {
46-
color: var(--color-teal);
46+
color: hsl(var(--color-teal));
4747
}
4848
/* Punctuator (except `$` and `@`) */
4949
& .cm-punctuation {
50-
color: var(--color-neutral-60);
50+
color: hsla(var(--color-neutral), 0.6);
5151
}
5252
/* Variable */
5353
& .cm-variable {
54-
color: var(--color-purple);
54+
color: hsl(var(--color-purple));
5555
}
5656
/* NamedType */
5757
& .cm-atom {
58-
color: var(--color-teal);
58+
color: hsl(var(--color-teal));
5959
}
6060
/* IntValue, FloatValue */
6161
& .cm-number {
62-
color: var(--color-green);
62+
color: hsl(var(--color-green));
6363
}
6464
/* StringValue */
6565
& .cm-string {
66-
color: var(--color-orche);
66+
color: hsl(var(--color-orche));
6767
}
6868
/* BooleanValue */
6969
& .cm-builtin {
70-
color: var(--color-green);
70+
color: hsl(var(--color-green));
7171
}
7272
/* EnumValue */
7373
& .cm-string-2 {
74-
color: var(--color-purple);
74+
color: hsl(var(--color-purple));
7575
}
7676
/* Name (ObjectField, Argument) */
7777
& .cm-attribute {
78-
color: var(--color-blue);
78+
color: hsl(var(--color-blue));
7979
}
8080
/* Name (Directive) */
8181
& .cm-meta {
82-
color: var(--color-teal);
82+
color: hsl(var(--color-teal));
8383
}
8484
/* Name (Alias, Field without Alias) */
8585
& .cm-property {
86-
color: var(--color-blue);
86+
color: hsl(var(--color-blue));
8787
}
8888
/* Name (Field with Alias) */
8989
& .cm-qualifier {
90-
color: var(--color-purple);
90+
color: hsl(var(--color-purple));
9191
}
9292
/* Comment */
9393
& .cm-comment {
94-
color: var(--color-neutral-40);
94+
color: hsla(var(--color-neutral), 0.4);
9595
}
9696
/* Whitespace */
9797
& .cm-ws {
98-
color: var(--color-neutral-40);
98+
color: hsla(var(--color-neutral), 0.4);
9999
}
100100
/* Invalid characters */
101101
& .cm-invalidchar {
102-
color: var(--color-red);
102+
color: hsl(var(--color-red));
103103
}
104104

105105
/* Cursor */
106106
& .CodeMirror-cursor {
107-
border-left: 2px solid var(--color-neutral-60);
107+
border-left: 2px solid hsla(var(--color-neutral), 0.6);
108108
}
109109

110110
/* Color for line numbers and fold-gutters */
111111
& .CodeMirror-linenumber {
112-
color: var(--color-neutral-40);
112+
color: hsla(var(--color-neutral), 0.4);
113113
}
114114
}
115115

116116
/* Matching bracket colors */
117117
div.CodeMirror span.CodeMirror-matchingbracket,
118118
div.CodeMirror span.CodeMirror-nonmatchingbracket {
119-
color: var(--color-neutral-40);
119+
color: hsla(var(--color-neutral), 0.4);
120120
}
121121

122122
/* Selected text blocks */
123123
.CodeMirror-selected,
124124
.CodeMirror-focused .CodeMirror-selected {
125-
background: var(--color-neutral-15);
125+
background: hsla(var(--color-neutral), 0.15);
126126
}
127127

128128
/* Position the search dialog */
@@ -137,12 +137,12 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
137137
z-index: 6;
138138
}
139139
.CodeMirror-dialog-top {
140-
border-bottom: 1px solid var(--color-neutral-15);
140+
border-bottom: 1px solid hsla(var(--color-neutral), 0.15);
141141
padding-bottom: var(--px-12);
142142
top: 0;
143143
}
144144
.CodeMirror-dialog-bottom {
145-
border-top: 1px solid var(--color-neutral-15);
145+
border-top: 1px solid hsla(var(--color-neutral), 0.15);
146146
bottom: 0;
147147
padding-top: var(--px-12);
148148
}
@@ -154,17 +154,17 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
154154

155155
/* Style the input field for searching */
156156
.CodeMirror-dialog input {
157-
border: 1px solid var(--color-neutral-15);
157+
border: 1px solid hsla(var(--color-neutral), 0.15);
158158
border-radius: var(--border-radius-4);
159159
padding: var(--px-4);
160160
}
161161
.CodeMirror-dialog input:focus {
162-
outline: var(--color-pink) solid 2px;
162+
outline: hsl(var(--color-pink)) solid 2px;
163163
}
164164

165165
/* Set the highlight color for search results */
166166
.cm-searching {
167-
background-color: var(--color-orche-background);
167+
background-color: hsla(var(--color-orche), 0.07);
168168
/**
169169
* When cycling through search results, CodeMirror overlays the current
170170
* selection with another element that has the .CodeMirror-selected class

‎packages/graphiql-react/src/editor/style/fold.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
}
66

77
.CodeMirror-foldmarker {
8-
background-color: var(--color-blue);
8+
background-color: hsl(var(--color-blue));
99
border-radius: var(--border-radius-4);
10-
color: var(--color-neutral-0);
10+
color: hsl(var(--color-base));
1111
font-family: inherit;
1212
margin: 0 var(--px-4);
1313
padding: 0 var(--px-8);
@@ -16,7 +16,7 @@
1616

1717
.CodeMirror-foldgutter-open,
1818
.CodeMirror-foldgutter-folded {
19-
color: var(--color-neutral-40);
19+
color: hsla(var(--color-neutral), 0.4);
2020

2121
&::after {
2222
margin: 0 var(--px-2);

‎packages/graphiql-react/src/editor/style/hint.css

+8-8
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/* Popup styles */
44
.CodeMirror-hints {
5-
background: var(--color-neutral-0);
5+
background: hsl(var(--color-base));
66
border: none;
77
border-radius: var(--border-radius-8);
88
box-shadow: var(--box-shadow);
@@ -18,7 +18,7 @@
1818
/* Autocomplete items */
1919
.CodeMirror-hint {
2020
border-radius: var(--border-radius-4);
21-
color: var(--color-neutral-60);
21+
color: hsla(var(--color-neutral), 0.6);
2222
grid-column: 1 / 2;
2323
margin: var(--px-4);
2424
/* Override element style added by codemirror */
@@ -29,13 +29,13 @@
2929
}
3030
}
3131
li.CodeMirror-hint-active {
32-
background: var(--color-pink-background);
33-
color: var(--color-pink);
32+
background: hsla(var(--color-pink), 0.1);
33+
color: hsl(var(--color-pink));
3434
}
3535

3636
/* Sidebar with additional information */
3737
.CodeMirror-hint-information {
38-
border-left: 1px solid var(--color-neutral-15);
38+
border-left: 1px solid hsla(var(--color-neutral), 0.15);
3939
grid-column: 2 / 3;
4040
grid-row: 1 / 99999;
4141
/* Same as the popup as a whole minus padding */
@@ -52,9 +52,9 @@ li.CodeMirror-hint-active {
5252
font-weight: var(--font-weight-medium);
5353
}
5454
.CodeMirror-hint-information-type-name-pill {
55-
border: 1px solid var(--color-neutral-40);
55+
border: 1px solid hsla(var(--color-neutral), 0.4);
5656
border-radius: var(--border-radius-4);
57-
color: var(--color-neutral-60);
57+
color: hsla(var(--color-neutral), 0.6);
5858
margin-left: var(--px-6);
5959
padding: var(--px-4);
6060
}
@@ -67,6 +67,6 @@ li.CodeMirror-hint-active {
6767
}
6868
}
6969
.CodeMirror-hint-information-description {
70-
color: var(--color-neutral-60);
70+
color: hsla(var(--color-neutral), 0.6);
7171
margin-top: var(--px-12);
7272
}

‎packages/graphiql-react/src/editor/style/info.css

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/* Popup styles */
22
.CodeMirror-info {
3-
background-color: var(--color-neutral-0);
3+
background-color: hsl(var(--color-base));
44
border-radius: var(--border-radius-8);
55
box-shadow: var(--box-shadow);
6-
color: var(--color-neutral-100);
6+
color: hsla(var(--color-neutral), 1);
77
max-height: 300px;
88
max-width: 400px;
99
opacity: 0;
@@ -42,16 +42,16 @@
4242

4343
/* Type names */
4444
& .type-name-pill {
45-
border: 1px solid var(--color-neutral-40);
45+
border: 1px solid hsla(var(--color-neutral), 0.4);
4646
border-radius: var(--border-radius-4);
47-
color: var(--color-neutral-60);
47+
color: hsla(var(--color-neutral), 0.6);
4848
margin-left: var(--px-6);
4949
padding: var(--px-4);
5050
}
5151

5252
/* Descriptions */
5353
& .info-description {
54-
color: var(--color-neutral-60);
54+
color: hsla(var(--color-neutral), 0.6);
5555
margin-top: var(--px-12);
5656
overflow: hidden;
5757
}

‎packages/graphiql-react/src/editor/style/lint.css

+13-13
Original file line numberDiff line numberDiff line change
@@ -12,67 +12,67 @@
1212
background-position: 0 95%;
1313
}
1414
.cm-s-graphiql .CodeMirror-lint-mark-error {
15-
color: var(--color-red);
15+
color: hsl(var(--color-red));
1616
}
1717
.CodeMirror-lint-mark-error {
1818
background-image: linear-gradient(
1919
45deg,
2020
transparent 65%,
21-
var(--color-red) 80%,
21+
hsl(var(--color-red)) 80%,
2222
transparent 90%
2323
),
2424
linear-gradient(
2525
135deg,
2626
transparent 5%,
27-
var(--color-red) 15%,
27+
hsl(var(--color-red)) 15%,
2828
transparent 25%
2929
),
3030
linear-gradient(
3131
135deg,
3232
transparent 45%,
33-
var(--color-red) 55%,
33+
hsl(var(--color-red)) 55%,
3434
transparent 65%
3535
),
3636
linear-gradient(
3737
45deg,
3838
transparent 25%,
39-
var(--color-red) 35%,
39+
hsl(var(--color-red)) 35%,
4040
transparent 50%
4141
);
4242
}
4343
.cm-s-graphiql .CodeMirror-lint-mark-warning {
44-
color: var(--color-orche);
44+
color: hsl(var(--color-orche));
4545
}
4646
.CodeMirror-lint-mark-warning {
4747
background-image: linear-gradient(
4848
45deg,
4949
transparent 65%,
50-
var(--color-orche) 80%,
50+
hsl(var(--color-orche)) 80%,
5151
transparent 90%
5252
),
5353
linear-gradient(
5454
135deg,
5555
transparent 5%,
56-
var(--color-orche) 15%,
56+
hsl(var(--color-orche)) 15%,
5757
transparent 25%
5858
),
5959
linear-gradient(
6060
135deg,
6161
transparent 45%,
62-
var(--color-orche) 55%,
62+
hsl(var(--color-orche)) 55%,
6363
transparent 65%
6464
),
6565
linear-gradient(
6666
45deg,
6767
transparent 25%,
68-
var(--color-orche) 35%,
68+
hsl(var(--color-orche)) 35%,
6969
transparent 50%
7070
);
7171
}
7272

7373
/* Popup styles */
7474
.CodeMirror-lint-tooltip {
75-
background-color: var(--color-neutral-0);
75+
background-color: hsl(var(--color-base));
7676
border: none;
7777
border-radius: var(--border-radius-8);
7878
box-shadow: var(--box-shadow);
@@ -88,8 +88,8 @@
8888
padding: 0;
8989
}
9090
.CodeMirror-lint-message-error {
91-
color: var(--color-red);
91+
color: hsl(var(--color-red));
9292
}
9393
.CodeMirror-lint-message-warning {
94-
color: var(--color-orche);
94+
color: hsl(var(--color-orche));
9595
}

‎packages/graphiql-react/src/explorer/components/argument.css

+4-4
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
}
66

77
.graphiql-doc-explorer-argument-name {
8-
color: var(--color-purple);
8+
color: hsl(var(--color-purple));
99
}
1010

1111
.graphiql-doc-explorer-argument-deprecation {
12-
background-color: var(--color-orche-background);
13-
border: 1px solid var(--color-orche);
12+
background-color: hsla(var(--color-orche), 0.07);
13+
border: 1px solid hsl(var(--color-orche));
1414
border-radius: var(--border-radius-4);
15-
color: var(--color-orche);
15+
color: hsl(var(--color-orche));
1616
padding: var(--px-8);
1717
}
1818

‎packages/graphiql-react/src/explorer/components/default-value.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.graphiql-doc-explorer-default-value {
2-
color: var(--color-green);
2+
color: hsl(var(--color-green));
33
}

0 commit comments

Comments
 (0)