Commit 9a338597 authored by Clarissa Lima Borges's avatar Clarissa Lima Borges Committed by Clarissa Lima Borges
Browse files

base: Update directories

parent 420b7a7c
@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
const gulp = require('gulp');
const compile = require('gulp-postcss');
const maps = require('gulp-sourcemaps');
const rename = require('gulp-rename');
const clean = require('gulp-clean-css');
gulp.task('build', () =>
gulp.src('src/index.css').
pipe(maps.init()).
pipe(compile()).
pipe(maps.write('.')).
pipe(gulp.dest('dist')).
pipe(clean()).
pipe(rename('index.min.css')).
pipe(gulp.dest('dist')),
);
\ No newline at end of file
This diff is collapsed.
{
"name": "general-website-resources",
"name": "@gnome/ui",
"version": "1.0.0",
"description": "This repository is meant for the discussion and work of the GNOME websites as a whole, not any individual website. Individual website implementations should belong in their own project.",
"main": "postcss.config.js",
"dependencies": {
"autoprefixer": "^9.8.5",
"colors": "^1.4.0",
"lodash": "^4.17.19",
"postcss-cli": "^7.1.1",
"description": "GNOME's own UI library.",
"main": "index.js",
"scripts": {
"build": "gulp build"
},
"author": "GNOME Engagement Team <engagement@gnome.org>",
"license": "MIT",
"devDependencies": {
"gulp": "^4.0.2",
"gulp-clean-css": "^4.3.0",
"gulp-concat-css": "^3.1.0",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^2.0.0",
"gulp-sourcemaps": "^2.6.5",
"postcss-import": "^12.0.1",
"postcss-omit-import-tilde": "^1.0.1",
"tailwindcss": "^1.5.1"
},
"devDependencies": {},
"scripts": {
"build": "postcss css/tailwind.css -o public/build/tailwind.css",
"watch": "postcss css/tailwind.css -o public/build/tailwind.css --watch"
"peerDependencies": {
"autoprefixer": "^9.4.5",
"postcss-nested": "^4.1.1"
},
"repository": {
"type": "git",
"url": "git@gitlab.gnome.org:Teams/Engagement/websites/general-website-resources.git"
},
"keywords": [],
"author": "",
"license": "ISC"
}
}
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
This diff is collapsed.
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
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}
\ No newline at end of file
plugins: [
require('postcss-omit-import-tilde'),
require('postcss-import'),
require('postcss-nested'),
require('tailwindcss'),
require('autoprefixer'),
],
};
\ No newline at end of file
......@@ -4,27 +4,16 @@
<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>
<link rel="stylesheet" type="text/css" href="../../dist/index.css">
<title>Buttons</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 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>
......
This diff is collapsed.
@import "components/button.pcss";
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
@import "preflight/typography.pcss";
\ No newline at end of file
This diff is collapsed.
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