{"version":3,"file":"styles.css","mappings":"AA6GA,gBACA,6BACA,0BAGA,wDADA,iBAwBA,CArBA,+BACA,oDACA,sDACA,CAEA,+BAEA,4DADA,sCAEA,CAEA,+BACA,eACA,CAEA,+BACA,2CACA,CAEA,+BACA,wCACA","sources":["webpack://@square/maker/./src/components/Card/src/Card.vue"],"sourcesContent":["<template>\n\t<m-theme\n\t\t:class=\"[\n\t\t\t$s.Card,\n\t\t\t$s[`shape_${resolvedShape}`],\n\t\t\t$s[`variant_${resolvedVariant}`],\n\t\t]\"\n\t\tv-bind=\"$attrs\"\n\t\t:style=\"style\"\n\t\t:theme=\"cardTheme\"\n\t\t:aria-labelledby=\"ariaLabelledby\"\n\t\tv-on=\"$listeners\"\n\t>\n\t\t<!-- @slot card content -->\n\t\t<slot />\n\t</m-theme>\n</template>\n\n<script>\nimport {\n\tMTheme,\n\tMThemeKey,\n\tdefaultTheme,\n\tresolveThemeableProps,\n} from '@square/maker/components/Theme';\nimport { getContrast } from '@square/maker/utils/get-contrast';\nimport makerColors from '@square/maker/utils/maker-colors';\nimport { colord } from 'colord';\n\n/**\n * @inheritAttrs div\n * @inheritListeners div\n */\nexport default {\n\tcomponents: {\n\t\tMTheme,\n\t},\n\n\tinject: {\n\t\ttheme: {\n\t\t\tdefault: defaultTheme(),\n\t\t\tfrom: MThemeKey,\n\t\t},\n\t},\n\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t/**\n\t\t * card shape\n\t\t */\n\t\tshape: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (shape) => ['squared', 'rounded', 'pill'].includes(shape),\n\t\t},\n\t\t/**\n\t\t * card variant\n\t\t */\n\t\tvariant: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (variant) => ['outline', 'glass'].includes(variant),\n\t\t},\n\t\t/**\n\t\t * The ID of the element that labels the card.\n\t\t */\n\t\tariaLabelledby: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('card', [\n\t\t\t'shape',\n\t\t\t'variant',\n\t\t]),\n\n\t\tstyle() {\n\t\t\tif (this.variant !== 'glass') {\n\t\t\t\treturn {};\n\t\t\t}\n\n\t\t\tconst alpha = 0.8;\n\t\t\treturn {\n\t\t\t\t'--bg-color-glass': colord(this.theme.colors['neutral-100']).alpha(alpha).toRgbString(),\n\t\t\t};\n\t\t},\n\n\t\tcardTheme() {\n\t\t\tif (this.variant !== 'glass') {\n\t\t\t\treturn {};\n\t\t\t}\n\n\t\t\tconst cardBg = this.theme.colors['neutral-100'];\n\t\t\treturn {\n\t\t\t\tcolors: {\n\t\t\t\t\t...makerColors(cardBg, this.theme.colors.primary),\n\t\t\t\t\theading: getContrast(cardBg, this.theme.colors.heading),\n\t\t\t\t\tbody: getContrast(cardBg, this.theme.colors.body),\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Card {\n\t--radius-rounded-default: 4px;\n\t--radius-pill-default: 4px;\n\n\tpadding: 16px 24px;\n\tborder-radius: $maker-shape-card-border-radius;\n\n\t&.variant_outline {\n\t\tbackground-color: $maker-color-background;\n\t\tborder: 1px solid $maker-color-neutral-20;\n\t}\n\n\t&.variant_glass {\n\t\tbackground-color: var(--bg-color-glass);\n\t\tbackdrop-filter: blur(2px);\n\t}\n\n\t&.shape_squared {\n\t\tborder-radius: 0;\n\t}\n\n\t&.shape_rounded {\n\t\tborder-radius: var(--radius-rounded-default);\n\t}\n\n\t&.shape_pill {\n\t\tborder-radius: var(--radius-pill-default);\n\t}\n}\n</style>\n"],"names":[],"sourceRoot":""}