@projectwallace/css-design-tokens 0.0.1 → 0.3.0

package/dist/destructure-box-shadow.d.ts

@@ -1,9 +1,10 @@
+import { ColorToken } from './types.js';
 type CssLength = {
     value: number;
     unit: string;
 };
 export type DestructuredShadow = {
-    color: string | undefined;
+    color: ColorToken | undefined;
     offsetX: CssLength | undefined;
     offsetY: CssLength | undefined;
     blur: CssLength | undefined;

package/dist/group-colors.d.ts

@@ -1,4 +1,3 @@
 import { NormalizedColorWithAuthored } from 'color-sorter';
-import { CssAnalysis } from './types.js';
 export declare const color_dict: Map<number, string>;
-export declare function group_colors(colors: CssAnalysis['values']['colors']['uniqueWithLocations']): [number, NormalizedColorWithAuthored[]][];
+export declare function group_colors(colors: Record<string, unknown>): [number, NormalizedColorWithAuthored[]][];

package/dist/index.d.ts

@@ -1,30 +1,30 @@
 import { DestructuredShadow } from './destructure-box-shadow.js';
-import { CssAnalysis, CubicBezierToken, DimensionToken, DurationToken, FontFamilyToken, NumberToken, BaseToken, UnparsedToken } from './types.js';
+import { ColorToken, CssAnalysis, CubicBezierToken, DimensionToken, DurationToken, FontFamilyToken, NumberToken, BaseToken, UnparsedToken } from './types.js';
 export declare function css_to_tokens(css: string): {
-    Color: Record<string, UnparsedToken>;
-    FontSize: Record<string, UnparsedToken | DimensionToken>;
-    FontFamily: Record<string, FontFamilyToken>;
-    LineHeight: Record<string, UnparsedToken | DimensionToken | NumberToken>;
-    Gradient: Record<string, UnparsedToken>;
-    BoxShadow: Record<string, UnparsedToken | (BaseToken & {
+    color: Record<string, ColorToken>;
+    font_size: Record<string, UnparsedToken | DimensionToken>;
+    font_family: Record<string, FontFamilyToken>;
+    line_height: Record<string, UnparsedToken | DimensionToken | NumberToken>;
+    gradient: Record<string, UnparsedToken>;
+    box_shadow: Record<string, UnparsedToken | (BaseToken & {
         $type: "shadow";
         $value: DestructuredShadow | DestructuredShadow[];
     })>;
-    Radius: Record<string, UnparsedToken>;
-    Duration: Record<string, DurationToken | UnparsedToken>;
-    Easing: Record<string, UnparsedToken | CubicBezierToken>;
+    radius: Record<string, UnparsedToken>;
+    duration: Record<string, DurationToken | UnparsedToken>;
+    easing: Record<string, UnparsedToken | CubicBezierToken>;
 };
 export declare function analysis_to_tokens(analysis: CssAnalysis): {
-    Color: Record<string, UnparsedToken>;
-    FontSize: Record<string, UnparsedToken | DimensionToken>;
-    FontFamily: Record<string, FontFamilyToken>;
-    LineHeight: Record<string, UnparsedToken | DimensionToken | NumberToken>;
-    Gradient: Record<string, UnparsedToken>;
-    BoxShadow: Record<string, UnparsedToken | (BaseToken & {
+    color: Record<string, ColorToken>;
+    font_size: Record<string, UnparsedToken | DimensionToken>;
+    font_family: Record<string, FontFamilyToken>;
+    line_height: Record<string, UnparsedToken | DimensionToken | NumberToken>;
+    gradient: Record<string, UnparsedToken>;
+    box_shadow: Record<string, UnparsedToken | (BaseToken & {
         $type: "shadow";
         $value: DestructuredShadow | DestructuredShadow[];
     })>;
-    Radius: Record<string, UnparsedToken>;
-    Duration: Record<string, DurationToken | UnparsedToken>;
-    Easing: Record<string, UnparsedToken | CubicBezierToken>;
+    radius: Record<string, UnparsedToken>;
+    duration: Record<string, DurationToken | UnparsedToken>;
+    easing: Record<string, UnparsedToken | CubicBezierToken>;
 };

package/dist/types.d.ts

@@ -18,6 +18,21 @@ export type UnparsedToken = BaseToken & {
     $value: string;
     $type?: never;
 };
+type ColorSpace = string | 'srgb' | 'display-p3' | 'hsl' | 'hwb' | 'lab' | 'lch' | 'oklab' | 'oklch' | 'display-p3' | 'a98-rgb' | 'prophoto-rgb' | 'rec2020' | 'xyz-d65' | 'xyz-d50';
+export type ColorComponent = number | 'none';
+export type ColorValue = {
+    colorSpace: ColorSpace;
+    components: [ColorComponent, ColorComponent, ColorComponent];
+    alpha: number;
+    hex?: string;
+};
+export type ColorToken = BaseToken & {
+    $type: 'color';
+    $value: ColorValue;
+    $extensions: {
+        [EXTENSION_AUTHORED_AS]: string;
+    };
+};
 export type DimensionToken = BaseToken & {
     $type: 'dimension';
     $value: {
@@ -37,3 +52,4 @@ export type FontFamilyToken = BaseToken & {
     $type: 'fontFamily';
     $value: string[] | string;
 };
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@projectwallace/css-design-tokens",
   "description": "Generate spec-compliant Design Tokens from CSS.",
-  "version": "0.0.1",
+  "version": "0.3.0",
   "license": "EUPL-1.2",
   "author": "Bart Veneman <bart@projectwallace.com>",
   "repository": {
@@ -36,6 +36,7 @@
   "dependencies": {
     "@projectwallace/css-analyzer": "^7.5.0",
     "color-sorter": "^7.0.0",
+    "colorjs.io": "^0.6.0-alpha.1",
     "css-time-sort": "^3.0.0",
     "css-tree": "^3.1.0"
   },