Showcase
-
+
...
@@ -116,6 +116,9 @@ export class AppComponentsColor {
The slot more is optional, moreover, the "more" action itself could be turned off.
+
+ The slot custom-label is optional and can be used to display another label than Custom when user selects a custom color.
+
Attributes
This component offers the following options which could be set using attributes:
@@ -202,6 +205,21 @@ export class AppComponentsColor {
DEFAULT_PALETTE
+
+
+ label
+ |
+
+ label
+ |
+ Display a label for the description of the selected color |
+
+ boolean
+ |
+
+ true
+ |
+
Palette
@@ -223,19 +241,20 @@ export class AppComponentsColor {
The default palette is the following:
- export const DEFAULT_PALETTE: DeckdeckgoPalette[] = [{'\n'} {{'\n'} color: {{'\n'} hex: '#FF6900',{'\n'} rgb:
- '255,105,0'{'\n'} },{'\n'} alt: 'Orange'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#FCB900',
- {'\n'} rgb: '252,185,0'{'\n'} },{'\n'} alt: 'Yellow'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex:
- '#7BDCB5',{'\n'} rgb: '123,220,181'{'\n'} },{'\n'} alt: 'Light green'{'\n'} },{'\n'} {{'\n'} color:
- {{'\n'} hex: '#00D084',{'\n'} rgb: '0,208,132'{'\n'} },{'\n'} alt: 'Green'{'\n'} },{'\n'} {
- {'\n'} color: {{'\n'} hex: '#8ED1FC',{'\n'} rgb: '142,209,252'{'\n'} },{'\n'} alt: 'Light blue'{'\n'}{' '}
- },{'\n'} {{'\n'} color: {{'\n'} hex: '#0693E3',{'\n'} rgb: '6,147,227'{'\n'} },{'\n'} alt:
- 'Blue'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#ABB8C3',{'\n'} rgb: '171,184,195'{'\n'} },
- {'\n'} alt: 'Grey'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#EB144C',{'\n'} rgb: '235,20,76'{'\n'}{' '}
- },{'\n'} alt: 'Red'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#F78DA7',{'\n'} rgb:
- '247,141,167'{'\n'} },{'\n'} alt: 'Pink'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#9900EF',
- {'\n'} rgb: '153,0,239'{'\n'} },{'\n'} alt: 'Violet'{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex:
- '#000000',{'\n'} rgb: '0,0,0'{'\n'} },{'\n'} alt: 'Black'{'\n'} }{'\n'}];
+ export const DEFAULT_PALETTE: DeckdeckgoPalette[] = [{'\n'} {{'\n'} color: {{'\n'} hex: '#8ED1FC',{'\n'} rgb:
+ '142,209,252',{'\n'} },{'\n'} alt: 'Light blue',{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex:
+ '#0693E3',{'\n'} rgb: '6,147,227',{'\n'} },{'\n'} alt: 'Blue',{'\n'} },{'\n'} {{'\n'} color: {
+ {'\n'} hex: '#7BDCB5',{'\n'} rgb: '123,220,181',{'\n'} },{'\n'} alt: 'Light green',{'\n'} },{'\n'} {
+ {'\n'} color: {{'\n'} hex: '#00D084',{'\n'} rgb: '0,208,132',{'\n'} },{'\n'} alt: 'Green',{'\n'} },
+ {'\n'} {{'\n'} color: {{'\n'} hex: '#FCB900',{'\n'} rgb: '252,185,0',{'\n'} },{'\n'} alt: 'Yellow',
+ {'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#FF6900',{'\n'} rgb: '255,105,0',{'\n'} },{'\n'} alt:
+ 'Orange',{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#F78DA7',{'\n'} rgb: '247,141,167',{'\n'}{' '}
+ },{'\n'} alt: 'Pink',{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#EB144C',{'\n'} rgb:
+ '235,20,76',{'\n'} },{'\n'} alt: 'Red',{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#ffffff',
+ {'\n'} rgb: '255,255,255',{'\n'} },{'\n'} alt: 'White',{'\n'} display: {{'\n'} borderColor: '#ddd',{'\n'}{' '}
+ boxShadowColor: '221,221,221',{'\n'} },{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#ABB8C3',{'\n'} rgb:
+ '171,184,195',{'\n'} },{'\n'} alt: 'Grey',{'\n'} },{'\n'} {{'\n'} color: {{'\n'} hex: '#000000',
+ {'\n'} rgb: '0,0,0',{'\n'} },{'\n'} alt: 'Black',{'\n'} },{'\n'}];
Theming
@@ -309,6 +328,36 @@ export class AppComponentsColor {
transparent |
The background of the more button |
+
+ | --deckgo-color-label-margin |
+ 0 |
+ Margin of the color description |
+
+
+ | --deckgo-color-label-padding |
+ 12px 8px |
+ Padding of the color description |
+
+
+ | --deckgo-color-label-font-size |
+ 12px |
+ Font size of the color description |
+
+
+ | --deckgo-color-label-min-height |
+ 15px |
+ Minimal height of the color description |
+
+
+ | --deckgo-color-label-text-align |
+ center |
+ Text alignment of the color description |
+
+
+ | --deckgo-color-label-color-font-weight |
+ 300 |
+ Font weight of the hexadecimal value of the color description |
+
Events
diff --git a/studio/package-lock.json b/studio/package-lock.json
index 608613488..c4cf74dae 100644
--- a/studio/package-lock.json
+++ b/studio/package-lock.json
@@ -55,9 +55,9 @@
}
},
"@deckdeckgo/color": {
- "version": "1.1.1",
- "resolved": "https://registry.npmjs.org/@deckdeckgo/color/-/color-1.1.1.tgz",
- "integrity": "sha512-NMJ7ElCLcgQB8psEt42H2mguF3shPjnz3mT7zUidBUkrm+WJHSKn3Nn7IK7+qW9tzmkfa3iDMf053B+7CjDpog==",
+ "version": "2.0.0",
+ "resolved": "https://registry.npmjs.org/@deckdeckgo/color/-/color-2.0.0.tgz",
+ "integrity": "sha512-Jl9HN2Iqubag/yEkcYGYBfeDGYmQ7g37+nP/ei/AUnD1e1mdcU92hPcY/kFaVMCWyOuuVIMqFFaQSuyxDMN1Sw==",
"requires": {
"@deckdeckgo/utils": "^1.1.0"
}
@@ -105,11 +105,11 @@
}
},
"@deckdeckgo/inline-editor": {
- "version": "1.2.1",
- "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.2.1.tgz",
- "integrity": "sha512-t4xF/6htg1HG1ShwQ++rtB17aNOjMp4AEzSXCsg1XvkBX8CE3Ts8Ej2aO2uywoIw2jMYaLJ3aUxUMBqWVonasw==",
+ "version": "1.3.1",
+ "resolved": "https://registry.npmjs.org/@deckdeckgo/inline-editor/-/inline-editor-1.3.1.tgz",
+ "integrity": "sha512-l45A9X19BPK0eXMRJxOAcAhgnN8O7XKi7qyYnyautoeFWR8CLLfRmAvGI5ZFJOYZXX52+SVBvky+B6PBzwP4xw==",
"requires": {
- "@deckdeckgo/color": "^1.1.0",
+ "@deckdeckgo/color": "^2.0.0",
"@deckdeckgo/utils": "^1.1.0"
}
},
diff --git a/studio/package.json b/studio/package.json
index 9c87289b9..004e195b9 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -17,13 +17,13 @@
},
"dependencies": {
"@deckdeckgo/charts": "^1.0.2",
- "@deckdeckgo/color": "^1.1.1",
+ "@deckdeckgo/color": "^2.0.0",
"@deckdeckgo/core": "^1.0.2",
"@deckdeckgo/deck-utils": "^2.3.0",
"@deckdeckgo/demo": "^1.0.4",
"@deckdeckgo/drag-resize-rotate": "^1.0.2",
"@deckdeckgo/highlight-code": "^1.0.5",
- "@deckdeckgo/inline-editor": "^1.2.1",
+ "@deckdeckgo/inline-editor": "^1.3.1",
"@deckdeckgo/lazy-img": "^1.0.1",
"@deckdeckgo/math": "^1.0.1",
"@deckdeckgo/qrcode": "^1.0.1",
diff --git a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
index c865e35e2..b3af38544 100644
--- a/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
+++ b/studio/src/app/components/editor/color/app-color-chart/app-color-chart.tsx
@@ -11,11 +11,11 @@ enum ApplyColorType {
STROKE,
TEXT,
AXIS,
- GRID
+ GRID,
}
@Component({
- tag: 'app-color-chart'
+ tag: 'app-color-chart',
})
export class AppColorDeckSlide {
@Element() el: HTMLElement;
@@ -207,7 +207,9 @@ export class AppColorDeckSlide {
,
- Opacity
+
+ Opacity {this.colorOpacity}%
+
,
@@ -227,7 +229,7 @@ export class AppColorDeckSlide {
onColorChange={($event: CustomEvent) => this.selectColor($event)}
color-rgb={this.color}>
-
+ ,
];
}
@@ -235,7 +237,7 @@ export class AppColorDeckSlide {
const options = [
Fill,
Stroke,
- Text
+ Text,
];
if (this.chartType != SlideChartType.PIE) {
diff --git a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx
index 30ef99021..fc3ae859e 100644
--- a/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx
+++ b/studio/src/app/components/editor/color/app-color-code/app-color-code.tsx
@@ -11,12 +11,12 @@ enum CodeColorType {
KEYWORD,
FUNCTION,
REGEX,
- LINE_NUMBERS
+ LINE_NUMBERS,
}
@Component({
tag: 'app-color-code',
- styleUrl: 'app-color-code.scss'
+ styleUrl: 'app-color-code.scss',
})
export class AppColorCode {
@Element() el: HTMLElement;
@@ -323,7 +323,9 @@ export class AppColorCode {
- Opacity
+
+ Opacity {this.codeColorOpacity}%
+
@@ -370,7 +372,9 @@ export class AppColorCode {
- Opacity
+
+ Opacity {this.highlightColorOpacity}%
+
@@ -393,7 +397,7 @@ export class AppColorCode {
-
+ ,
];
}
}
diff --git a/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx b/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx
index ad293212b..41a6119bc 100644
--- a/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx
+++ b/studio/src/app/components/editor/color/app-color-qrcode/app-color-qrcode.tsx
@@ -5,11 +5,11 @@ import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
enum ApplyColorType {
QR_CODE,
- BACKGROUND
+ BACKGROUND,
}
@Component({
- tag: 'app-color-qrcode'
+ tag: 'app-color-qrcode',
})
export class AppColorQRCode {
@Element() el: HTMLElement;
@@ -158,7 +158,9 @@ export class AppColorQRCode {
- Opacity
+
+ Opacity {this.colorOpacity}%
+
this.resetColor()} fill="outline" class="delete">
{this.resetLabelContent()}
-
+ ,
];
}
diff --git a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
index 9d6fe9640..bc0a52349 100644
--- a/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
+++ b/studio/src/app/components/editor/color/app-color-sides/app-color-sides.tsx
@@ -5,11 +5,11 @@ import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
enum ApplyColorType {
TEXT,
- BACKGROUND
+ BACKGROUND,
}
@Component({
- tag: 'app-color-sides'
+ tag: 'app-color-sides',
})
export class AppColorSides {
@Element() el: HTMLElement;
@@ -177,7 +177,9 @@ export class AppColorSides {
- Opacity
+
+ Opacity {this.colorOpacity}%
+
this.resetColor()} fill="outline" class="delete">
{this.resetLabelContent()}
-
+ ,
];
}
diff --git a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx
index 824d1196c..dd5f5a0ba 100644
--- a/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx
+++ b/studio/src/app/components/editor/color/app-color-text-background/app-color-text-background.tsx
@@ -5,11 +5,11 @@ import {ColorUtils, InitStyleColor} from '../../../../utils/editor/color.utils';
enum ApplyColorType {
TEXT,
- BACKGROUND
+ BACKGROUND,
}
@Component({
- tag: 'app-color-text-background'
+ tag: 'app-color-text-background',
})
export class AppColorTextBackground {
@Element() el: HTMLElement;
@@ -193,7 +193,9 @@ export class AppColorTextBackground {
- Opacity
+
+ Opacity {this.colorOpacity}%
+
this.resetColor()} fill="outline" class="delete">
{this.resetLabelContent()}
-
+ ,
];
}
diff --git a/studio/src/app/popovers/editor/app-color/app-color.scss b/studio/src/app/popovers/editor/app-color/app-color.scss
index 20c393a88..3bac06535 100644
--- a/studio/src/app/popovers/editor/app-color/app-color.scss
+++ b/studio/src/app/popovers/editor/app-color/app-color.scss
@@ -3,12 +3,18 @@ app-color {
@import "../../../../global/theme/editor/editor-popover";
ion-icon.more {
- font-size: 1.4rem;
+ font-size: 1rem;
padding-top: 2px;
- color: var(--ion-color-medium);
+ color: black;
}
ion-item.item-opacity {
--padding-start: 8px;
}
+
+ ion-item-divider {
+ small {
+ font-size: var(--font-size-very-small);
+ }
+ }
}
diff --git a/webcomponents/color/CHANGELOG.md b/webcomponents/color/CHANGELOG.md
index 25a079ffb..354b585f5 100644
--- a/webcomponents/color/CHANGELOG.md
+++ b/webcomponents/color/CHANGELOG.md
@@ -1,6 +1,16 @@
+# 2.0.0 (2020-05-15)
+
+### Breaking
+
+- add color "white" and remove "purple"
+
+### Features
+
+- display the color's name description (can be optionally be set as hidden)
+
# 1.1.1 (2020-05-11)
-### Feat
+### Features
- update Stencil for Gatsby build
diff --git a/webcomponents/color/package-lock.json b/webcomponents/color/package-lock.json
index 19f137a11..f95d90b5a 100644
--- a/webcomponents/color/package-lock.json
+++ b/webcomponents/color/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@deckdeckgo/color",
- "version": "1.1.1",
+ "version": "2.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/webcomponents/color/package.json b/webcomponents/color/package.json
index ac9fc1e90..77df725ff 100644
--- a/webcomponents/color/package.json
+++ b/webcomponents/color/package.json
@@ -1,6 +1,6 @@
{
"name": "@deckdeckgo/color",
- "version": "1.1.1",
+ "version": "2.0.0",
"description": "A color picker developed with Web Components",
"main": "dist/index.js",
"module": "dist/index.mjs",
@@ -16,7 +16,7 @@
"LICENSE"
],
"scripts": {
- "build": "stencil build --docs",
+ "build": "stencil build",
"start": "stencil build --dev --watch --serve",
"test": "stencil test --spec --e2e",
"test.watch": "stencil test --spec --e2e --watchAll",
diff --git a/webcomponents/color/src/components.d.ts b/webcomponents/color/src/components.d.ts
index 93fdbdaaa..0574bb3a7 100644
--- a/webcomponents/color/src/components.d.ts
+++ b/webcomponents/color/src/components.d.ts
@@ -10,10 +10,17 @@ export namespace Components {
interface DeckgoColor {
"colorHex": string;
"colorRgb": string;
+ "label": boolean;
"more": boolean;
"moreAlt": string;
"palette": DeckdeckgoPalette[];
}
+ interface DeckgoColorLabel {
+ "colorHex": string;
+ "colorLabel": string;
+ "colorRgb": string;
+ "customColorRgb": string;
+ }
}
declare global {
interface HTMLDeckgoColorElement extends Components.DeckgoColor, HTMLStencilElement {
@@ -22,21 +29,36 @@ declare global {
prototype: HTMLDeckgoColorElement;
new (): HTMLDeckgoColorElement;
};
+ interface HTMLDeckgoColorLabelElement extends Components.DeckgoColorLabel, HTMLStencilElement {
+ }
+ var HTMLDeckgoColorLabelElement: {
+ prototype: HTMLDeckgoColorLabelElement;
+ new (): HTMLDeckgoColorLabelElement;
+ };
interface HTMLElementTagNameMap {
"deckgo-color": HTMLDeckgoColorElement;
+ "deckgo-color-label": HTMLDeckgoColorLabelElement;
}
}
declare namespace LocalJSX {
interface DeckgoColor {
"colorHex"?: string;
"colorRgb"?: string;
+ "label"?: boolean;
"more"?: boolean;
"moreAlt"?: string;
"onColorChange"?: (event: CustomEvent) => void;
"palette"?: DeckdeckgoPalette[];
}
+ interface DeckgoColorLabel {
+ "colorHex"?: string;
+ "colorLabel"?: string;
+ "colorRgb"?: string;
+ "customColorRgb"?: string;
+ }
interface IntrinsicElements {
"deckgo-color": DeckgoColor;
+ "deckgo-color-label": DeckgoColorLabel;
}
}
export { LocalJSX as JSX };
@@ -44,6 +66,7 @@ declare module "@stencil/core" {
export namespace JSX {
interface IntrinsicElements {
"deckgo-color": LocalJSX.DeckgoColor & JSXBase.HTMLAttributes;
+ "deckgo-color-label": LocalJSX.DeckgoColorLabel & JSXBase.HTMLAttributes;
}
}
}
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.scss b/webcomponents/color/src/components/color/deckdeckgo-color.scss
index 5f34e4929..668224472 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.scss
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.scss
@@ -22,22 +22,22 @@ div.color-container {
padding: 0;
outline: var(--deckgo-button-outline, none);
- border: var(--deckgo-button-border, none);
}
button {
cursor: pointer;
+ border: 1px solid var(--deckdeckgo-palette-border-color, var(--deckdeckgo-palette-color-hex));
border-radius: var(--deckgo-button-border-radius, 50%);
background: var(--deckdeckgo-palette-color-hex);
&.selected {
- box-shadow: 0 0 8px 4px rgba(var(--deckdeckgo-palette-color-rgb), 0.4);
+ box-shadow: 0 0 8px 4px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4);
}
&:not(.selected):hover {
- box-shadow: 0 0 8px 2px rgba(var(--deckdeckgo-palette-color-rgb), 0.4);
+ box-shadow: 0 0 8px 2px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4);
}
}
@@ -65,6 +65,10 @@ div.color-container {
outline: var(--deckgo-button-more-outline, none);
border: var(--deckgo-button-more-border, none);
+ &.selected {
+ border: 1px solid var(--deckdeckgo-palette-color-hex, var(--deckgo-button-more-border));
+ }
+
background: var(--deckgo-button-more-background, transparent);
}
diff --git a/webcomponents/color/src/components/color/deckdeckgo-color.tsx b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
index 4d0762a31..08b5c693e 100644
--- a/webcomponents/color/src/components/color/deckdeckgo-color.tsx
+++ b/webcomponents/color/src/components/color/deckdeckgo-color.tsx
@@ -7,7 +7,7 @@ import {DeckdeckgoPalette, DeckdeckgoPaletteColor, DEFAULT_PALETTE} from '../../
@Component({
tag: 'deckgo-color',
styleUrl: 'deckdeckgo-color.scss',
- shadow: true
+ shadow: true,
})
export class DeckdeckgoColor {
@Element() el: HTMLElement;
@@ -20,6 +20,8 @@ export class DeckdeckgoColor {
@Prop() colorHex: string;
@Prop() colorRgb: string;
+ @Prop() label: boolean = true;
+
@State()
private selectedColorHex: string;
@@ -32,6 +34,9 @@ export class DeckdeckgoColor {
@State()
private selectedCustomColorRgb: string;
+ @State()
+ private selectedColorLabel: string;
+
@Event()
colorChange: EventEmitter;
@@ -40,6 +45,7 @@ export class DeckdeckgoColor {
constructor() {
this.debounceInitSelectedColorPalette = debounce(async () => {
this.selectedColorPalette = await this.initSelectedColorPalette();
+ await this.initSelectedColorPaletteAlt();
this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
}, 150);
@@ -50,6 +56,7 @@ export class DeckdeckgoColor {
this.selectedColorRgb = this.colorRgb ? this.colorRgb : await this.hexToRgb(this.colorHex);
this.selectedColorPalette = await this.initSelectedColorPalette();
+ await this.initSelectedColorPaletteAlt();
if (!this.selectedColorPalette) {
this.selectedCustomColorRgb = this.selectedColorRgb;
@@ -91,7 +98,7 @@ export class DeckdeckgoColor {
}
private pickColor(paletteColor: DeckdeckgoPalette): Promise {
- return new Promise((resolve) => {
+ return new Promise(async (resolve) => {
if (!this.palette || this.palette.length <= 0) {
resolve();
return;
@@ -104,6 +111,8 @@ export class DeckdeckgoColor {
this.selectedColorPalette = true;
+ await this.initSelectedColorPaletteAlt();
+
this.selectedCustomColorRgb = undefined;
resolve();
@@ -151,7 +160,7 @@ export class DeckdeckgoColor {
const color: DeckdeckgoPaletteColor = {
hex: selectedColor,
- rgb: rgb
+ rgb: rgb,
};
this.applyColorHexChange(selectedColor, rgb);
@@ -212,6 +221,19 @@ export class DeckdeckgoColor {
});
}
+ private async initSelectedColorPaletteAlt(): Promise {
+ if (!this.palette || this.palette.length <= 0) {
+ this.selectedColorLabel = undefined;
+ return undefined;
+ }
+
+ const palette: DeckdeckgoPalette = this.palette.find((element: DeckdeckgoPalette) => {
+ return this.isHexColorSelected(element) || this.isRgbColorSelected(element);
+ });
+
+ this.selectedColorLabel = palette ? palette.alt : undefined;
+ }
+
render() {
return (
@@ -219,6 +241,7 @@ export class DeckdeckgoColor {
{this.renderPalette()}
{this.renderMore()}
+ {this.renderLabel()}
);
}
@@ -228,9 +251,14 @@ export class DeckdeckgoColor {
return this.palette.map((element: DeckdeckgoPalette) => {
const style = {
'--deckdeckgo-palette-color-hex': `${element.color.hex}`,
- '--deckdeckgo-palette-color-rgb': `${element.color.rgb}`
+ '--deckdeckgo-palette-color-rgb': `${element.color.rgb}`,
};
+ if (element.display) {
+ style['--deckdeckgo-palette-border-color'] = element.display.borderColor;
+ style['--deckdeckgo-palette-box-shadow-color'] = element.display.boxShadowColor;
+ }
+
return (