Skip to content

Commit

Permalink
Merge branch 'master' into fix/editor-losing-focus-in-tab-panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@addeeandra
addeeandra committed Feb 21, 2025
2 parents 615c79d + 7cd519b commit 2e1442a
Show file tree
Hide file tree
Showing 99 changed files with 2,429 additions and 30,163 deletions.
144 changes: 144 additions & 0 deletions CHANGELOG.md
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions apps/showcase/assets/data/news.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"id": 74,
"content": "Introducing the Genesis Template! 🎉",
"linkText": "View Demo",
"linkHref": "https://genesis.primevue.org",
"id": 75,
"content": "PrimeBlocks Q1 2025 Update is here with 500+ Components! 🎉",
"linkText": "Discover Now",
"linkHref": "https://primeblocks.org",
"target": "_blank"
}
19 changes: 6 additions & 13 deletions apps/showcase/assets/menu/menu.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,17 +101,15 @@
},
{
"name": "FloatLabel",
"to": "/floatlabel",
"badge": "NEW"
"to": "/floatlabel"
},
{
"name": "IconField",
"to": "/iconfield"
},
{
"name": "IftaLabel",
"to": "/iftalabel",
"badge": "NEW"
"to": "/iftalabel"
},
{
"name": "InputGroup",
Expand All @@ -135,8 +133,7 @@
},
{
"name": "KeyFilter",
"to": "/keyfilter",
"badge": "NEW"
"to": "/keyfilter"
},
{
"name": "Knob",
Expand Down Expand Up @@ -421,8 +418,7 @@
},
{
"name": "ImageCompare",
"to": "/imagecompare",
"badge": "NEW"
"to": "/imagecompare"
}
]
},
Expand Down Expand Up @@ -534,13 +530,11 @@
{
"name": "Figma UI Kit",
"icon": "pi pi-pencil",
"to": "/uikit",
"badge": "NEW"
"to": "/uikit"
},
{
"name": "Theme Designer",
"icon": "pi pi-sparkles",
"badge": "NEW",
"children": [
{
"name": "Overview",
Expand Down Expand Up @@ -589,8 +583,7 @@
},
{
"name": "RTL",
"to": "/guides/rtl",
"badge": "NEW"
"to": "/guides/rtl"
}
]
},
Expand Down
4 changes: 0 additions & 4 deletions apps/showcase/assets/styles/layout/_core.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@ html {
line-height: normal;
}

.material {
font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
margin: 0px;
min-height: 100%;
Expand Down
93 changes: 67 additions & 26 deletions apps/showcase/assets/styles/layout/_designer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,23 @@
cursor: pointer;
}

input:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: 0px;
}

button:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: 2px;
}

.p-icon,
.pi {
font-size: 14px !important;
width: 14px !important;
height: 14px !important;
}

[type='color']::-webkit-color-swatch {
border-radius: 4px;
width: 24px;
Expand All @@ -25,15 +42,15 @@
}

&.p-drawer {
background: light-dark(var(--p-surface-0), var(--p-surface-900));
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
color: light-dark(#09090b, #ffffff);
background: var(--overlay-background);
border-color: var(--border-color);
color: var(--high-contrast-text-color);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.p-fieldset {
background: transparent;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
border-color: var(--border-color);
border-radius: 4px;
color: inherit;
padding: 0 1.125rem 1.125rem 1.125rem;
Expand All @@ -56,7 +73,11 @@
background: transparent;
border: 0 none;
border-radius: 4px;
outline-color: transparent;

&:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: -1px;
}
}

.p-fieldset-toggle-icon {
Expand Down Expand Up @@ -84,37 +105,43 @@
.p-tablist-tab-list {
background: transparent;
border-style: solid;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
border-color: var(--border-color);
border-width: 0 0 1px 0;
}

.p-tab {
background: transparent;
border-width: 0 0 1px 0;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
color: light-dark(var(--p-surface-500), var(--p-surface-400));
border-color: var(--border-color);
color: var(--text-secondary-color);
padding: 1rem 1.125rem;
font-weight: 600;
transition: none;
margin: 0 0 -1px 0;

&:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: -1px;
}
}

.p-tab:not(.p-tab-active):not(.p-disabled):hover {
background: transparent;
border-color: transparent;
color: light-dark(var(--p-surface-700), var(--p-surface-0));
color: var(--high-contrast-text-color);
}

.p-tab-active {
background: transparent;
border-color: transparent;
color: light-dark(#09090b, #ffffff);
border-color: var(--high-contrast-text-color);
color: var(--high-contrast-text-color);
}

.p-tablist-active-bar {
display: none;
inset-block-end: -1px;
height: 1px;
background: light-dark(#09090b, #ffffff);
background: var(--high-contrast-text-color);
transition: 250ms cubic-bezier(0.35, 0, 0.25, 1);
}

Expand All @@ -123,23 +150,35 @@
color: inherit;
padding: 0.875rem 0 1.125rem 0;
}

.p-tabpanel {
&:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: 0;
}
}
}

.p-accordion {
.p-accordionpanel {
border-width: 0 0 1px 0;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
border-color: var(--border-color);
}

.p-accordionheader {
padding: 1.125rem;
color: light-dark(var(--p-surface-500), var(--p-surface-400));
color: var(--text-secondary-color);
background: transparent;
border-width: 0;
border-color: unset;
font-weight: 600;
border-radius: 4px;
transition: none;

&:focus-visible {
outline: 1px solid var(--designer-focus-outline-color);
outline-offset: -1px;
}
}

.p-accordionpanel:first-child>.p-accordionheader {
Expand All @@ -159,13 +198,13 @@
}

.p-accordionheader-toggle-icon {
color: light-dark(var(--p-surface-500), var(--p-surface-400));
color: var(--text-secondary-color);
}

.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled)>.p-accordionheader:hover,
.p-accordionpanel:not(.p-disabled).p-accordionpanel-active>.p-accordionheader {
background: transparent;
color: light-dark(var(--p-surface-700), var(--p-surface-0));
color: var(--text-color);
}

.p-accordionpanel:not(.p-accordionpanel-active):not(.p-disabled) .p-accordionheader:hover .p-accordionheader-toggle-icon,
Expand All @@ -175,7 +214,7 @@

.p-accordioncontent-content {
border-width: 0;
border-color: light-dark(var(--p-surface-200), var(--p-surface-700));
border-color: var(--border-color);
background-color: transparent;
color: inherit;
padding: 0 1.125rem 1.125rem 1.125rem;
Expand All @@ -184,21 +223,23 @@

.p-fileupload-choose-button {
padding: 0.5rem 0.75rem;
background: light-dark(#09090b, #ffffff);
border-color: light-dark(#09090b, #ffffff);
color: light-dark(#ffffff, #000000);
background: var(--designer-primary-color);
border-color: var(--designer-primary-color);
color: var(--designer-primary-contrast-color);
cursor: pointer;
font-weight: medium;
border-radius: 4px;
transition: background 0.2s;
transition: background-color 0.2s;

&:hover {
background: light-dark(#27272a, #f3f4f6);
border-color: light-dark(#27272a, #f3f4f6);
&:enabled:hover,
&:enabled:active {
background: var(--designer-primary-emphasis-color);
border-color: var(--designer-primary-emphasis-color);
}

&:focus-visible {
outline: 1px solid light-dark(#09090b, #ffffff);
&:enabled:active,
&:enabled:focus-visible {
outline: 1px solid var(--designer-primary-color);
outline-offset: 2px;
box-shadow: none;
}
Expand Down
12 changes: 8 additions & 4 deletions apps/showcase/assets/styles/layout/variables/main/_dark.scss
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
:root[class="p-dark"] {
--primary-text-color:var(--p-primary-400);
--primary-text-color: var(--p-primary-400);
--primary-color: var(--p-primary-color);
--primary-contrast-color:var(--p-primary-contrast-color);
--primary-contrast-color: var(--p-primary-contrast-color);
--primary-hover-color: var(--p-primary-hover-color);
--text-color: var(--p-surface-0);
--text-secondary-color: var(--p-surface-400);
--glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
--glow-blend: hard-light, color-dodge;
--topbar-sticky-background:rgba(0,0,0,.3);
--mobile-menu-background: rgba(0,0,0,.3);
--topbar-sticky-background: rgba(0, 0, 0, .3);
--mobile-menu-background: rgba(0, 0, 0, .3);
--card-border: 1px solid transparent;
--card-background: var(--p-surface-900);
--border-color: var(--p-surface-700);
Expand All @@ -25,4 +25,8 @@
--code-button-text-color: var(--p-surface-300);
--docsearch-mask-background: var(--p-mask-background);
--logo-color: var(--text-secondary-color);
--designer-primary-color: #ffffff;
--designer-primary-emphasis-color: #f3f4f6;
--designer-primary-contrast-color: #000000;
--designer-focus-outline-color: #ffffff;
}
4 changes: 4 additions & 0 deletions apps/showcase/assets/styles/layout/variables/main/_light.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,4 +25,8 @@
--code-button-text-color: var(--p-surface-300);
--docsearch-mask-background: var(--p-mask-background);
--logo-color: var(--text-secondary-color);
--designer-primary-color: #09090b;
--designer-primary-emphasis-color: #27272a;
--designer-primary-contrast-color: #ffffff;
--designer-focus-outline-color: #09090b;
}
25 changes: 9 additions & 16 deletions apps/showcase/components/doc/helpers/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import APIDocs from '@/doc/common/apidoc/index.json';
import { $dt } from '@primeuix/themes';
import ComponentTokens from '@primeuix/themes/tokens';

export const getPTOptions = (name) => {
const { props } = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughOptions`] || APIDocs[name.toLowerCase()].interfaces.values[`${name}DirectivePassThroughOptions`];
Expand Down Expand Up @@ -58,24 +58,17 @@ export const getStyleOptions = (name) => {
};

export const getTokenOptions = (name) => {
const values = APIDocs[`themes/${name.toLowerCase()}`]?.tokens?.values;
let data = [];

if (values) {
/* eslint-disable-next-line no-unused-vars */
for (const [key, value] of Object.entries(values)) {
if (value && value.props) {
for (const tokens of value.props) {
const { token, description } = tokens;
const designToken = $dt(token);
if (ComponentTokens[name.toLowerCase()]) {
const tokens = ComponentTokens[name.toLowerCase()].tokens;

data.push({
token,
variable: designToken.name,
description: description
});
}
}
for (const [_, value] of Object.entries(tokens)) {
data.push({
token: value.token,
variable: value.variable,
description: value.description
});
}
}

Expand Down
7 changes: 0 additions & 7 deletions apps/showcase/components/layout/AppConfigurator.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -306,13 +306,6 @@ export default {
const preset = presets[value];
const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
if (value === 'Material') {
document.body.classList.add('material');
this.$primevue.config.ripple = true;
} else {
document.body.classList.remove('material');
}
$t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
},
onRTLChange(value) {
Expand Down
Loading

0 comments on commit 2e1442a

Please sign in to comment.