@idds/styles 1.0.53 → 1.0.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/styles",
-  "version": "1.0.53",
+  "version": "1.0.55",
   "description": "Shared CSS styles and colors for INA Digital Design System",
   "type": "module",
   "main": "./src/index.css",

package/src/components/accordion.css

@@ -54,7 +54,7 @@
 .ina-accordion__toggler {
   /* Toggler section di sebelah kanan */
   flex-shrink: 0;
-  color: var(--ina-content-guide);
+  color: var(--ina-content-primary);
   transition: var(--ina-transition-fast);
 }
 
@@ -66,7 +66,7 @@
 .ina-accordion__icon {
   transition: transform 200ms ease;
   transform: rotate(0deg);
-  color: var(--ina-content-guide);
+  color: var(--ina-content-primary);
 }
 
 .ina-accordion__icon--open {

package/src/components/badge.css

@@ -104,25 +104,28 @@
 
 /* Size modifiers */
 .ina-badge--sm {
-  font-size: var(--ina-font-2xs);
+  font-size: var(--ina-font-xs);
   line-height: 14px;
   padding: var(--ina-spacing-1) var(--ina-spacing-2);
 }
 
 .ina-badge--md {
-  font-size: var(--ina-font-xs);
-  line-height: var(--ina-line-height-xs);
-  padding: var(--ina-spacing-1) var(--ina-spacing-2);
+  font-size: var(--ina-font-sm);
+  font-weight: var(--ina-font-medium);
+  line-height: var(--ina-line-height-sm);
+  padding: var(--ina-spacing-1) var(--ina-spacing-3);
 }
 
 .ina-badge--lg {
   font-size: var(--ina-font-sm);
+  font-weight: var(--ina-font-medium);
   line-height: var(--ina-line-height-sm);
   padding: var(--ina-spacing-1) var(--ina-spacing-3);
 }
 
 .ina-badge--xl {
   font-size: var(--ina-font-base);
+  font-weight: var(--ina-font-medium);
   line-height: var(--ina-line-height-base);
   padding: var(--ina-spacing-1) var(--ina-spacing-3-5);
 }
@@ -205,7 +208,7 @@
 
 /* Responsive adjustments */
 @media (max-width: 640px) {
-  .ina-badge--lg {
+  /* .ina-badge--lg {
     font-size: var(--ina-font-sm);
     padding: var(--ina-spacing-1) var(--ina-spacing-3);
   }
@@ -213,7 +216,7 @@
   .ina-badge--xl {
     font-size: var(--ina-font-base);
     padding: 0.375rem var(--ina-spacing-4);
-  }
+  } */
 }
 
 /* Dark mode support */

package/src/components/breadcrumb.css

@@ -54,8 +54,11 @@
   font-weight: var(--ina-font-medium);
 }
 
-.ina-breadcrumb__link:hover:not(.ina-breadcrumb__link--active):not(.ina-breadcrumb__link--disabled) {
+.ina-breadcrumb__link:hover:not(.ina-breadcrumb__link--active):not(
+    .ina-breadcrumb__link--disabled
+  ) {
   color: var(--ina-content-primary);
+  text-decoration: underline;
 }
 
 .ina-breadcrumb__link--disabled {

package/src/components/button.css

@@ -124,7 +124,8 @@
 
 .ina-button--primary:focus:not(:disabled) {
   background-color: var(--ina-primary-primary, var(--ina-content-primary));
-  outline: 2px solid var(--ina-primary-primary, var(--ina-content-primary));
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    0 0 0 4px var(--ina-neutral-100, #f5f5f5);
   outline-offset: 2px;
 }
 
@@ -148,7 +149,8 @@
 
 .ina-button--secondary:focus:not(:disabled) {
   background-color: var(--ina-background-secondary, var(--ina-neutral-50));
-  outline: 2px solid var(--ina-primary-primary, var(--ina-content-primary));
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    0 0 0 4px var(--ina-neutral-100, #f5f5f5);
   outline-offset: 2px;
 }
 
@@ -173,7 +175,8 @@
 
 .ina-button--tertiary:focus:not(:disabled) {
   background-color: var(--ina-background-tertiary, var(--Background-Tertiary));
-  outline: 2px solid var(--ina-primary-primary, var(--ina-content-primary));
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    0 0 0 4px var(--ina-neutral-100, #f5f5f5);
   outline-offset: 2px;
 }
 
@@ -201,7 +204,8 @@
 
 .ina-button--link:focus:not(:disabled) {
   color: var(--ina-guide-400, var(--Guide-400));
-  outline: 2px solid var(--ina-primary-primary, var(--ina-content-primary));
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    0 0 0 4px var(--ina-neutral-100, #f5f5f5);
   outline-offset: 2px;
 }
 

package/src/components/file-upload.css

@@ -90,12 +90,12 @@
 
 .ina-file-upload__button {
   padding: 8px 16px;
-  background-color: var(--ina-content-primary);
-  color: var(--ina-neutral-25);
-  border: none;
+  background-color: var(--ina-background-primary);
+  color: var(--ina-content-primary);
+  border: 1px solid var(--ina-stroke-primary);
   border-radius: 8px;
   font-size: 14px;
-  font-weight: 500;
+  font-weight: 600;
   line-height: 20px;
   cursor: pointer;
   transition: all 0.2s ease;
@@ -112,8 +112,8 @@
 }
 
 /* File List */
-.ina-file-upload__files {
-  margin-top: 16px;
+.ina-file-upload .ina-file-upload__files {
+  margin-top: 24px !important;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -121,9 +121,9 @@
 
 .ina-file-upload__file {
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: 12px;
-  padding: 12px 16px;
+  padding: 12px;
   background-color: var(--ina-background-primary, var(--ina-neutral-25));
   border: 1px solid var(--ina-stroke-primary, var(--Stroke-Primary));
   border-radius: 8px;
@@ -133,7 +133,6 @@
 
 .ina-file-upload__file--error {
   border-color: var(--ina-negative-500, var(--ina-error-500));
-  background-color: var(--ina-error-25, var(--Error-25));
 }
 
 .ina-file-upload__file--error .ina-file-upload__file-name,
@@ -162,41 +161,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 16px;
-  height: 16px;
+  width: 20px;
+  height: 20px;
   border-radius: 50%;
 }
 
-.ina-file-upload__file-icon-wrapper--success {
-  border: 1px solid var(--ina-positive-600, var(--ina-success-600));
-}
-
-.ina-file-upload__file-icon-wrapper--success svg {
-  color: var(--ina-positive-600, var(--ina-success-600));
-  width: 16px;
-  height: 16px;
-}
-
-.ina-file-upload__file-icon-wrapper--error {
-  border: 1px solid var(--ina-negative-500, var(--ina-error-500));
-}
-
-.ina-file-upload__file-icon-wrapper--error svg {
-  color: var(--ina-negative-500, var(--ina-error-500));
-  width: 16px;
-  height: 16px;
-}
-
-.ina-file-upload__file-icon-wrapper--uploading {
-  border: 1px solid var(--ina-primary-300, var(--ina-blue-300));
-}
-
-.ina-file-upload__file-icon-wrapper--uploading svg {
-  color: var(--ina-primary-300, var(--ina-blue-300));
-  width: 16px;
-  height: 16px;
-}
-
 .ina-file-upload__file-icon-placeholder {
   width: 16px;
   height: 16px;
@@ -253,6 +222,8 @@
 .ina-file-upload__file-actions {
   display: flex;
   align-items: center;
+  width: 20px;
+  height: 20px;
   gap: 8px;
   flex-shrink: 0;
 }
@@ -271,12 +242,12 @@
   justify-content: center;
   width: 20px;
   height: 20px;
+  font-size: 16px;
 }
 
 .ina-file-upload__file-retry:hover,
 .ina-file-upload__file-remove:hover {
-  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
-  color: var(--ina-content-primary, var(--ina-neutral-800));
+  color: var(--ina-negative-600, var(--ina-red-600));
 }
 
 .ina-file-upload__file-retry {

package/src/components/stepper.css

@@ -132,7 +132,7 @@
 
 /* Label */
 .ina-stepper__label {
-  font-size: var(--ina-font-size-xs);
+  font-size: var(--ina-font-xs);
   color: var(--ina-content-primary);
   transition: color 0.2s ease;
   white-space: nowrap;
@@ -184,10 +184,10 @@
   background-color: var(--ina-guide-50);
 }
 
-.ina-stepper__item--active .ina-stepper__label {
+/* .ina-stepper__item--active .ina-stepper__label {
   color: var(--ina-guide-500);
   font-weight: 500;
-}
+} */
 
 /* Done/Completed State */
 .ina-stepper__item--completed .ina-stepper__icon-wrapper {

package/src/components/table.css

@@ -283,7 +283,7 @@
 
 /* Pagination */
 .ina-table__pagination {
-  margin-top: var(--ina-spacing-4);
+  padding: var(--ina-spacing-4);
 }
 
 /* Responsive adjustments */
@@ -303,6 +303,9 @@
   .ina-table__search-button {
     margin-left: 0;
   }
+  .ina-table__pagination {
+    padding: var(--ina-spacing-3);
+  }
 }
 
 /* Table variants */