@1money/component-ui 0.0.1

package/es/styles/tokens/_index.scss

@@ -0,0 +1,11 @@
+// Tokens entrypoint — re-exports semantic design tokens only.
+// Raw primitives and internal helpers (color hex values, font definitions)
+// are kept private to their subsystems.
+@forward './breakpoint';
+@forward './color';
+@forward './opacity';
+@forward './spacing';
+@forward './radius';
+@forward './shadow';
+@forward './sizing';
+@forward './typography';

package/es/styles/tokens/breakpoint/_index.scss

@@ -0,0 +1,2 @@
+// Breakpoint entrypoint — re-exports primitives.
+@forward './primitives';

package/es/styles/tokens/breakpoint/_primitives.scss

@@ -0,0 +1,8 @@
+// Breakpoint tokens — responsive width thresholds (ordered large → small).
+
+$om-breakpoints: (
+  lg: 1280px,
+  md: 1024px,
+  sm: 768px,
+) !default;
+$om-breakpoint-step: 1px !default;

package/es/styles/tokens/color/_index.scss

@@ -0,0 +1,3 @@
+// Color entrypoint — only exposes semantic color scales.
+// Raw primitives are internal; use semantic accessors (om-bg, om-text, om-icon, om-border).
+@forward './semantic-color';

package/es/styles/tokens/color/_primitives.scss

@@ -0,0 +1,42 @@
+// Primitive color tokens — raw color values organized by hue family.
+// These are the foundational layer; semantic tokens reference these.
+
+// ── Blue (Brand) ──
+$blue-900: #03163a;
+$blue-800: #052561;
+$blue-700: #073387;
+$blue-300: #a4bbe1;
+$blue-200: #c1d0eb;
+$blue-100: #dde6f4;
+$blue-50: #edf2f9;
+
+// ── Grey ──
+$grey-900: #131313;
+$grey-800: #404042;
+$grey-700: #646465;
+$grey-500: #9fa3a3;
+$grey-400: #bbbdc1;
+$grey-300: #d1d2d2;
+$grey-200: #e3e4e4;
+$grey-100: #f0f0f0;
+$grey-50: #f8f8f8;
+
+// ── Green (Positive) ──
+$green-900: #003104;
+$green-800: #1b4404;
+$green-700: #1f5800;
+
+// ── Yellow / Amber (Warning) ──
+$yellow-700: #db8600;
+$yellow-500: #f4c600;
+$yellow-400: #ffb300;
+$yellow-300: #ffa000;
+
+// ── Red (Danger) ──
+$red-800: #780000;
+$red-700: #920000;
+$red-600: #ae0000;
+
+// ── Neutral extremes ──
+$white: #fff;
+$black: #000;

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

@@ -0,0 +1,172 @@
+// Semantic color tokens — contextual tokens organized by category, referencing primitives.
+// Categories: bg (background), text, icon, border (border color).
+@use './primitives' as p;
+@use '../opacity' as opacity;
+
+// ── Background ──
+$om-bg-scale: (
+  'default': p.$white,
+  'default-hover': p.$grey-100,
+  'default-secondary': p.$grey-50,
+  'default-secondary-hover': p.$grey-200,
+  'default-tertiary': p.$grey-200,
+  'default-tertiary-hover': p.$grey-300,
+  'disabled': p.$grey-100,
+  'disabled-brand': p.$blue-300,
+  'disabled-black': rgba(p.$black, opacity.om-opacity('light')),
+  'brand': p.$blue-700,
+  'brand-hover': p.$blue-800,
+  'brand-secondary': p.$blue-100,
+  'brand-secondary-hover': p.$blue-200,
+  'brand-tertiary': p.$blue-50,
+  'brand-tertiary-hover': p.$blue-100,
+  'neutral': p.$grey-900,
+  'neutral-hover': p.$grey-800,
+  'neutral-secondary': p.$grey-200,
+  'neutral-secondary-hover': p.$grey-300,
+  'neutral-tertiary': p.$grey-100,
+  'neutral-tertiary-hover': p.$grey-200,
+  'positive': p.$green-700,
+  'positive-hover': p.$green-800,
+  'positive-secondary': rgba(p.$green-700, opacity.om-opacity('light')),
+  'positive-secondary-hover': rgba(p.$green-700, opacity.om-opacity('medium')),
+  'positive-tertiary': rgba(p.$green-700, opacity.om-opacity('subtle')),
+  'positive-tertiary-hover': rgba(p.$green-700, opacity.om-opacity('light')),
+  'warning': p.$yellow-500,
+  'warning-hover': p.$yellow-400,
+  'warning-secondary': rgba(p.$yellow-500, opacity.om-opacity('light')),
+  'warning-secondary-hover': rgba(p.$yellow-500, opacity.om-opacity('medium')),
+  'warning-tertiary': rgba(p.$yellow-500, opacity.om-opacity('subtle')),
+  'warning-tertiary-hover': rgba(p.$yellow-500, opacity.om-opacity('light')),
+  'danger': p.$red-600,
+  'danger-hover': p.$red-700,
+  'danger-secondary': rgba(p.$red-600, opacity.om-opacity('light')),
+  'danger-secondary-hover': rgba(p.$red-600, opacity.om-opacity('medium')),
+  'danger-tertiary': rgba(p.$red-600, opacity.om-opacity('subtle')),
+  'danger-tertiary-hover': rgba(p.$red-600, opacity.om-opacity('light')),
+  'scrim-dark': rgba(p.$black, opacity.om-opacity('medium')),
+  'scrim-light': rgba(p.$white, opacity.om-opacity('strong')),
+) !default;
+
+// ── Text ──
+$om-text-scale: (
+  // Base
+  'default': p.$grey-900,
+  'default-secondary': p.$grey-800,
+  'default-tertiary': p.$grey-700,
+  // Disabled
+  'disabled': p.$grey-400,
+  'disabled-black': p.$grey-400,
+  'disabled-white': p.$grey-50,
+  // Brand
+  'brand': p.$blue-700,
+  'brand-secondary': p.$blue-300,
+  'brand-tertiary': p.$blue-200,
+  'on-brand': p.$blue-100,
+  'on-brand-secondary': p.$blue-800,
+  'on-brand-tertiary': p.$blue-900,
+  // Neutral
+  'neutral': p.$grey-800,
+  'neutral-secondary': p.$grey-500,
+  'neutral-tertiary': p.$grey-400,
+  'on-neutral': p.$white,
+  'on-neutral-secondary': p.$grey-300,
+  'on-neutral-tertiary': p.$grey-200,
+  // Positive
+  'positive': p.$green-700,
+  'positive-secondary': rgba(p.$green-700, opacity.om-opacity('medium')),
+  'positive-tertiary': rgba(p.$green-700, opacity.om-opacity('light')),
+  'on-positive': rgba(p.$green-700, opacity.om-opacity('subtle')),
+  'on-positive-secondary': p.$green-800,
+  'on-positive-tertiary': p.$green-900,
+  // Warning
+  'warning': p.$yellow-700,
+  'warning-secondary': rgba(p.$yellow-500, opacity.om-opacity('medium')),
+  'warning-tertiary': rgba(p.$yellow-500, opacity.om-opacity('light')),
+  'on-warning': rgba(p.$yellow-500, opacity.om-opacity('subtle')),
+  'on-warning-secondary': p.$yellow-300,
+  'on-warning-tertiary': p.$yellow-700,
+  // Danger
+  'danger': p.$red-600,
+  'danger-secondary': rgba(p.$red-600, opacity.om-opacity('medium')),
+  'danger-tertiary': rgba(p.$red-600, opacity.om-opacity('light')),
+  'on-danger': rgba(p.$red-600, opacity.om-opacity('subtle')),
+  'on-danger-secondary': p.$red-700,
+  'on-danger-tertiary': p.$red-800,
+) !default;
+
+// ── Icon ──
+$om-icon-scale: (
+  // Base
+  'default': p.$grey-900,
+  'default-secondary': p.$grey-800,
+  'default-tertiary': p.$grey-700,
+  // Disabled
+  'disabled': p.$grey-300,
+  'on-disabled': p.$grey-400,
+  // Brand
+  'brand': p.$blue-700,
+  'brand-secondary': p.$blue-300,
+  'brand-tertiary': p.$blue-200,
+  'on-brand': p.$blue-100,
+  'on-brand-secondary': p.$blue-800,
+  'on-brand-tertiary': p.$blue-900,
+  // Neutral
+  'neutral': p.$grey-800,
+  'neutral-secondary': p.$grey-500,
+  'neutral-tertiary': p.$grey-400,
+  'on-neutral': p.$white,
+  'on-neutral-secondary': p.$grey-800,
+  'on-neutral-tertiary': p.$grey-700,
+  // Positive
+  'positive': p.$green-700,
+  'positive-secondary': rgba(p.$green-700, opacity.om-opacity('medium')),
+  'positive-tertiary': rgba(p.$green-700, opacity.om-opacity('light')),
+  'on-positive': rgba(p.$green-700, opacity.om-opacity('subtle')),
+  'on-positive-secondary': p.$green-800,
+  'on-positive-tertiary': p.$green-900,
+  // Warning
+  'warning': p.$yellow-700,
+  'warning-secondary': p.$yellow-500,
+  'warning-tertiary': rgba(p.$yellow-500, opacity.om-opacity('medium')),
+  'on-warning': rgba(p.$yellow-500, opacity.om-opacity('light')),
+  'on-warning-secondary': p.$yellow-300,
+  'on-warning-tertiary': p.$yellow-700,
+  // Danger
+  'danger': p.$red-600,
+  'danger-secondary': rgba(p.$red-600, opacity.om-opacity('medium')),
+  'danger-tertiary': rgba(p.$red-600, opacity.om-opacity('light')),
+  'on-danger': rgba(p.$red-600, opacity.om-opacity('subtle')),
+  'on-danger-secondary': p.$red-700,
+  'on-danger-tertiary': p.$red-800,
+) !default;
+
+// ── Border (Semantic) ──
+$om-border-scale: (
+  // Base
+  'default': p.$grey-300,
+  'default-secondary': p.$grey-500,
+  'default-tertiary': p.$grey-800,
+  // Disabled
+  'disabled': p.$grey-200,
+  // Brand
+  'brand': p.$blue-700,
+  'brand-secondary': p.$blue-300,
+  'brand-tertiary': p.$blue-100,
+  // Neutral
+  'neutral': p.$grey-200,
+  'neutral-secondary': p.$grey-100,
+  'neutral-tertiary': p.$grey-50,
+  // Positive
+  'positive': p.$green-700,
+  'positive-secondary': rgba(p.$green-700, opacity.om-opacity('medium')),
+  'positive-tertiary': rgba(p.$green-700, opacity.om-opacity('light')),
+  // Warning
+  'warning': p.$yellow-700,
+  'warning-secondary': p.$yellow-500,
+  'warning-tertiary': rgba(p.$yellow-500, opacity.om-opacity('light')),
+  // Danger
+  'danger': p.$red-600,
+  'danger-secondary': rgba(p.$red-600, opacity.om-opacity('light')),
+  'danger-tertiary': rgba(p.$red-600, opacity.om-opacity('subtle')),
+) !default;

package/es/styles/tokens/opacity/_functions.scss

@@ -0,0 +1,13 @@
+// Opacity functions — programmatic access to the opacity scale.
+@use 'sass:map';
+@use './primitives' as *;
+
+@function om-opacity($key) {
+  $value: map.get($om-opacity-scale, $key);
+
+  @if not $value {
+    @error 'Unknown opacity key "#{$key}". Available: #{map.keys($om-opacity-scale)}';
+  }
+
+  @return $value;
+}

package/es/styles/tokens/opacity/_index.scss

@@ -0,0 +1,3 @@
+// Opacity entrypoint — re-exports primitives and functions.
+@forward './primitives';
+@forward './functions';

package/es/styles/tokens/opacity/_primitives.scss

@@ -0,0 +1,12 @@
+// Opacity scale tokens — standardized opacity values for disabled/overlay states.
+
+$om-opacity-scale: (
+  'subtle': 0.05,
+  'light': 0.1,
+  'medium': 0.2,
+  'disabled-light': 0.3,
+  'overlay': 0.4,
+  'disabled': 0.5,
+  'disabled-heavy': 0.6,
+  'strong': 0.8,
+) !default;

package/es/styles/tokens/radius/_index.scss

@@ -0,0 +1,2 @@
+// Radius entrypoint — re-exports primitives.
+@forward './primitives';

package/es/styles/tokens/radius/_primitives.scss

@@ -0,0 +1,11 @@
+// Radius scale tokens — shared border-radius values for the theme and utility generator.
+// Aligned with Figma design system: Radius 100–600, Full.
+$om-radius-scale: (
+  '0': 0,
+  '100': 4px,
+  '200': 8px,
+  '300': 12px,
+  '400': 16px,
+  '600': 24px,
+  'full': 9999px,
+) !default;

package/es/styles/tokens/shadow/_index.scss

@@ -0,0 +1,2 @@
+// Shadow entrypoint — re-exports primitives.
+@forward './primitives';

package/es/styles/tokens/shadow/_primitives.scss

@@ -0,0 +1,7 @@
+// Shadow scale tokens — shared box-shadow values for the theme and utility generator.
+// Aligned with Figma design system: Drop Shadow(Beta) 100–200.
+$om-shadow-scale: (
+  '0': none,
+  '100': (0 4px 8px rgba(65, 91, 130, 12%)),
+  '200': (0 10px 22px rgba(0, 0, 0, 10%)),
+) !default;

package/es/styles/tokens/sizing/_functions.scss

@@ -0,0 +1,17 @@
+// Sizing token helpers — pure access to the component height scale.
+@use 'sass:map';
+@use './primitives' as primitives;
+
+/// Retrieves the raw component height token for a given size key.
+/// @param {string} $key - Size key (xs, sm, md, lg, xl, 2xl, 3xl).
+/// @return {length} Raw component height token value.
+@function om-component-height-token($key) {
+  $normalized-key: '#{$key}';
+  $value: map.get(primitives.$om-component-height-scale, $normalized-key);
+
+  @if not $value {
+    @error 'Unknown component height key "#{$normalized-key}". Available: #{map.keys(primitives.$om-component-height-scale)}';
+  }
+
+  @return $value;
+}

package/es/styles/tokens/sizing/_index.scss

@@ -0,0 +1,4 @@
+// Sizing entrypoint — re-exports primitives, functions, and semantic sizing.
+@forward './primitives';
+@forward './functions';
+@forward './semantic-sizing';

package/es/styles/tokens/sizing/_primitives.scss

@@ -0,0 +1,12 @@
+// Component height tokens — standardized heights for interactive elements.
+// Converted from loose variables to a scale map for consistency.
+
+$om-component-height-scale: (
+  'xs': 24px,   // Badge, small chips
+  'sm': 32px,   // Small button, icon button
+  'md': 40px,   // Medium button, sidebar items
+  'lg': 44px,   // Small input/select
+  'xl': 48px,   // Cell, stepper step
+  '2xl': 52px,  // Default button
+  '3xl': 56px,  // Default input/select
+) !default;

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

@@ -0,0 +1,11 @@
+// Sizing percentage scale — standardized width/height percentage values.
+
+$om-sizing-scale: (
+  '25': 25%,
+  '33': 33.333%,
+  '50': 50%,
+  '66': 66.667%,
+  '75': 75%,
+  '100': 100%,
+  'auto': auto,
+) !default;

package/es/styles/tokens/spacing/_functions.scss

@@ -0,0 +1,51 @@
+// Spacing functions — programmatic access to the spacing scale.
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use './primitives' as *;
+
+/**
+  * Retrieves the spacing value for a given token key.
+  *
+  * @param {string} $key - The spacing token key (e.g., '100', '200').
+  * @return {length|null} The computed spacing value or null if the key is invalid.
+  * @example
+  *   .element {
+  *     padding: om-spacing-token('200'); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+@function om-spacing-token($key) {
+  $multiplier: map.get($om-spacing-scale, '#{$key}');
+
+  @if not $multiplier {
+    @return null;
+  }
+
+  @return $multiplier * $om-sys-spacing-unit;
+}
+
+/**
+  * Computes the spacing value based on a token key or a direct length value.
+  *
+  * @param {string|length} $value - The spacing token key (e.g., '100') or a direct length value (e.g., '16px').
+  * @return {length} The computed spacing value.
+  * @example
+  *   .element {
+  *     margin: om-spacing-value('300'); // Returns 12px if $om-sys-spacing-unit is 4px
+  *     padding: om-spacing-value(16px); // Returns 16px
+  *     gap: om-spacing-value(2); // Returns 8px if $om-sys-spacing-unit is 4px
+  *   }
+  */
+@function om-spacing-value($value) {
+  $result: om-spacing-token($value);
+
+  @if $result {
+    @return $result;
+  }
+
+  @if meta.type-of($value) == 'number' and math.is-unitless($value) {
+    @return $value * $om-sys-spacing-unit;
+  }
+
+  @return $value;
+}

package/es/styles/tokens/spacing/_index.scss

@@ -0,0 +1,4 @@
+// Spacing entrypoint — re-exports primitives, functions, and semantic spacing tokens.
+@forward './primitives';
+@forward './functions';
+@forward './semantic-spacing';

package/es/styles/tokens/spacing/_primitives.scss

@@ -0,0 +1,22 @@
+// Figma-aligned spacing tokens — token 100 = 4px.
+
+$om-sys-spacing-unit: 4px !default;
+$om-spacing-scale: (
+  '0': 0,
+  '050': 0.5,
+  '100': 1,
+  '200': 2,
+  '300': 3,
+  '400': 4,
+  '500': 5,
+  '600': 6,
+  '800': 8,
+  '1000': 10,
+  '1200': 12,
+  '1400': 14,
+  '1600': 16,
+  '2000': 20,
+  '2400': 24,
+  '3200': 32,
+  '4000': 40,
+) !default;

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

@@ -0,0 +1,22 @@
+// Semantic spacing scale maps — subsets of the primitive spacing scale for each Figma usage group.
+// Each map picks specific keys from the primitive $om-spacing-scale to enforce allowed tokens.
+@use 'sass:map';
+@use './primitives' as p;
+
+@function -om-pick-spacing($keys...) {
+  $result: ();
+
+  @each $key in $keys {
+    @if not map.has-key(p.$om-spacing-scale, $key) {
+      @error 'Primitive spacing scale does not contain key "#{$key}"';
+    }
+
+    $result: map.set($result, $key, $key);
+  }
+
+  @return $result;
+}
+
+$om-gap-scale: -om-pick-spacing('050', '100', '200', '300', '400', '600', '1600') !default;
+$om-component-padding-scale: -om-pick-spacing('050', '100', '200', '300', '400', '600', '800') !default;
+$om-section-padding-scale: -om-pick-spacing('800', '1600', '2400', '4000') !default;

package/es/styles/tokens/typography/_functions.scss

@@ -0,0 +1,31 @@
+// Typography token helpers — pure access to the typography scale.
+@use 'sass:map';
+@use './semantic-typography' as scale;
+
+/// Retrieves the property map for a given category and size.
+/// @param {string} $category - Typography category (display, headline, title, body, link, label).
+/// @param {string} $size - Size key (xs, sm, md, lg, xl).
+/// @return {map} The full property map for the given category/size.
+@function -om-resolve-typography($category, $size) {
+  $cat-map: map.get(scale.$om-typography-categories, $category);
+
+  @if not $cat-map {
+    @error 'Unknown typography category "#{$category}". Available: #{map.keys(scale.$om-typography-categories)}';
+  }
+
+  $entry: map.get($cat-map, $size);
+
+  @if not $entry {
+    @error 'Unknown typography size "#{$size}" for category "#{$category}". Available: #{map.keys($cat-map)}';
+  }
+
+  @return $entry;
+}
+
+/// Returns the full property map for a typography category/size.
+/// @param {string} $category - Typography category.
+/// @param {string} $size - Size key.
+/// @return {map} Full property map (font-family, font-size, line-height, letter-spacing, font-weight, etc.).
+@function om-typography($category, $size) {
+  @return -om-resolve-typography($category, $size);
+}

package/es/styles/tokens/typography/_index.scss

@@ -0,0 +1,4 @@
+// Typography entrypoint — only exposes scale maps and accessor functions.
+// Raw primitives (font families, weights, etc.) are internal to the scale.
+@forward './semantic-typography';
+@forward './functions';

package/es/styles/tokens/typography/_primitives.scss

@@ -0,0 +1,27 @@
+// Typography primitives — font families, weights, line-heights, tracking, and default text color.
+
+@use '../color/primitives' as color;
+
+// ── Font families ──
+// stylelint-disable value-keyword-case -- Font names must preserve casing
+$om-font-display: var(--font-aeonik), Aeonik, sans-serif !default;
+$om-font-body: var(--font-inter), Inter, sans-serif !default;
+// stylelint-enable value-keyword-case
+
+// ── Font weights ──
+$om-font-weight-regular: 400 !default;
+$om-font-weight-medium: 500 !default;
+$om-font-weight-semibold: 600 !default;
+$om-font-weight-bold: 700 !default;
+
+// ── Line-height ratios ──
+$om-line-height-tight: 1.08 !default;
+$om-line-height-reading: 1.4 !default;
+
+// ── Letter spacing ──
+$om-tracking-tight: -0.25px !default;
+$om-tracking-none: 0 !default;
+
+// ── Default text color ──
+// Figma: Text(Beta)/Default/Default = #131313
+$om-text-color-default: color.$grey-900 !default;