vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Added material theme

pull/6454/head
Mert Sincan 2024-09-20 20:54:43 +01:00
parent 98ef6c3e33
commit ddaee3133a
182 changed files with 5345 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/showcase/layouts/AppConfigurator.vue
View File

@ -46,12 +46,14 @@ import EventBus from '@/layouts/AppEventBus';
import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
import Aura from '@primevue/themes/aura';
import Lara from '@primevue/themes/lara';
import Material from '@primevue/themes/material';
import Nora from '@primevue/themes/nora';
const presets = {
Aura,
Lara,
Nora
Nora,
Material
};
export default {

1
apps/showcase/nuxt.config.js
View File

@ -8,6 +8,7 @@ const alias = {
'@primevue/themes/aura': path.resolve(__dirname, '../../packages/themes/src/presets/aura'),
'@primevue/themes/lara': path.resolve(__dirname, '../../packages/themes/src/presets/lara'),
'@primevue/themes/nora': path.resolve(__dirname, '../../packages/themes/src/presets/nora'),
'@primevue/themes/material': path.resolve(__dirname, '../../packages/themes/src/presets/material'),
'@primevue/themes': path.resolve(__dirname, '../../packages/themes/src'),
'@primevue/icons': path.resolve(__dirname, '../../packages/icons/src')
};

14
apps/showcase/plugins/app-state.js
View File

@ -1,3 +1,5 @@
import Material from '@primevue/themes/material';
import PrimeVue from 'primevue/config';
import { reactive } from 'vue';
const $appState = {
@ -16,15 +18,17 @@ const $appState = {
}
};
export default defineNuxtPlugin(async (nuxtApp) => {
export default defineNuxtPlugin((nuxtApp) => {
const runtimeConfig = useRuntimeConfig();
nuxtApp.vueApp.use($appState);
if (runtimeConfig.public.DEV_ENV === 'hot') {
const { default: PrimeVue } = await import('primevue/config');
const { default: Noir } = await import('@/themes/app-theme');
nuxtApp.vueApp.use(PrimeVue, { theme: Noir });
nuxtApp.vueApp.use(PrimeVue, {
theme: Material,
options: {
darkModeSelector: '.p-dark'
}
});
}
});

2
packages/core/src/config/PrimeVue.js
View File

@ -1,9 +1,9 @@
import { Theme, ThemeService } from '@primeuix/styled';
import { mergeKeys } from '@primeuix/utils';
import { FilterMatchMode } from '@primevue/core/api';
import BaseStyle from '@primevue/core/base/style';
import PrimeVueService from '@primevue/core/service';
import { inject, reactive, ref, watch } from 'vue';
import { mergeKeys } from '@primeuix/utils';
export const defaultOptions = {
ripple: false,

9
packages/themes/package.json
View File

@ -20,6 +20,7 @@
".": "./src/index.js",
"./aura": "./src/presets/aura/index.js",
"./lara": "./src/presets/lara/index.js",
"./material": "./src/presets/material/index.js",
"./nora": "./src/presets/nora/index.js",
"./aura/*": {
"types": "./types/*/index.d.ts",
@ -29,6 +30,10 @@
"types": "./types/*/index.d.ts",
"import": "./src/presets/lara/*/index.js"
},
"./material/*": {
"types": "./types/*/index.d.ts",
"import": "./src/presets/material/*/index.js"
},
"./nora/*": {
"types": "./types/*/index.d.ts",
"import": "./src/presets/nora/*/index.js"
@ -51,6 +56,10 @@
"types": "./types/*/index.d.ts",
"import": "./lara/*/index.mjs"
},
"./material/*": {
"types": "./types/*/index.d.ts",
"import": "./material/*/index.mjs"
},
"./nora/*": {
"types": "./types/*/index.d.ts",
"import": "./nora/*/index.mjs"

51
packages/themes/src/presets/material/accordion/index.js Normal file
View File

@ -0,0 +1,51 @@
export default {
root: {
transitionDuration: '{transition.duration}'
},
panel: {
borderWidth: '0 0 1px 0',
borderColor: '{content.border.color}'
},
header: {
color: '{text.muted.color}',
hoverColor: '{text.color}',
activeColor: '{text.color}',
padding: '1.125rem',
fontWeight: '600',
borderRadius: '0',
borderWidth: '0',
borderColor: '{content.border.color}',
background: '{content.background}',
hoverBackground: '{content.background}',
activeBackground: '{content.background}',
activeHoverBackground: '{content.background}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
},
toggleIcon: {
color: '{text.muted.color}',
hoverColor: '{text.color}',
activeColor: '{text.color}',
activeHoverColor: '{text.color}'
},
first: {
topBorderRadius: '{content.border.radius}',
borderWidth: '0'
},
last: {
bottomBorderRadius: '{content.border.radius}',
activeBottomBorderRadius: '0'
}
},
content: {
borderWidth: '0',
borderColor: '{content.border.color}',
background: '{content.background}',
color: '{text.color}',
padding: '0 1.125rem 1.125rem 1.125rem'
}
};

5
packages/themes/src/presets/material/accordion/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/accordion/index.d.ts"
}

97
packages/themes/src/presets/material/autocomplete/index.js Normal file
View File

@ -0,0 +1,97 @@
export default {
root: {
background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.focus.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{form.field.color}',
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}'
},
overlay: {
background: '{overlay.select.background}',
borderColor: '{overlay.select.border.color}',
borderRadius: '{overlay.select.border.radius}',
color: '{overlay.select.color}',
shadow: '{overlay.select.shadow}'
},
list: {
padding: '{list.padding}',
gap: '{list.gap}'
},
option: {
focusBackground: '{list.option.focus.background}',
selectedBackground: '{list.option.selected.background}',
selectedFocusBackground: '{list.option.selected.focus.background}',
color: '{list.option.color}',
focusColor: '{list.option.focus.color}',
selectedColor: '{list.option.selected.color}',
selectedFocusColor: '{list.option.selected.focus.color}',
padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}'
},
optionGroup: {
background: '{list.option.group.background}',
color: '{list.option.group.color}',
fontWeight: '{list.option.group.font.weight}',
padding: '{list.option.group.padding}'
},
dropdown: {
width: '2.5rem',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
chip: {
borderRadius: '{border.radius.sm}'
},
emptyMessage: {
padding: '{list.option.padding}'
},
colorScheme: {
light: {
dropdown: {
background: '{surface.100}',
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}',
color: '{surface.600}',
hoverColor: '{surface.700}',
activeColor: '{surface.800}'
}
},
dark: {
dropdown: {
background: '{surface.800}',
hoverBackground: '{surface.700}',
activeBackground: '{surface.600}',
color: '{surface.300}',
hoverColor: '{surface.200}',
activeColor: '{surface.100}'
}
}
}
};

5
packages/themes/src/presets/material/autocomplete/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/autocomplete/index.d.ts"
}

23
packages/themes/src/presets/material/avatar/index.js Normal file
View File

@ -0,0 +1,23 @@
export default {
root: {
width: '2rem',
height: '2rem',
fontSize: '1rem',
background: '{content.border.color}',
borderRadius: '{content.border.radius}'
},
group: {
borderColor: '{content.background}',
offset: '-1rem'
},
lg: {
width: '3rem',
height: '3rem',
fontSize: '1.5rem'
},
xl: {
width: '4rem',
height: '4rem',
fontSize: '2rem'
}
};

5
packages/themes/src/presets/material/avatar/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/avatar/index.d.ts"
}

90
packages/themes/src/presets/material/badge/index.js Normal file
View File

@ -0,0 +1,90 @@
export default {
root: {
borderRadius: '{border.radius.md}',
padding: '0 0.5rem',
fontSize: '0.75rem',
fontWeight: '700',
minWidth: '1.5rem',
height: '1.5rem'
},
dot: {
size: '0.5rem'
},
sm: {
fontSize: '0.625rem',
minWidth: '1.25rem',
height: '1.25rem'
},
lg: {
fontSize: '0.875rem',
minWidth: '1.75rem',
height: '1.75rem'
},
xl: {
fontSize: '1rem',
minWidth: '2rem',
height: '2rem'
},
colorScheme: {
light: {
primary: {
background: '{primary.color}',
color: '{primary.contrast.color}'
},
secondary: {
background: '{surface.100}',
color: '{surface.600}'
},
success: {
background: '{green.500}',
color: '{surface.0}'
},
info: {
background: '{sky.500}',
color: '{surface.0}'
},
warn: {
background: '{orange.500}',
color: '{surface.0}'
},
danger: {
background: '{red.500}',
color: '{surface.0}'
},
contrast: {
background: '{surface.950}',
color: '{surface.0}'
}
},
dark: {
primary: {
background: '{primary.color}',
color: '{primary.contrast.color}'
},
secondary: {
background: '{surface.800}',
color: '{surface.300}'
},
success: {
background: '{green.400}',
color: '{green.950}'
},
info: {
background: '{sky.400}',
color: '{sky.950}'
},
warn: {
background: '{orange.400}',
color: '{orange.950}'
},
danger: {
background: '{red.400}',
color: '{red.950}'
},
contrast: {
background: '{surface.0}',
color: '{surface.950}'
}
}
}
};

5
packages/themes/src/presets/material/badge/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/badge/index.d.ts"
}

379
packages/themes/src/presets/material/base/index.js Normal file
View File

@ -0,0 +1,379 @@
export default {
primitive: {
borderRadius: {
none: '0',
xs: '2px',
sm: '4px',
md: '6px',
lg: '8px',
xl: '12px'
},
emerald: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' },
green: { 50: '#f0fdf4', 100: '#dcfce7', 200: '#bbf7d0', 300: '#86efac', 400: '#4ade80', 500: '#22c55e', 600: '#16a34a', 700: '#15803d', 800: '#166534', 900: '#14532d', 950: '#052e16' },
lime: { 50: '#f7fee7', 100: '#ecfccb', 200: '#d9f99d', 300: '#bef264', 400: '#a3e635', 500: '#84cc16', 600: '#65a30d', 700: '#4d7c0f', 800: '#3f6212', 900: '#365314', 950: '#1a2e05' },
red: { 50: '#fef2f2', 100: '#fee2e2', 200: '#fecaca', 300: '#fca5a5', 400: '#f87171', 500: '#ef4444', 600: '#dc2626', 700: '#b91c1c', 800: '#991b1b', 900: '#7f1d1d', 950: '#450a0a' },
orange: { 50: '#fff7ed', 100: '#ffedd5', 200: '#fed7aa', 300: '#fdba74', 400: '#fb923c', 500: '#f97316', 600: '#ea580c', 700: '#c2410c', 800: '#9a3412', 900: '#7c2d12', 950: '#431407' },
amber: { 50: '#fffbeb', 100: '#fef3c7', 200: '#fde68a', 300: '#fcd34d', 400: '#fbbf24', 500: '#f59e0b', 600: '#d97706', 700: '#b45309', 800: '#92400e', 900: '#78350f', 950: '#451a03' },
yellow: { 50: '#fefce8', 100: '#fef9c3', 200: '#fef08a', 300: '#fde047', 400: '#facc15', 500: '#eab308', 600: '#ca8a04', 700: '#a16207', 800: '#854d0e', 900: '#713f12', 950: '#422006' },
teal: { 50: '#f0fdfa', 100: '#ccfbf1', 200: '#99f6e4', 300: '#5eead4', 400: '#2dd4bf', 500: '#14b8a6', 600: '#0d9488', 700: '#0f766e', 800: '#115e59', 900: '#134e4a', 950: '#042f2e' },
cyan: { 50: '#ecfeff', 100: '#cffafe', 200: '#a5f3fc', 300: '#67e8f9', 400: '#22d3ee', 500: '#06b6d4', 600: '#0891b2', 700: '#0e7490', 800: '#155e75', 900: '#164e63', 950: '#083344' },
sky: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', 950: '#082f49' },
blue: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a', 950: '#172554' },
indigo: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', 950: '#1e1b4b' },
violet: { 50: '#f5f3ff', 100: '#ede9fe', 200: '#ddd6fe', 300: '#c4b5fd', 400: '#a78bfa', 500: '#8b5cf6', 600: '#7c3aed', 700: '#6d28d9', 800: '#5b21b6', 900: '#4c1d95', 950: '#2e1065' },
purple: { 50: '#faf5ff', 100: '#f3e8ff', 200: '#e9d5ff', 300: '#d8b4fe', 400: '#c084fc', 500: '#a855f7', 600: '#9333ea', 700: '#7e22ce', 800: '#6b21a8', 900: '#581c87', 950: '#3b0764' },
fuchsia: { 50: '#fdf4ff', 100: '#fae8ff', 200: '#f5d0fe', 300: '#f0abfc', 400: '#e879f9', 500: '#d946ef', 600: '#c026d3', 700: '#a21caf', 800: '#86198f', 900: '#701a75', 950: '#4a044e' },
pink: { 50: '#fdf2f8', 100: '#fce7f3', 200: '#fbcfe8', 300: '#f9a8d4', 400: '#f472b6', 500: '#ec4899', 600: '#db2777', 700: '#be185d', 800: '#9d174d', 900: '#831843', 950: '#500724' },
rose: { 50: '#fff1f2', 100: '#ffe4e6', 200: '#fecdd3', 300: '#fda4af', 400: '#fb7185', 500: '#f43f5e', 600: '#e11d48', 700: '#be123c', 800: '#9f1239', 900: '#881337', 950: '#4c0519' },
slate: { 50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1', 400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155', 800: '#1e293b', 900: '#0f172a', 950: '#020617' },
gray: { 50: '#f9fafb', 100: '#f3f4f6', 200: '#e5e7eb', 300: '#d1d5db', 400: '#9ca3af', 500: '#6b7280', 600: '#4b5563', 700: '#374151', 800: '#1f2937', 900: '#111827', 950: '#030712' },
zinc: { 50: '#fafafa', 100: '#f4f4f5', 200: '#e4e4e7', 300: '#d4d4d8', 400: '#a1a1aa', 500: '#71717a', 600: '#52525b', 700: '#3f3f46', 800: '#27272a', 900: '#18181b', 950: '#09090b' },
neutral: { 50: '#fafafa', 100: '#f5f5f5', 200: '#e5e5e5', 300: '#d4d4d4', 400: '#a3a3a3', 500: '#737373', 600: '#525252', 700: '#404040', 800: '#262626', 900: '#171717', 950: '#0a0a0a' },
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',
focusRing: {
width: '1px',
style: 'solid',
color: '{primary.color}',
offset: '2px',
shadow: 'none'
},
disabledOpacity: '0.6',
iconSize: '1rem',
anchorGutter: '2px',
primary: {
50: '{emerald.50}',
100: '{emerald.100}',
200: '{emerald.200}',
300: '{emerald.300}',
400: '{emerald.400}',
500: '{emerald.500}',
600: '{emerald.600}',
700: '{emerald.700}',
800: '{emerald.800}',
900: '{emerald.900}',
950: '{emerald.950}'
},
formField: {
paddingX: '0.75rem',
paddingY: '0.5rem',
borderRadius: '{border.radius.md}',
focusRing: {
width: '0',
style: 'none',
color: 'transparent',
offset: '0',
shadow: 'none'
},
transitionDuration: '{transition.duration}'
},
list: {
padding: '0.25rem 0.25rem',
gap: '2px',
header: {
padding: '0.5rem 1rem 0.25rem 1rem'
},
option: {
padding: '0.5rem 0.75rem',
borderRadius: '{border.radius.sm}'
},
optionGroup: {
padding: '0.5rem 0.75rem',
fontWeight: '600'
}
},
content: {
borderRadius: '{border.radius.md}'
},
mask: {
transitionDuration: '0.15s'
},
navigation: {
list: {
padding: '0.25rem 0.25rem',
gap: '2px'
},
item: {
padding: '0.5rem 0.75rem',
borderRadius: '{border.radius.sm}',
gap: '0.5rem'
},
submenuLabel: {
padding: '0.5rem 0.75rem',
fontWeight: '600'
},
submenuIcon: {
size: '0.875rem'
}
},
overlay: {
select: {
borderRadius: '{border.radius.md}',
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}',
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}',
padding: '1.25rem',
shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
},
navigation: {
shadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)'
}
},
colorScheme: {
light: {
surface: {
0: '#ffffff',
50: '{slate.50}',
100: '{slate.100}',
200: '{slate.200}',
300: '{slate.300}',
400: '{slate.400}',
500: '{slate.500}',
600: '{slate.600}',
700: '{slate.700}',
800: '{slate.800}',
900: '{slate.900}',
950: '{slate.950}'
},
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}'
},
mask: {
background: 'rgba(0,0,0,0.4)',
color: '{surface.200}'
},
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: '{primary.600}',
floatLabelActiveColor: '{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)'
},
text: {
color: '{surface.700}',
hoverColor: '{surface.800}',
mutedColor: '{surface.500}',
hoverMutedColor: '{surface.600}'
},
content: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
borderColor: '{surface.200}',
color: '{text.color}',
hoverColor: '{text.hover.color}'
},
overlay: {
select: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{text.color}'
},
popover: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{text.color}'
},
modal: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '{text.color}'
}
},
list: {
option: {
focusBackground: '{surface.100}',
selectedBackground: '{highlight.background}',
selectedFocusBackground: '{highlight.focus.background}',
color: '{text.color}',
focusColor: '{text.hover.color}',
selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.focus.color}',
icon: {
color: '{surface.400}',
focusColor: '{surface.500}'
}
},
optionGroup: {
background: 'transparent',
color: '{text.muted.color}'
}
},
navigation: {
item: {
focusBackground: '{surface.100}',
activeBackground: '{surface.100}',
color: '{text.color}',
focusColor: '{text.hover.color}',
activeColor: '{text.hover.color}',
icon: {
color: '{surface.400}',
focusColor: '{surface.500}',
activeColor: '{surface.500}'
}
},
submenuLabel: {
background: 'transparent',
color: '{text.muted.color}'
},
submenuIcon: {
color: '{surface.400}',
focusColor: '{surface.500}',
activeColor: '{surface.500}'
}
}
},
dark: {
surface: {
0: '#ffffff',
50: '{zinc.50}',
100: '{zinc.100}',
200: '{zinc.200}',
300: '{zinc.300}',
400: '{zinc.400}',
500: '{zinc.500}',
600: '{zinc.600}',
700: '{zinc.700}',
800: '{zinc.800}',
900: '{zinc.900}',
950: '{zinc.950}'
},
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)'
},
mask: {
background: 'rgba(0,0,0,0.6)',
color: '{surface.200}'
},
formField: {
background: '{surface.950}',
disabledBackground: '{surface.700}',
filledBackground: '{surface.800}',
filledFocusBackground: '{surface.800}',
borderColor: '{surface.700}',
hoverBorderColor: '{surface.600}',
focusBorderColor: '{primary.color}',
invalidBorderColor: '{red.300}',
color: '{surface.0}',
disabledColor: '{surface.400}',
placeholderColor: '{surface.400}',
floatLabelColor: '{surface.400}',
floatLabelFocusColor: '{primary.color}',
floatLabelActiveColor: '{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)'
},
text: {
color: '{surface.0}',
hoverColor: '{surface.0}',
mutedColor: '{surface.400}',
hoverMutedColor: '{surface.300}'
},
content: {
background: '{surface.900}',
hoverBackground: '{surface.800}',
borderColor: '{surface.700}',
color: '{text.color}',
hoverColor: '{text.hover.color}'
},
overlay: {
select: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}'
},
popover: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}'
},
modal: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '{text.color}'
}
},
list: {
option: {
focusBackground: '{surface.800}',
selectedBackground: '{highlight.background}',
selectedFocusBackground: '{highlight.focus.background}',
color: '{text.color}',
focusColor: '{text.hover.color}',
selectedColor: '{highlight.color}',
selectedFocusColor: '{highlight.focus.color}',
icon: {
color: '{surface.500}',
focusColor: '{surface.400}'
}
},
optionGroup: {
background: 'transparent',
color: '{text.muted.color}'
}
},
navigation: {
item: {
focusBackground: '{surface.800}',
activeBackground: '{surface.800}',
color: '{text.color}',
focusColor: '{text.hover.color}',
activeColor: '{text.hover.color}',
icon: {
color: '{surface.500}',
focusColor: '{surface.400}',
activeColor: '{surface.400}'
}
},
submenuLabel: {
background: 'transparent',
color: '{text.muted.color}'
},
submenuIcon: {
color: '{surface.500}',
focusColor: '{surface.400}',
activeColor: '{surface.400}'
}
}
}
}
}
};

5
packages/themes/src/presets/material/base/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/base/index.d.ts"
}

5
packages/themes/src/presets/material/blockui/index.js Normal file
View File

@ -0,0 +1,5 @@
export default {
root: {
borderRadius: '{content.border.radius}'
}
};

5
packages/themes/src/presets/material/blockui/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/blockui/index.d.ts"
}

28
packages/themes/src/presets/material/breadcrumb/index.js Normal file
View File

@ -0,0 +1,28 @@
export default {
root: {
padding: '1rem',
background: '{content.background}',
gap: '0.5rem',
transitionDuration: '{transition.duration}'
},
item: {
color: '{text.muted.color}',
hoverColor: '{text.color}',
borderRadius: '{content.border.radius}',
gap: '{navigation.item.gap}',
icon: {
color: '{navigation.item.icon.color}',
hoverColor: '{navigation.item.icon.focus.color}'
},
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
separator: {
color: '{navigation.item.icon.color}'
}
};

5
packages/themes/src/presets/material/breadcrumb/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/breadcrumb/index.d.ts"
}

487
packages/themes/src/presets/material/button/index.js Normal file
View File

@ -0,0 +1,487 @@
export default {
root: {
borderRadius: '{form.field.border.radius}',
roundedBorderRadius: '2rem',
gap: '0.5rem',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
iconOnlyWidth: '2.5rem',
sm: {
fontSize: '0.875rem',
paddingX: '0.625rem',
paddingY: '0.375rem'
},
lg: {
fontSize: '1.125rem',
paddingX: '0.875rem',
paddingY: '0.625rem'
},
label: {
fontWeight: '500'
},
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: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
offset: '{focus.ring.offset}'
},
badgeSize: '1rem',
transitionDuration: '{form.field.transition.duration}'
},
colorScheme: {
light: {
root: {
primary: {
background: 'red',
hoverBackground: '{primary.hover.color}',
activeBackground: '{primary.active.color}',
borderColor: '{primary.color}',
hoverBorderColor: '{primary.hover.color}',
activeBorderColor: '{primary.active.color}',
color: '{primary.contrast.color}',
hoverColor: '{primary.contrast.color}',
activeColor: '{primary.contrast.color}',
focusRing: {
color: '{primary.color}',
shadow: 'none'
}
},
secondary: {
background: '{surface.100}',
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}',
borderColor: '{surface.100}',
hoverBorderColor: '{surface.200}',
activeBorderColor: '{surface.300}',
color: '{surface.600}',
hoverColor: '{surface.700}',
activeColor: '{surface.800}',
focusRing: {
color: '{surface.600}',
shadow: 'none'
}
},
info: {
background: '{sky.500}',
hoverBackground: '{sky.600}',
activeBackground: '{sky.700}',
borderColor: '{sky.500}',
hoverBorderColor: '{sky.600}',
activeBorderColor: '{sky.700}',
color: '#ffffff',
hoverColor: '#ffffff',
activeColor: '#ffffff',
focusRing: {
color: '{sky.500}',
shadow: 'none'
}
},
success: {
background: '{green.500}',
hoverBackground: '{green.600}',
activeBackground: '{green.700}',
borderColor: '{green.500}',
hoverBorderColor: '{green.600}',
activeBorderColor: '{green.700}',
color: '#ffffff',
hoverColor: '#ffffff',
activeColor: '#ffffff',
focusRing: {
color: '{green.500}',
shadow: 'none'
}
},
warn: {
background: '{orange.500}',
hoverBackground: '{orange.600}',
activeBackground: '{orange.700}',
borderColor: '{orange.500}',
hoverBorderColor: '{orange.600}',
activeBorderColor: '{orange.700}',
color: '#ffffff',
hoverColor: '#ffffff',
activeColor: '#ffffff',
focusRing: {
color: '{orange.500}',
shadow: 'none'
}
},
help: {
background: '{purple.500}',
hoverBackground: '{purple.600}',
activeBackground: '{purple.700}',
borderColor: '{purple.500}',
hoverBorderColor: '{purple.600}',
activeBorderColor: '{purple.700}',
color: '#ffffff',
hoverColor: '#ffffff',
activeColor: '#ffffff',
focusRing: {
color: '{purple.500}',
shadow: 'none'
}
},
danger: {
background: '{red.500}',
hoverBackground: '{red.600}',
activeBackground: '{red.700}',
borderColor: '{red.500}',
hoverBorderColor: '{red.600}',
activeBorderColor: '{red.700}',
color: '#ffffff',
hoverColor: '#ffffff',
activeColor: '#ffffff',
focusRing: {
color: '{red.500}',
shadow: 'none'
}
},
contrast: {
background: '{surface.950}',
hoverBackground: '{surface.900}',
activeBackground: '{surface.800}',
borderColor: '{surface.950}',
hoverBorderColor: '{surface.900}',
activeBorderColor: '{surface.800}',
color: '{surface.0}',
hoverColor: '{surface.0}',
activeColor: '{surface.0}',
focusRing: {
color: '{surface.950}',
shadow: 'none'
}
}
},
outlined: {
primary: {
hoverBackground: '{primary.50}',
activeBackground: '{primary.100}',
borderColor: '{primary.200}',
color: '{primary.color}'
},
secondary: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.500}'
},
success: {
hoverBackground: '{green.50}',
activeBackground: '{green.100}',
borderColor: '{green.200}',
color: '{green.500}'
},
info: {
hoverBackground: '{sky.50}',
activeBackground: '{sky.100}',
borderColor: '{sky.200}',
color: '{sky.500}'
},
warn: {
hoverBackground: '{orange.50}',
activeBackground: '{orange.100}',
borderColor: '{orange.200}',
color: '{orange.500}'
},
help: {
hoverBackground: '{purple.50}',
activeBackground: '{purple.100}',
borderColor: '{purple.200}',
color: '{purple.500}'
},
danger: {
hoverBackground: '{red.50}',
activeBackground: '{red.100}',
borderColor: '{red.200}',
color: '{red.500}'
},
contrast: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
borderColor: '{surface.700}',
color: '{surface.950}'
},
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.700}'
}
},
text: {
primary: {
hoverBackground: '{primary.50}',
activeBackground: '{primary.100}',
color: '{primary.color}'
},
secondary: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
color: '{surface.500}'
},
success: {
hoverBackground: '{green.50}',
activeBackground: '{green.100}',
color: '{green.500}'
},
info: {
hoverBackground: '{sky.50}',
activeBackground: '{sky.100}',
color: '{sky.500}'
},
warn: {
hoverBackground: '{orange.50}',
activeBackground: '{orange.100}',
color: '{orange.500}'
},
help: {
hoverBackground: '{purple.50}',
activeBackground: '{purple.100}',
color: '{purple.500}'
},
danger: {
hoverBackground: '{red.50}',
activeBackground: '{red.100}',
color: '{red.500}'
},
plain: {
hoverBackground: '{surface.50}',
activeBackground: '{surface.100}',
color: '{surface.700}'
}
},
link: {
color: '{primary.color}',
hoverColor: '{primary.color}',
activeColor: '{primary.color}'
}
},
dark: {
root: {
primary: {
background: '{primary.color}',
hoverBackground: '{primary.hover.color}',
activeBackground: '{primary.active.color}',
borderColor: '{primary.color}',
hoverBorderColor: '{primary.hover.color}',
activeBorderColor: '{primary.active.color}',
color: '{primary.contrast.color}',
hoverColor: '{primary.contrast.color}',
activeColor: '{primary.contrast.color}',
focusRing: {
color: '{primary.color}',
shadow: 'none'
}
},
secondary: {
background: '{surface.800}',
hoverBackground: '{surface.700}',
activeBackground: '{surface.600}',
borderColor: '{surface.800}',
hoverBorderColor: '{surface.700}',
activeBorderColor: '{surface.600}',
color: '{surface.300}',
hoverColor: '{surface.200}',
activeColor: '{surface.100}',
focusRing: {
color: '{surface.300}',
shadow: 'none'
}
},
info: {
background: '{sky.400}',
hoverBackground: '{sky.300}',
activeBackground: '{sky.200}',
borderColor: '{sky.400}',
hoverBorderColor: '{sky.300}',
activeBorderColor: '{sky.200}',
color: '{sky.950}',
hoverColor: '{sky.950}',
activeColor: '{sky.950}',
focusRing: {
color: '{sky.400}',
shadow: 'none'
}
},
success: {
background: '{green.400}',
hoverBackground: '{green.300}',
activeBackground: '{green.200}',
borderColor: '{green.400}',
hoverBorderColor: '{green.300}',
activeBorderColor: '{green.200}',
color: '{green.950}',
hoverColor: '{green.950}',
activeColor: '{green.950}',
focusRing: {
color: '{green.400}',
shadow: 'none'
}
},
warn: {
background: '{orange.400}',
hoverBackground: '{orange.300}',
activeBackground: '{orange.200}',
borderColor: '{orange.400}',
hoverBorderColor: '{orange.300}',
activeBorderColor: '{orange.200}',
color: '{orange.950}',
hoverColor: '{orange.950}',
activeColor: '{orange.950}',
focusRing: {
color: '{orange.400}',
shadow: 'none'
}
},
help: {
background: '{purple.400}',
hoverBackground: '{purple.300}',
activeBackground: '{purple.200}',
borderColor: '{purple.400}',
hoverBorderColor: '{purple.300}',
activeBorderColor: '{purple.200}',
color: '{purple.950}',
hoverColor: '{purple.950}',
activeColor: '{purple.950}',
focusRing: {
color: '{purple.400}',
shadow: 'none'
}
},
danger: {
background: '{red.400}',
hoverBackground: '{red.300}',
activeBackground: '{red.200}',
borderColor: '{red.400}',
hoverBorderColor: '{red.300}',
activeBorderColor: '{red.200}',
color: '{red.950}',
hoverColor: '{red.950}',
activeColor: '{red.950}',
focusRing: {
color: '{red.400}',
shadow: 'none'
}
},
contrast: {
background: '{surface.0}',
hoverBackground: '{surface.100}',
activeBackground: '{surface.200}',
borderColor: '{surface.0}',
hoverBorderColor: '{surface.100}',
activeBorderColor: '{surface.200}',
color: '{surface.950}',
hoverColor: '{surface.950}',
activeColor: '{surface.950}',
focusRing: {
color: '{surface.0}',
shadow: 'none'
}
}
},
outlined: {
primary: {
hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
borderColor: '{primary.700}',
color: '{primary.color}'
},
secondary: {
hoverBackground: 'rgba(255,255,255,0.04)',
activeBackground: 'rgba(255,255,255,0.16)',
borderColor: '{surface.700}',
color: '{surface.400}'
},
success: {
hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
borderColor: '{green.700}',
color: '{green.400}'
},
info: {
hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
borderColor: '{sky.700}',
color: '{sky.400}'
},
warn: {
hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
borderColor: '{orange.700}',
color: '{orange.400}'
},
help: {
hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)',
borderColor: '{purple.700}',
color: '{purple.400}'
},
danger: {
hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
borderColor: '{red.700}',
color: '{red.400}'
},
contrast: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
borderColor: '{surface.500}',
color: '{surface.0}'
},
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
borderColor: '{surface.600}',
color: '{surface.0}'
}
},
text: {
primary: {
hoverBackground: 'color-mix(in srgb, {primary.color}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {primary.color}, transparent 84%)',
color: '{primary.color}'
},
secondary: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
color: '{surface.400}'
},
success: {
hoverBackground: 'color-mix(in srgb, {green.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {green.400}, transparent 84%)',
color: '{green.400}'
},
info: {
hoverBackground: 'color-mix(in srgb, {sky.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {sky.400}, transparent 84%)',
color: '{sky.400}'
},
warn: {
hoverBackground: 'color-mix(in srgb, {orange.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {orange.400}, transparent 84%)',
color: '{orange.400}'
},
help: {
hoverBackground: 'color-mix(in srgb, {purple.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {purple.400}, transparent 84%)',
color: '{purple.400}'
},
danger: {
hoverBackground: 'color-mix(in srgb, {red.400}, transparent 96%)',
activeBackground: 'color-mix(in srgb, {red.400}, transparent 84%)',
color: '{red.400}'
},
plain: {
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
color: '{surface.0}'
}
},
link: {
color: '{primary.color}',
hoverColor: '{primary.color}',
activeColor: '{primary.color}'
}
}
}
};

5
packages/themes/src/presets/material/button/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/button/index.d.ts"
}

22
packages/themes/src/presets/material/card/index.js Normal file
View File

@ -0,0 +1,22 @@
export default {
root: {
background: '{content.background}',
borderRadius: '{border.radius.xl}',
color: '{content.color}',
shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)'
},
body: {
padding: '1.25rem',
gap: '0.5rem'
},
caption: {
gap: '0.5rem'
},
title: {
fontSize: '1.25rem',
fontWeight: '500'
},
subtitle: {
color: '{text.muted.color}'
}
};

5
packages/themes/src/presets/material/card/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/card/index.d.ts"
}

40
packages/themes/src/presets/material/carousel/index.js Normal file
View File

@ -0,0 +1,40 @@
export default {
root: {
transitionDuration: '{transition.duration}'
},
content: {
gap: '0.25rem'
},
indicatorList: {
padding: '1rem',
gap: '0.5rem'
},
indicator: {
width: '2rem',
height: '0.5rem',
borderRadius: '{content.border.radius}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
colorScheme: {
light: {
indicator: {
background: '{surface.200}',
hoverBackground: '{surface.300}',
activeBackground: '{primary.color}'
}
},
dark: {
indicator: {
background: '{surface.700}',
hoverBackground: '{surface.600}',
activeBackground: '{primary.color}'
}
}
}
};

5
packages/themes/src/presets/material/carousel/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/carousel/index.d.ts"
}

58
packages/themes/src/presets/material/cascadeselect/index.js Normal file
View File

@ -0,0 +1,58 @@
export default {
root: {
background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.focus.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{form.field.color}',
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}'
},
dropdown: {
width: '2.5rem',
color: '{form.field.icon.color}'
},
overlay: {
background: '{overlay.select.background}',
borderColor: '{overlay.select.border.color}',
borderRadius: '{overlay.select.border.radius}',
color: '{overlay.select.color}',
shadow: '{overlay.select.shadow}'
},
list: {
padding: '{list.padding}',
gap: '{list.gap}'
},
option: {
focusBackground: '{list.option.focus.background}',
selectedBackground: '{list.option.selected.background}',
selectedFocusBackground: '{list.option.selected.focus.background}',
color: '{list.option.color}',
focusColor: '{list.option.focus.color}',
selectedColor: '{list.option.selected.color}',
selectedFocusColor: '{list.option.selected.focus.color}',
padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}',
icon: {
color: '{list.option.icon.color}',
focusColor: '{list.option.icon.focus.color}',
size: '0.875rem'
}
}
};

5
packages/themes/src/presets/material/cascadeselect/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/cascadeselect/index.d.ts"
}

36
packages/themes/src/presets/material/checkbox/index.js Normal file
View File

@ -0,0 +1,36 @@
export default {
root: {
borderRadius: '{border.radius.sm}',
width: '1.25rem',
height: '1.25rem',
background: '{form.field.background}',
checkedBackground: '{primary.color}',
checkedHoverBackground: '{primary.hover.color}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.border.color}',
checkedBorderColor: '{primary.color}',
checkedHoverBorderColor: '{primary.hover.color}',
checkedFocusBorderColor: '{primary.color}',
checkedDisabledBorderColor: '{form.field.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
shadow: '{form.field.shadow}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}'
},
icon: {
size: '0.875rem',
color: '{form.field.color}',
checkedColor: '{primary.contrast.color}',
checkedHoverColor: '{primary.contrast.color}',
disabledColor: '{form.field.disabled.color}'
}
};

5
packages/themes/src/presets/material/checkbox/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/checkbox/index.d.ts"
}

52
packages/themes/src/presets/material/chip/index.js Normal file
View File

@ -0,0 +1,52 @@
export default {
root: {
borderRadius: '16px',
paddingX: '0.75rem',
paddingY: '0.5rem',
gap: '0.5rem',
transitionDuration: '{transition.duration}'
},
image: {
width: '2rem',
height: '2rem'
},
icon: {
size: '1rem'
},
removeIcon: {
size: '1rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
}
},
colorScheme: {
light: {
root: {
background: '{surface.100}',
color: '{surface.800}'
},
icon: {
color: '{surface.800}'
},
removeIcon: {
color: '{surface.800}'
}
},
dark: {
root: {
background: '{surface.800}',
color: '{surface.0}'
},
icon: {
color: '{surface.0}'
},
removeIcon: {
color: '{surface.0}'
}
}
}
};

5
packages/themes/src/presets/material/chip/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/chip/index.d.ts"
}

41
packages/themes/src/presets/material/colorpicker/index.js Normal file
View File

@ -0,0 +1,41 @@
export default {
root: {
transitionDuration: '{transition.duration}'
},
preview: {
width: '1.5rem',
height: '1.5rem',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
panel: {
shadow: '{overlay.popover.shadow}',
borderRadius: '{overlay.popover.borderRadius}'
},
colorScheme: {
light: {
panel: {
background: '{surface.800}',
borderColor: '{surface.900}'
},
handle: {
color: '{surface.0}'
}
},
dark: {
panel: {
background: '{surface.900}',
borderColor: '{surface.700}'
},
handle: {
color: '{surface.0}'
}
}
}
};

5
packages/themes/src/presets/material/colorpicker/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/colorpicker/index.d.ts"
}

9
packages/themes/src/presets/material/confirmdialog/index.js Normal file
View File

@ -0,0 +1,9 @@
export default {
icon: {
size: '2rem',
color: '{overlay.modal.color}'
},
content: {
gap: '1rem'
}
};

5
packages/themes/src/presets/material/confirmdialog/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/confirmdialog/index.d.ts"
}

23
packages/themes/src/presets/material/confirmpopup/index.js Normal file
View File

@ -0,0 +1,23 @@
export default {
root: {
background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}',
color: '{overlay.popover.color}',
borderRadius: '{overlay.popover.border.radius}',
shadow: '{overlay.popover.shadow}',
gutter: '10px',
arrowOffset: '1.25rem'
},
content: {
padding: '{overlay.popover.padding}',
gap: '1rem'
},
icon: {
size: '1.5rem',
color: '{overlay.popover.color}'
},
footer: {
gap: '0.5rem',
padding: '0 {overlay.popover.padding} {overlay.popover.padding} {overlay.popover.padding}'
}
};

5
packages/themes/src/presets/material/confirmpopup/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/confirmpopup/index.d.ts"
}

38
packages/themes/src/presets/material/contextmenu/index.js Normal file
View File

@ -0,0 +1,38 @@
export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}',
borderRadius: '{content.border.radius}',
shadow: '{overlay.navigation.shadow}',
transitionDuration: '{transition.duration}'
},
list: {
padding: '{navigation.list.padding}',
gap: '{navigation.list.gap}'
},
item: {
focusBackground: '{navigation.item.focus.background}',
activeBackground: '{navigation.item.active.background}',
color: '{navigation.item.color}',
focusColor: '{navigation.item.focus.color}',
activeColor: '{navigation.item.active.color}',
padding: '{navigation.item.padding}',
borderRadius: '{navigation.item.border.radius}',
gap: '{navigation.item.gap}',
icon: {
color: '{navigation.item.icon.color}',
focusColor: '{navigation.item.icon.focus.color}',
activeColor: '{navigation.item.icon.active.color}'
}
},
submenuIcon: {
size: '{navigation.submenu.icon.size}',
color: '{navigation.submenu.icon.color}',
focusColor: '{navigation.submenu.icon.focus.color}',
activeColor: '{navigation.submenu.icon.active.color}'
},
separator: {
borderColor: '{content.border.color}'
}
};

5
packages/themes/src/presets/material/contextmenu/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/contextmenu/index.d.ts"
}

169
packages/themes/src/presets/material/datatable/index.js Normal file
View File

@ -0,0 +1,169 @@
export default {
root: {
transitionDuration: '{transition.duration}'
},
header: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem'
},
headerCell: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}',
gap: '0.5rem',
padding: '0.75rem 1rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '-1px',
shadow: '{focus.ring.shadow}'
}
},
columnTitle: {
fontWeight: '600'
},
row: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
selectedBackground: '{highlight.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}',
selectedColor: '{highlight.color}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '-1px',
shadow: '{focus.ring.shadow}'
}
},
bodyCell: {
borderColor: '{datatable.border.color}',
padding: '0.75rem 1rem'
},
footerCell: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
padding: '0.75rem 1rem'
},
columnFooter: {
fontWeight: '600'
},
footer: {
background: '{content.background}',
borderColor: '{datatable.border.color}',
color: '{content.color}',
borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem'
},
dropPointColor: '{primary.color}',
columnResizerWidth: '0.5rem',
resizeIndicator: {
width: '1px',
color: '{primary.color}'
},
sortIcon: {
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
loadingIcon: {
size: '2rem'
},
rowToggleButton: {
hoverBackground: '{content.hover.background}',
selectedHoverBackground: '{content.background}',
color: '{text.muted.color}',
hoverColor: '{text.color}',
selectedHoverColor: '{primary.color}',
size: '1.75rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
filter: {
inlineGap: '0.5rem',
overlaySelect: {
background: '{overlay.select.background}',
borderColor: '{overlay.select.border.color}',
borderRadius: '{overlay.select.border.radius}',
color: '{overlay.select.color}',
shadow: '{overlay.select.shadow}'
},
overlayPopover: {
background: '{overlay.popover.background}',
borderColor: '{overlay.popover.border.color}',
borderRadius: '{overlay.popover.border.radius}',
color: '{overlay.popover.color}',
shadow: '{overlay.popover.shadow}',
padding: '{overlay.popover.padding}',
gap: '0.5rem'
},
rule: {
borderColor: '{content.border.color}'
},
constraintList: {
padding: '{list.padding}',
gap: '{list.gap}'
},
constraint: {
focusBackground: '{list.option.focus.background}',
selectedBackground: '{list.option.selected.background}',
selectedFocusBackground: '{list.option.selected.focus.background}',
color: '{list.option.color}',
focusColor: '{list.option.focus.color}',
selectedColor: '{list.option.selected.color}',
selectedFocusColor: '{list.option.selected.focus.color}',
separator: {
borderColor: '{content.border.color}'
},
padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}'
}
},
paginatorTop: {
borderColor: '{datatable.border.color}',
borderWidth: '0 0 1px 0'
},
paginatorBottom: {
borderColor: '{datatable.border.color}',
borderWidth: '0 0 1px 0'
},
colorScheme: {
light: {
root: {
borderColor: '{content.border.color}'
},
row: {
stripedBackground: '{surface.50}'
},
bodyCell: {
selectedBorderColor: '{primary.100}'
}
},
dark: {
root: {
borderColor: '{surface.800}'
},
row: {
stripedBackground: '{surface.950}'
},
bodyCell: {
selectedBorderColor: '{primary.900}'
}
}
}
};

5
packages/themes/src/presets/material/datatable/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/datatable/index.d.ts"
}

40
packages/themes/src/presets/material/dataview/index.js Normal file
View File

@ -0,0 +1,40 @@
export default {
root: {
borderColor: 'transparent',
borderWidth: '0',
borderRadius: '0',
padding: '0'
},
header: {
background: '{content.background}',
color: '{content.color}',
borderColor: '{content.border.color}',
borderWidth: '0 0 1px 0',
padding: '0.75rem 1rem',
borderRadius: '0'
},
content: {
background: '{content.background}',
color: '{content.color}',
borderColor: 'transparent',
borderWidth: '0',
padding: '0',
borderRadius: '0'
},
footer: {
background: '{content.background}',
color: '{content.color}',
borderColor: '{content.border.color}',
borderWidth: '1px 0 0 0',
padding: '0.75rem 1rem',
borderRadius: '0'
},
paginatorTop: {
borderColor: '{content.border.color}',
borderWidth: '0 0 1px 0'
},
paginatorBottom: {
borderColor: '{content.border.color}',
borderWidth: '1px 0 0 0'
}
};

5
packages/themes/src/presets/material/dataview/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/dataview/index.d.ts"
}

140
packages/themes/src/presets/material/datepicker/index.js Normal file
View File

@ -0,0 +1,140 @@
export default {
root: {
transitionDuration: '{transition.duration}'
},
panel: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}',
borderRadius: '{content.border.radius}',
shadow: '{overlay.popover.shadow}',
padding: '{overlay.popover.padding}'
},
header: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}',
padding: '0 0 0.5rem 0',
fontWeight: '500',
gap: '0.5rem'
},
title: {
gap: '0.5rem',
fontWeight: '500'
},
dropdown: {
width: '2.5rem',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
inputIcon: {
color: '{form.field.icon.color}'
},
selectMonth: {
hoverBackground: '{content.hover.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}',
padding: '0.25rem 0.5rem',
borderRadius: '{content.border.radius}'
},
selectYear: {
hoverBackground: '{content.hover.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}',
padding: '0.25rem 0.5rem',
borderRadius: '{content.border.radius}'
},
group: {
borderColor: '{content.border.color}',
gap: '{overlay.popover.padding}'
},
dayView: {
margin: '0.5rem 0 0 0'
},
weekDay: {
padding: '0.25rem',
fontWeight: '500',
color: '{content.color}'
},
date: {
hoverBackground: '{content.hover.background}',
selectedBackground: '{primary.color}',
rangeSelectedBackground: '{highlight.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}',
selectedColor: '{primary.contrast.color}',
rangeSelectedColor: '{highlight.color}',
width: '2rem',
height: '2rem',
borderRadius: '50%',
padding: '0.25rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
monthView: {
margin: '0.5rem 0 0 0'
},
month: {
borderRadius: '{content.border.radius}'
},
yearView: {
margin: '0.5rem 0 0 0'
},
year: {
borderRadius: '{content.border.radius}'
},
buttonbar: {
padding: '0.5rem 0 0 0',
borderColor: '{content.border.color}'
},
timePicker: {
padding: '0.5rem 0 0 0',
borderColor: '{content.border.color}',
gap: '0.5rem',
buttonGap: '0.25rem'
},
colorScheme: {
light: {
dropdown: {
background: '{surface.100}',
hoverBackground: '{surface.200}',
activeBackground: '{surface.300}',
color: '{surface.600}',
hoverColor: '{surface.700}',
activeColor: '{surface.800}'
},
today: {
background: '{surface.200}',
color: '{surface.900}'
}
},
dark: {
dropdown: {
background: '{surface.800}',
hoverBackground: '{surface.700}',
activeBackground: '{surface.600}',
color: '{surface.300}',
hoverColor: '{surface.200}',
activeColor: '{surface.100}'
},
today: {
background: '{surface.700}',
color: '{surface.0}'
}
}
}
};

5
packages/themes/src/presets/material/datepicker/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/datepicker/index.d.ts"
}

24
packages/themes/src/presets/material/dialog/index.js Normal file
View File

@ -0,0 +1,24 @@
export default {
root: {
background: '{overlay.modal.background}',
borderColor: '{overlay.modal.border.color}',
color: '{overlay.modal.color}',
borderRadius: '{overlay.modal.border.radius}',
shadow: '{overlay.modal.shadow}'
},
header: {
padding: '{overlay.modal.padding}',
gap: '0.5rem'
},
title: {
fontSize: '1.25rem',
fontWeight: '600'
},
content: {
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
},
footer: {
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}',
gap: '0.5rem'
}
};

5
packages/themes/src/presets/material/dialog/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/dialog/index.d.ts"
}

23
packages/themes/src/presets/material/divider/index.js Normal file
View File

@ -0,0 +1,23 @@
export default {
root: {
borderColor: '{content.border.color}'
},
content: {
background: '{content.background}',
color: '{text.color}'
},
horizontal: {
margin: '1rem 0',
padding: '0 1rem',
content: {
padding: '0 0.5rem'
}
},
vertical: {
margin: '0 1rem',
padding: '0.5rem 0',
content: {
padding: '0.5rem 0'
}
}
};

5
packages/themes/src/presets/material/divider/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/divider/index.d.ts"
}

20
packages/themes/src/presets/material/dock/index.js Normal file
View File

@ -0,0 +1,20 @@
export default {
root: {
background: 'rgba(255, 255, 255, 0.1)',
borderColor: 'rgba(255, 255, 255, 0.2)',
padding: '0.5rem',
borderRadius: '{border.radius.xl}'
},
item: {
borderRadius: '{content.border.radius}',
padding: '0.5rem',
size: '3rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
}
};

5
packages/themes/src/presets/material/dock/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/dock/index.d.ts"
}

19
packages/themes/src/presets/material/drawer/index.js Normal file
View File

@ -0,0 +1,19 @@
export default {
root: {
background: '{overlay.modal.background}',
borderColor: '{overlay.modal.border.color}',
color: '{overlay.modal.color}',
borderRadius: '{overlay.modal.border.radius}',
shadow: '{overlay.modal.shadow}'
},
header: {
padding: '{overlay.modal.padding}'
},
title: {
fontSize: '1.5rem',
fontWeight: '600'
},
content: {
padding: '0 {overlay.modal.padding} {overlay.modal.padding} {overlay.modal.padding}'
}
};

5
packages/themes/src/presets/material/drawer/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/drawer/index.d.ts"
}

33
packages/themes/src/presets/material/editor/index.js Normal file
View File

@ -0,0 +1,33 @@
export default {
toolbar: {
background: '{content.background}',
borderColor: '{content.border.color}',
borderRadius: '{content.border.radius}'
},
toolbarItem: {
color: '{text.muted.color}',
hoverColor: '{text.color}',
activeColor: '{primary.color}'
},
overlay: {
background: '{overlay.select.background}',
borderColor: '{overlay.select.border.color}',
borderRadius: '{overlay.select.border.radius}',
color: '{overlay.select.color}',
shadow: '{overlay.select.shadow}',
padding: '{list.padding}'
},
overlayOption: {
focusBackground: '{list.option.focus.background}',
color: '{list.option.color}',
focusColor: '{list.option.focus.color}',
padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}'
},
content: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}',
borderRadius: '{content.border.radius}'
}
};

5
packages/themes/src/presets/material/editor/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/editor/index.d.ts"
}

36
packages/themes/src/presets/material/fieldset/index.js Normal file
View File

@ -0,0 +1,36 @@
export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
borderRadius: '{content.border.radius}',
color: '{content.color}',
padding: '0 1.125rem 1.125rem 1.125rem',
transitionDuration: '{transition.duration}'
},
legend: {
background: '{content.background}',
hoverBackground: '{content.hover.background}',
color: '{content.color}',
hoverColor: '{content.hover.color}',
borderRadius: '{content.border.radius}',
borderWidth: '1px',
borderColor: 'transparent',
padding: '0.5rem 0.75rem',
gap: '0.5rem',
fontWeight: '600',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
toggleIcon: {
color: '{text.muted.color}',
hoverColor: '{text.hover.muted.color}'
},
content: {
padding: '0'
}
};

5
packages/themes/src/presets/material/fieldset/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/fieldset/index.d.ts"
}

35
packages/themes/src/presets/material/fileupload/index.js Normal file
View File

@ -0,0 +1,35 @@
export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}',
borderRadius: '{content.border.radius}',
transitionDuration: '{transition.duration}'
},
header: {
background: 'transparent',
color: '{text.color}',
padding: '1.125rem',
borderWidth: '0',
borderRadius: '0',
gap: '0.5rem'
},
content: {
highlightBorderColor: '{primary.color}',
padding: '0 1.125rem 1.125rem 1.125rem'
},
file: {
padding: '1rem',
gap: '1rem',
borderColor: '{content.border.color}',
info: {
gap: '0.5rem'
}
},
progressbar: {
height: '0.25rem'
},
basic: {
gap: '0.5rem'
}
};

5
packages/themes/src/presets/material/fileupload/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/fileupload/index.d.ts"
}

39
packages/themes/src/presets/material/floatlabel/index.js Normal file
View File

@ -0,0 +1,39 @@
export default {
root: {
color: '{form.field.float.label.color}',
focusColor: '{form.field.float.label.focus.color}',
activeColor: '{form.field.float.label.active.color}',
invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s',
positionX: '{form.field.padding.x}',
positionY: '{form.field.padding.y}',
fontWeight: '500',
focus: {
fontSize: '0.75rem',
fontWeight: '400'
}
},
over: {
focus: {
top: '-1.25rem'
}
},
in: {
input: {
paddingTop: '1.5rem'
},
focus: {
top: '{form.field.padding.y}'
}
},
on: {
input: {
paddingTop: '1rem',
paddingBottom: '1rem'
},
focus: {
background: '{form.field.background}',
padding: '0 0.125rem'
}
}
};

5
packages/themes/src/presets/material/floatlabel/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/floatlabel/index.d.ts"
}

128
packages/themes/src/presets/material/galleria/index.js Normal file
View File

@ -0,0 +1,128 @@
export default {
root: {
borderWidth: '1px',
borderColor: '{content.border.color}',
borderRadius: '{content.border.radius}',
transitionDuration: '{transition.duration}'
},
navButton: {
background: 'rgba(255, 255, 255, 0.1)',
hoverBackground: 'rgba(255, 255, 255, 0.2)',
color: '{surface.100}',
hoverColor: '{surface.0}',
size: '3rem',
gutter: '0.5rem',
prev: {
borderRadius: '50%'
},
next: {
borderRadius: '50%'
},
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
navIcon: {
size: '1.5rem'
},
thumbnailsContent: {
background: '{content.background}',
padding: '1rem 0.25rem'
},
thumbnailNavButton: {
size: '2rem',
borderRadius: '{content.border.radius}',
gutter: '0.5rem',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
thumbnailNavButtonIcon: {
size: '1rem'
},
caption: {
background: 'rgba(0, 0, 0, 0.5)',
color: '{surface.100}',
padding: '1rem'
},
indicatorList: {
gap: '0.5rem',
padding: '1rem'
},
indicatorButton: {
width: '1rem',
height: '1rem',
activeBackground: '{primary.color}',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
insetIndicatorList: {
background: 'rgba(0, 0, 0, 0.5)'
},
insetIndicatorButton: {
background: 'rgba(255, 255, 255, 0.4)',
hoverBackground: 'rgba(255, 255, 255, 0.6)',
activeBackground: 'rgba(255, 255, 255, 0.9)'
},
mask: {
background: '{mask.background}',
color: '{mask.color}'
},
closeButton: {
size: '3rem',
gutter: '0.5rem',
background: 'rgba(255, 255, 255, 0.1)',
hoverBackground: 'rgba(255, 255, 255, 0.2)',
color: '{surface.50}',
hoverColor: '{surface.0}',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
closeButtonIcon: {
size: '1.5rem'
},
colorScheme: {
light: {
thumbnailNavButton: {
hoverBackground: '{surface.100}',
color: '{surface.600}',
hoverColor: '{surface.700}'
},
indicatorButton: {
background: '{surface.200}',
hoverBackground: '{surface.300}'
}
},
dark: {
thumbnailNavButton: {
hoverBackground: '{surface.700}',
color: '{surface.400}',
hoverColor: '{surface.0}'
},
indicatorButton: {
background: '{surface.700}',
hoverBackground: '{surface.600}'
}
}
}
};

5
packages/themes/src/presets/material/galleria/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/galleria/index.d.ts"
}

5
packages/themes/src/presets/material/iconfield/index.js Normal file
View File

@ -0,0 +1,5 @@
export default {
icon: {
color: '{form.field.icon.color}'
}
};

5
packages/themes/src/presets/material/iconfield/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/iconfield/index.d.ts"
}

15
packages/themes/src/presets/material/iftalabel/index.js Normal file
View File

@ -0,0 +1,15 @@
export default {
root: {
color: '{form.field.float.label.color}',
focusColor: '{form.field.float.label.focus.color}',
invalidColor: '{form.field.float.label.invalid.color}',
transitionDuration: '0.2s',
positionX: '{form.field.padding.x}',
top: '{form.field.padding.y}',
fontSize: '0.75rem',
fontWeight: '400'
},
input: {
paddingTop: '1.5rem'
}
};

5
packages/themes/src/presets/material/iftalabel/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/iftalabel/index.d.ts"
}

44
packages/themes/src/presets/material/image/index.js Normal file
View File

@ -0,0 +1,44 @@
export default {
root: {
transitionDuration: '{transition.duration}'
},
preview: {
icon: {
size: '1.5rem'
},
mask: {
background: '{mask.background}',
color: '{mask.color}'
}
},
toolbar: {
position: {
left: 'auto',
right: '1rem',
top: '1rem',
bottom: 'auto'
},
blur: '8px',
background: 'rgba(255,255,255,0.1)',
borderColor: 'rgba(255,255,255,0.2)',
borderWidth: '1px',
borderRadius: '30px',
padding: '.5rem',
gap: '0.5rem'
},
action: {
hoverBackground: 'rgba(255,255,255,0.1)',
color: '{surface.50}',
hoverColor: '{surface.0}',
size: '3rem',
iconSize: '1.5rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
}
};

5
packages/themes/src/presets/material/image/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/image/index.d.ts"
}

89
packages/themes/src/presets/material/index.d.ts vendored Normal file
View File

@ -0,0 +1,89 @@
/**
*
* [Live Demo](https://www.primevue.org/)
*
* @module material
*
*/
export interface ColorSchemeDesignToken<T> {
colorScheme?: {
light?: Omit<T, 'colorScheme'>;
dark?: Omit<T, 'colorScheme'>;
};
}
export interface PaletteDesignToken {
50?: string;
100?: string;
200?: string;
300?: string;
400?: string;
500?: string;
600?: string;
700?: string;
800?: string;
900?: string;
950?: string;
}
export interface PrimitiveDesignTokens {
borderRadius?: {
none?: string;
xs?: string;
sm?: string;
md?: string;
lg?: string;
xl?: string;
};
emerald?: PaletteDesignToken;
green?: PaletteDesignToken;
lime?: PaletteDesignToken;
red?: PaletteDesignToken;
orange?: PaletteDesignToken;
amber?: PaletteDesignToken;
yellow?: PaletteDesignToken;
teal?: PaletteDesignToken;
cyan?: PaletteDesignToken;
sky?: PaletteDesignToken;
blue?: PaletteDesignToken;
indigo?: PaletteDesignToken;
violet?: PaletteDesignToken;
purple?: PaletteDesignToken;
fuchsia?: PaletteDesignToken;
pink?: PaletteDesignToken;
rose?: PaletteDesignToken;
slate?: PaletteDesignToken;
gray?: PaletteDesignToken;
zinc?: PaletteDesignToken;
neutral?: PaletteDesignToken;
stone?: PaletteDesignToken;
[key: string]: any;
}
export interface SemanticDesignTokens {
transitionDuration?: string;
focusRing?: {
width?: string;
style?: string;
color?: string;
offset?: string;
shadow?: string;
};
iconSize?: string;
anchorGutter?: string;
primary?: PaletteDesignToken;
formField: {
paddingX?: string;
paddingY?: string;
borderRadius?: string;
focusRing?: {
width?: string;
style?: string;
color?: string;
offset?: string;
shadow?: string;
};
};
// @todo
[key: string]: any;
}

181
packages/themes/src/presets/material/index.js Normal file
View File

@ -0,0 +1,181 @@
import accordion from '@primevue/themes/material/accordion';
import autocomplete from '@primevue/themes/material/autocomplete';
import avatar from '@primevue/themes/material/avatar';
import badge from '@primevue/themes/material/badge';
import base from '@primevue/themes/material/base';
import blockui from '@primevue/themes/material/blockui';
import breadcrumb from '@primevue/themes/material/breadcrumb';
import button from '@primevue/themes/material/button';
import card from '@primevue/themes/material/card';
import carousel from '@primevue/themes/material/carousel';
import cascadeselect from '@primevue/themes/material/cascadeselect';
import checkbox from '@primevue/themes/material/checkbox';
import chip from '@primevue/themes/material/chip';
import colorpicker from '@primevue/themes/material/colorpicker';
import confirmdialog from '@primevue/themes/material/confirmdialog';
import confirmpopup from '@primevue/themes/material/confirmpopup';
import contextmenu from '@primevue/themes/material/contextmenu';
import datatable from '@primevue/themes/material/datatable';
import dataview from '@primevue/themes/material/dataview';
import datepicker from '@primevue/themes/material/datepicker';
import dialog from '@primevue/themes/material/dialog';
import divider from '@primevue/themes/material/divider';
import dock from '@primevue/themes/material/dock';
import drawer from '@primevue/themes/material/drawer';
import editor from '@primevue/themes/material/editor';
import fieldset from '@primevue/themes/material/fieldset';
import fileupload from '@primevue/themes/material/fileupload';
import floatlabel from '@primevue/themes/material/floatlabel';
import galleria from '@primevue/themes/material/galleria';
import iconfield from '@primevue/themes/material/iconfield';
import iftalabel from '@primevue/themes/material/iftalabel';
import image from '@primevue/themes/material/image';
import inlinemessage from '@primevue/themes/material/inlinemessage';
import inplace from '@primevue/themes/material/inplace';
import inputchips from '@primevue/themes/material/inputchips';
import inputgroup from '@primevue/themes/material/inputgroup';
import inputnumber from '@primevue/themes/material/inputnumber';
import inputtext from '@primevue/themes/material/inputtext';
import knob from '@primevue/themes/material/knob';
import listbox from '@primevue/themes/material/listbox';
import megamenu from '@primevue/themes/material/megamenu';
import menu from '@primevue/themes/material/menu';
import menubar from '@primevue/themes/material/menubar';
import message from '@primevue/themes/material/message';
import metergroup from '@primevue/themes/material/metergroup';
import multiselect from '@primevue/themes/material/multiselect';
import orderlist from '@primevue/themes/material/orderlist';
import organizationchart from '@primevue/themes/material/organizationchart';
import overlaybadge from '@primevue/themes/material/overlaybadge';
import paginator from '@primevue/themes/material/paginator';
import panel from '@primevue/themes/material/panel';
import panelmenu from '@primevue/themes/material/panelmenu';
import password from '@primevue/themes/material/password';
import picklist from '@primevue/themes/material/picklist';
import popover from '@primevue/themes/material/popover';
import progressbar from '@primevue/themes/material/progressbar';
import progressspinner from '@primevue/themes/material/progressspinner';
import radiobutton from '@primevue/themes/material/radiobutton';
import rating from '@primevue/themes/material/rating';
import ripple from '@primevue/themes/material/ripple';
import scrollpanel from '@primevue/themes/material/scrollpanel';
import select from '@primevue/themes/material/select';
import selectbutton from '@primevue/themes/material/selectbutton';
import skeleton from '@primevue/themes/material/skeleton';
import slider from '@primevue/themes/material/slider';
import speeddial from '@primevue/themes/material/speeddial';
import splitbutton from '@primevue/themes/material/splitbutton';
import splitter from '@primevue/themes/material/splitter';
import stepper from '@primevue/themes/material/stepper';
import steps from '@primevue/themes/material/steps';
import tabmenu from '@primevue/themes/material/tabmenu';
import tabs from '@primevue/themes/material/tabs';
import tabview from '@primevue/themes/material/tabview';
import tag from '@primevue/themes/material/tag';
import terminal from '@primevue/themes/material/terminal';
import textarea from '@primevue/themes/material/textarea';
import tieredmenu from '@primevue/themes/material/tieredmenu';
import timeline from '@primevue/themes/material/timeline';
import toast from '@primevue/themes/material/toast';
import togglebutton from '@primevue/themes/material/togglebutton';
import toggleswitch from '@primevue/themes/material/toggleswitch';
import toolbar from '@primevue/themes/material/toolbar';
import tooltip from '@primevue/themes/material/tooltip';
import tree from '@primevue/themes/material/tree';
import treeselect from '@primevue/themes/material/treeselect';
import treetable from '@primevue/themes/material/treetable';
import virtualscroller from '@primevue/themes/material/virtualscroller';
export default {
...base,
components: {
accordion,
autocomplete,
avatar,
badge,
blockui,
breadcrumb,
button,
datepicker,
card,
carousel,
cascadeselect,
checkbox,
chip,
colorpicker,
confirmdialog,
confirmpopup,
contextmenu,
dataview,
datatable,
dialog,
divider,
dock,
drawer,
editor,
fieldset,
fileupload,
iftalabel,
floatlabel,
galleria,
iconfield,
image,
inlinemessage,
inplace,
inputchips,
inputgroup,
inputnumber,
inputtext,
knob,
listbox,
megamenu,
menu,
menubar,
message,
metergroup,
multiselect,
orderlist,
organizationchart,
overlaybadge,
popover,
paginator,
password,
panel,
panelmenu,
picklist,
progressbar,
progressspinner,
radiobutton,
rating,
scrollpanel,
select,
selectbutton,
skeleton,
slider,
speeddial,
splitter,
splitbutton,
stepper,
steps,
tabmenu,
tabs,
tabview,
textarea,
tieredmenu,
tag,
terminal,
timeline,
togglebutton,
toggleswitch,
tree,
treeselect,
treetable,
toast,
toolbar,
virtualscroller
},
directives: {
tooltip,
ripple
}
};

91
packages/themes/src/presets/material/inlinemessage/index.js Normal file
View File

@ -0,0 +1,91 @@
export default {
root: {
padding: '{form.field.padding.y} {form.field.padding.x}',
borderRadius: '{content.border.radius}',
gap: '0.5rem'
},
text: {
fontWeight: '500'
},
icon: {
size: '1rem'
},
colorScheme: {
light: {
info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}',
color: '{blue.600}',
shadow: '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}',
color: '{green.600}',
shadow: '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}',
color: '{yellow.600}',
shadow: '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}',
color: '{red.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)'
},
secondary: {
background: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)'
},
contrast: {
background: '{surface.900}',
borderColor: '{surface.950}',
color: '{surface.50}',
shadow: '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%)',
color: '{blue.500}',
shadow: '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%)',
color: '{green.500}',
shadow: '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%)',
color: '{yellow.500}',
shadow: '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%)',
color: '{red.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)'
},
secondary: {
background: '{surface.800}',
borderColor: '{surface.700}',
color: '{surface.300}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)'
},
contrast: {
background: '{surface.0}',
borderColor: '{surface.100}',
color: '{surface.950}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)'
}
}
}
};

5
packages/themes/src/presets/material/inlinemessage/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/inlinemessage/index.d.ts"
}

18
packages/themes/src/presets/material/inplace/index.js Normal file
View File

@ -0,0 +1,18 @@
export default {
root: {
padding: '{form.field.padding.y} {form.field.padding.x}',
borderRadius: '{content.border.radius}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
},
transitionDuration: '{transition.duration}'
},
display: {
hoverBackground: '{content.hover.background}',
hoverColor: '{content.hover.color}'
}
};

5
packages/themes/src/presets/material/inplace/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/inplace/index.d.ts"
}

44
packages/themes/src/presets/material/inputchips/index.js Normal file
View File

@ -0,0 +1,44 @@
export default {
root: {
background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.focus.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{form.field.color}',
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}'
},
chip: {
borderRadius: '{border.radius.sm}'
},
colorScheme: {
light: {
chip: {
focusBackground: '{surface.200}',
color: '{surface.800}'
}
},
dark: {
chip: {
focusBackground: '{surface.700}',
color: '{surface.0}'
}
}
}
};

5
packages/themes/src/presets/material/inputchips/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/inputchips/index.d.ts"
}

8
packages/themes/src/presets/material/inputgroup/index.js Normal file
View File

@ -0,0 +1,8 @@
export default {
addon: {
background: '{form.field.background}',
borderColor: '{form.field.border.color}',
color: '{form.field.icon.color}',
borderRadius: '{form.field.border.radius}'
}
};

5
packages/themes/src/presets/material/inputgroup/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/inputgroup/index.d.ts"
}

38
packages/themes/src/presets/material/inputnumber/index.js Normal file
View File

@ -0,0 +1,38 @@
export default {
root: {
transitionDuration: '{transition.duration}'
},
button: {
width: '2.5rem',
borderRadius: '{form.field.border.radius}',
verticalPadding: '{form.field.padding.y}'
},
colorScheme: {
light: {
button: {
background: 'transparent',
hoverBackground: '{surface.100}',
activeBackground: '{surface.200}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
color: '{surface.400}',
hoverColor: '{surface.500}',
activeColor: '{surface.600}'
}
},
dark: {
button: {
background: 'transparent',
hoverBackground: '{surface.800}',
activeBackground: '{surface.700}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.border.color}',
activeBorderColor: '{form.field.border.color}',
color: '{surface.400}',
hoverColor: '{surface.300}',
activeColor: '{surface.200}'
}
}
}
};

5
packages/themes/src/presets/material/inputnumber/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/inputnumber/index.d.ts"
}

37
packages/themes/src/presets/material/inputtext/index.js Normal file
View File

@ -0,0 +1,37 @@
export default {
root: {
background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.focus.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{form.field.color}',
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}',
sm: {
fontSize: '0.875rem',
paddingX: '0.625rem',
paddingY: '0.375rem'
},
lg: {
fontSize: '1.125rem',
paddingX: '0.875rem',
paddingY: '0.625rem'
}
}
};

5
packages/themes/src/presets/material/inputtext/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/inputtext/index.d.ts"
}

21
packages/themes/src/presets/material/knob/index.js Normal file
View File

@ -0,0 +1,21 @@
export default {
root: {
transitionDuration: '{transition.duration}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
},
value: {
background: '{primary.color}'
},
range: {
background: '{content.border.color}'
},
text: {
color: '{text.muted.color}'
}
};

5
packages/themes/src/presets/material/knob/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/knob/index.d.ts"
}

66
packages/themes/src/presets/material/listbox/index.js Normal file
View File

@ -0,0 +1,66 @@
export default {
root: {
background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.focus.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{form.field.color}',
disabledColor: '{form.field.disabled.color}',
shadow: '{form.field.shadow}',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}'
},
list: {
padding: '{list.padding}',
gap: '{list.gap}',
header: {
padding: '{list.header.padding}'
}
},
option: {
focusBackground: '{list.option.focus.background}',
selectedBackground: '{list.option.selected.background}',
selectedFocusBackground: '{list.option.selected.focus.background}',
color: '{list.option.color}',
focusColor: '{list.option.focus.color}',
selectedColor: '{list.option.selected.color}',
selectedFocusColor: '{list.option.selected.focus.color}',
padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}'
},
optionGroup: {
background: '{list.option.group.background}',
color: '{list.option.group.color}',
fontWeight: '{list.option.group.font.weight}',
padding: '{list.option.group.padding}'
},
checkmark: {
color: '{list.option.color}',
gutterStart: '-0.375rem',
gutterEnd: '0.375rem'
},
emptyMessage: {
padding: '{list.option.padding}'
},
colorScheme: {
light: {
option: {
stripedBackground: '{surface.50}'
}
},
dark: {
option: {
stripedBackground: '{surface.900}'
}
}
}
};

5
packages/themes/src/presets/material/listbox/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/listbox/index.d.ts"
}

78
packages/themes/src/presets/material/megamenu/index.js Normal file
View File

@ -0,0 +1,78 @@
export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
borderRadius: '{content.border.radius}',
color: '{content.color}',
gap: '0.5rem',
verticalOrientation: {
padding: '{navigation.list.padding}',
gap: '0'
},
horizontalOrientation: {
padding: '0.5rem 0.75rem'
},
transitionDuration: '{transition.duration}'
},
baseItem: {
borderRadius: '{content.border.radius}',
padding: '{navigation.item.padding}'
},
item: {
focusBackground: '{navigation.item.focus.background}',
activeBackground: '{navigation.item.active.background}',
color: '{navigation.item.color}',
focusColor: '{navigation.item.focus.color}',
activeColor: '{navigation.item.active.color}',
padding: '{navigation.item.padding}',
borderRadius: '{navigation.item.border.radius}',
gap: '{navigation.item.gap}',
icon: {
color: '{navigation.item.icon.color}',
focusColor: '{navigation.item.icon.focus.color}',
activeColor: '{navigation.item.icon.active.color}'
}
},
overlay: {
padding: '0',
background: '{content.background}',
borderColor: '{content.border.color}',
borderRadius: '{content.border.radius}',
color: '{content.color}',
shadow: '{overlay.navigation.shadow}',
gap: '0.5rem'
},
submenu: {
padding: '{navigation.list.padding}',
gap: '{navigation.list.gap}'
},
submenuLabel: {
padding: '{navigation.submenu.label.padding}',
fontWeight: '{navigation.submenu.label.font.weight}',
background: '{navigation.submenu.label.background.}',
color: '{navigation.submenu.label.color}'
},
submenuIcon: {
size: '{navigation.submenu.icon.size}',
color: '{navigation.submenu.icon.color}',
focusColor: '{navigation.submenu.icon.focus.color}',
activeColor: '{navigation.submenu.icon.active.color}'
},
separator: {
borderColor: '{content.border.color}'
},
mobileButton: {
borderRadius: '50%',
size: '1.75rem',
color: '{text.muted.color}',
hoverColor: '{text.muted.hover.color}',
hoverBackground: '{content.hover.background}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
}
};

5
packages/themes/src/presets/material/megamenu/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/megamenu/index.d.ts"
}

35
packages/themes/src/presets/material/menu/index.js Normal file
View File

@ -0,0 +1,35 @@
export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
color: '{content.color}',
borderRadius: '{content.border.radius}',
shadow: '{overlay.navigation.shadow}',
transitionDuration: '{transition.duration}'
},
list: {
padding: '{navigation.list.padding}',
gap: '{navigation.list.gap}'
},
item: {
focusBackground: '{navigation.item.focus.background}',
color: '{navigation.item.color}',
focusColor: '{navigation.item.focus.color}',
padding: '{navigation.item.padding}',
borderRadius: '{navigation.item.border.radius}',
gap: '{navigation.item.gap}',
icon: {
color: '{navigation.item.icon.color}',
focusColor: '{navigation.item.icon.focus.color}'
}
},
submenuLabel: {
padding: '{navigation.submenu.label.padding}',
fontWeight: '{navigation.submenu.label.font.weight}',
background: '{navigation.submenu.label.background}',
color: '{navigation.submenu.label.color}'
},
separator: {
borderColor: '{content.border.color}'
}
};

5
packages/themes/src/presets/material/menu/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/menu/index.d.ts"
}

62
packages/themes/src/presets/material/menubar/index.js Normal file
View File

@ -0,0 +1,62 @@
export default {
root: {
background: '{content.background}',
borderColor: '{content.border.color}',
borderRadius: '{content.border.radius}',
color: '{content.color}',
gap: '0.5rem',
padding: '0.5rem 0.75rem',
transitionDuration: '{transition.duration}'
},
baseItem: {
borderRadius: '{content.border.radius}',
padding: '{navigation.item.padding}'
},
item: {
focusBackground: '{navigation.item.focus.background}',
activeBackground: '{navigation.item.active.background}',
color: '{navigation.item.color}',
focusColor: '{navigation.item.focus.color}',
activeColor: '{navigation.item.active.color}',
padding: '{navigation.item.padding}',
borderRadius: '{navigation.item.border.radius}',
gap: '{navigation.item.gap}',
icon: {
color: '{navigation.item.icon.color}',
focusColor: '{navigation.item.icon.focus.color}',
activeColor: '{navigation.item.icon.active.color}'
}
},
submenu: {
padding: '{navigation.list.padding}',
gap: '{navigation.list.gap}',
background: '{content.background}',
borderColor: '{content.border.color}',
borderRadius: '{content.border.radius}',
shadow: '{overlay.navigation.shadow}',
mobileIndent: '1rem'
},
submenuIcon: {
size: '{navigation.submenu.icon.size}',
color: '{navigation.submenu.icon.color}',
focusColor: '{navigation.submenu.icon.focus.color}',
activeColor: '{navigation.submenu.icon.active.color}'
},
separator: {
borderColor: '{content.border.color}'
},
mobileButton: {
borderRadius: '50%',
size: '1.75rem',
color: '{text.muted.color}',
hoverColor: '{text.muted.hover.color}',
hoverBackground: '{content.hover.background}',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
color: '{focus.ring.color}',
offset: '{focus.ring.offset}',
shadow: '{focus.ring.shadow}'
}
}
};

5
packages/themes/src/presets/material/menubar/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/menubar/index.d.ts"
}

193
packages/themes/src/presets/material/message/index.js Normal file
View File

@ -0,0 +1,193 @@
export default {
root: {
borderRadius: '{content.border.radius}',
borderWidth: '1px',
transitionDuration: '{transition.duration}'
},
content: {
padding: '0.5rem 0.75rem',
gap: '0.5rem'
},
text: {
fontSize: '1rem',
fontWeight: '500'
},
icon: {
size: '1.125rem'
},
closeButton: {
width: '1.75rem',
height: '1.75rem',
borderRadius: '50%',
focusRing: {
width: '{focus.ring.width}',
style: '{focus.ring.style}',
offset: '{focus.ring.offset}'
}
},
closeIcon: {
size: '1rem'
},
colorScheme: {
light: {
info: {
background: 'color-mix(in srgb, {blue.50}, transparent 5%)',
borderColor: '{blue.200}',
color: '{blue.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeButton: {
hoverBackground: '{blue.100}',
focusRing: {
color: '{blue.600}',
shadow: 'none'
}
}
},
success: {
background: 'color-mix(in srgb, {green.50}, transparent 5%)',
borderColor: '{green.200}',
color: '{green.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeButton: {
hoverBackground: '{green.100}',
focusRing: {
color: '{green.600}',
shadow: 'none'
}
}
},
warn: {
background: 'color-mix(in srgb,{yellow.50}, transparent 5%)',
borderColor: '{yellow.200}',
color: '{yellow.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeButton: {
hoverBackground: '{yellow.100}',
focusRing: {
color: '{yellow.600}',
shadow: 'none'
}
}
},
error: {
background: 'color-mix(in srgb, {red.50}, transparent 5%)',
borderColor: '{red.200}',
color: '{red.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeButton: {
hoverBackground: '{red.100}',
focusRing: {
color: '{red.600}',
shadow: 'none'
}
}
},
secondary: {
background: '{surface.100}',
borderColor: '{surface.200}',
color: '{surface.600}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.200}',
focusRing: {
color: '{surface.600}',
shadow: 'none'
}
}
},
contrast: {
background: '{surface.900}',
borderColor: '{surface.950}',
color: '{surface.50}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.800}',
focusRing: {
color: '{surface.50}',
shadow: 'none'
}
}
}
},
dark: {
info: {
background: 'color-mix(in srgb, {blue.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {blue.700}, transparent 64%)',
color: '{blue.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {blue.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{blue.500}',
shadow: 'none'
}
}
},
success: {
background: 'color-mix(in srgb, {green.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {green.700}, transparent 64%)',
color: '{green.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {green.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{green.500}',
shadow: 'none'
}
}
},
warn: {
background: 'color-mix(in srgb, {yellow.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {yellow.700}, transparent 64%)',
color: '{yellow.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {yellow.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{yellow.500}',
shadow: 'none'
}
}
},
error: {
background: 'color-mix(in srgb, {red.500}, transparent 84%)',
borderColor: 'color-mix(in srgb, {red.700}, transparent 64%)',
color: '{red.500}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {red.500}, transparent 96%)',
closeButton: {
hoverBackground: 'rgba(255, 255, 255, 0.05)',
focusRing: {
color: '{red.500}',
shadow: 'none'
}
}
},
secondary: {
background: '{surface.800}',
borderColor: '{surface.700}',
color: '{surface.300}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.500}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.700}',
focusRing: {
color: '{surface.300}',
shadow: 'none'
}
}
},
contrast: {
background: '{surface.0}',
borderColor: '{surface.100}',
color: '{surface.950}',
shadow: '0px 4px 8px 0px color-mix(in srgb, {surface.950}, transparent 96%)',
closeButton: {
hoverBackground: '{surface.100}',
focusRing: {
color: '{surface.950}',
shadow: 'none'
}
}
}
}
}
};

5
packages/themes/src/presets/material/message/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/message/index.d.ts"
}

23
packages/themes/src/presets/material/metergroup/index.js Normal file
View File

@ -0,0 +1,23 @@
export default {
root: {
borderRadius: '{content.border.radius}',
gap: '1rem'
},
meters: {
background: '{content.border.color}',
size: '0.5rem'
},
label: {
gap: '0.5rem'
},
labelMarker: {
size: '0.5rem'
},
labelIcon: {
size: '1rem'
},
labelList: {
verticalGap: '0.5rem',
horizontalGap: '1rem'
}
};

5
packages/themes/src/presets/material/metergroup/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/metergroup/index.d.ts"
}

69
packages/themes/src/presets/material/multiselect/index.js Normal file
View File

@ -0,0 +1,69 @@
export default {
root: {
background: '{form.field.background}',
disabledBackground: '{form.field.disabled.background}',
filledBackground: '{form.field.filled.background}',
filledFocusBackground: '{form.field.filled.focus.background}',
borderColor: '{form.field.border.color}',
hoverBorderColor: '{form.field.hover.border.color}',
focusBorderColor: '{form.field.focus.border.color}',
invalidBorderColor: '{form.field.invalid.border.color}',
color: '{form.field.color}',
disabledColor: '{form.field.disabled.color}',
placeholderColor: '{form.field.placeholder.color}',
shadow: '{form.field.shadow}',
paddingX: '{form.field.padding.x}',
paddingY: '{form.field.padding.y}',
borderRadius: '{form.field.border.radius}',
focusRing: {
width: '{form.field.focus.ring.width}',
style: '{form.field.focus.ring.style}',
color: '{form.field.focus.ring.color}',
offset: '{form.field.focus.ring.offset}',
shadow: '{form.field.focus.ring.shadow}'
},
transitionDuration: '{form.field.transition.duration}'
},
dropdown: {
width: '2.5rem',
color: '{form.field.icon.color}'
},
overlay: {
background: '{overlay.select.background}',
borderColor: '{overlay.select.border.color}',
borderRadius: '{overlay.select.border.radius}',
color: '{overlay.select.color}',
shadow: '{overlay.select.shadow}'
},
list: {
padding: '{list.padding}',
gap: '{list.gap}',
header: {
padding: '{list.header.padding}'
}
},
option: {
focusBackground: '{list.option.focus.background}',
selectedBackground: '{list.option.selected.background}',
selectedFocusBackground: '{list.option.selected.focus.background}',
color: '{list.option.color}',
focusColor: '{list.option.focus.color}',
selectedColor: '{list.option.selected.color}',
selectedFocusColor: '{list.option.selected.focus.color}',
padding: '{list.option.padding}',
borderRadius: '{list.option.border.radius}',
gap: '0.5rem'
},
optionGroup: {
background: '{list.option.group.background}',
color: '{list.option.group.color}',
fontWeight: '{list.option.group.font.weight}',
padding: '{list.option.group.padding}'
},
chip: {
borderRadius: '{border.radius.sm}'
},
emptyMessage: {
padding: '{list.option.padding}'
}
};

5
packages/themes/src/presets/material/multiselect/package.json Normal file
View File

@ -0,0 +1,5 @@
{
"main": "./index.js",
"module": "./index.js",
"types": "../types/multiselect/index.d.ts"
}

8
packages/themes/src/presets/material/orderlist/index.js Normal file
View File

@ -0,0 +1,8 @@
export default {
root: {
gap: '1.125rem'
},
controls: {
gap: '0.5rem'
}
};

Some files were not shown because too many files have changed in this diff Show More