Use it when adding or changing component styles, color tokens, themes, CSS variables, or PostCSS mixins in the project.

It shows where design tokens come from and which files should not be edited by hand. This reduces accidental conflicts with generated CSS and keeps theme behavior consistent.

openbridge-webcomponents css-postcss.instructions.md — Instructions file by Ocean-Industries-Concept-Lab

Q: What is openbridge-webcomponents css-postcss.instructions.md?

A reference for using CSS and PostCSS in the Openbridge web-components project. PostCSS is a tool that transforms CSS, and this guide explains the project’s generated variables, themes, color layers, and mixins.

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods

npx agentmods add instructions/ocean-industries-concept-lab/openbridge-webcomponents/css-postcss

Clone the repo

git clone --depth 1 https://github.com/Ocean-Industries-Concept-Lab/openbridge-webcomponents

Made for: GitHub Copilot.

Per session 1,158 This file is loaded in full into every session.

When invoked 1,158 The same file — it is already loaded in full.

Security scan A 0 findings. Scan, not verified.

Origin original No closer match found in the catalogue.

Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

Model	Per session	Once invoked
Fable 5	$0.01158	$0.01158
Opus 5	$0.00579	$0.00579
Sonnet 5	$0.00232	$0.00232
Haiku 4.5	$0.00116	$0.00116

Measured 3d ago against content hash 19e5ef08c750, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

openbridge-webcomponents css-postcss.instructions.md scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

.github/instructions/css-postcss.instructions.md · 35 lines

How it starts

The opening of the file, as written. The whole thing — 35 lines — stays where its author put it; the contents beside it link to each section on GitHub.

CSS / PostCSS Reference

Full reference with diagrams, code examples, and complete mixin inventories lives in IMPLEMENTATION_GUIDELINES.md § PostCSS. This file summarises the key concepts so agents have immediate context.

Key concepts

variables.css is generated by the obc-figma-plugin (Figma community plugin 1448419213272098259) — do not hand-edit. Token additions, renames, or value changes happen in Figma (or in the plugin's rename() function), then the whole file is replaced with the plugin's cssvariables codegen output. See IMPLEMENTATION_GUIDELINES.md § PostCSS for the full caution.
Global palette: src/palettes/variables.css — four themes (day, dusk, night, bright) via data-obc-theme attribute on :root.
Two-layer color model: Raw primitives (--base-blue-*, --base-gray-*, --base-cyan-*, …, plus -tint variants) are redefined per theme. Semantic tokens (e.g. --instrument-enhanced-primary-color, --element-active-color, --automation-medium-base-blue-*) are layered on top and consumed by components. Semantic tokens are stored as literal rgb(...) values per theme — not as var(--base-…) references — so overriding only the primitives is not enough to fully repaint the UI; override both layers (or only the semantic tokens) when re-skinning. The night theme already uses a teal/green (rgb(88, 200, 162)) for --instrument-enhanced-primary-color, proving the architecture supports non-blue accents. A few hot spots reference raw primitives directly: charthelpers/constants.ts (CHART_SECTOR_ENHANCED_COLORS, used by line/area/donut/pie charts), ar/building-blocks/poi-line/*.css, and the --automation-medium-base-blue-* tokens. Consumers can re-theme without forking by shipping a stylesheet after variables.css that redeclares the relevant tokens under each :root[data-obc-theme="…"] selector; Chart.js components read CSS vars at render-time via getCssVariableValue(), so overrides must be present on an ancestor before the chart mounts.
Touch target / Visual target: Interactive components use a two-layer DOM — an outer invisible touch target (default 48 px) and an inner visible wrapper (default 32 px). The @mixin style bridges them via the visibleWrapperClass parameter.
@mixin style: PostCSS build-time mixin generating six interaction states (enabled, activated, hover, pressed, focus-visible, disabled). Parameters: style=<flat|normal|raised|amplified|indent|selected>, optional visibleWrapperClass=.class, optional noClick flag for display-only sub-parts.
Color token convention: Surface colors follow --{variant}-{state}-background-color / --{variant}-{state}-border-color. Text/icon colors follow --on-{variant}-{role}-color (roles: active, neutral, disabled).
Size variants: .obc-component-size-regular (default) / -medium / -large / -xl classes on an ancestor scale all --ui-components-* sizing tokens via CSS variable inheritance.
Font mixins: Three families — UI (font-button, font-label, font-body, etc.), Instrument (font-instrument-value-*, font-instrument-label, etc.), Automation (font-automation-value-*). Full list in IMPLEMENTATION_GUIDELINES.md.
Alert mixins: alert-alarm, alert-critical, alert-caution in src/mixins/alert.css. Blink animation drives the CSS @property registered --alarm-blink-on/off and --warning-blink-on/off, but is driven from TypeScript via the Web Animations API in src/palettes/blinking.ts (blinkingInstall()), not by a CSS @keyframes — see alert-frame, alert-icon and alert-button for the call sites. Components bind opacity to those custom properties; the periods live in blinking.ts.
--obc-can-hover: CSS variable kill-switch for hover feedback (defined in src/main.css, consumed by @mixin style via color-mix()).
Icon slots: use <obi-placeholder></obi-placeholder> or other <obi-*> icons (1000+ available).

Read the full file on GitHub · 35 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

3d ago First seen · 35 lines · 1,158 tokens per session scan A 19e5ef08c750

Subscribe to this mod's changes

openbridge-webcomponents css-postcss.instructions.md is an instructions file published in the GitHub repository Ocean-Industries-Concept-Lab/openbridge-webcomponents (91 stars, last pushed 4d ago), licensed Apache-2.0. It adds 1,158 tokens to every session, about $0.0058 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.

CSS and styling Frontend angular automation design-system lit maritime openbridge

openbridge-webcomponents css-postcss.instructions.md

Getting it into your agent

What it costs to keep this loaded

Grade A, and why

Nothing flagged

How it starts

CSS / PostCSS Reference

Key concepts

What this file has done since we first saw it

Other instructions, from other repositories

primitives AGENTS.md

daisyui packages.daisyui.instructions.md

fundamental-ngx AGENTS.md

fundamental-ngx CLAUDE.md

primitives CLAUDE.md

wonder-blocks frontend-rules.instructions.md