init
This commit is contained in:
Jason Kulatunga
@@ -0,0 +1,12 @@
|
||||
/**
|
||||
* This file is being used by injecting custom TailwindCSS variants.
|
||||
*
|
||||
* These variants are different because these will not generate any
|
||||
* CSS rules, but they will generate SCSS variables from your Tailwind
|
||||
* config file.
|
||||
*
|
||||
* The generated output will be used by Treo.
|
||||
* Do NOT modify or use this file to generate your own variants.
|
||||
*/
|
||||
|
||||
@variants export-boxShadow, export-colors, export-fontFamily, export-screens {}
|
||||
@@ -0,0 +1,34 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const resolveConfig = require('tailwindcss/resolveConfig');
|
||||
const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default;
|
||||
|
||||
if ( !process.argv[3] || !process.argv[5] )
|
||||
{
|
||||
console.error('Usage: -c [Relative path to Tailwind config file] -o [Relative path to Output file]');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const tailwindConfig = require(path.join(process.cwd(), process.argv[3]));
|
||||
const output = process.argv[5];
|
||||
let outputFileContents = '';
|
||||
|
||||
// Read screens and build media queries
|
||||
const screens = resolveConfig(tailwindConfig).theme.screens;
|
||||
let queries = {};
|
||||
Object.keys(screens).forEach((key) => {
|
||||
queries[key] = buildMediaQuery(screens[key])
|
||||
});
|
||||
queries = JSON.stringify(queries);
|
||||
queries = queries.replace(/"/g, '\'').replace(/,/g, ', ').replace(/:/g, ': ');
|
||||
outputFileContents = `${outputFileContents}export const treoBreakpoints = ${queries};\n`;
|
||||
|
||||
// Write the output file
|
||||
fs.writeFile(output, outputFileContents, (err) => {
|
||||
if ( err )
|
||||
{
|
||||
return console.log(err);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,359 @@
|
||||
/**
|
||||
* This file is being used by injecting custom TailwindCSS variants.
|
||||
*
|
||||
* These variants are different because these will not generate any
|
||||
* CSS rules, but they will generate SCSS variables from your Tailwind
|
||||
* config file.
|
||||
*
|
||||
* The generated output will be used by Treo.
|
||||
* Do NOT modify or use this file to generate your own variants.
|
||||
*/
|
||||
|
||||
$treo-elevations: (
|
||||
'xs': '0 0 0 1px rgba(0, 0, 0, 0.05)',
|
||||
'sm': '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
||||
'default': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
|
||||
'md': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
|
||||
'xl': '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
||||
'2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
|
||||
'inner': 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
|
||||
'outline': '0 0 0 3px rgba(66, 153, 225, 0.5)',
|
||||
'none': 'none',
|
||||
'solid': '0 0 0 2px currentColor',
|
||||
) !default;
|
||||
|
||||
$treo-colors: (
|
||||
'white': (
|
||||
50: #FFFFFF,
|
||||
100: #FFFFFF,
|
||||
200: #FFFFFF,
|
||||
300: #FFFFFF,
|
||||
400: #FFFFFF,
|
||||
500: #FFFFFF,
|
||||
600: #FFFFFF,
|
||||
700: #FFFFFF,
|
||||
800: #FFFFFF,
|
||||
900: #FFFFFF,
|
||||
contrast: (
|
||||
50: #252F3F,
|
||||
100: #252F3F,
|
||||
200: #252F3F,
|
||||
300: #252F3F,
|
||||
400: #252F3F,
|
||||
500: #252F3F,
|
||||
600: #252F3F,
|
||||
700: #252F3F,
|
||||
800: #252F3F,
|
||||
900: #252F3F,
|
||||
)
|
||||
),
|
||||
'black': (
|
||||
50: #000000,
|
||||
100: #000000,
|
||||
200: #000000,
|
||||
300: #000000,
|
||||
400: #000000,
|
||||
500: #000000,
|
||||
600: #000000,
|
||||
700: #000000,
|
||||
800: #000000,
|
||||
900: #000000,
|
||||
contrast: (
|
||||
50: #FFFFFF,
|
||||
100: #FFFFFF,
|
||||
200: #FFFFFF,
|
||||
300: #FFFFFF,
|
||||
400: #FFFFFF,
|
||||
500: #FFFFFF,
|
||||
600: #FFFFFF,
|
||||
700: #FFFFFF,
|
||||
800: #FFFFFF,
|
||||
900: #FFFFFF,
|
||||
)
|
||||
),
|
||||
'gray': (
|
||||
50: #F9FAFB,
|
||||
100: #F4F5F7,
|
||||
200: #E5E7EB,
|
||||
300: #D2D6DC,
|
||||
400: #9FA6B2,
|
||||
500: #6B7280,
|
||||
600: #4B5563,
|
||||
700: #374151,
|
||||
800: #252F3F,
|
||||
900: #161E2E,
|
||||
contrast: (
|
||||
50: #161E2E,
|
||||
100: #161E2E,
|
||||
200: #161E2E,
|
||||
300: #161E2E,
|
||||
400: #161E2E,
|
||||
500: #161E2E,
|
||||
600: #F9FAFB,
|
||||
700: #F9FAFB,
|
||||
800: #F9FAFB,
|
||||
900: #F9FAFB,
|
||||
)
|
||||
),
|
||||
'cool-gray': (
|
||||
50: #FBFDFE,
|
||||
100: #F1F5F9,
|
||||
200: #E2E8F0,
|
||||
300: #CFD8E3,
|
||||
400: #97A6BA,
|
||||
500: #64748B,
|
||||
600: #475569,
|
||||
700: #364152,
|
||||
800: #27303F,
|
||||
900: #1A202E,
|
||||
contrast: (
|
||||
50: #1A202E,
|
||||
100: #1A202E,
|
||||
200: #1A202E,
|
||||
300: #1A202E,
|
||||
400: #1A202E,
|
||||
500: #1A202E,
|
||||
600: #FBFDFE,
|
||||
700: #FBFDFE,
|
||||
800: #FBFDFE,
|
||||
900: #FBFDFE,
|
||||
)
|
||||
),
|
||||
'red': (
|
||||
50: #FDF2F2,
|
||||
100: #FDE8E8,
|
||||
200: #FBD5D5,
|
||||
300: #F8B4B4,
|
||||
400: #F98080,
|
||||
500: #F05252,
|
||||
600: #E02424,
|
||||
700: #C81E1E,
|
||||
800: #9B1C1C,
|
||||
900: #771D1D,
|
||||
contrast: (
|
||||
50: #771D1D,
|
||||
100: #771D1D,
|
||||
200: #771D1D,
|
||||
300: #771D1D,
|
||||
400: #771D1D,
|
||||
500: #771D1D,
|
||||
600: #FDF2F2,
|
||||
700: #FDF2F2,
|
||||
800: #FDF2F2,
|
||||
900: #FDF2F2,
|
||||
)
|
||||
),
|
||||
'orange': (
|
||||
50: #FFF8F1,
|
||||
100: #FEECDC,
|
||||
200: #FCD9BD,
|
||||
300: #FDBA8C,
|
||||
400: #FF8A4C,
|
||||
500: #FF5A1F,
|
||||
600: #D03801,
|
||||
700: #B43403,
|
||||
800: #8A2C0D,
|
||||
900: #771D1D,
|
||||
contrast: (
|
||||
50: #771D1D,
|
||||
100: #771D1D,
|
||||
200: #771D1D,
|
||||
300: #771D1D,
|
||||
400: #771D1D,
|
||||
500: #771D1D,
|
||||
600: #FFF8F1,
|
||||
700: #FFF8F1,
|
||||
800: #FFF8F1,
|
||||
900: #FFF8F1,
|
||||
)
|
||||
),
|
||||
'yellow': (
|
||||
50: #FDFDEA,
|
||||
100: #FDF6B2,
|
||||
200: #FCE96A,
|
||||
300: #FACA15,
|
||||
400: #E3A008,
|
||||
500: #C27803,
|
||||
600: #9F580A,
|
||||
700: #8E4B10,
|
||||
800: #723B13,
|
||||
900: #633112,
|
||||
contrast: (
|
||||
50: #633112,
|
||||
100: #633112,
|
||||
200: #633112,
|
||||
300: #633112,
|
||||
400: #633112,
|
||||
500: #633112,
|
||||
600: #FDFDEA,
|
||||
700: #FDFDEA,
|
||||
800: #FDFDEA,
|
||||
900: #FDFDEA,
|
||||
)
|
||||
),
|
||||
'green': (
|
||||
50: #F3FAF7,
|
||||
100: #DEF7EC,
|
||||
200: #BCF0DA,
|
||||
300: #84E1BC,
|
||||
400: #31C48D,
|
||||
500: #0E9F6E,
|
||||
600: #057A55,
|
||||
700: #046C4E,
|
||||
800: #03543F,
|
||||
900: #014737,
|
||||
contrast: (
|
||||
50: #014737,
|
||||
100: #014737,
|
||||
200: #014737,
|
||||
300: #014737,
|
||||
400: #014737,
|
||||
500: #F3FAF7,
|
||||
600: #F3FAF7,
|
||||
700: #F3FAF7,
|
||||
800: #F3FAF7,
|
||||
900: #F3FAF7,
|
||||
)
|
||||
),
|
||||
'teal': (
|
||||
50: #EDFAFA,
|
||||
100: #D5F5F6,
|
||||
200: #AFECEF,
|
||||
300: #7EDCE2,
|
||||
400: #16BDCA,
|
||||
500: #0694A2,
|
||||
600: #047481,
|
||||
700: #036672,
|
||||
800: #05505C,
|
||||
900: #014451,
|
||||
contrast: (
|
||||
50: #014451,
|
||||
100: #014451,
|
||||
200: #014451,
|
||||
300: #014451,
|
||||
400: #014451,
|
||||
500: #EDFAFA,
|
||||
600: #EDFAFA,
|
||||
700: #EDFAFA,
|
||||
800: #EDFAFA,
|
||||
900: #EDFAFA,
|
||||
)
|
||||
),
|
||||
'blue': (
|
||||
50: #EBF5FF,
|
||||
100: #E1EFFE,
|
||||
200: #C3DDFD,
|
||||
300: #A4CAFE,
|
||||
400: #76A9FA,
|
||||
500: #3F83F8,
|
||||
600: #1C64F2,
|
||||
700: #1A56DB,
|
||||
800: #1E429F,
|
||||
900: #233876,
|
||||
contrast: (
|
||||
50: #233876,
|
||||
100: #233876,
|
||||
200: #233876,
|
||||
300: #233876,
|
||||
400: #233876,
|
||||
500: #EBF5FF,
|
||||
600: #EBF5FF,
|
||||
700: #EBF5FF,
|
||||
800: #EBF5FF,
|
||||
900: #EBF5FF,
|
||||
)
|
||||
),
|
||||
'indigo': (
|
||||
50: #F0F5FF,
|
||||
100: #E5EDFF,
|
||||
200: #CDDBFE,
|
||||
300: #B4C6FC,
|
||||
400: #8DA2FB,
|
||||
500: #6875F5,
|
||||
600: #5850EC,
|
||||
700: #5145CD,
|
||||
800: #42389D,
|
||||
900: #362F78,
|
||||
contrast: (
|
||||
50: #362F78,
|
||||
100: #362F78,
|
||||
200: #362F78,
|
||||
300: #362F78,
|
||||
400: #362F78,
|
||||
500: #F0F5FF,
|
||||
600: #F0F5FF,
|
||||
700: #F0F5FF,
|
||||
800: #F0F5FF,
|
||||
900: #F0F5FF,
|
||||
)
|
||||
),
|
||||
'purple': (
|
||||
50: #F6F5FF,
|
||||
100: #EDEBFE,
|
||||
200: #DCD7FE,
|
||||
300: #CABFFD,
|
||||
400: #AC94FA,
|
||||
500: #9061F9,
|
||||
600: #7E3AF2,
|
||||
700: #6C2BD9,
|
||||
800: #5521B5,
|
||||
900: #4A1D96,
|
||||
contrast: (
|
||||
50: #4A1D96,
|
||||
100: #4A1D96,
|
||||
200: #4A1D96,
|
||||
300: #4A1D96,
|
||||
400: #4A1D96,
|
||||
500: #F6F5FF,
|
||||
600: #F6F5FF,
|
||||
700: #F6F5FF,
|
||||
800: #F6F5FF,
|
||||
900: #F6F5FF,
|
||||
)
|
||||
),
|
||||
'pink': (
|
||||
50: #FDF2F8,
|
||||
100: #FCE8F3,
|
||||
200: #FAD1E8,
|
||||
300: #F8B4D9,
|
||||
400: #F17EB8,
|
||||
500: #E74694,
|
||||
600: #D61F69,
|
||||
700: #BF125D,
|
||||
800: #99154B,
|
||||
900: #751A3D,
|
||||
contrast: (
|
||||
50: #751A3D,
|
||||
100: #751A3D,
|
||||
200: #751A3D,
|
||||
300: #751A3D,
|
||||
400: #751A3D,
|
||||
500: #FDF2F8,
|
||||
600: #FDF2F8,
|
||||
700: #FDF2F8,
|
||||
800: #FDF2F8,
|
||||
900: #FDF2F8,
|
||||
)
|
||||
),
|
||||
) !default;
|
||||
|
||||
$treo-font-sans: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji" !default;
|
||||
|
||||
$treo-font-serif: Georgia,Cambria,"Times New Roman",Times,serif !default;
|
||||
|
||||
$treo-font-mono: "IBM Plex Mono",Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace !default;
|
||||
|
||||
$treo-breakpoints: (
|
||||
xs: '(min-width: 0) and (max-width: 599px)',
|
||||
sm: '(min-width: 600px) and (max-width: 959px)',
|
||||
md: '(min-width: 960px) and (max-width: 1279px)',
|
||||
lg: '(min-width: 1280px) and (max-width: 1439px)',
|
||||
xl: '(min-width: 1440px)',
|
||||
lt-md: '(max-width: 959px)',
|
||||
lt-lg: '(max-width: 1279px)',
|
||||
lt-xl: '(max-width: 1439px)',
|
||||
gt-xs: '(min-width: 600px)',
|
||||
gt-sm: '(min-width: 960px)',
|
||||
gt-md: '(min-width: 1280px)',
|
||||
) !default
|
||||
@@ -0,0 +1 @@
|
||||
export const treoBreakpoints = {'xs': '(min-width: 0) and (max-width: 599px)', 'sm': '(min-width: 600px) and (max-width: 959px)', 'md': '(min-width: 960px) and (max-width: 1279px)', 'lg': '(min-width: 1280px) and (max-width: 1439px)', 'xl': '(min-width: 1440px)', 'lt-md': '(max-width: 959px)', 'lt-lg': '(max-width: 1279px)', 'lt-xl': '(max-width: 1439px)', 'gt-xs': '(min-width: 600px)', 'gt-sm': '(min-width: 960px)', 'gt-md': '(min-width: 1280px)'};
|
||||
@@ -0,0 +1,18 @@
|
||||
module.exports = [
|
||||
|
||||
// Exporter variants
|
||||
require('./variants/export-box-shadow'),
|
||||
require('./variants/export-colors'),
|
||||
require('./variants/export-font-family'),
|
||||
require('./variants/export-screens'),
|
||||
|
||||
// Variants
|
||||
require('./variants/dark-light'),
|
||||
|
||||
// Utilities
|
||||
require('./utilities/color-contrasts'),
|
||||
require('./utilities/color-combinations'),
|
||||
require('./utilities/icon-color'),
|
||||
require('./utilities/icon-size'),
|
||||
require('./utilities/mirror')
|
||||
];
|
||||
@@ -0,0 +1,80 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const _ = require('lodash');
|
||||
|
||||
/**
|
||||
* Adds a component that combines both background and its contrasting color
|
||||
* for Tailwind colors. Also adds basic utilities for the combined colors
|
||||
* so we can do things like '.teal.text-secondary' or '.red .text-hint' etc.
|
||||
*/
|
||||
module.exports = plugin(({addUtilities, variants, theme, e}) => {
|
||||
|
||||
const generateCombinedColorRules = (colorName, hueName, color) => {
|
||||
|
||||
const contrastColor = theme(`colorContrasts.${colorName}${hueName ? `.${hueName}` : ``}`);
|
||||
const selector = `${colorName}${hueName && hueName !== 'default' ? `-${hueName}` : ``}`;
|
||||
|
||||
return {
|
||||
[`.${e(selector)}`]: {
|
||||
backgroundColor: `${color} !important`,
|
||||
color : `${contrastColor} !important`,
|
||||
|
||||
'&.mat-icon, .mat-icon': {
|
||||
color: `${contrastColor} !important`
|
||||
},
|
||||
|
||||
'&.text-secondary, .text-secondary': {
|
||||
color: `rgba(${contrastColor}, 0.7) !important`
|
||||
},
|
||||
|
||||
'&.text-hint, .text-hint, &.text-disabled, .text-disabled': {
|
||||
color: `rgba(${contrastColor}, 0.38) !important`
|
||||
},
|
||||
|
||||
'&.divider, .divider': {
|
||||
color: `rgba(${contrastColor}, 0.12) !important`
|
||||
}
|
||||
},
|
||||
[`.text-${e(selector)}`]: {
|
||||
|
||||
'&.text-secondary, .text-secondary': {
|
||||
color: `rgba(${color}, 0.7) !important`
|
||||
},
|
||||
|
||||
'&.text-hint, .text-hint, &.text-disabled, .text-disabled': {
|
||||
color: `rgba(${color}, 0.38) !important`
|
||||
},
|
||||
|
||||
'&.divider, .divider': {
|
||||
color: `rgba(${color}, 0.12) !important`
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const utilities = _.map(theme('colors'), (value, colorName) => {
|
||||
|
||||
if ( _.isObject(value) )
|
||||
{
|
||||
return _.map(value, (color, hueName) => {
|
||||
return generateCombinedColorRules(colorName, hueName, color);
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
if ( value === 'transparent' || value === 'currentColor' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
return generateCombinedColorRules(colorName, '', value);
|
||||
}
|
||||
});
|
||||
|
||||
addUtilities(utilities, variants('colorCombinations'));
|
||||
},
|
||||
{
|
||||
variants: {
|
||||
colorCombinations: []
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,197 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const _ = require('lodash');
|
||||
|
||||
/**
|
||||
* Adds utility classes for contrasting colors such as
|
||||
* 'text-red-200-contrast' and 'bg-blue-contrast'
|
||||
*/
|
||||
module.exports = plugin(({addUtilities, variants, theme, e}) => {
|
||||
|
||||
const utilities = _.map(theme('colorContrasts'), (value, colorName) => {
|
||||
|
||||
if ( _.isObject(value) )
|
||||
{
|
||||
return _.map(value, (color, hueName) => {
|
||||
|
||||
hueName = hueName === 'default' ? '' : `-${hueName}`;
|
||||
|
||||
return {
|
||||
[`.${e(`text-${colorName}${hueName}-contrast`)}`]: {
|
||||
color: color
|
||||
},
|
||||
[`.${e(`bg-${colorName}${hueName}-contrast`)}`] : {
|
||||
backgroundColor: color
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
return {
|
||||
[`.${e(`text-${colorName}-contrast`)}`]: {
|
||||
color: value
|
||||
},
|
||||
[`.${e(`bg-${colorName}-contrast`)}`] : {
|
||||
backgroundColor: value
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
addUtilities(utilities, variants('colorContrasts'));
|
||||
},
|
||||
{
|
||||
theme : {
|
||||
colorContrasts: theme => ({
|
||||
black : theme('colors.white'),
|
||||
white : theme('colors.gray.800'),
|
||||
gray : {
|
||||
50 : theme('colors.gray.900'),
|
||||
100 : theme('colors.gray.900'),
|
||||
200 : theme('colors.gray.900'),
|
||||
300 : theme('colors.gray.900'),
|
||||
400 : theme('colors.gray.900'),
|
||||
500 : theme('colors.gray.900'),
|
||||
600 : theme('colors.gray.50'),
|
||||
700 : theme('colors.gray.50'),
|
||||
800 : theme('colors.gray.50'),
|
||||
900 : theme('colors.gray.50'),
|
||||
default: theme('colors.gray.900')
|
||||
},
|
||||
'cool-gray': {
|
||||
50 : theme('colors.cool-gray.900'),
|
||||
100 : theme('colors.cool-gray.900'),
|
||||
200 : theme('colors.cool-gray.900'),
|
||||
300 : theme('colors.cool-gray.900'),
|
||||
400 : theme('colors.cool-gray.900'),
|
||||
500 : theme('colors.cool-gray.900'),
|
||||
600 : theme('colors.cool-gray.50'),
|
||||
700 : theme('colors.cool-gray.50'),
|
||||
800 : theme('colors.cool-gray.50'),
|
||||
900 : theme('colors.cool-gray.50'),
|
||||
default: theme('colors.cool-gray.900')
|
||||
},
|
||||
red : {
|
||||
50 : theme('colors.red.900'),
|
||||
100 : theme('colors.red.900'),
|
||||
200 : theme('colors.red.900'),
|
||||
300 : theme('colors.red.900'),
|
||||
400 : theme('colors.red.900'),
|
||||
500 : theme('colors.red.900'),
|
||||
600 : theme('colors.red.50'),
|
||||
700 : theme('colors.red.50'),
|
||||
800 : theme('colors.red.50'),
|
||||
900 : theme('colors.red.50'),
|
||||
default: theme('colors.red.900')
|
||||
},
|
||||
orange : {
|
||||
50 : theme('colors.orange.900'),
|
||||
100 : theme('colors.orange.900'),
|
||||
200 : theme('colors.orange.900'),
|
||||
300 : theme('colors.orange.900'),
|
||||
400 : theme('colors.orange.900'),
|
||||
500 : theme('colors.orange.900'),
|
||||
600 : theme('colors.orange.50'),
|
||||
700 : theme('colors.orange.50'),
|
||||
800 : theme('colors.orange.50'),
|
||||
900 : theme('colors.orange.50'),
|
||||
default: theme('colors.orange.900')
|
||||
},
|
||||
yellow : {
|
||||
50 : theme('colors.yellow.900'),
|
||||
100 : theme('colors.yellow.900'),
|
||||
200 : theme('colors.yellow.900'),
|
||||
300 : theme('colors.yellow.900'),
|
||||
400 : theme('colors.yellow.900'),
|
||||
500 : theme('colors.yellow.900'),
|
||||
600 : theme('colors.yellow.50'),
|
||||
700 : theme('colors.yellow.50'),
|
||||
800 : theme('colors.yellow.50'),
|
||||
900 : theme('colors.yellow.50'),
|
||||
default: theme('colors.yellow.900')
|
||||
},
|
||||
green : {
|
||||
50 : theme('colors.green.900'),
|
||||
100 : theme('colors.green.900'),
|
||||
200 : theme('colors.green.900'),
|
||||
300 : theme('colors.green.900'),
|
||||
400 : theme('colors.green.900'),
|
||||
500 : theme('colors.green.50'),
|
||||
600 : theme('colors.green.50'),
|
||||
700 : theme('colors.green.50'),
|
||||
800 : theme('colors.green.50'),
|
||||
900 : theme('colors.green.50'),
|
||||
default: theme('colors.green.50')
|
||||
},
|
||||
teal : {
|
||||
50 : theme('colors.teal.900'),
|
||||
100 : theme('colors.teal.900'),
|
||||
200 : theme('colors.teal.900'),
|
||||
300 : theme('colors.teal.900'),
|
||||
400 : theme('colors.teal.900'),
|
||||
500 : theme('colors.teal.50'),
|
||||
600 : theme('colors.teal.50'),
|
||||
700 : theme('colors.teal.50'),
|
||||
800 : theme('colors.teal.50'),
|
||||
900 : theme('colors.teal.50'),
|
||||
default: theme('colors.teal.50')
|
||||
},
|
||||
blue : {
|
||||
50 : theme('colors.blue.900'),
|
||||
100 : theme('colors.blue.900'),
|
||||
200 : theme('colors.blue.900'),
|
||||
300 : theme('colors.blue.900'),
|
||||
400 : theme('colors.blue.900'),
|
||||
500 : theme('colors.blue.50'),
|
||||
600 : theme('colors.blue.50'),
|
||||
700 : theme('colors.blue.50'),
|
||||
800 : theme('colors.blue.50'),
|
||||
900 : theme('colors.blue.50'),
|
||||
default: theme('colors.blue.50')
|
||||
},
|
||||
indigo : {
|
||||
50 : theme('colors.indigo.900'),
|
||||
100 : theme('colors.indigo.900'),
|
||||
200 : theme('colors.indigo.900'),
|
||||
300 : theme('colors.indigo.900'),
|
||||
400 : theme('colors.indigo.900'),
|
||||
500 : theme('colors.indigo.50'),
|
||||
600 : theme('colors.indigo.50'),
|
||||
700 : theme('colors.indigo.50'),
|
||||
800 : theme('colors.indigo.50'),
|
||||
900 : theme('colors.indigo.50'),
|
||||
default: theme('colors.indigo.50')
|
||||
},
|
||||
purple : {
|
||||
50 : theme('colors.purple.900'),
|
||||
100 : theme('colors.purple.900'),
|
||||
200 : theme('colors.purple.900'),
|
||||
300 : theme('colors.purple.900'),
|
||||
400 : theme('colors.purple.900'),
|
||||
500 : theme('colors.purple.50'),
|
||||
600 : theme('colors.purple.50'),
|
||||
700 : theme('colors.purple.50'),
|
||||
800 : theme('colors.purple.50'),
|
||||
900 : theme('colors.purple.50'),
|
||||
default: theme('colors.purple.50')
|
||||
},
|
||||
pink : {
|
||||
50 : theme('colors.pink.900'),
|
||||
100 : theme('colors.pink.900'),
|
||||
200 : theme('colors.pink.900'),
|
||||
300 : theme('colors.pink.900'),
|
||||
400 : theme('colors.pink.900'),
|
||||
500 : theme('colors.pink.50'),
|
||||
600 : theme('colors.pink.50'),
|
||||
700 : theme('colors.pink.50'),
|
||||
800 : theme('colors.pink.50'),
|
||||
900 : theme('colors.pink.50'),
|
||||
default: theme('colors.pink.50')
|
||||
}
|
||||
})
|
||||
},
|
||||
variants: {
|
||||
colorContrasts: []
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,29 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const flattenColorPalette = require('tailwindcss/lib/util/flattenColorPalette').default;
|
||||
const _ = require('lodash');
|
||||
|
||||
module.exports = plugin(({addUtilities, e, theme, variants}) => {
|
||||
|
||||
const utilities = _.fromPairs(
|
||||
_.map(flattenColorPalette(theme('iconColor')), (value, modifier) => {
|
||||
return [
|
||||
`.${e(`icon-${modifier}`)}`,
|
||||
{
|
||||
[`.mat-icon`]: {
|
||||
color: value
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
);
|
||||
|
||||
addUtilities(utilities, variants('iconColor'))
|
||||
},
|
||||
{
|
||||
theme : {
|
||||
iconColor: theme => theme('colors')
|
||||
},
|
||||
variants: {
|
||||
iconColor: []
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,53 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const _ = require('lodash');
|
||||
|
||||
/**
|
||||
* Adds utility classes for .mat-icon size
|
||||
*/
|
||||
module.exports = plugin(({addUtilities, variants, theme, e}) => {
|
||||
|
||||
const utilities = _.map(theme('iconSize'), (value, key) => {
|
||||
|
||||
return {
|
||||
[`.${e(`icon-size-${key}`)}`]: {
|
||||
width : value,
|
||||
height : value,
|
||||
minWidth : value,
|
||||
minHeight : value,
|
||||
fontSize : value,
|
||||
lineHeight: value,
|
||||
[`svg`] : {
|
||||
width : value,
|
||||
height : value
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
addUtilities(utilities, variants('iconSize'));
|
||||
},
|
||||
{
|
||||
theme : {
|
||||
iconSize: {
|
||||
12: '12px',
|
||||
14: '14px',
|
||||
16: '16px',
|
||||
18: '18px',
|
||||
20: '20px',
|
||||
24: '24px',
|
||||
32: '32px',
|
||||
40: '40px',
|
||||
48: '48px',
|
||||
56: '56px',
|
||||
64: '64px',
|
||||
72: '72px',
|
||||
80: '80px',
|
||||
88: '88px',
|
||||
96: '96px'
|
||||
}
|
||||
},
|
||||
variants: {
|
||||
iconSize: []
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,24 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
|
||||
/**
|
||||
* Adds utility classes for mirroring
|
||||
*/
|
||||
module.exports = plugin(({addUtilities, variants}) => {
|
||||
|
||||
const utilities = {
|
||||
[`.mirror`] : {
|
||||
transform: `scale(-1, 1)`
|
||||
},
|
||||
[`.mirror-vertical`]: {
|
||||
transform: `scale(1, -1)`
|
||||
}
|
||||
};
|
||||
|
||||
addUtilities(utilities, variants('mirror'));
|
||||
},
|
||||
{
|
||||
variants: {
|
||||
mirror: []
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,15 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
|
||||
/**
|
||||
* Adds 'dark-light' variants
|
||||
*/
|
||||
module.exports = plugin(({addVariant, e}) => {
|
||||
|
||||
const variant = ({modifySelectors, separator}) => {
|
||||
modifySelectors(({className}) => {
|
||||
return `[class*="theme-dark"].${e(`dark${separator}${className}`)}, [class*="theme-dark"] .${e(`dark${separator}${className}`)}, [class*="theme-light"].${e(`light${separator}${className}`)}, [class*="theme-light"] .${e(`light${separator}${className}`)}`
|
||||
})
|
||||
};
|
||||
|
||||
addVariant('dark-light', variant);
|
||||
});
|
||||
@@ -0,0 +1,27 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const postcss = require('postcss');
|
||||
const _ = require('lodash');
|
||||
|
||||
/**
|
||||
* Exports 'boxShadow' configuration as an SCSS map
|
||||
*/
|
||||
module.exports = plugin(({addVariant, theme}) => {
|
||||
|
||||
const variant = ({container}) => {
|
||||
|
||||
let map = '';
|
||||
|
||||
_.forEach(theme('boxShadow'), (value, key) => {
|
||||
map = `${map} '${key}': '${theme('boxShadow.' + key)}',\n`;
|
||||
});
|
||||
|
||||
container.append(
|
||||
postcss.decl({
|
||||
prop : '$treo-elevations',
|
||||
value: `(\n ${map} ) !default`
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
addVariant('export-boxShadow', variant);
|
||||
});
|
||||
@@ -0,0 +1,80 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const postcss = require('postcss');
|
||||
const _ = require('lodash');
|
||||
|
||||
/**
|
||||
* Exports 'colors' configuration as an SCSS map
|
||||
*/
|
||||
module.exports = plugin(({addVariant, theme}) => {
|
||||
|
||||
const variant = ({container}) => {
|
||||
|
||||
let map = '';
|
||||
|
||||
_.forEach(theme('colors'), (value, key) => {
|
||||
|
||||
let hues = '';
|
||||
let contrasts = '';
|
||||
|
||||
if ( _.isObject(value) )
|
||||
{
|
||||
// Hue
|
||||
_.forEach(value, (hueValue, hueName) => {
|
||||
|
||||
// Skip the 'default' hue
|
||||
if ( hueName === 'default' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Append the new entry
|
||||
hues = `${hues} ${hueName}: ${hueValue},\n`;
|
||||
});
|
||||
|
||||
// Contrasts
|
||||
_.forEach(theme('colorContrasts.' + key), (hueValue, hueName) => {
|
||||
|
||||
// Skip the 'default' hue
|
||||
if ( hueName === 'default' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Append the new entry
|
||||
contrasts = `${contrasts} ${hueName}: ${hueValue},\n`;
|
||||
});
|
||||
}
|
||||
else
|
||||
{
|
||||
// Skip the 'transparent' and 'current'
|
||||
if ( value === 'transparent' || value === 'currentColor' )
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
// Hue
|
||||
[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].forEach((hue) => {
|
||||
hues = `${hues} ${hue}: ${value},\n`;
|
||||
});
|
||||
|
||||
// Contrasts
|
||||
[50, 100, 200, 300, 400, 500, 600, 700, 800, 900].forEach((hue) => {
|
||||
contrasts = `${contrasts} ${hue}: ${theme('colorContrasts.' + key)},\n`;
|
||||
});
|
||||
}
|
||||
|
||||
// Append the new map
|
||||
map = `${map} '${key}': (\n ${hues} contrast: (\n ${contrasts} )\n),\n`;
|
||||
});
|
||||
|
||||
container.append(
|
||||
postcss.decl({
|
||||
prop : '$treo-colors',
|
||||
value: `(\n ${map} ) !default`
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
addVariant('export-colors', variant);
|
||||
}
|
||||
);
|
||||
@@ -0,0 +1,25 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const postcss = require('postcss');
|
||||
const _ = require('lodash');
|
||||
|
||||
/**
|
||||
* Exports 'fontFamily' configuration as an SCSS map
|
||||
*/
|
||||
module.exports = plugin(({addVariant, theme}) => {
|
||||
|
||||
const variant = ({container}) => {
|
||||
|
||||
_.forEach(theme('fontFamily'), (value, key) => {
|
||||
|
||||
container.append(
|
||||
postcss.decl({
|
||||
prop : `$treo-font-${key}`,
|
||||
value: `${value} !default`
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
addVariant('export-fontFamily', variant);
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
const plugin = require('tailwindcss/plugin');
|
||||
const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default;
|
||||
const postcss = require('postcss');
|
||||
const _ = require('lodash');
|
||||
|
||||
/**
|
||||
* Exports 'screens' configuration as an SCSS map
|
||||
*/
|
||||
module.exports = plugin(({addVariant, theme}) => {
|
||||
|
||||
const variant = ({container}) => {
|
||||
|
||||
let map = '';
|
||||
|
||||
_.forEach(theme('screens'), (value, key) => {
|
||||
map = `${map} ${key}: '${buildMediaQuery(value)}',\n`;
|
||||
});
|
||||
|
||||
container.append(
|
||||
postcss.decl({
|
||||
prop : '$treo-breakpoints',
|
||||
value: `(\n ${map} ) !default`
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
addVariant('export-screens', variant);
|
||||
});
|
||||
Reference in New Issue
Block a user