app/components/yattho/beta/button.css.map in yattho_view_components-0.0.1 vs app/components/yattho/beta/button.css.map in yattho_view_components-0.1.1

- old
+ new

@@ -1 +1 @@ -{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --yattho-duration-fast: 80ms;\n --yattho-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--yattho-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--yattho-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--yattho-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--yattho-duration-fast) var(--yattho-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--yattho-control-medium-size, 32px);\n padding: 0 var(--yattho-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--yattho-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--yattho-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--yattho-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--yattho-text-body-size-small, 12px);\n height: var(--yattho-control-small-size, 28px);\n padding: 0 var(--yattho-control-small-paddingInline-condensed, 8px);\n gap: var(--yattho-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--yattho-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--yattho-control-large-size, 40px);\n padding: 0 var(--yattho-control-large-paddingInline-spacious, 16px);\n gap: var(--yattho-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--yattho-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--yattho-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-yattho-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-yattho-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-yattho-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-yattho-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-yattho-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-yattho-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-yattho-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--yattho-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--yattho-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--yattho-control-large-size, 40px);\n }\n}",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}"]} +{"version":3,"sources":["button.pcss","<no source>","../../../../lib/postcss_mixins/focusOutlineOnEmphasis.pcss"],"names":[],"mappings":"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","file":"button.css","sourcesContent":["/* CSS for Button */\n\n/* temporary, pre primitives release */\n:root {\n --yattho-duration-fast: 80ms;\n --yattho-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);\n}\n\n/* base button */\n.Button {\n position: relative;\n font-size: var(--yattho-text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-medium, 500);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--yattho-borderWidth-thin, 1px) solid;\n border-color: transparent;\n border-radius: var(--yattho-borderRadius-medium, 6px);\n color: var(--color-btn-text);\n transition: var(--yattho-duration-fast) var(--yattho-easing-easeInOut);\n transition-property: color, fill, background-color, border-color;\n text-align: center;\n height: var(--yattho-control-medium-size, 32px);\n padding: 0 var(--yattho-control-medium-paddingInline-normal, 12px);\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: var(--yattho-control-medium-gap, 8px);\n min-width: max-content;\n\n /* mobile friendly sizing */\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 48px, 48px;\n }\n }\n\n /* base states */\n\n &:hover {\n transition-duration: var(--yattho-duration-fast);\n }\n\n &:active {\n transition: none;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n cursor: not-allowed;\n box-shadow: none;\n }\n}\n\n.Button-withTooltip {\n position: relative;\n display: inline-block;\n}\n\na.Button,\nsummary.Button {\n display: inline-flex;\n\n &:hover {\n text-decoration: none;\n }\n}\n\n/* wrap grid content to allow trailingAction to lock-right */\n.Button-content {\n flex: 1 0 auto;\n display: grid;\n grid-template-areas: 'leadingVisual text trailingVisual';\n grid-template-columns: min-content minmax(0, auto) min-content;\n align-items: center;\n place-content: center;\n\n /* padding-bottom: 1px; optical alignment for firefox */\n\n & > :not(:last-child) {\n margin-right: var(--yattho-control-medium-gap, 8px);\n }\n}\n\n/* center child elements for fullWidth */\n.Button-content--alignStart {\n justify-content: start;\n}\n\n/* button child elements */\n\n/* align svg */\n.Button-visual {\n display: flex;\n pointer-events: none; /* allow click handler to work, avoiding visuals */\n\n & .Counter {\n color: inherit;\n background-color: var(--color-btn-counter-bg);\n }\n}\n\n.Button-label {\n grid-area: text;\n white-space: nowrap;\n line-height: var(--yattho-text-body-lineHeight-medium, calc(20 / 14));\n}\n\n.Button-leadingVisual {\n grid-area: leadingVisual;\n}\n\n.Button-trailingVisual {\n grid-area: trailingVisual;\n}\n\n.Button-trailingAction {\n margin-right: calc(var(--base-size-4, 4px) * -1);\n}\n\n/* sizes */\n\n.Button--small {\n font-size: var(--yattho-text-body-size-small, 12px);\n height: var(--yattho-control-small-size, 28px);\n padding: 0 var(--yattho-control-small-paddingInline-condensed, 8px);\n gap: var(--yattho-control-small-gap, 4px);\n\n & .Button-label {\n line-height: var(--yattho-text-body-lineHeight-small, calc(20 / 12));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--yattho-control-small-gap, 4px);\n }\n }\n}\n\n.Button--large {\n height: var(--yattho-control-large-size, 40px);\n padding: 0 var(--yattho-control-large-paddingInline-spacious, 16px);\n gap: var(--yattho-control-large-gap, 8px);\n\n & .Button-label {\n line-height: var(--yattho-text-body-lineHeight-large, calc(48 / 32));\n }\n\n & .Button-content {\n & > :not(:last-child) {\n margin-right: var(--yattho-control-large-gap, 8px);\n }\n }\n}\n\n.Button--fullWidth {\n width: 100%;\n}\n\n/* variants */\n\n/* primary */\n.Button--primary {\n color: var(--color-btn-primary-text);\n fill: var(--color-btn-primary-icon);\n background-color: var(--color-btn-primary-bg);\n border-color: var(--color-btn-primary-border);\n box-shadow: var(--color-btn-primary-shadow), var(--color-btn-primary-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-primary-hover-bg);\n border-color: var(--color-btn-primary-hover-border);\n }\n\n /* fallback :focus state */\n &:focus {\n @mixin focusOutlineOnEmphasis;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n outline: solid 1px transparent;\n box-shadow: none;\n }\n }\n\n /* default focus state */\n &:focus-visible {\n @mixin focusOutlineOnEmphasis;\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n background-color: var(--color-btn-primary-selected-bg);\n box-shadow: var(--color-btn-primary-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-primary-disabled-text);\n background-color: var(--color-btn-primary-disabled-bg);\n border-color: var(--color-btn-primary-disabled-border);\n fill: var(--color-btn-primary-disabled-text);\n }\n}\n\n/* default (secondary) */\n.Button--secondary {\n color: var(--color-btn-text);\n fill: var(--color-fg-muted); /* help this */\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n background-color: var(--color-btn-hover-bg);\n border-color: var(--color-btn-hover-border);\n }\n\n &:active:not(:disabled) {\n background-color: var(--color-btn-active-bg);\n border-color: var(--color-btn-active-border);\n }\n\n &[aria-pressed='true'] {\n background-color: var(--color-btn-selected-bg);\n box-shadow: var(--color-yattho-shadow-inset);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-yattho-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-yattho-fg-disabled);\n }\n}\n\n.Button--invisible {\n color: var(--color-btn-text);\n\n &:hover:not(:disabled) {\n background-color: var(--color-action-list-item-default-hover-bg);\n }\n\n &[aria-pressed='true'],\n &:active:not(:disabled) {\n background-color: var(--color-action-list-item-default-active-bg);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-yattho-fg-disabled);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n fill: var(--color-yattho-fg-disabled);\n }\n\n /* if button has no visuals, use link blue for text */\n &.Button--invisible-noVisuals .Button-label {\n color: var(--color-accent-fg);\n }\n\n & .Button-visual {\n color: var(--color-fg-muted);\n }\n}\n\n.Button--link {\n color: var(--color-accent-fg);\n fill: var(--color-accent-fg);\n display: inline-block;\n font-size: inherit;\n border: none;\n height: unset;\n padding: 0;\n\n &:hover:not(:disabled) {\n text-decoration: underline;\n }\n\n &:focus-visible, &:focus {\n outline-offset: 2px;\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-yattho-fg-disabled);\n background-color: transparent;\n border-color: transparent;\n fill: var(--color-yattho-fg-disabled);\n }\n}\n\n/* danger */\n.Button--danger {\n color: var(--color-btn-danger-text);\n fill: var(--color-btn-danger-icon);\n background-color: var(--color-btn-bg);\n border-color: var(--color-btn-border);\n box-shadow: var(--color-btn-shadow), var(--color-btn-inset-shadow);\n\n &:hover:not(:disabled) {\n color: var(--color-btn-danger-hover-text);\n fill: var(--color-btn-danger-hover-text);\n background-color: var(--color-btn-danger-hover-bg);\n border-color: var(--color-btn-danger-hover-border);\n box-shadow: var(--color-btn-danger-hover-shadow), var(--color-btn-danger-hover-inset-shadow);\n }\n\n &:active:not(:disabled),\n &[aria-pressed='true'] {\n color: var(--color-btn-danger-selected-text);\n fill: var(--color-btn-danger-selected-text);\n background-color: var(--color-btn-danger-selected-bg);\n border-color: var(--color-btn-danger-selected-border);\n box-shadow: var(--color-btn-danger-selected-shadow);\n }\n\n &:disabled,\n &[aria-disabled='true'] {\n color: var(--color-btn-danger-disabled-text);\n fill: var(--color-btn-danger-disabled-text);\n background-color: var(--color-btn-danger-disabled-bg);\n border-color: var(--color-btn-border);\n }\n}\n\n\n.Button--iconOnly {\n display: grid;\n place-content: center;\n padding: unset;\n width: var(--yattho-control-medium-size, 32px);\n\n &.Button--small {\n width: var(--yattho-control-small-size, 28px);\n }\n\n &.Button--large {\n width: var(--yattho-control-large-size, 40px);\n }\n}",null,"/* outline with fg box-shadow for buttons */\n@define-mixin focusOutlineOnEmphasis $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: inset 0 0 0 3px var(--color-fg-on-emphasis);\n}"]} \ No newline at end of file