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;
|
||||
$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-100: hsl(220, 14.3%, 95.9%);
|
||||
--grey-200: hsl(220, 13%, 91%);
|
||||
|
@ -47,18 +47,21 @@
|
|||
--warning-l: 55.3%;
|
||||
--warning-a: 1;
|
||||
--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-h: 146.3deg;
|
||||
--success-s: 100%;
|
||||
--success-l: 42.9%;
|
||||
--success-a: 1;
|
||||
--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-h: 3.3deg;
|
||||
--danger-s: 100%;
|
||||
--danger-l: 60.6%;
|
||||
--danger-a: 1;
|
||||
--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%)
|
||||
--primary-h: 216.5deg;
|
||||
--primary-s: 100%;
|
||||
|
@ -72,7 +75,7 @@
|
|||
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
|
||||
|
||||
@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-800: hsl(220, 14.3%, 95.9%);
|
||||
--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/';
|
||||
|
||||
/* quicksand-regular - latin */
|
||||
// quicksand-regular - latin
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
font-style: normal;
|
||||
|
@ -10,7 +10,7 @@ $font-files-path: '/fonts/';
|
|||
|
||||
}
|
||||
|
||||
/* quicksand-500 - latin */
|
||||
// quicksand-500 - latin
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
font-style: normal;
|
||||
|
@ -19,7 +19,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'quicksand-v7-latin-500.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* quicksand-700 - latin */
|
||||
// quicksand-700 - latin
|
||||
@font-face {
|
||||
font-family: 'Quicksand';
|
||||
font-style: normal;
|
||||
|
@ -28,7 +28,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'quicksand-v7-latin-700.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* open-sans-regular - latin */
|
||||
// open-sans-regular - latin
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
|
@ -37,7 +37,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'open-sans-v15-latin-regular.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* open-sans-italic - latin */
|
||||
// open-sans-italic - latin
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
|
@ -46,7 +46,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'open-sans-v15-latin-italic.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* open-sans-700 - latin */
|
||||
// open-sans-700 - latin
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
|
@ -55,7 +55,7 @@ $font-files-path: '/fonts/';
|
|||
src: url($font-files-path + 'open-sans-v15-latin-700.woff2') format('woff2');
|
||||
}
|
||||
|
||||
/* open-sans-700italic - latin */
|
||||
// open-sans-700italic - latin
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
@import "bulma-css-variables/sass/helpers/_all";
|
||||
@import "bulma-css-variables/sass/layout/_all";
|
||||
|
||||
@import "variables/colors";
|
||||
|
||||
@import "theme";
|
||||
@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')
|
||||
|
||||
// the @use rules have to be the first in the compiled stylesheets
|
||||
const SCSS_IMPORT_PREFIX = `@use "sass:math";
|
||||
@import "${pathSrc}/styles/variables";`
|
||||
const PREFIXED_SCSS_STYLES = `@use "sass:math";
|
||||
@import "${pathSrc}/styles/common-imports";`
|
||||
|
||||
const isModernBuild = Boolean(process.env.BUILD_MODERN_ONLY)
|
||||
const legacy = isModernBuild
|
||||
|
@ -28,7 +28,7 @@ if (isModernBuild) {
|
|||
export default defineConfig({
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: { additionalData: SCSS_IMPORT_PREFIX },
|
||||
scss: { additionalData: PREFIXED_SCSS_STYLES },
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
|
|
Reference in New Issue
Block a user