@ncds/ui-admin 1.8.25 → 1.8.26-alpha.1

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

@@ -67,9 +67,6 @@
   --shadow-xs-focused-3px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #ffeaee;
   --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
   --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
-  --shadow-xs-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
-  --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
-  --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
   --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
   --shadow-sm-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
   --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
@@ -327,7 +324,7 @@ button {
   background-color: var(--primary-red-450);
   border: 1px solid var(--primary-red-500);
   color: var(--base-white);
-  box-shadow: var(--shadow-xs-focused-4px-primary-100);
+  box-shadow: var(--shadow-sm-focused-4px-primary-100);
 }
 .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
   background-color: var(--primary-red-100);
@@ -373,7 +370,7 @@ button {
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
   color: var(--gray-700);
-  box-shadow: var(--shadow-xs-focused-4px-gray-100);
+  box-shadow: var(--shadow-sm-focused-4px-gray-100);
 }
 .ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
   background-color: var(--base-white);
@@ -959,7 +956,7 @@ button {
 }
 .ncua-checkbox-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-checkbox-input:hover {
   border-color: var(--gray-600);
@@ -1742,7 +1739,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input.destructive:where(:focus-within) .ncua-input__field {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-input.is-disabled .ncua-input__content > :not(button) {
   background-color: var(--gray-50);
@@ -1932,7 +1929,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input--textarea.destructive textarea:focus {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 
 .ncua-input--textarea--xs textarea {
@@ -2787,7 +2784,7 @@ button {
 .ncua-full-width-notification--neutral .ncua-notification__action-button {
   color: var(--gray-500);
 }
-.ncua-full-width-notification--neutral .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--neutral .ncua-notification__action-button--text {
+.ncua-full-width-notification--neutral .ncua-notification__action-button--text {
   color: var(--gray-600);
 }
 @media (max-width: 768px) {
@@ -2806,7 +2803,7 @@ button {
 .ncua-full-width-notification--error .ncua-notification__action-button {
   color: var(--primary-red-500);
 }
-.ncua-full-width-notification--error .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--error .ncua-notification__action-button--text {
+.ncua-full-width-notification--error .ncua-notification__action-button--text {
   color: var(--primary-red-600);
 }
 @media (max-width: 768px) {
@@ -2825,7 +2822,7 @@ button {
 .ncua-full-width-notification--warning .ncua-notification__action-button {
   color: var(--orange-500);
 }
-.ncua-full-width-notification--warning .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--warning .ncua-notification__action-button--text {
+.ncua-full-width-notification--warning .ncua-notification__action-button--text {
   color: var(--orange-600);
 }
 @media (max-width: 768px) {
@@ -2844,7 +2841,7 @@ button {
 .ncua-full-width-notification--success .ncua-notification__action-button {
   color: var(--green-500);
 }
-.ncua-full-width-notification--success .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--success .ncua-notification__action-button--text {
+.ncua-full-width-notification--success .ncua-notification__action-button--text {
   color: var(--green-600);
 }
 @media (max-width: 768px) {
@@ -2863,7 +2860,7 @@ button {
 .ncua-full-width-notification--info .ncua-notification__action-button {
   color: var(--violet-500);
 }
-.ncua-full-width-notification--info .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification--info .ncua-notification__action-button--text {
+.ncua-full-width-notification--info .ncua-notification__action-button--text {
   color: var(--violet-600);
 }
 @media (max-width: 768px) {
@@ -2881,9 +2878,13 @@ button {
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-0);
 }
-.ncua-full-width-notification .ncua-notification__action-button--secondary-gray, .ncua-full-width-notification .ncua-notification__action-button--text {
+.ncua-full-width-notification .ncua-notification__action-button--text {
   font-weight: var(--font-weights-commerce-sans-1);
 }
+.ncua-full-width-notification .ncua-btn--text:not([disabled], .is-disable),
+.ncua-full-width-notification .ncua-btn--text:hover:not([disabled], .is-disable) {
+  color: inherit;
+}
 @media (max-width: 768px) {
   .ncua-full-width-notification__icon {
     display: none;
@@ -3004,9 +3005,6 @@ button {
 .ncua-message-notification--neutral .ncua-notification__action-button {
   color: var(--gray-500);
 }
-.ncua-message-notification--neutral .ncua-notification__action-button--text, .ncua-message-notification--neutral .ncua-notification__action-button--text-gray {
-  color: var(--gray-600);
-}
 .ncua-message-notification--error {
   color: var(--primary-red-600);
   background-color: var(--primary-red-50);
@@ -3023,9 +3021,6 @@ button {
 .ncua-message-notification--error .ncua-notification__action-button {
   color: var(--primary-red-500);
 }
-.ncua-message-notification--error .ncua-notification__action-button--text, .ncua-message-notification--error .ncua-notification__action-button--text-gray {
-  color: var(--primary-red-600);
-}
 .ncua-message-notification--warning {
   color: var(--orange-600);
   background-color: var(--orange-50);
@@ -3042,9 +3037,6 @@ button {
 .ncua-message-notification--warning .ncua-notification__action-button {
   color: var(--orange-500);
 }
-.ncua-message-notification--warning .ncua-notification__action-button--text, .ncua-message-notification--warning .ncua-notification__action-button--text-gray {
-  color: var(--orange-600);
-}
 .ncua-message-notification--success {
   color: var(--green-600);
   background-color: var(--green-50);
@@ -3061,9 +3053,6 @@ button {
 .ncua-message-notification--success .ncua-notification__action-button {
   color: var(--green-500);
 }
-.ncua-message-notification--success .ncua-notification__action-button--text, .ncua-message-notification--success .ncua-notification__action-button--text-gray {
-  color: var(--green-600);
-}
 .ncua-message-notification .ncua-notification__action-button {
   background: transparent;
   border: none;
@@ -3073,8 +3062,38 @@ button {
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-0);
 }
-.ncua-message-notification .ncua-notification__action-button--text, .ncua-message-notification .ncua-notification__action-button--text-gray {
-  font-weight: var(--font-weights-commerce-sans-1);
+.ncua-message-notification.ncua-message-notification--block {
+  background-color: var(--base-white);
+  border: 1px solid var(--gray-100);
+  border-radius: 12px;
+  box-shadow: var(--shadow-sm);
+}
+.ncua-message-notification.ncua-message-notification--block .ncua-message-notification__supporting-text {
+  color: var(--gray-500);
+}
+.ncua-message-notification.ncua-message-notification--block .ncua-message-notification__text-container {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-message-notification.ncua-message-notification--block .ncua-message-notification__link .ncua-message-notification__supporting-text {
+  color: inherit;
+}
+.ncua-message-notification.ncua-message-notification--block.ncua-message-notification--info {
+  color: var(--violet-600);
+}
+.ncua-message-notification.ncua-message-notification--block.ncua-message-notification--info .ncua-message-notification__title {
+  color: var(--violet-600);
+}
+.ncua-message-notification.ncua-message-notification--block.ncua-message-notification--info .ncua-message-notification__icon {
+  color: var(--violet-600);
+  background-color: var(--violet-100);
+}
+.ncua-message-notification__link, .ncua-message-notification__link:hover {
+  color: inherit;
+  text-decoration: underline;
+  cursor: pointer;
 }
 .ncua-message-notification .ncua-message-notification__hide-link.ncua-notification__action-button {
   color: var(--gray-500);
@@ -3194,7 +3213,7 @@ button {
 }
 .ncua-radio-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 
 .ncua-radio-field {
@@ -3696,7 +3715,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-select.destructive .ncua-select__content:focus-within {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-select--xs .ncua-select__content {
   height: var(--select-height-xs);
@@ -4037,7 +4056,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-selectbox.destructive .ncua-selectbox__content:focus {
-  box-shadow: var(--shadow-xs-focused-4px-error-100);
+  box-shadow: var(--shadow-sm-focused-4px-error-100);
 }
 .ncua-selectbox--xs .ncua-selectbox__content {
   height: var(--select-height-xs);
@@ -5340,15 +5359,16 @@ button {
   justify-content: center;
   color: var(--pink-600);
   background-color: var(--pink-200);
-  border-radius: 5px;
 }
 .ncua-badge--new-badge-sm {
   width: 16px;
   height: 16px;
+  border-radius: 3px;
 }
 .ncua-badge--new-badge-md {
   width: 20px;
   height: 20px;
+  border-radius: 4px;
 }
 
 .ncua-badge-group {
@@ -6610,7 +6630,7 @@ button {
   bottom: 0;
   width: 3px;
   background: var(--base-black);
-  z-index: 1;
+  z-index: var(--z-index-1);
 }
 .ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
   background: var(--orange-50);
@@ -6755,7 +6775,7 @@ button {
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
-  z-index: 10;
+  z-index: var(--z-index-sticky);
   padding: 0 var(--spacing-m);
   height: var(--ncua-table-header-height);
 }

package/package.json

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