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: extends:
- stylelint-config-standard-scss - stylelint-config-standard-scss
rules: rules:
alpha-value-notation: number
block-no-empty: null block-no-empty: null
declaration-block-no-redundant-longhand-properties: null declaration-block-no-redundant-longhand-properties: null
declaration-empty-line-before: null declaration-empty-line-before: null
hue-degree-notation: number
no-descending-specificity: null no-descending-specificity: null
selector-class-pattern: selector-class-pattern:
- "^[a-z0-9\\-]+$" - "^[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. :root {
$black: #000; // Base colours.
$nearblack: lighten($black, 20%); // #333 --color-black: oklch(1% 0.01 0);
$grey-dark: lighten($black, 40%); // #666 --color-nearblack: oklch(25% 0.01 0);
$grey: lighten($black, 60%); // #999 --color-grey-700: oklch(38% 0 0);
$grey-light: lighten($black, 80%); // #ccc --color-grey-600: oklch(49% 0 0);
$grey-extra-light: lighten($black, 93.33%); // #eee --color-grey-500: oklch(60% 0 0);
$nearwhite: lighten($black, 97%); // #f7f7f7 --color-grey-400: oklch(71% 0 0);
$white: #fff; --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; // Transparent colours.
$red: #c00; --color-black-60: oklch(0% 0 0 / 0.6);
$green: #43a808; --color-black-40: oklch(0% 0 0 / 0.4);
$yellow: #fd0; --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 colours.
$brand-alt: $grey; --color-brand: var(--color-nearblack);
$brand-light: $grey-light; --color-brand-alt: var(--color-grey-500);
$brand-dark: $nearblack; --color-brand-light: var(--color-grey-300);
--color-brand-dark: var(--color-grey-700);
// Colour map. // Text colours.
$colors: ( --color-text: var(--color-black);
brand: $brand, --color-text-bg: var(--color-white);
brand-alt: $brand-alt, --color-text-meta: var(--color-grey-dark);
brand-light: $brand-light, --color-headings: var(--color-nearblack);
brand-dark: $brand-dark, --color-code: var(--color-nearblack);
text: $black, // Link colours.
text-bg: $white, --color-link: var(--color-brand);
text-meta: $grey-dark, --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, // Border colours.
link-visited: $brand-dark, --color-border: var(--color-brand);
link-hover: $brand, --color-border-light: var(--color-brand-light);
link-active: $red, --color-border-dark: var(--color-brand-dark);
link-inverted: $white, // Background colours.
link-visited-inverted: $white, --color-header-bg: var(--color-white);
link-hover-inverted: $white, --color-body-bg: var(--color-white);
link-active-inverted: $red, --color-footer-bg: var(--color-white);
--color-backdrop: var(--color-grey-extra-light);
border: $brand, // Mobil menu colours.
border-light: $brand-light, --color-mobile-menu: var(--color-brand);
border-dark: $brand-dark, --color-mobile-menu-cover: var(--color-black-20);
autocomplete: $black, // Button colours.
autocomplete-bg: $white, --color-button: var(--color-brand);
autocomplete-select: $white, --color-button-hover: var(--color-brand-dark);
autocomplete-select-bg: $blue, --color-button-text: var(--color-white);
--color-button-text-hover: var(--color-white);
--color-button-disabled: var(--color-grey);
body-bg: $white, // Row (e.g. in table) colours.
header-bg: $white, --color-row-header: transparent;
footer-bg: $white, --color-row-odd: var(--color-nearwhite);
backdrop: $grey-extra-light, --color-row-even: transparent;
mobile-menu: $brand, // Status colours.
mobile-menu-cover: rgba($black, .2), --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, // Highlight colours.
button-hover: $brand-dark, --color-highlight: var(--color-brand-alt);
button-text: $white, --color-mark-highlight: var(--color-red);
button-text-hover: $white, --color-mark-bg: var(--color-yellow);
button-disabled: $grey,
mark-highlight: $red, // Misc colours.
mark-bg: $yellow, --color-watermark: var(--color-grey-extra-light);
--color-debug-color: var(--color-grey-extra-light);
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,
);

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 { :root {
// Convert sass variables to css4 variables. // Convert sass variables to css4 variables.
// Use like this: var(--color-brand). // Use like this: var(--color-gutters).
@each $name, $color in $colors {
--color-#{$name}: #{$color};
}
@each $name, $size in $font-size { @each $name, $size in $font-size {
--fs-#{$name}: #{$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. // Show horizontal grid to help with debugging typography.
$debug: false; $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); outline-color: var(--color-status);
} }
&.info {
background-color: var(--color-info-bg);
color: var(--color-info);
outline-color: var(--color-info);
}
&.warning { &.warning {
background-color: var(--color-warning-bg); background-color: var(--color-warning-bg);
color: var(--color-warning); color: var(--color-warning);
outline-color: var(--color-warning-border); outline-color: var(--color-warning);
} }
&.error { &.error {
@ -26,7 +32,7 @@
} }
&--highlight { &--highlight {
animation: 2s linear infinite outline-highlight; animation: 2s ease-in-out infinite outline-highlight;
} }
@keyframes outline-highlight { @keyframes outline-highlight {

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

@ -5,7 +5,7 @@
position: relative; position: relative;
// stylelint-disable-next-line max-line-length // 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 { &::after {
content: ''; content: '';
@ -14,7 +14,7 @@
left: 0; left: 0;
height: 1px; height: 1px;
width: 100%; 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 "assets/sass"
mkdir -p "layouts" mkdir -p "layouts"
copy_files=("themes/zen/assets/sass/_colors.scss:assets/sass/_colors.scss" copy_files=("themes/zen/assets/sass/_extra.scss:assets/sass/_extra.scss"
"themes/zen/assets/sass/_extra.scss:assets/sass/_extra.scss"
"themes/zen/assets/sass/_fonts.scss:assets/sass/_fonts.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/_custom.scss:assets/sass/_custom.scss"
"themes/zen/assets/sass/_zen.scss:assets/sass/_zen.scss" "themes/zen/assets/sass/_zen.scss:assets/sass/_zen.scss"