@synapsly/tokens 0.1.0 → 0.2.0

package/dist/index.js

@@ -682,7 +682,60 @@ function getThemeSelector(name) {
   return `[${themeAttribute}="${name}"]`;
 }
 
-// src/semanticTokens.ts
+// src/createThemeTokens.ts
+function createThemeTokens(base, overrides = {}) {
+  return mergeTokens(base, overrides);
+}
+function mergeTokens(base, overrides) {
+  if (!isRecord(base) || !isRecord(overrides)) {
+    return overrides ?? base;
+  }
+  const merged = { ...base };
+  for (const key of Reflect.ownKeys(overrides)) {
+    merged[key] = mergeTokens(base[key], overrides[key]);
+  }
+  return merged;
+}
+function isRecord(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+// src/resolveTokenReferences.ts
+function resolveTokenReferences(value, source) {
+  if (typeof value === "string") {
+    const match = value.match(/^\{(.+)\}$/);
+    if (!match) {
+      return value;
+    }
+    const referencePath = match[1];
+    if (!referencePath) {
+      return value;
+    }
+    return getPath(source, referencePath);
+  }
+  if (Array.isArray(value)) {
+    return value.map((item) => resolveTokenReferences(item, source));
+  }
+  if (typeof value === "object" && value !== null) {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, childValue]) => [
+        key,
+        resolveTokenReferences(childValue, source)
+      ])
+    );
+  }
+  return value;
+}
+function getPath(source, path) {
+  return path.split(".").reduce((current, segment) => {
+    if (typeof current !== "object" || current === null || !(segment in current)) {
+      throw new Error(`Unable to resolve token reference: {${path}}`);
+    }
+    return current[segment];
+  }, source);
+}
+
+// src/semanticTokenReferences.ts
 var defaultLightSemanticTokenReferences = {
   color: {
     bg: {
@@ -1214,6 +1267,8 @@ var defaultDarkSemanticTokenReferences = {
     }
   }
 };
+
+// src/semanticTokens.ts
 var defaultLightSemanticTokens = resolveTokenReferences(
   defaultLightSemanticTokenReferences,
   { primitive: primitiveVars }
@@ -1261,39 +1316,6 @@ var defaultTokenReferences = {
   primitive: primitiveTokens,
   semantic: defaultSemanticTokenReferences
 };
-function resolveTokenReferences(value, source) {
-  if (typeof value === "string") {
-    const match = value.match(/^\{(.+)\}$/);
-    if (!match) {
-      return value;
-    }
-    const referencePath = match[1];
-    if (!referencePath) {
-      return value;
-    }
-    return getPath(source, referencePath);
-  }
-  if (Array.isArray(value)) {
-    return value.map((item) => resolveTokenReferences(item, source));
-  }
-  if (typeof value === "object" && value !== null) {
-    return Object.fromEntries(
-      Object.entries(value).map(([key, childValue]) => [
-        key,
-        resolveTokenReferences(childValue, source)
-      ])
-    );
-  }
-  return value;
-}
-function getPath(source, path) {
-  return path.split(".").reduce((current, segment) => {
-    if (typeof current !== "object" || current === null || !(segment in current)) {
-      throw new Error(`Unable to resolve token reference: {${path}}`);
-    }
-    return current[segment];
-  }, source);
-}
 
 // src/createTheme.ts
 function createTheme(options) {
@@ -1312,25 +1334,96 @@ function createTheme(options) {
     selector
   };
 }
-function createThemeTokens(base, overrides = {}) {
-  return mergeTokens(base, overrides);
+var createVanillaThemeForSemantic = createTheme$1;
+var createGlobalThemeForSemantic = createGlobalTheme;
+var themeContractForTheme = themeContract;
+
+// src/cssVars.ts
+var cssVarPrefix = "synapsly";
+var defaultResolvedLightCssTokens = resolveTokenReferences(
+  defaultLightSemanticTokenReferences,
+  {
+    primitive: primitiveTokens
+  }
+);
+var defaultResolvedDarkCssTokens = resolveTokenReferences(
+  defaultDarkSemanticTokenReferences,
+  {
+    primitive: primitiveTokens
+  }
+);
+var defaultResolvedCssTokens = defaultResolvedLightCssTokens;
+var cssVars = createCssVarReferences(defaultResolvedLightCssTokens);
+function createCssThemeTokens(base, overrides = {}) {
+  return createThemeTokens(base, overrides);
 }
-function mergeTokens(base, overrides) {
-  if (!isRecord(base) || !isRecord(overrides)) {
-    return overrides ?? base;
+function createCssTheme(options) {
+  const tokens = createCssThemeTokens(
+    options.tokens ?? defaultResolvedLightCssTokens,
+    options.overrides ?? {}
+  );
+  const selector = options.selector ?? getThemeSelector(options.name);
+  return {
+    attributes: {
+      [themeAttribute]: options.name
+    },
+    cssText: createCssThemeRule(selector, tokens),
+    name: options.name,
+    selector
+  };
+}
+function createCssThemeRule(selector, tokens) {
+  const declarations = flattenTokenEntries(tokens).map(([path, value]) => `  ${getCssVarName(path)}: ${value};`).join("\n");
+  return `${selector} {
+${declarations}
+}`;
+}
+function createDefaultCssThemes() {
+  return [
+    createCssThemeRule(
+      `:root, ${getThemeSelector(themeNames.light)}`,
+      defaultResolvedLightCssTokens
+    ),
+    createCssThemeRule(getThemeSelector(themeNames.dark), defaultResolvedDarkCssTokens)
+  ].join("\n\n");
+}
+function getCssVarName(path) {
+  return `--${[cssVarPrefix, ...path.map(toKebabCase)].join("-")}`;
+}
+function createCssVarReferences(tokens) {
+  return mapTokenLeaves(tokens, (path) => `var(${getCssVarName(path)})`);
+}
+function mapTokenLeaves(value, mapper, path = []) {
+  if (typeof value === "string") {
+    return mapper(path);
   }
-  const merged = { ...base };
-  for (const key of Reflect.ownKeys(overrides)) {
-    merged[key] = mergeTokens(base[key], overrides[key]);
+  if (isRecord2(value)) {
+    return Object.fromEntries(
+      Object.entries(value).map(([key, childValue]) => [
+        key,
+        mapTokenLeaves(childValue, mapper, [...path, key])
+      ])
+    );
   }
-  return merged;
+  return value;
 }
-function isRecord(value) {
+function flattenTokenEntries(value, path = []) {
+  if (typeof value === "string") {
+    return [[path, value]];
+  }
+  if (isRecord2(value)) {
+    return Object.entries(value).flatMap(
+      ([key, childValue]) => flattenTokenEntries(childValue, [...path, key])
+    );
+  }
+  return [];
+}
+function toKebabCase(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-zA-Z0-9-]+/g, "-").replace(/^-+|-+$/g, "").toLowerCase();
+}
+function isRecord2(value) {
   return typeof value === "object" && value !== null && !Array.isArray(value);
 }
-var createVanillaThemeForSemantic = createTheme$1;
-var createGlobalThemeForSemantic = createGlobalTheme;
-var themeContractForTheme = themeContract;
 
 // src/defaultTheme.css.ts
 var defaultDarkTheme = { attributes: { "data-theme": "dark" }, className: "defaultTheme__eb1mul1", name: "dark", selector: '[data-theme="dark"]' };
@@ -1339,6 +1432,6 @@ var defaultLightTheme = { attributes: { "data-theme": "light" }, className: "def
 var defaultLightThemeClass = "defaultTheme__eb1mul0";
 var defaultThemeClass = "defaultTheme__eb1mul0";
 
-export { createTheme, createThemeTokens, defaultDarkSemanticTokenReferences, defaultDarkSemanticTokens, defaultDarkTheme, defaultDarkThemeClass, defaultDarkTokenReferences, defaultDarkTokens, defaultLightSemanticTokenReferences, defaultLightSemanticTokens, defaultLightTheme, defaultLightThemeClass, defaultLightTokenReferences, defaultLightTokens, defaultResolvedDarkSemanticTokens, defaultResolvedLightSemanticTokens, defaultResolvedSemanticTokens, defaultSemanticTokenReferences, defaultSemanticTokens, defaultThemeClass, defaultTokenReferences, defaultTokens, getThemeSelector, primitiveTokens, primitiveVars, semanticContract, semanticVars, themeAttribute, themeNames, vars };
+export { createCssTheme, createCssThemeRule, createCssThemeTokens, createDefaultCssThemes, createTheme, createThemeTokens, cssVarPrefix, cssVars, defaultDarkSemanticTokenReferences, defaultDarkSemanticTokens, defaultDarkTheme, defaultDarkThemeClass, defaultDarkTokenReferences, defaultDarkTokens, defaultLightSemanticTokenReferences, defaultLightSemanticTokens, defaultLightTheme, defaultLightThemeClass, defaultLightTokenReferences, defaultLightTokens, defaultResolvedCssTokens, defaultResolvedDarkCssTokens, defaultResolvedDarkSemanticTokens, defaultResolvedLightCssTokens, defaultResolvedLightSemanticTokens, defaultResolvedSemanticTokens, defaultSemanticTokenReferences, defaultSemanticTokens, defaultThemeClass, defaultTokenReferences, defaultTokens, getCssVarName, getThemeSelector, primitiveTokens, primitiveVars, semanticContract, semanticVars, themeAttribute, themeNames, vars };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map