@codacy/ui-components 0.65.92 → 0.65.93

package/lib/theme/ColorSchemes/light/text.js

@@ -0,0 +1,61 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textColors = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _primitives = require("../primitives");
+var _semantics = require("../semantics");
+var textColors = exports.textColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _semantics.semanticFunctionalColorsFx)('text', 40)), {}, {
+  'text-primary': _primitives.primitiveColors['grey-10'],
+  'text-secondary': _primitives.primitiveColors['grey-30'],
+  'text-tertiary': _primitives.primitiveColors['grey-50'],
+  'text-disabled': _primitives.primitiveColors['grey-70'],
+  'text-inverted': _primitives.primitiveColors['white'],
+  'text-subtle-enabled': _primitives.primitiveColors['grey-50'],
+  'text-subtle-hover': _primitives.primitiveColors['grey-30'],
+  'text-subtle-focus': _primitives.primitiveColors['grey-30'],
+  'text-subtle-pressed': _primitives.primitiveColors['grey-10'],
+  'text-subtle-disabled': _primitives.primitiveColors['grey-70'],
+  'text-subtle-inverted': _primitives.primitiveColors['white'],
+  'text-code-subtle-enabled': _primitives.primitiveColors['grey-20'],
+  'text-code-subtle-disabled': _primitives.primitiveColors['grey-60'],
+  // Text - Link and Brand
+  'text-link-enabled': _primitives.primitiveColors['blue-40'],
+  'text-link-hover': _primitives.primitiveColors['blue-30'],
+  'text-link-focus': _primitives.primitiveColors['blue-30'],
+  'text-link-pressed': _primitives.primitiveColors['blue-20'],
+  'text-link-disabled': _primitives.primitiveColors['blue-70'],
+  'text-brand-enabled': _primitives.primitiveColors['blue-40'],
+  'text-brand-hover': _primitives.primitiveColors['blue-30'],
+  'text-brand-focus': _primitives.primitiveColors['blue-30'],
+  'text-brand-pressed': _primitives.primitiveColors['blue-20'],
+  'text-brand-disabled': _primitives.primitiveColors['blue-70'],
+  // Text - Semantic
+  // blue
+  'text-info-enabled': _primitives.primitiveColors['blue-40'],
+  'text-minor-enabled': _primitives.primitiveColors['blue-40'],
+  'text-minor-disabled': _primitives.primitiveColors['blue-70'],
+  'text-code-brand-enabled': _primitives.primitiveColors['blue-20'],
+  'text-code-brand-disabled': _primitives.primitiveColors['blue-60'],
+  // red
+  'text-danger-enabled': _primitives.primitiveColors['red-40'],
+  'text-danger-hover': _primitives.primitiveColors['red-30'],
+  'text-danger-focus': _primitives.primitiveColors['red-30'],
+  'text-danger-pressed': _primitives.primitiveColors['red-20'],
+  'text-danger-disabled': _primitives.primitiveColors['red-70'],
+  'text-critical-enabled': _primitives.primitiveColors['red-40'],
+  'text-critical-disabled': _primitives.primitiveColors['red-70'],
+  'text-code-danger': _primitives.primitiveColors['red-60'],
+  // yellow
+  'text-warning-enabled': _primitives.primitiveColors['yellow-40'],
+  'text-medium-enabled': _primitives.primitiveColors['yellow-50'],
+  'text-medium-disabled': _primitives.primitiveColors['yellow-70'],
+  // green
+  'text-success-enabled': _primitives.primitiveColors['green-40'],
+  // orange
+  'text-high-enabled': _primitives.primitiveColors['orange-40'],
+  'text-high-disabled': _primitives.primitiveColors['orange-70']
+});

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

@@ -0,0 +1,6 @@
+import { ColorName, ColorNumber } from './types';
+declare type ColorType = {
+    [key in `${ColorName}-${ColorNumber}` | 'white']: string;
+};
+export declare const primitiveColors: ColorType;
+export {};

package/lib/theme/ColorSchemes/primitives.js

@@ -0,0 +1,95 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.primitiveColors = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+// Hack: https://stackoverflow.com/a/44134328
+function hslToHex(hue, saturation, lightness) {
+  lightness /= 100;
+  var a = saturation * Math.min(lightness, 1 - lightness) / 100;
+  var f = function f(n) {
+    var k = (n + hue / 30) % 12;
+    var color = lightness - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * color).toString(16).padStart(2, '0'); // convert to Hex and prefix "0" if needed
+  };
+  return "#".concat(f(0)).concat(f(8)).concat(f(4));
+}
+var generatePrimitiveColors = function generatePrimitiveColors(color) {
+  var colors = {};
+  colors["".concat(color.name, "-98")] = hslToHex(color.hue, color.saturation, 98.4);
+  colors["".concat(color.name, "-95")] = hslToHex(color.hue, color.saturation, 94.9);
+  colors["".concat(color.name, "-90")] = hslToHex(color.hue, color.saturation, 90);
+  for (var i = 80; i >= 20; i -= 10) {
+    colors["".concat(color.name, "-").concat(i)] = hslToHex(color.hue, color.saturation, color.lightnessStart + i);
+  }
+  return colors;
+};
+var primitiveColors = exports.primitiveColors = (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"])({}, generatePrimitiveColors({
+  name: 'grey',
+  hue: 219,
+  saturation: 25,
+  lightnessStart: 7.06
+})), generatePrimitiveColors({
+  name: 'blue',
+  hue: 217,
+  saturation: 100,
+  lightnessStart: 7.06
+})), generatePrimitiveColors({
+  name: 'purple',
+  hue: 266,
+  saturation: 64,
+  lightnessStart: 7.06
+})), generatePrimitiveColors({
+  name: 'orange',
+  hue: 29,
+  saturation: 98,
+  lightnessStart: 7.06
+})), generatePrimitiveColors({
+  name: 'red',
+  hue: 359,
+  saturation: 67,
+  lightnessStart: 7.06
+})), generatePrimitiveColors({
+  name: 'green',
+  hue: 137,
+  saturation: 50,
+  lightnessStart: 0
+})), generatePrimitiveColors({
+  name: 'yellow',
+  hue: 38,
+  saturation: 100,
+  lightnessStart: 7.06
+})), generatePrimitiveColors({
+  name: 'teal',
+  hue: 183,
+  saturation: 50,
+  lightnessStart: 0
+})), generatePrimitiveColors({
+  name: 'magenta',
+  hue: 310,
+  saturation: 63,
+  lightnessStart: 1.96
+})), {}, {
+  white: '#FFFFFF',
+  'grey-00': '#0B0E13',
+  'grey-10': '#171D26',
+  'blue-00': '#050B1A',
+  'blue-10': '#091E4E',
+  'purple-08': '#130722',
+  'purple-10': '#290F47',
+  'orange-00': '#281401',
+  'orange-10': '#462301',
+  'red-00': '#290002',
+  'red-10': '#470003',
+  'green-00': '#0A1E10',
+  'green-10': '#12351C',
+  'yellow-00': '#291A00',
+  'yellow-10': '#472D00',
+  'teal-00': '#0A1E1F',
+  'teal-10': '#123436',
+  'magenta-00': '#21071D',
+  'magenta-10': '#3A0D33'
+});

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

@@ -0,0 +1,9 @@
+import { ColorNumber } from './types';
+declare type PrefixName = 'text' | 'background' | 'border' | 'icon';
+declare const semantics: readonly ["danger", "success", "warning", "info", "attention", "critical", "high", "medium", "minor"];
+declare type SemanticName = (typeof semantics)[number];
+declare type SemanticType = {
+    [key in `${PrefixName}-${SemanticName}`]: string;
+};
+export declare const semanticFunctionalColorsFx: (prefix: PrefixName, number: ColorNumber) => SemanticType;
+export {};

package/lib/theme/ColorSchemes/semantics.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.semanticFunctionalColorsFx = void 0;
+var _primitives = require("./primitives");
+var semantics = ['danger', 'success', 'warning', 'info', 'attention', 'critical', 'high', 'medium', 'minor'];
+var semanticFunctionalColorsFx = exports.semanticFunctionalColorsFx = function semanticFunctionalColorsFx(prefix, number) {
+  var colors = {};
+  var semanticMapToColor = {
+    danger: 'red',
+    success: 'green',
+    warning: 'yellow',
+    info: 'blue',
+    attention: 'purple',
+    critical: 'red',
+    high: 'orange',
+    medium: 'yellow',
+    minor: 'blue'
+  };
+  semantics.map(function (semantic) {
+    return colors["".concat(prefix, "-").concat(semantic)] = _primitives.primitiveColors["".concat(semanticMapToColor[semantic], "-").concat(number)];
+  });
+  return colors;
+};

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

@@ -0,0 +1,3 @@
+export declare const colorNames: readonly ["blue", "grey", "purple", "orange", "teal", "magenta", "red", "green", "yellow"];
+export declare type ColorName = (typeof colorNames)[number];
+export declare type ColorNumber = '00' | '08' | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 98;

package/lib/theme/ColorSchemes/types.js

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.colorNames = void 0;
+var colorNames = exports.colorNames = ['blue', 'grey', 'purple', 'orange', 'teal', 'magenta', 'red', 'green', 'yellow'];

package/lib/theme/index.d.ts

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

package/lib/theme/index.js

@@ -3,36 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _codacy = require("./ColorSchemes/codacy");
-Object.keys(_codacy).forEach(function (key) {
+var _ColorSchemes = require("./ColorSchemes");
+Object.keys(_ColorSchemes).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _codacy[key]) return;
+  if (key in exports && exports[key] === _ColorSchemes[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _codacy[key];
-    }
-  });
-});
-var _security = require("./ColorSchemes/security");
-Object.keys(_security).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _security[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _security[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];
+      return _ColorSchemes[key];
     }
   });
 });

package/lib/theme/theme.d.ts

@@ -33,7 +33,4 @@ 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 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.darkCodacyTheme = exports.codacyTheme = void 0;
+exports.transition = exports.generateTheme = exports.darkCodacyTheme = exports.codacyTheme = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
 var _ = require("./");
 var _polished = require("polished");
@@ -165,8 +165,4 @@ 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;
+var darkCodacyTheme = exports.darkCodacyTheme = generateTheme(_.darkCodacyThemeColors);

package/package.json

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