nuxt-glorious 1.2.3-9 → 1.2.4

package/dist/runtime/assets/style/components/file.css

@@ -1,65 +1,134 @@
-.glorious-file-orange > div.xl.placeholder, .glorious-file-blue > div.xl.placeholder, .glorious-file-gray > div.xl.placeholder, .glorious-file-red > div.xl.placeholder, .glorious-file-primary > div.xl.placeholder {
+.glorious-file-orange {
+  @apply ring-orange-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
+}
+.glorious-file-orange > div.placeholder {
+  @apply bg-orange-500;
+  @apply text-white px-3 w-max;
+}
+.glorious-file-orange > div.placeholder.size-xl {
   @apply py-2.5;
 }
-.glorious-file-orange > div.lg.placeholder, .glorious-file-blue > div.lg.placeholder, .glorious-file-gray > div.lg.placeholder, .glorious-file-red > div.lg.placeholder, .glorious-file-primary > div.lg.placeholder {
+.glorious-file-orange > div.placeholder.size-lg {
   @apply py-2;
 }
-.glorious-file-orange > div.md.placeholder, .glorious-file-blue > div.md.placeholder, .glorious-file-gray > div.md.placeholder, .glorious-file-red > div.md.placeholder, .glorious-file-primary > div.md.placeholder {
+.glorious-file-orange > div.placeholder.size-md {
   @apply py-1.5;
 }
-.glorious-file-orange > div.sm.placeholder, .glorious-file-blue > div.sm.placeholder, .glorious-file-gray > div.sm.placeholder, .glorious-file-red > div.sm.placeholder, .glorious-file-primary > div.sm.placeholder {
+.glorious-file-orange > div.placeholder.size-sm {
   @apply py-1;
 }
-.glorious-file-orange > div.xsm.placeholder, .glorious-file-blue > div.xsm.placeholder, .glorious-file-gray > div.xsm.placeholder, .glorious-file-red > div.xsm.placeholder, .glorious-file-primary > div.xsm.placeholder {
+.glorious-file-orange > div.placeholder.size-xs {
   @apply py-0.5;
 }
+.glorious-file-orange > div:last-child {
+  @apply absolute left-3 hidden;
+}
 
-.glorious-file-primary {
-  @apply rounded-md ring-1 ring-green-500 overflow-hidden cursor-pointer relative;
+.glorious-file-blue {
+  @apply ring-blue-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
 }
-.glorious-file-primary > div.placeholder {
-  @apply bg-green-500 text-white px-3 w-max;
+.glorious-file-blue > div.placeholder {
+  @apply bg-blue-500;
+  @apply text-white px-3 w-max;
 }
-.glorious-file-primary > div:last-child {
-  @apply absolute left-3 hidden;
+.glorious-file-blue > div.placeholder.size-xl {
+  @apply py-2.5;
 }
-
-.glorious-file-red {
-  @apply rounded-md ring-1 ring-red-500 px-3 cursor-pointer relative;
+.glorious-file-blue > div.placeholder.size-lg {
+  @apply py-2;
 }
-.glorious-file-red > div.placeholder {
-  @apply bg-green-500 text-white px-3 w-max;
+.glorious-file-blue > div.placeholder.size-md {
+  @apply py-1.5;
 }
-.glorious-file-red > div:last-child {
-  @apply absolute left-3;
+.glorious-file-blue > div.placeholder.size-sm {
+  @apply py-1;
+}
+.glorious-file-blue > div.placeholder.size-xs {
+  @apply py-0.5;
+}
+.glorious-file-blue > div:last-child {
+  @apply absolute left-3 hidden;
 }
 
 .glorious-file-gray {
-  @apply rounded-md ring-1 ring-gray-500 px-3 cursor-pointer relative;
+  @apply ring-gray-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
 }
 .glorious-file-gray > div.placeholder {
-  @apply bg-green-500 text-white px-3 w-max;
+  @apply bg-gray-500;
+  @apply text-white px-3 w-max;
+}
+.glorious-file-gray > div.placeholder.size-xl {
+  @apply py-2.5;
+}
+.glorious-file-gray > div.placeholder.size-lg {
+  @apply py-2;
+}
+.glorious-file-gray > div.placeholder.size-md {
+  @apply py-1.5;
+}
+.glorious-file-gray > div.placeholder.size-sm {
+  @apply py-1;
+}
+.glorious-file-gray > div.placeholder.size-xs {
+  @apply py-0.5;
 }
 .glorious-file-gray > div:last-child {
-  @apply absolute left-3;
+  @apply absolute left-3 hidden;
 }
 
-.glorious-file-blue {
-  @apply rounded-md ring-1 ring-blue-500 px-3 cursor-pointer relative;
+.glorious-file-red {
+  @apply ring-red-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
 }
-.glorious-file-blue > div.placeholder {
-  @apply bg-green-500 text-white px-3 w-max;
+.glorious-file-red > div.placeholder {
+  @apply bg-red-500;
+  @apply text-white px-3 w-max;
 }
-.glorious-file-blue > div:last-child {
-  @apply absolute left-3;
+.glorious-file-red > div.placeholder.size-xl {
+  @apply py-2.5;
+}
+.glorious-file-red > div.placeholder.size-lg {
+  @apply py-2;
+}
+.glorious-file-red > div.placeholder.size-md {
+  @apply py-1.5;
+}
+.glorious-file-red > div.placeholder.size-sm {
+  @apply py-1;
+}
+.glorious-file-red > div.placeholder.size-xs {
+  @apply py-0.5;
+}
+.glorious-file-red > div:last-child {
+  @apply absolute left-3 hidden;
 }
 
-.glorious-file-orange {
-  @apply rounded-md ring-1 ring-orange-500 px-3 cursor-pointer relative;
+.glorious-file-green {
+  @apply ring-green-500;
+  @apply rounded-md ring-1 overflow-hidden cursor-pointer relative;
 }
-.glorious-file-orange > div.placeholder {
-  @apply bg-green-500 text-white px-3 w-max;
+.glorious-file-green > div.placeholder {
+  @apply bg-green-500;
+  @apply text-white px-3 w-max;
 }
-.glorious-file-orange > div:last-child {
-  @apply absolute left-3;
+.glorious-file-green > div.placeholder.size-xl {
+  @apply py-2.5;
+}
+.glorious-file-green > div.placeholder.size-lg {
+  @apply py-2;
+}
+.glorious-file-green > div.placeholder.size-md {
+  @apply py-1.5;
+}
+.glorious-file-green > div.placeholder.size-sm {
+  @apply py-1;
+}
+.glorious-file-green > div.placeholder.size-xs {
+  @apply py-0.5;
+}
+.glorious-file-green > div:last-child {
+  @apply absolute left-3 hidden;
 }

package/dist/runtime/assets/style/components/input.css

@@ -1,55 +1,135 @@
-.xl.glorious-input-orange, .xl.glorious-input-blue, .xl.glorious-input-gray, .xl.glorious-input-red, .xl.glorious-input-primary {
+.glorious-input-orange {
+  @apply ring-orange-500;
+  @apply rounded-md ring-1;
+}
+.glorious-input-orange.size-xl {
   @apply py-2.5;
 }
-.lg.glorious-input-orange, .lg.glorious-input-blue, .lg.glorious-input-gray, .lg.glorious-input-red, .lg.glorious-input-primary {
+.glorious-input-orange.size-lg {
   @apply py-2;
 }
-.md.glorious-input-orange, .md.glorious-input-blue, .md.glorious-input-gray, .md.glorious-input-red, .md.glorious-input-primary {
+.glorious-input-orange.size-md {
   @apply py-1.5;
 }
-.sm.glorious-input-orange, .sm.glorious-input-blue, .sm.glorious-input-gray, .sm.glorious-input-red, .sm.glorious-input-primary {
+.glorious-input-orange.size-sm {
   @apply py-1;
 }
-.xsm.glorious-input-orange, .xsm.glorious-input-blue, .xsm.glorious-input-gray, .xsm.glorious-input-red, .xsm.glorious-input-primary {
+.glorious-input-orange.size-xs {
   @apply py-0.5;
 }
-
-.glorious-input-orange:focus-visible, .glorious-input-blue:focus-visible, .glorious-input-gray:focus-visible, .glorious-input-red:focus-visible, .glorious-input-primary:focus-visible {
+.glorious-input-orange:focus-visible {
   @apply outline-none ring-2;
 }
+.glorious-input-orange:disabled {
+  @apply bg-orange-100;
+  @apply cursor-not-allowed;
+}
 
-.glorious-input-primary {
-  @apply rounded-md ring-1 ring-green-500;
+.glorious-input-blue {
+  @apply ring-blue-500;
+  @apply rounded-md ring-1;
+}
+.glorious-input-blue.size-xl {
+  @apply py-2.5;
 }
-.glorious-input-primary:disabled {
-  @apply bg-green-100 cursor-not-allowed;
+.glorious-input-blue.size-lg {
+  @apply py-2;
 }
-
-.glorious-input-red {
-  @apply rounded-md ring-1 ring-red-500;
+.glorious-input-blue.size-md {
+  @apply py-1.5;
 }
-.glorious-input-red:disabled {
+.glorious-input-blue.size-sm {
+  @apply py-1;
+}
+.glorious-input-blue.size-xs {
+  @apply py-0.5;
+}
+.glorious-input-blue:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-input-blue:disabled {
+  @apply bg-blue-100;
   @apply cursor-not-allowed;
 }
 
 .glorious-input-gray {
-  @apply rounded-md ring-1 ring-gray-500;
+  @apply ring-gray-500;
+  @apply rounded-md ring-1;
+}
+.glorious-input-gray.size-xl {
+  @apply py-2.5;
+}
+.glorious-input-gray.size-lg {
+  @apply py-2;
+}
+.glorious-input-gray.size-md {
+  @apply py-1.5;
+}
+.glorious-input-gray.size-sm {
+  @apply py-1;
+}
+.glorious-input-gray.size-xs {
+  @apply py-0.5;
+}
+.glorious-input-gray:focus-visible {
+  @apply outline-none ring-2;
 }
 .glorious-input-gray:disabled {
+  @apply bg-gray-100;
   @apply cursor-not-allowed;
 }
 
-.glorious-input-blue {
-  @apply rounded-md ring-1 ring-blue-500;
+.glorious-input-red {
+  @apply ring-red-500;
+  @apply rounded-md ring-1;
 }
-.glorious-input-blue:disabled {
+.glorious-input-red.size-xl {
+  @apply py-2.5;
+}
+.glorious-input-red.size-lg {
+  @apply py-2;
+}
+.glorious-input-red.size-md {
+  @apply py-1.5;
+}
+.glorious-input-red.size-sm {
+  @apply py-1;
+}
+.glorious-input-red.size-xs {
+  @apply py-0.5;
+}
+.glorious-input-red:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-input-red:disabled {
+  @apply bg-red-100;
   @apply cursor-not-allowed;
 }
 
-.glorious-input-orange {
-  @apply rounded-md ring-1 ring-orange-500;
+.glorious-input-green {
+  @apply ring-green-500;
+  @apply rounded-md ring-1;
 }
-.glorious-input-orange:disabled {
+.glorious-input-green.size-xl {
+  @apply py-2.5;
+}
+.glorious-input-green.size-lg {
+  @apply py-2;
+}
+.glorious-input-green.size-md {
+  @apply py-1.5;
+}
+.glorious-input-green.size-sm {
+  @apply py-1;
+}
+.glorious-input-green.size-xs {
+  @apply py-0.5;
+}
+.glorious-input-green:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-input-green:disabled {
+  @apply bg-green-100;
   @apply cursor-not-allowed;
 }
 
@@ -60,7 +140,7 @@
   @apply w-full;
 }
 .glorious-input > input::placeholder {
-  @apply text-[14px];
+  @apply text-sm;
 }
 .glorious-input.icon-xl > input {
   @apply rtl:pr-9 ltr:pl-9;

package/dist/runtime/assets/style/components/loading.css

@@ -0,0 +1,43 @@
+.glorious-loading {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  animation: l20-1 0.8s infinite linear alternate, l20-2 1.6s infinite linear;
+}
+
+@keyframes l20-1 {
+  0% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
+  }
+  12.5% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 0%, 100% 0%, 100% 0%);
+  }
+  25% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 100% 100%, 100% 100%);
+  }
+  50% {
+    clip-path: polygon(50% 50%, 0 0, 50% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  62.5% {
+    clip-path: polygon(50% 50%, 100% 0, 100% 0%, 100% 0%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  75% {
+    clip-path: polygon(50% 50%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 50% 100%, 0% 100%);
+  }
+  100% {
+    clip-path: polygon(50% 50%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%);
+  }
+}
+@keyframes l20-2 {
+  0% {
+    transform: scaleY(1) rotate(0deg);
+  }
+  49.99% {
+    transform: scaleY(1) rotate(135deg);
+  }
+  50% {
+    transform: scaleY(-1) rotate(0deg);
+  }
+  100% {
+    transform: scaleY(-1) rotate(-135deg);
+  }
+}

package/dist/runtime/assets/style/components/radio.css

@@ -39,83 +39,83 @@
   @apply bg-green-500;
 }
 .glorious-radio.size-5xl {
-  @apply w-[46px] h-[46px];
+  @apply w-[40px] h-[40px];
 }
 .glorious-radio.size-5xl > div:last-child {
-  @apply w-[46px] h-[46px];
+  @apply w-[40px] h-[40px];
 }
 .glorious-radio.size-5xl > input:checked ~ div:after {
-  @apply w-[36px] h-[36px];
+  @apply w-[30px] h-[30px];
 }
 .glorious-radio.size-4xl {
-  @apply w-[42px] h-[42px];
+  @apply w-[36px] h-[36px];
 }
 .glorious-radio.size-4xl > div:last-child {
-  @apply w-[42px] h-[42px];
+  @apply w-[36px] h-[36px];
 }
 .glorious-radio.size-4xl > input:checked ~ div:after {
-  @apply w-[32px] h-[32px];
+  @apply w-[26px] h-[26px];
 }
 .glorious-radio.size-3xl {
-  @apply w-[38px] h-[38px];
+  @apply w-[32px] h-[32px];
 }
 .glorious-radio.size-3xl > div:last-child {
-  @apply w-[38px] h-[38px];
+  @apply w-[32px] h-[32px];
 }
 .glorious-radio.size-3xl > input:checked ~ div:after {
-  @apply w-[28px] h-[28px];
+  @apply w-[22px] h-[22px];
 }
 .glorious-radio.size-2xl {
-  @apply w-[34px] h-[34px];
+  @apply w-[28px] h-[28px];
 }
 .glorious-radio.size-2xl > div:last-child {
-  @apply w-[34px] h-[34px];
+  @apply w-[28px] h-[28px];
 }
 .glorious-radio.size-2xl > input:checked ~ div:after {
-  @apply w-[24px] h-[24px];
+  @apply w-[18px] h-[18px];
 }
 .glorious-radio.size-xl {
-  @apply w-[30px] h-[30px];
+  @apply w-[24px] h-[24px];
 }
 .glorious-radio.size-xl > div:last-child {
-  @apply w-[30px] h-[30px];
+  @apply w-[24px] h-[24px];
 }
 .glorious-radio.size-xl > input:checked ~ div:after {
-  @apply w-[20px] h-[20px];
+  @apply w-[14px] h-[14px];
 }
 .glorious-radio.size-lg {
-  @apply w-[26px] h-[26px];
+  @apply w-[18px] h-[18px];
 }
 .glorious-radio.size-lg > div:last-child {
-  @apply w-[26px] h-[26px];
+  @apply w-[18px] h-[18px];
 }
 .glorious-radio.size-lg > input:checked ~ div:after {
-  @apply w-[16px] h-[16px];
+  @apply w-[8px] h-[8px];
 }
 .glorious-radio.size-md {
-  @apply w-[22px] h-[22px];
+  @apply w-[14px] h-[14px];
 }
 .glorious-radio.size-md > div:last-child {
-  @apply w-[22px] h-[22px];
+  @apply w-[14px] h-[14px];
 }
 .glorious-radio.size-md > input:checked ~ div:after {
-  @apply w-[12px] h-[12px];
+  @apply w-[4px] h-[4px];
 }
 .glorious-radio.size-sm {
-  @apply w-[18px] h-[18px];
+  @apply w-[10px] h-[10px];
 }
 .glorious-radio.size-sm > div:last-child {
-  @apply w-[18px] h-[18px];
+  @apply w-[10px] h-[10px];
 }
 .glorious-radio.size-sm > input:checked ~ div:after {
-  @apply w-[8px] h-[8px];
+  @apply w-[0px] h-[0px];
 }
 .glorious-radio.size-xs {
-  @apply w-[14px] h-[14px];
+  @apply w-[6px] h-[6px];
 }
 .glorious-radio.size-xs > div:last-child {
-  @apply w-[14px] h-[14px];
+  @apply w-[6px] h-[6px];
 }
 .glorious-radio.size-xs > input:checked ~ div:after {
-  @apply w-[4px] h-[4px];
+  @apply w-[-4px] h-[-4px];
 }

package/dist/runtime/assets/style/components/select.css

@@ -1,54 +1,59 @@
-.xl.glorious-select-orange, .xl.glorious-select-blue, .xl.glorious-select-gray, .xl.glorious-select-red, .xl.glorious-select-primary {
+.xl.glorious-select-green, .xl.glorious-select-red, .xl.glorious-select-gray, .xl.glorious-select-blue, .xl.glorious-select-orange {
   @apply py-[0.657rem];
 }
-.lg.glorious-select-orange, .lg.glorious-select-blue, .lg.glorious-select-gray, .lg.glorious-select-red, .lg.glorious-select-primary {
+.lg.glorious-select-green, .lg.glorious-select-red, .lg.glorious-select-gray, .lg.glorious-select-blue, .lg.glorious-select-orange {
   @apply py-[0.532rem];
 }
-.md.glorious-select-orange, .md.glorious-select-blue, .md.glorious-select-gray, .md.glorious-select-red, .md.glorious-select-primary {
+.md.glorious-select-green, .md.glorious-select-red, .md.glorious-select-gray, .md.glorious-select-blue, .md.glorious-select-orange {
   @apply py-[0.407rem];
 }
-.sm.glorious-select-orange, .sm.glorious-select-blue, .sm.glorious-select-gray, .sm.glorious-select-red, .sm.glorious-select-primary {
+.sm.glorious-select-green, .sm.glorious-select-red, .sm.glorious-select-gray, .sm.glorious-select-blue, .sm.glorious-select-orange {
   @apply py-[0.282rem];
 }
-.xsm.glorious-select-orange, .xsm.glorious-select-blue, .xsm.glorious-select-gray, .xsm.glorious-select-red, .xsm.glorious-select-primary {
+.xsm.glorious-select-green, .xsm.glorious-select-red, .xsm.glorious-select-gray, .xsm.glorious-select-blue, .xsm.glorious-select-orange {
   @apply py-[0.157rem];
 }
 
-.glorious-select-orange:focus-visible, .glorious-select-blue:focus-visible, .glorious-select-gray:focus-visible, .glorious-select-red:focus-visible, .glorious-select-primary:focus-visible {
+.glorious-select-green:focus-visible, .glorious-select-red:focus-visible, .glorious-select-gray:focus-visible, .glorious-select-blue:focus-visible, .glorious-select-orange:focus-visible {
   @apply outline-none ring-2;
 }
 
-.glorious-select-primary {
-  @apply rounded-md ring-1 ring-green-500 px-3 text-gray-500 text-[14px];
+.glorious-select-orange {
+  @apply ring-orange-500;
+  @apply rounded-md ring-1 px-3 text-gray-500 text-[14px];
 }
-.glorious-select-primary:disabled {
+.glorious-select-orange:disabled {
   @apply cursor-not-allowed;
 }
 
-.glorious-select-red {
-  @apply rounded-md ring-1 ring-red-500 px-3;
+.glorious-select-blue {
+  @apply ring-blue-500;
+  @apply rounded-md ring-1 px-3 text-gray-500 text-[14px];
 }
-.glorious-select-red:disabled {
+.glorious-select-blue:disabled {
   @apply cursor-not-allowed;
 }
 
 .glorious-select-gray {
-  @apply rounded-md ring-1 ring-gray-500 px-3;
+  @apply ring-gray-500;
+  @apply rounded-md ring-1 px-3 text-gray-500 text-[14px];
 }
 .glorious-select-gray:disabled {
   @apply cursor-not-allowed;
 }
 
-.glorious-select-blue {
-  @apply rounded-md ring-1 ring-blue-500 px-3;
+.glorious-select-red {
+  @apply ring-red-500;
+  @apply rounded-md ring-1 px-3 text-gray-500 text-[14px];
 }
-.glorious-select-blue:disabled {
+.glorious-select-red:disabled {
   @apply cursor-not-allowed;
 }
 
-.glorious-select-orange {
-  @apply rounded-md ring-1 ring-orange-500 px-3;
+.glorious-select-green {
+  @apply ring-green-500;
+  @apply rounded-md ring-1 px-3 text-gray-500 text-[14px];
 }
-.glorious-select-orange:disabled {
+.glorious-select-green:disabled {
   @apply cursor-not-allowed;
 }

package/dist/runtime/assets/style/components/textarea.css

@@ -1,56 +1,56 @@
-.xl.glorious-textarea-orange, .xl.glorious-textarea-blue, .xl.glorious-textarea-gray, .xl.glorious-textarea-red, .xl.glorious-textarea-primary {
-  @apply py-2.5;
-}
-.lg.glorious-textarea-orange, .lg.glorious-textarea-blue, .lg.glorious-textarea-gray, .lg.glorious-textarea-red, .lg.glorious-textarea-primary {
-  @apply py-2;
-}
-.md.glorious-textarea-orange, .md.glorious-textarea-blue, .md.glorious-textarea-gray, .md.glorious-textarea-red, .md.glorious-textarea-primary {
-  @apply py-1.5;
-}
-.sm.glorious-textarea-orange, .sm.glorious-textarea-blue, .sm.glorious-textarea-gray, .sm.glorious-textarea-red, .sm.glorious-textarea-primary {
-  @apply py-1;
-}
-.xsm.glorious-textarea-orange, .xsm.glorious-textarea-blue, .xsm.glorious-textarea-gray, .xsm.glorious-textarea-red, .xsm.glorious-textarea-primary {
-  @apply py-0.5;
+.glorious-textarea-orange {
+  @apply ring-orange-500;
+  @apply rounded-md ring-1 px-3;
 }
-
-.glorious-textarea-orange:focus-visible, .glorious-textarea-blue:focus-visible, .glorious-textarea-gray:focus-visible, .glorious-textarea-red:focus-visible, .glorious-textarea-primary:focus-visible {
+.glorious-textarea-orange:focus-visible {
   @apply outline-none ring-2;
 }
-
-.glorious-textarea-primary {
-  @apply rounded-md ring-1 ring-green-500 px-3;
-}
-.glorious-textarea-primary:disabled {
+.glorious-textarea-orange:disabled {
   @apply bg-green-300 cursor-not-allowed;
 }
 
-.glorious-textarea-red {
-  @apply rounded-md ring-1 ring-red-500 px-3;
+.glorious-textarea-blue {
+  @apply ring-blue-500;
+  @apply rounded-md ring-1 px-3;
 }
-.glorious-textarea-red:disabled {
-  @apply cursor-not-allowed;
+.glorious-textarea-blue:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-textarea-blue:disabled {
+  @apply bg-green-300 cursor-not-allowed;
 }
 
 .glorious-textarea-gray {
-  @apply rounded-md ring-1 ring-gray-500 px-3;
+  @apply ring-gray-500;
+  @apply rounded-md ring-1 px-3;
+}
+.glorious-textarea-gray:focus-visible {
+  @apply outline-none ring-2;
 }
 .glorious-textarea-gray:disabled {
-  @apply cursor-not-allowed;
+  @apply bg-green-300 cursor-not-allowed;
 }
 
-.glorious-textarea-blue {
-  @apply rounded-md ring-1 ring-blue-500 px-3;
+.glorious-textarea-red {
+  @apply ring-red-500;
+  @apply rounded-md ring-1 px-3;
 }
-.glorious-textarea-blue:disabled {
-  @apply cursor-not-allowed;
+.glorious-textarea-red:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-textarea-red:disabled {
+  @apply bg-green-300 cursor-not-allowed;
 }
 
-.glorious-textarea-orange {
-  @apply rounded-md ring-1 ring-orange-500 px-3;
+.glorious-textarea-green {
+  @apply ring-green-500;
+  @apply rounded-md ring-1 px-3;
 }
-.glorious-textarea-orange:disabled {
-  @apply cursor-not-allowed;
+.glorious-textarea-green:focus-visible {
+  @apply outline-none ring-2;
+}
+.glorious-textarea-green:disabled {
+  @apply bg-green-300 cursor-not-allowed;
 }
 
 .glorious-textarea {