mautourco-components 0.1.1

package/src/styles/components/selected-value.css

@@ -0,0 +1,80 @@
+/* SelectedValue Component Styles */
+.selected-value {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chip-spacing-gap);
+  padding: var(--chip-spacing-sm-padding-y) var(--chip-spacing-sm-padding-x);
+  border-radius: var(--chip-border-radius-pill);
+  /* Typography is now handled by the Text component */
+  background: var(--chip-color-accent-filled-background);
+  color: var(--color-neutral-white);
+  cursor: default;
+  user-select: none;
+  max-width: 200px;
+  width: auto;
+  opacity: var(--opacity-opacity-100);
+}
+
+/* Variant: text-only (no background, no padding) */
+.selected-value--text {
+  background: transparent;
+  padding: 0;
+  color: var(--color-neutral-900);
+}
+
+.selected-value__text {
+  color: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  /* Typography styles are now handled by the Text component */
+}
+
+.selected-value__remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+.selected-value__remove:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.selected-value__remove:focus {
+  outline: 2px solid var(--color-primary-500);
+  outline-offset: 1px;
+}
+
+.selected-value__remove-icon {
+  color: var(--color-neutral-white);
+}
+
+/* Size variants */
+.selected-value--xs {
+  padding: var(--chip-spacing-xs-padding-y) var(--chip-spacing-xs-padding-x);
+  gap: var(--chip-spacing-xs-gap);
+}
+
+.selected-value--sm {
+  padding: var(--chip-spacing-sm-padding-y) var(--chip-spacing-sm-padding-x);
+  gap: var(--chip-spacing-sm-gap);
+}
+
+.selected-value--md {
+  padding: var(--chip-spacing-md-padding-y) var(--chip-spacing-md-padding-x);
+  gap: var(--chip-spacing-md-gap);
+}
+
+.selected-value--lg {
+  padding: var(--chip-spacing-lg-padding-y) var(--chip-spacing-lg-padding-x);
+  gap: var(--chip-spacing-lg-gap);
+}
+

package/src/styles/components/typography.css

@@ -0,0 +1,251 @@
+.heading-3xl {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-heading, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-7xl, 72rem) / 16);
+  line-height: calc(var(--font-leading-leading-7xl, 72) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.heading-3xl--light { font-weight: var(--font-weight-font-light, 300); }
+.heading-3xl--regular { font-weight: var(--font-weight-font-normal, 400); }
+.heading-3xl--medium { font-weight: var(--font-weight-font-medium, 500); }
+.heading-3xl--bold { font-weight: var(--font-weight-font-bold, 700); }
+.heading-3xl--black { font-weight: var(--font-weight-font-black, 900); }
+
+.heading-2xl {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-heading, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-6xl, 60rem) / 16);
+  line-height: calc(var(--font-leading-leading-6xl, 64) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.heading-2xl--light { font-weight: var(--font-weight-font-light, 300); }
+.heading-2xl--regular { font-weight: var(--font-weight-font-normal, 400); }
+.heading-2xl--medium { font-weight: var(--font-weight-font-medium, 500); }
+.heading-2xl--bold { font-weight: var(--font-weight-font-bold, 700); }
+.heading-2xl--black { font-weight: var(--font-weight-font-black, 900); }
+
+.heading-xl {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-heading, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-5xl, 48rem) / 16);
+  line-height: calc(var(--font-leading-leading-5xl, 52) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.heading-xl--light { font-weight: var(--font-weight-font-light, 300); }
+.heading-xl--regular { font-weight: var(--font-weight-font-normal, 400); }
+.heading-xl--medium { font-weight: var(--font-weight-font-medium, 500); }
+.heading-xl--bold { font-weight: var(--font-weight-font-bold, 700); }
+.heading-xl--black { font-weight: var(--font-weight-font-black, 900); }
+
+.heading-lg {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-heading, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-4xl, 36rem) / 16);
+  line-height: calc(var(--font-leading-leading-3xl, 40) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.heading-lg--light { font-weight: var(--font-weight-font-light, 300); }
+.heading-lg--regular { font-weight: var(--font-weight-font-normal, 400); }
+.heading-lg--medium { font-weight: var(--font-weight-font-medium, 500); }
+.heading-lg--bold { font-weight: var(--font-weight-font-bold, 700); }
+.heading-lg--black { font-weight: var(--font-weight-font-black, 900); }
+
+.heading-md {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-heading, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-3xl, 30rem) / 16);
+  line-height: calc(var(--font-leading-leading-2xl, 36) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.heading-md--light { font-weight: var(--font-weight-font-light, 300); }
+.heading-md--regular { font-weight: var(--font-weight-font-normal, 400); }
+.heading-md--medium { font-weight: var(--font-weight-font-medium, 500); }
+.heading-md--bold { font-weight: var(--font-weight-font-bold, 700); }
+.heading-md--black { font-weight: var(--font-weight-font-black, 900); }
+
+.heading-sm {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-heading, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-2xl, 24rem) / 16);
+  line-height: calc(var(--font-leading-leading-2xl, 36) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.heading-sm--light { font-weight: var(--font-weight-font-light, 300); }
+.heading-sm--regular { font-weight: var(--font-weight-font-normal, 400); }
+.heading-sm--medium { font-weight: var(--font-weight-font-medium, 500); }
+.heading-sm--bold { font-weight: var(--font-weight-font-bold, 700); }
+.heading-sm--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-xs-leading-5 {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-xs, 12rem) / 16);
+  line-height: calc(var(--font-leading-leading-sm, 20) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-xs-leading-5--light { font-weight: var(--font-weight-font-light, 300); }
+.body-xs-leading-5--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-xs-leading-5--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-xs-leading-5--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-xs-leading-5--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-xs-leading-4 {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-xs, 12rem) / 16);
+  line-height: calc(var(--font-leading-leading-xs, 18) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-xs-leading-4--light { font-weight: var(--font-weight-font-light, 300); }
+.body-xs-leading-4--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-xs-leading-4--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-xs-leading-4--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-xs-leading-4--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-xs-leading-none {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-xs, 12rem) / 16);
+  line-height: calc(var(--font-leading-leading-xxxs, 12) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-xs-leading-none--light { font-weight: var(--font-weight-font-light, 300); }
+.body-xs-leading-none--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-xs-leading-none--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-xs-leading-none--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-xs-leading-none--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-sm-leading-6 {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-sm, 14rem) / 16);
+  line-height: calc(var(--font-leading-leading-md, 24) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-sm-leading-6--light { font-weight: var(--font-weight-font-light, 300); }
+.body-sm-leading-6--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-sm-leading-6--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-sm-leading-6--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-sm-leading-6--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-sm-leading-5 {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-sm, 14rem) / 16);
+  line-height: calc(var(--font-leading-leading-sm, 20) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-sm-leading-5--light { font-weight: var(--font-weight-font-light, 300); }
+.body-sm-leading-5--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-sm-leading-5--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-sm-leading-5--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-sm-leading-5--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-sm-leading-none {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-sm, 14rem) / 16);
+  line-height: calc(var(--font-leading-leading-xxs, 14) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-sm-leading-none--light { font-weight: var(--font-weight-font-light, 300); }
+.body-sm-leading-none--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-sm-leading-none--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-sm-leading-none--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-sm-leading-none--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-md-leading-6 {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-base, 16rem) / 16);
+  line-height: calc(var(--font-leading-leading-md, 24) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-md-leading-6--light { font-weight: var(--font-weight-font-light, 300); }
+.body-md-leading-6--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-md-leading-6--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-md-leading-6--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-md-leading-6--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-md-leading-7 {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-base, 16rem) / 16);
+  line-height: calc(var(--font-leading-leading-lg, 28) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-md-leading-7--light { font-weight: var(--font-weight-font-light, 300); }
+.body-md-leading-7--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-md-leading-7--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-md-leading-7--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-md-leading-7--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-md-leading-none {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-base, 16rem) / 16);
+  line-height: calc(var(--font-leading-leading-base, 16) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-md-leading-none--light { font-weight: var(--font-weight-font-light, 300); }
+.body-md-leading-none--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-md-leading-none--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-md-leading-none--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-md-leading-none--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-lg-leading-7 {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-lg, 18rem) / 16);
+  line-height: calc(var(--font-leading-leading-lg, 28) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-lg-leading-7--light { font-weight: var(--font-weight-font-light, 300); }
+.body-lg-leading-7--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-lg-leading-7--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-lg-leading-7--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-lg-leading-7--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-lg-leading-6 {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-lg, 18rem) / 16);
+  line-height: calc(var(--font-leading-leading-md, 24) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-lg-leading-6--light { font-weight: var(--font-weight-font-light, 300); }
+.body-lg-leading-6--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-lg-leading-6--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-lg-leading-6--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-lg-leading-6--black { font-weight: var(--font-weight-font-black, 900); }
+
+.body-lg-leading-none {
+  margin: 0;
+  color: var(--color-text-default, #262626);
+  font-family: var(--font-font-family-body, "Satoshi"), "Satoshi", "Inter", "Segoe UI", "system-ui", sans-serif;
+  font-size: calc(var(--font-size-text-lg, 18rem) / 16);
+  line-height: calc(var(--font-leading-leading-xs, 18) / 16 * 1rem);
+  font-weight: var(--font-weight-font-normal, 400);
+}
+.body-lg-leading-none--light { font-weight: var(--font-weight-font-light, 300); }
+.body-lg-leading-none--regular { font-weight: var(--font-weight-font-normal, 400); }
+.body-lg-leading-none--medium { font-weight: var(--font-weight-font-medium, 500); }
+.body-lg-leading-none--bold { font-weight: var(--font-weight-font-bold, 700); }
+.body-lg-leading-none--black { font-weight: var(--font-weight-font-black, 900); }