skills.rest
Skyscanner
SkyscannerOFFICIAL
Explore all skills by this author →
WebsiteGitHub

backpack-css-vars-migration

Migrate Backpack component SCSS mixins from SASS tokens to CSS custom properties for theming.

543|210|Updated Mar 22, 2017
Search Tags:#themING#SASS#backpack#CSS custom properties#Dark mode#Design tokens#scss migration
One-click install
npx skills add https://github.com/Skyscanner/backpack --skill backpack-css-vars-migration
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: backpack-css-vars-migration
Source: https://github.com/Skyscanner/backpack/tree/main/.claude/skills/backpack-css-vars-migration
Command: npx skills add https://github.com/Skyscanner/backpack --skill backpack-css-vars-migration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Backpack components hardcode light-mode values via static SASS tokens, so they cannot respond to the light/dark theme system defined in the new CSS custom property files. This Skill guides the full migration of a component's SCSS mixin to var() declarations with SASS fallbacks, including the surrounding theme wiring.

Core Features & Use Cases

  • SCSS Mixin Migration: Replace bare tokens.$bpk-*-day values and bpk-themeable-property calls with var(--bpk-*, sass-fallback) declarations for colours, spacing, radii, borders, and typography.
  • Theme Wiring Updates: Update themeAttributes.tsx to expose only --bpk-private-{component}-* keys, refresh themed stories, and fix themeAttributes-test.tsx assertions.
  • RTL Modernization: Convert physical properties plus bpk-rtl mixins into CSS logical properties like inset-inline-end.
  • Use Case: Migrating the Badge component so its background and text colours flip automatically between theme-backpack-light.css and theme-backpack-dark.css, while BpkThemeProvider overrides still work via the new private var names.

Quick Start

Migrate the Backpack badge component's SCSS mixin to CSS custom properties with SASS fallbacks and update its themeAttributes, stories, and tests.

Frequently Asked Questions about backpack-css-vars-migration

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

FAQPage Schema
How do I migrate a Backpack component to CSS custom properties?▼

Replace each bare SASS token or bpk-themeable-property call in the component's mixin with a plain var() declaration using the new --bpk-* variable name and the original SASS token as fallback. Then update themeAttributes.tsx, stories, and tests to use the new camelCase keys.

What is the correct var() fallback pattern for SCSS token migration?▼

Use exactly one CSS var with one SASS fallback: property: var(--new-css-var, tokens.$sass-token). Never nest fallbacks like var(--old-hook, var(--new-var, fallback)) and avoid cascade chains.

Which theme attributes should BpkThemeProvider expose per component?▼

Only expose component-scoped --bpk-private-{component}-* vars as themeable keys, converted to camelCase by stripping --bpk-. Global semantic vars like --bpk-text-primary or --bpk-radius-xs are theme-level concerns and should not appear in per-component themeAttributes.

How do I handle typography tmp vars during CSS var migration?▼

Check for --bpk-private-{component}-typography-tmp-* vars first; if only a tmp var exists and removal is planned, use the SASS token directly without a var() wrapper and remove the corresponding camelCase key from themeAttributes and its test.

How do I replace bpk-rtl mixins with logical properties?▼

Replace physical properties paired with the bpk-rtl mixin using CSS logical properties: right becomes inset-inline-end, left becomes inset-inline-start, and corner radii map to border-start-start-radius and similar equivalents.

Why do themed story overrides stop working after CSS var migration?▼

Stories fail when they still pass old theme keys like badgeNormalBackgroundColor that no longer map to vars used in the SCSS. Update BpkThemeProvider theme and themeAttributes props to the new private keys such as privateBadgeColourBgDefault.

Related Skills

Explore More Software Engineering Skills→
shawn-sandyshawn-sandy

inline-style-to-class

Convert inline HTML and JSX styles into reusable CSS classes with variables.

Community
Advanced
blueprintuiblueprintui
335

testing-visual

Automate visual regression testing for UI components across themes and states.

Official
Intermediate
hanzlahabibhanzlahabib
2

rcode-theme-system

Audit frontend theme tokens for styling consistency and RTL readiness.

Community
Intermediate
ai-enhanced-engineerai-enhanced-engineer
3

tailwindcss-4-patterns

Migrates Tailwind CSS projects to v4 with dark mode and Next.js integration.

Official
Advanced