@danielito1996/compose-svelted 0.0.1

package/src/lib/core/shapes/Shape.ts

@@ -0,0 +1,3 @@
+export interface Shape {
+    toCssBorderRadius(): string;
+}

package/src/lib/core/theme/ColorScheme.ts

@@ -0,0 +1,25 @@
+import type { ColorScheme as Def } from "./colors";
+
+export type ColorToken = keyof Def;
+
+export const ColorScheme = {
+    Primary: "primary",
+    OnPrimary: "onPrimary",
+
+    Secondary: "secondary",
+    OnSecondary: "onSecondary",
+
+    Background: "background",
+    OnBackground: "onBackground",
+
+    Surface: "surface",
+    OnSurface: "onSurface",
+
+    SurfaceVariant: "surfaceVariant",
+    OnSurfaceVariant: "onSurfaceVariant",
+
+    Outline: "outline",
+
+    Error: "error",
+    OnError: "onError",
+} as const;

package/src/lib/core/theme/ComposeTheme.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import { themeState, resolvedTheme } from "./store";
+    import { themeToCssVars } from "./cssVars";
+    import { defaultLightTheme, defaultDarkTheme } from "./defaults/defaultTheme";
+    import type { ComposeTheme as Theme, ThemeMode } from "./theme";
+
+    export let light: Theme | undefined = undefined;
+    export let dark: Theme | undefined = undefined;
+    export let mode: ThemeMode = "system";
+
+    $: themeState.set({
+        light: light ?? defaultLightTheme,
+        dark: dark ?? defaultDarkTheme,
+        mode,
+    });
+
+    $: css = $resolvedTheme ? themeToCssVars($resolvedTheme) : "";
+</script>
+
+<div style={css}>
+    <slot />
+</div>

package/src/lib/core/theme/TextStyle.ts

@@ -0,0 +1,25 @@
+import type { Typography } from "./typography";
+
+export type TextStyleToken = keyof Typography;
+
+export const TextStyle = {
+    DisplayLarge: "displayLarge",
+    DisplayMedium: "displayMedium",
+    DisplaySmall: "displaySmall",
+
+    HeadlineLarge: "headlineLarge",
+    HeadlineMedium: "headlineMedium",
+    HeadlineSmall: "headlineSmall",
+
+    TitleLarge: "titleLarge",
+    TitleMedium: "titleMedium",
+    TitleSmall: "titleSmall",
+
+    BodyLarge: "bodyLarge",
+    BodyMedium: "bodyMedium",
+    BodySmall: "bodySmall",
+
+    LabelLarge: "labelLarge",
+    LabelMedium: "labelMedium",
+    LabelSmall: "labelSmall",
+} as const;

package/src/lib/core/theme/colors.ts

@@ -0,0 +1,21 @@
+export interface ColorScheme {
+    primary: string;
+    onPrimary: string;
+
+    secondary: string;
+    onSecondary: string;
+
+    background: string;
+    onBackground: string;
+
+    surface: string;
+    onSurface: string;
+
+    surfaceVariant: string;
+    onSurfaceVariant: string;
+
+    outline: string;
+
+    error: string;
+    onError: string;
+}

package/src/lib/core/theme/cssVars.ts

@@ -0,0 +1,32 @@
+import type { ComposeTheme } from "./theme";
+
+export function themeToCssVars(theme: ComposeTheme): string {
+    const vars: string[] = [];
+
+    Object.entries(theme.colorScheme).forEach(([k, v]) =>
+        vars.push(`--md-sys-color-${k}: ${v};`)
+    );
+
+    // === Tipografía: una variable por cada propiedad (¡esto soluciona el bug!) ===
+    Object.entries(theme.typography).forEach(([styleKey, style]) => {
+        vars.push(`--md-sys-typescale-${styleKey}-font-family: ${style.fontFamily};`);
+        vars.push(`--md-sys-typescale-${styleKey}-font-size: ${style.fontSize};`);
+        vars.push(`--md-sys-typescale-${styleKey}-line-height: ${style.lineHeight};`);
+        vars.push(`--md-sys-typescale-${styleKey}-letter-spacing: ${style.letterSpacing};`);
+        vars.push(`--md-sys-typescale-${styleKey}-font-weight: ${style.fontWeight};`);
+    });
+
+    Object.entries(theme.shapes).forEach(([k, v]) =>
+        vars.push(`--md-sys-shape-${k}: ${v};`)
+    );
+
+    Object.entries(theme.elevation).forEach(([k, v]) =>
+        vars.push(`--md-sys-elevation-${k}: ${v};`)
+    );
+
+    Object.entries(theme.spacing).forEach(([k, v]) =>
+        vars.push(`--md-sys-spacing-${k}: ${v};`)
+    );
+
+    return vars.join("\n");
+}

package/src/lib/core/theme/defaults/darkColors.ts

@@ -0,0 +1,17 @@
+import type { ColorScheme } from "../colors";
+
+export const darkColors: ColorScheme = {
+    primary: "#FFD700",
+    onPrimary: "#080808",
+    secondary: "#3A3E49",
+    onSecondary: "#E6E6E6",
+    background: "#080808",
+    onBackground: "#E6E6E6",
+    surface: "#101010",
+    onSurface: "#E6E6E6",
+    surfaceVariant: "#1E1E1E",
+    onSurfaceVariant: "#CAC4D0",
+    outline: "#4A4A4A",
+    error: "#FF6F61",
+    onError: "#080808",
+};

package/src/lib/core/theme/defaults/defaultTheme.ts

@@ -0,0 +1,35 @@
+import { lightColors } from "./lightColors"
+import { darkColors } from "./darkColors"
+import { defaultTypography } from "./typography"
+import type { ComposeTheme } from "../theme"
+
+export const defaultLightTheme: ComposeTheme = {
+    colorScheme: lightColors,
+    typography: defaultTypography,
+    shapes: {
+        none: "0px",
+        extraSmall: "4px",
+        small: "8px",
+        medium: "12px",
+        large: "16px",
+    },
+    spacing: {
+        xs: "4px",
+        sm: "8px",
+        md: "16px",
+        lg: "24px",
+        xl: "32px",
+    },
+    elevation: {
+        level0: "none",
+        level1: "0 1px 2px rgba(0,0,0,0.2)",
+        level2: "0 2px 6px rgba(0,0,0,0.2)",
+        level3: "0 6px 12px rgba(0,0,0,0.25)",
+        level4: "0 12px 24px rgba(0,0,0,0.3)",
+    },
+}
+
+export const defaultDarkTheme: ComposeTheme = {
+    ...defaultLightTheme,
+    colorScheme: darkColors,
+}

package/src/lib/core/theme/defaults/lightColors.ts

@@ -0,0 +1,17 @@
+import type { ColorScheme } from "../colors";
+
+export const lightColors: ColorScheme = {
+    primary: "#D4AF37",        // Violeta más intenso
+    onPrimary: "#080808",
+    secondary: "#3A3E49",      // Teal vibrante
+    onSecondary: "#FFFFFF",
+    background: "#FFFBF2",
+    onBackground: "#1C1B1F",
+    surface: "#FFFFFF",
+    onSurface: "#1C1B1F",
+    surfaceVariant: "#F8F9FA",
+    onSurfaceVariant: "#DEE1E6",
+    outline: "#B0B0B0",
+    error: "#BA1A1A",
+    onError: "#FFFFFF",
+};

package/src/lib/core/theme/defaults/typography.ts

@@ -0,0 +1,128 @@
+import type { Typography } from "../typography";
+
+/**
+ * Material Design 3 - Type Scale
+ * Nombres EXACTOS a Jetpack Compose Material 3:
+ * displayLarge, displayMedium, displaySmall,
+ * headlineLarge, headlineMedium, headlineSmall,
+ * titleLarge, titleMedium, titleSmall,
+ * bodyLarge, bodyMedium, bodySmall,
+ * labelLarge, labelMedium, labelSmall
+ *
+ * Valores (size/lineHeight/letterSpacing/fontWeight) corresponden a MD3.
+ * fontFamily: system stack por defecto (overrideable por el consumidor).
+ */
+const fontFamily =
+    "system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif";
+
+export const defaultTypography: Typography = {
+    displayLarge: {
+        fontFamily,
+        fontSize: "57px",
+        lineHeight: "64px",
+        letterSpacing: "-0.25px",
+        fontWeight: 400,
+    },
+    displayMedium: {
+        fontFamily,
+        fontSize: "45px",
+        lineHeight: "52px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    displaySmall: {
+        fontFamily,
+        fontSize: "36px",
+        lineHeight: "44px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+
+    headlineLarge: {
+        fontFamily,
+        fontSize: "32px",
+        lineHeight: "40px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    headlineMedium: {
+        fontFamily,
+        fontSize: "28px",
+        lineHeight: "36px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    headlineSmall: {
+        fontFamily,
+        fontSize: "24px",
+        lineHeight: "32px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+
+    titleLarge: {
+        fontFamily,
+        fontSize: "22px",
+        lineHeight: "28px",
+        letterSpacing: "0px",
+        fontWeight: 400,
+    },
+    titleMedium: {
+        fontFamily,
+        fontSize: "16px",
+        lineHeight: "24px",
+        letterSpacing: "0.15px",
+        fontWeight: 500,
+    },
+    titleSmall: {
+        fontFamily,
+        fontSize: "14px",
+        lineHeight: "20px",
+        letterSpacing: "0.1px",
+        fontWeight: 500,
+    },
+
+    bodyLarge: {
+        fontFamily,
+        fontSize: "16px",
+        lineHeight: "24px",
+        letterSpacing: "0.5px",
+        fontWeight: 400,
+    },
+    bodyMedium: {
+        fontFamily,
+        fontSize: "14px",
+        lineHeight: "20px",
+        letterSpacing: "0.25px",
+        fontWeight: 400,
+    },
+    bodySmall: {
+        fontFamily,
+        fontSize: "12px",
+        lineHeight: "16px",
+        letterSpacing: "0.4px",
+        fontWeight: 400,
+    },
+
+    labelLarge: {
+        fontFamily,
+        fontSize: "14px",
+        lineHeight: "20px",
+        letterSpacing: "0.1px",
+        fontWeight: 500,
+    },
+    labelMedium: {
+        fontFamily,
+        fontSize: "12px",
+        lineHeight: "16px",
+        letterSpacing: "0.5px",
+        fontWeight: 500,
+    },
+    labelSmall: {
+        fontFamily,
+        fontSize: "11px",
+        lineHeight: "16px",
+        letterSpacing: "0.5px",
+        fontWeight: 500,
+    },
+};

package/src/lib/core/theme/elevation.ts

@@ -0,0 +1,7 @@
+export interface Elevation {
+    level0: string;
+    level1: string;
+    level2: string;
+    level3: string;
+    level4: string;
+}

package/src/lib/core/theme/getCurrentColor.ts

@@ -0,0 +1,10 @@
+import { get } from "svelte/store";
+import { resolvedTheme } from "./store";
+
+export function getCurrentColor(token: string): string {
+    const theme = get(resolvedTheme);
+    if (!theme) return "#2a2a2a"; // fallback
+
+    // Buscamos el token en el colorScheme actual
+    return theme.colorScheme[token as keyof typeof theme.colorScheme] || "#2a2a2a";
+}

package/src/lib/core/theme/resolve.ts

@@ -0,0 +1,29 @@
+import type { ColorToken } from "./ColorScheme";
+import type { TextStyleToken } from "./TextStyle";
+
+export const resolveColor = (c: ColorToken) =>
+    `var(--md-sys-color-${c})`;
+
+export function resolveTintColor(color: ColorToken | string): string {
+    if (color.startsWith("#") || color.startsWith("rgb") || color.startsWith("hsl")) {
+        return color; // directo
+    }
+
+    // Para token del tema, resolvemos var a hex/RGB real usando getComputedStyle
+    const dummy = document.createElement("div");
+    dummy.style.color = resolveColor(color as ColorToken); // var(--...)
+    document.body.appendChild(dummy);
+    const computed = getComputedStyle(dummy).color; // rgb(...) o hex
+    document.body.removeChild(dummy);
+
+    return computed;
+}
+
+// Ahora resolvemos cada propiedad por separado
+export const resolveTextStyle = (t: TextStyleToken) => `
+    font-family: var(--md-sys-typescale-${t}-font-family);
+    font-size: var(--md-sys-typescale-${t}-font-size);
+    line-height: var(--md-sys-typescale-${t}-line-height);
+    letter-spacing: var(--md-sys-typescale-${t}-letter-spacing);
+    font-weight: var(--md-sys-typescale-${t}-font-weight);
+`;

package/src/lib/core/theme/shapes.ts

@@ -0,0 +1,7 @@
+export interface Shapes {
+    none: string;
+    extraSmall: string;
+    small: string;
+    medium: string;
+    large: string;
+}

package/src/lib/core/theme/spacing.ts

@@ -0,0 +1,7 @@
+export interface Spacing {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}

package/src/lib/core/theme/store.ts

@@ -0,0 +1,26 @@
+import { writable, derived } from "svelte/store";
+import type { ComposeTheme, ThemeMode } from "./theme";
+import { systemTheme } from "./systemTheme";
+
+export const themeState = writable<{
+    light: ComposeTheme;
+    dark: ComposeTheme;
+    mode: ThemeMode;
+} | null>(null);
+
+// 🔑 ESTE es el tema efectivo (como MaterialTheme)
+export const resolvedTheme = derived(
+    [themeState, systemTheme],
+    ([$theme, $system]) => {
+        if (!$theme) return null;
+
+        const mode =
+            $theme.mode === "system"
+                ? $system
+                : $theme.mode;
+
+        return mode === "dark"
+            ? $theme.dark
+            : $theme.light;
+    }
+);

package/src/lib/core/theme/systemTheme.ts

@@ -0,0 +1,20 @@
+import { readable } from "svelte/store";
+
+export type SystemTheme = "light" | "dark";
+
+export const systemTheme = readable<SystemTheme>("light", (set) => {
+    if (typeof window === "undefined") return;
+
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+
+    const update = () => {
+        set(media.matches ? "dark" : "light");
+    };
+
+    update(); // estado inicial
+    media.addEventListener("change", update);
+
+    return () => {
+        media.removeEventListener("change", update);
+    };
+});

package/src/lib/core/theme/theme.ts

@@ -0,0 +1,15 @@
+import type { ColorScheme } from "./colors";
+import type { Typography } from "./typography";
+import type { Shapes } from "./shapes";
+import type { Spacing } from "./spacing";
+import type { Elevation } from "./elevation";
+
+export interface ComposeTheme {
+    colorScheme: ColorScheme;
+    typography: Typography;
+    shapes: Shapes;
+    spacing: Spacing;
+    elevation: Elevation;
+}
+
+export type ThemeMode = "light" | "dark" | "system";

package/src/lib/core/theme/typography.ts

@@ -0,0 +1,29 @@
+export interface TextStyle {
+    fontFamily: string;
+    fontSize: string;
+    lineHeight: string;
+    letterSpacing: string;
+    fontWeight: number;
+}
+
+export interface Typography {
+    displayLarge: TextStyle;
+    displayMedium: TextStyle;
+    displaySmall: TextStyle;
+
+    headlineLarge: TextStyle;
+    headlineMedium: TextStyle;
+    headlineSmall: TextStyle;
+
+    titleLarge: TextStyle;
+    titleMedium: TextStyle;
+    titleSmall: TextStyle;
+
+    bodyLarge: TextStyle;
+    bodyMedium: TextStyle;
+    bodySmall: TextStyle;
+
+    labelLarge: TextStyle;
+    labelMedium: TextStyle;
+    labelSmall: TextStyle;
+}

package/src/lib/index.ts

@@ -0,0 +1,42 @@
+// =========================
+// COMPONENTS (Svelte)
+// =========================
+// LAYOUTS
+export { default as ComposeTheme } from "./core/theme/ComposeTheme.svelte";
+export { default as AppRoot } from "./components/AppRoot.svelte"
+// COMPONENTS
+export { default as Surface } from "./components/Surface.svelte";
+export { default as Text } from "./components/Text.svelte";
+export { default as Column } from "./components/layouts/Column.svelte";
+export { default as Row } from "./components/layouts/Row.svelte";
+export { default as Box } from "./components/layouts/Box.svelte";
+export { default as Spacer } from "./components/Spacer.svelte"
+export { default as Button } from "./components/buttons/Button.svelte"
+export { default as IconButton } from "./components/buttons/IconButton.svelte"
+export { default as ButtonWithIcon } from "./components/buttons/ButtonWithIcon.svelte"
+export { default as OutlinedIconButton } from "./components/buttons/OutlinedButton.svelte"
+export { default as OutlinedButtonWithIcon } from "./components/buttons/OutlinedButtonWithIcon.svelte"
+export { default as TextButton } from "./components/buttons/TextButton.svelte"
+export { default as OutlinedButton } from "./components/buttons/OutlinedButton.svelte"
+export { default as Card } from "./components/cards/Card.svelte"
+export { default as OutlinedCard } from "./components/cards/OutlinedCard.svelte"
+export { default as TextField } from "./components/textFields/TextField.svelte"
+export { default as OutlinedTextField } from "./components/textFields/OutlinedTextField.svelte"
+export { default as TonalButton } from "./components/TonalButton.svelte"
+export { default as LazyColumn } from "./components/layouts/LazyColumn.svelte"
+export { default as LazyRow } from "./components/layouts/LazyRow.svelte"
+export { default as Icon } from "./components/Icon.svelte"
+export { default as Image } from "./components/Image.svelte"
+
+// =========================
+// TOKENS / API (TS only)
+// =========================
+export * from "./core/shapes/RoundedCornerShape"
+export * from "./core/theme/ColorScheme";
+export * from "./core/theme/TextStyle";
+export * from "./core/modifier/Modifier"
+export * from "./components/layouts/Arrangement";
+export * from "./components/layouts/Alignment";
+export * from "./components/ContentScale"
+export * from "./core/helpers/painterResource"
+export * from "./components/ContentScale"

package/src/main.ts

@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app')!,
+})
+
+export default app

package/svelte.config.js

@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

package/tsconfig.app.json

@@ -0,0 +1,21 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "types": ["svelte", "vite/client"],
+    "noEmit": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "moduleDetection": "force"
+  },
+  "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+      svelte(),
+      tailwindcss(),
+  ],
+})