From 5f45abcdf7c9a3fea837fba9221e5f1a85cd9ba5 Mon Sep 17 00:00:00 2001 From: Cagatay Civici Date: Tue, 14 May 2024 14:04:59 +0300 Subject: [PATCH] Nora initial token values --- components/lib/themes/aura/button/index.js | 12 +- components/lib/themes/aura/checkbox/index.js | 4 +- components/lib/themes/aura/index.js | 4 +- .../lib/themes/aura/progressbar/index.js | 2 +- .../lib/themes/aura/radiobutton/index.js | 4 +- components/lib/themes/lara/button/index.js | 12 +- components/lib/themes/lara/checkbox/index.js | 4 +- .../lib/themes/lara/progressbar/index.js | 2 +- .../lib/themes/lara/radiobutton/index.js | 4 +- components/lib/themes/lara/stepper/index.js | 2 +- components/lib/themes/lara/steps/index.js | 2 +- components/lib/themes/lara/tag/index.js | 4 +- components/lib/themes/nora/button/index.js | 14 +- components/lib/themes/nora/checkbox/index.js | 4 +- components/lib/themes/nora/index.js | 196 +++++++++--------- .../lib/themes/nora/progressbar/index.js | 2 +- .../lib/themes/nora/radiobutton/index.js | 4 +- layouts/AppConfigurator.vue | 104 +++++++--- plugins/app-state.js | 2 +- themes/app-theme.js | 5 +- 20 files changed, 212 insertions(+), 175 deletions(-) diff --git a/components/lib/themes/aura/button/index.js b/components/lib/themes/aura/button/index.js index c882910e3..de9aba170 100644 --- a/components/lib/themes/aura/button/index.js +++ b/components/lib/themes/aura/button/index.js @@ -36,9 +36,9 @@ export default { borderColor: '{primary.color}', hoverBorderColor: '{primary.hover.color}', activeBorderColor: '{primary.active.color}', - color: '{primary.inverseColor}', - hoverColor: '{primary.inverseColor}', - activeColor: '{primary.inverseColor}', + color: '{primary.contrast.color}', + hoverColor: '{primary.contrast.color}', + activeColor: '{primary.contrast.color}', focusRing: { color: '{primary.color}', shadow: 'none' @@ -263,9 +263,9 @@ export default { borderColor: '{primary.color}', hoverBorderColor: '{primary.hover.color}', activeBorderColor: '{primary.active.color}', - color: '{primary.inverseColor}', - hoverColor: '{primary.inverseColor}', - activeColor: '{primary.inverseColor}', + color: '{primary.contrast.color}', + hoverColor: '{primary.contrast.color}', + activeColor: '{primary.contrast.color}', focusRing: { color: '{primary.color}', shadow: 'none' diff --git a/components/lib/themes/aura/checkbox/index.js b/components/lib/themes/aura/checkbox/index.js index cb273d396..6371dbd6d 100644 --- a/components/lib/themes/aura/checkbox/index.js +++ b/components/lib/themes/aura/checkbox/index.js @@ -27,8 +27,8 @@ export default { icon: { size: '0.875rem', color: '{form.field.color}', - checkedColor: '{primary.inverse.color}', - checkedHoverColor: '{primary.inverse.color}', + checkedColor: '{primary.contrast.color}', + checkedHoverColor: '{primary.contrast.color}', disabledColor: '{form.field.disabled.color}' } }; diff --git a/components/lib/themes/aura/index.js b/components/lib/themes/aura/index.js index 9af153e0e..d95bbb8ca 100644 --- a/components/lib/themes/aura/index.js +++ b/components/lib/themes/aura/index.js @@ -159,7 +159,7 @@ export default { padding: '0.25rem 0.25rem', gap: '2px', header: { - padding: '0.5rem 0.75rem 0 0.75rem' + padding: '0.5rem 0.75rem 0.25rem 0.75rem' }, option: { padding: '0.5rem 0.75rem', @@ -368,7 +368,7 @@ export default { background: '{surface.950}', disabledBackground: '{surface.700}', filledBackground: '{surface.800}', - filledFocusBackground: '{surface.950}', + filledFocusBackground: '{surface.800}', borderColor: '{surface.700}', hoverBorderColor: '{surface.600}', focusBorderColor: '{primary.color}', diff --git a/components/lib/themes/aura/progressbar/index.js b/components/lib/themes/aura/progressbar/index.js index 2b73141b2..cce54bfe9 100644 --- a/components/lib/themes/aura/progressbar/index.js +++ b/components/lib/themes/aura/progressbar/index.js @@ -8,7 +8,7 @@ export default { background: '{primary.color}' }, label: { - color: '{primary.inverse.color}', + color: '{primary.contrast.color}', fontSize: '0.75rem', fontWeight: '600' } diff --git a/components/lib/themes/aura/radiobutton/index.js b/components/lib/themes/aura/radiobutton/index.js index ac57be7de..c95d1610f 100644 --- a/components/lib/themes/aura/radiobutton/index.js +++ b/components/lib/themes/aura/radiobutton/index.js @@ -25,8 +25,8 @@ export default { }, icon: { size: '0.75rem', - checkedColor: '{primary.inverse.color}', - checkedHoverColor: '{primary.inverse.color}', + checkedColor: '{primary.contrast.color}', + checkedHoverColor: '{primary.contrast.color}', disabledColor: '{form.field.disabled.color}' } }; diff --git a/components/lib/themes/lara/button/index.js b/components/lib/themes/lara/button/index.js index 375220208..1c45e2fcf 100644 --- a/components/lib/themes/lara/button/index.js +++ b/components/lib/themes/lara/button/index.js @@ -36,9 +36,9 @@ export default { borderColor: '{primary.color}', hoverBorderColor: '{primary.hover.color}', activeBorderColor: '{primary.active.color}', - color: '{primary.inverseColor}', - hoverColor: '{primary.inverseColor}', - activeColor: '{primary.inverseColor}', + color: '{primary.contrast.color}', + hoverColor: '{primary.contrast.color}', + activeColor: '{primary.contrast.color}', focusRing: { color: 'transparent', shadow: '0 0 0 0.2rem {primary.200}' @@ -263,9 +263,9 @@ export default { borderColor: '{primary.color}', hoverBorderColor: '{primary.hover.color}', activeBorderColor: '{primary.active.color}', - color: '{primary.inverseColor}', - hoverColor: '{primary.inverseColor}', - activeColor: '{primary.inverseColor}', + color: '{primary.contrast.color}', + hoverColor: '{primary.contrast.color}', + activeColor: '{primary.contrast.color}', focusRing: { color: 'transparent', shadow: '0 0 0 0.2rem color-mix(in srgb, {primary.color}, transparent 80%)' diff --git a/components/lib/themes/lara/checkbox/index.js b/components/lib/themes/lara/checkbox/index.js index 3f229dbe1..0ca671678 100644 --- a/components/lib/themes/lara/checkbox/index.js +++ b/components/lib/themes/lara/checkbox/index.js @@ -27,8 +27,8 @@ export default { icon: { size: '1rem', color: '{form.field.color}', - checkedColor: '{primary.inverse.color}', - checkedHoverColor: '{primary.inverse.color}', + checkedColor: '{primary.contrast.color}', + checkedHoverColor: '{primary.contrast.color}', disabledColor: '{form.field.disabled.color}' } }; diff --git a/components/lib/themes/lara/progressbar/index.js b/components/lib/themes/lara/progressbar/index.js index 5b20a600f..e475a7e02 100644 --- a/components/lib/themes/lara/progressbar/index.js +++ b/components/lib/themes/lara/progressbar/index.js @@ -8,7 +8,7 @@ export default { background: '{primary.color}' }, label: { - color: '{primary.inverse.color}', + color: '{primary.contrast.color}', fontSize: '0.875rem', fontWeight: '600' } diff --git a/components/lib/themes/lara/radiobutton/index.js b/components/lib/themes/lara/radiobutton/index.js index cd448e6eb..34e6649de 100644 --- a/components/lib/themes/lara/radiobutton/index.js +++ b/components/lib/themes/lara/radiobutton/index.js @@ -25,8 +25,8 @@ export default { }, icon: { size: '0.875rem', - checkedColor: '{primary.inverse.color}', - checkedHoverColor: '{primary.inverse.color}', + checkedColor: '{primary.contrast.color}', + checkedHoverColor: '{primary.contrast.color}', disabledColor: '{form.field.disabled.color}' } }; diff --git a/components/lib/themes/lara/stepper/index.js b/components/lib/themes/lara/stepper/index.js index 2ded9545e..f7e072d87 100644 --- a/components/lib/themes/lara/stepper/index.js +++ b/components/lib/themes/lara/stepper/index.js @@ -35,7 +35,7 @@ export default { activeBackground: '{primary.color}', borderColor: '{content.border.color}', color: '{text.muted.color}', - activeColor: '{primary.inverse.color}', + activeColor: '{primary.contrast.color}', size: '2.25rem', fontSize: '1.125rem', fontWeight: '500', diff --git a/components/lib/themes/lara/steps/index.js b/components/lib/themes/lara/steps/index.js index 458e618d5..d7e08b1c5 100644 --- a/components/lib/themes/lara/steps/index.js +++ b/components/lib/themes/lara/steps/index.js @@ -23,7 +23,7 @@ export default { activeBackground: '{primary.color}', borderColor: '{content.border.color}', color: '{text.muted.color}', - activeColor: '{primary.inverse.color}', + activeColor: '{primary.contrast.color}', size: '2.25rem', fontSize: '1.125rem', fontWeight: '500', diff --git a/components/lib/themes/lara/tag/index.js b/components/lib/themes/lara/tag/index.js index d4c51e081..6c5243e45 100644 --- a/components/lib/themes/lara/tag/index.js +++ b/components/lib/themes/lara/tag/index.js @@ -14,7 +14,7 @@ export default { light: { primary: { background: '{primary.color}', - color: '{primary.inverse.color}' + color: '{primary.contrast.color}' }, secondary: { background: '{surface.100}', @@ -44,7 +44,7 @@ export default { dark: { primary: { background: '{primary.color}', - color: '{primary.inverse.color}' + color: '{primary.contrast.color}' }, secondary: { background: '{surface.800}', diff --git a/components/lib/themes/nora/button/index.js b/components/lib/themes/nora/button/index.js index c882910e3..37b27a34a 100644 --- a/components/lib/themes/nora/button/index.js +++ b/components/lib/themes/nora/button/index.js @@ -17,7 +17,7 @@ export default { paddingY: '0.625rem' }, label: { - fontWeight: '500' + fontWeight: '700' }, raisedShadow: '0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12)', focusRing: { @@ -36,9 +36,9 @@ export default { borderColor: '{primary.color}', hoverBorderColor: '{primary.hover.color}', activeBorderColor: '{primary.active.color}', - color: '{primary.inverseColor}', - hoverColor: '{primary.inverseColor}', - activeColor: '{primary.inverseColor}', + color: '{primary.contrast.color}', + hoverColor: '{primary.contrast.color}', + activeColor: '{primary.contrast.color}', focusRing: { color: '{primary.color}', shadow: 'none' @@ -263,9 +263,9 @@ export default { borderColor: '{primary.color}', hoverBorderColor: '{primary.hover.color}', activeBorderColor: '{primary.active.color}', - color: '{primary.inverseColor}', - hoverColor: '{primary.inverseColor}', - activeColor: '{primary.inverseColor}', + color: '{primary.contrast.color}', + hoverColor: '{primary.contrast.color}', + activeColor: '{primary.contrast.color}', focusRing: { color: '{primary.color}', shadow: 'none' diff --git a/components/lib/themes/nora/checkbox/index.js b/components/lib/themes/nora/checkbox/index.js index cb273d396..6371dbd6d 100644 --- a/components/lib/themes/nora/checkbox/index.js +++ b/components/lib/themes/nora/checkbox/index.js @@ -27,8 +27,8 @@ export default { icon: { size: '0.875rem', color: '{form.field.color}', - checkedColor: '{primary.inverse.color}', - checkedHoverColor: '{primary.inverse.color}', + checkedColor: '{primary.contrast.color}', + checkedHoverColor: '{primary.contrast.color}', disabledColor: '{form.field.disabled.color}' } }; diff --git a/components/lib/themes/nora/index.js b/components/lib/themes/nora/index.js index dcbf59e23..071821b4a 100644 --- a/components/lib/themes/nora/index.js +++ b/components/lib/themes/nora/index.js @@ -119,16 +119,16 @@ export default { stone: { 50: '#fafaf9', 100: '#f5f5f4', 200: '#e7e5e4', 300: '#d6d3d1', 400: '#a8a29e', 500: '#78716c', 600: '#57534e', 700: '#44403c', 800: '#292524', 900: '#1c1917', 950: '#0c0a09' } }, semantic: { - transitionDuration: '0.2s', + transitionDuration: '0', focusRing: { - width: '1px', + width: '2px', style: 'solid', color: '{primary.color}', offset: '2px', shadow: 'none' }, iconSize: '1rem', - anchorGutter: '2px', + anchorGutter: '0', primary: { 50: '{emerald.50}', 100: '{emerald.100}', @@ -145,46 +145,46 @@ export default { formField: { paddingX: '0.75rem', paddingY: '0.5rem', - borderRadius: '{border.radius.md}', + borderRadius: '{border.radius.xs}', focusRing: { - width: '0', - style: 'none', - color: 'transparent', - offset: '0', + width: '2px', + style: 'solid', + color: '{primary.color}', + offset: '-2px', shadow: 'none' } }, list: { - padding: '0.25rem 0.25rem', - gap: '2px', + padding: '0.125rem 0', + gap: '0', header: { - padding: '0.5rem 0.75rem 0 0.75rem' + padding: '0.5rem 0.75rem 0.5rem 0.75rem' }, option: { padding: '0.5rem 0.75rem', - borderRadius: '{border.radius.sm}' + borderRadius: '0' }, optionGroup: { padding: '0.5rem 0.75rem', - fontWeight: '600' + fontWeight: '700' } }, content: { - borderRadius: '{border.radius.md}' + borderRadius: '{border.radius.xs}' }, navigation: { list: { - padding: '0.25rem 0.25rem', - gap: '2px' + padding: '0.125rem 0', + gap: '0' }, item: { padding: '0.5rem 0.75rem', - borderRadius: '{border.radius.sm}', + borderRadius: '0', gap: '0.5rem' }, submenuLabel: { padding: '0.5rem 0.75rem', - fontWeight: '600' + fontWeight: '700' }, submenuIcon: { size: '0.875rem' @@ -192,16 +192,16 @@ export default { }, overlay: { select: { - borderRadius: '{border.radius.md}', + borderRadius: '{border.radius.xs}', shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)' }, popover: { - borderRadius: '{border.radius.md}', + borderRadius: '{border.radius.xs}', padding: '0.75rem', shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)' }, modal: { - borderRadius: '{border.radius.xl}', + borderRadius: '{border.radius.xs}', padding: '1.25rem', shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)' }, @@ -226,16 +226,16 @@ export default { 950: '{slate.950}' }, primary: { - color: '{primary.500}', + color: '{primary.600}', contrastColor: '#ffffff', - hoverColor: '{primary.600}', - activeColor: '{primary.700}' + hoverColor: '{primary.700}', + activeColor: '{primary.800}' }, highlight: { - background: '{primary.50}', - focusBackground: '{primary.100}', - color: '{primary.700}', - focusColor: '{primary.800}' + background: '{primary.600}', + focusBackground: '{primary.700}', + color: '#ffffff', + focusColor: '#ffffff' }, mask: { background: 'rgba(0,0,0,0.4)', @@ -243,55 +243,55 @@ export default { }, formField: { background: '{surface.0}', - disabledBackground: '{surface.200}', - filledBackground: '{surface.50}', - filledFocusBackground: '{surface.50}', - borderColor: '{surface.300}', - hoverBorderColor: '{surface.400}', - focusBorderColor: '{primary.color}', - invalidBorderColor: '{red.400}', - color: '{surface.700}', - disabledColor: '{surface.500}', - placeholderColor: '{surface.500}', - floatLabelColor: '{surface.500}', - floatLabelFocusColor: '{surface.500}', - floatLabelInvalidColor: '{red.400}', - iconColor: '{surface.400}', - shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + disabledBackground: '{surface.300}', + filledBackground: '{surface.100}', + filledFocusBackground: '{surface.100}', + borderColor: '{surface.500}', + hoverBorderColor: '{surface.500}', + focusBorderColor: '{surface.500}', + invalidBorderColor: '{red.500}', + color: '{surface.900}', + disabledColor: '{surface.600}', + placeholderColor: '{surface.600}', + floatLabelColor: '{surface.600}', + floatLabelFocusColor: '{surface.600}', + floatLabelInvalidColor: '{red.500}', + iconColor: '{surface.900}', + shadow: 'none' }, text: { - color: '{surface.700}', - hoverColor: '{surface.800}', - mutedColor: '{surface.500}', - hoverMutedColor: '{surface.600}' + color: '{surface.900}', + hoverColor: '{surface.950}', + mutedColor: '{surface.600}', + hoverMutedColor: '{surface.700}' }, content: { background: '{surface.0}', - hoverBackground: '{surface.100}', - borderColor: '{surface.200}', + hoverBackground: '{surface.200}', + borderColor: '{surface.400}', color: '{text.color}', hoverColor: '{text.hover.color}' }, overlay: { select: { background: '{surface.0}', - borderColor: '{surface.200}', + borderColor: 'transparent', color: '{text.color}' }, popover: { background: '{surface.0}', - borderColor: '{surface.200}', + borderColor: 'transparent', color: '{text.color}' }, modal: { background: '{surface.0}', - borderColor: '{surface.200}', + borderColor: 'transparent', color: '{text.color}' } }, list: { option: { - focusBackground: '{surface.100}', + focusBackground: '{surface.200}', selectedBackground: '{highlight.background}', selectedFocusBackground: '{highlight.focus.background}', color: '{text.color}', @@ -299,36 +299,36 @@ export default { selectedColor: '{highlight.color}', selectedFocusColor: '{highlight.focus.color}', icon: { - color: '{surface.400}', - focusColor: '{surface.500}' + color: '{text.color}', + focusColor: '{text.hover.color}' } }, optionGroup: { background: '{surface.0}', - color: '{text.muted.color}' + color: '{text.color}' } }, navigation: { item: { - focusBackground: '{surface.100}', - activeBackground: '{surface.100}', + focusBackground: '{primary.color}', + activeBackground: '{surface.200}', color: '{text.color}', - focusColor: '{text.hover.color}', + focusColor: '{primary.contrast.color}', activeColor: '{text.hover.color}', icon: { - color: '{surface.400}', - focusColor: '{surface.500}', - activeColor: '{surface.500}' + color: '{text.color}', + focusColor: '{primary.contrast.color}', + activeColor: '{text.hover.color}' } }, submenuLabel: { background: '{surface.0}', - color: '{text.muted.color}' + color: '{text.color}' }, submenuIcon: { - color: '{surface.400}', - focusColor: '{surface.500}', - activeColor: '{surface.500}' + color: '{text.color}', + focusColor: '{primary.contrast.color}', + activeColor: '{text.hover.color}' } } }, @@ -348,38 +348,38 @@ export default { 950: '{zinc.950}' }, primary: { - color: '{primary.400}', + color: '{primary.500}', contrastColor: '{surface.900}', - hoverColor: '{primary.300}', - activeColor: '{primary.200}' + hoverColor: '{primary.400}', + activeColor: '{primary.300}' }, highlight: { - background: 'color-mix(in srgb, {primary.400}, transparent 84%)', - focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)', - color: 'rgba(255,255,255,.87)', - focusColor: 'rgba(255,255,255,.87)' + background: '{primary.500}', + focusBackground: '{primary.400}', + color: '{surface.900}', + focusColor: '{surface.900}' }, mask: { - background: 'rgba(0,0,0,0.4)', + background: 'rgba(0,0,0,0.6)', color: '{surface.200}' }, formField: { background: '{surface.950}', disabledBackground: '{surface.700}', filledBackground: '{surface.800}', - filledFocusBackground: '{surface.950}', - borderColor: '{surface.700}', - hoverBorderColor: '{surface.600}', - focusBorderColor: '{primary.color}', - invalidBorderColor: '{red.300}', + filledFocusBackground: '{surface.800}', + borderColor: '{surface.500}', + hoverBorderColor: '{surface.500}', + focusBorderColor: '{surface.500}', + invalidBorderColor: '{red.400}', color: '{surface.0}', disabledColor: '{surface.400}', placeholderColor: '{surface.400}', floatLabelColor: '{surface.400}', floatLabelFocusColor: '{surface.400}', - floatLabelInvalidColor: '{red.300}', - iconColor: '{surface.400}', - shadow: '0 0 #0000, 0 0 #0000, 0 1px 2px 0 rgba(18, 18, 23, 0.05)' + floatLabelInvalidColor: '{red.400}', + iconColor: '{surface.0}', + shadow: 'none' }, text: { color: '{surface.0}', @@ -390,7 +390,7 @@ export default { content: { background: '{surface.900}', hoverBackground: '{surface.800}', - borderColor: '{surface.700}', + borderColor: '{surface.500}', color: '{text.color}', hoverColor: '{text.hover.color}' }, @@ -413,7 +413,7 @@ export default { }, list: { option: { - focusBackground: '{surface.800}', + focusBackground: '{surface.700}', selectedBackground: '{highlight.background}', selectedFocusBackground: '{highlight.focus.background}', color: '{text.color}', @@ -421,36 +421,36 @@ export default { selectedColor: '{highlight.color}', selectedFocusColor: '{highlight.focus.color}', icon: { - color: '{surface.500}', - focusColor: '{surface.400}' + color: '{surface.0}', + focusColor: '{surface.0}' } }, optionGroup: { background: '{surface.900}', - color: '{text.muted.color}' + color: '{text.color}' } }, navigation: { item: { - focusBackground: '{surface.800}', - activeBackground: '{surface.800}', + focusBackground: '{primary.color}', + activeBackground: '{surface.700}', color: '{text.color}', - focusColor: '{text.hover.color}', - activeColor: '{text.hover.color}', + focusColor: '{primary.contrast.color}', + activeColor: '{text.color}', icon: { - color: '{surface.500}', - focusColor: '{surface.400}', - activeColor: '{surface.400}' + color: '{text.color}', + focusColor: '{primary.contrast.color}', + activeColor: '{text.color}' } }, submenuLabel: { background: '{surface.900}', - color: '{text.muted.color}' + color: '{text.color}' }, submenuIcon: { - color: '{surface.500}', - focusColor: '{surface.400}', - activeColor: '{surface.400}' + color: '{text.color}', + focusColor: '{primary.contrast.color}', + activeColor: '{text.color}' } } } diff --git a/components/lib/themes/nora/progressbar/index.js b/components/lib/themes/nora/progressbar/index.js index 2b73141b2..cce54bfe9 100644 --- a/components/lib/themes/nora/progressbar/index.js +++ b/components/lib/themes/nora/progressbar/index.js @@ -8,7 +8,7 @@ export default { background: '{primary.color}' }, label: { - color: '{primary.inverse.color}', + color: '{primary.contrast.color}', fontSize: '0.75rem', fontWeight: '600' } diff --git a/components/lib/themes/nora/radiobutton/index.js b/components/lib/themes/nora/radiobutton/index.js index ac57be7de..c95d1610f 100644 --- a/components/lib/themes/nora/radiobutton/index.js +++ b/components/lib/themes/nora/radiobutton/index.js @@ -25,8 +25,8 @@ export default { }, icon: { size: '0.75rem', - checkedColor: '{primary.inverse.color}', - checkedHoverColor: '{primary.inverse.color}', + checkedColor: '{primary.contrast.color}', + checkedHoverColor: '{primary.contrast.color}', disabledColor: '{form.field.disabled.color}' } }; diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue index 0bc832b10..be0dcd1c6 100755 --- a/layouts/AppConfigurator.vue +++ b/layouts/AppConfigurator.vue @@ -127,7 +127,7 @@ export default { light: { primary: { color: '#09090b', - inverseColor: '#ffffff', + contrastColor: '#ffffff', hoverColor: '#18181b', activeColor: '#27272a' }, @@ -141,7 +141,7 @@ export default { dark: { primary: { color: '#fafafa', - inverseColor: '#09090b', + contrastColor: '#09090b', hoverColor: '#f4f4f5', activeColor: '#e4e4e7' }, @@ -156,41 +156,79 @@ export default { } }; } else { - return { - semantic: { - primary: color.palette, - colorScheme: { - light: { - primary: { - color: '{primary.500}', - inverseColor: '#ffffff', - hoverColor: '{primary.600}', - activeColor: '{primary.700}' + if (this.$appState.preset === 'Nora') { + return { + semantic: { + primary: color.palette, + colorScheme: { + light: { + primary: { + color: '{primary.600}', + contrastColor: '#ffffff', + hoverColor: '{primary.700}', + activeColor: '{primary.800}' + }, + highlight: { + background: '{primary.600}', + focusBackground: '{primary.700}', + color: '#ffffff', + focusColor: '#ffffff' + } }, - highlight: { - background: '{primary.50}', - focusBackground: '{primary.100}', - color: '{primary.700}', - focusColor: '{primary.800}' - } - }, - dark: { - primary: { - color: '{primary.400}', - inverseColor: '{surface.900}', - hoverColor: '{primary.300}', - activeColor: '{primary.200}' - }, - highlight: { - background: 'color-mix(in srgb, {primary.400}, transparent 84%)', - focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)', - color: 'rgba(255,255,255,.87)', - focusColor: 'rgba(255,255,255,.87)' + dark: { + primary: { + color: '{primary.500}', + contrastColor: '{surface.900}', + hoverColor: '{primary.400}', + activeColor: '{primary.300}' + }, + highlight: { + background: '{primary.500}', + focusBackground: '{primary.400}', + color: '{surface.900}', + focusColor: '{surface.900}' + } } } } - } - }; + }; + } else { + return { + semantic: { + primary: color.palette, + colorScheme: { + light: { + primary: { + color: '{primary.500}', + contrastColor: '#ffffff', + hoverColor: '{primary.600}', + activeColor: '{primary.700}' + }, + highlight: { + background: '{primary.50}', + focusBackground: '{primary.100}', + color: '{primary.700}', + focusColor: '{primary.800}' + } + }, + dark: { + primary: { + color: '{primary.400}', + contrastColor: '{surface.900}', + hoverColor: '{primary.300}', + activeColor: '{primary.200}' + }, + highlight: { + background: 'color-mix(in srgb, {primary.400}, transparent 84%)', + focusBackground: 'color-mix(in srgb, {primary.400}, transparent 76%)', + color: 'rgba(255,255,255,.87)', + focusColor: 'rgba(255,255,255,.87)' + } + } + } + } + }; + } } }, updateColors(type, color) { diff --git a/plugins/app-state.js b/plugins/app-state.js index b32900224..30cdfbe47 100644 --- a/plugins/app-state.js +++ b/plugins/app-state.js @@ -5,7 +5,7 @@ import { reactive } from 'vue'; const $appState = { install: (Vue, options) => { Vue.config.globalProperties.$appState = reactive({ - preset: 'Lara', + preset: 'Nora', darkTheme: false, codeSandbox: false, sourceType: 'options-api', diff --git a/themes/app-theme.js b/themes/app-theme.js index caf033ec1..24609095c 100644 --- a/themes/app-theme.js +++ b/themes/app-theme.js @@ -1,8 +1,7 @@ import { definePreset } from 'primevue/themes'; -import Lara from 'primevue/themes/lara'; -//import Aura from 'primevue/themes/aura'; +import Nora from 'primevue/themes/nora'; -const Noir = definePreset(Lara, { +const Noir = definePreset(Nora, { semantic: { primary: { 50: '{zinc.50}',