@aotearoan/neon 19.0.2 → 20.0.0

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 {
@@ -178,7 +178,7 @@
           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-weight: var(--neon-font-weight-medium);
           font-size: var(--neon-font-size-xs);
           line-height: 1.26;
 

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/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/_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/variables.scss

@@ -115,27 +115,28 @@
   /* AKA branding font size, used for landing page & banners etc... */
   --neon-h0-size: calc(var(--neon-font-size-xxl) * var(--neon-typography-scale) * var(--neon-typography-scale) * var(--neon-typography-scale) * var(--neon-typography-scale) * var(--neon-typography-scale));
 
-  --neon-font-weight-lighter: 200;
+  --neon-font-weight-extra-light: 200;
   --neon-font-weight-normal: 400;
-  --neon-font-weight-semi-bold: 500;
-  --neon-font-weight-bold: 600;
+  --neon-font-weight-medium: 500;
+  --neon-font-weight-semi-bold: 600;
+  --neon-font-weight-bold: 700;
 
   --neon-h6-weight: var(--neon-font-weight-normal);
-  --neon-h5-weight: var(--neon-font-weight-normal);
-  --neon-h4-weight: var(--neon-font-weight-normal);
+  --neon-h5-weight: var(--neon-font-weight-medium);
+  --neon-h4-weight: var(--neon-font-weight-medium);
   --neon-h3-weight: var(--neon-font-weight-semi-bold);
   --neon-h2-weight: var(--neon-font-weight-semi-bold);
   --neon-h1-weight: var(--neon-font-weight-bold);
   --neon-h0-weight: var(--neon-font-weight-bold);
 
-  --neon-font-weight-em: var(--neon-font-weight-lighter);
-  --neon-font-weight-strong: var(--neon-font-weight-bold);
+  --neon-font-weight-em: var(--neon-font-weight-extra-light);
+  --neon-font-weight-strong: var(--neon-font-weight-medium);
 
   --neon-letter-spacing-headings: 0;
 
-  --neon-line-height-headings-ratio: 1.2;
+  --neon-line-height-headings-ratio: 1.25;
   --neon-line-height-ratio: 1.4;
-  --neon-line-height-one: 1.125; // hack for line-height: 1 to prevent cropping of content below the baseline e.g. 'g'
+  --neon-line-height-one: 1.25; // hack for line-height: 1 to prevent cropping of content below the baseline e.g. 'g'
 
   --neon-system-font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
   'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
@@ -218,7 +219,7 @@
   --neon-opacity-chip: 0.23;
 
   /* toggle chips */
-  --neon-font-weight-toggle-chip: var(--neon-font-weight-bold);
+  --neon-font-weight-toggle-chip: var(--neon-font-weight-semi-bold);
   --neon-border-width-toggle-chip: 1rem;
   --neon-border-radius-toggle-chip: 2rem;
   --neon-opacity-toggle-chip-hover: 0.125;
@@ -256,8 +257,8 @@
   --neon-font-size-note-text: var(--neon-font-size-s);
   --neon-font-size-note-text-mobile: var(--neon-font-size-m);
 
-  --neon-font-weight-note-title: var(--neon-font-weight-bold);
-  --neon-font-weight-note-text: var(--neon-font-weight-semi-bold);
+  --neon-font-weight-note-title: var(--neon-font-weight-semi-bold);
+  --neon-font-weight-note-text: var(--neon-font-weight-medium);
 
   --neon-max-width-note: 100%;
 
@@ -323,21 +324,14 @@
     --neon-border-card: var(--neon-border);
     --neon-background-color: var(--neon-color-neutral-d5);
 
-    --neon-rgb-text: var(--neon-rgb-text-light);
-    --neon-color-text: var(--neon-color-text-light);
-    --neon-rgb-text-strong: var(--neon-rgb-text-strong-light);
-    --neon-color-text-strong: var(--neon-color-text-strong-light);
-
-    // alias to new variables
-    --neon-rgb-text-primary: var(--neon-rgb-text-strong);
-    --neon-color-text-primary: var(--neon-color-text-strong);
-    --neon-rgb-text-secondary: var(--neon-rgb-text);
-    --neon-color-text-secondary: var(--neon-color-text);
-    --neon-rgb-text-tertiary: var(--neon-rgb-text-tertiary-light);
-    --neon-color-text-tertiary: rgb(var(--neon-rgb-text-tertiary));
-
-    --neon-rgb-inverse: var(--neon-rgb-text-strong-dark);
-    --neon-color-inverse: var(--neon-color-text-strong-dark);
+    --neon-rgb-text-primary: var(--neon-rgb-text-primary-dark);
+    --neon-color-text-primary: var(--neon-color-text-primary-dark);
+    --neon-rgb-text-secondary: var(--neon-rgb-text-secondary-dark);
+    --neon-color-text-secondary: var(--neon-color-text-secondary-dark);
+    --neon-rgb-text-tertiary: var(--neon-rgb-text-tertiary-dark);
+    --neon-color-text-tertiary: var(--neon-color-text-tertiary-dark);
+    --neon-rgb-inverse: var(--neon-rgb-text-primary-light);
+    --neon-color-inverse: var(--neon-color-text-primary-light);
 
     --neon-rgb-low-contrast: var(--neon-rgb-low-contrast-l1);
     --neon-rgb-neutral: var(--neon-rgb-neutral-l1);
@@ -375,7 +369,7 @@
     --neon-border-hr: 1rem var(--neon-border-style) var(--neon-border-color);
     --neon-color-hr: var(--neon-border-color);
 
-    --neon-label-color: var(--neon-color-neutral-l1);
+    --neon-color-label: var(--neon-color-text-secondary);
 
     --neon-rgb-disabled-text: var(--neon-rgb-disabled-text-dark);
     --neon-rgb-disabled-border: var(--neon-rgb-disabled-border-dark);
@@ -393,11 +387,11 @@
 
     /* solid buttons */
     --neon-color-solid-button: var(--neon-color-inverse);
-    --neon-color-solid-button-inverse: var(--neon-color-text-strong);
+    --neon-color-solid-button-inverse: var(--neon-color-text-primary);
 
-    --neon-background-solid-button-light-high-contrast: var(--neon-color-text-strong);
-    --neon-background-rgb-solid-button-dark-high-contrast: var(--neon-rgb-text-strong);
-    --neon-background-solid-button-dark-high-contrast: var(--neon-color-text-strong);
+    --neon-background-solid-button-light-high-contrast: var(--neon-color-text-primary);
+    --neon-background-rgb-solid-button-dark-high-contrast: var(--neon-rgb-text-primary);
+    --neon-background-solid-button-dark-high-contrast: var(--neon-color-text-primary);
 
     --neon-background-solid-button-light-inverse: var(--neon-color-inverse);
     --neon-background-rgb-solid-button-dark-inverse: var(--neon-rgb-inverse);
@@ -473,7 +467,7 @@
 
     /* note */
     --neon-background-color-note: rgba(var(--neon-rgb-high-contrast-d3), 0.5);
-    --neon-color-note: var(--neon-color-text);
+    --neon-color-note: var(--neon-color-text-secondary);
 
     /* link */
     --neon-color-link: var(--neon-color-primary-l1);
@@ -629,21 +623,14 @@
     --neon-border-card: var(--neon-border);
     --neon-background-color: var(--neon-color-high-contrast-l4);
 
-    --neon-rgb-text: var(--neon-rgb-text-dark);
-    --neon-color-text: var(--neon-color-text-dark);
-    --neon-rgb-text-strong: var(--neon-rgb-text-strong-dark);
-    --neon-color-text-strong: var(--neon-color-text-strong-dark);
-
-    // alias to new variables
-    --neon-rgb-text-primary: var(--neon-rgb-text-strong);
-    --neon-color-text-primary: var(--neon-color-text-strong);
-    --neon-rgb-text-secondary: var(--neon-rgb-text);
-    --neon-color-text-secondary: var(--neon-color-text);
-    --neon-rgb-text-tertiary: var(--neon-rgb-text-tertiary-dark);
-    --neon-color-text-tertiary: rgb(var(--neon-rgb-text-tertiary));
-
-    --neon-rgb-inverse: var(--neon-rgb-text-strong-light);
-    --neon-color-inverse: var(--neon-color-text-strong-light);
+    --neon-rgb-text-primary: var(--neon-rgb-text-primary-light);
+    --neon-color-text-primary: var(--neon-color-text-primary-light);
+    --neon-rgb-text-secondary: var(--neon-rgb-text-secondary-light);
+    --neon-color-text-secondary: var(--neon-color-text-secondary-light);
+    --neon-rgb-text-tertiary: var(--neon-rgb-text-tertiary-light);
+    --neon-color-text-tertiary: var(--neon-color-text-tertiary-light);
+    --neon-rgb-inverse: var(--neon-rgb-text-primary-dark);
+    --neon-color-inverse: var(--neon-color-text-primary-dark);
 
     --neon-rgb-low-contrast: var(--neon-rgb-low-contrast-d1);
     --neon-rgb-neutral: var(--neon-rgb-neutral-d1);
@@ -681,7 +668,7 @@
     --neon-border-hr: 1rem var(--neon-border-style) var(--neon-border-color);
     --neon-color-hr: var(--neon-border-color);
 
-    --neon-label-color: var(--neon-color-neutral-d1);
+    --neon-color-label: var(--neon-color-text-secondary);
 
     --neon-rgb-disabled-text: var(--neon-rgb-disabled-text-light);
     --neon-rgb-disabled-border: var(--neon-rgb-disabled-border-light);
@@ -699,11 +686,11 @@
 
     /* solid buttons */
     --neon-color-solid-button: var(--neon-color-inverse);
-    --neon-color-solid-button-inverse: var(--neon-color-text-strong);
+    --neon-color-solid-button-inverse: var(--neon-color-text-primary);
 
-    --neon-background-solid-button-light-high-contrast: var(--neon-color-text);
-    --neon-background-rgb-solid-button-dark-high-contrast: var(--neon-rgb-text);
-    --neon-background-solid-button-dark-high-contrast: var(--neon-color-text);
+    --neon-background-solid-button-light-high-contrast: var(--neon-color-text-secondary);
+    --neon-background-rgb-solid-button-dark-high-contrast: var(--neon-rgb-text-secondary);
+    --neon-background-solid-button-dark-high-contrast: var(--neon-color-text-secondary);
 
     --neon-background-solid-button-light-inverse: var(--neon-color-inverse);
     --neon-background-rgb-solid-button-dark-inverse: var(--neon-rgb-inverse);
@@ -779,7 +766,7 @@
 
     /* note */
     --neon-background-color-note: rgba(var(--neon-rgb-high-contrast-l3), 0.5);
-    --neon-color-note: var(--neon-color-text);
+    --neon-color-note: var(--neon-color-text-secondary);
 
     /* link */
     --neon-color-link: var(--neon-color-primary-d1);
@@ -822,7 +809,7 @@
 
     /* drop zone */
     --neon-rgb-drop-zone-background: var(--neon-rgb-high-contrast-l4);
-    --neon-rgb-drop-zone: var(--neon-rgb-text);
+    --neon-rgb-drop-zone: var(--neon-rgb-text-secondary);
 
     /* alerts */
     --neon-box-shadow-alert: calc(0.5 * var(--neon-base-space)) calc(0.5 * var(--neon-base-space)) calc(2 * var(--neon-base-space)) rgba(var(--neon-rgb-neutral-d1), 0.5);