brainzlab-ui 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ced860d47f714cff879f54a05c2a6112355dd19a869c5617a5745a6854b9ac51
-  data.tar.gz: 3adfd42c848fbad199823d3fcaf0dfc921351a1207269e71e3448d591de99a34
+  metadata.gz: 273e92114173d155dbb570ceba73de87bd968282e5e0c942baf463ad2f225543
+  data.tar.gz: add3d18ca6a9ade3cb84728c49bea134bdbda89b5e776dacd9076f042341d065
 SHA512:
-  metadata.gz: 893d62a6ab85948cfa57ad750ad2500cbed699b8475c0323a3fd1560d7e81fb17da95a4d812a1af638e50e7378bad4003e8871e6401c2230adac66fbbe124700
-  data.tar.gz: bc731eec65e86c209bf4ac4558e409be3535610b391609b2bb242422070c5cca366ea2ca7960ccdcfb722887398823529c55672229e1040bc265e6f14661d4f0
+  metadata.gz: e7fdfdaea5814ccb02cd9b055f998fa221bfdc1b75c4a3ce69a5276433671c0e29fb736fa67793665a922119cb1909bed9f62125fb4771a5b7b429eefdc85d4c
+  data.tar.gz: 77dbb32022fd4ac9f4973c91c99719a095d29fa7f73147db797174f37e7b97453e04346f4aed717111d8309bedb189c57aea2c87ed83e909287c62ae0aa2d90c

data/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.2.0] - 2026-06-07
+
+### Added
+- **Service brand tokens** for all 16 platform services (Synapse, Nexus, Platform,
+  Signal, Beacon, Vision, Sentinel, Cortex, Dendrite, Nerve, Axon, Recall, Reflex,
+  Pulse, Flux, Vault) plus the Plexus engine, grouped by platform layer.
+- **Layer accent tokens** (`--color-layer-ai|hub|obs|data|foundation`) so service
+  pages stay layer-coded while reading as one family.
+- **Data-viz categorical palette** (`--color-viz-1..8`) for charts and dashboards
+  across every sub-app.
+- **MaturityBadge** Phlex component + `.badge-maturity` / `.badge-disponible` /
+  `.badge-beta` / `.badge-proximamente` CSS (light + dark) for the app launcher
+  and service landing pages.
+
 ## [0.1.0] - 2024-12-27
 
 ### Added

data/README.md

@@ -52,9 +52,26 @@ The design system follows Anthropic/Claude-inspired aesthetics with warm earth t
 
 | Token | Value | Usage |
 |-------|-------|-------|
-| `--color-primary-500` | #D97706 | Anthropic orange |
-| `--color-cream-50` | #FAFAF9 | Background |
-| `--color-ink-900` | #1C1917 | Text |
+| `--color-primary-500` | #C77B58 | Brand terracotta |
+| `--color-cream-50` | #FAF9F7 | Background |
+| `--color-ink-900` | #3D3833 | Text |
+
+#### Service & layer tokens
+
+Each of the 16 platform services has a brand accent (`--color-<service>`, e.g.
+`--color-signal`, `--color-vault`), grouped by platform layer. Service landing
+pages and dashboards tint with the **layer accent** so the family stays coherent
+while staying layer-coded:
+
+| Layer | Token | Services |
+|-------|-------|----------|
+| L5 — AI | `--color-layer-ai` | Synapse, Nexus |
+| L4 — Hub | `--color-layer-hub` | Platform |
+| L3 — Observability | `--color-layer-obs` | Signal, Beacon, Vision, Sentinel, Cortex, Dendrite, Nerve, Axon |
+| L2 — Data | `--color-layer-data` | Recall, Reflex, Pulse, Flux |
+| L1 — Foundation | `--color-layer-foundation` | Vault |
+
+Charts and dashboards use the categorical data-viz palette `--color-viz-1` … `--color-viz-8`.
 
 #### Typography
 
@@ -92,6 +109,7 @@ The design system follows Anthropic/Claude-inspired aesthetics with warm earth t
 | **Button** | primary, secondary, ghost, danger |
 | **Card** | default, bordered, elevated |
 | **Badge** | default, success, warning, error, info |
+| **MaturityBadge** | disponible, beta, proximamente |
 | **Alert** | info, success, warning, error |
 | **Input** | text, email, password, number |
 | **Select** | default, multi |

data/app/assets/stylesheets/brainzlab_ui/components.css

@@ -280,6 +280,43 @@
   color: var(--color-ink-600);
 }
 
+/* ----------------------------------------
+   MATURITY BADGES
+   ----------------------------------------
+   Service maturity signal used on landing pages and the
+   app launcher. Honesty rule: never imply a scaffold is
+   production-ready — "proximamente" must read as not-yet.
+*/
+.badge-maturity {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 0.6875rem;
+  font-weight: 600;
+}
+
+.badge-maturity::before {
+  content: '';
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 9999px;
+  background: currentColor;
+}
+
+.badge-disponible {
+  background: rgba(34, 197, 94, 0.1);
+  color: var(--color-success-600);
+}
+
+.badge-beta {
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--color-info-600);
+}
+
+.badge-proximamente {
+  background: var(--color-cream-200);
+  color: var(--color-ink-500);
+}
+
 /* ----------------------------------------
    NAVIGATION
    ---------------------------------------- */
@@ -828,6 +865,21 @@ input[type="radio"]:focus-visible {
   color: var(--color-dark-text-muted);
 }
 
+.dark .badge-disponible {
+  background: rgba(34, 197, 94, 0.2);
+  color: var(--color-success-400);
+}
+
+.dark .badge-beta {
+  background: rgba(59, 130, 246, 0.2);
+  color: var(--color-info-400);
+}
+
+.dark .badge-proximamente {
+  background: var(--color-dark-surface-light);
+  color: var(--color-dark-text-muted);
+}
+
 /* ----------------------------------------
    DARK MODE - NAVIGATION
    ---------------------------------------- */

data/app/assets/stylesheets/brainzlab_ui/tokens.css

@@ -65,13 +65,64 @@
   --color-ink-900: #3D3833;
   --color-ink-950: #1a1a1a;
 
-  /* Product Brand Colors */
-  --color-recall: #D97757;
-  --color-reflex: #E45B3A;
-  --color-pulse: #3B82F6;
-  --color-flux: #8B5CF6;
-  --color-signal: #F59E0B;
-  --color-cortex: #10B981;
+  /* ============================================
+     Service Brand Colors (the 16-service platform)
+     ============================================
+     One accent per service, grouped by platform layer.
+     Used for service landing pages, the app launcher,
+     and per-service dashboard theming.
+  */
+  /* L5 — AI */
+  --color-synapse: #E07B39; /* orchestration engine */
+  --color-nexus: #14B8A6;   /* AI seller */
+  /* L4 — Hub */
+  --color-platform: #64748B; /* identity + billing hub */
+  /* L3 — Observability */
+  --color-signal: #F59E0B;   /* alerting */
+  --color-beacon: #06B6D4;   /* uptime */
+  --color-vision: #EC4899;   /* visual regression + browser AI */
+  --color-sentinel: #84CC16; /* host/container monitor */
+  --color-cortex: #10B981;   /* feature flags */
+  --color-dendrite: #6366F1; /* living wikis */
+  --color-nerve: #F97316;    /* background-job monitor */
+  --color-axon: #A855F7;     /* workflow engine */
+  /* L2 — Data */
+  --color-recall: #D97757;   /* logs */
+  --color-reflex: #E45B3A;   /* errors */
+  --color-pulse: #3B82F6;    /* traces / APM */
+  --color-flux: #8B5CF6;     /* events / metrics */
+  /* L1 — Foundation */
+  --color-vault: #475569;    /* secrets substrate */
+  /* Engine (internal substrate, not a public SKU) */
+  --color-plexus: #0EA5E9;   /* AI-execution engine */
+
+  /* ============================================
+     Layer Accent Tokens
+     ============================================
+     The accent a service page is tinted with, by layer,
+     so the 16 services read as one family while staying
+     layer-coded.
+  */
+  --color-layer-ai: #7C3AED;         /* L5 */
+  --color-layer-hub: #64748B;        /* L4 */
+  --color-layer-obs: #F59E0B;        /* L3 */
+  --color-layer-data: #3B82F6;       /* L2 */
+  --color-layer-foundation: #475569; /* L1 */
+
+  /* ============================================
+     Data-Viz Categorical Palette
+     ============================================
+     Ordered, distinguishable series colors for charts,
+     dashboards, and metrics across every sub-app.
+  */
+  --color-viz-1: #C77B58; /* brand terracotta */
+  --color-viz-2: #3B82F6;
+  --color-viz-3: #10B981;
+  --color-viz-4: #8B5CF6;
+  --color-viz-5: #F59E0B;
+  --color-viz-6: #EC4899;
+  --color-viz-7: #06B6D4;
+  --color-viz-8: #84CC16;
 
   /* Semantic - Success */
   --color-success-50: #F0FDF4;

data/lib/brainzlab/components/maturity_badge.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Brainzlab
+  module Components
+    # Signals how production-ready a platform service is.
+    # Honesty rule: a scaffold/early service must render as
+    # :proximamente (not yet), never as :disponible.
+    class MaturityBadge < Base
+      LEVELS = {
+        disponible: { class: 'badge-disponible', label: 'Disponible' },
+        beta: { class: 'badge-beta', label: 'Beta' },
+        proximamente: { class: 'badge-proximamente', label: 'Próximamente' }
+      }.freeze
+
+      def initialize(level: :beta, label: nil, **attrs)
+        @level = LEVELS.key?(level) ? level : :beta
+        @label = label
+        @attrs = attrs
+      end
+
+      def view_template
+        span(class: badge_classes, **@attrs.except(:class)) { @label || LEVELS[@level][:label] }
+      end
+
+      private
+
+      def badge_classes
+        classes('badge', 'badge-maturity', LEVELS[@level][:class], @attrs[:class])
+      end
+    end
+  end
+end

data/lib/brainzlab/ui/version.rb

@@ -2,6 +2,6 @@
 
 module Brainzlab
   module UI
-    VERSION = '0.1.1'
+    VERSION = '0.2.0'
   end
 end

data/lib/brainzlab/ui.rb

@@ -19,6 +19,7 @@ module Brainzlab
     autoload :Button, 'brainzlab/components/button'
     autoload :Card, 'brainzlab/components/card'
     autoload :Badge, 'brainzlab/components/badge'
+    autoload :MaturityBadge, 'brainzlab/components/maturity_badge'
     autoload :Input, 'brainzlab/components/input'
     autoload :Alert, 'brainzlab/components/alert'
     autoload :Avatar, 'brainzlab/components/avatar'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: brainzlab-ui
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Brainz Lab
@@ -105,6 +105,7 @@ files:
 - lib/brainzlab/components/card.rb
 - lib/brainzlab/components/empty_state.rb
 - lib/brainzlab/components/input.rb
+- lib/brainzlab/components/maturity_badge.rb
 - lib/brainzlab/components/modal.rb
 - lib/brainzlab/components/nav_item.rb
 - lib/brainzlab/components/stat_card.rb