@design-sync/w3c-dtfm - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

dist/index.d.ts

@@ -5,2 +5,20 @@ import * as culori_fn from 'culori/fn';
 
+declare const TokenTypes: {
+    readonly color: "color";
+    readonly cubicBezier: "cubicBezier";
+    readonly fontFamily: "fontFamily";
+    readonly fontWeight: "fontWeight";
+    readonly dimension: "dimension";
+    readonly number: "number";
+    readonly duration: "duration";
+    readonly link: "link";
+    readonly other: "other";
+    readonly strokeStyle: "strokeStyle";
+    readonly shadow: "shadow";
+    readonly border: "border";
+    readonly transition: "transition";
+    readonly gradient: "gradient";
+    readonly typography: "typography";
+};
+
 type Number = number;
@@ -10,3 +28,3 @@ type Color = `#${string}`;
 type Duration = `${number}ms`;
-type Dimension = '0' | `${number}px` | `${number}rem` | `${number}em` | `${number}%`;
+type Dimension = `${number}px` | `${number}rem`;
 type FontWeightName = 'thin' | 'hairline' | 'extra-light' | 'ultra-light' | 'light' | 'normal' | 'regular' | 'book' | 'medium' | 'semi-bold' | 'demi-bold' | 'bold' | 'extra-bold' | 'ultra-bold' | 'black' | 'heavy' | 'extra-black' | 'ultra-black';
@@ -70,4 +88,4 @@ type FontWeight = number | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950' | FontWeightName;
 }
-type TokenType = keyof Tokens;
-type TokenAlias = `{${string}}` | `$${string}`;
+type TokenType = (typeof TokenTypes)[keyof typeof TokenTypes];
+type TokenAlias = `{${string}}`;
 interface TokenDefinition<T extends TokenType, V = Tokens[T]> {
@@ -119,6 +137,6 @@ $value: V | TokenAlias;
 declare function colorToCssValue(color?: TokenDefinition<'color'>['$value']): string;
-declare function borderToCssStyle(border?: TokenDefinition<'border'>['$value']): `{${string}}` | `$${string}` | {
+declare function borderToCssStyle(border?: TokenDefinition<'border'>['$value']): `{${string}}` | {
     borderColor: string;
-    borderWidth: Dimension | TokenAlias;
-    borderStyle: StrokeStyleName | TokenAlias;
+    borderWidth: Dimension | `{${string}}`;
+    borderStyle: StrokeStyleName | `{${string}}`;
 };
@@ -129,3 +147,7 @@ declare function borderToCssValue(border?: TokenDefinition<'border'>['$value']): string;
 declare function cubicBezierToCssValue(c?: TokenDefinition<'cubicBezier'>['$value']): string;
-declare function transitionToCssStyle(transition?: TokenDefinition<'transition'>['$value']): `{${string}}` | `$${string}` | {
+declare function transitionToCssStyle(transition?: TokenDefinition<'transition'>['$value']): ({
+    duration: string;
+    delay: string;
+    timingFunction: CubicBezier | `{${string}}`;
+} & `{${string}}`) | {
     transitionDuration: string;
@@ -137,9 +159,9 @@ transitionDelay: string;
 declare function fontFamilyToCssValue(fontFamily?: TokenDefinition<'fontFamily'>['$value']): string;
-declare function fontWeightToCssValue(fontWeight?: TokenDefinition<'fontWeight'>['$value']): number | TokenAlias;
-declare function typographyToCssStyle(typography?: unknown): `{${string}}` | `$${string}` | {
+declare function fontWeightToCssValue(fontWeight?: TokenDefinition<'fontWeight'>['$value']): number | `{${string}}`;
+declare function typographyToCssStyle(typography?: unknown): `{${string}}` | {
     fontFamily: string;
-    fontSize: Dimension | TokenAlias;
-    fontWeight: FontWeight | TokenAlias;
-    lineHeight: number | TokenAlias;
-    letterSpacing: Dimension | TokenAlias;
+    fontSize: Dimension | `{${string}}`;
+    fontWeight: FontWeight | `{${string}}`;
+    lineHeight: number | `{${string}}`;
+    letterSpacing: Dimension | `{${string}}`;
 };
@@ -193,6 +215,6 @@ declare function typographyToCssValue(typography?: TokenDefinition<'typography'>['$value']): string;
 
-declare function normalizeBorderValue(value?: unknown): `{${string}}` | `$${string}` | {
+declare function normalizeBorderValue(value?: unknown): `{${string}}` | {
     color: string;
-    width: Dimension | TokenAlias;
-    style: StrokeStyleName | TokenAlias;
+    width: Dimension | `{${string}}`;
+    style: StrokeStyleName | `{${string}}`;
 };
@@ -202,21 +224,26 @@
 
-declare function normalizeDimensionValue(value: unknown): Dimension | TokenAlias;
+declare const DIMENSION_REGEX: RegExp;
+declare function normalizeDimensionValue(value: unknown): Dimension | `{${string}}`;
+declare function destructDimensionValue(value: Dimension): {
+    number: number;
+    unit: string;
+};
 
-declare function normalizeShadowValue(value: unknown): TokenAlias | Shadow[];
+declare function normalizeShadowValue(value: unknown): `{${string}}` | Shadow[];
 
-declare function normalizeStrokeStyleValue(value: unknown): StrokeStyleName | TokenAlias;
+declare function normalizeStrokeStyleValue(value: unknown): StrokeStyleName | `{${string}}`;
 
-declare function normalizeCubicBezierValue(value: unknown): CubicBezier | TokenAlias;
+declare function normalizeCubicBezierValue(value: unknown): CubicBezier | `{${string}}`;
 declare function normalizeDurationValue(value: unknown): string;
-declare function normalizeTransitionValue(value: unknown): `{${string}}` | `$${string}` | {
+declare function normalizeTransitionValue(value: unknown): {
     duration: string;
     delay: string;
-    timingFunction: CubicBezier | TokenAlias;
+    timingFunction: CubicBezier | `{${string}}`;
 };
 
 declare function normalizeFontFamilyValue(value: unknown): string | string[];
-declare function normalizeFontWeightValue(value: unknown): number | TokenAlias;
-declare function normalizeTypographyValue(value: unknown): TokenAlias | Typography;
+declare function normalizeFontWeightValue(value: unknown): number | `{${string}}`;
+declare function normalizeTypographyValue(value: unknown): `{${string}}` | Typography;
 
-declare function normalizeGradientValue(value: unknown): TokenAlias | {
+declare function normalizeGradientValue(value: unknown): `{${string}}` | {
     color: string;
@@ -246,13 +273,46 @@ position: number | undefined;
 declare const DEFAULT_MODE = "default";
+/**
+ * options for the tokens walker
+ */
 interface TokensWalkerOptions {
-    disabledDefaultExtensions?: boolean;
-    extensions?: TokensWalkerExtension[];
-    normalizeValue?: boolean;
+    /**
+     * schema extensions to be applied to the tokens walker on top of the default schema extensions
+     * @default []
+     */
+    schemaExtensions?: TokensWalkerSchemaExtension[];
+    /**
+     * disable default schema default extensions (color modifiers, color generators, etc..)
+     * @default false
+     */
+    disableDefaultSchemaExtensions?: boolean;
+    /**
+     * dereference and normalize token values
+     * @default true
+     */
+    normalizeTokenValue?: boolean;
+    /**
+     * required modes to be generated and processed by the plugins, if no provided, we generate only `defaultMode` mode
+     * and modes schema extensions will be ignored
+     * @default []
+     */
     requiredModes?: string[];
+    /**
+     * which mode to use for the default token value, it will be used for naming the generated files
+     * @default 'default'
+     */
     defaultMode?: string;
+    /**
+     * filter tokens before they are processed by the plugins
+     * @default isSupportedTypeFilter (only tokens with a supported type are processed)
+     */
     filter?: TokensWalkerFilter;
+    /**
+     * override tokens by path during the build process, overrides are applied for all plugins, values are a function accepting the mode and returning the override value
+     * @default undefined
+     */
+    overrides?: TokenOverrides;
 }
 declare class TokensWalker {
     private tokensObj;
-    private extensions;
+    private schemaExtensions;
     private _rootKey;
@@ -263,3 +323,3 @@ private options;
     [Symbol.iterator](): IterableIterator<ProcessedDesignToken>;
-    use(extension: TokensWalkerExtension | TokensWalkerExtension[]): void;
+    use(extension: TokensWalkerSchemaExtension | TokensWalkerSchemaExtension[]): void;
     walk(iterator: TokenIterator<void>): void;
@@ -273,3 +333,3 @@ map<T>(iterator: TokenIterator<T>): T[];
     setOptions(options: TokensWalkerOptions): void;
-    disableDefaultExtensions(): void;
+    disableDefaultSchemaExtensions(): void;
     getModes(): Required<ModesExtension['modes']>;
@@ -279,3 +339,3 @@ getName(): string;
     getDescription(): string;
-    get(path: string): any;
+    getTokenByPath(path: string): any;
     derefTokenValue(tokenValue: unknown): unknown;
@@ -308,7 +368,7 @@ normalizeTokenValue(tokenValue: unknown): unknown;
 }
-interface TokensWalkerExtensionBaseAction {
+interface TokensWalkerBaseAction {
     extension: string;
     isResponsive?: boolean;
 }
-type TokensWalkerExtensionAction = TokensWalkerExtensionBaseAction & ({
+type TokensWalkerAction = TokensWalkerBaseAction & ({
     type: 'update';
@@ -333,7 +393,9 @@ path: string;
 type TokensWalkerFilter = TokensFilter | TokensFilter[];
-interface TokensWalkerExtension {
+interface TokensWalkerSchemaExtension {
     name: string;
     filter: TokensWalkerFilter;
-    run(token: ProcessedDesignToken, walker: TokensWalker): TokensWalkerExtensionAction[];
+    run(token: ProcessedDesignToken, walker: TokensWalker): TokensWalkerAction[];
 }
+type TokenOverrideFn = (mode: string) => unknown;
+type TokenOverrides = Record<string, TokenOverrideFn>;
 
@@ -352,5 +414,5 @@ interface TokenGenerator {
 interface ColorGeneratorsExtensionOptions {
-    filter?: TokensWalkerExtension['filter'];
+    filter?: TokensWalkerSchemaExtension['filter'];
 }
-declare function colorGeneratorsExtension({ filter, }?: ColorGeneratorsExtensionOptions): TokensWalkerExtension;
+declare function colorGeneratorsExtension({ filter, }?: ColorGeneratorsExtensionOptions): TokensWalkerSchemaExtension;
 
@@ -362,9 +424,9 @@ interface ColorTokenModifiersExtension {
 interface ColorModifiersExtensionOptions {
-    filter?: TokensWalkerExtension['filter'];
+    filter?: TokensWalkerSchemaExtension['filter'];
 }
-declare function colorModifiersExtension({ filter, }?: ColorModifiersExtensionOptions): TokensWalkerExtension;
+declare function colorModifiersExtension({ filter, }?: ColorModifiersExtensionOptions): TokensWalkerSchemaExtension;
 
 type ResponsiveModifier = 'up' | 'down' | 'between' | 'only';
 interface ResponsiveExtensionOptions {
-    filter: TokensWalkerExtension['filter'];
+    filter: TokensWalkerSchemaExtension['filter'];
     breakpoints?: Record<string, string>;
@@ -375,3 +437,3 @@ pathToBreakpoint?: (path: string) => string;
 }
-declare function responsiveExtension({ filter, breakpoints, type, base, pathToBreakpoint, }: ResponsiveExtensionOptions): TokensWalkerExtension;
+declare function responsiveExtension({ filter, breakpoints, type, base, pathToBreakpoint, }: ResponsiveExtensionOptions): TokensWalkerSchemaExtension;
 
@@ -384,2 +446,2 @@ declare function isDesignTokenValueRecord(value: unknown): value is DesignTokenValueRecord;
 
-export { type Border, type Color, type ColorModifier, type ColorModifiersExtensionOptions, type ColorTokenModifier, type ColorTokenModifiersExtension, type CubicBezier, DEFAULT_MODE, type DerefToken, type DesignToken, type DesignTokenDefinition, type DesignTokenValueByMode, type DesignTokenValueRecord, type DesignTokens, type Dimension, type Duration, type FontFamily, type FontWeight, type FontWeightName, type Gradient, type GradientStop, type ModeExtension, type ModesExtension, type Number, type PathMatcher, type ProcessedDesignToken, type ReplaceTofK, type RequiredKeys, type ResponsiveExtensionOptions, type Shadow, type StrokeStyle, type StrokeStyleName, type StrokeStyleObject, type TokenAlias, type TokenDefinition, type TokenFilterObj, type TokenGenerator, type TokenGeneratorsExtension, type TokenGroupDefinition, type TokenGroupItemDefinition, type TokenIterator, type TokenType, type TokenValue, type Tokens, type TokensFilter, type TokensFilterParams, TokensWalker, type TokensWalkerExtension, type TokensWalkerExtensionAction, type TokensWalkerExtensionBaseAction, type TokensWalkerFilter, type Transition, type Typography, type WithExtension, applyColorModifier, applyColorModifiers, borderToCssStyle, borderToCssValue, colorGeneratorsExtension, colorModifiersExtension, colorToCssValue, contrastColor, correctJSObjectKey, cubicBezierToCssValue, darkenColor, desaturateColor, fontFamilyToCssValue, fontWeightToCssValue, formatColor, getModeNormalizeValue, getModeRawValue, gradientToCssValue, grayscaleColor, hasColorTokenModifiersExtension, hasGeneratorsExtension, hasModeExtension, hasModesExtension, hasTokenAlias, hasTokenExtensions, hueRotateColor, invertColor, isBorderToken, isColorToken, isCompositeToken, isCubicBezierToken, isDesignToken, isDesignTokenGroup, isDesignTokenLike, isDesignTokenValueRecord, isDimensionToken, isDurationToken, isFontFamilyToken, isFontWeightToken, isGradientToken, isMatchingTokensFilter, isNumberToken, isObject, isOtherToken, isShadowToken, isString, isStrokeStyleToken, isSupportedTypeFilter, isTokenAlias, isTransitionToken, isTypographyToken, lightenColor, normalizeBorderValue, normalizeColorValue, normalizeCubicBezierValue, normalizeDimensionValue, normalizeDurationValue, normalizeFontFamilyValue, normalizeFontWeightValue, normalizeGradientValue, normalizeShadowValue, normalizeStrokeStyleValue, normalizeTokenAlias, normalizeTransitionValue, normalizeTypographyValue, opacifyColor, parseColor, parseModifierValue, processCSSKey, processCssVarRef, processJSKey, processJSValue, processPrimitiveValue, responsiveExtension, saturateColor, sepiaColor, serializeObject, serializeObjectToCSS, shadowToCssValue, strokeStyleToCssValue, tokenAliasToCssVarName, tokenToCss, tokenValueToCss, tokenValueToCssValue, transitionToCssStyle, transitionToCssValue, typographyToCssStyle, typographyToCssValue };
+export { type Border, type Color, type ColorModifier, type ColorModifiersExtensionOptions, type ColorTokenModifier, type ColorTokenModifiersExtension, type CubicBezier, DEFAULT_MODE, DIMENSION_REGEX, type DerefToken, type DesignToken, type DesignTokenDefinition, type DesignTokenValueByMode, type DesignTokenValueRecord, type DesignTokens, type Dimension, type Duration, type FontFamily, type FontWeight, type FontWeightName, type Gradient, type GradientStop, type ModeExtension, type ModesExtension, type Number, type PathMatcher, type ProcessedDesignToken, type ReplaceTofK, type RequiredKeys, type ResponsiveExtensionOptions, type Shadow, type StrokeStyle, type StrokeStyleName, type StrokeStyleObject, type TokenAlias, type TokenDefinition, type TokenFilterObj, type TokenGenerator, type TokenGeneratorsExtension, type TokenGroupDefinition, type TokenGroupItemDefinition, type TokenIterator, type TokenOverrideFn, type TokenOverrides, type TokenType, type TokenValue, type Tokens, type TokensFilter, type TokensFilterParams, TokensWalker, type TokensWalkerAction, type TokensWalkerBaseAction, type TokensWalkerFilter, type TokensWalkerOptions, type TokensWalkerSchemaExtension, type Transition, type Typography, type WithExtension, applyColorModifier, applyColorModifiers, borderToCssStyle, borderToCssValue, colorGeneratorsExtension, colorModifiersExtension, colorToCssValue, contrastColor, correctJSObjectKey, cubicBezierToCssValue, darkenColor, desaturateColor, destructDimensionValue, fontFamilyToCssValue, fontWeightToCssValue, formatColor, getModeNormalizeValue, getModeRawValue, gradientToCssValue, grayscaleColor, hasColorTokenModifiersExtension, hasGeneratorsExtension, hasModeExtension, hasModesExtension, hasTokenAlias, hasTokenExtensions, hueRotateColor, invertColor, isBorderToken, isColorToken, isCompositeToken, isCubicBezierToken, isDesignToken, isDesignTokenGroup, isDesignTokenLike, isDesignTokenValueRecord, isDimensionToken, isDurationToken, isFontFamilyToken, isFontWeightToken, isGradientToken, isMatchingTokensFilter, isNumberToken, isObject, isOtherToken, isShadowToken, isString, isStrokeStyleToken, isSupportedTypeFilter, isTokenAlias, isTransitionToken, isTypographyToken, lightenColor, normalizeBorderValue, normalizeColorValue, normalizeCubicBezierValue, normalizeDimensionValue, normalizeDurationValue, normalizeFontFamilyValue, normalizeFontWeightValue, normalizeGradientValue, normalizeShadowValue, normalizeStrokeStyleValue, normalizeTokenAlias, normalizeTransitionValue, normalizeTypographyValue, opacifyColor, parseColor, parseModifierValue, processCSSKey, processCssVarRef, processJSKey, processJSValue, processPrimitiveValue, responsiveExtension, saturateColor, sepiaColor, serializeObject, serializeObjectToCSS, shadowToCssValue, strokeStyleToCssValue, tokenAliasToCssVarName, tokenToCss, tokenValueToCss, tokenValueToCssValue, transitionToCssStyle, transitionToCssValue, typographyToCssStyle, typographyToCssValue };

package.json

 {
   "name": "@design-sync/w3c-dtfm",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "Design tokens module format (DTFM) utils and types",
@@ -5,0 +5,0 @@ "repository": "salamaashoush/design-sync",

No alert changes

Improved metrics

Total package byte prevSize

166050

7.11%

Lines of code

3058

4.55%

No dependency changes