@idds/styles 1.0.55 → 1.0.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/styles",
-  "version": "1.0.55",
+  "version": "1.0.56",
   "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/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,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 */

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