@hyphen/hyphen-components 2.9.6 → 2.10.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 (5) hide show
  1. package/dist/css/utilities.css +13 -1
  2. package/dist/css/variables.css +4 -2
  3. package/dist/lib/tokens.d.ts +1 -1
  4. package/package.json +2 -2
  5. package/src/components/Box/Box.stories.tsx +6 -0
package/dist/css/utilities.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \***************************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Thu, 25 Jul 2024 15:25:38 GMT
6
+ * Generated on Tue, 06 Aug 2024 00:21:00 GMT
7
7
  */
8
8
 
9
9
  .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -216,6 +216,18 @@
216
216
 
217
217
  .focus\:background-color-brand-dark-purple:focus { background: var(--color-background-brand-dark-purple); }
218
218
 
219
+ .background-color-chart-1 { background: var(--color-background-chart-1); }
220
+
221
+ .hover\:background-color-chart-1:hover { background: var(--color-background-chart-1); }
222
+
223
+ .focus\:background-color-chart-1:focus { background: var(--color-background-chart-1); }
224
+
225
+ .background-color-chart-2 { background: var(--color-background-chart-2); }
226
+
227
+ .hover\:background-color-chart-2:hover { background: var(--color-background-chart-2); }
228
+
229
+ .focus\:background-color-chart-2:focus { background: var(--color-background-chart-2); }
230
+
219
231
  .border-color-default { border-color: var(--color-border-default); }
220
232
 
221
233
  .hover\:border-color-default:hover { border-color: var(--color-border-default); }
package/dist/css/variables.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \*********************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Thu, 25 Jul 2024 15:25:38 GMT
6
+ * Generated on Tue, 06 Aug 2024 00:21:00 GMT
7
7
  */
8
8
 
9
9
  :root {
@@ -44,6 +44,8 @@
44
44
  --color-background-brand-light-purple: #b47dff;
45
45
  --color-background-brand-medium-purple: #4b32aa;
46
46
  --color-background-brand-dark-purple: #1e1e5a;
47
+ --color-background-chart-1: #1d4ed8;
48
+ --color-background-chart-2: #93c5fd;
47
49
  --color-base-black: #000000;
48
50
  --color-base-white: #ffffff;
49
51
  --color-base-magenta: #fa0a64;
@@ -296,7 +298,7 @@
296
298
  \*******************************************************************************************************************************/
297
299
  /**
298
300
  * Do not edit directly
299
- * Generated on Thu, 25 Jul 2024 15:25:38 GMT
301
+ * Generated on Tue, 06 Aug 2024 00:21:00 GMT
300
302
  */
301
303
 
302
304
  :root.dark {
package/dist/lib/tokens.d.ts CHANGED
@@ -7,7 +7,7 @@ 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
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")[];
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
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")[];
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")[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyphen/hyphen-components",
3
- "version": "2.9.6",
3
+ "version": "2.10.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.4.3",
123
+ "@hyphen/hyphen-design-tokens": "^4.5.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/Box/Box.stories.tsx CHANGED
@@ -117,6 +117,12 @@ export const Background = () => {
117
117
  <Box color="white" background="brand-dark-purple" padding="md">
118
118
  brand-dark-purple
119
119
  </Box>
120
+ <Box color="white" background="chart-1" padding="md">
121
+ chart-1
122
+ </Box>
123
+ <Box color="white" background="chart-2" padding="md">
124
+ chart-2
125
+ </Box>
120
126
  </Box>
121
127
  );
122
128
  };