@rovula/ui 0.0.46 → 0.0.47

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 (51) hide show
  1. package/dist/cjs/bundle.css +30 -28
  2. package/dist/cjs/bundle.js +3 -3
  3. package/dist/cjs/bundle.js.map +1 -1
  4. package/dist/cjs/types/components/Table/Table.d.ts +1 -0
  5. package/dist/cjs/types/components/Table/Table.stories.d.ts +2 -0
  6. package/dist/components/Switch/Switch.js +15 -1
  7. package/dist/components/Table/Table.js +2 -2
  8. package/dist/esm/bundle.css +30 -28
  9. package/dist/esm/bundle.js +2 -2
  10. package/dist/esm/bundle.js.map +1 -1
  11. package/dist/esm/types/components/Table/Table.d.ts +1 -0
  12. package/dist/esm/types/components/Table/Table.stories.d.ts +2 -0
  13. package/dist/index.d.ts +1 -0
  14. package/dist/src/theme/global.css +1215 -37
  15. package/dist/theme/global.css +1 -0
  16. package/dist/theme/themes/SKL/baseline.css +12 -0
  17. package/dist/theme/themes/SKL/color.css +78 -0
  18. package/dist/theme/themes/SKL/components/action-button.css +127 -0
  19. package/dist/theme/themes/SKL/components/button.css +512 -0
  20. package/dist/theme/themes/SKL/components/dropdown-menu.css +27 -0
  21. package/dist/theme/themes/SKL/components/loading.css +11 -0
  22. package/dist/theme/themes/SKL/components/navbar.css +8 -0
  23. package/dist/theme/themes/SKL/components/progress-bar.css +8 -0
  24. package/dist/theme/themes/SKL/components/switch.css +30 -0
  25. package/dist/theme/themes/SKL/palette.css +145 -0
  26. package/dist/theme/themes/SKL/state.css +86 -0
  27. package/dist/theme/themes/SKL/transparent.css +68 -0
  28. package/dist/theme/themes/SKL/typography.css +199 -0
  29. package/dist/theme/themes/SKL/variables.css +28 -0
  30. package/dist/theme/tokens/baseline.css +2 -1
  31. package/dist/theme/tokens/components/switch.css +30 -0
  32. package/package.json +1 -1
  33. package/src/components/Switch/Switch.tsx +37 -9
  34. package/src/components/Table/Table.tsx +7 -2
  35. package/src/theme/global.css +1 -0
  36. package/src/theme/themes/SKL/baseline.css +12 -0
  37. package/src/theme/themes/SKL/color.css +78 -0
  38. package/src/theme/themes/SKL/components/action-button.css +127 -0
  39. package/src/theme/themes/SKL/components/button.css +512 -0
  40. package/src/theme/themes/SKL/components/dropdown-menu.css +27 -0
  41. package/src/theme/themes/SKL/components/loading.css +11 -0
  42. package/src/theme/themes/SKL/components/navbar.css +8 -0
  43. package/src/theme/themes/SKL/components/progress-bar.css +8 -0
  44. package/src/theme/themes/SKL/components/switch.css +30 -0
  45. package/src/theme/themes/SKL/palette.css +145 -0
  46. package/src/theme/themes/SKL/state.css +86 -0
  47. package/src/theme/themes/SKL/transparent.css +68 -0
  48. package/src/theme/themes/SKL/typography.css +199 -0
  49. package/src/theme/themes/SKL/variables.css +28 -0
  50. package/src/theme/tokens/baseline.css +2 -1
  51. package/src/theme/tokens/components/switch.css +30 -0
package/dist/cjs/bundle.css CHANGED
@@ -1,6 +1,7 @@
1
1
 
2
2
  @import "./tokens/baseline.css";
3
3
  @import "./themes/xspector/baseline.css";
4
+ @import "./themes/SKL/baseline.css";
4
5
 
5
6
  /*
6
7
  ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
@@ -2201,10 +2202,6 @@ input[type=number] {
2201
2202
  --tw-bg-opacity: 1;
2202
2203
  background-color: color-mix(in srgb, var(--secondary-ramps-secondary-90) calc(100% * var(--tw-bg-opacity)), transparent);
2203
2204
  }
2204
- .bg-secondary-active{
2205
- --tw-bg-opacity: 1;
2206
- background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * var(--tw-bg-opacity)), transparent);
2207
- }
2208
2205
  .bg-secondary-default{
2209
2206
  --tw-bg-opacity: 1;
2210
2207
  background-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -4977,9 +4974,8 @@ input[type=number] {
4977
4974
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
4978
4975
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
4979
4976
  }
4980
- .group:disabled .group-disabled\:bg-state-disable-solid{
4981
- --tw-bg-opacity: 1;
4982
- background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * var(--tw-bg-opacity)), transparent);
4977
+ .group:disabled .group-disabled\:bg-\[--switch-thumb-disabled-color\]{
4978
+ background-color: var(--switch-thumb-disabled-color);
4983
4979
  }
4984
4980
  .peer:-moz-placeholder-shown ~ .peer-placeholder-shown\:top-2{
4985
4981
  top: 0.5rem;
@@ -5241,8 +5237,8 @@ input[type=number] {
5241
5237
  .data-\[disabled\]\:\!bg-\[var\(--dropdown-menu-disabled-bg\)\][data-disabled]{
5242
5238
  background-color: var(--dropdown-menu-disabled-bg) !important;
5243
5239
  }
5244
- .data-\[disabled\]\:bg-state-disable-solid\/\[0\.32\][data-disabled]{
5245
- background-color: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 0.32), transparent);
5240
+ .data-\[disabled\]\:bg-\[var\(--switch-disabled-color\)\][data-disabled]{
5241
+ background-color: var(--switch-disabled-color);
5246
5242
  }
5247
5243
  .data-\[loading\=true\]\:bg-button-error-flat-active[data-loading=true]{
5248
5244
  --tw-bg-opacity: 1;
@@ -5331,13 +5327,16 @@ input[type=number] {
5331
5327
  .data-\[state\=\'checked\'\]\:bg-\[var\(--dropdown-menu-selected-bg\)\][data-state='checked']{
5332
5328
  background-color: var(--dropdown-menu-selected-bg);
5333
5329
  }
5330
+ .data-\[state\=checked\]\:bg-\[var\(--switch-active-color\)\][data-state=checked]{
5331
+ background-color: var(--switch-active-color);
5332
+ }
5333
+ .data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-color\)\][data-state=checked]{
5334
+ background-color: var(--switch-thumb-active-color);
5335
+ }
5334
5336
  .data-\[state\=checked\]\:bg-function-active-solid[data-state=checked]{
5335
5337
  --tw-bg-opacity: 1;
5336
5338
  background-color: color-mix(in srgb, var(--function-active-solid) calc(100% * var(--tw-bg-opacity)), transparent);
5337
5339
  }
5338
- .data-\[state\=checked\]\:bg-secondary-active\/\[0\.32\][data-state=checked]{
5339
- background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.32), transparent);
5340
- }
5341
5340
  .data-\[state\=open\]\:bg-primary[data-state=open]{
5342
5341
  --tw-bg-opacity: 1;
5343
5342
  background-color: color-mix(in srgb, var(--state-color-primary-default) calc(100% * var(--tw-bg-opacity)), transparent);
@@ -5346,12 +5345,11 @@ input[type=number] {
5346
5345
  --tw-bg-opacity: 1;
5347
5346
  background-color: color-mix(in srgb, var(--grey-grey-20) calc(100% * var(--tw-bg-opacity)), transparent);
5348
5347
  }
5349
- .data-\[state\=unchecked\]\:bg-tertiary-active[data-state=unchecked]{
5350
- --tw-bg-opacity: 1;
5351
- background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * var(--tw-bg-opacity)), transparent);
5348
+ .data-\[state\=unchecked\]\:bg-\[var\(--switch-default-color\)\][data-state=unchecked]{
5349
+ background-color: var(--switch-default-color);
5352
5350
  }
5353
- .data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.32\][data-state=unchecked]{
5354
- background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.32), transparent);
5351
+ .data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-default-color\)\][data-state=unchecked]{
5352
+ background-color: var(--switch-thumb-default-color);
5355
5353
  }
5356
5354
  .data-\[disabled\]\:\!fill-state-disable-solid[data-disabled]{
5357
5355
  fill: color-mix(in srgb, var(--state-color-disable-solid) calc(100% * 1), transparent) !important;
@@ -5537,27 +5535,31 @@ input[type=number] {
5537
5535
  --tw-border-opacity: 1;
5538
5536
  border-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-border-opacity)), transparent);
5539
5537
  }
5538
+ .hover\:data-\[state\=checked\]\:bg-\[var\(--switch-active-hover-color\)\][data-state=checked]:hover{
5539
+ background-color: var(--switch-active-hover-color);
5540
+ }
5540
5541
  .hover\:data-\[state\=checked\]\:bg-function-active-hover[data-state=checked]:hover{
5541
5542
  --tw-bg-opacity: 1;
5542
5543
  background-color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-bg-opacity)), transparent);
5543
5544
  }
5544
- .hover\:data-\[state\=checked\]\:bg-secondary-active\/\[0\.48\][data-state=checked]:hover{
5545
- background-color: color-mix(in srgb, var(--state-color-secondary-active) calc(100% * 0.48), transparent);
5546
- }
5547
- .hover\:data-\[state\=unchecked\]\:bg-tertiary-active\/\[0\.48\][data-state=unchecked]:hover{
5548
- background-color: color-mix(in srgb, var(--state-color-tertiary-active) calc(100% * 0.48), transparent);
5545
+ .hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-hover-color\)\][data-state=unchecked]:hover{
5546
+ background-color: var(--switch-hover-color);
5549
5547
  }
5550
5548
  .hover\:data-\[state\=checked\]\:text-function-active-hover[data-state=checked]:hover{
5551
5549
  --tw-text-opacity: 1;
5552
5550
  color: color-mix(in srgb, var(--function-active-hover) calc(100% * var(--tw-text-opacity)), transparent);
5553
5551
  }
5554
- .group:hover .group-hover\:data-\[state\=checked\]\:ring-secondary-hover-bg[data-state=checked]{
5555
- --tw-ring-opacity: 1;
5556
- --tw-ring-color: color-mix(in srgb, var(--state-color-secondary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
5552
+ .group:hover .group-hover\:data-\[state\=checked\]\:bg-\[var\(--switch-thumb-active-hover-color\)\][data-state=checked]{
5553
+ background-color: var(--switch-thumb-active-hover-color);
5557
5554
  }
5558
- .group:hover .group-hover\:data-\[state\=unchecked\]\:ring-tertiary-hover-bg[data-state=unchecked]{
5559
- --tw-ring-opacity: 1;
5560
- --tw-ring-color: color-mix(in srgb, var(--state-color-tertiary-hover-bg) calc(100% * var(--tw-ring-opacity)), transparent);
5555
+ .group:hover .group-hover\:data-\[state\=unchecked\]\:bg-\[var\(--switch-thumb-hover-color\)\][data-state=unchecked]{
5556
+ background-color: var(--switch-thumb-hover-color);
5557
+ }
5558
+ .group:hover .group-hover\:data-\[state\=checked\]\:ring-\[var\(--switch-thumb-active-hover-ring\)\][data-state=checked]{
5559
+ --tw-ring-color: var(--switch-thumb-active-hover-ring);
5560
+ }
5561
+ .group:hover .group-hover\:data-\[state\=unchecked\]\:ring-\[var\(--switch-thumb-hover-ring\)\][data-state=unchecked]{
5562
+ --tw-ring-color: var(--switch-thumb-hover-ring);
5561
5563
  }
5562
5564
  @media (min-width: 640px){
5563
5565