@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.
- package/dist/browser/index.js +0 -14
- package/dist/browser/index.js.map +2 -2
- package/dist/components/badge/badge.component.d.ts +12 -0
- package/dist/components/badge/badge.component.js +12 -0
- package/dist/components/icon/icon.component.d.ts +2 -0
- package/dist/components/icon/icon.component.js +2 -0
- package/dist/components/presence/presence.component.d.ts +16 -0
- package/dist/components/presence/presence.component.js +16 -0
- package/dist/components/presence/presence.styles.js +0 -14
- package/dist/custom-elements.json +617 -501
- package/dist/react/badge/index.d.ts +12 -0
- package/dist/react/badge/index.js +12 -0
- package/dist/react/icon/index.d.ts +2 -0
- package/dist/react/icon/index.js +2 -0
- package/dist/react/index.d.ts +1 -1
- package/dist/react/index.js +1 -1
- package/dist/react/presence/index.d.ts +16 -0
- package/dist/react/presence/index.js +16 -0
- package/package.json +1 -1
@@ -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
|
|