@rovula/ui 0.0.30 → 0.0.31

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/dist/cjs/bundle.css +99 -69
  2. package/dist/cjs/bundle.js +2 -2
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Dropdown/Dropdown.d.ts +12 -2
  5. package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts +12 -2
  6. package/dist/cjs/types/components/InputFilter/InputFilter.d.ts +63 -4
  7. package/dist/cjs/types/components/InputFilter/InputFilter.stories.d.ts +54 -18
  8. package/dist/cjs/types/components/InputFilter/InputFilter.styles.d.ts +1 -0
  9. package/dist/cjs/types/components/Search/Search.stories.d.ts +7 -1
  10. package/dist/components/ActionButton/ActionButton.stories.js +1 -1
  11. package/dist/components/Checkbox/Checkbox.js +3 -3
  12. package/dist/components/Checkbox/Checkbox.stories.js +1 -1
  13. package/dist/components/Dropdown/Dropdown.js +12 -8
  14. package/dist/components/Dropdown/Dropdown.styles.js +1 -1
  15. package/dist/components/InputFilter/InputFilter.js +118 -12
  16. package/dist/components/InputFilter/InputFilter.stories.js +5 -4
  17. package/dist/components/InputFilter/InputFilter.styles.js +9 -4
  18. package/dist/components/RadioGroup/RadioGroup.js +5 -2
  19. package/dist/components/RadioGroup/RadioGroup.stories.js +1 -1
  20. package/dist/components/Search/Search.stories.js +2 -1
  21. package/dist/components/TextInput/TextInput.js +2 -1
  22. package/dist/components/TextInput/TextInput.styles.js +10 -9
  23. package/dist/esm/bundle.css +99 -69
  24. package/dist/esm/bundle.js +2 -2
  25. package/dist/esm/bundle.js.map +1 -1
  26. package/dist/esm/types/components/Dropdown/Dropdown.d.ts +12 -2
  27. package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts +12 -2
  28. package/dist/esm/types/components/InputFilter/InputFilter.d.ts +63 -4
  29. package/dist/esm/types/components/InputFilter/InputFilter.stories.d.ts +54 -18
  30. package/dist/esm/types/components/InputFilter/InputFilter.styles.d.ts +1 -0
  31. package/dist/esm/types/components/Search/Search.stories.d.ts +7 -1
  32. package/dist/index.d.ts +83 -14
  33. package/dist/src/theme/global.css +225 -173
  34. package/dist/theme/presets/colors.js +21 -0
  35. package/dist/theme/themes/xspector/color.css +13 -0
  36. package/dist/theme/themes/xspector/components/action-button.css +44 -42
  37. package/dist/theme/themes/xspector/state.css +1 -1
  38. package/dist/theme/tokens/color.css +13 -0
  39. package/dist/theme/tokens/components/action-button.css +42 -55
  40. package/package.json +1 -1
  41. package/src/components/ActionButton/ActionButton.stories.tsx +1 -1
  42. package/src/components/Checkbox/Checkbox.stories.tsx +1 -1
  43. package/src/components/Checkbox/Checkbox.tsx +4 -4
  44. package/src/components/Dropdown/Dropdown.styles.ts +1 -1
  45. package/src/components/Dropdown/Dropdown.tsx +22 -8
  46. package/src/components/InputFilter/InputFilter.stories.tsx +9 -8
  47. package/src/components/InputFilter/InputFilter.styles.ts +9 -4
  48. package/src/components/InputFilter/InputFilter.tsx +301 -42
  49. package/src/components/RadioGroup/RadioGroup.stories.tsx +1 -1
  50. package/src/components/RadioGroup/RadioGroup.tsx +7 -9
  51. package/src/components/Search/Search.stories.tsx +2 -1
  52. package/src/components/TextInput/TextInput.styles.ts +10 -9
  53. package/src/components/TextInput/TextInput.tsx +11 -10
  54. package/src/theme/presets/colors.js +21 -0
  55. package/src/theme/themes/xspector/color.css +13 -0
  56. package/src/theme/themes/xspector/components/action-button.css +44 -42
  57. package/src/theme/themes/xspector/state.css +1 -1
  58. package/src/theme/tokens/color.css +13 -0
  59. package/src/theme/tokens/components/action-button.css +42 -55
package/src/theme/themes/xspector/components/action-button.css CHANGED
@@ -12,34 +12,34 @@
12
12
  /* ------------------------------------------------------------------ */
13
13
 
14
14
  /* Default State */
15
- --action-button-solid-default-bg: var(--state-color-secondary-default);
16
- --action-button-solid-default-border: var(--state-color-secondary-default);
17
- --action-button-solid-default-text: var(--state-color-secondary-text-solid);
15
+ --action-button-solid-default-bg: var(--function-default-solid);
16
+ --action-button-solid-default-border: var(--function-default-solid);
17
+ --action-button-solid-default-text: var(--function-default-icon);
18
18
 
19
19
  /* Hover State */
20
- --action-button-solid-hover-bg: var(--state-color-secondary-hover);
21
- --action-button-solid-hover-border: var(--state-color-secondary-hover);
22
- --action-button-solid-hover-text: var(--state-color-secondary-text-solid);
20
+ --action-button-solid-hover-bg: var(--function-default-hover);
21
+ --action-button-solid-hover-border: var(--function-default-hover);
22
+ --action-button-solid-hover-text: var(--function-default-icon);
23
23
 
24
24
  /* Pressed State */
25
- --action-button-solid-pressed-bg: var(--state-color-secondary-pressed);
26
- --action-button-solid-pressed-border: var(--state-color-secondary-pressed);
27
- --action-button-solid-pressed-text: var(--state-color-secondary-text-solid);
25
+ --action-button-solid-pressed-bg: var(--function-default-solid);
26
+ --action-button-solid-pressed-border: var(--function-default-solid);
27
+ --action-button-solid-pressed-text: var(--function-default-icon);
28
28
 
29
29
  /* Active State */
30
- --action-button-solid-active-bg: var(--state-color-primary-default);
31
- --action-button-solid-active-border: var(--state-color-primary-default);
32
- --action-button-solid-active-text: var(--state-color-primary-text-solid);
30
+ --action-button-solid-active-bg: var(--function-active-solid);
31
+ --action-button-solid-active-border: var(--function-active-solid);
32
+ --action-button-solid-active-text: var(--function-active-icon);
33
33
 
34
34
  /* Active Hover State */
35
- --action-button-solid-active-hover-bg: var(--state-color-primary-hover);
36
- --action-button-solid-active-hover-border: var(--state-color-primary-hover);
37
- --action-button-solid-active-hover-text: var(--state-color-primary-text-solid);
35
+ --action-button-solid-active-hover-bg: var(--function-active-hover);
36
+ --action-button-solid-active-hover-border: var(--function-active-hover);
37
+ --action-button-solid-active-hover-text: var(--function-active-icon);
38
38
 
39
39
  /* Active Pressed State */
40
- --action-button-solid-active-pressed-bg: var(--state-color-primary-pressed);
41
- --action-button-solid-active-pressed-border: var(--state-color-primary-pressed);
42
- --action-button-solid-active-pressed-text: var(--state-color-primary-text-solid);
40
+ --action-button-solid-active-pressed-bg: var(--function-active-solid);
41
+ --action-button-solid-active-pressed-border: var(--function-active-solid);
42
+ --action-button-solid-active-pressed-text: var(--function-active-icon);
43
43
 
44
44
 
45
45
  /* ------------------------------------------------------------------ */
@@ -47,52 +47,54 @@
47
47
  /* ------------------------------------------------------------------ */
48
48
 
49
49
  /* Default State */
50
- --action-button-outline-default-border: var(--state-color-secondary-stroke);
51
- --action-button-outline-default-text: var(--state-color-secondary-text-outline);
50
+ --action-button-outline-default-border: var(--function-default-stroke);
51
+ --action-button-outline-default-text: var(--function-default-outline-icon);
52
52
 
53
53
  /* Hover State */
54
- --action-button-outline-hover-bg: var(--state-color-secondary-hover-bg);
55
- --action-button-outline-hover-border: var(--state-color-secondary-hover);
56
- --action-button-outline-hover-text: var(--state-color-secondary-text-hover);
54
+ --action-button-outline-hover-bg: var(--function-default-hover-bg);
55
+ --action-button-outline-hover-border: var(--function-default-hover);
56
+ --action-button-outline-hover-text: var(--function-default-hover);
57
57
 
58
58
  /* Pressed State */
59
- --action-button-outline-pressed-bg: var(--state-color-secondary-hover-bg);
60
- --action-button-outline-pressed-border: var(--state-color-secondary-pressed);
61
- --action-button-outline-pressed-text: var(--state-color-secondary-text-pressed);
59
+ --action-button-outline-pressed-bg: var(--function-default-hover-bg);
60
+ --action-button-outline-pressed-border: var(--function-default-stroke);
61
+ --action-button-outline-pressed-text: var(--function-default-outline-icon);
62
62
 
63
63
  /* Active State */
64
- --action-button-outline-active-border: var(--state-color-primary-stroke);
65
- --action-button-outline-active-text: var(--state-color-primary-text-outline);
64
+ --action-button-outline-active-border: var(--function-active-stroke);
65
+ --action-button-outline-active-text: var(--function-active-solid);
66
66
 
67
67
  /* Active Hover State */
68
- --action-button-outline-active-hover-bg: var(--state-color-primary-hover-bg);
69
- --action-button-outline-active-hover-border: var(--state-color-primary-hover);
70
- --action-button-outline-active-hover-text: var(--state-color-primary-text-hover);
68
+ --action-button-outline-active-hover-bg: var(--function-active-hover-bg);;
69
+ --action-button-outline-active-hover-border: var(--function-active-hover);
70
+ --action-button-outline-active-hover-text: var(--function-active-hover);
71
71
 
72
72
  /* Active Pressed State */
73
- --action-button-outline-active-pressed-bg: var(--state-color-primary-hover-bg);
74
- --action-button-outline-active-pressed-border: var(--state-color-primary-pressed);
75
- --action-button-outline-active-pressed-text: var(--state-color-primary-text-pressed);
73
+ --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
74
+ --action-button-outline-active-pressed-border: var(--function-active-stroke);
75
+ --action-button-outline-active-pressed-text: var(--function-active-solid);
76
76
 
77
77
  /* ------------------------------------------------------------------ */
78
78
  /* Icon Mode Tokens */
79
79
  /* ------------------------------------------------------------------ */
80
80
 
81
81
  /* Default State */
82
- --action-button-icon-default-text: var(--state-color-secondary-text-outline);
82
+ --action-button-icon-default-text: var(--function-default-outline-icon);
83
83
 
84
84
  /* Hover State */
85
- --action-button-icon-hover-bg: var(--state-color-secondary-hover-bg);
86
- --action-button-icon-hover-text: var(--state-color-secondary-text-hover);
85
+ --action-button-icon-hover-bg: var(--function-default-hover-bg);
86
+ --action-button-icon-hover-text: var(--function-default-hover);
87
87
 
88
88
  /* Pressed State */
89
- --action-button-icon-pressed-text: var(--state-color-secondary-text-pressed);
89
+ --action-button-icon-pressed-text: var(--function-default-outline-icon);
90
90
 
91
91
  /* Active State */
92
- --action-button-icon-active-text: var(--state-color-primary-text-outline);
92
+ --action-button-icon-active-text: var(--function-active-solid);
93
93
 
94
94
  /* Active Hover State */
95
- --action-button-icon-active-hover-bg: var(--state-color-primary-hover-bg);
96
- --action-button-icon-active-hover-text: var(--state-color-primary-text-hover);
97
- --action-button-icon-active-pressed-text: var(--state-color-primary-text-pressed);
95
+ --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
96
+ --action-button-icon-active-hover-text: var(--function-active-hover);
97
+
98
+ /* Active Pressed State */
99
+ --action-button-icon-active-pressed-text: var(--function-active-solid);
98
100
  }
package/src/theme/themes/xspector/state.css CHANGED
@@ -84,6 +84,6 @@
84
84
  --state-color-error-text-pressed: #a5210f;
85
85
 
86
86
  --state-color-disable-solid: #454f5b;
87
- --state-color-disable-outline: #D3DADF;
87
+ --state-color-disable-outline: #637381;
88
88
  }
89
89
 
package/src/theme/tokens/color.css CHANGED
@@ -11,6 +11,19 @@
11
11
  --input-color-label-bg: #ffffff;/* #2d2e30; */
12
12
  --input-color-error: #ed2f15;
13
13
 
14
+ /* Function button */
15
+ --function-default-solid: #1e3249;
16
+ --function-default-hover: #35475b;
17
+ --function-default-hover-bg: rgba(30 50 73 / 0.08);
18
+ --function-default-stroke: rgba(30 50 73 / 0.48);
19
+ --function-default-icon: #ffffff;
20
+ --function-default-outline-icon: #1e3249;
21
+ --function-active-solid: #9b8f00;
22
+ --function-active-hover: #b1a400;
23
+ --function-active-hover-bg: rgba(221 205 0 / 0.08);
24
+ --function-active-stroke: rgba(177 164 0 / 0.48);
25
+ --function-active-icon: #ffffff;
26
+
14
27
  --text-dark: #18283a;
15
28
  --text-medium: #4b5b6d;
16
29
  --text-light: #8e98a4;
package/src/theme/tokens/components/action-button.css CHANGED
@@ -11,48 +11,35 @@
11
11
  /* Solid Mode Tokens */
12
12
  /* ------------------------------------------------------------------ */
13
13
 
14
- /* TODO */
15
- --function-default-solid: #ececec;
16
- --function-default-hover: #fafafa;
17
- --function-default-hover-bg: rgba(250 250 250 / 0.08);
18
- --function-default-stroke: rgba(158 158 158 / 0.24);
19
- --function-default-icon: #212b36;
20
- --function-default-outline-icon: #9e9e9e;
21
- --function-active-solid: #b1a400;
22
- --function-active-hover: #ddcd00;
23
- --function-active-hover-bg: rgba(221 205 0 / 0.08);
24
- --function-active-stroke: rgba(177 164 0 / 0.48);
25
- --function-active-icon: #212b36;
26
-
27
14
  /* Default State */
28
- --action-button-solid-default-bg: var(--state-color-primary-default);
29
- --action-button-solid-default-border: var(--state-color-primary-default);
30
- --action-button-solid-default-text: var(--state-color-primary-text-solid);
15
+ --action-button-solid-default-bg: var(--function-default-solid);
16
+ --action-button-solid-default-border: var(--function-default-solid);
17
+ --action-button-solid-default-text: var(--function-default-icon);
31
18
 
32
19
  /* Hover State */
33
- --action-button-solid-hover-bg: var(--state-color-primary-hover);
34
- --action-button-solid-hover-border: var(--state-color-primary-hover);
35
- --action-button-solid-hover-text: var(--state-color-primary-text-solid);
20
+ --action-button-solid-hover-bg: var(--function-default-hover);
21
+ --action-button-solid-hover-border: var(--function-default-hover);
22
+ --action-button-solid-hover-text: var(--function-default-icon);
36
23
 
37
24
  /* Pressed State */
38
- --action-button-solid-pressed-bg: var(--state-color-primary-pressed);
39
- --action-button-solid-pressed-border: var(--state-color-primary-pressed);
40
- --action-button-solid-pressed-text: var(--state-color-primary-text-solid);
25
+ --action-button-solid-pressed-bg: var(--function-default-solid);
26
+ --action-button-solid-pressed-border: var(--function-default-solid);
27
+ --action-button-solid-pressed-text: var(--function-default-icon);
41
28
 
42
29
  /* Active State */
43
- --action-button-solid-active-bg: var(--state-color-secondary-default);
44
- --action-button-solid-active-border: var(--state-color-secondary-default);
45
- --action-button-solid-active-text: var(--state-color-secondary-text-solid);
30
+ --action-button-solid-active-bg: var(--function-active-solid);
31
+ --action-button-solid-active-border: var(--function-active-solid);
32
+ --action-button-solid-active-text: var(--function-active-icon);
46
33
 
47
34
  /* Active Hover State */
48
- --action-button-solid-active-hover-bg: var(--state-color-secondary-hover);
49
- --action-button-solid-active-hover-border: var(--state-color-secondary-hover);
50
- --action-button-solid-active-hover-text: var(--state-color-secondary-text-solid);
35
+ --action-button-solid-active-hover-bg: var(--function-active-hover);
36
+ --action-button-solid-active-hover-border: var(--function-active-hover);
37
+ --action-button-solid-active-hover-text: var(--function-active-icon);
51
38
 
52
39
  /* Active Pressed State */
53
- --action-button-solid-active-pressed-bg: var(--state-color-secondary-pressed);
54
- --action-button-solid-active-pressed-border: var(--state-color-secondary-pressed);
55
- --action-button-solid-active-pressed-text: var(--state-color-secondary-text-solid);
40
+ --action-button-solid-active-pressed-bg: var(--function-active-solid);
41
+ --action-button-solid-active-pressed-border: var(--function-active-solid);
42
+ --action-button-solid-active-pressed-text: var(--function-active-icon);
56
43
 
57
44
  /* Disabled State */
58
45
  --action-button-solid-disabled-bg: var(--state-color-disable-solid);
@@ -66,33 +53,33 @@
66
53
 
67
54
  /* Default State */
68
55
  --action-button-outline-default-bg: transparent;
69
- --action-button-outline-default-border: var(--state-color-primary-stroke);
70
- --action-button-outline-default-text: var(--state-color-primary-text-outline);
56
+ --action-button-outline-default-border: var(--function-default-stroke);
57
+ --action-button-outline-default-text: var(--function-default-outline-icon);
71
58
 
72
59
  /* Hover State */
73
- --action-button-outline-hover-bg: var(--state-color-primary-hover-bg);
74
- --action-button-outline-hover-border: var(--state-color-primary-hover);
75
- --action-button-outline-hover-text: var(--state-color-primary-text-hover);
60
+ --action-button-outline-hover-bg: var(--function-default-hover-bg);
61
+ --action-button-outline-hover-border: var(--function-default-hover);
62
+ --action-button-outline-hover-text: var(--function-default-hover);
76
63
 
77
64
  /* Pressed State */
78
- --action-button-outline-pressed-bg: var(--state-color-primary-hover-bg);
79
- --action-button-outline-pressed-border: var(--state-color-primary-pressed);
80
- --action-button-outline-pressed-text: var(--state-color-primary-text-pressed);
65
+ --action-button-outline-pressed-bg: var(--function-default-hover-bg);
66
+ --action-button-outline-pressed-border: var(--function-default-stroke);
67
+ --action-button-outline-pressed-text: var(--function-default-outline-icon);
81
68
 
82
69
  /* Active State */
83
70
  --action-button-outline-active-bg: transparent;
84
- --action-button-outline-active-border: var(--state-color-secondary-stroke);
85
- --action-button-outline-active-text: var(--state-color-secondary-text-outline);
71
+ --action-button-outline-active-border: var(--function-active-stroke);
72
+ --action-button-outline-active-text: var(--function-active-solid);
86
73
 
87
74
  /* Active Hover State */
88
- --action-button-outline-active-hover-bg: var(--state-color-secondary-hover-bg);
89
- --action-button-outline-active-hover-border: var(--state-color-secondary-hover);
90
- --action-button-outline-active-hover-text: var(--state-color-secondary-text-hover);
75
+ --action-button-outline-active-hover-bg: var(--function-active-hover-bg);;
76
+ --action-button-outline-active-hover-border: var(--function-active-hover);
77
+ --action-button-outline-active-hover-text: var(--function-active-hover);
91
78
 
92
79
  /* Active Pressed State */
93
- --action-button-outline-active-pressed-bg: var(--state-color-secondary-hover-bg);
94
- --action-button-outline-active-pressed-border: var(--state-color-secondary-pressed);
95
- --action-button-outline-active-pressed-text: var(--state-color-secondary-text-pressed);
80
+ --action-button-outline-active-pressed-bg: var(--function-active-hover-bg);;
81
+ --action-button-outline-active-pressed-border: var(--function-active-stroke);
82
+ --action-button-outline-active-pressed-text: var(--function-active-solid);
96
83
 
97
84
  /* Disabled State */
98
85
  --action-button-outline-disabled-bg: transparent;
@@ -106,32 +93,32 @@
106
93
  /* Default State */
107
94
  --action-button-icon-default-bg: transparent;
108
95
  --action-button-icon-default-border: transparent;
109
- --action-button-icon-default-text: var(--state-color-primary-text-outline);
96
+ --action-button-icon-default-text: var(--function-default-outline-icon);
110
97
 
111
98
  /* Hover State */
112
- --action-button-icon-hover-bg: var(--state-color-primary-hover-bg);
99
+ --action-button-icon-hover-bg: var(--function-default-hover-bg);
113
100
  --action-button-icon-hover-border: transparent;
114
- --action-button-icon-hover-text: var(--state-color-primary-text-hover);
101
+ --action-button-icon-hover-text: var(--function-default-hover);
115
102
 
116
103
  /* Pressed State */
117
104
  --action-button-icon-pressed-bg: transparent;
118
105
  --action-button-icon-pressed-border: transparent;
119
- --action-button-icon-pressed-text: var(--state-color-primary-text-pressed);
106
+ --action-button-icon-pressed-text: var(--function-default-outline-icon);
120
107
 
121
108
  /* Active State */
122
109
  --action-button-icon-active-bg: transparent;
123
110
  --action-button-icon-active-border: transparent;
124
- --action-button-icon-active-text: var(--state-color-secondary-text-outline);
111
+ --action-button-icon-active-text: var(--function-active-solid);
125
112
 
126
113
  /* Active Hover State */
127
- --action-button-icon-active-hover-bg: var(--state-color-secondary-hover-bg);
114
+ --action-button-icon-active-hover-bg: var(--function-active-hover-bg);
128
115
  --action-button-icon-active-hover-border: transparent;
129
- --action-button-icon-active-hover-text: var(--state-color-secondary-text-hover);
116
+ --action-button-icon-active-hover-text: var(--function-active-hover);
130
117
 
131
118
  /* Active Pressed State */
132
119
  --action-button-icon-active-pressed-bg: transparent;
133
120
  --action-button-icon-active-pressed-border: transparent;
134
- --action-button-icon-active-pressed-text: var(--state-color-secondary-text-pressed);
121
+ --action-button-icon-active-pressed-text: var(--function-active-solid);
135
122
 
136
123
  /* Disabled State */
137
124
  --action-button-icon-disabled-bg: transparent;