@khanacademy/wonder-blocks-tokens 7.0.0 → 9.0.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @khanacademy/wonder-blocks-tokens
 
+## 9.0.0
+
+### Major Changes
+
+- 7bbf311: Replaces `semanticColor` values with references to css variables. Creates a build step to convert semanticColor tokens to css variables that can be consumed via CSS imports.
+
+### Minor Changes
+
+- 2656fd4: Export `border` and `sizing` as CSS variables. Map JS tokens to css var counterparts
+- 7f79943: Update build script to use the new data-wb-theme attribute to generate styles.css. Fixes vite.config to allow importing css files in Storybbok
+
+### Patch Changes
+
+- 6018552: Export TS types correctly in package.json so consumers can use them correctly
+- Updated dependencies [7f79943]
+- Updated dependencies [7bbf311]
+    - @khanacademy/wonder-blocks-theming@3.3.0
+
+## 8.0.0
+
+### Major Changes
+
+- e63adea: Updated `border.width` tokens to use new structure:
+
+    | Current Token Name | New Token Name | Pixels (px) |
+    | ------------------ | -------------- | ----------- |
+    | `hairline`         | `thin`         | 1px         |
+    | `thin`             | `medium`       | 2px         |
+
 ## 7.0.0
 
 ### Major Changes

package/dist/build/generate-css-variables.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env -S node -r @swc-node/register
+export {};

package/dist/css/index.css

@@ -0,0 +1 @@
+:root {--wb-border-radius-radius_0: 0px;--wb-border-radius-radius_040: 4px;--wb-border-radius-radius_080: 8px;--wb-border-radius-radius_120: 12px;--wb-border-radius-radius_full: 50%;--wb-border-width-none: 0px;--wb-border-width-thin: 1px;--wb-border-width-medium: 2px;--wb-border-width-thick: 4px;--wb-semanticColor-action-primary-progressive-default-border: transparent;--wb-semanticColor-action-primary-progressive-default-background: #1865f2;--wb-semanticColor-action-primary-progressive-default-foreground: #ffffff;--wb-semanticColor-action-primary-progressive-hover-border: #1865f2;--wb-semanticColor-action-primary-progressive-hover-background: #1865f2;--wb-semanticColor-action-primary-progressive-hover-foreground: #ffffff;--wb-semanticColor-action-primary-progressive-press-border: #1b50b3;--wb-semanticColor-action-primary-progressive-press-background: #1b50b3;--wb-semanticColor-action-primary-progressive-press-foreground: #ffffff;--wb-semanticColor-action-primary-destructive-default-border: transparent;--wb-semanticColor-action-primary-destructive-default-background: #d92916;--wb-semanticColor-action-primary-destructive-default-foreground: #ffffff;--wb-semanticColor-action-primary-destructive-hover-border: #d92916;--wb-semanticColor-action-primary-destructive-hover-background: #d92916;--wb-semanticColor-action-primary-destructive-hover-foreground: #ffffff;--wb-semanticColor-action-primary-destructive-press-border: #9e271d;--wb-semanticColor-action-primary-destructive-press-background: #9e271d;--wb-semanticColor-action-primary-destructive-press-foreground: #ffffff;--wb-semanticColor-action-primary-neutral-default-border: transparent;--wb-semanticColor-action-primary-neutral-default-background: #5f6167;--wb-semanticColor-action-primary-neutral-default-foreground: #ffffff;--wb-semanticColor-action-primary-neutral-hover-border: #5f6167;--wb-semanticColor-action-primary-neutral-hover-background: #5f6167;--wb-semanticColor-action-primary-neutral-hover-foreground: #ffffff;--wb-semanticColor-action-primary-neutral-press-border: #21242c;--wb-semanticColor-action-primary-neutral-press-background: #21242c;--wb-semanticColor-action-primary-neutral-press-foreground: #ffffff;--wb-semanticColor-action-primary-disabled-border: #b8b9bb;--wb-semanticColor-action-primary-disabled-background: #b8b9bb;--wb-semanticColor-action-primary-disabled-foreground: #f7f8fa;--wb-semanticColor-action-secondary-progressive-default-border: #909296;--wb-semanticColor-action-secondary-progressive-default-background: transparent;--wb-semanticColor-action-secondary-progressive-default-foreground: #1865f2;--wb-semanticColor-action-secondary-progressive-hover-border: #1865f2;--wb-semanticColor-action-secondary-progressive-hover-background: transparent;--wb-semanticColor-action-secondary-progressive-hover-foreground: #1865f2;--wb-semanticColor-action-secondary-progressive-press-border: #1b50b3;--wb-semanticColor-action-secondary-progressive-press-background: #b5cefb;--wb-semanticColor-action-secondary-progressive-press-foreground: #1b50b3;--wb-semanticColor-action-secondary-destructive-default-border: #909296;--wb-semanticColor-action-secondary-destructive-default-background: transparent;--wb-semanticColor-action-secondary-destructive-default-foreground: #d92916;--wb-semanticColor-action-secondary-destructive-hover-border: #d92916;--wb-semanticColor-action-secondary-destructive-hover-background: transparent;--wb-semanticColor-action-secondary-destructive-hover-foreground: #d92916;--wb-semanticColor-action-secondary-destructive-press-border: #9e271d;--wb-semanticColor-action-secondary-destructive-press-background: #f3bbb4;--wb-semanticColor-action-secondary-destructive-press-foreground: #9e271d;--wb-semanticColor-action-secondary-neutral-default-border: #909296;--wb-semanticColor-action-secondary-neutral-default-background: transparent;--wb-semanticColor-action-secondary-neutral-default-foreground: #5f6167;--wb-semanticColor-action-secondary-neutral-hover-border: #5f6167;--wb-semanticColor-action-secondary-neutral-hover-background: transparent;--wb-semanticColor-action-secondary-neutral-hover-foreground: #5f6167;--wb-semanticColor-action-secondary-neutral-press-border: #21242c;--wb-semanticColor-action-secondary-neutral-press-background: transparent;--wb-semanticColor-action-secondary-neutral-press-foreground: #21242c;--wb-semanticColor-action-secondary-disabled-border: #dbdcdd;--wb-semanticColor-action-secondary-disabled-background: #f7f8fa;--wb-semanticColor-action-secondary-disabled-foreground: #b8b9bb;--wb-semanticColor-action-tertiary-progressive-default-border: transparent;--wb-semanticColor-action-tertiary-progressive-default-background: transparent;--wb-semanticColor-action-tertiary-progressive-default-foreground: #1865f2;--wb-semanticColor-action-tertiary-progressive-hover-border: #1865f2;--wb-semanticColor-action-tertiary-progressive-hover-background: transparent;--wb-semanticColor-action-tertiary-progressive-hover-foreground: #1865f2;--wb-semanticColor-action-tertiary-progressive-press-border: #1b50b3;--wb-semanticColor-action-tertiary-progressive-press-background: transparent;--wb-semanticColor-action-tertiary-progressive-press-foreground: #1b50b3;--wb-semanticColor-action-tertiary-destructive-default-border: transparent;--wb-semanticColor-action-tertiary-destructive-default-background: transparent;--wb-semanticColor-action-tertiary-destructive-default-foreground: #d92916;--wb-semanticColor-action-tertiary-destructive-hover-border: #d92916;--wb-semanticColor-action-tertiary-destructive-hover-background: transparent;--wb-semanticColor-action-tertiary-destructive-hover-foreground: #d92916;--wb-semanticColor-action-tertiary-destructive-press-border: #9e271d;--wb-semanticColor-action-tertiary-destructive-press-background: transparent;--wb-semanticColor-action-tertiary-destructive-press-foreground: #9e271d;--wb-semanticColor-action-tertiary-neutral-default-border: transparent;--wb-semanticColor-action-tertiary-neutral-default-background: transparent;--wb-semanticColor-action-tertiary-neutral-default-foreground: #5f6167;--wb-semanticColor-action-tertiary-neutral-hover-border: #5f6167;--wb-semanticColor-action-tertiary-neutral-hover-background: transparent;--wb-semanticColor-action-tertiary-neutral-hover-foreground: #5f6167;--wb-semanticColor-action-tertiary-neutral-press-border: #21242c;--wb-semanticColor-action-tertiary-neutral-press-background: transparent;--wb-semanticColor-action-tertiary-neutral-press-foreground: #21242c;--wb-semanticColor-action-tertiary-disabled-border: #dbdcdd;--wb-semanticColor-action-tertiary-disabled-background: transparent;--wb-semanticColor-action-tertiary-disabled-foreground: #b8b9bb;--wb-semanticColor-status-critical-background: #fceeec;--wb-semanticColor-status-critical-foreground: #d92916;--wb-semanticColor-status-warning-background: #fff9eb;--wb-semanticColor-status-warning-foreground: #ffb100;--wb-semanticColor-status-success-background: #ebf8ec;--wb-semanticColor-status-success-foreground: #00a60e;--wb-semanticColor-status-notice-background: #edf3fe;--wb-semanticColor-status-notice-foreground: #1865f2;--wb-semanticColor-status-neutral-background: #ededee;--wb-semanticColor-status-neutral-foreground: #21242c;--wb-semanticColor-surface-primary: #ffffff;--wb-semanticColor-surface-secondary: #f7f8fa;--wb-semanticColor-surface-emphasis: #1865f2;--wb-semanticColor-surface-inverse: #0b2149;--wb-semanticColor-surface-overlay: rgba(33,36,44,0.64);--wb-semanticColor-text-primary: #21242c;--wb-semanticColor-text-secondary: #5f6167;--wb-semanticColor-text-disabled: #b8b9bb;--wb-semanticColor-text-inverse: #ffffff;--wb-semanticColor-border-primary: #dbdcdd;--wb-semanticColor-border-subtle: #ededee;--wb-semanticColor-border-strong: #909296;--wb-semanticColor-border-inverse: #ffffff;--wb-semanticColor-focus-outer: #1865f2;--wb-semanticColor-focus-inner: #ffffff;--wb-semanticColor-icon-primary: #5f6167;--wb-semanticColor-icon-secondary: #21242c;--wb-semanticColor-icon-inverse: #ffffff;--wb-semanticColor-icon-action: #1865f2;--wb-semanticColor-icon-destructive: #d92916;--wb-semanticColor-icon-disabled: #b8b9bb;--wb-semanticColor-khanmigo-primary: #5f1e5c;--wb-semanticColor-khanmigo-secondary: #f2edf2;--wb-semanticColor-mastery-primary: #9059ff;--wb-sizing-size_0: 0rem;--wb-sizing-size_010: 0.1rem;--wb-sizing-size_020: 0.2rem;--wb-sizing-size_040: 0.4rem;--wb-sizing-size_060: 0.6rem;--wb-sizing-size_080: 0.8rem;--wb-sizing-size_100: 1rem;--wb-sizing-size_120: 1.2rem;--wb-sizing-size_140: 1.4rem;--wb-sizing-size_160: 1.6rem;--wb-sizing-size_180: 1.8rem;--wb-sizing-size_200: 2rem;--wb-sizing-size_240: 2.4rem;--wb-sizing-size_280: 2.8rem;--wb-sizing-size_320: 3.2rem;--wb-sizing-size_360: 3.6rem;--wb-sizing-size_400: 4rem;--wb-sizing-size_480: 4.8rem;--wb-sizing-size_560: 5.6rem;--wb-sizing-size_640: 6.4rem;--wb-sizing-size_720: 7.2rem;--wb-sizing-size_800: 8rem;--wb-sizing-size_880: 8.8rem;--wb-sizing-size_960: 9.6rem;}

package/dist/es/index.js

@@ -1,54 +1,3 @@
-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: {
-    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,
-    hairline: 1,
-    thin: 2,
-    thick: 4
-  }
-};
-
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function (n) {
     for (var e = 1; e < arguments.length; e++) {
@@ -254,13 +203,62 @@ const breakpoint = {
   mediaQuery
 };
 
-const border = {
+const CSS_VAR_PREFIX = "--wb-";
+
+function mapValuesToCssVars(obj, prefix = "--wb-") {
+  const cssVars = {};
+  for (const key in obj) {
+    if (typeof obj[key] === "object") {
+      cssVars[key] = mapValuesToCssVars(obj[key], `${prefix}${key}-`);
+    } else {
+      cssVars[key] = `var(${prefix}${key})`;
+    }
+  }
+  return cssVars;
+}
+
+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$1 = {
+  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$2 = {
   primary: color.fadedOffBlack16,
   subtle: color.fadedOffBlack8,
   strong: color.fadedOffBlack50,
   inverse: color.white
 };
-const semanticColor = {
+const semanticColor$1 = {
   action: {
     primary: {
       progressive: {
@@ -323,7 +321,7 @@ const semanticColor = {
     secondary: {
       progressive: {
         default: {
-          border: border.strong,
+          border: border$2.strong,
           background: "transparent",
           foreground: color.blue
         },
@@ -340,7 +338,7 @@ const semanticColor = {
       },
       destructive: {
         default: {
-          border: border.strong,
+          border: border$2.strong,
           background: "transparent",
           foreground: color.red
         },
@@ -357,7 +355,7 @@ const semanticColor = {
       },
       neutral: {
         default: {
-          border: border.strong,
+          border: border$2.strong,
           background: "transparent",
           foreground: color.fadedOffBlack72
         },
@@ -373,7 +371,7 @@ const semanticColor = {
         }
       },
       disabled: {
-        border: border.primary,
+        border: border$2.primary,
         background: color.offWhite,
         foreground: color.fadedOffBlack32
       }
@@ -431,7 +429,7 @@ const semanticColor = {
         }
       },
       disabled: {
-        border: border.primary,
+        border: border$2.primary,
         background: "transparent",
         foreground: color.fadedOffBlack32
       }
@@ -472,7 +470,7 @@ const semanticColor = {
     disabled: color.fadedOffBlack32,
     inverse: color.white
   },
-  border: border,
+  border: border$2,
   focus: {
     outer: color.blue,
     inner: color.white
@@ -494,4 +492,34 @@ const semanticColor = {
   }
 };
 
-export { border$1 as border, breakpoint, color, fade, font, mix, semanticColor, sizing, spacing };
+const border$1 = {
+  radius: {
+    radius_0: remToPx(sizing$1.size_0),
+    radius_040: remToPx(sizing$1.size_040),
+    radius_080: remToPx(sizing$1.size_080),
+    radius_120: remToPx(sizing$1.size_120),
+    radius_full: "50%"
+  },
+  width: {
+    none: remToPx(sizing$1.size_0),
+    thin: remToPx(sizing$1.size_010),
+    medium: remToPx(sizing$1.size_020),
+    thick: remToPx(sizing$1.size_040)
+  }
+};
+
+var themeDefault = {
+  border: border$1,
+  semanticColor: semanticColor$1,
+  sizing: sizing$1
+};
+
+var theme = mapValuesToCssVars(themeDefault, CSS_VAR_PREFIX);
+
+const {
+  border,
+  semanticColor,
+  sizing
+} = theme;
+
+export { border, breakpoint, color, fade, font, mix, semanticColor, sizing, spacing };

package/dist/index.d.ts

@@ -1,11 +1,285 @@
-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";
 import { mix, fade } from "./util/utils";
+declare const border: {
+    radius: {
+        radius_0: string;
+        radius_040: string;
+        radius_080: string;
+        radius_120: string;
+        radius_full: string;
+    };
+    width: {
+        none: string;
+        thin: string;
+        medium: string;
+        thick: string;
+    };
+}, semanticColor: {
+    action: {
+        primary: {
+            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;
+                };
+            };
+            neutral: {
+                default: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                hover: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                press: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+            };
+            disabled: {
+                border: string;
+                background: string;
+                foreground: string;
+            };
+        };
+        secondary: {
+            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;
+                };
+            };
+            neutral: {
+                default: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                hover: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                press: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+            };
+            disabled: {
+                border: string;
+                background: string;
+                foreground: string;
+            };
+        };
+        tertiary: {
+            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;
+                };
+            };
+            neutral: {
+                default: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                hover: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+                press: {
+                    border: string;
+                    background: string;
+                    foreground: string;
+                };
+            };
+            disabled: {
+                border: string;
+                background: string;
+                foreground: string;
+            };
+        };
+    };
+    status: {
+        critical: {
+            background: string;
+            foreground: string;
+        };
+        warning: {
+            background: string;
+            foreground: string;
+        };
+        success: {
+            background: string;
+            foreground: string;
+        };
+        notice: {
+            background: string;
+            foreground: string;
+        };
+        neutral: {
+            background: string;
+            foreground: string;
+        };
+    };
+    surface: {
+        primary: string;
+        secondary: string;
+        emphasis: string;
+        inverse: string;
+        overlay: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+        inverse: string;
+    };
+    border: {
+        primary: string;
+        subtle: string;
+        strong: string;
+        inverse: string;
+    };
+    focus: {
+        outer: string;
+        inner: string;
+    };
+    icon: {
+        primary: string;
+        secondary: string;
+        inverse: string;
+        action: string;
+        destructive: string;
+        disabled: string;
+    };
+    khanmigo: {
+        primary: string;
+        secondary: string;
+    };
+    mastery: {
+        primary: string;
+    };
+}, sizing: {
+    readonly size_0: 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_120: string;
+    readonly size_140: string;
+    readonly size_160: string;
+    readonly size_180: string;
+    readonly size_200: string;
+    readonly size_240: string;
+    readonly size_280: string;
+    readonly size_320: string;
+    readonly size_360: string;
+    readonly size_400: string;
+    readonly size_480: string;
+    readonly size_560: string;
+    readonly size_640: string;
+    readonly size_720: string;
+    readonly size_800: string;
+    readonly size_880: string;
+    readonly size_960: string;
+};
 export { 
 /**
  * Primitive tokens for the Wonder Blocks design system.