@digdir/designsystemet 1.0.2 → 1.0.4

package/dist/src/tokens/create.js

@@ -1,56 +1,1340 @@
+// src/tokens/create/defaults.ts
 import * as R from "ramda";
-import { baseColors, generateColorScale } from "../colors/index.js";
-const cliOptions = {
-  outDir: "out-dir",
-  clean: "clean",
-  theme: {
-    colors: {
-      main: "main-colors",
-      support: "support-colors",
-      neutral: "neutral-color"
+
+// src/tokens/template/design-tokens/primitives/globals.json with { type: 'json' }
+var globals_default = {
+  "border-width": {
+    "1": {
+      $type: "borderWidth",
+      $value: "1px"
     },
-    typography: {
-      fontFamily: "font-family"
+    "3": {
+      $type: "borderWidth",
+      $value: "3px"
+    }
+  },
+  shadow: {
+    "100": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.16)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
+        },
+        {
+          x: "0",
+          y: "1",
+          blur: "2",
+          spread: "0",
+          color: "rgba(0,0,0,0.12)"
+        }
+      ]
     },
-    borderRadius: "border-radius"
+    "200": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.15)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
+        },
+        {
+          color: "rgba(0,0,0,0.12)",
+          x: "0",
+          y: "1",
+          blur: "2",
+          spread: "0"
+        },
+        {
+          x: "0",
+          y: "2",
+          blur: "4",
+          spread: "0",
+          color: "rgba(0,0,0,0.1)"
+        }
+      ]
+    },
+    "300": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.14)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
+        },
+        {
+          color: "rgba(0,0,0,0.12)",
+          x: "0",
+          y: "2",
+          blur: "4",
+          spread: "0"
+        },
+        {
+          x: "0",
+          y: "4",
+          blur: "8",
+          spread: "0",
+          color: "rgba(0,0,0,0.12)"
+        }
+      ]
+    },
+    "400": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.13)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
+        },
+        {
+          color: "rgba(0,0,0,0.13)",
+          x: "0",
+          y: "3",
+          blur: "5",
+          spread: "0"
+        },
+        {
+          x: "0",
+          y: "6",
+          blur: "12",
+          spread: "0",
+          color: "rgba(0,0,0,0.14)"
+        }
+      ]
+    },
+    "500": {
+      $type: "boxShadow",
+      $value: [
+        {
+          color: "rgba(0,0,0,0.12)",
+          x: "0",
+          y: "0",
+          blur: "1",
+          spread: "0"
+        },
+        {
+          color: "rgba(0,0,0,0.16)",
+          x: "0",
+          y: "4",
+          blur: "8",
+          spread: "0"
+        },
+        {
+          x: "0",
+          y: "12",
+          blur: "24",
+          spread: "0",
+          color: "rgba(0,0,0,0.16)"
+        }
+      ]
+    }
+  },
+  opacity: {
+    "30": {
+      $type: "opacity",
+      $value: "30%"
+    }
   }
 };
-const createColorTokens = (colorArray) => {
-  const obj = {};
-  const $type = "color";
-  for (const index in colorArray) {
-    obj[Number(index) + 1] = { $type, $value: colorArray[index].hex };
+
+// src/tokens/template/design-tokens/primitives/modes/size/global.json with { type: 'json' }
+var global_default = {
+  _size: {
+    "0": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *0)"
+    },
+    "1": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *1)"
+    },
+    "2": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *2)"
+    },
+    "3": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *3)"
+    },
+    "4": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *4)"
+    },
+    "5": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *5)"
+    },
+    "6": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *6)"
+    },
+    "7": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *7)"
+    },
+    "8": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *8)"
+    },
+    "9": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *9)"
+    },
+    "10": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *10)"
+    },
+    "11": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *11)"
+    },
+    "12": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *12)"
+    },
+    "13": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *13)"
+    },
+    "14": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *14)"
+    },
+    "15": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *15)"
+    },
+    "18": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *18)"
+    },
+    "22": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *22)"
+    },
+    "26": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *26)"
+    },
+    "30": {
+      $type: "dimension",
+      $value: "floor({_size.step} / {_size.base} * {_size.mode-font-size} *30)"
+    },
+    "mode-font-size": {
+      $type: "dimension",
+      $value: "{size._mode-font-size}"
+    },
+    base: {
+      $type: "dimension",
+      $value: "{size._base}"
+    },
+    step: {
+      $type: "dimension",
+      $value: "{size._step}"
+    }
   }
-  return obj;
 };
-const generateTypographyTokens = (themeName, { fontFamily }) => {
-  return {
-    [themeName]: {
-      "font-family": {
-        $type: "fontFamilies",
-        $value: fontFamily ?? "Inter"
+
+// src/tokens/template/design-tokens/primitives/modes/size/large.json with { type: 'json' }
+var large_default = {
+  size: {
+    "_mode-font-size": {
+      $type: "dimension",
+      $value: "21"
+    },
+    _base: {
+      $type: "dimension",
+      $value: "18"
+    },
+    _step: {
+      $type: "dimension",
+      $value: "4"
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/primitives/modes/size/medium.json with { type: 'json' }
+var medium_default = {
+  size: {
+    "_mode-font-size": {
+      $type: "dimension",
+      $value: "18"
+    },
+    _base: {
+      $type: "dimension",
+      $value: "18"
+    },
+    _step: {
+      $type: "dimension",
+      $value: "4"
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/primitives/modes/size/small.json with { type: 'json' }
+var small_default = {
+  size: {
+    "_mode-font-size": {
+      $type: "dimension",
+      $value: "16"
+    },
+    _base: {
+      $type: "dimension",
+      $value: "18"
+    },
+    _step: {
+      $type: "dimension",
+      $value: "4"
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/primitives/modes/typography/size/large.json with { type: 'json' }
+var large_default2 = {
+  "line-height": {
+    sm: {
+      $type: "lineHeights",
+      $value: "130%"
+    },
+    md: {
+      $type: "lineHeights",
+      $value: "150%"
+    },
+    lg: {
+      $type: "lineHeights",
+      $value: "170%"
+    }
+  },
+  "font-size": {
+    "1": {
+      $type: "fontSizes",
+      $value: "13"
+    },
+    "2": {
+      $type: "fontSizes",
+      $value: "16"
+    },
+    "3": {
+      $type: "fontSizes",
+      $value: "18"
+    },
+    "4": {
+      $type: "fontSizes",
+      $value: "21"
+    },
+    "5": {
+      $type: "fontSizes",
+      $value: "24"
+    },
+    "6": {
+      $type: "fontSizes",
+      $value: "30"
+    },
+    "7": {
+      $type: "fontSizes",
+      $value: "36"
+    },
+    "8": {
+      $type: "fontSizes",
+      $value: "48"
+    },
+    "9": {
+      $type: "fontSizes",
+      $value: "60"
+    },
+    "10": {
+      $type: "fontSizes",
+      $value: "72"
+    }
+  },
+  "letter-spacing": {
+    "1": {
+      $type: "letterSpacing",
+      $value: "-1%"
+    },
+    "2": {
+      $type: "letterSpacing",
+      $value: "-0.5%"
+    },
+    "3": {
+      $type: "letterSpacing",
+      $value: "-0.25%"
+    },
+    "4": {
+      $type: "letterSpacing",
+      $value: "-0.15%"
+    },
+    "5": {
+      $type: "letterSpacing",
+      $value: "0%"
+    },
+    "6": {
+      $type: "letterSpacing",
+      $value: "0.15%"
+    },
+    "7": {
+      $type: "letterSpacing",
+      $value: "0.25%"
+    },
+    "8": {
+      $type: "letterSpacing",
+      $value: "0.5%"
+    },
+    "9": {
+      $type: "letterSpacing",
+      $value: "1.5%"
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/primitives/modes/typography/size/medium.json with { type: 'json' }
+var medium_default2 = {
+  "line-height": {
+    sm: {
+      $type: "lineHeights",
+      $value: "130%"
+    },
+    md: {
+      $type: "lineHeights",
+      $value: "150%"
+    },
+    lg: {
+      $type: "lineHeights",
+      $value: "170%"
+    }
+  },
+  "font-size": {
+    "1": {
+      $type: "fontSizes",
+      $value: "12"
+    },
+    "2": {
+      $type: "fontSizes",
+      $value: "14"
+    },
+    "3": {
+      $type: "fontSizes",
+      $value: "16"
+    },
+    "4": {
+      $type: "fontSizes",
+      $value: "18"
+    },
+    "5": {
+      $type: "fontSizes",
+      $value: "21"
+    },
+    "6": {
+      $type: "fontSizes",
+      $value: "24"
+    },
+    "7": {
+      $type: "fontSizes",
+      $value: "30"
+    },
+    "8": {
+      $type: "fontSizes",
+      $value: "36"
+    },
+    "9": {
+      $type: "fontSizes",
+      $value: "48"
+    },
+    "10": {
+      $type: "fontSizes",
+      $value: "60"
+    }
+  },
+  "letter-spacing": {
+    "1": {
+      $type: "letterSpacing",
+      $value: "-1%"
+    },
+    "2": {
+      $type: "letterSpacing",
+      $value: "-0.5%"
+    },
+    "3": {
+      $type: "letterSpacing",
+      $value: "-0.25%"
+    },
+    "4": {
+      $type: "letterSpacing",
+      $value: "-0.15%"
+    },
+    "5": {
+      $type: "letterSpacing",
+      $value: "0%"
+    },
+    "6": {
+      $type: "letterSpacing",
+      $value: "0.15%"
+    },
+    "7": {
+      $type: "letterSpacing",
+      $value: "0.25%"
+    },
+    "8": {
+      $type: "letterSpacing",
+      $value: "0.5%"
+    },
+    "9": {
+      $type: "letterSpacing",
+      $value: "1.5%"
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/primitives/modes/typography/size/small.json with { type: 'json' }
+var small_default2 = {
+  "line-height": {
+    sm: {
+      $type: "lineHeights",
+      $value: "130%"
+    },
+    md: {
+      $type: "lineHeights",
+      $value: "150%"
+    },
+    lg: {
+      $type: "lineHeights",
+      $value: "170%"
+    }
+  },
+  "font-size": {
+    "1": {
+      $type: "fontSizes",
+      $value: "11"
+    },
+    "2": {
+      $type: "fontSizes",
+      $value: "13"
+    },
+    "3": {
+      $type: "fontSizes",
+      $value: "14"
+    },
+    "4": {
+      $type: "fontSizes",
+      $value: "16"
+    },
+    "5": {
+      $type: "fontSizes",
+      $value: "18"
+    },
+    "6": {
+      $type: "fontSizes",
+      $value: "21"
+    },
+    "7": {
+      $type: "fontSizes",
+      $value: "24"
+    },
+    "8": {
+      $type: "fontSizes",
+      $value: "30"
+    },
+    "9": {
+      $type: "fontSizes",
+      $value: "36"
+    },
+    "10": {
+      $type: "fontSizes",
+      $value: "48"
+    }
+  },
+  "letter-spacing": {
+    "1": {
+      $type: "letterSpacing",
+      $value: "-1%"
+    },
+    "2": {
+      $type: "letterSpacing",
+      $value: "-0.5%"
+    },
+    "3": {
+      $type: "letterSpacing",
+      $value: "-0.25%"
+    },
+    "4": {
+      $type: "letterSpacing",
+      $value: "-0.15%"
+    },
+    "5": {
+      $type: "letterSpacing",
+      $value: "0%"
+    },
+    "6": {
+      $type: "letterSpacing",
+      $value: "0.15%"
+    },
+    "7": {
+      $type: "letterSpacing",
+      $value: "0.25%"
+    },
+    "8": {
+      $type: "letterSpacing",
+      $value: "0.5%"
+    },
+    "9": {
+      $type: "letterSpacing",
+      $value: "1.5%"
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/semantic/style.json with { type: 'json' }
+var style_default = {
+  typography: {
+    heading: {
+      "2xl": {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.medium}",
+          lineHeight: "{line-height.sm}",
+          fontSize: "{font-size.10}",
+          letterSpacing: "{letter-spacing.1}"
+        }
+      },
+      xl: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.medium}",
+          lineHeight: "{line-height.sm}",
+          fontSize: "{font-size.9}",
+          letterSpacing: "{letter-spacing.1}"
+        }
       },
-      "font-weight": {
-        medium: {
-          $type: "fontWeights",
-          $value: "Medium"
+      lg: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.medium}",
+          lineHeight: "{line-height.sm}",
+          fontSize: "{font-size.8}",
+          letterSpacing: "{letter-spacing.2}"
+        }
+      },
+      md: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.medium}",
+          lineHeight: "{line-height.sm}",
+          fontSize: "{font-size.7}",
+          letterSpacing: "{letter-spacing.3}"
+        }
+      },
+      sm: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.medium}",
+          lineHeight: "{line-height.sm}",
+          fontSize: "{font-size.6}",
+          letterSpacing: "{letter-spacing.5}"
+        }
+      },
+      xs: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.medium}",
+          lineHeight: "{line-height.sm}",
+          fontSize: "{font-size.5}",
+          letterSpacing: "{letter-spacing.6}"
+        }
+      },
+      "2xs": {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.medium}",
+          lineHeight: "{line-height.sm}",
+          fontSize: "{font-size.4}",
+          letterSpacing: "{letter-spacing.6}"
+        }
+      }
+    },
+    body: {
+      xl: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.regular}",
+          lineHeight: "{line-height.md}",
+          fontSize: "{font-size.6}",
+          letterSpacing: "{letter-spacing.8}"
+        }
+      },
+      lg: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.regular}",
+          lineHeight: "{line-height.md}",
+          fontSize: "{font-size.5}",
+          letterSpacing: "{letter-spacing.8}"
+        }
+      },
+      md: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.regular}",
+          lineHeight: "{line-height.md}",
+          fontSize: "{font-size.4}",
+          letterSpacing: "{letter-spacing.8}"
+        }
+      },
+      sm: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.regular}",
+          lineHeight: "{line-height.md}",
+          fontSize: "{font-size.3}",
+          letterSpacing: "{letter-spacing.7}"
+        }
+      },
+      xs: {
+        $type: "typography",
+        $value: {
+          fontFamily: "{font-family}",
+          fontWeight: "{font-weight.regular}",
+          lineHeight: "{line-height.md}",
+          fontSize: "{font-size.2}",
+          letterSpacing: "{letter-spacing.6}"
+        }
+      },
+      short: {
+        xl: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.6}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        lg: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.5}",
+            letterSpacing: "{letter-spacing.8}"
+          }
         },
-        semibold: {
-          $type: "fontWeights",
-          $value: "SemiBold"
+        md: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.4}",
+            letterSpacing: "{letter-spacing.8}"
+          }
         },
-        regular: {
-          $type: "fontWeights",
-          $value: "Regular"
+        sm: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.3}",
+            letterSpacing: "{letter-spacing.7}"
+          }
+        },
+        xs: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.sm}",
+            fontSize: "{font-size.2}",
+            letterSpacing: "{letter-spacing.6}"
+          }
+        }
+      },
+      long: {
+        xl: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.lg}",
+            fontSize: "{font-size.6}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        lg: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.lg}",
+            fontSize: "{font-size.5}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        md: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.lg}",
+            fontSize: "{font-size.4}",
+            letterSpacing: "{letter-spacing.8}"
+          }
+        },
+        sm: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.lg}",
+            fontSize: "{font-size.3}",
+            letterSpacing: "{letter-spacing.7}"
+          }
+        },
+        xs: {
+          $type: "typography",
+          $value: {
+            fontFamily: "{font-family}",
+            fontWeight: "{font-weight.regular}",
+            lineHeight: "{line-height.lg}",
+            fontSize: "{font-size.2}",
+            letterSpacing: "{letter-spacing.6}"
+          }
         }
       }
     }
+  },
+  opacity: {
+    disabled: {
+      $type: "opacity",
+      $value: "{opacity.30}"
+    }
+  },
+  "border-width": {
+    default: {
+      $type: "borderWidth",
+      $value: "{border-width.1}"
+    },
+    focus: {
+      $type: "borderWidth",
+      $value: "{border-width.3}"
+    }
+  },
+  shadow: {
+    xs: {
+      $type: "boxShadow",
+      $value: "{shadow.100}"
+    },
+    sm: {
+      $type: "boxShadow",
+      $value: "{shadow.200}"
+    },
+    md: {
+      $type: "boxShadow",
+      $value: "{shadow.300}"
+    },
+    lg: {
+      $type: "boxShadow",
+      $value: "{shadow.400}"
+    },
+    xl: {
+      $type: "boxShadow",
+      $value: "{shadow.500}"
+    }
+  },
+  "border-radius": {
+    sm: {
+      $type: "dimension",
+      $value: "{border-radius.1}"
+    },
+    md: {
+      $type: "dimension",
+      $value: "{border-radius.2}"
+    },
+    lg: {
+      $type: "dimension",
+      $value: "{border-radius.3}"
+    },
+    xl: {
+      $type: "dimension",
+      $value: "{border-radius.4}"
+    },
+    default: {
+      $type: "dimension",
+      $value: "{border-radius.5}"
+    },
+    full: {
+      $type: "dimension",
+      $value: "{border-radius.6}"
+    }
+  },
+  size: {
+    "0": {
+      $type: "dimension",
+      $value: "{_size.0}"
+    },
+    "1": {
+      $type: "dimension",
+      $value: "{_size.1}"
+    },
+    "2": {
+      $type: "dimension",
+      $value: "{_size.2}"
+    },
+    "3": {
+      $type: "dimension",
+      $value: "{_size.3}"
+    },
+    "4": {
+      $type: "dimension",
+      $value: "{_size.4}"
+    },
+    "5": {
+      $type: "dimension",
+      $value: "{_size.5}"
+    },
+    "6": {
+      $type: "dimension",
+      $value: "{_size.6}"
+    },
+    "7": {
+      $type: "dimension",
+      $value: "{_size.7}"
+    },
+    "8": {
+      $type: "dimension",
+      $value: "{_size.8}"
+    },
+    "9": {
+      $type: "dimension",
+      $value: "{_size.9}"
+    },
+    "10": {
+      $type: "dimension",
+      $value: "{_size.10}"
+    },
+    "11": {
+      $type: "dimension",
+      $value: "{_size.11}"
+    },
+    "12": {
+      $type: "dimension",
+      $value: "{_size.12}"
+    },
+    "13": {
+      $type: "dimension",
+      $value: "{_size.13}"
+    },
+    "14": {
+      $type: "dimension",
+      $value: "{_size.14}"
+    },
+    "15": {
+      $type: "dimension",
+      $value: "{_size.15}"
+    },
+    "18": {
+      $type: "dimension",
+      $value: "{_size.18}"
+    },
+    "22": {
+      $type: "dimension",
+      $value: "{_size.22}"
+    },
+    "26": {
+      $type: "dimension",
+      $value: "{_size.26}"
+    },
+    "30": {
+      $type: "dimension",
+      $value: "{_size.30}"
+    }
+  }
+};
+
+// src/tokens/create/defaults.ts
+var defaultTokens = {
+  "primitives/globals": globals_default,
+  "primitives/modes/size/small": small_default,
+  "primitives/modes/size/medium": medium_default,
+  "primitives/modes/size/large": large_default,
+  "primitives/modes/size/global": global_default,
+  "primitives/modes/typography/size/small": small_default2,
+  "primitives/modes/typography/size/medium": medium_default2,
+  "primitives/modes/typography/size/large": large_default2,
+  "semantic/style": style_default
+};
+var getDefaultTokens = (tokenSets) => Object.entries(R.pick(tokenSets, defaultTokens));
+var getDefaultToken = (tokenPath) => {
+  return [tokenPath, defaultTokens[tokenPath]];
+};
+
+// src/tokens/create/generators/color.ts
+import * as R4 from "ramda";
+
+// src/colors/utils.ts
+import chroma from "chroma-js";
+import { Hsluv } from "hsluv";
+var getLuminanceFromLightness = (lightness) => {
+  const conv = new Hsluv();
+  conv.hsluv_l = lightness;
+  conv.hsluvToHex();
+  return chroma(conv.hex).luminance();
+};
+var getLightnessFromHex = (hex) => {
+  const conv = new Hsluv();
+  conv.hex = hex;
+  conv.hexToHsluv();
+  return conv.hsluv_l;
+};
+
+// src/colors/theme.ts
+import chroma2 from "chroma-js";
+import * as R3 from "ramda";
+
+// src/colors/colorMetadata.ts
+import * as R2 from "ramda";
+var baseColors = {
+  blue: "#0A71C0",
+  green: "#068718",
+  orange: "#EA9B1B",
+  purple: "#663299",
+  red: "#C01B1B"
+};
+var colorMetadata = {
+  "background-default": {
+    number: 1,
+    name: "background-default",
+    group: "background",
+    displayName: "Background Default",
+    description: {
+      long: "Background Default er den mest n\xF8ytrale bakgrunnsfargen.",
+      short: "Standard bakgrunnsfarge."
+    },
+    luminance: {
+      light: 1,
+      dark: 9e-3,
+      contrast: 1e-3
+    }
+  },
+  "background-tinted": {
+    number: 2,
+    name: "background-tinted",
+    group: "background",
+    displayName: "Background Tinted",
+    description: {
+      long: "Background Tinted er en bakgrunnsfarge som har et hint av farge i seg.",
+      short: "Bakgrunn med et hint av farge i seg."
+    },
+    luminance: {
+      light: 0.9,
+      dark: 0.014,
+      contrast: 65e-4
+    }
+  },
+  "surface-default": {
+    number: 3,
+    name: "surface-default",
+    group: "surface",
+    displayName: "Surface Default",
+    description: {
+      long: "Surface Default brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Dette er den mest n\xF8ytrale surface fargen.",
+      short: "Standardfarge for overflater / komponenter."
+    },
+    luminance: {
+      light: 1,
+      dark: 0.021,
+      contrast: 0.015
+    }
+  },
+  "surface-tinted": {
+    number: 4,
+    name: "surface-tinted",
+    group: "surface",
+    displayName: "Surface Tinted",
+    description: {
+      long: "Surface Tinted brukes p\xE5 flater som ligger opp\xE5 bakgrunnsfargene. Denne har et hint av farge i seg.",
+      short: "Overflater / komponenter med et hint av farge i seg."
+    },
+    luminance: {
+      light: 0.81,
+      dark: 0.027,
+      contrast: 0.015
+    }
+  },
+  "surface-hover": {
+    number: 5,
+    name: "surface-hover",
+    group: "surface",
+    displayName: "Surface Hover",
+    description: {
+      long: "Surface Hover brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en hover state.",
+      short: "Hover-farge til overflater / komponenter."
+    },
+    luminance: {
+      light: 0.7,
+      dark: 0.036,
+      contrast: 0.028
+    }
+  },
+  "surface-active": {
+    number: 6,
+    name: "surface-active",
+    group: "surface",
+    displayName: "Surface Active",
+    description: {
+      long: "Surface Active brukes p\xE5 interaktive flater som ligger opp\xE5 bakgrunnsfargene i en active state.",
+      short: "Active-farge til overflater / komponenter."
+    },
+    luminance: {
+      light: 0.59,
+      dark: 0.056,
+      contrast: 0.045
+    }
+  },
+  "border-subtle": {
+    number: 7,
+    name: "border-subtle",
+    group: "border",
+    displayName: "Border Subtle",
+    description: {
+      long: "Border Subtle er den lyseste border-fargen og brukes for \xE5 skille elementer fra hverandre.",
+      short: "Border-farge med lav kontrast til dekorativ bruk (skillelinjer)."
+    },
+    luminance: {
+      light: 0.5,
+      dark: 0.08,
+      contrast: 0.26
+    }
+  },
+  "border-default": {
+    number: 8,
+    name: "border-default",
+    group: "border",
+    displayName: "Border Default",
+    description: {
+      long: "Border Default er en border-farge som brukes n\xE5r man \xF8nsker god kontrast mot bakgrunnsfargene.",
+      short: "Standard border-farge til skjemakomponenter og meningsb\xE6rende elementer."
+    },
+    luminance: {
+      light: 0.19,
+      dark: 0.22,
+      contrast: 0.4
+    }
+  },
+  "border-strong": {
+    number: 9,
+    name: "border-strong",
+    group: "border",
+    displayName: "Border Strong",
+    description: {
+      long: "Border Strong er den m\xF8rkeste border-fargen og brukes n\xE5r man \xF8nsker en veldig tydelig og sterk border.",
+      short: "Border-farge med h\xF8y kontrast for ekstra synlighet."
+    },
+    luminance: {
+      light: 0.11,
+      dark: 0.39,
+      contrast: 0.6
+    }
+  },
+  "text-subtle": {
+    number: 10,
+    name: "text-subtle",
+    group: "text",
+    displayName: "Text Subtle",
+    description: {
+      long: "Text Subtle er den lyseste tekstfargen og brukes p\xE5 tekst som skal v\xE6re litt mindre synlig eller for \xE5 skape variasjon i typografien.",
+      short: "Tekst- og ikonfarge med lavere kontrast."
+    },
+    luminance: {
+      light: 0.11,
+      dark: 0.39,
+      contrast: 0.57
+    }
+  },
+  "text-default": {
+    number: 11,
+    name: "text-default",
+    group: "text",
+    displayName: "Text Default",
+    description: {
+      long: "Text Default er den m\xF8rkeste tekstfargen og brukes p\xE5 tekst som skal v\xE6re mest synlig. Denne fargen b\xF8r brukes p\xE5 mesteparten av teksten p\xE5 en side.",
+      short: "Tekst- og ikonfarge med h\xF8y kontrast og god synlighet."
+    },
+    luminance: {
+      light: 0.0245,
+      dark: 0.84,
+      contrast: 0.86
+    }
+  },
+  "base-default": {
+    number: 12,
+    name: "base-default",
+    group: "base",
+    displayName: "Base Default",
+    description: {
+      long: "Base Default fargen f\xE5r den samme hex koden som fargen som er valgt i verkt\xF8yet. Brukes ofte som farge p\xE5 viktige elementer og p\xE5 flater som skal fange brukerens oppmerksomhet.",
+      short: "Standardfarge for solide bakgrunner."
+    },
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
+    }
+  },
+  "base-hover": {
+    number: 13,
+    name: "base-hover",
+    group: "base",
+    displayName: "Base Hover",
+    description: {
+      long: "Base Hover brukes som hover farge p\xE5 elementer som bruker Base Default fargen.",
+      short: "Hover-farge for solide bakgrunner."
+    },
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
+    }
+  },
+  "base-active": {
+    number: 14,
+    name: "base-active",
+    group: "base",
+    displayName: "Base Active",
+    description: {
+      long: "Base Active brukes som active farge p\xE5 elementer som bruker Base Default fargen.",
+      short: "Active-farge for solide bakgrunner."
+    },
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
+    }
+  },
+  "base-contrast-subtle": {
+    number: 15,
+    name: "base-contrast-subtle",
+    group: "base",
+    displayName: "Contrast Subtle",
+    description: {
+      long: "Contrast Subtle brukes som en viktig meningsb\xE6rende farge opp\xE5 Base Default fargen.",
+      short: "Farge med god kontrast mot Base-default."
+    },
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
+    }
+  },
+  "base-contrast-default": {
+    number: 16,
+    name: "base-contrast-default",
+    group: "base",
+    displayName: "Contrast Default",
+    description: {
+      long: "Contrast Default brukes som en viktig meningsb\xE6rende farge opp\xE5 alle Base fargane.",
+      short: "Farge med god kontrast mot Base-default og Base-hover."
+    },
+    luminance: {
+      light: 1,
+      dark: 1,
+      contrast: 1
+    }
+  }
+};
+var colorMetadataByNumber = R2.indexBy((metadata) => metadata.number, Object.values(colorMetadata));
+
+// src/colors/theme.ts
+var generateColorScale = (color, colorScheme) => {
+  let interpolationColor = color;
+  if (colorScheme === "dark") {
+    const [L, C, H] = chroma2(color).oklch();
+    const chromaModifier = 0.7;
+    interpolationColor = chroma2(L, C * chromaModifier, H, "oklch").hex();
+  }
+  const colors = R3.mapObjIndexed((colorData) => {
+    const luminance = colorData.luminance[colorScheme];
+    return {
+      ...colorData,
+      hex: chroma2(interpolationColor).luminance(luminance).hex()
+    };
+  }, colorMetadata);
+  const baseColors2 = generateBaseColors(color, colorScheme);
+  colors["base-default"] = { ...colors["base-default"], hex: baseColors2.default };
+  colors["base-hover"] = { ...colors["base-hover"], hex: baseColors2.hover };
+  colors["base-active"] = { ...colors["base-active"], hex: baseColors2.active };
+  colors["base-contrast-subtle"] = {
+    ...colors["base-contrast-subtle"],
+    hex: generateColorContrast(baseColors2.default, "subtle")
+  };
+  colors["base-contrast-default"] = {
+    ...colors["base-contrast-default"],
+    hex: generateColorContrast(baseColors2.default, "default")
   };
+  return Object.values(colors);
 };
-const generateThemeTokens = (themeName, colorScheme, colors) => {
-  const main = R.map((color) => createColorTokens(generateColorScale(color, colorScheme)), colors.main);
-  const support = R.map((color) => createColorTokens(generateColorScale(color, colorScheme)), colors.support);
-  const neutral = createColorTokens(generateColorScale(colors.neutral, colorScheme));
+var generateBaseColors = (color, colorScheme) => {
+  let colorLightness = getLightnessFromHex(color);
+  if (colorScheme !== "light") {
+    colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
+  }
+  const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
+  const calculateLightness = (base, mod) => base - mod;
+  return {
+    default: colorScheme === "light" ? color : chroma2(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
+    hover: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
+    active: chroma2(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
+  };
+};
+var generateColorContrast = (color, type) => {
+  if (type === "default") {
+    return chroma2.contrast(color, "#ffffff") >= chroma2.contrast(color, "#000000") ? "#ffffff" : "#000000";
+  }
+  if (type === "subtle") {
+    const contrastWhite = chroma2.contrast(color, "#ffffff");
+    const contrastBlack = chroma2.contrast(color, "#000000");
+    const lightness = getLightnessFromHex(color);
+    const modifier = lightness <= 40 || lightness >= 60 ? 60 : 50;
+    const targetLightness = contrastWhite >= contrastBlack ? lightness + modifier : lightness - modifier;
+    return chroma2(color).luminance(getLuminanceFromLightness(targetLightness)).hex();
+  }
+  return color;
+};
+
+// src/tokens/create/generators/color.ts
+var generateColor = (colorArray) => {
+  const obj = {};
+  const $type = "color";
+  for (const index in colorArray) {
+    obj[Number(index) + 1] = { $type, $value: colorArray[index].hex };
+  }
+  return obj;
+};
+var generateColorScheme = (themeName, colorScheme, colors) => {
+  const main = R4.map((color) => generateColor(generateColorScale(color, colorScheme)), colors.main);
+  const support = R4.map((color) => generateColor(generateColorScale(color, colorScheme)), colors.support);
+  const neutral = generateColor(generateColorScale(colors.neutral, colorScheme));
   return {
     [themeName]: {
       ...main,
@@ -59,7 +1343,7 @@ const generateThemeTokens = (themeName, colorScheme, colors) => {
     }
   };
 };
-const generateGlobalTokens = (colorScheme) => {
+var generateColorGlobal = (colorScheme) => {
   const blueScale = generateColorScale(baseColors.blue, colorScheme);
   const greenScale = generateColorScale(baseColors.green, colorScheme);
   const orangeScale = generateColorScale(baseColors.orange, colorScheme);
@@ -67,33 +1351,739 @@ const generateGlobalTokens = (colorScheme) => {
   const redScale = generateColorScale(baseColors.red, colorScheme);
   return {
     global: {
-      blue: createColorTokens(blueScale),
-      green: createColorTokens(greenScale),
-      orange: createColorTokens(orangeScale),
-      purple: createColorTokens(purpleScale),
-      red: createColorTokens(redScale)
+      blue: generateColor(blueScale),
+      green: generateColor(greenScale),
+      orange: generateColor(orangeScale),
+      purple: generateColor(purpleScale),
+      red: generateColor(redScale)
     }
   };
 };
-const createTokens = (opts) => {
-  const { colors, typography, name } = opts;
-  const tokens = {
-    colors: {
-      light: {
-        [name]: generateThemeTokens(name, "light", colors),
-        global: generateGlobalTokens("light")
+
+// src/tokens/create/generators/semantic.ts
+import * as R5 from "ramda";
+
+// src/tokens/template/design-tokens/semantic/color.base.template.json with { type: 'json' }
+var color_base_template_default = {
+  color: {
+    success: {
+      "background-default": {
+        $type: "color",
+        $value: "{global.green.1}"
+      },
+      "background-tinted": {
+        $type: "color",
+        $value: "{global.green.2}"
+      },
+      "surface-default": {
+        $type: "color",
+        $value: "{global.green.3}"
+      },
+      "surface-tinted": {
+        $type: "color",
+        $value: "{global.green.4}"
       },
-      dark: { [name]: generateThemeTokens(name, "dark", colors), global: generateGlobalTokens("dark") }
-      // contrast: {
-      //   [name]: generateThemeTokens(name, 'contrast', colors),
-      //   global: generateGlobalTokens('contrast'),
-      // },
+      "surface-hover": {
+        $type: "color",
+        $value: "{global.green.5}"
+      },
+      "surface-active": {
+        $type: "color",
+        $value: "{global.green.6}"
+      },
+      "border-subtle": {
+        $type: "color",
+        $value: "{global.green.7}"
+      },
+      "border-default": {
+        $type: "color",
+        $value: "{global.green.8}"
+      },
+      "border-strong": {
+        $type: "color",
+        $value: "{global.green.9}"
+      },
+      "text-subtle": {
+        $type: "color",
+        $value: "{global.green.10}"
+      },
+      "text-default": {
+        $type: "color",
+        $value: "{global.green.11}"
+      },
+      "base-default": {
+        $type: "color",
+        $value: "{global.green.12}"
+      },
+      "base-hover": {
+        $type: "color",
+        $value: "{global.green.13}"
+      },
+      "base-active": {
+        $type: "color",
+        $value: "{global.green.14}"
+      },
+      "base-contrast-subtle": {
+        $type: "color",
+        $value: "{global.green.15}"
+      },
+      "base-contrast-default": {
+        $type: "color",
+        $value: "{global.green.16}"
+      }
     },
-    typography: {
-      primary: generateTypographyTokens(name, typography)
+    danger: {
+      "background-default": {
+        $type: "color",
+        $value: "{global.red.1}"
+      },
+      "background-tinted": {
+        $type: "color",
+        $value: "{global.red.2}"
+      },
+      "surface-default": {
+        $type: "color",
+        $value: "{global.red.3}"
+      },
+      "surface-tinted": {
+        $type: "color",
+        $value: "{global.red.4}"
+      },
+      "surface-hover": {
+        $type: "color",
+        $value: "{global.red.5}"
+      },
+      "surface-active": {
+        $type: "color",
+        $value: "{global.red.6}"
+      },
+      "border-subtle": {
+        $type: "color",
+        $value: "{global.red.7}"
+      },
+      "border-default": {
+        $type: "color",
+        $value: "{global.red.8}"
+      },
+      "border-strong": {
+        $type: "color",
+        $value: "{global.red.9}"
+      },
+      "text-subtle": {
+        $type: "color",
+        $value: "{global.red.10}"
+      },
+      "text-default": {
+        $type: "color",
+        $value: "{global.red.11}"
+      },
+      "base-default": {
+        $type: "color",
+        $value: "{global.red.12}"
+      },
+      "base-hover": {
+        $type: "color",
+        $value: "{global.red.13}"
+      },
+      "base-active": {
+        $type: "color",
+        $value: "{global.red.14}"
+      },
+      "base-contrast-subtle": {
+        $type: "color",
+        $value: "{global.red.15}"
+      },
+      "base-contrast-default": {
+        $type: "color",
+        $value: "{global.red.16}"
+      }
+    },
+    info: {
+      "background-default": {
+        $type: "color",
+        $value: "{global.blue.1}"
+      },
+      "background-tinted": {
+        $type: "color",
+        $value: "{global.blue.2}"
+      },
+      "surface-default": {
+        $type: "color",
+        $value: "{global.blue.3}"
+      },
+      "surface-tinted": {
+        $type: "color",
+        $value: "{global.blue.4}"
+      },
+      "surface-hover": {
+        $type: "color",
+        $value: "{global.blue.5}"
+      },
+      "surface-active": {
+        $type: "color",
+        $value: "{global.blue.6}"
+      },
+      "border-subtle": {
+        $type: "color",
+        $value: "{global.blue.7}"
+      },
+      "border-default": {
+        $type: "color",
+        $value: "{global.blue.8}"
+      },
+      "border-strong": {
+        $type: "color",
+        $value: "{global.blue.9}"
+      },
+      "text-subtle": {
+        $type: "color",
+        $value: "{global.blue.10}"
+      },
+      "text-default": {
+        $type: "color",
+        $value: "{global.blue.11}"
+      },
+      "base-default": {
+        $type: "color",
+        $value: "{global.blue.12}"
+      },
+      "base-hover": {
+        $type: "color",
+        $value: "{global.blue.13}"
+      },
+      "base-active": {
+        $type: "color",
+        $value: "{global.blue.14}"
+      },
+      "base-contrast-subtle": {
+        $type: "color",
+        $value: "{global.blue.15}"
+      },
+      "base-contrast-default": {
+        $type: "color",
+        $value: "{global.blue.16}"
+      }
+    },
+    warning: {
+      "background-default": {
+        $type: "color",
+        $value: "{global.orange.1}"
+      },
+      "background-tinted": {
+        $type: "color",
+        $value: "{global.orange.2}"
+      },
+      "surface-default": {
+        $type: "color",
+        $value: "{global.orange.3}"
+      },
+      "surface-tinted": {
+        $type: "color",
+        $value: "{global.orange.4}"
+      },
+      "surface-hover": {
+        $type: "color",
+        $value: "{global.orange.5}"
+      },
+      "surface-active": {
+        $type: "color",
+        $value: "{global.orange.6}"
+      },
+      "border-subtle": {
+        $type: "color",
+        $value: "{global.orange.7}"
+      },
+      "border-default": {
+        $type: "color",
+        $value: "{global.orange.8}"
+      },
+      "border-strong": {
+        $type: "color",
+        $value: "{global.orange.9}"
+      },
+      "text-subtle": {
+        $type: "color",
+        $value: "{global.orange.10}"
+      },
+      "text-default": {
+        $type: "color",
+        $value: "{global.orange.11}"
+      },
+      "base-default": {
+        $type: "color",
+        $value: "{global.orange.12}"
+      },
+      "base-hover": {
+        $type: "color",
+        $value: "{global.orange.13}"
+      },
+      "base-active": {
+        $type: "color",
+        $value: "{global.orange.14}"
+      },
+      "base-contrast-subtle": {
+        $type: "color",
+        $value: "{global.orange.15}"
+      },
+      "base-contrast-default": {
+        $type: "color",
+        $value: "{global.orange.16}"
+      }
+    },
+    focus: {
+      inner: {
+        $type: "color",
+        $value: "{color.neutral.background-default}"
+      },
+      outer: {
+        $type: "color",
+        $value: "{color.neutral.text-default}"
+      }
     }
+  },
+  link: {
+    color: {
+      visited: {
+        $type: "color",
+        $value: "{global.purple.12}"
+      }
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/semantic/color.template.json with { type: 'json' }
+var color_template_default = {
+  "background-default": {
+    $type: "color",
+    $value: "{color.<color>.1}"
+  },
+  "background-tinted": {
+    $type: "color",
+    $value: "{color.<color>.2}"
+  },
+  "surface-default": {
+    $type: "color",
+    $value: "{color.<color>.3}"
+  },
+  "surface-tinted": {
+    $type: "color",
+    $value: "{color.<color>.4}"
+  },
+  "surface-hover": {
+    $type: "color",
+    $value: "{color.<color>.5}"
+  },
+  "surface-active": {
+    $type: "color",
+    $value: "{color.<color>.6}"
+  },
+  "border-subtle": {
+    $type: "color",
+    $value: "{color.<color>.7}"
+  },
+  "border-default": {
+    $type: "color",
+    $value: "{color.<color>.8}"
+  },
+  "border-strong": {
+    $type: "color",
+    $value: "{color.<color>.9}"
+  },
+  "text-subtle": {
+    $type: "color",
+    $value: "{color.<color>.10}"
+  },
+  "text-default": {
+    $type: "color",
+    $value: "{color.<color>.11}"
+  },
+  "base-default": {
+    $type: "color",
+    $value: "{color.<color>.12}"
+  },
+  "base-hover": {
+    $type: "color",
+    $value: "{color.<color>.13}"
+  },
+  "base-active": {
+    $type: "color",
+    $value: "{color.<color>.14}"
+  },
+  "base-contrast-subtle": {
+    $type: "color",
+    $value: "{color.<color>.15}"
+  },
+  "base-contrast-default": {
+    $type: "color",
+    $value: "{color.<color>.16}"
+  }
+};
+
+// src/tokens/template/design-tokens/semantic/modes/color.template.json with { type: 'json' }
+var color_template_default2 = {
+  "background-default": {
+    $type: "color",
+    $value: "{color.<color>.background-default}"
+  },
+  "background-tinted": {
+    $type: "color",
+    $value: "{color.<color>.background-tinted}"
+  },
+  "surface-default": {
+    $type: "color",
+    $value: "{color.<color>.surface-default}"
+  },
+  "surface-tinted": {
+    $type: "color",
+    $value: "{color.<color>.surface-tinted}"
+  },
+  "surface-hover": {
+    $type: "color",
+    $value: "{color.<color>.surface-hover}"
+  },
+  "surface-active": {
+    $type: "color",
+    $value: "{color.<color>.surface-active}"
+  },
+  "border-subtle": {
+    $type: "color",
+    $value: "{color.<color>.border-subtle}"
+  },
+  "border-default": {
+    $type: "color",
+    $value: "{color.<color>.border-default}"
+  },
+  "border-strong": {
+    $type: "color",
+    $value: "{color.<color>.border-strong}"
+  },
+  "text-subtle": {
+    $type: "color",
+    $value: "{color.<color>.text-subtle}"
+  },
+  "text-default": {
+    $type: "color",
+    $value: "{color.<color>.text-default}"
+  },
+  "base-default": {
+    $type: "color",
+    $value: "{color.<color>.base-default}"
+  },
+  "base-hover": {
+    $type: "color",
+    $value: "{color.<color>.base-hover}"
+  },
+  "base-active": {
+    $type: "color",
+    $value: "{color.<color>.base-active}"
+  },
+  "base-contrast-subtle": {
+    $type: "color",
+    $value: "{color.<color>.base-contrast-subtle}"
+  },
+  "base-contrast-default": {
+    $type: "color",
+    $value: "{color.<color>.base-contrast-default}"
+  }
+};
+
+// src/tokens/create/generators/semantic.ts
+var generateSemantic = (colors) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const modes = {
+    "main-color": {},
+    "support-color": {}
   };
-  return tokens;
+  const categories = [
+    ["main-color", mainColorNames],
+    ["support-color", supportColorNames]
+  ];
+  for (const [colorCategory, colorNames] of categories) {
+    for (const colorName of colorNames) {
+      const category = colorCategory.replace("-color", "");
+      const customColorTokens = {
+        color: {
+          [category]: JSON.parse(
+            JSON.stringify(
+              color_template_default2,
+              (key, value) => {
+                if (key === "$value") {
+                  return value.replace("<color>", colorName);
+                }
+                return value;
+              },
+              2
+            )
+          )
+        }
+      };
+      modes[colorCategory][colorName] = customColorTokens;
+    }
+  }
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const semanticColorTokens = customColors.map(
+    (colorName) => [
+      colorName,
+      R5.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), color_template_default)
+    ]
+  );
+  const color = {
+    ...color_base_template_default,
+    color: {
+      ...Object.fromEntries(semanticColorTokens),
+      ...color_base_template_default.color
+    }
+  };
+  return {
+    modes,
+    color
+  };
+};
+
+// src/tokens/create/generators/theme.ts
+import * as R6 from "ramda";
+
+// src/tokens/template/design-tokens/themes/theme.base.template.json with { type: 'json' }
+var theme_base_template_default = {
+  color: {},
+  "font-family": {
+    $type: "fontFamilies",
+    $value: "{<theme>.font-family}"
+  },
+  "font-weight": {
+    medium: {
+      $type: "fontWeights",
+      $value: "{<theme>.font-weight.medium}"
+    },
+    semibold: {
+      $type: "fontWeights",
+      $value: "{<theme>.font-weight.semibold}"
+    },
+    regular: {
+      $type: "fontWeights",
+      $value: "{<theme>.font-weight.regular}"
+    }
+  },
+  "border-radius": {
+    "1": {
+      $type: "dimension",
+      $value: "min({border-radius.base}*0.5,{border-radius.scale})"
+    },
+    "2": {
+      $type: "dimension",
+      $value: "min({border-radius.base},{border-radius.scale}*2)"
+    },
+    "3": {
+      $type: "dimension",
+      $value: "min({border-radius.base}*2,{border-radius.scale}*5)"
+    },
+    "4": {
+      $type: "dimension",
+      $value: "min({border-radius.base}*3,{border-radius.scale}*7)"
+    },
+    "5": {
+      $type: "dimension",
+      $value: "{border-radius.base}"
+    },
+    "6": {
+      $type: "dimension",
+      $value: "9999"
+    },
+    base: {
+      $type: "dimension",
+      $value: "4"
+    },
+    scale: {
+      $type: "dimension",
+      $value: "4"
+    }
+  }
+};
+
+// src/tokens/template/design-tokens/themes/theme.template.json with { type: 'json' }
+var theme_template_default = {
+  "1": {
+    $type: "color",
+    $value: "{<theme>.<color>.1}"
+  },
+  "2": {
+    $type: "color",
+    $value: "{<theme>.<color>.2}"
+  },
+  "3": {
+    $type: "color",
+    $value: "{<theme>.<color>.3}"
+  },
+  "4": {
+    $type: "color",
+    $value: "{<theme>.<color>.4}"
+  },
+  "5": {
+    $type: "color",
+    $value: "{<theme>.<color>.5}"
+  },
+  "6": {
+    $type: "color",
+    $value: "{<theme>.<color>.6}"
+  },
+  "7": {
+    $type: "color",
+    $value: "{<theme>.<color>.7}"
+  },
+  "8": {
+    $type: "color",
+    $value: "{<theme>.<color>.8}"
+  },
+  "9": {
+    $type: "color",
+    $value: "{<theme>.<color>.9}"
+  },
+  "10": {
+    $type: "color",
+    $value: "{<theme>.<color>.10}"
+  },
+  "11": {
+    $type: "color",
+    $value: "{<theme>.<color>.11}"
+  },
+  "12": {
+    $type: "color",
+    $value: "{<theme>.<color>.12}"
+  },
+  "13": {
+    $type: "color",
+    $value: "{<theme>.<color>.13}"
+  },
+  "14": {
+    $type: "color",
+    $value: "{<theme>.<color>.14}"
+  },
+  "15": {
+    $type: "color",
+    $value: "{<theme>.<color>.15}"
+  },
+  "16": {
+    $type: "color",
+    $value: "{<theme>.<color>.16}"
+  }
+};
+
+// src/tokens/create/generators/theme.ts
+var generateTheme = (colors, themeName, borderRadius) => {
+  const mainColorNames = Object.keys(colors.main);
+  const supportColorNames = Object.keys(colors.support);
+  const customColors = [...mainColorNames, "neutral", ...supportColorNames];
+  const themeColorTokens = Object.fromEntries(
+    customColors.map(
+      (colorName) => [
+        colorName,
+        R6.map((x) => ({ ...x, $value: x.$value.replace("<color>", colorName) }), theme_template_default)
+      ]
+    )
+  );
+  const { color: themeBaseFileColor, ...remainingThemeFile } = theme_base_template_default;
+  const themeFile = {
+    color: {
+      ...themeColorTokens,
+      ...themeBaseFileColor
+    },
+    ...remainingThemeFile
+  };
+  const baseBorderRadius = R6.lensPath(["border-radius", "base", "$value"]);
+  const updatedThemeFile = R6.set(baseBorderRadius, String(borderRadius), themeFile);
+  const token = JSON.parse(
+    JSON.stringify(
+      updatedThemeFile,
+      (key, value) => {
+        if (key === "$value") {
+          return value.replace("<theme>", themeName);
+        }
+        return value;
+      },
+      2
+    )
+  );
+  return token;
+};
+
+// src/tokens/template/design-tokens/primitives/modes/typography/typography.template.json with { type: 'json' }
+var typography_template_default = {
+  "<theme>": {
+    "font-family": {
+      $type: "fontFamilies",
+      $value: "<font-family>"
+    },
+    "font-weight": {
+      medium: {
+        $type: "fontWeights",
+        $value: "Medium"
+      },
+      semibold: {
+        $type: "fontWeights",
+        $value: "Semi bold"
+      },
+      regular: {
+        $type: "fontWeights",
+        $value: "Regular"
+      }
+    }
+  }
+};
+
+// src/tokens/create/generators/typography.ts
+var generateTypography = (themeName, { fontFamily }) => {
+  return JSON.parse(
+    JSON.stringify(typography_template_default).replaceAll(/<font-family>/g, fontFamily).replaceAll(/<theme>/g, themeName)
+  );
+};
+
+// src/tokens/create.ts
+var cliOptions = {
+  outDir: "out-dir",
+  clean: "clean",
+  theme: {
+    colors: {
+      main: "main-colors",
+      support: "support-colors",
+      neutral: "neutral-color"
+    },
+    typography: {
+      fontFamily: "font-family"
+    },
+    borderRadius: "border-radius"
+  }
+};
+var createTokens = async (opts) => {
+  const { colors, typography, name, borderRadius } = opts;
+  const colorSchemes = ["light", "dark"];
+  const semantic = generateSemantic(colors);
+  const tokenSets = new Map([
+    ...getDefaultTokens([
+      "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/${name}`, generateTypography(name, typography)],
+    [`primitives/modes/typography/secondary/${name}`, generateTypography(name, typography)],
+    ...colorSchemes.flatMap((scheme) => [
+      [`primitives/modes/color-scheme/${scheme}/global`, generateColorGlobal(scheme)],
+      [`primitives/modes/color-scheme/${scheme}/${name}`, generateColorScheme(name, scheme, colors)]
+    ]),
+    [`themes/${name}`, generateTheme(colors, name, borderRadius)],
+    ["semantic/color", semantic.color],
+    // maps out semantic modes, ieg 'semantic/modes/main-color/accent', and 'semantic/modes/support-color/brand1'
+    ...Object.entries(semantic.modes).flatMap(
+      ([mode, colors2]) => Object.entries(colors2).map(([key, colorSet]) => [`semantic/modes/${mode}/${key}`, colorSet])
+    ),
+    getDefaultToken("semantic/style")
+  ]);
+  return { tokenSets };
 };
 export {
   cliOptions,