calcite-react/CalciteThemeProvider/CalciteTheme.js

Calcite components for React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _calciteColors = require("@esri/calcite-colors");

// Copyright 2019 Esri
// 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
// http://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.​
var lightThemeVariables = _calciteColors.themes[0].variables;
var CalciteTheme = {
  palette: {
    // ┌───────────┐
    // │ Grayscale │
    // └───────────┘
    white: _calciteColors.colors['blk-000'],
    offWhite: _calciteColors.colors['blk-005'],
    lightestGray: _calciteColors.colors['blk-020'],
    lighterGray: _calciteColors.colors['blk-050'],
    lightGray: _calciteColors.colors['blk-080'],
    gray: _calciteColors.colors['blk-100'],
    darkGray: _calciteColors.colors['blk-120'],
    darkerGray: _calciteColors.colors['blk-140'],
    darkestGray: _calciteColors.colors['blk-160'],
    offBlack: _calciteColors.colors['blk-180'],
    black: _calciteColors.colors['blk-200'],
    transparentWhite: 'rgba(255, 255, 255, 0.7)',
    opaqueWhite: 'rgba(255, 255, 255, 0.8)',
    transparentOffWhite: 'rgba(0, 0, 0, 0.1)',
    transparentDarkerGray: 'rgba(0, 0, 0, 0.3)',
    transparentOffBlack: 'rgba(0, 0, 0, 0.45)',
    transparentBlack: 'rgba(0, 0, 0, 0.75)',
    opaqueBlack: 'rgba(0, 0, 0, 0.85)',
    // ┌─────────────────────┐
    // │ Brand Blue (legacy) │
    // └─────────────────────┘
    Brand_Blue_100: _calciteColors.colors['h-bb-020'],
    //  previously blue 14
    Brand_Blue_120: _calciteColors.colors['v-bb-120'],
    Brand_Blue_140: _calciteColors.colors['v-bb-140'],
    Brand_Blue_150: _calciteColors.colors['h-bb-040'],
    // previously blue 13
    Brand_Blue_160: _calciteColors.colors['v-bb-160'],
    Brand_Blue_200: _calciteColors.colors['h-bb-060'],
    // "Esri Blue", previously blue 12
    Brand_Blue_250: _calciteColors.colors['h-bb-080'],
    // previously blue 11
    // ┌───────┐
    // │ Brand │
    // └───────┘
    brand: lightThemeVariables['brand'],
    brandHover: lightThemeVariables['brand-hover'],
    brandPress: lightThemeVariables['brand-press'],
    // ┌───────────────────────┐
    // │ Background/Foreground │
    // └───────────────────────┘
    background: lightThemeVariables['background'],
    foreground1: lightThemeVariables['foreground-1'],
    foreground2: lightThemeVariables['foreground-2'],
    foreground3: lightThemeVariables['foreground-3'],
    // ┌───────────┐
    // │ UI Colors │
    // └───────────┘
    lightestBlue: _calciteColors.colors['h-bb-010'],
    lighterBlue: _calciteColors.colors['h-bb-030'],
    lightBlue: _calciteColors.colors['h-bb-050'],
    blue: _calciteColors.colors['h-bb-060'],
    darkBlue: _calciteColors.colors['h-bb-080'],
    darkerBlue: _calciteColors.colors['h-bb-100'],
    lightestGreen: _calciteColors.colors['h-gg-010'],
    lighterGreen: _calciteColors.colors['h-gg-020'],
    lightGreen: _calciteColors.colors['h-gg-040'],
    green: _calciteColors.colors['h-gg-060'],
    darkGreen: _calciteColors.colors['h-gg-080'],
    darkerGreen: _calciteColors.colors['h-gg-100'],
    lightestRed: _calciteColors.colors['h-rr-010'],
    lighterRed: _calciteColors.colors['h-rr-020'],
    lightRed: _calciteColors.colors['h-rr-040'],
    red: _calciteColors.colors['h-rr-060'],
    darkRed: _calciteColors.colors['h-rr-080'],
    darkerRed: _calciteColors.colors['h-rr-100'],
    lightestOrange: _calciteColors.colors['h-oo-010'],
    lighterOrange: _calciteColors.colors['h-oo-020'],
    lightOrange: _calciteColors.colors['h-oo-040'],
    orange: _calciteColors.colors['h-oo-060'],
    darkOrange: _calciteColors.colors['h-oo-080'],
    darkerOrange: _calciteColors.colors['h-oo-100'],
    lightestYellow: _calciteColors.colors['h-yy-010'],
    lighterYellow: _calciteColors.colors['h-yy-020'],
    lightYellow: _calciteColors.colors['h-yy-040'],
    yellow: _calciteColors.colors['h-yy-060'],
    darkYellow: _calciteColors.colors['h-yy-080'],
    darkerYellow: _calciteColors.colors['h-yy-100'],
    lightestPurple: _calciteColors.colors['h-vv-010'],
    lighterPurple: _calciteColors.colors['h-vv-020'],
    lightPurple: _calciteColors.colors['h-vv-040'],
    purple: _calciteColors.colors['h-vv-060'],
    darkPurple: _calciteColors.colors['h-vv-080'],
    darkerPurple: _calciteColors.colors['h-vv-100'],
    lightestBrown: _calciteColors.colors['h-br-010'],
    lighterBrown: _calciteColors.colors['h-br-020'],
    lightBrown: _calciteColors.colors['h-br-040'],
    brown: _calciteColors.colors['h-br-060'],
    darkBrown: _calciteColors.colors['h-br-080'],
    darkerBrown: _calciteColors.colors['h-br-100']
  },
  type: {
    // Header Family
    avenirTracking: 0,
    avenirFamily: '"Avenir Next W01", "Avenir Next W00", "Avenir Next", "Avenir", "Helvetica Neue", sans-serif',
    // Code Family
    codeTracking: 0,
    codeFamily: '"Consolas", "Andale Mono", "Lucida Console", "Monaco", monospace',
    // Icon Family
    iconTracking: 0,
    iconFamily: "\n      font-family: 'calcite-ui';\n      speak: none;\n      font-style: normal;\n      font-weight: normal;\n      font-variant: normal;\n      text-transform: none;\n      display: inline-block;\n      text-decoration: none;\n    }",
    // Structural
    ratio: 1.414,
    mediumRatio: 1.33,
    smallRatio: 1.25,
    bodySize: '1rem',
    smallSize: '0.85rem',
    indent: '1em'
  },
  // ┌──────────────┐
  // │ UI Variables │
  // └──────────────┘
  transition: '150ms linear',
  transitionDuration: '150ms',
  easingFunc: 'linear',
  boxShadow: 'rgba(0, 0, 0, 0.15) 0px 0px 16px 0px',
  drawerWidth: '280px',
  borderRadius: 0,
  // ┌─────────────┐
  // │ Type Colors │
  // └─────────────┘
  typeColor: lightThemeVariables['text-1'],
  linkColor: lightThemeVariables['text-link'],
  linkHover: lightThemeVariables['brand-press'],
  // ┌─────────────┐
  // │ Breakpoints │
  // └─────────────┘
  small: '480px',
  medium: '860px',
  large: '1450px',
  // ┌──────────────────────┐
  // │ SCREEN CONTENT WIDTH │
  // └──────────────────────┘
  contentWidth: '1450px',
  contentMaxWidth: '96vw',
  // ┌────────────────────┐
  // │ Grid Configuration │
  // └────────────────────┘
  prefix: '',
  // ┌───────────────────┐
  // │ Tooltip Variables │
  // └───────────────────┘
  tooltipBackgroundColor: _calciteColors.colors['blk-200'],
  tooltipBorderRadius: 0,
  tooltipEnterDelay: 0,
  // ┌─────────┐
  // │ Toaster │
  // └─────────┘
  toasterWidth: '450px',
  vwRatio: '0.95',
  containerWidth: '1450px',
  maxWidth: '0.95 * 100vw',
  columnGutter: '1rem',
  // Grid Fallback Options
  ie8Support: false,
  columnGutterFallback: '20px',
  containerWidthFallback: '960px',
  // Large
  largeClass: 'large',
  largeColumnCount: '24',
  // Default
  defaultColumnCount: '24',
  // Medium
  mediumClass: 'tablet',
  mediumColumnCount: '12',
  // Small
  smallClass: 'phone',
  smallColumnCount: '6',
  // Rhythm
  horizontalRange: '4',
  verticalRange: '6',
  baseline: '1.55rem'
};
var _default = CalciteTheme;
exports.default = _default;