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

Comparing version 0.0.0-PR2180-20240205163335 to 0.0.0-PR2189-20240227162840

CHANGELOG.md

 # @khanacademy/wonder-blocks-tokens
 
-## 0.0.0-PR2180-20240205163335
+## 0.0.0-PR2189-20240227162840
 
+### Minor Changes
+
+-   ceb212f1: Add new shades of existing colors (24%).
+
+## 1.0.0
+
 ### Major Changes
 
--   2c228e82: Mark wb-tokens as public (first official release)
+-   e83f8991: Mark wb-tokens as public (first official release)
 
@@ -9,0 +15,0 @@ ## 0.2.0

dist/es/index.js

 export { default as spacing } from '@khanacademy/wonder-blocks-spacing';
-import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
+import Color, { fade, mix } from '@khanacademy/wonder-blocks-color';
 
@@ -36,15 +36,21 @@ const border = {
 
+const fadedColorWithWhite = (color, alpha) => mix(fade(color, alpha), Color.white);
 const color = _extends({}, Color, {
+  white32: fade(Color.white, 0.32),
   activeBlue: mix(Color.offBlack32, Color.blue),
-  fadedBlue: mix(fade(Color.blue, 0.32), Color.white),
-  fadedBlue24: fade(Color.blue, 0.24),
-  fadedBlue16: fade(Color.blue, 0.16),
-  fadedBlue8: fade(Color.blue, 0.08),
+  fadedBlue: fadedColorWithWhite(Color.blue, 0.32),
+  fadedBlue24: fadedColorWithWhite(Color.blue, 0.24),
+  fadedBlue16: fadedColorWithWhite(Color.blue, 0.16),
+  fadedBlue8: fadedColorWithWhite(Color.blue, 0.08),
   activeRed: mix(Color.offBlack32, Color.red),
-  fadedRed: mix(fade(Color.red, 0.32), Color.white),
-  fadedRed16: fade(Color.red, 0.16),
-  fadedRed8: fade(Color.red, 0.08),
-  fadedGreen16: fade(Color.green, 0.16),
-  fadedGold16: fade(Color.gold, 0.16),
-  white32: fade(Color.white, 0.32),
+  fadedRed: fadedColorWithWhite(Color.red, 0.32),
+  fadedRed24: fadedColorWithWhite(Color.red, 0.24),
+  fadedRed16: fadedColorWithWhite(Color.red, 0.16),
+  fadedRed8: fadedColorWithWhite(Color.red, 0.08),
+  fadedGreen24: fadedColorWithWhite(Color.green, 0.24),
+  fadedGreen16: fadedColorWithWhite(Color.green, 0.16),
+  fadedGold24: fadedColorWithWhite(Color.gold, 0.24),
+  fadedGold16: fadedColorWithWhite(Color.gold, 0.16),
+  fadedPurple24: fadedColorWithWhite(Color.purple, 0.24),
+  fadedPurple16: fadedColorWithWhite(Color.purple, 0.16),
   eggplant: "#5f1e5c"
@@ -51,0 +57,0 @@ });

dist/index.js

@@ -45,15 +45,21 @@ 'use strict';
 
+const fadedColorWithWhite = (color, alpha) => Color.mix(Color.fade(color, alpha), Color__default["default"].white);
 const color = _extends({}, Color__default["default"], {
+  white32: Color.fade(Color__default["default"].white, 0.32),
   activeBlue: Color.mix(Color__default["default"].offBlack32, Color__default["default"].blue),
-  fadedBlue: Color.mix(Color.fade(Color__default["default"].blue, 0.32), Color__default["default"].white),
-  fadedBlue24: Color.fade(Color__default["default"].blue, 0.24),
-  fadedBlue16: Color.fade(Color__default["default"].blue, 0.16),
-  fadedBlue8: Color.fade(Color__default["default"].blue, 0.08),
+  fadedBlue: fadedColorWithWhite(Color__default["default"].blue, 0.32),
+  fadedBlue24: fadedColorWithWhite(Color__default["default"].blue, 0.24),
+  fadedBlue16: fadedColorWithWhite(Color__default["default"].blue, 0.16),
+  fadedBlue8: fadedColorWithWhite(Color__default["default"].blue, 0.08),
   activeRed: Color.mix(Color__default["default"].offBlack32, Color__default["default"].red),
-  fadedRed: Color.mix(Color.fade(Color__default["default"].red, 0.32), Color__default["default"].white),
-  fadedRed16: Color.fade(Color__default["default"].red, 0.16),
-  fadedRed8: Color.fade(Color__default["default"].red, 0.08),
-  fadedGreen16: Color.fade(Color__default["default"].green, 0.16),
-  fadedGold16: Color.fade(Color__default["default"].gold, 0.16),
-  white32: Color.fade(Color__default["default"].white, 0.32),
+  fadedRed: fadedColorWithWhite(Color__default["default"].red, 0.32),
+  fadedRed24: fadedColorWithWhite(Color__default["default"].red, 0.24),
+  fadedRed16: fadedColorWithWhite(Color__default["default"].red, 0.16),
+  fadedRed8: fadedColorWithWhite(Color__default["default"].red, 0.08),
+  fadedGreen24: fadedColorWithWhite(Color__default["default"].green, 0.24),
+  fadedGreen16: fadedColorWithWhite(Color__default["default"].green, 0.16),
+  fadedGold24: fadedColorWithWhite(Color__default["default"].gold, 0.24),
+  fadedGold16: fadedColorWithWhite(Color__default["default"].gold, 0.16),
+  fadedPurple24: fadedColorWithWhite(Color__default["default"].purple, 0.24),
+  fadedPurple16: fadedColorWithWhite(Color__default["default"].purple, 0.16),
   eggplant: "#5f1e5c"
@@ -60,0 +66,0 @@ });

dist/tokens/color.d.ts

 export declare const color: {
+    white32: string;
     activeBlue: string;
@@ -9,7 +10,11 @@ fadedBlue: string;
     fadedRed: string;
+    fadedRed24: string;
     fadedRed16: string;
     fadedRed8: string;
+    fadedGreen24: string;
     fadedGreen16: string;
+    fadedGold24: string;
     fadedGold16: string;
-    white32: string;
+    fadedPurple24: string;
+    fadedPurple16: string;
     eggplant: string;
@@ -16,0 +21,0 @@ blue: string;

package.json

 {
     "name": "@khanacademy/wonder-blocks-tokens",
-    "version": "0.0.0-PR2180-20240205163335",
+    "version": "0.0.0-PR2189-20240227162840",
     "description": "Core primitive design tokens for Web Wonder Blocks",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/tokens/color.ts

 // TODO(WB-1642): Move wonder-blocks-color to tokens
 import Color, {fade, mix} from "@khanacademy/wonder-blocks-color";
 
+const fadedColorWithWhite = (color: string, alpha: number) =>
+    mix(fade(color, alpha), Color.white);
+
 export const color = {
     // Wonder Blocks base colors
     ...Color,
-    // New colors
+    // Additional colors
+    white32: fade(Color.white, 0.32),
+    // Blue shades
     activeBlue: mix(Color.offBlack32, Color.blue),
-    fadedBlue: mix(fade(Color.blue, 0.32), Color.white),
-    fadedBlue24: fade(Color.blue, 0.24),
-    fadedBlue16: fade(Color.blue, 0.16),
-    fadedBlue8: fade(Color.blue, 0.08),
+    fadedBlue: fadedColorWithWhite(Color.blue, 0.32),
+    fadedBlue24: fadedColorWithWhite(Color.blue, 0.24),
+    fadedBlue16: fadedColorWithWhite(Color.blue, 0.16),
+    fadedBlue8: fadedColorWithWhite(Color.blue, 0.08),
+    // Red shades
     activeRed: mix(Color.offBlack32, Color.red),
-    fadedRed: mix(fade(Color.red, 0.32), Color.white),
-    fadedRed16: fade(Color.red, 0.16),
-    fadedRed8: fade(Color.red, 0.08),
-    fadedGreen16: fade(Color.green, 0.16),
-    fadedGold16: fade(Color.gold, 0.16),
-    // Additional colors (e.g. for use in other themes)
+    fadedRed: fadedColorWithWhite(Color.red, 0.32),
+    fadedRed24: fadedColorWithWhite(Color.red, 0.24),
+    fadedRed16: fadedColorWithWhite(Color.red, 0.16),
+    fadedRed8: fadedColorWithWhite(Color.red, 0.08),
+    // Green shades
+    fadedGreen24: fadedColorWithWhite(Color.green, 0.24),
+    fadedGreen16: fadedColorWithWhite(Color.green, 0.16),
+    // Gold shades
+    fadedGold24: fadedColorWithWhite(Color.gold, 0.24),
+    fadedGold16: fadedColorWithWhite(Color.gold, 0.16),
+    // Purple shades
+    fadedPurple24: fadedColorWithWhite(Color.purple, 0.24),
+    fadedPurple16: fadedColorWithWhite(Color.purple, 0.16),
     // Khanmigo
-    white32: fade(Color.white, 0.32),
     eggplant: "#5f1e5c",
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59130

increased by2.96%

Lines of code

377

increased by8.02%

No dependency changes