Document how to use your own brand palette

component-library/README.md

@@ -84,6 +84,70 @@ import '@bcc-code/component-library-vue/style.css';
 
 You get the BCC theme and component styles only; no Tailwind utilities in your app.
 
+## Brand color
+
+The library uses the BCC teal as its brand color. An app outside the BCC profile can supply its own palette by redefining two ramps in its own CSS, after the library import. No configuration or build setup is needed — these are ordinary custom properties.
+
+```css
+@import '@bcc-code/component-library-vue/theme.css';
+
+/* Drives the semantic brand tokens: primary buttons, checkboxes and radio
+   buttons, focus and selected states, links, and the bg-brand-* / text-brand-*
+   Tailwind utilities. One set of values covers both color schemes — the
+   semantic layer picks different steps in dark mode. */
+:root {
+	--color-brand-100: #eff6ff;
+	--color-brand-200: #dbeafe;
+	--color-brand-300: #bfdbfe;
+	--color-brand-400: #93c5fd;
+	--color-brand-500: #60a5fa;
+	--color-brand-600: #3b82f6;
+	--color-brand-700: #2563eb;
+	--color-brand-800: #1d4ed8;
+	--color-brand-900: #1e40af;
+	--color-brand-1000: #172554;
+}
+
+/* Drives the ctx-brand-* context utilities. This ramp is mode-aware: step 100 is
+   always the step furthest from the text color, so the dark values are the same
+   palette in reverse. */
+:root {
+	--color-default-bcc-100: #eff6ff;
+	--color-default-bcc-200: #dbeafe;
+	--color-default-bcc-300: #bfdbfe;
+	--color-default-bcc-400: #93c5fd;
+	--color-default-bcc-500: #60a5fa;
+	--color-default-bcc-600: #3b82f6;
+	--color-default-bcc-700: #2563eb;
+	--color-default-bcc-800: #1d4ed8;
+	--color-default-bcc-900: #1e40af;
+	--color-default-bcc-1000: #172554;
+}
+
+.dark {
+	--color-default-bcc-100: #172554;
+	--color-default-bcc-200: #1e40af;
+	--color-default-bcc-300: #1d4ed8;
+	--color-default-bcc-400: #2563eb;
+	--color-default-bcc-500: #3b82f6;
+	--color-default-bcc-600: #60a5fa;
+	--color-default-bcc-700: #93c5fd;
+	--color-default-bcc-800: #bfdbfe;
+	--color-default-bcc-900: #dbeafe;
+	--color-default-bcc-1000: #eff6ff;
+}
+```
+
+The blocks have to come after the library's CSS so they win the cascade. In Option 1 that means putting them below the `@import` in your main CSS file; in Option 2, in a stylesheet loaded after `style.css`. Both are verified to work.
+
+Naming note: `--color-default-bcc-*` keeps the `bcc` in its name because it is generated from the Figma token set, not because it has to hold BCC colors. Overriding it with your own palette is supported.
+
+Skipping the second ramp leaves `ctx-brand-*` teal while everything else changes, which is usually not what you want.
+
+### Choosing values
+
+Step 800 carries small text and primary button backgrounds, so check it against the contrast requirements in the [Colors documentation](https://components.bcc.no/?path=/docs/foundations-colors--docs) — 4.5:1 against step 100 and against white. Supply a full light-to-dark range rather than ten shades of the same tone, since the mirrored dark ramp depends on it.
+
 # Components
 
 All components are namespaced with `Bcc`. Use them in templates or register them globally in your `main.ts`.

component-library/docs/foundations/Colors.mdx

@@ -122,6 +122,58 @@ import * as ColorStories from './Colors.stories';
     <Story of={ColorStories.DoAccentMixing} sourceState="none" />
   </div>
 
+  <hr className="border-default" />
+
+  <div className="flex flex-col gap-8">
+    <div className="flex flex-col gap-4">
+      <div>
+        <h2 className="heading-xl text-default">Using your own brand palette</h2>
+        <p className="body-md text-subtle mt-1">Products outside the BCC visual identity can replace the brand color with their own. No configuration or build setup is needed — the brand color is reached through two ramps of ordinary custom properties, and an app redefines them in its own CSS after the library import.</p>
+      </div>
+
+      <div>
+        <h3 className="heading-lg text-default">The two ramps</h3>
+        <p className="body-md text-subtle mt-1">Both have to be set. Overriding only the first leaves the <code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">ctx-brand-&#42;</code> contexts on the BCC teal while everything else changes.</p>
+        <ul className="body-md text-subtle mt-2 pl-5 list-disc">
+          <li><code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">--color-brand-100</code> to <code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">--color-brand-1000</code> feeds the semantic brand tokens, and through them primary buttons, checkboxes and radio buttons, focus and selected states, links, and the <code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">bg-brand-&#42;</code> / <code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">text-brand-&#42;</code> utilities. One set of values covers both color schemes, because the semantic layer picks different steps in dark mode.</li>
+          <li><code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">--color-default-bcc-100</code> to <code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">--color-default-bcc-1000</code> feeds the <code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">ctx-brand-&#42;</code> <a className="text-link-default hover:text-link-pressed" href="?path=/docs/styles-context--docs">context utilities</a>. This ramp is mode-aware — step 100 is always the step furthest from the text color — so the dark values are the same palette in reverse. The <code className="text-xs bg-neutral-100 border border-default rounded px-1 py-0.5">bcc</code> in the name comes from the Figma token set it is generated from, not from a requirement to hold BCC colors.</li>
+        </ul>
+      </div>
+    </div>
+
+
+```css
+@import '@bcc-code/component-library-vue/theme.css';
+
+:root {
+  --color-brand-100: #eff6ff;
+  /* ... */
+  --color-brand-800: #1d4ed8;
+  --color-brand-1000: #172554;
+
+  --color-default-bcc-100: #eff6ff;
+  /* ... */
+  --color-default-bcc-800: #1d4ed8;
+  --color-default-bcc-1000: #172554;
+}
+
+.dark {
+  /* the same palette, reversed */
+  --color-default-bcc-100: #172554;
+  --color-default-bcc-800: #bfdbfe;
+  --color-default-bcc-1000: #eff6ff;
+}
+```
+
+
+    <p className="body-md text-subtle">See the <a className="text-link-default hover:text-link-pressed" href="?path=/docs/readme--docs">Readme</a> for the full ten-step example and where to put it for each of the two styling options.</p>
+
+    <div>
+      <h3 className="heading-lg text-default">Choosing values</h3>
+      <p className="body-md text-subtle mt-1">Step 800 carries small text and primary button backgrounds, so check it against the contrast requirements above — 4.5:1 against step 100 and against white. Supply a full light-to-dark range rather than ten shades of the same tone, since the mirrored dark ramp depends on it.</p>
+    </div>
+  </div>
+
   <p className="body-md text-subtlest">For the full list of token values and hex codes, see <a className="text-link-default hover:text-link-pressed" href="?path=/docs/foundations-token-reference--docs">Token Reference</a>.</p>
 
 </div>

component-library/package.json

@@ -69,7 +69,7 @@
 		"create-version": "node ./scripts/version.cjs"
 	},
 	"dependencies": {
-		"@bcc-code/design-tokens": "^5.2.8",
+		"@bcc-code/design-tokens": "^5.2.10",
 		"@bcc-code/icons-vue": "^1.5.4",
 		"@primeuix/themes": "^2.0.3",
 		"@tailwindcss/vite": "^4.1.18",