@1money/component-ui 0.0.1

package/lib/styles/theme/_functions.scss

@@ -0,0 +1,271 @@
+// Theme functions — generate CSS variable references, themed accessors, and typography vars.
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:map';
+@use 'sass:meta';
+@use './scales' as scales;
+@use '../tokens' as tokens;
+
+@function om-scale-map($scale-name) {
+  @return map.get(scales.$om-theme-scales, $scale-name);
+}
+
+@function om-scale-has($scale-name, $key) {
+  $scale: om-scale-map($scale-name);
+
+  @return $scale != null and map.has-key($scale, '#{$key}');
+}
+
+@function om-scale-value($scale-name, $key) {
+  $scale: om-scale-map($scale-name);
+
+  @if not $scale or not map.has-key($scale, '#{$key}') {
+    @return null;
+  }
+
+  @return map.get($scale, '#{$key}');
+}
+
+@function om-theme-var-name($scale-name, $key) {
+  @return --#{scales.$om-sys-prefix}-#{$scale-name}-#{$key};
+}
+
+@function -om-css-fallback($value) {
+  @return if(meta.type-of($value) == 'list', meta.inspect($value), $value);
+}
+
+@function om-theme-ref($scale-name, $key) {
+  $value: om-scale-value($scale-name, $key);
+
+  @if not $value {
+    @return null;
+  }
+
+  @return var(#{om-theme-var-name($scale-name, $key)}, #{-om-css-fallback($value)});
+}
+
+/// Generic token resolver — returns a CSS variable reference for scales listed in
+/// `$om-theme-css-var-scales`, or the raw scale value otherwise.
+@function om-token($scale-name, $key) {
+  @if not list.index(scales.$om-theme-css-var-scales, $scale-name) {
+    $raw: om-scale-value($scale-name, '#{$key}');
+
+    @if $raw {
+      @return $raw;
+    }
+
+    @error 'om-token: "#{$key}" is not defined in non-CSS-var scale "#{$scale-name}".';
+  }
+
+  $token: om-theme-ref($scale-name, '#{$key}');
+
+  @if $token { @return $token; }
+
+  @if $scale-name == spacing { @return tokens.om-spacing-value($key); }
+
+  @error 'om-token: "#{$key}" is not defined in scale "#{$scale-name}".';
+}
+
+/// Generic scale accessor — use for any registered scale without a dedicated function.
+/// Simple:   om(radius, 300)          → om-token(radius, 300)
+/// Semantic: om(bg, 'brand', 'hover') → om-token(bg, 'brand-hover')
+@function om($scale, $key, $variant: null) {
+  $resolved: if($variant, '#{$key}-#{$variant}', $key);
+
+  @return om-token($scale, $resolved);
+}
+
+@function om-spacing($value) { @return om-token(spacing, $value); }
+
+@function om-radius($key) { @return om-token(radius, $key); }
+
+@function om-shadow($key) { @return om-token(shadow, $key); }
+
+@function om-sizing($value) { @return om-token(sizing, $value); }
+
+@function om-component-height($key) {
+  $-value: tokens.om-component-height-token($key);
+
+  @return om-token(component-height, $key);
+}
+
+@mixin om-emit-theme-vars($selector: ':root') {
+  #{$selector} {
+    @each $scale-name in scales.$om-theme-css-var-scales {
+      $scale: om-scale-map($scale-name);
+
+      @each $key, $value in $scale {
+        #{om-theme-var-name($scale-name, $key)}: #{-om-css-fallback(om-scale-value($scale-name, $key))};
+      }
+    }
+  }
+}
+
+@function -om-typography-var-name($category, $size, $suffix) {
+  @return --#{scales.$om-sys-prefix}-#{$category}-#{$size}-#{$suffix};
+}
+
+@mixin om-emit-typography-vars($selector: ':root') {
+  $standard-props: (font-size, font-family, line-height, letter-spacing, font-weight);
+
+  #{$selector} {
+    @each $category, $sizes in tokens.$om-typography-categories {
+      @each $size, $entry in $sizes {
+        @each $prop in $standard-props {
+          $val: map.get($entry, $prop);
+
+          @if $val {
+            #{-om-typography-var-name($category, $size, $prop)}: #{$val};
+          }
+        }
+
+        @if map.has-key($entry, strong) {
+          $strong-weight: map.get(map.get($entry, strong), font-weight);
+
+          @if $strong-weight {
+            #{-om-typography-var-name($category, $size, strong-font-weight)}: #{$strong-weight};
+          }
+        }
+
+        @if map.has-key($entry, text-decoration) {
+          #{-om-typography-var-name($category, $size, text-decoration)}: #{map.get($entry, text-decoration)};
+        }
+
+        @if map.has-key($entry, text-decoration-skip-ink) {
+          #{-om-typography-var-name($category, $size, text-decoration-skip-ink)}: #{map.get($entry, text-decoration-skip-ink)};
+        }
+      }
+    }
+  }
+}
+
+@function om-font-size($category, $size) {
+  $-entry: tokens.om-typography($category, $size);
+
+  @return var(#{-om-typography-var-name($category, $size, font-size)});
+}
+
+@function om-line-height($category, $size) {
+  $-entry: tokens.om-typography($category, $size);
+
+  @return var(#{-om-typography-var-name($category, $size, line-height)});
+}
+
+@function -om-line-height-ratio($category, $size) {
+  $entry: tokens.om-typography($category, $size);
+  $line-height: map.get($entry, line-height);
+
+  @if meta.type-of($line-height) != 'number' {
+    @error 'Line-height for "#{$category}/#{$size}" must be a number.';
+  }
+
+  @if math.is-unitless($line-height) {
+    @return $line-height;
+  }
+
+  @if math.unit($line-height) == '%' {
+    @return math.div($line-height, 100%);
+  }
+
+  $font-size: map.get($entry, font-size);
+
+  @if meta.type-of($font-size) != 'number' or math.is-unitless($font-size) {
+    @error 'Font-size for "#{$category}/#{$size}" must be a sized number.';
+  }
+
+  @return math.div($line-height, $font-size);
+}
+
+@function om-line-height-px($category, $size) {
+  @return calc(#{om-font-size($category, $size)} * #{-om-line-height-ratio($category, $size)});
+}
+
+@function om-font-weight($category, $size) {
+  $-entry: tokens.om-typography($category, $size);
+
+  @return var(#{-om-typography-var-name($category, $size, font-weight)});
+}
+
+@function om-font-family($category, $size) {
+  $-entry: tokens.om-typography($category, $size);
+
+  @return var(#{-om-typography-var-name($category, $size, font-family)});
+}
+
+@function om-letter-spacing($category, $size) {
+  $-entry: tokens.om-typography($category, $size);
+
+  @return var(#{-om-typography-var-name($category, $size, letter-spacing)});
+}
+
+// stylelint-disable order/properties-order -- Mixin emits properties in Figma spec order, not CSS sort order.
+@mixin om-typography($category, $size, $strong: false) {
+  $entry: tokens.om-typography($category, $size);
+
+  font-size: var(#{-om-typography-var-name($category, $size, font-size)});
+  font-family: var(#{-om-typography-var-name($category, $size, font-family)});
+  line-height: var(#{-om-typography-var-name($category, $size, line-height)});
+  letter-spacing: var(#{-om-typography-var-name($category, $size, letter-spacing)});
+
+  @if $strong and map.has-key($entry, strong) {
+    font-weight: var(#{-om-typography-var-name($category, $size, strong-font-weight)});
+  } @else {
+    font-weight: var(#{-om-typography-var-name($category, $size, font-weight)});
+  }
+
+  @if map.has-key($entry, text-decoration) {
+    text-decoration: var(#{-om-typography-var-name($category, $size, text-decoration)});
+  }
+
+  @if map.has-key($entry, text-decoration-skip-ink) {
+    text-decoration-skip-ink: var(#{-om-typography-var-name($category, $size, text-decoration-skip-ink)});
+  }
+}
+
+// Semantic color accessors — resolve bg/text/icon/border keys to CSS variable references.
+@function om-bg($group, $variant: null) {
+  $key: if($variant, '#{$group}-#{$variant}', $group);
+
+  @return om-token(bg, $key);
+}
+
+@function om-text($group, $variant: null) {
+  $key: if($variant, '#{$group}-#{$variant}', $group);
+
+  @return om-token(text, $key);
+}
+
+@function om-icon($group, $variant: null) {
+  $key: if($variant, '#{$group}-#{$variant}', $group);
+
+  @return om-token(icon, $key);
+}
+
+@function om-border($group, $variant: null) {
+  $key: if($variant, '#{$group}-#{$variant}', $group);
+
+  @return om-token(border, $key);
+}
+
+// Semantic spacing aliases — validates allowed keys and resolves to primitive spacing tokens.
+@function -om-semantic-spacing-token($scale, $key, $scale-name) {
+  $normalized-key: '#{$key}';
+
+  @if not map.has-key($scale, $normalized-key) {
+    @error '#{$scale-name} does not define spacing token "#{$normalized-key}"';
+  }
+
+  @return map.get($scale, $normalized-key);
+}
+
+@function om-gap($key) {
+  @return om-spacing(-om-semantic-spacing-token(tokens.$om-gap-scale, $key, '$om-gap-scale'));
+}
+
+@function om-component-padding($key) {
+  @return om-spacing(-om-semantic-spacing-token(tokens.$om-component-padding-scale, $key, '$om-component-padding-scale'));
+}
+
+@function om-section-padding($key) {
+  @return om-spacing(-om-semantic-spacing-token(tokens.$om-section-padding-scale, $key, '$om-section-padding-scale'));
+}

package/lib/styles/theme/_index.scss

@@ -0,0 +1,6 @@
+// Theme entrypoint — internal barrel for theme domain implementation.
+@forward './scales';
+@forward './functions';
+@forward './breakpoints';
+@forward './values';
+@forward './mixins';

package/lib/styles/theme/_mixins.scss

@@ -0,0 +1,37 @@
+// Theme domain mixins — public wrappers around theme-owned typography and breakpoints.
+@use './breakpoints' as breakpoints;
+@use './functions' as internal;
+
+@mixin typography($category, $size, $strong: false) {
+  @include internal.om-typography($category, $size, $strong: $strong);
+}
+
+@mixin up($bp-name) {
+  @include breakpoints.om-up($bp-name) {
+    @content;
+  }
+}
+
+@mixin down($bp-name) {
+  @include breakpoints.om-down($bp-name) {
+    @content;
+  }
+}
+
+@mixin between($min-bp, $max-bp) {
+  @include breakpoints.om-between($min-bp, $max-bp) {
+    @content;
+  }
+}
+
+@mixin only($bp-name) {
+  @include breakpoints.om-only($bp-name) {
+    @content;
+  }
+}
+
+@mixin respond($bp-name) {
+  @include breakpoints.om-respond($bp-name) {
+    @content;
+  }
+}

package/lib/styles/theme/_scales.scss

@@ -0,0 +1,29 @@
+// Theme scales — aggregates token scales and defines system feature flags.
+@use 'sass:map';
+@use '../settings' as settings;
+@use '../tokens' as tokens;
+
+$om-sys-prefix: settings.$om-sys-prefix !default;
+$om-sys-enable-spacing: true !default;
+$om-sys-enable-layout: true !default;
+$om-sys-enable-sizing: true !default;
+$om-sys-enable-visual: true !default;
+$om-sys-enable-color: true !default;
+$om-spacing-resolved-scale: () !default;
+
+@each $key, $mult in tokens.$om-spacing-scale {
+  $om-spacing-resolved-scale: map.merge($om-spacing-resolved-scale, ($key: tokens.om-spacing-token($key)));
+}
+
+$om-theme-scales: (
+  spacing: $om-spacing-resolved-scale,
+  radius: tokens.$om-radius-scale,
+  shadow: tokens.$om-shadow-scale,
+  sizing: tokens.$om-sizing-scale,
+  component-height: tokens.$om-component-height-scale,
+  bg: tokens.$om-bg-scale,
+  text: tokens.$om-text-scale,
+  icon: tokens.$om-icon-scale,
+  border: tokens.$om-border-scale,
+) !default;
+$om-theme-css-var-scales: (spacing, radius, shadow, bg, text, icon, border, component-height) !default;

package/lib/styles/theme/_values.scss

@@ -0,0 +1,68 @@
+// Theme domain value API — stable token accessors exposed through the public facade.
+@use 'sass:list';
+@use './functions' as internal;
+@use '../tokens' as tokens;
+
+$-palette-domains: ('bg', 'text', 'icon', 'border');
+$-spacing-domains: ('scale', 'gap', 'component-padding', 'section-padding');
+$-sizing-domains: ('scale', 'component-height');
+
+@function palette($domain, $token, $state: null) {
+  $normalized-domain: '#{$domain}';
+  $normalized-token: '#{$token}';
+  $key: if($state == null, $normalized-token, '#{$normalized-token}-#{$state}');
+
+  @if not list.index($-palette-domains, $normalized-domain) {
+    @error 'theme.palette(): invalid domain "#{$normalized-domain}". Allowed: #{$-palette-domains}.';
+  }
+
+  @return internal.om-token($normalized-domain, $key);
+}
+
+@function spacing($domain, $key) {
+  $normalized-domain: '#{$domain}';
+
+  @if not list.index($-spacing-domains, $normalized-domain) {
+    @error 'theme.spacing(): invalid domain "#{$normalized-domain}". Allowed: #{$-spacing-domains}.';
+  }
+
+  @if $normalized-domain == 'scale' {
+    @return internal.om-token(spacing, '#{$key}');
+  }
+
+  @if $normalized-domain == 'gap' {
+    @return internal.om-gap($key);
+  }
+
+  @if $normalized-domain == 'component-padding' {
+    @return internal.om-component-padding($key);
+  }
+
+  @return internal.om-section-padding($key);
+}
+
+@function shape($key) {
+  @return internal.om-token(radius, '#{$key}');
+}
+
+@function shadows($key) {
+  @return internal.om-token(shadow, '#{$key}');
+}
+
+@function sizing($domain, $key) {
+  $normalized-domain: '#{$domain}';
+
+  @if not list.index($-sizing-domains, $normalized-domain) {
+    @error 'theme.sizing(): invalid domain "#{$normalized-domain}". Allowed: #{$-sizing-domains}.';
+  }
+
+  @if $normalized-domain == 'scale' {
+    @return internal.om-token(sizing, '#{$key}');
+  }
+
+  @return internal.om-token(component-height, '#{$key}');
+}
+
+@function opacity($key) {
+  @return tokens.om-opacity($key);
+}

package/lib/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/lib/styles/tokens/breakpoint/_index.scss

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

package/lib/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/lib/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/lib/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/lib/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/lib/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/lib/styles/tokens/opacity/_index.scss

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