_theme.scss

@import './variables';

/*
 * NAMESPACE
 * if updated process.env.BLUEPRINT_NAMESPACE needs to be updated as well
 * https://blueprintjs.com/docs/#core/classes.namespacing
 */
$ns: map-deep-get($sl-variables, namespace) !default;

/*
 * THEME
 * accessible to all component scss through importing ./utils then using get-theme(colors, lighten, 1) or other helpers
 * any value we want overwritable by the consumer needs to be an external variable defined in ./_variables $sl-defaults then referenced here
 * this file should never be imported directly outside of ./utils
 */

$sl-theme: (
  namespace: map-deep-get($sl-variables, namespace),
  colors: map-deep-get($sl-variables, colors),
  fontSize: (
    xs: 9px,
    sm: 11px,
    base: 13px,
    lg: 15px,
    xl: 18px,
    2xl: 22px,
    3xl: 26px,
    4xl: 32px,
    5xl: 40px,
    6xl: 50px,
  ),
  borderRadius: (
    none: 0,
    sm: 1px,
    default: 3px,
    lg: 5px,
    full: 9999px,
  ),
  boxShadow: (
    default: 0px 1px 2px rgba(0, 0, 0, 0.3),
    md: 0px 4px 4px rgba(0, 0, 0, 0.5),
    lg: 0px 5px 5px rgba(0, 0, 0, 0.6),
    inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06),
    outline: 0 0 0 3px rgba(66, 153, 225, 0.5),
    none: none,
  ),
  fontFamily: (
    sans: (
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      'Helvetica Neue',
      Arial,
      'Noto Sans',
      sans-serif,
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      'Noto Color Emoji',
    ),
    serif: (
      Georgia,
      Cambria,
      'Times New Roman',
      Times,
      serif,
    ),
    mono: (
      Menlo,
      Monaco,
      Consolas,
      'Liberation Mono',
      'Courier New',
      monospace,
    ),
  ),
  fontWeight: (
    hairline: 100,
    thin: 200,
    light: 300,
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700,
    extrabold: 800,
    black: 900,
  ),
);

// extend theme with extraneous things passed into $sl-variables
// examples include new variables defined by the consumer
@each $key, $value in $sl-variables {
  @if not map-has-key($sl-theme, $key) {
    $sl-theme: map-extend(
      $sl-theme,
      (
        $key: $value,
      )
    );
  }
}

/*
 * UTILITIES
 * some helpful functions to access the theme
 */

// returns the value at this theme path
@function get-theme($keys...) {
  @return map-deep-get($sl-theme, $keys...);
}

// returns color at this path from theme
@function get-color($keys...) {
  @return map-deep-get($sl-theme, colors, $keys...);
}

// returns fontSize at this path from theme
@function get-font-size($keys...) {
  @return map-deep-get($sl-theme, fontSize, $keys...);
}

// returns borderRadius at this path from theme
@function get-border-radius($keys...) {
  @return map-deep-get($sl-theme, borderRadius, $keys...);
}

// returns boxShadow at this path from theme
@function get-box-shadow($keys...) {
  @return map-deep-get($sl-theme, boxShadow, $keys...);
}

// returns fontFamily at this path from theme
@function get-font-family($keys...) {
  @return map-deep-get($sl-theme, fontFamily, $keys...);
}

// returns fontWeight at this path from theme
@function get-font-weight($keys...) {
  @return map-deep-get($sl-theme, fontWeight, $keys...);
}