Redesign elevation

changelog/entries/unreleased/feature/1918_introduce_new_elevation_design.json

@@ -0,0 +1,7 @@
+{
+    "type": "feature",
+    "message": "Introduce new elevation design",
+    "issue_number": 1918,
+    "bullet_points": [],
+    "created_at": "2023-08-21"
+}

premium/web-frontend/modules/baserow_premium/assets/scss/components/row_comments.scss

@@ -66,7 +66,7 @@
   border-radius: 100%;
   background-color: $color-primary-500;
   color: $white;
-  font-weight: bold;
+  font-weight: 600;
 
   @include center-text(30px, 12px);
 
@@ -129,12 +129,10 @@
   border-top-left-radius: 3px;
   word-wrap: break-word;
   border: 1px solid $color-neutral-200;
-  box-shadow: 0 1px 2px rgba(19, 45, 69, 0.1);
-  -webkit-box-shadow: 0 1px 2px rgba(19, 45, 69, 0.1);
-  -moz-box-shadow: 0 1px 2px rgba(19, 45, 69, 0.1);
   white-space: pre-line;
 
   @include rounded($rounded-md);
+  @include add-elevation($elevation-low);
 
   .auto-expandable-textarea {
     font-size: 13px;
@@ -148,8 +146,6 @@
     margin-right: 0;
     border-top-right-radius: 3px;
     box-shadow: none;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
 
     @include rounded($rounded-md);
   }
@@ -247,9 +243,10 @@
     background: white;
     padding: 8px 12px;
     border: 1px solid $color-neutral-200;
-    box-shadow: 0 1px 2px rgba(19, 45, 69, 0.1);
     border-radius: 80px;
-    font-weight: 600;
+    font-weight: 500;
+
+    @include add-elevation($elevation-low);
   }
 }
 

premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_card.scss

@@ -1,11 +1,11 @@
 .calendar-card {
   border: 1px solid $color-neutral-200;
-  box-shadow: 0 1px 2px rgba($color-primary-900, 0.1);
   color: $color-primary-900;
   height: 26px;
   margin-bottom: 2px;
 
   @include rounded($rounded);
+  @include add-elevation($elevation-low);
 
   > div {
     @include rounded($rounded);

premium/web-frontend/modules/baserow_premium/assets/scss/components/views/calendar/calendar_month_day.scss

@@ -51,7 +51,6 @@
 
 .calendar-month-day__create-row-btn {
   border: 1px solid $color-neutral-200;
-  box-shadow: 0 1px 2px rgba($color-primary-900, 0.1);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -61,6 +60,7 @@
   visibility: hidden;
 
   @include rounded($rounded);
+  @include add-elevation($elevation-low);
 
   &:hover {
     text-decoration: none;

premium/web-frontend/modules/baserow_premium/assets/scss/components/views/kanban.scss

@@ -167,7 +167,8 @@
 
   &:not(.kanban-view__stack-card--disabled):not(.kanban-view__stack-card--dragging):hover {
     cursor: pointer;
-    box-shadow: 0 1px 3px 0 rgba($black, 0.32);
+
+    @include add-elevation($elevation-medium);
   }
 }
 

web-frontend/.stylelintrc

@@ -1,8 +1,5 @@
 {
-  "extends": [
-    "stylelint-config-standard",
-    "stylelint-config-prettier"
-  ],
+  "extends": ["stylelint-config-standard", "stylelint-config-prettier"],
   "rules": {
     "at-rule-no-unknown": [
       true,
@@ -12,6 +9,7 @@
           "function",
           "if",
           "each",
+          "else",
           "include",
           "mixin",
           "return",

web-frontend/modules/core/assets/scss/components/alert.scss

@@ -18,7 +18,7 @@
   }
 
   &.alert--with-shadow {
-    box-shadow: 0 2px 6px 0 rgba($black, 0.16);
+    @include add-elevation($elevation-medium);
   }
 }
 

web-frontend/modules/core/assets/scss/components/box.scss

@@ -1,7 +1,8 @@
 .box {
   background-color: $white;
-  box-shadow: 0 3px 10px 0 rgba($black, 0.16);
   padding: 32px 40px;
+
+  @include add-elevation($elevation-medium);
   @include rounded($rounded-md);
 }
 

web-frontend/modules/core/assets/scss/components/card.scss

@@ -17,7 +17,8 @@
 .card {
   position: relative;
   background-color: $white;
-  box-shadow: 0 1px 3px 0 rgba($black, 0.16);
+
+  @include add-elevation($elevation-low);
   @include rounded($rounded);
 
   &--loading {

web-frontend/modules/core/assets/scss/components/context.scss

@@ -4,7 +4,8 @@
   white-space: nowrap;
   background-color: $white;
   border: 1px solid $color-neutral-200;
-  box-shadow: 0 2px 6px 0 rgba($black, 0.16);
+
+  @include add-elevation($elevation-medium);
   @include rounded($rounded-md);
 
   &.context--loading-overlay {

web-frontend/modules/core/assets/scss/components/datepicker.scss

@@ -6,9 +6,10 @@
 }
 
 .vdp-datepicker.datepicker .vdp-datepicker__calendar {
-  border-color: $color-neutral-200;
+  border: none;
   width: 278px;
   padding: 10px;
+
   @include rounded($rounded-md);
 
   .prev,

web-frontend/modules/core/assets/scss/mixins/add_elevation.scss

@@ -0,0 +1,3 @@
+@mixin add-elevation($box-shadow) {
+  box-shadow: $box-shadow;
+}

web-frontend/modules/core/assets/scss/mixins/all.scss

@@ -3,6 +3,7 @@
 @import 'button';
 @import 'filters';
 @import 'add_shadow';
+@import 'add_elevation';
 @import 'select_option';
 @import 'collaborator';
 @import 'roundness';

web-frontend/modules/core/assets/scss/variables.scss

@@ -37,6 +37,10 @@ $rounded-xl: 12px !default;
 $rounded-2xl: 16px !default;
 $rounded-3xl: 24px !default;
 
+$elevation-low: 0 1px 2px 0 rgba($palette-neutral-1300, 0.1) !default;
+$elevation-medium: 0 6px 12px 0 rgba($palette-neutral-1300, 0.08) !default;
+$elevation-high: 0 1px 2px 0 rgba($palette-neutral-1300, 0.1) !default;
+
 // API docs variables
 $api-docs-nav-width: 220px !default;
 $api-docs-header-height: 52px !default;