Merge pull request #49 from Mastercard/develop

Replace dist files with latest version

packages/made-css/dist/3.0.0/src/02-generic/globals.css

@@ -0,0 +1,17 @@
+* {
+	box-sizing: border-box;
+}
+
+html,
+body {
+	background-color: var(--made-color-background-default);
+	color: var(--made-color-text-default-on-light);
+	font-family: var(--made-font-body-family-default);
+	-webkit-font-smoothing: antialiased;
+	letter-spacing: var(--made-letter-spacing-default);
+	line-height: var(--made-font-body-line-height);
+}
+
+body {
+	font-size: var(--made-font-body-size-default);
+}

packages/made-css/dist/3.0.0/src/03-elements/typography.css

@@ -0,0 +1,180 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	font-weight: var(--made-font-weight-default);
+	margin: 0;
+}
+
+h1,
+.made-u-h1 {
+	font-family: var(--made-font-heading-family-level-01);
+	font-size: var(--made-font-heading-size-level-01);
+	font-weight: var(--made-font-heading-weight-level-01);
+	line-height: var(--made-font-heading-line-height-level-01);
+	margin: 0;
+}
+
+h2,
+.made-u-h2 {
+	font-family: var(--made-font-heading-family-level-02);
+	font-size: var(--made-font-heading-size-level-02);
+	font-weight: var(--made-font-heading-weight-level-02);
+	line-height: var(--made-font-heading-line-height-level-02);
+	margin: 0;
+}
+
+h3,
+.made-u-h3 {
+	font-family: var(--made-font-heading-family-level-03);
+	font-size: var(--made-font-heading-size-level-03);
+	font-weight: var(--made-font-heading-weight-level-03);
+	line-height: var(--made-font-heading-line-height-level-03);
+	margin: 0;
+}
+
+h4,
+.made-u-h4 {
+	font-family: var(--made-font-heading-family-level-04);
+	font-size: var(--made-font-heading-size-level-04);
+	font-weight: var(--made-font-heading-weight-level-04);
+	line-height: var(--made-font-heading-line-height-level-04);
+	margin: 0;
+}
+
+h5,
+.made-u-h5 {
+	font-family: var(--made-font-heading-family-level-05);
+	font-size: var(--made-font-heading-size-level-05);
+	font-weight: var(--made-font-heading-weight-level-05);
+	line-height: var(--made-font-heading-line-height-level-05);
+	margin: 0;
+}
+
+h6,
+.made-u-h6 {
+	font-family: var(--made-font-heading-family-level-06);
+	font-size: var(--made-font-heading-size-level-06);
+	font-weight: var(--made-font-heading-weight-level-06);
+	line-height: var(--made-font-heading-line-height-level-06);
+	margin: 0;
+}
+
+p {
+	font-family: var(--made-font-body-family-default);
+	font-size: var(--made-font-body-size-default);
+	margin: 0 0 var(--made-space-4-x) 0;
+}
+
+strong {
+	font-family: var(--made-font-body-family-bold);
+	font-weight: var(--made-font-body-weight-default);
+}
+
+a {
+	color: var(--made-link-color-default);
+	font-family: var(--made-font-body-family-bold);
+	text-decoration: none;
+}
+
+a:hover {
+	text-decoration: underline;
+}
+
+a:focus {
+	outline: 2px solid var(--made-color-action-border-focus);
+	outline-offset: 2px;
+}
+
+a:disabled,
+.made-u-link--disabled,
+a[aria-disabled='true'] {
+	color: var(--made-color-action-text-disabled);
+	cursor: not-allowed;
+	text-decoration: none;
+}
+
+.made-u-link--on-dark {
+	color: var(--made-link-color-on-dark);
+}
+
+.made-u-link--on-dark:focus {
+	outline: 2px solid var(--made-color-action-border-focus-on-dark);
+}
+
+.made-u-link--disabled {
+	color: var(--made-color-action-text-disabled);
+	cursor: default;
+	text-decoration: none;
+}
+
+.made-u-link--disabled:hover {
+	text-decoration: none;
+}
+
+.made-u-body--small {
+	font-size: var(--made-font-body-size-small);
+}
+
+.made-u-body--large {
+	font-size: var(--made-font-body-size-large);
+}
+
+.made-u-display--01 {
+	font-family: var(--made-font-heading-family-display-01);
+	font-size: var(--made-font-heading-size-display-01);
+	font-weight: var(--made-font-heading-weight-display-01);
+	line-height: var(--made-font-heading-line-height-display-01);
+	margin: 0;
+}
+
+.made-u-display--02 {
+	font-family: var(--made-font-heading-family-display-02);
+	font-size: var(--made-font-heading-size-display-02);
+	font-weight: var(--made-font-heading-weight-display-02);
+	line-height: var(--made-font-heading-line-height-display-02);
+	margin: 0;
+}
+
+.made-u-display--03 {
+	font-family: var(--made-font-heading-family-display-03);
+	font-size: var(--made-font-heading-size-display-03);
+	font-weight: var(--made-font-heading-weight-display-03);
+	line-height: var(--made-font-heading-line-height-display-03);
+	margin: 0;
+}
+
+.made-u-eyebrow--01 {
+	font-family: var(--made-font-heading-family-eyebrow-01);
+	font-size: var(--made-font-heading-size-eyebrow-01);
+	font-weight: var(--made-font-heading-weight-eyebrow-01);
+	letter-spacing: var(--made-font-heading-letter-spacing-eyebrow-01);
+	line-height: var(--made-font-heading-line-height-eyebrow-01);
+	margin: 0;
+	text-transform: uppercase;
+}
+
+.made-u-eyebrow--02 {
+	font-family: var(--made-font-heading-family-eyebrow-02);
+	font-size: var(--made-font-heading-size-eyebrow-02);
+	font-weight: var(--made-font-heading-weight-eyebrow-02);
+	letter-spacing: var(--made-font-heading-letter-spacing-eyebrow-02);
+	line-height: var(--made-font-heading-line-height-eyebrow-02);
+	margin: 0;
+	text-transform: uppercase;
+}
+
+.made-u-text--on-dark {
+	color: var(--made-color-text-default-on-dark);
+}
+
+.made-u-helper-text {
+	color: var(--made-color-text-helper);
+	font-size: var(--made-font-body-size-small);
+}
+
+.made-u-text-disabled {
+	color: var(--made-color-action-text-disabled);
+}

packages/made-css/dist/3.0.0/src/04-components/accordion.css

@@ -0,0 +1,73 @@
+.made-c-accordion {
+	background-color: var(--made-color-background-default);
+	border-top: 1px solid var(--made-color-border-default-on-light);
+	margin: 0;
+	padding: 0;
+}
+
+.made-c-accordion__item {
+	background-color: var(--made-color-background-default);
+	border-bottom: 1px solid var(--made-color-border-default-on-light);
+	list-style: none;
+}
+
+.made-c-accordion__header {
+	align-items: center;
+	background-color: var(--made-color-background-default);
+	border: 0;
+	color: var(--made-color-text-default-on-light);
+	cursor: pointer;
+	display: flex;
+	font-family: var(--made-font-body-family-default);
+	font-size: var(--made-font-body-size-large);
+	justify-content: space-between;
+	line-height: var(--made-line-height-default);
+	padding: var(--made-space-5-x) var(--made-space-4-x) var(--made-space-5-x) var(--made-space-3-x);
+	text-align: left;
+	width: 100%;
+}
+
+.made-c-accordion__header:disabled,
+.made-c-accordion__header:disabled:hover,
+.made-c-accordion__header:disabled svg {
+	background-color: var(--made-color-background-default);
+	color: var(--made-color-action-text-disabled);
+}
+
+.made-c-accordion__description {
+	margin: 0;
+}
+
+.made-c-accordion__header--active {
+	font-family: var(--made-font-weight-bold);
+}
+
+.made-c-accordion__header:hover {
+	background-color: var(--made-color-action-background-hover);
+	color: var(--made-color-action-text-on-hover);
+}
+
+.made-c-accordion__icon {
+	color: var(--made-color-text-default-on-light);
+	transition: all 110ms cubic-bezier(.2, 0, .38, .9);
+}
+
+.made-c-accordion__header--active .made-c-accordion__icon {
+	transform: rotate(-180deg);
+}
+
+.made-c-accordion__header:focus {
+	background-color: var(--made-color-action-background-hover);
+	outline: 2px solid var(--made-color-action-border-focus);
+	outline-offset: -2px;
+}
+
+.made-c-accordion__content {
+	display: none;
+	line-height: var(--made-font-body-line-height);
+	padding: 0 var(--made-space-15-x) var(--made-space-6-x) var(--made-space-3-x);
+}
+
+.made-c-accordion__content--active {
+	display: flex;
+}

packages/made-css/dist/3.0.0/src/04-components/action-bar.css

@@ -0,0 +1,26 @@
+.made-c-action-bar {
+	display: flex;
+	flex-wrap: wrap;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.made-c-action-bar__item {
+	border-right: 1px solid var(--made-color-border-default-on-light);
+	margin-bottom: var(--made-space-1-x);
+	padding: 0 var(--made-space-4-x) 0 var(--made-space-4-x);
+	position: relative;
+}
+
+.made-c-action-bar__item:first-child {
+	padding-left: 0;
+}
+
+.made-c-action-bar__item:last-child {
+	border: 0;
+}
+
+.made-c-action-bar__icon {
+	vertical-align: middle;
+}

packages/made-css/dist/3.0.0/src/04-components/branding.css

@@ -0,0 +1,22 @@
+.made-c-branding {
+	align-items: center;
+	color: var(--made-color-text-default-on-light);
+	display: flex;
+	font-family: var(--made-font-family-heading);
+	font-size: var(--made-font-size-08);
+	padding: var(--made-space-3-x) var(--made-space-2-x);
+	text-decoration: none;
+}
+
+.made-c-branding:hover {
+	text-decoration: none;
+}
+
+.made-c-branding__link {
+	margin-left: var(--made-space-2-x);
+}
+
+.made-c-branding--dark {
+	background-color: var(--made-header-color-background);
+	color: var(--made-header-color-text);
+}