apply new style

ubie-oss · Jun 28, 2024 · e6d5da7 · e6d5da7
1 parent 7f00b22
commit e6d5da7
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 17 deletions.
diff --git a/src/components/Input/Input.module.css b/src/components/Input/Input.module.css
@@ -3,39 +3,43 @@
   width: 100%;
   padding: var(--size-spacing-md) var(--size-spacing-sm) 0.875rem;
   font-size: var(--text-body-md-narrow-size);
-  font-weight: bold;
   line-height: var(--text-body-md-narrow-line);
   color: var(--color-text-main);
   text-align: inherit;
   appearance: none;
   caret-color: var(--color-primary);
-  background-color: var(--color-background-gray);
-  border: none;
+  background-color: var(--color-ubie-white);
+  border: 1px solid var(--color-border);
   border-bottom: 2px solid var(--color-border);
   border-radius: 8px 8px 0 0;
 }
 
 .input.isInvalid,
 .input:user-invalid {
-  background: var(--color-background-accent-darken);
+  background: var(--color-background-alert);
   border-bottom-color: var(--color-alert-darken);
 }
 
 @supports not (selector(:user-invalid)) {
   .input:invalid {
-    background: var(--color-background-accent-darken);
+    background: var(--color-background-alert);
     border-bottom-color: var(--color-alert-darken);
   }
 }
 
 .input:disabled {
   color: var(--color-text-disabled);
+  background-color: var(--color-background-gray);
 }
 
 .input::placeholder {
   color: var(--color-text-placeholder);
 }
 
+.input:disabled::placeholder {
+    color: var(--color-text-disabled);
+}
+
 .input:focus {
   border-bottom-color: var(--color-primary);
   outline: none;

diff --git a/src/components/TextArea/TextArea.module.css b/src/components/TextArea/TextArea.module.css
@@ -3,28 +3,45 @@
   width: 100%;
   padding: var(--size-spacing-md) var(--size-spacing-sm) 0.875rem;
   font-size: var(--text-body-md-narrow-size);
-  font-weight: bold;
   line-height: var(--text-body-md-narrow-line);
   color: var(--color-text-main);
   text-align: inherit;
   appearance: none;
   caret-color: var(--color-primary);
-  background-color: var(--color-background-gray);
-  border: none;
-  border-bottom: 2px solid var(--color-border);
+  background-color: var(--color-ubie-white);
+  border: 1px solid var(--color-border);
+  border-bottom-width: 2px;
   border-radius: 8px 8px 0 0;
 }
 
+.textArea:disabled {
+  color: var(--color-text-disabled);
+  background-color: var(--color-background-gray);
+}
+
 .textArea::placeholder {
   color: var(--color-text-placeholder);
 }
 
-.textArea:focus {
-  border-bottom: 2px solid var(--color-primary);
-  outline: none;
+
+.textArea:disabled::placeholder {
+  color: var(--color-text-disabled);
 }
 
-.textArea.isInvalid {
-  background: var(--color-background-accent-darken);
-  border-bottom: 2px solid var(--color-alert-darken);
+.textArea.isInvalid,
+.textArea:user-invalid{
+  background: var(--color-background-alert);
+  border-bottom-color: var(--color-alert-darken);
+}
+
+@supports not (selector(:user-invalid)) {
+  .textArea:invalid {
+    background: var(--color-background-alert);
+    border-bottom-color: var(--color-alert-darken);
+  }
+}
+
+.textArea:focus {
+  border-bottom-color: var(--color-primary);
+  outline: none;
 }
diff --git a/src/stories/Input.stories.tsx b/src/stories/Input.stories.tsx
@@ -109,7 +109,7 @@ export const Types: Story = {
 };
 
 export const Disabled: Story = {
-  render: () => <Input value="lorem ipsum" />,
+  render: () => <Input value="lorem ipsum" disabled />,
 };
 
 export const IsInvalid: Story = {
@@ -128,6 +128,10 @@ export const Required: Story = {
   },
 };
 
+export const Placeholder: Story = {
+  render: () => <Input placeholder="placeholder" disabled />,
+};
+
 export const CustomDataAttribute: Story = {
   args: {
     'data-test-id': 'input-custom-attribute',

diff --git a/src/stories/TextArea.stories.tsx b/src/stories/TextArea.stories.tsx
@@ -27,12 +27,18 @@ export const Disabled: Story = {
   },
 };
 
-export const IdInvalid: Story = {
+export const IsInvalid: Story = {
   render: () => {
     return <TextArea value={'wrong\nvalue'} isInvalid />;
   },
 };
 
+export const Placeholder: Story = {
+  render: () => {
+    return <TextArea placeholder={'place\nholder'} />;
+  },
+};
+
 export const CustomDataAttribute: Story = {
   args: {
     'data-test-id': 'textarea-custom-attribute',