Merge pull request 'feat: reorder scss imports' (#4) from dpschen/frontend:feature/reorder-scss-imports into bulma-css-variables
All checks were successful
continuous-integration/drone/pr Build is passing
All checks were successful
continuous-integration/drone/pr Build is passing
Reviewed-on: adrinux/frontend#4
This commit is contained in:
commit
5e63085bed
|
@ -1,3 +1,23 @@
|
||||||
|
//
|
||||||
|
// IMPORTANT NOTE:
|
||||||
|
//
|
||||||
|
// The styles in this file and all imported styles should not
|
||||||
|
// create CSS output when compiled!
|
||||||
|
// Instead they should only define SCSS that gets compiled to nothing.
|
||||||
|
//
|
||||||
|
// The reason is that this file is prefixed in _every_ component style so that
|
||||||
|
// the component has access to the variables, mixins, etc. that
|
||||||
|
// are defined here.
|
||||||
|
//
|
||||||
|
|
||||||
|
// the default values get overwritten by the definitions above
|
||||||
|
@import "bulma-css-variables/sass/utilities/_all";
|
||||||
|
|
||||||
|
// this is needed so that the shared form variables are globally defined aswell
|
||||||
|
@import "bulma-css-variables/sass/form/shared";
|
||||||
|
|
||||||
|
// since $tablet is defined by bulma we can just define it after importing the utilities
|
||||||
|
$mobile: math.div($tablet, 2);
|
||||||
|
|
||||||
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
|
$family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
|
||||||
$vikunja-font: 'Quicksand', sans-serif;
|
$vikunja-font: 'Quicksand', sans-serif;
|
2
src/styles/custom-properties/_index.scss
Normal file
2
src/styles/custom-properties/_index.scss
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
@import "colors";
|
||||||
|
@import "shadows";
|
|
@ -1,6 +1,6 @@
|
||||||
:root {
|
// Vikunja colors as CSS custom properties
|
||||||
|
|
||||||
/* Vikunja colors as CSS custom properties */
|
:root {
|
||||||
--grey-50: hsl(210, 20%, 98%);
|
--grey-50: hsl(210, 20%, 98%);
|
||||||
--grey-100: hsl(220, 14.3%, 95.9%);
|
--grey-100: hsl(220, 14.3%, 95.9%);
|
||||||
--grey-200: hsl(220, 13%, 91%);
|
--grey-200: hsl(220, 13%, 91%);
|
||||||
|
@ -25,8 +25,8 @@
|
||||||
--grey-light: var(--grey-300);
|
--grey-light: var(--grey-300);
|
||||||
--grey-lighter: var(--grey-200);
|
--grey-lighter: var(--grey-200);
|
||||||
--grey-lightest: var(--grey-100);
|
--grey-lightest: var(--grey-100);
|
||||||
//--white-ter: whitesmoke;
|
// --white-ter: whitesmoke;
|
||||||
//--white-bis: #fafafa;
|
// --white-bis: #fafafa;
|
||||||
|
|
||||||
--white-h: 0deg;
|
--white-h: 0deg;
|
||||||
--white-s: 0%;
|
--white-s: 0%;
|
||||||
|
@ -41,25 +41,28 @@
|
||||||
--black-a: 1;
|
--black-a: 1;
|
||||||
--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
|
--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
|
||||||
|
|
||||||
//$warning/$orange: #ff851b or hsl(27.9, 100%, 55.3%)
|
// $warning / $orange: #ff851b or hsl(27.9, 100%, 55.3%)
|
||||||
--warning-h: 27.9deg;
|
--warning-h: 27.9deg;
|
||||||
--warning-s: 100%;
|
--warning-s: 100%;
|
||||||
--warning-l: 55.3%;
|
--warning-l: 55.3%;
|
||||||
--warning-a: 1;
|
--warning-a: 1;
|
||||||
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
|
||||||
//$success/$green is #00db60 or hsl(146.3, 100%, 42.9%)
|
|
||||||
|
// $success / $green is #00db60 or hsl(146.3, 100%, 42.9%)
|
||||||
--success-h: 146.3deg;
|
--success-h: 146.3deg;
|
||||||
--success-s: 100%;
|
--success-s: 100%;
|
||||||
--success-l: 42.9%;
|
--success-l: 42.9%;
|
||||||
--success-a: 1;
|
--success-a: 1;
|
||||||
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
|
||||||
//$danger/$red is #ff4136 or hsl(3.3, 100%, 60.6%)
|
|
||||||
|
// $danger / $red is #ff4136 or hsl(3.3, 100%, 60.6%)
|
||||||
--danger-h: 3.3deg;
|
--danger-h: 3.3deg;
|
||||||
--danger-s: 100%;
|
--danger-s: 100%;
|
||||||
--danger-l: 60.6%;
|
--danger-l: 60.6%;
|
||||||
--danger-a: 1;
|
--danger-a: 1;
|
||||||
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
|
||||||
//var(--primary)/$blue is #1973ff or hsl(216.5, 100%, 54.9%)
|
|
||||||
|
// var(--primary) / $blue is #1973ff or hsl(216.5, 100%, 54.9%)
|
||||||
--primary-h: 216.5deg;
|
--primary-h: 216.5deg;
|
||||||
--primary-s: 100%;
|
--primary-s: 100%;
|
||||||
--primary-l: 54.9%;
|
--primary-l: 54.9%;
|
||||||
|
@ -72,7 +75,7 @@
|
||||||
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
|
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
/* Light mode colours reversed for dark mode */
|
// Light mode colours reversed for dark mode
|
||||||
--grey-900: hsl(210, 20%, 98%);
|
--grey-900: hsl(210, 20%, 98%);
|
||||||
--grey-800: hsl(220, 14.3%, 95.9%);
|
--grey-800: hsl(220, 14.3%, 95.9%);
|
||||||
--grey-700: hsl(220, 13%, 91%);
|
--grey-700: hsl(220, 13%, 91%);
|
22
src/styles/custom-properties/shadows.scss
Normal file
22
src/styles/custom-properties/shadows.scss
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
:root {
|
||||||
|
--shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
|
||||||
|
0 1px 2px hsla(var(--grey-500-hsl), .24);
|
||||||
|
--shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
|
||||||
|
0 2px 4px hsla(var(--grey-500-hsl), .10);
|
||||||
|
--shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
|
||||||
|
0 3px 6px hsla(var(--grey-500-hsl), .08);
|
||||||
|
--shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
|
||||||
|
0 5px 10px hsla(var(--grey-500-hsl), .05);
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
// Even darker shadows for dark mode
|
||||||
|
--shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12),
|
||||||
|
0 1px 2px hsla(var(--grey-100-hsl), .24);
|
||||||
|
--shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12),
|
||||||
|
0 2px 4px hsla(var(--grey-100-hsl), .10);
|
||||||
|
--shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12),
|
||||||
|
0 3px 6px hsla(var(--grey-100-hsl), .08);
|
||||||
|
--shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12),
|
||||||
|
0 5px 10px hsla(var(--grey-100-hsl), .05);
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,6 +1,6 @@
|
||||||
$font-files-path: '/fonts/';
|
$font-files-path: '/fonts/';
|
||||||
|
|
||||||
/* quicksand-regular - latin */
|
// quicksand-regular - latin
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Quicksand';
|
font-family: 'Quicksand';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
@ -10,7 +10,7 @@ $font-files-path: '/fonts/';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* quicksand-500 - latin */
|
// quicksand-500 - latin
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Quicksand';
|
font-family: 'Quicksand';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
@ -19,7 +19,7 @@ $font-files-path: '/fonts/';
|
||||||
src: url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2');
|
src: url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* quicksand-700 - latin */
|
// quicksand-700 - latin
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Quicksand';
|
font-family: 'Quicksand';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
@ -28,7 +28,7 @@ $font-files-path: '/fonts/';
|
||||||
src: url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2');
|
src: url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* open-sans-regular - latin */
|
// open-sans-regular - latin
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
@ -37,7 +37,7 @@ $font-files-path: '/fonts/';
|
||||||
src: url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2');
|
src: url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* open-sans-italic - latin */
|
// open-sans-italic - latin
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
@ -46,7 +46,7 @@ $font-files-path: '/fonts/';
|
||||||
src: url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2');
|
src: url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* open-sans-700 - latin */
|
// open-sans-700 - latin
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
|
@ -55,7 +55,7 @@ $font-files-path: '/fonts/';
|
||||||
src: url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2');
|
src: url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2');
|
||||||
}
|
}
|
||||||
|
|
||||||
/* open-sans-700italic - latin */
|
// open-sans-700italic - latin
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Open Sans';
|
font-family: 'Open Sans';
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
@import "bulma-css-variables/sass/helpers/_all";
|
@import "bulma-css-variables/sass/helpers/_all";
|
||||||
@import "bulma-css-variables/sass/layout/_all";
|
@import "bulma-css-variables/sass/layout/_all";
|
||||||
|
|
||||||
@import "variables/colors";
|
|
||||||
|
|
||||||
@import "theme";
|
@import "theme";
|
||||||
@import "components";
|
@import "components";
|
||||||
|
|
||||||
|
@import "custom-properties";
|
|
@ -1,11 +0,0 @@
|
||||||
@import "shadows";
|
|
||||||
@import "variables";
|
|
||||||
|
|
||||||
// the default values get overwritten by the definitions above
|
|
||||||
@import "bulma-css-variables/sass/utilities/_all";
|
|
||||||
|
|
||||||
// this is needed so that the shared form variables are globally defined aswell
|
|
||||||
@import "bulma-css-variables/sass/form/shared";
|
|
||||||
|
|
||||||
// since $tablet is defined by bulma we can just define it after importing the utilities
|
|
||||||
$mobile: math.div($tablet, 2);
|
|
|
@ -1,22 +0,0 @@
|
||||||
:root {
|
|
||||||
--shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
|
|
||||||
0 1px 2px hsla(var(--grey-500-hsl), .24);
|
|
||||||
--shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
|
|
||||||
0 2px 4px hsla(var(--grey-500-hsl), .10);
|
|
||||||
--shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
|
|
||||||
0 3px 6px hsla(var(--grey-500-hsl), .08);
|
|
||||||
--shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
|
|
||||||
0 5px 10px hsla(var(--grey-500-hsl), .05);
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
/* Even darker shadows for dark mode */
|
|
||||||
--shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12),
|
|
||||||
0 1px 2px hsla(var(--grey-100-hsl), .24);
|
|
||||||
--shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12),
|
|
||||||
0 2px 4px hsla(var(--grey-100-hsl), .10);
|
|
||||||
--shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12),
|
|
||||||
0 3px 6px hsla(var(--grey-100-hsl), .08);
|
|
||||||
--shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12),
|
|
||||||
0 5px 10px hsla(var(--grey-100-hsl), .05);
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -8,8 +8,8 @@ const {visualizer} = require('rollup-plugin-visualizer')
|
||||||
const pathSrc = path.resolve(__dirname, './src')
|
const pathSrc = path.resolve(__dirname, './src')
|
||||||
|
|
||||||
// the @use rules have to be the first in the compiled stylesheets
|
// the @use rules have to be the first in the compiled stylesheets
|
||||||
const SCSS_IMPORT_PREFIX = `@use "sass:math";
|
const PREFIXED_SCSS_STYLES = `@use "sass:math";
|
||||||
@import "${pathSrc}/styles/variables";`
|
@import "${pathSrc}/styles/common-imports";`
|
||||||
|
|
||||||
const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
|
const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
|
||||||
const legacy = isModernBuild
|
const legacy = isModernBuild
|
||||||
|
@ -28,7 +28,7 @@ if (isModernBuild) {
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
css: {
|
css: {
|
||||||
preprocessorOptions: {
|
preprocessorOptions: {
|
||||||
scss: { additionalData: SCSS_IMPORT_PREFIX },
|
scss: { additionalData: PREFIXED_SCSS_STYLES },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
|
|
Reference in New Issue
Block a user