[Visual Refresh] Shadow tokens #8842

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed

acstll wants to merge 15 commits into elastic:eui-theme/borealis-v2-poc from acstll:borealis-shadow-tokens

packages/eui-theme-borealis/changelogs/upcoming/8767.md

-Original file line number
+Diff line change
@@ -0,0 +1,23 @@
+    - Added semantic tokens:
+      - `colors.borderInteractiveFormsHoverPlain`
+      - `colors.borderInteractiveFormsHoverDanger`
+    - Added component tokens:
+      - `components.forms.backgroundDropping`
+      - `components.forms.borderFocused`
+      - `components.forms.borderInvalid`
+      - `components.forms.borderHovered`
+      - `components.forms.borderInvalidHovered`
+      - `components.forms.borderAutofilledHovered`
+      - `components.forms.clearButtonBackground`
+    - Updated values for tokens:
+      - `colors.textWarning`
+      - `colors.borderStrongPrimary`
+      - `colors.borderStrongAccent`
+      - `colors.borderStrongAccentSecondary`
+      - `colors.borderStrongNeutral`
+      - `colors.borderStrongSuccess`
+      - `colors.borderStrongWarning`
+      - `colors.borderStrongRisk`
+      - `colors.borderStrongDanger`
+      - `components.forms.backgroundReadOnly`

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -136,6 +136,24 @@ @@
       },
       "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
       "euiShadowColor": "#000000",
+      "euiShadows": {
+        "xs": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px 2px 8px 0px hsl(0deg 0% 0% / 0.24)",
+        "s": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 2px 7px 0px hsl(0deg 0% 0% / 0.46), 0px 4px 11px 0px hsl(0deg 0% 0% / 0.26)",
+        "m": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 3px 10px 0px hsl(0deg 0% 0% / 0.52), 0px 6px 14px 0px hsl(0deg 0% 0% / 0.28)",
+        "l": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 4px 13px 0px hsl(0deg 0% 0% / 0.58), 0px 8px 17px 0px hsl(0deg 0% 0% / 0.3)",
+        "xl": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 5px 16px 0px hsl(0deg 0% 0% / 0.64), 0px 10px 20px 0px hsl(0deg 0% 0% / 0.32)",
+        "xlHover": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 6px 19px 0px hsl(0deg 0% 0% / 0.7), 0px 12px 23px 0px hsl(0deg 0% 0% / 0.34)",
+        "flat": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px 1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px 2px 8px 0px hsl(0deg 0% 0% / 0.24)"
+      },
+      "euiShadowsUp": {
+        "xs": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px -2px 8px 0px hsl(0deg 0% 0% / 0.24)",
+        "s": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -2px 7px 0px hsl(0deg 0% 0% / 0.46), 0px -4px 11px 0px hsl(0deg 0% 0% / 0.26)",
+        "m": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -3px 10px 0px hsl(0deg 0% 0% / 0.52), 0px -6px 14px 0px hsl(0deg 0% 0% / 0.28)",
+        "l": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -4px 13px 0px hsl(0deg 0% 0% / 0.58), 0px -8px 17px 0px hsl(0deg 0% 0% / 0.3)",
+        "xl": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -5px 16px 0px hsl(0deg 0% 0% / 0.64), 0px -10px 20px 0px hsl(0deg 0% 0% / 0.32)",
+        "xlHover": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -6px 19px 0px hsl(0deg 0% 0% / 0.7), 0px -12px 23px 0px hsl(0deg 0% 0% / 0.34)",
+        "flat": "0px 0px 0px 1px hsl(216.67deg 29.51% 23.92%), 0px -1px 4px 0px hsl(0deg 0% 0% / 0.4), 0px -2px 8px 0px hsl(0deg 0% 0% / 0.24)"
+      },
       "euiSize": "16px",
       "euiSizeXS": "4px",
       "euiSizeS": "8px",
@@ Expand Down @@

packages/eui-theme-borealis/src/eui_theme_borealis_dark.json.d.ts

-Original file line number
+Diff line change
@@ Expand Up @@
         };
         euiBreakpointKeys: string;
         euiShadowColor: string;
+        euiShadows: {
+          xs: string;
+          s: string;
+          m: string;
+          l: string;
+          xl: string;
+          xlHover: string;
+          flat: string;
+        },
+        euiShadowsUp: {
+          xs: string;
+          s: string;
+          m: string;
+          l: string;
+          xl: string;
+          xlHover: string;
+          flat: string;
+        },
         euiSize: string;
         euiSizeXS: string;
         euiSizeS: string;
@@ Expand Down @@

packages/eui-theme-borealis/src/eui_theme_borealis_light.json

-Original file line number
+Diff line change
@@ Expand Up / @@ -136,6 +136,24 @@ @@
       },
       "euiBreakpointKeys": "'xs', 's', 'm', 'l', 'xl'",
       "euiShadowColor": "#000000",
+      "euiShadows": {
+        "xs": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)",
+        "s": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px 4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)",
+        "m": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px 6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)",
+        "l": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px 8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)",
+        "xl": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px 10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)",
+        "xlHover": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)",
+        "flat": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px 1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px 2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)"
+      },
+      "euiShadowsUp": {
+        "xs": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)",
+        "s": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -2px 7px 0px hsl(216.67deg 29.51% 23.92% / 0.08), 0px -4px 11px 0px hsl(216.67deg 29.51% 23.92% / 0.05)",
+        "m": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -3px 10px 0px hsl(216.67deg 29.51% 23.92% / 0.1), 0px -6px 14px 0px hsl(216.67deg 29.51% 23.92% / 0.06)",
+        "l": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -4px 13px 0px hsl(216.67deg 29.51% 23.92% / 0.12), 0px -8px 17px 0px hsl(216.67deg 29.51% 23.92% / 0.07)",
+        "xl": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -5px 16px 0px hsl(216.67deg 29.51% 23.92% / 0.14), 0px -10px 20px 0px hsl(216.67deg 29.51% 23.92% / 0.08)",
+        "xlHover": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -6px 19px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -12px 23px 0px hsl(216.67deg 29.51% 23.92% / 0.09)",
+        "flat": "0px 0px 2px 0px hsl(216.67deg 29.51% 23.92% / 0.16), 0px -1px 4px 0px hsl(216.67deg 29.51% 23.92% / 0.06), 0px -2px 8px 0px hsl(216.67deg 29.51% 23.92% / 0.04)"
+      },
       "euiSize": "16px",
       "euiSizeXS": "4px",
       "euiSizeS": "8px",
@@ Expand Down @@

packages/eui-theme-borealis/src/eui_theme_borealis_light.json.d.ts

-Original file line number
+Diff line change
@@ Expand Up @@
         };
         euiBreakpointKeys: string;
         euiShadowColor: string;
+        euiShadows: {
+          xs: string;
+          s: string;
+          m: string;
+          l: string;
+          xl: string;
+          xlHover: string;
+          flat: string;
+        },
+        euiShadowsUp: {
+          xs: string;
+          s: string;
+          m: string;
+          l: string;
+          xl: string;
+          xlHover: string;
+          flat: string;
+        },
         euiSize: string;
         euiSizeXS: string;
         euiSizeS: string;
@@ Expand Down @@

packages/eui-theme-borealis/src/index.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -15,6 +15,7 @@ import { base, size } from './variables/_size'; @@
     import { border } from './variables/_borders';
     import { levels } from './variables/_levels';
     import { font } from './variables/_typography';
+    import { shadows } from './variables/_shadows';
     import { focus } from './variables/_states';
     import { components } from './variables/_components';
     import { overrides } from './variables/_overrides';
@@ Expand All / @@ -35,6 +36,7 @@ export const euiThemeBorealis: EuiThemeShape = { @@
       animation,
       breakpoint,
       levels,
+      shadows,
       focus,
       components,
       flags: {
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh] Shadow tokens #8842

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!