feat(tokens): add --cc-color-border-neutral-disabled and use it whe…

…n relevant
CleverCloud · May 22, 2023 · 3034296 · 3034296
1 parent ce1449f
commit 3034296
Show file tree

Hide file tree

Showing 4 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
@@ -423,7 +423,7 @@ export class CcInputNumber extends LitElement {
         }
 
         :host([disabled]) .ring {
-          border-color: var(--cc-color-bg-neutral-disabled);
+          border-color: var(--cc-color-border-neutral-disabled, #777);
           background: var(--cc-color-bg-neutral-disabled);
         }
 
@@ -436,7 +436,7 @@ export class CcInputNumber extends LitElement {
         .skeleton .ring,
         .skeleton:hover .ring,
         .skeleton input:hover + .ring {
-          border-color: #eee;
+          border-color: var(--cc-color-border-neutral-disabled, #777);
           background-color: var(--cc-color-bg-neutral-disabled);
           cursor: progress;
         }

diff --git a/src/components/cc-input-text/cc-input-text.js b/src/components/cc-input-text/cc-input-text.js
@@ -575,7 +575,7 @@ export class CcInputText extends LitElement {
         }
 
         :host([disabled]) .ring {
-          border-color: #eee;
+          border-color: var(--cc-color-border-neutral-disabled, #eee);
           background: var(--cc-color-bg-neutral-disabled);
         }
 
@@ -588,7 +588,7 @@ export class CcInputText extends LitElement {
         .skeleton .ring,
         .skeleton:hover .ring,
         .skeleton .input:hover + .ring {
-          border-color: #eee;
+          border-color: var(--cc-color-border-neutral-disabled, #eee);
           background-color: var(--cc-color-bg-neutral-disabled);
           cursor: progress;
         }

diff --git a/src/components/cc-select/cc-select.js b/src/components/cc-select/cc-select.js
@@ -279,7 +279,7 @@ export class CcSelect extends LitElement {
         }
 
         select[disabled] {
-          border-color: var(--cc-color-bg-neutral-disabled);
+          border-color: var(--cc-color-border-neutral-disabled, #777);
           background: var(--cc-color-bg-neutral-disabled);
           color: var(--cc-color-text-weak);
           opacity: 1;

diff --git a/src/styles/default-theme.css b/src/styles/default-theme.css
@@ -223,6 +223,10 @@
   * For instance: block & card borders */
   --cc-color-border-neutral: var(--color-grey-30);
 
+  /* Usage: for disabled borders
+  * For instance: disabled input / select borders */
+  --cc-color-border-neutral-disabled: var(--color-grey-15);
+
   /* Usage: for contrasted borders.
   * For instance: click targets like input fields */
   --cc-color-border-neutral-strong: var(--color-grey-50);