@televet/kibble-ui 1.0.14-beta.0 → 1.0.14-beta.2

package/build/theme/tokens/colors.d.ts

@@ -1,3 +1,5 @@
+import { IconColor } from '../../components/Icon/icon.types';
+import { ColorMode } from '@chakra-ui/react';
 export declare const baseColors: IBaseColors;
 export declare const semanticTokens: ISemanticTokens;
 interface IBaseColors {
@@ -5,126 +7,16 @@ interface IBaseColors {
     current: string;
     black: string;
     white: string;
-    whiteAlpha: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    blackAlpha: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    gray: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    red: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    orange: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    yellow: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    green: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    teal: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    blue: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
-    comet: {
-        50: string;
-        100: string;
-        200: string;
-        300: string;
-        400: string;
-        500: string;
-        600: string;
-        700: string;
-        800: string;
-        900: string;
-    };
+    whiteAlpha: ColorValueMap;
+    blackAlpha: ColorValueMap;
+    gray: ColorValueMap;
+    red: ColorValueMap;
+    orange: ColorValueMap;
+    yellow: ColorValueMap;
+    green: ColorValueMap;
+    teal: ColorValueMap;
+    blue: ColorValueMap;
+    comet: ColorValueMap;
 }
 export interface ISemanticTokens {
     text: {
@@ -151,16 +43,7 @@ export interface ISemanticTokens {
         warning: string;
         success: string;
     };
-    icon: {
-        onLight: string;
-        onLightSubtle: string;
-        onDark: string;
-        inactive: string;
-        active: string;
-        success: string;
-        warning: string;
-        error: string;
-    };
+    icon: AdaptiveColorMap<IconColor>;
     border: {
         default: string;
         dark: string;
@@ -189,6 +72,11 @@ export interface ISemanticTokens {
         error: string;
     };
 }
+export declare type ColorValue = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+export declare type ColorValueMap = Record<ColorValue, string>;
+export declare type AdaptiveColor = Record<ColorMode, string>;
+export declare type AdaptiveColorMap<T extends keyof any> = Record<ColorMode, Record<T, string>>;
+export declare type AdaptiveColorConfig<K extends keyof any, T extends keyof any> = Record<K, AdaptiveColorMap<T>>;
 export declare type TColors = IBaseColors & ISemanticTokens;
 declare const colors: TColors;
 export default colors;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@televet/kibble-ui",
-  "version": "1.0.14-beta.0",
+  "version": "1.0.14-beta.2",
   "description": "Kibble Design System by Televet",
   "author": "TeleVet",
   "main": "build/index.js",
@@ -40,11 +40,8 @@
     "@babel/preset-env": "^7.15.0",
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "^7.15.3",
-    "@chakra-ui/icons": "^1.0.14",
     "@chakra-ui/react": "^1.6.5",
     "@chakra-ui/storybook-addon": "^1.0.3",
-    "@chakra-ui/theme-tools": "^1.3.6",
-    "@emotion/react": "^11.4.0",
     "@emotion/styled": "^11.3.0",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^20.0.0",
@@ -115,18 +112,6 @@
     "stylelint-order": "^4.1.0",
     "typescript": "^4.6.2"
   },
-  "peerDependencies": {
-    "@chakra-ui/icons": ">=1.0.14",
-    "@chakra-ui/react": ">=1.6.5",
-    "@chakra-ui/theme-tools": "^1.3.6",
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "prop-types": ">=15.0.0",
-    "react": ">=16.13.1",
-    "react-dom": ">=16.13.1",
-    "react-hook-form": ">=5.7.0",
-    "styled-components": ">=5.0.0"
-  },
   "dependencies": {
     "@televet/kibble-icons": "^0.1.4"
   }

package/build/components/Banner/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const Banner: () => JSX.Element;
-export default Banner;

package/build/components/Input/index.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-declare const Input: () => JSX.Element;
-export default Input;