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

Comparing version 0.0.0-PR2154-20240104211100 to 0.0.0-PR2170-20240125180122

CHANGELOG.md

 # @khanacademy/wonder-blocks-theming
 
-## 0.0.0-PR2154-20240104211100
+## 0.0.0-PR2170-20240125180122
 
+### Major Changes
+
+-   ff4f9840: Move tokens export to wb-tokens
+
+## 1.3.0
+
 ### Minor Changes
 
--   926174e0: Added more colors to Pill, small pills are now 24px tall with 14px font size. Tokens (theming) now include pill colors.
+-   80592e75: Added more colors to Pill, small pills are now 24px tall with 14px font size. Tokens (theming) now include pill colors.
 
@@ -9,0 +15,0 @@ ## 1.2.1

dist/es/index.js

@@ -1,3 +0,1 @@
-import Spacing from '@khanacademy/wonder-blocks-spacing';
-import Color, { mix, fade } from '@khanacademy/wonder-blocks-color';
 import * as React from 'react';
@@ -21,66 +19,2 @@ import { StyleSheet } from 'aphrodite';
 
-const tokens = {
-  color: _extends({}, Color, {
-    activeBlue: mix(Color.offBlack32, Color.blue),
-    fadedBlue: mix(fade(Color.blue, 0.32), Color.white),
-    fadedBlue16: fade(Color.blue, 0.16),
-    fadedBlue8: fade(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),
-    eggplant: "#5f1e5c"
-  }),
-  spacing: Spacing,
-  border: {
-    radius: {
-      xSmall_2: 2,
-      small_3: 3,
-      medium_4: 4,
-      large_6: 6,
-      xLarge_12: 12,
-      full: "50%"
-    },
-    width: {
-      none: 0,
-      hairline: 1,
-      thin: 2,
-      thick: 4
-    }
-  },
-  font: {
-    family: {
-      sans: 'Lato, "Noto Sans", sans-serif',
-      serif: '"Noto Serif", serif',
-      mono: "Inconsolata, monospace"
-    },
-    size: {
-      xxxLarge: 36,
-      xxLarge: 28,
-      xLarge: 24,
-      large: 20,
-      medium: 16,
-      small: 14,
-      xSmall: 12
-    },
-    lineHeight: {
-      xxxLarge: 40,
-      xxLarge: 32,
-      xLarge: 28,
-      large: 24,
-      medium: 20,
-      small: 18,
-      xSmall: 16
-    },
-    weight: {
-      light: 300,
-      regular: 400,
-      bold: 700
-    }
-  }
-};
-
 function mergeTheme(source, target) {
@@ -132,2 +66,2 @@ const result = _extends({}, source, target);
 
-export { ThemeSwitcherContext, createThemeContext, mergeTheme, tokens, useScopedTheme, useStyles, withScopedTheme };
+export { ThemeSwitcherContext, createThemeContext, mergeTheme, useScopedTheme, useStyles, withScopedTheme };

dist/index.d.ts

@@ -1,2 +0,1 @@
-export { default as tokens } from "./tokens";
 export { mergeTheme } from "./utils/merge-theme";
@@ -3,0 +2,0 @@ export { default as createThemeContext } from "./utils/create-theme-context";

dist/index.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
-var Color = require('@khanacademy/wonder-blocks-color');
 var React = require('react');
 var aphrodite = require('aphrodite');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
 function _interopNamespace(e) {
@@ -31,4 +27,2 @@ if (e && e.__esModule) return e;
 
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
@@ -51,66 +45,2 @@
 
-const tokens = {
-  color: _extends({}, Color__default["default"], {
-    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),
-    fadedBlue16: Color.fade(Color__default["default"].blue, 0.16),
-    fadedBlue8: Color.fade(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),
-    eggplant: "#5f1e5c"
-  }),
-  spacing: Spacing__default["default"],
-  border: {
-    radius: {
-      xSmall_2: 2,
-      small_3: 3,
-      medium_4: 4,
-      large_6: 6,
-      xLarge_12: 12,
-      full: "50%"
-    },
-    width: {
-      none: 0,
-      hairline: 1,
-      thin: 2,
-      thick: 4
-    }
-  },
-  font: {
-    family: {
-      sans: 'Lato, "Noto Sans", sans-serif',
-      serif: '"Noto Serif", serif',
-      mono: "Inconsolata, monospace"
-    },
-    size: {
-      xxxLarge: 36,
-      xxLarge: 28,
-      xLarge: 24,
-      large: 20,
-      medium: 16,
-      small: 14,
-      xSmall: 12
-    },
-    lineHeight: {
-      xxxLarge: 40,
-      xxLarge: 32,
-      xLarge: 28,
-      large: 24,
-      medium: 20,
-      small: 18,
-      xSmall: 16
-    },
-    weight: {
-      light: 300,
-      regular: 400,
-      bold: 700
-    }
-  }
-};
-
 function mergeTheme(source, target) {
@@ -165,5 +95,4 @@ const result = _extends({}, source, target);
 exports.mergeTheme = mergeTheme;
-exports.tokens = tokens;
 exports.useScopedTheme = useScopedTheme;
 exports.useStyles = useStyles;
 exports.withScopedTheme = withScopedTheme;

package.json

 {
     "name": "@khanacademy/wonder-blocks-theming",
-    "version": "0.0.0-PR2154-20240104211100",
+    "version": "0.0.0-PR2170-20240125180122",
     "publishConfig": {
@@ -14,6 +14,3 @@ "access": "public"
     },
-    "dependencies": {
-        "@khanacademy/wonder-blocks-color": "^3.0.0",
-        "@khanacademy/wonder-blocks-spacing": "^4.0.1"
-    },
+    "dependencies": {},
     "peerDependencies": {
@@ -20,0 +17,0 @@ "aphrodite": "^1.2.5",

src/index.ts

@@ -1,2 +0,1 @@
-export {default as tokens} from "./tokens";
 export {mergeTheme} from "./utils/merge-theme";
@@ -3,0 +2,0 @@ export {default as createThemeContext} from "./utils/create-theme-context";

src/utils/__tests__/merge-theme.test.ts

@@ -1,2 +0,2 @@
-import tokens from "../../tokens";
+import * as tokens from "@khanacademy/wonder-blocks-tokens";
 import {mergeTheme} from "../merge-theme";
@@ -3,0 +3,0 @@

tsconfig-build.json

@@ -12,3 +12,4 @@ {
         {"path": "../wonder-blocks-spacing/tsconfig-build.json"},
+        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
     ]
 }

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

Dependency count

3

decreased by-40%

Worsened metrics

Total package byte prevSize

78747

decreased by-9.45%

Number of package files

28

decreased by-6.67%

Lines of code

668

decreased by-31.98%

Dependency changes

• - Removed@khanacademy/wonder-blocks-color@^3.0.0

• - Removed@khanacademy/wonder-blocks-spacing@^4.0.1

• - Removed@khanacademy/wonder-blocks-color@3.0.0(transitive)

• - Removed@khanacademy/wonder-blocks-spacing@4.0.1(transitive)