You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -6,15 +6,19 @@ Configuration and usage of ColorHelper.
6
6
## General Usage
7
7
ColorHelper is a CSS/SCSS/Sass tooltip. When the cursor is on a CSS color, the tooltip will appear. When entering a color into a supported file, the color palette panel will be triggered so you can optionally insert a color from a saved palette. The panel will popup after either: `#`, `rgb(`, `rgba(`, `hsl(` or `hsla(`.
8
8
9
+
10
+
!!! note "Note"
11
+
Popups are provided by the [`mdpopups`](https://github.com/facelessuser/sublime-markdown-popups) dependency.
12
+
9
13
## Color Info
10
14
The Color Info Panel will show a preview of the color, and other format variations of the color such as: color name, hex, rgb, rgba, hsl, and hsla format; if desired, you can convert the selected color to one of the shown formats by clicking the link to the left.
11
15
12
16
13
17
14
-
From the color info panel, you can launch a color picker, bookmark colors as a favorite, add/save the current color to a palette of your choice, or open the [Palette Panel](#palette-panel) to select a pre-saved color from an exiting palette.
18
+
From the color info panel, you can launch a color picker, bookmark colors as a favorite, add/save the current color to a palette of your choice, or open the [Palette Panel](#palette-panel) to select a pre-saved color from an existing palette.
15
19
16
20
## Color Picker
17
-
The internal color picker can be launched from the command palette or from the [Color Info Panel](#color_info). When launched it will use the color under the cursor (if available) as its starting color. The internal color picker is contained inside a tooltip. It has a color map section at the top where different colors can be selected. It shows various valid CSS formats of the colors at the bottom. And it shows either rgba channels or hlsa channels; a toggle is available to switch between them.
21
+
The internal color picker can be launched from the view's context menu, the command palette, or from the [Color Info Panel](#color_info). When launched it will use the color under the cursor (if available) as its starting color. The internal color picker is contained inside a tooltip. It has a color map section at the top where different colors can be selected. It shows various valid CSS formats of the colors at the bottom. And it shows either rgba channels or hlsa channels; a toggle is available to switch between them.
18
22
19
23
20
24
@@ -58,7 +62,7 @@ The Color Panel allows you to click a color to insert it at your current color p
58
62
59
63
60
64
61
-
From the Color Palette, you can also bring up the [Color Delete Panel](#color-delete-panel).
65
+
You can also bring up the [Color Delete Panel](#color-delete-panel) from the view's context menu or the command palette.
62
66
63
67
## Color Delete Panel
64
68
The Color Delete Panel can delete any color from the given palette. A user simply clicks the color to remove, and it will be removed.
@@ -68,6 +72,14 @@ The Color Delete Panel can delete any color from the given palette. A user simp
68
72
## Settings
69
73
Settings for Color Helper are contained within the `color_helper.sublime-settings` file.
70
74
75
+
### auto_popup
76
+
Enable/disable auto popups.
77
+
78
+
```js
79
+
// Show popups automatically in configured files.
80
+
"auto_popup":true,
81
+
```
82
+
71
83
### upper_case_hex
72
84
When inserting a color from the tooltip, this setting will determine if hex colors get uppercased or lowercased.
73
85
@@ -84,24 +96,6 @@ Will determine if a HTML color name will be shown for the currently selected col
84
96
"use_webcolor_names":true,
85
97
```
86
98
87
-
### preferred_format
88
-
Controls color format that will be inserted into your document when selecting a color from a palette. This will only affect colors that contain **no** transparency.
89
-
90
-
```js
91
-
// Preferred format to output color as:
92
-
// (none|hex|rgb|hsl)
93
-
"preferred_format":"hex",
94
-
```
95
-
96
-
### preferred_alpha_format
97
-
Controls color format that will be inserted into your document when selecting a color from a palette. This will only affect colors **with** transparency.
98
-
99
-
```js
100
-
// Preferred alpha format to output color as:
101
-
// (none|rgba|hsla)
102
-
"preferred_alpha_format":"rgba",
103
-
```
104
-
105
99
### click_color_box_to_pick
106
100
This will make the color preview box in the [Color Info Panel](#color-info-panel) clickable. When set to `color_picker` and clicked, it will open the color picker via the [ColorPicker](https://github.com/weslly/ColorPicker) plugin (if installed). When set to `palette_picker` and clicked, it will open the [Palette Panel](#palette-panel). The respective menu item will not be shown in the [Color Info Panel](#color-info-panel) once relocated to the color preview.
107
101
@@ -197,17 +191,143 @@ Enables showing the color conversion options on the [Color Info Panel](#color-in
197
191
"enable_color_conversions":true,
198
192
```
199
193
200
-
### supported_syntax
201
-
`supported_syntax` is a list of scope rules that will be scanned when [enable_current_file_palette](#enable_current_file_palette) is enabled. If a color is found within these scope rules, it will be indexed for the current file and shown in the Current Colors Panel in the [Palette Panel](#palette-panel).
194
+
### color_scanning
195
+
Setting to control color scanning which is responsible for both auto-popups and constructing "Current File Palette".
196
+
197
+
`color_scanning` is an array of rules. Each rule can target file(s) and enable certain scanning certain scopes for specific colors. Each rule is a dictionary. `syntax_files`, `base_scopes`, and `extensions` or used to target the a file for scanning; you can use a specific one, or multiple.
198
+
199
+
```js
200
+
"color_scanning": [
201
+
{
202
+
"syntax_files": [],
203
+
"syntax_filter":"whitelist",
204
+
"base_scopes": [
205
+
"source.css",
206
+
"text.html"
207
+
],
208
+
"scan_scopes": [
209
+
// CSS, CSS in HTML etc. (based on: Sublime Default)
210
+
"meta.property-value.css -comment -string",
211
+
// CSS3, CSS3 in HTML etc. (based on: https://packagecontrol.io/packages/CSS3)
`syntax_files` is an array of syntax file (`tmLanguage` or `sublime-syntax`)names and are relative to `Packages` (extensions should be excluded). They are used to filter views that will be targeted for scanning. Depending on how [`syntax_filter`](#color_scanningsyntax_filter) is set, `syntax_files` will either require the files to be in the list or not in the list. If `syntax_files` is set as an empty array, all views will be targeted unless filtered further by other settings.
228
+
229
+
Assuming that you have a tmLanguage file `Packages/CSS/CSS.tmLanguage`:
230
+
231
+
```js
232
+
"color_scanning": [
233
+
{
234
+
"syntax_files": ["CSS/CSS"],
235
+
```
236
+
237
+
#### color_scanning.syntax_filter
238
+
`syntax_filter` will cause [`syntax_files`](#color_scanningsyntax_files) to be treated as either a `blacklist` or `whitelist`. Acceptable values are `"blacklist"` and `"whitelist"`. `"whitelist"` is the default setting.
239
+
240
+
```js
241
+
"color_scanning": [
242
+
{
243
+
"syntax_filter":"whitelist",
244
+
```
245
+
246
+
#### color_scanning.base_scopes
247
+
`base_scopes` is used to target specific file views that are syntax highlighted with a specific base scope. This allows you to target multiple syntax highlighters that all use the same base scope. `base_scopes` is an array; if the array is left empty, all views will be targeted unless filtered further by other settings.
248
+
249
+
```js
250
+
"color_scanning": [
251
+
{
252
+
"base_scopes": ["source.css"],
253
+
```
254
+
255
+
#### color_scanning.extensions
256
+
`extensions` is used to target specific file views that a file name with the specified extension(s). `extensions` is an array; if the array is left empty, all views will be targeted unless filtered further by other settings. For this setting to work the file usually must exist on disk as views that do not exist on text usually do not have a file name.
257
+
258
+
```js
259
+
"color_scanning": [
260
+
{
261
+
"extensions": [".css"],
262
+
```
263
+
264
+
#### color_scanning.scan_scopes
265
+
`scan_scopes` is an array of scopes that will be searched for colors. Scopes in this array contain usually `tmTheme` scope syntax, so you can include scopes or exclude scopes etc.
266
+
267
+
In the example below, we target `meta.property-value.css`, but only if it is not also scoped as a `string` or a `comment`.
`scan_completion_scopes` is an array of scopes that will be searched for certain syntax for color completions. This is used only if `scan_scopes` is not sufficient to also capture colors that need to be completed. For example: sometimes `scan_scopes` is not broad enough to capture incomplete colors, but we don't want to generally want to scan so broadly when scanning an entire file for complete colors. Scopes in this array contain usually `tmTheme` scope syntax, so you can include scopes or exclude scopes etc.
277
+
278
+
In the example below, we target `source.scss` and `source.sass`, but only if they are not also scoped as `string` or `comment`.
279
+
280
+
```js
281
+
"color_scanning": [
282
+
{
283
+
"scan_completion_scopes": [
284
+
"source.scss -comment -string",
285
+
"source.sass -comment -string"
286
+
],
287
+
```
288
+
289
+
#### color_scanning.allowed_colors
290
+
`allowed_colors` defines which colors will be scanned for in a specific file. It is an array of strings where each strings specifies a color type or category of colors to scan for.
291
+
292
+
| Value | Description |
293
+
| ----- | ----------- |
294
+
| webcolors | CSS3 color names plus CSS4's `rebeccapurple`. |
295
+
| hex | Hex colors in the form of `#RRGGBB`. |
296
+
| hex_compressed | Hex colors in the form of `#RGB`. |
297
+
| hexa | Hex colors with an alpha channel in the form `#RRGGBBAA` or `#AARRGGBB` if `use_hex_argb` is set to `true`. |
298
+
| hexa_compressed | Hex colors with an alpha channel in the form `#RGBA` or `#ARGB` if `use_hex_argb` is set to `true`. |
299
+
| rgb | RGB colors in the form `rgb(255, 128, 0)` or `rgb(100%, 50%, 0%)`. |
300
+
| rgba | RGBA colors in the form `rgb(255, 128, 0, .5)` or `rgb(100%, 50%, 0%, .5)`. It also supports CSS4's alpha as a percentage format: `rgb(100%, 50%, 0%, 50%)`. |
301
+
| hsl | HSL colors in the form `hsl(360, 100%, 50%). |
302
+
| hsla |HSLA colors in the form `hsla(360, 100%, 50%, .5). It also supports CSS4's alpha as a percentage format: `hsla(360, 100%, 50%, 50%)`. |
303
+
| gray | CSS4's gray format: `gray(255)` or `gray(100%)`. |
304
+
| graya | CSS4's gray with alpha format: `gray(255, .5)` or `gray(100%, .5)`. It also supports alpha as a percentage format: `gray(100%, 50%)`. |
When scanning and processing hex rgb colors with alpha channels, process them as and output them with the alpha channel first opposed to at the end. By default the value is `false`.
319
+
320
+
```js
321
+
"color_scanning": [
322
+
{
323
+
"use_hex_argb":true
324
+
```
325
+
326
+
#### color_scanning.compress_hex_output
327
+
When outputting hex formats compress the color if possible `#334455` --> `#345`. The default is `false`.
202
328
203
329
```js
204
-
// File scoping that will be used when indexing colors in an opened or saved file.
205
-
// These are the syntaxes which the auto popup tooltip uses to recogize scannable regions.
206
-
"supported_syntax": [
207
-
"meta.property-value.css -comment -string", // CSS, CSS in HTML etc. (based on: Sublime Default)
208
-
"meta.value.css -comment -string", // CSS3, CSS3 in HTML etc. (based on: https://packagecontrol.io/packages/CSS3)
209
-
"meta.property-list.css.sass -comment -string", // Sass and SCSS (based on: https://packagecontrol.io/packages/Syntax%20Highlighting%20for%20Sass)
210
-
"sass-script-maps -variable.other -comment -string", // Sass and SCSS script maps (based on: https://packagecontrol.io/packages/Syntax%20Highlighting%20for%20Sass)
211
-
"meta.tag.inline.any.html string.quoted"// HTML attributes (based on: Sublime Default)
0 commit comments