@square/maker/components/Text/styles.css.map

Maker Design System by Square

{"version":3,"file":"styles.css","mappings":"AAyQA,gBAIA,qBACA,6CACA,oDAGA,8DACA,6DACA,gCACA,4DACA,4DACA,4DACA,4DACA,4DACA,4DACA,4DAGA,sBACA,qCACA,8DAGA,8DACA,6DACA,gCACA,4DACA,4DACA,4DACA,4DACA,4DACA,4DACA,4DAGA,uEACA,mBACA,0EACA,0EACA,wDACA,wDACA,qDACA,qDACA,qDACA,qDACA,qDACA,qDACA,qDACA,qDAGA,wFACA,wFACA,2EACA,2EACA,2EACA,2EACA,2EACA,2EACA,2EACA,2EAGA,kBACA,yBAGA,oDACA,mDACA,0BACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDACA,kDA9EA,QA+EA,CAEA,0BACA,gBACA,mBACA,CACA,CAEA,+BACA,uBACA,wBACA,CAEA,+BACA,uBACA,wBACA,CAEA,+BACA,sBACA,uBACA,CAEA,+BACA,sBACA,uBACA,CAEA,+BACA,sBACA,uBACA,CAEA,+BACA,sBACA,uBACA,CAEA,+BACA,sBACA,uBACA,CAEA,+BACA,sBACA,uBACA,CAEA,+BACA,sBACA,uBACA,CAEA,+BACA,sBACA,uBACA","sources":["webpack://@square/maker/./src/components/Text/src/Text.vue"],"sourcesContent":["<script>\nimport { MThemeKey, defaultTheme, resolveThemeableProps } from '@square/maker/components/Theme';\nimport cssValidator from '@square/maker/utils/css-validator';\n\nconst MIN_SIZE = -2;\nconst MAX_SIZE = 7;\n\nexport default {\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 * patterns are defined at the theme level\n\t\t */\n\t\tpattern: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t},\n\t\t/**\n\t\t * [HTML Element](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)\n\t\t */\n\t\telement: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (element) => ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'div', 'li'].includes(element),\n\t\t},\n\t\t/**\n\t\t * Size of text as step in fluid scale (-2 to 7)\n\t\t */\n\t\tsize: {\n\t\t\ttype: Number,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: (size) => size >= MIN_SIZE && size <= MAX_SIZE,\n\t\t},\n\t\t/**\n\t\t * [Font family](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)\n\t\t */\n\t\tfontFamily: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('font-family'),\n\t\t},\n\t\t/**\n\t\t * [Font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)\n\t\t */\n\t\tfontWeight: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('font-weight'),\n\t\t},\n\t\t/**\n\t\t * [Font size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size). Overrides the `size` prop, and disables type scaling.\n\t\t */\n\t\tfontSize: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('font-size'),\n\t\t},\n\t\t/**\n\t\t * [Line height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height). Overrides the internally calculated line height.\n\t\t */\n\t\tlineHeight: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('line-height'),\n\t\t},\n\t\t/**\n\t\t * [Letter spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing). Overrides the internally calculated line height.\n\t\t */\n\t\tletterSpacing: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('letter-spacing'),\n\t\t},\n\t\t/**\n\t\t * [Color](https://developer.mozilla.org/en-US/docs/Web/CSS/color)\n\t\t */\n\t\tcolor: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('color'),\n\t\t},\n\t\t/**\n\t\t * [Font style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style)\n\t\t */\n\t\tfontStyle: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('font-style'),\n\t\t},\n\t\t/**\n\t\t * [Text transform](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform)\n\t\t */\n\t\ttextTransform: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('text-transform'),\n\t\t},\n\t\t/**\n\t\t * [Text decoration](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration)\n\t\t */\n\t\ttextDecoration: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('text-decoration'),\n\t\t},\n\t\t/**\n\t\t * [Text align](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)\n\t\t */\n\t\ttextAlign: {\n\t\t\ttype: String,\n\t\t\tdefault: undefined,\n\t\t\tvalidator: cssValidator('text-align'),\n\t\t},\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tisCenteredAndSpaced: false,\n\t\t};\n\t},\n\n\tcomputed: {\n\t\t...resolveThemeableProps('text', [\n\t\t\t'pattern',\n\t\t\t'element',\n\t\t\t'size',\n\t\t\t'fontFamily',\n\t\t\t'fontWeight',\n\t\t\t'fontSize',\n\t\t\t'color',\n\t\t\t'fontStyle',\n\t\t\t'textTransform',\n\t\t\t'textDecoration',\n\t\t\t'textAlign',\n\t\t\t'lineHeight',\n\t\t\t'letterSpacing',\n\t\t]),\n\t\ttag() {\n\t\t\tif (this.resolvedElement) {\n\t\t\t\treturn this.resolvedElement;\n\t\t\t}\n\t\t\tconst h1Threshold = 4;\n\t\t\tconst h2Threshold = 3;\n\t\t\tconst h3Threshold = 2;\n\t\t\tif (this.resolvedSize >= h1Threshold) {\n\t\t\t\treturn 'h1';\n\t\t\t}\n\t\t\tif (this.resolvedSize >= h2Threshold) {\n\t\t\t\treturn 'h2';\n\t\t\t}\n\t\t\tif (this.resolvedSize >= h3Threshold) {\n\t\t\t\treturn 'h3';\n\t\t\t}\n\t\t\treturn 'p';\n\t\t},\n\t\tsizeClass() {\n\t\t\tconst minNonNegativeSize = 0;\n\t\t\tif (this.resolvedSize >= minNonNegativeSize) {\n\t\t\t\treturn this.resolvedSize.toString();\n\t\t\t}\n\t\t\treturn `minus${this.resolvedSize}`;\n\t\t},\n\t\tinlineStyles() {\n\t\t\tconst { fonts } = this.theme;\n\t\t\tconst styles = {\n\t\t\t\tfontSize: this.resolvedFontSize,\n\t\t\t\tlineHeight: this.lineHeight,\n\t\t\t\tletterSpacing: this.letterSpacing,\n\t\t\t\t'--mobile-base-font-size': fonts.baseSize,\n\t\t\t\t'--mobile-font-size-scale': fonts.sizeScale,\n\t\t\t};\n\t\t\tif (this.resolvedFontFamily !== 'inherit') {\n\t\t\t\tstyles.fontFamily = this.resolvedFontFamily;\n\t\t\t}\n\t\t\tif (this.resolvedFontWeight !== 'inherit') {\n\t\t\t\tstyles.fontWeight = this.resolvedFontWeight;\n\t\t\t}\n\t\t\tif (this.resolvedColor !== 'inherit') {\n\t\t\t\tstyles.color = this.resolvedColor;\n\t\t\t}\n\t\t\tif (this.resolvedFontStyle !== 'inherit') {\n\t\t\t\tstyles.fontStyle = this.resolvedFontStyle;\n\t\t\t}\n\t\t\tif (this.resolvedTextTransform !== 'inherit') {\n\t\t\t\tstyles.textTransform = this.resolvedTextTransform;\n\t\t\t}\n\t\t\tif (this.resolvedTextDecoration !== 'inherit') {\n\t\t\t\tstyles.textDecoration = this.resolvedTextDecoration;\n\t\t\t}\n\t\t\tif (this.resolvedTextAlign !== 'inherit') {\n\t\t\t\tstyles.textAlign = this.resolvedTextAlign;\n\t\t\t}\n\t\t\tif (this.resolvedLineHeight !== 'inherit') {\n\t\t\t\tstyles.lineHeight = this.resolvedLineHeight;\n\t\t\t}\n\t\t\tif (this.resolvedLetterSpacing !== 'inherit') {\n\t\t\t\tstyles.letterSpacing = this.resolvedLetterSpacing;\n\t\t\t}\n\t\t\tif (this.isCenteredAndSpaced) {\n\t\t\t\tstyles.paddingLeft = styles.letterSpacing;\n\t\t\t}\n\t\t\treturn styles;\n\t\t},\n\t},\n\n\tmounted() {\n\t\tthis.detectAlignCenterAndLetterSpacing();\n\t},\n\n\tupdated() {\n\t\tthis.detectAlignCenterAndLetterSpacing();\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Letter spacing is applied to the right-side of the letter\n\t\t * so when the text is centered, it becomes misaligned\n\t\t *\n\t\t * Detect if the text is center aligned and add left padding\n\t\t * to balance out the letter spacing\n\t\t */\n\t\tdetectAlignCenterAndLetterSpacing() {\n\t\t\tif (!this.resolvedLetterSpacing) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst computedStyle = window.getComputedStyle(this.$el);\n\t\t\tconst textAlign = computedStyle.getPropertyValue('text-align');\n\t\t\tthis.isCenteredAndSpaced = textAlign === 'center';\n\t\t},\n\t},\n\n\trender(createElement) {\n\t\tconst {\n\t\t\t$s,\n\t\t\ttag,\n\t\t\tsizeClass,\n\t\t\tinlineStyles,\n\t\t} = this;\n\t\t/**\n\t\t * @slot text content\n\t\t */\n\t\tconst defaultSlot = this.$slots.default;\n\t\treturn createElement(tag, {\n\t\t\tclass: [\n\t\t\t\t$s.Text,\n\t\t\t\t$s[`size_${sizeClass}`],\n\t\t\t],\n\t\t\tattrs: this.$attrs,\n\t\t\tstyle: inlineStyles,\n\t\t\ton: this.$listeners,\n\t\t}, defaultSlot);\n\t},\n};\n</script>\n\n<style module=\"$s\">\n.Text {\n\tmargin: 0;\n\n\t/* min breakpoint config */\n\t--min-resolution: 320; /* arbitrary value */\n\t--min-font-size: var(--mobile-base-font-size);\n\t--min-font-size-scale: var(--mobile-font-size-scale);\n\n\t/* min type scale */\n\t--min-fs--2: calc(var(--min-fs--1) / var(--min-font-size-scale));\n\t--min-fs--1: calc(var(--min-fs-0) / var(--min-font-size-scale));\n\t--min-fs-0: var(--min-font-size);\n\t--min-fs-1: calc(var(--min-fs-0) * var(--min-font-size-scale));\n\t--min-fs-2: calc(var(--min-fs-1) * var(--min-font-size-scale));\n\t--min-fs-3: calc(var(--min-fs-2) * var(--min-font-size-scale));\n\t--min-fs-4: calc(var(--min-fs-3) * var(--min-font-size-scale));\n\t--min-fs-5: calc(var(--min-fs-4) * var(--min-font-size-scale));\n\t--min-fs-6: calc(var(--min-fs-5) * var(--min-font-size-scale));\n\t--min-fs-7: calc(var(--min-fs-6) * var(--min-font-size-scale));\n\n\t/* max breakpoint config */\n\t--max-resolution: 1280; /* arbitrary value */\n\t--max-font-size: var(--min-font-size);\n\t--max-font-size-scale: calc(var(--min-font-size-scale) + 0.11); /* arbitrary value */\n\n\t/* max type scale */\n\t--max-fs--2: calc(var(--max-fs--1) / var(--max-font-size-scale));\n\t--max-fs--1: calc(var(--max-fs-0) / var(--max-font-size-scale));\n\t--max-fs-0: var(--max-font-size);\n\t--max-fs-1: calc(var(--max-fs-0) * var(--max-font-size-scale));\n\t--max-fs-2: calc(var(--max-fs-1) * var(--max-font-size-scale));\n\t--max-fs-3: calc(var(--max-fs-2) * var(--max-font-size-scale));\n\t--max-fs-4: calc(var(--max-fs-3) * var(--max-font-size-scale));\n\t--max-fs-5: calc(var(--max-fs-4) * var(--max-font-size-scale));\n\t--max-fs-6: calc(var(--max-fs-5) * var(--max-font-size-scale));\n\t--max-fs-7: calc(var(--max-fs-6) * var(--max-font-size-scale));\n\n\t/* interpolation variables */\n\t--resolution-range: calc(var(--max-resolution) - var(--min-resolution));\n\t--resolution: 100vw;\n\t--resolution-progress: calc(var(--resolution) - (var(--min-resolution) * 1px));\n\t--interpolate-by: calc(var(--resolution-progress) / var(--resolution-range));\n\t--range-fs--2: calc(var(--max-fs--2) - var(--min-fs--2));\n\t--range-fs--1: calc(var(--max-fs--1) - var(--min-fs--1));\n\t--range-fs-0: calc(var(--max-fs-0) - var(--min-fs-0));\n\t--range-fs-1: calc(var(--max-fs-1) - var(--min-fs-1));\n\t--range-fs-2: calc(var(--max-fs-2) - var(--min-fs-2));\n\t--range-fs-3: calc(var(--max-fs-3) - var(--min-fs-3));\n\t--range-fs-4: calc(var(--max-fs-4) - var(--min-fs-4));\n\t--range-fs-5: calc(var(--max-fs-5) - var(--min-fs-5));\n\t--range-fs-6: calc(var(--max-fs-6) - var(--min-fs-6));\n\t--range-fs-7: calc(var(--max-fs-7) - var(--min-fs-7));\n\n\t/* fluid type scale */\n\t--fs--2: max(12px, calc(var(--min-fs--2) * 1px + var(--range-fs--2) * var(--interpolate-by)));\n\t--fs--1: max(14px, calc(var(--min-fs--1) * 1px + var(--range-fs--1) * var(--interpolate-by)));\n\t--fs-0: calc(var(--min-fs-0) * 1px + var(--range-fs-0) * var(--interpolate-by));\n\t--fs-1: calc(var(--min-fs-1) * 1px + var(--range-fs-1) * var(--interpolate-by));\n\t--fs-2: calc(var(--min-fs-2) * 1px + var(--range-fs-2) * var(--interpolate-by));\n\t--fs-3: calc(var(--min-fs-3) * 1px + var(--range-fs-3) * var(--interpolate-by));\n\t--fs-4: calc(var(--min-fs-4) * 1px + var(--range-fs-4) * var(--interpolate-by));\n\t--fs-5: calc(var(--min-fs-5) * 1px + var(--range-fs-5) * var(--interpolate-by));\n\t--fs-6: calc(var(--min-fs-6) * 1px + var(--range-fs-6) * var(--interpolate-by));\n\t--fs-7: calc(var(--min-fs-7) * 1px + var(--range-fs-7) * var(--interpolate-by));\n\n\t/* line height config */\n\t--line-height: 1.5;\n\t--line-height-scale: 0.95;\n\n\t/* line height scale */\n\t--lh--2: calc(var(--lh--1) / var(--line-height-scale));\n\t--lh--1: calc(var(--lh-0) / var(--line-height-scale));\n\t--lh-0: var(--line-height);\n\t--lh-1: calc(var(--lh-0) * var(--line-height-scale));\n\t--lh-2: calc(var(--lh-1) * var(--line-height-scale));\n\t--lh-3: calc(var(--lh-2) * var(--line-height-scale));\n\t--lh-4: calc(var(--lh-3) * var(--line-height-scale));\n\t--lh-5: calc(var(--lh-4) * var(--line-height-scale));\n\t--lh-6: calc(var(--lh-5) * var(--line-height-scale));\n\t--lh-7: calc(var(--lh-6) * var(--line-height-scale));\n}\n\n@media (min-width: 1200px) {\n\t.Text {\n\t\t--resolution: 1200px;\n\t}\n}\n\n.Text.size_minus-2 {\n\tfont-size: var(--fs--2);\n\tline-height: var(--lh--2);\n}\n\n.Text.size_minus-1 {\n\tfont-size: var(--fs--1);\n\tline-height: var(--lh--1);\n}\n\n.Text.size_0 {\n\tfont-size: var(--fs-0);\n\tline-height: var(--lh-0);\n}\n\n.Text.size_1 {\n\tfont-size: var(--fs-1);\n\tline-height: var(--lh-1);\n}\n\n.Text.size_2 {\n\tfont-size: var(--fs-2);\n\tline-height: var(--lh-2);\n}\n\n.Text.size_3 {\n\tfont-size: var(--fs-3);\n\tline-height: var(--lh-3);\n}\n\n.Text.size_4 {\n\tfont-size: var(--fs-4);\n\tline-height: var(--lh-4);\n}\n\n.Text.size_5 {\n\tfont-size: var(--fs-5);\n\tline-height: var(--lh-5);\n}\n\n.Text.size_6 {\n\tfont-size: var(--fs-6);\n\tline-height: var(--lh-6);\n}\n\n.Text.size_7 {\n\tfont-size: var(--fs-7);\n\tline-height: var(--lh-7);\n}\n</style>\n"],"names":[],"sourceRoot":""}