Commit 420b7a7c authored by Clarissa Lima Borges's avatar Clarissa Lima Borges Committed by Clarissa Lima Borges
Browse files

base: Adds typography and buttons

parent 5f4e4628
@tailwind base;
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
html {
@apply font-sans;
}
h1 {
@apply text-6xl;
}
h2 {
@apply text-5xl text-gnome-blue-500;
}
h3 {
@apply text-3xl font-light;
}
h4 {
@apply text-3xl font-semibold;
}
@tailwind components;
@tailwind utilities;
\ No newline at end of file
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap');
html {
@apply font-sans;
}
h1 {
@apply text-6xl;
}
h2 {
@apply text-5xl text-gnome-blue-500;
}
h3 {
@apply text-3xl font-light;
}
h4 {
@apply text-3xl font-semibold;
}
\ No newline at end of file
......@@ -5,12 +5,15 @@
"main": "postcss.config.js",
"dependencies": {
"autoprefixer": "^9.8.5",
"colors": "^1.4.0",
"lodash": "^4.17.19",
"postcss-cli": "^7.1.1",
"tailwindcss": "^1.5.1"
},
"devDependencies": {},
"scripts": {
"build": "postcss css/tailwind.css -o public/build/tailwind.css"
"build": "postcss css/tailwind.css -o public/build/tailwind.css",
"watch": "postcss css/tailwind.css -o public/build/tailwind.css --watch"
},
"repository": {
"type": "git",
......@@ -19,4 +22,4 @@
"keywords": [],
"author": "",
"license": "ISC"
}
\ No newline at end of file
}
const defaultTheme = require('tailwindcss/resolveConfig')(require('tailwindcss/defaultConfig')).defaultTheme
module.exports = {
padding: '.5rem 1rem',
borderRadius: '.25rem',
fontWeight: '600',
colors: {
"gnome-blue": {
background: defaultTheme.colors['gnome-blue-500'],
text: defaultTheme.colors['white'],
hover: defaultTheme.colors['gnome-blue-300']
},
green: {
background: defaultTheme.colors['green-500'],
text: defaultTheme.colors['white'],
hover: defaultTheme.colors['green-300']
},
red: {
background: defaultTheme.colors['red-500'],
text: defaultTheme.colors['white'],
hover: defaultTheme.colors['red-300']
},
orange: {
background: defaultTheme.colors['orange-500'],
text: defaultTheme.colors['white'],
hover: defaultTheme.colors['orange-300']
},
yellow: {
background: defaultTheme.colors['yellow-500'],
text: defaultTheme.colors['black'],
hover: defaultTheme.colors['yellow-300']
}
},
sizes: {
sm: {
fontSize: '.875rem',
padding: '.5rem .75rem'
},
lg: {
fontSize: '1.25rem',
padding: '.75rem 1.5rem'
}
}
}
\ No newline at end of file
module.exports = function () {
return function ({ addComponents, e }) {
const buttons = {
'.btn': {
padding: '.5rem 1rem',
borderRadius: '.25rem',
fontWeight: '600',
border: '3px solid transparent',
},
'.btn-primary': {
backgroundColor: '#4295DB',
color: '#fff',
'&:hover': {
backgroundColor: '#98C5EB'
}
},
'.btn-secondary': {
backgroundColor: 'transparent',
borderColor: '#F48339',
color: '#F48339',
'&:hover': {
backgroundColor: '#F48339',
color: '#fff'
}
}
}
addComponents(buttons);
}
}
\ No newline at end of file
module.exports = function ({ addComponents, config }) {
const buttons = {
'.btn': {
padding: '.5rem 1rem',
borderRadius: '.25rem',
fontWeight: '600',
border: '3px solid transparent',
},
'.btn-gnome-blue': {
backgroundColor: '#4295DB',
color: '#fff',
'&:hover': {
backgroundColor: '#98C5EB'
}
},
'.btn-gnome-blue-ghost': {
backgroundColor: 'transparent',
borderColor: '#4295DB',
color: '#4295DB',
'&:hover': {
backgroundColor: '#4295DB',
color: '#fff'
}
},
'.btn-red': {
backgroundColor: '#FF292B',
color: '#fff',
'&:hover': {
backgroundColor: '#FF8F90'
}
},
'.btn-red-ghost': {
backgroundColor: 'transparent',
borderColor: '#FF292B',
color: '#FF292B',
'&:hover': {
backgroundColor: '#FF292B',
color: '#fff'
}
},
'.btn-orange': {
backgroundColor: '#F48339',
color: '#fff',
'&:hover': {
backgroundColor: '#F9C09A'
}
},
'.btn-orange-ghost': {
backgroundColor: 'transparent',
borderColor: '#F48339',
color: '#F48339',
'&:hover': {
backgroundColor: '#F48339',
color: '#fff'
}
},
'.btn-yellow': {
backgroundColor: '#FFB711',
color: '#fff',
'&:hover': {
backgroundColor: '#FFD575'
}
},
'.btn-yellow-ghost': {
backgroundColor: 'transparent',
borderColor: '#FFB711',
color: '#FFB711',
'&:hover': {
backgroundColor: '#FFB711',
color: '#fff'
}
},
'.btn-green': {
backgroundColor: '#8DD143',
color: '#fff',
'&:hover': {
backgroundColor: '#BEE595'
}
},
'.btn-green-ghost': {
backgroundColor: 'transparent',
borderColor: '#8DD143',
color: '#8DD143',
'&:hover': {
backgroundColor: '#8DD143',
color: '#fff'
}
},
}
addComponents(buttons);
}
\ No newline at end of file
module.exports = function ({ addBase, config }) {
const typography = {
'h1': { fontSize: config('theme.fontSize.6xl') },
'h2': { fontSize: config('theme.fontSize.5xl') },
'h3': {
fontSize: config('theme.fontSize.3xl'),
fontWeight: config('theme.font-light')
},
'h4': {
fontSize: config('theme.fontSize.3xl'),
fontWeight: config('theme.font-semibold')
}
}
addBase(typography);
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../build/tailwind.css">
<title>Sample</title>
</head>
<body class="bg-gray-100">
<div class="container my-8 mx-auto shadow-lg p-8 rounded-md bg-white">
<h2 class="mb-4">Typography</h2>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p class="text-2xl">Large text</p>
<p class="text-xl">Medium text</p>
<p class="text-base">Regular text</p>
<p class="text-sm">Small text</p>
</div>
<div class="container my-8 mx-auto shadow-lg p-8 rounded-md bg-white">
<h2 class="mb-4">Buttons</h2>
<div class="container flex-grow">
<h3 class="py-2">Default</h3>
<button class="btn btn-gnome-blue mr-2">GNOME Blue</button>
<button class="btn btn-red mr-2">Red</button>
<button class="btn btn-orange mr-2">Orange</button>
<button class="btn btn-yellow mr-2">Yellow</button>
<button class="btn btn-green">Green</button>
</div>
<div class="container flex-grow">
<h3 class="py-2">Ghost</h3>
<button class="btn btn-gnome-blue-ghost mr-2">GNOME Blue</button>
<button class="btn btn-red-ghost mr-2">Red</button>
<button class="btn btn-orange-ghost mr-2">Orange</button>
<button class="btn btn-yellow-ghost mr-2">Yellow</button>
<button class="btn btn-green-ghost mr-2">Green</button>
</div>
</div>
</body>
</html>
\ No newline at end of file
......@@ -93,9 +93,23 @@ module.exports = {
}
},
},
fontFamily: {
sans: [
'"Source Sans Pro"',
'Cantarell',
'"Droid Sans"',
'Ubuntu',
'"DejaVu Sans"',
'Arial',
'sans-serif',
],
},
},
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'active'],
},
plugins: [],
plugins: [
require('./plugins/buttons'),
// require('./plugins/typography')
],
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment