@music-vine/cadence 2.7.0 → 3.0.0

package/dist/styles/index.v4.css

@@ -1,49 +0,0 @@
-/**
- * Cadence Design System - Tailwind CSS v4 Entry Point
- *
- * This is the main stylesheet for Cadence when using Tailwind CSS v4.
- * Import this in your application after importing the Tailwind v4 config.
- *
- * @example
- * // app.css
- * @import "tailwindcss";
- * @import "@music-vine/cadence/tailwind.config.v4";
- * @import "@music-vine/cadence/styles.v4";
- *
- * @source "./src/**\/*.{js,ts,jsx,tsx}";
- */
-
-/* ================================
-   Base Layer - CSS Variables
-   ================================ */
-@layer base {
-  :root {
-    /* Brand Colors - Themeable */
-    --brand-primary: #f23d75;
-    --brand-primary-hover: #df1f64;
-    --brand-primary-active: #bc1454;
-    --brand-secondary: #fff1f4;
-    --brand-secondary-hover: #ffe4ea;
-    --background: #fff;
-    --foreground: #151a20;
-
-    /* Focus Ring - Follows brand color */
-    --focus-ring: var(--brand-primary);
-    --focus-ring-offset: var(--background);
-  }
-
-  .theme-dark {
-    /* Brand Colors (same in dark mode) */
-    --brand-primary: #f23d75;
-    --brand-primary-hover: #df1f64;
-    --brand-primary-active: #bc1454;
-    --brand-secondary: #461f34;
-    --brand-secondary-hover: #5f152e;
-    --background: #151a20;
-    --foreground: #fff;
-
-    /* Focus Ring - Follows brand color */
-    --focus-ring: var(--brand-primary);
-    --focus-ring-offset: var(--background);
-  }
-}

package/tailwind.config.ts

@@ -1,313 +0,0 @@
-import * as containerQueries from "@tailwindcss/container-queries";
-import * as animate from "tailwindcss-animate";
-import type { Config } from "tailwindcss-v3";
-
-/**
- * Cadence Design System - Tailwind Configuration
- *
- * This config can be used as a preset in consuming applications:
- *
- * @example
- * // tailwind.config.ts
- * import cadencePreset from '@music-vine/cadence/tailwind.config';
- *
- * export default {
- *   presets: [cadencePreset],
- *   content: ['./src/**\/*.{ts,tsx}'],
- * } satisfies Config;
- */
-
-const cadenceConfig: Config = {
-  content: ["./src/**/*.{ts,tsx}"],
-  darkMode: ["selector", ".theme-dark"],
-  theme: {
-    screens: {
-      xxs: "24rem",
-      xs: "36rem",
-      sm: "40rem",
-      md: "48rem",
-      lg: "64rem",
-      xl: "80rem",
-      "2xl": "96rem",
-      "3xl": "125rem",
-    },
-    fontSize: {
-      xxs: [
-        "0.625rem",
-        {
-          lineHeight: "1rem",
-          letterSpacing: "0rem",
-        },
-      ],
-      xs: [
-        "0.75rem",
-        {
-          lineHeight: "1rem",
-          letterSpacing: "0.004rem",
-        },
-      ],
-      sm: [
-        "0.875rem",
-        {
-          lineHeight: "1.25rem",
-          letterSpacing: "0.0025rem",
-        },
-      ],
-      base: [
-        "1rem",
-        {
-          lineHeight: "1.5rem",
-          letterSpacing: "0.005rem",
-        },
-      ],
-      lg: [
-        "1.125rem",
-        {
-          lineHeight: "1.75rem",
-          letterSpacing: "0.0015rem",
-        },
-      ],
-      xl: [
-        "1.25rem",
-        {
-          lineHeight: "2rem",
-          letterSpacing: "0rem",
-        },
-      ],
-      "2xl": [
-        "1.5rem",
-        {
-          lineHeight: "2rem",
-          letterSpacing: "0rem",
-        },
-      ],
-      "3xl": [
-        "1.875rem",
-        {
-          lineHeight: "2.25rem",
-          letterSpacing: "0rem",
-        },
-      ],
-      "4xl": [
-        "2.25rem",
-        {
-          lineHeight: "2.5rem",
-          letterSpacing: "-0.063rem",
-        },
-      ],
-      "5xl": [
-        "3rem",
-        {
-          lineHeight: "3.25rem",
-          letterSpacing: "-0.125rem",
-        },
-      ],
-      "6xl": [
-        "3.75rem",
-        {
-          lineHeight: "4.25rem",
-          letterSpacing: "-0.125rem",
-        },
-      ],
-      "7xl": [
-        "4.5rem",
-        {
-          lineHeight: "5rem",
-          letterSpacing: "-0.125rem",
-        },
-      ],
-      "8xl": [
-        "6rem",
-        {
-          lineHeight: "6.5rem",
-          letterSpacing: "-0.188rem",
-        },
-      ],
-      "9xl": [
-        "8rem",
-        {
-          lineHeight: "8rem",
-          letterSpacing: "-0.015rem",
-        },
-      ],
-    },
-    colors: {
-      inherit: "inherit",
-      current: "currentColor",
-      transparent: "transparent",
-      black: "#151A20",
-      white: "#FFF",
-
-      // Brand colors - themeable via CSS variables
-      brand: {
-        primary: "var(--brand-primary, #F23D75)",
-        "primary-hover": "var(--brand-primary-hover, #DF1F64)",
-        "primary-active": "var(--brand-primary-active, #BC1454)",
-        secondary: "var(--brand-secondary, #FFF1F4)",
-        "secondary-hover": "var(--brand-secondary-hover, #FFE4EA)",
-      },
-
-      // Color scales - direct hex values for proper dark mode support
-      gray: {
-        50: "#F5F6F7",
-        100: "#EDEEF0",
-        150: "#E3E5E7",
-        200: "#D9DBDE",
-        300: "#C5C7CB",
-        400: "#B4B6BA",
-        500: "#A3A6AB",
-        600: "#7B818A",
-        700: "#5A646F",
-        800: "#3D4653",
-        850: "#323A45",
-        875: "#292F38",
-        900: "#1D232C",
-        950: "#151A20",
-      },
-      pink: {
-        50: "#FFF1F4",
-        100: "#FFE4EA",
-        200: "#FECDDA",
-        300: "#FCA5BC",
-        400: "#F47299",
-        500: "#F23D75",
-        600: "#DF1F64",
-        700: "#BC1454",
-        800: "#871447",
-        900: "#5F152E",
-        950: "#461F34",
-      },
-      green: {
-        light: "#DEF7EA",
-        DEFAULT: "#33CA7F",
-        dark: "#2CAF6E",
-        50: "#E9FADA",
-        100: "#D4F6C1",
-        200: "#A5E4C8",
-        300: "#7AD6B0",
-        400: "#A1D879",
-        500: "#67994D",
-        600: "#4D7A33",
-        650: "#3F672A",
-        700: "#355222",
-        800: "#064C38",
-        900: "#253D17",
-        950: "#1A2810",
-      },
-      red: {
-        DEFAULT: "#FC5252",
-        50: "#FDECEC",
-        100: "#FFC9C9",
-        200: "#FFA8A8",
-        300: "#FF6B6B",
-        400: "#FF7B73",
-        500: "#E15757",
-        600: "#C03E3E",
-        700: "#9B2828",
-        800: "#800E0E",
-        900: "#721B1B",
-        950: "#4D1212",
-      },
-      blue: {
-        special: {
-          light: "#EAF3FE",
-          dark: "#5C98F3",
-        },
-        50: "#EAF3FE",
-        100: "#DFF9FD",
-        200: "#D6F7FB",
-        300: "#CCF4FC",
-        400: "#8AB8FF",
-        500: "#5C98F3",
-        600: "#18BADB",
-        700: "#129BC0",
-        800: "#0D86A9",
-        900: "#097495",
-        950: "#1E324D",
-      },
-      purple: {
-        50: "#F8EAFE",
-        400: "#DDA5FB",
-        500: "#8F5DAF",
-        950: "#473D57",
-      },
-      yellow: {
-        50: "#FFF3D1",
-        400: "#FFD34C",
-        500: "#FFB452",
-        950: "#443F29",
-      },
-      free: {
-        lighter: "#e6fcff",
-        light: "#D1F7FF80",
-        DEFAULT: "#37CFED",
-        dark: "#0AAFD0",
-      },
-      explicit: "#A72525",
-      credit: "#37CFED",
-    },
-    extend: {
-      borderRadius: {
-        sm: "4px",
-      },
-      fontFamily: {
-        sans: ["DM Sans", "system-ui", "sans-serif"],
-        // --font-heading should be defined by the consuming app (e.g., "Aeonik Fono Pro")
-        // Falls back to DM Sans if not defined
-        heading: [
-          'var(--font-heading, "DM Sans")',
-          "DM Sans",
-          "system-ui",
-          "sans-serif",
-        ],
-      },
-      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" },
-        },
-        fadeIn: {
-          from: { opacity: "0" },
-          to: { opacity: "1" },
-        },
-        fadeOut: {
-          from: { opacity: "1" },
-          to: { opacity: "0" },
-        },
-        slideDownAndFade: {
-          from: { opacity: "0", transform: "translateY(-2px)" },
-          to: { opacity: "1", transform: "translateY(0)" },
-        },
-        slideUpAndFade: {
-          from: { opacity: "0", transform: "translateY(2px)" },
-          to: { opacity: "1", transform: "translateY(0)" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-        fadeIn: "fadeIn 350ms cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards",
-        fadeOut: "fadeOut 350ms cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards",
-        slideDownAndFade:
-          "slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-        slideUpAndFade: "slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)",
-      },
-      boxShadow: {
-        card: "0px 1px 8px 0px rgba(0, 0, 0, 0.05)",
-        glow: "0px 1px 4px 0.5px #F23D75",
-        50: "0 1px 4px 0 rgba(21, 26, 32, 0.04)",
-        100: "0 6px 12px 0 rgba(21, 26, 32, 0.12)",
-      },
-      borderWidth: {
-        1: "1px",
-      },
-    },
-  },
-  plugins: [animate, containerQueries],
-};
-
-export default cadenceConfig;