Skip to content
Permalink
Browse files

fix(design-tokens): update some blues, reds, and focus shadow (#185)

* fix(design-tokens): update some blues, reds, and focus shadow

* test: updates snapshots

* fix(design-tokens): darken primary colors for borders

* fix(design-tokens): more updates

* fix(button): update some styles

* fix(design-tokens): update primor for a11y

* fix(design-tokens): typo in type/category for boxShadow in sendgrid

* fix(design-tokens): final colors for red/blue 90

* fix(design-tokens): undo SG border token change

* chore: update button meta text

* test: update snapshots

* fix(design-tokens): pr fixes
  • Loading branch information
TheSisb committed Nov 15, 2019
1 parent 57a46f4 commit 98d70cc046db0284e151fab7f427ee16b8874c4a
@@ -23,15 +23,15 @@ exports[`Anchor it should render an anchor 1`] = `
}

.emotion-0:hover {
color: #001f57;
color: #032c5e;
-webkit-text-decoration: none;
text-decoration: none;
}

.emotion-0:focus,
.emotion-0:active {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
color: #001f57;
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
color: #032c5e;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -71,15 +71,15 @@ exports[`Anchor it should render an external anchor 1`] = `
}

.emotion-0:hover {
color: #001f57;
color: #032c5e;
-webkit-text-decoration: none;
text-decoration: none;
}

.emotion-0:focus,
.emotion-0:active {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
color: #001f57;
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
color: #032c5e;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -121,15 +121,15 @@ exports[`Anchor it should render an external anchor with overwritten target and
}

.emotion-0:hover {
color: #001f57;
color: #032c5e;
-webkit-text-decoration: none;
text-decoration: none;
}

.emotion-0:focus,
.emotion-0:active {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
color: #001f57;
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
color: #032c5e;
-webkit-text-decoration: none;
text-decoration: none;
}
@@ -91,7 +91,7 @@ exports[`Button States Has a disabled state 1`] = `
border-style: solid;
background-color: #ffffff;
color: #b3d3e9;
border-color: #dceaf4;
border-color: #b3d3e9;
width: auto;
}

@@ -347,8 +347,8 @@ exports[`Button States Has a loading state 1`] = `
.emotion-6:hover,
.emotion-6:active,
.emotion-6:focus {
border-color: #003e82;
background-color: #003e82;
border-color: #032c5e;
background-color: #032c5e;
}

.emotion-0 {
@@ -436,7 +436,7 @@ exports[`Button States Has a loading state 1`] = `
border-width: 2px;
border-style: solid;
background-color: #ffffff;
color: #001f57;
color: #032c5e;
border-color: #dceaf4;
background-color: #dceaf4;
width: auto;
@@ -519,7 +519,7 @@ exports[`Button States Has a loading state 1`] = `
font-weight: 600;
cursor: wait;
background: none;
color: #001f57;
color: #032c5e;
width: auto;
}

@@ -889,8 +889,8 @@ exports[`Button Variants Has a destructive variant 1`] = `
border-width: 2px;
border-style: solid;
background-color: #ffffff;
color: #cb0000;
border-color: #cb0000;
color: #e22525;
border-color: #e22525;
background-color: #ffffff;
width: auto;
}
@@ -901,24 +901,24 @@ exports[`Button Variants Has a destructive variant 1`] = `

.emotion-2:focus,
.emotion-2:active {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover {
color: #921200;
border-color: #921200;
border-color: #600101;
background-color: #ffe9e7;
}

.emotion-2:focus {
color: #cb0000;
border-color: #cb0000;
color: #e22525;
border-color: #e22525;
background-color: #ffe9e7;
}

.emotion-2:active {
color: #921200;
border-color: #921200;
border-color: #600101;
background-color: #f5dddd;
}

@@ -995,7 +995,7 @@ exports[`Button Variants Has a destructive_link variant 1`] = `
text-decoration: none;
cursor: pointer;
background: none;
color: #cb0000;
color: #e22525;
width: auto;
}

@@ -1005,7 +1005,7 @@ exports[`Button Variants Has a destructive_link variant 1`] = `

.emotion-2:focus,
.emotion-2:active {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover,
@@ -1106,7 +1106,7 @@ exports[`Button Variants Has a link variant 1`] = `

.emotion-2:focus,
.emotion-2:active {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover,
@@ -1121,7 +1121,7 @@ exports[`Button Variants Has a link variant 1`] = `
}

.emotion-2:active {
color: #001f57;
color: #032c5e;
}

<div
@@ -1182,8 +1182,8 @@ exports[`Button Variants Has a primary variant 1`] = `
border-width: 2px;
border-style: solid;
color: #ffffff;
border-color: #0075c3;
background-color: #0075c3;
border-color: #027ac5;
background-color: #027ac5;
width: auto;
}

@@ -1193,21 +1193,21 @@ exports[`Button Variants Has a primary variant 1`] = `

.emotion-2:focus,
.emotion-2:active {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover {
border-color: #005ea6;
background-color: #005ea6;
border-color: #032c5e;
background-color: #032c5e;
}

.emotion-2:focus {
border-color: #005ea6;
background-color: #0075c3;
border-color: #032c5e;
background-color: #027ac5;
}

.emotion-2:active {
border-color: #003e82;
border-color: #032c5e;
background-color: #003e82;
}

@@ -1311,7 +1311,7 @@ exports[`Button Variants Has a reset variant 1`] = `

.emotion-2:focus,
.emotion-2:active {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

<div
@@ -1392,7 +1392,7 @@ exports[`Button Variants Has a secondary variant 1`] = `
border-style: solid;
background-color: #ffffff;
color: #005ea6;
border-color: #0075c3;
border-color: #027ac5;
background-color: #ffffff;
width: auto;
}
@@ -1403,24 +1403,24 @@ exports[`Button Variants Has a secondary variant 1`] = `

.emotion-2:focus,
.emotion-2:active {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}

.emotion-2:hover {
color: #003e82;
border-color: #003e82;
color: #032c5e;
border-color: #032c5e;
background-color: #f5f8ff;
}

.emotion-2:focus {
color: #005ea6;
border-color: #0075c3;
color: #032c5e;
border-color: #032c5e;
background-color: #f5f8ff;
}

.emotion-2:active {
color: #001f57;
border-color: #003e82;
color: #032c5e;
border-color: #032c5e;
background-color: #dceaf4;
}

@@ -61,7 +61,7 @@ const baseEnabled = (props: ButtonWrapperProps): SerializedStyles =>
&:focus,
&:active {
box-shadow: 0 0 0 4px rgba(0, 117, 195, 0.5);
box-shadow: ${themeGet('shadows.shadowFocus')(props)};
}
`,
]);
@@ -99,16 +99,16 @@ const variantPrimaryEnabled = (props: ButtonWrapperProps): SerializedStyles =>
background-color: ${themeGet('backgroundColors.colorBackgroundPrimary')(props)};
&:hover {
border-color: ${themeGet('borderColors.colorBorderPrimaryDark')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundPrimaryDark')(props)};
border-color: ${themeGet('borderColors.colorBorderPrimaryDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundPrimaryDarker')(props)};
}
&:focus {
border-color: ${themeGet('borderColors.colorBorderPrimaryDark')(props)};
border-color: ${themeGet('borderColors.colorBorderPrimaryDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundPrimary')(props)};
}
&:active {
border-color: ${themeGet('borderColors.colorBorderPrimaryDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundPrimaryDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundPrimaryDark')(props)};
}
`,
]);
@@ -157,14 +157,14 @@ const variantSecondaryEnabled = (props: ButtonWrapperProps): SerializedStyles =>
background-color: ${themeGet('backgroundColors.colorBackgroundBody')(props)};
&:hover {
color: ${themeGet('textColors.colorTextLinkDark')(props)};
color: ${themeGet('textColors.colorTextLinkDarker')(props)};
border-color: ${themeGet('borderColors.colorBorderPrimaryDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundPrimaryLightest')(props)};
}
&:focus {
color: ${themeGet('textColors.colorTextLink')(props)};
border-color: ${themeGet('borderColors.colorBorderPrimary')(props)};
color: ${themeGet('textColors.colorTextLinkDarker')(props)};
border-color: ${themeGet('borderColors.colorBorderPrimaryDarker')(props)};
background-color: ${themeGet('backgroundColors.colorBackgroundPrimaryLightest')(props)};
}
@@ -191,7 +191,7 @@ const variantSecondaryDisabled = (props: ButtonWrapperProps): SerializedStyles =
variantSecondaryBase(props),
css`
color: ${themeGet('textColors.colorTextLinkLight')(props)};
border-color: ${themeGet('borderColors.colorBorderPrimaryLighter')(props)};
border-color: ${themeGet('borderColors.colorBorderPrimaryLight')(props)};
`,
]);

@@ -23,7 +23,7 @@ exports[`Backgrounds it should render responsive values 1`] = `

@media screen and (min-width:25rem) {
.emotion-0 {
background-color: #0075c3;
background-color: #027ac5;
}
}

@@ -56,7 +56,7 @@ exports[`Backgrounds it should render single values 1`] = `
.emotion-0 {
box-sizing: border-box;
min-width: 0;
background-color: #0075c3;
background-color: #027ac5;
}

<div
@@ -89,7 +89,7 @@ exports[`Borders it should render responsive values 1`] = `
box-sizing: border-box;
min-width: 0;
border-style: dashed;
border-color: #005ea6;
border-color: #003e82;
border-width: 1px;
border-radius: 0;
}
@@ -139,7 +139,7 @@ exports[`Borders it should render single values 1`] = `
box-sizing: border-box;
min-width: 0;
border-style: solid;
border-color: #005ea6;
border-color: #003e82;
border-width: 1px;
border-radius: 4px;
}
@@ -178,7 +178,7 @@ exports[`Shadows it should render responsive values 1`] = `

@media screen and (min-width:25rem) {
.emotion-0 {
box-shadow: 0 0 0 4px rgba(0,117,195,0.5);
box-shadow: 0 0 0 4px rgba(2,122,197,0.8);
}
}

@@ -1502,7 +1502,7 @@ exports[`textColor should set a responsive textColor property 1`] = `
.emotion-0 {
margin: 0;
padding: 0;
color: #cb0000;
color: #e22525;
font-size: 0.875rem;
line-height: 1.5rem;
}
@@ -3,6 +3,6 @@ imports:
- ./offset.yml
aliases:
shadow-elevation-0: "none"
shadow-elevation-10: "{!offset-0} {!offset-10}px {!offset-20}px {!offset-0} {!palette-gray-transparent-30}"
shadow-elevation-20: "{!offset-0} {!offset-40}px {!offset-60}px {!offset-0} {!palette-gray-transparent-20}"
shadow-elevation-30: "{!offset-0} {!offset-50}px {!offset-80}px {!offset-20} {!palette-gray-transparent-20}"
shadow-elevation-10: "{!offset-0} {!offset-10}px {!offset-20}px {!offset-0} {!palette-gray-100-transparent-30}"
shadow-elevation-20: "{!offset-0} {!offset-40}px {!offset-60}px {!offset-0} {!palette-gray-100-transparent-20}"
shadow-elevation-30: "{!offset-0} {!offset-50}px {!offset-80}px {!offset-20} {!palette-gray-100-transparent-20}"

1 comment on commit 98d70cc

@now

This comment has been minimized.

Please sign in to comment.
You can’t perform that action at this time.