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

Comparing version 0.0.0-PR2206-20240409145807 to 0.0.0-PR2242-20240611150524

CHANGELOG.md

 # @khanacademy/wonder-blocks-theming
 
-## 0.0.0-PR2206-20240409145807
+## 0.0.0-PR2242-20240611150524
 
+### Minor Changes
+
+-   1fa2771a: Add Panda preset
+
+## 2.0.2
+
 ### Patch Changes
@@ -6,0 +12,0 @@

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

@@ -0,1 +1,3 @@
+/// <reference path="../../../wonder-blocks-core/types/aphrodite.d.ts" />
+/// <reference path="../../types/aphrodite.d.ts" />
 import * as React from "react";
@@ -2,0 +4,0 @@ import { StyleDeclaration } from "aphrodite";

dist/es/index.js

 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
+import * as tokens$1 from '@khanacademy/wonder-blocks-tokens';
+import { color, spacing } from '@khanacademy/wonder-blocks-tokens';
+import { mergeTheme as mergeTheme$1 } from '@khanacademy/wonder-blocks-theming';
 
@@ -65,2 +68,359 @@ function _extends() {
 
-export { ThemeSwitcherContext, createThemeContext, mergeTheme, useScopedTheme, useStyles, withScopedTheme };
+// src/index.ts
+function definePreset(preset) {
+  return preset;
+}
+function defineKeyframes(keyframes) {
+  return keyframes;
+}
+function defineThemeVariant(theme) {
+  return theme;
+}
+function defineThemeContract(_contract) {
+  return (theme) => defineThemeVariant(theme);
+}
+function createProxy() {
+  const identity = (v) => v;
+  return new Proxy(identity, {
+    get() {
+      return identity;
+    }
+  });
+}
+var defineTokens = /* @__PURE__ */ createProxy();
+
+const defineTheme = defineThemeContract();
+
+const theme$1 = {
+  colors: {
+    bg: {
+      action: {
+        default: {
+          value: tokens$1.color.blue
+        },
+        active: {
+          value: tokens$1.color.activeBlue
+        },
+        inverse: {
+          value: tokens$1.color.fadedBlue
+        }
+      },
+      critical: {
+        default: {
+          value: tokens$1.color.red
+        },
+        active: {
+          value: tokens$1.color.activeRed
+        },
+        inverse: {
+          value: tokens$1.color.fadedRed
+        }
+      },
+      primary: {
+        default: {
+          value: tokens$1.color.white
+        },
+        disabled: {
+          value: tokens$1.color.offBlack32
+        },
+        inverse: {
+          value: tokens$1.color.darkBlue
+        }
+      },
+      secondary: {
+        default: {
+          value: "none"
+        },
+        inverse: {
+          value: "none"
+        },
+        focus: {
+          value: tokens$1.color.white
+        },
+        active: {
+          action: {
+            value: tokens$1.color.fadedBlue
+          },
+          critical: {
+            value: tokens$1.color.fadedRed
+          }
+        }
+      },
+      tertiary: {
+        hover: {
+          value: tokens$1.color.white
+        }
+      },
+      icon: {
+        secondaryHover: {
+          value: "transparent"
+        }
+      }
+    },
+    text: {
+      disabled: {
+        value: tokens$1.color.offBlack32
+      },
+      inverse: {
+        value: tokens$1.color.white
+      },
+      primary: {
+        disabled: {
+          value: tokens$1.color.white64
+        }
+      },
+      secondary: {
+        inverse: {
+          value: tokens$1.color.white50
+        }
+      },
+      icon: {
+        secondaryHover: {
+          value: tokens$1.color.blue
+        }
+      }
+    },
+    border: {
+      disabled: {
+        value: tokens$1.color.offBlack32
+      },
+      primary: {
+        inverse: {
+          value: tokens$1.color.white
+        }
+      },
+      secondary: {
+        action: {
+          value: tokens$1.color.offBlack50
+        },
+        critical: {
+          value: tokens$1.color.offBlack50
+        },
+        inverse: {
+          value: tokens$1.color.white50
+        }
+      },
+      tertiary: {
+        inverse: {
+          value: tokens$1.color.white
+        }
+      }
+    }
+  },
+  borderWidths: {
+    secondary: {
+      value: tokens$1.border.width.hairline + "px"
+    },
+    focused: {
+      value: tokens$1.border.width.thin + "px"
+    },
+    disabled: {
+      value: tokens$1.border.width.thin + "px"
+    }
+  },
+  radii: {
+    default: {
+      value: tokens$1.border.radius.medium_4 + "px"
+    },
+    tertiary: {
+      value: tokens$1.border.radius.xSmall_2 + "px"
+    },
+    small: {
+      value: tokens$1.border.radius.medium_4 + "px"
+    },
+    large: {
+      value: tokens$1.border.radius.large_6 + "px"
+    },
+    icon: {
+      value: tokens$1.border.radius.full
+    }
+  },
+  sizes: {
+    height: {
+      tertiaryHover: {
+        value: tokens$1.spacing.xxxxSmall_2 + "px"
+      },
+      small: {
+        value: tokens$1.spacing.xLarge_32 + "px"
+      },
+      medium: {
+        value: "40px"
+      },
+      large: {
+        value: "56px"
+      }
+    }
+  },
+  spacing: {
+    margin: {
+      icon: {
+        offset: {
+          value: `-${tokens$1.spacing.xxxxSmall_2}px`
+        }
+      }
+    },
+    padding: {
+      xsmall: {
+        value: tokens$1.spacing.xxxxSmall_2 + "px"
+      },
+      small: {
+        value: tokens$1.spacing.xxSmall_6 + "px"
+      },
+      medium: {
+        value: tokens$1.spacing.small_12 + "px"
+      },
+      large: {
+        value: tokens$1.spacing.medium_16 + "px"
+      },
+      xLarge: {
+        value: tokens$1.spacing.xLarge_32 + "px"
+      }
+    }
+  },
+  fontSizes: {
+    large: {
+      value: "18px"
+    }
+  },
+  lineHeights: {
+    large: {
+      value: tokens$1.font.lineHeight.medium + "px"
+    }
+  },
+  fontWeights: {
+    default: {
+      value: tokens$1.font.weight.regular.toString()
+    }
+  }
+};
+var buttonDefaultTheme = defineTheme({
+  semanticTokens: theme$1
+});
+
+const theme = defineTheme(mergeTheme$1(buttonDefaultTheme, {
+  semanticTokens: {
+    colors: {
+      bg: {
+        secondary: {
+          default: {
+            value: tokens$1.color.offWhite
+          },
+          active: {
+            action: {
+              value: tokens$1.color.fadedBlue8
+            },
+            critical: {
+              value: tokens$1.color.fadedRed8
+            }
+          },
+          focus: {
+            value: tokens$1.color.offWhite
+          }
+        },
+        icon: {
+          secondaryHover: {
+            value: tokens$1.color.fadedBlue16
+          }
+        }
+      },
+      border: {
+        secondary: {
+          action: {
+            value: tokens$1.color.fadedBlue
+          },
+          critical: {
+            value: tokens$1.color.fadedRed
+          }
+        }
+      },
+      text: {
+        icon: {
+          secondaryHover: {
+            value: tokens$1.color.blue
+          }
+        }
+      }
+    },
+    radii: {
+      default: {
+        value: tokens$1.border.radius.xLarge_12 + "px"
+      },
+      small: {
+        value: tokens$1.border.radius.large_6 + "px"
+      },
+      large: {
+        value: tokens$1.border.radius.xLarge_12 + "px"
+      }
+    },
+    borderWidths: {
+      disabled: {
+        value: tokens$1.border.width.hairline + "px"
+      },
+      focused: {
+        value: tokens$1.border.width.hairline + "px"
+      }
+    },
+    spacing: {
+      margin: {
+        icon: {
+          offset: {
+            value: -tokens$1.spacing.xSmall_8 + "px"
+          }
+        }
+      }
+    },
+    fontWeights: {
+      default: {
+        value: tokens$1.font.weight.regular
+      }
+    }
+  }
+}));
+
+const wbTokenToPandaToken = token => Object.entries(token).map(([key, value]) => {
+  if (typeof value === "number") {
+    value = `${value}px`;
+  }
+  return {
+    [key]: {
+      value
+    }
+  };
+}).reduce((acc, curr) => _extends({}, acc, curr), {});
+const tokens = defineTokens({
+  colors: wbTokenToPandaToken(color),
+  spacing: wbTokenToPandaToken(spacing)
+});
+const keyframes = defineKeyframes({
+  spin: {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "50%": {
+      transform: "rotate(180deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  }
+});
+var pandaPreset = definePreset({
+  theme: {
+    tokens: tokens,
+    keyframes
+  },
+  themes: {
+    buttonDefault: buttonDefaultTheme,
+    buttonKhanmigo: theme
+  },
+  staticCss: {
+    css: [{
+      properties: {
+        background: ["*"]
+      }
+    }],
+    themes: ["buttonDefault", "buttonKhanmigo"]
+  }
+});
+
+export { ThemeSwitcherContext, createThemeContext, mergeTheme, pandaPreset, useScopedTheme, useStyles, withScopedTheme };

dist/hooks/use-styles.d.ts

@@ -0,1 +1,3 @@
+/// <reference path="../../../wonder-blocks-core/types/aphrodite.d.ts" />
+/// <reference path="../../types/aphrodite.d.ts" />
 import { StyleDeclaration } from "aphrodite";
@@ -2,0 +4,0 @@ import { ThemedStylesFn } from "../types";

dist/index.d.ts

@@ -8,1 +8,2 @@ export { mergeTheme } from "./utils/merge-theme";
 export { ThemeSwitcherContext } from "./utils/theme-switcher-context";
+export { default as pandaPreset } from "./presets/panda-preset";

dist/index.js

@@ -7,2 +7,4 @@ 'use strict';
 var aphrodite = require('aphrodite');
+var tokens$1 = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
 
@@ -28,2 +30,3 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens$1);
 
@@ -91,7 +94,365 @@ function _extends() {
 
+// src/index.ts
+function definePreset(preset) {
+  return preset;
+}
+function defineKeyframes(keyframes) {
+  return keyframes;
+}
+function defineThemeVariant(theme) {
+  return theme;
+}
+function defineThemeContract(_contract) {
+  return (theme) => defineThemeVariant(theme);
+}
+function createProxy() {
+  const identity = (v) => v;
+  return new Proxy(identity, {
+    get() {
+      return identity;
+    }
+  });
+}
+var defineTokens = /* @__PURE__ */ createProxy();
+
+const defineTheme = defineThemeContract();
+
+const theme$1 = {
+  colors: {
+    bg: {
+      action: {
+        default: {
+          value: tokens__namespace.color.blue
+        },
+        active: {
+          value: tokens__namespace.color.activeBlue
+        },
+        inverse: {
+          value: tokens__namespace.color.fadedBlue
+        }
+      },
+      critical: {
+        default: {
+          value: tokens__namespace.color.red
+        },
+        active: {
+          value: tokens__namespace.color.activeRed
+        },
+        inverse: {
+          value: tokens__namespace.color.fadedRed
+        }
+      },
+      primary: {
+        default: {
+          value: tokens__namespace.color.white
+        },
+        disabled: {
+          value: tokens__namespace.color.offBlack32
+        },
+        inverse: {
+          value: tokens__namespace.color.darkBlue
+        }
+      },
+      secondary: {
+        default: {
+          value: "none"
+        },
+        inverse: {
+          value: "none"
+        },
+        focus: {
+          value: tokens__namespace.color.white
+        },
+        active: {
+          action: {
+            value: tokens__namespace.color.fadedBlue
+          },
+          critical: {
+            value: tokens__namespace.color.fadedRed
+          }
+        }
+      },
+      tertiary: {
+        hover: {
+          value: tokens__namespace.color.white
+        }
+      },
+      icon: {
+        secondaryHover: {
+          value: "transparent"
+        }
+      }
+    },
+    text: {
+      disabled: {
+        value: tokens__namespace.color.offBlack32
+      },
+      inverse: {
+        value: tokens__namespace.color.white
+      },
+      primary: {
+        disabled: {
+          value: tokens__namespace.color.white64
+        }
+      },
+      secondary: {
+        inverse: {
+          value: tokens__namespace.color.white50
+        }
+      },
+      icon: {
+        secondaryHover: {
+          value: tokens__namespace.color.blue
+        }
+      }
+    },
+    border: {
+      disabled: {
+        value: tokens__namespace.color.offBlack32
+      },
+      primary: {
+        inverse: {
+          value: tokens__namespace.color.white
+        }
+      },
+      secondary: {
+        action: {
+          value: tokens__namespace.color.offBlack50
+        },
+        critical: {
+          value: tokens__namespace.color.offBlack50
+        },
+        inverse: {
+          value: tokens__namespace.color.white50
+        }
+      },
+      tertiary: {
+        inverse: {
+          value: tokens__namespace.color.white
+        }
+      }
+    }
+  },
+  borderWidths: {
+    secondary: {
+      value: tokens__namespace.border.width.hairline + "px"
+    },
+    focused: {
+      value: tokens__namespace.border.width.thin + "px"
+    },
+    disabled: {
+      value: tokens__namespace.border.width.thin + "px"
+    }
+  },
+  radii: {
+    default: {
+      value: tokens__namespace.border.radius.medium_4 + "px"
+    },
+    tertiary: {
+      value: tokens__namespace.border.radius.xSmall_2 + "px"
+    },
+    small: {
+      value: tokens__namespace.border.radius.medium_4 + "px"
+    },
+    large: {
+      value: tokens__namespace.border.radius.large_6 + "px"
+    },
+    icon: {
+      value: tokens__namespace.border.radius.full
+    }
+  },
+  sizes: {
+    height: {
+      tertiaryHover: {
+        value: tokens__namespace.spacing.xxxxSmall_2 + "px"
+      },
+      small: {
+        value: tokens__namespace.spacing.xLarge_32 + "px"
+      },
+      medium: {
+        value: "40px"
+      },
+      large: {
+        value: "56px"
+      }
+    }
+  },
+  spacing: {
+    margin: {
+      icon: {
+        offset: {
+          value: `-${tokens__namespace.spacing.xxxxSmall_2}px`
+        }
+      }
+    },
+    padding: {
+      xsmall: {
+        value: tokens__namespace.spacing.xxxxSmall_2 + "px"
+      },
+      small: {
+        value: tokens__namespace.spacing.xxSmall_6 + "px"
+      },
+      medium: {
+        value: tokens__namespace.spacing.small_12 + "px"
+      },
+      large: {
+        value: tokens__namespace.spacing.medium_16 + "px"
+      },
+      xLarge: {
+        value: tokens__namespace.spacing.xLarge_32 + "px"
+      }
+    }
+  },
+  fontSizes: {
+    large: {
+      value: "18px"
+    }
+  },
+  lineHeights: {
+    large: {
+      value: tokens__namespace.font.lineHeight.medium + "px"
+    }
+  },
+  fontWeights: {
+    default: {
+      value: tokens__namespace.font.weight.regular.toString()
+    }
+  }
+};
+var buttonDefaultTheme = defineTheme({
+  semanticTokens: theme$1
+});
+
+const theme = defineTheme(wonderBlocksTheming.mergeTheme(buttonDefaultTheme, {
+  semanticTokens: {
+    colors: {
+      bg: {
+        secondary: {
+          default: {
+            value: tokens__namespace.color.offWhite
+          },
+          active: {
+            action: {
+              value: tokens__namespace.color.fadedBlue8
+            },
+            critical: {
+              value: tokens__namespace.color.fadedRed8
+            }
+          },
+          focus: {
+            value: tokens__namespace.color.offWhite
+          }
+        },
+        icon: {
+          secondaryHover: {
+            value: tokens__namespace.color.fadedBlue16
+          }
+        }
+      },
+      border: {
+        secondary: {
+          action: {
+            value: tokens__namespace.color.fadedBlue
+          },
+          critical: {
+            value: tokens__namespace.color.fadedRed
+          }
+        }
+      },
+      text: {
+        icon: {
+          secondaryHover: {
+            value: tokens__namespace.color.blue
+          }
+        }
+      }
+    },
+    radii: {
+      default: {
+        value: tokens__namespace.border.radius.xLarge_12 + "px"
+      },
+      small: {
+        value: tokens__namespace.border.radius.large_6 + "px"
+      },
+      large: {
+        value: tokens__namespace.border.radius.xLarge_12 + "px"
+      }
+    },
+    borderWidths: {
+      disabled: {
+        value: tokens__namespace.border.width.hairline + "px"
+      },
+      focused: {
+        value: tokens__namespace.border.width.hairline + "px"
+      }
+    },
+    spacing: {
+      margin: {
+        icon: {
+          offset: {
+            value: -tokens__namespace.spacing.xSmall_8 + "px"
+          }
+        }
+      }
+    },
+    fontWeights: {
+      default: {
+        value: tokens__namespace.font.weight.regular
+      }
+    }
+  }
+}));
+
+const wbTokenToPandaToken = token => Object.entries(token).map(([key, value]) => {
+  if (typeof value === "number") {
+    value = `${value}px`;
+  }
+  return {
+    [key]: {
+      value
+    }
+  };
+}).reduce((acc, curr) => _extends({}, acc, curr), {});
+const tokens = defineTokens({
+  colors: wbTokenToPandaToken(tokens$1.color),
+  spacing: wbTokenToPandaToken(tokens$1.spacing)
+});
+const keyframes = defineKeyframes({
+  spin: {
+    "0%": {
+      transform: "rotate(0deg)"
+    },
+    "50%": {
+      transform: "rotate(180deg)"
+    },
+    "100%": {
+      transform: "rotate(360deg)"
+    }
+  }
+});
+var pandaPreset = definePreset({
+  theme: {
+    tokens: tokens,
+    keyframes
+  },
+  themes: {
+    buttonDefault: buttonDefaultTheme,
+    buttonKhanmigo: theme
+  },
+  staticCss: {
+    css: [{
+      properties: {
+        background: ["*"]
+      }
+    }],
+    themes: ["buttonDefault", "buttonKhanmigo"]
+  }
+});
+
 exports.ThemeSwitcherContext = ThemeSwitcherContext;
 exports.createThemeContext = createThemeContext;
 exports.mergeTheme = mergeTheme;
+exports.pandaPreset = pandaPreset;
 exports.useScopedTheme = useScopedTheme;
 exports.useStyles = useStyles;
 exports.withScopedTheme = withScopedTheme;

dist/types.d.ts

@@ -0,1 +1,3 @@
+/// <reference path="../../wonder-blocks-core/types/aphrodite.d.ts" />
+/// <reference path="../types/aphrodite.d.ts" />
 import { StyleDeclaration } from "aphrodite";
@@ -2,0 +4,0 @@ export type ThemedStylesFn<T extends object> = (theme: T) => StyleDeclaration;

package.json

 {
     "name": "@khanacademy/wonder-blocks-theming",
-    "version": "0.0.0-PR2206-20240409145807",
+    "version": "0.0.0-PR2242-20240611150524",
     "publishConfig": {
@@ -5,0 +5,0 @@ "access": "public"

src/index.ts

@@ -12,1 +12,4 @@ export {mergeTheme} from "./utils/merge-theme";
 export {ThemeSwitcherContext} from "./utils/theme-switcher-context";
+
+// Panda
+export {default as pandaPreset} from "./presets/panda-preset";

tsconfig-build.json

@@ -11,3 +11,3 @@ {
         {"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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

139159

increased by67.74%

Number of package files

36

increased by28.57%

Lines of code

2433

increased by265.32%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes