@codacy/ui-components 0.60.8 → 0.60.9

package/lib/theme/{colors.d.ts → ColorSchemes/codacy.d.ts}

@@ -1,4 +1,109 @@
-declare const themeColors: {
+export declare const baseColors: {
+    'blue-900': string;
+    'blue-800': string;
+    'blue-700': string;
+    'blue-600': string;
+    'blue-500': string;
+    'blue-400': string;
+    'blue-300': string;
+    'blue-200': string;
+    'blue-100': string;
+    'blue-50': string;
+    'black-700': string;
+    'black-600': string;
+    'black-500': string;
+    'black-400': string;
+    'black-300': string;
+    'black-200': string;
+    'black-100': string;
+    'black-80': string;
+    'black-60': string;
+    'black-50': string;
+    white: string;
+    'purple-100': string;
+    'purple-200': string;
+    'purple-300': string;
+    'purple-400': string;
+    'purple-500': string;
+    'purple-600': string;
+    'purple-700': string;
+    'purple-800': string;
+    'purple-900': string;
+    'turquoise-700': string;
+    'turquoise-600': string;
+    'turquoise-500': string;
+    'turquoise-400': string;
+    'turquoise-300': string;
+    'turquoise-200': string;
+    'turquoise-100': string;
+    'turquoise-80': string;
+    'red-400': string;
+    'red-300': string;
+    'red-200': string;
+    'red-100': string;
+    'red-50': string;
+    'green-300': string;
+    'green-200': string;
+    'green-100': string;
+    'green-80': string;
+    'green-50': string;
+    'orange-200': string;
+    'orange-100': string;
+    'orange-50': string;
+};
+export declare const functionalColorsFx: (colors: {
+    white: string;
+    "blue-900": string;
+    "blue-800": string;
+    "blue-700": string;
+    "blue-600": string;
+    "blue-500": string;
+    "blue-400": string;
+    "blue-300": string;
+    "blue-200": string;
+    "blue-100": string;
+    "blue-50": string;
+    "black-700": string;
+    "black-600": string;
+    "black-500": string;
+    "black-400": string;
+    "black-300": string;
+    "black-200": string;
+    "black-100": string;
+    "black-80": string;
+    "black-60": string;
+    "black-50": string;
+    "purple-100": string;
+    "purple-200": string;
+    "purple-300": string;
+    "purple-400": string;
+    "purple-500": string;
+    "purple-600": string;
+    "purple-700": string;
+    "purple-800": string;
+    "purple-900": string;
+    "turquoise-700": string;
+    "turquoise-600": string;
+    "turquoise-500": string;
+    "turquoise-400": string;
+    "turquoise-300": string;
+    "turquoise-200": string;
+    "turquoise-100": string;
+    "turquoise-80": string;
+    "red-400": string;
+    "red-300": string;
+    "red-200": string;
+    "red-100": string;
+    "red-50": string;
+    "green-300": string;
+    "green-200": string;
+    "green-100": string;
+    "green-80": string;
+    "green-50": string;
+    "orange-200": string;
+    "orange-100": string;
+    "orange-50": string;
+}) => {
     'brand-primary': string;
     'accent-primary': string;
     'accent-primary-hover': string;
@@ -66,61 +171,8 @@ declare const themeColors: {
     'neutral-100': string;
     'neutral-50': string;
     'neutral-0': string;
-    'blue-900': string;
-    'blue-800': string;
-    'blue-700': string;
-    'blue-600': string;
-    'blue-500': string;
-    'blue-400': string;
-    'blue-300': string;
-    'blue-200': string;
-    'blue-100': string;
-    'blue-50': string;
-    /** @deprecated Use black-50 instead */
-    'blue-0': string;
-    'turquoise-700': string;
-    'turquoise-600': string;
-    'turquoise-500': string;
-    'turquoise-400': string;
-    'turquoise-300': string;
-    'turquoise-200': string;
-    'turquoise-100': string;
-    'turquoise-80': string;
-    'black-700': string;
-    'black-600': string;
-    'black-500': string;
-    'black-400': string;
-    'black-300': string;
-    'black-200': string;
-    'black-100': string;
-    'black-80': string;
-    'black-60': string;
-    'black-50': string;
-    white: string;
-    'purple-100': string;
-    'purple-200': string;
-    'purple-300': string;
-    'purple-400': string;
-    'purple-500': string;
-    'purple-600': string;
-    'purple-700': string;
-    'purple-800': string;
-    'purple-900': string;
-    'red-400': string;
-    'red-300': string;
-    'red-200': string;
-    'red-100': string;
-    'red-50': string;
-    'green-300': string;
-    'green-200': string;
-    'green-100': string;
-    'green-80': string;
-    'green-50': string;
-    'orange-200': string;
-    'orange-100': string;
-    'orange-50': string;
 };
-declare const pulseThemeColors: {
+declare const functionalColors: {
     'brand-primary': string;
     'accent-primary': string;
     'accent-primary-hover': string;
@@ -132,7 +184,19 @@ declare const pulseThemeColors: {
     'accent-subtle-focus': string;
     'accent-subtle-active': string;
     'accent-subtle-disabled': string;
+    'accent-success': string;
+    'accent-success-hover': string;
+    'accent-success-focus': string;
+    'accent-success-active': string;
+    'accent-success-disabled': string;
+    'accent-danger': string;
+    'accent-danger-hover': string;
+    'accent-danger-focus': string;
+    'accent-danger-active': string;
+    'accent-danger-disabled': string;
+    'accent-warning': string;
     'accent-info': string;
+    'accent-attention': string;
     'text-primary': string;
     'text-secondary': string;
     'text-complementary': string;
@@ -162,18 +226,6 @@ declare const pulseThemeColors: {
     'ui-navbar-text': string;
     'icon-primary': string;
     'icon-info': string;
-    'accent-success': string;
-    'accent-success-hover': string;
-    'accent-success-focus': string;
-    'accent-success-active': string;
-    'accent-success-disabled': string;
-    'accent-danger': string;
-    'accent-danger-hover': string;
-    'accent-danger-focus': string;
-    'accent-danger-active': string;
-    'accent-danger-disabled': string;
-    'accent-warning': string;
-    'accent-attention': string;
     'icon-success': string;
     'icon-warning': string;
     'icon-danger': string;
@@ -188,59 +240,12 @@ declare const pulseThemeColors: {
     'neutral-100': string;
     'neutral-50': string;
     'neutral-0': string;
-    'blue-900': string;
-    'blue-800': string;
-    'blue-700': string;
-    'blue-600': string;
-    'blue-500': string;
-    'blue-400': string;
-    'blue-300': string;
-    'blue-200': string;
-    'blue-100': string;
-    'blue-50': string;
-    /** @deprecated Use black-50 instead */
-    'blue-0': string;
-    'turquoise-700': string;
-    'turquoise-600': string;
-    'turquoise-500': string;
-    'turquoise-400': string;
-    'turquoise-300': string;
-    'turquoise-200': string;
-    'turquoise-100': string;
-    'turquoise-80': string;
-    'black-700': string;
-    'black-600': string;
-    'black-500': string;
-    'black-400': string;
-    'black-300': string;
-    'black-200': string;
-    'black-100': string;
-    'black-80': string;
-    'black-60': string;
-    'black-50': string;
-    white: string;
-    'purple-100': string;
-    'purple-200': string;
-    'purple-300': string;
-    'purple-400': string;
-    'purple-500': string;
-    'purple-600': string;
-    'purple-700': string;
-    'purple-800': string;
-    'purple-900': string;
-    'red-400': string;
-    'red-300': string;
-    'red-200': string;
-    'red-100': string;
-    'red-50': string;
-    'green-300': string;
-    'green-200': string;
-    'green-100': string;
-    'green-80': string;
-    'green-50': string;
-    'orange-200': string;
-    'orange-100': string;
-    'orange-50': string;
 };
-export declare type Color = keyof typeof themeColors;
-export { themeColors, pulseThemeColors };
+export declare type BaseColor = keyof typeof baseColors;
+export declare type FunctionalColor = keyof typeof functionalColors;
+export declare type Color = BaseColor | FunctionalColor;
+export declare type ColorScheme = {
+    [key in Color]: string;
+};
+export declare const codacyThemeColors: ColorScheme;
+export {};

package/lib/theme/ColorSchemes/codacy.js

@@ -0,0 +1,136 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+export var baseColors = {
+  // BLUE
+  'blue-900': '#0052CC',
+  'blue-800': '#2562EA',
+  'blue-700': '#286CFC',
+  'blue-600': '#3E7AFF',
+  'blue-500': '#6695FF',
+  'blue-400': '#94B4FF',
+  'blue-300': '#B9CDFD',
+  'blue-200': '#D0DDFE',
+  'blue-100': '#DDE6FF',
+  'blue-50': '#EBF1FF',
+  // BLACK
+  'black-700': '#172B4D',
+  'black-600': '#1D3660',
+  'black-500': '#354B71',
+  'black-400': '#4C6083',
+  'black-300': '#7E90B2',
+  'black-200': '#B6C6E0',
+  'black-100': '#C9D8EF',
+  'black-80': '#E5ECF5',
+  'black-60': '#F2F5FD',
+  'black-50': '#F5F8FE',
+  // WHITE
+  white: '#FFFFFF',
+  // PURPLE
+  'purple-100': '#FAF7FD',
+  'purple-200': '#DECDF4',
+  'purple-300': '#C3A3EB',
+  'purple-400': '#A77AE1',
+  'purple-500': '#8C50D8',
+  'purple-600': '#712DC8',
+  'purple-700': '#5A239E',
+  'purple-800': '#421A75',
+  'purple-900': '#2A114B',
+  // TURQUOISE
+  'turquoise-700': '#176267',
+  'turquoise-600': '#2E7D82',
+  'turquoise-500': '#2D8E94',
+  'turquoise-400': '#35ABB2',
+  'turquoise-300': '#72C8CF',
+  'turquoise-200': '#B6E4E7',
+  'turquoise-100': '#EAF6F6',
+  'turquoise-80': '#F7F8FA',
+  // REDS
+  'red-400': '#C92C22',
+  'red-300': '#E04440',
+  'red-200': '#EF5454',
+  'red-100': '#F58B8B',
+  'red-50': '#FFE6E6',
+  // GREENS
+  'green-300': '#1B7E37',
+  'green-200': '#25B14D',
+  'green-100': '#4CBE6C',
+  'green-80': '#92D8A6',
+  'green-50': '#E6F4EA',
+  // ORANGES
+  'orange-200': '#EE6002',
+  'orange-100': '#FFA101',
+  'orange-50': '#FFF2DF'
+};
+export var functionalColorsFx = function functionalColorsFx(colors) {
+  return {
+    'brand-primary': colors['blue-700'],
+    'accent-primary': colors['blue-700'],
+    'accent-primary-hover': colors['blue-800'],
+    'accent-primary-focus': colors['blue-800'],
+    'accent-primary-active': colors['blue-900'],
+    'accent-primary-disabled': colors['blue-400'],
+    'accent-subtle': colors['black-300'],
+    'accent-subtle-hover': colors['black-400'],
+    'accent-subtle-focus': colors['black-400'],
+    'accent-subtle-active': colors['black-500'],
+    'accent-subtle-disabled': colors['black-100'],
+    'accent-success': colors['green-100'],
+    'accent-success-hover': colors['green-200'],
+    'accent-success-focus': colors['green-200'],
+    'accent-success-active': colors['green-300'],
+    'accent-success-disabled': colors['green-80'],
+    'accent-danger': colors['red-200'],
+    'accent-danger-hover': colors['red-300'],
+    'accent-danger-focus': colors['red-300'],
+    'accent-danger-active': colors['red-400'],
+    'accent-danger-disabled': colors['red-100'],
+    'accent-warning': colors['orange-100'],
+    'accent-info': colors['blue-600'],
+    'accent-attention': colors['purple-400'],
+    'text-primary': colors['black-700'],
+    'text-secondary': colors['black-400'],
+    'text-complementary': colors['black-300'],
+    'text-invert': colors['white'],
+    'text-placeholder': colors['black-200'],
+    'text-info': colors['blue-800'],
+    'text-success': colors['green-300'],
+    'text-warning': colors['orange-200'],
+    'text-danger': colors['red-400'],
+    'text-attention': colors['purple-600'],
+    'background-primary': colors['white'],
+    'background-secondary': colors['black-50'],
+    'background-info': colors['blue-50'],
+    'background-success': colors['green-50'],
+    'background-warning': colors['orange-50'],
+    'background-danger': colors['red-50'],
+    'background-attention': colors['purple-100'],
+    'background-neutral': colors['black-80'],
+    'control-border': colors['blue-300'],
+    'control-background': colors['white'],
+    'control-active-background': colors['black-60'],
+    'control-active-border': colors['blue-700'],
+    'control-invalid-border': colors['red-200'],
+    'control-disabled': colors['blue-100'],
+    'ui-border': colors['black-80'],
+    'ui-navbar': colors['black-700'],
+    'ui-navbar-text': colors['black-100'],
+    'icon-primary': colors['black-200'],
+    'icon-info': colors['blue-700'],
+    'icon-success': colors['green-200'],
+    'icon-warning': colors['orange-100'],
+    'icon-danger': colors['red-200'],
+    // NEUTRAL
+    'neutral-900': colors['black-700'],
+    'neutral-800': colors['black-600'],
+    'neutral-700': colors['black-500'],
+    'neutral-600': colors['black-400'],
+    'neutral-500': colors['black-300'],
+    'neutral-400': colors['black-200'],
+    'neutral-300': colors['black-100'],
+    'neutral-200': colors['black-80'],
+    'neutral-100': colors['black-60'],
+    'neutral-50': colors['black-50'],
+    'neutral-0': colors['white']
+  };
+};
+var functionalColors = functionalColorsFx(baseColors);
+export var codacyThemeColors = _objectSpread(_objectSpread({}, baseColors), functionalColors);

package/lib/theme/ColorSchemes/pulse.d.ts

@@ -0,0 +1,2 @@
+import { ColorScheme } from './codacy';
+export declare const pulseThemeColors: ColorScheme;

package/lib/theme/ColorSchemes/pulse.js

@@ -0,0 +1,54 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import { baseColors as codacyBaseColors, functionalColorsFx } from './codacy';
+
+var baseColors = _objectSpread({}, codacyBaseColors);
+
+var functionalColors = _objectSpread(_objectSpread({}, functionalColorsFx(baseColors)), {}, {
+  // UPDATE HERE FUNCTIONAL COLORS
+  'brand-primary': baseColors['turquoise-500'],
+  'accent-primary': baseColors['turquoise-500'],
+  'accent-primary-hover': baseColors['turquoise-600'],
+  'accent-primary-focus': baseColors['turquoise-600'],
+  'accent-primary-active': baseColors['turquoise-700'],
+  'accent-primary-disabled': baseColors['turquoise-200'],
+  // 'accent-subtle': baseColors['black-300'],
+  // 'accent-subtle-hover': baseColors['black-400'],
+  // 'accent-subtle-focus': baseColors['black-400'],
+  // 'accent-subtle-active': baseColors['black-500'],
+  // 'accent-subtle-disabled': baseColors['black-100'],
+  'accent-info': baseColors['turquoise-400'],
+  // 'text-primary': baseColors['black-700'],
+  // 'text-secondary': baseColors['black-400'],
+  // 'text-complementary': baseColors['black-300'],
+  // 'text-invert': baseColors['white'],
+  // 'text-placeholder': baseColors['black-200'],
+  'text-info': baseColors['turquoise-600'],
+  // 'text-success': baseColors['green-300'],
+  // 'text-warning': baseColors['orange-200'],
+  // 'text-danger': baseColors['red-400'],
+  // 'text-attention': baseColors['purple-600'],
+  // 'background-primary': baseColors['white'],
+  // 'background-secondary': baseColors['black-50'],
+  'background-info': baseColors['turquoise-80'],
+  // 'background-success': baseColors['green-50'],
+  // 'background-warning': baseColors['orange-50'],
+  // 'background-danger': baseColors['red-50'],
+  // 'background-attention': baseColors['purple-100'],
+  // 'background-neutral': baseColors['black-80'],
+  'control-border': baseColors['black-200'],
+  //'control-background': baseColors['white'],
+  'control-active-background': baseColors['white'],
+  'control-active-border': baseColors['turquoise-400'],
+  'control-invalid-border': baseColors['red-300'],
+  'control-disabled': baseColors['black-80'],
+  //'ui-border': baseColors['black-80'],
+  'ui-navbar': baseColors['turquoise-80'],
+  'ui-navbar-text': baseColors['black-500'],
+  'icon-primary': baseColors['black-300'],
+  'icon-info': baseColors['turquoise-400'] // 'icon-success': baseColors['green-200'],
+  // 'icon-warning': baseColors['orange-100'],
+  // 'icon-danger': baseColors['red-200'],
+
+});
+
+export var pulseThemeColors = _objectSpread(_objectSpread({}, baseColors), functionalColors);

package/lib/theme/index.d.ts

@@ -1,2 +1,3 @@
-export * from './colors';
+export * from './ColorSchemes/codacy';
+export * from './ColorSchemes/pulse';
 export * from './theme';

package/lib/theme/index.js

@@ -1,2 +1,3 @@
-export * from './colors';
+export * from './ColorSchemes/codacy';
+export * from './ColorSchemes/pulse';
 export * from './theme';

package/lib/theme/theme.d.ts

@@ -1,30 +1,35 @@
-import { Color } from './colors';
+import { Color, ColorScheme } from './';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type Speed = 'fast' | 'normal' | 'slow';
-export declare type Fonts = 'normal';
+export declare type Fonts = 'normal' | 'display' | 'monospace';
+export declare type FontWeights = 'light' | 'normal' | 'bold';
 export declare type CodacyTheme = {
-    colors: Record<Color, string>;
     gridSize: number;
     remScale: number;
-    borderSize: string[];
-    borderRadius: string[];
-    baseLineHeight: string;
-    fonts: {
-        [key in Fonts]: string;
-    };
-    fontSizes: string[];
     space: string[];
-    controlSize: {
-        [key in Size]: string;
-    };
+    colors: Record<Color, string>;
+    fonts: Record<Fonts, string>;
+    fontSizes: string[];
+    fontWeights: string[] & Record<FontWeights, string>;
+    lineHeights: string[];
+    letterSpacings: string[];
+    borders: string[];
+    borderWidths: string[];
+    radii: string[];
     shadows: string[];
-    transitions: {
-        [key in Speed]: string;
-    };
+    transitions: string[] & Record<Speed, string>;
     breakpoints: string[];
+    controlSize: Record<Size, string>;
+    /** @deprecated Use borders or borderWidths instead */
+    borderSize: string[];
+    /** @deprecated Use radii instead */
+    borderRadius: string[];
+    /** @deprecated Use lineHeights instead */
+    baseLineHeight: string;
 };
+export declare const transition: (properties: string[], speed?: Speed, refTheme?: Pick<CodacyTheme, 'transitions'>) => string;
+export declare const generateTheme: (scheme: ColorScheme) => CodacyTheme;
 export declare const codacyTheme: CodacyTheme;
 export declare const pulseTheme: CodacyTheme;
 /** @deprecated Use codacyTheme instead */
 export declare const theme: CodacyTheme;
-export declare const transition: (properties: string[], speed?: Speed) => string;