@hotosm/ui 0.3.1-b4 → 0.3.1-b6

package/dist/chunks/tab-group.M6XGU33J.js

@@ -1,360 +0,0 @@
-import{c as y}from"./chunk.7VBX4GII.js";import{a as T,b as m}from"./chunk.I26W4NHZ.js";import{a as h}from"./chunk.OHRBDQCO.js";import"./chunk.TFICHQZE.js";import{a as n,b as v}from"./chunk.FIQQYKEP.js";import{a as p,b as s,c as x,d as u}from"./chunk.6ZDEZIWM.js";import{e as b}from"./chunk.U4P7XQR4.js";import{a as k}from"./chunk.NI7UJOOZ.js";var A=class extends Event{constructor(t){super("wa-tab-hide",{bubbles:!0,cancelable:!1,composed:!0}),this.detail=t}},C=class extends Event{constructor(t){super("wa-tab-show",{bubbles:!0,cancelable:!1,composed:!0}),this.detail=t}},S=`:host {
-  --indicator-color: var(--wa-color-brand-fill-loud);
-  --track-color: var(--wa-color-neutral-fill-normal);
-  --track-width: 0.125rem;
-
-  display: block;
-}
-
-.tab-group {
-  display: flex;
-  border-radius: 0;
-}
-
-.tabs {
-  display: flex;
-  position: relative;
-}
-
-.indicator {
-  position: absolute;
-}
-
-.tab-group-has-scroll-controls .nav-container {
-  position: relative;
-  padding: 0 1.5em;
-}
-
-.body {
-  display: block;
-  overflow: auto;
-}
-
-.scroll-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 1.5em;
-}
-
-.scroll-button-start {
-  inset-inline-start: 0;
-}
-
-.scroll-button-end {
-  inset-inline-end: 0;
-}
-
-/*
-   * Top
-   */
-
-.tab-group-top {
-  flex-direction: column;
-}
-
-.tab-group-top .nav-container {
-  order: 1;
-}
-
-.tab-group-top .nav {
-  display: flex;
-  overflow-x: auto;
-
-  /* Hide scrollbar in Firefox */
-  scrollbar-width: none;
-}
-
-/* Hide scrollbar in Chrome/Safari */
-.tab-group-top .nav::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-.tab-group-top .tabs {
-  flex: 1 1 auto;
-  position: relative;
-  flex-direction: row;
-  border-bottom: solid var(--track-width) var(--track-color);
-}
-
-.tab-group-top .indicator {
-  bottom: calc(-1 * var(--track-width));
-  border-bottom: solid var(--track-width) var(--indicator-color);
-}
-
-.tab-group-top .body {
-  order: 2;
-}
-
-.tab-group-top ::slotted(wa-tab[active]) {
-  border-block-end: solid var(--track-width) var(--indicator-color);
-  margin-block-end: calc(-1 * var(--track-width));
-}
-
-.tab-group-top ::slotted(wa-tab-panel) {
-  --padding: var(--wa-space-xl) 0;
-}
-
-/*
-   * Bottom
-   */
-
-.tab-group-bottom {
-  flex-direction: column;
-}
-
-.tab-group-bottom .nav-container {
-  order: 2;
-}
-
-.tab-group-bottom .nav {
-  display: flex;
-  overflow-x: auto;
-
-  /* Hide scrollbar in Firefox */
-  scrollbar-width: none;
-}
-
-/* Hide scrollbar in Chrome/Safari */
-.tab-group-bottom .nav::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
-.tab-group-bottom .tabs {
-  flex: 1 1 auto;
-  position: relative;
-  flex-direction: row;
-  border-top: solid var(--track-width) var(--track-color);
-}
-
-.tab-group-bottom .indicator {
-  top: calc(-1 * var(--track-width));
-  border-top: solid var(--track-width) var(--indicator-color);
-}
-
-.tab-group-bottom .body {
-  order: 1;
-}
-
-.tab-group-bottom ::slotted(wa-tab[active]) {
-  border-block-start: solid var(--track-width) var(--indicator-color);
-  margin-block-start: calc(-1 * var(--track-width));
-}
-
-.tab-group-bottom ::slotted(wa-tab-panel) {
-  --padding: var(--wa-space-xl) 0;
-}
-
-/*
-   * Start
-   */
-
-.tab-group-start {
-  flex-direction: row;
-}
-
-.tab-group-start .nav-container {
-  order: 1;
-}
-
-.tab-group-start .tabs {
-  flex: 0 0 auto;
-  flex-direction: column;
-  border-inline-end: solid var(--track-width) var(--track-color);
-}
-
-.tab-group-start .indicator {
-  inset-inline-end: calc(-1 * var(--track-width));
-  border-right: solid var(--track-width) var(--indicator-color);
-}
-
-.tab-group-start .body {
-  flex: 1 1 auto;
-  order: 2;
-}
-
-.tab-group-start ::slotted(wa-tab[active]) {
-  border-inline-end: solid var(--track-width) var(--indicator-color);
-  margin-inline-end: calc(-1 * var(--track-width));
-}
-
-.tab-group-start ::slotted(wa-tab-panel) {
-  --padding: 0 var(--wa-space-xl);
-}
-
-/*
-   * End
-   */
-
-.tab-group-end {
-  flex-direction: row;
-}
-
-.tab-group-end .nav-container {
-  order: 2;
-}
-
-.tab-group-end .tabs {
-  flex: 0 0 auto;
-  flex-direction: column;
-  border-left: solid var(--track-width) var(--track-color);
-}
-
-.tab-group-end .indicator {
-  inset-inline-start: calc(-1 * var(--track-width));
-  border-inline-start: solid var(--track-width) var(--indicator-color);
-}
-
-.tab-group-end .body {
-  flex: 1 1 auto;
-  order: 1;
-}
-
-.tab-group-end ::slotted(wa-tab[active]) {
-  border-inline-start: solid var(--track-width) var(--indicator-color);
-  margin-inline-start: calc(-1 * var(--track-width));
-}
-
-.tab-group-end ::slotted(wa-tab-panel) {
-  --padding: 0 var(--wa-space-xl);
-}
-`,i=class extends v{constructor(){super(...arguments),this.tabs=[],this.focusableTabs=[],this.panels=[],this.localize=new T(this),this.hasScrollControls=!1,this.active="",this.placement="top",this.activation="auto",this.withoutScrollControls=!1}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver(()=>{this.updateScrollControls()}),this.mutationObserver=new MutationObserver(t=>{t.some(e=>!["aria-labelledby","aria-controls"].includes(e.attributeName))&&setTimeout(()=>this.setAriaLabels());let a=t.filter(e=>e.target.closest("wa-tab-group")===this);if(a.some(e=>e.attributeName==="disabled"))this.syncTabsAndPanels();else if(a.some(e=>e.attributeName==="active")){let r=a.filter(o=>o.attributeName==="active"&&o.target.tagName.toLowerCase()==="wa-tab").map(o=>o.target).find(o=>o.active);r&&r.closest("wa-tab-group")===this&&this.setActiveTab(r)}}),this.updateComplete.then(()=>{this.syncTabsAndPanels(),this.mutationObserver.observe(this,{attributes:!0,childList:!0,subtree:!0}),this.resizeObserver.observe(this.nav),new IntersectionObserver((a,e)=>{var r;if(a[0].intersectionRatio>0){if(this.setAriaLabels(),this.active){let o=this.tabs.find(w=>w.panel===this.active);o&&this.setActiveTab(o)}else this.setActiveTab((r=this.getActiveTab())!=null?r:this.tabs[0],{emitEvents:!1});e.unobserve(a[0].target)}}).observe(this.tabGroup)})}disconnectedCallback(){var t,a;super.disconnectedCallback(),(t=this.mutationObserver)==null||t.disconnect(),this.nav&&((a=this.resizeObserver)==null||a.unobserve(this.nav))}getAllTabs(){return[...this.shadowRoot.querySelector('slot[name="nav"]').assignedElements()].filter(a=>a.tagName.toLowerCase()==="wa-tab")}getAllPanels(){return[...this.body.assignedElements()].filter(t=>t.tagName.toLowerCase()==="wa-tab-panel")}getActiveTab(){return this.tabs.find(t=>t.active)}handleClick(t){let e=t.target.closest("wa-tab");(e==null?void 0:e.closest("wa-tab-group"))===this&&e!==null&&this.setActiveTab(e,{scrollBehavior:"smooth"})}handleKeyDown(t){let e=t.target.closest("wa-tab");if((e==null?void 0:e.closest("wa-tab-group"))===this){if(["Enter"," "].includes(t.key)){e!==null&&(this.setActiveTab(e,{scrollBehavior:"smooth"}),t.preventDefault());return}if(["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(t.key)){let o=this.tabs.find(d=>d.matches(":focus")),w=this.localize.dir()==="rtl",l=null;if((o==null?void 0:o.tagName.toLowerCase())==="wa-tab"){if(t.key==="Home")l=this.focusableTabs[0];else if(t.key==="End")l=this.focusableTabs[this.focusableTabs.length-1];else if(["top","bottom"].includes(this.placement)&&t.key===(w?"ArrowRight":"ArrowLeft")||["start","end"].includes(this.placement)&&t.key==="ArrowUp"){let d=this.tabs.findIndex(g=>g===o);l=this.findNextFocusableTab(d,"backward")}else if(["top","bottom"].includes(this.placement)&&t.key===(w?"ArrowLeft":"ArrowRight")||["start","end"].includes(this.placement)&&t.key==="ArrowDown"){let d=this.tabs.findIndex(g=>g===o);l=this.findNextFocusableTab(d,"forward")}if(!l)return;l.tabIndex=0,l.focus({preventScroll:!0}),this.activation==="auto"?this.setActiveTab(l,{scrollBehavior:"smooth"}):this.tabs.forEach(d=>{d.tabIndex=d===l?0:-1}),["top","bottom"].includes(this.placement)&&y(l,this.nav,"horizontal"),t.preventDefault()}}}}findNextFocusableTab(t,a){let e=null,r=a==="forward"?1:-1,o=t+r;for(;t<this.tabs.length;){if(e=this.tabs[o]||null,e===null){a==="forward"?e=this.focusableTabs[0]:e=this.focusableTabs[this.focusableTabs.length-1];break}if(!e.disabled)break;o+=r}return e}handleScrollToStart(){this.nav.scroll({left:this.localize.dir()==="rtl"?this.nav.scrollLeft+this.nav.clientWidth:this.nav.scrollLeft-this.nav.clientWidth,behavior:"smooth"})}handleScrollToEnd(){this.nav.scroll({left:this.localize.dir()==="rtl"?this.nav.scrollLeft-this.nav.clientWidth:this.nav.scrollLeft+this.nav.clientWidth,behavior:"smooth"})}setActiveTab(t,a){if(a=k({emitEvents:!0,scrollBehavior:"auto"},a),t.closest("wa-tab-group")===this&&t!==this.activeTab&&!t.disabled){let e=this.activeTab;this.active=t.panel,this.activeTab=t,this.tabs.forEach(r=>{r.active=r===this.activeTab,r.tabIndex=r===this.activeTab?0:-1}),this.panels.forEach(r=>{var o;return r.active=r.name===((o=this.activeTab)==null?void 0:o.panel)}),["top","bottom"].includes(this.placement)&&y(this.activeTab,this.nav,"horizontal",a.scrollBehavior),a.emitEvents&&(e&&this.dispatchEvent(new A({name:e.panel})),this.dispatchEvent(new C({name:this.activeTab.panel})))}}setAriaLabels(){this.tabs.forEach(t=>{let a=this.panels.find(e=>e.name===t.panel);a&&(t.setAttribute("aria-controls",a.getAttribute("id")),a.setAttribute("aria-labelledby",t.getAttribute("id")))})}syncTabsAndPanels(){this.tabs=this.getAllTabs(),this.focusableTabs=this.tabs.filter(t=>!t.disabled),this.panels=this.getAllPanels(),this.updateComplete.then(()=>this.updateScrollControls())}updateActiveTab(){let t=this.tabs.find(a=>a.panel===this.active);t&&this.setActiveTab(t,{scrollBehavior:"smooth"})}updateScrollControls(){this.withoutScrollControls?this.hasScrollControls=!1:this.hasScrollControls=["top","bottom"].includes(this.placement)&&this.nav.scrollWidth>this.nav.clientWidth+1}render(){let t=this.hasUpdated?this.localize.dir()==="rtl":this.dir==="rtl";return b`
-      <div
-        part="base"
-        class=${m({"tab-group":!0,"tab-group-top":this.placement==="top","tab-group-bottom":this.placement==="bottom","tab-group-start":this.placement==="start","tab-group-end":this.placement==="end","tab-group-has-scroll-controls":this.hasScrollControls})}
-        @click=${this.handleClick}
-        @keydown=${this.handleKeyDown}
-      >
-        <div class="nav-container" part="nav">
-          ${this.hasScrollControls?b`
-                <wa-button
-                  part="scroll-button scroll-button-start"
-                  exportparts="base:scroll-button__base"
-                  class="scroll-button scroll-button-start"
-                  appearance="plain"
-                  @click=${this.handleScrollToStart}
-                >
-                  <wa-icon
-                    name=${t?"chevron-right":"chevron-left"}
-                    library="system"
-                    variant="solid"
-                    label=${this.localize.term("scrollToStart")}
-                  ></wa-icon>
-                </wa-button>
-              `:""}
-
-          <!-- We have a focus listener because in Firefox (and soon to be Chrome) overflow containers are focusable. -->
-          <div class="nav" @focus=${()=>{var a;return(a=this.activeTab)==null?void 0:a.focus({preventScroll:!0})}}>
-            <div part="tabs" class="tabs" role="tablist">
-              <slot name="nav" @slotchange=${this.syncTabsAndPanels}></slot>
-            </div>
-          </div>
-
-          ${this.hasScrollControls?b`
-                <wa-button
-                  part="scroll-button scroll-button-end"
-                  class="scroll-button scroll-button-end"
-                  exportparts="base:scroll-button__base"
-                  appearance="plain"
-                  @click=${this.handleScrollToEnd}
-                >
-                  <wa-icon
-                    name=${t?"chevron-left":"chevron-right"}
-                    library="system"
-                    variant="solid"
-                    label=${this.localize.term("scrollToEnd")}
-                  ></wa-icon>
-                </wa-button>
-              `:""}
-        </div>
-
-        <slot part="body" class="body" @slotchange=${this.syncTabsAndPanels}></slot>
-      </div>
-    `}};i.css=S;n([u(".tab-group")],i.prototype,"tabGroup",2);n([u(".body")],i.prototype,"body",2);n([u(".nav")],i.prototype,"nav",2);n([x()],i.prototype,"hasScrollControls",2);n([s({reflect:!0})],i.prototype,"active",2);n([s()],i.prototype,"placement",2);n([s()],i.prototype,"activation",2);n([s({attribute:"without-scroll-controls",type:Boolean})],i.prototype,"withoutScrollControls",2);n([h("active")],i.prototype,"updateActiveTab",1);n([h("withoutScrollControls",{waitUntilFirstUpdate:!0})],i.prototype,"updateScrollControls",1);i=n([p("wa-tab-group")],i);var E=`:host {
-  display: inline-block;
-  color: var(--wa-color-neutral-on-quiet);
-  font-weight: var(--wa-font-weight-action);
-}
-
-.tab {
-  display: inline-flex;
-  align-items: center;
-  font: inherit;
-  padding: 1em 1.5em;
-  white-space: nowrap;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  transition: color var(--wa-transition-fast) var(--wa-transition-easing);
-
-  ::slotted(wa-icon:first-child) {
-    margin-inline-end: 0.5em;
-  }
-
-  ::slotted(wa-icon:last-child) {
-    margin-inline-start: 0.5em;
-  }
-}
-
-@media (hover: hover) {
-  :host(:hover:not([disabled])) .tab {
-    color: currentColor;
-  }
-}
-
-:host(:focus) {
-  outline: transparent;
-}
-
-:host(:focus-visible) .tab {
-  outline: var(--wa-focus-ring);
-  outline-offset: calc(-1 * var(--wa-border-width-l) - var(--wa-focus-ring-offset));
-}
-
-:host([active]:not([disabled])) {
-  color: var(--wa-color-brand-on-quiet);
-}
-
-:host([disabled]) .tab {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-@media (forced-colors: active) {
-  :host([active]:not([disabled])) {
-    outline: solid 1px transparent;
-    outline-offset: -3px;
-  }
-}
-`,I=0,c=class extends v{constructor(){super(...arguments),this.attrId=++I,this.componentId=`wa-tab-${this.attrId}`,this.panel="",this.active=!1,this.disabled=!1,this.tabIndex=0}connectedCallback(){this.slot||(this.slot="nav"),super.connectedCallback(),this.setAttribute("role","tab")}handleActiveChange(){this.setAttribute("aria-selected",this.active?"true":"false")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false"),this.disabled&&!this.active?this.tabIndex=-1:this.tabIndex=0}render(){var t;return this.id=((t=this.id)==null?void 0:t.length)>0?this.id:this.componentId,b`
-      <div
-        part="base"
-        class=${m({tab:!0,"tab-active":this.active})}
-      >
-        <slot></slot>
-      </div>
-    `}};c.css=E;n([u(".tab")],c.prototype,"tab",2);n([s({reflect:!0})],c.prototype,"panel",2);n([s({type:Boolean,reflect:!0})],c.prototype,"active",2);n([s({type:Boolean,reflect:!0})],c.prototype,"disabled",2);n([s({type:Number,reflect:!0})],c.prototype,"tabIndex",2);n([h("active")],c.prototype,"handleActiveChange",1);n([h("disabled")],c.prototype,"handleDisabledChange",1);c=n([p("wa-tab")],c);var $=`:host {
-  --padding: 0;
-
-  display: none;
-}
-
-:host([active]) {
-  display: block;
-}
-
-.tab-panel {
-  display: block;
-  padding: var(--padding);
-}
-`,L=0,f=class extends v{constructor(){super(...arguments),this.attrId=++L,this.componentId=`wa-tab-panel-${this.attrId}`,this.name="",this.active=!1}connectedCallback(){super.connectedCallback(),this.id=this.id.length>0?this.id:this.componentId,this.setAttribute("role","tabpanel")}handleActiveChange(){this.setAttribute("aria-hidden",this.active?"false":"true")}render(){return b`
-      <slot
-        part="base"
-        class=${m({"tab-panel":!0,"tab-panel-active":this.active})}
-      ></slot>
-    `}};f.css=$;n([s({reflect:!0})],f.prototype,"name",2);n([s({type:Boolean,reflect:!0})],f.prototype,"active",2);n([h("active")],f.prototype,"handleActiveChange",1);f=n([p("wa-tab-panel")],f);export{i as default};

package/dist/themes/hot-wa.css

@@ -1,179 +0,0 @@
-
-/* HOT theme for Shoelace */
-
-
-:root,
-:host,
-.wa-theme-light {
-
-   /*
-   * Color primitives
-   */
-
-  /* red - red */
-
-  --wa-color-red-950: #A52A28;
-  --wa-color-red-900: #B9302D;
-  --wa-color-red-800: #B83032;
-  --wa-color-red-700: #C53639;
-  --wa-color-red-600: #D73F3F;
-  --wa-color-red-500: #F34D47;
-  --wa-color-red-400: #ED5C5E;
-  --wa-color-red-300: #E27A7D;
-  --wa-color-red-200: #EC9EA1;
-  --wa-color-red-100: #FDD0D6;
-  --wa-color-red-50: #FEECEF;
-
-  /* rose - persian plum */
-
-  --wa-color-rose-950: #3E030B;
-  --wa-color-rose-900: #4B040E;
-  --wa-color-rose-800: #5C1517;
-  --wa-color-rose-700: #6B231D;
-  --wa-color-rose-600: #7C2E26;
-  --wa-color-rose-500: #7D463F;
-  --wa-color-rose-400: #9E6960;
-  --wa-color-rose-300: #B3837B;
-  --wa-color-rose-200: #CFA59E;
-  --wa-color-rose-100: #EAC7C0;
-  --wa-color-rose-50: #FFE6DE;
-
-  /* yellow - bright yellow */
-
-  --wa-color-yellow-950: #CC6508;
-  --wa-color-yellow-900: #E8750C;
-  --wa-color-yellow-800: #F77D0F;
-  --wa-color-yellow-700: #FAA71E;
-  --wa-color-yellow-600: #FCBF26;
-  --wa-color-yellow-500: #FED82E;
-  --wa-color-yellow-400: #FAE62E;
-  --wa-color-yellow-300: #FDEB51;
-  --wa-color-yellow-200: #FFF072;
-  --wa-color-yellow-100: #FFF59B;
-  --wa-color-yellow-50: #FFF9C3;
-
-  /* blue - space cadet */
-
-  --wa-color-blue-950: #111C31;
-  --wa-color-blue-900: #182642;
-  --wa-color-blue-800: #20365B;
-  --wa-color-blue-700: #263F68;
-  --wa-color-blue-600: #2E4873;
-  --wa-color-blue-500: #344F7B;
-  --wa-color-blue-400: #53688B;
-  --wa-color-blue-300: #71829E;
-  --wa-color-blue-200: #97A5BA;
-  --wa-color-blue-100: #BFC8D6;
-  --wa-color-blue-50: #E6E9EE;
-
-  /* cyan - cadet blue */
-
-  --wa-color-cyan-950: #2B514F;
-  --wa-color-cyan-900: #366361;
-  --wa-color-cyan-800: #408789;
-  --wa-color-cyan-700: #459BA0;
-  --wa-color-cyan-600: #4BB1B9;
-  --wa-color-cyan-500: #50C1CB;
-  --wa-color-cyan-400: #58CBD1;
-  --wa-color-cyan-300: #6AD4D9;
-  --wa-color-cyan-200: #8FE1E3;
-  --wa-color-cyan-100: #B9EDED;
-  --wa-color-cyan-50: #E3F8F8;
-
-  /* gray - dark slate gray */
-
-  --wa-color-gray-950: #2C3038;
-  --wa-color-gray-900: #404248;
-  --wa-color-gray-800: #515057;
-  --wa-color-gray-700: #615F66;
-  --wa-color-gray-600: #716F73;
-  --wa-color-gray-500: #828085;
-  --wa-color-gray-400: #9A969B;
-  --wa-color-gray-300: #B3B0B3;
-  --wa-color-gray-200: #C4C3C5;
-  --wa-color-gray-100: #E1E0E1;
-  --wa-color-gray-50: #F3F3F3;
-
-  /* neutral - black & white */
-
-  --wa-color-neutral-1000: #000;
-  --wa-color-neutral-0: #fff;
-
-   /*
-   * Color tokens
-   */
-
-  --wa-color-primary-950: var(--wa-color-red-950);
-  --wa-color-primary-900: var(--wa-color-red-900);
-  --wa-color-primary-800: var(--wa-color-red-800);
-  --wa-color-primary-700: var(--wa-color-red-700);
-  --wa-color-primary-600: var(--wa-color-red-600);
-  --wa-color-primary-500: var(--wa-color-red-500);
-  --wa-color-primary-400: var(--wa-color-red-400);
-  --wa-color-primary-300: var(--wa-color-red-300);
-  --wa-color-primary-200: var(--wa-color-red-200);
-  --wa-color-primary-100: var(--wa-color-red-100);
-  --wa-color-primary-50: var(--wa-color-red-50);
-
-  --wa-color-danger-950: var(--wa-color-rose-950);
-  --wa-color-danger-900: var(--wa-color-rose-900);
-  --wa-color-danger-800: var(--wa-color-rose-800);
-  --wa-color-danger-700: var(--wa-color-rose-700);
-  --wa-color-danger-600: var(--wa-color-rose-600);
-  --wa-color-danger-500: var(--wa-color-rose-500);
-  --wa-color-danger-400: var(--wa-color-rose-400);
-  --wa-color-danger-300: var(--wa-color-rose-300);
-  --wa-color-danger-200: var(--wa-color-rose-200);
-  --wa-color-danger-100: var(--wa-color-rose-100);
-  --wa-color-danger-50: var(--wa-color-rose-50);
-
-  --wa-color-neutral-950: var(--wa-color-gray-950);
-  --wa-color-neutral-900: var(--wa-color-gray-900);
-  --wa-color-neutral-800: var(--wa-color-gray-800);
-  --wa-color-neutral-700: var(--wa-color-gray-700);
-  --wa-color-neutral-600: var(--wa-color-gray-600);
-  --wa-color-neutral-500: var(--wa-color-gray-500);
-  --wa-color-neutral-400: var(--wa-color-gray-400);
-  --wa-color-neutral-300: var(--wa-color-gray-300);
-  --wa-color-neutral-200: var(--wa-color-gray-200);
-  --wa-color-neutral-100: var(--wa-color-gray-100);
-  --wa-color-neutral-50: var(--wa-color-gray-50);
-
-  --wa-color-success-950: var(--wa-color-cyan-950);
-  --wa-color-success-900: var(--wa-color-cyan-900);
-  --wa-color-success-800: var(--wa-color-cyan-800);
-  --wa-color-success-700: var(--wa-color-cyan-700);
-  --wa-color-success-600: var(--wa-color-cyan-600);
-  --wa-color-success-500: var(--wa-color-cyan-500);
-  --wa-color-success-400: var(--wa-color-cyan-400);
-  --wa-color-success-300: var(--wa-color-cyan-300);
-  --wa-color-success-200: var(--wa-color-cyan-200);
-  --wa-color-success-100: var(--wa-color-cyan-100);
-  --wa-color-success-50: var(--wa-color-cyan-50);
-
-  --wa-color-warning-950: var(--wa-color-yellow-950);
-  --wa-color-warning-900: var(--wa-color-yellow-900);
-  --wa-color-warning-800: var(--wa-color-yellow-800);
-  --wa-color-warning-700: var(--wa-color-yellow-700);
-  --wa-color-warning-600: var(--wa-color-yellow-600);
-  --wa-color-warning-500: var(--wa-color-yellow-500);
-  --wa-color-warning-400: var(--wa-color-yellow-400);
-  --wa-color-warning-300: var(--wa-color-yellow-300);
-  --wa-color-warning-200: var(--wa-color-yellow-200);
-  --wa-color-warning-100: var(--wa-color-yellow-100);
-  --wa-color-warning-50: var(--wa-color-yellow-50);
-
-  /*
-   * Typography
-   */
-
-  /* Fonts */
-  --wa-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif,
-  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-  --wa-font-sans-variant: 'Barlow Condensed';
-  --wa-font-sefif: Georgia, 'Times New Roman', serif;
-  --wa-font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-
-
-}
-