mirror of
https://github.com/inaturalist/iNaturalistReactNative.git
synced 2026-08-01 01:47:43 -04:00
b6588464f8
I think nativewind v2 does not support setting only the background color opaque with classes, so I'll just add it to the hex code.
97 lines
2.7 KiB
JavaScript
97 lines
2.7 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
|
|
const setLineHeight = lineHeight => ( { lineHeight } );
|
|
|
|
module.exports = {
|
|
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
letterSpacing: {
|
|
tight: "-.25px",
|
|
wide: ".65px",
|
|
widest: "2px",
|
|
},
|
|
fontSize: {
|
|
// Typography: Heading1
|
|
"3xl": ["25px", setLineHeight( "30px" )],
|
|
// Typography: Heading2
|
|
"2xl": ["21px", setLineHeight( "25.2px" )],
|
|
// Typography: Subheading1
|
|
xl: ["20px", setLineHeight( "24px" )],
|
|
// Typography: Heading3
|
|
lg: ["18px", setLineHeight( "21.6px" )],
|
|
// Typography: Body1/List1
|
|
base: ["17px", setLineHeight( "20.4px" )],
|
|
// Typography: Heading4/Body2/UnderlinedLink
|
|
md: ["15px", setLineHeight( "18px" )],
|
|
// Typography: List2
|
|
sm: ["14px", setLineHeight( "16.8px" )],
|
|
// Typography: Body3
|
|
xs: ["13px", setLineHeight( "18px" )],
|
|
// Typography: Body4
|
|
"2xs": ["11px", setLineHeight( "13.2px" )],
|
|
// Typography: Heading5
|
|
"3xs": ["8px", setLineHeight( "9.6px" )],
|
|
},
|
|
height: {
|
|
22: "5.5rem",
|
|
},
|
|
fontFamily: {
|
|
"Lato-Bold": ["Lato-Bold"],
|
|
"Lato-BoldItalic": ["Lato-BoldItalic"], // working
|
|
"Lato-Italic": ["Lato-Italic"], // working
|
|
"Lato-Medium": ["Lato-Medium"],
|
|
"Lato-MediumItalic": ["Lato-MediumItalic"], // working
|
|
"Lato-Regular": ["Lato-Regular"],
|
|
// selected from list of fonts already available in RN
|
|
// https://infinitbility.com/react-native-font-family-list/
|
|
monospace: ["monospace"],
|
|
Menlo: ["Menlo"],
|
|
},
|
|
borderRadius: {
|
|
// tried using rem value here, but it wouldn't load on iOS or Android
|
|
DEFAULT: "7px",
|
|
xs: "1px",
|
|
sm: "4px",
|
|
md: "9px",
|
|
lg: "8px",
|
|
"2xl": "15px",
|
|
},
|
|
},
|
|
colors: {
|
|
accessibleGreen: "#5D8017",
|
|
black: "#000000",
|
|
darkGray: "#454545",
|
|
darkGrayDisabled: "#828181",
|
|
inatGreen: "#74AC00",
|
|
inatGreenDisabled: "#B9D580",
|
|
inatGreenDisabledDark: "#3A5600",
|
|
lightGray: "#E8E8E8",
|
|
lightGrayOpaque: "#E8E8E854",
|
|
mediumGray: "#BFBFBF",
|
|
mediumGrayGhost: "#BFBFBF33",
|
|
warningRed: "#9B1010",
|
|
warningRedDisabled: "#b06365",
|
|
warningYellow: "#E6A939",
|
|
white: "#ffffff",
|
|
yellow: "#FFD600",
|
|
|
|
// Mostly for debugging
|
|
red: "#FF0000",
|
|
green: "#00FF00",
|
|
blue: "#0000FF",
|
|
deepPink: "#FF1493",
|
|
deeppink: "#FF1493",
|
|
DeepPink: "#FF1493",
|
|
orange: "#FFA500",
|
|
},
|
|
screens: {
|
|
sm: "240px",
|
|
md: "320px",
|
|
lg: "390px",
|
|
xl: "744px",
|
|
"2xl": "1366px",
|
|
},
|
|
},
|
|
};
|