2.5 KB119 lines
Blame
1/**
2 * Copyright (c) Meta Platforms, Inc. and affiliates.
3 *
4 * This source code is licensed under the MIT license found in the
5 * LICENSE file in the root directory of this source tree.
6 */
7
8import * as stylex from '@stylexjs/stylex';
9
10/*
11This file defines theme variables usable in StyleX styles.
12 */
13
14// default is dark theme
15export const colors = stylex.defineVars({
16 bg: 'var(--background)',
17 fg: 'var(--foreground)',
18 brightFg: 'white',
19 focusBorder: 'var(--focus-border)',
20
21 hoverDarken: 'rgba(255, 255, 255, 0.1)',
22 subtleHoverDarken: 'rgba(255, 255, 255, 0.03)',
23 highlightFg: '#f0f0f0',
24
25 modifiedFg: '#e2c08d',
26 addedFg: '#73c991',
27 removedFg: '#f3674f',
28 missingFg: '#b4eaed',
29
30 tooltipBg: 'var(--vscode-editorWidget-background, #252526)',
31 tooltipBorder: 'var(--vscode-editorWidget-border, #454545)',
32
33 purple: '#713fc8',
34 red: '#cf222e',
35 yellow: '#e0d12d',
36 orange: '#dd7c26',
37 green: '#2da44e',
38 blue: '#007acc',
39 grey: '#5f6a79',
40
41 signalFg: 'white',
42 signalGoodBg: '#2da44e',
43 signalMediumBg: '#e0d12d',
44 signalBadBg: '#cf222e',
45
46 errorFg: '#f3674f',
47 errorBg: '#f3674f20',
48
49 landFg: 'white',
50 landBg: '#24853c',
51 landHoverBg: '#207134',
52});
53
54// if using a light theme, we apply a stylex theme to override color variables above
55export const light = stylex.createTheme(colors, {
56 bg: 'var(--background)',
57 fg: 'var(--foreground)',
58 brightFg: 'black',
59 focusBorder: 'var(--focus-border)',
60
61 hoverDarken: 'rgba(0, 0, 0, 0.1)',
62 subtleHoverDarken: 'rgba(0, 0, 0, 0.03)',
63 highlightFg: '#2a2a2a',
64
65 modifiedFg: '#895503',
66 addedFg: '#007100',
67 removedFg: '#ad0707',
68 missingFg: '#418c91',
69
70 tooltipBg: 'var(--vscode-editorWidget-background, #f3f3f3)',
71 tooltipBorder: 'var(--vscode-editorWidget-border, #c8c8c8)',
72
73 purple: '#713fc8',
74 red: '#cf222e',
75 yellow: '#e0d12d',
76 orange: '#dd7c26',
77 green: '#2da44e',
78 blue: '#007acc',
79 grey: '#5f6a79',
80
81 signalFg: 'white',
82 signalGoodBg: '#2da44e',
83 signalMediumBg: '#e0d12d',
84 signalBadBg: '#cf222e',
85
86 errorFg: '#e35941ff',
87 errorBg: '#e3594120',
88
89 landFg: 'white',
90 landBg: '#24853c',
91 landHoverBg: '#207134',
92});
93
94export const spacing = stylex.defineVars({
95 none: '0px',
96 quarter: '2.5px',
97 half: '5px',
98 pad: '10px',
99 double: '20px',
100 xlarge: '32px',
101 xxlarge: '48px',
102 xxxlarge: '96px',
103});
104
105export const radius = stylex.defineVars({
106 small: '2.5px',
107 round: '5px',
108 extraround: '5px',
109 full: '50%',
110});
111
112export const font = stylex.defineVars({
113 smaller: '80%',
114 small: '90%',
115 normal: '100%',
116 big: '110%',
117 bigger: '120%',
118});
119