@cfx-dev/ui-components 1.0.2 → 1.1.1

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 (59) hide show
  1. package/README.md +38 -38
  2. package/dist/Button.module-Cv-7p0xt.js +16 -0
  3. package/dist/assets/Button.css +1 -1
  4. package/dist/assets/Flex.css +1 -1
  5. package/dist/assets/Flyout.css +1 -1
  6. package/dist/assets/Input.css +1 -1
  7. package/dist/assets/Island.css +1 -1
  8. package/dist/assets/Pad.css +1 -1
  9. package/dist/assets/Popover.css +1 -1
  10. package/dist/assets/RichInput.css +1 -1
  11. package/dist/assets/Spacer.css +1 -1
  12. package/dist/assets/Textarea.css +1 -1
  13. package/dist/assets/global.css +1 -1
  14. package/dist/components/Button/Button.d.ts +1 -1
  15. package/dist/components/Button/Button.js +1 -1
  16. package/dist/components/Button/ButtonBar.js +1 -1
  17. package/dist/components/Flyout/Flyout.js +39 -39
  18. package/dist/components/Input/Input.d.ts +0 -1
  19. package/dist/components/Input/Input.js +58 -61
  20. package/dist/components/Input/RichInput.js +27 -27
  21. package/dist/components/InputDropzone/InputDropzone.js +122 -119
  22. package/dist/components/InputDropzone/ItemPreview.js +1 -1
  23. package/dist/components/Island/Island.js +23 -23
  24. package/dist/components/Layout/Flex/Flex.d.ts +1 -1
  25. package/dist/components/Layout/Flex/Flex.js +44 -43
  26. package/dist/components/Layout/Pad/Pad.d.ts +1 -1
  27. package/dist/components/Layout/Pad/Pad.js +30 -29
  28. package/dist/components/Modal/Modal.d.ts +2 -0
  29. package/dist/components/Modal/Modal.js +25 -23
  30. package/dist/components/Overlay/Overlay.js +13 -13
  31. package/dist/components/Popover/Popover.js +18 -18
  32. package/dist/components/Select/Select.d.ts +1 -1
  33. package/dist/components/Select/Select.js +239 -229
  34. package/dist/components/Spacer/Spacer.d.ts +1 -1
  35. package/dist/components/Spacer/Spacer.js +13 -12
  36. package/dist/components/Table/Table.js +41 -35
  37. package/dist/components/Text/Text.types.d.ts +1 -1
  38. package/dist/components/Textarea/Textarea.d.ts +0 -1
  39. package/dist/components/Textarea/Textarea.js +37 -40
  40. package/dist/iconBase-Bipuk9tK.js +112 -0
  41. package/dist/main.d.ts +1 -1
  42. package/dist/main.js +112 -113
  43. package/dist/style-guide/Icons/IconDisplayGrid.js +3 -3
  44. package/dist/style-guide/Icons/Icons.d.ts +13 -13
  45. package/dist/style-guide/Icons/Icons.js +36 -8
  46. package/dist/styles-scss/_ui.scss +167 -195
  47. package/dist/styles-scss/assets/images/checkered_dark.svg +7 -7
  48. package/dist/styles-scss/assets/images/checkered_light.svg +7 -7
  49. package/dist/styles-scss/global.scss +73 -75
  50. package/dist/styles-scss/theme_dark.scss +24 -24
  51. package/dist/styles-scss/theme_light.scss +54 -54
  52. package/dist/styles-scss/themes.scss +2 -2
  53. package/dist/styles-scss/tokens.scss +272 -274
  54. package/dist/utils/string.d.ts +16 -1
  55. package/dist/utils/string.js +46 -39
  56. package/package.json +71 -72
  57. package/dist/Button.module-Z6njvP9Z.js +0 -17
  58. package/dist/Icons-NE1cibCU.js +0 -107
  59. package/dist/index.esm-BkynlSN6.js +0 -72
package/dist/styles-scss/global.scss CHANGED
@@ -1,75 +1,73 @@
1
- @import "tokens";
2
- @import "~@fontsource/montserrat/variable.css";
3
- @import "~@fontsource/montserrat/variable-italic.css";
4
- @import "~@fontsource/rubik/variable.css";
5
- @import "~@fontsource/rubik/variable-italic.css";
6
-
7
- body {
8
- @include color-tokens;
9
-
10
- @include ui.def('control-height-xxsmall', ui.q(1.5));
11
- @include ui.def('control-height-xsmall', ui.q(3));
12
- @include ui.def('control-height-small', ui.q(4));
13
- @include ui.def('control-height-normal', ui.q(6));
14
- @include ui.def('control-height-large', ui.q(7));
15
-
16
- @include ui.def('offset-none', 0px);
17
- @include ui.def('offset-hairthin', 1px);
18
- @include ui.def('offset-thin', 2px);
19
- @include ui.def('offset-xsmall', ui.q(.5));
20
- @include ui.def('offset-small', ui.q(1));
21
- @include ui.def('offset-normal', ui.q(2));
22
- @include ui.def('offset-large', ui.q(4));
23
- @include ui.def('offset-xlarge', ui.q(6));
24
-
25
- @include ui.def('offset-safezone', ui.q(8));
26
-
27
- @include ui.def('font-size-xsmall', 0.7rem);
28
- @include ui.def('font-size-small', 0.8rem);
29
- @include ui.def('font-size-normal', 1rem);
30
- @include ui.def('font-size-large', 1.25rem);
31
- @include ui.def('font-size-xlarge', 1.5rem);
32
- @include ui.def('font-size-xxlarge', 1.75rem);
33
- @include ui.def('font-size-xxxlarge', 2rem);
34
-
35
- @include ui.def('font-weight-thin', 100);
36
- @include ui.def('font-weight-normal', 300);
37
- @include ui.def('font-weight-bold', 400);
38
- @include ui.def('font-weight-bolder', 600);
39
- @include ui.def('font-weight-boldest', 900);
40
-
41
- @include ui.def('font-family-primary', 'RubikVariable');
42
- @include ui.def('font-family-secondary', 'MontserratVariable');
43
- @include ui.def('font-family-monospace', 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace');
44
-
45
- @include ui.def('border-radius-none', 0);
46
- @include ui.def('border-radius-xxsmall', ui.q(.25));
47
- @include ui.def('border-radius-xsmall', ui.q(.5));
48
- @include ui.def('border-radius-small', ui.q(.75));
49
- @include ui.def('border-radius-normal', ui.q(1.5));
50
-
51
- @include ui.font-color('text');
52
- @include ui.font-family('primary');
53
- @include ui.font-weight('normal');
54
- }
55
-
56
- // Utilities
57
- .util-full-height {
58
- height: 100%;
59
- }
60
- .util-full-width {
61
- width: 100%;
62
- }
63
- .util-z-index-9000 {
64
- z-index: 9000;
65
- }
66
- .util-text-selectable,
67
- .util-text-selectable * {
68
- user-select: text !important;
69
- }
70
- .util-flex-grow {
71
- flex-grow: 1;
72
- }
73
- .util-flex-no-shrink {
74
- flex-shrink: 0;
75
- }
1
+ @import "tokens";
2
+ @import "~@fontsource/rubik/variable.css";
3
+ @import "~@fontsource/rubik/variable-italic.css";
4
+
5
+ body {
6
+ @include color-tokens;
7
+
8
+ @include ui.def('control-height-xxsmall', ui.q(1.5));
9
+ @include ui.def('control-height-xsmall', ui.q(3));
10
+ @include ui.def('control-height-small', ui.q(4));
11
+ @include ui.def('control-height-normal', ui.q(6));
12
+ @include ui.def('control-height-large', ui.q(7));
13
+
14
+ @include ui.def('offset-none', 0px);
15
+ @include ui.def('offset-hairthin', 1px);
16
+ @include ui.def('offset-thin', 2px);
17
+ @include ui.def('offset-xsmall', ui.q(.5));
18
+ @include ui.def('offset-small', ui.q(1));
19
+ @include ui.def('offset-normal', ui.q(2));
20
+ @include ui.def('offset-medium', ui.q(3));
21
+ @include ui.def('offset-large', ui.q(4));
22
+ @include ui.def('offset-xlarge', ui.q(6));
23
+
24
+ @include ui.def('offset-safezone', ui.q(8));
25
+
26
+ @include ui.def('font-size-xsmall', 0.7rem);
27
+ @include ui.def('font-size-small', 0.8rem);
28
+ @include ui.def('font-size-normal', 1rem);
29
+ @include ui.def('font-size-large', 1.25rem);
30
+ @include ui.def('font-size-xlarge', 1.5rem);
31
+ @include ui.def('font-size-xxlarge', 1.75rem);
32
+ @include ui.def('font-size-xxxlarge', 2rem);
33
+
34
+ @include ui.def('font-weight-thin', 100);
35
+ @include ui.def('font-weight-normal', 300);
36
+ @include ui.def('font-weight-bold', 400);
37
+ @include ui.def('font-weight-bolder', 600);
38
+ @include ui.def('font-weight-boldest', 900);
39
+
40
+ @include ui.def('font-family-primary', 'RubikVariable');
41
+ @include ui.def('font-family-monospace', 'Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace');
42
+
43
+ @include ui.def('border-radius-none', 0);
44
+ @include ui.def('border-radius-xxsmall', ui.q(.25));
45
+ @include ui.def('border-radius-xsmall', ui.q(.5));
46
+ @include ui.def('border-radius-small', ui.q(.75));
47
+ @include ui.def('border-radius-normal', ui.q(1.5));
48
+
49
+ @include ui.font-color('text');
50
+ @include ui.font-family('primary');
51
+ @include ui.font-weight('normal');
52
+ }
53
+
54
+ // Utilities
55
+ .util-full-height {
56
+ height: 100%;
57
+ }
58
+ .util-full-width {
59
+ width: 100%;
60
+ }
61
+ .util-z-index-9000 {
62
+ z-index: 9000;
63
+ }
64
+ .util-text-selectable,
65
+ .util-text-selectable * {
66
+ user-select: text !important;
67
+ }
68
+ .util-flex-grow {
69
+ flex-grow: 1;
70
+ }
71
+ .util-flex-no-shrink {
72
+ flex-shrink: 0;
73
+ }
package/dist/styles-scss/theme_dark.scss CHANGED
@@ -1,24 +1,24 @@
1
- @use "ui";
2
-
3
- $fg: #fffff0;
4
- $bg: #161923;
5
-
6
- .cfxui-theme-dark {
7
- @include ui.define-main-colors($bg, $fg, (
8
- 'primary': darken(#f50551, 10%)
9
- ));
10
-
11
- .color-1 { color: lighten(#F44336, 30%); }
12
- .color-2 { color: lighten(#4CAF50, 30%); }
13
- .color-3 { color: lighten(#FFEB3B, 30%); }
14
- .color-4 { color: lighten(#42A5F5, 30%); }
15
- .color-5 { color: lighten(#03A9F4, 30%); }
16
- .color-6 { color: lighten(#9C27B0, 30%); }
17
- .color-8 { color: lighten(#FF5722, 30%); }
18
- .color-9 { color: lighten(#9E9E9E, 30%); }
19
-
20
- // Invert black indicators for date/time inputs
21
- ::-webkit-calendar-picker-indicator {
22
- filter: invert(1);
23
- }
24
- }
1
+ @use "ui";
2
+
3
+ $fg: #fffff0;
4
+ $bg: #161923;
5
+
6
+ .cfxui-theme-dark {
7
+ @include ui.define-main-colors($bg, $fg, (
8
+ 'primary': darken(#f50551, 10%)
9
+ ));
10
+
11
+ .color-1 { color: lighten(#F44336, 30%); }
12
+ .color-2 { color: lighten(#4CAF50, 30%); }
13
+ .color-3 { color: lighten(#FFEB3B, 30%); }
14
+ .color-4 { color: lighten(#42A5F5, 30%); }
15
+ .color-5 { color: lighten(#03A9F4, 30%); }
16
+ .color-6 { color: lighten(#9C27B0, 30%); }
17
+ .color-8 { color: lighten(#FF5722, 30%); }
18
+ .color-9 { color: lighten(#9E9E9E, 30%); }
19
+
20
+ // Invert black indicators for date/time inputs
21
+ ::-webkit-calendar-picker-indicator {
22
+ filter: invert(1);
23
+ }
24
+ }
package/dist/styles-scss/theme_light.scss CHANGED
@@ -1,54 +1,54 @@
1
- @use "ui";
2
-
3
- $fg: #161923;
4
- $bg: #ffffff;
5
-
6
- .cfxui-theme-light {
7
- @include ui.define-main-colors($bg, $fg);
8
-
9
- // Asset overrides
10
- @include ui.def('checkered-pattern', url(assets/images/checkered_light.svg));
11
-
12
- // Color overrides
13
- @include ui.def ('text-opacity-10', .20);
14
- @include ui.define-color-token('text-a10', ui.color('main', 950, .20));
15
- @include ui.def ('text-opacity-25', .35);
16
- @include ui.define-color-token('text-a25', ui.color('main', 950, .35));
17
- @include ui.def ('text-opacity-50', .60);
18
- @include ui.define-color-token('text-a50', ui.color('main', 950, .60));
19
- @include ui.def ('text-opacity-75', .85);
20
- @include ui.define-color-token('text-a75', ui.color('main', 950, .85));
21
-
22
- @include ui.define-color-token('text-warning', ui.color('warning', 700));
23
-
24
- @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .3));
25
- @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .3));
26
-
27
- @include ui.define-color-token('backdrop', ui.color('main', 50, .75));
28
- @include ui.define-color-token('backdrop-shader', ui.color('main', 100, .75));
29
-
30
- @include ui.define-color-token('button-primary-text', ui.color('main'));
31
- @include ui.define-color-token('button-primary-hover-text', ui.color('main'));
32
- @include ui.define-color-token('button-primary-active-text', ui.color('main', 950));
33
-
34
- @include ui.define-color-token('premium-badge-text', ui.color('main'));
35
- @include ui.define-color-token('premium-badge-background', ui.color('main', 950));
36
-
37
- @include ui.define-color-token('loaf-text', ui.color('main', 950, .75));
38
- @include ui.define-color-token('loaf-background', ui.color('main', 950, .075));
39
-
40
-
41
- .color-1 { color: darken(#F44336, 30%); }
42
- .color-2 { color: darken(#4CAF50, 30%); }
43
- .color-3 { color: darken(#FFEB3B, 30%); }
44
- .color-4 { color: darken(#42A5F5, 30%); }
45
- .color-5 { color: darken(#03A9F4, 30%); }
46
- .color-6 { color: darken(#9C27B0, 30%); }
47
- .color-8 { color: darken(#FF5722, 30%); }
48
- .color-9 { color: darken(#9E9E9E, 30%); }
49
-
50
- // Too thin otherwise
51
- --font-weight-normal: 400;
52
- --font-weight-bold: 500;
53
- --font-weight-bolder: 600;
54
- }
1
+ @use "ui";
2
+
3
+ $fg: #161923;
4
+ $bg: #ffffff;
5
+
6
+ .cfxui-theme-light {
7
+ @include ui.define-main-colors($bg, $fg);
8
+
9
+ // Asset overrides
10
+ @include ui.def('checkered-pattern', url(assets/images/checkered_light.svg));
11
+
12
+ // Color overrides
13
+ @include ui.def ('text-opacity-10', .20);
14
+ @include ui.define-color-token('text-a10', ui.color('main', 950, .20));
15
+ @include ui.def ('text-opacity-25', .35);
16
+ @include ui.define-color-token('text-a25', ui.color('main', 950, .35));
17
+ @include ui.def ('text-opacity-50', .60);
18
+ @include ui.define-color-token('text-a50', ui.color('main', 950, .60));
19
+ @include ui.def ('text-opacity-75', .85);
20
+ @include ui.define-color-token('text-a75', ui.color('main', 950, .85));
21
+
22
+ @include ui.define-color-token('text-warning', ui.color('warning', 700));
23
+
24
+ @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .3));
25
+ @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .3));
26
+
27
+ @include ui.define-color-token('backdrop', ui.color('main', 50, .75));
28
+ @include ui.define-color-token('backdrop-shader', ui.color('main', 100, .75));
29
+
30
+ @include ui.define-color-token('button-primary-text', ui.color('main'));
31
+ @include ui.define-color-token('button-primary-hover-text', ui.color('main'));
32
+ @include ui.define-color-token('button-primary-active-text', ui.color('main', 950));
33
+
34
+ @include ui.define-color-token('premium-badge-text', ui.color('main'));
35
+ @include ui.define-color-token('premium-badge-background', ui.color('main', 950));
36
+
37
+ @include ui.define-color-token('loaf-text', ui.color('main', 950, .75));
38
+ @include ui.define-color-token('loaf-background', ui.color('main', 950, .075));
39
+
40
+
41
+ .color-1 { color: darken(#F44336, 30%); }
42
+ .color-2 { color: darken(#4CAF50, 30%); }
43
+ .color-3 { color: darken(#FFEB3B, 30%); }
44
+ .color-4 { color: darken(#42A5F5, 30%); }
45
+ .color-5 { color: darken(#03A9F4, 30%); }
46
+ .color-6 { color: darken(#9C27B0, 30%); }
47
+ .color-8 { color: darken(#FF5722, 30%); }
48
+ .color-9 { color: darken(#9E9E9E, 30%); }
49
+
50
+ // Too thin otherwise
51
+ --font-weight-normal: 400;
52
+ --font-weight-bold: 500;
53
+ --font-weight-bolder: 600;
54
+ }
package/dist/styles-scss/themes.scss CHANGED
@@ -1,2 +1,2 @@
1
- @import "theme_dark.scss";
2
- @import "theme_light.scss";
1
+ @import "theme_dark.scss";
2
+ @import "theme_light.scss";