@televet/kibble-ui 0.1.0-beta.10 → 0.1.0-beta.11

package/build/index.js

@@ -36,7 +36,7 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
-var pallette = {
+var baseColors = {
     comet: {
         50: '#F0F1F5',
         100: '#D5D7E2',
@@ -53,16 +53,16 @@ var pallette = {
         100: '#A4DAE4',
     },
     teal: {
-        50: '#EBF7F9',
-        100: '#C8E9EF',
-        200: '#A4DAE4',
-        300: '#81CCDA',
-        400: '#5DBDD0',
+        50: '#F7FAFC',
+        100: '#EBF9FB',
+        200: '#DCF6FB',
+        300: '#AFE1EC',
+        400: '#78CBDC',
         500: '#39ADC3',
-        600: '#2E8C9E',
-        700: '#236976',
-        800: '#17464F',
-        900: '#0C2327',
+        600: '#3CA0B4',
+        700: '#2E8C9E',
+        800: '#236976',
+        900: '#17464F',
     },
     blue: {
         50: '#E7E9FE',
@@ -82,7 +82,7 @@ var pallette = {
         200: '#FEB2B2',
         300: '#FC8181',
         400: '#F56565',
-        500: '#E53E3E',
+        500: '#E01F1F',
         600: '#C53030',
         700: '#9B2C2C',
         800: '#822727',
@@ -119,7 +119,7 @@ var pallette = {
         300: '#68D391',
         400: '#48BB78',
         500: '#38A169',
-        600: '#2F855A',
+        600: '#25855A',
         700: '#276749',
         800: '#22543D',
         900: '#1C4532',
@@ -167,66 +167,68 @@ var pallette = {
 };
 var semanticTokens = {
     text: {
-        onLight: pallette.comet[700],
-        onLightSubtle: pallette.gray[800],
-        onDark: pallette.white,
-        headline: pallette.blue[700],
+        onLight: baseColors.comet[700],
+        linkOnLight: baseColors.teal[600],
+        onLightSubtle: baseColors.gray[800],
+        onDark: baseColors.white,
+        headline: baseColors.blue[800],
+        placeholder: baseColors.blackAlpha[500],
+        success: baseColors.green[600],
+        warning: baseColors.yellow[600],
+        error: baseColors.red[600],
     },
     background: {
-        light: pallette.gray[300],
-        gray: pallette.gray[50],
-        info: pallette.teal[50],
-        error: pallette.red[50],
-        warning: pallette.orange[50],
-        success: pallette.blue[50],
-    },
-    border: {
-        default: pallette.gray[300],
-        dark: pallette.comet[700],
-        info: pallette.teal[500],
-        error: pallette.red[500],
-        warning: pallette.yellow[500],
-        success: pallette.blue[200],
-    },
-    button: {
-        primaryDefault: pallette.teal[600],
-        primaryHover: pallette.teal[700],
-        primaryActive: pallette.teal[800],
-        secondaryDefault: pallette.gray[300],
-        secondaryHover: pallette.gray[50],
-        secondaryActive: pallette.gray[100],
-        tertiaryDefault: pallette.gray[100],
-        tertiaryHover: pallette.gray[200],
-        tertiaryActive: pallette.gray[200],
-        ghostDefault: pallette.white,
-        ghostHover: pallette.teal[50],
-        ghostActive: pallette.teal[100],
-    },
-    link: {
-        onLight: pallette.teal[600],
+        light: baseColors.gray[300],
+        grayLight: baseColors.gray[50],
+        grayDark: baseColors.gray[300],
+        tealLight: baseColors.teal[50],
+        dark: baseColors.blue[800],
+        table: baseColors.comet[50],
+        overlay: baseColors.blackAlpha[300],
+        info: baseColors.teal[50],
+        error: baseColors.red[50],
+        warning: baseColors.orange[50],
+        success: baseColors.green[50],
     },
     icon: {
-        onLight: pallette.comet[700],
-        onDark: pallette.gray[300],
-        active: pallette.teal[600],
-        success: pallette.blue[400],
-        warning: pallette.yellow[500],
-        error: pallette.red[500],
+        onLight: baseColors.comet[700],
+        onLightSubtle: baseColors.gray[800],
+        onDark: baseColors.white,
+        inactive: baseColors.gray[700],
+        active: baseColors.teal[600],
+        success: baseColors.green[600],
+        warning: baseColors.yellow[600],
+        error: baseColors.red[600],
+    },
+    border: {
+        default: baseColors.gray[200],
+        dark: baseColors.comet[700],
+        focus: baseColors.teal[600],
+        info: baseColors.teal[600],
+        error: baseColors.red[500],
+        warning: baseColors.yellow[500],
+        success: baseColors.green[400],
     },
     divider: {
-        onLight: pallette.gray[300],
+        onLight: baseColors.gray[100],
     },
     status: {
-        open: pallette.blue[300],
-        confirmed: pallette.teal[500],
-        success: pallette.green[400],
-        warning: pallette.yellow[400],
-        action: pallette.orange[400],
-        negative: pallette.red[300],
-        error: pallette.red[500],
+        open: baseColors.blue[300],
+        confirmed: baseColors.teal[500],
+        success: baseColors.green[400],
+        warning: baseColors.yellow[400],
+        action: baseColors.orange[400],
+        negative: baseColors.red[300],
+        error: baseColors.red[500],
+        archived: baseColors.gray[800],
+        closed: baseColors.gray[900],
+    },
+    brand: {
+        teal: baseColors.teal[500],
+        red: baseColors.red[500],
     },
 };
-var colors = __assign(__assign({}, pallette), semanticTokens);
+var colors = __assign(__assign({}, baseColors), semanticTokens);
 
 var blur = {
     none: 0,
@@ -2593,6 +2595,7 @@ var zIndices = {
     tooltip: 1800,
 };
 
+// Needed to support televet-ui styled components theme
 var palette = {
     primaryLightest: 'hsl(190deg 48% 70%)',
     primaryLight: 'hsl(190deg 48% 54%)',
@@ -2632,17 +2635,18 @@ var theme = react.extendTheme({
     transition: transition,
     zIndices: zIndices,
     palette: palette,
+    semanticTokens: semanticTokens,
 });
 
 var KibbleThemeProvider = function (_a) {
     var children = _a.children;
-    return (React__default["default"].createElement(styledComponents.ThemeProvider, { theme: theme },
-        React__default["default"].createElement(react.ThemeProvider, { theme: theme }, children)));
+    return (React__default["default"].createElement(react.ThemeProvider, { theme: theme },
+        React__default["default"].createElement(styledComponents.ThemeProvider, { theme: theme }, children)));
 };
 
 var Button = function (_a) {
     var children = _a.children;
-    return React__default["default"].createElement(react.Button, null, children);
+    return (React__default["default"].createElement(react.Button, { colorScheme: 'teal', variant: 'outline' }, children));
 };
 
 exports.Button = Button;