OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2026-01-15 12:15:22 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity
Files
fb3b9ead472ec0254e4ce7bd9000eb100010f08e
react/packages/react-devtools-shared/src/devtools/constants.js

Ignoring revisions in .git-blame-ignore-revs. Click here to bypass and see the normal blame view.

345 lines
16 KiB
JavaScript
Raw Normal View History

[DevTools][BE] move shared types & constants to consolidated locations (#26572) ## Summary This pull request aims to improve the maintainability of the codebase by consolidating types and constants that are shared between the backend and frontend. This consolidation will allow us to maintain backwards compatibility in the frontend in the future. To achieve this, we have moved the shared types and constants to the following blessed files: - react-devtools-shared/src/constants - react-devtools-shared/src/types - react-devtools-shared/src/backend/types - react-devtools-shared/src/backend/NativeStyleEditor/types Please note that the inclusion of NativeStyleEditor in this list is temporary, and we plan to remove it once we have a better plugin system in place. ## How did you test this change? I have tested it by running `yarn flow dom-node`, which reports no errors.
2023-04-10 17:07:05 -04:00
export const CHANGE_LOG_URL =
'https://github.com/facebook/react/blob/main/packages/react-devtools/CHANGELOG.md';
export const UNSUPPORTED_VERSION_URL =
'https://reactjs.org/blog/2019/08/15/new-react-devtools.html#how-do-i-get-the-old-version-back';
export const REACT_DEVTOOLS_WORKPLACE_URL =
'https://fburl.com/react-devtools-workplace-group';
import type {
Theme,
DisplayDensity,
} from './devtools/views/Settings/SettingsContext';
export const THEME_STYLES: {[style: Theme | DisplayDensity]: any, ...} = {
light: {
'--color-attribute-name': '#ef6632',
'--color-attribute-name-not-editable': '#23272f',
'--color-attribute-name-inverted': 'rgba(255, 255, 255, 0.7)',
'--color-attribute-value': '#1a1aa6',
'--color-attribute-value-inverted': '#ffffff',
'--color-attribute-editable-value': '#1a1aa6',
'--color-background': '#ffffff',
'--color-background-hover': 'rgba(0, 136, 250, 0.1)',
'--color-background-inactive': '#e5e5e5',
'--color-background-invalid': '#fff0f0',
'--color-background-selected': '#0088fa',
'--color-button-background': '#ffffff',
'--color-button-background-focus': '#ededed',
'--color-button': '#5f6673',
'--color-button-disabled': '#cfd1d5',
'--color-button-active': '#0088fa',
'--color-button-focus': '#23272f',
'--color-button-hover': '#23272f',
'--color-border': '#eeeeee',
'--color-commit-did-not-render-fill': '#cfd1d5',
'--color-commit-did-not-render-fill-text': '#000000',
'--color-commit-did-not-render-pattern': '#cfd1d5',
'--color-commit-did-not-render-pattern-text': '#333333',
'--color-commit-gradient-0': '#37afa9',
'--color-commit-gradient-1': '#63b19e',
'--color-commit-gradient-2': '#80b393',
'--color-commit-gradient-3': '#97b488',
'--color-commit-gradient-4': '#abb67d',
'--color-commit-gradient-5': '#beb771',
'--color-commit-gradient-6': '#cfb965',
'--color-commit-gradient-7': '#dfba57',
'--color-commit-gradient-8': '#efbb49',
'--color-commit-gradient-9': '#febc38',
'--color-commit-gradient-text': '#000000',
'--color-component-name': '#6a51b2',
'--color-component-name-inverted': '#ffffff',
fix[react-devtools] component badge in light mode is now not invisible (#29852) In light mode, component badges in profiler were invisible due to using the alpha channel to produce the grayish color. Instead I'm using the equivalent RGB without that alpha. **before** In light mode, component badges in profiler were invisible (forwardRef badge in this case): ![Screenshot 2024-06-11 at 13 15 16](https://github.com/facebook/react/assets/5188459/385b80a5-d385-4eac-bac6-7fec6938d78f) **after** Profiler tooltip fix. also notice there's no regression on the right menu: ![Screenshot 2024-06-11 at 13 04 41](https://github.com/facebook/react/assets/5188459/64aa27f7-35b8-4e3b-91d4-c12d5a97330e) also works in dark mode: ![Screenshot 2024-06-11 at 13 12 17](https://github.com/facebook/react/assets/5188459/99aa55fd-23ee-4881-9676-63eca86bf761) Still visible in components in light mode, whether selected or not: ![Screenshot 2024-06-11 at 13 04 49](https://github.com/facebook/react/assets/5188459/59c0bf63-d9b0-4d46-a145-f615249d1da0) components dark mode: ![Screenshot 2024-06-11 at 13 10 25](https://github.com/facebook/react/assets/5188459/16e61acc-c431-4bfa-8a65-ca6701f4379b)
2024-06-11 14:32:39 +01:00
'--color-component-badge-background': '#e6e6e6',
[DevTools][BE] move shared types & constants to consolidated locations (#26572) ## Summary This pull request aims to improve the maintainability of the codebase by consolidating types and constants that are shared between the backend and frontend. This consolidation will allow us to maintain backwards compatibility in the frontend in the future. To achieve this, we have moved the shared types and constants to the following blessed files: - react-devtools-shared/src/constants - react-devtools-shared/src/types - react-devtools-shared/src/backend/types - react-devtools-shared/src/backend/NativeStyleEditor/types Please note that the inclusion of NativeStyleEditor in this list is temporary, and we plan to remove it once we have a better plugin system in place. ## How did you test this change? I have tested it by running `yarn flow dom-node`, which reports no errors.
2023-04-10 17:07:05 -04:00
'--color-component-badge-background-inverted': 'rgba(255, 255, 255, 0.25)',
'--color-component-badge-count': '#777d88',
'--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.7)',
'--color-console-error-badge-text': '#ffffff',
'--color-console-error-background': '#fff0f0',
'--color-console-error-border': '#ffd6d6',
'--color-console-error-icon': '#eb3941',
'--color-console-error-text': '#fe2e31',
'--color-console-warning-badge-text': '#000000',
'--color-console-warning-background': '#fffbe5',
'--color-console-warning-border': '#fff5c1',
'--color-console-warning-icon': '#f4bd00',
'--color-console-warning-text': '#64460c',
'--color-context-background': 'rgba(0,0,0,.9)',
'--color-context-background-hover': 'rgba(255, 255, 255, 0.1)',
'--color-context-background-selected': '#178fb9',
'--color-context-border': '#3d424a',
'--color-context-text': '#ffffff',
'--color-context-text-selected': '#ffffff',
'--color-dim': '#777d88',
'--color-dimmer': '#cfd1d5',
'--color-dimmest': '#eff0f1',
'--color-error-background': 'hsl(0, 100%, 97%)',
'--color-error-border': 'hsl(0, 100%, 92%)',
'--color-error-text': '#ff0000',
'--color-expand-collapse-toggle': '#777d88',
[Devtools] Rename Forget badge (#28858) ## Summary The Forget codename needs to be hidden from the UI to avoid confusion. Going forward, we'll be referring to this set of features as part of the larger React compiler. We'll be describing the primary feature that we've built so far as auto-memoization, and this badge helps devs see which components have been automatically memoized by the compiler. ## How did you test this change? - force Forget badge on with and without the presence of other badges - confirm colors/UI in light and dark modes - force badges on for `ElementBadges`, `InspectableElementBadges`, `IndexableElementBadges` - Running yarn start in packages/react-devtools-shell [demo video](https://github.com/facebook/react/assets/973058/fa829018-7644-4425-8395-c5cd84691f3c)
2024-04-18 13:55:53 -07:00
'--color-forget-badge-background': '#2683e2',
'--color-forget-badge-background-inverted': '#1a6bbc',
'--color-forget-text': '#fff',
[DevTools][BE] move shared types & constants to consolidated locations (#26572) ## Summary This pull request aims to improve the maintainability of the codebase by consolidating types and constants that are shared between the backend and frontend. This consolidation will allow us to maintain backwards compatibility in the frontend in the future. To achieve this, we have moved the shared types and constants to the following blessed files: - react-devtools-shared/src/constants - react-devtools-shared/src/types - react-devtools-shared/src/backend/types - react-devtools-shared/src/backend/NativeStyleEditor/types Please note that the inclusion of NativeStyleEditor in this list is temporary, and we plan to remove it once we have a better plugin system in place. ## How did you test this change? I have tested it by running `yarn flow dom-node`, which reports no errors.
2023-04-10 17:07:05 -04:00
'--color-link': '#0000ff',
'--color-modal-background': 'rgba(255, 255, 255, 0.75)',
'--color-bridge-version-npm-background': '#eff0f1',
'--color-bridge-version-npm-text': '#000000',
'--color-bridge-version-number': '#0088fa',
'--color-primitive-hook-badge-background': '#e5e5e5',
'--color-primitive-hook-badge-text': '#5f6673',
'--color-record-active': '#fc3a4b',
'--color-record-hover': '#3578e5',
'--color-record-inactive': '#0088fa',
'--color-resize-bar': '#eeeeee',
'--color-resize-bar-active': '#dcdcdc',
'--color-resize-bar-border': '#d1d1d1',
'--color-resize-bar-dot': '#333333',
'--color-timeline-internal-module': '#d1d1d1',
'--color-timeline-internal-module-hover': '#c9c9c9',
'--color-timeline-internal-module-text': '#444',
'--color-timeline-native-event': '#ccc',
'--color-timeline-native-event-hover': '#aaa',
'--color-timeline-network-primary': '#fcf3dc',
'--color-timeline-network-primary-hover': '#f0e7d1',
'--color-timeline-network-secondary': '#efc457',
'--color-timeline-network-secondary-hover': '#e3ba52',
'--color-timeline-priority-background': '#f6f6f6',
'--color-timeline-priority-border': '#eeeeee',
'--color-timeline-user-timing': '#c9cacd',
'--color-timeline-user-timing-hover': '#93959a',
'--color-timeline-react-idle': '#d3e5f6',
'--color-timeline-react-idle-hover': '#c3d9ef',
'--color-timeline-react-render': '#9fc3f3',
'--color-timeline-react-render-hover': '#83afe9',
'--color-timeline-react-render-text': '#11365e',
'--color-timeline-react-commit': '#c88ff0',
'--color-timeline-react-commit-hover': '#b281d6',
'--color-timeline-react-commit-text': '#3e2c4a',
'--color-timeline-react-layout-effects': '#b281d6',
'--color-timeline-react-layout-effects-hover': '#9d71bd',
'--color-timeline-react-layout-effects-text': '#3e2c4a',
'--color-timeline-react-passive-effects': '#b281d6',
'--color-timeline-react-passive-effects-hover': '#9d71bd',
'--color-timeline-react-passive-effects-text': '#3e2c4a',
'--color-timeline-react-schedule': '#9fc3f3',
'--color-timeline-react-schedule-hover': '#2683E2',
'--color-timeline-react-suspense-rejected': '#f1cc14',
'--color-timeline-react-suspense-rejected-hover': '#ffdf37',
'--color-timeline-react-suspense-resolved': '#a6e59f',
'--color-timeline-react-suspense-resolved-hover': '#89d281',
'--color-timeline-react-suspense-unresolved': '#c9cacd',
'--color-timeline-react-suspense-unresolved-hover': '#93959a',
'--color-timeline-thrown-error': '#ee1638',
'--color-timeline-thrown-error-hover': '#da1030',
'--color-timeline-text-color': '#000000',
'--color-timeline-text-dim-color': '#ccc',
'--color-timeline-react-work-border': '#eeeeee',
'--color-search-match': 'yellow',
'--color-search-match-current': '#f7923b',
'--color-selected-tree-highlight-active': 'rgba(0, 136, 250, 0.1)',
'--color-selected-tree-highlight-inactive': 'rgba(0, 0, 0, 0.05)',
'--color-scroll-caret': 'rgba(150, 150, 150, 0.5)',
'--color-tab-selected-border': '#0088fa',
'--color-text': '#000000',
'--color-text-invalid': '#ff0000',
'--color-text-selected': '#ffffff',
'--color-toggle-background-invalid': '#fc3a4b',
'--color-toggle-background-on': '#0088fa',
'--color-toggle-background-off': '#cfd1d5',
'--color-toggle-text': '#ffffff',
'--color-warning-background': '#fb3655',
'--color-warning-background-hover': '#f82042',
'--color-warning-text-color': '#ffffff',
'--color-warning-text-color-inverted': '#fd4d69',
// The styles below should be kept in sync with 'root.css'
// They are repeated there because they're used by e.g. tooltips or context menus
// which get rendered outside of the DOM subtree (where normal theme/styles are written).
'--color-scroll-thumb': '#c2c2c2',
'--color-scroll-track': '#fafafa',
'--color-tooltip-background': 'rgba(0, 0, 0, 0.9)',
'--color-tooltip-text': '#ffffff',
},
dark: {
'--color-attribute-name': '#9d87d2',
'--color-attribute-name-not-editable': '#ededed',
'--color-attribute-name-inverted': '#282828',
'--color-attribute-value': '#cedae0',
'--color-attribute-value-inverted': '#ffffff',
'--color-attribute-editable-value': 'yellow',
'--color-background': '#282c34',
'--color-background-hover': 'rgba(255, 255, 255, 0.1)',
'--color-background-inactive': '#3d424a',
'--color-background-invalid': '#5c0000',
'--color-background-selected': '#178fb9',
'--color-button-background': '#282c34',
'--color-button-background-focus': '#3d424a',
'--color-button': '#afb3b9',
'--color-button-active': '#61dafb',
'--color-button-disabled': '#4f5766',
'--color-button-focus': '#a2e9fc',
'--color-button-hover': '#ededed',
'--color-border': '#3d424a',
'--color-commit-did-not-render-fill': '#777d88',
'--color-commit-did-not-render-fill-text': '#000000',
'--color-commit-did-not-render-pattern': '#666c77',
'--color-commit-did-not-render-pattern-text': '#ffffff',
'--color-commit-gradient-0': '#37afa9',
'--color-commit-gradient-1': '#63b19e',
'--color-commit-gradient-2': '#80b393',
'--color-commit-gradient-3': '#97b488',
'--color-commit-gradient-4': '#abb67d',
'--color-commit-gradient-5': '#beb771',
'--color-commit-gradient-6': '#cfb965',
'--color-commit-gradient-7': '#dfba57',
'--color-commit-gradient-8': '#efbb49',
'--color-commit-gradient-9': '#febc38',
'--color-commit-gradient-text': '#000000',
'--color-component-name': '#61dafb',
'--color-component-name-inverted': '#282828',
[Devtools] Rename Forget badge (#28858) ## Summary The Forget codename needs to be hidden from the UI to avoid confusion. Going forward, we'll be referring to this set of features as part of the larger React compiler. We'll be describing the primary feature that we've built so far as auto-memoization, and this badge helps devs see which components have been automatically memoized by the compiler. ## How did you test this change? - force Forget badge on with and without the presence of other badges - confirm colors/UI in light and dark modes - force badges on for `ElementBadges`, `InspectableElementBadges`, `IndexableElementBadges` - Running yarn start in packages/react-devtools-shell [demo video](https://github.com/facebook/react/assets/973058/fa829018-7644-4425-8395-c5cd84691f3c)
2024-04-18 13:55:53 -07:00
'--color-component-badge-background': '#5e6167',
'--color-component-badge-background-inverted': '#46494e',
[DevTools][BE] move shared types & constants to consolidated locations (#26572) ## Summary This pull request aims to improve the maintainability of the codebase by consolidating types and constants that are shared between the backend and frontend. This consolidation will allow us to maintain backwards compatibility in the frontend in the future. To achieve this, we have moved the shared types and constants to the following blessed files: - react-devtools-shared/src/constants - react-devtools-shared/src/types - react-devtools-shared/src/backend/types - react-devtools-shared/src/backend/NativeStyleEditor/types Please note that the inclusion of NativeStyleEditor in this list is temporary, and we plan to remove it once we have a better plugin system in place. ## How did you test this change? I have tested it by running `yarn flow dom-node`, which reports no errors.
2023-04-10 17:07:05 -04:00
'--color-component-badge-count': '#8f949d',
[Devtools] Rename Forget badge (#28858) ## Summary The Forget codename needs to be hidden from the UI to avoid confusion. Going forward, we'll be referring to this set of features as part of the larger React compiler. We'll be describing the primary feature that we've built so far as auto-memoization, and this badge helps devs see which components have been automatically memoized by the compiler. ## How did you test this change? - force Forget badge on with and without the presence of other badges - confirm colors/UI in light and dark modes - force badges on for `ElementBadges`, `InspectableElementBadges`, `IndexableElementBadges` - Running yarn start in packages/react-devtools-shell [demo video](https://github.com/facebook/react/assets/973058/fa829018-7644-4425-8395-c5cd84691f3c)
2024-04-18 13:55:53 -07:00
'--color-component-badge-count-inverted': 'rgba(255, 255, 255, 0.85)',
[DevTools][BE] move shared types & constants to consolidated locations (#26572) ## Summary This pull request aims to improve the maintainability of the codebase by consolidating types and constants that are shared between the backend and frontend. This consolidation will allow us to maintain backwards compatibility in the frontend in the future. To achieve this, we have moved the shared types and constants to the following blessed files: - react-devtools-shared/src/constants - react-devtools-shared/src/types - react-devtools-shared/src/backend/types - react-devtools-shared/src/backend/NativeStyleEditor/types Please note that the inclusion of NativeStyleEditor in this list is temporary, and we plan to remove it once we have a better plugin system in place. ## How did you test this change? I have tested it by running `yarn flow dom-node`, which reports no errors.
2023-04-10 17:07:05 -04:00
'--color-console-error-badge-text': '#000000',
'--color-console-error-background': '#290000',
'--color-console-error-border': '#5c0000',
'--color-console-error-icon': '#eb3941',
'--color-console-error-text': '#fc7f7f',
'--color-console-warning-badge-text': '#000000',
'--color-console-warning-background': '#332b00',
'--color-console-warning-border': '#665500',
'--color-console-warning-icon': '#f4bd00',
'--color-console-warning-text': '#f5f2ed',
'--color-context-background': 'rgba(255,255,255,.95)',
'--color-context-background-hover': 'rgba(0, 136, 250, 0.1)',
'--color-context-background-selected': '#0088fa',
'--color-context-border': '#eeeeee',
'--color-context-text': '#000000',
'--color-context-text-selected': '#ffffff',
'--color-dim': '#8f949d',
'--color-dimmer': '#777d88',
'--color-dimmest': '#4f5766',
'--color-error-background': '#200',
'--color-error-border': '#900',
'--color-error-text': '#f55',
'--color-expand-collapse-toggle': '#8f949d',
[Devtools] Rename Forget badge (#28858) ## Summary The Forget codename needs to be hidden from the UI to avoid confusion. Going forward, we'll be referring to this set of features as part of the larger React compiler. We'll be describing the primary feature that we've built so far as auto-memoization, and this badge helps devs see which components have been automatically memoized by the compiler. ## How did you test this change? - force Forget badge on with and without the presence of other badges - confirm colors/UI in light and dark modes - force badges on for `ElementBadges`, `InspectableElementBadges`, `IndexableElementBadges` - Running yarn start in packages/react-devtools-shell [demo video](https://github.com/facebook/react/assets/973058/fa829018-7644-4425-8395-c5cd84691f3c)
2024-04-18 13:55:53 -07:00
'--color-forget-badge-background': '#2683e2',
'--color-forget-badge-background-inverted': '#1a6bbc',
'--color-forget-text': '#fff',
[DevTools][BE] move shared types & constants to consolidated locations (#26572) ## Summary This pull request aims to improve the maintainability of the codebase by consolidating types and constants that are shared between the backend and frontend. This consolidation will allow us to maintain backwards compatibility in the frontend in the future. To achieve this, we have moved the shared types and constants to the following blessed files: - react-devtools-shared/src/constants - react-devtools-shared/src/types - react-devtools-shared/src/backend/types - react-devtools-shared/src/backend/NativeStyleEditor/types Please note that the inclusion of NativeStyleEditor in this list is temporary, and we plan to remove it once we have a better plugin system in place. ## How did you test this change? I have tested it by running `yarn flow dom-node`, which reports no errors.
2023-04-10 17:07:05 -04:00
'--color-link': '#61dafb',
'--color-modal-background': 'rgba(0, 0, 0, 0.75)',
'--color-bridge-version-npm-background': 'rgba(0, 0, 0, 0.25)',
'--color-bridge-version-npm-text': '#ffffff',
'--color-bridge-version-number': 'yellow',
'--color-primitive-hook-badge-background': 'rgba(0, 0, 0, 0.25)',
'--color-primitive-hook-badge-text': 'rgba(255, 255, 255, 0.7)',
'--color-record-active': '#fc3a4b',
'--color-record-hover': '#a2e9fc',
'--color-record-inactive': '#61dafb',
'--color-resize-bar': '#282c34',
'--color-resize-bar-active': '#31363f',
'--color-resize-bar-border': '#3d424a',
'--color-resize-bar-dot': '#cfd1d5',
'--color-timeline-internal-module': '#303542',
'--color-timeline-internal-module-hover': '#363b4a',
'--color-timeline-internal-module-text': '#7f8899',
'--color-timeline-native-event': '#b2b2b2',
'--color-timeline-native-event-hover': '#949494',
'--color-timeline-network-primary': '#fcf3dc',
'--color-timeline-network-primary-hover': '#e3dbc5',
'--color-timeline-network-secondary': '#efc457',
'--color-timeline-network-secondary-hover': '#d6af4d',
'--color-timeline-priority-background': '#1d2129',
'--color-timeline-priority-border': '#282c34',
'--color-timeline-user-timing': '#c9cacd',
'--color-timeline-user-timing-hover': '#93959a',
'--color-timeline-react-idle': '#3d485b',
'--color-timeline-react-idle-hover': '#465269',
'--color-timeline-react-render': '#2683E2',
'--color-timeline-react-render-hover': '#1a76d4',
'--color-timeline-react-render-text': '#11365e',
'--color-timeline-react-commit': '#731fad',
'--color-timeline-react-commit-hover': '#611b94',
'--color-timeline-react-commit-text': '#e5c1ff',
'--color-timeline-react-layout-effects': '#611b94',
'--color-timeline-react-layout-effects-hover': '#51167a',
'--color-timeline-react-layout-effects-text': '#e5c1ff',
'--color-timeline-react-passive-effects': '#611b94',
'--color-timeline-react-passive-effects-hover': '#51167a',
'--color-timeline-react-passive-effects-text': '#e5c1ff',
'--color-timeline-react-schedule': '#2683E2',
'--color-timeline-react-schedule-hover': '#1a76d4',
'--color-timeline-react-suspense-rejected': '#f1cc14',
'--color-timeline-react-suspense-rejected-hover': '#e4c00f',
'--color-timeline-react-suspense-resolved': '#a6e59f',
'--color-timeline-react-suspense-resolved-hover': '#89d281',
'--color-timeline-react-suspense-unresolved': '#c9cacd',
'--color-timeline-react-suspense-unresolved-hover': '#93959a',
'--color-timeline-thrown-error': '#fb3655',
'--color-timeline-thrown-error-hover': '#f82042',
'--color-timeline-text-color': '#282c34',
'--color-timeline-text-dim-color': '#555b66',
'--color-timeline-react-work-border': '#3d424a',
'--color-search-match': 'yellow',
'--color-search-match-current': '#f7923b',
'--color-selected-tree-highlight-active': 'rgba(23, 143, 185, 0.15)',
'--color-selected-tree-highlight-inactive': 'rgba(255, 255, 255, 0.05)',
'--color-scroll-caret': '#4f5766',
'--color-shadow': 'rgba(0, 0, 0, 0.5)',
'--color-tab-selected-border': '#178fb9',
'--color-text': '#ffffff',
'--color-text-invalid': '#ff8080',
'--color-text-selected': '#ffffff',
'--color-toggle-background-invalid': '#fc3a4b',
'--color-toggle-background-on': '#178fb9',
'--color-toggle-background-off': '#777d88',
'--color-toggle-text': '#ffffff',
'--color-warning-background': '#ee1638',
'--color-warning-background-hover': '#da1030',
'--color-warning-text-color': '#ffffff',
'--color-warning-text-color-inverted': '#ee1638',
// The styles below should be kept in sync with 'root.css'
// They are repeated there because they're used by e.g. tooltips or context menus
// which get rendered outside of the DOM subtree (where normal theme/styles are written).
'--color-scroll-thumb': '#afb3b9',
'--color-scroll-track': '#313640',
'--color-tooltip-background': 'rgba(255, 255, 255, 0.95)',
'--color-tooltip-text': '#000000',
},
compact: {
'--font-size-monospace-small': '9px',
'--font-size-monospace-normal': '11px',
'--font-size-monospace-large': '15px',
'--font-size-sans-small': '10px',
'--font-size-sans-normal': '12px',
'--font-size-sans-large': '14px',
'--line-height-data': '18px',
},
comfortable: {
'--font-size-monospace-small': '10px',
'--font-size-monospace-normal': '13px',
'--font-size-monospace-large': '17px',
'--font-size-sans-small': '12px',
'--font-size-sans-normal': '14px',
'--font-size-sans-large': '16px',
'--line-height-data': '22px',
},
};
// HACK
//
// Sometimes the inline target is rendered before root styles are applied,
// which would result in e.g. NaN itemSize being passed to react-window list.
const COMFORTABLE_LINE_HEIGHT: number = parseInt(
THEME_STYLES.comfortable['--line-height-data'],
10,
);
const COMPACT_LINE_HEIGHT: number = parseInt(
THEME_STYLES.compact['--line-height-data'],
10,
);
export {COMFORTABLE_LINE_HEIGHT, COMPACT_LINE_HEIGHT};
Reference in New Issue Copy Permalink