@rovula/ui 0.1.5 → 0.1.6

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 (64) hide show
  1. package/dist/cjs/bundle.css +43 -13
  2. package/dist/cjs/bundle.js +5 -5
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Text/Text.d.ts +25 -1
  5. package/dist/cjs/types/components/Text/Text.stories.d.ts +1 -1
  6. package/dist/cjs/types/utils/colors.d.ts +1 -1
  7. package/dist/components/Avatar/Avatar.styles.js +2 -2
  8. package/dist/components/Button/Buttons.stories.js +1 -1
  9. package/dist/components/Calendar/Calendar.js +1 -1
  10. package/dist/components/Dropdown/Dropdown.js +2 -2
  11. package/dist/components/DropdownMenu/DropdownMenu.js +4 -4
  12. package/dist/components/Footer/Footer.js +1 -1
  13. package/dist/components/Input/Input.styles.js +2 -2
  14. package/dist/components/InputFilter/InputFilter.js +2 -2
  15. package/dist/components/Label/Label.styles.js +4 -4
  16. package/dist/components/Menu/Menu.js +2 -2
  17. package/dist/components/Navbar/Navbar.js +1 -1
  18. package/dist/components/Tabs/Tabs.js +1 -1
  19. package/dist/components/Text/Text.js +11 -1
  20. package/dist/components/Text/Text.stories.js +6 -6
  21. package/dist/components/TextArea/TextArea.styles.js +6 -6
  22. package/dist/components/TextInput/TextInput.stories.js +1 -1
  23. package/dist/components/TextInput/TextInput.styles.js +18 -18
  24. package/dist/components/Toast/Toast.js +2 -2
  25. package/dist/esm/bundle.css +43 -13
  26. package/dist/esm/bundle.js +5 -5
  27. package/dist/esm/bundle.js.map +1 -1
  28. package/dist/esm/types/components/Text/Text.d.ts +25 -1
  29. package/dist/esm/types/components/Text/Text.stories.d.ts +1 -1
  30. package/dist/esm/types/utils/colors.d.ts +1 -1
  31. package/dist/index.d.ts +26 -2
  32. package/dist/src/theme/global.css +152 -101
  33. package/dist/utils/colors.js +1 -1
  34. package/package.json +1 -1
  35. package/src/components/Avatar/Avatar.styles.ts +2 -2
  36. package/src/components/Button/Buttons.stories.tsx +2 -2
  37. package/src/components/Calendar/Calendar.tsx +1 -1
  38. package/src/components/Dropdown/Dropdown.tsx +2 -2
  39. package/src/components/DropdownMenu/DropdownMenu.tsx +6 -6
  40. package/src/components/Footer/Footer.tsx +1 -1
  41. package/src/components/Input/Input.styles.tsx +2 -2
  42. package/src/components/InputFilter/InputFilter.tsx +2 -2
  43. package/src/components/Label/Label.styles.ts +4 -4
  44. package/src/components/Menu/Menu.tsx +2 -2
  45. package/src/components/Navbar/Navbar.tsx +1 -1
  46. package/src/components/Tabs/Tabs.tsx +1 -1
  47. package/src/components/Text/Text.stories.tsx +6 -6
  48. package/src/components/Text/Text.tsx +36 -1
  49. package/src/components/TextArea/TextArea.styles.ts +6 -6
  50. package/src/components/TextInput/TextInput.stories.tsx +3 -1
  51. package/src/components/TextInput/TextInput.styles.ts +18 -18
  52. package/src/components/Toast/Toast.tsx +2 -2
  53. package/src/theme/THEME_MAPPING.md +5 -5
  54. package/src/theme/global.css +1 -1
  55. package/src/theme/main-preset.js +49 -0
  56. package/src/theme/plugins/utilities/typography.js +40 -6
  57. package/src/theme/presets/colors.js +1 -1
  58. package/src/theme/themes/skyller/color.css +1 -1
  59. package/src/theme/themes/skyller/state.css +11 -11
  60. package/src/theme/themes/variable.css +78 -63
  61. package/src/theme/themes/xspector/color.css +1 -1
  62. package/src/theme/themes/xspector/state.css +11 -11
  63. package/src/theme/tokens/color.css +1 -1
  64. package/src/utils/colors.ts +1 -1
package/src/theme/themes/variable.css CHANGED
@@ -15,36 +15,36 @@
15
15
  --brand-columbia-blue-xspector: #adcad6;
16
16
  --brand-columbia-blue-report-xspector-light-mode: #adcad6;
17
17
  --brand-columbia-blue-skyller: #0891b2;
18
- --brand-backgroud-xspector: #1e3249;
19
- --brand-backgroud-report-xspector-light-mode: #1e3249;
20
- --brand-backgroud-skyller: #60a5fa;
18
+ --brand-background-xspector: #1e3249;
19
+ --brand-background-report-xspector-light-mode: #1e3249;
20
+ --brand-background-skyller: #60a5fa;
21
21
  --brand-lemon-glacier-xspector: #f5ff00;
22
22
  --brand-lemon-glacier-report-xspector-light-mode: #f5ff00;
23
23
  --brand-lemon-glacier-skyller: #fde68a;
24
24
  --text-black-xspector: #000000;
25
25
  --text-black-report-xspector-light-mode: #000000;
26
26
  --text-black-skyller: #000000;
27
- --text-dark-xspector: #212b36;
28
- --text-dark-report-xspector-light-mode: #18283a;
29
- --text-dark-skyller: #a3a3a3;
30
- --text-medium-xspector: #637381;
31
- --text-medium-report-xspector-light-mode: #4b5b6d;
32
- --text-medium-skyller: #737373;
33
- --text-light-xspector: #919eab;
34
- --text-light-report-xspector-light-mode: #8e98a4;
35
- --text-light-skyller: #171717;
36
- --text-grey-dark-xspector: #7e7e7e;
37
- --text-grey-dark-report-xspector-light-mode: #4f4f4f;
38
- --text-grey-dark-skyller: #a3a3a3;
39
- --text-grey-medium-xspector: #aaaaaa;
40
- --text-grey-medium-report-xspector-light-mode: #7e7e7e;
41
- --text-grey-medium-skyller: #737373;
42
- --text-grey-light-xspector: #dfe3e8;
43
- --text-grey-light-report-xspector-light-mode: #9e9e9e;
44
- --text-grey-light-skyller: #171717;
45
- --text-white-xspector: #ffffff;
46
- --text-white-report-xspector-light-mode: #7e7e7e;
47
- --text-white-skyller: #171717;
27
+ --text-contrast-low-xspector: #212b36;
28
+ --text-contrast-low-report-xspector-light-mode: #18283a;
29
+ --text-contrast-low-skyller: #a3a3a3;
30
+ --text-contrast-medium-xspector: #637381;
31
+ --text-contrast-medium-report-xspector-light-mode: #4b5b6d;
32
+ --text-contrast-medium-skyller: #737373;
33
+ --text-contrast-high-xspector: #919eab;
34
+ --text-contrast-high-report-xspector-light-mode: #8e98a4;
35
+ --text-contrast-high-skyller: #171717;
36
+ --text-g-contrast-low-xspector: #7e7e7e;
37
+ --text-g-contrast-low-report-xspector-light-mode: #4f4f4f;
38
+ --text-g-contrast-low-skyller: #a3a3a3;
39
+ --text-g-contrast-medium-xspector: #aaaaaa;
40
+ --text-g-contrast-medium-report-xspector-light-mode: #7e7e7e;
41
+ --text-g-contrast-medium-skyller: #737373;
42
+ --text-g-contrast-high-xspector: #dfe3e8;
43
+ --text-g-contrast-high-report-xspector-light-mode: #9e9e9e;
44
+ --text-g-contrast-high-skyller: #171717;
45
+ --text-contrast-max-xspector: #ffffff;
46
+ --text-contrast-max-report-xspector-light-mode: #4f4f4f;
47
+ --text-contrast-max-skyller: #171717;
48
48
  --state-primary-default-xspector: #b1a400;
49
49
  --state-primary-default-report-xspector-light-mode: #1e3249;
50
50
  --state-primary-default-skyller: #2563eb;
@@ -105,36 +105,36 @@
105
105
  --state-secondary-text-pressed-xspector: #c5c5c5;
106
106
  --state-secondary-text-pressed-report-xspector-light-mode: #6f6700;
107
107
  --state-secondary-text-pressed-skyller: #1e40af;
108
- --state-tertiery-default-xspector: #8aa2ab;
109
- --state-tertiery-default-report-xspector-light-mode: #4f4f4f;
110
- --state-tertiery-default-skyller: #0891b2;
111
- --state-tertiery-hover-xspector: #adcad6;
112
- --state-tertiery-hover-report-xspector-light-mode: #6f6f6f;
113
- --state-tertiery-hover-skyller: #52b2c9;
114
- --state-tertiery-stroke-xspector: rgba(138 162 171 / 0.48);
115
- --state-tertiery-stroke-report-xspector-light-mode: rgba(79 79 79 / 0.48);
116
- --state-tertiery-stroke-skyller: rgba(8 145 178 / 0.48);
117
- --state-tertiery-hover-bg-xspector: rgba(173 202 214 / 0.08);
118
- --state-tertiery-hover-bg-report-xspector-light-mode: rgba(158 158 158 / 0.08);
119
- --state-tertiery-hover-bg-skyller: rgba(82 178 201 / 0.08);
120
- --state-tertiery-pressed-xspector: #57656b;
121
- --state-tertiery-pressed-report-xspector-light-mode: #b1b1b1;
122
- --state-tertiery-pressed-skyller: #06667d;
123
- --state-tertiery-active-xspector: #adcad6;
124
- --state-tertiery-active-report-xspector-light-mode: #6f6f6f;
125
- --state-tertiery-active-skyller: #044959;
126
- --state-tertiery-text-solid-xspector: #212b36;
127
- --state-tertiery-text-solid-report-xspector-light-mode: #ffffff;
128
- --state-tertiery-text-solid-skyller: #ffffff;
129
- --state-tertiery-text-outline-xspector: #8aa2ab;
130
- --state-tertiery-text-outline-report-xspector-light-mode: #4f4f4f;
131
- --state-tertiery-text-outline-skyller: #0891b2;
132
- --state-tertiery-text-hover-xspector: #adcad6;
133
- --state-tertiery-text-hover-report-xspector-light-mode: #6f6f6f;
134
- --state-tertiery-text-hover-skyller: #52b2c9;
135
- --state-tertiery-text-pressed-xspector: #57656b;
136
- --state-tertiery-text-pressed-report-xspector-light-mode: #b1b1b1;
137
- --state-tertiery-text-pressed-skyller: #06667d;
108
+ --state-tertiary-default-xspector: #8aa2ab;
109
+ --state-tertiary-default-report-xspector-light-mode: #4f4f4f;
110
+ --state-tertiary-default-skyller: #0891b2;
111
+ --state-tertiary-hover-xspector: #adcad6;
112
+ --state-tertiary-hover-report-xspector-light-mode: #6f6f6f;
113
+ --state-tertiary-hover-skyller: #52b2c9;
114
+ --state-tertiary-stroke-xspector: rgba(138 162 171 / 0.48);
115
+ --state-tertiary-stroke-report-xspector-light-mode: rgba(79 79 79 / 0.48);
116
+ --state-tertiary-stroke-skyller: rgba(8 145 178 / 0.48);
117
+ --state-tertiary-hover-bg-xspector: rgba(173 202 214 / 0.08);
118
+ --state-tertiary-hover-bg-report-xspector-light-mode: rgba(158 158 158 / 0.08);
119
+ --state-tertiary-hover-bg-skyller: rgba(82 178 201 / 0.08);
120
+ --state-tertiary-pressed-xspector: #57656b;
121
+ --state-tertiary-pressed-report-xspector-light-mode: #b1b1b1;
122
+ --state-tertiary-pressed-skyller: #06667d;
123
+ --state-tertiary-active-xspector: #adcad6;
124
+ --state-tertiary-active-report-xspector-light-mode: #6f6f6f;
125
+ --state-tertiary-active-skyller: #044959;
126
+ --state-tertiary-text-solid-xspector: #212b36;
127
+ --state-tertiary-text-solid-report-xspector-light-mode: #ffffff;
128
+ --state-tertiary-text-solid-skyller: #ffffff;
129
+ --state-tertiary-text-outline-xspector: #8aa2ab;
130
+ --state-tertiary-text-outline-report-xspector-light-mode: #4f4f4f;
131
+ --state-tertiary-text-outline-skyller: #0891b2;
132
+ --state-tertiary-text-hover-xspector: #adcad6;
133
+ --state-tertiary-text-hover-report-xspector-light-mode: #6f6f6f;
134
+ --state-tertiary-text-hover-skyller: #52b2c9;
135
+ --state-tertiary-text-pressed-xspector: #57656b;
136
+ --state-tertiary-text-pressed-report-xspector-light-mode: #b1b1b1;
137
+ --state-tertiary-text-pressed-skyller: #06667d;
138
138
  --state-info-default-xspector: #1b7df5;
139
139
  --state-info-default-report-xspector-light-mode: #1b7df5;
140
140
  --state-info-default-skyller: #2563eb;
@@ -819,16 +819,16 @@
819
819
  --base-modal-modal-xspector: #2d2e30;
820
820
  --base-modal-modal-report-xspector-light-mode: #ffffff;
821
821
  --base-modal-modal-skyller: #ffffff;
822
- --base-modal-modal-hightlight-xspector: #343638;
823
- --base-modal-modal-hightlight-report-xspector-light-mode: #f5f5f5;
824
- --base-modal-modal-hightlight-skyller: #f5f5f5;
822
+ --base-modal-modal-highlight-xspector: #343638;
823
+ --base-modal-modal-highlight-report-xspector-light-mode: #f5f5f5;
824
+ --base-modal-modal-highlight-skyller: #f5f5f5;
825
825
  --base-modal-modal-curtain-xspector: rgba(11 10 10 / 0.64);
826
826
  --base-modal-modal-curtain-report-xspector-light-mode: rgba(0 0 0 / 0.64);
827
827
  --base-modal-modal-curtain-skyller: rgba(0 0 0 / 0.64);
828
- --base-bg-bg1-xspector: #202427;
828
+ --base-bg-bg1-xspector: #030c15;
829
829
  --base-bg-bg1-report-xspector-light-mode: #ffffff;
830
- --base-bg-bg1-skyller: #ffffff;
831
- --base-bg-bg2-xspector: #282c31;
830
+ --base-bg-bg1-skyller: #2563eb;
831
+ --base-bg-bg2-xspector: #051627;
832
832
  --base-bg-bg2-report-xspector-light-mode: #f5f5f5;
833
833
  --base-bg-bg2-skyller: #fafafa;
834
834
  --base-bg-bg3-xspector: #000000;
@@ -1017,9 +1017,24 @@
1017
1017
  --others-35-xspector: #56d364;
1018
1018
  --others-35-report-xspector-light-mode: #56d364;
1019
1019
  --others-35-skyller: #56d364;
1020
- --brand-new-blue-bg-xspector: #091d33;
1021
- --brand-new-blue-bg-report-xspector-light-mode: #091d33;
1022
- --brand-new-blue-bg-skyller: #ffffff;
1020
+ --page-bg-main-bg-xspector: #091d33;
1021
+ --page-bg-main-bg-report-xspector-light-mode: #ffffff;
1022
+ --page-bg-main-bg-skyller: #ffffff;
1023
+ --page-bg-circle-top-g-in-xspector: #003d6c;
1024
+ --page-bg-circle-top-g-in-report-xspector-light-mode: #adcad6;
1025
+ --page-bg-circle-top-g-in-skyller: #cfe4fd;
1026
+ --page-bg-circle-top-g-out-xspector: rgba(9 29 51 / 0);
1027
+ --page-bg-circle-top-g-out-report-xspector-light-mode: rgba(255 255 255 / 0);
1028
+ --page-bg-circle-top-g-out-skyller: rgba(255 255 255 / 0);
1029
+ --page-bg-circle-bottom-g-in-xspector: #003d6c;
1030
+ --page-bg-circle-bottom-g-in-report-xspector-light-mode: #adcad6;
1031
+ --page-bg-circle-bottom-g-in-skyller: #bed0f9;
1032
+ --page-bg-circle-bottom-g-out-xspector: rgba(9 29 51 / 0);
1033
+ --page-bg-circle-bottom-g-out-report-xspector-light-mode: rgba(255 255 255 / 0);
1034
+ --page-bg-circle-bottom-g-out-skyller: rgba(255 255 255 / 0);
1035
+ --text-white-xspector: #ffffff;
1036
+ --text-white-report-xspector-light-mode: #ffffff;
1037
+ --text-white-skyller: #ffffff;
1023
1038
 
1024
1039
  /* BUTTON RADIUS */
1025
1040
  --button-l-round: 8px;
package/src/theme/themes/xspector/color.css CHANGED
@@ -44,7 +44,7 @@
44
44
  --base-color-workspace-stroke: var(--base-bg-stroke1-xspector);
45
45
  --base-color-guideline-stroke: var(--base-bg-stroke2-xspector);
46
46
  --base-color-popup: var(--base-modal-modal-xspector);
47
- --base-color-popup-hightlight: var(--base-modal-modal-hightlight-xspector);
47
+ --base-color-popup-highlight: var(--base-modal-modal-highlight-xspector);
48
48
  --base-color-popup-curtain: var(--base-modal-modal-curtain-xspector);
49
49
  --common-white: var(--common-white-xspector);
50
50
  --common-black: var(--common-black-xspector);
package/src/theme/themes/xspector/state.css CHANGED
@@ -28,17 +28,17 @@
28
28
  --state-color-secondary-text-hover: var(--state-secondary-text-hover-xspector);
29
29
  --state-color-secondary-text-pressed: var(--state-secondary-text-pressed-xspector);
30
30
 
31
- /* Tertiary — note: variable_lasted uses state-tertiery (typo) */
32
- --state-color-tertiary-default: var(--state-tertiery-default-xspector);
33
- --state-color-tertiary-hover: var(--state-tertiery-hover-xspector);
34
- --state-color-tertiary-stroke: var(--state-tertiery-stroke-xspector);
35
- --state-color-tertiary-hover-bg: var(--state-tertiery-hover-bg-xspector);
36
- --state-color-tertiary-pressed: var(--state-tertiery-pressed-xspector);
37
- --state-color-tertiary-active: var(--state-tertiery-active-xspector);
38
- --state-color-tertiary-text-solid: var(--state-tertiery-text-solid-xspector);
39
- --state-color-tertiary-text-outline: var(--state-tertiery-text-outline-xspector);
40
- --state-color-tertiary-text-hover: var(--state-tertiery-text-hover-xspector);
41
- --state-color-tertiary-text-pressed: var(--state-tertiery-text-pressed-xspector);
31
+ /* Tertiary */
32
+ --state-color-tertiary-default: var(--state-tertiary-default-xspector);
33
+ --state-color-tertiary-hover: var(--state-tertiary-hover-xspector);
34
+ --state-color-tertiary-stroke: var(--state-tertiary-stroke-xspector);
35
+ --state-color-tertiary-hover-bg: var(--state-tertiary-hover-bg-xspector);
36
+ --state-color-tertiary-pressed: var(--state-tertiary-pressed-xspector);
37
+ --state-color-tertiary-active: var(--state-tertiary-active-xspector);
38
+ --state-color-tertiary-text-solid: var(--state-tertiary-text-solid-xspector);
39
+ --state-color-tertiary-text-outline: var(--state-tertiary-text-outline-xspector);
40
+ --state-color-tertiary-text-hover: var(--state-tertiary-text-hover-xspector);
41
+ --state-color-tertiary-text-pressed: var(--state-tertiary-text-pressed-xspector);
42
42
 
43
43
  /* Info */
44
44
  --state-color-info-default: var(--state-info-default-xspector);
package/src/theme/tokens/color.css CHANGED
@@ -39,7 +39,7 @@
39
39
  --base-color-workspace-stroke: #e2e2e2;
40
40
  --base-color-guideline-stroke: #c5c5c5;
41
41
  --base-color-popup: #ffffff;
42
- --base-color-popup-hightlight: #343638;
42
+ --base-color-popup-highlight: #343638;
43
43
  --base-color-popup-curtain: rgba(0 0 0 / 0.6);
44
44
  --common-white: #ffffff;
45
45
  --common-black: #000000;
package/src/utils/colors.ts CHANGED
@@ -243,7 +243,7 @@ export const THEME_COLOR_KEYS = {
243
243
  "base-workspace-stroke": "--base-color-workspace-stroke",
244
244
  "base-guideline-stroke": "--base-color-guideline-stroke",
245
245
  "base-popup": "--base-color-popup",
246
- "base-popup-highlight": "--base-color-popup-hightlight",
246
+ "base-popup-highlight": "--base-color-popup-highlight",
247
247
  "base-popup-curtain": "--base-color-popup-curtain",
248
248
  "base-popup-foreground": "--base-color-popup-foreground",
249
249
  /* ----- Common ----- */