@combinedk/ui 3.0.0-beta.11

package/src/tokens.css

@@ -0,0 +1,151 @@
+/*
+ * @combinedk/ui — Design Tokens
+ *
+ * Import this file once in your app entry (e.g. main.css or main.tsx):
+ *   @import '@combinedk/ui/tokens.css';
+ *
+ * All @combinedk/ui components reference these CSS custom properties.
+ * No build tool or Tailwind required in the consumer.
+ */
+
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap");
+
+:root {
+  /* ── Amber palette ────────────────────────────────────────────────────── */
+  --color-amber-50:  #fdf6e7;
+  --color-amber-100: #fbe9c2;
+  --color-amber-200: #f8d88c;
+  --color-amber-300: #F5B547;
+  --color-amber-400: #e9a32b;
+  --color-amber-500: #d99a2c;
+  --color-amber-600: #b67d1f;
+  --color-amber-700: #8c5f16;
+  --color-amber-800: #5f410f;
+  --color-amber-900: #3a2708;
+
+  /* ── Green palette ────────────────────────────────────────────────────── */
+  --color-green-50:  #f0fff9;
+  --color-green-100: #d4fce9;
+  --color-green-200: #a9f6d4;
+  --color-green-300: #50eb96;
+  --color-green-400: #22d476;
+  --color-green-500: #12b05f;
+  --color-green-600: #0d8f4d;
+  --color-green-700: #0a6e3c;
+
+  /* ── Neutral palette ──────────────────────────────────────────────────── */
+  --color-neutral-0:   #ffffff;
+  --color-neutral-50:  #f6f5f5;
+  --color-neutral-100: #f3edec;
+  --color-neutral-200: #e7dcd9;
+  --color-neutral-300: #d0c4c2;
+  --color-neutral-400: #a89898;
+  --color-neutral-500: #7b8390;
+  --color-neutral-600: #5a6272;
+  --color-neutral-700: #3e4a58;
+  --color-neutral-800: #2f3843;
+  --color-neutral-900: #1a2029;
+
+  /* ── Semantic status colours ──────────────────────────────────────────── */
+  --color-error:   #c0392b;
+  --color-warning: #d97706;
+  --color-success: #12b05f;
+  --color-info:    #2563eb;
+
+  /* ── Shadows ──────────────────────────────────────────────────────────── */
+  --shadow-xs: 0 1px 2px rgba(47,56,67,0.06);
+  --shadow-sm: 0 1px 3px rgba(47,56,67,0.09), 0 1px 2px rgba(47,56,67,0.05);
+  --shadow-md: 0 4px 6px rgba(47,56,67,0.08), 0 2px 4px rgba(47,56,67,0.05);
+  --shadow-lg: 0 10px 15px rgba(47,56,67,0.09), 0 4px 6px rgba(47,56,67,0.05);
+  --shadow-xl: 0 20px 25px rgba(47,56,67,0.09), 0 8px 10px rgba(47,56,67,0.05);
+
+  /* ── Border radius ────────────────────────────────────────────────────── */
+  --radius-sm:   4px;
+  --radius-md:   8px;
+  --radius-lg:   12px;
+  --radius-xl:   16px;
+  --radius-2xl:  24px;
+  --radius-full: 9999px;
+
+  /* ── Typography ───────────────────────────────────────────────────────── */
+  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+
+  /* ── CDC semantic surface tokens ──────────────────────────────────────── */
+  --c-page:     #ffffff;
+  --c-surface:  #ffffff;
+  --c-elevated: #fdfbfa;
+  --c-overlay:  rgba(26,32,41,0.45);
+
+  /* Borders */
+  --c-border:        #e7dcd9;
+  --c-border-strong: #c4b6b3;
+
+  /* Text */
+  --c-text:           #2f3843;
+  --c-text-secondary: #6d5f5b;
+  --c-text-subtle:    #8a7a76;
+  --c-text-muted:     #a89898;
+
+  /* Brand */
+  --c-amber:    #F5B547;
+  --c-contrast: #2f3843;
+  --c-brown:    #4b403d;
+
+  /* Instance / BPMN status */
+  --c-running: #50eb96;
+  --c-done:    #12b05f;
+  --c-error:   #c0392b;
+  --c-warn:    #d97706;
+
+  /* ── Status pill tokens ───────────────────────────────────────────────── */
+  --status-published-bg:  #d6f5e4; --status-published-fg:  #0d7a40; --status-published-dot:  #12b05f;
+  --status-draft-bg:      #fdf0d4; --status-draft-fg:      #8a5e14; --status-draft-dot:      #F5B547;
+  --status-archived-bg:   #eeeaea; --status-archived-fg:   #6d5f5b; --status-archived-dot:   #a89898;
+  --status-running-bg:    #d6f5e4; --status-running-fg:    #0d7a40; --status-running-dot:    #12b05f;
+  --status-completed-bg:  #eef3ff; --status-completed-fg:  #2551c7; --status-completed-dot:  #2551c7;
+  --status-failed-bg:     #fde0dc; --status-failed-fg:     #b53528; --status-failed-dot:     #c94a3a;
+  --status-paused-bg:     #fdf0d4; --status-paused-fg:     #8a5e14; --status-paused-dot:     #F5B547;
+  --status-terminated-bg: #fdf0d4; --status-terminated-fg: #8a5e14; --status-terminated-dot: #F5B547;
+
+  /* ── Sidebar tokens ───────────────────────────────────────────────────── */
+  --c-sidebar:             #2f3843;
+  --c-sidebar-item:        rgba(255,255,255,0.75);
+  --c-sidebar-item-icon:   rgba(255,255,255,0.55);
+  --c-sidebar-active-bg:   rgba(245,181,71,0.15);
+  --c-sidebar-active-text: #F5B547;
+  --c-sidebar-divider:     rgba(255,255,255,0.08);
+  --c-sidebar-group-label: rgba(255,255,255,0.30);
+}
+
+/* ── Keyframe animations (used by Modal, Toast, Skeleton etc.) ────────────── */
+@keyframes modalIn {
+  from { opacity: 0; transform: scale(0.96) translateY(8px); }
+  to   { opacity: 1; transform: scale(1)    translateY(0); }
+}
+
+@keyframes toastIn {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes skelShimmer {
+  0%   { background-position:  200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes statusPulse {
+  0%   { box-shadow: 0 0 0 0 currentColor; }
+  70%  { box-shadow: 0 0 0 5px transparent; }
+  100% { box-shadow: 0 0 0 0 transparent; }
+}
+
+@keyframes cdc-pulse {
+  0%, 100% { opacity: 0.25; transform: scale(1); }
+  50%      { opacity: 0.7;  transform: scale(1.03); }
+}