@idds/styles 1.0.54 → 1.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/styles",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "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,12 +149,13 @@
 
 .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;
 }
 
 .ina-button--secondary:disabled {
-  background-color: var(--ina-background-tertiary, var(--Background-Tertiary));
+  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
   color: var(--ina-content-tertiary, var(--ina-neutral-400));
   border-color: var(--ina-stroke-primary, var(--Stroke-Primary));
   cursor: not-allowed;
@@ -168,17 +170,18 @@
 }
 
 .ina-button--tertiary:hover:not(:disabled) {
-  background-color: var(--ina-background-tertiary, var(--Background-Tertiary));
+  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
 }
 
 .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));
+  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    0 0 0 4px var(--ina-neutral-100, #f5f5f5);
   outline-offset: 2px;
 }
 
 .ina-button--tertiary:disabled {
-  background-color: var(--ina-background-tertiary, var(--Background-Tertiary));
+  background-color: var(--ina-background-tertiary, var(--ina-neutral-100));
   color: var(--ina-content-tertiary, var(--ina-neutral-400));
   cursor: not-allowed;
   opacity: 1;
@@ -196,12 +199,13 @@
 }
 
 .ina-button--link:hover:not(:disabled) {
-  color: var(--ina-guide-400, var(--Guide-400));
+  color: var(--ina-guide-400, var(--ina-blue-400));
 }
 
 .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));
+  color: var(--ina-guide-400, var(--ina-blue-400));
+  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

@@ -5,7 +5,12 @@
  */
 
 .ina-file-upload {
-  width: 100%;
+  min-width: 100%;
+}
+@media (min-width: 768px) {
+  .ina-file-upload {
+    min-width: 484px;
+  }
 }
 
 .ina-file-upload__label {
@@ -90,12 +95,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 +117,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 +126,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 +138,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 +166,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 +227,8 @@
 .ina-file-upload__file-actions {
   display: flex;
   align-items: center;
+  width: 20px;
+  height: 20px;
   gap: 8px;
   flex-shrink: 0;
 }
@@ -271,12 +247,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/one-time-password.css

@@ -0,0 +1,113 @@
+/* OneTimePassword Component Styles */
+
+/* Base container */
+.ina-one-time-password {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Title */
+.ina-one-time-password__title {
+  font-size: 20px;
+  font-weight: 600; /* semibold */
+  color: var(--ina-content-primary);
+  margin-bottom: 16px;
+}
+
+/* Description */
+.ina-one-time-password__description {
+  font-size: 14px;
+  font-weight: 400; /* normal */
+  color: var(--ina-content-secondary);
+  margin-bottom: 16px;
+}
+
+/* Input container */
+.ina-one-time-password__container {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+/* Individual input field */
+.ina-one-time-password__input {
+  flex: 0 0 auto;
+  width: 43.833px; /* Auto width based on content */
+  height: 44px;
+  border: 1px solid var(--ina-stroke-primary);
+  border-radius: var(--ina-rounded-lg, 8px);
+  background-color: var(--ina-background-primary);
+  padding: 0 16px;
+  font-size: 24px;
+  font-weight: 500;
+  color: var(--ina-content-primary);
+  text-align: center;
+  outline: none;
+  transition: all var(--ina-transition-base);
+  font-family: inherit;
+}
+
+/* Hover state */
+.ina-one-time-password__input:hover:not(:disabled):not(:read-only) {
+  background-color: var(--ina-neutral-50);
+}
+
+/* Focus state */
+.ina-one-time-password__input:focus {
+  border-color: var(--ina-content-primary);
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px #f3f3f3;
+  background-color: var(--ina-background-primary);
+}
+
+/* Error/Invalid state */
+.ina-one-time-password__input--error {
+  border-color: var(--ina-negative-500);
+}
+
+.ina-one-time-password__input--error:focus {
+  border-color: var(--ina-negative-500);
+  box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1),
+    0 0 0 3px var(--ina-negative-50) !important;
+}
+
+/* Disabled state */
+.ina-one-time-password__input:disabled {
+  background-color: var(--ina-background-tertiary);
+  border-color: var(--ina-stroke-primary) !important;
+  cursor: not-allowed;
+  opacity: 0.6;
+  color: var(--ina-content-tertiary);
+}
+
+/* Readonly state */
+.ina-one-time-password__input[readonly] {
+  background-color: var(--ina-background-tertiary);
+  cursor: default;
+}
+
+/* Helper text */
+.ina-one-time-password__helper-text {
+  font-size: 14px;
+  font-weight: 400; /* normal */
+  color: var(--ina-content-primary);
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  .ina-one-time-password {
+    padding: 24px 16px;
+  }
+
+  .ina-one-time-password__input {
+    width: 40px;
+    height: 40px;
+    font-size: 20px;
+    padding: 0 12px;
+  }
+
+  .ina-one-time-password__container {
+    gap: 12px;
+  }
+}
+

package/src/components/tab-horizontal.css

@@ -78,6 +78,7 @@
 .ina-tab-horizontal__tab--variant-outline {
   color: var(--ina-content-secondary);
   background: transparent;
+  border-bottom: 1px solid var(--ina-stroke-primary, var(--ina-neutral-200));
 }
 
 .ina-tab-horizontal__tab--variant-outline:hover:not(

package/src/components/table.css

@@ -38,7 +38,6 @@
   min-width: max-content;
   /* Allow tooltips to extend beyond table bounds */
   overflow: visible;
-  margin-bottom: var(--ina-spacing-4);
 }
 
 /* Table header */
@@ -283,7 +282,7 @@
 
 /* Pagination */
 .ina-table__pagination {
-  margin-top: var(--ina-spacing-4);
+  padding: var(--ina-spacing-4);
 }
 
 /* Responsive adjustments */
@@ -303,6 +302,9 @@
   .ina-table__search-button {
     margin-left: 0;
   }
+  .ina-table__pagination {
+    padding: var(--ina-spacing-3);
+  }
 }
 
 /* Table variants */

package/src/components/time-picker.css

@@ -69,7 +69,7 @@
 }
 
 .ina-time-picker--open .ina-time-picker__wrapper {
-  border-color: var(--ina-primary-500);
+  border-color: var(--ina-primary-primary);
   box-shadow: 0 0 0 2px var(--ina-primary-50);
 }
 
@@ -308,7 +308,7 @@
 }
 
 .ina-time-picker__option--selected {
-  background-color: var(--ina-primary-500);
+  background-color: var(--ina-primary-primary);
   color: var(--ina-white);
 }
 
@@ -370,7 +370,7 @@
 }
 
 .ina-time-picker__confirm-button {
-  background-color: var(--ina-primary-500);
+  background-color: var(--ina-primary-primary);
   color: var(--ina-white);
 }