feat(PPDSC-2095): add opacity tokens and gradients to the theme (#202)

* feat(PPDSC-2095): add opacity tokens and gradients to the theme * feat(PPDSC-2095): updated transition-presets with opacity tokens
newscorp-ghfb · May 19, 2022 · 742e934 · 742e934
1 parent 218ff00
commit 742e934
Show file tree

Hide file tree

Showing 8 changed files with 414 additions and 187 deletions.
diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap
diff --git a/src/theme/__tests__/__snapshots__/creator.test.ts.snap b/src/theme/__tests__/__snapshots__/creator.test.ts.snap
@@ -279,10 +279,29 @@ Object {
   },
   "name": "default-theme",
   "overlays": Object {
+    "opacity000": "0",
+    "opacity010": "0.1",
+    "opacity020": "0.2",
+    "opacity030": "0.3",
+    "opacity040": "0.4",
+    "opacity050": "0.5",
+    "opacity060": "0.6",
+    "opacity070": "0.7",
+    "opacity080": "0.8",
+    "opacity090": "0.9",
+    "opacity100": "1",
     "overlayGradientBaseHorizontal": "linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",
     "overlayGradientBaseVertical": "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",
+    "overlayGradientFromBottom": "linear-gradient(180deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromBottomLeft": "linear-gradient(225deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromBottomRight": "linear-gradient(135deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromLeft": "linear-gradient(-90deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromRight": "linear-gradient(90deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromTop": "linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,0.99) 100%)",
+    "overlayGradientFromTopLeft": "linear-gradient(-45deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 99.25%)",
+    "overlayGradientFromTopRight": "linear-gradient(45deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
     "overlayGradientInverseHorizontal": "linear-gradient(270deg, rgba(10,10,10,0) 0%, rgba(10,10,10,1) 100%)",
-    "overlayGradientInverseVertical": "linear-gradient(0deg, rgba(10,10,10,0) 0%, gba(10,10,10,1) 100%)",
+    "overlayGradientInverseVertical": "linear-gradient(0deg, rgba(10,10,10,0) 0%, rgba(10,10,10,1) 100%)",
     "overlayTintBase010": "{{colors.blackTint020}}",
     "overlayTintBase020": "{{colors.blackTint040}}",
     "overlayTintBase030": "{{colors.blackTint060}}",
@@ -374,32 +393,32 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInput040}}",
         "borderRadius": "{{borders.borderRadiusCircle}}",
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
       "disabled": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
       "hover": Object {
-        "opacity": "0.2",
+        "opacity": "{{overlays.opacity020}}",
       },
       "hover:active": Object {
-        "opacity": "0.4",
+        "opacity": "{{overlays.opacity040}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveNegative040}}",
-        "opacity": "0.2",
+        "opacity": "{{overlays.opacity020}}",
       },
       "invalid:hover:active": Object {
         "backgroundColor": "{{colors.interactiveNegative040}}",
-        "opacity": "0.4",
+        "opacity": "{{overlays.opacity040}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactivePositive040}}",
-        "opacity": "0.2",
+        "opacity": "{{overlays.opacity020}}",
       },
       "valid:hover:active": Object {
         "backgroundColor": "{{colors.interactivePositive040}}",
-        "opacity": "0.4",
+        "opacity": "{{overlays.opacity040}}",
       },
     },
     "inputField": Object {
@@ -471,29 +490,29 @@ Object {
     },
     "fade": Object {
       "base": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
       "enter": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
       "enterActive": Object {
-        "opacity": "1",
+        "opacity": "{{overlays.opacity100}}",
         "transitionDuration": "{{motions.motionDuration020}}",
         "transitionProperty": "opacity",
       },
       "enterDone": Object {
-        "opacity": "1",
+        "opacity": "{{overlays.opacity100}}",
       },
       "exit": Object {
-        "opacity": "1",
+        "opacity": "{{overlays.opacity100}}",
       },
       "exitActive": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
         "transitionDuration": "{{motions.motionDuration020}}",
         "transitionProperty": "opacity",
       },
       "exitDone": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
     },
     "fontColorChange": Object {

diff --git a/src/theme/__tests__/__snapshots__/theme.test.ts.snap b/src/theme/__tests__/__snapshots__/theme.test.ts.snap
@@ -290,11 +290,30 @@ Object {
   },
   "name": "newskit-dark",
   "overlays": Object {
+    "opacity000": "0",
+    "opacity010": "0.1",
+    "opacity020": "0.2",
+    "opacity030": "0.3",
+    "opacity040": "0.4",
+    "opacity050": "0.5",
+    "opacity060": "0.6",
+    "opacity070": "0.7",
+    "opacity080": "0.8",
+    "opacity090": "0.9",
+    "opacity100": "1",
     "overlayDarkGradient010": "linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, #0A0A0A 100%)",
     "overlayGradientBaseHorizontal": "linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",
     "overlayGradientBaseVertical": "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",
+    "overlayGradientFromBottom": "linear-gradient(180deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromBottomLeft": "linear-gradient(225deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromBottomRight": "linear-gradient(135deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromLeft": "linear-gradient(-90deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromRight": "linear-gradient(90deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromTop": "linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,0.99) 100%)",
+    "overlayGradientFromTopLeft": "linear-gradient(-45deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 99.25%)",
+    "overlayGradientFromTopRight": "linear-gradient(45deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
     "overlayGradientInverseHorizontal": "linear-gradient(270deg, rgba(10,10,10,0) 0%, rgba(10,10,10,1) 100%)",
-    "overlayGradientInverseVertical": "linear-gradient(0deg, rgba(10,10,10,0) 0%, gba(10,10,10,1) 100%)",
+    "overlayGradientInverseVertical": "linear-gradient(0deg, rgba(10,10,10,0) 0%, rgba(10,10,10,1) 100%)",
     "overlayLightGradient010": "linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%)",
     "overlayTintBase010": "{{colors.blackTint020}}",
     "overlayTintBase020": "{{colors.blackTint040}}",
@@ -387,32 +406,32 @@ Object {
       "base": Object {
         "backgroundColor": "{{colors.interactiveInput040}}",
         "borderRadius": "{{borders.borderRadiusCircle}}",
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
       "disabled": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
       "hover": Object {
-        "opacity": "0.2",
+        "opacity": "{{overlays.opacity020}}",
       },
       "hover:active": Object {
-        "opacity": "0.4",
+        "opacity": "{{overlays.opacity040}}",
       },
       "invalid:hover": Object {
         "backgroundColor": "{{colors.interactiveNegative040}}",
-        "opacity": "0.2",
+        "opacity": "{{overlays.opacity020}}",
       },
       "invalid:hover:active": Object {
         "backgroundColor": "{{colors.interactiveNegative040}}",
-        "opacity": "0.4",
+        "opacity": "{{overlays.opacity040}}",
       },
       "valid:hover": Object {
         "backgroundColor": "{{colors.interactivePositive040}}",
-        "opacity": "0.2",
+        "opacity": "{{overlays.opacity020}}",
       },
       "valid:hover:active": Object {
         "backgroundColor": "{{colors.interactivePositive040}}",
-        "opacity": "0.4",
+        "opacity": "{{overlays.opacity040}}",
       },
     },
     "inputField": Object {
@@ -484,29 +503,29 @@ Object {
     },
     "fade": Object {
       "base": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
       "enter": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
       "enterActive": Object {
-        "opacity": "1",
+        "opacity": "{{overlays.opacity100}}",
         "transitionDuration": "{{motions.motionDuration020}}",
         "transitionProperty": "opacity",
       },
       "enterDone": Object {
-        "opacity": "1",
+        "opacity": "{{overlays.opacity100}}",
       },
       "exit": Object {
-        "opacity": "1",
+        "opacity": "{{overlays.opacity100}}",
       },
       "exitActive": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
         "transitionDuration": "{{motions.motionDuration020}}",
         "transitionProperty": "opacity",
       },
       "exitDone": Object {
-        "opacity": "0",
+        "opacity": "{{overlays.opacity000}}",
       },
     },
     "fontColorChange": Object {
@@ -3186,32 +3205,32 @@ Object {
     "base": Object {
       "backgroundColor": "{{colors.interactiveInput040}}",
       "borderRadius": "{{borders.borderRadiusCircle}}",
-      "opacity": "0",
+      "opacity": "{{overlays.opacity000}}",
     },
     "disabled": Object {
-      "opacity": "0",
+      "opacity": "{{overlays.opacity000}}",
     },
     "hover": Object {
-      "opacity": "0.2",
+      "opacity": "{{overlays.opacity020}}",
     },
     "hover:active": Object {
-      "opacity": "0.4",
+      "opacity": "{{overlays.opacity040}}",
     },
     "invalid:hover": Object {
       "backgroundColor": "{{colors.interactiveNegative040}}",
-      "opacity": "0.2",
+      "opacity": "{{overlays.opacity020}}",
     },
     "invalid:hover:active": Object {
       "backgroundColor": "{{colors.interactiveNegative040}}",
-      "opacity": "0.4",
+      "opacity": "{{overlays.opacity040}}",
     },
     "valid:hover": Object {
       "backgroundColor": "{{colors.interactivePositive040}}",
-      "opacity": "0.2",
+      "opacity": "{{overlays.opacity020}}",
     },
     "valid:hover:active": Object {
       "backgroundColor": "{{colors.interactivePositive040}}",
-      "opacity": "0.4",
+      "opacity": "{{overlays.opacity040}}",
     },
   },
   "flagMinimalInformative": Object {

diff --git a/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap b/src/theme/compiler/__tests__/__snapshots__/index.test.ts.snap
@@ -280,10 +280,29 @@ Object {
   },
   "name": "my theme",
   "overlays": Object {
+    "opacity000": "0",
+    "opacity010": "0.1",
+    "opacity020": "0.2",
+    "opacity030": "0.3",
+    "opacity040": "0.4",
+    "opacity050": "0.5",
+    "opacity060": "0.6",
+    "opacity070": "0.7",
+    "opacity080": "0.8",
+    "opacity090": "0.9",
+    "opacity100": "1",
     "overlayGradientBaseHorizontal": "linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",
     "overlayGradientBaseVertical": "linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",
+    "overlayGradientFromBottom": "linear-gradient(180deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromBottomLeft": "linear-gradient(225deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromBottomRight": "linear-gradient(135deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromLeft": "linear-gradient(-90deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromRight": "linear-gradient(90deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
+    "overlayGradientFromTop": "linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,0.99) 100%)",
+    "overlayGradientFromTopLeft": "linear-gradient(-45deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 99.25%)",
+    "overlayGradientFromTopRight": "linear-gradient(45deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)",
     "overlayGradientInverseHorizontal": "linear-gradient(270deg, rgba(10,10,10,0) 0%, rgba(10,10,10,1) 100%)",
-    "overlayGradientInverseVertical": "linear-gradient(0deg, rgba(10,10,10,0) 0%, gba(10,10,10,1) 100%)",
+    "overlayGradientInverseVertical": "linear-gradient(0deg, rgba(10,10,10,0) 0%, rgba(10,10,10,1) 100%)",
     "overlayTintBase010": "rgba(10,10,10,0.2)",
     "overlayTintBase020": "rgba(10,10,10,0.4)",
     "overlayTintBase030": "rgba(10,10,10,0.6)",

diff --git a/src/theme/foundations/overlays.ts b/src/theme/foundations/overlays.ts
@@ -1,13 +1,29 @@
 export const overlays = {
   overlayGradientInverseVertical:
-    'linear-gradient(0deg, rgba(10,10,10,0) 0%, gba(10,10,10,1) 100%)',
+    'linear-gradient(0deg, rgba(10,10,10,0) 0%, rgba(10,10,10,1) 100%)',
   overlayGradientBaseVertical:
     'linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)',
 
   overlayGradientInverseHorizontal:
     'linear-gradient(270deg, rgba(10,10,10,0) 0%, rgba(10,10,10,1) 100%)',
   overlayGradientBaseHorizontal:
     'linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)',
+  overlayGradientFromBottom:
+    'linear-gradient(180deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)',
+  overlayGradientFromBottomLeft:
+    'linear-gradient(225deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)',
+  overlayGradientFromBottomRight:
+    'linear-gradient(135deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)',
+  overlayGradientFromLeft:
+    'linear-gradient(-90deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)',
+  overlayGradientFromRight:
+    'linear-gradient(90deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)',
+  overlayGradientFromTop:
+    'linear-gradient(0deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,0.99) 100%)',
+  overlayGradientFromTopLeft:
+    'linear-gradient(-45deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 99.25%)',
+  overlayGradientFromTopRight:
+    'linear-gradient(45deg, rgba(10,10,10,0.00) 0%, rgba(10,10,10,1.00) 100%)',
 
   overlayTintInverse010: '{{colors.whiteTint020}}',
   overlayTintInverse020: '{{colors.whiteTint040}}',
@@ -18,4 +34,16 @@ export const overlays = {
   overlayTintBase020: '{{colors.blackTint040}}',
   overlayTintBase030: '{{colors.blackTint060}}',
   overlayTintBase040: '{{colors.blackTint080}}',
+
+  opacity000: '0',
+  opacity010: '0.1',
+  opacity020: '0.2',
+  opacity030: '0.3',
+  opacity040: '0.4',
+  opacity050: '0.5',
+  opacity060: '0.6',
+  opacity070: '0.7',
+  opacity080: '0.8',
+  opacity090: '0.9',
+  opacity100: '1',
 };
diff --git a/src/theme/presets/__tests__/style-presets.test.ts b/src/theme/presets/__tests__/style-presets.test.ts
@@ -10,16 +10,6 @@ describe('style presets should', () => {
       'uppercase',
       'center',
       'nowrap',
-      /*
-        TODO: The following values are temporary workarounds because
-        currently we don't have opacity tokens ready.
-        We can remove these after we introduce the opacity tokens
-        Here is the ticket for that:
-        https://nidigitalsolutions.jira.com/browse/PPDSC-2095
-      */
-      '0',
-      '0.2',
-      '0.4',
     ].join('|');
     const validAttributes = new RegExp(`({{[a-zA-Z.0-9]+}}|${allowedList})`);
 

diff --git a/src/theme/presets/style-presets.ts b/src/theme/presets/style-presets.ts
@@ -70,31 +70,31 @@ stylePresets.feedback = {
   base: {
     backgroundColor: '{{colors.interactiveInput040}}',
     borderRadius: '{{borders.borderRadiusCircle}}',
-    opacity: '0',
+    opacity: '{{overlays.opacity000}}',
   },
   hover: {
-    opacity: '0.2',
+    opacity: '{{overlays.opacity020}}',
   },
   disabled: {
-    opacity: '0',
+    opacity: '{{overlays.opacity000}}',
   },
   'hover:active': {
-    opacity: '0.4',
+    opacity: '{{overlays.opacity040}}',
   },
   'valid:hover': {
     backgroundColor: '{{colors.interactivePositive040}}',
-    opacity: '0.2',
+    opacity: '{{overlays.opacity020}}',
   },
   'valid:hover:active': {
     backgroundColor: '{{colors.interactivePositive040}}',
-    opacity: '0.4',
+    opacity: '{{overlays.opacity040}}',
   },
   'invalid:hover': {
     backgroundColor: '{{colors.interactiveNegative040}}',
-    opacity: '0.2',
+    opacity: '{{overlays.opacity020}}',
   },
   'invalid:hover:active': {
     backgroundColor: '{{colors.interactiveNegative040}}',
-    opacity: '0.4',
+    opacity: '{{overlays.opacity040}}',
   },
 };