@cobalt-ui/core - npm Package Compare versions

Comparing version 1.6.1 to 1.7.0

CHANGELOG.md

 # @cobalt-ui/core
 
+## 1.7.0
+
+### Minor Changes
+
+- [#189](https://github.com/drwpow/cobalt-ui/pull/189) [`a2afdc48a9cda210eafc59c4f4f9af1e5bb3dc42`](https://github.com/drwpow/cobalt-ui/commit/a2afdc48a9cda210eafc59c4f4f9af1e5bb3dc42) Thanks [@drwpow](https://github.com/drwpow)! - Add Figma Variable support natively
+
+### Patch Changes
+
+- [#187](https://github.com/drwpow/cobalt-ui/pull/187) [`a395b21d017ae4b2f0a05bba6706b05a63850f69`](https://github.com/drwpow/cobalt-ui/commit/a395b21d017ae4b2f0a05bba6706b05a63850f69) Thanks [@drwpow](https://github.com/drwpow)! - Update Culori to 4.x
+
+- Updated dependencies [[`a2afdc48a9cda210eafc59c4f4f9af1e5bb3dc42`](https://github.com/drwpow/cobalt-ui/commit/a2afdc48a9cda210eafc59c4f4f9af1e5bb3dc42)]:
+  - @cobalt-ui/utils@1.2.3
+
 ## 1.6.1
@@ -4,0 +17,0 @@

dist/parse/index.d.ts

 import type { ParsedToken } from '../token.js';
 import { ParseColorOptions } from './tokens/color.js';
+import { type FigmaParseOptions } from './figma.js';
 export interface ParseResult {
@@ -14,2 +15,3 @@ errors?: string[];
     color: ParseColorOptions;
+    figma?: FigmaParseOptions;
 }
@@ -16,0 +18,0 @@ export declare function parse(rawTokens: unknown, options: ParseOptions): ParseResult;

dist/parse/index.js

@@ -1,2 +0,2 @@
-import { cloneDeep, FG_YELLOW, getAliasID, isAlias, RESET } from '@cobalt-ui/utils';
+import { cloneDeep, FG_YELLOW, getAliasID, invalidTokenIDError, isAlias, RESET } from '@cobalt-ui/utils';
 import { isEmpty, isObj, splitType } from '../util.js';
@@ -18,2 +18,3 @@ import { normalizeColorValue } from './tokens/color.js';
 import { convertTokensStudioFormat, isTokensStudioFormat } from './tokens-studio.js';
+import { convertFigmaVariablesFormat, isFigmaVariablesFormat } from './figma.js';
 const RESERVED_KEYS = new Set(['$description', '$name', '$type', '$value', '$extensions']);
@@ -29,5 +30,12 @@ export function parse(rawTokens, options) {
     }
+    let schema = rawTokens;
+    // 0. handle Figma Variables format
+    if (isFigmaVariablesFormat(rawTokens)) {
+        const figmaTokensResult = convertFigmaVariablesFormat(rawTokens, options?.figma);
+        errors.push(...(figmaTokensResult.errors ?? []));
+        warnings.push(...(figmaTokensResult.warnings ?? []));
+        schema = figmaTokensResult.result;
+    }
     // 0. handle Tokens Studio for Figma format
-    let schema = rawTokens;
-    if (isTokensStudioFormat(rawTokens)) {
+    else if (isTokensStudioFormat(rawTokens)) {
         const tokensStudioResult = convertTokensStudioFormat(rawTokens);
@@ -48,6 +56,11 @@ errors.push(...(tokensStudioResult.errors ?? []));
             }
-            if (k.includes('.') || k.includes('{') || k.includes('}') || k.includes('#')) {
-                errors.push(`${k}: IDs can’t include any of the following: .{}#`);
+            const tokenValidationError = invalidTokenIDError(k);
+            if (tokenValidationError) {
+                errors.push(`${k}: tokenValidationError`);
                 continue;
             }
+            if (k.includes('.')) {
+                errors.push(`${k}: IDs can’t contain periods`);
+                continue;
+            }
             if (!Object.keys(v).length) {
@@ -54,0 +67,0 @@ errors.push(`${k}: groups can’t be empty`);

dist/parse/tokens-studio.js

 /**
  * Handle format for Tokens Studio for Figma
  * This works by first converting the Tokens Studio format
- * into an equivalent DTFM result, then parsing that result
+ * into an equivalent DTCG result, then parsing that result
  */
@@ -10,7 +10,7 @@ import { getAliasID, isAlias } from '@cobalt-ui/utils';
     const warnings = [];
-    const dtfmTokens = {};
+    const dtcgTokens = {};
     function addToken(value, path) {
         const parts = [...path];
         const id = parts.pop();
-        let tokenNode = dtfmTokens;
+        let tokenNode = dtcgTokens;
         for (const p of parts) {
@@ -196,3 +196,3 @@ if (!(p in tokenNode))
                         // fortunately, the Tokens Studio spec is inconsistent with their "typography" tokens
-                        // in that they match DTFM (even though `fontFamilies` [sic] tokens exist)
+                        // in that they match DTCG (even though `fontFamilies` [sic] tokens exist)
                         // unfortunately, `textCase` and `textDecoration` are special and have to be flattened
@@ -243,3 +243,3 @@ if (!!v.value && typeof v.value === 'object') {
         warnings: warnings.length ? warnings : undefined,
-        result: dtfmTokens,
+        result: dtcgTokens,
     };
@@ -246,0 +246,0 @@ }

dist/parse/tokens/cubic-bezier.js

@@ -16,5 +16,5 @@ /**
     return [
-        Math.max(0, Math.min(1, value[0])),
+        Math.max(0, Math.min(1, value[0])), // x must be between 0–1
         value[1],
-        Math.max(0, Math.min(1, value[2])),
+        Math.max(0, Math.min(1, value[2])), // x must be between 0–1
         value[3],
@@ -21,0 +21,0 @@ ];

package.json

 {
   "name": "@cobalt-ui/core",
-  "description": "Parser/validator for the Design Tokens Format Module (DTFM) standard.",
-  "version": "1.6.1",
+  "description": "Parser/validator for the Design Tokens Community Group (DTCG) standard.",
+  "version": "1.7.0",
   "author": {
@@ -11,4 +11,5 @@ "name": "Drew Powers",
     "design tokens",
+    "design tokens community group",
     "design tokens format module",
-    "dtfm",
+    "dtcg",
     "cli",
@@ -33,14 +34,13 @@ "w3c design tokens",
   "dependencies": {
-    "@cobalt-ui/utils": "^1.2.2",
-    "@types/culori": "^2.0.0",
-    "culori": "^3.2.0"
+    "@cobalt-ui/utils": "^1.2.3",
+    "@types/culori": "^2.0.4",
+    "culori": "^4.0.1"
   },
   "devDependencies": {
-    "@types/node": "^20.8.10",
-    "esbuild": "^0.19.2",
-    "npm-run-all": "^4.1.5",
-    "vitest": "^0.34.6"
+    "@types/node": "^20.11.16",
+    "esbuild": "^0.19.12",
+    "vitest": "^1.2.2"
   },
   "scripts": {
-    "build": "run-s -s build:*",
+    "build": "pnpm run build:clean && pnpm run build:ts && pnpm run build:bundle && pnpm run build:license",
     "build:clean": "del dist",
@@ -50,5 +50,5 @@ "build:ts": "tsc",
     "build:license": "node ../../scripts/inject-license.js @cobalt-ui/core dist/index.js,dist/index.min.js",
-    "dev": "run-p -s dev:*",
+    "dev": "pnpm run --parallel \"/^dev:.*/\"",
     "dev:ts": "tsc --watch",
-    "test": "run-p -s test:*",
+    "test": "pnpm run \"/^test:.*/\"",
     "test:js": "vitest run",
@@ -55,0 +55,0 @@ "test:ts": "tsc --noEmit"

README.md

 # @cobalt-ui/core
 
-Parser/validator for the [Design Tokens Format Module](https://designtokens.org) (DTFM) standard.
+Parser/validator for the [Design Tokens Community Group](https://designtokens.org) (DTCG) standard.
 
@@ -5,0 +5,0 @@ For the CLI, use `@cobalt-ui/cli`.

src/parse/index.ts

@@ -1,2 +0,2 @@
-import {cloneDeep, FG_YELLOW, getAliasID, isAlias, RESET} from '@cobalt-ui/utils';
+import {cloneDeep, FG_YELLOW, getAliasID, invalidTokenIDError, isAlias, RESET} from '@cobalt-ui/utils';
 import type {Group, ParsedToken, TokenType, TokenOrGroup} from '../token.js';
@@ -19,2 +19,3 @@ import {isEmpty, isObj, splitType} from '../util.js';
 import {convertTokensStudioFormat, isTokensStudioFormat} from './tokens-studio.js';
+import {convertFigmaVariablesFormat, isFigmaVariablesFormat, type FigmaParseOptions, FigmaVariableManifest} from './figma.js';
 
@@ -33,2 +34,3 @@ export interface ParseResult {
   color: ParseColorOptions;
+  figma?: FigmaParseOptions;
 }
@@ -55,6 +57,14 @@
 
-  // 0. handle Tokens Studio for Figma format
   let schema = rawTokens as Group;
 
-  if (isTokensStudioFormat(rawTokens)) {
+  // 0. handle Figma Variables format
+  if (isFigmaVariablesFormat(rawTokens)) {
+    const figmaTokensResult = convertFigmaVariablesFormat(rawTokens as FigmaVariableManifest, options?.figma);
+    errors.push(...(figmaTokensResult.errors ?? []));
+    warnings.push(...(figmaTokensResult.warnings ?? []));
+    schema = figmaTokensResult.result;
+  }
+
+  // 0. handle Tokens Studio for Figma format
+  else if (isTokensStudioFormat(rawTokens)) {
     const tokensStudioResult = convertTokensStudioFormat(rawTokens as Group);
@@ -75,6 +85,11 @@ errors.push(...(tokensStudioResult.errors ?? []));
       }
-      if (k.includes('.') || k.includes('{') || k.includes('}') || k.includes('#')) {
-        errors.push(`${k}: IDs can’t include any of the following: .{}#`);
+      const tokenValidationError = invalidTokenIDError(k);
+      if (tokenValidationError) {
+        errors.push(`${k}: tokenValidationError`);
         continue;
       }
+      if (k.includes('.')) {
+        errors.push(`${k}: IDs can’t contain periods`);
+        continue;
+      }
       if (!Object.keys(v).length) {
@@ -81,0 +96,0 @@ errors.push(`${k}: groups can’t be empty`);

src/parse/tokens-studio.ts

 /**
  * Handle format for Tokens Studio for Figma
  * This works by first converting the Tokens Studio format
- * into an equivalent DTFM result, then parsing that result
+ * into an equivalent DTCG result, then parsing that result
  */
@@ -12,3 +12,3 @@ import {getAliasID, isAlias} from '@cobalt-ui/utils';
   const warnings: string[] = [];
-  const dtfmTokens: Group = {};
+  const dtcgTokens: Group = {};
 
@@ -18,3 +18,3 @@ function addToken(value: Token, path: string[]): void {
     const id = parts.pop()!;
-    let tokenNode = dtfmTokens;
+    let tokenNode = dtcgTokens;
     for (const p of parts) {
@@ -193,3 +193,3 @@ if (!(p in tokenNode)) tokenNode[p] = {};
             // fortunately, the Tokens Studio spec is inconsistent with their "typography" tokens
-            // in that they match DTFM (even though `fontFamilies` [sic] tokens exist)
+            // in that they match DTCG (even though `fontFamilies` [sic] tokens exist)
 
@@ -240,3 +240,3 @@ // unfortunately, `textCase` and `textDecoration` are special and have to be flattened
     warnings: warnings.length ? warnings : undefined,
-    result: dtfmTokens,
+    result: dtcgTokens,
   };
@@ -243,0 +243,0 @@ }

tokens-schema.json

 {
   "$schema": "http://json-schema.org/draft-04/schema#",
   "$id": "https://cobalt-ui.pages/dev/tokens-schema.json",
-  "title": "Design Tokens Format Module",
+  "title": "Design Tokens Community Group format",
   "additionalProperties": {
@@ -6,0 +6,0 @@ "$ref": "#/$defs/group"

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

634747

increased by16.06%

Dev dependency count

3

decreased by-25%

Number of package files

88

increased by4.76%

Lines of code

4326

increased by17.84%

Dependency changes

• + Addedculori@4.0.1(transitive)

• - Removedculori@3.3.0(transitive)

• Updated@cobalt-ui/utils@^1.2.3

• Updated@types/culori@^2.0.4

• Updatedculori@^4.0.1