From 742e934cb23405efed452f5f06cfca8352950d66 Mon Sep 17 00:00:00 2001 From: Evgeni Nikolov Date: Thu, 19 May 2022 11:13:36 +0300 Subject: [PATCH] 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 --- .../__snapshots__/doc-theme.test.ts.snap | 392 ++++++++++++------ .../__snapshots__/creator.test.ts.snap | 51 ++- .../__snapshots__/theme.test.ts.snap | 67 +-- .../__snapshots__/index.test.ts.snap | 21 +- src/theme/foundations/overlays.ts | 30 +- .../presets/__tests__/style-presets.test.ts | 10 - src/theme/presets/style-presets.ts | 16 +- src/theme/presets/transition-presets.ts | 14 +- 8 files changed, 414 insertions(+), 187 deletions(-) diff --git a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap index bb0f8aa6eb..ff1e2ae494 100644 --- a/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap +++ b/site/theme/__tests__/__snapshots__/doc-theme.test.ts.snap @@ -599,8 +599,27 @@ Object { }, "name": "docs-accessibility-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", "overlayGradientBaseHorizontal": "linear-gradient(270deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)", "overlayGradientBaseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)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(-90deg, rgba(22,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", "overlayTintBase010": "rgba(22,39,64,0.2)", @@ -1005,32 +1024,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}}", }, }, "flagBrand": Object { @@ -1577,29 +1596,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 { @@ -2770,8 +2789,27 @@ Object { }, "name": "docs-accessibility-light", "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(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)", "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)100%)", "overlayTintBase010": "rgba(22,39,64,0.2)", @@ -3176,32 +3214,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}}", }, }, "flagBrand": Object { @@ -3748,29 +3786,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 { @@ -4941,8 +4979,27 @@ Object { }, "name": "docs-theme-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", "overlayGradientBaseHorizontal": "linear-gradient(270deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)", "overlayGradientBaseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)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(-90deg, rgba(22,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", "overlayTintBase010": "rgba(22,39,64,0.2)", @@ -5347,32 +5404,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}}", }, }, "flagBrand": Object { @@ -5919,29 +5976,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 { @@ -7112,8 +7169,27 @@ Object { }, "name": "docs-theme-light", "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(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)", "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)100%)", "overlayTintBase010": "rgba(22,39,64,0.2)", @@ -7518,32 +7594,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}}", }, }, "flagBrand": Object { @@ -8090,29 +8166,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 { @@ -9283,8 +9359,27 @@ Object { }, "name": "docs-foundations-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", "overlayGradientBaseHorizontal": "linear-gradient(270deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)", "overlayGradientBaseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)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(-90deg, rgba(22,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", "overlayTintBase010": "rgba(22,39,64,0.2)", @@ -9689,32 +9784,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}}", }, }, "flagBrand": Object { @@ -10261,29 +10356,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 { @@ -11454,8 +11549,27 @@ Object { }, "name": "docs-foundations-light", "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(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)", "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)100%)", "overlayTintBase010": "rgba(22,39,64,0.2)", @@ -11860,32 +11974,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}}", }, }, "flagBrand": Object { @@ -12432,29 +12546,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 { @@ -13625,8 +13739,27 @@ Object { }, "name": "docs-patterns-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", "overlayGradientBaseHorizontal": "linear-gradient(270deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)", "overlayGradientBaseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)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(-90deg, rgba(22,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(255,255,255,0.00) 0%,rgba(255,255,255,1.00) 100%)", "overlayTintBase010": "rgba(22,39,64,0.2)", @@ -14031,32 +14164,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}}", }, }, "flagBrand": Object { @@ -14603,29 +14736,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 { @@ -15796,8 +15929,27 @@ Object { }, "name": "docs-patterns-light", "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(22,39,64,0.00) 0%,rgba(22,39,64,1.00) 100%)", "overlayGradientInverseVertical": "linear-gradient(180deg, rgba(22,39,64,0.00) 0%,rgba(22,39,64,1.00)100%)", "overlayTintBase010": "rgba(22,39,64,0.2)", @@ -16202,32 +16354,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}}", }, }, "flagBrand": Object { @@ -16774,29 +16926,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__/creator.test.ts.snap b/src/theme/__tests__/__snapshots__/creator.test.ts.snap index a768a310a1..a81b0879dd 100644 --- 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 index 5920ed5af8..b210683750 100644 --- 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 index ff10802a8f..13657bde7d 100644 --- 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 index 0f246eb539..ed52f1fb0f 100644 --- a/src/theme/foundations/overlays.ts +++ b/src/theme/foundations/overlays.ts @@ -1,6 +1,6 @@ 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%)', @@ -8,6 +8,22 @@ export const overlays = { '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 index 8ab1171905..208eff342d 100644 --- 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 index 26c60f8f54..aec15ac4dc 100644 --- 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}}', }, }; diff --git a/src/theme/presets/transition-presets.ts b/src/theme/presets/transition-presets.ts index 9213bb9b58..e915a709be 100644 --- a/src/theme/presets/transition-presets.ts +++ b/src/theme/presets/transition-presets.ts @@ -44,29 +44,29 @@ transitionPresets.opacityChange = { transitionPresets.fade = { base: { - opacity: '0', + opacity: '{{overlays.opacity000}}', }, enter: { - opacity: '0', + opacity: '{{overlays.opacity000}}', }, enterActive: { - opacity: '1', + opacity: '{{overlays.opacity100}}', transitionProperty: 'opacity', transitionDuration: '{{motions.motionDuration020}}', }, enterDone: { - opacity: '1', + opacity: '{{overlays.opacity100}}', }, exit: { - opacity: '1', + opacity: '{{overlays.opacity100}}', }, exitActive: { - opacity: '0', + opacity: '{{overlays.opacity000}}', transitionProperty: 'opacity', transitionDuration: '{{motions.motionDuration020}}', }, exitDone: { - opacity: '0', + opacity: '{{overlays.opacity000}}', }, };