@asphalt-react/typography - npm Package Compare versions

Comparing version 2.0.0-alpha.20 to 2.0.0-alpha.27

dist/index.js

@@ -11,3 +11,2 @@ import React from 'react';
       var source = arguments[i];
-
       for (var key in source) {
@@ -19,3 +18,2 @@ if (Object.prototype.hasOwnProperty.call(source, key)) {
     }
-
     return target;
@@ -53,17 +51,22 @@ };
 
-var css_248z$3 = ".Heading__o8sbf {\n  --color: var(--content-primary, #2d2e34);\n  color: var(--color);\n  font: var(--font);\n  letter-spacing: 0.015rem;\n}\n\n.h1__7Uk74 {\n  --font: var(\n    --heading-2XL,\n    600 2.5rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h2__5UuEk {\n  --font: var(\n    --heading-XL,\n    600 2.25rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h3__Q00fq {\n  --font: var(\n    --heading-L,\n    600 2rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h4__asOH0 {\n  --font: var(\n    --heading-M,\n    600 1.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h5__HdeBa {\n  --font: var(\n    --heading-S,\n    600 1.5rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h6__Hr1S9 {\n  --font: var(\n    --heading-XS,\n    600 1.25rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n";
+var css_248z$4 = ".Heading__o8sbf {\n  color: var(--color);\n  font: var(--font);\n  letter-spacing: 0.015rem;\n}\n\n.h1__7Uk74 {\n  --font: var(\n    --heading-2XL,\n    600 2.5rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h2__5UuEk {\n  --font: var(\n    --heading-XL,\n    600 2.25rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h3__Q00fq {\n  --font: var(\n    --heading-L,\n    600 2rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h4__asOH0 {\n  --font: var(\n    --heading-M,\n    600 1.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h5__HdeBa {\n  --font: var(\n    --heading-S,\n    600 1.5rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h6__Hr1S9 {\n  --font: var(\n    --heading-XS,\n    600 1.25rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n";
 var styles$3 = {"Heading":"Heading__o8sbf","h1":"h1__7Uk74","h2":"h2__5UuEk","h3":"h3__Q00fq","h4":"h4__asOH0","h5":"h5__HdeBa","h6":"h6__Hr1S9"};
-var stylesheet$3=".Heading__o8sbf {\n  --color: var(--content-primary, #2d2e34);\n  color: var(--color);\n  font: var(--font);\n  letter-spacing: 0.015rem;\n}\n\n.h1__7Uk74 {\n  --font: var(\n    --heading-2XL,\n    600 2.5rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h2__5UuEk {\n  --font: var(\n    --heading-XL,\n    600 2.25rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h3__Q00fq {\n  --font: var(\n    --heading-L,\n    600 2rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h4__asOH0 {\n  --font: var(\n    --heading-M,\n    600 1.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h5__HdeBa {\n  --font: var(\n    --heading-S,\n    600 1.5rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h6__Hr1S9 {\n  --font: var(\n    --heading-XS,\n    600 1.25rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n";
+var stylesheet$4=".Heading__o8sbf {\n  color: var(--color);\n  font: var(--font);\n  letter-spacing: 0.015rem;\n}\n\n.h1__7Uk74 {\n  --font: var(\n    --heading-2XL,\n    600 2.5rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h2__5UuEk {\n  --font: var(\n    --heading-XL,\n    600 2.25rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h3__Q00fq {\n  --font: var(\n    --heading-L,\n    600 2rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h4__asOH0 {\n  --font: var(\n    --heading-M,\n    600 1.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h5__HdeBa {\n  --font: var(\n    --heading-S,\n    600 1.5rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.h6__Hr1S9 {\n  --font: var(\n    --heading-XS,\n    600 1.25rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n";
+styleInject(css_248z$4);
+
+var css_248z$3 = ".primary__h5pSg {\n  --color: var(--content-primary, #2d2e34);\n}\n\n.secondary__w6I-P {\n  --color: var(--content-secondary, #4f515c);\n}\n\n.muted__d-6S3 {\n  --color: var(--content-muted, #8e919b);\n}\n\n.brand__lalit {\n  --color: var(--content-brand, #00aa13);\n}\n\n.onBrand__JkRyA {\n  --color: var(--content-on-brand, #ffffff);\n}\n";
+var intentStyles = {"primary":"primary__h5pSg","secondary":"secondary__w6I-P","muted":"muted__d-6S3","brand":"brand__lalit","onBrand":"onBrand__JkRyA"};
+var stylesheet$3=".primary__h5pSg {\n  --color: var(--content-primary, #2d2e34);\n}\n\n.secondary__w6I-P {\n  --color: var(--content-secondary, #4f515c);\n}\n\n.muted__d-6S3 {\n  --color: var(--content-muted, #8e919b);\n}\n\n.brand__lalit {\n  --color: var(--content-brand, #00aa13);\n}\n\n.onBrand__JkRyA {\n  --color: var(--content-on-brand, #ffffff);\n}\n";
 styleInject(css_248z$3);
 
-const{resolvePropCollision: resolvePropCollision$2}=propsUtil;const Heading=({children,h1,h2,h3,h4,h5,h6,...props})=>{sendStyles(stylesheet$3);const{style,className,...rest}=props;const{collision,value:Tag}=resolvePropCollision$2({h1,h2,h3,h4,h5,h6},"h1");if(collision){console.warn(`Prop collision detected, falling back to h1`);}const classes=cn(styles$3.Heading,styles$3[Tag]);return React.createElement(Tag,_extends({},rest,{className:classes}),children)};Heading.propTypes={children:PropTypes.node.isRequired,h1:PropTypes.bool,h2:PropTypes.bool,h3:PropTypes.bool,h4:PropTypes.bool,h5:PropTypes.bool,h6:PropTypes.bool};Heading.defaultProps={h1:false,h2:false,h3:false,h4:false,h5:false,h6:false};
+const resolveCodeSizeProp=size=>{const supportedSizes=["s","m","l"];return supportedSizes.includes(size)?size:"m"};const resolveBoldSizeProp=size=>{const supportedSizes=["xs","s","m","l"];return supportedSizes.includes(size)?size:"m"};const resolveTextSizeProp=size=>{const supportedSizes=["xs","s","m","l","xl","xxl"];return supportedSizes.includes(size)?size:"m"};const resolveDisplaySizeProp=size=>{const supportedSizes=["m","l","xl","xxl"];return supportedSizes.includes(size)?size:"m"};const isBoldSize=size=>{if(["xs","s","m","l"].includes(size)){return true}return false};const resolveIntent=intentProps=>{return propsUtil.resolvePropCollision(intentProps,"primary")};
 
-const resolveCodeSizeProp=size=>{const supportedSizes=["s","m","l"];return supportedSizes.includes(size)?size:"m"};const resolveBoldSizeProp=size=>{const supportedSizes=["xs","s","m","l"];return supportedSizes.includes(size)?size:"m"};const resolveTextSizeProp=size=>{const supportedSizes=["xs","s","m","l","xl","xxl"];return supportedSizes.includes(size)?size:"m"};const resolveDisplaySizeProp=size=>{const supportedSizes=["m","l","xl","xxl"];return supportedSizes.includes(size)?size:"m"};const isBoldSize=size=>{if(["xs","s","m","l"].includes(size)){return true}return false};
+const{resolvePropCollision: resolvePropCollision$2}=propsUtil;const Heading=({children,h1,h2,h3,h4,h5,h6,primary,secondary,brand,onBrand,muted,...props})=>{sendStyles(stylesheet$4);sendStyles(stylesheet$3);const{style,className,...rest}=props;const{collision,value:Tag}=resolvePropCollision$2({h1,h2,h3,h4,h5,h6},"h1");if(collision){console.warn(`Heading: Prop collision detected, falling back to "${Tag}".`);}const{collision:intentCollision,value:intent}=resolveIntent({primary,secondary,brand,onBrand,muted});if(intentCollision){console.warn(`Heading: Multiple intents detected, falling back to "${intent}" intent.`);}const classes=cn(styles$3.Heading,styles$3[Tag],intentStyles[intent]);return React.createElement(Tag,_extends({},rest,{className:classes}),children)};Heading.propTypes={children:PropTypes.node.isRequired,h1:PropTypes.bool,h2:PropTypes.bool,h3:PropTypes.bool,h4:PropTypes.bool,h5:PropTypes.bool,h6:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,brand:PropTypes.bool,onBrand:PropTypes.bool,muted:PropTypes.bool};Heading.defaultProps={h1:false,h2:false,h3:false,h4:false,h5:false,h6:false,primary:false,secondary:false,brand:false,onBrand:false,muted:false};
 
-var css_248z$2 = ".Display__cKp68 {\n  --color: var(--content-primary, #2d2e34);\n  color: var(--color);\n  font: var(--font);\n  letter-spacing: 0;\n}\n\n.displayM__zHVBs {\n  --font: var(\n    --display-M,\n    700 1.75rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayL__6jsqQ {\n  --font: var(\n    --display-L,\n    700 2rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayXl__s8RNA {\n  --font: var(\n    --display-XL,\n    700 2.25rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayXxl__XwF5g {\n  --font: var(\n    --display-2XL,\n    700 2.5rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n";
+var css_248z$2 = ".Display__cKp68 {\n  color: var(--color);\n  font: var(--font);\n  letter-spacing: 0;\n}\n\n.displayM__zHVBs {\n  --font: var(\n    --display-M,\n    700 1.75rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayL__6jsqQ {\n  --font: var(\n    --display-L,\n    700 2rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayXl__s8RNA {\n  --font: var(\n    --display-XL,\n    700 2.25rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayXxl__XwF5g {\n  --font: var(\n    --display-2XL,\n    700 2.5rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n";
 var styles$2 = {"Display":"Display__cKp68","displayM":"displayM__zHVBs","displayL":"displayL__6jsqQ","displayXl":"displayXl__s8RNA","displayXxl":"displayXxl__XwF5g"};
-var stylesheet$2=".Display__cKp68 {\n  --color: var(--content-primary, #2d2e34);\n  color: var(--color);\n  font: var(--font);\n  letter-spacing: 0;\n}\n\n.displayM__zHVBs {\n  --font: var(\n    --display-M,\n    700 1.75rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayL__6jsqQ {\n  --font: var(\n    --display-L,\n    700 2rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayXl__s8RNA {\n  --font: var(\n    --display-XL,\n    700 2.25rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayXxl__XwF5g {\n  --font: var(\n    --display-2XL,\n    700 2.5rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n";
+var stylesheet$2=".Display__cKp68 {\n  color: var(--color);\n  font: var(--font);\n  letter-spacing: 0;\n}\n\n.displayM__zHVBs {\n  --font: var(\n    --display-M,\n    700 1.75rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayL__6jsqQ {\n  --font: var(\n    --display-L,\n    700 2rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayXl__s8RNA {\n  --font: var(\n    --display-XL,\n    700 2.25rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n\n.displayXxl__XwF5g {\n  --font: var(\n    --display-2XL,\n    700 2.5rem/1.618 Maison Neue Extended,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n}\n";
 styleInject(css_248z$2);
 
-const{concatClasses: concatClasses$1,resolvePropCollision: resolvePropCollision$1}=propsUtil;const Display=({children,size,p,span,div,...props})=>{sendStyles(stylesheet$2);const{style,className,...rest}=props;const{collision,value:Tag}=resolvePropCollision$1({p,span,div},"p");if(collision){console.warn(`Prop collision detected, falling back to p`);}const classes=cn(styles$2.Display,styles$2[`${concatClasses$1("display",resolveDisplaySizeProp(size))}`]);return React.createElement(Tag,_extends({},rest,{className:classes}),children)};Display.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["m","l","xl","xxl"]),p:PropTypes.bool,span:PropTypes.bool,div:PropTypes.bool};Display.defaultProps={size:"m",p:false,span:false,div:false};
+const{concatClasses: concatClasses$1,resolvePropCollision: resolvePropCollision$1}=propsUtil;const Display=({children,size,p,span,div,primary,secondary,brand,onBrand,muted,...props})=>{sendStyles(stylesheet$2);sendStyles(stylesheet$3);const{style,className,...rest}=props;const{collision,value:Tag}=resolvePropCollision$1({p,span,div},"p");if(collision){console.warn(`Display: Prop collision detected, falling back to "${Tag}".`);}const{collision:intentCollision,value:intent}=resolveIntent({primary,secondary,brand,onBrand,muted});if(intentCollision){console.warn(`Display: Multiple intents detected, falling back to "${intent}" intent.`);}const classes=cn(styles$2.Display,intentStyles[intent],styles$2[`${concatClasses$1("display",resolveDisplaySizeProp(size))}`]);return React.createElement(Tag,_extends({},rest,{className:classes}),children)};Display.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["m","l","xl","xxl"]),p:PropTypes.bool,span:PropTypes.bool,div:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,brand:PropTypes.bool,onBrand:PropTypes.bool,muted:PropTypes.bool};Display.defaultProps={size:"m",p:false,span:false,div:false,primary:false,secondary:false,brand:false,onBrand:false,muted:false};
 
@@ -77,9 +80,9 @@ var css_248z$1 = ".Code__9X71B {\n  --color: var(--content-primary, #2d2e34);\n  color: var(--color);\n  font: var(--font);\n  letter-spacing: 0;\n}\n\n.l__VUpuN {\n  --font: var(--code-L, 400 1.125rem/1.618 Fira Code, monospace);\n}\n\n.m__jwatf {\n  --font: var(--code-M, 400 1rem/1.618 Fira Code, monospace);\n}\n\n.s__jOMVQ {\n  --font: var(--code-S, 400 0.875rem/1.618 Fira Code, monospace);\n}\n";
 
-var css_248z = ".Text__KWRU1 {\n  --color: var(--content-primary, #2d2e34);\n  color: var(--color);\n  font: var(--font);\n}\n\n.textXxl__MC64j {\n  --font: var(\n    --body-2XL,\n    500 1.5rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0;\n}\n\n.textXl__x82Hl {\n  --font: var(\n    --body-XL,\n    500 1.25rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0;\n}\n\n.textL__2LSmG {\n  --font: var(\n    --body-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textM__RkZ7u {\n  --font: var(\n    --body-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textS__Anl1H {\n  --font: var(\n    --body-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textXs__JviqV {\n  --font: var(\n    --body-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldL__x6ARV {\n  --font: var(\n    --label-L,\n    600 1.125rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldM__uUB0n {\n  --font: var(\n    --label-M,\n    600 1rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldS__CS-Kv {\n  --font: var(\n    --label-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldXs__h4Y-6 {\n  --font: var(\n    --label-XS,\n    600 0.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n";
+var css_248z = ".Text__KWRU1 {\n  color: var(--color);\n  font: var(--font);\n}\n\n.textXxl__MC64j {\n  --font: var(\n    --body-2XL,\n    500 1.5rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0;\n}\n\n.textXl__x82Hl {\n  --font: var(\n    --body-XL,\n    500 1.25rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0;\n}\n\n.textL__2LSmG {\n  --font: var(\n    --body-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textM__RkZ7u {\n  --font: var(\n    --body-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textS__Anl1H {\n  --font: var(\n    --body-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textXs__JviqV {\n  --font: var(\n    --body-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldL__x6ARV {\n  --font: var(\n    --label-L,\n    600 1.125rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldM__uUB0n {\n  --font: var(\n    --label-M,\n    600 1rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldS__CS-Kv {\n  --font: var(\n    --label-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldXs__h4Y-6 {\n  --font: var(\n    --label-XS,\n    600 0.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n";
 var styles = {"Text":"Text__KWRU1","textXxl":"textXxl__MC64j","textXl":"textXl__x82Hl","textL":"textL__2LSmG","textM":"textM__RkZ7u","textS":"textS__Anl1H","textXs":"textXs__JviqV","boldL":"boldL__x6ARV","boldM":"boldM__uUB0n","boldS":"boldS__CS-Kv","boldXs":"boldXs__h4Y-6"};
-var stylesheet=".Text__KWRU1 {\n  --color: var(--content-primary, #2d2e34);\n  color: var(--color);\n  font: var(--font);\n}\n\n.textXxl__MC64j {\n  --font: var(\n    --body-2XL,\n    500 1.5rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0;\n}\n\n.textXl__x82Hl {\n  --font: var(\n    --body-XL,\n    500 1.25rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0;\n}\n\n.textL__2LSmG {\n  --font: var(\n    --body-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textM__RkZ7u {\n  --font: var(\n    --body-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textS__Anl1H {\n  --font: var(\n    --body-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textXs__JviqV {\n  --font: var(\n    --body-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldL__x6ARV {\n  --font: var(\n    --label-L,\n    600 1.125rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldM__uUB0n {\n  --font: var(\n    --label-M,\n    600 1rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldS__CS-Kv {\n  --font: var(\n    --label-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldXs__h4Y-6 {\n  --font: var(\n    --label-XS,\n    600 0.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n";
+var stylesheet=".Text__KWRU1 {\n  color: var(--color);\n  font: var(--font);\n}\n\n.textXxl__MC64j {\n  --font: var(\n    --body-2XL,\n    500 1.5rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0;\n}\n\n.textXl__x82Hl {\n  --font: var(\n    --body-XL,\n    500 1.25rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0;\n}\n\n.textL__2LSmG {\n  --font: var(\n    --body-L,\n    500 1.125rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textM__RkZ7u {\n  --font: var(\n    --body-M,\n    500 1rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textS__Anl1H {\n  --font: var(\n    --body-S,\n    500 0.875rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.textXs__JviqV {\n  --font: var(\n    --body-XS,\n    500 0.75rem/1.618 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldL__x6ARV {\n  --font: var(\n    --label-L,\n    600 1.125rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldM__uUB0n {\n  --font: var(\n    --label-M,\n    600 1rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldS__CS-Kv {\n  --font: var(\n    --label-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n\n.boldXs__h4Y-6 {\n  --font: var(\n    --label-XS,\n    600 0.75rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  letter-spacing: 0.015em;\n}\n";
 styleInject(css_248z);
 
-const{concatClasses,resolvePropCollision}=propsUtil;const Text=({children,size,bold,p,span,div,...props})=>{sendStyles(stylesheet);const{style,className,...rest}=props;let isBold=bold;const{collision,value:Tag}=resolvePropCollision({p,span,div},"p");if(collision){console.warn(`Prop collision detected, falling back to p`);}if(bold&&!isBoldSize(size)){console.warn("Bold variant is only supported for \"xs\", \"s\", \"m\" & \"l\" sizes");isBold=false;}const classes=cn(styles.Text,{[styles[`${concatClasses("text",resolveTextSizeProp(size))}`]]:!isBold},{[styles[`${concatClasses("bold",resolveBoldSizeProp(size))}`]]:isBold});return React.createElement(Tag,_extends({},rest,{className:classes}),children)};Text.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),bold:PropTypes.bool,p:PropTypes.bool,span:PropTypes.bool,div:PropTypes.bool};Text.defaultProps={size:"m",p:false,span:false,div:false};
+const{concatClasses,resolvePropCollision}=propsUtil;const Text=({children,size,bold,p,span,div,primary,secondary,brand,onBrand,muted,...props})=>{sendStyles(stylesheet);sendStyles(stylesheet$3);const{style,className,...rest}=props;let isBold=bold;const{collision,value:Tag}=resolvePropCollision({p,span,div},"p");if(collision){console.warn(`Text: Prop collision detected, falling back to "${Tag}".`);}if(bold&&!isBoldSize(size)){console.warn("Text: Bold variant is only supported for \"xs\", \"s\", \"m\" & \"l\" sizes.");isBold=false;}const{collision:intentCollision,value:intent}=resolveIntent({primary,secondary,brand,onBrand,muted});if(intentCollision){console.warn(`Text: Multiple intents detected, falling back to "${intent}" intent.`);}const classes=cn(styles.Text,{[styles[`${concatClasses("text",resolveTextSizeProp(size))}`]]:!isBold},{[styles[`${concatClasses("bold",resolveBoldSizeProp(size))}`]]:isBold},intentStyles[intent]);return React.createElement(Tag,_extends({},rest,{className:classes}),children)};Text.propTypes={children:PropTypes.node.isRequired,size:PropTypes.oneOf(["xs","s","m","l","xl","xxl"]),bold:PropTypes.bool,p:PropTypes.bool,span:PropTypes.bool,div:PropTypes.bool,primary:PropTypes.bool,secondary:PropTypes.bool,brand:PropTypes.bool,onBrand:PropTypes.bool,muted:PropTypes.bool};Text.defaultProps={size:"m",p:false,span:false,div:false,primary:false,secondary:false,brand:false,onBrand:false,muted:false};
 
 export { Code, Display, Heading, Text };

package.json

 {
   "name": "@asphalt-react/typography",
-  "version": "2.0.0-alpha.20",
+  "version": "2.0.0-alpha.27",
   "description": "Typography",
@@ -46,3 +46,3 @@ "keywords": [
   "license": "UNLICENSED",
-  "gitHead": "2c2e228f0e13bc2f82635708f1de55e849fac00e"
+  "gitHead": "508dfa444d8b6e737e5ff2dfba12b009c5a406f3"
 }

README.md

@@ -22,7 +22,19 @@ # Typography
 
-<Code>The quick brown fox jumps</Code>
+<Code>npm install @asphalt-react/typography</Code>
 
 <Text>The quick brown fox jumps</Text>
+
+<Text bold>I have a higher font weight than Text</Text>
 ```
 
+## Intents
+
+The `Heading`, `Display` & `Text` components have 5 intents to represent different content heirarchy and usages:
+
+* **primary**: This is the default intent and has the highest hierarchy.
+* **secondary**: This intent signifies copy with a lesser hierarchy than "primary".
+* **muted**: This intent has the lowest hierarchy and is usefult to show copy that should catch least user attention.
+* **brand**: This intent highlights the copy that closely represents the brand.
+* **onBrand**: This intent is useful to render a copy on brand colored surfaces. This intent ensures appropriate contrast ratio with the brand color.
+
 # Heading
@@ -92,2 +104,42 @@
 
+### primary
+
+Renders the text with primary intent. This is the default intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### secondary
+
+Renders the text with secondary intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### brand
+
+Renders the text with brand intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### onBrand
+
+Renders the text with appropriate contrast ration to backgrounds with brand color.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### muted
+
+Renders the text with muted intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
 # Display
@@ -143,2 +195,42 @@
 
+### primary
+
+Renders the text with primary intent. This is the default intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### secondary
+
+Renders the text with secondary intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### brand
+
+Renders the text with brand intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### onBrand
+
+Renders the text with appropriate contrast ratio to backgrounds with brand color.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### muted
+
+Renders the text with muted intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
 # Code
@@ -226,1 +318,41 @@
 | bool | false    | false   |
+
+### primary
+
+Renders the text with primary intent. This is the default intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### secondary
+
+Renders the text with secondary intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### brand
+
+Renders the text with brand intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### onBrand
+
+Renders the text with appropriate contrast ratio to backgrounds with brand color.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
+### muted
+
+Renders the text with muted intent.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

40548

increased by22.63%

Lines of code

220

increased by12.24%

Number of lines in readme file

355

increased by59.19%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes