diff --git a/src/components/cc-article-card/cc-article-card.js b/src/components/cc-article-card/cc-article-card.js index 10f99e7f6..05b47e8e3 100644 --- a/src/components/cc-article-card/cc-article-card.js +++ b/src/components/cc-article-card/cc-article-card.js @@ -89,7 +89,7 @@ export class CcArticleCard extends LitElement { overflow: hidden; box-sizing: border-box; padding: 1em; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); gap: 1em; @@ -100,7 +100,7 @@ export class CcArticleCard extends LitElement { .image { display: block; height: 8em; - border-bottom: 1px solid #bcc2d1; + border-bottom: 1px solid var(--cc-color-border-neutral, #aaa); margin: -1em -1em 0; justify-self: stretch; } diff --git a/src/components/cc-article-list/cc-article-list.js b/src/components/cc-article-list/cc-article-list.js index a07235610..97ce46f31 100644 --- a/src/components/cc-article-list/cc-article-list.js +++ b/src/components/cc-article-list/cc-article-list.js @@ -78,7 +78,7 @@ export class CcArticleList extends LitElement { cc-error { padding: 1em; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); text-align: center; diff --git a/src/components/cc-block/cc-block.js b/src/components/cc-block/cc-block.js index 0fcd5702c..66e767d9f 100644 --- a/src/components/cc-block/cc-block.js +++ b/src/components/cc-block/cc-block.js @@ -129,7 +129,7 @@ export class CcBlock extends LitElement { display: grid; overflow: hidden; box-sizing: border-box; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); } diff --git a/src/components/cc-doc-card/cc-doc-card.js b/src/components/cc-doc-card/cc-doc-card.js index ffce699ac..76eacdf0f 100644 --- a/src/components/cc-doc-card/cc-doc-card.js +++ b/src/components/cc-doc-card/cc-doc-card.js @@ -84,7 +84,7 @@ export class CcDocCard extends LitElement { display: grid; box-sizing: border-box; padding: 1em; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); gap: 1em; diff --git a/src/components/cc-doc-list/cc-doc-list.js b/src/components/cc-doc-list/cc-doc-list.js index 0d9f288cb..1976c6fd0 100644 --- a/src/components/cc-doc-list/cc-doc-list.js +++ b/src/components/cc-doc-list/cc-doc-list.js @@ -77,7 +77,7 @@ export class CcDocList extends LitElement { cc-error { padding: 1em; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); text-align: center; diff --git a/src/components/cc-env-var-form/cc-env-var-form.js b/src/components/cc-env-var-form/cc-env-var-form.js index 9a39170d6..e629e5607 100644 --- a/src/components/cc-env-var-form/cc-env-var-form.js +++ b/src/components/cc-env-var-form/cc-env-var-form.js @@ -315,7 +315,7 @@ export class CcEnvVarForm extends LitElement { :host { display: block; padding: 0.5em 1em; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); } diff --git a/src/components/cc-env-var-linked-services/cc-env-var-linked-services.js b/src/components/cc-env-var-linked-services/cc-env-var-linked-services.js index 282914e7a..d97628c8c 100644 --- a/src/components/cc-env-var-linked-services/cc-env-var-linked-services.js +++ b/src/components/cc-env-var-linked-services/cc-env-var-linked-services.js @@ -153,7 +153,7 @@ export class CcEnvVarLinkedServices extends LitElement { .error { box-sizing: border-box; padding: 1em; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); } diff --git a/src/components/cc-error/cc-error.js b/src/components/cc-error/cc-error.js index dfc1757ee..76a99807f 100644 --- a/src/components/cc-error/cc-error.js +++ b/src/components/cc-error/cc-error.js @@ -77,7 +77,7 @@ export class CcError extends LitElement { align-items: center; justify-content: center; padding: 1em; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); box-shadow: 0 0 1em rgb(0 0 0 / 40%); diff --git a/src/components/cc-header-addon/cc-header-addon.js b/src/components/cc-header-addon/cc-header-addon.js index eaacd9764..d565dae94 100644 --- a/src/components/cc-header-addon/cc-header-addon.js +++ b/src/components/cc-header-addon/cc-header-addon.js @@ -130,7 +130,7 @@ export class CcHeaderAddon extends LitElement { display: block; overflow: hidden; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); } diff --git a/src/components/cc-header-app/cc-header-app.js b/src/components/cc-header-app/cc-header-app.js index 77ddc151b..b681b8f3b 100644 --- a/src/components/cc-header-app/cc-header-app.js +++ b/src/components/cc-header-app/cc-header-app.js @@ -326,7 +326,7 @@ export class CcHeaderApp extends LitElement { display: block; overflow: hidden; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); } diff --git a/src/components/cc-header-orga/cc-header-orga.js b/src/components/cc-header-orga/cc-header-orga.js index c82745e4d..ebfdb789c 100644 --- a/src/components/cc-header-orga/cc-header-orga.js +++ b/src/components/cc-header-orga/cc-header-orga.js @@ -102,7 +102,7 @@ export class CcHeaderOrga extends LitElement { display: block; overflow: hidden; padding: var(--cc-gap); - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); } diff --git a/src/components/cc-logsmap/cc-logsmap.js b/src/components/cc-logsmap/cc-logsmap.js index a74856690..425b11a81 100644 --- a/src/components/cc-logsmap/cc-logsmap.js +++ b/src/components/cc-logsmap/cc-logsmap.js @@ -208,7 +208,7 @@ export class CcLogsMap extends LitElement { overflow: hidden; width: 20em; height: 15em; - border: 1px solid #ccc; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); } diff --git a/src/components/cc-map/cc-map.js b/src/components/cc-map/cc-map.js index d4c8a1e5f..adcabde56 100644 --- a/src/components/cc-map/cc-map.js +++ b/src/components/cc-map/cc-map.js @@ -419,7 +419,7 @@ export class CcMap extends withResizeObserver(LitElement) { align-items: center; justify-content: center; padding: 1em; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); box-shadow: 0 0 1em rgb(0 0 0 / 40%); diff --git a/src/components/cc-zone-input/cc-zone-input.js b/src/components/cc-zone-input/cc-zone-input.js index 9bb992089..25fa91187 100644 --- a/src/components/cc-zone-input/cc-zone-input.js +++ b/src/components/cc-zone-input/cc-zone-input.js @@ -248,7 +248,7 @@ export class CcZoneInput extends withResizeObserver(LitElement) { display: flex; overflow: hidden; box-sizing: border-box; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); } @@ -262,7 +262,7 @@ export class CcZoneInput extends withResizeObserver(LitElement) { width: 100%; height: 100%; flex-basis: 0; - border-right: 1px solid #bcc2d1; + border-right: 1px solid var(--cc-color-border-neutral, #aaa); } :host([w-lt-600]) cc-map, diff --git a/src/styles/default-theme.css b/src/styles/default-theme.css index c09b21c67..8ddae5f13 100644 --- a/src/styles/default-theme.css +++ b/src/styles/default-theme.css @@ -219,6 +219,10 @@ /* Usage: for danger border */ --cc-color-border-danger-weak: var(--color-red-20); + /* Usage: for subtle decorative borders + * For instance: block & card borders */ + --cc-color-border-neutral: var(--color-grey-30); + /* Usage: for contrasted borders. * For instance: click targets like input fields */ --cc-color-border-neutral-strong: var(--color-grey-50); diff --git a/src/styles/info-tiles.js b/src/styles/info-tiles.js index b112d2aa2..110b85c0a 100644 --- a/src/styles/info-tiles.js +++ b/src/styles/info-tiles.js @@ -8,7 +8,7 @@ export const tileStyles = css` min-height: 9em; box-sizing: border-box; padding: 1em; - border: 1px solid #bcc2d1; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-default, #fff); border-radius: var(--cc-border-radius-default, 0.25em); grid-gap: 1em; @@ -48,7 +48,7 @@ export const instanceDetailsStyles = css` height: 1.65em; box-sizing: border-box; padding: 0 var(--bubble-r); - border: 1px solid #484848; + border: 1px solid var(--cc-color-border-neutral, #aaa); background-color: var(--cc-color-bg-neutral); border-radius: var(--cc-border-radius-default, 0.25em); font-weight: bold;