@codacy/ui-components 0.65.93 → 0.66.0

package/lib/theme/ColorSchemes/components/cards.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cards = void 0;
+var cards = exports.cards = function cards(colors) {
+  return {
+    'cards-primary-text-enabled': colors['text-primary'],
+    'cards-primary-text-disabled': colors['text-disabled'],
+    'cards-secondary-text-enabled': colors['text-secondary'],
+    'cards-tertiary-text-enabled': colors['text-tertiary'],
+    'cards-danger-text-enabled': colors['text-danger-enabled'],
+    'cards-primary-link-enabled': colors['text-link-enabled'],
+    'cards-primary-icon-enabled': colors['icon-enabled'],
+    'cards-success-icon-enabled': colors['icon-success-enabled'],
+    'cards-primary-background-enabled': colors['background-primary'],
+    'cards-secondary-background-enabled': colors['background-secondary'],
+    'cards-subtle-background-enabled': colors['background-brand-subtle'],
+    'cards-primary-border-enabled': colors['border-primary'],
+    'cards-subtle-border-enabled': colors['border-brand-subtle']
+  };
+};

package/lib/theme/ColorSchemes/components/charts.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalColorScheme } from '..';
+declare type Variant = 'primary' | 'secondary' | 'tertiary' | 'subtle' | 'success' | 'danger' | 'warning' | 'info' | 'attention' | 'critical' | 'high' | 'medium' | 'minor';
+declare type State = 'enabled' | 'disabled' | 'active';
+declare type Element = 'text' | 'link' | 'icon' | 'background' | 'border' | 'iconLink';
+declare type ChartsKey = `charts-${Variant | `value${1 | 2 | 3 | 4 | 5 | 6 | 7}`}-${Element}-${State}`;
+export declare const charts: (colors: FunctionalColorScheme) => Record<ChartsKey, string>;
+export {};

package/lib/theme/ColorSchemes/components/charts.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.charts = void 0;
+var charts = exports.charts = function charts(colors) {
+  return {
+    'charts-primary-icon-enabled': colors['icon-enabled'],
+    'charts-primary-icon-disabled': colors['text-disabled'],
+    'charts-primary-iconLink-enabled': colors['icon-brand-enabled'],
+    'charts-primary-iconLink-disabled': colors['icon-brand-disabled'],
+    'charts-success-icon-enabled': colors['icon-success-enabled'],
+    'charts-success-icon-disabled': colors['icon-success-disabled'],
+    'charts-critical-icon-enabled': colors['icon-critical-enabled'],
+    'charts-critical-icon-disabled': colors['icon-critical-disabled'],
+    'charts-high-icon-enabled': colors['icon-high-enabled'],
+    'charts-high-icon-disabled': colors['icon-high-disabled'],
+    'charts-medium-icon-enabled': colors['icon-medium-enabled'],
+    'charts-medium-icon-disabled': colors['icon-medium-disabled'],
+    'charts-minor-icon-enabled': colors['icon-minor-enabled'],
+    'charts-minor-icon-disabled': colors['icon-minor-disabled'],
+    'charts-primary-text-enabled': colors['text-primary'],
+    'charts-secondary-text-enabled': colors['text-secondary'],
+    'charts-tertiary-text-enabled': colors['text-tertiary'],
+    'charts-primary-text-disabled': colors['text-disabled'],
+    'charts-primary-link-enabled': colors['text-link-enabled'],
+    'charts-critical-text-enabled': colors['text-critical-enabled'],
+    'charts-critical-text-disabled': colors['text-critical-disabled'],
+    'charts-high-text-enabled': colors['text-high-enabled'],
+    'charts-high-text-disabled': colors['text-high-disabled'],
+    'charts-medium-text-enabled': colors['text-medium-enabled'],
+    'charts-medium-text-disabled': colors['text-medium-disabled'],
+    'charts-minor-text-enabled': colors['text-minor-enabled'],
+    'charts-minor-text-disabled': colors['text-minor-disabled'],
+    'charts-primary-border-enabled': colors['border-primary'],
+    'charts-secondary-border-enabled': colors['border-inverted'],
+    'charts-primary-border-active': colors['border-brand-enabled'],
+    'charts-critical-border-enabled': colors['border-critical-enabled'],
+    'charts-critical-border-disabled': colors['border-critical-disabled'],
+    'charts-high-border-enabled': colors['border-high-enabled'],
+    'charts-high-border-disabled': colors['border-high-disabled'],
+    'charts-medium-border-enabled': colors['border-medium-enabled'],
+    'charts-medium-border-disabled': colors['border-medium-disabled'],
+    'charts-minor-border-enabled': colors['border-minor-enabled'],
+    'charts-minor-border-disabled': colors['border-minor-disabled'],
+    'charts-primary-background-enabled': colors['background-primary'],
+    'charts-secondary-background-enabled': colors['background-secondary'],
+    'charts-tertiary-background-enabled': colors['background-subtle'],
+    'charts-subtle-background-enabled': colors['background-brand-subtle'],
+    'charts-danger-background-enabled': colors['background-danger'],
+    'charts-danger-background-active': colors['background-danger-enabled'],
+    'charts-warning-background-enabled': colors['background-warning'],
+    'charts-warning-background-active': colors['background-warning-enabled'],
+    'charts-success-background-enabled': colors['background-success'],
+    'charts-success-background-active': colors['background-success-enabled'],
+    'charts-info-background-enabled': colors['background-info'],
+    'charts-info-background-active': colors['background-info-enabled'],
+    'charts-attention-background-enabled': colors['background-attention'],
+    'charts-attention-background-active': colors['background-attention-enabled'],
+    'charts-critical-background-enabled': colors['background-critical'],
+    'charts-critical-background-active': colors['background-critical-enabled'],
+    'charts-high-background-enabled': colors['background-high'],
+    'charts-high-background-active': colors['background-high-enabled'],
+    'charts-medium-background-enabled': colors['background-medium'],
+    'charts-medium-background-active': colors['background-medium-enabled'],
+    'charts-value1-border-enabled': colors['data-color1-enabled'],
+    'charts-value1-border-disabled': colors['data-color1-disabled'],
+    'charts-value2-border-enabled': colors['data-color2-enabled'],
+    'charts-value2-border-disabled': colors['data-color2-disabled'],
+    'charts-value3-border-enabled': colors['data-color3-enabled'],
+    'charts-value3-border-disabled': colors['data-color3-disabled'],
+    'charts-value4-border-enabled': colors['data-color4-enabled'],
+    'charts-value4-border-disabled': colors['data-color4-disabled'],
+    'charts-value5-border-enabled': colors['data-color5-enabled'],
+    'charts-value5-border-disabled': colors['data-color5-disabled'],
+    'charts-value6-border-enabled': colors['data-color6-enabled'],
+    'charts-value6-border-disabled': colors['data-color6-disabled'],
+    'charts-value7-border-enabled': colors['data-color7-enabled'],
+    'charts-value7-border-disabled': colors['data-color7-disabled'],
+    'charts-value1-background-enabled': colors['data-color1-enabled'],
+    'charts-value1-background-disabled': colors['data-color1-disabled'],
+    'charts-value2-background-enabled': colors['data-color2-enabled'],
+    'charts-value2-background-disabled': colors['data-color2-disabled'],
+    'charts-value3-background-enabled': colors['data-color3-enabled'],
+    'charts-value3-background-disabled': colors['data-color3-disabled'],
+    'charts-value4-background-enabled': colors['data-color4-enabled'],
+    'charts-value4-background-disabled': colors['data-color4-disabled'],
+    'charts-value5-background-enabled': colors['data-color5-enabled'],
+    'charts-value5-background-disabled': colors['data-color5-disabled'],
+    'charts-value6-background-enabled': colors['data-color6-enabled'],
+    'charts-value6-background-disabled': colors['data-color6-disabled'],
+    'charts-value7-background-enabled': colors['data-color7-enabled'],
+    'charts-value7-background-disabled': colors['data-color7-disabled']
+  };
+};

package/lib/theme/ColorSchemes/components/checkbox-input.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalColorScheme } from '..';
+declare type Variant = 'primary' | 'secondary';
+declare type State = 'enabled' | 'disabled' | 'active';
+declare type Element = 'text' | 'background' | 'border' | 'icon';
+declare type CheckboxInputKey = `checkboxInput-${Variant}-${Element}-${State}`;
+export declare const checkboxInput: (colors: FunctionalColorScheme) => Record<CheckboxInputKey, string>;
+export {};

package/lib/theme/ColorSchemes/components/checkbox-input.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkboxInput = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var checkboxInput = exports.checkboxInput = function checkboxInput(colors) {
+  return (0, _objectSpread2["default"])({}, {
+    'checkboxInput-primary-text-enabled': colors['text-primary'],
+    'checkboxInput-primary-text-disabled': colors['border-brand-subtle'],
+    'checkboxInput-secondary-text-enabled': colors['text-tertiary'],
+    'checkboxInput-secondary-text-disabled': colors['border-brand-subtle'],
+    'checkboxInput-primary-background-enabled': colors['background-primary'],
+    'checkboxInput-primary-background-disabled': colors['background-brand-subtle'],
+    'checkboxInput-primary-border-active': colors['border-brand-enabled'],
+    'checkboxInput-primary-border-enabled': colors['border-brand-subtle'],
+    'checkboxInput-primary-icon-enabled': colors['background-brand-enabled'],
+    'checkboxInput-primary-icon-disabled': colors['border-brand-subtle']
+  });
+};

package/lib/theme/ColorSchemes/components/divider.d.ts

@@ -0,0 +1,4 @@
+import { FunctionalColorScheme } from '../..';
+declare type DividerKey = `divider-enabled`;
+export declare const divider: (colors: FunctionalColorScheme) => Record<DividerKey, string>;
+export {};

package/lib/theme/ColorSchemes/components/divider.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.divider = void 0;
+var divider = exports.divider = function divider(colors) {
+  return {
+    'divider-enabled': colors['border-primary']
+  };
+};

package/lib/theme/ColorSchemes/components/drawer.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalColorScheme } from '..';
+declare type Component = 'body' | 'item';
+declare type Element = 'text' | 'icon' | 'background' | 'border';
+declare type State = 'enabled' | 'disabled' | 'hover' | 'active';
+declare type DrawerKey = `drawer-${Component}-${Element}-${State}`;
+export declare const drawer: (colors: FunctionalColorScheme) => Record<DrawerKey, string>;
+export {};

package/lib/theme/ColorSchemes/components/drawer.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.drawer = void 0;
+var drawer = exports.drawer = function drawer(colors) {
+  return {
+    'drawer-body-text-enabled': colors['text-secondary'],
+    'drawer-body-text-disabled': colors['text-disabled'],
+    'drawer-body-background-enabled': colors['background-primary'],
+    'drawer-body-border-enabled': colors['border-brand-enabled'],
+    'drawer-body-icon-enabled': colors['icon-hover'],
+    'drawer-body-icon-disabled': colors['icon-disabled'],
+    'drawer-item-text-enabled': colors['text-secondary'],
+    'drawer-item-text-disabled': colors['text-disabled'],
+    'drawer-item-text-hover': colors['text-secondary'],
+    'drawer-item-text-active': colors['text-brand-enabled'],
+    'drawer-item-background-enabled': colors['background-primary'],
+    'drawer-item-background-disabled': colors['background-primary'],
+    'drawer-item-background-hover': colors['background-brand-subtle'],
+    'drawer-item-background-active': colors['background-brand'],
+    'drawer-item-icon-enabled': colors['icon-hover'],
+    'drawer-item-icon-disabled': colors['icon-disabled'],
+    'drawer-item-icon-hover': colors['icon-hover'],
+    'drawer-item-icon-active': colors['icon-brand-enabled']
+  };
+};

package/lib/theme/ColorSchemes/components/effects.d.ts

@@ -0,0 +1,4 @@
+import { PrimitiveColorScheme } from '../primitives';
+declare type EffectKey = `effect-elevation-${1 | 2}`;
+export declare const effects: (colors: PrimitiveColorScheme) => Record<EffectKey, string>;
+export {};

package/lib/theme/ColorSchemes/components/effects.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.effects = void 0;
+var effects = exports.effects = function effects(colors) {
+  return {
+    'effect-elevation-1': "".concat(colors['grey-30'], "26"),
+    'effect-elevation-2': "".concat(colors['grey-30'], "33")
+  };
+};

package/lib/theme/ColorSchemes/components/filters.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalColorScheme } from '..';
+declare type Element = 'text' | 'icon' | 'background' | 'border';
+declare type State = 'enabled' | 'disabled' | 'active';
+declare type FilterKey = `filter-${Element}-${State}`;
+export declare const filters: (colors: FunctionalColorScheme) => Record<FilterKey, string>;
+export {};

package/lib/theme/ColorSchemes/components/filters.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filters = void 0;
+var filters = exports.filters = function filters(colors) {
+  return {
+    'filter-text-enabled': colors['text-secondary'],
+    'filter-text-disabled': colors['text-disabled'],
+    'filter-background-enabled': colors['background-primary'],
+    'filter-background-disabled': colors['background-secondary'],
+    'filter-border-enabled': colors['border-brand-subtle'],
+    'filter-border-disabled': colors['border-subtle-disabled'],
+    'filter-border-active': colors['border-brand-pressed'],
+    'filter-icon-enabled': colors['icon-enabled'],
+    'filter-icon-disabled': colors['icon-disabled']
+  };
+};

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

@@ -0,0 +1,20 @@
+export * from './alerts';
+export * from './button';
+export * from './cards';
+export * from './charts';
+export * from './label';
+export * from './checkbox-input';
+export * from './list-orb';
+export * from './stepper';
+export * from './selector';
+export * from './input';
+export * from './loading';
+export * from './effects';
+export * from './divider';
+export * from './issues';
+export * from './tabs';
+export * from './drawer';
+export * from './filters';
+export * from './modals';
+export * from './tables';
+export * from './navigation';

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

@@ -0,0 +1,225 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _alerts = require("./alerts");
+Object.keys(_alerts).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _alerts[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _alerts[key];
+    }
+  });
+});
+var _button = require("./button");
+Object.keys(_button).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _button[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _button[key];
+    }
+  });
+});
+var _cards = require("./cards");
+Object.keys(_cards).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cards[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _cards[key];
+    }
+  });
+});
+var _charts = require("./charts");
+Object.keys(_charts).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _charts[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _charts[key];
+    }
+  });
+});
+var _label = require("./label");
+Object.keys(_label).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _label[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _label[key];
+    }
+  });
+});
+var _checkboxInput = require("./checkbox-input");
+Object.keys(_checkboxInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _checkboxInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _checkboxInput[key];
+    }
+  });
+});
+var _listOrb = require("./list-orb");
+Object.keys(_listOrb).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _listOrb[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _listOrb[key];
+    }
+  });
+});
+var _stepper = require("./stepper");
+Object.keys(_stepper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _stepper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _stepper[key];
+    }
+  });
+});
+var _selector = require("./selector");
+Object.keys(_selector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _selector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _selector[key];
+    }
+  });
+});
+var _input = require("./input");
+Object.keys(_input).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _input[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _input[key];
+    }
+  });
+});
+var _loading = require("./loading");
+Object.keys(_loading).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _loading[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _loading[key];
+    }
+  });
+});
+var _effects = require("./effects");
+Object.keys(_effects).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _effects[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _effects[key];
+    }
+  });
+});
+var _divider = require("./divider");
+Object.keys(_divider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _divider[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _divider[key];
+    }
+  });
+});
+var _issues = require("./issues");
+Object.keys(_issues).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _issues[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _issues[key];
+    }
+  });
+});
+var _tabs = require("./tabs");
+Object.keys(_tabs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tabs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tabs[key];
+    }
+  });
+});
+var _drawer = require("./drawer");
+Object.keys(_drawer).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _drawer[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _drawer[key];
+    }
+  });
+});
+var _filters = require("./filters");
+Object.keys(_filters).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _filters[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _filters[key];
+    }
+  });
+});
+var _modals = require("./modals");
+Object.keys(_modals).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _modals[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _modals[key];
+    }
+  });
+});
+var _tables = require("./tables");
+Object.keys(_tables).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tables[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _tables[key];
+    }
+  });
+});
+var _navigation = require("./navigation");
+Object.keys(_navigation).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _navigation[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _navigation[key];
+    }
+  });
+});

package/lib/theme/ColorSchemes/components/input.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalColorScheme } from '..';
+declare type State = 'enabled' | 'disabled' | 'hover' | 'focus' | 'error';
+declare type Element = 'icon' | 'border' | 'background' | 'text' | 'placeholder' | 'helper' | 'label';
+declare type InputKey = `input-${Element}-${State}`;
+export declare const input: (colors: FunctionalColorScheme) => Record<InputKey, string>;
+export {};

package/lib/theme/ColorSchemes/components/input.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.input = void 0;
+var input = exports.input = function input(colors) {
+  return {
+    'input-icon-enabled': colors['icon-enabled'],
+    'input-icon-hover': colors['icon-enabled'],
+    'input-icon-focus': colors['icon-enabled'],
+    'input-icon-disabled': colors['icon-disabled'],
+    'input-icon-error': colors['icon-enabled'],
+    'input-border-enabled': colors['border-brand-subtle'],
+    'input-border-hover': colors['border-brand-enabled'],
+    'input-border-focus': colors['border-brand-enabled'],
+    'input-border-disabled': colors['border-subtle-disabled'],
+    'input-border-error': colors['border-danger-enabled'],
+    'input-background-enabled': colors['background-primary'],
+    'input-background-hover': colors['background-primary'],
+    'input-background-focus': colors['background-primary'],
+    'input-background-disabled': colors['background-primary'],
+    'input-background-error': colors['background-primary'],
+    'input-text-enabled': colors['text-primary'],
+    'input-text-hover': colors['text-primary'],
+    'input-text-focus': colors['text-primary'],
+    'input-text-disabled': colors['text-disabled'],
+    'input-text-error': colors['text-primary'],
+    'input-placeholder-enabled': colors['text-tertiary'],
+    'input-placeholder-hover': colors['text-tertiary'],
+    'input-placeholder-focus': colors['text-tertiary'],
+    'input-placeholder-disabled': colors['text-disabled'],
+    'input-placeholder-error': colors['text-tertiary'],
+    'input-helper-enabled': colors['text-secondary'],
+    'input-helper-hover': colors['text-secondary'],
+    'input-helper-focus': colors['text-secondary'],
+    'input-helper-disabled': colors['text-disabled'],
+    'input-helper-error': colors['text-danger-enabled'],
+    'input-label-enabled': colors['text-secondary'],
+    'input-label-hover': colors['text-secondary'],
+    'input-label-focus': colors['text-secondary'],
+    'input-label-disabled': colors['text-disabled'],
+    'input-label-error': colors['text-secondary']
+  };
+};

package/lib/theme/ColorSchemes/components/issues.d.ts

@@ -0,0 +1,7 @@
+import { FunctionalColorScheme } from '../..';
+declare type Variant = 'critical' | 'high' | 'medium' | 'minor';
+declare type State = 'collapsed' | 'expanded';
+declare type Element = 'background' | 'border' | 'code' | 'line';
+export declare type IssueKey = `issues-${Variant}-${Element}-${State}`;
+export declare const issues: (colors: FunctionalColorScheme) => Record<IssueKey, string>;
+export {};

package/lib/theme/ColorSchemes/components/issues.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.issues = void 0;
+var issues = exports.issues = function issues(colors) {
+  return {
+    'issues-critical-border-collapsed': colors['border-critical-enabled'],
+    'issues-critical-border-expanded': colors['border-critical-disabled'],
+    'issues-high-border-collapsed': colors['border-high-enabled'],
+    'issues-high-border-expanded': colors['border-high-disabled'],
+    'issues-medium-border-collapsed': colors['border-medium-enabled'],
+    'issues-medium-border-expanded': colors['border-medium-disabled'],
+    'issues-minor-border-collapsed': colors['border-minor-enabled'],
+    'issues-minor-border-expanded': colors['border-minor-disabled'],
+    'issues-critical-code-collapsed': colors['background-secondary'],
+    'issues-critical-code-expanded': colors['background-critical'],
+    'issues-high-code-collapsed': colors['background-secondary'],
+    'issues-high-code-expanded': colors['background-high'],
+    'issues-medium-code-collapsed': colors['background-secondary'],
+    'issues-medium-code-expanded': colors['background-medium'],
+    'issues-minor-code-collapsed': colors['background-secondary'],
+    'issues-minor-code-expanded': colors['background-minor'],
+    'issues-critical-line-collapsed': colors['text-disabled'],
+    'issues-critical-line-expanded': colors['text-inverted'],
+    'issues-high-line-collapsed': colors['text-disabled'],
+    'issues-high-line-expanded': colors['text-inverted'],
+    'issues-medium-line-collapsed': colors['text-disabled'],
+    'issues-medium-line-expanded': colors['text-inverted'],
+    'issues-minor-line-collapsed': colors['text-disabled'],
+    'issues-minor-line-expanded': colors['text-inverted']
+  };
+};

package/lib/theme/ColorSchemes/components/label.d.ts

@@ -0,0 +1,6 @@
+import { FunctionalColorScheme } from '..';
+import { PillLabelStatus as Variant } from '../../../PillLabel/PillLabel.types';
+declare type Element = 'icon' | 'text' | 'background';
+declare type LabelKey = `label-${Variant}-${Element}`;
+export declare const label: (colors: FunctionalColorScheme) => Record<LabelKey, string>;
+export {};