From 674c9699a12f5c6d70ebb463f0f82c93d40995e6 Mon Sep 17 00:00:00 2001 From: pritam Date: Thu, 1 Oct 2020 16:39:19 +0530 Subject: [PATCH] feat: color, font color standardisation --- docs/docs/border-radius.md | 24 ++++---- docs/docs/border-width.md | 16 +++--- docs/docs/box-shadow.md | 6 +- docs/docs/button.md | 2 +- docs/docs/card.md | 4 +- docs/docs/colors.md | 61 ++++++++++++++++++-- docs/docs/cursor.md | 6 +- docs/docs/font-color.md | 4 +- docs/docs/getting-started.md | 2 +- docs/docs/grid.md | 16 +++--- docs/docs/presscard.md | 2 +- docs/docs/responsive-design.md | 2 +- src/components/Button/button.css | 6 +- src/components/Card/card.css | 4 +- src/components/Card/presscard.css | 2 +- tailwind.config.js | 95 ++++++++++++++++++++++++------- 16 files changed, 178 insertions(+), 74 deletions(-) diff --git a/docs/docs/border-radius.md b/docs/docs/border-radius.md index f3b7d87..eaa879c 100644 --- a/docs/docs/border-radius.md +++ b/docs/docs/border-radius.md @@ -9,12 +9,12 @@ Utility classes to control the border radius ```html live <>
-
sm - 2px
-
md - 4px
-
lg - 8px
+
sm - 2px
+
md - 4px
+
lg - 8px
- Full - 50%
+ Full - 50%
``` @@ -26,10 +26,10 @@ Use `lil-rounded-{l|r|t|n}-{size}` to round one side of an element ```html live <>
-
left rounded
-
right rounded
-
top rounded
-
bottom rounded
+
left rounded
+
right rounded
+
top rounded
+
bottom rounded
``` @@ -39,10 +39,10 @@ Or use `lil-rounded-{tl|tr|bl|br}-{size}` to round one corner of an element ```html live <>
-
top-left rounded
-
top-right rounded
-
bottom-left rounded
-
bottom-right rounded
+
top-left rounded
+
top-right rounded
+
bottom-left rounded
+
bottom-right rounded
``` diff --git a/docs/docs/border-width.md b/docs/docs/border-width.md index 53b5fe4..510074f 100644 --- a/docs/docs/border-width.md +++ b/docs/docs/border-width.md @@ -9,10 +9,10 @@ Utilities for controlling the width of an element's borders. ```html live <>
-
sm - 1px
-
md - 2px
-
lg - 3px
-
xl - 4px
+
sm - 1px
+
md - 2px
+
lg - 3px
+
xl - 4px
``` @@ -22,10 +22,10 @@ Border widths can also be applied to individual side by following the convention ```html live <>
-
top border
-
border bottom
-
left border
-
right border
+
top border
+
border bottom
+
left border
+
right border
``` diff --git a/docs/docs/box-shadow.md b/docs/docs/box-shadow.md index af992a9..0771a66 100644 --- a/docs/docs/box-shadow.md +++ b/docs/docs/box-shadow.md @@ -9,9 +9,9 @@ Utilities for controlling the box shadow of an element. ```html live <>
-
sm
-
md
-
lg
+
sm
+
md
+
lg
``` diff --git a/docs/docs/button.md b/docs/docs/button.md index b4c90da..159afd7 100644 --- a/docs/docs/button.md +++ b/docs/docs/button.md @@ -11,7 +11,7 @@ sidebar_label: Button
-
+
diff --git a/docs/docs/card.md b/docs/docs/card.md index 204aae8..902393d 100644 --- a/docs/docs/card.md +++ b/docs/docs/card.md @@ -40,7 +40,7 @@ sidebar_label: Cards
-
+
@@ -55,7 +55,7 @@ sidebar_label: Cards
-
+
diff --git a/docs/docs/colors.md b/docs/docs/colors.md index 0e9d1fb..400a927 100644 --- a/docs/docs/colors.md +++ b/docs/docs/colors.md @@ -11,42 +11,93 @@ Here is a color palette based on the specifications. Each of these colors can be <>

Blue

-
Blue 50
Blue 100
+
Blue 150
Blue 200
-
Blue 300
+
Blue 250
+
Blue 300
+
Blue 350
Blue 400
+
Blue 450
+
Blue 500
+
Blue 550
+
+
+

Clearsky

+
Clearsky 100
+
Clearsky 200
+
Clearsky 300
+
Clearsky 400
+
Clearsky 500

Green

Green 100
+
Green 150
Green 200
-
Green 300
+
Green 250
+
Green 300
+
Green 350
+
Green 400
+
Green 450
+
Green 500

Orange

Orange 100
+
Orange 150
Orange 200
-
Orange 300
+
Orange 250
+
Orange 300
+
Orange 350
+
Orange 400
+
Orange 500

Grey

Grey 100
+
Grey 150
Grey 200
+
Grey 250
Grey 300
-
Grey 400
+
Grey 350
+
Grey 400
+
Grey 450
Grey 500
+
Grey 550
+
Grey 600
+
+
+

Yellow

+
Yellow 100
+
Yellow 200
+
Yellow 300
+
Yellow 400
+
Yellow 500
+
Yellow 600
+
+
+

Purple

+
Purple 100
+
Purple 200
+
Purple 300
+
Purple 400
+
Purple 500

Font

Font 100
Font 200
Font 300
+
Font 400
+
Font 500
+
Font 600

Common

White
Black
+
Red
Transparent
diff --git a/docs/docs/cursor.md b/docs/docs/cursor.md index e4c90d6..0facdf5 100644 --- a/docs/docs/cursor.md +++ b/docs/docs/cursor.md @@ -11,9 +11,9 @@ Utilities for controlling the cursor style when hovering over an element. Hover on the cards to check the cursors
-
pointer
-
text
-
not-allowed
+
pointer
+
text
+
not-allowed
``` diff --git a/docs/docs/font-color.md b/docs/docs/font-color.md index 17c9b2c..e7f07e5 100644 --- a/docs/docs/font-color.md +++ b/docs/docs/font-color.md @@ -10,8 +10,8 @@ Control the font color of an element using the `lil-text-{color}` utilities. You <>

Black

White

-

Blue 100

-

Blue 200

+

Blue 250

Blue 300

+

Blue 400

``` diff --git a/docs/docs/getting-started.md b/docs/docs/getting-started.md index 90c20c5..87027d3 100755 --- a/docs/docs/getting-started.md +++ b/docs/docs/getting-started.md @@ -18,5 +18,5 @@ Want to use `littleGIANT`? Just Copy-paste the following snippet into your `Hello + ``` diff --git a/docs/docs/grid.md b/docs/docs/grid.md index 1164292..1be741c 100644 --- a/docs/docs/grid.md +++ b/docs/docs/grid.md @@ -11,19 +11,19 @@ Examples and Documentation of building grid layouts with LittleGiant ```html live <>
-
Width 1/2
-
Width 1/2
+
Width 1/2
+
Width 1/2
-
Width 1/3
-
Width 1/3
-
Width 1/3
+
Width 1/3
+
Width 1/3
+
Width 1/3
-
Width 1/4
-
Width 1/4
+
Width 1/4
+
Width 1/4
+
Width 1/4
Width 1/4
-
Width 1/4
``` diff --git a/docs/docs/presscard.md b/docs/docs/presscard.md index 60cfa97..b99dd58 100644 --- a/docs/docs/presscard.md +++ b/docs/docs/presscard.md @@ -8,7 +8,7 @@ sidebar_label: Press Card ```html live <> -
+
2019 diff --git a/docs/docs/responsive-design.md b/docs/docs/responsive-design.md index ec351e2..458adeb 100644 --- a/docs/docs/responsive-design.md +++ b/docs/docs/responsive-design.md @@ -34,6 +34,6 @@ To add a utility but only have it take effect at a certain breakpoint, all you n ```html live <> -
I am responsive
+
I am responsive
``` diff --git a/src/components/Button/button.css b/src/components/Button/button.css index 6560e3d..2a9c53b 100644 --- a/src/components/Button/button.css +++ b/src/components/Button/button.css @@ -3,13 +3,13 @@ @apply lil-inline-flex lil-py-3 lil-px-6 lil-rounded-lg lil-text-center lil-justify-center lil-items-center lil-font-bold; } .lil-btn-blue { - @apply lil-bg-blue-250 lil-text-white; + @apply lil-bg-blue-350 lil-text-white; } .lil-btn-white { - @apply lil-bg-white lil-text-blue-250; + @apply lil-bg-white lil-text-blue-350; } .lil-btn-link { - @apply lil-inline-flex lil-text-blue-250 lil-font-bold lil-text-base; + @apply lil-inline-flex lil-text-blue-350 lil-font-bold lil-text-base; } .lil-btn-link > .lil-icon { @apply lil-ml-1; diff --git a/src/components/Card/card.css b/src/components/Card/card.css index ff4fc56..88c7f1f 100644 --- a/src/components/Card/card.css +++ b/src/components/Card/card.css @@ -3,7 +3,7 @@ .lil-card { height: 250px; width: 250px; - @apply lil-rounded-xl lil-bg-grey-150 lil-p-5 lil-relative lil-cursor-pointer; + @apply lil-rounded-xl lil-bg-grey-350 lil-p-5 lil-relative lil-cursor-pointer; } .lil-card > .lil-card-header { height: 65%; @@ -17,7 +17,7 @@ @apply lil-w-full lil-clear-both; } .lil-card > .lil-card-content { - @apply lil-rounded-xl lil-hidden lil-h-full lil-w-full lil-bg-blue-100 lil-absolute lil-top-0 lil-left-0 lil-p-5 lil-text-white lil-whitespace-normal; + @apply lil-rounded-xl lil-hidden lil-h-full lil-w-full lil-bg-blue-250 lil-absolute lil-top-0 lil-left-0 lil-p-5 lil-text-white lil-whitespace-normal; } .lil-card:hover > .lil-card-content { @apply lil-block; diff --git a/src/components/Card/presscard.css b/src/components/Card/presscard.css index a015b47..75633bf 100644 --- a/src/components/Card/presscard.css +++ b/src/components/Card/presscard.css @@ -11,7 +11,7 @@ Colors have to be modified for .lil-presscard-heading & .lil-presscard-content @apply lil-text-base lil-text-black lil-text-center lil-mx-2 lil-my-3 lil-h-12; } .lil-presscard > .lil-presscard-content { - @apply lil-text-s-24 lil-text-blue-300 lil-text-center lil-font-bold lil-h-24 lil-whitespace-normal; + @apply lil-text-s-24 lil-text-blue-400 lil-text-center lil-font-bold lil-h-24 lil-whitespace-normal; } .lil-presscard > .lil-presscard-image { @apply lil-flex lil-justify-center lil-items-center lil-mx-2 lil-h-24; diff --git a/tailwind.config.js b/tailwind.config.js index 9b1fbec..a6277bb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,38 +3,91 @@ module.exports = { colors: { transparent: "transparent", blue: { - 50: "#CFE4FF", - 100: "#7FB7FE", - 200: "#2F89FC", - 250: "#1678FB", - 300: "#185EB8", - 400: "#003273", + 100: "#D0E4FE", + 150: "#CFE4FF", + 200: "#8ABBFD", + 250: "#7FB7FE", + 300: "#2F89FC", + 350: "#1678FB", + 400: "#185EB8", + 450: "#0F54B0", + 500: "#003273", + 550: "#07244B", + }, + clearsky: { + 100: "#E7F7FF", + 200: "#C4EAFF", + 300: "#89D6FF", + 400: "#6096B2", + 500: "#29404C", }, green: { - 100: "#7FE3AD", - 200: "#2BCF76", - 300: "#169451", + 100: "#DBF9E9", + 150: "#A4EFC9", + 200: "#7FE3AD", + 250: "#4ADF93", + 300: "#2BCF76", + 350: "#16CC65", + 400: "#349C67", + 450: "#169451", + 500: "#16432C", + }, + pink: { + 100: "#FDE4EC", + 200: "#FABCCF", + 300: "#F579A0", + 400: "#AB5570", + 500: "#492430", + }, + purple: { + 100: "#E5E2FD", + 200: "#BDB7FA", + 300: "#7C6FF5", + 400: "#574EAB", + 500: "#252149", }, orange: { - 100: "#FFC194", - 200: "#FE9D54", - 300: "#B9642A", + 100: "#FEEADC", + 150: "#FDCAA7", + 200: "#FFC194", + 250: "#FE9D54", + 300: "#FB9650", + 350: "#B9642A", + 400: "#B06938", + 500: "#4B2D18", }, grey: { - 100: "#FAFBFF", - 150: "#D6D6D6", - 200: "#CFD4DD", - 300: "#ADB1BB", - 400: "#8B8F99", - 500: "#686D77", + 100: "#FAFAFA", + 150: "#F5F5F5", + 200: "#FAFBFF", + 250: "#EEEEEE", + 300: "#E0E0E0", + 350: "#D6D6D6", + 400: "#CFD4DD", + 450: "#ADB1BB", + 500: "#8B8F99", + 550: "#686D77", + 600: "#23282E", + }, + yellow: { + 100: "#FEF6DC", + 200: "#FDE9A8", + 300: "#FED580", + 400: "#FCD452", + 500: "#B09439", + 600: "#4C4019", }, font: { - 100: "#828999", - 200: "#464D5E", - 300: "#303654", + 100: "#E5E5E9", + 200: "#9092A3", + 300: "#828999", + 400: "#464D5E", + 500: "#314259", + 600: "#303654", }, white: "#ffffff", black: "#000000", + red: "#FA324C", }, borderRadius: { sm: "2px",