@spectrum-web-components/styles 0.20.0 → 0.21.0
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/README.md +15 -15
- package/core-global.css +3 -3263
- package/express/core-global.css +3 -3283
- package/express/spectrum-core-global.css +3267 -0
- package/express/spectrum-scale-large.css +0 -6
- package/express/spectrum-scale-medium.css +0 -6
- package/fonts.css +2 -34
- package/package.json +4 -4
- package/spectrum-core-global.css +3247 -0
- package/spectrum-scale-large.css +0 -6
- package/spectrum-scale-medium.css +0 -6
- package/src/spectrum-base.css +1 -0
- package/src/spectrum-body.css +25 -0
- package/src/spectrum-code.css +18 -0
- package/src/spectrum-detail.css +33 -0
- package/src/spectrum-heading.css +46 -0
- package/src/spectrum-lang.css +121 -0
- package/src/spectrum-typography.css +14 -0
- package/tokens/express/custom-large-vars.css +2 -3
- package/tokens/express/custom-medium-vars.css +2 -3
- package/tokens/express/custom-vars.css +2 -3
- package/tokens/express/global-vars.css +6 -4
- package/tokens/express/large-vars.css +24 -0
- package/tokens/express/medium-vars.css +24 -0
- package/tokens/global-vars.css +39 -7
- package/tokens/large-vars.css +71 -6
- package/tokens/light-vars.css +2 -2
- package/tokens/medium-vars.css +71 -6
- package/tokens/spectrum/custom-large-vars.css +6 -7
- package/tokens/spectrum/custom-medium-vars.css +6 -7
- package/tokens/spectrum/custom-vars.css +23 -28
- package/tokens/spectrum/global-vars.css +6 -4
- package/tokens/spectrum/large-vars.css +24 -0
- package/tokens/spectrum/medium-vars.css +24 -0
package/README.md
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
## Description
|
|
2
2
|
|
|
3
|
-
Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)
|
|
3
|
+
Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library of patterns built on top of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are made available (and, in some cases, customizable) via CSS Custom Properties, e.g. `var(--spectrum-global-color-static-black)`. In this package, you will find the CSS Custom Properties that power the various color and size themes defined by Spectrum CSS.
|
|
4
4
|
|
|
5
|
-
The easiest way to consume these values is via the `<sp-theme>` element,
|
|
5
|
+
The easiest way to consume these values is via the `<sp-theme>` element. However, in some cases, it can be useful to have direct access to the files outlining the CSS Custom Properties, on top of which the rest of the component system is built.
|
|
6
6
|
|
|
7
7
|
### Usage
|
|
8
8
|
|
|
@@ -10,7 +10,7 @@ The easiest way to consume these values is via the `<sp-theme>` element, however
|
|
|
10
10
|
[](https://bundlephobia.com/result?p=@spectrum-web-components/styles)
|
|
11
11
|
|
|
12
12
|
```
|
|
13
|
-
|
|
13
|
+
yarn add @spectrum-web-components/styles
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
## Theme packages
|
|
@@ -19,49 +19,49 @@ npm install @spectrum-web-components/styles
|
|
|
19
19
|
@import '@spectrum-web-components/styles/all-medium-darkest.css';
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
-
This file brings together the
|
|
22
|
+
This file brings together the global variables and font settings with the "Darkest" color set and "Medium" scale system specification.
|
|
23
23
|
|
|
24
24
|
```
|
|
25
25
|
@import '@spectrum-web-components/styles/all-medium-dark.css';
|
|
26
26
|
```
|
|
27
27
|
|
|
28
|
-
This file brings together the
|
|
28
|
+
This file brings together the global variables and font settings with the "Dark" color set and "Medium" scale system specification.
|
|
29
29
|
|
|
30
30
|
```
|
|
31
31
|
@import '@spectrum-web-components/styles/all-medium-light.css';
|
|
32
32
|
```
|
|
33
33
|
|
|
34
|
-
This file brings together the
|
|
34
|
+
This file brings together the global variables and font settings with the "Light" color set and "Medium" scale system specification.
|
|
35
35
|
|
|
36
36
|
```
|
|
37
37
|
@import '@spectrum-web-components/styles/all-medium-lightest.css';
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
This file brings together the
|
|
40
|
+
This file brings together the global variables and font settings with the "Lightest" color set and "Medium" scale system specification.
|
|
41
41
|
|
|
42
42
|
```
|
|
43
43
|
@import '@spectrum-web-components/styles/all-large-darkest.css';
|
|
44
44
|
```
|
|
45
45
|
|
|
46
|
-
This file brings together the
|
|
46
|
+
This file brings together the global variables and font settings with the "Darkest" color set and "Large" scale system specification.
|
|
47
47
|
|
|
48
48
|
```
|
|
49
49
|
@import '@spectrum-web-components/styles/all-large-dark.css';
|
|
50
50
|
```
|
|
51
51
|
|
|
52
|
-
This file brings together the
|
|
52
|
+
This file brings together the global variables and font settings with the "Dark" color set and "Large" scale system specification.
|
|
53
53
|
|
|
54
54
|
```
|
|
55
55
|
@import '@spectrum-web-components/styles/all-large-light.css';
|
|
56
56
|
```
|
|
57
57
|
|
|
58
|
-
This file brings together the
|
|
58
|
+
This file brings together the global variables and font settings with the "Light" color set and "Large" scale system specification.
|
|
59
59
|
|
|
60
60
|
```
|
|
61
61
|
@import '@spectrum-web-components/styles/all-large-lightest.css';
|
|
62
62
|
```
|
|
63
63
|
|
|
64
|
-
This file brings together the
|
|
64
|
+
This file brings together the global variables and font settings with the "Lightest" color set and "Large" scale system specification.
|
|
65
65
|
|
|
66
66
|
## Color sets
|
|
67
67
|
|
|
@@ -71,7 +71,7 @@ This file brings together the globals variables and font settings with the "Ligh
|
|
|
71
71
|
@import '@spectrum-web-components/styles/theme-darkest.css';
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
-
This file provides only the variables needed to power a color
|
|
74
|
+
This file provides only the variables needed to power a color palette featuring colors found in the "Darkest" theme.
|
|
75
75
|
|
|
76
76
|
### Dark
|
|
77
77
|
|
|
@@ -79,7 +79,7 @@ This file provides only the variables needed to power a color pallet featuring c
|
|
|
79
79
|
@import '@spectrum-web-components/styles/theme-dark.css';
|
|
80
80
|
```
|
|
81
81
|
|
|
82
|
-
This file provides only the variables needed to power a color
|
|
82
|
+
This file provides only the variables needed to power a color palette featuring colors found in the "Dark" theme.
|
|
83
83
|
|
|
84
84
|
### Light
|
|
85
85
|
|
|
@@ -87,7 +87,7 @@ This file provides only the variables needed to power a color pallet featuring c
|
|
|
87
87
|
@import '@spectrum-web-components/styles/theme-light.css';
|
|
88
88
|
```
|
|
89
89
|
|
|
90
|
-
This file provides only the variables needed to power a color
|
|
90
|
+
This file provides only the variables needed to power a color palette featuring colors found in the "Light" theme.
|
|
91
91
|
|
|
92
92
|
### Lightest
|
|
93
93
|
|
|
@@ -95,7 +95,7 @@ This file provides only the variables needed to power a color pallet featuring c
|
|
|
95
95
|
@import '@spectrum-web-components/styles/theme-lightest.css';
|
|
96
96
|
```
|
|
97
97
|
|
|
98
|
-
This file provides only the variables needed to power a color
|
|
98
|
+
This file provides only the variables needed to power a color palette featuring colors found in the "Lightest" theme.
|
|
99
99
|
|
|
100
100
|
## Scale
|
|
101
101
|
|