diff --git a/docs/src/content/docs/contributing/standard-library.md b/docs/src/content/docs/contributing/standard-library.md index 54d5674be2..0a4bed4a6a 100644 --- a/docs/src/content/docs/contributing/standard-library.md +++ b/docs/src/content/docs/contributing/standard-library.md @@ -15,32 +15,64 @@ In userstyles, the standard library is imported at the top like so (along with o The standard library exposes a `#lib` namespace. -### `#lib.palette()` +### `#lib.palette(...config)` The standard library palette mixin provides Less variable definitions for hex colors and CSS filters from the palette. Call the mixin at the top of the `#catppuccin` mixin to inject the variables into the userstyle context. This is used in all userstyles. +#### Arguments + +##### `@rgbify-default-sep` + +Sets the default separator for the `rgbify` utility. Can be either `"comma"` or `"space"`. Defaults to `"comma"`. + +##### `@hslify-default-sep` + +Sets the default separator for the `hslify` utility. Can be either `"comma"` or `"space"`. Defaults to `"comma"`. + ### `#lib.defaults()` The standard library defaults mixin provides a set of default styles for text selection and native/input elements. This is generally applied in all userstyles, with some exceptions. -### `#lib.rgbify()` +### `#lib.rgbify(@color)` The standard library `rgbify` mixin is a utility mixin for extracting the color in `r, g, b` format from a palette variable. +#### Arguments + +##### `@color` + +##### `@spaces`/`@commas` + +_Optional_ + +Depending on `.palette()` configuration, either enables space separation in commas-by-default mode or comma separation in spaces-by-default mode. + #### Examples ```less --my-variable-rgb: #lib.rgbify(@base) []; // -> 30, 30, 46 +--my-variable-rgb-spaces: #lib.rgbify(@base, true) []; // -> 30 30 46 ``` -### `#lib.hslify()` +### `#lib.hslify(@color)` The standard library `hslify` mixin is a utility mixin for extracting the color in `h, s, l` format from a palette variable. +#### Arguments + +##### `@color` + +##### `@spaces`/`@commas` + +_Optional_ + +Depending on `.palette()` configuration, either enables space separation in commas-by-default mode or comma separation in spaces-by-default mode. + #### Examples ```less --my-variable-hsl: #lib.hslify(@base) []; // -> 240, 21.052631578947366%, 14.901960784313726% +--my-variable-hsl-spaces: #lib.hslify(@base, true) []; // -> 240 21.052631578947366% 14.901960784313726% ``` ### `#lib.css-variables()` diff --git a/lib/lib.less b/lib/lib.less index 576bde68a9..f48fcb2617 100644 --- a/lib/lib.less +++ b/lib/lib.less @@ -15,7 +15,7 @@ }; #lib { - .palette() { + .palette(@rgbify-default-sep: "comma", @hslify-default-sep: "comma") { @rosewater: @catppuccin[@@flavor][@rosewater]; @flamingo: @catppuccin[@@flavor][@flamingo]; @pink: @catppuccin[@@flavor][@pink]; @@ -88,14 +88,42 @@ } } - .rgbify(@color) { - @rgb: red(@color), green(@color), blue(@color); + // rgbify() + & when (@rgbify-default-sep = "comma") { + .rgbify(@color, @spaces: false) { + @with-spaces: red(@color) green(@color) blue(@color); + @with-commas: red(@color), green(@color), blue(@color); + @result: if(@spaces = true, @with-spaces, @with-commas); + } + } + & when (@rgbify-default-sep = "space") { + .rgbify(@color, @commas: false) { + @with-spaces: red(@color) green(@color) blue(@color); + @with-commas: red(@color), green(@color), blue(@color); + @result: if(@commas = true, @with-commas, @with-spaces); + } } - .hslify(@color) { - @raw: e( - %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) - ); + // hslify() + & when (@hslify-default-sep = "comma") { + .hslify(@color, @spaces: false) { + @result: if( + @spaces = true, + e(%("%s %s% %s%", hue(@color), saturation(@color), lightness(@color))), + e(%("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color))) + ); + } + } + & when (@hslify-default-sep = "space") { + .hslify(@color, @commas: false) { + @result: if( + @commas = true, + e( + %("%s, %s%, %s%", hue(@color), saturation(@color), lightness(@color)) + ), + e(%("%s %s% %s%", hue(@color), saturation(@color), lightness(@color))) + ); + } } .css-variables() {