@rolster/react-components 18.15.3 → 18.15.4

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-VCzqT0sQ.css → index-CV5CNdv4.css} +21 -19
  2. package/dist/es/assets/{index-VCzqT0sQ.css → index-CV5CNdv4.css} +21 -19
  3. package/dist/esm/components/atoms/Badge/Badge.css +3 -3
  4. package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +3 -1
  5. package/dist/esm/components/molecules/Ballot/Ballot.css +15 -15
  6. package/package.json +2 -2
package/dist/cjs/assets/{index-VCzqT0sQ.css → index-CV5CNdv4.css} RENAMED
@@ -58,13 +58,13 @@
58
58
  position: relative;
59
59
  display: inline-block;
60
60
  width: auto;
61
- padding: var(--rls-sizing-x2);
61
+ padding: var(--rlc-badge-padding);
62
62
  box-sizing: border-box;
63
63
  font-size: var(--rls-caption-font-size);
64
64
  letter-spacing: var(--rls-caption-letter-spacing);
65
65
  line-height: var(--rls-caption-line-height);
66
- color: var(--rls-theme-color-500);
67
- background: var(--rls-theme-color-100);
66
+ color: var(--rls-theme-color-100);
67
+ background: var(--rls-theme-color-500);
68
68
  border-radius: var(--rls-sizing-x2);
69
69
  }
70
70
  .rls-badge > span {
@@ -795,7 +795,9 @@
795
795
  text-overflow: inherit;
796
796
  }
797
797
  .rls-skeleton-text__value {
798
- display: block;
798
+ display: flex;
799
+ column-gap: var(--rlc-skeleton-text-column-gap);
800
+ align-items: center;
799
801
  font-weight: inherit;
800
802
  font-size: inherit;
801
803
  line-height: inherit;
@@ -868,7 +870,7 @@
868
870
  width: 100%;
869
871
  align-content: center;
870
872
  column-gap: var(--rls-sizing-x4);
871
- padding: var(--rls-sizing-x4);
873
+ padding: var(--rlc-ballot-padding);
872
874
  box-sizing: border-box;
873
875
  overflow: hidden;
874
876
  }
@@ -883,34 +885,34 @@
883
885
  display: flex;
884
886
  overflow: hidden;
885
887
  flex-direction: column;
886
- row-gap: var(--rls-sizing-x2);
888
+ row-gap: var(--rlc-ballot-component-row-gap);
887
889
  }
888
890
  .rls-ballot__title {
889
- --rlc-skeleton-text-height: var(--rls-label-line-height);
890
- --rlc-skeleton-text-letter-spacing: var(--rls-label-letter-spacing);
891
- --rlc-skeleton-text-font-size: var(--rls-label-font-size);
891
+ --rlc-skeleton-text-height: var(--rls-ballot-title-height);
892
+ --rlc-skeleton-text-letter-spacing: var(--rls-ballot-title-letter-spacing);
893
+ --rlc-skeleton-text-font-size: var(--rls-ballot-title-font-size);
892
894
  position: relative;
893
895
  width: 100%;
894
896
  color: var(--rls-app-color-500);
895
897
  overflow: hidden;
896
898
  white-space: nowrap;
897
899
  text-overflow: ellipsis;
898
- font-weight: var(--rls-font-weight-medium);
899
- font-size: var(--rls-label-font-size);
900
- letter-spacing: var(--rls-label-letter-spacing);
901
- min-height: var(--rls-label-line-height);
902
- line-height: var(--rls-label-line-height);
900
+ font-weight: var(--rlc-ballot-title-font-weight);
901
+ font-size: var(--rls-ballot-title-font-size);
902
+ letter-spacing: var(--rls-ballot-title-letter-spacing);
903
+ min-height: var(--rls-ballot-title-height);
904
+ line-height: var(--rls-ballot-title-height);
903
905
  }
904
906
  .rls-ballot__subtitle {
905
907
  --rlc-skeleton-text-height: var(--rlc-ballot-subtitle-height);
906
- --rlc-skeleton-text-letter-spacing: var(--rls-smalltext-letter-spacing);
907
- --rlc-skeleton-text-font-size: var(--rls-smalltext-font-size);
908
+ --rlc-skeleton-text-letter-spacing: var(--rls-ballot-subtitle-letter-spacing);
909
+ --rlc-skeleton-text-font-size: var(--rls-ballot-subtitle-font-size);
908
910
  position: relative;
909
911
  width: var(--rlc-ballot-subtitle-width);
910
912
  color: var(--rls-app-color-300);
911
- font-weight: var(--rls-font-weight-semibold);
912
- font-size: var(--rls-smalltext-font-size);
913
- letter-spacing: var(--rls-smalltext-letter-spacing);
913
+ font-weight: var(--rlc-ballot-subtitle-font-weight);
914
+ font-size: var(--rls-ballot-subtitle-font-size);
915
+ letter-spacing: var(--rls-ballot-subtitle-letter-spacing);
914
916
  min-height: var(--rlc-ballot-subtitle-height);
915
917
  line-height: var(--rlc-ballot-subtitle-height);
916
918
  overflow: var(--rlc-ballot-subtitle-overflow);
package/dist/es/assets/{index-VCzqT0sQ.css → index-CV5CNdv4.css} RENAMED
@@ -58,13 +58,13 @@
58
58
  position: relative;
59
59
  display: inline-block;
60
60
  width: auto;
61
- padding: var(--rls-sizing-x2);
61
+ padding: var(--rlc-badge-padding);
62
62
  box-sizing: border-box;
63
63
  font-size: var(--rls-caption-font-size);
64
64
  letter-spacing: var(--rls-caption-letter-spacing);
65
65
  line-height: var(--rls-caption-line-height);
66
- color: var(--rls-theme-color-500);
67
- background: var(--rls-theme-color-100);
66
+ color: var(--rls-theme-color-100);
67
+ background: var(--rls-theme-color-500);
68
68
  border-radius: var(--rls-sizing-x2);
69
69
  }
70
70
  .rls-badge > span {
@@ -795,7 +795,9 @@
795
795
  text-overflow: inherit;
796
796
  }
797
797
  .rls-skeleton-text__value {
798
- display: block;
798
+ display: flex;
799
+ column-gap: var(--rlc-skeleton-text-column-gap);
800
+ align-items: center;
799
801
  font-weight: inherit;
800
802
  font-size: inherit;
801
803
  line-height: inherit;
@@ -868,7 +870,7 @@
868
870
  width: 100%;
869
871
  align-content: center;
870
872
  column-gap: var(--rls-sizing-x4);
871
- padding: var(--rls-sizing-x4);
873
+ padding: var(--rlc-ballot-padding);
872
874
  box-sizing: border-box;
873
875
  overflow: hidden;
874
876
  }
@@ -883,34 +885,34 @@
883
885
  display: flex;
884
886
  overflow: hidden;
885
887
  flex-direction: column;
886
- row-gap: var(--rls-sizing-x2);
888
+ row-gap: var(--rlc-ballot-component-row-gap);
887
889
  }
888
890
  .rls-ballot__title {
889
- --rlc-skeleton-text-height: var(--rls-label-line-height);
890
- --rlc-skeleton-text-letter-spacing: var(--rls-label-letter-spacing);
891
- --rlc-skeleton-text-font-size: var(--rls-label-font-size);
891
+ --rlc-skeleton-text-height: var(--rls-ballot-title-height);
892
+ --rlc-skeleton-text-letter-spacing: var(--rls-ballot-title-letter-spacing);
893
+ --rlc-skeleton-text-font-size: var(--rls-ballot-title-font-size);
892
894
  position: relative;
893
895
  width: 100%;
894
896
  color: var(--rls-app-color-500);
895
897
  overflow: hidden;
896
898
  white-space: nowrap;
897
899
  text-overflow: ellipsis;
898
- font-weight: var(--rls-font-weight-medium);
899
- font-size: var(--rls-label-font-size);
900
- letter-spacing: var(--rls-label-letter-spacing);
901
- min-height: var(--rls-label-line-height);
902
- line-height: var(--rls-label-line-height);
900
+ font-weight: var(--rlc-ballot-title-font-weight);
901
+ font-size: var(--rls-ballot-title-font-size);
902
+ letter-spacing: var(--rls-ballot-title-letter-spacing);
903
+ min-height: var(--rls-ballot-title-height);
904
+ line-height: var(--rls-ballot-title-height);
903
905
  }
904
906
  .rls-ballot__subtitle {
905
907
  --rlc-skeleton-text-height: var(--rlc-ballot-subtitle-height);
906
- --rlc-skeleton-text-letter-spacing: var(--rls-smalltext-letter-spacing);
907
- --rlc-skeleton-text-font-size: var(--rls-smalltext-font-size);
908
+ --rlc-skeleton-text-letter-spacing: var(--rls-ballot-subtitle-letter-spacing);
909
+ --rlc-skeleton-text-font-size: var(--rls-ballot-subtitle-font-size);
908
910
  position: relative;
909
911
  width: var(--rlc-ballot-subtitle-width);
910
912
  color: var(--rls-app-color-300);
911
- font-weight: var(--rls-font-weight-semibold);
912
- font-size: var(--rls-smalltext-font-size);
913
- letter-spacing: var(--rls-smalltext-letter-spacing);
913
+ font-weight: var(--rlc-ballot-subtitle-font-weight);
914
+ font-size: var(--rls-ballot-subtitle-font-size);
915
+ letter-spacing: var(--rls-ballot-subtitle-letter-spacing);
914
916
  min-height: var(--rlc-ballot-subtitle-height);
915
917
  line-height: var(--rlc-ballot-subtitle-height);
916
918
  overflow: var(--rlc-ballot-subtitle-overflow);
package/dist/esm/components/atoms/Badge/Badge.css CHANGED
@@ -2,13 +2,13 @@
2
2
  position: relative;
3
3
  display: inline-block;
4
4
  width: auto;
5
- padding: var(--rls-sizing-x2);
5
+ padding: var(--rlc-badge-padding);
6
6
  box-sizing: border-box;
7
7
  font-size: var(--rls-caption-font-size);
8
8
  letter-spacing: var(--rls-caption-letter-spacing);
9
9
  line-height: var(--rls-caption-line-height);
10
- color: var(--rls-theme-color-500);
11
- background: var(--rls-theme-color-100);
10
+ color: var(--rls-theme-color-100);
11
+ background: var(--rls-theme-color-500);
12
12
  border-radius: var(--rls-sizing-x2);
13
13
  }
14
14
  .rls-badge > span {
package/dist/esm/components/atoms/SkeletonText/SkeletonText.css CHANGED
@@ -11,7 +11,9 @@
11
11
  text-overflow: inherit;
12
12
  }
13
13
  .rls-skeleton-text__value {
14
- display: block;
14
+ display: flex;
15
+ column-gap: var(--rlc-skeleton-text-column-gap);
16
+ align-items: center;
15
17
  font-weight: inherit;
16
18
  font-size: inherit;
17
19
  line-height: inherit;
package/dist/esm/components/molecules/Ballot/Ballot.css CHANGED
@@ -6,7 +6,7 @@
6
6
  width: 100%;
7
7
  align-content: center;
8
8
  column-gap: var(--rls-sizing-x4);
9
- padding: var(--rls-sizing-x4);
9
+ padding: var(--rlc-ballot-padding);
10
10
  box-sizing: border-box;
11
11
  overflow: hidden;
12
12
  }
@@ -21,34 +21,34 @@
21
21
  display: flex;
22
22
  overflow: hidden;
23
23
  flex-direction: column;
24
- row-gap: var(--rls-sizing-x2);
24
+ row-gap: var(--rlc-ballot-component-row-gap);
25
25
  }
26
26
  .rls-ballot__title {
27
- --rlc-skeleton-text-height: var(--rls-label-line-height);
28
- --rlc-skeleton-text-letter-spacing: var(--rls-label-letter-spacing);
29
- --rlc-skeleton-text-font-size: var(--rls-label-font-size);
27
+ --rlc-skeleton-text-height: var(--rls-ballot-title-height);
28
+ --rlc-skeleton-text-letter-spacing: var(--rls-ballot-title-letter-spacing);
29
+ --rlc-skeleton-text-font-size: var(--rls-ballot-title-font-size);
30
30
  position: relative;
31
31
  width: 100%;
32
32
  color: var(--rls-app-color-500);
33
33
  overflow: hidden;
34
34
  white-space: nowrap;
35
35
  text-overflow: ellipsis;
36
- font-weight: var(--rls-font-weight-medium);
37
- font-size: var(--rls-label-font-size);
38
- letter-spacing: var(--rls-label-letter-spacing);
39
- min-height: var(--rls-label-line-height);
40
- line-height: var(--rls-label-line-height);
36
+ font-weight: var(--rlc-ballot-title-font-weight);
37
+ font-size: var(--rls-ballot-title-font-size);
38
+ letter-spacing: var(--rls-ballot-title-letter-spacing);
39
+ min-height: var(--rls-ballot-title-height);
40
+ line-height: var(--rls-ballot-title-height);
41
41
  }
42
42
  .rls-ballot__subtitle {
43
43
  --rlc-skeleton-text-height: var(--rlc-ballot-subtitle-height);
44
- --rlc-skeleton-text-letter-spacing: var(--rls-smalltext-letter-spacing);
45
- --rlc-skeleton-text-font-size: var(--rls-smalltext-font-size);
44
+ --rlc-skeleton-text-letter-spacing: var(--rls-ballot-subtitle-letter-spacing);
45
+ --rlc-skeleton-text-font-size: var(--rls-ballot-subtitle-font-size);
46
46
  position: relative;
47
47
  width: var(--rlc-ballot-subtitle-width);
48
48
  color: var(--rls-app-color-300);
49
- font-weight: var(--rls-font-weight-semibold);
50
- font-size: var(--rls-smalltext-font-size);
51
- letter-spacing: var(--rls-smalltext-letter-spacing);
49
+ font-weight: var(--rlc-ballot-subtitle-font-weight);
50
+ font-size: var(--rls-ballot-subtitle-font-size);
51
+ letter-spacing: var(--rls-ballot-subtitle-letter-spacing);
52
52
  min-height: var(--rlc-ballot-subtitle-height);
53
53
  line-height: var(--rlc-ballot-subtitle-height);
54
54
  overflow: var(--rlc-ballot-subtitle-overflow);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "18.15.3",
3
+ "version": "18.15.4",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",
@@ -53,7 +53,7 @@
53
53
  "@rollup/plugin-node-resolve": "^15.2.1",
54
54
  "@rollup/plugin-typescript": "^11.1.3",
55
55
  "@rolster/rollup": "^1.0.6",
56
- "@rolster/styles-foundations": "^2.3.7",
56
+ "@rolster/styles-foundations": "^2.3.8",
57
57
  "@rolster/types": "^1.0.9",
58
58
  "@types/node-sass": "^4.11.4",
59
59
  "@types/react": "^18.0.28",