@idds/styles 1.0.55 → 1.0.57

package/package.json

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

package/src/components/button.css

@@ -155,7 +155,7 @@
 }
 
 .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;
@@ -170,18 +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));
+  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;
@@ -199,11 +199,11 @@
 }
 
 .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));
+  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/date-picker.css

@@ -363,21 +363,6 @@
   justify-content: center;
 }
 
-.ina-date-picker__today-label {
-  font-size: 8px;
-  font-weight: var(--ina-font-normal);
-  color: var(--ina-content-primary);
-  line-height: 1;
-  margin-bottom: 2px;
-  position: absolute;
-  top: -10px;
-  white-space: nowrap;
-}
-
-.ina-date-picker__today-label--selected {
-  color: var(--ina-neutral-25, #ffffff);
-}
-
 .ina-date-picker__day {
   display: flex;
   align-items: center;
@@ -455,7 +440,19 @@
 }
 
 .ina-date-picker__day--today {
-  font-weight: 700;
+  position: relative;
+}
+.ina-date-picker__today-label {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  color: var(--ina-content-primary);
+  font-size: var(--ina-font-3xs, 8px);
+}
+
+.ina-date-picker__today-label--selected {
+  color: var(--ina-white);
 }
 
 .ina-date-picker__day--other-month {

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 {

package/src/components/one-time-password.css

@@ -0,0 +1,119 @@
+/* OneTimePassword Component Styles */
+
+/* Base container */
+.ina-one-time-password {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--ina-rounded-lg, 8px);
+  background-color: var(--ina-background-primary);
+  width: max-content;
+}
+
+/* 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: 44px; /* 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);
+  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);
+}
+
+/* Helper text error state */
+.ina-one-time-password__helper-text--error {
+  color: var(--ina-negative-500);
+}
+
+/* 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/pagination.css

@@ -14,8 +14,14 @@
   font-size: var(--ina-font-xs);
   font-weight: var(--ina-font-normal);
 }
+.ina-pagination__page-size-container {
+  display: none;
+}
+.ina-pagination__page-info {
+  display: none;
+}
 
-@media (min-width: 1280px) {
+@media (min-width: 768px) {
   .ina-pagination {
     flex-direction: row-reverse;
     align-items: center;
@@ -24,6 +30,12 @@
     font-size: var(--ina-font-sm);
     font-weight: var(--ina-font-medium);
   }
+  .ina-pagination__page-size-container {
+    display: flex;
+  }
+  .ina-pagination__page-info {
+    display: block;
+  }
 }
 
 /* Full width layout (untuk Table) */
@@ -34,7 +46,7 @@
   gap: 12px; /* 12px gap antara nav container dan page size container */
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 768px) {
   .ina-pagination--full-width {
     flex-direction: row;
     align-items: center;
@@ -51,7 +63,7 @@
   gap: var(--ina-spacing-2);
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 768px) {
   .ina-pagination__nav-container {
     flex-direction: row;
     align-items: center;
@@ -82,7 +94,6 @@
   min-width: 24px;
   min-height: 24px;
   padding: 0 var(--ina-spacing-0-5);
-  border: 1px solid var(--ina-stroke-primary);
   border-radius: var(--ina-radius-md);
   cursor: pointer;
   user-select: none;
@@ -92,7 +103,7 @@
     color var(--ina-transition-base);
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 768px) {
   .ina-pagination__nav-button {
     min-width: 32px;
     min-height: 32px;
@@ -149,7 +160,7 @@
     color var(--ina-transition-base);
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 768px) {
   .ina-pagination__page-button {
     min-width: 32px;
     min-height: 32px;
@@ -201,7 +212,7 @@
   margin-top: var(--ina-spacing-2);
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 768px) {
   .ina-pagination__page-size-container {
     margin-top: 0;
     margin-right: var(--ina-spacing-12);
@@ -215,7 +226,7 @@
   order: 2; /* Di bawah nav container pada mobile */
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 768px) {
   .ina-pagination--full-width .ina-pagination__page-size-container {
     order: 1; /* Di kiri pada desktop */
     margin-right: 0;
@@ -227,7 +238,7 @@
   order: 1; /* Di atas page size container pada mobile */
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 768px) {
   .ina-pagination--full-width .ina-pagination__nav-container {
     order: 2; /* Di kanan pada desktop */
   }

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 */

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);
 }
 

package/src/components/toggle.css

@@ -46,12 +46,12 @@
 }
 
 .ina-toggle__track--disabled {
-  background-color: var(--ina-stroke-tertiary);
+  background-color: var(--ina-background-tertiary);
   cursor: not-allowed;
 }
 
 .ina-toggle__track--disabled.ina-toggle__track--checked {
-  background-color: var(--ina-stroke-tertiary);
+  background-color: var(--ina-background-tertiary);
 }
 
 /* Thumb (the sliding circle) */
@@ -110,7 +110,7 @@
 
 /* Hover states */
 .ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__track {
-  background-color: var(--ina-stroke-primary);
+  background-color: var(--ina-background-secondary);
   box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
     0 0 4px 6px rgba(31, 31, 31, 0.04);
 }
@@ -161,11 +161,11 @@
 }
 
 [data-theme='dark'] .ina-toggle__track--disabled {
-  background-color: var(--ina-stroke-tertiary);
+  background-color: var(--ina-background-tertiary);
 }
 
 [data-theme='dark'] .ina-toggle__track--disabled.ina-toggle__track--checked {
-  background-color: var(--ina-stroke-tertiary);
+  background-color: var(--ina-background-tertiary);
 }
 
 [data-theme='dark'] .ina-toggle__thumb {
@@ -181,7 +181,7 @@
 [data-theme='dark']
   .ina-toggle:not(.ina-toggle--disabled):hover
   .ina-toggle__track {
-  background-color: var(--ina-stroke-primary);
+  background-color: var(--ina-background-secondary);
 }
 
 [data-theme='dark']