@codacy/ui-components 0.65.78 → 0.65.79

package/lib/theme/ColorSchemes/dark.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.darkCodacyThemeColors = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _ = require("..");
+// Important notes about the current dark mode colors:
+//
+// - To avoid performing a lot of changes in SPA, currently there's a map between colors.
+// For example, if a color called blue-90 in light mode is a very light blue, in dark mode it is a very dark blue. The same name is used,
+// but the color code is different.
+// - This means that in the future we should only use the semantic names, such as "text-danger", and not the base colors (red-40), as the number
+// associated will not reflect the real lightness of the color.
+// - Only then, we can come back to this code and change the base colors name to have the correct lightness associated.
+
+var generateBaseColors = function generateBaseColors(color) {
+  var colors = {};
+  colors["".concat(color.name, "-99")] = (0, _.hslToHex)(color.hue, color.saturation, 10);
+  colors["".concat(color.name, "-95")] = (0, _.hslToHex)(color.hue, color.saturation, 20);
+  colors["".concat(color.name, "-90")] = (0, _.hslToHex)(color.hue, color.saturation, 20);
+
+  //light to dark lightness map
+  var lightToDarkMap = {
+    80: 30,
+    70: 30,
+    60: 40,
+    50: 50,
+    40: 60,
+    30: 70,
+    20: 90,
+    10: 93
+  };
+  for (var i = 80; i >= 10; i -= 10) {
+    colors["".concat(color.name, "-").concat(i)] = (0, _.hslToHex)(color.hue, color.saturation, color.lightnessStart + lightToDarkMap[i]);
+  }
+  return colors;
+};
+var baseColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, generateBaseColors({
+  name: 'turquoise',
+  hue: 183,
+  saturation: 50,
+  lightnessStart: 0
+})), generateBaseColors({
+  name: 'blue',
+  hue: 217,
+  saturation: 100,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'magenta',
+  hue: 310,
+  saturation: 63,
+  lightnessStart: 2
+})), generateBaseColors({
+  name: 'purple',
+  hue: 266,
+  saturation: 64,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'orange',
+  hue: 29,
+  saturation: 98,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'grey',
+  hue: 219,
+  saturation: 25,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'red',
+  hue: 359,
+  saturation: 67,
+  lightnessStart: 7
+})), generateBaseColors({
+  name: 'green',
+  hue: 137,
+  saturation: 50,
+  lightnessStart: 0
+})), generateBaseColors({
+  name: 'yellow',
+  hue: 38,
+  saturation: 100,
+  lightnessStart: 7
+})), {}, {
+  white: '#000000' //this is in fact black
+});
+var functionalColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _.functionalColorsFx)(baseColors)), (0, _.semanticFunctionalColorsFx)('text', 60)), (0, _.semanticFunctionalColorsFx)('background', 20)), (0, _.semanticFunctionalColorsFx)('border', 60)), (0, _.semanticFunctionalColorsFx)('icon', 60));
+var darkCodacyThemeColors = exports.darkCodacyThemeColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, baseColors), functionalColors);

package/lib/theme/ColorSchemes/security.js

@@ -8,7 +8,7 @@ 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)), {}, {
+var functionalColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _codacy.functionalColorsFx)(baseColors)), (0, _codacy.semanticFunctionalColorsFx)('text', 40)), (0, _codacy.semanticFunctionalColorsFx)('background', 95)), (0, _codacy.semanticFunctionalColorsFx)('border', 40)), (0, _codacy.semanticFunctionalColorsFx)('icon', 40)), {}, {
   // UPDATE HERE FUNCTIONAL COLORS
 
   'brand-primary': baseColors['orange-40'],

package/lib/theme/index.d.ts

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

package/lib/theme/index.js

@@ -25,6 +25,17 @@ Object.keys(_security).forEach(function (key) {
     }
   });
 });
+var _dark = require("./ColorSchemes/dark");
+Object.keys(_dark).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dark[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _dark[key];
+    }
+  });
+});
 var _theme = require("./theme");
 Object.keys(_theme).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/theme/theme.d.ts

@@ -34,5 +34,6 @@ export declare const transition: (properties: string[], speed?: Speed, refTheme?
 export declare const generateTheme: (scheme: ColorScheme) => CodacyTheme;
 export declare const codacyTheme: CodacyTheme;
 export declare const securityTheme: CodacyTheme;
+export declare const darkCodacyTheme: 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.securityTheme = exports.generateTheme = exports.codacyTheme = void 0;
+exports.transition = exports.theme = exports.securityTheme = exports.generateTheme = exports.darkCodacyTheme = exports.codacyTheme = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _ = require("./");
 var _polished = require("polished");
@@ -166,6 +166,7 @@ var generateTheme = exports.generateTheme = function generateTheme(scheme) {
 // Themes
 var codacyTheme = exports.codacyTheme = generateTheme(_.codacyThemeColors);
 var securityTheme = exports.securityTheme = generateTheme(_.securityThemeColors);
+var darkCodacyTheme = exports.darkCodacyTheme = generateTheme(_.darkCodacyThemeColors);
 
 /** @deprecated Use codacyTheme instead */
 var theme = exports.theme = codacyTheme;

package/package.json

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