diff --git a/.stylelintrc.yaml b/.stylelintrc.yaml index a8c1421..10b7326 100644 --- a/.stylelintrc.yaml +++ b/.stylelintrc.yaml @@ -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\\-]+$" diff --git a/assets/sass/_colors.scss b/assets/sass/_colors.scss index 7f98c69..352397f 100644 --- a/assets/sass/_colors.scss +++ b/assets/sass/_colors.scss @@ -1,95 +1,96 @@ -@use "sass:color"; - // stylelint-disable scss/dollar-variable-colon-space-after, scss/dollar-variable-empty-line-before -// Base colors. -$black: #000; -$nearblack: color.adjust($black, $lightness: 20%); // #333 -$grey-dark: color.adjust($black, $lightness: 40%); // #666 -$grey: color.adjust($black, $lightness: 60%); // #999 -$grey-light: color.adjust($black, $lightness: 80%); // #ccc -$grey-extra-light: color.adjust($black, $lightness: 93.33%); // #eee -$nearwhite: color.adjust($black, $lightness: 97%); // #f7f7f7 -$white: #fff; - -$blue: #0072b9; -$red: #c00; -$green: #43a808; -$yellow: #fd0; - -$brand: $nearblack; -$brand-alt: $grey; -$brand-light: $grey-light; -$brand-dark: $grey-dark; - -// Colour map. -$colors: ( - brand: $brand, - brand-alt: $brand-alt, - brand-light: $brand-light, - brand-dark: $brand-dark, - - text: $black, - text-bg: $white, - text-meta: $grey-dark, - - link: $brand, - link-visited: $brand, - link-hover: $brand-alt, - link-active: $red, - - link-inverted: $white, - link-visited-inverted: $white, - link-hover-inverted: $white, - link-active-inverted: $red, - - border: $brand, - border-light: $brand-light, - border-dark: $brand-dark, - - autocomplete: $black, - autocomplete-bg: $white, - autocomplete-select: $white, - autocomplete-select-bg: $blue, - - body-bg: $white, - header-bg: $white, - footer-bg: $white, - backdrop: $grey-extra-light, - - mobile-menu: $brand, - mobile-menu-cover: rgba($black, .2), - - button: $brand, - button-hover: $brand-dark, - button-text: $white, - button-text-hover: $white, - button-disabled: $grey, - - mark-highlight: $red, - mark-bg: $yellow, - - menu-active: $black, - - preview-bg: color.adjust($yellow, $lightness: 43%), - - row-header: transparent, - row-odd: $nearwhite, - row-even: transparent, - - status: $green, - status-bg: color.adjust($green, $lightness: 62%), - warning: $black, - warning-bg: color.adjust($yellow, $lightness: 45%), - warning-border: $yellow, - error: $red, - error-bg: color.adjust($red, $lightness: 57%), - - watermark: $grey-extra-light, - - headings: $nearblack, - - code: $nearblack, - - highlight: $brand-alt, -); +:root { + // Base colours. + --color-black: oklch(0% 0 0); + --color-nearblack: oklch(32% 0 0); + --color-grey-dark: oklch(51% 0 0); + --color-grey: oklch(68% 0 0); + --color-grey-light: oklch(84% 0 0); + --color-grey-extra-light: oklch(95% 0 0); + --color-nearwhite: oklch(98% 0 0); + --color-white: oklch(100% 0 0); + --color-red: oklch(53% 0.3 29); + --color-yellow: oklch(90% 0.3 99); + --color-green: oklch(64% 0.3 138); + --color-blue: oklch(54% 0.3 247); + + // 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 colours. + --color-brand: var(--color-nearblack); + --color-brand-alt: var(--color-grey); + --color-brand-light: var(--color-grey-light); + --color-brand-dark: var(--color-grey-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); + + // 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); + + // Border colours. + --color-border: var(--color-brand); + --color-border-light: var(--color-brand-light); + --color-border-dark: var(--color-brand-dark); + + // 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); + + // Mobil menu colours. + --color-mobile-menu: var(--color-brand); + --color-mobile-menu-cover: var(--color-black-20); + + // 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); + + // Row (e.g. in table) colours. + --color-row-header: transparent; + --color-row-odd: var(--color-nearwhite); + --color-row-even: transparent; + + // Status colours. + --color-info: var(--color-blue); + --color-info-bg: oklch(from var(--color-blue) 100% 0.01 h); + --color-status: var(--color-green); + --color-status-bg: oklch(from var(--color-green) 100% 0.05 h); + --color-warning: var(--color-black); + --color-warning-bg: oklch(from var(--color-yellow) 100% 0.05 h); + --color-warning-border: var(--color-yellow); + --color-error: var(--color-red); + --color-error-bg: oklch(from var(--color-red) 100% 0.05 h); + + // Highlight colours. + --color-highlight: var(--color-brand-alt); + --color-mark-highlight: var(--color-red); + --color-mark-bg: var(--color-yellow); + + // Misc colours. + --color-watermark: var(--color-grey-extra-light); + --color-debug-color: var(--color-grey-extra-light); +} diff --git a/assets/sass/_custom.scss b/assets/sass/_custom.scss index 104d21a..d5295e9 100644 --- a/assets/sass/_custom.scss +++ b/assets/sass/_custom.scss @@ -1 +1 @@ -// Site custom styles. This file loads last. +// Site custom styles and colours. This file loads last. diff --git a/assets/sass/_extra.scss b/assets/sass/_extra.scss index 319f345..7cda97c 100644 --- a/assets/sass/_extra.scss +++ b/assets/sass/_extra.scss @@ -1,6 +1,6 @@ @use "variables"; -// Add and override variables. This file loads last during init. +// Override site sass variables. This file loads first. // Overrride a variable like this. // variables.$font-size: variables.$font-size-fluid; diff --git a/assets/sass/_root.scss b/assets/sass/_root.scss index f5efc69..76ff06e 100644 --- a/assets/sass/_root.scss +++ b/assets/sass/_root.scss @@ -1,12 +1,8 @@ -@use "colors"; @use "variables"; :root { // Convert sass variables to css4 variables. - // Use like this: var(--color-brand). - @each $name, $color in colors.$colors { - --color-#{$name}: #{$color}; - } + // Use like this: var(--gutters). @each $name, $size in variables.$font-size { --fs-#{$name}: #{$size}; diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index e411a9e..8e7f41e 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -1,5 +1,3 @@ -@use "colors"; - // stylelint-disable scss/dollar-variable-colon-space-after, value-keyword-case // stylelint-disable scss/double-slash-comment-empty-line-before @@ -177,4 +175,3 @@ $include-rtl: false; // Show horizontal grid to help with debugging typography. $debug: false; -$debug-color: colors.$grey-extra-light; diff --git a/assets/sass/components/messages/_messages.scss b/assets/sass/components/messages/_messages.scss index de83e6f..2c55981 100644 --- a/assets/sass/components/messages/_messages.scss +++ b/assets/sass/components/messages/_messages.scss @@ -7,6 +7,12 @@ outline-style: solid; width: 95%; + &.info { + background-color: var(--color-info-bg); + color: var(--color-info); + outline-color: var(--color-info); + } + &.status { background-color: var(--color-status-bg); color: var(--color-status); diff --git a/assets/sass/mixins/debug/_debug.scss b/assets/sass/mixins/debug/_debug.scss index d5f9445..2d7977c 100644 --- a/assets/sass/mixins/debug/_debug.scss +++ b/assets/sass/mixins/debug/_debug.scss @@ -7,7 +7,7 @@ position: relative; // stylelint-disable-next-line max-line-length - background-image: repeating-linear-gradient(180deg, variables.$debug-color, variables.$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: ''; @@ -16,7 +16,7 @@ left: 0; height: 1px; width: 100%; - background-color: variables.$debug-color; + background-color: var(--color-debug-color); } } } diff --git a/assets/sass/styles.scss b/assets/sass/styles.scss index 8fcd2ae..9078ea8 100644 --- a/assets/sass/styles.scss +++ b/assets/sass/styles.scss @@ -8,6 +8,10 @@ @use 'root'; +// Theme colours. + +@use 'colors'; + // Ensure fonts get loaded early to minimize front-end performance impact. @use 'fonts';