@maboussoleaidant/design-system 0.1.11 → 0.1.13

package/dist/mba-tailwind.css

@@ -95,77 +95,79 @@
   --mba-tracking-wider: 0.05em;
   --mba-tracking-widest: 0.1em;
 }
-.mba-heading-xxl {
-  font-family: var(--mba-font-family-heading);
-  font-size: var(--mba-font-size-xxl);
-  font-weight: var(--mba-font-weight-bold);
-  line-height: var(--mba-leading-tight);
-}
-.mba-heading-xl {
-  font-family: var(--mba-font-family-heading);
-  font-size: var(--mba-font-size-xl);
-  font-weight: var(--mba-font-weight-bold);
-  line-height: var(--mba-leading-tight);
-}
-.mba-heading-md {
-  font-family: var(--mba-font-family-heading);
-  font-size: var(--mba-font-size-md);
-  font-weight: var(--mba-font-weight-bold);
-  line-height: var(--mba-leading-snug);
-}
-.mba-heading-sm {
-  font-family: var(--mba-font-family-heading);
-  font-size: var(--mba-font-size-sm);
-  font-weight: var(--mba-font-weight-bold);
-  line-height: var(--mba-leading-normal);
-}
-.mba-heading-xs {
-  font-family: var(--mba-font-family-heading);
-  font-size: var(--mba-font-size-xs);
-  font-weight: var(--mba-font-weight-bold);
-  line-height: var(--mba-leading-normal);
-}
-.mba-heading-xxs {
-  font-family: var(--mba-font-family-heading);
-  font-size: var(--mba-font-size-xxs);
-  font-weight: var(--mba-font-weight-bold);
-  line-height: var(--mba-leading-normal);
-}
-.mba-text-xxl {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xxl);
-  font-weight: var(--mba-font-weight-regular);
-  line-height: var(--mba-leading-normal);
-}
-.mba-text-xl {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xl);
-  font-weight: var(--mba-font-weight-regular);
-  line-height: var(--mba-leading-normal);
-}
-.mba-text-md {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-md);
-  font-weight: var(--mba-font-weight-regular);
-  line-height: var(--mba-leading-normal);
-}
-.mba-text-sm {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-sm);
-  font-weight: var(--mba-font-weight-regular);
-  line-height: var(--mba-leading-normal);
-}
-.mba-text-xs {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xs);
-  font-weight: var(--mba-font-weight-regular);
-  line-height: var(--mba-leading-normal);
-}
-.mba-text-xxs {
-  font-family: var(--mba-font-family-text);
-  font-size: var(--mba-font-size-xxs);
-  font-weight: var(--mba-font-weight-regular);
-  line-height: var(--mba-leading-normal);
+@layer components {
+  .mba-heading-xxl {
+    font-family: var(--mba-font-family-heading);
+    font-size: var(--mba-font-size-xxl);
+    font-weight: var(--mba-font-weight-bold);
+    line-height: var(--mba-leading-tight);
+  }
+  .mba-heading-xl {
+    font-family: var(--mba-font-family-heading);
+    font-size: var(--mba-font-size-xl);
+    font-weight: var(--mba-font-weight-bold);
+    line-height: var(--mba-leading-tight);
+  }
+  .mba-heading-md {
+    font-family: var(--mba-font-family-heading);
+    font-size: var(--mba-font-size-md);
+    font-weight: var(--mba-font-weight-bold);
+    line-height: var(--mba-leading-snug);
+  }
+  .mba-heading-sm {
+    font-family: var(--mba-font-family-heading);
+    font-size: var(--mba-font-size-sm);
+    font-weight: var(--mba-font-weight-bold);
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-heading-xs {
+    font-family: var(--mba-font-family-heading);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-bold);
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-heading-xxs {
+    font-family: var(--mba-font-family-heading);
+    font-size: var(--mba-font-size-xxs);
+    font-weight: var(--mba-font-weight-bold);
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-text-xxl {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xxl);
+    font-weight: var(--mba-font-weight-regular);
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-text-xl {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xl);
+    font-weight: var(--mba-font-weight-regular);
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-text-md {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-md);
+    font-weight: var(--mba-font-weight-regular);
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-text-sm {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-sm);
+    font-weight: var(--mba-font-weight-regular);
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-text-xs {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xs);
+    font-weight: var(--mba-font-weight-regular);
+    line-height: var(--mba-leading-normal);
+  }
+  .mba-text-xxs {
+    font-family: var(--mba-font-family-text);
+    font-size: var(--mba-font-size-xxs);
+    font-weight: var(--mba-font-weight-regular);
+    line-height: var(--mba-leading-normal);
+  }
 }
 :root {
   --mba-space-xxs: 0.25rem;
@@ -360,135 +362,136 @@
 .mba-icon--muted {
   color: var(--mba-color-text-muted);
 }
-*,
+@layer base {
+  *,
 ::before,
 ::after {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: var(--mba-color-border);
-}
-html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  tab-size: 4;
-  font-family: var(--mba-font-family-text);
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-}
-body {
-  margin: 0;
-  line-height: inherit;
-}
-hr {
-  height: 0;
-  color: inherit;
-  border-top-width: 1px;
-}
-abbr:where([title]) {
-  text-decoration: underline dotted;
-}
-h1,
+    box-sizing: border-box;
+    border-width: 0;
+    border-style: solid;
+    border-color: var(--mba-color-border);
+  }
+  html {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    -moz-tab-size: 4;
+    tab-size: 4;
+    font-family: var(--mba-font-family-text);
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+  }
+  body {
+    margin: 0;
+    line-height: inherit;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+  h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-b,
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+  b,
 strong {
-  font-weight: bolder;
-}
-code,
+    font-weight: bolder;
+  }
+  code,
 kbd,
 samp,
 pre {
-  font-family: var(--mba-font-family-mono);
-  font-size: 1em;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
+    font-family: var(--mba-font-family-mono);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub,
 sup {
-  top: -0.5em;
-}
-table {
-  text-indent: 0;
-  border-color: inherit;
-  border-collapse: collapse;
-}
-button,
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  button,
 input,
 optgroup,
 select,
 textarea {
-  font-family: inherit;
-  font-feature-settings: inherit;
-  font-variation-settings: inherit;
-  font-size: 100%;
-  font-weight: inherit;
-  line-height: inherit;
-  color: inherit;
-  margin: 0;
-  padding: 0;
-}
-button,
+    font-family: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    font-size: 100%;
+    font-weight: inherit;
+    line-height: inherit;
+    color: inherit;
+    margin: 0;
+    padding: 0;
+  }
+  button,
 select {
-  text-transform: none;
-}
-button,
+    text-transform: none;
+  }
+  button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button;
-  background-color: transparent;
-  background-image: none;
-}
-:-moz-focusring {
-  outline: auto;
-}
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-progress {
-  vertical-align: baseline;
-}
-::-webkit-inner-spin-button,
+    -webkit-appearance: button;
+    background-color: transparent;
+    background-image: none;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-summary {
-  display: list-item;
-}
-blockquote,
+    height: auto;
+  }
+  [type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+  summary {
+    display: list-item;
+  }
+  blockquote,
 dl,
 dd,
 h1,
@@ -501,41 +504,41 @@ hr,
 figure,
 p,
 pre {
-  margin: 0;
-}
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-legend {
-  padding: 0;
-}
-ol,
+    margin: 0;
+  }
+  fieldset {
+    margin: 0;
+    padding: 0;
+  }
+  legend {
+    padding: 0;
+  }
+  ol,
 ul,
 menu {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-dialog {
-  padding: 0;
-}
-textarea {
-  resize: vertical;
-}
-input::placeholder,
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  dialog {
+    padding: 0;
+  }
+  textarea {
+    resize: vertical;
+  }
+  input::placeholder,
 textarea::placeholder {
-  opacity: 1;
-  color: var(--mba-color-text-subtle);
-}
-button,
+    opacity: 1;
+    color: var(--mba-color-text-subtle);
+  }
+  button,
 [role="button"] {
-  cursor: pointer;
-}
-:disabled {
-  cursor: default;
-}
-img,
+    cursor: pointer;
+  }
+  :disabled {
+    cursor: default;
+  }
+  img,
 svg,
 video,
 canvas,
@@ -543,16 +546,17 @@ audio,
 iframe,
 embed,
 object {
-  display: block;
-  vertical-align: middle;
-}
-img,
+    display: block;
+    vertical-align: middle;
+  }
+  img,
 video {
-  max-width: 100%;
-  height: auto;
-}
-[hidden] {
-  display: none;
+    max-width: 100%;
+    height: auto;
+  }
+  [hidden] {
+    display: none;
+  }
 }
 body {
   font-family: var(--mba-font-family-text);
@@ -938,6 +942,36 @@ a:hover {
     max-width: 100%;
   }
 }
+.mba-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+.mba-link:hover {
+  color: var(--mba-color-primary-800);
+}
+.mba-link__text {
+  text-decoration: none;
+  transition: text-decoration 0.2s ease;
+}
+.mba-link:hover .mba-link__text {
+  text-decoration: underline;
+}
+.mba-link .material-symbols-rounded {
+  font-size: 20px;
+  text-decoration: none;
+}
+.mba-link:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+  border-radius: var(--mba-radius-2xs);
+}
 .mba-card {
   display: flex;
   flex-direction: column;
@@ -1132,6 +1166,105 @@ a:hover {
     grid-template-columns: 1fr;
   }
 }
+.mba-article-card {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--mba-color-white);
+  border-radius: var(--mba-radius-sm);
+  overflow: hidden;
+  box-shadow: var(--mba-shadow-xs);
+  transition: box-shadow 0.25s ease-in-out, transform 0.25s ease-in-out;
+}
+.mba-article-card:hover {
+  box-shadow: var(--mba-shadow-sm);
+  transform: translateY(-2px);
+}
+.mba-article-card__image-wrapper {
+  position: relative;
+}
+.mba-article-card__image {
+  display: block;
+  width: 100%;
+  height: 152px;
+  object-fit: cover;
+  border-radius: var(--mba-radius-sm) var(--mba-radius-sm) 0 0;
+}
+.mba-article-card__tag {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: var(--mba-space-xxs) var(--mba-space-xs);
+  background-color: var(--mba-color-brick);
+  color: var(--mba-color-white);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  border-radius: 0 var(--mba-radius-xs) 0 0;
+}
+.mba-article-card__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  padding: var(--mba-space-sm) var(--mba-space-sm) 0;
+  gap: var(--mba-space-xs);
+}
+.mba-article-card__title {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-sm);
+  font-weight: var(--mba-font-weight-bold);
+  color: var(--mba-color-primary-800);
+  margin: 0;
+}
+.mba-article-card__text {
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-regular);
+  color: var(--mba-color-text);
+  line-height: var(--mba-leading-normal);
+  margin: 0;
+}
+.mba-article-card__footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 var(--mba-space-sm) var(--mba-space-sm);
+  margin-top: var(--mba-space-md);
+}
+.mba-article-card__link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  font-family: var(--mba-font-family-text);
+  font-size: var(--mba-font-size-xs);
+  font-weight: var(--mba-font-weight-semibold);
+  color: var(--mba-color-primary-500);
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+.mba-article-card__link:hover {
+  color: var(--mba-color-primary-800);
+}
+.mba-article-card__link:hover .mba-article-card__link-text {
+  text-decoration: underline;
+}
+.mba-article-card__link .material-symbols-rounded {
+  font-size: 20px;
+}
+.mba-article-card-grid {
+  display: grid;
+  gap: var(--mba-space-md);
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+@media (min-width: 600px) {
+  .mba-article-card-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media (min-width: 900px) {
+  .mba-article-card-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
 .mba-arrow {
   display: inline-flex;
   align-items: center;
@@ -1414,6 +1547,35 @@ a:hover {
   cursor: not-allowed;
   pointer-events: none;
 }
+.mba-dots {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mba-space-xs);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.mba-dot {
+  width: 40px;
+  height: 8px;
+  border-radius: var(--mba-radius-full);
+  background-color: var(--mba-color-grey-300);
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  transition: background-color 0.25s ease-in-out;
+}
+.mba-dot:hover:not(.is-active) {
+  background-color: var(--mba-color-grey-400);
+}
+.mba-dot:focus-visible {
+  outline: none;
+  box-shadow: var(--mba-focus-ring);
+}
+.mba-dot.is-active {
+  background-color: var(--mba-color-primary-500);
+  cursor: default;
+}
 .mba-label {
   display: flex;
   align-items: center;
@@ -1832,12 +1994,23 @@ button.mba-input-icon__icon:hover {
   z-index: 1;
   max-width: 1280px;
   margin: 0 auto;
-  padding: var(--mba-space-xl) var(--mba-space-md);
+  padding: var(--mba-space-xxl) 0;
 }
-@media (min-width: 768px) {
-  .mba-section__content {
-    padding: var(--mba-space-xxl) var(--mba-space-lg);
-  }
+.mba-section--wave-inset.mba-section--wave-top .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-both .mba-section__content {
+  padding-top: calc(var(--mba-wave-height) + var(--mba-space-xxl));
+}
+.mba-section--wave-inset.mba-section--wave-bottom .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-both .mba-section__content {
+  padding-bottom: calc(var(--mba-wave-height) + var(--mba-space-xxl));
+}
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-top .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
+  padding-top: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
+}
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-bottom .mba-section__content,
+.mba-section--wave-inset.mba-section--wave-sm.mba-section--wave-both .mba-section__content {
+  padding-bottom: calc(var(--mba-wave-sm-height) + var(--mba-space-xxl));
 }
 .mba-section--lavender {
   background-color: var(--mba-color-pastel-lavender);
@@ -2263,6 +2436,7 @@ button.mba-input-icon__icon:hover {
     --color-primary-400: var(--mba-color-primary-400);
     --color-primary-500: var(--mba-color-primary-500);
     --color-primary-800: var(--mba-color-primary-800);
+    --color-primary-900: var(--mba-color-primary-900);
     --color-error-100: var(--mba-color-error-100);
     --color-error-300: var(--mba-color-error-300);
     --color-error-500: var(--mba-color-error-500);
@@ -2578,12 +2752,18 @@ button.mba-input-icon__icon:hover {
   .mx-auto {
     margin-inline: auto;
   }
+  .mt-lg {
+    margin-top: var(--spacing-lg);
+  }
   .mt-md {
     margin-top: var(--spacing-md);
   }
   .mt-sm {
     margin-top: var(--spacing-sm);
   }
+  .mt-xl {
+    margin-top: var(--spacing-xl);
+  }
   .mt-xs {
     margin-top: var(--spacing-xs);
   }
@@ -2698,6 +2878,9 @@ button.mba-input-icon__icon:hover {
   .max-w-6xl {
     max-width: var(--max-width-6xl);
   }
+  .max-w-\[690px\] {
+    max-width: 690px;
+  }
   .max-w-lg {
     max-width: var(--max-width-lg);
   }
@@ -2751,6 +2934,9 @@ button.mba-input-icon__icon:hover {
   .cursor-pointer {
     cursor: pointer;
   }
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -2781,12 +2967,18 @@ button.mba-input-icon__icon:hover {
   .items-end {
     align-items: flex-end;
   }
+  .items-start {
+    align-items: flex-start;
+  }
   .justify-between {
     justify-content: space-between;
   }
   .justify-center {
     justify-content: center;
   }
+  .justify-end {
+    justify-content: flex-end;
+  }
   .gap-4 {
     gap: var(--spacing-4);
   }
@@ -2808,6 +3000,12 @@ button.mba-input-icon__icon:hover {
   .gap-xxs {
     gap: var(--spacing-xxs);
   }
+  .gap-x-md {
+    column-gap: var(--spacing-md);
+  }
+  .gap-y-lg {
+    row-gap: var(--spacing-lg);
+  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -3082,6 +3280,9 @@ button.mba-input-icon__icon:hover {
   .text-grey-400 {
     color: var(--color-grey-400);
   }
+  .text-grey-800 {
+    color: var(--color-grey-800);
+  }
   .text-info-300 {
     color: var(--color-info-300);
   }
@@ -3106,6 +3307,9 @@ button.mba-input-icon__icon:hover {
   .text-primary-800 {
     color: var(--color-primary-800);
   }
+  .text-primary-900 {
+    color: var(--color-primary-900);
+  }
   .text-success-300 {
     color: var(--color-success-300);
   }
@@ -3133,6 +3337,9 @@ button.mba-input-icon__icon:hover {
   .uppercase {
     text-transform: uppercase;
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .opacity-0 {
     opacity: 0%;
   }
@@ -3196,6 +3403,11 @@ button.mba-input-icon__icon:hover {
       }
     }
   }
+  .md\:grid-cols-2 {
+    @media (width >= 48rem) {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
   .md\:grid-cols-3 {
     @media (width >= 48rem) {
       grid-template-columns: repeat(3, minmax(0, 1fr));