@sublimee/surfaces 0.1.1

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@sublimee/surfaces",
+  "version": "0.1.1",
+  "description": "Surface container components for Sublime",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "style": "./dist/surface.css",
+  "files": [
+    "dist",
+    "src",
+    "AI_INDEX.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./surface.css": {
+      "style": "./dist/surface.css",
+      "import": "./dist/surface.css",
+      "default": "./dist/surface.css"
+    },
+    "./dist/surface.css": {
+      "style": "./dist/surface.css",
+      "import": "./dist/surface.css",
+      "default": "./dist/surface.css"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/juancrfig/sublime.git",
+    "directory": "packages/surfaces"
+  },
+  "keywords": [
+    "react",
+    "ui",
+    "components",
+    "surface",
+    "card",
+    "container",
+    "semantic",
+    "sublime"
+  ],
+  "author": "Sublime Team",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@sublimee/tokens": "0.1.16"
+  },
+  "peerDependenciesMeta": {
+    "@sublimee/tokens": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8",
+    "typescript": "^5"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean && cp src/surface.css dist/surface.css",
+    "dev": "mkdir -p dist && cp src/surface.css dist/surface.css && tsup src/index.ts --format cjs,esm --dts --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/index.ts

@@ -0,0 +1,32 @@
+/**
+ * @sublimee/surfaces
+ * Surface container components for Sublime.
+ *
+ * Philosophy:
+ * -----------
+ * Surfaces are foundational container components that wrap content
+ * above the background layer. They provide semantic elevation, spacing,
+ * and visual boundaries through the Sublime token system.
+ *
+ * Quick Start:
+ * -----------
+ * ```tsx
+ * import { Surface } from '@sublimee/surfaces';
+ * import '@sublimee/surfaces/surface.css';
+ *
+ * <Surface variant="elevated" padding="md">
+ *   Your content here
+ * </Surface>
+ * ```
+ *
+ * The package ships with minimal runtime styles. Install and import
+ * `@sublimee/tokens/tokens.css` for full theming support including
+ * dark mode.
+ *
+ * @packageDocumentation
+ */
+
+'use client';
+
+export { Surface } from './surface';
+export type { SurfaceProps, SurfaceVariant, SurfacePadding, SurfaceRadius, SurfaceElement } from './surface';

package/src/surface.css

@@ -0,0 +1,261 @@
+/**
+ * @sublimee/surfaces
+ * Runtime styles for Surface components
+ *
+ * These styles provide the visual foundation that works independently
+ * of the token system. For full theming (colors, shadows, dark mode),
+ * import `@sublimee/tokens/tokens.css` in your application.
+ */
+
+/* ============================================================================
+   BASE SURFACE STYLES
+   ============================================================================ */
+
+.sublime-surface {
+  /* Layout */
+  box-sizing: border-box;
+  max-width: 100%;
+  width: 100%;
+
+  /* Default transition for interactive states */
+  transition:
+    box-shadow var(--sublime-duration-fast, 150ms) var(--sublime-ease-out, ease-out),
+    transform var(--sublime-duration-fast, 150ms) var(--sublime-ease-out, ease-out);
+}
+
+/* ============================================================================
+   VARIANT STYLES
+   ============================================================================ */
+
+/* Base - No elevation, page-level containers */
+.sublime-surface--base {
+  background-color: var(--sublime-color-surface-0, #ffffff);
+  box-shadow: var(--sublime-shadow-none, 0 0 #0000);
+}
+
+/* Elevated - Cards, content blocks (default) */
+.sublime-surface--elevated {
+  background-color: var(--sublime-color-surface-1, #ffffff);
+  box-shadow: var(--sublime-shadow-card, 0 1px 3px 0 rgb(0 0 0 / 0.1));
+}
+
+/* Higher - Modals, dropdowns, menus */
+.sublime-surface--higher {
+  background-color: var(--sublime-color-surface-2, #f9fafb);
+  box-shadow: var(--sublime-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+}
+
+/* Inset - Depressed surfaces, input wells */
+.sublime-surface--inset {
+  background-color: var(--sublime-color-surface-inset, #f3f4f6);
+  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+
+/* Extruded - 3D box effect with stacked shadows */
+.sublime-surface--extruded {
+  /* Extrusion depth */
+  --sublime-surface-extrude-depth: 6px;
+  --sublime-surface-extrude-border-light: #E4E4E8;
+  --sublime-surface-extrude-shadow-1: #EBEBEF;
+  --sublime-surface-extrude-shadow-2: #E6E6EA;
+  --sublime-surface-extrude-shadow-3: #E0E0E6;
+  --sublime-surface-extrude-shadow-4: #DADAE0;
+  --sublime-surface-extrude-shadow-5: #D4D4DA;
+  --sublime-surface-extrude-shadow-6: #CECED4;
+
+  background-color: var(--sublime-color-surface-1, #ffffff);
+
+  /* Float up-left to create space for extrusion */
+  transform: translate(calc(-1 * var(--sublime-surface-extrude-depth)), calc(-1 * var(--sublime-surface-extrude-depth)));
+
+  /* Only top/left borders - bottom/right are defined by shadows */
+  border-top: 1px solid var(--sublime-surface-extrude-border-light);
+  border-left: 1px solid var(--sublime-surface-extrude-border-light);
+  border-right: none;
+  border-bottom: none;
+
+  /* Allow shadows to extend beyond surface */
+  overflow: visible;
+
+  /* Stacked shadows create 3D side faces */
+  box-shadow:
+    1px 1px 0 var(--sublime-surface-extrude-shadow-1),
+    2px 2px 0 var(--sublime-surface-extrude-shadow-2),
+    3px 3px 0 var(--sublime-surface-extrude-shadow-3),
+    4px 4px 0 var(--sublime-surface-extrude-shadow-4),
+    5px 5px 0 var(--sublime-surface-extrude-shadow-5),
+    var(--sublime-surface-extrude-depth) var(--sublime-surface-extrude-depth) 0 var(--sublime-surface-extrude-shadow-6);
+}
+
+/* Interactive extruded - press effect */
+.sublime-surface--interactive.sublime-surface--extruded {
+  cursor: pointer;
+}
+
+.sublime-surface--interactive.sublime-surface--extruded:hover {
+  transform: translate(calc(-1 * var(--sublime-surface-extrude-depth) + 1px), calc(-1 * var(--sublime-surface-extrude-depth) + 1px));
+  box-shadow:
+    1px 1px 0 var(--sublime-surface-extrude-shadow-1),
+    2px 2px 0 var(--sublime-surface-extrude-shadow-2),
+    3px 3px 0 var(--sublime-surface-extrude-shadow-3),
+    4px 4px 0 var(--sublime-surface-extrude-shadow-4),
+    5px 5px 0 var(--sublime-surface-extrude-shadow-5),
+    calc(var(--sublime-surface-extrude-depth) - 1px) calc(var(--sublime-surface-extrude-depth) - 1px) 0 var(--sublime-surface-extrude-shadow-6);
+}
+
+.sublime-surface--interactive.sublime-surface--extruded:active {
+  transform: translate(0, 0);
+  box-shadow: none;
+  border-top-color: var(--sublime-surface-extrude-border-light);
+  border-left-color: var(--sublime-surface-extrude-border-light);
+}
+
+/* ============================================================================
+   INTERACTIVE STATES
+   ============================================================================ */
+
+/* Interactive surfaces lift on hover */
+.sublime-surface--interactive.sublime-surface--elevated:hover {
+  box-shadow: var(--sublime-shadow-card-hover, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  transform: translateY(-1px);
+}
+
+.sublime-surface--interactive.sublime-surface--higher:hover {
+  box-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  transform: translateY(-1px);
+}
+
+/* No hover effect for base and inset variants */
+.sublime-surface--interactive.sublime-surface--base:hover,
+.sublime-surface--interactive.sublime-surface--inset:hover {
+  transform: none;
+}
+
+/* ============================================================================
+   BORDER STYLES
+   ============================================================================ */
+
+.sublime-surface--border {
+  border: 1px solid var(--sublime-color-border-surface, #d1d5db);
+}
+
+/* ============================================================================
+   DARK MODE OVERRIDES - Non-glass variants
+   ============================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--base {
+    background-color: var(--sublime-color-surface-0, #0f0f0f);
+  }
+
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--elevated {
+    background-color: var(--sublime-color-surface-1, #171717);
+  }
+
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--higher {
+    background-color: var(--sublime-color-surface-2, #262626);
+  }
+
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--inset {
+    background-color: var(--sublime-color-surface-inset, #0a0a0a);
+  }
+
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--border {
+    border-color: var(--sublime-color-border-primary, #404040);
+  }
+}
+
+/* Class-based dark mode */
+.dark .sublime-surface--base,
+[data-theme="dark"] .sublime-surface--base {
+  background-color: var(--sublime-color-surface-0, #0f0f0f);
+}
+
+.dark .sublime-surface--elevated,
+[data-theme="dark"] .sublime-surface--elevated {
+  background-color: var(--sublime-color-surface-1, #171717);
+}
+
+.dark .sublime-surface--higher,
+[data-theme="dark"] .sublime-surface--higher {
+  background-color: var(--sublime-color-surface-2, #262626);
+}
+
+.dark .sublime-surface--inset,
+[data-theme="dark"] .sublime-surface--inset {
+  background-color: var(--sublime-color-surface-inset, #0a0a0a);
+}
+
+.dark .sublime-surface--border,
+[data-theme="dark"] .sublime-surface--border {
+  border-color: var(--sublime-color-border-surface, #525252);
+}
+
+/* Dark mode - extruded variant */
+.dark .sublime-surface--extruded,
+[data-theme="dark"] .sublime-surface--extruded {
+  --sublime-surface-extrude-border-light: #E8E8F0;
+  --sublime-surface-extrude-shadow-1: #3A3A42;
+  --sublime-surface-extrude-shadow-2: #36363E;
+  --sublime-surface-extrude-shadow-3: #32323A;
+  --sublime-surface-extrude-shadow-4: #2E2E36;
+  --sublime-surface-extrude-shadow-5: #2A2A32;
+  --sublime-surface-extrude-shadow-6: #26262E;
+  background-color: var(--sublime-color-surface-1, #171717);
+}
+
+/* Media query dark mode for extruded */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--extruded {
+    --sublime-surface-extrude-border-light: #E8E8F0;
+    --sublime-surface-extrude-shadow-1: #3A3A42;
+    --sublime-surface-extrude-shadow-2: #36363E;
+    --sublime-surface-extrude-shadow-3: #32323A;
+    --sublime-surface-extrude-shadow-4: #2E2E36;
+    --sublime-surface-extrude-shadow-5: #2A2A32;
+    --sublime-surface-extrude-shadow-6: #26262E;
+    background-color: var(--sublime-color-surface-1, #171717);
+  }
+}
+
+/* ============================================================================
+   GLASS UTILITY - Standalone frosted glass effect
+   ============================================================================ */
+
+/**
+ * sublime-glassed - Utility class for instant glass effect on any element
+ *
+ * Usage: <div class="sublime-glassed">Content</div>
+ * Or with Surface: <Surface variant="glass">Content</Surface>
+ *
+ * Note: The Surface component applies additional padding, radius, and layout.
+ * This utility is the raw glass styling only.
+ */
+.sublime-glassed,
+.sublime-surface--glass {
+  background: rgba(255, 255, 255, 0.11);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(8.6px);
+  -webkit-backdrop-filter: blur(8.6px);
+  border: 1px solid rgba(255, 255, 255, 0.11);
+}
+
+.dark .sublime-glassed,
+[data-theme="dark"] .sublime-glassed,
+.dark .sublime-surface--glass,
+[data-theme="dark"] .sublime-surface--glass {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+}
+
+/* System preference dark mode */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) .sublime-glassed,
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--glass {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+  }
+}