@spectrum-web-components/styles 0.17.0 → 0.17.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/tokens/dark-vars.css +21 -0
- package/tokens/darkest-vars.css +21 -0
- package/tokens/global-vars.css +1 -0
- package/tokens/light-vars.css +21 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/styles",
|
|
3
|
-
"version": "0.17.
|
|
3
|
+
"version": "0.17.1",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
"devDependencies": {
|
|
114
114
|
"@spectrum-css/commons": "^3.0.6",
|
|
115
115
|
"@spectrum-css/expressvars": "^2.0.0",
|
|
116
|
-
"@spectrum-css/tokens": "^1.0.
|
|
116
|
+
"@spectrum-css/tokens": "^1.0.7",
|
|
117
117
|
"@spectrum-css/typography": "^4.0.20",
|
|
118
118
|
"@spectrum-css/vars": "^8.0.0"
|
|
119
119
|
},
|
|
@@ -122,5 +122,5 @@
|
|
|
122
122
|
"./**/*.css"
|
|
123
123
|
],
|
|
124
124
|
"style": "all-medium-lightest.css",
|
|
125
|
-
"gitHead": "
|
|
125
|
+
"gitHead": "60b2d3b7d9020d72f9ae930568670321a1918e6f"
|
|
126
126
|
}
|
package/tokens/dark-vars.css
CHANGED
|
@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
|
|
|
12
12
|
|
|
13
13
|
:host,
|
|
14
14
|
:root {
|
|
15
|
+
--spectrum-overlay-opacity: 0.5;
|
|
15
16
|
--spectrum-neutral-background-color-default: var(--spectrum-gray-400);
|
|
16
17
|
--spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
|
|
17
18
|
--spectrum-neutral-background-color-down: var(--spectrum-gray-200);
|
|
@@ -68,6 +69,26 @@ governing permissions and limitations under the License.
|
|
|
68
69
|
--spectrum-positive-background-color-key-focus: var(
|
|
69
70
|
--spectrum-positive-color-400
|
|
70
71
|
);
|
|
72
|
+
--spectrum-neutral-visual-color: var(--spectrum-gray-600);
|
|
73
|
+
--spectrum-accent-visual-color: var(--spectrum-accent-color-900);
|
|
74
|
+
--spectrum-informative-visual-color: var(--spectrum-informative-color-900);
|
|
75
|
+
--spectrum-negative-visual-color: var(--spectrum-negative-color-700);
|
|
76
|
+
--spectrum-notice-visual-color: var(--spectrum-notice-color-900);
|
|
77
|
+
--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
|
|
78
|
+
--spectrum-gray-visual-color: var(--spectrum-gray-600);
|
|
79
|
+
--spectrum-red-visual-color: var(--spectrum-red-700);
|
|
80
|
+
--spectrum-orange-visual-color: var(--spectrum-orange-900);
|
|
81
|
+
--spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
|
|
82
|
+
--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
|
|
83
|
+
--spectrum-celery-visual-color: var(--spectrum-celery-800);
|
|
84
|
+
--spectrum-green-visual-color: var(--spectrum-green-800);
|
|
85
|
+
--spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
|
|
86
|
+
--spectrum-cyan-visual-color: var(--spectrum-cyan-900);
|
|
87
|
+
--spectrum-blue-visual-color: var(--spectrum-blue-900);
|
|
88
|
+
--spectrum-indigo-visual-color: var(--spectrum-indigo-900);
|
|
89
|
+
--spectrum-purple-visual-color: var(--spectrum-purple-900);
|
|
90
|
+
--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
|
|
91
|
+
--spectrum-magenta-visual-color: var(--spectrum-magenta-900);
|
|
71
92
|
--spectrum-drop-shadow-color: rgba(0, 0, 0, 0.5);
|
|
72
93
|
--spectrum-background-base-color: var(--spectrum-gray-50);
|
|
73
94
|
--spectrum-background-layer-1-color: var(--spectrum-gray-75);
|
package/tokens/darkest-vars.css
CHANGED
|
@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
|
|
|
12
12
|
|
|
13
13
|
:host,
|
|
14
14
|
:root {
|
|
15
|
+
--spectrum-overlay-opacity: 0.6;
|
|
15
16
|
--spectrum-neutral-background-color-default: var(--spectrum-gray-400);
|
|
16
17
|
--spectrum-neutral-background-color-hover: var(--spectrum-gray-300);
|
|
17
18
|
--spectrum-neutral-background-color-down: var(--spectrum-gray-200);
|
|
@@ -68,6 +69,26 @@ governing permissions and limitations under the License.
|
|
|
68
69
|
--spectrum-positive-background-color-key-focus: var(
|
|
69
70
|
--spectrum-positive-color-500
|
|
70
71
|
);
|
|
72
|
+
--spectrum-neutral-visual-color: var(--spectrum-gray-600);
|
|
73
|
+
--spectrum-accent-visual-color: var(--spectrum-accent-color-900);
|
|
74
|
+
--spectrum-informative-visual-color: var(--spectrum-informative-color-900);
|
|
75
|
+
--spectrum-negative-visual-color: var(--spectrum-negative-color-700);
|
|
76
|
+
--spectrum-notice-visual-color: var(--spectrum-notice-color-900);
|
|
77
|
+
--spectrum-positive-visual-color: var(--spectrum-positive-color-800);
|
|
78
|
+
--spectrum-gray-visual-color: var(--spectrum-gray-600);
|
|
79
|
+
--spectrum-red-visual-color: var(--spectrum-red-700);
|
|
80
|
+
--spectrum-orange-visual-color: var(--spectrum-orange-900);
|
|
81
|
+
--spectrum-yellow-visual-color: var(--spectrum-yellow-1100);
|
|
82
|
+
--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-900);
|
|
83
|
+
--spectrum-celery-visual-color: var(--spectrum-celery-800);
|
|
84
|
+
--spectrum-green-visual-color: var(--spectrum-green-800);
|
|
85
|
+
--spectrum-seafoam-visual-color: var(--spectrum-seafoam-800);
|
|
86
|
+
--spectrum-cyan-visual-color: var(--spectrum-cyan-900);
|
|
87
|
+
--spectrum-blue-visual-color: var(--spectrum-blue-900);
|
|
88
|
+
--spectrum-indigo-visual-color: var(--spectrum-indigo-900);
|
|
89
|
+
--spectrum-purple-visual-color: var(--spectrum-purple-900);
|
|
90
|
+
--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-900);
|
|
91
|
+
--spectrum-magenta-visual-color: var(--spectrum-magenta-900);
|
|
71
92
|
--spectrum-drop-shadow-color: rgba(0, 0, 0, 0.8);
|
|
72
93
|
--spectrum-background-base-color: var(--spectrum-gray-50);
|
|
73
94
|
--spectrum-background-layer-1-color: var(--spectrum-gray-75);
|
package/tokens/global-vars.css
CHANGED
|
@@ -31,6 +31,7 @@ governing permissions and limitations under the License.
|
|
|
31
31
|
--spectrum-focus-ring-color: var(--spectrum-blue-800);
|
|
32
32
|
--spectrum-static-white-focus-ring-color: var(--spectrum-white);
|
|
33
33
|
--spectrum-static-black-focus-ring-color: var(--spectrum-black);
|
|
34
|
+
--spectrum-overlay-color: var(--spectrum-black);
|
|
34
35
|
--spectrum-neutral-content-color-default: var(--spectrum-gray-800);
|
|
35
36
|
--spectrum-neutral-content-color-hover: var(--spectrum-gray-900);
|
|
36
37
|
--spectrum-neutral-content-color-down: var(--spectrum-gray-900);
|
package/tokens/light-vars.css
CHANGED
|
@@ -12,6 +12,7 @@ governing permissions and limitations under the License.
|
|
|
12
12
|
|
|
13
13
|
:host,
|
|
14
14
|
:root {
|
|
15
|
+
--spectrum-overlay-opacity: 0.4;
|
|
15
16
|
--spectrum-neutral-background-color-default: var(--spectrum-gray-800);
|
|
16
17
|
--spectrum-neutral-background-color-hover: var(--spectrum-gray-900);
|
|
17
18
|
--spectrum-neutral-background-color-down: var(--spectrum-gray-900);
|
|
@@ -68,6 +69,26 @@ governing permissions and limitations under the License.
|
|
|
68
69
|
--spectrum-positive-background-color-key-focus: var(
|
|
69
70
|
--spectrum-positive-color-1000
|
|
70
71
|
);
|
|
72
|
+
--spectrum-neutral-visual-color: var(--spectrum-gray-500);
|
|
73
|
+
--spectrum-accent-visual-color: var(--spectrum-accent-color-800);
|
|
74
|
+
--spectrum-informative-visual-color: var(--spectrum-informative-color-800);
|
|
75
|
+
--spectrum-negative-visual-color: var(--spectrum-negative-color-800);
|
|
76
|
+
--spectrum-notice-visual-color: var(--spectrum-notice-color-600);
|
|
77
|
+
--spectrum-positive-visual-color: var(--spectrum-positive-color-700);
|
|
78
|
+
--spectrum-gray-visual-color: var(--spectrum-gray-500);
|
|
79
|
+
--spectrum-red-visual-color: var(--spectrum-red-800);
|
|
80
|
+
--spectrum-orange-visual-color: var(--spectrum-orange-600);
|
|
81
|
+
--spectrum-yellow-visual-color: var(--spectrum-yellow-600);
|
|
82
|
+
--spectrum-chartreuse-visual-color: var(--spectrum-chartreuse-600);
|
|
83
|
+
--spectrum-celery-visual-color: var(--spectrum-celery-700);
|
|
84
|
+
--spectrum-green-visual-color: var(--spectrum-green-700);
|
|
85
|
+
--spectrum-seafoam-visual-color: var(--spectrum-seafoam-700);
|
|
86
|
+
--spectrum-cyan-visual-color: var(--spectrum-cyan-600);
|
|
87
|
+
--spectrum-blue-visual-color: var(--spectrum-blue-800);
|
|
88
|
+
--spectrum-indigo-visual-color: var(--spectrum-indigo-800);
|
|
89
|
+
--spectrum-purple-visual-color: var(--spectrum-purple-800);
|
|
90
|
+
--spectrum-fuchsia-visual-color: var(--spectrum-fuchsia-800);
|
|
91
|
+
--spectrum-magenta-visual-color: var(--spectrum-magenta-800);
|
|
71
92
|
--spectrum-drop-shadow-color: rgba(0, 0, 0, 0.15);
|
|
72
93
|
--spectrum-background-base-color: var(--spectrum-gray-200);
|
|
73
94
|
--spectrum-background-layer-1-color: var(--spectrum-gray-100);
|