@ryanhelsing/ry-ui 1.0.0 → 1.0.2

package/dist/themes/dark.css

@@ -0,0 +1,92 @@
+/**
+ * ry-ui Dark Theme
+ */
+
+[data-ry-theme="dark"] {
+  /* Colors */
+  --ry-color-primary: #60a5fa;
+  --ry-color-primary-hover: #3b82f6;
+  --ry-color-primary-active: #2563eb;
+
+  --ry-color-secondary: #94a3b8;
+  --ry-color-secondary-hover: #cbd5e1;
+  --ry-color-secondary-active: #e2e8f0;
+
+  /* Text */
+  --ry-color-text: #f1f5f9;
+  --ry-color-text-muted: #94a3b8;
+  --ry-color-text-inverse: #0f172a;
+
+  /* Background */
+  --ry-color-bg: #0f172a;
+  --ry-color-bg-subtle: #1e293b;
+  --ry-color-bg-muted: #334155;
+
+  /* Border */
+  --ry-color-border: #334155;
+  --ry-color-border-strong: #475569;
+
+  /* Overlay */
+  --ry-color-overlay: rgba(0, 0, 0, 0.7);
+
+  /* Shadows (more subtle in dark mode) */
+  --ry-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
+  --ry-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
+  --ry-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4);
+  --ry-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+
+  /* Focus */
+  --ry-focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.5);
+
+  /* Code block - Vibrant (using theme colors) */
+  --ry-code-bg: #0f172a;
+  --ry-code-header-bg: #1e293b;
+  --ry-code-text-color: #f1f5f9;
+  --ry-code-title-color: #94a3b8;
+  --ry-code-icon-color: #64748b;
+  --ry-code-icon-hover-bg: #334155;
+  --ry-code-icon-hover-color: #f1f5f9;
+  --ry-code-line-number-color: rgba(71, 85, 105, 0.6);
+  --ry-code-line-border-color: #334155;
+  --ry-code-color-preview-border: rgba(241, 245, 249, 0.3);
+  /* Syntax - theme button colors */
+  --ry-code-keyword: #ef4444;
+  --ry-code-property: #60a5fa;
+  --ry-code-value: #f59e0b;
+  --ry-code-string: #22c55e;
+  --ry-code-number: #f59e0b;
+  --ry-code-comment: #94a3b8;
+  --ry-code-selector: #06b6d4;
+  --ry-code-punctuation: #94a3b8;
+  --ry-code-tag: #06b6d4;
+  --ry-code-attribute: #60a5fa;
+}
+
+/* Alert overrides for dark mode */
+[data-ry-theme="dark"] .ry-alert--info,
+[data-ry-theme="dark"] ry-alert[type="info"] {
+  background-color: #164e63;
+  border-color: #06b6d4;
+  color: #a5f3fc;
+}
+
+[data-ry-theme="dark"] .ry-alert--success,
+[data-ry-theme="dark"] ry-alert[type="success"] {
+  background-color: #14532d;
+  border-color: #22c55e;
+  color: #bbf7d0;
+}
+
+[data-ry-theme="dark"] .ry-alert--warning,
+[data-ry-theme="dark"] ry-alert[type="warning"] {
+  background-color: #78350f;
+  border-color: #f59e0b;
+  color: #fef3c7;
+}
+
+[data-ry-theme="dark"] .ry-alert--danger,
+[data-ry-theme="dark"] ry-alert[type="danger"] {
+  background-color: #7f1d1d;
+  border-color: #ef4444;
+  color: #fecaca;
+}

package/dist/themes/light.css

@@ -0,0 +1,38 @@
+/**
+ * ry-ui Light Theme
+ *
+ * This is the default theme.
+ * Most values inherit from ry-tokens.css.
+ */
+
+[data-ry-theme="light"] {
+  /* Light theme is the default, so minimal overrides needed */
+  --ry-color-bg: #ffffff;
+  --ry-color-bg-subtle: #f8fafc;
+  --ry-color-bg-muted: #f1f5f9;
+  --ry-color-text: #1e293b;
+  --ry-color-text-muted: #64748b;
+
+  /* Code block - Cool/Minimal (GitHub style) */
+  --ry-code-bg: #f6f8fa;
+  --ry-code-header-bg: #eaeef2;
+  --ry-code-text-color: #24292f;
+  --ry-code-title-color: #57606a;
+  --ry-code-icon-color: #8c959f;
+  --ry-code-icon-hover-bg: #d0d7de;
+  --ry-code-icon-hover-color: #24292f;
+  --ry-code-line-number-color: rgba(140, 149, 159, 0.6);
+  --ry-code-line-border-color: #d0d7de;
+  --ry-code-color-preview-border: rgba(36, 41, 47, 0.3);
+  /* Syntax */
+  --ry-code-keyword: #cf222e;
+  --ry-code-property: #0550ae;
+  --ry-code-value: #0a3069;
+  --ry-code-string: #0a3069;
+  --ry-code-number: #0550ae;
+  --ry-code-comment: #6e7781;
+  --ry-code-selector: #116329;
+  --ry-code-punctuation: #24292f;
+  --ry-code-tag: #116329;
+  --ry-code-attribute: #0550ae;
+}

package/dist/themes/ocean.css

@@ -0,0 +1,48 @@
+/**
+ * ry-ui Ocean Theme
+ *
+ * Deep blue oceanic vibes.
+ */
+
+[data-ry-theme="ocean"] {
+  /* Primary - ocean blues */
+  --ry-color-primary: #0ea5e9;
+  --ry-color-primary-hover: #0284c7;
+  --ry-color-primary-active: #0369a1;
+
+  /* Secondary - teal */
+  --ry-color-secondary: #06b6d4;
+  --ry-color-secondary-hover: #0891b2;
+  --ry-color-secondary-active: #0e7490;
+
+  /* Text */
+  --ry-color-text: #0c4a6e;
+  --ry-color-text-muted: #64748b;
+  --ry-color-text-inverse: #ffffff;
+
+  /* Background - light blues */
+  --ry-color-bg: #f0f9ff;
+  --ry-color-bg-subtle: #e0f2fe;
+  --ry-color-bg-muted: #bae6fd;
+
+  /* Border */
+  --ry-color-border: #7dd3fc;
+  --ry-color-border-strong: #38bdf8;
+
+  /* Shadows with blue tint */
+  --ry-shadow-sm: 0 1px 2px 0 rgba(14, 165, 233, 0.1);
+  --ry-shadow-md: 0 4px 6px -1px rgba(14, 165, 233, 0.15);
+  --ry-shadow-lg: 0 10px 15px -3px rgba(14, 165, 233, 0.15);
+  --ry-shadow-xl: 0 20px 25px -5px rgba(14, 165, 233, 0.2);
+
+  /* Focus */
+  --ry-focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.5);
+}
+
+/* Alert overrides */
+[data-ry-theme="ocean"] .ry-alert--info,
+[data-ry-theme="ocean"] ry-alert[type="info"] {
+  background-color: #e0f2fe;
+  border-color: #0ea5e9;
+  color: #0369a1;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ryanhelsing/ry-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Framework-agnostic, Light DOM web components. CSS is the source of truth.",
   "type": "module",
   "main": "./dist/ry-ui.js",
@@ -11,16 +11,18 @@
       "types": "./dist/ry-ui.d.ts",
       "import": "./dist/ry-ui.js"
     },
-    "./css/*": "./dist/css/*"
+    "./css/*": "./dist/css/*",
+    "./themes/*": "./dist/themes/*"
   },
   "files": [
-    "dist"
+    "dist",
+    "USING_CDN.md"
   ],
   "scripts": {
     "dev": "vite",
     "build": "vite build && npm run build:types && npm run build:css",
     "build:types": "tsc --emitDeclarationOnly",
-    "build:css": "mkdir -p dist/css && cp src/css/*.css dist/css/",
+    "build:css": "mkdir -p dist/css && cp src/css/*.css dist/css/ && mkdir -p dist/themes && cp src/themes/*.css dist/themes/",
     "preview": "vite preview",
     "typecheck": "tsc --noEmit"
   },