|
@@ -1,14 +1,45 @@
|
|
var colors = require('tailwindcss/colors');
|
|
var colors = require('tailwindcss/colors');
|
|
var plugin = require('tailwindcss/plugin');
|
|
var plugin = require('tailwindcss/plugin');
|
|
|
|
+var types = ['primary', 'secondary', 'tertiary', 'warning', 'success', 'error'];
|
|
|
|
+
|
|
|
|
+function generateSafeList(types) {
|
|
|
|
+ var safelist = [];
|
|
|
|
+ types.forEach(type => {
|
|
|
|
+ safelist.push(
|
|
|
|
+ ...[
|
|
|
|
+ `text-on-${type}`,
|
|
|
|
+ `dark:text-on-${type}-dark`,
|
|
|
|
+ `hover:text-${type}-dark`,
|
|
|
|
+ `dark:hover:text-${type}`,
|
|
|
|
+ `bg-${type}`,
|
|
|
|
+ `from-${type}-variant`,
|
|
|
|
+ `to-${type}`,
|
|
|
|
+ `dark:bg-${type}-dark`,
|
|
|
|
+ `hover:bg-${type}-variant`,
|
|
|
|
+ `hover:dark:bg-${type}-variant-dark`,
|
|
|
|
+ `border-${type}`,
|
|
|
|
+ `dark:border-${type}-dark`,
|
|
|
|
+ `hover:border-${type}-variant`,
|
|
|
|
+ `dark:hover:border-${type}-variant-dark`,
|
|
|
|
+ ]
|
|
|
|
+ );
|
|
|
|
+ });
|
|
|
|
+ return safelist;
|
|
|
|
+}
|
|
|
|
|
|
/** @type {import('tailwindcss').Config} */
|
|
/** @type {import('tailwindcss').Config} */
|
|
|
|
|
|
module.exports = {
|
|
module.exports = {
|
|
darkMode: 'selector',
|
|
darkMode: 'selector',
|
|
content: ['./src/**/*.{html,js,ts}'],
|
|
content: ['./src/**/*.{html,js,ts}'],
|
|
|
|
+ safelist: generateSafeList(types),
|
|
theme: {
|
|
theme: {
|
|
extend: {
|
|
extend: {
|
|
- darkMode: 'class',
|
|
|
|
|
|
+ aspectRatio: {
|
|
|
|
+ '16/9': '16 / 9',
|
|
|
|
+ '4/5': '4 / 5',
|
|
|
|
+ '1/1': '1 / 1',
|
|
|
|
+ },
|
|
fontFamily: {
|
|
fontFamily: {
|
|
primary: 'var(--font-primary)',
|
|
primary: 'var(--font-primary)',
|
|
title: 'var(--font-title)',
|
|
title: 'var(--font-title)',
|
|
@@ -17,60 +48,232 @@ module.exports = {
|
|
colors: {
|
|
colors: {
|
|
...colors,
|
|
...colors,
|
|
primary: {
|
|
primary: {
|
|
- DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
|
|
|
|
- dark: 'rgb(var(--primary-dark) / <alpha-value>)',
|
|
|
|
- variation: 'rgb(var(--primary-variation) / <alpha-value>)',
|
|
|
|
- 'variation-dark': 'rgb(var(--primary-variation-dark) / <alpha-value>)',
|
|
|
|
|
|
+ DEFAULT: 'rgb(var(--primary-400) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--primary-700) / <alpha-value>)',
|
|
|
|
+ container: {
|
|
|
|
+ DEFAULT: 'rgb(var(--primary-200) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--primary-800) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: 'rgb(var(--primary-600) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--primary-500) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ 50: 'rgb(var(--primary-50) / <alpha-value>)',
|
|
|
|
+ 100: 'rgb(var(--primary-100) / <alpha-value>)',
|
|
|
|
+ 150: 'rgb(var(--primary-150) / <alpha-value>)',
|
|
|
|
+ 200: 'rgb(var(--primary-200) / <alpha-value>)',
|
|
|
|
+ 250: 'rgb(var(--primary-250) / <alpha-value>)',
|
|
|
|
+ 300: 'rgb(var(--primary-300) / <alpha-value>)',
|
|
|
|
+ 350: 'rgb(var(--primary-350) / <alpha-value>)',
|
|
|
|
+ 400: 'rgb(var(--primary-400) / <alpha-value>)',
|
|
|
|
+ 500: 'rgb(var(--primary-500) / <alpha-value>)',
|
|
|
|
+ 600: 'rgb(var(--primary-600) / <alpha-value>)',
|
|
|
|
+ 700: 'rgb(var(--primary-700) / <alpha-value>)',
|
|
|
|
+ 800: 'rgb(var(--primary-800) / <alpha-value>)',
|
|
|
|
+ 900: 'rgb(var(--primary-900) / <alpha-value>)',
|
|
|
|
+ 950: 'rgb(var(--primary-950) / <alpha-value>)',
|
|
},
|
|
},
|
|
secondary: {
|
|
secondary: {
|
|
- DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
|
|
|
|
- dark: 'rgb(var(--secondary-dark) / <alpha-value>)',
|
|
|
|
|
|
+ DEFAULT: 'rgb(var(--secondary-400) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--secondary-700) / <alpha-value>)',
|
|
|
|
+ container: {
|
|
|
|
+ DEFAULT: 'rgb(var(--secondary-200) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--secondary-800) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: 'rgb(var(--secondary-600) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--secondary-500) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ 50: 'rgb(var(--secondary-50) / <alpha-value>)',
|
|
|
|
+ 100: 'rgb(var(--secondary-100) / <alpha-value>)',
|
|
|
|
+ 150: 'rgb(var(--secondary-150) / <alpha-value>)',
|
|
|
|
+ 200: 'rgb(var(--secondary-200) / <alpha-value>)',
|
|
|
|
+ 250: 'rgb(var(--secondary-250) / <alpha-value>)',
|
|
|
|
+ 300: 'rgb(var(--secondary-300) / <alpha-value>)',
|
|
|
|
+ 350: 'rgb(var(--secondary-350) / <alpha-value>)',
|
|
|
|
+ 400: 'rgb(var(--secondary-400) / <alpha-value>)',
|
|
|
|
+ 500: 'rgb(var(--secondary-500) / <alpha-value>)',
|
|
|
|
+ 600: 'rgb(var(--secondary-600) / <alpha-value>)',
|
|
|
|
+ 700: 'rgb(var(--secondary-700) / <alpha-value>)',
|
|
|
|
+ 800: 'rgb(var(--secondary-800) / <alpha-value>)',
|
|
|
|
+ 900: 'rgb(var(--secondary-900) / <alpha-value>)',
|
|
|
|
+ 950: 'rgb(var(--secondary-950) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ tertiary: {
|
|
|
|
+ DEFAULT: 'rgb(var(--tertiary-400) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--tertiary-700) / <alpha-value>)',
|
|
|
|
+ container: {
|
|
|
|
+ DEFAULT: 'rgb(var(--tertiary-200) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--tertiary-800) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: 'rgb(var(--tertiary-600) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--tertiary-500) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ 50: 'rgb(var(--tertiary-50) / <alpha-value>)',
|
|
|
|
+ 100: 'rgb(var(--tertiary-100) / <alpha-value>)',
|
|
|
|
+ 150: 'rgb(var(--tertiary-150) / <alpha-value>)',
|
|
|
|
+ 200: 'rgb(var(--tertiary-200) / <alpha-value>)',
|
|
|
|
+ 250: 'rgb(var(--tertiary-250) / <alpha-value>)',
|
|
|
|
+ 300: 'rgb(var(--tertiary-300) / <alpha-value>)',
|
|
|
|
+ 350: 'rgb(var(--tertiary-350) / <alpha-value>)',
|
|
|
|
+ 400: 'rgb(var(--tertiary-400) / <alpha-value>)',
|
|
|
|
+ 500: 'rgb(var(--tertiary-500) / <alpha-value>)',
|
|
|
|
+ 600: 'rgb(var(--tertiary-600) / <alpha-value>)',
|
|
|
|
+ 700: 'rgb(var(--tertiary-700) / <alpha-value>)',
|
|
|
|
+ 800: 'rgb(var(--tertiary-800) / <alpha-value>)',
|
|
|
|
+ 900: 'rgb(var(--tertiary-900) / <alpha-value>)',
|
|
|
|
+ 950: 'rgb(var(--tertiary-950) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ neutral: {
|
|
|
|
+ 50: 'rgb(var(--neutral-50) / <alpha-value>)',
|
|
|
|
+ 100: 'rgb(var(--neutral-100) / <alpha-value>)',
|
|
|
|
+ 150: 'rgb(var(--neutral-150) / <alpha-value>)',
|
|
|
|
+ 200: 'rgb(var(--neutral-200) / <alpha-value>)',
|
|
|
|
+ 250: 'rgb(var(--neutral-250) / <alpha-value>)',
|
|
|
|
+ 300: 'rgb(var(--neutral-300) / <alpha-value>)',
|
|
|
|
+ 350: 'rgb(var(--neutral-350) / <alpha-value>)',
|
|
|
|
+ 400: 'rgb(var(--neutral-400) / <alpha-value>)',
|
|
|
|
+ 500: 'rgb(var(--neutral-500) / <alpha-value>)',
|
|
|
|
+ 600: 'rgb(var(--neutral-600) / <alpha-value>)',
|
|
|
|
+ 700: 'rgb(var(--neutral-700) / <alpha-value>)',
|
|
|
|
+ 800: 'rgb(var(--neutral-800) / <alpha-value>)',
|
|
|
|
+ 900: 'rgb(var(--neutral-900) / <alpha-value>)',
|
|
|
|
+ 950: 'rgb(var(--neutral-950) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ 'neutral-variant': {
|
|
|
|
+ 50: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
|
|
|
|
+ 100: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
|
|
|
|
+ 150: 'rgb(var(--neutral-variant-150) / <alpha-value>)',
|
|
|
|
+ 200: 'rgb(var(--neutral-variant-200) / <alpha-value>)',
|
|
|
|
+ 250: 'rgb(var(--neutral-variant-250) / <alpha-value>)',
|
|
|
|
+ 300: 'rgb(var(--neutral-variant-300) / <alpha-value>)',
|
|
|
|
+ 350: 'rgb(var(--neutral-variant-350) / <alpha-value>)',
|
|
|
|
+ 400: 'rgb(var(--neutral-variant-400) / <alpha-value>)',
|
|
|
|
+ 500: 'rgb(var(--neutral-variant-500) / <alpha-value>)',
|
|
|
|
+ 600: 'rgb(var(--neutral-variant-600) / <alpha-value>)',
|
|
|
|
+ 700: 'rgb(var(--neutral-variant-700) / <alpha-value>)',
|
|
|
|
+ 800: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
|
|
|
|
+ 900: 'rgb(var(--neutral-variant-900) / <alpha-value>)',
|
|
|
|
+ 950: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
|
|
},
|
|
},
|
|
background: {
|
|
background: {
|
|
- DEFAULT: 'rgb(var(--background) / <alpha-value>)',
|
|
|
|
- dark: 'rgb(var(--background-dark) / <alpha-value>)',
|
|
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-50) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
|
|
},
|
|
},
|
|
surface: {
|
|
surface: {
|
|
- DEFAULT: 'rgb(var(--surface) / <alpha-value>)',
|
|
|
|
- variation: 'rgb(var(--surface-variation) / <alpha-value>)',
|
|
|
|
- dark: 'rgb(var(--surface-dark) / <alpha-value>)',
|
|
|
|
- 'variation-dark': 'rgb(var(--surface-variation-dark) / <alpha-value>)',
|
|
|
|
|
|
+ DEFAULT: 'rgb(var(--primary-50) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--primary-950) / <alpha-value>)',
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
|
|
|
|
+ },
|
|
},
|
|
},
|
|
- accent: {
|
|
|
|
- DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
|
|
|
|
- dark: 'rgb(var(--accent-dark) / <alpha-value>)',
|
|
|
|
- },
|
|
|
|
- on: {
|
|
|
|
- primary: 'rgb(var(--on-primary) / <alpha-value>)',
|
|
|
|
- 'primary-variation': 'rgb(var(--on-primary-variation) / <alpha-value>)',
|
|
|
|
- secondary: 'rgb(var(--on-secondary) / <alpha-value>)',
|
|
|
|
- 'secondary-variation': 'rgb(var(--on-secondary-variation) / <alpha-value>)',
|
|
|
|
- accent: 'rgb(var(--on-accent) / <alpha-value>)',
|
|
|
|
- background: 'rgb(var(--on-background) / <alpha-value>)',
|
|
|
|
- 'background-variation': 'rgb(var(--on-background-variation) / <alpha-value>)',
|
|
|
|
- surface: 'rgb(var(--on-surface) / <alpha-value>)',
|
|
|
|
- 'surface-variation': 'rgb(var(--on-surface-variation) / <alpha-value>)',
|
|
|
|
- 'primary-dark': 'rgb(var(--on-primary-dark) / <alpha-value>)',
|
|
|
|
- 'primary-variation-dark': 'rgb(var(--on-primary-variation-dark) / <alpha-value>)',
|
|
|
|
- 'secondary-dark': 'rgb(var(--on-secondary-dark) / <alpha-value>)',
|
|
|
|
- 'secondary-variation-dark': 'rgb(var(--on-secondary-variation-dark) / <alpha-value>)',
|
|
|
|
- 'accent-dark': 'rgb(var(--on-accent-dark) / <alpha-value>)',
|
|
|
|
- 'background-dark': 'rgb(var(--on-background-dark) / <alpha-value>)',
|
|
|
|
- 'background-variation-dark': 'rgb(var(--on-background-variation-dark) / <alpha-value>)',
|
|
|
|
- 'surface-dark': 'rgb(var(--on-surface-dark) / <alpha-value>)',
|
|
|
|
- 'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
|
|
|
|
|
|
+ outline: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-variant-600) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-500) / <alpha-value>)',
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-variant-300) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
|
|
|
|
+ },
|
|
},
|
|
},
|
|
success: {
|
|
success: {
|
|
- DEFAULT: colors.lime[600],
|
|
|
|
- variation: colors.green[700],
|
|
|
|
|
|
+ DEFAULT: colors.green[400],
|
|
|
|
+ dark: colors.green[700],
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: colors.green[500],
|
|
|
|
+ dark: colors.green[600],
|
|
|
|
+ },
|
|
},
|
|
},
|
|
warning: {
|
|
warning: {
|
|
DEFAULT: colors.amber[400],
|
|
DEFAULT: colors.amber[400],
|
|
- variation: colors.amber[600],
|
|
|
|
|
|
+ dark: colors.amber[700],
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: colors.amber[500],
|
|
|
|
+ dark: colors.amber[600],
|
|
|
|
+ },
|
|
},
|
|
},
|
|
error: {
|
|
error: {
|
|
DEFAULT: colors.red[400],
|
|
DEFAULT: colors.red[400],
|
|
- variation: colors.red[600],
|
|
|
|
|
|
+ dark: colors.red[700],
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: colors.red[500],
|
|
|
|
+ dark: colors.red[600],
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ on: {
|
|
|
|
+ primary: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
|
|
|
|
+ container: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-variant-900) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-variant-200) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ secondary: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
|
|
|
|
+ container: {
|
|
|
|
+ DEFAULT: 'rgb(var(--secondary-900) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--secondary-50) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: 'rgb(var(--secondary-200) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--secondary-100) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ tertiary: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-variant-950) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-50) / <alpha-value>)',
|
|
|
|
+ container: {
|
|
|
|
+ DEFAULT: 'rgb(var(--tertiary-900) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--tertiary-50) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: 'rgb(var(--tertiary-200) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--tertiary-100) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ background: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-900) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ surface: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-900) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-100) / <alpha-value>)',
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: 'rgb(var(--neutral-variant-800) / <alpha-value>)',
|
|
|
|
+ dark: 'rgb(var(--neutral-variant-300) / <alpha-value>)',
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ success: {
|
|
|
|
+ DEFAULT: colors.green[950],
|
|
|
|
+ dark: colors.green[50],
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: colors.green[800],
|
|
|
|
+ dark: colors.green[300],
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ warning: {
|
|
|
|
+ DEFAULT: colors.amber[950],
|
|
|
|
+ dark: colors.amber[50],
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: colors.amber[300],
|
|
|
|
+ dark: colors.amber[800],
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ error: {
|
|
|
|
+ DEFAULT: colors.red[950],
|
|
|
|
+ dark: colors.red[50],
|
|
|
|
+ variant: {
|
|
|
|
+ DEFAULT: colors.red[300],
|
|
|
|
+ dark: colors.red[800],
|
|
|
|
+ },
|
|
|
|
+ },
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|
|
},
|