@kvdbil/components 15.1.4 → 16.0.0

package/types/components/Button/index.d.ts

@@ -1,8 +1,8 @@
 import React, { ComponentPropsWithRef, CSSProperties, ReactNode } from 'react';
-import { Color, Variant, Size, ColorShade } from '../../Types';
+import { ColorWithNeutral, Variant, Size, ColorShade } from '../../Types';
 interface Props {
     size?: Size;
-    color?: Color;
+    color: ColorWithNeutral;
     colorShade?: ColorShade;
     variant?: Variant;
     fullWidth?: boolean;

package/types/components/Button/styles.d.ts

@@ -1,17 +1,23 @@
 import { Theme } from '../../theme';
-import { Color, ColorShade, Variant } from '../../Types';
+import { ColorWithNeutral, ColorShade, Variant } from '../../Types';
+type ColorStylesProp = {
+    theme: Theme;
+    $color: ColorWithNeutral;
+    $colorShade: ColorShade;
+    $variant: Variant;
+};
 export declare const fontSizes: {
-    smaller: import("styled-components").RuleSet<object>;
     small: import("styled-components").RuleSet<object>;
     regular: import("styled-components").RuleSet<object>;
     large: import("styled-components").RuleSet<object>;
 };
-export declare const smallerAndSmallSizeStyles: () => string;
+export declare const smallSizeStyles: () => string;
 export declare const regularSizeStyles: () => string;
 export declare const largeSizeStyles: () => string;
 export declare const disabledColorStyles: (theme: Theme, variant: Variant) => string;
 export declare const colorStyles: {
-    solid: (theme: Theme, color: Color, colorShade: ColorShade) => string;
-    outline: (theme: Theme, color: Color) => string;
-    flat: (theme: Theme, color: Color) => string;
+    solid: ({ theme, $color, $colorShade }: ColorStylesProp) => string;
+    outline: ({ theme, $color }: ColorStylesProp) => string;
+    flat: ({ theme, $color }: ColorStylesProp) => string;
 };
+export {};

package/types/components/Chip/index.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ComponentType, MouseEvent, ReactNode } from 'react';
 import { DefaultTheme } from 'styled-components';
-import { Color, Size, Variant } from '../../Types';
-export type ChipColor = Color | 'neutralLight';
+import { ColorWithNeutral, Size, Variant } from '../../Types';
+export type ChipColor = ColorWithNeutral | 'neutralLight';
 export interface ChipProps {
     color?: ChipColor;
     children: ReactNode;

package/types/components/Chip/styles.d.ts

@@ -7,8 +7,8 @@ export declare const getBorderColor: ({ color, isDisabled, variant, theme, }: It
 export declare const getCursorType: ({ isDisabled, isClickable, isDeletable, }: ItemProps) => "auto" | "not-allowed" | "pointer";
 export declare const getHoverBackgroundColor: ({ variant, color, theme, }: ItemProps) => string;
 export declare const getHoverBorderColor: ({ variant, color, theme }: ItemProps) => string;
-export declare const getHoverColor: ({ variant, color, theme }: ItemProps) => "#e8a100" | "#007069" | "#a63640" | "#004773" | "#269940" | "#1a2030" | "#ffffff";
-export declare const getSufixHoverBackgroundColor: ({ variant, color, isClickable, isDisabled, theme, }: ItemProps) => "#d98500" | "#e8a100" | "#00474d" | "#007069" | "#5e2636" | "#a63640" | "#17395d" | "#004773" | "#175c36" | "#269940" | "#1a2030" | "#f2f2f2" | "#a3a6a8" | "#d9d9d6" | "#e8e8e8";
-export declare const getActiveBackgroundColor: ({ color, variant, isDisabled, theme, }: ItemProps) => "#f7cf57" | "#6bb8a6" | "#f5968a" | "#57c2ff" | "#91e5a1" | "#474d59" | "#ffffff" | "transparent";
+export declare const getHoverColor: ({ variant, color, theme }: ItemProps) => "#e8a100" | "#1b6359" | "#9c333c" | "#005e8c" | "#006629" | "#aa2228" | "#8f367f" | "#1a2030" | "#ffffff" | "#000000";
+export declare const getSufixHoverBackgroundColor: ({ variant, color, isClickable, isDisabled, theme, }: ItemProps) => "#c48900" | "#e8a100" | "#00474d" | "#1b6359" | "#5e2636" | "#9c333c" | "#004773" | "#005e8c" | "#0b4222" | "#006629" | "#841c24" | "#aa2228" | "#42214f" | "#8f367f" | "#f2f2f2" | "#000000" | "#a4a6ac" | "#d1d2d6" | "#e8e9ea";
+export declare const getActiveBackgroundColor: ({ color, variant, isDisabled, theme, }: ItemProps) => "#f7cf57" | "#32bfaf" | "#f59085" | "#3bb7e2" | "#59d771" | "#ff8888" | "#e28dde" | "#ffffff" | "#8d8f97" | "transparent";
 export declare const getActiveBorderColor: ({ variant, color, theme }: ItemProps) => string;
-export declare const getActiveColor: ({ variant, color, theme }: ItemProps) => "#f7cf57" | "#6bb8a6" | "#f5968a" | "#57c2ff" | "#91e5a1" | "#1a2030" | "#474d59" | "#ffffff";
+export declare const getActiveColor: ({ variant, color, theme }: ItemProps) => "#f7cf57" | "#32bfaf" | "#f59085" | "#3bb7e2" | "#59d771" | "#ff8888" | "#e28dde" | "#1a2030" | "#ffffff" | "#8d8f97";

package/types/components/IconButton.d.ts

@@ -1,11 +1,11 @@
 import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import { Color } from '../Types';
+import { ColorWithNeutral } from '../Types';
 export declare const BackgroundStyles: import("styled-components").RuleSet<{
-    color: Color;
+    color: ColorWithNeutral;
     isDisabled: boolean;
 }>;
 interface Props {
-    color: Color;
+    color: ColorWithNeutral;
     children: ReactNode;
     isActive: boolean;
     isDisabled: boolean;

package/types/components/Spinner/index.d.ts

@@ -1,11 +1,11 @@
 import { ComponentPropsWithoutRef } from 'react';
-import { Color, Size, Speed } from '../../Types';
+import { ColorWithNeutral, SpinnerSize, Speed } from '../../Types';
 interface SpinnerBaseProps {
-    color: Color | string;
-    size: Size | number;
+    color: ColorWithNeutral;
+    customColor?: string;
+    size: SpinnerSize | number;
     speed: Speed;
 }
-export interface SpinnerProps extends ComponentPropsWithoutRef<'div'>, Partial<SpinnerBaseProps> {
-}
-declare const Spinner: ({ size, color, speed, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
+export type SpinnerProps = Partial<SpinnerBaseProps> & ComponentPropsWithoutRef<'div'>;
+declare const Spinner: ({ size, color, speed, customColor, ...props }: SpinnerProps) => import("react/jsx-runtime").JSX.Element;
 export default Spinner;

package/types/components/Switcher/index.d.ts

@@ -1,4 +1,4 @@
-import { Color } from "../../Types";
+import { Color } from '../../Types';
 export interface Props {
     selected?: boolean;
     disabled?: boolean;

package/types/components/Tabs/Tabs.d.ts

@@ -14,7 +14,7 @@ export interface TabsProps {
     kbNavAutoOpen?: boolean;
     onTabClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, index: number) => void;
     fullWidthBorder?: boolean;
-    borderColor?: keyof typeof theme.colors.gray;
+    borderColor?: keyof typeof theme.colors.grayscaleToned;
     headline?: string;
 }
 export declare const Tabs: ({ activeColor, justify, activeIndex, initalActive, children, kbNavAutoOpen, onTabClick, fullWidthBorder, borderColor, headline, }: TabsProps) => import("react/jsx-runtime").JSX.Element;

package/types/index.d.ts

@@ -46,7 +46,7 @@ export { useDynamicScript } from './hooks/useDynamicScript';
 export { Title, Subtitle, Headline, Display1, Display2, Display3, TinyTitleRegular, TinyTitleBold, } from './typography/Heading';
 export { Quote, Status, BodyLink, BodyText, Caption, CaptionLink, } from './typography/BodyText';
 export { Button as ButtonRegularText, ButtonLarge as ButtonLargeText, ButtonSmall as ButtonSmallText, } from './typography/ButtonText';
-export { hexToRGB } from './utils/utils';
+export { hexToRGB, resolveColorWithNeutral } from './utils/utils';
 export { resetButtonStyle } from './utils/utils';
 export { ButtonLargeTextStyle, ButtonRegularTextStyle, ButtonSmallTextStyle, } from './typography/ButtonText';
 export { Display3Style, Display2Style, Display1Style, HeadlineStyle, TitleStyle, SubtitleStyle, TinyTitleRegularStyle, TinyTitleBoldStyle, } from './typography/Heading';

package/types/theme.d.ts

@@ -9,104 +9,128 @@ export interface Theme {
     };
     colors: {
         primary: {
-            darker: '#d98500';
+            darker: '#c48900';
             dark: '#e8a100';
+            mainAlt: '#e8a100';
             main: '#f5b400';
             light: '#f7cf57';
-            lighter: '#fce5ab';
+            lighter: '#fbe7ab';
             lighter2: '#fff7e5';
+            lighter3: '#fdf9f1';
         };
         secondary: {
             darker: '#00474d';
-            dark: '#007069';
-            main: '#2a9d8f';
-            light: '#6bb8a6';
-            lighter: '#bae3cc';
-            lighter2: '#e5f5ed';
+            dark: '#1b6359';
+            mainAlt: '#228277';
+            main: '#299d8f';
+            light: '#32bfaf';
+            lighter: '#a4ddcb';
+            lighter2: '#d6f0e8';
+            lighter3: '#f4fbf8';
         };
         tertiary: {
             darker: '#5e2636';
-            dark: '#a63640';
-            main: '#ef5b5b';
-            light: '#f5968a';
-            lighter: '#f5c7bf';
+            dark: '#9c333c';
+            mainAlt: '#c94d4d';
+            main: '#f05c5c';
+            light: '#f59085';
+            lighter: '#fac7c3';
             lighter2: '#fcedeb';
+            lighter3: '#fbf5f4';
         };
         info: {
-            darker: '#17395d';
-            dark: '#004773';
-            main: '#007ab8';
-            light: '#57c2ff';
+            darker: '#004773';
+            dark: '#005e8c';
+            mainAlt: '#007ab8';
+            main: '#499ad4';
+            light: '#3bb7e2';
             lighter: '#abe0ff';
             lighter2: '#e5f5ff';
+            lighter3: '#f4f8fb';
         };
         success: {
-            darker: '#175c36';
-            dark: '#269940';
-            main: '#59d771';
-            light: '#91e5a1';
+            darker: '#0b4222';
+            dark: '#006629';
+            mainAlt: '#00aa47';
+            main: '#3ac25e';
+            light: '#59d771';
             lighter: '#c7f2cf';
             lighter2: '#edfaf0';
+            lighter3: '#f4fbf7';
         };
         warning: {
-            darker: '#d98500';
+            darker: '#c48900';
             dark: '#e8a100';
+            mainAlt: '#e8a100';
             main: '#f5b400';
             light: '#f7cf57';
-            lighter: '#fce5ab';
+            lighter: '#fbe7ab';
             lighter2: '#fff7e5';
+            lighter3: '#fdf9f1';
         };
         error: {
-            darker: '#5e2636';
-            dark: '#a63640';
-            main: '#ef5b5b';
-            light: '#f5968a';
-            lighter: '#f5c7bf';
-            lighter2: '#fcedeb';
+            darker: '#841c24';
+            dark: '#aa2228';
+            mainAlt: '#e9191d';
+            main: '#ff5153';
+            light: '#ff8888';
+            lighter: '#ffc2c2';
+            lighter2: '#ffd6d6';
+            lighter3: '#fbf4f4';
         };
-        neutral: {
-            darker: '#1a2030';
-            dark: '#1a2030';
-            main: '#1a2030';
-            light: '#474d59';
-            lighter: '#5e6369';
-            lighter2: '#707378';
+        purple: {
+            darker: '#42214f';
+            dark: '#8f367f';
+            mainAlt: '#a33e90';
+            main: '#cf59bf';
+            light: '#e28dde';
+            lighter: '#e0bfd9';
+            lighter2: '#f5edf2';
+            lighter3: '#fbf4f9';
         };
         text: {
             dark: '#1a2030';
+            disabled: '#babcc2';
             light: '#ffffff';
-            disabled: '#8c8f91';
         };
         background: {
-            dark: '#1a2030';
+            light: '#ffffff';
+            lightGray: '#fafafa';
             gray: '#f2f2f2';
             sand: '#f2efe6';
-            light: '#ffffff';
+            dark: '#1a2030';
         };
         common: {
             black: '#000000';
             white: '#ffffff';
-            purple: {
-                darker: '#42214f';
-                dark: '#732e70';
-                main: '#a13d8f';
-                light: '#c27db5';
-                lighter: '#e0bfd9';
-                lighter2: '#f5edf2';
-            };
         };
-        gray: {
+        grayscaleToned: {
             dark1: '#1a2030';
-            dark2: '#303842';
-            dark3: '#474d59';
-            dark4: '#5e6369';
-            dark5: '#707378';
-            light1: '#8c8f91';
-            light2: '#a3a6a8';
-            light3: '#c7c7c4';
-            light4: '#d9d9d6';
-            light5: '#e8e8e8';
+            dark2: '#313645';
+            dark3: '#484d59';
+            dark4: '#5f636e';
+            dark5: '#71757f';
+            light1: '#8d8f97';
+            light2: '#a4a6ac';
+            light3: '#babcc2';
+            light4: '#d1d2d6';
+            light5: '#e8e9ea';
             light6: '#f2f2f2';
+            light7: '#fafafa';
+        };
+        grayscaleNeutral: {
+            dark1: '#000000';
+            dark2: '#191919';
+            dark3: '#333333';
+            dark4: '#4c4c4c';
+            dark5: '#666666';
+            light1: '#7f7f7f';
+            light2: '#999999';
+            light3: '#b2b2b2';
+            light4: '#cccccc';
+            light5: '#e5e5e5';
+            light6: '#f0f0f0';
+            light7: '#fbfbfb';
         };
     };
     elevations: {

package/types/typography/BodyText/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const BodyTextStyle: import("styled-components").RuleSet<object>;
 export declare const CaptionStyle: import("styled-components").RuleSet<object>;
+export declare const Caption2Style: import("styled-components").RuleSet<object>;
 export declare const StyledBodyText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const QuoteStyle: import("styled-components").RuleSet<object>;
 export declare const Quote: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -8,6 +9,7 @@ export declare const BodyText: import("styled-components/dist/types").IStyledCom
 export declare const BodyLinkStyle: import("styled-components").RuleSet<object>;
 export declare const BodyLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const Caption: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export declare const Caption2: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const CaptionLinkStyle: import("styled-components").RuleSet<object>;
 export declare const CaptionLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const StatusStyle: import("styled-components").RuleSet<object>;

package/types/utils/utils.d.ts

@@ -1,3 +1,82 @@
+import { Theme } from '../theme';
+import { ColorWithNeutral } from '../Types';
 export declare const getLuminosity: (hexColor: string) => number;
 export declare const hexToRGB: (hex: string, alpha?: number) => string;
 export declare const resetButtonStyle: import("styled-components").RuleSet<object>;
+export declare const neutralColorSwap: (theme: Theme) => {
+    darker: "#000000";
+    dark: "#000000";
+    mainAlt: "#1a2030";
+    main: "#1a2030";
+    light: "#8d8f97";
+};
+export declare const resolveColorWithNeutral: (theme: Theme, color: ColorWithNeutral) => {
+    darker: "#c48900";
+    dark: "#e8a100";
+    mainAlt: "#e8a100";
+    main: "#f5b400";
+    light: "#f7cf57";
+    lighter: "#fbe7ab";
+    lighter2: "#fff7e5";
+    lighter3: "#fdf9f1";
+} | {
+    darker: "#00474d";
+    dark: "#1b6359";
+    mainAlt: "#228277";
+    main: "#299d8f";
+    light: "#32bfaf";
+    lighter: "#a4ddcb";
+    lighter2: "#d6f0e8";
+    lighter3: "#f4fbf8";
+} | {
+    darker: "#5e2636";
+    dark: "#9c333c";
+    mainAlt: "#c94d4d";
+    main: "#f05c5c";
+    light: "#f59085";
+    lighter: "#fac7c3";
+    lighter2: "#fcedeb";
+    lighter3: "#fbf5f4";
+} | {
+    darker: "#004773";
+    dark: "#005e8c";
+    mainAlt: "#007ab8";
+    main: "#499ad4";
+    light: "#3bb7e2";
+    lighter: "#abe0ff";
+    lighter2: "#e5f5ff";
+    lighter3: "#f4f8fb";
+} | {
+    darker: "#0b4222";
+    dark: "#006629";
+    mainAlt: "#00aa47";
+    main: "#3ac25e";
+    light: "#59d771";
+    lighter: "#c7f2cf";
+    lighter2: "#edfaf0";
+    lighter3: "#f4fbf7";
+} | {
+    darker: "#841c24";
+    dark: "#aa2228";
+    mainAlt: "#e9191d";
+    main: "#ff5153";
+    light: "#ff8888";
+    lighter: "#ffc2c2";
+    lighter2: "#ffd6d6";
+    lighter3: "#fbf4f4";
+} | {
+    darker: "#42214f";
+    dark: "#8f367f";
+    mainAlt: "#a33e90";
+    main: "#cf59bf";
+    light: "#e28dde";
+    lighter: "#e0bfd9";
+    lighter2: "#f5edf2";
+    lighter3: "#fbf4f9";
+} | {
+    darker: "#000000";
+    dark: "#000000";
+    mainAlt: "#1a2030";
+    main: "#1a2030";
+    light: "#8d8f97";
+};