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

Comparing version 3.0.1 to 4.0.0

CHANGELOG.md

 # @khanacademy/wonder-blocks-tokens
 
+## 4.0.0
+
+### 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
@@ -4,0 +14,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": "3.0.1",
+  "version": "4.0.0",
   "description": "Core primitive design tokens for Web Wonder Blocks",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

No alert changes

Improved metrics

Total package byte prevSize

32473

increased by20.48%

Lines of code

1054

increased by22.56%

No dependency changes