RMC-Software-Documentation/tailwind.config.js at main · USACE-RMC/RMC-Software-Documentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/** @type {import('tailwindcss').Config} */
export default {
  darkMode: ['class', '[data-theme="dark"]'],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './docs/**/*.{js,ts,jsx,tsx,md,mdx}',
    './blog/**/*.{js,ts,jsx,tsx,md,mdx}',
    './index.html',
  ],
  theme: {
    extend: {
      fontFamily: {
        usace: ['Roboto', 'Arial', 'Helvetica', 'sans-serif'],
      },
      fontSize: {
        '1-0': '1rem',
        '1-25': '1.25rem',
        '1-5': '1.5rem',
        '1-75': '1.75rem',
        '2-0': '2rem',
        10: '10px',
        12: '12px',
        14: '14px',
        16: '16px',
        18: '18px',
        20: '20px',
        24: '24px',
        h1: 'clamp(1.5rem, 3vw, 2.25rem)',
        h2: 'clamp(1.25rem, 2.5vw, 1.75rem)',
        h3: 'clamp(1.125rem, 2vw, 1.5rem)',
        h4: 'clamp(1rem, 1.75vw, 1.25rem)',
        h5: 'clamp(0.925rem, 1.5vw, 1.1rem)',
        h6: 'clamp(0.875rem, 1.35vw, 1.05rem)',
        caption: 'clamp(0.7rem, 2vw, 0.9rem)',
        footnote: 'clamp(0.7rem, 2vw, 0.9rem)',
        normal: 'clamp(0.8rem, 2vw, 1.0rem)',
        'content-bubble': 'clamp(1.0rem, 2vw, 1.2rem)',
        large: 'clamp(1.1rem, 2vw, 1.5rem)',
        xlarge: 'clamp(1.2rem, 2.5vw, 1.4rem)',
        '2xl': 'clamp(1.5rem, 3vw, 3.0rem)',
        '3xl': 'clamp(1.75rem, 2.5vw, 2.0rem)',
        '4xl': 'clamp(1.8rem, 2.5vw, 2.0rem)',
        'header-container': 'clamp(1.8rem, 3.0vw, 2.0rem)',
        navbar: 'clamp(0.8rem, 2vw, 1.0rem)',
        table: 'clamp(0.8rem, 2vw, 1.0rem)',
      },
      gridTemplateRows: {
        '1fr-auto': '1fr auto',
      },
      colors: {
        // Static USACE brand and nav colors
        'nav-light-gray': '#d0d0d0',
        'nav-gray': 'hsla(0, 0%, 80%, 0.9)',
        'nav-translucent-gray': 'hsla(0, 0%, 100%, 0.2)',
        'nav-black': '#18181b',
        'nav-dark-gray': 'rgba(51,51,51,.95)',
        'usace-box-light-gray': '#ededed',
        'usace-box-red': '#de1e2e',
        'footer-black': '#1b1b1b',
        'footer-gray': '#333',
        'footer-light-gray': '#ccc',
        'usace-black': '#18181b',
        'gov-banner-gray': '#aebfd4',
        'gov-banner-black': '#15263b',

        // Surfaces (light/dark-aware via CSS variables)
        'surface-nav': 'var(--surface-nav)',
        'surface-header': 'var(--surface-header)',
        'surface-page': 'var(--surface-page)',
        'surface-panel': 'var(--surface-panel)',
        'surface-card': 'var(--surface-card)',
        'surface-card-hover': 'var(--surface-card-hover)',
        'surface-icon': 'var(--surface-icon)',
        'surface-zebra': 'var(--surface-zebra)',
        'surface-inactive': 'var(--surface-inactive)',

        // Dynamically linked to CSS variables
        'border-color': 'var(--border-color)',
        'font-color': 'var(--font-color)',
        'font-color-inverse': 'var(--font-color-inverse)',
        'font-color-description': 'var(--font-color-description)',
        'sidebar-bg': 'var(--sidebar-background-color)',
        'sidebar-text': 'var(--sidebar-text-color)',
        'background-theme': 'var(--ifm-background-color-theme)',

        'ifm-primary': 'var(--ifm-color-primary)',
        'ifm-primary-dark': 'var(--ifm-color-primary-dark)',
        'ifm-primary-darker': 'var(--ifm-color-primary-darker)',
        'ifm-primary-darkest': 'var(--ifm-color-primary-darkest)',
        'ifm-primary-light': 'var(--ifm-color-primary-light)',
        'ifm-primary-lighter': 'var(--ifm-color-primary-lighter)',
        'ifm-primary-lightest': 'var(--ifm-color-primary-lightest)',

        'ifm-footer-link': 'var(--ifm-footer-link-color)',
        'ifm-footer-link-hover': 'var(--ifm-footer-link-hover-color)',
        'ifm-link': 'var(--ifm-link-color)',
        'ifm-link-hover': 'var(--ifm-link-hover-color)',
        'ifm-link-active': 'var(--ifm-link-active-color)',
        'ifm-link-visited': 'var(--ifm-link-visited-color)',

        'tab-color': 'var(--ifm-tab-color)',
        'tab-color-inactive': 'var(--ifm-tab-color-inactive)',
        'tab-hover-color': 'var(--ifm-tab-hover-color)',
        'tab-font-color': 'var(--ifm-tab-font-color)',
        'tab-font-color-inactive': 'var(--ifm-tab-font-color-inactive)',
        'tab-underline-color': 'var(--ifm-tab-underline-color)',
      },
    },
    /* ── Breakpoints ──────────────────────────────────────────────────────
     *
     * Reference devices (CSS viewport width × height, DPR):
     *   Phone:          393 × 852,  DPR 3
     *   Tablet:         820 × 1180, DPR 2
     *   iPad Pro 13":  1032 × 1376, DPR 2
     *   Laptop:        1280 × 720,  DPR 1.5
     *   Desktop 16:9:  1920 × 1080, DPR 1
     *   Desktop 16:10: 1920 × 1200, DPR 1
     *
     * Device-tier transitions (used for layout, navigation, grids):
     *   sm  (640px)  — phone → tablet
     *   lg  (1080px) — tablet → laptop  (above iPad Pro 13" portrait @ 1032px)
     *   2xl (1536px) — laptop → desktop
     *
     * Fine-grained breakpoints within tiers:
     *   md  (768px)  — mid-tablet adjustments
     *   xl  (1280px) — mid-laptop adjustments (matches laptop device width)
     */
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1080px',
      xl: '1280px',
      '2xl': '1536px',
    },
  },
  corePlugins: {
    container: false,
  },
  plugins: [require('@tailwindcss/forms')],
};