feat(tokens): add --cc-color-border-neutral and use it when relevant

CleverCloud · May 15, 2023 · 8021678 · 8021678
1 parent 03aed66
commit 8021678
Show file tree

Hide file tree

Showing 16 changed files with 22 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;