@sellsuki-org/sellsuki-components

Sellsuki Design System — Web Component library built with Lit Element.

Requirements

<ssk-theme-provider> is required

All components depend on <ssk-theme-provider> being present in the ancestor tree. The provider injects CSS custom properties that every component relies on:

• Color tokens — --ssk-colors-* (e.g. --ssk-colors-gray-800)
• Spacing tokens — --spacing-* (e.g. --spacing-lg = 0.5rem)
• Border tokens — --border-* (e.g. --border-xxs ≈ 1px)
• Radius tokens — --radius-* (e.g. --radius-md = 0.5rem)

Without <ssk-theme-provider>, CSS custom properties resolve to browser defaults (effectively 0 for lengths) — causing components to render without spacing, borders, or correct colors.

Always wrap your app with the provider:

<ssk-theme-provider brand="patona">
  <!-- your app -->
</ssk-theme-provider>

Available brands: patona, ccs3, oc2plus

Installation

npm install @sellsuki-org/sellsuki-components

Usage

import '@sellsuki-org/sellsuki-components';

Development

# Start Storybook
npm run storybook

# Build
npm run build

# Run tests
npm run test