@hotosm/ui 0.3.1-b4 → 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.
- package/README.md +87 -72
- package/dist/chunks/chunk.2MK55PUE.js +700 -0
- package/dist/chunks/{callout.USQGOL5A.js → chunk.3NBBS2A2.js} +2 -2
- package/dist/chunks/chunk.456NATDG.js +1 -0
- package/dist/chunks/{chunk.4YLAIDAG.js → chunk.7RJ72M75.js} +3 -3
- package/dist/chunks/chunk.AIZM63SF.js +669 -0
- package/dist/chunks/chunk.BM3GXGCS.js +1 -0
- package/dist/chunks/{chunk.OVCI43FD.js → chunk.MIYFUINI.js} +2 -2
- package/dist/chunks/{chunk.NQHNA5TA.js → chunk.PDLGEB7T.js} +3 -3
- package/dist/chunks/chunk.SZ46YTWY.js +1 -0
- package/dist/chunks/chunk.YYEOK7MA.js +1 -0
- package/dist/components/consent/consent.component.d.ts +3 -0
- package/dist/components/consent/consent.component.js +1 -1
- package/dist/components/consent/consent.d.ts +0 -1
- package/dist/components/consent/consent.js +1 -1
- package/dist/components/header/header.component.d.ts +4 -0
- package/dist/components/header/header.component.js +1 -1
- package/dist/components/header/header.d.ts +0 -1
- package/dist/components/header/header.js +1 -1
- package/dist/components/logo/logo.component.js +1 -1
- package/dist/components/logo/logo.d.ts +0 -1
- package/dist/components/logo/logo.js +1 -1
- package/dist/components/tracking/tracking.component.d.ts +3 -0
- package/dist/components/tracking/tracking.component.js +1 -1
- package/dist/components/tracking/tracking.d.ts +0 -1
- package/dist/components/tracking/tracking.js +1 -1
- package/dist/hotosm-ui.d.ts +4 -12
- package/dist/hotosm-ui.js +1 -1
- package/dist/style.css +7 -1
- package/dist/themes/hot-wa-override.css +222 -0
- package/dist/themes/hot.css +165 -213
- package/package.json +1 -1
- package/dist/chunks/button.QMPBLQB7.js +0 -1
- package/dist/chunks/chunk.7VBX4GII.js +0 -1
- package/dist/chunks/chunk.FIQQYKEP.js +0 -14
- package/dist/chunks/chunk.I26W4NHZ.js +0 -460
- package/dist/chunks/chunk.OHRBDQCO.js +0 -45
- package/dist/chunks/chunk.TFICHQZE.js +0 -186
- package/dist/chunks/chunk.XAMKQWQ3.js +0 -92
- package/dist/chunks/dialog.ZJLYCG4P.js +0 -217
- package/dist/chunks/icon.ZB6BUFKB.js +0 -1
- package/dist/chunks/tab-group.M6XGU33J.js +0 -360
- package/dist/themes/hot-wa.css +0 -179
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as e}from"./chunk.AIZM63SF.js";var r=e;customElements.define("hot-header",e);export{r as a};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{a as d}from"./chunk.T4GALJJA.js";import{b as o}from"./chunk.6ZDEZIWM.js";import{a as l}from"./chunk.KO4EOD3I.js";import{e as r,k as c}from"./chunk.U4P7XQR4.js";import{d as s,e as a,f as n,g as i}from"./chunk.NI7UJOOZ.js";l();var u,g,p,b,h,m,v,e=class extends c{constructor(){super(...arguments);this.name="hot-consent";n(this,u,"");n(this,g,!1);n(this,p,!0);n(this,b,"About the information we collect");n(this,h,"We use cookies and similar technologies to recognize and analyze your visits, and measure traffic usage and activity.");n(this,m,"I Agree");n(this,v,"I Do Not Agree")}get consentId(){return a(this,u)}set consentId(t){i(this,u,t)}get force(){return a(this,g)}set force(t){i(this,g,t)}get isOpen(){return a(this,p)}set isOpen(t){i(this,p,t)}get title(){return a(this,b)}set title(t){i(this,b,t)}get message(){return a(this,h)}set message(t){i(this,h,t)}get agreeLabel(){return a(this,m)}set agreeLabel(t){i(this,m,t)}get notAgreeLabel(){return a(this,v)}set notAgreeLabel(t){i(this,v,t)}render(){return this.isOpen?r`
|
|
2
2
|
<div class="consent-overlay">
|
|
3
3
|
<div class="consent-container">
|
|
4
4
|
<wa-callout variant="brand" appearance="outlined filled" size="large" class="consent-callout">
|
|
@@ -33,4 +33,4 @@ import{b as o}from"./chunk.6ZDEZIWM.js";import{a as l}from"./chunk.KO4EOD3I.js";
|
|
|
33
33
|
</wa-callout>
|
|
34
34
|
</div>
|
|
35
35
|
</div>
|
|
36
|
-
`:null}_setAgree(t){this.isOpen=!1,localStorage.setItem(`${this.consentId}-consent-agree`,"true"),this.dispatchEvent(new Event("agree",{bubbles:!0,composed:!0}))}_setDisagree(t){this.isOpen=!1,localStorage.setItem(`${this.consentId}-consent-agree`,"false"),this.dispatchEvent(new Event("disagree",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback();let t=localStorage.getItem(`${this.consentId}-consent-agree`);if(t==="false"){this.isOpen=!1;return}t==="true"&&(this.isOpen=!1)}};
|
|
36
|
+
`:null}_setAgree(t){this.isOpen=!1,localStorage.setItem(`${this.consentId}-consent-agree`,"true"),this.dispatchEvent(new Event("agree",{bubbles:!0,composed:!0}))}_setDisagree(t){this.isOpen=!1,localStorage.setItem(`${this.consentId}-consent-agree`,"false"),this.dispatchEvent(new Event("disagree",{bubbles:!0,composed:!0}))}connectedCallback(){super.connectedCallback();let t=localStorage.getItem(`${this.consentId}-consent-agree`);if(t==="false"){this.isOpen=!1;return}t==="true"&&(this.isOpen=!1)}};u=new WeakMap,g=new WeakMap,p=new WeakMap,b=new WeakMap,h=new WeakMap,m=new WeakMap,v=new WeakMap,e.styles=[d],s([o({type:String,attribute:"consent-id"})],e.prototype,"consentId",1),s([o({type:Boolean})],e.prototype,"force",1),s([o({type:Boolean})],e.prototype,"isOpen",1),s([o({type:String})],e.prototype,"title",1),s([o({type:String})],e.prototype,"message",1),s([o({type:String,attribute:"agree-label"})],e.prototype,"agreeLabel",1),s([o({type:String,attribute:"not-agree-label"})],e.prototype,"notAgreeLabel",1);var O=e;export{e as a,O as b};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{b as c,c as
|
|
1
|
+
import{b as c,c as r}from"./chunk.6ZDEZIWM.js";import{b,e as l,k as u}from"./chunk.U4P7XQR4.js";import{d as a,e as n,f as s,g as i}from"./chunk.NI7UJOOZ.js";var w,m,f,x,v,t=class extends u{constructor(){super(...arguments);this.name="hot-tracking";s(this,w,"");s(this,m,"");s(this,f,"https://matomo.hotosm.org");s(this,x,!0);s(this,v,"We use cookies and similar technologies to help personalize content, tailor and measure ads, and provide a better experience. By clicking 'Accept', you consent to our use of cookies and tracking technologies.");this.consentGiven=!1;this.consentShown=!1;this.errorMessage="";this.showError=!1;this.successMessage="";this.showSuccess=!1;this.infoMessage="";this.showInfo=!1}get siteId(){return n(this,w)}set siteId(e){i(this,w,e)}get domain(){return n(this,m)}set domain(e){i(this,m,e)}get matomoURL(){return n(this,f)}set matomoURL(e){i(this,f,e)}get showConsent(){return n(this,x)}set showConsent(e){i(this,x,e)}get consentMessage(){return n(this,v)}set consentMessage(e){i(this,v,e)}agree(){this.consentGiven=!0,this.consentShown=!1;let e=window._paq=window._paq||[];e.length!==0&&(e.push(["rememberConsentGiven"]),e.push(["trackPageView"]),this.showSuccessCallout("Tracking consent granted. Thank you!"))}disagree(){this.consentGiven=!1,this.consentShown=!1;let e=window._paq=window._paq||[];e.length!==0&&(e.push(["forgetConsentGiven"]),this.showInfoCallout("Tracking disabled. You can change this preference later."))}showConsentBanner(){this.showConsent&&!this.consentGiven&&!this.consentShown&&(this.consentShown=!0)}showErrorCallout(e){this.errorMessage=e,this.showError=!0,setTimeout(()=>{this.showError=!1},1e4)}showSuccessCallout(e){this.successMessage=e,this.showSuccess=!0,setTimeout(()=>{this.showSuccess=!1},5e3)}showInfoCallout(e){this.infoMessage=e,this.showInfo=!0,setTimeout(()=>{this.showInfo=!1},5e3)}render(){return l`
|
|
2
2
|
${this.showError?l`
|
|
3
3
|
<div class="error-banner">
|
|
4
4
|
<wa-callout style="padding: 1rem;" variant="danger" appearance="outlined filled" size="large">
|
|
@@ -54,7 +54,7 @@ import{b as c,c as o}from"./chunk.6ZDEZIWM.js";import{b as u,e as l,k as b}from"
|
|
|
54
54
|
</wa-callout>
|
|
55
55
|
</div>
|
|
56
56
|
`:""}
|
|
57
|
-
`}connectedCallback(){if(super.connectedCallback(),window.location.hostname!==this.domain){this.showErrorCallout(`Matomo tracking is not configured for this domain. Current domain: ${window.location.hostname}, Expected: ${this.domain}`);return}let e=this.siteId;if(e.length===0||this.domain.length===0){this.showErrorCallout("Matomo tracking is not properly configured. Please provide both site-id and domain attributes.");return}console.log(`Setting Matomo tracking for site=${e} domain=${this.domain}`);let
|
|
57
|
+
`}connectedCallback(){if(super.connectedCallback(),window.location.hostname!==this.domain){this.showErrorCallout(`Matomo tracking is not configured for this domain. Current domain: ${window.location.hostname}, Expected: ${this.domain}`);return}let e=this.siteId;if(e.length===0||this.domain.length===0){this.showErrorCallout("Matomo tracking is not properly configured. Please provide both site-id and domain attributes.");return}console.log(`Setting Matomo tracking for site=${e} domain=${this.domain}`);let o=window._paq=window._paq||[];o.push(["requireConsent"]),o.push(["setDomains",[this.domain]]),o.push(["enableLinkTracking"]),o.push(["trackVisibleContentImpressions"]),function(h){o.push(["setTrackerUrl",`${h}/matomo.php`]),o.push(["setSiteId",e]);let g=document,p=g.createElement("script"),d=g.getElementsByTagName("script")[0];(d==null?void 0:d.parentNode)!=null?(p.async=!0,p.src=`${h}/matomo.js`,d.parentNode.insertBefore(p,d)):console.warn("Script insertion failed. Parent node is null.")}(this.matomoURL),setTimeout(()=>{this.showConsentBanner()},1e3)}};w=new WeakMap,m=new WeakMap,f=new WeakMap,x=new WeakMap,v=new WeakMap,t.styles=b`
|
|
58
58
|
:host {
|
|
59
59
|
display: block;
|
|
60
60
|
font-family: var(--wa-font-sans);
|
|
@@ -236,4 +236,4 @@ import{b as c,c as o}from"./chunk.6ZDEZIWM.js";import{b as u,e as l,k as b}from"
|
|
|
236
236
|
width: 100%;
|
|
237
237
|
}
|
|
238
238
|
}
|
|
239
|
-
`,a([c({type:String,attribute:"site-id"})],t.prototype,"siteId",1),a([c({type:String})],t.prototype,"domain",1),a([c({type:String})],t.prototype,"matomoURL",1),a([c({type:Boolean,attribute:"show-consent"})],t.prototype,"showConsent",1),a([c({type:String,attribute:"consent-message"})],t.prototype,"consentMessage",1),a([
|
|
239
|
+
`,a([c({type:String,attribute:"site-id"})],t.prototype,"siteId",1),a([c({type:String})],t.prototype,"domain",1),a([c({type:String})],t.prototype,"matomoURL",1),a([c({type:Boolean,attribute:"show-consent"})],t.prototype,"showConsent",1),a([c({type:String,attribute:"consent-message"})],t.prototype,"consentMessage",1),a([r()],t.prototype,"consentGiven",2),a([r()],t.prototype,"consentShown",2),a([r()],t.prototype,"errorMessage",2),a([r()],t.prototype,"showError",2),a([r()],t.prototype,"successMessage",2),a([r()],t.prototype,"showSuccess",2),a([r()],t.prototype,"infoMessage",2),a([r()],t.prototype,"showInfo",2);var q=t;export{t as a,q as b};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as o}from"./chunk.7RJ72M75.js";var t=o;customElements.define("hot-logo",o);export{t as a};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{b as a}from"./chunk.PDLGEB7T.js";var t=a;customElements.define("hot-tracking",a);export{t as a};
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import '@awesome.me/webawesome/dist/components/callout/callout.js';
|
|
2
|
+
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
|
3
|
+
import '@awesome.me/webawesome/dist/components/button/button.js';
|
|
1
4
|
import { LitElement } from "lit";
|
|
2
5
|
import type { CSSResultGroup } from 'lit';
|
|
3
6
|
export declare class Consent extends LitElement {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a,b}from"../../chunks/chunk.
|
|
1
|
+
import{a,b}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";export{a as Consent,b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a
|
|
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};
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import '@awesome.me/webawesome/dist/components/tab-group/tab-group.js';
|
|
2
|
+
import '@awesome.me/webawesome/dist/components/dialog/dialog.js';
|
|
3
|
+
import '@awesome.me/webawesome/dist/components/button/button.js';
|
|
4
|
+
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
|
1
5
|
import { LitElement } from "lit";
|
|
2
6
|
import { type sizes } from './header.styles.js';
|
|
3
7
|
import type { CSSResultGroup } from 'lit';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a,b}from"../../chunks/chunk.
|
|
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a
|
|
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};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a,b}from"../../chunks/chunk.
|
|
1
|
+
import{a,b}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";export{a as Logo,b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a
|
|
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};
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import '@awesome.me/webawesome/dist/components/callout/callout.js';
|
|
2
|
+
import '@awesome.me/webawesome/dist/components/icon/icon.js';
|
|
3
|
+
import '@awesome.me/webawesome/dist/components/button/button.js';
|
|
1
4
|
import { LitElement } from "lit";
|
|
2
5
|
declare global {
|
|
3
6
|
interface Window {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a,b}from"../../chunks/chunk.
|
|
1
|
+
import{a,b}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";export{a as MatomoTracking,b as default};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{a
|
|
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.
|
|
2
|
-
import HotLogo from './components/logo/logo.
|
|
3
|
-
import HotTracking from './components/tracking/tracking.
|
|
4
|
-
import HotConsent from './components/consent/consent.
|
|
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{
|
|
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
|
-
|
|
7
|
+
/* Import our WebAwesome palette / colour & font override */
|
|
8
|
+
@import 'themes/hot-wa-override.css';
|
|
@@ -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
|
+
}
|