This is a monorepo containing Konkan Design System tokens. It stores tokens in various formats for multiple frontend environments, primary mobile (SwiftUI and Kotlin) and web (CSS).

If you are developing an application and want to consume Konkan Design Tokens, the best place to start is the /dist directory which contains all our tokens. Token structure is documented in our RFCs, which are published under Discussions.

• Colours [live]
• Typography [live]
• Spacing [live]

To use Konkan tokens in CSS, you can import CSS with variables directly into your application. This is the recommended way of using tokens in CSS. Here's a short example:

@import url("https://raw.githubusercontent.com/matthewmorek/konkan-design-system/main/dist/toyota-light.css");

body {
  background-color: var(--semantic-color-background-neutral-bottom);
  color: var(--semantic-color-foreground-on-neutral-strong);
  font-family: var(--semantic-text-body-medium-regular-font-family);
  font-size: var(--semantic-text-body-medium-regular-font-size);
  font-weight: var(--semantic-text-body-medium-regular-font-weight);
  line-height: var(--semantic-text-body-medium-regular-line-height);
  letter-spacing: var(--semantic-text-body-medium-regular-letter-spacing);
}

If you want to contribute to the maintenance of this package, below you'll find some tips on what it does and where to start.

• Node.js 18+
• Node.js package manager (Yarn, npm, pnpm, etc)
• Familiarity with Style Dictionary
• Familiarity with Tokens Studio

We currently run a GitHub Action which automatically builds and commits built JSON tokens to each PR branch before each merge. This is an automated check to ensure consistency of output between what's in Tokens Studio (Figma) and what's available for engineering teams. If you want to build tokens locally, follow these steps:

1. Install required dependencies with your package manager (npm, pnpm, yarn, etc)
2. Run build command npm run build:tokens
3. You can manually commit any changes.