# Changelog core-tokens

## Version 3.2.0

### Added

- **`border/pressed`**: New semantic color token for border in pressed state. Resolves to Blue 700 (light) / Blue 400 (dark).
- **`icon/hovered`**: New semantic color token for icon in hover state. Resolves to Blue 700 (light) / Blue 300 (dark).
- **`icon/focused`**: New semantic color token for icon in focus state. Resolves to Blue 700 (light) / Blue 300 (dark).
- **`icon/pressed`**: New semantic color token for icon in pressed state. Resolves to Blue 750 (light) / Blue 350 (dark).
- **`Layout container.lg.tokens.json`**: New container breakpoint at 720px.

### Changed

- **Layout tokens restructured** — reduced from 4 page breakpoints to 3 and simplified container modes:
  - **Removed** `Layout page.xl.tokens.json` (xl breakpoint removed)
  - **Removed** `Layout container.xs.tokens.json` (xs mode removed)
  - Container modes are now `sm` (320px), `md` (360px), `lg` (720px)
  - **Removed** `component.padding` and `component.component.gap` tokens from container files
  - Token paths flattened: `viewport.min-width.breakpoints` → `viewport.min-width`, `viewport.max-width.breakpoints` → `grid.max-width`
  - Updated page layout values:
    - `lg` page-padding: 32px → 80px
    - `lg` max-width: 1339px → 1440px

## Version 3.1.0

### Added

- **`color-link-focus`**: New semantic color token for links in focus state. Resolves to Blue 900 (light) / Blue 550 (dark).
- **`icon-button-background`**: New component token for icon button background. Aliases `background-primary`.
- **Layout tokens from Figma** — new Figma Variables collections for page layout and container queries:
  - **Page layout tokens** (4 responsive modes: `sm`, `md`, `lg`, `xl`):
    - `--breakpoint-sm` (320px), `--breakpoint-md` (768px), `--breakpoint-lg` (1024px), `--breakpoint-xl` (1440px)
    - `--page-max-width` — responsive max-width per breakpoint
    - `--grid-cols` — number of grid columns per breakpoint (4 → 8 → 12)
    - `--spacing-gap` — column gap per breakpoint
    - `--spacing-page` — page inline padding per breakpoint
  - **Container tokens** (3 modes: `xs`, `sm`, `md`):
    - `--container-xs`, `--container-sm`, `--container-md` — container width thresholds
    - `--component-padding` and `--component-gap` — responsive via container queries

- **Layout CSS output** — new `layout.css` file included in the `tokens.css` bundle, providing layout custom properties as responsive `@media` blocks.

- **Utility class generators** — six new Style Dictionary formatters that output CSS utility classes directly from tokens:
  - `css-spacing-utilities.js` → `generated/spacing.css`
  - `css-border-radius-utilities.js` → `generated/border-radius.css`
  - `css-color-utilities.js` → `generated/color.css`
  - `css-border-utilities.js` → `generated/border.css`
  - `css-sizing-utilities.js` → `generated/sizing.css`
  - `css-layout-utilities.js` → `generated/layout.css` (responsive grid + container queries)

### Changed

- **Breaking**: `tokens.css` no longer exports `typography-classes.css` or `text-color-classes.css`. Consumers importing `@lansforsakringar/core-tokens` directly who relied on these utility classes must either:
  - Switch to `@lansforsakringar/core-css` (recommended), or
  - Import `generated/typography-classes.css` and `generated/text-color-classes.css` manually
- `typography-classes.css` and `text-color-classes.css` formatters now wrap output in `@layer utilities`
- `web-index-css.js` updated to include `layout.css` import

## Version 3.0.2

### Changed

- **Token descriptions updated from Figma**: All semantic color token descriptions standardized to a consistent "Use as/for/in…" format. Risk tokens now describe their level. State-layer tokens (`on-dark`, `on-light`) now include usage guidance. Typo fixes and internal notes cleaned up.

## Version 3.0.1

### Added

- **IDE IntelliSense support**: Token definitions now include metadata for editor autocomplete.

### Removed

- Remaining base brand color tokens removed: `baseBrandPrimaryLfBlue`, `baseBrandPrimarySnow`, `baseBrandPrimaryLiquorice`.

  | Removed token | Replacement |
  |---|---|
  | `baseBrandPrimaryLfBlue` | Use the appropriate semantic token, e.g. `semanticTextBrandPrimary`, `semanticBorderBrandPrimary`, or `semanticIconPrimary` |
  | `baseBrandPrimarySnow` | Use `semanticBackgroundPrimary` or `semanticTextInverted` |
  | `baseBrandPrimaryLiquorice` | Use `semanticTextPrimary` |

  These tokens were deprecated in v3.0.0 and are now fully removed from the Figma source.

## Version 3.0.0

### Breaking

- **Legend color token naming updated** – legend tokens were renamed from color-based keys to ordinal keys.

  | Before | After |
  |--------|-------|
  | `semantic/legends/blue-01` | `legends/one-100` |
  | `semantic/legends/blue-02` | `legends/one-200` |
  | `semantic/legends/blue-03` | `legends/one-300` |
  | `semantic/legends/blue-04` | `legends/one-400` |
  | `semantic/legends/blue-05` | `legends/one-500` |
  | `semantic/legends/blue-06` | `legends/one-600` |
  | `semantic/legends/red-01` | `legends/two-100` |
  | `semantic/legends/red-02` | `legends/two-200` |
  | `semantic/legends/red-03` | `legends/two-300` |
  | `semantic/legends/red-04` | `legends/two-400` |
  | `semantic/legends/red-05` | `legends/two-500` |
  | `semantic/legends/red-06` | `legends/two-600` |
  | `semantic/legends/neutral-01` | `legends/three-100` |
  | `semantic/legends/neutral-02` | `legends/three-200` |
  | `semantic/legends/neutral-03` | `legends/three-300` |
  | `semantic/legends/green-01` | `legends/four-100` |

#### 1. Typography Token Naming - Simplified & Reorganized

**Scope**: Token names in JavaScript, SCSS, CSS custom properties, and CSS utility classes

##### 1.1 Display Styles Consolidated

All display size variants are now consolidated into a single responsive `display` style token.

**Migration**: Replace all display token references with `display`. Responsive scaling is handled automatically by the token.

```javascript
// Before
const fontStyle = tokens.displayLg;

// After
const fontStyle = tokens.display;
```

| Before | After | Notes |
|--------|-------|-------|
| `displayXxl` | `display` | All display sizes → single responsive token |
| `displayXl` | `display` | — |
| `displayLg` | `display` | — |
| `displayMd` | `display` | — |
| `displaySm` | `display` | — |
| `displayXs` | `display` | — |
| `displayXxs` | `display` | — |

##### 1.2 Heading Styles Renamed to Semantic Levels

Headings are mapped to DOM heading levels (h1–h6) for better semantics.

**Migration**: Use the corresponding heading level token. If you were using `headingXxs`, switch to `headingLevel6`.

  | Before             | After           |
  | ------------------ | --------------- |
  | `displayXxl`       | `display`       |
  | `displayXl`        | `display`       |
  | `displayLg`        | `display`       |
  | `displayMd`        | `display`       |
  | `displaySm`        | `display`       |
  | `displayXs`        | `display`       |
  | `displayXxs`       | `display`       |
  | `headingXxl`       | `headingLevel1` |
  | `headingXl`        | `headingLevel2` |
  | `headingLg`        | `headingLevel3` |
  | `headingMd`        | `headingLevel4` |
  | `headingSm`        | `headingLevel5` |
  | `headingXs`        | `headingLevel6` |
  | `headingXxs`       | — removed       |
  | `bodyLgDefault`    | `body`          |
  | `bodyMdDefault`    | `bodySm`        |
  | `labelXlDefault`   | `labelLg`       |
  | `labelLgDefault`   | `labelLg`       |
  | `labelMdDefault`   | `label`         |
  | `labelSmDefault`   | `labelSm`       |
  | `labelXsDefault`   | `labelSm`       |
  | `captionLgDefault` | `caption`       |
  | `captionMdDefault` | `captionSm`     |
  | `valueXxl`         | `value2xl`      |
  | `valueXxs`         | — removed       |

  All display sizes are consolidated into a single responsive `display` style. `valueXl`–`valueSm` are unchanged.

##### 1.3 Body, Label & Caption Styles Simplified

Removed "Default" suffix and consolidated size variants.

**Migration**: Update all references. `value*` tokens remain mostly unchanged except for the size prefix renaming.

##### 1.4 Variant Styles (Strong, Emphasis, Italic) Removed as Separate Tokens

**Before:** Variant styles were separate tokens:

```javascript
tokens.bodyLgStrong
tokens.bodyLgEmphasis
tokens.bodyLgItalic
```

**After:** Use base typography tokens with modifier classes for variants:

  | Before            | After                                                   |
  | ----------------- | ------------------------------------------------------- |
  | `bodyLgStrong`    | `body` + `.lf-font-bold`                                |
  | `bodyLgEmphasis`  | `body` + `.lf-font-bold`                                |
  | `bodyLgItalic`    | `body` + `font-style: italic`                           |
  | `labelMdStrong`   | `label` + `.lf-font-bold`                               |
  | `labelMdEmphasis` | `label` + `.lf-font-bold`                               |
  | `captionLgItalic` | `caption` + `font-style: italic`                        |
  | _(any variant)_   | _(base style)_ + `.lf-font-bold` / `font-style: italic` |

**Migration example:**

```html
<!-- v3 usage -->
<p class=\"lf-text-body lf-font-bold\">Strong body</p>
```

#### 2. Typography CSS Output – Files Reorganized

**Scope**: CSS import paths and available CSS custom properties

##### 2.1 Old Output Removed

- ❌ `text-styles.css` is removed (old `--text-style-*` shorthand variables)

##### 2.2 Use core-css Instead

Instead of importing individual token files, use the consolidated `@lansforsakringar/core-css` package which bundles all typography utilities:

```css
/* Recommended approach */
@import '@lansforsakringar/core-css';
```

This includes typography variables, classes, colors, dimensions, and fonts all in one import.

**Why consolidate imports?**
- Simpler dependency management
- Single import instead of multiple token files
- Automatically includes fonts
- All utilities stay in sync

##### 2.3 CSS Custom Property Naming Updated

Typography custom properties now use category-based naming:

| Old Format | New Format |
|------------|------------|
| `--text-style-*` | Removed in v3 |
| — | `--lfds-text-size-*` (size only) |
| — | `--lfds-line-height-*` (line height only) |
| — | `--lfds-font-family-*` (family only) |
| — | `--lfds-font-weight-*` (weight only) |

**Example:**

```css
/* Recommended in v3: use utility classes */
.my-body-copy {
  /* Use one of the generated classes, for example .lf-text-body or .lf-text-body-lg */
}

/* If needed, use verified variable names from typography-variables.css */
.my-body-copy-explicit {
  font-size: var(--lfds-text-size-body);
  line-height: var(--lfds-line-height-body);
  font-family: var(--lfds-font-family-body);
  font-weight: var(--lfds-font-weight-regular);
}
```

#### 3. Dimension Tokens – Semantic Prefix Removed & Restructured

**Scope**: Spacing, border-radius, border-width, and size tokens

##### 3.1 Border Radius Tokens Renamed

  **Border radius:**

  | Before        | After               | CSS variable                 |
  | ------------- | ------------------- | ---------------------------- |
  | `radius2xs`   | `borderRadius2xs`   | `--lfds-border-radius-2xs`   |
  | `radiusXs`    | `borderRadiusXs`    | `--lfds-border-radius-xs`    |
  | `radiusSm`    | `borderRadiusSm`    | `--lfds-border-radius-sm`    |
  | `radiusMd`    | `borderRadiusMd`    | `--lfds-border-radius-md`    |
  | `radiusLg`    | `borderRadiusLg`    | `--lfds-border-radius-lg`    |
  | `radiusRound` | `borderRadiusRound` | `--lfds-border-radius-round` |

**Migration:**

```javascript
// Before (in JavaScript/SCSS)
borderRadius: tokens.radiusSm;

// After
borderRadius: tokens.borderRadiusSm;
```

##### 3.2 Border Width Tokens Renamed & Expanded

  | Before          | After                 | CSS variable                   | Notes |
  | --------------- | --------------------- | ------------------------------ | --- |
  | `borderWidthSm` | `borderWidthDefault`  | `--lfds-border-width-default`  | Default border width |
  | `borderWidthMd` | `borderWidthEmphasis` | `--lfds-border-width-emphasis` | Emphasized border |
  | — | `borderWidthHover`    | `--lfds-border-width-hover`    | **NEW** – for hover states |
  | — | `borderWidthFocus`    | `--lfds-border-width-focus`    | **NEW** – for focus states |
  | — | `borderWidthSelected` | `--lfds-border-width-selected` | **NEW** – for selected states |

**Migration:**

```javascript
// Before
border: tokens.borderWidthSm solid var(--lfds-color-border-default);

// After
border: tokens.borderWidthDefault solid var(--lfds-color-border-default);
```

##### 3.3 Size Tokens Reorganized – Many Removed

Size tokens are now scoped to specific uses (e.g., control components).

  | Before         | After                     | CSS variable                  | Notes |
  | -------------- | ------------------------- | ----------------------------- | --- |
  | `size2xs` (16) | —                         | removed                       | No longer provided |
  | `sizeXs` (24)  | —                         | removed                       | — |
  | `sizeSm` (32)  | —                         | removed                       | — |
  | `sizeMd` (40)  | —                         | removed                       | — |
  | `sizeLg` (48)  | `sizeControlSm` (48)      | `--lfds-size-control-sm`      | For control-sized elements |
  | `sizeXl` (56)  | `sizeControlDefault` (56) | `--lfds-size-control-default` | Standard control size |
  | `size2xl` (64) | `sizeControlLg` (64)      | `--lfds-size-control-lg`      | Large control size |
  | `size3xl` (72) | —                         | removed                       | — |

**Migration:** If you were using generic size tokens, switch to the `sizeControl*` variants or use spacing tokens for layout.

##### 3.4 Spacing Tokens – Naming Updated

All spacing tokens are renamed from `semantic-sizes-spacing-*` to `semantic-spacing-*`. The values remain the same.

  | Before | After | Value | CSS Variable |
  |--------|-------|-------|---|
  | `--lfds-semantic-sizes-spacing-x0-5` | `--lfds-semantic-spacing-xs` | 4px | `var(--lfds-semantic-spacing-xs)` |
  | `--lfds-semantic-sizes-spacing-x1` | `--lfds-semantic-spacing-sm` | 8px | — |
  | `--lfds-semantic-sizes-spacing-x1-5` | `--lfds-semantic-spacing-md` | 12px | — |
  | `--lfds-semantic-sizes-spacing-x2` | `--lfds-semantic-spacing-lg` | 16px | — |
  | `--lfds-semantic-sizes-spacing-x3` | `--lfds-semantic-spacing-xl` | 24px | — |
  | `--lfds-semantic-sizes-spacing-x4` | `--lfds-semantic-spacing-2xl` | 32px | — |
  | `--lfds-semantic-sizes-spacing-x5` | `--lfds-semantic-spacing-3xl` | 40px | — |
  | `--lfds-semantic-sizes-spacing-x6` | `--lfds-semantic-spacing-4xl` | 48px | — |
  | `--lfds-semantic-sizes-spacing-x7` | `--lfds-semantic-spacing-5xl` | 56px | — |
  | `--lfds-semantic-sizes-spacing-x8` | `--lfds-semantic-spacing-6xl` | 64px | — |
  | — | `--lfds-semantic-spacing-7xl` | 72px | **NEW** |

**Migration:**

```css
/* Before */
gap: var(--lfds-semantic-sizes-spacing-x2);

/* After */
gap: var(--lfds-semantic-spacing-lg);
```

#### 4. Consolidated CSS – Use core-css

Instead of importing individual files from `core-tokens`, use the consolidated `@lansforsakringar/core-css` package:

```css
@import '@lansforsakringar/core-css';
```

This single import provides:
- All typography variables and classes
- All dimension tokens (spacing, border-radius, border-width, sizes)
- All color tokens and utility classes
- Font assets

#### 5. JavaScript/SCSS Token Names Updated

The token naming structure in JavaScript and SCSS outputs uses a new category-based approach. Use the `getCssVariableName()` utility for consistency.

```javascript
// JavaScript output
import { getCssVariableName } from '@lansforsakringar/core-tokens';

// If you're accessing tokens programmatically, use the utility
const varName = getCssVariableName('semantic-spacing-lg');
// → '--lfds-semantic-spacing-lg'
```

#### 6. New Tokens Added

##### 6.1 Color Tokens
- `semanticTextLinkHover` – hover state for link text
- `semanticStateLayerOnDark`, `semanticStateLayerOnLight` – state layers
- `semanticToggleBackgroundOn`, `semanticToggleForegroundOnAndroid`, `semanticToggleForegroundOffAndroid` – toggle states

##### 6.2 Text Color Utility Classes

Color utility classes are available via `@lansforsakringar/core-css`:

```css
@import '@lansforsakringar/core-css';
```

```html
<p class=\"lf-text-primary\">Primary text</p>
<p class=\"lf-text-link\">Link text</p>
<a href=\"#\" class=\"lf-text-link lf-font-bold\">Bold link</a>
```

### Migration Checklist

- [ ] Review and update all typography token references (rename display, heading, body, label, caption tokens)
- [ ] Update variant style usage to use base tokens + modifier classes (`.lf-font-bold`, etc.)
- [ ] Update CSS import paths to use `@lansforsakringar/core-css` instead of individual token files
- [ ] Update CSS variable references (old `--text-style-*` → new `--lfds-text-size-*`, etc.)
- [ ] Update all dimension token references (border-radius, border-width, spacing)
- [ ] Update JavaScript/SCSS imports using category-based naming
- [ ] Run tests to verify token access across all outputs
- [ ] Update any generated or template code that references old token names
- [ ] Test responsive typography behavior (new `display` token is responsive by default)

### Added

- **Typography composite tokens** (W3C `$type: "typography"`) synthesised from Figma size tokens.
- **W3C Resolver parser** (`resolver-parser.js`) for expanding token permutations across themes and responsive scales.
- **New color tokens**:
  - `semanticTextLinkHover`
  - `semanticStateLayerOnDark`, `semanticStateLayerOnLight`
  - `semanticToggleBackgroundOn`, `semanticToggleForegroundOnAndroid`, `semanticToggleForegroundOffAndroid`
- **New naming transforms**: `name-semantic-color.js` (snake_case), `name-semantic-color-kebab.js` (kebab-case), `name-android-color.js`.
- **Web index CSS** import file (`web-index-css.js`).
- **Text color utility classes** – new `text-color-classes.css` output exposing Tailwind-style `.lf-text-*` color helpers (e.g. `.lf-text-primary`, `.lf-text-link`). The classes simply apply `color: var(--lfds-color-text-*)`, so they automatically react to theme changes. Import via `@lansforsakringar/core-tokens/dist/web/text-color-classes.css` or the `@lansforsakringar/core-css` bundle.

### Removed

- `web-text-style.js` format (old `--text-style-*` shorthand).
- `semanticTemporaryPlaceholder` color token.
- Deprecated base color tokens: `baseBrandPrimaryWine`, `baseBrandPrimaryGarlic`, `baseBrandSecondarySky`, `baseBrandSecondaryBaby`, `baseBrandSecondaryPiggy`.
- `semanticIconPrimaryPressed` color token.

### Changed

- **Color token values updated** across light and dark themes.
- Border color tokens moved to top of XML output for consistency.
- Pressed/active/hover state tokens reorganised (e.g. `semanticBackgroundButtonPrimaryPressed` moved after base button tokens).
- `semanticTextOnButtonSecondaryPressed` and `semanticTextOnButtonTertiaryPressed` moved from standalone to inline with related tokens.

## Version 2.0.1

### Fixed

- **Android XML Color Format**: Fixed hex color format for colors with transparency in Android XML resources. Colors now correctly use `#AARRGGBB` format (alpha first) instead of `#RRGGBBAA` format (alpha last).
  - Example: `semanticBackgroundTransparentPrimary` now correctly outputs `#00ffffff` instead of `#00ffff`
  - Created custom `color/hex-android` transform to handle Android-specific color format requirements

### Added

- **Typography Migration Guide**: Added comprehensive migration documentation in `TYPOGRAPHY_MIGRATION.md`
  - iOS migration table with `TextStyle` → `Typography` mappings
  - Android migration table with `Type` → `Typography` mappings
  - Web examples showing CSS custom property usage
  - Migration strategies and best practices

### Changed

- Removed `transformGroup: 'android'` from Android XML configurations to prevent conflicts with custom color transforms

## Version 2.0.0

### Added

- New color tokens

  - `semantic-background-brand-primary`
  - `semantic-background-brand-secondary`
  - `component-toggle-background-on`

- New spacing tokens
  - Primitives: (50, 100, 200, 300, 400, 600, 800, 1000, 1200, 1400, 1600)
  - Semantic: (2xs-6xl)
- New size tokens
  - Primitives: (200-900)
  - Semantic: ( 2xs-3xl )
- New Border radius tokens
  - Primitives: (50-400, max)
  - Semantic: (2xs-lg, round)
- New border Width tokens
  - Primitives: (100, 200)
  - Semantic: (sm, md)
- New typography tokens
  - Primitives: (`font-family-lf`, `font-family-ibm`, `font-family-mono`)

### Removed

- All `semantic-sizes-spacing-xxx` tokens. Use `semantic-sizes-spacing-xxx` tokens instead.
- All old size tokens`primitives-size-xxx`.
- All old border-radius tokens. (`semantice-sizes-border-radius-xxx`)
- All old spacing tokens.
- All `typography-font-family` tokens. Use the new `primitives-typography-font-family-xxx` instead.
- All font-weight tokens. Not ready for production.
- `primitives-color-transparent-1-75`
- `primitives-color-transparent-6-75`
- All `semantic-background-web-button` and `semantic-text-web-on-button` tokens.

### Changed

- All colors (primitives & semantic) has been updated.
- `semantic-icon-on-button-primary`
- `semantic-icon-on-button-secondary`
- `semantic-icon-on-button-tertiary`
- `semantic-icon-on-error`

## Figma token export (order latest first)

An export to /raw-tokens was done:

- 2025-10-31 17:43
- 2025-10-33 16:51