@mtdt/observeops-ds-spec 0.1.0

package/tokens/kit-accents.json

@@ -0,0 +1,14 @@
+{
+  "$description": "Kit accents — Ant Design Vue 1.x LESS @vars that are NOT in variable.less (compile-time, theme-independent). They paint a few Ant component INTERNALS that tokens/variables.json cannot resolve. AI: if a registry says a control's dot/check is the 'Ant @primary-color' / cyan, resolve it here.",
+  "@primary-color": {
+    "value": "#099dd9",
+    "themed": false,
+    "note": "cyan — Ant interactive accent. Same in light + dark.",
+    "usedBy": [
+      "radio list dot",
+      "checkbox check",
+      "select/spinner",
+      "some Ant focus borders"
+    ]
+  }
+}

package/tokens/primitive.json

@@ -0,0 +1,130 @@
+{
+  "$description": "TIER 1 — PRIMITIVES. Raw values only, never themed, never used directly by components. SLICE for sign-off; values extracted verbatim from src/design/variable.less.",
+  "$status": "FUTURE / portable DTCG token layer (mds-*). NOT yet wired to the running product or component tokensUsed — the LIVE product uses tokens/variables.json (--vars). Do not emit mds-* for live output.",
+  "color": {
+    "white": {
+      "$type": "color",
+      "$value": "#ffffff"
+    },
+    "navy": {
+      "950": {
+        "$type": "color",
+        "$value": "#07101f"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#111c2c"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#1d2a3e"
+      }
+    },
+    "neutral": {
+      "50": {
+        "$type": "color",
+        "$value": "#ecf1f9"
+      },
+      "100": {
+        "$type": "color",
+        "$value": "#e3e8f2"
+      },
+      "400": {
+        "$type": "color",
+        "$value": "#7186a8"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#2b394f"
+      },
+      "800": {
+        "$type": "color",
+        "$value": "#172336"
+      },
+      "900": {
+        "$type": "color",
+        "$value": "#000000"
+      }
+    },
+    "cyan": {
+      "500": {
+        "$type": "color",
+        "$value": "#099dd9"
+      }
+    },
+    "teal": {
+      "500": {
+        "$type": "color",
+        "$value": "#0d9488"
+      }
+    },
+    "severity": {
+      "critical": {
+        "50": {
+          "$type": "color",
+          "$value": "#fef5f5"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#ec5b5b"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "#310c0c"
+        }
+      },
+      "clear": {
+        "50": {
+          "$type": "color",
+          "$value": "#d1fae0"
+        },
+        "500": {
+          "$type": "color",
+          "$value": "#14b053"
+        },
+        "950": {
+          "$type": "color",
+          "$value": "#0d3a1f"
+        }
+      }
+    }
+  },
+  "space": {
+    "100": {
+      "$type": "dimension",
+      "$value": "8px"
+    },
+    "200": {
+      "$type": "dimension",
+      "$value": "12px"
+    },
+    "300": {
+      "$type": "dimension",
+      "$value": "16px"
+    },
+    "400": {
+      "$type": "dimension",
+      "$value": "24px"
+    }
+  },
+  "font": {
+    "size": {
+      "100": {
+        "$type": "dimension",
+        "$value": "0.6rem"
+      },
+      "200": {
+        "$type": "dimension",
+        "$value": "0.8rem"
+      },
+      "300": {
+        "$type": "dimension",
+        "$value": "1rem"
+      },
+      "500": {
+        "$type": "dimension",
+        "$value": "1.5rem"
+      }
+    }
+  }
+}

package/tokens/purpose-map.json

@@ -0,0 +1,67 @@
+{
+  "$description": "Purpose → token map. When styling a NEW element that ISN'T a catalogued component, pick the token by PURPOSE here (instead of guessing or hardcoding). All entries are real product tokens: runtime CSS --vars (resolve via variables.json), LESS @vars (structural.json), or the kit @primary-color (kit-accents.json). Colour values shown as light / dark.",
+  "$rules": [
+    "Never hardcode hex/rgba — use the token for the purpose.",
+    "Brand / primary action = --primary (navy #111c2c light / #e3e8f2 dark), NOT cyan.",
+    "The cyan @primary-color (#099dd9) is ONLY the Ant form-control accent (radio dot, checkbox check, select) — not a general brand colour.",
+    "Every colour token is theme-aware (light/dark) — never branch on theme yourself.",
+    "For monitor/alert SEVERITY use the Severity component + --severity-* tokens; for generic status use --secondary-*."
+  ],
+  "color": {
+    "surface": {
+      "page / app background": { "token": "--page-background-color", "light": "#fff", "dark": "#07101f" },
+      "card / widget surface": { "token": "--common-widget-bg", "light": "#fff", "dark": "#172336" },
+      "content area background": { "token": "--common-main-bg", "light": "#ecf1f9", "dark": "#172336" },
+      "subtle fill / skeleton / code chip": { "token": "--code-tag-background-color", "light": "#ecf1f9", "dark": "#172336" },
+      "row / subtle hover": { "token": "--neutral-lighter", "light": "#e3e8f2", "dark": "#1d2a3e" },
+      "nav item hover": { "token": "--nav-hover-bg", "light": "#ecf1f9", "dark": "#1d2a3e" },
+      "grid / table header": { "token": "--grid-header-bg", "light": "#ecf1f9", "dark": "rgba(72,89,117,0.4)" },
+      "left nav rail": { "token": "--nav-panel-bg", "light": "#f6f9fc", "dark": "#172336" },
+      "dashboard canvas": { "token": "--dashboard-background", "light": "#f9fafb", "dark": "#0b1627" },
+      "modal surface": { "token": "--modal-background-color", "light": "#fff", "dark": "#07101f" },
+      "drawer surface": { "token": "--drawer-background-color", "light": "#fff", "dark": "#07101f" },
+      "overlay / backdrop scrim": { "token": "--overlay-bg", "light": "rgba(0,0,0,0.25)", "dark": "rgba(255,255,255,0.25)" }
+    },
+    "text": {
+      "primary / body": { "token": "--page-text-color", "light": "#1d2a3e", "dark": "#cad3e2" },
+      "secondary": { "token": "--neutral-regular", "light": "#7186a8", "dark": "#6a7fa0" },
+      "muted / hint / placeholder / caption": { "token": "--neutral-light", "light": "#6a7fa0", "dark": "#8e9fbc" },
+      "form-field label (secondary)": { "token": "--text-color-common-secondary", "light": "#7186a8", "dark": "#8e9fbc" },
+      "on-brand / inverse (text on --primary or a coloured fill)": { "token": "--active-text-color", "light": "#fff", "dark": "#fff" },
+      "white (badges, knobs)": { "token": "--white-regular", "light": "#fff", "dark": "rgba(255,255,255,0.8)" }
+    },
+    "border": {
+      "default border / divider": { "token": "--border-color", "light": "#e3e8f2", "dark": "#1d2a3e" },
+      "form field border": { "token": "--field-border-color", "light": "#e3e8f2", "dark": "#2b394f" }
+    },
+    "brand / interactive": {
+      "primary action (button bg, active pill, key accents)": { "token": "--primary", "light": "#111c2c", "dark": "#e3e8f2" },
+      "primary alt (secondary brand / gradient stop)": { "token": "--primary-alt", "light": "#1d2a3e", "dark": "#cad3e2" },
+      "form-control accent (radio dot, checkbox check, select highlight)": { "token": "@primary-color", "value": "#099dd9", "note": "kit LESS @var (kit-accents.json); same both themes" }
+    },
+    "status / semantic": {
+      "error / danger": { "token": "--secondary-red", "light": "#ec5b5b", "dark": "#ec5b5b" },
+      "success": { "token": "--secondary-green", "light": "#14b053", "dark": "#36d576" },
+      "warning": { "token": "--secondary-yellow", "light": "#e8b407", "dark": "#fad100" },
+      "info / in-progress": { "token": "--secondary-orange", "light": "#f47c22", "dark": "#fa9950" }
+    },
+    "severity (monitor / alert LEVELS)": {
+      "$pattern": "--severity-<level> = the dot/text colour; --severity-<level>-dot-box = the light centre/halo; --severity-<level>-lighter = a bg tint.",
+      "levels": ["up", "clear", "critical", "down", "major", "warning", "maintenance", "unreachable", "suspended", "disable", "stop", "none", "unknown"],
+      "$use": "Prefer the Severity component (atoms/severity); fall back to --secondary-* for generic status strings."
+    },
+    "neutrals ramp (light → dark)": ["--neutral-lightest", "--neutral-lighter", "--neutral-light", "--neutral-regular", "--neutral-dark", "--neutral-darker", "--neutral-darkest"],
+    "elevation / shadow": {
+      "card / panel / popover / drawer / toast shadow": { "token": "--neutral-shadow-light", "value": "rgba(70,70,70,0.15)", "note": "shadow COLOUR — keep your own offset/blur, e.g. box-shadow: 0 6px 18px var(--neutral-shadow-light)" },
+      "tooltip shadow (complete value)": { "token": "--tooltip-box-shadow", "value": "0 2px 8px rgba(0,0,0,0.15)" }
+    }
+  },
+  "structural": {
+    "$note": "LESS @vars (structural.json) — compile-time, not themed.",
+    "spacing": { "@padding-lg": "24px", "@padding-md": "16px (default form gutter)", "@padding-sm": "12px", "@padding-xs": "8px" },
+    "sizing": { "@input-height-base": "32px", "@btn-height": "2.1rem", "@header-height": "55px", "@nav-icon-width": "50px", "@navbar-height": "50px", "@search-height": "36px" },
+    "radius": { "$note": "The DS has NO @border-radius-base — use @btn-radius for ALL general radius (cards, modals, inputs, chips), not just buttons.", "@btn-radius": "4px (the general-purpose default radius, app-wide)", "@btn-raidus-full": "150px (pill; note the source typo 'raidus' is the real token name)" },
+    "type": { "@font-family": "'Poppins', sans-serif", "@text-lg": "1.5rem", "@text-regular": "1rem", "@text-sm": "0.8rem (base body)", "@text-xs": "0.6rem" }
+  },
+  "grid": { "$note": "Layout uses the 12-col MRow/MCol — see layout/grid.json. 6 = half, 12 = full, gutter 16 (@padding-md)." }
+}

package/tokens/semantic.dark.json

@@ -0,0 +1,90 @@
+{
+  "$description": "TIER 2 — SEMANTIC (DARK mode). SAME keys as semantic.light.json, different primitive references. This is what 'modes' means: one token name, value swaps per theme. SLICE for sign-off.",
+  "$status": "FUTURE / portable DTCG token layer (mds-*). NOT yet wired to the running product or component tokensUsed — the LIVE product uses tokens/variables.json (--vars). Do not emit mds-* for live output.",
+  "color": {
+    "background": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.navy.950}"
+      },
+      "brand": {
+        "bold": {
+          "$type": "color",
+          "$value": "{color.white}"
+        }
+      },
+      "severity": {
+        "critical": {
+          "subtle": {
+            "$type": "color",
+            "$value": "{color.severity.critical.950}"
+          }
+        },
+        "clear": {
+          "subtle": {
+            "$type": "color",
+            "$value": "{color.severity.clear.950}"
+          }
+        }
+      }
+    },
+    "surface": {
+      "raised": {
+        "$type": "color",
+        "$value": "{color.neutral.800}"
+      }
+    },
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.neutral.100}"
+      },
+      "brand": {
+        "$type": "color",
+        "$value": "{color.neutral.100}"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.neutral.400}"
+      },
+      "inverse": {
+        "$type": "color",
+        "$value": "{color.navy.950}"
+      },
+      "severity": {
+        "critical": {
+          "$type": "color",
+          "$value": "{color.severity.critical.500}"
+        },
+        "clear": {
+          "$type": "color",
+          "$value": "{color.severity.clear.500}"
+        }
+      },
+      "accent": {
+        "teal": {
+          "$type": "color",
+          "$value": "{color.teal.500}"
+        }
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.navy.800}"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.neutral.700}"
+      },
+      "focused": {
+        "$type": "color",
+        "$value": "{color.cyan.500}"
+      }
+    },
+    "link": {
+      "$type": "color",
+      "$value": "{color.cyan.500}"
+    }
+  }
+}

package/tokens/semantic.light.json

@@ -0,0 +1,90 @@
+{
+  "$description": "TIER 2 — SEMANTIC (LIGHT mode). Roles that reference primitives. This is the SHARED CONTRACT with Figma. Property-first naming. SLICE for sign-off.",
+  "$status": "FUTURE / portable DTCG token layer (mds-*). NOT yet wired to the running product or component tokensUsed — the LIVE product uses tokens/variables.json (--vars). Do not emit mds-* for live output.",
+  "color": {
+    "background": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "brand": {
+        "bold": {
+          "$type": "color",
+          "$value": "{color.navy.950}"
+        }
+      },
+      "severity": {
+        "critical": {
+          "subtle": {
+            "$type": "color",
+            "$value": "{color.severity.critical.50}"
+          }
+        },
+        "clear": {
+          "subtle": {
+            "$type": "color",
+            "$value": "{color.severity.clear.50}"
+          }
+        }
+      }
+    },
+    "surface": {
+      "raised": {
+        "$type": "color",
+        "$value": "{color.white}"
+      }
+    },
+    "text": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.navy.800}"
+      },
+      "brand": {
+        "$type": "color",
+        "$value": "{color.navy.900}"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.neutral.400}"
+      },
+      "inverse": {
+        "$type": "color",
+        "$value": "{color.white}"
+      },
+      "severity": {
+        "critical": {
+          "$type": "color",
+          "$value": "{color.severity.critical.500}"
+        },
+        "clear": {
+          "$type": "color",
+          "$value": "{color.severity.clear.500}"
+        }
+      },
+      "accent": {
+        "teal": {
+          "$type": "color",
+          "$value": "{color.teal.500}"
+        }
+      }
+    },
+    "border": {
+      "default": {
+        "$type": "color",
+        "$value": "{color.neutral.100}"
+      },
+      "subtle": {
+        "$type": "color",
+        "$value": "{color.neutral.100}"
+      },
+      "focused": {
+        "$type": "color",
+        "$value": "{color.cyan.500}"
+      }
+    },
+    "link": {
+      "$type": "color",
+      "$value": "{color.cyan.500}"
+    }
+  }
+}

package/tokens/structural.json

@@ -0,0 +1,35 @@
+{
+  "$description": "TIER 0 — STRUCTURAL LESS @vars (spacing, sizing, radii, typography) from src/design/index.less. Not themed. AI: these are the @-prefixed LESS vars (compile-time), distinct from the runtime CSS --vars in variables.json.",
+  "spacing": {
+    "@padding-lg": "24px",
+    "@padding-md": "16px",
+    "@padding-sm": "12px",
+    "@padding-xs": "8px"
+  },
+  "sizing": {
+    "@navbar-height": "50px",
+    "@nav-icon-width": "50px",
+    "@nav-icon-height": "40px",
+    "@input-height-base": "32px",
+    "@header-height": "55px",
+    "@header-drop-width": "320px",
+    "@search-height": "36px",
+    "@search-width": "18rem",
+    "@btn-height": "2.1rem"
+  },
+  "radius": {
+    "@btn-radius": "4px",
+    "@btn-raidus-full": "150px"
+  },
+  "typography": {
+    "@font-family": "'Poppins', sans-serif",
+    "@text-lg": "1.5rem",
+    "@text-regular": "1rem",
+    "@text-sm": "0.8rem",
+    "@text-xs": "0.6rem",
+    "@font-size-base": "0.8rem",
+    "@font-size-lg": "1rem",
+    "@font-size-sm": "0.8rem",
+    "@font-size-10": "10px"
+  }
+}