@codacy/ui-components 0.65.31 → 0.65.33

package/lib/theme/ColorSchemes/codacy.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.functionalColorsFx = exports.codacyThemeColors = exports.baseColors = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var baseColors = exports.baseColors = {
-  // BLUE
+  // BLUE - Quality
   'blue-99': '#F0F6FF',
   'blue-95': '#E5EFFF',
   'blue-90': '#DBE9FF',
@@ -19,55 +19,45 @@ var baseColors = exports.baseColors = {
   'blue-30': '#004AC2',
   'blue-20': '#004AC2',
   'blue-10': '#00174A',
-  // 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',
+  // ORANGE - Security
+  'orange-99': '#FFFCFA',
+  'orange-95': '#FFF2E6',
+  'orange-90': '#FEE5CD',
+  'orange-80': '#FECA9A',
+  'orange-70': '#FDB068',
+  'orange-60': '#FD9535',
+  'orange-50': '#FD881C',
+  'orange-40': '#F47603',
+  'orange-30': '#C56002',
+  'orange-20': '#653101',
+  'orange-10': '#321901',
+  // PURPLE - Codacy
+  'purple-99': '#FCFBFE',
+  'purple-95': '#F1EAFA',
+  'purple-90': '#E4D5F6',
+  'purple-80': '#C8ACEC',
+  'purple-70': '#AD82E3',
+  'purple-60': '#9F6DDE',
+  'purple-50': '#8443D5',
+  'purple-40': '#712DC8',
+  'purple-30': '#532192',
+  'purple-20': '#421A75',
+  'purple-10': '#18092A',
+  // GREY - Neutral
+  'grey-99': '#F4F6FB',
+  'grey-95': '#E8EDF7',
+  'grey-90': '#DAE2F1',
+  'grey-80': '#C8D2E4',
+  'grey-70': '#B9C5DA',
+  'grey-60': '#99A7C2',
+  'grey-50': '#798CAF',
+  'grey-40': '#5C7199',
+  'grey-30': '#415986',
+  'grey-20': '#2C4168',
+  'grey-10': '#182949',
   // 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',
-  // MAGENTA
-  'magenta-99': '#fef2fc',
-  'magenta-95': '#fcc8e9',
-  'magenta-90': '#f99dd7',
-  'magenta-80': '#ed4aa5',
-  'magenta-70': '#d5348e',
-  'magenta-60': '#b72974',
-  'magenta-50': '#97215b',
-  'magenta-40': '#731b46',
-  'magenta-30': '#4e122e',
-  'magenta-20': '#2a0b19',
-  'magenta-10': '#17060d',
-  // ORANGE
-  'orange-200': '#EE6002',
-  'orange-100': '#FFA101',
-  'orange-50': '#FFF2DF',
-  // 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',
-  // RED
+  // RED - Error
   'red-99': '#FFF6F5',
   'red-95': '#FFEDEB',
   'red-90': '#FFDAD6',
@@ -79,13 +69,19 @@ var baseColors = exports.baseColors = {
   'red-30': '#960311',
   'red-20': '#680008',
   'red-10': '#410003',
-  // GREEN
-  'green-300': '#1B7E37',
-  'green-200': '#25B14D',
-  'green-100': '#4CBE6C',
-  'green-80': '#92D8A6',
-  'green-50': '#E6F4EA',
-  // YELLOW
+  // GREEN - Success
+  'green-99': '#F7FCF9',
+  'green-95': '#ECF9EF',
+  'green-90': '#D9F2E0',
+  'green-80': '#B3E5C1',
+  'green-70': '#8CD9A2',
+  'green-60': '#66CC83',
+  'green-50': '#40BF64',
+  'green-40': '#339950',
+  'green-30': '#26733C',
+  'green-20': '#1A4C28',
+  'green-10': '#0D2614',
+  // YELLOW - Warning
   'yellow-99': '#FFFDFA',
   'yellow-95': '#FFF6E5',
   'yellow-90': '#FFECCC',
@@ -100,80 +96,115 @@ var baseColors = exports.baseColors = {
 };
 var functionalColorsFx = exports.functionalColorsFx = function functionalColorsFx(colors) {
   return {
+    // Brand
     'brand-primary': colors['blue-40'],
-    'accent-primary': colors['blue-40'],
-    'accent-primary-hover': colors['blue-40'],
-    'accent-primary-focus': colors['blue-40'],
-    'accent-primary-active': colors['blue-30'],
-    'accent-primary-disabled': colors['blue-70'],
-    '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-200'],
-    'accent-success-hover': colors['green-300'],
-    'accent-success-focus': colors['green-300'],
-    'accent-success-active': colors['green-300'],
-    'accent-success-disabled': colors['green-80'],
-    'accent-danger': colors['red-40'],
-    'accent-danger-hover': colors['red-30'],
-    'accent-danger-focus': colors['red-30'],
-    'accent-danger-active': colors['red-20'],
-    'accent-danger-disabled': colors['red-80'],
-    'accent-warning': colors['yellow-40'],
-    'accent-info': colors['blue-40'],
-    '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-40'],
-    'text-success': colors['green-300'],
-    'text-warning': colors['yellow-40'],
+    'brand-hover': colors['blue-30'],
+    'brand-pressed': colors['blue-20'],
+    'brand-disabled': colors['blue-70'],
+    'brand-focus': colors['blue-90'],
+    'brand-inverted': colors['white'],
+    'brand-subtle': colors['blue-99'],
+    // Subtle
+    'subtle-primary': colors['grey-50'],
+    'subtle-hover': colors['grey-30'],
+    'subtle-pressed': colors['grey-10'],
+    'subtle-disabled': colors['grey-70'],
+    'subtle-inverted': colors['white'],
+    // Danger
+    'danger-primary': colors['red-40'],
+    'danger-hover': colors['red-30'],
+    'danger-pressed': colors['red-20'],
+    'danger-disabled': colors['red-80'],
+    'danger-focus': colors['red-90'],
+    'danger-subtle': colors['red-99'],
+    // Success
+    'success-primary': colors['green-40'],
+    'success-hover': colors['green-30'],
+    'success-pressed': colors['green-20'],
+    'success-disabled': colors['green-80'],
+    // 'success-focus': colors['green-90'],
+    // 'success-subtle': colors['green-99'],
+
+    // Warning
+    'warning-primary': colors['yellow-40'],
+    'warning-hover': colors['yellow-30'],
+    'warning-pressed': colors['yellow-20'],
+    'warning-disabled': colors['yellow-80'],
+    // 'warning-focus': colors['yellow-90'],
+    // 'warning-subtle': colors['yellow-99'],
+
+    // Info
+    'info-primary': colors['blue-40'],
+    'info-hover': colors['blue-30'],
+    'info-pressed': colors['blue-20'],
+    'info-disabled': colors['blue-80'],
+    'info-inverted': colors['white'],
+    // 'info-focus': colors['blue-90'],
+    // 'info-subtle': colors['blue-99'],
+
+    // Attention
+    'attention-primary': colors['purple-40'],
+    'attention-hover': colors['purple-30'],
+    'attention-pressed': colors['purple-20'],
+    'attention-disabled': colors['purple-80'],
+    // 'attention-focus': colors['purple-90'],
+    // 'attention-subtle': colors['purple-99'],
+
+    // Text
+    'text-primary': colors['grey-10'],
+    'text-secondary': colors['grey-30'],
+    'text-tertiary': colors['grey-50'],
+    'text-inverted': colors['white'],
+    'text-disabled': colors['grey-70'],
+    // Text - Semantic
     'text-danger': colors['red-40'],
-    'text-attention': colors['purple-600'],
+    'text-success': colors['green-40'],
+    'text-warning': colors['yellow-40'],
+    'text-info': colors['blue-40'],
+    'text-attention': colors['purple-40'],
+    // Background
     'background-primary': colors['white'],
-    'background-secondary': colors['black-50'],
-    'background-info': colors['blue-95'],
-    'background-success': colors['green-50'],
-    'background-warning': colors['yellow-95'],
+    'background-secondary': colors['grey-99'],
+    // Background - Semantic
+    'background-brand': colors['blue-95'],
+    'background-subtle': colors['grey-95'],
     'background-danger': colors['red-95'],
-    'background-attention': colors['purple-100'],
-    'background-neutral': colors['black-80'],
-    'control-border': colors['blue-70'],
-    'control-background': colors['white'],
-    'control-active-background': colors['black-60'],
-    'control-active-border': colors['blue-40'],
-    'control-invalid-border': colors['red-40'],
-    'control-disabled': colors['black-200'],
-    'ui-border': colors['black-80'],
-    'ui-navbar': colors['black-700'],
-    'ui-navbar-text': colors['black-100'],
-    'border-brand-primary': colors['blue-70'],
-    'border-warning': colors['yellow-40'],
+    'background-success': colors['green-95'],
+    'background-warning': colors['yellow-95'],
+    'background-info': colors['blue-95'],
+    'background-attention': colors['purple-95'],
+    // Border
+    'border-primary': colors['grey-95'],
     'border-danger': colors['red-40'],
-    'border-attention': colors['purple-400'],
-    'border-success': colors['green-100'],
-    'icon-primary': colors['black-200'],
-    'icon-info': colors['blue-40'],
-    'icon-success': colors['green-200'],
-    'icon-warning': colors['yellow-40'],
+    'border-success': colors['green-40'],
+    'border-info': colors['blue-40'],
+    'border-warning': colors['yellow-40'],
+    'border-attention': colors['purple-70'],
+    // Border - Brand
+    'border-brand-primary': colors['blue-70'],
+    'border-brand-hover': colors['blue-40'],
+    'border-brand-pressed': colors['blue-30'],
+    'border-brand-disabled': colors['grey-70'],
+    'navigation-top-primary': colors['grey-10'],
+    // DS UNMATCHED
+    'navigation-text': colors['grey-80'],
+    // DS UNMATCHED
+    'navigation-text-pressed': colors['grey-80'],
+    // DS UNMATCHED
+
+    'icon-enabled': colors['grey-50'],
+    'icon-hover': colors['grey-30'],
+    'icon-disabled': colors['grey-70'],
+    // NOTE TO FELIPE usage?
+    'icon-brand-enabled': colors['blue-40'],
+    'icon-brand-hover': colors['blue-30'],
+    'icon-brand-disabled': colors['blue-70'],
     'icon-danger': colors['red-40'],
-    'icon-attention': colors['purple-500'],
-    // 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']
+    'icon-success': colors['green-40'],
+    'icon-warning': colors['yellow-40'],
+    'icon-info': colors['blue-40'],
+    'icon-attention': colors['purple-50'],
+    'icon-inverted': colors['white']
   };
 };
 var functionalColors = functionalColorsFx(baseColors);

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

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

package/lib/theme/ColorSchemes/security.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.securityThemeColors = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _codacy = require("./codacy");
+var baseColors = (0, _objectSpread2["default"])({}, _codacy.baseColors);
+var functionalColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _codacy.functionalColorsFx)(baseColors)), {}, {
+  // UPDATE HERE FUNCTIONAL COLORS
+
+  'brand-primary': baseColors['orange-40'],
+  'brand-hover': baseColors['orange-30'],
+  'brand-pressed': baseColors['orange-20'],
+  'brand-disabled': baseColors['orange-70'],
+  'brand-focus': baseColors['orange-90'],
+  // 'brand-inverted': baseColors['white'],
+  'background-brand': baseColors['orange-95'],
+  'brand-subtle': baseColors['orange-99'],
+  // Border
+  'border-brand-primary': baseColors['orange-70'],
+  'border-brand-hover': baseColors['orange-40'],
+  'border-brand-pressed': baseColors['orange-30']
+  // 'border-brand-disabled': baseColors['grey-70'],
+});
+var securityThemeColors = exports.securityThemeColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseColors), functionalColors);

package/lib/theme/index.d.ts

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

package/lib/theme/index.js

@@ -14,14 +14,14 @@ Object.keys(_codacy).forEach(function (key) {
     }
   });
 });
-var _pulse = require("./ColorSchemes/pulse");
-Object.keys(_pulse).forEach(function (key) {
+var _security = require("./ColorSchemes/security");
+Object.keys(_security).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _pulse[key]) return;
+  if (key in exports && exports[key] === _security[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _pulse[key];
+      return _security[key];
     }
   });
 });

package/lib/theme/theme.d.ts

@@ -32,6 +32,6 @@ export declare type CodacyTheme = {
 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;
+export declare const securityTheme: CodacyTheme;
 /** @deprecated Use codacyTheme instead */
 export declare const theme: CodacyTheme;

package/lib/theme/theme.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.transition = exports.theme = exports.pulseTheme = exports.generateTheme = exports.codacyTheme = void 0;
+exports.transition = exports.theme = exports.securityTheme = exports.generateTheme = exports.codacyTheme = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _ = require("./");
 var _polished = require("polished");
@@ -77,7 +77,7 @@ var sizes = [/** size-00 */"".concat(gridSize * 9, "rem"), // 72px
 ];
 var radii = ['0.125rem' /* 2px */, '0.25rem' /* 4px */, '0.5rem' /* 8px */];
 var shadowsFx = function shadowsFx(scheme) {
-  return ["0 0.0625rem 0.125rem ".concat((0, _polished.rgba)(scheme['neutral-600'], 0.2)), "0 0.125rem 0.375rem ".concat((0, _polished.rgba)(scheme['neutral-600'], 0.3)), "0 0.125rem 0.375rem ".concat((0, _polished.rgba)(scheme['neutral-600'], 0.2), ", 0 0.125rem 0.5rem ").concat((0, _polished.rgba)(scheme['neutral-600'], 0.1)), "0 0.25rem 0.5rem ".concat((0, _polished.rgba)(scheme['neutral-600'], 0.2), ", 0 0.25rem 0.75rem ").concat((0, _polished.rgba)(scheme['neutral-600'], 0.1)), "0 0.75rem 1rem ".concat((0, _polished.rgba)(scheme['neutral-600'], 0.2), ", 0 0.75rem 1.5rem ").concat((0, _polished.rgba)(scheme['neutral-600'], 0.1))];
+  return ["0 0.0625rem 0.125rem ".concat((0, _polished.rgba)(scheme['grey-30'], 0.2)), "0 0.125rem 0.375rem ".concat((0, _polished.rgba)(scheme['grey-30'], 0.3)), "0 0.125rem 0.375rem ".concat((0, _polished.rgba)(scheme['grey-30'], 0.2), ", 0 0.125rem 0.5rem ").concat((0, _polished.rgba)(scheme['grey-30'], 0.1)), "0 0.25rem 0.5rem ".concat((0, _polished.rgba)(scheme['grey-30'], 0.2), ", 0 0.25rem 0.75rem ").concat((0, _polished.rgba)(scheme['grey-30'], 0.1)), "0 0.75rem 1rem ".concat((0, _polished.rgba)(scheme['grey-30'], 0.2), ", 0 0.75rem 1.5rem ").concat((0, _polished.rgba)(scheme['grey-30'], 0.1))];
 };
 var transitions = ['0.2s ease-in-out', '0.35s ease-in-out', '0.75s ease-in-out'];
 var breakpoints = ['85.1rem' /* > 1360px */, '90.1rem' /* > 1440px */, '105.1rem' /* > 1680px */];
@@ -143,7 +143,7 @@ var generateTheme = exports.generateTheme = function generateTheme(scheme) {
   return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseTheme), {}, {
     colors: scheme,
     borders: borderWidths.map(function (w) {
-      return "solid ".concat(w, " ").concat(scheme['ui-border']);
+      return "solid ".concat(w, " ").concat(scheme['border-primary']);
     }),
     shadows: shadowsFx(scheme)
   });
@@ -151,7 +151,7 @@ var generateTheme = exports.generateTheme = function generateTheme(scheme) {
 
 // Themes
 var codacyTheme = exports.codacyTheme = generateTheme(_.codacyThemeColors);
-var pulseTheme = exports.pulseTheme = generateTheme(_.pulseThemeColors);
+var securityTheme = exports.securityTheme = generateTheme(_.securityThemeColors);
 
 /** @deprecated Use codacyTheme instead */
 var theme = exports.theme = codacyTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.65.31",
+  "version": "0.65.33",
   "description": "",
   "license": "ISC",
   "author": "",

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

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

package/lib/theme/ColorSchemes/pulse.js

@@ -1,62 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.pulseThemeColors = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-var _codacy = require("./codacy");
-var baseColors = (0, _objectSpread2["default"])({}, _codacy.baseColors);
-var functionalColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _codacy.functionalColorsFx)(baseColors)), {}, {
-  // UPDATE HERE FUNCTIONAL COLORS
-
-  'brand-primary': baseColors['turquoise-500'],
-  'accent-primary': baseColors['turquoise-400'],
-  'accent-primary-hover': baseColors['turquoise-500'],
-  'accent-primary-focus': baseColors['turquoise-500'],
-  '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-40'],
-  // '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-90'],
-  // '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-90'],
-  '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-40'],
-});
-var pulseThemeColors = exports.pulseThemeColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseColors), functionalColors);