Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@piperswe
piperswe committed Sep 22, 2021
0 parents commit 1205ca7
Show file tree
Hide file tree
Showing 12 changed files with 1,951 additions and 0 deletions.
126 changes: 126 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
example/out

# Created by https://www.toptal.com/developers/gitignore/api/node
# Edit at https://www.toptal.com/developers/gitignore?templates=node

### Node ###
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test
.env.production

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*

# End of https://www.toptal.com/developers/gitignore/api/node
3 changes: 3 additions & 0 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"editor.tabSize": 2
}
11 changes: 11 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
## How to use

Use the following as your `tailwind.config.js`:

```js
module.exports = {
presets: [
require('@lutris/tailwind-theme'),
],
};
```
13 changes: 13 additions & 0 deletions button.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
const plugin = require('tailwindcss/plugin');

const fontFamily = ['Montserrat', 'sans-serif'];

module.exports = plugin(({ addComponents }) => {
addComponents({
'.btn': {
display: 'inline-block',
padding: '15px 30px',
borderRadius: '6px',
},
});
});
49 changes: 49 additions & 0 deletions example/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="out/styles.css" />
</head>

<body>
<main class="container mx-auto">
<h1 class="headline-1 text-primary-dark">Lutris Engineering Tailwind Theme</h1>
<hr />
<section>
<h2 class="headline-2 text-primary" name="colors">Colors</h2>
<p class="body-1 text-primary" name="text-primary">text-primary</p>
<p class="body-1 text-primary-light" name="text-primary-light">text-primary-light</p>
<p class="body-1 text-primary-dark" name="text-primary-dark">text-primary-dark</p>
<p class="body-1 text-secondary" name="text-secondary">text-secondary</p>
<p class="body-1 text-secondary-light" name="text-secondary-light">text-secondary-light</p>
<p class="body-1 text-secondary-dark" name="text-secondary-dark">text-secondary-dark</p>
</section>
<hr />
<section>
<h2 class="headline-2 text-primary" name="typography">Typography</h2>
<p class="headline-1" name="headline-1">headline-1</p>
<p class="headline-2" name="headline-2">headline-2</p>
<p class="headline-3" name="headline-3">headline-3</p>
<p class="headline-4" name="headline-4">headline-4</p>
<p class="headline-5" name="headline-5">headline-5</p>
<p class="headline-6" name="headline-6">headline-6</p>
<p class="subtitle-1" name="subtitle-1">subtitle-1</p>
<p class="subtitle-2" name="subtitle-2">subtitle-2</p>
<p class="body-1" name="body-1">body-1</p>
<p class="body-2" name="body-2">body-2</p>
<p class="button-text" name="button-text">button-text</p>
<p class="caption" name="caption">caption</p>
<p class="overline" name="overline">overline</p>
</section>
<hr />
<section>
<h2 class="headline-2 text-primary" name="buttons">Buttons</h2>
<p name="btn-bg-secondary-text-white"><a href="#btn-bg-secondary-text-white"
class="btn bg-secondary text-white">btn bg-secondary text-white</a></p>
<p name="btn-bg-primary-text-white"><a href="#btn-bg-primary-text-white" class="btn bg-primary text-white">btn
bg-primary text-white</a></p>
</section>
</main>
</body>

</html>
3 changes: 3 additions & 0 deletions example/styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
28 changes: 28 additions & 0 deletions index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
module.exports = {
presets: [
require('tailwindcss/stubs/defaultConfig.stub'),
],
theme: {
extend: {
colors: {
primary: {
light: '#A09FA0',
DEFAULT: '#6E7780',
dark: '#5C5E64',
},
secondary: {
light: '#B0D8D7',
DEFAULT: '#009598',
dark: '#008889',
},
},
},
fontFamily: {
sans: ['Montserrat', 'sans-serif'],
},
},
plugins: [
require('./typography'),
require('./button'),
],
};
25 changes: 25 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"name": "@lutris/tailwind-theme",
"version": "0.1.0",
"description": "The Tailwind CSS theme for the Lutris Engineering brand guide",
"main": "index.js",
"repository": "https://github.com/LutrisEng/tailwind-theme",
"author": "Piper McCorkle <[email protected]>",
"license": "BlueOak-1.0.0 OR BSD-2-Clause-Patent",
"scripts": {
"build-example": "postcss example/styles.css -o example/out/styles.css && ncp example/index.html example/out/index.html"
},
"private": false,
"dependencies": {},
"peerDependencies": {
"tailwindcss": "^2.2.15"
},
"devDependencies": {
"autoprefixer": "^10.3.4",
"cssnano": "^5.0.8",
"ncp": "^2.0.0",
"postcss": "^8.3.6",
"postcss-cli": "^8.3.1",
"tailwindcss": "^2.2.15"
}
}
9 changes: 9 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
require('cssnano')({
preset: 'default',
}),
],
};
10 changes: 10 additions & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
module.exports = {
presets: [
require('.'),
],
purge: {
content: [
'./example/index.html',
],
},
};
88 changes: 88 additions & 0 deletions typography.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
const plugin = require('tailwindcss/plugin');

const fontFamily = ['Montserrat', 'sans-serif'];

module.exports = plugin(({ addComponents }) => {
addComponents({
'.headline-1': {
fontFamily,
fontWeight: 'bold',
fontSize: '96px',
letterSpacing: '-1.5px',
},
'.headline-2': {
fontFamily,
fontWeight: '600',
fontSize: '64px',
letterSpacing: '-0.5px',
},
'.headline-3': {
fontFamily,
fontWeight: 'normal',
fontSize: '48px',
letterSpacing: '0px',
},
'.headline-4': {
fontFamily,
fontWeight: 'normal',
fontSize: '36px',
letterSpacing: '0.25px',
},
'.headline-5': {
fontFamily,
fontWeight: 'normal',
fontSize: '24px',
letterSpacing: '0px',
},
'.headline-6': {
fontFamily,
fontWeight: 'normal',
fontSize: '20px',
letterSpacing: '0.15px',
},
'.subtitle-1': {
fontFamily,
fontWeight: 'normal',
fontSize: '16px',
letterSpacing: '0.15px',
},
'.subtitle-2': {
fontFamily,
fontWeight: 'normal',
fontSize: '14px',
letterSpacing: '0.1px',
},
'.body-1': {
fontFamily,
fontWeight: 'normal',
fontSize: '16px',
letterSpacing: '0.5px',
},
'.body-2': {
fontFamily,
fontWeight: 'normal',
fontSize: '14px',
letterSpacing: '0.25px',
},
'.button-text, .btn': {
fontFamily,
fontWeight: '500',
fontSize: '14px',
letterSpacing: '1.25px',
textTransform: 'uppercase',
},
'.caption': {
fontFamily,
fontWeight: 'normal',
fontSize: '12px',
letterSpacing: '0.4px',
},
'.overline': {
fontFamily,
fontWeight: 'normal',
fontSize: '10px',
letterSpacing: '1.5px',
textTransform: 'uppercase',
},
});
});
Loading

0 comments on commit 1205ca7

Please sign in to comment.