@hyphen/hyphen-components 2.10.0 → 2.11.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 (14) hide show
  1. package/dist/css/index.css +1 -1
  2. package/dist/css/utilities.css +43 -1
  3. package/dist/css/variables.css +12 -3
  4. package/dist/hyphen-components.cjs.development.js +7 -6
  5. package/dist/hyphen-components.cjs.development.js.map +1 -1
  6. package/dist/hyphen-components.cjs.production.min.js +1 -1
  7. package/dist/hyphen-components.cjs.production.min.js.map +1 -1
  8. package/dist/hyphen-components.esm.js +7 -6
  9. package/dist/hyphen-components.esm.js.map +1 -1
  10. package/dist/lib/tokens.d.ts +3 -3
  11. package/package.json +2 -2
  12. package/src/components/Button/Button.tsx +1 -1
  13. package/src/components/Toast/ToastNotification.module.scss +14 -5
  14. package/src/components/Toast/ToastNotification.tsx +3 -2
package/dist/lib/tokens.d.ts CHANGED
@@ -6,9 +6,9 @@ export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];
6
6
  export declare const BREAKPOINTS: Breakpoint[];
7
7
  export declare const BASE_COLOR_OPTIONS: ("black" | "white" | "magenta" | "primary-50" | "primary-100" | "primary-200" | "primary-300" | "primary-400" | "primary-500" | "primary-600" | "primary-700" | "primary-800" | "primary-900" | "green-50" | "green-100" | "green-200" | "green-300" | "green-400" | "green-500" | "green-600" | "green-700" | "green-800" | "green-900" | "blue-50" | "blue-100" | "blue-200" | "blue-300" | "blue-400" | "blue-500" | "blue-600" | "blue-700" | "blue-800" | "blue-900" | "purple-50" | "purple-100" | "purple-200" | "purple-300" | "purple-400" | "purple-500" | "purple-600" | "purple-700" | "purple-800" | "purple-900" | "yellow-50" | "yellow-100" | "yellow-200" | "yellow-300" | "yellow-400" | "yellow-500" | "yellow-600" | "yellow-700" | "yellow-800" | "yellow-900" | "red-50" | "red-100" | "red-200" | "red-300" | "red-400" | "red-500" | "red-600" | "red-700" | "red-800" | "red-900" | "grey-50" | "grey-100" | "grey-200" | "grey-300" | "grey-400" | "grey-500" | "grey-600" | "grey-700" | "grey-800" | "grey-900")[];
8
8
  export declare const BASE_COLOR_NAMES: ("black" | "white" | "magenta" | "primary" | "green" | "blue" | "purple" | "yellow" | "red" | "grey")[];
9
- export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "white" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
10
- export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "primary" | "secondary" | "tertiary" | "inverse" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "brand-gradient" | "brand-gradient-purple" | "brand-gradient-cyan" | "chart-1" | "chart-2")[];
11
- export declare const BORDER_COLOR_OPTIONS: ("info" | "inverse" | "danger" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "default" | "subtle" | "hover" | "active")[];
9
+ export declare const FONT_COLOR_OPTIONS: ("info" | "base" | "white" | "secondary" | "tertiary" | "inverse" | "disabled" | "success" | "success-disabled" | "warn" | "warn-disabled" | "danger" | "danger-input" | "danger-disabled" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "placeholder" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple")[];
10
+ export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "success" | "danger" | "button-primary" | "button-primary-hover" | "button-primary-active" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "button-danger" | "button-danger-hover" | "button-danger-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "error" | "warning" | "transparent" | "brand-gradient" | "brand-gradient-purple" | "brand-gradient-cyan" | "chart-1" | "chart-2")[];
11
+ export declare const BORDER_COLOR_OPTIONS: ("info" | "inverse" | "danger" | "button-secondary" | "button-secondary-hover" | "button-secondary-active" | "button-tertiary" | "button-tertiary-hover" | "button-tertiary-active" | "toast" | "toast-error" | "brand-yellow" | "brand-orange" | "brand-magenta" | "brand-dark-grey" | "brand-cyan" | "brand-pink" | "brand-light-purple" | "brand-medium-purple" | "brand-dark-purple" | "warning" | "default" | "subtle" | "hover" | "active")[];
12
12
  export declare const FONT_SIZE_OPTIONS: ("xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "base" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl")[];
13
13
  export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
14
14
  export declare const FONT_WEIGHT_OPTIONS: ("light" | "normal" | "medium" | "semibold" | "bold")[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyphen/hyphen-components",
3
- "version": "2.10.0",
3
+ "version": "2.11.0",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "@hyphen"
@@ -120,7 +120,7 @@
120
120
  "@rollup/rollup-linux-x64-gnu": "^4.9.6"
121
121
  },
122
122
  "dependencies": {
123
- "@hyphen/hyphen-design-tokens": "^4.5.0",
123
+ "@hyphen/hyphen-design-tokens": "^4.6.0",
124
124
  "@popperjs/core": "^2.11.8",
125
125
  "@types/react-modal": "^3.16.3",
126
126
  "classnames": "^2.5.1",
package/src/components/Button/Button.tsx CHANGED
@@ -180,7 +180,7 @@ export const Button = forwardRef<
180
180
 
181
181
  const buttonContent =
182
182
  iconPrefix || iconSuffix ? (
183
- <Box display="inline-flex" direction="row" alignItems="center" gap="xs">
183
+ <Box display="inline-flex" direction="row" alignItems="center" gap="md">
184
184
  {isLoading && <Spinner className={styles['spinner-wrapper']} />}
185
185
  {iconPrefix && (
186
186
  <Icon
package/src/components/Toast/ToastNotification.module.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  .toast-notification {
2
- background-color: var(--color-background-primary);
3
- color: var(--color-font-primary);
4
- border: 1px solid var(--color-border-subtle);
2
+ background-color: var(--color-background-toast);
3
+ color: var(--color-font-toast);
4
+ border: 1px solid var(--color-border-toast);
5
5
  border-radius: var(--size-border-radius-lg);
6
6
  box-shadow: var(--size-box-shadow-md);
7
7
  font-size: var(--size-font-size-sm);
@@ -9,9 +9,18 @@
9
9
  pointer-events: auto;
10
10
  }
11
11
 
12
+ .toast-error {
13
+ background-color: var(--color-background-toast-error);
14
+ border-color: var(--color-border-toast-error);
15
+ color: var(--color-font-white);
16
+ }
17
+
18
+ .toast-error .toast-dismiss {
19
+ color: var(--color-font-white);
20
+ }
21
+
12
22
  .toast-dismiss {
13
- border-color: var(--color-border-default);
14
- color: var(--color-font-primary);
23
+ color: var(--color-font-toast);
15
24
  }
16
25
 
17
26
  .toast-notification-enter-top {
package/src/components/Toast/ToastNotification.tsx CHANGED
@@ -72,7 +72,7 @@ const renderToastIcon = (toast: Toast) => {
72
72
 
73
73
  if (type === 'error') {
74
74
  iconName = 'c-warning';
75
- iconColor = 'danger';
75
+ iconColor = 'white';
76
76
  }
77
77
 
78
78
  const icon =
@@ -100,7 +100,7 @@ const renderDismissIcon = (
100
100
  return (
101
101
  <Box
102
102
  as="button"
103
- borderWidth="0 0 0 sm"
103
+ borderWidth="0"
104
104
  className={styles['toast-dismiss']}
105
105
  padding="0 0 0 sm"
106
106
  alignItems="center"
@@ -142,6 +142,7 @@ export const ToastNotification: React.FC<ToastNotificationProps> = React.memo(
142
142
  animationClass,
143
143
  {
144
144
  'toast-notification--not-visible': !toast.visible,
145
+ [styles['toast-error']]: toast.type === 'error',
145
146
  }
146
147
  );
147
148