@khanacademy/wonder-blocks-tokens 5.2.0 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-tokens
 
+## 7.0.0
+
+### Major Changes
+
+- e8ccf60: Refactor `border.radius` tokens to use new proposed structure:
+
+    | Current Token Name | New Token Name | Pixels (px) |
+    | ------------------ | -------------- | ----------- |
+    | `xSmall_2`         | `radius_010`   | 1px         |
+    | `small_3`          | `radius_040`   | 4px         |
+    | `medium_4`         | `radius_040`   | 4px         |
+    | `large_6`          | `radius_080`   | 8px         |
+    | `xLarge_12`        | `radius_120`   | 12px        |
+    | `full`             | `radius_full`  | 50%         |
+
+## 6.0.0
+
+### Major Changes
+
+- 24bf12f: Update sizing primitive tokens to use Base 10 rem units instead of Base 8 to work around minimum size bugs in browsers
+
 ## 5.2.0
 
 ### Minor Changes

package/dist/es/index.js

@@ -1,11 +1,45 @@
+const baseline = 10;
+function pxToRem(value) {
+  return `${value / baseline}rem`;
+}
+function remToPx(value) {
+  const num = parseFloat(value);
+  return `${Math.round(num * baseline)}px`;
+}
+const sizing = {
+  size_0: pxToRem(0),
+  size_010: pxToRem(1),
+  size_020: pxToRem(2),
+  size_040: pxToRem(4),
+  size_060: pxToRem(6),
+  size_080: pxToRem(8),
+  size_100: pxToRem(10),
+  size_120: pxToRem(12),
+  size_140: pxToRem(14),
+  size_160: pxToRem(16),
+  size_180: pxToRem(18),
+  size_200: pxToRem(20),
+  size_240: pxToRem(24),
+  size_280: pxToRem(28),
+  size_320: pxToRem(32),
+  size_360: pxToRem(36),
+  size_400: pxToRem(40),
+  size_480: pxToRem(48),
+  size_560: pxToRem(56),
+  size_640: pxToRem(64),
+  size_720: pxToRem(72),
+  size_800: pxToRem(80),
+  size_880: pxToRem(88),
+  size_960: pxToRem(96)
+};
+
 const border$1 = {
   radius: {
-    xSmall_2: 2,
-    small_3: 3,
-    medium_4: 4,
-    large_6: 6,
-    xLarge_12: 12,
-    full: "50%"
+    radius_0: remToPx(sizing.size_0),
+    radius_040: remToPx(sizing.size_040),
+    radius_080: remToPx(sizing.size_080),
+    radius_120: remToPx(sizing.size_120),
+    radius_full: "50%"
   },
   width: {
     none: 0,
@@ -180,34 +214,6 @@ 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,

package/dist/index.js

@@ -2,14 +2,48 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+const baseline = 10;
+function pxToRem(value) {
+  return `${value / baseline}rem`;
+}
+function remToPx(value) {
+  const num = parseFloat(value);
+  return `${Math.round(num * baseline)}px`;
+}
+const sizing = {
+  size_0: pxToRem(0),
+  size_010: pxToRem(1),
+  size_020: pxToRem(2),
+  size_040: pxToRem(4),
+  size_060: pxToRem(6),
+  size_080: pxToRem(8),
+  size_100: pxToRem(10),
+  size_120: pxToRem(12),
+  size_140: pxToRem(14),
+  size_160: pxToRem(16),
+  size_180: pxToRem(18),
+  size_200: pxToRem(20),
+  size_240: pxToRem(24),
+  size_280: pxToRem(28),
+  size_320: pxToRem(32),
+  size_360: pxToRem(36),
+  size_400: pxToRem(40),
+  size_480: pxToRem(48),
+  size_560: pxToRem(56),
+  size_640: pxToRem(64),
+  size_720: pxToRem(72),
+  size_800: pxToRem(80),
+  size_880: pxToRem(88),
+  size_960: pxToRem(96)
+};
+
 const border$1 = {
   radius: {
-    xSmall_2: 2,
-    small_3: 3,
-    medium_4: 4,
-    large_6: 6,
-    xLarge_12: 12,
-    full: "50%"
+    radius_0: remToPx(sizing.size_0),
+    radius_040: remToPx(sizing.size_040),
+    radius_080: remToPx(sizing.size_080),
+    radius_120: remToPx(sizing.size_120),
+    radius_full: "50%"
   },
   width: {
     none: 0,
@@ -184,34 +218,6 @@ 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,

package/dist/tokens/border.d.ts

@@ -1,11 +1,17 @@
 export declare const border: {
+    /**
+     * Corner radius values for borders.
+     *
+     * NOTE: We use fixed values for the corner radius instead of using the
+     * regular `spacing` tokens to ensure that the corner radius is consistent
+     * across different root font sizes.
+     */
     radius: {
-        xSmall_2: number;
-        small_3: number;
-        medium_4: number;
-        large_6: number;
-        xLarge_12: number;
-        full: string;
+        radius_0: string;
+        radius_040: string;
+        radius_080: string;
+        radius_120: string;
+        radius_full: string;
     };
     width: {
         none: number;

package/dist/tokens/sizing.d.ts

@@ -1,3 +1,9 @@
+/**
+ * Converts a rem value to a number (px).
+ * @param value The rem value to convert (includes the unit).
+ * @returns A string with the px value.
+ */
+export declare function remToPx(value: string): string;
 /**
  * Tokens that define the sizing of elements. These values are expressed in
  * `rem` units.
@@ -11,24 +17,27 @@
  */
 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_010: string;
+    readonly size_020: string;
+    readonly size_040: string;
+    readonly size_060: string;
+    readonly size_080: string;
     readonly size_100: string;
-    readonly size_125: string;
-    readonly size_150: string;
+    readonly size_120: string;
+    readonly size_140: string;
+    readonly size_160: string;
+    readonly size_180: string;
     readonly size_200: string;
-    readonly size_225: string;
-    readonly size_250: string;
-    readonly size_300: string;
+    readonly size_240: string;
+    readonly size_280: string;
+    readonly size_320: string;
+    readonly size_360: string;
     readonly size_400: string;
-    readonly size_500: string;
-    readonly size_600: string;
-    readonly size_700: string;
+    readonly size_480: string;
+    readonly size_560: string;
+    readonly size_640: string;
+    readonly size_720: string;
     readonly size_800: string;
-    readonly size_900: string;
-    readonly size_1000: string;
-    readonly size_1100: string;
-    readonly size_1200: string;
+    readonly size_880: string;
+    readonly size_960: string;
 };

package/package.json

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