Search code examples
csssassangular-materialangular13

SassError: Hue "100" does not exist in palette. Available hues are: primary, accent, contrast

I am updating from Angular 12 to 13.

Seeing this error, haven't found any solution to it yet. Can someone point me in the right direction?

My package.json

{
  "name": "test-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "testci": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",
    "testci2": "node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng test --karma-config src/karma-ci.conf.js --code-coverage",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@amcharts/amcharts4": "^4.3.13",
    "@angular/animations": "^12.2.17",
    "@angular/cdk": "^12.2.13",
    "@angular/common": "^12.2.17",
    "@angular/compiler": "^12.2.17",
    "@angular/core": "^12.2.17",
    "@angular/forms": "^12.2.17",
    "@angular/material": "^12.2.13",
    "@angular/material-moment-adapter": "^12.2.13",
    "@angular/platform-browser": "^12.2.17",
    "@angular/platform-browser-dynamic": "^12.2.17",
    "@angular/router": "^12.2.17",
    "@mat-datetimepicker/core": "5.1.0",
    "@mat-datetimepicker/moment": "5.1.0",
    "bootstrap": "^4.3.1",
    "bufferutil": "^4.0.7",
    "core-js": "^2.6.2",
    "d3": "^5.9.2",
    "file-saver": "2.0.0",
    "jquery": "^3.4.1",
    "karma-tfs-reporter": "^1.0.2",
    "lodash-es": "^4.17.15",
    "moment": "^2.29.4",
    "ngx-bootstrap": "4.3.0",
    "ngx-loading": "^8.0.0",
    "ngx-mat-select-search": "^3.1.1",
    "popper.js": "1.14.6",
    "rxjs": "^6.6.3",
    "sass": "^1.56.1",
    "simplebar": "^3.1.3",
    "timelines-chart": "^2.8.1",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.18",
    "@angular/cli": "~12.2.18",
    "@angular/compiler-cli": "^12.2.17",
    "@angular/language-service": "^12.2.17",
    "@types/d3": "^5.7.2",
    "@types/jasmine": "~3.3.6",
    "@types/jasminewd2": "~2.0.6",
    "@types/node": "^12.11.1",
    "angular2-template-loader": "^0.6.2",
    "codelyzer": "^5.1.2",
    "electron": "^4.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-junit-reporter": "^1.2.0",
    "karma-sonarqube-unit-reporter": "0.0.23",
    "protractor": "~7.0.0",
    "puppeteer": "^1.20.0",
    "ts-node": "~7.0.1",
    "tslint": "~6.1.0",
    "typescript": "4.3.5",
    "typescript-tslint-plugin": "^0.5.5",
    "wallaby-webpack": "^3.9.13"
  }
}

SassError: 'Hue "100" does not exist in palette. Available hues are: primary, accent, contrast' ╷ 55 │ lighter: _get-color-from-palette($base-palette, $lighter), │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵
node_modules@angular\material\core\theming_theming.scss 55:14
define-palette()
node_modules@angular\material\core\theming_theming-deprecated.scss 16:11 palette() src\app\search.component.scss 64:11
@import src\app\results.component.scss 5:9 root stylesheet

enter image description here

styles we added in component scss

$mat-buttons: (

  primary: #00f,

  accent: $btn-secondary-bg,

  contrast: (

    primary: #0f0,

    accent: $btn-secondary-color

  )

);



$primary: mat-palette($mat-buttons, primary);

$accent: mat-palette($mat-buttons, accent);
Solution

  • Define at least three hue for each color: 100, 500 and 700. See docs.

    $indigo-palette: (
 50: #e8eaf6,
 100: #c5cae9,
 200: #9fa8da,
 300: #7986cb,
 // ... continues to 900
 contrast: (
   50: rgba(black, 0.87),
   100: rgba(black, 0.87),
   200: rgba(black, 0.87),
   300: white,
   // ... continues to 900
 )
);

    EDIT

    Change this...

    $mat-buttons: (
  primary: #00f,
  accent: $btn-secondary-bg,
  contrast: (
    primary: #0f0,
    accent: $btn-secondary-color
  )
);

$primary: mat-palette($mat-buttons, primary);
$accent: mat-palette($mat-buttons, accent);

    ...to this. Change hex color values (i.e., #F5F5F5, #808080 and #202020).

    $mat-buttons: (
  100: #F5F5F5,
  500: #808080,
  700: #202020,
  contrast: (
    100: rgba(black, 0.87),
    500: rgba(black, 0.87),
    700: rgba(black, 0.87)
  )
);

$primary: mat-palette($mat-buttons, 500);
$accent: mat-palette($mat-buttons, 700);