creactive 0.0.126 → 0.0.128

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/build/classic.js +4 -3
  2. package/build/components/text/constants/index.d.ts +1 -1
  3. package/build/components/text/constants/text.d.ts +8 -0
  4. package/build/components/text/text.types.d.ts +9 -2
  5. package/build/components/view/constants/color.d.ts +19 -1
  6. package/build/contexts/theme/constants/color.d.ts +19 -10
  7. package/build/contexts/theme/constants/index.d.ts +1 -1
  8. package/build/contexts/theme/theme.types.d.ts +45 -0
  9. package/build/default.js +1 -1
  10. package/package.json +1 -1
package/build/components/text/constants/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  export { TEXT_COLOR_THEME_KEY, TextColor } from './color';
2
2
  export { TEXT_THEME_FONT_SIZE_KEY, TEXT_THEME_FONT_WEIGHT_KEY, TextFontFamily, TextFontSize, TextFontWeight, } from './font';
3
3
  export { TEXT_HTML_TAG, TextTag } from './tag';
4
- export { TEXT_THEME_LINE_HEIGHT_KEY, TextAlign, TextLineHeight } from './text';
4
+ export { TEXT_THEME_LINE_HEIGHT_KEY, TextAlign, TextDecoration, TextLineHeight, } from './text';
package/build/components/text/constants/text.d.ts CHANGED
@@ -7,6 +7,14 @@ export declare enum TextAlign {
7
7
  CENTER = 1,
8
8
  RIGHT = 2
9
9
  }
10
+ /**
11
+ * Available text color enum.
12
+ * Should be used to control the color of the text.
13
+ */
14
+ export declare enum TextDecoration {
15
+ NONE = 0,
16
+ UNDERLINE = 1
17
+ }
10
18
  /**
11
19
  * Available text line height enum.
12
20
  * Should be used to control the line height of the text.
package/build/components/text/text.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import type { Fraction } from '../../helpers';
2
2
  import type { Color, FontWeight } from '../../types';
3
3
  import type { FunctionComponent, PropsWithChildren } from 'react';
4
- import type { TextAlign, TextColor, TextFontFamily, TextFontSize, TextFontWeight, TextLineHeight, TextTag } from './constants';
4
+ import type { TextAlign, TextColor, TextDecoration, TextFontFamily, TextFontSize, TextFontWeight, TextLineHeight, TextTag } from './constants';
5
5
  export interface TextProps extends PropsWithChildren {
6
6
  /**
7
7
  * Allows to control HTML tag to render.
@@ -16,6 +16,12 @@ export interface TextProps extends PropsWithChildren {
16
16
  * @default Text.Align.LEFT
17
17
  */
18
18
  align?: TextAlign;
19
+ /**
20
+ * Text decoration.
21
+ * @see Text.Decoration
22
+ * @default Text.Decoration.NONE
23
+ */
24
+ decoration?: TextDecoration;
19
25
  /**
20
26
  * Themed font family.
21
27
  * @see Text.FontFamily
@@ -61,13 +67,14 @@ export interface TextProps extends PropsWithChildren {
61
67
  export type TextComponent = FunctionComponent<TextProps> & {
62
68
  Tag: Record<keyof typeof TextTag, TextTag>;
63
69
  Align: Record<keyof typeof TextAlign, TextAlign>;
70
+ Decoration: Record<keyof typeof TextDecoration, TextDecoration>;
64
71
  FontFamily: Record<keyof typeof TextFontFamily, TextFontFamily>;
65
72
  FontWeight: Record<keyof typeof TextFontWeight, TextFontWeight>;
66
73
  FontSize: Record<keyof typeof TextFontSize, TextFontSize>;
67
74
  LineHeight: Record<keyof typeof TextLineHeight, TextLineHeight>;
68
75
  Color: Record<keyof typeof TextColor, TextColor>;
69
76
  };
70
- export type StyledTextrops = Pick<TextProps, 'align' | 'maxLines'> & {
77
+ export type StyledTextrops = Pick<TextProps, 'align' | 'decoration' | 'maxLines'> & {
71
78
  fontFamily: string;
72
79
  fontWeight: FontWeight;
73
80
  fontSize: number;
package/build/components/view/constants/color.d.ts CHANGED
@@ -37,7 +37,16 @@ export declare enum ViewBackgroundColor {
37
37
  BASE_600 = 5,
38
38
  BASE_700 = 6,
39
39
  BASE_800 = 7,
40
- BASE_900 = 8
40
+ BASE_900 = 8,
41
+ PRIMARY_100 = 9,
42
+ PRIMARY_200 = 10,
43
+ PRIMARY_300 = 11,
44
+ PRIMARY_400 = 12,
45
+ PRIMARY_500 = 13,
46
+ PRIMARY_600 = 14,
47
+ PRIMARY_700 = 15,
48
+ PRIMARY_800 = 16,
49
+ PRIMARY_900 = 17
41
50
  }
42
51
  export declare const VIEW_THEME_BACKGROUND_COLOR_KEY: {
43
52
  0: "colorBackgroundBase100";
@@ -49,4 +58,13 @@ export declare const VIEW_THEME_BACKGROUND_COLOR_KEY: {
49
58
  6: "colorBackgroundBase700";
50
59
  7: "colorBackgroundBase800";
51
60
  8: "colorBackgroundBase900";
61
+ 9: "colorBackgroundPrimary100";
62
+ 10: "colorBackgroundPrimary200";
63
+ 11: "colorBackgroundPrimary300";
64
+ 12: "colorBackgroundPrimary400";
65
+ 13: "colorBackgroundPrimary500";
66
+ 14: "colorBackgroundPrimary600";
67
+ 15: "colorBackgroundPrimary700";
68
+ 16: "colorBackgroundPrimary800";
69
+ 17: "colorBackgroundPrimary900";
52
70
  };
package/build/contexts/theme/constants/color.d.ts CHANGED
@@ -1,12 +1,21 @@
1
1
  export declare const COLOR_BACKGROUND_BASE_100 = "rgb(198,198,202)";
2
2
  export declare const COLOR_BACKGROUND_BASE_200 = "rgb(212,212,216)";
3
- export declare const COLOR_BACKGROUND_BASE_300 = "rgb(216,216,228)";
4
- export declare const COLOR_BACKGROUND_BASE_400 = "rgb(218,218,234)";
5
- export declare const COLOR_BACKGROUND_BASE_500 = "rgb(224,224,238)";
3
+ export declare const COLOR_BACKGROUND_BASE_300 = "rgb(226,224,228)";
4
+ export declare const COLOR_BACKGROUND_BASE_400 = "rgb(234,232,236)";
5
+ export declare const COLOR_BACKGROUND_BASE_500 = "rgb(238,236,240)";
6
6
  export declare const COLOR_BACKGROUND_BASE_600 = "rgb(244,244,245)";
7
7
  export declare const COLOR_BACKGROUND_BASE_700 = "rgb(247,247,249)";
8
8
  export declare const COLOR_BACKGROUND_BASE_800 = "rgb(249,249,250)";
9
9
  export declare const COLOR_BACKGROUND_BASE_900 = "rgb(254,254,255)";
10
+ export declare const COLOR_BACKGROUND_PRIMARY_100 = "rgb(102,102,116)";
11
+ export declare const COLOR_BACKGROUND_PRIMARY_200 = "rgb(82,82,92)";
12
+ export declare const COLOR_BACKGROUND_PRIMARY_300 = "rgb(74,74,88)";
13
+ export declare const COLOR_BACKGROUND_PRIMARY_400 = "rgb(63,63,70)";
14
+ export declare const COLOR_BACKGROUND_PRIMARY_500 = "rgb(49,49,56)";
15
+ export declare const COLOR_BACKGROUND_PRIMARY_600 = "rgb(39,39,42)";
16
+ export declare const COLOR_BACKGROUND_PRIMARY_700 = "rgb(30,30,34)";
17
+ export declare const COLOR_BACKGROUND_PRIMARY_800 = "rgb(24,24,27)";
18
+ export declare const COLOR_BACKGROUND_PRIMARY_900 = "rgb(6,6,14)";
10
19
  export declare const COLOR_BORDER_BASE_100 = "rgb(253,252,254)";
11
20
  export declare const COLOR_BORDER_BASE_200 = "rgb(249,249,250)";
12
21
  export declare const COLOR_BORDER_BASE_300 = "rgb(247,247,249)";
@@ -34,12 +43,12 @@ export declare const COLOR_FOREGROUND_INVERSE_600 = "rgb(244,244,245)";
34
43
  export declare const COLOR_FOREGROUND_INVERSE_700 = "rgb(247,247,249)";
35
44
  export declare const COLOR_FOREGROUND_INVERSE_800 = "rgb(249,249,250)";
36
45
  export declare const COLOR_FOREGROUND_INVERSE_900 = "rgb(254,254,255)";
37
- export declare const COLOR_FOREGROUND_FAILURE_100 = "rgb(254,226,226)";
38
- export declare const COLOR_FOREGROUND_FAILURE_200 = "rgb(254,202,202)";
39
- export declare const COLOR_FOREGROUND_FAILURE_300 = "rgb(252,165,165)";
40
- export declare const COLOR_FOREGROUND_FAILURE_400 = "rgb(248,113,113)";
41
- export declare const COLOR_FOREGROUND_FAILURE_500 = "rgb(239,68,68)";
42
- export declare const COLOR_FOREGROUND_FAILURE_600 = "rgb(220,38,38)";
43
- export declare const COLOR_FOREGROUND_FAILURE_700 = "rgb(185,28,28)";
46
+ export declare const COLOR_FOREGROUND_FAILURE_100 = "rgb(244,226,226)";
47
+ export declare const COLOR_FOREGROUND_FAILURE_200 = "rgb(234,202,202)";
48
+ export declare const COLOR_FOREGROUND_FAILURE_300 = "rgb(222,165,165)";
49
+ export declare const COLOR_FOREGROUND_FAILURE_400 = "rgb(214,113,113)";
50
+ export declare const COLOR_FOREGROUND_FAILURE_500 = "rgb(202,68,68)";
51
+ export declare const COLOR_FOREGROUND_FAILURE_600 = "rgb(184,38,38)";
52
+ export declare const COLOR_FOREGROUND_FAILURE_700 = "rgb(168,28,28)";
44
53
  export declare const COLOR_FOREGROUND_FAILURE_800 = "rgb(153,27,27)";
45
54
  export declare const COLOR_FOREGROUND_FAILURE_900 = "rgb(127,29,29)";
package/build/contexts/theme/constants/index.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export { BORDER_RADIUS_BASE_LG, BORDER_RADIUS_BASE_MD, BORDER_RADIUS_BASE_SM, BORDER_RADIUS_BASE_XL, BORDER_RADIUS_BASE_XS, BORDER_WIDTH_BASE_LG, BORDER_WIDTH_BASE_MD, BORDER_WIDTH_BASE_SM, } from './border';
2
- export { COLOR_BACKGROUND_BASE_100, COLOR_BACKGROUND_BASE_200, COLOR_BACKGROUND_BASE_300, COLOR_BACKGROUND_BASE_400, COLOR_BACKGROUND_BASE_500, COLOR_BACKGROUND_BASE_600, COLOR_BACKGROUND_BASE_700, COLOR_BACKGROUND_BASE_800, COLOR_BACKGROUND_BASE_900, COLOR_BORDER_BASE_100, COLOR_BORDER_BASE_200, COLOR_BORDER_BASE_300, COLOR_BORDER_BASE_400, COLOR_BORDER_BASE_500, COLOR_BORDER_BASE_600, COLOR_BORDER_BASE_700, COLOR_BORDER_BASE_800, COLOR_BORDER_BASE_900, COLOR_FOREGROUND_BASE_100, COLOR_FOREGROUND_BASE_200, COLOR_FOREGROUND_BASE_300, COLOR_FOREGROUND_BASE_400, COLOR_FOREGROUND_BASE_500, COLOR_FOREGROUND_BASE_600, COLOR_FOREGROUND_BASE_700, COLOR_FOREGROUND_BASE_800, COLOR_FOREGROUND_BASE_900, COLOR_FOREGROUND_FAILURE_100, COLOR_FOREGROUND_FAILURE_200, COLOR_FOREGROUND_FAILURE_300, COLOR_FOREGROUND_FAILURE_400, COLOR_FOREGROUND_FAILURE_500, COLOR_FOREGROUND_FAILURE_600, COLOR_FOREGROUND_FAILURE_700, COLOR_FOREGROUND_FAILURE_800, COLOR_FOREGROUND_FAILURE_900, COLOR_FOREGROUND_INVERSE_100, COLOR_FOREGROUND_INVERSE_200, COLOR_FOREGROUND_INVERSE_300, COLOR_FOREGROUND_INVERSE_400, COLOR_FOREGROUND_INVERSE_500, COLOR_FOREGROUND_INVERSE_600, COLOR_FOREGROUND_INVERSE_700, COLOR_FOREGROUND_INVERSE_800, COLOR_FOREGROUND_INVERSE_900, } from './color';
2
+ export { COLOR_BACKGROUND_BASE_100, COLOR_BACKGROUND_BASE_200, COLOR_BACKGROUND_BASE_300, COLOR_BACKGROUND_BASE_400, COLOR_BACKGROUND_BASE_500, COLOR_BACKGROUND_BASE_600, COLOR_BACKGROUND_BASE_700, COLOR_BACKGROUND_BASE_800, COLOR_BACKGROUND_BASE_900, COLOR_BACKGROUND_PRIMARY_100, COLOR_BACKGROUND_PRIMARY_200, COLOR_BACKGROUND_PRIMARY_300, COLOR_BACKGROUND_PRIMARY_400, COLOR_BACKGROUND_PRIMARY_500, COLOR_BACKGROUND_PRIMARY_600, COLOR_BACKGROUND_PRIMARY_700, COLOR_BACKGROUND_PRIMARY_800, COLOR_BACKGROUND_PRIMARY_900, COLOR_BORDER_BASE_100, COLOR_BORDER_BASE_200, COLOR_BORDER_BASE_300, COLOR_BORDER_BASE_400, COLOR_BORDER_BASE_500, COLOR_BORDER_BASE_600, COLOR_BORDER_BASE_700, COLOR_BORDER_BASE_800, COLOR_BORDER_BASE_900, COLOR_FOREGROUND_BASE_100, COLOR_FOREGROUND_BASE_200, COLOR_FOREGROUND_BASE_300, COLOR_FOREGROUND_BASE_400, COLOR_FOREGROUND_BASE_500, COLOR_FOREGROUND_BASE_600, COLOR_FOREGROUND_BASE_700, COLOR_FOREGROUND_BASE_800, COLOR_FOREGROUND_BASE_900, COLOR_FOREGROUND_FAILURE_100, COLOR_FOREGROUND_FAILURE_200, COLOR_FOREGROUND_FAILURE_300, COLOR_FOREGROUND_FAILURE_400, COLOR_FOREGROUND_FAILURE_500, COLOR_FOREGROUND_FAILURE_600, COLOR_FOREGROUND_FAILURE_700, COLOR_FOREGROUND_FAILURE_800, COLOR_FOREGROUND_FAILURE_900, COLOR_FOREGROUND_INVERSE_100, COLOR_FOREGROUND_INVERSE_200, COLOR_FOREGROUND_INVERSE_300, COLOR_FOREGROUND_INVERSE_400, COLOR_FOREGROUND_INVERSE_500, COLOR_FOREGROUND_INVERSE_600, COLOR_FOREGROUND_INVERSE_700, COLOR_FOREGROUND_INVERSE_800, COLOR_FOREGROUND_INVERSE_900, } from './color';
3
3
  export { FONT_FAMILY_BASE, FONT_FAMILY_TYPOGRAPHIC, FONT_SIZE_BASE_LG, FONT_SIZE_BASE_MD, FONT_SIZE_BASE_SM, FONT_SIZE_BASE_X2L, FONT_SIZE_BASE_X2S, FONT_SIZE_BASE_X3L, FONT_SIZE_BASE_X4L, FONT_SIZE_BASE_X5L, FONT_SIZE_BASE_XL, FONT_SIZE_BASE_XS, FONT_WEIGHT_BASE_BLACK, FONT_WEIGHT_BASE_BOLD, FONT_WEIGHT_BASE_EXTRABOLD, FONT_WEIGHT_BASE_EXTRALIGHT, FONT_WEIGHT_BASE_LIGHT, FONT_WEIGHT_BASE_MEDIUM, FONT_WEIGHT_BASE_REGULAR, FONT_WEIGHT_BASE_SEMIBOLD, FONT_WEIGHT_BASE_THIN, } from './font';
4
4
  export { SPACING_BASE_LG, SPACING_BASE_MD, SPACING_BASE_SM, SPACING_BASE_X2L, SPACING_BASE_X2S, SPACING_BASE_X3L, SPACING_BASE_X3S, SPACING_BASE_X4L, SPACING_BASE_X4S, SPACING_BASE_X5L, SPACING_BASE_X5S, SPACING_BASE_X6L, SPACING_BASE_X6S, SPACING_BASE_XL, SPACING_BASE_XS, } from './spacing';
5
5
  export { LINE_HEIGHT_BASE_LOOSE, LINE_HEIGHT_BASE_NONE, LINE_HEIGHT_BASE_NORMAL, LINE_HEIGHT_BASE_RELAXED, LINE_HEIGHT_BASE_SNUG, LINE_HEIGHT_BASE_TIGHT, } from './text';
package/build/contexts/theme/theme.types.d.ts CHANGED
@@ -52,6 +52,51 @@ export interface ThemeContextValue {
52
52
  * @default rgb(254,254,255)
53
53
  */
54
54
  colorBackgroundBase900: Color;
55
+ /**
56
+ * Least contrast primary background color.
57
+ * @default rgb(102,102,116)
58
+ */
59
+ colorBackgroundPrimary100: Color;
60
+ /**
61
+ * Dim primary background color.
62
+ * @default rgb(82,82,92)
63
+ */
64
+ colorBackgroundPrimary200: Color;
65
+ /**
66
+ * Mix of dim and muted primary background color.
67
+ * @default rgb(74,74,88)
68
+ */
69
+ colorBackgroundPrimary300: Color;
70
+ /**
71
+ * Muted primary background color.
72
+ * @default rgb(63,63,70)
73
+ */
74
+ colorBackgroundPrimary400: Color;
75
+ /**
76
+ * Mix of muted and subtle primary background color.
77
+ * @default rgb(49,49,56)
78
+ */
79
+ colorBackgroundPrimary500: Color;
80
+ /**
81
+ * Subtle primary background color.
82
+ * @default rgb(39,39,42)
83
+ */
84
+ colorBackgroundPrimary600: Color;
85
+ /**
86
+ * Mix of subtle and default primary background color.
87
+ * @default rgb(30,30,34)
88
+ */
89
+ colorBackgroundPrimary700: Color;
90
+ /**
91
+ * Primary default background color.
92
+ * @default rgb(24,24,27)
93
+ */
94
+ colorBackgroundPrimary800: Color;
95
+ /**
96
+ * Most contrast primary background color.
97
+ * @default rgb(6,6,14)
98
+ */
99
+ colorBackgroundPrimary900: Color;
55
100
  /**
56
101
  * Least contrast base border color.
57
102
  * @default rgb(253,252,254)