Merge pull request #2635 from salesforce-ux/fix/webkit-gradient

fix(brand-band): webkit gradient fix
salesforce-ux · Aug 2, 2017 · dd85217 · dd85217
2 parents e2dc9bc + a7b29d3
commit dd85217
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 2 deletions.
diff --git a/design-tokens/brand/background-color.yml b/design-tokens/brand/background-color.yml
@@ -31,5 +31,11 @@ props:
     type: string
   BRAND_BAND_COLOR_BACKGROUND_PRIMARY:
     value: '#AFC5DE'
+  BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT:
+    value: 'rgba(175,197,222,0)'
+    comment: 'These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug'
   BRAND_BAND_COLOR_BACKGROUND_SECONDARY:
     value: '#205C9F'
+  BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT:
+    value: 'rgba(32,92,159,0)'
+    comment: 'These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_SECONDARY changes, solves webkit bug'
diff --git a/design-tokens/s1-base-small.yml b/design-tokens/s1-base-small.yml
@@ -2,6 +2,7 @@
 # Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
 
 imports:
+  - ./s1-base-small/border-radius.yml
   - ./s1-base-small/box-shadow.yml
   - ./s1-base-small/font-size.yml
   - ./s1-base-small/font-weight.yml
diff --git a/design-tokens/s1-base-small/border-radius.yml b/design-tokens/s1-base-small/border-radius.yml
@@ -0,0 +1,11 @@
+# Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+# Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
+
+global:
+  type: size
+  category: radius
+  cssProperties:
+  - 'border*radius'
+props:
+  PAGE_HEADER_BORDER_RADIUS:
+    value: '0'
diff --git a/design-tokens/s1-base-small/box-shadow.yml b/design-tokens/s1-base-small/box-shadow.yml
@@ -9,3 +9,5 @@ global:
 props:
   CARD_SHADOW:
     value: 'none'
+  PAGE_HEADER_SHADOW:
+    value: 'none'
diff --git a/design-tokens/salesforce-skin/background-color.yml b/design-tokens/salesforce-skin/background-color.yml
@@ -19,6 +19,12 @@ props:
     value: '{!PALETTE_GRAY_7}'
   BRAND_BAND_COLOR_BACKGROUND_SECONDARY:
     value: '{!PALETTE_GRAY_7}'
+  BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT:
+    value: 'rgba(176,173,171,0)'
+    comment: 'These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_PRIMARY changes, solves webkit bug'
+  BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT:
+    value: 'rgba(176,173,171,0)'
+    comment: 'These RGBA values need to be updated if BRAND_BAND_COLOR_BACKGROUND_SECONDARY changes, solves webkit bug'
   ## DEFAULT
   COLOR_BACKGROUND_PRIMARY:
     value: '{!PALETTE_GRAY_2}'

diff --git a/design-tokens/salesforce-skin/spacing.yml b/design-tokens/salesforce-skin/spacing.yml
@@ -32,5 +32,7 @@ props:
   TABLE_CELL_SPACING:
     value: '{!SPACING_XX_SMALL} {!SPACING_X_SMALL}'
   ## Card
+  CARD_SPACING_MARGIN:
+    value: '{!SPACING_SMALL}'
   CARD_FOOTER_PADDING:
     value: '{!SPACING_SMALL} {!SPACING_MEDIUM}'
diff --git a/ui/components/brand-band/base/_index.scss b/ui/components/brand-band/base/_index.scss
@@ -29,7 +29,7 @@
     min-width: 983px;
     background-image:
       url($brand-band-default-image),
-      linear-gradient(to top, transparent 0, $brand-band-color-background-secondary);
+      linear-gradient(to top, $brand-band-color-background-secondary-transparent 0, $brand-band-color-background-secondary);
     background-repeat: repeat-x;
     background-position: top left;
   }
@@ -44,7 +44,7 @@
     top: 0;
     width: 100%;
     height: $brand-band-scrim-height;
-    background-image: linear-gradient(to bottom, transparent 60%, $page-color-background-primary);
+    background-image: linear-gradient(to bottom, $brand-band-color-background-primary-transparent 60%, $brand-band-color-background-primary);
   }
 
   &.slds-brand-band_cover {

diff --git a/ui/components/brand-band/tokens/background-color.yml b/ui/components/brand-band/tokens/background-color.yml
@@ -23,5 +23,9 @@ props:
     type: raw
   BRAND_BAND_COLOR_BACKGROUND_PRIMARY:
     value: 'transparent'
+  BRAND_BAND_COLOR_BACKGROUND_PRIMARY_TRANSPARENT:
+    value: 'transparent'
   BRAND_BAND_COLOR_BACKGROUND_SECONDARY:
     value: 'transparent'
+  BRAND_BAND_COLOR_BACKGROUND_SECONDARY_TRANSPARENT:
+    value: 'transparent'