@ainias42/react-bootstrap-mobile 1.0.7 → 1.0.9

package/package.json

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

package/src/Components/DesignProvider/Design.ts

@@ -0,0 +1,4 @@
+export enum Design {
+    FLAT = 'flat-design',
+    MATERIAL = 'material-design',
+}

package/src/Components/DesignProvider/DesignContext.ts

@@ -0,0 +1,8 @@
+import { createContext, useContext } from 'react';
+import { Design } from './Design';
+
+export const DesignContext = createContext<Design>(Design.FLAT);
+
+export function useDesign() {
+    return useContext(DesignContext);
+}

package/src/Components/DesignProvider/DesignProvider.tsx

@@ -0,0 +1,32 @@
+import { Design } from './Design';
+import { DesignContext } from './DesignContext';
+import { withMemo } from '../../helper/withMemo';
+import React from 'react';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+export type DesignProviderProps = { design?: Design; children?: ReactNode; className?: string };
+
+export const DesignProvider = withMemo(function DesignProvider({
+    design = Design.FLAT,
+    children,
+    className,
+}: DesignProviderProps) {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Callbacks
+
+    // Effects
+
+    // Other
+
+    // RenderFunctions
+
+    return (
+        <DesignContext value={design}>
+            <div className={classNames(design, className)}>{children}</div>
+        </DesignContext>
+    );
+});

package/src/Components/FormElements/Switch/switch.module.scss

@@ -17,7 +17,7 @@
   --switch-background: var(--foreground-primary);
   --switch-box-shadow-color: var(--box-shadow-color);
   --switch-handle-color: var(--foreground-primary);
-  --switch-handle-box-shadow-color: rgb(0 0 0 / 25%);
+  --switch-handle-box-shadow-color: var(--curtain-light);
   --switch-active-background-color: var(--flavor-accent);
   --switch-active-box-shadow-color: var(--flavor-accent);
   --switch-active-handle-color: var(--foreground-primary);

package/src/Components/ThemeProvider/ThemeContext.ts

@@ -0,0 +1,7 @@
+import { createContext, useContext } from 'react';
+
+export const ThemeContext = createContext<string>('light');
+
+export function useTheme() {
+    return useContext(ThemeContext);
+}

package/src/Components/ThemeProvider/ThemeProvider.tsx

@@ -0,0 +1,28 @@
+import { ThemeContext } from './ThemeContext';
+import { withMemo } from '../../helper/withMemo';
+import React, { useEffect } from 'react';
+import type { ReactNode } from 'react';
+
+export type ThemeProviderProps = { theme: string; children: ReactNode };
+
+export const ThemeProvider = withMemo(function ThemeProvider({ theme, children }: ThemeProviderProps) {
+    // Refs
+
+    // States/Variables/Selectors
+
+    // Callbacks
+
+    // Effects
+    useEffect(() => {
+        document.body.classList.add(theme);
+        return () => {
+            document.body.classList.remove(theme);
+        };
+    }, [theme]);
+
+    // Other
+
+    // RenderFunctions
+
+    return <ThemeContext value={theme}>{children}</ThemeContext>;
+});

package/src/index.ts

@@ -19,6 +19,9 @@ export * from './WindowContext/WindowContext';
 export * from './Components/ActionSheet/ActionSheet';
 export * from './Components/Card/Card';
 export * from './Components/Clickable/Clickable';
+export * from './Components/DesignProvider/Design';
+export * from './Components/DesignProvider/DesignContext';
+export * from './Components/DesignProvider/DesignProvider';
 export * from './Components/Dialog/AlertDialog';
 export * from './Components/Dialog/ButtonDialog';
 export * from './Components/Dialog/ConfirmDialog';
@@ -80,6 +83,8 @@ export * from './Components/TabBar/TabBarButton';
 export * from './Components/Table/Table';
 export * from './Components/Text/Heading';
 export * from './Components/Text/Text';
+export * from './Components/ThemeProvider/ThemeContext';
+export * from './Components/ThemeProvider/ThemeProvider';
 export * from './Components/Title/HoverTitle';
 export * from './Components/Title/withTitle';
 export * from './Components/Toast/Toast';

package/src/scss/_colors.scss

@@ -33,8 +33,8 @@
   --flavor-pale-constructive: #86efac; // Green 300
   --flavor-destructive: #dc2626; // Red 600
   --flavor-pale-destructive: #fca5a5; // Red 300
-  --curtain-light: rgb(0 0 0 / 40%);
-  --curtain-strong: rgb(0 0 0 / 80%);
+  --curtain-light: rgb(255 255 255 / 40%);
+  --curtain-strong: rgb(255 255 255 / 80%);
   --foreground-primary: #292524; // Stone 800
   --foreground-secondary: #44403c; // Stone 700
   --foreground-tertiary: #57534e; // Stone 600
@@ -48,6 +48,7 @@
   --text-inverse: #0f172a; // Slate 900
   --opacity-disabled: 0.3;
   --text-primary-default-color: var(--text-primary);
+  --button-primary-text-color: var(--text-primary);
 }
 
 .#{$material} {
@@ -55,10 +56,6 @@
 
   --flavor-accent: #37474f;
   --box-shadow-color: rgb(0 0 0 / 20%);
-
-  &.dark {
-    @extend %color-vars-dark;
-  }
 }
 
 .#{$flat} {
@@ -67,8 +64,19 @@
   --flavor-accent: #2563eb; // blue 600
   --flavor-pale-accent: #93c5fd; // blue 300
   --box-shadow-color: rgb(0 0 0 / 12%);
+}
 
-  &.dark {
+.dark {
+  .#{$flat}, &.#{$flat} {
     @extend %color-vars-dark;
+
+    --box-shadow-color: rgb(255 255 255 / 12%);
+    --flavor-pale-accent: #172554; // blue 900
+  }
+
+  .#{$material}, &.#{$material} {
+    @extend %color-vars-dark;
+
+    --box-shadow-color: rgb(255 255 255 / 20%);
   }
 }

package/src/scss/_designMixin.scss

@@ -10,4 +10,4 @@
       @content
     }
   }
-}
+}