@digdir/designsystemet 1.0.0-next.35 → 1.0.0-next.37

package/README.md

@@ -0,0 +1,16 @@
+# @digdir/designsystemet
+
+CLI and tooling for Designsystemet
+
+Use `--help` for available commands and options
+
+Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.
+
+
+## Usage
+
+### Create tokens
+We recommend using the [Designsystemet theme-builder](https://theme.designsystemet.no/) for generating options and commandline snippet. 
+
+### Build tokens
+Use `npx @digdir/designsystemet tokens build` to build CSS from design-tokens generated in the step above.

package/dist/{types/bin → bin}/designsystemet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"designsystemet.d.ts","sourceRoot":"","sources":["../../../bin/designsystemet.ts"],"names":[],"mappings":""}
+{"version":3,"file":"designsystemet.d.ts","sourceRoot":"","sources":["../../bin/designsystemet.ts"],"names":[],"mappings":""}

package/dist/bin/designsystemet.js

@@ -2,35 +2,32 @@
 import { Argument, createCommand, program } from "@commander-js/extra-typings";
 import chalk from "chalk";
 import { convertToHex } from "../src/colors/index.js";
-import { createTokensPackage } from "../src/init/createTokensPackage.js";
 import migrations from "../src/migrations/index.js";
 import { buildTokens } from "../src/tokens/build.js";
-import { createTokens } from "../src/tokens/create.js";
+import { colorCliOptions, createTokens } from "../src/tokens/create.js";
 import { writeTokens } from "../src/tokens/write.js";
-program.name("Designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
+program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
 function makeTokenCommands() {
   const tokenCmd = createCommand("tokens");
   const DEFAULT_TOKENSDIR = "./design-tokens";
-  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action((opts) => {
+  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./build").option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action((opts) => {
     const tokens = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENSDIR;
     const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
     const preview = opts.preview;
     const verbose = opts.verbose;
-    console.log(`Bulding tokens in ${chalk.green(tokens)}`);
+    console.log(`Building tokens in ${chalk.green(tokens)}`);
     return buildTokens({ tokens, out, preview, verbose });
   });
-  tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption("-a, --accent <number>", `Accent hex color`).requiredOption("-n, --neutral <number>", `Neutral hex color`).requiredOption("-b1, --brand1 <number>", `Brand1 hex color`).requiredOption("-b2, --brand2 <number>", `Brand2 hex color`).requiredOption("-b3, --brand3 <number>", `Brand3 hex color`).option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-f, --font-family <string>", `Font family`, "Inter").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
+  tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption(`-m, --${colorCliOptions.main} <name:hex...>`, `Main colors`, parseColorValues).requiredOption(`-s, --${colorCliOptions.support} <name:hex...>`, `Support colors`, parseColorValues).requiredOption(`-n, --${colorCliOptions.neutral} <hex>`, `Neutral hex color`, convertToHex).option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-f, --font-family <string>", `Font family`, "Inter").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
     const { theme, fontFamily } = opts;
     console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts, null, 2))}`);
     const write = typeof opts.write === "boolean" ? DEFAULT_TOKENSDIR : opts.write;
     const props = {
       themeName: theme,
       colors: {
-        accent: convertToHex(opts.accent),
-        neutral: convertToHex(opts.neutral),
-        brand1: convertToHex(opts.brand1),
-        brand2: convertToHex(opts.brand2),
-        brand3: convertToHex(opts.brand3)
+        main: opts.mainColors,
+        support: opts.supportColors,
+        neutral: opts.neutralColor
       },
       typography: {
         fontFamily
@@ -38,7 +35,7 @@ function makeTokenCommands() {
     };
     const tokens = createTokens(props);
     if (write) {
-      await writeTokens({ writeDir: write, tokens, themeName: theme });
+      await writeTokens({ writeDir: write, tokens, themeName: theme, colors: props.colors });
     }
     return Promise.resolve();
   });
@@ -63,7 +60,9 @@ program.command("migrate").description("run a Designsystemet migration").addArgu
     console.log("Migrate: please specify a migration name or --list");
   }
 });
-program.command("init").description("create an initial token structure for Designsystemet").addArgument(new Argument("<targetDir>", "Target directory for the generated code")).action(async (targetDir) => {
-  await createTokensPackage(targetDir);
-});
 await program.parseAsync(process.argv);
+function parseColorValues(value, previous = {}) {
+  const [name, hex] = value.split(":");
+  previous[name] = convertToHex(hex);
+  return previous;
+}

package/dist/src/colors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/colors/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC"}

package/dist/{types/src → src}/colors/theme.d.ts

@@ -1,7 +1,7 @@
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
-import type { ColorInfo, ColorMode, ColorNumber, ContrastMode, GlobalColors, ThemeColors, ThemeInfo } from './types.js';
+import type { Colors } from '../tokens/types.js';
+import type { ColorInfo, ColorMode, ColorNumber, ContrastMode, GlobalColors, ThemeInfo } from './types.js';
 export declare const baseColors: Record<GlobalColors, CssColor>;
-type Colors = Record<ThemeColors, CssColor>;
 export type ColorError = 'none' | 'decorative' | 'interaction';
 type GlobalGenType = {
     themeMode?: ColorMode | 'all';
@@ -16,9 +16,9 @@ type ThemeGenType = {
  * Generates a color scale based on a base color and a mode.
  *
  * @param color The base color that is used to generate the color scale
- * @param mode The mode of the theme
+ * @param colorScheme The color scheme to generate a scale for
  */
-export declare const generateScaleForColor: (color: CssColor, mode: ColorMode, contrastMode?: "aa" | "aaa") => ColorInfo[];
+export declare const generateScaleForColor: (color: CssColor, colorScheme: ColorMode, contrastMode?: "aa" | "aaa") => ColorInfo[];
 /**
  *
  * Generates a color theme based on a base color. Light, Dark and Contrast scales are includes.
@@ -27,6 +27,11 @@ export declare const generateScaleForColor: (color: CssColor, mode: ColorMode, c
  */
 export declare const generateThemeForColor: (color: CssColor, contrastMode?: "aa" | "aaa") => ThemeInfo;
 export declare const generateGlobalColors: ({ contrastMode }: GlobalGenType) => Record<GlobalColors, ThemeInfo>;
+type GeneratedColorTheme = {
+    main: Record<string, ThemeInfo>;
+    support: Record<string, ThemeInfo>;
+    neutral: ThemeInfo;
+};
 /**
  * This function generates a complete theme for a set of colors.
  *
@@ -34,7 +39,7 @@ export declare const generateGlobalColors: ({ contrastMode }: GlobalGenType) =>
  * @param contrastMode The contrast mode to use
  * @returns
  */
-export declare const generateColorTheme: ({ colors, contrastMode }: ThemeGenType) => Record<ThemeColors, ThemeInfo>;
+export declare const generateColorTheme: ({ colors, contrastMode }: ThemeGenType) => GeneratedColorTheme;
 /**
  *
  * This function calculates a color that can be used as a strong contrast color to a base color.

package/dist/src/colors/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG3G,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,KAAK,aAAa,GAAG;IACnB,SAAS,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AA2EF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,UACzB,QAAQ,eACF,SAAS,iBACR,IAAI,GAAG,KAAK,KACzB,SAAS,EAuCX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,UAAW,QAAQ,iBAAgB,IAAI,GAAG,KAAK,KAAU,SAU1F,CAAC;AAEF,eAAO,MAAM,oBAAoB,qBAA6B,aAAa,KAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAgB3G,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AACF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,6BAAqC,YAAY,KAAG,mBAUlF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,cAAe,QAAQ,0BAO5D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,UAAW,QAAQ,aAaxD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,qBAAsB,QAAQ,mBAAmB,QAAQ,YAe1F,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,UAAW,QAAQ,aAAa,MAAM,aAkB1E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,SAAU,MAAM,KAAG,WAmBrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,WAAY,WAAW,KAAG,MAmB5D,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,QAAQ,KAQvB,QACpB,CAAC;AAEF,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}

package/dist/src/colors/theme.js

@@ -1,5 +1,6 @@
 import { BackgroundColor, Color, Theme } from "@adobe/leonardo-contrast-colors";
 import { Hsluv } from "hsluv";
+import * as R from "ramda";
 import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from "./utils.js";
 const baseColors = {
   blue: "#0A71C0",
@@ -7,40 +8,42 @@ const baseColors = {
   orange: "#B8581D",
   purple: "#663299",
   red: "#C01B1B",
-  yellow: "#EABF28"
+  yellow: "#D4B12F"
 };
-const generateThemeColor = (color, mode, contrastMode = "aa") => {
+const generateThemeColor = (color, colorScheme, contrastMode = "aa") => {
   const leoBackgroundColor = new BackgroundColor({
     name: "backgroundColor",
     colorKeys: ["#ffffff"],
     ratios: [1]
   });
   let colorLightness = getLightnessFromHex(color);
-  if (mode === "dark" || mode === "contrast") {
+  if (colorScheme === "dark" || colorScheme === "contrast") {
     color = getBaseColor(color);
     colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
   }
-  const multiplier = colorLightness <= 30 ? -8 : 8;
+  let modifier = 8;
+  if (colorLightness <= 30) {
+    modifier = -modifier;
+  }
+  if (colorLightness >= 49 && colorLightness <= 65) {
+    modifier = -modifier;
+  }
   const baseDefaultContrast = getContrastFromLightness(colorLightness, color, leoBackgroundColor.colorKeys[0]);
-  const baseHoverContrast = getContrastFromLightness(
-    colorLightness - multiplier,
-    color,
-    leoBackgroundColor.colorKeys[0]
-  );
+  const baseHoverContrast = getContrastFromLightness(colorLightness - modifier, color, leoBackgroundColor.colorKeys[0]);
   const baseActiveContrast = getContrastFromLightness(
-    colorLightness - multiplier * 2,
+    colorLightness - modifier * 2,
     color,
     leoBackgroundColor.colorKeys[0]
   );
-  const textSubLightLightness = contrastMode === "aa" ? 42 : 30;
+  const textSubLightLightness = contrastMode === "aa" ? 41 : 30;
   const textDefLightLightness = contrastMode === "aa" ? 18 : 12;
-  const textSubDarkLightness = contrastMode === "aa" ? 67 : 80;
+  const textSubDarkLightness = contrastMode === "aa" ? 66 : 80;
   const textDefDarkLightness = contrastMode === "aa" ? 90 : 94;
   let lightnessScale = [];
-  if (mode === "light") {
-    lightnessScale = [100, 96, 90, 84, 78, 76, 54, 33, textSubLightLightness, textDefLightLightness];
-  } else if (mode === "dark") {
-    lightnessScale = [10, 14, 20, 26, 32, 35, 47, 77, textSubDarkLightness, textDefDarkLightness];
+  if (colorScheme === "light") {
+    lightnessScale = [100, 96, 90, 84, 78, 76, 53, 41, textSubLightLightness, textDefLightLightness];
+  } else if (colorScheme === "dark") {
+    lightnessScale = [10, 14, 20, 26, 32, 35, 52, 66, textSubDarkLightness, textDefDarkLightness];
   } else {
     lightnessScale = [1, 6, 14, 20, 26, 58, 70, 82, 80, 95];
   }
@@ -59,8 +62,8 @@ const generateThemeColor = (color, mode, contrastMode = "aa") => {
     ]
   });
 };
-const generateScaleForColor = (color, mode, contrastMode = "aa") => {
-  const themeColor = generateThemeColor(color, mode, contrastMode);
+const generateScaleForColor = (color, colorScheme, contrastMode = "aa") => {
+  const themeColor = generateThemeColor(color, colorScheme, contrastMode);
   const leoBackgroundColor = new BackgroundColor({
     name: "backgroundColor",
     colorKeys: ["#ffffff"],
@@ -89,7 +92,7 @@ const generateScaleForColor = (color, mode, contrastMode = "aa") => {
     number: 15,
     name: getColorNameFromNumber(15)
   });
-  if (mode === "light") {
+  if (colorScheme === "light") {
     outputArray[8].hex = color;
   }
   return outputArray;
@@ -121,17 +124,13 @@ const generateGlobalColors = ({ contrastMode = "aa" }) => {
   };
 };
 const generateColorTheme = ({ colors, contrastMode = "aa" }) => {
-  const accentTheme = generateThemeForColor(colors.accent, contrastMode);
-  const neutralTheme = generateThemeForColor(colors.neutral, contrastMode);
-  const brand1Theme = generateThemeForColor(colors.brand1, contrastMode);
-  const brand2Theme = generateThemeForColor(colors.brand2, contrastMode);
-  const brand3Theme = generateThemeForColor(colors.brand3, contrastMode);
+  const main = R.map((color) => generateThemeForColor(color, contrastMode), colors.main);
+  const support = R.map((color) => generateThemeForColor(color, contrastMode), colors.support);
+  const neutral = generateThemeForColor(colors.neutral, contrastMode);
   return {
-    accent: accentTheme,
-    neutral: neutralTheme,
-    brand1: brand1Theme,
-    brand2: brand2Theme,
-    brand3: brand3Theme
+    main,
+    support,
+    neutral
   };
 };
 const calculateContrastOneColor = (baseColor) => {

package/dist/{types/src → src}/colors/types.d.ts

@@ -3,7 +3,6 @@ export type ColorMode = 'light' | 'dark' | 'contrast';
 export type ContrastMode = 'aa' | 'aaa';
 export type ColorNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
 export type GlobalColors = 'red' | 'blue' | 'green' | 'orange' | 'purple' | 'yellow';
-export type ThemeColors = 'accent' | 'neutral' | 'brand1' | 'brand2' | 'brand3';
 export type ColorInfo = {
     hex: CssColor;
     number: ColorNumber;

package/dist/src/colors/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/colors/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAEhE,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC;AACtD,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,KAAK,CAAC;AACxC,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC1F,MAAM,MAAM,YAAY,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,QAAQ,GAAG,QAAQ,CAAC;AACrF,MAAM,MAAM,SAAS,GAAG;IACtB,GAAG,EAAE,QAAQ,CAAC;IACd,MAAM,EAAE,WAAW,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AACF,MAAM,MAAM,SAAS,GAAG;IACtB,KAAK,EAAE,SAAS,EAAE,CAAC;IACnB,IAAI,EAAE,SAAS,EAAE,CAAC;IAClB,QAAQ,EAAE,SAAS,EAAE,CAAC;CACvB,CAAC"}

package/dist/{types/src → src}/colors/utils.d.ts

@@ -41,9 +41,10 @@ export declare const HSLToHex: (h: number, s: number, l: number) => string;
  * Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'
  *
  * @param hex A hex color string
+ * @param type The type of RGB values to return
  * @returns RGB values in an array
  */
-export declare const hexToRgb: (hex: string) => {
+export declare const hexToRgb: (hex: string, type?: "255" | "1") => {
     r: number;
     g: number;
     b: number;
@@ -129,4 +130,9 @@ export declare const isHexColor: (hex: string) => boolean;
  * @returns
  */
 export declare const convertToHex: (color?: string) => CssColor;
+export declare const rgbToHex: (rgb: {
+    r: number;
+    g: number;
+    b: number;
+}) => string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/src/colors/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/colors/utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,QAAS,MAAM,iCA6CtC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,MAAO,MAAM,aAwCjC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,QAAS,MAAM,aAKrC,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,WAAW,QAAS,MAAM,EAAE,WAExC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,WA+CvD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,QAAS,MAAM,SAAQ,KAAK,GAAG,GAAG;;;;QAYtD,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,WAM/D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,QAAS,QAAQ,WAS7C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,SAAU,MAAM,QAAQ,MAAM,WAKzD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,QAAS,QAAQ,WAElD,CAAC;AAEF,eAAO,MAAM,uBAAuB,QAAS,QAAQ,WAEpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,WAK9C,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,WAAY,QAAQ,UAAU,QAAQ,WAOpE,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,cAAe,MAAM,aAAa,QAAQ,mBAAmB,QAAQ,WAYzG,CAAC;AAEF;;GAEG;AAKH;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,WAAY,QAAQ,UAAU,QAAQ,SAAQ,YAAY,GAAG,IAAI,GAAG,KAAK,YAYzG,CAAC;AAEF,eAAO,MAAM,iBAAiB,cAAe,QAAQ,mBAAmB,QAAQ,oBAW/E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,UAAU,QAAS,MAAM,YAErC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,YAAY,WAAY,MAAM,KAAG,QAQ7C,CAAC;AAEF,eAAO,MAAM,QAAQ,QAAS;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,WAUhE,CAAC"}

package/dist/src/colors/utils.js

@@ -129,14 +129,14 @@ const HSLToHex = (h, s, l) => {
   if (b.toString().length === 1) b = parseInt("0" + b.toString(), 10);
   return "#" + r + g + b;
 };
-const hexToRgb = (hex) => {
+const hexToRgb = (hex, type = "255") => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
   hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result ? {
-    r: parseInt(result[1], 16),
-    g: parseInt(result[2], 16),
-    b: parseInt(result[3], 16)
+    r: type === "255" ? parseInt(result[1], 16) : parseInt(result[1], 16) / 255,
+    g: type === "255" ? parseInt(result[2], 16) : parseInt(result[2], 16) / 255,
+    b: type === "255" ? parseInt(result[3], 16) : parseInt(result[3], 16) / 255
   } : null;
 };
 const luminanceFromRgb = (r, g, b) => {
@@ -172,7 +172,7 @@ const getLightnessFromHex = (hex) => {
   const conv = new Hsluv();
   conv.hex = hex;
   conv.hexToHsluv();
-  return Number(conv.hsluv_l.toFixed(0));
+  return Number(conv.hsluv_l.toFixed(1));
 };
 const getContrastFromHex = (color1, color2) => {
   const lum1 = luminanceFromHex(color1);
@@ -230,6 +230,12 @@ const convertToHex = (color) => {
   }
   return chroma(color).hex();
 };
+const rgbToHex = (rgb) => {
+  return "#" + [rgb.r, rgb.g, rgb.b].map((x) => {
+    const hex = Math.round(x * 255).toString(16);
+    return hex.length === 1 ? "0" + hex : hex;
+  }).join("");
+};
 export {
   HSLToHex,
   areColorsContrasting,
@@ -248,5 +254,6 @@ export {
   hslArrToCss,
   isHexColor,
   luminanceFromHex,
-  luminanceFromRgb
+  luminanceFromRgb,
+  rgbToHex
 };

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export * from './colors';
+export * from './tokens';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC"}

package/dist/src/index.js

@@ -0,0 +1,2 @@
+export * from "./colors";
+export * from "./tokens";

package/dist/src/init/createTokensPackage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTokensPackage.d.ts","sourceRoot":"","sources":["../../../src/init/createTokensPackage.ts"],"names":[],"mappings":"AAaA,QAAA,MAAM,KAAK,wCAAyC,CAAC;AACrD,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC;AA0B1C,wBAAsB,mBAAmB,CAAC,SAAS,EAAE,MAAM,iBAyQ1D"}

package/dist/src/init/createTokensPackage.js

@@ -188,15 +188,15 @@ Will now create the following:
   for (const theme of themes.map(normalizeTokenSetName)) {
     for (const mode of modes.map(normalizeTokenSetName)) {
       await fs.cp(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/global.json`),
-        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/global.json`),
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/color-scheme/${mode}/global.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/color-scheme/${mode}/global.json`),
         { recursive: true }
       );
       const template2 = await fs.readFile(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/theme-template.json`)
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/color-scheme/${mode}/theme-template.json`)
       );
       await fs.writeFile(
-        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/${theme}.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/color-scheme/${mode}/${theme}.json`),
         template2.toString("utf-8").replaceAll("<theme>", theme)
       );
       const templatePrimaryTypo = await fs.readFile(

package/dist/src/init/generateMetadataJson.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateMetadataJson.d.ts","sourceRoot":"","sources":["../../../src/init/generateMetadataJson.ts"],"names":[],"mappings":"AAEA,UAAU,QAAQ;IAChB,aAAa,EAAE,MAAM,EAAE,CAAC;CACzB;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,CAmBpH"}

package/dist/src/init/generateMetadataJson.js

@@ -7,9 +7,9 @@ function generateMetadataJson(modes, themes) {
       "primitives/modes/typography/primary/theme",
       "primitives/modes/typography/secondary/theme",
       ...modes.flatMap((mode) => [
-        `primitives/modes/colors/${normalizeTokenSetName(mode)}/global`,
+        `primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/global`,
         ...themes.map(
-          (theme) => `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`
+          (theme) => `primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`
         )
       ]),
       ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),

package/dist/src/init/generateThemesJson.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generateThemesJson.d.ts","sourceRoot":"","sources":["../../../src/init/generateThemesJson.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,WAAW,EAAkB,MAAM,sBAAsB,CAAC;AAIxE,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,KAAK,EAAE,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,UAAU,CAAC,EAC3C,MAAM,EAAE,MAAM,EAAE,GACf,WAAW,EAAE,CAQf"}

package/dist/src/init/generateThemesJson.js

@@ -36,10 +36,10 @@ function generateModesGroup(modes, themes) {
       id: randomUUID(),
       name: mode,
       selectedTokenSets: Object.fromEntries([
-        [`primitives/modes/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
+        [`primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
         ...themes.map(
           (theme) => [
-            `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+            `primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
             TokenSetStatus.ENABLED
           ]
         )

package/dist/src/init/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/init/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAIrE,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,yBAQ/C"}

package/dist/src/init/nextStepsMarkdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nextStepsMarkdown.d.ts","sourceRoot":"","sources":["../../../src/init/nextStepsMarkdown.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAC;AAGrD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,eAAe,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,UA4F9G"}

package/dist/src/init/nextStepsMarkdown.js

@@ -1,7 +1,7 @@
 import { normalizeTokenSetName, toGeneratedCssFileName } from "./utils.js";
 function nextStepsMarkdown(themes, modes, tokensTargetDir, packageName) {
   const themeModeCombinations = themes.flatMap(
-    (theme) => modes.map((mode) => [theme, mode])
+    (theme) => modes.map((colorScheme) => [theme, colorScheme])
   );
   const themeOrThemes = `theme${themes.length > 1 ? "s" : ""}`;
   const isOrAre = themes.length > 1 ? "are" : "is";
@@ -24,7 +24,7 @@ function nextStepsMarkdown(themes, modes, tokensTargetDir, packageName) {
 2. Press "Kopier tema"
 3. Under "Json til Figma", copy the contents under ${modes.join(" / ")} to
    the corresponding file under \`${tokensTargetDir}\`:
-${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join("\n")}
+${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join("\n")}
    This can also be done in Tokens Studio for Figma.
 4. **IMPORTANT!** In the JSON data you copied, replace \`theme\` on line 2
    with the correct theme identifier, depending on the theme you're customizing.

package/dist/src/init/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/init/utils.ts"],"names":[],"mappings":"AAEA,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE1D;AAED,wBAAgB,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAG3D;AAED,wBAAgB,kBAAkB,CAAC,WAAW,EAAE,MAAM,UAOrD"}

package/dist/src/migrations/beta-to-v1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"beta-to-v1.d.ts","sourceRoot":"","sources":["../../../src/migrations/beta-to-v1.ts"],"names":[],"mappings":"gCAGuB,MAAM;AAA7B,wBAmVK"}

package/dist/src/migrations/beta-to-v1.js

@@ -221,10 +221,10 @@ var beta_to_v1_default = (glob) => runCssCodemod({
       "--fds-border_radius-small": "--ds-border-radius-sm",
       "--fds-border_radius-medium": "--ds-border-radius-md",
       "--fds-border_radius-large": "--ds-border-radius-lg",
-      "--fds-border_radius-xlarge": "--ds-border-radius-xl",
-      "--fds-border_radius-xxlarge": "--ds-border-radius-2xl",
-      "--fds-border_radius-xxxlarge": "--ds-border-radius-3xl",
-      "--fds-border_radius-xxxxlarge": "--ds-border-radius-4xl",
+      "--fds-border_radius-xlarge": "--ds-border-radius-lg",
+      "--fds-border_radius-xxlarge": "--ds-border-radius-lg",
+      "--fds-border_radius-xxxlarge": "--ds-border-radius-lg",
+      "--fds-border_radius-xxxxlarge": "--ds-border-radius-lg",
       "--fds-border_radius-full": "--ds-border-radius-full",
       "--fds-base_spacing": "[delete]",
       "--fds-base_sizing": "[delete]",

package/dist/src/migrations/codemods/css/plugins.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugins.d.ts","sourceRoot":"","sources":["../../../../../src/migrations/codemods/css/plugins.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAe,MAAM,EAAE,MAAM,SAAS,CAAC;AAGnD,KAAK,eAAe,GAAG,CAAC,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,MAAM,CAAC;AAOtE,eAAO,MAAM,cAAc,EAAE,eAe3B,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,eA2BzB,CAAC"}

package/dist/src/migrations/codemods/css/run.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../../../../../src/migrations/codemods/css/run.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,eAAe,GAAG;IACrB,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,aAAa,6BAAwD,eAAe,kBAkBhG,CAAC"}

package/dist/src/migrations/codemods/jsx/classname-prefix.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"classname-prefix.d.ts","sourceRoot":"","sources":["../../../../../src/migrations/codemods/jsx/classname-prefix.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAmB,MAAM,aAAa,CAAC;AAoElE;;;;;GAKG;AACH,iBAAS,sBAAsB,CAAC,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,GAAG,MAAM,GAAG,SAAS,CAiB5E;AAED,eAAe,sBAAsB,CAAC"}

package/dist/src/migrations/codemods/jsx/run.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../../../../../src/migrations/codemods/jsx/run.ts"],"names":[],"mappings":"AAKA,KAAK,eAAe,GAAG;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAIF,eAAO,MAAM,aAAa,yBAA+C,eAAe,kBAiBvF,CAAC"}

package/dist/src/migrations/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/migrations/index.ts"],"names":[],"mappings":";;;;AAGA,wBAGE"}

package/dist/src/migrations/react-beta-to-v1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-beta-to-v1.d.ts","sourceRoot":"","sources":["../../../src/migrations/react-beta-to-v1.ts"],"names":[],"mappings":"gCAEuB,MAAM;AAA7B,wBAAuE"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/actions.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AASrD;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,MAuB3B,CAAC"}

package/dist/src/tokens/build/builtin-colors.css

@@ -0,0 +1,87 @@
+@layer ds.theme.color {
+  [data-color=neutral] {
+    --ds-color-background-default: var(--ds-color-neutral-background-default);
+    --ds-color-background-subtle: var(--ds-color-neutral-background-subtle);
+    --ds-color-surface-default: var(--ds-color-neutral-surface-default);
+    --ds-color-surface-hover: var(--ds-color-neutral-surface-hover);
+    --ds-color-surface-active: var(--ds-color-neutral-surface-active);
+    --ds-color-border-subtle: var(--ds-color-neutral-border-subtle);
+    --ds-color-border-default: var(--ds-color-neutral-border-default);
+    --ds-color-border-strong: var(--ds-color-neutral-border-strong);
+    --ds-color-base-default: var(--ds-color-neutral-base-default);
+    --ds-color-base-hover: var(--ds-color-neutral-base-hover);
+    --ds-color-base-active: var(--ds-color-neutral-base-active);
+    --ds-color-text-subtle: var(--ds-color-neutral-text-subtle);
+    --ds-color-text-default: var(--ds-color-neutral-text-default);
+    --ds-color-contrast-default: var(--ds-color-neutral-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-neutral-contrast-subtle);
+  }
+  [data-color=success] {
+    --ds-color-background-default: var(--ds-color-success-background-default);
+    --ds-color-background-subtle: var(--ds-color-success-background-subtle);
+    --ds-color-surface-default: var(--ds-color-success-surface-default);
+    --ds-color-surface-hover: var(--ds-color-success-surface-hover);
+    --ds-color-surface-active: var(--ds-color-success-surface-active);
+    --ds-color-border-subtle: var(--ds-color-success-border-subtle);
+    --ds-color-border-default: var(--ds-color-success-border-default);
+    --ds-color-border-strong: var(--ds-color-success-border-strong);
+    --ds-color-base-default: var(--ds-color-success-base-default);
+    --ds-color-base-hover: var(--ds-color-success-base-hover);
+    --ds-color-base-active: var(--ds-color-success-base-active);
+    --ds-color-text-subtle: var(--ds-color-success-text-subtle);
+    --ds-color-text-default: var(--ds-color-success-text-default);
+    --ds-color-contrast-default: var(--ds-color-success-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-success-contrast-subtle);
+  }
+  [data-color=warning] {
+    --ds-color-background-default: var(--ds-color-warning-background-default);
+    --ds-color-background-subtle: var(--ds-color-warning-background-subtle);
+    --ds-color-surface-default: var(--ds-color-warning-surface-default);
+    --ds-color-surface-hover: var(--ds-color-warning-surface-hover);
+    --ds-color-surface-active: var(--ds-color-warning-surface-active);
+    --ds-color-border-subtle: var(--ds-color-warning-border-subtle);
+    --ds-color-border-default: var(--ds-color-warning-border-default);
+    --ds-color-border-strong: var(--ds-color-warning-border-strong);
+    --ds-color-base-default: var(--ds-color-warning-base-default);
+    --ds-color-base-hover: var(--ds-color-warning-base-hover);
+    --ds-color-base-active: var(--ds-color-warning-base-active);
+    --ds-color-text-subtle: var(--ds-color-warning-text-subtle);
+    --ds-color-text-default: var(--ds-color-warning-text-default);
+    --ds-color-contrast-default: var(--ds-color-warning-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-warning-contrast-subtle);
+  }
+  [data-color=danger] {
+    --ds-color-background-default: var(--ds-color-danger-background-default);
+    --ds-color-background-subtle: var(--ds-color-danger-background-subtle);
+    --ds-color-surface-default: var(--ds-color-danger-surface-default);
+    --ds-color-surface-hover: var(--ds-color-danger-surface-hover);
+    --ds-color-surface-active: var(--ds-color-danger-surface-active);
+    --ds-color-border-subtle: var(--ds-color-danger-border-subtle);
+    --ds-color-border-default: var(--ds-color-danger-border-default);
+    --ds-color-border-strong: var(--ds-color-danger-border-strong);
+    --ds-color-base-default: var(--ds-color-danger-base-default);
+    --ds-color-base-hover: var(--ds-color-danger-base-hover);
+    --ds-color-base-active: var(--ds-color-danger-base-active);
+    --ds-color-text-subtle: var(--ds-color-danger-text-subtle);
+    --ds-color-text-default: var(--ds-color-danger-text-default);
+    --ds-color-contrast-default: var(--ds-color-danger-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-danger-contrast-subtle);
+  }
+  [data-color=info] {
+    --ds-color-background-default: var(--ds-color-info-background-default);
+    --ds-color-background-subtle: var(--ds-color-info-background-subtle);
+    --ds-color-surface-default: var(--ds-color-info-surface-default);
+    --ds-color-surface-hover: var(--ds-color-info-surface-hover);
+    --ds-color-surface-active: var(--ds-color-info-surface-active);
+    --ds-color-border-subtle: var(--ds-color-info-border-subtle);
+    --ds-color-border-default: var(--ds-color-info-border-default);
+    --ds-color-border-strong: var(--ds-color-info-border-strong);
+    --ds-color-base-default: var(--ds-color-info-base-default);
+    --ds-color-base-hover: var(--ds-color-info-base-hover);
+    --ds-color-base-active: var(--ds-color-info-base-active);
+    --ds-color-text-subtle: var(--ds-color-info-text-subtle);
+    --ds-color-text-default: var(--ds-color-info-text-default);
+    --ds-color-contrast-default: var(--ds-color-info-contrast-default);
+    --ds-color-contrast-subtle: var(--ds-color-info-contrast-subtle);
+  }
+}

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

@@ -0,0 +1,21 @@
+import type { Config as StyleDictionaryConfig } from 'style-dictionary/types';
+import type { GetSdConfigOptions, SDConfigForThemePermutation, ThemeDimension, ThemePermutation } from './types.js';
+import { type ProcessedThemeObject } from './utils/getMultidimensionalThemes.js';
+export declare const prefix = "ds";
+export declare const basePxFontSize = 16;
+export type GetStyleDictionaryConfig = (permutation: ThemePermutation, options: {
+    outPath?: string;
+}) => StyleDictionaryConfig | {
+    config: StyleDictionaryConfig;
+    permutationOverrides?: Partial<ThemePermutation>;
+}[];
+export declare const configs: {
+    colorSchemeVariables: GetStyleDictionaryConfig;
+    mainColorVariables: GetStyleDictionaryConfig;
+    supportColorVariables: GetStyleDictionaryConfig;
+    typographyVariables: GetStyleDictionaryConfig;
+    semanticVariables: GetStyleDictionaryConfig;
+    typescriptTokens: GetStyleDictionaryConfig;
+};
+export declare const getConfigsForThemeDimensions: (getConfig: GetStyleDictionaryConfig, themes: ProcessedThemeObject[], dimensions: ThemeDimension[], options: GetSdConfigOptions) => SDConfigForThemePermutation[];
+//# sourceMappingURL=configs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAOhG,OAAO,KAAK,EAEV,kBAAkB,EAElB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAQ5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AAwCjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AAuPnH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,cAC5B,wBAAwB,UAC3B,oBAAoB,EAAE,cAClB,cAAc,EAAE,WACnB,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}