ag-grid/src/styles/ag-theme-material.scss

@import "./ag-theme-common";
@import "./material-legacy-var-names";

// Taken from the palette of angular material: https://github.com/angular/material2/blob/master/src/lib/core/theming/_palette.scss
$mat-grey-0: #fff;
$mat-grey-50: #fafafa;
$mat-grey-100: #f5f5f5;
$mat-grey-200: #eee;
$mat-grey-300: #e0e0e0;

// Taking primary and accent from the indigo / pink theme: https://github.com/angular/material2/blob/master/src/lib/core/theming/prebuilt/indigo-pink.scss
$mat-indigo-500: #3f51b5;
$mat-pink-A200: #ff4081;
$mat-pink-50: #fce4ec;
$mat-indigo-50: #e8eaf6;

// opacity values used for black values, taken from material spec
$foreground-opacity: 0.87 !default;
$secondary-foreground-color-opacity: 0.54 !default;
$disabled-foreground-color-opacity: 0.38 !default;

/////////////////////////////////////////////////////////////////////////////////////////////////////
// The variables below can be overriden to adjust the look up to the app color scheme
/////////////////////////////////////////////////////////////////////////////////////////////////////

// Sizing
$grid-size: 8px !default;
$icon-size: 18px !default;
$header-height: $grid-size * 7 !default;
$row-height: $grid-size * 6 !default;
$toolpanel-indent-size: $grid-size + $icon-size !default;
$row-group-indent-size: $grid-size * 3 + $icon-size !default;
$cell-horizontal-padding: $grid-size * 3 !default;
$virtual-item-height: $grid-size * 5;
$header-icon-size: 14px !default;

// Icons
$icons-path: "./material-icons/" !default;

// Fonts
$font-family: "Roboto", sans-serif !default; // legacy: font
$font-size: 13px !default;
$font-weight: 400 !default;

$secondary-font-family: "Roboto", sans-serif !default; //font-secondary
$secondary-font-size: 12px !default; // font-secondary-size
$secondary-font-weight: 700 !default; // font-secondary-weight

// Colors
$foreground-color: rgba(#000, $foreground-opacity) !default; // foreground
$secondary-foreground-color: rgba(#000, $secondary-foreground-color-opacity) !default; // foreground-secondary
$disabled-foreground-color: rgba(#000, $disabled-foreground-color-opacity) !default; // foreground-disabled

$border-color: $mat-grey-300 !default;

$primary-color: $mat-indigo-500 !default;

$accent-color: $mat-pink-A200 !default;
$icon-color: #333 !default;

$background-color: $mat-grey-0 !default;

$editor-background-color: $mat-grey-100 !default;

$panel-background-color: $mat-grey-200 !default;

$tool-panel-background-color: $mat-grey-50 !default;

$chip-background-color: $mat-grey-300 !default;

$range-selection-background-color: $mat-indigo-50 !default;
$range-selection-highlight-color: $mat-pink-50 !default;

$hover-color: $mat-grey-200 !default;

$selected-color: $mat-grey-100 !default;

$cell-data-changed-color: $mat-pink-50 !default;

// Misc
$transition-speed: 120ms !default;
$card-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
$card-radius: 2px;

// delta changes
$value-change-delta-up-color: #43a047 !default;
$value-change-delta-down-color: #e53935 !default;
$value-change-value-highlight-background-color: #00acc1 !default;

$params: (
    grid-size: $grid-size,
    icon-size: $icon-size,
    header-icon-size: $header-icon-size,
    row-height: $row-height,
    header-height: $header-height,
    virtual-item-height: $virtual-item-height,
    rich-select-item-height: $row-height,
    cell-horizontal-padding: $cell-horizontal-padding,
    toolpanel-indent-size: $toolpanel-indent-size,
    row-group-indent-size: $row-group-indent-size,
    icons-path: $icons-path,
    font-family: $font-family,
    font-size: $font-size,
    font-weight: $font-weight,
    secondary-font-family: $secondary-font-family,
    secondary-font-size: $secondary-font-size,
    secondary-font-weight: $secondary-font-weight,
    foreground-color: $foreground-color,
    foreground-opacity: $foreground-opacity,
    secondary-foreground-color-opacity: $secondary-foreground-color-opacity,
    secondary-foreground-color: $secondary-foreground-color,
    disabled-foreground-color-opacity: $disabled-foreground-color-opacity,
    disabled-foreground-color: $disabled-foreground-color,
    background-color: $background-color,
    border-color: $border-color,
    button-background-color: transparent,
    icon-color: $icon-color,
    cell-data-changed-color: $cell-data-changed-color,
    chip-background-color: $chip-background-color,
    card-background-color: $background-color,
    editor-background-color-color: $editor-background-color,
    range-selection-background-color: $range-selection-background-color,
    range-selection-highlight-color: $range-selection-highlight-color,
    panel-background-color: $panel-background-color,
    tool-panel-background-color: $tool-panel-background-color,
    accent-color: $accent-color,
    primary-color: $primary-color,
    hover-color: $hover-color,
    selected-color: $selected-color,
    icon-opacity: $foreground-opacity,
    button-text-transform: uppercase,
    card-radius: $card-radius,
    card-shadow: $card-shadow,
    focused-textbox-border: 2px solid $primary-color,
    input-border-width: 0,
    input-bottom-border: 1px solid $border-color,
    input-height: $grid-size * 3,
    use-icons-for-pager-buttons: true,
    customize-inputs: true,
    customize-buttons: true,
    full-width-tabs: true,
    value-change-delta-up-color: $value-change-delta-up-color,
    value-change-delta-down-color: $value-change-delta-down-color,
    value-change-value-highlight-background-color: $value-change-value-highlight-background-color
);

.ag-theme-material {
    %selected-tab {
        border-bottom: 2px solid $primary-color;
    }

    @include ag-grid-theme($params);

    .ag-cell-highlight {
        background-color: $range-selection-highlight-color !important;
    }

    .ag-cell-highlight-animation {
        transition: background-color 1s;
    }

    .ag-row-drag {
        background-position-y: center;
    }

    .ag-column-drag {
        background-position-y: center;
    }

    .ag-header-cell-resize {
        right: -($grid-size) + 1px;
    }

    // we do not want to color the range color when the cell is also focused
    .ag-cell-range-selected-1:not(.ag-cell-focus) {
        background-color: $range-selection-background-color;
    }

    .ag-cell-range-selected-2:not(.ag-cell-focus) {
        background-color: darken($range-selection-background-color, 4);
    }

    .ag-cell-range-selected-3:not(.ag-cell-focus) {
        background-color: darken($range-selection-background-color, 8);
    }

    .ag-cell-range-selected-4:not(.ag-cell-focus) {
        background-color: darken($range-selection-background-color, 12);
    }

    .ag-tool-panel {
        border-bottom: 0;
        border-right: 0;
        border-top: 0;

        .ag-side-buttons button {
            border: 0;
            color: $secondary-foreground-color;
            font-family: $secondary-font-family;
            font-size: $secondary-font-size;
            font-weight: $secondary-font-weight;
        }
    }
}