[DS 2.0] Drop the warning and ghost-warning Button variants

.changeset/button-drop-warning.md

@@ -0,0 +1,10 @@
+---
+'@workflowbuilder/ui': major
+---
+
+`Button` no longer offers the `warning` and `ghost-warning` variants; `BUTTON_VARIANTS` and the `ButtonVariant` type shrink accordingly, and the `--wb-public-button-warning-*` and `--wb-public-button-ghost-warning-*` custom properties are gone. A warning `Snackbar` renders its action button as `secondary`.
+
+Breaking changes:
+
+- Replace `variant="warning"` with `critical` for destructive actions or `secondary` for cautionary secondary actions; replace `ghost-warning` with `ghost-critical` or `ghost-secondary`.
+- Drop any overrides of the removed `--wb-public-button-warning-*` and `--wb-public-button-ghost-warning-*` properties.

.changeset/import-modal-secondary.md

@@ -0,0 +1,5 @@
+---
+'@workflowbuilder/sdk': patch
+---
+
+The import dialog's "Ignore and import" action uses the `secondary` button variant instead of the removed `warning` variant.

apps/docs/src/components/ui-examples/button.tsx

@@ -5,14 +5,8 @@ import styles from './button.module.css';
 
 import { ComponentPreview } from './component-preview';
 
-const SOLID_VARIANTS = ['primary', 'secondary', 'critical', 'success', 'warning'] as const;
-const GHOST_VARIANTS = [
-  'ghost-primary',
-  'ghost-secondary',
-  'ghost-critical',
-  'ghost-success',
-  'ghost-warning',
-] as const;
+const SOLID_VARIANTS = ['primary', 'secondary', 'critical', 'success'] as const;
+const GHOST_VARIANTS = ['ghost-primary', 'ghost-secondary', 'ghost-critical', 'ghost-success'] as const;
 
 export function ButtonExample() {
   return (

packages/sdk/src/features/integration/components/import-export/import-modal/import-modal.tsx

@@ -70,7 +70,7 @@ export function ImportModal() {
       <div className={styles['actions']}>
         {warnings.length > 0 && errors.length === 0 && (
           <Button
-            variant="warning"
+            variant="secondary"
             prefixIcon={<Icon name="DownloadSimple" />}
             onClick={() => handleImport({ shouldIgnoreWarnings: true })}
           >

packages/ui/src/components/button/regular-button/types.ts

@@ -7,12 +7,10 @@ export const BUTTON_VARIANTS = [
   'secondary',
   'critical',
   'success',
-  'warning',
   'ghost-primary',
   'ghost-secondary',
   'ghost-critical',
   'ghost-success',
-  'ghost-warning',
 ] as const;
 
 export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];

packages/ui/src/components/button/styles/variant.module.css

@@ -33,14 +33,6 @@
   --wb-public-button-success-color: var(--wb-ds-ui-text-onaccent-default);
   --wb-public-button-success-color-disabled: var(--wb-ds-ui-text-disabled);
 
-  --wb-public-button-warning-background: var(--wb-ds-components-button-solid-warning-default);
-  --wb-public-button-warning-background-hover: var(--wb-ds-components-button-solid-warning-hover);
-  --wb-public-button-warning-background-active: var(--wb-ds-components-button-solid-warning-active);
-  --wb-public-button-warning-background-focus: var(--wb-ds-components-button-solid-warning-focus);
-  --wb-public-button-warning-background-disabled: var(--wb-ds-components-button-solid-disabled);
-  --wb-public-button-warning-color: var(--wb-ds-ui-text-onaccent-default);
-  --wb-public-button-warning-color-disabled: var(--wb-ds-ui-text-disabled);
-
   --wb-public-button-ghost-primary-background-color: var(--wb-ds-components-button-ghost-primary-default);
   --wb-public-button-ghost-primary-background-color-hover: var(--wb-ds-components-button-ghost-primary-hover);
   --wb-public-button-ghost-primary-background-color-active: var(--wb-ds-components-button-ghost-primary-active);
@@ -80,15 +72,6 @@
   --wb-public-button-ghost-success-border-color: var(--wb-ds-components-button-ghost-success-stroke-default);
   --wb-public-button-ghost-success-color: var(--wb-ds-ui-text-success-default);
   --wb-public-button-ghost-success-color-disabled: var(--wb-ds-ui-text-success-disabled);
-
-  --wb-public-button-ghost-warning-background-color: var(--wb-ds-components-button-ghost-warning-default);
-  --wb-public-button-ghost-warning-background-color-hover: var(--wb-ds-components-button-ghost-warning-hover);
-  --wb-public-button-ghost-warning-background-color-active: var(--wb-ds-components-button-ghost-warning-active);
-  --wb-public-button-ghost-warning-background-color-focus: var(--wb-ds-components-button-ghost-warning-focus);
-  --wb-public-button-ghost-warning-background-color-disabled: var(--wb-ds-components-button-ghost-warning-disabled);
-  --wb-public-button-ghost-warning-border-color: var(--wb-ds-components-button-ghost-warning-stroke-default);
-  --wb-public-button-ghost-warning-color: var(--wb-ds-ui-text-warning-default);
-  --wb-public-button-ghost-warning-color-disabled: var(--wb-ds-ui-text-warning-disabled);
 }
 
 @layer ui.component {
@@ -132,21 +115,10 @@
     --button-color-disabled: var(--wb-public-button-success-color-disabled);
   }
 
-  .warning {
-    --button-background: var(--wb-public-button-warning-background);
-    --button-background-hover: var(--wb-public-button-warning-background-hover);
-    --button-background-active: var(--wb-public-button-warning-background-active);
-    --button-background-focus: var(--wb-public-button-warning-background-focus);
-    --button-background-disabled: var(--wb-public-button-warning-background-disabled);
-    --button-color: var(--wb-public-button-warning-color);
-    --button-color-disabled: var(--wb-public-button-warning-color-disabled);
-  }
-
   .primary,
   .secondary,
   .critical,
-  .success,
-  .warning {
+  .success {
     background-color: var(--button-background);
     color: var(--button-color);
 
@@ -228,26 +200,10 @@
     --button-color-disabled: var(--wb-public-button-ghost-success-color-disabled);
   }
 
-  .ghost-warning {
-    --button-background: var(--wb-public-button-ghost-warning-background-color);
-    --button-background-hover: var(--wb-public-button-ghost-warning-background-color-hover);
-    --button-background-active: var(--wb-public-button-ghost-warning-background-color-active);
-    --button-background-focus: var(--wb-public-button-ghost-warning-background-color-focus);
-    --button-background-disabled: var(--wb-public-button-ghost-warning-background-color-disabled);
-    --button-border-color: var(--wb-public-button-ghost-warning-border-color);
-    --button-border-color-hover: var(--wb-public-button-ghost-warning-border-color);
-    --button-border-color-active: var(--wb-public-button-ghost-warning-border-color);
-    --button-border-color-focus: var(--wb-public-button-ghost-warning-border-color);
-    --button-border-color-disabled: var(--wb-public-button-ghost-warning-border-color);
-    --button-color: var(--wb-public-button-ghost-warning-color);
-    --button-color-disabled: var(--wb-public-button-ghost-warning-color-disabled);
-  }
-
   .ghost-primary,
   .ghost-secondary,
   .ghost-critical,
-  .ghost-success,
-  .ghost-warning {
+  .ghost-success {
     --button-border-color-current: var(--button-border-color);
 
     background-color: var(--button-background);

packages/ui/src/components/snackbar/components/action-buttons.tsx

@@ -20,7 +20,7 @@ export function ActionButtons({ variant, buttonLabel, onButtonClick, close, onCl
     [SnackbarType.DEFAULT]: 'primary',
     [SnackbarType.ERROR]: 'critical',
     [SnackbarType.INFO]: 'primary',
-    [SnackbarType.WARNING]: 'warning',
+    [SnackbarType.WARNING]: 'secondary',
     [SnackbarType.SUCCESS]: 'success',
   };