fix(form): input lines are now proper contrast

Signed-off-by: Jeremy Wilken <[email protected]>
clovercloudsolutions · Jun 23, 2021 · 6ce2e22 · 6ce2e22
1 parent 4d8ca3d
commit 6ce2e22
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 4 deletions.
diff --git a/packages/core/build/tokens.ts b/packages/core/build/tokens.ts
@@ -471,6 +471,7 @@ const aliases = {
       300: token('hsla(0, 0%, 0%, 0.6)'),
     },
     interaction: {
+      borderColor: token(color.construction[500]),
       background: {
         value: token(color.white),
         hover: token(color.blue[50]),

diff --git a/packages/core/src/checkbox/checkbox.element.scss b/packages/core/src/checkbox/checkbox.element.scss
@@ -9,7 +9,7 @@
   --check-color: #{$cds-global-typography-color-100};
   --background: #{$cds-alias-object-opacity-0};
   --border-radius: #{$cds-alias-object-border-radius-100};
-  --border: #{$cds-alias-object-border-width-100} solid #{$cds-alias-object-border-color};
+  --border: #{$cds-alias-object-border-width-100} solid #{$cds-alias-object-interaction-border-color};
 }
 
 .input {

diff --git a/packages/core/src/input/input.element.scss b/packages/core/src/input/input.element.scss
@@ -8,7 +8,7 @@
   --background-size: 0% 100%;
   --background-color: #{$cds-alias-object-opacity-0};
   --background: linear-gradient(180deg, var(--background-color) 95%, var(--border-color) 0) no-repeat;
-  --border-color: #{$cds-alias-object-border-color};
+  --border-color: #{$cds-alias-object-interaction-border-color};
   --border: 0;
   --border-bottom: #{$cds-alias-object-border-width-100} solid var(--border-color);
   --border-radius: 0;

diff --git a/packages/core/src/radio/radio.element.scss b/packages/core/src/radio/radio.element.scss
@@ -7,7 +7,7 @@
 :host {
   --width: #{$cds-global-space-7};
   --height: #{$cds-global-space-7};
-  --border: #{$cds-alias-object-border-width-100} solid #{$cds-alias-object-border-color};
+  --border: #{$cds-alias-object-border-width-100} solid #{$cds-alias-object-interaction-border-color};
   --fill-box-shadow: none;
 }
 

diff --git a/packages/core/src/textarea/textarea.element.scss b/packages/core/src/textarea/textarea.element.scss
@@ -6,7 +6,7 @@
 
 :host {
   --background: #{$cds-alias-object-container-background};
-  --border: #{$cds-alias-object-border-width-100} solid #{$cds-alias-object-border-color};
+  --border: #{$cds-alias-object-border-width-100} solid #{$cds-alias-object-interaction-border-color};
   --padding: #{$cds-global-space-5} #{$cds-global-space-6};
   --font-size: #{$cds-global-typography-font-size-3};
   --color: #{$cds-global-typography-color-500};