Refactor color migration strategy to a clean implementation, removing backward compatibility aliases and consolidating color scales. Update SCSS files to reflect new design tokens and ensure all references are migrated. Adjust event card layout in community events page for improved responsiveness. Modify CSS styles for better alignment with updated color palette and remove unnecessary padding in card components.

styles/_blog.scss

@@ -200,7 +200,7 @@
     background-position: center;
     border-width: 2px;
     border-style: solid;
-    border-color: $blue-purple-600;
+    border-color: $blue-purple-300;
     border-radius: 4px;
   }
 
@@ -215,7 +215,7 @@
     border: none;
     border-width: 2px;
     border-style: solid;
-    border-color: $blue-purple-600;
+    border-color: $blue-purple-300;
     border-radius: 4px;
   }
 }

styles/_buttons.scss

@@ -34,15 +34,15 @@ button[disabled="disabled"] {
   border: none;
   border-color: transparent;
   &:hover {
-    background: $blue-purple-600;
+    background: $blue-purple-300;
   }
 
   &.disabled,
   &[disabled="disabled"] {
-    background: $blue-purple-700;
+    background: $blue-purple-400;
 
     &:hover {
-      background: $blue-purple-700;
+      background: $blue-purple-400;
     }
   }
 }
@@ -66,7 +66,7 @@ button[disabled="disabled"] {
     transition: transform 0.3s ease-out;
   }
   &:hover {
-    background: $blue-purple-600 !important;
+    background: $blue-purple-300 !important;
     border: none;
     &::after {
       -webkit-transform: translateX(4px);

styles/_code-tabs.scss

@@ -197,7 +197,7 @@ pre {
   .ss, // string, symbol
   .sx // string, other
   {
-    color: $green-700;
+    color: $green-400;
   }
 
   .vc, // variable, class

styles/_colors.scss

@@ -32,14 +32,6 @@ $green-200: #70EE97;  // New design token
 $green-300: #21E46B;  // New design token (default)
 $green-400: #0DAA3E;  // New design token
 $green-500: #078139;  // New design token
-
-// Green - Backward compatibility aliases (smart merge mapping)
-$green-600: $green-300;  // Maps to 300
-$green-700: $green-400;  // Maps to 400
-$green-800: $green-400;  // Maps to 400
-$green-900: $green-500;  // Maps to 500
-$green-1000: $green-500; // Maps to 500
-
 $green: $green-500;
 $apex-2023-green: #00FF76;  // Special event color - preserved
 $token-2049-purple: #410bb9; // Special event color - preserved
@@ -50,39 +42,22 @@ $blue-200: #93BFF1;  // New design token
 $blue-300: #428CFF;  // New design token (default)
 $blue-400: #0179E7;  // New design token
 $blue-500: #0A4DC0;  // New design token
-
-// Blue - Backward compatibility aliases (smart merge mapping)
-$blue-600: $blue-300;  // Maps to 300
-$blue-700: $blue-400;  // Maps to 400
-$blue-800: $blue-400;  // Maps to 400
-$blue-900: $blue-500;  // Maps to 500
-
 $blue: $blue-500;
 $accent-blue-90: #001133; // Special event color - preserved
 
 // Lilac (Primary) - New Design Tokens (replaces blue-purple)
-$lilac-100: #F2EDFF;  // New design token (was F2EDFE in Figma, adjusted)
+$lilac-100: #F2EDFF;  // New design token
 $lilac-200: #D9CAFF;  // New design token
 $lilac-300: #C0A7FF;  // New design token (default)
 $lilac-400: #7649E3;  // New design token
 $lilac-500: #5429A1;  // New design token
 
-// Lilac - Backward compatibility aliases (smart merge mapping)
-$lilac-600: $lilac-300;  // Maps to 300
-$lilac-700: $lilac-400;  // Maps to 400
-$lilac-800: $lilac-400;  // Maps to 400
-$lilac-900: $lilac-500;  // Maps to 500
-
 // Legacy blue-purple aliases (map to new lilac)
 $blue-purple-100: $lilac-100;
 $blue-purple-200: $lilac-200;
 $blue-purple-300: $lilac-300;
 $blue-purple-400: $lilac-400;
 $blue-purple-500: $lilac-500;
-$blue-purple-600: $lilac-600;
-$blue-purple-700: $lilac-700;
-$blue-purple-800: $lilac-800;
-$blue-purple-900: $lilac-900;
 $purple: $lilac-400;
 
 // Red-purple - Legacy (no design token replacement)
@@ -103,22 +78,12 @@ $pink-300: #F18DA5;  // New design token (default)
 $pink-400: #FF577F;  // New design token
 $pink-500: #DC466F;  // New design token
 
-// Pink - Backward compatibility aliases (smart merge mapping)
-$pink-600: $pink-300;  // Maps to 300
-$pink-700: $pink-400;  // Maps to 400
-$pink-800: $pink-400;  // Maps to 400
-$pink-900: $pink-500;  // Maps to 500
-
 // Legacy magenta aliases (map to new pink)
 $magenta-100: $pink-100;
 $magenta-200: $pink-200;
 $magenta-300: $pink-300;
 $magenta-400: $pink-400;
 $magenta-500: $pink-500;
-$magenta-600: $pink-600;
-$magenta-700: $pink-700;
-$magenta-800: $pink-800;
-$magenta-900: $pink-900;
 $magenta: $pink-500;
 $pink: $pink-500;
 
@@ -128,13 +93,6 @@ $red-200: #F27A66;  // New design token
 $red-300: #F0643A;  // New design token (default)
 $red-400: #DA4518;  // New design token
 $red-500: #A22514;  // New design token
-
-// Red - Backward compatibility aliases (smart merge mapping)
-$red-600: $red-300;  // Maps to 300
-$red-700: $red-400;  // Maps to 400
-$red-800: $red-400;  // Maps to 400
-$red-900: $red-500;  // Maps to 500
-
 $red: $red-500;
 
 // Orange - Legacy (no design token replacement)
@@ -155,13 +113,6 @@ $yellow-200: #E6F1A7;  // New design token
 $yellow-300: #DBF15E;  // New design token (default)
 $yellow-400: #E1DB26;  // New design token
 $yellow-500: #D4C02D;  // New design token
-
-// Yellow - Backward compatibility aliases (smart merge mapping)
-$yellow-600: $yellow-300;  // Maps to 300
-$yellow-700: $yellow-400;  // Maps to 400
-$yellow-800: $yellow-400;  // Maps to 400
-$yellow-900: $yellow-500;  // Maps to 500
-
 $yellow: $yellow-500;
 
 // Common colors & colors used in Bootstrap ------------------------------------

styles/_content.scss

@@ -6,7 +6,7 @@
   p code,
   table code,
   li > code {
-    background-color: $green-1000;
+    background-color: $green-500;
     color: $green-400;
   }
 

styles/_diagrams.scss

@@ -207,7 +207,7 @@ html:not(.light) article {
 
       // Primary Blue Side gradient: change to green
       stop[stop-color="#29a1da"] {
-        stop-color: $green-600;
+        stop-color: $green-300;
       }
       stop[stop-color="#2789b9"] {
         stop-color: $green-400;
@@ -247,7 +247,7 @@ html.light {
   svg[fill="black"] {
 
     g[fill="blue"] {
-      fill: $blue-700;
+      fill: $blue-400;
     }
     g[stroke="blue"] {
       stroke: $blue-500;
@@ -271,7 +271,7 @@ html.light {
       fill: $blue-500;
     }
     g[stroke="rgb(29,180,255)"] {
-      stroke: $blue-700;
+      stroke: $blue-400;
     }
     rect[stroke="rgb(245,247,249)"] { // old off-white.
       stroke: $gray-050;
@@ -282,7 +282,7 @@ html.light {
     }
     g[stroke="lime"] ,
     g[stroke="rgb(0,255,0)"]{
-      stroke: $green-700; // darken strokes
+      stroke: $green-400; // darken strokes
     }
     g[fill="yellow"],
     g[fill="rgb(255,255,0)"] {
@@ -325,7 +325,7 @@ html.light {
     }
     path[stroke="#FF198B"] {
       // slightly darken up this magenta for more contrast in light mode
-      stroke: $magenta-700;
+      stroke: $magenta-400;
     }
 
     linearGradient stop[stop-color="#F5F5F7"] {

styles/_feedback.scss

@@ -58,15 +58,15 @@
         margin: 0 !important;
         margin-top: 8px !important;
         &:hover {
-          background: $blue-purple-600 !important;
+          background: $blue-purple-300 !important;
         }
 
         &.disabled,
         &[disabled="disabled"] {
-          background-color: $blue-purple-700 !important;
+          background-color: $blue-purple-400 !important;
 
           &:hover {
-            background-color: $blue-purple-700 !important;
+            background-color: $blue-purple-400 !important;
           }
         }
     }

styles/_landings.scss

@@ -185,7 +185,7 @@
 // Alert banners
 .alert-info {
   color: white;
-  background-color: $blue-700;
+  background-color: $blue-400;
   border-width: 0;
 
   a {

styles/_layout.scss

@@ -177,18 +177,15 @@ section {
       padding: 40px;
     }
 
-    .card-body {
-      padding: 8px;
-      padding-bottom: 24px;
+    // Removed card-body padding override - using Bootstrap 5 defaults
 
-      .card-icon-container {
-        width: 50px;
-        height: 50px;
+    .card-body .card-icon-container {
+      width: 50px;
+      height: 50px;
 
-        img {
-          width: 70%;
-          height: 70%;
-        }
+      img {
+        width: 70%;
+        height: 70%;
       }
     }
   }

styles/_pages.scss

@@ -365,7 +365,7 @@
     padding: 2px 16px;
     width: 24px;
     height: 16px;
-    background: $blue-purple-800;
+    background: $blue-purple-400;
     border-radius: 100px;
 
     font-weight: 600;
@@ -850,6 +850,11 @@
     font-size: 16px;
   }
 
+  // Add spacing to filter checkboxes to match Bootstrap 4
+  .form-check-inline {
+    margin-right: 2rem;
+  }
+
   .events-filter {
     height: 20px;
     width: 20px;
@@ -915,7 +920,7 @@
     background-position: center;
     border-width: 2px;
     border-style: solid;
-    border-color: $blue-purple-600;
+    border-color: $blue-purple-300;
     border-radius: 4px;
   }
 
@@ -930,7 +935,7 @@
     border: none;
     border-width: 2px;
     border-style: solid;
-    border-color: $blue-purple-600;
+    border-color: $blue-purple-300;
     border-radius: 4px;
   }
 }

styles/_rpc-tool.scss

@@ -28,7 +28,7 @@
 
 /* stylelint-disable selector-class-pattern -- react18-json-view uses these */
 .json-view--boolean {
-  color: $magenta-600 !important;
+  color: $magenta-300 !important;
 }
 
 .json-view--pair {

styles/_status-labels.scss

@@ -95,61 +95,61 @@
   }
 
   @mixin chip-indigo {
-    background-color: $blue-purple-900;
+    background-color: $blue-purple-500;
     color: $blue-purple-300;
     .badge-pill {
-      color: $blue-purple-900;
+      color: $blue-purple-500;
       background-color: $blue-purple-300;
     }
     &:hover {
-      background-color: $blue-purple-800;
+      background-color: $blue-purple-400;
       color: $blue-purple-200;
       .badge-pill {
-        color: $blue-purple-800;
+        color: $blue-purple-400;
         background-color: $blue-purple-200;
       }
     }
 
     html.light & {
       background-color: $blue-purple-200;
-      color: $blue-purple-800;
+      color: $blue-purple-400;
       .badge-pill {
         color: $blue-purple-200;
-        background-color: $blue-purple-800;
+        background-color: $blue-purple-400;
       }
       &:hover {
         background-color: $blue-purple-300;
-        color: $blue-purple-900;
+        color: $blue-purple-500;
         .badge-pill {
           color: $blue-purple-300;
-          background-color: $blue-purple-900;
+          background-color: $blue-purple-500;
         }
       }
     }
   }
 
   @mixin chip-green {
-    background-color: $green-900;
+    background-color: $green-500;
     color: $green-300;
     .badge-pill {
       background-color: $green-300;
-      color: $green-900;
+      color: $green-500;
     }
     &:hover {
-      background-color: $green-800;
+      background-color: $green-400;
       color: $green-200;
       .badge-pill {
         background-color: $green-200;
-        color: $green-800;
+        color: $green-400;
       }
     }
 
     html.light & {
       background-color: $green-200;
-      color: $green-900;
+      color: $green-500;
       .badge-pill {
         color: $green-200;
-        background-color: $green-900;
+        background-color: $green-500;
       }
       &:hover {
         background-color: $green-300;
@@ -197,68 +197,68 @@
   }
 
   @mixin chip-yellow {
-    background-color: $yellow-900;
+    background-color: $yellow-500;
     color: $yellow-300;
     .badge-pill {
       background-color: $yellow-300;
-      color: $yellow-900;
+      color: $yellow-500;
     }
     &:hover {
-      background-color: $yellow-800;
+      background-color: $yellow-400;
       color: $yellow-200;
       .badge-pill {
         background-color: $yellow-200;
-        color: $yellow-800;
+        color: $yellow-400;
       }
     }
 
     html.light & {
       background-color: $yellow-200;
-      color: $yellow-900;
+      color: $yellow-500;
       .badge-pill {
         color: $yellow-200;
-        background-color: $yellow-900;
+        background-color: $yellow-500;
       }
       &:hover {
         background-color: $yellow-300;
-        color: $yellow-900;
+        color: $yellow-500;
         .badge-pill {
           color: $yellow-300;
-          background-color: $yellow-900;
+          background-color: $yellow-500;
         }
       }
     }
   }
 
   @mixin chip-blue {
-    background-color: $blue-900;
+    background-color: $blue-500;
     color: $blue-300;
     .badge-pill {
       background-color: $blue-300;
-      color: $blue-900;
+      color: $blue-500;
     }
     &:hover {
-      background-color: $blue-800;
+      background-color: $blue-400;
       color: $blue-200;
       .badge-pill {
         background-color: $blue-200;
-        color: $blue-800;
+        color: $blue-400;
       }
     }
 
     html.light & {
       background-color: $blue-200;
-      color: $blue-800;
+      color: $blue-400;
       .badge-pill {
         color: $blue-200;
-        background-color: $blue-800;
+        background-color: $blue-400;
       }
       &:hover {
         background-color: $blue-300;
-        color: $blue-900;
+        color: $blue-500;
         .badge-pill {
           color: $blue-300;
-          background-color: $blue-900;
+          background-color: $blue-500;
         }
       }
     }
@@ -299,34 +299,34 @@
   }
 
   @mixin chip-magenta {
-    background-color: $magenta-900;
+    background-color: $magenta-500;
     color: $magenta-300;
     .badge-pill {
       background-color: $magenta-300;
-      color: $magenta-900;
+      color: $magenta-500;
     }
     &:hover {
-      background-color: $magenta-800;
+      background-color: $magenta-400;
       color: $magenta-200;
       .badge-pill {
         background-color: $magenta-200;
-        color: $magenta-800;
+        color: $magenta-400;
       }
     }
 
     html.light & {
       background-color: $magenta-200;
-      color: $magenta-800;
+      color: $magenta-400;
       .badge-pill {
         color: $magenta-200;
-        background-color: $magenta-800;
+        background-color: $magenta-400;
       }
       &:hover {
         background-color: $magenta-300;
-        color: $magenta-900;
+        color: $magenta-500;
         .badge-pill {
           color: $magenta-300;
-          background-color: $magenta-900;
+          background-color: $magenta-500;
         }
       }
     }

styles/light/_light-theme.scss

@@ -39,7 +39,7 @@ h6,
   }
 
   &.green-500 {
-    color: $green-700;
+    color: $green-400;
     text-shadow: white 0 0 2px, white -1px -1px 2px, white 1px 1px 2px;
   }
 }
@@ -407,7 +407,7 @@ aside .card {
 
 // Status labels
 .status.not_enabled {
-  color: $yellow-700;
+  color: $yellow-400;
 }
 
 // Parent ("category") page in label landings
@@ -438,19 +438,19 @@ aside .card {
 // Callouts
 .devportal-callout.caution,
 .devportal-callout.注意 {
-  border-color: $yellow-700;
+  border-color: $yellow-400;
 
   >strong:first-child::before {
-    color: $yellow-700;
+    color: $yellow-400;
   }
 }
 
 .devportal-callout.tip,
 .devportal-callout.ヒント {
-  border-color: $green-600;
+  border-color: $green-300;
 
   >strong:first-child::before {
-    color: $green-600;
+    color: $green-300;
   }
 }
 
@@ -495,7 +495,7 @@ pre {
 
 .interactive-block {
   .breadcrumb-item.done a::after {
-    color: $green-900;
+    color: $green-500;
   }
 }
 
@@ -1023,10 +1023,10 @@ $placeholder-color: $gray-600;
     background-image: url(../img/events/event-check.svg);
     background-repeat: no-repeat;
     background-position: center;
-    background-color: $blue-purple-600;
+    background-color: $blue-purple-300;
     border-width: 2px;
     border-style: solid;
-    border-color: $blue-purple-600;
+    border-color: $blue-purple-300;
     border-radius: 4px;
   }