@spectrum-web-components/theme 0.9.2-express.0 → 0.9.2

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.
Files changed (45) hide show
  1. package/README.md +38 -56
  2. package/custom-elements.json +4 -164
  3. package/package.json +4 -11
  4. package/src/Theme.d.ts +7 -12
  5. package/src/Theme.js +13 -57
  6. package/src/Theme.js.map +1 -1
  7. package/src/scale-large.css.js +1 -1
  8. package/src/scale-large.css.js.map +1 -1
  9. package/src/scale-medium.css.js +1 -1
  10. package/src/scale-medium.css.js.map +1 -1
  11. package/src/typography.css.js +1 -1
  12. package/src/typography.css.js.map +1 -1
  13. package/express/scale-large.d.ts +0 -1
  14. package/express/scale-large.js +0 -15
  15. package/express/scale-large.js.map +0 -1
  16. package/express/scale-medium.d.ts +0 -1
  17. package/express/scale-medium.js +0 -15
  18. package/express/scale-medium.js.map +0 -1
  19. package/express/theme-dark.d.ts +0 -1
  20. package/express/theme-dark.js +0 -15
  21. package/express/theme-dark.js.map +0 -1
  22. package/express/theme-light.d.ts +0 -1
  23. package/express/theme-light.js +0 -15
  24. package/express/theme-light.js.map +0 -1
  25. package/src/express/core.d.ts +0 -1
  26. package/src/express/core.js +0 -15
  27. package/src/express/core.js.map +0 -1
  28. package/src/express/scale-large.css.d.ts +0 -2
  29. package/src/express/scale-large.css.js +0 -3267
  30. package/src/express/scale-large.css.js.map +0 -1
  31. package/src/express/scale-medium.css.d.ts +0 -2
  32. package/src/express/scale-medium.css.js +0 -3305
  33. package/src/express/scale-medium.css.js.map +0 -1
  34. package/src/express/theme-dark.css.d.ts +0 -2
  35. package/src/express/theme-dark.css.js +0 -29
  36. package/src/express/theme-dark.css.js.map +0 -1
  37. package/src/express/theme-light.css.d.ts +0 -2
  38. package/src/express/theme-light.css.js +0 -29
  39. package/src/express/theme-light.css.js.map +0 -1
  40. package/src/express/theme.css.d.ts +0 -2
  41. package/src/express/theme.css.js +0 -1365
  42. package/src/express/theme.css.js.map +0 -1
  43. package/src/express/themes.d.ts +0 -5
  44. package/src/express/themes.js +0 -17
  45. package/src/express/themes.js.map +0 -1
package/README.md CHANGED
@@ -25,18 +25,12 @@ When looking to leverage the `Theme` base class as a type and/or for extension p
25
25
  import { Theme } from '@spectrum-web-components/theme';
26
26
  ```
27
27
 
28
- The various Classic themes can be imported en masse:
28
+ The various themes can be imported en masse:
29
29
 
30
30
  ```
31
31
  import '@spectrum-web-components/theme/src/themes.js';
32
32
  ```
33
33
 
34
- The various Express themes can be imported en masse:
35
-
36
- ```
37
- import '@spectrum-web-components/theme/src/express/themes.js';
38
- ```
39
-
40
34
  Or, individually:
41
35
 
42
36
  ```
@@ -46,12 +40,6 @@ import '@spectrum-web-components/theme/theme-light.js';
46
40
  import '@spectrum-web-components/theme/theme-lightest.js';
47
41
  import '@spectrum-web-components/theme/scale-medium.js';
48
42
  import '@spectrum-web-components/theme/scale-large.js';
49
- import '@spectrum-web-components/theme/express/theme-darkest.js';
50
- import '@spectrum-web-components/theme/express/theme-dark.js';
51
- import '@spectrum-web-components/theme/express/theme-light.js';
52
- import '@spectrum-web-components/theme/express/theme-lightest.js';
53
- import '@spectrum-web-components/theme/express/scale-medium.js';
54
- import '@spectrum-web-components/theme/express/scale-large.js';
55
43
  ```
56
44
 
57
45
  ## Quick start
@@ -67,40 +55,10 @@ The above import will get you started using the `<sp-theme>` wrapper element, an
67
55
 
68
56
  Once you've moved beyond the prototype phases of an application, it is likely that you will only use one combinatin of `color` and `scale` in your application, and even when you don't you will likely benefit from lazily loading variants that you don't leverage by default. For single combination applications or to power a _default_ theme, the following imports can be used to ensure only the code your application requires is loaded:
69
57
 
70
- ### Classic
71
-
72
58
  ```js
73
- /**
74
- * Power a site using
75
- *
76
- * <sp-theme
77
- * flavor="classic"
78
- * color="darkest"
79
- * scale="large"
80
- * >
81
- **/
59
+ // Power a site using <sp-theme color="darkest" scale="large">
82
60
  import '@spectrum-web-components/theme/theme-darkest.js';
83
61
  import '@spectrum-web-components/theme/scale-large.js';
84
- import '@spectrum-web-components/theme/flavor-classic.js';
85
-
86
- import '@spectrum-web-components/theme/sp-theme.js';
87
- ```
88
-
89
- ### Express
90
-
91
- ```js
92
- /**
93
- * Power a site using
94
- *
95
- * <sp-theme
96
- * flavor="express"
97
- * color="light"
98
- * scale="medium"
99
- * >
100
- **/
101
- import '@spectrum-web-components/theme/express/theme-light.js';
102
- import '@spectrum-web-components/theme/express/scale-medium.js';
103
- import '@spectrum-web-components/theme/express/flavor-express.js';
104
62
 
105
63
  import '@spectrum-web-components/theme/sp-theme.js';
106
64
  ```
@@ -144,13 +102,25 @@ The `<sp-theme>` element provides a language context for its descendents in the
144
102
  margin-top: 2em;
145
103
  }
146
104
  </style>
147
- <sp-theme flavor="express" color="light" scale="medium">
148
- <hzn-app-stuff></hzn-app-stuff>
105
+ <sp-theme color="light">
106
+ <div id="example">
107
+ <div>
108
+ <sp-slider
109
+ value="5"
110
+ step="1"
111
+ min="1"
112
+ max="11"
113
+ label="Volume"
114
+ id="volume-slider"
115
+ ></sp-slider>
116
+ </div>
117
+ <div><sp-switch>Overdrive</sp-switch></div>
118
+ <sp-button-group id="buttons">
119
+ <sp-button variant="primary">Cancel</sp-button>
120
+ <sp-button variant="cta">Continue</sp-button>
121
+ </sp-button-group>
122
+ </div>
149
123
  </sp-theme>
150
-
151
- <express-app>
152
- <hzn-app-stuff></hzn-app-stuff>
153
- </express-app>
154
124
  ```
155
125
 
156
126
  ## Dark theme
@@ -168,13 +138,25 @@ The `<sp-theme>` element provides a language context for its descendents in the
168
138
  margin-top: 2em;
169
139
  }
170
140
  </style>
171
- <sp-theme flavor="express" color="dark" scale="large">
172
- <hzn-app-stuff></hzn-app-stuff>
141
+ <sp-theme color="dark">
142
+ <div id="example">
143
+ <div>
144
+ <sp-slider
145
+ value="5"
146
+ step="1"
147
+ min="1"
148
+ max="11"
149
+ label="Volume"
150
+ id="volume-slider"
151
+ ></sp-slider>
152
+ </div>
153
+ <div><sp-switch>Overdrive</sp-switch></div>
154
+ <sp-button-group id="buttons">
155
+ <sp-button variant="primary">Cancel</sp-button>
156
+ <sp-button variant="cta">Continue</sp-button>
157
+ </sp-button-group>
158
+ </div>
173
159
  </sp-theme>
174
-
175
- <express-app>
176
- <hzn-app-stuff></hzn-app-stuff>
177
- </express-app>
178
160
  ```
179
161
 
180
162
  ## Large scale