feat(chip): add recipe and variables (#30873)

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Shane <shane@shanessite.net>

.github/workflows/actions/build-core-stencil-prerelease/action.yml

@@ -29,4 +29,4 @@ runs:
       with:
         name: ionic-core
         output: core/CoreBuild.zip
-        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts
+        paths: core/dist core/components core/src/foundations core/css core/themes core/hydrate core/loader core/src/components.d.ts

.github/workflows/actions/build-core/action.yml

@@ -33,4 +33,4 @@ runs:
         output: core/CoreBuild.zip
         # Include generated proxy files from Stencil output targets so
         # framework builds can detect when they need to be updated
-        paths: core/dist core/components core/src/foundations core/css core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/directives/proxies.ts packages/angular/src/directives/proxies-list.ts packages/angular/standalone/src/directives/proxies.ts packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts
+        paths: core/dist core/components core/src/foundations core/css core/themes core/hydrate core/loader core/src/components.d.ts core/api.txt packages/angular/src/directives/proxies.ts packages/angular/src/directives/proxies-list.ts packages/angular/standalone/src/directives/proxies.ts packages/vue/src/proxies.ts packages/react/src/components/proxies.ts packages/react/src/components/inner-proxies.ts packages/react/src/components/routing-proxies.ts

.gitignore

@@ -23,6 +23,7 @@ temp/
 core/theme-builder/
 core/test-components/
 core/css/
+core/themes/
 $RECYCLE.BIN/
 
 .DS_Store

core/api.txt

@@ -596,23 +596,17 @@ ion-checkbox,part,supporting-text
 ion-chip,shadow
 ion-chip,prop,color,"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined,undefined,false,true
 ion-chip,prop,disabled,boolean,false,false,false
-ion-chip,prop,hue,"bold" | "subtle" | undefined,'subtle',false,false
+ion-chip,prop,fill,"outline" | "solid" | undefined,undefined,false,false
+ion-chip,prop,hue,"bold" | "subtle" | undefined,undefined,false,false
 ion-chip,prop,mode,"ios" | "md",undefined,false,false
 ion-chip,prop,outline,boolean,false,false,false
 ion-chip,prop,shape,"rectangular" | "round" | "soft" | undefined,undefined,false,false
 ion-chip,prop,size,"large" | "small" | undefined,undefined,false,false
-ion-chip,prop,theme,"ios" | "md" | "ionic",undefined,false,false
-ion-chip,css-prop,--background,ionic
-ion-chip,css-prop,--background,ios
-ion-chip,css-prop,--background,md
-ion-chip,css-prop,--border-radius,ionic
-ion-chip,css-prop,--border-radius,ios
-ion-chip,css-prop,--border-radius,md
-ion-chip,css-prop,--color,ionic
-ion-chip,css-prop,--color,ios
-ion-chip,css-prop,--color,md
-ion-chip,css-prop,--focus-ring-color,ionic
-ion-chip,css-prop,--focus-ring-width,ionic
+ion-chip,css-prop,--border-radius
+ion-chip,css-prop,--color
+ion-chip,css-prop,--focus-ring-color
+ion-chip,css-prop,--focus-ring-style
+ion-chip,css-prop,--focus-ring-width
 
 ion-col,shadow
 ion-col,prop,mode,"ios" | "md",undefined,false,false

core/package-lock.json

@@ -37,6 +37,7 @@
         "chalk": "^5.3.0",
         "clean-css-cli": "^5.6.1",
         "domino": "^2.1.6",
+        "esbuild": "^0.27.0",
         "eslint": "^7.32.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-custom-rules": "file:custom-rules",
@@ -772,6 +773,448 @@
         "sisteransi": "^1.0.5"
       }
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.0.tgz",
+      "integrity": "sha512-KuZrd2hRjz01y5JK9mEBSD3Vj3mbCvemhT466rSuJYeE/hjuBrHfjjcjMdTm/sz7au+++sdbJZJmuBwQLuw68A==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.27.0.tgz",
+      "integrity": "sha512-j67aezrPNYWJEOHUNLPj9maeJte7uSMM6gMoxfPC9hOg8N02JuQi/T7ewumf4tNvJadFkvLZMlAq73b9uwdMyQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-arm64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.27.0.tgz",
+      "integrity": "sha512-CC3vt4+1xZrs97/PKDkl0yN7w8edvU2vZvAFGD16n9F0Cvniy5qvzRXjfO1l94efczkkQE6g1x0i73Qf5uthOQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/android-x64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.27.0.tgz",
+      "integrity": "sha512-wurMkF1nmQajBO1+0CJmcN17U4BP6GqNSROP8t0X/Jiw2ltYGLHpEksp9MpoBqkrFR3kv2/te6Sha26k3+yZ9Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-arm64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.27.0.tgz",
+      "integrity": "sha512-uJOQKYCcHhg07DL7i8MzjvS2LaP7W7Pn/7uA0B5S1EnqAirJtbyw4yC5jQ5qcFjHK9l6o/MX9QisBg12kNkdHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/darwin-x64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.27.0.tgz",
+      "integrity": "sha512-8mG6arH3yB/4ZXiEnXof5MK72dE6zM9cDvUcPtxhUZsDjESl9JipZYW60C3JGreKCEP+p8P/72r69m4AZGJd5g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.27.0.tgz",
+      "integrity": "sha512-9FHtyO988CwNMMOE3YIeci+UV+x5Zy8fI2qHNpsEtSF83YPBmE8UWmfYAQg6Ux7Gsmd4FejZqnEUZCMGaNQHQw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/freebsd-x64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.27.0.tgz",
+      "integrity": "sha512-zCMeMXI4HS/tXvJz8vWGexpZj2YVtRAihHLk1imZj4efx1BQzN76YFeKqlDr3bUWI26wHwLWPd3rwh6pe4EV7g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.27.0.tgz",
+      "integrity": "sha512-t76XLQDpxgmq2cNXKTVEB7O7YMb42atj2Re2Haf45HkaUpjM2J0UuJZDuaGbPbamzZ7bawyGFUkodL+zcE+jvQ==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-arm64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.27.0.tgz",
+      "integrity": "sha512-AS18v0V+vZiLJyi/4LphvBE+OIX682Pu7ZYNsdUHyUKSoRwdnOsMf6FDekwoAFKej14WAkOef3zAORJgAtXnlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ia32": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.27.0.tgz",
+      "integrity": "sha512-Mz1jxqm/kfgKkc/KLHC5qIujMvnnarD9ra1cEcrs7qshTUSksPihGrWHVG5+osAIQ68577Zpww7SGapmzSt4Nw==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-loong64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.27.0.tgz",
+      "integrity": "sha512-QbEREjdJeIreIAbdG2hLU1yXm1uu+LTdzoq1KCo4G4pFOLlvIspBm36QrQOar9LFduavoWX2msNFAAAY9j4BDg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-mips64el": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.27.0.tgz",
+      "integrity": "sha512-sJz3zRNe4tO2wxvDpH/HYJilb6+2YJxo/ZNbVdtFiKDufzWq4JmKAiHy9iGoLjAV7r/W32VgaHGkk35cUXlNOg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-ppc64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.27.0.tgz",
+      "integrity": "sha512-z9N10FBD0DCS2dmSABDBb5TLAyF1/ydVb+N4pi88T45efQ/w4ohr/F/QYCkxDPnkhkp6AIpIcQKQ8F0ANoA2JA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-riscv64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.27.0.tgz",
+      "integrity": "sha512-pQdyAIZ0BWIC5GyvVFn5awDiO14TkT/19FTmFcPdDec94KJ1uZcmFs21Fo8auMXzD4Tt+diXu1LW1gHus9fhFQ==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-s390x": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.27.0.tgz",
+      "integrity": "sha512-hPlRWR4eIDDEci953RI1BLZitgi5uqcsjKMxwYfmi4LcwyWo2IcRP+lThVnKjNtk90pLS8nKdroXYOqW+QQH+w==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/linux-x64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.27.0.tgz",
+      "integrity": "sha512-1hBWx4OUJE2cab++aVZ7pObD6s+DK4mPGpemtnAORBvb5l/g5xFGk0vc0PjSkrDs0XaXj9yyob3d14XqvnQ4gw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-arm64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.27.0.tgz",
+      "integrity": "sha512-6m0sfQfxfQfy1qRuecMkJlf1cIzTOgyaeXaiVaaki8/v+WB+U4hc6ik15ZW6TAllRlg/WuQXxWj1jx6C+dfy3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/netbsd-x64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.27.0.tgz",
+      "integrity": "sha512-xbbOdfn06FtcJ9d0ShxxvSn2iUsGd/lgPIO2V3VZIPDbEaIj1/3nBBe1AwuEZKXVXkMmpr6LUAgMkLD/4D2PPA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-arm64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.27.0.tgz",
+      "integrity": "sha512-fWgqR8uNbCQ/GGv0yhzttj6sU/9Z5/Sv/VGU3F5OuXK6J6SlriONKrQ7tNlwBrJZXRYk5jUhuWvF7GYzGguBZQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openbsd-x64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.27.0.tgz",
+      "integrity": "sha512-aCwlRdSNMNxkGGqQajMUza6uXzR/U0dIl1QmLjPtRbLOx3Gy3otfFu/VjATy4yQzo9yFDGTxYDo1FfAD9oRD2A==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/openharmony-arm64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.27.0.tgz",
+      "integrity": "sha512-nyvsBccxNAsNYz2jVFYwEGuRRomqZ149A39SHWk4hV0jWxKM0hjBPm3AmdxcbHiFLbBSwG6SbpIcUbXjgyECfA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openharmony"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/sunos-x64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.27.0.tgz",
+      "integrity": "sha512-Q1KY1iJafM+UX6CFEL+F4HRTgygmEW568YMqDA5UV97AuZSm21b7SXIrRJDwXWPzr8MGr75fUZPV67FdtMHlHA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-arm64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.27.0.tgz",
+      "integrity": "sha512-W1eyGNi6d+8kOmZIwi/EDjrL9nxQIQ0MiGqe/AWc6+IaHloxHSGoeRgDRKHFISThLmsewZ5nHFvGFWdBYlgKPg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-ia32": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.27.0.tgz",
+      "integrity": "sha512-30z1aKL9h22kQhilnYkORFYt+3wp7yZsHWus+wSKAJR8JtdfI76LJ4SBdMsCopTR3z/ORqVu5L1vtnHZWVj4cQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@esbuild/win32-x64": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.27.0.tgz",
+      "integrity": "sha512-aIitBcjQeyOhMTImhLZmtxfdOcuNRpwlPNmlFKPcHQYPhEssw75Cl1TSXJXpMkzaua9FUetx/4OQKq7eJul5Cg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "dev": true,
@@ -4602,6 +5045,48 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/esbuild": {
+      "version": "0.27.0",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.0.tgz",
+      "integrity": "sha512-jd0f4NHbD6cALCyGElNpGAOtWxSq46l9X/sWB0Nzd5er4Kz2YTm+Vl0qKFT9KUJvD8+fiO8AvoHhFvEatfVixA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.27.0",
+        "@esbuild/android-arm": "0.27.0",
+        "@esbuild/android-arm64": "0.27.0",
+        "@esbuild/android-x64": "0.27.0",
+        "@esbuild/darwin-arm64": "0.27.0",
+        "@esbuild/darwin-x64": "0.27.0",
+        "@esbuild/freebsd-arm64": "0.27.0",
+        "@esbuild/freebsd-x64": "0.27.0",
+        "@esbuild/linux-arm": "0.27.0",
+        "@esbuild/linux-arm64": "0.27.0",
+        "@esbuild/linux-ia32": "0.27.0",
+        "@esbuild/linux-loong64": "0.27.0",
+        "@esbuild/linux-mips64el": "0.27.0",
+        "@esbuild/linux-ppc64": "0.27.0",
+        "@esbuild/linux-riscv64": "0.27.0",
+        "@esbuild/linux-s390x": "0.27.0",
+        "@esbuild/linux-x64": "0.27.0",
+        "@esbuild/netbsd-arm64": "0.27.0",
+        "@esbuild/netbsd-x64": "0.27.0",
+        "@esbuild/openbsd-arm64": "0.27.0",
+        "@esbuild/openbsd-x64": "0.27.0",
+        "@esbuild/openharmony-arm64": "0.27.0",
+        "@esbuild/sunos-x64": "0.27.0",
+        "@esbuild/win32-arm64": "0.27.0",
+        "@esbuild/win32-ia32": "0.27.0",
+        "@esbuild/win32-x64": "0.27.0"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "dev": true,

core/package.json

@@ -62,6 +62,7 @@
     "chalk": "^5.3.0",
     "clean-css-cli": "^5.6.1",
     "domino": "^2.1.6",
+    "esbuild": "^0.27.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-custom-rules": "file:custom-rules",
@@ -79,11 +80,12 @@
     "stylelint-order": "^4.1.0"
   },
   "scripts": {
-    "build": "npm run clean && npm run build.css && stencil build --es5 --docs-json dist/docs.json",
+    "build": "npm run clean && npm run build.css && npm run build.themes && stencil build --es5 --docs-json dist/docs.json",
     "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 --dest src/foundations/ --root=false --scss=true --scss-file=ionic.vars.scss --scss-prefix=ion --utilities=false && npm run prettier.tokens",
+    "build.themes": "esbuild src/themes/*/*.tokens.ts --bundle --format=esm --platform=browser --target=es2017 --outdir=themes --outbase=src/themes && esbuild src/utils/theme.ts --bundle --format=esm --platform=browser --target=es2017 --outfile=themes/utils/theme.js",
     "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",
@@ -97,7 +99,7 @@
     "prerender.e2e": "node scripts/testing/prerender.js",
     "prettier": "prettier \"./src/**/*.{html,ts,tsx,js,jsx,scss}\"",
     "prettier.tokens": "prettier \"./src/foundations/*.{scss, html}\" --write --cache",
-    "start": "npm run build.css && stencil build --dev --watch --serve",
+    "start": "npm run build.css && npm run build.themes && stencil build --dev --watch --serve",
     "test": "npm run test.spec && npm run test.e2e",
     "test.spec": "stencil test --spec --max-workers=2",
     "test.e2e": "npx playwright test",

core/scripts/clean.js

@@ -4,7 +4,8 @@ const path = require('path');
 
 const cleanDirs = [
   'dist',
-  'css'
+  'css',
+  'themes'
 ];
 
 cleanDirs.forEach(dir => {

core/scripts/testing/scripts.js

@@ -14,14 +14,17 @@
  * The following URL parameters are supported:
  * - `rtl`: Set to `true` to enable right-to-left directionality.
  * - `ionic:_testing`: Set to `true` to identify testing environments.
- * - `ionic:theme`: Set to `ios` or `md` to load a specific theme.
- * Defaults to `md`.
+ * - `ionic:theme`: Set to `ionic`, `ios`, or `md` to load a specific 
+ * theme. Defaults to `md`.
  * - `palette`: Set to `light`, `dark`, `high-contrast`, or 
  * `high-contrast-dark` to load a specific palette. Defaults to `light`.
  */
 
-(function() {
+const DEFAULT_THEME = 'md';
+const DEFAULT_PALETTE = 'light';
 
+(function() {
+  
   /**
    * The `rtl` param is used to set the directionality of the 
    * document. This can be `true` or `false`.
@@ -49,45 +52,16 @@
   }
 
   /**
-   * The `palette` param is used to load a specific palette
-   * for the theme.
-   * The dark class will load the dark palette automatically
-   * if no palette is specified through the URL.
-   * 
-   * Values can be `light`, `dark`, `high-contrast`,
-   * or `high-contrast-dark`. Default to `light` for tests.
+   * The `theme` param is used to load a specific theme.
+   * This can be `ionic`, `ios`, or `md`. Default to `md` for tests.
    */
-  const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
-  const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
-  const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
-  const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
-  const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
-  const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
-
-  let paletteName = paletteQuery?.[1] || paletteHash?.[1] || highContrastDarkClass || darkClass || highContrastClass || 'light';
-
-  if (!validPalettes.includes(paletteName)) {
-    console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
-    paletteName = 'light';
-  }
-
-  if (paletteName !== 'light') {
-    const linkTag = document.createElement('link');
-    linkTag.setAttribute('rel', 'stylesheet');
-    linkTag.setAttribute('type', 'text/css');
-    linkTag.setAttribute('href', `/css/palettes/${paletteName}.always.css`);
-    document.head.appendChild(linkTag);
-  }
-
-  /**
-  * The `ionic` theme uses a different stylesheet than the `iOS` and `md` themes.
-  * This is to ensure that the `ionic` theme is loaded when the `ionic:theme=ionic`
-  * or when the HTML tag has the `theme="ionic"` attribute. This is useful for
-  * the snapshot tests, where the `ionic` theme is not loaded by default.
-  */
-  const themeQuery = window.location.search.match(/ionic:theme=([a-z]+)/);
+  const themeQuery = window.location.search.match(/ionic:theme=([a-z0-9]+)/i);
+  const themeHash = window.location.hash.match(/ionic:theme=([a-z0-9]+)/i);
   const themeAttr = document.documentElement.getAttribute('theme');
+  const themeName = themeQuery?.[1] || themeHash?.[1] || themeAttr || DEFAULT_THEME;
 
+  // TODO(): Remove this when the tokens are working for all components
+  // and the themes all use the same bundle
   if ((themeQuery && themeQuery[1] === 'ionic') || themeAttr === 'ionic') {
     const ionicThemeLinkTag = document.querySelector('link[href*="css/ionic/bundle.ionic.css"]');
 
@@ -99,21 +73,136 @@
       document.head.appendChild(linkTag);
     }
 
-    const utilsBundleLinkTag = document.querySelector('link[href*="css/utils.bundle.css"]');
-    if (!utilsBundleLinkTag) {
-      const linkTag = document.createElement('link');
-      linkTag.setAttribute('rel', 'stylesheet');
-      linkTag.setAttribute('type', 'text/css');
-      linkTag.setAttribute('href', '/css/utils.bundle.css');
-      document.head.appendChild(linkTag);
-    }
-
     const defaultThemeLinkTag = document.querySelector('link[href*="css/ionic.bundle.css"]');
     if (defaultThemeLinkTag) {
       defaultThemeLinkTag.remove();
     }
   }
 
+  /**
+   * The `palette` param is used to load a specific palette
+   * for the theme.
+   * The dark class will load the dark palette automatically
+   * if no palette is specified through the URL.
+   * 
+   * Values can be `light`, `dark`, `high-contrast`,
+   * or `high-contrast-dark`. Default to `light` for tests.
+   */
+  const validPalettes = ['light', 'dark', 'high-contrast', 'high-contrast-dark'];
+
+  const configDarkMode = window.Ionic?.config?.customTheme?.palette?.dark?.enabled === 'always' ? 'dark' : null;
+  const configHighContrastMode = window.Ionic?.config?.customTheme?.palette?.highContrast?.enabled === 'always' ? 'high-contrast' : null;
+  const configHighContrastDarkMode = window.Ionic?.config?.customTheme?.palette?.highContrastDark?.enabled === 'always' ? 'high-contrast-dark' : null;
+  /**
+   * Ensure window.Ionic.config is defined before importing 'testing/scripts'
+   * in the test HTML to properly initialize the palette configuration below.
+   * 
+   * Example:
+   * <script>
+   *    window.Ionic = { config: { customTheme: { palette: { ... } } } };
+   * </script>
+   * <script src="testing/scripts.js"></script>
+   */
+  const configPalette = configDarkMode || configHighContrastMode || configHighContrastDarkMode;
+  const paletteQuery = window.location.search.match(/palette=([a-z-]+)/);
+  const paletteHash = window.location.hash.match(/palette=([a-z-]+)/);
+  const darkClass = document.body?.classList.contains('ion-palette-dark') ? 'dark' : null;
+  const highContrastClass = document.body?.classList.contains('ion-palette-high-contrast') ? 'high-contrast' : null;
+  const highContrastDarkClass = darkClass && highContrastClass ? 'high-contrast-dark' : null;
+  const paletteClass = highContrastDarkClass || highContrastClass || darkClass;
+
+  let paletteName = configPalette || paletteQuery?.[1] || paletteHash?.[1] || paletteClass || DEFAULT_PALETTE;
+
+  if (!validPalettes.includes(paletteName)) {
+    console.warn(`Invalid palette name: '${paletteName}'. Falling back to 'light' palette.`);
+    paletteName = DEFAULT_PALETTE;
+  }
+
+  // Load theme tokens if the theme is valid
+  const validThemes = ['ionic', 'ios', 'md'];
+  if (themeName && validThemes.includes(themeName)) {
+    loadThemeTokens(themeName, paletteName);
+  } else if(themeName) {
+    console.warn(
+      `Unsupported theme "${themeName}". Supported themes are: ${validThemes.join(', ')}. Defaulting to ${DEFAULT_THEME}.`
+    );
+  }
+
+  async function loadThemeTokens(themeName, paletteName) {
+    try {
+      // Store existing theme set from the app initialization
+      const customTheme = window.Ionic?.config?.customTheme;
+      // Load the default tokens for the theme
+      const defaultTokens = await import(`/themes/${themeName}/default.tokens.js`);
+      let theme = defaultTokens.defaultTheme;
+
+      // Merge with existing theme to preserve any customizations
+      if (customTheme) {
+        theme = {
+          ...theme,
+          ...customTheme,
+          palette: {
+            ...theme.palette,
+            ...customTheme.palette,
+          },
+        };
+      }
+
+      // If a specific palette is requested, modify the palette structure
+      // to set the enabled property to 'always'
+      // TODO(FW-4004): Implement dark palette
+      if (paletteName === 'dark' && theme.palette?.dark) {
+        theme.palette.dark.enabled = 'always';
+      // TODO(FW-4005): Implement high contrast palette
+      } else if (paletteName === 'high-contrast' && theme.palette?.highContrast) {
+        theme.palette.highContrast.enabled = 'always';
+      // TODO(FW-4005): Implement high contrast dark palette
+      } else if (paletteName === 'high-contrast-dark' && theme.palette?.highContrastDark) {
+        theme.palette.highContrastDark.enabled = 'always';
+      }
+
+      if (window.Ionic?.config?.set) {
+        /**
+         * New Page Load after Initial App Load or Playwright Test:
+         * 
+         * If the Config instance exists, we must use the
+         * `set()` method. This ensures the internal private Map inside
+         * the `Config` class is updated with the loaded theme tokens.
+         * Without this, components would read 'undefined' or 'base'
+         * values from the stale Map when trying to access them through
+         * methods like `config.get()`.
+         */
+        window.Ionic.config.set('customTheme', theme);
+      } else {
+        /**
+         * App Initialization or Browser Refresh:
+         * 
+         * If the Config instance doesn't exist yet,
+         * we attach the theme to the global Ionic object. The `initialize()`
+         * method in `ionic-global.ts` will later merge this into the new
+         * `Config` instance via `config.reset()`.
+         */
+        window.Ionic = window.Ionic || {};
+        window.Ionic.config = window.Ionic.config || {};
+        window.Ionic.config.customTheme = theme;
+      }
+
+      /**
+       * Re-applying the global theme is critical for Playwright tests.
+       * Even if the config is set, the CSS variables for the specific theme 
+       * (e.g., md or ios) must be force-injected into the document head to 
+       * ensure visual assertions pass correctly.
+       */
+      if (window.Ionic?.config?.get && window.Ionic?.config?.set) {
+        const themeModule = await import('/themes/utils/theme.js');
+        themeModule.applyGlobalTheme(theme);
+        themeModule.applyComponentsTheme(theme);
+      }
+    } catch (error) {
+      console.error(`Failed to load theme tokens for ${themeName}:`, error);
+    }
+  }
+
   window.Ionic = window.Ionic || {};
   window.Ionic.config = window.Ionic.config || {};
 

core/src/components.d.ts

@@ -872,8 +872,11 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
-          * @default 'subtle'
+          * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"`.
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
          */
         "hue"?: 'bold' | 'subtle';
         /**
@@ -882,21 +885,18 @@ export namespace Components {
         "mode"?: "ios" | "md";
         /**
           * Display an outline style button.
+          * @deprecated - Use fill="outline" instead
           * @default false
          */
         "outline": boolean;
         /**
-          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.  Defaults to `"round"`.
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
          */
         "size"?: 'small' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
         /**
@@ -6846,8 +6846,11 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Only applies to the `ionic` theme.
-          * @default 'subtle'
+          * The fill for the chip.  Set to `"outline"` for a chip with a border and background. Set to `"solid"` for a chip with a background.  Defaults to `"solid"`.
+         */
+        "fill"?: 'outline' | 'solid';
+        /**
+          * Set to `"bold"` for a chip with vibrant, bold colors or to `"subtle"` for a chip with muted, subtle colors.  Defaults to `"subtle"`.
          */
         "hue"?: 'bold' | 'subtle';
         /**
@@ -6856,21 +6859,18 @@ declare namespace LocalJSX {
         "mode"?: "ios" | "md";
         /**
           * Display an outline style button.
+          * @deprecated - Use fill="outline" instead
           * @default false
          */
         "outline"?: boolean;
         /**
-          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners. Defaults to `"round"` for the `"ionic"` theme and `"soft"` for all other themes.
+          * Set to `"soft"` for a chip with slightly rounded corners, `"round"` for a chip with fully rounded corners, or `"rectangular"` for a chip without rounded corners.  Defaults to `"round"`.
          */
         "shape"?: 'soft' | 'round' | 'rectangular';
         /**
-          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"` for the ionic theme, and  undefined for all other themes.
+          * Set to `"small"` for a chip with less height and padding.  Defaults to `"large"`.
          */
         "size"?: 'small' | 'large';
-        /**
-          * The theme determines the visual appearance of the component.
-         */
-        "theme"?: "ios" | "md" | "ionic";
     }
     interface IonCol {
         /**

core/src/components/accordion-group/test/expand/accordion-group.e2e.ts

@@ -9,8 +9,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group>
@@ -47,8 +47,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first">
@@ -87,8 +87,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group expand="inset">
@@ -125,8 +125,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #ccc7c7;
+            .ionic {
+              --ion-background-color: #ccc7c7;
             }
           </style>
           <ion-accordion-group value="first" expand="inset">

core/src/components/accordion-group/test/shape/accordion-group.e2e.ts

@@ -9,8 +9,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #222;
+            .ionic {
+              --ion-background-color: #222;
             }
           </style>
 

core/src/components/accordion/test/shape/accordion.e2e.ts

@@ -9,8 +9,8 @@ configs({ directions: ['ltr'], modes: ['ionic-md'] }).forEach(({ config, screens
           `
           <style>
             /* Background styles to show the border radius */
-            :root {
-              --background: #222;
+            .ionic {
+              --ion-background-color: #222;
             }
           </style>
 

core/src/components/back-button/back-button.tsx

@@ -3,8 +3,8 @@ import type { ComponentInterface } from '@stencil/core';
 import { Component, Element, Host, Prop, h } from '@stencil/core';
 import type { ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes } from '@utils/helpers';
-import { createColorClasses, hostContext, openURL } from '@utils/theme';
+import { inheritAriaAttributes, openURL } from '@utils/helpers';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { arrowBackSharp, chevronBack } from 'ionicons/icons';
 
 import { config } from '../../global/config';

core/src/components/breadcrumb/breadcrumb.tsx

@@ -3,8 +3,8 @@ import dotsThreeRegular from '@phosphor-icons/core/assets/regular/dots-three.svg
 import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, h } from '@stencil/core';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes } from '@utils/helpers';
-import { createColorClasses, hostContext, openURL } from '@utils/theme';
+import { inheritAriaAttributes, openURL } from '@utils/helpers';
+import { createColorClasses, hostContext } from '@utils/theme';
 import { chevronForwardOutline, ellipsisHorizontal } from 'ionicons/icons';
 
 import { config } from '../../global/config';

core/src/components/button/button.tsx

@@ -2,9 +2,9 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Prop, Watch, State, forceUpdate, h } from '@stencil/core';
 import type { AnchorInterface, ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
-import { inheritAriaAttributes, hasShadowDom } from '@utils/helpers';
+import { inheritAriaAttributes, hasShadowDom, openURL } from '@utils/helpers';
 import { printIonWarning } from '@utils/logging';
-import { createColorClasses, hostContext, openURL } from '@utils/theme';
+import { createColorClasses, hostContext } from '@utils/theme';
 
 import { getIonTheme, getIonMode } from '../../global/ionic-global';
 import type { AnimationBuilder, Color } from '../../interface';