@elliemae/ds-button-v2 3.70.0-next.36 → 3.70.0-next.38
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.
|
@@ -38,8 +38,13 @@ __export(styles_exports, {
|
|
|
38
38
|
module.exports = __toCommonJS(styles_exports);
|
|
39
39
|
var React = __toESM(require("react"));
|
|
40
40
|
var import_ds_system = require("@elliemae/ds-system");
|
|
41
|
+
var import_ds_typography = require("@elliemae/ds-typography");
|
|
41
42
|
var import_constants = require("../../constants.js");
|
|
42
43
|
var import_DSButtonDefinitions = require("./DSButtonDefinitions.js");
|
|
44
|
+
const b1Variant = import_ds_typography.VARIANTS_CSS_BODY[import_ds_typography.TYPOGRAPHY_VARIANTS.B1];
|
|
45
|
+
const b1Base = import_ds_system.css`
|
|
46
|
+
${({ $isV3 }) => $isV3 ? b1Variant : ""}
|
|
47
|
+
`;
|
|
43
48
|
const StyledPseudoBorder = (0, import_ds_system.styled)("span")`
|
|
44
49
|
display: none;
|
|
45
50
|
position: absolute;
|
|
@@ -102,6 +107,10 @@ const RawButton = (0, import_ds_system.styled)("button", {
|
|
|
102
107
|
`;
|
|
103
108
|
const defaultButtonStyles = import_ds_system.css`
|
|
104
109
|
${resetButtonStyles}
|
|
110
|
+
// Reuse the b1 typography variant as the text styling base. Button-specific
|
|
111
|
+
// rules below (font-weight, line-height, fontSizeSettings) come AFTER and
|
|
112
|
+
// override it, so rendering is unchanged — this is source reuse, not a restyle.
|
|
113
|
+
${b1Base}
|
|
105
114
|
display: inline-grid;
|
|
106
115
|
grid-gap: 0.615rem;
|
|
107
116
|
position: relative;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/SharedButtonBaseline/styles.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n $size: DSButtonT.ButtonSizesT;\n $buttonType: DSButtonT.ButtonTypesT;\n $shape: DSButtonT.ButtonShapesT;\n $isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nexport const StyledPseudoBorder = styled('span')`\n display: none;\n position: absolute;\n`;\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n border-style: solid;\n border-width: ${({ $size, $buttonType }) =>\n $size === BUTTON_SIZES.S && $buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\n if ($buttonType === BUTTON_TYPES.FILLED || $buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, $size, $buttonType }) => {\n switch ($size) {\n case BUTTON_SIZES.S:\n if ($buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ $buttonType, $isV3 }) =>\n $isV3 === false ||\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ $isV3, theme }) => {\n if ($isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, $buttonType, $size, $isV3 }) =>\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : $isV3 === false\n ? `0 ${theme.space.xs};`\n : $size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : $size === BUTTON_SIZES.M && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : $size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : $size === BUTTON_SIZES.L && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${mobileSizes[$size]};` : `height: ${mobileSizes[$size]};`)}\n min-width: ${({ $size }) => mobileSizes[$size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${sizes[$size]};` : `height: ${sizes[$size]};`)}\n min-width: ${({ $size }) => sizes[$size]};\n }\n border-radius: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\n ${fontSizeSettings}\n ${({ $buttonType }) => ($buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'],\n &[disabled] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ $size }) => ($size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n }\n\n /* Mostrar pseudo-border en focus + disabled */\n &[aria-disabled='true']:focus .pseudo-border,\n &[disabled]:focus .pseudo-border,\n &[aria-disabled='true'][data-testemulatestate='focus'] .pseudo-border,\n &[disabled][data-testemulatestate='focus'] .pseudo-border,\n &:hover[aria-disabled='true']:focus .pseudo-border,\n &:hover[disabled]:focus .pseudo-border,\n &:active[aria-disabled='true']:focus .pseudo-border,\n &:active[disabled]:focus .pseudo-border,\n &[data-testemulatestate='hover'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='hover'][disabled]:focus .pseudo-border,\n &[data-testemulatestate='active'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='acneutraltive'][disabled]:focus .pseudo-border {\n border-color: neutral-100;\n }\n`;\n\nexport const OutlineButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n\nexport const TextButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &:hover:not([disabled]),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADGvB,uBAAgD;AAChD,uBAA8E;AAC9E,iCAA4C;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { VARIANTS_CSS_BODY, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\n// The b1 variant CSS is typed for the typography styled props (it reads\n// props.fontSize / props.lineHeight, both optional \u2192 literal fallback, and theme).\n// None of those conflict with the button at runtime; cast so it composes inside\n// the button's own styled template without widening its prop inference.\nconst b1Variant = VARIANTS_CSS_BODY[TYPOGRAPHY_VARIANTS.B1] as unknown as ReturnType<typeof css>;\n\n// Apply the b1 base ONLY to V3 buttons. V3 already overrides line-height/weight\n// below, so rendering is unchanged. V2 never set line-height, so applying b1 there\n// would shift it \u2014 scoping to V3 keeps V2 byte-for-byte identical.\nconst b1Base = css<StyledButtonPropsT>`\n ${({ $isV3 }) => ($isV3 ? b1Variant : '')}\n`;\n\nexport interface StyledButtonPropsT {\n $size: DSButtonT.ButtonSizesT;\n $buttonType: DSButtonT.ButtonTypesT;\n $shape: DSButtonT.ButtonShapesT;\n $isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nexport const StyledPseudoBorder = styled('span')`\n display: none;\n position: absolute;\n`;\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n border-style: solid;\n border-width: ${({ $size, $buttonType }) =>\n $size === BUTTON_SIZES.S && $buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\n if ($buttonType === BUTTON_TYPES.FILLED || $buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, $size, $buttonType }) => {\n switch ($size) {\n case BUTTON_SIZES.S:\n if ($buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n // Reuse the b1 typography variant as the text styling base. Button-specific\n // rules below (font-weight, line-height, fontSizeSettings) come AFTER and\n // override it, so rendering is unchanged \u2014 this is source reuse, not a restyle.\n ${b1Base}\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ $buttonType, $isV3 }) =>\n $isV3 === false ||\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ $isV3, theme }) => {\n if ($isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, $buttonType, $size, $isV3 }) =>\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : $isV3 === false\n ? `0 ${theme.space.xs};`\n : $size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : $size === BUTTON_SIZES.M && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : $size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : $size === BUTTON_SIZES.L && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${mobileSizes[$size]};` : `height: ${mobileSizes[$size]};`)}\n min-width: ${({ $size }) => mobileSizes[$size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${sizes[$size]};` : `height: ${sizes[$size]};`)}\n min-width: ${({ $size }) => sizes[$size]};\n }\n border-radius: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\n ${fontSizeSettings}\n ${({ $buttonType }) => ($buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'],\n &[disabled] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ $size }) => ($size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n }\n\n /* Mostrar pseudo-border en focus + disabled */\n &[aria-disabled='true']:focus .pseudo-border,\n &[disabled]:focus .pseudo-border,\n &[aria-disabled='true'][data-testemulatestate='focus'] .pseudo-border,\n &[disabled][data-testemulatestate='focus'] .pseudo-border,\n &:hover[aria-disabled='true']:focus .pseudo-border,\n &:hover[disabled]:focus .pseudo-border,\n &:active[aria-disabled='true']:focus .pseudo-border,\n &:active[disabled]:focus .pseudo-border,\n &[data-testemulatestate='hover'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='hover'][disabled]:focus .pseudo-border,\n &[data-testemulatestate='active'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='acneutraltive'][disabled]:focus .pseudo-border {\n border-color: neutral-100;\n }\n`;\n\nexport const OutlineButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n\nexport const TextButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &:hover:not([disabled]),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { css, styled, xStyledCommonProps } from "@elliemae/ds-system";
|
|
3
|
+
import { VARIANTS_CSS_BODY, TYPOGRAPHY_VARIANTS } from "@elliemae/ds-typography";
|
|
3
4
|
import { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from "../../constants.js";
|
|
4
5
|
import { DSButtonName, DSButtonSlots } from "./DSButtonDefinitions.js";
|
|
6
|
+
const b1Variant = VARIANTS_CSS_BODY[TYPOGRAPHY_VARIANTS.B1];
|
|
7
|
+
const b1Base = css`
|
|
8
|
+
${({ $isV3 }) => $isV3 ? b1Variant : ""}
|
|
9
|
+
`;
|
|
5
10
|
const StyledPseudoBorder = styled("span")`
|
|
6
11
|
display: none;
|
|
7
12
|
position: absolute;
|
|
@@ -64,6 +69,10 @@ const RawButton = styled("button", {
|
|
|
64
69
|
`;
|
|
65
70
|
const defaultButtonStyles = css`
|
|
66
71
|
${resetButtonStyles}
|
|
72
|
+
// Reuse the b1 typography variant as the text styling base. Button-specific
|
|
73
|
+
// rules below (font-weight, line-height, fontSizeSettings) come AFTER and
|
|
74
|
+
// override it, so rendering is unchanged — this is source reuse, not a restyle.
|
|
75
|
+
${b1Base}
|
|
67
76
|
display: inline-grid;
|
|
68
77
|
grid-gap: 0.615rem;
|
|
69
78
|
position: relative;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/SharedButtonBaseline/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\nexport interface StyledButtonPropsT {\n $size: DSButtonT.ButtonSizesT;\n $buttonType: DSButtonT.ButtonTypesT;\n $shape: DSButtonT.ButtonShapesT;\n $isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nexport const StyledPseudoBorder = styled('span')`\n display: none;\n position: absolute;\n`;\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n border-style: solid;\n border-width: ${({ $size, $buttonType }) =>\n $size === BUTTON_SIZES.S && $buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\n if ($buttonType === BUTTON_TYPES.FILLED || $buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, $size, $buttonType }) => {\n switch ($size) {\n case BUTTON_SIZES.S:\n if ($buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ $buttonType, $isV3 }) =>\n $isV3 === false ||\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ $isV3, theme }) => {\n if ($isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, $buttonType, $size, $isV3 }) =>\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : $isV3 === false\n ? `0 ${theme.space.xs};`\n : $size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : $size === BUTTON_SIZES.M && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : $size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : $size === BUTTON_SIZES.L && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${mobileSizes[$size]};` : `height: ${mobileSizes[$size]};`)}\n min-width: ${({ $size }) => mobileSizes[$size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${sizes[$size]};` : `height: ${sizes[$size]};`)}\n min-width: ${({ $size }) => sizes[$size]};\n }\n border-radius: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\n ${fontSizeSettings}\n ${({ $buttonType }) => ($buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'],\n &[disabled] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ $size }) => ($size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n }\n\n /* Mostrar pseudo-border en focus + disabled */\n &[aria-disabled='true']:focus .pseudo-border,\n &[disabled]:focus .pseudo-border,\n &[aria-disabled='true'][data-testemulatestate='focus'] .pseudo-border,\n &[disabled][data-testemulatestate='focus'] .pseudo-border,\n &:hover[aria-disabled='true']:focus .pseudo-border,\n &:hover[disabled]:focus .pseudo-border,\n &:active[aria-disabled='true']:focus .pseudo-border,\n &:active[disabled]:focus .pseudo-border,\n &[data-testemulatestate='hover'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='hover'][disabled]:focus .pseudo-border,\n &[data-testemulatestate='active'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='acneutraltive'][disabled]:focus .pseudo-border {\n border-color: neutral-100;\n }\n`;\n\nexport const OutlineButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n\nexport const TextButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &:hover:not([disabled]),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,eAAe,cAAc,cAAc,aAAa,aAAa;AAC9E,SAAS,cAAc,qBAAqB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-nested-ternary */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport { css, styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport { VARIANTS_CSS_BODY, TYPOGRAPHY_VARIANTS } from '@elliemae/ds-typography';\nimport { BUTTON_SHAPES, BUTTON_SIZES, BUTTON_TYPES, mobileSizes, sizes } from '../../constants.js';\nimport { DSButtonName, DSButtonSlots } from './DSButtonDefinitions.js';\nimport type { DSButtonT } from './react-desc-prop-types.js';\n\n// The b1 variant CSS is typed for the typography styled props (it reads\n// props.fontSize / props.lineHeight, both optional \u2192 literal fallback, and theme).\n// None of those conflict with the button at runtime; cast so it composes inside\n// the button's own styled template without widening its prop inference.\nconst b1Variant = VARIANTS_CSS_BODY[TYPOGRAPHY_VARIANTS.B1] as unknown as ReturnType<typeof css>;\n\n// Apply the b1 base ONLY to V3 buttons. V3 already overrides line-height/weight\n// below, so rendering is unchanged. V2 never set line-height, so applying b1 there\n// would shift it \u2014 scoping to V3 keeps V2 byte-for-byte identical.\nconst b1Base = css<StyledButtonPropsT>`\n ${({ $isV3 }) => ($isV3 ? b1Variant : '')}\n`;\n\nexport interface StyledButtonPropsT {\n $size: DSButtonT.ButtonSizesT;\n $buttonType: DSButtonT.ButtonTypesT;\n $shape: DSButtonT.ButtonShapesT;\n $isV3: DSButtonT.RequiredProps['isV3'];\n}\n\nexport const StyledPseudoBorder = styled('span')`\n display: none;\n position: absolute;\n`;\n\nconst pseudoBorder = css<StyledButtonPropsT>`\n position: absolute;\n border-style: solid;\n border-width: ${({ $size, $buttonType }) =>\n $size === BUTTON_SIZES.S && $buttonType === BUTTON_TYPES.FILLED ? '1px' : '2px'};\n ${(styledProps) => {\n const { $buttonType, $shape, theme } = styledProps;\n if ($buttonType === BUTTON_TYPES.FILLED || $buttonType === BUTTON_TYPES.ICON_FILLED) {\n return `\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-color: ${theme.colors.neutral['000']};\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '0px'};\n `;\n }\n return `\n top: -1px;\n left: -1px;\n width: calc(100% + 2px);\n height: calc(100% + 2px);\n border-radius: ${$shape !== BUTTON_SHAPES.DEFAULT ? '50%' : '2px'};\n`;\n }}\n`;\n\nconst fontSizeSettings = css<StyledButtonPropsT>`\n ${({ theme, $size, $buttonType }) => {\n switch ($size) {\n case BUTTON_SIZES.S:\n if ($buttonType === BUTTON_TYPES.TEXT) return `font-size: ${theme.fontSizes.label[200]};`;\n return `font-size: ${theme.fontSizes.label[300]};`;\n case BUTTON_SIZES.L:\n return `\n font-size: ${theme.fontSizes.value[600]};\n `;\n default:\n return `\n font-size: ${theme.fontSizes.value[500]};\n `;\n }\n }}\n`;\n\nconst resetButtonStyles = css`\n outline: none;\n border: none;\n background: transparent;\n &:hover {\n background: transparent;\n }\n`;\n\nexport const RawButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})`\n ${resetButtonStyles}\n`;\n\nconst defaultButtonStyles = css<StyledButtonPropsT>`\n ${resetButtonStyles}\n // Reuse the b1 typography variant as the text styling base. Button-specific\n // rules below (font-weight, line-height, fontSizeSettings) come AFTER and\n // override it, so rendering is unchanged \u2014 this is source reuse, not a restyle.\n ${b1Base}\n display: inline-grid;\n grid-gap: 0.615rem;\n position: relative;\n grid-auto-flow: column;\n place-items: center;\n align-items: ${({ $buttonType, $isV3 }) =>\n $isV3 === false ||\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? 'center'\n : 'start'};\n justify-items: center;\n width: fit-content;\n cursor: pointer;\n font-weight: 600;\n ${({ $isV3, theme }) => {\n if ($isV3) {\n return `\n align-content: space-evenly;\n text-align: left;\n line-height: 1rem;\n @media (min-width: ${theme.breakpoints.small}) {\n line-height: 1.23rem;\n }\n `;\n }\n return '';\n }}\n padding: ${({ theme, $buttonType, $size, $isV3 }) =>\n $buttonType === BUTTON_TYPES.ICON ||\n $buttonType === BUTTON_TYPES.ICON_OUTLINE ||\n $buttonType === BUTTON_TYPES.ICON_FILLED\n ? '0'\n : $isV3 === false\n ? `0 ${theme.space.xs};`\n : $size === BUTTON_SIZES.S\n ? `0.5px ${theme.space.xs} 0.5px`\n : $size === BUTTON_SIZES.M && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `2.5px ${theme.space.xs} 2.5px`\n : $size === BUTTON_SIZES.M\n ? `2px ${theme.space.xs} 2px`\n : $size === BUTTON_SIZES.L && ($buttonType === BUTTON_TYPES.OUTLINE || $buttonType === BUTTON_TYPES.TEXT)\n ? `5.5px ${theme.space.xs} 5.5px`\n : `5px ${theme.space.xs} 5px`};\n border-style: solid;\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${mobileSizes[$size]};` : `height: ${mobileSizes[$size]};`)}\n min-width: ${({ $size }) => mobileSizes[$size]};\n @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n ${({ $size, $isV3 }) => ($isV3 ? `min-height: ${sizes[$size]};` : `height: ${sizes[$size]};`)}\n min-width: ${({ $size }) => sizes[$size]};\n }\n border-radius: ${(styledProps) => {\n const { $shape } = styledProps;\n return $shape === BUTTON_SHAPES.DEFAULT ? '2px' : '50%';\n }};\n ${fontSizeSettings}\n ${({ $buttonType }) => ($buttonType === BUTTON_TYPES.TEXT ? 'text-transform: uppercase;' : '')}\n &[aria-disabled='true'],\n &[disabled] {\n cursor: not-allowed;\n }\n ${xStyledCommonProps}\n`;\n\nexport const DefaultButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n`;\n\nexport const FilledButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background-color: brand-600;\n border-color: brand-600;\n color: neutral-000;\n border-width: ${({ $size }) => ($size === 's' ? '1px;' : '2px')};\n &:focus,\n &[data-testemulatestate='focus'] {\n border-color: brand-700;\n }\n & svg {\n fill: neutral-000;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: brand-700;\n border-color: brand-700;\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n background-color: neutral-100;\n border-color: neutral-100;\n color: #5c6574;\n & svg {\n fill: #5c6574;\n }\n &:focus {\n border-color: brand-700;\n }\n }\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n }\n\n /* Mostrar pseudo-border en focus + disabled */\n &[aria-disabled='true']:focus .pseudo-border,\n &[disabled]:focus .pseudo-border,\n &[aria-disabled='true'][data-testemulatestate='focus'] .pseudo-border,\n &[disabled][data-testemulatestate='focus'] .pseudo-border,\n &:hover[aria-disabled='true']:focus .pseudo-border,\n &:hover[disabled]:focus .pseudo-border,\n &:active[aria-disabled='true']:focus .pseudo-border,\n &:active[disabled]:focus .pseudo-border,\n &[data-testemulatestate='hover'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='hover'][disabled]:focus .pseudo-border,\n &[data-testemulatestate='active'][aria-disabled='true']:focus .pseudo-border,\n &[data-testemulatestate='acneutraltive'][disabled]:focus .pseudo-border {\n border-color: neutral-100;\n }\n`;\n\nexport const OutlineButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n background: neutral-000;\n border-color: neutral-400;\n color: brand-600;\n border-width: 1px;\n & svg {\n fill: brand-600;\n }\n &:hover,\n &:active,\n &[data-testemulatestate='hover'],\n &[data-testemulatestate='active'] {\n background-color: neutral-000;\n border-color: brand-700;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n border-color: neutral-400;\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n\nexport const TextButton = styled('button', {\n name: DSButtonName,\n slot: DSButtonSlots.ROOT,\n})<StyledButtonPropsT>`\n ${defaultButtonStyles}\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n &:hover:not([aria-disabled='true']),\n &:hover:not([disabled]),\n &[data-testemulatestate='hover'] {\n background-color: brand-200;\n color: brand-700;\n & svg {\n fill: brand-700;\n }\n }\n &:active,\n &[data-testemulatestate='active'] {\n color: brand-700;\n }\n\n &[aria-disabled='true'],\n &[disabled],\n &:hover[aria-disabled='true'],\n &:hover[disabled],\n &:active[aria-disabled='true'],\n &:active[disabled],\n &[data-testemulatestate='hover'][aria-disabled='true'],\n &[data-testemulatestate='hover'][disabled],\n &[data-testemulatestate='active'][aria-disabled='true'],\n &[data-testemulatestate='active'][disabled] {\n color: neutral-500;\n & svg {\n fill: neutral-500;\n }\n }\n\n &:focus .pseudo-border,\n &[data-testemulatestate='focus'] .pseudo-border {\n display: block;\n ${pseudoBorder}\n border-color: brand-700;\n }\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,KAAK,QAAQ,0BAA0B;AAChD,SAAS,mBAAmB,2BAA2B;AACvD,SAAS,eAAe,cAAc,cAAc,aAAa,aAAa;AAC9E,SAAS,cAAc,qBAAqB;AAO5C,MAAM,YAAY,kBAAkB,oBAAoB,EAAE;AAK1D,MAAM,SAAS;AAAA,IACX,CAAC,EAAE,MAAM,MAAO,QAAQ,YAAY,EAAG;AAAA;AAUpC,MAAM,qBAAqB,OAAO,MAAM;AAAA;AAAA;AAAA;AAK/C,MAAM,eAAe;AAAA;AAAA;AAAA,kBAGH,CAAC,EAAE,OAAO,YAAY,MACpC,UAAU,aAAa,KAAK,gBAAgB,aAAa,SAAS,QAAQ,KAAK;AAAA,IAC/E,CAAC,gBAAgB;AACjB,QAAM,EAAE,aAAa,QAAQ,MAAM,IAAI;AACvC,MAAI,gBAAgB,aAAa,UAAU,gBAAgB,aAAa,aAAa;AACnF,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKa,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,2BAC1B,WAAW,cAAc,UAAU,QAAQ,KAAK;AAAA;AAAA,EAEvE;AACA,SAAO;AAAA;AAAA;AAAA;AAAA;AAAA,sBAKW,WAAW,cAAc,UAAU,QAAQ,KAAK;AAAA;AAEpE,CAAC;AAAA;AAGH,MAAM,mBAAmB;AAAA,IACrB,CAAC,EAAE,OAAO,OAAO,YAAY,MAAM;AACnC,UAAQ,OAAO;AAAA,IACb,KAAK,aAAa;AAChB,UAAI,gBAAgB,aAAa,KAAM,QAAO,cAAc,MAAM,UAAU,MAAM,GAAG,CAAC;AACtF,aAAO,cAAc,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA,IACjD,KAAK,aAAa;AAChB,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA;AAAA,IAEzC;AACE,aAAO;AAAA,qBACM,MAAM,UAAU,MAAM,GAAG,CAAC;AAAA;AAAA,EAE3C;AACF,CAAC;AAAA;AAGH,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASnB,MAAM,YAAY,OAAO,UAAU;AAAA,EACxC,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,iBAAiB;AAAA;AAGrB,MAAM,sBAAsB;AAAA,IACxB,iBAAiB;AAAA;AAAA;AAAA;AAAA,IAIjB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMO,CAAC,EAAE,aAAa,MAAM,MACnC,UAAU,SACV,gBAAgB,aAAa,QAC7B,gBAAgB,aAAa,gBAC7B,gBAAgB,aAAa,cACzB,WACA,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKX,CAAC,EAAE,OAAO,MAAM,MAAM;AACtB,MAAI,OAAO;AACT,WAAO;AAAA;AAAA;AAAA;AAAA,+BAIkB,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA,EAIlD;AACA,SAAO;AACT,CAAC;AAAA,aACU,CAAC,EAAE,OAAO,aAAa,OAAO,MAAM,MAC7C,gBAAgB,aAAa,QAC7B,gBAAgB,aAAa,gBAC7B,gBAAgB,aAAa,cACzB,MACA,UAAU,QACR,KAAK,MAAM,MAAM,EAAE,MACnB,UAAU,aAAa,IACrB,SAAS,MAAM,MAAM,EAAE,WACvB,UAAU,aAAa,MAAM,gBAAgB,aAAa,WAAW,gBAAgB,aAAa,QAChG,SAAS,MAAM,MAAM,EAAE,WACvB,UAAU,aAAa,IACrB,OAAO,MAAM,MAAM,EAAE,SACrB,UAAU,aAAa,MAAM,gBAAgB,aAAa,WAAW,gBAAgB,aAAa,QAChG,SAAS,MAAM,MAAM,EAAE,WACvB,OAAO,MAAM,MAAM,EAAE,MAAM;AAAA;AAAA,IAEzC,CAAC,EAAE,OAAO,MAAM,MAAO,QAAQ,eAAe,YAAY,KAAK,CAAC,MAAM,WAAW,YAAY,KAAK,CAAC,GAAI;AAAA,eAC5F,CAAC,EAAE,MAAM,MAAM,YAAY,KAAK,CAAC;AAAA,uBACzB,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,MACvD,CAAC,EAAE,OAAO,MAAM,MAAO,QAAQ,eAAe,MAAM,KAAK,CAAC,MAAM,WAAW,MAAM,KAAK,CAAC,GAAI;AAAA,iBAChF,CAAC,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC;AAAA;AAAA,mBAEzB,CAAC,gBAAgB;AAChC,QAAM,EAAE,OAAO,IAAI;AACnB,SAAO,WAAW,cAAc,UAAU,QAAQ;AACpD,CAAC;AAAA,IACC,gBAAgB;AAAA,IAChB,CAAC,EAAE,YAAY,MAAO,gBAAgB,aAAa,OAAO,+BAA+B,EAAG;AAAA;AAAA;AAAA;AAAA;AAAA,IAK5F,kBAAkB;AAAA;AAGf,MAAM,gBAAgB,OAAO,UAAU;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,mBAAmB;AAAA;AAGhB,MAAM,eAAe,OAAO,UAAU;AAAA,EAC3C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,mBAAmB;AAAA;AAAA;AAAA;AAAA,kBAIL,CAAC,EAAE,MAAM,MAAO,UAAU,MAAM,SAAS,KAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAsC3D,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBX,MAAM,gBAAgB,OAAO,UAAU;AAAA,EAC5C,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAuCjB,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,aAAa,OAAO,UAAU;AAAA,EACzC,MAAM;AAAA,EACN,MAAM,cAAc;AACtB,CAAC;AAAA,IACG,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAyCjB,YAAY;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-button-v2",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.38",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Button",
|
|
6
6
|
"files": [
|
|
@@ -36,15 +36,16 @@
|
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
40
|
-
"@elliemae/ds-system": "3.70.0-next.
|
|
41
|
-
"@elliemae/ds-typescript-helpers": "3.70.0-next.
|
|
39
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.38",
|
|
40
|
+
"@elliemae/ds-system": "3.70.0-next.38",
|
|
41
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.38",
|
|
42
|
+
"@elliemae/ds-typography": "3.70.0-next.38"
|
|
42
43
|
},
|
|
43
44
|
"devDependencies": {
|
|
44
45
|
"jest": "^30.0.0",
|
|
45
46
|
"styled-components": "~5.3.9",
|
|
46
|
-
"@elliemae/ds-monorepo-devops": "3.70.0-next.
|
|
47
|
-
"@elliemae/ds-test-utils": "3.70.0-next.
|
|
47
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.38",
|
|
48
|
+
"@elliemae/ds-test-utils": "3.70.0-next.38"
|
|
48
49
|
},
|
|
49
50
|
"peerDependencies": {
|
|
50
51
|
"react": "^18.3.1",
|