@julseb-lib/react 0.0.75 → 0.0.77

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 (10) hide show
  1. package/dist/index.cjs.js +570 -547
  2. package/dist/index.css +60 -60
  3. package/dist/index.es.js +3855 -3309
  4. package/dist/index.umd.js +518 -495
  5. package/dist/lib/components/ProgressBar/styles.tsx +23 -0
  6. package/dist/lib/index.css +60 -60
  7. package/dist/lib/lib-utils/generate-lib-tokens.ts +40 -0
  8. package/dist/lib/utils/lib-tokens.json +216 -216
  9. package/dist/lib/utils/set-default-theme.ts +1 -1
  10. package/package.json +1 -1
package/dist/lib/components/ProgressBar/styles.tsx CHANGED
@@ -25,8 +25,30 @@ const StyledProgressBar = styled.meter<{
25
25
  display: block;
26
26
  overflow: hidden;
27
27
  border: none;
28
+ background: none;
28
29
  appearance: none;
29
30
  flex-grow: 1;
31
+ -webkit-appearance: none;
32
+
33
+ &::-moz-meter-bar {
34
+ -moz-appearance: none;
35
+ }
36
+
37
+ &:-moz-meter-optimum::-moz-meter-bar,
38
+ &:-moz-meter-sub-optimum::-moz-meter-bar,
39
+ &:-moz-meter-sub-sub-optimum::-moz-meter-bar {
40
+ background: none;
41
+ }
42
+
43
+ &::-webkit-meter-bar,
44
+ &::-webkit-meter-optimum-value,
45
+ &::-webkit-meter-suboptimum-value,
46
+ &::-webkit-meter-even-less-good-value,
47
+ &::-webkit-meter-inner-element {
48
+ background: none;
49
+ background-color: ${({ theme }) => theme.GRAY_200};
50
+ z-index: 0;
51
+ }
30
52
 
31
53
  &:before {
32
54
  content: "";
@@ -39,6 +61,7 @@ const StyledProgressBar = styled.meter<{
39
61
  background-color: ${({ theme, $color }) =>
40
62
  Mixins.AllColors($color, theme)};
41
63
  border-radius: ${RADIUSES.ROUND};
64
+ z-index: 1;
42
65
  }
43
66
 
44
67
  &.RadiusCircle:before {
package/dist/lib/index.css CHANGED
@@ -93,66 +93,66 @@
93
93
  --color-light-background-ghost-hover: var(--color-light-gray-200);
94
94
  --color-light-background-ghost-active: var(--color-light-gray-100);
95
95
 
96
- --color-dark-gray-50: rgba(24, 24, 24, 1);
97
- --color-dark-gray-100: rgba(47, 47, 47, 1);
98
- --color-dark-gray-200: rgba(71, 71, 71, 1);
99
- --color-dark-gray-300: rgba(94, 94, 94, 1);
100
- --color-dark-gray-400: rgba(118, 118, 118, 1);
101
- --color-dark-gray-500: rgba(145, 145, 145, 1);
102
- --color-dark-gray-600: rgba(173, 173, 173, 1);
103
- --color-dark-gray-700: rgba(200, 200, 200, 1);
104
- --color-dark-gray-800: rgba(228, 228, 228, 1);
105
- --color-dark-gray-900: rgba(248, 248, 248, 1);
106
- --color-dark-primary-50: rgb(20, 30, 51);
107
- --color-dark-primary-100: rgb(41, 61, 102);
108
- --color-dark-primary-200: rgb(61, 91, 153);
109
- --color-dark-primary-300: rgb(82, 122, 204);
110
- --color-dark-primary-400: rgb(102, 152, 255);
111
- --color-dark-primary-500: rgb(133, 173, 255);
112
- --color-dark-primary-600: rgb(163, 193, 255);
113
- --color-dark-primary-700: rgb(194, 214, 255);
114
- --color-dark-primary-800: rgb(224, 234, 255);
115
- --color-dark-primary-900: rgb(247, 250, 255);
116
- --color-dark-secondary-50: rgb(23, 45, 46);
117
- --color-dark-secondary-100: rgb(46, 89, 92);
118
- --color-dark-secondary-200: rgb(68, 134, 139);
119
- --color-dark-secondary-300: rgb(91, 178, 185);
120
- --color-dark-secondary-400: rgb(114, 223, 231);
121
- --color-dark-secondary-500: rgb(142, 229, 236);
122
- --color-dark-secondary-600: rgb(170, 236, 241);
123
- --color-dark-secondary-700: rgb(199, 242, 245);
124
- --color-dark-secondary-800: rgb(227, 249, 250);
125
- --color-dark-secondary-900: rgb(248, 254, 254);
126
- --color-dark-success-50: rgb(17, 47, 32);
127
- --color-dark-success-100: rgb(35, 94, 64);
128
- --color-dark-success-200: rgb(52, 141, 97);
129
- --color-dark-success-300: rgb(70, 188, 129);
130
- --color-dark-success-400: rgb(87, 235, 161);
131
- --color-dark-success-500: rgb(121, 239, 180);
132
- --color-dark-success-600: rgb(154, 243, 199);
133
- --color-dark-success-700: rgb(188, 247, 217);
134
- --color-dark-success-800: rgb(221, 251, 236);
135
- --color-dark-success-900: rgb(247, 254, 250);
136
- --color-dark-danger-50: rgb(51, 26, 26);
137
- --color-dark-danger-100: rgb(102, 51, 51);
138
- --color-dark-danger-200: rgb(153, 77, 77);
139
- --color-dark-danger-300: rgb(204, 102, 102);
140
- --color-dark-danger-400: rgb(255, 128, 128);
141
- --color-dark-danger-500: rgb(255, 153, 153);
142
- --color-dark-danger-600: rgb(255, 179, 179);
143
- --color-dark-danger-700: rgb(255, 204, 204);
144
- --color-dark-danger-800: rgb(255, 230, 230);
145
- --color-dark-danger-900: rgb(255, 249, 249);
146
- --color-dark-warning-50: rgb(51, 41, 23);
147
- --color-dark-warning-100: rgb(101, 82, 46);
148
- --color-dark-warning-200: rgb(152, 122, 70);
149
- --color-dark-warning-300: rgb(202, 163, 93);
150
- --color-dark-warning-400: rgb(253, 204, 116);
151
- --color-dark-warning-500: rgb(254, 214, 144);
152
- --color-dark-warning-600: rgb(254, 224, 172);
153
- --color-dark-warning-700: rgb(254, 235, 199);
154
- --color-dark-warning-800: rgb(255, 245, 227);
155
- --color-dark-warning-900: rgb(255, 253, 248);
96
+ --color-dark-primary-50: rgb(0, 0, 0);
97
+ --color-dark-primary-100: rgb(4, 5, 6);
98
+ --color-dark-primary-200: rgb(13, 14, 18);
99
+ --color-dark-primary-300: rgb(21, 24, 30);
100
+ --color-dark-primary-400: rgb(29, 34, 42);
101
+ --color-dark-primary-500: rgb(38, 44, 54);
102
+ --color-dark-primary-600: rgb(46, 54, 66);
103
+ --color-dark-primary-700: rgb(54, 64, 78);
104
+ --color-dark-primary-800: rgb(63, 74, 90);
105
+ --color-dark-primary-900: rgb(71, 84, 102);
106
+ --color-dark-secondary-50: rgb(16, 17, 19);
107
+ --color-dark-secondary-100: rgb(21, 22, 25);
108
+ --color-dark-secondary-200: rgb(30, 32, 37);
109
+ --color-dark-secondary-300: rgb(39, 42, 48);
110
+ --color-dark-secondary-400: rgb(48, 52, 59);
111
+ --color-dark-secondary-500: rgb(57, 62, 70);
112
+ --color-dark-secondary-600: rgb(66, 72, 82);
113
+ --color-dark-secondary-700: rgb(75, 82, 93);
114
+ --color-dark-secondary-800: rgb(84, 92, 104);
115
+ --color-dark-secondary-900: rgb(93, 102, 116);
116
+ --color-dark-success-50: rgb(1, 45, 34);
117
+ --color-dark-success-100: rgb(2, 69, 52);
118
+ --color-dark-success-200: rgb(3, 94, 70);
119
+ --color-dark-success-300: rgb(4, 118, 88);
120
+ --color-dark-success-400: rgb(5, 143, 107);
121
+ --color-dark-success-500: rgb(6, 167, 125);
122
+ --color-dark-success-600: rgb(7, 192, 144);
123
+ --color-dark-success-700: rgb(8, 217, 162);
124
+ --color-dark-success-800: rgb(9, 241, 181);
125
+ --color-dark-success-900: rgb(29, 247, 190);
126
+ --color-dark-danger-50: rgb(95, 33, 33);
127
+ --color-dark-danger-100: rgb(114, 39, 39);
128
+ --color-dark-danger-200: rgb(133, 46, 45);
129
+ --color-dark-danger-300: rgb(152, 53, 52);
130
+ --color-dark-danger-400: rgb(171, 59, 58);
131
+ --color-dark-danger-500: rgb(191, 67, 66);
132
+ --color-dark-danger-600: rgb(197, 84, 84);
133
+ --color-dark-danger-700: rgb(203, 103, 103);
134
+ --color-dark-danger-800: rgb(209, 122, 122);
135
+ --color-dark-danger-900: rgb(216, 141, 141);
136
+ --color-dark-warning-50: rgb(64, 47, 2);
137
+ --color-dark-warning-100: rgb(114, 84, 4);
138
+ --color-dark-warning-200: rgb(163, 120, 5);
139
+ --color-dark-warning-300: rgb(212, 156, 7);
140
+ --color-dark-warning-400: rgb(247, 186, 23);
141
+ --color-dark-warning-500: rgb(249, 200, 70);
142
+ --color-dark-warning-600: rgb(250, 208, 97);
143
+ --color-dark-warning-700: rgb(251, 215, 122);
144
+ --color-dark-warning-800: rgb(252, 222, 146);
145
+ --color-dark-warning-900: rgb(253, 229, 171);
146
+ --color-dark-gray-50: rgb(24, 24, 24);
147
+ --color-dark-gray-100: rgb(47, 47, 47);
148
+ --color-dark-gray-200: rgb(71, 71, 71);
149
+ --color-dark-gray-300: rgb(94, 94, 94);
150
+ --color-dark-gray-400: rgb(118, 118, 118);
151
+ --color-dark-gray-500: rgb(145, 145, 145);
152
+ --color-dark-gray-600: rgb(173, 173, 173);
153
+ --color-dark-gray-700: rgb(200, 200, 200);
154
+ --color-dark-gray-800: rgb(228, 228, 228);
155
+ --color-dark-gray-900: rgb(248, 248, 248);
156
156
  --color-dark-background: rgb(18, 18, 18);
157
157
  --color-dark-font: var(--color-white);
158
158
 
package/dist/lib/lib-utils/generate-lib-tokens.ts ADDED
@@ -0,0 +1,40 @@
1
+ /*=============================================== Generate Lib tokens ===============================================*/
2
+
3
+ import { rgbToHex, toConstantCase } from "@julseb-lib/utils"
4
+
5
+ interface Token {
6
+ [name: string]: {
7
+ rgb: string
8
+ hex: string
9
+ css: string
10
+ variable: string
11
+ }
12
+ }
13
+
14
+ export const generateColorTokens = (tokens: Array<string>): Array<Token> => {
15
+ return tokens.map(token => {
16
+ const tokenName = token
17
+ .split(":")[0]
18
+ .replaceAll("--color-", "")
19
+ .replaceAll("light-", "")
20
+ .replaceAll("dark-", "")
21
+ const colorValue = token.split(":")[1]
22
+ const rgb = colorValue
23
+ .replaceAll("rgb(", "")
24
+ .replaceAll(")", "")
25
+ .split(",")
26
+
27
+ return {
28
+ [tokenName]: {
29
+ rgb: `"${colorValue}"`,
30
+ hex: `"${rgbToHex(
31
+ Number(rgb[0]),
32
+ Number(rgb[1]),
33
+ Number(rgb[2])
34
+ )}"`,
35
+ css: `"${token.split(":")[0]}"`,
36
+ variable: `"COLORS_DARK.${toConstantCase(tokenName)}"`,
37
+ },
38
+ }
39
+ })
40
+ }