@1money/component-ui 0.0.1 → 0.0.3

package/es/styles/tokens/typography/_semantic-typography.scss

@@ -1,216 +0,0 @@
-// Typography scale — Sass maps encoding the complete Figma typography spec.
-// Key names (xl/lg/md/sm/xs) align with component size props.
-// Line-height values preserve the original Figma percentages.
-
-@use 'sass:map';
-@use './primitives' as *;
-
-// ── Display ──
-// Base: Aeonik / 500 / 108% / #131313
-$om-typography-display: (
-  'xl': (
-    font-family: $om-font-display,
-    font-weight: $om-font-weight-medium,
-    font-size: 76px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-tight,
-  ),
-  'lg': (
-    font-family: $om-font-display,
-    font-weight: $om-font-weight-medium,
-    font-size: 64px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-tight,
-  ),
-  'md': (
-    font-family: $om-font-display,
-    font-weight: $om-font-weight-medium,
-    font-size: 52px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-  ),
-  'sm': (
-    font-family: $om-font-display,
-    font-weight: $om-font-weight-medium,
-    font-size: 46px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-  ),
-  'xs': (
-    font-family: $om-font-display,
-    font-weight: $om-font-weight-medium,
-    font-size: 36px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-  ),
-) !default;
-
-// ── Headline ──
-// Base: Aeonik / 500 / 108% / #131313
-$om-typography-headline: (
-  'lg': (
-    font-family: $om-font-display,
-    font-weight: $om-font-weight-medium,
-    font-size: 32px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-  ),
-  'md': (
-    font-family: $om-font-display,
-    font-weight: $om-font-weight-medium,
-    font-size: 28px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-  ),
-  'sm': (
-    font-family: $om-font-display,
-    font-weight: $om-font-weight-medium,
-    font-size: 24px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-  ),
-  'xs': (
-    font-family: $om-font-display,
-    font-weight: $om-font-weight-medium,
-    font-size: 18px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-  ),
-) !default;
-
-// ── Title ──
-// Base: Inter / 500 / 108% / #131313 — strong = 700
-$om-typography-title: (
-  'lg': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 18px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-bold),
-  ),
-  'md': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 16px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-bold),
-  ),
-  'sm': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 14px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-bold),
-  ),
-) !default;
-
-// ── Body ──
-// Base: Inter / 400 / 140% / #131313 — strong = 500
-$om-typography-body: (
-  'lg': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-regular,
-    font-size: 16px,
-    line-height: $om-line-height-reading * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-medium),
-  ),
-  'md': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-regular,
-    font-size: 14px,
-    line-height: $om-line-height-reading * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-medium),
-  ),
-  'sm': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-regular,
-    font-size: 12px,
-    line-height: $om-line-height-reading * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-medium),
-  ),
-) !default;
-
-// ── Link ──
-// Base: Inter / 500 / 140% / underline / #131313
-$om-typography-link: (
-  'md': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 14px,
-    line-height: $om-line-height-reading * 100%,
-    letter-spacing: $om-tracking-none,
-    text-decoration: underline,
-    text-decoration-skip-ink: none,
-  ),
-  'sm': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 12px,
-    line-height: $om-line-height-reading * 100%,
-    letter-spacing: $om-tracking-none,
-    text-decoration: underline,
-    text-decoration-skip-ink: none,
-  ),
-) !default;
-
-// ── Label ──
-// Base: Inter / 500 / 108% / #131313 — strong = 700 (xl) / 600 (rest)
-$om-typography-label: (
-  'xl': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 18px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-bold),
-  ),
-  'lg': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 16px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-semibold),
-  ),
-  'md': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 14px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-semibold),
-  ),
-  'sm': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 12px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-semibold),
-  ),
-  'xs': (
-    font-family: $om-font-body,
-    font-weight: $om-font-weight-medium,
-    font-size: 10px,
-    line-height: $om-line-height-tight * 100%,
-    letter-spacing: $om-tracking-none,
-    strong: (font-weight: $om-font-weight-semibold),
-  ),
-) !default;
-
-// ── Master lookup ──
-// Maps category name → scale map for programmatic access.
-$om-typography-categories: (
-  'display': $om-typography-display,
-  'headline': $om-typography-headline,
-  'title': $om-typography-title,
-  'body': $om-typography-body,
-  'link': $om-typography-link,
-  'label': $om-typography-label,
-) !default;

package/es/styles/utilities/_generator.scss

@@ -1,55 +0,0 @@
-// Utility generator — emits atomic utility classes from the theme scales and system registry.
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:meta';
-@use '../theme/functions' as theme-functions;
-@use '../theme/scales' as theme-scales;
-@use '../system/props' as props;
-
-$-flag-enabled: (
-  spacing: theme-scales.$om-sys-enable-spacing,
-  layout: theme-scales.$om-sys-enable-layout,
-  sizing: theme-scales.$om-sys-enable-sizing,
-  color: theme-scales.$om-sys-enable-color,
-  visual: theme-scales.$om-sys-enable-visual,
-);
-
-@mixin gen-classes($bp: '') {
-  $pre: if($bp != '', '#{$bp}-', '');
-
-  @each $name, $config in props.$om-system-props {
-    // Skip alias entries — they share the same config as their canonical prop.
-    @if map.has-key(props.$om-system-aliases, $name) {
-      // no-op
-    } @else {
-      $flag: map.get($config, flag);
-
-      @if map.get($-flag-enabled, $flag) {
-        $kind: map.get($config, kind);
-        $css-props: map.get($config, css);
-
-        @if $kind == enum {
-          $css: list.nth($css-props, 1);
-          $vals: map.get($config, values);
-          $aliases: if(map.has-key(props.$om-value-aliases, $css), map.get(props.$om-value-aliases, $css), ());
-
-          @each $val in $vals {
-            $css-val: if(meta.type-of($aliases) == 'map' and map.has-key($aliases, $val), map.get($aliases, $val), $val);
-            .#{theme-scales.$om-sys-prefix}-#{$pre}#{$name}-#{$val} { #{$css}: $css-val; }
-          }
-        } @else {
-          $scale-name: map.get($config, scale);
-          $scale: theme-functions.om-scale-map($scale-name);
-
-          @each $key, $_ in $scale {
-            .#{theme-scales.$om-sys-prefix}-#{$pre}#{$name}-#{$key} {
-              @each $css in $css-props {
-                #{$css}: theme-functions.om-token($scale-name, $key);
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/es/styles/utilities/_index.scss

@@ -1,14 +0,0 @@
-// Utility entrypoint — emits root theme variables and responsive utility classes.
-@use './generator' as generator;
-@use '../tokens' as tokens;
-@use '../theme/functions' as theme-functions;
-@use '../theme/breakpoints' as breakpoints;
-@include theme-functions.om-emit-theme-vars;
-@include theme-functions.om-emit-typography-vars;
-@include generator.gen-classes;
-
-@each $bp-name, $bp-value in tokens.$om-breakpoints {
-  @include breakpoints.om-down($bp-name) {
-    @include generator.gen-classes($bp-name);
-  }
-}

package/lib/components/Accordion/style/Accordion.scss

@@ -1,127 +0,0 @@
-@use '@/styles/api' as theme;
-
-$component: 'accordion';
-
-.#{theme.$prefix}-#{$component} {
-  display: flex;
-  flex-direction: column;
-  gap: theme.spacing(gap, 400);
-  width: 100%;
-
-  // ── Accordion Item ──
-  &-item {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    &-disabled {
-      cursor: not-allowed;
-      opacity: theme.opacity('disabled');
-    }
-  }
-
-  // ── Header (clickable trigger) ──
-  &-header {
-    display: flex;
-    gap: theme.spacing(gap, 400);
-    align-items: center;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-    color: inherit;
-    text-align: left;
-    background: none;
-    border: none;
-    cursor: pointer;
-
-    &:disabled {
-      cursor: not-allowed;
-    }
-  }
-
-  // ── Title ──
-  &-title {
-    flex: 1 0 0;
-    color: theme.palette(text, 'default');
-  }
-
-  // ── Icon ──
-  &-icon {
-    flex-shrink: 0;
-    color: theme.palette(icon, 'default');
-  }
-
-  // ── Content ──
-  &-content {
-    width: 100%;
-    color: theme.palette(text, 'default');
-  }
-
-  // ══════════════════════════════════════
-  // Variant: Fill
-  // ══════════════════════════════════════
-  &-fill {
-    .#{theme.$prefix}-#{$component}-item {
-      padding: theme.spacing(component-padding, 600);
-      background-color: theme.palette(bg, 'default-secondary');
-    }
-
-    .#{theme.$prefix}-#{$component}-header {
-      &:hover:not(:disabled) {
-        .#{theme.$prefix}-#{$component}-icon {
-          color: theme.palette(icon, 'default-secondary');
-        }
-      }
-    }
-  }
-
-  // ══════════════════════════════════════
-  // Variant: Stroke
-  // ══════════════════════════════════════
-  &-stroke {
-    gap: 0;
-
-    .#{theme.$prefix}-#{$component}-item {
-      padding: theme.spacing(component-padding, 600) 0;
-      border-bottom: 1px solid theme.palette(border, 'neutral');
-    }
-
-    .#{theme.$prefix}-#{$component}-header {
-      &:hover:not(:disabled) {
-        .#{theme.$prefix}-#{$component}-icon {
-          color: theme.palette(icon, 'default-secondary');
-        }
-      }
-    }
-  }
-
-  // ══════════════════════════════════════
-  // Size: Large
-  // ══════════════════════════════════════
-  &-large {
-    .#{theme.$prefix}-#{$component}-content {
-      margin-top: theme.spacing(gap, 600);
-    }
-
-    &.#{theme.$prefix}-#{$component}-fill {
-      .#{theme.$prefix}-#{$component}-item {
-        border-radius: theme.shape(600);
-      }
-    }
-  }
-
-  // ══════════════════════════════════════
-  // Size: Small
-  // ══════════════════════════════════════
-  &-small {
-    .#{theme.$prefix}-#{$component}-content {
-      margin-top: theme.spacing(gap, 400);
-    }
-
-    &.#{theme.$prefix}-#{$component}-fill {
-      .#{theme.$prefix}-#{$component}-item {
-        border-radius: theme.shape(400);
-      }
-    }
-  }
-}

package/lib/components/Alert/style/Alert.scss

@@ -1,89 +0,0 @@
-@use '@/styles/api' as theme;
-@use '@/styles/recipes/variants' as variants;
-
-$component: 'alert';
-
-// ── Variant DSL ──
-$alert-variant-schema: variants.om-variant-schema(
-  $component, container-bg, container-border
-);
-$alert-variants: (
-  'info': (
-    container-bg: theme.palette(bg, 'default-secondary'),
-    container-border: transparent,
-  ),
-  'success': (
-    container-bg: theme.palette(bg, 'default'),
-    container-border: theme.palette(border, 'neutral-secondary'),
-  ),
-  'warning': (
-    container-bg: theme.palette(bg, 'warning-tertiary-hover'),
-    container-border: transparent,
-  ),
-  'error': (
-    container-bg: theme.palette(bg, 'danger-tertiary'),
-    container-border: transparent,
-  ),
-);
-
-.#{theme.$prefix}-#{$component} {
-  @include variants.om-variant-default($alert-variants, 'info', $alert-variant-schema);
-
-  display: flex;
-  gap: theme.spacing(gap, 300);
-  align-items: flex-start;
-  padding: theme.spacing(component-padding, 300);
-  background-color: var(--om-alert-container-bg);
-  border: 1px solid var(--om-alert-container-border);
-  border-radius: theme.shape(300);
-
-  // ── Icon ──
-  &-icon {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-  }
-
-  // ── Content area ──
-  &-content {
-    display: flex;
-    flex: 1 0 0;
-    flex-direction: column;
-    gap: theme.spacing(gap, 100);
-    align-items: flex-start;
-    min-width: 0;
-    padding-top: theme.spacing(scale, 200);
-  }
-
-  // ── Title, Body & Link ──
-  // Typography styles handled by TypographyTitle, TypographyBody and TypographyLink components
-
-  // ── Close button ──
-  &-close {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    align-self: flex-start;
-    justify-content: center;
-    padding: 0;
-    color: theme.palette(icon, 'on-neutral-tertiary');
-    background: none;
-    border: none;
-    cursor: pointer;
-
-    // Override IconWrapper inline style (color + --icon-color) so SVG inherits from parent
-    .#{theme.$prefix}-icons-wrapper {
-      color: inherit !important;
-
-      --icon-color: currentcolor;
-    }
-
-    &:hover {
-      color: theme.palette(icon, 'neutral');
-    }
-  }
-
-  // ── Status variants ──
-  @include variants.om-variant-classes($alert-variants, $alert-variant-schema, $default: 'info');
-}

package/lib/components/Button/style/Button.scss

@@ -1,190 +0,0 @@
-@use '@/styles/api' as theme;
-@use '@/styles/recipes/variants' as variants;
-
-$component: 'button';
-$button-variant-schema: variants.om-variant-schema(
-  $component, text, bg, hover-bg, disabled-text, disabled-bg
-);
-$button-primary-variant: (
-  text: theme.palette(text, 'on-neutral'),
-  bg: theme.palette(bg, 'brand'),
-  hover-bg: theme.palette(bg, 'brand-hover'),
-  disabled-text: theme.palette(text, 'disabled-white'),
-  disabled-bg: theme.palette(bg, 'disabled-brand'),
-);
-$button-variants: (
-  'primary': $button-primary-variant,
-  'secondary': (
-    text: theme.palette(text, 'brand'),
-    bg: theme.palette(bg, 'brand-secondary'),
-    hover-bg: theme.palette(bg, 'brand-secondary-hover'),
-    disabled-text: theme.palette(text, 'brand-secondary'),
-    disabled-bg: theme.palette(bg, 'brand-tertiary'),
-  ),
-  'grey': (
-    text: theme.palette(text, 'default'),
-    bg: theme.palette(bg, 'neutral-tertiary'),
-    hover-bg: theme.palette(bg, 'neutral-tertiary-hover'),
-    disabled-text: theme.palette(text, 'disabled'),
-    disabled-bg: theme.palette(bg, 'disabled'),
-  ),
-  'black': (
-    text: theme.palette(text, 'on-neutral'),
-    bg: theme.palette(bg, 'neutral'),
-    hover-bg: theme.palette(bg, 'neutral-hover'),
-    disabled-text: theme.palette(text, 'disabled-white'),
-    disabled-bg: theme.palette(bg, 'disabled-black'),
-  ),
-  'white': (
-    text: theme.palette(text, 'default'),
-    bg: theme.palette(bg, 'default'),
-    hover-bg: theme.palette(bg, 'default-hover'),
-    disabled-text: theme.palette(text, 'disabled'),
-    disabled-bg: theme.palette(bg, 'disabled'),
-  ),
-  'danger': (
-    text: theme.palette(text, 'danger'),
-    bg: theme.palette(bg, 'danger-secondary'),
-    hover-bg: theme.palette(bg, 'danger-secondary-hover'),
-    disabled-text: theme.palette(text, 'danger-secondary'),
-    disabled-bg: theme.palette(bg, 'danger-tertiary'),
-  ),
-  'warning': (
-    text: theme.palette(text, 'default'),
-    bg: theme.palette(bg, 'warning'),
-    hover-bg: theme.palette(bg, 'warning-hover'),
-    disabled-text: theme.palette(text, 'disabled'),
-    disabled-bg: theme.palette(bg, 'warning-secondary-hover'),
-  ),
-);
-
-.#{theme.$prefix}-#{$component} {
-  @include variants.om-variant-default($button-variants, 'primary', $button-variant-schema);
-
-  --om-button-gap: #{theme.spacing(gap, 200)};
-
-  display: inline-flex;
-  gap: var(--om-button-gap);
-  align-items: center;
-  justify-content: center;
-  height: 52px;
-  padding: theme.spacing(component-padding, 400);
-  color: var(--om-button-text);
-  line-height: 1.25;
-  background-color: var(--om-button-bg);
-  border: none;
-  border-radius: theme.shape(300);
-  outline: none;
-  box-shadow: none;
-  cursor: pointer;
-
-  &:disabled,
-  &-disabled {
-    color: var(--om-button-disabled-text);
-    background-color: var(--om-button-disabled-bg);
-    cursor: not-allowed;
-  }
-
-  &:hover:not(:disabled) {
-    background-color: var(--om-button-hover-bg);
-  }
-
-  // ── Sizes ──
-  &-medium {
-    height: 40px;
-    padding: theme.spacing(component-padding, 300);
-    line-height: 1.14;
-    border-radius: theme.shape(300);
-  }
-
-  &-small {
-    height: 32px;
-    padding: theme.spacing(component-padding, 200) theme.spacing(component-padding, 300);
-    line-height: 1.33;
-    border-radius: theme.shape(200);
-  }
-
-  &-rounded {
-    border-radius: theme.shape('full');
-  }
-
-  // ── Text variant ──
-  &-text {
-    --om-button-text: #{theme.palette(text, 'brand')};
-    --om-button-hover-text: #{theme.palette(text, 'on-brand-secondary')};
-    --om-button-bg: transparent;
-    --om-button-hover-bg: transparent;
-    --om-button-disabled-text: #{theme.palette(text, 'brand-secondary')};
-    --om-button-disabled-bg: transparent;
-    --om-button-gap: #{theme.spacing(gap, 100)};
-
-    height: auto;
-    padding: 0;
-    border-radius: 0;
-
-    &:hover:not(:disabled) {
-      --om-button-text: var(--om-button-hover-text);
-
-      color: var(--om-button-text);
-    }
-  }
-
-  &-text-danger {
-    --om-button-text: #{theme.palette(text, 'danger')};
-    --om-button-hover-text: #{theme.palette(text, 'on-danger-secondary')};
-    --om-button-disabled-text: #{theme.palette(text, 'danger-secondary')};
-  }
-
-  // Text variant: size-specific line-height
-  &-text#{&}-large {
-    line-height: 1.08;
-  }
-
-  &-text#{&}-medium {
-    line-height: 1.4;
-  }
-
-  &-text#{&}-small {
-    line-height: 1.4;
-  }
-
-  // ── Icon slots ──
-  &-icon-start,
-  &-icon-end {
-    display: inline-flex;
-    flex-shrink: 0;
-    align-items: center;
-    justify-content: center;
-    color: currentcolor;
-    line-height: 0;
-
-    > .#{theme.$prefix}-icons-wrapper {
-      color: currentcolor;
-    }
-  }
-
-  // ── Loading icon ──
-  &-loading-icon {
-    display: inline-flex;
-    width: 20px;
-    height: 20px;
-
-    &-medium {
-      width: 16px;
-      height: 16px;
-    }
-
-    &-small {
-      width: 14px;
-      height: 14px;
-    }
-
-    // Override Spinner's default brand color to inherit Button text color
-    &.#{theme.$prefix}-spinner {
-      color: inherit;
-    }
-  }
-
-  // ── Color variants ──
-  @include variants.om-variant-classes($button-variants, $button-variant-schema, $default: 'primary');
-}