@hyphen/hyphen-components 2.16.3 → 2.17.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 (4) hide show
  1. package/dist/css/utilities.css +19 -1
  2. package/dist/css/variables.css +5 -2
  3. package/dist/lib/tokens.d.ts +1 -1
  4. package/package.json +2 -2
package/dist/css/utilities.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \***************************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Mon, 07 Oct 2024 22:20:41 GMT
6
+ * Generated on Fri, 11 Oct 2024 15:47:07 GMT
7
7
  */
8
8
 
9
9
  .font-family-monospace { font-family: var(--assets-font-family-monospace); }
@@ -168,18 +168,36 @@
168
168
 
169
169
  .focus\:background-color-brand-gradient:focus { background: var(--color-background-brand-gradient); }
170
170
 
171
+ .background-color-brand-gradient-reverse { background: var(--color-background-brand-gradient-reverse); }
172
+
173
+ .hover\:background-color-brand-gradient-reverse:hover { background: var(--color-background-brand-gradient-reverse); }
174
+
175
+ .focus\:background-color-brand-gradient-reverse:focus { background: var(--color-background-brand-gradient-reverse); }
176
+
171
177
  .background-color-brand-gradient-purple { background: var(--color-background-brand-gradient-purple); }
172
178
 
173
179
  .hover\:background-color-brand-gradient-purple:hover { background: var(--color-background-brand-gradient-purple); }
174
180
 
175
181
  .focus\:background-color-brand-gradient-purple:focus { background: var(--color-background-brand-gradient-purple); }
176
182
 
183
+ .background-color-brand-gradient-purple-reverse { background: var(--color-background-brand-gradient-purple-reverse); }
184
+
185
+ .hover\:background-color-brand-gradient-purple-reverse:hover { background: var(--color-background-brand-gradient-purple-reverse); }
186
+
187
+ .focus\:background-color-brand-gradient-purple-reverse:focus { background: var(--color-background-brand-gradient-purple-reverse); }
188
+
177
189
  .background-color-brand-gradient-cyan { background: var(--color-background-brand-gradient-cyan); }
178
190
 
179
191
  .hover\:background-color-brand-gradient-cyan:hover { background: var(--color-background-brand-gradient-cyan); }
180
192
 
181
193
  .focus\:background-color-brand-gradient-cyan:focus { background: var(--color-background-brand-gradient-cyan); }
182
194
 
195
+ .background-color-brand-gradient-cyan-reverse { background: var(--color-background-brand-gradient-cyan-reverse); }
196
+
197
+ .hover\:background-color-brand-gradient-cyan-reverse:hover { background: var(--color-background-brand-gradient-cyan-reverse); }
198
+
199
+ .focus\:background-color-brand-gradient-cyan-reverse:focus { background: var(--color-background-brand-gradient-cyan-reverse); }
200
+
183
201
  .background-color-brand-yellow { background: var(--color-background-brand-yellow); }
184
202
 
185
203
  .hover\:background-color-brand-yellow:hover { background: var(--color-background-brand-yellow); }
package/dist/css/variables.css CHANGED
@@ -3,7 +3,7 @@
3
3
  \*********************************************************************************************************************/
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Mon, 07 Oct 2024 22:20:41 GMT
6
+ * Generated on Fri, 11 Oct 2024 15:47:07 GMT
7
7
  */
8
8
 
9
9
  :root {
@@ -36,8 +36,11 @@
36
36
  --color-background-toast: #262626;
37
37
  --color-background-toast-error: #ef4444;
38
38
  --color-background-brand-gradient: linear-gradient(60deg, #eab308 0%, #fa0a64 100%);
39
+ --color-background-brand-gradient-reverse: linear-gradient(270deg, #eab308 0%, #fa0a64 100%);
39
40
  --color-background-brand-gradient-purple: linear-gradient(60deg, #b47dff 0%, #4b32aa 100%);
41
+ --color-background-brand-gradient-purple-reverse: linear-gradient(270deg, #b47dff 0%, #4b32aa 100%);
40
42
  --color-background-brand-gradient-cyan: linear-gradient(60deg, #00b4ff 0%, #dc50ff 100%);
43
+ --color-background-brand-gradient-cyan-reverse: linear-gradient(270deg, #00b4ff 0%, #dc50ff 100%);
41
44
  --color-background-brand-yellow: #ffd200;
42
45
  --color-background-brand-orange: #ff911e;
43
46
  --color-background-brand-magenta: #ff3278;
@@ -308,7 +311,7 @@
308
311
  \*******************************************************************************************************************************/
309
312
  /**
310
313
  * Do not edit directly
311
- * Generated on Mon, 07 Oct 2024 22:20:41 GMT
314
+ * Generated on Fri, 11 Oct 2024 15:47:07 GMT
312
315
  */
313
316
 
314
317
  :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" | "grey" | "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" | "disabled" | "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" | "chart-3")[];
10
+ export declare const BACKGROUND_COLOR_OPTIONS: ("info" | "white" | "primary" | "secondary" | "tertiary" | "inverse" | "disabled" | "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-reverse" | "brand-gradient-purple" | "brand-gradient-purple-reverse" | "brand-gradient-cyan" | "brand-gradient-cyan-reverse" | "chart-1" | "chart-2" | "chart-3")[];
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" | "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")[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hyphen/hyphen-components",
3
- "version": "2.16.3",
3
+ "version": "2.17.0",
4
4
  "license": "MIT",
5
5
  "author": {
6
6
  "name": "@hyphen"
@@ -119,7 +119,7 @@
119
119
  "@rollup/rollup-linux-x64-gnu": "^4.21.2"
120
120
  },
121
121
  "dependencies": {
122
- "@hyphen/hyphen-design-tokens": "^4.10.0",
122
+ "@hyphen/hyphen-design-tokens": "^4.11.0",
123
123
  "@popperjs/core": "^2.11.8",
124
124
  "@types/react-modal": "^3.16.3",
125
125
  "classnames": "^2.5.1",