@aotearoan/neon 19.0.2 → 21.0.0

package/src/sass/components/_slider.scss

@@ -107,7 +107,7 @@ $neon-width-slider-tooltip: 201rem;
         font-size: var(--neon-font-size-s);
         font-variant: tabular-nums;
         line-height: 1;
-        font-weight: var(--neon-font-weight-bold);
+        font-weight: var(--neon-font-weight-semi-bold);
         letter-spacing: 0;
         padding: var(--neon-space-8);
         border-radius: var(--neon-border-radius-slider-tooltip);

package/src/sass/components/_stepper.scss

@@ -90,7 +90,7 @@
       &--active,
       &--has-value {
         .neon-stepper__step-title {
-          color: var(--neon-color-text-strong);
+          color: var(--neon-color-text-primary);
         }
       }
 
@@ -102,7 +102,7 @@
         }
 
         .neon-stepper__step-title {
-          font-weight: var(--neon-font-weight-bold);
+          font-weight: var(--neon-font-weight-semi-bold);
         }
       }
     }
@@ -118,7 +118,7 @@
 
         .neon-stepper__step--active, {
           .neon-stepper__step-title {
-            font-weight: var(--neon-font-weight-bold);
+            font-weight: var(--neon-font-weight-semi-bold);
             color: var(--neon-color-#{$color});
           }
         }

package/src/sass/components/_switch.scss

@@ -59,7 +59,7 @@
     align-items: center;
     width: fit-content;
     cursor: pointer;
-    color: var(--neon-color-text);
+    color: var(--neon-color-text-secondary);
 
     &:focus {
       outline: none;

package/src/sass/components/_tabs.scss

@@ -41,7 +41,7 @@
       display: flex;
       flex-direction: row;
       align-items: center;
-      font-weight: var(--neon-font-weight-semi-bold);
+      font-weight: var(--neon-font-weight-medium);
     }
 
     .neon-tabs__menu-item {
@@ -66,14 +66,14 @@
         outline: none;
         height: 100%;
         align-items: center;
-        color: var(--neon-color-text-strong);
+        color: var(--neon-color-text-primary);
 
         .neon-svg--stroke {
-          stroke: var(--neon-color-text-strong);
+          stroke: var(--neon-color-text-primary);
         }
 
         .neon-svg--fill {
-          fill: var(--neon-color-text-strong);
+          fill: var(--neon-color-text-primary);
         }
 
         &:before {
@@ -90,102 +90,67 @@
       }
     }
 
-    &--web {
-      &.neon-tabs--s {
-        .neon-tabs__menu-items {
-          height: var(--neon-size-s);
-          font-size: var(--neon-font-size-m);
+    &.neon-tabs--s {
+      .neon-tabs__menu-items {
+        height: var(--neon-size-s);
+        font-size: var(--neon-font-size-m);
 
-          svg {
-            width: var(--neon-font-size-m);
-            height: var(--neon-font-size-m);
-            margin-right: var(--neon-base-space);
-          }
-        }
-      }
-
-      &.neon-tabs--m {
-        .neon-tabs__menu-items {
-          height: var(--neon-size-m);
-          font-size: var(--neon-font-size-l);
-
-          svg {
-            width: var(--neon-font-size-l);
-            height: var(--neon-font-size-l);
-            margin-right: calc(2 * var(--neon-base-space));
-          }
+        svg {
+          width: var(--neon-font-size-m);
+          height: var(--neon-font-size-m);
+          margin-right: var(--neon-base-space);
         }
       }
+    }
 
-      &.neon-tabs--l {
-        .neon-tabs__menu-items {
-          height: var(--neon-size-l);
-          font-size: var(--neon-font-size-l);
+    &.neon-tabs--m {
+      .neon-tabs__menu-items {
+        height: var(--neon-size-m);
+        font-size: var(--neon-font-size-l);
 
-          svg {
-            width: var(--neon-font-size-l);
-            height: var(--neon-font-size-l);
-            margin-right: calc(2 * var(--neon-base-space));
-          }
+        svg {
+          width: var(--neon-font-size-l);
+          height: var(--neon-font-size-l);
+          margin-right: calc(2 * var(--neon-base-space));
         }
       }
+    }
 
-      .neon-tabs__menu-items--underlined {
-        border-bottom: var(--neon-border-width-tabs) var(--neon-border-style) var(--neon-border-color-tabs-underline);
+    &.neon-tabs--l {
+      .neon-tabs__menu-items {
+        height: var(--neon-size-l);
+        font-size: var(--neon-font-size-l);
 
-        .neon-tabs__menu-item-container:before {
-          bottom: calc(-1 * var(--neon-border-width-tabs));
+        svg {
+          width: var(--neon-font-size-l);
+          height: var(--neon-font-size-l);
+          margin-right: calc(2 * var(--neon-base-space));
         }
       }
+    }
 
-      .neon-tabs__menu-item {
-        & + .neon-tabs__menu-item {
-          margin-left: calc(6 * var(--neon-base-space));
-        }
-
-        &-container {
-          flex-direction: row;
-        }
+    .neon-tabs__menu-items--underlined {
+      border-bottom: var(--neon-border-width-tabs) var(--neon-border-style) var(--neon-border-color-tabs-underline);
 
-        .neon-tabs__menu-item-container:focus {
-          &:before {
-            margin-left: var(--neon-base-space);
-            margin-right: var(--neon-base-space);
-            width: calc(100% - 2 * var(--neon-base-space));
-          }
-        }
+      .neon-tabs__menu-item-container:before {
+        bottom: calc(-1 * var(--neon-border-width-tabs));
       }
     }
 
-    &--app {
-      border-top: var(--neon-border);
-
-      .neon-tabs__menu-items--underlined {
-        border-top: var(--neon-border-width-tabs) var(--neon-border-style) var(--neon-border-color-tabs-underline);
-
-        .neon-tabs__menu-item-container:before {
-          top: calc(-1 * (var(--neon-border-width-tabs) + var(--neon-border-width)));
-        }
+    .neon-tabs__menu-item {
+      & + .neon-tabs__menu-item {
+        margin-left: calc(6 * var(--neon-base-space));
       }
 
-      .neon-tabs__menu-item {
-        width: 100%;
+      &-container {
+        flex-direction: row;
+      }
 
-        &-container {
-          flex-direction: column;
-          justify-content: center;
-          gap: var(--neon-base-space);
-          width: 100%;
-          padding-top: calc(3 * var(--neon-base-space));
-          padding-bottom: calc(2 * var(--neon-base-space));
-          font-weight: var(--neon-font-weight-semi-bold);
-          font-size: var(--neon-font-size-xs);
-          line-height: 1.26;
-
-          .neon-icon {
-            width: auto;
-            height: 24rem;
-          }
+      .neon-tabs__menu-item-container:focus {
+        &:before {
+          margin-left: var(--neon-base-space);
+          margin-right: var(--neon-base-space);
+          width: calc(100% - 2 * var(--neon-base-space));
         }
       }
     }

package/src/sass/components/_toggle.scss

@@ -42,8 +42,8 @@
           $toggle-color: var(--neon-color-#{$color}) !default;
 
           @if ($color == high-contrast) {
-            $toggle-rgb: var(--neon-rgb-text);
-            $toggle-color: var(--neon-color-text);
+            $toggle-rgb: var(--neon-rgb-text-secondary);
+            $toggle-color: var(--neon-color-text-secondary);
           }
 
           @include svg.color-with-svg(rgba($toggle-rgb, var(--neon-opacity-toggle-color)));
@@ -103,7 +103,7 @@
             }
 
             &.neon-toggle__label--checked {
-              color: var(--neon-color-text);
+              color: var(--neon-color-text-secondary);
 
               .neon-toggle__radio-button {
                 border: var(--neon-border-width-radio-button) var(--neon-border-style) var(--neon-color-#{$color});

package/src/sass/components/_tooltip.scss

@@ -65,8 +65,8 @@
       font-size: var(--neon-font-size-xs);
       text-transform: none;
       line-height: var(--neon-line-height-ratio);
-      font-weight: var(--neon-font-weight-semi-bold);
-      background: var(--neon-color-text);
+      font-weight: var(--neon-font-weight-medium);
+      background: var(--neon-color-text-secondary);
       color: var(--neon-color-inverse);
       border: var(--neon-border-width-tooltip) solid var(--neon-border-color);
       box-shadow: var(--neon-box-shadow-tooltip);
@@ -97,7 +97,7 @@
       .neon-tooltip__arrow {
         top: calc(100% + var(--neon-space-4));
         margin-top: -6rem;
-        border-top: 6rem solid var(--neon-color-text);
+        border-top: 6rem solid var(--neon-color-text-secondary);
         z-index: var(--neon-z-index-above-2);
       }
     }
@@ -110,7 +110,7 @@
       .neon-tooltip__arrow {
         bottom: calc(100% + var(--neon-space-4));
         margin-bottom: -6rem;
-        border-bottom: 6rem solid var(--neon-color-text);
+        border-bottom: 6rem solid var(--neon-color-text-secondary);
         z-index: var(--neon-z-index-above-2);
       }
     }
@@ -144,7 +144,7 @@
       .neon-tooltip__arrow {
         left: calc(100% + var(--neon-space-4));
         margin-left: -6rem;
-        border-left: 6rem solid var(--neon-color-text);
+        border-left: 6rem solid var(--neon-color-text-secondary);
         z-index: var(--neon-z-index-above-2);
       }
     }
@@ -161,7 +161,7 @@
       .neon-tooltip__arrow {
         right: calc(100% + var(--neon-space-4));
         margin-right: -6rem;
-        border-right: 6rem solid var(--neon-color-text);
+        border-right: 6rem solid var(--neon-color-text-secondary);
         z-index: var(--neon-z-index-above-2);
       }
     }
@@ -199,7 +199,7 @@
           line-height: var(--neon-line-height-ratio);
           font-weight: var(--neon-font-weight-normal);
           background: var(--neon-color-inverse);
-          color: var(--neon-color-text);
+          color: var(--neon-color-text-secondary);
         }
 
         &__content-wrapper {

package/src/sass/components/_tree-menu.scss

@@ -24,7 +24,7 @@
         &,
         &:hover,
         &:active {
-          color: var(--neon-color-text);
+          color: var(--neon-color-text-secondary);
         }
 
         &.neon-link--exact-active {
@@ -53,15 +53,15 @@
 
     .neon-tree-menu__section-link {
       font-size: var(--neon-font-size-l);
-      font-weight: var(--neon-font-weight-bold);
+      font-weight: var(--neon-font-weight-semi-bold);
 
       &:visited {
-        color: var(--neon-color-text);
+        color: var(--neon-color-text-secondary);
       }
     }
 
     .neon-tree-menu__section {
-      color: var(--neon-color-text);
+      color: var(--neon-color-text-secondary);
 
       & > .neon-tree-menu__link {
         font-size: var(--neon-font-size-m);
@@ -90,7 +90,7 @@
         font-weight: var(--neon-font-weight-normal);
         font-size: var(--neon-font-size-s);
         margin-bottom: var(--neon-space-2);
-        color: var(--neon-color-text);
+        color: var(--neon-color-text-secondary);
       }
 
       .neon-tree-menu__anchor {
@@ -98,7 +98,7 @@
         margin-bottom: var(--neon-space-2);
         padding-left: var(--neon-space-16);
         font-size: var(--neon-font-size-s);
-        color: var(--neon-color-text);
+        color: var(--neon-color-text-secondary);
       }
     }
 

package/src/sass/components/components.scss

@@ -55,3 +55,4 @@
 @forward './card-list';
 @forward './image-carousel';
 @forward './swiper';
+@forward './mobile-menu';

package/src/sass/global/_base-html.scss

@@ -9,7 +9,7 @@
   body {
     text-rendering: optimizeLegibility;
     background-color: var(--neon-background-color);
-    color: var(--neon-color-text);
+    color: var(--neon-color-text-secondary);
   }
 
 
@@ -106,7 +106,7 @@
   }
 
   pre.neon--preformatted {
-    color: var(--neon-color-text-light);
+    color: var(--neon-color-text-secondary-dark);
     background-color: var(--neon-background-color-pre);
 
     &:not(.prism-editor__editor) {
@@ -155,8 +155,16 @@
     }
   }
 
-  .neon-color-text {
-    color: var(--neon-color-text);
+  .neon-color-text-primary {
+    color: var(--neon-color-text-primary);
+  }
+
+  .neon-color-text-secondary {
+    color: var(--neon-color-text-secondary);
+  }
+
+  .neon-color-text-tertiary {
+    color: var(--neon-color-text-tertiary);
   }
 
   .neon-color-inverse {
@@ -164,46 +172,46 @@
   }
 
   .neon-dark-text {
-    color: var(--neon-color-text-dark);
+    color: var(--neon-color-text-secondary-light);
   }
 
   .neon-light-text {
-    color: var(--neon-color-text-light);
+    color: var(--neon-color-text-secondary-dark);
   }
 
-  .neon-color-text-low-contrast {
+  .neon-color-low-contrast {
     color: var(--neon-color-low-contrast);
   }
 
-  .neon-color-text-neutral {
+  .neon-color-neutral {
     color: var(--neon-color-neutral);
   }
 
-  .neon-color-text-high-contrast {
+  .neon-color-high-contrast {
     color: var(--neon-color-high-contrast);
   }
 
-  .neon-color-text-brand {
+  .neon-color-brand {
     color: var(--neon-color-brand);
   }
 
-  .neon-color-text-primary {
+  .neon-color-primary {
     color: var(--neon-color-primary);
   }
 
-  .neon-color-text-info {
+  .neon-color-info {
     color: var(--neon-color-info);
   }
 
-  .neon-color-text-success {
+  .neon-color-success {
     color: var(--neon-color-success);
   }
 
-  .neon-color-text-warn {
+  .neon-color-warn {
     color: var(--neon-color-warn);
   }
 
-  .neon-color-text-error {
+  .neon-color-error {
     color: var(--neon-color-error);
   }
 }

package/src/sass/global/_table.scss

@@ -2,7 +2,7 @@
   table {
     border-spacing: 0;
     border-collapse: collapse;
-    border-bottom: var(--neon-border-width-table) var(--neon-border-style) var(--neon-label-color);
+    border-bottom: var(--neon-border-width-table) var(--neon-border-style) var(--neon-color-label);
 
     thead {
       tr {
@@ -10,13 +10,13 @@
           height: var(--neon-size-m);
           vertical-align: bottom;
           font-size: var(--neon-font-size-s);
-          font-weight: var(--neon-font-weight-semi-bold);
+          font-weight: var(--neon-font-weight-medium);
           text-transform: uppercase;
           text-align: left;
           padding: 0 var(--neon-space-24) 0 0;
           letter-spacing: var(--neon-letter-spacing-m);
-          border-bottom: var(--neon-border-width-table) var(--neon-border-style) var(--neon-label-color);
-          color: var(--neon-label-color);
+          border-bottom: var(--neon-border-width-table) var(--neon-border-style) var(--neon-color-label);
+          color: var(--neon-color-label);
 
           &.neon--number {
             text-align: right;

package/src/sass/global/_typography.scss

@@ -18,6 +18,7 @@
 
   em {
     font-weight: var(--neon-font-weight-em);
+    margin-right: 1rem; // to account for the slanting text
   }
 
   strong {
@@ -140,6 +141,6 @@
   h6,
   .neon-h6,
   .neon-color-heading {
-    color: var(--neon-color-heading);
+    color: var(--neon-color-text-primary);
   }
 }

package/src/sass/includes/_dependencies.scss

@@ -128,6 +128,7 @@
           NeonCardList: [NeonButton, NeonExpansionIndicator, NeonIcon, NeonLink, NeonCard, NeonCardBody, NeonInline, NeonStack],
           NeonImageCarousel: [NeonButton, NeonLink],
           NeonSwiper: [],
+          NeonMobileMenu: [NeonIcon, NeonLink],
   );
 
   $neon-flattened-components: [];

package/src/sass/includes/_outline.scss

@@ -9,7 +9,7 @@
 
     &:after {
       content: '';
-      font-weight: bold;
+      font-weight: var(--neon-font-weight-semi-bold);
       position: absolute;
       left: 0;
       bottom: var(--neon-border-bottom-offset-link);

package/src/sass/includes/_typography.scss

@@ -48,7 +48,7 @@
 }
 
 @mixin label {
-  color: var(--neon-label-color);
+  color: var(--neon-color-label);
   font-size: var(--neon-font-size-xs);
   font-weight: var(--neon-font-weight-semi-bold);
   letter-spacing: var(--neon-letter-spacing-s);

package/src/sass/palette.scss

@@ -3,15 +3,12 @@
   This is why there are 2 color definitions the raw 'rgb' definition and the actual 'color' one
 */
 .neon {
-  // TODO: rename to primary & secondary text
-  --neon-rgb-text-dark: 48, 48, 48;
-  --neon-rgb-text-strong-dark: 36, 36, 36;
-  --neon-rgb-text-light: 221, 221, 221;
-  --neon-rgb-text-strong-light: 248, 248, 248;
-  // tertiary text values
-  --neon-rgb-text-tertiary-dark: 114, 114, 114;
-  --neon-rgb-text-tertiary-light: 144, 144, 144;
-
+  --neon-rgb-text-primary-light: 20, 20, 20;
+  --neon-rgb-text-secondary-light: 51, 51, 51;
+  --neon-rgb-text-tertiary-light: 114, 114, 114;
+  --neon-rgb-text-primary-dark: 248, 248, 248;
+  --neon-rgb-text-secondary-dark: 221, 221, 221;
+  --neon-rgb-text-tertiary-dark: 166, 166, 166;
   --neon-rgb-disabled-background-dark: 55, 55, 55;
   --neon-rgb-disabled-border-dark: 65, 65, 65;
   --neon-rgb-disabled-text-dark: 80, 80, 80;

package/src/sass/theme.scss

@@ -262,4 +262,8 @@ $neon-components: null !default;
   @if index($neon-flattened-components, NeonSwiper) {
     @include components.swiper;
   }
+
+  @if index($neon-flattened-components, NeonMobileMenu) {
+    @include components.mobile-menu;
+  }
 }