<commit_before>/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import { createGlobalStyle, ThemeContext } from 'styled-components';
import { useContext } from 'react';

/**
 * Internal dependencies
 */
import { DROPDOWN_TYPES } from './constants';

export const GlobalStyle = createGlobalStyle`
	*,
	*::after,
	*::before {
		box-sizing: border-box;
    }
`;

export function useTheme() {
  return useContext(ThemeContext);
}

const themeFonts = {
  primary: "'Google Sans', sans-serif",
  secondary: 'Roboto',
};

const colors = {
  gray900: '#1A1D1F',
  gray800: '#2C3033',
  gray700: '#3F454A',
  gray600: '#4F575F',
  gray500: '#606B74',
  gray400: '#6D7A85',
  gray300: '#848D96',
  gray200: '#9AA1A9',
  gray100: '#B8BCBF',
  gray75: '#D9DBDD',
  gray50: '#EEEEEE',
  // gray25: '#F7F7F7', gray25 is duplicated, it looks like F6F6 wins out in the docs, keeping this here for now for reference.
  gray25: '#F6F6F6',
  white: '#fff',
  bluePrimary: '#2979FF',
  bluePrimary600: '#1A73E8',
  blueLight: '#EAF2FF',
  // taken from edit-stories
  action: '#47A0F4',
  danger: '#FF0000',
  selection: '#44aaff',
  // todo
  placeholder: '#d9dbdd',
};

const borders = {
  gray50: `1px solid ${colors.gray50}`,
  gray100: `1px solid ${colors.gray100}`,
  transparent: '1px solid none',
  bluePrimary: `1px solid ${colors.bluePrimary}`,
};

const theme = {
  colors,
  borders,
  button: {
    borderRadius: 100,
  },
  dropdown: {
    [DROPDOWN_TYPES.PANEL]: {
      background: 'transparent',
      activeBackground: colors.gray25,
      borderRadius: 40,
      border: borders.gray50,
      arrowColor: colors.bluePrimary,
      height: 48,
    },
    [DROPDOWN_TYPES.MENU]: {
      background: colors.gray25,
      activeBackground: colors.gray25,
      borderRadius: 4,
      border: 'none',
      arrowColor: colors.gray300,
      height: 48,
    },
    [DROPDOWN_TYPES.TRANSPARENT_MENU]: {
      background: 'transparent',
      activeBackground: 'transparent',
      borderRadius: 0,
      border: 'none',
      arrowColor: colors.gray300,
      height: 40,
    },
  },
  leftRail: {
    border: borders.gray50,
    contentPadding: 20,
    inset: 8,
    logoMargin: '75px auto 20px',
  },
  text: {
    shadow: '0px 1px 1px rgba(0, 0, 0, 1)',
  },
  chip: {
    shadow: '0px 1px 3px rgba(0, 0, 0, 0.2)',
  },
  typeahead: {
    borderRadius: 100,
  },
  expandedTypeahead: {
    borderRadius: 8,
    boxShadow:
      '0px 0.181152px 2.29372px rgba(0, 0, 0, 0.031357), 0px 0.500862px 5.15978px rgba(0, 0, 0, 0.045),0px 1.20588px 8.99337px rgba(0, 0, 0, 0.058643), 0px 4px 17px rgba(0, 0, 0, 0.09)',
  },
  floatingTab: {
    shadow: '0px 2px 8px rgba(0, 0, 0, 0.17)',
  },
  navBar: {
    height: 64,
  },
  subNavigationBar: {
    border: borders.gray50,
  },
  table: {
    headerCellPadding: 15,
    cellPadding: 15,
    headerContentSize: 16,
    border: borders.gray50,
  },
  cardItem: {
    previewOverlay:
      'linear-gradient(360deg, rgba(26, 29, 31, 0.8) 11.58%, rgba(26, 29, 31, 0) 124.43%)',
  },
  fonts: {
    heading1: {
      family: themeFonts.primary,<commit_msg>Added popover panel theme sizes<commit_after>/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import { createGlobalStyle, ThemeContext } from 'styled-components';
import { useContext } from 'react';

/**
 * Internal dependencies
 */
import { DROPDOWN_TYPES } from './constants';

export const GlobalStyle = createGlobalStyle`
	*,
	*::after,
	*::before {
		box-sizing: border-box;
    }
`;

export function useTheme() {
  return useContext(ThemeContext);
}

const themeFonts = {
  primary: "'Google Sans', sans-serif",
  secondary: 'Roboto',
};

const colors = {
  gray900: '#1A1D1F',
  gray800: '#2C3033',
  gray700: '#3F454A',
  gray600: '#4F575F',
  gray500: '#606B74',
  gray400: '#6D7A85',
  gray300: '#848D96',
  gray200: '#9AA1A9',
  gray100: '#B8BCBF',
  gray75: '#D9DBDD',
  gray50: '#EEEEEE',
  // gray25: '#F7F7F7', gray25 is duplicated, it looks like F6F6 wins out in the docs, keeping this here for now for reference.
  gray25: '#F6F6F6',
  white: '#fff',
  bluePrimary: '#2979FF',
  bluePrimary600: '#1A73E8',
  blueLight: '#EAF2FF',
  // taken from edit-stories
  action: '#47A0F4',
  danger: '#FF0000',
  selection: '#44aaff',
  // todo
  placeholder: '#d9dbdd',
};

const borders = {
  gray50: `1px solid ${colors.gray50}`,
  gray100: `1px solid ${colors.gray100}`,
  transparent: '1px solid none',
  bluePrimary: `1px solid ${colors.bluePrimary}`,
};

const theme = {
  colors,
  borders,
  button: {
    borderRadius: 100,
  },
  dropdown: {
    [DROPDOWN_TYPES.PANEL]: {
      background: 'transparent',
      activeBackground: colors.gray25,
      borderRadius: 40,
      border: borders.gray50,
      arrowColor: colors.bluePrimary,
      height: 48,
    },
    [DROPDOWN_TYPES.MENU]: {
      background: colors.gray25,
      activeBackground: colors.gray25,
      borderRadius: 4,
      border: 'none',
      arrowColor: colors.gray300,
      height: 48,
    },
    [DROPDOWN_TYPES.TRANSPARENT_MENU]: {
      background: 'transparent',
      activeBackground: 'transparent',
      borderRadius: 0,
      border: 'none',
      arrowColor: colors.gray300,
      height: 40,
    },
  },
  leftRail: {
    border: borders.gray50,
    contentPadding: 20,
    inset: 8,
    logoMargin: '75px auto 20px',
  },
  text: {
    shadow: '0px 1px 1px rgba(0, 0, 0, 1)',
  },
  chip: {
    shadow: '0px 1px 3px rgba(0, 0, 0, 0.2)',
  },
  typeahead: {
    borderRadius: 100,
  },
  expandedTypeahead: {
    borderRadius: 8,
    boxShadow:
      '0px 0.181152px 2.29372px rgba(0, 0, 0, 0.031357), 0px 0.500862px 5.15978px rgba(0, 0, 0, 0.045),0px 1.20588px 8.99337px rgba(0, 0, 0, 0.058643), 0px 4px 17px rgba(0, 0, 0, 0.09)',
  },
  floatingTab: {
    shadow: '0px 2px 8px rgba(0, 0, 0, 0.17)',
  },
  navBar: {
    height: 64,
  },
  subNavigationBar: {
    border: borders.gray50,
  },
  table: {
    headerCellPadding: 15,
    cellPadding: 15,
    headerContentSize: 16,
    border: borders.gray50,
  },
  cardItem: {
    previewOverlay:
      'linear-gradient(360deg, rgba(26, 29, 31, 0.8) 11.58%, rgba(26, 29, 31, 0) 124.43%)',
  },
  popoverPanel: {
    desktopWidth: 595,
    tabletWidth: 395,
  },
  fonts: {
    heading1: {
      family: themeFonts.primary,
{'fraction_non_alphanumeric': 0.14174077068175694, 'fraction_numerical': 0.08353543519267044, 'mean_word_length': 3.165544332210999, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '334772', 'n_tokens_mistral': 3078, 'n_tokens_neox': 2654, 'n_words': 722}