npm - neo.mjs - Versions diffs - 6.12.1 → 6.14.0 - Mend

neo.mjs 6.12.1 → 6.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (948) hide show

package/resources/scss/src/apps/portal/learn/MainContainer.scss CHANGED Viewed

@@ -1,21 +1,25 @@
 .learnneo-maincontainer {
     background-color: #f2f2f2;
-    .main-content-splitter{
-        margin: 0 2px;
+    .main-content-splitter {
+        margin: 0;
     }
 }
 // Live preview Container
 .live-preview-container {
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+    border-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
     .neo-tab-header-toolbar {
-        background-color: var(--sem-color-bg-neutral-default);
+        background-color: var(--sem-color-surface-neutral-default);
         padding: var(--cmp-tab-strip-height);
-        border: 1px solid #F1F1F1;
+        border: 1px solid #e6e6e6;
         border-top-left-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
         border-top-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
     }
@@ -26,7 +30,7 @@
     .neo-tab-content-container {
         background-color: transparent;
-        border: 1px solid #F1F1F1;
+        border: 1px solid #e6e6e6;
         border-top: 0;
         border-bottom-left-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
         border-bottom-right-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));
@@ -58,4 +62,4 @@ background: transparent;
         background: #b2b2b2;
         border-radius: 100px;
     }
-}
+}

package/resources/scss/src/apps/portal/learn/PageContainer.scss ADDED Viewed

@@ -0,0 +1,35 @@
+.learn-content-container {
+    // align-items: center !important;
+    // padding: 0 3rem;
+    overflow: scroll;
+    .content-bottom-toolbar {
+        gap    : 8px;
+        padding: 0 3rem;
+        .neo-button {
+            flex           : 1 !important;
+            height         : 75px;
+            justify-content: flex-start;
+            .neo-button-text, .neo-button-glyph {
+                padding-top: 16px;
+            }
+        }
+        .content-bottom-toolbar-previous:before {
+            content         : 'Previous Page';
+            font-family     : var(--core-fontfamily-sans);
+            position        : absolute;
+            top             : var(--cmp-button-spacinghorizontal);
+            left            : var(--cmp-button-spacinghorizontal);
+        }
+        .content-bottom-toolbar-next:before {
+            content         : 'Next Page';
+            font-family     : var(--core-fontfamily-sans);
+            position        : absolute;
+            top             : var(--cmp-button-spacinghorizontal);
+            right            : var(--cmp-button-spacinghorizontal);
+        }
+    }
+}

package/resources/scss/src/apps/portal/learn/PageSectionsPanel.scss ADDED Viewed

@@ -0,0 +1,16 @@
+.portal-page-sections-panel.neo-panel {
+    border: none; // reset the default 1px
+    @media only screen and (max-width: 1200px) {
+        display: none;
+    }
+    .neo-list .neo-list-item {
+        white-space: normal;
+    }
+    .neo-panel-header-toolbar {
+        border       : none; // reset the default 1px
+        border-bottom: 1px solid #f2f2f2;;
+    }
+}

package/resources/scss/src/list/Base.scss CHANGED Viewed

@@ -64,8 +64,8 @@
         }
         &.neo-navigator-active-item {
-            outline        : 1px solid var(--list-item-border-color-active);
-            outline-offset : -1px;
+            outline       : var(--list-item-focus-outline);
+            outline-offset: var(--list-item-focus-outline-offset);
         }
         &[aria-selected="true"] {

package/resources/scss/theme-dark/list/Base.scss CHANGED Viewed

@@ -6,7 +6,8 @@
     --list-item-background-color-hover    : #{lighten(#33343d, 10%)};
     --list-item-background-color-selected : #5a7082;
     --list-item-color-selected            : #2b2b2b;
-    --list-item-border-color-active       : #f6d199;
+    --list-item-focus-outline             : 1px solid #f6d199;
+    --list-item-focus-outline-offset      : -1px;
     --list-item-glyph-color               : inherit;
     --list-item-highlight-search-color    : #fff;
     --list-item-padding                   : 5px;

package/resources/scss/theme-light/list/Base.scss CHANGED Viewed

@@ -6,7 +6,8 @@
     --list-item-background-color-hover    : #{lighten(#33343d, 70%)};
     --list-item-background-color-selected : #{lighten(#64B5F6, 22%)};
     --list-item-color-selected            : #2b2b2b;
-    --list-item-border-color-active       : darkorange;
+    --list-item-focus-outline             : 1px solid darkorange;
+    --list-item-focus-outline-offset      : -1px;
     --list-item-glyph-color               : #{lighten(#33343d, 20%)};
     --list-item-highlight-search-color    : red;
     --list-item-padding                   : 5px;

package/resources/scss/theme-neo-light/Global.scss CHANGED Viewed

@@ -34,10 +34,14 @@ p {
     line-height     : var(--core-lineheight-paragraph);
 }
+i, em {
+    font-style: italic;
+}
 code {
     background-color: #F0F2F0;
     border          : 1px solid var(--sem-color-border-subtle);
-    border-radius   : 2px;
+    border-radius   : 4px;
     color           : var(--sem-color-fg-neutral-contrast);
     font-family     : var(--core-fontfamily-mono);
     font-size       : var(--core-fontsize-body);

package/resources/scss/theme-neo-light/apps/portal/learn/ContentTreeList.scss ADDED Viewed

@@ -0,0 +1,23 @@
+:root .neo-theme-neo-light { // .covid-header-container
+    .topics-tree {
+        &.neo-tree-list {
+            .neo-list-container {
+                .neo-list-item {
+                    .neo-list-item-content:before {
+                        content: unset !important;
+                    }
+                    &.neo-list-folder {
+                        .neo-list-item-content:before {
+                            content: unset !important;
+                        }
+                        &.neo-folder-open .neo-list-item-content:before {
+                            content: unset !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

package/resources/scss/theme-neo-light/button/Base.scss CHANGED Viewed

@@ -1,122 +1,161 @@
-$text-color      : #1c60a0;
-$background-color: #fff;
-$border-color    : #ddd;
-$border-style    : solid;
-$border-width    : 1px;
-:root .neo-theme-neo-light { // .neo-button
-    --button-background-color                   : var(--cmp-button-primary-bg-default);
-    --button-background-color-active            : var(--cmp-button-primary-bg-active);
-    --button-background-color-disabled          : var(--cmp-button-primary-bg-disabled);
-    --button-background-color-hover             : var(--cmp-button-primary-bg-hover);
-    --button-background-image                   : none;
-    --button-background-gradient-end            : #323536;
-    --button-background-gradient-start          : #434749;
+:root .neo-theme-neo-light {
+    // .neo-button – Styles that will be inherited by ALL button styles
+    --button-height                             : var(--cmp-button-height);
+    --button-margin                             : var(--cmp-button-gap);
+    --button-padding                            : 0 var(--cmp-button-spacinghorizontal);
+    --button-text-font-family                   : var(--core-fontfamily-sans), sans-serif;
+    --button-text-font-size                     : var(--core-fontsize-label);
+    --button-text-font-weight                   : var(--core-fontweight-semibold);
+    --button-text-line-height                   : inherit;
+    --button-text-transform                     : none;
+    --button-border-radius                      : var(--cmp-button-borderradius);
     --button-badge-background-color             : var(--sem-color-fg-neutral-contrast);
     --button-badge-color                        : var(--sem-color-fg-neutral-contrast);
     --button-badge-margin-left                  : -10px;
     --button-badge-margin-top                   : -10px;
+    // {module: Button; ui: --primary} –––––––––––––––––––––––––––––––––––––––––––––––––––––
+    // Background Color
+    --button-background-color                   : var(--cmp-button-primary-surface-default);
+    --button-background-color-active            : var(--cmp-button-primary-surface-active);
+    --button-background-color-disabled          : var(--cmp-button-primary-surface-disabled);
+    --button-background-color-hover             : var(--cmp-button-primary-surface-hover);
+    //Border
     --button-border                             : none;
     --button-border-active                      : none;
     --button-border-disabled                    : none;
     --button-border-hover                       : none;
     --button-border-pressed                     : none;
-    --button-border-radius                      : var(--cmp-button-borderradius);
-    --button-glyph-color                        : var(--sem-color-fg-neutral-contrast);
-    --button-glyph-color-active                 : var(--sem-color-fg-neutral-contrast);
-    --button-glyph-color-disabled               : var(--sem-color-fg-neutral-contrast);
-    --button-glyph-color-hover                  : var(--sem-color-fg-neutral-contrast);
-    --button-height                             : var(--cmp-button-height);
-    --button-margin                             : var(--cmp-button-gap);
+    // Text Color
+    --button-text-color                         : var(--sem-color-text-neutral-reversed);
+    --button-text-color-hover                   : var(--sem-color-text-neutral-reversed);
+    --button-text-color-active                  : var(--sem-color-text-neutral-reversed);
+    --button-text-color-disabled                : var(--sem-color-text-neutral-disabled);
+    // Icon Color
+    --button-glyph-color                        : var(--sem-color-text-neutral-reversed);
+    --button-glyph-color-hover                  : var(--sem-color-text-neutral-reversed);
+    --button-glyph-color-active                 : var(--sem-color-text-neutral-reversed);
+    --button-glyph-color-disabled               : var(--sem-color-text-neutral-disabled);
+    --button-background-image                   : none;
+    --button-background-gradient-end            : #323536;
+    --button-background-gradient-start          : #434749;
     --button-opacity-disabled                   : inherit;
     --button-outline-active                     : none;
-    --button-padding                            : 0 var(--cmp-button-spacinghorizontal);
     --button-ripple-background-color            : transparent;
-    --button-text-color                         : var(--sem-color-fg-neutral-contrast);
-    --button-text-color-active                  : var(--sem-color-fg-neutral-contrast);
-    --button-text-color-disabled                : var(--sem-color-fg-neutral-disabled);
-    --button-text-color-hover                   : var(--sem-color-fg-neutral-contrast);
-    --button-text-font-family                   : var(--core-fontfamily-sans), sans-serif;
-    --button-text-font-size                     : var(--core-fontsize-label);
-    --button-text-font-weight                   : var(--core-fontweight-semibold);
-    --button-text-line-height                   : inherit;
-    --button-text-transform                     : none;
     --button-use-gradients                      : false;
-    // {module: Button; ui: --ghost}
-    --button-ghost-background-color             : var(--cmp-button-ghost-bg-default);
-    --button-ghost-background-color-active      : var(--cmp-button-ghost-bg-active);
-    --button-ghost-background-color-disabled    : var(--cmp-button-ghost-bg-disabled);
-    --button-ghost-background-color-hover       : var(--cmp-button-ghost-bg-hover);
-    --button-ghost-background-image             : none;
-    --button-ghost-badge-background-color       : transparent;
-    --button-ghost-badge-color                  : transparent;
+    // {module: Button; ui: --secondary}  ––––––––––––––––––––––––––––––––––––––––––––––––––
+    // Background Color
+    --button-secondary-background-color         : var(--cmp-button-secondary-surface-default);
+    --button-secondary-background-color-hover   : var(--cmp-button-secondary-surface-hover);
+    --button-secondary-background-color-active  : var(--cmp-button-secondary-surface-active);
+    --button-secondary-background-color-disabled: var(--cmp-button-secondary-surface-disabled);
+    // Border
+    --button-secondary-border                   : var(--cmp-button-borderwidth) solid var(--cmp-button-secondary-border-default);
+    --button-secondary-border-hover             : var(--cmp-button-borderwidth) solid var(--cmp-button-secondary-border-default);
+    --button-secondary-border-active            : var(--cmp-button-borderwidth) solid var(--cmp-button-secondary-border-default);
+    --button-secondary-border-disabled          : var(--cmp-button-borderwidth) solid var(--cmp-button-secondary-border-disabled);
+    --button-secondary-border-pressed           : var(--cmp-button-borderwidth) solid var(--cmp-button-secondary-border-default);
+    // Text Color
+    --button-secondary-text-color               : var(--sem-color-text-neutral-default);
+    --button-secondary-text-color-hover         : var(--sem-color-text-neutral-contrast);
+    --button-secondary-text-color-active        : var(--sem-color-text-neutral-contrast);
+    --button-secondary-text-color-disabled      : var(--sem-color-text-neutral-disabled);
+    // Icon Color
+    --button-secondary-glyph-color              : var(--sem-color-icon-neutral-default);
+    --button-secondary-glyph-color-hover        : var(--sem-color-icon-neutral-contrast);
+    --button-secondary-glyph-color-active       : var(--sem-color-icon-neutral-contrast);
+    --button-secondary-glyph-color-disabled     : var(--sem-color-icon-neutral-disabled);
+    --button-secondary-background-image         : none;
+    --button-secondary-badge-background-color   : transparent;
+    --button-secondary-badge-color              : transparent;
+    --button-secondary-opacity-disabled         : none;
+    --button-secondary-ripple-background-color  : inherit;
+    // {module: Button; ui: --ghost}  –––––––––––––––––––––––––––––––––––––––––––––––––––––--
+    // Background Color
+    --button-ghost-background-color             : var(--cmp-button-ghost-surface-default);
+    --button-ghost-background-color-hover       : var(--cmp-button-ghost-surface-hover);
+    --button-ghost-background-color-active      : var(--cmp-button-ghost-surface-active);
+    --button-ghost-background-color-disabled    : var(--cmp-button-ghost-surface-disabled);
+    // Border
     --button-ghost-border                       : none;
     --button-ghost-border-active                : none;
     --button-ghost-border-disabled              : inherit;
     --button-ghost-border-hover                 : none;
     --button-ghost-border-pressed               : none;
-    --button-ghost-glyph-color                  : var(--cmp-button-ghost-fg-default);
-    --button-ghost-glyph-color-active           : inherit;
-    --button-ghost-glyph-color-disabled         : var(--cmp-button-ghost-fg-disabled);
-    --button-ghost-glyph-color-hover            : inherit;
+    // Text Color
+    --button-ghost-text-color                   : var(--sem-color-text-neutral-default);
+    --button-ghost-text-color-hover             : var(--sem-color-text-neutral-contrast);
+    --button-ghost-text-color-active            : var(--sem-color-text-neutral-contrast);
+    --button-ghost-text-color-disabled          : var(--sem-color-text-neutral-disabled);
+    // Icon Color
+    --button-ghost-glyph-color                  : var(--sem-color-icon-neutral-default);
+    --button-ghost-glyph-color-hover            : var(--sem-color-icon-neutral-contrast);
+    --button-ghost-glyph-color-active           : var(--sem-color-icon-neutral-contrast);
+    --button-ghost-glyph-color-disabled         : var(--sem-color-icon-neutral-disabled);
+    --button-ghost-background-image             : none;
+    --button-ghost-badge-background-color       : transparent;
+    --button-ghost-badge-color                  : transparent;
     --button-ghost-opacity-disabled             : inherit;
     --button-ghost-ripple-background-color      : inherit;
-    --button-ghost-text-color                   : var(--cmp-button-ghost-fg-default);
-    --button-ghost-text-color-active            : inherit;
-    --button-ghost-text-color-disabled          : var(--cmp-button-ghost-fg-disabled);
-    --button-ghost-text-color-hover             : inherit;
-    // {module: Button; ui: --secondary}
-    --button-secondary-background-color         : var(--cmp-button-secondary-bg-default);
-    --button-secondary-background-color-active  : var(--cmp-button-secondary-bg-active);
-    --button-secondary-background-color-disabled: inherit;
-    --button-secondary-background-color-hover   : var(--cmp-button-secondary-bg-hover);
-    --button-secondary-background-image         : none;
-    --button-secondary-badge-background-color   : transparent;
-    --button-secondary-badge-color              : transparent;
-    --button-secondary-border                   : var(--cmp-button-secondary-border-default-width) solid var(--cmp-button-secondary-border-default-color);
-    --button-secondary-border-active            : inherit;
-    --button-secondary-border-disabled          : var(--cmp-button-secondary-border-default-width) solid var(--cmp-button-secondary-border-disabled-color);
-    --button-secondary-border-hover             : inherit
-    --button-secondary-border-pressed           : inherit
-    --button-secondary-glyph-color              : var(--sem-color-fg-neutral-contrast);
-    --button-secondary-glyph-color-active       : var(--sem-color-fg-neutral-contrast);
-    --button-secondary-glyph-color-disabled     : var(--sem-color-fg-neutral-disabled);
-    --button-secondary-glyph-color-hover        : var(--sem-color-fg-neutral-contrast);
-    --button-secondary-opacity-disabled         : none;
-    --button-secondary-ripple-background-color  : inherit;
-    --button-secondary-text-color               : var(--sem-color-fg-neutral-contrast);
-    --button-secondary-text-color-active        : var(--sem-color-fg-neutral-contrast);
-    --button-secondary-text-color-disabled      : var(--sem-color-fg-neutral-disabled);
-    --button-secondary-text-color-hover         : var(--sem-color-fg-neutral-contrast);
-    // {module: Button; ui: --tertiary}
+    // {module: Button; ui: --tertiary}  –––––––––––––––––––––––––––––––––––––––––––––––––––
+    // Background color
     --button-tertiary-background-color          : transparent;
-    --button-tertiary-background-color-active   : #{$border-color};
-    --button-tertiary-background-color-disabled : inherit;
-    --button-tertiary-background-color-hover    : var(--button-background-color-hover);
+    --button-tertiary-background-color-hover    : transparent;
+    --button-tertiary-background-color-active   : transparent;
+    --button-tertiary-background-color-disabled : transparent;
+    // Border
+    --button-tertiary-border                    : none;
+    --button-tertiary-border-hover              : none;
+    --button-tertiary-border-active             : none;
+    --button-tertiary-border-disabled           : none;
+    --button-tertiary-border-pressed            : none;
+    // Text color
+    --button-tertiary-text-color                : var(--sem-color-text-primary-default);
+    --button-tertiary-text-color-hover          : var(--sem-color-text-primary-default);
+    --button-tertiary-text-color-active         : var(--sem-color-text-primary-contrast);
+    --button-tertiary-text-color-disabled       : var(--sem-color-text-neutral-disabled);
+    // Icon color
+    --button-tertiary-glyph-color               : var(--sem-color-icon-primary-default);
+    --button-tertiary-glyph-color-active        : var(--sem-color-icon-primary-default);
+    --button-tertiary-glyph-color-disabled      : var(--sem-color-icon-primary-default);
+    --button-tertiary-glyph-color-hover         : var(--sem-color-icon-primary-default);
     --button-tertiary-background-image          : none;
     --button-tertiary-badge-background-color    : var(--button-badge-background-color);
     --button-tertiary-badge-color               : var(--button-badge-color);
-    --button-tertiary-border                    : #{$border-width} #{$border-style} transparent;
-    --button-tertiary-border-active             : #{$border-width} #{$border-style} #{$border-color};
-    --button-tertiary-border-disabled           : inherit;
-    --button-tertiary-border-hover              : #{$border-width} #{$border-style} #{$text-color};
-    --button-tertiary-border-pressed            : #{$border-width} #{$border-style} #{$text-color};
-    --button-tertiary-glyph-color               : var(--button-glyph-color);
-    --button-tertiary-glyph-color-active        : var(--button-glyph-color);
-    --button-tertiary-glyph-color-disabled      : inherit;
-    --button-tertiary-glyph-color-hover         : var(--button-glyph-color);
     --button-tertiary-opacity-disabled          : var(--neo-disabled-opacity);
     --button-tertiary-ripple-background-color   : inherit;
-    --button-tertiary-text-color                : var(--button-text-color);
-    --button-tertiary-text-color-active         : var(--button-text-color);
-    --button-tertiary-text-color-disabled       : inherit;
-    --button-tertiary-text-color-hover          : var(--button-text-color);
     // custom overrides
     .neo-button {
         min-width: var(--cmp-button-height);
+        &.neo-button-tertiary {
+            text-decoration: underline;
+            text-underline-offset: 3px;
+            text-decoration-color: var(--sem-color-text-primary-default);
+        }
     }
 }

package/resources/scss/theme-neo-light/design-tokens/Component.scss CHANGED Viewed

@@ -6,60 +6,55 @@
     --cmp-button-borderradius                   : var(--sem-borderradius-large);
     --cmp-button-borderwidth                    : 1px;
     --cmp-button-gap                            : var(--sem-spacing-xxsmall);
-    --cmp-button-ghost-bg-active                : var(--sem-color-bg-neutral-active);
-    --cmp-button-ghost-bg-default               : transparent;
-    --cmp-button-ghost-bg-disabled              : var(--sem-color-bg-neutral-disabled);
-    --cmp-button-ghost-bg-hover                 : var(--sem-color-bg-neutral-hover);
-    --cmp-button-ghost-bg-loading               : var(--sem-color-bg-neutral-hover);
-    --cmp-button-ghost-fg-default               : var(--sem-color-fg-neutral-contrast);
-    --cmp-button-ghost-fg-disabled              : var(--sem-color-fg-neutral-disabled);
+    --cmp-button-ghost-surface-active           : var(--sem-color-surface-neutral-active);
+    --cmp-button-ghost-surface-default          : transparent;
+    --cmp-button-ghost-surface-disabled         : var(--sem-color-surface-disabled);
+    --cmp-button-ghost-surface-hover            : var(--sem-color-surface-neutral-hover);
+    --cmp-button-ghost-surface-loading          : var(--sem-color-bg-neutral-hover);
+    --cmp-button-ghost-text-default             : var(--sem-color-fg-neutral-contrast);
+    --cmp-button-ghost-text-disabled            : var(--sem-color-fg-neutral-disabled);
     --cmp-button-height                         : var(--height-48);
-    --cmp-button-primary-bg-active              : var(--sem-color-bg-primary-active);
-    --cmp-button-primary-bg-default             : var(--sem-color-bg-primary-default);
-    --cmp-button-primary-bg-disabled            : var(--sem-color-bg-primary-disabled);
-    --cmp-button-primary-bg-hover               : var(--sem-color-bg-primary-hover);
-    --cmp-button-primary-bg-loading             : var(--sem-color-bg-primary-background);
-    --cmp-button-primary-fg-default             : var(--sem-color-fg-neutral-contrast);
-    --cmp-button-primary-fg-disabled            : var(--sem-color-fg-neutral-disabled);
-    --cmp-button-secondary-bg-active            : var(--sem-color-bg-neutral-active);
-    --cmp-button-secondary-bg-default           : transparent;
-    --cmp-button-secondary-bg-disabled          : transparent;
-    --cmp-button-secondary-bg-hover             : var(--sem-color-bg-neutral-hover);
-    --cmp-button-secondary-bg-loading           : var(--sem-color-bg-neutral-default);
-    --cmp-button-secondary-border-default-color : var(--sem-color-border-default);
-    --cmp-button-secondary-border-default-style : solid;
-    --cmp-button-secondary-border-default-width : 1px;
-    --cmp-button-secondary-border-disabled-color: var(--sem-color-border-subtle);
-    --cmp-button-secondary-border-disabled-style: solid;
-    --cmp-button-secondary-border-disabled-width: 1px;
-    --cmp-button-secondary-text-default         : var(--sem-color-fg-neutral-default);
-    --cmp-button-secondary-text-disabled        : var(--sem-color-fg-neutral-disabled);
+    --cmp-button-primary-surface-active         : var(--sem-color-surface-primary-active);
+    --cmp-button-primary-surface-default        : var(--sem-color-surface-primary-default);
+    --cmp-button-primary-surface-disabled       : var(--sem-color-bg-primary-disabled);
+    --cmp-button-primary-surface-hover          : var(--sem-color-surface-primary-hover);
+    --cmp-button-primary-text-default           : var(--sem-color-text-neutral-reversed);
+    --cmp-button-primary-text-disabled          : var(--sem-color-text-disabled);
+    --cmp-button-secondary-border-default       : var(--sem-color-border-default);
+    --cmp-button-secondary-border-disabled      : var(--sem-color-border-subtle);
+    --cmp-button-secondary-surface-active       : var(--sem-color-surface-neutral-active);
+    --cmp-button-secondary-surface-default      : transparent;
+    --cmp-button-secondary-surface-disabled     : var(--sem-color-surface-disabled);
+    --cmp-button-secondary-surface-hover        : var(--sem-color-surface-neutral-hover);
+    --cmp-button-secondary-surface-loading      : var(--sem-color-bg-neutral-default);
+    --cmp-button-secondary-text-default         : var(--sem-color-text-neutral-default);
+    --cmp-button-secondary-text-disabled        : var(--sem-color-text-disabled);
     --cmp-button-spacinghorizontal              : var(--sem-spacing-medium);
     --cmp-button-tertiary-default               : var(--sem-color-fg-neutral-contrast);
     --cmp-button-tertiary-disabled              : var(--sem-color-fg-neutral-disabled);
-    --cmp-sidenav-borderradius                  : var(--sem-borderradius-large);
-    --cmp-sidenav-chapter-bg-active             : var(--sem-color-bg-neutral-active);
-    --cmp-sidenav-chapter-bg-default            : transparent;
-    --cmp-sidenav-chapter-bg-hover              : var(--sem-color-bg-neutral-hover);
-    --cmp-sidenav-chapter-bg-selected           : var(--sem-color-bg-primary-background);
-    --cmp-sidenav-chapter-fg-default            : var(--sem-color-fg-neutral-default);
-    --cmp-sidenav-chapter-fg-disabled           : var(--sem-color-fg-neutral-disabled);
-    --cmp-sidenav-chapter-gap                   : var(--sem-spacing-small);
-    --cmp-sidenav-chapter-height                : var(--sem-height-xlarge);
-    --cmp-sidenav-gap                           : var(--sem-spacing-xsmall);
-    --cmp-sidenav-item-bg-default               : transparent;
-    --cmp-sidenav-item-bg-hover                 : var(--sem-color-bg-neutral-hover);
-    --cmp-sidenav-item-bg-pressed               : var(--sem-color-bg-neutral-active);
-    --cmp-sidenav-item-bg-selected              : var(--sem-color-bg-primary-background);
-    --cmp-sidenav-item-borderradius             : var(--sem-borderradius-large);
-    --cmp-sidenav-item-fg-default               : var(--sem-color-fg-neutral-default);
-    --cmp-sidenav-item-fg-disabled              : var(--sem-color-fg-neutral-disabled);
-    --cmp-sidenav-item-gap                      : var(--sem-spacing-small);
-    --cmp-sidenav-item-height                   : var(--sem-height-xlarge);
-    --cmp-sidenav-item-spacex                   : var(--sem-spacing-medium);
-    --cmp-sidenav-spacex                        : var(--sem-spacing-xsmall);
-    --cmp-sidenav-spacey                        : var(--sem-spacing-xsmall);
+    --cmp-list-borderradius                     : var(--sem-borderradius-large);
+    --cmp-list-chapter-bg-active                : var(--sem-color-bg-neutral-active);
+    --cmp-list-chapter-bg-default               : transparent;
+    --cmp-list-chapter-bg-hover                 : var(--sem-color-bg-neutral-hover);
+    --cmp-list-chapter-bg-selected              : var(--sem-color-bg-primary-background);
+    --cmp-list-chapter-fg-default               : var(--sem-color-fg-neutral-default);
+    --cmp-list-chapter-fg-disabled              : var(--sem-color-fg-neutral-disabled);
+    --cmp-list-chapter-gap                      : var(--sem-spacing-small);
+    --cmp-list-chapter-height                   : var(--sem-height-xlarge);
+    --cmp-list-gap                              : var(--sem-spacing-xsmall);
+    --cmp-list-item-borderradius                : var(--sem-borderradius-large);
+    --cmp-list-item-gap                         : var(--sem-spacing-small);
+    --cmp-list-item-height                      : var(--sem-height-xlarge);
+    --cmp-list-item-spacex                      : var(--sem-spacing-medium);
+    --cmp-list-item-surface-active              : var(--sem-color-surface-primary-background);
+    --cmp-list-item-surface-default             : #fff;
+    --cmp-list-item-surface-hover               : var(--sem-color-surface-neutral-hover);
+    --cmp-list-item-surface-selected            : var(--sem-color-surface-primary-background);
+    --cmp-list-item-text-default                : var(--sem-color-fg-neutral-default);
+    --cmp-list-item-text-disabled               : var(--sem-color-fg-neutral-disabled);
+    --cmp-list-item-text-selected               : var(--sem-color-text-primary-default);
+    --cmp-list-spacex                           : var(--sem-spacing-xsmall);
+    --cmp-list-spacey                           : var(--sem-spacing-xsmall);
     --cmp-tab-borderradius                      : var(--sem-borderradius-large);
     --cmp-tab-gap                               : var(--sem-spacing-xsmall);
     --cmp-tab-height                            : var(--sem-height-xlarge);
@@ -67,11 +62,10 @@
     --cmp-tab-strip-height                      : 3px;
     --cmp-tab-strip-selected                    : var(--sem-color-fg-neutral-contrast);
     --cmp-tab-strip-unselected                  : transparent;
-    --cmp-tab-unselected-bg-active              : var(--sem-color-bg-neutral-active);
+    --cmp-tab-unselected-bg-active              : var(--sem-color-surface-neutral-active);
     --cmp-tab-unselected-bg-default             : transparent;
-    --cmp-tab-unselected-bg-hover               : var(--sem-color-bg-neutral-hover);
-    --cmp-tooltip-bg                            : var(--sem-color-bg-neutral-contrast);
+    --cmp-tab-unselected-bg-hover               : var(--sem-color-surface-neutral-hover);
+    --cmp-tooltip-bg                            : var(--sem-color-surface-neutral-contrast);
     --cmp-tooltip-borderradius                  : var(--sem-borderradius-medium);
     --cmp-tooltip-fg                            : var(--sem-color-fg-neutral-inverted);
     --cmp-tooltip-height                        : var(--height-24);