@dmsi/wedgekit-react 0.0.2

package/src/components/Swatch.tsx

@@ -0,0 +1,1066 @@
+import { PropsWithChildren } from "react";
+import { Display1, Display2 } from "./Display";
+import { Stack } from "./Stack";
+import clsx from "clsx";
+import { typography } from "../classNames";
+import { Paragraph } from "./Paragraph";
+import { Heading2, Heading3 } from "./Heading";
+
+type SwatchProps = PropsWithChildren<{
+  className: string;
+  colorName: string;
+  colorHex: string;
+}>;
+
+export const Swatch = ({ className, colorName, colorHex }: SwatchProps) => {
+  return (
+    <div className="flex flex-col gap-desktop-layout-padding">
+      <div
+        className={`w-25 h-18 rounded-xl border border-solid border-border-primary-normal ${className}`}
+      ></div>
+      <div className="w-full flex flex-col text-center text-label gap-desktop-component-gap">
+        <span className={clsx(typography.paragraph)}>{colorName}</span>
+        <span
+          className={clsx(
+            typography.caption,
+            "text-text-secondary-normal uppercase",
+          )}
+        >
+          {colorHex}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export const Swatches = () => {
+  return (
+    <Stack elevation={0} items="start" justify="start" sizing="container">
+      <Display1>Color Primitives</Display1>
+
+      <Display1>Branded Colors</Display1>
+      <Paragraph>
+        As different customers with their own brands become more integrated with
+        the Millwork eCatalog, we want to be able to offer some customization of
+        the UI to align with their branding. There can be different palettes
+        swapped out depending on brand, but these are the color variables that
+        get defined by a specific hex value and may use seperate light and dark
+        palettes.
+      </Paragraph>
+      <Heading3>Brand</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-brand-500"
+          colorName="Brand-500"
+          colorHex="#9e3004"
+        />
+        <Swatch
+          className="bg-brand-400"
+          colorName="Brand-400"
+          colorHex="#df4405"
+        />
+        <Swatch
+          className="bg-brand-300"
+          colorName="Brand-300"
+          colorHex="#e56937"
+        />
+        <Swatch
+          className="bg-brand-200"
+          colorName="Brand-200"
+          colorHex="#f0a98c"
+        />
+        <Swatch
+          className="bg-brand-100"
+          colorName="Brand-100"
+          colorHex="#fcece6"
+        />
+      </div>
+
+      <Heading3>Action</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-action-500"
+          colorName="Action-500"
+          colorHex="#00365a"
+        />
+        <Swatch
+          className="bg-action-400"
+          colorName="Action-400"
+          colorHex="#0077c8"
+        />
+        <Swatch
+          className="bg-action-300"
+          colorName="Action-300"
+          colorHex="#459ad4"
+        />
+        <Swatch
+          className="bg-action-200"
+          colorName="Action-200"
+          colorHex="#d0e5f4"
+        />
+        <Swatch
+          className="bg-action-100"
+          colorName="Action-100"
+          colorHex="#e7f2f9"
+        />
+      </div>
+
+      <Heading3>Link</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-link-500"
+          colorName="Link-500"
+          colorHex="#00365a"
+        />
+        <Swatch
+          className="bg-link-400"
+          colorName="Link-400"
+          colorHex="#0077c8"
+        />
+        <Swatch
+          className="bg-link-300"
+          colorName="Link-300"
+          colorHex="#459ad4"
+        />
+        <Swatch
+          className="bg-link-200"
+          colorName="Link-200"
+          colorHex="#d0e5f4"
+        />
+        <Swatch
+          className="bg-link-100"
+          colorName="Link-100"
+          colorHex="#e7f2f9"
+        />
+      </div>
+
+      <Display1> Standard Colors</Display1>
+      <Paragraph>
+        Certain colors should remain constant regardless of branding to help
+        ensure legibility and usability.
+      </Paragraph>
+
+      <Heading3>Neutral</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-neutral-600"
+          colorName="Neutral-600"
+          colorHex="#000000"
+        />
+        <Swatch
+          className="bg-neutral-500"
+          colorName="Neutral-500"
+          colorHex="#1d1e1e"
+        />
+        <Swatch
+          className="bg-neutral-450"
+          colorName="Neutral-450"
+          colorHex="#3a3a3a"
+        />
+        <Swatch
+          className="bg-neutral-400"
+          colorName="Neutral-400"
+          colorHex="#6b6d6d"
+        />
+        <Swatch
+          className="bg-neutral-300"
+          colorName="Neutral-300"
+          colorHex="#c1c1c1"
+        />
+        <Swatch
+          className="bg-neutral-200"
+          colorName="Neutral-200"
+          colorHex="#ebebeb"
+        />
+        <Swatch
+          className="bg-neutral-100"
+          colorName="Neutral-100"
+          colorHex="#f7f7f7"
+        />
+        <Swatch
+          className="bg-neutral-000"
+          colorName="Neutral-000"
+          colorHex="#ffffff"
+        />
+      </div>
+
+      <Heading3> Success</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-success-500"
+          colorName="Success-500"
+          colorHex="#126240"
+        />
+        <Swatch
+          className="bg-success-400"
+          colorName="Success-400"
+          colorHex="#27d68b"
+        />
+        <Swatch
+          className="bg-success-300"
+          colorName="Success-300"
+          colorHex="#61e1aa"
+        />
+        <Swatch
+          className="bg-success-200"
+          colorName="Success-200"
+          colorHex="#d7f7e9"
+        />
+        <Swatch
+          className="bg-success-100"
+          colorName="Success-100"
+          colorHex="#eefbf6"
+        />
+      </div>
+
+      <Heading3> Warning</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-warning-500"
+          colorName="Warning-500"
+          colorHex="#91670c"
+        />
+        <Swatch
+          className="bg-warning-400"
+          colorName="Warning-400"
+          colorHex="#f0a913"
+        />
+        <Swatch
+          className="bg-warning-300"
+          colorName="Warning-300"
+          colorHex="#f4c053"
+        />
+        <Swatch
+          className="bg-warning-200"
+          colorName="Warning-200"
+          colorHex="#f9dfa9"
+        />
+        <Swatch
+          className="bg-warning-100"
+          colorName="Warning-100"
+          colorHex="#fcefd4"
+        />
+      </div>
+
+      <Heading3> Critical</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-critical-500"
+          colorName="Critical-500"
+          colorHex="#892615"
+        />
+        <Swatch
+          className="bg-critical-400"
+          colorName="Critical-400"
+          colorHex="#cc391f"
+        />
+        <Swatch
+          className="bg-critical-300"
+          colorName="Critical-300"
+          colorHex="#dd5e48"
+        />
+        <Swatch
+          className="bg-critical-200"
+          colorName="Critical-200"
+          colorHex="#f0b7ad"
+        />
+        <Swatch
+          className="bg-critical-100"
+          colorName="Critical-100"
+          colorHex="#fbedea"
+        />
+      </div>
+
+      <Heading3>Color order for charts, graphs, etc</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-chart-0"
+          colorName="Action-400"
+          colorHex="#0077c8"
+        />
+        <Swatch
+          className="bg-chart-1"
+          colorName="Brand-400"
+          colorHex="#df4405"
+        />
+        <Swatch
+          className="bg-chart-2"
+          colorName="Teal-400"
+          colorHex="#40c1ac"
+        />
+        <Swatch
+          className="bg-chart-3"
+          colorName="Warning-400"
+          colorHex="#f0a913"
+        />
+        <Swatch
+          className="bg-chart-4"
+          colorName="Neutral-400"
+          colorHex="#6b6d6d"
+        />
+        <Swatch
+          className="bg-chart-5"
+          colorName="Purple-400"
+          colorHex="#8d267a"
+        />
+        <Swatch
+          className="bg-chart-6"
+          colorName="Orange-400"
+          colorHex="#cc391f"
+        />
+      </div>
+      
+      <br />
+      
+      <Display1>Color Semantics</Display1>
+      <Paragraph>
+        Because we aim to support custom branding and eventually color modes (dark/light modes), color tokens are used so that we can talk about specific color usages without tying them to specific color values. We can call a color a “Primary Action Color” and it does not matter if it is blue or green or purple for a specific brand, we can all know what color use we are referring to. These colors are not define by a specific hex value but by the color variables defined in the color palette. These definitions can change between color mode.
+
+        <br />
+        <br />
+
+        Tokens are generally referenced by their Name, assuming a normal state unless otherwise specified. For example: A button may be called out to use a “background/action” color, which would reference the “color/background/action/normal” token by default, and the other states as defined.
+      </Paragraph>
+
+      <Heading2>Text</Heading2>
+      
+      <Heading3>Text/Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-text-primary-normal"
+          colorName="Normal"
+          colorHex="#1d1e1e"
+        />
+
+        <Swatch
+          className="bg-text-primary-disabled"
+          colorName="Disabled"
+          colorHex="#c1c1c1"
+        />
+
+        <Swatch
+          className="bg-text-primary-error"
+          colorName="Error"
+          colorHex="#cc391f"
+        />
+      </div>
+      
+      <Heading3>Text/Secondary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-text-secondary-normal"
+          colorName="Normal"
+          colorHex="#6b6d6d"
+        />
+
+        <Swatch
+          className="bg-text-secondary-disabled"
+          colorName="Disabled"
+          colorHex="#c1c1c1"
+        />
+
+        <Swatch
+          className="bg-text-secondary-error"
+          colorName="Error"
+          colorHex="#cc391f"
+        />
+      </div>
+      
+      <Heading3>Text/Brand</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-brand-400"
+          colorName="Normal"
+          colorHex="#df4405"
+        />
+
+        <Swatch
+          className="bg-neutral-300"
+          colorName="Disabled"
+          colorHex="#c1c1c1"
+        />
+
+        <Swatch
+          className="bg-critical-400"
+          colorName="Error"
+          colorHex="#cc391f"
+        />
+      </div>
+      
+      <Heading3>Text/Action Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-text-action-primary-normal"
+          colorName="Normal"
+          colorHex="#0077c8"
+        />
+
+        <Swatch
+          className="bg-text-action-primary-hover"
+          colorName="Hover"
+          colorHex="#00365a"
+        />
+
+        <Swatch
+          className="bg-text-action-primary-active"
+          colorName="Active"
+          colorHex="#459ad4"
+        />
+
+        <Swatch
+          className="bg-text-action-primary-disabled"
+          colorName="Disabled"
+          colorHex="#6b6d6d"
+        />
+      </div>
+      
+      <Heading3>Text/On Action Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-text-on-action-primary-normal"
+          colorName="Normal"
+          colorHex="#ffffff"
+        />
+
+        <Swatch
+          className="bg-text-on-action-primary-hover"
+          colorName="Hover"
+          colorHex="#ffffff"
+        />
+
+        <Swatch
+          className="bg-text-on-action-primary-active"
+          colorName="Active"
+          colorHex="#ffffff"
+        />
+
+        <Swatch
+          className="bg-text-on-action-primary-disabled"
+          colorName="Disabled"
+          colorHex="#6b6d6d"
+        />
+      </div>
+      
+      <Heading3>Text/Action Critical</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-text-action-critical-normal"
+          colorName="Normal"
+          colorHex="#CC391F"
+        />
+
+        <Swatch
+          className="bg-text-action-critical-hover"
+          colorName="Hover"
+          colorHex="#892615"
+        />
+
+        <Swatch
+          className="bg-text-action-critical-active"
+          colorName="Active"
+          colorHex="#DD5E48"
+        />
+
+        <Swatch
+          className="bg-text-action-critical-disabled"
+          colorName="Disabled"
+          colorHex="#6b6d6d"
+        />
+      </div>
+      
+      <Heading3>Text/Link</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-text-link-normal"
+          colorName="Normal"
+          colorHex="#0077C8"
+        />
+
+        <Swatch
+          className="bg-text-link-hover"
+          colorName="Hover"
+          colorHex="#00365A"
+        />
+
+        <Swatch
+          className="bg-text-link-active"
+          colorName="Active"
+          colorHex="#459AD4"
+        />
+
+        <Swatch
+          className="bg-text-link-disabled"
+          colorName="Disabled"
+          colorHex="#6b6d6d"
+        />
+      </div>
+      
+      <Heading3>Text/Success</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-text-success-normal"
+          colorName="Normal"
+          colorHex="#126240"
+        />
+
+        <Swatch
+          className="bg-text-success-disabled"
+          colorName="Disabled"
+          colorHex="#6B6D6D"
+        />
+
+        <Swatch
+          className="bg-text-success-error"
+          colorName="Error"
+          colorHex="#CC391F"
+        />
+      </div>
+      
+      <Heading3>Text/Warning</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-text-warning-normal"
+          colorName="Normal"
+          colorHex="#126240"
+        />
+
+        <Swatch
+          className="bg-text-warning-disabled"
+          colorName="Disabled"
+          colorHex="#6B6D6D"
+        />
+
+        <Swatch
+          className="bg-text-warning-error"
+          colorName="Error"
+          colorHex="#CC391F"
+        />
+      </div>
+      
+      <Heading3>Text/Critical</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-text-critical-normal"
+          colorName="Normal"
+          colorHex="#CC391F"
+        />
+
+        <Swatch
+          className="bg-text-critical-disabled"
+          colorName="Disabled"
+          colorHex="#6B6D6D"
+        />
+
+        <Swatch
+          className="bg-text-critical-error"
+          colorName="Error"
+          colorHex="#CC391F"
+        />
+      </div>
+
+      <br />
+      <Heading2>Icon</Heading2>
+      
+      <Heading3>Icon/Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-icon-primary-normal"
+          colorName="Normal"
+          colorHex="#6B6D6D"
+        />
+        
+        <Swatch
+          className="bg-icon-primary-disabled"
+          colorName="Disabled"
+          colorHex="#C1C1C1"
+        />
+      </div>
+      
+      <Heading3>Icon/Success</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-icon-success-normal"
+          colorName="Normal"
+          colorHex="#27D68B"
+        />
+        
+        <Swatch
+          className="bg-icon-success-disabled"
+          colorName="Disabled"
+          colorHex="#6B6D6D"
+        />
+      </div>
+      
+      <Heading3>Icon/Warning</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-icon-warning-normal"
+          colorName="Normal"
+          colorHex="#F0A913"
+        />
+        
+        <Swatch
+          className="bg-icon-warning-disabled"
+          colorName="Disabled"
+          colorHex="#6B6D6D"
+        />
+      </div>
+      
+      <Heading3>Icon/Critical</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-icon-critical-normal"
+          colorName="Normal"
+          colorHex="#CC391F"
+        />
+        
+        <Swatch
+          className="bg-icon-critical-disabled"
+          colorName="Disabled"
+          colorHex="#6B6D6D"
+        />
+      </div>
+      
+      <Heading3>Icon/Action Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-icon-action-primary-normal"
+          colorName="Normal"
+          colorHex="#1D1E1E"
+        />
+        
+        <Swatch
+          className="bg-icon-action-primary-hover"
+          colorName="Hover"
+          colorHex="#00365A"
+        />
+        
+        <Swatch
+          className="bg-icon-action-primary-active"
+          colorName="Active"
+          colorHex="#459AD4"
+        />
+        
+        <Swatch
+          className="bg-icon-action-primary-disabled"
+          colorName="Disabled"
+          colorHex="#C1C1C1"
+        />
+      </div>
+      
+      <Heading3>Icon/On Action Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-icon-on-action-primary-normal"
+          colorName="Normal"
+          colorHex="#FFFFFF"
+        />
+        
+        <Swatch
+          className="bg-icon-on-action-primary-hover"
+          colorName="Hover"
+          colorHex="#FFFFFF"
+        />
+        
+        <Swatch
+          className="bg-icon-on-action-primary-active"
+          colorName="Active"
+          colorHex="#FFFFFF"
+        />
+        
+        <Swatch
+          className="bg-icon-on-action-primary-disabled"
+          colorName="Disabled"
+          colorHex="#6B6D6D"
+        />
+      </div>
+      
+      <Heading3>Icon/Action Secondary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-icon-action-secondary-normal"
+          colorName="Normal"
+          colorHex="#0077C8"
+        />
+        
+        <Swatch
+          className="bg-icon-action-secondary-hover"
+          colorName="Hover"
+          colorHex="#00365A"
+        />
+        
+        <Swatch
+          className="bg-icon-action-secondary-active"
+          colorName="Active"
+          colorHex="#459AD4"
+        />
+        
+        <Swatch
+          className="bg-icon-action-secondary-disabled"
+          colorName="Disabled"
+          colorHex="#6B6D6D"
+        />
+      </div>
+      
+      <Heading3>Icon/Action Critical</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-icon-action-critical-normal"
+          colorName="Normal"
+          colorHex="#CC391F"
+        />
+        
+        <Swatch
+          className="bg-icon-action-critical-hover"
+          colorName="Hover"
+          colorHex="#892615"
+        />
+        
+        <Swatch
+          className="bg-icon-action-critical-active"
+          colorName="Active"
+          colorHex="#DD5E48"
+        />
+        
+        <Swatch
+          className="bg-icon-action-critical-disabled"
+          colorName="Disabled"
+          colorHex="#6B6D6D"
+        />
+      </div>
+      
+      <Heading3>Icon/Brand Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-icon-brand-primary-normal"
+          colorName="Normal"
+          colorHex="#DF4405"
+        />
+        
+        <Swatch
+          className="bg-icon-brand-primary-hover"
+          colorName="Hover"
+          colorHex="#9E3004"
+        />
+        
+        <Swatch
+          className="bg-icon-brand-primary-active"
+          colorName="Active"
+          colorHex="#E56937"
+        />
+        
+        <Swatch
+          className="bg-icon-brand-primary-disabled"
+          colorName="Disabled"
+          colorHex="#C1C1C1"
+        />
+      </div>
+      
+      <br />
+      <Heading2>Border</Heading2>
+      
+      <Heading3>Border/Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-border-primary-normal"
+          colorName="Normal"
+          colorHex="#C1C1C1"
+        />
+        
+        <Swatch
+          className="bg-border-primary-focus"
+          colorName="Focus"
+          colorHex="#0077C8"
+        />
+        
+        <Swatch
+          className="bg-border-primary-error"
+          colorName="Error"
+          colorHex="#CC391F"
+        />
+      </div>
+      
+      <Heading3>Border/Action</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-border-action-normal"
+          colorName="Normal"
+          colorHex="#0077C8"
+        />
+        
+        <Swatch
+          className="bg-border-action-hover"
+          colorName="Hover"
+          colorHex="#00365A"
+        />
+        
+        <Swatch
+          className="bg-border-action-active"
+          colorName="Active"
+          colorHex="#459AD4"
+        />
+        
+        <Swatch
+          className="bg-border-action-disabled"
+          colorName="Disabled"
+          colorHex="#EBEBEB"
+        />
+      </div>
+      
+      <Heading3>Border/Action Critical</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-border-action-critical-normal"
+          colorName="Normal"
+          colorHex="#CC391F"
+        />
+        
+        <Swatch
+          className="bg-border-action-critical-hover"
+          colorName="Hover"
+          colorHex="#892615"
+        />
+        
+        <Swatch
+          className="bg-border-action-critical-active"
+          colorName="Active"
+          colorHex="#DD5E48"
+        />
+        
+        <Swatch
+          className="bg-border-action-critical-disabled"
+          colorName="Disabled"
+          colorHex="#EBEBEB"
+        />
+      </div>
+      
+      <br />
+      <Heading2>Background</Heading2>
+      
+      <Heading3>Background/Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-primary-normal"
+          colorName="Normal"
+          colorHex="#FFFFFF"
+        />
+      </div>
+      
+      <Heading3>Background/Secondary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-secondary-normal"
+          colorName="Normal"
+          colorHex="#c1c1c1"
+        />
+      </div>
+      
+      <Heading3>Background/Brand</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-brand-normal"
+          colorName="Normal"
+          colorHex="#DF4405"
+        />
+      </div>
+      
+      <Heading3>Background/Grouped Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-grouped-primary-normal"
+          colorName="Normal"
+          colorHex="#FFFFFF"
+        />
+      </div>
+      
+      <Heading3>Background/Grouped Secondary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-grouped-secondary-normal"
+          colorName="Normal"
+          colorHex="#f7f7f7"
+        />
+      </div>
+      
+      <Heading3>Background/Action Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-action-primary-normal"
+          colorName="Normal"
+          colorHex="#0077C8"
+        />
+        
+        <Swatch
+          className="bg-background-action-primary-hover"
+          colorName="Hover"
+          colorHex="#00365A"
+        />
+        
+        <Swatch
+          className="bg-background-action-primary-active"
+          colorName="Active"
+          colorHex="#459AD4"
+        />
+        
+        <Swatch
+          className="bg-background-action-primary-disabled"
+          colorName="Disabled"
+          colorHex="#EBEBEB"
+        />
+      </div>
+      
+      <Heading3>Background/Action Secondary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-action-secondary-normal"
+          colorName="Normal"
+          colorHex="#FFFFFF"
+        />
+        
+        <Swatch
+          className="bg-background-action-secondary-hover"
+          colorName="Hover"
+          colorHex="#E7F2F9"
+        />
+        
+        <Swatch
+          className="bg-background-action-secondary-active"
+          colorName="Active"
+          colorHex="#FFFFFF"
+        />
+        
+        <Swatch
+          className="bg-background-action-secondary-disabled"
+          colorName="Disabled"
+          colorHex="#EBEBEB"
+        />
+      </div>
+      
+      <Heading3>Background/Action Critical Primary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-action-critical-primary-normal"
+          colorName="Normal"
+          colorHex="#CC391F"
+        />
+        
+        <Swatch
+          className="bg-background-action-critical-primary-hover"
+          colorName="Hover"
+          colorHex="#892615"
+        />
+        
+        <Swatch
+          className="bg-background-action-critical-primary-active"
+          colorName="Active"
+          colorHex="#DD5E48"
+        />
+        
+        <Swatch
+          className="bg-background-action-critical-primary-disabled"
+          colorName="Disabled"
+          colorHex="#EBEBEB"
+        />
+      </div>
+      
+      <Heading3>Background/Action Critical Secondary</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-action-critical-secondary-normal"
+          colorName="Normal"
+          colorHex="#FFFFFF"
+        />
+        
+        <Swatch
+          className="bg-background-action-critical-secondary-hover"
+          colorName="Hover"
+          colorHex="#FBEDEA"
+        />
+        
+        <Swatch
+          className="bg-background-action-critical-secondary-active"
+          colorName="Active"
+          colorHex="#FFFFFF"
+        />
+        
+        <Swatch
+          className="bg-background-action-critical-secondary-disabled"
+          colorName="Disabled"
+          colorHex="#EBEBEB"
+        />
+      </div>
+      
+      <Heading3>Background/Success</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-success-normal"
+          colorName="Normal"
+          colorHex="#27D68B"
+        />
+      </div>
+      
+      <Heading3>Background/Warning</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-warning-normal"
+          colorName="Normal"
+          colorHex="#F0A913"
+        />
+      </div>
+      
+      <Heading3>Background/Critical</Heading3>
+
+      <div className="flex flex-row gap-4">
+        <Swatch
+          className="bg-background-critical-normal"
+          colorName="Normal"
+          colorHex="#CC391F"
+        />
+      </div>
+      
+    </Stack>
+  );
+};
+
+Swatches.displayName = "Swatches";