@starasia/textarea 1.0.3 → 1.0.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 (3) hide show
  1. package/dist/textarea.es.js +17 -12
  2. package/dist/textarea.umd.js +17 -12
  3. package/package.json +1 -1
package/dist/textarea.es.js CHANGED
@@ -16,8 +16,8 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
16
16
  --starasia-ui-h-12: 3rem; /* 48px */
17
17
 
18
18
  /* color */
19
- --starasia-ui-color-gray-200: #c9cecc;
20
- --starasia-ui-color-gray-300: #d1d5db;
19
+ --starasia-ui-color-gray-200: rgba(201, 206, 204, 1);
20
+ --starasia-ui-color-gray-300: rgba(209, 213, 219, 1);
21
21
 
22
22
  /* border radius */
23
23
  --starasia-ui-radii-base: 0.25rem; /* 4px */
@@ -45,9 +45,9 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
45
45
  );
46
46
 
47
47
  /* brand */
48
- --starasia-ui-textarea-color-primary-blue: var(--starasia-ui-brand-primary-default);
49
- --starasia-ui-textarea-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
50
- --starasia-ui-textarea-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
48
+ --starasia-ui-textarea-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
49
+ --starasia-ui-textarea-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
50
+ --starasia-ui-textarea-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
51
51
 
52
52
  /* border radius */
53
53
  --starasia-ui-textarea-border-radius-base: var(--starasia-ui-radii-md, 8px);
@@ -55,8 +55,13 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
55
55
 
56
56
  --starasia-ui-textarea-placholder-color: var(
57
57
  --starasia-ui-color-gray-200,
58
- #c9cecc
58
+ rgba(201, 206, 204, 1)
59
59
  );
60
+ --starasia-ui-textarea-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
61
+ --starasia-ui-textarea-color-border: rgba(120, 134, 127, 0.2);
62
+ --starasia-ui-textarea-color-disabled-bg: rgba(120, 134, 127, 0.1);
63
+ --starasia-ui-textarea-color-warning: rgba(234, 179, 8, 1);
64
+ --starasia-ui-textarea-color-error: rgba(239, 68, 68, 1);
60
65
  --starasia-ui-textarea-placholder-fontWeight: var(
61
66
  --starasia-ui-fontWeights-normal,
62
67
  300
@@ -67,7 +72,7 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
67
72
  padding: var(--starasia-ui-textarea-spacing-sm);
68
73
  box-sizing: border-box;
69
74
  /* background: transparent; */
70
- background: white;
75
+ background: var(--starasia-ui-textarea-color-white);
71
76
  }
72
77
  .starasia-textarea::placeholder {
73
78
  color: var(--starasia-ui-textarea-placholder-color);
@@ -113,7 +118,7 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
113
118
  padding-inline: var(--starasia-ui-textarea-spacing-md);
114
119
  font-size: var(--starasia-ui-fontSizes-md, 14px);
115
120
  border: var(--starasia-ui-textarea-border-width) solid
116
- rgba(120, 134, 127, 0.2);
121
+ var(--starasia-ui-textarea-color-border);
117
122
  border-radius: var(--starasia-ui-textarea-border-radius-lg);
118
123
  }
119
124
  .starasia-textarea-lg {
@@ -134,19 +139,19 @@ const x = `@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@30
134
139
  }
135
140
 
136
141
  .starasia-textarea:disabled {
137
- border-color: rgba(120, 134, 127, 0.2);
138
- background-color: rgba(120, 134, 127, 0.1);
142
+ border-color: var(--starasia-ui-textarea-color-border);
143
+ background-color: var(--starasia-ui-textarea-color-disabled-bg);
139
144
  /* background-color: var(--starasia-ui-textarea-color-tertiary-gray); */
140
145
  /* border-color: var(--starasia-ui-textarea-color-tertiary-gray); */
141
146
  cursor: not-allowed;
142
147
  }
143
148
 
144
149
  .starasia-textarea-warning {
145
- border-color: #eab308 !important;
150
+ border-color: var(--starasia-ui-textarea-color-warning) !important;
146
151
  /* outline-color: #eab308 !important; */
147
152
  }
148
153
  .starasia-textarea-error {
149
- border-color: #ef4444 !important;
154
+ border-color: var(--starasia-ui-textarea-color-error) !important;
150
155
  /* outline-color: #eab308 !important; */
151
156
  }
152
157
  `, e = "starasia-textarea-styles", l = (r) => {
package/dist/textarea.umd.js CHANGED
@@ -15,8 +15,8 @@
15
15
  --starasia-ui-h-12: 3rem; /* 48px */
16
16
 
17
17
  /* color */
18
- --starasia-ui-color-gray-200: #c9cecc;
19
- --starasia-ui-color-gray-300: #d1d5db;
18
+ --starasia-ui-color-gray-200: rgba(201, 206, 204, 1);
19
+ --starasia-ui-color-gray-300: rgba(209, 213, 219, 1);
20
20
 
21
21
  /* border radius */
22
22
  --starasia-ui-radii-base: 0.25rem; /* 4px */
@@ -44,9 +44,9 @@
44
44
  );
45
45
 
46
46
  /* brand */
47
- --starasia-ui-textarea-color-primary-blue: var(--starasia-ui-brand-primary-default);
48
- --starasia-ui-textarea-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary);
49
- --starasia-ui-textarea-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary);
47
+ --starasia-ui-textarea-color-primary-blue: var(--starasia-ui-brand-primary-default, rgba(74, 106, 148, 1));
48
+ --starasia-ui-textarea-color-tertiary-blue: var(--starasia-ui-brand-primary-secondary, rgba(144, 176, 218, 1));
49
+ --starasia-ui-textarea-color-quaternary-blue: var(--starasia-ui-brand-primary-tertiary, rgba(227, 237, 248, 1));
50
50
 
51
51
  /* border radius */
52
52
  --starasia-ui-textarea-border-radius-base: var(--starasia-ui-radii-md, 8px);
@@ -54,8 +54,13 @@
54
54
 
55
55
  --starasia-ui-textarea-placholder-color: var(
56
56
  --starasia-ui-color-gray-200,
57
- #c9cecc
57
+ rgba(201, 206, 204, 1)
58
58
  );
59
+ --starasia-ui-textarea-color-white: var(--starasia-ui-color-gray-50, rgba(255, 254, 255, 1));
60
+ --starasia-ui-textarea-color-border: rgba(120, 134, 127, 0.2);
61
+ --starasia-ui-textarea-color-disabled-bg: rgba(120, 134, 127, 0.1);
62
+ --starasia-ui-textarea-color-warning: rgba(234, 179, 8, 1);
63
+ --starasia-ui-textarea-color-error: rgba(239, 68, 68, 1);
59
64
  --starasia-ui-textarea-placholder-fontWeight: var(
60
65
  --starasia-ui-fontWeights-normal,
61
66
  300
@@ -66,7 +71,7 @@
66
71
  padding: var(--starasia-ui-textarea-spacing-sm);
67
72
  box-sizing: border-box;
68
73
  /* background: transparent; */
69
- background: white;
74
+ background: var(--starasia-ui-textarea-color-white);
70
75
  }
71
76
  .starasia-textarea::placeholder {
72
77
  color: var(--starasia-ui-textarea-placholder-color);
@@ -112,7 +117,7 @@
112
117
  padding-inline: var(--starasia-ui-textarea-spacing-md);
113
118
  font-size: var(--starasia-ui-fontSizes-md, 14px);
114
119
  border: var(--starasia-ui-textarea-border-width) solid
115
- rgba(120, 134, 127, 0.2);
120
+ var(--starasia-ui-textarea-color-border);
116
121
  border-radius: var(--starasia-ui-textarea-border-radius-lg);
117
122
  }
118
123
  .starasia-textarea-lg {
@@ -133,19 +138,19 @@
133
138
  }
134
139
 
135
140
  .starasia-textarea:disabled {
136
- border-color: rgba(120, 134, 127, 0.2);
137
- background-color: rgba(120, 134, 127, 0.1);
141
+ border-color: var(--starasia-ui-textarea-color-border);
142
+ background-color: var(--starasia-ui-textarea-color-disabled-bg);
138
143
  /* background-color: var(--starasia-ui-textarea-color-tertiary-gray); */
139
144
  /* border-color: var(--starasia-ui-textarea-color-tertiary-gray); */
140
145
  cursor: not-allowed;
141
146
  }
142
147
 
143
148
  .starasia-textarea-warning {
144
- border-color: #eab308 !important;
149
+ border-color: var(--starasia-ui-textarea-color-warning) !important;
145
150
  /* outline-color: #eab308 !important; */
146
151
  }
147
152
  .starasia-textarea-error {
148
- border-color: #ef4444 !important;
153
+ border-color: var(--starasia-ui-textarea-color-error) !important;
149
154
  /* outline-color: #eab308 !important; */
150
155
  }
151
156
  `,s="starasia-textarea-styles";(e=>{if(!document.getElementById(s)){const t=document.createElement("style");t.id=s,t.textContent=e,document.head.appendChild(t)}})(o);const d=e=>{const{height:t,width:u="fit-content",resize:x,size:l="md",status:n,fullWidth:c,...i}=e;return r.jsx("textarea",{className:`starasia-textarea starasia-textarea-resize-${x} starasia-textarea-${l} starasia-textarea-${n}`,...i,disabled:n==="disable"?!0:i.disabled,style:{height:t,width:c?"100%":u,...i.style}})};a.Textarea=d,Object.defineProperty(a,Symbol.toStringTag,{value:"Module"})});
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@starasia/textarea",
3
- "version": "1.0.3",
3
+ "version": "1.0.4",
4
4
  "description": "textarea component for starasia UI",
5
5
  "author": "Prawito Hudoro",
6
6
  "main": "dist/textarea.umd.js",