Skip to content

Commit c06c21b

Browse files
committed
chore(backgroundlayer): hard code token values
1 parent 7504d30 commit c06c21b

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)