@ainias42/react-bootstrap-mobile 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ainias42/react-bootstrap-mobile",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Mobile React Components",
   "publishConfig": {
     "access": "public"

package/src/Components/ActionSheet/actionSheet.module.scss

@@ -31,12 +31,12 @@
     transition-delay: 0s;
     top: 0;
 
-    > :global(.full-height) {;
+    > :global(.fullHeight) {;
       top: 0
     }
   }
 
-  > :global(.full-height) {
+  > :global(.fullHeight) {
     position: absolute;
     inset: 100% 0 0;
   }
@@ -90,7 +90,7 @@
   }
 
   @include mixin.design(variables.$material) {
-    > .full-height {
+    > .fullHeight {
       padding: 0;
     }
 

package/src/Components/Card/card.module.scss

@@ -47,6 +47,7 @@
   }
 
   .title {
+    color: var(--text-primary);
     padding: 0;
   }
 

package/src/Components/Dialog/ButtonDialog.tsx

@@ -53,7 +53,7 @@ function ButtonDialog({ title, message, buttons, style, className, extraContent
                 {buttons.map((b, i) => (
                     // eslint-disable-next-line react/no-array-index-key
                     <Clickable onClick={b.callback} className={classNames(styles.button)} key={i + b.text}>
-                        <Text className={classNames(styles.buttonText, b.flavor ?? Flavor.Accent)}>{b.text}</Text>
+                        <Text className={classNames(styles.buttonText, b.flavor ?? Flavor.ACCENT)}>{b.text}</Text>
                     </Clickable>
                 ))}
             </BaseBlock>

package/src/Components/Dialog/dialog.module.scss

@@ -24,7 +24,7 @@
   }
 
   .dialog {
-    max-width: map.get(variables.$grid-breakpoints, "xxl");
+    max-width: map.get(variables.$gridBreakpoints, "xxl");
     z-index: 1;
   }
 }

package/src/Components/Flavor.ts

@@ -1,6 +1,6 @@
 export enum Flavor {
-    Accent = 'flavor-accent',
-    Basic = 'flavor-basic',
-    Destructive = 'flavor-destructive',
-    Constructive = 'flavor-constructive',
+    ACCENT = 'flavorAccent',
+    BASIC = 'flavorBasic',
+    DESTRUCTIVE = 'flavorDestructive',
+    CONSTRUCTIVE = 'flavorConstructive',
 }

package/src/Components/FlavorWithText.ts

@@ -0,0 +1,11 @@
+import { Flavor } from "./Flavor";
+
+enum TextValues {
+    PRIMARY = "textPrimary",
+    SECONDARY =  "textSecondary",
+    TERTIARY = "textTertiary",
+    INVERSE = "textInverse"
+}
+
+export type FlavorWithText = TextValues | Flavor
+export const FlavorWithText = {...TextValues, ...Flavor}

package/src/Components/FormElements/Button/Button.stories.tsx

@@ -44,7 +44,7 @@ type Story = StoryObj<ButtonProps<any>>;
 export const Default: Story = {
     args: {
         fullWidth: false,
-        flavor: Flavor.Basic,
+        flavor: Flavor.BASIC,
         type: ButtonType.Primary,
         stopPropagation: false,
         size: undefined,
@@ -54,7 +54,7 @@ export const Default: Story = {
 export const Accent: Story = {
     args: {
         fullWidth: false,
-        flavor: Flavor.Accent,
+        flavor: Flavor.ACCENT,
         type: ButtonType.Primary,
         stopPropagation: false,
     },
@@ -63,7 +63,7 @@ export const Accent: Story = {
 export const Destructive: Story = {
     args: {
         fullWidth: false,
-        flavor: Flavor.Destructive,
+        flavor: Flavor.DESTRUCTIVE,
         type: ButtonType.Primary,
         stopPropagation: false,
     },
@@ -72,7 +72,7 @@ export const Destructive: Story = {
 export const Constructive: Story = {
     args: {
         fullWidth: false,
-        flavor: Flavor.Constructive,
+        flavor: Flavor.CONSTRUCTIVE,
         type: ButtonType.Primary,
         stopPropagation: false,
     },

package/src/Components/FormElements/Button/Button.tsx

@@ -32,7 +32,7 @@ export const Button = withTitle(function Button<ClickData>({
     disabled,
     size,
     fullWidth = false,
-    flavor = Flavor.Accent,
+    flavor = Flavor.ACCENT,
     type = ButtonType.Primary,
     stopPropagation = true,
     ...props

package/src/Components/FormElements/ColorInput/colorInput.module.scss

@@ -14,7 +14,7 @@
     width: 1rem;
     height: 1rem;
     display: inline-block;
-    border: 1px solid black;
+    border: 1px solid var(--border-strong);
     position: relative;
 
     &::before {
@@ -49,7 +49,7 @@
   }
 }
 
-
+/* stylelint-disable-next-line selector-class-pattern */
 :global(.w-color-swatch) {
   z-index: 0;
 

package/src/Components/FormElements/SearchSelectInput/seachSelectInput.module.scss

@@ -93,7 +93,7 @@
 .selectableOptionContainer {
   display: none;
   position: fixed;
-  background-color: white;
+  background-color: var(--foreground-primary);
   z-index: 1100;
   border: 1px solid var(--search-select-input-option-list-border-color);
 

package/src/Components/Icon/BaseIcon.tsx

@@ -9,6 +9,8 @@ import type { IconProp } from '@fortawesome/fontawesome-svg-core';
 import type { Override } from '../../TypeHelpers';
 import type { RbmComponentProps } from '../RbmComponentProps';
 import type { Ref } from 'react';
+import { Flavor } from '../Flavor';
+import { FlavorWithText } from '../FlavorWithText';
 
 export type IconSource = IconProp | string | IconDefinition;
 
@@ -20,6 +22,8 @@ export type IconProps = RbmComponentProps<
             icon: IconSource;
             alt?: string;
             ref?: Ref<HTMLImageElement | null>;
+            flavor?: FlavorWithText;
+            color?: undefined
         }
     >
 >;
@@ -31,6 +35,7 @@ export const BaseIcon = withMemo(function BaseIcon({
     noMargin = true,
     style,
     ref,
+    flavor = FlavorWithText.PRIMARY,
     ...props
 }: IconProps) {
     // Variables
@@ -55,7 +60,7 @@ export const BaseIcon = withMemo(function BaseIcon({
             <img
                 src={icon}
                 alt={alt}
-                className={classNames(styles.imgIcon, className, { [styles.margin]: !noMargin })}
+                className={classNames(styles.imgIcon, flavor, className, { [styles.margin]: !noMargin })}
                 style={style}
                 ref={ref}
             />
@@ -65,7 +70,7 @@ export const BaseIcon = withMemo(function BaseIcon({
         <FontAwesomeIcon
             {...props}
             icon={icon as IconProp}
-            className={classNames(className, { [styles.margin]: !noMargin })}
+            className={classNames(styles.icon, flavor, className, { [styles.margin]: !noMargin })}
             style={style}
             ref={ref as Ref<SVGSVGElement>}
         />

package/src/Components/Icon/DoubleIcon.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { DoubleIcon } from './DoubleIcon';
 import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
+import { FlavorWithText } from '../FlavorWithText';
 
 const meta = {
     component: DoubleIcon,
@@ -32,7 +33,7 @@ export const Default: Story = {
         icon: faHouse,
         secondIcon: faUser,
         noMargin: false,
-        color: '#000000',
-        secondIconColor: '#757575',
+        flavor: FlavorWithText.PRIMARY,
+        secondIconFlavor: FlavorWithText.SECONDARY,
     },
 };

package/src/Components/Icon/DoubleIcon.tsx

@@ -4,16 +4,17 @@ import { withMemo } from '../../helper/withMemo';
 import React from 'react';
 import styles from './icon.module.scss';
 import type { IconProps, IconSource } from './BaseIcon';
+import { FlavorWithText } from '../FlavorWithText';
 
 export type DoubleIconProps = IconProps & {
     secondIcon: IconSource;
-    secondIconColor?: string;
+    secondIconFlavor?: FlavorWithText;
 };
 
 export const DoubleIcon = withMemo(function DoubleIcon({
     secondIcon,
-    secondIconColor,
-    color,
+    secondIconFlavor,
+    flavor,
     ...otherProps
 }: DoubleIconProps) {
     // Refs
@@ -32,8 +33,8 @@ export const DoubleIcon = withMemo(function DoubleIcon({
 
     return (
         <BaseInlineBlock className={styles.doubleIconContainer}>
-            <BaseIcon {...otherProps} color={color} />
-            <BaseIcon icon={secondIcon} size="xs" className={styles.secondIcon} color={secondIconColor ?? color} />
+            <BaseIcon {...otherProps} flavor={flavor} />
+            <BaseIcon icon={secondIcon} size="xs" className={styles.secondIcon} flavor={secondIconFlavor ?? flavor} />
         </BaseInlineBlock>
     );
 });

package/src/Components/Icon/Icon.stories.tsx

@@ -2,6 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import { BaseIcon } from './BaseIcon';
 import { faHouse, faUser } from '@fortawesome/free-solid-svg-icons';
+import { FlavorWithText } from '../FlavorWithText';
+import { DoubleIcon } from './DoubleIcon';
 
 const meta = {
     component: BaseIcon,
@@ -24,7 +26,7 @@ export const Default: Story = {
     args: {
         icon: faHouse,
         noMargin: false,
-        color: '#000000',
+        flavor: FlavorWithText.PRIMARY,
     },
 };
 
@@ -32,6 +34,6 @@ export const ImageIcon: Story = {
     args: {
         icon: 'https://church.tools/wp-content/uploads/2025/07/Favicon_CT-150x150.png',
         noMargin: false,
-        color: '#000000',
+        flavor: FlavorWithText.PRIMARY,
     },
 };

package/src/Components/Icon/icon.module.scss

@@ -1,8 +1,14 @@
+@use "../../scss/flavorMixin" as *;
+
 .margin {
   margin-left: 0.3rem;
   margin-right: 0.3rem;
 }
 
+.icon {
+  @include flavorWithTextSelection(--text-primary-default-color);
+}
+
 .imgIcon {
   width: calc(1em + 4px);
   height: calc(1em + 4px);

package/src/Components/Image/Image.tsx

@@ -8,7 +8,7 @@ import type { RbmComponentProps, WithNoChildren } from '../RbmComponentProps';
 
 export type ImageProps = RbmComponentProps<
     Override<
-        React.ComponentPropsWithoutRef<'img'>,
+        React.ComponentProps<'img'>,
         {
             src: string;
             style?: CSSProperties;

package/src/Components/Layout/Container.tsx

@@ -5,11 +5,11 @@ import styles from './container.module.scss';
 import type { RbmComponentProps } from '../RbmComponentProps';
 
 export const CONTAINER_CLASSES = {
-    sm: styles['container-sm'],
-    md: styles['container-md'],
-    lg: styles['container-lg'],
-    xl: styles['container-xl'],
-    xxl: styles['container-xxl'],
+    sm: styles.containerSm,
+    md: styles.containerMd,
+    lg: styles.containerLg,
+    xl: styles.containerXl,
+    xxl: styles.containerXxl,
 };
 
 export type ContainerProps = RbmComponentProps<{

package/src/Components/Layout/Grid/grid.module.scss

@@ -4,8 +4,8 @@
 @use "../../../scss/breakpoints" as *;
 
 $columns: 12;
-$breakpoints: $grid-breakpoints;
-$containerBreakpoints: $grid-breakpoints;
+$breakpoints: $gridBreakpoints;
+$containerBreakpoints: $gridBreakpoints;
 
 @mixin printClasses {
   @media print {
@@ -66,7 +66,7 @@ $containerBreakpoints: $grid-breakpoints;
     container-type: inline-size;
 
     @each $breakpoint in map.keys($containerBreakpoints) {
-      $min: breakpoint-min($breakpoint, $containerBreakpoints);
+      $min: breakpointMin($breakpoint, $containerBreakpoints);
 
       @if $min {
         @container (min-width: #{$min}) {
@@ -77,9 +77,9 @@ $containerBreakpoints: $grid-breakpoints;
       }
 
       // Add classes for reordering
-      $min: breakpoint-min($breakpoint, $containerBreakpoints);
-      $next: breakpoint-next($breakpoint, $containerBreakpoints);
-      $max: breakpoint-max($next, $containerBreakpoints);
+      $min: breakpointMin($breakpoint, $containerBreakpoints);
+      $next: breakpointNext($breakpoint, $containerBreakpoints);
+      $max: breakpointMax($next, $containerBreakpoints);
 
       @if $min != null and $max != null {
         @container (min-width: #{$min}) and (max-width: #{$max}) {
@@ -101,7 +101,7 @@ $containerBreakpoints: $grid-breakpoints;
 
   &:not(.useContainerWidth) {
     @each $breakpoint in map.keys($breakpoints) {
-      @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @include mediaBreakpointUp($breakpoint, $breakpoints) {
         @for $i from 1 through $columns {
           > .item-#{$breakpoint}-#{$i} {
             grid-column: auto / span $i;
@@ -118,7 +118,7 @@ $containerBreakpoints: $grid-breakpoints;
       }
 
       // Add classes for reordering
-      @include media-breakpoint-only($breakpoint, $breakpoints) {
+      @include mediaBreakpointOnly($breakpoint, $breakpoints) {
         @for $i from -10 through 10 {
           > .order-#{$breakpoint}-#{$i} {
             order: $i;

package/src/Components/Layout/Grow.tsx

@@ -8,7 +8,7 @@ import type { RbmComponentProps } from '../RbmComponentProps';
 export type GrowProps = RbmComponentProps<{
     center?: boolean;
     weight?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-    ref?: ForwardedRef<HTMLDivElement>;
+    ref?: ForwardedRef<HTMLDivElement | null>;
     id?: string;
 }>;
 

package/src/Components/Layout/container.module.scss

@@ -1,8 +1,9 @@
 @use "sass:map";
+@use "../../scss/firstUpper" as *;
 @use "../../scss/variables" as *;
 @use "../../scss/breakpoints" as *;
 
-@mixin make-container() {
+@mixin makeContainer() {
   --gutter-x: 1.5rem;
   --gutter-y: 0;
 
@@ -14,33 +15,33 @@
 }
 
 .container,
-.container-fluid {
-  @include make-container;
+.containerFluid {
+  @include makeContainer;
 }
 
 // Responsive containers that are 100% wide until a breakpoint
-@each $breakpoint, $container-max-width in $container-max-widths {
-  .container-#{$breakpoint} {
-    @include make-container;
+@each $breakpoint, $containerMaxWidth in $containerMaxWidths {
+  .container#{firstUpper($breakpoint)} {
+    @include makeContainer;
   }
 
-  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
+  @include mediaBreakpointUp($breakpoint, $gridBreakpoints) {
     %responsive-container-#{$breakpoint} {
-      max-width: $container-max-width;
+      max-width: $containerMaxWidth;
     }
 
     // Extend each breakpoint which is smaller or equal to the current breakpoint
-    $extend-breakpoint: true;
+    $extendBreakpoint: true;
 
-    @each $name, $width in $grid-breakpoints {
-      @if $extend-breakpoint {
-        .container#{breakpoint-infix($name, $grid-breakpoints)} {
+    @each $name, $width in $gridBreakpoints {
+      @if $extendBreakpoint {
+        .container#{breakpointInfix($name, $gridBreakpoints)} {
           @extend %responsive-container-#{$breakpoint};
         }
 
         // Once the current breakpoint is reached, stop extending
         @if $breakpoint == $name {
-          $extend-breakpoint: false;
+          $extendBreakpoint: false;
         }
       }
     }
@@ -48,7 +49,7 @@
 }
 
 @media (width >= 1400px) {
-  .container-xxl {
+  .containerXxl {
     max-width: 1400px;
   }
 }

package/src/Components/Menu/Menu.stories.tsx

@@ -8,6 +8,7 @@ import { faCog, faCogs, faHome, faUser } from '@fortawesome/free-solid-svg-icons
 import { fn } from 'storybook/test';
 import React from 'react';
 import type { MenuProps } from './Menu';
+import { FlavorWithText } from '../FlavorWithText';
 
 const meta = {
     component: Menu,
@@ -57,10 +58,10 @@ export const Default: Story = {
                     Five
                 </MenuItem>
                 <MenuDivider />
-                <MenuItem iconColor="green" onClick={fn()} icon={faUser}>
+                <MenuItem iconFlavor={FlavorWithText.CONSTRUCTIVE} onClick={fn()} icon={faUser}>
                     Six
                 </MenuItem>
-                <MenuItem iconColor="green" onClick={fn()} icon={faCog} disabled={true}>
+                <MenuItem iconFlavor={FlavorWithText.CONSTRUCTIVE} onClick={fn()} icon={faCog} disabled={true}>
                     Seven
                 </MenuItem>
             </>

package/src/Components/Menu/Menu.tsx

@@ -12,10 +12,11 @@ import classNames from 'classnames';
 import styles from './menu.module.scss';
 import type { IconSource } from '../Icon/BaseIcon';
 import type { RbmComponentProps } from '../RbmComponentProps';
+import { FlavorWithText } from '../FlavorWithText';
 
 export type MenuItemType = {
     label: string;
-    icon?: IconSource | { icon: IconSource; color: string };
+    icon?: IconSource | { icon: IconSource; flavor: FlavorWithText };
     key: string;
     className?: string;
     callback: () => void;
@@ -148,12 +149,12 @@ export const Menu = withMemo(
                         >
                             {items?.map((item) => {
                                 const icon =
-                                    !!item.icon && typeof item.icon === 'object' && 'color' in item.icon
+                                    !!item.icon && typeof item.icon === 'object' && 'flavor' in item.icon
                                         ? item.icon.icon
                                         : item.icon;
-                                const iconColor =
-                                    !!item.icon && typeof item.icon === 'object' && 'color' in item.icon
-                                        ? item.icon.color
+                                const iconFlavor =
+                                    !!item.icon && typeof item.icon === 'object' && 'flavor' in item.icon
+                                        ? item.icon.flavor
                                         : undefined;
 
                                 return (
@@ -163,7 +164,7 @@ export const Menu = withMemo(
                                         className={classNames(styles.item, item.className)}
                                         onMouseEnter={item.onMouseEnter}
                                         icon={icon}
-                                        iconColor={iconColor}
+                                        iconFlavor={iconFlavor}
                                         onMouseLeave={item.onMouseLeave}
                                     >
                                         {item.label}

package/src/Components/Menu/MenuItem.tsx

@@ -9,14 +9,16 @@ import classNames from 'classnames';
 import styles from './menu.module.scss';
 import type { IconSource } from '../Icon/BaseIcon';
 import type { RbmComponentProps, WithChildren } from '../RbmComponentProps';
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 import Element = React.JSX.Element;
+import { FlavorWithText } from '../FlavorWithText';
 
 export type MenuItemProps<Item = undefined> = RbmComponentProps<
     {
         icon?: IconSource;
-        iconColor?: string;
+        iconFlavor?: FlavorWithText;
+        iconStyle?: CSSProperties;
         className?: string;
         children: string | ReactNode;
         disabled?: boolean;
@@ -41,7 +43,8 @@ export type MenuItemProps<Item = undefined> = RbmComponentProps<
 export const MenuItem = withMemo(function MenuItem<Item>({
     children,
     icon,
-    iconColor,
+    iconFlavor,
+    iconStyle,
     className,
     onClick,
     onMouseEnter,
@@ -98,7 +101,7 @@ export const MenuItem = withMemo(function MenuItem<Item>({
             __allowChildren="all"
         >
             <BaseBlock className={classNames(styles.itemChildren)}>
-                {!!icon && <BaseIcon icon={icon} color={iconColor} className={styles.icon} />}
+                {!!icon && <BaseIcon icon={icon} flavor={iconFlavor} className={styles.icon} style={iconStyle as any} />}
                 {childElements}
             </BaseBlock>
         </Clickable>

package/src/Components/Menu/Submenu.tsx

@@ -13,12 +13,13 @@ import classNames from 'classnames';
 import styles from './menu.module.scss';
 import type { IconSource } from '../Icon/BaseIcon';
 import type { RbmComponentProps, WithNoStringAndChildrenProps } from '../RbmComponentProps';
+import { FlavorWithText } from '../FlavorWithText';
 
 export type SubmenuProps = RbmComponentProps<
     {
         label: string;
         icon?: IconSource;
-        iconColor?: string;
+        iconFlavor?: FlavorWithText;
         disabled?: boolean;
         onMouseEnter?: () => void;
         onMouseLeave?: () => void;
@@ -30,7 +31,7 @@ export const Submenu = withMemo(function Submenu({
     children,
     label,
     icon,
-    iconColor,
+    iconFlavor,
     className,
     style,
     disabled = false,
@@ -100,7 +101,7 @@ export const Submenu = withMemo(function Submenu({
                 style={style}
             >
                 <Flex ref={submenuRef} className={classNames(styles.itemChildren)} horizontal={true}>
-                    {!!icon && <BaseIcon icon={icon} color={iconColor} className={styles.icon} />}
+                    {!!icon && <BaseIcon icon={icon} flavor={iconFlavor} className={styles.icon} />}
                     <Grow>
                         <Text>{label}</Text>
                     </Grow>

package/src/Components/Text/text.module.scss

@@ -6,6 +6,7 @@
 
 .text {
   display: inline;
+  color: var(--text-primary-default-color);
 
   &.block {
     display: block;

package/src/Components/Title/Title.stories.tsx

@@ -10,6 +10,7 @@ import { fn } from 'storybook/test';
 import React from 'react';
 import type { HoverMenuProps } from '../Menu/HoverMenu';
 import type { StoryObj } from '@storybook/react-vite';
+import { Flavor } from '../Flavor';
 
 const meta = {
     args: {
@@ -82,10 +83,10 @@ export const HoverMenuWithTitle: Story = {
                     Five
                 </MenuItem>
                 <MenuDivider />
-                <MenuItem iconColor="green" onClick={fn()} icon={faUser}>
+                <MenuItem iconFlavor={Flavor.CONSTRUCTIVE} onClick={fn()} icon={faUser}>
                     Six
                 </MenuItem>
-                <MenuItem iconColor="green" onClick={fn()} icon={faCog} disabled={true}>
+                <MenuItem iconFlavor={Flavor.CONSTRUCTIVE} onClick={fn()} icon={faCog} disabled={true}>
                     Seven
                 </MenuItem>
             </>

package/src/Components/Toast/toast.module.scss

@@ -24,7 +24,7 @@
   right: 0;
   bottom: 3rem;
   margin: auto;
-  max-width: map.get(variables.$grid-breakpoints, "sm");
+  max-width: map.get(variables.$gridBreakpoints, "sm");
   z-index: var(--toast-z-index);
   display: flex;
   align-items: center;

package/src/Components/TopBar/topBar.module.scss

@@ -119,7 +119,7 @@
       justify-content: flex-start;
       flex-direction: column;
       z-index: var(--top-bar-hidden-buttons-z-index);
-      background-color: white;
+      background-color: var(--foreground-primary);
       border: 1px solid var(--top-bar-hidden-buttons-border-color);
     }
   }

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './TypeHelpers';
 export * from './WrongChildError';
 export * from './Components/ErrorBoundary';
 export * from './Components/Flavor';
+export * from './Components/FlavorWithText';
 export * from './Components/RbmComponentProps';
 export * from './helper/Characters';
 export * from './helper/DistributiveOmit';