@acontplus/ng-components 2.1.29 → 2.1.31

package/src/core/tokens/m3/_md-sys-color.scss

@@ -0,0 +1,150 @@
+@use 'sass:map';
+
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
+@function md-sys-color-values-dark($palettes: ()) {
+  $values: (
+    background: map.get($palettes, neutral, 6),
+    error: map.get($palettes, error, 80),
+    error-container: map.get($palettes, error, 30),
+    inverse-on-surface: map.get($palettes, neutral, 20),
+    inverse-primary: map.get($palettes, primary, 40),
+    inverse-surface: map.get($palettes, neutral, 90),
+    on-background: map.get($palettes, neutral, 90),
+    on-error: map.get($palettes, error, 20),
+    on-error-container: map.get($palettes, error, 90),
+    on-primary: map.get($palettes, primary, 20),
+    on-primary-container: map.get($palettes, primary, 90),
+    on-primary-fixed: map.get($palettes, primary, 10),
+    on-primary-fixed-variant: map.get($palettes, primary, 30),
+    on-secondary: map.get($palettes, secondary, 20),
+    on-secondary-container: map.get($palettes, secondary, 90),
+    on-secondary-fixed: map.get($palettes, secondary, 10),
+    on-secondary-fixed-variant: map.get($palettes, secondary, 30),
+    on-surface: map.get($palettes, neutral, 90),
+    on-surface-variant: map.get($palettes, neutral-variant, 90),
+    on-tertiary: map.get($palettes, tertiary, 20),
+    on-tertiary-container: map.get($palettes, tertiary, 90),
+    on-tertiary-fixed: map.get($palettes, tertiary, 10),
+    on-tertiary-fixed-variant: map.get($palettes, tertiary, 30),
+    outline: map.get($palettes, neutral-variant, 60),
+    outline-variant: map.get($palettes, neutral-variant, 30),
+    primary: map.get($palettes, primary, 80),
+    primary-container: map.get($palettes, primary, 30),
+    primary-fixed: map.get($palettes, primary, 90),
+    primary-fixed-dim: map.get($palettes, primary, 80),
+    scrim: map.get($palettes, neutral, 0),
+    secondary: map.get($palettes, secondary, 80),
+    secondary-container: map.get($palettes, secondary, 30),
+    secondary-fixed: map.get($palettes, secondary, 90),
+    secondary-fixed-dim: map.get($palettes, secondary, 80),
+    shadow: map.get($palettes, neutral, 0),
+    surface: map.get($palettes, neutral, 6),
+    surface-bright: map.get($palettes, neutral, 24),
+    surface-container: map.get($palettes, neutral, 12),
+    surface-container-high: map.get($palettes, neutral, 17),
+    surface-container-highest: map.get($palettes, neutral, 22),
+    surface-container-low: map.get($palettes, neutral, 10),
+    surface-container-lowest: map.get($palettes, neutral, 4),
+    surface-dim: map.get($palettes, neutral, 6),
+    surface-tint: map.get($palettes, primary, 80),
+    surface-variant: map.get($palettes, neutral-variant, 30),
+    tertiary: map.get($palettes, tertiary, 80),
+    tertiary-container: map.get($palettes, tertiary, 30),
+    tertiary-fixed: map.get($palettes, tertiary, 90),
+    tertiary-fixed-dim: map.get($palettes, tertiary, 80),
+  );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge(
+      $values,
+      (
+        on-surface-variant: map.get($palettes, neutral-variant, 80),
+        surface-bright: #37393b,
+        surface-container: #1e1f20,
+        surface-container-high: #282a2c,
+        surface-container-highest: #333537,
+        surface-container-low: #1b1b1b,
+        surface-container-lowest: #0e0e0e,
+        surface-dim: #131313,
+        surface-tint: #d1e1ff,
+      )
+    );
+  }
+
+  @return $values;
+}
+
+@function md-sys-color-values-light($palettes: ()) {
+  $values: (
+    background: map.get($palettes, neutral, 98),
+    error: map.get($palettes, error, 40),
+    error-container: map.get($palettes, error, 90),
+    inverse-on-surface: map.get($palettes, neutral, 95),
+    inverse-primary: map.get($palettes, primary, 80),
+    inverse-surface: map.get($palettes, neutral, 20),
+    on-background: map.get($palettes, neutral, 10),
+    on-error: map.get($palettes, error, 100),
+    on-error-container: map.get($palettes, error, 30),
+    on-primary: map.get($palettes, primary, 100),
+    on-primary-container: map.get($palettes, primary, 30),
+    on-primary-fixed: map.get($palettes, primary, 10),
+    on-primary-fixed-variant: map.get($palettes, primary, 30),
+    on-secondary: map.get($palettes, secondary, 100),
+    on-secondary-container: map.get($palettes, secondary, 30),
+    on-secondary-fixed: map.get($palettes, secondary, 10),
+    on-secondary-fixed-variant: map.get($palettes, secondary, 30),
+    on-surface: map.get($palettes, neutral, 10),
+    on-surface-variant: map.get($palettes, neutral-variant, 30),
+    on-tertiary: map.get($palettes, tertiary, 100),
+    on-tertiary-container: map.get($palettes, tertiary, 30),
+    on-tertiary-fixed: map.get($palettes, tertiary, 10),
+    on-tertiary-fixed-variant: map.get($palettes, tertiary, 30),
+    outline: map.get($palettes, neutral-variant, 50),
+    outline-variant: map.get($palettes, neutral-variant, 80),
+    primary: map.get($palettes, primary, 40),
+    primary-container: map.get($palettes, primary, 90),
+    primary-fixed: map.get($palettes, primary, 90),
+    primary-fixed-dim: map.get($palettes, primary, 80),
+    scrim: map.get($palettes, neutral, 0),
+    secondary: map.get($palettes, secondary, 40),
+    secondary-container: map.get($palettes, secondary, 90),
+    secondary-fixed: map.get($palettes, secondary, 90),
+    secondary-fixed-dim: map.get($palettes, secondary, 80),
+    shadow: map.get($palettes, neutral, 0),
+    surface: map.get($palettes, neutral, 98),
+    surface-bright: map.get($palettes, neutral, 98),
+    surface-container: map.get($palettes, neutral, 94),
+    surface-container-high: map.get($palettes, neutral, 92),
+    surface-container-highest: map.get($palettes, neutral, 90),
+    surface-container-low: map.get($palettes, neutral, 96),
+    surface-container-lowest: map.get($palettes, neutral, 100),
+    surface-dim: map.get($palettes, neutral, 87),
+    surface-tint: map.get($palettes, primary, 40),
+    surface-variant: map.get($palettes, neutral-variant, 90),
+    tertiary: map.get($palettes, tertiary, 40),
+    tertiary-container: map.get($palettes, tertiary, 90),
+    tertiary-fixed: map.get($palettes, tertiary, 90),
+    tertiary-fixed-dim: map.get($palettes, tertiary, 80),
+  );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge(
+      $values,
+      (
+        background: map.get($palettes, neutral, 100),
+        surface: map.get($palettes, neutral, 100),
+        surface-bright: map.get($palettes, neutral, 100),
+        surface-container: #f0f4f9,
+        surface-container-high: #e9eef6,
+        surface-container-highest: #dde3ea,
+        surface-container-low: #f8fafd,
+        surface-dim: #d3dbe5,
+        surface-tint: #6991d6,
+      )
+    );
+  }
+
+  @return $values;
+}

package/src/core/tokens/m3/_md-sys-elevation.scss

@@ -0,0 +1,8 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-elevation-values() {
+  @return (level0: 0, level1: 1, level2: 3, level3: 6, level4: 8, level5: 12);
+}

package/src/core/tokens/m3/_md-sys-motion.scss

@@ -0,0 +1,35 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-motion-values() {
+  @return (
+    duration-extra-long1: 700ms,
+    duration-extra-long2: 800ms,
+    duration-extra-long3: 900ms,
+    duration-extra-long4: 1000ms,
+    duration-long1: 450ms,
+    duration-long2: 500ms,
+    duration-long3: 550ms,
+    duration-long4: 600ms,
+    duration-medium1: 250ms,
+    duration-medium2: 300ms,
+    duration-medium3: 350ms,
+    duration-medium4: 400ms,
+    duration-short1: 50ms,
+    duration-short2: 100ms,
+    duration-short3: 150ms,
+    duration-short4: 200ms,
+    easing-emphasized: cubic-bezier(0.2, 0, 0, 1),
+    easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15),
+    easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1),
+    easing-legacy: cubic-bezier(0.4, 0, 0.2, 1),
+    easing-legacy-accelerate: cubic-bezier(0.4, 0, 1, 1),
+    easing-legacy-decelerate: cubic-bezier(0, 0, 0.2, 1),
+    easing-linear: cubic-bezier(0, 0, 1, 1),
+    easing-standard: cubic-bezier(0.2, 0, 0, 1),
+    easing-standard-accelerate: cubic-bezier(0.3, 0, 1, 1),
+    easing-standard-decelerate: cubic-bezier(0, 0, 0, 1)
+  );
+}

package/src/core/tokens/m3/_md-sys-shape.scss

@@ -0,0 +1,31 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-shape-values() {
+  @return (
+    corner-extra-large: 28px,
+    corner-extra-large-top: (
+      28px 28px 0 0,
+    ),
+    corner-extra-small: 4px,
+    corner-extra-small-top: (
+      4px 4px 0 0,
+    ),
+    corner-full: 9999px,
+    corner-large: 16px,
+    corner-large-end: (
+      0 16px 16px 0,
+    ),
+    corner-large-start: (
+      16px 0 0 16px,
+    ),
+    corner-large-top: (
+      16px 16px 0 0,
+    ),
+    corner-medium: 12px,
+    corner-none: 0,
+    corner-small: 8px
+  );
+}

package/src/core/tokens/m3/_md-sys-state.scss

@@ -0,0 +1,13 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-state-values($exclude-hardcoded-values: false) {
+  @return (
+    dragged-state-layer-opacity: 0.16,
+    focus-state-layer-opacity: 0.12,
+    hover-state-layer-opacity: 0.08,
+    pressed-state-layer-opacity: 0.12
+  );
+}

package/src/core/tokens/m3/_md-sys-typescale.scss

@@ -0,0 +1,131 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@use 'sass:map';
+
+// Indicates whether alternative tokens should be used
+$_alternate-tokens: false;
+
+@function md-sys-typescale-values($typography: ()) {
+  $plain: map.get($typography, plain);
+  $brand: map.get($typography, brand);
+  $bold: map.get($typography, bold);
+  $medium: map.get($typography, medium);
+  $regular: map.get($typography, regular);
+
+  $values: (
+    body-large: $regular 1rem #{'/'} 1.5rem $plain,
+    body-large-font: $plain,
+    body-large-line-height: 1.5rem,
+    body-large-size: 1rem,
+    body-large-tracking: 0.031rem,
+    body-large-weight: $regular,
+    body-medium: $regular 0.875rem #{'/'} 1.25rem $plain,
+    body-medium-font: $plain,
+    body-medium-line-height: 1.25rem,
+    body-medium-size: 0.875rem,
+    body-medium-tracking: 0.016rem,
+    body-medium-weight: $regular,
+    body-small: $regular 0.75rem #{'/'} 1rem $plain,
+    body-small-font: $plain,
+    body-small-line-height: 1rem,
+    body-small-size: 0.75rem,
+    body-small-tracking: 0.025rem,
+    body-small-weight: $regular,
+    display-large: $regular 3.562rem #{'/'} 4rem $brand,
+    display-large-font: $brand,
+    display-large-line-height: 4rem,
+    display-large-size: 3.562rem,
+    display-large-tracking: -0.016rem,
+    display-large-weight: $regular,
+    display-medium: $regular 2.812rem #{'/'} 3.25rem $brand,
+    display-medium-font: $brand,
+    display-medium-line-height: 3.25rem,
+    display-medium-size: 2.812rem,
+    display-medium-tracking: 0,
+    display-medium-weight: $regular,
+    display-small: $regular 2.25rem #{'/'} 2.75rem $brand,
+    display-small-font: $brand,
+    display-small-line-height: 2.75rem,
+    display-small-size: 2.25rem,
+    display-small-tracking: 0,
+    display-small-weight: $regular,
+    headline-large: $regular 2rem #{'/'} 2.5rem $brand,
+    headline-large-font: $brand,
+    headline-large-line-height: 2.5rem,
+    headline-large-size: 2rem,
+    headline-large-tracking: 0,
+    headline-large-weight: $regular,
+    headline-medium: $regular 1.75rem #{'/'} 2.25rem $brand,
+    headline-medium-font: $brand,
+    headline-medium-line-height: 2.25rem,
+    headline-medium-size: 1.75rem,
+    headline-medium-tracking: 0,
+    headline-medium-weight: $regular,
+    headline-small: $regular 1.5rem #{'/'} 2rem $brand,
+    headline-small-font: $brand,
+    headline-small-line-height: 2rem,
+    headline-small-size: 1.5rem,
+    headline-small-tracking: 0,
+    headline-small-weight: $regular,
+    label-large: $medium 0.875rem #{'/'} 1.25rem $plain,
+    label-large-font: $plain,
+    label-large-line-height: 1.25rem,
+    label-large-size: 0.875rem,
+    label-large-tracking: 0.006rem,
+    label-large-weight: $medium,
+    label-large-weight-prominent: $bold,
+    label-medium: $medium 0.75rem #{'/'} 1rem $plain,
+    label-medium-font: $plain,
+    label-medium-line-height: 1rem,
+    label-medium-size: 0.75rem,
+    label-medium-tracking: 0.031rem,
+    label-medium-weight: $medium,
+    label-medium-weight-prominent: $bold,
+    label-small: $medium 0.688rem #{'/'} 1rem $plain,
+    label-small-font: $plain,
+    label-small-line-height: 1rem,
+    label-small-size: 0.688rem,
+    label-small-tracking: 0.031rem,
+    label-small-weight: $medium,
+    title-large: $regular 1.375rem #{'/'} 1.75rem $brand,
+    title-large-font: $brand,
+    title-large-line-height: 1.75rem,
+    title-large-size: 1.375rem,
+    title-large-tracking: 0,
+    title-large-weight: $regular,
+    title-medium: $medium 1rem #{'/'} 1.5rem $plain,
+    title-medium-font: $plain,
+    title-medium-line-height: 1.5rem,
+    title-medium-size: 1rem,
+    title-medium-tracking: 0.009rem,
+    title-medium-weight: $medium,
+    title-small: $medium 0.875rem #{'/'} 1.25rem $plain,
+    title-small-font: $plain,
+    title-small-line-height: 1.25rem,
+    title-small-size: 0.875rem,
+    title-small-tracking: 0.006rem,
+    title-small-weight: $medium,
+  );
+
+  @if ($_alternate-tokens) {
+    $values: map.merge(
+      $values,
+      (
+        body-large-tracking: 0,
+        body-medium-tracking: 0,
+        body-small-tracking: 0.006rem,
+        display-large-tracking: 0,
+        label-large-tracking: 0,
+        label-medium-tracking: 0.006rem,
+        label-small-tracking: 0.006rem,
+        title-medium-tracking: 0,
+        title-small-tracking: 0,
+      )
+    );
+  }
+
+  @return $values;
+}

package/src/core/tokens/m3/_theme.scss

@@ -0,0 +1,41 @@
+@use './md-sys-color';
+@use './md-sys-elevation';
+@use './md-sys-shape';
+@use './md-sys-state';
+@use './md-sys-typescale';
+@use 'sass:map';
+
+// Return a new map where the values are the same as the provided map's
+// keys, prefixed with "--mat-sys-". For example:
+// (key1: '', key2: '') --> (key1: --mat-sys-key1, key2: --mat-sys-key2)
+@function _create-system-app-vars-map($map) {
+  $new-map: ();
+  @each $key, $value in $map {
+    $new-map: map.set($new-map, $key, --mat-sys-#{$key});
+  }
+  @return $new-map;
+}
+
+$_sys-maps: (
+  md-sys-color.md-sys-color-values-light(),
+  md-sys-typescale.md-sys-typescale-values(),
+  md-sys-elevation.md-sys-elevation-values(),
+  md-sys-state.md-sys-state-values(),
+  md-sys-shape.md-sys-shape-values(),
+  (
+    neutral10: '',
+    // Form field native select option text color
+    neutral-variant20: '',
+    // Sidenav scrim (container background shadow when opened),
+  )
+);
+
+$_system: (
+  density-scale: 0,
+);
+@each $sys-map in $_sys-maps {
+  $_system: map.merge($_system, _create-system-app-vars-map($sys-map));
+}
+$sys-theme: (
+  _mat-system: $_system,
+);

package/src/core/typography/_all-typography.scss

@@ -0,0 +1,34 @@
+@use '@angular/material' as mat;
+@use '../../../lib/components/alert/alert-theme';
+// @use '../../button/button-theme';
+// @use '../../colorpicker/colorpicker-theme';
+// @use '../../datetimepicker/datetimepicker-theme';
+@use '../../../lib/components/drawer/drawer-theme';
+@use '../../../lib/components/grid/grid-theme';
+// @use '../../loader/loader-theme';
+@use '../../../lib/components/popover/popover-theme';
+// @use '../../progress/progress-theme';
+// @use '../../select/select-theme';
+// @use '../../split/split-theme';
+// @use '../../tooltip/tooltip-theme';
+
+// Includes all of the typographic styles.
+@mixin all-component-typographies($theme: null) {
+  @include alert-theme.typography($theme);
+  // @include button-theme.typography($theme);
+  // @include colorpicker-theme.typography($theme);
+  // @include datetimepicker-theme.typography($theme);
+  @include drawer-theme.typography($theme);
+  @include grid-theme.typography($theme);
+  // @include loader-theme.typography($theme);
+  @include popover-theme.typography($theme);
+  // @include progress-theme.typography($theme);
+  // @include select-theme.typography($theme);
+  // @include split-theme.typography($theme);
+  // @include tooltip-theme.typography($theme);
+}
+
+// @deprecated Use `all-component-typographies`.
+@mixin material-extensions-typography($theme: null) {
+  @include all-component-typographies($theme);
+}

package/src/lib/components/alert/_alert-theme.scss

@@ -0,0 +1,57 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../core/tokens/token-utils';
+@use './m3-alert';
+
+@mixin base($theme) {
+  $tokens: map.get(m3-alert.get-tokens($theme), base);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin color($theme) {
+  $tokens: map.get(m3-alert.get-tokens($theme), color);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin typography($theme) {
+  $tokens: map.get(m3-alert.get-tokens($theme), typography);
+
+  @include token-utils.values($tokens);
+}
+
+@mixin density($theme) {
+  $tokens: map.get(m3-alert.get-tokens($theme), density);
+
+  @include token-utils.values($tokens);
+}
+
+/// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
+@function _define-overrides() {
+  @return ((namespace: alert, tokens: token-utils.get-overrides(m3-alert.get-tokens(), alert)));
+}
+
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
+}
+
+@mixin theme($theme, $color-variant: null) {
+  @if mat.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if mat.theme-has($theme, color) {
+      @include color($theme);
+    }
+    @if mat.theme-has($theme, density) {
+      @include density($theme);
+    }
+    @if mat.theme-has($theme, typography) {
+      @include typography($theme);
+    }
+  }
+}

package/src/lib/components/alert/_m3-alert.scss

@@ -0,0 +1,72 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+@use '../../../core/tokens/m3-utils';
+@use '../../../core/tokens/m3';
+
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+  $is-dark: map.get($system, md-sys-type) == dark;
+
+  $tokens: (
+    base: (
+      alert-container-shape: map.get($system, corner-small),
+    ),
+    color: (
+      alert-outline-color: map.get($system, outline-variant),
+      alert-background-color: map.get($system, surface-container),
+      alert-text-color: map.get($system, on-surface),
+      alert-info-outline-color: light-dark(
+          map.get(mat.$azure-palette, 80),
+          map.get(mat.$azure-palette, 40)
+        ),
+      alert-info-background-color: light-dark(
+          map.get(mat.$azure-palette, 90),
+          map.get(mat.$azure-palette, 20)
+        ),
+      alert-info-text-color: light-dark(
+          map.get(mat.$azure-palette, 20),
+          map.get(mat.$azure-palette, 90)
+        ),
+      alert-success-outline-color: light-dark(
+          map.get(mat.$green-palette, 80),
+          map.get(mat.$green-palette, 40)
+        ),
+      alert-success-background-color: light-dark(
+          map.get(mat.$green-palette, 95),
+          map.get(mat.$green-palette, 20)
+        ),
+      alert-success-text-color: light-dark(
+          map.get(mat.$green-palette, 20),
+          map.get(mat.$green-palette, 95)
+        ),
+      alert-warning-outline-color: light-dark(
+          map.get(mat.$yellow-palette, 80),
+          map.get(mat.$yellow-palette, 40)
+        ),
+      alert-warning-background-color: light-dark(
+          map.get(mat.$yellow-palette, 98),
+          map.get(mat.$yellow-palette, 20)
+        ),
+      alert-warning-text-color: light-dark(
+          map.get(mat.$yellow-palette, 20),
+          map.get(mat.$yellow-palette, 98)
+        ),
+      alert-danger-outline-color: light-dark(
+          map.get(mat.$red-palette, 80),
+          map.get(mat.$red-palette, 40)
+        ),
+      alert-danger-background-color: light-dark(
+          map.get(mat.$red-palette, 90),
+          map.get(mat.$red-palette, 20)
+        ),
+      alert-danger-text-color: light-dark(
+          map.get(mat.$red-palette, 20),
+          map.get(mat.$red-palette, 90)
+        ),
+    ),
+    typography: (),
+    density: (),
+  );
+
+  @return $tokens;
+}

package/src/lib/components/alert/alert.scss

@@ -0,0 +1,60 @@
+@use '../../../core/tokens/token-utils';
+@use './m3-alert';
+
+$fallbacks: m3-alert.get-tokens();
+
+.acp-alert {
+  position: relative;
+  display: block;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  line-height: 1.5;
+  border: 1px solid token-utils.slot(alert-outline-color, $fallbacks);
+  border-radius: token-utils.slot(alert-container-shape, $fallbacks);
+  background-color: token-utils.slot(alert-background-color, $fallbacks);
+  color: token-utils.slot(alert-text-color, $fallbacks);
+
+  &.acp-alert-info {
+    border-color: token-utils.slot(alert-info-outline-color, $fallbacks);
+    background-color: token-utils.slot(alert-info-background-color, $fallbacks);
+    color: token-utils.slot(alert-info-text-color, $fallbacks);
+  }
+
+  &.acp-alert-success {
+    border-color: token-utils.slot(alert-success-outline-color, $fallbacks);
+    background-color: token-utils.slot(alert-success-background-color, $fallbacks);
+    color: token-utils.slot(alert-success-text-color, $fallbacks);
+  }
+
+  &.acp-alert-warning {
+    border-color: token-utils.slot(alert-warning-outline-color, $fallbacks);
+    background-color: token-utils.slot(alert-warning-background-color, $fallbacks);
+    color: token-utils.slot(alert-warning-text-color, $fallbacks);
+  }
+
+  &.acp-alert-danger {
+    border-color: token-utils.slot(alert-danger-outline-color, $fallbacks);
+    background-color: token-utils.slot(alert-danger-background-color, $fallbacks);
+    color: token-utils.slot(alert-danger-text-color, $fallbacks);
+  }
+}
+
+.acp-alert-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+
+  [dir='rtl'] & {
+    right: auto;
+    left: 0;
+  }
+}
+
+.acp-alert-dismissible {
+  padding-right: 3rem;
+}