From 8bdd3a6369ff4ea39efdaa647e88e8c62a82f07f Mon Sep 17 00:00:00 2001
From: skhamvon <sullivan.khamvongsa@ovhcloud.com>
Date: Wed, 14 Feb 2024 17:29:43 +0100
Subject: [PATCH] fix(textarea): change style to be like osds-input
---
.../common/theming/size/ods-theming-size.textarea.scss | 4 ++--
.../osds-textarea/styles/osds-textarea.color.scss | 3 ++-
.../osds-textarea/styles/osds-textarea.size.scss | 1 +
.../osds-textarea/styles/osds-textarea.typography.scss | 9 ++++++++-
packages/themes/blue-jeans/src/index.scss | 3 ++-
5 files changed, 15 insertions(+), 5 deletions(-)
diff --git a/packages/common/theming/size/ods-theming-size.textarea.scss b/packages/common/theming/size/ods-theming-size.textarea.scss
index 150f2c6333..5a41cc7763 100644
--- a/packages/common/theming/size/ods-theming-size.textarea.scss
+++ b/packages/common/theming/size/ods-theming-size.textarea.scss
@@ -4,13 +4,13 @@
@return (
padding: var(--ods-size-textarea-#{$size-name}-padding),
border-radius: var(--ods-size-textarea-#{$size-name}-border-radius),
+ border-width: var(--ods-size-textarea-#{$size-name}-border-width),
);
}
-
+
/// @access private
@function ods-get-textarea-component-size-definition() {
@return (
md: ods-get-textarea-size-properties(md),
);
}
-
\ No newline at end of file
diff --git a/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.color.scss b/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.color.scss
index 8eed8bdec9..82dee2617e 100644
--- a/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.color.scss
+++ b/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.color.scss
@@ -13,7 +13,8 @@
color: map_get($colors, color);
&::placeholder {
- color: map_get($colors, color);
+ opacity: 1;
+ color: ods-get-color-variable($intent-name: text, $hue: '500');
}
&:active,
diff --git a/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.size.scss b/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.size.scss
index 1fcf59b8ac..d0dda9d45a 100644
--- a/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.size.scss
+++ b/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.size.scss
@@ -9,6 +9,7 @@
:host {
@include osds-textarea-on-main-element {
+ border-width: ods-get-size-property($size-properties, border-width);
border-radius: ods-get-size-property($size-properties, border-radius);
padding: ods-get-size-property($size-properties, padding);
}
diff --git a/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.typography.scss b/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.typography.scss
index 5f5470d8f4..becb3aeed9 100644
--- a/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.typography.scss
+++ b/packages/components/src/textarea/src/components/osds-textarea/styles/osds-textarea.typography.scss
@@ -17,6 +17,13 @@
}
:host textarea::placeholder {
- font-style: italic;
+ $typography-properties: ods-get-typography-properties(body, '300');
+
+ line-height: ods-get-typography-property($typography-properties, line-height);
+ letter-spacing: ods-get-typography-property($typography-properties, letter-spacing);
+ font-family: ods-get-typography-property($typography-properties, font-family);
+ font-size: ods-get-typography-property($typography-properties, font-size);
+ font-weight: ods-get-typography-property($typography-properties, font-weight);
+ font-style: ods-get-typography-property($typography-properties, font-style);
}
}
diff --git a/packages/themes/blue-jeans/src/index.scss b/packages/themes/blue-jeans/src/index.scss
index f364232c52..9c23e8dd87 100644
--- a/packages/themes/blue-jeans/src/index.scss
+++ b/packages/themes/blue-jeans/src/index.scss
@@ -442,8 +442,9 @@
),
$textarea: (
md: (
+ border-width: var(--ods-size-inset-01),
+ border-radius: var(--ods-size-border-radius-01),
padding: var(--ods-size-inset-04),
- border-radius: var(--ods-size-03),
),
),
$tile: (