diff --git a/core/package-lock.json b/core/package-lock.json
index aa7459499fb..14c873ca6a5 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -44,12 +44,12 @@
"fs-extra": "^9.0.1",
"jest": "^29.7.0",
"jest-cli": "^29.7.0",
- "outsystems-design-tokens": "^1.3.0",
+ "outsystems-design-tokens": "^1.3.2",
"prettier": "^2.8.8",
"rollup": "^2.26.4",
"sass": "^1.33.0",
"serve": "^14.0.1",
- "style-dictionary": "^4.1.3",
+ "style-dictionary": "^5.0.0",
"stylelint": "^13.13.1",
"stylelint-order": "^4.1.0"
}
@@ -675,61 +675,53 @@
}
},
"node_modules/@bundled-es-modules/glob": {
- "version": "10.4.2",
- "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-10.4.2.tgz",
- "integrity": "sha512-740y5ofkzydsFao5EXJrGilcIL6EFEw/cmPf2uhTw9J6G1YOhiIFjNFCHdpgEiiH5VlU3G0SARSjlFlimRRSMA==",
+ "version": "11.0.3",
+ "resolved": "https://registry.npmjs.org/@bundled-es-modules/glob/-/glob-11.0.3.tgz",
+ "integrity": "sha512-rt+1650YhlwRkkj67YMZQj5LXWZiavpHQg8K6jDcZBPbrBIooHbKOQvvxKJsKM80H1oHengEbIymfw3mn4FkUw==",
"dev": true,
- "hasInstallScript": true,
"dependencies": {
"buffer": "^6.0.3",
"events": "^3.3.0",
- "glob": "^10.4.2",
- "patch-package": "^8.0.0",
+ "glob": "^11.0.3",
"path": "^0.12.7",
"stream": "^0.0.3",
"string_decoder": "^1.3.0",
"url": "^0.11.3"
}
},
- "node_modules/@bundled-es-modules/glob/node_modules/brace-expansion": {
- "version": "2.0.2",
- "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
- "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
- "dev": true,
- "dependencies": {
- "balanced-match": "^1.0.0"
- }
- },
"node_modules/@bundled-es-modules/glob/node_modules/glob": {
- "version": "10.4.5",
- "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
- "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+ "version": "11.0.3",
+ "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.3.tgz",
+ "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==",
"dev": true,
"dependencies": {
- "foreground-child": "^3.1.0",
- "jackspeak": "^3.1.2",
- "minimatch": "^9.0.4",
+ "foreground-child": "^3.3.1",
+ "jackspeak": "^4.1.1",
+ "minimatch": "^10.0.3",
"minipass": "^7.1.2",
"package-json-from-dist": "^1.0.0",
- "path-scurry": "^1.11.1"
+ "path-scurry": "^2.0.0"
},
"bin": {
"glob": "dist/esm/bin.mjs"
},
+ "engines": {
+ "node": "20 || >=22"
+ },
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/@bundled-es-modules/glob/node_modules/minimatch": {
- "version": "9.0.5",
- "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
- "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+ "version": "10.0.3",
+ "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.3.tgz",
+ "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
"dev": true,
"dependencies": {
- "brace-expansion": "^2.0.1"
+ "@isaacs/brace-expansion": "^5.0.0"
},
"engines": {
- "node": ">=16 || 14 >=14.17"
+ "node": "20 || >=22"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
@@ -807,6 +799,422 @@
"sisteransi": "^1.0.5"
}
},
+ "node_modules/@esbuild/aix-ppc64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
+ "integrity": "sha512-OaGtL73Jck6pBKjNIe24BnFE6agGl+6KxDtTfHhy1HmhthfKouEcOhqpSL64K4/0WCtbKFLOdzD/44cJ4k9opA==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "aix"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/android-arm": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.9.tgz",
+ "integrity": "sha512-5WNI1DaMtxQ7t7B6xa572XMXpHAaI/9Hnhk8lcxF4zVN4xstUgTlvuGDorBguKEnZO70qwEcLpfifMLoxiPqHQ==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/android-arm64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.9.tgz",
+ "integrity": "sha512-IDrddSmpSv51ftWslJMvl3Q2ZT98fUSL2/rlUXuVqRXHCs5EUF1/f+jbjF5+NG9UffUDMCiTyh8iec7u8RlTLg==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/android-x64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.9.tgz",
+ "integrity": "sha512-I853iMZ1hWZdNllhVZKm34f4wErd4lMyeV7BLzEExGEIZYsOzqDWDf+y082izYUE8gtJnYHdeDpN/6tUdwvfiw==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "android"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/darwin-arm64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.9.tgz",
+ "integrity": "sha512-XIpIDMAjOELi/9PB30vEbVMs3GV1v2zkkPnuyRRURbhqjyzIINwj+nbQATh4H9GxUgH1kFsEyQMxwiLFKUS6Rg==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/darwin-x64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.9.tgz",
+ "integrity": "sha512-jhHfBzjYTA1IQu8VyrjCX4ApJDnH+ez+IYVEoJHeqJm9VhG9Dh2BYaJritkYK3vMaXrf7Ogr/0MQ8/MeIefsPQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "darwin"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/freebsd-arm64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.9.tgz",
+ "integrity": "sha512-z93DmbnY6fX9+KdD4Ue/H6sYs+bhFQJNCPZsi4XWJoYblUqT06MQUdBCpcSfuiN72AbqeBFu5LVQTjfXDE2A6Q==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/freebsd-x64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.9.tgz",
+ "integrity": "sha512-mrKX6H/vOyo5v71YfXWJxLVxgy1kyt1MQaD8wZJgJfG4gq4DpQGpgTB74e5yBeQdyMTbgxp0YtNj7NuHN0PoZg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "freebsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-arm": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.9.tgz",
+ "integrity": "sha512-HBU2Xv78SMgaydBmdor38lg8YDnFKSARg1Q6AT0/y2ezUAKiZvc211RDFHlEZRFNRVhcMamiToo7bDx3VEOYQw==",
+ "cpu": [
+ "arm"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-arm64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.9.tgz",
+ "integrity": "sha512-BlB7bIcLT3G26urh5Dmse7fiLmLXnRlopw4s8DalgZ8ef79Jj4aUcYbk90g8iCa2467HX8SAIidbL7gsqXHdRw==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-ia32": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.9.tgz",
+ "integrity": "sha512-e7S3MOJPZGp2QW6AK6+Ly81rC7oOSerQ+P8L0ta4FhVi+/j/v2yZzx5CqqDaWjtPFfYz21Vi1S0auHrap3Ma3A==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-loong64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.9.tgz",
+ "integrity": "sha512-Sbe10Bnn0oUAB2AalYztvGcK+o6YFFA/9829PhOCUS9vkJElXGdphz0A3DbMdP8gmKkqPmPcMJmJOrI3VYB1JQ==",
+ "cpu": [
+ "loong64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-mips64el": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.9.tgz",
+ "integrity": "sha512-YcM5br0mVyZw2jcQeLIkhWtKPeVfAerES5PvOzaDxVtIyZ2NUBZKNLjC5z3/fUlDgT6w89VsxP2qzNipOaaDyA==",
+ "cpu": [
+ "mips64el"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-ppc64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.9.tgz",
+ "integrity": "sha512-++0HQvasdo20JytyDpFvQtNrEsAgNG2CY1CLMwGXfFTKGBGQT3bOeLSYE2l1fYdvML5KUuwn9Z8L1EWe2tzs1w==",
+ "cpu": [
+ "ppc64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-riscv64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.9.tgz",
+ "integrity": "sha512-uNIBa279Y3fkjV+2cUjx36xkx7eSjb8IvnL01eXUKXez/CBHNRw5ekCGMPM0BcmqBxBcdgUWuUXmVWwm4CH9kg==",
+ "cpu": [
+ "riscv64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-s390x": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.9.tgz",
+ "integrity": "sha512-Mfiphvp3MjC/lctb+7D287Xw1DGzqJPb/J2aHHcHxflUo+8tmN/6d4k6I2yFR7BVo5/g7x2Monq4+Yew0EHRIA==",
+ "cpu": [
+ "s390x"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/linux-x64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.9.tgz",
+ "integrity": "sha512-iSwByxzRe48YVkmpbgoxVzn76BXjlYFXC7NvLYq+b+kDjyyk30J0JY47DIn8z1MO3K0oSl9fZoRmZPQI4Hklzg==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "linux"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/netbsd-arm64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.9.tgz",
+ "integrity": "sha512-9jNJl6FqaUG+COdQMjSCGW4QiMHH88xWbvZ+kRVblZsWrkXlABuGdFJ1E9L7HK+T0Yqd4akKNa/lO0+jDxQD4Q==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "netbsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/netbsd-x64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.9.tgz",
+ "integrity": "sha512-RLLdkflmqRG8KanPGOU7Rpg829ZHu8nFy5Pqdi9U01VYtG9Y0zOG6Vr2z4/S+/3zIyOxiK6cCeYNWOFR9QP87g==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "netbsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/openbsd-arm64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.9.tgz",
+ "integrity": "sha512-YaFBlPGeDasft5IIM+CQAhJAqS3St3nJzDEgsgFixcfZeyGPCd6eJBWzke5piZuZ7CtL656eOSYKk4Ls2C0FRQ==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "openbsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/openbsd-x64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.9.tgz",
+ "integrity": "sha512-1MkgTCuvMGWuqVtAvkpkXFmtL8XhWy+j4jaSO2wxfJtilVCi0ZE37b8uOdMItIHz4I6z1bWWtEX4CJwcKYLcuA==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "openbsd"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/openharmony-arm64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.9.tgz",
+ "integrity": "sha512-4Xd0xNiMVXKh6Fa7HEJQbrpP3m3DDn43jKxMjxLLRjWnRsfxjORYJlXPO4JNcXtOyfajXorRKY9NkOpTHptErg==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "openharmony"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/sunos-x64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.9.tgz",
+ "integrity": "sha512-WjH4s6hzo00nNezhp3wFIAfmGZ8U7KtrJNlFMRKxiI9mxEK1scOMAaa9i4crUtu+tBr+0IN6JCuAcSBJZfnphw==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "sunos"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/win32-arm64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.9.tgz",
+ "integrity": "sha512-mGFrVJHmZiRqmP8xFOc6b84/7xa5y5YvR1x8djzXpJBSv/UsNK6aqec+6JDjConTgvvQefdGhFDAs2DLAds6gQ==",
+ "cpu": [
+ "arm64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/win32-ia32": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.9.tgz",
+ "integrity": "sha512-b33gLVU2k11nVx1OhX3C8QQP6UHQK4ZtN56oFWvVXvz2VkDoe6fbG8TOgHFxEvqeqohmRnIHe5A1+HADk4OQww==",
+ "cpu": [
+ "ia32"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
+ "node_modules/@esbuild/win32-x64": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.9.tgz",
+ "integrity": "sha512-PPOl1mi6lpLNQxnGoyAfschAodRFYXJ+9fs6WHXz7CSWKbOqiMZsubC+BQsVKuul+3vKLuwTHsS2c2y9EoKwxQ==",
+ "cpu": [
+ "x64"
+ ],
+ "dev": true,
+ "optional": true,
+ "os": [
+ "win32"
+ ],
+ "engines": {
+ "node": ">=18"
+ }
+ },
"node_modules/@eslint-community/eslint-utils": {
"version": "4.4.0",
"resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -1175,6 +1583,27 @@
"prettier": "^2.0.0"
}
},
+ "node_modules/@isaacs/balanced-match": {
+ "version": "4.0.1",
+ "resolved": "https://registry.npmjs.org/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
+ "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
+ "dev": true,
+ "engines": {
+ "node": "20 || >=22"
+ }
+ },
+ "node_modules/@isaacs/brace-expansion": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
+ "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
+ "dev": true,
+ "dependencies": {
+ "@isaacs/balanced-match": "^4.0.1"
+ },
+ "engines": {
+ "node": "20 || >=22"
+ }
+ },
"node_modules/@isaacs/cliui": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -1922,16 +2351,6 @@
"resolved": "https://registry.npmjs.org/@phosphor-icons/core/-/core-2.1.1.tgz",
"integrity": "sha512-v4ARvrip4qBCImOE5rmPUylOEK4iiED9ZyKjcvzuezqMaiRASCHKcRIuvvxL/twvLpkfnEODCOJp5dM4eZilxQ=="
},
- "node_modules/@pkgjs/parseargs": {
- "version": "0.11.0",
- "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
- "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
- "dev": true,
- "optional": true,
- "engines": {
- "node": ">=14"
- }
- },
"node_modules/@playwright/test": {
"version": "1.54.2",
"resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.2.tgz",
@@ -3011,12 +3430,6 @@
"license": "MIT",
"peer": true
},
- "node_modules/@yarnpkg/lockfile": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
- "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
- "dev": true
- },
"node_modules/@zeit/schemas": {
"version": "2.21.0",
"resolved": "https://registry.npmjs.org/@zeit/schemas/-/schemas-2.21.0.tgz",
@@ -3802,9 +4215,9 @@
}
},
"node_modules/caniuse-lite": {
- "version": "1.0.30001319",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001319.tgz",
- "integrity": "sha512-xjlIAFHucBRSMUo1kb5D4LYgcN1M45qdKP++lhqowDpwJwGkpIRTt5qQqnhxjj1vHcI7nrJxWhCC1ATrCEBTcw==",
+ "version": "1.0.30001739",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001739.tgz",
+ "integrity": "sha512-y+j60d6ulelrNSwpPyrHdl+9mJnQzHBr08xm48Qno0nSk4h3Qojh+ziv2qE6rXf4k3tadF4o1J/1tAbVm1NtnA==",
"dev": true,
"funding": [
{
@@ -3814,6 +4227,10 @@
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+ },
+ {
+ "type": "github",
+ "url": "https://github.com/sponsors/ai"
}
]
},
@@ -4806,6 +5223,47 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/esbuild": {
+ "version": "0.25.9",
+ "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.9.tgz",
+ "integrity": "sha512-CRbODhYyQx3qp7ZEwzxOk4JBqmD/seJrzPa/cGjY1VtIn5E09Oi9/dB4JwctnfZ8Q8iT7rioVv5k/FNT/uf54g==",
+ "dev": true,
+ "hasInstallScript": true,
+ "bin": {
+ "esbuild": "bin/esbuild"
+ },
+ "engines": {
+ "node": ">=18"
+ },
+ "optionalDependencies": {
+ "@esbuild/aix-ppc64": "0.25.9",
+ "@esbuild/android-arm": "0.25.9",
+ "@esbuild/android-arm64": "0.25.9",
+ "@esbuild/android-x64": "0.25.9",
+ "@esbuild/darwin-arm64": "0.25.9",
+ "@esbuild/darwin-x64": "0.25.9",
+ "@esbuild/freebsd-arm64": "0.25.9",
+ "@esbuild/freebsd-x64": "0.25.9",
+ "@esbuild/linux-arm": "0.25.9",
+ "@esbuild/linux-arm64": "0.25.9",
+ "@esbuild/linux-ia32": "0.25.9",
+ "@esbuild/linux-loong64": "0.25.9",
+ "@esbuild/linux-mips64el": "0.25.9",
+ "@esbuild/linux-ppc64": "0.25.9",
+ "@esbuild/linux-riscv64": "0.25.9",
+ "@esbuild/linux-s390x": "0.25.9",
+ "@esbuild/linux-x64": "0.25.9",
+ "@esbuild/netbsd-arm64": "0.25.9",
+ "@esbuild/netbsd-x64": "0.25.9",
+ "@esbuild/openbsd-arm64": "0.25.9",
+ "@esbuild/openbsd-x64": "0.25.9",
+ "@esbuild/openharmony-arm64": "0.25.9",
+ "@esbuild/sunos-x64": "0.25.9",
+ "@esbuild/win32-arm64": "0.25.9",
+ "@esbuild/win32-ia32": "0.25.9",
+ "@esbuild/win32-x64": "0.25.9"
+ }
+ },
"node_modules/escalade": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -5641,15 +6099,6 @@
"node": ">=8"
}
},
- "node_modules/find-yarn-workspace-root": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
- "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
- "dev": true,
- "dependencies": {
- "micromatch": "^4.0.2"
- }
- },
"node_modules/flat-cache": {
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
@@ -6753,12 +7202,6 @@
"node": ">=8"
}
},
- "node_modules/isarray": {
- "version": "2.0.5",
- "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
- "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
- "dev": true
- },
"node_modules/isexe": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -6864,18 +7307,18 @@
}
},
"node_modules/jackspeak": {
- "version": "3.4.3",
- "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
- "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz",
+ "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==",
"dev": true,
"dependencies": {
"@isaacs/cliui": "^8.0.2"
},
+ "engines": {
+ "node": "20 || >=22"
+ },
"funding": {
"url": "https://github.com/sponsors/isaacs"
- },
- "optionalDependencies": {
- "@pkgjs/parseargs": "^0.11.0"
}
},
"node_modules/jest": {
@@ -8344,25 +8787,6 @@
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
"dev": true
},
- "node_modules/json-stable-stringify": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.3.0.tgz",
- "integrity": "sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==",
- "dev": true,
- "dependencies": {
- "call-bind": "^1.0.8",
- "call-bound": "^1.0.4",
- "isarray": "^2.0.5",
- "jsonify": "^0.0.1",
- "object-keys": "^1.1.1"
- },
- "engines": {
- "node": ">= 0.4"
- },
- "funding": {
- "url": "https://github.com/sponsors/ljharb"
- }
- },
"node_modules/json-stable-stringify-without-jsonify": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -8402,15 +8826,6 @@
"node": ">= 10.0.0"
}
},
- "node_modules/jsonify": {
- "version": "0.0.1",
- "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
- "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
- "dev": true,
- "funding": {
- "url": "https://github.com/sponsors/ljharb"
- }
- },
"node_modules/kind-of": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -8420,15 +8835,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/klaw-sync": {
- "version": "6.0.0",
- "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
- "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
- "dev": true,
- "dependencies": {
- "graceful-fs": "^4.1.11"
- }
- },
"node_modules/kleur": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -9181,37 +9587,11 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/open": {
- "version": "7.4.2",
- "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
- "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
- "dev": true,
- "dependencies": {
- "is-docker": "^2.0.0",
- "is-wsl": "^2.1.1"
- },
- "engines": {
- "node": ">=8"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/os-tmpdir": {
- "version": "1.0.2",
- "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
- "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
- "dev": true,
- "engines": {
- "node": ">=0.10.0"
- }
- },
"node_modules/outsystems-design-tokens": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.3.0.tgz",
- "integrity": "sha512-VEYce0sdh9EfqH3NIBlyIZ6d2AtNRSj6ZjufHar2nsJTi+6LXxCogCXOZoFY3FRZ3Mf3fW0wUDrzi9772p4F7Q==",
+ "version": "1.3.2",
+ "resolved": "https://registry.npmjs.org/outsystems-design-tokens/-/outsystems-design-tokens-1.3.2.tgz",
+ "integrity": "sha512-fVo71qNHoswStlwcfHkFw00vOWSKJmUPW4ATnCfulgKc51apsqXh6nYKrjrR6oK786lv7vK0i/3MWNuRXs0GAQ==",
"dev": true,
- "license": "BSD-3-Clause",
"dependencies": {
"glob": "^11.0.0",
"minimist": "^1.2.8",
@@ -9221,16 +9601,6 @@
"build.tokens": "scripts/index.js"
}
},
- "node_modules/outsystems-design-tokens/node_modules/@types/node": {
- "version": "22.17.0",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-22.17.0.tgz",
- "integrity": "sha512-bbAKTCqX5aNVryi7qXVMi+OkB3w/OyblodicMbvE38blyAz7GxXf6XYhklokijuPwwVg9sDLKRxt0ZHXQwZVfQ==",
- "dev": true,
- "license": "MIT",
- "dependencies": {
- "undici-types": "~6.21.0"
- }
- },
"node_modules/outsystems-design-tokens/node_modules/balanced-match": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-3.0.1.tgz",
@@ -9252,16 +9622,6 @@
"node": ">= 18"
}
},
- "node_modules/outsystems-design-tokens/node_modules/commander": {
- "version": "12.1.0",
- "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
- "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=18"
- }
- },
"node_modules/outsystems-design-tokens/node_modules/glob": {
"version": "11.0.2",
"resolved": "https://registry.npmjs.org/glob/-/glob-11.0.2.tgz",
@@ -9285,43 +9645,6 @@
"url": "https://github.com/sponsors/isaacs"
}
},
- "node_modules/outsystems-design-tokens/node_modules/is-plain-obj": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
- "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/sponsors/sindresorhus"
- }
- },
- "node_modules/outsystems-design-tokens/node_modules/jackspeak": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-4.1.1.tgz",
- "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==",
- "dev": true,
- "dependencies": {
- "@isaacs/cliui": "^8.0.2"
- },
- "engines": {
- "node": "20 || >=22"
- },
- "funding": {
- "url": "https://github.com/sponsors/isaacs"
- }
- },
- "node_modules/outsystems-design-tokens/node_modules/lru-cache": {
- "version": "11.1.0",
- "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.1.0.tgz",
- "integrity": "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==",
- "dev": true,
- "engines": {
- "node": "20 || >=22"
- }
- },
"node_modules/outsystems-design-tokens/node_modules/minimatch": {
"version": "10.0.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.0.2.tgz",
@@ -9337,75 +9660,6 @@
"url": "https://github.com/sponsors/isaacs"
}
},
- "node_modules/outsystems-design-tokens/node_modules/path-scurry": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
- "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
- "dev": true,
- "dependencies": {
- "lru-cache": "^11.0.0",
- "minipass": "^7.1.2"
- },
- "engines": {
- "node": "20 || >=22"
- },
- "funding": {
- "url": "https://github.com/sponsors/isaacs"
- }
- },
- "node_modules/outsystems-design-tokens/node_modules/prettier": {
- "version": "3.6.2",
- "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
- "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
- "dev": true,
- "license": "MIT",
- "bin": {
- "prettier": "bin/prettier.cjs"
- },
- "engines": {
- "node": ">=14"
- },
- "funding": {
- "url": "https://github.com/prettier/prettier?sponsor=1"
- }
- },
- "node_modules/outsystems-design-tokens/node_modules/style-dictionary": {
- "version": "5.0.1",
- "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-5.0.1.tgz",
- "integrity": "sha512-j+yQ4hM7a52iUQg5LVC8bnRkem4sU+unIY2qsyjoikPVzaxjkHd4ER7bnK+znW/Rhha69t4Fi5O46UHg6w8jFQ==",
- "dev": true,
- "hasInstallScript": true,
- "license": "Apache-2.0",
- "dependencies": {
- "@bundled-es-modules/deepmerge": "^4.3.1",
- "@bundled-es-modules/glob": "^10.4.2",
- "@bundled-es-modules/memfs": "^4.9.4",
- "@types/node": "^22.10.5",
- "@zip.js/zip.js": "^2.7.44",
- "chalk": "^5.3.0",
- "change-case": "^5.3.0",
- "commander": "^12.1.0",
- "is-plain-obj": "^4.1.0",
- "json5": "^2.2.2",
- "patch-package": "^8.0.0",
- "path-unified": "^0.2.0",
- "prettier": "^3.3.3",
- "tinycolor2": "^1.6.0"
- },
- "bin": {
- "style-dictionary": "bin/style-dictionary.js"
- },
- "engines": {
- "node": ">=22.0.0"
- }
- },
- "node_modules/outsystems-design-tokens/node_modules/undici-types": {
- "version": "6.21.0",
- "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
- "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
- "dev": true,
- "license": "MIT"
- },
"node_modules/p-limit": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -9496,131 +9750,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/patch-package": {
- "version": "8.0.0",
- "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.0.tgz",
- "integrity": "sha512-da8BVIhzjtgScwDJ2TtKsfT5JFWz1hYoBl9rUQ1f38MC2HwnEIkK8VN3dKMKcP7P7bvvgzNDbfNHtx3MsQb5vA==",
- "dev": true,
- "dependencies": {
- "@yarnpkg/lockfile": "^1.1.0",
- "chalk": "^4.1.2",
- "ci-info": "^3.7.0",
- "cross-spawn": "^7.0.3",
- "find-yarn-workspace-root": "^2.0.0",
- "fs-extra": "^9.0.0",
- "json-stable-stringify": "^1.0.2",
- "klaw-sync": "^6.0.0",
- "minimist": "^1.2.6",
- "open": "^7.4.2",
- "rimraf": "^2.6.3",
- "semver": "^7.5.3",
- "slash": "^2.0.0",
- "tmp": "^0.0.33",
- "yaml": "^2.2.2"
- },
- "bin": {
- "patch-package": "index.js"
- },
- "engines": {
- "node": ">=14",
- "npm": ">5"
- }
- },
- "node_modules/patch-package/node_modules/ansi-styles": {
- "version": "4.3.0",
- "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
- "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
- "dev": true,
- "dependencies": {
- "color-convert": "^2.0.1"
- },
- "engines": {
- "node": ">=8"
- },
- "funding": {
- "url": "https://github.com/chalk/ansi-styles?sponsor=1"
- }
- },
- "node_modules/patch-package/node_modules/chalk": {
- "version": "4.1.2",
- "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
- "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
- "dev": true,
- "dependencies": {
- "ansi-styles": "^4.1.0",
- "supports-color": "^7.1.0"
- },
- "engines": {
- "node": ">=10"
- },
- "funding": {
- "url": "https://github.com/chalk/chalk?sponsor=1"
- }
- },
- "node_modules/patch-package/node_modules/color-convert": {
- "version": "2.0.1",
- "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
- "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
- "dev": true,
- "dependencies": {
- "color-name": "~1.1.4"
- },
- "engines": {
- "node": ">=7.0.0"
- }
- },
- "node_modules/patch-package/node_modules/color-name": {
- "version": "1.1.4",
- "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
- "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
- "dev": true
- },
- "node_modules/patch-package/node_modules/rimraf": {
- "version": "2.7.1",
- "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
- "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
- "deprecated": "Rimraf versions prior to v4 are no longer supported",
- "dev": true,
- "dependencies": {
- "glob": "^7.1.3"
- },
- "bin": {
- "rimraf": "bin.js"
- }
- },
- "node_modules/patch-package/node_modules/semver": {
- "version": "7.7.2",
- "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
- "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
- "dev": true,
- "bin": {
- "semver": "bin/semver.js"
- },
- "engines": {
- "node": ">=10"
- }
- },
- "node_modules/patch-package/node_modules/slash": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
- "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
- "dev": true,
- "engines": {
- "node": ">=6"
- }
- },
- "node_modules/patch-package/node_modules/yaml": {
- "version": "2.8.0",
- "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.0.tgz",
- "integrity": "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ==",
- "dev": true,
- "bin": {
- "yaml": "bin.mjs"
- },
- "engines": {
- "node": ">= 14.6"
- }
- },
"node_modules/path": {
"version": "0.12.7",
"resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
@@ -9671,26 +9800,32 @@
"dev": true
},
"node_modules/path-scurry": {
- "version": "1.11.1",
- "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
- "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
+ "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
"dev": true,
"dependencies": {
- "lru-cache": "^10.2.0",
- "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
+ "lru-cache": "^11.0.0",
+ "minipass": "^7.1.2"
},
"engines": {
- "node": ">=16 || 14 >=14.18"
+ "node": "20 || >=22"
},
"funding": {
"url": "https://github.com/sponsors/isaacs"
}
},
"node_modules/path-scurry/node_modules/lru-cache": {
- "version": "10.4.3",
- "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
- "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
- "dev": true
+ "version": "11.2.0",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-11.2.0.tgz",
+ "integrity": "sha512-1oZqnd6TxE/NZyRZ21u+10DKV5sMqT0rJFlPbytSH/0UaXLvE/EurTrd2nDnHif6E1l8N9mothtWs/Um3RijjA==",
+ "dev": true,
+ "dependencies": {
+ "esbuild": "^0.25.9"
+ },
+ "engines": {
+ "node": "20 || >=22"
+ }
},
"node_modules/path-to-regexp": {
"version": "2.2.1",
@@ -10996,14 +11131,13 @@
}
},
"node_modules/style-dictionary": {
- "version": "4.4.0",
- "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-4.4.0.tgz",
- "integrity": "sha512-+xU0IA1StzqAqFs/QtXkK+XJa7wpS4X5H+JQccRKsRCElgeLGocFU1U/UMvMUylKFw6vwGV+Y/a2wb2pm5rFFQ==",
+ "version": "5.0.4",
+ "resolved": "https://registry.npmjs.org/style-dictionary/-/style-dictionary-5.0.4.tgz",
+ "integrity": "sha512-+k82riDTHnCpOYzKz1Xa4W219dEOI8pc2a2jnWZuAFY11PHvRL1Ao55Lle3t/kQbiRU5QACdC3xeUNuByaKE3w==",
"dev": true,
- "hasInstallScript": true,
"dependencies": {
"@bundled-es-modules/deepmerge": "^4.3.1",
- "@bundled-es-modules/glob": "^10.4.2",
+ "@bundled-es-modules/glob": "^11.0.3",
"@bundled-es-modules/memfs": "^4.9.4",
"@zip.js/zip.js": "^2.7.44",
"chalk": "^5.3.0",
@@ -11011,7 +11145,6 @@
"commander": "^12.1.0",
"is-plain-obj": "^4.1.0",
"json5": "^2.2.2",
- "patch-package": "^8.0.0",
"path-unified": "^0.2.0",
"prettier": "^3.3.3",
"tinycolor2": "^1.6.0"
@@ -11020,7 +11153,7 @@
"style-dictionary": "bin/style-dictionary.js"
},
"engines": {
- "node": ">=18.0.0"
+ "node": ">=22.0.0"
}
},
"node_modules/style-dictionary/node_modules/commander": {
@@ -11431,18 +11564,6 @@
"integrity": "sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==",
"dev": true
},
- "node_modules/tmp": {
- "version": "0.0.33",
- "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
- "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
- "dev": true,
- "dependencies": {
- "os-tmpdir": "~1.0.2"
- },
- "engines": {
- "node": ">=0.6.0"
- }
- },
"node_modules/tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
diff --git a/core/package.json b/core/package.json
index 1a893c0e129..0ec3a20544f 100644
--- a/core/package.json
+++ b/core/package.json
@@ -66,12 +66,12 @@
"fs-extra": "^9.0.1",
"jest": "^29.7.0",
"jest-cli": "^29.7.0",
- "outsystems-design-tokens": "^1.3.0",
+ "outsystems-design-tokens": "^1.3.2",
"prettier": "^2.8.8",
"rollup": "^2.26.4",
"sass": "^1.33.0",
"serve": "^14.0.1",
- "style-dictionary": "^4.1.3",
+ "style-dictionary": "^5.0.0",
"stylelint": "^13.13.1",
"stylelint-order": "^4.1.0"
},
@@ -80,7 +80,7 @@
"build.css": "npm run css.sass && npm run css.minify",
"build.debug": "npm run clean && stencil build --debug",
"build.docs.json": "stencil build --docs-json dist/docs.json",
- "build.tokens": "npx build.tokens --config scripts/tokens/index.js && npm run prettier.tokens",
+ "build.tokens": "npx build.tokens --config scripts/tokens/index.mjs && npm run prettier.tokens",
"clean": "node scripts/clean.js",
"css.minify": "cleancss -O2 -o ./css/ionic.bundle.css ./css/ionic.bundle.css",
"css.sass": "sass --embed-sources --style compressed src/css:./css",
diff --git a/core/scripts/tokens/index.js b/core/scripts/tokens/index.js
deleted file mode 100644
index 25be948ba1d..00000000000
--- a/core/scripts/tokens/index.js
+++ /dev/null
@@ -1,201 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-// For generating Design Tokens, we use Style Dictionary for several reasons:
-// - It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
-// - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
-// - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
-// - It can easily scale to different necessities we might have in the future.
-(async () => {
- const {
- generateShadowValue,
- generateFontSizeValue,
- generateFontFamilyValue,
- generateTypographyOutput,
- generateValue,
- generateColorUtilityClasses,
- generateDefaultSpaceUtilityClasses,
- generateSpaceUtilityClasses,
- removeConsecutiveRepeatedWords,
- setPrefixValue,
- generateRadiusUtilityClasses,
- generateBorderUtilityClasses,
- generateFontUtilityClasses,
- generateShadowUtilityClasses,
- generateUtilityClasses
- } = require('./utils.js');
-
- const StyleDictionary = (await import('style-dictionary')).default;
-
- // Set the prefix for variables and classes
- setPrefixValue('ion');
-
- // Register a custom file header
- StyleDictionary.registerFileHeader({
- name: 'custom-header',
- fileHeader: async (defaultMessages = []) => {
- return [...defaultMessages, 'Do not edit directly, this file was auto-generated.'];
- },
- });
-
- // SCSS variables format
- StyleDictionary.registerFormat({
- name: 'scssVariablesFormat',
- format: async function ({ dictionary, file }) {
-
- console.log('Generating SCSS variables...');
-
- const primitiveProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'primitives');
- const scaleProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'scale');
- const borderProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'border');
- const semanticsProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'semantics');
- const nonPrimitiveScaleBorderSemanticsProperties = dictionary.allTokens.filter(
- (prop) => !['primitives', 'scale', 'border', 'semantics'].includes(prop.path[0])
- );
- const typographyProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type === 'typography');
- const otherProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type !== 'typography');
-
- // Order: primitives → semantics → scale → border → other → typography
- const sortedProperties = [
- ...primitiveProperties,
- ...semanticsProperties,
- ...scaleProperties,
- ...borderProperties,
- ...otherProperties,
- ...typographyProperties
- ];
-
- const prefixedVariables = sortedProperties.map((prop) => {
- // Remove consecutive repeated words from the token name, like border-border-color
- const propName = removeConsecutiveRepeatedWords(prop.name);
-
- switch (prop.$type) {
- case 'boxShadow':
- return generateShadowValue(prop, propName);
- case 'fontFamilies':
- return generateFontFamilyValue(prop, propName, 'scss');
- case 'fontSizes':
- return generateFontSizeValue(prop, propName, 'scss');
- case 'typography':
- return generateTypographyOutput(prop, propName, true);
- default:
- return generateValue(prop, propName);
- }
- });
-
- const fileHeader = await file.options.fileHeader();
-
- return [
- `/*\n${fileHeader.join('\n')}\n*/`,
- '@use "../themes/functions.sizes" as font;\n',
- prefixedVariables.join('\n') + '\n',
- ].join('\n');
- },
- });
-
- // Create utility-classes
- StyleDictionary.registerFormat({
- name: 'cssUtilityClassesFormat',
- format: async function ({ dictionary, file }) {
-
- console.log('Generating Utility-Classes...');
-
- // Arrays to store specific utility classes
- const typographyUtilityClasses = [];
- const otherUtilityClasses = [];
-
- // Generate utility classes for each token
- dictionary.allTokens.map((prop) => {
-
- const tokenCategory = prop.attributes.category;
-
- if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') {
- // Not creating for the tokens below, as they make no sense to exist as utility-classes.
- return;
- }
-
- // Remove consecutive repeated words from the token name, like border-border-color
- const propName = removeConsecutiveRepeatedWords(prop.name);
-
- if (prop.$type === 'typography') {
- // Typography tokens are handled differently, as each might have a different tokenType
- return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false));
-
- } else if (tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) {
- // Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens
- return otherUtilityClasses.push(generateRadiusUtilityClasses(propName));
- }
-
- let utilityClass = '';
- switch (tokenCategory) {
- case 'color':
- case 'primitives':
- case 'semantics':
- case 'text':
- case 'bg':
- case 'icon':
- case 'state':
- utilityClass = generateColorUtilityClasses(prop, propName);
- break;
- case 'border':
- utilityClass = generateBorderUtilityClasses(prop, propName);
- break;
- case 'font':
- utilityClass = generateFontUtilityClasses(prop, propName);
- break;
- case 'space':
- utilityClass = generateSpaceUtilityClasses(prop, propName);
- break;
- case 'shadow':
- case 'elevation':
- utilityClass = generateShadowUtilityClasses(propName);
- break;
- default:
- utilityClass = generateUtilityClasses(tokenCategory, propName);
- }
-
- return otherUtilityClasses.push(utilityClass);
- });
-
- const defaultSpaceUtilityClasses = generateDefaultSpaceUtilityClasses();
- otherUtilityClasses.push(defaultSpaceUtilityClasses);
-
- // Concatenate typography utility classes at the beginning
- const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n');
-
- const fileHeader = await file.options.fileHeader();
-
- return [
- `/*\n${fileHeader.join('\n')}\n*/`,
- '@import "./ionic.vars";\n@import "../themes/mixins";\n',
- finalOutput,
- ].join('\n');
- },
- });
-
-})();
-
-// APPLY THE CONFIGURATION
-module.exports = {
- source: ["node_modules/outsystems-design-tokens/tokens/**/*.json"],
- platforms: {
- scss: {
- transformGroup: "scss",
- buildPath: './src/foundations/',
- files: [
- {
- destination: "ionic.vars.scss",
- format: "scssVariablesFormat",
- options: {
- fileHeader: `custom-header`,
- },
- },
- {
- destination: "ionic.utility.scss",
- format: "cssUtilityClassesFormat",
- options: {
- fileHeader: `custom-header`
- }
- }
- ]
- }
- }
-};
diff --git a/core/scripts/tokens/index.mjs b/core/scripts/tokens/index.mjs
new file mode 100644
index 00000000000..ae21aea96a8
--- /dev/null
+++ b/core/scripts/tokens/index.mjs
@@ -0,0 +1,186 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+// For generating Design Tokens, we use Style Dictionary for several reasons:
+// - It's prepared to easily generate tokens for multiple types of outputs (CSS, SCSS, iOS, Android, documentation, etc.).
+// - It also works very well out of the box with any kind of Design Tokens formats, like Figma Tokens, as well as APIs to adjust to more custom ones.
+// - It is probably the most well-known and widely used Design Tokens tool. It has also been regularly maintained for a long time.
+// - It can easily scale to different necessities we might have in the future.
+import * as utils from './utils.mjs';
+const {
+ generateShadowValue,
+ generateFontSizeValue,
+ generateFontFamilyValue,
+ generateTypographyOutput,
+ generateValue,
+ generateColorUtilityClasses,
+ generateDefaultSpaceUtilityClasses,
+ generateSpaceUtilityClasses,
+ removeConsecutiveRepeatedWords,
+ setVariablePrefixValue,
+ setClassesAndScssPrefixValue: setClassesPrefixValue,
+ generateRadiusUtilityClasses,
+ generateBorderUtilityClasses,
+ generateFontUtilityClasses,
+ generateShadowUtilityClasses,
+ generateUtilityClasses
+} = utils;
+import StyleDictionary from 'style-dictionary';
+
+const customHeader = `// Do not edit directly, this file was auto-generated.`;
+// Set the prefix for classes
+setClassesPrefixValue('ion');
+// Set the prefix for variables
+setVariablePrefixValue('token');
+
+// SCSS variables format
+StyleDictionary.registerFormat({
+ name: 'scssVariablesFormat',
+ format: function ({ dictionary }) { // Use 'format' for Style Dictionary v3
+ console.log('Generating SCSS variables...');
+
+ const primitiveProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'primitives');
+ const scaleProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'scale');
+ const borderProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'border');
+ const semanticsProperties = dictionary.allTokens.filter((prop) => prop.path[0] === 'semantics');
+ const nonPrimitiveScaleBorderSemanticsProperties = dictionary.allTokens.filter(
+ (prop) => !['primitives', 'scale', 'border', 'semantics'].includes(prop.path[0])
+ );
+ const typographyProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type === 'typography');
+ const otherProperties = nonPrimitiveScaleBorderSemanticsProperties.filter((prop) => prop.$type !== 'typography');
+
+ // Order: primitives → semantics → scale → border → other → typography
+ const sortedProperties = [
+ ...primitiveProperties,
+ ...semanticsProperties,
+ ...scaleProperties,
+ ...borderProperties,
+ ...otherProperties,
+ ...typographyProperties
+ ];
+
+ const prefixedVariables = sortedProperties.map((prop) => {
+ // Remove consecutive repeated words from the token name, like border-border-color
+ const propName = removeConsecutiveRepeatedWords(prop.name);
+
+ switch (prop.$type) {
+ case 'boxShadow':
+ return generateShadowValue(prop, propName);
+ case 'fontFamilies':
+ return generateFontFamilyValue(prop, propName, 'scss');
+ case 'fontSizes':
+ return generateFontSizeValue(prop, propName, 'scss');
+ case 'typography':
+ return generateTypographyOutput(prop, propName, true);
+ default:
+ return generateValue(prop, propName);
+ }
+ });
+
+ // In v3, the header is added automatically by Style Dictionary.
+ // The format function should only return the file content.
+ return [
+ customHeader + '\n\n',
+ '@use "../themes/functions.sizes" as font;\n',
+ prefixedVariables.join('\n') + '\n',
+ ].join('');
+ },
+});
+
+// Create utility-classes
+StyleDictionary.registerFormat({
+ name: 'cssUtilityClassesFormat',
+ format: function ({ dictionary }) { // Use 'format' for Style Dictionary v3
+ console.log('Generating Utility-Classes...');
+
+ // Arrays to store specific utility classes
+ const typographyUtilityClasses = [];
+ const otherUtilityClasses = [];
+
+ // Generate utility classes for each token
+ dictionary.allTokens.map((prop) => {
+ const tokenCategory = prop.attributes.category;
+
+ if (prop.$type === 'fontFamilies' || tokenCategory === 'scale' || tokenCategory === 'backdrop') {
+ // Not creating for the tokens below, as they make no sense to exist as utility-classes.
+ return;
+ }
+
+ // Remove consecutive repeated words from the token name, like border-border-color
+ const propName = removeConsecutiveRepeatedWords(prop.name);
+
+ if (prop.$type === 'typography') {
+ // Typography tokens are handled differently, as each might have a different tokenType
+ return typographyUtilityClasses.push(generateTypographyOutput(prop, propName, false));
+ } else if (tokenCategory.startsWith('round') || tokenCategory.startsWith('rectangular') || tokenCategory.startsWith('soft')) {
+ // Generate utility classes for border-radius shape tokens, as they have their own token json file, based on primitive tokens
+ return otherUtilityClasses.push(generateRadiusUtilityClasses(propName));
+ }
+
+ let utilityClass = '';
+ switch (tokenCategory) {
+ case 'color':
+ case 'primitives':
+ case 'semantics':
+ case 'text':
+ case 'bg':
+ case 'icon':
+ case 'state':
+ utilityClass = generateColorUtilityClasses(prop, propName);
+ break;
+ case 'border':
+ utilityClass = generateBorderUtilityClasses(prop, propName);
+ break;
+ case 'font':
+ utilityClass = generateFontUtilityClasses(prop, propName);
+ break;
+ case 'space':
+ utilityClass = generateSpaceUtilityClasses(prop, propName);
+ break;
+ case 'shadow':
+ case 'elevation':
+ utilityClass = generateShadowUtilityClasses(propName);
+ break;
+ default:
+ utilityClass = generateUtilityClasses(tokenCategory, propName);
+ }
+
+ return otherUtilityClasses.push(utilityClass);
+ });
+
+ const defaultSpaceUtilityClasses = generateDefaultSpaceUtilityClasses();
+ otherUtilityClasses.push(defaultSpaceUtilityClasses);
+
+ // Concatenate typography utility classes at the beginning
+ const finalOutput = typographyUtilityClasses.concat(otherUtilityClasses).join('\n');
+
+ // In v3, the header is added automatically by Style Dictionary.
+ // The format function should only return the file content.
+ return [
+ customHeader + '\n\n',
+ '@import "./ionic.vars";\n@import "../themes/mixins";\n',
+ finalOutput,
+ ].join('');
+ },
+});
+
+// APPLY THE CONFIGURATION
+const config = {
+ source: ["node_modules/outsystems-design-tokens/tokens/**/*.json"],
+ platforms: {
+ scss: {
+ transformGroup: "scss",
+ buildPath: './src/foundations/',
+ files: [
+ {
+ destination: "ionic.vars.scss",
+ format: "scssVariablesFormat",
+ },
+ {
+ destination: "ionic.utility.scss",
+ format: "cssUtilityClassesFormat",
+ }
+ ]
+ }
+ }
+};
+
+export default config;
\ No newline at end of file
diff --git a/core/scripts/tokens/utils.js b/core/scripts/tokens/utils.js
deleted file mode 100644
index c9d1c868863..00000000000
--- a/core/scripts/tokens/utils.js
+++ /dev/null
@@ -1,335 +0,0 @@
-let variablesPrefix; // Variable that holds the prefix used on all css and scss variables generated
-
-// Set the variable prefix value
-function setPrefixValue(prefix) {
- variablesPrefix = prefix;
- return variablesPrefix;
-}
-
-// Generates a valid rgba() color
-function getRgbaValue(propValue) {
- // Check if its rgba color
- const isRgba = hexToRgba(propValue);
- // If it is, then compose rgba() color, otherwise use the normal color
- if (isRgba !== null) {
- return (propValue = `rgba(${isRgba.r}, ${isRgba.g}, ${isRgba.b},${isRgba.a})`);
- } else {
- return propValue;
- }
-}
-
-// Translates an hex color value to rgb
-function hexToRgb(hex) {
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return result
- ? {
- r: parseInt(result[1], 16),
- g: parseInt(result[2], 16),
- b: parseInt(result[3], 16),
- }
- : null;
-}
-
-// Translates an hex color value to rgba
-function hexToRgba(hex) {
- const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return result
- ? {
- r: parseInt(result[1], 16),
- g: parseInt(result[2], 16),
- b: parseInt(result[3], 16),
- a: Math.round((parseInt(result[4], 16) * 100) / 255) / 100,
- }
- : null;
-}
-
-// Utility function to remove consecutive repeated words
-function removeConsecutiveRepeatedWords(str) {
- return str.replace(/(\b\w+\b)(-\1)+/g, '$1');
-}
-
-// Generates a reference variable for an alias token type
-// (e.g., $ion-border-default: var(--ion-border-default, #d5d5d5) → $ion-border-default: var(--ion-border-default, $ion-primitives-neutral-400))
-function getAliasReferenceVariable(prop) {
- if (typeof prop.$value === 'string' && prop.$value.startsWith('{') && prop.$value.endsWith('}')) {
- // Remove curly braces and replace dots with dashes
- let ref = prop.$value.slice(1, -1).replace(/\./g, '-');
- // Remove consecutive repeated words (e.g., border-border-radius-0 → border-radius-0)
- ref = removeConsecutiveRepeatedWords(ref);
- return `$${variablesPrefix}-${ref}`;
- }
- return null;
-}
-
-// Generates a valid box-shadow value from a shadow Design Token structure
-function generateShadowValue(prop, propName) {
- const cssShadow = prop.$value.map(shadow => {
- // Assuming shadow is an object with properties like offsetX, offsetY, blurRadius, spreadRadius, color
- const color = getRgbaValue(shadow.color);
- return `${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${color}`;
-}).join(', ');
-
- return `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${cssShadow});`;
-}
-
-// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
-function generateFontSizeValue(prop, propName, variableType = 'css') {
- return variableType === 'scss'
- ? `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, font.px-to-rem(${parseInt(
- prop.$value
- )}));`
- : `--${propName}: #{font.px-to-rem(${parseInt(prop.$value)})};`;
-}
-
-// Generates a valid font-family value from a font-family Design Token structure
-function generateFontFamilyValue(prop, propName, variableType = 'css') {
- // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
- const _propName = propName.split('-').slice(0, -1).join('-');
-
- return variableType === 'scss'
- ? `$${variablesPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, "${prop.$value}", sans-serif);`
- : `--${variablesPrefix}-${_propName}: "${prop.$value}", sans-serif;`;
-}
-
-// Generates a final value, based if the Design Token is of type color or not
-function generateValue(prop, propName) {
- // Use the original value to detect aliases
- const aliasVar = getAliasReferenceVariable({ $value: prop.original.$value });
-
- // Always generate the main variable
- let mainValue;
- if (aliasVar) {
- mainValue = `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${aliasVar});`;
- } else {
- mainValue = `$${variablesPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${prop.$value});`;
- }
-
- // Always generate the -rgb variable if it's a color
- const rgb = hexToRgb(prop.$value);
- let rgbDeclaration = '';
- if (rgb) {
- rgbDeclaration = `\n$${variablesPrefix}-${propName}-rgb: var(--${variablesPrefix}-${propName}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
- }
-
- return `${mainValue}${rgbDeclaration}`;
-}
-
-// Generates a typography based css utility-class or scss variable from a typography token structure
-function generateTypographyOutput(prop, propName, isVariable) {
- const typography = prop.original.$value;
-
- // Extract the part after the last dot and trim any extraneous characters
- const extractLastPart = (str) => str.split('.').pop().replace(/[^\w-]/g, '');
-
- const _initialWrapper = isVariable ? ': (' : ` {`;
- const _endWrapper = isVariable ? ')' : `}`;
- const _prefix = isVariable ? '$' : `.`;
- const _endChar = isVariable ? ',' : ';';
-
- // This exact format is needed so that it compiles the tokens with the expected lint rules
- return `
- ${_prefix}${variablesPrefix}-${propName}${_initialWrapper}
- font-size: $${variablesPrefix}-font-size-${extractLastPart(typography.fontSize)}${_endChar}
- font-style: ${prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal'}${_endChar}
- font-weight: $${variablesPrefix}-font-weight-${extractLastPart(typography.fontWeight)}${_endChar}
- letter-spacing: $${variablesPrefix}-font-letter-spacing-${extractLastPart(typography.letterSpacing) || 0}${_endChar}
- line-height: $${variablesPrefix}-font-line-height-${extractLastPart(typography.lineHeight)}${_endChar}
- text-transform: ${typography.textCase}${_endChar}
- text-decoration: ${typography.textDecoration}${_endChar}
- ${_endWrapper};
- `;
-}
-
-// Generates a color based css utility-class from a color Design Token structure
-function generateColorUtilityClasses(prop, className) {
- const isBg = className.includes('bg');
- const cssProp = isBg ? 'background-color' : 'color';
- return `.${variablesPrefix}-${className} {
- --${cssProp}: $${variablesPrefix}-${prop.name};
- ${cssProp}: $${variablesPrefix}-${prop.name};
-}`;
-}
-
-// Generates margin and padding utility classes to match the token-agnostic
-// utilities provided by the Ionic Framework
-function generateDefaultSpaceUtilityClasses() {
- const zeroMarginPaddingToken = 'space-0';
- const defaultMarginPaddingToken = 'space-400';
-
- const marginPaddingTemplate = (type) => `
-.${variablesPrefix}-no-${type} {
- --${type}-top: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
- --${type}-end: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
- --${type}-bottom: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
- --${type}-start: #{$${variablesPrefix}-${zeroMarginPaddingToken}};
-
- @include ${type}($${variablesPrefix}-${zeroMarginPaddingToken});
-};
-
-.${variablesPrefix}-${type} {
- --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
- --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
- --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
- --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
- @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken});
-};
-
-.${variablesPrefix}-${type}-top {
- --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
- @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, null, null);
-};
-
-.${variablesPrefix}-${type}-end {
- --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
- @include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, null);
-};
-
-.${variablesPrefix}-${type}-bottom {
- --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
- @include ${type}(null, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
-};
-
-.${variablesPrefix}-${type}-start {
- --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
- @include ${type}(null, null, null, $${variablesPrefix}-${defaultMarginPaddingToken});
-};
-
-.${variablesPrefix}-${type}-vertical {
- --${type}-top: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
- --${type}-bottom: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
- @include ${type}($${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken}, null);
-};
-
-.${variablesPrefix}-${type}-horizontal {
- --${type}-start: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
- --${type}-end: #{$${variablesPrefix}-${defaultMarginPaddingToken}};
-
- @include ${type}(null, $${variablesPrefix}-${defaultMarginPaddingToken}, null, $${variablesPrefix}-${defaultMarginPaddingToken});
-};
-`;
-
- return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
-}
-
-// Generates a margin or padding based css utility-class from a space Design Token structure
-function generateSpaceUtilityClasses(prop, className) {
- // This exact format is needed so that it compiles the tokens with the expected lint rules
- // It will generate classes for margin and padding, for equal sizing on all side and each direction
- const marginPaddingTemplate = (type) => `
-.${variablesPrefix}-${type}-${className} {
- --${type}-top: #{$${variablesPrefix}-${prop.name}};
- --${type}-end: #{$${variablesPrefix}-${prop.name}};
- --${type}-bottom: #{$${variablesPrefix}-${prop.name}};
- --${type}-start: #{$${variablesPrefix}-${prop.name}};
-
- @include ${type}($${variablesPrefix}-${prop.name});
-};
-
-.${variablesPrefix}-${type}-top-${className} {
- --${type}-top: #{$${variablesPrefix}-${prop.name}};
-
- @include ${type}($${variablesPrefix}-${prop.name}, null, null, null);
-};
-
-.${variablesPrefix}-${type}-end-${className} {
- --${type}-end: #{$${variablesPrefix}-${prop.name}};
-
- @include ${type}(null, $${variablesPrefix}-${prop.name}, null, null);
-};
-
-.${variablesPrefix}-${type}-bottom-${className} {
- --${type}-bottom: #{$${variablesPrefix}-${prop.name}};
-
- @include ${type}(null, null, $${variablesPrefix}-${prop.name}, null);
-};
-
-.${variablesPrefix}-${type}-start-${className} {
- --${type}-start: #{$${variablesPrefix}-${prop.name}};
-
- @include ${type}(null, null, null, $${variablesPrefix}-${prop.name});
-};
-`;
-
- // Add gap utility classes for gap tokens
- const generateGapUtilityClasses = () =>`
-.${variablesPrefix}-gap-${prop.name} {
- gap: #{$${variablesPrefix}-${prop.name}};
-};
-`;
-
- return `${generateGapUtilityClasses()}\n${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
-}
-
-// Generates a valid box-shadow value from a shadow Design Token structure
-function generateRadiusUtilityClasses(propName) {
- return `.${variablesPrefix}-${propName} {
- --border-radius: $${variablesPrefix}-${propName};
- border-radius: $${variablesPrefix}-${propName};
-}`;
-}
-
-// Generates a border based css utility-class from a font Design Token structure
-function generateBorderUtilityClasses(prop, propName) {
- let attribute;
-
- switch (prop.attributes.type) {
- case 'border-radius':
- case 'border-style':
- attribute = prop.attributes.type;
- break;
- case 'border-size':
- attribute = 'border-width';
- break;
- default:
- attribute = 'border-color';
- }
- return `.${variablesPrefix}-${propName} {
- --${attribute}: $${variablesPrefix}-${propName};
- ${attribute}: $${variablesPrefix}-${propName};
-}`;
-}
-
-// Generates a font based css utility-class from a font Design Token structure
-function generateFontUtilityClasses(prop, propName) {
- return `.${variablesPrefix}-${propName} {\n ${prop.attributes.type}: $${variablesPrefix}-${propName};\n}`;
-}
-
-// Generates a valid box-shadow value from a shadow Design Token structure
-function generateShadowUtilityClasses(propName) {
- return `.${variablesPrefix}-${propName} {
- --box-shadow: $${variablesPrefix}-${propName};
- box-shadow: $${variablesPrefix}-${propName};
-}`;
-}
-
-// Generates a utility class for a given token category and name
-function generateUtilityClasses(tokenCategory, propName){
- return `.${variablesPrefix}-${propName} {\n ${tokenCategory}: $${variablesPrefix}-${propName};\n}`;
-}
-
-module.exports = {
- getRgbaValue,
- hexToRgb,
- generateShadowValue,
- generateFontSizeValue,
- generateFontFamilyValue,
- generateTypographyOutput,
- generateValue,
- getAliasReferenceVariable,
- setPrefixValue,
- generateRadiusUtilityClasses,
- generateColorUtilityClasses,
- generateDefaultSpaceUtilityClasses,
- generateSpaceUtilityClasses,
- removeConsecutiveRepeatedWords,
- generateBorderUtilityClasses,
- generateFontUtilityClasses,
- generateShadowUtilityClasses,
- generateUtilityClasses
-};
diff --git a/core/scripts/tokens/utils.mjs b/core/scripts/tokens/utils.mjs
new file mode 100644
index 00000000000..c86fb7e34f1
--- /dev/null
+++ b/core/scripts/tokens/utils.mjs
@@ -0,0 +1,320 @@
+let variablesPrefix; // Variable that holds the prefix used on all css variables generated
+let classAndScssPrefix; // Variable that holds the prefix used on all css utility-classes and scss variables generated
+
+// Set the variable prefix value
+export function setVariablePrefixValue(prefix) {
+ variablesPrefix = prefix;
+ return variablesPrefix;
+}
+
+export function setClassesAndScssPrefixValue(prefix) {
+ classAndScssPrefix = prefix;
+ return classAndScssPrefix;
+}
+
+// Generates a valid rgba() color
+export function getRgbaValue(propValue) {
+ // Check if its rgba color
+ const isRgba = hexToRgba(propValue);
+ // If it is, then compose rgba() color, otherwise use the normal color
+ if (isRgba !== null) {
+ return (propValue = `rgba(${isRgba.r}, ${isRgba.g}, ${isRgba.b},${isRgba.a})`);
+ } else {
+ return propValue;
+ }
+}
+
+// Translates an hex color value to rgb
+export function hexToRgb(hex) {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result
+ ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16),
+ }
+ : null;
+}
+
+// Translates an hex color value to rgba
+function hexToRgba(hex) {
+ const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ return result
+ ? {
+ r: parseInt(result[1], 16),
+ g: parseInt(result[2], 16),
+ b: parseInt(result[3], 16),
+ a: Math.round((parseInt(result[4], 16) * 100) / 255) / 100,
+ }
+ : null;
+}
+
+// Utility function to remove consecutive repeated words
+export function removeConsecutiveRepeatedWords(str) {
+ return str.replace(/(\b\w+\b)(-\1)+/g, '$1');
+}
+
+// Generates a reference variable for an alias token type
+// (e.g., $ion-border-default: var(--ion-border-default, #d5d5d5) → $ion-border-default: var(--ion-border-default, $ion-primitives-neutral-400))
+export function getAliasReferenceVariable(prop) {
+ if (typeof prop.$value === 'string' && prop.$value.startsWith('{') && prop.$value.endsWith('}')) {
+ // Remove curly braces and replace dots with dashes
+ let ref = prop.$value.slice(1, -1).replace(/\./g, '-');
+ // Remove consecutive repeated words (e.g., border-border-radius-0 → border-radius-0)
+ ref = removeConsecutiveRepeatedWords(ref);
+ return `$${classAndScssPrefix}-${ref}`;
+ }
+ return null;
+}
+
+// Generates a valid box-shadow value from a shadow Design Token structure
+export function generateShadowValue(prop, propName) {
+ const cssShadow = prop.$value.map(shadow => {
+ // Assuming shadow is an object with properties like offsetX, offsetY, blurRadius, spreadRadius, color
+ const color = getRgbaValue(shadow.color);
+ return `${shadow.x}px ${shadow.y}px ${shadow.blur}px ${shadow.spread}px ${color}`;
+}).join(', ');
+
+ return `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${cssShadow});`;
+}
+
+// Generates a valid font-size value from a font-size Design Token structure, while transforming the pixels to rem
+export function generateFontSizeValue(prop, propName, variableType = 'css') {
+ return variableType === 'scss'
+ ? `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, font.px-to-rem(${parseInt(
+ prop.$value
+ )}));`
+ : `--${propName}: #{font.px-to-rem(${parseInt(prop.$value)})};`;
+}
+
+// Generates a valid font-family value from a font-family Design Token structure
+export function generateFontFamilyValue(prop, propName, variableType = 'css') {
+ // Remove the last word from the token, as it contains the name of the font, which we don't want to be included on the generated variables
+ const _propName = propName.split('-').slice(0, -1).join('-');
+
+ return variableType === 'scss'
+ ? `$${classAndScssPrefix}-${_propName}: var(--${variablesPrefix}-${_propName}, "${prop.$value}", sans-serif);`
+ : `--${variablesPrefix}-${_propName}: "${prop.$value}", sans-serif;`;
+}
+
+// Generates a final value, based if the Design Token is of type color or not
+export function generateValue(prop, propName) {
+ // Use the original value to detect aliases
+ const aliasVar = getAliasReferenceVariable({ $value: prop.original.$value });
+
+ // Always generate the main variable
+ let mainValue;
+ if (aliasVar) {
+ mainValue = `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${aliasVar});`;
+ } else {
+ mainValue = `$${classAndScssPrefix}-${propName}: var(--${variablesPrefix}-${propName}, ${prop.$value});`;
+ }
+
+ // Always generate the -rgb variable if it's a color
+ const rgb = hexToRgb(prop.$value);
+ let rgbDeclaration = '';
+ if (rgb) {
+ rgbDeclaration = `\n$${classAndScssPrefix}-${propName}-rgb: var(--${variablesPrefix}-${propName}-rgb, ${rgb.r}, ${rgb.g}, ${rgb.b});`;
+ }
+
+ return `${mainValue}${rgbDeclaration}`;
+}
+
+// Generates a typography based css utility-class or scss variable from a typography token structure
+export function generateTypographyOutput(prop, propName, isVariable) {
+ const typography = prop.original.$value;
+
+ // Extract the part after the last dot and trim any extraneous characters
+ const extractLastPart = (str) => str.split('.').pop().replace(/[^\w-]/g, '');
+
+ const _initialWrapper = isVariable ? ': (' : ` {`;
+ const _endWrapper = isVariable ? ')' : `}`;
+ const _prefix = isVariable ? '$' : `.`;
+ const _endChar = isVariable ? ',' : ';';
+
+ // This exact format is needed so that it compiles the tokens with the expected lint rules
+ return `
+ ${_prefix}${classAndScssPrefix}-${propName}${_initialWrapper}
+ font-size: $${classAndScssPrefix}-font-size-${extractLastPart(typography.fontSize)}${_endChar}
+ font-style: ${prop.attributes.item?.toLowerCase() === 'italic' ? 'italic' : 'normal'}${_endChar}
+ font-weight: $${classAndScssPrefix}-font-weight-${extractLastPart(typography.fontWeight)}${_endChar}
+ letter-spacing: $${classAndScssPrefix}-font-letter-spacing-${extractLastPart(typography.letterSpacing) || 0}${_endChar}
+ line-height: $${classAndScssPrefix}-font-line-height-${extractLastPart(typography.lineHeight)}${_endChar}
+ text-transform: ${typography.textCase}${_endChar}
+ text-decoration: ${typography.textDecoration}${_endChar}
+ ${_endWrapper};
+ `;
+}
+
+// Generates a color based css utility-class from a color Design Token structure
+export function generateColorUtilityClasses(prop, className) {
+ const isBg = className.includes('bg');
+ const cssProp = isBg ? 'background-color' : 'color';
+ return `.${classAndScssPrefix}-${className} {
+ --${cssProp}: $${classAndScssPrefix}-${prop.name};
+ ${cssProp}: $${classAndScssPrefix}-${prop.name};
+}`;
+}
+
+// Generates margin and padding utility classes to match the token-agnostic
+// utilities provided by the Ionic Framework
+export function generateDefaultSpaceUtilityClasses() {
+ const zeroMarginPaddingToken = 'space-0';
+ const defaultMarginPaddingToken = 'space-400';
+
+ const marginPaddingTemplate = (type) => `
+.${classAndScssPrefix}-no-${type} {
+ --${type}-top: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
+ --${type}-end: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
+ --${type}-bottom: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
+ --${type}-start: #{$${classAndScssPrefix}-${zeroMarginPaddingToken}};
+
+ @include ${type}($${classAndScssPrefix}-${zeroMarginPaddingToken});
+};
+
+.${classAndScssPrefix}-${type} {
+ --${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+ --${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+ --${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+ --${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+ @include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken});
+};
+
+.${classAndScssPrefix}-${type}-top {
+ --${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+ @include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken}, null, null, null);
+};
+
+.${classAndScssPrefix}-${type}-end {
+ --${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+ @include ${type}(null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null, null);
+};
+
+.${classAndScssPrefix}-${type}-bottom {
+ --${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+ @include ${type}(null, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null);
+};
+
+.${classAndScssPrefix}-${type}-start {
+ --${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+ @include ${type}(null, null, null, $${classAndScssPrefix}-${defaultMarginPaddingToken});
+};
+
+.${classAndScssPrefix}-${type}-vertical {
+ --${type}-top: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+ --${type}-bottom: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+ @include ${type}($${classAndScssPrefix}-${defaultMarginPaddingToken}, null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null);
+};
+
+.${classAndScssPrefix}-${type}-horizontal {
+ --${type}-start: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+ --${type}-end: #{$${classAndScssPrefix}-${defaultMarginPaddingToken}};
+
+ @include ${type}(null, $${classAndScssPrefix}-${defaultMarginPaddingToken}, null, $${classAndScssPrefix}-${defaultMarginPaddingToken});
+};
+`;
+
+ return `${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+}
+
+// Generates a margin or padding based css utility-class from a space Design Token structure
+export function generateSpaceUtilityClasses(prop, className) {
+ // This exact format is needed so that it compiles the tokens with the expected lint rules
+ // It will generate classes for margin and padding, for equal sizing on all side and each direction
+ const marginPaddingTemplate = (type) => `
+.${classAndScssPrefix}-${type}-${className} {
+ --${type}-top: #{$${classAndScssPrefix}-${prop.name}};
+ --${type}-end: #{$${classAndScssPrefix}-${prop.name}};
+ --${type}-bottom: #{$${classAndScssPrefix}-${prop.name}};
+ --${type}-start: #{$${classAndScssPrefix}-${prop.name}};
+
+ @include ${type}($${classAndScssPrefix}-${prop.name});
+};
+
+.${classAndScssPrefix}-${type}-top-${className} {
+ --${type}-top: #{$${classAndScssPrefix}-${prop.name}};
+
+ @include ${type}($${classAndScssPrefix}-${prop.name}, null, null, null);
+};
+
+.${classAndScssPrefix}-${type}-end-${className} {
+ --${type}-end: #{$${classAndScssPrefix}-${prop.name}};
+
+ @include ${type}(null, $${classAndScssPrefix}-${prop.name}, null, null);
+};
+
+.${classAndScssPrefix}-${type}-bottom-${className} {
+ --${type}-bottom: #{$${classAndScssPrefix}-${prop.name}};
+
+ @include ${type}(null, null, $${classAndScssPrefix}-${prop.name}, null);
+};
+
+.${classAndScssPrefix}-${type}-start-${className} {
+ --${type}-start: #{$${classAndScssPrefix}-${prop.name}};
+
+ @include ${type}(null, null, null, $${classAndScssPrefix}-${prop.name});
+};
+`;
+
+ // Add gap utility classes for gap tokens
+ const generateGapUtilityClasses = () =>`
+.${classAndScssPrefix}-gap-${prop.name} {
+ gap: #{$${classAndScssPrefix}-${prop.name}};
+};
+`;
+
+ return `${generateGapUtilityClasses()}\n${marginPaddingTemplate('margin')}\n${marginPaddingTemplate('padding')}`;
+}
+
+// Generates a valid box-shadow value from a shadow Design Token structure
+export function generateRadiusUtilityClasses(propName) {
+ return `.${classAndScssPrefix}-${propName} {
+ --border-radius: $${classAndScssPrefix}-${propName};
+ border-radius: $${classAndScssPrefix}-${propName};
+}`;
+}
+
+// Generates a border based css utility-class from a font Design Token structure
+export function generateBorderUtilityClasses(prop, propName) {
+ let attribute;
+
+ switch (prop.attributes.type) {
+ case 'border-radius':
+ case 'border-style':
+ attribute = prop.attributes.type;
+ break;
+ case 'border-size':
+ attribute = 'border-width';
+ break;
+ default:
+ attribute = 'border-color';
+ }
+ return `.${classAndScssPrefix}-${propName} {
+ --${attribute}: $${classAndScssPrefix}-${propName};
+ ${attribute}: $${classAndScssPrefix}-${propName};
+}`;
+}
+
+// Generates a font based css utility-class from a font Design Token structure
+export function generateFontUtilityClasses(prop, propName) {
+ return `.${classAndScssPrefix}-${propName} {\n ${prop.attributes.type}: $${classAndScssPrefix}-${propName};\n}`;
+}
+
+// Generates a valid box-shadow value from a shadow Design Token structure
+export function generateShadowUtilityClasses(propName) {
+ return `.${classAndScssPrefix}-${propName} {
+ --box-shadow: $${classAndScssPrefix}-${propName};
+ box-shadow: $${classAndScssPrefix}-${propName};
+}`;
+}
+
+// Generates a utility class for a given token category and name
+export function generateUtilityClasses(tokenCategory, propName){
+ return `.${classAndScssPrefix}-${propName} {\n ${tokenCategory}: $${classAndScssPrefix}-${propName};\n}`;
+}
\ No newline at end of file
diff --git a/core/src/css/test/typography/basic/index.html b/core/src/css/test/typography/basic/index.html
index 818ee6d8141..d956b7193f0 100644
--- a/core/src/css/test/typography/basic/index.html
+++ b/core/src/css/test/typography/basic/index.html
@@ -8,9 +8,8 @@
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
-
-
+
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png
index 4204e47ff76..8e3e26ee8a3 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Chrome-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png
index dc5d1f50dbd..cdfb789ae2c 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Firefox-linux.png differ
diff --git a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png
index b7f30d3dce2..dd4febbf39b 100644
Binary files a/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png and b/core/src/css/test/typography/basic/typography.e2e.ts-snapshots/ionic-typography-basic-styles-ionic-md-ltr-light-Mobile-Safari-linux.png differ
diff --git a/core/src/foundations/ionic.utility.scss b/core/src/foundations/ionic.utility.scss
index fe576ae5d7c..b1b8dbb4282 100644
--- a/core/src/foundations/ionic.utility.scss
+++ b/core/src/foundations/ionic.utility.scss
@@ -1,6 +1,5 @@
-/*
-Do not edit directly, this file was auto-generated.
-*/
+// Do not edit directly, this file was auto-generated.
+
@import "./ionic.vars";
@import "../themes/mixins";
diff --git a/core/src/foundations/ionic.vars.scss b/core/src/foundations/ionic.vars.scss
index 1582e707e57..f5b5c5c4538 100644
--- a/core/src/foundations/ionic.vars.scss
+++ b/core/src/foundations/ionic.vars.scss
@@ -1,951 +1,954 @@
-/*
-Do not edit directly, this file was auto-generated.
-*/
-@use "../themes/functions.sizes" as font;
+// Do not edit directly, this file was auto-generated.
-$ion-primitives-neutral-100: var(--ion-primitives-neutral-100, #f5f5f5);
-$ion-primitives-neutral-100-rgb: var(--ion-primitives-neutral-100-rgb, 245, 245, 245);
-$ion-primitives-neutral-200: var(--ion-primitives-neutral-200, #efefef);
-$ion-primitives-neutral-200-rgb: var(--ion-primitives-neutral-200-rgb, 239, 239, 239);
-$ion-primitives-neutral-300: var(--ion-primitives-neutral-300, #e0e0e0);
-$ion-primitives-neutral-300-rgb: var(--ion-primitives-neutral-300-rgb, 224, 224, 224);
-$ion-primitives-neutral-400: var(--ion-primitives-neutral-400, #d5d5d5);
-$ion-primitives-neutral-400-rgb: var(--ion-primitives-neutral-400-rgb, 213, 213, 213);
-$ion-primitives-neutral-500: var(--ion-primitives-neutral-500, #a2a2a2);
-$ion-primitives-neutral-500-rgb: var(--ion-primitives-neutral-500-rgb, 162, 162, 162);
-$ion-primitives-neutral-600: var(--ion-primitives-neutral-600, #8c8c8c);
-$ion-primitives-neutral-600-rgb: var(--ion-primitives-neutral-600-rgb, 140, 140, 140);
-$ion-primitives-neutral-700: var(--ion-primitives-neutral-700, #777777);
-$ion-primitives-neutral-700-rgb: var(--ion-primitives-neutral-700-rgb, 119, 119, 119);
-$ion-primitives-neutral-800: var(--ion-primitives-neutral-800, #626262);
-$ion-primitives-neutral-800-rgb: var(--ion-primitives-neutral-800-rgb, 98, 98, 98);
-$ion-primitives-neutral-900: var(--ion-primitives-neutral-900, #4e4e4e);
-$ion-primitives-neutral-900-rgb: var(--ion-primitives-neutral-900-rgb, 78, 78, 78);
-$ion-primitives-neutral-1000: var(--ion-primitives-neutral-1000, #3b3b3b);
-$ion-primitives-neutral-1000-rgb: var(--ion-primitives-neutral-1000-rgb, 59, 59, 59);
-$ion-primitives-neutral-1100: var(--ion-primitives-neutral-1100, #292929);
-$ion-primitives-neutral-1100-rgb: var(--ion-primitives-neutral-1100-rgb, 41, 41, 41);
-$ion-primitives-neutral-1200: var(--ion-primitives-neutral-1200, #242424);
-$ion-primitives-neutral-1200-rgb: var(--ion-primitives-neutral-1200-rgb, 36, 36, 36);
-$ion-primitives-base-white: var(--ion-primitives-base-white, #ffffff);
-$ion-primitives-base-white-rgb: var(--ion-primitives-base-white-rgb, 255, 255, 255);
-$ion-primitives-base-black: var(--ion-primitives-base-black, #111111);
-$ion-primitives-base-black-rgb: var(--ion-primitives-base-black-rgb, 17, 17, 17);
-$ion-primitives-red-100: var(--ion-primitives-red-100, #feeded);
-$ion-primitives-red-100-rgb: var(--ion-primitives-red-100-rgb, 254, 237, 237);
-$ion-primitives-red-200: var(--ion-primitives-red-200, #fde1e1);
-$ion-primitives-red-200-rgb: var(--ion-primitives-red-200-rgb, 253, 225, 225);
-$ion-primitives-red-300: var(--ion-primitives-red-300, #fcc1c1);
-$ion-primitives-red-300-rgb: var(--ion-primitives-red-300-rgb, 252, 193, 193);
-$ion-primitives-red-400: var(--ion-primitives-red-400, #faa1a1);
-$ion-primitives-red-400-rgb: var(--ion-primitives-red-400-rgb, 250, 161, 161);
-$ion-primitives-red-500: var(--ion-primitives-red-500, #f97d7d);
-$ion-primitives-red-500-rgb: var(--ion-primitives-red-500-rgb, 249, 125, 125);
-$ion-primitives-red-600: var(--ion-primitives-red-600, #f85151);
-$ion-primitives-red-600-rgb: var(--ion-primitives-red-600-rgb, 248, 81, 81);
-$ion-primitives-red-700: var(--ion-primitives-red-700, #e52929);
-$ion-primitives-red-700-rgb: var(--ion-primitives-red-700-rgb, 229, 41, 41);
-$ion-primitives-red-800: var(--ion-primitives-red-800, #bf2222);
-$ion-primitives-red-800-rgb: var(--ion-primitives-red-800-rgb, 191, 34, 34);
-$ion-primitives-red-900: var(--ion-primitives-red-900, #991b1b);
-$ion-primitives-red-900-rgb: var(--ion-primitives-red-900-rgb, 153, 27, 27);
-$ion-primitives-red-1000: var(--ion-primitives-red-1000, #761515);
-$ion-primitives-red-1000-rgb: var(--ion-primitives-red-1000-rgb, 118, 21, 21);
-$ion-primitives-red-1100: var(--ion-primitives-red-1100, #540f0f);
-$ion-primitives-red-1100-rgb: var(--ion-primitives-red-1100-rgb, 84, 15, 15);
-$ion-primitives-red-1200: var(--ion-primitives-red-1200, #330909);
-$ion-primitives-red-1200-rgb: var(--ion-primitives-red-1200-rgb, 51, 9, 9);
-$ion-primitives-pumpkin-100: var(--ion-primitives-pumpkin-100, #feedea);
-$ion-primitives-pumpkin-100-rgb: var(--ion-primitives-pumpkin-100-rgb, 254, 237, 234);
-$ion-primitives-pumpkin-200: var(--ion-primitives-pumpkin-200, #fde0db);
-$ion-primitives-pumpkin-200-rgb: var(--ion-primitives-pumpkin-200-rgb, 253, 224, 219);
-$ion-primitives-pumpkin-300: var(--ion-primitives-pumpkin-300, #fbbdb1);
-$ion-primitives-pumpkin-300-rgb: var(--ion-primitives-pumpkin-300-rgb, 251, 189, 177);
-$ion-primitives-pumpkin-400: var(--ion-primitives-pumpkin-400, #f9947c);
-$ion-primitives-pumpkin-400-rgb: var(--ion-primitives-pumpkin-400-rgb, 249, 148, 124);
-$ion-primitives-pumpkin-500: var(--ion-primitives-pumpkin-500, #f75d07);
-$ion-primitives-pumpkin-500-rgb: var(--ion-primitives-pumpkin-500-rgb, 247, 93, 7);
-$ion-primitives-pumpkin-600: var(--ion-primitives-pumpkin-600, #da5206);
-$ion-primitives-pumpkin-600-rgb: var(--ion-primitives-pumpkin-600-rgb, 218, 82, 6);
-$ion-primitives-pumpkin-700: var(--ion-primitives-pumpkin-700, #bd4705);
-$ion-primitives-pumpkin-700-rgb: var(--ion-primitives-pumpkin-700-rgb, 189, 71, 5);
-$ion-primitives-pumpkin-800: var(--ion-primitives-pumpkin-800, #9f3c05);
-$ion-primitives-pumpkin-800-rgb: var(--ion-primitives-pumpkin-800-rgb, 159, 60, 5);
-$ion-primitives-pumpkin-900: var(--ion-primitives-pumpkin-900, #803004);
-$ion-primitives-pumpkin-900-rgb: var(--ion-primitives-pumpkin-900-rgb, 128, 48, 4);
-$ion-primitives-pumpkin-1000: var(--ion-primitives-pumpkin-1000, #602403);
-$ion-primitives-pumpkin-1000-rgb: var(--ion-primitives-pumpkin-1000-rgb, 96, 36, 3);
-$ion-primitives-pumpkin-1100: var(--ion-primitives-pumpkin-1100, #401802);
-$ion-primitives-pumpkin-1100-rgb: var(--ion-primitives-pumpkin-1100-rgb, 64, 24, 2);
-$ion-primitives-pumpkin-1200: var(--ion-primitives-pumpkin-1200, #210c01);
-$ion-primitives-pumpkin-1200-rgb: var(--ion-primitives-pumpkin-1200-rgb, 33, 12, 1);
-$ion-primitives-orange-100: var(--ion-primitives-orange-100, #fff1ea);
-$ion-primitives-orange-100-rgb: var(--ion-primitives-orange-100-rgb, 255, 241, 234);
-$ion-primitives-orange-200: var(--ion-primitives-orange-200, #ffe8db);
-$ion-primitives-orange-200-rgb: var(--ion-primitives-orange-200-rgb, 255, 232, 219);
-$ion-primitives-orange-300: var(--ion-primitives-orange-300, #ffcfb1);
-$ion-primitives-orange-300-rgb: var(--ion-primitives-orange-300-rgb, 255, 207, 177);
-$ion-primitives-orange-400: var(--ion-primitives-orange-400, #ffb37b);
-$ion-primitives-orange-400-rgb: var(--ion-primitives-orange-400-rgb, 255, 179, 123);
-$ion-primitives-orange-500: var(--ion-primitives-orange-500, #ff9400);
-$ion-primitives-orange-500-rgb: var(--ion-primitives-orange-500-rgb, 255, 148, 0);
-$ion-primitives-orange-600: var(--ion-primitives-orange-600, #e18300);
-$ion-primitives-orange-600-rgb: var(--ion-primitives-orange-600-rgb, 225, 131, 0);
-$ion-primitives-orange-700: var(--ion-primitives-orange-700, #c37100);
-$ion-primitives-orange-700-rgb: var(--ion-primitives-orange-700-rgb, 195, 113, 0);
-$ion-primitives-orange-800: var(--ion-primitives-orange-800, #a45f00);
-$ion-primitives-orange-800-rgb: var(--ion-primitives-orange-800-rgb, 164, 95, 0);
-$ion-primitives-orange-900: var(--ion-primitives-orange-900, #844d00);
-$ion-primitives-orange-900-rgb: var(--ion-primitives-orange-900-rgb, 132, 77, 0);
-$ion-primitives-orange-1000: var(--ion-primitives-orange-1000, #633a00);
-$ion-primitives-orange-1000-rgb: var(--ion-primitives-orange-1000-rgb, 99, 58, 0);
-$ion-primitives-orange-1100: var(--ion-primitives-orange-1100, #422700);
-$ion-primitives-orange-1100-rgb: var(--ion-primitives-orange-1100-rgb, 66, 39, 0);
-$ion-primitives-orange-1200: var(--ion-primitives-orange-1200, #221400);
-$ion-primitives-orange-1200-rgb: var(--ion-primitives-orange-1200-rgb, 34, 20, 0);
-$ion-primitives-yellow-100: var(--ion-primitives-yellow-100, #fff9ea);
-$ion-primitives-yellow-100-rgb: var(--ion-primitives-yellow-100-rgb, 255, 249, 234);
-$ion-primitives-yellow-200: var(--ion-primitives-yellow-200, #fff5db);
-$ion-primitives-yellow-200-rgb: var(--ion-primitives-yellow-200-rgb, 255, 245, 219);
-$ion-primitives-yellow-300: var(--ion-primitives-yellow-300, #ffebb1);
-$ion-primitives-yellow-300-rgb: var(--ion-primitives-yellow-300-rgb, 255, 235, 177);
-$ion-primitives-yellow-400: var(--ion-primitives-yellow-400, #ffe07b);
-$ion-primitives-yellow-400-rgb: var(--ion-primitives-yellow-400-rgb, 255, 224, 123);
-$ion-primitives-yellow-500: var(--ion-primitives-yellow-500, #ffd600);
-$ion-primitives-yellow-500-rgb: var(--ion-primitives-yellow-500-rgb, 255, 214, 0);
-$ion-primitives-yellow-600: var(--ion-primitives-yellow-600, #f9bd0a);
-$ion-primitives-yellow-600-rgb: var(--ion-primitives-yellow-600-rgb, 249, 189, 10);
-$ion-primitives-yellow-700: var(--ion-primitives-yellow-700, #df9c00);
-$ion-primitives-yellow-700-rgb: var(--ion-primitives-yellow-700-rgb, 223, 156, 0);
-$ion-primitives-yellow-800: var(--ion-primitives-yellow-800, #ba8200);
-$ion-primitives-yellow-800-rgb: var(--ion-primitives-yellow-800-rgb, 186, 130, 0);
-$ion-primitives-yellow-900: var(--ion-primitives-yellow-900, #966503);
-$ion-primitives-yellow-900-rgb: var(--ion-primitives-yellow-900-rgb, 150, 101, 3);
-$ion-primitives-yellow-1000: var(--ion-primitives-yellow-1000, #704b02);
-$ion-primitives-yellow-1000-rgb: var(--ion-primitives-yellow-1000-rgb, 112, 75, 2);
-$ion-primitives-yellow-1100: var(--ion-primitives-yellow-1100, #533802);
-$ion-primitives-yellow-1100-rgb: var(--ion-primitives-yellow-1100-rgb, 83, 56, 2);
-$ion-primitives-yellow-1200: var(--ion-primitives-yellow-1200, #2c1e02);
-$ion-primitives-yellow-1200-rgb: var(--ion-primitives-yellow-1200-rgb, 44, 30, 2);
-$ion-primitives-lime-100: var(--ion-primitives-lime-100, #f3faea);
-$ion-primitives-lime-100-rgb: var(--ion-primitives-lime-100-rgb, 243, 250, 234);
-$ion-primitives-lime-200: var(--ion-primitives-lime-200, #eaf7db);
-$ion-primitives-lime-200-rgb: var(--ion-primitives-lime-200-rgb, 234, 247, 219);
-$ion-primitives-lime-300: var(--ion-primitives-lime-300, #d3efb2);
-$ion-primitives-lime-300-rgb: var(--ion-primitives-lime-300-rgb, 211, 239, 178);
-$ion-primitives-lime-400: var(--ion-primitives-lime-400, #bbe77d);
-$ion-primitives-lime-400-rgb: var(--ion-primitives-lime-400-rgb, 187, 231, 125);
-$ion-primitives-lime-500: var(--ion-primitives-lime-500, #a0df18);
-$ion-primitives-lime-500-rgb: var(--ion-primitives-lime-500-rgb, 160, 223, 24);
-$ion-primitives-lime-600: var(--ion-primitives-lime-600, #8dc515);
-$ion-primitives-lime-600-rgb: var(--ion-primitives-lime-600-rgb, 141, 197, 21);
-$ion-primitives-lime-700: var(--ion-primitives-lime-700, #7aab12);
-$ion-primitives-lime-700-rgb: var(--ion-primitives-lime-700-rgb, 122, 171, 18);
-$ion-primitives-lime-800: var(--ion-primitives-lime-800, #678f0f);
-$ion-primitives-lime-800-rgb: var(--ion-primitives-lime-800-rgb, 103, 143, 15);
-$ion-primitives-lime-900: var(--ion-primitives-lime-900, #53730c);
-$ion-primitives-lime-900-rgb: var(--ion-primitives-lime-900-rgb, 83, 115, 12);
-$ion-primitives-lime-1000: var(--ion-primitives-lime-1000, #3e5709);
-$ion-primitives-lime-1000-rgb: var(--ion-primitives-lime-1000-rgb, 62, 87, 9);
-$ion-primitives-lime-1100: var(--ion-primitives-lime-1100, #2a3a06);
-$ion-primitives-lime-1100-rgb: var(--ion-primitives-lime-1100-rgb, 42, 58, 6);
-$ion-primitives-lime-1200: var(--ion-primitives-lime-1200, #151e03);
-$ion-primitives-lime-1200-rgb: var(--ion-primitives-lime-1200-rgb, 21, 30, 3);
-$ion-primitives-green-100: var(--ion-primitives-green-100, #ebf9ec);
-$ion-primitives-green-100-rgb: var(--ion-primitives-green-100-rgb, 235, 249, 236);
-$ion-primitives-green-200: var(--ion-primitives-green-200, #dcf5de);
-$ion-primitives-green-200-rgb: var(--ion-primitives-green-200-rgb, 220, 245, 222);
-$ion-primitives-green-300: var(--ion-primitives-green-300, #b3ebb7);
-$ion-primitives-green-300-rgb: var(--ion-primitives-green-300-rgb, 179, 235, 183);
-$ion-primitives-green-400: var(--ion-primitives-green-400, #7fe089);
-$ion-primitives-green-400-rgb: var(--ion-primitives-green-400-rgb, 127, 224, 137);
-$ion-primitives-green-500: var(--ion-primitives-green-500, #23d643);
-$ion-primitives-green-500-rgb: var(--ion-primitives-green-500-rgb, 35, 214, 67);
-$ion-primitives-green-600: var(--ion-primitives-green-600, #1fbd3b);
-$ion-primitives-green-600-rgb: var(--ion-primitives-green-600-rgb, 31, 189, 59);
-$ion-primitives-green-700: var(--ion-primitives-green-700, #1ba433);
-$ion-primitives-green-700-rgb: var(--ion-primitives-green-700-rgb, 27, 164, 51);
-$ion-primitives-green-800: var(--ion-primitives-green-800, #178a2b);
-$ion-primitives-green-800-rgb: var(--ion-primitives-green-800-rgb, 23, 138, 43);
-$ion-primitives-green-900: var(--ion-primitives-green-900, #126f23);
-$ion-primitives-green-900-rgb: var(--ion-primitives-green-900-rgb, 18, 111, 35);
-$ion-primitives-green-1000: var(--ion-primitives-green-1000, #0e531a);
-$ion-primitives-green-1000-rgb: var(--ion-primitives-green-1000-rgb, 14, 83, 26);
-$ion-primitives-green-1100: var(--ion-primitives-green-1100, #093811);
-$ion-primitives-green-1100-rgb: var(--ion-primitives-green-1100-rgb, 9, 56, 17);
-$ion-primitives-green-1200: var(--ion-primitives-green-1200, #051d09);
-$ion-primitives-green-1200-rgb: var(--ion-primitives-green-1200-rgb, 5, 29, 9);
-$ion-primitives-teal-100: var(--ion-primitives-teal-100, #eaf8f5);
-$ion-primitives-teal-100-rgb: var(--ion-primitives-teal-100-rgb, 234, 248, 245);
-$ion-primitives-teal-200: var(--ion-primitives-teal-200, #dbf3ee);
-$ion-primitives-teal-200-rgb: var(--ion-primitives-teal-200-rgb, 219, 243, 238);
-$ion-primitives-teal-300: var(--ion-primitives-teal-300, #b1e7dd);
-$ion-primitives-teal-300-rgb: var(--ion-primitives-teal-300-rgb, 177, 231, 221);
-$ion-primitives-teal-400: var(--ion-primitives-teal-400, #7bdbca);
-$ion-primitives-teal-400-rgb: var(--ion-primitives-teal-400-rgb, 123, 219, 202);
-$ion-primitives-teal-500: var(--ion-primitives-teal-500, #00cfb7);
-$ion-primitives-teal-500-rgb: var(--ion-primitives-teal-500-rgb, 0, 207, 183);
-$ion-primitives-teal-600: var(--ion-primitives-teal-600, #00b7a2);
-$ion-primitives-teal-600-rgb: var(--ion-primitives-teal-600-rgb, 0, 183, 162);
-$ion-primitives-teal-700: var(--ion-primitives-teal-700, #009e8c);
-$ion-primitives-teal-700-rgb: var(--ion-primitives-teal-700-rgb, 0, 158, 140);
-$ion-primitives-teal-800: var(--ion-primitives-teal-800, #008576);
-$ion-primitives-teal-800-rgb: var(--ion-primitives-teal-800-rgb, 0, 133, 118);
-$ion-primitives-teal-900: var(--ion-primitives-teal-900, #006b5f);
-$ion-primitives-teal-900-rgb: var(--ion-primitives-teal-900-rgb, 0, 107, 95);
-$ion-primitives-teal-1000: var(--ion-primitives-teal-1000, #005147);
-$ion-primitives-teal-1000-rgb: var(--ion-primitives-teal-1000-rgb, 0, 81, 71);
-$ion-primitives-teal-1100: var(--ion-primitives-teal-1100, #003630);
-$ion-primitives-teal-1100-rgb: var(--ion-primitives-teal-1100-rgb, 0, 54, 48);
-$ion-primitives-teal-1200: var(--ion-primitives-teal-1200, #001c19);
-$ion-primitives-teal-1200-rgb: var(--ion-primitives-teal-1200-rgb, 0, 28, 25);
-$ion-primitives-aqua-100: var(--ion-primitives-aqua-100, #ebf9fe);
-$ion-primitives-aqua-100-rgb: var(--ion-primitives-aqua-100-rgb, 235, 249, 254);
-$ion-primitives-aqua-200: var(--ion-primitives-aqua-200, #dcf4fd);
-$ion-primitives-aqua-200-rgb: var(--ion-primitives-aqua-200-rgb, 220, 244, 253);
-$ion-primitives-aqua-300: var(--ion-primitives-aqua-300, #b3e9fc);
-$ion-primitives-aqua-300-rgb: var(--ion-primitives-aqua-300-rgb, 179, 233, 252);
-$ion-primitives-aqua-400: var(--ion-primitives-aqua-400, #80defa);
-$ion-primitives-aqua-400-rgb: var(--ion-primitives-aqua-400-rgb, 128, 222, 250);
-$ion-primitives-aqua-500: var(--ion-primitives-aqua-500, #27d3f9);
-$ion-primitives-aqua-500-rgb: var(--ion-primitives-aqua-500-rgb, 39, 211, 249);
-$ion-primitives-aqua-600: var(--ion-primitives-aqua-600, #22bbdc);
-$ion-primitives-aqua-600-rgb: var(--ion-primitives-aqua-600-rgb, 34, 187, 220);
-$ion-primitives-aqua-700: var(--ion-primitives-aqua-700, #1ea2bf);
-$ion-primitives-aqua-700-rgb: var(--ion-primitives-aqua-700-rgb, 30, 162, 191);
-$ion-primitives-aqua-800: var(--ion-primitives-aqua-800, #1988a0);
-$ion-primitives-aqua-800-rgb: var(--ion-primitives-aqua-800-rgb, 25, 136, 160);
-$ion-primitives-aqua-900: var(--ion-primitives-aqua-900, #146d81);
-$ion-primitives-aqua-900-rgb: var(--ion-primitives-aqua-900-rgb, 20, 109, 129);
-$ion-primitives-aqua-1000: var(--ion-primitives-aqua-1000, #0f5261);
-$ion-primitives-aqua-1000-rgb: var(--ion-primitives-aqua-1000-rgb, 15, 82, 97);
-$ion-primitives-aqua-1100: var(--ion-primitives-aqua-1100, #0a3741);
-$ion-primitives-aqua-1100-rgb: var(--ion-primitives-aqua-1100-rgb, 10, 55, 65);
-$ion-primitives-aqua-1200: var(--ion-primitives-aqua-1200, #051c21);
-$ion-primitives-aqua-1200-rgb: var(--ion-primitives-aqua-1200-rgb, 5, 28, 33);
-$ion-primitives-blue-100: var(--ion-primitives-blue-100, #f2f4fd);
-$ion-primitives-blue-100-rgb: var(--ion-primitives-blue-100-rgb, 242, 244, 253);
-$ion-primitives-blue-200: var(--ion-primitives-blue-200, #e9ecfc);
-$ion-primitives-blue-200-rgb: var(--ion-primitives-blue-200-rgb, 233, 236, 252);
-$ion-primitives-blue-300: var(--ion-primitives-blue-300, #d0d7fa);
-$ion-primitives-blue-300-rgb: var(--ion-primitives-blue-300-rgb, 208, 215, 250);
-$ion-primitives-blue-400: var(--ion-primitives-blue-400, #b5c0f7);
-$ion-primitives-blue-400-rgb: var(--ion-primitives-blue-400-rgb, 181, 192, 247);
-$ion-primitives-blue-500: var(--ion-primitives-blue-500, #94a5f4);
-$ion-primitives-blue-500-rgb: var(--ion-primitives-blue-500-rgb, 148, 165, 244);
-$ion-primitives-blue-600: var(--ion-primitives-blue-600, #6986f2);
-$ion-primitives-blue-600-rgb: var(--ion-primitives-blue-600-rgb, 105, 134, 242);
-$ion-primitives-blue-700: var(--ion-primitives-blue-700, #105cef);
-$ion-primitives-blue-700-rgb: var(--ion-primitives-blue-700-rgb, 16, 92, 239);
-$ion-primitives-blue-800: var(--ion-primitives-blue-800, #0f54da);
-$ion-primitives-blue-800-rgb: var(--ion-primitives-blue-800-rgb, 15, 84, 218);
-$ion-primitives-blue-900: var(--ion-primitives-blue-900, #0d4bc3);
-$ion-primitives-blue-900-rgb: var(--ion-primitives-blue-900-rgb, 13, 75, 195);
-$ion-primitives-blue-1000: var(--ion-primitives-blue-1000, #0b41a9);
-$ion-primitives-blue-1000-rgb: var(--ion-primitives-blue-1000-rgb, 11, 65, 169);
-$ion-primitives-blue-1100: var(--ion-primitives-blue-1100, #09358a);
-$ion-primitives-blue-1100-rgb: var(--ion-primitives-blue-1100-rgb, 9, 53, 138);
-$ion-primitives-blue-1200: var(--ion-primitives-blue-1200, #072561);
-$ion-primitives-blue-1200-rgb: var(--ion-primitives-blue-1200-rgb, 7, 37, 97);
-$ion-primitives-indigo-100: var(--ion-primitives-indigo-100, #f3f2fb);
-$ion-primitives-indigo-100-rgb: var(--ion-primitives-indigo-100-rgb, 243, 242, 251);
-$ion-primitives-indigo-200: var(--ion-primitives-indigo-200, #eae9f9);
-$ion-primitives-indigo-200-rgb: var(--ion-primitives-indigo-200-rgb, 234, 233, 249);
-$ion-primitives-indigo-300: var(--ion-primitives-indigo-300, #d3d1f2);
-$ion-primitives-indigo-300-rgb: var(--ion-primitives-indigo-300-rgb, 211, 209, 242);
-$ion-primitives-indigo-400: var(--ion-primitives-indigo-400, #bab5eb);
-$ion-primitives-indigo-400-rgb: var(--ion-primitives-indigo-400-rgb, 186, 181, 235);
-$ion-primitives-indigo-500: var(--ion-primitives-indigo-500, #9d95e4);
-$ion-primitives-indigo-500-rgb: var(--ion-primitives-indigo-500-rgb, 157, 149, 228);
-$ion-primitives-indigo-600: var(--ion-primitives-indigo-600, #786bdd);
-$ion-primitives-indigo-600-rgb: var(--ion-primitives-indigo-600-rgb, 120, 107, 221);
-$ion-primitives-indigo-700: var(--ion-primitives-indigo-700, #411bd5);
-$ion-primitives-indigo-700-rgb: var(--ion-primitives-indigo-700-rgb, 65, 27, 213);
-$ion-primitives-indigo-800: var(--ion-primitives-indigo-800, #3b19c3);
-$ion-primitives-indigo-800-rgb: var(--ion-primitives-indigo-800-rgb, 59, 25, 195);
-$ion-primitives-indigo-900: var(--ion-primitives-indigo-900, #3516ae);
-$ion-primitives-indigo-900-rgb: var(--ion-primitives-indigo-900-rgb, 53, 22, 174);
-$ion-primitives-indigo-1000: var(--ion-primitives-indigo-1000, #2e1397);
-$ion-primitives-indigo-1000-rgb: var(--ion-primitives-indigo-1000-rgb, 46, 19, 151);
-$ion-primitives-indigo-1100: var(--ion-primitives-indigo-1100, #26107b);
-$ion-primitives-indigo-1100-rgb: var(--ion-primitives-indigo-1100-rgb, 38, 16, 123);
-$ion-primitives-indigo-1200: var(--ion-primitives-indigo-1200, #1a0b57);
-$ion-primitives-indigo-1200-rgb: var(--ion-primitives-indigo-1200-rgb, 26, 11, 87);
-$ion-primitives-violet-100: var(--ion-primitives-violet-100, #f5f2fe);
-$ion-primitives-violet-100-rgb: var(--ion-primitives-violet-100-rgb, 245, 242, 254);
-$ion-primitives-violet-200: var(--ion-primitives-violet-200, #eee9fd);
-$ion-primitives-violet-200-rgb: var(--ion-primitives-violet-200-rgb, 238, 233, 253);
-$ion-primitives-violet-300: var(--ion-primitives-violet-300, #dcd1fb);
-$ion-primitives-violet-300-rgb: var(--ion-primitives-violet-300-rgb, 220, 209, 251);
-$ion-primitives-violet-400: var(--ion-primitives-violet-400, #c9b6f9);
-$ion-primitives-violet-400-rgb: var(--ion-primitives-violet-400-rgb, 201, 182, 249);
-$ion-primitives-violet-500: var(--ion-primitives-violet-500, #b396f6);
-$ion-primitives-violet-500-rgb: var(--ion-primitives-violet-500-rgb, 179, 150, 246);
-$ion-primitives-violet-600: var(--ion-primitives-violet-600, #9a6cf4);
-$ion-primitives-violet-600-rgb: var(--ion-primitives-violet-600-rgb, 154, 108, 244);
-$ion-primitives-violet-700: var(--ion-primitives-violet-700, #7c20f2);
-$ion-primitives-violet-700-rgb: var(--ion-primitives-violet-700-rgb, 124, 32, 242);
-$ion-primitives-violet-800: var(--ion-primitives-violet-800, #711ddd);
-$ion-primitives-violet-800-rgb: var(--ion-primitives-violet-800-rgb, 113, 29, 221);
-$ion-primitives-violet-900: var(--ion-primitives-violet-900, #651ac5);
-$ion-primitives-violet-900-rgb: var(--ion-primitives-violet-900-rgb, 101, 26, 197);
-$ion-primitives-violet-1000: var(--ion-primitives-violet-1000, #5817ab);
-$ion-primitives-violet-1000-rgb: var(--ion-primitives-violet-1000-rgb, 88, 23, 171);
-$ion-primitives-violet-1100: var(--ion-primitives-violet-1100, #48128c);
-$ion-primitives-violet-1100-rgb: var(--ion-primitives-violet-1100-rgb, 72, 18, 140);
-$ion-primitives-violet-1200: var(--ion-primitives-violet-1200, #330d63);
-$ion-primitives-violet-1200-rgb: var(--ion-primitives-violet-1200-rgb, 51, 13, 99);
-$ion-primitives-purple-100: var(--ion-primitives-purple-100, #f9f3fe);
-$ion-primitives-purple-100-rgb: var(--ion-primitives-purple-100-rgb, 249, 243, 254);
-$ion-primitives-purple-200: var(--ion-primitives-purple-200, #f5eafd);
-$ion-primitives-purple-200-rgb: var(--ion-primitives-purple-200-rgb, 245, 234, 253);
-$ion-primitives-purple-300: var(--ion-primitives-purple-300, #e9d3fa);
-$ion-primitives-purple-300-rgb: var(--ion-primitives-purple-300-rgb, 233, 211, 250);
-$ion-primitives-purple-400: var(--ion-primitives-purple-400, #deb9f8);
-$ion-primitives-purple-400-rgb: var(--ion-primitives-purple-400-rgb, 222, 185, 248);
-$ion-primitives-purple-500: var(--ion-primitives-purple-500, #d29bf6);
-$ion-primitives-purple-500-rgb: var(--ion-primitives-purple-500-rgb, 210, 155, 246);
-$ion-primitives-purple-600: var(--ion-primitives-purple-600, #c575f3);
-$ion-primitives-purple-600-rgb: var(--ion-primitives-purple-600-rgb, 197, 117, 243);
-$ion-primitives-purple-700: var(--ion-primitives-purple-700, #b73cf1);
-$ion-primitives-purple-700-rgb: var(--ion-primitives-purple-700-rgb, 183, 60, 241);
-$ion-primitives-purple-800: var(--ion-primitives-purple-800, #a737dc);
-$ion-primitives-purple-800-rgb: var(--ion-primitives-purple-800-rgb, 167, 55, 220);
-$ion-primitives-purple-900: var(--ion-primitives-purple-900, #9531c5);
-$ion-primitives-purple-900-rgb: var(--ion-primitives-purple-900-rgb, 149, 49, 197);
-$ion-primitives-purple-1000: var(--ion-primitives-purple-1000, #812aaa);
-$ion-primitives-purple-1000-rgb: var(--ion-primitives-purple-1000-rgb, 129, 42, 170);
-$ion-primitives-purple-1100: var(--ion-primitives-purple-1100, #6a238b);
-$ion-primitives-purple-1100-rgb: var(--ion-primitives-purple-1100-rgb, 106, 35, 139);
-$ion-primitives-purple-1200: var(--ion-primitives-purple-1200, #4b1862);
-$ion-primitives-purple-1200-rgb: var(--ion-primitives-purple-1200-rgb, 75, 24, 98);
-$ion-primitives-magenta-100: var(--ion-primitives-magenta-100, #fdf3fb);
-$ion-primitives-magenta-100-rgb: var(--ion-primitives-magenta-100-rgb, 253, 243, 251);
-$ion-primitives-magenta-200: var(--ion-primitives-magenta-200, #fcebf8);
-$ion-primitives-magenta-200-rgb: var(--ion-primitives-magenta-200-rgb, 252, 235, 248);
-$ion-primitives-magenta-300: var(--ion-primitives-magenta-300, #f9d4f1);
-$ion-primitives-magenta-300-rgb: var(--ion-primitives-magenta-300-rgb, 249, 212, 241);
-$ion-primitives-magenta-400: var(--ion-primitives-magenta-400, #f6bcea);
-$ion-primitives-magenta-400-rgb: var(--ion-primitives-magenta-400-rgb, 246, 188, 234);
-$ion-primitives-magenta-500: var(--ion-primitives-magenta-500, #f39fe3);
-$ion-primitives-magenta-500-rgb: var(--ion-primitives-magenta-500-rgb, 243, 159, 227);
-$ion-primitives-magenta-600: var(--ion-primitives-magenta-600, #f07cdb);
-$ion-primitives-magenta-600-rgb: var(--ion-primitives-magenta-600-rgb, 240, 124, 219);
-$ion-primitives-magenta-700: var(--ion-primitives-magenta-700, #ed4ad3);
-$ion-primitives-magenta-700-rgb: var(--ion-primitives-magenta-700-rgb, 237, 74, 211);
-$ion-primitives-magenta-800: var(--ion-primitives-magenta-800, #d844c1);
-$ion-primitives-magenta-800-rgb: var(--ion-primitives-magenta-800-rgb, 216, 68, 193);
-$ion-primitives-magenta-900: var(--ion-primitives-magenta-900, #c13cac);
-$ion-primitives-magenta-900-rgb: var(--ion-primitives-magenta-900-rgb, 193, 60, 172);
-$ion-primitives-magenta-1000: var(--ion-primitives-magenta-1000, #a83495);
-$ion-primitives-magenta-1000-rgb: var(--ion-primitives-magenta-1000-rgb, 168, 52, 149);
-$ion-primitives-magenta-1100: var(--ion-primitives-magenta-1100, #892b7a);
-$ion-primitives-magenta-1100-rgb: var(--ion-primitives-magenta-1100-rgb, 137, 43, 122);
-$ion-primitives-magenta-1200: var(--ion-primitives-magenta-1200, #611e56);
-$ion-primitives-magenta-1200-rgb: var(--ion-primitives-magenta-1200-rgb, 97, 30, 86);
-$ion-primitives-pink-100: var(--ion-primitives-pink-100, #fef3f5);
-$ion-primitives-pink-100-rgb: var(--ion-primitives-pink-100-rgb, 254, 243, 245);
-$ion-primitives-pink-200: var(--ion-primitives-pink-200, #fdeaee);
-$ion-primitives-pink-200-rgb: var(--ion-primitives-pink-200-rgb, 253, 234, 238);
-$ion-primitives-pink-300: var(--ion-primitives-pink-300, #fad3dc);
-$ion-primitives-pink-300-rgb: var(--ion-primitives-pink-300-rgb, 250, 211, 220);
-$ion-primitives-pink-400: var(--ion-primitives-pink-400, #f8b9c9);
-$ion-primitives-pink-400-rgb: var(--ion-primitives-pink-400-rgb, 248, 185, 201);
-$ion-primitives-pink-500: var(--ion-primitives-pink-500, #f69bb3);
-$ion-primitives-pink-500-rgb: var(--ion-primitives-pink-500-rgb, 246, 155, 179);
-$ion-primitives-pink-600: var(--ion-primitives-pink-600, #f3759a);
-$ion-primitives-pink-600-rgb: var(--ion-primitives-pink-600-rgb, 243, 117, 154);
-$ion-primitives-pink-700: var(--ion-primitives-pink-700, #f13b7d);
-$ion-primitives-pink-700-rgb: var(--ion-primitives-pink-700-rgb, 241, 59, 125);
-$ion-primitives-pink-800: var(--ion-primitives-pink-800, #dc3672);
-$ion-primitives-pink-800-rgb: var(--ion-primitives-pink-800-rgb, 220, 54, 114);
-$ion-primitives-pink-900: var(--ion-primitives-pink-900, #c53066);
-$ion-primitives-pink-900-rgb: var(--ion-primitives-pink-900-rgb, 197, 48, 102);
-$ion-primitives-pink-1000: var(--ion-primitives-pink-1000, #aa2a58);
-$ion-primitives-pink-1000-rgb: var(--ion-primitives-pink-1000-rgb, 170, 42, 88);
-$ion-primitives-pink-1100: var(--ion-primitives-pink-1100, #8b2248);
-$ion-primitives-pink-1100-rgb: var(--ion-primitives-pink-1100-rgb, 139, 34, 72);
-$ion-primitives-pink-1200: var(--ion-primitives-pink-1200, #621833);
-$ion-primitives-pink-1200-rgb: var(--ion-primitives-pink-1200-rgb, 98, 24, 51);
-$ion-semantics-primary-100: var(--ion-semantics-primary-100, $ion-primitives-blue-100);
-$ion-semantics-primary-100-rgb: var(--ion-semantics-primary-100-rgb, 242, 244, 253);
-$ion-semantics-primary-200: var(--ion-semantics-primary-200, $ion-primitives-blue-200);
-$ion-semantics-primary-200-rgb: var(--ion-semantics-primary-200-rgb, 233, 236, 252);
-$ion-semantics-primary-300: var(--ion-semantics-primary-300, $ion-primitives-blue-300);
-$ion-semantics-primary-300-rgb: var(--ion-semantics-primary-300-rgb, 208, 215, 250);
-$ion-semantics-primary-400: var(--ion-semantics-primary-400, $ion-primitives-blue-400);
-$ion-semantics-primary-400-rgb: var(--ion-semantics-primary-400-rgb, 181, 192, 247);
-$ion-semantics-primary-500: var(--ion-semantics-primary-500, $ion-primitives-blue-500);
-$ion-semantics-primary-500-rgb: var(--ion-semantics-primary-500-rgb, 148, 165, 244);
-$ion-semantics-primary-600: var(--ion-semantics-primary-600, $ion-primitives-blue-600);
-$ion-semantics-primary-600-rgb: var(--ion-semantics-primary-600-rgb, 105, 134, 242);
-$ion-semantics-primary-700: var(--ion-semantics-primary-700, $ion-primitives-blue-700);
-$ion-semantics-primary-700-rgb: var(--ion-semantics-primary-700-rgb, 16, 92, 239);
-$ion-semantics-primary-800: var(--ion-semantics-primary-800, $ion-primitives-blue-800);
-$ion-semantics-primary-800-rgb: var(--ion-semantics-primary-800-rgb, 15, 84, 218);
-$ion-semantics-primary-900: var(--ion-semantics-primary-900, $ion-primitives-blue-900);
-$ion-semantics-primary-900-rgb: var(--ion-semantics-primary-900-rgb, 13, 75, 195);
-$ion-semantics-primary-1000: var(--ion-semantics-primary-1000, $ion-primitives-blue-1000);
-$ion-semantics-primary-1000-rgb: var(--ion-semantics-primary-1000-rgb, 11, 65, 169);
-$ion-semantics-primary-1100: var(--ion-semantics-primary-1100, $ion-primitives-blue-1100);
-$ion-semantics-primary-1100-rgb: var(--ion-semantics-primary-1100-rgb, 9, 53, 138);
-$ion-semantics-primary-1200: var(--ion-semantics-primary-1200, $ion-primitives-blue-1200);
-$ion-semantics-primary-1200-rgb: var(--ion-semantics-primary-1200-rgb, 7, 37, 97);
-$ion-semantics-primary-base: var(--ion-semantics-primary-base, $ion-semantics-primary-700);
-$ion-semantics-primary-base-rgb: var(--ion-semantics-primary-base-rgb, 16, 92, 239);
-$ion-semantics-info-100: var(--ion-semantics-info-100, $ion-primitives-blue-100);
-$ion-semantics-info-100-rgb: var(--ion-semantics-info-100-rgb, 242, 244, 253);
-$ion-semantics-info-200: var(--ion-semantics-info-200, $ion-primitives-blue-200);
-$ion-semantics-info-200-rgb: var(--ion-semantics-info-200-rgb, 233, 236, 252);
-$ion-semantics-info-300: var(--ion-semantics-info-300, $ion-primitives-blue-300);
-$ion-semantics-info-300-rgb: var(--ion-semantics-info-300-rgb, 208, 215, 250);
-$ion-semantics-info-400: var(--ion-semantics-info-400, $ion-primitives-blue-400);
-$ion-semantics-info-400-rgb: var(--ion-semantics-info-400-rgb, 181, 192, 247);
-$ion-semantics-info-500: var(--ion-semantics-info-500, $ion-primitives-blue-500);
-$ion-semantics-info-500-rgb: var(--ion-semantics-info-500-rgb, 148, 165, 244);
-$ion-semantics-info-600: var(--ion-semantics-info-600, $ion-primitives-blue-600);
-$ion-semantics-info-600-rgb: var(--ion-semantics-info-600-rgb, 105, 134, 242);
-$ion-semantics-info-700: var(--ion-semantics-info-700, $ion-primitives-blue-700);
-$ion-semantics-info-700-rgb: var(--ion-semantics-info-700-rgb, 16, 92, 239);
-$ion-semantics-info-800: var(--ion-semantics-info-800, $ion-primitives-blue-800);
-$ion-semantics-info-800-rgb: var(--ion-semantics-info-800-rgb, 15, 84, 218);
-$ion-semantics-info-900: var(--ion-semantics-info-900, $ion-primitives-blue-900);
-$ion-semantics-info-900-rgb: var(--ion-semantics-info-900-rgb, 13, 75, 195);
-$ion-semantics-info-1000: var(--ion-semantics-info-1000, $ion-primitives-blue-1000);
-$ion-semantics-info-1000-rgb: var(--ion-semantics-info-1000-rgb, 11, 65, 169);
-$ion-semantics-info-1100: var(--ion-semantics-info-1100, $ion-primitives-blue-1100);
-$ion-semantics-info-1100-rgb: var(--ion-semantics-info-1100-rgb, 9, 53, 138);
-$ion-semantics-info-1200: var(--ion-semantics-info-1200, $ion-primitives-blue-1200);
-$ion-semantics-info-1200-rgb: var(--ion-semantics-info-1200-rgb, 7, 37, 97);
-$ion-semantics-info-base: var(--ion-semantics-info-base, $ion-semantics-info-700);
-$ion-semantics-info-base-rgb: var(--ion-semantics-info-base-rgb, 16, 92, 239);
-$ion-semantics-success-100: var(--ion-semantics-success-100, $ion-primitives-green-100);
-$ion-semantics-success-100-rgb: var(--ion-semantics-success-100-rgb, 235, 249, 236);
-$ion-semantics-success-200: var(--ion-semantics-success-200, $ion-primitives-green-200);
-$ion-semantics-success-200-rgb: var(--ion-semantics-success-200-rgb, 220, 245, 222);
-$ion-semantics-success-300: var(--ion-semantics-success-300, $ion-primitives-green-300);
-$ion-semantics-success-300-rgb: var(--ion-semantics-success-300-rgb, 179, 235, 183);
-$ion-semantics-success-400: var(--ion-semantics-success-400, $ion-primitives-green-400);
-$ion-semantics-success-400-rgb: var(--ion-semantics-success-400-rgb, 127, 224, 137);
-$ion-semantics-success-500: var(--ion-semantics-success-500, $ion-primitives-green-500);
-$ion-semantics-success-500-rgb: var(--ion-semantics-success-500-rgb, 35, 214, 67);
-$ion-semantics-success-600: var(--ion-semantics-success-600, $ion-primitives-green-600);
-$ion-semantics-success-600-rgb: var(--ion-semantics-success-600-rgb, 31, 189, 59);
-$ion-semantics-success-700: var(--ion-semantics-success-700, $ion-primitives-green-700);
-$ion-semantics-success-700-rgb: var(--ion-semantics-success-700-rgb, 27, 164, 51);
-$ion-semantics-success-800: var(--ion-semantics-success-800, $ion-primitives-green-800);
-$ion-semantics-success-800-rgb: var(--ion-semantics-success-800-rgb, 23, 138, 43);
-$ion-semantics-success-900: var(--ion-semantics-success-900, $ion-primitives-green-900);
-$ion-semantics-success-900-rgb: var(--ion-semantics-success-900-rgb, 18, 111, 35);
-$ion-semantics-success-1000: var(--ion-semantics-success-1000, $ion-primitives-green-1000);
-$ion-semantics-success-1000-rgb: var(--ion-semantics-success-1000-rgb, 14, 83, 26);
-$ion-semantics-success-1100: var(--ion-semantics-success-1100, $ion-primitives-green-1100);
-$ion-semantics-success-1100-rgb: var(--ion-semantics-success-1100-rgb, 9, 56, 17);
-$ion-semantics-success-1200: var(--ion-semantics-success-1200, $ion-primitives-green-1200);
-$ion-semantics-success-1200-rgb: var(--ion-semantics-success-1200-rgb, 5, 29, 9);
-$ion-semantics-success-base: var(--ion-semantics-success-base, $ion-semantics-success-700);
-$ion-semantics-success-base-rgb: var(--ion-semantics-success-base-rgb, 27, 164, 51);
-$ion-semantics-danger-100: var(--ion-semantics-danger-100, $ion-primitives-red-100);
-$ion-semantics-danger-100-rgb: var(--ion-semantics-danger-100-rgb, 254, 237, 237);
-$ion-semantics-danger-200: var(--ion-semantics-danger-200, $ion-primitives-red-200);
-$ion-semantics-danger-200-rgb: var(--ion-semantics-danger-200-rgb, 253, 225, 225);
-$ion-semantics-danger-300: var(--ion-semantics-danger-300, $ion-primitives-red-300);
-$ion-semantics-danger-300-rgb: var(--ion-semantics-danger-300-rgb, 252, 193, 193);
-$ion-semantics-danger-400: var(--ion-semantics-danger-400, $ion-primitives-red-400);
-$ion-semantics-danger-400-rgb: var(--ion-semantics-danger-400-rgb, 250, 161, 161);
-$ion-semantics-danger-500: var(--ion-semantics-danger-500, $ion-primitives-red-500);
-$ion-semantics-danger-500-rgb: var(--ion-semantics-danger-500-rgb, 249, 125, 125);
-$ion-semantics-danger-600: var(--ion-semantics-danger-600, $ion-primitives-red-600);
-$ion-semantics-danger-600-rgb: var(--ion-semantics-danger-600-rgb, 248, 81, 81);
-$ion-semantics-danger-700: var(--ion-semantics-danger-700, $ion-primitives-red-700);
-$ion-semantics-danger-700-rgb: var(--ion-semantics-danger-700-rgb, 229, 41, 41);
-$ion-semantics-danger-800: var(--ion-semantics-danger-800, $ion-primitives-red-800);
-$ion-semantics-danger-800-rgb: var(--ion-semantics-danger-800-rgb, 191, 34, 34);
-$ion-semantics-danger-900: var(--ion-semantics-danger-900, $ion-primitives-red-900);
-$ion-semantics-danger-900-rgb: var(--ion-semantics-danger-900-rgb, 153, 27, 27);
-$ion-semantics-danger-1000: var(--ion-semantics-danger-1000, $ion-primitives-red-1000);
-$ion-semantics-danger-1000-rgb: var(--ion-semantics-danger-1000-rgb, 118, 21, 21);
-$ion-semantics-danger-1100: var(--ion-semantics-danger-1100, $ion-primitives-red-1100);
-$ion-semantics-danger-1100-rgb: var(--ion-semantics-danger-1100-rgb, 84, 15, 15);
-$ion-semantics-danger-1200: var(--ion-semantics-danger-1200, $ion-primitives-red-1200);
-$ion-semantics-danger-1200-rgb: var(--ion-semantics-danger-1200-rgb, 51, 9, 9);
-$ion-semantics-danger-base: var(--ion-semantics-danger-base, $ion-semantics-danger-700);
-$ion-semantics-danger-base-rgb: var(--ion-semantics-danger-base-rgb, 229, 41, 41);
-$ion-semantics-warning-100: var(--ion-semantics-warning-100, $ion-primitives-yellow-100);
-$ion-semantics-warning-100-rgb: var(--ion-semantics-warning-100-rgb, 255, 249, 234);
-$ion-semantics-warning-200: var(--ion-semantics-warning-200, $ion-primitives-yellow-200);
-$ion-semantics-warning-200-rgb: var(--ion-semantics-warning-200-rgb, 255, 245, 219);
-$ion-semantics-warning-300: var(--ion-semantics-warning-300, $ion-primitives-yellow-300);
-$ion-semantics-warning-300-rgb: var(--ion-semantics-warning-300-rgb, 255, 235, 177);
-$ion-semantics-warning-400: var(--ion-semantics-warning-400, $ion-primitives-yellow-400);
-$ion-semantics-warning-400-rgb: var(--ion-semantics-warning-400-rgb, 255, 224, 123);
-$ion-semantics-warning-500: var(--ion-semantics-warning-500, $ion-primitives-yellow-500);
-$ion-semantics-warning-500-rgb: var(--ion-semantics-warning-500-rgb, 255, 214, 0);
-$ion-semantics-warning-600: var(--ion-semantics-warning-600, $ion-primitives-yellow-600);
-$ion-semantics-warning-600-rgb: var(--ion-semantics-warning-600-rgb, 249, 189, 10);
-$ion-semantics-warning-700: var(--ion-semantics-warning-700, $ion-primitives-yellow-700);
-$ion-semantics-warning-700-rgb: var(--ion-semantics-warning-700-rgb, 223, 156, 0);
-$ion-semantics-warning-800: var(--ion-semantics-warning-800, $ion-primitives-yellow-800);
-$ion-semantics-warning-800-rgb: var(--ion-semantics-warning-800-rgb, 186, 130, 0);
-$ion-semantics-warning-900: var(--ion-semantics-warning-900, $ion-primitives-yellow-900);
-$ion-semantics-warning-900-rgb: var(--ion-semantics-warning-900-rgb, 150, 101, 3);
-$ion-semantics-warning-1000: var(--ion-semantics-warning-1000, $ion-primitives-yellow-1000);
-$ion-semantics-warning-1000-rgb: var(--ion-semantics-warning-1000-rgb, 112, 75, 2);
-$ion-semantics-warning-1100: var(--ion-semantics-warning-1100, $ion-primitives-yellow-1100);
-$ion-semantics-warning-1100-rgb: var(--ion-semantics-warning-1100-rgb, 83, 56, 2);
-$ion-semantics-warning-1200: var(--ion-semantics-warning-1200, $ion-primitives-yellow-1200);
-$ion-semantics-warning-1200-rgb: var(--ion-semantics-warning-1200-rgb, 44, 30, 2);
-$ion-semantics-warning-base: var(--ion-semantics-warning-base, $ion-semantics-warning-500);
-$ion-semantics-warning-base-rgb: var(--ion-semantics-warning-base-rgb, 255, 214, 0);
-$ion-scale-0: var(--ion-scale-0, 0px);
-$ion-scale-100: var(--ion-scale-100, 4px);
-$ion-scale-150: var(--ion-scale-150, 6px);
-$ion-scale-200: var(--ion-scale-200, 8px);
-$ion-scale-250: var(--ion-scale-250, 10px);
-$ion-scale-300: var(--ion-scale-300, 12px);
-$ion-scale-400: var(--ion-scale-400, 16px);
-$ion-scale-500: var(--ion-scale-500, 20px);
-$ion-scale-600: var(--ion-scale-600, 24px);
-$ion-scale-700: var(--ion-scale-700, 28px);
-$ion-scale-800: var(--ion-scale-800, 32px);
-$ion-scale-900: var(--ion-scale-900, 36px);
-$ion-scale-1000: var(--ion-scale-1000, 40px);
-$ion-scale-1100: var(--ion-scale-1100, 44px);
-$ion-scale-1200: var(--ion-scale-1200, 48px);
-$ion-scale-1400: var(--ion-scale-1400, 56px);
-$ion-scale-1600: var(--ion-scale-1600, 64px);
-$ion-scale-1800: var(--ion-scale-1800, 72px);
-$ion-scale-2000: var(--ion-scale-2000, 80px);
-$ion-scale-2400: var(--ion-scale-2400, 96px);
-$ion-scale-2800: var(--ion-scale-2800, 112px);
-$ion-scale-3200: var(--ion-scale-3200, 128px);
-$ion-scale-3400: var(--ion-scale-3400, 136px);
-$ion-scale-3600: var(--ion-scale-3600, 144px);
-$ion-scale-4000: var(--ion-scale-4000, 160px);
-$ion-scale-5000: var(--ion-scale-5000, 200px);
-$ion-scale-6200: var(--ion-scale-6200, 248px);
-$ion-scale-7400: var(--ion-scale-7400, 296px);
-$ion-scale-9000: var(--ion-scale-9000, 360px);
-$ion-scale-025: var(--ion-scale-025, 1px);
-$ion-scale-050: var(--ion-scale-050, 2px);
-$ion-scale-075: var(--ion-scale-075, 3px);
-$ion-border-default: var(--ion-border-default, $ion-primitives-neutral-400);
-$ion-border-default-rgb: var(--ion-border-default-rgb, 213, 213, 213);
-$ion-border-boldest: var(--ion-border-boldest, $ion-primitives-neutral-1200);
-$ion-border-boldest-rgb: var(--ion-border-boldest-rgb, 36, 36, 36);
-$ion-border-subtle: var(--ion-border-subtle, $ion-primitives-neutral-100);
-$ion-border-subtle-rgb: var(--ion-border-subtle-rgb, 245, 245, 245);
-$ion-border-subtlest: var(--ion-border-subtlest, $ion-primitives-base-white);
-$ion-border-subtlest-rgb: var(--ion-border-subtlest-rgb, 255, 255, 255);
-$ion-border-primary: var(--ion-border-primary, $ion-semantics-primary-base);
-$ion-border-primary-rgb: var(--ion-border-primary-rgb, 16, 92, 239);
-$ion-border-success: var(--ion-border-success, $ion-semantics-success-900);
-$ion-border-success-rgb: var(--ion-border-success-rgb, 18, 111, 35);
-$ion-border-warning: var(--ion-border-warning, $ion-semantics-warning-900);
-$ion-border-warning-rgb: var(--ion-border-warning-rgb, 150, 101, 3);
-$ion-border-disabled: var(--ion-border-disabled, $ion-primitives-neutral-300);
-$ion-border-disabled-rgb: var(--ion-border-disabled-rgb, 224, 224, 224);
-$ion-border-focus-0: var(--ion-border-focus-0, none);
-$ion-border-focus-default: var(--ion-border-focus-default, $ion-primitives-blue-400);
-$ion-border-focus-default-rgb: var(--ion-border-focus-default-rgb, 181, 192, 247);
-$ion-border-focus-error: var(--ion-border-focus-error, $ion-primitives-red-400);
-$ion-border-focus-error-rgb: var(--ion-border-focus-error-rgb, 250, 161, 161);
-$ion-border-danger-default: var(--ion-border-danger-default, $ion-semantics-danger-800);
-$ion-border-danger-default-rgb: var(--ion-border-danger-default-rgb, 191, 34, 34);
-$ion-border-danger-press: var(--ion-border-danger-press, $ion-semantics-danger-1000);
-$ion-border-danger-press-rgb: var(--ion-border-danger-press-rgb, 118, 21, 21);
-$ion-border-input-default: var(--ion-border-input-default, $ion-primitives-neutral-500);
-$ion-border-input-default-rgb: var(--ion-border-input-default-rgb, 162, 162, 162);
-$ion-border-input-press: var(--ion-border-input-press, $ion-primitives-neutral-700);
-$ion-border-input-press-rgb: var(--ion-border-input-press-rgb, 119, 119, 119);
-$ion-border-input-read-only: var(--ion-border-input-read-only, $ion-primitives-neutral-500);
-$ion-border-input-read-only-rgb: var(--ion-border-input-read-only-rgb, 162, 162, 162);
-$ion-border-style-none: var(--ion-border-style-none, none);
-$ion-border-style-solid: var(--ion-border-style-solid, solid);
-$ion-border-style-dashed: var(--ion-border-style-dashed, dashed);
-$ion-border-style-dotted: var(--ion-border-style-dotted, dotted);
-$ion-border-size-0: var(--ion-border-size-0, $ion-scale-0);
-$ion-border-size-025: var(--ion-border-size-025, $ion-scale-025);
-$ion-border-size-050: var(--ion-border-size-050, $ion-scale-050);
-$ion-border-size-075: var(--ion-border-size-075, $ion-scale-075);
-$ion-border-radius-0: var(--ion-border-radius-0, $ion-scale-0);
-$ion-border-radius-100: var(--ion-border-radius-100, $ion-scale-100);
-$ion-border-radius-200: var(--ion-border-radius-200, $ion-scale-200);
-$ion-border-radius-300: var(--ion-border-radius-300, $ion-scale-300);
-$ion-border-radius-400: var(--ion-border-radius-400, $ion-scale-400);
-$ion-border-radius-500: var(--ion-border-radius-500, $ion-scale-500);
-$ion-border-radius-800: var(--ion-border-radius-800, $ion-scale-800);
-$ion-border-radius-1000: var(--ion-border-radius-1000, $ion-scale-1000);
-$ion-border-radius-full: var(--ion-border-radius-full, 999px);
-$ion-border-radius-025: var(--ion-border-radius-025, $ion-scale-050);
-$ion-bg-primary-base-default: var(--ion-bg-primary-base-default, $ion-semantics-primary-base);
-$ion-bg-primary-base-default-rgb: var(--ion-bg-primary-base-default-rgb, 16, 92, 239);
-$ion-bg-primary-base-press: var(--ion-bg-primary-base-press, $ion-semantics-primary-900);
-$ion-bg-primary-base-press-rgb: var(--ion-bg-primary-base-press-rgb, 13, 75, 195);
-$ion-bg-primary-subtle-default: var(--ion-bg-primary-subtle-default, $ion-semantics-primary-100);
-$ion-bg-primary-subtle-default-rgb: var(--ion-bg-primary-subtle-default-rgb, 242, 244, 253);
-$ion-bg-primary-subtle-press: var(--ion-bg-primary-subtle-press, $ion-semantics-primary-300);
-$ion-bg-primary-subtle-press-rgb: var(--ion-bg-primary-subtle-press-rgb, 208, 215, 250);
-$ion-bg-danger-base-default: var(--ion-bg-danger-base-default, $ion-semantics-danger-800);
-$ion-bg-danger-base-default-rgb: var(--ion-bg-danger-base-default-rgb, 191, 34, 34);
-$ion-bg-danger-base-press: var(--ion-bg-danger-base-press, $ion-semantics-danger-1000);
-$ion-bg-danger-base-press-rgb: var(--ion-bg-danger-base-press-rgb, 118, 21, 21);
-$ion-bg-danger-subtle-default: var(--ion-bg-danger-subtle-default, $ion-semantics-danger-100);
-$ion-bg-danger-subtle-default-rgb: var(--ion-bg-danger-subtle-default-rgb, 254, 237, 237);
-$ion-bg-danger-subtle-press: var(--ion-bg-danger-subtle-press, $ion-semantics-danger-300);
-$ion-bg-danger-subtle-press-rgb: var(--ion-bg-danger-subtle-press-rgb, 252, 193, 193);
-$ion-bg-success-base-default: var(--ion-bg-success-base-default, $ion-semantics-success-900);
-$ion-bg-success-base-default-rgb: var(--ion-bg-success-base-default-rgb, 18, 111, 35);
-$ion-bg-success-base-press: var(--ion-bg-success-base-press, $ion-semantics-success-1100);
-$ion-bg-success-base-press-rgb: var(--ion-bg-success-base-press-rgb, 9, 56, 17);
-$ion-bg-success-subtle-default: var(--ion-bg-success-subtle-default, $ion-semantics-success-100);
-$ion-bg-success-subtle-default-rgb: var(--ion-bg-success-subtle-default-rgb, 235, 249, 236);
-$ion-bg-success-subtle-press: var(--ion-bg-success-subtle-press, $ion-semantics-success-300);
-$ion-bg-success-subtle-press-rgb: var(--ion-bg-success-subtle-press-rgb, 179, 235, 183);
-$ion-bg-info-base-default: var(--ion-bg-info-base-default, $ion-semantics-info-900);
-$ion-bg-info-base-default-rgb: var(--ion-bg-info-base-default-rgb, 13, 75, 195);
-$ion-bg-info-base-press: var(--ion-bg-info-base-press, $ion-semantics-info-1100);
-$ion-bg-info-base-press-rgb: var(--ion-bg-info-base-press-rgb, 9, 53, 138);
-$ion-bg-info-subtle-default: var(--ion-bg-info-subtle-default, $ion-semantics-info-100);
-$ion-bg-info-subtle-default-rgb: var(--ion-bg-info-subtle-default-rgb, 242, 244, 253);
-$ion-bg-info-subtle-press: var(--ion-bg-info-subtle-press, $ion-semantics-info-300);
-$ion-bg-info-subtle-press-rgb: var(--ion-bg-info-subtle-press-rgb, 208, 215, 250);
-$ion-bg-warning-base-default: var(--ion-bg-warning-base-default, $ion-semantics-warning-500);
-$ion-bg-warning-base-default-rgb: var(--ion-bg-warning-base-default-rgb, 255, 214, 0);
-$ion-bg-warning-base-press: var(--ion-bg-warning-base-press, $ion-semantics-warning-700);
-$ion-bg-warning-base-press-rgb: var(--ion-bg-warning-base-press-rgb, 223, 156, 0);
-$ion-bg-warning-subtle-default: var(--ion-bg-warning-subtle-default, $ion-semantics-warning-200);
-$ion-bg-warning-subtle-default-rgb: var(--ion-bg-warning-subtle-default-rgb, 255, 245, 219);
-$ion-bg-warning-subtle-press: var(--ion-bg-warning-subtle-press, $ion-semantics-warning-400);
-$ion-bg-warning-subtle-press-rgb: var(--ion-bg-warning-subtle-press-rgb, 255, 224, 123);
-$ion-bg-body: var(--ion-bg-body, $ion-primitives-base-white);
-$ion-bg-body-rgb: var(--ion-bg-body-rgb, 255, 255, 255);
-$ion-bg-neutral-subtle-default: var(--ion-bg-neutral-subtle-default, $ion-primitives-neutral-200);
-$ion-bg-neutral-subtle-default-rgb: var(--ion-bg-neutral-subtle-default-rgb, 239, 239, 239);
-$ion-bg-neutral-subtle-press: var(--ion-bg-neutral-subtle-press, $ion-primitives-neutral-400);
-$ion-bg-neutral-subtle-press-rgb: var(--ion-bg-neutral-subtle-press-rgb, 213, 213, 213);
-$ion-bg-neutral-base-default: var(--ion-bg-neutral-base-default, $ion-primitives-neutral-500);
-$ion-bg-neutral-base-default-rgb: var(--ion-bg-neutral-base-default-rgb, 162, 162, 162);
-$ion-bg-neutral-base-press: var(--ion-bg-neutral-base-press, $ion-primitives-neutral-700);
-$ion-bg-neutral-base-press-rgb: var(--ion-bg-neutral-base-press-rgb, 119, 119, 119);
-$ion-bg-neutral-subtlest-default: var(--ion-bg-neutral-subtlest-default, $ion-primitives-base-white);
-$ion-bg-neutral-subtlest-default-rgb: var(--ion-bg-neutral-subtlest-default-rgb, 255, 255, 255);
-$ion-bg-neutral-subtlest-press: var(--ion-bg-neutral-subtlest-press, $ion-primitives-neutral-200);
-$ion-bg-neutral-subtlest-press-rgb: var(--ion-bg-neutral-subtlest-press-rgb, 239, 239, 239);
-$ion-bg-neutral-bold-default: var(--ion-bg-neutral-bold-default, $ion-primitives-neutral-1000);
-$ion-bg-neutral-bold-default-rgb: var(--ion-bg-neutral-bold-default-rgb, 59, 59, 59);
-$ion-bg-neutral-bold-press: var(--ion-bg-neutral-bold-press, $ion-primitives-neutral-1200);
-$ion-bg-neutral-bold-press-rgb: var(--ion-bg-neutral-bold-press-rgb, 36, 36, 36);
-$ion-bg-neutral-boldest-default: var(--ion-bg-neutral-boldest-default, $ion-primitives-neutral-1200);
-$ion-bg-neutral-boldest-default-rgb: var(--ion-bg-neutral-boldest-default-rgb, 36, 36, 36);
-$ion-bg-neutral-boldest-press: var(--ion-bg-neutral-boldest-press, $ion-primitives-base-black);
-$ion-bg-neutral-boldest-press-rgb: var(--ion-bg-neutral-boldest-press-rgb, 17, 17, 17);
-$ion-bg-surface-default: var(--ion-bg-surface-default, $ion-primitives-base-white);
-$ion-bg-surface-default-rgb: var(--ion-bg-surface-default-rgb, 255, 255, 255);
-$ion-bg-surface-inverse: var(--ion-bg-surface-inverse, $ion-primitives-base-white);
-$ion-bg-surface-inverse-rgb: var(--ion-bg-surface-inverse-rgb, 255, 255, 255);
-$ion-bg-input-default: var(--ion-bg-input-default, $ion-primitives-base-white);
-$ion-bg-input-default-rgb: var(--ion-bg-input-default-rgb, 255, 255, 255);
-$ion-bg-input-read-only: var(--ion-bg-input-read-only, $ion-primitives-neutral-100);
-$ion-bg-input-read-only-rgb: var(--ion-bg-input-read-only-rgb, 245, 245, 245);
-$ion-bg-input-press: var(--ion-bg-input-press, $ion-primitives-neutral-200);
-$ion-bg-input-press-rgb: var(--ion-bg-input-press-rgb, 239, 239, 239);
-$ion-bg-input-disabled: var(--ion-bg-input-disabled, $ion-primitives-neutral-100);
-$ion-bg-input-disabled-rgb: var(--ion-bg-input-disabled-rgb, 245, 245, 245);
-$ion-bg-input-bold-default: var(--ion-bg-input-bold-default, $ion-primitives-neutral-200);
-$ion-bg-input-bold-default-rgb: var(--ion-bg-input-bold-default-rgb, 239, 239, 239);
-$ion-bg-input-bold-press: var(--ion-bg-input-bold-press, $ion-primitives-neutral-400);
-$ion-bg-input-bold-press-rgb: var(--ion-bg-input-bold-press-rgb, 213, 213, 213);
-$ion-bg-input-bold-read-only: var(--ion-bg-input-bold-read-only, $ion-primitives-neutral-300);
-$ion-bg-input-bold-read-only-rgb: var(--ion-bg-input-bold-read-only-rgb, 224, 224, 224);
-$ion-bg-input-bold-disabled: var(--ion-bg-input-bold-disabled, $ion-primitives-neutral-300);
-$ion-bg-input-bold-disabled-rgb: var(--ion-bg-input-bold-disabled-rgb, 224, 224, 224);
-$ion-bg-select-default: var(--ion-bg-select-default, $ion-semantics-primary-100);
-$ion-bg-select-default-rgb: var(--ion-bg-select-default-rgb, 242, 244, 253);
-$ion-bg-select-press: var(--ion-bg-select-press, $ion-semantics-primary-300);
-$ion-bg-select-press-rgb: var(--ion-bg-select-press-rgb, 208, 215, 250);
-$ion-bg-extended-pumpkin-base-default: var(--ion-bg-extended-pumpkin-base-default, $ion-primitives-pumpkin-700);
-$ion-bg-extended-pumpkin-base-default-rgb: var(--ion-bg-extended-pumpkin-base-default-rgb, 189, 71, 5);
-$ion-bg-extended-pumpkin-base-press: var(--ion-bg-extended-pumpkin-base-press, $ion-primitives-pumpkin-900);
-$ion-bg-extended-pumpkin-base-press-rgb: var(--ion-bg-extended-pumpkin-base-press-rgb, 128, 48, 4);
-$ion-bg-extended-pumpkin-subtle-default: var(--ion-bg-extended-pumpkin-subtle-default, $ion-primitives-pumpkin-100);
-$ion-bg-extended-pumpkin-subtle-default-rgb: var(--ion-bg-extended-pumpkin-subtle-default-rgb, 254, 237, 234);
-$ion-bg-extended-pumpkin-subtle-press: var(--ion-bg-extended-pumpkin-subtle-press, $ion-primitives-pumpkin-300);
-$ion-bg-extended-pumpkin-subtle-press-rgb: var(--ion-bg-extended-pumpkin-subtle-press-rgb, 251, 189, 177);
-$ion-bg-extended-orange-base-default: var(--ion-bg-extended-orange-base-default, $ion-primitives-orange-800);
-$ion-bg-extended-orange-base-default-rgb: var(--ion-bg-extended-orange-base-default-rgb, 164, 95, 0);
-$ion-bg-extended-orange-base-press: var(--ion-bg-extended-orange-base-press, $ion-primitives-orange-1000);
-$ion-bg-extended-orange-base-press-rgb: var(--ion-bg-extended-orange-base-press-rgb, 99, 58, 0);
-$ion-bg-extended-orange-subtle-default: var(--ion-bg-extended-orange-subtle-default, $ion-primitives-orange-100);
-$ion-bg-extended-orange-subtle-default-rgb: var(--ion-bg-extended-orange-subtle-default-rgb, 255, 241, 234);
-$ion-bg-extended-orange-subtle-press: var(--ion-bg-extended-orange-subtle-press, $ion-primitives-orange-300);
-$ion-bg-extended-orange-subtle-press-rgb: var(--ion-bg-extended-orange-subtle-press-rgb, 255, 207, 177);
-$ion-bg-extended-lime-base-default: var(--ion-bg-extended-lime-base-default, $ion-primitives-lime-900);
-$ion-bg-extended-lime-base-default-rgb: var(--ion-bg-extended-lime-base-default-rgb, 83, 115, 12);
-$ion-bg-extended-lime-base-press: var(--ion-bg-extended-lime-base-press, $ion-primitives-lime-1100);
-$ion-bg-extended-lime-base-press-rgb: var(--ion-bg-extended-lime-base-press-rgb, 42, 58, 6);
-$ion-bg-extended-lime-subtle-default: var(--ion-bg-extended-lime-subtle-default, $ion-primitives-lime-100);
-$ion-bg-extended-lime-subtle-default-rgb: var(--ion-bg-extended-lime-subtle-default-rgb, 243, 250, 234);
-$ion-bg-extended-lime-subtle-press: var(--ion-bg-extended-lime-subtle-press, $ion-primitives-lime-300);
-$ion-bg-extended-lime-subtle-press-rgb: var(--ion-bg-extended-lime-subtle-press-rgb, 211, 239, 178);
-$ion-bg-extended-teal-base-default: var(--ion-bg-extended-teal-base-default, $ion-primitives-teal-800);
-$ion-bg-extended-teal-base-default-rgb: var(--ion-bg-extended-teal-base-default-rgb, 0, 133, 118);
-$ion-bg-extended-teal-base-press: var(--ion-bg-extended-teal-base-press, $ion-primitives-teal-1000);
-$ion-bg-extended-teal-base-press-rgb: var(--ion-bg-extended-teal-base-press-rgb, 0, 81, 71);
-$ion-bg-extended-teal-subtle-default: var(--ion-bg-extended-teal-subtle-default, $ion-primitives-teal-100);
-$ion-bg-extended-teal-subtle-default-rgb: var(--ion-bg-extended-teal-subtle-default-rgb, 234, 248, 245);
-$ion-bg-extended-teal-subtle-press: var(--ion-bg-extended-teal-subtle-press, $ion-primitives-teal-300);
-$ion-bg-extended-teal-subtle-press-rgb: var(--ion-bg-extended-teal-subtle-press-rgb, 177, 231, 221);
-$ion-bg-extended-aqua-base-default: var(--ion-bg-extended-aqua-base-default, $ion-primitives-aqua-900);
-$ion-bg-extended-aqua-base-default-rgb: var(--ion-bg-extended-aqua-base-default-rgb, 20, 109, 129);
-$ion-bg-extended-aqua-base-press: var(--ion-bg-extended-aqua-base-press, $ion-primitives-aqua-1100);
-$ion-bg-extended-aqua-base-press-rgb: var(--ion-bg-extended-aqua-base-press-rgb, 10, 55, 65);
-$ion-bg-extended-aqua-subtle-default: var(--ion-bg-extended-aqua-subtle-default, $ion-primitives-aqua-100);
-$ion-bg-extended-aqua-subtle-default-rgb: var(--ion-bg-extended-aqua-subtle-default-rgb, 235, 249, 254);
-$ion-bg-extended-aqua-subtle-press: var(--ion-bg-extended-aqua-subtle-press, $ion-primitives-aqua-300);
-$ion-bg-extended-aqua-subtle-press-rgb: var(--ion-bg-extended-aqua-subtle-press-rgb, 179, 233, 252);
-$ion-bg-extended-indigo-base-default: var(--ion-bg-extended-indigo-base-default, $ion-primitives-indigo-700);
-$ion-bg-extended-indigo-base-default-rgb: var(--ion-bg-extended-indigo-base-default-rgb, 65, 27, 213);
-$ion-bg-extended-indigo-base-press: var(--ion-bg-extended-indigo-base-press, $ion-primitives-indigo-900);
-$ion-bg-extended-indigo-base-press-rgb: var(--ion-bg-extended-indigo-base-press-rgb, 53, 22, 174);
-$ion-bg-extended-indigo-subtle-default: var(--ion-bg-extended-indigo-subtle-default, $ion-primitives-indigo-100);
-$ion-bg-extended-indigo-subtle-default-rgb: var(--ion-bg-extended-indigo-subtle-default-rgb, 243, 242, 251);
-$ion-bg-extended-indigo-subtle-press: var(--ion-bg-extended-indigo-subtle-press, $ion-primitives-indigo-300);
-$ion-bg-extended-indigo-subtle-press-rgb: var(--ion-bg-extended-indigo-subtle-press-rgb, 211, 209, 242);
-$ion-bg-extended-violet-base-default: var(--ion-bg-extended-violet-base-default, $ion-primitives-violet-700);
-$ion-bg-extended-violet-base-default-rgb: var(--ion-bg-extended-violet-base-default-rgb, 124, 32, 242);
-$ion-bg-extended-violet-base-press: var(--ion-bg-extended-violet-base-press, $ion-primitives-violet-900);
-$ion-bg-extended-violet-base-press-rgb: var(--ion-bg-extended-violet-base-press-rgb, 101, 26, 197);
-$ion-bg-extended-violet-subtle-default: var(--ion-bg-extended-violet-subtle-default, $ion-primitives-violet-100);
-$ion-bg-extended-violet-subtle-default-rgb: var(--ion-bg-extended-violet-subtle-default-rgb, 245, 242, 254);
-$ion-bg-extended-violet-subtle-press: var(--ion-bg-extended-violet-subtle-press, $ion-primitives-violet-300);
-$ion-bg-extended-violet-subtle-press-rgb: var(--ion-bg-extended-violet-subtle-press-rgb, 220, 209, 251);
-$ion-bg-extended-purple-base-default: var(--ion-bg-extended-purple-base-default, $ion-primitives-purple-800);
-$ion-bg-extended-purple-base-default-rgb: var(--ion-bg-extended-purple-base-default-rgb, 167, 55, 220);
-$ion-bg-extended-purple-base-press: var(--ion-bg-extended-purple-base-press, $ion-primitives-purple-1000);
-$ion-bg-extended-purple-base-press-rgb: var(--ion-bg-extended-purple-base-press-rgb, 129, 42, 170);
-$ion-bg-extended-purple-subtle-default: var(--ion-bg-extended-purple-subtle-default, $ion-primitives-purple-100);
-$ion-bg-extended-purple-subtle-default-rgb: var(--ion-bg-extended-purple-subtle-default-rgb, 249, 243, 254);
-$ion-bg-extended-purple-subtle-press: var(--ion-bg-extended-purple-subtle-press, $ion-primitives-purple-300);
-$ion-bg-extended-purple-subtle-press-rgb: var(--ion-bg-extended-purple-subtle-press-rgb, 233, 211, 250);
-$ion-bg-extended-magenta-base-default: var(--ion-bg-extended-magenta-base-default, $ion-primitives-magenta-900);
-$ion-bg-extended-magenta-base-default-rgb: var(--ion-bg-extended-magenta-base-default-rgb, 193, 60, 172);
-$ion-bg-extended-magenta-base-press: var(--ion-bg-extended-magenta-base-press, $ion-primitives-magenta-1100);
-$ion-bg-extended-magenta-base-press-rgb: var(--ion-bg-extended-magenta-base-press-rgb, 137, 43, 122);
-$ion-bg-extended-magenta-subtle-default: var(--ion-bg-extended-magenta-subtle-default, $ion-primitives-magenta-100);
-$ion-bg-extended-magenta-subtle-default-rgb: var(--ion-bg-extended-magenta-subtle-default-rgb, 253, 243, 251);
-$ion-bg-extended-magenta-subtle-press: var(--ion-bg-extended-magenta-subtle-press, $ion-primitives-magenta-300);
-$ion-bg-extended-magenta-subtle-press-rgb: var(--ion-bg-extended-magenta-subtle-press-rgb, 249, 212, 241);
-$ion-bg-extended-pink-base-default: var(--ion-bg-extended-pink-base-default, $ion-primitives-pink-900);
-$ion-bg-extended-pink-base-default-rgb: var(--ion-bg-extended-pink-base-default-rgb, 197, 48, 102);
-$ion-bg-extended-pink-base-press: var(--ion-bg-extended-pink-base-press, $ion-primitives-pink-1100);
-$ion-bg-extended-pink-base-press-rgb: var(--ion-bg-extended-pink-base-press-rgb, 139, 34, 72);
-$ion-bg-extended-pink-subtle-default: var(--ion-bg-extended-pink-subtle-default, $ion-primitives-pink-100);
-$ion-bg-extended-pink-subtle-default-rgb: var(--ion-bg-extended-pink-subtle-default-rgb, 254, 243, 245);
-$ion-bg-extended-pink-subtle-press: var(--ion-bg-extended-pink-subtle-press, $ion-primitives-pink-300);
-$ion-bg-extended-pink-subtle-press-rgb: var(--ion-bg-extended-pink-subtle-press-rgb, 250, 211, 220);
-$ion-text-default: var(--ion-text-default, $ion-primitives-neutral-1200);
-$ion-text-default-rgb: var(--ion-text-default-rgb, 36, 36, 36);
-$ion-text-subtle: var(--ion-text-subtle, $ion-primitives-neutral-1000);
-$ion-text-subtle-rgb: var(--ion-text-subtle-rgb, 59, 59, 59);
-$ion-text-subtlest: var(--ion-text-subtlest, $ion-primitives-neutral-800);
-$ion-text-subtlest-rgb: var(--ion-text-subtlest-rgb, 98, 98, 98);
-$ion-text-primary: var(--ion-text-primary, $ion-semantics-primary-900);
-$ion-text-primary-rgb: var(--ion-text-primary-rgb, 13, 75, 195);
-$ion-text-disabled: var(--ion-text-disabled, $ion-primitives-neutral-500);
-$ion-text-disabled-rgb: var(--ion-text-disabled-rgb, 162, 162, 162);
-$ion-text-danger: var(--ion-text-danger, $ion-semantics-danger-900);
-$ion-text-danger-rgb: var(--ion-text-danger-rgb, 153, 27, 27);
-$ion-text-info: var(--ion-text-info, $ion-semantics-info-900);
-$ion-text-info-rgb: var(--ion-text-info-rgb, 13, 75, 195);
-$ion-text-warning: var(--ion-text-warning, $ion-semantics-warning-1000);
-$ion-text-warning-rgb: var(--ion-text-warning-rgb, 112, 75, 2);
-$ion-text-success: var(--ion-text-success, $ion-semantics-success-900);
-$ion-text-success-rgb: var(--ion-text-success-rgb, 18, 111, 35);
-$ion-text-link-default: var(--ion-text-link-default, $ion-semantics-primary-base);
-$ion-text-link-default-rgb: var(--ion-text-link-default-rgb, 16, 92, 239);
-$ion-text-link-press: var(--ion-text-link-press, $ion-semantics-primary-800);
-$ion-text-link-press-rgb: var(--ion-text-link-press-rgb, 15, 84, 218);
-$ion-text-link-visited: var(--ion-text-link-visited, $ion-semantics-primary-900);
-$ion-text-link-visited-rgb: var(--ion-text-link-visited-rgb, 13, 75, 195);
-$ion-text-inverse: var(--ion-text-inverse, $ion-primitives-base-white);
-$ion-text-inverse-rgb: var(--ion-text-inverse-rgb, 255, 255, 255);
-$ion-text-select: var(--ion-text-select, $ion-semantics-primary-800);
-$ion-text-select-rgb: var(--ion-text-select-rgb, 15, 84, 218);
-$ion-text-extended-pumpkin: var(--ion-text-extended-pumpkin, $ion-primitives-pumpkin-900);
-$ion-text-extended-pumpkin-rgb: var(--ion-text-extended-pumpkin-rgb, 128, 48, 4);
-$ion-text-extended-orange: var(--ion-text-extended-orange, $ion-primitives-orange-900);
-$ion-text-extended-orange-rgb: var(--ion-text-extended-orange-rgb, 132, 77, 0);
-$ion-text-extended-lime: var(--ion-text-extended-lime, $ion-primitives-lime-1000);
-$ion-text-extended-lime-rgb: var(--ion-text-extended-lime-rgb, 62, 87, 9);
-$ion-text-extended-teal: var(--ion-text-extended-teal, $ion-primitives-teal-900);
-$ion-text-extended-teal-rgb: var(--ion-text-extended-teal-rgb, 0, 107, 95);
-$ion-text-extended-aqua: var(--ion-text-extended-aqua, $ion-primitives-aqua-900);
-$ion-text-extended-aqua-rgb: var(--ion-text-extended-aqua-rgb, 20, 109, 129);
-$ion-text-extended-indigo: var(--ion-text-extended-indigo, $ion-primitives-indigo-900);
-$ion-text-extended-indigo-rgb: var(--ion-text-extended-indigo-rgb, 53, 22, 174);
-$ion-text-extended-violet: var(--ion-text-extended-violet, $ion-primitives-violet-900);
-$ion-text-extended-violet-rgb: var(--ion-text-extended-violet-rgb, 101, 26, 197);
-$ion-text-extended-purple: var(--ion-text-extended-purple, $ion-primitives-purple-1000);
-$ion-text-extended-purple-rgb: var(--ion-text-extended-purple-rgb, 129, 42, 170);
-$ion-text-extended-magenta: var(--ion-text-extended-magenta, $ion-primitives-magenta-1100);
-$ion-text-extended-magenta-rgb: var(--ion-text-extended-magenta-rgb, 137, 43, 122);
-$ion-text-extended-pink: var(--ion-text-extended-pink, $ion-primitives-pink-1000);
-$ion-text-extended-pink-rgb: var(--ion-text-extended-pink-rgb, 170, 42, 88);
-$ion-icon-default: var(--ion-icon-default, $ion-primitives-neutral-1200);
-$ion-icon-default-rgb: var(--ion-icon-default-rgb, 36, 36, 36);
-$ion-icon-subtle: var(--ion-icon-subtle, $ion-primitives-neutral-1000);
-$ion-icon-subtle-rgb: var(--ion-icon-subtle-rgb, 59, 59, 59);
-$ion-icon-subtlest: var(--ion-icon-subtlest, $ion-primitives-neutral-800);
-$ion-icon-subtlest-rgb: var(--ion-icon-subtlest-rgb, 98, 98, 98);
-$ion-icon-disabled: var(--ion-icon-disabled, $ion-primitives-neutral-500);
-$ion-icon-disabled-rgb: var(--ion-icon-disabled-rgb, 162, 162, 162);
-$ion-icon-primary: var(--ion-icon-primary, $ion-semantics-primary-900);
-$ion-icon-primary-rgb: var(--ion-icon-primary-rgb, 13, 75, 195);
-$ion-icon-select: var(--ion-icon-select, $ion-semantics-primary-800);
-$ion-icon-select-rgb: var(--ion-icon-select-rgb, 15, 84, 218);
-$ion-icon-info: var(--ion-icon-info, $ion-semantics-info-900);
-$ion-icon-info-rgb: var(--ion-icon-info-rgb, 13, 75, 195);
-$ion-icon-success: var(--ion-icon-success, $ion-semantics-success-900);
-$ion-icon-success-rgb: var(--ion-icon-success-rgb, 18, 111, 35);
-$ion-icon-danger: var(--ion-icon-danger, $ion-semantics-danger-900);
-$ion-icon-danger-rgb: var(--ion-icon-danger-rgb, 153, 27, 27);
-$ion-icon-warning: var(--ion-icon-warning, $ion-semantics-warning-1000);
-$ion-icon-warning-rgb: var(--ion-icon-warning-rgb, 112, 75, 2);
-$ion-icon-inverse: var(--ion-icon-inverse, $ion-primitives-base-white);
-$ion-icon-inverse-rgb: var(--ion-icon-inverse-rgb, 255, 255, 255);
-$ion-icon-link-default: var(--ion-icon-link-default, $ion-text-link-default);
-$ion-icon-link-default-rgb: var(--ion-icon-link-default-rgb, 16, 92, 239);
-$ion-icon-link-press: var(--ion-icon-link-press, $ion-text-link-press);
-$ion-icon-link-press-rgb: var(--ion-icon-link-press-rgb, 15, 84, 218);
-$ion-icon-link-visited: var(--ion-icon-link-visited, $ion-text-link-visited);
-$ion-icon-link-visited-rgb: var(--ion-icon-link-visited-rgb, 13, 75, 195);
-$ion-icon-extended-pumpkin: var(--ion-icon-extended-pumpkin, $ion-primitives-pumpkin-900);
-$ion-icon-extended-pumpkin-rgb: var(--ion-icon-extended-pumpkin-rgb, 128, 48, 4);
-$ion-icon-extended-orange: var(--ion-icon-extended-orange, $ion-primitives-orange-900);
-$ion-icon-extended-orange-rgb: var(--ion-icon-extended-orange-rgb, 132, 77, 0);
-$ion-icon-extended-lime: var(--ion-icon-extended-lime, $ion-primitives-lime-1000);
-$ion-icon-extended-lime-rgb: var(--ion-icon-extended-lime-rgb, 62, 87, 9);
-$ion-icon-extended-teal: var(--ion-icon-extended-teal, $ion-primitives-teal-900);
-$ion-icon-extended-teal-rgb: var(--ion-icon-extended-teal-rgb, 0, 107, 95);
-$ion-icon-extended-aqua: var(--ion-icon-extended-aqua, $ion-primitives-aqua-900);
-$ion-icon-extended-aqua-rgb: var(--ion-icon-extended-aqua-rgb, 20, 109, 129);
-$ion-icon-extended-indigo: var(--ion-icon-extended-indigo, $ion-primitives-indigo-900);
-$ion-icon-extended-indigo-rgb: var(--ion-icon-extended-indigo-rgb, 53, 22, 174);
-$ion-icon-extended-violet: var(--ion-icon-extended-violet, $ion-primitives-violet-900);
-$ion-icon-extended-violet-rgb: var(--ion-icon-extended-violet-rgb, 101, 26, 197);
-$ion-icon-extended-purple: var(--ion-icon-extended-purple, $ion-primitives-purple-1000);
-$ion-icon-extended-purple-rgb: var(--ion-icon-extended-purple-rgb, 129, 42, 170);
-$ion-icon-extended-magenta: var(--ion-icon-extended-magenta, $ion-primitives-magenta-1100);
-$ion-icon-extended-magenta-rgb: var(--ion-icon-extended-magenta-rgb, 137, 43, 122);
-$ion-icon-extended-pink: var(--ion-icon-extended-pink, $ion-primitives-pink-1000);
-$ion-icon-extended-pink-rgb: var(--ion-icon-extended-pink-rgb, 170, 42, 88);
-$ion-state-disabled: var(--ion-state-disabled, rgba(255, 255, 255, 0.6));
-$ion-state-press: var(--ion-state-press, rgba(36, 36, 36, 0.08));
-$ion-elevation-1: var(--ion-elevation-1, 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 3px 9px 0px rgba(0, 0, 0, 0.07));
-$ion-elevation-2: var(--ion-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
-$ion-elevation-3: var(--ion-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));
-$ion-elevation-4: var(--ion-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));
-$ion-backdrop: var(--ion-backdrop, [object Object]);
-$ion-space-0: var(--ion-space-0, $ion-scale-0);
-$ion-space-100: var(--ion-space-100, $ion-scale-100);
-$ion-space-150: var(--ion-space-150, $ion-scale-150);
-$ion-space-200: var(--ion-space-200, $ion-scale-200);
-$ion-space-250: var(--ion-space-250, $ion-scale-250);
-$ion-space-300: var(--ion-space-300, $ion-scale-300);
-$ion-space-400: var(--ion-space-400, $ion-scale-400);
-$ion-space-500: var(--ion-space-500, $ion-scale-500);
-$ion-space-600: var(--ion-space-600, $ion-scale-600);
-$ion-space-700: var(--ion-space-700, $ion-scale-700);
-$ion-space-800: var(--ion-space-800, $ion-scale-800);
-$ion-space-900: var(--ion-space-900, $ion-scale-900);
-$ion-space-1000: var(--ion-space-1000, $ion-scale-1000);
-$ion-space-1200: var(--ion-space-1200, $ion-scale-1200);
-$ion-space-050: var(--ion-space-050, $ion-scale-050);
-$ion-transition-curve-linear: var(--ion-transition-curve-linear, linear);
-$ion-transition-curve-quick: var(--ion-transition-curve-quick, cubic-bezier(0, 0, 0.2, 1));
-$ion-transition-curve-base: var(--ion-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
-$ion-transition-curve-expressive: var(--ion-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
-$ion-transition-curve-bounce: var(--ion-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));
-$ion-transition-time-0: var(--ion-transition-time-0, 0ms);
-$ion-transition-time-100: var(--ion-transition-time-100, 100ms);
-$ion-transition-time-150: var(--ion-transition-time-150, 150ms);
-$ion-transition-time-200: var(--ion-transition-time-200, 200ms);
-$ion-transition-time-300: var(--ion-transition-time-300, 300ms);
-$ion-transition-time-500: var(--ion-transition-time-500, 500ms);
-$ion-transition-time-1000: var(--ion-transition-time-1000, 1000ms);
-$ion-transition-time-1500: var(--ion-transition-time-1500, 1500ms);
-$ion-font-family: var(--ion-font-family, "Inter", sans-serif);
-$ion-font-weight-thin: var(--ion-font-weight-thin, 100);
-$ion-font-weight-extra-light: var(--ion-font-weight-extra-light, 200);
-$ion-font-weight-light: var(--ion-font-weight-light, 300);
-$ion-font-weight-regular: var(--ion-font-weight-regular, 400);
-$ion-font-weight-medium: var(--ion-font-weight-medium, 500);
-$ion-font-weight-semi-bold: var(--ion-font-weight-semi-bold, 600);
-$ion-font-weight-bold: var(--ion-font-weight-bold, 700);
-$ion-font-weight-extra-bold: var(--ion-font-weight-extra-bold, 800);
-$ion-font-weight-black: var(--ion-font-weight-black, 900);
-$ion-font-size-275: var(--ion-font-size-275, font.px-to-rem(11));
-$ion-font-size-300: var(--ion-font-size-300, font.px-to-rem(12));
-$ion-font-size-350: var(--ion-font-size-350, font.px-to-rem(14));
-$ion-font-size-400: var(--ion-font-size-400, font.px-to-rem(16));
-$ion-font-size-450: var(--ion-font-size-450, font.px-to-rem(18));
-$ion-font-size-500: var(--ion-font-size-500, font.px-to-rem(20));
-$ion-font-size-550: var(--ion-font-size-550, font.px-to-rem(22));
-$ion-font-size-600: var(--ion-font-size-600, font.px-to-rem(24));
-$ion-font-size-650: var(--ion-font-size-650, font.px-to-rem(26));
-$ion-font-size-700: var(--ion-font-size-700, font.px-to-rem(28));
-$ion-font-size-800: var(--ion-font-size-800, font.px-to-rem(32));
-$ion-font-size-900: var(--ion-font-size-900, font.px-to-rem(36));
-$ion-font-letter-spacing-0: var(--ion-font-letter-spacing-0, 0%);
-$ion-font-letter-spacing-1: var(--ion-font-letter-spacing-1, 1%);
-$ion-font-letter-spacing-2: var(--ion-font-letter-spacing-2, 1.5%);
-$ion-font-line-height-300: var(--ion-font-line-height-300, $ion-scale-300);
-$ion-font-line-height-400: var(--ion-font-line-height-400, $ion-scale-400);
-$ion-font-line-height-500: var(--ion-font-line-height-500, $ion-scale-500);
-$ion-font-line-height-600: var(--ion-font-line-height-600, $ion-scale-600);
-$ion-font-line-height-700: var(--ion-font-line-height-700, $ion-scale-700);
-$ion-font-line-height-800: var(--ion-font-line-height-800, $ion-scale-800);
-$ion-font-line-height-900: var(--ion-font-line-height-900, $ion-scale-900);
-$ion-font-line-height-1100: var(--ion-font-line-height-1100, $ion-scale-1100);
-$ion-font-line-height-1200: var(--ion-font-line-height-1200, $ion-scale-1200);
-$ion-font-line-height-full: var(--ion-font-line-height-full, 100%);
-$ion-z-index-0: var(--ion-z-index-0, 0);
-$ion-z-index-100: var(--ion-z-index-100, 100);
-$ion-z-index-200: var(--ion-z-index-200, 200);
-$ion-z-index-300: var(--ion-z-index-300, 300);
-$ion-z-index-400: var(--ion-z-index-400, 400);
-$ion-z-index-500: var(--ion-z-index-500, 500);
-$ion-z-index-bottom: var(--ion-z-index-bottom, -99999);
-$ion-z-index-top: var(--ion-z-index-top, 99999);
-$ion-rectangular-2xs: var(--ion-rectangular-2xs, $ion-border-radius-0);
-$ion-rectangular-xs: var(--ion-rectangular-xs, $ion-border-radius-0);
-$ion-rectangular-sm: var(--ion-rectangular-sm, $ion-border-radius-0);
-$ion-rectangular-md: var(--ion-rectangular-md, $ion-border-radius-0);
-$ion-rectangular-lg: var(--ion-rectangular-lg, $ion-border-radius-0);
-$ion-rectangular-xl: var(--ion-rectangular-xl, $ion-border-radius-0);
-$ion-rectangular-2xl: var(--ion-rectangular-2xl, $ion-border-radius-0);
-$ion-round-2xs: var(--ion-round-2xs, $ion-border-radius-full);
-$ion-round-xs: var(--ion-round-xs, $ion-border-radius-full);
-$ion-round-sm: var(--ion-round-sm, $ion-border-radius-full);
-$ion-round-md: var(--ion-round-md, $ion-border-radius-full);
-$ion-round-lg: var(--ion-round-lg, $ion-border-radius-300);
-$ion-round-xl: var(--ion-round-xl, $ion-border-radius-400);
-$ion-round-2xl: var(--ion-round-2xl, $ion-border-radius-1000);
-$ion-soft-2xs: var(--ion-soft-2xs, $ion-border-radius-100);
-$ion-soft-xs: var(--ion-soft-xs, $ion-border-radius-200);
-$ion-soft-sm: var(--ion-soft-sm, $ion-border-radius-300);
-$ion-soft-md: var(--ion-soft-md, $ion-border-radius-400);
-$ion-soft-lg: var(--ion-soft-lg, $ion-border-radius-200);
-$ion-soft-xl: var(--ion-soft-xl, $ion-border-radius-200);
-$ion-soft-2xl: var(--ion-soft-2xl, $ion-border-radius-400);
-$ion-shadow-1: var(--ion-shadow-1, rgba(0, 0, 0, 0.04));
-$ion-shadow-2: var(--ion-shadow-2, rgba(0, 0, 0, 0.05));
-$ion-shadow-3: var(--ion-shadow-3, rgba(0, 0, 0, 0.07));
-$ion-shadow-4: var(--ion-shadow-4, rgba(0, 0, 0, 0.08));
-$ion-shadow-5: var(--ion-shadow-5, rgba(0, 0, 0, 0.12));
-$ion-shadow-6: var(--ion-shadow-6, rgba(0, 0, 0, 0.16));
-$ion-shadow-7: var(--ion-shadow-7, rgba(0, 0, 0, 0.18));
+@use "../themes/functions.sizes" as font;
+$ion-primitives-neutral-100: var(--token-primitives-neutral-100, #f5f5f5);
+$ion-primitives-neutral-100-rgb: var(--token-primitives-neutral-100-rgb, 245, 245, 245);
+$ion-primitives-neutral-200: var(--token-primitives-neutral-200, #efefef);
+$ion-primitives-neutral-200-rgb: var(--token-primitives-neutral-200-rgb, 239, 239, 239);
+$ion-primitives-neutral-300: var(--token-primitives-neutral-300, #e0e0e0);
+$ion-primitives-neutral-300-rgb: var(--token-primitives-neutral-300-rgb, 224, 224, 224);
+$ion-primitives-neutral-400: var(--token-primitives-neutral-400, #d5d5d5);
+$ion-primitives-neutral-400-rgb: var(--token-primitives-neutral-400-rgb, 213, 213, 213);
+$ion-primitives-neutral-500: var(--token-primitives-neutral-500, #a2a2a2);
+$ion-primitives-neutral-500-rgb: var(--token-primitives-neutral-500-rgb, 162, 162, 162);
+$ion-primitives-neutral-600: var(--token-primitives-neutral-600, #8c8c8c);
+$ion-primitives-neutral-600-rgb: var(--token-primitives-neutral-600-rgb, 140, 140, 140);
+$ion-primitives-neutral-700: var(--token-primitives-neutral-700, #777777);
+$ion-primitives-neutral-700-rgb: var(--token-primitives-neutral-700-rgb, 119, 119, 119);
+$ion-primitives-neutral-800: var(--token-primitives-neutral-800, #626262);
+$ion-primitives-neutral-800-rgb: var(--token-primitives-neutral-800-rgb, 98, 98, 98);
+$ion-primitives-neutral-900: var(--token-primitives-neutral-900, #4e4e4e);
+$ion-primitives-neutral-900-rgb: var(--token-primitives-neutral-900-rgb, 78, 78, 78);
+$ion-primitives-neutral-1000: var(--token-primitives-neutral-1000, #3b3b3b);
+$ion-primitives-neutral-1000-rgb: var(--token-primitives-neutral-1000-rgb, 59, 59, 59);
+$ion-primitives-neutral-1100: var(--token-primitives-neutral-1100, #292929);
+$ion-primitives-neutral-1100-rgb: var(--token-primitives-neutral-1100-rgb, 41, 41, 41);
+$ion-primitives-neutral-1200: var(--token-primitives-neutral-1200, #242424);
+$ion-primitives-neutral-1200-rgb: var(--token-primitives-neutral-1200-rgb, 36, 36, 36);
+$ion-primitives-base-white: var(--token-primitives-base-white, #ffffff);
+$ion-primitives-base-white-rgb: var(--token-primitives-base-white-rgb, 255, 255, 255);
+$ion-primitives-base-black: var(--token-primitives-base-black, #111111);
+$ion-primitives-base-black-rgb: var(--token-primitives-base-black-rgb, 17, 17, 17);
+$ion-primitives-red-100: var(--token-primitives-red-100, #feeded);
+$ion-primitives-red-100-rgb: var(--token-primitives-red-100-rgb, 254, 237, 237);
+$ion-primitives-red-200: var(--token-primitives-red-200, #fde1e1);
+$ion-primitives-red-200-rgb: var(--token-primitives-red-200-rgb, 253, 225, 225);
+$ion-primitives-red-300: var(--token-primitives-red-300, #fcc1c1);
+$ion-primitives-red-300-rgb: var(--token-primitives-red-300-rgb, 252, 193, 193);
+$ion-primitives-red-400: var(--token-primitives-red-400, #faa1a1);
+$ion-primitives-red-400-rgb: var(--token-primitives-red-400-rgb, 250, 161, 161);
+$ion-primitives-red-500: var(--token-primitives-red-500, #f97d7d);
+$ion-primitives-red-500-rgb: var(--token-primitives-red-500-rgb, 249, 125, 125);
+$ion-primitives-red-600: var(--token-primitives-red-600, #f85151);
+$ion-primitives-red-600-rgb: var(--token-primitives-red-600-rgb, 248, 81, 81);
+$ion-primitives-red-700: var(--token-primitives-red-700, #e52929);
+$ion-primitives-red-700-rgb: var(--token-primitives-red-700-rgb, 229, 41, 41);
+$ion-primitives-red-800: var(--token-primitives-red-800, #bf2222);
+$ion-primitives-red-800-rgb: var(--token-primitives-red-800-rgb, 191, 34, 34);
+$ion-primitives-red-900: var(--token-primitives-red-900, #991b1b);
+$ion-primitives-red-900-rgb: var(--token-primitives-red-900-rgb, 153, 27, 27);
+$ion-primitives-red-1000: var(--token-primitives-red-1000, #761515);
+$ion-primitives-red-1000-rgb: var(--token-primitives-red-1000-rgb, 118, 21, 21);
+$ion-primitives-red-1100: var(--token-primitives-red-1100, #540f0f);
+$ion-primitives-red-1100-rgb: var(--token-primitives-red-1100-rgb, 84, 15, 15);
+$ion-primitives-red-1200: var(--token-primitives-red-1200, #330909);
+$ion-primitives-red-1200-rgb: var(--token-primitives-red-1200-rgb, 51, 9, 9);
+$ion-primitives-pumpkin-100: var(--token-primitives-pumpkin-100, #feedea);
+$ion-primitives-pumpkin-100-rgb: var(--token-primitives-pumpkin-100-rgb, 254, 237, 234);
+$ion-primitives-pumpkin-200: var(--token-primitives-pumpkin-200, #fde0db);
+$ion-primitives-pumpkin-200-rgb: var(--token-primitives-pumpkin-200-rgb, 253, 224, 219);
+$ion-primitives-pumpkin-300: var(--token-primitives-pumpkin-300, #fbbdb1);
+$ion-primitives-pumpkin-300-rgb: var(--token-primitives-pumpkin-300-rgb, 251, 189, 177);
+$ion-primitives-pumpkin-400: var(--token-primitives-pumpkin-400, #f9947c);
+$ion-primitives-pumpkin-400-rgb: var(--token-primitives-pumpkin-400-rgb, 249, 148, 124);
+$ion-primitives-pumpkin-500: var(--token-primitives-pumpkin-500, #f75d07);
+$ion-primitives-pumpkin-500-rgb: var(--token-primitives-pumpkin-500-rgb, 247, 93, 7);
+$ion-primitives-pumpkin-600: var(--token-primitives-pumpkin-600, #da5206);
+$ion-primitives-pumpkin-600-rgb: var(--token-primitives-pumpkin-600-rgb, 218, 82, 6);
+$ion-primitives-pumpkin-700: var(--token-primitives-pumpkin-700, #bd4705);
+$ion-primitives-pumpkin-700-rgb: var(--token-primitives-pumpkin-700-rgb, 189, 71, 5);
+$ion-primitives-pumpkin-800: var(--token-primitives-pumpkin-800, #9f3c05);
+$ion-primitives-pumpkin-800-rgb: var(--token-primitives-pumpkin-800-rgb, 159, 60, 5);
+$ion-primitives-pumpkin-900: var(--token-primitives-pumpkin-900, #803004);
+$ion-primitives-pumpkin-900-rgb: var(--token-primitives-pumpkin-900-rgb, 128, 48, 4);
+$ion-primitives-pumpkin-1000: var(--token-primitives-pumpkin-1000, #602403);
+$ion-primitives-pumpkin-1000-rgb: var(--token-primitives-pumpkin-1000-rgb, 96, 36, 3);
+$ion-primitives-pumpkin-1100: var(--token-primitives-pumpkin-1100, #401802);
+$ion-primitives-pumpkin-1100-rgb: var(--token-primitives-pumpkin-1100-rgb, 64, 24, 2);
+$ion-primitives-pumpkin-1200: var(--token-primitives-pumpkin-1200, #210c01);
+$ion-primitives-pumpkin-1200-rgb: var(--token-primitives-pumpkin-1200-rgb, 33, 12, 1);
+$ion-primitives-orange-100: var(--token-primitives-orange-100, #fff1ea);
+$ion-primitives-orange-100-rgb: var(--token-primitives-orange-100-rgb, 255, 241, 234);
+$ion-primitives-orange-200: var(--token-primitives-orange-200, #ffe8db);
+$ion-primitives-orange-200-rgb: var(--token-primitives-orange-200-rgb, 255, 232, 219);
+$ion-primitives-orange-300: var(--token-primitives-orange-300, #ffcfb1);
+$ion-primitives-orange-300-rgb: var(--token-primitives-orange-300-rgb, 255, 207, 177);
+$ion-primitives-orange-400: var(--token-primitives-orange-400, #ffb37b);
+$ion-primitives-orange-400-rgb: var(--token-primitives-orange-400-rgb, 255, 179, 123);
+$ion-primitives-orange-500: var(--token-primitives-orange-500, #ff9400);
+$ion-primitives-orange-500-rgb: var(--token-primitives-orange-500-rgb, 255, 148, 0);
+$ion-primitives-orange-600: var(--token-primitives-orange-600, #e18300);
+$ion-primitives-orange-600-rgb: var(--token-primitives-orange-600-rgb, 225, 131, 0);
+$ion-primitives-orange-700: var(--token-primitives-orange-700, #c37100);
+$ion-primitives-orange-700-rgb: var(--token-primitives-orange-700-rgb, 195, 113, 0);
+$ion-primitives-orange-800: var(--token-primitives-orange-800, #a45f00);
+$ion-primitives-orange-800-rgb: var(--token-primitives-orange-800-rgb, 164, 95, 0);
+$ion-primitives-orange-900: var(--token-primitives-orange-900, #844d00);
+$ion-primitives-orange-900-rgb: var(--token-primitives-orange-900-rgb, 132, 77, 0);
+$ion-primitives-orange-1000: var(--token-primitives-orange-1000, #633a00);
+$ion-primitives-orange-1000-rgb: var(--token-primitives-orange-1000-rgb, 99, 58, 0);
+$ion-primitives-orange-1100: var(--token-primitives-orange-1100, #422700);
+$ion-primitives-orange-1100-rgb: var(--token-primitives-orange-1100-rgb, 66, 39, 0);
+$ion-primitives-orange-1200: var(--token-primitives-orange-1200, #221400);
+$ion-primitives-orange-1200-rgb: var(--token-primitives-orange-1200-rgb, 34, 20, 0);
+$ion-primitives-yellow-100: var(--token-primitives-yellow-100, #fff9ea);
+$ion-primitives-yellow-100-rgb: var(--token-primitives-yellow-100-rgb, 255, 249, 234);
+$ion-primitives-yellow-200: var(--token-primitives-yellow-200, #fff5db);
+$ion-primitives-yellow-200-rgb: var(--token-primitives-yellow-200-rgb, 255, 245, 219);
+$ion-primitives-yellow-300: var(--token-primitives-yellow-300, #ffebb1);
+$ion-primitives-yellow-300-rgb: var(--token-primitives-yellow-300-rgb, 255, 235, 177);
+$ion-primitives-yellow-400: var(--token-primitives-yellow-400, #ffe07b);
+$ion-primitives-yellow-400-rgb: var(--token-primitives-yellow-400-rgb, 255, 224, 123);
+$ion-primitives-yellow-500: var(--token-primitives-yellow-500, #ffd600);
+$ion-primitives-yellow-500-rgb: var(--token-primitives-yellow-500-rgb, 255, 214, 0);
+$ion-primitives-yellow-600: var(--token-primitives-yellow-600, #f9bd0a);
+$ion-primitives-yellow-600-rgb: var(--token-primitives-yellow-600-rgb, 249, 189, 10);
+$ion-primitives-yellow-700: var(--token-primitives-yellow-700, #df9c00);
+$ion-primitives-yellow-700-rgb: var(--token-primitives-yellow-700-rgb, 223, 156, 0);
+$ion-primitives-yellow-800: var(--token-primitives-yellow-800, #ba8200);
+$ion-primitives-yellow-800-rgb: var(--token-primitives-yellow-800-rgb, 186, 130, 0);
+$ion-primitives-yellow-900: var(--token-primitives-yellow-900, #966503);
+$ion-primitives-yellow-900-rgb: var(--token-primitives-yellow-900-rgb, 150, 101, 3);
+$ion-primitives-yellow-1000: var(--token-primitives-yellow-1000, #704b02);
+$ion-primitives-yellow-1000-rgb: var(--token-primitives-yellow-1000-rgb, 112, 75, 2);
+$ion-primitives-yellow-1100: var(--token-primitives-yellow-1100, #533802);
+$ion-primitives-yellow-1100-rgb: var(--token-primitives-yellow-1100-rgb, 83, 56, 2);
+$ion-primitives-yellow-1200: var(--token-primitives-yellow-1200, #2c1e02);
+$ion-primitives-yellow-1200-rgb: var(--token-primitives-yellow-1200-rgb, 44, 30, 2);
+$ion-primitives-lime-100: var(--token-primitives-lime-100, #f3faea);
+$ion-primitives-lime-100-rgb: var(--token-primitives-lime-100-rgb, 243, 250, 234);
+$ion-primitives-lime-200: var(--token-primitives-lime-200, #eaf7db);
+$ion-primitives-lime-200-rgb: var(--token-primitives-lime-200-rgb, 234, 247, 219);
+$ion-primitives-lime-300: var(--token-primitives-lime-300, #d3efb2);
+$ion-primitives-lime-300-rgb: var(--token-primitives-lime-300-rgb, 211, 239, 178);
+$ion-primitives-lime-400: var(--token-primitives-lime-400, #bbe77d);
+$ion-primitives-lime-400-rgb: var(--token-primitives-lime-400-rgb, 187, 231, 125);
+$ion-primitives-lime-500: var(--token-primitives-lime-500, #a0df18);
+$ion-primitives-lime-500-rgb: var(--token-primitives-lime-500-rgb, 160, 223, 24);
+$ion-primitives-lime-600: var(--token-primitives-lime-600, #8dc515);
+$ion-primitives-lime-600-rgb: var(--token-primitives-lime-600-rgb, 141, 197, 21);
+$ion-primitives-lime-700: var(--token-primitives-lime-700, #7aab12);
+$ion-primitives-lime-700-rgb: var(--token-primitives-lime-700-rgb, 122, 171, 18);
+$ion-primitives-lime-800: var(--token-primitives-lime-800, #678f0f);
+$ion-primitives-lime-800-rgb: var(--token-primitives-lime-800-rgb, 103, 143, 15);
+$ion-primitives-lime-900: var(--token-primitives-lime-900, #53730c);
+$ion-primitives-lime-900-rgb: var(--token-primitives-lime-900-rgb, 83, 115, 12);
+$ion-primitives-lime-1000: var(--token-primitives-lime-1000, #3e5709);
+$ion-primitives-lime-1000-rgb: var(--token-primitives-lime-1000-rgb, 62, 87, 9);
+$ion-primitives-lime-1100: var(--token-primitives-lime-1100, #2a3a06);
+$ion-primitives-lime-1100-rgb: var(--token-primitives-lime-1100-rgb, 42, 58, 6);
+$ion-primitives-lime-1200: var(--token-primitives-lime-1200, #151e03);
+$ion-primitives-lime-1200-rgb: var(--token-primitives-lime-1200-rgb, 21, 30, 3);
+$ion-primitives-green-100: var(--token-primitives-green-100, #ebf9ec);
+$ion-primitives-green-100-rgb: var(--token-primitives-green-100-rgb, 235, 249, 236);
+$ion-primitives-green-200: var(--token-primitives-green-200, #dcf5de);
+$ion-primitives-green-200-rgb: var(--token-primitives-green-200-rgb, 220, 245, 222);
+$ion-primitives-green-300: var(--token-primitives-green-300, #b3ebb7);
+$ion-primitives-green-300-rgb: var(--token-primitives-green-300-rgb, 179, 235, 183);
+$ion-primitives-green-400: var(--token-primitives-green-400, #7fe089);
+$ion-primitives-green-400-rgb: var(--token-primitives-green-400-rgb, 127, 224, 137);
+$ion-primitives-green-500: var(--token-primitives-green-500, #23d643);
+$ion-primitives-green-500-rgb: var(--token-primitives-green-500-rgb, 35, 214, 67);
+$ion-primitives-green-600: var(--token-primitives-green-600, #1fbd3b);
+$ion-primitives-green-600-rgb: var(--token-primitives-green-600-rgb, 31, 189, 59);
+$ion-primitives-green-700: var(--token-primitives-green-700, #1ba433);
+$ion-primitives-green-700-rgb: var(--token-primitives-green-700-rgb, 27, 164, 51);
+$ion-primitives-green-800: var(--token-primitives-green-800, #178a2b);
+$ion-primitives-green-800-rgb: var(--token-primitives-green-800-rgb, 23, 138, 43);
+$ion-primitives-green-900: var(--token-primitives-green-900, #126f23);
+$ion-primitives-green-900-rgb: var(--token-primitives-green-900-rgb, 18, 111, 35);
+$ion-primitives-green-1000: var(--token-primitives-green-1000, #0e531a);
+$ion-primitives-green-1000-rgb: var(--token-primitives-green-1000-rgb, 14, 83, 26);
+$ion-primitives-green-1100: var(--token-primitives-green-1100, #093811);
+$ion-primitives-green-1100-rgb: var(--token-primitives-green-1100-rgb, 9, 56, 17);
+$ion-primitives-green-1200: var(--token-primitives-green-1200, #051d09);
+$ion-primitives-green-1200-rgb: var(--token-primitives-green-1200-rgb, 5, 29, 9);
+$ion-primitives-teal-100: var(--token-primitives-teal-100, #eaf8f5);
+$ion-primitives-teal-100-rgb: var(--token-primitives-teal-100-rgb, 234, 248, 245);
+$ion-primitives-teal-200: var(--token-primitives-teal-200, #dbf3ee);
+$ion-primitives-teal-200-rgb: var(--token-primitives-teal-200-rgb, 219, 243, 238);
+$ion-primitives-teal-300: var(--token-primitives-teal-300, #b1e7dd);
+$ion-primitives-teal-300-rgb: var(--token-primitives-teal-300-rgb, 177, 231, 221);
+$ion-primitives-teal-400: var(--token-primitives-teal-400, #7bdbca);
+$ion-primitives-teal-400-rgb: var(--token-primitives-teal-400-rgb, 123, 219, 202);
+$ion-primitives-teal-500: var(--token-primitives-teal-500, #00cfb7);
+$ion-primitives-teal-500-rgb: var(--token-primitives-teal-500-rgb, 0, 207, 183);
+$ion-primitives-teal-600: var(--token-primitives-teal-600, #00b7a2);
+$ion-primitives-teal-600-rgb: var(--token-primitives-teal-600-rgb, 0, 183, 162);
+$ion-primitives-teal-700: var(--token-primitives-teal-700, #009e8c);
+$ion-primitives-teal-700-rgb: var(--token-primitives-teal-700-rgb, 0, 158, 140);
+$ion-primitives-teal-800: var(--token-primitives-teal-800, #008576);
+$ion-primitives-teal-800-rgb: var(--token-primitives-teal-800-rgb, 0, 133, 118);
+$ion-primitives-teal-900: var(--token-primitives-teal-900, #006b5f);
+$ion-primitives-teal-900-rgb: var(--token-primitives-teal-900-rgb, 0, 107, 95);
+$ion-primitives-teal-1000: var(--token-primitives-teal-1000, #005147);
+$ion-primitives-teal-1000-rgb: var(--token-primitives-teal-1000-rgb, 0, 81, 71);
+$ion-primitives-teal-1100: var(--token-primitives-teal-1100, #003630);
+$ion-primitives-teal-1100-rgb: var(--token-primitives-teal-1100-rgb, 0, 54, 48);
+$ion-primitives-teal-1200: var(--token-primitives-teal-1200, #001c19);
+$ion-primitives-teal-1200-rgb: var(--token-primitives-teal-1200-rgb, 0, 28, 25);
+$ion-primitives-aqua-100: var(--token-primitives-aqua-100, #ebf9fe);
+$ion-primitives-aqua-100-rgb: var(--token-primitives-aqua-100-rgb, 235, 249, 254);
+$ion-primitives-aqua-200: var(--token-primitives-aqua-200, #dcf4fd);
+$ion-primitives-aqua-200-rgb: var(--token-primitives-aqua-200-rgb, 220, 244, 253);
+$ion-primitives-aqua-300: var(--token-primitives-aqua-300, #b3e9fc);
+$ion-primitives-aqua-300-rgb: var(--token-primitives-aqua-300-rgb, 179, 233, 252);
+$ion-primitives-aqua-400: var(--token-primitives-aqua-400, #80defa);
+$ion-primitives-aqua-400-rgb: var(--token-primitives-aqua-400-rgb, 128, 222, 250);
+$ion-primitives-aqua-500: var(--token-primitives-aqua-500, #27d3f9);
+$ion-primitives-aqua-500-rgb: var(--token-primitives-aqua-500-rgb, 39, 211, 249);
+$ion-primitives-aqua-600: var(--token-primitives-aqua-600, #22bbdc);
+$ion-primitives-aqua-600-rgb: var(--token-primitives-aqua-600-rgb, 34, 187, 220);
+$ion-primitives-aqua-700: var(--token-primitives-aqua-700, #1ea2bf);
+$ion-primitives-aqua-700-rgb: var(--token-primitives-aqua-700-rgb, 30, 162, 191);
+$ion-primitives-aqua-800: var(--token-primitives-aqua-800, #1988a0);
+$ion-primitives-aqua-800-rgb: var(--token-primitives-aqua-800-rgb, 25, 136, 160);
+$ion-primitives-aqua-900: var(--token-primitives-aqua-900, #146d81);
+$ion-primitives-aqua-900-rgb: var(--token-primitives-aqua-900-rgb, 20, 109, 129);
+$ion-primitives-aqua-1000: var(--token-primitives-aqua-1000, #0f5261);
+$ion-primitives-aqua-1000-rgb: var(--token-primitives-aqua-1000-rgb, 15, 82, 97);
+$ion-primitives-aqua-1100: var(--token-primitives-aqua-1100, #0a3741);
+$ion-primitives-aqua-1100-rgb: var(--token-primitives-aqua-1100-rgb, 10, 55, 65);
+$ion-primitives-aqua-1200: var(--token-primitives-aqua-1200, #051c21);
+$ion-primitives-aqua-1200-rgb: var(--token-primitives-aqua-1200-rgb, 5, 28, 33);
+$ion-primitives-blue-100: var(--token-primitives-blue-100, #f2f4fd);
+$ion-primitives-blue-100-rgb: var(--token-primitives-blue-100-rgb, 242, 244, 253);
+$ion-primitives-blue-200: var(--token-primitives-blue-200, #e9ecfc);
+$ion-primitives-blue-200-rgb: var(--token-primitives-blue-200-rgb, 233, 236, 252);
+$ion-primitives-blue-300: var(--token-primitives-blue-300, #d0d7fa);
+$ion-primitives-blue-300-rgb: var(--token-primitives-blue-300-rgb, 208, 215, 250);
+$ion-primitives-blue-400: var(--token-primitives-blue-400, #b5c0f7);
+$ion-primitives-blue-400-rgb: var(--token-primitives-blue-400-rgb, 181, 192, 247);
+$ion-primitives-blue-500: var(--token-primitives-blue-500, #94a5f4);
+$ion-primitives-blue-500-rgb: var(--token-primitives-blue-500-rgb, 148, 165, 244);
+$ion-primitives-blue-600: var(--token-primitives-blue-600, #6986f2);
+$ion-primitives-blue-600-rgb: var(--token-primitives-blue-600-rgb, 105, 134, 242);
+$ion-primitives-blue-700: var(--token-primitives-blue-700, #105cef);
+$ion-primitives-blue-700-rgb: var(--token-primitives-blue-700-rgb, 16, 92, 239);
+$ion-primitives-blue-800: var(--token-primitives-blue-800, #0f54da);
+$ion-primitives-blue-800-rgb: var(--token-primitives-blue-800-rgb, 15, 84, 218);
+$ion-primitives-blue-900: var(--token-primitives-blue-900, #0d4bc3);
+$ion-primitives-blue-900-rgb: var(--token-primitives-blue-900-rgb, 13, 75, 195);
+$ion-primitives-blue-1000: var(--token-primitives-blue-1000, #0b41a9);
+$ion-primitives-blue-1000-rgb: var(--token-primitives-blue-1000-rgb, 11, 65, 169);
+$ion-primitives-blue-1100: var(--token-primitives-blue-1100, #09358a);
+$ion-primitives-blue-1100-rgb: var(--token-primitives-blue-1100-rgb, 9, 53, 138);
+$ion-primitives-blue-1200: var(--token-primitives-blue-1200, #072561);
+$ion-primitives-blue-1200-rgb: var(--token-primitives-blue-1200-rgb, 7, 37, 97);
+$ion-primitives-indigo-100: var(--token-primitives-indigo-100, #f3f2fb);
+$ion-primitives-indigo-100-rgb: var(--token-primitives-indigo-100-rgb, 243, 242, 251);
+$ion-primitives-indigo-200: var(--token-primitives-indigo-200, #eae9f9);
+$ion-primitives-indigo-200-rgb: var(--token-primitives-indigo-200-rgb, 234, 233, 249);
+$ion-primitives-indigo-300: var(--token-primitives-indigo-300, #d3d1f2);
+$ion-primitives-indigo-300-rgb: var(--token-primitives-indigo-300-rgb, 211, 209, 242);
+$ion-primitives-indigo-400: var(--token-primitives-indigo-400, #bab5eb);
+$ion-primitives-indigo-400-rgb: var(--token-primitives-indigo-400-rgb, 186, 181, 235);
+$ion-primitives-indigo-500: var(--token-primitives-indigo-500, #9d95e4);
+$ion-primitives-indigo-500-rgb: var(--token-primitives-indigo-500-rgb, 157, 149, 228);
+$ion-primitives-indigo-600: var(--token-primitives-indigo-600, #786bdd);
+$ion-primitives-indigo-600-rgb: var(--token-primitives-indigo-600-rgb, 120, 107, 221);
+$ion-primitives-indigo-700: var(--token-primitives-indigo-700, #411bd5);
+$ion-primitives-indigo-700-rgb: var(--token-primitives-indigo-700-rgb, 65, 27, 213);
+$ion-primitives-indigo-800: var(--token-primitives-indigo-800, #3b19c3);
+$ion-primitives-indigo-800-rgb: var(--token-primitives-indigo-800-rgb, 59, 25, 195);
+$ion-primitives-indigo-900: var(--token-primitives-indigo-900, #3516ae);
+$ion-primitives-indigo-900-rgb: var(--token-primitives-indigo-900-rgb, 53, 22, 174);
+$ion-primitives-indigo-1000: var(--token-primitives-indigo-1000, #2e1397);
+$ion-primitives-indigo-1000-rgb: var(--token-primitives-indigo-1000-rgb, 46, 19, 151);
+$ion-primitives-indigo-1100: var(--token-primitives-indigo-1100, #26107b);
+$ion-primitives-indigo-1100-rgb: var(--token-primitives-indigo-1100-rgb, 38, 16, 123);
+$ion-primitives-indigo-1200: var(--token-primitives-indigo-1200, #1a0b57);
+$ion-primitives-indigo-1200-rgb: var(--token-primitives-indigo-1200-rgb, 26, 11, 87);
+$ion-primitives-violet-100: var(--token-primitives-violet-100, #f5f2fe);
+$ion-primitives-violet-100-rgb: var(--token-primitives-violet-100-rgb, 245, 242, 254);
+$ion-primitives-violet-200: var(--token-primitives-violet-200, #eee9fd);
+$ion-primitives-violet-200-rgb: var(--token-primitives-violet-200-rgb, 238, 233, 253);
+$ion-primitives-violet-300: var(--token-primitives-violet-300, #dcd1fb);
+$ion-primitives-violet-300-rgb: var(--token-primitives-violet-300-rgb, 220, 209, 251);
+$ion-primitives-violet-400: var(--token-primitives-violet-400, #c9b6f9);
+$ion-primitives-violet-400-rgb: var(--token-primitives-violet-400-rgb, 201, 182, 249);
+$ion-primitives-violet-500: var(--token-primitives-violet-500, #b396f6);
+$ion-primitives-violet-500-rgb: var(--token-primitives-violet-500-rgb, 179, 150, 246);
+$ion-primitives-violet-600: var(--token-primitives-violet-600, #9a6cf4);
+$ion-primitives-violet-600-rgb: var(--token-primitives-violet-600-rgb, 154, 108, 244);
+$ion-primitives-violet-700: var(--token-primitives-violet-700, #7c20f2);
+$ion-primitives-violet-700-rgb: var(--token-primitives-violet-700-rgb, 124, 32, 242);
+$ion-primitives-violet-800: var(--token-primitives-violet-800, #711ddd);
+$ion-primitives-violet-800-rgb: var(--token-primitives-violet-800-rgb, 113, 29, 221);
+$ion-primitives-violet-900: var(--token-primitives-violet-900, #651ac5);
+$ion-primitives-violet-900-rgb: var(--token-primitives-violet-900-rgb, 101, 26, 197);
+$ion-primitives-violet-1000: var(--token-primitives-violet-1000, #5817ab);
+$ion-primitives-violet-1000-rgb: var(--token-primitives-violet-1000-rgb, 88, 23, 171);
+$ion-primitives-violet-1100: var(--token-primitives-violet-1100, #48128c);
+$ion-primitives-violet-1100-rgb: var(--token-primitives-violet-1100-rgb, 72, 18, 140);
+$ion-primitives-violet-1200: var(--token-primitives-violet-1200, #330d63);
+$ion-primitives-violet-1200-rgb: var(--token-primitives-violet-1200-rgb, 51, 13, 99);
+$ion-primitives-purple-100: var(--token-primitives-purple-100, #f9f3fe);
+$ion-primitives-purple-100-rgb: var(--token-primitives-purple-100-rgb, 249, 243, 254);
+$ion-primitives-purple-200: var(--token-primitives-purple-200, #f5eafd);
+$ion-primitives-purple-200-rgb: var(--token-primitives-purple-200-rgb, 245, 234, 253);
+$ion-primitives-purple-300: var(--token-primitives-purple-300, #e9d3fa);
+$ion-primitives-purple-300-rgb: var(--token-primitives-purple-300-rgb, 233, 211, 250);
+$ion-primitives-purple-400: var(--token-primitives-purple-400, #deb9f8);
+$ion-primitives-purple-400-rgb: var(--token-primitives-purple-400-rgb, 222, 185, 248);
+$ion-primitives-purple-500: var(--token-primitives-purple-500, #d29bf6);
+$ion-primitives-purple-500-rgb: var(--token-primitives-purple-500-rgb, 210, 155, 246);
+$ion-primitives-purple-600: var(--token-primitives-purple-600, #c575f3);
+$ion-primitives-purple-600-rgb: var(--token-primitives-purple-600-rgb, 197, 117, 243);
+$ion-primitives-purple-700: var(--token-primitives-purple-700, #b73cf1);
+$ion-primitives-purple-700-rgb: var(--token-primitives-purple-700-rgb, 183, 60, 241);
+$ion-primitives-purple-800: var(--token-primitives-purple-800, #a737dc);
+$ion-primitives-purple-800-rgb: var(--token-primitives-purple-800-rgb, 167, 55, 220);
+$ion-primitives-purple-900: var(--token-primitives-purple-900, #9531c5);
+$ion-primitives-purple-900-rgb: var(--token-primitives-purple-900-rgb, 149, 49, 197);
+$ion-primitives-purple-1000: var(--token-primitives-purple-1000, #812aaa);
+$ion-primitives-purple-1000-rgb: var(--token-primitives-purple-1000-rgb, 129, 42, 170);
+$ion-primitives-purple-1100: var(--token-primitives-purple-1100, #6a238b);
+$ion-primitives-purple-1100-rgb: var(--token-primitives-purple-1100-rgb, 106, 35, 139);
+$ion-primitives-purple-1200: var(--token-primitives-purple-1200, #4b1862);
+$ion-primitives-purple-1200-rgb: var(--token-primitives-purple-1200-rgb, 75, 24, 98);
+$ion-primitives-magenta-100: var(--token-primitives-magenta-100, #fdf3fb);
+$ion-primitives-magenta-100-rgb: var(--token-primitives-magenta-100-rgb, 253, 243, 251);
+$ion-primitives-magenta-200: var(--token-primitives-magenta-200, #fcebf8);
+$ion-primitives-magenta-200-rgb: var(--token-primitives-magenta-200-rgb, 252, 235, 248);
+$ion-primitives-magenta-300: var(--token-primitives-magenta-300, #f9d4f1);
+$ion-primitives-magenta-300-rgb: var(--token-primitives-magenta-300-rgb, 249, 212, 241);
+$ion-primitives-magenta-400: var(--token-primitives-magenta-400, #f6bcea);
+$ion-primitives-magenta-400-rgb: var(--token-primitives-magenta-400-rgb, 246, 188, 234);
+$ion-primitives-magenta-500: var(--token-primitives-magenta-500, #f39fe3);
+$ion-primitives-magenta-500-rgb: var(--token-primitives-magenta-500-rgb, 243, 159, 227);
+$ion-primitives-magenta-600: var(--token-primitives-magenta-600, #f07cdb);
+$ion-primitives-magenta-600-rgb: var(--token-primitives-magenta-600-rgb, 240, 124, 219);
+$ion-primitives-magenta-700: var(--token-primitives-magenta-700, #ed4ad3);
+$ion-primitives-magenta-700-rgb: var(--token-primitives-magenta-700-rgb, 237, 74, 211);
+$ion-primitives-magenta-800: var(--token-primitives-magenta-800, #d844c1);
+$ion-primitives-magenta-800-rgb: var(--token-primitives-magenta-800-rgb, 216, 68, 193);
+$ion-primitives-magenta-900: var(--token-primitives-magenta-900, #c13cac);
+$ion-primitives-magenta-900-rgb: var(--token-primitives-magenta-900-rgb, 193, 60, 172);
+$ion-primitives-magenta-1000: var(--token-primitives-magenta-1000, #a83495);
+$ion-primitives-magenta-1000-rgb: var(--token-primitives-magenta-1000-rgb, 168, 52, 149);
+$ion-primitives-magenta-1100: var(--token-primitives-magenta-1100, #892b7a);
+$ion-primitives-magenta-1100-rgb: var(--token-primitives-magenta-1100-rgb, 137, 43, 122);
+$ion-primitives-magenta-1200: var(--token-primitives-magenta-1200, #611e56);
+$ion-primitives-magenta-1200-rgb: var(--token-primitives-magenta-1200-rgb, 97, 30, 86);
+$ion-primitives-pink-100: var(--token-primitives-pink-100, #fef3f5);
+$ion-primitives-pink-100-rgb: var(--token-primitives-pink-100-rgb, 254, 243, 245);
+$ion-primitives-pink-200: var(--token-primitives-pink-200, #fdeaee);
+$ion-primitives-pink-200-rgb: var(--token-primitives-pink-200-rgb, 253, 234, 238);
+$ion-primitives-pink-300: var(--token-primitives-pink-300, #fad3dc);
+$ion-primitives-pink-300-rgb: var(--token-primitives-pink-300-rgb, 250, 211, 220);
+$ion-primitives-pink-400: var(--token-primitives-pink-400, #f8b9c9);
+$ion-primitives-pink-400-rgb: var(--token-primitives-pink-400-rgb, 248, 185, 201);
+$ion-primitives-pink-500: var(--token-primitives-pink-500, #f69bb3);
+$ion-primitives-pink-500-rgb: var(--token-primitives-pink-500-rgb, 246, 155, 179);
+$ion-primitives-pink-600: var(--token-primitives-pink-600, #f3759a);
+$ion-primitives-pink-600-rgb: var(--token-primitives-pink-600-rgb, 243, 117, 154);
+$ion-primitives-pink-700: var(--token-primitives-pink-700, #f13b7d);
+$ion-primitives-pink-700-rgb: var(--token-primitives-pink-700-rgb, 241, 59, 125);
+$ion-primitives-pink-800: var(--token-primitives-pink-800, #dc3672);
+$ion-primitives-pink-800-rgb: var(--token-primitives-pink-800-rgb, 220, 54, 114);
+$ion-primitives-pink-900: var(--token-primitives-pink-900, #c53066);
+$ion-primitives-pink-900-rgb: var(--token-primitives-pink-900-rgb, 197, 48, 102);
+$ion-primitives-pink-1000: var(--token-primitives-pink-1000, #aa2a58);
+$ion-primitives-pink-1000-rgb: var(--token-primitives-pink-1000-rgb, 170, 42, 88);
+$ion-primitives-pink-1100: var(--token-primitives-pink-1100, #8b2248);
+$ion-primitives-pink-1100-rgb: var(--token-primitives-pink-1100-rgb, 139, 34, 72);
+$ion-primitives-pink-1200: var(--token-primitives-pink-1200, #621833);
+$ion-primitives-pink-1200-rgb: var(--token-primitives-pink-1200-rgb, 98, 24, 51);
+$ion-semantics-primary-100: var(--token-semantics-primary-100, $ion-primitives-blue-100);
+$ion-semantics-primary-100-rgb: var(--token-semantics-primary-100-rgb, 242, 244, 253);
+$ion-semantics-primary-200: var(--token-semantics-primary-200, $ion-primitives-blue-200);
+$ion-semantics-primary-200-rgb: var(--token-semantics-primary-200-rgb, 233, 236, 252);
+$ion-semantics-primary-300: var(--token-semantics-primary-300, $ion-primitives-blue-300);
+$ion-semantics-primary-300-rgb: var(--token-semantics-primary-300-rgb, 208, 215, 250);
+$ion-semantics-primary-400: var(--token-semantics-primary-400, $ion-primitives-blue-400);
+$ion-semantics-primary-400-rgb: var(--token-semantics-primary-400-rgb, 181, 192, 247);
+$ion-semantics-primary-500: var(--token-semantics-primary-500, $ion-primitives-blue-500);
+$ion-semantics-primary-500-rgb: var(--token-semantics-primary-500-rgb, 148, 165, 244);
+$ion-semantics-primary-600: var(--token-semantics-primary-600, $ion-primitives-blue-600);
+$ion-semantics-primary-600-rgb: var(--token-semantics-primary-600-rgb, 105, 134, 242);
+$ion-semantics-primary-700: var(--token-semantics-primary-700, $ion-primitives-blue-700);
+$ion-semantics-primary-700-rgb: var(--token-semantics-primary-700-rgb, 16, 92, 239);
+$ion-semantics-primary-800: var(--token-semantics-primary-800, $ion-primitives-blue-800);
+$ion-semantics-primary-800-rgb: var(--token-semantics-primary-800-rgb, 15, 84, 218);
+$ion-semantics-primary-900: var(--token-semantics-primary-900, $ion-primitives-blue-900);
+$ion-semantics-primary-900-rgb: var(--token-semantics-primary-900-rgb, 13, 75, 195);
+$ion-semantics-primary-1000: var(--token-semantics-primary-1000, $ion-primitives-blue-1000);
+$ion-semantics-primary-1000-rgb: var(--token-semantics-primary-1000-rgb, 11, 65, 169);
+$ion-semantics-primary-1100: var(--token-semantics-primary-1100, $ion-primitives-blue-1100);
+$ion-semantics-primary-1100-rgb: var(--token-semantics-primary-1100-rgb, 9, 53, 138);
+$ion-semantics-primary-1200: var(--token-semantics-primary-1200, $ion-primitives-blue-1200);
+$ion-semantics-primary-1200-rgb: var(--token-semantics-primary-1200-rgb, 7, 37, 97);
+$ion-semantics-primary-base: var(--token-semantics-primary-base, $ion-semantics-primary-700);
+$ion-semantics-primary-base-rgb: var(--token-semantics-primary-base-rgb, 16, 92, 239);
+$ion-semantics-info-100: var(--token-semantics-info-100, $ion-primitives-blue-100);
+$ion-semantics-info-100-rgb: var(--token-semantics-info-100-rgb, 242, 244, 253);
+$ion-semantics-info-200: var(--token-semantics-info-200, $ion-primitives-blue-200);
+$ion-semantics-info-200-rgb: var(--token-semantics-info-200-rgb, 233, 236, 252);
+$ion-semantics-info-300: var(--token-semantics-info-300, $ion-primitives-blue-300);
+$ion-semantics-info-300-rgb: var(--token-semantics-info-300-rgb, 208, 215, 250);
+$ion-semantics-info-400: var(--token-semantics-info-400, $ion-primitives-blue-400);
+$ion-semantics-info-400-rgb: var(--token-semantics-info-400-rgb, 181, 192, 247);
+$ion-semantics-info-500: var(--token-semantics-info-500, $ion-primitives-blue-500);
+$ion-semantics-info-500-rgb: var(--token-semantics-info-500-rgb, 148, 165, 244);
+$ion-semantics-info-600: var(--token-semantics-info-600, $ion-primitives-blue-600);
+$ion-semantics-info-600-rgb: var(--token-semantics-info-600-rgb, 105, 134, 242);
+$ion-semantics-info-700: var(--token-semantics-info-700, $ion-primitives-blue-700);
+$ion-semantics-info-700-rgb: var(--token-semantics-info-700-rgb, 16, 92, 239);
+$ion-semantics-info-800: var(--token-semantics-info-800, $ion-primitives-blue-800);
+$ion-semantics-info-800-rgb: var(--token-semantics-info-800-rgb, 15, 84, 218);
+$ion-semantics-info-900: var(--token-semantics-info-900, $ion-primitives-blue-900);
+$ion-semantics-info-900-rgb: var(--token-semantics-info-900-rgb, 13, 75, 195);
+$ion-semantics-info-1000: var(--token-semantics-info-1000, $ion-primitives-blue-1000);
+$ion-semantics-info-1000-rgb: var(--token-semantics-info-1000-rgb, 11, 65, 169);
+$ion-semantics-info-1100: var(--token-semantics-info-1100, $ion-primitives-blue-1100);
+$ion-semantics-info-1100-rgb: var(--token-semantics-info-1100-rgb, 9, 53, 138);
+$ion-semantics-info-1200: var(--token-semantics-info-1200, $ion-primitives-blue-1200);
+$ion-semantics-info-1200-rgb: var(--token-semantics-info-1200-rgb, 7, 37, 97);
+$ion-semantics-info-base: var(--token-semantics-info-base, $ion-semantics-info-700);
+$ion-semantics-info-base-rgb: var(--token-semantics-info-base-rgb, 16, 92, 239);
+$ion-semantics-success-100: var(--token-semantics-success-100, $ion-primitives-green-100);
+$ion-semantics-success-100-rgb: var(--token-semantics-success-100-rgb, 235, 249, 236);
+$ion-semantics-success-200: var(--token-semantics-success-200, $ion-primitives-green-200);
+$ion-semantics-success-200-rgb: var(--token-semantics-success-200-rgb, 220, 245, 222);
+$ion-semantics-success-300: var(--token-semantics-success-300, $ion-primitives-green-300);
+$ion-semantics-success-300-rgb: var(--token-semantics-success-300-rgb, 179, 235, 183);
+$ion-semantics-success-400: var(--token-semantics-success-400, $ion-primitives-green-400);
+$ion-semantics-success-400-rgb: var(--token-semantics-success-400-rgb, 127, 224, 137);
+$ion-semantics-success-500: var(--token-semantics-success-500, $ion-primitives-green-500);
+$ion-semantics-success-500-rgb: var(--token-semantics-success-500-rgb, 35, 214, 67);
+$ion-semantics-success-600: var(--token-semantics-success-600, $ion-primitives-green-600);
+$ion-semantics-success-600-rgb: var(--token-semantics-success-600-rgb, 31, 189, 59);
+$ion-semantics-success-700: var(--token-semantics-success-700, $ion-primitives-green-700);
+$ion-semantics-success-700-rgb: var(--token-semantics-success-700-rgb, 27, 164, 51);
+$ion-semantics-success-800: var(--token-semantics-success-800, $ion-primitives-green-800);
+$ion-semantics-success-800-rgb: var(--token-semantics-success-800-rgb, 23, 138, 43);
+$ion-semantics-success-900: var(--token-semantics-success-900, $ion-primitives-green-900);
+$ion-semantics-success-900-rgb: var(--token-semantics-success-900-rgb, 18, 111, 35);
+$ion-semantics-success-1000: var(--token-semantics-success-1000, $ion-primitives-green-1000);
+$ion-semantics-success-1000-rgb: var(--token-semantics-success-1000-rgb, 14, 83, 26);
+$ion-semantics-success-1100: var(--token-semantics-success-1100, $ion-primitives-green-1100);
+$ion-semantics-success-1100-rgb: var(--token-semantics-success-1100-rgb, 9, 56, 17);
+$ion-semantics-success-1200: var(--token-semantics-success-1200, $ion-primitives-green-1200);
+$ion-semantics-success-1200-rgb: var(--token-semantics-success-1200-rgb, 5, 29, 9);
+$ion-semantics-success-base: var(--token-semantics-success-base, $ion-semantics-success-700);
+$ion-semantics-success-base-rgb: var(--token-semantics-success-base-rgb, 27, 164, 51);
+$ion-semantics-danger-100: var(--token-semantics-danger-100, $ion-primitives-red-100);
+$ion-semantics-danger-100-rgb: var(--token-semantics-danger-100-rgb, 254, 237, 237);
+$ion-semantics-danger-200: var(--token-semantics-danger-200, $ion-primitives-red-200);
+$ion-semantics-danger-200-rgb: var(--token-semantics-danger-200-rgb, 253, 225, 225);
+$ion-semantics-danger-300: var(--token-semantics-danger-300, $ion-primitives-red-300);
+$ion-semantics-danger-300-rgb: var(--token-semantics-danger-300-rgb, 252, 193, 193);
+$ion-semantics-danger-400: var(--token-semantics-danger-400, $ion-primitives-red-400);
+$ion-semantics-danger-400-rgb: var(--token-semantics-danger-400-rgb, 250, 161, 161);
+$ion-semantics-danger-500: var(--token-semantics-danger-500, $ion-primitives-red-500);
+$ion-semantics-danger-500-rgb: var(--token-semantics-danger-500-rgb, 249, 125, 125);
+$ion-semantics-danger-600: var(--token-semantics-danger-600, $ion-primitives-red-600);
+$ion-semantics-danger-600-rgb: var(--token-semantics-danger-600-rgb, 248, 81, 81);
+$ion-semantics-danger-700: var(--token-semantics-danger-700, $ion-primitives-red-700);
+$ion-semantics-danger-700-rgb: var(--token-semantics-danger-700-rgb, 229, 41, 41);
+$ion-semantics-danger-800: var(--token-semantics-danger-800, $ion-primitives-red-800);
+$ion-semantics-danger-800-rgb: var(--token-semantics-danger-800-rgb, 191, 34, 34);
+$ion-semantics-danger-900: var(--token-semantics-danger-900, $ion-primitives-red-900);
+$ion-semantics-danger-900-rgb: var(--token-semantics-danger-900-rgb, 153, 27, 27);
+$ion-semantics-danger-1000: var(--token-semantics-danger-1000, $ion-primitives-red-1000);
+$ion-semantics-danger-1000-rgb: var(--token-semantics-danger-1000-rgb, 118, 21, 21);
+$ion-semantics-danger-1100: var(--token-semantics-danger-1100, $ion-primitives-red-1100);
+$ion-semantics-danger-1100-rgb: var(--token-semantics-danger-1100-rgb, 84, 15, 15);
+$ion-semantics-danger-1200: var(--token-semantics-danger-1200, $ion-primitives-red-1200);
+$ion-semantics-danger-1200-rgb: var(--token-semantics-danger-1200-rgb, 51, 9, 9);
+$ion-semantics-danger-base: var(--token-semantics-danger-base, $ion-semantics-danger-700);
+$ion-semantics-danger-base-rgb: var(--token-semantics-danger-base-rgb, 229, 41, 41);
+$ion-semantics-warning-100: var(--token-semantics-warning-100, $ion-primitives-yellow-100);
+$ion-semantics-warning-100-rgb: var(--token-semantics-warning-100-rgb, 255, 249, 234);
+$ion-semantics-warning-200: var(--token-semantics-warning-200, $ion-primitives-yellow-200);
+$ion-semantics-warning-200-rgb: var(--token-semantics-warning-200-rgb, 255, 245, 219);
+$ion-semantics-warning-300: var(--token-semantics-warning-300, $ion-primitives-yellow-300);
+$ion-semantics-warning-300-rgb: var(--token-semantics-warning-300-rgb, 255, 235, 177);
+$ion-semantics-warning-400: var(--token-semantics-warning-400, $ion-primitives-yellow-400);
+$ion-semantics-warning-400-rgb: var(--token-semantics-warning-400-rgb, 255, 224, 123);
+$ion-semantics-warning-500: var(--token-semantics-warning-500, $ion-primitives-yellow-500);
+$ion-semantics-warning-500-rgb: var(--token-semantics-warning-500-rgb, 255, 214, 0);
+$ion-semantics-warning-600: var(--token-semantics-warning-600, $ion-primitives-yellow-600);
+$ion-semantics-warning-600-rgb: var(--token-semantics-warning-600-rgb, 249, 189, 10);
+$ion-semantics-warning-700: var(--token-semantics-warning-700, $ion-primitives-yellow-700);
+$ion-semantics-warning-700-rgb: var(--token-semantics-warning-700-rgb, 223, 156, 0);
+$ion-semantics-warning-800: var(--token-semantics-warning-800, $ion-primitives-yellow-800);
+$ion-semantics-warning-800-rgb: var(--token-semantics-warning-800-rgb, 186, 130, 0);
+$ion-semantics-warning-900: var(--token-semantics-warning-900, $ion-primitives-yellow-900);
+$ion-semantics-warning-900-rgb: var(--token-semantics-warning-900-rgb, 150, 101, 3);
+$ion-semantics-warning-1000: var(--token-semantics-warning-1000, $ion-primitives-yellow-1000);
+$ion-semantics-warning-1000-rgb: var(--token-semantics-warning-1000-rgb, 112, 75, 2);
+$ion-semantics-warning-1100: var(--token-semantics-warning-1100, $ion-primitives-yellow-1100);
+$ion-semantics-warning-1100-rgb: var(--token-semantics-warning-1100-rgb, 83, 56, 2);
+$ion-semantics-warning-1200: var(--token-semantics-warning-1200, $ion-primitives-yellow-1200);
+$ion-semantics-warning-1200-rgb: var(--token-semantics-warning-1200-rgb, 44, 30, 2);
+$ion-semantics-warning-base: var(--token-semantics-warning-base, $ion-semantics-warning-500);
+$ion-semantics-warning-base-rgb: var(--token-semantics-warning-base-rgb, 255, 214, 0);
+$ion-scale-0: var(--token-scale-0, 0px);
+$ion-scale-100: var(--token-scale-100, 4px);
+$ion-scale-150: var(--token-scale-150, 6px);
+$ion-scale-200: var(--token-scale-200, 8px);
+$ion-scale-250: var(--token-scale-250, 10px);
+$ion-scale-300: var(--token-scale-300, 12px);
+$ion-scale-400: var(--token-scale-400, 16px);
+$ion-scale-500: var(--token-scale-500, 20px);
+$ion-scale-600: var(--token-scale-600, 24px);
+$ion-scale-700: var(--token-scale-700, 28px);
+$ion-scale-800: var(--token-scale-800, 32px);
+$ion-scale-900: var(--token-scale-900, 36px);
+$ion-scale-1000: var(--token-scale-1000, 40px);
+$ion-scale-1100: var(--token-scale-1100, 44px);
+$ion-scale-1200: var(--token-scale-1200, 48px);
+$ion-scale-1400: var(--token-scale-1400, 56px);
+$ion-scale-1600: var(--token-scale-1600, 64px);
+$ion-scale-1800: var(--token-scale-1800, 72px);
+$ion-scale-2000: var(--token-scale-2000, 80px);
+$ion-scale-2400: var(--token-scale-2400, 96px);
+$ion-scale-2800: var(--token-scale-2800, 112px);
+$ion-scale-3200: var(--token-scale-3200, 128px);
+$ion-scale-3400: var(--token-scale-3400, 136px);
+$ion-scale-3600: var(--token-scale-3600, 144px);
+$ion-scale-4000: var(--token-scale-4000, 160px);
+$ion-scale-5000: var(--token-scale-5000, 200px);
+$ion-scale-6200: var(--token-scale-6200, 248px);
+$ion-scale-7400: var(--token-scale-7400, 296px);
+$ion-scale-9000: var(--token-scale-9000, 360px);
+$ion-scale-025: var(--token-scale-025, 1px);
+$ion-scale-050: var(--token-scale-050, 2px);
+$ion-scale-075: var(--token-scale-075, 3px);
+$ion-border-default: var(--token-border-default, $ion-primitives-neutral-400);
+$ion-border-default-rgb: var(--token-border-default-rgb, 213, 213, 213);
+$ion-border-boldest: var(--token-border-boldest, $ion-primitives-neutral-1200);
+$ion-border-boldest-rgb: var(--token-border-boldest-rgb, 36, 36, 36);
+$ion-border-subtle: var(--token-border-subtle, $ion-primitives-neutral-100);
+$ion-border-subtle-rgb: var(--token-border-subtle-rgb, 245, 245, 245);
+$ion-border-subtlest: var(--token-border-subtlest, $ion-primitives-base-white);
+$ion-border-subtlest-rgb: var(--token-border-subtlest-rgb, 255, 255, 255);
+$ion-border-primary: var(--token-border-primary, $ion-semantics-primary-base);
+$ion-border-primary-rgb: var(--token-border-primary-rgb, 16, 92, 239);
+$ion-border-success: var(--token-border-success, $ion-semantics-success-900);
+$ion-border-success-rgb: var(--token-border-success-rgb, 18, 111, 35);
+$ion-border-warning: var(--token-border-warning, $ion-semantics-warning-900);
+$ion-border-warning-rgb: var(--token-border-warning-rgb, 150, 101, 3);
+$ion-border-disabled: var(--token-border-disabled, $ion-primitives-neutral-300);
+$ion-border-disabled-rgb: var(--token-border-disabled-rgb, 224, 224, 224);
+$ion-border-focus-0: var(--token-border-focus-0, none);
+$ion-border-focus-default: var(--token-border-focus-default, $ion-primitives-blue-400);
+$ion-border-focus-default-rgb: var(--token-border-focus-default-rgb, 181, 192, 247);
+$ion-border-focus-error: var(--token-border-focus-error, $ion-primitives-red-400);
+$ion-border-focus-error-rgb: var(--token-border-focus-error-rgb, 250, 161, 161);
+$ion-border-danger-default: var(--token-border-danger-default, $ion-semantics-danger-800);
+$ion-border-danger-default-rgb: var(--token-border-danger-default-rgb, 191, 34, 34);
+$ion-border-danger-press: var(--token-border-danger-press, $ion-semantics-danger-1000);
+$ion-border-danger-press-rgb: var(--token-border-danger-press-rgb, 118, 21, 21);
+$ion-border-input-default: var(--token-border-input-default, $ion-primitives-neutral-500);
+$ion-border-input-default-rgb: var(--token-border-input-default-rgb, 162, 162, 162);
+$ion-border-input-press: var(--token-border-input-press, $ion-primitives-neutral-700);
+$ion-border-input-press-rgb: var(--token-border-input-press-rgb, 119, 119, 119);
+$ion-border-input-read-only: var(--token-border-input-read-only, $ion-primitives-neutral-500);
+$ion-border-input-read-only-rgb: var(--token-border-input-read-only-rgb, 162, 162, 162);
+$ion-border-style-none: var(--token-border-style-none, none);
+$ion-border-style-solid: var(--token-border-style-solid, solid);
+$ion-border-style-dashed: var(--token-border-style-dashed, dashed);
+$ion-border-style-dotted: var(--token-border-style-dotted, dotted);
+$ion-border-size-0: var(--token-border-size-0, $ion-scale-0);
+$ion-border-size-025: var(--token-border-size-025, $ion-scale-025);
+$ion-border-size-050: var(--token-border-size-050, $ion-scale-050);
+$ion-border-size-075: var(--token-border-size-075, $ion-scale-075);
+$ion-border-radius-0: var(--token-border-radius-0, $ion-scale-0);
+$ion-border-radius-100: var(--token-border-radius-100, $ion-scale-100);
+$ion-border-radius-200: var(--token-border-radius-200, $ion-scale-200);
+$ion-border-radius-300: var(--token-border-radius-300, $ion-scale-300);
+$ion-border-radius-400: var(--token-border-radius-400, $ion-scale-400);
+$ion-border-radius-500: var(--token-border-radius-500, $ion-scale-500);
+$ion-border-radius-800: var(--token-border-radius-800, $ion-scale-800);
+$ion-border-radius-1000: var(--token-border-radius-1000, $ion-scale-1000);
+$ion-border-radius-full: var(--token-border-radius-full, 999px);
+$ion-border-radius-025: var(--token-border-radius-025, $ion-scale-050);
+$ion-bg-primary-base-default: var(--token-bg-primary-base-default, $ion-semantics-primary-base);
+$ion-bg-primary-base-default-rgb: var(--token-bg-primary-base-default-rgb, 16, 92, 239);
+$ion-bg-primary-base-press: var(--token-bg-primary-base-press, $ion-semantics-primary-900);
+$ion-bg-primary-base-press-rgb: var(--token-bg-primary-base-press-rgb, 13, 75, 195);
+$ion-bg-primary-subtle-default: var(--token-bg-primary-subtle-default, $ion-semantics-primary-100);
+$ion-bg-primary-subtle-default-rgb: var(--token-bg-primary-subtle-default-rgb, 242, 244, 253);
+$ion-bg-primary-subtle-press: var(--token-bg-primary-subtle-press, $ion-semantics-primary-300);
+$ion-bg-primary-subtle-press-rgb: var(--token-bg-primary-subtle-press-rgb, 208, 215, 250);
+$ion-bg-danger-base-default: var(--token-bg-danger-base-default, $ion-semantics-danger-800);
+$ion-bg-danger-base-default-rgb: var(--token-bg-danger-base-default-rgb, 191, 34, 34);
+$ion-bg-danger-base-press: var(--token-bg-danger-base-press, $ion-semantics-danger-1000);
+$ion-bg-danger-base-press-rgb: var(--token-bg-danger-base-press-rgb, 118, 21, 21);
+$ion-bg-danger-subtle-default: var(--token-bg-danger-subtle-default, $ion-semantics-danger-100);
+$ion-bg-danger-subtle-default-rgb: var(--token-bg-danger-subtle-default-rgb, 254, 237, 237);
+$ion-bg-danger-subtle-press: var(--token-bg-danger-subtle-press, $ion-semantics-danger-300);
+$ion-bg-danger-subtle-press-rgb: var(--token-bg-danger-subtle-press-rgb, 252, 193, 193);
+$ion-bg-success-base-default: var(--token-bg-success-base-default, $ion-semantics-success-900);
+$ion-bg-success-base-default-rgb: var(--token-bg-success-base-default-rgb, 18, 111, 35);
+$ion-bg-success-base-press: var(--token-bg-success-base-press, $ion-semantics-success-1100);
+$ion-bg-success-base-press-rgb: var(--token-bg-success-base-press-rgb, 9, 56, 17);
+$ion-bg-success-subtle-default: var(--token-bg-success-subtle-default, $ion-semantics-success-100);
+$ion-bg-success-subtle-default-rgb: var(--token-bg-success-subtle-default-rgb, 235, 249, 236);
+$ion-bg-success-subtle-press: var(--token-bg-success-subtle-press, $ion-semantics-success-300);
+$ion-bg-success-subtle-press-rgb: var(--token-bg-success-subtle-press-rgb, 179, 235, 183);
+$ion-bg-info-base-default: var(--token-bg-info-base-default, $ion-semantics-info-900);
+$ion-bg-info-base-default-rgb: var(--token-bg-info-base-default-rgb, 13, 75, 195);
+$ion-bg-info-base-press: var(--token-bg-info-base-press, $ion-semantics-info-1100);
+$ion-bg-info-base-press-rgb: var(--token-bg-info-base-press-rgb, 9, 53, 138);
+$ion-bg-info-subtle-default: var(--token-bg-info-subtle-default, $ion-semantics-info-100);
+$ion-bg-info-subtle-default-rgb: var(--token-bg-info-subtle-default-rgb, 242, 244, 253);
+$ion-bg-info-subtle-press: var(--token-bg-info-subtle-press, $ion-semantics-info-300);
+$ion-bg-info-subtle-press-rgb: var(--token-bg-info-subtle-press-rgb, 208, 215, 250);
+$ion-bg-warning-base-default: var(--token-bg-warning-base-default, $ion-semantics-warning-500);
+$ion-bg-warning-base-default-rgb: var(--token-bg-warning-base-default-rgb, 255, 214, 0);
+$ion-bg-warning-base-press: var(--token-bg-warning-base-press, $ion-semantics-warning-700);
+$ion-bg-warning-base-press-rgb: var(--token-bg-warning-base-press-rgb, 223, 156, 0);
+$ion-bg-warning-subtle-default: var(--token-bg-warning-subtle-default, $ion-semantics-warning-200);
+$ion-bg-warning-subtle-default-rgb: var(--token-bg-warning-subtle-default-rgb, 255, 245, 219);
+$ion-bg-warning-subtle-press: var(--token-bg-warning-subtle-press, $ion-semantics-warning-400);
+$ion-bg-warning-subtle-press-rgb: var(--token-bg-warning-subtle-press-rgb, 255, 224, 123);
+$ion-bg-body: var(--token-bg-body, $ion-primitives-base-white);
+$ion-bg-body-rgb: var(--token-bg-body-rgb, 255, 255, 255);
+$ion-bg-neutral-subtle-default: var(--token-bg-neutral-subtle-default, $ion-primitives-neutral-200);
+$ion-bg-neutral-subtle-default-rgb: var(--token-bg-neutral-subtle-default-rgb, 239, 239, 239);
+$ion-bg-neutral-subtle-press: var(--token-bg-neutral-subtle-press, $ion-primitives-neutral-400);
+$ion-bg-neutral-subtle-press-rgb: var(--token-bg-neutral-subtle-press-rgb, 213, 213, 213);
+$ion-bg-neutral-base-default: var(--token-bg-neutral-base-default, $ion-primitives-neutral-500);
+$ion-bg-neutral-base-default-rgb: var(--token-bg-neutral-base-default-rgb, 162, 162, 162);
+$ion-bg-neutral-base-press: var(--token-bg-neutral-base-press, $ion-primitives-neutral-700);
+$ion-bg-neutral-base-press-rgb: var(--token-bg-neutral-base-press-rgb, 119, 119, 119);
+$ion-bg-neutral-subtlest-default: var(--token-bg-neutral-subtlest-default, $ion-primitives-base-white);
+$ion-bg-neutral-subtlest-default-rgb: var(--token-bg-neutral-subtlest-default-rgb, 255, 255, 255);
+$ion-bg-neutral-subtlest-press: var(--token-bg-neutral-subtlest-press, $ion-primitives-neutral-200);
+$ion-bg-neutral-subtlest-press-rgb: var(--token-bg-neutral-subtlest-press-rgb, 239, 239, 239);
+$ion-bg-neutral-bold-default: var(--token-bg-neutral-bold-default, $ion-primitives-neutral-1000);
+$ion-bg-neutral-bold-default-rgb: var(--token-bg-neutral-bold-default-rgb, 59, 59, 59);
+$ion-bg-neutral-bold-press: var(--token-bg-neutral-bold-press, $ion-primitives-neutral-1200);
+$ion-bg-neutral-bold-press-rgb: var(--token-bg-neutral-bold-press-rgb, 36, 36, 36);
+$ion-bg-neutral-boldest-default: var(--token-bg-neutral-boldest-default, $ion-primitives-neutral-1200);
+$ion-bg-neutral-boldest-default-rgb: var(--token-bg-neutral-boldest-default-rgb, 36, 36, 36);
+$ion-bg-neutral-boldest-press: var(--token-bg-neutral-boldest-press, $ion-primitives-base-black);
+$ion-bg-neutral-boldest-press-rgb: var(--token-bg-neutral-boldest-press-rgb, 17, 17, 17);
+$ion-bg-surface-default: var(--token-bg-surface-default, $ion-primitives-base-white);
+$ion-bg-surface-default-rgb: var(--token-bg-surface-default-rgb, 255, 255, 255);
+$ion-bg-surface-inverse: var(--token-bg-surface-inverse, $ion-primitives-base-white);
+$ion-bg-surface-inverse-rgb: var(--token-bg-surface-inverse-rgb, 255, 255, 255);
+$ion-bg-input-default: var(--token-bg-input-default, $ion-primitives-base-white);
+$ion-bg-input-default-rgb: var(--token-bg-input-default-rgb, 255, 255, 255);
+$ion-bg-input-read-only: var(--token-bg-input-read-only, $ion-primitives-neutral-100);
+$ion-bg-input-read-only-rgb: var(--token-bg-input-read-only-rgb, 245, 245, 245);
+$ion-bg-input-press: var(--token-bg-input-press, $ion-primitives-neutral-200);
+$ion-bg-input-press-rgb: var(--token-bg-input-press-rgb, 239, 239, 239);
+$ion-bg-input-disabled: var(--token-bg-input-disabled, $ion-primitives-neutral-100);
+$ion-bg-input-disabled-rgb: var(--token-bg-input-disabled-rgb, 245, 245, 245);
+$ion-bg-input-bold-default: var(--token-bg-input-bold-default, $ion-primitives-neutral-200);
+$ion-bg-input-bold-default-rgb: var(--token-bg-input-bold-default-rgb, 239, 239, 239);
+$ion-bg-input-bold-press: var(--token-bg-input-bold-press, $ion-primitives-neutral-400);
+$ion-bg-input-bold-press-rgb: var(--token-bg-input-bold-press-rgb, 213, 213, 213);
+$ion-bg-input-bold-read-only: var(--token-bg-input-bold-read-only, $ion-primitives-neutral-300);
+$ion-bg-input-bold-read-only-rgb: var(--token-bg-input-bold-read-only-rgb, 224, 224, 224);
+$ion-bg-input-bold-disabled: var(--token-bg-input-bold-disabled, $ion-primitives-neutral-300);
+$ion-bg-input-bold-disabled-rgb: var(--token-bg-input-bold-disabled-rgb, 224, 224, 224);
+$ion-bg-select-default: var(--token-bg-select-default, $ion-semantics-primary-100);
+$ion-bg-select-default-rgb: var(--token-bg-select-default-rgb, 242, 244, 253);
+$ion-bg-select-press: var(--token-bg-select-press, $ion-semantics-primary-300);
+$ion-bg-select-press-rgb: var(--token-bg-select-press-rgb, 208, 215, 250);
+$ion-bg-extended-pumpkin-base-default: var(--token-bg-extended-pumpkin-base-default, $ion-primitives-pumpkin-700);
+$ion-bg-extended-pumpkin-base-default-rgb: var(--token-bg-extended-pumpkin-base-default-rgb, 189, 71, 5);
+$ion-bg-extended-pumpkin-base-press: var(--token-bg-extended-pumpkin-base-press, $ion-primitives-pumpkin-900);
+$ion-bg-extended-pumpkin-base-press-rgb: var(--token-bg-extended-pumpkin-base-press-rgb, 128, 48, 4);
+$ion-bg-extended-pumpkin-subtle-default: var(--token-bg-extended-pumpkin-subtle-default, $ion-primitives-pumpkin-100);
+$ion-bg-extended-pumpkin-subtle-default-rgb: var(--token-bg-extended-pumpkin-subtle-default-rgb, 254, 237, 234);
+$ion-bg-extended-pumpkin-subtle-press: var(--token-bg-extended-pumpkin-subtle-press, $ion-primitives-pumpkin-300);
+$ion-bg-extended-pumpkin-subtle-press-rgb: var(--token-bg-extended-pumpkin-subtle-press-rgb, 251, 189, 177);
+$ion-bg-extended-orange-base-default: var(--token-bg-extended-orange-base-default, $ion-primitives-orange-800);
+$ion-bg-extended-orange-base-default-rgb: var(--token-bg-extended-orange-base-default-rgb, 164, 95, 0);
+$ion-bg-extended-orange-base-press: var(--token-bg-extended-orange-base-press, $ion-primitives-orange-1000);
+$ion-bg-extended-orange-base-press-rgb: var(--token-bg-extended-orange-base-press-rgb, 99, 58, 0);
+$ion-bg-extended-orange-subtle-default: var(--token-bg-extended-orange-subtle-default, $ion-primitives-orange-100);
+$ion-bg-extended-orange-subtle-default-rgb: var(--token-bg-extended-orange-subtle-default-rgb, 255, 241, 234);
+$ion-bg-extended-orange-subtle-press: var(--token-bg-extended-orange-subtle-press, $ion-primitives-orange-300);
+$ion-bg-extended-orange-subtle-press-rgb: var(--token-bg-extended-orange-subtle-press-rgb, 255, 207, 177);
+$ion-bg-extended-lime-base-default: var(--token-bg-extended-lime-base-default, $ion-primitives-lime-900);
+$ion-bg-extended-lime-base-default-rgb: var(--token-bg-extended-lime-base-default-rgb, 83, 115, 12);
+$ion-bg-extended-lime-base-press: var(--token-bg-extended-lime-base-press, $ion-primitives-lime-1100);
+$ion-bg-extended-lime-base-press-rgb: var(--token-bg-extended-lime-base-press-rgb, 42, 58, 6);
+$ion-bg-extended-lime-subtle-default: var(--token-bg-extended-lime-subtle-default, $ion-primitives-lime-100);
+$ion-bg-extended-lime-subtle-default-rgb: var(--token-bg-extended-lime-subtle-default-rgb, 243, 250, 234);
+$ion-bg-extended-lime-subtle-press: var(--token-bg-extended-lime-subtle-press, $ion-primitives-lime-300);
+$ion-bg-extended-lime-subtle-press-rgb: var(--token-bg-extended-lime-subtle-press-rgb, 211, 239, 178);
+$ion-bg-extended-teal-base-default: var(--token-bg-extended-teal-base-default, $ion-primitives-teal-800);
+$ion-bg-extended-teal-base-default-rgb: var(--token-bg-extended-teal-base-default-rgb, 0, 133, 118);
+$ion-bg-extended-teal-base-press: var(--token-bg-extended-teal-base-press, $ion-primitives-teal-1000);
+$ion-bg-extended-teal-base-press-rgb: var(--token-bg-extended-teal-base-press-rgb, 0, 81, 71);
+$ion-bg-extended-teal-subtle-default: var(--token-bg-extended-teal-subtle-default, $ion-primitives-teal-100);
+$ion-bg-extended-teal-subtle-default-rgb: var(--token-bg-extended-teal-subtle-default-rgb, 234, 248, 245);
+$ion-bg-extended-teal-subtle-press: var(--token-bg-extended-teal-subtle-press, $ion-primitives-teal-300);
+$ion-bg-extended-teal-subtle-press-rgb: var(--token-bg-extended-teal-subtle-press-rgb, 177, 231, 221);
+$ion-bg-extended-aqua-base-default: var(--token-bg-extended-aqua-base-default, $ion-primitives-aqua-900);
+$ion-bg-extended-aqua-base-default-rgb: var(--token-bg-extended-aqua-base-default-rgb, 20, 109, 129);
+$ion-bg-extended-aqua-base-press: var(--token-bg-extended-aqua-base-press, $ion-primitives-aqua-1100);
+$ion-bg-extended-aqua-base-press-rgb: var(--token-bg-extended-aqua-base-press-rgb, 10, 55, 65);
+$ion-bg-extended-aqua-subtle-default: var(--token-bg-extended-aqua-subtle-default, $ion-primitives-aqua-100);
+$ion-bg-extended-aqua-subtle-default-rgb: var(--token-bg-extended-aqua-subtle-default-rgb, 235, 249, 254);
+$ion-bg-extended-aqua-subtle-press: var(--token-bg-extended-aqua-subtle-press, $ion-primitives-aqua-300);
+$ion-bg-extended-aqua-subtle-press-rgb: var(--token-bg-extended-aqua-subtle-press-rgb, 179, 233, 252);
+$ion-bg-extended-indigo-base-default: var(--token-bg-extended-indigo-base-default, $ion-primitives-indigo-700);
+$ion-bg-extended-indigo-base-default-rgb: var(--token-bg-extended-indigo-base-default-rgb, 65, 27, 213);
+$ion-bg-extended-indigo-base-press: var(--token-bg-extended-indigo-base-press, $ion-primitives-indigo-900);
+$ion-bg-extended-indigo-base-press-rgb: var(--token-bg-extended-indigo-base-press-rgb, 53, 22, 174);
+$ion-bg-extended-indigo-subtle-default: var(--token-bg-extended-indigo-subtle-default, $ion-primitives-indigo-100);
+$ion-bg-extended-indigo-subtle-default-rgb: var(--token-bg-extended-indigo-subtle-default-rgb, 243, 242, 251);
+$ion-bg-extended-indigo-subtle-press: var(--token-bg-extended-indigo-subtle-press, $ion-primitives-indigo-300);
+$ion-bg-extended-indigo-subtle-press-rgb: var(--token-bg-extended-indigo-subtle-press-rgb, 211, 209, 242);
+$ion-bg-extended-violet-base-default: var(--token-bg-extended-violet-base-default, $ion-primitives-violet-700);
+$ion-bg-extended-violet-base-default-rgb: var(--token-bg-extended-violet-base-default-rgb, 124, 32, 242);
+$ion-bg-extended-violet-base-press: var(--token-bg-extended-violet-base-press, $ion-primitives-violet-900);
+$ion-bg-extended-violet-base-press-rgb: var(--token-bg-extended-violet-base-press-rgb, 101, 26, 197);
+$ion-bg-extended-violet-subtle-default: var(--token-bg-extended-violet-subtle-default, $ion-primitives-violet-100);
+$ion-bg-extended-violet-subtle-default-rgb: var(--token-bg-extended-violet-subtle-default-rgb, 245, 242, 254);
+$ion-bg-extended-violet-subtle-press: var(--token-bg-extended-violet-subtle-press, $ion-primitives-violet-300);
+$ion-bg-extended-violet-subtle-press-rgb: var(--token-bg-extended-violet-subtle-press-rgb, 220, 209, 251);
+$ion-bg-extended-purple-base-default: var(--token-bg-extended-purple-base-default, $ion-primitives-purple-800);
+$ion-bg-extended-purple-base-default-rgb: var(--token-bg-extended-purple-base-default-rgb, 167, 55, 220);
+$ion-bg-extended-purple-base-press: var(--token-bg-extended-purple-base-press, $ion-primitives-purple-1000);
+$ion-bg-extended-purple-base-press-rgb: var(--token-bg-extended-purple-base-press-rgb, 129, 42, 170);
+$ion-bg-extended-purple-subtle-default: var(--token-bg-extended-purple-subtle-default, $ion-primitives-purple-100);
+$ion-bg-extended-purple-subtle-default-rgb: var(--token-bg-extended-purple-subtle-default-rgb, 249, 243, 254);
+$ion-bg-extended-purple-subtle-press: var(--token-bg-extended-purple-subtle-press, $ion-primitives-purple-300);
+$ion-bg-extended-purple-subtle-press-rgb: var(--token-bg-extended-purple-subtle-press-rgb, 233, 211, 250);
+$ion-bg-extended-magenta-base-default: var(--token-bg-extended-magenta-base-default, $ion-primitives-magenta-900);
+$ion-bg-extended-magenta-base-default-rgb: var(--token-bg-extended-magenta-base-default-rgb, 193, 60, 172);
+$ion-bg-extended-magenta-base-press: var(--token-bg-extended-magenta-base-press, $ion-primitives-magenta-1100);
+$ion-bg-extended-magenta-base-press-rgb: var(--token-bg-extended-magenta-base-press-rgb, 137, 43, 122);
+$ion-bg-extended-magenta-subtle-default: var(--token-bg-extended-magenta-subtle-default, $ion-primitives-magenta-100);
+$ion-bg-extended-magenta-subtle-default-rgb: var(--token-bg-extended-magenta-subtle-default-rgb, 253, 243, 251);
+$ion-bg-extended-magenta-subtle-press: var(--token-bg-extended-magenta-subtle-press, $ion-primitives-magenta-300);
+$ion-bg-extended-magenta-subtle-press-rgb: var(--token-bg-extended-magenta-subtle-press-rgb, 249, 212, 241);
+$ion-bg-extended-pink-base-default: var(--token-bg-extended-pink-base-default, $ion-primitives-pink-900);
+$ion-bg-extended-pink-base-default-rgb: var(--token-bg-extended-pink-base-default-rgb, 197, 48, 102);
+$ion-bg-extended-pink-base-press: var(--token-bg-extended-pink-base-press, $ion-primitives-pink-1100);
+$ion-bg-extended-pink-base-press-rgb: var(--token-bg-extended-pink-base-press-rgb, 139, 34, 72);
+$ion-bg-extended-pink-subtle-default: var(--token-bg-extended-pink-subtle-default, $ion-primitives-pink-100);
+$ion-bg-extended-pink-subtle-default-rgb: var(--token-bg-extended-pink-subtle-default-rgb, 254, 243, 245);
+$ion-bg-extended-pink-subtle-press: var(--token-bg-extended-pink-subtle-press, $ion-primitives-pink-300);
+$ion-bg-extended-pink-subtle-press-rgb: var(--token-bg-extended-pink-subtle-press-rgb, 250, 211, 220);
+$ion-text-default: var(--token-text-default, $ion-primitives-neutral-1200);
+$ion-text-default-rgb: var(--token-text-default-rgb, 36, 36, 36);
+$ion-text-subtle: var(--token-text-subtle, $ion-primitives-neutral-1000);
+$ion-text-subtle-rgb: var(--token-text-subtle-rgb, 59, 59, 59);
+$ion-text-subtlest: var(--token-text-subtlest, $ion-primitives-neutral-800);
+$ion-text-subtlest-rgb: var(--token-text-subtlest-rgb, 98, 98, 98);
+$ion-text-primary: var(--token-text-primary, $ion-semantics-primary-900);
+$ion-text-primary-rgb: var(--token-text-primary-rgb, 13, 75, 195);
+$ion-text-disabled: var(--token-text-disabled, $ion-primitives-neutral-500);
+$ion-text-disabled-rgb: var(--token-text-disabled-rgb, 162, 162, 162);
+$ion-text-danger: var(--token-text-danger, $ion-semantics-danger-900);
+$ion-text-danger-rgb: var(--token-text-danger-rgb, 153, 27, 27);
+$ion-text-info: var(--token-text-info, $ion-semantics-info-900);
+$ion-text-info-rgb: var(--token-text-info-rgb, 13, 75, 195);
+$ion-text-warning: var(--token-text-warning, $ion-semantics-warning-1000);
+$ion-text-warning-rgb: var(--token-text-warning-rgb, 112, 75, 2);
+$ion-text-success: var(--token-text-success, $ion-semantics-success-900);
+$ion-text-success-rgb: var(--token-text-success-rgb, 18, 111, 35);
+$ion-text-link-default: var(--token-text-link-default, $ion-semantics-primary-base);
+$ion-text-link-default-rgb: var(--token-text-link-default-rgb, 16, 92, 239);
+$ion-text-link-press: var(--token-text-link-press, $ion-semantics-primary-800);
+$ion-text-link-press-rgb: var(--token-text-link-press-rgb, 15, 84, 218);
+$ion-text-link-visited: var(--token-text-link-visited, $ion-semantics-primary-900);
+$ion-text-link-visited-rgb: var(--token-text-link-visited-rgb, 13, 75, 195);
+$ion-text-inverse: var(--token-text-inverse, $ion-primitives-base-white);
+$ion-text-inverse-rgb: var(--token-text-inverse-rgb, 255, 255, 255);
+$ion-text-select: var(--token-text-select, $ion-semantics-primary-800);
+$ion-text-select-rgb: var(--token-text-select-rgb, 15, 84, 218);
+$ion-text-extended-pumpkin: var(--token-text-extended-pumpkin, $ion-primitives-pumpkin-900);
+$ion-text-extended-pumpkin-rgb: var(--token-text-extended-pumpkin-rgb, 128, 48, 4);
+$ion-text-extended-orange: var(--token-text-extended-orange, $ion-primitives-orange-900);
+$ion-text-extended-orange-rgb: var(--token-text-extended-orange-rgb, 132, 77, 0);
+$ion-text-extended-lime: var(--token-text-extended-lime, $ion-primitives-lime-1000);
+$ion-text-extended-lime-rgb: var(--token-text-extended-lime-rgb, 62, 87, 9);
+$ion-text-extended-teal: var(--token-text-extended-teal, $ion-primitives-teal-900);
+$ion-text-extended-teal-rgb: var(--token-text-extended-teal-rgb, 0, 107, 95);
+$ion-text-extended-aqua: var(--token-text-extended-aqua, $ion-primitives-aqua-900);
+$ion-text-extended-aqua-rgb: var(--token-text-extended-aqua-rgb, 20, 109, 129);
+$ion-text-extended-indigo: var(--token-text-extended-indigo, $ion-primitives-indigo-900);
+$ion-text-extended-indigo-rgb: var(--token-text-extended-indigo-rgb, 53, 22, 174);
+$ion-text-extended-violet: var(--token-text-extended-violet, $ion-primitives-violet-900);
+$ion-text-extended-violet-rgb: var(--token-text-extended-violet-rgb, 101, 26, 197);
+$ion-text-extended-purple: var(--token-text-extended-purple, $ion-primitives-purple-1000);
+$ion-text-extended-purple-rgb: var(--token-text-extended-purple-rgb, 129, 42, 170);
+$ion-text-extended-magenta: var(--token-text-extended-magenta, $ion-primitives-magenta-1100);
+$ion-text-extended-magenta-rgb: var(--token-text-extended-magenta-rgb, 137, 43, 122);
+$ion-text-extended-pink: var(--token-text-extended-pink, $ion-primitives-pink-1000);
+$ion-text-extended-pink-rgb: var(--token-text-extended-pink-rgb, 170, 42, 88);
+$ion-icon-default: var(--token-icon-default, $ion-primitives-neutral-1200);
+$ion-icon-default-rgb: var(--token-icon-default-rgb, 36, 36, 36);
+$ion-icon-subtle: var(--token-icon-subtle, $ion-primitives-neutral-1000);
+$ion-icon-subtle-rgb: var(--token-icon-subtle-rgb, 59, 59, 59);
+$ion-icon-subtlest: var(--token-icon-subtlest, $ion-primitives-neutral-800);
+$ion-icon-subtlest-rgb: var(--token-icon-subtlest-rgb, 98, 98, 98);
+$ion-icon-disabled: var(--token-icon-disabled, $ion-primitives-neutral-500);
+$ion-icon-disabled-rgb: var(--token-icon-disabled-rgb, 162, 162, 162);
+$ion-icon-primary: var(--token-icon-primary, $ion-semantics-primary-900);
+$ion-icon-primary-rgb: var(--token-icon-primary-rgb, 13, 75, 195);
+$ion-icon-select: var(--token-icon-select, $ion-semantics-primary-800);
+$ion-icon-select-rgb: var(--token-icon-select-rgb, 15, 84, 218);
+$ion-icon-info: var(--token-icon-info, $ion-semantics-info-900);
+$ion-icon-info-rgb: var(--token-icon-info-rgb, 13, 75, 195);
+$ion-icon-success: var(--token-icon-success, $ion-semantics-success-900);
+$ion-icon-success-rgb: var(--token-icon-success-rgb, 18, 111, 35);
+$ion-icon-danger: var(--token-icon-danger, $ion-semantics-danger-900);
+$ion-icon-danger-rgb: var(--token-icon-danger-rgb, 153, 27, 27);
+$ion-icon-warning: var(--token-icon-warning, $ion-semantics-warning-1000);
+$ion-icon-warning-rgb: var(--token-icon-warning-rgb, 112, 75, 2);
+$ion-icon-inverse: var(--token-icon-inverse, $ion-primitives-base-white);
+$ion-icon-inverse-rgb: var(--token-icon-inverse-rgb, 255, 255, 255);
+$ion-icon-link-default: var(--token-icon-link-default, $ion-text-link-default);
+$ion-icon-link-default-rgb: var(--token-icon-link-default-rgb, 16, 92, 239);
+$ion-icon-link-press: var(--token-icon-link-press, $ion-text-link-press);
+$ion-icon-link-press-rgb: var(--token-icon-link-press-rgb, 15, 84, 218);
+$ion-icon-link-visited: var(--token-icon-link-visited, $ion-text-link-visited);
+$ion-icon-link-visited-rgb: var(--token-icon-link-visited-rgb, 13, 75, 195);
+$ion-icon-extended-pumpkin: var(--token-icon-extended-pumpkin, $ion-primitives-pumpkin-900);
+$ion-icon-extended-pumpkin-rgb: var(--token-icon-extended-pumpkin-rgb, 128, 48, 4);
+$ion-icon-extended-orange: var(--token-icon-extended-orange, $ion-primitives-orange-900);
+$ion-icon-extended-orange-rgb: var(--token-icon-extended-orange-rgb, 132, 77, 0);
+$ion-icon-extended-lime: var(--token-icon-extended-lime, $ion-primitives-lime-1000);
+$ion-icon-extended-lime-rgb: var(--token-icon-extended-lime-rgb, 62, 87, 9);
+$ion-icon-extended-teal: var(--token-icon-extended-teal, $ion-primitives-teal-900);
+$ion-icon-extended-teal-rgb: var(--token-icon-extended-teal-rgb, 0, 107, 95);
+$ion-icon-extended-aqua: var(--token-icon-extended-aqua, $ion-primitives-aqua-900);
+$ion-icon-extended-aqua-rgb: var(--token-icon-extended-aqua-rgb, 20, 109, 129);
+$ion-icon-extended-indigo: var(--token-icon-extended-indigo, $ion-primitives-indigo-900);
+$ion-icon-extended-indigo-rgb: var(--token-icon-extended-indigo-rgb, 53, 22, 174);
+$ion-icon-extended-violet: var(--token-icon-extended-violet, $ion-primitives-violet-900);
+$ion-icon-extended-violet-rgb: var(--token-icon-extended-violet-rgb, 101, 26, 197);
+$ion-icon-extended-purple: var(--token-icon-extended-purple, $ion-primitives-purple-1000);
+$ion-icon-extended-purple-rgb: var(--token-icon-extended-purple-rgb, 129, 42, 170);
+$ion-icon-extended-magenta: var(--token-icon-extended-magenta, $ion-primitives-magenta-1100);
+$ion-icon-extended-magenta-rgb: var(--token-icon-extended-magenta-rgb, 137, 43, 122);
+$ion-icon-extended-pink: var(--token-icon-extended-pink, $ion-primitives-pink-1000);
+$ion-icon-extended-pink-rgb: var(--token-icon-extended-pink-rgb, 170, 42, 88);
+$ion-state-disabled: var(--token-state-disabled, rgba(255, 255, 255, 0.6));
+$ion-state-press: var(--token-state-press, rgba(36, 36, 36, 0.08));
+$ion-elevation-1: var(--token-elevation-1, 0px 0px 4px 0px rgba(0, 0, 0, 0.04), 0px 3px 9px 0px rgba(0, 0, 0, 0.07));
+$ion-elevation-2: var(--token-elevation-2, 0px 1px 5px 0px rgba(0, 0, 0, 0.05), 0px 8px 25px 0px rgba(0, 0, 0, 0.08));
+$ion-elevation-3: var(--token-elevation-3, 0px 2px 7px 0px rgba(0, 0, 0, 0.05), 0px 6px 32px 0px rgba(0, 0, 0, 0.16));
+$ion-elevation-4: var(--token-elevation-4, 0px 3px 12px 0px rgba(0, 0, 0, 0.12), 0px 15px 48px 0px rgba(0, 0, 0, 0.18));
+$ion-backdrop: var(--token-backdrop, [object Object]);
+$ion-space-0: var(--token-space-0, $ion-scale-0);
+$ion-space-100: var(--token-space-100, $ion-scale-100);
+$ion-space-150: var(--token-space-150, $ion-scale-150);
+$ion-space-200: var(--token-space-200, $ion-scale-200);
+$ion-space-250: var(--token-space-250, $ion-scale-250);
+$ion-space-300: var(--token-space-300, $ion-scale-300);
+$ion-space-400: var(--token-space-400, $ion-scale-400);
+$ion-space-500: var(--token-space-500, $ion-scale-500);
+$ion-space-600: var(--token-space-600, $ion-scale-600);
+$ion-space-700: var(--token-space-700, $ion-scale-700);
+$ion-space-800: var(--token-space-800, $ion-scale-800);
+$ion-space-900: var(--token-space-900, $ion-scale-900);
+$ion-space-1000: var(--token-space-1000, $ion-scale-1000);
+$ion-space-1200: var(--token-space-1200, $ion-scale-1200);
+$ion-space-050: var(--token-space-050, $ion-scale-050);
+$ion-transition-curve-linear: var(--token-transition-curve-linear, linear);
+$ion-transition-curve-quick: var(--token-transition-curve-quick, cubic-bezier(0, 0, 0.2, 1));
+$ion-transition-curve-base: var(--token-transition-curve-base, cubic-bezier(0.4, 0, 1, 1));
+$ion-transition-curve-expressive: var(--token-transition-curve-expressive, cubic-bezier(0.4, 0, 0.2, 1));
+$ion-transition-curve-bounce: var(--token-transition-curve-bounce, cubic-bezier(0.47, 0, 0.23, 1.38));
+$ion-transition-time-0: var(--token-transition-time-0, 0ms);
+$ion-transition-time-100: var(--token-transition-time-100, 100ms);
+$ion-transition-time-150: var(--token-transition-time-150, 150ms);
+$ion-transition-time-200: var(--token-transition-time-200, 200ms);
+$ion-transition-time-300: var(--token-transition-time-300, 300ms);
+$ion-transition-time-500: var(--token-transition-time-500, 500ms);
+$ion-transition-time-1000: var(--token-transition-time-1000, 1000ms);
+$ion-transition-time-1500: var(--token-transition-time-1500, 1500ms);
+$ion-font-family: var(
+ --token-font-family,
+ "-apple-system, system-ui, " Segoe UI ", Roboto, Helvetica, Arial, sans-serif, " Apple Color Emoji ", " Segoe UI Emoji
+ ", " Segoe UI Symbol "",
+ sans-serif
+);
+$ion-font-weight-thin: var(--token-font-weight-thin, 100);
+$ion-font-weight-extra-light: var(--token-font-weight-extra-light, 200);
+$ion-font-weight-light: var(--token-font-weight-light, 300);
+$ion-font-weight-regular: var(--token-font-weight-regular, 400);
+$ion-font-weight-medium: var(--token-font-weight-medium, 500);
+$ion-font-weight-semi-bold: var(--token-font-weight-semi-bold, 600);
+$ion-font-weight-bold: var(--token-font-weight-bold, 700);
+$ion-font-weight-extra-bold: var(--token-font-weight-extra-bold, 800);
+$ion-font-weight-black: var(--token-font-weight-black, 900);
+$ion-font-size-275: var(--token-font-size-275, font.px-to-rem(11));
+$ion-font-size-300: var(--token-font-size-300, font.px-to-rem(12));
+$ion-font-size-350: var(--token-font-size-350, font.px-to-rem(14));
+$ion-font-size-400: var(--token-font-size-400, font.px-to-rem(16));
+$ion-font-size-450: var(--token-font-size-450, font.px-to-rem(18));
+$ion-font-size-500: var(--token-font-size-500, font.px-to-rem(20));
+$ion-font-size-550: var(--token-font-size-550, font.px-to-rem(22));
+$ion-font-size-600: var(--token-font-size-600, font.px-to-rem(24));
+$ion-font-size-650: var(--token-font-size-650, font.px-to-rem(26));
+$ion-font-size-700: var(--token-font-size-700, font.px-to-rem(28));
+$ion-font-size-800: var(--token-font-size-800, font.px-to-rem(32));
+$ion-font-size-900: var(--token-font-size-900, font.px-to-rem(36));
+$ion-font-letter-spacing-0: var(--token-font-letter-spacing-0, 0%);
+$ion-font-letter-spacing-1: var(--token-font-letter-spacing-1, 1%);
+$ion-font-letter-spacing-2: var(--token-font-letter-spacing-2, 1.5%);
+$ion-font-line-height-300: var(--token-font-line-height-300, $ion-scale-300);
+$ion-font-line-height-400: var(--token-font-line-height-400, $ion-scale-400);
+$ion-font-line-height-500: var(--token-font-line-height-500, $ion-scale-500);
+$ion-font-line-height-600: var(--token-font-line-height-600, $ion-scale-600);
+$ion-font-line-height-700: var(--token-font-line-height-700, $ion-scale-700);
+$ion-font-line-height-800: var(--token-font-line-height-800, $ion-scale-800);
+$ion-font-line-height-900: var(--token-font-line-height-900, $ion-scale-900);
+$ion-font-line-height-1100: var(--token-font-line-height-1100, $ion-scale-1100);
+$ion-font-line-height-1200: var(--token-font-line-height-1200, $ion-scale-1200);
+$ion-font-line-height-full: var(--token-font-line-height-full, 100%);
+$ion-z-index-0: var(--token-z-index-0, 0);
+$ion-z-index-100: var(--token-z-index-100, 100);
+$ion-z-index-200: var(--token-z-index-200, 200);
+$ion-z-index-300: var(--token-z-index-300, 300);
+$ion-z-index-400: var(--token-z-index-400, 400);
+$ion-z-index-500: var(--token-z-index-500, 500);
+$ion-z-index-bottom: var(--token-z-index-bottom, -99999);
+$ion-z-index-top: var(--token-z-index-top, 99999);
+$ion-rectangular-2xs: var(--token-rectangular-2xs, $ion-border-radius-0);
+$ion-rectangular-xs: var(--token-rectangular-xs, $ion-border-radius-0);
+$ion-rectangular-sm: var(--token-rectangular-sm, $ion-border-radius-0);
+$ion-rectangular-md: var(--token-rectangular-md, $ion-border-radius-0);
+$ion-rectangular-lg: var(--token-rectangular-lg, $ion-border-radius-0);
+$ion-rectangular-xl: var(--token-rectangular-xl, $ion-border-radius-0);
+$ion-rectangular-2xl: var(--token-rectangular-2xl, $ion-border-radius-0);
+$ion-round-2xs: var(--token-round-2xs, $ion-border-radius-full);
+$ion-round-xs: var(--token-round-xs, $ion-border-radius-full);
+$ion-round-sm: var(--token-round-sm, $ion-border-radius-full);
+$ion-round-md: var(--token-round-md, $ion-border-radius-full);
+$ion-round-lg: var(--token-round-lg, $ion-border-radius-300);
+$ion-round-xl: var(--token-round-xl, $ion-border-radius-400);
+$ion-round-2xl: var(--token-round-2xl, $ion-border-radius-1000);
+$ion-soft-2xs: var(--token-soft-2xs, $ion-border-radius-100);
+$ion-soft-xs: var(--token-soft-xs, $ion-border-radius-200);
+$ion-soft-sm: var(--token-soft-sm, $ion-border-radius-300);
+$ion-soft-md: var(--token-soft-md, $ion-border-radius-400);
+$ion-soft-lg: var(--token-soft-lg, $ion-border-radius-200);
+$ion-soft-xl: var(--token-soft-xl, $ion-border-radius-200);
+$ion-soft-2xl: var(--token-soft-2xl, $ion-border-radius-400);
+$ion-shadow-1: var(--token-shadow-1, rgba(0, 0, 0, 0.04));
+$ion-shadow-2: var(--token-shadow-2, rgba(0, 0, 0, 0.05));
+$ion-shadow-3: var(--token-shadow-3, rgba(0, 0, 0, 0.07));
+$ion-shadow-4: var(--token-shadow-4, rgba(0, 0, 0, 0.08));
+$ion-shadow-5: var(--token-shadow-5, rgba(0, 0, 0, 0.12));
+$ion-shadow-6: var(--token-shadow-6, rgba(0, 0, 0, 0.16));
+$ion-shadow-7: var(--token-shadow-7, rgba(0, 0, 0, 0.18));
$ion-display-sm-regular: (
font-size: $ion-font-size-800,