@countermeasure-platform/web-components 0.2.0

package/src/styles/appearance.css

@@ -0,0 +1,325 @@
+/**
+ * CounterMeasure Appearance Styles
+ * @countermeasure/web-components
+ *
+ * Theme variables (--color-*), accent overrides, font overrides,
+ * and base body styles shared across all CounterMeasure apps.
+ *
+ * Import this file to get consistent theming in any consuming app.
+ */
+
+/*
+ * NOTE: Google Fonts @import is NOT included here because @import url()
+ * rules must precede all other CSS rules. Consuming apps should add the
+ * font import at the very top of their main CSS entry point:
+ *
+ *   @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Sora:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');
+ */
+
+/* ============================================================================
+   Theme Variables
+   ============================================================================ */
+:root {
+  /* Primary - Orange */
+  --color-primary: #f97316;
+  --color-primary-hover: #ea580c;
+  --color-primary-alpha: rgba(249, 115, 22, 0.15);
+  --color-secondary: #c2410c;
+  /* Light Grey Backgrounds */
+  --color-background: #f8fafc;
+  --color-bg: #f8fafc;
+  --color-bg-secondary: #f1f5f9;
+  --color-bg-tertiary: #e2e8f0;
+  --color-bg-hover: rgba(0, 0, 0, 0.03);
+  --color-surface: #ffffff;
+  --color-surface-alt: #f8fafc;
+  --color-surface-hover: #f1f5f9;
+  --color-border: rgba(15, 23, 42, 0.1);
+  --color-primary-light: rgba(249, 115, 22, 0.06);
+  /* Dark Text for Light Background */
+  --color-text: #0f172a;
+  --color-text-muted: #475569;
+  --color-text-dim: #64748b;
+  /* Accent - Orange */
+  --color-accent: #ea580c;
+  /* Status colors */
+  --color-success: #22c55e;
+  --color-error: #ef4444;
+  --color-error-bg: rgba(239, 68, 68, 0.1);
+  --color-warning: #f59e0b;
+  /* Orange accent for Files UI (was violet) */
+  --color-violet: #f97316;
+  --color-violet-hover: #ea580c;
+  --color-violet-dim: rgba(249, 115, 22, 0.15);
+  --color-violet-glow: rgba(249, 115, 22, 0.3);
+  /* Setup theming */
+  --setup-bg:
+    radial-gradient(1200px 800px at 10% -10%, #fff7ed 0%, transparent 60%),
+    radial-gradient(900px 600px at 90% -20%, #ffedd5 0%, transparent 55%),
+    linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  --setup-card: rgba(255, 255, 255, 0.9);
+  --setup-card-border: rgba(15, 23, 42, 0.08);
+  --setup-card-shadow: 0 35px 65px -35px rgba(15, 23, 42, 0.35);
+  --setup-glow: rgba(249, 115, 22, 0.18);
+  /* Sizing - radius, shadow, header-height defined in tokens.css */
+  --font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+  --ui-scale-user: 1;
+  --ui-scale-auto: 1;
+  --ui-scale-effective: 1;
+}
+
+/* Dark Theme */
+[data-theme="dark"] {
+  /* Primary - Orange (same) */
+  --color-primary: #f97316;
+  --color-primary-hover: #fb923c;
+  --color-primary-alpha: rgba(249, 115, 22, 0.15);
+  --color-secondary: #ea580c;
+  /* Dark Backgrounds - Lighter Neutral Grey */
+  --color-background: #1c1c1c;
+  --color-bg: #1c1c1c;
+  --color-bg-secondary: #262626;
+  --color-bg-tertiary: #333333;
+  --color-bg-hover: rgba(255, 255, 255, 0.05);
+  --color-surface: #222222;
+  --color-surface-alt: #2a2a2a;
+  --color-surface-hover: #2e2e2e;
+  --color-border: rgba(255, 255, 255, 0.12);
+  --color-primary-light: rgba(249, 115, 22, 0.1);
+  /* Light Text for Dark Background */
+  --color-text: #fafafa;
+  --color-text-muted: #a3a3a3;
+  --color-text-dim: #737373;
+  /* Accent - Orange */
+  --color-accent: #fb923c;
+  /* Status colors */
+  --color-success: #22c55e;
+  --color-error: #ef4444;
+  --color-error-bg: rgba(239, 68, 68, 0.1);
+  --color-warning: #f59e0b;
+  /* Orange accent for Files UI */
+  --color-violet: #f97316;
+  --color-violet-hover: #fb923c;
+  --color-violet-dim: rgba(249, 115, 22, 0.15);
+  --color-violet-glow: rgba(249, 115, 22, 0.3);
+  /* Sizing (same) */
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+  /* Setup theming */
+  --setup-bg:
+    radial-gradient(1200px 800px at 10% -10%, rgba(251, 146, 60, 0.2) 0%, transparent 55%),
+    radial-gradient(900px 600px at 90% -20%, rgba(244, 63, 94, 0.18) 0%, transparent 50%),
+    linear-gradient(135deg, #0f0f0f 0%, #1c1c1c 100%);
+  --setup-card: rgba(26, 26, 26, 0.9);
+  --setup-card-border: rgba(255, 255, 255, 0.08);
+  --setup-card-shadow: 0 35px 65px -35px rgba(0, 0, 0, 0.6);
+  --setup-glow: rgba(251, 146, 60, 0.18);
+}
+
+/* Monokai Theme */
+[data-theme="monokai"] {
+  --color-primary: #fd971f;
+  --color-primary-hover: #f9c74f;
+  --color-primary-alpha: rgba(253, 151, 31, 0.2);
+  --color-secondary: #f92672;
+  --color-background: #272822;
+  --color-bg: #272822;
+  --color-bg-secondary: #31322c;
+  --color-bg-tertiary: #3a3b34;
+  --color-bg-hover: rgba(255, 255, 255, 0.05);
+  --color-surface: #2d2e27;
+  --color-surface-alt: #34352e;
+  --color-surface-hover: #3b3c35;
+  --color-border: rgba(248, 248, 242, 0.16);
+  --color-primary-light: rgba(253, 151, 31, 0.1);
+  --color-text: #f8f8f2;
+  --color-text-muted: #c7c7bd;
+  --color-text-dim: #9a9a8c;
+  --color-accent: #a6e22e;
+  --color-success: #a6e22e;
+  --color-error: #ff6188;
+  --color-error-bg: rgba(255, 97, 136, 0.18);
+  --color-warning: #fd971f;
+  --color-violet: #66d9ef;
+  --color-violet-hover: #8be9fd;
+  --color-violet-dim: rgba(102, 217, 239, 0.2);
+  --color-violet-glow: rgba(102, 217, 239, 0.35);
+  --shadow-lg: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
+  --setup-bg:
+    radial-gradient(1200px 800px at 10% -10%, rgba(249, 38, 114, 0.2) 0%, transparent 55%),
+    radial-gradient(900px 600px at 90% -20%, rgba(102, 217, 239, 0.2) 0%, transparent 50%),
+    linear-gradient(135deg, #1f201c 0%, #272822 100%);
+  --setup-card: rgba(34, 35, 30, 0.92);
+  --setup-card-border: rgba(248, 248, 242, 0.12);
+  --setup-card-shadow: 0 40px 70px -40px rgba(0, 0, 0, 0.7);
+  --setup-glow: rgba(166, 226, 46, 0.2);
+}
+
+/* Glass Theme */
+[data-theme="glass"] {
+  --color-primary: #f97316;
+  --color-primary-hover: #fb923c;
+  --color-primary-alpha: rgba(249, 115, 22, 0.15);
+  --color-secondary: #ea580c;
+  --color-background: #0a0a10;
+  --color-bg: #0a0a10;
+  --color-bg-secondary: rgba(255, 255, 255, 0.035);
+  --color-bg-tertiary: rgba(255, 255, 255, 0.07);
+  --color-bg-hover: rgba(255, 255, 255, 0.06);
+  --color-surface: rgba(255, 255, 255, 0.05);
+  --color-surface-alt: rgba(255, 255, 255, 0.07);
+  --color-surface-hover: rgba(255, 255, 255, 0.1);
+  --color-border: rgba(255, 255, 255, 0.08);
+  --color-primary-light: rgba(249, 115, 22, 0.1);
+  --color-text: #e8e8f0;
+  --color-text-muted: #9898ac;
+  --color-text-dim: #5c5c70;
+  --color-accent: #fb923c;
+  --color-success: #34d399;
+  --color-error: #fb7185;
+  --color-error-bg: rgba(251, 113, 133, 0.1);
+  --color-warning: #fbbf24;
+  --color-violet: #f97316;
+  --color-violet-hover: #fb923c;
+  --color-violet-dim: rgba(249, 115, 22, 0.15);
+  --color-violet-glow: rgba(249, 115, 22, 0.3);
+  --glass-blur: 20px;
+  --glass-border: rgba(255, 255, 255, 0.06);
+  --glass-surface: rgba(255, 255, 255, 0.04);
+  --glass-glow: rgba(139, 92, 246, 0.06);
+  --shadow-lg: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
+  --setup-bg:
+    radial-gradient(1200px 800px at 10% -10%, rgba(251, 146, 60, 0.15) 0%, transparent 55%),
+    radial-gradient(900px 600px at 90% -20%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
+    linear-gradient(135deg, #08080e 0%, #0a0a10 100%);
+  --setup-card: rgba(255, 255, 255, 0.05);
+  --setup-card-border: rgba(255, 255, 255, 0.08);
+  --setup-card-shadow: 0 35px 65px -35px rgba(0, 0, 0, 0.7);
+  --setup-glow: rgba(251, 146, 60, 0.18);
+}
+
+/* ============================================================================
+   Accent Theme Overrides
+   ============================================================================ */
+[data-accent="cyan"] {
+  --color-primary: #06b6d4;
+  --color-primary-hover: #22d3ee;
+  --color-primary-alpha: rgba(6, 182, 212, 0.15);
+  --color-secondary: #0891b2;
+  --color-accent: #22d3ee;
+  --color-primary-light: rgba(6, 182, 212, 0.1);
+}
+
+[data-accent="violet"] {
+  --color-primary: #8b5cf6;
+  --color-primary-hover: #a78bfa;
+  --color-primary-alpha: rgba(139, 92, 246, 0.15);
+  --color-secondary: #7c3aed;
+  --color-accent: #a78bfa;
+  --color-primary-light: rgba(139, 92, 246, 0.1);
+}
+
+[data-accent="rose"] {
+  --color-primary: #f43f5e;
+  --color-primary-hover: #fb7185;
+  --color-primary-alpha: rgba(244, 63, 94, 0.15);
+  --color-secondary: #e11d48;
+  --color-accent: #fb7185;
+  --color-primary-light: rgba(244, 63, 94, 0.1);
+}
+
+[data-accent="emerald"] {
+  --color-primary: #10b981;
+  --color-primary-hover: #34d399;
+  --color-primary-alpha: rgba(16, 185, 129, 0.15);
+  --color-secondary: #059669;
+  --color-accent: #34d399;
+  --color-primary-light: rgba(16, 185, 129, 0.1);
+}
+
+/* ============================================================================
+   Typography Overrides
+   ============================================================================ */
+html[data-font="inter"] {
+  font-family:
+    "Inter",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+}
+
+html[data-font="roboto"] {
+  font-family:
+    "Roboto",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+}
+
+html[data-font="system"] {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+}
+
+html[data-font="jetbrains-mono"] {
+  font-family:
+    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+/* ============================================================================
+   Base Appearance Styles
+   ============================================================================ */
+html {
+  font-family:
+    "Sora",
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    "Helvetica Neue",
+    Arial,
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  background: var(--color-background);
+  color: var(--color-text);
+}
+
+/* Dark mode gradient background */
+[data-theme="dark"] body {
+  background-color: #1c1c1c;
+  background-image:
+    radial-gradient(ellipse at 20% 0%, rgba(249, 115, 22, 0.04) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 100%, rgba(50, 50, 50, 0.4) 0%, transparent 50%),
+    linear-gradient(180deg, #1c1c1c 0%, #222222 100%);
+  background-attachment: fixed;
+}
+
+[data-theme="monokai"] body {
+  background-color: #272822;
+  background-image:
+    radial-gradient(ellipse at 15% 0%, rgba(249, 38, 114, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse at 85% 100%, rgba(102, 217, 239, 0.12) 0%, transparent 55%),
+    linear-gradient(180deg, #1f201c 0%, #272822 100%);
+  background-attachment: fixed;
+}
+
+[data-theme="glass"] body {
+  background-color: #0a0a10;
+  background-image:
+    radial-gradient(ellipse at 20% 0%, rgba(251, 146, 60, 0.1) 0%, transparent 50%),
+    radial-gradient(ellipse at 80% 100%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
+    radial-gradient(ellipse at 50% 50%, rgba(56, 189, 248, 0.03) 0%, transparent 60%),
+    linear-gradient(180deg, #08080e 0%, #0a0a10 100%);
+  background-attachment: fixed;
+}

package/src/styles/auth.css

@@ -0,0 +1,318 @@
+/**
+ * Authentication Component Styles
+ * @countermeasure/web-components
+ */
+
+/* Auth Container */
+.cmm-auth-container {
+  max-width: 28rem;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+.cmm-auth-card {
+  background: var(--cmm-auth-card-bg, #0f172a);
+  border: 1px solid var(--cmm-auth-border, #334155);
+  border-radius: 0.75rem;
+  padding: 2rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+
+.cmm-auth-header {
+  text-align: center;
+  margin-bottom: 2rem;
+}
+
+.cmm-auth-title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--cmm-auth-title, #ffffff);
+  margin-bottom: 0.5rem;
+}
+
+.cmm-auth-subtitle {
+  font-size: 0.875rem;
+  color: var(--cmm-auth-text-muted, #94a3b8);
+}
+
+/* Form Elements */
+.cmm-auth-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.cmm-auth-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.cmm-auth-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--cmm-auth-label, #e2e8f0);
+}
+
+.cmm-auth-input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 0.875rem;
+  background: var(--cmm-auth-input-bg, #1e293b);
+  border: 1px solid var(--cmm-auth-border, #334155);
+  border-radius: 0.5rem;
+  color: var(--cmm-auth-input-text, #ffffff);
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.cmm-auth-input:focus {
+  outline: none;
+  border-color: var(--cmm-auth-focus, #3b82f6);
+  box-shadow: 0 0 0 3px var(--cmm-auth-focus-ring, rgba(59, 130, 246, 0.3));
+}
+
+.cmm-auth-input::placeholder {
+  color: var(--cmm-auth-placeholder, #64748b);
+}
+
+.cmm-auth-input--error {
+  border-color: var(--cmm-auth-error, #ef4444);
+}
+
+.cmm-auth-error {
+  font-size: 0.75rem;
+  color: var(--cmm-auth-error, #ef4444);
+}
+
+/* Buttons */
+.cmm-auth-btn {
+  width: 100%;
+  padding: 0.75rem 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s, opacity 0.2s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.cmm-auth-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.cmm-auth-btn--primary {
+  background: var(--cmm-auth-btn-primary-bg, #2563eb);
+  color: var(--cmm-auth-btn-primary-text, #ffffff);
+  border: none;
+}
+
+.cmm-auth-btn--primary:hover:not(:disabled) {
+  background: var(--cmm-auth-btn-primary-hover, #3b82f6);
+}
+
+.cmm-auth-btn--secondary {
+  background: var(--cmm-auth-btn-secondary-bg, transparent);
+  color: var(--cmm-auth-btn-secondary-text, #cbd5e1);
+  border: 1px solid var(--cmm-auth-border, #334155);
+}
+
+.cmm-auth-btn--secondary:hover:not(:disabled) {
+  background: var(--cmm-auth-btn-secondary-hover, #1e293b);
+}
+
+.cmm-auth-btn--passkey {
+  background: var(--cmm-auth-passkey-bg, #1e293b);
+  color: var(--cmm-auth-passkey-text, #ffffff);
+  border: 1px solid var(--cmm-auth-border, #334155);
+}
+
+.cmm-auth-btn--passkey:hover:not(:disabled) {
+  background: var(--cmm-auth-passkey-hover, #334155);
+}
+
+/* Divider */
+.cmm-auth-divider {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  color: var(--cmm-auth-text-muted, #94a3b8);
+  font-size: 0.75rem;
+}
+
+.cmm-auth-divider::before,
+.cmm-auth-divider::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--cmm-auth-border, #334155);
+}
+
+/* Links */
+.cmm-auth-link {
+  color: var(--cmm-auth-link, #60a5fa);
+  text-decoration: none;
+  font-size: 0.875rem;
+}
+
+.cmm-auth-link:hover {
+  text-decoration: underline;
+}
+
+.cmm-auth-footer {
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.875rem;
+  color: var(--cmm-auth-text-muted, #94a3b8);
+}
+
+/* Status Messages */
+.cmm-auth-status {
+  padding: 0.75rem 1rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.cmm-auth-status--success {
+  background: var(--cmm-auth-success-bg, rgba(34, 197, 94, 0.1));
+  color: var(--cmm-auth-success, #22c55e);
+  border: 1px solid var(--cmm-auth-success, #22c55e);
+}
+
+.cmm-auth-status--error {
+  background: var(--cmm-auth-error-bg, rgba(239, 68, 68, 0.1));
+  color: var(--cmm-auth-error, #ef4444);
+  border: 1px solid var(--cmm-auth-error, #ef4444);
+}
+
+.cmm-auth-status--info {
+  background: var(--cmm-auth-info-bg, rgba(59, 130, 246, 0.1));
+  color: var(--cmm-auth-info, #3b82f6);
+  border: 1px solid var(--cmm-auth-info, #3b82f6);
+}
+
+/* Passkey Section */
+.cmm-passkey-section {
+  margin-top: 1.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--cmm-auth-border, #334155);
+}
+
+.cmm-passkey-list {
+  margin-top: 1rem;
+}
+
+.cmm-passkey-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background: var(--cmm-auth-input-bg, #1e293b);
+  border-radius: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.cmm-passkey-item__info {
+  display: flex;
+  flex-direction: column;
+}
+
+.cmm-passkey-item__name {
+  font-weight: 500;
+  color: var(--cmm-auth-title, #ffffff);
+}
+
+.cmm-passkey-item__date {
+  font-size: 0.75rem;
+  color: var(--cmm-auth-text-muted, #94a3b8);
+}
+
+.cmm-passkey-item__delete {
+  background: transparent;
+  border: none;
+  color: var(--cmm-auth-error, #ef4444);
+  cursor: pointer;
+  padding: 0.25rem;
+}
+
+.cmm-passkey-item__delete:hover {
+  opacity: 0.8;
+}
+
+/* MFA Section */
+.cmm-mfa-container {
+  text-align: center;
+}
+
+.cmm-mfa-code-input {
+  font-family: monospace;
+  font-size: 1.5rem;
+  letter-spacing: 0.5rem;
+  text-align: center;
+  padding: 1rem;
+}
+
+.cmm-mfa-timer {
+  margin-top: 1rem;
+  font-size: 0.875rem;
+  color: var(--cmm-auth-text-muted, #94a3b8);
+}
+
+/* OAuth Buttons */
+.cmm-oauth-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.cmm-oauth-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.cmm-oauth-btn--google {
+  background: #ffffff;
+  color: #1f2937;
+  border: 1px solid #e5e7eb;
+}
+
+.cmm-oauth-btn--google:hover {
+  background: #f9fafb;
+}
+
+.cmm-oauth-btn--github {
+  background: #24292f;
+  color: #ffffff;
+  border: 1px solid #24292f;
+}
+
+.cmm-oauth-btn--github:hover {
+  background: #32383f;
+}
+
+.cmm-oauth-btn--apple {
+  background: #000000;
+  color: #ffffff;
+  border: 1px solid #000000;
+}
+
+.cmm-oauth-btn--apple:hover {
+  background: #1a1a1a;
+}
+
+.cmm-oauth-btn__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}