diff --git a/component-library/README.md b/component-library/README.md index ae9fa3ac..42e1d6c3 100644 --- a/component-library/README.md +++ b/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`. diff --git a/component-library/docs/foundations/Colors.mdx b/component-library/docs/foundations/Colors.mdx index 59abb238..51af849a 100644 --- a/component-library/docs/foundations/Colors.mdx +++ b/component-library/docs/foundations/Colors.mdx @@ -122,6 +122,58 @@ import * as ColorStories from './Colors.stories'; +
+ +
+
+
+

Using your own brand palette

+

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.

+
+ +
+

The two ramps

+

Both have to be set. Overriding only the first leaves the ctx-brand-* contexts on the BCC teal while everything else changes.

+
    +
  • --color-brand-100 to --color-brand-1000 feeds the semantic brand tokens, and through them primary buttons, checkboxes and radio buttons, focus and selected states, links, and the bg-brand-* / text-brand-* utilities. One set of values covers both color schemes, because the semantic layer picks different steps in dark mode.
    • +
  • --color-default-bcc-100 to --color-default-bcc-1000 feeds 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. The bcc in the name comes from the Figma token set it is generated from, not from a requirement to hold BCC colors.
    • +
+
+
+ + +```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; +} +``` + + +

See the Readme for the full ten-step example and where to put it for each of the two styling options.

+ +
+

Choosing values

+

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.

+
+
+

For the full list of token values and hex codes, see Token Reference.

diff --git a/component-library/package.json b/component-library/package.json index c9450d31..2fd86c66 100644 --- a/component-library/package.json +++ b/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", diff --git a/component-library/pnpm-lock.yaml b/component-library/pnpm-lock.yaml index 5114de66..30ea629a 100644 --- a/component-library/pnpm-lock.yaml +++ b/component-library/pnpm-lock.yaml @@ -15,8 +15,8 @@ importers: .: dependencies: '@bcc-code/design-tokens': - specifier: ^5.2.8 - version: 5.2.8(@primeuix/themes@2.0.3) + specifier: ^5.2.10 + version: 5.2.10(@primeuix/themes@2.0.3) '@bcc-code/icons-vue': specifier: ^1.5.4 version: 1.5.4(vue@3.5.27(typescript@5.7.3)) @@ -199,8 +199,8 @@ packages: resolution: {integrity: sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA==} engines: {node: '>=6.9.0'} - '@bcc-code/design-tokens@5.2.8': - resolution: {integrity: sha512-9V2hZEIeNzWq5g7htRMH2AE631Z2a8FSoBXllGbvYturi0msC7M3JNn3F22n6fbAnll1vX7jVRcBdFJy6+G5yA==} + '@bcc-code/design-tokens@5.2.10': + resolution: {integrity: sha512-xaxl1hclwJh+AbD+54e8Dlg81WRSJYwODZAjr6ZX6IKmUyTHDUDGo+5Ch5xNXWMJi51+jc1Jd7xUBYrdS8nnwA==} engines: {node: '>=18.0.0'} peerDependencies: '@primeuix/themes': ^2.0.0 @@ -3859,7 +3859,7 @@ snapshots: '@babel/helper-string-parser': 7.29.7 '@babel/helper-validator-identifier': 7.29.7 - '@bcc-code/design-tokens@5.2.8(@primeuix/themes@2.0.3)': + '@bcc-code/design-tokens@5.2.10(@primeuix/themes@2.0.3)': dependencies: '@primeuix/themes': 2.0.3