feat(tokens): update design-tokens (#29533)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

Added an update to Design Tokens, requested by UX/UI Team:

- New semantic colors added
- Guidelines token was removed 
- Hover, disabled and pressed tokens now correctly appear on Theme JSON
- Removed _color.styles.tokens.json_ file, as it was now empty.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->

core/src/foundations/ionic.root.scss

@@ -4,11 +4,6 @@
  */
 
 :root {
-  --ionic-guidelines: #9747ff;
-  --ionic-guidelines-rgb: 151, 71, 255;
-  --ionic-disabled: #ffffff99;
-  --ionic-hover: #1212120a;
-  --ionic-pressed: #12121214;
   --ionic-elevation-100: 0px 3px 9px 0px #00000012, 0px 0px 4px 0px #0000000a;
   --ionic-elevation-200: 0px 8px 25px 0px #00000014, 0px 1px 5px 0px #0000000d;
   --ionic-elevation-300: 0px 6px 32px 0px #00000029, 0px 2px 7px 0px #0000000d;
@@ -497,30 +492,34 @@
   --ionic-color-info-1100-rgb: 10, 55, 65;
   --ionic-color-info-1200: #051c21;
   --ionic-color-info-1200-rgb: 5, 28, 33;
-  --ionic-color-warning-100: #fff9ea;
-  --ionic-color-warning-100-rgb: 255, 249, 234;
-  --ionic-color-warning-200: #fff5db;
-  --ionic-color-warning-200-rgb: 255, 245, 219;
-  --ionic-color-warning-300: #ffebb1;
-  --ionic-color-warning-300-rgb: 255, 235, 177;
-  --ionic-color-warning-400: #ffe07b;
-  --ionic-color-warning-400-rgb: 255, 224, 123;
-  --ionic-color-warning-500: #ffd600;
-  --ionic-color-warning-500-rgb: 255, 214, 0;
-  --ionic-color-warning-600: #e1bd00;
-  --ionic-color-warning-600-rgb: 225, 189, 0;
-  --ionic-color-warning-700: #c3a400;
-  --ionic-color-warning-700-rgb: 195, 164, 0;
-  --ionic-color-warning-800: #a48a00;
-  --ionic-color-warning-800-rgb: 164, 138, 0;
-  --ionic-color-warning-900: #846f00;
-  --ionic-color-warning-900-rgb: 132, 111, 0;
-  --ionic-color-warning-1000: #635300;
-  --ionic-color-warning-1000-rgb: 99, 83, 0;
-  --ionic-color-warning-1100: #423800;
-  --ionic-color-warning-1100-rgb: 66, 56, 0;
-  --ionic-color-warning-1200: #221d00;
-  --ionic-color-warning-1200-rgb: 34, 29, 0;
+  --ionic-color-info-base: #1ea2bf;
+  --ionic-color-info-base-rgb: 30, 162, 191;
+  --ionic-color-warning-100: #fff1ea;
+  --ionic-color-warning-100-rgb: 255, 241, 234;
+  --ionic-color-warning-200: #ffe8db;
+  --ionic-color-warning-200-rgb: 255, 232, 219;
+  --ionic-color-warning-300: #ffcfb1;
+  --ionic-color-warning-300-rgb: 255, 207, 177;
+  --ionic-color-warning-400: #ffb37b;
+  --ionic-color-warning-400-rgb: 255, 179, 123;
+  --ionic-color-warning-500: #ff9400;
+  --ionic-color-warning-500-rgb: 255, 148, 0;
+  --ionic-color-warning-600: #e18300;
+  --ionic-color-warning-600-rgb: 225, 131, 0;
+  --ionic-color-warning-700: #c37100;
+  --ionic-color-warning-700-rgb: 195, 113, 0;
+  --ionic-color-warning-800: #a45f00;
+  --ionic-color-warning-800-rgb: 164, 95, 0;
+  --ionic-color-warning-900: #844d00;
+  --ionic-color-warning-900-rgb: 132, 77, 0;
+  --ionic-color-warning-1000: #633a00;
+  --ionic-color-warning-1000-rgb: 99, 58, 0;
+  --ionic-color-warning-1100: #422700;
+  --ionic-color-warning-1100-rgb: 66, 39, 0;
+  --ionic-color-warning-1200: #221400;
+  --ionic-color-warning-1200-rgb: 34, 20, 0;
+  --ionic-color-warning-base: #c37100;
+  --ionic-color-warning-base-rgb: 195, 113, 0;
   --ionic-color-danger-100: #feeded;
   --ionic-color-danger-100-rgb: 254, 237, 237;
   --ionic-color-danger-200: #fde1e1;
@@ -545,6 +544,8 @@
   --ionic-color-danger-1100-rgb: 84, 15, 15;
   --ionic-color-danger-1200: #330909;
   --ionic-color-danger-1200-rgb: 51, 9, 9;
+  --ionic-color-danger-base: #e52929;
+  --ionic-color-danger-base-rgb: 229, 41, 41;
   --ionic-color-success-100: #ebf9ec;
   --ionic-color-success-100-rgb: 235, 249, 236;
   --ionic-color-success-200: #dcf5de;
@@ -569,6 +570,8 @@
   --ionic-color-success-1100-rgb: 9, 56, 17;
   --ionic-color-success-1200: #051d09;
   --ionic-color-success-1200-rgb: 5, 29, 9;
+  --ionic-color-success-base: #1ba433;
+  --ionic-color-success-base-rgb: 27, 164, 51;
   --ionic-z-index-0: 0;
   --ionic-z-index-1: 100;
   --ionic-z-index-2: 200;
@@ -608,8 +611,11 @@
   --ionic-scale-075: 3px;
   --ionic-font-family: "Inter", sans-serif;
   --ionic-state-focus-0: none;
-  --ionic-state-focus-100: #9ec4fd;
-  --ionic-state-focus-100-rgb: 158, 196, 253;
-  --ionic-state-focus-200: #ffafaf;
-  --ionic-state-focus-200-rgb: 255, 175, 175;
+  --ionic-state-focus-1: #9ec4fd;
+  --ionic-state-focus-1-rgb: 158, 196, 253;
+  --ionic-state-focus-2: #ffafaf;
+  --ionic-state-focus-2-rgb: 255, 175, 175;
+  --ionic-state-disabled: #ffffff99;
+  --ionic-state-hover: #2424240a;
+  --ionic-state-pressed: #24242414;
 }

core/src/foundations/ionic.utility.scss

@@ -6,30 +6,6 @@
 @import "./ionic.vars";
 @import "../themes/mixins";
 
-.ionic-guidelines {
-  color: $ionic-guidelines;
-}
-.ionic-background-guidelines {
-  background-color: $ionic-guidelines;
-}
-.ionic-disabled {
-  color: $ionic-disabled;
-}
-.ionic-background-disabled {
-  background-color: $ionic-disabled;
-}
-.ionic-hover {
-  color: $ionic-hover;
-}
-.ionic-background-hover {
-  background-color: $ionic-hover;
-}
-.ionic-pressed {
-  color: $ionic-pressed;
-}
-.ionic-background-pressed {
-  background-color: $ionic-pressed;
-}
 .ionic-elevation-100 {
   box-shadow: $ionic-elevation-100;
 }
@@ -1719,6 +1695,12 @@
 .ionic-background-color-info-1200 {
   background-color: $ionic-color-info-1200;
 }
+.ionic-color-info-base {
+  color: $ionic-color-info-base;
+}
+.ionic-background-color-info-base {
+  background-color: $ionic-color-info-base;
+}
 .ionic-color-warning-100 {
   color: $ionic-color-warning-100;
 }
@@ -1791,6 +1773,12 @@
 .ionic-background-color-warning-1200 {
   background-color: $ionic-color-warning-1200;
 }
+.ionic-color-warning-base {
+  color: $ionic-color-warning-base;
+}
+.ionic-background-color-warning-base {
+  background-color: $ionic-color-warning-base;
+}
 .ionic-color-danger-100 {
   color: $ionic-color-danger-100;
 }
@@ -1863,6 +1851,12 @@
 .ionic-background-color-danger-1200 {
   background-color: $ionic-color-danger-1200;
 }
+.ionic-color-danger-base {
+  color: $ionic-color-danger-base;
+}
+.ionic-background-color-danger-base {
+  background-color: $ionic-color-danger-base;
+}
 .ionic-color-success-100 {
   color: $ionic-color-success-100;
 }
@@ -1935,6 +1929,12 @@
 .ionic-background-color-success-1200 {
   background-color: $ionic-color-success-1200;
 }
+.ionic-color-success-base {
+  color: $ionic-color-success-base;
+}
+.ionic-background-color-success-base {
+  background-color: $ionic-color-success-base;
+}
 .ionic-z-index-0 {
   z-index: $ionic-z-index-0;
 }
@@ -2506,15 +2506,33 @@
 .ionic-background-state-focus-0 {
   background-color: $ionic-state-focus-0;
 }
-.ionic-state-focus-100 {
-  color: $ionic-state-focus-100;
+.ionic-state-focus-1 {
+  color: $ionic-state-focus-1;
 }
-.ionic-background-state-focus-100 {
-  background-color: $ionic-state-focus-100;
+.ionic-background-state-focus-1 {
+  background-color: $ionic-state-focus-1;
 }
-.ionic-state-focus-200 {
-  color: $ionic-state-focus-200;
+.ionic-state-focus-2 {
+  color: $ionic-state-focus-2;
 }
-.ionic-background-state-focus-200 {
-  background-color: $ionic-state-focus-200;
+.ionic-background-state-focus-2 {
+  background-color: $ionic-state-focus-2;
+}
+.ionic-state-disabled {
+  color: $ionic-state-disabled;
+}
+.ionic-background-state-disabled {
+  background-color: $ionic-state-disabled;
+}
+.ionic-state-hover {
+  color: $ionic-state-hover;
+}
+.ionic-background-state-hover {
+  background-color: $ionic-state-hover;
+}
+.ionic-state-pressed {
+  color: $ionic-state-pressed;
+}
+.ionic-background-state-pressed {
+  background-color: $ionic-state-pressed;
 }

core/src/foundations/ionic.vars.scss

@@ -3,11 +3,6 @@
  * Ionic Design System
  */
 
-$ionic-guidelines: var(--ionic-guidelines, #9747ff);
-$ionic-guidelines-rgb: var(--ionic-guidelines-rgb, 151, 71, 255);
-$ionic-disabled: var(--ionic-disabled, #ffffff99);
-$ionic-hover: var(--ionic-hover, #1212120a);
-$ionic-pressed: var(--ionic-pressed, #12121214);
 $ionic-elevation-100: var(--ionic-elevation-100, 0px 3px 9px 0px #00000012, 0px 0px 4px 0px #0000000a);
 $ionic-elevation-200: var(--ionic-elevation-200, 0px 8px 25px 0px #00000014, 0px 1px 5px 0px #0000000d);
 $ionic-elevation-300: var(--ionic-elevation-300, 0px 6px 32px 0px #00000029, 0px 2px 7px 0px #0000000d);
@@ -496,30 +491,34 @@ $ionic-color-info-1100: var(--ionic-color-info-1100, #0a3741);
 $ionic-color-info-1100-rgb: var(--ionic-color-info-1100-rgb, 10, 55, 65);
 $ionic-color-info-1200: var(--ionic-color-info-1200, #051c21);
 $ionic-color-info-1200-rgb: var(--ionic-color-info-1200-rgb, 5, 28, 33);
-$ionic-color-warning-100: var(--ionic-color-warning-100, #fff9ea);
-$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 249, 234);
-$ionic-color-warning-200: var(--ionic-color-warning-200, #fff5db);
-$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 245, 219);
-$ionic-color-warning-300: var(--ionic-color-warning-300, #ffebb1);
-$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 235, 177);
-$ionic-color-warning-400: var(--ionic-color-warning-400, #ffe07b);
-$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 224, 123);
-$ionic-color-warning-500: var(--ionic-color-warning-500, #ffd600);
-$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 255, 214, 0);
-$ionic-color-warning-600: var(--ionic-color-warning-600, #e1bd00);
-$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 225, 189, 0);
-$ionic-color-warning-700: var(--ionic-color-warning-700, #c3a400);
-$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 195, 164, 0);
-$ionic-color-warning-800: var(--ionic-color-warning-800, #a48a00);
-$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 164, 138, 0);
-$ionic-color-warning-900: var(--ionic-color-warning-900, #846f00);
-$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 132, 111, 0);
-$ionic-color-warning-1000: var(--ionic-color-warning-1000, #635300);
-$ionic-color-warning-1000-rgb: var(--ionic-color-warning-1000-rgb, 99, 83, 0);
-$ionic-color-warning-1100: var(--ionic-color-warning-1100, #423800);
-$ionic-color-warning-1100-rgb: var(--ionic-color-warning-1100-rgb, 66, 56, 0);
-$ionic-color-warning-1200: var(--ionic-color-warning-1200, #221d00);
-$ionic-color-warning-1200-rgb: var(--ionic-color-warning-1200-rgb, 34, 29, 0);
+$ionic-color-info-base: var(--ionic-color-info-base, #1ea2bf);
+$ionic-color-info-base-rgb: var(--ionic-color-info-base-rgb, 30, 162, 191);
+$ionic-color-warning-100: var(--ionic-color-warning-100, #fff1ea);
+$ionic-color-warning-100-rgb: var(--ionic-color-warning-100-rgb, 255, 241, 234);
+$ionic-color-warning-200: var(--ionic-color-warning-200, #ffe8db);
+$ionic-color-warning-200-rgb: var(--ionic-color-warning-200-rgb, 255, 232, 219);
+$ionic-color-warning-300: var(--ionic-color-warning-300, #ffcfb1);
+$ionic-color-warning-300-rgb: var(--ionic-color-warning-300-rgb, 255, 207, 177);
+$ionic-color-warning-400: var(--ionic-color-warning-400, #ffb37b);
+$ionic-color-warning-400-rgb: var(--ionic-color-warning-400-rgb, 255, 179, 123);
+$ionic-color-warning-500: var(--ionic-color-warning-500, #ff9400);
+$ionic-color-warning-500-rgb: var(--ionic-color-warning-500-rgb, 255, 148, 0);
+$ionic-color-warning-600: var(--ionic-color-warning-600, #e18300);
+$ionic-color-warning-600-rgb: var(--ionic-color-warning-600-rgb, 225, 131, 0);
+$ionic-color-warning-700: var(--ionic-color-warning-700, #c37100);
+$ionic-color-warning-700-rgb: var(--ionic-color-warning-700-rgb, 195, 113, 0);
+$ionic-color-warning-800: var(--ionic-color-warning-800, #a45f00);
+$ionic-color-warning-800-rgb: var(--ionic-color-warning-800-rgb, 164, 95, 0);
+$ionic-color-warning-900: var(--ionic-color-warning-900, #844d00);
+$ionic-color-warning-900-rgb: var(--ionic-color-warning-900-rgb, 132, 77, 0);
+$ionic-color-warning-1000: var(--ionic-color-warning-1000, #633a00);
+$ionic-color-warning-1000-rgb: var(--ionic-color-warning-1000-rgb, 99, 58, 0);
+$ionic-color-warning-1100: var(--ionic-color-warning-1100, #422700);
+$ionic-color-warning-1100-rgb: var(--ionic-color-warning-1100-rgb, 66, 39, 0);
+$ionic-color-warning-1200: var(--ionic-color-warning-1200, #221400);
+$ionic-color-warning-1200-rgb: var(--ionic-color-warning-1200-rgb, 34, 20, 0);
+$ionic-color-warning-base: var(--ionic-color-warning-base, #c37100);
+$ionic-color-warning-base-rgb: var(--ionic-color-warning-base-rgb, 195, 113, 0);
 $ionic-color-danger-100: var(--ionic-color-danger-100, #feeded);
 $ionic-color-danger-100-rgb: var(--ionic-color-danger-100-rgb, 254, 237, 237);
 $ionic-color-danger-200: var(--ionic-color-danger-200, #fde1e1);
@@ -544,6 +543,8 @@ $ionic-color-danger-1100: var(--ionic-color-danger-1100, #540f0f);
 $ionic-color-danger-1100-rgb: var(--ionic-color-danger-1100-rgb, 84, 15, 15);
 $ionic-color-danger-1200: var(--ionic-color-danger-1200, #330909);
 $ionic-color-danger-1200-rgb: var(--ionic-color-danger-1200-rgb, 51, 9, 9);
+$ionic-color-danger-base: var(--ionic-color-danger-base, #e52929);
+$ionic-color-danger-base-rgb: var(--ionic-color-danger-base-rgb, 229, 41, 41);
 $ionic-color-success-100: var(--ionic-color-success-100, #ebf9ec);
 $ionic-color-success-100-rgb: var(--ionic-color-success-100-rgb, 235, 249, 236);
 $ionic-color-success-200: var(--ionic-color-success-200, #dcf5de);
@@ -568,6 +569,8 @@ $ionic-color-success-1100: var(--ionic-color-success-1100, #093811);
 $ionic-color-success-1100-rgb: var(--ionic-color-success-1100-rgb, 9, 56, 17);
 $ionic-color-success-1200: var(--ionic-color-success-1200, #051d09);
 $ionic-color-success-1200-rgb: var(--ionic-color-success-1200-rgb, 5, 29, 9);
+$ionic-color-success-base: var(--ionic-color-success-base, #1ba433);
+$ionic-color-success-base-rgb: var(--ionic-color-success-base-rgb, 27, 164, 51);
 $ionic-z-index-0: var(--ionic-z-index-0, 0);
 $ionic-z-index-1: var(--ionic-z-index-1, 100);
 $ionic-z-index-2: var(--ionic-z-index-2, 200);
@@ -607,10 +610,13 @@ $ionic-scale-050: var(--ionic-scale-050, 2px);
 $ionic-scale-075: var(--ionic-scale-075, 3px);
 $ionic-font-family: var(--ionic-font-family, "Inter", sans-serif);
 $ionic-state-focus-0: var(--ionic-state-focus-0, none);
-$ionic-state-focus-100: var(--ionic-state-focus-100, #9ec4fd);
-$ionic-state-focus-100-rgb: var(--ionic-state-focus-100-rgb, 158, 196, 253);
-$ionic-state-focus-200: var(--ionic-state-focus-200, #ffafaf);
-$ionic-state-focus-200-rgb: var(--ionic-state-focus-200-rgb, 255, 175, 175);
+$ionic-state-focus-1: var(--ionic-state-focus-1, #9ec4fd);
+$ionic-state-focus-1-rgb: var(--ionic-state-focus-1-rgb, 158, 196, 253);
+$ionic-state-focus-2: var(--ionic-state-focus-2, #ffafaf);
+$ionic-state-focus-2-rgb: var(--ionic-state-focus-2-rgb, 255, 175, 175);
+$ionic-state-disabled: var(--ionic-state-disabled, #ffffff99);
+$ionic-state-hover: var(--ionic-state-hover, #2424240a);
+$ionic-state-pressed: var(--ionic-state-pressed, #24242414);
 
 $ionic-display-sm-regular: (
   font-family: $ionic-font-family,

core/src/foundations/tokens/color.styles.tokens.json

@@ -1,18 +0,0 @@
-{
-  "Guidelines": {
-    "$type": "color",
-    "$value": "#9747ff"
-  },
-  "Disabled": {
-    "$type": "color",
-    "$value": "#ffffff99"
-  },
-  "Hover": {
-    "$type": "color",
-    "$value": "#1212120a"
-  },
-  "Pressed": {
-    "$type": "color",
-    "$value": "#12121214"
-  }
-}

core/src/foundations/tokens/theme/theme.ionic.tokens.json

@@ -7,10 +7,6 @@
   },
   "color": {
     "primary": {
-      "base": {
-        "$type": "color",
-        "$value": "{color.blue.700}"
-      },
       "100": {
         "$type": "color",
         "$value": "{color.blue.100}"
@@ -58,6 +54,10 @@
       "1200": {
         "$type": "color",
         "$value": "{color.blue.1200}"
+      },
+      "base": {
+        "$type": "color",
+        "$value": "{color.primary.700}"
       }
     },
     "info": {
@@ -108,56 +108,64 @@
       "1200": {
         "$type": "color",
         "$value": "{color.aqua.1200}"
+      },
+      "base": {
+        "$type": "color",
+        "$value": "{color.info.700}"
       }
     },
     "warning": {
       "100": {
         "$type": "color",
-        "$value": "{color.yellow.100}"
+        "$value": "{color.orange.100}"
       },
       "200": {
         "$type": "color",
-        "$value": "{color.yellow.200}"
+        "$value": "{color.orange.200}"
       },
       "300": {
         "$type": "color",
-        "$value": "{color.yellow.300}"
+        "$value": "{color.orange.300}"
       },
       "400": {
         "$type": "color",
-        "$value": "{color.yellow.400}"
+        "$value": "{color.orange.400}"
       },
       "500": {
         "$type": "color",
-        "$value": "{color.yellow.500}"
+        "$value": "{color.orange.500}"
       },
       "600": {
         "$type": "color",
-        "$value": "{color.yellow.600}"
+        "$value": "{color.orange.600}"
       },
       "700": {
         "$type": "color",
-        "$value": "{color.yellow.700}"
+        "$value": "{color.orange.700}"
       },
       "800": {
         "$type": "color",
-        "$value": "{color.yellow.800}"
+        "$value": "{color.orange.800}"
       },
       "900": {
         "$type": "color",
-        "$value": "{color.yellow.900}"
+        "$value": "{color.orange.900}"
       },
       "1000": {
         "$type": "color",
-        "$value": "{color.yellow.1000}"
+        "$value": "{color.orange.1000}"
       },
       "1100": {
         "$type": "color",
-        "$value": "{color.yellow.1100}"
+        "$value": "{color.orange.1100}"
       },
       "1200": {
         "$type": "color",
-        "$value": "{color.yellow.1200}"
+        "$value": "{color.orange.1200}"
+      },
+      "base": {
+        "$type": "color",
+        "$value": "{color.orange.700}"
       }
     },
     "danger": {
@@ -208,6 +216,10 @@
       "1200": {
         "$type": "color",
         "$value": "{color.red.1200}"
+      },
+      "base": {
+        "$type": "color",
+        "$value": "{color.danger.700}"
       }
     },
     "success": {
@@ -258,6 +270,10 @@
       "1200": {
         "$type": "color",
         "$value": "{color.green.1200}"
+      },
+      "base": {
+        "$type": "color",
+        "$value": "{color.success.700}"
       }
     }
   },
@@ -267,14 +283,26 @@
         "$type": "string",
         "$value": "none"
       },
-      "100": {
+      "1": {
         "$type": "color",
         "$value": "#9ec4fd"
       },
-      "200": {
+      "2": {
         "$type": "color",
         "$value": "#ffafaf"
       }
+    },
+    "disabled": {
+      "$type": "color",
+      "$value": "#ffffff99"
+    },
+    "hover": {
+      "$type": "color",
+      "$value": "#2424240a"
+    },
+    "pressed": {
+      "$type": "color",
+      "$value": "#24242414"
     }
   }
 }