skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-design-tokens

Guide Canopy design token usage for Angular component styling.

23|46|Updated Sep 7, 2020
Search Tags:#theming#angular#tokens#design-system#css-variables#design-tokens#canopy
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-design-tokens
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-design-tokens
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/design-tokens
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-design-tokens

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides guidance to use Canopy design tokens correctly when applying CSS custom properties for colour, typography, spacing, or component styling in an Angular project.

Core Features & Use Cases

  • Token Tiers: guidance on when to use component, semantic, and foundation tokens; use cases for common components.
  • Token Modes: describes Colour, Layout, Typography, and Component theme modes and how they map to UI.
  • Usage Guidance: best practices for styling across components and pages not fully covered by existing Canopy components.

Quick Start

Configure your Canopy project to reference design tokens and apply the lowest available tier when styling components.

Frequently Asked Questions about canopy-design-tokens

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I use design tokens for styling Angular components not covered by Canopy?▼

To apply Canopy design tokens to custom Angular components, reference the design tokens as CSS custom properties and select the lowest available token tier for consistent theming and accessibility.

When should I use component versus semantic or foundation design tokens?▼

Use component design tokens for specific UI elements, semantic tokens for contextual styling, and foundation tokens as the base layer to maintain consistent theming and accessibility across Angular projects.

What are the different design token modes available for theming?▼

Design token modes include Colour, Layout, Typography, and Component theme modes, which map directly to UI elements to ensure consistent theming and accessibility across your Angular application.

How do I apply CSS variables for colour and typography in a Canopy design system project?▼

Apply CSS variables for colour and typography by referencing Canopy design tokens, utilizing the semantic and foundation tiers to ensure your custom components maintain accessibility and visual consistency.

Does this design token guidance work for styling pages outside built-in Canopy components?▼

Yes, this guidance specifically targets styling components and pages not fully covered by existing built-in Canopy components, ensuring correct CSS custom property usage for colour, typography, and spacing.

What is the usage priority for Canopy design tokens when styling custom interfaces?▼

The usage priority dictates applying the lowest available token tier, starting from component down to foundation tokens, ensuring predictable theming and accessibility for custom Angular page layouts.

Related Skills

Explore More Design & Creative Skills→
Legal-and-GeneralLegal-and-General
23

canopy-spacing-row-gap

Apply the Canopy lgRowGap directive to standardize row-gap spacing in Angular grid and flex layouts.

Official
Basic
edfentonedfenton
3

nean-design-review

Capture UI screenshots across breakpoints with Playwright and evaluate against the nean-styleguide.

Community
Advanced
Legal-and-GeneralLegal-and-General
23

canopy-colour-foundation

Apply Canopy colour tokens and WCAG contrast rules to Angular projects.

Official
Intermediate
GedMarcGedMarc
2

angular-awesome-theming

Applies Tailwind-style utility classes and design tokens to style web components.

Community
Intermediate