LFDS Core CSS

Consolidated CSS package for LFDS web consumers.

Scope of this README

This README covers this package only:

• what @lansforsakringar/core-css contains
• how to consume it from npm
• package-local development commands

For monorepo-level setup, see root README.md. For core release/versioning workflows, see packages/core/README.md.

What this package includes

@lansforsakringar/core-css bundles:

• typography utility classes
• text color utility classes
• token-based CSS custom properties (colors, dimensions, typography variables)
• font assets used by LFDS web packages
• TypeScript types for IDE intellisense

This package is intended as the default CSS entrypoint for LFDS web usage.

Installation

npm install @lansforsakringar/core-css

Usage

JavaScript/TypeScript entrypoint

import '@lansforsakringar/core-css/index.css'

CSS entrypoint

@import '@lansforsakringar/core-css';

TypeScript - Token Access

import tokens from '@lansforsakringar/core-css/tokens'

const style = {
  color: `var(${tokens.color.text.primary})`,
  padding: `var(${tokens.spacing.md})`,
}

TypeScript - Type-Safe CSS Variables

import { cssVar } from '@lansforsakringar/core-css/css-variables'

const style = {
  color: cssVar('--lfds-color-text-primary'),  // ✅ autocomplete
  padding: cssVar('--lfds-spacing-md'),
}

TypeScript - Utility Class Types

import type { LfClassName, LooseLfClassName } from '@lansforsakringar/core-css/classes'

// Strict - only LFDS classes allowed
interface StrictProps {
  textStyle: LfClassName
}

// Loose - LFDS autocomplete + accepts custom strings
interface FlexibleProps {
  className?: LooseLfClassName
}

Package Exports

| Export | Description | |--------|-------------| | ./index.css | All CSS styles | | ./tokens | Nested token object with CSS variable names | | ./tokens/flat | Flat token object (legacy) | | ./classes | TypeScript types for utility class names | | ./css-variables | TypeScript types + cssVar() helper |

IDE Intellisense

See docs/ide-intellisense.md for full setup instructions.

Quick Setup (VS Code)

1. Install HTML CSS Support extension for utility class autocomplete
2. Add CSS Custom Data for variable autocomplete:

{
  "css.customData": [
    "./node_modules/@lansforsakringar/core-css/dist/lfds.css-data.json"
  ]
}

Relationship to other packages

• Use together with @lansforsakringar/core-components for web components.
• Replaces the need for multiple separate token/font CSS imports in most consumer projects.
• Internally depends on token/font generation from:
  • @lansforsakringar/core-tokens
  • @lansforsakringar/core-fonts

Local development (in monorepo)

Run commands from repository root:

# Build package output
npm run build -w packages/core/css

# Watch mode
npm run dev -w packages/core/css

Build output is written to:

• packages/core/css/dist/index.css
• packages/core/css/dist/assets/*

Related docs

• Components package: packages/core/components/README.md
• Tokens package: packages/core/tokens/README.md
• Breaking/migration summary: BREAKING_CHANGES_v3.md