@khanacademy/wonder-blocks-tokens 4.2.1 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @khanacademy/wonder-blocks-tokens
 
+## 5.1.0
+
+### Minor Changes
+
+- 507cf2f: Adds `fadedOffBlack72` color primitive token and sets the `semanticColor.text.secondary` token to this primitive. The slightly darker gray has better color contrast on a variety of backgrounds, including the fadedBlue8 background
+
+## 5.0.0
+
+### Major Changes
+
+- 5655b9f: Rename `semanticColor.border.focus` to `semanticColor.focus.outer`, and add `focus.inner`.
+- 8f53293: Rename action tokens: `filled` -> `primary`, `outlined` -> `secondary`.
+- 051f0f8: Remove `action.disabled` object in favor of `action.primary.disabled` and `action.secondary.disabled`
+
+### Minor Changes
+
+- e1b78db: Add sizing primitive tokens to support the new tokens with rem units that will be used by the thunderblocks/classroom theme
+
+### Patch Changes
+
+- 5655b9f: Switch to use `focus.outer` semanticColor token
+- 051f0f8: Rework action.disabled tokens to include properties per kind (border, background, foreground).
+
 ## 4.2.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -141,6 +141,7 @@ const color = _extends({}, baseColors, {
   fadedPurple8: fadedColorWithWhite(baseColors.purple, 0.08),
   eggplant: eggplant,
   fadedEggplant8: fadedColorWithWhite(eggplant, 0.08),
+  fadedOffBlack72: fadedColorWithWhite(offBlack, 0.72),
   fadedOffBlack64: fadedColorWithWhite(offBlack, 0.64),
   fadedOffBlack50: fadedColorWithWhite(offBlack, 0.5),
   fadedOffBlack32: fadedColorWithWhite(offBlack, 0.32),
@@ -179,6 +180,34 @@ const font = {
   }
 };
 
+const baseline = 8;
+function pxToRem(value) {
+  return `${value / baseline}rem`;
+}
+const sizing = {
+  size_0: pxToRem(0),
+  size_0125: pxToRem(1),
+  size_025: pxToRem(2),
+  size_050: pxToRem(4),
+  size_075: pxToRem(6),
+  size_100: pxToRem(8),
+  size_125: pxToRem(10),
+  size_150: pxToRem(12),
+  size_200: pxToRem(16),
+  size_225: pxToRem(18),
+  size_250: pxToRem(20),
+  size_300: pxToRem(24),
+  size_400: pxToRem(32),
+  size_500: pxToRem(40),
+  size_600: pxToRem(48),
+  size_700: pxToRem(56),
+  size_800: pxToRem(64),
+  size_900: pxToRem(72),
+  size_1000: pxToRem(80),
+  size_1100: pxToRem(88),
+  size_1200: pxToRem(96)
+};
+
 const spacing = {
   xxxxSmall_2: 2,
   xxxSmall_4: 4,
@@ -223,12 +252,11 @@ const border = {
   primary: color.fadedOffBlack16,
   subtle: color.fadedOffBlack8,
   strong: color.fadedOffBlack50,
-  focus: color.blue,
   inverse: color.white
 };
 const semanticColor = {
   action: {
-    filled: {
+    primary: {
       progressive: {
         default: {
           border: "transparent",
@@ -262,9 +290,14 @@ const semanticColor = {
           background: color.activeRed,
           foreground: color.white
         }
+      },
+      disabled: {
+        border: color.fadedOffBlack32,
+        background: color.fadedOffBlack32,
+        foreground: color.offWhite
       }
     },
-    outlined: {
+    secondary: {
       progressive: {
         default: {
           border: border.strong,
@@ -298,11 +331,12 @@ const semanticColor = {
           background: color.fadedRed,
           foreground: color.activeRed
         }
+      },
+      disabled: {
+        border: border.primary,
+        background: color.offWhite,
+        foreground: color.fadedOffBlack32
       }
-    },
-    disabled: {
-      default: color.fadedOffBlack32,
-      secondary: color.offWhite
     }
   },
   status: {
@@ -336,11 +370,15 @@ const semanticColor = {
   },
   text: {
     primary: color.offBlack,
-    secondary: color.fadedOffBlack64,
+    secondary: color.fadedOffBlack72,
     disabled: color.fadedOffBlack32,
     inverse: color.white
   },
   border: border,
+  focus: {
+    outer: color.blue,
+    inner: color.white
+  },
   icon: {
     primary: color.fadedOffBlack64,
     secondary: color.offBlack,
@@ -358,4 +396,4 @@ const semanticColor = {
   }
 };
 
-export { border$1 as border, breakpoint, color, fade, font, mix, semanticColor, spacing };
+export { border$1 as border, breakpoint, color, fade, font, mix, semanticColor, sizing, spacing };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import { border } from "./tokens/border";
 import { color } from "./tokens/color";
 import { font } from "./tokens/font";
+import { sizing } from "./tokens/sizing";
 import { spacing } from "./tokens/spacing";
 import { breakpoint } from "./tokens/media-queries";
 import { semanticColor } from "./tokens/semantic-color";
@@ -9,7 +10,7 @@ export {
 /**
  * Primitive tokens for the Wonder Blocks design system.
  */
-border, color, font, spacing, 
+border, color, font, sizing, spacing, 
 /**
  * Media query breakpoints.
  */

package/dist/index.js

@@ -145,6 +145,7 @@ const color = _extends({}, baseColors, {
   fadedPurple8: fadedColorWithWhite(baseColors.purple, 0.08),
   eggplant: eggplant,
   fadedEggplant8: fadedColorWithWhite(eggplant, 0.08),
+  fadedOffBlack72: fadedColorWithWhite(offBlack, 0.72),
   fadedOffBlack64: fadedColorWithWhite(offBlack, 0.64),
   fadedOffBlack50: fadedColorWithWhite(offBlack, 0.5),
   fadedOffBlack32: fadedColorWithWhite(offBlack, 0.32),
@@ -183,6 +184,34 @@ const font = {
   }
 };
 
+const baseline = 8;
+function pxToRem(value) {
+  return `${value / baseline}rem`;
+}
+const sizing = {
+  size_0: pxToRem(0),
+  size_0125: pxToRem(1),
+  size_025: pxToRem(2),
+  size_050: pxToRem(4),
+  size_075: pxToRem(6),
+  size_100: pxToRem(8),
+  size_125: pxToRem(10),
+  size_150: pxToRem(12),
+  size_200: pxToRem(16),
+  size_225: pxToRem(18),
+  size_250: pxToRem(20),
+  size_300: pxToRem(24),
+  size_400: pxToRem(32),
+  size_500: pxToRem(40),
+  size_600: pxToRem(48),
+  size_700: pxToRem(56),
+  size_800: pxToRem(64),
+  size_900: pxToRem(72),
+  size_1000: pxToRem(80),
+  size_1100: pxToRem(88),
+  size_1200: pxToRem(96)
+};
+
 const spacing = {
   xxxxSmall_2: 2,
   xxxSmall_4: 4,
@@ -227,12 +256,11 @@ const border = {
   primary: color.fadedOffBlack16,
   subtle: color.fadedOffBlack8,
   strong: color.fadedOffBlack50,
-  focus: color.blue,
   inverse: color.white
 };
 const semanticColor = {
   action: {
-    filled: {
+    primary: {
       progressive: {
         default: {
           border: "transparent",
@@ -266,9 +294,14 @@ const semanticColor = {
           background: color.activeRed,
           foreground: color.white
         }
+      },
+      disabled: {
+        border: color.fadedOffBlack32,
+        background: color.fadedOffBlack32,
+        foreground: color.offWhite
       }
     },
-    outlined: {
+    secondary: {
       progressive: {
         default: {
           border: border.strong,
@@ -302,11 +335,12 @@ const semanticColor = {
           background: color.fadedRed,
           foreground: color.activeRed
         }
+      },
+      disabled: {
+        border: border.primary,
+        background: color.offWhite,
+        foreground: color.fadedOffBlack32
       }
-    },
-    disabled: {
-      default: color.fadedOffBlack32,
-      secondary: color.offWhite
     }
   },
   status: {
@@ -340,11 +374,15 @@ const semanticColor = {
   },
   text: {
     primary: color.offBlack,
-    secondary: color.fadedOffBlack64,
+    secondary: color.fadedOffBlack72,
     disabled: color.fadedOffBlack32,
     inverse: color.white
   },
   border: border,
+  focus: {
+    outer: color.blue,
+    inner: color.white
+  },
   icon: {
     primary: color.fadedOffBlack64,
     secondary: color.offBlack,
@@ -369,4 +407,5 @@ exports.fade = fade;
 exports.font = font;
 exports.mix = mix;
 exports.semanticColor = semanticColor;
+exports.sizing = sizing;
 exports.spacing = spacing;

package/dist/tokens/color.d.ts

@@ -20,6 +20,7 @@ export declare const color: {
     fadedPurple8: string;
     eggplant: string;
     fadedEggplant8: string;
+    fadedOffBlack72: string;
     fadedOffBlack64: string;
     fadedOffBlack50: string;
     fadedOffBlack32: string;

package/dist/tokens/semantic-color.d.ts

@@ -4,7 +4,7 @@ export declare const semanticColor: {
      * of interaction.
      */
     action: {
-        filled: {
+        primary: {
             progressive: {
                 default: {
                     border: string;
@@ -39,8 +39,13 @@ export declare const semanticColor: {
                     foreground: string;
                 };
             };
+            disabled: {
+                border: string;
+                background: string;
+                foreground: string;
+            };
         };
-        outlined: {
+        secondary: {
             progressive: {
                 default: {
                     border: string;
@@ -75,10 +80,11 @@ export declare const semanticColor: {
                     foreground: string;
                 };
             };
-        };
-        disabled: {
-            default: string;
-            secondary: string;
+            disabled: {
+                border: string;
+                background: string;
+                foreground: string;
+            };
         };
     };
     /**
@@ -137,9 +143,12 @@ export declare const semanticColor: {
         primary: string;
         subtle: string;
         strong: string;
-        focus: string;
         inverse: string;
     };
+    focus: {
+        outer: string;
+        inner: string;
+    };
     /**
      * Default icon colors that change in context (like actions).
      */

package/dist/tokens/sizing.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Tokens that define the sizing of elements. These values are expressed in
+ * `rem` units.
+ *
+ * These tokens are multiples of 8px, the baseline for the design system.
+ *
+ * These tokens can be used for:
+ * - Margin and padding
+ * - Component sizes
+ * - Typography
+ */
+export declare const sizing: {
+    readonly size_0: string;
+    readonly size_0125: string;
+    readonly size_025: string;
+    readonly size_050: string;
+    readonly size_075: string;
+    readonly size_100: string;
+    readonly size_125: string;
+    readonly size_150: string;
+    readonly size_200: string;
+    readonly size_225: string;
+    readonly size_250: string;
+    readonly size_300: string;
+    readonly size_400: string;
+    readonly size_500: string;
+    readonly size_600: string;
+    readonly size_700: string;
+    readonly size_800: string;
+    readonly size_900: string;
+    readonly size_1000: string;
+    readonly size_1100: string;
+    readonly size_1200: string;
+};

package/dist/tokens/spacing.d.ts

@@ -1,3 +1,7 @@
+/**
+ * NOTE: These tokens are going to be deprecated in favor of the new `sizing`
+ * tokens.
+ */
 export declare const spacing: {
     readonly xxxxSmall_2: 2;
     readonly xxxSmall_4: 4;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tokens",
-  "version": "4.2.1",
+  "version": "5.1.0",
   "description": "Core primitive design tokens for Web Wonder Blocks",
   "main": "dist/index.js",
   "module": "dist/es/index.js",