@momentum-design/components 0.18.3 → 0.18.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -23,6 +23,18 @@ import type { IconVariant, BadgeType } from './badge.types';
23
23
  * @dependency mdc-text
24
24
  *
25
25
  * @tagname mdc-badge
26
+ *
27
+ * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
28
+ * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
29
+ * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
30
+ * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
31
+ * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
32
+ * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
33
+ * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
34
+ * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
35
+ * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
36
+ * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
37
+ * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
26
38
  */
27
39
  declare class Badge extends Component {
28
40
  /**
@@ -36,6 +36,18 @@ import styles from './badge.styles';
36
36
  * @dependency mdc-text
37
37
  *
38
38
  * @tagname mdc-badge
39
+ *
40
+ * @cssproperty --mdc-badge-primary-foreground-color - The foreground color of the primary badge.
41
+ * @cssproperty --mdc-badge-primary-background-color - The background color of the primary badge.
42
+ * @cssproperty --mdc-badge-secondary-foreground-color - The foreground color of the secondary badge.
43
+ * @cssproperty --mdc-badge-secondary-background-color - The background color of the secondary badge.
44
+ * @cssproperty --mdc-badge-success-foreground-color - The foreground color of the success badge.
45
+ * @cssproperty --mdc-badge-success-background-color - The background color of the success badge.
46
+ * @cssproperty --mdc-badge-warning-foreground-color - The foreground color of the warning badge.
47
+ * @cssproperty --mdc-badge-warning-background-color - The background color of the warning badge.
48
+ * @cssproperty --mdc-badge-error-foreground-color - The foreground color of the error badge.
49
+ * @cssproperty --mdc-badge-error-background-color - The background color of the error badge.
50
+ * @cssproperty --mdc-badge-overlay-background-color - The background color of the badge overlay.
39
51
  */
40
52
  class Badge extends Component {
41
53
  constructor() {
@@ -44,6 +44,8 @@ import type { IconNames } from './icon.types';
44
44
  * @tagname mdc-icon
45
45
  *
46
46
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
47
+ * @cssproperty --mdc-icon-size - Allows customization of the icon size.
48
+ * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
47
49
  */
48
50
  declare class Icon extends Component {
49
51
  private iconData?;
@@ -58,6 +58,8 @@ import { DEFAULTS } from './icon.constants';
58
58
  * @tagname mdc-icon
59
59
  *
60
60
  * @cssproperty --mdc-icon-fill-color - Allows customization of the default fill color.
61
+ * @cssproperty --mdc-icon-size - Allows customization of the icon size.
62
+ * @cssproperty --mdc-icon-border-radius - Allows customization of the icon border radius.
61
63
  */
62
64
  class Icon extends Component {
63
65
  constructor() {
@@ -11,6 +11,22 @@ import type { PresenceType, PresenceSize } from './presence.types';
11
11
  * @dependency mdc-icon
12
12
  *
13
13
  * @tagname mdc-presence
14
+ *
15
+ * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
16
+ * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
17
+ * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
18
+ * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
19
+ * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
20
+ * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
21
+ * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
22
+ * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
23
+ * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
24
+ * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
25
+ * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
26
+ * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
27
+ * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
28
+ * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
29
+ * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
14
30
  */
15
31
  declare class Presence extends Component {
16
32
  /**
@@ -23,6 +23,22 @@ import { getIconValue } from './presence.utils';
23
23
  * @dependency mdc-icon
24
24
  *
25
25
  * @tagname mdc-presence
26
+ *
27
+ * @cssproperty --mdc-presence-active-background-color - The background color of the presence type active.
28
+ * @cssproperty --mdc-presence-away-background-color - The background color of the presence type away.
29
+ * @cssproperty --mdc-presence-away-calling-background-color - The background color of the presence type away-calling.
30
+ * @cssproperty --mdc-presence-busy-background-color - The background color of the presence type busy.
31
+ * @cssproperty --mdc-presence-dnd-background-color - The background color of the presence type dnd.
32
+ * @cssproperty --mdc-presence-meeting-background-color - The background color of the presence type meeting.
33
+ * @cssproperty --mdc-presence-on-call-background-color - The background color of the presence type on-call.
34
+ * @cssproperty --mdc-presence-on-device-background-color - The background color of the presence type on-device.
35
+ * @cssproperty --mdc-presence-on-mobile-background-color - The background color of the presence type on-mobile.
36
+ * @cssproperty --mdc-presence-pause-background-color - The background color of the presence type pause.
37
+ * @cssproperty --mdc-presence-pto-background-color - The background color of the presence type pto.
38
+ * @cssproperty --mdc-presence-presenting-background-color - The background color of the presence type presenting.
39
+ * @cssproperty --mdc-presence-quiet-background-color - The background color of the presence type quiet.
40
+ * @cssproperty --mdc-presence-scheduled-background-color - The background color of the presence type scheduled.
41
+ * @cssproperty --mdc-presence-overlay-background-color - The background color of the presence type overlay.
26
42
  */
27
43
  class Presence extends Component {
28
44
  constructor() {
@@ -5,33 +5,19 @@ const styles = [
5
5
  css `
6
6
  :host {
7
7
  --mdc-presence-active-background-color: var(--mds-color-theme-indicator-stable);
8
-
9
8
  --mdc-presence-away-background-color: var(--mds-color-theme-indicator-locked);
10
-
11
9
  --mdc-presence-away-calling-background-color: var(--mds-color-theme-indicator-locked);
12
-
13
10
  --mdc-presence-busy-background-color: var(--mds-color-theme-indicator-unstable);
14
-
15
11
  --mdc-presence-dnd-background-color: var(--mds-color-theme-indicator-attention);
16
-
17
12
  --mdc-presence-meeting-background-color: var(--mds-color-theme-indicator-unstable);
18
-
19
13
  --mdc-presence-on-call-background-color: var(--mds-color-theme-indicator-unstable);
20
-
21
14
  --mdc-presence-on-device-background-color: var(--mds-color-theme-indicator-locked);
22
-
23
15
  --mdc-presence-on-mobile-background-color: var(--mds-color-theme-indicator-locked);
24
-
25
16
  --mdc-presence-pause-background-color: var(--mds-color-theme-indicator-locked);
26
-
27
17
  --mdc-presence-pto-background-color: var(--mds-color-theme-indicator-locked);
28
-
29
18
  --mdc-presence-presenting-background-color: var(--mds-color-theme-indicator-attention);
30
-
31
19
  --mdc-presence-quiet-background-color: var(--mds-color-theme-indicator-locked);
32
-
33
20
  --mdc-presence-scheduled-background-color: var(--mds-color-theme-indicator-unstable);
34
-
35
21
  --mdc-presence-overlay-background-color: var(--mds-color-theme-background-solid-primary-normal);
36
22
  }
37
23