656 lines
27 KiB
JavaScript
656 lines
27 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./resources/**/*.{blade.php,js,vue,tsx}",
|
|
"./Modules/**/*.php",
|
|
],
|
|
safelist: [
|
|
"metronic",
|
|
"hidden",
|
|
"ki-filled",
|
|
"ki-outline",
|
|
"ki-duotone",
|
|
"ki-solid",
|
|
{ pattern: /^apexcharts-.*$/ },
|
|
{ pattern: /^leaflet-.*$/ },
|
|
],
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
base: {
|
|
colors: {
|
|
gray: {
|
|
light: {
|
|
100: "#F9F9F9",
|
|
200: "#F1F1F4",
|
|
300: "#DBDFE9",
|
|
400: "#C4CADA",
|
|
500: "#99A1B7",
|
|
600: "#78829D",
|
|
700: "#4B5675",
|
|
800: "#252F4A",
|
|
900: "#071437",
|
|
},
|
|
dark: {
|
|
100: "#1B1C22",
|
|
200: "#26272F",
|
|
300: "#363843",
|
|
400: "#464852",
|
|
500: "#636674",
|
|
600: "#808290",
|
|
700: "#9A9CAE",
|
|
800: "#B5B7C8",
|
|
900: "#F5F5F5",
|
|
},
|
|
},
|
|
contextual: {
|
|
light: {
|
|
brand: {
|
|
default: "#FF6F1E",
|
|
active: "#F15700",
|
|
light: "#FFF5EF",
|
|
clarity: "rgba(255, 111, 30, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
primary: {
|
|
default: "#35C1D0", // Base color
|
|
active: "#1AA3B5", // Lebih gelap untuk efek active
|
|
light: "#EFF6FF",
|
|
clarity: "rgba(27, 132, 255, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
success: {
|
|
default: "#17C653",
|
|
active: "#04B440",
|
|
light: "#EAFFF1",
|
|
clarity: "rgba(23, 198, 83, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
info: {
|
|
default: "#7239EA",
|
|
active: "#5014D0",
|
|
light: "#F8F5FF",
|
|
clarity: "rgba(114, 57, 234, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
danger: {
|
|
default: "#F8285A",
|
|
active: "#D81A48",
|
|
light: "#FFEEF3",
|
|
clarity: "rgba(248, 40, 90, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
warning: {
|
|
default: "#F6B100",
|
|
active: "#DFA000",
|
|
light: "#FFF8DD",
|
|
clarity: "rgba(246, 177, 0, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
dark: {
|
|
default: "#1E2129",
|
|
active: "#111318",
|
|
light: "#F9F9F9",
|
|
clarity: "rgba(30, 33, 41, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
light: {
|
|
default: "#ffffff",
|
|
active: "#FCFCFC",
|
|
light: "#ffffff",
|
|
clarity: "rgba(255, 255, 255, 0.20)",
|
|
inverse: "#4B5675",
|
|
},
|
|
secondary: {
|
|
default: "#F9F9F9",
|
|
active: "#F9F9F9",
|
|
light: "#F9F9F9",
|
|
clarity: "rgba(249, 249, 249, 0.20)",
|
|
inverse: "#4B5675",
|
|
},
|
|
},
|
|
dark: {
|
|
brand: {
|
|
default: "#D74E00",
|
|
active: "#F35700",
|
|
light: "#272320",
|
|
clarity: "rgba(215, 78, 0, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
primary: {
|
|
default: "#006AE6",
|
|
active: "#107EFF",
|
|
light: "#172331",
|
|
clarity: "rgba(0, 106, 230, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
success: {
|
|
default: "#00A261",
|
|
active: "#01BF73",
|
|
light: "#1F2623",
|
|
clarity: "rgba(0, 162, 97, 0.20);",
|
|
inverse: "#ffffff",
|
|
},
|
|
info: {
|
|
default: "#883FFF",
|
|
active: "#9E63FF",
|
|
light: "#272134",
|
|
clarity: "rgba(136, 63, 255, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
danger: {
|
|
default: "#E42855",
|
|
active: "#FF3767",
|
|
light: "#302024",
|
|
clarity: "rgba(228, 40, 85, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
warning: {
|
|
default: "#C59A00",
|
|
active: "#D9AA00",
|
|
light: "#242320",
|
|
clarity: "rgba(197, 154, 0, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
dark: {
|
|
default: "#272A34",
|
|
active: "#2D2F39",
|
|
light: "#1E2027",
|
|
clarity: "rgba(39, 42, 52, 0.20)",
|
|
inverse: "#ffffff",
|
|
},
|
|
light: {
|
|
default: "#1F212A",
|
|
active: "#1F212A",
|
|
light: "#1F212A",
|
|
clarity: "rgba(31, 33, 42, 0.20)",
|
|
inverse: "#9A9CAE",
|
|
},
|
|
secondary: {
|
|
default: "#363843",
|
|
active: "#464852",
|
|
light: "#363843",
|
|
clarity: "rgba(54, 56, 67, 0.20)",
|
|
inverse: "#9A9CAE",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
boxShadows: {
|
|
light: {
|
|
default: "0px 4px 12px 0px rgba(0, 0, 0, 0.09)",
|
|
light: "0px 3px 4px 0px rgba(0, 0, 0, 0.03)",
|
|
primary: "0px 4px 12px 0px rgba(40, 132, 239, 0.35)",
|
|
success: "0px 4px 12px 0px rgba(53, 189, 100, 0.35)",
|
|
danger: "0px 4px 12px 0px rgba(241, 65, 108, 0.35)",
|
|
info: "0px 4px 12px 0px rgba(114, 57, 234, 0.35)",
|
|
warning: "0px 4px 12px 0px rgba(246, 192, 0, 0.35)",
|
|
dark: "0px 4px 12px 0px rgba(37, 47, 74, 0.35)",
|
|
},
|
|
dark: {
|
|
default: "none",
|
|
light: "none",
|
|
primary: "none",
|
|
success: "none",
|
|
danger: "none",
|
|
info: "none",
|
|
warning: "none",
|
|
dark: "none",
|
|
},
|
|
},
|
|
},
|
|
fontFamily: {
|
|
sans: ["Inter", "system-ui", "sans-serif"],
|
|
},
|
|
colors: {
|
|
gray: {
|
|
100: "var(--tw-gray-100)",
|
|
200: "var(--tw-gray-200)",
|
|
300: "var(--tw-gray-300)",
|
|
400: "var(--tw-gray-400)",
|
|
500: "var(--tw-gray-500)",
|
|
600: "var(--tw-gray-600)",
|
|
700: "var(--tw-gray-700)",
|
|
800: "var(--tw-gray-800)",
|
|
900: "var(--tw-gray-900)",
|
|
},
|
|
primary: {
|
|
DEFAULT: "var(--tw-primary)",
|
|
active: "var(--tw-primary-active)",
|
|
light: "var(--tw-primary-light)",
|
|
clarity: "var(--tw-primary-clarity)",
|
|
inverse: "var(--tw-primary-inverse)",
|
|
},
|
|
success: {
|
|
DEFAULT: "var(--tw-success)",
|
|
active: "var(--tw-success-active)",
|
|
light: "var(--tw-success-light)",
|
|
clarity: "var(--tw-success-clarity)",
|
|
inverse: "var(--tw-success-inverse)",
|
|
},
|
|
warning: {
|
|
DEFAULT: "var(--tw-warning)",
|
|
active: "var(--tw-warning-active)",
|
|
light: "var(--tw-warning-light)",
|
|
clarity: "var(--tw-warning-clarity)",
|
|
inverse: "var(--tw-warning-inverse)",
|
|
},
|
|
danger: {
|
|
DEFAULT: "var(--tw-danger)",
|
|
active: "var(--tw-danger-active)",
|
|
light: "var(--tw-danger-light)",
|
|
clarity: "var(--tw-danger-clarity)",
|
|
inverse: "var(--tw-danger-inverse)",
|
|
},
|
|
info: {
|
|
DEFAULT: "var(--tw-info)",
|
|
active: "var(--tw-info-active)",
|
|
light: "var(--tw-info-light)",
|
|
clarity: "var(--tw-info-clarity)",
|
|
inverse: "var(--tw-info-inverse)",
|
|
},
|
|
dark: {
|
|
DEFAULT: "var(--tw-dark)",
|
|
active: "var(--tw-dark-active)",
|
|
light: "var(--tw-dark-light)",
|
|
clarity: "var(--tw-dark-clarity)",
|
|
inverse: "var(--tw-dark-inverse)",
|
|
},
|
|
secondary: {
|
|
DEFAULT: "var(--tw-secondary)",
|
|
active: "var(--tw-secondary-active)",
|
|
light: "var(--tw-secondary-light)",
|
|
clarity: "var(--tw-secondary-clarity)",
|
|
inverse: "var(--tw-secondary-inverse)",
|
|
},
|
|
light: {
|
|
DEFAULT: "var(--tw-light)",
|
|
active: "var(--tw-light-active)",
|
|
light: "var(--tw-light-light)",
|
|
clarity: "var(--tw-light-clarity)",
|
|
inverse: "var(--tw-light-inverse)",
|
|
},
|
|
brand: {
|
|
DEFAULT: "var(--tw-brand)",
|
|
active: "var(--tw-brand-active)",
|
|
light: "var(--tw-brand-light)",
|
|
clarity: "var(--tw-brand-clarity)",
|
|
inverse: "var(--tw-brand-inverse)",
|
|
},
|
|
coal: {
|
|
100: "#15171C",
|
|
200: "#13141A",
|
|
300: "#111217",
|
|
400: "#0F1014",
|
|
500: "#0D0E12",
|
|
600: "#0B0C10",
|
|
black: "#000000",
|
|
clarity: "rgba(24, 25, 31, 0.50)",
|
|
},
|
|
},
|
|
boxShadow: {
|
|
card: "var(--tw-card-box-shadow)",
|
|
default: "var(--tw-default-box-shadow)",
|
|
light: "var(--tw-light-box-shadow)",
|
|
primary: "var(--tw-primary-box-shadow)",
|
|
success: "var(--tw-success-box-shadow)",
|
|
danger: "var(--tw-danger-box-shadow)",
|
|
info: "var(--tw-info-box-shadow)",
|
|
warning: "var(--tw-warning-box-shadow)",
|
|
dark: "var(--tw-dark-box-shadow)",
|
|
},
|
|
fontSize: {
|
|
"4xs": [
|
|
"0.5625rem", // 9px
|
|
{
|
|
lineHeight: "0.6875rem", // 11px
|
|
},
|
|
],
|
|
"3xs": [
|
|
"0.625rem", // 10px
|
|
{
|
|
lineHeight: "0.75rem", // 12px
|
|
},
|
|
],
|
|
"2xs": [
|
|
"0.6875rem", // 11px
|
|
{
|
|
lineHeight: "0.75rem", // 12px
|
|
},
|
|
],
|
|
"2sm": [
|
|
"0.8125rem", // 13px
|
|
{
|
|
lineHeight: "1.125rem", // 18px
|
|
},
|
|
],
|
|
md: [
|
|
"0.9375rem", // 15px
|
|
{
|
|
lineHeight: "1.375rem", // 22px
|
|
},
|
|
],
|
|
"1.5xl": [
|
|
"1.375rem", // 22px
|
|
{
|
|
lineHeight: "1.8125rem", // 29px
|
|
},
|
|
],
|
|
"2.5xl": [
|
|
"1.625rem", // 26px
|
|
{
|
|
lineHeight: "2.125rem", // 34px
|
|
},
|
|
],
|
|
},
|
|
lineHeight: {
|
|
0: "0", // 0px
|
|
5.5: "1.375rem", // 22px
|
|
},
|
|
zIndex: {
|
|
1: "1",
|
|
5: "5",
|
|
15: "15",
|
|
25: "25",
|
|
},
|
|
borderWidth: {
|
|
3: "3px",
|
|
},
|
|
spacing: {
|
|
0.75: "0.1875rem", // 3px
|
|
1.25: "0.3rem", // 5px
|
|
1.75: "0.4375rem", // 7px
|
|
2.25: "0.563rem", // 9px
|
|
2.75: "0.688rem", // 11px
|
|
4.5: "1.125rem", // 18px
|
|
5.5: "1.375rem", // 22px
|
|
6.5: "1.625rem", // 26px
|
|
7.5: "1.875rem", // 30px
|
|
12.5: "3.125rem", // 40px
|
|
},
|
|
screens: {
|
|
sm: "640px",
|
|
md: "768px",
|
|
lg: "1024px",
|
|
xl: "1280px",
|
|
"2xl": "1536px",
|
|
},
|
|
},
|
|
custom: ({ theme }) => ({
|
|
components: {
|
|
common: {
|
|
backgrounds: {
|
|
light: {
|
|
card: "white",
|
|
tooltip: theme("colors.coal")["400"],
|
|
popover: "white",
|
|
modal: "white",
|
|
drawer: "white",
|
|
dropdown: "white",
|
|
backdrop: "rgba(0, 0, 0, 0.80)",
|
|
tableHead: "var(--tw-light-active)",
|
|
},
|
|
dark: {
|
|
card: theme("colors.coal")["300"],
|
|
tooltip: theme("colors.coal")["600"],
|
|
popover: theme("colors.coal")["600"],
|
|
modal: theme("colors.coal")["600"],
|
|
drawer: theme("colors.coal")["600"],
|
|
dropdown: theme("colors.coal")["600"],
|
|
backdrop: "rgba(0, 0, 0, 0.80)",
|
|
tableHead: theme("colors.coal")["200"],
|
|
},
|
|
},
|
|
borders: {
|
|
light: {
|
|
card: "1px solid var(--tw-gray-200)",
|
|
table: "1px solid var(--tw-gray-200)",
|
|
dropdown: "1px solid var(--tw-gray-200)",
|
|
popover: "1px solid var(--tw-gray-200)",
|
|
tooltip: "0",
|
|
},
|
|
dark: {
|
|
card: `1px solid ${theme("base.colors.gray.dark")["100"]}`,
|
|
table: `1px solid ${theme("base.colors.gray.dark")["100"]}`,
|
|
dropdown: `1px solid ${theme("base.colors.gray.dark")["100"]}`,
|
|
tooltip: `1px solid ${theme("base.colors.gray.dark")["100"]}`,
|
|
popover: `1px solid ${theme("base.colors.gray.dark")["100"]}`,
|
|
},
|
|
},
|
|
boxShadows: {
|
|
light: {
|
|
card: "0px 3px 4px 0px rgba(0, 0, 0, 0.03)",
|
|
tooltip: "0px 3px 4px 0px rgba(0, 0, 0, 0.03)",
|
|
popover: "0px 3px 4px 0px rgba(0, 0, 0, 0.03)",
|
|
modal: "0px 10px 14px 0px rgba(15, 42, 81, 0.03)",
|
|
drawer: "0px 3px 4px 0px rgba(0, 0, 0, 0.03)",
|
|
dropdown: "0px 7px 18px 0px rgba(0, 0, 0, 0.09)",
|
|
input: "0px 0px 10px 0px rgba(0, 0, 0, 0.10)",
|
|
},
|
|
dark: {
|
|
card: "0px 3px 4px 0px rgba(0, 0, 0, 0.03)",
|
|
tooltip: "0px 3px 4px 0px rgba(0, 0, 0, 0.03)",
|
|
popover: "0px 3px 4px 0px rgba(0, 0, 0, 0.03)",
|
|
modal: "0px 10px 14px 0px rgba(15, 42, 81, 0.03)",
|
|
drawer: "0px 3px 4px 0px rgba(0, 0, 0, 0.03)",
|
|
dropdown: "0px 7px 18px 0px rgba(0, 0, 0, 0.09)",
|
|
input: "0px 0px 10px 0px rgba(0, 0, 0, 0.10)",
|
|
},
|
|
},
|
|
borderRadius: {
|
|
btn: theme("borderRadius.md"),
|
|
progress: theme("borderRadius.lg"),
|
|
dropdown: theme("borderRadius.xl"),
|
|
badge: theme("borderRadius.DEFAULT"),
|
|
card: theme("borderRadius.xl"),
|
|
tooltip: theme("borderRadius.lg"),
|
|
popover: theme("borderRadius.lg"),
|
|
modal: theme("borderRadius.xl"),
|
|
},
|
|
},
|
|
container: {
|
|
fixed: {
|
|
px: {
|
|
DEFAULT: theme("spacing")["6"],
|
|
xl: theme("spacing")["7.5"],
|
|
},
|
|
"max-width": theme("screens.xl"),
|
|
},
|
|
fluid: {
|
|
px: {
|
|
DEFAULT: theme("spacing")["6"],
|
|
xl: theme("spacing")["7.5"],
|
|
},
|
|
},
|
|
},
|
|
btn: {
|
|
xs: {
|
|
height: "1.75rem",
|
|
px: "0.5rem",
|
|
py: "0.35rem",
|
|
gap: "0.25rem",
|
|
fontSize: theme("fontSize.2xs")[0],
|
|
fontWeight: "500",
|
|
iconFontSize: "0.75rem",
|
|
onlyIconFontSize: "1rem",
|
|
},
|
|
sm: {
|
|
height: "2rem",
|
|
px: "0.75rem",
|
|
py: "0.45rem",
|
|
gap: "0.275rem",
|
|
fontSize: theme("fontSize.xs")[0],
|
|
fontWeight: "500",
|
|
iconFontSize: "0.875rem",
|
|
onlyIconFontSize: "1.125rem",
|
|
tabsGap: "0.188rem",
|
|
},
|
|
DEFAULT: {
|
|
height: "2.5rem",
|
|
px: "1rem",
|
|
py: "0.55rem",
|
|
gap: "0.375rem",
|
|
fontSize: theme("fontSize.2sm")[0],
|
|
fontWeight: "500",
|
|
iconFontSize: "1.125rem",
|
|
onlyIconFontSize: "1.5rem",
|
|
tabsGap: "0.25rem",
|
|
},
|
|
lg: {
|
|
height: "3rem",
|
|
px: "1.25rem",
|
|
py: "0.75rem",
|
|
gap: "0.5rem",
|
|
fontSize: theme("fontSize.sm")[0],
|
|
fontWeight: "500",
|
|
iconFontSize: "1.25rem",
|
|
onlyIconFontSize: "1.75rem",
|
|
tabsGap: "0.313rem",
|
|
},
|
|
},
|
|
input: {
|
|
sm: {
|
|
px: "0.625rem",
|
|
},
|
|
DEFAULT: {
|
|
px: "0.75rem",
|
|
},
|
|
lg: {
|
|
gap: "0.875rem",
|
|
},
|
|
},
|
|
checkbox: {
|
|
sm: {
|
|
size: "1.125rem",
|
|
borderRadius: "0.25rem",
|
|
},
|
|
DEFAULT: {
|
|
size: "1.375rem",
|
|
borderRadius: "0.375rem",
|
|
},
|
|
lg: {
|
|
size: "1.625rem",
|
|
borderRadius: "0.5rem",
|
|
},
|
|
},
|
|
radio: {
|
|
sm: {
|
|
size: "1.125rem",
|
|
},
|
|
DEFAULT: {
|
|
size: "1.375rem",
|
|
},
|
|
lg: {
|
|
size: "1.625rem",
|
|
},
|
|
},
|
|
switch: {
|
|
sm: {
|
|
height: "1.125rem",
|
|
width: "1.875rem",
|
|
},
|
|
DEFAULT: {
|
|
height: "1.375rem",
|
|
width: "2.125rem",
|
|
},
|
|
lg: {
|
|
height: "1.625rem",
|
|
width: "2.375rem",
|
|
},
|
|
},
|
|
card: {
|
|
px: theme("spacing")["7.5"],
|
|
py: {
|
|
header: theme("spacing.3"),
|
|
body: theme("spacing.5"),
|
|
footer: theme("spacing.3"),
|
|
group: theme("spacing.3"),
|
|
},
|
|
grid: {
|
|
px: theme("spacing.5"),
|
|
},
|
|
},
|
|
table: {
|
|
px: {
|
|
xs: "0.5rem",
|
|
sm: "0.75rem",
|
|
DEFAULT: "1rem",
|
|
lg: "1.25rem",
|
|
},
|
|
py: {
|
|
xs: {
|
|
head: "0.225rem",
|
|
body: "0.35rem",
|
|
},
|
|
sm: {
|
|
head: "0.425rem",
|
|
body: "0.5rem",
|
|
},
|
|
DEFAULT: {
|
|
head: "0.625rem",
|
|
body: "0.75rem",
|
|
},
|
|
lg: {
|
|
head: "0.825rem",
|
|
body: "0.95rem",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
layouts: {
|
|
metronic: {
|
|
sidebar: {
|
|
width: {
|
|
desktop: "280px",
|
|
desktopCollapse: "80px",
|
|
mobile: "280px",
|
|
},
|
|
},
|
|
header: {
|
|
height: {
|
|
desktop: "70px",
|
|
mobile: "60px",
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}),
|
|
},
|
|
plugins: [
|
|
require("./resources/metronic/core/plugins/plugin"),
|
|
require("./resources/metronic/core/plugins/components/theme"),
|
|
require("./resources/metronic/core/plugins/components/breakpoints"),
|
|
require("./resources/metronic/core/plugins/components/typography"),
|
|
require("./resources/metronic/core/plugins/components/menu"),
|
|
require("./resources/metronic/core/plugins/components/dropdown"),
|
|
require("./resources/metronic/core/plugins/components/accordion"),
|
|
require("./resources/metronic/core/plugins/components/input"),
|
|
require("./resources/metronic/core/plugins/components/input-group"),
|
|
require("./resources/metronic/core/plugins/components/select"),
|
|
require("./resources/metronic/core/plugins/components/textarea"),
|
|
require("./resources/metronic/core/plugins/components/file-input"),
|
|
require("./resources/metronic/core/plugins/components/switch"),
|
|
require("./resources/metronic/core/plugins/components/checkbox"),
|
|
require("./resources/metronic/core/plugins/components/radio"),
|
|
require("./resources/metronic/core/plugins/components/range"),
|
|
require("./resources/metronic/core/plugins/components/container"),
|
|
require("./resources/metronic/core/plugins/components/image-input"),
|
|
require("./resources/metronic/core/plugins/components/modal"),
|
|
require("./resources/metronic/core/plugins/components/drawer"),
|
|
require("./resources/metronic/core/plugins/components/tooltip"),
|
|
require("./resources/metronic/core/plugins/components/popover"),
|
|
require("./resources/metronic/core/plugins/components/btn"),
|
|
require("./resources/metronic/core/plugins/components/btn-group"),
|
|
require("./resources/metronic/core/plugins/components/tabs"),
|
|
require("./resources/metronic/core/plugins/components/pagination"),
|
|
require("./resources/metronic/core/plugins/components/card"),
|
|
require("./resources/metronic/core/plugins/components/table"),
|
|
require("./resources/metronic/core/plugins/components/badge"),
|
|
require("./resources/metronic/core/plugins/components/rating"),
|
|
require("./resources/metronic/core/plugins/components/scrollable"),
|
|
require("./resources/metronic/core/plugins/components/progress"),
|
|
require("./resources/metronic/core/plugins/components/apexcharts"),
|
|
require("./resources/metronic/core/plugins/components/leaflet"),
|
|
],
|
|
};
|