@datum-cloud/datum-ui 0.1.0

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@datum-cloud/datum-ui",
+  "version": "0.1.0",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles": {
+      "default": "./src/styles/root.css"
+    },
+    "./styles/*": {
+      "default": "./src/styles/*"
+    },
+    "./styles/*/*": {
+      "default": "./src/styles/*/*"
+    }
+  },
+  "files": [
+    "dist",
+    "src/styles",
+    "README.md",
+    "LICENSE"
+  ],
+  "devDependencies": {
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^8.57.0",
+    "prettier": "^3.8.1",
+    "prettier-plugin-organize-imports": "^4.3.0",
+    "prettier-plugin-tailwindcss": "^0.7.2",
+    "@types/nprogress": "^0.2.3",
+    "react": "^19.2.3",
+    "tsup": "^8.5.1",
+    "typescript": "5.9.3",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0",
+    "@repo/shadcn": "0.0.0",
+    "@repo/tailwind-config": "0.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@stepperize/react": "^3.0.0",
+    "class-variance-authority": "^0.7.1",
+    "lucide-react": "^0.556.0",
+    "nprogress": "^0.2.0",
+    "sonner": "^2.0.7",
+    "tailwind-scrollbar-hide": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-router": "^7.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-router": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint . --max-warnings 0",
+    "clean": "rm -rf .turbo node_modules dist"
+  }
+}

package/src/styles/custom.css

@@ -0,0 +1,27 @@
+/**
+ * Application-specific custom styles
+ * UI component styles are now in datum-ui/styles/animations.css
+ */
+
+/* Activity Log Styles */
+.activity-log-user {
+  font-weight: 600;
+}
+
+.activity-log-resource {
+  text-transform: capitalize;
+}
+
+.activity-log-resource-name,
+.activity-log-error-message,
+.activity-log-namespace {
+  font-weight: 600;
+}
+
+.recharts-wrapper .recharts-legend-wrapper {
+  z-index: 0;
+}
+
+.recharts-wrapper .recharts-tooltip-wrapper {
+  z-index: 1;
+}

package/src/styles/fonts.css

@@ -0,0 +1,51 @@
+/* FT Regola Neue Font Family */
+
+@font-face {
+  font-family: 'FTRegolaNeue';
+  src: url('/fonts/FTRegolaNeue-Regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'FTRegolaNeue';
+  src: url('/fonts/FTRegolaNeue-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'FTRegolaNeue';
+  src: url('/fonts/FTRegolaNeue-Semibold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Alliance No1 Font Family */
+
+@font-face {
+  font-family: 'Alliance No1';
+  src: url('/fonts/AllianceNo1-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Alliance No1';
+  src: url('/fonts/AllianceNo1-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Alliance No1';
+  src: url('/fonts/AllianceNo1-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}

package/src/styles/root.css

@@ -0,0 +1,28 @@
+@import 'tailwindcss';
+@import 'tw-animate-css';
+@import 'tailwind-scrollbar-hide/v4';
+
+@custom-variant dark (&:is(.dark *));
+
+/* ========================================
+   LAYER ORDER DEFINITION
+   Theme layer always wins over shadcn-base
+   ======================================== */
+/* @layer shadcn-base, theme; */
+
+/* ========================================
+   IMPORTS
+   ======================================== */
+
+@import './fonts.css';
+
+/* Figma design tokens - source of truth */
+@import './tokens/figma-tokens.css';
+
+/* Shadcn/ui base variables and component styles */
+@import '@repo/shadcn/style.css';
+
+/* Theme overrides - always loaded after shadcn */
+@import './themes/alpha.css';
+
+@import './custom.css';

package/src/styles/themes/alpha.css

@@ -0,0 +1,421 @@
+/**
+ * Alpha Theme
+ *
+ * Maps Figma design tokens to purpose tokens for component usage.
+ * Purpose tokens are consumed via Tailwind utilities (text-primary, bg-background, etc.).
+ *
+ * @see app/styles/tokens/figma-tokens.css for Figma token definitions
+ */
+
+/* ========================================
+Scope variables to the theme class so we can swap themes by class
+======================================== */
+.theme-alpha {
+  /* ========================================
+   FONT FAMILYS
+   ======================================== */
+  --font-sans:
+    'Alliance No1', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --font-mono: 'Menlo', 'Consolas', 'Monaco', 'DejaVu Sans Mono', monospace;
+  /* ========================================
+   BASE SHADCN VARIABLES
+   ======================================== */
+  /* Radius - using Figma medium radius as base */
+  --radius: var(--radius-md);
+
+  /* Sidebar */
+  --sidebar-width: 15.875rem; /* 254px */
+  --sidebar-width-icon: 3rem; /* 48px */
+  --sidebar-width-mobile: 18.75rem; /* 300px */
+
+  /* ========================================
+   SHADCN COLOR OVERRIDES - LIGHT MODE
+   ======================================== */
+
+  /* Base colors */
+  --background: var(--glacier-mist-700);
+  --foreground: var(--midnight-fjord);
+
+  /* Card colors */
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(240 10% 3.9%);
+
+  /* Popover colors */
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(240 10% 3.9%);
+
+  /* Primary colors - using Figma tokens */
+  --primary: var(--canyon-clay-links);
+  --primary-foreground: var(--white);
+
+  /* Secondary colors - using Figma tokens */
+  --secondary: var(--app-dark-utility-2);
+  --secondary-foreground: var(--glacier-mist-700);
+
+  /* Tertiary colors - using Figma tokens */
+  --tertiary: var(--pine-forge);
+  --tertiary-foreground: var(--glacier-mist-700);
+
+  /* Quaternary colors - using Figma tokens */
+  --quaternary: var(--app-dark-utility-5);
+  --quaternary-foreground: var(--midnight-fjord);
+
+  /* Muted colors */
+  --muted: hsl(240 4.8% 95.9%);
+  --muted-foreground: hsl(240 3.8% 46.1%);
+
+  /* Accent colors - using Figma tokens */
+  --accent: var(--glacier-mist-700);
+  --accent-foreground: hsl(240 5.9% 10%);
+
+  /* Destructive colors */
+  --destructive: var(--alert-red-light);
+  --destructive-foreground: var(--glacier-mist-700);
+
+  /* UI elements */
+  --border: var(--glacier-mist-900);
+  --input: var(--app-dark-utility-5);
+  --ring: var(--app-dark-utility-4);
+  --dialog-overlay: var(--app-dark-utility-4);
+
+  /* Chart colors */
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43, 74%, 66%);
+  --chart-5: hsl(27 87% 67%);
+
+  /* Sidebar colors - using Figma tokens */
+  --sidebar: var(--glacier-mist-700);
+  --sidebar-foreground: var(--app-dark-utility-3);
+  --sidebar-primary: var(--midnight-fjord);
+  --sidebar-primary-foreground: var(--glacier-mist-900);
+  --sidebar-accent: var(--glacier-mist-800);
+  --sidebar-accent-foreground: var(--midnight-fjord);
+  --sidebar-border: var(--glacier-mist-900);
+  --sidebar-ring: var(--midnight-fjord);
+
+  /* Status colors */
+  --success-100: hsl(143, 85%, 96%);
+  --success-300: hsl(145, 92%, 87%);
+  --success-500: hsl(140, 100%, 27%);
+
+  --info-100: hsl(208, 100%, 97%);
+  --info-300: hsl(221, 91%, 93%);
+  --info-500: hsl(210, 92%, 45%);
+
+  /* Input */
+  --input-background: var(--glacier-mist-700);
+  --input-foreground: var(--midnight-fjord);
+  --input-border: var(--app-dark-utility-5);
+  --input-placeholder: var(--app-dark-utility-4);
+  --input-focus-border: var(--app-dark-utility-3);
+  --input-focus-shadow: 0px 0px 0px 3px rgba(12, 29, 49, 0.08);
+
+  /* Table */
+  --table-accent: var(--glacier-mist-800);
+  --table-cell: hsl(0 0% 100%);
+  --table-cell-hover: var(--glacier-mist-700);
+
+  /* Badge */
+  --badge-primary: var(--primary);
+  --badge-primary-foreground: var(--primary-foreground);
+  --badge-secondary: var(--secondary);
+  --badge-secondary-foreground: var(--secondary-foreground);
+  --badge-tertiary: var(--tertiary);
+  --badge-tertiary-foreground: var(--tertiary-foreground);
+  --badge-quaternary: var(--app-dark-utility-5);
+  --badge-quaternary-foreground: var(--app-dark-utility-2);
+  --badge-muted: var(--glacier-mist-800);
+  --badge-muted-foreground: var(--midnight-fjord);
+  --badge-success: hsl(112, 14%, 57%);
+  --badge-success-foreground: var(--glacier-mist-700);
+  --badge-info: hsl(202, 34%, 46%);
+  --badge-info-foreground: var(--glacier-mist-700);
+  --badge-danger: var(--destructive);
+  --badge-danger-foreground: var(--destructive-foreground);
+  --badge-warning: hsl(34, 100%, 50%);
+  --badge-warning-foreground: var(--glacier-mist-700);
+
+  --card-warning: #fffbc5;
+  --card-warning-foreground: var(--midnight-fjord);
+  --card-success-border: var(--potted-olive);
+  --card-success: #f4f9f5;
+  --card-success-secondary: #adbab0;
+  --card-border: var(--glacier-mist-900);
+
+  --btn-primary: rgba(156, 121, 121, 0.9);
+  --btn-secondary: rgba(56, 69, 85, 0.9);
+  --btn-tertiary: var(--tertiary);
+  --btn-quaternary: var(--quaternary);
+  --btn-quaternary-hover: var(--app-dark-utility-4);
+
+  /* Icon Colors */
+  --icon-primary: var(--app-dark-utility-3);
+  --icon-secondary: var(--app-dark-utility-4);
+  --icon-tertiary: var(--app-dark-utility-5);
+  --icon-quaternary: var(--app-dark-utility-2);
+  --icon-quinary: var(--app-dark-utility-1);
+
+  --stepper-line: var(--glacier-mist-800);
+  --stepper-label: var(--app-dark-utility-4);
+
+  /* Toast */
+  --toast-error-background: var(--alert-red-light);
+  --toast-error-foreground: var(--glacier-mist-700);
+  --toast-error-icon: var(--glacier-mist-700);
+  --toast-success-background: var(--pine-forge);
+  --toast-success-foreground: var(--glacier-mist-700);
+  --toast-success-icon: var(--glacier-mist-700);
+
+  /* ========================================
+   DARK MODE OVERRIDES
+   ======================================== */
+  &.dark {
+    /* Base colors - dark mode */
+    --background: var(--midnight-fjord);
+    --foreground: var(--glacier-mist-700);
+
+    /* Card colors - dark mode */
+    --card: var(--app-dark-utility-1);
+    --card-foreground: var(--glacier-mist-700);
+
+    /* Popover colors */
+    --popover: var(--app-dark-utility-1);
+    --popover-foreground: var(--glacier-mist-700);
+
+    /* Primary colors */
+    --primary: var(--aurora-moss);
+    --primary-foreground: var(--midnight-fjord);
+
+    /* Secondary colors */
+    --secondary: var(--aurora-moss);
+    --secondary-foreground: var(--midnight-fjord);
+
+    /* Tertiary colors */
+    --tertiary: var(--aurora-moss);
+    --tertiary-foreground: var(--midnight-fjord);
+
+    /* Quaternary colors */
+    --quaternary: var(--app-dark-utility-2);
+    --quaternary-foreground: var(--glacier-mist-700);
+
+    /* Muted colors */
+    --muted: var(--app-dark-utility-1);
+    --muted-foreground: var(--app-dark-utility-4);
+
+    /* Accent colors */
+    --accent: var(--app-dark-utility-2);
+    --accent-foreground: var(--glacier-mist-700);
+
+    /* Destructive colors */
+    --destructive: var(--alert-red-light);
+    --destructive-foreground: var(--glacier-mist-700);
+
+    /* UI elements */
+    --border: var(--app-dark-utility-2);
+    --input: var(--app-dark-utility-2);
+    --ring: var(--app-dark-utility-3);
+    --dialog-overlay: var(--midnight-fjord);
+
+    --dialog-border: var(--app-dark-utility-2);
+
+    /* Toast */
+    --toast-error-background: var(--alert-red-dark);
+    --toast-error-foreground: var(--midnight-fjord);
+    --toast-error-icon: var(--midnight-fjord);
+    --toast-success-background: var(--primary);
+    --toast-success-foreground: var(--midnight-fjord);
+    --toast-success-icon: var(--midnight-fjord);
+
+    /* Chart colors - dark mode */
+    --chart-1: hsl(220 70% 50%);
+    --chart-2: hsl(160 60% 45%);
+    --chart-3: hsl(30 80% 55%);
+    --chart-4: hsl(280 65% 60%);
+    --chart-5: hsl(340 75% 55%);
+
+    /* Sidebar colors - dark mode */
+    --sidebar: var(--midnight-fjord);
+    --sidebar-foreground: var(--app-dark-utility-4);
+    --sidebar-primary: var(--glacier-mist-700);
+    --sidebar-primary-foreground: var(--app-dark-utility-2);
+    --sidebar-accent: var(--app-dark-utility-1);
+    --sidebar-accent-foreground: var(--app-dark-utility-4);
+    --sidebar-border: var(--app-dark-utility-1);
+    --sidebar-ring: var(--aurora-moss);
+
+    /* Status colors - dark mode */
+    --success-100: hsl(150, 100%, 6%);
+    --success-300: hsl(147, 100%, 12%);
+    --success-500: hsl(150, 86%, 65%);
+
+    --info-100: hsl(216, 87%, 65%);
+    --info-300: hsl(215, 100%, 6%);
+    --info-500: hsl(223, 43%, 17%);
+
+    /* Input */
+    --input-background: var(--midnight-fjord);
+    --input-foreground: var(--glacier-mist-700);
+    --input-border: var(--app-dark-utility-2);
+    --input-placeholder: var(--app-dark-utility-3);
+    --input-focus-border: var(--aurora-moss);
+    --input-focus-shadow: 0px 0px 0px 3px rgba(236, 249, 192, 0.08);
+
+    --table-accent: var(--app-dark-utility-1);
+    --table-cell: var(--midnight-fjord);
+    --table-cell-hover: var(--app-dark-utility-1);
+
+    /* Badge */
+    --badge-primary: var(--primary);
+    --badge-primary-foreground: var(--primary-foreground);
+    --badge-secondary: var(--secondary);
+    --badge-secondary-foreground: var(--secondary-foreground);
+    --badge-tertiary: var(--tertiary);
+    --badge-tertiary-foreground: var(--tertiary-foreground);
+    --badge-quaternary: var(--quaternary);
+    --badge-quaternary-foreground: var(--quaternary-foreground);
+    --badge-muted: var(--glacier-mist-800);
+    --badge-muted-foreground: var(--accent-foreground);
+    --badge-success: hsl(112, 14%, 57%);
+    --badge-success-foreground: var(--glacier-mist-700);
+    --badge-info: hsl(202, 34%, 46%);
+    --badge-info-foreground: var(--glacier-mist-700);
+    --badge-danger: var(--destructive);
+    --badge-danger-foreground: var(--destructive-foreground);
+    --badge-warning: hsl(34, 100%, 50%);
+    --badge-warning-foreground: var(--glacier-mist-700);
+
+    --card-success-border: var(--potted-olive);
+    --card-success: #f4f9f53f;
+    --card-success-secondary: #adbab0;
+    --card-border: var(--app-dark-utility-2);
+
+    --btn-primary: rgba(230, 245, 159, 0.9);
+    --btn-secondary: var(--btn-primary);
+    --btn-tertiary: var(--btn-primary);
+    --btn-quaternary: var(--quaternary);
+    --btn-quaternary-hover: var(--app-dark-utility-3);
+
+    /* Icon Colors */
+    --icon-primary: var(--app-dark-utility-4);
+    --icon-secondary: var(--app-dark-utility-4);
+    --icon-tertiary: var(--app-dark-utility-3);
+    --icon-quaternary: var(--app-dark-utility-2);
+    --icon-quinary: var(--app-dark-utility-1);
+
+    --stepper-line: var(--app-dark-utility-2);
+    --stepper-label: var(--app-dark-utility-3);
+  }
+}
+
+/* ========================================
+TAILWIND CUSTOM UTILITIES FOR THEME
+======================================== */
+@theme inline {
+  /* Font Families */
+  --font-mono: var(--font-mono);
+  --font-sans: var(--font-sans);
+
+  /* Custom base shadow */
+  --shadow: 0 2px 4px 2px rgba(12, 29, 49, 0.03);
+  --shadow-tooltip: 0 4px 16px 0 rgba(0, 0, 0, 0.05), 1px 8px 8px 0 rgba(0, 0, 0, 0.02);
+
+  --color-tertiary: var(--tertiary);
+  --color-tertiary-foreground: var(--tertiary-foreground);
+
+  --color-quaternary: var(--quaternary);
+  --color-quaternary-foreground: var(--quaternary-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-input-background: var(--input-background);
+  --color-input-foreground: var(--input-foreground);
+  --color-input-border: var(--input-border);
+  --color-input-placeholder: var(--input-placeholder);
+  --color-input-focus-border: var(--input-focus-border);
+  --color-input-focus-shadow: var(--input-focus-shadow);
+
+  --color-table-accent: var(--table-accent);
+  --color-table-cell: var(--table-cell);
+  --color-table-cell-hover: var(--table-cell-hover);
+
+  --color-dialog-overlay: var(--dialog-overlay);
+  --color-dialog-border: var(--dialog-border);
+
+  /* Icon Colors */
+  --color-icon-primary: var(--icon-primary);
+  --color-icon-secondary: var(--icon-secondary);
+  --color-icon-tertiary: var(--icon-tertiary);
+  --color-icon-quaternary: var(--icon-quaternary);
+  --color-icon-quinary: var(--icon-quinary);
+
+  /* Toast */
+  --color-toast-error-background: var(--toast-error-background);
+  --color-toast-error-foreground: var(--toast-error-foreground);
+  --color-toast-error-icon: var(--toast-error-icon);
+  --color-toast-success-background: var(--toast-success-background);
+  --color-toast-success-foreground: var(--toast-success-foreground);
+  --color-toast-success-icon: var(--toast-success-icon);
+
+  /* Font Sizes */
+  --text-sm: 14px;
+  --text-xs: 13px;
+  --text-1xs: 12px;
+  --text-2xs: 9px;
+
+  /* Badge */
+  --color-badge-primary: var(--badge-primary);
+  --color-badge-primary-foreground: var(--badge-primary-foreground);
+  --color-badge-secondary: var(--badge-secondary);
+  --color-badge-secondary-foreground: var(--badge-secondary-foreground);
+  --color-badge-tertiary: var(--badge-tertiary);
+  --color-badge-tertiary-foreground: var(--badge-tertiary-foreground);
+  --color-badge-quaternary: var(--badge-quaternary);
+  --color-badge-quaternary-foreground: var(--badge-quaternary-foreground);
+  --color-badge-muted: var(--badge-muted);
+  --color-badge-muted-foreground: var(--badge-muted-foreground);
+  --color-badge-success: var(--badge-success);
+  --color-badge-success-foreground: var(--badge-success-foreground);
+  --color-badge-info: var(--badge-info);
+  --color-badge-info-foreground: var(--badge-info-foreground);
+  --color-badge-danger: var(--badge-danger);
+  --color-badge-danger-foreground: var(--badge-danger-foreground);
+  --color-badge-warning: var(--badge-warning);
+  --color-badge-warning-foreground: var(--badge-warning-foreground);
+
+  --color-card-warning: var(--card-warning);
+  --color-card-warning-foreground: var(--card-warning-foreground);
+  --color-card-success-border: var(--card-success-border);
+  --color-card-success: var(--card-success);
+  --color-card-success-secondary: var(--card-success-secondary);
+  --color-card-border: var(--card-border);
+
+  --color-btn-primary: var(--btn-primary);
+  --color-btn-secondary: var(--btn-secondary);
+  --color-btn-tertiary: var(--btn-tertiary);
+  --color-btn-quaternary: var(--btn-quaternary);
+  --color-btn-quaternary-hover: var(--btn-quaternary-hover);
+
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  --color-stepper-line: var(--stepper-line);
+  --color-stepper-label: var(--stepper-label);
+}
+
+/* ========================================
+GLOBAL STYLES FOR ALPHA THEME
+======================================== */
+html,
+body {
+  @apply font-sans antialiased;
+}

package/src/styles/tokens/brand-tokens.css

@@ -0,0 +1,57 @@
+/**
+ * Brand Token Definitions (REFERENCE ONLY)
+ * 
+ * This file contains the original brand color values that were migrated.
+ * 
+ * ⚠️ REFERENCE ONLY - Not imported or used in code
+ * 
+ * Kept for reference to show what brand tokens existed before Figma integration.
+ * Current implementation uses Figma tokens directly in alpha.css.
+ */
+
+/* ========================================
+   BRAND COLORS FOR TAILWIND UTILITIES
+   These colors are available globally as Tailwind utilities
+   ======================================== */
+@theme {
+  /* Datum Brand Colors */
+  --color-navy: #0c1d31;
+  --color-cream: #f6f6f5;
+  --color-light-gray: #e8e7e4;
+  --color-lime-green: #e6f59f;
+  --color-dark-navy-blue: #111e34;
+  --color-light-pink: #ecd0d0;
+  --color-mauve: #91757b;
+  --color-navy-muted: #14233d;
+  --color-orange: #ff6b35;
+  --color-tuscany: #c49d9d;
+  --color-indigo: #2d3948;
+  --color-pearl-gray: #efefed;
+  --color-green-dark: #4d6356;
+  --color-warm-white: #f5f5f3;
+
+  /* Sunglow Palette */
+  --color-sunglow: hsl(18 89% 68%); /* #F27A67 */
+  --color-sunglow-50: hsl(0 14% 98%); /* #FAF7F7 */
+  --color-sunglow-100: hsl(8 22% 96%); /* #F4EDEC */
+  --color-sunglow-200: hsl(8 22% 94%); /* #F3E7E4 */
+  --color-sunglow-300: hsl(10 67% 94%); /* #F8E0DB */
+  --color-sunglow-400: hsl(11 70% 91%); /* #F8D4CD */
+  --color-sunglow-500: hsl(8 89% 87%); /* #FBC8BF */
+  --color-sunglow-600: hsl(10 89% 84%); /* #FABCB1 */
+  --color-sunglow-700: hsl(10 78% 78%); /* #F4A89B */
+  --color-sunglow-800: hsl(10 84% 72%); /* #F39282 */
+  --color-sunglow-900: hsl(18 89% 68%); /* #F27A67 */
+  --color-sunglow-foreground: hsl(240 10% 3.9%); /* #0A0A0A */
+
+  /* Winter Sky Palette */
+  --color-winter-sky-600: hsl(180 10% 97%); /* #F7FAFA */
+  --color-winter-sky-700: hsl(180 12% 96%); /* #F5F7F7 */
+  --color-winter-sky-800: hsl(180 16% 94%); /* #EFF3F3 */
+  --color-winter-sky-900: hsl(184 18% 89%); /* #E1EBEA */
+
+  /* Butter Palette */
+  --color-butter-800: hsl(48 100% 93%); /* #FFF6D7 */
+  --color-butter-900: hsl(48 72% 84%); /* #F2E6BC */
+  --color-butter-foreground: hsl(240 10% 3.9%); /* #312847 */
+}