@sb1/indeks-tokens 0.7.0 → 0.8.1

package/dist/scripts/build-colors/buildThemeColors.d.ts

@@ -0,0 +1,27 @@
+import type { Theme } from '../../themes';
+import type { BuiltTheme, BuiltThemeColors, OriginColor, ThemeColors, ThemeColorScale } from '../../themes/types';
+export declare const DEFAULT_CHROMA: {
+    0: number;
+    50: number;
+    100: number;
+    150: number;
+    200: number;
+    250: number;
+    300: number;
+    350: number;
+    400: number;
+    450: number;
+    500: number;
+    550: number;
+    600: number;
+    650: number;
+    700: number;
+    750: number;
+    800: number;
+    850: number;
+    900: number;
+    950: number;
+};
+export declare function buildTheme(theme: Theme): BuiltTheme;
+export declare function buildColorScales(colors: ThemeColors): BuiltThemeColors;
+export declare function buildColorScale(originColor: OriginColor): ThemeColorScale;

package/dist/scripts/build-colors/generate.d.ts

@@ -0,0 +1,55 @@
+import type { OriginColor, OriginScaleNames } from '../../themes/types';
+export type { OriginColor, OriginScaleNames } from '../../themes/types';
+/**
+ * Runtime-API for å generere fargeskalaer «on-the-fly» — i en Node-backend eller
+ * rett i nettleseren.
+ *
+ * Bakgrunn: de semantiske fargetokenene (`--ix-color-*`) peker på primitivene via
+ * `var(--ii-primitive-*)`. For å rethem-e i runtime trenger man derfor bare å regenerere
+ * primitiv-skalaen for én eller flere basisfarger og sette `--ii-primitive-<navn>-<steg>`
+ * på et scope — alle semantiske tokens re-resolver seg selv via `var()`-kaskaden.
+ *
+ * Dette er den ene tillatte runtime-bruken av de ellers interne `--ii-`-variablene.
+ * Navnekonvensjonen og `gray-0 = #FFFFFF`-unntaket eies her, så konsumenten slipper
+ * å hardkode dem.
+ */
+/** En map fra CSS-variabelnavn (`--ii-primitive-<navn>-<steg>`) til hex-verdi. */
+export type ColorScaleVariables = Record<string, OriginColor>;
+/**
+ * Bygg en 20-trinns fargeskala fra én basisfarge og returner den som en ferdig
+ * CSS-variabel-map, keyet på det interne primitiv-navnet.
+ *
+ * @example
+ * buildColorScaleVariables('brand', '#0078D8')
+ * // → { '--ii-primitive-brand-0': '#...', ..., '--ii-primitive-brand-950': '#...' }
+ */
+export declare function buildColorScaleVariables(name: OriginScaleNames, color: OriginColor): ColorScaleVariables;
+/** Minimal DOM-uavhengig type: alt vi trenger er `style.setProperty`. */
+type StyleTarget = {
+    style: {
+        setProperty(property: string, value: string): void;
+    };
+};
+/**
+ * Sett en fargevariabel-map som inline-styling på et element (nettleser).
+ *
+ * @example
+ * const vars = buildColorScaleVariables('brand', '#0078D8');
+ * applyColorScaleVariables(document.documentElement, vars);
+ */
+export declare function applyColorScaleVariables(element: StyleTarget, variables: ColorScaleVariables): void;
+export type ColorScaleVariablesToCssOptions = {
+    /** Selektor deklarasjonene pakkes i. Standard `:root`. */
+    selector?: string;
+};
+/**
+ * Serialisér en fargevariabel-map til en CSS-streng, klar til å injiseres i
+ * f.eks. et `<style>`-element eller serveres fra en Node-backend.
+ *
+ * @example
+ * const vars = buildColorScaleVariables('brand', '#0078D8');
+ * colorScaleVariablesToCss(vars);
+ * // → ':root {\n  --ii-primitive-brand-0: #...;\n  ...\n}'
+ * colorScaleVariablesToCss(vars, { selector: '.min-merkevare' });
+ */
+export declare function colorScaleVariablesToCss(variables: ColorScaleVariables, options?: ColorScaleVariablesToCssOptions): string;

package/dist/themes/index.d.ts

@@ -0,0 +1,2 @@
+export type { Theme } from './types';
+export declare const themes: import("./types").Theme[];

package/dist/themes/sb1.d.ts

@@ -0,0 +1,2 @@
+import type { Theme } from './types';
+export declare const sb1: Theme;

package/dist/themes/types.d.ts

@@ -0,0 +1,44 @@
+export type OriginColor = `#${string}` | `rgb(${string})` | `rgba(${string})` | `hsl(${string})` | `hsla(${string})`;
+export type OriginScaleNames = 'brand' | 'neutral' | 'success' | 'danger' | 'warning' | 'info' | 'gray';
+export type ThemeableProperties = {
+    'font-family'?: {
+        normal?: string;
+        heading?: string;
+        icons?: string;
+    };
+    'font-weight'?: {
+        regular?: number;
+        medium?: number;
+        button?: number;
+    };
+    border?: {
+        radius?: {
+            button?: string;
+            checkbox?: string;
+            input?: string;
+            xs?: string;
+            sm?: string;
+            md?: string;
+            lg?: string;
+            xl?: string;
+        };
+    };
+};
+export type ThemeColors = Record<OriginScaleNames, OriginColor>;
+export type ThemeColorScale = Record<(typeof DEFAULT_STEPS)[number], OriginColor>;
+export type BuiltThemeColors = Record<OriginScaleNames, ThemeColorScale>;
+export type Theme = {
+    name: string;
+    figmaName?: string;
+    identityColor: OriginColor;
+    colors: ThemeColors;
+    themeable?: ThemeableProperties;
+};
+export type BuiltTheme = {
+    name: string;
+    figmaName?: string;
+    identityColor: OriginColor;
+    colors: BuiltThemeColors;
+    themeable: ThemeableProperties;
+};
+export declare const DEFAULT_STEPS: readonly [0, 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sb1/indeks-tokens",
-  "version": "0.7.0",
+  "version": "0.8.1",
   "description": "Design tokens for Indeks design system",
   "type": "module",
   "homepage": "https://design.sparebank1.no",
@@ -22,7 +22,14 @@
   ],
   "main": "dist/index.css",
   "exports": {
-    ".": "./dist/index.css"
+    ".": "./dist/index.css",
+    "./generate": {
+      "types": "./dist/scripts/build-colors/generate.d.ts",
+      "import": "./dist/generate.js"
+    }
+  },
+  "bin": {
+    "indeks-tokens": "./dist/cli.js"
   },
   "files": [
     "dist",
@@ -44,19 +51,24 @@
     "colorjs.io": "^0.7.0",
     "cssnano": "^8.0.2",
     "dotenv": "^17.4.2",
+    "esbuild": "0.28.1",
     "postcss": "^8.5.20",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-preset-env": "^11.3.2",
     "tsx": "^4.23.1",
+    "typescript": "~6.0.3",
     "vitest": "^4.1.10"
   },
   "scripts": {
     "dev": "echo not implemented",
-    "build": "rm -rf ./dist ./.build && pnpm run build:tokens:css && pnpm run build:colors:web && pnpm run build:colors:figma && pnpm run build:bundle",
+    "build": "rm -rf ./dist ./.build && pnpm run build:tokens:css && pnpm run build:colors:web && pnpm run build:colors:figma && pnpm run build:bundle && pnpm run build:cli && pnpm run build:generate && pnpm run build:types",
+    "build:cli": "esbuild scripts/build-colors/cli.ts --bundle --platform=node --format=esm --outfile=dist/cli.js --banner:js='#!/usr/bin/env node' --define:__PKG_VERSION__=\"\\\"$npm_package_version\\\"\"",
+    "build:generate": "esbuild scripts/build-colors/generate.ts --bundle --platform=neutral --format=esm --outfile=dist/generate.js",
+    "build:types": "tsc -p tsconfig.generate.json",
     "build:spacing": "node ./scripts/build-spacing-tokens.cjs",
     "sync-tokens": "tsx scripts/figma-api/sync_figma_to_tokens.ts",
-    "test": "vitest buildThemeColors.test.ts",
+    "test": "vitest run buildThemeColors.test.ts cli.integration.test.ts generate.test.ts",
     "build:colors:web": "tsx ./scripts/build-colors/index platform=web path=./.build/css",
     "build:colors:figma": "tsx ./scripts/build-colors/index platform=figma path=./tokens/colors/from-code",
     "build:colors:ios": "tsx ./scripts/build-colors/index platform=ios path=./dist/ios",