@momentum-design/components 0.18.3 → 0.18.4

Sign up to get free protection for your applications and to get access to all the features.
@@ -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