@prokodo/ui 0.1.13 → 0.1.15

package/dist/theme.css

@@ -160,7 +160,7 @@
   --color-secondary-700: #2393a2;
   --color-secondary-800: #236c77;
   --color-secondary-900: #1e484e;
-  --color-success: #2e7d32;
+  --color-success: #20E381;
   --color-warning: #f7b529;
   --color-error: #f0453a;
   --elevation-1: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
@@ -192,6 +192,10 @@
   --gradient-border-6: linear-gradient(90deg, var(--color-secondary-500) 4.63%, var(--color-primary-500) 100%);
   --gradient-border-7: linear-gradient(90deg, var(--color-primary-500), var(--color-secondary-500), var(--color-primary-500));
   --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
   --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
   --gradient-text-primary-secondary-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 50%, var(--color-primary-500) 100%);
   --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-400) 100%);
@@ -236,7 +240,7 @@
   --color-secondary-700: #AFF3FF;
   --color-secondary-800: #CCF7FF;
   --color-secondary-900: #E6FBFF;
-  --color-success: #2e7d32;
+  --color-success: #20E381;
   --color-warning: #f7b529;
   --color-error: #f0453a;
   --elevation-1: 0 4px 6px rgba(255, 255, 255, 0.1), 0 1px 3px rgba(255, 255, 255, 0.08);
@@ -266,6 +270,11 @@
   --gradient-border-4: linear-gradient(112.34deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
   --gradient-border-5: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-secondary-500) 100%);
   --gradient-border-7: linear-gradient(180deg, var(--color-grey-400) 0%, var(--color-grey-600) 100%);
+  --gradient-border-8: linear-gradient(90deg, var(--color-grey-100) 4.63%, var(--color-grey-300) 100%);
+  --gradient-border-info: linear-gradient(112deg, var(--color-grey-100) 0%, var(--color-grey-300) 100%);
+  --gradient-border-success: linear-gradient(112deg, #20E381 0%, #10CCB8 100%);
+  --gradient-border-warning: linear-gradient(112deg, #FFCC00 0%, #CCA300 100%);
+  --gradient-border-error: linear-gradient(112deg, #EB5550 0%, #FF4444 100%);
   --gradient-text-primary-secondary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-primary-800) 50%, var(--color-secondary-500) 100%);
   --gradient-text-primary: linear-gradient(90deg, var(--color-primary-500) 0%, var(--color-grey-700) 100%);
   --gradient-text-grey: linear-gradient(90deg, var(--color-grey-700) 0%, var(--color-grey-900) 100%);
@@ -804,29 +813,58 @@ html[data-theme=dark] .prokodo-Button {
   border-radius: 1.5rem;
   border-radius: 1.5rem;
 }
-.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
-  color: #FFFFFF !important;
+.prokodo-Button--has-bg-primary, .prokodo-Button--has-bg-secondary, .prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
-.prokodo-Button--has-bg-success, .prokodo-Button--has-bg-warning {
-  color: var(--color-black);
+.prokodo-Button--has-bg-info, .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-bg-primary {
   background: var(--gradient-background-primary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-primary {
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-inherit {
+  color: var(--color-grey-900);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
 }
 .prokodo-Button--has-bg-secondary {
   background: var(--gradient-background-secondary);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-secondary {
+  color: #FFFFFF;
 }
 .prokodo-Button--is-disabled, .prokodo-Button--has-bg-info {
   background: var(--gradient-background-info);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--is-disabled, html[data-theme=dark] .prokodo-Button--has-bg-info {
+  color: var(--color-grey-700);
 }
 .prokodo-Button--has-bg-success {
   background: var(--gradient-background-success);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-success {
+  color: #000000;
 }
 .prokodo-Button--has-bg-warning {
   background: var(--gradient-background-warning);
+  color: #000000;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-warning {
+  color: #000000;
 }
 .prokodo-Button--has-bg-error {
   background: var(--gradient-background-error);
+  color: #FFFFFF;
+}
+html[data-theme=dark] .prokodo-Button--has-bg-error {
+  color: #FFFFFF;
 }
 .prokodo-Button--has-text-inherit, .prokodo-Button--has-text-primary, .prokodo-Button--has-text-secondary, .prokodo-Button--has-text-info, .prokodo-Button--has-text-success, .prokodo-Button--has-text-warning, .prokodo-Button--has-text-error {
   background: none;
@@ -882,7 +920,7 @@ html[data-theme=dark] .prokodo-Button {
 .prokodo-Button--has-variant-outlined {
   position: relative;
   background: none;
-  color: var(--color-black) !important;
+  color: var(--color-black);
 }
 .prokodo-Button--has-variant-outlined::before {
   content: "";
@@ -903,6 +941,66 @@ html[data-theme=dark] .prokodo-Button {
 html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   background: none;
 }
+.prokodo-Button--has-variant-outlined--has-outline-inherit {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-inherit::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-primary::before {
+  background: var(--gradient-border-4);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-primary {
+  color: var(--color-primary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-secondary::before {
+  background: var(--gradient-border-2);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-secondary {
+  color: var(--color-secondary-500);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-info::before {
+  background: var(--gradient-border-info);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-info {
+  color: #FFFFFF;
+}
+.prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-success::before {
+  background: var(--gradient-border-success);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-success {
+  color: var(--color-success);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-warning::before {
+  background: var(--gradient-border-warning);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-warning {
+  color: var(--color-warning);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-black);
+}
+.prokodo-Button--has-variant-outlined--has-outline-error::before {
+  background: var(--gradient-border-error);
+}
+html[data-theme=dark] .prokodo-Button--has-variant-outlined--has-outline-error {
+  color: var(--color-error);
+}
 .prokodo-Button--has-image, .prokodo-Button--has-icon {
   display: flex;
   align-items: center;
@@ -921,6 +1019,26 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
 }
 .prokodo-Button--is-disabled {
   cursor: default;
+  box-shadow: none;
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+.prokodo-Button--is-disabled::before {
+  background: var(--gradient-border-8);
+}
+.prokodo-Button--is-disabled:hover {
+  color: var(--color-grey-500);
+  background: var(--color-grey-100);
+  background-color: var(--color-grey-100);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled {
+  color: var(--color-grey-600);
+  background: linear-gradient(112deg, var(--color-grey-200) 0%, var(--color-grey-300) 100%);
+  background-color: var(--color-grey-300);
+}
+html[data-theme=dark] .prokodo-Button--is-disabled::before {
+  background: linear-gradient(112deg, var(--color-grey-300) 0%, var(--color-grey-500) 100%);
 }
 .prokodo-Button__title {
   display: flex;
@@ -964,7 +1082,6 @@ html[data-theme=dark] .prokodo-Button--has-variant-outlined {
   width: 100%;
 }
 .prokodo-Button__content--icon-only {
-  padding: 0.5rem;
   border-radius: 2000rem;
 }
 
@@ -1228,6 +1345,306 @@ html[data-theme=dark] .prokodo-Card__background {
   }
 }
 
+.prokodo-Checkbox {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  grid-gap: 0.75rem;
+  gap: 0.75rem;
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+  cursor: pointer;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+}
+.prokodo-Checkbox--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.prokodo-Checkbox:focus-within {
+  outline: 3px solid #1E90FF;
+  outline-offset: 4px;
+  border-radius: 1.5rem;
+}
+.prokodo-Checkbox--card {
+  padding: 0.5rem 0;
+  border-radius: 12px;
+  background: transparent;
+  border: 1px solid transparent;
+  box-shadow: none;
+}
+.prokodo-Checkbox__left {
+  display: inline-flex;
+  align-items: center;
+}
+.prokodo-Checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+.prokodo-Checkbox__control {
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  position: relative;
+  border: 2px solid rgba(255, 255, 255, 0.18);
+  background: rgba(255, 255, 255, 0.02);
+  box-shadow: var(--inner-elevation-1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 140ms ease, background 140ms ease;
+}
+.prokodo-Checkbox__control::after {
+  content: "";
+  width: 9px;
+  height: 5px;
+  border-left: 2px solid var(--color-primary-500, #2f6bff);
+  border-bottom: 2px solid var(--color-primary-500, #2f6bff);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(0.6);
+  opacity: 0;
+  transition: transform 140ms ease, opacity 140ms ease;
+}
+.prokodo-Checkbox__control--checked {
+  border-color: rgba(255, 255, 255, 0.32);
+}
+.prokodo-Checkbox__control--checked::after {
+  opacity: 1;
+  transform: translate(-50%, -50%) rotate(-45deg) scale(1);
+}
+.prokodo-Checkbox__control--card {
+  box-shadow: var(--inner-elevation-1);
+}
+.prokodo-Checkbox__control--card.prokodo-Checkbox__control--checked {
+  background: rgba(255, 255, 255, 0.1);
+}
+.prokodo-Checkbox__body {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.prokodo-Checkbox__row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.prokodo-Checkbox__title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--color-grey-900);
+  margin: 0;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__title {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__requiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  font-weight: 400;
+  font-size: 1.125rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__requiredMark {
+    font-size: 1rem;
+  }
+}
+.prokodo-Checkbox__desc {
+  color: var(--color-grey-700);
+  opacity: 0.82;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Checkbox__desc {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Checkbox__right {
+  justify-self: end;
+  display: inline-flex;
+  align-items: center;
+  align-self: start;
+  margin-top: 2px;
+}
+.prokodo-Checkbox__rightIcon {
+  color: var(--color-grey-700);
+  opacity: 0.9;
+}
+
+.prokodo-CheckboxGroup {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__legend {
+  margin: 0 0 0.5rem 0;
+  padding: 0;
+  opacity: 0.82;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legend {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legend--is-hidden {
+  position: absolute;
+  top: auto;
+  left: -99999px;
+  width: 0;
+  height: 0;
+  text-indent: -99999px;
+}
+.prokodo-CheckboxGroup__legendLabel {
+  color: var(--color-grey-900);
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendLabel {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__legendRequiredMark {
+  color: var(--color-error);
+  line-height: 1;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-CheckboxGroup__legendRequiredMark {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-CheckboxGroup__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__list--plain {
+  gap: 0;
+}
+.prokodo-CheckboxGroup__list--grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+}
+.prokodo-CheckboxGroup__item {
+  min-width: 0;
+}
+.prokodo-CheckboxGroup__item--disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
 .prokodo-Chip {
   display: inline-flex;
   align-items: center;
@@ -4783,7 +5200,11 @@ html[data-theme=dark] .prokodo-Skeleton::after {
   color: var(--color-black);
 }
 .prokodo-Snackbar--info {
-  background-color: var(--color-info);
+  background-color: var(--color-grey-500);
+}
+html[data-theme=dark] .prokodo-Snackbar--info {
+  background-color: var(--color-grey-300);
+  color: var(--color-grey-900);
 }
 .prokodo-Snackbar__message {
   flex: 1 1;