From a20948c218351e2a37b265af29e9723e19f132e0 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Sat, 4 May 2024 15:12:43 +0300 Subject: [PATCH] Refactored tokens of Misc --- components/lib/avatar/style/AvatarStyle.js | 2 +- .../style/ProgressSpinnerStyle.js | 10 +++--- .../lib/scrolltop/style/ScrollTopStyle.js | 27 +--------------- components/lib/themes/aura/avatar/index.js | 22 +++---------- components/lib/themes/aura/badge/index.js | 4 +-- components/lib/themes/aura/index.js | 4 +-- .../lib/themes/aura/metergroup/index.js | 13 ++------ .../lib/themes/aura/progressbar/index.js | 31 +++++-------------- .../lib/themes/aura/progressspinner/index.js | 16 +++++----- components/lib/themes/aura/scrolltop/index.js | 21 +------------ components/lib/themes/aura/terminal/index.js | 15 +++------ 11 files changed, 39 insertions(+), 126 deletions(-) diff --git a/components/lib/avatar/style/AvatarStyle.js b/components/lib/avatar/style/AvatarStyle.js index 93e7228df..d4677cb2e 100644 --- a/components/lib/avatar/style/AvatarStyle.js +++ b/components/lib/avatar/style/AvatarStyle.js @@ -63,7 +63,7 @@ const theme = ({ dt }) => ` } .p-avatar-group .p-avatar { - border: 2px solid ${dt('avatar.grouped.border.color')}; + border: 2px solid ${dt('avatar.group.border.color')}; } `; diff --git a/components/lib/progressspinner/style/ProgressSpinnerStyle.js b/components/lib/progressspinner/style/ProgressSpinnerStyle.js index b407a0402..f4e24f21b 100644 --- a/components/lib/progressspinner/style/ProgressSpinnerStyle.js +++ b/components/lib/progressspinner/style/ProgressSpinnerStyle.js @@ -31,7 +31,7 @@ const theme = ({ dt }) => ` .p-progressspinner-circle { stroke-dasharray: 89, 200; stroke-dashoffset: 0; - stroke: ${dt('progressspinner.color-1')}; + stroke: ${dt('progressspinner.color.1')}; animation: p-progressspinner-dash 1.5s ease-in-out infinite, p-progressspinner-color 6s ease-in-out infinite; stroke-linecap: round; } @@ -58,17 +58,17 @@ const theme = ({ dt }) => ` @keyframes p-progressspinner-color { 100%, 0% { - stroke: ${dt('progressspinner.color-1')}; + stroke: ${dt('progressspinner.color.1')}; } 40% { - stroke: ${dt('progressspinner.color-2')}; + stroke: ${dt('progressspinner.color.2')}; } 66% { - stroke: ${dt('progressspinner.color-3')}; + stroke: ${dt('progressspinner.color.3')}; } 80%, 90% { - stroke: ${dt('progressspinner.color-4')}; + stroke: ${dt('progressspinner.color.4')}; } } `; diff --git a/components/lib/scrolltop/style/ScrollTopStyle.js b/components/lib/scrolltop/style/ScrollTopStyle.js index c6455366d..e92b3658e 100644 --- a/components/lib/scrolltop/style/ScrollTopStyle.js +++ b/components/lib/scrolltop/style/ScrollTopStyle.js @@ -5,22 +5,6 @@ const theme = ({ dt }) => ` position: fixed; bottom: 20px; right: 20px; - display: flex; - align-items: center; - justify-content: center; - background: ${dt('scrolltop.background')}; - color: ${dt('scrolltop.color')}; -} - -.p-scrolltop:hover { - background: ${dt('scrolltop.hover.background')}; - color: ${dt('scrolltop.hover.text')}; -} - -.p-scrolltop-icon { - font-size: 1.5rem; - width: 1.5rem; - height: 1.5rem; } .p-scrolltop-sticky { @@ -46,19 +30,10 @@ const theme = ({ dt }) => ` .p-scrolltop-leave-active { transition: opacity 0.15s; } - -.p-scrolltop { - width: 3rem; - height: 3rem; - border-radius: 50%; - box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); - transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; - outline-color: transparent; -} `; const classes = { - root: ({ props }) => ['p-scrolltop p-link p-component', { 'p-scrolltop-sticky': props.target !== 'window' }], + root: ({ props }) => ['p-scrolltop', { 'p-scrolltop-sticky': props.target !== 'window' }], icon: 'p-scrolltop-icon' }; diff --git a/components/lib/themes/aura/avatar/index.js b/components/lib/themes/aura/avatar/index.js index f704c4f3c..ed27100d4 100644 --- a/components/lib/themes/aura/avatar/index.js +++ b/components/lib/themes/aura/avatar/index.js @@ -1,20 +1,8 @@ export default { - colorScheme: { - light: { - root: { - background: '{surface.200}' - }, - grouped: { - borderColor: '{surface.0}' - } - }, - dark: { - root: { - background: '{surface.700}' - }, - grouped: { - borderColor: '{surface.900}' - } - } + root: { + background: '{content.border.color}' + }, + group: { + borderColor: '{content.background}' } }; diff --git a/components/lib/themes/aura/badge/index.js b/components/lib/themes/aura/badge/index.js index 8e04abbd1..9f1388991 100644 --- a/components/lib/themes/aura/badge/index.js +++ b/components/lib/themes/aura/badge/index.js @@ -3,7 +3,7 @@ export default { light: { primary: { background: '{primary.color}', - color: '{primary.inverseColor}' + color: '{primary.contrast.color}' }, secondary: { background: '{surface.100}', @@ -33,7 +33,7 @@ export default { dark: { primary: { background: '{primary.color}', - color: '{primary.inverseColor}' + color: '{primary.contrast.color}' }, secondary: { background: '{surface.800}', diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index ec06c07cb..07c0fbd79 100644 --- a/components/lib/themes/aura/index.js +++ b/components/lib/themes/aura/index.js @@ -155,7 +155,7 @@ export default { }, primary: { color: '{primary.500}', - inverseColor: '#ffffff', + contrastColor: '#ffffff', hoverColor: '{primary.600}', activeColor: '{primary.700}' }, @@ -214,7 +214,7 @@ export default { }, primary: { color: '{primary.400}', - inverseColor: '{surface.900}', + contrastColor: '{surface.900}', hoverColor: '{primary.300}', activeColor: '{primary.200}' }, diff --git a/components/lib/themes/aura/metergroup/index.js b/components/lib/themes/aura/metergroup/index.js index a39dbd66e..d1a7b456c 100644 --- a/components/lib/themes/aura/metergroup/index.js +++ b/components/lib/themes/aura/metergroup/index.js @@ -1,14 +1,5 @@ export default { - colorScheme: { - light: { - meters: { - background: '{surface.200}' - } - }, - dark: { - meters: { - background: '{surface.700}' - } - } + meters: { + background: '{content.border.color}' } }; diff --git a/components/lib/themes/aura/progressbar/index.js b/components/lib/themes/aura/progressbar/index.js index 9d8cd8426..0c2459225 100644 --- a/components/lib/themes/aura/progressbar/index.js +++ b/components/lib/themes/aura/progressbar/index.js @@ -1,26 +1,11 @@ export default { - colorScheme: { - light: { - root: { - background: '{surface.200}' - }, - value: { - background: '{primary.color}' - }, - label: { - color: '{primary.inverse.color}' - } - }, - dark: { - root: { - background: '{surface.700}' - }, - value: { - background: '{primary.color}' - }, - label: { - color: '{primary.inverse.color}' - } - } + root: { + background: '{content.border.color}' + }, + value: { + background: '{primary.color}' + }, + label: { + color: '{primary.inverse.color}' } }; diff --git a/components/lib/themes/aura/progressspinner/index.js b/components/lib/themes/aura/progressspinner/index.js index 26792b212..30c1c4175 100644 --- a/components/lib/themes/aura/progressspinner/index.js +++ b/components/lib/themes/aura/progressspinner/index.js @@ -2,18 +2,18 @@ export default { colorScheme: { light: { root: { - 'color-1': '{red.500}', - 'color-2': '{blue.500}', - 'color-3': '{green.500}', - 'color-4': '{yellow.500}' + 'color.1': '{red.500}', + 'color.2': '{blue.500}', + 'color.3': '{green.500}', + 'color.4': '{yellow.500}' } }, dark: { root: { - 'color-1': '{red.400}', - 'color-2': '{blue.400}', - 'color-3': '{green.400}', - 'color-4': '{yellow.400}' + 'color.1': '{red.400}', + 'color.2': '{blue.400}', + 'color.3': '{green.400}', + 'color.4': '{yellow.400}' } } } diff --git a/components/lib/themes/aura/scrolltop/index.js b/components/lib/themes/aura/scrolltop/index.js index 60c57e0e6..ff8b4c563 100644 --- a/components/lib/themes/aura/scrolltop/index.js +++ b/components/lib/themes/aura/scrolltop/index.js @@ -1,20 +1 @@ -export default { - colorScheme: { - light: { - root: { - background: '{surface.800}', - hoverBackground: '{surface.700}', - color: '{surface.100}', - hoverColor: '{surface.0}' - } - }, - dark: { - root: { - background: '{surface.800}', - hoverBackground: '{surface.700}', - color: '{surface.300}', - hoverColor: '{surface.200}' - } - } - } -}; +export default {}; diff --git a/components/lib/themes/aura/terminal/index.js b/components/lib/themes/aura/terminal/index.js index bf79a83f3..a679e9ad8 100644 --- a/components/lib/themes/aura/terminal/index.js +++ b/components/lib/themes/aura/terminal/index.js @@ -1,14 +1,7 @@ export default { - colorScheme: { - light: { - background: '{surface.0}', - borderColor: '{surface.300}', - color: '{surface.700}' - }, - dark: { - background: '{surface.950}', - borderColor: '{surface.700}', - color: '{surface.0}' - } + root: { + background: '{form.field.background}', + borderColor: '{form.field.border.color}', + color: '{form.field.color}' } };