diff --git a/assets/red-and-bright-red-example.png b/assets/red-and-bright-red-example.png index f97a4db..5dfc102 100644 Binary files a/assets/red-and-bright-red-example.png and b/assets/red-and-bright-red-example.png differ diff --git a/assets/red-and-bright-red-grayscale-example.png b/assets/red-and-bright-red-grayscale-example.png new file mode 100644 index 0000000..769b9d6 Binary files /dev/null and b/assets/red-and-bright-red-grayscale-example.png differ diff --git a/styling.md b/styling.md index 94cc239..487e101 100644 --- a/styling.md +++ b/styling.md @@ -51,36 +51,33 @@ background, foreground, variables, etc. Here's a breakdown: | ![Colour](https://placehold.it/25/abb2bf/000000?text=+) | base05 | - | Foreground | Default Foreground, Caret, Delimiters, Operators | | ![Colour](https://placehold.it/25/e6e6e6/000000?text=+) | base06 | 7 | White | Light Foreground (Not often used) | | ![Colour](https://placehold.it/25/ffffff/000000?text=+) | base07 | 15 | Bright White | The Lightest Foreground (Not often used) | -| ![Colour](https://placehold.it/25/e06c75/000000?text=+) | base08 | 9 | Bright Red | Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted | -| ![Colour](https://placehold.it/25/d19a66/000000?text=+) | base09 | ~11 | (Orange) | Integers, Boolean, Constants, XML Attributes, Markup Link Url | -| ![Colour](https://placehold.it/25/e5c07b/000000?text=+) | base0A | 11 | Bright Yellow | Classes, Markup Bold, Search Text Background | -| ![Colour](https://placehold.it/25/98c379/000000?text=+) | base0B | 10 | Bright Green | Strings, Inherited Class, Markup Code, Diff Inserted | -| ![Colour](https://placehold.it/25/56b6c2/000000?text=+) | base0C | 14 | Bright Cyan | Support, Regular Expressions, Escape Characters, Markup Quotes | -| ![Colour](https://placehold.it/25/61afef/000000?text=+) | base0D | 12 | Bright Blue | Functions, Methods, Attribute IDs, Headings | -| ![Colour](https://placehold.it/25/c678dd/000000?text=+) | base0E | 13 | Bright Purple | Keywords, Storage, Selector, Markup Italic, Diff Changed | +| ![Colour](https://placehold.it/25/e06c75/000000?text=+) | base08 | 1 | Red | Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted | +| ![Colour](https://placehold.it/25/d19a66/000000?text=+) | base09 | ~3 | (Orange) | Integers, Boolean, Constants, XML Attributes, Markup Link Url | +| ![Colour](https://placehold.it/25/e5c07b/000000?text=+) | base0A | 3 | Yellow | Classes, Markup Bold, Search Text Background | +| ![Colour](https://placehold.it/25/98c379/000000?text=+) | base0B | 2 | Green | Strings, Inherited Class, Markup Code, Diff Inserted | +| ![Colour](https://placehold.it/25/56b6c2/000000?text=+) | base0C | 6 | Cyan | Support, Regular Expressions, Escape Characters, Markup Quotes | +| ![Colour](https://placehold.it/25/61afef/000000?text=+) | base0D | 4 | Blue | Functions, Methods, Attribute IDs, Headings | +| ![Colour](https://placehold.it/25/c678dd/000000?text=+) | base0E | 5 | Purple | Keywords, Storage, Selector, Markup Italic, Diff Changed | | ![Colour](https://placehold.it/25/be5046/000000?text=+) | base0F | - | (Dark Red or Brown) | Deprecated Highlighting for Methods and Functions, Opening/Closing Embedded Language Tags, e.g., `` | | ![Colour](https://placehold.it/25/21252b/000000?text=+) | base10 | - | (Darker Black) | Darker Background | | ![Colour](https://placehold.it/25/181a1f/000000?text=+) | base11 | - | (Darkest Black) | The Darkest Background | -| ![Colour](https://placehold.it/25/ff7b86/000000?text=+) | base12 | 1 | Red | NA | -| ![Colour](https://placehold.it/25/efb074/000000?text=+) | base13 | 3 | Yellow | NA | -| ![Colour](https://placehold.it/25/b1e18b/000000?text=+) | base14 | 2 | Green | NA | -| ![Colour](https://placehold.it/25/63d4e0/000000?text=+) | base15 | 6 | Cyan | NA | -| ![Colour](https://placehold.it/25/67cdff/000000?text=+) | base16 | 4 | Blue | NA | -| ![Colour](https://placehold.it/25/e48bff/000000?text=+) | base17 | 5 | Purple | NA | +| ![Colour](https://placehold.it/25/ff7b86/000000?text=+) | base12 | 9 | Bright Red | NA | +| ![Colour](https://placehold.it/25/efb074/000000?text=+) | base13 | 11 | Bright Yellow | NA | +| ![Colour](https://placehold.it/25/b1e18b/000000?text=+) | base14 | 10 | Bright Green | NA | +| ![Colour](https://placehold.it/25/63d4e0/000000?text=+) | base15 | 14 | Bright Cyan | NA | +| ![Colour](https://placehold.it/25/67cdff/000000?text=+) | base16 | 12 | Bright Blue | NA | +| ![Colour](https://placehold.it/25/e48bff/000000?text=+) | base17 | 13 | Bright Purple | NA | Note: Items in parenthesis for the Terminal/Colour Use do not have an identified terminal use and are a more generic colour description. Implementation may vary depending on the Base24 scheme. -Note: In `HSL` terms, **Bright** refers to a colour with a Lightness (`L`) -value close to `50`, which is a balanced midpoint between dark and -light. It also typically has a Saturation (`S`) value close to `100`, -meaning the colour is vivid and not muted. This results in a colour that -appears bright and vivid compared to another colour. However, brightness -is relative, meaning one colour can be considered brighter than another -even if both are not particularly bright. For example, a colour with -higher saturation and a lightness closer to `50` may be perceived as -brighter than a less saturated or darker variant, even if neither is -intensely bright. +Note: **Bright** colors can have a higher luminosity relative to its +non-bright counterpart. Conventionally, the luminosity can be determined by +looking at the `L` value in the `HSL` color space (for the best accuracy, +[`OKHSL`/`OKHSV`](https://bottosson.github.io/misc/colorpicker) is recommended). +Bright colors can also have increased saturation for stronger emphasis, but this +is not a hard requirement. -![Red and Bright Red Example](https://raw.github.com/tinted-theming/base24/main/red-and-bright-red-example.png) +![Red and Bright Red Example](https://github.com/tinted-theming/base24/blob/main/assets/red-and-bright-red-example.png?raw=true) +![Red and Bright Red Grayscale Example](https://github.com/tinted-theming/base24/blob/main/assets/red-and-bright-red-grayscale-example.png?raw=true)