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

Comparing version 0.0.0-PR2048-20230907173855 to 0.0.0-PR2096-20231027224455

CHANGELOG.md

 # @khanacademy/wonder-blocks-theming
 
-## 0.0.0-PR2048-20230907173855
+## 0.0.0-PR2096-20231027224455
 
 ### Minor Changes
 
+-   3f854fe8: Export supported themes list, change WB components to use these new exports
+
+## 1.1.1
+
+### Patch Changes
+
+-   Updated dependencies [48d3c7e9]
+    -   @khanacademy/wonder-blocks-color@3.0.0
+
+## 1.1.0
+
+### Minor Changes
+
+-   5725703a: Add new color tokens (more faded values)
 -   fc6cec0b: Add theming to Switch and new color tokens for theming
@@ -8,0 +22,0 @@

dist/components/with-scoped-theme.d.ts

@@ -12,2 +12,2 @@ import * as React from "react";
  */
-export default function withScopedTheme<T>(styleSheet: ThemedStylesFn<T>, themeContext: React.Context<T>): <Props extends WithThemeProps>(WrappedComponent: React.ComponentType<Props>) => (props: WithoutTheme<Props>) => JSX.Element;
+export default function withScopedTheme<T extends object>(styleSheet: ThemedStylesFn<T>, themeContext: React.Context<T>): <Props extends WithThemeProps>(WrappedComponent: React.ComponentType<Props>) => (props: WithoutTheme<Props>) => JSX.Element;

dist/es/index.js

@@ -25,4 +25,8 @@ import Spacing from '@khanacademy/wonder-blocks-spacing';
     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),
     white32: fade(Color.white, 0.32),
@@ -38,2 +42,3 @@ eggplant: "#5f1e5c"
       large_6: 6,
+      xLarge_12: 12,
       full: "50%"
@@ -40,0 +45,0 @@ },

dist/hooks/use-scoped-theme.d.ts

@@ -12,3 +12,3 @@ import * as React from "react";
 };
-export default function useScopedTheme<T>(themeContext: React.Context<T>): ScopedTheme<T>;
+export default function useScopedTheme<T extends object>(themeContext: React.Context<T>): ScopedTheme<T>;
 export {};

dist/hooks/use-styles.d.ts

@@ -10,2 +10,2 @@ import { StyleDeclaration } from "aphrodite";
  */
-export default function useStyles<T>(styles: ThemedStylesFn<T>, theme: T): StyleDeclaration;
+export default function useStyles<T extends object>(styles: ThemedStylesFn<T>, theme: T): StyleDeclaration;

dist/index.d.ts

@@ -6,4 +6,4 @@ export { default as tokens } from "./tokens";
 export { default as withScopedTheme, type WithThemeProps, } from "./components/with-scoped-theme";
-export { type ThemedStylesFn } from "./types";
+export { type ThemedStylesFn, type SupportedThemes, type Themes } from "./types";
 export { default as useStyles } from "./hooks/use-styles";
 export { ThemeSwitcherContext } from "./utils/theme-switcher-context";

dist/index.js

@@ -53,4 +53,8 @@ 'use strict';
     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),
     white32: Color.fade(Color__default["default"].white, 0.32),
@@ -66,2 +70,3 @@ eggplant: "#5f1e5c"
       large_6: 6,
+      xLarge_12: 12,
       full: "50%"
@@ -68,0 +73,0 @@ },

dist/tokens.d.ts

@@ -12,4 +12,8 @@ /**
         fadedBlue: string;
+        fadedBlue16: string;
+        fadedBlue8: string;
         activeRed: string;
         fadedRed: string;
+        fadedRed16: string;
+        fadedRed8: string;
         white32: string;
@@ -55,2 +59,3 @@ eggplant: string;
             large_6: number;
+            xLarge_12: number;
             full: string;
@@ -57,0 +62,0 @@ };

dist/types.d.ts

 import { StyleDeclaration } from "aphrodite";
-export type ThemedStylesFn<T> = (theme: T) => StyleDeclaration;
+export type ThemedStylesFn<T extends object> = (theme: T) => StyleDeclaration;
+export type SupportedThemes = "default" | "khanmigo";
+export type Themes<T extends object> = Partial<Record<SupportedThemes, T>>;

dist/utils/theme-switcher-context.d.ts

 import * as React from "react";
+import { SupportedThemes } from "../types";
 /**
@@ -10,2 +11,2 @@ * A React Context that holds a reference to the selected theme. It should use
  */
-export declare const ThemeSwitcherContext: React.Context<string>;
+export declare const ThemeSwitcherContext: React.Context<SupportedThemes>;

package.json

 {
     "name": "@khanacademy/wonder-blocks-theming",
-    "version": "0.0.0-PR2048-20230907173855",
+    "version": "0.0.0-PR2096-20231027224455",
     "publishConfig": {
@@ -15,3 +15,3 @@ "access": "public"
     "dependencies": {
-        "@khanacademy/wonder-blocks-color": "^2.0.1",
+        "@khanacademy/wonder-blocks-color": "^3.0.0",
         "@khanacademy/wonder-blocks-spacing": "^4.0.1"
@@ -18,0 +18,0 @@ },

src/hooks/use-scoped-theme.ts

@@ -15,3 +15,3 @@ import * as React from "react";
 
-export default function useScopedTheme<T>(
+export default function useScopedTheme<T extends object>(
     themeContext: React.Context<T>,
@@ -18,0 +18,0 @@ ): ScopedTheme<T> {

src/hooks/use-styles.ts

@@ -13,3 +13,3 @@ import * as React from "react";
  */
-export default function useStyles<T>(
+export default function useStyles<T extends object>(
     styles: ThemedStylesFn<T>,
@@ -16,0 +16,0 @@ theme: T,

src/index.ts

@@ -10,4 +10,4 @@ export {default as tokens} from "./tokens";
 } from "./components/with-scoped-theme";
-export {type ThemedStylesFn} from "./types";
+export {type ThemedStylesFn, type SupportedThemes, type Themes} from "./types";
 export {default as useStyles} from "./hooks/use-styles";
 export {ThemeSwitcherContext} from "./utils/theme-switcher-context";

src/tokens.ts

@@ -18,4 +18,8 @@ import Spacing from "@khanacademy/wonder-blocks-spacing";
         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),
         // Additional colors (e.g. for use in other themes)
@@ -33,2 +37,3 @@ // Khanmigo
             large_6: 6,
+            xLarge_12: 12,
             full: "50%",
@@ -35,0 +40,0 @@ },

src/types.ts

 import {StyleDeclaration} from "aphrodite";
 
-export type ThemedStylesFn<T> = (theme: T) => StyleDeclaration;
+export type ThemedStylesFn<T extends object> = (theme: T) => StyleDeclaration;
+
+export type SupportedThemes = "default" | "khanmigo";
+export type Themes<T extends object> = Partial<Record<SupportedThemes, T>>;

src/utils/theme-switcher-context.ts

 import * as React from "react";
+import {SupportedThemes} from "../types";
 
@@ -11,2 +12,3 @@ /**
  */
-export const ThemeSwitcherContext = React.createContext<string>("default");
+export const ThemeSwitcherContext =
+    React.createContext<SupportedThemes>("default");

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

86351

increased by2.18%

Lines of code

974

increased by2.85%

Dependency changes

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

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

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