Skip to content

Commit feb718e

Browse files
jenndiazcastastrophe
jenndiaz
authored and
castastrophe
committed
refactor(backgroudlayers): use newest tokens
1 parent e4cb71d commit feb718e

File tree

9 files changed

+133
-117
lines changed

9 files changed

+133
-117
lines changed

‎components/backgroundlayers/dist/metadata.json

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"sourceFile": "index.css",
3+
"selectors": [
4+
".spectrum-BackgroundLayers-browse-base",
5+
".spectrum-BackgroundLayers-browse-elevated",
6+
".spectrum-BackgroundLayers-browse-layer1",
7+
".spectrum-BackgroundLayers-edit-elevated",
8+
".spectrum-BackgroundLayers-edit-layer1",
9+
".spectrum-BackgroundLayers-edit-layer2",
10+
".spectrum-BackgroundLayers-edit-pasteboard"
11+
],
12+
"modifiers": [],
13+
"component": [
14+
"--spectrum-backgroundlayers-shadow-blur",
15+
"--spectrum-backgroundlayers-shadow-color",
16+
"--spectrum-backgroundlayers-shadow-horizontal",
17+
"--spectrum-backgroundlayers-shadow-vertical"
18+
],
19+
"global": [
20+
"--spectrum-background-base-color",
21+
"--spectrum-background-elevated-color",
22+
"--spectrum-background-layer-1-color",
23+
"--spectrum-background-layer-2-color",
24+
"--spectrum-background-pasteboard-color",
25+
"--spectrum-gray-100",
26+
"--spectrum-gray-600"
27+
],
28+
"passthroughs": [],
29+
"high-contrast": []
30+
}

‎components/backgroundlayers/gulpfile.js

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎components/backgroundlayers/index.css

Lines changed: 25 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,56 @@
11
/*!
2-
Copyright 2023 Adobe. All rights reserved.
3-
This file is licensed to you under the Apache License, Version 2.0 (the "License");
4-
you may not use this file except in compliance with the License. You may obtain a copy
5-
of the License at http://www.apache.org/licenses/LICENSE-2.0
2+
* Copyright 2024 Adobe. All rights reserved.
3+
*
4+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License. You may obtain a copy
6+
* of the License at <http://www.apache.org/licenses/LICENSE-2.0>
7+
*
8+
* Unless required by applicable law or agreed to in writing, software distributed under
9+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
10+
* OF ANY KIND, either express or implied. See the License for the specific language
11+
* governing permissions and limitations under the License.
12+
*/
613

7-
Unless required by applicable law or agreed to in writing, software distributed under
8-
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
9-
OF ANY KIND, either express or implied. See the License for the specific language
10-
governing permissions and limitations under the License.
11-
*/
1214
/* for use only in editing contexts */
1315
.spectrum-BackgroundLayers-edit-elevated {
14-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
1516
--spectrum-backgroundlayers-shadow-horizontal: 0;
1617
--spectrum-backgroundlayers-shadow-vertical: 0;
1718
--spectrum-backgroundlayers-shadow-blur: 5px;
18-
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-600);
19+
--spectrum-backgroundlayers-shadow-color: light-dark(var(--spectrum-gray-600), var(--spectrum-gray-100));
1920

20-
.spectrum--dark & {
21-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-75);
22-
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);
23-
}
24-
background-color: var(--spectrum-backgroundlayers-background-color);
25-
box-shadow:
26-
var(--spectrum-backgroundlayers-shadow-horizontal)
27-
var(--spectrum-backgroundlayers-shadow-vertical)
28-
var(--spectrum-backgroundlayers-shadow-blur)
29-
var(--spectrum-backgroundlayers-shadow-color)
21+
background-color: var(--spectrum-background-elevated-color);
22+
box-shadow: var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color);
3023
}
3124

3225
.spectrum-BackgroundLayers-edit-layer2 {
33-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
34-
35-
.spectrum--dark & {
36-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-75);
37-
}
38-
background-color: var(--spectrum-backgroundlayers-background-color);
39-
border: 2px solid rgba(180, 180, 180, 25%);
26+
background-color: var(--spectrum-background-layer-2-color);
27+
border: 2px solid rgb(180 180 180 / 25%);
4028
}
4129

4230
.spectrum-BackgroundLayers-edit-layer1 {
43-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-50);
44-
background-color: var(--spectrum-backgroundlayers-background-color);
31+
background-color: var(--spectrum-background-layer-1-color);
4532
}
4633

4734
.spectrum-BackgroundLayers-edit-pasteboard {
48-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-100);
49-
50-
.spectrum--dark & {
51-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
52-
}
53-
background-color: var(--spectrum-backgroundlayers-background-color);
35+
background-color: var(--spectrum-background-pasteboard-color);
5436
}
5537

5638
/* only used in browsing contexts */
5739
.spectrum-BackgroundLayers-browse-elevated {
58-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
5940
--spectrum-backgroundlayers-shadow-horizontal: 0;
6041
--spectrum-backgroundlayers-shadow-vertical: 0;
6142
--spectrum-backgroundlayers-shadow-blur: 5px;
62-
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-600);
43+
--spectrum-backgroundlayers-shadow-color: light-dark(var(--spectrum-gray-600), var(--spectrum-gray-100));
6344

64-
.spectrum--dark & {
65-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-75);
66-
--spectrum-backgroundlayers-shadow-color: var(--spectrum-gray-100);
67-
}
68-
background-color: var(--spectrum-backgroundlayers-background-color);
69-
box-shadow:
70-
var(--spectrum-backgroundlayers-shadow-horizontal)
71-
var(--spectrum-backgroundlayers-shadow-vertical)
72-
var(--spectrum-backgroundlayers-shadow-blur)
73-
var(--spectrum-backgroundlayers-shadow-color)
45+
background-color: var(--spectrum-background-elevated-color);
46+
box-shadow: var(--spectrum-backgroundlayers-shadow-horizontal) var(--spectrum-backgroundlayers-shadow-vertical) var(--spectrum-backgroundlayers-shadow-blur) var(--spectrum-backgroundlayers-shadow-color);
7447
}
7548

7649
.spectrum-BackgroundLayers-browse-layer1 {
77-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-50);
78-
background-color: var(--spectrum-backgroundlayers-background-color);
50+
background-color: var(--spectrum-background-layer-1-color);
7951
}
8052

8153
.spectrum-BackgroundLayers-browse-base {
82-
--spectrum-backgroundlayers-background-color: var(--spectrum-gray-25);
83-
border: 2px solid rgba(180, 180, 180, 25%);
84-
background-color: var(--spectrum-backgroundlayers-background-color);
85-
}
54+
border: 2px solid rgb(180 180 180 / 25%);
55+
background-color: var(--spectrum-background-base-color);
56+
}

‎components/backgroundlayers/metadata/mods.md

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎components/backgroundlayers/package.json

Lines changed: 48 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,50 @@
11
{
2-
"name": "@spectrum-css/backgroundlayers",
3-
"version": "1.0.0-alpha.0",
4-
"description": "The Spectrum CSS backgroundlayers component",
5-
"license": "Apache-2.0",
6-
"author": "Adobe",
7-
"homepage": "https://opensource.adobe.com/spectrum-css/",
8-
"repository": {
9-
"type": "git",
10-
"url": "https://github.com/adobe/spectrum-css.git",
11-
"directory": "components/backgroundlayers"
12-
},
13-
"bugs": {
14-
"url": "https://github.com/adobe/spectrum-css/issues"
15-
},
16-
"main": "dist/index-vars.css",
17-
"scripts": {
18-
"build": "gulp",
19-
"clean": "rimraf dist",
20-
"test": "nx test:scope @spectrum-css/preview backgroundlayers"
21-
},
22-
"peerDependencies": {
23-
"@spectrum-css/tokens": ">=13"
24-
},
25-
"devDependencies": {
26-
"@spectrum-css/component-builder-simple": "^2.0.17",
27-
"@spectrum-css/tokens": "^13.0.0-beta.5",
28-
"gulp": "^4.0.0",
29-
"nx": "^17.0.3",
30-
"rimraf": "^5.0.1"
31-
},
32-
"publishConfig": {
33-
"access": "public"
34-
}
2+
"name": "@spectrum-css/backgroundlayers",
3+
"version": "1.0.0-alpha.0",
4+
"description": "The Spectrum CSS backgroundlayers component",
5+
"license": "Apache-2.0",
6+
"author": "Adobe",
7+
"homepage": "https://opensource.adobe.com/spectrum-css/",
8+
"repository": {
9+
"type": "git",
10+
"url": "https://github.com/adobe/spectrum-css.git",
11+
"directory": "components/backgroundlayers"
12+
},
13+
"bugs": {
14+
"url": "https://github.com/adobe/spectrum-css/issues"
15+
},
16+
"exports": {
17+
".": "./dist/index.css",
18+
"./*.md": "./*.md",
19+
"./dist/*": "./dist/*",
20+
"./index-*.css": "./dist/index-*.css",
21+
"./index.css": "./dist/index.css",
22+
"./metadata.json": "./dist/metadata.json",
23+
"./package.json": "./package.json",
24+
"./stories/*": "./stories/*"
25+
},
26+
"main": "dist/index.css",
27+
"peerDependencies": {
28+
"@spectrum-css/tokens": ">=16.1.0-next.0"
29+
},
30+
"peerDependenciesMeta": {
31+
"@spectrum-css/tokens": {
32+
"optional": true
33+
}
34+
},
35+
"devDependencies": {
36+
"@spectrum-css/tokens": "16.1.0-next.8"
37+
},
38+
"keywords": [
39+
"design-system",
40+
"spectrum",
41+
"spectrum-css",
42+
"adobe",
43+
"adobe-spectrum",
44+
"component",
45+
"css"
46+
],
47+
"publishConfig": {
48+
"access": "public"
49+
}
3550
}

‎components/backgroundlayers/project.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"$schema": "../../node_modules/nx/schemas/project-schema.json",
3+
"name": "backgroundlayers",
4+
"tags": ["component"],
5+
"targets": {
6+
"build": {},
7+
"clean": {},
8+
"compare": {},
9+
"format": {},
10+
"lint": {},
11+
"report": {},
12+
"test": {
13+
"defaultConfiguration": "scope"
14+
},
15+
"validate": {}
16+
}
17+
}

‎components/backgroundlayers/themes/express.css

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎components/backgroundlayers/themes/spectrum.css

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎yarn.lock

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4241,6 +4241,19 @@ __metadata:
42414241
languageName: unknown
42424242
linkType: soft
42434243

4244+
"@spectrum-css/backgroundlayers@workspace:components/backgroundlayers":
4245+
version: 0.0.0-use.local
4246+
resolution: "@spectrum-css/backgroundlayers@workspace:components/backgroundlayers"
4247+
dependencies:
4248+
"@spectrum-css/tokens": "npm:16.1.0-next.8"
4249+
peerDependencies:
4250+
"@spectrum-css/tokens": ">=16.1.0-next.0"
4251+
peerDependenciesMeta:
4252+
"@spectrum-css/tokens":
4253+
optional: true
4254+
languageName: unknown
4255+
linkType: soft
4256+
42444257
"@spectrum-css/badge@npm:7.0.0-next.2, @spectrum-css/badge@workspace:components/badge":
42454258
version: 0.0.0-use.local
42464259
resolution: "@spectrum-css/badge@workspace:components/badge"

0 commit comments

Comments
 (0)