@homebound/beam 2.399.1 → 2.401.0
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/dist/index.cjs +22 -8
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.js +22 -8
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -4197,7 +4197,7 @@ declare class CssBuilder<T extends Properties> {
|
|
|
4197
4197
|
get transition(): CssBuilder<T & {
|
|
4198
4198
|
transition: csstype.Property.Transition<string> | undefined;
|
|
4199
4199
|
}>;
|
|
4200
|
-
/** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "
|
|
4200
|
+
/** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
|
|
4201
4201
|
get buttonBase(): CssBuilder<T & {
|
|
4202
4202
|
fontWeight: csstype.Property.FontWeight | undefined;
|
|
4203
4203
|
} & {
|
|
@@ -5002,7 +5002,7 @@ interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
|
|
|
5002
5002
|
}
|
|
5003
5003
|
declare function Button(props: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
5004
5004
|
type ButtonSize = "sm" | "md" | "lg";
|
|
5005
|
-
type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "caution" | "danger" | "text" | "textSecondary";
|
|
5005
|
+
type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "tertiaryQuaternary" | "caution" | "danger" | "quaternary" | "text" | "textSecondary";
|
|
5006
5006
|
|
|
5007
5007
|
interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
|
|
5008
5008
|
/** The icon to use within the button. */
|
package/dist/index.d.ts
CHANGED
|
@@ -4197,7 +4197,7 @@ declare class CssBuilder<T extends Properties> {
|
|
|
4197
4197
|
get transition(): CssBuilder<T & {
|
|
4198
4198
|
transition: csstype.Property.Transition<string> | undefined;
|
|
4199
4199
|
}>;
|
|
4200
|
-
/** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "
|
|
4200
|
+
/** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
|
|
4201
4201
|
get buttonBase(): CssBuilder<T & {
|
|
4202
4202
|
fontWeight: csstype.Property.FontWeight | undefined;
|
|
4203
4203
|
} & {
|
|
@@ -5002,7 +5002,7 @@ interface ButtonProps extends BeamButtonProps, BeamFocusableProps {
|
|
|
5002
5002
|
}
|
|
5003
5003
|
declare function Button(props: ButtonProps): _emotion_react_jsx_runtime.JSX.Element;
|
|
5004
5004
|
type ButtonSize = "sm" | "md" | "lg";
|
|
5005
|
-
type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "caution" | "danger" | "text" | "textSecondary";
|
|
5005
|
+
type ButtonVariant = "primary" | "secondary" | "tertiary" | "tertiaryDanger" | "tertiaryQuaternary" | "caution" | "danger" | "quaternary" | "text" | "textSecondary";
|
|
5006
5006
|
|
|
5007
5007
|
interface IconButtonProps extends BeamButtonProps, BeamFocusableProps {
|
|
5008
5008
|
/** The icon to use within the button. */
|
package/dist/index.js
CHANGED
|
@@ -3855,11 +3855,11 @@ var CssBuilder = class _CssBuilder {
|
|
|
3855
3855
|
);
|
|
3856
3856
|
}
|
|
3857
3857
|
// buttonBase
|
|
3858
|
-
/** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "
|
|
3858
|
+
/** Sets `fontWeight: 500; fontSize: "14px"; lineHeight: "20px"; outline: 0; borderRadius: "8px"; display: "inline-flex"; alignItems: "center"; whiteSpace: "nowrap"; transition: "background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"`. */
|
|
3859
3859
|
get buttonBase() {
|
|
3860
3860
|
return this.add("fontWeight", 500).add("fontSize", "14px").add("lineHeight", "20px").add("outline", 0).add(
|
|
3861
3861
|
"borderRadius",
|
|
3862
|
-
"
|
|
3862
|
+
"8px"
|
|
3863
3863
|
).add("display", "inline-flex").add("alignItems", "center").add("whiteSpace", "nowrap").add(
|
|
3864
3864
|
"transition",
|
|
3865
3865
|
"background-color 200ms, border-color 200ms, box-shadow 200ms, left 200ms, right 200ms, margin 200ms"
|
|
@@ -6829,10 +6829,10 @@ var variantStyles = (contrast) => ({
|
|
|
6829
6829
|
focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
|
|
6830
6830
|
},
|
|
6831
6831
|
secondary: {
|
|
6832
|
-
baseStyles: Css.bgWhite.bcGray300.bw1.ba.
|
|
6832
|
+
baseStyles: Css.bgWhite.bcGray300.bw1.ba.blue600.$,
|
|
6833
6833
|
hoverStyles: Css.bgGray100.if(contrast).bgGray300.$,
|
|
6834
6834
|
pressedStyles: Css.bgGray200.if(contrast).bgGray100.$,
|
|
6835
|
-
disabledStyles: Css.bgWhite.
|
|
6835
|
+
disabledStyles: Css.bgWhite.blue300.$,
|
|
6836
6836
|
focusStyles: Css.bshFocus.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
|
|
6837
6837
|
},
|
|
6838
6838
|
tertiary: {
|
|
@@ -6849,6 +6849,13 @@ var variantStyles = (contrast) => ({
|
|
|
6849
6849
|
disabledStyles: Css.gray400.if(contrast).gray700.$,
|
|
6850
6850
|
focusStyles: Css.boxShadow(`0px 0px 0px 2px ${"rgba(255,255,255,1)" /* White */}, 0px 0px 0px 4px ${"rgba(239, 68, 68, 1)" /* Red500 */}`).if(contrast).boxShadow(`0px 0px 0px 2px ${"rgba(239, 68, 68, 1)" /* Red500 */}`).$
|
|
6851
6851
|
},
|
|
6852
|
+
tertiaryQuaternary: {
|
|
6853
|
+
baseStyles: Css.bgTransparent.gray900.if(contrast).gray400.$,
|
|
6854
|
+
hoverStyles: Css.bgGray100.if(contrast).bgGray700.white.$,
|
|
6855
|
+
pressedStyles: Css.gray900.if(contrast).bgWhite.gray900.$,
|
|
6856
|
+
disabledStyles: Css.gray400.if(contrast).gray700.$,
|
|
6857
|
+
focusStyles: Css.boxShadow(`0px 0px 0px 2px ${"rgba(255,255,255,1)" /* White */}, 0px 0px 0px 4px ${"rgba(36, 36, 36, 1)" /* Gray900 */}`).if(contrast).boxShadow(`0px 0px 0px 2px ${"rgba(175, 175, 175, 1)" /* Gray500 */}`).$
|
|
6858
|
+
},
|
|
6852
6859
|
danger: {
|
|
6853
6860
|
baseStyles: Css.bgRed600.white.$,
|
|
6854
6861
|
hoverStyles: Css.bgRed700.$,
|
|
@@ -6856,6 +6863,13 @@ var variantStyles = (contrast) => ({
|
|
|
6856
6863
|
disabledStyles: Css.bgRed200.if(contrast).bgRed900.gray600.$,
|
|
6857
6864
|
focusStyles: Css.bshDanger.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
|
|
6858
6865
|
},
|
|
6866
|
+
quaternary: {
|
|
6867
|
+
baseStyles: Css.bgGray900.white.$,
|
|
6868
|
+
hoverStyles: Css.bgGray700.$,
|
|
6869
|
+
pressedStyles: Css.bgGray800.$,
|
|
6870
|
+
disabledStyles: Css.bgGray200.if(contrast).bgGray900.gray600.$,
|
|
6871
|
+
focusStyles: Css.bshDanger.if(contrast).boxShadow(`0 0 0 2px ${"rgba(255,255,255,1)" /* White */}`).$
|
|
6872
|
+
},
|
|
6859
6873
|
caution: {
|
|
6860
6874
|
baseStyles: Css.bgYellow200.gray900.$,
|
|
6861
6875
|
hoverStyles: Css.bgYellow300.$,
|
|
@@ -6872,11 +6886,11 @@ var variantStyles = (contrast) => ({
|
|
|
6872
6886
|
},
|
|
6873
6887
|
// Todo: handle contrast variant
|
|
6874
6888
|
textSecondary: {
|
|
6875
|
-
baseStyles: Css.
|
|
6889
|
+
baseStyles: Css.blue600.add("fontSize", "inherit").$,
|
|
6876
6890
|
hoverStyles: Css.bgGray100.$,
|
|
6877
|
-
pressedStyles: Css.
|
|
6878
|
-
disabledStyles: Css.bgWhite.
|
|
6879
|
-
focusStyles: Css.
|
|
6891
|
+
pressedStyles: Css.blue600.$,
|
|
6892
|
+
disabledStyles: Css.bgWhite.blue300.$,
|
|
6893
|
+
focusStyles: Css.blue600.$
|
|
6880
6894
|
}
|
|
6881
6895
|
});
|
|
6882
6896
|
var sizeStyles = {
|