@itcase/ui 1.8.102 → 1.8.104

package/dist/css/styles/fill/fill.css

@@ -29,11 +29,11 @@
     }
   }
   @each $palette in red, neon-pink, electric-pink, hibiscus, pink, pink-citrus,
-    pomagranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
+    pomegranate, dragon-fruit, camellia, red-rose, plum, orange, clementine,
     apricot, papaya, kumquat, light-orange, peach, flamingo, rose-gold,
     pink-sand, vintage-rose, grapefruit, cream, mellow-yellow, canary-yellow,
     pollen, flash-light, lemon-cream, flash, dark-green, green, spearmint, mint,
-    beryl, sea-foam, turquoise, blue, light-blue, cerulian, surf-blue,
+    beryl, sea-foam, turquoise, blue, light-blue, cerulean, surf-blue,
     pacific-green, blue-cobalt, dark-teal, blue-horizon, denim-blue, linen-blue,
     deep-navy, midnight-blue, purple, ultra-violet, lilac, ocean-blue,
     delft-blue, indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,

package/dist/css/styles/fill/fill_active.css

@@ -1,5 +1,8 @@
 .fill {
   &_active {
+    &_none {
+      background-color: transparent;
+    }
     @each $type in accent, primary, secondary, surface, error, warning, success,
       danger, info, disabled {
       @each $color in primary, secondary, tertiary, quaternary {
@@ -19,11 +22,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/fill/fill_active_hover.css

@@ -1,6 +1,9 @@
 .fill {
   &_active {
     &_hover {
+      &_none {
+        background-color: transparent;
+      }
       @each $type in accent, primary, secondary, surface, error, warning,
         success, danger, info, disabled {
         @each $color in primary, secondary, tertiary, quaternary {
@@ -80,12 +83,12 @@
         }
       }
       @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
         orange, clementine, apricot, papaya, kumquat, light-orange, peach,
         flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
         mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
         dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
-        light-blue, cerulian, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
         blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
         ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
         lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,

package/dist/css/styles/fill/fill_hover.css

@@ -1,5 +1,8 @@
 .fill {
   &_hover {
+    &_none {
+      background-color: transparent;
+    }
     @each $type in accent, primary, secondary, surface, error, warning, success,
       danger, info, disabled {
       @each $color in primary, secondary, tertiary, quaternary {
@@ -54,11 +57,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/text-color/text-color.css

@@ -1,5 +1,8 @@
 .text {
   &&-color {
+    &_none {
+      color: transparent;
+    }
     @each $type in accent, primary, secondary, surface, error, warning, success,
       danger, info, disabled {
       @each $color in primary, secondary, tertiary, quaternary {
@@ -13,11 +16,11 @@
       }
     }
     @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-      pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum, orange,
+      pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum, orange,
       clementine, apricot, papaya, kumquat, light-orange, peach, flamingo,
       rose-gold, pink-sand, vintage-rose, grapefruit, cream, mellow-yellow,
       canary-yellow, pollen, flash-light, lemon-cream, flash, dark-green, green,
-      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulian,
+      spearmint, mint, beryl, sea-foam, turquoise, blue, light-blue, cerulean,
       surf-blue, pacific-green, blue-cobalt, dark-teal, blue-horizon,
       denim-blue, linen-blue, deep-navy, midnight-blue, purple, ultra-violet,
       lilac, ocean-blue, delft-blue, indigo, lavender-gray, lavender, mist-blue,

package/dist/css/styles/text-color/text-color_active.css

@@ -1,6 +1,9 @@
 .text {
   &&-color {
     &_active {
+      &_none {
+        color: transparent;
+      }
       @each $type in accent, primary, secondary, surface, error, warning,
         success, danger, info, disabled {
         @each $color in primary, secondary, tertiary, quaternary {
@@ -14,12 +17,12 @@
         }
       }
       @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-        pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+        pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
         orange, clementine, apricot, papaya, kumquat, light-orange, peach,
         flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
         mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
         dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
-        light-blue, cerulian, surf-blue, pacific-green, blue-cobalt, dark-teal,
+        light-blue, cerulean, surf-blue, pacific-green, blue-cobalt, dark-teal,
         blue-horizon, denim-blue, linen-blue, deep-navy, midnight-blue, purple,
         ultra-violet, lilac, ocean-blue, delft-blue, indigo, lavender-gray,
         lavender, mist-blue, storm-gray, cactus, pine-green, cyprus-green,

package/dist/css/styles/text-color/text-color_active_hover.css

@@ -2,6 +2,9 @@
   &&-color {
     &_active {
       &_hover {
+        &_none {
+          color: transparent;
+        }
         @each $type in accent, primary, secondary, surface, error, warning,
           success, danger, info, disabled {
           @each $color in primary, secondary, tertiary, quaternary {
@@ -17,12 +20,12 @@
           }
         }
         @each $palette in red, neon-pink, electric-pink, hibiscus, pink,
-          pink-citrus, pomagranate, dragon-fruit, camellia, red-rose, plum,
+          pink-citrus, pomegranate, dragon-fruit, camellia, red-rose, plum,
           orange, clementine, apricot, papaya, kumquat, light-orange, peach,
           flamingo, rose-gold, pink-sand, vintage-rose, grapefruit, cream,
           mellow-yellow, canary-yellow, pollen, flash-light, lemon-cream, flash,
           dark-green, green, spearmint, mint, beryl, sea-foam, turquoise, blue,
-          light-blue, cerulian, surf-blue, pacific-green, blue-cobalt,
+          light-blue, cerulean, surf-blue, pacific-green, blue-cobalt,
           dark-teal, blue-horizon, denim-blue, linen-blue, deep-navy,
           midnight-blue, purple, ultra-violet, lilac, ocean-blue, delft-blue,
           indigo, lavender-gray, lavender, mist-blue, storm-gray, cactus,

package/dist/css/styles/text-color/text-color_hover.css

@@ -1,6 +1,9 @@
 .text {
   &&-color {
     &_hover {
+      &_none {
+        color: transparent;
+      }
       @each $type in accent, primary, secondary, surface, error, warning,
         success, danger, info, disabled {
         @each $color in primary, secondary, tertiary, quaternary {

package/dist/types/components/Overlay/Overlay.appearance.d.ts

@@ -1,2 +1,12 @@
-import { OverlayAppearanceType } from './Overlay.interface';
-export declare const overlayAppearance: OverlayAppearanceType;
+export declare const overlayAppearance: {
+    blackout?: {
+        blur?: import("@itcase/types").BlurProps;
+        fill?: import("@itcase/types").FillProps;
+        opacity?: import("@itcase/types").OpacityProps;
+    } | undefined;
+    blur?: {
+        blur?: import("@itcase/types").BlurProps;
+        fill?: import("@itcase/types").FillProps;
+        opacity?: import("@itcase/types").OpacityProps;
+    } | undefined;
+};

package/dist/types/components/Overlay/Overlay.interface.d.ts

@@ -1,25 +1,27 @@
-import { MouseEventHandler } from 'react';
-import { AppearanceKeysDefault, OpacityProps, OverlayFillProps } from '@itcase/types';
-import type { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
-export interface OverlayThemeColor {
-}
-type AppearanceKeys = AppearanceKeysDefault & {};
-export type OverlayAppearanceType = {
-    [key in AppearanceKeys]?: OverlayThemeColor;
+import { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import { AppearanceOverlayKey, BlurProps, FillProps, OpacityProps } from '@itcase/types';
+import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
+type OverlayAppearanceProps = {
+    blur?: BlurProps;
+    fill?: FillProps;
+    opacity?: OpacityProps;
 };
-export interface OverlayConfig {
-    [key: number | string | symbol]: any;
-    appearance: OverlayAppearanceType | undefined;
-    setAppearance: (newComponent: OverlayAppearanceType) => void;
-}
-interface OverlayProps extends OverlayThemeColor, StyleAttributes {
-    [key: number | string | symbol]: any;
-    appearance?: AppearanceKeys;
+type OverlayProps = OverlayAppearanceProps & StyleAttributes & {
+    appearance?: AppearanceOverlayKey;
+    children?: ReactNode;
     className?: string;
-    fill?: OverlayFillProps;
-    opacity?: OpacityProps;
-    type?: string;
+    dataTestId?: string;
+    dataTour?: string;
     isOverlay?: boolean;
     onClick?: MouseEventHandler<HTMLDivElement>;
-}
-export type { OverlayProps };
+    style?: CSSProperties;
+};
+type OverlayAppearanceKey = AppearanceOverlayKey;
+type OverlayAppearance = {
+    [key in OverlayAppearanceKey]?: OverlayAppearanceProps;
+};
+type OverlayConfig = {
+    appearance: OverlayAppearance;
+    setAppearance: (appearanceConfig: OverlayAppearance) => void;
+};
+export type { OverlayAppearance, OverlayConfig, OverlayProps };

package/dist/types/components/Overlay/appearance/overlayDefault.d.ts

@@ -1,11 +1,3 @@
-declare const overlayAppearanceDefault: {
-    blackout: {
-        fill: string;
-        opacity: number;
-    };
-    blur: {
-        fill: string;
-        blur: number;
-    };
-};
+import { OverlayAppearance } from '../Overlay.interface';
+declare const overlayAppearanceDefault: OverlayAppearance;
 export { overlayAppearanceDefault };

package/dist/types/components/Search/appearance/searchDefault.d.ts

@@ -9,5 +9,15 @@ declare const searchAppearanceDefault: {
         inputTextColor: string;
         placeholderTextColor: string;
     };
+    defaultSecondary: {
+        fill: string;
+        borderColor: string;
+        borderColorHover: string;
+        iconAfterFill: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        inputTextColor: string;
+        placeholderTextColor: string;
+    };
 };
 export { searchAppearanceDefault };

package/dist/types/components/Tab/appearance/tabSize.d.ts

@@ -2,6 +2,7 @@ declare const tabAppearanceSize: {
     sizeXXL: {
         size: string;
         labelTextSize: string;
+        badgeAppearanceSize: string;
         badgeSize: string;
         badgeTextSize: string;
         dividerSize: string;
@@ -9,6 +10,7 @@ declare const tabAppearanceSize: {
     sizeXL: {
         size: string;
         labelTextSize: string;
+        badgeAppearanceSize: string;
         badgeSize: string;
         badgeTextSize: string;
         dividerSize: string;
@@ -16,6 +18,7 @@ declare const tabAppearanceSize: {
     sizeL: {
         size: string;
         labelTextSize: string;
+        badgeAppearanceSize: string;
         badgeSize: string;
         badgeTextSize: string;
         dividerSize: string;
@@ -23,6 +26,7 @@ declare const tabAppearanceSize: {
     sizeM: {
         size: string;
         labelTextSize: string;
+        badgeAppearanceSize: string;
         badgeSize: string;
         badgeTextSize: string;
         dividerSize: string;
@@ -30,6 +34,7 @@ declare const tabAppearanceSize: {
     sizeS: {
         size: string;
         labelTextSize: string;
+        badgeAppearanceSize: string;
         badgeSize: string;
         badgeTextSize: string;
         dividerSize: string;
@@ -37,12 +42,14 @@ declare const tabAppearanceSize: {
     sizeXS: {
         size: string;
         labelTextSize: string;
+        badgeAppearanceSize: string;
         badgeSize: string;
         badgeTextSize: string;
     };
     sizeXXS: {
         size: string;
         labelTextSize: string;
+        badgeAppearanceSize: string;
         badgeSize: string;
         badgeTextSize: string;
         dividerSize: string;

package/dist/types/components/Tab/appearance/tabStyle.d.ts

@@ -1,6 +1,7 @@
 declare const tabAppearanceStyle: {
     solid: {
         borderColor: string;
+        borderColorActive: string;
     };
     outlined: {
         fill: string;
@@ -9,6 +10,7 @@ declare const tabAppearanceStyle: {
     ghost: {
         fill: string;
         borderColor: string;
+        borderColorActive: string;
     };
 };
 export { tabAppearanceStyle };

package/dist/types/components/Tab/appearance/tabSurface.d.ts

@@ -7,8 +7,9 @@ declare const tabAppearanceSurface: {
         fillHover: string;
         labelTextColor: string;
         labelTextColorActive: string;
-        borderColor: string;
         dividerFillDisabled: string;
+        borderColor: string;
+        borderColorActive: string;
         badgeAppearance: string;
         dividerFillActive: string;
         iconFillIcon: string;
@@ -22,6 +23,8 @@ declare const tabAppearanceSurface: {
         labelTextColor: string;
         labelTextColorActive: string;
         dividerFillDisabled: string;
+        borderColor: string;
+        borderColorActive: string;
         badgeAppearance: string;
         dividerFillActive: string;
         iconFillIcon: string;
@@ -35,6 +38,8 @@ declare const tabAppearanceSurface: {
         labelTextColor: string;
         labelTextColorActive: string;
         dividerFillDisabled: string;
+        borderColor: string;
+        borderColorActive: string;
         badgeAppearance: string;
         dividerFillActive: string;
         iconFillIcon: string;
@@ -48,6 +53,8 @@ declare const tabAppearanceSurface: {
         labelTextColor: string;
         labelTextColorActive: string;
         dividerFillDisabled: string;
+        borderColor: string;
+        borderColorActive: string;
         badgeAppearance: string;
         dividerFillActive: string;
         iconFillIcon: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.8.102",
+  "version": "1.8.104",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -72,9 +72,9 @@
   "scripts": {
     "build": "npm run build-js && npm run build-css",
     "build-js": "rm -rf dist && NODE_ENV=production rollup -c",
-    "build-css": "rm -rf dist/css && postcss 'src/components/**/!(css)/!(*.tokens.css)*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production",
+    "build-css": "rm -rf dist/css && postcss 'src/components/**/!(css)/!(*.tokens.css)*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' 'src/styles/bundle.css' --base src --dir dist/css/ --env production",
     "dev-js": "rollup -c -w",
-    "dev-css": "postcss 'src/components/**/!(css)/!(*.tokens.css)*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' --base src --dir dist/css/ --env production -w --verbose",
+    "dev-css": "postcss 'src/components/**/!(css)/!(*.tokens.css)*.css' 'src/styles/!(.css)/**/*.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' 'src/tokens/*.css' 'src/styles/bundle.css' --base src --dir dist/css/ --env production -w --verbose",
     "prepare": "husky",
     "prepack": "npm run build",
     "semantic-release": "semantic-release",
@@ -141,7 +141,7 @@
     "@commitlint/config-conventional": "^19.8.1",
     "@itcase/config": "^1.0.55",
     "@itcase/lint": "^1.1.37",
-    "@itcase/types": "^1.0.30",
+    "@itcase/types": "^1.0.33",
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.6",