@patternfly/chatbot 2.2.0-prerelease.14 → 2.2.0-prerelease.16

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.
@@ -13,8 +13,8 @@
13
13
  // Need to inline shorter text
14
14
  .pf-chatbot__message-text {
15
15
  width: fit-content;
16
- padding: var(--pf-t--chatbot-message--type--padding) 0 var(--pf-t--chatbot-message--type--padding) 0;
17
- border-radius: var(--pf-t--chatbot-message--type--border--radius);
16
+ padding: var(--pf-t--global--spacer--sm) 0 var(--pf-t--global--spacer--sm) 0;
17
+ border-radius: var(--pf-t--global--border--radius--small);
18
18
 
19
19
  .pf-v6-c-content,
20
20
  .pf-v6-c-content--small,
@@ -25,27 +25,24 @@
25
25
  }
26
26
 
27
27
  code {
28
- background-color: var(--pf-t--chatbot-message--type--background--color--default);
28
+ background-color: var(--pf-t--global--background--color--tertiary--default);
29
29
  font-size: var(--pf-t--global--font--size--body--default);
30
30
  }
31
31
  }
32
32
 
33
33
  .pf-chatbot__message--user {
34
34
  .pf-chatbot__message-text {
35
- background-color: var(--pf-t--chatbot-message--type--background--color--primary);
36
- color: var(--pf-t--chatbot-message--type--text--color--primary);
37
- padding: var(--pf-t--chatbot-message--type--padding);
35
+ background-color: var(--pf-t--global--color--brand--default);
36
+ color: var(--pf-t--global--text--color--on-brand--default);
37
+ --pf-v6-c-content--Color: var(--pf-t--global--text--color--on-brand--default);
38
+ padding: var(--pf-t--global--spacer--sm);
38
39
 
39
40
  .pf-v6-c-content,
40
41
  .pf-v6-c-content--small,
41
42
  .pf-v6-c-content--blockquote,
42
43
  p,
43
44
  a {
44
- color: var(--pf-t--chatbot-message--type--text--color--primary);
45
- }
46
-
47
- code {
48
- background-color: initial;
45
+ color: var(--pf-t--global--text--color--on-brand--default);
49
46
  }
50
47
  }
51
48
  }
@@ -4,11 +4,11 @@
4
4
 
5
5
  import React from 'react';
6
6
  import { ExtraProps } from 'react-markdown';
7
- import { Content, ContentVariants } from '@patternfly/react-core';
7
+ import { Content, ContentProps } from '@patternfly/react-core';
8
8
 
9
- const TextMessage = ({ children, ...props }: JSX.IntrinsicElements['p'] & ExtraProps) => (
9
+ const TextMessage = ({ component, children, ...props }: ContentProps & ExtraProps) => (
10
10
  <span className="pf-chatbot__message-text">
11
- <Content component={ContentVariants.p} {...props}>
11
+ <Content component={component} {...props}>
12
12
  {children}
13
13
  </Content>
14
14
  </span>
@@ -8,13 +8,29 @@
8
8
  height: 3rem;
9
9
 
10
10
  .pf-v6-c-button__icon {
11
- color: var(--pf-t--chatbot--icon--fill);
11
+ color: var(--pf-t--global--icon--color--subtle);
12
12
  }
13
13
 
14
14
  // Interactive states
15
- &:hover, &:focus {
15
+ &:hover {
16
16
  .pf-v6-c-button__icon {
17
- color: var(--pf-t--chatbot--icon--fill--hover);
17
+ color: var(--pf-t--global--icon--color--regular);
18
+ }
19
+ }
20
+
21
+ &:active,
22
+ &:focus {
23
+ background-color: var(--pf-t--global--color--brand--clicked);
24
+
25
+ .pf-v6-c-button__icon {
26
+ color: var(--pf-t--global--icon--color--inverse);
27
+ }
28
+
29
+ &:hover,
30
+ &:focus {
31
+ .pf-v6-c-button__icon {
32
+ color: var(--pf-t--global--icon--color--inverse);
33
+ }
18
34
  }
19
35
  }
20
36
  }
@@ -21,7 +21,8 @@
21
21
  justify-content: flex-end;
22
22
  background-color: var(--pf-t--global--background--color--primary--default);
23
23
  border-radius: calc(var(--pf-t--global--border--radius--medium) * 2);
24
- transition: box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm);
24
+ transition: box-shadow var(--pf-t--global--motion--timing-function--accelerate)
25
+ var(--pf-t--global--motion--duration--sm);
25
26
 
26
27
  overflow: hidden;
27
28
 
@@ -38,7 +39,7 @@
38
39
  justify-content: end;
39
40
  padding-block-start: var(--pf-t--global--spacer--xs);
40
41
  padding-block-end: var(--pf-t--global--spacer--xs);
41
- gap: var(--pf-t--global--spacer--xs);
42
+ gap: var(--pf-t--global--spacer--gap--action-to-action--plain);
42
43
  }
43
44
 
44
45
  &-input {
@@ -8,31 +8,31 @@
8
8
  height: 3rem;
9
9
 
10
10
  .pf-v6-c-button__icon {
11
- color: var(--pf-t--chatbot--icon--fill);
11
+ color: var(--pf-t--global--icon--color--subtle);
12
12
  }
13
13
 
14
14
  // Interactive states
15
15
  &:hover,
16
16
  &:focus {
17
17
  .pf-v6-c-button__icon {
18
- color: var(--pf-t--chatbot--icon--fill--hover);
18
+ color: var(--pf-t--global--icon--color--regular);
19
19
  }
20
20
  }
21
21
 
22
22
  // Active state (while recording voice)
23
23
  &--active {
24
- background-color: var(--pf-t--color--blue--50);
25
- animation: motionMicButton var(--pf-t--chatbot--timing-function) calc(var(--pf-t--global--motion--duration--md) * 8)
26
- infinite;
24
+ background-color: var(--pf-t--global--color--brand--clicked);
25
+ animation: motionMicButton var(--pf-t--global--motion--timing-function--accelerate)
26
+ calc(var(--pf-t--global--motion--duration--md) * 8) infinite;
27
27
 
28
28
  .pf-v6-c-button__icon {
29
- color: var(--pf-t--color--white);
29
+ color: var(--pf-t--global--icon--color--on-brand--default);
30
30
  }
31
31
 
32
32
  &:hover,
33
33
  &:focus {
34
34
  .pf-v6-c-button__icon {
35
- color: var(--pf-t--color--white);
35
+ color: var(--pf-t--global--icon--color--on-brand--default);
36
36
  }
37
37
  }
38
38
  }
@@ -40,7 +40,7 @@
40
40
 
41
41
  @keyframes motionMicButton {
42
42
  0% {
43
- box-shadow: 0 0 0 0 rgba(0, 102, 204, 1);
43
+ box-shadow: 0 0 0 0 rgba(0, 77, 153, 1);
44
44
  }
45
45
  100% {
46
46
  box-shadow: 0 0 0 16px rgba(0, 102, 204, 0);
@@ -12,11 +12,25 @@
12
12
  align-items: center;
13
13
 
14
14
  .pf-v6-c-button__icon {
15
- color: var(--pf-t--global--icon--color--inverse);
15
+ color: var(--pf-t--global--icon--color--on-brand--default);
16
16
  }
17
17
 
18
- &:hover,
19
- &:focus {
18
+ &:hover {
20
19
  background-color: var(--pf-t--global--color--brand--hover);
21
20
  }
21
+
22
+ &:focus {
23
+ background-color: var(--pf-t--global--color--brand--clicked);
24
+
25
+ .pf-v6-c-button__icon {
26
+ color: var(--pf-t--global--icon--color--on-brand--default);
27
+ }
28
+
29
+ &:hover,
30
+ &:focus {
31
+ .pf-v6-c-button__icon {
32
+ color: var(--pf-t--global--icon--color--on-brand--default);
33
+ }
34
+ }
35
+ }
22
36
  }
@@ -16,13 +16,13 @@
16
16
  background-color: var(--pf-t--global--background--color--primary--default) !important;
17
17
  border: 1px solid var(--pf-t--chatbot--border) !important;
18
18
  box-shadow: var(--pf-t--global--box-shadow--sm);
19
- color: var(--pf-t--chatbot--icon--fill) !important;
19
+ color: var(--pf-t--global--icon--color--subtle) !important;
20
20
  transform: translate3d(-50%, 0, 0) !important;
21
21
  transition:
22
- background-color var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm),
23
- box-shadow var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--sm),
24
- transform var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md),
25
- opacity var(--pf-t--chatbot--timing-function) var(--pf-t--global--motion--duration--md) !important;
22
+ background-color var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
23
+ box-shadow var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--sm),
24
+ transform var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md),
25
+ opacity var(--pf-t--global--motion--timing-function--accelerate) var(--pf-t--global--motion--duration--md) !important;
26
26
  z-index: var(--pf-t--global--z-index--md) !important;
27
27
 
28
28
  .pf-v6-c-button__text {
@@ -33,7 +33,7 @@
33
33
  &:focus {
34
34
  background-color: var(--pf-t--global--background--color--primary--hover) !important;
35
35
  box-shadow: var(--pf-t--global--box-shadow--md) !important;
36
- color: var(--pf-t--chatbot--icon--fill--hover) !important;
36
+ color: var(--pf-t--global--icon--color--regular) !important;
37
37
  }
38
38
 
39
39
  &--top {
@@ -63,11 +63,11 @@
63
63
  .pf-v6-c-button:hover,
64
64
  .pf-v6-c-button:focus {
65
65
  .pf-v6-c-button__icon {
66
- color: var(--pf-t--chatbot--icon--fill--hover);
66
+ color: var(--pf-t--global--icon--color--regular);
67
67
  }
68
68
  }
69
69
  .pf-v6-c-button__icon {
70
- color: var(--pf-t--chatbot--icon--fill);
70
+ color: var(--pf-t--global--icon--color--subtle);
71
71
  }
72
72
  }
73
73
  }
package/src/main.scss CHANGED
@@ -50,8 +50,6 @@
50
50
 
51
51
  --pf-t--chatbot-toggle--background--hover: var(--pf-t--color--gray--70);
52
52
 
53
- --pf-t--chatbot--timing-function: cubic-bezier(0.77, 0, 0.175, 1);
54
-
55
53
  --pf-t--chatbot--blue-icon--background--color--hover: rgba(
56
54
  146,
57
55
  197,
@@ -69,8 +67,6 @@
69
67
  --pf-t--chatbot--background: var(--pf-t--global--background--color--secondary--default);
70
68
  --pf-t--chatbot--border: var(--pf-t--global--border--color--default);
71
69
 
72
- --pf-t--chatbot--icon--fill: var(--pf-t--global--icon--color--subtle);
73
- --pf-t--chatbot--icon--fill--hover: var(--pf-t--global--icon--color--regular);
74
70
  --pf-t--chatbot--icon--fill--active: var(--pf-t--global--text--color--regular);
75
71
 
76
72
  --pf-t--chatbot--blue-icon--fill: var(--pf-t--global--color--brand--default);