From 0d41caf199c833ac1d6b9384c0e80c958eceb7a4 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sun, 18 Feb 2024 11:54:20 +0300 Subject: [PATCH] Semantic tokens for textfield --- components/lib/theme/aura/index.js | 34 +++++++++++++- components/lib/theme/aura/inputtext/index.js | 49 +++++++------------- components/lib/theme/aura/textarea/index.js | 48 +++++++------------ 3 files changed, 64 insertions(+), 67 deletions(-) diff --git a/components/lib/theme/aura/index.js b/components/lib/theme/aura/index.js index a9ef7d420..95c1229b1 100644 --- a/components/lib/theme/aura/index.js +++ b/components/lib/theme/aura/index.js @@ -144,7 +144,22 @@ export default { textColor: '{primary.700}', textColorFocus: '{primary.800}' }, - maskBackground: 'rgba(0,0,0,0.4)' + maskBackground: 'rgba(0,0,0,0.4)', + textfield: { + background: '{surface.0}', + backgroundDisabled: '{surface.200}', + backgroundFilled: '{surface.50}', + backgroundFilledHover: '{surface.50}', + backgroundFilledFocus: '{surface.0}', + borderColor: '{surface.300}', + borderColorHover: '{surface.400}', + borderColorFocus: '{primary.color}', + borderColorInvalid: '{red.400}', + textColor: '{surface.700}', + textColorDisabled: '{surface.500}', + placeholderTextColor: '{surface.500}', + boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + } }, dark: { surface: { @@ -173,7 +188,22 @@ export default { textColor: 'rgba(255,255,255,.87)', textColorFocus: 'rgba(255,255,255,.87)' }, - maskBackground: 'rgba(0,0,0,0.4)' + maskBackground: 'rgba(0,0,0,0.4)', + textfield: { + background: '{surface.950}', + backgroundDisabled: '{surface.700}', + backgroundFilled: '{surface.800}', + backgroundFilledHover: '{surface.800}', + backgroundFilledFocus: '{surface.950}', + borderColor: '{surface.700}', + borderColorHover: '{surface.600}', + borderColorFocus: '{primary.color}', + borderColorInvalid: '{red.300}', + textColor: '{surface.0}', + textColorDisabled: '{surface.400}', + placeholderTextColor: '{surface.400}', + boxShadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + } } } }, diff --git a/components/lib/theme/aura/inputtext/index.js b/components/lib/theme/aura/inputtext/index.js index 7fc7eafcb..f39380642 100644 --- a/components/lib/theme/aura/inputtext/index.js +++ b/components/lib/theme/aura/inputtext/index.js @@ -1,37 +1,20 @@ export default { variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - backgroundDisabled: '{surface.200}', - backgroundFilled: '{surface.50}', - backgroundFilledHover: '{surface.50}', - backgroundFilledFocus: '{surface.0}', - borderColor: '{surface.300}', - borderColorHover: '{surface.400}', - borderColorFocus: '{primary.color}', - borderColorInvalid: '{red.400}', - textColor: '{surface.700}', - textColorDisabled: '{surface.500}', - placeholderTextColor: '{surface.500}' - } - }, - dark: { - root: { - background: '{surface.950}', - backgroundDisabled: '{surface.700}', - backgroundFilled: '{surface.800}', - backgroundFilledHover: '{surface.800}', - backgroundFilledFocus: '{surface.950}', - borderColor: '{surface.700}', - borderColorHover: '{surface.600}', - borderColorFocus: '{primary.color}', - borderColorInvalid: '{red.300}', - textColor: '{surface.0}', - textColorDisabled: '{surface.400}', - placeholderTextColor: '{surface.400}' - } + common: { + root: { + background: '{textfield.background}', + backgroundDisabled: '{textfield.background.disabled}', + backgroundFilled: '{textfield.background.filled}', + backgroundFilledHover: '{textfield.background.filled.hover}', + backgroundFilledFocus: '{textfield.background.filled.focus}', + borderColor: '{textfield.border.color}', + borderColorHover: '{textfield.border.color.hover}', + borderColorFocus: '{textfield.border.color.focus}', + borderColorInvalid: '{textfield.border.color.invalid}', + textColor: '{textfield.text.color}', + textColorDisabled: '{textfield.text.disabled}', + placeholderTextColor: '{textfield.placeholder.text.color}', + boxShadow: '{textfield.box.shadow}' } } }, @@ -48,7 +31,7 @@ export default { appearance: none; border-radius: var(--p-rounded-base); outline-color: transparent; - box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05); + box-shadow: var(--p-inputtext-box-shadow); } .p-inputtext:enabled:hover { diff --git a/components/lib/theme/aura/textarea/index.js b/components/lib/theme/aura/textarea/index.js index a42a69df3..f51f5d9b2 100644 --- a/components/lib/theme/aura/textarea/index.js +++ b/components/lib/theme/aura/textarea/index.js @@ -1,37 +1,20 @@ export default { variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - backgroundDisabled: '{surface.200}', - backgroundFilled: '{surface.50}', - backgroundFilledHover: '{surface.50}', - backgroundFilledFocus: '{surface.0}', - borderColor: '{surface.300}', - borderColorHover: '{surface.400}', - borderColorFocus: '{primary.color}', - borderColorInvalid: '{red.400}', - textColor: '{surface.700}', - textColorDisabled: '{surface.500}', - placeholderTextColor: '{surface.500}' - } - }, - dark: { - root: { - background: '{surface.950}', - backgroundDisabled: '{surface.700}', - backgroundFilled: '{surface.800}', - backgroundFilledHover: '{surface.800}', - backgroundFilledFocus: '{surface.950}', - borderColor: '{surface.700}', - borderColorHover: '{surface.600}', - borderColorFocus: '{primary.color}', - borderColorInvalid: '{red.300}', - textColor: '{surface.0}', - textColorDisabled: '{surface.400}', - placeholderTextColor: '{surface.400}' - } + common: { + root: { + background: '{textfield.background}', + backgroundDisabled: '{textfield.background.disabled}', + backgroundFilled: '{textfield.background.filled}', + backgroundFilledHover: '{textfield.background.filled.hover}', + backgroundFilledFocus: '{textfield.background.filled.focus}', + borderColor: '{textfield.border.color}', + borderColorHover: '{textfield.border.color.hover}', + borderColorFocus: '{textfield.border.color.focus}', + borderColorInvalid: '{textfield.border.color.invalid}', + textColor: '{textfield.text.color}', + textColorDisabled: '{textfield.text.disabled}', + placeholderTextColor: '{textfield.placeholder.text.color}', + boxShadow: '{textfield.box.shadow}' } } }, @@ -48,6 +31,7 @@ export default { appearance: none; border-radius: var(--p-rounded-base); outline-color: transparent; + box-shadow: var(--p-textarea-box-shadow); } .p-inputtextarea:enabled:hover {