@aotearoan/neon 19.0.2 → 21.0.0

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';
@@ -198,6 +199,16 @@
   --neon-border-opacity-alert-action: 0.25;
   --neon-width-toast: 250rem;
 
+  /* mobile menu */
+  --neon-font-family-mobile-menu: var(--neon-font-family-body);
+  --neon-font-size-mobile-menu: var(--neon-font-size-s);
+  --neon-line-height-mobile-menu: var(--neon-line-height-ratio);
+  --neon-font-weight-mobile-menu: var(--neon-font-weight-bold);
+  --neon-height-mobile-menu-indicator: 4rem;
+  --neon-opacity-mobile-menu-inactive: 0.75;
+  --neon-opacity-mobile-menu-focus: 0.125;
+  --neon-height-mobile-menu: 66rem;
+
   /* dropdown */
   --neon-max-height-dropdown: 280rem;
 
@@ -218,7 +229,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 +267,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%;
 
@@ -279,6 +290,7 @@
 
   /* input */
   --neon-border-radius-input: var(--neon-border-radius);
+  --neon-border-width-input: var(--neon-border-width);
   --neon-opacity-input-background-active: 0.03125;
 
   /* skeleton loader */
@@ -323,21 +335,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 +380,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 +398,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 +478,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);
@@ -484,6 +489,10 @@
     /* action menu */
     --neon-color-action-menu-hover: var(--neon-color-neutral-d3);
 
+    /* mobile menu */
+    --neon-border-top-mobile-menu: var(--neon-border);
+    --neon-background-color-mobile-menu: var(--neon-background-color-card);
+
     /* selection */
     --neon-background-rgb-selection: var(--neon-rgb-info-l1);
     --neon-color-selection: black;
@@ -510,6 +519,7 @@
     --neon-background-color-drawer: var(--neon-background-color-card);
 
     /* input */
+    --neon-color-input: var(--neon-color-text);
     --neon-border-color-input: var(--neon-color-neutral-d2);
     --neon-background-color-input: rgba(var(--neon-rgb-neutral-d5), 0.5);
     --neon-color-placeholder: var(--neon-color-low-contrast-d3);
@@ -629,21 +639,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 +684,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 +702,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 +782,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);
@@ -790,6 +793,10 @@
     /* action menu */
     --neon-color-action-menu-hover: var(--neon-color-neutral-l4);
 
+    /* mobile menu */
+    --neon-border-top-mobile-menu: var(--neon-border);
+    --neon-background-color-mobile-menu: var(--neon-background-color-card);
+
     /* selection */
     --neon-background-rgb-selection: var(--neon-rgb-info-d1);
     --neon-color-selection: white;
@@ -816,13 +823,14 @@
     --neon-color-radio-button-label: var(--neon-color-neutral-d3);
 
     /* input */
+    --neon-color-input: var(--neon-color-text);
     --neon-border-color-input: var(--neon-color-neutral-l3);
     --neon-background-color-input: var(--neon-color-high-contrast-l5);
     --neon-color-placeholder: var(--neon-color-low-contrast-l3);
 
     /* 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);

package/dist/common/enums/NeonTabsStyle.cjs.js

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var r=(e=>(e.Web="web",e.App="app",e))(r||{});exports.NeonTabsStyle=r;
-//# sourceMappingURL=NeonTabsStyle.cjs.js.map

package/dist/common/enums/NeonTabsStyle.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NeonTabsStyle.cjs.js","sources":["../../../src/common/enums/NeonTabsStyle.ts"],"sourcesContent":["/**\n * Describes available tab styles for the <a href=\"/presentation/tabs\">NeonTabs</a> component.\n */\nexport enum NeonTabsStyle {\n  /** Typical tabs for use in a desktop web application. */\n  Web = 'web',\n  /** Mobile <em>App</em> tabs for use in a mobile application layout. */\n  App = 'app',\n}\n"],"names":["NeonTabsStyle"],"mappings":"gFAGO,IAAKA,GAAAA,IAEVA,EAAA,IAAM,MAENA,EAAA,IAAM,MAJIA,IAAAA,GAAA,CAAA,CAAA"}

package/dist/common/enums/NeonTabsStyle.es.js

@@ -1,5 +0,0 @@
-var r = /* @__PURE__ */ ((p) => (p.Web = "web", p.App = "app", p))(r || {});
-export {
-  r as NeonTabsStyle
-};
-//# sourceMappingURL=NeonTabsStyle.es.js.map

package/dist/common/enums/NeonTabsStyle.es.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NeonTabsStyle.es.js","sources":["../../../src/common/enums/NeonTabsStyle.ts"],"sourcesContent":["/**\n * Describes available tab styles for the <a href=\"/presentation/tabs\">NeonTabs</a> component.\n */\nexport enum NeonTabsStyle {\n  /** Typical tabs for use in a desktop web application. */\n  Web = 'web',\n  /** Mobile <em>App</em> tabs for use in a mobile application layout. */\n  App = 'app',\n}\n"],"names":["NeonTabsStyle"],"mappings":"AAGO,IAAKA,sBAAAA,OAEVA,EAAA,MAAM,OAENA,EAAA,MAAM,OAJIA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/src/common/enums/NeonTabsStyle.d.ts

@@ -1,9 +0,0 @@
-/**
- * Describes available tab styles for the <a href="/presentation/tabs">NeonTabs</a> component.
- */
-export declare enum NeonTabsStyle {
-    /** Typical tabs for use in a desktop web application. */
-    Web = "web",
-    /** Mobile <em>App</em> tabs for use in a mobile application layout. */
-    App = "app"
-}