Browse Source

feat: add material-colors-sass

main
Inhji Y. 8 months ago
parent
commit
77da6723f0
  1. 21
      assets/css/_colors.scss
  2. 46
      assets/css/app.scss
  3. 13
      assets/package-lock.json
  4. 1
      assets/package.json

21
assets/css/_colors.scss

@ -1,26 +1,5 @@
// @include https://github.com/hadalin/dark-mode-sass
$colors: (
light: (
background: #eee,
background-content: #fff,
primary-400: #acacac,
primary-500: #505050,
primary-600: #3c3c3c,
accent-500: #007bff,
accent-600: #0056b3,
),
dark: (
background: #222,
background-content: #111,
primary-400: #757575,
primary-500: #ccc,
primary-600: #e6e6e6,
accent-500: #1e8ad6,
accent-600: #3ba0e6,
)
);
$color-placeholder: 'here';

46
assets/css/app.scss

@ -1,21 +1,45 @@
/* This file is for your main application css. */
/* === External Dependencies === */
@import "~minireset.css/minireset.css";
@import "~sass-material-colors/sass/sass-material-colors";
/* === Color Definitions === */
$colors: (
light: (
background: material-color('grey', '100'),
background-content: material-color('grey', '200'),
primary-400: #acacac,
primary-500: #505050,
primary-600: #3c3c3c,
accent-500: material-color('teal', '700'),
accent-600: #0056b3,
),
dark: (
background: material-color('blue-grey', '900'),
background-content: material-color('blue-grey', '800'),
primary-400: #757575,
primary-500: #ccc,
primary-600: #e6e6e6,
accent-500: material-color('teal', '700'),
accent-600: #3ba0e6,
)
);
@import "./colors";
/* === Variables === */
$rainbow: linear-gradient(90deg,
rgba(131,58,180,1) 0%,
rgba(253,29,65,1) 50%,
rgba(252,176,69,1) 100%);
material-color('pink', '500') 0%,
material-color('light-blue', '500') 50%,
material-color('purple', '500') 100%);
$font-content: 'Open Sans', Helvetica, sans-serif;
$font-heading: $font-content;
$bg-base: #111;
$bg-content: #282c34;
$bg-info: #31708f;
$color-info: #d9edf7;
$bg-info: material-color('indigo', '500');
$color-info: material-color('indigo', '100');
$bg-warning: #8a6d3b;
$color-warning: #fcf8e3;
$bg-danger: #a94442;
@ -120,9 +144,9 @@ button[type=submit], a.button {
&:hover {
@include color-assign(color, primary-500);
background: $rainbow;
border: 1px solid white;
@include color-assign(border-color, primary-400);
border: 1px solid white;
background: $rainbow;
}
}

13
assets/package-lock.json

@ -27,6 +27,7 @@
"mini-css-extract-plugin": "^1.3.6",
"sass": "^1.32.7",
"sass-loader": "^11.0.1",
"sass-material-colors": "^0.0.5",
"webpack": "^5.21.2",
"webpack-cli": "^4.x"
}
@ -6740,6 +6741,12 @@
}
}
},
"node_modules/sass-material-colors": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/sass-material-colors/-/sass-material-colors-0.0.5.tgz",
"integrity": "sha1-uURTkjbJTi1OzjXS7j+iLxCy7UM=",
"dev": true
},
"node_modules/sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@ -12822,6 +12829,12 @@
"neo-async": "^2.6.2"
}
},
"sass-material-colors": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/sass-material-colors/-/sass-material-colors-0.0.5.tgz",
"integrity": "sha1-uURTkjbJTi1OzjXS7j+iLxCy7UM=",
"dev": true
},
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",

1
assets/package.json

@ -27,6 +27,7 @@
"mini-css-extract-plugin": "^1.3.6",
"sass": "^1.32.7",
"sass-loader": "^11.0.1",
"sass-material-colors": "^0.0.5",
"webpack": "^5.21.2",
"webpack-cli": "^4.x"
}

Loading…
Cancel
Save