Skip to content

Commit 6aa54a9

Browse files
committed
chore(backgroundlayer): hard code token values
1 parent e535252 commit 6aa54a9

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)