design system: text color contrast (#38343)

* Refactor Drawer component and add date-fns dependency Refactored the Drawer component for improved slot-based structure, updated styles, and added 'use client' directive. Added 'date-fns' as a dependency in design-system, updated tsconfig paths for icons, and marked ToggleGroup as a client component. * nit: add env for svg path * fix: instructions * accent color docs and basic tidy * copy value feature * improve color contrast * increase contrast on text-warning in light mode * update changelog * replace outdated text-warning utility classes * remove redundant warning-600 * minor design-system docs updates * docs updates * remove unused brand-button class * update docs * fix: restore brand default * update docs brand text color * low hanging branded text fruit * Nit refactor and clean up * re-add Kemal’s README instructions for hot reload --------- Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com> Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-09-09 11:45:08 +10:00
parent 54760cdad3
commit 65b962e771
45 changed files with 148 additions and 237 deletions
--- a/packages/ui-patterns/src/GlassPanel/index.tsx
+++ b/packages/ui-patterns/src/GlassPanel/index.tsx
@@ -119,7 +119,7 @@ export const GlassPanel = ({
        </div>

        {children && <span className="text-sm text-foreground-light flex-grow">{children}</span>}
-        {showLink && <span className="text-brand justify-end text-sm">Learn more</span>}
+        {showLink && <span className="text-brand-link justify-end text-sm">Learn more</span>}
      </div>
    </div>
  )
--- a/packages/ui-patterns/src/IconPanel/index.tsx
+++ b/packages/ui-patterns/src/IconPanel/index.tsx
@@ -102,7 +102,7 @@ export const IconPanel = ({
              {children && (
                <span className="text-sm text-foreground-light not-prose">{children}</span>
              )}
-              {showLink && <span className="text-brand justify-end text-sm">Learn more</span>}
+              {showLink && <span className="text-brand-link justify-end text-sm">Learn more</span>}
            </div>
          </div>
        </div>
--- a/packages/ui/build/css/themes/classic-dark.css
+++ b/packages/ui/build/css/themes/classic-dark.css
@@ -10,7 +10,6 @@
  --secondary-400: 0deg 0% 100%;
  --secondary-200: 0deg 0% 100%;
  --brand-link: 153.1deg 60.2% 52.7%;
-  --brand-button: 151.8deg 47.1% 40.8%;
  --brand-default: 153.1deg 60.2% 52.7%;
  --brand-600: 153deg 59.5% 70%;
  --brand-500: 153.5deg 61.8% 21.6%;
--- a/packages/ui/build/css/themes/concept-two.css
+++ b/packages/ui/build/css/themes/concept-two.css
@@ -10,7 +10,6 @@
  --secondary-400: 20deg 93.2% 40.4%;
  --secondary-200: 17.7deg 78.9% 27.8%;
  --brand-link: 163.9deg 53.2% 15.1%;
-  --brand-button: 175.6deg 61.8% 21.6%;
  --brand-default: 163.9deg 53.2% 15.1%;
  --brand-600: 156.3deg 59.5% 70%;
  --brand-500: 175.6deg 61.8% 21.6%;
--- a/packages/ui/build/css/themes/dark-combined.css
+++ b/packages/ui/build/css/themes/dark-combined.css
@@ -14,7 +14,6 @@
  --secondary-400: 248.3deg 54.5% 25.9%;
  --secondary-200: 248deg 53.6% 11%;
  --brand-link: 155deg 100% 38.6%;
-  --brand-button: 154.9deg 100% 19.2%;
  --brand-default: 153.1deg 60.2% 52.7%;
  --brand-600: 154.9deg 59.5% 70%;
  --brand-500: 154.9deg 100% 19.2%;
--- a/packages/ui/build/css/themes/dark.css
+++ b/packages/ui/build/css/themes/dark.css
@@ -12,14 +12,13 @@
  --secondary-400: 248.3deg 54.5% 25.9%;
  --secondary-200: 248deg 53.6% 11%;
  --brand-link: 155deg 100% 38.6%;
-  --brand-button: 154.9deg 100% 19.2%;
  --brand-default: 153.1deg 60.2% 52.7%;
  --brand-600: 154.9deg 59.5% 70%;
  --brand-500: 154.9deg 100% 19.2%;
  --brand-400: 155.5deg 100% 9.6%;
  --brand-300: 155.1deg 100% 8%;
  --brand-200: 162deg 100% 2%;
-  --warning-default: 38.9deg 100% 42.9%;
+  --warning-default: 38.9deg 100% 42.9%; /* warning-600 */
  --warning-600: 38.9deg 100% 42.9%;
  --warning-500: 34.8deg 90.9% 21.6%;
  --warning-400: 33.2deg 100% 14.5%;
--- a/packages/ui/build/css/themes/light.css
+++ b/packages/ui/build/css/themes/light.css
@@ -10,14 +10,13 @@
  --secondary-400: 248.3deg 54.5% 25.9%;
  --secondary-200: 248deg 53.6% 11%;
  --brand-link: 153.4deg 100% 36.7%;
-  --brand-button: 151.8deg 47.1% 40.8%;
  --brand-default: 152.9deg 60% 52.9%;
  --brand-600: 156.5deg 86.5% 26.1%;
  --brand-500: 155.3deg 78.4% 40%;
  --brand-400: 151.3deg 66.9% 66.9%;
  --brand-300: 147.5deg 72% 80.4%;
  --brand-200: 147.6deg 72.5% 90%;
-  --warning-default: 38.9deg 100% 57.1%;
+  --warning-default: 30.3deg 80.3% 47.8%; /* warning-600 */
  --warning-600: 30.3deg 80.3% 47.8%;
  --warning-500: 36.3deg 85.7% 67.1%;
  --warning-400: 41.9deg 100% 81.8%;
--- a/packages/ui/build/css/tw-extend/color.js
+++ b/packages/ui/build/css/tw-extend/color.js
@@ -603,10 +603,6 @@ module.exports = {
    cssVariable: 'var(--brand-default)',
    value: 'hsl(153.10000000000002, 60.2%, 52.7%)',
  },
-  'brand-button': {
-    cssVariable: 'var(--brand-button)',
-    value: 'hsl(154.89999999999998, 100%, 19.2%)',
-  },
  'brand-link': {
    cssVariable: 'var(--brand-link)',
    value: 'hsl(155, 100%, 38.6%)',
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -177,7 +177,7 @@ const IconContainerVariants = cva('', {
      link: 'text-brand-600',
      text: 'text-foreground-lighter',
      danger: 'text-destructive-600',
-      warning: 'text-warning-600',
+      warning: 'text-warning',
    },
  },
 })
@@ -195,7 +195,7 @@ const loadingVariants = cva('', {
      link: 'text-brand-600',
      text: 'text-foreground-muted',
      danger: 'text-destructive-600',
-      warning: 'text-warning-600',
+      warning: 'text-warning',
    },
    loading: {
      default: '',
--- a/packages/ui/src/components/StatusIcon.tsx
+++ b/packages/ui/src/components/StatusIcon.tsx
@@ -91,7 +91,7 @@ const WarningIcon: React.FC<SVGProps<SVGSVGElement> & StatusIconProps> = ({
      className={cn(
        !hideBackground
          ? 'w-4 h-4 p-0.5 bg-warning-600 text-warning-200 rounded'
-          : 'w-3 h-3 text-warning-600',
+          : 'w-3 h-3 text-warning',
        props.className
      )}
    >
@@ -151,7 +151,7 @@ const EyeIcon: React.FC<SVGProps<SVGSVGElement> & StatusIconProps> = ({
      className={cn(
        !hideBackground
          ? 'w-4 h-4 p-0.5 bg-warning-600 text-warning-200 rounded'
-          : 'w-3 h-3 text-warning-600',
+          : 'w-3 h-3 text-warning',
        props.className
      )}
    >
@@ -180,7 +180,7 @@ const EyeOffIcon: React.FC<SVGProps<SVGSVGElement> & StatusIconProps> = ({
      className={cn(
        !hideBackground
          ? 'w-4 h-4 p-0.5 bg-foreground-light text-background rounded'
-          : 'w-3 h-3 text-warning-600',
+          : 'w-3 h-3 text-warning',
        props.className
      )}
    >
--- a/packages/ui/src/components/shadcn/ui/badge.tsx
+++ b/packages/ui/src/components/shadcn/ui/badge.tsx
@@ -9,7 +9,7 @@ const badgeVariants = cva(
    variants: {
      variant: {
        default: 'bg-surface-200 text-foreground-light border border-strong',
-        warning: 'bg-warning text-warning-600 border border-warning-500',
+        warning: 'bg-warning text-warning border border-warning-500',
        success: 'bg-brand text-brand-600 border border-brand-500',
        destructive: 'bg-destructive text-destructive-600 border border-destructive-500',
        brand: 'bg-brand text-brand-600 border border-brand-500',
--- a/packages/ui/src/lib/tailwind-demo-classes.ts
+++ b/packages/ui/src/lib/tailwind-demo-classes.ts
@@ -31,7 +31,16 @@ export default {
    'border-button',
    'border-button-hover',
  ],
-  text: ['text', 'text-light', 'text-lighter', 'text-muted', 'text-contrast'],
+  text: [
+    'text',
+    'text-light',
+    'text-lighter',
+    'text-muted',
+    'text-contrast',
+    'text-destructive',
+    'text-warning',
+    'text-brand',
+  ],
  colors: [
    'bg-destructive-200',
    'bg-destructive-300',
@@ -51,7 +60,6 @@ export default {
    'bg-brand-500',
    'bg-brand-600',
    'bg-brand',
-    'bg-brand-button',
    'bg-brand-link',
    'bg-_secondary-200',
    'bg-_secondary-400',