@codacy/ui-components 0.65.93 → 0.66.0

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

@@ -13,70 +13,7 @@ var _background = require("./background");
 var _border = require("./border");
 var _icon = require("./icon");
 var _text = require("./text");
-var functionalColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _text.textColors), _background.backgroundColors), _border.borderColors), _icon.iconColors), _illustration.illustrationColors), _data.dataColors), {}, {
-  // COLORS THAT ARE NOT DEFINED IN THE NEW DESIGN SYSTEM
-  // Brand
-  'brand-primary': _primitives.primitiveColors['blue-40'],
-  'brand-hover': _primitives.primitiveColors['blue-30'],
-  'brand-pressed': _primitives.primitiveColors['blue-20'],
-  'brand-disabled': _primitives.primitiveColors['blue-70'],
-  'brand-focus': _primitives.primitiveColors['blue-90'],
-  'brand-inverted': _primitives.primitiveColors['white'],
-  'brand-subtle': _primitives.primitiveColors['blue-98'],
-  // Subtle
-  'subtle-primary': _primitives.primitiveColors['grey-50'],
-  'subtle-hover': _primitives.primitiveColors['grey-30'],
-  'subtle-pressed': _primitives.primitiveColors['grey-10'],
-  'subtle-disabled': _primitives.primitiveColors['grey-70'],
-  'subtle-inverted': _primitives.primitiveColors['white'],
-  // Danger
-  'danger-primary': _primitives.primitiveColors['red-40'],
-  'danger-hover': _primitives.primitiveColors['red-30'],
-  'danger-pressed': _primitives.primitiveColors['red-20'],
-  'danger-disabled': _primitives.primitiveColors['red-80'],
-  'danger-focus': _primitives.primitiveColors['red-90'],
-  'danger-subtle': _primitives.primitiveColors['red-98'],
-  // Success
-  'success-primary': _primitives.primitiveColors['green-40'],
-  'success-hover': _primitives.primitiveColors['green-30'],
-  'success-pressed': _primitives.primitiveColors['green-20'],
-  'success-disabled': _primitives.primitiveColors['green-80'],
-  'success-focus': _primitives.primitiveColors['green-90'],
-  // 'success-subtle': primitiveColors['green-98'],
-
-  // Warning
-  'warning-primary': _primitives.primitiveColors['yellow-40'],
-  'warning-hover': _primitives.primitiveColors['yellow-30'],
-  'warning-pressed': _primitives.primitiveColors['yellow-20'],
-  'warning-disabled': _primitives.primitiveColors['yellow-80'],
-  'warning-focus': _primitives.primitiveColors['yellow-90'],
-  // 'warning-subtle': primitiveColors['yellow-98'],
-
-  //High
-  'high-primary': _primitives.primitiveColors['orange-40'],
-  'high-hover': _primitives.primitiveColors['orange-30'],
-  'high-pressed': _primitives.primitiveColors['orange-20'],
-  'high-disabled': _primitives.primitiveColors['orange-80'],
-  // Info
-  'info-primary': _primitives.primitiveColors['blue-40'],
-  'info-hover': _primitives.primitiveColors['blue-30'],
-  'info-pressed': _primitives.primitiveColors['blue-20'],
-  'info-disabled': _primitives.primitiveColors['blue-80'],
-  'info-inverted': _primitives.primitiveColors['white'],
-  // 'info-focus': primitiveColors['blue-90'],
-  // 'info-subtle': primitiveColors['blue-98'],
-
-  // Attention
-  'attention-primary': _primitives.primitiveColors['purple-40'],
-  'attention-hover': _primitives.primitiveColors['purple-30'],
-  'attention-pressed': _primitives.primitiveColors['purple-20'],
-  'attention-disabled': _primitives.primitiveColors['purple-80'],
-  'attention-focus': _primitives.primitiveColors['purple-90'],
-  // 'attention-subtle': primitiveColors['purple-98'],
-
-  // Navigation
-  'navigation-top-primary': _primitives.primitiveColors['grey-10'],
-  'navigation-text': _primitives.primitiveColors['grey-80'],
-  'navigation-text-pressed': _primitives.primitiveColors['grey-80']
-});
-var codacyThemeColors = exports.codacyThemeColors = functionalColors;
+var _components = require("../components");
+var functionalColors = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _text.textColors), _background.backgroundColors), _border.borderColors), _icon.iconColors), _illustration.illustrationColors), _data.dataColors);
+var colors = (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"])((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"])((0, _objectSpread2["default"])({}, functionalColors), (0, _components.effects)(_primitives.primitiveColors)), (0, _components.alerts)(functionalColors)), (0, _components.button)(functionalColors)), (0, _components.cards)(functionalColors)), (0, _components.charts)(functionalColors)), (0, _components.label)(functionalColors)), (0, _components.checkboxInput)(functionalColors)), (0, _components.listOrb)(functionalColors)), (0, _components.stepper)(functionalColors)), (0, _components.selector)(functionalColors)), (0, _components.input)(functionalColors)), (0, _components.loading)(functionalColors)), (0, _components.divider)(functionalColors)), (0, _components.issues)(functionalColors)), (0, _components.tabs)(functionalColors)), (0, _components.drawer)(functionalColors)), (0, _components.filters)(functionalColors)), (0, _components.modals)(functionalColors)), (0, _components.tables)(functionalColors)), (0, _components.navigation)(functionalColors));
+var codacyThemeColors = exports.codacyThemeColors = colors;

package/lib/theme/ColorSchemes/light/text.d.ts

@@ -41,6 +41,15 @@ export declare const textColors: {
     'text-success-enabled': string;
     'text-high-enabled': string;
     'text-high-disabled': string;
+    "link-high": string;
+    "link-medium": string;
+    "link-success": string;
+    "link-danger": string;
+    "link-warning": string;
+    "link-info": string;
+    "link-attention": string;
+    "link-critical": string;
+    "link-minor": string;
     "background-high": string;
     "background-medium": string;
     "background-success": string;

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

@@ -13,13 +13,13 @@ var textColors = exports.textColors = (0, _objectSpread2["default"])((0, _object
   'text-secondary': _primitives.primitiveColors['grey-30'],
   'text-tertiary': _primitives.primitiveColors['grey-50'],
   'text-disabled': _primitives.primitiveColors['grey-70'],
-  'text-inverted': _primitives.primitiveColors['white'],
+  'text-inverted': _primitives.primitiveColors['grey-100'],
   '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-subtle-inverted': _primitives.primitiveColors['grey-100'],
   'text-code-subtle-enabled': _primitives.primitiveColors['grey-20'],
   'text-code-subtle-disabled': _primitives.primitiveColors['grey-60'],
   // Text - Link and Brand

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

@@ -0,0 +1,5 @@
+declare type ColorName = 'blue';
+declare type ColorNumber = '00' | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 98;
+declare type BlueColorType = `${ColorName}-${ColorNumber}`;
+export declare const blue: Record<BlueColorType, string>;
+export {};

package/lib/theme/ColorSchemes/primitives/blue.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.blue = void 0;
+var blue = exports.blue = {
+  'blue-00': '#050B1A',
+  'blue-10': '#091E4E',
+  'blue-20': '#073683',
+  'blue-30': '#0048BD',
+  'blue-40': '#005DF0',
+  'blue-50': '#276BFC',
+  'blue-60': '#5784FF',
+  'blue-70': '#8AB7FF',
+  'blue-80': '#BDD6FF',
+  'blue-90': '#CCE0FF',
+  'blue-95': '#E5EFFF',
+  'blue-98': '#F5F9FF'
+};

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

@@ -0,0 +1,5 @@
+declare type ColorName = 'green';
+declare type ColorNumber = '00' | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 98;
+declare type GreenColorType = `${ColorName}-${ColorNumber}`;
+export declare const green: Record<GreenColorType, string>;
+export {};

package/lib/theme/ColorSchemes/primitives/green.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.green = void 0;
+var green = exports.green = {
+  'green-00': '#0A1E10',
+  'green-10': '#12351C',
+  'green-20': '#1A4B28',
+  'green-30': '#26733C',
+  'green-40': '#339950',
+  'green-50': '#40BF64',
+  'green-60': '#66CC83',
+  'green-70': '#8CD9A2',
+  'green-80': '#B3E5C1',
+  'green-90': '#D9F2E0',
+  'green-95': '#ECF9EF',
+  'green-98': '#F7FCF9'
+};

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

@@ -0,0 +1,5 @@
+declare type ColorName = 'grey';
+declare type ColorNumber = '00' | '05' | 10 | 15 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 98 | 100;
+declare type GreyColorType = `${ColorName}-${ColorNumber}`;
+export declare const grey: Record<GreyColorType, string>;
+export {};

package/lib/theme/ColorSchemes/primitives/grey.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.grey = void 0;
+var grey = exports.grey = {
+  'grey-00': '#0B0E13',
+  'grey-05': '#11151D',
+  'grey-10': '#171D26',
+  'grey-15': '#1D2430',
+  'grey-20': '#344056',
+  'grey-30': '#475776',
+  'grey-40': '#5A6F96',
+  'grey-50': '#7689AD',
+  'grey-60': '#96A4C0',
+  'grey-70': '#B6C0D3',
+  'grey-80': '#D6DBE6',
+  'grey-90': '#DFE4EC',
+  'grey-95': '#EFF1F5',
+  'grey-98': '#F9FAFB',
+  'grey-100': '#FFFFFF'
+};

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

@@ -0,0 +1,117 @@
+export declare const primitiveColors: {
+    "yellow-10": string;
+    "yellow-20": string;
+    "yellow-00": string;
+    "yellow-30": string;
+    "yellow-40": string;
+    "yellow-50": string;
+    "yellow-60": string;
+    "yellow-70": string;
+    "yellow-80": string;
+    "yellow-90": string;
+    "yellow-95": string;
+    "yellow-98": string;
+    "teal-10": string;
+    "teal-20": string;
+    "teal-00": string;
+    "teal-30": string;
+    "teal-40": string;
+    "teal-50": string;
+    "teal-60": string;
+    "teal-70": string;
+    "teal-80": string;
+    "teal-90": string;
+    "teal-95": string;
+    "teal-98": string;
+    "red-10": string;
+    "red-20": string;
+    "red-00": string;
+    "red-30": string;
+    "red-40": string;
+    "red-50": string;
+    "red-60": string;
+    "red-70": string;
+    "red-80": string;
+    "red-90": string;
+    "red-95": string;
+    "red-98": string;
+    "purple-10": string;
+    "purple-20": string;
+    "purple-30": string;
+    "purple-40": string;
+    "purple-50": string;
+    "purple-60": string;
+    "purple-70": string;
+    "purple-80": string;
+    "purple-90": string;
+    "purple-95": string;
+    "purple-98": string;
+    "purple-08": string;
+    "orange-10": string;
+    "orange-20": string;
+    "orange-00": string;
+    "orange-30": string;
+    "orange-40": string;
+    "orange-50": string;
+    "orange-60": string;
+    "orange-70": string;
+    "orange-80": string;
+    "orange-90": string;
+    "orange-95": string;
+    "orange-98": string;
+    "magenta-10": string;
+    "magenta-20": string;
+    "magenta-00": string;
+    "magenta-30": string;
+    "magenta-40": string;
+    "magenta-50": string;
+    "magenta-60": string;
+    "magenta-70": string;
+    "magenta-80": string;
+    "magenta-90": string;
+    "magenta-95": string;
+    "magenta-98": string;
+    "grey-10": string;
+    "grey-15": string;
+    "grey-20": string;
+    "grey-00": string;
+    "grey-30": string;
+    "grey-40": string;
+    "grey-50": string;
+    "grey-60": string;
+    "grey-70": string;
+    "grey-80": string;
+    "grey-90": string;
+    "grey-95": string;
+    "grey-98": string;
+    "grey-05": string;
+    "grey-100": string;
+    "green-10": string;
+    "green-20": string;
+    "green-00": string;
+    "green-30": string;
+    "green-40": string;
+    "green-50": string;
+    "green-60": string;
+    "green-70": string;
+    "green-80": string;
+    "green-90": string;
+    "green-95": string;
+    "green-98": string;
+    "blue-10": string;
+    "blue-20": string;
+    "blue-00": string;
+    "blue-30": string;
+    "blue-40": string;
+    "blue-50": string;
+    "blue-60": string;
+    "blue-70": string;
+    "blue-80": string;
+    "blue-90": string;
+    "blue-95": string;
+    "blue-98": string;
+};
+export declare type PrimitiveColor = keyof typeof primitiveColors;
+export declare type PrimitiveColorScheme = {
+    [key in PrimitiveColor]: string;
+};

package/lib/theme/ColorSchemes/primitives/index.js

@@ -0,0 +1,18 @@
+"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"));
+var _blue = require("./blue");
+var _green = require("./green");
+var _grey = require("./grey");
+var _magenta = require("./magenta");
+var _orange = require("./orange");
+var _purple = require("./purple");
+var _red = require("./red");
+var _teal = require("./teal");
+var _yellow = require("./yellow");
+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"])({}, _blue.blue), _green.green), _grey.grey), _magenta.magenta), _orange.orange), _purple.purple), _red.red), _teal.teal), _yellow.yellow);

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

@@ -0,0 +1,5 @@
+declare type ColorName = 'magenta';
+declare type ColorNumber = '00' | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 98;
+declare type MagentaColorType = `${ColorName}-${ColorNumber}`;
+export declare const magenta: Record<MagentaColorType, string>;
+export {};

package/lib/theme/ColorSchemes/primitives/magenta.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.magenta = void 0;
+var magenta = exports.magenta = {
+  'magenta-00': '#21071D',
+  'magenta-10': '#3A0D33',
+  'magenta-20': '#5C1450',
+  'magenta-30': '#851E74',
+  'magenta-40': '#AF2798',
+  'magenta-50': '#D237B8',
+  'magenta-60': '#DB61C7',
+  'magenta-70': '#E58AD5',
+  'magenta-80': '#EEB4E5',
+  'magenta-90': '#F6D5F1',
+  'magenta-95': '#FAEAF8',
+  'magenta-98': '#FDF7FD'
+};

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

@@ -0,0 +1,5 @@
+declare type ColorName = 'orange';
+declare type ColorNumber = '00' | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 98;
+declare type OrangeColorType = `${ColorName}-${ColorNumber}`;
+export declare const orange: Record<OrangeColorType, string>;
+export {};

package/lib/theme/ColorSchemes/primitives/orange.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.orange = void 0;
+var orange = exports.orange = {
+  'orange-00': '#281401',
+  'orange-10': '#462301',
+  'orange-20': '#884201',
+  'orange-30': '#BB5B02',
+  'orange-40': '#ED7303',
+  'orange-50': '#FD8D26',
+  'orange-60': '#FDA858',
+  'orange-70': '#FDC28B',
+  'orange-80': '#FEDDBD',
+  'orange-90': '#FFE4CC',
+  'orange-95': '#FFF2E6',
+  'orange-98': '#FFF9F5'
+};

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

@@ -0,0 +1,5 @@
+declare type ColorName = 'purple';
+declare type ColorNumber = '08' | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 98;
+declare type PurpleColorType = `${ColorName}-${ColorNumber}`;
+export declare const purple: Record<PurpleColorType, string>;
+export {};

package/lib/theme/ColorSchemes/primitives/purple.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.purple = void 0;
+var purple = exports.purple = {
+  'purple-08': '#130722',
+  'purple-10': '#290F47',
+  'purple-20': '#401971',
+  'purple-30': '#57239A',
+  'purple-40': '#6F2CC4',
+  'purple-50': '#8A4CD7',
+  'purple-60': '#A576E0',
+  'purple-70': '#C09FEA',
+  'purple-80': '#DBC9F3',
+  'purple-90': '#E4D6F5',
+  'purple-95': '#F1EAFA',
+  'purple-98': '#F9F7FD'
+};

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

@@ -0,0 +1,5 @@
+declare type ColorName = 'red';
+declare type ColorNumber = '00' | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 98;
+declare type RedColorType = `${ColorName}-${ColorNumber}`;
+export declare const red: Record<RedColorType, string>;
+export {};

package/lib/theme/ColorSchemes/primitives/red.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.red = void 0;
+var red = exports.red = {
+  'red-00': '#290002',
+  'red-10': '#3D0003',
+  'red-20': '#8A000B',
+  'red-30': '#B90415',
+  'red-40': '#C8282A',
+  'red-50': '#DB4B48',
+  'red-60': '#FB615A',
+  'red-70': '#FF928A',
+  'red-80': '#FFC2BD',
+  'red-90': '#FFD1CC',
+  'red-95': '#FFE8E5',
+  'red-98': '#FFF6F5'
+};

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

@@ -0,0 +1,5 @@
+declare type ColorName = 'teal';
+declare type ColorNumber = '00' | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 95 | 98;
+declare type TealColorType = `${ColorName}-${ColorNumber}`;
+export declare const teal: Record<TealColorType, string>;
+export {};

package/lib/theme/ColorSchemes/primitives/teal.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.teal = void 0;
+var teal = exports.teal = {
+  'teal-00': '#0A1E1F',
+  'teal-10': '#123436',
+  'teal-20': '#194A4D',
+  'teal-30': '#266E73',
+  'teal-40': '#339499',
+  'teal-50': '#4AB0B5',
+  'teal-60': '#66C7CC',
+  'teal-70': '#94CED1',
+  'teal-80': '#B7DEE1',
+  'teal-90': '#DBEFF0',
+  'teal-95': '#ECF8F9',
+  'teal-98': '#F8FCFC'
+};

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

@@ -0,0 +1,5 @@
+declare type ColorName = 'yellow';
+declare type ColorNumber = '00' | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | '95' | '98';
+declare type YellowColorType = `${ColorName}-${ColorNumber}`;
+export declare const yellow: Record<YellowColorType, string>;
+export {};

package/lib/theme/ColorSchemes/primitives/yellow.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.yellow = void 0;
+var yellow = exports.yellow = {
+  'yellow-00': '#291A00',
+  'yellow-10': '#472D00',
+  'yellow-20': '#8A5600',
+  'yellow-30': '#BD7600',
+  'yellow-40': '#F09700',
+  'yellow-50': '#FFAE24',
+  'yellow-60': '#FFC157',
+  'yellow-70': '#FFD38A',
+  'yellow-80': '#FFE6BD',
+  'yellow-90': '#FFECCC',
+  'yellow-95': '#FFF6E5',
+  'yellow-98': '#FFFBF5'
+};

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

@@ -1,9 +1,8 @@
-import { ColorNumber } from './types';
-declare type PrefixName = 'text' | 'background' | 'border' | 'icon';
+declare type FunctionalName = 'text' | 'background' | 'border' | 'icon' | 'link';
 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;
+    [key in `${FunctionalName}-${SemanticName}`]: string;
 };
-export declare const semanticFunctionalColorsFx: (prefix: PrefixName, number: ColorNumber) => SemanticType;
+export declare const semanticFunctionalColorsFx: (prefix: FunctionalName, number: 10 | 40 | 60 | 95) => SemanticType;
 export {};

package/lib/theme/theme.d.ts

@@ -1,4 +1,4 @@
-import { Color, ColorScheme } from './';
+import { AllColorsKeys, ColorScheme } from './';
 export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare type Speed = 'fast' | 'normal' | 'slow';
 export declare type FontSize = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'h' | 'xh';
@@ -9,7 +9,7 @@ export declare type CodacyTheme = {
     gridSize: number;
     remScale: number;
     space: string[];
-    colors: Record<Color, string>;
+    colors: Record<AllColorsKeys, string>;
     fonts: Record<Fonts, string>;
     fontSizes: Record<FontSize, string>;
     fontWeights: Record<FontWeights, string>;
@@ -18,6 +18,7 @@ export declare type CodacyTheme = {
     borders: string[];
     borderWidths: string[];
     radii: string[];
+    /** @deprecated Use effects instead */
     shadows: string[];
     transitions: string[] & Record<Speed, string>;
     breakpoints: string[];
@@ -29,6 +30,11 @@ export declare type CodacyTheme = {
     borderRadius: string[];
     /** @deprecated Use lineHeights instead */
     baseLineHeight: string;
+    effects: {
+        elevation: string[];
+        focus: string[];
+        error: string[];
+    };
 };
 export declare const transition: (properties: string[], speed?: Speed, refTheme?: Pick<CodacyTheme, 'transitions'>) => string;
 export declare const generateTheme: (scheme: ColorScheme) => CodacyTheme;

package/lib/theme/theme.js

@@ -159,7 +159,12 @@ var generateTheme = exports.generateTheme = function generateTheme(scheme) {
     borders: borderWidths.map(function (w) {
       return "solid ".concat(w, " ").concat(scheme['border-primary']);
     }),
-    shadows: shadowsFx(scheme)
+    shadows: shadowsFx(scheme),
+    effects: {
+      elevation: ["0 0.1875rem 0.375rem 0 ".concat(scheme['effect-elevation-1']), "0 0.75rem 1.5rem 0 ".concat(scheme['effect-elevation-2'])],
+      focus: ["0 0 0 0.25rem ".concat(scheme['background-brand-subtle']), "0 0 0 0.25rem ".concat(scheme['background-brand-enabled'], "33")],
+      error: ["0 0 0 0.25rem ".concat(scheme['background-danger']), "0 0 0 0.25rem ".concat(scheme['background-danger-disabled'])]
+    }
   });
 };
 

package/package.json

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

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

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