Migrated panel

pull/5507/head
Cagatay Civici 2024-02-12 00:49:51 +03:00
parent 45112dc03d
commit 3288f0808b
3 changed files with 25 additions and 31 deletions

View File

@ -1,22 +1,5 @@
export default {
css: `
@font-face {
font-family: "Inter var";
font-weight: 100 900;
font-display: swap;
font-style: normal;
font-named-instance: "Regular";
src: url("./fonts/Inter-roman.var.woff2?v=3.19") format("woff2");
}
@font-face {
font-family: "Inter var";
font-weight: 100 900;
font-display: swap;
font-style: italic;
font-named-instance: "Italic";
src: url("./fonts/Inter-italic.var.woff2?v=3.19") format("woff2");
}
.p-component,
.p-component * {
box-sizing: border-box;

View File

@ -29,8 +29,6 @@ export default {
bg: 'rgba(0,0,0,0.4)'
},
colors: {
white: '#ffffff',
black: '#000000',
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' },
@ -71,6 +69,7 @@ export default {
colorScheme: {
light: {
surface: {
0: '#ffffff',
50: '{slate.50}',
100: '{slate.100}',
200: '{slate.200}',
@ -116,8 +115,8 @@ export default {
inverseColor: '{surface.900}'
},
text: {
color: '{surface.700}',
secondaryColor: '{surface.500}'
color: '{surface.0}',
secondaryColor: '{surface.400}'
},
highlight: {
background: 'color-mix(in srgb, {primary.400}, transparent 84%)',

View File

@ -4,24 +4,36 @@ export default {
colorScheme: {
light: {
root: {
borderColor: '{surface.200}',
backgroundColor: '{white}'
border: '1px solid {surface.200}',
background: '{surface.0}',
textColor: '{surface.700}'
},
headerIcon: {
color: '{surface.500}',
colorHover: '{surface.600}',
backgroundHover: '{surface.100}'
}
},
dark: {
root: {
borderColor: '{surface.700}',
backgroundColor: '{surface.0}'
border: '1px solid {surface.700}',
background: '{surface.900}',
textColor: '{text.color}'
},
headerIcon: {
color: '{surface.400}',
colorHover: '{surface.300}',
backgroundHover: '{surface.800}'
}
}
}
},
css: `
.p-panel {
border: 1px solid var(--p-panel-border-color);
border: var(--p-panel-border);
border-radius: var(--p-border-radius);
background: var(--p-dark-surface-900, var(--p-white));
color: var(--p-dark-surface-0, var(--p-surface-700));
background: var(--p-panel-background);
color: var(--p-panel-text-color);
}
.p-panel-header {
@ -48,7 +60,7 @@ export default {
width: 1.75rem;
height: 1.75rem;
position: relative;
color: var(--p-dark-surface-400, var(--p-surface-500));
color: var(--p-panel-header-icon-color);
border: 0 none;
background: transparent;
border-radius: 50%;
@ -57,8 +69,8 @@ export default {
}
.p-panel-header-icon:enabled:hover {
color: var(--p-dark-surface-300, var(--p-surface-600));
background: var(--p-dark-surface-800, var(--p-surface-100));
color: var(--p-panel-header-icon-color-hover);
background: var(--p-panel-header-icon-background-hover);
}
.p-panel-header-icon:focus-visible {