feat(core)!: Extend colors with base color for text based components

packages/core/src/Lib/UseColor/Internal/Lib/UseTextColor.ts

@@ -1,16 +1,20 @@
-import type { Color, ColorableTextComponentName, FlyonUIVueAppDefaultConfig } from '@/Lib';
-import type { ComputedRef, MaybeRefOrGetter, Ref }                            from 'vue';
-import { useColor }                                                           from '@/Lib/UseColor/Internal';
-import { isDefined }                                                          from '@/Lib/Utils/Internal';
-import { computed, toValue }                                                  from 'vue';
+import type { FlyonUIVueAppDefaultConfig, TextColor, TextColorableComponentName } from '@/Lib';
+import type { ComputedRef, MaybeRefOrGetter, Ref }                                from 'vue';
+import { useColor }                                                               from '@/Lib/UseColor/Internal';
+import { computed, toValue }                                                      from 'vue';
 
 export function useTextColor(
     config: Ref<FlyonUIVueAppDefaultConfig>,
-    componentName: MaybeRefOrGetter<ColorableTextComponentName>,
-    color: MaybeRefOrGetter<Color | undefined>,
-    defaultColorClass: MaybeRefOrGetter<string> = '',
+    componentName: MaybeRefOrGetter<TextColorableComponentName>,
+    color: MaybeRefOrGetter<TextColor | undefined>,
 ): ComputedRef<string> {
     return computed((): string => {
-        return isDefined(color) ? useColor(config, componentName, color).value : toValue(defaultColorClass);
+        const c = toValue(color);
+
+        if (c === 'base') {
+            return 'text-base-content';
+        }
+
+        return useColor(config, componentName, c).value;
     });
 }

packages/core/src/Lib/UseColor/Types/Color.ts

@@ -14,14 +14,21 @@ export type ColorableComponentName = Extract<
     | 'FoStatus'
     | 'FoSwitch'
     | 'FoTooltip'
-    | ColorableTextComponentName
+    | TextColorableComponentName
 >;
 
-export type ColorableTextComponentName = Extract<ComponentName, 'FoDivider' | 'FoHeading' | 'FoLink' | 'FoLoading'>;
+export type TextColorableComponentName = Extract<ComponentName, 'FoDivider' | 'FoHeading' | 'FoLink' | 'FoLoading'>;
 
 export type Color = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
 
 export interface Colorable {
     /** The component's color */
     color?: Color;
 }
+
+export type TextColor = 'base' | Color;
+
+export interface TextColorable {
+    /** The component's text color */
+    color?: TextColor;
+}

packages/core/src/UI/Components/Loading/Types/Loading.ts

@@ -1,8 +1,8 @@
-import type { Colorable, Sizable  } from '@/Lib';
+import type { Sizable, TextColorable } from '@/Lib';
 
 export type LoadingAnimation = 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity';
 
-export interface LoadingProps extends Colorable, Sizable {
+export interface LoadingProps extends TextColorable, Sizable {
     /** The component's loading animation */
     animation?: LoadingAnimation;
 }

packages/core/src/UI/Content/Divider/Types/Divider.ts

@@ -1,6 +1,6 @@
-import type { Colorable, Orientable, Preset, Presettable } from '@/Lib';
-import type { Alignable }                                  from '@/Lib/UseAlignment';
+import type { Orientable, Preset, Presettable, TextColorable } from '@/Lib';
+import type { Alignable }                                      from '@/Lib/UseAlignment';
 
 export type DividerPreset = Extract<Preset, 'dash' | 'dot'>;
 
-export type DividerProps = Colorable & Presettable<DividerPreset> & Alignable & Orientable;
+export type DividerProps = TextColorable & Presettable<DividerPreset> & Alignable & Orientable;

packages/core/src/UI/Content/Heading/Types/Heading.ts

@@ -1,8 +1,8 @@
-import type { Colorable } from '@/Lib';
+import type { TextColorable } from '@/Lib';
 
 export type HeadingLevel = '1' | '2' | '3' | '4' | '5' | '6';
 
-export interface HeadingProps extends Colorable {
+export interface HeadingProps extends TextColorable {
     /** The heading's rank */
     level: HeadingLevel;
 }

packages/core/src/UI/Content/Heading/UI/FoHeading.vue

@@ -30,7 +30,7 @@ const [
     colorClass,
     sizeClass,
 ] = [
-    useTextColor(config, 'FoHeading', () => props.color, 'text-base-content'),
+    useTextColor(config, 'FoHeading', () => props.color),
     computed(() => {
         const classes: Record<HeadingLevel, string> = {
             1: 'text-4xl',

packages/core/src/UI/Content/Link/Types/Link.ts

@@ -1,4 +1,4 @@
-import type { Colorable }         from '@/Lib';
+import type { TextColorable }     from '@/Lib';
 import type { FoRouterLinkProps } from '@/UI/Content/Link/Internal';
 import type { RouteLocationRaw }  from 'vue-router';
 
@@ -8,7 +8,7 @@ export type To = Link | RouteLocationRaw;
 
 export type UnderlineLinkEffect = 'hover' | 'hover-animated' | 'no-underline';
 
-export interface LinkProps extends FoRouterLinkProps, Colorable {
+export interface LinkProps extends FoRouterLinkProps, TextColorable {
     /**
      * If "hover", the link will be underlined when hovered
      * If "hover-animated", the link will be underlined with an underline animation when hovered

packages/core/tests/Lib/UseColor/Internal/Lib/UseTextColor.spec.ts

@@ -11,17 +11,9 @@ describe('useTextColor', () => {
         expect(useTextColor(config, 'FoLink', 'neutral').value).toBe('link-neutral');
     });
 
-    it('returns no default class if the color is not defined', () => {
+    it('returns the base color class if the color is the base one', () => {
         const config = ref<FlyonUIVueAppDefaultConfig>({ ...flyonUIVueAppDefaultConfig });
 
-        expect(useTextColor(config, 'FoLink', () => undefined).value).toBe('');
-    });
-
-    it('returns a specific default class if the color is not defined and the default class is specified', () => {
-        const config = ref<FlyonUIVueAppDefaultConfig>({ ...flyonUIVueAppDefaultConfig });
-
-        const defaultColorClass = 'default-class';
-
-        expect(useTextColor(config, 'FoLink', () => undefined, defaultColorClass).value).toBe(defaultColorClass);
+        expect(useTextColor(config, 'FoLink', () => 'base').value).toBe('text-base-content');
     });
 });

packages/docs/Components/Loading/LoadingAnimation.vue

@@ -1,101 +1,139 @@
 <template>
-    <FoLoading size="extraSmall" />
+    <FoLoading color="base"
+               size="extraSmall"
+    />
 
-    <FoLoading size="small" />
+    <FoLoading color="base"
+               size="small"
+    />
 
-    <FoLoading />
+    <FoLoading color="base" />
 
-    <FoLoading size="large" />
+    <FoLoading color="base"
+               size="large"
+    />
 
-    <FoLoading size="extraLarge" />
+    <FoLoading color="base"
+               size="extraLarge"
+    />
 
     <FoLoading animation="dots"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="dots"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="dots" />
+    <FoLoading animation="dots"
+               color="base"
+    />
 
     <FoLoading animation="dots"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="dots"
+               color="base"
                size="extraLarge"
     />
 
     <FoLoading animation="ring"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="ring"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="ring" />
+    <FoLoading animation="ring"
+               color="base"
+    />
 
     <FoLoading animation="ring"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="ring"
+               color="base"
                size="extraLarge"
     />
 
     <FoLoading animation="ball"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="ball"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="ball" />
+    <FoLoading animation="ball"
+               color="base"
+    />
 
     <FoLoading animation="ball"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="ball"
+               color="base"
                size="extraLarge"
     />
 
     <FoLoading animation="bars"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="bars"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="bars" />
+    <FoLoading animation="bars"
+               color="base"
+    />
 
     <FoLoading animation="bars"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="bars"
+               color="base"
                size="extraLarge"
     />
 
     <FoLoading animation="infinity"
+               color="base"
                size="extraSmall"
     />
 
     <FoLoading animation="infinity"
+               color="base"
                size="small"
     />
 
-    <FoLoading animation="infinity" />
+    <FoLoading animation="infinity"
+               color="base"
+    />
 
     <FoLoading animation="infinity"
+               color="base"
                size="large"
     />
 
     <FoLoading animation="infinity"
+               color="base"
                size="extraLarge"
     />
 </template>

packages/docs/Components/Loading/LoadingColor.vue

@@ -1,14 +1,16 @@
 <template>
     <FoLoading />
 
+    <FoLoading color="base" />
+
+    <FoLoading color="neutral" />
+
     <FoLoading color="primary" />
 
     <FoLoading color="secondary" />
 
     <FoLoading color="accent" />
 
-    <FoLoading color="neutral" />
-
     <FoLoading color="info" />
 
     <FoLoading color="success" />

packages/docs/Content/Heading/HeadingColor.vue

@@ -3,6 +3,12 @@
         Default
     </FoHeading>
 
+    <FoHeading level="4"
+               color="base"
+    >
+        Base
+    </FoHeading>
+
     <FoHeading level="4"
                color="neutral"
     >

packages/docs/Content/Heading/HeadingLevel.vue

@@ -1,25 +1,37 @@
 <template>
-    <FoHeading level="1">
+    <FoHeading level="1"
+               color="base"
+    >
         Heading 1
     </FoHeading>
 
-    <FoHeading level="2">
+    <FoHeading level="2"
+               color="base"
+    >
         Heading 2
     </FoHeading>
 
-    <FoHeading level="3">
+    <FoHeading level="3"
+               color="base"
+    >
         Heading 3
     </FoHeading>
 
-    <FoHeading level="4">
+    <FoHeading level="4"
+               color="base"
+    >
         Heading 4
     </FoHeading>
 
-    <FoHeading level="5">
+    <FoHeading level="5"
+               color="base"
+    >
         Heading 5
     </FoHeading>
 
-    <FoHeading level="6">
+    <FoHeading level="6"
+               color="base"
+    >
         Heading 6
     </FoHeading>
 </template>

packages/docs/Content/Link/AnimatedUnderlineLink.vue

@@ -1,5 +1,6 @@
 <template>
-    <FoLink to="https://www.google.com"
+    <FoLink color="base"
+            to="https://www.google.com"
             underline-effect="hover-animated"
     >
         Animated underline when hovered over.

packages/docs/Content/Link/DefaultLink.vue

@@ -1,9 +1,12 @@
 <template>
-    <FoLink to="https://www.google.com">
+    <FoLink color="base"
+            to="https://www.google.com"
+    >
         Default link
     </FoLink>
 
-    <FoLink to="https://www.google.com"
+    <FoLink color="base"
+            to="https://www.google.com"
             underline-effect="no-underline"
     >
         Link with no underline

packages/docs/Content/Link/LinkColor.vue

@@ -3,6 +3,12 @@
         Default link
     </FoLink>
 
+    <FoLink to="https://www.google.com"
+            color="base"
+    >
+        Base link
+    </FoLink>
+
     <FoLink to="https://www.google.com"
             color="neutral"
     >

packages/docs/Content/Link/UnderlineOnHoverLink.vue

@@ -1,5 +1,6 @@
 <template>
-    <FoLink to="https://www.google.com"
+    <FoLink color="base"
+            to="https://www.google.com"
             underline-effect="hover"
     >
         Underline when hovered over.