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

Comparing version 0.0.0-PR2226-20240530205740 to 0.0.0-PR2291-20240815214812

CHANGELOG.md

 # @khanacademy/wonder-blocks-tokens
 
-## 0.0.0-PR2226-20240530205740
+## 0.0.0-PR2291-20240815214812
 
 ### Major Changes
 
--   d1df7564: Use css-modules
+-   66a0e5c1: Add semanticColor tokens, remove deprecated Brand color primitives
 
+## 1.3.1
+
+### Patch Changes
+
+-   559e82d5: Update to build tooling, generating smaller output
+
 ## 1.3.0
@@ -10,0 +16,0 @@

dist/es/index.js

@@ -105,2 +105,3 @@ const border = {
 const white = "#ffffff";
+const eggplant = "#5f1e5c";
 const baseColors = {
@@ -122,2 +123,3 @@ blue: "#1865f2",
   white50: fade(white, 0.5),
+  white32: fade(white, 0.32),
   darkBlue: "#0b2149",
@@ -130,3 +132,2 @@ teal: "#14bf96",
 const color = _extends({}, baseColors, {
-  white32: fade(baseColors.white, 0.32),
   activeBlue: mix(baseColors.offBlack32, baseColors.blue),
@@ -144,7 +145,11 @@ fadedBlue: fadedColorWithWhite(baseColors.blue, 0.32),
   fadedGreen16: fadedColorWithWhite(baseColors.green, 0.16),
+  fadedGreen8: fadedColorWithWhite(baseColors.green, 0.08),
   fadedGold24: fadedColorWithWhite(baseColors.gold, 0.24),
   fadedGold16: fadedColorWithWhite(baseColors.gold, 0.16),
+  fadedGold8: fadedColorWithWhite(baseColors.gold, 0.08),
   fadedPurple24: fadedColorWithWhite(baseColors.purple, 0.24),
   fadedPurple16: fadedColorWithWhite(baseColors.purple, 0.16),
-  eggplant: "#5f1e5c",
+  fadedPurple8: fadedColorWithWhite(baseColors.purple, 0.08),
+  eggplant: eggplant,
+  fadedEggplant8: fadedColorWithWhite(eggplant, 0.08),
   fadedOffBlack64: fadedColorWithWhite(offBlack, 0.64),
@@ -201,2 +206,74 @@ fadedOffBlack50: fadedColorWithWhite(offBlack, 0.5),
 
-export { border, color, fade, font, mix, spacing };
+const semanticColor = {
+  action: {
+    primary: {
+      default: color.blue,
+      active: color.activeBlue
+    },
+    destructive: {
+      default: color.red,
+      active: color.activeRed
+    },
+    disabled: {
+      default: color.fadedOffBlack32,
+      secondary: color.offWhite
+    }
+  },
+  status: {
+    critical: {
+      background: color.fadedRed8,
+      foreground: color.red
+    },
+    warning: {
+      background: color.fadedGold8,
+      foreground: color.gold
+    },
+    success: {
+      background: color.fadedGreen8,
+      foreground: color.green
+    },
+    notice: {
+      background: color.fadedBlue8,
+      foreground: color.blue
+    },
+    neutral: {
+      background: color.fadedOffBlack8,
+      foreground: color.offBlack
+    }
+  },
+  surface: {
+    primary: color.white,
+    secondary: color.offWhite,
+    emphasis: color.blue,
+    inverse: color.darkBlue,
+    overlay: color.offBlack64
+  },
+  text: {
+    primary: color.offBlack,
+    secondary: color.fadedOffBlack64,
+    disabled: color.fadedOffBlack32,
+    inverse: color.white
+  },
+  border: {
+    primary: color.offBlack16,
+    subtle: color.offBlack8,
+    strong: color.offBlack50,
+    inverse: color.white
+  },
+  icon: {
+    primary: color.offBlack64,
+    secondary: color.offBlack,
+    inverse: color.white,
+    action: color.blue,
+    destructive: color.red
+  },
+  khanmigo: {
+    primary: color.eggplant,
+    secondary: color.fadedEggplant8
+  },
+  mastery: {
+    primary: color.purple
+  }
+};
+
+export { border, color, fade, font, mix, semanticColor, spacing };

dist/index.d.ts

@@ -5,11 +5,16 @@ import { border } from "./tokens/border";
 import { spacing } from "./tokens/spacing";
+import { semanticColor } from "./tokens/semantic-color";
 import { mix, fade } from "./util/utils";
 export { 
 /**
- * Core tokens for the Wonder Blocks design system.
+ * Primitive tokens for the Wonder Blocks design system.
  */
 border, color, font, spacing, 
 /**
+ * Semantic tokens.
+ */
+semanticColor, 
+/**
  * Utility functions for working with colors.
  */
 mix, fade, };

dist/index.js

@@ -109,2 +109,3 @@ 'use strict';
 const white = "#ffffff";
+const eggplant = "#5f1e5c";
 const baseColors = {
@@ -126,2 +127,3 @@ blue: "#1865f2",
   white50: fade(white, 0.5),
+  white32: fade(white, 0.32),
   darkBlue: "#0b2149",
@@ -134,3 +136,2 @@ teal: "#14bf96",
 const color = _extends({}, baseColors, {
-  white32: fade(baseColors.white, 0.32),
   activeBlue: mix(baseColors.offBlack32, baseColors.blue),
@@ -148,7 +149,11 @@ fadedBlue: fadedColorWithWhite(baseColors.blue, 0.32),
   fadedGreen16: fadedColorWithWhite(baseColors.green, 0.16),
+  fadedGreen8: fadedColorWithWhite(baseColors.green, 0.08),
   fadedGold24: fadedColorWithWhite(baseColors.gold, 0.24),
   fadedGold16: fadedColorWithWhite(baseColors.gold, 0.16),
+  fadedGold8: fadedColorWithWhite(baseColors.gold, 0.08),
   fadedPurple24: fadedColorWithWhite(baseColors.purple, 0.24),
   fadedPurple16: fadedColorWithWhite(baseColors.purple, 0.16),
-  eggplant: "#5f1e5c",
+  fadedPurple8: fadedColorWithWhite(baseColors.purple, 0.08),
+  eggplant: eggplant,
+  fadedEggplant8: fadedColorWithWhite(eggplant, 0.08),
   fadedOffBlack64: fadedColorWithWhite(offBlack, 0.64),
@@ -205,2 +210,74 @@ fadedOffBlack50: fadedColorWithWhite(offBlack, 0.5),
 
+const semanticColor = {
+  action: {
+    primary: {
+      default: color.blue,
+      active: color.activeBlue
+    },
+    destructive: {
+      default: color.red,
+      active: color.activeRed
+    },
+    disabled: {
+      default: color.fadedOffBlack32,
+      secondary: color.offWhite
+    }
+  },
+  status: {
+    critical: {
+      background: color.fadedRed8,
+      foreground: color.red
+    },
+    warning: {
+      background: color.fadedGold8,
+      foreground: color.gold
+    },
+    success: {
+      background: color.fadedGreen8,
+      foreground: color.green
+    },
+    notice: {
+      background: color.fadedBlue8,
+      foreground: color.blue
+    },
+    neutral: {
+      background: color.fadedOffBlack8,
+      foreground: color.offBlack
+    }
+  },
+  surface: {
+    primary: color.white,
+    secondary: color.offWhite,
+    emphasis: color.blue,
+    inverse: color.darkBlue,
+    overlay: color.offBlack64
+  },
+  text: {
+    primary: color.offBlack,
+    secondary: color.fadedOffBlack64,
+    disabled: color.fadedOffBlack32,
+    inverse: color.white
+  },
+  border: {
+    primary: color.offBlack16,
+    subtle: color.offBlack8,
+    strong: color.offBlack50,
+    inverse: color.white
+  },
+  icon: {
+    primary: color.offBlack64,
+    secondary: color.offBlack,
+    inverse: color.white,
+    action: color.blue,
+    destructive: color.red
+  },
+  khanmigo: {
+    primary: color.eggplant,
+    secondary: color.fadedEggplant8
+  },
+  mastery: {
+    primary: color.purple
+  }
+};
+
 exports.border = border;
@@ -211,2 +288,3 @@ exports.color = color;
 exports.mix = mix;
+exports.semanticColor = semanticColor;
 exports.spacing = spacing;

dist/tokens/color.d.ts

 export declare const color: {
-    white32: string;
     activeBlue: string;
@@ -15,7 +14,11 @@ fadedBlue: string;
     fadedGreen16: string;
+    fadedGreen8: string;
     fadedGold24: string;
     fadedGold16: string;
+    fadedGold8: string;
     fadedPurple24: string;
     fadedPurple16: string;
+    fadedPurple8: string;
     eggplant: string;
+    fadedEggplant8: string;
     fadedOffBlack64: string;
@@ -41,2 +44,3 @@ fadedOffBlack50: string;
     white50: string;
+    white32: string;
     darkBlue: string;
@@ -43,0 +47,0 @@ teal: string;

package.json

 {
     "name": "@khanacademy/wonder-blocks-tokens",
-    "version": "0.0.0-PR2226-20240530205740",
+    "version": "0.0.0-PR2291-20240815214812",
     "description": "Core primitive design tokens for Web Wonder Blocks",
-    "exports": {
-        ".": {
-            "import": "./dist/es/index.js",
-            "require": "./dist/index.js"
-        },
-        "./css/*": "./css/*"
-    },
     "main": "dist/index.js",
@@ -25,4 +18,4 @@ "module": "dist/es/index.js",
     "devDependencies": {
-        "@khanacademy/wb-dev-build-settings": "0.0.0-PR2226-20240530205740"
+        "@khanacademy/wb-dev-build-settings": "^1.0.1"
     }
 }

src/index.ts

@@ -0,1 +1,2 @@
+// primitive tokens
 import {border} from "./tokens/border";
@@ -6,2 +7,6 @@ import {color} from "./tokens/color";
 
+// semantic tokens
+import {semanticColor} from "./tokens/semantic-color";
+
+// utils
 import {mix, fade} from "./util/utils";
@@ -11,3 +16,3 @@
     /**
-     * Core tokens for the Wonder Blocks design system.
+     * Primitive tokens for the Wonder Blocks design system.
      */
@@ -19,2 +24,6 @@ border,
     /**
+     * Semantic tokens.
+     */
+    semanticColor,
+    /**
      * Utility functions for working with colors.
@@ -21,0 +30,0 @@ */

src/tokens/color.ts

@@ -5,2 +5,3 @@ import {fade, mix} from "../util/utils";
 const white = "#ffffff";
+const eggplant = "#5f1e5c";
 
@@ -25,2 +26,3 @@ type ColorType = {
     white50: string;
+    white32: string;
     // Brand
@@ -53,2 +55,3 @@ darkBlue: string;
     white50: fade(white, 0.5),
+    white32: fade(white, 0.32),
 
@@ -69,3 +72,2 @@ // Brand
     // Additional colors
-    white32: fade(baseColors.white, 0.32),
     // Blue shades
@@ -86,10 +88,14 @@ activeBlue: mix(baseColors.offBlack32, baseColors.blue),
     fadedGreen16: fadedColorWithWhite(baseColors.green, 0.16),
+    fadedGreen8: fadedColorWithWhite(baseColors.green, 0.08),
     // Gold shades
     fadedGold24: fadedColorWithWhite(baseColors.gold, 0.24),
     fadedGold16: fadedColorWithWhite(baseColors.gold, 0.16),
+    fadedGold8: fadedColorWithWhite(baseColors.gold, 0.08),
     // Purple shades
     fadedPurple24: fadedColorWithWhite(baseColors.purple, 0.24),
     fadedPurple16: fadedColorWithWhite(baseColors.purple, 0.16),
+    fadedPurple8: fadedColorWithWhite(baseColors.purple, 0.08),
     // Khanmigo
-    eggplant: "#5f1e5c",
+    eggplant: eggplant,
+    fadedEggplant8: fadedColorWithWhite(eggplant, 0.08),
     // Faded versions of offBlack
@@ -96,0 +102,0 @@ fadedOffBlack64: fadedColorWithWhite(offBlack, 0.64),

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

88916

increased by7.91%

Number of package files

22

increased by4.76%

Lines of code

1309

increased by28.97%

No dependency changes