From e22d056c610235fa7e5311cbdd6f8748fd18d403 Mon Sep 17 00:00:00 2001
From: Anselm Marie <ansmarie@icloud.com>
Date: Wed, 18 Sep 2024 22:37:00 -0400
Subject: [PATCH] =?UTF-8?q?adding=20pokemon=20color=20types=20in=20theming?=
 =?UTF-8?q?=20=E2=80=A2=20fixing=20some=20theming=20and=20modal=20issues?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/imported/design-tokens.tokens.json    | 1794 +++++++++++++++++
 libs/ds-tokens/style-dictionary.config.ts     |    4 +-
 .../pokemon.ability.name.module.css           |   74 +-
 .../pokemon.ability.name.tsx                  |    5 +-
 .../pokemon.card/pokemon.card.module.css      |  216 +-
 .../assets/half.circle.svg                    |    4 +-
 .../half.circle.svg.module.css                |   12 +-
 .../half.circle.svg/half.circle.svg.tsx       |   20 +-
 .../pokemon.detail.modal.module.css           |   76 +-
 .../pokemon.detail.modal.view.tsx             |   33 +-
 .../ui/src/lib-base/styles/css/_variables.css |  112 +-
 .../src/lib-base/styles/css/global.module.css |    3 +
 .../src/lib-base/styles/css/global.module.ts  |    3 +
 libs/ui/src/lib-base/styles/ts/variables.ts   |  112 +-
 .../src/lib-base/ui/button/button.module.css  |    3 +-
 .../ui/tag/tag.item/tag.item.module.css       |   37 +-
 tsconfig.base.json                            |    3 +-
 17 files changed, 2208 insertions(+), 303 deletions(-)
 create mode 100644 libs/ui/src/lib-base/styles/css/global.module.css
 create mode 100644 libs/ui/src/lib-base/styles/css/global.module.ts

diff --git a/libs/ds-tokens/src/imported/design-tokens.tokens.json b/libs/ds-tokens/src/imported/design-tokens.tokens.json
index 38c9e6c..9bafc73 100644
--- a/libs/ds-tokens/src/imported/design-tokens.tokens.json
+++ b/libs/ds-tokens/src/imported/design-tokens.tokens.json
@@ -961,6 +961,36 @@
           }
         }
       },
+      "20": {
+        "type": "dimension",
+        "value": 20,
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:498:5391",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "25": {
+        "type": "dimension",
+        "value": 25,
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:498:5392",
+            "exportKey": "variables"
+          }
+        }
+      },
       "30": {
         "type": "dimension",
         "value": 30,
@@ -1021,6 +1051,1770 @@
           }
         }
       }
+    },
+    "type-grass": {
+      "100": {
+        "type": "color",
+        "value": "#b1e6bbff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5921",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#69b076ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5922",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#579d63ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5924",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#4a8554ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5926",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#295630ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5928",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#1a3c1fff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5930",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-bug": {
+      "100": {
+        "type": "color",
+        "value": "#e5f7b9ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5931",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#cfee85ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5932",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#b3d958ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5933",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#92bc2cff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5934",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#739522ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5935",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#4d680aff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5936",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-fire": {
+      "100": {
+        "type": "color",
+        "value": "#fbd5aeff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5938",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#f8c087ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5939",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#f5af67ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5940",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#e59440ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5941",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#d17311ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5942",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#a1570aff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:514:5943",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-water": {
+      "100": {
+        "type": "color",
+        "value": "#abd7ffff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3632",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#80bef6ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3633",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#539ddfff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3634",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#2e7dc3ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3635",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#2264a0ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3636",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#154d7eff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3637",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-normal": {
+      "100": {
+        "type": "color",
+        "value": "#e4eae2ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3638",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#d0d4cdff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3639",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#a0a29fff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3640",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#7b7b7bff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3641",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#595959ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3642",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#454343ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:515:3643",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-poison": {
+      "100": {
+        "type": "color",
+        "value": "#efb8ffff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3644",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#d087e5ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3645",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#b763cfff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3646",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#9538b0ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3647",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#7c2794ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3648",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#611677ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3649",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-electric": {
+      "100": {
+        "type": "color",
+        "value": "#fff2a9ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3650",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#fce97dff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3651",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#f2d94eff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3652",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#e1c736ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3653",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#c5ae2aff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3654",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#a5901fff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:516:3655",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-ground": {
+      "100": {
+        "type": "color",
+        "value": "#ffbf9fff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:517:3656",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#f19e75ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:517:3657",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#da7c4dff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:517:3658",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#bd501aff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:517:3659",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#8d3d15ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:517:3660",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#672f12ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:517:3661",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-fairy": {
+      "100": {
+        "type": "color",
+        "value": "#ffe5fdff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:519:3662",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#fcbef7ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:519:3663",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#ee90e6ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:519:3664",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#d25dc8ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:519:3665",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#b33da9ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:519:3666",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#96228cff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:519:3667",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-fighting": {
+      "100": {
+        "type": "color",
+        "value": "#fad3dbff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3668",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#f399abff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3669",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#e76a83ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3670",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#d3425fff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3671",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#a61935ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3672",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#840821ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3673",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-psychic": {
+      "100": {
+        "type": "color",
+        "value": "#d5b7c3ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3674",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#b68c9dff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3675",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#8d536bff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3676",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#673147ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3677",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#4f152cff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3678",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#3a041aff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3679",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-rock": {
+      "100": {
+        "type": "color",
+        "value": "#f7eed0ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3680",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#e7dcb3ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3681",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#c9bb8aff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3682",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#bbaa6eff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3683",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#9a8640ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3684",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#6f5c1cff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3685",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-ghost": {
+      "100": {
+        "type": "color",
+        "value": "#bbc4fcff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3686",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#8793dbff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3687",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#5f6dbcff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3688",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#3848a3ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3689",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#223184ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3690",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#101b58ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3691",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-ice": {
+      "100": {
+        "type": "color",
+        "value": "#b9e8eaff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3692",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#86d6d8ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3693",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#3fd0d4ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3694",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#20c3d0ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3695",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#15afbbff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3696",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#0c8c97ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3697",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-steel": {
+      "100": {
+        "type": "color",
+        "value": "#f0f0f0ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3698",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#dde2e4ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3699",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#c0c6c7ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3700",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#a8b0b2ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3701",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#898f91ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3702",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#666d6dff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3703",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-flying": {
+      "100": {
+        "type": "color",
+        "value": "#dde7fcff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3704",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#bbcdf2ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3705",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#8fa9deff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3706",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#6f8fcfff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3707",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#5172b6ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3708",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#39599cff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3709",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-dark": {
+      "100": {
+        "type": "color",
+        "value": "#c4c4c4ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3710",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#969696ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3711",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#727272ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3712",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#51545aff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3713",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#353b45ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3714",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#1b2027ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:525:3715",
+            "exportKey": "variables"
+          }
+        }
+      }
+    },
+    "type-dragon": {
+      "100": {
+        "type": "color",
+        "value": "#ddd7f5ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:535:3717",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "200": {
+        "type": "color",
+        "value": "#bbb0ebff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:535:3718",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "400": {
+        "type": "color",
+        "value": "#9988e0ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:535:3719",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "600": {
+        "type": "color",
+        "value": "#7761d6ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:535:3720",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "800": {
+        "type": "color",
+        "value": "#5539ccff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:535:3721",
+            "exportKey": "variables"
+          }
+        }
+      },
+      "900": {
+        "type": "color",
+        "value": "#2f1794ff",
+        "blendMode": "normal",
+        "extensions": {
+          "org.lukasoppermann.figmaDesignTokens": {
+            "mode": "Mode 1",
+            "collection": "Theme",
+            "scopes": [
+              "ALL_SCOPES"
+            ],
+            "variableId": "VariableID:535:3722",
+            "exportKey": "variables"
+          }
+        }
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/libs/ds-tokens/style-dictionary.config.ts b/libs/ds-tokens/style-dictionary.config.ts
index 32ae1d0..1324fd8 100644
--- a/libs/ds-tokens/style-dictionary.config.ts
+++ b/libs/ds-tokens/style-dictionary.config.ts
@@ -42,9 +42,9 @@ const config: Config | Config[] = {
     },
 
     js: {
-      transformGroup: 'js',
+      transformGroup: 'ts',
       transforms: ['custom/dimension-to-pixel', 'custom/name/native'],
-      buildPath: 'build/js/',
+      buildPath: 'build/ts/',
       files: [
         {
           destination: 'variables.ts',
diff --git a/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.module.css b/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.module.css
index 42b78fc..b4adbd4 100644
--- a/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.module.css
+++ b/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.module.css
@@ -28,7 +28,7 @@
 
 .atkWrapperDetailModal {
   color: var(--theme-netural-900);
-  margin-bottom: var(--theme-spacing-15);
+  margin-bottom: var(--theme-spacing-20);
   height: auto;
 }
 
@@ -63,196 +63,196 @@
 Grass Theme
 **/
 .grassThemeAtkLine {
-  background: greenyellow;
+  background: var(--theme-type-grass-400);
 }
 
 .grassThemeAtkCircle {
-  background: lightgreen;
+  background: var(--theme-type-grass-900);
 }
 
 /**
 Bug Theme
 **/
 .bugThemeAtkLine {
-  background: #91b53d;
+  background: var(--theme-type-bug-400);
 }
 
 .bugThemeAtkCircle {
-  background: #7aa515;
+  background: var(--theme-type-bug-900);
 }
 
 /**
 Dark Theme
 **/
 .darkThemeAtkLine {
-  background: #57565a;
+  background: var(--theme-type-dark-400);
 }
 
 .darkThemeAtkCircle {
-  background: #313034;
+  background: var(--theme-type-dark-900);
 }
 
 /**
 Dragon Theme
 **/
 .dragonThemeAtkLine {
-  background: #1663af;
+  background: var(--theme-type-dragon-400);
 }
 
 .dragonThemeAtkCircle {
-  background: #095199;
+  background: var(--theme-type-dragon-900);
 }
 
 /**
 Electric Theme
 **/
 .electricThemeAtkLine {
-  background: #cab74c;
+  background: var(--theme-type-electric-400);
 }
 
 .electricThemeAtkCircle {
-  background: #a69533;
+  background: var(--theme-type-electric-900);
 }
 
 /**
 Fairy Theme
 **/
 .fairyThemeAtkLine {
-  background: #784d74;
+  background: var(--theme-type-fairy-400);
 }
 
 .fairyThemeAtkCircle {
-  background: #ee90e6;
+  background: var(--theme-type-fairy-900);
 }
 
 /**
 Fighting Theme
 **/
 .fightingThemeAtkLine {
-  background: #cd5069;
+  background: var(--theme-type-fighting-400);
 }
 
 .fightingThemeAtkCircle {
-  background: #94273c;
+  background: var(--theme-type-fighting-900);
 }
 
 /**
 Fire Theme
 **/
 .fireThemeAtkLine {
-  background: #cc8e4c;
+  background: var(--theme-type-fire-400);
 }
 
 .fireThemeAtkCircle {
-  background: #9f682d;
+  background: var(--theme-type-fire-900);
 }
 
 /**
 Flying Theme
 **/
 .flyingThemeAtkLine {
-  background: #9eb0d2;
+  background: var(--theme-type-flying-400);
 }
 
 .flyingThemeAtkCircle {
-  background: #7186ab;
+  background: var(--theme-type-flying-900);
 }
 
 /**
 Ghost Theme
 **/
 .ghostThemeAtkLine {
-  background: #6671b4;
+  background: var(--theme-type-ghost-400);
 }
 
 .ghostThemeAtkCircle {
-  background: #434d85;
+  background: var(--theme-type-ghost-900);
 }
 
 /**
 Ground Theme
 **/
 .groundThemeAtkLine {
-  background: #b76e4a;
+  background: var(--theme-type-ground-400);
 }
 
 .groundThemeAtkCircle {
-  background: #9a5635;
+  background: var(--theme-type-ground-900);
 }
 
 /**
 Ice Theme
 **/
 .iceThemeAtkLine {
-  background: #76baaf;
+  background: var(--theme-type-ice-400);
 }
 
 .iceThemeAtkCircle {
-  background: #519288;
+  background: var(--theme-type-ice-900);
 }
 
 /**
 Normal Theme
 **/
 .normalThemeAtkLine {
-  background: #757774;
+  background: var(--theme-type-normal-400);
 }
 
 .normalThemeAtkCircle {
-  background: #6a6c69;
+  background: var(--theme-type-normal-900);
 }
 
 /**
 Poison Theme
 **/
 .poisonThemeAtkLine {
-  background: #a061b2;
+  background: var(--theme-type-poison-400);
 }
 
 .poisonThemeAtkCircle {
-  background: #763f86;
+  background: var(--theme-type-poison-900);
 }
 
 /**
 Psychic Theme
 **/
 .psychicThemeAtkLine {
-  background: #c67a77;
+  background: var(--theme-type-psychic-400);
 }
 
 .psychicThemeAtkCircle {
-  background: #864543;
+  background: var(--theme-type-psychic-900);
 }
 
 /**
 Rock Theme
 **/
 .rockThemeAtkLine {
-  background: #aba281;
+  background: var(--theme-type-rock-400);
 }
 
 .rockThemeAtkCircle {
-  background: #726a4c;
+  background: var(--theme-type-rock-900);
 }
 
 /**
 Steel Theme
 **/
 .steelThemeAtkLine {
-  background: #6fa7b3;
+  background: var(--theme-type-steel-400);
 }
 
 .steelThemeAtkCircle {
-  background: #325860;
+  background: var(--theme-type-steel-900);
 }
 
 /**
 Water Theme
 **/
 .waterThemeAtkLine {
-  background: #5d96c7;
+  background: var(--theme-type-water-400);
 }
 
 .waterThemeAtkCircle {
-  background: #305c83;
+  background: var(--theme-type-water-900);
 }
diff --git a/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx b/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx
index 40b50e9..cf7e0ce 100644
--- a/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx
+++ b/libs/features/src/lib/pokemon/components/pokemon.ability.name/pokemon.ability.name.tsx
@@ -69,10 +69,7 @@ const PokemonAbilityName = ({
           newStyles?.[`${getThemeClass}AtkCircle`]
         )}
       >
-        <UiIconPokeType
-          type={typeData?.types?.[0]?.type?.name}
-          size={displayInDetail ? '18' : '10'}
-        />
+        <UiIconPokeType type={typeData?.[0]?.type?.name} size={displayInDetail ? '18' : '10'} />
       </UiElementLayout>
       <UiTypography
         className={classNamesUtil(
diff --git a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css
index e338ec9..eca7ff9 100644
--- a/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css
+++ b/libs/features/src/lib/pokemon/pokemon.card/pokemon.card.module.css
@@ -126,412 +126,268 @@
 Grass Theme
 **/
 .grassThemeWrapper {
-  background: green;
+  background: var(--theme-type-grass-600);
 }
 
 .grassThemeContentCardWrapper {
-  background: darkgreen;
+  background: var(--theme-type-grass-800);
 }
 
 .grassThemeContentCardText {
   color: white;
 }
 
-.grassThemeAtkLine {
-  background: greenyellow;
-}
-
-.grassThemeAtkCircle {
-  background: lightgreen;
-}
-
 /**
 Bug Theme
 **/
 .bugThemeWrapper {
-  background: #92bc2c;
+  background: var(--theme-type-bug-600);
 }
 
 .bugThemeContentCardWrapper {
-  background: #759823;
+  background: var(--theme-type-bug-800);
 }
 
 .bugThemeContentCardText {
   color: white;
 }
 
-.bugThemeAtkLine {
-  background: #91b53d;
-}
-
-.bugThemeAtkCircle {
-  background: #7aa515;
-}
-
 /**
 Dark Theme
 **/
 .darkThemeWrapper {
-  background: #595761;
+  background: var(--theme-type-dark-600);
 }
 
 .darkThemeContentCardWrapper {
-  background: #38363d;
+  background: var(--theme-type-dark-800);
 }
 
 .darkThemeContentCardText {
   color: white;
 }
 
-.darkThemeAtkLine {
-  background: #57565a;
-}
-
-.darkThemeAtkCircle {
-  background: #313034;
-}
-
 /**
 Dragon Theme
 **/
 .dragonThemeWrapper {
-  background: #0c69c8;
+  background: var(--theme-type-dragon-600);
 }
 
 .dragonThemeContentCardWrapper {
-  background: #0958a7;
+  background: var(--theme-type-dragon-800);
 }
 
 .dragonThemeContentCardText {
   color: white;
 }
 
-.dragonThemeAtkLine {
-  background: #1663af;
-}
-
-.dragonThemeAtkCircle {
-  background: #095199;
-}
-
 /**
 Electric Theme
 **/
 .electricThemeWrapper {
-  background: #f2d94e;
+  background: var(--theme-type-electric-600);
 }
 
 .electricThemeContentCardWrapper {
-  background: #cab642;
+  background: var(--theme-type-electric-800);
 }
 
 .electricThemeContentCardText {
   color: white;
 }
 
-.electricThemeAtkLine {
-  background: #cab74c;
-}
-
-.electricThemeAtkCircle {
-  background: #a69533;
-}
-
 /**
 Fairy Theme
 **/
 .fairyThemeWrapper {
-  background: #ee90e6;
+  background: var(--theme-type-fairy-600);
 }
 
 .fairyThemeContentCardWrapper {
-  background: #bc71b6;
+  background: var(--theme-type-fairy-800);
 }
 
 .fairyThemeContentCardText {
   color: white;
 }
 
-.fairyThemeAtkLine {
-  background: #784d74;
-}
-
-.fairyThemeAtkCircle {
-  background: #ee90e6;
-}
-
 /**
 Fighting Theme
 **/
 .fightingThemeWrapper {
-  background: #d3425f;
+  background: var(--theme-type-fighting-600);
 }
 
 .fightingThemeContentCardWrapper {
-  background: #b83f57;
+  background: var(--theme-type-fighting-800);
 }
 
 .fightingThemeContentCardText {
   color: white;
 }
 
-.fightingThemeAtkLine {
-  background: #cd5069;
-}
-
-.fightingThemeAtkCircle {
-  background: #94273c;
-}
-
 /**
 Fire Theme
 **/
 .fireThemeWrapper {
-  background: #fba54c;
+  background: var(--theme-type-fire-600);
 }
 
 .fireThemeContentCardWrapper {
-  background: #ca863e;
+  background: var(--theme-type-fire-800);
 }
 
 .fireThemeContentCardText {
   color: white;
 }
 
-.fireThemeAtkLine {
-  background: #cc8e4c;
-}
-
-.fireThemeAtkCircle {
-  background: #9f682d;
-}
-
 /**
 Flying Theme
 **/
 .flyingThemeWrapper {
-  background: #a1bbec;
+  background: var(--theme-type-flying-600);
 }
 
 .flyingThemeContentCardWrapper {
-  background: #7d92b9;
+  background: var(--theme-type-flying-800);
 }
 
 .flyingThemeContentCardText {
   color: white;
 }
 
-.flyingThemeAtkLine {
-  background: #9eb0d2;
-}
-
-.flyingThemeAtkCircle {
-  background: #7186ab;
-}
-
 /**
 Ghost Theme
 **/
 .ghostThemeWrapper {
-  background: #5f6dbc;
+  background: var(--theme-type-ghost-600);
 }
 
 .ghostThemeContentCardWrapper {
-  background: #47528e;
+  background: var(--theme-type-ghost-800);
 }
 
 .ghostThemeContentCardText {
   color: white;
 }
 
-.ghostThemeAtkLine {
-  background: #6671b4;
-}
-
-.ghostThemeAtkCircle {
-  background: #434d85;
-}
-
 /**
 Ground Theme
 **/
 .groundThemeWrapper {
-  background: #da7c4d;
+  background: var(--theme-type-ground-600);
 }
 
 .groundThemeContentCardWrapper {
-  background: #b3663f;
+  background: var(--theme-type-ground-800);
 }
 
 .groundThemeContentCardText {
   color: white;
 }
 
-.groundThemeAtkLine {
-  background: #b76e4a;
-}
-
-.groundThemeAtkCircle {
-  background: #9a5635;
-}
-
 /**
 Ice Theme
 **/
 .iceThemeWrapper {
-  background: #75d0c1;
+  background: var(--theme-type-ice-600);
 }
 
 .iceThemeContentCardWrapper {
-  background: #5da89c;
+  background: var(--theme-type-ice-800);
 }
 
 .iceThemeContentCardText {
   color: white;
 }
 
-.iceThemeAtkLine {
-  background: #76baaf;
-}
-
-.iceThemeAtkCircle {
-  background: #519288;
-}
-
 /**
 Normal Theme
 **/
 .normalThemeWrapper {
-  background: #a0a29f;
+  background: var(--theme-type-normal-600);
 }
 
 .normalThemeContentCardWrapper {
-  background: #949494;
+  background: var(--theme-type-normal-800);
 }
 
 .normalThemeContentCardText {
   color: white;
 }
 
-.normalThemeAtkLine {
-  background: #757774;
-}
-
-.normalThemeAtkCircle {
-  background: #6a6c69;
-}
-
 /**
 Poison Theme
 **/
 .poisonThemeWrapper {
-  background: #b763cf;
+  background: var(--theme-type-poison-600);
 }
 
 .poisonThemeContentCardWrapper {
-  background: #9751aa;
+  background: var(--theme-type-poison-800);
 }
 
 .poisonThemeContentCardText {
   color: white;
 }
 
-.poisonThemeAtkLine {
-  background: #a061b2;
-}
-
-.poisonThemeAtkCircle {
-  background: #763f86;
-}
-
 /**
 Psychic Theme
 **/
 .psychicThemeWrapper {
-  background: #fa8581;
+  background: var(--theme-type-psychic-600);
 }
 
 .psychicThemeContentCardWrapper {
-  background: #c76a67;
+  background: var(--theme-type-psychic-800);
 }
 
 .psychicThemeContentCardText {
   color: white;
 }
 
-.psychicThemeAtkLine {
-  background: #c67a77;
-}
-
-.psychicThemeAtkCircle {
-  background: #864543;
-}
-
 /**
 Rock Theme
 **/
 .rockThemeWrapper {
-  background: #c9bb8a;
+  background: var(--theme-type-rock-600);
 }
 
 .rockThemeContentCardWrapper {
-  background: #9d926b;
+  background: var(--theme-type-rock-800);
 }
 
 .rockThemeContentCardText {
   color: white;
 }
 
-.rockThemeAtkLine {
-  background: #aba281;
-}
-
-.rockThemeAtkCircle {
-  background: #726a4c;
-}
-
 /**
 Steel Theme
 **/
 .steelThemeWrapper {
-  background: #5695a3;
+  background: var(--theme-type-steel-600);
 }
 
 .steelThemeContentCardWrapper {
-  background: #345b64;
+  background: var(--theme-type-steel-800);
 }
 
 .steelThemeContentCardText {
   color: white;
 }
 
-.steelThemeAtkLine {
-  background: #6fa7b3;
-}
-
-.steelThemeAtkCircle {
-  background: #325860;
-}
-
 /**
 Water Theme
 **/
 .waterThemeWrapper {
-  background: #539ddf;
+  background: var(--theme-type-water-600);
 }
 
 .waterThemeContentCardWrapper {
-  background: #4381b7;
+  background: var(--theme-type-water-800);
 }
 
 .waterThemeContentCardText {
   color: white;
 }
-
-.waterThemeAtkLine {
-  background: #5d96c7;
-}
-
-.waterThemeAtkCircle {
-  background: #305c83;
-}
diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/assets/half.circle.svg b/libs/features/src/lib/pokemon/pokemon.detail.modal/assets/half.circle.svg
index d00572f..d35a6bf 100644
--- a/libs/features/src/lib/pokemon/pokemon.detail.modal/assets/half.circle.svg
+++ b/libs/features/src/lib/pokemon/pokemon.detail.modal/assets/half.circle.svg
@@ -1,3 +1,3 @@
-<svg width="550" height="60" viewBox="0 0 550 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 60H550C505.528 24.7899 399.153 0 275 0C150.847 0 44.4722 24.7899 0 60Z" fill="white"/>
+<svg width="600" height="60" viewBox="0 0 600 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 60H600C551.485 24.7899 435.44 0 300 0C164.56 0 48.5151 24.7899 0 60Z" fill="white"/>
 </svg>
diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.module.css b/libs/features/src/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.module.css
index a3b05b8..38065a6 100644
--- a/libs/features/src/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.module.css
+++ b/libs/features/src/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.module.css
@@ -1,4 +1,12 @@
 .contentCurve {
-  margin-top: -60px;
-  text-align: center;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin-inline: auto;
+  background-image: url('../../assets/half.circle.svg');
+  background-position: center;
+  background-repeat: no-repeat;
+  width: 100%;
+  height: 60px;
 }
diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.tsx b/libs/features/src/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.tsx
index 31aecd6..cefc811 100644
--- a/libs/features/src/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.tsx
+++ b/libs/features/src/lib/pokemon/pokemon.detail.modal/components/half.circle.svg/half.circle.svg.tsx
@@ -1,3 +1,4 @@
+import { UiElementLayout } from '@pokemon-pet-shop/ui';
 import { ReactSVG } from 'react-svg';
 
 import halfCircle from '../../assets/half.circle.svg';
@@ -6,15 +7,16 @@ import { styles } from './half.circle.svg.module';
 
 const halfCircleSVG = () => {
   return (
-    <ReactSVG
-      src={halfCircle}
-      // title={`${type} Icon`}
-      beforeInjection={(svg) => {
-        // svg.setAttribute('width', '100%');
-        // svg.setAttribute('height', size);
-      }}
-      className={styles.contentCurve}
-    />
+    <UiElementLayout className={styles.contentCurve} />
+    // <ReactSVG
+    //   src={halfCircle}
+    //   // title={`${type} Icon`}
+    //   beforeInjection={(svg) => {
+    //     // svg.setAttribute('width', '100%');
+    //     // svg.setAttribute('height', size);
+    //   }}
+    //   className={styles.contentCurve}
+    // />
   );
 };
 
diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.module.css b/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.module.css
index d88913a..ffd2d10 100644
--- a/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.module.css
+++ b/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.module.css
@@ -15,21 +15,17 @@
 }
 
 .imageContainer {
-  height: 450px;
   z-index: 0;
   border-top-left-radius: var(--theme-radius-8);
   border-top-right-radius: var(--theme-radius-8);
+  position: relative;
 }
 
 .image {
-  height: 450px;
+  height: 100%;
   margin: 0 auto;
 }
 
-.contentCurve {
-  margin-top: -60px;
-}
-
 .dropdownHeadline {
   display: flex;
   justify-content: space-between;
@@ -45,7 +41,7 @@
 }
 
 .contentCardWrapper {
-  margin-top: -25px;
+  margin-top: -45px;
   margin-left: var(--theme-spacing-30);
   margin-right: var(--theme-spacing-30);
 }
@@ -53,27 +49,31 @@
 .cardSubHeadline,
 .cardHeadline {
   text-align: center;
-  margin-bottom: var(--theme-spacing-15);
+  margin-bottom: var(--theme-spacing-20);
 }
 
 .cardSubHeadline {
-  margin-bottom: var(--theme-spacing-5);
+  margin-bottom: var(--theme-spacing-10);
 }
 
 .cardDescription {
   font-size: var(--theme-font-16);
-  margin-bottom: var(--theme-spacing-30);
+  margin-bottom: var(--theme-spacing-25);
 }
 
 .weightHeightWrapper {
   display: flex;
-  gap: var(--theme-spacing-35);
-  margin-bottom: var(--theme-spacing-30);
+  flex-direction: column;
+  margin-bottom: var(--theme-spacing-25);
 }
 
 .weight,
 .height {
-  font-size: var(--theme-font-16);
+  font-size: var(--theme-font-18);
+}
+
+.weight {
+  margin-bottom: var(--theme-spacing-10);
 }
 
 .tagWrapper {
@@ -81,78 +81,90 @@
 }
 
 .btnWrapper {
-  margin-top: var(--theme-spacing-30);
+  margin-top: var(--theme-spacing-35);
   text-align: center;
 }
 
 .bugThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-bug-600);
 }
 
 .darkThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-dark-600);
 }
 
 .dragonThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-dragon-600);
 }
 
 .electricThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-electric-600);
 }
 
 .fairyThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-fairy-600);
 }
 
 .fightingThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-fighting-600);
 }
 
 .fireThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-fire-600);
 }
 
 .flyingThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-flying-600);
 }
 
 .ghostThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-ghost-600);
 }
 
 .grassThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-grass-600);
 }
 
 .groundThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-ground-600);
 }
 
 .iceThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-ice-600);
 }
 
 .normalThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-normal-600);
 }
 
 .poisonThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-poison-600);
 }
 
 .psychicThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-psychic-600);
 }
 
 .rockThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-rock-600);
 }
 
 .steelThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-steel-600);
 }
 
 .waterThemeImageBg {
-  background-color: green;
+  background: var(--theme-type-water-600);
+}
+
+@media only screen and (min-width: 630px) {
+  .weightHeightWrapper {
+    display: flex;
+    gap: var(--theme-spacing-35);
+    flex-direction: row;
+  }
+
+  .weight {
+    margin-bottom: 0;
+  }
 }
diff --git a/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx b/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx
index 56c85b3..eedb80f 100644
--- a/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx
+++ b/libs/features/src/lib/pokemon/pokemon.detail.modal/pokemon.detail.modal.view.tsx
@@ -13,6 +13,7 @@ import {
   UiTagItem,
   ButtonSizeEnum,
 } from '@pokemon-pet-shop/ui';
+import { globalStyles } from '@pokemon-pet-shop/ui/styles/global';
 import { classNamesUtil } from '@pokemon-pet-shop/utils';
 
 import { UiPokemonAbilityName } from '../components/pokemon.ability.name';
@@ -79,32 +80,40 @@ const PokemonDetailModal = (): ReactElement => {
               <UiTagWrapper className={styles.tagWrapper}>
                 {(modalData?.types || []).map(
                   (typeObj: PokemonDetailTypesObj, i: number): ReactElement | null => {
-                    return <UiTagItem key={i} name={typeObj?.type?.name} />;
+                    return (
+                      <UiTagItem key={i} name={typeObj?.type?.name} colorTheme={getThemeClass} />
+                    );
                   }
                 )}
               </UiTagWrapper>
             ) : null}
 
             <UiTypography
-              className={classNamesUtil(newStyles.cardDescription)}
+              className={newStyles.cardDescription}
               typographyType={TypographyTypeEnum.P}
             >
               {speciesData?.flavor_text_entries?.flavor_text}
             </UiTypography>
 
             <UiElementLayout className={styles.weightHeightWrapper}>
-              <UiTypography
-                className={classNamesUtil(newStyles.weight)}
-                typographyType={TypographyTypeEnum.P}
-              >
-                Weight: {`${onConvertKgToLbs?.lbs} ${onConvertKgToLbs?.kg}`}
+              <UiTypography className={newStyles.weight} typographyType={TypographyTypeEnum.P}>
+                <UiTypography
+                  typographyType={TypographyTypeEnum.SPAN}
+                  className={globalStyles.fontBold}
+                >
+                  Weight:
+                </UiTypography>{' '}
+                {`${onConvertKgToLbs?.lbs} ${onConvertKgToLbs?.kg}`}
               </UiTypography>
 
-              <UiTypography
-                className={classNamesUtil(newStyles.height)}
-                typographyType={TypographyTypeEnum.P}
-              >
-                Height: {onConvertMetersToFtIn?.ft ? `${onConvertMetersToFtIn?.ft} ` : null}
+              <UiTypography className={newStyles.height} typographyType={TypographyTypeEnum.P}>
+                <UiTypography
+                  typographyType={TypographyTypeEnum.SPAN}
+                  className={globalStyles.fontBold}
+                >
+                  Height:
+                </UiTypography>{' '}
+                {onConvertMetersToFtIn?.ft ? `${onConvertMetersToFtIn?.ft} ` : null}
                 {onConvertMetersToFtIn?.in} {onConvertMetersToFtIn?.m}
               </UiTypography>
             </UiElementLayout>
diff --git a/libs/ui/src/lib-base/styles/css/_variables.css b/libs/ui/src/lib-base/styles/css/_variables.css
index 879e566..be6ed16 100644
--- a/libs/ui/src/lib-base/styles/css/_variables.css
+++ b/libs/ui/src/lib-base/styles/css/_variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 17:53:32 GMT
+ * Generated on Thu, 19 Sep 2024 01:49:53 GMT
  */
 
 :root {
@@ -64,8 +64,118 @@
   --theme-spacing-5: 5px;
   --theme-spacing-10: 10px;
   --theme-spacing-15: 15px;
+  --theme-spacing-20: 20px;
+  --theme-spacing-25: 25px;
   --theme-spacing-30: 30px;
   --theme-spacing-35: 35px;
   --theme-spacing-40: 40px;
   --theme-spacing-45: 45px;
+  --theme-type-grass-100: #b1e6bbff;
+  --theme-type-grass-200: #69b076ff;
+  --theme-type-grass-400: #579d63ff;
+  --theme-type-grass-600: #4a8554ff;
+  --theme-type-grass-800: #295630ff;
+  --theme-type-grass-900: #1a3c1fff;
+  --theme-type-bug-100: #e5f7b9ff;
+  --theme-type-bug-200: #cfee85ff;
+  --theme-type-bug-400: #b3d958ff;
+  --theme-type-bug-600: #92bc2cff;
+  --theme-type-bug-800: #739522ff;
+  --theme-type-bug-900: #4d680aff;
+  --theme-type-fire-100: #fbd5aeff;
+  --theme-type-fire-200: #f8c087ff;
+  --theme-type-fire-400: #f5af67ff;
+  --theme-type-fire-600: #e59440ff;
+  --theme-type-fire-800: #d17311ff;
+  --theme-type-fire-900: #a1570aff;
+  --theme-type-water-100: #abd7ffff;
+  --theme-type-water-200: #80bef6ff;
+  --theme-type-water-400: #539ddfff;
+  --theme-type-water-600: #2e7dc3ff;
+  --theme-type-water-800: #2264a0ff;
+  --theme-type-water-900: #154d7eff;
+  --theme-type-normal-100: #e4eae2ff;
+  --theme-type-normal-200: #d0d4cdff;
+  --theme-type-normal-400: #a0a29fff;
+  --theme-type-normal-600: #7b7b7bff;
+  --theme-type-normal-800: #595959ff;
+  --theme-type-normal-900: #454343ff;
+  --theme-type-poison-100: #efb8ffff;
+  --theme-type-poison-200: #d087e5ff;
+  --theme-type-poison-400: #b763cfff;
+  --theme-type-poison-600: #9538b0ff;
+  --theme-type-poison-800: #7c2794ff;
+  --theme-type-poison-900: #611677ff;
+  --theme-type-electric-100: #fff2a9ff;
+  --theme-type-electric-200: #fce97dff;
+  --theme-type-electric-400: #f2d94eff;
+  --theme-type-electric-600: #e1c736ff;
+  --theme-type-electric-800: #c5ae2aff;
+  --theme-type-electric-900: #a5901fff;
+  --theme-type-ground-100: #ffbf9fff;
+  --theme-type-ground-200: #f19e75ff;
+  --theme-type-ground-400: #da7c4dff;
+  --theme-type-ground-600: #bd501aff;
+  --theme-type-ground-800: #8d3d15ff;
+  --theme-type-ground-900: #672f12ff;
+  --theme-type-fairy-100: #ffe5fdff;
+  --theme-type-fairy-200: #fcbef7ff;
+  --theme-type-fairy-400: #ee90e6ff;
+  --theme-type-fairy-600: #d25dc8ff;
+  --theme-type-fairy-800: #b33da9ff;
+  --theme-type-fairy-900: #96228cff;
+  --theme-type-fighting-100: #fad3dbff;
+  --theme-type-fighting-200: #f399abff;
+  --theme-type-fighting-400: #e76a83ff;
+  --theme-type-fighting-600: #d3425fff;
+  --theme-type-fighting-800: #a61935ff;
+  --theme-type-fighting-900: #840821ff;
+  --theme-type-psychic-100: #d5b7c3ff;
+  --theme-type-psychic-200: #b68c9dff;
+  --theme-type-psychic-400: #8d536bff;
+  --theme-type-psychic-600: #673147ff;
+  --theme-type-psychic-800: #4f152cff;
+  --theme-type-psychic-900: #3a041aff;
+  --theme-type-rock-100: #f7eed0ff;
+  --theme-type-rock-200: #e7dcb3ff;
+  --theme-type-rock-400: #c9bb8aff;
+  --theme-type-rock-600: #bbaa6eff;
+  --theme-type-rock-800: #9a8640ff;
+  --theme-type-rock-900: #6f5c1cff;
+  --theme-type-ghost-100: #bbc4fcff;
+  --theme-type-ghost-200: #8793dbff;
+  --theme-type-ghost-400: #5f6dbcff;
+  --theme-type-ghost-600: #3848a3ff;
+  --theme-type-ghost-800: #223184ff;
+  --theme-type-ghost-900: #101b58ff;
+  --theme-type-ice-100: #b9e8eaff;
+  --theme-type-ice-200: #86d6d8ff;
+  --theme-type-ice-400: #3fd0d4ff;
+  --theme-type-ice-600: #20c3d0ff;
+  --theme-type-ice-800: #15afbbff;
+  --theme-type-ice-900: #0c8c97ff;
+  --theme-type-steel-100: #f0f0f0ff;
+  --theme-type-steel-200: #dde2e4ff;
+  --theme-type-steel-400: #c0c6c7ff;
+  --theme-type-steel-600: #a8b0b2ff;
+  --theme-type-steel-800: #898f91ff;
+  --theme-type-steel-900: #666d6dff;
+  --theme-type-flying-100: #dde7fcff;
+  --theme-type-flying-200: #bbcdf2ff;
+  --theme-type-flying-400: #8fa9deff;
+  --theme-type-flying-600: #6f8fcfff;
+  --theme-type-flying-800: #5172b6ff;
+  --theme-type-flying-900: #39599cff;
+  --theme-type-dark-100: #c4c4c4ff;
+  --theme-type-dark-200: #969696ff;
+  --theme-type-dark-400: #727272ff;
+  --theme-type-dark-600: #51545aff;
+  --theme-type-dark-800: #353b45ff;
+  --theme-type-dark-900: #1b2027ff;
+  --theme-type-dragon-100: #ddd7f5ff;
+  --theme-type-dragon-200: #bbb0ebff;
+  --theme-type-dragon-400: #9988e0ff;
+  --theme-type-dragon-600: #7761d6ff;
+  --theme-type-dragon-800: #5539ccff;
+  --theme-type-dragon-900: #2f1794ff;
 }
diff --git a/libs/ui/src/lib-base/styles/css/global.module.css b/libs/ui/src/lib-base/styles/css/global.module.css
new file mode 100644
index 0000000..1fbe91d
--- /dev/null
+++ b/libs/ui/src/lib-base/styles/css/global.module.css
@@ -0,0 +1,3 @@
+.fontBold {
+  font-weight: bold;
+}
diff --git a/libs/ui/src/lib-base/styles/css/global.module.ts b/libs/ui/src/lib-base/styles/css/global.module.ts
new file mode 100644
index 0000000..d0ee05f
--- /dev/null
+++ b/libs/ui/src/lib-base/styles/css/global.module.ts
@@ -0,0 +1,3 @@
+import globalStyles from './global.module.css';
+
+export { globalStyles };
diff --git a/libs/ui/src/lib-base/styles/ts/variables.ts b/libs/ui/src/lib-base/styles/ts/variables.ts
index adce397..601e290 100644
--- a/libs/ui/src/lib-base/styles/ts/variables.ts
+++ b/libs/ui/src/lib-base/styles/ts/variables.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 16 Sep 2024 17:53:32 GMT
+ * Generated on Thu, 19 Sep 2024 01:49:53 GMT
  */
 
 export const THEME_NETURAL_100 = '#ffffffff';
@@ -63,7 +63,117 @@ export const THEME_SPACING_2 = '2px';
 export const THEME_SPACING_5 = '5px';
 export const THEME_SPACING_10 = '10px';
 export const THEME_SPACING_15 = '15px';
+export const THEME_SPACING_20 = '20px';
+export const THEME_SPACING_25 = '25px';
 export const THEME_SPACING_30 = '30px';
 export const THEME_SPACING_35 = '35px';
 export const THEME_SPACING_40 = '40px';
 export const THEME_SPACING_45 = '45px';
+export const THEME_TYPE_GRASS_100 = '#b1e6bbff';
+export const THEME_TYPE_GRASS_200 = '#69b076ff';
+export const THEME_TYPE_GRASS_400 = '#579d63ff';
+export const THEME_TYPE_GRASS_600 = '#4a8554ff';
+export const THEME_TYPE_GRASS_800 = '#295630ff';
+export const THEME_TYPE_GRASS_900 = '#1a3c1fff';
+export const THEME_TYPE_BUG_100 = '#e5f7b9ff';
+export const THEME_TYPE_BUG_200 = '#cfee85ff';
+export const THEME_TYPE_BUG_400 = '#b3d958ff';
+export const THEME_TYPE_BUG_600 = '#92bc2cff';
+export const THEME_TYPE_BUG_800 = '#739522ff';
+export const THEME_TYPE_BUG_900 = '#4d680aff';
+export const THEME_TYPE_FIRE_100 = '#fbd5aeff';
+export const THEME_TYPE_FIRE_200 = '#f8c087ff';
+export const THEME_TYPE_FIRE_400 = '#f5af67ff';
+export const THEME_TYPE_FIRE_600 = '#e59440ff';
+export const THEME_TYPE_FIRE_800 = '#d17311ff';
+export const THEME_TYPE_FIRE_900 = '#a1570aff';
+export const THEME_TYPE_WATER_100 = '#abd7ffff';
+export const THEME_TYPE_WATER_200 = '#80bef6ff';
+export const THEME_TYPE_WATER_400 = '#539ddfff';
+export const THEME_TYPE_WATER_600 = '#2e7dc3ff';
+export const THEME_TYPE_WATER_800 = '#2264a0ff';
+export const THEME_TYPE_WATER_900 = '#154d7eff';
+export const THEME_TYPE_NORMAL_100 = '#e4eae2ff';
+export const THEME_TYPE_NORMAL_200 = '#d0d4cdff';
+export const THEME_TYPE_NORMAL_400 = '#a0a29fff';
+export const THEME_TYPE_NORMAL_600 = '#7b7b7bff';
+export const THEME_TYPE_NORMAL_800 = '#595959ff';
+export const THEME_TYPE_NORMAL_900 = '#454343ff';
+export const THEME_TYPE_POISON_100 = '#efb8ffff';
+export const THEME_TYPE_POISON_200 = '#d087e5ff';
+export const THEME_TYPE_POISON_400 = '#b763cfff';
+export const THEME_TYPE_POISON_600 = '#9538b0ff';
+export const THEME_TYPE_POISON_800 = '#7c2794ff';
+export const THEME_TYPE_POISON_900 = '#611677ff';
+export const THEME_TYPE_ELECTRIC_100 = '#fff2a9ff';
+export const THEME_TYPE_ELECTRIC_200 = '#fce97dff';
+export const THEME_TYPE_ELECTRIC_400 = '#f2d94eff';
+export const THEME_TYPE_ELECTRIC_600 = '#e1c736ff';
+export const THEME_TYPE_ELECTRIC_800 = '#c5ae2aff';
+export const THEME_TYPE_ELECTRIC_900 = '#a5901fff';
+export const THEME_TYPE_GROUND_100 = '#ffbf9fff';
+export const THEME_TYPE_GROUND_200 = '#f19e75ff';
+export const THEME_TYPE_GROUND_400 = '#da7c4dff';
+export const THEME_TYPE_GROUND_600 = '#bd501aff';
+export const THEME_TYPE_GROUND_800 = '#8d3d15ff';
+export const THEME_TYPE_GROUND_900 = '#672f12ff';
+export const THEME_TYPE_FAIRY_100 = '#ffe5fdff';
+export const THEME_TYPE_FAIRY_200 = '#fcbef7ff';
+export const THEME_TYPE_FAIRY_400 = '#ee90e6ff';
+export const THEME_TYPE_FAIRY_600 = '#d25dc8ff';
+export const THEME_TYPE_FAIRY_800 = '#b33da9ff';
+export const THEME_TYPE_FAIRY_900 = '#96228cff';
+export const THEME_TYPE_FIGHTING_100 = '#fad3dbff';
+export const THEME_TYPE_FIGHTING_200 = '#f399abff';
+export const THEME_TYPE_FIGHTING_400 = '#e76a83ff';
+export const THEME_TYPE_FIGHTING_600 = '#d3425fff';
+export const THEME_TYPE_FIGHTING_800 = '#a61935ff';
+export const THEME_TYPE_FIGHTING_900 = '#840821ff';
+export const THEME_TYPE_PSYCHIC_100 = '#d5b7c3ff';
+export const THEME_TYPE_PSYCHIC_200 = '#b68c9dff';
+export const THEME_TYPE_PSYCHIC_400 = '#8d536bff';
+export const THEME_TYPE_PSYCHIC_600 = '#673147ff';
+export const THEME_TYPE_PSYCHIC_800 = '#4f152cff';
+export const THEME_TYPE_PSYCHIC_900 = '#3a041aff';
+export const THEME_TYPE_ROCK_100 = '#f7eed0ff';
+export const THEME_TYPE_ROCK_200 = '#e7dcb3ff';
+export const THEME_TYPE_ROCK_400 = '#c9bb8aff';
+export const THEME_TYPE_ROCK_600 = '#bbaa6eff';
+export const THEME_TYPE_ROCK_800 = '#9a8640ff';
+export const THEME_TYPE_ROCK_900 = '#6f5c1cff';
+export const THEME_TYPE_GHOST_100 = '#bbc4fcff';
+export const THEME_TYPE_GHOST_200 = '#8793dbff';
+export const THEME_TYPE_GHOST_400 = '#5f6dbcff';
+export const THEME_TYPE_GHOST_600 = '#3848a3ff';
+export const THEME_TYPE_GHOST_800 = '#223184ff';
+export const THEME_TYPE_GHOST_900 = '#101b58ff';
+export const THEME_TYPE_ICE_100 = '#b9e8eaff';
+export const THEME_TYPE_ICE_200 = '#86d6d8ff';
+export const THEME_TYPE_ICE_400 = '#3fd0d4ff';
+export const THEME_TYPE_ICE_600 = '#20c3d0ff';
+export const THEME_TYPE_ICE_800 = '#15afbbff';
+export const THEME_TYPE_ICE_900 = '#0c8c97ff';
+export const THEME_TYPE_STEEL_100 = '#f0f0f0ff';
+export const THEME_TYPE_STEEL_200 = '#dde2e4ff';
+export const THEME_TYPE_STEEL_400 = '#c0c6c7ff';
+export const THEME_TYPE_STEEL_600 = '#a8b0b2ff';
+export const THEME_TYPE_STEEL_800 = '#898f91ff';
+export const THEME_TYPE_STEEL_900 = '#666d6dff';
+export const THEME_TYPE_FLYING_100 = '#dde7fcff';
+export const THEME_TYPE_FLYING_200 = '#bbcdf2ff';
+export const THEME_TYPE_FLYING_400 = '#8fa9deff';
+export const THEME_TYPE_FLYING_600 = '#6f8fcfff';
+export const THEME_TYPE_FLYING_800 = '#5172b6ff';
+export const THEME_TYPE_FLYING_900 = '#39599cff';
+export const THEME_TYPE_DARK_100 = '#c4c4c4ff';
+export const THEME_TYPE_DARK_200 = '#969696ff';
+export const THEME_TYPE_DARK_400 = '#727272ff';
+export const THEME_TYPE_DARK_600 = '#51545aff';
+export const THEME_TYPE_DARK_800 = '#353b45ff';
+export const THEME_TYPE_DARK_900 = '#1b2027ff';
+export const THEME_TYPE_DRAGON_100 = '#ddd7f5ff';
+export const THEME_TYPE_DRAGON_200 = '#bbb0ebff';
+export const THEME_TYPE_DRAGON_400 = '#9988e0ff';
+export const THEME_TYPE_DRAGON_600 = '#7761d6ff';
+export const THEME_TYPE_DRAGON_800 = '#5539ccff';
+export const THEME_TYPE_DRAGON_900 = '#2f1794ff';
diff --git a/libs/ui/src/lib-base/ui/button/button.module.css b/libs/ui/src/lib-base/ui/button/button.module.css
index bc91b80..5ff6ef6 100644
--- a/libs/ui/src/lib-base/ui/button/button.module.css
+++ b/libs/ui/src/lib-base/ui/button/button.module.css
@@ -22,6 +22,7 @@
 }
 
 .large {
+  min-width: 230px;
   padding: var(--theme-spacing-15) var(--theme-spacing-30);
-  font-size: var(--theme-font-18);
+  font-size: var(--theme-font-24);
 }
diff --git a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.css b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.css
index b322d1d..c3f0499 100644
--- a/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.css
+++ b/libs/ui/src/lib-base/ui/tag/tag.item/tag.item.module.css
@@ -4,74 +4,73 @@
 }
 
 .bugThemeBg {
-  background-color: green;
+  background: var(--theme-type-bug-400);
 }
 
 .darkThemeBg {
-  background-color: green;
+  background: var(--theme-type-dark-400);
 }
 
 .dragonThemeBg {
-  background-color: green;
+  background: var(--theme-type-dragon-400);
 }
 
 .electricThemeBg {
-  background-color: green;
+  background: var(--theme-type-electric-400);
 }
 
 .fairyThemeBg {
-  background-color: green;
+  background: var(--theme-type-fairy-400);
 }
 
 .fightingThemeBg {
-  background-color: green;
+  background: var(--theme-type-fighting-400);
 }
 
 .fireThemeBg {
-  background-color: green;
+  background: var(--theme-type-fire-400);
 }
 
 .flyingThemeBg {
-  background-color: green;
+  background: var(--theme-type-flying-400);
 }
 
 .ghostThemeBg {
-  background-color: green;
+  background: var(--theme-type-ghost-400);
 }
 
 .grassThemeBg {
-  background-color: green;
-  color: var(--theme-netural-100);
+  background: var(--theme-type-grass-400);
 }
 
 .groundThemeBg {
-  background-color: green;
+  background: var(--theme-type-ground-400);
 }
 
 .iceThemeBg {
-  background-color: green;
+  background: var(--theme-type-ice-400);
 }
 
 .normalThemeBg {
-  background-color: green;
+  background: var(--theme-type-normal-400);
 }
 
 .poisonThemeBg {
-  background-color: green;
+  background: var(--theme-type-poison-400);
 }
 
 .psychicThemeBg {
-  background-color: green;
+  background: var(--theme-type-psychic-400);
 }
 
 .rockThemeBg {
-  background-color: green;
+  background: var(--theme-type-rock-400);
 }
 
 .steelThemeBg {
-  background-color: green;
+  background: var(--theme-type-steel-400);
 }
 
 .waterThemeBg {
-  background-color: green;
+  background: var(--theme-type-water-400);
 }
diff --git a/tsconfig.base.json b/tsconfig.base.json
index bee1758..8f76d2d 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -26,7 +26,8 @@
       "@pokemon-pet-shop/ui": ["libs/ui/src/index.ts"],
       "@pokemon-pet-shop/ui/native": ["libs/ui/src/index_native.ts"],
       "@pokemon-pet-shop/ui/styles": ["libs/ui/src/lib-base/styles/css/global.css"],
-      "@pokemon-pet-shop/ui/stylesVar": ["libs/ui/src/lib-base/styles/ts/variables.ts"],
+      "@pokemon-pet-shop/ui/styles/global": ["libs/ui/src/lib-base/styles/css/global.module.ts"],
+      "@pokemon-pet-shop/ui/styles/var": ["libs/ui/src/lib-base/styles/ts/variables.ts"],
       "@pokemon-pet-shop/utils": ["libs/utils/src/index.ts"]
     }
   },