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