@indico-data/design-system 2.17.2 → 2.18.0

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.
Files changed (32) hide show
  1. package/lib/index.css +616 -151
  2. package/lib/index.d.ts +0 -1
  3. package/lib/index.esm.css +616 -151
  4. package/lib/index.esm.js +5 -453
  5. package/lib/index.esm.js.map +1 -1
  6. package/lib/index.js +5 -453
  7. package/lib/index.js.map +1 -1
  8. package/lib/src/components/button/Button.stories.d.ts +1 -0
  9. package/lib/src/legacy/components/modals/ModalBase/ModalBase.d.ts +0 -1
  10. package/package.json +1 -1
  11. package/src/components/button/Button.mdx +6 -3
  12. package/src/components/button/Button.stories.tsx +8 -0
  13. package/src/components/button/Button.tsx +14 -6
  14. package/src/components/button/__tests__/Button.test.tsx +38 -0
  15. package/src/components/button/styles/Button.scss +14 -22
  16. package/src/components/button/styles/_variables.scss +77 -4
  17. package/src/components/forms/checkbox/styles/Checkbox.scss +3 -3
  18. package/src/components/forms/input/styles/Input.scss +2 -4
  19. package/src/components/forms/passwordInput/styles/PasswordInput.scss +2 -4
  20. package/src/components/forms/radio/styles/Radio.scss +3 -3
  21. package/src/components/forms/select/styles/Select.scss +21 -4
  22. package/src/components/forms/textarea/styles/Textarea.scss +2 -3
  23. package/src/components/forms/toggle/styles/Toggle.scss +2 -2
  24. package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.scss +441 -0
  25. package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.tsx +3 -4
  26. package/src/legacy/components/modals/ModalBase/ModalBase.tsx +5 -1
  27. package/src/styles/globals.scss +11 -0
  28. package/src/styles/index.scss +2 -2
  29. package/src/styles/variables/themes/dark.scss +8 -7
  30. package/src/styles/variables/themes/light.scss +1 -0
  31. package/lib/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.styles.d.ts +0 -1
  32. package/src/legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.styles.ts +0 -449
package/lib/src/components/button/Button.stories.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare const InfoOutline: Story;
14
14
  export declare const Text: Story;
15
15
  export declare const IconLeft: Story;
16
16
  export declare const IconRight: Story;
17
+ export declare const IconOnly: Story;
17
18
  export declare const Error: Story;
18
19
  export declare const Success: Story;
19
20
  export declare const Warning: Story;
package/lib/src/legacy/components/modals/ModalBase/ModalBase.d.ts CHANGED
@@ -4,7 +4,6 @@ export type ModalBaseProps = PermafrostComponent & {
4
4
  children: React.ReactNode | React.ReactNode[];
5
5
  clickToDismiss?(): void;
6
6
  describedBy?: string;
7
- /** a selector representing the desired parent; defaults to `#root` */
8
7
  node?: string;
9
8
  open: boolean;
10
9
  preventEscDismiss?: boolean;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "2.17.2",
3
+ "version": "2.18.0",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/button/Button.mdx CHANGED
@@ -86,13 +86,16 @@ The states available are enabled, `disabled`, and `loading`. The button is enabl
86
86
 
87
87
  ## Icons
88
88
 
89
- The Icon property requires you to pass two arguments, `iconName` and `iconPosition`. The `iconName` is the name of the icon you want to use and the `iconPosition` is the position of the icon in relation to the text. The default value for `iconPosition` is `left`. The Options for `iconPosition` are `left` and `right`.
89
+ To include an Icon pass an `iconName` prop with a valid icon name. The `iconName` is the name of the icon you want to use. You can optionally pass an `iconPosition` argument to set the position of the icon in relation to the text. The default value for `iconPosition` is `left`. If no children are passed, the button will render as an icon-only button.
90
90
 
91
91
  <Row>
92
92
  <Col xs={6} sm={4} md={3} lg={2}>
93
93
  <Story of={ButtonStories.IconLeft} />
94
94
  </Col>
95
- <Col xs={2}>
95
+ <Col xs={6} sm={4} md={3} lg={2}>
96
96
  <Story of={ButtonStories.IconRight} />
97
97
  </Col>
98
- </Row>
98
+ <Col xs={6} sm={4} md={3} lg={2}>
99
+ <Story of={ButtonStories.IconOnly} />
100
+ </Col>
101
+ </Row>
package/src/components/button/Button.stories.tsx CHANGED
@@ -254,6 +254,14 @@ export const IconRight: Story = {
254
254
  render: (args) => <Button {...args}>Icon Right</Button>,
255
255
  };
256
256
 
257
+ export const IconOnly: Story = {
258
+ args: {
259
+ color: 'primary',
260
+ iconName: 'fa-check',
261
+ },
262
+ render: (args) => <Button {...args} />,
263
+ };
264
+
257
265
  export const Error: Story = {
258
266
  args: {
259
267
  color: 'error',
package/src/components/button/Button.tsx CHANGED
@@ -57,21 +57,29 @@ export const Button = (props: ButtonProps) => {
57
57
  onKeyDown={onKeyDown}
58
58
  {...rest}
59
59
  >
60
+ {/* Loading Icon */}
60
61
  {isLoading && (
61
62
  <Icon
62
63
  name="fa-circle-notch"
63
- style={{
64
- animation: 'spin 1s linear infinite',
65
- }}
64
+ style={{ animation: 'spin 1s linear infinite' }}
66
65
  className="mr-2"
67
- ariaLabel={'Loading...'}
66
+ ariaLabel="Loading..."
68
67
  />
69
68
  )}
70
- {iconPosition === 'left' && iconName && (
69
+
70
+ {/* Icon without children */}
71
+ {!children && iconName && <Icon name={iconName} ariaLabel={`${iconName} Icon`} />}
72
+
73
+ {/* Left Icon with children */}
74
+ {children && iconPosition === 'left' && iconName && (
71
75
  <Icon name={iconName} className="mr-2" ariaLabel={`${iconName} Icon`} />
72
76
  )}
77
+
78
+ {/* Button children */}
73
79
  {children}
74
- {iconPosition === 'right' && iconName && (
80
+
81
+ {/* Right Icon with children */}
82
+ {children && iconPosition === 'right' && iconName && (
75
83
  <Icon name={iconName} className="ml-2" ariaLabel={`${iconName} Icon`} />
76
84
  )}
77
85
  </button>
package/src/components/button/__tests__/Button.test.tsx CHANGED
@@ -70,6 +70,7 @@ describe('Button', () => {
70
70
  expect(button).toBeDisabled();
71
71
  });
72
72
  });
73
+
73
74
  describe('button interactions', () => {
74
75
  beforeEach(() => {
75
76
  onClick.mockClear();
@@ -77,11 +78,13 @@ describe('Button', () => {
77
78
  onMouseExit.mockClear();
78
79
  onKeyDown.mockClear();
79
80
  });
81
+
80
82
  it('calls the onKeyDown function when a key is pressed', async () => {
81
83
  render(<Button onKeyDown={onKeyDown} onClick={onClick} ariaLabel="btn" />);
82
84
  await userEvent.type(screen.getByRole('button'), '{enter}');
83
85
  expect(onKeyDown).toHaveBeenCalledTimes(1);
84
86
  });
87
+
85
88
  it('calls the onClick function when the button is clicked', async () => {
86
89
  render(<Button onClick={onClick} ariaLabel="btn" />);
87
90
  await userEvent.click(screen.getByRole('button'));
@@ -99,10 +102,45 @@ describe('Button', () => {
99
102
  await userEvent.hover(screen.getByRole('button'));
100
103
  expect(onMouseEnter).toHaveBeenCalledTimes(1);
101
104
  });
105
+
102
106
  it('calls the onMouseExit function when the mouse leaves the button', async () => {
103
107
  render(<Button onMouseExit={onMouseExit} onClick={onClick} ariaLabel="btn" />);
104
108
  await userEvent.unhover(screen.getByRole('button'));
105
109
  expect(onMouseExit).toHaveBeenCalledTimes(1);
106
110
  });
107
111
  });
112
+
113
+ describe('button with icons', () => {
114
+ it('renders an icon when iconName is provided and no children', () => {
115
+ render(<Button iconName="fa-wind" ariaLabel="icon button" />);
116
+ const icon = screen.getByLabelText('fa-wind Icon');
117
+ expect(icon).toBeInTheDocument();
118
+ expect(icon).not.toHaveClass('mr-2');
119
+ expect(icon).not.toHaveClass('ml-2');
120
+ });
121
+
122
+ it('renders an icon to the left when iconPosition is left and children are present', () => {
123
+ render(
124
+ <Button iconName="fa-wind" iconPosition="left" ariaLabel="icon button">
125
+ Button
126
+ </Button>,
127
+ );
128
+ const icon = screen.getByLabelText('fa-wind Icon');
129
+ const button = screen.getByRole('button');
130
+ expect(button).toContainElement(icon);
131
+ expect(icon).toHaveClass('mr-2');
132
+ });
133
+
134
+ it('renders an icon to the right when iconPosition is right and children are present', () => {
135
+ render(
136
+ <Button iconName="fa-wind" iconPosition="right" ariaLabel="icon button">
137
+ Button
138
+ </Button>,
139
+ );
140
+ const icon = screen.getByLabelText('fa-wind Icon');
141
+ const button = screen.getByRole('button');
142
+ expect(button).toContainElement(icon);
143
+ expect(icon).toHaveClass('ml-2');
144
+ });
145
+ });
108
146
  });
package/src/components/button/styles/Button.scss CHANGED
@@ -47,38 +47,30 @@
47
47
  background: var(--pf-button-hover-#{$color-name}-color);
48
48
  }
49
49
 
50
- &:focus {
51
- border-color: var(--pf-button-focus-#{$color-name}-color);
52
- background: var(--pf-button-focus-#{$color-name}-color);
53
- }
54
-
55
50
  &:disabled {
56
- background: var(--pf-button-disabled-#{$color-name}-color);
57
- border-color: var(--pf-button-disabled-#{$color-name}-color);
51
+ background: var(--pf-button-disabled-#{$color-name}-background-color);
52
+ color: var(--pf-button-disabled-#{$color-name}-text-color);
53
+ border-color: var(--pf-button-disabled-#{$color-name}-border-color);
58
54
  }
59
55
 
60
56
  &.btn--outline {
61
- color: var(--pf-button-#{$color-name}-color);
62
- background-color: var(--pf-button-outline-background-color);
57
+ color: var(--pf-button-outline-#{$color-name}-text-color);
58
+ background-color: var(--pf-button-outline-#{$color-name}-background-color);
59
+ border-color: var(--pf-button-#{$color-name}-outline-border-color);
63
60
 
64
61
  &:hover {
65
- background-color: var(--pf-button-outline-hover-#{$color-name}-color);
66
- border-color: var(--pf-button-hover-#{$color-name}-color);
67
- }
68
-
69
- &:focus {
70
- border-color: var(--pf-button-focus-#{$color-name}-color);
71
- background-color: var(--pf-button-outline-hover-#{$color-name}-color);
72
- color: var(--pf-button-focus-#{$color-name}-color);
62
+ color: var(--pf-button-outline-#{$color-name}-hover-text-color);
63
+ background-color: var(--pf-button-outline-hover-#{$color-name}-background-color);
64
+ border-color: var(--pf-button-hover-#{$color-name}-outline-border-color);
73
65
  }
74
66
 
75
67
  &:disabled {
76
- border-color: var(--pf-button-disabled-#{$color-name}-color);
77
- color: var(--pf-button-disabled-#{$color-name}-color);
68
+ border-color: var(--pf-button-disabled-#{$color-name}-outline-border-color);
69
+ color: var(--pf-button-disabled-#{$color-name}-outline-text-color);
70
+ background-color: var(--pf-button-disabled-#{$color-name}-outline-background-color);
78
71
  &:hover {
79
- border-color: var(--pf-button-disabled-#{$color-name}-color);
80
- color: var(--pf-button-disabled-#{$color-name}-color);
81
- background-color: var(--pf-button-outline-background-color);
72
+ color: var(--pf-button-disabled-#{$color-name}-outline-text-color);
73
+ background-color: var(--pf-button-disabled-#{$color-name}-outline-background-color);
82
74
  }
83
75
  }
84
76
  }
package/src/components/button/styles/_variables.scss CHANGED
@@ -11,7 +11,6 @@
11
11
  --pf-button-disabled-primary-color: var(--pf-primary-color-300);
12
12
  --pf-button-focus-primary-color: var(--pf-primary-color-900);
13
13
  --pf-button-hover-primary-color: var(--pf-primary-color-400);
14
- --pf-button-outline-hover-primary-color: var(--pf-primary-color-100);
15
14
  --pf-button-primary-color: var(--pf-primary-color);
16
15
  --pf-button-primary-text-color: var(--pf-white-color);
17
16
 
@@ -61,8 +60,6 @@
61
60
 
62
61
  // Outline Buttons
63
62
  --pf-button-outline-background-color: var(--pf-white-color);
64
-
65
- // Button Radius
66
63
  --pf-button-rounded: var(--pf-rounded);
67
64
  }
68
65
 
@@ -75,6 +72,47 @@
75
72
  --pf-button-background-info-color: var(--pf-info-color);
76
73
  --pf-button-hover-info-color: var(--pf-gray-color-400);
77
74
  --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
75
+
76
+ --pf-button-outline-primary-background-color: var(--pf-white-color);
77
+ --pf-button-outline-primary-text-color: var(--pf-primary-color);
78
+ --pf-button-outline-primary-border-color: var(--pf-primary-color);
79
+
80
+ --pf-button-outline-secondary-background-color: var(--pf-white-color);
81
+ --pf-button-outline-secondary-text-color: var(--pf-secondary-color);
82
+ --pf-button-outline-secondary-border-color: var(--pf-secondary-color);
83
+
84
+ // outline
85
+ --pf-button-primary-outline-border-color: var(--pf-primary-color);
86
+
87
+ --pf-button-secondary-outline-border-color: var(--pf-secondary-color);
88
+
89
+ // hover
90
+ --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-400);
91
+ --pf-button-outline-hover-primary-color: var(--pf-primary-color-300);
92
+ --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-100);
93
+
94
+ --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
95
+ --pf-button-outline-hover-secondary-color: var(--pf-secondary-color-300);
96
+ --pf-button-outline-hover-secondary-background-color: var(--pf-secondary-color-100);
97
+
98
+ // disabled
99
+ //general
100
+ --pf-button-disabled-primary-background-color: var(--pf-primary-color-300);
101
+ --pf-button-disabled-primary-text-color: var(--pf-gray-color-100);
102
+ --pf-button-disabled-primary-border-color: var(--pf-primary-color-300);
103
+
104
+ --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-300);
105
+ --pf-button-disabled-secondary-text-color: var(--pf-gray-color-100);
106
+ --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-300);
107
+
108
+ // outline
109
+ --pf-button-disabled-primary-outline-background-color: var(--pf-white-color);
110
+ --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-300);
111
+ --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-300);
112
+
113
+ --pf-button-disabled-secondary-outline-background-color: var(--pf-white-color);
114
+ --pf-button-disabled-secondary-outline-text-color: var(--pf-secondary-color-300);
115
+ --pf-button-disabled-secondary-outline-border-color: var(--pf-secondary-color-300);
78
116
  }
79
117
 
80
118
  // Dark Theme Specific Variables
@@ -82,8 +120,43 @@
82
120
  --pf-button-disabled-success-color: var(--pf-green-color-400);
83
121
  --pf-button-disabled-warning-color: var(--pf-orange-color-400);
84
122
  --pf-button-outline-hover-warning-color: var(--pf-orange-color-300);
85
-
86
123
  --pf-button-background-info-color: var(--pf-gray-color-800);
87
124
  --pf-button-hover-info-color: var(--pf-gray-color-600);
88
125
  --pf-button-outline-hover-info-color: var(--pf-gray-color-300);
126
+
127
+ // outline
128
+ --pf-button-outline-primary-background-color: var(--pf-primary-color-600);
129
+ --pf-button-outline-primary-text-color: var(--pf-primary-color-100);
130
+ --pf-button-primary-outline-border-color: var(--pf-primary-color-100);
131
+
132
+ --pf-button-outline-secondary-background-color: var(--pf-primary-color-600);
133
+ --pf-button-outline-secondary-text-color: var(--pf-secondary-color-700);
134
+ --pf-button-secondary-outline-border-color: var(--pf-secondary-color-700);
135
+
136
+ //hover
137
+ --pf-button-outline-primary-hover-text-color: var(--pf-primary-color-200);
138
+ --pf-button-outline-hover-primary-background-color: var(--pf-primary-color-600);
139
+ --pf-button-outline-hover-primary-border-color: var(--pf-primary-color-200);
140
+
141
+ --pf-button-outline-secondary-hover-text-color: var(--pf-secondary-color-400);
142
+ --pf-button-outline-hover-secondary-background-color: var(--pf-primary-color-600);
143
+ --pf-button-outline-hover-secondary-border-color: var(--pf-secondary-color-400);
144
+
145
+ //disabled
146
+ // general
147
+ --pf-button-disabled-primary-background-color: var(--pf-primary-color-900);
148
+ --pf-button-disabled-primary-text-color: var(--pf-primary-color-400);
149
+ --pf-button-disabled-primary-border-color: var(--pf-primary-color-900);
150
+
151
+ --pf-button-disabled-secondary-background-color: var(--pf-secondary-color-900);
152
+ --pf-button-disabled-secondary-text-color: var(--pf-secondary-color-400);
153
+ --pf-button-disabled-secondary-border-color: var(--pf-secondary-color-900);
154
+ // outline
155
+ --pf-button-disabled-primary-outline-background-color: var(--pf-primary-color-900);
156
+ --pf-button-disabled-primary-outline-text-color: var(--pf-primary-color-400);
157
+ --pf-button-disabled-primary-outline-border-color: var(--pf-primary-color-400);
158
+
159
+ --pf-button-disabled-secondary-outline-background-color: var(--pf-primary-color-900);
160
+ --pf-button-disabled-secondary-outline-text-color: var(--pf-primary-color-400);
161
+ --pf-button-disabled-secondary-outline-border-color: var(--pf-primary-color-400);
89
162
  }
package/src/components/forms/checkbox/styles/Checkbox.scss CHANGED
@@ -4,15 +4,15 @@
4
4
  :root [data-theme='dark'] {
5
5
  --pf-checkbox-background-color: var(--pf-white-color);
6
6
  --pf-checkbox-check-color: var(--pf-primary-color);
7
- --pf-checkbox-border-color: var(--pf-gray-color);
7
+ --pf-checkbox-border-color: var(--pf-form-input-border-color);
8
8
  --pf-checkbox-disabled-color: var(--pf-gray-color-400);
9
9
  }
10
10
 
11
11
  // Dark Theme Specific Variables
12
12
  :root [data-theme='dark'] {
13
- --pf-checkbox-background-color: var(--pf-primary-color-200);
13
+ --pf-checkbox-background-color: var(--pf-primary-color-500);
14
14
  --pf-checkbox-check-color: var(--pf-white-color);
15
- --pf-checkbox-border-color: var(--pf-white-color);
15
+ --pf-checkbox-border-color: var(--pf-form-input-border-color);
16
16
  --pf-checkbox-disabled-color: var(--pf-gray-color-300);
17
17
  }
18
18
 
package/src/components/forms/input/styles/Input.scss CHANGED
@@ -4,14 +4,12 @@
4
4
  :root [data-theme='dark'] {
5
5
  // Typography
6
6
  --pf-input-background-color: var(--pf-white-color);
7
- --pf-input-border-color: var(--pf-gray-color);
7
+ --pf-input-border-color: var(--pf-form-input-border-color);
8
8
  --pf-input-text-color: var(--pf-gray-color);
9
9
  --pf-input-placeholder-text-color: var(--pf-gray-color-300);
10
10
  --pf-input-help-text-color: var(--pf-gray-color-400);
11
11
  --pf-input-disabled-background-color: var(--pf-gray-color-100);
12
- --pf-input-border-color: var(--pf-gray-color);
13
12
  --pf-input-disabled-color: var(--pf-gray-color-400);
14
- --pf-input-border-color: var(--pf-gray-color);
15
13
 
16
14
  // input Radius
17
15
  --pf-input-rounded: var(--pf-rounded);
@@ -20,7 +18,7 @@
20
18
  // Dark Theme Specific Variables
21
19
  :root [data-theme='dark'] {
22
20
  --pf-input-background-color: var(--pf-primary-color);
23
- --pf-input-border-color: var(--pf-gray-color-100);
21
+ --pf-input-border-color: var(--pf-form-input-border-color);
24
22
  --pf-input-text-color: var(--pf-gray-color-100);
25
23
  --pf-input-placeholder-text-color: var(--pf-gray-color);
26
24
  --pf-input-help-text-color: var(--pf-gray-color-200);
package/src/components/forms/passwordInput/styles/PasswordInput.scss CHANGED
@@ -4,14 +4,12 @@
4
4
  :root [data-theme='dark'] {
5
5
  // Typography
6
6
  --pf-password-input-background-color: var(--pf-white-color);
7
- --pf-password-input-border-color: var(--pf-gray-color);
7
+ --pf-password-input-border-color: var(--pf-form-input-border-color);
8
8
  --pf-password-input-text-color: var(--pf-gray-color);
9
9
  --pf-password-input-placeholder-text-color: var(--pf-gray-color-300);
10
10
  --pf-password-input-help-text-color: var(--pf-gray-color-400);
11
11
  --pf-password-input-disabled-background-color: var(--pf-gray-color-100);
12
- --pf-password-input-border-color: var(--pf-gray-color);
13
12
  --pf-password-input-disabled-color: var(--pf-gray-color-400);
14
- --pf-password-input-border-color: var(--pf-gray-color);
15
13
 
16
14
  // input Radius
17
15
  --pf-password-input-rounded: var(--pf-rounded);
@@ -20,7 +18,7 @@
20
18
  // Dark Theme Specific Variables
21
19
  :root [data-theme='dark'] {
22
20
  --pf-password-input-background-color: var(--pf-primary-color);
23
- --pf-password-input-border-color: var(--pf-gray-color-100);
21
+ --pf-password-input-border-color: var(--pf-form-input-border-color);
24
22
  --pf-password-input-text-color: var(--pf-gray-color-100);
25
23
  --pf-password-input-placeholder-text-color: var(--pf-gray-color);
26
24
  --pf-password-input-help-text-color: var(--pf-gray-color-200);
package/src/components/forms/radio/styles/Radio.scss CHANGED
@@ -4,15 +4,15 @@
4
4
  :root [data-theme='dark'] {
5
5
  --pf-radio-background-color: var(--pf-white-color);
6
6
  --pf-radio-check-color: var(--pf-primary-color);
7
- --pf-radio-border-color: var(--pf-gray-color);
7
+ --pf-radio-border-color: var(--pf-form-input-border-color);
8
8
  --pf-radio-disabled-color: var(--pf-gray-color-400);
9
9
  }
10
10
 
11
11
  // Dark Theme Specific Variables
12
12
  :root [data-theme='dark'] {
13
- --pf-radio-background-color: transparent;
13
+ --pf-radio-background-color: var(--pf-primary-color-600);
14
14
  --pf-radio-check-color: var(--pf-white-color);
15
- --pf-radio-border-color: var(--pf-white-color);
15
+ --pf-radio-border-color: var(--pf-form-input-border-color);
16
16
  --pf-radio-disabled-color: var(--pf-gray-color-300);
17
17
  }
18
18
 
package/src/components/forms/select/styles/Select.scss CHANGED
@@ -2,12 +2,12 @@
2
2
  :root,
3
3
  :root [data-theme='light'] {
4
4
  --pf-select-background-color: var(--pf-white-color);
5
- --pf-select-border-color: var(--pf-gray-color);
5
+ --pf-select-border-color: var(--pf-form-input-border-color);
6
6
  --pf-select-text-color: var(--pf-gray-color);
7
7
  --pf-select-indicator-color: var(--pf-gray-color);
8
8
  --pf-select-placeholder-text-color: var(--pf-gray-color);
9
9
  --pf-select-hover-color: var(--pf-gray-color);
10
- --pf-select-option-selected-color: var(--pf-primary-color-200);
10
+ --pf-select-option-selected-color: var(--pf-primary-color-100);
11
11
  --pf-select-option-text-color: var(--pf-gray-color);
12
12
  --pf-select-option-hover-color: var(--pf-primary-color-100);
13
13
 
@@ -19,12 +19,12 @@
19
19
  // Dark Theme Specific Variables
20
20
  :root [data-theme='dark'] {
21
21
  --pf-select-background-color: var(--pf-primary-color);
22
- --pf-select-border-color: var(--pf-gray-color-100);
22
+ --pf-select-border-color: var(--pf-form-input-border-color);
23
23
  --pf-select-text-color: var(--pf-gray-color-100);
24
24
  --pf-select-indicator-color: var(--pf-gray-color-100);
25
25
  --pf-select-placeholder-text-color: var(--pf-gray-color-100);
26
26
  --pf-select-hover-color: var(--pf-gray-color-100);
27
- --pf-select-option-selected-color: var(--pf-primary-color-200);
27
+ --pf-select-option-selected-color: var(--pf-primary-color-900);
28
28
  --pf-select-option-text-color: var(--pf-gray-color-100);
29
29
  --pf-select-option-hover-color: var(--pf-primary-color-300);
30
30
 
@@ -65,6 +65,23 @@
65
65
  color: var(--pf-select-text-color);
66
66
  }
67
67
 
68
+ &multi-value {
69
+ background-color: var(--pf-select-option-selected-color);
70
+ border-radius: var(--pf-rounded);
71
+ &__label {
72
+ padding-top: 5px; // TODO -- clean up padding on this component overall
73
+ color: var(--pf-select-option-text-color);
74
+ }
75
+ &__remove {
76
+ color: var(--pf-select-option-text-color);
77
+ cursor: pointer;
78
+ &:hover {
79
+ background-color: var(--pf-select-option-hover-color);
80
+ color: var(--pf-select-hover-color);
81
+ }
82
+ }
83
+ }
84
+
68
85
  &menu {
69
86
  border: 1px solid var(--pf-select-border-color);
70
87
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.4);
package/src/components/forms/textarea/styles/Textarea.scss CHANGED
@@ -4,12 +4,11 @@
4
4
  :root [data-theme='dark'] {
5
5
  // Typography
6
6
  --pf-textarea-background-color: var(--pf-white-color);
7
- --pf-textarea-border-color: var(--pf-gray-color);
8
7
  --pf-textarea-text-color: var(--pf-gray-color);
9
8
  --pf-textarea-placeholder-text-color: var(--pf-gray-color-300);
10
9
  --pf-textarea-help-text-color: var(--pf-gray-color-400);
11
10
  --pf-textarea-disabled-background-color: var(--pf-gray-color-100);
12
- --pf-textarea-border-color: var(--pf-gray-color);
11
+ --pf-textarea-border-color: var(--pf-form-input-border-color);
13
12
  --pf-textarea-disabled-color: var(--pf-gray-color-400);
14
13
 
15
14
  // textarea Radius
@@ -19,7 +18,7 @@
19
18
  // Dark Theme Specific Variables
20
19
  :root [data-theme='dark'] {
21
20
  --pf-textarea-background-color: var(--pf-primary-color);
22
- --pf-textarea-border-color: var(--pf-gray-color-100);
21
+ --pf-textarea-border-color: var(--pf-form-input-border-color);
23
22
  --pf-textarea-text-color: var(--pf-gray-color-100);
24
23
  --pf-textarea-placeholder-text-color: var(--pf-gray-color);
25
24
  --pf-textarea-help-text-color: var(--pf-gray-color-200);
package/src/components/forms/toggle/styles/Toggle.scss CHANGED
@@ -4,7 +4,7 @@
4
4
  :root [data-theme='dark'] {
5
5
  --pf-toggle-background-color: var(--pf-gray-color-200);
6
6
  --pf-toggle-circle-color: var(--pf-primary-color);
7
- --pf-toggle-border-color: var(--pf-gray-color);
7
+ --pf-toggle-border-color: var(--pf-form-input-border-color);
8
8
  --pf-toggle-disabled-background-color: var(--pf-gray-color-400);
9
9
  --pf-toggle-disabled-circle-color: var(--pf-gray-color-300);
10
10
  --pf-toggle-checked-background-color: var(--pf-primary-color-200);
@@ -14,7 +14,7 @@
14
14
  :root [data-theme='dark'] {
15
15
  --pf-toggle-background-color: var(--pf-primary-color-100);
16
16
  --pf-toggle-circle-color: var(--pf-white-color);
17
- --pf-toggle-border-color: var(--pf-white-color);
17
+ --pf-toggle-border-color: var(--pf-form-input-border-color);
18
18
  --pf-toggle-disabled-background-color: var(--pf-gray-color-600);
19
19
  --pf-toggle-disabled-circle-color: var(--pf-gray-color-900);
20
20
  --pf-toggle-checked-background-color: var(--pf-secondary-color-400);