@khanacademy/wonder-blocks-tokens - npm Package Compare versions

Comparing version 0.0.0-PR2354-20241105235447 to 0.0.0-PR2373-20250121234927

CHANGELOG.md

 # @khanacademy/wonder-blocks-tokens
 
-## 0.0.0-PR2354-20241105235447
+## 0.0.0-PR2373-20250121234927
 
+### Major Changes
+
+-   0de25cd8: - Reworked semanticColor actions to use a new structure. Every `action` now includes `default`, `hover` and `press` states, and each state includes `border`, `background` and `foreground` tokens.
+
+    -   Renamed `primary` to `progressive`.
+
+    -   Added more categories to actions: `filled` and `outline`.
+
+## 3.0.1
+
+### Patch Changes
+
+-   11a0f5c6: No functional changes. Adding prepublishOnly script.
+
+## 3.0.0
+
+### Major Changes
+
+-   e6abdd17: Upgrade to React 18
+
+## 2.1.0
+
 ### Minor Changes
@@ -6,0 +28,0 @@

dist/es/index.js

@@ -1,2 +0,2 @@
-const border = {
+const border$1 = {
   radius: {
@@ -227,11 +227,81 @@ xSmall_2: 2,
 
+const border = {
+  primary: color.fadedOffBlack16,
+  subtle: color.fadedOffBlack8,
+  strong: color.fadedOffBlack50,
+  inverse: color.white
+};
 const semanticColor = {
   action: {
-    primary: {
-      default: color.blue,
-      active: color.activeBlue
+    filled: {
+      progressive: {
+        default: {
+          border: "transparent",
+          background: color.blue,
+          foreground: color.white
+        },
+        hover: {
+          border: color.blue,
+          background: color.blue,
+          foreground: color.white
+        },
+        press: {
+          border: color.activeBlue,
+          background: color.activeBlue,
+          foreground: color.white
+        }
+      },
+      destructive: {
+        default: {
+          border: "transparent",
+          background: color.red,
+          foreground: color.white
+        },
+        hover: {
+          border: color.red,
+          background: color.red,
+          foreground: color.white
+        },
+        press: {
+          border: color.activeRed,
+          background: color.activeRed,
+          foreground: color.white
+        }
+      }
     },
-    destructive: {
-      default: color.red,
-      active: color.activeRed
+    outlined: {
+      progressive: {
+        default: {
+          border: border.strong,
+          background: color.white,
+          foreground: color.blue
+        },
+        hover: {
+          border: color.blue,
+          background: color.white,
+          foreground: color.blue
+        },
+        press: {
+          border: color.activeBlue,
+          background: color.fadedBlue,
+          foreground: color.activeBlue
+        }
+      },
+      destructive: {
+        default: {
+          border: border.strong,
+          background: color.white,
+          foreground: color.red
+        },
+        hover: {
+          border: color.red,
+          background: color.white,
+          foreground: color.red
+        },
+        press: {
+          border: color.activeRed,
+          background: color.fadedRed,
+          foreground: color.activeRed
+        }
+      }
     },
@@ -278,8 +348,3 @@ disabled: {
   },
-  border: {
-    primary: color.fadedOffBlack16,
-    subtle: color.fadedOffBlack8,
-    strong: color.fadedOffBlack50,
-    inverse: color.white
-  },
+  border: border,
   icon: {
@@ -301,2 +366,2 @@ primary: color.fadedOffBlack64,
 
-export { border, breakpoint, color, fade, font, mix, semanticColor, spacing };
+export { border$1 as border, breakpoint, color, fade, font, mix, semanticColor, spacing };

dist/index.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const border = {
+const border$1 = {
   radius: {
@@ -232,11 +232,81 @@ xSmall_2: 2,
 
+const border = {
+  primary: color.fadedOffBlack16,
+  subtle: color.fadedOffBlack8,
+  strong: color.fadedOffBlack50,
+  inverse: color.white
+};
 const semanticColor = {
   action: {
-    primary: {
-      default: color.blue,
-      active: color.activeBlue
+    filled: {
+      progressive: {
+        default: {
+          border: "transparent",
+          background: color.blue,
+          foreground: color.white
+        },
+        hover: {
+          border: color.blue,
+          background: color.blue,
+          foreground: color.white
+        },
+        press: {
+          border: color.activeBlue,
+          background: color.activeBlue,
+          foreground: color.white
+        }
+      },
+      destructive: {
+        default: {
+          border: "transparent",
+          background: color.red,
+          foreground: color.white
+        },
+        hover: {
+          border: color.red,
+          background: color.red,
+          foreground: color.white
+        },
+        press: {
+          border: color.activeRed,
+          background: color.activeRed,
+          foreground: color.white
+        }
+      }
     },
-    destructive: {
-      default: color.red,
-      active: color.activeRed
+    outlined: {
+      progressive: {
+        default: {
+          border: border.strong,
+          background: color.white,
+          foreground: color.blue
+        },
+        hover: {
+          border: color.blue,
+          background: color.white,
+          foreground: color.blue
+        },
+        press: {
+          border: color.activeBlue,
+          background: color.fadedBlue,
+          foreground: color.activeBlue
+        }
+      },
+      destructive: {
+        default: {
+          border: border.strong,
+          background: color.white,
+          foreground: color.red
+        },
+        hover: {
+          border: color.red,
+          background: color.white,
+          foreground: color.red
+        },
+        press: {
+          border: color.activeRed,
+          background: color.fadedRed,
+          foreground: color.activeRed
+        }
+      }
     },
@@ -283,8 +353,3 @@ disabled: {
   },
-  border: {
-    primary: color.fadedOffBlack16,
-    subtle: color.fadedOffBlack8,
-    strong: color.fadedOffBlack50,
-    inverse: color.white
-  },
+  border: border,
   icon: {
@@ -306,3 +371,3 @@ primary: color.fadedOffBlack64,
 
-exports.border = border;
+exports.border = border$1;
 exports.breakpoint = breakpoint;
@@ -309,0 +374,0 @@ exports.color = color;

dist/tokens/semantic-color.d.ts

@@ -7,9 +7,73 @@ export declare const semanticColor: {
     action: {
-        primary: {
-            default: string;
-            active: string;
+        filled: {
+            progressive: {
+                default: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                hover: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                press: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+            };
+            destructive: {
+                default: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                hover: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                press: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+            };
         };
-        destructive: {
-            default: string;
-            active: string;
+        outlined: {
+            progressive: {
+                default: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                hover: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                press: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+            };
+            destructive: {
+                default: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                hover: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                press: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+            };
         };
@@ -16,0 +80,0 @@ disabled: {

package.json

 {
   "name": "@khanacademy/wonder-blocks-tokens",
-  "version": "0.0.0-PR2354-20241105235447",
+  "version": "0.0.0-PR2373-20250121234927",
   "description": "Core primitive design tokens for Web Wonder Blocks",
@@ -9,3 +9,4 @@ "main": "dist/index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "prepublishOnly": "../../utils/publish/package-pre-publish-check.sh"
   },
@@ -19,4 +20,4 @@ "author": "",
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "^1.0.1"
+    "@khanacademy/wb-dev-build-settings": "^2.0.0"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

32517

increased by21.5%

Lines of code

1054

increased by22.56%

No dependency changes