Skip to content

Commit c3cbcb0

Browse files
committed
chore(backgroundlayer): hard code token values
1 parent dfbaee7 commit c3cbcb0

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)