@innovaccer/design-system 4.14.0 → 4.16.0

package/CHANGELOG.md

@@ -1,3 +1,76 @@
+## 4.16.0 (2025-11-03)
+
+### Highlights
+
+- feat(select): add outlined styleType in select (b88c025d)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(select): add outlined styleType in select (b88c025d)
+
+### Fixes
+
+NA
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
+## 4.15.0 (2025-10-21)
+
+### Highlights
+
+- feat(button): add outlined styleType in existing button (15ef566b)
+- test: update CI to test deployed site with latest DS (16af6a7b)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(button): add outlined styleType in existing button (15ef566b)
+
+### Fixes
+
+NA
+
+### Improvements
+
+- test: update CI to test deployed site with latest DS (16af6a7b)
+
+### Documentation
+
+NA
+
+---
+
 ## 4.14.0 (2025-09-30)
 
 ### Highlights

package/css/dist/index.css

@@ -1640,6 +1640,124 @@ body {
   text-overflow: ellipsis;
 }
 
+/* outlined button styles */
+
+.Button-outlined--basic {
+  border: var(--border);
+  color: var(--inverse);
+  background: transparent;
+}
+
+.Button-outlined--basic:hover {
+  background: var(--secondary-lighter);
+  border: var(--border-width-2-5) solid var(--inverse-lightest);
+}
+
+.Button-outlined--basic:active {
+  background: var(--secondary);
+  border: var(--border-width-2-5) solid var(--inverse-lightest);
+}
+
+.Button-outlined--basic:focus {
+  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+.Button-outlined--basic:disabled {
+  color: var(--inverse-lightest);
+  background: transparent;
+  border: var(--border-width-2-5) solid var(--secondary);
+}
+
+.Button-outlined--selected {
+  background: var(--primary-ultra-light);
+  color: var(--primary-dark);
+  border: var(--border-width-2-5) solid var(--primary-lighter);
+}
+
+.Button-outlined--selected:hover {
+  background: var(--primary-lightest);
+  border: var(--border-width-2-5) solid var(--primary-lighter);
+}
+
+.Button-outlined--selected:active {
+  background: var(--primary-lighter);
+  color: var(--primary-darker);
+  border: var(--border-width-2-5) solid var(--primary);
+}
+
+.Button-outlined--selected:focus {
+  color: var(--primary-dark);
+  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+.Button-outlined--selected:disabled {
+  background: var(--primary-ultra-light);
+  color: var(--primary-lighter);
+  border: var(--border-width-2-5) solid var(--primary-lightest);
+}
+
+.Button-outlined--primary {
+  background: transparent;
+  border: var(--border-width-2-5) solid var(--primary);
+  color: var(--primary);
+  mix-blend-mode: multiply;
+}
+
+.Button-outlined--primary:hover {
+  background: var(--primary-ultra-light);
+  border: var(--border-width-2-5) solid var(--primary-dark);
+  color: var(--primary-dark);
+}
+
+.Button-outlined--primary:active {
+  background: var(--primary-lightest);
+  border: var(--border-width-2-5) solid var(--primary-dark);
+  color: var(--primary-dark);
+}
+
+.Button-outlined--primary:focus {
+  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+.Button-outlined--primary:disabled {
+  background: transparent;
+  color: var(--primary-lighter);
+  border: var(--border-width-2-5) solid var(--primary-lighter);
+}
+
+.Button-outlined--alert {
+  background: transparent;
+  border: var(--border-width-2-5) solid var(--alert);
+  color: var(--alert);
+  mix-blend-mode: multiply;
+}
+
+.Button-outlined--alert:hover {
+  background: var(--alert-ultra-light);
+  border: var(--border-width-2-5) solid var(--alert-dark);
+  color: var(--alert-dark);
+}
+
+.Button-outlined--alert:active {
+  background: var(--alert-lightest);
+  border: var(--border-width-2-5) solid var(--alert-dark);
+  color: var(--alert-dark);
+}
+
+.Button-outlined--alert:focus {
+  border: var(--border-width-2-5) solid var(--alert);
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
+}
+
+.Button-outlined--alert:disabled {
+  background: transparent;
+  color: var(--alert-lighter);
+  border: var(--border-width-2-5) solid var(--alert-lighter);
+}
+
 /* calendar */
 
 .Calendar-wrapper {
@@ -6909,33 +7027,71 @@ body {
   justify-content: space-between;
   padding-top: unset;
   padding-bottom: unset;
+  transition: var(--duration--fast-01) var(--standard-productive-curve);
+}
+
+.Select-trigger--filled {
   background: var(--secondary-light);
   color: var(--text);
-  transition: var(--duration--fast-01) var(--standard-productive-curve);
 }
 
-.Select-trigger:disabled {
+.Select-trigger--filled:disabled {
   background: var(--secondary-lighter);
   color: var(--text-disabled);
   pointer-events: none;
 }
 
-.Select-trigger:active,
-.Select-trigger--open {
+.Select-trigger--filled:active,
+.Select-trigger--filledOpen {
   background-color: var(--secondary-dark) !important;
   color: var(--text) !important;
   animation-timing-function: cubic-bezier(0, 0, 0.38, 0.9);
   animation-duration: 120ms;
 }
 
-.Select-trigger:hover {
+.Select-trigger--filled:hover {
   background: var(--secondary);
   color: var(--text);
 }
 
-.Select-trigger:focus {
+.Select-trigger--filled:focus {
+  border: var(--border-width-2-5) solid var(--primary);
   background-color: var(--secondary-light);
-  box-shadow: var(--shadow-spread) var(--secondary-shadow);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+/* styleType Outlined */
+
+.Select-trigger--outlined {
+  background: var(--white);
+  color: var(--text);
+  border: var(--border);
+}
+
+.Select-trigger--outlined:hover {
+  background: var(--secondary-lighter);
+  color: var(--inverse);
+  border: var(--border-width-2-5) solid var(--secondary-dark);
+}
+
+.Select-trigger--outlined:focus {
+  border: var(--border-width-2-5) solid var(--primary);
+  box-shadow: var(--shadow-spread) var(--primary-shadow);
+}
+
+.Select-trigger--outlined:active,
+.Select-trigger--outlinedOpen {
+  color: var(--inverse) !important;
+  background: var(--secondary) !important;
+  border: var(--border-width-2-5) solid var(--inverse-lightest) !important;
+  animation-timing-function: var(--entrance-productive-curve);
+  animation-duration: var(--duration--fast-02);
+}
+
+.Select-trigger--outlined:disabled {
+  color: var(--inverse-lightest) !important;
+  background: var(--secondary-lightest) !important;
+  border: var(--border-width-2-5) solid var(--secondary-lighter) !important;
 }
 
 .Select-inputWrapper {
@@ -6979,10 +7135,14 @@ body {
   padding-left: var(--spacing-30);
 }
 
-.Select-trigger--placeholder {
+.Select-trigger--filledPlaceholder {
   color: var(--text);
 }
 
+.Select-trigger--outlinedPlaceholder {
+  color: var(--inverse-lighter);
+}
+
 .Select-trigger--icon {
   padding-left: var(--spacing-20);
 }
@@ -7048,6 +7208,11 @@ body {
   font-weight: var(--font-weight-medium);
 }
 
+.Select-trigger--error {
+  border: var(--border-width-2-5) solid var(--alert) !important;
+  box-shadow: var(--shadow-spread) var(--alert-shadow);
+}
+
 .Selection-card {
   border-radius: var(--border-radius-10);
   position: relative;
@@ -7438,6 +7603,10 @@ body {
   stroke: var(--white);
 }
 
+.Circle--alert {
+  stroke: var(--alert);
+}
+
 .StatusHint {
   display: flex;
   flex-direction: row;