@innovaccer/design-system 4.13.0 → 4.15.0

package/CHANGELOG.md

@@ -1,3 +1,77 @@
+## 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
+
+- feat(tokens): add ultra light tokens in the css (967398fa)
+- fix(metricInput): fix metric input arrowbutton while ESM build (3de747c6)
+
+### Breaking changes
+
+NA
+
+### Migration guide
+
+NA
+
+### Deprecations
+
+NA
+
+### Features
+
+- feat(tokens): add ultra light tokens in the css (967398fa)
+
+### Fixes
+
+- fix(metricInput): fix metric input arrowbutton while ESM build (3de747c6)
+
+### Improvements
+
+NA
+
+### Documentation
+
+NA
+
+---
+
 ## 4.13.0 (2025-09-22)
 
 ### Highlights

package/css/dist/index.css

@@ -138,6 +138,16 @@
   --accent4-lightest: var(--nimbu-lightest);
   --inverse-lightest: var(--night-lightest);
 
+  /* Ultra Light */
+  --primary-ultra-light: #eef6fc;
+  --success-ultra-light: #ecf7f0;
+  --alert-ultra-light: #fcf1f1;
+  --warning-ultra-light: #fffae4;
+  --accent1-ultra-light: #fef3e7;
+  --accent2-ultra-light: #f0ecf7;
+  --accent3-ultra-light: #f1f3fc;
+  --accent4-ultra-light: #f2f9e7;
+
   /* shadow */
   --primary-shadow: rgba(0, 112, 221, 0.16);
   --secondary-shadow: rgba(213, 213, 213, 0.16);
@@ -1630,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 {
@@ -7428,6 +7556,10 @@ body {
   stroke: var(--white);
 }
 
+.Circle--alert {
+  stroke: var(--alert);
+}
+
 .StatusHint {
   display: flex;
   flex-direction: row;