Migrated panel
parent
45112dc03d
commit
3288f0808b
|
@ -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;
|
||||
|
|
|
@ -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%)',
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue