@ginia/ui 0.1.1

package/src/tokens/colors.ts

@@ -0,0 +1,117 @@
+export const colors = {
+  primary: {
+    DEFAULT: "#110E3D",
+    dark: "#0D0B2F",
+    light: "#1A1649",
+    foreground: "#FFFFFF",
+  },
+  secondary: {
+    DEFAULT: "#A476FF",
+    foreground: "#FFFFFF",
+  },
+  background: {
+    DEFAULT: "#F3F3E8",
+  },
+  foreground: {
+    DEFAULT: "#110E3D",
+  },
+  accent: {
+    DEFAULT: "#F1EA88",
+    foreground: "#110E3D",
+    blue: "#03CADD",
+    blueForeground: "#FFFFFF",
+  },
+  muted: {
+    DEFAULT: "#F0F0E6",
+    foreground: "#5C5880",
+  },
+  card: {
+    DEFAULT: "#FFFFFF",
+    foreground: "#110E3D",
+  },
+  popover: {
+    DEFAULT: "#FFFFFF",
+    foreground: "#110E3D",
+  },
+  border: "#EDEDDF",
+  input: "#EDEDDF",
+  ring: "#110E3D",
+  destructive: {
+    DEFAULT: "#E53E3E",
+    foreground: "#FFFFFF",
+  },
+  success: {
+    DEFAULT: "#22C55E",
+    foreground: "#FFFFFF",
+  },
+  warning: {
+    DEFAULT: "#F59E0B",
+    foreground: "#FFFFFF",
+  },
+  chart: {
+    1: "#110E3D",
+    2: "#A476FF",
+    3: "#F1EA88",
+    4: "#03CADD",
+    5: "#F3F3E8",
+  },
+} as const;
+
+export const colorsDark = {
+  primary: {
+    DEFAULT: "#A476FF",
+    dark: "#8A52FF",
+    light: "#C4A6FF",
+    foreground: "#171327",
+  },
+  secondary: {
+    DEFAULT: "#2A2447",
+    foreground: "#FFFFFF",
+  },
+  background: {
+    DEFAULT: "#171327",
+  },
+  foreground: {
+    DEFAULT: "#FFFFFF",
+  },
+  accent: {
+    DEFAULT: "#F1EA88",
+    foreground: "#171327",
+    blue: "#03CADD",
+    blueForeground: "#FFFFFF",
+  },
+  muted: {
+    DEFAULT: "#2A2447",
+    foreground: "#9E96C0",
+  },
+  card: {
+    DEFAULT: "#1F1A38",
+    foreground: "#FFFFFF",
+  },
+  popover: {
+    DEFAULT: "#1F1A38",
+    foreground: "#FFFFFF",
+  },
+  border: "#2A2447",
+  input: "#2A2447",
+  ring: "#A476FF",
+  destructive: {
+    DEFAULT: "#7F1D1D",
+    foreground: "#FFFFFF",
+  },
+  success: {
+    DEFAULT: "#15803D",
+    foreground: "#FFFFFF",
+  },
+  warning: {
+    DEFAULT: "#B45309",
+    foreground: "#FFFFFF",
+  },
+  chart: {
+    1: "#A476FF",
+    2: "#F1EA88",
+    3: "#03CADD",
+    4: "#110E3D",
+    5: "#2A2447",
+  },
+} as const;

package/src/tokens/index.ts

@@ -0,0 +1,3 @@
+export { colors, colorsDark } from "./colors";
+export { fontFamily, fontWeight } from "./typography";
+export { borderRadius, shadows } from "./spacing";

package/src/tokens/spacing.ts

@@ -0,0 +1,16 @@
+export const borderRadius = {
+  sm: "calc(0.5rem - 4px)",
+  md: "calc(0.5rem - 2px)",
+  lg: "0.5rem",
+  xl: "1rem",
+  "2xl": "1.5rem",
+  "3xl": "2rem",
+  full: "9999px",
+} as const;
+
+export const shadows = {
+  sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
+  md: "0 4px 6px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px rgba(0, 0, 0, 0.1)",
+  card: "0 1px 2px rgba(17, 14, 61, 0.08)",
+} as const;

package/src/tokens/typography.ts

@@ -0,0 +1,10 @@
+export const fontFamily = {
+  sans: ['"Mozilla Text"', "system-ui", "-apple-system", "sans-serif"],
+} as const;
+
+export const fontWeight = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+} as const;

package/tailwind.preset.js

@@ -0,0 +1,139 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      /* ---- Typography ---- */
+      fontFamily: {
+        sans: ['"Mozilla Text"', "system-ui", "-apple-system", "sans-serif"],
+      },
+
+      /* ---- Colors (HSL CSS Variable references — shadcn convention) ---- */
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+          dark: "hsl(var(--primary-dark))",
+          light: "hsl(var(--primary-light))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          foreground: "hsl(var(--success-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+          blue: "hsl(var(--accent-blue))",
+          "blue-foreground": "hsl(var(--accent-blue-foreground))",
+        },
+        "brand-yellow": {
+          DEFAULT: "hsl(var(--brand-yellow))",
+          foreground: "hsl(var(--brand-yellow-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+
+      /* ---- Border Radius ---- */
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+        xl: "1rem",
+        "2xl": "1.5rem",
+        "3xl": "2rem",
+      },
+
+      /* ---- Box Shadows ---- */
+      boxShadow: {
+        sm: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        md: "0 4px 6px rgba(0, 0, 0, 0.1)",
+        lg: "0 10px 15px rgba(0, 0, 0, 0.1)",
+        card: "0 1px 2px rgba(17, 14, 61, 0.08)",
+      },
+
+      /* ---- Keyframes ---- */
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+        "dialog-in": {
+          from: {
+            opacity: "0",
+            transform: "translate(-50%, -50%) scale(0.95)",
+          },
+          to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
+        },
+        "dialog-out": {
+          from: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
+          to: { opacity: "0", transform: "translate(-50%, -50%) scale(0.95)" },
+        },
+        "fade-in": {
+          from: { opacity: "0" },
+          to: { opacity: "1" },
+        },
+        "fade-out": {
+          from: { opacity: "1" },
+          to: { opacity: "0" },
+        },
+        "slide-in-from-top": {
+          from: { transform: "translateY(-100%)" },
+          to: { transform: "translateY(0)" },
+        },
+        "slide-in-from-bottom": {
+          from: { transform: "translateY(100%)" },
+          to: { transform: "translateY(0)" },
+        },
+        "spin-slow": {
+          from: { transform: "rotate(0deg)" },
+          to: { transform: "rotate(360deg)" },
+        },
+      },
+
+      /* ---- Animations ---- */
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+        "dialog-in": "dialog-in 0.2s ease-out",
+        "dialog-out": "dialog-out 0.2s ease-out",
+        "fade-in": "fade-in 0.2s ease-out",
+        "fade-out": "fade-out 0.2s ease-out",
+        "slide-in-from-top": "slide-in-from-top 0.3s ease-out",
+        "slide-in-from-bottom": "slide-in-from-bottom 0.3s ease-out",
+        "spin-slow": "spin-slow 2s linear infinite",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate"), require("@tailwindcss/typography")],
+};