Add new shades of green, red and yellow

Author: acelaya

src/pattern-library/components/patterns/ColorsPage.tsx

@@ -55,9 +55,29 @@ const slateExamples = (
 
 const stateExamples = (
   <>
-    <ColorSwatch colorClass="bg-green-success" colorName="green-success" />
-    <ColorSwatch colorClass="bg-yellow-notice" colorName="yellow-notice" />
-    <ColorSwatch colorClass="bg-red-error" colorName="red-error" />
+    <ColorSwatch
+      colorClass="bg-green-success"
+      colorName="green-success (green alias)"
+    />
+    <ColorSwatch
+      colorClass="bg-yellow-notice"
+      colorName="yellow-notice (yellow alias)"
+    />
+    <ColorSwatch colorClass="bg-red-error" colorName="red-error (red alias)" />
+  </>
+);
+
+const highlightingExamples = (
+  <>
+    <ColorSwatch colorClass="bg-green-light" colorName="green-light" />
+    <ColorSwatch colorClass="bg-green" colorName="green" />
+    <ColorSwatch colorClass="bg-green-dark" colorName="green-dark" />
+    <ColorSwatch colorClass="bg-yellow-light" colorName="yellow-light" />
+    <ColorSwatch colorClass="bg-yellow" colorName="yellow" />
+    <ColorSwatch colorClass="bg-yellow-dark" colorName="yellow-dark" />
+    <ColorSwatch colorClass="bg-red-light" colorName="red-light" />
+    <ColorSwatch colorClass="bg-red" colorName="red" />
+    <ColorSwatch colorClass="bg-red-dark" colorName="red-dark" />
   </>
 );
 
@@ -90,6 +110,12 @@ export default function ColorsPage() {
         </div>
       </Library.SectionL2>
 
+      <Library.SectionL2 title="Highlighting">
+        <div className="my-4 flex flex-row flex-wrap gap-4">
+          {highlightingExamples}
+        </div>
+      </Library.SectionL2>
+
       <Library.SectionL2 title="State indicators">
         <div className="my-4 flex flex-row flex-wrap gap-4">
           {stateExamples}

src/tailwind.preset.js

@@ -7,6 +7,11 @@ import { scrollShadows } from './tailwind.scroll-shadows.js';
 // Equivalent to spacing value 11; minimum touch-target size
 const minimumTouchDimension = '44px';
 
+// Default colors
+const green = '#00a36d';
+const yellow = '#fbc168';
+const red = '#d93c3f';
+
 export default /** @type {Partial<import('tailwindcss').Config>} */ ({
   theme: {
     extend: {
@@ -50,13 +55,22 @@ export default /** @type {Partial<import('tailwindcss').Config>} */ ({
           focus: '#59a7e8',
         },
         green: {
-          success: '#00a36d',
+          light: '#dfebe7',
+          DEFAULT: green,
+          dark: '#005c3d',
+          success: green,
         },
         yellow: {
-          notice: '#fbc168',
+          light: '#fef7ec',
+          DEFAULT: yellow,
+          dark: '#774903',
+          notice: yellow,
         },
         red: {
-          error: '#d93c3f',
+          light: '#f0e2e3',
+          DEFAULT: red,
+          dark: '#891b1d',
+          error: red,
         },
         brand: {
           dark: '#84141e',