From cf72c51286df7286cff2403b0ae0fa085978ef79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Tue, 24 Jan 2023 00:14:10 +0100 Subject: [PATCH] shortcodes: support for accent color #440 --- .../content/basics/migration/_index.en.md | 2 ++ .../content/shortcodes/attachments.en.md | 2 +- exampleSite/content/shortcodes/badge.en.md | 4 +++- exampleSite/content/shortcodes/button.en.md | 4 +++- exampleSite/content/shortcodes/notice.en.md | 14 ++++++++++++- static/css/ie.css | 21 +++++++++++++++++++ static/css/variant.css | 5 +++++ 7 files changed, 48 insertions(+), 4 deletions(-) diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index f380ddbba3..145bc41469 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -20,6 +20,8 @@ This document shows you what's new in the latest release. For a detailed list of - {{% badge style="info" icon="plus-circle" title=" " %}}New{{% /badge %}} The [`attachments`]({{% relref "shortcodes/attachments" %}}), [`badge`]({{% relref "shortcodes/badge" %}}), [`button`]({{% relref "shortcodes/button" %}}) and [`notice`]({{% relref "shortcodes/notice" %}}) shortcodes have a new parameter `color` to set arbitrary CSS color values. + Additionally the `--ACCENT-color` brand color introduced in version 5.8.0 is now supported with these shortcodes. + --- ## 5.9.0 (2022-12-23) diff --git a/exampleSite/content/shortcodes/attachments.en.md b/exampleSite/content/shortcodes/attachments.en.md index dbe0ad52d3..1668257da7 100644 --- a/exampleSite/content/shortcodes/attachments.en.md +++ b/exampleSite/content/shortcodes/attachments.en.md @@ -35,7 +35,7 @@ While the examples are using shortcodes with named parameter you are free to als | Name | Default | Notes | |:------------|:----------------|:------------| -| **style** | `transparent` | The style scheme used for the box.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent` | +| **style** | `transparent` | The style scheme used for the box.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent` | | **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **title** | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: `Attachments`

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: `paperclip`

If you want no icon, you have to set this parameter to `" "` (a non empty d with spaces) | diff --git a/exampleSite/content/shortcodes/badge.en.md b/exampleSite/content/shortcodes/badge.en.md index d88b4678ea..f5c2f4b0d0 100644 --- a/exampleSite/content/shortcodes/badge.en.md +++ b/exampleSite/content/shortcodes/badge.en.md @@ -66,7 +66,7 @@ While the examples are using shortcodes with named parameter you are free to als | Name | Default | Notes | |:----------------------|:----------------|:------------| -| **style** | `default` | The style scheme used for the badge.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent` | +| **style** | `default` | The style scheme used for the badge.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent` | | **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **title** | see notes | Arbitrary text for the badge title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: _<empty>_

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: _<empty>_

If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | @@ -95,10 +95,12 @@ While the examples are using shortcodes with named parameter you are free to als ````go {{%/* badge style="primary" icon="bullhorn" title="Announcement" %}}Mandatory{{% /badge */%}} {{%/* badge style="secondary" icon="bullhorn" title="Announcement" %}}Optional{{% /badge */%}} +{{%/* badge style="accent" icon="bullhorn" title="Announcement" %}}Special{{% /badge */%}} ```` {{% badge style="primary" icon="bullhorn" title="Announcement" %}}Mandatory{{% /badge %}} {{% badge style="secondary" icon="bullhorn" title="Announcement" %}}Optional{{% /badge %}} +{{% badge style="accent" icon="bullhorn" title="Announcement" %}}Special{{% /badge %}} #### By Color diff --git a/exampleSite/content/shortcodes/button.en.md b/exampleSite/content/shortcodes/button.en.md index a0c96a95e3..a1348774fe 100644 --- a/exampleSite/content/shortcodes/button.en.md +++ b/exampleSite/content/shortcodes/button.en.md @@ -48,7 +48,7 @@ Once the button is clicked, it opens another browser tab for the given URL. | Name | Default | Notes | |:----------------------|:----------------|:------------| | **href** | _<empty>_ | Either the destination URL for the button or JavaScript code to be executed on click. If this parameter is not set, the button will do nothing but is still displayed as clickable.

- if starting with `javascript:` all following text will be executed in your browser
- every other string will be interpreted as URL| -| **style** | `transparent` | The style scheme used for the button.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent` | +| **style** | `transparent` | The style scheme used for the button.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent` | | **color** | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **icon** | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: _<empty>_

If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **iconposition** | `left` | Places the icon to the `left` or `right` of the title. | @@ -80,10 +80,12 @@ Once the button is clicked, it opens another browser tab for the given URL. ````go {{%/* button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button */%}} {{%/* button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button */%}} +{{%/* button href="https://gohugo.io/" style="accent" %}}Get Hugo{{% /button */%}} ```` {{% button href="https://gohugo.io/" style="primary" %}}Get Hugo{{% /button %}} {{% button href="https://gohugo.io/" style="secondary" %}}Get Hugo{{% /button %}} +{{% button href="https://gohugo.io/" style="accent" %}}Get Hugo{{% /button %}} #### By Color diff --git a/exampleSite/content/shortcodes/notice.en.md b/exampleSite/content/shortcodes/notice.en.md index d02590cbc6..9482d65cc0 100644 --- a/exampleSite/content/shortcodes/notice.en.md +++ b/exampleSite/content/shortcodes/notice.en.md @@ -51,7 +51,7 @@ It is all about the boxes. | Name | Position | Default | Notes | |:----------|:---------|:----------|:------------| -| **style** | 1 | `default` | The style scheme used for the box.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent` | +| **style** | 1 | `default` | The style scheme used for the box.

- by severity: `info`, `note`, `tip`, `warning`
- by brand color: `primary`, `secondary`, `accent`
- by color: `blue`, `green`, `grey`, `orange`, `red`
- by special color: `default`, `transparent` | | **color** | | see notes | The [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value) to be used. If not set, the chosen color depends on the **style**. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color | | **title** | 2 | see notes | Arbitrary text for the box title. Depending on the **style** there may be a default title. Any given value will overwrite the default.

- for severity styles: the matching title for the severity
- for all other styles: _<empty>_

If you want no title for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | | **icon** | 3 | see notes | [Font Awesome icon name]({{%relref "shortcodes/icon#finding-an-icon" %}}) set to the left of the title. Depending on the **style** there may be a default icon. Any given value will overwrite the default.

- for severity styles: a nice matching icon for the severity
- for all other styles: _<empty>_

If you want no icon for a severity style, you have to set this parameter to `" "` (a non empty string filled with spaces) | @@ -186,6 +186,18 @@ A **secondary** disclaimer A **secondary** disclaimer {{% /notice %}} +#### Accent + +````go +{{%/* notice style="accent" */%}} +An **accent** disclaimer +{{%/* /notice */%}} +```` + +{{% notice style="accent" %}} +An **accent** disclaimer +{{% /notice %}} + ### By Color #### Blue without a Title and Icon diff --git a/static/css/ie.css b/static/css/ie.css index d41fcf8af3..83d52d3f66 100644 --- a/static/css/ie.css +++ b/static/css/ie.css @@ -245,6 +245,14 @@ color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */ } + div.box.accent { + background-color: #ff88ff; /* var(--INTERNAL-ACCENT-color) */ + } + + div.box.accent > .box-content { + color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */ + } + div.box.blue { background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */ } @@ -446,6 +454,14 @@ border-color: #486ac9; /* var(--SECONDARY-color) */ } + .btn.cstyle.accent { + background-color: #ff88ff; /* var(--ACCENT-color) */ + } + + .btn.cstyle.accent > * { + border-color: #ff88ff; /* var(--ACCENT-color) */ + } + .btn.cstyle.blue { background-color: rgba( 48, 117, 229, 1 ); /* var(--BOX-BLUE-color) */ } @@ -559,6 +575,11 @@ color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */ } + .badge.accent > .badge-content { + background-color: #ff88ff; /* var(--INTERNAL-ACCENT-color) */ + color: #101010; /* var(--INTERNAL-MAIN-TEXT-color) */ + } + .badge.blue > .badge-content { background-color: rgba( 48, 117, 229, 1 ); /* var(--INTERNAL-BOX-BLUE-color) */ color: rgba( 16, 16, 16, 1 ); /* var(--INTERNAL-BOX-BLUE-TEXT-color) */ diff --git a/static/css/variant.css b/static/css/variant.css index ed46e41cbb..ed15e53490 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -272,6 +272,11 @@ div.box > .box-content { --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); } +.cstyle.accent { + --VARIABLE-BOX-color: var(--INTERNAL-ACCENT-color); + --VARIABLE-BOX-TEXT-color: var(--INTERNAL-MAIN-TEXT-color); +} + .cstyle.blue { --VARIABLE-BOX-color: var(--INTERNAL-BOX-BLUE-color); --VARIABLE-BOX-TEXT-color: var(--INTERNAL-BOX-BLUE-TEXT-color);