@dmsi/wedgekit-react 0.0.4 → 0.0.6

package/src/components/Swatch.tsx

@@ -4,7 +4,7 @@ import { Stack } from "./Stack";
 import clsx from "clsx";
 import { typography } from "../classNames";
 import { Paragraph } from "./Paragraph";
-import { Heading3 } from "./Heading";
+import { Heading2, Heading3 } from "./Heading";
 
 type SwatchProps = PropsWithChildren<{
   className: string;
@@ -36,9 +36,9 @@ export const Swatch = ({ className, colorName, colorHex }: SwatchProps) => {
 export const Swatches = () => {
   return (
     <Stack elevation={0} items="start" justify="start" sizing="container">
-      <Display1>Colors</Display1>
+      <Display1>Color Primitives</Display1>
 
-      <Display1> Branded Colors</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
@@ -83,12 +83,12 @@ export const Swatches = () => {
         <Swatch
           className="bg-action-500"
           colorName="Action-500"
-          colorHex="#e7f2f9"
+          colorHex="#00365a"
         />
         <Swatch
           className="bg-action-400"
           colorName="Action-400"
-          colorHex="#d0e5f4"
+          colorHex="#0077c8"
         />
         <Swatch
           className="bg-action-300"
@@ -98,14 +98,45 @@ export const Swatches = () => {
         <Swatch
           className="bg-action-200"
           colorName="Action-200"
-          colorHex="#0077c8"
+          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
@@ -286,6 +317,748 @@ export const Swatches = () => {
           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>
   );
 };