@ndwnu/design-system 14.2.1 → 14.3.0

package/styles/base/_typography.scss

@@ -1,133 +1,133 @@
-/* Mixins */
-@mixin ndw-heading-xl {
-  font-family: var(--ndw-font-family-heading);
-  font-size: 2.5rem;
-  font-weight: var(--ndw-font-weight-bold);
-  line-height: 150%;
-}
-
-@mixin ndw-heading-lg {
-  font-family: var(--ndw-font-family-heading);
-  font-size: 2rem;
-  font-weight: var(--ndw-font-weight-bold);
-  line-height: 150%;
-}
-
-@mixin ndw-heading-md {
-  font-family: var(--ndw-font-family-heading);
-  font-size: 1.5rem;
-  font-weight: var(--ndw-font-weight-bold);
-  line-height: 150%;
-}
-
-@mixin ndw-heading-sm {
-  font-family: var(--ndw-font-family-heading);
-  font-size: 1.25rem;
-  font-weight: var(--ndw-font-weight-bold);
-  line-height: 150%;
-}
-
-@mixin ndw-paragraph-bold-xl {
-  font-family: var(--ndw-font-family-body);
-  font-size: 1.125rem;
-  font-weight: var(--ndw-font-weight-bold);
-  line-height: 150%;
-}
-
-@mixin ndw-paragraph-xl {
-  font-family: var(--ndw-font-family-body);
-  font-size: 1.125rem;
-  font-weight: var(--ndw-font-weight-regular);
-  line-height: 150%;
-}
-
-@mixin ndw-paragraph-bold-lg {
-  font-family: var(--ndw-font-family-body);
-  font-size: 1rem;
-  font-weight: var(--ndw-font-weight-bold);
-  line-height: 150%;
-}
-
-@mixin ndw-paragraph-lg {
-  font-family: var(--ndw-font-family-body);
-  font-size: 1rem;
-  font-weight: var(--ndw-font-weight-regular);
-  line-height: 150%;
-}
-
-@mixin ndw-paragraph-bold-md {
-  font-family: var(--ndw-font-family-body);
-  font-size: 0.8125rem;
-  font-weight: var(--ndw-font-weight-bold);
-  line-height: 150%;
-}
-
-@mixin ndw-paragraph-md {
-  font-family: var(--ndw-font-family-body);
-  font-size: 0.8125rem;
-  font-weight: var(--ndw-font-weight-regular);
-  line-height: 150%;
-}
-
-@mixin ndw-paragraph-bold-sm {
-  font-family: var(--ndw-font-family-body);
-  font-size: 0.6875rem;
-  font-weight: var(--ndw-font-weight-bold);
-  line-height: 150%;
-}
-
-@mixin ndw-paragraph-sm {
-  font-family: var(--ndw-font-family-body);
-  font-size: 0.6875rem;
-  font-weight: var(--ndw-font-weight-regular);
-  line-height: 150%;
-}
-
-/* Classes */
-.ndw-heading-xl {
-  @include ndw-heading-xl;
-}
-
-.ndw-heading-lg {
-  @include ndw-heading-lg;
-}
-
-.ndw-heading-md {
-  @include ndw-heading-md;
-}
-
-.ndw-heading-sm {
-  @include ndw-heading-sm;
-}
-
-.ndw-paragraph-bold-xl {
-  @include ndw-paragraph-bold-xl;
-}
-
-.ndw-paragraph-xl {
-  @include ndw-paragraph-xl;
-}
-
-.ndw-paragraph-bold-lg {
-  @include ndw-paragraph-bold-lg;
-}
-
-.ndw-paragraph-lg {
-  @include ndw-paragraph-lg;
-}
-
-.ndw-paragraph-bold-md {
-  @include ndw-paragraph-bold-md;
-}
-
-.ndw-paragraph-md {
-  @include ndw-paragraph-md;
-}
-
-.ndw-paragraph-bold-sm {
-  @include ndw-paragraph-bold-sm;
-}
-
-.ndw-paragraph-sm {
-  @include ndw-paragraph-sm;
-}
+/* Mixins */
+@mixin ndw-heading-xl {
+  font-family: var(--ndw-font-family-heading);
+  font-size: 2.5rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-heading-lg {
+  font-family: var(--ndw-font-family-heading);
+  font-size: 2rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-heading-md {
+  font-family: var(--ndw-font-family-heading);
+  font-size: 1.5rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-heading-sm {
+  font-family: var(--ndw-font-family-heading);
+  font-size: 1.25rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-bold-xl {
+  font-family: var(--ndw-font-family-body);
+  font-size: 1.125rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-xl {
+  font-family: var(--ndw-font-family-body);
+  font-size: 1.125rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-bold-lg {
+  font-family: var(--ndw-font-family-body);
+  font-size: 1rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-lg {
+  font-family: var(--ndw-font-family-body);
+  font-size: 1rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-bold-md {
+  font-family: var(--ndw-font-family-body);
+  font-size: 0.8125rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-md {
+  font-family: var(--ndw-font-family-body);
+  font-size: 0.8125rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-bold-sm {
+  font-family: var(--ndw-font-family-body);
+  font-size: 0.6875rem;
+  font-weight: var(--ndw-font-weight-bold);
+  line-height: 150%;
+}
+
+@mixin ndw-paragraph-sm {
+  font-family: var(--ndw-font-family-body);
+  font-size: 0.6875rem;
+  font-weight: var(--ndw-font-weight-regular);
+  line-height: 150%;
+}
+
+/* Classes */
+.ndw-heading-xl {
+  @include ndw-heading-xl;
+}
+
+.ndw-heading-lg {
+  @include ndw-heading-lg;
+}
+
+.ndw-heading-md {
+  @include ndw-heading-md;
+}
+
+.ndw-heading-sm {
+  @include ndw-heading-sm;
+}
+
+.ndw-paragraph-bold-xl {
+  @include ndw-paragraph-bold-xl;
+}
+
+.ndw-paragraph-xl {
+  @include ndw-paragraph-xl;
+}
+
+.ndw-paragraph-bold-lg {
+  @include ndw-paragraph-bold-lg;
+}
+
+.ndw-paragraph-lg {
+  @include ndw-paragraph-lg;
+}
+
+.ndw-paragraph-bold-md {
+  @include ndw-paragraph-bold-md;
+}
+
+.ndw-paragraph-md {
+  @include ndw-paragraph-md;
+}
+
+.ndw-paragraph-bold-sm {
+  @include ndw-paragraph-bold-sm;
+}
+
+.ndw-paragraph-sm {
+  @include ndw-paragraph-sm;
+}

package/styles/base/_variables.scss

@@ -1,92 +1,92 @@
-:root {
-  /* Spacing */
-  --ndw-spacing-3xs: 0.125rem;
-  --ndw-spacing-2xs: 0.25rem;
-  --ndw-spacing-xs: 0.5rem;
-  --ndw-spacing-sm: 0.75rem;
-  --ndw-spacing-md: 1rem;
-  --ndw-spacing-lg: 1.5rem;
-  --ndw-spacing-xl: 2rem;
-  --ndw-spacing-2xl: 2.5rem;
-  --ndw-spacing-3xl: 3rem;
-  --ndw-spacing-4xl: 5rem;
-  --ndw-spacing-5xl: 8rem;
-
-  /* Border */
-  --ndw-border-size-sm: 1px;
-  --ndw-border-size-md: 2px;
-  --ndw-border-size-lg: 3px;
-
-  /* Radius */
-  --ndw-border-radius-xs: 0.125rem;
-  --ndw-border-radius-sm: 0.25rem;
-  --ndw-border-radius-md: 0.5rem;
-  --ndw-border-radius-lg: 1.5rem;
-
-  /* Letter spacing */
-  --ndw-letter-spacing-sm: 0.1rem;
-  --ndw-letter-spacing-md: 0.2rem;
-  --ndw-letter-spacing-lg: 0.3rem;
-
-  /* Elevation */
-  --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
-  --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
-  --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
-  --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
-  --ndw-elevation-toast: 0 0.75rem 1.25rem hsla(var(--_grey-600), 0.125);
-  --ndw-backdrop-color: var(--ndw-alpha-black-040);
-
-  /* Animation */
-  --ndw-animation-speed-very-fast: 100ms;
-  --ndw-animation-speed-fast: 200ms;
-  --ndw-animation-speed-default: 300ms;
-  --ndw-animation-speed-slow: 500ms;
-
-  /* Icon Size */
-  --ndw-icon-size-md: 1rem;
-  --ndw-icon-size-lg: 1.5rem;
-
-  /* Mult-select Size */
-  --multi-select-default-width: 18.75rem;
-
-  /* Typography */
-  // Font Family
-  --ndw-font-family-body: 'Nunito Sans Variable', sans-serif;
-  --ndw-font-family-heading: 'DM Sans Variable', sans-serif;
-
-  // Font Size
-  --ndw-base-font-size: 16px;
-
-  --ndw-font-size-2xs: 0.5625rem;
-  --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;
-
-  // Font Weight
-  --ndw-font-weight-regular: 400;
-  --ndw-font-weight-bold: 650;
-
-  // Line Height
-  --ndw-line-height-sm: 1.375rem;
-  --ndw-line-height-md: 1.5rem;
-
-  /* Transform */
-  --ndw-rotate-half: rotate(180deg);
-
-  /* Modal */
-  --ndw-modal-width-sm: 31.25rem;
-  --ndw-modal-width-md: 45rem;
-
-  /* Navigation */
-  --main-navigation-collapse-width: 2.75rem;
-  --main-navigation-expanded-width: 12.5rem;
-  --main-navigation-mobile-header-height: 3.5rem;
-}
-
-/* Screen sizes */
-$ndw-screen-2xs: 480px;
-$ndw-screen-xs: 768px;
-$ndw-screen-sm: 1024px;
-$ndw-screen-md: 1440px;
+:root {
+  /* Spacing */
+  --ndw-spacing-3xs: 0.125rem;
+  --ndw-spacing-2xs: 0.25rem;
+  --ndw-spacing-xs: 0.5rem;
+  --ndw-spacing-sm: 0.75rem;
+  --ndw-spacing-md: 1rem;
+  --ndw-spacing-lg: 1.5rem;
+  --ndw-spacing-xl: 2rem;
+  --ndw-spacing-2xl: 2.5rem;
+  --ndw-spacing-3xl: 3rem;
+  --ndw-spacing-4xl: 5rem;
+  --ndw-spacing-5xl: 8rem;
+
+  /* Border */
+  --ndw-border-size-sm: 1px;
+  --ndw-border-size-md: 2px;
+  --ndw-border-size-lg: 3px;
+
+  /* Radius */
+  --ndw-border-radius-xs: 0.125rem;
+  --ndw-border-radius-sm: 0.25rem;
+  --ndw-border-radius-md: 0.5rem;
+  --ndw-border-radius-lg: 1.5rem;
+
+  /* Letter spacing */
+  --ndw-letter-spacing-sm: 0.1rem;
+  --ndw-letter-spacing-md: 0.2rem;
+  --ndw-letter-spacing-lg: 0.3rem;
+
+  /* Elevation */
+  --ndw-elevation-info: 0 0 0.5rem 0 hsla(var(--_link-500), 0.25);
+  --ndw-elevation-content: 0 0.125rem 0.125rem 0 hsla(var(--_grey-600), 0.05);
+  --ndw-elevation-dropdown: 0 0.25rem 1rem hsla(var(--_grey-600), 0.125);
+  --ndw-elevation-popover: 0 0.5rem 1.25rem hsla(var(--_grey-600), 0.125);
+  --ndw-elevation-toast: 0 0.75rem 1.25rem hsla(var(--_grey-600), 0.125);
+  --ndw-backdrop-color: var(--ndw-alpha-black-040);
+
+  /* Animation */
+  --ndw-animation-speed-very-fast: 100ms;
+  --ndw-animation-speed-fast: 200ms;
+  --ndw-animation-speed-default: 300ms;
+  --ndw-animation-speed-slow: 500ms;
+
+  /* Icon Size */
+  --ndw-icon-size-md: 1rem;
+  --ndw-icon-size-lg: 1.5rem;
+
+  /* Mult-select Size */
+  --multi-select-default-width: 18.75rem;
+
+  /* Typography */
+  // Font Family
+  --ndw-font-family-body: 'Nunito Sans Variable', sans-serif;
+  --ndw-font-family-heading: 'DM Sans Variable', sans-serif;
+
+  // Font Size
+  --ndw-base-font-size: 16px;
+
+  --ndw-font-size-2xs: 0.5625rem;
+  --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;
+
+  // Font Weight
+  --ndw-font-weight-regular: 400;
+  --ndw-font-weight-bold: 650;
+
+  // Line Height
+  --ndw-line-height-sm: 1.375rem;
+  --ndw-line-height-md: 1.5rem;
+
+  /* Transform */
+  --ndw-rotate-half: rotate(180deg);
+
+  /* Modal */
+  --ndw-modal-width-sm: 31.25rem;
+  --ndw-modal-width-md: 45rem;
+
+  /* Navigation */
+  --main-navigation-collapse-width: 2.75rem;
+  --main-navigation-expanded-width: 12.5rem;
+  --main-navigation-mobile-header-height: 3.5rem;
+}
+
+/* Screen sizes */
+$ndw-screen-2xs: 480px;
+$ndw-screen-xs: 768px;
+$ndw-screen-sm: 1024px;
+$ndw-screen-md: 1440px;

package/styles/base/colors.stories.model.ts

@@ -1,85 +1,85 @@
-import { ColorGroup } from '@ndwnu/core';
-
-export const PRIMARY: ColorGroup = {
-  name: 'Primary',
-  colors: [
-    { value: 50 },
-    { value: 100 },
-    { value: 200 },
-    { value: 300 },
-    { value: 400 },
-    { value: 500 },
-    { value: 600 },
-    { value: 700 },
-    { value: 800 },
-  ],
-};
-
-export const SECONDARY: ColorGroup = {
-  name: 'Secondary',
-  colors: [
-    { value: 50 },
-    { value: 100 },
-    { value: 200 },
-    { value: 300 },
-    { value: 400 },
-    { value: 500 },
-    { value: 600 },
-    { value: 700 },
-  ],
-};
-
-export const TERTIARY: ColorGroup = {
-  name: 'Tertiary',
-  colors: [{ value: 400 }, { value: 500 }],
-};
-
-export const GREY: ColorGroup = {
-  name: 'Grey',
-  colors: [
-    { value: undefined, altName: 'White' },
-    { value: 100 },
-    { value: 200 },
-    { value: 300 },
-    { value: 400 },
-    { value: 500 },
-    { value: 600 },
-    { value: 700 },
-  ],
-};
-
-export const LINK: ColorGroup = {
-  name: 'Link',
-  colors: [{ value: 400 }, { value: 500 }],
-};
-
-export const NOTIFICATIONS: ColorGroup = {
-  name: 'Notifications',
-  colors: [
-    { value: 100, altName: 'Positive' },
-    { value: 200, altName: 'Positive' },
-    { value: 300, altName: 'Positive' },
-    { value: 500, altName: 'Positive' },
-    { value: 600, altName: 'Positive' },
-    { value: 100, altName: 'Warning' },
-    { value: 200, altName: 'Warning' },
-    { value: 300, altName: 'Warning' },
-    { value: 500, altName: 'Warning' },
-    { value: 600, altName: 'Warning' },
-    { value: 100, altName: 'Critical' },
-    { value: 200, altName: 'Critical' },
-    { value: 300, altName: 'Critical' },
-    { value: 500, altName: 'Critical' },
-    { value: 100, altName: 'Info' },
-    { value: 200, altName: 'Info' },
-    { value: 300, altName: 'Info' },
-    { value: 500, altName: 'Info' },
-    { value: 100, altName: 'Alternative' },
-    { value: 500, altName: 'Alternative' },
-  ],
-};
-
-export const ALPHAS: ColorGroup = {
-  name: 'Alphas',
-  alphas: ['Black-007', 'Black-015', 'Black-040', 'Primary-007', 'Primary-015'],
-};
+import { ColorGroup } from '@ndwnu/core';
+
+export const PRIMARY: ColorGroup = {
+  name: 'Primary',
+  colors: [
+    { value: 50 },
+    { value: 100 },
+    { value: 200 },
+    { value: 300 },
+    { value: 400 },
+    { value: 500 },
+    { value: 600 },
+    { value: 700 },
+    { value: 800 },
+  ],
+};
+
+export const SECONDARY: ColorGroup = {
+  name: 'Secondary',
+  colors: [
+    { value: 50 },
+    { value: 100 },
+    { value: 200 },
+    { value: 300 },
+    { value: 400 },
+    { value: 500 },
+    { value: 600 },
+    { value: 700 },
+  ],
+};
+
+export const TERTIARY: ColorGroup = {
+  name: 'Tertiary',
+  colors: [{ value: 400 }, { value: 500 }],
+};
+
+export const GREY: ColorGroup = {
+  name: 'Grey',
+  colors: [
+    { value: undefined, altName: 'White' },
+    { value: 100 },
+    { value: 200 },
+    { value: 300 },
+    { value: 400 },
+    { value: 500 },
+    { value: 600 },
+    { value: 700 },
+  ],
+};
+
+export const LINK: ColorGroup = {
+  name: 'Link',
+  colors: [{ value: 400 }, { value: 500 }],
+};
+
+export const NOTIFICATIONS: ColorGroup = {
+  name: 'Notifications',
+  colors: [
+    { value: 100, altName: 'Positive' },
+    { value: 200, altName: 'Positive' },
+    { value: 300, altName: 'Positive' },
+    { value: 500, altName: 'Positive' },
+    { value: 600, altName: 'Positive' },
+    { value: 100, altName: 'Warning' },
+    { value: 200, altName: 'Warning' },
+    { value: 300, altName: 'Warning' },
+    { value: 500, altName: 'Warning' },
+    { value: 600, altName: 'Warning' },
+    { value: 100, altName: 'Critical' },
+    { value: 200, altName: 'Critical' },
+    { value: 300, altName: 'Critical' },
+    { value: 500, altName: 'Critical' },
+    { value: 100, altName: 'Info' },
+    { value: 200, altName: 'Info' },
+    { value: 300, altName: 'Info' },
+    { value: 500, altName: 'Info' },
+    { value: 100, altName: 'Alternative' },
+    { value: 500, altName: 'Alternative' },
+  ],
+};
+
+export const ALPHAS: ColorGroup = {
+  name: 'Alphas',
+  alphas: ['Black-007', 'Black-015', 'Black-040', 'Primary-007', 'Primary-015'],
+};

package/styles/base/colors.stories.ts

@@ -1,24 +1,24 @@
-import { template } from '@ndwnu/core';
-import { type Meta, type StoryObj } from '@storybook/angular';
-
-import {
-  ALPHAS,
-  GREY,
-  LINK,
-  NOTIFICATIONS,
-  PRIMARY,
-  SECONDARY,
-  TERTIARY,
-} from './colors.stories.model';
-
-const meta: Meta = {
-  title: 'Core/Colors',
-  render: () => ({
-    template: template([PRIMARY, SECONDARY, TERTIARY, GREY, LINK, NOTIFICATIONS, ALPHAS]),
-  }),
-} as Meta;
-
-export default meta;
-type Story = StoryObj;
-
-export const Colors: Story = {};
+import { template } from '@ndwnu/core';
+import { type Meta, type StoryObj } from '@storybook/angular';
+
+import {
+  ALPHAS,
+  GREY,
+  LINK,
+  NOTIFICATIONS,
+  PRIMARY,
+  SECONDARY,
+  TERTIARY,
+} from './colors.stories.model';
+
+const meta: Meta = {
+  title: 'Core/Colors',
+  render: () => ({
+    template: template([PRIMARY, SECONDARY, TERTIARY, GREY, LINK, NOTIFICATIONS, ALPHAS]),
+  }),
+} as Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Colors: Story = {};

package/styles/base/index.scss

@@ -1,5 +1,5 @@
-@forward 'colors';
-@forward 'fonts';
-@forward 'material';
-@forward 'typography';
-@forward 'variables';
+@forward 'colors';
+@forward 'fonts';
+@forward 'material';
+@forward 'typography';
+@forward 'variables';