phonograph/sass/_globals.scss

@use 'sass:color';

$button-primary-background: #fc0;
$button-primary-color: #000;
$button-shadow: 0 0.15rem 0.15rem #3331;
$default-border-color: #ccc;
$default-border: solid 1px $default-border-color;
$font-family-default: 'Funnel Sans', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
$font-family-data: Menlo, 'Courier New', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
$font-family-mono: Menlo, 'Courier New', Courier, mono;
$popover-border: $default-border;
$popover-shadow: 0 0.5rem 0.5rem #3333;
$border-radius-rounded-sm: 0.25rem;
$border-radius-rounded: 0.5rem;
$link-color: #069;
$notice-color-info: #39d;
$hover-lightness-scale-factor: -5%;

@mixin reset-button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  box-sizing: border-box;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

@mixin button-base {
  @include reset-button;
  @include rounded;

  box-shadow: $button-shadow;
  font-family: $font-family-mono;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: background 0.2s ease;
}

@mixin button-primary {
  @include button-base;

  background: $button-primary-background;
  border: solid 1px color.scale(
    $button-primary-background,
    $lightness: -5%,
    $space: oklch
  );
  color: $button-primary-color;

  &:hover {
    background: color.scale(
      $button-primary-background,
      $lightness: $hover-lightness-scale-factor,
      $space: oklch
    );
    border-color: color.scale(
      $button-primary-background,
      $lightness: -10%,
      $space: oklch
    );
  }
}

@mixin button-outline {
  @include button-base;

  background: $button-primary-color;
  border: solid 1px color.scale(
    $button-primary-background,
    $lightness: -5%,
    $space: oklch
  );
  color: $button-primary-background;

  &:hover {
    border-color: color.scale(
      $button-primary-background,
      $lightness: -10%,
      $space: oklch
    );
  }
}

@mixin button-secondary {
  @include button-base;

  background: #fff;
  color: #000;
  border: $default-border;

  &:hover {
    border-color: color.scale(
      $default-border-color,
      $lightness: $hover-lightness-scale-factor,
      $space: oklch
    );
  }
}

@mixin button-clear {
  @include button-base;

  box-shadow: none;

  &:hover {
    background: #0000001f;
  }
}

@mixin button-small {
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
}

@mixin reset-input {
  appearance: none;
  background: none;
  border: none;
  box-sizing: border-box;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  outline: none;
}

@mixin rounded-sm {
  border-radius: $border-radius-rounded-sm;
}

@mixin rounded {
  border-radius: $border-radius-rounded;
}

@mixin popover {
  @include rounded;
  inset: unset;
  border: $popover-border;
  margin: 0;
  margin-top: 0.25rem;
  position: relative;
  display: block;
  background: #fff;
  box-shadow: $popover-shadow;
}