From ef222d002e477239f953ea90312024db7d217e9b Mon Sep 17 00:00:00 2001 From: Marco Vidal Garcia Date: Fri, 2 Aug 2024 16:25:45 +0200 Subject: [PATCH] feat(tokens): add new elevation tokens and deprecate others - New tokens: level1, level2, level3, level3-reverse, level4 - Deprecated tokens: action, action-active, raised, raised-reverse, overlay --- .../output/deprecated-tokens.json | 50 ++++ .../output/docs-tokens.json | 274 ++++++++++++++++-- .../orbit-design-tokens/output/tokens.css | 10 + .../orbit-design-tokens/output/tokens.less | 10 + .../orbit-design-tokens/output/tokens.scss | 14 + .../orbit-design-tokens/output/tokens.styl | 10 + .../orbit-design-tokens/output/tokens.xml | 40 +++ .../__snapshots__/index.test.ts.snap | 10 + .../definitions/global/elevations.json | 190 ++++++++++++ .../src/js/createTokens.ts | 75 +++++ 10 files changed, 666 insertions(+), 17 deletions(-) diff --git a/packages/orbit-design-tokens/output/deprecated-tokens.json b/packages/orbit-design-tokens/output/deprecated-tokens.json index 3b219ac52d..1a05e96828 100644 --- a/packages/orbit-design-tokens/output/deprecated-tokens.json +++ b/packages/orbit-design-tokens/output/deprecated-tokens.json @@ -1947,6 +1947,56 @@ "category": "Breakpoints", "version": "6.0.0" }, + "elevationActionBackground": { + "replacement": "paletteWhiteNormal", + "category": "Colors", + "version": "9.0.0" + }, + "elevationActionBoxShadow": { + "replacement": "elevationLevel1BoxShadow", + "category": "Box shadow", + "version": "9.0.0" + }, + "elevationActionActiveBackground": { + "replacement": "paletteWhiteNormal", + "category": "Colors", + "version": "9.0.0" + }, + "elevationActionActiveBoxShadow": { + "replacement": "elevationLevel2BoxShadow", + "category": "Box shadow", + "version": "9.0.0" + }, + "elevationRaisedBackground": { + "replacement": "paletteWhiteNormal", + "category": "Colors", + "version": "9.0.0" + }, + "elevationRaisedBoxShadow": { + "replacement": "elevationLevel3BoxShadow", + "category": "Box shadow", + "version": "9.0.0" + }, + "elevationRaisedReverseBackground": { + "replacement": "paletteWhiteNormal", + "category": "Colors", + "version": "9.0.0" + }, + "elevationRaisedReverseBoxShadow": { + "replacement": "elevationLevel3ReverseBoxShadow", + "category": "Box shadow", + "version": "9.0.0" + }, + "elevationOverlayBackground": { + "replacement": "paletteWhiteNormal", + "category": "Colors", + "version": "9.0.0" + }, + "elevationOverlayBoxShadow": { + "replacement": "elevationLevel4BoxShadow", + "category": "Box shadow", + "version": "9.0.0" + }, "backgroundBody": { "replacement": "elevationSuppressedBackground", "category": "Background colors", diff --git a/packages/orbit-design-tokens/output/docs-tokens.json b/packages/orbit-design-tokens/output/docs-tokens.json index 9280bd2544..b888197e5a 100644 --- a/packages/orbit-design-tokens/output/docs-tokens.json +++ b/packages/orbit-design-tokens/output/docs-tokens.json @@ -16543,8 +16543,8 @@ "elevationActionBackground": { "type": "color", "category": "elevation", - "deprecated": false, - "replacement": null, + "deprecated": true, + "replacement": "paletteWhiteNormal", "schema": { "namespace": "global", "object": "elevation", @@ -16567,8 +16567,8 @@ "elevationActionBoxShadow": { "type": "box-shadow", "category": "elevation", - "deprecated": false, - "replacement": null, + "deprecated": true, + "replacement": "elevationLevel1BoxShadow", "schema": { "namespace": "global", "object": "elevation", @@ -16588,11 +16588,59 @@ "value": "0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12)" } }, - "elevationActionActiveBackground": { + "elevationLevel1Background": { "type": "color", "category": "elevation", "deprecated": false, "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level1", + "subVariant": "background" + }, + "javascript": { + "name": "elevationLevel1Background", + "value": "#FFFFFF" + }, + "foundation": { + "name": "elevationLevel1Background", + "value": "foundation.palette.white.normal" + }, + "scss": { + "name": "elevationLevel1Background", + "value": "rgb(255, 255, 255)" + } + }, + "elevationLevel1BoxShadow": { + "type": "box-shadow", + "category": "elevation", + "deprecated": false, + "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level1", + "subVariant": "box-shadow" + }, + "javascript": { + "name": "elevationLevel1BoxShadow", + "value": "0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12)" + }, + "foundation": { + "name": "elevationLevel1BoxShadow", + "value": "0 0 2px 0 color(#252A31, opacity: 16), 0 1px 4px 0 color(#252A31, opacity: 12)" + }, + "scss": { + "name": "elevationLevel1BoxShadow", + "value": "0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12)" + } + }, + "elevationActionActiveBackground": { + "type": "color", + "category": "elevation", + "deprecated": true, + "replacement": "paletteWhiteNormal", "schema": { "namespace": "global", "object": "elevation", @@ -16615,8 +16663,8 @@ "elevationActionActiveBoxShadow": { "type": "box-shadow", "category": "elevation", - "deprecated": false, - "replacement": null, + "deprecated": true, + "replacement": "elevationLevel2BoxShadow", "schema": { "namespace": "global", "object": "elevation", @@ -16636,6 +16684,54 @@ "value": "0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12)" } }, + "elevationLevel2Background": { + "type": "color", + "category": "elevation", + "deprecated": false, + "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level2", + "subVariant": "background" + }, + "javascript": { + "name": "elevationLevel2Background", + "value": "#FFFFFF" + }, + "foundation": { + "name": "elevationLevel2Background", + "value": "foundation.palette.white.normal" + }, + "scss": { + "name": "elevationLevel2Background", + "value": "rgb(255, 255, 255)" + } + }, + "elevationLevel2BoxShadow": { + "type": "box-shadow", + "category": "elevation", + "deprecated": false, + "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level2", + "subVariant": "box-shadow" + }, + "javascript": { + "name": "elevationLevel2BoxShadow", + "value": "0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12)" + }, + "foundation": { + "name": "elevationLevel2BoxShadow", + "value": "0 1px 4px 0 color(#252A31, opacity: 16), 0 4px 8px 0 color(#252A31, opacity: 12)" + }, + "scss": { + "name": "elevationLevel2BoxShadow", + "value": "0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12)" + } + }, "elevationFixedBackground": { "type": "color", "category": "elevation", @@ -16735,8 +16831,8 @@ "elevationRaisedBackground": { "type": "color", "category": "elevation", - "deprecated": false, - "replacement": null, + "deprecated": true, + "replacement": "paletteWhiteNormal", "schema": { "namespace": "global", "object": "elevation", @@ -16759,8 +16855,8 @@ "elevationRaisedBoxShadow": { "type": "box-shadow", "category": "elevation", - "deprecated": false, - "replacement": null, + "deprecated": true, + "replacement": "elevationLevel3BoxShadow", "schema": { "namespace": "global", "object": "elevation", @@ -16780,11 +16876,59 @@ "value": "0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24)" } }, - "elevationRaisedReverseBackground": { + "elevationLevel3Background": { "type": "color", "category": "elevation", "deprecated": false, "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level3", + "subVariant": "background" + }, + "javascript": { + "name": "elevationLevel3Background", + "value": "#FFFFFF" + }, + "foundation": { + "name": "elevationLevel3Background", + "value": "foundation.palette.white.normal" + }, + "scss": { + "name": "elevationLevel3Background", + "value": "rgb(255, 255, 255)" + } + }, + "elevationLevel3BoxShadow": { + "type": "box-shadow", + "category": "elevation", + "deprecated": false, + "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level3", + "subVariant": "box-shadow" + }, + "javascript": { + "name": "elevationLevel3BoxShadow", + "value": "0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24)" + }, + "foundation": { + "name": "elevationLevel3BoxShadow", + "value": "0 4px 8px 0 color(#252A31, opacity: 16), 0 8px 24px 0 color(#252A31, opacity: 24)" + }, + "scss": { + "name": "elevationLevel3BoxShadow", + "value": "0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24)" + } + }, + "elevationRaisedReverseBackground": { + "type": "color", + "category": "elevation", + "deprecated": true, + "replacement": "paletteWhiteNormal", "schema": { "namespace": "global", "object": "elevation", @@ -16807,8 +16951,8 @@ "elevationRaisedReverseBoxShadow": { "type": "box-shadow", "category": "elevation", - "deprecated": false, - "replacement": null, + "deprecated": true, + "replacement": "elevationLevel3ReverseBoxShadow", "schema": { "namespace": "global", "object": "elevation", @@ -16828,11 +16972,59 @@ "value": "0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24)" } }, - "elevationOverlayBackground": { + "elevationLevel3ReverseBackground": { "type": "color", "category": "elevation", "deprecated": false, "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level3-reverse", + "subVariant": "background" + }, + "javascript": { + "name": "elevationLevel3ReverseBackground", + "value": "#FFFFFF" + }, + "foundation": { + "name": "elevationLevel3ReverseBackground", + "value": "foundation.palette.white.normal" + }, + "scss": { + "name": "elevationLevel3ReverseBackground", + "value": "rgb(255, 255, 255)" + } + }, + "elevationLevel3ReverseBoxShadow": { + "type": "box-shadow", + "category": "elevation", + "deprecated": false, + "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level3-reverse", + "subVariant": "box-shadow" + }, + "javascript": { + "name": "elevationLevel3ReverseBoxShadow", + "value": "0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24)" + }, + "foundation": { + "name": "elevationLevel3ReverseBoxShadow", + "value": "0 -4px 8px 0 color(#252A31, opacity: 16), 0 -8px 24px 0 color(#252A31, opacity: 24)" + }, + "scss": { + "name": "elevationLevel3ReverseBoxShadow", + "value": "0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24)" + } + }, + "elevationOverlayBackground": { + "type": "color", + "category": "elevation", + "deprecated": true, + "replacement": "paletteWhiteNormal", "schema": { "namespace": "global", "object": "elevation", @@ -16855,8 +17047,8 @@ "elevationOverlayBoxShadow": { "type": "box-shadow", "category": "elevation", - "deprecated": false, - "replacement": null, + "deprecated": true, + "replacement": "elevationLevel4BoxShadow", "schema": { "namespace": "global", "object": "elevation", @@ -16876,6 +17068,54 @@ "value": "0 12px 24px -4px rgba(37, 42, 49, 0.24), 0 8px 60px 0 rgba(37, 42, 49, 0.32)" } }, + "elevationLevel4Background": { + "type": "color", + "category": "elevation", + "deprecated": false, + "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level4", + "subVariant": "background" + }, + "javascript": { + "name": "elevationLevel4Background", + "value": "#FFFFFF" + }, + "foundation": { + "name": "elevationLevel4Background", + "value": "foundation.palette.white.normal" + }, + "scss": { + "name": "elevationLevel4Background", + "value": "rgb(255, 255, 255)" + } + }, + "elevationLevel4BoxShadow": { + "type": "box-shadow", + "category": "elevation", + "deprecated": false, + "replacement": null, + "schema": { + "namespace": "global", + "object": "elevation", + "variant": "level4", + "subVariant": "box-shadow" + }, + "javascript": { + "name": "elevationLevel4BoxShadow", + "value": "0 12px 24px -4px rgba(37, 42, 49, 0.24), 0 8px 60px 0 rgba(37, 42, 49, 0.32)" + }, + "foundation": { + "name": "elevationLevel4BoxShadow", + "value": "0 12px 24px -4px color(#252A31, opacity: 24), 0 8px 60px 0 color(#252A31, opacity: 32)" + }, + "scss": { + "name": "elevationLevel4BoxShadow", + "value": "0 12px 24px -4px rgba(37, 42, 49, 0.24), 0 8px 60px 0 rgba(37, 42, 49, 0.32)" + } + }, "backgroundBody": { "type": "color", "deprecated": true, diff --git a/packages/orbit-design-tokens/output/tokens.css b/packages/orbit-design-tokens/output/tokens.css index c16a5dcb82..9b9d5916ca 100644 --- a/packages/orbit-design-tokens/output/tokens.css +++ b/packages/orbit-design-tokens/output/tokens.css @@ -719,18 +719,28 @@ --elevation-flat-border-size: 1; --elevation-action-background: rgb(255, 255, 255); --elevation-action-box-shadow: rgb(37, 42, 49); + --elevation-level-1-background: rgb(255, 255, 255); + --elevation-level-1-box-shadow: rgb(37, 42, 49); --elevation-action-active-background: rgb(255, 255, 255); --elevation-action-active-box-shadow: rgb(37, 42, 49); + --elevation-level-2-background: rgb(255, 255, 255); + --elevation-level-2-box-shadow: rgb(37, 42, 49); --elevation-fixed-background: rgb(255, 255, 255); --elevation-fixed-box-shadow: rgb(37, 42, 49); --elevation-fixed-reverse-background: rgb(255, 255, 255); --elevation-fixed-reverse-box-shadow: rgb(37, 42, 49); --elevation-raised-background: rgb(255, 255, 255); --elevation-raised-box-shadow: rgb(37, 42, 49); + --elevation-level-3-background: rgb(255, 255, 255); + --elevation-level-3-box-shadow: rgb(37, 42, 49); --elevation-raised-reverse-background: rgb(255, 255, 255); --elevation-raised-reverse-box-shadow: rgb(37, 42, 49); + --elevation-level-3-reverse-background: rgb(255, 255, 255); + --elevation-level-3-reverse-box-shadow: rgb(37, 42, 49); --elevation-overlay-background: rgb(255, 255, 255); --elevation-overlay-box-shadow: rgb(37, 42, 49); + --elevation-level-4-background: rgb(255, 255, 255); + --elevation-level-4-box-shadow: rgb(37, 42, 49); --background-body: rgb(245, 247, 249); --box-shadow-action: rgb(37, 42, 49); --box-shadow-action-active: rgb(37, 42, 49); diff --git a/packages/orbit-design-tokens/output/tokens.less b/packages/orbit-design-tokens/output/tokens.less index a31afa5666..0336582868 100644 --- a/packages/orbit-design-tokens/output/tokens.less +++ b/packages/orbit-design-tokens/output/tokens.less @@ -718,18 +718,28 @@ @elevation-flat-border-size: 1; @elevation-action-background: rgb(255, 255, 255); @elevation-action-box-shadow: rgb(37, 42, 49); +@elevation-level-1-background: rgb(255, 255, 255); +@elevation-level-1-box-shadow: rgb(37, 42, 49); @elevation-action-active-background: rgb(255, 255, 255); @elevation-action-active-box-shadow: rgb(37, 42, 49); +@elevation-level-2-background: rgb(255, 255, 255); +@elevation-level-2-box-shadow: rgb(37, 42, 49); @elevation-fixed-background: rgb(255, 255, 255); @elevation-fixed-box-shadow: rgb(37, 42, 49); @elevation-fixed-reverse-background: rgb(255, 255, 255); @elevation-fixed-reverse-box-shadow: rgb(37, 42, 49); @elevation-raised-background: rgb(255, 255, 255); @elevation-raised-box-shadow: rgb(37, 42, 49); +@elevation-level-3-background: rgb(255, 255, 255); +@elevation-level-3-box-shadow: rgb(37, 42, 49); @elevation-raised-reverse-background: rgb(255, 255, 255); @elevation-raised-reverse-box-shadow: rgb(37, 42, 49); +@elevation-level-3-reverse-background: rgb(255, 255, 255); +@elevation-level-3-reverse-box-shadow: rgb(37, 42, 49); @elevation-overlay-background: rgb(255, 255, 255); @elevation-overlay-box-shadow: rgb(37, 42, 49); +@elevation-level-4-background: rgb(255, 255, 255); +@elevation-level-4-box-shadow: rgb(37, 42, 49); @background-body: rgb(245, 247, 249); @box-shadow-action: rgb(37, 42, 49); @box-shadow-action-active: rgb(37, 42, 49); diff --git a/packages/orbit-design-tokens/output/tokens.scss b/packages/orbit-design-tokens/output/tokens.scss index d99f578766..4eaabd119a 100644 --- a/packages/orbit-design-tokens/output/tokens.scss +++ b/packages/orbit-design-tokens/output/tokens.scss @@ -731,9 +731,14 @@ $elevation-flat-border-color: rgb(232, 237, 241); $elevation-flat-border-size: 1px; $elevation-action-background: rgb(255, 255, 255); $elevation-action-box-shadow: 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12); +$elevation-level-1-background: rgb(255, 255, 255); +$elevation-level-1-box-shadow: 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12); $elevation-action-active-background: rgb(255, 255, 255); $elevation-action-active-box-shadow: 0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12); +$elevation-level-2-background: rgb(255, 255, 255); +$elevation-level-2-box-shadow: 0 1px 4px 0 rgba(37, 42, 49, 0.16), + 0 4px 8px 0 rgba(37, 42, 49, 0.12); $elevation-fixed-background: rgb(255, 255, 255); $elevation-fixed-box-shadow: 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 2px 4px 0 rgba(37, 42, 49, 0.12); $elevation-fixed-reverse-background: rgb(255, 255, 255); @@ -742,12 +747,21 @@ $elevation-fixed-reverse-box-shadow: 0 0 2px 0 rgba(37, 42, 49, 0.16), $elevation-raised-background: rgb(255, 255, 255); $elevation-raised-box-shadow: 0 4px 8px 0 rgba(37, 42, 49, 0.16), 0 8px 24px 0 rgba(37, 42, 49, 0.24); +$elevation-level-3-background: rgb(255, 255, 255); +$elevation-level-3-box-shadow: 0 4px 8px 0 rgba(37, 42, 49, 0.16), + 0 8px 24px 0 rgba(37, 42, 49, 0.24); $elevation-raised-reverse-background: rgb(255, 255, 255); $elevation-raised-reverse-box-shadow: 0 -4px 8px 0 rgba(37, 42, 49, 0.16), 0 -8px 24px 0 rgba(37, 42, 49, 0.24); +$elevation-level-3-reverse-background: rgb(255, 255, 255); +$elevation-level-3-reverse-box-shadow: 0 -4px 8px 0 rgba(37, 42, 49, 0.16), + 0 -8px 24px 0 rgba(37, 42, 49, 0.24); $elevation-overlay-background: rgb(255, 255, 255); $elevation-overlay-box-shadow: 0 12px 24px -4px rgba(37, 42, 49, 0.24), 0 8px 60px 0 rgba(37, 42, 49, 0.32); +$elevation-level-4-background: rgb(255, 255, 255); +$elevation-level-4-box-shadow: 0 12px 24px -4px rgba(37, 42, 49, 0.24), + 0 8px 60px 0 rgba(37, 42, 49, 0.32); $background-body: rgb(245, 247, 249); $box-shadow-action: 0 0 2px 0 rgba(37, 42, 49, 0.16), 0 1px 4px 0 rgba(37, 42, 49, 0.12); $box-shadow-action-active: 0 1px 4px 0 rgba(37, 42, 49, 0.16), 0 4px 8px 0 rgba(37, 42, 49, 0.12); diff --git a/packages/orbit-design-tokens/output/tokens.styl b/packages/orbit-design-tokens/output/tokens.styl index 7961ce0e7f..1590ad2f7e 100644 --- a/packages/orbit-design-tokens/output/tokens.styl +++ b/packages/orbit-design-tokens/output/tokens.styl @@ -718,18 +718,28 @@ $elevation-flat-border-color= rgb(232, 237, 241); $elevation-flat-border-size= 1; $elevation-action-background= rgb(255, 255, 255); $elevation-action-box-shadow= rgb(37, 42, 49); +$elevation-level-1-background= rgb(255, 255, 255); +$elevation-level-1-box-shadow= rgb(37, 42, 49); $elevation-action-active-background= rgb(255, 255, 255); $elevation-action-active-box-shadow= rgb(37, 42, 49); +$elevation-level-2-background= rgb(255, 255, 255); +$elevation-level-2-box-shadow= rgb(37, 42, 49); $elevation-fixed-background= rgb(255, 255, 255); $elevation-fixed-box-shadow= rgb(37, 42, 49); $elevation-fixed-reverse-background= rgb(255, 255, 255); $elevation-fixed-reverse-box-shadow= rgb(37, 42, 49); $elevation-raised-background= rgb(255, 255, 255); $elevation-raised-box-shadow= rgb(37, 42, 49); +$elevation-level-3-background= rgb(255, 255, 255); +$elevation-level-3-box-shadow= rgb(37, 42, 49); $elevation-raised-reverse-background= rgb(255, 255, 255); $elevation-raised-reverse-box-shadow= rgb(37, 42, 49); +$elevation-level-3-reverse-background= rgb(255, 255, 255); +$elevation-level-3-reverse-box-shadow= rgb(37, 42, 49); $elevation-overlay-background= rgb(255, 255, 255); $elevation-overlay-box-shadow= rgb(37, 42, 49); +$elevation-level-4-background= rgb(255, 255, 255); +$elevation-level-4-box-shadow= rgb(37, 42, 49); $background-body= rgb(245, 247, 249); $box-shadow-action= rgb(37, 42, 49); $box-shadow-action-active= rgb(37, 42, 49); diff --git a/packages/orbit-design-tokens/output/tokens.xml b/packages/orbit-design-tokens/output/tokens.xml index fe8dafb8d2..9a0f9953f2 100644 --- a/packages/orbit-design-tokens/output/tokens.xml +++ b/packages/orbit-design-tokens/output/tokens.xml @@ -2879,6 +2879,14 @@ elevationActionBoxShadow #252A31 + + elevationLevel1Background + #FFFFFF + + + elevationLevel1BoxShadow + #252A31 + elevationActionActiveBackground #FFFFFF @@ -2887,6 +2895,14 @@ elevationActionActiveBoxShadow #252A31 + + elevationLevel2Background + #FFFFFF + + + elevationLevel2BoxShadow + #252A31 + elevationFixedBackground #FFFFFF @@ -2911,6 +2927,14 @@ elevationRaisedBoxShadow #252A31 + + elevationLevel3Background + #FFFFFF + + + elevationLevel3BoxShadow + #252A31 + elevationRaisedReverseBackground #FFFFFF @@ -2919,6 +2943,14 @@ elevationRaisedReverseBoxShadow #252A31 + + elevationLevel3ReverseBackground + #FFFFFF + + + elevationLevel3ReverseBoxShadow + #252A31 + elevationOverlayBackground #FFFFFF @@ -2927,6 +2959,14 @@ elevationOverlayBoxShadow #252A31 + + elevationLevel4Background + #FFFFFF + + + elevationLevel4BoxShadow + #252A31 + backgroundBody #F5F7F9 diff --git a/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap b/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap index d68b68dd91..e767448c4f 100644 --- a/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/orbit-design-tokens/src/__tests__/__snapshots__/index.test.ts.snap @@ -477,6 +477,16 @@ exports[`defaultTokens should match snapshot 1`] = ` "elevationFlatBackground": "#FFFFFF", "elevationFlatBorderColor": "#E8EDF1", "elevationFlatBorderSize": "1px", + "elevationLevel1Background": "#FFFFFF", + "elevationLevel1BoxShadow": "0 0 2px 0 rgba(37, 42, 49, 0.16),0 1px 4px 0 rgba(37, 42, 49, 0.12)", + "elevationLevel2Background": "#FFFFFF", + "elevationLevel2BoxShadow": "0 1px 4px 0 rgba(37, 42, 49, 0.16),0 4px 8px 0 rgba(37, 42, 49, 0.12)", + "elevationLevel3Background": "#FFFFFF", + "elevationLevel3BoxShadow": "0 4px 8px 0 rgba(37, 42, 49, 0.16),0 8px 24px 0 rgba(37, 42, 49, 0.24)", + "elevationLevel3ReverseBackground": "#FFFFFF", + "elevationLevel3ReverseBoxShadow": "0 -4px 8px 0 rgba(37, 42, 49, 0.16),0 -8px 24px 0 rgba(37, 42, 49, 0.24)", + "elevationLevel4Background": "#FFFFFF", + "elevationLevel4BoxShadow": "0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32)", "elevationOverlayBackground": "#FFFFFF", "elevationOverlayBoxShadow": "0 12px 24px -4px rgba(37, 42, 49, 0.24),0 8px 60px 0 rgba(37, 42, 49, 0.32)", "elevationRaisedBackground": "#FFFFFF", diff --git a/packages/orbit-design-tokens/src/dictionary/definitions/global/elevations.json b/packages/orbit-design-tokens/src/dictionary/definitions/global/elevations.json index 0b82ddc574..c43c4fa4c5 100644 --- a/packages/orbit-design-tokens/src/dictionary/definitions/global/elevations.json +++ b/packages/orbit-design-tokens/src/dictionary/definitions/global/elevations.json @@ -26,6 +26,44 @@ } }, "action": { + "background": { + "type": "color", + "category": "elevation", + "value": "{foundation.palette.white.normal}", + "deprecated": true, + "deprecated-replace": "{foundation.palette.white.normal}", + "deprecated-version": "9.0.0" + }, + "box-shadow": { + "type": "box-shadow", + "category": "elevation", + "value": "{foundation.palette.ink.dark}", + "attributes": { + "box-shadow": [ + { + "x": 0, + "y": 0, + "blur": 2, + "spread": 0, + "color": "{foundation.palette.ink.dark}", + "opacity": 16 + }, + { + "x": 0, + "y": 1, + "blur": 4, + "spread": 0, + "color": "{foundation.palette.ink.dark}", + "opacity": 12 + } + ] + }, + "deprecated": true, + "deprecated-replace": "{global.elevation.level1.box-shadow}", + "deprecated-version": "9.0.0" + } + }, + "level1": { "background": { "type": "color", "category": "elevation", @@ -58,6 +96,44 @@ } }, "action-active": { + "background": { + "type": "color", + "category": "elevation", + "value": "{foundation.palette.white.normal}", + "deprecated": true, + "deprecated-replace": "{foundation.palette.white.normal}", + "deprecated-version": "9.0.0" + }, + "box-shadow": { + "type": "box-shadow", + "category": "elevation", + "value": "{foundation.palette.ink.dark}", + "attributes": { + "box-shadow": [ + { + "x": 0, + "y": 1, + "blur": 4, + "spread": 0, + "color": "{foundation.palette.ink.dark}", + "opacity": 16 + }, + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "{foundation.palette.ink.dark}", + "opacity": 12 + } + ] + }, + "deprecated": true, + "deprecated-replace": "{global.elevation.level2.box-shadow}", + "deprecated-version": "9.0.0" + } + }, + "level2": { "background": { "type": "color", "category": "elevation", @@ -154,6 +230,44 @@ } }, "raised": { + "background": { + "type": "color", + "category": "elevation", + "value": "{foundation.palette.white.normal}", + "deprecated": true, + "deprecated-replace": "{foundation.palette.white.normal}", + "deprecated-version": "9.0.0" + }, + "box-shadow": { + "type": "box-shadow", + "category": "elevation", + "value": "{foundation.palette.ink.dark}", + "attributes": { + "box-shadow": [ + { + "x": 0, + "y": 4, + "blur": 8, + "spread": 0, + "color": "{foundation.palette.ink.dark}", + "opacity": 16 + }, + { + "x": 0, + "y": 8, + "blur": 24, + "spread": 0, + "color": "{foundation.palette.ink.dark}", + "opacity": 24 + } + ] + }, + "deprecated": true, + "deprecated-replace": "{global.elevation.level3.box-shadow}", + "deprecated-version": "9.0.0" + } + }, + "level3": { "background": { "type": "color", "category": "elevation", @@ -186,6 +300,44 @@ } }, "raised-reverse": { + "background": { + "type": "color", + "category": "elevation", + "value": "{foundation.palette.white.normal}", + "deprecated": true, + "deprecated-replace": "{foundation.palette.white.normal}", + "deprecated-version": "9.0.0" + }, + "box-shadow": { + "type": "box-shadow", + "category": "elevation", + "value": "{foundation.palette.ink.dark}", + "attributes": { + "box-shadow": [ + { + "x": 0, + "y": -4, + "blur": 8, + "spread": 0, + "color": "{foundation.palette.ink.dark}", + "opacity": 16 + }, + { + "x": 0, + "y": -8, + "blur": 24, + "spread": 0, + "color": "{foundation.palette.ink.dark}", + "opacity": 24 + } + ] + }, + "deprecated": true, + "deprecated-replace": "{global.elevation.level3-reverse.box-shadow}", + "deprecated-version": "9.0.0" + } + }, + "level3-reverse": { "background": { "type": "color", "category": "elevation", @@ -218,6 +370,44 @@ } }, "overlay": { + "background": { + "type": "color", + "category": "elevation", + "value": "{foundation.palette.white.normal}", + "deprecated": true, + "deprecated-replace": "{foundation.palette.white.normal}", + "deprecated-version": "9.0.0" + }, + "box-shadow": { + "type": "box-shadow", + "category": "elevation", + "value": "{foundation.palette.ink.dark}", + "attributes": { + "box-shadow": [ + { + "x": 0, + "y": 12, + "blur": 24, + "spread": -4, + "color": "{foundation.palette.ink.dark}", + "opacity": 24 + }, + { + "x": 0, + "y": 8, + "blur": 60, + "spread": 0, + "color": "{foundation.palette.ink.dark}", + "opacity": 32 + } + ] + }, + "deprecated": true, + "deprecated-replace": "{global.elevation.level4.box-shadow}", + "deprecated-version": "9.0.0" + } + }, + "level4": { "background": { "type": "color", "category": "elevation", diff --git a/packages/orbit-design-tokens/src/js/createTokens.ts b/packages/orbit-design-tokens/src/js/createTokens.ts index df368fedc0..a385126cd4 100644 --- a/packages/orbit-design-tokens/src/js/createTokens.ts +++ b/packages/orbit-design-tokens/src/js/createTokens.ts @@ -734,18 +734,28 @@ export interface Tokens { elevationFlatBorderSize: string; elevationActionBackground: string; elevationActionBoxShadow: string; + elevationLevel1Background: string; + elevationLevel1BoxShadow: string; elevationActionActiveBackground: string; elevationActionActiveBoxShadow: string; + elevationLevel2Background: string; + elevationLevel2BoxShadow: string; elevationFixedBackground: string; elevationFixedBoxShadow: string; elevationFixedReverseBackground: string; elevationFixedReverseBoxShadow: string; elevationRaisedBackground: string; elevationRaisedBoxShadow: string; + elevationLevel3Background: string; + elevationLevel3BoxShadow: string; elevationRaisedReverseBackground: string; elevationRaisedReverseBoxShadow: string; + elevationLevel3ReverseBackground: string; + elevationLevel3ReverseBoxShadow: string; elevationOverlayBackground: string; elevationOverlayBoxShadow: string; + elevationLevel4Background: string; + elevationLevel4BoxShadow: string; backgroundBody: string; boxShadowAction: string; boxShadowActionActive: string; @@ -1657,6 +1667,19 @@ const createTokens: CreateTokens = foundation => ({ inset: false, }, ]), + elevationLevel1Background: foundation.palette.white.normal, + elevationLevel1BoxShadow: boxShadow([ + { + def: ["0", "0", "2px", "0"], + color: transparentColor(foundation.palette.ink.dark, 16), + inset: false, + }, + { + def: ["0", "1px", "4px", "0"], + color: transparentColor(foundation.palette.ink.dark, 12), + inset: false, + }, + ]), elevationActionActiveBackground: foundation.palette.white.normal, elevationActionActiveBoxShadow: boxShadow([ { @@ -1670,6 +1693,19 @@ const createTokens: CreateTokens = foundation => ({ inset: false, }, ]), + elevationLevel2Background: foundation.palette.white.normal, + elevationLevel2BoxShadow: boxShadow([ + { + def: ["0", "1px", "4px", "0"], + color: transparentColor(foundation.palette.ink.dark, 16), + inset: false, + }, + { + def: ["0", "4px", "8px", "0"], + color: transparentColor(foundation.palette.ink.dark, 12), + inset: false, + }, + ]), elevationFixedBackground: foundation.palette.white.normal, elevationFixedBoxShadow: boxShadow([ { @@ -1709,6 +1745,19 @@ const createTokens: CreateTokens = foundation => ({ inset: false, }, ]), + elevationLevel3Background: foundation.palette.white.normal, + elevationLevel3BoxShadow: boxShadow([ + { + def: ["0", "4px", "8px", "0"], + color: transparentColor(foundation.palette.ink.dark, 16), + inset: false, + }, + { + def: ["0", "8px", "24px", "0"], + color: transparentColor(foundation.palette.ink.dark, 24), + inset: false, + }, + ]), elevationRaisedReverseBackground: foundation.palette.white.normal, elevationRaisedReverseBoxShadow: boxShadow([ { @@ -1722,6 +1771,19 @@ const createTokens: CreateTokens = foundation => ({ inset: false, }, ]), + elevationLevel3ReverseBackground: foundation.palette.white.normal, + elevationLevel3ReverseBoxShadow: boxShadow([ + { + def: ["0", "-4px", "8px", "0"], + color: transparentColor(foundation.palette.ink.dark, 16), + inset: false, + }, + { + def: ["0", "-8px", "24px", "0"], + color: transparentColor(foundation.palette.ink.dark, 24), + inset: false, + }, + ]), elevationOverlayBackground: foundation.palette.white.normal, elevationOverlayBoxShadow: boxShadow([ { @@ -1735,6 +1797,19 @@ const createTokens: CreateTokens = foundation => ({ inset: false, }, ]), + elevationLevel4Background: foundation.palette.white.normal, + elevationLevel4BoxShadow: boxShadow([ + { + def: ["0", "12px", "24px", "-4px"], + color: transparentColor(foundation.palette.ink.dark, 24), + inset: false, + }, + { + def: ["0", "8px", "60px", "0"], + color: transparentColor(foundation.palette.ink.dark, 32), + inset: false, + }, + ]), backgroundBody: foundation.palette.cloud.light, boxShadowAction: boxShadow([ {