feat(tokens): update to tokens major release

.gitignore

@@ -95,3 +95,7 @@ packages/react/test/build/
 packages/react-router/test/build/
 
 .npmrc
+
+# Dark theme generated by outsystems-design-tokens 2.x. Not wired into this fork — Ionic
+# ships its own dark system in core/src/css/palettes/ — so it is regenerated but unused.
+core/src/foundations/_theme-dark.scss

core/package.json

@@ -103,7 +103,7 @@
     "fs-extra": "^9.0.1",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
-    "outsystems-design-tokens": "^1.3.9",
+    "outsystems-design-tokens": "^2.3.0",
     "playwright-core": "^1.62.1",
     "prettier": "^2.8.8",
     "rollup": "^2.26.4",
@@ -125,7 +125,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 --dest src/foundations/ --root=false --scss=true --scss-file=ionic.vars.scss --scss-prefix=ion --utilities=false && npm run prettier.tokens",
+    "build.tokens": "npx build.tokens --dest src/foundations/ --root=false --scss=true --css=false --scss-file=ionic.vars.scss --scss-prefix=ion --utilities=false --use-custom-font=false && 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",

core/src/components/accordion-group/accordion-group.ionic.scss

@@ -19,19 +19,19 @@
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-round) {
-  --border-radius: #{globals.$ion-round-xl};
+  --border-radius: #{globals.$ion-shape-round-xl};
 
-  @include globals.border-radius(globals.$ion-round-xl);
+  @include globals.border-radius(globals.$ion-shape-round-xl);
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-soft) {
-  --border-radius: #{globals.$ion-soft-xl};
+  --border-radius: #{globals.$ion-shape-soft-xl};
 
-  @include globals.border-radius(globals.$ion-soft-xl);
+  @include globals.border-radius(globals.$ion-shape-soft-xl);
 }
 
 :host(.accordion-group-expand-inset.accordion-group-shape-rectangular) {
-  --border-radius: #{globals.$ion-rectangular-xl};
+  --border-radius: #{globals.$ion-shape-rectangular-xl};
 
-  @include globals.border-radius(globals.$ion-rectangular-xl);
+  @include globals.border-radius(globals.$ion-shape-rectangular-xl);
 }

core/src/components/action-sheet/action-sheet.ionic.scss

@@ -28,11 +28,7 @@
 }
 
 .action-sheet-button.ion-focused::after {
-  @include globals.focused-state(
-    globals.$ion-border-size-050,
-    globals.$ion-border-style-solid,
-    globals.$ion-border-focus-default
-  );
+  @include globals.focused-state(globals.$ion-border-size-050, solid, globals.$ion-border-focus-default);
 
   outline-offset: calc(globals.$ion-border-size-050 * -1);
 }

core/src/components/alert/alert.ionic.scss

@@ -23,19 +23,11 @@
 }
 
 .alert-button.ion-focused {
-  @include globals.focused-state(
-    globals.$ion-border-size-050,
-    globals.$ion-border-style-solid,
-    globals.$ion-border-focus-default
-  );
+  @include globals.focused-state(globals.$ion-border-size-050, solid, globals.$ion-border-focus-default);
 }
 
 .alert-tappable.ion-focused {
-  @include globals.focused-state(
-    globals.$ion-border-size-050,
-    globals.$ion-border-style-solid,
-    globals.$ion-border-focus-default
-  );
+  @include globals.focused-state(globals.$ion-border-size-050, solid, globals.$ion-border-focus-default);
 
   outline-offset: calc(globals.$ion-border-size-050 * -1);
 }
@@ -106,7 +98,7 @@
 .alert-input {
   @include mixins.margin(globals.$ion-space-150, 0);
 
-  border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-input-default;
+  border-bottom: globals.$ion-border-size-025 solid globals.$ion-border-input-default;
 
   color: globals.$ion-text-default;
 
@@ -125,7 +117,7 @@
 .alert-input:focus {
   @include mixins.margin(null, null, globals.$ion-scale-100, null);
 
-  border-bottom: globals.$ion-border-size-050 globals.$ion-border-style-solid globals.$ion-border-focus-default;
+  border-bottom: globals.$ion-border-size-050 solid globals.$ion-border-focus-default;
 }
 
 // Ionic Alert Radio/Checkbox Group
@@ -135,8 +127,8 @@
 .alert-checkbox-group {
   position: relative;
 
-  border-top: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default;
-  border-bottom: globals.$ion-border-size-025 globals.$ion-border-style-solid globals.$ion-border-default;
+  border-top: globals.$ion-border-size-025 solid globals.$ion-border-default;
+  border-bottom: globals.$ion-border-size-025 solid globals.$ion-border-default;
 
   overflow: auto;
 }
@@ -210,7 +202,7 @@
   height: globals.$ion-scale-600;
 
   border-width: globals.$ion-border-size-025;
-  border-style: globals.$ion-border-style-solid;
+  border-style: solid;
   border-color: globals.$ion-border-input-default;
 
   background-color: globals.$ion-bg-input-default;
@@ -298,7 +290,7 @@
   height: globals.$ion-scale-600;
 
   border-width: globals.$ion-border-size-025;
-  border-style: globals.$ion-border-style-solid;
+  border-style: solid;
   border-color: globals.$ion-primitives-neutral-800;
 
   background-color: globals.$ion-bg-input-default;

core/src/components/avatar/avatar.ionic.scss

@@ -96,40 +96,40 @@
 :host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
-  --border-radius: #{globals.$ion-soft-2xs};
+  --border-radius: #{globals.$ion-shape-soft-2xs};
 }
 :host(.avatar-medium.avatar-soft) {
-  --border-radius: #{globals.$ion-soft-xs};
+  --border-radius: #{globals.$ion-shape-soft-xs};
 }
 :host(.avatar-large.avatar-soft),
 :host(.avatar-xlarge.avatar-soft) {
-  --border-radius: #{globals.$ion-soft-md};
+  --border-radius: #{globals.$ion-shape-soft-md};
 }
 
 :host(.avatar-xxsmall.avatar-round),
 :host(.avatar-xsmall.avatar-round),
 :host(.avatar-small.avatar-round) {
-  --border-radius: #{globals.$ion-round-2xs};
+  --border-radius: #{globals.$ion-shape-round-2xs};
 }
 :host(.avatar-medium.avatar-round) {
-  --border-radius: #{globals.$ion-round-xs};
+  --border-radius: #{globals.$ion-shape-round-xs};
 }
 :host(.avatar-large.avatar-round),
 :host(.avatar-xlarge.avatar-round) {
-  --border-radius: #{globals.$ion-round-md};
+  --border-radius: #{globals.$ion-shape-round-md};
 }
 
 :host(.avatar-xxsmall.avatar-rectangular),
 :host(.avatar-xsmall.avatar-rectangular),
 :host(.avatar-small.avatar-rectangular) {
-  --border-radius: #{globals.$ion-rectangular-2xs};
+  --border-radius: #{globals.$ion-shape-rectangular-2xs};
 }
 :host(.avatar-medium.avatar-rectangular) {
-  --border-radius: #{globals.$ion-rectangular-xs};
+  --border-radius: #{globals.$ion-shape-rectangular-xs};
 }
 :host(.avatar-large.avatar-rectangular),
 :host(.avatar-xlarge.avatar-rectangular) {
-  --border-radius: #{globals.$ion-rectangular-md};
+  --border-radius: #{globals.$ion-shape-rectangular-md};
 }
 
 // Avatar Icon

core/src/components/badge/badge.ionic.scss

@@ -51,21 +51,21 @@
 
 /* Soft Badge */
 :host(.badge-soft) {
-  @include globals.border-radius(globals.$ion-soft-xs);
+  @include globals.border-radius(globals.$ion-shape-soft-xs);
 }
 
 :host(.badge-small.badge-soft) {
-  @include globals.border-radius(globals.$ion-soft-2xs);
+  @include globals.border-radius(globals.$ion-shape-soft-2xs);
 }
 
 /* Round Badge */
 :host(.badge-round) {
-  @include globals.border-radius(globals.$ion-round-sm);
+  @include globals.border-radius(globals.$ion-shape-round-sm);
 }
 
 /* Rectangular Badge */
 :host(.badge-rectangular) {
-  @include globals.border-radius(globals.$ion-rectangular-sm);
+  @include globals.border-radius(globals.$ion-shape-rectangular-sm);
 }
 
 // Badge Sizes

core/src/components/button/button.ionic.scss

@@ -58,7 +58,7 @@
 
 :host(.button-outline) {
   --border-width: #{globals.$ion-border-size-025};
-  --border-style: #{globals.$ion-border-style-solid};
+  --border-style: solid;
   --background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
   --background-focused: transparent;
   --background-hover: #{globals.ion-color(primary, shade, $subtle: true)};
@@ -183,29 +183,29 @@
 // --------------------------------------------------
 
 :host(.button-soft) {
-  --border-radius: #{globals.$ion-soft-xs};
+  --border-radius: #{globals.$ion-shape-soft-xs};
 }
 
 // Round Button
 // --------------------------------------------------
 
 :host(.button-round) {
-  --border-radius: #{globals.$ion-round-xs};
+  --border-radius: #{globals.$ion-shape-round-xs};
 }
 
 // Rectangular Button
 // --------------------------------------------------
 
 :host(.button-rectangular) {
-  --border-radius: #{globals.$ion-rectangular-xs};
+  --border-radius: #{globals.$ion-shape-rectangular-xs};
 }
 
 // Button: Focus
 // -------------------------------------------------------------------------------
 
 // Only show the focus ring when the button is focused
 :host(.ion-focused) .button-native {
-  outline: var(--focus-ring-width) globals.$ion-border-style-solid var(--focus-ring-color);
+  outline: var(--focus-ring-width) solid var(--focus-ring-color);
   outline-offset: globals.$ion-border-size-050;
 }
 

core/src/components/card/card.ionic.scss

@@ -8,8 +8,8 @@
   --background: #{globals.$ion-bg-surface-default};
   --border-width: #{globals.$ion-border-size-025};
   --border-color: #{globals.$ion-border-default};
-  --border-style: #{globals.$ion-border-style-solid};
-  --border-radius: #{globals.$ion-round-xl};
+  --border-style: solid;
+  --border-radius: #{globals.$ion-shape-round-xl};
   --color: #{globals.$ion-text-default};
   min-width: globals.$ion-scale-2400;
 
@@ -24,13 +24,13 @@
 // ---------------------------------------------
 
 :host(.card-soft) {
-  --border-radius: #{globals.$ion-soft-xl};
+  --border-radius: #{globals.$ion-shape-soft-xl};
 }
 
 :host(.card-round) {
-  --border-radius: #{globals.$ion-round-xl};
+  --border-radius: #{globals.$ion-shape-round-xl};
 }
 
 :host(.card-rectangular) {
-  --border-radius: #{globals.$ion-rectangular-xl};
+  --border-radius: #{globals.$ion-shape-rectangular-xl};
 }

core/src/components/checkbox/checkbox.ionic.scss

@@ -15,7 +15,7 @@
 
   // Border
   --border-width: #{globals.$ion-border-size-025};
-  --border-style: #{globals.$ion-border-style-solid};
+  --border-style: solid;
   --border-color: #{globals.$ion-primitives-neutral-800};
   --checkmark-width: #{globals.$ion-scale-400};
   --checkmark-height: var(--checkmark-width);
@@ -247,7 +247,7 @@ input {
 // --------------------------------------------------
 // Only show the focus ring when the checkbox is focused and not disabled
 :host(.ion-focused:not(.checkbox-disabled)) .native-wrapper {
-  @include globals.focused-state(var(--focus-ring-width), globals.$ion-border-style-solid, var(--focus-ring-color));
+  @include globals.focused-state(var(--focus-ring-width), solid, var(--focus-ring-color));
 }
 
 // Checkbox: Active

core/src/components/chip/chip.ionic.scss

@@ -18,7 +18,7 @@
 
   gap: globals.$ion-space-100;
 
-  line-height: globals.$ion-font-line-height-full;
+  line-height: 100%;
 
   cursor: auto;
 }
@@ -28,7 +28,7 @@
 
 :host(.chip-outline) {
   border-width: globals.$ion-border-size-025;
-  border-style: globals.$ion-border-style-solid;
+  border-style: solid;
 }
 
 // Chip: Focus