Skip to content

Commit

Permalink
feat: adding new colors definition (#517)
Browse files Browse the repository at this point in the history
  • Loading branch information
@BrocksiNet
BrocksiNet committed Jan 3, 2024
1 parent e6ea89c commit f7797e8
Show file tree
Hide file tree
Showing 72 changed files with 621 additions and 519 deletions.
14 changes: 14 additions & 0 deletions .changeset/fast-cheetahs-admire.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
"vue-demo-store": minor
---

Adding all colors to uno.config.ts to show that they can changed via config.

Changes in detail:

- blue is now covered by primary.
- gray and slate are now covered by secondary.
- brand-primary is now primary (default).
- brand-light is now light (default).
- brand-dark is now dark (default).
- Added also other colors to config like yellow, green, indigo and white.
5 changes: 5 additions & 0 deletions .changeset/good-seahorses-grin.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@shopware-pwa/cms-base": minor
---

Change tailwindcss colors definition. Allows easy overwrite in demo-store template.
18 changes: 9 additions & 9 deletions packages/cms-base/components/public/cms/element/CmsElementBuyBox.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,18 +94,18 @@ const restockTime = computed(() => product.value?.restockTime);
<div v-if="tierPrices.length <= 1">
<SwSharedPrice
v-if="isListPrice"
class="text-1xl text-gray-900 basis-2/6 justify-start line-through"
class="text-1xl text-secondary-900 basis-2/6 justify-start line-through"
:value="price?.listPrice?.price"
/>
<SwSharedPrice
v-if="unitPrice"
class="text-3xl text-gray-900 basis-2/6 justify-start"
class="text-3xl text-secondary-900 basis-2/6 justify-start"
:class="{
'text-red': isListPrice,
}"
:value="unitPrice"
/>
<div class="text-xs flex text-gray-500" v-if="regulationPrice">
<div class="text-xs flex text-secondary-500" v-if="regulationPrice">
{{ translations.product.previously }}
<SwSharedPrice class="ml-1" :value="regulationPrice" />
</div>
Expand All @@ -115,22 +115,22 @@ const restockTime = computed(() => product.value?.restockTime);
<thead>
<tr>
<th
class="border-b dark:border-slate-600 font-medium p-4 pl-8 pt-0 pb-3 text-slate-600 dark:text-slate-200 text-left"
class="border-b dark:border-secondary-600 font-medium p-4 pl-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left"
>
{{ translations.product.amount }}
</th>

<th
class="border-b dark:border-slate-600 font-medium p-4 pr-8 pt-0 pb-3 text-slate-600 dark:text-slate-200 text-left"
class="border-b dark:border-secondary-600 font-medium p-4 pr-8 pt-0 pb-3 text-secondary-600 dark:text-secondary-200 text-left"
>
{{ translations.product.price }}
</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-slate-800">
<tbody class="bg-white dark:bg-secondary-800">
<tr v-for="(tierPrice, index) in tierPrices" :key="tierPrice.label">
<td
class="border-b border-slate-100 dark:border-slate-700 p-4 pl-8 font-medium text-slate-500 dark:text-slate-400"
class="border-b border-secondary-100 dark:border-secondary-700 p-4 pl-8 font-medium text-secondary-500 dark:text-secondary-400"
>
<span v-if="index < tierPrices.length - 1">{{
translations.product.to
Expand All @@ -139,7 +139,7 @@ const restockTime = computed(() => product.value?.restockTime);
{{ tierPrice.quantity }}
</td>
<td
class="border-b border-slate-100 dark:border-slate-700 p-4 pr-8 font-medium text-current-500 dark:text-slate-400"
class="border-b border-secondary-100 dark:border-secondary-700 p-4 pr-8 font-medium text-current-500 dark:text-secondary-400"
>
{{ getFormattedPrice(tierPrice.unitPrice) }}
</td>
Expand Down Expand Up @@ -177,7 +177,7 @@ const restockTime = computed(() => product.value?.restockTime);
<SwVariantConfigurator @change="changeVariant" />
<SwProductAddToCart :product="product" />
<div class="mt-3 product-detail-ordernumber-container">
<span class="font-bold text-gray-900">
<span class="font-bold text-secondary-900">
{{ translations.product.productNumber }}:
</span>
<span>
Expand Down
48 changes: 25 additions & 23 deletions packages/cms-base/components/public/cms/element/CmsElementCategoryNavigation.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const removeChildrenIfNotActiveCategory = () => {
onMounted(async () => {
// depth 0 means, we load only first level of categories, depth 1 means we load first and second level of categories ...
const depth = flagAllowSubcategories ? 0 : 1;
categoryNavigation.value = await loadNavigationElements({depth});
categoryNavigation.value = await loadNavigationElements({ depth });
if (!flagAllowSubcategories) {
categoryNavigation.value = removeChildrenIfNotActiveCategory();
}
Expand All @@ -74,7 +74,7 @@ onMounted(async () => {
>
<h2
v-if="categoryNavigation.length > 0 && !flagAllowSubcategories"
class="text-3xl font-bold tracking-tight text-gray-900 m-0 px-5"
class="text-3xl font-bold tracking-tight text-secondary-900 m-0 px-5"
>
{{
categoryNavigation.length > 1
Expand All @@ -84,7 +84,7 @@ onMounted(async () => {
</h2>
<h2
v-if="categoryNavigation.length > 0 && flagAllowSubcategories"
class="text-3xl font-bold tracking-tight text-gray-900 m-0 px-5"
class="text-3xl font-bold tracking-tight text-secondary-900 m-0 px-5"
>
{{
categoryNavigation.length > 1
Expand All @@ -102,63 +102,65 @@ onMounted(async () => {
</div>
<div v-if="loading">
<div class="px-5">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 m-0 px-5">
<h2
class="text-3xl font-bold tracking-tight text-secondary-900 m-0 px-5"
>
{{ translations.listing.loading }}
</h2>
<div
class="border border-gray-200 shadow rounded-md p-4 max-w-screen-xl mx-auto"
class="border border-secondary-200 shadow rounded-md p-4 max-w-screen-xl mx-auto"
>
<div class="animate-pulse flex space-x-4">
<div class="flex-1 space-y-6 py-1">
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="h-2 bg-slate-200 rounded col-span-2"></div>
<div class="h-2 bg-slate-200 rounded col-span-1"></div>
<div class="h-2 bg-light-200 rounded col-span-2"></div>
<div class="h-2 bg-light-200 rounded col-span-1"></div>
</div>
<div class="h-2 bg-gray-200 rounded"></div>
<div class="h-2 bg-secondary-200 rounded"></div>
</div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="h-2 bg-slate-200 rounded col-span-1"></div>
<div class="h-2 bg-slate-200 rounded col-span-2"></div>
<div class="h-2 bg-light-200 rounded col-span-1"></div>
<div class="h-2 bg-light-200 rounded col-span-2"></div>
</div>
<div class="h-2 bg-gray-200 rounded"></div>
<div class="h-2 bg-secondary-200 rounded"></div>
</div>
</div>
</div>
<div class="animate-pulse flex space-x-4">
<div class="flex-1 space-y-6 py-4">
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="h-2 bg-slate-200 rounded col-span-2"></div>
<div class="h-2 bg-slate-200 rounded col-span-1"></div>
<div class="h-2 bg-light-200 rounded col-span-2"></div>
<div class="h-2 bg-light-200 rounded col-span-1"></div>
</div>
<div class="h-2 bg-gray-200 rounded"></div>
<div class="h-2 bg-secondary-200 rounded"></div>
</div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="h-2 bg-slate-200 rounded col-span-1"></div>
<div class="h-2 bg-slate-200 rounded col-span-2"></div>
<div class="h-2 bg-light-200 rounded col-span-1"></div>
<div class="h-2 bg-light-200 rounded col-span-2"></div>
</div>
<div class="h-2 bg-gray-200 rounded"></div>
<div class="h-2 bg-secondary-200 rounded"></div>
</div>
</div>
</div>
<div class="animate-pulse flex space-x-4">
<div class="flex-1 space-y-6 pt-4">
<div class="space-y-3">
<div class="grid grid-cols-6 gap-4">
<div class="h-2 bg-slate-200 rounded col-span-1"></div>
<div class="h-2 bg-slate-200 rounded col-span-5"></div>
<div class="h-2 bg-light-200 rounded col-span-1"></div>
<div class="h-2 bg-light-200 rounded col-span-5"></div>
</div>
<div class="h-2 bg-gray-200 rounded"></div>
<div class="h-2 bg-secondary-200 rounded"></div>
</div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="h-2 bg-slate-200 rounded col-span-2"></div>
<div class="h-2 bg-slate-200 rounded col-span-1"></div>
<div class="h-2 bg-light-200 rounded col-span-2"></div>
<div class="h-2 bg-light-200 rounded col-span-1"></div>
</div>
<div class="h-2 bg-gray-200 rounded"></div>
<div class="h-2 bg-secondary-200 rounded"></div>
</div>
</div>
</div>
Expand Down
5 changes: 2 additions & 3 deletions packages/cms-base/components/public/cms/element/CmsElementCrossSelling.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,9 @@ const toggleTab = (index: number) => {
<a
v-for="(collection, index) of crossSellCollections"
:key="index"
class="transition text-lg font-bold text-gray-700 cursor-pointer"
class="transition text-lg font-bold text-secondary-700 cursor-pointer"
:class="{
'border-b-3 border-brand-primary text-brand-primary':
currentTabIndex === index,
'border-b-3 border-primary text-primary': currentTabIndex === index,
}"
@click="toggleTab(index)"
>
Expand Down
2 changes: 1 addition & 1 deletion packages/cms-base/components/public/cms/element/CmsElementImageGallery.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ function next() {
:key="image.media.url"
>
<div
class="w-14 h-20 overflow-hidden cursor-pointer p-1 border-gray-200 rounded transition duration-150 ease-in-out"
class="w-14 h-20 overflow-hidden cursor-pointer p-1 border-secondary-200 rounded transition duration-150 ease-in-out"
:class="{
border: i !== currentIndex,
'border-indigo-500 border-3': i === currentIndex,
Expand Down
10 changes: 5 additions & 5 deletions packages/cms-base/components/public/cms/element/CmsElementProductDescriptionReviews.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,15 +51,15 @@ const reviews = computed(() => props.content.data.reviews?.elements);
>
<div class="w-full">
<ul
class="flex flex-wrap text-sm font-medium list-none text-center text-gray-500 border-b border-gray-200 dark:border-gray-500 dark:text-gray-400"
class="flex flex-wrap text-sm font-medium list-none text-center text-secondary-500 border-b border-secondary-200 dark:border-secondary-500 dark:text-secondary-400"
>
<li class="mr-2 text-center">
<a
class="font-bold uppercase px-5 py-3 block leading-normal cursor-pointer"
:class="[
currentTab !== 1
? 'text-gray-500 bg-white'
: 'text-white bg-gray-500',
? 'text-secondary-500 bg-white'
: 'text-white bg-secondary-500',
]"
@click="() => toggleTabs(1)"
>
Expand All @@ -72,8 +72,8 @@ const reviews = computed(() => props.content.data.reviews?.elements);
class="font-bold uppercase px-5 py-3 block leading-normal cursor-pointer"
:class="[
currentTab !== 2
? 'text-gray-500 bg-white'
: 'text-white bg-gray-500',
? 'text-secondary-500 bg-white'
: 'text-white bg-secondary-500',
]"
@click="() => toggleTabs(2)"
>
Expand Down
4 changes: 2 additions & 2 deletions packages/cms-base/components/public/cms/element/CmsElementProductSlider.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@ const border = computed(() => getConfigValue("border"));
</script>
<template>
<div ref="productSlider" class="cms-element-product-slider">
<h3 class="mb-5 text-lg font-bold text-gray-700" v-if="title">
<h3 class="mb-5 text-lg font-bold text-secondary-700" v-if="title">
{{ title }}
</h3>
<div :class="{ 'py-5 border border-gray-300': border }">
<div :class="{ 'py-5 border border-secondary-300': border }">
<SwSlider
:config="config"
gap="1.25rem"
Expand Down
9 changes: 3 additions & 6 deletions packages/cms-base/components/public/cms/element/CmsElementText.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ const CmsTextRender = () => {
"a",
{
class:
"underline text-base font-normal text-brand-primary hover:text-gray-900",
"underline text-base font-normal text-primary hover:text-secondary-900",
...getOptionsFromNode(node).attrs,
},
[...children],
Expand All @@ -63,11 +63,8 @@ const CmsTextRender = () => {
"rounded-md inline-block my-2 py-2 px-4 border border-transparent text-sm font-medium focus:outline-none disabled:opacity-75";
_class = node.attrs.class
.replace("btn-secondary", `${btnClass} bg-brand-dark text-white`)
.replace(
"btn-primary",
`${btnClass} bg-brand-primary text-white`,
);
.replace("btn-secondary", `${btnClass} bg-dark text-white`)
.replace("btn-primary", `${btnClass} bg-primary text-white`);
}
return createElement(
Expand Down
6 changes: 3 additions & 3 deletions templates/vue-demo-store/components/FrontendAccountCustomerGroupRegistrationPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@ const { data: registrationResponse } = await useAsyncData(
<template>
<div class="container mx-auto bg-white flex flex-col">
<h1
class="mb-4 text-2xl font-extrabold leading-none tracking-tight text-gray-900 md:text-3xl lg:text-5xl dark:text-white text-center"
class="mb-4 text-2xl font-extrabold leading-none tracking-tight text-secondary-900 md:text-3xl lg:text-5xl dark:text-white text-center"
>
{{ registrationResponse?.translated.registrationTitle }}
</h1>
<div
v-if="registrationResponse?.registrationActive"
class="text-lg font-normal text-gray-500 lg:text-xl dark:text-gray-400"
class="text-lg font-normal text-secondary-500 lg:text-xl dark:text-secondary-400y-400"
>
<p class="px-6 sm:px-4 mb-6">
{{ registrationResponse?.translated?.registrationIntroduction }}
Expand All @@ -37,7 +37,7 @@ const { data: registrationResponse } = await useAsyncData(
</div>
<div
v-else
class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300"
class="p-4 mb-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-secondary-800 dark:text-yellow-300"
role="alert"
>
<span class="font-medium">Registration is not active!</span> Try again
Expand Down
2 changes: 1 addition & 1 deletion templates/vue-demo-store/components/LanguageSwitcher.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const onChangeHandler = async (option: Event) => {
<template>
<select
aria-label="Select language"
class="mt-1 block w-full p-2.5 border border-gray-300 text-gray-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-brand-light"
class="mt-1 block w-full p-2.5 border border-secondary-300 text-secondary-900 text-sm rounded-md shadow-sm focus:ring-brand-light focus:border-light"
@change="onChangeHandler"
>
<option
Expand Down
2 changes: 1 addition & 1 deletion templates/vue-demo-store/components/account/AccountAddressCard.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const addressSaved = () => {
<div class="col-span-6 lg:col-span-3 max-w-md">
<div class="flex items-center mb-2">
<h5
class="text-xl leading-none text-gray-900 mr-2"
class="text-xl leading-none text-secondary-900 mr-2"
data-testid="address-box-name"
>
{{ `${address.firstName} ${address.lastName}` }}
Expand Down

2 comments on commit f7797e8

@vercel
Copy link

@vercel vercel bot commented on f7797e8 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

shopware-frontends-docs – ./apps/docs/

shopware-frontends-docs-shopware-frontends.vercel.app
shopware-frontends-docs.vercel.app
frontends.shopware.com
shopware-frontends-docs-git-main-shopware-frontends.vercel.app

@vercel
Copy link

@vercel vercel bot commented on f7797e8 Jan 3, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

frontends-demo – ./templates/vue-demo-store

frontends-demo-shopware-frontends.vercel.app
frontends-demo.vercel.app
frontends-demo-git-main-shopware-frontends.vercel.app

Please sign in to comment.