@idds/styles 1.0.40 → 1.0.42

package/package.json

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

package/src/components/drawer.css

@@ -268,16 +268,15 @@
   }
 
   /* Width variants for desktop - Side panels (left/right) */
-  .ina-drawer--position-left .ina-drawer__panel--width-sm,
+  /* .ina-drawer--position-left .ina-drawer__panel--width-sm,
   .ina-drawer--position-right .ina-drawer__panel--width-sm {
-    width: 320px !important;
     min-width: 320px !important;
     max-width: 400px !important;
     height: 100vh !important;
     max-height: 100vh !important;
-  }
+  } */
 
-  .ina-drawer--position-left .ina-drawer__panel--width-md,
+  /* .ina-drawer--position-left .ina-drawer__panel--width-md,
   .ina-drawer--position-right .ina-drawer__panel--width-md {
     width: 400px !important;
     min-width: 400px !important;
@@ -311,16 +310,16 @@
     max-width: 800px !important;
     height: 100vh !important;
     max-height: 100vh !important;
-  }
+  } */
 
-  .ina-drawer--position-left .ina-drawer__panel--width-full,
+  /* .ina-drawer--position-left .ina-drawer__panel--width-full,
   .ina-drawer--position-right .ina-drawer__panel--width-full {
     width: 80vw !important;
     min-width: 80vw !important;
     max-width: 80vw !important;
     height: 100vh !important;
     max-height: 100vh !important;
-  }
+  } */
 
   /* Width variants for desktop - Top/Bottom panels (always 100vw) */
   .ina-drawer--position-top .ina-drawer__panel--width-sm,
@@ -343,7 +342,7 @@
   }
 
   /* Custom width support - for values like '40vw', '500px', etc. - Side panels */
-  .ina-drawer--position-left .ina-drawer__panel--width-40vw,
+  /* .ina-drawer--position-left .ina-drawer__panel--width-40vw,
   .ina-drawer--position-right .ina-drawer__panel--width-40vw {
     width: 40vw !important;
     min-width: 40vw;
@@ -377,19 +376,19 @@
     max-width: 70vw;
     height: 100vh !important;
     max-height: 100vh !important;
-  }
+  } */
 
-  .ina-drawer--position-left .ina-drawer__panel--width-80vw,
+  /* .ina-drawer--position-left .ina-drawer__panel--width-80vw,
   .ina-drawer--position-right .ina-drawer__panel--width-80vw {
     width: 80vw !important;
     min-width: 80vw;
     max-width: 80vw;
     height: 100vh !important;
     max-height: 100vh !important;
-  }
+  } */
 
   /* Custom width support - Top/Bottom panels (always 100vw) */
-  .ina-drawer--position-top .ina-drawer__panel--width-40vw,
+  /* .ina-drawer--position-top .ina-drawer__panel--width-40vw,
   .ina-drawer--position-top .ina-drawer__panel--width-50vw,
   .ina-drawer--position-top .ina-drawer__panel--width-60vw,
   .ina-drawer--position-top .ina-drawer__panel--width-70vw,
@@ -404,7 +403,7 @@
     max-width: 100vw !important;
     height: 60vh !important;
     max-height: 60vh !important;
-  }
+  } */
 }
 
 /* Header */

package/src/components/password-input.css

@@ -95,7 +95,7 @@
 }
 
 .ina-password-input__wrapper--error:focus-within {
-  border-color: var(--ina-negative-600);
+  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;
 }
@@ -105,12 +105,12 @@
 }
 
 .ina-password-input__wrapper--warning:focus-within {
-  border-color: var(--ina-warning-600);
+  border-color: var(--ina-warning-500);
   box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50) !important;
 }
 
 .ina-password-input__wrapper--success {
-  border-color: var(--ina-positive-500);
+  border-color: var(--ina-positive-600);
 }
 
 .ina-password-input__wrapper--success:focus-within {
@@ -208,11 +208,11 @@
 }
 
 .ina-password-input__status-message--error {
-  color: var(--ina-negative-600);
+  color: var(--ina-negative-500);
 }
 
 .ina-password-input__status-message--warning {
-  color: var(--ina-warning-600);
+  color: var(--ina-warning-500);
 }
 
 .ina-password-input__status-message--success {
@@ -228,11 +228,11 @@
 }
 
 .ina-password-input__character-count--warning {
-  color: var(--ina-warning-600);
+  color: var(--ina-warning-500);
 }
 
 .ina-password-input__character-count--error {
-  color: var(--ina-negative-600);
+  color: var(--ina-negative-500);
 }
 
 /* Size variants */
@@ -299,11 +299,16 @@
 
 /* Disabled state */
 .ina-password-input__wrapper--disabled {
-  background-color: var(--ina-neutral-50);
-  border-color: var(--ina-stroke-secondary);
+  background-color: var(--ina-background-tertiary);
+  border-color: var(--ina-stroke-primary) !important;
   cursor: not-allowed;
 }
 
+.ina-password-input__wrapper--disabled
+  > .ina-password-input__input::placeholder {
+  color: var(--ina-content-tertiary) !important;
+}
+
 .ina-password-input__wrapper--disabled .ina-password-input__input {
   cursor: not-allowed;
   opacity: 0.6;
@@ -361,7 +366,7 @@
 }
 
 .ina-password-input__strength-bar--good {
-  background-color: var(--ina-positive-500);
+  background-color: var(--ina-positive-600);
 }
 
 .ina-password-input__strength-bar--strong {

package/src/components/radio-input.css

@@ -60,24 +60,34 @@
   appearance: none;
   width: 20px;
   height: 20px;
-  border: 1px solid var(--ina-content-light-secondary) !important;
+  border: 1px solid var(--ina-stroke-tertiary, #141414);
   border-radius: 50%;
-  background-color: transparent;
+  background-color: var(--ina-background-primary, var(--ina-neutral-25));
   cursor: pointer;
   position: relative;
   transition: all var(--ina-transition-base);
   flex-shrink: 0;
 }
 
-/* Hover state */
+/* Hover state - Add drop shadow */
 .ina-radio-input__field:hover:not(:disabled) {
-  border-color: #666666;
+  filter: drop-shadow(0 0 3px #737373);
+}
+
+/* Focus state - Add drop shadow */
+.ina-radio-input__field:focus-visible:not(:disabled) {
+  filter: drop-shadow(0 0 3px #737373);
+}
+
+/* Active state - Add drop shadow */
+.ina-radio-input__field:active:not(:disabled) {
+  filter: drop-shadow(0 0 3px #737373);
 }
 
 /* Selected state */
 .ina-radio-input__field:checked {
-  border-color: #000000;
-  background-color: #000000;
+  border-color: var(--ina-stroke-tertiary, #141414);
+  background-color: var(--ina-background-primary, var(--ina-neutral-25));
 }
 
 .ina-radio-input__field:checked::after {
@@ -89,21 +99,30 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: #ffffff;
+  background-color: var(--ina-stroke-tertiary, #141414);
+}
+
+/* Checked + Hover/Focus/Active - Keep drop shadow */
+.ina-radio-input__field:checked:hover:not(:disabled),
+.ina-radio-input__field:checked:focus-visible:not(:disabled),
+.ina-radio-input__field:checked:active:not(:disabled) {
+  filter: drop-shadow(0 0 3px #737373);
 }
 
 /* Disabled states */
 .ina-radio-input__field:disabled {
-  border-color: #e0e0e0;
-  background-color: transparent;
+  border-color: var(--ina-neutral-200, #E5E5E5);
+  background-color: var(--ina-background-secondary, var(--ina-neutral-50));
   cursor: not-allowed;
   opacity: 1;
+  filter: none;
 }
 
 /* Disabled + Checked state - Higher specificity */
 .ina-radio-input__field:disabled:checked {
-  border-color: #e0e0e0 !important;
-  background-color: transparent !important;
+  border-color: var(--ina-neutral-200, #E5E5E5) !important;
+  background-color: var(--ina-background-secondary, var(--ina-neutral-50)) !important;
+  filter: none;
 }
 
 .ina-radio-input__field:disabled:checked::after {
@@ -115,7 +134,7 @@
   width: 8px;
   height: 8px;
   border-radius: 50%;
-  background-color: #e0e0e0;
+  background-color: var(--ina-neutral-200, #E5E5E5);
 }
 
 /* Radio option label */
@@ -176,7 +195,7 @@
 
 /* Focus indicators */
 .ina-radio-input__field:focus-visible {
-  outline: 2px solid #000000;
+  outline: 2px solid var(--ina-stroke-tertiary, #141414);
   outline-offset: 2px;
 }
 

package/src/components/text-area.css

@@ -89,11 +89,11 @@
 }
 
 .ina-text-area__helper-text--error {
-  color: var(--ina-negative-600);
+  color: var(--ina-negative-500);
 }
 
 .ina-text-area__helper-text--warning {
-  color: var(--ina-warning-600);
+  color: var(--ina-warning-500);
 }
 
 .ina-text-area__helper-text--success {
@@ -121,7 +121,7 @@
 }
 
 .ina-text-area__wrapper.ina-text-area__wrapper--status-error:focus-within {
-  border-color: var(--ina-negative-600);
+  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);
 }
@@ -131,12 +131,12 @@
 }
 
 .ina-text-area__wrapper.ina-text-area__wrapper--status-warning:focus-within {
-  border-color: var(--ina-warning-600);
+  border-color: var(--ina-warning-500);
   box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50);
 }
 
 .ina-text-area__wrapper--status-success {
-  border-color: var(--ina-positive-500);
+  border-color: var(--ina-positive-600);
 }
 
 .ina-text-area__wrapper.ina-text-area__wrapper--status-success:focus-within {
@@ -147,11 +147,15 @@
 
 /* Disabled state */
 .ina-text-area__wrapper--disabled {
-  background-color: var(--ina-neutral-50);
-  border-color: var(--ina-stroke-secondary);
+  background-color: var(--ina-background-tertiary);
+  border-color: var(--ina-stroke-primary) !important;
   cursor: not-allowed;
 }
 
+.ina-text-area__wrapper--disabled > .ina-text-area__input::placeholder {
+  color: var(--ina-content-tertiary) !important;
+}
+
 .ina-text-area__input:disabled {
   cursor: not-allowed;
   opacity: 0.6;

package/src/components/text-field.css

@@ -138,11 +138,11 @@
 }
 
 .ina-text-field__helper-text--error {
-  color: var(--ina-negative-600);
+  color: var(--ina-negative-500);
 }
 
 .ina-text-field__helper-text--warning {
-  color: var(--ina-warning-600);
+  color: var(--ina-warning-500);
 }
 
 .ina-text-field__helper-text--success {
@@ -169,7 +169,7 @@
 }
 
 .ina-text-field__wrapper.ina-text-field__wrapper--status-error:focus-within {
-  border-color: var(--ina-negative-600);
+  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;
 }
@@ -179,12 +179,12 @@
 }
 
 .ina-text-field__wrapper.ina-text-field__wrapper--status-warning:focus-within {
-  border-color: var(--ina-warning-600);
+  border-color: var(--ina-warning-500);
   box-shadow: 0 1px 2px 0 rgba(31, 31, 31, 0.1), 0 0 0 3px var(--ina-warning-50) !important;
 }
 
 .ina-text-field__wrapper--status-success {
-  border-color: var(--ina-positive-500);
+  border-color: var(--ina-positive-600);
 }
 
 .ina-text-field__wrapper.ina-text-field__wrapper--status-success:focus-within {
@@ -195,10 +195,13 @@
 
 /* Disabled state */
 .ina-text-field__wrapper--disabled {
-  background-color: var(--ina-neutral-50);
-  border-color: var(--ina-stroke-secondary);
+  background-color: var(--ina-background-tertiary);
+  border-color: var(--ina-stroke-primary) !important;
   cursor: not-allowed;
 }
+.ina-text-field__wrapper--disabled > .ina-text-field__input::placeholder {
+  color: var(--ina-content-tertiary) !important;
+}
 
 .ina-text-field__input:disabled {
   cursor: not-allowed;

package/src/components/toggle.css

@@ -13,6 +13,7 @@
 .ina-toggle--disabled {
   cursor: not-allowed;
   opacity: 0.6;
+  background-color: var(--ina-background-tertiary) !important;
 }
 
 /* Hide the actual input */
@@ -32,7 +33,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  background-color: var(--ina-stroke-secondary);
+  background-color: var(--ina-background-secondary);
   border-radius: 9999px;
   transition: all var(--ina-transition-duration-200) ease-in-out;
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
@@ -40,7 +41,7 @@
 }
 
 .ina-toggle__track--checked {
-  background-color: var(--ina-primary-500);
+  background-color: var(--ina-positive-500);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
@@ -73,6 +74,7 @@
 }
 
 /* Size variants */
+/* Small: 36px x 20px */
 .ina-toggle--size-sm .ina-toggle__track {
   width: 36px;
   height: 20px;
@@ -89,6 +91,7 @@
   transform: translateX(16px);
 }
 
+/* Medium: 44px x 24px */
 .ina-toggle--size-md .ina-toggle__track {
   width: 44px;
   height: 24px;
@@ -105,25 +108,11 @@
   transform: translateX(20px);
 }
 
-.ina-toggle--size-lg .ina-toggle__track {
-  width: 52px;
-  height: 28px;
-}
-
-.ina-toggle--size-lg .ina-toggle__thumb {
-  width: 24px;
-  height: 24px;
-  top: 2px;
-  left: 2px;
-}
-
-.ina-toggle--size-lg .ina-toggle__thumb--checked {
-  transform: translateX(24px);
-}
-
 /* Hover states */
 .ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__track {
   background-color: var(--ina-stroke-primary);
+  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
+    0 0 4px 6px rgba(31, 31, 31, 0.04);
 }
 
 .ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__track--checked {
@@ -132,11 +121,13 @@
 
 .ina-toggle:not(.ina-toggle--disabled):hover .ina-toggle__thumb {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
+  box-shadow: 0 0 6px 0 rgba(31, 31, 31, 0.1),
+    0 0 4px 6px rgba(31, 31, 31, 0.04);
 }
 
 /* Focus states */
 .ina-toggle__input:focus + .ina-toggle__track {
-  outline: 2px solid var(--ina-primary-500);
+  outline: 2px solid var(--ina-positive-500);
   outline-offset: 2px;
 }
 
@@ -158,11 +149,6 @@
   transform: translateX(16px) scale(0.95);
 }
 
-.ina-toggle--size-lg:not(.ina-toggle--disabled):active
-  .ina-toggle__thumb--checked {
-  transform: translateX(24px) scale(0.95);
-}
-
 /* Dark mode */
 [data-theme='dark'] .ina-toggle__track {
   background-color: var(--ina-stroke-secondary);
@@ -170,7 +156,7 @@
 }
 
 [data-theme='dark'] .ina-toggle__track--checked {
-  background-color: var(--ina-primary-500);
+  background-color: var(--ina-positive-500);
   box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
 }
 

package/src/components/tooltip.css

@@ -13,8 +13,9 @@
 /* Support force :hover state in developer tools */
 .ina-tooltip:hover .ina-tooltip__content,
 .ina-tooltip[data-hover='true'] .ina-tooltip__content {
-  opacity: 1;
-  visibility: visible;
+  opacity: 1 !important;
+  visibility: visible !important;
+  display: block !important;
 }
 
 .ina-tooltip__trigger {
@@ -33,6 +34,7 @@
   /* Hidden by default, shown via JavaScript or :hover */
   opacity: 0;
   visibility: hidden;
+  display: block;
 }
 
 /* Basic Tooltip Bubble */
@@ -352,10 +354,10 @@
   border-color: transparent transparent transparent transparent;
 }
 
-/* Left arrows (pointing right to trigger) - arrow at right of tooltip */
+/* Left arrows (pointing right to trigger) - arrow at right edge of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left::after {
   top: 50%;
-  right: 100%; /* To the left of tooltip content */
+  right: -5px; /* Positioned at right edge, pointing right */
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -363,7 +365,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-start::after {
   top: 16px;
-  right: 100%;
+  right: -5px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -371,16 +373,16 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-left-end::after {
   bottom: 16px;
-  right: 100%;
+  right: -5px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
 }
 
-/* Right arrows (pointing left to trigger) - arrow at left of tooltip */
+/* Right arrows (pointing left to trigger) - arrow at left edge of tooltip */
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right::after {
   top: 50%;
-  left: 100%; /* To the right of tooltip content */
+  left: -5px; /* Positioned at left edge, pointing left */
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -388,7 +390,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-start::after {
   top: 16px;
-  left: 100%;
+  left: -5px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;
@@ -396,7 +398,7 @@
 
 .ina-tooltip__content--show-arrow.ina-tooltip--placement-right-end::after {
   bottom: 16px;
-  left: 100%;
+  left: -5px;
   margin-top: -5px;
   border-width: 5px;
   border-color: transparent transparent transparent transparent;