@hotosm/ui 0.3.1-b5 → 0.3.1-b6

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 (22) hide show
  1. package/README.md +87 -74
  2. package/dist/chunks/chunk.456NATDG.js +1 -0
  3. package/dist/chunks/{chunk.V7FZQXWL.js → chunk.AIZM63SF.js} +2 -0
  4. package/dist/chunks/chunk.BM3GXGCS.js +1 -0
  5. package/dist/chunks/chunk.SZ46YTWY.js +1 -0
  6. package/dist/chunks/chunk.YYEOK7MA.js +1 -0
  7. package/dist/components/consent/consent.d.ts +0 -1
  8. package/dist/components/consent/consent.js +1 -1
  9. package/dist/components/header/header.component.js +1 -1
  10. package/dist/components/header/header.d.ts +0 -1
  11. package/dist/components/header/header.js +1 -1
  12. package/dist/components/logo/logo.d.ts +0 -1
  13. package/dist/components/logo/logo.js +1 -1
  14. package/dist/components/tracking/tracking.d.ts +0 -1
  15. package/dist/components/tracking/tracking.js +1 -1
  16. package/dist/hotosm-ui.d.ts +4 -12
  17. package/dist/hotosm-ui.js +1 -1
  18. package/dist/style.css +7 -1
  19. package/dist/themes/hot-wa-override.css +222 -0
  20. package/dist/themes/hot.css +165 -213
  21. package/package.json +1 -1
  22. package/dist/themes/hot-wa.css +0 -179
package/README.md CHANGED
@@ -52,118 +52,131 @@
52
52
 
53
53
  ## Shared UI Components with HOT Theming
54
54
 
55
- This repository contains HOT themed UI components, with three goals:
55
+ This repository contains advice on how to use the WebAwesome
56
+ [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
57
+ library, references to the HOTOSM style guide, and a few 'wrapper'
58
+ components to assist development:
56
59
 
57
60
  1. Reduced code duplication across HOT tools (we repeat a lot!)
58
61
  2. Simplified developer experience to create a HOT app.
59
62
  3. Reasonably consistent theming and style across tools.
60
63
 
61
- They are available as
62
- [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components)
63
- and have first-class React support.
64
-
65
64
  The main goal of this project is not to re-invent the wheel, or add an extra burden
66
- of development and maintenance. It should include a minimal number of components:
65
+ of development and maintenance. It should include a minimal number of
66
+ components, such as:
67
67
 
68
68
  - Header, including auth flows (OSM, Google) and login info.
69
69
  - Sidebar with links to extra resources.
70
70
  - Footer with links.
71
- - File upload component (including dropzone).
72
71
 
73
72
  ## Quick start
74
73
 
75
- There are two options: NPM and Components Bundle.
74
+ Current HOTOSM UI version used: `0.3.1-b5`
75
+ Current WebAwesome version used: `3.0.0-beta.1`
76
76
 
77
- ### NPM
77
+ ### Install WebAwesome
78
78
 
79
- Appropriate for applications that have installable dependencies
79
+ ```bash
80
+ pnpm install "@awesome.me/webawesome@3.0.0-beta.1"
81
+ ```
80
82
 
81
- `npm install @hotosm/ui`
83
+ > [!NOTE]
84
+ > It's important to pin the version of web awesome used to the version in this
85
+ > library, to avoid any conflicts and incompatibilities between components.
82
86
 
83
- Import the library in your project and use the components.
87
+ ### Install HOT Components
84
88
 
85
- ```html
86
- <script>
87
- import '@hotosm/ui/dist/style.css';
88
- import { Logo, Button } from '@hotosm/ui/dist/hotosm-ui';
89
- </script>
89
+ ```bash
90
+ pnpm install "@hotosm/ui"
90
91
  ```
91
92
 
92
- ```html
93
- <hot-logo><hot-logo>
94
- <hot-button variant="primary">Click me!</hot-button>
95
- ```
93
+ ### Configure The Styles
96
94
 
97
- #### React
95
+ In your `index.html` or equivalent frontend root, add the following classes
96
+ to your `<html>` block:
98
97
 
99
- Import in the same way as above.
100
-
101
- ```jsx
102
- <hot-button
103
- size='small'
104
- variant='text'
105
- disabled={currentIndex <= 0}
106
- onClick={() => {
107
- console.log('do stuff');
108
- }}
109
- >
110
- </hot-button>
111
- ```
98
+ ```html
99
+ <!DOCTYPE html>
100
+ <html class="wa-theme-default wa-palette-hotosm wa-brand-red wa-neutral-gray
101
+ wa-success-cyan wa-warning-yellow wa-danger-orange">
102
+ <head>
103
+ xxx
104
+ </head>
105
+ <body>
106
+ xxx
107
+ </body>
108
+ </html>
109
+ ```
112
110
 
113
- ### Components Bundle
111
+ > [!IMPORTANT]
112
+ > These classes determine the colour usage for different component variants,
113
+ > and probably should not be changed!
114
114
 
115
- - This is the compiled JavaScript bundle generated from the TypeScript code.
116
- - The components require no additional dependencies and are minified.
115
+ And import the required styles in your `main.ts` or equivalent (we import from package
116
+ rather than CDN, to allow the bundler to work it's CSS tree-shaking magic).
117
117
 
118
- Appropriate for HTML / Markdown / HTMX.
118
+ ```js
119
+ import '@hotosm/ui/dist/style.css';
120
+ ```
119
121
 
120
- ```html
121
- <link
122
- rel="stylesheet"
123
- href="https://s3.amazonaws.com/hotosm-ui/latest/dist/style.css"
124
- />
122
+ If you wish to use any of the variables in `hot.css` manually, you can reference
123
+ them as variables like so:
125
124
 
126
- <script
127
- type="module"
128
- src="https://s3.amazonaws.com/hotosm-ui/latest/dist/ui.js"
129
- ></script>
125
+ ```css
126
+ /* In your CSS file */
127
+ some-param: var(--hot-some-param);
128
+ /* See all variables in the `theme/hot.css` file */
129
+ ```
130
130
 
131
- <hot-logo></hot-logo>
132
- ```
131
+ ### Use The Components
133
132
 
134
- ## Using Extra Shoelace Components
133
+ #### Via Bundler
135
134
 
136
- The HOT UI library contains many composite components, such as headers, sidebars,
137
- tracking banners, etc, and does not re-invent the wheel for low-level components.
135
+ Import each component individually into your code:
138
136
 
139
- Shoelace is an UI library that is exported directly from `@hotosm/ui`.
137
+ ```html
138
+ <script>
139
+ import '@hotosm/ui/dist/components/header/header.js';
140
+ </script>
140
141
 
141
- To access the low-level components, such as buttons, dropdowns, modals, etc,
142
- simply import the component of the same name from the [Shoelace docs]
143
- (<https://shoelace.style>):
142
+ <hot-header
143
+ param1=""
144
+ param2=""
145
+ >
146
+ </hot-header>
147
+ ```
144
148
 
145
- ```js
146
- import { Button } from '@hotosm/ui/dist/hotosm-ui';
147
- ```
149
+ #### Via CDN
148
150
 
149
- ```html
150
- <hot-button disabled variant="secondary">Can't Click Me</hot-button>
151
- ```
151
+ If you are working directly in HTML, or other ways without a configured
152
+ bundler, you can import all the components as a bundle, as use them like so:
152
153
 
153
- ### React Shoelace Wrappers
154
+ ```html
155
+ <script>
156
+ import '@hotosm/ui/dist/style.css';
157
+ import '@hotosm/ui/dist/hotosm-ui';
158
+ </script>
154
159
 
155
- ```js
156
- import { Button } from '@hotosm/ui/dist/react';
157
- ```
160
+ <hot-logo><hot-logo>
161
+ <hot-button variant="primary">Click me!</hot-button>
162
+ ```
158
163
 
159
- ```html
160
- <Button disabled variant="secondary">Can't Click Me</Button>
161
- ```
162
-
163
- ### Examples
164
+ #### React
164
165
 
165
- You can found examples for HTML and also all common frameworks
166
- (React, Svelte, Vue) under `/examples`.
166
+ Import in the same way as the bundler example above, except events
167
+ are bound to slightly differently:
168
+
169
+ ```jsx
170
+ <hot-button
171
+ size='small'
172
+ variant='text'
173
+ disabled={currentIndex <= 0}
174
+ onClick={() => {
175
+ console.log('do stuff');
176
+ }}
177
+ >
178
+ </hot-button>
179
+ ```
167
180
 
168
181
  ### Development
169
182
 
package/dist/chunks/chunk.456NATDG.js ADDED
@@ -0,0 +1 @@
1
+ import{b as e}from"./chunk.MIYFUINI.js";var n=e;customElements.define("hot-consent",e);export{n as a};
package/dist/chunks/{chunk.V7FZQXWL.js → chunk.AIZM63SF.js} RENAMED
@@ -600,6 +600,7 @@ import{a as O,b as g,c as i,d as k,e as C,f as W}from"./chunk.2MK55PUE.js";impor
600
600
  <nav
601
601
  class="header--nav"
602
602
  >
603
+ ${this.tabs.length>0?r`
603
604
  <wa-tab-group class="header--tab-group">
604
605
  ${this.tabs.map((o,a)=>{let c=this.selectedTab===a?"header--tab header--tab-active":"header--tab";return r`
605
606
  <wa-tab
@@ -612,6 +613,7 @@ import{a as O,b as g,c as i,d as k,e as C,f as W}from"./chunk.2MK55PUE.js";impor
612
613
  </wa-tab>
613
614
  `})}
614
615
  </wa-tab-group>
616
+ `:null}
615
617
  </nav>
616
618
 
617
619
  ${""}
package/dist/chunks/chunk.BM3GXGCS.js ADDED
@@ -0,0 +1 @@
1
+ import{b as e}from"./chunk.AIZM63SF.js";var r=e;customElements.define("hot-header",e);export{r as a};
package/dist/chunks/chunk.SZ46YTWY.js ADDED
@@ -0,0 +1 @@
1
+ import{b as o}from"./chunk.7RJ72M75.js";var t=o;customElements.define("hot-logo",o);export{t as a};
package/dist/chunks/chunk.YYEOK7MA.js ADDED
@@ -0,0 +1 @@
1
+ import{b as a}from"./chunk.PDLGEB7T.js";var t=a;customElements.define("hot-tracking",a);export{t as a};
package/dist/components/consent/consent.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import Consent from './consent.component.js';
2
- export * from './consent.component.js';
3
2
  export default Consent;
4
3
  declare global {
5
4
  interface HTMLElementTagNameMap {
package/dist/components/consent/consent.js CHANGED
@@ -1 +1 @@
1
- import{a as t,b as e}from"../../chunks/chunk.MIYFUINI.js";import"../../chunks/chunk.3NBBS2A2.js";import"../../chunks/chunk.T4GALJJA.js";import"../../chunks/chunk.2MK55PUE.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";var n=e;customElements.define("hot-consent",e);export{t as Consent,n as default};
1
+ import{a}from"../../chunks/chunk.456NATDG.js";import"../../chunks/chunk.MIYFUINI.js";import"../../chunks/chunk.3NBBS2A2.js";import"../../chunks/chunk.T4GALJJA.js";import"../../chunks/chunk.2MK55PUE.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};
package/dist/components/header/header.component.js CHANGED
@@ -1 +1 @@
1
- import{a,b}from"../../chunks/chunk.V7FZQXWL.js";import"../../chunks/chunk.2MK55PUE.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.IG27I42A.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as Header,b as default};
1
+ import{a,b}from"../../chunks/chunk.AIZM63SF.js";import"../../chunks/chunk.2MK55PUE.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.IG27I42A.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as Header,b as default};
package/dist/components/header/header.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import Header from './header.component.js';
2
- export * from './header.component.js';
3
2
  export default Header;
4
3
  declare global {
5
4
  interface HTMLElementTagNameMap {
package/dist/components/header/header.js CHANGED
@@ -1 +1 @@
1
- import{a,b as e}from"../../chunks/chunk.V7FZQXWL.js";import"../../chunks/chunk.2MK55PUE.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.IG27I42A.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";var t=e;customElements.define("hot-header",e);export{a as Header,t as default};
1
+ import{a}from"../../chunks/chunk.BM3GXGCS.js";import"../../chunks/chunk.AIZM63SF.js";import"../../chunks/chunk.2MK55PUE.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.KO4EOD3I.js";import"../../chunks/chunk.IG27I42A.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};
package/dist/components/logo/logo.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import Logo from './logo.component.js';
2
- export * from './logo.component.js';
3
2
  export default Logo;
4
3
  declare global {
5
4
  interface HTMLElementTagNameMap {
package/dist/components/logo/logo.js CHANGED
@@ -1 +1 @@
1
- import{a as e,b as o}from"../../chunks/chunk.7RJ72M75.js";import"../../chunks/chunk.UTSKEKTV.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";var l=o;customElements.define("hot-logo",o);export{e as Logo,l as default};
1
+ import{a}from"../../chunks/chunk.SZ46YTWY.js";import"../../chunks/chunk.7RJ72M75.js";import"../../chunks/chunk.UTSKEKTV.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};
package/dist/components/tracking/tracking.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import MatomoTracking from './tracking.component.js';
2
- export * from './tracking.component.js';
3
2
  export default MatomoTracking;
4
3
  declare global {
5
4
  interface HTMLElementTagNameMap {
package/dist/components/tracking/tracking.js CHANGED
@@ -1 +1 @@
1
- import{a as t,b as e}from"../../chunks/chunk.PDLGEB7T.js";import"../../chunks/chunk.3NBBS2A2.js";import"../../chunks/chunk.2MK55PUE.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";var o=e;customElements.define("hot-tracking",e);export{t as MatomoTracking,o as default};
1
+ import{a}from"../../chunks/chunk.YYEOK7MA.js";import"../../chunks/chunk.PDLGEB7T.js";import"../../chunks/chunk.3NBBS2A2.js";import"../../chunks/chunk.2MK55PUE.js";import"../../chunks/chunk.6ZDEZIWM.js";import"../../chunks/chunk.U4P7XQR4.js";import"../../chunks/chunk.NI7UJOOZ.js";export{a as default};
package/dist/hotosm-ui.d.ts CHANGED
@@ -1,13 +1,5 @@
1
- import HotHeader from './components/header/header.component.js';
2
- import HotLogo from './components/logo/logo.component.js';
3
- import HotTracking from './components/tracking/tracking.component.js';
4
- import HotConsent from './components/consent/consent.component.js';
5
- declare global {
6
- interface HTMLElementTagNameMap {
7
- 'hot-header': HotHeader;
8
- 'hot-logo': HotLogo;
9
- 'hot-tracking': HotTracking;
10
- 'hot-consent': HotConsent;
11
- }
12
- }
1
+ import HotHeader from './components/header/header.js';
2
+ import HotLogo from './components/logo/logo.js';
3
+ import HotTracking from './components/tracking/tracking.js';
4
+ import HotConsent from './components/consent/consent.js';
13
5
  export { HotHeader as Header, HotLogo as Logo, HotConsent as Consent, HotTracking as Tracking, };
package/dist/hotosm-ui.js CHANGED
@@ -1 +1 @@
1
- import{b as t}from"./chunks/chunk.7RJ72M75.js";import"./chunks/chunk.UTSKEKTV.js";import{b as e}from"./chunks/chunk.PDLGEB7T.js";import{b as r}from"./chunks/chunk.MIYFUINI.js";import"./chunks/chunk.3NBBS2A2.js";import"./chunks/chunk.T4GALJJA.js";import{b as o}from"./chunks/chunk.V7FZQXWL.js";import"./chunks/chunk.2MK55PUE.js";import"./chunks/chunk.6ZDEZIWM.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.IG27I42A.js";import"./chunks/chunk.U4P7XQR4.js";import"./chunks/chunk.NI7UJOOZ.js";export{r as Consent,o as Header,t as Logo,e as Tracking};
1
+ import{a as r}from"./chunks/chunk.SZ46YTWY.js";import"./chunks/chunk.7RJ72M75.js";import"./chunks/chunk.UTSKEKTV.js";import{a as t}from"./chunks/chunk.YYEOK7MA.js";import"./chunks/chunk.PDLGEB7T.js";import{a}from"./chunks/chunk.456NATDG.js";import"./chunks/chunk.MIYFUINI.js";import"./chunks/chunk.3NBBS2A2.js";import"./chunks/chunk.T4GALJJA.js";import{a as o}from"./chunks/chunk.BM3GXGCS.js";import"./chunks/chunk.AIZM63SF.js";import"./chunks/chunk.2MK55PUE.js";import"./chunks/chunk.6ZDEZIWM.js";import"./chunks/chunk.KO4EOD3I.js";import"./chunks/chunk.IG27I42A.js";import"./chunks/chunk.U4P7XQR4.js";import"./chunks/chunk.NI7UJOOZ.js";export{a as Consent,o as Header,r as Logo,t as Tracking};
package/dist/style.css CHANGED
@@ -1,2 +1,8 @@
1
+ /* The default WebAwesome CSS */
2
+ @import url('https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/webawesome.css');
3
+ /* The WebAwesome theme we use (options: awesome, brutalist, glossy, etc) */
4
+ @import url('https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/themes/default.css');
5
+ /* Import our custom HOTOSM CSS variables - should be imported first */
1
6
  @import 'themes/hot.css';
2
- @import 'themes/hot-wa.css';
7
+ /* Import our WebAwesome palette / colour & font override */
8
+ @import 'themes/hot-wa-override.css';
package/dist/themes/hot-wa-override.css ADDED
@@ -0,0 +1,222 @@
1
+
2
+ /* HOT colour palette for WebAwesome */
3
+
4
+ @import url('https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/color/palettes/base.css');
5
+
6
+ @layer wa-color-palette {
7
+ :where(:root),
8
+ .wa-palette-hotosm {
9
+ /* NOTE: for some reason WA decided to swap the ordering 05 --> 95 to be dark to light... */
10
+ /* Material design and Shoelace convention is the inverse, so we map to that */
11
+ --wa-color-red-95: var(--hot-color-red-50);
12
+ --wa-color-red-90: var(--hot-color-red-100);
13
+ --wa-color-red-80: var(--hot-color-red-200);
14
+ --wa-color-red-70: var(--hot-color-red-300);
15
+ --wa-color-red-60: var(--hot-color-red-400);
16
+ --wa-color-red-50: var(--hot-color-red-500);
17
+ --wa-color-red-40: var(--hot-color-red-600);
18
+ --wa-color-red-30: var(--hot-color-red-700);
19
+ --wa-color-red-20: var(--hot-color-red-800);
20
+ --wa-color-red-10: var(--hot-color-red-900);
21
+ --wa-color-red-05: var(--hot-color-red-950);
22
+ --wa-color-red: var(--wa-color-red-50);
23
+ --wa-color-red-key: 50;
24
+
25
+ --wa-color-orange-95: var(--hot-color-rose-50);
26
+ --wa-color-orange-90: var(--hot-color-rose-100);
27
+ --wa-color-orange-80: var(--hot-color-rose-200);
28
+ --wa-color-orange-70: var(--hot-color-rose-300);
29
+ --wa-color-orange-60: var(--hot-color-rose-400);
30
+ --wa-color-orange-50: var(--hot-color-rose-500);
31
+ --wa-color-orange-40: var(--hot-color-rose-600);
32
+ --wa-color-orange-30: var(--hot-color-rose-700);
33
+ --wa-color-orange-20: var(--hot-color-rose-800);
34
+ --wa-color-orange-10: var(--hot-color-rose-900);
35
+ --wa-color-orange-05: var(--hot-color-rose-950);
36
+ --wa-color-orange: var(--wa-color-orange-60);
37
+ --wa-color-orange-key: 60;
38
+
39
+ --wa-color-yellow-95: var(--hot-color-yellow-50);
40
+ --wa-color-yellow-90: var(--hot-color-yellow-100);
41
+ --wa-color-yellow-80: var(--hot-color-yellow-200);
42
+ --wa-color-yellow-70: var(--hot-color-yellow-300);
43
+ --wa-color-yellow-60: var(--hot-color-yellow-400);
44
+ --wa-color-yellow-50: var(--hot-color-yellow-500);
45
+ --wa-color-yellow-40: var(--hot-color-yellow-600);
46
+ --wa-color-yellow-30: var(--hot-color-yellow-700);
47
+ --wa-color-yellow-20: var(--hot-color-yellow-800);
48
+ --wa-color-yellow-10: var(--hot-color-yellow-900);
49
+ --wa-color-yellow-05: var(--hot-color-yellow-950);
50
+ --wa-color-yellow: var(--wa-color-yellow-80);
51
+ --wa-color-yellow-key: 80;
52
+
53
+ --wa-color-cyan-95: var(--hot-color-cyan-50);
54
+ --wa-color-cyan-90: var(--hot-color-cyan-100);
55
+ --wa-color-cyan-80: var(--hot-color-cyan-200);
56
+ --wa-color-cyan-70: var(--hot-color-cyan-300);
57
+ --wa-color-cyan-60: var(--hot-color-cyan-400);
58
+ --wa-color-cyan-50: var(--hot-color-cyan-500);
59
+ --wa-color-cyan-40: var(--hot-color-cyan-600);
60
+ --wa-color-cyan-30: var(--hot-color-cyan-700);
61
+ --wa-color-cyan-20: var(--hot-color-cyan-800);
62
+ --wa-color-cyan-10: var(--hot-color-cyan-900);
63
+ --wa-color-cyan-05: var(--hot-color-cyan-950);
64
+ --wa-color-cyan: var(--wa-color-cyan-70);
65
+ --wa-color-cyan-key: 70;
66
+
67
+ --wa-color-blue-95: var(--hot-color-blue-50);
68
+ --wa-color-blue-90: var(--hot-color-blue-100);
69
+ --wa-color-blue-80: var(--hot-color-blue-200);
70
+ --wa-color-blue-70: var(--hot-color-blue-300);
71
+ --wa-color-blue-60: var(--hot-color-blue-400);
72
+ --wa-color-blue-50: var(--hot-color-blue-500);
73
+ --wa-color-blue-40: var(--hot-color-blue-600);
74
+ --wa-color-blue-30: var(--hot-color-blue-700);
75
+ --wa-color-blue-20: var(--hot-color-blue-800);
76
+ --wa-color-blue-10: var(--hot-color-blue-900);
77
+ --wa-color-blue-05: var(--hot-color-blue-950);
78
+ --wa-color-blue: var(--wa-color-blue-50);
79
+ --wa-color-blue-key: 50;
80
+
81
+ --wa-color-gray-95: var(--hot-color-gray-50);
82
+ --wa-color-gray-90: var(--hot-color-gray-100);
83
+ --wa-color-gray-80: var(--hot-color-gray-200);
84
+ --wa-color-gray-70: var(--hot-color-gray-300);
85
+ --wa-color-gray-60: var(--hot-color-gray-400);
86
+ --wa-color-gray-50: var(--hot-color-gray-500);
87
+ --wa-color-gray-40: var(--hot-color-gray-600);
88
+ --wa-color-gray-30: var(--hot-color-gray-700);
89
+ --wa-color-gray-20: var(--hot-color-gray-800);
90
+ --wa-color-gray-10: var(--hot-color-gray-900);
91
+ --wa-color-gray-05: var(--hot-color-gray-950);
92
+ --wa-color-gray: var(--wa-color-gray-40);
93
+ --wa-color-gray-key: 40;
94
+
95
+ /* Check the defaults at https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/color/palettes/default.css */
96
+ /* No change made to: purple, indigo, pink, green */
97
+
98
+ --wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */;
99
+ --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */;
100
+ --wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */;
101
+ --wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */;
102
+ --wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */;
103
+ --wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */;
104
+ --wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */;
105
+ --wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */;
106
+ --wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */;
107
+ --wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */;
108
+ --wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */;
109
+ --wa-color-green: var(--wa-color-green-60);
110
+ --wa-color-green-key: 60;
111
+
112
+ --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */;
113
+ --wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */;
114
+ --wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */;
115
+ --wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */;
116
+ --wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */;
117
+ --wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */;
118
+ --wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */;
119
+ --wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */;
120
+ --wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */;
121
+ --wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */;
122
+ --wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */;
123
+ --wa-color-indigo: var(--wa-color-indigo-50);
124
+ --wa-color-indigo-key: 50;
125
+
126
+ --wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */;
127
+ --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */;
128
+ --wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */;
129
+ --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */;
130
+ --wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */;
131
+ --wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */;
132
+ --wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */;
133
+ --wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */;
134
+ --wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */;
135
+ --wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */;
136
+ --wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */;
137
+ --wa-color-purple: var(--wa-color-purple-50);
138
+ --wa-color-purple-key: 50;
139
+
140
+ --wa-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */;
141
+ --wa-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */;
142
+ --wa-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */;
143
+ --wa-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */;
144
+ --wa-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */;
145
+ --wa-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */;
146
+ --wa-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */;
147
+ --wa-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */;
148
+ --wa-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */;
149
+ --wa-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */;
150
+ --wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */;
151
+ --wa-color-pink: var(--wa-color-pink-50);
152
+ --wa-color-pink-key: 50;
153
+
154
+ /*
155
+ * Typography
156
+ *
157
+ * See https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/themes/default.css for all options
158
+ */
159
+ /* */
160
+
161
+ /* Fonts */
162
+ --wa-font-family-body: var(--hot-font-sans);
163
+ --wa-font-family-heading: var(--hot-font-sans-variant);
164
+ --wa-font-family-code: var(--hot-font-mono);
165
+ --wa-font-family-longform: var(--hot-font-sefif);
166
+
167
+ /* Font sizes */
168
+ --wa-font-size-2xs: var(--hot-font-size-2x-small); /* 10px */
169
+ --wa-font-size-xs: var(--hot-font-size-x-small); /* 12px */
170
+ --wa-font-size-s: var(--hot-font-size-small); /* 14px */
171
+ --wa-font-size-m: var(--hot-font-size-medium); /* 16px */
172
+ --wa-font-size-l: var(--hot-font-size-large); /* 20px */
173
+ --wa-font-size-xl: var(--hot-font-size-x-large); /* 24px */
174
+ --wa-font-size-2xl: var(--hot-font-size-2x-large); /* 36px */
175
+ --wa-font-size-3xl: var(--hot-font-size-3x-large); /* 48px */
176
+ --wa-font-size-4xl: var(--hot-font-size-4x-large); /* 72px */
177
+ /* Note: `wa-font-size-scale` and `wa-font-size-smaller` / `larger` have no direct `hot-` match.
178
+ They depend on calc() so we set no overrides here. */
179
+
180
+ /* Font weights */
181
+ --wa-font-weight-light: var(--hot-font-weight-light);
182
+ --wa-font-weight-normal: var(--hot-font-weight-normal);
183
+ --wa-font-weight-semibold: var(--hot-font-weight-semibold);
184
+ --wa-font-weight-bold: var(--hot-font-weight-bold);
185
+
186
+ /* Functional font weights */
187
+ --wa-font-weight-body: var(--wa-font-weight-normal);
188
+ --wa-font-weight-heading: var(--wa-font-weight-bold);
189
+ --wa-font-weight-code: var(--wa-font-weight-normal);
190
+ --wa-font-weight-longform: var(--wa-font-weight-normal);
191
+ --wa-font-weight-action: var(--wa-font-weight-semibold);
192
+
193
+ /* Line heights */
194
+ --wa-line-height-condensed: var(--hot-line-height-denser);
195
+ --wa-line-height-normal: var(--hot-line-height-normal);
196
+ --wa-line-height-expanded: var(--hot-line-height-looser);
197
+
198
+ /*
199
+ * Spacing, rounding, etc
200
+ *
201
+ * See https://early.webawesome.com/webawesome@3.0.0-beta.1/dist/styles/themes/default.css for all options
202
+ */
203
+ /* */
204
+
205
+ --wa-space-3xs: var(--hot-spacing-3x-small); /* 2px */
206
+ --wa-space-2xs: var(--hot-spacing-2x-small); /* 4px */
207
+ --wa-space-xs: var(--hot-spacing-x-small); /* 8px */
208
+ --wa-space-s: var(--hot-spacing-small); /* 12px */
209
+ --wa-space-m: var(--hot-spacing-medium); /* 16px */
210
+ --wa-space-l: var(--hot-spacing-large); /* 20px */
211
+ --wa-space-xl: var(--hot-spacing-x-large); /* 28px */
212
+ --wa-space-2xl: var(--hot-spacing-2x-large); /* 36px */
213
+ --wa-space-3xl: var(--hot-spacing-3x-large); /* 48px */
214
+ --wa-space-4xl: var(--hot-spacing-4x-large); /* 72px */
215
+
216
+ --wa-border-radius-s: var(--hot-border-radius-small); /* 3px */
217
+ --wa-border-radius-m: var(--hot-border-radius-medium); /* 4px */
218
+ --wa-border-radius-l: var(--hot-border-radius-large); /* 8px */
219
+ --wa-border-radius-pill: var(--hot-border-radius-pill); /* 9999px */
220
+ --wa-border-radius-circle: var(--hot-border-radius-circle); /* 50% */
221
+ }
222
+ }
package/dist/themes/hot.css CHANGED
@@ -1,235 +1,187 @@
1
-
2
1
  /* HOT theme */
3
2
 
3
+ /* :root makes them available globally */
4
4
  :root,
5
+ /* :host is for Web Components and shadow DOM scopes */
5
6
  :host,
7
+ /* .hot-theme-light allows scoping if you apply that class conditionally */
6
8
  .hot-theme-light {
7
-
8
9
  /*
9
- * Color primitives
10
- */
11
-
12
- /* red - red */
13
-
14
- --hot-color-red-950: #A52A28;
15
- --hot-color-red-900: #B9302D;
16
- --hot-color-red-800: #B83032;
17
- --hot-color-red-700: #C53639;
18
- --hot-color-red-600: #D73F3F;
19
- --hot-color-red-500: #F34D47;
20
- --hot-color-red-400: #ED5C5E;
21
- --hot-color-red-300: #E27A7D;
22
- --hot-color-red-200: #EC9EA1;
23
- --hot-color-red-100: #FDD0D6;
24
- --hot-color-red-50: #FEECEF;
25
-
26
- /* rose - persian plum */
27
-
28
- --hot-color-rose-950: #3E030B;
29
- --hot-color-rose-900: #4B040E;
30
- --hot-color-rose-800: #5C1517;
31
- --hot-color-rose-700: #6B231D;
32
- --hot-color-rose-600: #7C2E26;
33
- --hot-color-rose-500: #7D463F;
34
- --hot-color-rose-400: #9E6960;
35
- --hot-color-rose-300: #B3837B;
36
- --hot-color-rose-200: #CFA59E;
37
- --hot-color-rose-100: #EAC7C0;
38
- --hot-color-rose-50: #FFE6DE;
39
-
40
- /* yellow - bright yellow */
41
-
42
- --hot-color-yellow-950: #CC6508;
43
- --hot-color-yellow-900: #E8750C;
44
- --hot-color-yellow-800: #F77D0F;
45
- --hot-color-yellow-700: #FAA71E;
46
- --hot-color-yellow-600: #FCBF26;
47
- --hot-color-yellow-500: #FED82E;
48
- --hot-color-yellow-400: #FAE62E;
49
- --hot-color-yellow-300: #FDEB51;
50
- --hot-color-yellow-200: #FFF072;
51
- --hot-color-yellow-100: #FFF59B;
52
- --hot-color-yellow-50: #FFF9C3;
53
-
54
- /* blue - space cadet */
55
-
56
- --hot-color-blue-950: #111C31;
57
- --hot-color-blue-900: #182642;
58
- --hot-color-blue-800: #20365B;
59
- --hot-color-blue-700: #263F68;
60
- --hot-color-blue-600: #2E4873;
61
- --hot-color-blue-500: #344F7B;
62
- --hot-color-blue-400: #53688B;
63
- --hot-color-blue-300: #71829E;
64
- --hot-color-blue-200: #97A5BA;
65
- --hot-color-blue-100: #BFC8D6;
66
- --hot-color-blue-50: #E6E9EE;
67
-
68
- /* cyan - cadet blue */
69
-
70
- --hot-color-cyan-950: #2B514F;
71
- --hot-color-cyan-900: #366361;
72
- --hot-color-cyan-800: #408789;
73
- --hot-color-cyan-700: #459BA0;
74
- --hot-color-cyan-600: #4BB1B9;
75
- --hot-color-cyan-500: #50C1CB;
76
- --hot-color-cyan-400: #58CBD1;
77
- --hot-color-cyan-300: #6AD4D9;
78
- --hot-color-cyan-200: #8FE1E3;
79
- --hot-color-cyan-100: #B9EDED;
80
- --hot-color-cyan-50: #E3F8F8;
81
-
82
- /* gray - dark slate gray */
83
-
84
- --hot-color-gray-950: #2C3038;
85
- --hot-color-gray-900: #404248;
86
- --hot-color-gray-800: #515057;
87
- --hot-color-gray-700: #615F66;
88
- --hot-color-gray-600: #716F73;
89
- --hot-color-gray-500: #828085;
90
- --hot-color-gray-400: #9A969B;
91
- --hot-color-gray-300: #B3B0B3;
92
- --hot-color-gray-200: #C4C3C5;
93
- --hot-color-gray-100: #E1E0E1;
94
- --hot-color-gray-50: #F3F3F3;
95
-
96
- /* neutral - black & white */
97
-
98
- --hot-color-neutral-1000: #000;
99
- --hot-color-neutral-0: #fff;
10
+ * Color primitives
11
+ */
12
+
13
+ /* red - red */
14
+
15
+ --hot-color-red-950: #A52A28;
16
+ --hot-color-red-900: #B9302D;
17
+ --hot-color-red-800: #B83032;
18
+ --hot-color-red-700: #C53639;
19
+ --hot-color-red-600: #D73F3F;
20
+ --hot-color-red-500: #F34D47;
21
+ --hot-color-red-400: #ED5C5E;
22
+ --hot-color-red-300: #E27A7D;
23
+ --hot-color-red-200: #EC9EA1;
24
+ --hot-color-red-100: #FDD0D6;
25
+ --hot-color-red-50: #FEECEF;
26
+
27
+ /* rose - persian plum */
28
+
29
+ --hot-color-rose-950: #3E030B;
30
+ --hot-color-rose-900: #4B040E;
31
+ --hot-color-rose-800: #5C1517;
32
+ --hot-color-rose-700: #6B231D;
33
+ --hot-color-rose-600: #7C2E26;
34
+ --hot-color-rose-500: #7D463F;
35
+ --hot-color-rose-400: #9E6960;
36
+ --hot-color-rose-300: #B3837B;
37
+ --hot-color-rose-200: #CFA59E;
38
+ --hot-color-rose-100: #EAC7C0;
39
+ --hot-color-rose-50: #FFE6DE;
40
+
41
+ /* yellow - bright yellow */
42
+
43
+ --hot-color-yellow-950: #CC6508;
44
+ --hot-color-yellow-900: #E8750C;
45
+ --hot-color-yellow-800: #F77D0F;
46
+ --hot-color-yellow-700: #FAA71E;
47
+ --hot-color-yellow-600: #FCBF26;
48
+ --hot-color-yellow-500: #FED82E;
49
+ --hot-color-yellow-400: #FAE62E;
50
+ --hot-color-yellow-300: #FDEB51;
51
+ --hot-color-yellow-200: #FFF072;
52
+ --hot-color-yellow-100: #FFF59B;
53
+ --hot-color-yellow-50: #FFF9C3;
54
+
55
+ /* blue - space cadet */
56
+
57
+ --hot-color-blue-950: #111C31;
58
+ --hot-color-blue-900: #182642;
59
+ --hot-color-blue-800: #20365B;
60
+ --hot-color-blue-700: #263F68;
61
+ --hot-color-blue-600: #2E4873;
62
+ --hot-color-blue-500: #344F7B;
63
+ --hot-color-blue-400: #53688B;
64
+ --hot-color-blue-300: #71829E;
65
+ --hot-color-blue-200: #97A5BA;
66
+ --hot-color-blue-100: #BFC8D6;
67
+ --hot-color-blue-50: #E6E9EE;
68
+
69
+ /* cyan - cadet blue */
70
+
71
+ --hot-color-cyan-950: #2B514F;
72
+ --hot-color-cyan-900: #366361;
73
+ --hot-color-cyan-800: #408789;
74
+ --hot-color-cyan-700: #459BA0;
75
+ --hot-color-cyan-600: #4BB1B9;
76
+ --hot-color-cyan-500: #50C1CB;
77
+ --hot-color-cyan-400: #58CBD1;
78
+ --hot-color-cyan-300: #6AD4D9;
79
+ --hot-color-cyan-200: #8FE1E3;
80
+ --hot-color-cyan-100: #B9EDED;
81
+ --hot-color-cyan-50: #E3F8F8;
82
+
83
+ /* gray - dark slate gray */
84
+
85
+ --hot-color-gray-950: #2C3038;
86
+ --hot-color-gray-900: #404248;
87
+ --hot-color-gray-800: #515057;
88
+ --hot-color-gray-700: #615F66;
89
+ --hot-color-gray-600: #716F73;
90
+ --hot-color-gray-500: #828085;
91
+ --hot-color-gray-400: #9A969B;
92
+ --hot-color-gray-300: #B3B0B3;
93
+ --hot-color-gray-200: #C4C3C5;
94
+ --hot-color-gray-100: #E1E0E1;
95
+ --hot-color-gray-50: #F3F3F3;
100
96
 
101
97
  /*
102
- * Color tokens
103
- */
104
-
105
- --hot-color-primary-950: var(--hot-color-red-950);
106
- --hot-color-primary-900: var(--hot-color-red-900);
107
- --hot-color-primary-800: var(--hot-color-red-800);
108
- --hot-color-primary-700: var(--hot-color-red-700);
109
- --hot-color-primary-600: var(--hot-color-red-600);
110
- --hot-color-primary-500: var(--hot-color-red-500);
111
- --hot-color-primary-400: var(--hot-color-red-400);
112
- --hot-color-primary-300: var(--hot-color-red-300);
113
- --hot-color-primary-200: var(--hot-color-red-200);
114
- --hot-color-primary-100: var(--hot-color-red-100);
115
- --hot-color-primary-50: var(--hot-color-red-50);
116
-
117
- --hot-color-danger-950: var(--hot-color-rose-950);
118
- --hot-color-danger-900: var(--hot-color-rose-900);
119
- --hot-color-danger-800: var(--hot-color-rose-800);
120
- --hot-color-danger-700: var(--hot-color-rose-700);
121
- --hot-color-danger-600: var(--hot-color-rose-600);
122
- --hot-color-danger-500: var(--hot-color-rose-500);
123
- --hot-color-danger-400: var(--hot-color-rose-400);
124
- --hot-color-danger-300: var(--hot-color-rose-300);
125
- --hot-color-danger-200: var(--hot-color-rose-200);
126
- --hot-color-danger-100: var(--hot-color-rose-100);
127
- --hot-color-danger-50: var(--hot-color-rose-50);
128
-
129
- --hot-color-neutral-950: var(--hot-color-gray-950);
130
- --hot-color-neutral-900: var(--hot-color-gray-900);
131
- --hot-color-neutral-800: var(--hot-color-gray-800);
132
- --hot-color-neutral-700: var(--hot-color-gray-700);
133
- --hot-color-neutral-600: var(--hot-color-gray-600);
134
- --hot-color-neutral-500: var(--hot-color-gray-500);
135
- --hot-color-neutral-400: var(--hot-color-gray-400);
136
- --hot-color-neutral-300: var(--hot-color-gray-300);
137
- --hot-color-neutral-200: var(--hot-color-gray-200);
138
- --hot-color-neutral-100: var(--hot-color-gray-100);
139
- --hot-color-neutral-50: var(--hot-color-gray-50);
140
-
141
- --hot-color-success-950: var(--hot-color-cyan-950);
142
- --hot-color-success-900: var(--hot-color-cyan-900);
143
- --hot-color-success-800: var(--hot-color-cyan-800);
144
- --hot-color-success-700: var(--hot-color-cyan-700);
145
- --hot-color-success-600: var(--hot-color-cyan-600);
146
- --hot-color-success-500: var(--hot-color-cyan-500);
147
- --hot-color-success-400: var(--hot-color-cyan-400);
148
- --hot-color-success-300: var(--hot-color-cyan-300);
149
- --hot-color-success-200: var(--hot-color-cyan-200);
150
- --hot-color-success-100: var(--hot-color-cyan-100);
151
- --hot-color-success-50: var(--hot-color-cyan-50);
152
-
153
- --hot-color-warning-950: var(--hot-color-yellow-950);
154
- --hot-color-warning-900: var(--hot-color-yellow-900);
155
- --hot-color-warning-800: var(--hot-color-yellow-800);
156
- --hot-color-warning-700: var(--hot-color-yellow-700);
157
- --hot-color-warning-600: var(--hot-color-yellow-600);
158
- --hot-color-warning-500: var(--hot-color-yellow-500);
159
- --hot-color-warning-400: var(--hot-color-yellow-400);
160
- --hot-color-warning-300: var(--hot-color-yellow-300);
161
- --hot-color-warning-200: var(--hot-color-yellow-200);
162
- --hot-color-warning-100: var(--hot-color-yellow-100);
163
- --hot-color-warning-50: var(--hot-color-yellow-50);
164
-
165
- /*
166
98
  * Typography
167
99
  */
168
100
 
169
- /* Fonts */
170
- --hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif,
171
- 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
172
- --hot-font-sans-variant: 'Barlow Condensed';
173
- --hot-font-sefif: Georgia, 'Times New Roman', serif;
174
- --hot-font-mono: Menlo, Monaco, Consolas, 'Courier New',
175
- monospace, Consolas, 'Liberation Mono', Menlo, monospace;
176
-
177
- /* Font sizes */
178
- --hot-font-size-2x-small: 0.625rem; /* 10px */
179
- --hot-font-size-x-small: 0.75rem; /* 12px */
180
- --hot-font-size-small: 0.875rem; /* 14px */
181
- --hot-font-size-medium: 1rem; /* 16px */
182
- --hot-font-size-large: 1.25rem; /* 20px */
183
- --hot-font-size-x-large: 1.5rem; /* 24px */
184
- --hot-font-size-2x-large: 2.25rem; /* 36px */
185
- --hot-font-size-3x-large: 3rem; /* 48px */
186
- --hot-font-size-4x-large: 4.5rem; /* 72px */
187
-
188
- /* Font weights */
189
- --hot-font-weight-light: 300;
190
- --hot-font-weight-normal: 400;
191
- --hot-font-weight-semibold: 500;
192
- --hot-font-weight-bold: 700;
193
-
194
- /* Letter spacings */
195
- --hot-letter-spacing-denser: -0.03em;
196
- --hot-letter-spacing-dense: -0.015em;
197
- --hot-letter-spacing-normal: normal;
198
- --hot-letter-spacing-loose: 0.075em;
199
- --hot-letter-spacing-looser: 0.15em;
200
-
201
- /* Line heights */
202
- --hot-line-height-denser: 1;
203
- --hot-line-height-dense: 1.4;
204
- --hot-line-height-normal: 1.8;
205
- --hot-line-height-loose: 2.2;
206
- --hot-line-height-looser: 2.6;
101
+ /* Fonts */
102
+ --hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
103
+ --hot-font-sans-variant: 'Barlow';
104
+ --hot-font-sans-variant-condensed: 'Barlow Condensed';
105
+ --hot-font-sefif: Georgia, 'Times New Roman', serif;
106
+ --hot-font-mono: Menlo, Monaco, Consolas, 'Courier New', monospace, Consolas, 'Liberation Mono', Menlo, monospace;
107
+
108
+ /* Font sizes */
109
+ --hot-font-size-2x-small: 0.625rem;
110
+ /* 10px */
111
+ --hot-font-size-x-small: 0.75rem;
112
+ /* 12px */
113
+ --hot-font-size-small: 0.875rem;
114
+ /* 14px */
115
+ --hot-font-size-medium: 1rem;
116
+ /* 16px */
117
+ --hot-font-size-large: 1.25rem;
118
+ /* 20px */
119
+ --hot-font-size-x-large: 1.5rem;
120
+ /* 24px */
121
+ --hot-font-size-2x-large: 2.25rem;
122
+ /* 36px */
123
+ --hot-font-size-3x-large: 3rem;
124
+ /* 48px */
125
+ --hot-font-size-4x-large: 4.5rem;
126
+ /* 72px */
127
+
128
+ /* Font weights */
129
+ --hot-font-weight-light: 300;
130
+ --hot-font-weight-normal: 400;
131
+ --hot-font-weight-semibold: 500;
132
+ --hot-font-weight-bold: 700;
133
+
134
+ /* Letter spacings */
135
+ --hot-letter-spacing-denser: -0.03em;
136
+ --hot-letter-spacing-dense: -0.015em;
137
+ --hot-letter-spacing-normal: normal;
138
+ --hot-letter-spacing-loose: 0.075em;
139
+ --hot-letter-spacing-looser: 0.15em;
140
+
141
+ /* Line heights */
142
+ --hot-line-height-denser: 1;
143
+ --hot-line-height-dense: 1.4;
144
+ --hot-line-height-normal: 1.8;
145
+ --hot-line-height-loose: 2.2;
146
+ --hot-line-height-looser: 2.6;
207
147
 
208
148
  /*
209
149
  * Spacings
210
150
  */
211
151
 
212
- --hot-spacing-3x-small: 0.125rem; /* 2px */
213
- --hot-spacing-2x-small: 0.25rem; /* 4px */
214
- --hot-spacing-x-small: 0.5rem; /* 8px */
215
- --hot-spacing-small: 0.75rem; /* 12px */
216
- --hot-spacing-medium: 1rem; /* 16px */
217
- --hot-spacing-large: 1.25rem; /* 20px */
218
- --hot-spacing-x-large: 1.75rem; /* 28px */
219
- --hot-spacing-2x-large: 2.25rem; /* 36px */
220
- --hot-spacing-3x-large: 3rem; /* 48px */
221
- --hot-spacing-4x-large: 4.5rem; /* 72px */
222
-
223
- /*
152
+ --hot-spacing-3x-small: 0.125rem;
153
+ /* 2px */
154
+ --hot-spacing-2x-small: 0.25rem;
155
+ /* 4px */
156
+ --hot-spacing-x-small: 0.5rem;
157
+ /* 8px */
158
+ --hot-spacing-small: 0.75rem;
159
+ /* 12px */
160
+ --hot-spacing-medium: 1rem;
161
+ /* 16px */
162
+ --hot-spacing-large: 1.25rem;
163
+ /* 20px */
164
+ --hot-spacing-x-large: 1.75rem;
165
+ /* 28px */
166
+ --hot-spacing-2x-large: 2.25rem;
167
+ /* 36px */
168
+ --hot-spacing-3x-large: 3rem;
169
+ /* 48px */
170
+ --hot-spacing-4x-large: 4.5rem;
171
+ /* 72px */
172
+
173
+ /*
224
174
  * Border radius
225
175
  */
226
176
 
227
- --hot-border-radius-small: 0.1875rem; /* 3px */
228
- --hot-border-radius-medium: 0.25rem; /* 4px */
229
- --hot-border-radius-large: 0.5rem; /* 8px */
230
- --hot-border-radius-x-large: 1rem; /* 16px */
177
+ --hot-border-radius-small: 0.1875rem;
178
+ /* 3px */
179
+ --hot-border-radius-medium: 0.25rem;
180
+ /* 4px */
181
+ --hot-border-radius-large: 0.5rem;
182
+ /* 8px */
183
+ --hot-border-radius-x-large: 1rem;
184
+ /* 16px */
231
185
  --hot-border-radius-circle: 50%;
232
186
  --hot-border-radius-pill: 9999px;
233
-
234
187
  }
235
-
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hotosm/ui",
3
- "version": "0.3.1-b5",
3
+ "version": "0.3.1-b6",
4
4
  "description": "Shared UI components with HOT theming.",
5
5
  "homepage": "https://github.com/hotosm/ui#readme",
6
6
  "author": {
package/dist/themes/hot-wa.css DELETED
@@ -1,179 +0,0 @@
1
-
2
- /* HOT theme for Shoelace */
3
-
4
-
5
- :root,
6
- :host,
7
- .wa-theme-light {
8
-
9
- /*
10
- * Color primitives
11
- */
12
-
13
- /* red - red */
14
-
15
- --wa-color-red-950: #A52A28;
16
- --wa-color-red-900: #B9302D;
17
- --wa-color-red-800: #B83032;
18
- --wa-color-red-700: #C53639;
19
- --wa-color-red-600: #D73F3F;
20
- --wa-color-red-500: #F34D47;
21
- --wa-color-red-400: #ED5C5E;
22
- --wa-color-red-300: #E27A7D;
23
- --wa-color-red-200: #EC9EA1;
24
- --wa-color-red-100: #FDD0D6;
25
- --wa-color-red-50: #FEECEF;
26
-
27
- /* rose - persian plum */
28
-
29
- --wa-color-rose-950: #3E030B;
30
- --wa-color-rose-900: #4B040E;
31
- --wa-color-rose-800: #5C1517;
32
- --wa-color-rose-700: #6B231D;
33
- --wa-color-rose-600: #7C2E26;
34
- --wa-color-rose-500: #7D463F;
35
- --wa-color-rose-400: #9E6960;
36
- --wa-color-rose-300: #B3837B;
37
- --wa-color-rose-200: #CFA59E;
38
- --wa-color-rose-100: #EAC7C0;
39
- --wa-color-rose-50: #FFE6DE;
40
-
41
- /* yellow - bright yellow */
42
-
43
- --wa-color-yellow-950: #CC6508;
44
- --wa-color-yellow-900: #E8750C;
45
- --wa-color-yellow-800: #F77D0F;
46
- --wa-color-yellow-700: #FAA71E;
47
- --wa-color-yellow-600: #FCBF26;
48
- --wa-color-yellow-500: #FED82E;
49
- --wa-color-yellow-400: #FAE62E;
50
- --wa-color-yellow-300: #FDEB51;
51
- --wa-color-yellow-200: #FFF072;
52
- --wa-color-yellow-100: #FFF59B;
53
- --wa-color-yellow-50: #FFF9C3;
54
-
55
- /* blue - space cadet */
56
-
57
- --wa-color-blue-950: #111C31;
58
- --wa-color-blue-900: #182642;
59
- --wa-color-blue-800: #20365B;
60
- --wa-color-blue-700: #263F68;
61
- --wa-color-blue-600: #2E4873;
62
- --wa-color-blue-500: #344F7B;
63
- --wa-color-blue-400: #53688B;
64
- --wa-color-blue-300: #71829E;
65
- --wa-color-blue-200: #97A5BA;
66
- --wa-color-blue-100: #BFC8D6;
67
- --wa-color-blue-50: #E6E9EE;
68
-
69
- /* cyan - cadet blue */
70
-
71
- --wa-color-cyan-950: #2B514F;
72
- --wa-color-cyan-900: #366361;
73
- --wa-color-cyan-800: #408789;
74
- --wa-color-cyan-700: #459BA0;
75
- --wa-color-cyan-600: #4BB1B9;
76
- --wa-color-cyan-500: #50C1CB;
77
- --wa-color-cyan-400: #58CBD1;
78
- --wa-color-cyan-300: #6AD4D9;
79
- --wa-color-cyan-200: #8FE1E3;
80
- --wa-color-cyan-100: #B9EDED;
81
- --wa-color-cyan-50: #E3F8F8;
82
-
83
- /* gray - dark slate gray */
84
-
85
- --wa-color-gray-950: #2C3038;
86
- --wa-color-gray-900: #404248;
87
- --wa-color-gray-800: #515057;
88
- --wa-color-gray-700: #615F66;
89
- --wa-color-gray-600: #716F73;
90
- --wa-color-gray-500: #828085;
91
- --wa-color-gray-400: #9A969B;
92
- --wa-color-gray-300: #B3B0B3;
93
- --wa-color-gray-200: #C4C3C5;
94
- --wa-color-gray-100: #E1E0E1;
95
- --wa-color-gray-50: #F3F3F3;
96
-
97
- /* neutral - black & white */
98
-
99
- --wa-color-neutral-1000: #000;
100
- --wa-color-neutral-0: #fff;
101
-
102
- /*
103
- * Color tokens
104
- */
105
-
106
- --wa-color-primary-950: var(--wa-color-red-950);
107
- --wa-color-primary-900: var(--wa-color-red-900);
108
- --wa-color-primary-800: var(--wa-color-red-800);
109
- --wa-color-primary-700: var(--wa-color-red-700);
110
- --wa-color-primary-600: var(--wa-color-red-600);
111
- --wa-color-primary-500: var(--wa-color-red-500);
112
- --wa-color-primary-400: var(--wa-color-red-400);
113
- --wa-color-primary-300: var(--wa-color-red-300);
114
- --wa-color-primary-200: var(--wa-color-red-200);
115
- --wa-color-primary-100: var(--wa-color-red-100);
116
- --wa-color-primary-50: var(--wa-color-red-50);
117
-
118
- --wa-color-danger-950: var(--wa-color-rose-950);
119
- --wa-color-danger-900: var(--wa-color-rose-900);
120
- --wa-color-danger-800: var(--wa-color-rose-800);
121
- --wa-color-danger-700: var(--wa-color-rose-700);
122
- --wa-color-danger-600: var(--wa-color-rose-600);
123
- --wa-color-danger-500: var(--wa-color-rose-500);
124
- --wa-color-danger-400: var(--wa-color-rose-400);
125
- --wa-color-danger-300: var(--wa-color-rose-300);
126
- --wa-color-danger-200: var(--wa-color-rose-200);
127
- --wa-color-danger-100: var(--wa-color-rose-100);
128
- --wa-color-danger-50: var(--wa-color-rose-50);
129
-
130
- --wa-color-neutral-950: var(--wa-color-gray-950);
131
- --wa-color-neutral-900: var(--wa-color-gray-900);
132
- --wa-color-neutral-800: var(--wa-color-gray-800);
133
- --wa-color-neutral-700: var(--wa-color-gray-700);
134
- --wa-color-neutral-600: var(--wa-color-gray-600);
135
- --wa-color-neutral-500: var(--wa-color-gray-500);
136
- --wa-color-neutral-400: var(--wa-color-gray-400);
137
- --wa-color-neutral-300: var(--wa-color-gray-300);
138
- --wa-color-neutral-200: var(--wa-color-gray-200);
139
- --wa-color-neutral-100: var(--wa-color-gray-100);
140
- --wa-color-neutral-50: var(--wa-color-gray-50);
141
-
142
- --wa-color-success-950: var(--wa-color-cyan-950);
143
- --wa-color-success-900: var(--wa-color-cyan-900);
144
- --wa-color-success-800: var(--wa-color-cyan-800);
145
- --wa-color-success-700: var(--wa-color-cyan-700);
146
- --wa-color-success-600: var(--wa-color-cyan-600);
147
- --wa-color-success-500: var(--wa-color-cyan-500);
148
- --wa-color-success-400: var(--wa-color-cyan-400);
149
- --wa-color-success-300: var(--wa-color-cyan-300);
150
- --wa-color-success-200: var(--wa-color-cyan-200);
151
- --wa-color-success-100: var(--wa-color-cyan-100);
152
- --wa-color-success-50: var(--wa-color-cyan-50);
153
-
154
- --wa-color-warning-950: var(--wa-color-yellow-950);
155
- --wa-color-warning-900: var(--wa-color-yellow-900);
156
- --wa-color-warning-800: var(--wa-color-yellow-800);
157
- --wa-color-warning-700: var(--wa-color-yellow-700);
158
- --wa-color-warning-600: var(--wa-color-yellow-600);
159
- --wa-color-warning-500: var(--wa-color-yellow-500);
160
- --wa-color-warning-400: var(--wa-color-yellow-400);
161
- --wa-color-warning-300: var(--wa-color-yellow-300);
162
- --wa-color-warning-200: var(--wa-color-yellow-200);
163
- --wa-color-warning-100: var(--wa-color-yellow-100);
164
- --wa-color-warning-50: var(--wa-color-yellow-50);
165
-
166
- /*
167
- * Typography
168
- */
169
-
170
- /* Fonts */
171
- --wa-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif,
172
- 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
173
- --wa-font-sans-variant: 'Barlow Condensed';
174
- --wa-font-sefif: Georgia, 'Times New Roman', serif;
175
- --wa-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
176
-
177
-
178
- }
179
-