ui/src/assets/theme.scss

// Copyright (C) 2023 The Android Open Source Project
//
// 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.

$border-radius: 2px;
$border-radius-medium: 3px;
$border-radius-large: 4px;
$anim-timing: 150ms cubic-bezier(0.4, 0, 0.2, 1);

$box-shadow-1: 0px 2px 4px var(--pf-color-box-shadow);
$box-shadow-2: 0px 4px 12px var(--pf-color-box-shadow);
$box-shadow-3: 0px 8px 16px var(--pf-color-box-shadow);

// This function is used to compute the hove color for interactive surfaces such
// as buttons or or menu items. The idea is you give it the surface color and
// the 'on surface' color (i.e. the text/icon color that goes on top of the
// surface) and it will return a color that is a mix of mostly the surface color
// with a hint of the on-surface color.
//
// @param surface: The surface (aka background) color of the element we want to
// apply the color to. Defaults to 'transparent' which will work with most unset
// surfaces.
//
// @param on-surface: The color of the on-surface color i.e. the contrast color.
// Usually the color of the text. Defaults to 'currentColor', which is a CSS
// alias for the current 'color' value whether it be inherited or explicitly
// set.
@function color-hover-surface(
  $surface: transparent,
  $on-surface: currentColor
) {
  @return color-mix(in srgb, $surface, $on-surface 8%);
}

// This function is used to compute the active color for interactive surfaces
// such as buttons or menu items. The idea is you give it the surface color and
// the 'on surface' color (i.e. the text/icon color that goes on top of the
// surface) and it will return a color that is a mix of mostly the surface color
// with a hint of the on-surface color.
//
// @param surface: The surface (aka background) color of the element we want to
// apply the color to. Defaults to 'transparent' which will work with most unset
// surfaces.
//
// @param on-surface: The color of the on-surface color i.e. the contrast color.
// Usually the color of the text. Defaults to 'currentColor', which is a CSS
// alias for the current 'color' value whether it be inherited or explicitly
// set.
@function color-active-surface(
  $surface: transparent,
  $on-surface: currentColor
) {
  @return color-mix(in srgb, $surface, $on-surface 16%);
}

// This function is deprecated and should not be used in new code.
@function color_hover($base) {
  @return color-hover-surface($base, var(--pf-color-interactive-base));
}

// This function is deprecated and should not be used in new code.
@function color_active($base) {
  @return color-active-surface($base, var(--pf-color-interactive-base));
}

@mixin focus {
  outline: 2px solid var(--pf-color-accent);
}

@mixin transition($time: 0.1s) {
  transition:
    opacity $time ease,
    color $time ease,
    background-color $time ease,
    border-color $time ease,
    width $time ease,
    height $time ease,
    max-width $time ease,
    max-height $time ease,
    margin $time ease,
    transform $time ease,
    box-shadow $time ease,
    border-radius $time ease;
}

// Mixin for using material icons inside a pseudo-element.
@mixin material-icon($content) {
  @include icon;
  @include hidden-while-fonts-loading;
  content: $content;
}

@mixin icon {
  font-family: "Material Symbols Sharp";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings:
    "FILL" 0,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

@mixin icon-filled {
  font-variation-settings:
    "FILL" 1,
    "wght" 400,
    "GRAD" 0,
    "opsz" 24;
}

@mixin hidden-while-fonts-loading {
  @at-root body.pf-fonts-loading & {
    visibility: hidden;
    max-width: 1em;
  }
}