@ndwnu/design-system 1.0.3 → 1.0.4

package/core/styles/ndw-styles.scss

@@ -1,13 +1,24 @@
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..650;1,9..40,400..650&family=Material+Symbols+Rounded:opsz,wght@20..48,400&family=Nunito+Sans:ital,opsz,wght@0,6..12,400..650;1,6..12,400..650&display=block");
 :root {
   --_primary: 19, 100%;
-  --_primary-700: var(--_primary), 27%;
+  --_primary-050: var(--_primary), 95%;
+  --_primary-100: var(--_primary), 80%;
+  --_primary-200: var(--_primary), 73%;
+  --_primary-300: var(--_primary), 62%;
+  --_primary-400: var(--_primary), 50%;
+  --_primary-500: var(--_primary), 40%;
   --_primary-600: var(--_primary), 35%;
-  --_primary-500: var(--_primary), 41%;
-  --_primary-100: var(--_primary), 95%;
-  --ndw-color-primary-700: hsl(var(--_primary-700));
-  --ndw-color-primary-600: hsl(var(--_primary-600));
-  --ndw-color-primary-500: hsl(var(--_primary-500));
+  --_primary-700: var(--_primary), 27%;
+  --_primary-800: var(--_primary), 15%;
+  --ndw-color-primary-050: hsl(var(--_primary-050));
   --ndw-color-primary-100: hsl(var(--_primary-100));
+  --ndw-color-primary-200: hsl(var(--_primary-200));
+  --ndw-color-primary-300: hsl(var(--_primary-300));
+  --ndw-color-primary-400: hsl(var(--_primary-400));
+  --ndw-color-primary-500: hsl(var(--_primary-500));
+  --ndw-color-primary-600: hsl(var(--_primary-600));
+  --ndw-color-primary-700: hsl(var(--_primary-700));
+  --ndw-color-primary-800: hsl(var(--_primary-800));
   --ndw-color-primary: var(--ndw-color-primary-500);
   --ndw-color-primary-hover: var(--ndw-color-primary-600);
   --ndw-color-primary-active: var(--ndw-color-primary-700);
@@ -18,6 +29,30 @@
   --ndw-foreground-primary-hover: var(--ndw-color-white);
   --ndw-foreground-primary-active: var(--ndw-color-white);
   --ndw-text-primary: var(--ndw-color-primary);
+  --_secondary: 209, 100%;
+  --_secondary-050: var(--_secondary), 96%;
+  --_secondary-100: 209, 85%, 91%;
+  --_secondary-200: 209, 85%, 78%;
+  --_secondary-300: 209, 85%, 69%;
+  --_secondary-400: var(--_secondary), 46%;
+  --_secondary-500: var(--_secondary), 41%;
+  --_secondary-600: var(--_secondary), 32%;
+  --_secondary-700: var(--_secondary), 18%;
+  --ndw-color-secondary-050: hsl(var(--_secondary-050));
+  --ndw-color-secondary-100: hsl(var(--_secondary-100));
+  --ndw-color-secondary-200: hsl(var(--_secondary-200));
+  --ndw-color-secondary-300: hsl(var(--_secondary-300));
+  --ndw-color-secondary-400: hsl(var(--_secondary-400));
+  --ndw-color-secondary-500: hsl(var(--_secondary-500));
+  --ndw-color-secondary-600: hsl(var(--_secondary-600));
+  --ndw-color-secondary-700: hsl(var(--_secondary-700));
+  --_tertiary: 43, 100%;
+  --_tertiary-400: var(--_tertiary), 50%;
+  --_tertiary-500: var(--_tertiary), 43%;
+  --ndw-color-tertiary-400: hsl(var(--_tertiary-400));
+  --ndw-color-tertiary-500: hsl(var(--_tertiary-500));
+  --ndw-alpha-primary-007: hsla(var(--_primary-500), var(--_alpha-007));
+  --ndw-alpha-primary-015: hsla(var(--_primary-500), var(--_alpha-015));
 }
 
 .cdk-overlay-container, .cdk-global-overlay-wrapper {
@@ -110,14 +145,15 @@
 
 :root {
   /* Colors */
-  --_grey: 0, 0%;
-  --_grey-600: 210, 9%, 17%;
-  --_grey-500: var(--_grey), 27%;
-  --_grey-400: var(--_grey), 40%;
-  --_grey-300: var(--_grey), 57%;
-  --_grey-200: var(--_grey), 81%;
-  --_grey-100: var(--_grey), 96%;
-  --_white: var(--_grey), 100%;
+  --_grey-700: 195, 100%, 10%;
+  --_grey-600: 196, 13%, 29%;
+  --_grey-500: 197, 7%, 40%;
+  --_grey-400: 204, 2%, 54%;
+  --_grey-300: 192, 5%, 82%;
+  --_grey-200: 204, 11%, 91%;
+  --_grey-100: 200, 16%, 96%;
+  --_white: 0, 0%, 100%;
+  --ndw-color-grey-700: hsl(var(--_grey-700));
   --ndw-color-grey-600: hsl(var(--_grey-600));
   --ndw-color-grey-500: hsl(var(--_grey-500));
   --ndw-color-grey-400: hsl(var(--_grey-400));
@@ -125,28 +161,35 @@
   --ndw-color-grey-200: hsl(var(--_grey-200));
   --ndw-color-grey-100: hsl(var(--_grey-100));
   --ndw-color-white: hsl(var(--_white));
-  --_info: 210, 100%;
-  --_info-500: var(--_info), 43%;
-  --_info-200: var(--_info), 91%;
-  --_info-100: var(--_info), 95%;
+  --_link: 208, 100%;
+  --_link-400: var(--_link), 41%;
+  --_link-500: var(--_link), 32%;
+  --ndw-color-link-400: hsl(var(--_link-400));
+  --ndw-color-link-500: hsl(var(--_link-500));
   --_positive: 133, 92%;
-  --_positive-600: var(--_positive), 24%;
-  --_positive-500: var(--_positive), 33%;
   --_positive-100: 117, 56%, 92%;
-  --_negative: 0, 100%;
-  --_negative-700: var(--_negative), 46%;
-  --_negative-500: var(--_negative), 59%;
-  --_negative-100: var(--_negative), 98%;
-  --ndw-color-info-500: hsl(var(--_info-500));
-  --ndw-color-info-200: hsl(var(--_info-200));
-  --ndw-color-info-100: hsl(var(--_info-100));
-  --ndw-color-positive-600: hsl(var(--_positive-600));
-  --ndw-color-positive-500: hsl(var(--_positive-500));
+  --_positive-500: var(--_positive), 33%;
+  --_positive-600: var(--_positive), 24%;
+  --_warning: 43, 93%;
+  --_warning-100: 44, 100%, 94%;
+  --_warning-500: var(--_warning), 43%;
+  --_warning-600: 42, 83%, 32%;
+  --_alternative: 292, 100%;
+  --_alternative-100: var(--_alternative), 95%;
+  --_alternative-500: 292, 95%, 33%;
+  --_critical: 0, 100%;
+  --_critical-100: var(--_critical), 98%;
+  --_critical-500: var(--_critical), 46%;
   --ndw-color-positive-100: hsl(var(--_positive-100));
-  --ndw-color-negative-700: hsl(var(--_negative-700));
-  --ndw-color-negative-500: hsl(var(--_negative-500));
-  --ndw-color-negative-100: hsl(var(--_negative-100));
-  --ndw-color-info-alpha-40: hsla(var(--_info-500), var(--ndw-alpha-40));
+  --ndw-color-positive-500: hsl(var(--_positive-500));
+  --ndw-color-positive-600: hsl(var(--_positive-600));
+  --ndw-color-warning-100: hsl(var(--_warning-100));
+  --ndw-color-warning-500: hsl(var(--_warning-500));
+  --ndw-color-warning-600: hsl(var(--_warning-600));
+  --ndw-color-alternative-100: hsl(var(--_alternative-100));
+  --ndw-color-alternative-500: hsl(var(--_alternative-500));
+  --ndw-color-critical-100: hsl(var(--_critical-100));
+  --ndw-color-critical-500: hsl(var(--_critical-500));
   --ndw-color-notification: hsl(19, 100%, 35%);
   --_data-a-500: 133, 100%, 21%;
   --_data-a-100: 101, 61%, 81%;
@@ -173,9 +216,13 @@
   --ndw-color-data-f-500: hsl(var(--_data-f-500));
   --ndw-color-data-f-100: hsl(var(--_data-f-100));
   /* Alpha */
-  --ndw-alpha-40: 0.4;
-  --ndw-alpha-15: 0.15;
-  --ndw-alpha-7: 0.07;
+  --_alpha-black: 0, 0%, 0%;
+  --_alpha-007: 0.07;
+  --_alpha-015: 0.15;
+  --_alpha-040: 0.4;
+  --ndw-alpha-black-007: hsla(var(--_alpha-black), var(--_alpha-007));
+  --ndw-alpha-black-015: hsla(var(--_alpha-black), var(--_alpha-015));
+  --ndw-alpha-black-040: hsla(var(--_alpha-black), var(--_alpha-040));
   /* Spacing */
   --ndw-spacing-3xs: 0.125rem;
   --ndw-spacing-2xs: 0.25rem;
@@ -210,113 +257,104 @@
   --ndw-icon-size-md: 1rem;
   --ndw-icon-size-lg: 1.5rem;
   /* Typography */
-  --ndw-font-family: "Object Sans", sans-serif;
+  --ndw-font-family-body: "Nunito Sans", sans-serif;
+  --ndw-font-family-heading: "DM Sans", sans-serif;
   --ndw-base-font-size: 16px;
   --ndw-font-size-xs: 0.6875rem;
   --ndw-font-size-sm: 0.8125rem;
   --ndw-font-size-md: 1.125rem;
   --ndw-font-size-lg: 1.25rem;
   --ndw-font-size-xl: 1.5rem;
-  --ndw-font-weight-regular: 500;
-  --ndw-font-weight-bold: 600;
+  --ndw-font-weight-regular: 400;
+  --ndw-font-weight-bold: 650;
+  --ndw-line-height-sm: 1.375em;
   --ndw-line-height-md: 1.5em;
   /* Transform */
   --ndw-rotate-half: rotate(180deg);
 }
 
-@font-face {
-  font-family: "Object Sans";
-  font-weight: 500;
-  font-style: normal;
-  src: url("../../assets/fonts/ObjectSans-Regular.woff2") format("woff2");
-}
-@font-face {
-  font-family: "Object Sans";
-  font-weight: 600;
-  font-style: normal;
-  src: url("../../assets/fonts/ObjectSans-Bold.woff2") format("woff2");
-}
+/* Screen sizes */
 /* Mixins */
 /* Classes */
 .ndw-heading-xl {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-heading);
   font-size: 2.5rem;
   font-weight: var(--ndw-font-weight-bold);
   line-height: 150%;
 }
 
 .ndw-heading-lg {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-heading);
   font-size: 2rem;
   font-weight: var(--ndw-font-weight-bold);
   line-height: 150%;
 }
 
 .ndw-heading-md {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-heading);
   font-size: 1.5rem;
   font-weight: var(--ndw-font-weight-bold);
   line-height: 150%;
 }
 
 .ndw-heading-sm {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-heading);
   font-size: 1.25rem;
   font-weight: var(--ndw-font-weight-bold);
   line-height: 150%;
 }
 
 .ndw-paragraph-bold-xl {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: 1.125rem;
   font-weight: var(--ndw-font-weight-bold);
   line-height: 150%;
 }
 
 .ndw-paragraph-xl {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: 1.125rem;
   font-weight: var(--ndw-font-weight-regular);
   line-height: 150%;
 }
 
 .ndw-paragraph-bold-lg {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: 1rem;
   font-weight: var(--ndw-font-weight-bold);
   line-height: 150%;
 }
 
 .ndw-paragraph-lg {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: 1rem;
   font-weight: var(--ndw-font-weight-regular);
   line-height: 150%;
 }
 
 .ndw-paragraph-bold-md {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: 0.8125rem;
   font-weight: var(--ndw-font-weight-bold);
   line-height: 150%;
 }
 
 .ndw-paragraph-md {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: 0.8125rem;
   font-weight: var(--ndw-font-weight-regular);
   line-height: 150%;
 }
 
 .ndw-paragraph-bold-sm {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: 0.6875rem;
   font-weight: var(--ndw-font-weight-bold);
   line-height: 150%;
 }
 
 .ndw-paragraph-sm {
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: 0.6875rem;
   font-weight: var(--ndw-font-weight-regular);
   line-height: 150%;
@@ -534,11 +572,14 @@
   border-radius: var(--ndw-border-radius-sm);
   transition: color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
   color: var(--ndw-foreground-primary);
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: var(--ndw-font-size-sm);
   font-weight: var(--ndw-font-weight-regular);
   text-align: start;
 }
+[ndwButton] ndw-icon {
+  font-size: var(--ndw-spacing-md);
+}
 [ndwButton]:hover {
   background-color: var(--ndw-background-primary-hover);
   border-color: var(--ndw-background-primary-hover);
@@ -566,17 +607,17 @@
 }
 [ndwButton][secondary] {
   background-color: transparent;
-  border-color: var(--ndw-color-grey-200);
-  color: var(--ndw-color-grey-600);
+  border-color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-700);
 }
 [ndwButton][secondary]:hover {
-  background-color: var(--ndw-color-grey-300);
-  border-color: var(--ndw-color-grey-300);
+  background-color: var(--ndw-color-grey-500);
+  border-color: var(--ndw-color-grey-500);
   color: var(--ndw-color-white);
 }
 [ndwButton][secondary]:active {
-  background-color: var(--ndw-color-grey-400);
-  border-color: var(--ndw-color-grey-400);
+  background-color: var(--ndw-color-grey-700);
+  border-color: var(--ndw-color-grey-700);
   color: var(--ndw-color-white);
 }
 [ndwButton][large] {
@@ -584,9 +625,9 @@
   padding-inline: var(--ndw-spacing-sm);
 }
 [ndwButton][disabled] {
-  background-color: var(--ndw-color-grey-200);
-  border-color: var(--ndw-color-grey-200);
-  color: var(--ndw-color-grey-600);
+  background-color: var(--ndw-color-grey-300);
+  border-color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-700);
   pointer-events: none;
   user-select: none;
 }
@@ -610,8 +651,8 @@
 
 [ndwButton][filter] {
   background-color: var(--ndw-color-white);
-  border-color: var(--ndw-color-grey-200);
-  color: var(--ndw-color-grey-600);
+  border-color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-700);
   height: var(--ndw-spacing-2xl);
 }
 [ndwButton][filter] ndw-icon {
@@ -621,24 +662,25 @@
   border-color: var(--ndw-color-primary);
 }
 [ndwButton][filter]:active {
-  background-color: var(--ndw-color-primary-100);
+  background-color: var(--ndw-color-primary-050);
 }
 [ndwButton][filter][disabled] {
-  background-color: var(--ndw-color-grey-100);
-  color: var(--ndw-color-grey-400);
+  background-color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-500);
   pointer-events: none;
   user-select: none;
 }
 [ndwButton][filter][disabled] ndw-icon {
-  color: var(--ndw-color-grey-400);
+  color: var(--ndw-color-grey-500);
 }
 
 [ndwInput] {
   background-color: var(--ndw-color-white);
-  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-200);
+  border: var(--ndw-border-size-sm) solid var(--ndw-color-grey-300);
   border-radius: var(--ndw-border-radius-sm);
   box-sizing: border-box;
-  color: var(--ndw-color-grey-600);
+  color: var(--ndw-color-grey-700);
+  font-family: var(--ndw-font-family-body);
   font-size: var(--ndw-font-size-sm);
   height: var(--ndw-spacing-2xl);
   line-height: var(--ndw-line-height-md);
@@ -649,15 +691,15 @@
   transition: background-color 150ms ease-in-out, border-color 150ms ease-in-out, outline-color 150ms ease-in-out;
 }
 [ndwInput]:hover {
-  border-color: var(--ndw-color-grey-300);
+  border-color: var(--ndw-color-grey-400);
 }
 [ndwInput]:active, [ndwInput]:focus, [ndwInput]:focus-visible {
   border-color: transparent;
   box-shadow: var(--ndw-elevation-info);
-  outline-color: var(--ndw-color-info-500);
+  outline-color: var(--ndw-color-secondary-500);
 }
 [ndwInput]::placeholder {
-  color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-400);
 }
 [ndwInput][type=search]::-webkit-search-decoration, [ndwInput][type=search]::-webkit-search-cancel-button, [ndwInput][type=search]::-webkit-search-results-button, [ndwInput][type=search]::-webkit-search-results-decoration {
   display: none;
@@ -667,8 +709,8 @@
   opacity: 0;
 }
 [ndwInput][error] {
-  background-color: var(--ndw-color-negative-100);
-  border-color: var(--ndw-color-negative-500);
+  background-color: var(--ndw-color-critical-100);
+  border-color: var(--ndw-color-critical-500);
 }
 [ndwInput][error]:hover {
   border-color: var(--ndw-color-grey-300);
@@ -676,12 +718,12 @@
 [ndwInput][error]:active, [ndwInput][error]:focus, [ndwInput][error]:focus-visible {
   background-color: var(--ndw-color-white);
   border-color: transparent;
-  outline-color: var(--ndw-color-info-500);
+  outline-color: var(--ndw-color-secondary-500);
 }
 [ndwInput][disabled] {
   background-color: var(--ndw-color-grey-100);
-  border-color: var(--ndw-color-grey-200);
-  color: var(--ndw-color-grey-400);
+  border-color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-500);
   pointer-events: none;
 }
 [ndwInput].prefix-icon {
@@ -697,12 +739,16 @@ select[ndwInput] {
   white-space: nowrap;
   padding-right: var(--ndw-spacing-xl);
 }
-select[ndwInput]:not([ndw-changed]) {
-  color: var(--ndw-color-grey-300);
+select[ndwInput][ndw-placeholder],
+select[ndwInput] option[disabled] {
+  color: var(--ndw-color-grey-400);
+}
+select[ndwInput] option:not([disabled]) {
+  color: var(--ndw-color-grey-700);
 }
 
 textarea[ndwInput] {
-  min-height: 6.5rem;
+  min-height: 4rem;
   padding-top: calc(var(--ndw-spacing-xs) + var(--ndw-border-size-sm));
   resize: vertical;
 }
@@ -711,9 +757,9 @@ textarea[ndwInput] {
   align-content: center;
   align-items: center;
   display: grid;
-  font-family: var(--ndw-font-family);
+  font-family: var(--ndw-font-family-body);
   font-size: var(--ndw-font-size-sm);
-  font-weight: var(--ndw-font-weight-regular);
+  font-weight: var(--ndw-font-weight-bold);
   gap: var(--ndw-spacing-3xs);
   grid-template-columns: repeat(3, auto);
   height: 1.5rem;
@@ -721,16 +767,17 @@ textarea[ndwInput] {
   line-height: 100%;
 }
 [ndwLabel] ndw-icon {
-  color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-400);
+  font-size: var(--ndw-icon-size-md);
   margin-top: calc(var(--ndw-spacing-3xs) * -1);
 }
 [ndwLabel] .required {
-  color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-400);
 }
 
 a[ndwLink] {
   align-items: baseline;
-  color: var(--ndw-color-info-500);
+  color: var(--ndw-color-link-400);
   display: inline-flex;
   font-size: inherit;
   gap: var(--ndw-spacing-2xs);
@@ -741,11 +788,16 @@ a[ndwLink] {
 a[ndwLink] > * {
   align-self: center;
 }
+a[ndwLink] ndw-icon {
+  font-size: 1.25em;
+  overflow: hidden;
+}
 a[ndwLink]:hover {
-  text-decoration-color: var(--ndw-color-info-500);
+  color: var(--ndw-color-link-500);
+  text-decoration-color: var(--ndw-color-link-500);
 }
 a[ndwLink][disabled] {
-  color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-400);
   pointer-events: none;
   user-select: none;
 }
@@ -758,7 +810,7 @@ a[ndwLink][disabled] {
   background-color: transparent;
   border-color: transparent;
   border-radius: 0;
-  color: var(--ndw-color-grey-300);
+  color: var(--ndw-color-grey-400);
   gap: var(--ndw-spacing-xs);
   height: 2.625rem;
   padding-inline: 0;
@@ -766,8 +818,8 @@ a[ndwLink][disabled] {
   width: 100%;
 }
 [ndwButton][menu]:hover {
-  background-color: var(--ndw-color-grey-500);
-  border-color: var(--ndw-color-grey-500);
+  background-color: var(--ndw-color-grey-600);
+  border-color: var(--ndw-color-grey-600);
   color: var(--ndw-color-white);
 }
 [ndwButton][menu]:active {