@orfium/ictinus 5.5.0 → 5.5.1

package/dist/src/theme/globals/spacing.d.ts

@@ -0,0 +1,8 @@
+import { default as spacingFigma } from './constants/spacing';
+
+export type SpacingKey = keyof typeof spacingFigma;
+export type Spacing = {
+    get: (val: SpacingKey, fn?: (val: string) => unknown) => string;
+};
+declare const spacing: Spacing;
+export default spacing;

package/dist/src/theme/globals/typography.d.ts

@@ -0,0 +1,54 @@
+import { default as fontFamilyFigma } from './constants/fontFamily';
+import { default as fontSizeFigma } from './constants/fontSize';
+import { default as fontWeightFigma } from './constants/fontWeight';
+import { default as letterSpacingFigma } from './constants/letterSpacing';
+import { default as lineHeightFigma } from './constants/lineHeight';
+import { default as textCaseFigma } from './constants/textCase';
+import { default as textDecorationFigma } from './constants/textDecoration';
+
+export type FontSizeKey = keyof typeof fontSizeFigma;
+export type FontWeightKey = keyof typeof fontWeightFigma;
+export type FontFamilyKey = keyof typeof fontFamilyFigma;
+export type LineHeightKey = keyof typeof lineHeightFigma;
+export type LetterSpacingKey = keyof typeof letterSpacingFigma;
+export type TextCaseKey = keyof typeof textCaseFigma;
+export type TextDecorationKey = keyof typeof textDecorationFigma;
+export type FontSize = {
+    get: (val: FontSizeKey, fn?: (val: string) => unknown) => string;
+    /** @TODO remove this custom font-sizes*/
+    '8': string;
+    '11': string;
+    '13': string;
+    '15': string;
+};
+export type FontWeight = {
+    get: (val: FontWeightKey, fn?: (val: string) => unknown) => number;
+};
+export type FontFamily = {
+    get: (val: FontFamilyKey, fn?: (val: string) => unknown) => string;
+};
+export type LineHeight = {
+    get: (val: LineHeightKey, fn?: (val: string) => unknown) => string;
+};
+export type LetterSpacing = {
+    get: (val: LetterSpacingKey, fn?: (val: string) => unknown) => string;
+};
+export type TextCase = {
+    get: (val: TextCaseKey, fn?: (val: string) => unknown) => string;
+};
+export type TextDecoration = {
+    get: (val: TextDecorationKey, fn?: (val: string) => unknown) => string;
+};
+export type Typography = {
+    globalFontSize: number;
+    fontSize: FontSize;
+    fontWeight: FontWeight;
+    fontFamily: FontFamily;
+    defaultFontFamily: string;
+    lineHeight: LineHeight;
+    letterSpacing: LetterSpacing;
+    textCase: TextCase;
+    textDecoration: TextDecoration;
+};
+declare const typography: Typography;
+export default typography;

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

@@ -0,0 +1,5 @@
+import { ColorScheme, TextColorTypes, Theme, ThemeConfig } from './types';
+
+declare const defaultTheme: (theming: ColorScheme) => Theme;
+export { TextColorTypes, Theme, ThemeConfig };
+export default defaultTheme;

package/dist/src/theme/overrides.d.ts

@@ -0,0 +1,3 @@
+export type Overrides = Record<string, any>;
+declare const overrides: Overrides;
+export default overrides;

package/dist/src/theme/palette.config.d.ts

@@ -0,0 +1,46 @@
+import { flatColors, paleColors } from './palette';
+
+export type FlatPaletteConfig = Partial<Record<typeof flatColors[number], string>>;
+/** @TODO remove this when all components are revisited for v5 */
+export type PalePaletteConfig = Partial<Record<typeof paleColors[number], string>>;
+/** @TODO remove this when all components are revisited for v5 */
+export type TextPaletteConfig = {
+    primary?: string;
+    secondary?: string;
+    light?: string;
+};
+export type NeutralPaletteConfig = {
+    light?: string;
+    dark?: string;
+    grey?: string;
+    transparent?: string;
+};
+export type GradientPaletteConfig = {
+    primary?: string;
+    secondary?: string;
+    tertiary?: string;
+    upsell?: string;
+    inverted?: string;
+};
+export type PaletteConfig = {
+    flat?: FlatPaletteConfig;
+    gradient?: GradientPaletteConfig;
+    neutral?: NeutralPaletteConfig;
+    /** @TODO remove all these when all components are revisited for v5 */
+    primary?: string;
+    secondary?: string;
+    success?: string;
+    error?: string;
+    warning?: string;
+    info?: string;
+    light?: string;
+    link?: string;
+    text?: TextPaletteConfig;
+    pale?: PalePaletteConfig;
+    white?: string;
+    black?: string;
+};
+export declare const flatPaletteConfig: Record<typeof flatColors[number], string>;
+/** @TODO remove all these when all components are revisited for v5 */
+export declare const palePaletteConfig: Record<typeof paleColors[number], string>;
+export declare const paletteConfig: PaletteConfig;

package/dist/src/theme/palette.d.ts

@@ -0,0 +1,74 @@
+import { TextColorTypes } from './index';
+import { GradientPaletteConfig, NeutralPaletteConfig } from './palette.config';
+
+export declare const neutralColors: readonly ["neutralWhite", "neutralBlack"];
+export declare const colorSchemes: readonly ["semantic", "dark"];
+/**
+ * Here are listed all the colors available for our project
+ * Flat colors are the actual colors of the system
+ **/
+export declare const flatColors: readonly ["greyScale", "darkGrey", "lightGrey", "red", "magenta", "lightPurple", "purple", "darkBlue", "blue", "lightBlue", "teal", "green", "yellow", "orange", "darkOrange", "neutralWhite", "neutralBlack"];
+/**
+ * Here are listed all the colors available for our project
+ * Pale colors are just colors without shades
+ **/
+/** @TODO remove all these when all components are revisited for v5 */
+export declare const paleColors: readonly ["greyScale", "darkGrey", "lightGrey", "red", "magenta", "lightPurple", "purple", "darkBlue", "blue", "lightBlue", "teal", "green", "yellow", "orange"];
+/**
+ * Here are listed all the color shades
+ * Each colors of the flat palette is generated with these variations
+ * E.g red.100 = color or yellow.500 = color
+ * so there is no yellow but variations of yellow
+ * 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
+ * Each color has again the above variations (shades)
+ **/
+export declare const mainTypes: readonly ["primary", "secondary", "success", "error", "warning", "info", "light", "link"];
+export type FlatPalette = Record<(typeof flatColors)[number], GeneratedColorShades>;
+export type PalePalette = Record<(typeof paleColors)[number], string>;
+export type GeneratedColorShades = Record<(typeof colorShades)[number], string>;
+/**
+ * Palette is end output of what is produced and exported to the client projects
+ **/
+export type Palette = {
+    flat: FlatPalette;
+    neutral: NeutralPaletteConfig;
+    gradient: GradientPaletteConfig;
+    /** @TODO remove all these when all components are revisited for v5 */
+    text: {
+        primary: GeneratedColorShades;
+        secondary: GeneratedColorShades;
+        light: GeneratedColorShades;
+    };
+    pale: PalePalette;
+    white: string;
+    black: string;
+} & Record<(typeof mainTypes)[number], GeneratedColorShades>;
+export type formFieldStyles = 'filled' | 'outlined' | 'elevated';
+export 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 getAAColor function and splited to those two colors
+ **/
+export type GetAAColorFromSwatches = {
+    (color: (typeof flatColors)[number], variant: (typeof colorShades)[number]): string;
+};
+export declare const getAAColorFromSwatches: (palette: Palette) => GetAAColorFromSwatches;
+export type GetAAColor = {
+    (color: string): string;
+};
+export declare const getAAColor: (palette: Palette) => GetAAColor;

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

@@ -0,0 +1,12 @@
+export 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/src/theme/states/focus.d.ts

@@ -0,0 +1,17 @@
+import { Theme } from '../index';
+
+export type GetFocusProps = {
+    theme: Theme;
+    borderWidth?: number;
+};
+export 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 }: GetFocusProps) => GetFocus;

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

@@ -0,0 +1,16 @@
+import { Theme } from '../index';
+import { colorShades, flatColors } from '../palette';
+
+export type HoverProps = {
+    theme: Theme;
+    color?: (typeof flatColors)[number];
+    shade?: (typeof colorShades)[number] | 0;
+};
+export 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 }: HoverProps) => GetHover;

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

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

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

@@ -0,0 +1,16 @@
+import { Theme } from '../index';
+import { colorShades, flatColors } from '../palette';
+
+export type GetPressedProps = {
+    theme: Theme;
+    color?: (typeof flatColors)[number];
+    shade?: (typeof colorShades)[number] | 0;
+};
+export 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 }: GetPressedProps) => GetPressed;

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

@@ -0,0 +1,37 @@
+import { colorSchemes, colorShades, flatColors } from '../palette';
+
+type StateConfig = {
+    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 semanticStatesConfig: StateConfig;
+export declare const darkStatesConfig: StateConfig;
+export declare const statesConfig: Record<typeof colorSchemes[number], StateConfig>;
+export {};

package/dist/src/theme/states/tests/states.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/src/theme/tests/utils.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/theme/tokens/components/variables/avatar.d.ts

@@ -0,0 +1,103 @@
+declare const avatar: {
+    readonly size: {
+        readonly '1': {
+            readonly value: "{sizing.5}";
+            readonly type: "sizing";
+            readonly description: "Sets avatar size 1";
+        };
+        readonly '2': {
+            readonly value: "{sizing.6}";
+            readonly type: "sizing";
+            readonly description: "Sets avatar size 2";
+        };
+        readonly '3': {
+            readonly value: "{sizing.8}";
+            readonly type: "sizing";
+            readonly description: "Sets avatar size 3";
+        };
+        readonly '4': {
+            readonly value: "{sizing.12}";
+            readonly type: "sizing";
+            readonly description: "Sets avatar size 4";
+        };
+        readonly '5': {
+            readonly value: "{sizing.15}";
+            readonly type: "sizing";
+            readonly description: "Sets avatar size 5";
+        };
+        readonly '6': {
+            readonly value: "{sizing.18}";
+            readonly type: "sizing";
+            readonly description: "Sets avatar size 6";
+        };
+    };
+    readonly label: {
+        readonly '1': {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly fontSize: "{fontSize.1}";
+                readonly lineHeight: "{lineHeight.1}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Sets text style for avatar size 1";
+        };
+        readonly '2': {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly fontSize: "{fontSize.2}";
+                readonly lineHeight: "{lineHeight.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Sets text style for avatar size 2";
+        };
+        readonly '3': {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly fontSize: "{fontSize.3}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Sets text style for avatar size 3";
+        };
+        readonly '4': {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly fontSize: "{fontSize.4}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly letterSpacing: "{letterSpacing.1}";
+            };
+            readonly type: "typography";
+            readonly description: "Sets text style for avatar size 4";
+        };
+        readonly '5': {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly fontSize: "{fontSize.8}";
+                readonly lineHeight: "{lineHeight.8}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Sets text style for avatar size 5";
+        };
+        readonly '6': {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly fontSize: "{fontSize.10}";
+                readonly lineHeight: "{lineHeight.10}";
+                readonly letterSpacing: "{letterSpacing.0}";
+            };
+            readonly type: "typography";
+            readonly description: "Sets text style for avatar size 6";
+        };
+    };
+};
+export default avatar;

package/dist/src/theme/tokens/components/variables/button.d.ts

@@ -0,0 +1,27 @@
+declare const button: {
+    readonly compact: {
+        readonly size: {
+            readonly value: "{sizing.7}";
+            readonly type: "sizing";
+            readonly description: "Sets size for iconButton ('compact' variant)";
+        };
+        readonly padding: {
+            readonly value: "{spacing.0} {spacing.4} {spacing.0} {spacing.4}";
+            readonly type: "spacing";
+            readonly description: "Sets horizontal/vertical padding for 'compact' textButton";
+        };
+    };
+    readonly normal: {
+        readonly size: {
+            readonly value: "{sizing.9}";
+            readonly type: "sizing";
+            readonly description: "Sets size for iconButtons";
+        };
+        readonly padding: {
+            readonly value: "{spacing.0} {spacing.6} {spacing.0} {spacing.6}";
+            readonly type: "spacing";
+            readonly description: "Sets horizontal/vertical padding for 'normal' textButton";
+        };
+    };
+};
+export default button;

package/dist/src/theme/tokens/components/variables/controls.d.ts

@@ -0,0 +1,19 @@
+declare const controls: {
+    readonly switch: {
+        readonly height: {
+            readonly track: {
+                readonly value: "{sizing.2}";
+                readonly type: "sizing";
+                readonly description: "Sets the height of the track";
+            };
+        };
+        readonly width: {
+            readonly track: {
+                readonly value: "{sizing.9}";
+                readonly type: "sizing";
+                readonly description: "Sets the width of the track";
+            };
+        };
+    };
+};
+export default controls;

package/dist/src/theme/tokens/components/variables/datePicker.d.ts

@@ -0,0 +1,18 @@
+declare const datePicker: {
+    readonly dateSize: {
+        readonly value: "{sizing.9}";
+        readonly type: "sizing";
+        readonly description: "Sets fixed size for _block date ";
+    };
+    readonly actionsContainer: {
+        readonly value: "{sizing.15}";
+        readonly type: "sizing";
+        readonly description: "Sets fixed height for date picker button container";
+    };
+    readonly fieldWidth: {
+        readonly value: "{sizing.21}";
+        readonly type: "sizing";
+        readonly description: "Sets fixed width for date picker fields";
+    };
+};
+export default datePicker;

package/dist/src/theme/tokens/components/variables/field.d.ts

@@ -0,0 +1,93 @@
+declare const field: {
+    readonly addOn: {
+        readonly height: {
+            readonly normal: {
+                readonly value: "{sizing.13}";
+                readonly type: "sizing";
+                readonly description: "Sets fixed height for _block addOn (normal variant)";
+            };
+            readonly compact: {
+                readonly value: "{sizing.7}";
+                readonly type: "sizing";
+                readonly description: "Sets fixed height for _block addOn (compact variant)";
+            };
+        };
+        readonly padding: {
+            readonly normal: {
+                readonly value: "{spacing.0} {spacing.5} {spacing.0} {spacing.4}";
+                readonly type: "spacing";
+                readonly description: "Sets horizontal/vertical padding for 'normal' field--addOn";
+            };
+            readonly compact: {
+                readonly value: "{spacing.0} {spacing.4} {spacing.0} {spacing.3}";
+                readonly type: "spacing";
+                readonly description: "Sets horizontal/vertical padding for 'compact' field--addOn";
+            };
+            readonly textArea: {
+                readonly value: "{spacing.6} {spacing.5} {spacing.6} {spacing.5}";
+                readonly type: "spacing";
+                readonly description: "Sets horizontal/vertical padding for text area";
+            };
+        };
+    };
+    readonly container: {
+        readonly normal: {
+            readonly value: "{sizing.13}";
+            readonly type: "sizing";
+            readonly description: "Sets fixed height for field content container";
+        };
+        readonly compact: {
+            readonly value: "{sizing.7}";
+            readonly type: "sizing";
+            readonly description: "Sets fixed height for compact field content container";
+        };
+    };
+    readonly minWidth: {
+        readonly small: {
+            readonly normal: {
+                readonly value: "140px";
+                readonly type: "sizing";
+                readonly description: "Sets 'small' minimum width for base field (normal size)";
+            };
+            readonly compact: {
+                readonly value: "70px";
+                readonly type: "sizing";
+                readonly description: "Sets 'small' minimum width for base field (compact size)";
+            };
+        };
+        readonly large: {
+            readonly normal: {
+                readonly value: "240px";
+                readonly type: "sizing";
+                readonly description: "Sets 'large' minimum width for base field (normal size)";
+            };
+        };
+        readonly medium: {
+            readonly normal: {
+                readonly value: "160px";
+                readonly type: "sizing";
+                readonly description: "Sets 'medium' minimum width for base field (normal size)";
+            };
+            readonly compact: {
+                readonly value: "90px";
+                readonly type: "sizing";
+                readonly description: "Sets 'medium' minimum width for base field (compact size)";
+            };
+        };
+        readonly extraLarge: {
+            readonly normal: {
+                readonly value: "260px";
+                readonly type: "sizing";
+                readonly description: "Sets 'large' minimum width for base field (normal size)";
+            };
+        };
+    };
+    readonly content: {
+        readonly padding: {
+            readonly value: "{spacing.0} {spacing.0} {spacing.0} {spacing.5}";
+            readonly type: "spacing";
+            readonly description: "Sets horizontal/vertical padding for field content";
+        };
+    };
+};
+export default field;

package/dist/src/theme/tokens/components/variables/filter.d.ts

@@ -0,0 +1,8 @@
+declare const filter: {
+    readonly height: {
+        readonly value: "{sizing.9}";
+        readonly type: "sizing";
+        readonly description: "Sets fixed height for filter";
+    };
+};
+export default filter;

package/dist/src/theme/tokens/components/variables/link.d.ts

@@ -0,0 +1,58 @@
+declare const link: {
+    readonly block: {
+        readonly '1': {
+            readonly value: "{sem.typography.normal.label01}";
+            readonly type: "typography";
+            readonly description: "Sets text for block link ('large' variant)";
+        };
+        readonly '2': {
+            readonly value: "{sem.typography.normal.label02}";
+            readonly type: "typography";
+            readonly description: "Sets text for block link ('medium' variant)";
+        };
+        readonly '3': {
+            readonly value: "{sem.typography.normal.label03}";
+            readonly type: "typography";
+            readonly description: "Sets text for block link ('small' variant)";
+        };
+    };
+    readonly inline: {
+        readonly '1': {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly fontSize: "{fontSize.4}";
+                readonly lineHeight: "{lineHeight.5}";
+                readonly letterSpacing: "{letterSpacing.1}";
+                readonly textDecoration: "{textDecoration.link}";
+            };
+            readonly type: "typography";
+            readonly description: "Sets text for inline link ('large' variant)";
+        };
+        readonly '2': {
+            readonly value: {
+                readonly textDecoration: "{textDecoration.link}";
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly fontSize: "{fontSize.3}";
+                readonly lineHeight: "{lineHeight.4}";
+                readonly letterSpacing: "{letterSpacing.2}";
+            };
+            readonly type: "typography";
+            readonly description: "Sets text for inline link ('medium' variant)";
+        };
+        readonly '3': {
+            readonly value: {
+                readonly fontFamily: "{fontFamily.roboto}";
+                readonly fontWeight: "{fontWeight.medium}";
+                readonly fontSize: "{fontSize.2}";
+                readonly lineHeight: "{lineHeight.3}";
+                readonly letterSpacing: "{letterSpacing.2}";
+                readonly textDecoration: "{textDecoration.link}";
+            };
+            readonly type: "typography";
+            readonly description: "Sets text for inline link ('small' variant)";
+        };
+    };
+};
+export default link;