Skip to content
Snippets Groups Projects
Commit 8a0079d1 authored by xaralis's avatar xaralis
Browse files

Buttons as plugin

parent 314897a0
No related branches found
No related tags found
No related merge requests found
Pipeline #825 passed
Stage: build
Show whitespace changes
Inline Side-by-side
Showing
with 320 additions and 365 deletions
package.json
+ 1
− 0
View file @ 8a0079d1
...@@ -57,6 +57,7 @@ ...@@ -57,6 +57,7 @@
"gulp-concat": "^2.6.1", "gulp-concat": "^2.6.1",
"gulp-postcss": "^8.0.0", "gulp-postcss": "^8.0.0",
"gulp-rename": "^2.0.0", "gulp-rename": "^2.0.0",
"lodash": "^4.17.15",
"postcss-assets": "^5.0.0", "postcss-assets": "^5.0.0",
"postcss-clean": "^1.1.0", "postcss-clean": "^1.1.0",
"postcss-custom-properties": "^9.1.1", "postcss-custom-properties": "^9.1.1",
......
source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
+ 0
− 2
View file @ 8a0079d1
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
{{> atoms-basic-button(classes: "btn--grey-500") }} {{> atoms-basic-button(classes: "btn--grey-500") }}
{{> atoms-basic-button(classes: "btn--grey-125") }} {{> atoms-basic-button(classes: "btn--grey-125") }}
{{> atoms-basic-button(classes: "btn--white") }} {{> atoms-basic-button(classes: "btn--white") }}
{{> atoms-basic-button(classes: "btn--white btn--fading") }}
{{> atoms-basic-button(classes: "btn--green-100") }} {{> atoms-basic-button(classes: "btn--green-100") }}
{{> atoms-basic-button(classes: "btn--red-100") }} {{> atoms-basic-button(classes: "btn--red-100") }}
</div> </div>
...@@ -17,7 +16,6 @@ ...@@ -17,7 +16,6 @@
{{> atoms-icon-button(classes: "btn--grey-500") }} {{> atoms-icon-button(classes: "btn--grey-500") }}
{{> atoms-icon-button(classes: "btn--grey-125") }} {{> atoms-icon-button(classes: "btn--grey-125") }}
{{> atoms-icon-button(classes: "btn--white") }} {{> atoms-icon-button(classes: "btn--white") }}
{{> atoms-icon-button(classes: "btn--white btn--fading") }}
{{> atoms-icon-button(classes: "btn--green-100") }} {{> atoms-icon-button(classes: "btn--green-100") }}
{{> atoms-icon-button(classes: "btn--red-100") }} {{> atoms-icon-button(classes: "btn--red-100") }}
</div> </div>
......
source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
+ 0
− 2
View file @ 8a0079d1
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
{{> atoms-basic-button(classes: "btn--grey-500 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--white btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--white btn--fading btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--red-100 btn--hoveractive") }} {{> atoms-basic-button(classes: "btn--red-100 btn--hoveractive") }}
</div> </div>
...@@ -17,7 +16,6 @@ ...@@ -17,7 +16,6 @@
{{> atoms-icon-button(classes: "btn--grey-500 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--grey-500 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--grey-125 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--white btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--white btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--white btn--fading btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--red-100 btn--hoveractive") }} {{> atoms-icon-button(classes: "btn--red-100 btn--hoveractive") }}
</div> </div>
......
source/_patterns/00-atoms/03-buttons/12-overlay-button.mustache deleted 100644 → 0
+ 0
− 3
View file @ 314897a0
<button class="btn btn--inline-icon btn--overlay {{ baseColor }}{{^ baseColor }}btn--grey-800{{/ baseColor }} {{ overlayColor }}{{^ overlayColor }}btn--overlay-red-100{{/ overlayColor }} {{ classes }}">
<div class="btn__body {{ bodyClasses }}"><i class="btn__inline-icon {{ icon }}"></i> {{ cta }}</div>
</button>
source/_patterns/00-atoms/03-buttons/13-overlay-button-colors.mustache deleted 100644 → 0
+ 0
− 6
View file @ 314897a0
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-overlay-button(overlayColor: "btn--overlay-red-100") }}
{{> atoms-overlay-button(overlayColor: "btn--overlay-brands-facebook") }}
</div>
</div>
source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache 0 → 100644
+ 24
− 0
View file @ 8a0079d1
<div class="inline-flex flex-col sm:flex-row space-y-8 sm:space-y-0 sm:space-x-8">
<div class="inline-flex flex-col space-y-2">
{{> atoms-basic-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
{{> atoms-basic-button(cta: "btn--to-grey-800", classes: "btn--hoveractive btn--to-grey-800") }}
{{> atoms-basic-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-basic-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-basic-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-basic-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-basic-button(cta: "btn--to-green-100", classes: "btn--hoveractive btn--to-green-100") }}
{{> atoms-basic-button(cta: "btn--to-red-100", classes: "btn--hoveractive btn--to-red-100") }}
{{> atoms-basic-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div>
<div class="inline-flex flex-col space-y-2">
{{> atoms-icon-button(cta: "btn--to-black", classes: "btn--hoveractive btn--to-black") }}
{{> atoms-icon-button(cta: "btn--to-grey-800", classes: "btn--hoveractive btn--to-grey-800") }}
{{> atoms-icon-button(cta: "btn--to-grey-700", classes: "btn--hoveractive btn--to-grey-700") }}
{{> atoms-icon-button(cta: "btn--to-grey-500", classes: "btn--hoveractive btn--to-grey-500") }}
{{> atoms-icon-button(cta: "btn--to-grey-125", classes: "btn--hoveractive btn--to-grey-125") }}
{{> atoms-icon-button(cta: "btn--to-white", classes: "btn--hoveractive btn--to-white") }}
{{> atoms-icon-button(cta: "btn--to-green-100", classes: "btn--hoveractive btn--to-green-100") }}
{{> atoms-icon-button(cta: "btn--to-red-100", classes: "btn--hoveractive btn--to-red-100") }}
{{> atoms-icon-button(cta: "btn--to-brands-facebook", classes: "btn--hoveractive btn--to-brands-facebook") }}
</div>
</div>
source/_patterns/02-organisms/00-global/footer.mustache
+ 1
− 1
View file @ 8a0079d1
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
{{> molecules-condensed-badge(hideOccupation: true, classes: "w-full") }} {{> molecules-condensed-badge(hideOccupation: true, classes: "w-full") }}
{{> molecules-condensed-badge(hideOccupation: true, classes: "w-full") }} {{> molecules-condensed-badge(hideOccupation: true, classes: "w-full") }}
<div class="lg:mt-4 xl:mt-0 lg:text-center xl:text-right"> <div class="lg:mt-4 xl:mt-0 lg:text-center xl:text-right">
{{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg btn--fading") }} {{> atoms-basic-button(cta: "Kontakt", classes: "btn--white btn--hoveractive btn--fullwidth md:btn--autowidth text-lg btn--to-grey-125") }}
</div> </div>
</div> </div>
</div> </div>
......
source/_patterns/02-organisms/00-global/subnav.mustache
+ 7
− 7
View file @ 8a0079d1
...@@ -6,8 +6,8 @@ ...@@ -6,8 +6,8 @@
<div class="flex"> <div class="flex">
<button <button
@click="toggleView('regions')" @click="toggleView('regions')"
class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-2" class="btn btn--condensed btn--grey-500 btn--hoveractive btn--to-white text-sm mr-2"
:class="{'btn--overlay-active': isCurrentView('regions')}" :class="{'btn--activated': isCurrentView('regions')}"
> >
<div class="btn__body"> <div class="btn__body">
<span>Pardubický kraj</span> <span>Pardubický kraj</span>
...@@ -17,11 +17,11 @@ ...@@ -17,11 +17,11 @@
<button <button
@click="toggleView('calendar')" @click="toggleView('calendar')"
class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm" class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-red-100 text-sm"
:class="{'btn--overlay-active': isCurrentView('calendar')}" :class="{'btn--activated': isCurrentView('calendar')}"
> >
<div class="btn__body"> <div class="btn__body">
<i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2"></i> <i class="btn__inline-icon fas fa-calendar-alt mr-0 md:mr-2 text-red-100"></i>
<span class="hidden md:block">Krajský kalendář</span> <span class="hidden md:block">Krajský kalendář</span>
</div> </div>
</button> </button>
...@@ -33,9 +33,9 @@ ...@@ -33,9 +33,9 @@
</div> </div>
</a> </a>
<button class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-brands-facebook text-sm ml-2"> <button class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-brands-facebook text-sm ml-2">
<div class="btn__body"> <div class="btn__body">
<i class="btn__inline-icon fab fa-facebook-f mr-0 md:mr-2"></i> <i class="btn__inline-icon fab fa-facebook-f mr-0 md:mr-2 text-brands-facebook"></i>
<span class="hidden md:block">Pardubický kraj</span> <span class="hidden md:block">Pardubický kraj</span>
</div> </div>
</button> </button>
......
source/css/atoms/button.pcss deleted 100644 → 0
+ 0
− 260
View file @ 314897a0
.btn {
@apply inline-block text-center font-normal max-w-xs;
&:hover {
@apply no-underline;
}
&.btn--hoveractive:hover .btn__body,
&.btn--hoveractive:hover .btn__icon {
@apply bg-black text-white;
}
&.btn--hoveractive:hover .btn__icon {
@apply border-grey-600;
}
&.btn--hoveractive.btn--fading:hover .btn__body,
&.btn--hoveractive.btn--fading:hover .btn__icon {
@apply bg-grey-700 text-white;
}
&.btn--hoveractive.btn--fading:hover .btn__icon {
@apply border-grey-500;
}
}
.btn__body,
.btn__icon {
@apply transition duration-200 bg-black text-white;
}
.btn__icon {
@apply border-l border-grey-300;
}
.btn__body {
@apply flex h-full items-center justify-center;
padding: .75em 2em;
}
.btn.btn--icon {
.btn__body-wrap {
@apply flex;
}
.btn__icon {
@apply border-l px-4 flex items-center;
img {
@apply w-4;
}
}
&.btn--hoveractive:hover .btn__icon {
svg, i {
@apply text-white;
fill: theme('colors.white');
}
}
}
.btn.btn--inverted-icon {
.btn__icon {
@apply order-first border-r border-l-0;
}
}
.btn__inline-icon {
@apply mr-2;
}
.btn.btn--black {
.btn__body,
.btn__icon {
@apply bg-black text-white;
}
.btn__icon {
@apply border-grey-400 bg-grey-800;
}
&.btn--hoveractive:hover .btn__body,
&.btn--hoveractive:hover .btn__icon {
@apply bg-grey-100 text-black;
}
&.btn--hoveractive:hover .btn__icon {
@apply border-grey-150;
svg, i {
@apply text-black;
fill: theme('colors.black');
}
}
}
.btn.btn--grey-125 {
.btn__body,
.btn__icon {
@apply bg-grey-125 text-black;
}
.btn__icon {
@apply border-grey-150;
}
}
.btn.btn--grey-300 {
.btn__body,
.btn__icon {
@apply bg-grey-300 text-white;
}
.btn__icon {
@apply border-grey-150;
}
}
.btn.btn--grey-500 {
.btn__body,
.btn__icon {
@apply bg-grey-500 text-white;
}
.btn__icon {
@apply border-grey-300;
}
}
.btn.btn--grey-700 {
.btn__body,
.btn__icon {
@apply bg-grey-700 text-white;
}
.btn__icon {
@apply border-grey-800;
}
}
.btn.btn--grey-800 {
.btn__body,
.btn__icon {
@apply bg-grey-800 text-white;
}
.btn__icon {
@apply border-grey-500;
}
}
.btn.btn--green-100 {
.btn__body,
.btn__icon {
@apply bg-green-100 text-white;
}
.btn__icon {
@apply border-green-200;
}
}
.btn.btn--red-100 {
.btn__body,
.btn__icon {
@apply bg-red-100 text-white;
}
.btn__icon {
@apply border-red-200;
}
}
.btn.btn--white {
.btn__body,
.btn__icon {
@apply bg-white text-black;
}
.btn__icon {
@apply border-grey-100;
}
}
.btn.btn--condensed .btn__body {
padding: .75em 1em;
}
@responsive {
.btn.btn--fullwidth {
@apply w-full max-w-full;
.btn__body-wrap {
@apply w-full max-w-full;
}
.btn__body {
flex: 1;
}
}
.btn.btn--autowidth {
@apply w-auto;
}
}
.btn.btn--overlay {
.btn__inline-icon {
@apply transition duration-200;
}
&.btn--overlay-white {
.btn__inline-icon {
@apply text-white;
}
&:hover,
&.btn--overlay-active {
.btn__body {
@apply bg-white text-black;
}
.btn__inline-icon {
@apply text-black;
}
}
}
&.btn--overlay-red-100 {
.btn__inline-icon {
@apply text-red-100;
}
&:hover,
&.btn--overlay-active {
.btn__body {
@apply bg-red-100;
}
.btn__inline-icon {
@apply text-white;
}
}
}
&.btn--overlay-brands-facebook {
.btn__inline-icon {
@apply text-brands-facebook;
}
&:hover {
.btn__body {
@apply bg-brands-facebook;
}
.btn__inline-icon {
@apply text-white;
}
}
}
}
source/css/style.pcss
+ 0
− 1
View file @ 8a0079d1
...@@ -16,7 +16,6 @@ ...@@ -16,7 +16,6 @@
* Custom components * Custom components
*/ */
@import "./atoms/avatar.pcss"; @import "./atoms/avatar.pcss";
@import "./atoms/button.pcss";
@import "./atoms/card.pcss"; @import "./atoms/card.pcss";
@import "./atoms/contact-line.pcss"; @import "./atoms/contact-line.pcss";
@import "./atoms/container.pcss"; @import "./atoms/container.pcss";
......
tailwind-plugins/buttons.js 0 → 100644
+ 219
− 0
View file @ 8a0079d1
const _ = require('lodash');
const Color = require('color');
// const defaultConfig = require('tailwindcss/defaultConfig')();
const darken = (clr, val) => Color(clr).darken(val).rgb().string();
const lighten = (clr, val) => Color(clr).lighten(val).rgb().string();
function defaultOptions() {
return {
textAlign: 'center',
display: 'inline-block',
fontWeight: '400',
maxWidth: '20rem',
colors: {
// white: {
// background: defaultConfig.colors['white'],
// text: defaultConfig.colors['black'],
// },
// black: {
// background: defaultConfig.colors['black'],
// text: defaultConfig.colors['white'],
// },
// grey: {
// background: defaultConfig.colors['grey'],
// text: defaultConfig.colors['black'],
// },
// red: {
// background: defaultConfig.colors['red'],
// text: defaultConfig.colors['white'],
// },
// orange: {
// background: defaultConfig.colors['orange'],
// text: defaultConfig.colors['white'],
// },
// yellow: {
// background: defaultConfig.colors['yellow'],
// text: defaultConfig.colors['yellow-darkest'],
// },
// green: {
// background: defaultConfig.colors['green'],
// text: defaultConfig.colors['white'],
// },
// teal: {
// background: defaultConfig.colors['teal'],
// text: defaultConfig.colors['white'],
// },
// blue: {
// background: defaultConfig.colors['blue'],
// text: defaultConfig.colors['white'],
// },
// indigo: {
// background: defaultConfig.colors['indigo'],
// text: defaultConfig.colors['white'],
// },
// purple: {
// background: defaultConfig.colors['purple'],
// text: defaultConfig.colors['white'],
// },
// pink: {
// background: defaultConfig.colors['pink'],
// text: defaultConfig.colors['white'],
// },
},
}
}
module.exports = function (options) {
options = _.isFunction(options)
? options(defaultOptions())
: _.defaults(options, defaultOptions());
return function ({ addComponents, addUtilities, e, theme }) {
const getThemeColor = (alias, fallback) => {
if (!alias) {
return fallback;
}
return theme(`colors.${alias}`);
}
const btnUtilities = {
'.btn.btn--fullwidth': {
width: '100%',
maxWidth: '100%',
'.btn__body-wrap': {
width: '100%',
maxWidth: '100%',
},
'.btn__body': {
flex: '1'
}
},
'.btn.btn--autowidth': {
width: 'auto',
}
};
addUtilities(btnUtilities, ['responsive']);
const defaultIconBorder = getThemeColor(options.defaultColor.iconBorder, lighten(getThemeColor(options.defaultColor.background, '#000'), 0.1));
addComponents([
{
'.btn': {
display: 'inline-block',
textAlign: 'center',
display: 'inline-block',
fontWeight: theme('fontWeight.normal'),
maxWidth: theme('maxWidth.xs'),
textDecoration: 'none',
},
'.btn:hover': {
textDecoration: 'none',
},
'.btn__body': {
display: 'flex',
height: '100%',
alignItems: 'center',
justifyContent: 'center',
padding: '.75em 2em'
},
'.btn__icon': {
display: 'flex',
alignItems: 'center',
borderLeftWidth: '1px',
padding: `0 ${theme('spacing.4')}`,
borderColor: defaultIconBorder,
},
// All possible parts are transition ready
'.btn__body, .btn__icon, .btn__inline-icon': {
transitionProperty: 'color,background-color,border-color',
transitionDuration: '.2s',
color: getThemeColor(options.defaultColor.text),
},
'.btn__body, .btn__icon': {
backgroundColor: getThemeColor(options.defaultColor.background),
},
'.btn__icon img': {
width: theme('spacing.4')
},
// Button with a standalone icon on right side
'.btn--icon .btn__body-wrap': {
display: 'flex',
},
// Button with a standalone icon on the left
'.btn--inverted-icon .btn__icon': {
order: '-1',
borderRightWidth: '1px',
borderLeftWidth: '0',
},
// Button with an inline icon
'.btn__inline-icon': {
marginRight: theme('spacing.2'),
},
// Smaller size
'.btn--condensed .btn__body': {
padding: '.75em 1em',
},
},
..._.map(options.colors, (colorOptions, name) => {
return {
// Standard colorized variant
[`.btn--${e(name)} .btn__body, .btn--${e(name)} .btn__icon`]: {
backgroundColor: getThemeColor(colorOptions.background),
color: getThemeColor(colorOptions.text),
// '&:focus': {
// outline: 0,
// boxShadow: `0 0 0 .2em ${Color(colorOptions.background).alpha(.5).rgb().toString()}`,
// },
// '&:hover': {
// backgroundColor: _.get(colorOptions, 'hoverBackground', Color(colorOptions.background).darken(0.1).hex().toString()),
// color: _.get(colorOptions, 'hoverText', colorOptions.text),
// },
// '&:active': {
// backgroundColor: _.get(colorOptions, 'activeBackground', Color(colorOptions.background).darken(0.1).hex().toString()),
// color: _.get(colorOptions, 'activeText', colorOptions.text),
// }
},
[`.btn--${e(name)} .btn__icon`]: {
borderColor: getThemeColor(colorOptions.iconBorder, darken(getThemeColor(colorOptions.background, '#000'), 0.1)),
backgroundColor: getThemeColor(colorOptions.iconBackground, getThemeColor(colorOptions.background, '#000')),
},
// Hover state unless set with --to-* variant.
[`.btn--${e(name)}.btn--hoveractive:not([class^="btn--to-"]):hover`]: {
'.btn__body, .btn__icon': {
backgroundColor: getThemeColor(colorOptions.hoverBackground, '#000'),
color: getThemeColor(colorOptions.hoverText, '#fff'),
},
'.btn__icon': {
borderColor: getThemeColor(
colorOptions.hoverIconBorder,
lighten(
getThemeColor(colorOptions.hoverBackground, '#000'),
0.1
)
),
},
'.btn__icon svg, .btn__icon i': {
color: getThemeColor(colorOptions.hoverText, '#fff'),
fill: getThemeColor(colorOptions.hoverText, '#fff')
}
},
[`.btn--hoveractive.btn--to-${e(name)}:hover, .btn--to-${e(name)}.btn--activated`]: {
'.btn__body': {
backgroundColor: `${getThemeColor(colorOptions.background)} !important`,
color: `${getThemeColor(colorOptions.text)} !important`,
},
'.btn__icon': {
borderColor: `${getThemeColor(colorOptions.iconBorder, darken(getThemeColor(colorOptions.background, '#000'), 0.1))} !important`,
backgroundColor: `${getThemeColor(colorOptions.iconBackground, getThemeColor(colorOptions.background, '#000'))} !important`,
},
'.btn__inline-icon': {
color: `${getThemeColor(colorOptions.text)} !important`,
}
}
}
})
])
}
}
tailwind.config.js
+ 68
− 83
View file @ 8a0079d1
...@@ -107,89 +107,6 @@ module.exports = { ...@@ -107,89 +107,6 @@ module.exports = {
variants: { variants: {
textDecorationColor: ['responsive', 'hover'], textDecorationColor: ['responsive', 'hover'],
}, },
// textStyles: theme => ({ // defaults to {}
// heading: {
// output: false, // this means there won't be a "heading" component in the CSS, but it can be extended
// fontWeight: theme('fontWeight.bold'),
// lineHeight: theme('lineHeight.tight'),
// },
// h1: {
// extends: 'heading', // this means all the styles in "heading" will be copied here; "extends" can also be an array to extend multiple text styles
// fontSize: theme('fontSize.5xl'),
// '@screen sm': {
// fontSize: theme('fontSize.6xl'),
// },
// },
// h2: {
// extends: 'heading',
// fontSize: theme('fontSize.4xl'),
// '@screen sm': {
// fontSize: theme('fontSize.5xl'),
// },
// },
// h3: {
// extends: 'heading',
// fontSize: theme('fontSize.4xl'),
// },
// h4: {
// extends: 'heading',
// fontSize: theme('fontSize.3xl'),
// },
// h5: {
// extends: 'heading',
// fontSize: theme('fontSize.2xl'),
// },
// h6: {
// extends: 'heading',
// fontSize: theme('fontSize.xl'),
// },
// link: {
// '&:hover': {
// textDecoration: 'underline',
// },
// },
// richText: {
// fontWeight: theme('fontWeight.normal'),
// fontSize: theme('fontSize.base'),
// lineHeight: theme('lineHeight.relaxed'),
// '> * + *': {
// marginTop: '1em',
// },
// 'h1': {
// extends: 'h1',
// },
// 'h2': {
// extends: 'h2',
// },
// 'h3': {
// extends: 'h3',
// },
// 'h4': {
// extends: 'h4',
// },
// 'h5': {
// extends: 'h5',
// },
// 'h6': {
// extends: 'h6',
// },
// 'ul': {
// listStyleType: 'disc',
// },
// 'ol': {
// listStyleType: 'decimal',
// },
// 'a': {
// extends: 'link',
// },
// 'b, strong': {
// fontWeight: theme('fontWeight.bold'),
// },
// 'i, em': {
// fontStyle: 'italic',
// },
// },
// }),
plugins: [ plugins: [
require('tailwind-css-variables')( require('tailwind-css-variables')(
{ {
...@@ -211,5 +128,73 @@ module.exports = { ...@@ -211,5 +128,73 @@ module.exports = {
color: "#dddddd", color: "#dddddd",
opacityBoost: '0.23', opacityBoost: '0.23',
}), }),
require("./tailwind-plugins/buttons")({
defaultColor: {
text: 'white',
background: 'black',
iconBorder: 'grey.300'
},
colors: {
'black': {
text: 'white',
background: 'black',
iconBorder: 'grey.400',
iconBackground: 'grey.800',
hoverIconBorder: 'grey.600',
},
'grey-800': {
text: 'white',
background: 'grey.800',
iconBorder: 'grey.500',
hoverIconBorder: 'grey.600',
},
'grey-700': {
text: 'white',
background: 'grey.700',
iconBorder: 'grey.800',
hoverIconBorder: 'grey.600',
},
'grey-500': {
text: 'white',
background: 'grey.500',
iconBorder: 'grey.300',
hoverIconBorder: 'grey.600',
},
'grey-300': {
text: 'white',
background: 'grey.300',
iconBorder: 'grey.150',
hoverIconBorder: 'grey.600',
},
'grey-125': {
text: 'black',
background: 'grey.125',
iconBorder: 'grey.150',
hoverIconBorder: 'grey.600',
},
'white': {
text: 'black',
background: 'white',
iconBorder: 'grey.100',
hoverIconBorder: 'grey.600',
},
'green-100': {
text: 'white',
background: 'green.100',
iconBorder: 'green.200',
hoverIconBorder: 'grey.600',
},
'red-100': {
text: 'white',
background: 'red.100',
iconBorder: 'red.200',
hoverIconBorder: 'grey.600',
},
'brands-facebook': {
text: 'white',
background: 'brands.facebook',
}
}
})
] ]
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft