@wavemaker-ai/foundation-css 1.0.0-rc.647469

package/src/styles/mobile/components/input/switch.less

@@ -0,0 +1,44 @@
+@import (optional) url('../variables/switch.variant.less');
+.app-switch-first-btn{
+  border-top-left-radius: var(--wm-switch-button-border-radius);
+  border-bottom-left-radius: var(--wm-switch-button-border-radius);
+}
+
+.app-switch-last-btn{
+  border-top-right-radius: var(--wm-switch-button-border-radius);
+  border-bottom-right-radius: var(--wm-switch-button-border-radius);
+}
+
+.app-switch-btn {
+  height: var(--wm-switch-button-height);
+  color: var(--wm-switch-button-color);
+  ripple-color: var(--wm-switch-button-ripple-color);
+  border-color: var(--wm-switch-button-border-color);
+  background-color: var(--wm-switch-button-background-color);
+  padding: var(--wm-switch-button-padding);
+  border-width: var(--wm-switch-button-border-width);
+}
+
+.app-switch-btn-text {
+  font-size: var(--wm-switch-button-font-size);
+  font-family: var(--wm-switch-button-font-family);
+  font-weight: var(--wm-switch-button-font-weight);
+  text-transform: var(--wm-switch-button-text-transform);
+}
+
+.app-switch-btn-selected{
+  color: var(--wm-switch-button-color);
+  border-color: var(--wm-switch-button-border-color);
+  background-color: var(--wm-switch-button-background-color);
+}
+
+.app-switch-btn-selected-text{
+  font-size: var(--wm-switch-button-font-size);
+  font-family: var(--wm-switch-button-font-family);
+  font-weight: var(--wm-switch-button-font-weight);
+  text-transform: var(--wm-switch-button-text-transform);
+}
+
+.app-switch-disabled {
+  opacity: var(--wm-switch-opacity);
+}

package/src/styles/mobile/components/input/toggle.less

@@ -0,0 +1,61 @@
+@import (optional) url('../variables/toggle.variant.less');
+
+.app-toggle-off  .app-toggle {
+    width: var(--wm-toggle-width);
+    height: var(--wm-toggle-height);
+    border-radius: var(--wm-toggle-border-radius);
+    border-color: var(--wm-toggle-border-color);
+    background-color: var(--wm-toggle-background-color);
+    border-width: var(--wm-toggle-border-width);
+}
+.app-toggle-handle-off .app-toggle-handle {
+    width: var(--wm-toggle-handle-width);
+    height: var(--wm-toggle-handle-height);
+    border-radius: var(--wm-toggle-handle-radius);
+    margin-left: var(--wm-toggle-handle-margin-left);
+    margin-right: var(--wm-toggle-handle-margin-right);
+    background-color: var(--wm-toggle-handle-color);
+    align-items: center;
+    justify-content: center;
+}
+.app-toggle-on .app-toggle {
+    width: var(--wm-toggle-width);
+    height: var(--wm-toggle-height);
+    border-radius: var(--wm-toggle-border-radius);
+    border-color: var(--wm-toggle-border-color);
+    background-color: var(--wm-toggle-background-color);
+    border-width: var(--wm-toggle-border-width);
+}
+.app-toggle-handle-on .app-toggle-handle {
+    width: var(--wm-toggle-handle-width);
+    height: var(--wm-toggle-handle-height);
+    border-radius: var(--wm-toggle-handle-radius);
+    margin-left: var(--wm-toggle-handle-margin-left);
+    margin-right: var(--wm-toggle-handle-margin-right);
+    background-color: var(--wm-toggle-handle-color);
+    align-items: center;
+    justify-content: center;
+}
+
+.app-toggle-disabled {
+    opacity: var(--wm-toggle-opacity);
+}
+.app-toggle-disabled.handle{
+    opacity: var(--wm-toggle-opacity);
+}
+
+.app-toggle-checkicon.icon{
+    color: #4F378A;
+    font-size: 12px;
+    align-self: center;
+    min-width: 0px;
+}
+
+.app-toggle-uncheckicon.icon{
+    color: #E6E0E9;
+    font-size: 12px;
+    align-self: center;
+    min-width: 0px;
+}
+
+

package/src/styles/mobile/components/navigation/appnavbar.less

@@ -0,0 +1,106 @@
+
+.app-appnavbar {
+    height: var(--wm-navbar-height);
+    padding: var(--wm-navbar-padding);
+    background-color: var(--wm-navbar-background-color);
+    border-width: var(--wm-navbar-border-width);
+    border-style: var(--wm-navbar-border-style);
+    border-color: var(--wm-navbar-border-color);
+    border-radius: var(--wm-navbar-border-radius);
+}
+
+
+.app-appnavbar-left-icon {
+    color: var(--wm-navbar-left-icon-color);
+    font-size: var(--wm-navbar-left-icon-size);
+}
+
+.app-appnavbar-left-icon .app-icon-shape {
+    color: var(--wm-navbar-left-icon-color);
+    font-size: var(--wm-navbar-left-icon-size);
+}
+
+.app-appnavbar-back-icon {
+    color: var(--wm-navbar-back-icon-color);
+    font-size: var(--wm-navbar-back-icon-size);
+}
+
+.app-appnavbar-back-icon .app-icon-shape {
+    color: var(--wm-navbar-back-icon-color);
+    font-size: var(--wm-navbar-back-icon-size);
+}
+
+.app-appnavbar-image .app-picture {
+    width: var(--wm-navbar-image-width);
+    height: var(--wm-navbar-image-height);
+}
+
+.app-appnavbar-content {
+    color: var(--wm-navbar-content-color);
+    font-size: var(--wm-navbar-content-font-size);
+    font-weight: var(--wm-navbar-content-font-weight);
+    font-family: var(--wm-navbar-content-font-family);
+
+}
+
+.app-appnavbar-badge,
+.navbarAnchorItem.badge {
+    background-color: var(--wm-navbar-badge-background-color);
+    color: var(--wm-navbar-badge-color);
+    height: var(--wm-navbar-badge-height);
+    width: var(--wm-navbar-badge-width);
+    font-size: var(--wm-navbar-badge-font-size);
+    line-height: var(--wm-navbar-badge-line-height);
+    border-radius: var(--wm-navbar-badge-border-radius);
+    margin-left: var(--wm-navbar-badge-margin-left);
+}
+
+.navbar-anchor {
+    padding: var(--wm-navbar-anchor-padding);
+}
+
+.navbar-anchor-text {
+    color: var(--wm-navbar-anchor-text-color);
+    font-size: var(--wm-navbar-anchor-text-font-size);
+    font-weight: var(--wm-navbar-anchor-text-font-weight);
+    font-family: var(--wm-navbar-anchor-text-font-family);
+}
+
+.navbar-anchor-icon,
+.navbarAnchorItem.icon.icon {
+    color: var(--wm-navbar-anchor-icon-color);
+    font-size: var(--wm-navbar-anchor-icon-size);
+}
+
+.navbar-button-icon {
+    color: var(--wm-navbar-button-color);
+    font-size: var(--wm-navbar-button-font-size);
+}
+
+.navbar-button-text {
+    color: var(--wm-navbar-button-color);
+    font-size: var(--wm-navbar-button-font-size);
+    font-weight: var(--wm-navbar-button-font-weight);
+    font-family: var(--wm-navbar-button-font-family);
+
+}
+
+.navbarMenu.app-menu-trigger .app-anchor-icon .app-icon-shape {
+    color: var(--wm-navbar-menu-icon-color);
+    font-size: var(--wm-navbar-menu-icon-size);
+}
+
+.navbarMenu.app-menu-trigger .app-anchor-text {
+    color: var(--wm-navbar-menu-icon-color);
+    font-size: var(--wm-navbar-menu-icon-size);
+}
+
+.navbarPopover.app-popover-link .app-anchor-icon .app-icon-shape {
+    color: var(--wm-navbar-popover-icon-color);
+    font-size: var(--wm-navbar-popover-icon-size);
+}
+
+.navbarPopover.app-popover-link .app-anchor-text {
+    color: var(--wm-navbar-popover-icon-color);
+    font-size: var(--wm-navbar-popover-icon-size);
+}

package/src/styles/mobile/components/navigation/basenav.less

@@ -0,0 +1,3 @@
+
+.app-basenav {
+}

package/src/styles/mobile/components/navigation/menu.less

@@ -0,0 +1,52 @@
+
+.app-menu {
+  background-color: var(--wm-dropdown-menu-background);
+  border-radius: var(--wm-dropdown-menu-border-radius);
+  border-width: var(--wm-dropdown-menu-border-width);
+  border-color: var(--wm-dropdown-menu-border-color);
+}
+
+.app-menu-link-text {
+  color: var(--wm-dropdown-menu-color);
+  font-weight: var(--wm-dropdown-menu-text-font-weight);
+  text-decoration: var(--wm-dropdown-menu-text-decoration);
+  padding: var(--wm-dropdown-menu-text-padding);
+}
+
+.app-menu-trigger .app-anchor-icon .app-icon {
+  color: var(--wm-dropdown-menu-color);
+}
+
+.app-menu-trigger .app-anchor-icon .app-icon-shape  {
+  font-size: var(--wm-dropdown-menu-caret-size); 
+  color: var(--wm-dropdown-menu-caret-color);
+}
+
+.app-menu-content {
+  background-color: var(--wm-dropdown-menu-content-background); 
+  border-radius: var(--wm-dropdown-menu-content-border-radius); 
+  width: var(--wm-dropdown-menu-content-width); 
+  padding: var(--wm-dropdown-menu-padding);
+}
+
+.app-menu.modalContent{
+  box-shadow: var(--wm-dropdown-menu-box-shadow);
+}
+
+.app-menu-item.root {
+  border-style: var(--wm-dropdown-menu-item-border-style); 
+  padding: var(--wm-dropdown-menu-item-padding);
+}
+
+.app-menu-item .app-anchor-text {
+  padding-top: 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+  padding-bottom: 0px;
+  color: var(--wm-dropdown-menu-item-color); 
+  font-family: var(--wm-dropdown-menu-item-font-family); 
+  font-size: var(--wm-dropdown-menu-item-font-size); 
+  font-weight: var(--wm-dropdown-menu-item-font-weight); 
+  line-height: var(--wm-dropdown-menu-item-line-height); 
+  text-decoration-line: none;
+}

package/src/styles/mobile/components/navigation/navbar.less

@@ -0,0 +1,9 @@
+
+.app-navbar {
+}
+
+.app-navbar-item {
+}
+
+.app-navbar-child-nav {
+}

package/src/styles/mobile/components/navigation/navitem.less

@@ -0,0 +1,88 @@
+@import (optional) url('../variables/navitem.variant.less');
+
+.app-navitem-active .navAnchorItem .app-anchor-icon .app-icon-shape,
+.app-navitem-anchor .app-anchor-icon .app-icon-shape,
+.navAnchorItem .app-anchor-icon .app-icon-shape{
+  color: var(--wm-navitem-icon-color);
+  font-size: var(--wm-navitem-icon-size);
+  padding-left: var(--wm-navitem-icon-padding-left);
+  padding-right: var(--wm-navitem-icon-padding-right);
+  padding-top: var(--wm-navitem-icon-padding-top);
+  padding-bottom: var(--wm-navitem-icon-padding-bottom);
+}
+
+.app-navitem-active.app-navitem,
+.app-navitem-anchor,
+.navAnchorItem{
+  padding-top: var(--wm-navitem-padding-top);
+  padding-bottom: var(--wm-navitem-padding-bottom);
+  padding-left: var(--wm-navitem-padding-left);
+  padding-right: var(--wm-navitem-padding-right);
+  margin-left: var(--wm-navitem-margin-left);
+  margin-right: var(--wm-navitem-margin-right);
+  margin-top: var(--wm-navitem-margin-top);
+  margin-bottom: var(--wm-navitem-margin-bottom);
+  border-radius: var(--wm-navitem-border-radius);
+  background-color: var(--wm-navitem-background);
+}
+.app-navitem-active .navAnchorItem.root{
+    padding: 0;
+    background-color: var(--wm-navitem-background);
+}
+.app-navitem-active .navAnchorItem.badge,
+.app-navitem-anchor .app-anchor-badge,
+.navAnchorItem.badge{
+   margin-top: var(--wm-navitem-badge-margin-top);
+   margin-bottom: var(--wm-navitem-badge-margin-bottom);
+   margin-right: var(--wm-navitem-badge-margin-right);
+   margin-left: var(--wm-navitem-badge-margin-left);
+   background-color: var(--wm-navitem-badge-background);
+   text-align: var(--wm-navitem-badge-text-align);
+   align-self: var(--wm-navitem-badge-align-self);
+   font-weight: var(--wm-navitem-badge-font-weight);
+   font-size: var(--wm-navitem-badge-font-size);
+   font-family: var(--wm-navitem-badge-font-family);
+   border-radius: var(--wm-navitem-badge-border-radius);
+   min-width: var(--wm-navitem-badge-min-width);
+   min-height: var(--wm-navitem-badge-min-height);
+   line-height: var(--wm-navitem-badge-line-height);
+   color: var(--wm-navitem-badge-color);
+}
+
+.app-navitem-active .navAnchorItem.text,
+.app-navitem-anchor .app-anchor-text,
+.navAnchorItem.text{
+    text-decoration: var(--wm-navitem-text-decoration);
+    text-decoration-line: var(--wm-navitem-text-decoration);
+    line-height: var(--wm-navitem-line-height);
+    font-weight: var(--wm-navitem-font-weight);
+    font-size: var(--wm-navitem-font-size);
+    font-family: var(--wm-navitem-font-family);
+    padding-left: var(--wm-navitem-text-padding-left);
+    padding-right: var(--wm-navitem-text-padding-right);
+    padding-top: var(--wm-navitem-text-padding-top);
+    padding-bottom: var(--wm-navitem-text-padding-bottom);
+    color: var(--wm-navitem-color);
+    flex: var(--wm-navitem-text-flex);
+}
+.app-navitem-child .app-navitem{
+    background-color: var(--wm-navitem-child-background-color);
+}
+.app-navitem-child .navAnchorItem .app-anchor-icon .app-icon-shape,
+.app-navitem-child .navAnchorItem.badge,
+.app-navitem-child .navAnchorItem.text{
+    color: var(--wm-navitem-child-color);
+}
+
+.app-navitem-active.app-navitem-caret .app-icon-text,
+.app-navitem-caret .app-icon-text{
+    color: var(--wm-navitem-caret-color);
+}
+
+.app-navitem {
+    background-color: var(--wm-navitem-background);
+}
+.app-navitem-active{
+    background-color: var(--wm-navitem-background);
+}
+

package/src/styles/mobile/components/navigation/popover.less

@@ -0,0 +1,83 @@
+.app-popover{
+    padding: var(--wm-popover-padding);
+    background-color: var(--wm-popover-background-color);
+    box-shadow: var(--wm-popover-shadow);
+    border-radius: var(--wm-popover-border-radius);
+    border-width: var(--wm-popover-border-width);
+    border-style: var(--wm-popover-border-style);
+    border-color: var(--wm-popover-border-color);
+}
+
+.app-popover-content{
+    background-color: var(--wm-popover-content-background-color);
+    box-shadow: var(--wm-popover-content-shadow);
+    border-width: var(--wm-popover-content-border-width);
+    border-style: var(--wm-popover-content-border-style);
+    border-color: var(--wm-popover-content-border-color);
+    border-radius: var(--wm-popover-content-border-radius);
+}
+
+.app-popover-modal-content{
+    box-shadow: var(--wm-popover-modal-content-shadow);
+}
+.app-popover-wrapper{
+    background-color: var(--wm-popover-link-background-color);
+    border-color: var(--wm-popover-link-border-color);
+    border-width: var(--wm-popover-link-border-width);
+    border-style: var(--wm-popover-link-border-style);
+    border-radius: var(--wm-popover-link-border-radius);
+    padding: var(--wm-popover-link-padding);
+    width: var(--wm-popover-link-width);
+    height: var(--wm-popover-link-height);
+    min-height: var(--wm-popover-link-min-height);
+}
+
+.app-popover-action-sheet.popover {
+    left: var(--wm-popover-left); 
+    bottom: var(--wm-popover-bottom);
+    width: var(--wm-popover-width);
+    min-height: var(--wm-popover-min-height);
+    box-shadow: var(--wm-popover-shadow);
+}
+
+.app-popover-title {
+    padding: var(--wm-popover-header-padding);
+    font-family: var(--wm-popover-header-font-family);
+    font-size: var(--wm-popover-header-font-size);
+    font-weight: var(--wm-popover-header-font-weight);
+    line-height: var(--wm-popover-header-line-height);
+    letter-spacing: var(--wm-popover-header-letter-spacing);
+    color: var(--wm-popover-header-color);
+    background-color: var(--wm-popover-header-background-color);
+}
+
+//We don't have the support to add inline content for the popover body.
+//Content can only be added using partials, so there are no tokens available for the popover body.
+
+.app-popover-link .app-anchor-icon .app-icon {
+    min-width: var(--wm-popover-link-icon-size);
+    width: var(--wm-popover-link-icon-size);
+    height: var(--wm-popover-link-icon-size);
+}
+
+.app-popover-link .app-anchor-icon .app-icon-shape {
+    color: var(--wm-popover-link-icon-color);
+    font-size: var(--wm-popover-link-icon-size);
+    min-width: var(--wm-popover-link-icon-size);
+    width: var(--wm-popover-link-icon-size);
+    height: var(--wm-popover-link-icon-size);
+    line-height: var(--wm-popover-link-icon-size);
+}
+
+.app-popover-link .app-anchor-text {
+    color: var(--wm-popover-link-color);
+    padding-left: var(--wm-space-2);
+    padding-right: var(--wm-space-2);
+    font-size: var(--wm-popover-link-font-size);
+    font-family: var(--wm-popover-link-font-family);
+    font-weight: var(--wm-popover-link-font-weight);
+    line-height: var(--wm-popover-link-line-height);
+    letter-spacing: var(--wm-popover-link-letter-spacing);
+    text-decoration: var(--wm-popover-link-text-decoration);
+    text-decoration-line: var(--wm-popover-link-text-decoration);
+}

package/src/styles/mobile/components/page/content.less

@@ -0,0 +1,3 @@
+
+.app-content {
+}

package/src/styles/mobile/components/page/left-panel.less

@@ -0,0 +1,7 @@
+.app-left-panel {
+    background-color: var(--wm-left-panel-background);
+    box-shadow: var(--wm-left-panel-elevation);
+    border-top-right-radius: var(--wm-left-panel-border-top-right-radius);
+    border-bottom-right-radius: var(--wm-left-panel-border-bottom-right-radius);
+    max-width: var(--wm-left-panel-max-width);
+}

package/src/styles/mobile/components/page/page-content.less

@@ -0,0 +1,4 @@
+.app-page-content {
+    background-color: var(--wm-page-content-background);
+    padding: var(--wm-page-content-padding);
+}

package/src/styles/mobile/components/page/partial-container.less

@@ -0,0 +1,4 @@
+
+.app-partial-container {
+    background-color: var(--wm-partial-container-background-color);
+}

package/src/styles/mobile/components/page/partial.less

@@ -0,0 +1,6 @@
+
+.app-partial {
+}
+
+.app-partial-skeleton {
+}

package/src/styles/mobile/components/page/tabbar.less

@@ -0,0 +1,93 @@
+.app-tabbar {
+    height: var(--wm-tabbar-height);
+    gap: var(--wm-tabbar-gap);
+    box-shadow: var(--wm-tabbar-box-shadow);
+    border-width: var(--wm-tabbar-border-width);
+    border-style: var(--wm-tabbar-border-style);
+    border-color: var(--wm-tabbar-border-color);
+
+}
+
+.app-tabbar-menu {
+    background-color: var(--wm-tabbar-menu-background);
+    height: var(--wm-tabbar-menu-height);
+    align-items: center;
+}
+
+.app-tabbar-more-menu {
+    width: var(--wm-tabbar-more-menu-width);
+    box-shadow: var(--wm-tabbar-more-menu-box-shadow);
+    background-color: var(--wm-tabbar-more-menu-background);
+}
+
+.app-tabbar-more-menu-row {
+    width: var(--wm-tabbar-more-menu-row-width);
+    padding: var(--wm-tabbar-more-menu-row-padding);
+}
+
+.app-tabbar-item {
+    min-height: var(--wm-tabbar-item-min-height);
+    min-width: var(--wm-tabbar-item-min-width);
+    background-color: var(--wm-tabbar-item-background-color);
+    border-radius: var(--wm-tabbar-item-border-radius);
+    border-width: var(--wm-tabbar-item-border-width);
+    margin-bottom: var(--wm-space-0);
+    border-color: var(--wm-tabbar-item-border-color);
+    border-style: var(--wm-tabbar-item-border-style);
+    opacity: var(--wm-tabbar-item-opacity);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: var(--wm-tabbar-item-padding);
+    gap: var(--wm-tabbar-item-gap);
+}
+
+.app-tabbar-active-item {
+    opacity: var(--wm-tabbar-item-opacity);
+    margin-bottom: var(--wm-space-0);
+    border-radius: var(--wm-tabbar-item-border-radius);
+    border-width: var(--wm-tabbar-item-border-width);
+    border-color: var(--wm-tabbar-item-border-color);
+    border-style: var(--wm-tabbar-item-border-style);
+    background-color: var(--wm-tabbar-item-background-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: auto;
+    padding: var(--wm-tabbar-item-padding);
+    gap: var(--wm-tabbar-item-gap);
+}
+
+.app-tabbar-item-icon .app-icon {
+    border-bottom-color: var(--wm-tabbar-icon-border-bottom-color);
+    padding: var(--wm-tabbar-icon-padding);
+}
+
+.app-tabbar-item-icon .app-icon-shape {
+    color: var(--wm-tabbar-icon-color);
+    font-size: var(--wm-tabbar-icon-size);
+    padding: var(--wm-tabbar-icon-padding);
+}
+
+.app-tabbar-active-icon .app-icon-shape {
+    color: var(--wm-tabbar-icon-color);
+    font-size: var(--wm-tabbar-icon-size);
+    padding: var(--wm-tabbar-icon-padding);
+}
+
+.app-tabbar-item-label {
+    color: var(--wm-tabbar-text-color);
+    font-size: var(--wm-tabbar-text-font-size);
+    font-family: var(--wm-tabbar-text-font-family);
+    font-weight: var(--wm-tabbar-text-font-weight);
+    margin-top: var(--wm-tabbar-text-margin-top);
+
+}
+
+.app-tabbar-active-label {
+    font-weight: var(--wm-tabbar-text-font-weight);
+    font-size: var(--wm-tabbar-text-font-size);
+    font-family: var(--wm-tabbar-text-font-family);
+    color: var(--wm-tabbar-text-color);
+}
+@import (optional) url('../variables/tabbar.variant.less');

package/src/styles/mobile/components/page.less

@@ -0,0 +1,3 @@
+
+.app-page {
+}

package/src/styles/mobile/components/prefab.less

@@ -0,0 +1,6 @@
+
+.app-prefab {
+}
+
+.app-prefab-skeleton {
+}

package/src/styles/mobile/components/tokens.dark.css

@@ -0,0 +1,68 @@
+:root[color="dark"] {
+  --wm-color-primary: #d0bcfe;
+  --wm-color-primary-container: #4f378b;
+  --wm-color-primary-fixed: #eaddff;
+  --wm-color-primary-fixed-dim: #ffe8e2;
+  --wm-color-on-primary: #381e72;
+  --wm-color-on-primary-container: #eaddff;
+  --wm-color-on-primary-fixed: #21005d;
+  --wm-color-on-primary-fixed-variant: #4f378b;
+  --wm-color-secondary: #ccc2dc;
+  --wm-color-secondary-container: #4a4458;
+  --wm-color-secondary-fixed: #e8def8;
+  --wm-color-secondary-fixed-dim: #bbbcd6;
+  --wm-color-on-secondary: #332d41;
+  --wm-color-on-secondary-container: #e8def8;
+  --wm-color-on-secondary-fixed: #1d192b;
+  --wm-color-on-secondary-fixed-variant: #4a4458;
+  --wm-color-tertiary: #efb8c8;
+  --wm-color-tertiary-container: #633b48;
+  --wm-color-tertiary-fixed: #ffd8e4;
+  --wm-color-tertiary-fixed-dim: #e9e1c3;
+  --wm-color-on-tertiary: #492532;
+  --wm-color-on-tertiary-container: #ffd8e4;
+  --wm-color-on-tertiary-fixed: #31111d;
+  --wm-color-on-tertiary-fixed-variant: #633b48;
+  --wm-color-success: #5AC588;
+  --wm-color-success-container: #d6ffe8;
+  --wm-color-on-success: #1d192b;
+  --wm-color-on-success-container: #11251a;
+  --wm-color-info: #00c8ff;
+  --wm-color-info-container: #ddf7ff;
+  --wm-color-on-info: #FFFFFF;
+  --wm-color-on-info-container: #191919;
+  --wm-color-warning: #ffae00;
+  --wm-color-warning-container: #fff4d5;
+  --wm-color-on-warning: #FFFFFF;
+  --wm-color-on-warning-container: #1b1b1b;
+  --wm-color-error: #f2b8b5;
+  --wm-color-error-container: #8c1d18;
+  --wm-color-on-error: #601410;
+  --wm-color-on-error-container: #f9dedc;
+  --wm-color-background: #141218;
+  --wm-color-on-background: #e6e0e9;
+  --wm-color-outline: #938f99;
+  --wm-color-outline-variant: #49454f;
+  --wm-color-shadow: #ffffff;
+  --wm-color-scrim: #000000;
+  --wm-color-surface: #141218;
+  --wm-color-surface-variant: #49454f;
+  --wm-color-surface-bright: #3b383e;
+  --wm-color-surface-dim: #141218;
+  --wm-color-surface-tint: #d0bcff;
+  --wm-color-surface-container: #ebebf7;
+  --wm-color-surface-container-low: #1d1b20;
+  --wm-color-surface-container-lowest: #0f0d13;
+  --wm-color-surface-container-high: #2b2930;
+  --wm-color-surface-container-highest: #36343b;
+  --wm-color-on-surface: #e6e0e9;
+  --wm-color-on-surface-variant: #cac4d0;
+  --wm-color-inverse-surface: #e6e0e9;
+  --wm-color-inverse-on-surface: #322f35;
+  --wm-color-inverse-primary: #6750a4;
+  --wm-color-white: #FFFFFF;
+  --wm-color-black: #000000;
+  --wm-color-transparent: transparent;
+  --wm-color-border-translucent: rgba(0, 0, 0, 0.175);
+  --wm-color-border: var(--wm-color-outline-variant);
+}