diff --git a/components/lib/themes/primeone/presets/aura/accordion/index.js b/components/lib/themes/primeone/presets/aura/accordion/index.js index 923954893..647c0755d 100644 --- a/components/lib/themes/primeone/presets/aura/accordion/index.js +++ b/components/lib/themes/primeone/presets/aura/accordion/index.js @@ -1,31 +1,29 @@ export default { - variables: { - colorScheme: { - light: { - header: { - background: '{surface.0}', - textColor: '{surface.500}', - textColorHover: '{surface.700}', - textColorActive: '{surface.700}' - }, - content: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - } + colorScheme: { + light: { + header: { + background: '{surface.0}', + textColor: '{surface.500}', + textColorHover: '{surface.700}', + textColorActive: '{surface.700}' }, - dark: { - header: { - background: '{surface.900}', - textColor: '{surface.400}', - textColorHover: '{surface.0}', - textColorActive: '{surface.0}' - }, - content: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - } + content: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + } + }, + dark: { + header: { + background: '{surface.900}', + textColor: '{surface.400}', + textColorHover: '{surface.0}', + textColorActive: '{surface.0}' + }, + content: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/avatar/index.js b/components/lib/themes/primeone/presets/aura/avatar/index.js index c09eed3e5..f90149958 100644 --- a/components/lib/themes/primeone/presets/aura/avatar/index.js +++ b/components/lib/themes/primeone/presets/aura/avatar/index.js @@ -1,17 +1,15 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.200}', - borderColor: '{surface.0}' - } - }, - dark: { - root: { - background: '{surface.700}', - borderColor: '{surface.900}' - } + colorScheme: { + light: { + root: { + background: '{surface.200}', + borderColor: '{surface.0}' + } + }, + dark: { + root: { + background: '{surface.700}', + borderColor: '{surface.900}' } } } diff --git a/components/lib/themes/primeone/presets/aura/badge/index.js b/components/lib/themes/primeone/presets/aura/badge/index.js index ed6c1cd9d..aef881f06 100644 --- a/components/lib/themes/primeone/presets/aura/badge/index.js +++ b/components/lib/themes/primeone/presets/aura/badge/index.js @@ -1,65 +1,63 @@ export default { - variables: { - colorScheme: { - light: { - primary: { - background: '{primary.color}', - textColor: '{primary.inverseColor}' - }, - secondary: { - background: '{surface.100}', - textColor: '{surface.600}' - }, - success: { - background: '{green.500}', - textColor: '{surface.0}' - }, - info: { - background: '{sky.500}', - textColor: '{surface.0}' - }, - warn: { - background: '{orange.500}', - textColor: '{surface.0}' - }, - danger: { - background: '{red.500}', - textColor: '{surface.0}' - }, - contrast: { - background: '{surface.950}', - textColor: '{surface.0}' - } + colorScheme: { + light: { + primary: { + background: '{primary.color}', + textColor: '{primary.inverseColor}' }, - dark: { - primary: { - background: '{primary.color}', - textColor: '{primary.inverseColor}' - }, - secondary: { - background: '{surface.800}', - textColor: '{surface.300}' - }, - success: { - background: '{green.400}', - textColor: '{green.950}' - }, - info: { - background: '{sky.400}', - textColor: '{sky.950}' - }, - warn: { - background: '{orange.400}', - textColor: '{orange.950}' - }, - danger: { - background: '{red.400}', - textColor: '{red.950}' - }, - contrast: { - background: '{surface.0}', - textColor: '{surface.950}' - } + secondary: { + background: '{surface.100}', + textColor: '{surface.600}' + }, + success: { + background: '{green.500}', + textColor: '{surface.0}' + }, + info: { + background: '{sky.500}', + textColor: '{surface.0}' + }, + warn: { + background: '{orange.500}', + textColor: '{surface.0}' + }, + danger: { + background: '{red.500}', + textColor: '{surface.0}' + }, + contrast: { + background: '{surface.950}', + textColor: '{surface.0}' + } + }, + dark: { + primary: { + background: '{primary.color}', + textColor: '{primary.inverseColor}' + }, + secondary: { + background: '{surface.800}', + textColor: '{surface.300}' + }, + success: { + background: '{green.400}', + textColor: '{green.950}' + }, + info: { + background: '{sky.400}', + textColor: '{sky.950}' + }, + warn: { + background: '{orange.400}', + textColor: '{orange.950}' + }, + danger: { + background: '{red.400}', + textColor: '{red.950}' + }, + contrast: { + background: '{surface.0}', + textColor: '{surface.950}' } } } diff --git a/components/lib/themes/primeone/presets/aura/breadcrumb/index.js b/components/lib/themes/primeone/presets/aura/breadcrumb/index.js index 81d49b6aa..5f2dce622 100644 --- a/components/lib/themes/primeone/presets/aura/breadcrumb/index.js +++ b/components/lib/themes/primeone/presets/aura/breadcrumb/index.js @@ -1,31 +1,29 @@ export default { - variables: { - colorScheme: { + colorScheme: { + root: { + background: '{surface.0}' + }, + light: { + item: { + textColor: '{surface.500}', + textColorHover: '{surface.700}', + iconColor: '{surface.400}' + }, + separator: { + color: '{surface.400}' + } + }, + dark: { root: { - background: '{surface.0}' + background: '{surface.900}' }, - light: { - item: { - textColor: '{surface.500}', - textColorHover: '{surface.700}', - iconColor: '{surface.400}' - }, - separator: { - color: '{surface.400}' - } + item: { + textColor: '{surface.400}', + textColorHover: '{surface.0}', + iconColor: '{surface.500}' }, - dark: { - root: { - background: '{surface.900}' - }, - item: { - textColor: '{surface.400}', - textColorHover: '{surface.0}', - iconColor: '{surface.500}' - }, - separator: { - color: '{surface.500}' - } + separator: { + color: '{surface.500}' } } } diff --git a/components/lib/themes/primeone/presets/aura/button/index.js b/components/lib/themes/primeone/presets/aura/button/index.js index 0891f2411..d40994f3e 100644 --- a/components/lib/themes/primeone/presets/aura/button/index.js +++ b/components/lib/themes/primeone/presets/aura/button/index.js @@ -1,395 +1,393 @@ export default { - variables: { - colorScheme: { - light: { - root: { - primary: { - background: '{primary.color}', - backgroundHover: '{primary.hoverColor}', - backgroundActive: '{primary.activeColor}', - borderColor: '{primary.color}', - borderColorHover: '{primary.hoverColor}', - borderColorActive: '{primary.activeColor}', - textColor: '{primary.inverseColor}', - textColorHover: '{primary.inverseColor}', - textColorActive: '{primary.inverseColor}' - }, - secondary: { - background: '{surface.100}', - backgroundHover: '{surface.200}', - backgroundActive: '{surface.300}', - borderColor: '{surface.100}', - borderColorHover: '{surface.200}', - borderColorActive: '{surface.300}', - textColor: '{surface.600}', - textColorHover: '{surface.700}', - textColorActive: '{surface.800}' - }, - info: { - background: '{sky.500}', - backgroundHover: '{sky.600}', - backgroundActive: '{sky.700}', - borderColor: '{sky.500}', - borderColorHover: '{sky.600}', - borderColorActive: '{sky.700}', - textColor: '#ffffff', - textColorHover: '#ffffff', - textColorActive: '#ffffff' - }, - success: { - background: '{green.500}', - backgroundHover: '{green.600}', - backgroundActive: '{green.700}', - borderColor: '{green.500}', - borderColorHover: '{green.600}', - borderColorActive: '{green.700}', - textColor: '#ffffff', - textColorHover: '#ffffff', - textColorActive: '#ffffff' - }, - warn: { - background: '{orange.500}', - backgroundHover: '{orange.600}', - backgroundActive: '{orange.700}', - borderColor: '{orange.500}', - borderColorHover: '{orange.600}', - borderColorActive: '{orange.700}', - textColor: '#ffffff', - textColorHover: '#ffffff', - textColorActive: '#ffffff' - }, - help: { - background: '{purple.500}', - backgroundHover: '{purple.600}', - backgroundActive: '{purple.700}', - borderColor: '{purple.500}', - borderColorHover: '{purple.600}', - borderColorActive: '{purple.700}', - textColor: '#ffffff', - textColorHover: '#ffffff', - textColorActive: '#ffffff' - }, - danger: { - background: '{red.500}', - backgroundHover: '{red.600}', - backgroundActive: '{red.700}', - borderColor: '{red.500}', - borderColorHover: '{red.600}', - borderColorActive: '{red.700}', - textColor: '#ffffff', - textColorHover: '#ffffff', - textColorActive: '#ffffff' - }, - contrast: { - background: '{surface.950}', - backgroundHover: '{surface.900}', - backgroundActive: '{surface.800}', - borderColor: '{surface.950}', - borderColorHover: '{surface.900}', - borderColorActive: '{surface.800}', - textColor: '{surface.0}', - textColorHover: '{surface.0}', - textColorActive: '{surface.0}' - } + colorScheme: { + light: { + root: { + primary: { + background: '{primary.color}', + backgroundHover: '{primary.hoverColor}', + backgroundActive: '{primary.activeColor}', + borderColor: '{primary.color}', + borderColorHover: '{primary.hoverColor}', + borderColorActive: '{primary.activeColor}', + textColor: '{primary.inverseColor}', + textColorHover: '{primary.inverseColor}', + textColorActive: '{primary.inverseColor}' }, - outlined: { - primary: { - backgroundHover: '{primary.50}', - backgroundActive: '{primary.100}', - borderColor: '{primary.200}', - textColor: '{primary.color}' - }, - secondary: { - backgroundHover: '{surface.50}', - backgroundActive: '{surface.100}', - borderColor: '{surface.200}', - textColor: '{surface.500}' - }, - success: { - backgroundHover: '{green.50}', - backgroundActive: '{green.100}', - borderColor: '{green.200}', - textColor: '{green.500}' - }, - info: { - backgroundHover: '{sky.50}', - backgroundActive: '{sky.100}', - borderColor: '{sky.200}', - textColor: '{sky.500}' - }, - warn: { - backgroundHover: '{orange.50}', - backgroundActive: '{orange.100}', - borderColor: '{orange.200}', - textColor: '{orange.500}' - }, - help: { - backgroundHover: '{purple.50}', - backgroundActive: '{purple.100}', - borderColor: '{purple.200}', - textColor: '{purple.500}' - }, - danger: { - backgroundHover: '{red.50}', - backgroundActive: '{red.100}', - borderColor: '{red.200}', - textColor: '{red.500}' - }, - contrast: { - backgroundHover: '{surface.50}', - backgroundActive: '{surface.100}', - borderColor: '{surface.700}', - textColor: '{surface.950}' - }, - plain: { - backgroundHover: '{surface.50}', - backgroundActive: '{surface.100}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - } + secondary: { + background: '{surface.100}', + backgroundHover: '{surface.200}', + backgroundActive: '{surface.300}', + borderColor: '{surface.100}', + borderColorHover: '{surface.200}', + borderColorActive: '{surface.300}', + textColor: '{surface.600}', + textColorHover: '{surface.700}', + textColorActive: '{surface.800}' }, - text: { - primary: { - backgroundHover: '{primary.50}', - backgroundActive: '{primary.100}', - textColor: '{primary.color}' - }, - secondary: { - backgroundHover: '{surface.50}', - backgroundActive: '{surface.100}', - textColor: '{surface.500}' - }, - success: { - backgroundHover: '{green.50}', - backgroundActive: '{green.100}', - textColor: '{green.500}' - }, - info: { - backgroundHover: '{sky.50}', - backgroundActive: '{sky.100}', - textColor: '{sky.500}' - }, - warn: { - backgroundHover: '{orange.50}', - backgroundActive: '{orange.100}', - textColor: '{orange.500}' - }, - help: { - backgroundHover: '{purple.50}', - backgroundActive: '{purple.100}', - textColor: '{purple.600}' - }, - danger: { - backgroundHover: '{red.50}', - backgroundActive: '{red.100}', - textColor: '{red.500}' - }, - plain: { - backgroundHover: '{surface.50}', - backgroundActive: '{surface.100}', - textColor: '{surface.700}' - } + info: { + background: '{sky.500}', + backgroundHover: '{sky.600}', + backgroundActive: '{sky.700}', + borderColor: '{sky.500}', + borderColorHover: '{sky.600}', + borderColorActive: '{sky.700}', + textColor: '#ffffff', + textColorHover: '#ffffff', + textColorActive: '#ffffff' }, - link: { - textColor: '{primary.color}', - textColorHover: '{primary.color}', - textColorActive: '{primary.color}' + success: { + background: '{green.500}', + backgroundHover: '{green.600}', + backgroundActive: '{green.700}', + borderColor: '{green.500}', + borderColorHover: '{green.600}', + borderColorActive: '{green.700}', + textColor: '#ffffff', + textColorHover: '#ffffff', + textColorActive: '#ffffff' + }, + warn: { + background: '{orange.500}', + backgroundHover: '{orange.600}', + backgroundActive: '{orange.700}', + borderColor: '{orange.500}', + borderColorHover: '{orange.600}', + borderColorActive: '{orange.700}', + textColor: '#ffffff', + textColorHover: '#ffffff', + textColorActive: '#ffffff' + }, + help: { + background: '{purple.500}', + backgroundHover: '{purple.600}', + backgroundActive: '{purple.700}', + borderColor: '{purple.500}', + borderColorHover: '{purple.600}', + borderColorActive: '{purple.700}', + textColor: '#ffffff', + textColorHover: '#ffffff', + textColorActive: '#ffffff' + }, + danger: { + background: '{red.500}', + backgroundHover: '{red.600}', + backgroundActive: '{red.700}', + borderColor: '{red.500}', + borderColorHover: '{red.600}', + borderColorActive: '{red.700}', + textColor: '#ffffff', + textColorHover: '#ffffff', + textColorActive: '#ffffff' + }, + contrast: { + background: '{surface.950}', + backgroundHover: '{surface.900}', + backgroundActive: '{surface.800}', + borderColor: '{surface.950}', + borderColorHover: '{surface.900}', + borderColorActive: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}', + textColorActive: '{surface.0}' } }, - dark: { - root: { - primary: { - background: '{primary.color}', - backgroundHover: '{primary.hoverColor}', - backgroundActive: '{primary.activeColor}', - borderColor: '{primary.color}', - borderColorHover: '{primary.hoverColor}', - borderColorActive: '{primary.activeColor}', - textColor: '{primary.inverseColor}', - textColorHover: '{primary.inverseColor}', - textColorActive: '{primary.inverseColor}' - }, - secondary: { - background: '{surface.800}', - backgroundHover: '{surface.700}', - backgroundActive: '{surface.600}', - borderColor: '{surface.800}', - borderColorHover: '{surface.700}', - borderColorActive: '{surface.600}', - textColor: '{surface.300}', - textColorHover: '{surface.200}', - textColorActive: '{surface.100}' - }, - info: { - background: '{sky.400}', - backgroundHover: '{sky.300}', - backgroundActive: '{sky.200}', - borderColor: '{sky.400}', - borderColorHover: '{sky.300}', - borderColorActive: '{sky.200}', - textColor: '{sky.950}', - textColorHover: '{sky.950}', - textColorActive: '{sky.950}' - }, - success: { - background: '{green.400}', - backgroundHover: '{green.300}', - backgroundActive: '{green.200}', - borderColor: '{green.400}', - borderColorHover: '{green.300}', - borderColorActive: '{green.200}', - textColor: '{green.950}', - textColorHover: '{green.950}', - textColorActive: '{green.950}' - }, - warn: { - background: '{orange.400}', - backgroundHover: '{orange.300}', - backgroundActive: '{orange.200}', - borderColor: '{orange.400}', - borderColorHover: '{orange.300}', - borderColorActive: '{orange.200}', - textColor: '{orange.950}', - textColorHover: '{orange.950}', - textColorActive: '{orange.950}' - }, - help: { - background: '{purple.400}', - backgroundHover: '{purple.300}', - backgroundActive: '{purple.200}', - borderColor: '{purple.400}', - borderColorHover: '{purple.300}', - borderColorActive: '{purple.200}', - textColor: '{purple.950}', - textColorHover: '{purple.950}', - textColorActive: '{purple.950}' - }, - danger: { - background: '{red.400}', - backgroundHover: '{red.300}', - backgroundActive: '{red.200}', - borderColor: '{red.400}', - borderColorHover: '{red.300}', - borderColorActive: '{red.200}', - textColor: '{red.950}', - textColorHover: '{red.950}', - textColorActive: '{red.950}' - }, - contrast: { - background: '{surface.0}', - backgroundHover: '{surface.100}', - backgroundActive: '{surface.200}', - borderColor: '{surface.0}', - borderColorHover: '{surface.100}', - borderColorActive: '{surface.200}', - textColor: '{surface.950}', - textColorHover: '{surface.950}', - textColorActive: '{surface.950}' - } + outlined: { + primary: { + backgroundHover: '{primary.50}', + backgroundActive: '{primary.100}', + borderColor: '{primary.200}', + textColor: '{primary.color}' }, - outlined: { - primary: { - backgroundHover: 'color-mix(in srgb, {primary.color}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {primary.color}, transparent 84%)', - borderColor: '{primary.900}', - textColor: '{primary.color}' - }, - secondary: { - backgroundHover: 'rgba(255,255,255,0.04)', - backgroundActive: 'rgba(255,255,255,0.16)', - borderColor: '{surface.700}', - textColor: '{surface.400}' - }, - success: { - backgroundHover: 'color-mix(in srgb, {green.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {green.400}, transparent 84%)', - borderColor: '{green.900}', - textColor: '{green.400}' - }, - info: { - backgroundHover: 'color-mix(in srgb, {sky.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {sky.400}, transparent 84%)', - borderColor: '{sky.900}', - textColor: '{sky.400}' - }, - warn: { - backgroundHover: 'color-mix(in srgb, {orange.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {orange.400}, transparent 84%)', - borderColor: '{orange.900}', - textColor: '{orange.400}' - }, - help: { - backgroundHover: 'color-mix(in srgb, {help.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {help.400}, transparent 84%)', - borderColor: '{purple.900}', - textColor: '{purple.400}' - }, - danger: { - backgroundHover: 'color-mix(in srgb, {danger.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {danger.400}, transparent 84%)', - borderColor: '{red.900}', - textColor: '{red.400}' - }, - contrast: { - backgroundHover: '{surface.800}', - backgroundActive: '{surface.700}', - borderColor: '{surface.500}', - textColor: '{surface.0}' - }, - plain: { - backgroundHover: '{surface.800}', - backgroundActive: '{surface.700}', - borderColor: '{surface.600}', - textColor: '{surface.0}' - } + secondary: { + backgroundHover: '{surface.50}', + backgroundActive: '{surface.100}', + borderColor: '{surface.200}', + textColor: '{surface.500}' }, - text: { - primary: { - backgroundHover: 'color-mix(in srgb, {primary.color}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {primary.color}, transparent 84%)', - textColor: '{primary.color}' - }, - secondary: { - backgroundHover: '{surface.800}', - backgroundActive: '{surface.700}', - textColor: '{surface.400}' - }, - success: { - backgroundHover: 'color-mix(in srgb, {green.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {green.400}, transparent 84%)', - textColor: '{green.400}' - }, - info: { - backgroundHover: 'color-mix(in srgb, {sky.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {sky.400}, transparent 84%)', - textColor: '{sky.400}' - }, - warn: { - backgroundHover: 'color-mix(in srgb, {orange.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {orange.400}, transparent 84%)', - textColor: '{orange.400}' - }, - help: { - backgroundHover: 'color-mix(in srgb, {purple.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {purple.400}, transparent 84%)', - textColor: '{purple.400}' - }, - danger: { - backgroundHover: 'color-mix(in srgb, {red.400}, transparent 96%)', - backgroundActive: 'color-mix(in srgb, {red.400}, transparent 84%)', - textColor: '{red.400}' - }, - plain: { - backgroundHover: '{surface.800}', - backgroundActive: '{surface.700}', - textColor: '{surface.0}' - } + success: { + backgroundHover: '{green.50}', + backgroundActive: '{green.100}', + borderColor: '{green.200}', + textColor: '{green.500}' }, - link: { - textColor: '{primary.color}', - textColorHover: '{primary.color}', - textColorActive: '{primary.color}' + info: { + backgroundHover: '{sky.50}', + backgroundActive: '{sky.100}', + borderColor: '{sky.200}', + textColor: '{sky.500}' + }, + warn: { + backgroundHover: '{orange.50}', + backgroundActive: '{orange.100}', + borderColor: '{orange.200}', + textColor: '{orange.500}' + }, + help: { + backgroundHover: '{purple.50}', + backgroundActive: '{purple.100}', + borderColor: '{purple.200}', + textColor: '{purple.500}' + }, + danger: { + backgroundHover: '{red.50}', + backgroundActive: '{red.100}', + borderColor: '{red.200}', + textColor: '{red.500}' + }, + contrast: { + backgroundHover: '{surface.50}', + backgroundActive: '{surface.100}', + borderColor: '{surface.700}', + textColor: '{surface.950}' + }, + plain: { + backgroundHover: '{surface.50}', + backgroundActive: '{surface.100}', + borderColor: '{surface.200}', + textColor: '{surface.700}' } + }, + text: { + primary: { + backgroundHover: '{primary.50}', + backgroundActive: '{primary.100}', + textColor: '{primary.color}' + }, + secondary: { + backgroundHover: '{surface.50}', + backgroundActive: '{surface.100}', + textColor: '{surface.500}' + }, + success: { + backgroundHover: '{green.50}', + backgroundActive: '{green.100}', + textColor: '{green.500}' + }, + info: { + backgroundHover: '{sky.50}', + backgroundActive: '{sky.100}', + textColor: '{sky.500}' + }, + warn: { + backgroundHover: '{orange.50}', + backgroundActive: '{orange.100}', + textColor: '{orange.500}' + }, + help: { + backgroundHover: '{purple.50}', + backgroundActive: '{purple.100}', + textColor: '{purple.600}' + }, + danger: { + backgroundHover: '{red.50}', + backgroundActive: '{red.100}', + textColor: '{red.500}' + }, + plain: { + backgroundHover: '{surface.50}', + backgroundActive: '{surface.100}', + textColor: '{surface.700}' + } + }, + link: { + textColor: '{primary.color}', + textColorHover: '{primary.color}', + textColorActive: '{primary.color}' + } + }, + dark: { + root: { + primary: { + background: '{primary.color}', + backgroundHover: '{primary.hoverColor}', + backgroundActive: '{primary.activeColor}', + borderColor: '{primary.color}', + borderColorHover: '{primary.hoverColor}', + borderColorActive: '{primary.activeColor}', + textColor: '{primary.inverseColor}', + textColorHover: '{primary.inverseColor}', + textColorActive: '{primary.inverseColor}' + }, + secondary: { + background: '{surface.800}', + backgroundHover: '{surface.700}', + backgroundActive: '{surface.600}', + borderColor: '{surface.800}', + borderColorHover: '{surface.700}', + borderColorActive: '{surface.600}', + textColor: '{surface.300}', + textColorHover: '{surface.200}', + textColorActive: '{surface.100}' + }, + info: { + background: '{sky.400}', + backgroundHover: '{sky.300}', + backgroundActive: '{sky.200}', + borderColor: '{sky.400}', + borderColorHover: '{sky.300}', + borderColorActive: '{sky.200}', + textColor: '{sky.950}', + textColorHover: '{sky.950}', + textColorActive: '{sky.950}' + }, + success: { + background: '{green.400}', + backgroundHover: '{green.300}', + backgroundActive: '{green.200}', + borderColor: '{green.400}', + borderColorHover: '{green.300}', + borderColorActive: '{green.200}', + textColor: '{green.950}', + textColorHover: '{green.950}', + textColorActive: '{green.950}' + }, + warn: { + background: '{orange.400}', + backgroundHover: '{orange.300}', + backgroundActive: '{orange.200}', + borderColor: '{orange.400}', + borderColorHover: '{orange.300}', + borderColorActive: '{orange.200}', + textColor: '{orange.950}', + textColorHover: '{orange.950}', + textColorActive: '{orange.950}' + }, + help: { + background: '{purple.400}', + backgroundHover: '{purple.300}', + backgroundActive: '{purple.200}', + borderColor: '{purple.400}', + borderColorHover: '{purple.300}', + borderColorActive: '{purple.200}', + textColor: '{purple.950}', + textColorHover: '{purple.950}', + textColorActive: '{purple.950}' + }, + danger: { + background: '{red.400}', + backgroundHover: '{red.300}', + backgroundActive: '{red.200}', + borderColor: '{red.400}', + borderColorHover: '{red.300}', + borderColorActive: '{red.200}', + textColor: '{red.950}', + textColorHover: '{red.950}', + textColorActive: '{red.950}' + }, + contrast: { + background: '{surface.0}', + backgroundHover: '{surface.100}', + backgroundActive: '{surface.200}', + borderColor: '{surface.0}', + borderColorHover: '{surface.100}', + borderColorActive: '{surface.200}', + textColor: '{surface.950}', + textColorHover: '{surface.950}', + textColorActive: '{surface.950}' + } + }, + outlined: { + primary: { + backgroundHover: 'color-mix(in srgb, {primary.color}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {primary.color}, transparent 84%)', + borderColor: '{primary.900}', + textColor: '{primary.color}' + }, + secondary: { + backgroundHover: 'rgba(255,255,255,0.04)', + backgroundActive: 'rgba(255,255,255,0.16)', + borderColor: '{surface.700}', + textColor: '{surface.400}' + }, + success: { + backgroundHover: 'color-mix(in srgb, {green.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {green.400}, transparent 84%)', + borderColor: '{green.900}', + textColor: '{green.400}' + }, + info: { + backgroundHover: 'color-mix(in srgb, {sky.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {sky.400}, transparent 84%)', + borderColor: '{sky.900}', + textColor: '{sky.400}' + }, + warn: { + backgroundHover: 'color-mix(in srgb, {orange.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {orange.400}, transparent 84%)', + borderColor: '{orange.900}', + textColor: '{orange.400}' + }, + help: { + backgroundHover: 'color-mix(in srgb, {help.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {help.400}, transparent 84%)', + borderColor: '{purple.900}', + textColor: '{purple.400}' + }, + danger: { + backgroundHover: 'color-mix(in srgb, {danger.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {danger.400}, transparent 84%)', + borderColor: '{red.900}', + textColor: '{red.400}' + }, + contrast: { + backgroundHover: '{surface.800}', + backgroundActive: '{surface.700}', + borderColor: '{surface.500}', + textColor: '{surface.0}' + }, + plain: { + backgroundHover: '{surface.800}', + backgroundActive: '{surface.700}', + borderColor: '{surface.600}', + textColor: '{surface.0}' + } + }, + text: { + primary: { + backgroundHover: 'color-mix(in srgb, {primary.color}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {primary.color}, transparent 84%)', + textColor: '{primary.color}' + }, + secondary: { + backgroundHover: '{surface.800}', + backgroundActive: '{surface.700}', + textColor: '{surface.400}' + }, + success: { + backgroundHover: 'color-mix(in srgb, {green.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {green.400}, transparent 84%)', + textColor: '{green.400}' + }, + info: { + backgroundHover: 'color-mix(in srgb, {sky.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {sky.400}, transparent 84%)', + textColor: '{sky.400}' + }, + warn: { + backgroundHover: 'color-mix(in srgb, {orange.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {orange.400}, transparent 84%)', + textColor: '{orange.400}' + }, + help: { + backgroundHover: 'color-mix(in srgb, {purple.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {purple.400}, transparent 84%)', + textColor: '{purple.400}' + }, + danger: { + backgroundHover: 'color-mix(in srgb, {red.400}, transparent 96%)', + backgroundActive: 'color-mix(in srgb, {red.400}, transparent 84%)', + textColor: '{red.400}' + }, + plain: { + backgroundHover: '{surface.800}', + backgroundActive: '{surface.700}', + textColor: '{surface.0}' + } + }, + link: { + textColor: '{primary.color}', + textColorHover: '{primary.color}', + textColorActive: '{primary.color}' } } } diff --git a/components/lib/themes/primeone/presets/aura/card/index.js b/components/lib/themes/primeone/presets/aura/card/index.js index 30b19bcb2..431ddde3b 100644 --- a/components/lib/themes/primeone/presets/aura/card/index.js +++ b/components/lib/themes/primeone/presets/aura/card/index.js @@ -1,23 +1,21 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - textColor: '{surface.700}' - }, - subtitle: { - textColor: '{surface.500}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + textColor: '{surface.700}' }, - dark: { - root: { - background: '{surface.900}', - textColor: '{surface.0}' - }, - subtitle: { - textColor: '{surface.400}' - } + subtitle: { + textColor: '{surface.500}' + } + }, + dark: { + root: { + background: '{surface.900}', + textColor: '{surface.0}' + }, + subtitle: { + textColor: '{surface.400}' } } } diff --git a/components/lib/themes/primeone/presets/aura/carousel/index.js b/components/lib/themes/primeone/presets/aura/carousel/index.js index 45c5a5f1c..19f954252 100644 --- a/components/lib/themes/primeone/presets/aura/carousel/index.js +++ b/components/lib/themes/primeone/presets/aura/carousel/index.js @@ -1,29 +1,27 @@ export default { - variables: { - colorScheme: { - light: { - navigator: { - color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' - }, - indicator: { - background: '{surface.200}', - backgroundHover: '{surface.300}', - backgroundActive: '{primary.color}' - } + colorScheme: { + light: { + navigator: { + color: '{surface.500}', + colorHover: '{surface.600}', + backgroundHover: '{surface.100}' }, - dark: { - navigator: { - color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' - }, - indicator: { - background: '{surface.700}', - backgroundHover: '{surface.600}', - backgroundActive: '{primary.color}' - } + indicator: { + background: '{surface.200}', + backgroundHover: '{surface.300}', + backgroundActive: '{primary.color}' + } + }, + dark: { + navigator: { + color: '{surface.400}', + colorHover: '{surface.300}', + backgroundHover: '{surface.800}' + }, + indicator: { + background: '{surface.700}', + backgroundHover: '{surface.600}', + backgroundActive: '{primary.color}' } } } diff --git a/components/lib/themes/primeone/presets/aura/checkbox/index.js b/components/lib/themes/primeone/presets/aura/checkbox/index.js index ad4514614..b71a11004 100644 --- a/components/lib/themes/primeone/presets/aura/checkbox/index.js +++ b/components/lib/themes/primeone/presets/aura/checkbox/index.js @@ -1,29 +1,25 @@ export default { - variables: { - common: { - root: { - borderRadius: '{rounded.sm}', - width: '1.25rem', - height: '1.25rem', - background: '{form.field.background}', - backgroundChecked: '{primary.color}', - backgroundCheckedHover: '{primary.hover.color}', - backgroundDisabled: '{form.field.background.disabled}', - backgroundFilled: '{form.field.background.filled}', - borderColor: '{form.field.border.color}', - borderColorHover: '{form.field.border.color.hover}', - borderColorChecked: '{primary.color}', - borderColorCheckedHover: '{primary.hover.color}', - borderColorInvalid: '{form.field.border.color.invalid}', - boxShadow: '{form.field.box.shadow}' - }, - icon: { - size: '0.875rem', - color: '{form.field.text.color}', - colorChecked: '{primary.inverse.color}', - colorCheckedHover: '{primary.inverse.color}', - colorDisabled: '{form.field.text.disabled}' - } - } + root: { + borderRadius: '{rounded.sm}', + width: '1.25rem', + height: '1.25rem', + background: '{form.field.background}', + backgroundChecked: '{primary.color}', + backgroundCheckedHover: '{primary.hover.color}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorChecked: '{primary.color}', + borderColorCheckedHover: '{primary.hover.color}', + borderColorInvalid: '{form.field.border.color.invalid}', + boxShadow: '{form.field.box.shadow}' + }, + icon: { + size: '0.875rem', + color: '{form.field.text.color}', + colorChecked: '{primary.inverse.color}', + colorCheckedHover: '{primary.inverse.color}', + colorDisabled: '{form.field.text.disabled}' } }; diff --git a/components/lib/themes/primeone/presets/aura/chip/index.js b/components/lib/themes/primeone/presets/aura/chip/index.js index 6c9d43ccf..cd2d10893 100644 --- a/components/lib/themes/primeone/presets/aura/chip/index.js +++ b/components/lib/themes/primeone/presets/aura/chip/index.js @@ -1,17 +1,15 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.100}', - textColor: '{surface.800}' - } - }, - dark: { - root: { - background: '{surface.700}', - textColor: '{surface.0}' - } + colorScheme: { + light: { + root: { + background: '{surface.100}', + textColor: '{surface.800}' + } + }, + dark: { + root: { + background: '{surface.700}', + textColor: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/chips/index.js b/components/lib/themes/primeone/presets/aura/chips/index.js index 23a8a2170..b43f89f71 100644 --- a/components/lib/themes/primeone/presets/aura/chips/index.js +++ b/components/lib/themes/primeone/presets/aura/chips/index.js @@ -1,37 +1,33 @@ export default { - variables: { - common: { - root: { - background: '{form.field.background}', - backgroundDisabled: '{form.field.background.disabled}', - backgroundFilled: '{form.field.background.filled}', - backgroundFilledFocus: '{form.field.background.filled.focus}', - borderColor: '{form.field.border.color}', - borderColorHover: '{form.field.border.color.hover}', - borderColorFocus: '{form.field.border.color.focus}', - borderColorInvalid: '{form.field.border.color.invalid}', - textColor: '{form.field.text.color}', - textColorDisabled: '{form.field.text.disabled}', - placeholderTextColor: '{form.field.placeholder.text.color}', - boxShadow: '{form.field.box.shadow}' + root: { + background: '{form.field.background}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + backgroundFilledFocus: '{form.field.background.filled.focus}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorFocus: '{form.field.border.color.focus}', + borderColorInvalid: '{form.field.border.color.invalid}', + textColor: '{form.field.text.color}', + textColorDisabled: '{form.field.text.disabled}', + placeholderTextColor: '{form.field.placeholder.text.color}', + boxShadow: '{form.field.box.shadow}' + }, + colorScheme: { + light: { + chip: { + background: '{surface.100}', + backgroundFocus: '{surface.200}', + textColor: '{surface.800}', + textColorFocus: '{surface.900}' } }, - colorScheme: { - light: { - chip: { - background: '{surface.100}', - backgroundFocus: '{surface.200}', - textColor: '{surface.800}', - textColorFocus: '{surface.900}' - } - }, - dark: { - chip: { - background: '{surface.700}', - backgroundFocus: '{surface.600}', - textColor: '{surface.0}', - textColorFocus: '{surface.0}' - } + dark: { + chip: { + background: '{surface.700}', + backgroundFocus: '{surface.600}', + textColor: '{surface.0}', + textColorFocus: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/colorpicker/index.js b/components/lib/themes/primeone/presets/aura/colorpicker/index.js index ce17ad117..03bab0c37 100644 --- a/components/lib/themes/primeone/presets/aura/colorpicker/index.js +++ b/components/lib/themes/primeone/presets/aura/colorpicker/index.js @@ -1,23 +1,21 @@ export default { - variables: { - colorScheme: { - light: { - panel: { - background: '{surface.800}', - borderColor: '{surface.900}' - }, - handle: { - color: '{surface.0}' - } + colorScheme: { + light: { + panel: { + background: '{surface.800}', + borderColor: '{surface.900}' }, - dark: { - panel: { - background: '{surface.900}', - borderColor: '{surface.700}' - }, - handle: { - color: '{surface.0}' - } + handle: { + color: '{surface.0}' + } + }, + dark: { + panel: { + background: '{surface.900}', + borderColor: '{surface.700}' + }, + handle: { + color: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/confirmpopup/index.js b/components/lib/themes/primeone/presets/aura/confirmpopup/index.js index c63e2a308..1022a5cc7 100644 --- a/components/lib/themes/primeone/presets/aura/confirmpopup/index.js +++ b/components/lib/themes/primeone/presets/aura/confirmpopup/index.js @@ -1,19 +1,17 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - } - }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/contextmenu/index.js b/components/lib/themes/primeone/presets/aura/contextmenu/index.js index 862a4be55..1813399e6 100644 --- a/components/lib/themes/primeone/presets/aura/contextmenu/index.js +++ b/components/lib/themes/primeone/presets/aura/contextmenu/index.js @@ -1,47 +1,45 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' }, - item: { - backgroundFocus: '{surface.100}', - text: { - color: '{surface.700}', - colorFocus: '{surface.800}' - }, - icon: { - color: '{surface.400}', - colorFocus: '{surface.500}' - } - }, - separator: { - borderColor: '{surface.200}' + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' } }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' + separator: { + borderColor: '{surface.200}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' }, - item: { - backgroundFocus: '{surface.800}', - text: { - color: '{surface.0}', - colorFocus: '{surface.0}' - }, - icon: { - color: '{surface.500}', - colorFocus: '{surface.400}' - } - }, - separator: { - borderColor: '{surface.700}' + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' } + }, + separator: { + borderColor: '{surface.700}' } } } diff --git a/components/lib/themes/primeone/presets/aura/datatable/index.js b/components/lib/themes/primeone/presets/aura/datatable/index.js index bea929b26..b177d5646 100644 --- a/components/lib/themes/primeone/presets/aura/datatable/index.js +++ b/components/lib/themes/primeone/presets/aura/datatable/index.js @@ -1,99 +1,97 @@ export default { - variables: { - colorScheme: { - light: { - header: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - headerCell: { - background: '{surface.0}', - backgroundHover: '{surface.100}', - borderColor: '{surface.200}', - textColor: '{surface.700}', - textColorHover: '{surface.800}' - }, - row: { - background: '{surface.0}', - backgroundStriped: '{surface.50}', - backgroundHover: '{surface.100}', - textColor: '{surface.700}', - textColorHover: '{surface.800}' - }, - bodyCell: { - borderColor: '{surface.200}', - borderColorSelected: '{primary.100}' - }, - footerCell: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - footer: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - dropPointColor: '{primary.color}', - resizerColor: '{primary.color}', - sortIcon: { - color: '{surface.500}', - colorHover: '{surface.600}' - }, - rowAction: { - backgroundHover: '{surface.100}', - backgroundHoverHighlight: '{surface.0}', - color: '{surface.500}', - colorHover: '{surface.500}' - } + colorScheme: { + light: { + header: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - header: { - background: '{surface.900}', - borderColor: '{surface.800}', - textColor: '{surface.0}' - }, - headerCell: { - background: '{surface.900}', - backgroundHover: '{surface.800}', - borderColor: '{surface.800}', - textColor: '{surface.0}', - textColorHover: '{surface.0}' - }, - row: { - background: '{surface.900}', - backgroundStriped: '{surface.950}', - backgroundHover: '{surface.800}', - textColor: '{surface.0}', - textColorHover: '{surface.0}' - }, - bodyCell: { - borderColor: '{surface.800}', - borderColorSelected: '{primary.900}' - }, - footerCell: { - background: '{surface.900}', - borderColor: '{surface.800}', - textColor: '{surface.0}' - }, - footer: { - background: '{surface.900}', - borderColor: '{surface.800}', - textColor: '{surface.0}' - }, - dropPointColor: '{primary.color}', - resizerColor: '{primary.color}', - sortIcon: { - color: '{surface.400}', - colorHover: '{surface.300}' - }, - rowAction: { - backgroundHover: '{surface.800}', - backgroundHoverHighlight: '{surface.900}', - color: '{surface.400}', - colorHover: '{surface.300}' - } + headerCell: { + background: '{surface.0}', + backgroundHover: '{surface.100}', + borderColor: '{surface.200}', + textColor: '{surface.700}', + textColorHover: '{surface.800}' + }, + row: { + background: '{surface.0}', + backgroundStriped: '{surface.50}', + backgroundHover: '{surface.100}', + textColor: '{surface.700}', + textColorHover: '{surface.800}' + }, + bodyCell: { + borderColor: '{surface.200}', + borderColorSelected: '{primary.100}' + }, + footerCell: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + footer: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + dropPointColor: '{primary.color}', + resizerColor: '{primary.color}', + sortIcon: { + color: '{surface.500}', + colorHover: '{surface.600}' + }, + rowAction: { + backgroundHover: '{surface.100}', + backgroundHoverHighlight: '{surface.0}', + color: '{surface.500}', + colorHover: '{surface.500}' + } + }, + dark: { + header: { + background: '{surface.900}', + borderColor: '{surface.800}', + textColor: '{surface.0}' + }, + headerCell: { + background: '{surface.900}', + backgroundHover: '{surface.800}', + borderColor: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}' + }, + row: { + background: '{surface.900}', + backgroundStriped: '{surface.950}', + backgroundHover: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}' + }, + bodyCell: { + borderColor: '{surface.800}', + borderColorSelected: '{primary.900}' + }, + footerCell: { + background: '{surface.900}', + borderColor: '{surface.800}', + textColor: '{surface.0}' + }, + footer: { + background: '{surface.900}', + borderColor: '{surface.800}', + textColor: '{surface.0}' + }, + dropPointColor: '{primary.color}', + resizerColor: '{primary.color}', + sortIcon: { + color: '{surface.400}', + colorHover: '{surface.300}' + }, + rowAction: { + backgroundHover: '{surface.800}', + backgroundHoverHighlight: '{surface.900}', + color: '{surface.400}', + colorHover: '{surface.300}' } } } diff --git a/components/lib/themes/primeone/presets/aura/dataview/index.js b/components/lib/themes/primeone/presets/aura/dataview/index.js index 7c8c0fd0a..74dcee98f 100644 --- a/components/lib/themes/primeone/presets/aura/dataview/index.js +++ b/components/lib/themes/primeone/presets/aura/dataview/index.js @@ -1,37 +1,35 @@ export default { - variables: { - colorScheme: { - light: { - header: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - content: { - background: '{surface.0}', - textColor: '{surface.700}' - }, - footer: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - } + colorScheme: { + light: { + header: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - header: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - }, - content: { - background: '{surface.900}', - textColor: '{surface.0}' - }, - footer: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - } + content: { + background: '{surface.0}', + textColor: '{surface.700}' + }, + footer: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + } + }, + dark: { + header: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + content: { + background: '{surface.900}', + textColor: '{surface.0}' + }, + footer: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/dialog/index.js b/components/lib/themes/primeone/presets/aura/dialog/index.js index 9c3500db3..2eb3e7b6b 100644 --- a/components/lib/themes/primeone/presets/aura/dialog/index.js +++ b/components/lib/themes/primeone/presets/aura/dialog/index.js @@ -1,29 +1,27 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - headerIcon: { - color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - }, - headerIcon: { - color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' - } + headerIcon: { + color: '{surface.500}', + colorHover: '{surface.600}', + backgroundHover: '{surface.100}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + headerIcon: { + color: '{surface.400}', + colorHover: '{surface.300}', + backgroundHover: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/divider/index.js b/components/lib/themes/primeone/presets/aura/divider/index.js index 5a616b019..b3c8e88ef 100644 --- a/components/lib/themes/primeone/presets/aura/divider/index.js +++ b/components/lib/themes/primeone/presets/aura/divider/index.js @@ -1,23 +1,21 @@ export default { - variables: { - colorScheme: { - light: { - root: { - borderColor: '{surface.200}' - }, - content: { - background: '{surface.0}', - textColor: '{surface.700}' - } + colorScheme: { + light: { + root: { + borderColor: '{surface.200}' }, - dark: { - root: { - borderColor: '{surface.700}' - }, - content: { - background: '{surface.900}', - textColor: '{surface.0}' - } + content: { + background: '{surface.0}', + textColor: '{surface.700}' + } + }, + dark: { + root: { + borderColor: '{surface.700}' + }, + content: { + background: '{surface.900}', + textColor: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/fieldset/index.js b/components/lib/themes/primeone/presets/aura/fieldset/index.js index 91c926814..3e7537a70 100644 --- a/components/lib/themes/primeone/presets/aura/fieldset/index.js +++ b/components/lib/themes/primeone/presets/aura/fieldset/index.js @@ -1,37 +1,35 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - legend: { - backgroundHover: '{surface.100}', - textColor: '{surface.700}', - textColorHover: '{surface.800}' - }, - toggleIcon: { - color: '{surface.500}', - colorHover: '{surface.600}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - }, - legend: { - backgroundHover: '{surface.800}', - textColor: '{surface.0}', - textColorHover: '{surface.0}' - }, - toggleIcon: { - color: '{surface.400}', - colorHover: '{surface.300}' - } + legend: { + backgroundHover: '{surface.100}', + textColor: '{surface.700}', + textColorHover: '{surface.800}' + }, + toggleIcon: { + color: '{surface.500}', + colorHover: '{surface.600}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + legend: { + backgroundHover: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}' + }, + toggleIcon: { + color: '{surface.400}', + colorHover: '{surface.300}' } } } diff --git a/components/lib/themes/primeone/presets/aura/galleria/index.js b/components/lib/themes/primeone/presets/aura/galleria/index.js index 514e59b63..095c127e5 100644 --- a/components/lib/themes/primeone/presets/aura/galleria/index.js +++ b/components/lib/themes/primeone/presets/aura/galleria/index.js @@ -1,83 +1,81 @@ export default { - variables: { - colorScheme: { - light: { - navigator: { - backgroundHover: 'rgba(255, 255, 255, 0.1)', - color: '{surface.100}' - }, - thumbnailNavigator: { - backgroundHover: '{surface.200}', - color: '{surface.600}', - colorHover: '{surface.700}' - }, - thumbnailContainer: { - background: '{surface.50}' - }, - caption: { - background: 'rgba(0, 0, 0, 0.5)', - textColor: '{surface.100}' - }, - indicator: { - background: '{surface.200}', - backgroundHover: '{surface.300}', - backgroundActive: '{primary.color}' - }, - insetIndicators: { - background: 'rgba(0, 0, 0, 0.5)' - }, - insetIndicator: { - background: 'rgba(255, 255, 255, 0.4)', - backgroundHover: 'rgba(255, 255, 255, 0.4)', - backgroundActive: '{primary.color}' - }, - mask: { - background: 'rgba(0,0,0,0.9)' - }, - close: { - backgroundHover: 'rgba(255,255,255,0.1)', - color: '{surface.50}', - colorHover: '{surface.0}' - } + colorScheme: { + light: { + navigator: { + backgroundHover: 'rgba(255, 255, 255, 0.1)', + color: '{surface.100}' }, - dark: { - navigator: { - backgroundHover: 'rgba(255, 255, 255, 0.1)', - color: '{surface.400}' - }, - thumbnailNavigator: { - backgroundHover: '{surface.800}', - color: '{surface.400}', - colorHover: '{surface.300}' - }, - thumbnailContainer: { - background: '{surface.950}' - }, - caption: { - background: 'rgba(0, 0, 0, 0.5)', - textColor: '{surface.100}' - }, - indicator: { - background: '{surface.200}', - backgroundHover: '{surface.300}', - backgroundActive: '{primary.color}' - }, - insetIndicators: { - background: 'rgba(0, 0, 0, 0.5)' - }, - insetIndicator: { - background: 'rgba(255, 255, 255, 0.4)', - backgroundHover: 'rgba(255, 255, 255, 0.4)', - backgroundActive: '{primary.color}' - }, - mask: { - background: 'rgba(0,0,0,0.9)' - }, - close: { - backgroundHover: 'rgba(255,255,255,0.1)', - color: '{surface.50}', - colorHover: '{surface.0}' - } + thumbnailNavigator: { + backgroundHover: '{surface.200}', + color: '{surface.600}', + colorHover: '{surface.700}' + }, + thumbnailContainer: { + background: '{surface.50}' + }, + caption: { + background: 'rgba(0, 0, 0, 0.5)', + textColor: '{surface.100}' + }, + indicator: { + background: '{surface.200}', + backgroundHover: '{surface.300}', + backgroundActive: '{primary.color}' + }, + insetIndicators: { + background: 'rgba(0, 0, 0, 0.5)' + }, + insetIndicator: { + background: 'rgba(255, 255, 255, 0.4)', + backgroundHover: 'rgba(255, 255, 255, 0.4)', + backgroundActive: '{primary.color}' + }, + mask: { + background: 'rgba(0,0,0,0.9)' + }, + close: { + backgroundHover: 'rgba(255,255,255,0.1)', + color: '{surface.50}', + colorHover: '{surface.0}' + } + }, + dark: { + navigator: { + backgroundHover: 'rgba(255, 255, 255, 0.1)', + color: '{surface.400}' + }, + thumbnailNavigator: { + backgroundHover: '{surface.800}', + color: '{surface.400}', + colorHover: '{surface.300}' + }, + thumbnailContainer: { + background: '{surface.950}' + }, + caption: { + background: 'rgba(0, 0, 0, 0.5)', + textColor: '{surface.100}' + }, + indicator: { + background: '{surface.200}', + backgroundHover: '{surface.300}', + backgroundActive: '{primary.color}' + }, + insetIndicators: { + background: 'rgba(0, 0, 0, 0.5)' + }, + insetIndicator: { + background: 'rgba(255, 255, 255, 0.4)', + backgroundHover: 'rgba(255, 255, 255, 0.4)', + backgroundActive: '{primary.color}' + }, + mask: { + background: 'rgba(0,0,0,0.9)' + }, + close: { + backgroundHover: 'rgba(255,255,255,0.1)', + color: '{surface.50}', + colorHover: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/image/index.js b/components/lib/themes/primeone/presets/aura/image/index.js index 2420d80ec..63789536e 100644 --- a/components/lib/themes/primeone/presets/aura/image/index.js +++ b/components/lib/themes/primeone/presets/aura/image/index.js @@ -1,33 +1,31 @@ export default { - variables: { - colorScheme: { - light: { - previewIndicator: { - background: '{maskBackground}', - textColor: '{surface.200}' - }, - mask: { - background: 'rgba(0,0,0,0.9)' - }, - action: { - backgroundHover: 'rgba(255,255,255,0.1)', - color: '{surface.50}', - colorHover: '{surface.0}' - } + colorScheme: { + light: { + previewIndicator: { + background: '{maskBackground}', + textColor: '{surface.200}' }, - dark: { - previewIndicator: { - background: '{maskBackground}', - textColor: '{surface.200}' - }, - mask: { - background: 'rgba(0,0,0,0.9)' - }, - action: { - backgroundHover: 'rgba(255,255,255,0.1)', - color: '{surface.50}', - colorHover: '{surface.0}' - } + mask: { + background: 'rgba(0,0,0,0.9)' + }, + action: { + backgroundHover: 'rgba(255,255,255,0.1)', + color: '{surface.50}', + colorHover: '{surface.0}' + } + }, + dark: { + previewIndicator: { + background: '{maskBackground}', + textColor: '{surface.200}' + }, + mask: { + background: 'rgba(0,0,0,0.9)' + }, + action: { + backgroundHover: 'rgba(255,255,255,0.1)', + color: '{surface.50}', + colorHover: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/inlinemessage/index.js b/components/lib/themes/primeone/presets/aura/inlinemessage/index.js index e2622632b..b3e225fc6 100644 --- a/components/lib/themes/primeone/presets/aura/inlinemessage/index.js +++ b/components/lib/themes/primeone/presets/aura/inlinemessage/index.js @@ -1,81 +1,79 @@ export default { - variables: { - colorScheme: { - light: { - info: { - background: 'color-mix(in srgb, {blue.50}, transparent 5%)', - borderColor: '{blue.200}', - textColor: '{blue.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' - }, - success: { - background: 'color-mix(in srgb, {green.50}, transparent 5%)', - borderColor: '{green.200}', - textColor: '{green.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' - }, - warn: { - background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', - borderColor: '{yellow.200}', - textColor: '{yellow.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' - }, - error: { - background: 'color-mix(in srgb, {red.50}, transparent 5%)', - borderColor: '{red.200}', - textColor: '{red.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' - }, - secondary: { - background: '{surface.100}', - borderColor: '{surface.200}', - textColor: '{surface.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' - }, - contrast: { - background: '{surface.900}', - borderColor: '{surface.950}', - textColor: '{surface.50}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' - } + colorScheme: { + light: { + info: { + background: 'color-mix(in srgb, {blue.50}, transparent 5%)', + borderColor: '{blue.200}', + textColor: '{blue.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' }, - dark: { - info: { - background: 'color-mix(in srgb, {blue.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', - textColor: '{blue.500}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' - }, - success: { - background: 'color-mix(in srgb, {green.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', - textColor: '{green.500}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' - }, - warn: { - background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', - textColor: '{yellow.500}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' - }, - error: { - background: 'color-mix(in srgb, {red.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', - textColor: '{red.500}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' - }, - secondary: { - background: '{surface.800}', - borderColor: '{surface.700}', - textColor: '{surface.300}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' - }, - contrast: { - background: '{surface.0}', - borderColor: '{surface.100}', - textColor: '{surface.950}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' - } + success: { + background: 'color-mix(in srgb, {green.50}, transparent 5%)', + borderColor: '{green.200}', + textColor: '{green.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' + }, + warn: { + background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', + borderColor: '{yellow.200}', + textColor: '{yellow.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' + }, + error: { + background: 'color-mix(in srgb, {red.50}, transparent 5%)', + borderColor: '{red.200}', + textColor: '{red.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' + }, + secondary: { + background: '{surface.100}', + borderColor: '{surface.200}', + textColor: '{surface.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' + }, + contrast: { + background: '{surface.900}', + borderColor: '{surface.950}', + textColor: '{surface.50}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' + } + }, + dark: { + info: { + background: 'color-mix(in srgb, {blue.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', + textColor: '{blue.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)' + }, + success: { + background: 'color-mix(in srgb, {green.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', + textColor: '{green.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)' + }, + warn: { + background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', + textColor: '{yellow.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)' + }, + error: { + background: 'color-mix(in srgb, {red.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', + textColor: '{red.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)' + }, + secondary: { + background: '{surface.800}', + borderColor: '{surface.700}', + textColor: '{surface.300}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)' + }, + contrast: { + background: '{surface.0}', + borderColor: '{surface.100}', + textColor: '{surface.950}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)' } } } diff --git a/components/lib/themes/primeone/presets/aura/inplace/index.js b/components/lib/themes/primeone/presets/aura/inplace/index.js index 700fae8c7..f7dad4cf1 100644 --- a/components/lib/themes/primeone/presets/aura/inplace/index.js +++ b/components/lib/themes/primeone/presets/aura/inplace/index.js @@ -1,17 +1,15 @@ export default { - variables: { - colorScheme: { - light: { - display: { - backgroundHover: '{surface.100}', - textColorHover: '{surface.800}' - } - }, - dark: { - display: { - backgroundHover: '{surface.800}', - textColorHover: '{surface.0}' - } + colorScheme: { + light: { + display: { + backgroundHover: '{surface.100}', + textColorHover: '{surface.800}' + } + }, + dark: { + display: { + backgroundHover: '{surface.800}', + textColorHover: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/inputgroup/index.js b/components/lib/themes/primeone/presets/aura/inputgroup/index.js index bf437c874..dd34666e7 100644 --- a/components/lib/themes/primeone/presets/aura/inputgroup/index.js +++ b/components/lib/themes/primeone/presets/aura/inputgroup/index.js @@ -1,11 +1,7 @@ export default { - variables: { - common: { - addon: { - background: '{form.field.background.color}', - borderColor: '{form.field.border.color}', - textColor: '{form.field.placeholder.color}' - } - } + addon: { + background: '{form.field.background.color}', + borderColor: '{form.field.border.color}', + textColor: '{form.field.placeholder.color}' } }; diff --git a/components/lib/themes/primeone/presets/aura/inputswitch/index.js b/components/lib/themes/primeone/presets/aura/inputswitch/index.js index c64c81200..c690415ea 100644 --- a/components/lib/themes/primeone/presets/aura/inputswitch/index.js +++ b/components/lib/themes/primeone/presets/aura/inputswitch/index.js @@ -1,39 +1,37 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.300}', - backgroundInvalid: '{red.400}', - backgroundHover: '{surface.400}', - backgroundChecked: '{primary.500}', - backgroundCheckedHover: '{primary.600}', - borderRadius: '30px' - }, - handle: { - background: '{surface.0}', - backgroundHover: '{surface.0}', - backgroundChecked: '{surface.0}', - backgroundCheckedHover: '{surface.0}', - backgroundInvalid: '{surface.0}' - } + colorScheme: { + light: { + root: { + background: '{surface.300}', + backgroundInvalid: '{red.400}', + backgroundHover: '{surface.400}', + backgroundChecked: '{primary.500}', + backgroundCheckedHover: '{primary.600}', + borderRadius: '30px' }, - dark: { - root: { - background: '{surface.700}', - backgroundInvalid: '{red.300}', - backgroundHover: '{surface.600}', - backgroundChecked: '{primary.400}', - backgroundCheckedHover: '{primary.300}', - borderRadius: '30px' - }, - handle: { - background: '{surface.400}', - backgroundHover: '{surface.300}', - backgroundChecked: '{surface.900}', - backgroundCheckedHover: '{surface.900}', - backgroundInvalid: '{surface.900}' - } + handle: { + background: '{surface.0}', + backgroundHover: '{surface.0}', + backgroundChecked: '{surface.0}', + backgroundCheckedHover: '{surface.0}', + backgroundInvalid: '{surface.0}' + } + }, + dark: { + root: { + background: '{surface.700}', + backgroundInvalid: '{red.300}', + backgroundHover: '{surface.600}', + backgroundChecked: '{primary.400}', + backgroundCheckedHover: '{primary.300}', + borderRadius: '30px' + }, + handle: { + background: '{surface.400}', + backgroundHover: '{surface.300}', + backgroundChecked: '{surface.900}', + backgroundCheckedHover: '{surface.900}', + backgroundInvalid: '{surface.900}' } } } diff --git a/components/lib/themes/primeone/presets/aura/inputtext/index.js b/components/lib/themes/primeone/presets/aura/inputtext/index.js index ec22a7c88..c9fae444a 100644 --- a/components/lib/themes/primeone/presets/aura/inputtext/index.js +++ b/components/lib/themes/primeone/presets/aura/inputtext/index.js @@ -1,20 +1,16 @@ export default { - variables: { - common: { - root: { - background: '{form.field.background}', - backgroundDisabled: '{form.field.background.disabled}', - backgroundFilled: '{form.field.background.filled}', - backgroundFilledFocus: '{form.field.background.filled.focus}', - borderColor: '{form.field.border.color}', - borderColorHover: '{form.field.border.color.hover}', - borderColorFocus: '{form.field.border.color.focus}', - borderColorInvalid: '{form.field.border.color.invalid}', - textColor: '{form.field.text.color}', - textColorDisabled: '{form.field.text.disabled}', - placeholderTextColor: '{form.field.placeholder.text.color}', - boxShadow: '{form.field.box.shadow}' - } - } + root: { + background: '{form.field.background}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + backgroundFilledFocus: '{form.field.background.filled.focus}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorFocus: '{form.field.border.color.focus}', + borderColorInvalid: '{form.field.border.color.invalid}', + textColor: '{form.field.text.color}', + textColorDisabled: '{form.field.text.disabled}', + placeholderTextColor: '{form.field.placeholder.text.color}', + boxShadow: '{form.field.box.shadow}' } }; diff --git a/components/lib/themes/primeone/presets/aura/megamenu/index.js b/components/lib/themes/primeone/presets/aura/megamenu/index.js index 4f2486dfb..edae232a5 100644 --- a/components/lib/themes/primeone/presets/aura/megamenu/index.js +++ b/components/lib/themes/primeone/presets/aura/megamenu/index.js @@ -1,63 +1,61 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' }, - item: { - backgroundFocus: '{surface.100}', - text: { - color: '{surface.700}', - colorFocus: '{surface.800}' - }, - icon: { - color: '{surface.400}', - colorFocus: '{surface.500}' - } - }, - submenuHeader: { - textColor: '{surface.400}' - }, - separator: { - borderColor: '{surface.200}' - }, - mobileToggle: { - color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' } }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' + submenuHeader: { + textColor: '{surface.400}' + }, + separator: { + borderColor: '{surface.200}' + }, + mobileToggle: { + color: '{surface.500}', + colorHover: '{surface.600}', + backgroundHover: '{surface.100}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' }, - item: { - backgroundFocus: '{surface.800}', - text: { - color: '{surface.0}', - colorFocus: '{surface.0}' - }, - icon: { - color: '{surface.500}', - colorFocus: '{surface.400}' - } - }, - submenuHeader: { - textColor: '{surface.500}' - }, - separator: { - borderColor: '{surface.700}' - }, - toggleIcon: { - color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' } + }, + submenuHeader: { + textColor: '{surface.500}' + }, + separator: { + borderColor: '{surface.700}' + }, + toggleIcon: { + color: '{surface.400}', + colorHover: '{surface.300}', + backgroundHover: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/menu/index.js b/components/lib/themes/primeone/presets/aura/menu/index.js index 835af6c9a..6ea935ee0 100644 --- a/components/lib/themes/primeone/presets/aura/menu/index.js +++ b/components/lib/themes/primeone/presets/aura/menu/index.js @@ -1,53 +1,51 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' }, - item: { - backgroundFocus: '{surface.100}', - text: { - color: '{surface.700}', - colorFocus: '{surface.800}' - }, - icon: { - color: '{surface.400}', - colorFocus: '{surface.500}' - } - }, - submenuHeader: { - textColor: '{surface.400}' - }, - separator: { - borderColor: '{surface.200}' + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' } }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' + submenuHeader: { + textColor: '{surface.400}' + }, + separator: { + borderColor: '{surface.200}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' }, - item: { - backgroundFocus: '{surface.800}', - text: { - color: '{surface.0}', - colorFocus: '{surface.0}' - }, - icon: { - color: '{surface.500}', - colorFocus: '{surface.400}' - } - }, - submenuHeader: { - textColor: '{surface.500}' - }, - separator: { - borderColor: '{surface.700}' + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' } + }, + submenuHeader: { + textColor: '{surface.500}' + }, + separator: { + borderColor: '{surface.700}' } } } diff --git a/components/lib/themes/primeone/presets/aura/menubar/index.js b/components/lib/themes/primeone/presets/aura/menubar/index.js index 170bf1f6b..515e96e26 100644 --- a/components/lib/themes/primeone/presets/aura/menubar/index.js +++ b/components/lib/themes/primeone/presets/aura/menubar/index.js @@ -1,57 +1,55 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' }, - item: { - backgroundFocus: '{surface.100}', - text: { - color: '{surface.700}', - colorFocus: '{surface.800}' - }, - icon: { - color: '{surface.400}', - colorFocus: '{surface.500}' - } - }, - separator: { - borderColor: '{surface.200}' - }, - mobileToggle: { - color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' } }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' + separator: { + borderColor: '{surface.200}' + }, + mobileToggle: { + color: '{surface.500}', + colorHover: '{surface.600}', + backgroundHover: '{surface.100}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' }, - item: { - backgroundFocus: '{surface.800}', - text: { - color: '{surface.0}', - colorFocus: '{surface.0}' - }, - icon: { - color: '{surface.500}', - colorFocus: '{surface.400}' - } - }, - separator: { - borderColor: '{surface.700}' - }, - mobileToggle: { - color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' } + }, + separator: { + borderColor: '{surface.700}' + }, + mobileToggle: { + color: '{surface.400}', + colorHover: '{surface.300}', + backgroundHover: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/message/index.js b/components/lib/themes/primeone/presets/aura/message/index.js index 0ec1b9cf4..b7a404b44 100644 --- a/components/lib/themes/primeone/presets/aura/message/index.js +++ b/components/lib/themes/primeone/presets/aura/message/index.js @@ -1,93 +1,91 @@ export default { - variables: { - colorScheme: { - light: { - info: { - background: 'color-mix(in srgb, {blue.50}, transparent 5%)', - borderColor: '{blue.200}', - textColor: '{blue.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', - closeBackgroundHover: '{blue.100}' - }, - success: { - background: 'color-mix(in srgb, {green.50}, transparent 5%)', - borderColor: '{green.200}', - textColor: '{green.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', - closeBackgroundHover: '{green.100}' - }, - warn: { - background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', - borderColor: '{yellow.200}', - textColor: '{yellow.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', - closeBackgroundHover: '{yellow.100}' - }, - error: { - background: 'color-mix(in srgb, {red.50}, transparent 5%)', - borderColor: '{red.200}', - textColor: '{red.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', - closeBackgroundHover: '{red.100}' - }, - secondary: { - background: '{surface.100}', - borderColor: '{surface.200}', - textColor: '{surface.600}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', - closeBackgroundHover: '{surface.200}' - }, - contrast: { - background: '{surface.900}', - borderColor: '{surface.950}', - textColor: '{surface.50}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', - closeBackgroundHover: '{surface.800}' - } + colorScheme: { + light: { + info: { + background: 'color-mix(in srgb, {blue.50}, transparent 5%)', + borderColor: '{blue.200}', + textColor: '{blue.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', + closeBackgroundHover: '{blue.100}' }, - dark: { - info: { - background: 'color-mix(in srgb, {blue.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', - textColor: '{blue.500}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', - closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' - }, - success: { - background: 'color-mix(in srgb, {green.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', - textColor: '{green.500}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', - closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' - }, - warn: { - background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', - textColor: '{yellow.500}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', - closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' - }, - error: { - background: 'color-mix(in srgb, {red.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', - textColor: '{red.500}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', - closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' - }, - secondary: { - background: '{surface.800}', - borderColor: '{surface.700}', - textColor: '{surface.300}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', - closeBackgroundHover: '{surface.700}' - }, - contrast: { - background: '{surface.0}', - borderColor: '{surface.100}', - textColor: '{surface.950}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', - closeBackgroundHover: '{surface.100}' - } + success: { + background: 'color-mix(in srgb, {green.50}, transparent 5%)', + borderColor: '{green.200}', + textColor: '{green.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', + closeBackgroundHover: '{green.100}' + }, + warn: { + background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', + borderColor: '{yellow.200}', + textColor: '{yellow.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', + closeBackgroundHover: '{yellow.100}' + }, + error: { + background: 'color-mix(in srgb, {red.50}, transparent 5%)', + borderColor: '{red.200}', + textColor: '{red.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', + closeBackgroundHover: '{red.100}' + }, + secondary: { + background: '{surface.100}', + borderColor: '{surface.200}', + textColor: '{surface.600}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', + closeBackgroundHover: '{surface.200}' + }, + contrast: { + background: '{surface.900}', + borderColor: '{surface.950}', + textColor: '{surface.50}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', + closeBackgroundHover: '{surface.800}' + } + }, + dark: { + info: { + background: 'color-mix(in srgb, {blue.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', + textColor: '{blue.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', + closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' + }, + success: { + background: 'color-mix(in srgb, {green.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', + textColor: '{green.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', + closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' + }, + warn: { + background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', + textColor: '{yellow.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', + closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' + }, + error: { + background: 'color-mix(in srgb, {red.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', + textColor: '{red.500}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', + closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' + }, + secondary: { + background: '{surface.800}', + borderColor: '{surface.700}', + textColor: '{surface.300}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', + closeBackgroundHover: '{surface.700}' + }, + contrast: { + background: '{surface.0}', + borderColor: '{surface.100}', + textColor: '{surface.950}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', + closeBackgroundHover: '{surface.100}' } } } diff --git a/components/lib/themes/primeone/presets/aura/metergroup/index.js b/components/lib/themes/primeone/presets/aura/metergroup/index.js index 997500fea..a39dbd66e 100644 --- a/components/lib/themes/primeone/presets/aura/metergroup/index.js +++ b/components/lib/themes/primeone/presets/aura/metergroup/index.js @@ -1,15 +1,13 @@ export default { - variables: { - colorScheme: { - light: { - meters: { - background: '{surface.200}' - } - }, - dark: { - meters: { - background: '{surface.700}' - } + colorScheme: { + light: { + meters: { + background: '{surface.200}' + } + }, + dark: { + meters: { + background: '{surface.700}' } } } diff --git a/components/lib/themes/primeone/presets/aura/orderlist/index.js b/components/lib/themes/primeone/presets/aura/orderlist/index.js index a9493a43f..5a5079036 100644 --- a/components/lib/themes/primeone/presets/aura/orderlist/index.js +++ b/components/lib/themes/primeone/presets/aura/orderlist/index.js @@ -1,61 +1,59 @@ export default { - variables: { - colorScheme: { - light: { - list: { - background: '{surface.0}', - borderColor: '{surface.200}' - }, - header: { - textColor: '{surface.500}' - }, - item: { - background: 'transparent', - backgroundHover: '{surface.100}', - backgroundFocus: '{surface.100}', - textColor: '{surface.700}', - textColorHover: '{surface.800}', - textColorFocus: '{surface.800}' - }, - control: { - background: '{surface.100}', - backgroundHover: '{surface.200}', - backgroundActive: '{surface.300}', - borderColor: '{surface.100}', - borderColorHover: '{surface.200}', - borderColorActive: '{surface.300}', - textColor: '{surface.600}', - textColorHover: '{surface.700}', - textColorActive: '{surface.800}' - } + colorScheme: { + light: { + list: { + background: '{surface.0}', + borderColor: '{surface.200}' }, - dark: { - list: { - background: '{surface.900}', - borderColor: '{surface.700}' - }, - header: { - textColor: '{surface.400}' - }, - item: { - background: 'transparent', - backgroundHover: '{surface.800}', - backgroundFocus: '{surface.800}', - textColor: '{surface.0}', - textColorHover: '{surface.0}', - textColorFocus: '{surface.0}' - }, - control: { - background: '{surface.800}', - backgroundHover: '{surface.700}', - backgroundActive: '{surface.600}', - borderColor: '{surface.800}', - borderColorHover: '{surface.700}', - borderColorActive: '{surface.600}', - textColor: '{surface.300}', - textColorHover: '{surface.200}', - textColorActive: '{surface.100}' - } + header: { + textColor: '{surface.500}' + }, + item: { + background: 'transparent', + backgroundHover: '{surface.100}', + backgroundFocus: '{surface.100}', + textColor: '{surface.700}', + textColorHover: '{surface.800}', + textColorFocus: '{surface.800}' + }, + control: { + background: '{surface.100}', + backgroundHover: '{surface.200}', + backgroundActive: '{surface.300}', + borderColor: '{surface.100}', + borderColorHover: '{surface.200}', + borderColorActive: '{surface.300}', + textColor: '{surface.600}', + textColorHover: '{surface.700}', + textColorActive: '{surface.800}' + } + }, + dark: { + list: { + background: '{surface.900}', + borderColor: '{surface.700}' + }, + header: { + textColor: '{surface.400}' + }, + item: { + background: 'transparent', + backgroundHover: '{surface.800}', + backgroundFocus: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}', + textColorFocus: '{surface.0}' + }, + control: { + background: '{surface.800}', + backgroundHover: '{surface.700}', + backgroundActive: '{surface.600}', + borderColor: '{surface.800}', + borderColorHover: '{surface.700}', + borderColorActive: '{surface.600}', + textColor: '{surface.300}', + textColorHover: '{surface.200}', + textColorActive: '{surface.100}' } } } diff --git a/components/lib/themes/primeone/presets/aura/organizationchart/index.js b/components/lib/themes/primeone/presets/aura/organizationchart/index.js index 48b77db82..5bb4d2b49 100644 --- a/components/lib/themes/primeone/presets/aura/organizationchart/index.js +++ b/components/lib/themes/primeone/presets/aura/organizationchart/index.js @@ -1,24 +1,22 @@ export default { - variables: { - colorScheme: { - light: { - node: { - background: '{surface.0}', - backgroundHover: '{surface.100}', - borderColor: '{surface.200}', - textColor: '{surface.700}', - textColorHover: '{surface.800}' - }, - toggleIcon: { - background: '{surface.0}', - borderColor: '{surface.200}', - color: '{surface.500}' - }, - connector: { - color: '{surface.200}' - } + colorScheme: { + light: { + node: { + background: '{surface.0}', + backgroundHover: '{surface.100}', + borderColor: '{surface.200}', + textColor: '{surface.700}', + textColorHover: '{surface.800}' }, - dark: {} - } + toggleIcon: { + background: '{surface.0}', + borderColor: '{surface.200}', + color: '{surface.500}' + }, + connector: { + color: '{surface.200}' + } + }, + dark: {} } }; diff --git a/components/lib/themes/primeone/presets/aura/overlaypanel/index.js b/components/lib/themes/primeone/presets/aura/overlaypanel/index.js index 97747284b..6408951c7 100644 --- a/components/lib/themes/primeone/presets/aura/overlaypanel/index.js +++ b/components/lib/themes/primeone/presets/aura/overlaypanel/index.js @@ -1,29 +1,27 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - closeIcon: { - color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - }, - closeIcon: { - color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' - } + closeIcon: { + color: '{surface.500}', + colorHover: '{surface.600}', + backgroundHover: '{surface.100}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + closeIcon: { + color: '{surface.400}', + colorHover: '{surface.300}', + backgroundHover: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/paginator/index.js b/components/lib/themes/primeone/presets/aura/paginator/index.js index ad5402fb0..e55232a3c 100644 --- a/components/lib/themes/primeone/presets/aura/paginator/index.js +++ b/components/lib/themes/primeone/presets/aura/paginator/index.js @@ -1,33 +1,31 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - textColor: '{surface.700}' - }, - navigator: { - backgroundHover: '{surface.100}', - color: '{surface.500}', - colorHover: '{surface.600}' - }, - currentPageReport: { - textColor: '{surface.500}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + textColor: '{surface.700}' }, - dark: { - root: { - background: '{surface.900}', - textColor: '{surface.0}' - }, - navigator: { - backgroundHover: '{surface.800}', - color: '{surface.400}', - colorHover: '{surface.300}' - }, - currentPageReport: { - textColor: '{surface.400}' - } + navigator: { + backgroundHover: '{surface.100}', + color: '{surface.500}', + colorHover: '{surface.600}' + }, + currentPageReport: { + textColor: '{surface.500}' + } + }, + dark: { + root: { + background: '{surface.900}', + textColor: '{surface.0}' + }, + navigator: { + backgroundHover: '{surface.800}', + color: '{surface.400}', + colorHover: '{surface.300}' + }, + currentPageReport: { + textColor: '{surface.400}' } } } diff --git a/components/lib/themes/primeone/presets/aura/panel/index.js b/components/lib/themes/primeone/presets/aura/panel/index.js index 9c3500db3..2eb3e7b6b 100644 --- a/components/lib/themes/primeone/presets/aura/panel/index.js +++ b/components/lib/themes/primeone/presets/aura/panel/index.js @@ -1,29 +1,27 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - headerIcon: { - color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - }, - headerIcon: { - color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' - } + headerIcon: { + color: '{surface.500}', + colorHover: '{surface.600}', + backgroundHover: '{surface.100}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + headerIcon: { + color: '{surface.400}', + colorHover: '{surface.300}', + backgroundHover: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/panelmenu/index.js b/components/lib/themes/primeone/presets/aura/panelmenu/index.js index ba3a9f8aa..ccd4359d2 100644 --- a/components/lib/themes/primeone/presets/aura/panelmenu/index.js +++ b/components/lib/themes/primeone/presets/aura/panelmenu/index.js @@ -1,40 +1,38 @@ export default { - variables: { - colorScheme: { - light: { - panel: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - item: { - backgroundFocus: '{surface.100}', - text: { - color: '{surface.700}', - colorFocus: '{surface.800}' - }, - icon: { - color: '{surface.400}', - colorFocus: '{surface.500}' - } - } + colorScheme: { + light: { + panel: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - panel: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' }, - item: { - backgroundFocus: '{surface.800}', - text: { - color: '{surface.0}', - colorFocus: '{surface.0}' - }, - icon: { - color: '{surface.500}', - colorFocus: '{surface.400}' - } + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' + } + } + }, + dark: { + panel: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' + }, + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' } } } diff --git a/components/lib/themes/primeone/presets/aura/password/index.js b/components/lib/themes/primeone/presets/aura/password/index.js index d5716aef5..4423c6115 100644 --- a/components/lib/themes/primeone/presets/aura/password/index.js +++ b/components/lib/themes/primeone/presets/aura/password/index.js @@ -1,41 +1,39 @@ export default { - variables: { - colorScheme: { - light: { - meter: { - borderColor: '{surface.200}' - }, - icon: { - color: '{surface.500}' - }, - strength: { - backgroundWeak: '{red.500}', - backgroundMedium: '{amber.500}', - backgroundStrong: '{green.500}' - }, - overlay: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - } + colorScheme: { + light: { + meter: { + borderColor: '{surface.200}' }, - dark: { - meter: { - borderColor: '{surface.700}' - }, - icon: { - color: '{surface.400}' - }, - strength: { - backgroundWeak: '{red.400}', - backgroundMedium: '{amber.400}', - backgroundStrong: '{green.400}' - }, - overlay: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - } + icon: { + color: '{surface.500}' + }, + strength: { + backgroundWeak: '{red.500}', + backgroundMedium: '{amber.500}', + backgroundStrong: '{green.500}' + }, + overlay: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + } + }, + dark: { + meter: { + borderColor: '{surface.700}' + }, + icon: { + color: '{surface.400}' + }, + strength: { + backgroundWeak: '{red.400}', + backgroundMedium: '{amber.400}', + backgroundStrong: '{green.400}' + }, + overlay: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/picklist/index.js b/components/lib/themes/primeone/presets/aura/picklist/index.js index a9493a43f..5a5079036 100644 --- a/components/lib/themes/primeone/presets/aura/picklist/index.js +++ b/components/lib/themes/primeone/presets/aura/picklist/index.js @@ -1,61 +1,59 @@ export default { - variables: { - colorScheme: { - light: { - list: { - background: '{surface.0}', - borderColor: '{surface.200}' - }, - header: { - textColor: '{surface.500}' - }, - item: { - background: 'transparent', - backgroundHover: '{surface.100}', - backgroundFocus: '{surface.100}', - textColor: '{surface.700}', - textColorHover: '{surface.800}', - textColorFocus: '{surface.800}' - }, - control: { - background: '{surface.100}', - backgroundHover: '{surface.200}', - backgroundActive: '{surface.300}', - borderColor: '{surface.100}', - borderColorHover: '{surface.200}', - borderColorActive: '{surface.300}', - textColor: '{surface.600}', - textColorHover: '{surface.700}', - textColorActive: '{surface.800}' - } + colorScheme: { + light: { + list: { + background: '{surface.0}', + borderColor: '{surface.200}' }, - dark: { - list: { - background: '{surface.900}', - borderColor: '{surface.700}' - }, - header: { - textColor: '{surface.400}' - }, - item: { - background: 'transparent', - backgroundHover: '{surface.800}', - backgroundFocus: '{surface.800}', - textColor: '{surface.0}', - textColorHover: '{surface.0}', - textColorFocus: '{surface.0}' - }, - control: { - background: '{surface.800}', - backgroundHover: '{surface.700}', - backgroundActive: '{surface.600}', - borderColor: '{surface.800}', - borderColorHover: '{surface.700}', - borderColorActive: '{surface.600}', - textColor: '{surface.300}', - textColorHover: '{surface.200}', - textColorActive: '{surface.100}' - } + header: { + textColor: '{surface.500}' + }, + item: { + background: 'transparent', + backgroundHover: '{surface.100}', + backgroundFocus: '{surface.100}', + textColor: '{surface.700}', + textColorHover: '{surface.800}', + textColorFocus: '{surface.800}' + }, + control: { + background: '{surface.100}', + backgroundHover: '{surface.200}', + backgroundActive: '{surface.300}', + borderColor: '{surface.100}', + borderColorHover: '{surface.200}', + borderColorActive: '{surface.300}', + textColor: '{surface.600}', + textColorHover: '{surface.700}', + textColorActive: '{surface.800}' + } + }, + dark: { + list: { + background: '{surface.900}', + borderColor: '{surface.700}' + }, + header: { + textColor: '{surface.400}' + }, + item: { + background: 'transparent', + backgroundHover: '{surface.800}', + backgroundFocus: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}', + textColorFocus: '{surface.0}' + }, + control: { + background: '{surface.800}', + backgroundHover: '{surface.700}', + backgroundActive: '{surface.600}', + borderColor: '{surface.800}', + borderColorHover: '{surface.700}', + borderColorActive: '{surface.600}', + textColor: '{surface.300}', + textColorHover: '{surface.200}', + textColorActive: '{surface.100}' } } } diff --git a/components/lib/themes/primeone/presets/aura/progressbar/index.js b/components/lib/themes/primeone/presets/aura/progressbar/index.js index 80d8cada3..71ad5387b 100644 --- a/components/lib/themes/primeone/presets/aura/progressbar/index.js +++ b/components/lib/themes/primeone/presets/aura/progressbar/index.js @@ -1,15 +1,13 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.200}' - } - }, - dark: { - root: { - background: '{surface.700}' - } + colorScheme: { + light: { + root: { + background: '{surface.200}' + } + }, + dark: { + root: { + background: '{surface.700}' } } } diff --git a/components/lib/themes/primeone/presets/aura/progressspinner/index.js b/components/lib/themes/primeone/presets/aura/progressspinner/index.js index 94bb9a926..26792b212 100644 --- a/components/lib/themes/primeone/presets/aura/progressspinner/index.js +++ b/components/lib/themes/primeone/presets/aura/progressspinner/index.js @@ -1,21 +1,19 @@ export default { - variables: { - colorScheme: { - light: { - root: { - '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}' - } + colorScheme: { + light: { + root: { + '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}' } } } diff --git a/components/lib/themes/primeone/presets/aura/radiobutton/index.js b/components/lib/themes/primeone/presets/aura/radiobutton/index.js index 8ca7b464b..c0a49839f 100644 --- a/components/lib/themes/primeone/presets/aura/radiobutton/index.js +++ b/components/lib/themes/primeone/presets/aura/radiobutton/index.js @@ -1,27 +1,23 @@ export default { - variables: { - common: { - root: { - width: '1.25rem', - height: '1.25rem', - background: '{form.field.background}', - backgroundChecked: '{form.field.background}', - backgroundCheckedHover: '{form.field.background}', - backgroundDisabled: '{form.field.background.disabled}', - backgroundFilled: '{form.field.background.filled}', - borderColor: '{form.field.border.color}', - borderColorHover: '{form.field.border.color.hover}', - borderColorChecked: '{primary.color}', - borderColorCheckedHover: '{primary.hover.color}', - borderColorInvalid: '{form.field.border.color.invalid}', - boxShadow: '{form.field.box.shadow}' - }, - icon: { - size: '0.75rem', - colorChecked: '{primary.color}', - colorCheckedHover: '{primary.hover.color}', - colorDisabled: '{form.field.text.disabled}' - } - } + root: { + width: '1.25rem', + height: '1.25rem', + background: '{form.field.background}', + backgroundChecked: '{form.field.background}', + backgroundCheckedHover: '{form.field.background}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorChecked: '{primary.color}', + borderColorCheckedHover: '{primary.hover.color}', + borderColorInvalid: '{form.field.border.color.invalid}', + boxShadow: '{form.field.box.shadow}' + }, + icon: { + size: '0.75rem', + colorChecked: '{primary.color}', + colorCheckedHover: '{primary.hover.color}', + colorDisabled: '{form.field.text.disabled}' } }; diff --git a/components/lib/themes/primeone/presets/aura/rating/index.js b/components/lib/themes/primeone/presets/aura/rating/index.js index d7f1687c7..e1cfca2e2 100644 --- a/components/lib/themes/primeone/presets/aura/rating/index.js +++ b/components/lib/themes/primeone/presets/aura/rating/index.js @@ -1,19 +1,17 @@ export default { - variables: { - colorScheme: { - light: { - icon: { - color: '{surface.500}', - colorHover: '{primary.color}', - colorActive: '{primary.color}' - } - }, - dark: { - icon: { - color: '{surface.400}', - colorHover: '{primary.color}', - colorActive: '{primary.color}' - } + colorScheme: { + light: { + icon: { + color: '{surface.500}', + colorHover: '{primary.color}', + colorActive: '{primary.color}' + } + }, + dark: { + icon: { + color: '{surface.400}', + colorHover: '{primary.color}', + colorActive: '{primary.color}' } } } diff --git a/components/lib/themes/primeone/presets/aura/scrollpanel/index.js b/components/lib/themes/primeone/presets/aura/scrollpanel/index.js index 2615dbc8d..93b3bada9 100644 --- a/components/lib/themes/primeone/presets/aura/scrollpanel/index.js +++ b/components/lib/themes/primeone/presets/aura/scrollpanel/index.js @@ -1,15 +1,13 @@ export default { - variables: { - colorScheme: { - light: { - bar: { - background: '{surface.100}' - } - }, - dark: { - bar: { - background: '{surface.800}' - } + colorScheme: { + light: { + bar: { + background: '{surface.100}' + } + }, + dark: { + bar: { + background: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/scrolltop/index.js b/components/lib/themes/primeone/presets/aura/scrolltop/index.js index 25398e20d..fa342cf06 100644 --- a/components/lib/themes/primeone/presets/aura/scrolltop/index.js +++ b/components/lib/themes/primeone/presets/aura/scrolltop/index.js @@ -1,21 +1,19 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.800}', - backgroundHover: '{surface.700}', - textColor: '{surface.100}', - textColorHover: '{surface.0}' - } - }, - dark: { - root: { - background: '{surface.800}', - backgroundHover: '{surface.700}', - textColor: '{surface.300}', - textColorHover: '{surface.200}' - } + colorScheme: { + light: { + root: { + background: '{surface.800}', + backgroundHover: '{surface.700}', + textColor: '{surface.100}', + textColorHover: '{surface.0}' + } + }, + dark: { + root: { + background: '{surface.800}', + backgroundHover: '{surface.700}', + textColor: '{surface.300}', + textColorHover: '{surface.200}' } } } diff --git a/components/lib/themes/primeone/presets/aura/selectbutton/index.js b/components/lib/themes/primeone/presets/aura/selectbutton/index.js index f646cf051..591dc3522 100644 --- a/components/lib/themes/primeone/presets/aura/selectbutton/index.js +++ b/components/lib/themes/primeone/presets/aura/selectbutton/index.js @@ -1,33 +1,31 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.100}', - backgroundDisabled: '{form.field.background.disabled}', - borderColorInvalid: '{form.field.border.color.invalid}' - }, - item: { - backgroundChecked: '{surface.0}', - textColor: '{surface.500}', - textColorHover: '{surface.700}', - textColorChecked: '{surface.900}', - textColorDisabled: '{form.field.text.color.disabled}' - } + colorScheme: { + light: { + root: { + background: '{surface.100}', + backgroundDisabled: '{form.field.background.disabled}', + borderColorInvalid: '{form.field.border.color.invalid}' }, - dark: { - root: { - background: '{surface.950}', - backgroundDisabled: '{form.field.background.disabled}', - borderColorInvalid: '{form.field.border.color.invalid}' - }, - item: { - backgroundChecked: '{surface.800}', - textColor: '{surface.400}', - textColorHover: '{surface.300}', - textColorChecked: '{surface.0}', - textColorDisabled: '{form.field.text.color.disabled}' - } + item: { + backgroundChecked: '{surface.0}', + textColor: '{surface.500}', + textColorHover: '{surface.700}', + textColorChecked: '{surface.900}', + textColorDisabled: '{form.field.text.color.disabled}' + } + }, + dark: { + root: { + background: '{surface.950}', + backgroundDisabled: '{form.field.background.disabled}', + borderColorInvalid: '{form.field.border.color.invalid}' + }, + item: { + backgroundChecked: '{surface.800}', + textColor: '{surface.400}', + textColorHover: '{surface.300}', + textColorChecked: '{surface.0}', + textColorDisabled: '{form.field.text.color.disabled}' } } } diff --git a/components/lib/themes/primeone/presets/aura/sidebar/index.js b/components/lib/themes/primeone/presets/aura/sidebar/index.js index 9c3500db3..2eb3e7b6b 100644 --- a/components/lib/themes/primeone/presets/aura/sidebar/index.js +++ b/components/lib/themes/primeone/presets/aura/sidebar/index.js @@ -1,29 +1,27 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - headerIcon: { - color: '{surface.500}', - colorHover: '{surface.600}', - backgroundHover: '{surface.100}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - }, - headerIcon: { - color: '{surface.400}', - colorHover: '{surface.300}', - backgroundHover: '{surface.800}' - } + headerIcon: { + color: '{surface.500}', + colorHover: '{surface.600}', + backgroundHover: '{surface.100}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + headerIcon: { + color: '{surface.400}', + colorHover: '{surface.300}', + backgroundHover: '{surface.800}' } } } diff --git a/components/lib/themes/primeone/presets/aura/skeleton/index.js b/components/lib/themes/primeone/presets/aura/skeleton/index.js index d5de3eb7b..16aa0c517 100644 --- a/components/lib/themes/primeone/presets/aura/skeleton/index.js +++ b/components/lib/themes/primeone/presets/aura/skeleton/index.js @@ -1,17 +1,15 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.200}', - animationBackground: 'rgba(255,255,255,0.4)' - } - }, - dark: { - root: { - background: 'rgba(255, 255, 255, 0.06)', - animationBackground: 'rgba(255, 255, 255, 0.04)' - } + colorScheme: { + light: { + root: { + background: '{surface.200}', + animationBackground: 'rgba(255,255,255,0.4)' + } + }, + dark: { + root: { + background: 'rgba(255, 255, 255, 0.06)', + animationBackground: 'rgba(255, 255, 255, 0.04)' } } } diff --git a/components/lib/themes/primeone/presets/aura/slider/index.js b/components/lib/themes/primeone/presets/aura/slider/index.js index e4ebdc390..b4441a5fe 100644 --- a/components/lib/themes/primeone/presets/aura/slider/index.js +++ b/components/lib/themes/primeone/presets/aura/slider/index.js @@ -1,31 +1,29 @@ export default { - variables: { - colorScheme: { - light: { - track: { - background: '{surface.200}' - }, - handle: { - background: '{surface.200}', - backgroundHover: '{surface.200}', - contentBackground: '{surface.0}' - }, - range: { - background: '{primary.color}' - } + colorScheme: { + light: { + track: { + background: '{surface.200}' }, - dark: { - track: { - background: '{surface.700}' - }, - handle: { - background: '{surface.700}', - backgroundHover: '{surface.700}', - contentBackground: '{surface.950}' - }, - range: { - background: '{primary.color}' - } + handle: { + background: '{surface.200}', + backgroundHover: '{surface.200}', + contentBackground: '{surface.0}' + }, + range: { + background: '{primary.color}' + } + }, + dark: { + track: { + background: '{surface.700}' + }, + handle: { + background: '{surface.700}', + backgroundHover: '{surface.700}', + contentBackground: '{surface.950}' + }, + range: { + background: '{primary.color}' } } } diff --git a/components/lib/themes/primeone/presets/aura/speeddial/index.js b/components/lib/themes/primeone/presets/aura/speeddial/index.js index f4b7834bd..5ed51a2d9 100644 --- a/components/lib/themes/primeone/presets/aura/speeddial/index.js +++ b/components/lib/themes/primeone/presets/aura/speeddial/index.js @@ -1,15 +1,13 @@ export default { - variables: { - colorScheme: { - light: { - item: { - background: '{surface.100}', - backgroundHover: '{surface.200}', - textColor: '{surface.600}', - textColorHover: '{surface.700}' - } - }, - dark: {} - } + colorScheme: { + light: { + item: { + background: '{surface.100}', + backgroundHover: '{surface.200}', + textColor: '{surface.600}', + textColorHover: '{surface.700}' + } + }, + dark: {} } }; diff --git a/components/lib/themes/primeone/presets/aura/splitter/index.js b/components/lib/themes/primeone/presets/aura/splitter/index.js index a5608b299..98a2d218d 100644 --- a/components/lib/themes/primeone/presets/aura/splitter/index.js +++ b/components/lib/themes/primeone/presets/aura/splitter/index.js @@ -1,25 +1,23 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - gutter: { - background: '{surface.200}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - }, - gutter: { - background: '{surface.700}' - } + gutter: { + background: '{surface.200}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + gutter: { + background: '{surface.700}' } } } diff --git a/components/lib/themes/primeone/presets/aura/steps/index.js b/components/lib/themes/primeone/presets/aura/steps/index.js index 25e30d0ab..5fda1e822 100644 --- a/components/lib/themes/primeone/presets/aura/steps/index.js +++ b/components/lib/themes/primeone/presets/aura/steps/index.js @@ -1,37 +1,35 @@ export default { - variables: { - colorScheme: { - light: { - connector: { - borderColor: '{surface.200}' - }, - item: { - textColor: '{surface.700}', - textColorActive: '{primary.color}' - }, - marker: { - background: '{surface.0}', - backgroundActive: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.500}', - textColorActive: '{primary.color}' - } + colorScheme: { + light: { + connector: { + borderColor: '{surface.200}' }, - dark: { - connector: { - borderColor: '{surface.700}' - }, - item: { - textColor: '{surface.0}', - textColorActive: '{primary.color}' - }, - marker: { - background: '{surface.900}', - backgroundActive: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.400}', - textColorActive: '{primary.color}' - } + item: { + textColor: '{surface.700}', + textColorActive: '{primary.color}' + }, + marker: { + background: '{surface.0}', + backgroundActive: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.500}', + textColorActive: '{primary.color}' + } + }, + dark: { + connector: { + borderColor: '{surface.700}' + }, + item: { + textColor: '{surface.0}', + textColorActive: '{primary.color}' + }, + marker: { + background: '{surface.900}', + backgroundActive: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.400}', + textColorActive: '{primary.color}' } } } diff --git a/components/lib/themes/primeone/presets/aura/tabmenu/index.js b/components/lib/themes/primeone/presets/aura/tabmenu/index.js index cc56d6e64..05b0c6e2e 100644 --- a/components/lib/themes/primeone/presets/aura/tabmenu/index.js +++ b/components/lib/themes/primeone/presets/aura/tabmenu/index.js @@ -1,27 +1,25 @@ export default { - variables: { - colorScheme: { - light: { - nav: { - background: '{surface.0}', - borderColor: '{surface.200}' - }, - header: { - borderColor: '{surface.200}', - textColor: '{surface.500}', - textColorHover: '{surface.700}' - } + colorScheme: { + light: { + nav: { + background: '{surface.0}', + borderColor: '{surface.200}' }, - dark: { - nav: { - background: '{surface.900}', - borderColor: '{surface.700}' - }, - header: { - borderColor: '{surface.700}', - textColor: '{surface.400}', - textColorHover: '{surface.0}' - } + header: { + borderColor: '{surface.200}', + textColor: '{surface.500}', + textColorHover: '{surface.700}' + } + }, + dark: { + nav: { + background: '{surface.900}', + borderColor: '{surface.700}' + }, + header: { + borderColor: '{surface.700}', + textColor: '{surface.400}', + textColorHover: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/tabview/index.js b/components/lib/themes/primeone/presets/aura/tabview/index.js index d6c5ef2b9..c138b963f 100644 --- a/components/lib/themes/primeone/presets/aura/tabview/index.js +++ b/components/lib/themes/primeone/presets/aura/tabview/index.js @@ -1,47 +1,45 @@ export default { - variables: { - colorScheme: { - light: { - nav: { - background: '{surface.0}', - borderColor: '{surface.200}' - }, - header: { - borderColor: '{surface.200}', - textColor: '{surface.500}', - textColorHover: '{surface.700}' - }, - navigatorIcon: { - background: '{surface.0}', - color: '{surface.500}', - colorHover: '{surface.700}', - boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' - }, - content: { - background: '{surface.0}', - textColor: '{surface.700}' - } + colorScheme: { + light: { + nav: { + background: '{surface.0}', + borderColor: '{surface.200}' }, - dark: { - nav: { - background: '{surface.900}', - borderColor: '{surface.700}' - }, - header: { - borderColor: '{surface.700}', - textColor: '{surface.400}', - textColorHover: '{surface.0}' - }, - navigatorIcon: { - background: '{surface.900}', - color: '{surface.400}', - colorHover: '{surface.0}', - boxShadow: '0px 0px 10px 50px color-mix(in srgb, var(--p-surface-900), transparent 50%)' - }, - content: { - background: '{surface.900}', - textColor: '{surface.0}' - } + header: { + borderColor: '{surface.200}', + textColor: '{surface.500}', + textColorHover: '{surface.700}' + }, + navigatorIcon: { + background: '{surface.0}', + color: '{surface.500}', + colorHover: '{surface.700}', + boxShadow: '0px 0px 10px 50px rgba(255, 255, 255, 0.6)' + }, + content: { + background: '{surface.0}', + textColor: '{surface.700}' + } + }, + dark: { + nav: { + background: '{surface.900}', + borderColor: '{surface.700}' + }, + header: { + borderColor: '{surface.700}', + textColor: '{surface.400}', + textColorHover: '{surface.0}' + }, + navigatorIcon: { + background: '{surface.900}', + color: '{surface.400}', + colorHover: '{surface.0}', + boxShadow: '0px 0px 10px 50px color-mix(in srgb, var(--p-surface-900), transparent 50%)' + }, + content: { + background: '{surface.900}', + textColor: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/tag/index.js b/components/lib/themes/primeone/presets/aura/tag/index.js index 6aed00174..ca3aafb79 100644 --- a/components/lib/themes/primeone/presets/aura/tag/index.js +++ b/components/lib/themes/primeone/presets/aura/tag/index.js @@ -1,65 +1,63 @@ export default { - variables: { - colorScheme: { - light: { - primary: { - background: '{primary.100}', - textColor: '{primary.700}' - }, - secondary: { - background: '{surface.100}', - textColor: '{surface.600}' - }, - success: { - background: '{green.100}', - textColor: '{green.700}' - }, - info: { - background: '{sky.100}', - textColor: '{sky.700}' - }, - warn: { - background: '{orange.100}', - textColor: '{orange.700}' - }, - danger: { - background: '{red.100}', - textColor: '{red.700}' - }, - contrast: { - background: '{surface.950}', - textColor: '{surface.0}' - } + colorScheme: { + light: { + primary: { + background: '{primary.100}', + textColor: '{primary.700}' }, - dark: { - primary: { - background: 'color-mix(in srgb, var(--p-primary-500), transparent 84%)', - textColor: '{primary.300}' - }, - secondary: { - background: '{surface.800}', - textColor: '{surface.300}' - }, - success: { - background: 'color-mix(in srgb, var(--p-green-500), transparent 84%)', - textColor: '{green.300}' - }, - info: { - background: 'color-mix(in srgb, var(--p-sky-500), transparent 84%)', - textColor: '{sky.300}' - }, - warn: { - background: 'color-mix(in srgb, var(--p-orange-500), transparent 84%)', - textColor: '{orange.300}' - }, - danger: { - background: 'color-mix(in srgb, var(--p-red-500), transparent 84%)', - textColor: '{red.300}' - }, - contrast: { - background: '{surface.0}', - textColor: '{surface.950}' - } + secondary: { + background: '{surface.100}', + textColor: '{surface.600}' + }, + success: { + background: '{green.100}', + textColor: '{green.700}' + }, + info: { + background: '{sky.100}', + textColor: '{sky.700}' + }, + warn: { + background: '{orange.100}', + textColor: '{orange.700}' + }, + danger: { + background: '{red.100}', + textColor: '{red.700}' + }, + contrast: { + background: '{surface.950}', + textColor: '{surface.0}' + } + }, + dark: { + primary: { + background: 'color-mix(in srgb, var(--p-primary-500), transparent 84%)', + textColor: '{primary.300}' + }, + secondary: { + background: '{surface.800}', + textColor: '{surface.300}' + }, + success: { + background: 'color-mix(in srgb, var(--p-green-500), transparent 84%)', + textColor: '{green.300}' + }, + info: { + background: 'color-mix(in srgb, var(--p-sky-500), transparent 84%)', + textColor: '{sky.300}' + }, + warn: { + background: 'color-mix(in srgb, var(--p-orange-500), transparent 84%)', + textColor: '{orange.300}' + }, + danger: { + background: 'color-mix(in srgb, var(--p-red-500), transparent 84%)', + textColor: '{red.300}' + }, + contrast: { + background: '{surface.0}', + textColor: '{surface.950}' } } } diff --git a/components/lib/themes/primeone/presets/aura/terminal/index.js b/components/lib/themes/primeone/presets/aura/terminal/index.js index b2bd56ff8..b7070a1bc 100644 --- a/components/lib/themes/primeone/presets/aura/terminal/index.js +++ b/components/lib/themes/primeone/presets/aura/terminal/index.js @@ -1,16 +1,14 @@ export default { - variables: { - colorScheme: { - light: { - background: '{surface.0}', - borderColor: '{surface.300}', - textColor: '{surface.700}' - }, - dark: { - background: '{surface.950}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - } + colorScheme: { + light: { + background: '{surface.0}', + borderColor: '{surface.300}', + textColor: '{surface.700}' + }, + dark: { + background: '{surface.950}', + borderColor: '{surface.700}', + textColor: '{surface.0}' } } }; diff --git a/components/lib/themes/primeone/presets/aura/textarea/index.js b/components/lib/themes/primeone/presets/aura/textarea/index.js index ec22a7c88..c9fae444a 100644 --- a/components/lib/themes/primeone/presets/aura/textarea/index.js +++ b/components/lib/themes/primeone/presets/aura/textarea/index.js @@ -1,20 +1,16 @@ export default { - variables: { - common: { - root: { - background: '{form.field.background}', - backgroundDisabled: '{form.field.background.disabled}', - backgroundFilled: '{form.field.background.filled}', - backgroundFilledFocus: '{form.field.background.filled.focus}', - borderColor: '{form.field.border.color}', - borderColorHover: '{form.field.border.color.hover}', - borderColorFocus: '{form.field.border.color.focus}', - borderColorInvalid: '{form.field.border.color.invalid}', - textColor: '{form.field.text.color}', - textColorDisabled: '{form.field.text.disabled}', - placeholderTextColor: '{form.field.placeholder.text.color}', - boxShadow: '{form.field.box.shadow}' - } - } + root: { + background: '{form.field.background}', + backgroundDisabled: '{form.field.background.disabled}', + backgroundFilled: '{form.field.background.filled}', + backgroundFilledFocus: '{form.field.background.filled.focus}', + borderColor: '{form.field.border.color}', + borderColorHover: '{form.field.border.color.hover}', + borderColorFocus: '{form.field.border.color.focus}', + borderColorInvalid: '{form.field.border.color.invalid}', + textColor: '{form.field.text.color}', + textColorDisabled: '{form.field.text.disabled}', + placeholderTextColor: '{form.field.placeholder.text.color}', + boxShadow: '{form.field.box.shadow}' } }; diff --git a/components/lib/themes/primeone/presets/aura/tieredmenu/index.js b/components/lib/themes/primeone/presets/aura/tieredmenu/index.js index 862a4be55..1813399e6 100644 --- a/components/lib/themes/primeone/presets/aura/tieredmenu/index.js +++ b/components/lib/themes/primeone/presets/aura/tieredmenu/index.js @@ -1,47 +1,45 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + item: { + backgroundFocus: '{surface.100}', + text: { + color: '{surface.700}', + colorFocus: '{surface.800}' }, - item: { - backgroundFocus: '{surface.100}', - text: { - color: '{surface.700}', - colorFocus: '{surface.800}' - }, - icon: { - color: '{surface.400}', - colorFocus: '{surface.500}' - } - }, - separator: { - borderColor: '{surface.200}' + icon: { + color: '{surface.400}', + colorFocus: '{surface.500}' } }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' + separator: { + borderColor: '{surface.200}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' + }, + item: { + backgroundFocus: '{surface.800}', + text: { + color: '{surface.0}', + colorFocus: '{surface.0}' }, - item: { - backgroundFocus: '{surface.800}', - text: { - color: '{surface.0}', - colorFocus: '{surface.0}' - }, - icon: { - color: '{surface.500}', - colorFocus: '{surface.400}' - } - }, - separator: { - borderColor: '{surface.700}' + icon: { + color: '{surface.500}', + colorFocus: '{surface.400}' } + }, + separator: { + borderColor: '{surface.700}' } } } diff --git a/components/lib/themes/primeone/presets/aura/timeline/index.js b/components/lib/themes/primeone/presets/aura/timeline/index.js index c39bddb1f..c80c4e3a9 100644 --- a/components/lib/themes/primeone/presets/aura/timeline/index.js +++ b/components/lib/themes/primeone/presets/aura/timeline/index.js @@ -1,25 +1,23 @@ export default { - variables: { - colorScheme: { - light: { - marker: { - background: '{surface.0}', - borderColor: '{surface.200}', - contentColor: '{primary.color}' - }, - connector: { - color: '{surface.200}' - } + colorScheme: { + light: { + marker: { + background: '{surface.0}', + borderColor: '{surface.200}', + contentColor: '{primary.color}' }, - dark: { - marker: { - background: '{surface.900}', - borderColor: '{surface.700}', - contentColor: '{primary.color}' - }, - connector: { - color: '{surface.700}' - } + connector: { + color: '{surface.200}' + } + }, + dark: { + marker: { + background: '{surface.900}', + borderColor: '{surface.700}', + contentColor: '{primary.color}' + }, + connector: { + color: '{surface.700}' } } } diff --git a/components/lib/themes/primeone/presets/aura/toast/index.js b/components/lib/themes/primeone/presets/aura/toast/index.js index a0a3c4b71..6c2d502a4 100644 --- a/components/lib/themes/primeone/presets/aura/toast/index.js +++ b/components/lib/themes/primeone/presets/aura/toast/index.js @@ -1,107 +1,105 @@ export default { - variables: { - colorScheme: { - light: { - blur: '1.5px', - info: { - background: 'color-mix(in srgb, {blue.50}, transparent 5%)', - borderColor: '{blue.200}', - textColor: '{blue.600}', - detailTextColor: '{surface.700}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', - closeBackgroundHover: '{blue.100}' - }, - success: { - background: 'color-mix(in srgb, {green.50}, transparent 5%)', - borderColor: '{green.200}', - textColor: '{green.600}', - detailTextColor: '{surface.700}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', - closeBackgroundHover: '{green.100}' - }, - warn: { - background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', - borderColor: '{yellow.200}', - textColor: '{yellow.600}', - detailTextColor: '{surface.700}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', - closeBackgroundHover: '{yellow.100}' - }, - error: { - background: 'color-mix(in srgb, {red.50}, transparent 5%)', - borderColor: '{red.200}', - textColor: '{red.600}', - detailTextColor: '{surface.700}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', - closeBackgroundHover: '{red.100}' - }, - secondary: { - background: '{surface.100}', - borderColor: '{surface.200}', - textColor: '{surface.600}', - detailTextColor: '{surface.700}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', - closeBackgroundHover: '{surface.200}' - }, - contrast: { - background: '{surface.900}', - borderColor: '{surface.950}', - textColor: '{surface.50}', - detailTextColor: '{surface.0}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', - closeBackgroundHover: '{surface.800}' - } + colorScheme: { + light: { + blur: '1.5px', + info: { + background: 'color-mix(in srgb, {blue.50}, transparent 5%)', + borderColor: '{blue.200}', + textColor: '{blue.600}', + detailTextColor: '{surface.700}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', + closeBackgroundHover: '{blue.100}' }, - dark: { - blur: '10px', - info: { - background: 'color-mix(in srgb, {blue.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', - textColor: '{blue.500}', - detailTextColor: '{surface.0}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', - closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' - }, - success: { - background: 'color-mix(in srgb, {green.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', - textColor: '{green.500}', - detailTextColor: '{surface.0}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', - closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' - }, - warn: { - background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', - textColor: '{yellow.500}', - detailTextColor: '{surface.0}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', - closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' - }, - error: { - background: 'color-mix(in srgb, {red.500}, transparent 84%)', - borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', - textColor: '{red.500}', - detailTextColor: '{surface.0}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', - closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' - }, - secondary: { - background: '{surface.800}', - borderColor: '{surface.700}', - textColor: '{surface.300}', - detailTextColor: '{surface.0}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', - closeBackgroundHover: '{surface.700}' - }, - contrast: { - background: '{surface.0}', - borderColor: '{surface.100}', - textColor: '{surface.950}', - detailTextColor: '{surface.950}', - boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', - closeBackgroundHover: '{surface.100}' - } + success: { + background: 'color-mix(in srgb, {green.50}, transparent 5%)', + borderColor: '{green.200}', + textColor: '{green.600}', + detailTextColor: '{surface.700}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', + closeBackgroundHover: '{green.100}' + }, + warn: { + background: 'color-mix(in srgb,{yellow.50}, transparent 5%)', + borderColor: '{yellow.200}', + textColor: '{yellow.600}', + detailTextColor: '{surface.700}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', + closeBackgroundHover: '{yellow.100}' + }, + error: { + background: 'color-mix(in srgb, {red.50}, transparent 5%)', + borderColor: '{red.200}', + textColor: '{red.600}', + detailTextColor: '{surface.700}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', + closeBackgroundHover: '{red.100}' + }, + secondary: { + background: '{surface.100}', + borderColor: '{surface.200}', + textColor: '{surface.600}', + detailTextColor: '{surface.700}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', + closeBackgroundHover: '{surface.200}' + }, + contrast: { + background: '{surface.900}', + borderColor: '{surface.950}', + textColor: '{surface.50}', + detailTextColor: '{surface.0}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', + closeBackgroundHover: '{surface.800}' + } + }, + dark: { + blur: '10px', + info: { + background: 'color-mix(in srgb, {blue.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)', + textColor: '{blue.500}', + detailTextColor: '{surface.0}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)', + closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' + }, + success: { + background: 'color-mix(in srgb, {green.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)', + textColor: '{green.500}', + detailTextColor: '{surface.0}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)', + closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' + }, + warn: { + background: 'color-mix(in srgb, {yellow.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)', + textColor: '{yellow.500}', + detailTextColor: '{surface.0}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)', + closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' + }, + error: { + background: 'color-mix(in srgb, {red.500}, transparent 84%)', + borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)', + textColor: '{red.500}', + detailTextColor: '{surface.0}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)', + closeBackgroundHover: 'rgba(255, 255, 255, 0.05)' + }, + secondary: { + background: '{surface.800}', + borderColor: '{surface.700}', + textColor: '{surface.300}', + detailTextColor: '{surface.0}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)', + closeBackgroundHover: '{surface.700}' + }, + contrast: { + background: '{surface.0}', + borderColor: '{surface.100}', + textColor: '{surface.950}', + detailTextColor: '{surface.950}', + boxShadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)', + closeBackgroundHover: '{surface.100}' } } } diff --git a/components/lib/themes/primeone/presets/aura/togglebutton/index.js b/components/lib/themes/primeone/presets/aura/togglebutton/index.js index 8f1762bc2..0a12984e1 100644 --- a/components/lib/themes/primeone/presets/aura/togglebutton/index.js +++ b/components/lib/themes/primeone/presets/aura/togglebutton/index.js @@ -1,45 +1,43 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.100}', - backgroundDisabled: '{form.field.background.disabled}', - borderColorInvalid: '{form.field.border.color.invalid}' - }, - item: { - backgroundChecked: '{surface.0}', - textColor: '{surface.500}', - textColorHover: '{surface.700}', - textColorChecked: '{surface.900}', - textColorDisabled: '{form.field.text.color.disabled}' - }, - itemIcon: { - color: '{surface.500}', - colorHover: '{surface.700}', - colorChecked: '{surface.900}', - colorDisabled: '{form.field.text.color.disabled}' - } + colorScheme: { + light: { + root: { + background: '{surface.100}', + backgroundDisabled: '{form.field.background.disabled}', + borderColorInvalid: '{form.field.border.color.invalid}' }, - dark: { - root: { - background: '{surface.950}', - backgroundDisabled: '{form.field.background.disabled}', - borderColorInvalid: '{form.field.border.color.invalid}' - }, - item: { - backgroundChecked: '{surface.800}', - textColor: '{surface.400}', - textColorHover: '{surface.300}', - textColorChecked: '{surface.0}', - textColorDisabled: '{form.field.text.color.disabled}' - }, - itemIcon: { - color: '{surface.400}', - colorHover: '{surface.300}', - colorChecked: '{surface.0}', - colorDisabled: '{form.field.text.color.disabled}' - } + item: { + backgroundChecked: '{surface.0}', + textColor: '{surface.500}', + textColorHover: '{surface.700}', + textColorChecked: '{surface.900}', + textColorDisabled: '{form.field.text.color.disabled}' + }, + itemIcon: { + color: '{surface.500}', + colorHover: '{surface.700}', + colorChecked: '{surface.900}', + colorDisabled: '{form.field.text.color.disabled}' + } + }, + dark: { + root: { + background: '{surface.950}', + backgroundDisabled: '{form.field.background.disabled}', + borderColorInvalid: '{form.field.border.color.invalid}' + }, + item: { + backgroundChecked: '{surface.800}', + textColor: '{surface.400}', + textColorHover: '{surface.300}', + textColorChecked: '{surface.0}', + textColorDisabled: '{form.field.text.color.disabled}' + }, + itemIcon: { + color: '{surface.400}', + colorHover: '{surface.300}', + colorChecked: '{surface.0}', + colorDisabled: '{form.field.text.color.disabled}' } } } diff --git a/components/lib/themes/primeone/presets/aura/toolbar/index.js b/components/lib/themes/primeone/presets/aura/toolbar/index.js index c63e2a308..1022a5cc7 100644 --- a/components/lib/themes/primeone/presets/aura/toolbar/index.js +++ b/components/lib/themes/primeone/presets/aura/toolbar/index.js @@ -1,19 +1,17 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - } - }, - dark: { - root: { - background: '{surface.900}', - borderColor: '{surface.700}', - textColor: '{surface.0}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + } + }, + dark: { + root: { + background: '{surface.900}', + borderColor: '{surface.700}', + textColor: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/tooltip/index.js b/components/lib/themes/primeone/presets/aura/tooltip/index.js index 287325742..af58c1afe 100644 --- a/components/lib/themes/primeone/presets/aura/tooltip/index.js +++ b/components/lib/themes/primeone/presets/aura/tooltip/index.js @@ -1,17 +1,15 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.700}', - textColor: '{surface.0}' - } - }, - dark: { - root: { - background: '{surface.700}', - textColor: '{surface.0}' - } + colorScheme: { + light: { + root: { + background: '{surface.700}', + textColor: '{surface.0}' + } + }, + dark: { + root: { + background: '{surface.700}', + textColor: '{surface.0}' } } } diff --git a/components/lib/themes/primeone/presets/aura/tree/index.js b/components/lib/themes/primeone/presets/aura/tree/index.js index 3fa3691af..096ddcc1c 100644 --- a/components/lib/themes/primeone/presets/aura/tree/index.js +++ b/components/lib/themes/primeone/presets/aura/tree/index.js @@ -1,53 +1,51 @@ export default { - variables: { - colorScheme: { - light: { - root: { - background: '{surface.0}', - textColor: '{surface.700}' - }, - node: { - backgroundHover: '{surface.100}', - textColor: '{surface.700}', - textColorHover: '{surface.800}' - }, - nodeIcon: { - color: '{surface.500}', - colorHover: '{surface.600}' - }, - toggle: { - backgroundHover: '{surface.100}', - backgroundHoverHighlight: '{surface.0}', - color: '{surface.500}', - colorHover: '{surface.600}' - }, - indeterminate: { - color: '{surface.500}' - } + colorScheme: { + light: { + root: { + background: '{surface.0}', + textColor: '{surface.700}' }, - dark: { - root: { - background: '{surface.900}', - textColor: '{surface.0}' - }, - node: { - backgroundHover: '{surface.800}', - textColor: '{surface.0}', - textColorHover: '{surface.0}' - }, - nodeIcon: { - color: '{surface.400}', - colorHover: '{surface.300}' - }, - toggle: { - backgroundHover: '{surface.800}', - backgroundHoverHighlight: '{surface.900}', - color: '{surface.400}', - colorHover: '{surface.300}' - }, - indeterminate: { - color: '{surface.400}' - } + node: { + backgroundHover: '{surface.100}', + textColor: '{surface.700}', + textColorHover: '{surface.800}' + }, + nodeIcon: { + color: '{surface.500}', + colorHover: '{surface.600}' + }, + toggle: { + backgroundHover: '{surface.100}', + backgroundHoverHighlight: '{surface.0}', + color: '{surface.500}', + colorHover: '{surface.600}' + }, + indeterminate: { + color: '{surface.500}' + } + }, + dark: { + root: { + background: '{surface.900}', + textColor: '{surface.0}' + }, + node: { + backgroundHover: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}' + }, + nodeIcon: { + color: '{surface.400}', + colorHover: '{surface.300}' + }, + toggle: { + backgroundHover: '{surface.800}', + backgroundHoverHighlight: '{surface.900}', + color: '{surface.400}', + colorHover: '{surface.300}' + }, + indeterminate: { + color: '{surface.400}' } } } diff --git a/components/lib/themes/primeone/presets/aura/treetable/index.js b/components/lib/themes/primeone/presets/aura/treetable/index.js index 5bf28831a..d76fd376d 100644 --- a/components/lib/themes/primeone/presets/aura/treetable/index.js +++ b/components/lib/themes/primeone/presets/aura/treetable/index.js @@ -1,103 +1,101 @@ export default { - variables: { - colorScheme: { - light: { - header: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - headerCell: { - background: '{surface.0}', - backgroundHover: '{surface.100}', - borderColor: '{surface.200}', - textColor: '{surface.700}', - textColorHover: '{surface.800}' - }, - row: { - background: '{surface.0}', - backgroundStriped: '{surface.50}', - backgroundHover: '{surface.100}', - textColor: '{surface.700}', - textColorHover: '{surface.800}' - }, - bodyCell: { - borderColor: '{surface.200}', - borderColorSelected: '{primary.100}' - }, - footerCell: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - footer: { - background: '{surface.0}', - borderColor: '{surface.200}', - textColor: '{surface.700}' - }, - resizerColor: '{primary.color}', - sortIcon: { - color: '{surface.500}', - colorHover: '{surface.600}' - }, - toggle: { - backgroundHover: '{surface.100}', - backgroundHoverHighlight: '{surface.0}', - color: '{surface.500}', - colorHover: '{surface.600}' - }, - indeterminate: { - color: '{surface.500}' - } + colorScheme: { + light: { + header: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' }, - dark: { - header: { - background: '{surface.900}', - borderColor: '{surface.800}', - textColor: '{surface.0}' - }, - headerCell: { - background: '{surface.900}', - backgroundHover: '{surface.800}', - borderColor: '{surface.800}', - textColor: '{surface.0}', - textColorHover: '{surface.0}' - }, - row: { - background: '{surface.900}', - backgroundStriped: '{surface.950}', - backgroundHover: '{surface.800}', - textColor: '{surface.0}', - textColorHover: '{surface.0}' - }, - bodyCell: { - borderColor: '{surface.800}', - borderColorSelected: '{primary.900}' - }, - footerCell: { - background: '{surface.900}', - borderColor: '{surface.800}', - textColor: '{surface.0}' - }, - footer: { - background: '{surface.900}', - borderColor: '{surface.800}', - textColor: '{surface.0}' - }, - resizerColor: '{primary.color}', - sortIcon: { - color: '{surface.400}', - colorHover: '{surface.300}' - }, - toggle: { - backgroundHover: '{surface.800}', - backgroundHoverHighlight: '{surface.900}', - color: '{surface.400}', - colorHover: '{surface.300}' - }, - indeterminate: { - color: '{surface.400}' - } + headerCell: { + background: '{surface.0}', + backgroundHover: '{surface.100}', + borderColor: '{surface.200}', + textColor: '{surface.700}', + textColorHover: '{surface.800}' + }, + row: { + background: '{surface.0}', + backgroundStriped: '{surface.50}', + backgroundHover: '{surface.100}', + textColor: '{surface.700}', + textColorHover: '{surface.800}' + }, + bodyCell: { + borderColor: '{surface.200}', + borderColorSelected: '{primary.100}' + }, + footerCell: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + footer: { + background: '{surface.0}', + borderColor: '{surface.200}', + textColor: '{surface.700}' + }, + resizerColor: '{primary.color}', + sortIcon: { + color: '{surface.500}', + colorHover: '{surface.600}' + }, + toggle: { + backgroundHover: '{surface.100}', + backgroundHoverHighlight: '{surface.0}', + color: '{surface.500}', + colorHover: '{surface.600}' + }, + indeterminate: { + color: '{surface.500}' + } + }, + dark: { + header: { + background: '{surface.900}', + borderColor: '{surface.800}', + textColor: '{surface.0}' + }, + headerCell: { + background: '{surface.900}', + backgroundHover: '{surface.800}', + borderColor: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}' + }, + row: { + background: '{surface.900}', + backgroundStriped: '{surface.950}', + backgroundHover: '{surface.800}', + textColor: '{surface.0}', + textColorHover: '{surface.0}' + }, + bodyCell: { + borderColor: '{surface.800}', + borderColorSelected: '{primary.900}' + }, + footerCell: { + background: '{surface.900}', + borderColor: '{surface.800}', + textColor: '{surface.0}' + }, + footer: { + background: '{surface.900}', + borderColor: '{surface.800}', + textColor: '{surface.0}' + }, + resizerColor: '{primary.color}', + sortIcon: { + color: '{surface.400}', + colorHover: '{surface.300}' + }, + toggle: { + backgroundHover: '{surface.800}', + backgroundHoverHighlight: '{surface.900}', + color: '{surface.400}', + colorHover: '{surface.300}' + }, + indeterminate: { + color: '{surface.400}' } } }