Merge pull request #2146 from anuradha9712/feat-opacity-tokens-in-components

innosatyam · web-flow · commit bd3376dfb585 · 2024-04-22T18:30:00.000+04:00
feat(opacity): update values of opacity with tokens in components
diff --git a/core/components/css-utilities/designTokens/Data.tsx b/core/components/css-utilities/designTokens/Data.tsx
@@ -181,16 +181,14 @@ export const transitionsDurationData = [
 ];
 
 export const opacityData = [
-  { token: '--opacity-0', value: '0' },
-  { token: '--opacity-4', value: '0.04' },
-  { token: '--opacity-8', value: '0.08' },
-  { token: '--opacity-12', value: '0.12' },
-  { token: '--opacity-16', value: '0.16' },
-  { token: '--opacity-24', value: '0.24' },
-  { token: '--opacity-32', value: '0.32' },
-  { token: '--opacity-40', value: '0.40' },
-  { token: '--opacity-48', value: '0.48' },
-  { token: '--opacity-64', value: '0.64' },
-  { token: '--opacity-80', value: '0.80' },
-  { token: '--opacity-100', value: '1' },
+  { token: '--opacity-1', value: '0.04' },
+  { token: '--opacity-2', value: '0.08' },
+  { token: '--opacity-3', value: '0.12' },
+  { token: '--opacity-4', value: '0.16' },
+  { token: '--opacity-6', value: '0.24' },
+  { token: '--opacity-8', value: '0.32' },
+  { token: '--opacity-10', value: '0.40' },
+  { token: '--opacity-12', value: '0.48' },
+  { token: '--opacity-16', value: '0.64' },
+  { token: '--opacity-20', value: '0.80' },
 ];
diff --git a/css/src/components/actionCard.css b/css/src/components/actionCard.css
@@ -35,6 +35,6 @@
   bottom: 0;
   left: 0;
   z-index: 2;
-  opacity: 50%;
+  opacity: var(--opacity-10);
   background: var(--secondary-light);
 }
diff --git a/css/src/components/backdrop.css b/css/src/components/backdrop.css
@@ -3,21 +3,21 @@
     opacity: 0;
   }
   to {
-    opacity: 60;
+    opacity: var(--opacity-16);
   }
 }
 
 @keyframes backdrop-close {
   from {
-    opacity: 60;
+    opacity: var(--opacity-16);
   }
   to {
     opacity: 0;
   }
 }
 
 .Backdrop {
-  background-color: color-mod(var(--inverse) a(0.6));
+  background-color: color-mod(var(--inverse) a(var(--opacity-16)));
   height: 100vh;
   width: 100vw;
   position: fixed;
diff --git a/css/src/components/fullscreenModal.css b/css/src/components/fullscreenModal.css
@@ -4,14 +4,14 @@
     transform: translateY(20px);
   }
   to {
-    opacity: 100;
+    opacity: 1;
     transform: translateY(0px);
   }
 }
 
 @keyframes fullscreenModal-close {
   from {
-    opacity: 100;
+    opacity: 1;
     transform: translateY(0px);
   }
   to {
diff --git a/css/src/components/grid.css b/css/src/components/grid.css
@@ -28,7 +28,7 @@
 }
 
 .Grid--resource .Grid-row--body:focus {
-  box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-16)));
+  box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));
   outline: none;
 }
 
@@ -147,13 +147,13 @@
 
 .Grid-row--selected,
 .Grid-row--selected .Grid-cellGroup {
-  background: color-mod(var(--primary-lightest) a(var(--opacity-48)));
+  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
   transition: var(--duration--fast-02) var(--standard-productive-curve);
 }
 
 .Grid-row--selected:hover,
 .Grid-row--selected .Grid-cellGroup:hover {
-  background: color-mod(var(--primary-lighter) a(var(--opacity-48))) !important;
+  background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;
 }
 
 .Grid-row--selected:active,
@@ -164,7 +164,7 @@
 .Grid-row--selected:focus,
 .Grid-row--selected .Grid-cellGroup:focus {
   outline: none;
-  box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-16)));
+  box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));
 }
 
 .Grid-rowWrapper:last-child .Grid-row--body {
@@ -243,7 +243,7 @@
 } */
 
 .Grid-row--disabled {
-  opacity: var(--opacity-40);
+  opacity: var(--opacity-10);
   pointer-events: none;
 }
 
diff --git a/css/src/components/horizontalNav.css b/css/src/components/horizontalNav.css
@@ -81,5 +81,5 @@
 }
 
 .HorizontalNav-pills--disabled {
-  opacity: 0.6;
+  opacity: var(--opacity-10);
 }
diff --git a/css/src/components/listbox.css b/css/src/components/listbox.css
@@ -59,11 +59,11 @@
 }
 
 .Listbox-item--selected {
-  background: color-mod(var(--primary-lightest) a(var(--opacity-48)));
+  background: color-mod(var(--primary-lightest) a(var(--opacity-12)));
 }
 
 .Listbox-item--selected:hover {
-  background: color-mod(var(--primary-lighter) a(var(--opacity-48)));
+  background: color-mod(var(--primary-lighter) a(var(--opacity-12)));
 }
 
 .Listbox-item--selected:focus,
@@ -108,7 +108,7 @@
 /* Listbox type - disabled  */
 
 .Listbox-item--disabled {
-  opacity: var(--opacity-40);
+  opacity: var(--opacity-10);
   pointer-events: none;
 }
 
diff --git a/css/src/components/message.css b/css/src/components/message.css
@@ -11,22 +11,22 @@
 
 .Message--alert {
   border-color: var(--alert);
-  background-color: color-mod(var(--alert-lightest) a(0.4));
+  background-color: color-mod(var(--alert-lightest) a(var(--opacity-10)));
 }
 
 .Message--success {
   border-color: var(--success);
-  background-color: color-mod(var(--success-lightest) a(0.4));
+  background-color: color-mod(var(--success-lightest) a(var(--opacity-10)));
 }
 
 .Message--info {
   border-color: var(--primary);
-  background-color: color-mod(var(--primary-lightest) a(0.4));
+  background-color: color-mod(var(--primary-lightest) a(var(--opacity-10)));
 }
 
 .Message--warning {
   border-color: var(--accent1);
-  background-color: color-mod(var(--warning-lightest) a(0.4));
+  background-color: color-mod(var(--warning-lightest) a(var(--opacity-10)));
 }
 
 .Message-icon {
diff --git a/css/src/components/navigation.css b/css/src/components/navigation.css
@@ -102,7 +102,7 @@
 }
 
 .Navigation-horizontalPills--disabled {
-  opacity: 0.6;
+  opacity: var(--opacity-10);
 }
 
 .Navigation-footer {
diff --git a/css/src/components/popover.css b/css/src/components/popover.css
@@ -21,7 +21,7 @@
     opacity: 0;
   }
   80% {
-    opacity: 0.2;
+    opacity: var(--opacity-6);
   }
   100% {
     opacity: 1;
diff --git a/css/src/components/selectionCard.css b/css/src/components/selectionCard.css
@@ -67,25 +67,25 @@
 
 .Selection-card:active .Selection-card-overlay {
   background-color: var(--primary);
-  opacity: 10%;
+  opacity: var(--opacity-3);
 }
 
 .Selection-card--disabled .Selection-card-overlay {
   background-color: var(--secondary-lightest);
-  opacity: 50%;
+  opacity: var(--opacity-10);
 }
 
 .Selection-card--selected .Selection-card-overlay {
   background-color: var(--primary);
-  opacity: 4%;
+  opacity: var(--opacity-1);
 }
 
 .Selection-card--selected:active .Selection-card-overlay {
   background-color: var(--primary);
-  opacity: 4%;
+  opacity: var(--opacity-1);
 }
 
 .Selection-card--selected-disabled .Selection-card-overlay {
   background-color: var(--primary-lightest);
-  opacity: 50%;
+  opacity: var(--opacity-10);
 }
diff --git a/css/src/components/tabs.css b/css/src/components/tabs.css
@@ -120,7 +120,7 @@
 }
 
 .Tab-pills--disabled {
-  opacity: 60%;
+  opacity: var(--opacity-10);
   cursor: not-allowed;
 }
 
diff --git a/css/src/components/toast.css b/css/src/components/toast.css
@@ -71,7 +71,7 @@
 .Toast-close-icon--warning:focus,
 .Toast-close-icon--warning:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) color-mod(var(--warning-dark) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--warning-dark) a(var(--opacity-4)));
 }
 
 .Toast-close-icon--warning:hover,
@@ -82,7 +82,7 @@
 .Toast-close-icon--success:focus,
 .Toast-close-icon--success:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(var(--opacity-4)));
 }
 
 .Toast-close-icon--success:hover,
@@ -93,7 +93,7 @@
 .Toast-close-icon--info:focus,
 .Toast-close-icon--info:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(var(--opacity-4)));
 }
 
 .Toast-close-icon--info:hover,
@@ -104,7 +104,7 @@
 .Toast-close-icon--alert:focus,
 .Toast-close-icon--alert:focus-visible {
   outline: none;
-  box-shadow: var(--shadow-spread) color-mod(var(--alert-dark) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--alert-dark) a(var(--opacity-4)));
 }
 
 .Toast-close-icon--alert:hover,
@@ -160,7 +160,7 @@
 }
 
 .Toast-actionButton--default:focus {
-  box-shadow: var(--shadow-spread) color-mod(var(--inverse-lighter) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--inverse-lighter) a(var(--opacity-4)));
 }
 
 .Toast-actionButton--info {
@@ -173,7 +173,7 @@
 }
 
 .Toast-actionButton--info:focus {
-  box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--primary-dark) a(var(--opacity-4)));
 }
 
 .Toast-actionButton--success {
@@ -186,7 +186,7 @@
 }
 
 .Toast-actionButton--success:focus {
-  box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(0.16));
+  box-shadow: var(--shadow-spread) color-mod(var(--success-dark) a(var(--opacity-4)));
 }
 
 .Toast-actionButton--alert {
diff --git a/css/src/components/verticalNav.css b/css/src/components/verticalNav.css
@@ -124,6 +124,6 @@
 }
 
 .MenuItem-count--disabled {
-  opacity: 0.6;
+  opacity: var(--opacity-10);
   color: var(--text);
 }
diff --git a/css/src/variables/index.css b/css/src/variables/index.css
@@ -71,16 +71,16 @@
   --inverse-lightest: var(--night-lightest);
 
   /* shadow */
-  --primary-shadow: color-mod(var(--primary) a(0.16));
-  --secondary-shadow: color-mod(var(--secondary) a(0.16));
-  --success-shadow: color-mod(var(--success) a(0.16));
-  --alert-shadow: color-mod(var(--alert) a(0.16));
-  --warning-shadow: color-mod(var(--warning) a(0.16));
-  --accent1-shadow: color-mod(var(--accent1) a(0.16));
-  --accent2-shadow: color-mod(var(--accent2) a(0.16));
-  --accent3-shadow: color-mod(var(--accent3) a(0.16));
-  --accent4-shadow: color-mod(var(--accent4) a(0.16));
-  --inverse-shadow: color-mod(var(--inverse) a(0.16));
+  --primary-shadow: color-mod(var(--primary) a(var(--opacity-4)));
+  --secondary-shadow: color-mod(var(--secondary) a(var(--opacity-4)));
+  --success-shadow: color-mod(var(--success) a(var(--opacity-4)));
+  --alert-shadow: color-mod(var(--alert) a(var(--opacity-4)));
+  --warning-shadow: color-mod(var(--warning) a(var(--opacity-4)));
+  --accent1-shadow: color-mod(var(--accent1) a(var(--opacity-4)));
+  --accent2-shadow: color-mod(var(--accent2) a(var(--opacity-4)));
+  --accent3-shadow: color-mod(var(--accent3) a(var(--opacity-4)));
+  --accent4-shadow: color-mod(var(--accent4) a(var(--opacity-4)));
+  --inverse-shadow: color-mod(var(--inverse) a(var(--opacity-4)));
 
   /* Text colors */
   --text: var(--night);
@@ -205,17 +205,15 @@
   --duration--slow-01: 400ms;
   --duration--slow-02: 720ms;
 
-  /**** Opacity ****/
-  --opacity-0: 0;
-  --opacity-4: 0.04;
-  --opacity-8: 0.08;
-  --opacity-12: 0.12;
-  --opacity-16: 0.16;
-  --opacity-24: 0.24;
-  --opacity-32: 0.32;
-  --opacity-40: 0.4;
-  --opacity-48: 0.48;
-  --opacity-64: 0.64;
-  --opacity-80: 0.8;
-  --opacity-100: 1;
+  /* Opacity */
+  --opacity-1: 0.04;
+  --opacity-2: 0.08;
+  --opacity-3: 0.12;
+  --opacity-4: 0.16;
+  --opacity-6: 0.24;
+  --opacity-8: 0.32;
+  --opacity-10: 0.4;
+  --opacity-12: 0.48;
+  --opacity-16: 0.64;
+  --opacity-20: 0.8;
 }
diff --git a/docs/package.json b/docs/package.json
@@ -25,7 +25,7 @@
     "@fontsource/nunito": "^4.5.0",
     "@fontsource/nunito-sans": "^4.5.0",
     "@fontsource/roboto-mono": "^4.5.0",
-    "@innovaccer/design-system": "2.30.0",
+    "@innovaccer/design-system": "2.31.0",
     "@mdx-js/mdx": "^1.5.5",
     "@mdx-js/react": "^1.5.5",
     "@storybook/theming": "^6.3.6",
diff --git a/docs/src/components/PropsTable/prism.css b/docs/src/components/PropsTable/prism.css
@@ -90,7 +90,7 @@ pre[class*='language-'] {
 }
 
 .namespace {
-  opacity: 0.7;
+  opacity: var(--opacity-16);
 }
 
 .token.property,
diff --git a/docs/src/components/css/style.css b/docs/src/components/css/style.css
@@ -5,7 +5,7 @@
 
 @keyframes fadeInAnimation {
   0% {
-    opacity: 0.25;
+    opacity: var(--opacity-6);
     margin-top: 2px;
   }
   100% {
diff --git a/docs/src/data/components/overview.css b/docs/src/data/components/overview.css
@@ -1,5 +1,5 @@
 .card-opacity {
-  opacity: 0.6;
+  opacity: var(--opacity-10);
 }
 
 .overview-card:hover .card-opacity {
diff --git a/docs/src/pages/foundations/opacity/index.mdx b/docs/src/pages/foundations/opacity/index.mdx

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,6 @@`
`35`	`35`	`bottom: 0;`
`36`	`36`	`left: 0;`
`37`	`37`	`z-index: 2;`
`38`		`- opacity: 50%;`
	`38`	`+ opacity: var(--opacity-10);`
`39`	`39`	`background: var(--secondary-light);`
`40`	`40`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,21 +3,21 @@`
`3`	`3`	`opacity: 0;`
`4`	`4`	`}`
`5`	`5`	`to {`
`6`		`- opacity: 60;`
	`6`	`+ opacity: var(--opacity-16);`
`7`	`7`	`}`
`8`	`8`	`}`
`9`	`9`
`10`	`10`	`@keyframes backdrop-close {`
`11`	`11`	`from {`
`12`		`- opacity: 60;`
	`12`	`+ opacity: var(--opacity-16);`
`13`	`13`	`}`
`14`	`14`	`to {`
`15`	`15`	`opacity: 0;`
`16`	`16`	`}`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.Backdrop {`
`20`		`- background-color: color-mod(var(--inverse) a(0.6));`
	`20`	`+ background-color: color-mod(var(--inverse) a(var(--opacity-16)));`
`21`	`21`	`height: 100vh;`
`22`	`22`	`width: 100vw;`
`23`	`23`	`position: fixed;`
Original file line number	Diff line number	Diff line change
`@@ -4,14 +4,14 @@`
`4`	`4`	`transform: translateY(20px);`
`5`	`5`	`}`
`6`	`6`	`to {`
`7`		`- opacity: 100;`
	`7`	`+ opacity: 1;`
`8`	`8`	`transform: translateY(0px);`
`9`	`9`	`}`
`10`	`10`	`}`
`11`	`11`
`12`	`12`	`@keyframes fullscreenModal-close {`
`13`	`13`	`from {`
`14`		`- opacity: 100;`
	`14`	`+ opacity: 1;`
`15`	`15`	`transform: translateY(0px);`
`16`	`16`	`}`
`17`	`17`	`to {`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`.Grid--resource .Grid-row--body:focus {`
`31`		`- box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-16)));`
	`31`	`+ box-shadow: var(--shadow-spread) color-mod(var(--secondary) a(var(--opacity-4)));`
`32`	`32`	`outline: none;`
`33`	`33`	`}`
`34`	`34`
`@@ -147,13 +147,13 @@`
`147`	`147`
`148`	`148`	`.Grid-row--selected,`
`149`	`149`	`.Grid-row--selected .Grid-cellGroup {`
`150`		`- background: color-mod(var(--primary-lightest) a(var(--opacity-48)));`
	`150`	`+ background: color-mod(var(--primary-lightest) a(var(--opacity-12)));`
`151`	`151`	`transition: var(--duration--fast-02) var(--standard-productive-curve);`
`152`	`152`	`}`
`153`	`153`
`154`	`154`	`.Grid-row--selected:hover,`
`155`	`155`	`.Grid-row--selected .Grid-cellGroup:hover {`
`156`		`- background: color-mod(var(--primary-lighter) a(var(--opacity-48))) !important;`
	`156`	`+ background: color-mod(var(--primary-lighter) a(var(--opacity-12))) !important;`
`157`	`157`	`}`
`158`	`158`
`159`	`159`	`.Grid-row--selected:active,`
`@@ -164,7 +164,7 @@`
`164`	`164`	`.Grid-row--selected:focus,`
`165`	`165`	`.Grid-row--selected .Grid-cellGroup:focus {`
`166`	`166`	`outline: none;`
`167`		`- box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-16)));`
	`167`	`+ box-shadow: var(--shadow-spread) color-mod(var(--primary) a(var(--opacity-4)));`
`168`	`168`	`}`
`169`	`169`
`170`	`170`	`.Grid-rowWrapper:last-child .Grid-row--body {`
`@@ -243,7 +243,7 @@`
`243`	`243`	`} */`
`244`	`244`
`245`	`245`	`.Grid-row--disabled {`
`246`		`- opacity: var(--opacity-40);`
	`246`	`+ opacity: var(--opacity-10);`
`247`	`247`	`pointer-events: none;`
`248`	`248`	`}`
`249`	`249`
Original file line number	Diff line number	Diff line change
`@@ -81,5 +81,5 @@`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`.HorizontalNav-pills--disabled {`
`84`		`- opacity: 0.6;`
	`84`	`+ opacity: var(--opacity-10);`
`85`	`85`	`}`
Original file line number	Diff line number	Diff line change
`@@ -59,11 +59,11 @@`
`59`	`59`	`}`
`60`	`60`
`61`	`61`	`.Listbox-item--selected {`
`62`		`- background: color-mod(var(--primary-lightest) a(var(--opacity-48)));`
	`62`	`+ background: color-mod(var(--primary-lightest) a(var(--opacity-12)));`
`63`	`63`	`}`
`64`	`64`
`65`	`65`	`.Listbox-item--selected:hover {`
`66`		`- background: color-mod(var(--primary-lighter) a(var(--opacity-48)));`
	`66`	`+ background: color-mod(var(--primary-lighter) a(var(--opacity-12)));`
`67`	`67`	`}`
`68`	`68`
`69`	`69`	`.Listbox-item--selected:focus,`
`@@ -108,7 +108,7 @@`
`108`	`108`	`/* Listbox type - disabled */`
`109`	`109`
`110`	`110`	`.Listbox-item--disabled {`
`111`		`- opacity: var(--opacity-40);`
	`111`	`+ opacity: var(--opacity-10);`
`112`	`112`	`pointer-events: none;`
`113`	`113`	`}`
`114`	`114`
Original file line number	Diff line number	Diff line change
`@@ -11,22 +11,22 @@`
`11`	`11`
`12`	`12`	`.Message--alert {`
`13`	`13`	`border-color: var(--alert);`
`14`		`- background-color: color-mod(var(--alert-lightest) a(0.4));`
	`14`	`+ background-color: color-mod(var(--alert-lightest) a(var(--opacity-10)));`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.Message--success {`
`18`	`18`	`border-color: var(--success);`
`19`		`- background-color: color-mod(var(--success-lightest) a(0.4));`
	`19`	`+ background-color: color-mod(var(--success-lightest) a(var(--opacity-10)));`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`.Message--info {`
`23`	`23`	`border-color: var(--primary);`
`24`		`- background-color: color-mod(var(--primary-lightest) a(0.4));`
	`24`	`+ background-color: color-mod(var(--primary-lightest) a(var(--opacity-10)));`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`.Message--warning {`
`28`	`28`	`border-color: var(--accent1);`
`29`		`- background-color: color-mod(var(--warning-lightest) a(0.4));`
	`29`	`+ background-color: color-mod(var(--warning-lightest) a(var(--opacity-10)));`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`.Message-icon {`
Original file line number	Diff line number	Diff line change
`@@ -102,7 +102,7 @@`
`102`	`102`	`}`
`103`	`103`
`104`	`104`	`.Navigation-horizontalPills--disabled {`
`105`		`- opacity: 0.6;`
	`105`	`+ opacity: var(--opacity-10);`
`106`	`106`	`}`
`107`	`107`
`108`	`108`	`.Navigation-footer {`
Original file line number	Diff line number	Diff line change
`@@ -21,7 +21,7 @@`
`21`	`21`	`opacity: 0;`
`22`	`22`	`}`
`23`	`23`	`80% {`
`24`		`- opacity: 0.2;`
	`24`	`+ opacity: var(--opacity-6);`
`25`	`25`	`}`
`26`	`26`	`100% {`
`27`	`27`	`opacity: 1;`