eletrotupi / tcc/ commit / 2d01897

frontend: lint theme file

Pedro Lucas Porcellis porcellis@eletrotupi.com · 4 months ago 2d0189798624bc5481535444134dca1bb0fb1ee1 Browse files
Parents 92fcd2f
Changed files
1
Additions
+61
Deletions
-61
frontend/constants/theme.ts modified+61 -61
frontend/constants/theme.ts
1 1 
/**
2 2 
 * Below are the colors that are used in the app. The colors are defined in the light and dark mode.
3 3 
 * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc.
4 4 
 */
5 5
6 - 
import { Platform } from 'react-native';
6 + 
import { Platform } from "react-native";
7 7
8 8 
// Primary Colors
9 - 
const NEON_GREEN = '#13ec5b';
10 - 
const PRIMARY_DARK = '#0f172a';
9 + 
const NEON_GREEN = "#13ec5b";
10 + 
const PRIMARY_DARK = "#0f172a";
11 11
12 12 
// Surface & Background
13 - 
const BACKGROUND_LIGHT = '#f6f8f6';
14 - 
const SURFACE_LIGHT = '#ffffff';
15 - 
const BACKGROUND_DARK_GHOST = '#F8FAFC';
13 + 
const BACKGROUND_LIGHT = "#f6f8f6";
14 + 
const SURFACE_LIGHT = "#ffffff";
15 + 
const BACKGROUND_DARK_GHOST = "#F8FAFC";
16 16
17 17 
// Text Colors
18 - 
const TEXT_PRIMARY = '#0f172a';
19 - 
const TEXT_SECONDARY = '#64748b';
20 - 
const TEXT_PLACEHOLDER = '#94A3B8';
18 + 
const TEXT_PRIMARY = "#0f172a";
19 + 
const TEXT_SECONDARY = "#64748b";
20 + 
const TEXT_PLACEHOLDER = "#94A3B8";
21 21
22 22 
// Borders & Accents
23 - 
const BORDER_SUBTLE = '#f1f5f9';
24 - 
const BORDER_SUBTLE_GRAY = '#E5E7EB';
25 - 
const BORDER_SUBTLE_LIGHT_GRAY = '#CBD5E1';
26 - 
const STATUS_ACTIVE_BG = 'rgba(19, 236, 91, 0.1)';
23 + 
const BORDER_SUBTLE = "#f1f5f9";
24 + 
const BORDER_SUBTLE_GRAY = "#E5E7EB";
25 + 
const BORDER_SUBTLE_LIGHT_GRAY = "#CBD5E1";
26 + 
const STATUS_ACTIVE_BG = "rgba(19, 236, 91, 0.1)";
27 27
28 28 
// Semantic Color Pills and stuff
29 - 
const PILL_BLUE = '#dbeafe';
30 - 
const PILL_INDIGO = '#e0e7ff';
31 - 
const PILL_PURPLE = '#f3e8ff';
29 + 
const PILL_BLUE = "#dbeafe";
30 + 
const PILL_INDIGO = "#e0e7ff";
31 + 
const PILL_PURPLE = "#f3e8ff";
32 32
33 - 
const tintColorLight = '#12ED5C';
34 - 
const tintColorSecondary = '#618A70';
35 - 
const black = '#0F172A';
36 - 
const gray = '#475569';
37 - 
const lightGray = '#64748B'
33 + 
const tintColorLight = "#12ED5C";
34 + 
const tintColorSecondary = "#618A70";
35 + 
const black = "#0F172A";
36 + 
const gray = "#475569";
37 + 
const lightGray = "#64748B";
38 38
39 39 
export const Colors = {
40 40 
  light: {
41 41 
    // Primary Actions & Focus
42 42 
    text: TEXT_PRIMARY,
61 61 
    inputPlaceholderColor: TEXT_PLACEHOLDER,
62 62
63 63 
    // Cards & Containers
64 64 
    cardBackground: SURFACE_LIGHT,
65 65 
    cardBorder: BORDER_SUBTLE,
66 - 
    cardShadow: 'rgba(0, 0, 0, 0.05)',
66 + 
    cardShadow: "rgba(0, 0, 0, 0.05)",
67 67
68 68 
    // Active / Inactive States
69 69 
    activeBackground: STATUS_ACTIVE_BG,
70 70 
    inactiveOpacity: 0.7,
71 - 
    moodIntensityLabel: '#94a3b8',
71 + 
    moodIntensityLabel: "#94a3b8",
72 72
73 73 
    // Semantic Accents (for categorization)
74 74 
    accentBlue: PILL_BLUE,
75 75 
    accentIndigo: PILL_INDIGO,
76 76 
    accentPurple: PILL_PURPLE,
77 77
78 78 
    // Disabled / Secondary
79 - 
    disabled: '#cbd5e1',
79 + 
    disabled: "#cbd5e1",
80 80 
    divider: BORDER_SUBTLE,
81 - 
    sliderTracking: '#E2E8F0',
82 - 
    sliderLabels: '#94a3b8',
83 - 
    danger: '#EF4444',
84 - 
    textBlack: PRIMARY_DARK
81 + 
    sliderTracking: "#E2E8F0",
82 + 
    sliderLabels: "#94a3b8",
83 + 
    danger: "#EF4444",
84 + 
    textBlack: PRIMARY_DARK,
85 85 
  },
86 86 
};
87 87
88 88 
export const Typography = {
89 89 
  // Headlines
90 90 
  headlineXg: {
91 91 
    fontFamily: Platform.select({
92 - 
      android: 'Inter_900Black',
93 - 
      default: 'Inter',
92 + 
      android: "Inter_900Black",
93 + 
      default: "Inter",
94 94 
    }),
95 95 
    fontSize: 36,
96 - 
    fontWeight: '900' as const,
96 + 
    fontWeight: "900" as const,
97 97 
    lineHeight: 40,
98 98 
  },
99 99 
  headlineLg: {
100 100 
    fontFamily: Platform.select({
101 - 
      android: 'Inter_900Black',
102 - 
      default: 'Inter',
101 + 
      android: "Inter_900Black",
102 + 
      default: "Inter",
103 103 
    }),
104 104 
    fontSize: 20,
105 - 
    fontWeight: '900' as const,
105 + 
    fontWeight: "900" as const,
106 106 
    lineHeight: 28,
107 107 
    letterSpacing: -0.02,
108 108 
  },
109 109 
  headlineMd: {
110 110 
    fontFamily: Platform.select({
111 - 
      android: 'Inter',
112 - 
      default: 'Inter',
111 + 
      android: "Inter",
112 + 
      default: "Inter",
113 113 
    }),
114 114 
    fontSize: 18,
115 - 
    fontWeight: '700' as const,
115 + 
    fontWeight: "700" as const,
116 116 
    lineHeight: 24,
117 117 
  },
118 118
119 119 
  // Body
120 120 
  bodyLg: {
121 121 
    fontFamily: Platform.select({
122 - 
      android: 'Inter',
123 - 
      default: 'Inter',
122 + 
      android: "Inter",
123 + 
      default: "Inter",
124 124 
    }),
125 125 
    fontSize: 16,
126 - 
    fontWeight: '700' as const,
126 + 
    fontWeight: "700" as const,
127 127 
    lineHeight: 20,
128 128 
  },
129 129 
  bodyMd: {
130 130 
    fontFamily: Platform.select({
131 - 
      android: 'Inter',
132 - 
      default: 'Inter',
131 + 
      android: "Inter",
132 + 
      default: "Inter",
133 133 
    }),
134 134 
    fontSize: 14,
135 - 
    fontWeight: '500' as const,
135 + 
    fontWeight: "500" as const,
136 136 
    lineHeight: 20,
137 137 
  },
138 138
139 139 
  // Labels
140 140 
  labelSm: {
141 141 
    fontFamily: Platform.select({
142 - 
      android: 'Inter',
143 - 
      default: 'Inter',
142 + 
      android: "Inter",
143 + 
      default: "Inter",
144 144 
    }),
145 145 
    fontSize: 12,
146 - 
    fontWeight: '600' as const,
146 + 
    fontWeight: "600" as const,
147 147 
    lineHeight: 16,
148 148 
    letterSpacing: 0.05,
149 149 
  },
150 150
151 151 
  // Used for the Slider labels
152 152 
  labelXs: {
153 153 
    fontFamily: Platform.select({
154 - 
      android: 'Inter',
155 - 
      default: 'Inter',
154 + 
      android: "Inter",
155 + 
      default: "Inter",
156 156 
    }),
157 157 
    fontSize: 10,
158 158 
    lineHeight: 15,
159 - 
    letterSpacing: 0.25
159 + 
    letterSpacing: 0.25,
160 160 
  },
161 161
162 162 
  cardHint: {
163 163 
    fontFamily: Platform.select({
164 - 
      android: 'Inter',
165 - 
      default: 'Inter',
164 + 
      android: "Inter",
165 + 
      default: "Inter",
166 166 
    }),
167 167 
    fontSize: 11,
168 168 
    lineHeight: 13.8,
169 - 
    fontStyle: "italic"
170 - 
  }
169 + 
    fontStyle: "italic",
170 + 
  },
171 171 
};
172 172
173 173 
export const Spacing = {
174 174 
  containerPadding: 16, // 1rem
175 175 
  sectionGap: 32, // 2rem
176 176 
  inlineGapSm: 8, // 0.5rem
177 - 
  cardGap: 12 // 0.75rem
177 + 
  cardGap: 12, // 0.75rem
178 178 
};
179 179
180 180 
export const BorderRadius = {
181 181 
  sm: 4, // 0.25rem
182 182 
  default: 8, // 0.5rem
186 186 
  full: 9999, // pill-shaped
187 187 
};
188 188
189 189 
export const Shadows = {
190 190 
  sm: {
191 - 
    shadowColor: '#000000',
191 + 
    shadowColor: "#000000",
192 192 
    shadowOffset: { width: 0, height: 1 },
193 193 
    shadowOpacity: 0.05,
194 194 
    shadowRadius: 2,
195 195 
    elevation: 2,
196 196 
  },
197 197 
  md: {
198 - 
    shadowColor: '#000000',
198 + 
    shadowColor: "#000000",
199 199 
    shadowOffset: { width: 0, height: 4 },
200 200 
    shadowOpacity: 0.1,
201 201 
    shadowRadius: 8,
202 202 
    elevation: 4,
203 203 
  },
210 210 
  },
211 211 
};
212 212
213 213 
export const Fonts = Platform.select({
214 214 
  default: {
215 - 
    sans: 'Inter',
216 - 
    serif: 'serif',
217 - 
    rounded: 'Inter',
218 - 
    mono: 'monospace',
215 + 
    sans: "Inter",
216 + 
    serif: "serif",
217 + 
    rounded: "Inter",
218 + 
    mono: "monospace",
219 219 
  },
220 220 
});
221 221
222 222 
export const Theme = {
223 223 
  colors: Colors,
224 224 
  typography: Typography,
225 225 
  spacing: Spacing,
226 226 
  shadows: Shadows,
227 - 
  borderRadius: BorderRadius
227 + 
  borderRadius: BorderRadius,
228 228 
};