ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set colours directly as css vars.

Browse source
This commit is contained in:
Fredrik Jonsson 2025-03-24 19:42:01 +01:00
commit 99abd54150
8 changed files with 111 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.stylelintrc.yaml
View file

@ -1,9 +1,11 @@
extends:
- stylelint-config-standard-scss
rules:
alpha-value-notation: number
block-no-empty: null
declaration-block-no-redundant-longhand-properties: null
declaration-empty-line-before: null
hue-degree-notation: number
no-descending-specificity: null
selector-class-pattern:
- "^[a-z0-9\\-]+$"

163
assets/sass/_colors.scss
View file

@ -1,93 +1,96 @@
// stylelint-disable scss/dollar-variable-colon-space-after, scss/dollar-variable-empty-line-before
// Theme colours.
// Base colors.
$black: #000;
$nearblack: lighten($black, 20%); // #333
$grey-dark: lighten($black, 40%); // #666
$grey: lighten($black, 60%); // #999
$grey-light: lighten($black, 80%); // #ccc
$grey-extra-light: lighten($black, 93.33%); // #eee
$nearwhite: lighten($black, 97%); // #f7f7f7
$white: #fff;
:root {
// Base colours.
--color-black: oklch(1% 0.01 0);
--color-nearblack: oklch(25% 0.01 0);
--color-grey-700: oklch(38% 0 0);
--color-grey-600: oklch(49% 0 0);
--color-grey-500: oklch(60% 0 0);
--color-grey-400: oklch(71% 0 0);
--color-grey-300: oklch(80% 0 0);
--color-grey-200: oklch(89% 0 0);
--color-nearwhite: oklch(98% 0 0);
--color-white: oklch(100% 0 0);
--color-red: oklch(65% 0.2 24);
--color-yellow: oklch(65% 0.12 80);
--color-green: oklch(65% 0.19 138);
--color-blue: oklch(65% 0.16 247);
$blue: #0072b9;
$red: #c00;
$green: #43a808;
$yellow: #fd0;
// Transparent colours.
--color-black-60: oklch(0% 0 0 / 0.6);
--color-black-40: oklch(0% 0 0 / 0.4);
--color-black-20: oklch(0% 0 0 / 0.2);
--color-black-10: oklch(0% 0 0 / 0.1);
--color-white-20: oklch(100% 0 0 / 0.2);
--color-white-10: oklch(100% 0 0 / 0.1);
$brand: $grey-dark;
$brand-alt: $grey;
$brand-light: $grey-light;
$brand-dark: $nearblack;
// Brand colours.
--color-brand: var(--color-nearblack);
--color-brand-alt: var(--color-grey-500);
--color-brand-light: var(--color-grey-300);
--color-brand-dark: var(--color-grey-700);
// Colour map.
$colors: (
brand: $brand,
brand-alt: $brand-alt,
brand-light: $brand-light,
brand-dark: $brand-dark,
// Text colours.
--color-text: var(--color-black);
--color-text-bg: var(--color-white);
--color-text-meta: var(--color-grey-dark);
--color-headings: var(--color-nearblack);
--color-code: var(--color-nearblack);
text: $black,
text-bg: $white,
text-meta: $grey-dark,
// Link colours.
--color-link: var(--color-brand);
--color-link-visited: var(--color-brand);
--color-link-hover: var(--color-brand-alt);
--color-link-active: var(--color-red);
--color-link-inverted: var(--color-white);
--color-link-visited-inverted: var(--color-white);
--color-link-hover-inverted: var(--color-white);
--color-link-active-inverted: var(--color-red);
link: $brand-dark,
link-visited: $brand-dark,
link-hover: $brand,
link-active: $red,
// Border colours.
--color-border: var(--color-brand);
--color-border-light: var(--color-brand-light);
--color-border-dark: var(--color-brand-dark);
link-inverted: $white,
link-visited-inverted: $white,
link-hover-inverted: $white,
link-active-inverted: $red,
// Background colours.
--color-header-bg: var(--color-white);
--color-body-bg: var(--color-white);
--color-footer-bg: var(--color-white);
--color-backdrop: var(--color-grey-extra-light);
border: $brand,
border-light: $brand-light,
border-dark: $brand-dark,
// Mobil menu colours.
--color-mobile-menu: var(--color-brand);
--color-mobile-menu-cover: var(--color-black-20);
autocomplete: $black,
autocomplete-bg: $white,
autocomplete-select: $white,
autocomplete-select-bg: $blue,
// Button colours.
--color-button: var(--color-brand);
--color-button-hover: var(--color-brand-dark);
--color-button-text: var(--color-white);
--color-button-text-hover: var(--color-white);
--color-button-disabled: var(--color-grey);
body-bg: $white,
header-bg: $white,
footer-bg: $white,
backdrop: $grey-extra-light,
// Row (e.g. in table) colours.
--color-row-header: transparent;
--color-row-odd: var(--color-nearwhite);
--color-row-even: transparent;
mobile-menu: $brand,
mobile-menu-cover: rgba($black, .2),
// Status colours.
--color-info: var(--color-blue);
--color-info-bg: oklch(from var(--color-blue) 100% 0.03 h);
--color-status: var(--color-green);
--color-status-bg: oklch(from var(--color-green) 100% 0.03 h);
--color-warning: var(--color-yellow);
--color-warning-bg: oklch(from var(--color-yellow) 100% 0.03 h);
--color-error: var(--color-red);
--color-error-bg: oklch(from var(--color-red) 100% 0.03 h);
button: $brand,
button-hover: $brand-dark,
button-text: $white,
button-text-hover: $white,
button-disabled: $grey,
// Highlight colours.
--color-highlight: var(--color-brand-alt);
--color-mark-highlight: var(--color-red);
--color-mark-bg: var(--color-yellow);
mark-highlight: $red,
mark-bg: $yellow,
menu-active: $black,
preview-bg: lighten($yellow, 43%),
row-header: transparent,
row-odd: $nearwhite,
row-even: transparent,
status: $green,
status-bg: lighten($green, 62%),
warning: $black,
warning-bg: lighten($yellow, 45%),
warning-border: $yellow,
error: $red,
error-bg: lighten($red, 57%),
watermark: $grey-extra-light,
headings: $nearblack,
code: $nearblack,
highlight: $brand-alt,
);
// Misc colours.
--color-watermark: var(--color-grey-extra-light);
--color-debug-color: var(--color-grey-extra-light);
}

2
assets/sass/_custom.scss
View file

@ -1 +1 @@
// Site custom styles. This file loads last.
// Site custom styles and colours. This file loads last.

6
assets/sass/_root.scss
View file

@ -3,11 +3,7 @@ $max-page-width: $max-content-width !default;
:root {
// Convert sass variables to css4 variables.
// Use like this: var(--color-brand).
@each $name, $color in $colors {
--color-#{$name}: #{$color};
}
// Use like this: var(--color-gutters).
@each $name, $size in $font-size {
--fs-#{$name}: #{$size};
}

1
assets/sass/_variables.scss
View file

@ -174,4 +174,3 @@ $include-rtl: false;
// Show horizontal grid to help with debugging typography.
$debug: false;
$debug-color: $grey-extra-light;

10
assets/sass/components/messages/_messages.scss
View file

@ -13,10 +13,16 @@
outline-color: var(--color-status);
}
&.info {
background-color: var(--color-info-bg);
color: var(--color-info);
outline-color: var(--color-info);
}
&.warning {
background-color: var(--color-warning-bg);
color: var(--color-warning);
outline-color: var(--color-warning-border);
outline-color: var(--color-warning);
}
&.error {
@ -26,7 +32,7 @@
}
&--highlight {
animation: 2s linear infinite outline-highlight;
animation: 2s ease-in-out infinite outline-highlight;
}
@keyframes outline-highlight {

4
assets/sass/mixins/debug/_debug.scss
View file

@ -5,7 +5,7 @@
position: relative;
// stylelint-disable-next-line max-line-length
background-image: repeating-linear-gradient(180deg, $debug-color, $debug-color 1px, transparent 1px, transparent $grid-height);
background-image: repeating-linear-gradient(180deg, var(--color-debug-color), var(--color-debug-color) 1px, transparent 1px, transparent $grid-height);
&::after {
content: '';
@ -14,7 +14,7 @@
left: 0;
height: 1px;
width: 100%;
background-color: $debug-color;
background-color: var(--color-debug-color);
}
}
}

3
scripts/set_up_new_site.sh
View file

@ -16,8 +16,7 @@ fi
mkdir -p "assets/sass"
mkdir -p "layouts"
copy_files=("themes/zen/assets/sass/_colors.scss:assets/sass/_colors.scss"
"themes/zen/assets/sass/_extra.scss:assets/sass/_extra.scss"
copy_files=("themes/zen/assets/sass/_extra.scss:assets/sass/_extra.scss"
"themes/zen/assets/sass/_fonts.scss:assets/sass/_fonts.scss"
"themes/zen/assets/sass/_custom.scss:assets/sass/_custom.scss"
"themes/zen/assets/sass/_zen.scss:assets/sass/_zen.scss"