diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less index 15e070c1a..d7bd87d3d 100644 --- a/docs/source/_assets/less/main.less +++ b/docs/source/_assets/less/main.less @@ -31,33 +31,3 @@ a { '12' 3rem, '16' 4rem, ; - -@text-colors: - 'light' @text-light, - 'light-soft' @text-light-soft, - 'light-softer' @text-light-softer, - 'light-softest' @text-light-softest, - - 'dark' @text-dark, - 'dark-soft' @text-dark-soft, - 'dark-softer' @text-dark-softer, - 'dark-softest' @text-dark-softest, - - 'primary' #3498DB, - 'primary-light' lighten(#3498DB, 25%), - 'primary-dark' #2980B9, -; - -@bg-colors: - 'light' hsl(0, 0%, 100%), - 'light-soft' hsl(0, 0%, 98%), - 'light-softer' hsl(0, 0%, 96%), - - 'dark' hsl(0, 0%, 33%), - 'dark-soft' hsl(0, 0%, 42%), - 'dark-softer' hsl(0, 0%, 52%), - - 'primary' #3498db, - 'primary-light' #a0cfee, - 'primary-dark' #2980b9, -; diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less index 212a809d6..303943cc5 100644 --- a/docs/source/_assets/less/markdown.less +++ b/docs/source/_assets/less/markdown.less @@ -14,7 +14,7 @@ } a { - .text-primary; + .text-blue; } p code { @@ -38,13 +38,13 @@ .text-dark-softer; .text-thin; .text-2xl; - .text-primary; + .text-blue; } h2 { .mt-16; .mb-8; - .text-primary; + .text-blue; .leading-none; .text-thin; .text-xl; diff --git a/docs/source/_layouts/master.blade.php b/docs/source/_layouts/master.blade.php index 7ed1d962e..d8c621bf9 100644 --- a/docs/source/_layouts/master.blade.php +++ b/docs/source/_layouts/master.blade.php @@ -9,14 +9,14 @@ -
+
Tailwind CSS -
A utility-first CSS framework for rapid UI development
+
A utility-first CSS framework for rapid UI development
@@ -24,36 +24,36 @@
diff --git a/docs/source/backgrounds.md b/docs/source/backgrounds.md index cefc3a8ca..56bc4a035 100644 --- a/docs/source/backgrounds.md +++ b/docs/source/backgrounds.md @@ -5,6 +5,73 @@ title: "Backgrounds" # Backgrounds + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
.bg-light
.bg-light-soft
.bg-light-softer
.bg-dark
.bg-dark-soft
.bg-dark-softer
.bg-red
.bg-red-light
.bg-amber
.bg-amber-light
.bg-green
.bg-green-light
.bg-blue
.bg-blue-light
.bg-indigo
.bg-indigo-light
+ Using the utilities in HTML: ```html diff --git a/src/colors.less b/src/colors.less index bdd77f5f2..47de8cef0 100644 --- a/src/colors.less +++ b/src/colors.less @@ -13,18 +13,16 @@ @color-red: #f25451; @color-red-light: #fa8785; -@color-orange: #ffb447; -@color-orange-light: #ffce85; -@color-yellow: #ffed4a; -@color-yellow-light: #fff6a5; +@color-amber: #ffd129; +@color-amber-light: #ffedad; @color-green: #77d48a; @color-green-light: #b1f3be; @color-teal: #4dc0b5; @color-teal-light: #92e0d8; @color-blue: #4aa2ea; @color-blue-light: #acdaff; -@color-indigo: #6574cd; -@color-indigo-light: #a3aeed; +@color-indigo: #6b64cc; +@color-indigo-light: #a9a4ed; @color-purple: #976ae6; @color-purple-light: #ceb3ff; @color-pink: #f66d9b; diff --git a/src/utilities/backgrounds.less b/src/utilities/backgrounds.less index 4d01c7c37..6206fbd1e 100644 --- a/src/utilities/backgrounds.less +++ b/src/utilities/backgrounds.less @@ -9,10 +9,8 @@ 'red' @color-red, 'red-light' @color-red-light, - 'orange' @color-orange, - 'orange-light' @color-orange-light, - 'yellow' @color-yellow, - 'yellow-light' @color-yellow-light, + 'amber' @color-amber, + 'amber-light' @color-amber-light, 'green' @color-green, 'green-light' @color-green-light, 'teal' @color-teal, diff --git a/src/utilities/borders.less b/src/utilities/borders.less index 7dfa658ba..c51690b88 100644 --- a/src/utilities/borders.less +++ b/src/utilities/borders.less @@ -8,24 +8,57 @@ ; // Colors -@border-dark: hsl(0, 0%, 82%); -@border-dark-soft: hsl(0, 0%, 90%); -@border-dark-softer: hsl(0, 0%, 96%); +@border-dark: @color-grey-600; +@border-dark-soft: @color-grey-400; +@border-dark-softer: @color-grey-300; -@border-light: hsl(0, 0%, 100%); -@border-light-soft: hsl(0, 0%, 60%); -@border-light-softer: hsl(0, 0%, 35%); +@border-light: @color-white; +@border-light-soft: @color-grey-100; +@border-light-softer: @color-grey-200; + +@border-dark-overlay: hsla(0, 0%, 0%, 20%); +@border-dark-overlay-soft: hsla(0, 0%, 0%, 10%); +@border-dark-overlay-softer: hsla(0, 0%, 0%, 5%); + +@border-light-overlay: hsla(0, 0%, 100%, 100%); +@border-light-overlay-soft: hsla(0, 0%, 100%, 60%); +@border-light-overlay-softer: hsla(0, 0%, 100%, 35%); @default-border-color: @border-dark-soft; @border-colors: - 'dark' @border-dark, - 'dark-soft' @border-dark-soft, - 'dark-softer' @border-dark-softer, + 'dark' @border-dark, + 'dark-soft' @border-dark-soft, + 'dark-softer' @border-dark-softer, - 'light' @border-light, - 'light-soft' @border-light-soft, + 'light' @border-light, + 'light-soft' @border-light-soft, 'light-softer' @border-light-softer, + + 'dark-overlay' @border-dark-overlay, + 'dark-overlay-soft' @border-dark-overlay-soft, + 'dark-overlay-softer' @border-dark-overlay-softer, + + 'light-overlay' @border-light-overlay, + 'light-overlay-soft' @border-light-overlay-soft, + 'light-overlay-softer' @border-light-overlay-softer, + + 'red' @color-red, + 'red-light' @color-red-light, + 'amber' @color-amber, + 'amber-light' @color-amber-light, + 'green' @color-green, + 'green-light' @color-green-light, + 'teal' @color-teal, + 'teal-light' @color-teal-light, + 'blue' @color-blue, + 'blue-light' @color-blue-light, + 'indigo' @color-indigo, + 'indigo-light' @color-indigo-light, + 'purple' @color-purple, + 'purple-light' @color-purple-light, + 'pink' @color-pink, + 'pink-light' @color-pink-light, ; // Radius diff --git a/src/utilities/sizing.less b/src/utilities/sizing.less index 1104caece..e88501c7f 100644 --- a/src/utilities/sizing.less +++ b/src/utilities/sizing.less @@ -7,6 +7,7 @@ '8' 2rem, '12' 3rem, '16' 4rem, + '24' 6rem, ; @width-scale: @sizing-scale; diff --git a/src/utilities/text.less b/src/utilities/text.less index c42666370..41aae8795 100644 --- a/src/utilities/text.less +++ b/src/utilities/text.less @@ -69,10 +69,8 @@ 'red' @color-red, 'red-light' @color-red-light, - 'orange' @color-orange, - 'orange-light' @color-orange-light, - 'yellow' @color-yellow, - 'yellow-light' @color-yellow-light, + 'amber' @color-amber, + 'amber-light' @color-amber-light, 'green' @color-green, 'green-light' @color-green-light, 'teal' @color-teal,