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

…relevant
CleverCloud · May 15, 2023 · 03aed66 · 03aed66
1 parent 816d0db
commit 03aed66
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 5 deletions.
diff --git a/src/components/cc-input-number/cc-input-number.js b/src/components/cc-input-number/cc-input-number.js
@@ -397,7 +397,7 @@ export class CcInputNumber extends LitElement {
           bottom: 0;
           left: 0;
           overflow: hidden;
-          border: 1px solid #aaa;
+          border: 1px solid var(--cc-color-border-neutral-strong, #aaa);
           background: var(--cc-color-bg-default, #fff);
           border-radius: var(--cc-border-radius-default, 0.25em);
           box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);

diff --git a/src/components/cc-input-text/cc-input-text.js b/src/components/cc-input-text/cc-input-text.js
@@ -549,7 +549,7 @@ export class CcInputText extends LitElement {
           bottom: 0;
           left: 0;
           overflow: hidden;
-          border: 1px solid #aaa;
+          border: 1px solid var(--cc-color-border-neutral-strong, #aaa);
           background: var(--cc-color-bg-default, #fff);
           border-radius: var(--cc-border-radius-default, 0.25em);
           box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);

diff --git a/src/components/cc-select/cc-select.js b/src/components/cc-select/cc-select.js
@@ -229,7 +229,7 @@ export class CcSelect extends LitElement {
           height: 2em;
           box-sizing: border-box;
           padding: 0 3em 0 0.5em;
-          border: 1px solid #aaa;
+          border: 1px solid var(--cc-color-border-neutral-strong, #aaa);
           background-color: var(--cc-color-bg-default, #fff);
           border-radius: var(--cc-border-radius-default, 0.25em);
           grid-area: input;

diff --git a/src/components/cc-tile-consumption/cc-tile-consumption.js b/src/components/cc-tile-consumption/cc-tile-consumption.js
@@ -87,7 +87,7 @@ export class CcTileConsumption extends LitElement {
 
         .separator {
           flex: 1 1 0;
-          border-top: 1px dotted #8c8c8c;
+          border-top: 1px dotted var(--cc-color-border-neutral-strong, #8c8c8c);
           margin: 0 10px;
         }
 

diff --git a/src/components/cc-tile-scalability/cc-tile-scalability.js b/src/components/cc-tile-scalability/cc-tile-scalability.js
@@ -117,7 +117,7 @@ export class CcTileScalability extends LitElement {
         .separator {
           width: 1.5em;
           flex: 1 1 0;
-          border-top: 1px dashed #8c8c8c;
+          border-top: 1px dashed var(--cc-color-border-neutral-strong, #8c8c8c);
         }
 
         [title] {

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 contrasted borders.
+  * For instance: click targets like input fields */
+  --cc-color-border-neutral-strong: var(--color-grey-50);
+
   /* Usage: for primary border */
   --cc-color-border-primary-weak: var(--color-blue-20);