Skip to content

Commit

Permalink
refactor(tree-wide): misc improvements (#1547)
Browse files Browse the repository at this point in the history
  • Loading branch information
@uncenter
uncenter authored Dec 31, 2024
1 parent 3e6ecfb commit 6121f23
Show file tree
Hide file tree
Showing 126 changed files with 8,109 additions and 8,083 deletions.
1 change: 0 additions & 1 deletion .github/workflows/deno-check.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,3 @@ jobs:
run: |
deno lint
deno check **/*.ts
deno fmt --check **/*.ts
6 changes: 3 additions & 3 deletions .stylelintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@
export default {
extends: "stylelint-config-standard",
plugins: [
"./scripts/lint/stylelint-custom/optimized-svgs.js",
"./scripts/lint/stylelint-custom/color-op-func-percentage.js",
"./scripts/lint/stylelint-custom/index.js",
],
customSyntax: "postcss-less",
rules: {
"catppuccin/optimized-svgs": true,
"catppuccin/require-color-op-func-percentage": true,
"catppuccin/color-operations": true,
"catppuccin/no-redundant-parent-selector": true,

"selector-class-pattern": null,
"custom-property-pattern": null,
Expand Down
56 changes: 28 additions & 28 deletions docs/guide/images-and-svgs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,34 +73,34 @@ If you encounter non-SVG images, or many `<img>` elements with external SVGs, th
}
```

Select the filter definitions from below that you plan to use and insert them near the top of the `#catppuccin` mixin, below the `@<color>: @catppuccin[@@lookup][@<color>];` color definitions.
Select the filter definitions from below that you plan to use and insert them near the top of the `#catppuccin` mixin, below the `@<color>: @catppuccin[@@flavor][@<color>];` color definitions.

```css
@rosewater-filter: @catppuccin-filters[@@lookup][@rosewater];
@flamingo-filter: @catppuccin-filters[@@lookup][@flamingo];
@pink-filter: @catppuccin-filters[@@lookup][@pink];
@mauve-filter: @catppuccin-filters[@@lookup][@mauve];
@red-filter: @catppuccin-filters[@@lookup][@red];
@maroon-filter: @catppuccin-filters[@@lookup][@maroon];
@peach-filter: @catppuccin-filters[@@lookup][@peach];
@yellow-filter: @catppuccin-filters[@@lookup][@yellow];
@green-filter: @catppuccin-filters[@@lookup][@green];
@teal-filter: @catppuccin-filters[@@lookup][@teal];
@sky-filter: @catppuccin-filters[@@lookup][@sky];
@sapphire-filter: @catppuccin-filters[@@lookup][@sapphire];
@blue-filter: @catppuccin-filters[@@lookup][@blue];
@lavender-filter: @catppuccin-filters[@@lookup][@lavender];
@text-filter: @catppuccin-filters[@@lookup][@text];
@subtext1-filter: @catppuccin-filters[@@lookup][@subtext1];
@subtext0-filter: @catppuccin-filters[@@lookup][@subtext0];
@overlay2-filter: @catppuccin-filters[@@lookup][@overlay2];
@overlay1-filter: @catppuccin-filters[@@lookup][@overlay1];
@overlay0-filter: @catppuccin-filters[@@lookup][@overlay0];
@surface2-filter: @catppuccin-filters[@@lookup][@surface2];
@surface1-filter: @catppuccin-filters[@@lookup][@surface1];
@surface0-filter: @catppuccin-filters[@@lookup][@surface0];
@base-filter: @catppuccin-filters[@@lookup][@base];
@mantle-filter: @catppuccin-filters[@@lookup][@mantle];
@crust-filter: @catppuccin-filters[@@lookup][@crust];
@accent-color-filter: @catppuccin-filters[@@lookup][@@accent];
@rosewater-filter: @catppuccin-filters[@@flavor][@rosewater];
@flamingo-filter: @catppuccin-filters[@@flavor][@flamingo];
@pink-filter: @catppuccin-filters[@@flavor][@pink];
@mauve-filter: @catppuccin-filters[@@flavor][@mauve];
@red-filter: @catppuccin-filters[@@flavor][@red];
@maroon-filter: @catppuccin-filters[@@flavor][@maroon];
@peach-filter: @catppuccin-filters[@@flavor][@peach];
@yellow-filter: @catppuccin-filters[@@flavor][@yellow];
@green-filter: @catppuccin-filters[@@flavor][@green];
@teal-filter: @catppuccin-filters[@@flavor][@teal];
@sky-filter: @catppuccin-filters[@@flavor][@sky];
@sapphire-filter: @catppuccin-filters[@@flavor][@sapphire];
@blue-filter: @catppuccin-filters[@@flavor][@blue];
@lavender-filter: @catppuccin-filters[@@flavor][@lavender];
@text-filter: @catppuccin-filters[@@flavor][@text];
@subtext1-filter: @catppuccin-filters[@@flavor][@subtext1];
@subtext0-filter: @catppuccin-filters[@@flavor][@subtext0];
@overlay2-filter: @catppuccin-filters[@@flavor][@overlay2];
@overlay1-filter: @catppuccin-filters[@@flavor][@overlay1];
@overlay0-filter: @catppuccin-filters[@@flavor][@overlay0];
@surface2-filter: @catppuccin-filters[@@flavor][@surface2];
@surface1-filter: @catppuccin-filters[@@flavor][@surface1];
@surface0-filter: @catppuccin-filters[@@flavor][@surface0];
@base-filter: @catppuccin-filters[@@flavor][@base];
@mantle-filter: @catppuccin-filters[@@flavor][@mantle];
@crust-filter: @catppuccin-filters[@@flavor][@crust];
@accent-filter: @catppuccin-filters[@@flavor][@@accentColor];
```
106 changes: 51 additions & 55 deletions docs/tutorials/writing-a-userstyle.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,29 +46,27 @@ The rest of the metadata block details the preprocessor and the options of the u
To tell Stylus which website(s) to apply this userstyle on, replace `<website-domain>` with the domain of your port. For `example.org`, it looks like this:

```less
@-moz-document domain('example.org') {
@-moz-document domain("example.org") {
```

> [!NOTE]
> While `domain()` works for most cases, you may need to use [`regexp()`](https://github.com/openstyles/stylus/wiki/Writing-styles#regexp) for websites with more complex URLs. For example:
>
> ```less
> @-moz-document regexp('http://example.(com|net|org|edu)/') {
> @-moz-document regexp("http://example.(com|net|org|edu)/") {
> ```

## Applying the theme

This section of the template is about applying the user's light/dark flavors. Read the comments for this section in the template thoroughly and decide which of the two options works best for your port. `example.org` doesn't have a light/dark mode toggle, so we'll apply it based on the user's preferences.

```less
@media (prefers-color-scheme: light) {
:root {
#catppuccin(@lightFlavor, @accentColor);
:root {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
}
@media (prefers-color-scheme: dark) {
:root {
#catppuccin(@darkFlavor, @accentColor);
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
}
```
Expand All @@ -81,18 +79,18 @@ This section of the template is about applying the user's light/dark flavors. Re
> [!TIP]
> For more on how Less mixins work, see ["Mixins" - lesscss.org](https://lesscss.org/features/#mixins-feature) and ["A Comprehensive Introduction to Less: Mixins" - SitePoint](https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/).

We'll refer to this next section of the template as the "`#catppuccin` mixin". You can ignore the first half of this section with all of the `@<color>: @catppuccin[@@lookup][@<color>];` lines and skip to the comment where it says `// Start styling your website here:`. As the comment suggests, you will write the CSS rules for your port here. Here is what it looks like for our `example.org` port:
We'll refer to this next section of the template as the "`#catppuccin` mixin". You can ignore the first half of this section with all of the `@<color>: @catppuccin[@@flavor][@<color>];` lines and skip to the comment where it says `// Start styling your website here:`. As the comment suggests, you will write the CSS rules for your port here. Here is what it looks like for our `example.org` port:
```less
#catppuccin(@lookup, @accent) {
@rosewater: @catppuccin[@@lookup][@rosewater];
#catppuccin(@flavor) {
@rosewater: @catppuccin[@@flavor][@rosewater];
/* ... */
@accent-color: @catppuccin[@@lookup][@@accent];
@accent: @catppuccin[@@flavor][@@accentColor];
color-scheme: if(@lookup = latte, light, dark);
color-scheme: if(@flavor = latte, light, dark);
::selection {
background-color: fade(@accent-color, 30%);
background-color: fade(@accent, 30%);
}
input,
Expand All @@ -113,7 +111,7 @@ We'll refer to this next section of the template as the "`#catppuccin` mixin". Y
a:link,
a:visited {
color: @accent-color;
color: @accent;
}
/* ... */
Expand Down Expand Up @@ -143,50 +141,48 @@ Combining all of the previous steps, we have a working userstyle!
==/UserStyle== */
@-moz-document domain("example.org") {
@media (prefers-color-scheme: light) {
:root {
#catppuccin(@lightFlavor, @accentColor);
:root {
@media (prefers-color-scheme: light) {
#catppuccin(@lightFlavor);
}
}
@media (prefers-color-scheme: dark) {
:root {
#catppuccin(@darkFlavor, @accentColor);
@media (prefers-color-scheme: dark) {
#catppuccin(@darkFlavor);
}
}
#catppuccin(@lookup, @accent) {
@rosewater: @catppuccin[@@lookup][@rosewater];
@flamingo: @catppuccin[@@lookup][@flamingo];
@pink: @catppuccin[@@lookup][@pink];
@mauve: @catppuccin[@@lookup][@mauve];
@red: @catppuccin[@@lookup][@red];
@maroon: @catppuccin[@@lookup][@maroon];
@peach: @catppuccin[@@lookup][@peach];
@yellow: @catppuccin[@@lookup][@yellow];
@green: @catppuccin[@@lookup][@green];
@teal: @catppuccin[@@lookup][@teal];
@sky: @catppuccin[@@lookup][@sky];
@sapphire: @catppuccin[@@lookup][@sapphire];
@blue: @catppuccin[@@lookup][@blue];
@lavender: @catppuccin[@@lookup][@lavender];
@text: @catppuccin[@@lookup][@text];
@subtext1: @catppuccin[@@lookup][@subtext1];
@subtext0: @catppuccin[@@lookup][@subtext0];
@overlay2: @catppuccin[@@lookup][@overlay2];
@overlay1: @catppuccin[@@lookup][@overlay1];
@overlay0: @catppuccin[@@lookup][@overlay0];
@surface2: @catppuccin[@@lookup][@surface2];
@surface1: @catppuccin[@@lookup][@surface1];
@surface0: @catppuccin[@@lookup][@surface0];
@base: @catppuccin[@@lookup][@base];
@mantle: @catppuccin[@@lookup][@mantle];
@crust: @catppuccin[@@lookup][@crust];
@accent-color: @catppuccin[@@lookup][@@accent];
color-scheme: if(@lookup = latte, light, dark);
#catppuccin(@flavor) {
@rosewater: @catppuccin[@@flavor][@rosewater];
@flamingo: @catppuccin[@@flavor][@flamingo];
@pink: @catppuccin[@@flavor][@pink];
@mauve: @catppuccin[@@flavor][@mauve];
@red: @catppuccin[@@flavor][@red];
@maroon: @catppuccin[@@flavor][@maroon];
@peach: @catppuccin[@@flavor][@peach];
@yellow: @catppuccin[@@flavor][@yellow];
@green: @catppuccin[@@flavor][@green];
@teal: @catppuccin[@@flavor][@teal];
@sky: @catppuccin[@@flavor][@sky];
@sapphire: @catppuccin[@@flavor][@sapphire];
@blue: @catppuccin[@@flavor][@blue];
@lavender: @catppuccin[@@flavor][@lavender];
@text: @catppuccin[@@flavor][@text];
@subtext1: @catppuccin[@@flavor][@subtext1];
@subtext0: @catppuccin[@@flavor][@subtext0];
@overlay2: @catppuccin[@@flavor][@overlay2];
@overlay1: @catppuccin[@@flavor][@overlay1];
@overlay0: @catppuccin[@@flavor][@overlay0];
@surface2: @catppuccin[@@flavor][@surface2];
@surface1: @catppuccin[@@flavor][@surface1];
@surface0: @catppuccin[@@flavor][@surface0];
@base: @catppuccin[@@flavor][@base];
@mantle: @catppuccin[@@flavor][@mantle];
@crust: @catppuccin[@@flavor][@crust];
@accent: @catppuccin[@@flavor][@@accentColor];
color-scheme: if(@flavor = latte, light, dark);
::selection {
background-color: fade(@accent-color, 30%);
background-color: fade(@accent, 30%);
}
input,
Expand All @@ -207,7 +203,7 @@ Combining all of the previous steps, we have a working userstyle!
a:link,
a:visited {
color: @accent-color;
color: @accent;
}
}
}
Expand Down
85 changes: 0 additions & 85 deletions scripts/lint/stylelint-custom/color-op-func-percentage.js
View file

This file was deleted.

Loading

0 comments on commit 6121f23

Please sign in to comment.