webapp/theming/fds-demo.scss

/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You 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.
 */

// Include the base variables, style rules, and mixins for NiFi FDS core
@import 'platform/core/common/styles/flow-design-system';
@import 'structureElements';

// Change these
$primary-color: $rose1;
$primary-color-hover: $rose2;
$accent-color: $blue-grey1;
$accent-color-hover: $blue4;

// Include the base styles for Angular Material core. We include this here so that you only
// have to load a single css file for Angular Material in your app.
@include mat-core;

// Define the palettes
$fds-base-palette: (
    50: #89df79, 100:
    $primary-color-hover,
    200: #65d550,
    300: #53d03b,
    400: #46c32f,
    500: $primary-color,
    600: $primary-color,
    700: #89df79,
    800: #29701b,
    900: #215c16,
    A100: #9be48d,
    A200: #ade9a2,
    A400: #bfedb6,
    A700: #1a4711,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: white,
        400: white,
        500: $white-87-opacity,
        600: $white-87-opacity,
        700: $white-87-opacity,
        800: $white-87-opacity,
        900: $white-87-opacity,
        A100: $black-87-opacity,
        A200: white,
        A400: white,
        A700: $white-87-opacity
    )
);
$fds-accent-palette: (
    50: #89df79,
    100: $accent-color-hover,
    200: #65d550,
    300: #53d03b,
    400: #46c32f,
    500: $accent-color,
    600: $accent-color,
    700: #89df79,
    800: #29701b,
    900: #215c16,
    A100: #9be48d,
    A200: #ade9a2,
    A400: #bfedb6,
    A700: #1a4711,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: white,
        400: white,
        500: $white-87-opacity,
        600: $white-87-opacity,
        700: $white-87-opacity,
        800: $white-87-opacity,
        900: $white-87-opacity,
        A100: $black-87-opacity,
        A200: white,
        A400: white,
        A700: $white-87-opacity
    )
);
$fds-warn-palette: (
    50: #81410f,
    100: #d14a50,
    200: #af5814,
    300: #c66317,
    400: #dd6f19,
    500: $warn-color,
    600: $warn-color,
    700: #eea66e,
    800: #f1b485,
    900: #f4c29b,
    A100: #ec9857,
    A200: #89df79,
    A400: #89df79,
    A700: #f6d0b2,
    contrast: (
        50: $black-87-opacity,
        100: $black-87-opacity,
        200: $black-87-opacity,
        300: white,
        400: white,
        500: $white-87-opacity,
        600: $white-87-opacity,
        700: $white-87-opacity,
        800: $white-87-opacity,
        900: $white-87-opacity,
        A100: $black-87-opacity,
        A200: white,
        A400: white,
        A700: $white-87-opacity
    )
);
$fds-primary: mat-palette($fds-base-palette, 500, 100, 500);
$fds-accent: mat-palette($fds-accent-palette, 500, 100, 500);
$fds-warn: mat-palette($fds-warn-palette, 500, 100, 500);

// Define the theme (Optionally specify a default, lighter, and darker hue.)
$fds-theme: mat-light-theme($fds-primary, $fds-accent, $fds-warn);

// FDS theme mixin
@include fds-theme($fds-theme);

.link-to-component {
    cursor: pointer;
    font-size: 16px;
}