diff --git a/packages/demo/src/components/demo/dropdown-menu.tsx b/packages/demo/src/components/demo/dropdown-menu.tsx
index 4e005dc..d53718c 100644
--- a/packages/demo/src/components/demo/dropdown-menu.tsx
+++ b/packages/demo/src/components/demo/dropdown-menu.tsx
@@ -47,6 +47,7 @@ export const DropdownMenuDemo = ({
}: {
variant?:
| "default"
+ | "item-variants"
| "with-separators"
| "with-checkboxes"
| "with-radio"
@@ -92,6 +93,31 @@ export const DropdownMenuDemo = ({
);
}
+ if (variant === "item-variants") {
+ return (
+
+
+
+
+ Manage Deployment
+
+
+
+ View logs
+ Duplicate
+
+ Roll back to previous release
+
+
+ Delete deployment
+
+
+
+
+ );
+ }
+
if (variant === "with-separators") {
return (
diff --git a/packages/demo/src/content/components/button.mdx b/packages/demo/src/content/components/button.mdx
index 8cff569..453d1f1 100644
--- a/packages/demo/src/content/components/button.mdx
+++ b/packages/demo/src/content/components/button.mdx
@@ -106,6 +106,25 @@ Use the `danger` variant For destructive actions like delete or remove.
}
+### Warning
+
+Use the `warning` variant for actions the user should pause over but that are not destructive, such as archiving something that can be restored later. Reserve `danger` for actions that cannot be undone.
+
+{
+
+
+
+ Warning LG
+
+
+ Warning MD
+
+
+ Warning SM
+
+
+}
+
### Link
Use the `link` variant for buttons that should be styled as a link but with button semantics.
@@ -243,15 +262,15 @@ Buttons tagged with the `disabled` property are non-interactive and visually mut
## Props
-| Name | Description | Type | Default | Required |
-| ---------- | ------------------------------------------------ | ------------------------------------------------------------------ | --------- | -------- |
-| `variant` | The visual style of the button | `primary`, `secondary`, `tertiary`, `danger`, `link`, `navigation` | `primary` | ❌ |
-| `size` | The size of the button | `sm`, `md`, `lg` | `md` | ❌ |
-| `prefix` | Content to display before the button label | `ReactNode` | - | ❌ |
-| `suffix` | Content to display after the button label | `ReactNode` | - | ❌ |
-| `href` | URL for link buttons (renders as anchor element) | `string` | - | ❌ |
-| `target` | Link target (when href is provided) | `string` | - | ❌ |
-| `rel` | Link rel attribute (when href is provided) | `string` | - | ❌ |
-| `download` | Makes link downloadable (when href is provided) | `string`, `boolean` | - | ❌ |
-| `asChild` | Merge props onto child element | `boolean` | `false` | ❌ |
-| `disabled` | Disables the button | `boolean` | `false` | ❌ |
+| Name | Description | Type | Default | Required |
+| ---------- | ------------------------------------------------ | ----------------------------------------------------------------------------- | --------- | -------- |
+| `variant` | The visual style of the button | `primary`, `secondary`, `tertiary`, `danger`, `warning`, `link`, `navigation` | `primary` | ❌ |
+| `size` | The size of the button | `sm`, `md`, `lg` | `md` | ❌ |
+| `prefix` | Content to display before the button label | `ReactNode` | - | ❌ |
+| `suffix` | Content to display after the button label | `ReactNode` | - | ❌ |
+| `href` | URL for link buttons (renders as anchor element) | `string` | - | ❌ |
+| `target` | Link target (when href is provided) | `string` | - | ❌ |
+| `rel` | Link rel attribute (when href is provided) | `string` | - | ❌ |
+| `download` | Makes link downloadable (when href is provided) | `string`, `boolean` | - | ❌ |
+| `asChild` | Merge props onto child element | `boolean` | `false` | ❌ |
+| `disabled` | Disables the button | `boolean` | `false` | ❌ |
diff --git a/packages/demo/src/content/components/dropdown-menu.mdx b/packages/demo/src/content/components/dropdown-menu.mdx
index 328a324..899a2fa 100644
--- a/packages/demo/src/content/components/dropdown-menu.mdx
+++ b/packages/demo/src/content/components/dropdown-menu.mdx
@@ -44,6 +44,26 @@ Basic usage:
## Variants
+### Item Variants
+
+`DropdownMenuItem` takes a `variant` to mark an action's weight. Use `danger` for destructive or irreversible actions, and `warning` for actions that are consequential but recoverable — something the user should pause over rather than avoid. Leave everything else `neutral`.
+
+Colour alone shouldn't carry the meaning, so keep the label explicit about what the action does.
+
+
+ View logs
+ Duplicate
+
+ Roll back to previous release
+
+ Delete deployment
+
+```
+
### With Separators and Labels
Use `DropdownMenuLabel` to title a section and `DropdownMenuSeparator` to divide groups of items. Items accept icons as children alongside a `` label.
@@ -321,13 +341,13 @@ Flattening only works when `DropdownMenuSubContent` is placed directly inside `D
### DropdownMenuItem
-| Name | Description | Type | Default | Required |
-| ----------- | ---------------------------------------------------------------------- | ------------------- | --------- | -------- |
-| `variant` | Visual style; `danger` marks a destructive action | `neutral`, `danger` | `neutral` | ❌ |
-| `inset` | Adds left padding to align with items that have icons | `boolean` | `false` | ❌ |
-| `disabled` | Prevents interaction and dims the item | `boolean` | `false` | ❌ |
-| `textValue` | Text used for search filtering; falls back to the item's rendered text | `string` | - | ❌ |
-| `onSelect` | Called when the item is selected | `() => void` | - | ❌ |
+| Name | Description | Type | Default | Required |
+| ----------- | -------------------------------------------------------------------------------- | ------------------------------ | --------- | -------- |
+| `variant` | Visual style; `warning` marks a consequential action, `danger` a destructive one | `neutral`, `warning`, `danger` | `neutral` | ❌ |
+| `inset` | Adds left padding to align with items that have icons | `boolean` | `false` | ❌ |
+| `disabled` | Prevents interaction and dims the item | `boolean` | `false` | ❌ |
+| `textValue` | Text used for search filtering; falls back to the item's rendered text | `string` | - | ❌ |
+| `onSelect` | Called when the item is selected | `() => void` | - | ❌ |
### DropdownMenuCheckboxItem
diff --git a/packages/tokens/equality-tokens.json b/packages/tokens/equality-tokens.json
index c53a2d7..7f6bfbd 100644
--- a/packages/tokens/equality-tokens.json
+++ b/packages/tokens/equality-tokens.json
@@ -389,8 +389,8 @@
"$type": "color",
"$value": {
"colorSpace": "display-p3",
- "components": [0.8114, 0.4167, 0.3761],
- "hex": "#CF6A60"
+ "components": [0.7365, 0.2216, 0.2026],
+ "hex": "#BC3934"
}
}
},
@@ -399,16 +399,16 @@
"$type": "color",
"$value": {
"colorSpace": "display-p3",
- "components": [0.6266, 0.4562, 0.8302],
- "hex": "#A074D4"
+ "components": [0.5242, 0.2903, 0.7705],
+ "hex": "#864AC4"
}
},
"fill": {
"$type": "color",
"$value": {
"colorSpace": "display-p3",
- "components": [0.6266, 0.4562, 0.8302],
- "hex": "#A074D4"
+ "components": [0.5242, 0.2903, 0.7705],
+ "hex": "#864AC4"
}
}
},
@@ -463,6 +463,24 @@
"hex": "#FFFFFF"
}
}
+ },
+ "warning": {
+ "border": {
+ "$type": "color",
+ "$value": {
+ "colorSpace": "display-p3",
+ "components": [0.8263, 0.6154, 0.2247],
+ "hex": "#D39D39"
+ }
+ },
+ "fill": {
+ "$type": "color",
+ "$value": {
+ "colorSpace": "display-p3",
+ "components": [0.8263, 0.6154, 0.2247],
+ "hex": "#D39D39"
+ }
+ }
}
},
"card": {
@@ -915,6 +933,14 @@
"components": [0.5021, 0.5021, 0.5021],
"hex": "#808080"
}
+ },
+ "warning": {
+ "$type": "color",
+ "$value": {
+ "colorSpace": "display-p3",
+ "components": [0.863, 0.6958, 0.4108],
+ "hex": "#DCB169"
+ }
}
}
}
@@ -1597,6 +1623,32 @@
"hex": "#000000"
}
}
+ },
+ "warning": {
+ "border": {
+ "$type": "color",
+ "$value": {
+ "colorSpace": "display-p3",
+ "components": [0.6345, 0.463, 0.1863],
+ "hex": "#A27630"
+ }
+ },
+ "fill": {
+ "$type": "color",
+ "$value": {
+ "colorSpace": "display-p3",
+ "components": [0.8263, 0.6154, 0.2247],
+ "hex": "#D39D39"
+ }
+ },
+ "text": {
+ "$type": "color",
+ "$value": {
+ "colorSpace": "display-p3",
+ "components": [1, 1, 1],
+ "hex": "#FFFFFF"
+ }
+ }
}
},
"card": {
@@ -2973,6 +3025,14 @@
"components": [0.5021, 0.5021, 0.5021],
"hex": "#808080"
}
+ },
+ "warning": {
+ "$type": "color",
+ "$value": {
+ "colorSpace": "display-p3",
+ "components": [0.8263, 0.6154, 0.2247],
+ "hex": "#D39D39"
+ }
}
},
"white": {
diff --git a/packages/tokens/equality-tokens.pinwheel b/packages/tokens/equality-tokens.pinwheel
index 1eb2070..e7ddc1b 100644
--- a/packages/tokens/equality-tokens.pinwheel
+++ b/packages/tokens/equality-tokens.pinwheel
@@ -2478,6 +2478,7 @@
792303FE-20DD-4519-88B7-A3D74D43A65A
Button
+ 1
1
AB837834-B6A2-4B55-BB11-D3A5D13EEE41
@@ -2492,7 +2493,7 @@
68A1562E-D9B7-40A5-BFB2-31353FD45D3D
4
68A1562E-D9B7-40A5-BFB2-31353FD45D3D
- 3
+ 4
86B9D7D8-F74A-4CAE-B006-65451BBEDAB9
@@ -2503,7 +2504,7 @@
68A1562E-D9B7-40A5-BFB2-31353FD45D3D
4
68A1562E-D9B7-40A5-BFB2-31353FD45D3D
- 3
+ 4
86B9D7D8-F74A-4CAE-B006-65451BBEDAB9
@@ -2585,6 +2586,7 @@
65EF707B-201E-41DA-9727-B23B74706082
Danger
+ 1
1
Fill
@@ -2594,7 +2596,7 @@
CCD80E1D-24ED-4193-A845-891C968555AF
4
CCD80E1D-24ED-4193-A845-891C968555AF
- 3
+ 4
86B9D7D8-F74A-4CAE-B006-65451BBEDAB9
@@ -2615,6 +2617,40 @@
86B9D7D8-F74A-4CAE-B006-65451BBEDAB9
+
+ 5A31F3CF-7D77-4209-8306-BE84DCD28B3C
+ Warning
+ 1
+ 1
+
+ Fill
+ 3
+ 3
+ lightanddark
+ BB783E8C-1914-4094-BE1D-37E41EB42641
+ 4
+ BB783E8C-1914-4094-BE1D-37E41EB42641
+ 4
+ 86B9D7D8-F74A-4CAE-B006-65451BBEDAB9
+
+
+ Border
+ 3
+ 3
+ lightanddark
+ BB783E8C-1914-4094-BE1D-37E41EB42641
+ 5
+ BB783E8C-1914-4094-BE1D-37E41EB42641
+ 4
+ 86B9D7D8-F74A-4CAE-B006-65451BBEDAB9
+
+
+ Text
+ 1
+ 9FC81FBB-965B-40C5-A7D2-A5F365863FE4
+ 86B9D7D8-F74A-4CAE-B006-65451BBEDAB9
+
+
4EC67953-4547-4883-B947-D73CF2D3DF18
@@ -2674,6 +2710,17 @@
3
86B9D7D8-F74A-4CAE-B006-65451BBEDAB9
+
+ Warning
+ 3
+ 3
+ lightanddark
+ BB783E8C-1914-4094-BE1D-37E41EB42641
+ 4
+ BB783E8C-1914-4094-BE1D-37E41EB42641
+ 3
+ 86B9D7D8-F74A-4CAE-B006-65451BBEDAB9
+
635BED27-D972-4FC5-BD7E-AE05C08B92FD
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 2cab3f6..2d933c0 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -2,7 +2,7 @@
"name": "@eqtylab/equality",
"description": "EQTYLab's component and token-based design system",
"homepage": "https://equality.eqtylab.io/",
- "version": "3.2.6",
+ "version": "3.3.0",
"license": "Apache-2.0",
"keywords": [
"component library",
diff --git a/packages/ui/src/components/button/button.module.css b/packages/ui/src/components/button/button.module.css
index a8e2b95..264b636 100644
--- a/packages/ui/src/components/button/button.module.css
+++ b/packages/ui/src/components/button/button.module.css
@@ -29,6 +29,16 @@
@apply hover:not-disabled:bg-mixed-dark;
}
+/* Yellow is too light to carry white text, so this is the one filled variant with dark text */
+.button--warning {
+ --mix-color: var(--color-button-warning-fill);
+ @apply bg-(--mix-color);
+ @apply border-button-warning-border border;
+ @apply text-button-warning-text;
+ @apply no-underline;
+ @apply hover:not-disabled:bg-mixed-dark;
+}
+
.button--secondary {
--mix-color: var(--color-button-secondary-fill);
@apply bg-(--mix-color);
diff --git a/packages/ui/src/components/button/button.tsx b/packages/ui/src/components/button/button.tsx
index 9f6e89a..9b99ccb 100644
--- a/packages/ui/src/components/button/button.tsx
+++ b/packages/ui/src/components/button/button.tsx
@@ -10,6 +10,7 @@ const buttonVariants = cva(styles['button'], {
variant: {
primary: styles['button--primary'],
danger: styles['button--danger'],
+ warning: styles['button--warning'],
secondary: styles['button--secondary'],
tertiary: styles['button--tertiary'],
link: styles['button--link'],
diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css b/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css
index 86b3064..5742e61 100644
--- a/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css
+++ b/packages/ui/src/components/dropdown-menu/dropdown-menu.module.css
@@ -38,6 +38,18 @@
@apply dark:hover:not-disabled:text-red-200! dark:focus:text-red-200!;
}
+/* Text/Warning is Yellow 500, which reads 2.4:1 on the light overlay - under the 4.5:1
+ text threshold - so light steps down to Yellow 700 (7.0:1). Dark keeps the token, which
+ resolves to Yellow 400 and already clears the dark overlay at 8.5:1. */
+.dropdown-menu-item-warning {
+ @apply text-yellow-700!;
+ @apply dark:text-text-warning!;
+ @apply hover:not-disabled:text-yellow-800! focus:text-yellow-800!;
+ @apply hover:not-disabled:bg-yellow-300/50! focus:bg-yellow-300/50!;
+ @apply dark:hover:not-disabled:bg-yellow-600/50! dark:focus:bg-yellow-600/50!;
+ @apply dark:hover:not-disabled:text-yellow-200! dark:focus:text-yellow-200!;
+}
+
.dropdown-menu-item-indicator-checkbox,
.dropdown-menu-item-indicator-radio {
@apply absolute left-2 size-3.5;
diff --git a/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx b/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
index 457d365..c134950 100644
--- a/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
+++ b/packages/ui/src/components/dropdown-menu/dropdown-menu.tsx
@@ -620,7 +620,7 @@ const DropdownMenuItem = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef & {
inset?: boolean;
- variant?: 'neutral' | 'danger';
+ variant?: 'neutral' | 'warning' | 'danger';
}
>(({ className, inset, variant = 'neutral', textValue, children, ...props }, ref) => {
const visible = useFilterableItem(textValue, children);
@@ -633,6 +633,7 @@ const DropdownMenuItem = React.forwardRef<
className={cn(
styles['dropdown-menu-item'],
inset && styles['dropdown-menu-inset'],
+ variant === 'warning' && styles['dropdown-menu-item-warning'],
variant === 'danger' && styles['dropdown-menu-item-danger'],
className
)}
diff --git a/packages/ui/src/theme/generated/color-vars.css b/packages/ui/src/theme/generated/color-vars.css
index 8d38a97..124531d 100644
--- a/packages/ui/src/theme/generated/color-vars.css
+++ b/packages/ui/src/theme/generated/color-vars.css
@@ -82,6 +82,9 @@
--color-button-tertiary-border: color(display-p3 0.7432 0.7432 0.7432);
--color-button-tertiary-fill: color(display-p3 1 1 1);
--color-button-tertiary-text: color(display-p3 0 0 0);
+ --color-button-warning-border: color(display-p3 0.6345 0.463 0.1863);
+ --color-button-warning-fill: color(display-p3 0.8263 0.6154 0.2247);
+ --color-button-warning-text: color(display-p3 1 1 1);
--color-card-background: color(display-p3 1 1 1);
--color-card-border: color(display-p3 0.8698 0.8698 0.8698);
--color-cyan-100: color(display-p3 0.8736 0.9466 0.9942);
@@ -250,6 +253,7 @@
--color-text-primary: color(display-p3 0 0 0);
--color-text-secondary: color(display-p3 0.1792 0.1792 0.1792);
--color-text-tertiary: color(display-p3 0.5021 0.5021 0.5021);
+ --color-text-warning: color(display-p3 0.8263 0.6154 0.2247);
--color-white: color(display-p3 1 1 1);
--color-yellow-100: color(display-p3 0.966 0.9299 0.8701);
--color-yellow-200: color(display-p3 0.9327 0.8528 0.7204);
@@ -309,15 +313,17 @@
--dark-color-border-top: color(display-p3 0.3328 0.3328 0.3426);
--dark-color-border: color(display-p3 0.1792 0.1792 0.1792);
--dark-color-button-danger-border: color(display-p3 0.7365 0.2216 0.2026);
- --dark-color-button-danger-fill: color(display-p3 0.8114 0.4167 0.3761);
- --dark-color-button-primary-border: color(display-p3 0.6266 0.4562 0.8302);
- --dark-color-button-primary-fill: color(display-p3 0.6266 0.4562 0.8302);
+ --dark-color-button-danger-fill: color(display-p3 0.7365 0.2216 0.2026);
+ --dark-color-button-primary-border: color(display-p3 0.5242 0.2903 0.7705);
+ --dark-color-button-primary-fill: color(display-p3 0.5242 0.2903 0.7705);
--dark-color-button-secondary-border: color(display-p3 1 1 1);
--dark-color-button-secondary-fill: color(display-p3 1 1 1);
--dark-color-button-secondary-text: color(display-p3 0 0 0);
--dark-color-button-tertiary-border: color(display-p3 0.2806 0.2806 0.2806);
--dark-color-button-tertiary-fill: color(display-p3 0 0 0);
--dark-color-button-tertiary-text: color(display-p3 1 1 1);
+ --dark-color-button-warning-border: color(display-p3 0.8263 0.6154 0.2247);
+ --dark-color-button-warning-fill: color(display-p3 0.8263 0.6154 0.2247);
--dark-color-card-background: color(display-p3 0.0861 0.0861 0.0861);
--dark-color-card-border: color(display-p3 0.1792 0.1792 0.1792);
--dark-color-focus-ring: color(display-p3 0.7319 0.6108 0.8873);
@@ -373,4 +379,5 @@
--dark-color-text-primary: color(display-p3 1 1 1);
--dark-color-text-secondary: color(display-p3 0.7432 0.7432 0.7432);
--dark-color-text-tertiary: color(display-p3 0.5021 0.5021 0.5021);
+ --dark-color-text-warning: color(display-p3 0.863 0.6958 0.4108);
}
diff --git a/packages/ui/src/theme/generated/dark-tokens.css b/packages/ui/src/theme/generated/dark-tokens.css
index 763778b..ee36211 100644
--- a/packages/ui/src/theme/generated/dark-tokens.css
+++ b/packages/ui/src/theme/generated/dark-tokens.css
@@ -47,15 +47,17 @@
--color-border-top: color(display-p3 0.3328 0.3328 0.3426);
--color-border: color(display-p3 0.1792 0.1792 0.1792);
--color-button-danger-border: color(display-p3 0.7365 0.2216 0.2026);
- --color-button-danger-fill: color(display-p3 0.8114 0.4167 0.3761);
- --color-button-primary-border: color(display-p3 0.6266 0.4562 0.8302);
- --color-button-primary-fill: color(display-p3 0.6266 0.4562 0.8302);
+ --color-button-danger-fill: color(display-p3 0.7365 0.2216 0.2026);
+ --color-button-primary-border: color(display-p3 0.5242 0.2903 0.7705);
+ --color-button-primary-fill: color(display-p3 0.5242 0.2903 0.7705);
--color-button-secondary-border: color(display-p3 1 1 1);
--color-button-secondary-fill: color(display-p3 1 1 1);
--color-button-secondary-text: color(display-p3 0 0 0);
--color-button-tertiary-border: color(display-p3 0.2806 0.2806 0.2806);
--color-button-tertiary-fill: color(display-p3 0 0 0);
--color-button-tertiary-text: color(display-p3 1 1 1);
+ --color-button-warning-border: color(display-p3 0.8263 0.6154 0.2247);
+ --color-button-warning-fill: color(display-p3 0.8263 0.6154 0.2247);
--color-card-background: color(display-p3 0.0861 0.0861 0.0861);
--color-card-border: color(display-p3 0.1792 0.1792 0.1792);
--color-focus-ring: color(display-p3 0.7319 0.6108 0.8873);
@@ -111,4 +113,5 @@
--color-text-primary: color(display-p3 1 1 1);
--color-text-secondary: color(display-p3 0.7432 0.7432 0.7432);
--color-text-tertiary: color(display-p3 0.5021 0.5021 0.5021);
+ --color-text-warning: color(display-p3 0.863 0.6958 0.4108);
}
diff --git a/packages/ui/src/theme/generated/global-dark-tokens.css b/packages/ui/src/theme/generated/global-dark-tokens.css
index 0b46c79..7516c2d 100644
--- a/packages/ui/src/theme/generated/global-dark-tokens.css
+++ b/packages/ui/src/theme/generated/global-dark-tokens.css
@@ -47,15 +47,17 @@ html[data-equality-theme='dark'] {
--color-border-top: color(display-p3 0.3328 0.3328 0.3426);
--color-border: color(display-p3 0.1792 0.1792 0.1792);
--color-button-danger-border: color(display-p3 0.7365 0.2216 0.2026);
- --color-button-danger-fill: color(display-p3 0.8114 0.4167 0.3761);
- --color-button-primary-border: color(display-p3 0.6266 0.4562 0.8302);
- --color-button-primary-fill: color(display-p3 0.6266 0.4562 0.8302);
+ --color-button-danger-fill: color(display-p3 0.7365 0.2216 0.2026);
+ --color-button-primary-border: color(display-p3 0.5242 0.2903 0.7705);
+ --color-button-primary-fill: color(display-p3 0.5242 0.2903 0.7705);
--color-button-secondary-border: color(display-p3 1 1 1);
--color-button-secondary-fill: color(display-p3 1 1 1);
--color-button-secondary-text: color(display-p3 0 0 0);
--color-button-tertiary-border: color(display-p3 0.2806 0.2806 0.2806);
--color-button-tertiary-fill: color(display-p3 0 0 0);
--color-button-tertiary-text: color(display-p3 1 1 1);
+ --color-button-warning-border: color(display-p3 0.8263 0.6154 0.2247);
+ --color-button-warning-fill: color(display-p3 0.8263 0.6154 0.2247);
--color-card-background: color(display-p3 0.0861 0.0861 0.0861);
--color-card-border: color(display-p3 0.1792 0.1792 0.1792);
--color-focus-ring: color(display-p3 0.7319 0.6108 0.8873);
@@ -111,4 +113,5 @@ html[data-equality-theme='dark'] {
--color-text-primary: color(display-p3 1 1 1);
--color-text-secondary: color(display-p3 0.7432 0.7432 0.7432);
--color-text-tertiary: color(display-p3 0.5021 0.5021 0.5021);
+ --color-text-warning: color(display-p3 0.863 0.6958 0.4108);
}
diff --git a/packages/ui/src/theme/generated/global-light-tokens.css b/packages/ui/src/theme/generated/global-light-tokens.css
index 09930ac..d43b026 100644
--- a/packages/ui/src/theme/generated/global-light-tokens.css
+++ b/packages/ui/src/theme/generated/global-light-tokens.css
@@ -86,6 +86,9 @@ html {
--color-button-tertiary-border: color(display-p3 0.7432 0.7432 0.7432);
--color-button-tertiary-fill: color(display-p3 1 1 1);
--color-button-tertiary-text: color(display-p3 0 0 0);
+ --color-button-warning-border: color(display-p3 0.6345 0.463 0.1863);
+ --color-button-warning-fill: color(display-p3 0.8263 0.6154 0.2247);
+ --color-button-warning-text: color(display-p3 1 1 1);
--color-card-background: color(display-p3 1 1 1);
--color-card-border: color(display-p3 0.8698 0.8698 0.8698);
--color-cyan-100: color(display-p3 0.8736 0.9466 0.9942);
@@ -254,6 +257,7 @@ html {
--color-text-primary: color(display-p3 0 0 0);
--color-text-secondary: color(display-p3 0.1792 0.1792 0.1792);
--color-text-tertiary: color(display-p3 0.5021 0.5021 0.5021);
+ --color-text-warning: color(display-p3 0.8263 0.6154 0.2247);
--color-white: color(display-p3 1 1 1);
--color-yellow-100: color(display-p3 0.966 0.9299 0.8701);
--color-yellow-200: color(display-p3 0.9327 0.8528 0.7204);
diff --git a/packages/ui/src/theme/generated/light-tokens.css b/packages/ui/src/theme/generated/light-tokens.css
index 0ce4ba1..cb0a0da 100644
--- a/packages/ui/src/theme/generated/light-tokens.css
+++ b/packages/ui/src/theme/generated/light-tokens.css
@@ -86,6 +86,9 @@
--color-button-tertiary-border: color(display-p3 0.7432 0.7432 0.7432);
--color-button-tertiary-fill: color(display-p3 1 1 1);
--color-button-tertiary-text: color(display-p3 0 0 0);
+ --color-button-warning-border: color(display-p3 0.6345 0.463 0.1863);
+ --color-button-warning-fill: color(display-p3 0.8263 0.6154 0.2247);
+ --color-button-warning-text: color(display-p3 1 1 1);
--color-card-background: color(display-p3 1 1 1);
--color-card-border: color(display-p3 0.8698 0.8698 0.8698);
--color-cyan-100: color(display-p3 0.8736 0.9466 0.9942);
@@ -254,6 +257,7 @@
--color-text-primary: color(display-p3 0 0 0);
--color-text-secondary: color(display-p3 0.1792 0.1792 0.1792);
--color-text-tertiary: color(display-p3 0.5021 0.5021 0.5021);
+ --color-text-warning: color(display-p3 0.8263 0.6154 0.2247);
--color-white: color(display-p3 1 1 1);
--color-yellow-100: color(display-p3 0.966 0.9299 0.8701);
--color-yellow-200: color(display-p3 0.9327 0.8528 0.7204);
diff --git a/packages/ui/src/theme/generated/tailwind-tokens.css b/packages/ui/src/theme/generated/tailwind-tokens.css
index 960ba0b..2eb34f2 100644
--- a/packages/ui/src/theme/generated/tailwind-tokens.css
+++ b/packages/ui/src/theme/generated/tailwind-tokens.css
@@ -86,6 +86,9 @@
--color-button-tertiary-border: color(display-p3 0.7432 0.7432 0.7432);
--color-button-tertiary-fill: color(display-p3 1 1 1);
--color-button-tertiary-text: color(display-p3 0 0 0);
+ --color-button-warning-border: color(display-p3 0.6345 0.463 0.1863);
+ --color-button-warning-fill: color(display-p3 0.8263 0.6154 0.2247);
+ --color-button-warning-text: color(display-p3 1 1 1);
--color-card-background: color(display-p3 1 1 1);
--color-card-border: color(display-p3 0.8698 0.8698 0.8698);
--color-cyan-100: color(display-p3 0.8736 0.9466 0.9942);
@@ -254,6 +257,7 @@
--color-text-primary: color(display-p3 0 0 0);
--color-text-secondary: color(display-p3 0.1792 0.1792 0.1792);
--color-text-tertiary: color(display-p3 0.5021 0.5021 0.5021);
+ --color-text-warning: color(display-p3 0.8263 0.6154 0.2247);
--color-white: color(display-p3 1 1 1);
--color-yellow-100: color(display-p3 0.966 0.9299 0.8701);
--color-yellow-200: color(display-p3 0.9327 0.8528 0.7204);