@rolster/react-components 18.21.23 → 18.21.24

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 (6) hide show
  1. package/dist/cjs/assets/{index-R-vkwGLv.css → index-Buj4-HoB.css} +21 -13
  2. package/dist/es/assets/{index-R-vkwGLv.css → index-Buj4-HoB.css} +21 -13
  3. package/dist/esm/components/atoms/CheckBox/CheckBox.css +6 -4
  4. package/dist/esm/components/atoms/RadioButton/RadioButton.css +6 -4
  5. package/dist/esm/components/atoms/Switch/Switch.css +9 -5
  6. package/package.json +4 -4
package/dist/cjs/assets/{index-R-vkwGLv.css → index-Buj4-HoB.css} RENAMED
@@ -439,6 +439,7 @@
439
439
  }
440
440
 
441
441
  .rls-checkbox {
442
+ --pvt-component-border-color: var(--rls-app-color-500);
442
443
  --pvt-component-transform: scale(0);
443
444
  position: relative;
444
445
  display: flex;
@@ -448,14 +449,15 @@
448
449
  align-items: center;
449
450
  box-sizing: border-box;
450
451
  outline: none;
451
- border-radius: var(--rls-sizing-x2);
452
- background: var(--rls-app-color-050);
453
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
452
+ border-radius: var(--rls-sizing-x3);
453
+ background: var(--rls-theme-color-050);
454
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
454
455
  }
455
456
  .rls-checkbox:hover {
456
457
  cursor: pointer;
457
458
  }
458
459
  .rls-checkbox--checked {
460
+ --pvt-component-border-color: var(--rls-theme-color-500);
459
461
  --pvt-component-transform: scale(1);
460
462
  }
461
463
  .rls-checkbox--disabled {
@@ -466,7 +468,7 @@
466
468
  width: var(--rlc-checkbox-children-dimension);
467
469
  height: var(--rlc-checkbox-children-dimension);
468
470
  border-radius: var(--rls-sizing-x1);
469
- background: var(--rls-theme-gradient-500);
471
+ background: var(--rls-theme-color-500);
470
472
  transform: var(--pvt-component-transform);
471
473
  transform-origin: 50% 50%;
472
474
  transition: all 160ms 0ms var(--rls-standard-curve);
@@ -773,6 +775,7 @@
773
775
  }
774
776
 
775
777
  .rls-radiobutton {
778
+ --pvt-component-border-color: var(--rls-app-color-500);
776
779
  --pvt-component-transform: scale(0);
777
780
  position: relative;
778
781
  display: flex;
@@ -783,13 +786,14 @@
783
786
  outline: none;
784
787
  border-radius: 50%;
785
788
  box-sizing: border-box;
786
- background: var(--rls-app-color-050);
787
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
789
+ background: var(--rls-theme-color-050);
790
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
788
791
  }
789
792
  .rls-radiobutton:hover {
790
793
  cursor: pointer;
791
794
  }
792
795
  .rls-radiobutton--checked {
796
+ --pvt-component-border-color: var(--rls-theme-color-500);
793
797
  --pvt-component-transform: scale(1);
794
798
  }
795
799
  .rls-radiobutton--disabled {
@@ -798,9 +802,9 @@
798
802
  }
799
803
  .rls-radiobutton__component {
800
804
  width: var(--rlc-radiobutton-children-dimension);
801
- height: varr(--rlc-radiobutton-children-dimension);
805
+ height: var(--rlc-radiobutton-children-dimension);
802
806
  border-radius: 50%;
803
- background: var(--rls-theme-gradient-500);
807
+ background: var(--rls-theme-color-500);
804
808
  transform: var(--pvt-component-transform);
805
809
  transform-origin: 50% 50%;
806
810
  transition: all 160ms 0ms var(--rls-standard-curve);
@@ -870,7 +874,9 @@
870
874
 
871
875
  .rls-switch {
872
876
  --pvt-element-left: var(--rls-sizing-x1);
877
+ --pvt-element-border-color: var(--rls-app-color-400);
873
878
  --pvt-element-background: var(--rls-app-color-050);
879
+ --pvt-element-item-background: transparent;
874
880
  --pvt-bar-background: var(--rls-app-color-200);
875
881
  max-width: var(--rlc-switch-max-width);
876
882
  }
@@ -878,10 +884,12 @@
878
884
  cursor: pointer;
879
885
  }
880
886
  .rls-switch--checked {
881
- --pvt-element-background: var(--rls-theme-gradient-500);
882
887
  --pvt-element-left: calc(
883
888
  100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
884
889
  );
890
+ --pvt-element-border-color: var(--rls-theme-color-500);
891
+ --pvt-element-background: var(--rls-theme-color-050);
892
+ --pvt-element-item-background: var(--rls-theme-color-500);
885
893
  --pvt-bar-background: var(--rls-theme-color-300);
886
894
  }
887
895
  .rls-switch--disabled {
@@ -904,9 +912,9 @@
904
912
  padding: var(--rls-sizing-x2);
905
913
  box-sizing: border-box;
906
914
  border-radius: 50%;
907
- background: var(--rls-app-color-050);
908
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
909
- /*transition: left 240ms var(--rls-standard-curve);*/
915
+ background: var(--pvt-element-background);
916
+ border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
917
+ transition: left 240ms var(--rls-standard-curve);
910
918
  }
911
919
  .rls-switch__component__element::before {
912
920
  display: block;
@@ -914,7 +922,7 @@
914
922
  width: 100%;
915
923
  height: 100%;
916
924
  border-radius: 50%;
917
- background: var(--pvt-element-background);
925
+ background: var(--pvt-element-item-background);
918
926
  }
919
927
  .rls-switch__component__bar {
920
928
  background: var(--pvt-bar-background);
package/dist/es/assets/{index-R-vkwGLv.css → index-Buj4-HoB.css} RENAMED
@@ -439,6 +439,7 @@
439
439
  }
440
440
 
441
441
  .rls-checkbox {
442
+ --pvt-component-border-color: var(--rls-app-color-500);
442
443
  --pvt-component-transform: scale(0);
443
444
  position: relative;
444
445
  display: flex;
@@ -448,14 +449,15 @@
448
449
  align-items: center;
449
450
  box-sizing: border-box;
450
451
  outline: none;
451
- border-radius: var(--rls-sizing-x2);
452
- background: var(--rls-app-color-050);
453
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
452
+ border-radius: var(--rls-sizing-x3);
453
+ background: var(--rls-theme-color-050);
454
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
454
455
  }
455
456
  .rls-checkbox:hover {
456
457
  cursor: pointer;
457
458
  }
458
459
  .rls-checkbox--checked {
460
+ --pvt-component-border-color: var(--rls-theme-color-500);
459
461
  --pvt-component-transform: scale(1);
460
462
  }
461
463
  .rls-checkbox--disabled {
@@ -466,7 +468,7 @@
466
468
  width: var(--rlc-checkbox-children-dimension);
467
469
  height: var(--rlc-checkbox-children-dimension);
468
470
  border-radius: var(--rls-sizing-x1);
469
- background: var(--rls-theme-gradient-500);
471
+ background: var(--rls-theme-color-500);
470
472
  transform: var(--pvt-component-transform);
471
473
  transform-origin: 50% 50%;
472
474
  transition: all 160ms 0ms var(--rls-standard-curve);
@@ -773,6 +775,7 @@
773
775
  }
774
776
 
775
777
  .rls-radiobutton {
778
+ --pvt-component-border-color: var(--rls-app-color-500);
776
779
  --pvt-component-transform: scale(0);
777
780
  position: relative;
778
781
  display: flex;
@@ -783,13 +786,14 @@
783
786
  outline: none;
784
787
  border-radius: 50%;
785
788
  box-sizing: border-box;
786
- background: var(--rls-app-color-050);
787
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
789
+ background: var(--rls-theme-color-050);
790
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
788
791
  }
789
792
  .rls-radiobutton:hover {
790
793
  cursor: pointer;
791
794
  }
792
795
  .rls-radiobutton--checked {
796
+ --pvt-component-border-color: var(--rls-theme-color-500);
793
797
  --pvt-component-transform: scale(1);
794
798
  }
795
799
  .rls-radiobutton--disabled {
@@ -798,9 +802,9 @@
798
802
  }
799
803
  .rls-radiobutton__component {
800
804
  width: var(--rlc-radiobutton-children-dimension);
801
- height: varr(--rlc-radiobutton-children-dimension);
805
+ height: var(--rlc-radiobutton-children-dimension);
802
806
  border-radius: 50%;
803
- background: var(--rls-theme-gradient-500);
807
+ background: var(--rls-theme-color-500);
804
808
  transform: var(--pvt-component-transform);
805
809
  transform-origin: 50% 50%;
806
810
  transition: all 160ms 0ms var(--rls-standard-curve);
@@ -870,7 +874,9 @@
870
874
 
871
875
  .rls-switch {
872
876
  --pvt-element-left: var(--rls-sizing-x1);
877
+ --pvt-element-border-color: var(--rls-app-color-400);
873
878
  --pvt-element-background: var(--rls-app-color-050);
879
+ --pvt-element-item-background: transparent;
874
880
  --pvt-bar-background: var(--rls-app-color-200);
875
881
  max-width: var(--rlc-switch-max-width);
876
882
  }
@@ -878,10 +884,12 @@
878
884
  cursor: pointer;
879
885
  }
880
886
  .rls-switch--checked {
881
- --pvt-element-background: var(--rls-theme-gradient-500);
882
887
  --pvt-element-left: calc(
883
888
  100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
884
889
  );
890
+ --pvt-element-border-color: var(--rls-theme-color-500);
891
+ --pvt-element-background: var(--rls-theme-color-050);
892
+ --pvt-element-item-background: var(--rls-theme-color-500);
885
893
  --pvt-bar-background: var(--rls-theme-color-300);
886
894
  }
887
895
  .rls-switch--disabled {
@@ -904,9 +912,9 @@
904
912
  padding: var(--rls-sizing-x2);
905
913
  box-sizing: border-box;
906
914
  border-radius: 50%;
907
- background: var(--rls-app-color-050);
908
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
909
- /*transition: left 240ms var(--rls-standard-curve);*/
915
+ background: var(--pvt-element-background);
916
+ border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
917
+ transition: left 240ms var(--rls-standard-curve);
910
918
  }
911
919
  .rls-switch__component__element::before {
912
920
  display: block;
@@ -914,7 +922,7 @@
914
922
  width: 100%;
915
923
  height: 100%;
916
924
  border-radius: 50%;
917
- background: var(--pvt-element-background);
925
+ background: var(--pvt-element-item-background);
918
926
  }
919
927
  .rls-switch__component__bar {
920
928
  background: var(--pvt-bar-background);
package/dist/esm/components/atoms/CheckBox/CheckBox.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .rls-checkbox {
2
+ --pvt-component-border-color: var(--rls-app-color-500);
2
3
  --pvt-component-transform: scale(0);
3
4
  position: relative;
4
5
  display: flex;
@@ -8,14 +9,15 @@
8
9
  align-items: center;
9
10
  box-sizing: border-box;
10
11
  outline: none;
11
- border-radius: var(--rls-sizing-x2);
12
- background: var(--rls-app-color-050);
13
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
12
+ border-radius: var(--rls-sizing-x3);
13
+ background: var(--rls-theme-color-050);
14
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
14
15
  }
15
16
  .rls-checkbox:hover {
16
17
  cursor: pointer;
17
18
  }
18
19
  .rls-checkbox--checked {
20
+ --pvt-component-border-color: var(--rls-theme-color-500);
19
21
  --pvt-component-transform: scale(1);
20
22
  }
21
23
  .rls-checkbox--disabled {
@@ -26,7 +28,7 @@
26
28
  width: var(--rlc-checkbox-children-dimension);
27
29
  height: var(--rlc-checkbox-children-dimension);
28
30
  border-radius: var(--rls-sizing-x1);
29
- background: var(--rls-theme-gradient-500);
31
+ background: var(--rls-theme-color-500);
30
32
  transform: var(--pvt-component-transform);
31
33
  transform-origin: 50% 50%;
32
34
  transition: all 160ms 0ms var(--rls-standard-curve);
package/dist/esm/components/atoms/RadioButton/RadioButton.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .rls-radiobutton {
2
+ --pvt-component-border-color: var(--rls-app-color-500);
2
3
  --pvt-component-transform: scale(0);
3
4
  position: relative;
4
5
  display: flex;
@@ -9,13 +10,14 @@
9
10
  outline: none;
10
11
  border-radius: 50%;
11
12
  box-sizing: border-box;
12
- background: var(--rls-app-color-050);
13
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
13
+ background: var(--rls-theme-color-050);
14
+ border: var(--rls-sizing-x1) solid var(--pvt-component-border-color);
14
15
  }
15
16
  .rls-radiobutton:hover {
16
17
  cursor: pointer;
17
18
  }
18
19
  .rls-radiobutton--checked {
20
+ --pvt-component-border-color: var(--rls-theme-color-500);
19
21
  --pvt-component-transform: scale(1);
20
22
  }
21
23
  .rls-radiobutton--disabled {
@@ -24,9 +26,9 @@
24
26
  }
25
27
  .rls-radiobutton__component {
26
28
  width: var(--rlc-radiobutton-children-dimension);
27
- height: varr(--rlc-radiobutton-children-dimension);
29
+ height: var(--rlc-radiobutton-children-dimension);
28
30
  border-radius: 50%;
29
- background: var(--rls-theme-gradient-500);
31
+ background: var(--rls-theme-color-500);
30
32
  transform: var(--pvt-component-transform);
31
33
  transform-origin: 50% 50%;
32
34
  transition: all 160ms 0ms var(--rls-standard-curve);
package/dist/esm/components/atoms/Switch/Switch.css CHANGED
@@ -1,6 +1,8 @@
1
1
  .rls-switch {
2
2
  --pvt-element-left: var(--rls-sizing-x1);
3
+ --pvt-element-border-color: var(--rls-app-color-400);
3
4
  --pvt-element-background: var(--rls-app-color-050);
5
+ --pvt-element-item-background: transparent;
4
6
  --pvt-bar-background: var(--rls-app-color-200);
5
7
  max-width: var(--rlc-switch-max-width);
6
8
  }
@@ -8,10 +10,12 @@
8
10
  cursor: pointer;
9
11
  }
10
12
  .rls-switch--checked {
11
- --pvt-element-background: var(--rls-theme-gradient-500);
12
13
  --pvt-element-left: calc(
13
14
  100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
14
15
  );
16
+ --pvt-element-border-color: var(--rls-theme-color-500);
17
+ --pvt-element-background: var(--rls-theme-color-050);
18
+ --pvt-element-item-background: var(--rls-theme-color-500);
15
19
  --pvt-bar-background: var(--rls-theme-color-300);
16
20
  }
17
21
  .rls-switch--disabled {
@@ -34,9 +38,9 @@
34
38
  padding: var(--rls-sizing-x2);
35
39
  box-sizing: border-box;
36
40
  border-radius: 50%;
37
- background: var(--rls-app-color-050);
38
- box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
39
- /*transition: left 240ms var(--rls-standard-curve);*/
41
+ background: var(--pvt-element-background);
42
+ border: var(--rls-sizing-x1) solid var(--pvt-element-border-color);
43
+ transition: left 240ms var(--rls-standard-curve);
40
44
  }
41
45
  .rls-switch__component__element::before {
42
46
  display: block;
@@ -44,7 +48,7 @@
44
48
  width: 100%;
45
49
  height: 100%;
46
50
  border-radius: 50%;
47
- background: var(--pvt-element-background);
51
+ background: var(--pvt-element-item-background);
48
52
  }
49
53
  .rls-switch__component__bar {
50
54
  background: var(--pvt-bar-background);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "18.21.23",
3
+ "version": "18.21.24",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",
@@ -30,7 +30,7 @@
30
30
  "prepublishOnly": "npm run build"
31
31
  },
32
32
  "dependencies": {
33
- "@rolster/commons": "^2.3.4",
33
+ "@rolster/commons": "^2.3.16",
34
34
  "@rolster/components": "^0.5.3",
35
35
  "@rolster/dates": "^2.1.0",
36
36
  "@rolster/forms": "^2.10.0",
@@ -49,7 +49,7 @@
49
49
  "@rollup/plugin-node-resolve": "^15.2.1",
50
50
  "@rollup/plugin-typescript": "^11.1.3",
51
51
  "@rolster/rollup": "^1.0.6",
52
- "@rolster/styles-foundations": "^2.4.17",
52
+ "@rolster/styles-foundations": "^2.4.18",
53
53
  "@rolster/types": "^1.1.0",
54
54
  "@types/node-sass": "^4.11.4",
55
55
  "@types/react": "^18.0.28",
@@ -71,7 +71,7 @@
71
71
  "sass": "^1.62.1",
72
72
  "sort-by": "^0.0.2",
73
73
  "typescript": "^5.7.2",
74
- "vite": "^6.2.6"
74
+ "vite": "^6.2.7"
75
75
  },
76
76
  "repository": {
77
77
  "type": "git",