@rovula/ui 0.1.4 → 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 (68) hide show
  1. package/dist/cjs/bundle.css +57 -15
  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/PasswordInput/PasswordInput.js +2 -2
  19. package/dist/components/PasswordInput/PasswordInput.stories.js +1 -1
  20. package/dist/components/Tabs/Tabs.js +1 -1
  21. package/dist/components/Text/Text.js +11 -1
  22. package/dist/components/Text/Text.stories.js +6 -6
  23. package/dist/components/TextArea/TextArea.styles.js +6 -6
  24. package/dist/components/TextInput/TextInput.stories.js +1 -1
  25. package/dist/components/TextInput/TextInput.styles.js +22 -22
  26. package/dist/components/Toast/Toast.js +2 -2
  27. package/dist/esm/bundle.css +57 -15
  28. package/dist/esm/bundle.js +5 -5
  29. package/dist/esm/bundle.js.map +1 -1
  30. package/dist/esm/types/components/Text/Text.d.ts +25 -1
  31. package/dist/esm/types/components/Text/Text.stories.d.ts +1 -1
  32. package/dist/esm/types/utils/colors.d.ts +1 -1
  33. package/dist/index.d.ts +26 -2
  34. package/dist/src/theme/global.css +169 -103
  35. package/dist/utils/colors.js +1 -1
  36. package/package.json +1 -1
  37. package/src/components/Avatar/Avatar.styles.ts +2 -2
  38. package/src/components/Button/Buttons.stories.tsx +2 -2
  39. package/src/components/Calendar/Calendar.tsx +1 -1
  40. package/src/components/Dropdown/Dropdown.tsx +2 -2
  41. package/src/components/DropdownMenu/DropdownMenu.tsx +6 -6
  42. package/src/components/Footer/Footer.tsx +1 -1
  43. package/src/components/Input/Input.styles.tsx +2 -2
  44. package/src/components/InputFilter/InputFilter.tsx +2 -2
  45. package/src/components/Label/Label.styles.ts +4 -4
  46. package/src/components/Menu/Menu.tsx +2 -2
  47. package/src/components/Navbar/Navbar.tsx +1 -1
  48. package/src/components/PasswordInput/PasswordInput.stories.tsx +1 -1
  49. package/src/components/PasswordInput/PasswordInput.tsx +2 -2
  50. package/src/components/Tabs/Tabs.tsx +1 -1
  51. package/src/components/Text/Text.stories.tsx +6 -6
  52. package/src/components/Text/Text.tsx +36 -1
  53. package/src/components/TextArea/TextArea.styles.ts +6 -6
  54. package/src/components/TextInput/TextInput.stories.tsx +3 -1
  55. package/src/components/TextInput/TextInput.styles.ts +31 -34
  56. package/src/components/Toast/Toast.tsx +2 -2
  57. package/src/theme/THEME_MAPPING.md +5 -5
  58. package/src/theme/global.css +1 -1
  59. package/src/theme/main-preset.js +49 -0
  60. package/src/theme/plugins/utilities/typography.js +40 -6
  61. package/src/theme/presets/colors.js +1 -1
  62. package/src/theme/themes/skyller/color.css +1 -1
  63. package/src/theme/themes/skyller/state.css +11 -11
  64. package/src/theme/themes/variable.css +78 -63
  65. package/src/theme/themes/xspector/color.css +1 -1
  66. package/src/theme/themes/xspector/state.css +11 -11
  67. package/src/theme/tokens/color.css +1 -1
  68. package/src/utils/colors.ts +1 -1
package/dist/cjs/bundle.css CHANGED
@@ -518,7 +518,7 @@ video {
518
518
 
519
519
  body {
520
520
  /* @apply bg-background text-foreground; */
521
- /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
521
+ /* @apply bg-[var(--background)] text-[var(--foreground)]; */
522
522
  }
523
523
 
524
524
  /* hide input number arrow */
@@ -1800,7 +1800,7 @@ input[type=number] {
1800
1800
  }
1801
1801
  .bg-base-popup-highlight{
1802
1802
  --tw-bg-opacity: 1;
1803
- background-color: color-mix(in srgb, var(--base-color-popup-hightlight) calc(100% * var(--tw-bg-opacity, 1)), transparent);
1803
+ background-color: color-mix(in srgb, var(--base-color-popup-highlight) calc(100% * var(--tw-bg-opacity, 1)), transparent);
1804
1804
  }
1805
1805
  .bg-base-stroke{
1806
1806
  --tw-bg-opacity: 1;
@@ -3444,32 +3444,32 @@ input[type=number] {
3444
3444
  line-height: var(--small9-line-height, 10px);
3445
3445
  font-weight: var(--small9-weight, 400);
3446
3446
  }
3447
- .text-subtitile1{
3447
+ .text-subtitle1{
3448
3448
  font-size: var(--subtitle1-size, 16px);
3449
3449
  line-height: var(--subtitle1-line-height, 24px);
3450
3450
  font-weight: var(--subtitle1-weight, 400);
3451
3451
  }
3452
- .text-subtitile2{
3452
+ .text-subtitle2{
3453
3453
  font-size: var(--subtitle2-size, 16px);
3454
3454
  line-height: var(--subtitle2-line-height, 24px);
3455
3455
  font-weight: var(--subtitle2-weight, 500);
3456
3456
  }
3457
- .text-subtitile3{
3457
+ .text-subtitle3{
3458
3458
  font-size: var(--subtitle3-size, 16px);
3459
3459
  line-height: var(--subtitle3-line-height, 24px);
3460
3460
  font-weight: var(--subtitle3-weight, 600);
3461
3461
  }
3462
- .text-subtitile4{
3462
+ .text-subtitle4{
3463
3463
  font-size: var(--subtitle4-size, 14px);
3464
3464
  line-height: var(--subtitle4-line-height, 22px);
3465
3465
  font-weight: var(--subtitle4-weight, 400);
3466
3466
  }
3467
- .text-subtitile5{
3467
+ .text-subtitle5{
3468
3468
  font-size: var(--subtitle5-size, 14px);
3469
3469
  line-height: var(--subtitle5-line-height, 22px);
3470
3470
  font-weight: var(--subtitle5-weight, 500);
3471
3471
  }
3472
- .text-subtitile6{
3472
+ .text-subtitle6{
3473
3473
  font-size: var(--subtitle6-size, 14px);
3474
3474
  line-height: var(--subtitle6-line-height, 22px);
3475
3475
  font-weight: var(--subtitle6-weight, 600);
@@ -4019,6 +4019,36 @@ input[type=number] {
4019
4019
  line-height: var(--h6-line-height, 24px);
4020
4020
  font-weight: var(--h6-weight, 700);
4021
4021
  }
4022
+ .typography-subtitle1{
4023
+ font-size: var(--subtitle1-size, 16px);
4024
+ line-height: var(--subtitle1-line-height, 24px);
4025
+ font-weight: var(--subtitle1-weight, 400);
4026
+ }
4027
+ .typography-subtitle2{
4028
+ font-size: var(--subtitle2-size, 16px);
4029
+ line-height: var(--subtitle2-line-height, 24px);
4030
+ font-weight: var(--subtitle2-weight, 500);
4031
+ }
4032
+ .typography-subtitle3{
4033
+ font-size: var(--subtitle3-size, 16px);
4034
+ line-height: var(--subtitle3-line-height, 24px);
4035
+ font-weight: var(--subtitle3-weight, 600);
4036
+ }
4037
+ .typography-subtitle4{
4038
+ font-size: var(--subtitle4-size, 14px);
4039
+ line-height: var(--subtitle4-line-height, 22px);
4040
+ font-weight: var(--subtitle4-weight, 400);
4041
+ }
4042
+ .typography-subtitle5{
4043
+ font-size: var(--subtitle5-size, 14px);
4044
+ line-height: var(--subtitle5-line-height, 22px);
4045
+ font-weight: var(--subtitle5-weight, 500);
4046
+ }
4047
+ .typography-subtitle6{
4048
+ font-size: var(--subtitle6-size, 14px);
4049
+ line-height: var(--subtitle6-line-height, 22px);
4050
+ font-weight: var(--subtitle6-weight, 600);
4051
+ }
4022
4052
  .typography-subtitile1{
4023
4053
  font-size: var(--subtitle1-size, 16px);
4024
4054
  line-height: var(--subtitle1-line-height, 24px);
@@ -4348,6 +4378,14 @@ input[type=number] {
4348
4378
  --tw-border-opacity: 1;
4349
4379
  border-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
4350
4380
  }
4381
+ .hover\:border-l-input-active-stroke:hover{
4382
+ --tw-border-opacity: 1;
4383
+ border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
4384
+ }
4385
+ .hover\:border-r-input-active-stroke:hover{
4386
+ --tw-border-opacity: 1;
4387
+ border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
4388
+ }
4351
4389
  .hover\:bg-\[var\(--dropdown-menu-hover-bg\)\]:hover{
4352
4390
  background-color: var(--dropdown-menu-hover-bg);
4353
4391
  }
@@ -4566,8 +4604,8 @@ input[type=number] {
4566
4604
  .hover\:fill-input-default-text:hover{
4567
4605
  fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
4568
4606
  }
4569
- .hover\:stroke-input-active-stroke:hover{
4570
- stroke: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
4607
+ .hover\:fill-input-filled-text:hover{
4608
+ fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
4571
4609
  }
4572
4610
  .hover\:stroke-input-filled-text:hover{
4573
4611
  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
@@ -5610,22 +5648,22 @@ input[type=number] {
5610
5648
  .peer:placeholder-shown ~ .peer-placeholder-shown\:bg-transparent{
5611
5649
  background-color: transparent;
5612
5650
  }
5613
- .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1{
5651
+ .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle1{
5614
5652
  font-size: var(--subtitle1-size, 16px);
5615
5653
  line-height: var(--subtitle1-line-height, 24px);
5616
5654
  font-weight: var(--subtitle1-weight, 400);
5617
5655
  }
5618
- .peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile1{
5656
+ .peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle1{
5619
5657
  font-size: var(--subtitle1-size, 16px);
5620
5658
  line-height: var(--subtitle1-line-height, 24px);
5621
5659
  font-weight: var(--subtitle1-weight, 400);
5622
5660
  }
5623
- .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4{
5661
+ .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle4{
5624
5662
  font-size: var(--subtitle4-size, 14px);
5625
5663
  line-height: var(--subtitle4-line-height, 22px);
5626
5664
  font-weight: var(--subtitle4-weight, 400);
5627
5665
  }
5628
- .peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitile4{
5666
+ .peer:placeholder-shown ~ .peer-placeholder-shown\:typography-subtitle4{
5629
5667
  font-size: var(--subtitle4-size, 14px);
5630
5668
  line-height: var(--subtitle4-line-height, 22px);
5631
5669
  font-weight: var(--subtitle4-weight, 400);
@@ -6166,7 +6204,7 @@ input[type=number] {
6166
6204
  .data-\[swipe\=move\]\:transition-none[data-swipe="move"]{
6167
6205
  transition-property: none;
6168
6206
  }
6169
- .data-\[state\=\'checked\'\]\:typography-subtitile5[data-state='checked']{
6207
+ .data-\[state\=\'checked\'\]\:typography-subtitle5[data-state='checked']{
6170
6208
  font-size: var(--subtitle5-size, 14px);
6171
6209
  line-height: var(--subtitle5-line-height, 22px);
6172
6210
  font-weight: var(--subtitle5-weight, 500);
@@ -6356,6 +6394,10 @@ input[type=number] {
6356
6394
  --tw-text-opacity: 1;
6357
6395
  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
6358
6396
  }
6397
+ .hover\:\[\&_svg\]\:text-input-filled-text svg:hover{
6398
+ --tw-text-opacity: 1;
6399
+ color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
6400
+ }
6359
6401
  .peer:hover ~ .peer-hover\:\[\&_svg\]\:text-input-filled-text svg{
6360
6402
  --tw-text-opacity: 1;
6361
6403
  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);