@spectrum-web-components/theme 0.9.2 → 0.9.3-express.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.
Files changed (55) hide show
  1. package/README.md +56 -38
  2. package/custom-elements.json +168 -8
  3. package/express/scale-large.d.ts +1 -0
  4. package/express/scale-large.js +15 -0
  5. package/express/scale-large.js.map +1 -0
  6. package/express/scale-medium.d.ts +1 -0
  7. package/express/scale-medium.js +15 -0
  8. package/express/scale-medium.js.map +1 -0
  9. package/express/theme-dark.d.ts +1 -0
  10. package/express/theme-dark.js +15 -0
  11. package/express/theme-dark.js.map +1 -0
  12. package/express/theme-light.d.ts +1 -0
  13. package/express/theme-light.js +15 -0
  14. package/express/theme-light.js.map +1 -0
  15. package/package.json +12 -5
  16. package/src/Theme.d.ts +12 -7
  17. package/src/Theme.js +57 -13
  18. package/src/Theme.js.map +1 -1
  19. package/src/express/core.d.ts +1 -0
  20. package/src/express/core.js +15 -0
  21. package/src/express/core.js.map +1 -0
  22. package/src/express/scale-large.css.d.ts +2 -0
  23. package/src/express/scale-large.css.js +4147 -0
  24. package/src/express/scale-large.css.js.map +1 -0
  25. package/src/express/scale-medium.css.d.ts +2 -0
  26. package/src/express/scale-medium.css.js +4201 -0
  27. package/src/express/scale-medium.css.js.map +1 -0
  28. package/src/express/theme-dark.css.d.ts +2 -0
  29. package/src/express/theme-dark.css.js +35 -0
  30. package/src/express/theme-dark.css.js.map +1 -0
  31. package/src/express/theme-light.css.d.ts +2 -0
  32. package/src/express/theme-light.css.js +35 -0
  33. package/src/express/theme-light.css.js.map +1 -0
  34. package/src/express/theme.css.d.ts +2 -0
  35. package/src/express/theme.css.js +1397 -0
  36. package/src/express/theme.css.js.map +1 -0
  37. package/src/express/themes.d.ts +5 -0
  38. package/src/express/themes.js +17 -0
  39. package/src/express/themes.js.map +1 -0
  40. package/src/scale-large.css.js +1241 -361
  41. package/src/scale-large.css.js.map +1 -1
  42. package/src/scale-medium.css.js +1285 -389
  43. package/src/scale-medium.css.js.map +1 -1
  44. package/src/theme-dark.css.js +6 -0
  45. package/src/theme-dark.css.js.map +1 -1
  46. package/src/theme-darkest.css.js +6 -0
  47. package/src/theme-darkest.css.js.map +1 -1
  48. package/src/theme-light.css.js +7 -1
  49. package/src/theme-light.css.js.map +1 -1
  50. package/src/theme.css.js +35 -3
  51. package/src/theme.css.js.map +1 -1
  52. package/src/typography.css.js +1 -1
  53. package/src/typography.css.js.map +1 -1
  54. package/stories/theme.stories.js +22 -12
  55. package/stories/theme.stories.js.map +1 -1
package/README.md CHANGED
@@ -25,12 +25,18 @@ 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 themes can be imported en masse:
28
+ The various Classic 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
+
34
40
  Or, individually:
35
41
 
36
42
  ```
@@ -40,6 +46,12 @@ import '@spectrum-web-components/theme/theme-light.js';
40
46
  import '@spectrum-web-components/theme/theme-lightest.js';
41
47
  import '@spectrum-web-components/theme/scale-medium.js';
42
48
  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';
43
55
  ```
44
56
 
45
57
  ## Quick start
@@ -55,10 +67,40 @@ The above import will get you started using the `<sp-theme>` wrapper element, an
55
67
 
56
68
  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:
57
69
 
70
+ ### Classic
71
+
58
72
  ```js
59
- // Power a site using <sp-theme color="darkest" scale="large">
73
+ /**
74
+ * Power a site using
75
+ *
76
+ * <sp-theme
77
+ * flavor="classic"
78
+ * color="darkest"
79
+ * scale="large"
80
+ * >
81
+ **/
60
82
  import '@spectrum-web-components/theme/theme-darkest.js';
61
83
  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';
62
104
 
63
105
  import '@spectrum-web-components/theme/sp-theme.js';
64
106
  ```
@@ -102,25 +144,13 @@ The `<sp-theme>` element provides a language context for its descendents in the
102
144
  margin-top: 2em;
103
145
  }
104
146
  </style>
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>
147
+ <sp-theme flavor="express" color="light" scale="medium">
148
+ <hzn-app-stuff></hzn-app-stuff>
123
149
  </sp-theme>
150
+
151
+ <express-app>
152
+ <hzn-app-stuff></hzn-app-stuff>
153
+ </express-app>
124
154
  ```
125
155
 
126
156
  ## Dark theme
@@ -138,25 +168,13 @@ The `<sp-theme>` element provides a language context for its descendents in the
138
168
  margin-top: 2em;
139
169
  }
140
170
  </style>
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>
171
+ <sp-theme flavor="express" color="dark" scale="large">
172
+ <hzn-app-stuff></hzn-app-stuff>
159
173
  </sp-theme>
174
+
175
+ <express-app>
176
+ <hzn-app-stuff></hzn-app-stuff>
177
+ </express-app>
160
178
  ```
161
179
 
162
180
  ## Large scale