Skip to content

Commit

Permalink
Fix prettier config
Browse files Browse the repository at this point in the history
  • Loading branch information
@lgeiger @rgbkrk
lgeiger authored and rgbkrk committed Oct 22, 2018
1 parent 48f98e0 commit 9446a90
Show file tree
Hide file tree
Showing 56 changed files with 1,318 additions and 847 deletions.
2 changes: 2 additions & 0 deletions .prettierignore
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
package.json
package-lock.json
yarn.lock
flow-typed
.next
10 changes: 0 additions & 10 deletions .prettierrc
View file

This file was deleted.

131 changes: 64 additions & 67 deletions common/animations.js
View file
Original file line number Diff line number Diff line change
@@ -1,113 +1,110 @@

import styled, { css } from 'styled-components';
import { animations } from '@common/constants';
import { sif } from '@common/styled';
import styled, { css } from "styled-components";
import { animations } from "@common/constants";
import { sif } from "@common/styled";

const Delay = () => styled.div`
${sif('xl')(css`
animation-delay: 2s;
${sif("xl")(css`
animation-delay: 2s;
`)}
${sif('l')(css`
animation-delay: 1s;
${sif("l")(css`
animation-delay: 1s;
`)}
${sif('m')(css`
animation-delay: 0.5s;
${sif("m")(css`
animation-delay: 0.5s;
`)}
${sif('s')(css`
animation-delay: 0.25s;
${sif("s")(css`
animation-delay: 0.25s;
`)}
`f
`;

const FadeIn = () => styled.div`
@keyframes fadein {
@keyframes fadein {
from {
opacity: 0;
opacity: 0;
}
to {
opacity: 1;
opacity: 1;
}
}
opacity: 0;
animation: fadein ${animations.timingAnimation} forwards ${animations.easing};
`
}
opacity: 0;
animation: fadein ${animations.timingAnimation} forwards ${animations.easing};
`;

const FadeOut = () => styled.div`
@keyframes fadeout {
@keyframes fadeout {
from {
opacity: 1;
opacity: 1;
}
to {
opacity: 0;
opacity: 0;
}
}
animation: fadeout ${animations.timingAnimation} forwards ${animations.easing};
`
}
animation: fadeout ${animations.timingAnimation} forwards ${animations.easing};
`;

const FadeAndSlideInFromBottom = () => styled.div`
@keyframes fade-and-slide-in-from-bottom {
@keyframes fade-and-slide-in-from-bottom {
from {
opacity: 0;
transform: translate3d(0, ${spacing.gutter*4}, 0);
opacity: 0;
transform: translate3d(0, ${spacing.gutter * 4}, 0);
}
to {
opacity: 1;
transform: none;
opacity: 1;
transform: none;
}
}
opacity: 0;
animation: fade-and-slide-in-from-bottom ${animations.timingAnimation} forwards
${animations.easing};
`
}
opacity: 0;
animation: fade-and-slide-in-from-bottom ${animations.timingAnimation}
forwards ${animations.easing};
`;

const FadeInAndSlideInFromBottomSm = () => styled.div`
@keyframes fade-and-slide-in-from-bottom {
@keyframes fade-and-slide-in-from-bottom {
from {
opacity: 0;
transform: translate3d(0, ${spacing.unit}, 0);
opacity: 0;
transform: translate3d(0, ${spacing.unit}, 0);
}
to {
opacity: 1;
transform: none;
opacity: 1;
transform: none;
}
}
opacity: 0;
animation: fade-and-slide-in-from-top-sm ${animations.timingAnimation} forwards
${animations.easing};
`
}
opacity: 0;
animation: fade-and-slide-in-from-top-sm ${animations.timingAnimation}
forwards ${animations.easing};
`;

const FadeInAndSlideInFromTop = () => styled.div`
@keyframes fade-and-slide-in-from-top {
@keyframes fade-and-slide-in-from-top {
from {
opacity: 0;
transform: translate3d(0, -${spacing.gutter*4}, 0);
opacity: 0;
transform: translate3d(0, -${spacing.gutter * 4}, 0);
}
to {
opacity: 1;
transform: none;
opacity: 1;
transform: none;
}
}
opacity: 0;
animation: fade-and-slide-in-from-top ${animations.timingAnimation} forwards
}
opacity: 0;
animation: fade-and-slide-in-from-top ${animations.timingAnimation} forwards
${animations.easing};
`
`;

const FadeInAndSlideInFromTopSm = () => css`
@keyframes fade-and-slide-in-from-top-sm {
@keyframes fade-and-slide-in-from-top-sm {
from {
opacity: 0;
transform: translate3d(0, -${spacing.unit}, 0);
opacity: 0;
transform: translate3d(0, -${spacing.unit}, 0);
}
to {
opacity: 1;
transform: none;
opacity: 1;
transform: none;
}
}
opacity: 0;
animation: fade-and-slide-in-from-top-sm ${animations.timingAnimation} forwards
${animations.easing};
`


}
opacity: 0;
animation: fade-and-slide-in-from-top-sm ${animations.timingAnimation}
forwards ${animations.easing};
`;
94 changes: 46 additions & 48 deletions common/colors.js
View file
Original file line number Diff line number Diff line change
@@ -1,59 +1,57 @@
function shadeColor(color, percent, rgb) {
if (color == null) {
console.error("Null color is getting passed to darken");
}
var R = parseInt(color.substring(1, 3), 16);
var G = parseInt(color.substring(3, 5), 16);
var B = parseInt(color.substring(5, 7), 16);

R = parseInt((R * (100 + percent)) / 100);
G = parseInt((G * (100 + percent)) / 100);
B = parseInt((B * (100 + percent)) / 100);

function shadeColor(color, percent, rgb) {
if (color == null) {
console.error('Null color is getting passed to darken')
}
var R = parseInt(color.substring(1,3),16);
var G = parseInt(color.substring(3,5),16);
var B = parseInt(color.substring(5,7),16);

R = parseInt(R * (100 + percent) / 100);
G = parseInt(G * (100 + percent) / 100);
B = parseInt(B * (100 + percent) / 100);

R = (R<255)?R:255;
G = (G<255)?G:255;
B = (B<255)?B:255;
if (rgb == true) {
return `${R}, ${G}, ${B}`
}
var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

return "#"+RR+GG+BB;
R = R < 255 ? R : 255;
G = G < 255 ? G : 255;
B = B < 255 ? B : 255;
if (rgb == true) {
return `${R}, ${G}, ${B}`;
}
var RR = R.toString(16).length == 1 ? "0" + R.toString(16) : R.toString(16);
var GG = G.toString(16).length == 1 ? "0" + G.toString(16) : G.toString(16);
var BB = B.toString(16).length == 1 ? "0" + B.toString(16) : B.toString(16);

return "#" + RR + GG + BB;
}

export const darken = (color, percent, rgb) => shadeColor(color, -1*percent, rgb)
export const lighten = (color, percent, rgb) => shadeColor(color, percent, rgb)
let mainColor = '#334865';
let colorTextBase = '#313131'; // Default text color
let primaryColor = '#5764c6';
export const darken = (color, percent, rgb) =>
shadeColor(color, -1 * percent, rgb);
export const lighten = (color, percent, rgb) => shadeColor(color, percent, rgb);
let mainColor = "#334865";
let colorTextBase = "#313131"; // Default text color
let primaryColor = "#5764c6";
let darkPrimaryColor = darken(primaryColor, 5);
let lightPrimaryColor = lighten(primaryColor, 42);
let darkColor = '#333';
let darkGrayColor ='#666';
let darkerGrayColor = '#2B2B2B'
let grayColor = '#999'
let darkNavyColor = '#334865;';
let lightGrayColor = '#ccc';
let lightColor = '#fff';
let linkColor = primaryColor;
let darkLinkColor = darken(linkColor, 10);
let borderColor = '#efefef';
let bgColor = '#f8f8f8';
let lightPrimaryColor = lighten(primaryColor, 42);
let darkColor = "#333";
let darkGrayColor = "#666";
let darkerGrayColor = "#2B2B2B";
let grayColor = "#999";
let darkNavyColor = "#334865;";
let lightGrayColor = "#ccc";
let lightColor = "#fff";
let linkColor = primaryColor;
let darkLinkColor = darken(linkColor, 10);
let borderColor = "#efefef";
let bgColor = "#f8f8f8";
let darkBgColor = darken(bgColor, 3);
let lightBgColor = '#fff';
let lightBgColor = "#fff";
// Control colors
let controlColorSuccess = '#32b643';
let controlColorWarning = '#ffb700';
let controlColorDanger = '#e85600';
let controlColorSuccess = "#32b643";
let controlColorWarning = "#ffb700";
let controlColorDanger = "#e85600";
// Meta colors
let codeColor = '#e06870';
let highlightColor = '#ffe9b3';
let lightCodeColor = '#BABABA'
let codeColor = "#e06870";
let highlightColor = "#ffe9b3";
let lightCodeColor = "#BABABA";

export const colors = {
// Core colors
Expand Down Expand Up @@ -83,5 +81,5 @@ export const colors = {
// Meta colors
codeColor,
lightCodeColor,
highlightColor,
highlightColor
};
57 changes: 40 additions & 17 deletions common/constants.js
View file
Original file line number Diff line number Diff line change
@@ -1,46 +1,69 @@
import { colors, darken, lighten } from '@common/colors'
import { colors, darken, lighten } from "@common/colors";
const unit = 12;
const gutter = unit * 2;
const globalWidth = 1250;
const globalEasing = `cubic-bezier(0.24, 0.8, 0, 0.97)`
const globalEasing = `cubic-bezier(0.24, 0.8, 0, 0.97)`;
const headerHeight = 100;

const timing = 0.38;
const easing = globalEasing;
const transition = `${timing} all ${easing}`;
const timingAnimation = `${0.38*2.5}`;
const timingAnimationDelay = `${0.38*2.5/2}`;
const transition = `${timing} all ${easing}`;
const timingAnimation = `${0.38 * 2.5}`;
const timingAnimationDelay = `${(0.38 * 2.5) / 2}`;
const animations = {
timing,
timingAnimation,
timingAnimationDelay,
easing,
transition
}
};

const fonts = {
headings: `"Nunito", sans-serif`,
body: `-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
Roboto`,
Roboto`
};

const spacing = {
unit,
gutter,
globalWidth,
headerHeight,
headerHeight
};


const effects = {
const effects = {
dropShadow: `0px 2px 8px rgba(${darken(colors.mainColor, 25, true)}, 0.4)`,
dropShadowLight: `0px 2px 6px rgba(${darken(colors.mainColor, 25, true)}, 0.08)`,
dropShadowXL: `0px 10px 20px rgba(${darken(colors.mainColor, 25, true)}, 0.4)`,
dropShadowXLLight: `0px 10px 20px rgba(${darken(colors.mainColor, 25, true)}, 0.2)`,
dropShadowLight: `0px 2px 6px rgba(${darken(
colors.mainColor,
25,
true
)}, 0.08)`,
dropShadowXL: `0px 10px 20px rgba(${darken(
colors.mainColor,
25,
true
)}, 0.4)`,
dropShadowXLLight: `0px 10px 20px rgba(${darken(
colors.mainColor,
25,
true
)}, 0.2)`,
dropShadowL: `0px 6px 14px rgba(${darken(colors.mainColor, 25, true)}, 0.4)`,
dropShadowLLight: `0px 6px 14px rgba(${darken(colors.mainColor, 25, true)}, 0.1)`,
dropShadowPressed: `0px 2px 2px rgba(${darken(colors.mainColor, 25, true)}, 0.2);`,
textShadowDefault: `0px 1px 2px rgba(${darken(colors.mainColor, 25, true)}, 0.5)`,
}
dropShadowLLight: `0px 6px 14px rgba(${darken(
colors.mainColor,
25,
true
)}, 0.1)`,
dropShadowPressed: `0px 2px 2px rgba(${darken(
colors.mainColor,
25,
true
)}, 0.2);`,
textShadowDefault: `0px 1px 2px rgba(${darken(
colors.mainColor,
25,
true
)}, 0.5)`
};

export { spacing, fonts, effects, animations };
Loading

1 comment on commit 9446a90

@vercel
Copy link

@vercel vercel bot commented on 9446a90 Oct 22, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully aliased the URL https://nteract-site-ivcqbjwqem.now.sh to the following alias.

Please sign in to comment.