@khanacademy/wonder-blocks-cell 6.1.15 → 6.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build$colon$css.log +1 -1
- package/CHANGELOG.md +28 -0
- package/dist/css/vars.css +26 -0
- package/dist/es/index.js +2 -2
- package/dist/index.js +2 -2
- package/dist/theme/syl-dark.d.ts +82 -0
- package/package.json +6 -6
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
> @khanacademy/wonder-blocks-cell@6.1
|
|
2
|
+
> @khanacademy/wonder-blocks-cell@6.2.1 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell
|
|
3
3
|
> pnpm exec wonder-blocks-tokens .
|
|
4
4
|
|
|
5
5
|
CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell/dist/css
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,33 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-cell
|
|
2
2
|
|
|
3
|
+
## 6.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 40cb70f: Add `require-logical-properties-for-rtl` ESLint rule to `eslint-plugin-wonder-blocks` recommended config, and migrate all Wonder Blocks component source files to use CSS logical properties for improved RTL layout support.
|
|
8
|
+
- 40cb70f: Enable RTL logical-properties ESLint rule in recommended config
|
|
9
|
+
- Updated dependencies [40cb70f]
|
|
10
|
+
- Updated dependencies [40cb70f]
|
|
11
|
+
- Updated dependencies [c97ece4]
|
|
12
|
+
- @khanacademy/wonder-blocks-core@12.4.4
|
|
13
|
+
- @khanacademy/wonder-blocks-clickable@8.2.0
|
|
14
|
+
- @khanacademy/wonder-blocks-typography@4.3.5
|
|
15
|
+
|
|
16
|
+
## 6.2.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- 27a211d: Add support for SYL Dark theme
|
|
21
|
+
|
|
22
|
+
### Patch Changes
|
|
23
|
+
|
|
24
|
+
- Updated dependencies [44bde5e]
|
|
25
|
+
- Updated dependencies [27a211d]
|
|
26
|
+
- @khanacademy/wonder-blocks-tokens@16.5.0
|
|
27
|
+
- @khanacademy/wonder-blocks-clickable@8.1.10
|
|
28
|
+
- @khanacademy/wonder-blocks-styles@0.2.45
|
|
29
|
+
- @khanacademy/wonder-blocks-typography@4.3.4
|
|
30
|
+
|
|
3
31
|
## 6.1.15
|
|
4
32
|
|
|
5
33
|
### Patch Changes
|
package/dist/css/vars.css
CHANGED
|
@@ -24,6 +24,32 @@
|
|
|
24
24
|
--wb-c-cell-subtitle-font-size: var(--wb-font-body-size-small);
|
|
25
25
|
--wb-c-cell-subtitle-font-lineHeight: var(--wb-font-body-lineHeight-small);}
|
|
26
26
|
|
|
27
|
+
[data-wb-theme='syl-dark'] {--wb-c-cell-root-border-width-default: var(--wb-border-width-medium);
|
|
28
|
+
--wb-c-cell-root-border-width-selected: var(--wb-border-width-thick);
|
|
29
|
+
--wb-c-cell-root-border-radius-default: var(--wb-border-radius-radius_080);
|
|
30
|
+
--wb-c-cell-root-border-radius-focus: var(--wb-border-radius-radius_080);
|
|
31
|
+
--wb-c-cell-root-border-radius-press: var(--wb-border-radius-radius_120);
|
|
32
|
+
--wb-c-cell-root-border-radius-focusPress: var(--wb-border-radius-radius_120);
|
|
33
|
+
--wb-c-cell-root-color-press-border: var(--wb-semanticColor-core-transparent);
|
|
34
|
+
--wb-c-cell-root-color-selected-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
|
|
35
|
+
--wb-c-cell-root-color-selected-border: var(--wb-semanticColor-core-transparent);
|
|
36
|
+
--wb-c-cell-root-color-disabled-foreground: var(--wb-semanticColor-core-foreground-disabled-subtle);
|
|
37
|
+
--wb-c-cell-root-layout-gap-default: var(--wb-sizing-size_120);
|
|
38
|
+
--wb-c-cell-root-layout-gap-detail: var(--wb-sizing-size_040);
|
|
39
|
+
--wb-c-cell-root-layout-padding-block-default: var(--wb-sizing-size_120);
|
|
40
|
+
--wb-c-cell-root-layout-padding-block-detail: var(--wb-sizing-size_120);
|
|
41
|
+
--wb-c-cell-root-layout-padding-inline-default: var(--wb-sizing-size_120);
|
|
42
|
+
--wb-c-cell-root-layout-padding-inline-detail: var(--wb-sizing-size_120);
|
|
43
|
+
--wb-c-cell-root-sizing-minHeight: var(--wb-sizing-size_440);
|
|
44
|
+
--wb-c-cell-accessoryLeft-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
|
|
45
|
+
--wb-c-cell-accessoryRight-color-default-foreground: var(--wb-semanticColor-core-foreground-neutral-subtle);
|
|
46
|
+
--wb-c-cell-accessoryRight-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
|
|
47
|
+
--wb-c-cell-rule-sizing-height: var(--wb-sizing-size_0);
|
|
48
|
+
--wb-c-cell-rule-shadow: none;
|
|
49
|
+
--wb-c-cell-title-font-lineHeight: var(--wb-font-heading-lineHeight-small);
|
|
50
|
+
--wb-c-cell-subtitle-font-size: var(--wb-font-body-size-xsmall);
|
|
51
|
+
--wb-c-cell-subtitle-font-lineHeight: var(--wb-font-body-lineHeight-xsmall);}
|
|
52
|
+
|
|
27
53
|
[data-wb-theme='thunderblocks'] {--wb-c-cell-root-border-width-default: var(--wb-border-width-medium);
|
|
28
54
|
--wb-c-cell-root-border-width-selected: var(--wb-border-width-thick);
|
|
29
55
|
--wb-c-cell-root-border-radius-default: var(--wb-border-radius-radius_080);
|
package/dist/es/index.js
CHANGED
|
@@ -11,9 +11,9 @@ var themeDefault = {root:{border:{width:{default:border.width.medium,selected:bo
|
|
|
11
11
|
|
|
12
12
|
var theme = mapValuesToCssVars(themeDefault,"--wb-c-cell-");
|
|
13
13
|
|
|
14
|
-
const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",
|
|
14
|
+
const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",insetBlockEnd:0,insetInlineEnd:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
|
|
15
15
|
|
|
16
|
-
const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsx(Clickable,{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,
|
|
16
|
+
const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsx(Clickable,{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,minBlockSize:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minInlineSize:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:semanticColor.core.background.instructive.subtle},":active":{background:semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:semanticColor.core.foreground.instructive.default},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
|
|
17
17
|
|
|
18
18
|
const CompactCell=function(props){const{title,...coreProps}=props;return jsx(CellCore,{...coreProps,children:typeof title==="string"?jsx(BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title})};
|
|
19
19
|
|
package/dist/index.js
CHANGED
|
@@ -19,9 +19,9 @@ var themeDefault = {root:{border:{width:{default:wonderBlocksTokens.border.width
|
|
|
19
19
|
|
|
20
20
|
var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-cell-");
|
|
21
21
|
|
|
22
|
-
const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=aphrodite.StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",
|
|
22
|
+
const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=aphrodite.StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",insetBlockEnd:0,insetInlineEnd:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
|
|
23
23
|
|
|
24
|
-
const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsxRuntime.jsx(Clickable__default["default"],{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,
|
|
24
|
+
const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsxRuntime.jsx(Clickable__default["default"],{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,minBlockSize:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minInlineSize:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle},":active":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:wonderBlocksTokens.semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:wonderBlocksTokens.semanticColor.core.foreground.instructive.default},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
|
|
25
25
|
|
|
26
26
|
const CompactCell=function(props){const{title,...coreProps}=props;return jsxRuntime.jsx(CellCore,{...coreProps,children:typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title})};
|
|
27
27
|
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
root: {
|
|
3
|
+
border: {
|
|
4
|
+
width: {
|
|
5
|
+
default: string;
|
|
6
|
+
selected: string;
|
|
7
|
+
};
|
|
8
|
+
radius: {
|
|
9
|
+
default: string;
|
|
10
|
+
focus: string;
|
|
11
|
+
press: string;
|
|
12
|
+
focusPress: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
color: {
|
|
16
|
+
press: {
|
|
17
|
+
border: string;
|
|
18
|
+
};
|
|
19
|
+
selected: {
|
|
20
|
+
foreground: string;
|
|
21
|
+
border: string;
|
|
22
|
+
};
|
|
23
|
+
disabled: {
|
|
24
|
+
foreground: string;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
27
|
+
layout: {
|
|
28
|
+
gap: {
|
|
29
|
+
default: string;
|
|
30
|
+
detail: string;
|
|
31
|
+
};
|
|
32
|
+
padding: {
|
|
33
|
+
block: {
|
|
34
|
+
default: string;
|
|
35
|
+
detail: string;
|
|
36
|
+
};
|
|
37
|
+
inline: {
|
|
38
|
+
default: string;
|
|
39
|
+
detail: string;
|
|
40
|
+
};
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
sizing: {
|
|
44
|
+
minHeight: string;
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
accessoryLeft: {
|
|
48
|
+
color: {
|
|
49
|
+
default: {
|
|
50
|
+
foreground: string;
|
|
51
|
+
};
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
accessoryRight: {
|
|
55
|
+
color: {
|
|
56
|
+
default: {
|
|
57
|
+
foreground: string;
|
|
58
|
+
};
|
|
59
|
+
disabled: {
|
|
60
|
+
foreground: string;
|
|
61
|
+
};
|
|
62
|
+
};
|
|
63
|
+
};
|
|
64
|
+
rule: {
|
|
65
|
+
sizing: {
|
|
66
|
+
height: string;
|
|
67
|
+
};
|
|
68
|
+
shadow: string;
|
|
69
|
+
};
|
|
70
|
+
title: {
|
|
71
|
+
font: {
|
|
72
|
+
lineHeight: string;
|
|
73
|
+
};
|
|
74
|
+
};
|
|
75
|
+
subtitle: {
|
|
76
|
+
font: {
|
|
77
|
+
size: string;
|
|
78
|
+
lineHeight: string;
|
|
79
|
+
};
|
|
80
|
+
};
|
|
81
|
+
};
|
|
82
|
+
export default _default;
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"description": "",
|
|
4
4
|
"author": "Khan Academy",
|
|
5
5
|
"license": "MIT",
|
|
6
|
-
"version": "6.1
|
|
6
|
+
"version": "6.2.1",
|
|
7
7
|
"publishConfig": {
|
|
8
8
|
"access": "public"
|
|
9
9
|
},
|
|
@@ -28,11 +28,11 @@
|
|
|
28
28
|
"./styles.css": "./dist/css/vars.css"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@khanacademy/wonder-blocks-clickable": "8.
|
|
32
|
-
"@khanacademy/wonder-blocks-core": "12.4.
|
|
33
|
-
"@khanacademy/wonder-blocks-styles": "0.2.
|
|
34
|
-
"@khanacademy/wonder-blocks-tokens": "16.
|
|
35
|
-
"@khanacademy/wonder-blocks-typography": "4.3.
|
|
31
|
+
"@khanacademy/wonder-blocks-clickable": "8.2.0",
|
|
32
|
+
"@khanacademy/wonder-blocks-core": "12.4.4",
|
|
33
|
+
"@khanacademy/wonder-blocks-styles": "0.2.45",
|
|
34
|
+
"@khanacademy/wonder-blocks-tokens": "16.5.0",
|
|
35
|
+
"@khanacademy/wonder-blocks-typography": "4.3.5"
|
|
36
36
|
},
|
|
37
37
|
"peerDependencies": {
|
|
38
38
|
"aphrodite": "^1.2.5",
|