Skip to content

Commit 2c9eed3

Browse files
jenndiazcastastrophe
authored andcommitted
chore(backgroundlayer): hard code token values
1 parent f4b7b2c commit 2c9eed3

File tree

1 file changed

+32
-24
lines changed

1 file changed

+32
-24
lines changed

components/backgroundlayers/index.css

Lines changed: 32 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -9,44 +9,52 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
99
OF ANY KIND, either express or implied. See the License for the specific language
1010
governing permissions and limitations under the License.
1111
*/
12-
1312
.spectrum-BackgroundLayers {
14-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
15-
--spectrum-backgroundlayers-drop-shadow:
13+
--spectrum-gray-25: rgb(255, 255, 255);
14+
--spectrum-gray-50: rgb(248, 248, 248);
15+
--spectrum-gray-75: rgb(243, 243, 243);
16+
--spectrum-gray-100: rgb(233, 233, 233);
17+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
18+
1619
}
1720

1821
.spectrum-BackgroundLayers--elevated {
19-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
20-
--spectrum-backgroundlayers-shadow-horizontal: 0;
21-
--spectrum-backgroundlayers-shadow-vertical: 0;
22-
--spectrum-backgroundlayers-shadow-blur: 5px;
23-
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-200);
24-
.spectrum--dark & {
25-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-75);
26-
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);
27-
}
22+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
23+
--spectrum-backgroundlayers-shadow-horizontal: 0;
24+
--spectrum-backgroundlayers-shadow-vertical: 0;
25+
--spectrum-backgroundlayers-shadow-blur: 5px;
26+
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-200);
27+
.spectrum--dark & {
28+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-75);
29+
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);
30+
}
2831
}
2932
.spectrum-BackgroundLayers--layer2 {
30-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
31-
.spectrum--dark & {
32-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-75);
33+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
34+
.spectrum--dark & {
35+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-75);
3336
}
3437
}
3538
.spectrum-BackgroundLayers--layer1 {
36-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-50);
39+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-50);
3740
}
3841
.spectrum-BackgroundLayers--pasteboard {
39-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-100);
40-
.spectrum--dark & {
41-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
42+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-100);
43+
.spectrum--dark & {
44+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
4245
}
4346
}
4447
.spectrum-BackgroundLayers--base {
45-
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
46-
border: 2px solid rgba(180, 180, 180, 0.25);
48+
--spectum-backgroundlayers-background-color: var(--spectrum-gray-25);
49+
border: 2px solid rgba(180, 180, 180, 0.25);
4750
}
4851

4952
.spectrum-BackgroundLayers {
50-
background-color: var(--spectum-backgroundlayers-background-color);
51-
filter: drop-shadow(var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color));
52-
}
53+
background-color: var(--spectum-backgroundlayers-background-color);
54+
filter: drop-shadow(
55+
var(--spectrum-backgroundlayers-shadow-horizontal)
56+
var(--spectrum-backgroundlayers-shadow-vertical)
57+
var(--spectrum-backgroundlayers-shadow-blur)
58+
var(--spectrum-backgroundlayers-shadow-color)
59+
);
60+
}

0 commit comments

Comments
 (0)