@kth/style

Styles and components used across KTH.

Documentation available in the KTH Style website

Structure

@kth/style
├── src/
│   ├── index.ts
│   └── components
├── scss/
│   ├── components
│   ├── tokens
│   └── utils
├── assets
├── ...
├── package.json
└── rollup.config.mjs

• scss contains all CSS. Those can be imported as they are
• src contains TypeScript source for JavaScript components
  • src/components contains the package components
  • index.ts defines the package's public JavaScript exports
• assets contains static assets such as fonts and the logotype. These assets can be exposed by applications using KTH Style

Installation

Install the package with npm:

npm install @kth/style

Usage

Import JavaScript components from the package:

import { MenuPanel } from "@kth/style";

Import SCSS files directly when needed:

@use "@kth/style/scss/components/button";
@use "@kth/style/scss/tokens/colors";

Development

Run package commands from the repository root with npm workspaces:

npm install
npm run dev -w @kth/style
npm test -w @kth/style
npm run build -w @kth/style

Alternatively, run the package scripts from this directory:

cd @kth/style
npm run dev
npm test
npm run build

The package exposes JavaScript components through the package root and SCSS files through the scss export. Refer to the source and the KTH Style website for the complete component documentation.

Release process

Before creating the release, it is recommended to run the checks locally:

npm test
npm run build

Run the release command from the repository root:

npm run lerna:version

Lerna updates the package version, creates the release commit, and creates a Git tag. It does not push the changes or publish the package. The package must have changes since the previous release, but those changes do not need to be pushed before running this command.

After lerna:version completes, push the release commit and tag:

git push --follow-tags

Publishing to npm is handled by the CI pipeline when a version tag, such as @kth/[email protected], is pushed. Do not run npm publish manually unless the pipeline documentation instructs you to do so.

Manual npm publishing

Manual publishing requires an npm account that is authorized to publish the @kth package scope. Log in with that account before publishing:

npm login
npm whoami

The npm whoami command should show the authorized npm username. If the account does not have publish permission for the package, or if npm authentication has expired, npm publish will fail. Two-factor authentication may also require an OTP or an appropriately configured npm token.

From the package directory, publish the package with:

cd @kth/style
npm publish

For a prerelease, specify the appropriate distribution tag, for example:

npm publish --tag alpha

Finally, create a release note and announce the release in the Developer channel on Slack.