portalis-component
Version:
Component Library for Nuxt 3 using TailwindCSS
354 lines (353 loc) • 7.48 kB
JavaScript
export default {
theme: {
letterSpacing: {
tighter: "-0.4px",
tight: "-0.2px",
normal: "0",
wide: "0.2px",
wider: "0.4px",
widest: "0.8px"
},
lineHeight: {
none: 1,
tightest: 1.33,
tighter: 1.42,
tight: 1.45,
normal: 1.5,
wide: "normal"
},
fontWeight: {
inherit: "inherit",
thin: 100,
extralight: 200,
light: 300,
normal: 400,
medium: 500,
semibold: 600,
bold: 700,
extrabold: 800,
black: 900
},
colors: {
inherit: "inherit",
transparent: "transparent",
current: "currentColor",
base: {
black: "#000000",
white: "#ffffff"
},
gray: {
0: "#FBFCFD",
5: "#F4F5F7",
10: "#E6E7EB",
15: "#D9DDE3",
20: "#CBD1D8",
25: "#BEC5CF",
30: "#AFB7C3",
35: "#A0ABB9",
40: "#939EAE",
45: "#8390A3",
50: "#728196",
55: "#647184",
60: "#5B6778",
65: "#525D6C",
70: "#495260",
75: "#414955",
80: "#383F4A",
85: "#30363F",
90: "#272C33",
95: "#1F2329",
100: "#191C21"
},
blue: {
milk: "#F5FAFF",
0: "#E5F3FF",
10: "#ADD9FF",
20: "#75C0FF",
30: "#3DA6FF",
40: "#008AFF",
50: "#0075D9",
60: "#0061B3",
70: "#004C8C",
80: "#003766",
90: "#002340",
100: "#001526"
},
green: {
milk: "#F7FDF8",
0: "#EAF9EE",
10: "#BEEDCA",
20: "#91E1A5",
30: "#65D481",
40: "#34C759",
50: "#2CA94C",
60: "#248C3E",
70: "#1D6D31",
80: "#155024",
90: "#0D3216",
100: "#081E0D"
},
lightblue: {
milk: "#F5FDFF",
0: "#E5FAFF",
10: "#ADF0FF",
20: "#75E6FF",
30: "#3DDCFF",
40: "#00D1FF",
50: "#00B2D9",
60: "#0093B3",
70: "#00738C",
80: "#005466",
90: "#003440",
100: "#001F26"
},
orange: {
milk: "#FFFBF5",
0: "#FFF5E5",
10: "#FFE0AD",
20: "#FFCA75",
30: "#FFB53D",
40: "#FF9E00",
50: "#D98600",
60: "#B36F00",
70: "#8C5700",
80: "#663F00",
90: "#402800",
100: "#261800"
},
red: {
milk: "#FEF7F7",
0: "#FCEAE9",
10: "#F6BCBB",
20: "#F08E8D",
30: "#EA605E",
40: "#E42E2C",
50: "#C22725",
60: "#9F201F",
70: "#7D1918",
80: "#5B1212",
90: "#390C0B",
100: "#220707"
},
gold: {
milk: "#FFFCF5",
0: "#FFF7E5",
10: "#FFE7AD",
20: "#FFD675",
30: "#FFC63D",
40: "#FFB400",
50: "#D99900",
60: "#B37E00",
70: "#8C6300",
80: "#664800",
90: "#402D00",
100: "#261B00"
},
yellow: {
milk: "#FFFDF5",
0: "#FFFBE5",
10: "#FFF2AD",
20: "#FFE975",
30: "#FFE13D",
40: "#FFD700",
50: "#D9B700",
60: "#B39700",
70: "#8C7600",
80: "#665600",
90: "#403600",
100: "#262000"
},
lime: {
milk: "#FBFFF5",
0: "#F6FFE5",
10: "#E1FFAD",
20: "#CDFF75",
30: "#B9FF3D",
40: "#A3FF00",
50: "#8BD900",
60: "#72B300",
70: "#598C00",
80: "#416600",
90: "#294000",
100: "#182600"
},
teal: {
milk: "#F5FDFC",
0: "#E5F9F6",
10: "#ADEDE3",
20: "#75E1D0",
30: "#3DD4BE",
40: "#00C7A9",
50: "#00A990",
60: "#008C77",
70: "#006D5D",
80: "#005044",
90: "#00322A",
100: "#001E19"
},
purple: {
milk: "#FAF5FF",
0: "#F2E5FF",
10: "#D6ADFF",
20: "#BA75FF",
30: "#9E3DFF",
40: "#8000FF",
50: "#6D00D9",
60: "#5A00B3",
70: "#46008C",
80: "#330066",
90: "#200040",
100: "#130026"
},
violet: {
milk: "#FBF5FF",
0: "#F5E5FF",
10: "#DFADFF",
20: "#C975FF",
30: "#B33DFF",
40: "#9B00FF",
50: "#8400D9",
60: "#6D00B3",
70: "#55008C",
80: "#3E0066",
90: "#270040",
100: "#170026"
},
pink: {
milk: "#FEF7FF",
0: "#FEEBFF",
10: "#FBC0FF",
20: "#F895FF",
30: "#F56AFF",
40: "#F23BFF",
50: "#CE32D9",
60: "#AA29B3",
70: "#85208C",
80: "#611866",
90: "#3D0F40",
100: "#240926"
}
},
borderRadius: {
"none": 0,
"tn": "4px",
"xs": "6px",
"sm": "7px",
"DEFAULT": "8px",
"md": "12px",
"lg": "14px",
"xl": "16px",
"2xl": "20px",
"3xl": "22px",
"full": "999999px"
},
opacity: {
0: 0,
3: 0.03,
5: 0.05,
10: 0.1,
15: 0.15,
20: 0.2,
25: 0.25,
30: 0.3,
35: 0.35,
40: 0.4,
45: 0.45,
50: 0.5,
55: 0.55,
60: 0.6,
65: 0.65,
70: 0.7,
75: 0.75,
80: 0.8,
85: 0.85,
90: 0.9,
95: 0.95,
100: 1
},
extend: {
colors: {
brand: {
DEFAULT: "#9B283D",
dark: "#691222"
},
base: {
error: "#d4351c"
},
link: {
DEFAULT: "#1d70b8",
hover: "#003078",
visited: "#4c2c92",
active: "#0b0c0c"
},
focus: {
DEFAULT: "#ffdd00"
},
other: {
dark: {
green: "#005a30",
red: "#aa2a16",
blue: "#003078",
grey: "#505a5Ff"
},
light: {
green: "#85994b",
purple: "#6f72af",
blue: "#5694ca",
grey: "#f3f2f1",
pink: "#f499be"
},
green: "#00703c",
red: "#D4351C",
yellow: "#ffdd00",
blue: "#1d70b8",
purple: "#4c2c92",
black: "#0b0c0c",
grey: "#b1b4b6",
white: "#ffffff",
pink: "#d53880",
orange: "#f47738",
brown: "#b58840",
turquoise: "#28a197"
},
miscellaneous: {
"browser-border": "#8d8c8a",
"browser-link": "#5a97f8",
"navigation-link": "#1d8feb"
}
},
textColor: {
primary: "#0b0c0c",
secondary: "#505a5f",
grey: "#383f43",
green: "#005a30",
turquoise: "#10403c",
blue: "#144e81",
purple: "#3d2375",
pink: "#80224d",
red: "#942514",
orange: "#6e3619",
yellow: "#594d00",
focus: "#0b0c0c"
},
backgroundColor: {
DEFAULT: "#ffffff",
grey: "#eeefef",
green: "#cce2d8",
turquoise: "#bfe3e0",
blue: "#d2e2f1",
purple: "#dBd5e9",
pink: "#F7d7e6",
red: "#f6d7d2",
orange: "#fCd6c3",
yellow: "#fff7bf",
extended: "#FCFBF9"
},
borderColor: {
default: "#b1b4b6",
subtle: "#e7e7e7",
input: "#0b0c0c"
}
}
}
};