@xswap-link/sdk
Version:
JavaScript SDK for XSwap platform
111 lines (103 loc) • 4.72 kB
JavaScript
/** @type {import("tailwindcss").Config} */
const withFontVariable = (fallback) => `var(--font-family, ${fallback})`;
export default {
content: ["src/components/**/*.{ts,tsx}", "src/context/**/*.{ts,tsx}"],
theme: {
fontFamily: {
body: [
withFontVariable("'Satoshi-Medium', Tahoma, Verdana, ui-sans-serif"),
],
sans: [
withFontVariable("'Satoshi-Medium', Tahoma, Verdana, ui-sans-serif"),
],
"sans-bold": [
withFontVariable("'Satoshi-Bold', Tahoma, Verdana, ui-sans-serif"),
],
},
extend: {
colors: {
t_main_accent_light:
"color-mix(in srgb, var(--main-accent-light) calc(<alpha-value> * 100%), transparent)",
t_main_accent_dark:
"color-mix(in srgb, var(--main-accent-dark) calc(<alpha-value> * 100%), transparent)",
t_text_primary: `color-mix(in srgb, var(--text-primary) calc(<alpha-value> * 100%), transparent)`,
t_text_secondary: `color-mix(in srgb, var(--text-secondary) calc(<alpha-value> * 100%), transparent)`,
t_text_tertiary:
"color-mix(in srgb, var(--text-tertiary) calc(<alpha-value> * 100%), transparent)",
t_text_red:
"color-mix(in srgb, var(--text-red) calc(<alpha-value> * 100%), transparent)",
t_text_orange:
"color-mix(in srgb, var(--text-orange) calc(<alpha-value> * 100%), transparent)",
t_text_green:
"color-mix(in srgb, var(--text-green) calc(<alpha-value> * 100%), transparent)",
t_click_primary:
"color-mix(in srgb, var(--click-primary) calc(<alpha-value> * 100%), transparent)",
t_click_secondary:
"color-mix(in srgb, var(--click-secondary) calc(<alpha-value> * 100%), transparent)",
t_click_tertiary:
"color-mix(in srgb, var(--click-tertiary) calc(<alpha-value> * 100%), transparent)",
t_bg_primary:
"color-mix(in srgb, var(--bg-primary) calc(<alpha-value> * 100%), transparent)",
t_bg_secondary:
"color-mix(in srgb, var(--bg-secondary) calc(<alpha-value> * 100%), transparent)",
t_bg_tertiary:
"color-mix(in srgb, var(--bg-tertiary) calc(<alpha-value> * 100%), transparent)",
t_button_pr_off_text:
"color-mix(in srgb, var(--button-pr-off-text) calc(<alpha-value> * 100%), transparent)",
t_button_pr_off_bg:
"color-mix(in srgb, var(--button-pr-off-bg) calc(<alpha-value> * 100%), transparent)",
t_button_pr_text:
"color-mix(in srgb, var(--button-pr-text) calc(<alpha-value> * 100%), transparent)",
t_button_pr_bg:
"color-mix(in srgb, var(--button-pr-bg) calc(<alpha-value> * 100%), transparent)",
t_success_dark:
"color-mix(in srgb, var(--success-dark) calc(<alpha-value> * 100%), transparent)",
t_success_light:
"color-mix(in srgb, var(--success-light) calc(<alpha-value> * 100%), transparent)",
t_info_dark:
"color-mix(in srgb, var(--info-dark) calc(<alpha-value> * 100%), transparent)",
t_info_light:
"color-mix(in srgb, var(--info-light) calc(<alpha-value> * 100%), transparent)",
t_warning_dark:
"color-mix(in srgb, var(--warning-dark) calc(<alpha-value> * 100%), transparent)",
t_warning_light:
"color-mix(in srgb, var(--warning-light) calc(<alpha-value> * 100%), transparent)",
t_error_dark:
"color-mix(in srgb, var(--error-dark) calc(<alpha-value> * 100%), transparent)",
t_error_light:
"color-mix(in srgb, var(--error-light) calc(<alpha-value> * 100%), transparent)",
t_chainlink_logo:
"color-mix(in srgb, var(--chainlink-logo) calc(<alpha-value> * 100%), transparent)",
x_alert: "rgb(255,183,77)",
x_alert_light: "rgb(255,226,183)",
x_blue: "#3396FF",
x_green: "#66bb6a",
x_orange: "#ffa726",
x_grey: "#ffffff80",
x_error_background: "rgba(255,202,40,0.1)",
x_skeleton_background: "rgba(255,255,255,0.13)",
x_error_border: "rgba(255,111,0,1)",
x_blue_light: "rgba(54,129,198,1)",
x_blue_dark: "rgba(43,74,157,1)",
x_green_light: "rgba(43,74,157,1)",
x_green_dark: "rgba(46,125,50,1)",
x_swap_primary: "#e0e7fa",
x_swap_secondary: "#1a2b6b",
x_swap_secondary_active: "#e0e7fa",
},
minWidth: {
x_modal: "var(--modal-width, 340px)",
},
width: {
x_modal: "var(--modal-width)",
},
maxWidth: {
x_modal: "var(--modal-width, 480px)",
},
animation: {
"spin-slow": "spin 3s linear infinite",
},
},
},
plugins: [],
};