How to use the panel.border function in panel

To help you get started, we’ve selected a few panel examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Tyriar / vscode-theme-generator / src / vscodeThemeGenerator.ts View on Github external
theme.colors['peekViewResult.background'] = background3;
    // peekViewResult.fileForeground: Foreground color for file nodes in the peek view result list.
    // peekViewResult.lineForeground: Foreground color for line nodes in the peek view result list.
    // peekViewResult.matchHighlightBackground: Match highlight color in the peek view result list.
    // peekViewResult.selectionBackground: Background color of the selected entry in the peek view result list.
    // peekViewResult.selectionForeground: Foreground color of the selected entry in the peek view result list.
    // peekViewTitle.background: Background color of the peek view title area.
    theme.colors['peekViewTitle.background'] = background2;
    // peekViewTitleDescription.foreground: Color of the peek view title info.
    // peekViewTitleLabel.foreground: Color of the peek view title.

    // Panel Colors
    // panel.background: Panel background color. Panels are shown below the editor area and contain views like output and integrated terminal.
    theme.colors['panel.background'] = background3;
    // panel.border: Panel border color on the top separating to the editor. Panels are shown below the editor area and contain views like output and integrated terminal.
    theme.colors['panel.border'] = addAlpha('#FFFFFF', 0.1);
    // panelTitle.activeBorder: Border color for the active panel title. Panels are shown below the editor area and contain views like output and integrated terminal.
    theme.colors['panelTitle.activeBorder'] = addAlpha(colorSet.base.foreground, 0.5);
    // panelTitle.activeForeground: Title color for the active panel. Panels are shown below the editor area and contain views like output and integrated terminal.
    // panelTitle.inactiveForeground: Title color for the inactive panel. Panels are shown below the editor area and contain views like output and integrated terminal.
    theme.colors['panelTitle.inactiveForeground'] = addAlpha(colorSet.base.foreground, 0.5);

    // Status Bar Colors
    // statusBar.background: Standard status bar background color. The status bar is shown in the bottom of the window.
    theme.colors['statusBar.background'] = background1;
    // statusBar.debuggingBackground: Status bar background color when a program is being debugged. The status bar is shown in the bottom of the window
    theme.colors['statusBar.debuggingBackground'] = colorSet.base.color1;
    theme.colors['statusBar.debuggingForeground'] = contrast(theme.colors['statusBar.debuggingBackground']);
    // statusBar.foreground: Status bar foreground color. The status bar is shown in the bottom of the window.
    // statusBar.noFolderBackground: Status bar background color when no folder is opened. The status bar is shown in the bottom of the window.
    theme.colors['statusBar.noFolderBackground'] = background1; // Don't make distinction between folder/no folder
    // statusBarItem.activeBackground: Status bar item background color when clicking. The status bar is shown in the bottom of the window.
github codesandbox / codesandbox-client / packages / app / src / app / components / Preview / DevTools / Console / elements.ts View on Github external
export const inspectorTheme = theme => ({
  PADDING: '0.4rem 1.5rem 0.4rem 0px',

  LOG_ICON: '',
  LOG_BORDER: theme['panel.border'] || '#191C1D',
  LOG_ICON_HEIGHT: '26px',
  LOG_ICON_WIDTH: '1em',

  LOG_COMMAND_ICON: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.8)' viewBox='0 0 40 40'%3e%3cpath d='M16.6 10l10 10-10 10-2.3-2.3L22 20l-7.7-7.7z'/%3e%3c/svg%3e")`,
  LOG_RESULT_ICON: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='rgba(255, 255, 255, 0.8)' preserveAspectRatio='xMidYMid meet' viewBox='0 0 40 40'%3e%3cg%3e%3cpath d='m22 30.7q0 0.3-0.2 0.5l-1.1 1.1q-0.3 0.3-0.6 0.3t-0.5-0.3l-10.4-10.4q-0.2-0.2-0.2-0.5t0.2-0.5l10.4-10.4q0.3-0.2 0.5-0.2t0.6 0.2l1.1 1.1q0.2 0.3 0.2 0.5t-0.2 0.6l-8.8 8.7 8.8 8.8q0.2 0.2 0.2 0.5z m8.6 0q0 0.3-0.3 0.5l-1.1 1.1q-0.2 0.3-0.5 0.3t-0.5-0.3l-10.4-10.4q-0.2-0.2-0.2-0.5t0.2-0.5l10.4-10.4q0.2-0.2 0.5-0.2t0.5 0.2l1.1 1.1q0.3 0.3 0.3 0.5t-0.3 0.6l-8.7 8.7 8.7 8.8q0.3 0.2 0.3 0.5z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e")`,

  LOG_WARN_COLOR: 'rgb(245, 211, 150)',
  LOG_WARN_BACKGROUND: '#332A00',
  LOG_WARN_BORDER: '#665500',
  LOG_WARN_ICON: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23F5D396' viewBox='0 0 40 40'%3e%3cpath d='M21.6 23.4v-6.8h-3.2v6.8h3.2zm0 6.6v-3.4h-3.2V30h3.2zm-20 5L20 3.4 38.4 35H1.6z'/%3e%3c/svg%3e")`,

  LOG_ERROR_COLOR: 'rgb(254, 127, 127)',
  LOG_ERROR_BACKGROUND: '#280000',
  LOG_ERROR_BORDER: '#5B0000',
  LOG_ERROR_ICON: `url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FE7F7F' viewBox='0 0 40 40'%3e%3cpath d='M21.6 21.6v-10h-3.2v10h3.2zm0 6.8V25h-3.2v3.4h3.2zM20 3.4a16.6 16.6 0 1 1 0 33.2 16.6 16.6 0 1 1 0-33.2z'/%3e%3c/svg%3e")`,
github codesandbox / codesandbox-client / packages / app / src / app / components / Preview / DevTools / elements.ts View on Github external
${props =>
    !props.primary &&
    css`
      border-top: 1px solid
        ${props.theme['panel.border'] || props.theme.background2};
    `};
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);