fix: make token import more robust

scripts/applyDesignTokens.ts

@@ -33,7 +33,11 @@ function getColorTokenValue(variant, styles) {
     const [baseColorName, ...rest] = name.split('/')[1].split('-')
     const referenceName =
       baseColorName.replaceAll(/[a-z]/g, '').toLowerCase() +
-      (variants.includes('Default') ? '' : '-' + rest.join('-'))
+      (variants.includes('Default')
+        ? ''
+        : rest.length
+        ? '-' + rest.join('-')
+        : '')
     return referenceName
   } else {
     return relRGBToAbsRGB(variant.fills[0])
@@ -55,21 +59,23 @@ function parseThemes(items, styles) {
   items.forEach((item) => {
     if (!item.name.startsWith('_')) {
       const theme = {}
-      const themeName = item.name.toLowerCase()
+      const themeName = item.name.toLowerCase().replace(/ /g, '-')
 
       const colorGroups = item.children
       colorGroups.forEach((colorGroup) => {
-        const groupName = colorGroup.name.toLowerCase()
+        const groupName = colorGroup.name.toLowerCase().replace(/ /g, '-')
         const variants = colorGroup.children
         if (variants) {
           variants.forEach((variant) => {
-            const variantName = variant.name.toLowerCase()
+            const variantName = variant.name.toLowerCase().replace(/ /g, '-')
             const subVariants = variant.children
 
             if (variant.children) {
               if (subVariants) {
                 subVariants.forEach((subVariant) => {
-                  const subVariantName = subVariant.name.toLowerCase()
+                  const subVariantName = subVariant.name
+                    .toLowerCase()
+                    .replace(/ /g, '-')
                   const colorName = `${groupName}-${variantName}-${subVariantName}`
                   theme[colorName] = getColorTokenValue(subVariant, styles)
                 })
@@ -128,7 +134,7 @@ function parseShadows(items) {
   return shadows
 }
 
-function parseColors(items, styles) {
+function parseColors(items, styles: { name: string; description: string }[]) {
   const colors = {}
 
   for (const item of items) {
@@ -142,13 +148,15 @@ function parseColors(items, styles) {
       const style = styles[item.styles.fill]
       const { name, description } = style
       const variants = description.split(', ')
-      const [baseColorName, ...rest] = name.split('/')[1].split('-')
+      const pathParts = name.split('/')
+      const [baseColorName, ...rest] =
+        pathParts[pathParts.length > 1 ? pathParts.length - 1 : 0].split('-')
       const defaultOnly = rest.length === 0
       const colorShortName = ['Neutral', 'White'].includes(baseColorName)
         ? baseColorName === 'White'
           ? 'wht'
           : baseColorName.toLowerCase()
-        : baseColorName.replaceAll(/[a-z]/g, '').toLowerCase()
+        : baseColorName.replace(/[a-z]/g, '').toLowerCase()
       const colorName =
         colorShortName +
         (defaultOnly ? '' : '-' + rest.join('-')) +

src/docs/pages/guides/design-tokens.md

@@ -33,8 +33,12 @@ You have at least two options:
 
 Here is an example illustrating how to invoke the command mentioned above:
 
-```shell
-FIGMA_API_KEY=your-api-key npx @emdgroup-liquid/liquid apply-design-tokens --path "src/your/output/path" --figma-file "https://www.figma.com/file/<figma_id>/<file_name>?node-id=<node_id>"
+```bash
+# npm
+FIGMA_API_KEY=<your-api-key> npx @emdgroup-liquid/liquid apply-design-tokens --path "src/your/output/path" --figma-file "https://www.figma.com/file/<figma_id>/<file_name>?node-id=<node_id>"
+
+# yarn
+FIGMA_API_KEY=<your-api-key> yarn liquid apply-design-tokens --path "src/your/output/path" --figma-file "https://www.figma.com/file/<figma_id>/<file_name>?node-id=<node_id>"
 ```
 
 As you can see, the command is invoked with `npx`. It uses an environment variable `FIGMA_API_KEY`, which you will have to provide in order to be able to fetch data from the Figma API, and executes the `apply-design-tokens` task. It also uses two application parameters: `--figma-file`, which is the URL to your Figma token file, and `--path`, which is the output path that points to a directory in your project where you would like to save the generated CSS file containing the CSS custom props. The command will save the `design-tokens.json` file in the root of your project. When you `require` the [Tailwind CSS preset](https://tailwindcss.com/docs/presets) file from `@emdgroup-liquid/liquid/dist/css/tailwind-preset.js`, it will look for a token file in your project root.

src/docs/pages/introduction/getting-started.md

@@ -14,15 +14,15 @@ permalink: introduction/getting-started/
 
 Install with your package manager of choice: 
 
-```shell
+```bash
 npm install @emdgroup-liquid/liquid
 ```
 
-```shell
+```bash
 yarn add @emdgroup-liquid/liquid
 ```
 
-```shell
+```bash
 pnpm add @emdgroup-liquid/liquid
 ```
 

src/liquid/components/ld-progress/ld-progress.css

@@ -107,10 +107,11 @@
     radial-gradient(circle at right, var(--ld-progress-step-gradient));
   background-blend-mode: multiply; /* removes gap in steps dot */
   background-size: calc(
-      (100% - var(--ld-progress-steps-dot-width) - 1px) /
+      /* the 1px is a Safari HACK */
+        (100% - var(--ld-progress-steps-dot-width) - 1px) /
         var(--ld-progress-calc-valuemax)
     )
-    100%; /* the 1px is a Safari HACK */
+    100%;
   background-repeat: repeat-x;
   background-position: calc(var(--ld-progress-steps-dot-width) / 2) center;
   box-shadow: inset 0px 0px 0px calc(var(--ld-progress-has-overflow) * 99rem)
@@ -140,10 +141,13 @@
       max(
         -100%,
         calc(
-            (var(--ld-progress-calc-relative-progress) - 1) *
-              (100% - var(--ld-progress-steps-dot-width)) +
-              var(--ld-progress-steps-dot-width) + 1px
-          ) * -1 /* the 1px is a Safari HACK */
+          (
+              (var(--ld-progress-calc-relative-progress) - 1) *
+                (100% - var(--ld-progress-steps-dot-width)) +
+                /* the 1px is a Safari HACK */
+                var(--ld-progress-steps-dot-width) + 1px
+            ) * -1
+        )
       )
     );
   }

src/liquid/global/styles/tailwindPreset.ts

@@ -55,6 +55,11 @@ const createNestedThemeColorFromFlat = (
           return
         }
 
+        if (['#', '('].some((char) => colorTokenReference.includes(char))) {
+          currentColorObject[namePart]['DEFAULT'] = colorTokenReference
+          return
+        }
+
         const colorTokenReferenceParts = colorTokenReference.split('-')
 
         currentColorObject[namePart]['DEFAULT'] =