From 47b281b754a77a2104d39bafa5ea49584f8840cc Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 09:37:14 +0200 Subject: Implements color variables and updates components --- packages/dev-tools-pages/ts/variables.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 packages/dev-tools-pages/ts/variables.tsx (limited to 'packages/dev-tools-pages/ts/variables.tsx') diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx new file mode 100644 index 000000000..8590547df --- /dev/null +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -0,0 +1,12 @@ +const variables = { + colors: { + black: '#000000', + white: '#FFFFFF', + lightGray: '#F1F4F5', + gray: '#F1F2F7', + darkGray: '#E9ECED', + blueGray: '#ECEFF9', + }, +}; + +export default variables; -- cgit v1.2.3 From ee3538262d2d736168324a3f60a49cd87d65abb1 Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 11:32:59 +0200 Subject: Changed name of export to colors and updates components --- packages/dev-tools-pages/ts/variables.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'packages/dev-tools-pages/ts/variables.tsx') diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index 8590547df..b1e0271d1 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -1,5 +1,6 @@ -const variables = { - colors: { +import { css } from 'styled-components'; + +const colors = { black: '#000000', white: '#FFFFFF', lightGray: '#F1F4F5', @@ -10,3 +11,4 @@ const variables = { }; export default variables; +export { colors, media }; -- cgit v1.2.3 From e9232bf0707fb120d2c8d9cbd842702ffc8cb19e Mon Sep 17 00:00:00 2001 From: Megan Pearson Date: Fri, 19 Oct 2018 11:33:41 +0200 Subject: Exports media breakpoints --- packages/dev-tools-pages/ts/variables.tsx | 35 ++++++++++++++++++++++++------- 1 file changed, 27 insertions(+), 8 deletions(-) (limited to 'packages/dev-tools-pages/ts/variables.tsx') diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index b1e0271d1..b23bb3e52 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -1,14 +1,33 @@ import { css } from 'styled-components'; const colors = { - black: '#000000', - white: '#FFFFFF', - lightGray: '#F1F4F5', - gray: '#F1F2F7', - darkGray: '#E9ECED', - blueGray: '#ECEFF9', - }, + black: '#000000', + white: '#FFFFFF', + lightGray: '#F1F4F5', + gray: '#F1F2F7', + darkGray: '#E9ECED', + blueGray: '#ECEFF9', }; -export default variables; +interface SizesInterface { + [key: string]: number; +} + +const sizes: SizesInterface = { + large: 992, + medium: 768, + small: 376, +}; + +const media = Object.keys(sizes).reduce((acc: any, label: string) => { + acc[label] = (args: any) => css` + @media (max-width: ${sizes[label] / 16}em) { + ${css(args)}; + } + `; + + return acc; +}, {}); + +export default media; export { colors, media }; -- cgit v1.2.3 From e5d3e3b33a88e2b08ed02cb39910fab28e130594 Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 25 Oct 2018 10:54:53 +0100 Subject: Feature/tweaks (#8) * show copy button on focs * change base link styling * text-decoration underline on basic links * basic hover and focus styles on button and tabs * add links in footer * change breakpoints vars * medium breakpoint on footer --- packages/dev-tools-pages/ts/variables.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'packages/dev-tools-pages/ts/variables.tsx') diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index b23bb3e52..8f08d13eb 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -14,9 +14,8 @@ interface SizesInterface { } const sizes: SizesInterface = { - large: 992, - medium: 768, - small: 376, + medium: 900, + small: 650, }; const media = Object.keys(sizes).reduce((acc: any, label: string) => { -- cgit v1.2.3 From 43e55a963bef2a2e4740ce27d456927b020b71f2 Mon Sep 17 00:00:00 2001 From: August Skare Date: Thu, 25 Oct 2018 12:19:56 +0100 Subject: Feature/syntaxhighlighting (#9) * wip code highlighting of lines * Implements gutter component * WIP: Profiler with gutter * cleaned up highlight code * Removes before content for gutter styling * Styles gutter * Add correct Profiler code content * Adds color variable for gutter gray * refactor code component width gutter and diffing --- packages/dev-tools-pages/ts/variables.tsx | 1 + 1 file changed, 1 insertion(+) (limited to 'packages/dev-tools-pages/ts/variables.tsx') diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index 8f08d13eb..76a675546 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -6,6 +6,7 @@ const colors = { lightGray: '#F1F4F5', gray: '#F1F2F7', darkGray: '#E9ECED', + darkestGray: '#E2E5E6', blueGray: '#ECEFF9', }; -- cgit v1.2.3 From 0e3cd82348570ed4c524d3b4f216001089f49125 Mon Sep 17 00:00:00 2001 From: August Skare Date: Mon, 29 Oct 2018 08:15:20 +0000 Subject: Fixes/august (#12) * fix button dimensions * fix footer hover color * breakout in trace component * fix padding on button on small screens * fix title with content on small screens * sizing adjustment in intro component * intro component adjustments * container size adjustments * meta og images * fixed gutter size * trace component fix + breakout fix * show copy button if touch device * responsive hero animation --- packages/dev-tools-pages/ts/variables.tsx | 2 ++ 1 file changed, 2 insertions(+) (limited to 'packages/dev-tools-pages/ts/variables.tsx') diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index 76a675546..258e5d225 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -15,6 +15,8 @@ interface SizesInterface { } const sizes: SizesInterface = { + xlarge: 1420, + large: 1000, medium: 900, small: 650, }; -- cgit v1.2.3 From 54bd7df900316504e4403bc94cffd92930a6c763 Mon Sep 17 00:00:00 2001 From: August Skare Date: Fri, 16 Nov 2018 11:05:30 +0100 Subject: fix linting + code syntax for statless components --- packages/dev-tools-pages/ts/variables.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'packages/dev-tools-pages/ts/variables.tsx') diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx index 258e5d225..5ea495036 100644 --- a/packages/dev-tools-pages/ts/variables.tsx +++ b/packages/dev-tools-pages/ts/variables.tsx @@ -31,5 +31,4 @@ const media = Object.keys(sizes).reduce((acc: any, label: string) => { return acc; }, {}); -export default media; export { colors, media }; -- cgit v1.2.3