Skip to content

Commit

Permalink
Add color-gradient
Browse files Browse the repository at this point in the history
  • Loading branch information
mgmeyers committed Sep 1, 2022
1 parent 0bd458a commit b454a6b
Show file tree
Hide file tree
Showing 9 changed files with 744 additions and 625 deletions.
29 changes: 29 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -455,6 +455,35 @@ When `opacity` is set to `true`:
--accent-a: 1;
```

## `color-gradient`

`color-gradient` outputs a fixed number of colors along a gradient between two existing color variables. A `format` attribute is also required. *Note: The `to` variable must be set in style settings for the gradient to be generated. Also, gradients will only be generated using colors defined under the current style settings `id`.*

Parameters:
- `from`: The starting color, or color that will be at step 0
- `to`: The ending color, or color that will be at step 100
- `step`: The increment at which to output a CSS variable. For example, setting `step` to `10` will output `--var-0`, `--var-10`, `--var-20`, etc...
- `format`: Can be one of: `hsl`, `rgb`, or `hex`;
- `pad`?: When set, the number section of the variable will be padded with `0`'s until it contains this number of digits. For example, setting `pad` to `3` and `step` to `10` will output `--var-000`, `--var-010`, `--var-020`

```css
/* @settings
name: Your Section Name Here
id: a-unique-id
settings:
-
id: color-base
type: color-gradient
from: color-base-00
to: color-base-100
step: 5
pad: 2
format: hex
*/
```

## Localization Support

Translations for titles and descriptions can be supplied for each language Obsidian supports by using one of the following postfixes:
Expand Down
2 changes: 1 addition & 1 deletion manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": "obsidian-style-settings",
"name": "Style Settings",
"version": "0.4.10",
"version": "0.4.11",
"minAppVersion": "0.11.5",
"description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.",
"author": "mgmeyers",
Expand Down
3 changes: 0 additions & 3 deletions obsidian-default-theme.css
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ settings:
-
id: heading-fonts
title: Fonts
title.de: FONTIESSSS
type: heading
level: 1
collapsed: true
Expand All @@ -28,9 +27,7 @@ settings:
-
id: font-monospace
title: Monospace Font
title.de: MONOSPACIE FONTIEEE
description: Used for codeblocks, tables, etc.
description.de: CODIE BLOCKIES
type: variable-text
default: '"Source Code Pro", monospace'
Expand Down
Loading

1 comment on commit b454a6b

@Grefelina
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

/* @settings

name: Your Section Name Here
id: a-unique-id
settings:
-
id: my-title
title: My Settings
type: heading
level: 3
-
id: accent
title: Accent Color
type: variable-color
format: hsl-split
default: '#007AFF'
-
id: text
title: UI font
description: Font used for the user interface
type: variable-text
default: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif

*/

Please sign in to comment.