@camunda/ccma-saas-frontend 0.0.31

package/lib/esm/themes/terminal-light.css

@@ -0,0 +1,422 @@
+/*
+ * IBM Terminal Theme (Light Mode)
+ * Classic amber/paper terminal aesthetics for light mode
+ * 
+ * This theme overrides Carbon Design System components with retro terminal styling
+ * WITHOUT modifying component code - it works through CSS cascade and specificity
+ */
+
+/* ============================================
+   1. COLOR PALETTE & DESIGN TOKENS OVERRIDE
+   ============================================ */
+
+body.terminal-mode-light {
+  /* Amber Terminal Color Palette (for light mode contrast) */
+  --term-amber: #ff9900;
+  --term-amber-bright: #ffaa00;
+  --term-amber-dim: #cc7700;
+  --term-amber-darker: #996600;
+  --term-amber-glow: rgba(255, 153, 0, 0.3);
+  --term-cream: #fffef5;
+  --term-paper: #f5f5dc;
+  --term-beige: #e8e8d0;
+  --term-scanline: rgba(255, 153, 0, 0.03);
+
+  /* Override Carbon Design System tokens */
+  --cds-background: var(--term-cream);
+  --cds-layer: var(--term-paper);
+  --cds-layer-01: var(--term-paper);
+  --cds-layer-02: rgba(232, 232, 208, 0.8);
+  --cds-layer-03: rgba(232, 232, 208, 0.6);
+  --cds-field: var(--term-paper);
+  --cds-field-01: var(--term-paper);
+  --cds-field-02: rgba(232, 232, 208, 0.8);
+
+  --cds-text-primary: var(--term-amber-darker);
+  --cds-text-secondary: var(--term-amber-dim);
+  --cds-text-placeholder: var(--term-amber-dim);
+  --cds-text-on-color: var(--term-cream);
+  --cds-text-helper: var(--term-amber-dim);
+  --cds-text-error: var(--term-amber-bright);
+
+  --cds-link-primary: var(--term-amber);
+  --cds-link-secondary: var(--term-amber-dim);
+
+  --cds-icon-primary: var(--term-amber-darker);
+  --cds-icon-secondary: var(--term-amber-dim);
+
+  --cds-border-subtle: rgba(255, 153, 0, 0.3);
+  --cds-border-strong: var(--term-amber);
+  --cds-border-interactive: var(--term-amber-bright);
+
+  --cds-button-primary: var(--term-amber);
+  --cds-button-secondary: var(--term-paper);
+  --cds-button-tertiary: transparent;
+  --cds-button-danger-primary: var(--term-amber-bright);
+  --cds-button-danger-secondary: var(--term-paper);
+
+  /* Typography - IBM Plex Mono for authentic terminal feel */
+  font-family: "IBM Plex Mono", "Courier New", Courier, monospace;
+  letter-spacing: 0.05em;
+}
+
+/* ============================================
+   2. SCANLINE EFFECT (subtle for light mode)
+   ============================================ */
+
+body.terminal-mode-light::before {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9999;
+  background: repeating-linear-gradient(
+    0deg,
+    var(--term-scanline) 0px,
+    transparent 1px,
+    transparent 2px,
+    var(--term-scanline) 3px
+  );
+  animation: scanlines 8s linear infinite;
+  opacity: 0.5;
+}
+
+@keyframes scanlines {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(4px);
+  }
+}
+
+/* ============================================
+   3. PAPER TEXTURE OVERLAY
+   ============================================ */
+
+body.terminal-mode-light::after {
+  content: "";
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 9998;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(255, 153, 0, 0.02) 0%,
+    transparent 70%
+  );
+  opacity: 0.8;
+}
+
+/* ============================================
+   4. TEXT STYLING
+   ============================================ */
+
+body.terminal-mode-light * {
+  font-family: "IBM Plex Mono", "Courier New", Courier, monospace !important;
+}
+
+/* Headings */
+body.terminal-mode-light h1,
+body.terminal-mode-light h2,
+body.terminal-mode-light h3,
+body.terminal-mode-light h4,
+body.terminal-mode-light h5,
+body.terminal-mode-light h6 {
+  color: var(--term-amber-darker) !important;
+  font-weight: bold;
+  text-decoration: underline;
+  text-decoration-color: var(--term-amber-dim);
+}
+
+/* ============================================
+   5. BUTTONS
+   ============================================ */
+
+body.terminal-mode-light .cds--btn--primary {
+  background-color: var(--term-amber) !important;
+  border: 2px solid var(--term-amber-darker) !important;
+  color: var(--term-cream) !important;
+  box-shadow: 0 2px 4px var(--term-amber-glow) !important;
+}
+
+body.terminal-mode-light .cds--btn--primary:hover {
+  background-color: var(--term-amber-bright) !important;
+  border-color: var(--term-amber-darker) !important;
+  box-shadow: 0 4px 8px var(--term-amber-glow) !important;
+}
+
+body.terminal-mode-light .cds--btn--secondary,
+body.terminal-mode-light .cds--btn--tertiary {
+  background-color: transparent !important;
+  border: 2px solid var(--term-amber) !important;
+  color: var(--term-amber-darker) !important;
+}
+
+body.terminal-mode-light .cds--btn--danger--primary {
+  background-color: var(--term-amber-bright) !important;
+  border: 2px solid var(--term-amber-darker) !important;
+  color: var(--term-cream) !important;
+  animation: danger-pulse-light 2s ease-in-out infinite;
+}
+
+@keyframes danger-pulse-light {
+  0%,
+  100% {
+    box-shadow: 0 2px 4px var(--term-amber-glow);
+  }
+  50% {
+    box-shadow: 0 4px 12px var(--term-amber-bright);
+  }
+}
+
+/* ============================================
+   6. INPUTS & FORM FIELDS
+   ============================================ */
+
+body.terminal-mode-light .cds--text-input,
+body.terminal-mode-light .cds--text-area,
+body.terminal-mode-light .cds--select-input,
+body.terminal-mode-light .cds--number input[type="number"] {
+  background-color: var(--term-paper) !important;
+  border: 2px solid var(--term-amber) !important;
+  color: var(--term-amber-darker) !important;
+  caret-color: var(--term-amber);
+}
+
+body.terminal-mode-light .cds--text-input:focus,
+body.terminal-mode-light .cds--text-area:focus,
+body.terminal-mode-light .cds--select-input:focus {
+  outline: 2px solid var(--term-amber-bright) !important;
+  box-shadow: 0 0 8px var(--term-amber-glow) !important;
+}
+
+body.terminal-mode-light .cds--text-input::placeholder,
+body.terminal-mode-light .cds--text-area::placeholder {
+  color: var(--term-amber-dim) !important;
+  opacity: 0.6;
+}
+
+/* ============================================
+   7. LINKS
+   ============================================ */
+
+body.terminal-mode-light a,
+body.terminal-mode-light .cds--link {
+  color: var(--term-amber) !important;
+  text-decoration: underline;
+}
+
+body.terminal-mode-light a:hover,
+body.terminal-mode-light .cds--link:hover {
+  color: var(--term-amber-bright) !important;
+}
+
+/* ============================================
+   8. TABLES
+   ============================================ */
+
+body.terminal-mode-light .cds--data-table {
+  background-color: var(--term-cream) !important;
+  border: 2px solid var(--term-amber) !important;
+}
+
+body.terminal-mode-light .cds--data-table thead {
+  background-color: var(--term-beige) !important;
+  border-bottom: 2px solid var(--term-amber) !important;
+}
+
+body.terminal-mode-light .cds--data-table th,
+body.terminal-mode-light .cds--data-table td {
+  border-bottom: 1px solid var(--term-amber-dim) !important;
+  color: var(--term-amber-darker) !important;
+}
+
+body.terminal-mode-light .cds--data-table tr:hover {
+  background-color: rgba(255, 153, 0, 0.1) !important;
+}
+
+/* ============================================
+   9. MODALS & OVERLAYS
+   ============================================ */
+
+body.terminal-mode-light .cds--modal {
+  background-color: var(--term-cream) !important;
+  border: 3px solid var(--term-amber) !important;
+  box-shadow: 0 8px 24px var(--term-amber-glow) !important;
+}
+
+body.terminal-mode-light .cds--modal-header {
+  border-bottom: 2px solid var(--term-amber) !important;
+  background-color: var(--term-beige) !important;
+}
+
+body.terminal-mode-light .cds--modal-footer {
+  border-top: 2px solid var(--term-amber) !important;
+  background-color: var(--term-beige) !important;
+}
+
+/* ============================================
+   10. NOTIFICATIONS & TOASTS
+   ============================================ */
+
+body.terminal-mode-light .cds--toast-notification,
+body.terminal-mode-light .cds--inline-notification {
+  background-color: var(--term-paper) !important;
+  border: 2px solid var(--term-amber) !important;
+  color: var(--term-amber-darker) !important;
+  box-shadow: 0 4px 8px var(--term-amber-glow) !important;
+}
+
+body.terminal-mode-light .cds--toast-notification--error,
+body.terminal-mode-light .cds--inline-notification--error {
+  border-color: var(--term-amber-bright) !important;
+  animation: notification-blink 1s ease-in-out 3;
+}
+
+@keyframes notification-blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* ============================================
+   11. TAGS & BADGES
+   ============================================ */
+
+body.terminal-mode-light .cds--tag {
+  background-color: var(--term-beige) !important;
+  border: 1px solid var(--term-amber) !important;
+  color: var(--term-amber-darker) !important;
+}
+
+/* ============================================
+   12. PROGRESS BARS & LOADERS
+   ============================================ */
+
+body.terminal-mode-light .cds--loading__stroke {
+  stroke: var(--term-amber) !important;
+}
+
+body.terminal-mode-light .cds--loading {
+  animation: terminal-spin-light 1s linear infinite;
+}
+
+@keyframes terminal-spin-light {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/* ============================================
+   13. SCROLLBARS
+   ============================================ */
+
+body.terminal-mode-light ::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background-color: var(--term-cream);
+}
+
+body.terminal-mode-light ::-webkit-scrollbar-track {
+  background-color: var(--term-paper);
+  border: 1px solid var(--term-amber-dim);
+}
+
+body.terminal-mode-light ::-webkit-scrollbar-thumb {
+  background-color: var(--term-amber);
+  border: 1px solid var(--term-amber-darker);
+}
+
+body.terminal-mode-light ::-webkit-scrollbar-thumb:hover {
+  background-color: var(--term-amber-bright);
+}
+
+/* ============================================
+   14. CARBON GRID OVERRIDES
+   ============================================ */
+
+body.terminal-mode-light .cds--grid {
+  background-color: var(--term-cream);
+}
+
+/* ============================================
+   15. TABS
+   ============================================ */
+
+body.terminal-mode-light .cds--tabs__nav-link {
+  color: var(--term-amber-darker) !important;
+  border-bottom: 2px solid transparent !important;
+}
+
+body.terminal-mode-light .cds--tabs__nav-link--selected {
+  border-bottom-color: var(--term-amber) !important;
+}
+
+/* ============================================
+   16. DROPDOWNS & MENUS
+   ============================================ */
+
+body.terminal-mode-light .cds--dropdown,
+body.terminal-mode-light .cds--menu {
+  background-color: var(--term-paper) !important;
+  border: 2px solid var(--term-amber) !important;
+  box-shadow: 0 4px 8px var(--term-amber-glow) !important;
+}
+
+body.terminal-mode-light .cds--dropdown-item,
+body.terminal-mode-light .cds--menu-item {
+  color: var(--term-amber-darker) !important;
+}
+
+body.terminal-mode-light .cds--dropdown-item:hover,
+body.terminal-mode-light .cds--menu-item:hover {
+  background-color: rgba(255, 153, 0, 0.15) !important;
+}
+
+/* ============================================
+   17. TOGGLE SWITCHES
+   ============================================ */
+
+body.terminal-mode-light .cds--toggle__switch {
+  background-color: var(--term-paper) !important;
+  border: 2px solid var(--term-amber) !important;
+}
+
+body.terminal-mode-light .cds--toggle__switch::before {
+  background-color: var(--term-amber) !important;
+}
+
+body.terminal-mode-light .cds--toggle-input:checked + .cds--toggle__switch {
+  background-color: var(--term-amber-dim) !important;
+}
+
+/* ============================================
+   18. TYPEWRITER EFFECT (Optional)
+   ============================================ */
+
+body.terminal-mode-light.terminal-boot {
+  animation: terminal-fade-in 0.5s ease-in;
+}
+
+@keyframes terminal-fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}