diff --git a/package.json b/package.json
index 1bbba4538d6dc295897e5214bd67aaf668e11eec..c4dd9198fe59a120b9a18825835e45c2aefe84a2 100755
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
"gulp-concat": "^2.6.1",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^2.0.0",
+ "lodash": "^4.17.15",
"postcss-assets": "^5.0.0",
"postcss-clean": "^1.1.0",
"postcss-custom-properties": "^9.1.1",
diff --git a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
index 3082dba77d6650dbebd8f63f23567aa4aad9c7f3..1062f30ccca9a6f9b47e9f420dab7dc579e9114e 100644
--- a/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
+++ b/source/_patterns/00-atoms/03-buttons/02-button-colors.mustache
@@ -6,7 +6,6 @@
{{> atoms-basic-button(classes: "btn--grey-500") }}
{{> atoms-basic-button(classes: "btn--grey-125") }}
{{> 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--red-100") }}
</div>
@@ -17,7 +16,6 @@
{{> atoms-icon-button(classes: "btn--grey-500") }}
{{> atoms-icon-button(classes: "btn--grey-125") }}
{{> 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--red-100") }}
</div>
diff --git a/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache b/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
index d91ca7fe8bd689749dd46ea9b648fe84ffe94869..fc31157282e10fe16c578c0d8d11cb2b0a45556d 100644
--- a/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
+++ b/source/_patterns/00-atoms/03-buttons/04-button-with-hover-effect.mustache
@@ -6,7 +6,6 @@
{{> atoms-basic-button(classes: "btn--grey-500 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--fading btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--green-100 btn--hoveractive") }}
{{> atoms-basic-button(classes: "btn--red-100 btn--hoveractive") }}
</div>
@@ -17,7 +16,6 @@
{{> atoms-icon-button(classes: "btn--grey-500 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--fading btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--green-100 btn--hoveractive") }}
{{> atoms-icon-button(classes: "btn--red-100 btn--hoveractive") }}
</div>
diff --git a/source/_patterns/00-atoms/03-buttons/12-overlay-button.mustache b/source/_patterns/00-atoms/03-buttons/12-overlay-button.mustache
deleted file mode 100644
index 3683806177ae443b0809e6b51acd51004c2a67ca..0000000000000000000000000000000000000000
--- a/source/_patterns/00-atoms/03-buttons/12-overlay-button.mustache
+++ /dev/null
@@ -1,3 +0,0 @@
-<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>
diff --git a/source/_patterns/00-atoms/03-buttons/13-overlay-button-colors.mustache b/source/_patterns/00-atoms/03-buttons/13-overlay-button-colors.mustache
deleted file mode 100644
index d2f9a8cfdce7521d23ee8d25a61eee3648f6743c..0000000000000000000000000000000000000000
--- a/source/_patterns/00-atoms/03-buttons/13-overlay-button-colors.mustache
+++ /dev/null
@@ -1,6 +0,0 @@
-<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>
diff --git a/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache b/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..3bd3e8c51154984812cebef4bed3f1ba54b9559f
--- /dev/null
+++ b/source/_patterns/00-atoms/03-buttons/button-hover-targets.mustache
@@ -0,0 +1,24 @@
+<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>
diff --git a/source/_patterns/02-organisms/00-global/footer.mustache b/source/_patterns/02-organisms/00-global/footer.mustache
index d61ecc6a52a2413883023572b7e4c627595b54ad..3a0860b41a8548604778672ec5aefc51e9122bd7 100644
--- a/source/_patterns/02-organisms/00-global/footer.mustache
+++ b/source/_patterns/02-organisms/00-global/footer.mustache
@@ -95,7 +95,7 @@
{{> 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">
- {{> 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>
diff --git a/source/_patterns/02-organisms/00-global/subnav.mustache b/source/_patterns/02-organisms/00-global/subnav.mustache
index ddf7810944895d4904db4c08c6b12568ef1fbb57..c0ded10fc8cc5cc1c4d7762f0eec6e23c0a13682 100644
--- a/source/_patterns/02-organisms/00-global/subnav.mustache
+++ b/source/_patterns/02-organisms/00-global/subnav.mustache
@@ -6,8 +6,8 @@
<div class="flex">
<button
@click="toggleView('regions')"
- class="btn btn--condensed btn--grey-500 btn--overlay btn--overlay-white text-sm mr-2"
- :class="{'btn--overlay-active': isCurrentView('regions')}"
+ class="btn btn--condensed btn--grey-500 btn--hoveractive btn--to-white text-sm mr-2"
+ :class="{'btn--activated': isCurrentView('regions')}"
>
<div class="btn__body">
<span>Pardubický kraj</span>
@@ -17,11 +17,11 @@
<button
@click="toggleView('calendar')"
- class="btn btn--inline-icon btn--condensed btn--overlay btn--grey-500 btn--overlay-red-100 text-sm"
- :class="{'btn--overlay-active': isCurrentView('calendar')}"
+ class="btn btn--inline-icon btn--condensed btn--hoveractive btn--grey-500 btn--to-red-100 text-sm"
+ :class="{'btn--activated': isCurrentView('calendar')}"
>
<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>
</div>
</button>
@@ -33,9 +33,9 @@
</div>
</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">
- <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>
</div>
</button>
diff --git a/source/css/atoms/button.pcss b/source/css/atoms/button.pcss
deleted file mode 100644
index 1a2f2d4661b1323225d76940d064074493dfb37e..0000000000000000000000000000000000000000
--- a/source/css/atoms/button.pcss
+++ /dev/null
@@ -1,260 +0,0 @@
-.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;
- }
- }
- }
-}
diff --git a/source/css/style.pcss b/source/css/style.pcss
index 7439488edbc974c38b770cc6e17ddfd664b0b254..d22194a768b8e61561a4f949c31a02e6d8dfceea 100644
--- a/source/css/style.pcss
+++ b/source/css/style.pcss
@@ -16,7 +16,6 @@
* Custom components
*/
@import "./atoms/avatar.pcss";
-@import "./atoms/button.pcss";
@import "./atoms/card.pcss";
@import "./atoms/contact-line.pcss";
@import "./atoms/container.pcss";
diff --git a/tailwind-plugins/buttons.js b/tailwind-plugins/buttons.js
new file mode 100644
index 0000000000000000000000000000000000000000..e178c67286a7d2765836b98d814aa43cd8e5c2d9
--- /dev/null
+++ b/tailwind-plugins/buttons.js
@@ -0,0 +1,219 @@
+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`,
+ }
+ }
+ }
+ })
+ ])
+ }
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 2125e8039f17975851851f581fb0fff5ebcd42bd..1d20a70a3a402011eb61679a627b69cd98984466 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -107,89 +107,6 @@ module.exports = {
variants: {
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: [
require('tailwind-css-variables')(
{
@@ -211,5 +128,73 @@ module.exports = {
color: "#dddddd",
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',
+ }
+ }
+ })
]
}