|
@@ -1,33 +1,17 @@
|
|
var colors = require('tailwindcss/colors');
|
|
var colors = require('tailwindcss/colors');
|
|
-var plugin = require('tailwindcss/plugin');
|
|
|
|
-var customThemePlugin = plugin.withOptions(
|
|
|
|
- function (options) {
|
|
|
|
- return function ({ addUtilities, theme }) {
|
|
|
|
- const newColors = options.colors || theme('colors');
|
|
|
|
- const newFontFamily = options.fontFamily || theme('fontFamily');
|
|
|
|
-
|
|
|
|
- addUtilities({
|
|
|
|
- '.custom-color': { color: newColors.primary.DEFAULT },
|
|
|
|
- '.custom-font': { fontFamily: newFontFamily.primary },
|
|
|
|
- });
|
|
|
|
- };
|
|
|
|
- },
|
|
|
|
- function (options) {
|
|
|
|
- return {
|
|
|
|
- theme: {
|
|
|
|
- colors: options.colors,
|
|
|
|
- fontFamily: options.fontFamily,
|
|
|
|
- },
|
|
|
|
- };
|
|
|
|
- }
|
|
|
|
-);
|
|
|
|
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
/** @type {import('tailwindcss').Config} */
|
|
|
|
|
|
module.exports = {
|
|
module.exports = {
|
|
- plugins: [
|
|
|
|
- require('tailwindcss/colors'),
|
|
|
|
- customThemePlugin({
|
|
|
|
|
|
+ plugins: [require('tailwindcss/colors')],
|
|
|
|
+ theme: {
|
|
|
|
+ extend: {
|
|
|
|
+ darkMode: 'class',
|
|
|
|
+ fontFamily: {
|
|
|
|
+ primary: 'var(--font-primary)',
|
|
|
|
+ title: 'var(--font-title)',
|
|
|
|
+ logo: 'var(--font-logo)',
|
|
|
|
+ },
|
|
colors: {
|
|
colors: {
|
|
...colors,
|
|
...colors,
|
|
primary: {
|
|
primary: {
|
|
@@ -75,11 +59,6 @@ module.exports = {
|
|
'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
|
|
'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
- fontFamily: {
|
|
|
|
- primary: 'var(--font-primary)',
|
|
|
|
- title: 'var(--font-title)',
|
|
|
|
- logo: 'var(--font-logo)',
|
|
|
|
- },
|
|
|
|
- }),
|
|
|
|
- ],
|
|
|
|
|
|
+ },
|
|
|
|
+ },
|
|
};
|
|
};
|