@nuskin/foundation-ui-components 1.19.4 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.19.4",
+    "version": "1.20.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/accordion/NsAccordionHeader.tsx

@@ -1,5 +1,6 @@
-import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant, NsIconProps, AccordionVariantType } from '..';
 import { styled } from '@nuskin/foundation-theme';
+
+import { AccordionVariant, AccordionVariantType, NsAccordionHeaderProps, NsIcon, NsIconProps, NsTypography } from '..';
 import { isValidIconName } from '../icon/NsIconVariants';
 import { getAccordionColor } from './colorMap';
 

package/src/common/accordion/colorMap.ts

@@ -1,101 +1,38 @@
-import {Themed} from '../common.types';
-import {AccordionVariantType} from './enums';
-import {ColorUtils, FoundationTheme} from '@nuskin/foundation-theme';
-const {isDarkMode, color} = ColorUtils;
+import { Themed } from '../common.types';
+import { ColorUtils } from '@nuskin/foundation-theme';
+import { AllColorKeyType } from '@nuskin/foundation-theme/src/common/themes/genome-colors/AllColors';
+
+import { AccordionVariant, AccordionVariantType } from './enums';
+
+const { getGenomeColor } = ColorUtils;
 const compKeys = ['contentBg', 'contentText', 'headBg', 'headText'];
 type CompKeys = (typeof compKeys)[number];
-type VariantColors = Record<
-    CompKeys,
-    {
-        light: [FoundationTheme.AppColors, string];
-        dark: [FoundationTheme.AppColors, string];
-    }
->;
+type VariantColors = Record<CompKeys, AllColorKeyType>;
 
-const colorObject: Record<string, [FoundationTheme.AppColors, string]> = {
-    n10: ['primary', 'dark'], // #121212
-    n20: ['primary', 'black'], // #252525
-    n40: ['neutral', '80'], // #444444
-    n45: ['neutral', '70'], // #5f5f5f
-    n50: ['neutral', '60'], // #8c8c8c
-    n80: ['neutral', '50'], // #b2b2b2
-    n85: ['neutral', '40'], // #e0e0e0
-    n90: ['neutral', '30'], // #ededed
-    n95: ['primary', 'gray'], // #f5f5f5
-    n100: ['primary', 'white'], // #fff
-};
 export const colorMap: Record<AccordionVariantType, VariantColors> = {
     basic: {
-        contentBg: {
-            light: colorObject.n95,
-            dark: colorObject.n20,
-        },
-        contentText: {
-            light: colorObject.n10,
-            dark: colorObject.n95,
-        },
-        headBg: {
-            light: colorObject.n100,
-            dark: colorObject.n20,
-        },
-        headText: {
-            light: colorObject.n10,
-            dark: colorObject.n95,
-        },
+        contentBg: 'N20',
+        contentText: 'N90',
+        headBg: 'N10',
+        headText: 'N90',
     },
     compact: {
-        contentBg: {
-            light: colorObject.n100,
-            dark: colorObject.n10,
-        },
-        contentText: {
-            light: colorObject.n10,
-            dark: colorObject.n90,
-        },
-        headBg: {
-            light: colorObject.n100,
-            dark: colorObject.n10,
-        },
-        headText: {
-            light: colorObject.n10,
-            dark: colorObject.n90,
-        },
+        contentBg: 'N10',
+        contentText: 'N90',
+        headBg: 'N10',
+        headText: 'N90',
     },
     gray: {
-        contentBg: {
-            light: colorObject.n85,
-            dark: colorObject.n40,
-        },
-        contentText: {
-            light: colorObject.n40,
-            dark: colorObject.n85,
-        },
-        headBg: {
-            light: colorObject.n90,
-            dark: colorObject.n45,
-        },
-        headText: {
-            light: colorObject.n45,
-            dark: colorObject.n90,
-        },
+        contentBg: 'N40',
+        contentText: 'N80',
+        headBg: 'N30',
+        headText: 'N70',
     },
     stripe: {
-        contentBg: {
-            light: colorObject.n90,
-            dark: colorObject.n45,
-        },
-        contentText: {
-            light: colorObject.n45,
-            dark: colorObject.n90,
-        },
-        headBg: {
-            light: colorObject.n100,
-            dark: colorObject.n40,
-        },
-        headText: {
-            light: colorObject.n40,
-            dark: colorObject.n100,
-        },
+        contentBg: 'N30',
+        contentText: 'N70',
+        headBg: 'N10',
+        headText: 'N80',
     },
 };
 
@@ -104,13 +41,14 @@ type GetAccordionColor = {
     invert: boolean;
     keys: CompKeys[];
 } & Themed;
-export const getAccordionColor = ({theme, variant, invert, keys}: GetAccordionColor): Record<CompKeys, string> => {
-    const isDark = invert ? !isDarkMode({theme}) : isDarkMode({theme});
-    const darkLabel = isDark ? 'dark' : 'light';
+export const getAccordionColor = ({ theme, variant, invert, keys }: GetAccordionColor): Record<CompKeys, string> => {
     const result: Record<string, string> = {};
+    if (!Object.values(AccordionVariant).includes(variant)) {
+        throw new Error(`Invalid variant ${variant}`);
+    }
     for (const colorKey of keys) {
-        const [appColorBg, appSubColorBg] = colorMap[variant][colorKey][darkLabel];
-        const colorValue = color(appColorBg, appSubColorBg)({theme});
+        const appColorKey = colorMap[variant][colorKey];
+        const colorValue = getGenomeColor(theme, appColorKey, invert ? 'dark' : 'light');
         result[colorKey] = colorValue;
     }
     return result;

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -1,7 +1,8 @@
+import { styled } from '@nuskin/foundation-theme';
 import React, { useMemo } from 'react';
 import Slider from 'react-slick';
+
 import { NsScrollingCarousalProps } from '../';
-import { styled } from '@nuskin/foundation-theme';
 
 type StyledType = {
     dotsBottomPixel?: number;
@@ -35,7 +36,7 @@ const NsScrollingCarousal = ({
             adaptiveHeight: true,
             arrows: true,
             draggable: true,
-            dots: true,
+            dots: false,
             infinite: true,
             speed: scrollSeconds * 1000 || 500, // speed = animation speed in milliseconds
             slidesToShow: 1,