@datum-cloud/datum-ui 0.1.0 → 0.2.0-alpha.0

package/src/styles/custom.css

@@ -1,27 +0,0 @@
-/**
- * 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

@@ -1,51 +0,0 @@
-/* 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

@@ -1,28 +0,0 @@
-@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

@@ -1,421 +0,0 @@
-/**
- * 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

@@ -1,57 +0,0 @@
-/**
- * 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 */
-}