@orfium/ictinus 4.21.0 → 4.23.0

package/dist/theme/index.d.ts

@@ -1,36 +1,4 @@
-import { Elevation } from './elevation';
-import { Overrides } from './overrides';
-import { colorShades, flatColors, mainTypes, paleColors, Palette } from './palette';
-import { PaletteConfig } from './palette.config';
-import { Spacing } from './spacing';
-import { Typography } from './typography';
-declare type TextColorTypes = 'primary' | 'secondary' | 'light';
-export declare type ThemeConfig = {
-    palette: PaletteConfig;
-    typography: Typography;
-    spacing: Spacing;
-    elevation: Elevation;
-    overrides: Overrides;
-    isDark: boolean;
-};
-declare type GetColor = {
-    (color: typeof flatColors[number], variant: typeof colorShades[number]): string;
-    (color: typeof flatColors[number], variant: typeof colorShades[number], scope: 'flat'): string;
-    (color: TextColorTypes, variant: typeof colorShades[number], scope: 'text'): string;
-    (color: typeof mainTypes[number], variant: typeof colorShades[number], scope: 'normal'): string;
-    (color: typeof paleColors[number], variant: null, scope: 'pale'): string;
-};
-export declare type Theme = {
-    palette: Palette;
-    typography: Typography;
-    spacing: Spacing;
-    elevation: Elevation;
-    isDark: boolean;
-    overrides: Overrides;
-    utils: {
-        getColor: GetColor;
-    };
-};
-export declare const getColor: (palette: Palette) => GetColor;
+import { TextColorTypes, Theme, ThemeConfig } from './types';
 declare const defaultTheme: (theming: 'dark' | 'light') => Theme;
+export { TextColorTypes, Theme, ThemeConfig };
 export default defaultTheme;

package/dist/theme/index.js

@@ -1,44 +1,32 @@
 "use strict";
 
 exports.__esModule = true;
-exports["default"] = exports.getColor = void 0;
+exports["default"] = void 0;
 
 var _elevation = _interopRequireDefault(require("./elevation"));
 
 var _overrides = _interopRequireDefault(require("./overrides"));
 
-var _palette = require("./palette.config");
+var _palette = require("./palette");
+
+var _palette2 = require("./palette.config");
 
 var _spacing = _interopRequireDefault(require("./spacing"));
 
+var _types = require("./types");
+
+exports.TextColorTypes = _types.TextColorTypes;
+exports.Theme = _types.Theme;
+exports.ThemeConfig = _types.ThemeConfig;
+
 var _typography = _interopRequireDefault(require("./typography"));
 
 var _utils = require("./utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var getColor = function getColor(palette) {
-  return function (color, variant, scope) {
-    var _palette$scope, _palette$scope2, _palette$scope2$color;
-
-    if (scope === void 0) {
-      scope = 'flat';
-    }
-
-    var endColor = variant === null ? palette == null ? void 0 : (_palette$scope = palette[scope]) == null ? void 0 : _palette$scope[color] : scope === 'normal' ? palette[color][variant] : palette == null ? void 0 : (_palette$scope2 = palette[scope]) == null ? void 0 : (_palette$scope2$color = _palette$scope2[color]) == null ? void 0 : _palette$scope2$color[variant];
-
-    if (!endColor) {
-      throw new Error('No color found with that name');
-    }
-
-    return endColor;
-  };
-};
-
-exports.getColor = getColor;
-
 var defaultTheme = function defaultTheme(theming) {
-  var palette = theming === 'light' ? (0, _utils.enhancePaletteWithShades)(_palette.lightPaletteConfig) : (0, _utils.enhancePaletteWithShades)(_palette.darkPaletteConfig);
+  var palette = theming === 'light' ? (0, _utils.enhancePaletteWithShades)(_palette2.lightPaletteConfig) : (0, _utils.enhancePaletteWithShades)(_palette2.darkPaletteConfig);
   return {
     palette: palette,
     typography: _typography["default"],
@@ -47,12 +35,12 @@ var defaultTheme = function defaultTheme(theming) {
     isDark: false,
     overrides: _overrides["default"],
     utils: {
-      getColor: getColor(palette)
+      getColor: (0, _palette.getColor)(palette),
+      getAAColorFromSwatches: (0, _palette.getAAColorFromSwatches)(palette),
+      getAAColor: (0, _palette.getAAColor)(palette)
     }
   };
 };
-/* Declare any static variables here e.g. $gray: #888; */
-
 
 var _default = defaultTheme;
 exports["default"] = _default;

package/dist/theme/palette.d.ts

@@ -1,5 +1,5 @@
+import { TextColorTypes } from './index';
 export declare const neutralColors: readonly ["neutralWhite", "neutralBlack"];
-export declare const BASE_SHADE = 500;
 /**
  * Here are listed all the colors available for our project
  * Flat colors are the actual colors of the system
@@ -18,6 +18,9 @@ export declare const paleColors: readonly ["greyScale", "darkGrey", "lightGrey",
  * default variation: 500
  **/
 export declare const colorShades: readonly [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950];
+export declare const MIN_SHADE = 50;
+export declare const BASE_SHADE = 500;
+export declare const MAX_SHADE = 950;
 /**
  * mainTypes are not colors per se but a type of color
  * for example error is red but also defines a state that's why is listed here and not in flat colors
@@ -42,9 +45,23 @@ export declare type Palette = {
     black: string;
 } & Record<typeof mainTypes[number], generatedColorShades>;
 export declare type formFieldStyles = 'filled' | 'outlined' | 'elevated';
+export declare type GetColor = {
+    (color: typeof flatColors[number], variant: typeof colorShades[number]): string;
+    (color: typeof flatColors[number], variant: typeof colorShades[number], scope: 'flat'): string;
+    (color: TextColorTypes, variant: typeof colorShades[number], scope: 'text'): string;
+    (color: typeof mainTypes[number], variant: typeof colorShades[number], scope: 'normal'): string;
+    (color: typeof paleColors[number], variant: null, scope: 'pale'): string;
+};
+export declare const getColor: (palette: Palette) => GetColor;
 /**
  * this function picks either white or black color based on the background that is passed
- * swatches are calculated based on accessibility by getAATextColor function and splited to those two colors
+ * swatches are calculated based on accessibility by getAAColor function and splited to those two colors
  **/
-export declare const pickTextColorFromSwatches: (color: typeof flatColors[number], shade: typeof colorShades[number]) => string;
-export declare const getAATextColor: (color: string) => string;
+export declare type GetAAColorFromSwatches = {
+    (color: typeof flatColors[number], variant: typeof colorShades[number]): string;
+};
+export declare const getAAColorFromSwatches: (palette: Palette) => GetAAColorFromSwatches;
+export declare type GetAAColor = {
+    (color: string): string;
+};
+export declare const getAAColor: (palette: Palette) => GetAAColor;

package/dist/theme/palette.js

@@ -1,25 +1,17 @@
 "use strict";
 
 exports.__esModule = true;
-exports.getAATextColor = exports.pickTextColorFromSwatches = exports.mainTypes = exports.colorShades = exports.paleColors = exports.flatColors = exports.BASE_SHADE = exports.neutralColors = void 0;
+exports.getAAColor = exports.getAAColorFromSwatches = exports.getColor = exports.mainTypes = exports.MAX_SHADE = exports.BASE_SHADE = exports.MIN_SHADE = exports.colorShades = exports.paleColors = exports.flatColors = exports.neutralColors = void 0;
 
 var _polished = require("polished");
 
-var _index = require("./index");
-
-var _palette = require("./palette.config");
-
-var _utils = require("./utils");
-
 var neutralColors = ['neutralWhite', 'neutralBlack'];
-exports.neutralColors = neutralColors;
-var BASE_SHADE = 500;
 /**
  * Here are listed all the colors available for our project
  * Flat colors are the actual colors of the system
  **/
 
-exports.BASE_SHADE = BASE_SHADE;
+exports.neutralColors = neutralColors;
 var flatColors = ['greyScale', 'darkGrey', 'lightGrey', 'red', 'magenta', 'purple', 'darkBlue', 'blue', 'lightBlue', 'teal', 'green', 'yellow', 'orange', 'darkOrange'].concat(neutralColors);
 /**
  * Here are listed all the colors available for our project
@@ -38,33 +30,62 @@ var paleColors = ['greyScale', 'darkGrey', 'lightGrey', 'red', 'magenta', 'purpl
 
 exports.paleColors = paleColors;
 var colorShades = [50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750, 800, 850, 900, 950];
+exports.colorShades = colorShades;
+var MIN_SHADE = 50;
+exports.MIN_SHADE = MIN_SHADE;
+var BASE_SHADE = 500;
+exports.BASE_SHADE = BASE_SHADE;
+var MAX_SHADE = 950;
 /**
  * mainTypes are not colors per se but a type of color
  * for example error is red but also defines a state that's why is listed here and not in flat colors
  * Each color has again the above variations (shades)
  **/
 
-exports.colorShades = colorShades;
+exports.MAX_SHADE = MAX_SHADE;
 var mainTypes = ['primary', 'secondary', 'success', 'error', 'warning', 'info', 'light', 'link'];
 exports.mainTypes = mainTypes;
 
+var getColor = function getColor(palette) {
+  return function (color, variant, scope) {
+    var _palette$scope, _palette$scope2, _palette$scope2$color;
+
+    if (scope === void 0) {
+      scope = 'flat';
+    }
+
+    var endColor = variant === null ? palette == null ? void 0 : (_palette$scope = palette[scope]) == null ? void 0 : _palette$scope[color] : scope === 'normal' ? palette[color][variant] : palette == null ? void 0 : (_palette$scope2 = palette[scope]) == null ? void 0 : (_palette$scope2$color = _palette$scope2[color]) == null ? void 0 : _palette$scope2$color[variant];
+
+    if (!endColor) {
+      throw new Error('No color found with that name');
+    }
+
+    return endColor;
+  };
+};
 /**
  * this function picks either white or black color based on the background that is passed
- * swatches are calculated based on accessibility by getAATextColor function and splited to those two colors
+ * swatches are calculated based on accessibility by getAAColor function and splited to those two colors
  **/
-var pickTextColorFromSwatches = function pickTextColorFromSwatches(color, shade) {
-  var palette = (0, _utils.enhancePaletteWithShades)(_palette.lightPaletteConfig);
-  var hexColorCode = (0, _index.getColor)(palette)(color, shade);
-  return getAATextColor(hexColorCode);
+
+
+exports.getColor = getColor;
+
+var getAAColorFromSwatches = function getAAColorFromSwatches(palette) {
+  return function (color, shade) {
+    var hexColorCode = getColor(palette)(color, shade);
+    return getAAColor(palette)(hexColorCode);
+  };
 };
 
-exports.pickTextColorFromSwatches = pickTextColorFromSwatches;
+exports.getAAColorFromSwatches = getAAColorFromSwatches;
 
-var getAATextColor = function getAATextColor(color) {
-  var palette = (0, _utils.enhancePaletteWithShades)(_palette.lightPaletteConfig);
-  var white = palette.white;
-  var black = palette.black;
-  return (0, _polished.getContrast)(color, black) > (0, _polished.getContrast)(color, white) ? black : white;
+var getAAColor = function getAAColor(palette) {
+  return function (color) {
+    var white = palette.white;
+    var black = palette.black;
+    return (0, _polished.getContrast)(color, black) > (0, _polished.getContrast)(color, white) ? black : white;
+  };
 };
 
-exports.getAATextColor = getAATextColor;
+exports.getAAColor = getAAColor;

package/dist/theme/states/disabled.d.ts

@@ -0,0 +1,12 @@
+export declare type GetDisabled = {
+    style: {
+        opacity: number;
+        cursor: string;
+    };
+    opacity: number;
+    cursor: string;
+};
+/**
+ * On disabled opacity is dropped in half and cursor is 'not-allowed'
+ * **/
+export declare const getDisabled: () => GetDisabled;

package/dist/theme/states/disabled.js

@@ -0,0 +1,25 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getDisabled = void 0;
+
+var _statesConfig = require("./statesConfig");
+
+var opacityAmount = _statesConfig.statesConfig.disabled.opacity.amount;
+var cursor = _statesConfig.statesConfig.disabled.cursor.name;
+/**
+ * On disabled opacity is dropped in half and cursor is 'not-allowed'
+ * **/
+
+var getDisabled = function getDisabled() {
+  return {
+    style: {
+      opacity: opacityAmount,
+      cursor: cursor
+    },
+    opacity: opacityAmount,
+    cursor: cursor
+  };
+};
+
+exports.getDisabled = getDisabled;

package/dist/theme/states/focus.d.ts

@@ -0,0 +1,16 @@
+import { Theme } from '../index';
+export declare type Props = {
+    theme: Theme;
+    borderWidth?: number;
+};
+export declare type GetFocus = {
+    borderWidth: string;
+    focusColor: string;
+    styleBorder: string;
+    styleOutline: string;
+};
+/**
+ * On focus border is darken by one step in shade.
+ * If we exceed the maximum value then we lighten it.
+ * This will be reviewed when dark theme is implemented. **/
+export declare const getFocus: ({ theme, borderWidth }: Props) => GetFocus;

package/dist/theme/states/focus.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getFocus = void 0;
+
+var _utils = require("../utils");
+
+var _statesConfig = require("./statesConfig");
+
+var borderWidthStep = _statesConfig.statesConfig.focus.border.width.step;
+var borderColor = _statesConfig.statesConfig.focus.border.color;
+/**
+ * On focus border is darken by one step in shade.
+ * If we exceed the maximum value then we lighten it.
+ * This will be reviewed when dark theme is implemented. **/
+
+var getFocus = function getFocus(_ref) {
+  var theme = _ref.theme,
+      _ref$borderWidth = _ref.borderWidth,
+      borderWidth = _ref$borderWidth === void 0 ? 0 : _ref$borderWidth;
+  var calculatedBorderWidth = borderWidth + borderWidthStep;
+  var focusColor = theme.utils.getColor(borderColor.name, borderColor.shade);
+  return {
+    borderWidth: (0, _utils.rem)(calculatedBorderWidth),
+    focusColor: focusColor,
+    styleBorder: (0, _utils.rem)(calculatedBorderWidth) + " solid " + focusColor,
+    styleOutline: focusColor + " auto " + (0, _utils.rem)(calculatedBorderWidth)
+  };
+};
+
+exports.getFocus = getFocus;

package/dist/theme/states/hover.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from '../index';
+import { colorShades, flatColors } from '../palette';
+export declare type Props = {
+    theme: Theme;
+    color?: typeof flatColors[number];
+    shade?: typeof colorShades[number] | 0;
+};
+export declare type GetHover = {
+    backgroundColor: string;
+};
+/**
+ * On hover background is darken by one step in shade.
+ * If we exceed the maximum value then we lighten it.
+ * This will be reviewed when dark theme is implemented. **/
+export declare const getHover: ({ theme, color, shade }: Props) => GetHover;

package/dist/theme/states/hover.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getHover = void 0;
+
+var _statesConfig = require("./statesConfig");
+
+var _utils = require("./utils");
+
+var backgroundColorStep = _statesConfig.statesConfig.hover.backgroundColor.step;
+/**
+ * On hover background is darken by one step in shade.
+ * If we exceed the maximum value then we lighten it.
+ * This will be reviewed when dark theme is implemented. **/
+
+var getHover = function getHover(_ref) {
+  var theme = _ref.theme,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'lightGrey' : _ref$color,
+      _ref$shade = _ref.shade,
+      shade = _ref$shade === void 0 ? 0 : _ref$shade;
+  var calculatedShade = (0, _utils.getShadeWithStep)({
+    shade: shade,
+    step: backgroundColorStep
+  });
+  return {
+    backgroundColor: theme.utils.getColor(color, calculatedShade)
+  };
+};
+
+exports.getHover = getHover;

package/dist/theme/states/index.d.ts

@@ -0,0 +1,5 @@
+import { getDisabled } from './disabled';
+import { getFocus } from './focus';
+import { getHover } from './hover';
+import { getPressed } from './pressed';
+export { getHover, getFocus, getPressed, getDisabled };

package/dist/theme/states/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+exports.__esModule = true;
+
+var _disabled = require("./disabled");
+
+exports.getDisabled = _disabled.getDisabled;
+
+var _focus = require("./focus");
+
+exports.getFocus = _focus.getFocus;
+
+var _hover = require("./hover");
+
+exports.getHover = _hover.getHover;
+
+var _pressed = require("./pressed");
+
+exports.getPressed = _pressed.getPressed;

package/dist/theme/states/pressed.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from '../index';
+import { colorShades, flatColors } from '../palette';
+export declare type Props = {
+    theme: Theme;
+    color?: typeof flatColors[number];
+    shade?: typeof colorShades[number] | 0;
+};
+export declare type GetPressed = {
+    backgroundColor: string;
+};
+/**
+ * On pressed background is darken by two steps in shade.
+ * If we exceed the maximum value then we lighten it by two steps.
+ * This will be reviewed when dark theme is implemented. **/
+export declare const getPressed: ({ theme, color, shade }: Props) => GetPressed;

package/dist/theme/states/pressed.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getPressed = void 0;
+
+var _statesConfig = require("./statesConfig");
+
+var _utils = require("./utils");
+
+var backgroundColorStep = _statesConfig.statesConfig.pressed.backgroundColor.step;
+/**
+ * On pressed background is darken by two steps in shade.
+ * If we exceed the maximum value then we lighten it by two steps.
+ * This will be reviewed when dark theme is implemented. **/
+
+var getPressed = function getPressed(_ref) {
+  var theme = _ref.theme,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'lightGrey' : _ref$color,
+      _ref$shade = _ref.shade,
+      shade = _ref$shade === void 0 ? 0 : _ref$shade;
+  var calculatedShade = (0, _utils.getShadeWithStep)({
+    shade: shade,
+    step: backgroundColorStep
+  });
+  return {
+    backgroundColor: theme.utils.getColor(color, calculatedShade)
+  };
+};
+
+exports.getPressed = getPressed;

package/dist/theme/states/statesConfig.d.ts

@@ -0,0 +1,34 @@
+import { colorShades, flatColors } from '../palette';
+declare type StatesConfig = {
+    hover: {
+        backgroundColor: {
+            step: number;
+        };
+    };
+    focus: {
+        border: {
+            width: {
+                step: number;
+            };
+            color: {
+                name: typeof flatColors[number];
+                shade: typeof colorShades[number];
+            };
+        };
+    };
+    pressed: {
+        backgroundColor: {
+            step: number;
+        };
+    };
+    disabled: {
+        opacity: {
+            amount: number;
+        };
+        cursor: {
+            name: string;
+        };
+    };
+};
+export declare const statesConfig: StatesConfig;
+export {};

package/dist/theme/states/statesConfig.js

@@ -0,0 +1,36 @@
+"use strict";
+
+exports.__esModule = true;
+exports.statesConfig = void 0;
+var statesConfig = {
+  hover: {
+    backgroundColor: {
+      step: 50
+    }
+  },
+  focus: {
+    border: {
+      width: {
+        step: 1
+      },
+      color: {
+        name: 'magenta',
+        shade: 500
+      }
+    }
+  },
+  pressed: {
+    backgroundColor: {
+      step: 100
+    }
+  },
+  disabled: {
+    opacity: {
+      amount: 0.5
+    },
+    cursor: {
+      name: 'not-allowed'
+    }
+  }
+};
+exports.statesConfig = statesConfig;

package/dist/theme/states/utils.d.ts

@@ -0,0 +1,7 @@
+import { colorShades } from '../palette';
+declare type Props = {
+    shade: typeof colorShades[number] | 0;
+    step: number;
+};
+export declare const getShadeWithStep: ({ shade, step }: Props) => typeof colorShades[number];
+export {};

package/dist/theme/states/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getShadeWithStep = void 0;
+
+var _palette = require("../palette");
+
+var getShadeWithStep = function getShadeWithStep(_ref) {
+  var _ref$shade = _ref.shade,
+      shade = _ref$shade === void 0 ? 0 : _ref$shade,
+      _ref$step = _ref.step,
+      step = _ref$step === void 0 ? 50 : _ref$step;
+  var calculatedShade = shade;
+
+  if (shade + step > _palette.MAX_SHADE) {
+    calculatedShade -= step;
+  } else {
+    calculatedShade += step;
+  }
+
+  return calculatedShade;
+};
+
+exports.getShadeWithStep = getShadeWithStep;

package/dist/theme/types.d.ts

@@ -0,0 +1,28 @@
+import { Elevation } from './elevation';
+import { Overrides } from './overrides';
+import { GetAAColor, GetAAColorFromSwatches, GetColor, Palette } from './palette';
+import { PaletteConfig } from './palette.config';
+import { Spacing } from './spacing';
+import { Typography } from './typography';
+export declare type TextColorTypes = 'primary' | 'secondary' | 'light';
+export declare type ThemeConfig = {
+    palette: PaletteConfig;
+    typography: Typography;
+    spacing: Spacing;
+    elevation: Elevation;
+    overrides: Overrides;
+    isDark: boolean;
+};
+export declare type Theme = {
+    palette: Palette;
+    typography: Typography;
+    spacing: Spacing;
+    elevation: Elevation;
+    isDark: boolean;
+    overrides: Overrides;
+    utils: {
+        getColor: GetColor;
+        getAAColorFromSwatches: GetAAColorFromSwatches;
+        getAAColor: GetAAColor;
+    };
+};

package/dist/theme/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+exports.__esModule = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "4.21.0",
+  "version": "4.23.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",