@bcgov/design-system-react-components 0.5.1-pr555 → 0.5.1-pr558
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/cjs/index.cjs +1 -1
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/types/components/Button/Button.d.ts +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Button/Button.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/package.json +1 -1
package/dist/cjs/index.cjs
CHANGED
|
@@ -16060,7 +16060,7 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
16060
16060
|
var css_248z$q = ".bcds-react-aria-Disclosure {\n display: flex;\n flex-direction: column;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n overflow: hidden;\n}\n\n.bcds-react-aria-Disclosure--Button {\n display: inline-flex;\n flex-direction: row;\n padding: var(--layout-padding-small) var(--layout-padding-medium);\n gap: var(--layout-margin-small);\n justify-content: space-between;\n align-items: center;\n background-color: var(--surface-color-background-light-gray);\n border: none;\n cursor: pointer;\n font: var(--typography-bold-body);\n color: var(--typography-color-primary);\n}\n\n/* Hover */\n.bcds-react-aria-Disclosure--Button[data-hovered] {\n background-color: var(--surface-color-menus-hover);\n}\n\n/* Accordion content */\n.bcds-react-aria-Disclosure[data-expanded]\n > .bcds-react-aria-Disclosure--Panel {\n display: flex;\n align-items: flex-start;\n padding: var(--layout-padding-medium);\n gap: var(--layout-margin-small);\n background-color: var(--surface-color-forms-default);\n font: var(--typography-regular-body);\n}\n\n/* Focus state */\n.bcds-react-aria-Disclosure[data-focus-visible-within] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Override default focus behaviour for button */\n.bcds-react-aria-Disclosure[data-focus-visible-within]\n > .bcds-react-aria-Disclosure--Button {\n outline: none;\n}\n\n.bcds-react-aria-Disclosure--Button[data-focused] {\n outline: none;\n}\n\n/* Disabled state */\n.bcds-react-aria-Disclosure[data-disabled]\n > .bcds-react-aria-Disclosure--Button {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
16061
16061
|
styleInject(css_248z$q);
|
|
16062
16062
|
|
|
16063
|
-
var css_248z$p = ".bcds-react-aria-Button {\n border: none;\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: var(--layout-padding-small);\n font: var(--typography-regular-body);\n
|
|
16063
|
+
var css_248z$p = ".bcds-react-aria-Button {\n border: none;\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: var(--layout-padding-small);\n font: var(--typography-regular-body);\n}\n.bcds-react-aria-Button[data-disabled] {\n cursor: not-allowed;\n}\n.bcds-react-aria-Button[data-focus-visible] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Icon button */\n.bcds-react-aria-Button.icon {\n align-items: center;\n justify-content: space-around;\n}\n\n/* Sizes */\n.bcds-react-aria-Button.xsmall {\n min-height: 24px;\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n font: var(--typography-regular-label);\n}\n.bcds-react-aria-Button.xsmall.icon {\n padding: unset;\n height: 24px;\n width: 24px;\n min-width: 24px;\n}\n.bcds-react-aria-Button.small {\n min-height: 32px;\n padding: var(--layout-padding-none) 0.75rem /* to be replaced with new token later */;\n font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Button.small.icon {\n padding: unset;\n height: 32px;\n width: 32px;\n min-width: 32px;\n}\n.bcds-react-aria-Button.medium {\n min-height: 40px;\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n.bcds-react-aria-Button.medium.icon {\n padding: unset;\n height: 40px;\n width: 40px;\n min-width: 40px;\n}\n.bcds-react-aria-Button.large, /* this doesn't work on its own */\n.bcds-react-aria-Button.large.primary, \n.bcds-react-aria-Button.large.secondary, \n.bcds-react-aria-Button.large.tertiary, \n.bcds-react-aria-Button.large.link {\n min-height: 48px;\n padding: var(--layout-padding-none) var(--layout-padding-large);\n}\n.bcds-react-aria-Button.large.icon {\n padding: unset;\n height: 48px;\n width: 48px;\n min-width: 48px;\n}\n\n/* Variant - Primary */\n.bcds-react-aria-Button.primary {\n background: var(--surface-color-primary-button-default);\n color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Button.primary.danger {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.primary[data-disabled] {\n background-color: var(--surface-color-primary-danger-button-disabled);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.primary[data-hovered] {\n background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Button.primary.danger[data-hovered] {\n background-color: var(--surface-color-primary-danger-button-hover);\n}\n\n/* Variant - Secondary */\n.bcds-react-aria-Button.secondary {\n background-color: var(--surface-color-secondary-button-default);\n border: 1px solid var(--surface-color-border-dark);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.secondary.danger {\n border-color: var(--support-border-color-danger);\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.secondary[data-disabled] {\n background-color: var(--surface-color-secondary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.secondary[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n}\n.bcds-react-aria-Button.secondary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Tertiary */\n.bcds-react-aria-Button.tertiary {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.tertiary.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.tertiary[data-disabled] {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.tertiary[data-hovered] {\n background-color: var(--surface-color-tertiary-button-hover);\n}\n.bcds-react-aria-Button.tertiary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Link */\n.bcds-react-aria-Button.link {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-link);\n text-decoration: underline;\n text-underline-offset: 0.3em;\n}\n.bcds-react-aria-Button.link.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.link[data-disabled] {\n color: var(--typography-color-disabled);\n}\n";
|
|
16064
16064
|
styleInject(css_248z$p);
|
|
16065
16065
|
|
|
16066
16066
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|