@wavemaker/rn-codegen 11.15.1-rc.6451 → 11.15.2-rc.64737

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/advanced/login.less

@@ -1,9 +1,6 @@
 .app-form {
     &.app-login {
         background-color: transparent;
-        padding-top: var(--wm-login-form-padding-top);
-        padding-right: var(--wm-login-form-padding-right);
-        padding-bottom: var(--wm-login-form-padding-bottom);
-        padding-left: var(--wm-login-form-padding-left);
+        padding: var(--wm-login-form-padding);
     }
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/advanced/webview.less

@@ -1,7 +1,4 @@
 .app-iframe {
     background-color: var(--wm-webview-background-color);
-    padding-right: var(--wm-webview-padding-right);
-    padding-left: var(--wm-webview-padding-left);
-    padding-bottom: var(--wm-webview-padding-bottom);
-    padding-top: var(--wm-webview-padding-top);
+    padding: var(--wm-webview-padding);
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/basic/label.less

@@ -11,10 +11,6 @@
         padding-right: var(--wm-label-padding-right);
         padding-top: var(--wm-label-padding-top);
         padding-bottom: var(--wm-label-padding-bottom);
-        margin-top: var(--wm-label-margin-top);
-        margin-bottom: var(--wm-label-margin-bottom);
-        margin-left: var(--wm-label-margin-left);
-        margin-right: var(--wm-label-margin-right);
         line-height: var(--wm-label-line-height);
         letter-spacing: var(--wm-label-letter-spacing);
     }
@@ -33,10 +29,6 @@
         padding-bottom: var(--wm-label-padding-bottom) !important;
         padding-left: var(--wm-label-padding-left) !important;
         padding-right: var(--wm-label-padding-right) !important;
-        margin-top: var(--wm-label-margin-top);
-        margin-bottom: var(--wm-label-margin-bottom);
-        margin-left: var(--wm-label-margin-left);
-        margin-right: var(--wm-label-margin-right);
         line-height: var(--wm-label-line-height);
         letter-spacing: var(--wm-label-letter-spacing);
     }

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/basic/message.less

@@ -25,8 +25,7 @@
    // color: var(--wm-message-color); //TODO Button color missing
     opacity: 1;
     text-shadow: none;
-    padding-left: var(--wm-message-close-btn-padding-left);
-    padding-right: var(--wm-message-close-btn-padding-right);
+    padding: var(--wm-message-close-btn-padding);
     border-radius: var(--wm-message-close-btn-border-radius);
     border-color: var(--wm-message-close-btn-border-color) !important;
     background-color: var(--wm-message-close-btn-background-color) !important;

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/container/accordion.less

@@ -1,6 +1,6 @@
 .app-accordion{
     .panel-heading {
-        border-bottom-width: var(--wm-accordion-header-border-bottom-width);
+        border-width: var(--wm-accordion-header-border-width);
         display: flex;
         flex-direction: row;
         align-self: center;
@@ -20,7 +20,4 @@
             }
         }
     }
-    .panel-body {
-        padding: 0px;
-    }
 }

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/container/container.less

@@ -6,16 +6,10 @@
     border-style: var(--wm-container-border-style);
     box-shadow: var(--wm-container-box-shadow);
     background-color: var(--wm-container-background-color);
-    padding-right: var(--wm-container-padding-right);
-    padding-left: var(--wm-container-padding-left);
-    padding-bottom: var(--wm-container-padding-bottom);
-    padding-top: var(--wm-container-padding-top);
+    padding: var(--wm-container-padding);
 
     border-radius: var(--wm-container-border-radius);
-    border-top-width: var(--wm-container-border-width-top);
-    border-bottom-width: var(--wm-container-border-width-bottom);
-    border-left-width: var(--wm-container-border-width-left);
-    border-right-width: var(--wm-container-border-width-right);
+    border-width: var(--wm-container-border-width);
     border-color: var(--wm-container-border-color);
     opacity: var(--wm-container-opacity);
  }

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/container/tabs.less

@@ -26,7 +26,11 @@
             align-items: center;
             margin: 0px;
             background-color: var(--wm-tabs-item-heading-background);
-
+            padding: var(--wm-tabs-item-heading-padding);
+            border-width: var(--wm-tabs-item-heading-border-width);
+            border-style: var(--wm-tabs-item-heading-border-style);
+            border-color: var(--wm-tabs-item-heading-border-color);
+            border-radius: var(--wm-tabs-item-heading-border-radius);
             .tab-heading {
 
 
@@ -61,7 +65,11 @@
 
             &.active {
 
-
+                padding: var(--wm-tabs-item-heading-padding);
+                border-width: var(--wm-tabs-item-heading-border-width);
+                border-style: var(--wm-tabs-item-heading-border-style);
+                border-color: var(--wm-tabs-item-heading-border-color);
+                border-radius: var(--wm-tabs-item-heading-border-radius);
                 background-color: var(--wm-tabs-item-heading-background);
                 color: var(--wm-tabs-item-heading-text-color);
 

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/data/card.less

@@ -1,6 +1,6 @@
     .app-card {
         &-header {
-            padding: var(--wm-card-heading-padding);
+            padding: var(--wm-card-header-padding);
             background-color: var(--wm-card-header-background-color);
             width: var(--wm-card-heading-width);
         }

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/device/barcode.less

@@ -1,9 +1,6 @@
 .app-page-content .app-ng-transclude .app-barcode {
     width: auto;
-    padding-top: var(--wm-barcodescanner-padding-top);
-    padding-left: var(--wm-barcodescanner-padding-left);
-    padding-bottom: var(--wm-barcodescanner-padding-bottom);
-    padding-right: var(--wm-barcodescanner-padding-right);
+    padding: var(--wm-barcodescanner-padding);
     gap: var(--wm-space-0) !important;
     display: grid !important;
     justify-content: none;
@@ -12,10 +9,7 @@
 
  .app-barcode{
     width: auto;
-    padding-top: var(--wm-barcodescanner-padding-top);
-    padding-left: var(--wm-barcodescanner-padding-left);
-    padding-bottom: var(--wm-barcodescanner-padding-bottom);
-    padding-right: var(--wm-barcodescanner-padding-right);
+    padding: var(--wm-barcodescanner-padding);
     gap: var(--wm-space-0) !important;
     display: grid !important;
     justify-content: none;

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/calendar.less

@@ -1,8 +1,68 @@
 
-.app-calendar .fc .fc-day-today {
-    border-width: 2px;
-    border-style: solid;
-    background-color: #fff;
-    border-radius: 99px;
+.app-calendar {
+  width: var(--wm-calendar-width);
+  min-height: var(--wm-calendar-min-height);
+  box-shadow: var(--wm-calendar-wrapper-shadow);
+  border-style: var(--wm-calendar-wrapper-border-style);
+  border-radius: var(--wm-calendar-wrapper-border-radius);
+  border-color: var(--wm-calendar-wrapper-border-color);
+  border-width: var(--wm-calendar-wrapper-border-width);
+  background-color: var(--wm-calendar-wrapper-background);
+
+  .fc {
+    .fc-toolbar.fc-header-toolbar {
+      padding: var(--wm-calendar-header-padding);
+      background-color: var(--wm-calendar-header-background-color);
+      border-color: var(--wm-calendar-header-border-color);
+      border-width: var(--wm-calendar-header-border-width);
+      border-style: var(--wm-calendar-header-border-style);
+
+      .fc-toolbar-title {
+        //the change shouldnt be displayed in web so not mapped tokens here
+      }
+    }
+
+    table tbody tr th {
+      border-width: var(--wm-calendar-weekday-border-width);
+      border-style: var(--wm-calendar-weekday-border-style);
+      padding: var(--wm-calendar-weekday-padding);
+      background-color: var(--wm-calendar-weekday-background-color);
+      border-color: var(--wm-calendar-weekday-border-color);
+
+      .fc-col-header-cell a {
+        color: var(--wm-calendar-weekday-text-color);
+        font-weight: var(--wm-calendar-weekday-text-font-weight);
+        font-family: var(--wm-calendar-weekday-text-font-family);
+        font-size: var(--wm-calendar-weekday-text-font-size);
+      }
+    }
+
+    .fc-daygrid-day-top {
+      background-color: var(--wm-calendar-daywrapper-background);
+      border-color: var(--wm-calendar-daywrapper-border-color);
+      border-width: var(--wm-space-1);
+      border-style: var(--wm-border-style-solid);
+      border-radius: 100%;
+
+      a {
+        color: var(--wm-calendar-day-color);
+        font-size: var(--wm-calendar-day-font-size);
+        font-weight: var(--wm-calendar-day-font-weight);
+        font-family: var(--wm-calendar-day-font-family);
+        border-color: var(--wm-calendar-day-border-color);
+      }
+    }
+
+    .fc-day-today {
+      .fc-daygrid-day-top {
+        border-color: var(--wm-calendar-today-border-color);
+        background-color: var(--wm-calendar-today-background-color);
+
+        .a {
+          background-color: var(--wm-calendar-today-text-background-color);
+        }
+      }
+
+    }
   }
-  
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/checkboxset.less

@@ -28,10 +28,10 @@
                 &::after {
                     content: "";
                     display: block;
-                    width: calc(var(--wm-checkboxset-icon-size) / 2);
-                    height: var(--wm-checkboxset-icon-size);
-                    border-right: 2px solid var(--wm-checkboxset-icon-color);
-                    border-bottom: 2px solid var(--wm-checkboxset-icon-color);
+                    width: calc(var(--wm-checkboxset-icon-size)/3);
+                    height: calc(var(--wm-checkboxset-icon-size)/1.5);
+                    border-right: 3px solid var(--wm-checkboxset-icon-color);
+                    border-bottom: 3px solid var(--wm-checkboxset-icon-color);
                     transform: rotate(45deg);
                     top: 3px;
                     left: 6px;
@@ -46,7 +46,7 @@
         }
 
         &.checkbox {
-            display: inline-block;
+            // display: inline-block;
 
             >label {
                 padding: 0;
@@ -60,7 +60,22 @@
                 line-height: normal;
                 letter-spacing: normal;
                 cursor: pointer;
-                
+
+                .caption {
+                    display: inline-block;
+                    padding-left: 20px;
+                    padding-top: 0;
+                    margin-left: var(--wm-checkboxset-label-margin-left);
+
+                    &:before,
+                    &:after {
+                        content: "";
+                        display: inline-block;
+                        position: absolute;
+                    }
+
+                }
+
             }
         }
     }

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/currency.less

@@ -6,7 +6,15 @@
         height: auto;
     }
     span {
-        padding: 12px 16px;
+        background-color: var(--wm-currency-labelwrapper-background) !important;
+        min-height: var(--wm-currency-labelwrapper-min-height) !important;
+        border-radius: var(--wm-currency-labelwrapper-border-radius) !important;
+        padding: var(--wm-currency-labelwrapper-padding) !important;
+        width: var(--wm-currency-labelwrapper-width) !important;
+        font-weight: var(--wm-currency-label-font-weight) !important;
+        font-family: var(--wm-currency-label-font-family) !important;
+        font-size: var(--wm-currency-label-font-size) !important;
+        color: var(--wm-currency-label-color) !important;
     }
     .app-textbox {
         border-top-right-radius: 4px;

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/form.less

@@ -49,15 +49,9 @@
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-form .live-field > div .form-control{
       min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-top);
-  padding-bottom: var(--wm-form-controls-padding-bottom);
-  padding-left: var(--wm-form-controls-padding-left);
-  padding-right: var(--wm-form-controls-padding-right);
+  padding: var(--wm-form-controls-padding);
   border-style: var(--wm-form-controls-border-style);
-  border-top-width: var(--wm-form-controls-border-top-width);
-  border-left-width:var(--wm-form-controls-border-left-width);
-  border-right-width: var(--wm-form-controls-border-right-width);
-  border-bottom-width:var(--wm-form-controls-border-bottom-width);
+  border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);
@@ -101,15 +95,9 @@
   border-bottom-left-radius: 0px !important;
   border-left-width: 0px !important;
   min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-top);
-  padding-bottom: var(--wm-form-controls-padding-bottom);
-  padding-left: var(--wm-form-controls-padding-left);
-  padding-right: var(--wm-form-controls-padding-right);
+  padding: var(--wm-form-controls-padding);
   border-style: var(--wm-form-controls-border-style);
-  border-top-width: var(--wm-form-controls-border-top-width);
-  border-left-width:var(--wm-form-controls-border-left-width);
-  border-right-width: var(--wm-form-controls-border-right-width);
-  border-bottom-width:var(--wm-form-controls-border-bottom-width);
+  border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);
@@ -130,15 +118,9 @@
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-textbox {
   min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-top);
-  padding-bottom: var(--wm-form-controls-padding-bottom);
-  padding-left: var(--wm-form-controls-padding-left);
-  padding-right: var(--wm-form-controls-padding-right);
+  padding: var(--wm-form-controls-padding);
   border-style: var(--wm-form-controls-border-style);
-  border-top-width: var(--wm-form-controls-border-top-width);
-  border-left-width:var(--wm-form-controls-border-left-width);
-  border-right-width: var(--wm-form-controls-border-right-width);
-  border-bottom-width:var(--wm-form-controls-border-bottom-width);
+  border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);
@@ -152,15 +134,9 @@
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-textarea {
   min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-top);
-  padding-bottom: var(--wm-form-controls-padding-bottom);
-  padding-left: var(--wm-form-controls-padding-left);
-  padding-right: var(--wm-form-controls-padding-right);
+  padding: var(--wm-form-controls-padding);
   border-style: var(--wm-form-controls-border-style);
-  border-top-width: var(--wm-form-controls-border-top-width);
-  border-left-width:var(--wm-form-controls-border-left-width);
-  border-right-width: var(--wm-form-controls-border-right-width);
-  border-bottom-width:var(--wm-form-controls-border-bottom-width);
+  border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);
@@ -174,15 +150,9 @@
 
 .wm-studio .wm-right-panel-container .file-container-pane .wm-file-container .wm-workspace .workspace-content .canvas-panel .app-select{
   min-height: var(--wm-form-controls-min-height);
-  padding-top: var(--wm-form-controls-padding-top);
-  padding-bottom: var(--wm-form-controls-padding-bottom);
-  padding-left: var(--wm-form-controls-padding-left);
-  padding-right: var(--wm-form-controls-padding-right);
+  padding: var(--wm-form-controls-padding);
   border-style: var(--wm-form-controls-border-style);
-  border-top-width: var(--wm-form-controls-border-top-width);
-  border-left-width:var(--wm-form-controls-border-left-width);
-  border-right-width: var(--wm-form-controls-border-right-width);
-  border-bottom-width:var(--wm-form-controls-border-bottom-width);
+  border-width: var(--wm-form-controls-border-width);
   border-color: var(--wm-form-controls-border-color);
   border-radius: var(--wm-form-controls-border-radius);
   background-color: var(--wm-form-controls-background);

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/rating.less

@@ -13,7 +13,7 @@
     }
 
     .caption {
-        padding-left: var(--wm-rating-text-padding-left);
+        padding: var(--wm-rating-text-padding);
         color: var(--wm-rating-text-color);
         font-size: var(--wm-rating-text-size);
     }

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/select.less

@@ -4,3 +4,36 @@
     font-size: 16px;
     height: auto;
 }
+
+.native-template-arrow-container {
+    background-color: var(--wm-select-arrow-button-background-color);
+    padding: var(--wm-select-arrow-button-padding);
+    border-width: var(--wm-select-arrow-button-border-width);
+    border-style: var(--wm-select-arrow-button-border-style);
+    border-color: var(--wm-select-arrow-button-border-color);
+
+}
+
+.native-template-dropdown-modal {
+    background-color: var(--wm-select-modal-content-background-color);
+    border-color: var(--wm-select-modal-content-border-color);
+    border-radius: var(--wm-select-modal-content-border-radius);
+    border-style: var(--wm-select-modal-content-border-style);
+    border-width: var(--wm-select-modal-content-border-width);
+}
+
+.native-template-option-tick {
+    font-size: var(--wm-select-check-icon-font-size);
+    color: var(--wm-select-check-icon-color);
+}
+
+.native-template-option {
+    font-size: var(--wm-select-modal-text-font-size);
+    color: var(--wm-select-modal-text-color);
+    font-family: var(--wm-select-modal-text-font-family);
+}
+
+.native-template-arrow {
+    font-size: var(--wm-select-arrow-button-icon-font-size);
+    color: var(--wm-select-arrow-button-icon-color);
+}

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/input/toggle.less

@@ -55,7 +55,6 @@
     position: absolute;
     display: block;
     top: 6px;
-    left: 8px;
     height: var(--wm-toggle-handle-height);
     width: var(--wm-toggle-handle-width);
     background-color: var(--wm-toggle-handle-color);
@@ -69,16 +68,18 @@
     box-sizing: border-box;
     transform: none !important;
     box-shadow: none !important;
+    margin-left: var(--wm-toggle-handle-margin-left);
+    margin-right: var(--wm-toggle-handle-margin-right);
   }
 
   /* Checked State move handle */
   input[type="checkbox"]:checked~.switch {
     right: 0;
     left: auto;
-    margin-right: 6px;
     transition-delay: .08s, 0s;
     background-color: var(--wm-toggle-handle-color);
     transform: scale(1.6) !important;
+    margin-right: var(--wm-toggle-handle-margin-right);
   }
 
   input[type="checkbox"]:checked~label {

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/layouts/tabbar.less

@@ -2,9 +2,9 @@
     position: relative;
     height: var(--wm-tabbar-height);
     padding: 4px;
-    border-top-width: var(--wm-tabbar-border-top-width);
-    border-top-style: var(--wm-tabbar-border-top-style);
-    border-top-color: var(--wm-tabbar-border-top-color);
+    border-width: var(--wm-tabbar-border-width);
+    border-style: var(--wm-tabbar-border-style);
+    border-color: var(--wm-tabbar-border-color);
     .navbar-default {
         background-color: inherit;
         .tab-items {
@@ -25,8 +25,7 @@
                 .app-icon {
                     color: var(--wm-tabbar-icon-color);
                     font-size: var(--wm-tabbar-icon-size);
-                    padding-right: var(--wm-tabbar-icon-padding-right);
-                    padding-bottom: var(--wm-tabbar-icon-padding-bottom);
+                    padding: var(--wm-tabbar-icon-padding);
                 }
                 label {
                     color: var(--wm-tabbar-text-color);

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/navigation/nav.less

@@ -1,20 +1,3 @@
-.app-left-panel {
-    background-color: var(--wm-nav-left-panel-background);
-}
-
-.app-partial {
-    height: auto;
-    background-color: var(--wm-nav-partial-background);
-}
-
-.app-partial-container {
-    background-color: var(--wm-nav-partial-container-background);
-}
-
-.app-navbar {
-    background-color: var(--wm-nav-navbar-background);
-}
-
 .app-nav-item .app-anchor.app-anchor >.badge{
     position: absolute;
     top:auto;

package/src/templates/foundation-theme/wavemaker/design-tokens/studio/navigation/popover.less

@@ -3,14 +3,11 @@
     border-color: var(--wm-popover-link-border-color);
     border-width: var(--wm-popover-link-border-width);
     border-style: var(--wm-popover-link-border-style);
-    padding-top: var(--wm-popover-link-padding-top);
-    padding-bottom: var(--wm-popover-link-padding-bottom);
-    padding-left: var(--wm-popover-link-padding-left);
-    padding-right: var(--wm-popover-link-padding-right);
+    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);
-    border-radius: var(--wm-popover-link-border-radius);
+    border-radius: var(--wm-popover-link-radius);
 }
 
 .app-popover-wrapper .anchor-caption{

package/src/templates/foundation-theme/wavemaker/design-tokens/tokens.dark.css

@@ -2,7 +2,7 @@
   --wm-color-primary: #d0bcfe;
   --wm-color-primary-container: #4f378b;
   --wm-color-primary-fixed: #eaddff;
-  --wm-color-primary-fixed-dim: #d0bcff;
+  --wm-color-primary-fixed-dim: #ffe8e2;
   --wm-color-on-primary: #381e72;
   --wm-color-on-primary-container: #eaddff;
   --wm-color-on-primary-fixed: #21005d;
@@ -10,7 +10,7 @@
   --wm-color-secondary: #ccc2dc;
   --wm-color-secondary-container: #4a4458;
   --wm-color-secondary-fixed: #e8def8;
-  --wm-color-secondary-fixed-dim: #ccc2dc;
+  --wm-color-secondary-fixed-dim: #bbbcd6;
   --wm-color-on-secondary: #332d41;
   --wm-color-on-secondary-container: #e8def8;
   --wm-color-on-secondary-fixed: #1d192b;
@@ -18,23 +18,39 @@
   --wm-color-tertiary: #efb8c8;
   --wm-color-tertiary-container: #633b48;
   --wm-color-tertiary-fixed: #ffd8e4;
-  --wm-color-tertiary-fixed-dim: #efb8c8;
+  --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: #211f26;
+  --wm-color-surface-container: #ebebf7;
   --wm-color-surface-container-low: #1d1b20;
   --wm-color-surface-container-lowest: #0f0d13;
   --wm-color-surface-container-high: #2b2930;
@@ -44,9 +60,9 @@
   --wm-color-inverse-surface: #e6e0e9;
   --wm-color-inverse-on-surface: #322f35;
   --wm-color-inverse-primary: #6750a4;
-  --wm-color-outline: #938f99;
-  --wm-color-outline-variant: #49454f;
-  --wm-color-shadow: #ffffff;
-  --wm-color-scrim: #000000;
-  --wm-color-on-success: #1d192b;
+  --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);
 }