feat(Modal): color updates (#195)

gravity-ui · Jun 17, 2022 · be004a6 · be004a6
1 parent 7837ee8
commit be004a6
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 2 deletions.
diff --git a/src/components/Modal/Modal.scss b/src/components/Modal/Modal.scss
@@ -35,7 +35,7 @@ $block: '.#{$ns}modal';
         display: inline-block;
         margin: var(--yc-modal-margin);
         text-align: left;
-        background-color: var(--yc-color-base-float);
+        background-color: var(--yc-color-base-modal);
         border-radius: var(--yc-modal-border-radius);
     }
 

diff --git a/src/demo/colors/Base.tsx b/src/demo/colors/Base.tsx
@@ -271,6 +271,11 @@ const floats = [
         title: 'Float Accent Hover',
         description: 'Hover for Float Accent.',
     },
+    {
+        name: 'base-modal',
+        title: 'Modal',
+        description: 'Floating components with a veil.',
+    },
 ];
 
 export const RenderBackgrounds = () => (

diff --git a/styles/colors/base/dark.scss b/styles/colors/base/dark.scss
@@ -54,4 +54,5 @@
     --yc-color-base-float-accent: var(--yc-color-private-white-150-solid);
     --yc-color-base-float-accent-hover: var(--yc-color-private-white-200-solid);
     --yc-color-base-float-announcement: var(--yc-color-private-white-150-solid);
+    --yc-color-base-modal: var(--yc-color-private-black-rock-850);
 }
diff --git a/styles/colors/base/light.scss b/styles/colors/base/light.scss
@@ -54,4 +54,5 @@
     --yc-color-base-float-accent: var(--yc-color-private-white-1000);
     --yc-color-base-float-accent-hover: var(--yc-color-private-white-850);
     --yc-color-base-float-announcement: var(--yc-color-private-cool-grey-50-solid);
+    --yc-color-base-modal: var(--yc-color-private-white-1000);
 }
diff --git a/styles/colors/private/dark.scss b/styles/colors/private/dark.scss
@@ -17,6 +17,7 @@
     --yc-color-private-black-300: rgba(0, 0, 0, 0.3);
     --yc-color-private-black-400: rgba(0, 0, 0, 0.4);
     --yc-color-private-black-500: rgba(0, 0, 0, 0.5);
+    --yc-color-private-black-600: rgba(0, 0, 0, 0.6);
     --yc-color-private-black-700: rgba(0, 0, 0, 0.7);
     --yc-color-private-black-900: rgba(0, 0, 0, 0.9);
 

diff --git a/styles/colors/sfx/dark.scss b/styles/colors/sfx/dark.scss
@@ -1,5 +1,5 @@
 @mixin yc-colors-sfx-dark {
-    --yc-color-sfx-veil: var(--yc-color-private-black-400);
+    --yc-color-sfx-veil: var(--yc-color-private-black-600);
     --yc-color-sfx-shadow: var(--yc-color-private-black-200);
     --yc-color-sfx-shadow-heavy: var(--yc-color-private-black-500);
     --yc-color-sfx-fade: var(--yc-color-private-white-250);