@digdir/designsystemet 1.0.2 → 1.0.4

package/dist/src/tokens/build/types.d.ts

@@ -1,48 +0,0 @@
-import type { Config as StyleDictionaryConfig, TransformedToken } from 'style-dictionary/types';
-import type { GetStyleDictionaryConfig } from './configs.js';
-export declare const colorCategories: {
-    readonly main: "main";
-    readonly support: "support";
-};
-export type ColorCategories = keyof typeof colorCategories;
-export type BuiltInColors = 'neutral' | 'success' | 'warning' | 'danger' | 'info';
-/**
- * A multi-dimensional theme is a concrete permutation of the possible theme dimensions
- */
-export type ThemePermutation = {
-    'color-scheme': string;
-    'main-color': string;
-    'support-color'?: string;
-    semantic: string;
-    size: string;
-    theme: string;
-    typography: string;
-};
-export type ThemeDimension = keyof ThemePermutation;
-export type IsCalculatedToken = (token: TransformedToken, options?: StyleDictionaryConfig) => boolean;
-export type GetSdConfigOptions = {
-    outPath: string;
-    tokensDir: string;
-    dry?: boolean;
-};
-export type BuildConfig = {
-    /** Optional name of the build config - only used in the console output */
-    name?: string;
-    /** Style Dictionary configuration creator */
-    getConfig: GetStyleDictionaryConfig;
-    /** Which theme dimensions to include. `theme` (e.g. digdir/altinn) is always included. */
-    dimensions: ThemeDimension[];
-    /** Custom options used when creating Style Dictionary configs. If not supplied, the default is used */
-    options?: Partial<GetSdConfigOptions>;
-    /** Custom build function. If not supplied, the default is used. */
-    build?: (sdConfigs: SDConfigForThemePermutation[], options: GetSdConfigOptions) => Promise<void>;
-    /** Whether the build config is enabled. @default () => true */
-    enabled?: () => boolean;
-    /** Custom log message. */
-    log?: (config: SDConfigForThemePermutation) => string;
-};
-export type SDConfigForThemePermutation = {
-    permutation: ThemePermutation;
-    config: StyleDictionaryConfig;
-};
-//# sourceMappingURL=types.d.ts.map

package/dist/src/tokens/build/types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,cAAc,CAAC;AAE7D,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAElF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC;AAEtG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,wBAAwB,CAAC;IACpC,0FAA0F;IAC1F,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,uGAAuG;IACvG,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,EAAE,OAAO,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjG,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;IACxB,0BAA0B;IAC1B,GAAG,CAAC,EAAE,CAAC,MAAM,EAAE,2BAA2B,KAAK,MAAM,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,qBAAqB,CAAA;CAAE,CAAC"}

package/dist/src/tokens/build/types.js

@@ -1,7 +0,0 @@
-const colorCategories = {
-  main: "main",
-  support: "support"
-};
-export {
-  colorCategories
-};

package/dist/src/tokens/build/utils/entryfile.d.ts

@@ -1,12 +0,0 @@
-type EntryFile = (options: {
-    outPath: string;
-    buildPath: string;
-    theme: string;
-    dry?: boolean;
-}) => Promise<undefined>;
-/**
- * Creates a CSS entry file that imports base CSS files for a theme
- */
-export declare const makeEntryFile: EntryFile;
-export {};
-//# sourceMappingURL=entryfile.d.ts.map

package/dist/src/tokens/build/utils/entryfile.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"entryfile.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/utils/entryfile.ts"],"names":[],"mappings":"AAmEA,KAAK,SAAS,GAAG,CAAC,OAAO,EAAE;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,KAAK,OAAO,CAAC,SAAS,CAAC,CAAC;AAEzB;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,SAS3B,CAAC"}

package/dist/src/tokens/build/utils/entryfile.js

@@ -1,67 +0,0 @@
-import chalk from "chalk";
-import glob from "fast-glob";
-import fs from "fs-extra";
-import * as R from "ramda";
-import { writeFile } from "../../utils.js";
-const sortOrder = [
-  "color-scheme/light",
-  "typography/secondary",
-  "semantic",
-  "color-scheme/dark",
-  "color-scheme/contrast",
-  "typography/primary",
-  "color/",
-  "builtin-colors"
-];
-const sortByDefinedOrder = R.sortBy((fileName) => {
-  const sortIndex = sortOrder.findIndex((sortElement) => {
-    if (sortElement.endsWith("/")) {
-      return fileName.includes(sortElement);
-    }
-    return fileName.includes(`${sortElement}.css`);
-  });
-  if (sortIndex === -1) {
-    console.error(
-      chalk.yellow("WARNING: CSS section does not have a defined sort order:", fileName.replace(".css", ""))
-    );
-    console.log(
-      chalk.dim(
-        `
-A Digdir developer should define its order in the sortOrder array in entryfile.ts.
-The section will currently be added to the end of the entry file, but the exact
-order may change due to nondeterminism.`.trim()
-      )
-    );
-    console.log();
-    return Infinity;
-  }
-  return sortIndex;
-});
-const header = `@charset "UTF-8";
-
-@layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
-
-`;
-const concat = R.pipe(
-  R.map((file) => {
-    try {
-      const content = fs.readFileSync(file, "utf-8").toString();
-      return content;
-    } catch (e) {
-      console.error(`Error reading file: ${file}`);
-      return "";
-    }
-  }),
-  R.join("\n")
-);
-const makeEntryFile = async ({ outPath, buildPath, theme, dry }) => {
-  const writePath = `${outPath}/${theme}.css`;
-  const files = await glob(`**/*`, { cwd: buildPath });
-  const sortAlphabetically = R.sort(R.ascend((x) => x));
-  const sortedFileNames = R.pipe(sortAlphabetically, sortByDefinedOrder)(files);
-  const content = header + concat(sortedFileNames.map((file) => `${buildPath}/${file}`));
-  await writeFile(writePath, content, dry);
-};
-export {
-  makeEntryFile
-};

package/dist/src/tokens/build/utils/getMultidimensionalThemes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"getMultidimensionalThemes.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/utils/getMultidimensionalThemes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAMxD,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAEpE;;;;;;;;;;GAUG;AACH,eAAO,MAAM,yBAAyB,GAAI,QAAQ,oBAAoB,EAAE,EAAE,YAAY,cAAc,EAAE,sBAerG,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,WAAW,EAAE,gBAAgB,CAAC;CAC/B,CAAC;AAEF,QAAA,MAAM,SAAS,EAAE,OAAO,MAAsD,CAAC;AAC/E;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,CAAC,SAAS,CAAC,EAAE,IAAI,CAAA;CAAE,CAAC;AAMvE;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,WAAW,GAAG,oBAAoB,GAAG,oBAAoB,CAUlG;AAED,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,gBAAgB,EAAE,oBAAoB,EAAE,CAAC,CAAC"}

package/dist/src/tokens/build/utils/getMultidimensionalThemes.js

@@ -1,112 +0,0 @@
-import { TokenSetStatus } from "@tokens-studio/types";
-import chalk from "chalk";
-import { kebabCase } from "change-case";
-import * as R from "ramda";
-import { buildOptions } from "../../build.js";
-const getMultidimensionalThemes = (themes, dimensions) => {
-  const verboseLogging = buildOptions?.verbose;
-  const grouped$themes = groupThemes(themes);
-  const permutations = permutateThemes(grouped$themes);
-  const ALL_DEPENDENT_ON = ["theme"];
-  const keys = R.keys(grouped$themes);
-  const nonDependentKeys = keys.filter((x) => ![...ALL_DEPENDENT_ON, ...dimensions].includes(x));
-  if (verboseLogging) {
-    console.log(chalk.cyan(`\u{1F50E} Finding theme permutations for ${dimensions}`));
-    console.log(chalk.cyan(`   (ignoring permutations for ${nonDependentKeys})`));
-  }
-  return permutations.filter((val) => {
-    const filters = nonDependentKeys.map((x) => val.permutation[x] === grouped$themes[x][0].name);
-    return filters.every((x) => x);
-  });
-};
-const processed = Symbol("Type brand for ProcessedThemeObject");
-function isProcessed(theme) {
-  return Boolean(theme[processed]);
-}
-function processThemeObject(theme) {
-  if (isProcessed(theme)) {
-    return theme;
-  }
-  const result = { ...theme, [processed]: true };
-  if (result.group) {
-    result.group = kebabCase(result.group);
-  }
-  result.name = kebabCase(result.name);
-  return result;
-}
-function groupThemes(themes) {
-  const groups = {};
-  for (const rawTheme of themes) {
-    const theme = processThemeObject(rawTheme);
-    if (theme.group) {
-      const groupKey = theme.group;
-      groups[groupKey] = [...groups[groupKey] ?? [], theme];
-    } else {
-      throw new Error(
-        `Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`
-      );
-    }
-  }
-  return groups;
-}
-const hasUnknownProps = R.pipe(R.values, R.none(R.equals("unknown")), R.not);
-function permutateThemes(groups) {
-  const separator = "_";
-  const permutations = cartesian(Object.values(groups));
-  const permutatedThemes = permutations.map((perm) => {
-    const permutatedTheme = perm.reduce(
-      (acc, theme) => {
-        const { group, name, selectedTokenSets } = theme;
-        let updatedPermutation = acc.permutation;
-        if (group) {
-          const groupProp = R.lensProp(group);
-          updatedPermutation = R.set(groupProp, name, updatedPermutation);
-        }
-        const updatedName = `${String(acc.name)}${acc ? separator : ""}${name}`;
-        const sets = [...acc.selectedTokenSets, ...filterTokenSets(selectedTokenSets)];
-        return {
-          permutation: updatedPermutation,
-          name: updatedName,
-          selectedTokenSets: sets
-        };
-      },
-      {
-        name: "",
-        selectedTokenSets: [],
-        permutation: {
-          "color-scheme": "unknown",
-          "main-color": "unknown",
-          "support-color": "unknown",
-          theme: "unknown",
-          semantic: "unknown",
-          size: "unknown",
-          typography: "unknown"
-        }
-      }
-    );
-    if (hasUnknownProps(permutatedTheme)) {
-      throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
-    }
-    const uniqueTokenSets = new Set(permutatedTheme.selectedTokenSets);
-    return { ...permutatedTheme, selectedTokenSets: Array.from(uniqueTokenSets) };
-  });
-  return permutatedThemes;
-}
-function filterTokenSets(tokensets) {
-  return Object.entries(tokensets).filter(([, val]) => val !== TokenSetStatus.DISABLED).sort((a, b) => {
-    if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) {
-      return -1;
-    }
-    if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {
-      return 1;
-    }
-    return 0;
-  }).map((entry) => entry[0]);
-}
-function cartesian(a) {
-  return a.reduce((a2, b) => a2.flatMap((d) => b.map((e) => [d, e].flat())));
-}
-export {
-  getMultidimensionalThemes,
-  processThemeObject
-};

package/dist/src/tokens/design-tokens/template/$metadata.json

@@ -1,25 +0,0 @@
-{
-  "tokenSetOrder": [
-    "primitives/globals",
-    "primitives/modes/size/small",
-    "primitives/modes/size/medium",
-    "primitives/modes/size/large",
-    "primitives/modes/size/global",
-    "primitives/modes/typography/size/small",
-    "primitives/modes/typography/size/medium",
-    "primitives/modes/typography/size/large",
-    "primitives/modes/typography/primary/<theme>",
-    "primitives/modes/typography/secondary/<theme>",
-    "primitives/modes/color-scheme/dark/global",
-    "primitives/modes/color-scheme/dark/<theme>",
-    "primitives/modes/color-scheme/light/global",
-    "primitives/modes/color-scheme/light/<theme>",
-    "themes/<theme>",
-    "semantic/color",
-    "semantic/modes/main-color/accent",
-    "semantic/modes/support-color/brand1",
-    "semantic/modes/support-color/brand2",
-    "semantic/modes/support-color/brand3",
-    "semantic/style"
-  ]
-}