@mediquo/medicore 0.1.0

package/dist/styles/tokens.css

@@ -0,0 +1,253 @@
+/*
+ * MediCore semantic tokens, 1:1 with the Figma variable collections
+ * (Semantic, Radius, Typography, Sizing) and the Elevation effect styles.
+ *
+ * `static` so every token is emitted even if no utility uses it: apps read them
+ * with var(--color-*) in their own CSS and override the brand ones per clinic.
+ *
+ * Spacing is NOT redefined: Tailwind's default scale (1 = 4px) already covers every
+ * Figma space-* token, and changing it would break the consuming apps' own classes.
+ * space-2 → 0.5 · 4 → 1 · 6 → 1.5 · 8 → 2 · 10 → 2.5 · 12 → 3 · 16 → 4 · 20 → 5
+ * 24 → 6 · 32 → 8 · 40 → 10 · 48 → 12 · 60 → 15 · 64 → 16
+ */
+@theme static {
+  /* Typography. Figma uses Inter as a stand-in; production is Scoop. */
+  --font-sans: "Scoop", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
+
+  --text-xxs: 10px;
+  --text-xxs--line-height: 1.35;
+
+  --leading-tighter: 1.1;
+  --leading-tight: 1.2;
+  --leading-snug: 1.35;
+  --leading-normal: 1.5;
+  --leading-relaxed: 1.62;
+
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0em;
+  --tracking-wide: 0.02em;
+
+  /* Radius */
+  --radius-none: 0px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 20px;
+  --radius-4xl: 32px;
+  --radius-full: 9999px;
+
+  /*
+   * Elevation, from the Figma effect styles. xs/s: card edges and resting elements ·
+   * md: menus and dropdowns · lg: Toast · xl: Modal.
+   */
+  --shadow-xs: 0 1px 2px 0 rgb(10 10 34 / 0.03);
+  --shadow-s: 0 2px 4px 0 rgb(32 21 82 / 0.04);
+  --shadow-md: 0 4px 8px 0 rgb(10 10 34 / 0.051);
+  --shadow-lg: 0 8px 16px -2px rgb(10 10 34 / 0.08);
+  --shadow-xl: 0 16px 32px -4px rgb(10 10 34 / 0.12);
+
+  /* Sizing (Figma "Sizing" collection) → size-icon-md, h-control-sm, size-avatar-lg… */
+  --spacing-icon-xs: 12px;
+  --spacing-icon-sm: 16px;
+  --spacing-icon-md: 20px;
+  --spacing-icon-lg: 24px;
+  --spacing-avatar-sm: 24px;
+  --spacing-avatar-md: 32px;
+  --spacing-avatar-lg: 40px;
+  --spacing-avatar-xl: 48px;
+  --spacing-avatar-2xl: 56px;
+  --spacing-control-sm: 36px;
+  --spacing-control-md: 40px;
+  --spacing-control-lg: 44px;
+
+  /* Motion. Always behind motion-safe: in the components. */
+  --animate-skeleton-shimmer: skeleton-shimmer 1.2s linear infinite;
+
+  @keyframes skeleton-shimmer {
+    from {
+      background-position: 100% 0;
+    }
+    to {
+      background-position: 0 0;
+    }
+  }
+
+  /* Surfaces */
+  --color-background: var(--palette-grey-white);
+  --color-surface: var(--palette-grey-50);
+  --color-surface-raised: var(--palette-grey-100);
+  --color-surface-inverse: var(--palette-purple-900);
+  --color-brand-dark: var(--palette-purple-900);
+  --color-overlay-light-subtle: var(--palette-alpha-white-5);
+  --color-overlay-light: var(--palette-alpha-white-10);
+  --color-overlay-light-strong: var(--palette-alpha-white-20);
+  --color-scrim-image: var(--palette-alpha-purple-dark-60);
+  --color-scrim-brand: var(--palette-alpha-purple-20);
+
+  /* Text + icons */
+  --color-text-primary: var(--palette-grey-950);
+  --color-text-secondary: var(--palette-grey-500);
+  --color-text-disabled: var(--palette-grey-400);
+  --color-text-inverse: var(--palette-grey-white);
+  --color-text-inverse-secondary: var(--palette-grey-200);
+  --color-text-brand: var(--palette-purple-700);
+  --color-text-link: var(--palette-blue-500);
+  --color-text-error: var(--palette-red-700);
+  --color-text-success: var(--palette-green-700);
+  --color-text-warning: var(--palette-yellow-700);
+  --color-text-info: var(--palette-blue-700);
+  --color-text-accent: var(--palette-teal-700);
+
+  /* Brand */
+  --color-brand-subtle: var(--palette-purple-50);
+  --color-brand: var(--palette-purple-700);
+  --color-brand-strong: var(--palette-purple-800);
+  --color-accent-subtle: var(--palette-teal-50);
+  --color-accent: var(--palette-teal-500);
+  --color-accent-strong: var(--palette-teal-700);
+
+  /* Borders */
+  --color-border-subtle: var(--palette-grey-100);
+  --color-border: var(--palette-grey-200);
+  --color-border-strong: var(--palette-grey-300);
+  --color-border-focus: var(--palette-purple-700);
+  --color-border-input: var(--palette-grey-500);
+  --color-border-inverse-subtle: var(--palette-alpha-white-10);
+  --color-border-inverse: var(--palette-alpha-white-20);
+
+  /* Feedback */
+  --color-success-subtle: var(--palette-green-50);
+  --color-success: var(--palette-green-500);
+  --color-success-strong: var(--palette-green-700);
+  --color-warning-subtle: var(--palette-yellow-50);
+  --color-warning: var(--palette-yellow-500);
+  --color-warning-strong: var(--palette-yellow-700);
+  --color-error-subtle: var(--palette-red-50);
+  --color-error: var(--palette-red-500);
+  --color-error-strong: var(--palette-red-700);
+  --color-info-subtle: var(--palette-blue-50);
+  --color-info: var(--palette-blue-500);
+  --color-info-strong: var(--palette-blue-700);
+}
+
+/*
+ * Dark mode. Follows the OS by default; data-theme="light" | "dark" on any element
+ * (usually <html>) forces it. Only the tokens that change between modes are listed.
+ */
+:root {
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+
+    --color-background: var(--palette-grey-900);
+    --color-surface: var(--palette-grey-800);
+    --color-surface-raised: var(--palette-grey-700);
+    --color-surface-inverse: var(--palette-grey-700);
+
+    --color-text-primary: var(--palette-grey-50);
+    --color-text-secondary: var(--palette-grey-300);
+    --color-text-disabled: var(--palette-grey-600);
+    --color-text-brand: var(--palette-purple-200);
+    --color-text-link: var(--palette-blue-300);
+    --color-text-error: var(--palette-red-300);
+    --color-text-success: var(--palette-green-500);
+    --color-text-warning: var(--palette-yellow-500);
+    --color-text-info: var(--palette-blue-300);
+    --color-text-accent: var(--palette-teal-300);
+
+    --color-brand-subtle: var(--palette-purple-900);
+    --color-brand: var(--palette-purple-500);
+    --color-brand-strong: var(--palette-purple-400);
+    --color-accent-subtle: var(--palette-teal-950);
+
+    --color-border-subtle: var(--palette-grey-800);
+    --color-border: var(--palette-grey-700);
+    --color-border-strong: var(--palette-grey-600);
+    --color-border-focus: var(--palette-purple-200);
+    --color-border-input: var(--palette-grey-400);
+
+    --color-success-subtle: var(--palette-green-950);
+    --color-warning-subtle: var(--palette-yellow-950);
+    --color-error-subtle: var(--palette-red-950);
+    --color-info-subtle: var(--palette-blue-950);
+  }
+}
+
+[data-theme="light"] {
+  color-scheme: light;
+
+  --color-background: var(--palette-grey-white);
+  --color-surface: var(--palette-grey-50);
+  --color-surface-raised: var(--palette-grey-100);
+  --color-surface-inverse: var(--palette-purple-900);
+
+  --color-text-primary: var(--palette-grey-950);
+  --color-text-secondary: var(--palette-grey-500);
+  --color-text-disabled: var(--palette-grey-400);
+  --color-text-brand: var(--palette-purple-700);
+  --color-text-link: var(--palette-blue-500);
+  --color-text-error: var(--palette-red-700);
+  --color-text-success: var(--palette-green-700);
+  --color-text-warning: var(--palette-yellow-700);
+  --color-text-info: var(--palette-blue-700);
+  --color-text-accent: var(--palette-teal-700);
+
+  --color-brand-subtle: var(--palette-purple-50);
+  --color-brand: var(--palette-purple-700);
+  --color-brand-strong: var(--palette-purple-800);
+  --color-accent-subtle: var(--palette-teal-50);
+
+  --color-border-subtle: var(--palette-grey-100);
+  --color-border: var(--palette-grey-200);
+  --color-border-strong: var(--palette-grey-300);
+  --color-border-focus: var(--palette-purple-700);
+  --color-border-input: var(--palette-grey-500);
+
+  --color-success-subtle: var(--palette-green-50);
+  --color-warning-subtle: var(--palette-yellow-50);
+  --color-error-subtle: var(--palette-red-50);
+  --color-info-subtle: var(--palette-blue-50);
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+
+  --color-background: var(--palette-grey-900);
+  --color-surface: var(--palette-grey-800);
+  --color-surface-raised: var(--palette-grey-700);
+  --color-surface-inverse: var(--palette-grey-700);
+
+  --color-text-primary: var(--palette-grey-50);
+  --color-text-secondary: var(--palette-grey-300);
+  --color-text-disabled: var(--palette-grey-600);
+  --color-text-brand: var(--palette-purple-200);
+  --color-text-link: var(--palette-blue-300);
+  --color-text-error: var(--palette-red-300);
+  --color-text-success: var(--palette-green-500);
+  --color-text-warning: var(--palette-yellow-500);
+  --color-text-info: var(--palette-blue-300);
+  --color-text-accent: var(--palette-teal-300);
+
+  --color-brand-subtle: var(--palette-purple-900);
+  --color-brand: var(--palette-purple-500);
+  --color-brand-strong: var(--palette-purple-400);
+  --color-accent-subtle: var(--palette-teal-950);
+
+  --color-border-subtle: var(--palette-grey-800);
+  --color-border: var(--palette-grey-700);
+  --color-border-strong: var(--palette-grey-600);
+  --color-border-focus: var(--palette-purple-200);
+  --color-border-input: var(--palette-grey-400);
+
+  --color-success-subtle: var(--palette-green-950);
+  --color-warning-subtle: var(--palette-yellow-950);
+  --color-error-subtle: var(--palette-red-950);
+  --color-info-subtle: var(--palette-blue-950);
+}

package/dist/styles/typography.css

@@ -0,0 +1,115 @@
+/*
+ * The 14 Figma text styles as utilities. None of them uses Bold: the heading ramp
+ * stops at SemiBold on purpose.
+ */
+@utility text-display-large {
+  font-family: var(--font-sans);
+  font-size: var(--text-5xl);
+  font-weight: 600;
+  line-height: var(--leading-tighter);
+  letter-spacing: var(--tracking-tight);
+}
+
+@utility text-display-medium {
+  font-family: var(--font-sans);
+  font-size: var(--text-4xl);
+  font-weight: 500;
+  line-height: var(--leading-tighter);
+  letter-spacing: var(--tracking-tight);
+}
+
+@utility text-heading-h1 {
+  font-family: var(--font-sans);
+  font-size: var(--text-3xl);
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-heading-h2 {
+  font-family: var(--font-sans);
+  font-size: var(--text-2xl);
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-heading-h3 {
+  font-family: var(--font-sans);
+  font-size: var(--text-xl);
+  font-weight: 500;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-heading-h4 {
+  font-family: var(--font-sans);
+  font-size: var(--text-lg);
+  font-weight: 500;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-body-large {
+  font-family: var(--font-sans);
+  font-size: var(--text-lg);
+  font-weight: 400;
+  line-height: var(--leading-normal);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-body-default {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: 400;
+  line-height: var(--leading-normal);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-body-default-strong {
+  font-family: var(--font-sans);
+  font-size: var(--text-base);
+  font-weight: 500;
+  line-height: var(--leading-normal);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-body-small {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 400;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-label-strong {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 500;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-label-default {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: 400;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-label-small {
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: 400;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+}
+
+@utility text-caption-default {
+  font-family: var(--font-sans);
+  font-size: var(--text-xs);
+  font-weight: 400;
+  line-height: var(--leading-snug);
+  letter-spacing: var(--tracking-normal);
+}

package/dist/styles/utilities.css

@@ -0,0 +1,37 @@
+/*
+ * Focus ring shared by every interactive component: 2px in border-focus, 2px away
+ * from the control. It follows the element's border-radius. Keyboard only
+ * (:focus-visible), never just a colour change.
+ */
+@utility focus-ring {
+  &:focus-visible {
+    outline: 2px solid var(--color-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+/* Same ring for composite controls whose focus lives on an inner element. */
+@utility focus-ring-within {
+  &:has(:focus-visible) {
+    outline: 2px solid var(--color-border-focus);
+    outline-offset: 2px;
+  }
+}
+
+/*
+ * Extends the hit area to at least 44×44 without changing the visual size
+ * (Button 40/36, Checkbox 20, IconButton…). The element must not clip overflow.
+ */
+@utility touch-target {
+  position: relative;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: max(100%, 44px);
+    height: max(100%, 44px);
+    transform: translate(-50%, -50%);
+  }
+}

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@mediquo/medicore",
+  "description": "MediCore — design system de las plataformas web de mediQuo",
+  "version": "0.1.0",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mediquo/medicore-design-system.git"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./icons": {
+      "types": "./dist/icons/index.d.ts",
+      "default": "./dist/icons/index.js"
+    },
+    "./theme.css": "./dist/styles/theme.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.8.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.7.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.10",
+    "@chromatic-com/storybook": "^5.0.0",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-mcp": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^22.19.7",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.2.0",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "playwright": "1.59.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "storybook": "^10.6.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~5.9.3",
+    "vite": "^7.3.6",
+    "vitest": "^4.1.11"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "node scripts/clean.mjs && vite build && tsc -p tsconfig.build.json && node scripts/copy-styles.mjs",
+    "build-storybook": "storybook build",
+    "icons": "node scripts/generate-icons.mjs",
+    "tc": "tsc --noEmit",
+    "test": "vitest run",
+    "format-and-lint": "biome check",
+    "format-and-lint:fix": "biome check --write"
+  }
+}