@acontplus/ng-components 2.1.30 → 2.1.32

package/src/core/theming/prebuilt/aqua.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-aqua {
+  --theme-primary-color: #0074ba;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-aqua-palette,
+        tertiary: palettes.$custom-aqua-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/blue.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-blue {
+  --theme-primary-color: #1b84ff;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-blue-palette,
+        tertiary: palettes.$custom-blue-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/cyan.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-cyan {
+  --theme-primary-color: #01c0c8;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-cyan-palette,
+        tertiary: palettes.$custom-cyan-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/green.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-green {
+  --theme-primary-color: #0a7ea4;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-green-palette,
+        tertiary: palettes.$custom-green-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/orange.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-orange {
+  --theme-primary-color: #fa896b;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-orange-palette,
+        tertiary: palettes.$custom-orange-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/pink.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-pink {
+  --theme-primary-color: #d200d2;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$magenta-palette,
+        tertiary: palettes.$magenta-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/purple.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-purple {
+  --theme-primary-color: #763ebd;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$custom-purple-palette,
+        tertiary: palettes.$custom-purple-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/theming/prebuilt/rose.scss

@@ -0,0 +1,21 @@
+@use '@angular/material' as mat;
+@use '../../../core/tokens/system' as system;
+@use '../../../core/theming/palettes' as palettes;
+@use '../../../core/theming/all-theme' as all-theme;
+
+.theme-rose {
+  --theme-primary-color: #e80074;
+
+  @include system.theme(
+    (
+      color: (
+        primary: palettes.$rose-palette,
+        tertiary: palettes.$rose-palette,
+      ),
+      typography: Roboto,
+      density: 0,
+    )
+  );
+
+  @include all-theme.custom-component-overrides;
+}

package/src/core/tokens/_m3-tokens.scss

@@ -0,0 +1,141 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use './m3';
+
+/// Generates a set of namespaced tokens for all components.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $include-non-systemized Whether to include non-systemized tokens
+/// @param {Boolean} $include-density Whether to include density tokens
+/// @return {Map} A map of namespaced tokens
+@function generate-tokens($systems, $include-non-systemized: false, $include-density: false) {
+  $systems: map.merge(
+    (
+      md-sys-color: (),
+      md-sys-elevation: (),
+      md-sys-motion: (),
+      md-sys-shape: (),
+      md-sys-state: (),
+      md-sys-typescale: (),
+    ),
+    $systems
+  );
+  $exclude-hardcoded: not $include-non-systemized;
+
+  // TODO(mmalerba): Fill in remaining tokens.
+  $result: mat.private-deep-merge-all(
+    // Add the system color & typography tokens (so we can give users access via an API).
+    (
+        (mat, theme): map.get($systems, md-sys-color),
+        (mat, typography): map.get($systems, md-sys-typescale),
+      )
+  );
+
+  @return $result;
+}
+
+@function create-map($keys, $prefix) {
+  $result: ();
+  @each $key in $keys {
+    $result: map.merge(
+      $result,
+      (
+        $key: var(--#{$prefix}-#{$key}),
+      )
+    );
+  }
+  @return $result;
+}
+
+@function get-sys-color($type, $palettes, $prefix) {
+  $sys-color: null;
+
+  @if ($type == dark) {
+    $sys-color: m3.md-sys-color-values-dark($palettes);
+  } @else {
+    $sys-color: m3.md-sys-color-values-light($palettes);
+  }
+
+  @if (mat.$private-use-system-color-variables) {
+    $var-values: ();
+    @each $key in map.keys($sys-color) {
+      $var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key}));
+    }
+    $var-values: map.set($var-values, shadow, map.get($sys-color, shadow));
+    @return $var-values;
+  }
+
+  @return $sys-color;
+}
+
+@function get-sys-typeface($typography, $prefix) {
+  $sys-typography: m3.md-sys-typescale-values($typography);
+  @if (mat.$private-use-system-typography-variables) {
+    $var-values: ();
+    @each $key in map.keys($sys-typography) {
+      $var-values: map.set($var-values, $key, var(--#{$prefix}-#{$key}));
+    }
+    @return $var-values;
+  }
+
+  @return $sys-typography;
+}
+
+/// Generates a set of namespaced color tokens for all components.
+/// @param {String} $type The type of theme system (light or dark)
+/// @param {Map} $primary The primary palette
+/// @param {Map} $tertiary The tertiary palette
+/// @param {Map} $error The error palette
+/// @param {String} $system-variables-prefix The prefix of system tokens
+/// @return {Map} A map of namespaced color tokens
+@function generate-color-tokens($type, $palettes, $system-variables-prefix) {
+  $sys-color: get-sys-color($type, $palettes, $system-variables-prefix);
+
+  @return generate-tokens(
+    (
+      md-sys-color: $sys-color,
+      md-ref-palette: (
+        neutral-10: map.get($palettes, neutral, 10),
+        neutral-variant20: map.get($palettes, neutral-variant, 20),
+      ),
+      // Because the elevation values are always combined with color values to create the box shadow,
+      // elevation needs to be part of the color dimension.
+      md-sys-elevation: m3.md-sys-elevation-values(),
+      // Because the state values are sometimes combined with color values to create rgba colors,
+      // state needs to be part of color dimension.
+      // TODO(mmalerba): If at some point we remove the need for these combined values, we can move
+      //  state to the base dimension.
+      md-sys-state: m3.md-sys-state-values(),
+    )
+  );
+}
+
+/// Generates a set of namespaced color tokens for all components.
+/// @param {String|List} $brand The brand font-family
+/// @param {String|List} $plain The plain fort-family
+/// @param {String|Number} $bold The bold font-weight
+/// @param {String|Number} $medium The medium font-weight
+/// @param {String|Number} $regular The regular font-weight
+/// @param {String} $system-variables-prefix The prefix of system tokens
+/// @return {Map} A map of namespaced typography tokens
+@function generate-typography-tokens($typography, $system-variables-prefix) {
+  $sys-typeface: get-sys-typeface($typography, $system-variables-prefix);
+  @return generate-tokens(
+    (
+      md-sys-typescale: $sys-typeface,
+    )
+  );
+}
+
+/// Generates a set of namespaced tokens not related to color, typography, or density for all
+/// components.
+/// @return {Map} A map of namespaced tokens not related to color, typography, or density
+@function generate-base-tokens() {
+  // TODO(mmalerba): Exclude density tokens once implemented.
+  @return generate-tokens(
+    (
+      md-sys-motion: m3.md-sys-motion-values(),
+      md-sys-shape: m3.md-sys-shape-values(),
+    ),
+    $include-non-systemized: true
+  );
+}

package/src/core/tokens/_m3-utils.scss

@@ -0,0 +1,36 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+
+// Replaces color tokens in the map with those defined as the variant color.
+@function replace-colors-with-variant($system, $color, $variant) {
+  $system: map.set($system, on-#{$color}, map.get($system, on-#{$variant}));
+  $system: map.set($system, on-#{$color}-container, map.get($system, on-#{$variant}-container));
+  $system: map.set($system, #{$color}, map.get($system, #{$variant}));
+  $system: map.set($system, #{$color}-container, map.get($system, #{$variant}-container));
+  $system: map.set($system, inverse-#{$color}, map.get($system, inverse-#{$variant}));
+  @return $system;
+}
+
+// Gets the theme's system values as a flat map.
+@function get-system($theme) {
+  @return map.get($theme, _mat-system);
+}
+
+// Returns the color with an opacity value using color-mix. If the color is a variable name, it
+// will wrap it with `var()`.
+@function color-with-opacity($color, $opacity) {
+  @if (meta.type-of($color) == string and string.index($color, '--') == 1) {
+    $color: var($color);
+  }
+
+  // Opacity may be a system level value less than 1, instead of the intended
+  // whole percentage, e.g. 38%. Remove this support when possible.
+  @if (meta.type-of($opacity) == string and string.index($opacity, '--') == 1) {
+    $opacity: 'calc(var(#{$opacity}) * 100%)';
+  } @else if (meta.type-of($opacity) == number and $opacity < 1) {
+    $opacity: '#{$opacity * 100}%';
+  }
+
+  @return color-mix(in srgb, #{$color} #{$opacity}, transparent);
+}