@ncds/ui-admin 0.0.26 → 0.0.28

package/dist/ui-admin/assets/styles/style.css

@@ -51,6 +51,14 @@
   --orange-500: #e4501e;
   --orange-600: #b93815;
   --orange-700: #772917;
+  --violet-50: #fbfaff;
+  --violet-100: #ece9fe;
+  --violet-200: #ddd6fe;
+  --violet-300: #c3b5fd;
+  --violet-400: #a48afb;
+  --violet-500: #6927da;
+  --violet-600: #5720b7;
+  --violet-700: #3e1486;
   --focus-ring-4px-primary-100: 0px 0px 0px 3px #ffeaee;
   --focus-ring-4px-gray-100: 0px 0px 0px 3px #f2f4f7;
   --focus-ring-4px-error-100: 0px 0px 0px 3px #fee4e2;
@@ -532,7 +540,7 @@ button {
   color: var(--gray-600);
 }
 :where(.ncua-button-group.has-border) {
-  border: 1px solid var(--gray-200);
+  outline: 1px solid var(--gray-200);
   box-shadow: var(--shadow-xs);
 }
 :where(.ncua-button-group.has-border) .ncua-button-group__item:hover {
@@ -721,15 +729,13 @@ button {
   display: none;
 }
 .ncua-checkbox-input :disabled + .ncua-checkbox-input__ico {
-  background-color: var(--gray-100);
   border-radius: 4px;
 }
 
 .ncua-checkbox-field {
   position: relative;
-  line-height: 18px;
-  font-weight: var(--font-weights-commerce-sans-0);
   font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
   cursor: pointer;
 }
 .ncua-checkbox-field__text {
@@ -739,17 +745,17 @@ button {
 }
 .ncua-checkbox-field__support-text {
   color: var(--gray-400);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
 }
 .ncua-checkbox-field:hover .ncua-checkbox-field__input {
   border-color: var(--gray-700);
   background-color: var(--gray-50);
   border-radius: 4px;
 }
-.ncua-checkbox-field--md .ncua-checkbox-field__text {
+.ncua-checkbox-field--md .ncua-checkbox-field__text,
+.ncua-checkbox-field--md .ncua-checkbox-field__support-text {
   font-size: var(--font-size-sm);
-  line-height: 22px;
+  line-height: var(--line-heights-sm);
 }
 .ncua-checkbox-field.has-text {
   display: inline-flex;
@@ -919,9 +925,9 @@ button {
   border-radius: 8px;
 }
 .ncua-divider--text {
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-1);
-  line-height: var(--line-heights-sm);
+  line-height: var(--line-heights-xs);
   color: var(--gray-500);
 }
 .ncua-divider--heading {
@@ -931,6 +937,48 @@ button {
   color: var(--gray-700);
 }
 
+.ncua-dot {
+  display: inline-block;
+  border-radius: 50%;
+  margin: 1px;
+}
+.ncua-dot--sm {
+  width: 6px;
+  height: 6px;
+}
+.ncua-dot--md {
+  width: 8px;
+  height: 8px;
+}
+.ncua-dot--lg {
+  width: 10px;
+  height: 10px;
+}
+.ncua-dot--neutral {
+  background-color: var(--gray-500);
+}
+.ncua-dot--error {
+  background-color: var(--primary-red-500);
+}
+.ncua-dot--warning {
+  background-color: var(--orange-500);
+}
+.ncua-dot--success {
+  background-color: var(--green-500);
+}
+.ncua-dot--blue {
+  background-color: var(--blue-500);
+}
+.ncua-dot--pink {
+  background-color: var(--pink-500);
+}
+.ncua-dot--violet {
+  background-color: var(--violet-500);
+}
+.ncua-dot--disabled {
+  background-color: var(--gray-300);
+}
+
 .ncua-dropdown {
   position: relative;
   display: inline-block;
@@ -1514,6 +1562,9 @@ button {
 .ncua-modal__header--horizontal .ncua-modal__title {
   flex: 1;
 }
+.ncua-modal__header--close-button.ncua-modal__header--left {
+  padding: 20px 56px 20px 16px;
+}
 
 .ncua-modal__title {
   display: flex;
@@ -1536,22 +1587,21 @@ button {
 
 .ncua-modal__close-button {
   position: absolute;
-  top: 16px;
-  right: 20px;
-  width: 24px;
-  height: 24px;
+  top: 10px;
+  right: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: 0;
+  padding: 8px;
   color: var(--gray-400);
   border-radius: 8px;
 }
-.ncua-modal__close-button:hover {
-  background-color: var(--gray-50);
+.ncua-modal__close-button svg {
+  width: 20px;
+  height: 20px;
 }
 
 .ncua-modal__content {
@@ -2050,7 +2100,7 @@ button {
 .ncua-radio-field__support-text {
   color: var(--gray-400);
 }
-.ncua-radio-field--md .ncua-radio-field__text {
+.ncua-radio-field--md .ncua-radio-field__text, .ncua-radio-field--md .ncua-radio-field__support-text {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
 }
@@ -2095,24 +2145,9 @@ button {
   white-space: nowrap;
   word-wrap: break-word;
 }
-.ncua-tag > svg {
+.ncua-tag > svg, .ncua-tag > .ncua-dot {
   margin-right: 4px;
 }
-.ncua-tag--dot .ncua-tag__text {
-  position: relative;
-  padding-left: 12px;
-}
-.ncua-tag--dot .ncua-tag__text::before {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  content: "";
-  transform: translateY(-50%);
-  width: 6px;
-  height: 6px;
-  background-color: var(--primary-red-500);
-  border-radius: 50%;
-}
 .ncua-tag__count {
   display: inline-flex;
   align-items: center;
@@ -2339,34 +2374,30 @@ button {
 .ncua-select.destructive .ncua-select__content:focus-within {
   box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
-.ncua-select__destructive-icon {
-  position: absolute;
-  top: 50%;
-  right: 25px;
-  width: 14px;
-  height: 14px;
-  font-size: 0;
-  color: var(--primary-red-600);
-  transform: translateY(-50%);
-}
 .ncua-select--xs {
   height: var(--select-height-xs);
   border-radius: 6px;
-  padding-right: 28px;
+  padding-inline: 10px 28px;
 }
 .ncua-select--xs > .ncua-select__tag {
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.ncua-select--xs + .ncua-hint-text {
+  margin-block-start: 4px;
+}
 .ncua-select--sm {
   height: var(--select-height-sm);
   border-radius: 6px;
-  padding-right: 30px;
+  padding-inline: 12px 30px;
 }
 .ncua-select--sm > .ncua-select__tag {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-0);
 }
+.ncua-select--sm + .ncua-hint-text {
+  margin-block-start: 6px;
+}
 .ncua-select--sm.ncua-select__content::after {
   width: 16px;
   height: 16px;
@@ -2376,12 +2407,15 @@ button {
   min-width: 132px;
   height: var(--select-height-md);
   border-radius: 8px;
-  padding-right: 30px;
+  padding-inline: 12px 30px;
 }
 .ncua-select--md > .ncua-select__tag {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.ncua-select--md + .ncua-hint-text {
+  margin-block-start: 6px;
+}
 .ncua-select--md.ncua-select__content::after {
   width: 16px;
   height: 16px;
@@ -2413,8 +2447,9 @@ button {
   padding-right: 18px;
 }
 .ncua-select .ncua-hint-text {
-  margin-block-start: 6px;
-  font-size: var(--font-size-xxxs);
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+  color: var(--gray-400);
 }
 
 .ncua-pagination {
@@ -2760,7 +2795,7 @@ button {
   display: inline-flex;
 }
 .ncua-date-picker .flatpickr-wrapper {
-  border: 1px solid var(--gray-200);
+  outline: 1px solid var(--gray-200);
   border-radius: 6px;
   font-weight: 400;
   background: var(--base-white);
@@ -2893,15 +2928,21 @@ button {
 .ncua-date-picker .flatpickr-day.today {
   border-color: var(--gray-600);
 }
-.ncua-date-picker--sm .flatpickr-wrapper {
+.ncua-date-picker--sm {
   width: 138px;
   height: 28px;
+}
+.ncua-date-picker--sm .flatpickr-wrapper {
+  height: 100%;
   padding: 5px 10px;
   font-size: var(--font-size-xs);
 }
-.ncua-date-picker--md .flatpickr-wrapper {
+.ncua-date-picker--md {
   width: 156px;
   height: 36px;
+}
+.ncua-date-picker--md .flatpickr-wrapper {
+  height: 100%;
   padding: 7px 12px;
   font-size: var(--font-size-sm);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",