feat(progress-bar): add ionColor

Author: thetaPC

core/src/themes/md/default.tokens.ts

@@ -1,4 +1,4 @@
-import { rgba, currentColor, mix, dynamicFont } from '../../utils/theme';
+import { rgba, currentColor, ionColor, mix, dynamicFont } from '../../utils/theme';
 import { defaultTheme as baseDefaultTheme } from '../base/default.tokens';
 import { colors as baseColors } from '../base/shared.tokens';
 import type { DefaultTheme } from '../themes.interfaces';
@@ -604,9 +604,7 @@ export const defaultTheme: DefaultTheme = {
       indeterminate: {
         progress: {
           default: {
-            // TODO: Replace with ionColor() once that utility is merged
-            // ion-color(primary, base) -> ionColor('primary', 'base')
-            background: 'var(--ion-color-primary-bold)',
+            background: ionColor('primary', 'base'),
           },
 
           semantic: {
@@ -619,9 +617,7 @@ export const defaultTheme: DefaultTheme = {
         buffer: {
           bar: {
             default: {
-              // TODO: Replace rgba() with ionColor() once that utility is merged
-              // ion-color(primary, base, 0.3) -> ionColor('primary', 'base', { alpha: 0.3 }),
-              background: rgba('var(--ion-color-primary-bold-rgb)', 0.3),
+              background: ionColor('primary', 'base', { alpha: 0.3 }),
             },
 
             semantic: {
@@ -636,9 +632,7 @@ export const defaultTheme: DefaultTheme = {
       determinate: {
         progress: {
           default: {
-            // TODO: Replace with ionColor() once that utility is merged
-            // ion-color(primary, base) -> ionColor('primary', 'base')
-            background: 'var(--ion-color-primary-bold)',
+            background: ionColor('primary', 'base'),
           },
 
           semantic: {
@@ -651,9 +645,7 @@ export const defaultTheme: DefaultTheme = {
         buffer: {
           bar: {
             default: {
-              // TODO: Replace rgba() with ionColor() once that utility is merged
-              // ion-color(primary, base, 0.3) -> ionColor('primary', 'base', { alpha: 0.3 }),
-              background: rgba('var(--ion-color-primary-bold-rgb)', 0.3),
+              background: ionColor('primary', 'base', { alpha: 0.3 }),
             },
 
             semantic: {
@@ -665,9 +657,7 @@ export const defaultTheme: DefaultTheme = {
 
           circles: {
             default: {
-              // TODO: Replace rgba() with ionColor() once that utility is merged
-              // ion-color(primary, base, 0.3) -> ionColor('primary', 'base', { alpha: 0.3 })
-              background: rgba('var(--ion-color-primary-bold-rgb)', 0.3),
+              background: ionColor('primary', 'base', { alpha: 0.3 }),
             },
 
             semantic: {

core/src/utils/theme.ts

@@ -622,6 +622,45 @@ export function currentColor(variation: string, alpha: number | string | null =
   }
 }
 
+interface IonColorOptions {
+  alpha?: number | string | null;
+  rgb?: boolean;
+  subtle?: boolean;
+}
+
+export function ionColor(name: string, variation: string, options: IonColorOptions = {}): string {
+  const { alpha = null, rgb = false, subtle = false } = options;
+
+  // Build base variable name
+  const base = subtle ? `--ion-color-${name}-subtle` : `--ion-color-${name}`;
+  const variationSuffix = variation === 'base' ? '' : `-${variation}`;
+  let variable = `${base}${variationSuffix}`;
+
+  // Build the fallback variable name (only for bold colors)
+  let fallbackVariable: string | null = null;
+
+  if (!subtle) {
+    const fallbackBase = `--ion-color-${name}-bold`;
+    fallbackVariable = `${fallbackBase}${variationSuffix}`;
+  }
+
+  // Handle alpha transparency
+  if (alpha !== null) {
+    const rgbVar = `${variable}-rgb`;
+    const fallbackRgb = fallbackVariable ? `${fallbackVariable}-rgb` : null;
+
+    return fallbackRgb ? `rgba(var(${rgbVar}, var(${fallbackRgb})), ${alpha})` : `rgba(var(${rgbVar}), ${alpha})`;
+  }
+
+  // Handle RGB variables
+  if (rgb) {
+    variable = `${variable}-rgb`;
+    fallbackVariable = fallbackVariable ? `${fallbackVariable}-rgb` : null;
+  }
+
+  return fallbackVariable ? `var(${variable}, var(${fallbackVariable}))` : `var(${variable})`;
+}
+
 /**
  * Mimics the CSS `clamp` function logic.
  *