@khanacademy/wonder-blocks-pill 3.1.25 → 3.1.27

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-pill
 
+## 3.1.27
+
+### Patch Changes
+
+- 6d71614: Update use of tokens (semantic colors, sizing, border) and use new typography components.
+  This is to better support the thunderblocks theme!
+
+## 3.1.26
+
+### Patch Changes
+
+- Updated dependencies [de9435a]
+- Updated dependencies [f50aafc]
+    - @khanacademy/wonder-blocks-tokens@11.2.1
+    - @khanacademy/wonder-blocks-clickable@7.1.12
+    - @khanacademy/wonder-blocks-link@9.1.12
+    - @khanacademy/wonder-blocks-typography@4.2.8
+
 ## 3.1.25
 
 ### Patch Changes

package/dist/components/pill.d.ts

@@ -10,8 +10,11 @@ export type PillSize = "small" | "medium" | "large";
  *
  * **Note:** Before using the `Pill` component, please see if a component from the
  * [Badge Package](/?path=/docs/packages-badge-overview--docs&globals=theme:default)
- * can be used instead. For example, prefer using the `StatusBadge` component
- * instead of a `Pill` to indicate a status.
+ * can be used instead.
+ *
+ * For example, prefer using the `StatusBadge` component instead of a `Pill` to
+ * indicate a status. Or, use the `Badge` component instead of a `Pill` with
+ * `kind="neutral"`.
  *
  * ### Usage
  *

package/dist/es/index.js

@@ -3,9 +3,10 @@ import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import Clickable from '@khanacademy/wonder-blocks-clickable';
 import { View } from '@khanacademy/wonder-blocks-core';
-import { LabelXSmall, Body, LabelSmall } from '@khanacademy/wonder-blocks-typography';
-import * as tokens from '@khanacademy/wonder-blocks-tokens';
+import { BodyText } from '@khanacademy/wonder-blocks-typography';
+import { sizing, border, semanticColor, color } from '@khanacademy/wonder-blocks-tokens';
+import { focusStyles } from '@khanacademy/wonder-blocks-styles';
 
-const{semanticColor}=tokens;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsx(LabelXSmall,{children:props.children})}if(size==="large"){return jsx(Body,{children:children})}return jsx(LabelSmall,{children:children})};const Pill=React.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsx(Clickable,{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsx(PillInner,{size:size,children:children})})}return jsx(View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsx(PillInner,{size:size,children:children})})});const pillStyles=StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens.spacing.xSmall_8,paddingRight:tokens.spacing.xSmall_8,borderRadius:tokens.border.radius.radius_040,height:tokens.spacing.large_24},wrapperLarge:{paddingLeft:tokens.spacing.small_12,paddingRight:tokens.spacing.small_12,paddingTop:tokens.spacing.xxSmall_6,paddingBottom:tokens.spacing.xxSmall_6,borderRadius:tokens.sizing.size_240,height:tokens.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens.color.offBlack16:kind==="accent"?tokens.color.activeBlue:`color-mix(in srgb, ${tokens.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.core.border.neutral.subtle}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.core.border.instructive.default},press:{border:semanticColor.core.border.instructive.strong,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`2px solid ${theme.hover.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens.spacing.xxxxSmall_2}}};styles[pillType]=StyleSheet.create(colorStyles);return styles[pillType]};
+const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsx(BodyText,{size:"xsmall",tag:"span",children:props.children})}if(size==="large"){return jsx(BodyText,{tag:"span",children:children})}return jsx(BodyText,{size:"small",tag:"span",children:children})};const Pill=React.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsx(Clickable,{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsx(PillInner,{size:size,children:children})})}return jsx(View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsx(PillInner,{size:size,children:children})})});const pillStyles=StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingInline:sizing.size_080,borderRadius:border.radius.radius_040,height:sizing.size_200},wrapperMedium:{paddingInline:sizing.size_080,borderRadius:border.radius.radius_040,height:sizing.size_240},wrapperLarge:{paddingInline:sizing.size_120,paddingBlock:sizing.size_060,borderRadius:border.radius.radius_240,height:sizing.size_320}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;let textColor;switch(kind){case"accent":backgroundColor=semanticColor.core.background.instructive.default;textColor=semanticColor.core.foreground.inverse.strong;break;case"info":backgroundColor=semanticColor.feedback.info.subtle.background;textColor=semanticColor.feedback.info.subtle.text;break;case"success":backgroundColor=semanticColor.feedback.success.subtle.background;textColor=semanticColor.feedback.success.subtle.text;break;case"warning":backgroundColor=semanticColor.feedback.warning.subtle.background;textColor=semanticColor.feedback.warning.subtle.text;break;case"critical":backgroundColor=semanticColor.feedback.critical.subtle.background;textColor=semanticColor.feedback.critical.subtle.text;break;case"transparent":backgroundColor=semanticColor.core.transparent;textColor=semanticColor.core.foreground.neutral.strong;break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;textColor=semanticColor.core.foreground.neutral.strong;}const pressColor=kind==="transparent"||kind==="neutral"?color.offBlack16:kind==="accent"?semanticColor.core.background.instructive.strong:`color-mix(in srgb, ${color.offBlack32}, ${backgroundColor})`;const theme={default:{border:kind==="transparent"?`${border.width.thin} solid ${semanticColor.core.border.neutral.subtle}`:"none",background:backgroundColor,foreground:textColor},hover:{border:semanticColor.core.border.instructive.default},press:{border:semanticColor.core.border.instructive.strong,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`${border.width.medium} solid ${theme.hover.border}`,outlineOffset:sizing.size_020},":active":{backgroundColor:theme.press.background,outline:`${border.width.medium} solid ${theme.press.border}`,outlineOffset:sizing.size_020},...focusStyles.focus}};styles[pillType]=StyleSheet.create(colorStyles);return styles[pillType]};
 
 export { Pill as default };

package/dist/index.js

@@ -6,7 +6,8 @@ var aphrodite = require('aphrodite');
 var Clickable = require('@khanacademy/wonder-blocks-clickable');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
-var tokens = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,8 +31,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
-var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
 
-const{semanticColor}=tokens__namespace;const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsxRuntime.jsx(wonderBlocksTypography.LabelXSmall,{children:props.children})}if(size==="large"){return jsxRuntime.jsx(wonderBlocksTypography.Body,{children:children})}return jsxRuntime.jsx(wonderBlocksTypography.LabelSmall,{children:children})};const Pill=React__namespace.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsxRuntime.jsx(Clickable__default["default"],{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsxRuntime.jsx(PillInner,{size:size,children:children})})}return jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsxRuntime.jsx(PillInner,{size:size,children:children})})});const pillStyles=aphrodite.StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:20},wrapperMedium:{paddingLeft:tokens__namespace.spacing.xSmall_8,paddingRight:tokens__namespace.spacing.xSmall_8,borderRadius:tokens__namespace.border.radius.radius_040,height:tokens__namespace.spacing.large_24},wrapperLarge:{paddingLeft:tokens__namespace.spacing.small_12,paddingRight:tokens__namespace.spacing.small_12,paddingTop:tokens__namespace.spacing.xxSmall_6,paddingBottom:tokens__namespace.spacing.xxSmall_6,borderRadius:tokens__namespace.sizing.size_240,height:tokens__namespace.spacing.xLarge_32}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;switch(kind){case"accent":backgroundColor=semanticColor.status.notice.foreground;break;case"info":backgroundColor=semanticColor.status.notice.background;break;case"success":backgroundColor=semanticColor.status.success.background;break;case"warning":backgroundColor=semanticColor.status.warning.background;break;case"critical":backgroundColor=semanticColor.status.critical.background;break;case"transparent":backgroundColor="transparent";break;case"neutral":default:backgroundColor=semanticColor.status.neutral.background;}const pressColor=kind==="transparent"||kind==="neutral"?tokens__namespace.color.offBlack16:kind==="accent"?tokens__namespace.color.activeBlue:`color-mix(in srgb, ${tokens__namespace.color.offBlack32}, ${backgroundColor})`;const textColor=kind==="accent"?semanticColor.text.inverse:semanticColor.text.primary;const theme={default:{border:kind==="transparent"?`1px solid ${semanticColor.core.border.neutral.subtle}`:"none",background:backgroundColor,foreground:textColor},focus:{border:semanticColor.focus.outer},hover:{border:semanticColor.core.border.instructive.default},press:{border:semanticColor.core.border.instructive.strong,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`2px solid ${theme.hover.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":active":{backgroundColor:theme.press.background,outline:`2px solid ${theme.press.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2},":focus-visible":{outline:`2px solid ${theme.focus.border}`,outlineOffset:tokens__namespace.spacing.xxxxSmall_2}}};styles[pillType]=aphrodite.StyleSheet.create(colorStyles);return styles[pillType]};
+const PillInner=props=>{const{children,size}=props;if(typeof children!=="string"){return children}if(size==="small"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"xsmall",tag:"span",children:props.children})}if(size==="large"){return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",children:children})}return jsxRuntime.jsx(wonderBlocksTypography.BodyText,{size:"small",tag:"span",children:children})};const Pill=React__namespace.forwardRef(function Pill(props,ref){const{id,children,kind="neutral",size="medium",role,onClick,style,tabIndex,testId,...ariaProps}=props;let wrapperSizeStyle;switch(size){case"small":wrapperSizeStyle=pillStyles.wrapperSmall;break;case"large":wrapperSizeStyle=pillStyles.wrapperLarge;break;default:wrapperSizeStyle=pillStyles.wrapperMedium;}const colorStyles=_generateColorStyles(!!onClick,kind);const defaultStyles=[pillStyles.wrapper,colorStyles.pill,wrapperSizeStyle];if(onClick){return jsxRuntime.jsx(Clickable__default["default"],{id:id,role:role,onClick:onClick,style:[defaultStyles,colorStyles.clickableWrapper,style],testId:testId,ref:ref,tabIndex:tabIndex,...ariaProps,children:()=>jsxRuntime.jsx(PillInner,{size:size,children:children})})}return jsxRuntime.jsx(wonderBlocksCore.View,{id:id,role:role,style:[defaultStyles,style],testId:testId,ref:ref,...ariaProps,children:jsxRuntime.jsx(PillInner,{size:size,children:children})})});const pillStyles=aphrodite.StyleSheet.create({wrapper:{display:"inline-flex",width:"fit-content"},wrapperSmall:{paddingInline:wonderBlocksTokens.sizing.size_080,borderRadius:wonderBlocksTokens.border.radius.radius_040,height:wonderBlocksTokens.sizing.size_200},wrapperMedium:{paddingInline:wonderBlocksTokens.sizing.size_080,borderRadius:wonderBlocksTokens.border.radius.radius_040,height:wonderBlocksTokens.sizing.size_240},wrapperLarge:{paddingInline:wonderBlocksTokens.sizing.size_120,paddingBlock:wonderBlocksTokens.sizing.size_060,borderRadius:wonderBlocksTokens.border.radius.radius_240,height:wonderBlocksTokens.sizing.size_320}});const styles={};const _generateColorStyles=(clickable,kind)=>{const pillType=`${kind}-${clickable.toString()}`;if(styles[pillType]){return styles[pillType]}let backgroundColor;let textColor;switch(kind){case"accent":backgroundColor=wonderBlocksTokens.semanticColor.core.background.instructive.default;textColor=wonderBlocksTokens.semanticColor.core.foreground.inverse.strong;break;case"info":backgroundColor=wonderBlocksTokens.semanticColor.feedback.info.subtle.background;textColor=wonderBlocksTokens.semanticColor.feedback.info.subtle.text;break;case"success":backgroundColor=wonderBlocksTokens.semanticColor.feedback.success.subtle.background;textColor=wonderBlocksTokens.semanticColor.feedback.success.subtle.text;break;case"warning":backgroundColor=wonderBlocksTokens.semanticColor.feedback.warning.subtle.background;textColor=wonderBlocksTokens.semanticColor.feedback.warning.subtle.text;break;case"critical":backgroundColor=wonderBlocksTokens.semanticColor.feedback.critical.subtle.background;textColor=wonderBlocksTokens.semanticColor.feedback.critical.subtle.text;break;case"transparent":backgroundColor=wonderBlocksTokens.semanticColor.core.transparent;textColor=wonderBlocksTokens.semanticColor.core.foreground.neutral.strong;break;case"neutral":default:backgroundColor=wonderBlocksTokens.semanticColor.status.neutral.background;textColor=wonderBlocksTokens.semanticColor.core.foreground.neutral.strong;}const pressColor=kind==="transparent"||kind==="neutral"?wonderBlocksTokens.color.offBlack16:kind==="accent"?wonderBlocksTokens.semanticColor.core.background.instructive.strong:`color-mix(in srgb, ${wonderBlocksTokens.color.offBlack32}, ${backgroundColor})`;const theme={default:{border:kind==="transparent"?`${wonderBlocksTokens.border.width.thin} solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`:"none",background:backgroundColor,foreground:textColor},hover:{border:wonderBlocksTokens.semanticColor.core.border.instructive.default},press:{border:wonderBlocksTokens.semanticColor.core.border.instructive.strong,background:pressColor}};const colorStyles={pill:{backgroundColor:theme.default.background,outline:theme.default.border,color:theme.default.foreground,alignItems:"center",justifyContent:"center"},clickableWrapper:{outline:theme.default.border,":hover":{outline:`${wonderBlocksTokens.border.width.medium} solid ${theme.hover.border}`,outlineOffset:wonderBlocksTokens.sizing.size_020},":active":{backgroundColor:theme.press.background,outline:`${wonderBlocksTokens.border.width.medium} solid ${theme.press.border}`,outlineOffset:wonderBlocksTokens.sizing.size_020},...wonderBlocksStyles.focusStyles.focus}};styles[pillType]=aphrodite.StyleSheet.create(colorStyles);return styles[pillType]};
 
 module.exports = Pill;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-pill",
-  "version": "3.1.25",
+  "version": "3.1.27",
   "design": "v1",
   "description": "Pill components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -13,11 +13,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "7.1.11",
     "@khanacademy/wonder-blocks-core": "12.3.0",
-    "@khanacademy/wonder-blocks-link": "9.1.11",
-    "@khanacademy/wonder-blocks-tokens": "11.2.0",
-    "@khanacademy/wonder-blocks-typography": "4.2.7"
+    "@khanacademy/wonder-blocks-link": "9.1.12",
+    "@khanacademy/wonder-blocks-styles": "0.2.19",
+    "@khanacademy/wonder-blocks-typography": "4.2.8",
+    "@khanacademy/wonder-blocks-clickable": "7.1.12",
+    "@khanacademy/wonder-blocks-tokens": "11.2.1"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",