diff --git a/assets/styles/layout/layout.scss b/assets/styles/layout/layout.scss index f8fe35895..ba42978e3 100644 --- a/assets/styles/layout/layout.scss +++ b/assets/styles/layout/layout.scss @@ -15,13 +15,13 @@ @import './_responsive'; @import './_animation'; @import './landing/_landing'; +@import './templates/_templates'; @import './templates/_apollo'; @import './templates/_atlantis'; -@import './templates/_ultima'; -@import './templates/_freya'; -@import './templates/_verona'; -@import './templates/_diamond'; @import './templates/_avalon'; +@import './templates/_diamond'; +@import './templates/_freya'; @import './templates/_poseidon'; @import './templates/_sakai'; -@import './templates/_templates'; +@import './templates/_ultima'; +@import './templates/_verona'; diff --git a/assets/styles/layout/templates/_templates.scss b/assets/styles/layout/templates/_templates.scss index f7a3a18fd..0b3b696e2 100644 --- a/assets/styles/layout/templates/_templates.scss +++ b/assets/styles/layout/templates/_templates.scss @@ -9,7 +9,7 @@ &-youtube { &-wrapper { padding: 5rem 0; - background-color: var(--surface-card); + background-color: var(--card-background); border-radius: 2rem; } @@ -19,7 +19,7 @@ text-align: center; font-size: 3rem; font-weight: 600; - color: var(--surface-900); + color: var(--p-surface-900); @include mobile { font-size: 1.5rem; @@ -48,7 +48,7 @@ font-weight: 400; line-height: 1.25rem; text-align: center; - color: var(--surface-900); + color: var(--p-surface-900); width: 45rem; margin: 1.25rem auto 0; @@ -66,7 +66,7 @@ box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.02); cursor: pointer; position: relative; - background-color: var(--primary-100); + background-color: var(--p-primary-100); padding: 1.88rem 1.88rem 0; border-radius: 1.5rem; overflow: hidden; @@ -169,7 +169,7 @@ &-wrapper { padding: 5rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } display: flex; @@ -183,13 +183,13 @@ width: 21.125rem; padding: 1.25rem; border-radius: 1.3125rem; - border: 1px solid var(--surface-border, #EEE); - background: var(--surface-0, #FFF); + border: 1px solid var(--border-color, #EEE); + background: var(--p-surface-0, #FFF); &-top { width: 100%; margin-bottom: 1.25rem; - background: var(--surface-100, #FFF); + background: var(--p-surface-100, #FFF); border-radius: 0.65625rem; overflow: hidden; display: flex; @@ -202,7 +202,7 @@ &-bottom { &-title { - color: var(--surface-900); + color: var(--p-surface-900); font-size: 1.09375rem; font-weight: 600; line-height: 1.3125rem; @@ -211,7 +211,7 @@ } &-description { - color: var(--surface-600); + color: var(--p-surface-600); font-size: 0.875rem; font-weight: 400; line-height: 1.3125rem; @@ -260,7 +260,7 @@ &-wrapper { padding: 7rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } margin: 0 auto; @@ -286,12 +286,12 @@ width: 100%; padding: 1.25rem; border-radius: 1.3125rem; - border: 1px solid var(--surface-border); - background: var(--surface-0); + border: 1px solid var(--border-color); + background: var(--p-surface-0); &-image { width: auto; - background: var(--surface-100); + background: var(--p-surface-100); border-radius: 0.65625rem; display: flex; @@ -304,7 +304,7 @@ h2 { margin: 1.25rem 0 0; - color: var(--surface-900, var(--surface-900, #212121)); + color: var(--p-surface-900, var(--p-surface-900, #212121)); font-size: 1.09375rem; font-weight: 600; line-height: 1.3125rem; @@ -312,7 +312,7 @@ p { margin: 0.75rem 0 0; - color: var(--surface-600, #757575); + color: var(--p-surface-600, #757575); font-size: 0.875rem; font-weight: 400; line-height: 1.3125rem; @@ -386,12 +386,12 @@ &-wrapper { padding: 5rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } &-title { text-align: center; - color: var(--surface-900); + color: var(--p-surface-900); font-size: 3rem; font-weight: 600; } @@ -407,8 +407,8 @@ &-card { border-radius: 1.3125rem; - border: 1px solid var(--surface-border, #EEE); - background: var(--surface-0, #FFF); + border: 1px solid var(--border-color, #EEE); + background: var(--p-surface-0, #FFF); padding: 1.25rem; display: flex; img { @@ -478,17 +478,125 @@ } // TEMPLATE CONFIGURATION -.layout-dark { +.p-dark { .template { &-configuration { + background-color: var(--p-surface-900); + &-screen { &-bottom { - background: var(--surface-card) !important; + background: var(--card-background) !important; p { - color: var(--surface-900); + color: var(--p-surface-0); } } + + &-top { + background: var(--card-background); + } + } + + &-title { + color: var(--p-surface-0); + } + + &-description { + color: var(--p-surface-200); + } + } + + &-license { + &-card { + border-color: var(--p-surface-800); + + span, h2 { + color: var(--p-surface-0); + } + + button { + background-color: var(--p-surface-0); + color: var(--p-surface-900); + + &:hover { + background-color: var(--p-surface-100); + } + } + + &-included { + p { + color: var(--p-surface-300); + } + } + } + + &-description { + color: var(--p-surface-300); + } + } + + &-features { + &-animation { + &-left-card { + &-active { + background-color: var(--p-surface-700); + } + + &-content { + h5 { + color: var(--p-surface-0); + } + + p { + color: var(--p-surface-400); + } + } + + &:hover { + background-color: var(--p-surface-700); + } + } + } + + &-horizontal { + &-card { + background-color: var(--p-surface-900); + + &-bottom-title { + color: var(--p-surface-0); + } + + p { + color: var(--p-surface-200); + } + } + } + + &-vertical { + &-card { + background-color: var(--p-surface-900); + + &-image { + background-color: var(--p-surface-700); + } + + h2 { + color: var(--p-surface-0); + } + + p { + color: var(--p-surface-200); + } + } + } + } + + &-related { + h2 { + color: var(--p-surface-0); + } + &-slide-card { + background-color: var(--p-surface-900); } } } @@ -499,13 +607,13 @@ &-wrapper { padding: 5rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } padding: 2rem; border-radius: 1.75rem; - border: 1px solid var(--surface-border, #EEE); - background: var(--surface-0, #FFF); + border: 1px solid var(--border-color, #EEE); + background: var(--p-surface-0, #FFF); width: 49.25rem; margin: 0 auto; @@ -513,11 +621,11 @@ font-size: 1.53125rem; font-weight: 700; line-height: 1.8125rem; - color: var(--surface-900, var(--surface-900, #212121)); + color: var(--p-surface-900, var(--p-surface-900, #212121)); } &-description { - color: var(--surface-600, #757575); + color: var(--p-surface-600, #757575); font-size: 1.09375rem; font-weight: 400; line-height: 1.64375rem; @@ -526,11 +634,11 @@ &-screen { border-radius: 0.875rem; - border: 1px solid var(--surface-border, #DFE7EF); + border: 1px solid var(--border-color, #DFE7EF); &-top { border-radius: 0.75rem 0.75rem 0rem 0rem; - background: var(--surface-0, #FFF); + background: var(--p-surface-0, #FFF); padding: 0.25rem 1.5rem; height: 3.5rem; display: flex; @@ -558,7 +666,7 @@ &-bottom { padding: 1.5rem; - background: var(--surface-900); + background: var(--p-surface-900); border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; display: flex; @@ -567,7 +675,7 @@ position: relative; p { - color: var(--surface-0); + color: var(--p-surface-0); font-size: 0.875rem; font-weight: 400; line-height: 1.0625rem; @@ -652,7 +760,7 @@ &-features-animation { &-wrapper { border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); padding: 5rem 2rem; } @@ -662,7 +770,7 @@ h2 { margin: 0; - color: var(--surface-900); + color: var(--p-surface-900); text-align: center; font-size: 3rem; font-weight: 600; @@ -676,7 +784,7 @@ margin: 0 auto; padding: 1.75rem; border-radius: 1.75rem; - border: 1px solid var(--surface-border, #EEE); + border: 1px solid var(--border-color, #EEE); &-left { width: 100%; @@ -695,26 +803,26 @@ &-active { border-radius: 0.75rem; - background: var(--surface-100, #F5F5F5); + background: var(--p-surface-100, #F5F5F5); transition: all 0.2s ease; } &:hover { border-radius: 0.75rem; - background: var(--surface-100, #F5F5F5); + background: var(--p-surface-100, #F5F5F5); } &:hover &-order { div { &:nth-child(2) { - color: var(--surface-100); + color: var(--p-surface-100); } &:nth-child(3) { animation: FeaturesOrderAnimation 2.5s ease-in-out; - color: var(--primary-400); + color: var(--p-primary-400); } } } @@ -722,13 +830,13 @@ &-active &-order { div { &:nth-child(2) { - color: var(--surface-100); + color: var(--p-surface-100); } &:nth-child(3) { animation: FeaturesOrderAnimation 2.5s ease-in-out; - color: var(--primary-400); + color: var(--p-primary-400); } } } @@ -748,12 +856,12 @@ left: 0; &:nth-child(1) { - color: var(--primary-400); - -webkit-text-stroke: 1.2px var(--primary-400); + color: var(--p-primary-400); + -webkit-text-stroke: 1.2px var(--p-primary-400); } &:nth-child(2) { - color: var(--surface-card); + color: var(--card-background); transition: all 0.2s ease; } @@ -769,7 +877,7 @@ flex: 1; h5 { - color: var(--surface-900, var(--color-surface-900, #212121)); + color: var(--p-surface-900, var(--color-surface-900, #212121)); font-size: 1.09375rem; font-weight: 600; line-height: 1.3125rem; @@ -777,14 +885,14 @@ } p { - color: var(--surface-600, #757575); + color: var(--p-surface-600, #757575); font-size: 0.875rem; font-weight: 400; line-height: 1.3125rem; margin: 0.38rem 0 0; a { - color: var(--primary-400); + color: var(--p-primary-400); &:hover { text-decoration: underline; @@ -800,7 +908,7 @@ width: 30rem; height: fit-content; border-radius: 0.875rem; - background-color: var(--surface-100); + background-color: var(--p-surface-100); display: flex; overflow: hidden; img { @@ -812,7 +920,7 @@ width: 100%; padding: 2rem 0; border-radius: 0.75rem; - background: var(--surface-100); + background: var(--p-surface-100); position: relative; display: flex; flex-direction: column; @@ -838,8 +946,8 @@ align-items: center; gap: 0.25rem; border-radius: 2.5rem; - border: 1px solid var(--surface-border); - background: var(--surface-0); + border: 1px solid var(--border-color); + background: var(--p-surface-0); padding: 0.25rem; width: 90%; @@ -848,8 +956,8 @@ width: 100%; padding: 0.21875rem 0.5rem; border-radius: 2.25rem; - color: var(--surface-900); - background: var(--surface-0); + color: var(--p-surface-900); + background: var(--p-surface-0); border: none; outline: none; font-size: 0.75rem; @@ -860,14 +968,14 @@ transition: all 0.15s ease; &:hover { - background: var(--surface-100); + background: var(--p-surface-100); } } &-btnActive { - background: var(--surface-100) !important; + background: var(--p-surface-100) !important; } } @@ -1004,7 +1112,7 @@ &-hero { width: 100%; height: 36.25rem; - background: var(--primary-500); + background: var(--p-primary-500); border-radius: 2rem; position: relative; overflow: hidden; @@ -1017,7 +1125,7 @@ margin-top: 9.81rem; border-radius: 1.5rem; border: 1px solid rgba(255, 255, 255, 0.24); - background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, var(--primary-400)/0.8 100%), rgba(255, 255, 255, 0.10); + background: linear-gradient(180deg, rgba(170, 140, 255, 0.00) 0%, var(--p-primary-400)/0.8 100%), rgba(255, 255, 255, 0.10); box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.24) inset, 0px 48px 80px 0px rgba(0, 0, 0, 0.08), 0px -5px 13px -2px rgba(255, 255, 255, 0.55) inset; backdrop-filter: blur(2px); padding: 2.25rem 1.75rem; @@ -1037,7 +1145,7 @@ font-weight: 400; line-height: normal; margin: 1rem 0 0; - color: var(--surface-0); + color: var(--p-primary-inverse-color); } &-buttons { @@ -1073,12 +1181,13 @@ } &-btn2 { - background-color: var(--primary-600); - border-color: var(--primary-600); + background-color: var(--p-primary-600); + border-color: var(--p-primary-600); + color: var(--p-primary-inverse-color); &:hover { - background-color: var(--primary-700); - border-color: var(--primary-700); + background-color: var(--p-primary-700); + border-color: var(--p-primary-700); } } @@ -1094,7 +1203,7 @@ display: flex; align-items: flex-end; gap: 0.5rem; - color: var(--surface-0); + color: var(--p-primary-inverse-color); span { font-size: 0.75rem; @@ -1251,11 +1360,11 @@ .template { &-intro { border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); padding: 5rem 2rem; h2 { - color: var(--surface-900); + color: var(--p-surface-900); text-align: center; font-size: 3.42857rem; font-weight: 600; @@ -1264,7 +1373,7 @@ } p { - color: var(--surface-900); + color: var(--p-surface-900); text-align: center; font-size: 1rem; font-weight: 400; @@ -1275,7 +1384,7 @@ &-image { position: relative; - background-color: var(--primary-600); + background-color: var(--p-primary-600); max-width: 75rem; margin: 3.5rem auto 0; border-radius: 1.15rem; @@ -1286,7 +1395,7 @@ position: absolute; inset: 0; z-index: 5; - background-color: var(--primary-100); + background-color: var(--p-primary-100); opacity: 0.15; border-radius: inherit; } @@ -1299,7 +1408,6 @@ } } - @media only screen and (max-width: 992px) { .template { &-intro { @@ -1335,7 +1443,6 @@ } } - // TEMPALTE SEPARATOR .template { &-separator { @@ -1349,14 +1456,14 @@ content: ''; flex: 1; height: 1px; - background-color: var(--surface-border) + background-color: var(--border-color) } &::after { content: ''; flex: 1; height: 1px; - background-color: var(--surface-border) + background-color: var(--border-color) } &-icon { @@ -1365,9 +1472,9 @@ display: flex; align-items: center; justify-content: center; - border: 1px solid var(--surface-border); + border: 1px solid var(--border-color); border-radius: 100%; - background-color: var(--surface-card); + background-color: var(--card-background); } } @@ -1375,13 +1482,12 @@ } //TEMPLATE LICENCE - .template { &-license { &-wrapper { padding: 5rem 2rem; border-radius: 2rem; - background: var(--surface-card, #FFF); + background: var(--card-background, #FFF); } &-cards { @@ -1396,16 +1502,17 @@ width: 21.25rem; padding: 1.5rem; border-radius: 1rem; - border: 1px solid var(--surface-200); - background-color: var(--surface-card); + border: 1px solid var(--p-surface-200); + background-color: var(--card-background); + span { - color: var(--surface-900); + color: var(--p-surface-900); font-weight: 600; line-height: 1.5rem; } h2 { - color: var(--surface-900); + color: var(--p-surface-900); font-size: 2.5rem; font-weight: 600; line-height: 3rem; @@ -1416,7 +1523,7 @@ button { padding: 0.25rem 0.75rem; border-radius: 0.375rem; - background: var(--surface-900); + background: var(--p-surface-900); text-align: center; width: 100%; outline: none; @@ -1426,10 +1533,10 @@ transition: all 0.2s ease; &:hover { - background: var(--surface-700); + background: var(--p-surface-700); } - color: var(--surface-0); + color: var(--p-surface-0); text-align: center; font-size: 0.875rem; font-weight: 500; @@ -1444,7 +1551,7 @@ margin-bottom: 1.25rem; p { - color: var(--surface-500); + color: var(--p-surface-500); font-size: 0.875rem; font-weight: 400; line-height: 1.5rem; @@ -1455,7 +1562,7 @@ } &-description { - color: var(--surface-500); + color: var(--p-surface-500); text-align: center; font-size: 0.875rem; line-height: 1.5rem; @@ -1473,13 +1580,13 @@ margin: 1.5rem auto 0; a { - color: var(--primary-500); + color: var(--p-primary-500); text-decoration-line: underline; cursor: pointer; transition: all 0.2s ease; &:hover { - color: var(--primary-300); + color: var(--p-primary-300); } } } @@ -1499,6 +1606,7 @@ } } } + @media only screen and (max-width: 721px) { .template { &-license { diff --git a/components/template/Hero/index.vue b/components/template/Hero/index.vue index 9162de39b..595ee5336 100644 --- a/components/template/Hero/index.vue +++ b/components/template/Hero/index.vue @@ -16,11 +16,11 @@ diff --git a/components/template/License.vue b/components/template/License.vue index 1b6a27f55..274986f7d 100644 --- a/components/template/License.vue +++ b/components/template/License.vue @@ -20,7 +20,7 @@

{{ license.description }}

Visit the - official documentation for more information. + official documentation for more information.

diff --git a/doc/templates/ApolloSeparator.vue b/doc/templates/ApolloSeparator.vue index 0ae0e3ad7..ea52c4250 100644 --- a/doc/templates/ApolloSeparator.vue +++ b/doc/templates/ApolloSeparator.vue @@ -1,9 +1,19 @@ + + diff --git a/doc/templates/AtlantisSeparator.vue b/doc/templates/AtlantisSeparator.vue index 46051929a..a4c3f60c7 100644 --- a/doc/templates/AtlantisSeparator.vue +++ b/doc/templates/AtlantisSeparator.vue @@ -5,8 +5,18 @@ fillRule="evenodd" clipRule="evenodd" d="M17.736 16.7144C18.5426 24.1391 29.4206 24.1338 30.2244 16.7144C27.4389 16.4579 25.0833 14.6946 23.9802 12.25C22.8772 14.6946 20.5216 16.4579 17.736 16.7144ZM23.2804 23.6609C23.0374 26.3486 20.8981 28.6944 18.2461 29.186C14.6619 29.9314 11.1098 27.2517 10.792 23.6609C13.5776 23.4044 15.9332 21.6411 17.0362 19.1965C18.1312 21.6598 20.591 23.4338 23.2804 23.6609ZM30.2244 30.6073C29.904 33.7706 27.2252 36.25 23.9802 36.25C20.7353 36.25 18.0565 33.7706 17.736 30.6073C20.4255 30.3802 22.8852 28.6062 23.9802 26.1429C25.0752 28.6062 27.535 30.3802 30.2244 30.6073ZM37.1683 23.6609C36.8478 27.0219 33.7737 29.6108 30.3525 29.2768C27.436 29.0551 24.9362 26.5757 24.6798 23.6609C27.3693 23.4338 29.829 21.6598 30.924 19.1965C32.0271 21.6411 34.3827 23.4044 37.1683 23.6609Z" - fill="var(--surface-900)" + :fill="fillColor" /> + + diff --git a/doc/templates/AvalonSeparator.vue b/doc/templates/AvalonSeparator.vue index 79120e29c..168f84d7c 100644 --- a/doc/templates/AvalonSeparator.vue +++ b/doc/templates/AvalonSeparator.vue @@ -4,1254 +4,1264 @@ - + - + - + - + - + - + - + - + - + - + - + - + - - + + - + - + + + diff --git a/doc/templates/DiamondSeparator.vue b/doc/templates/DiamondSeparator.vue index e2c381c82..9b260c84a 100644 --- a/doc/templates/DiamondSeparator.vue +++ b/doc/templates/DiamondSeparator.vue @@ -4,7 +4,7 @@ @@ -15,3 +15,13 @@ + + diff --git a/doc/templates/FreyaSeparator.vue b/doc/templates/FreyaSeparator.vue index 1c064166f..0dad4ead6 100644 --- a/doc/templates/FreyaSeparator.vue +++ b/doc/templates/FreyaSeparator.vue @@ -1,7 +1,17 @@ + + diff --git a/doc/templates/SakaiSeparator.vue b/doc/templates/SakaiSeparator.vue index eb2443f2a..5126c1407 100644 --- a/doc/templates/SakaiSeparator.vue +++ b/doc/templates/SakaiSeparator.vue @@ -6,15 +6,25 @@ fillRule="evenodd" clipRule="evenodd" d="M10.2923 11.548C10.288 11.642 10.2858 11.7366 10.2858 11.8317C10.2858 15.2102 13.0246 17.949 16.4032 17.949C19.7817 17.949 22.5205 15.2102 22.5205 11.8317C22.5205 11.7343 22.5183 11.6375 22.5138 11.5413C23.1235 11.448 23.7317 11.3408 24.3378 11.2196L24.4013 11.2069C24.4172 11.4131 24.4253 11.6214 24.4253 11.8317C24.4253 16.2621 20.8337 19.8538 16.4032 19.8538C11.9727 19.8538 8.38106 16.2621 8.38106 11.8317C8.38106 11.6244 8.3889 11.4189 8.40437 11.2156L8.42433 11.2196C9.04498 11.3437 9.6678 11.4532 10.2923 11.548ZM19.9854 6.87227C18.9785 6.14373 17.741 5.71429 16.4032 5.71429C15.063 5.71429 13.8234 6.14526 12.8156 6.87619C11.9977 6.7939 11.182 6.68324 10.37 6.54423C11.8403 4.86785 13.9982 3.80952 16.4032 3.80952C18.805 3.80952 20.9604 4.86507 22.4305 6.5376C21.6187 6.67752 20.8031 6.7891 19.9854 6.87227ZM26.2803 10.8311C26.3132 11.1602 26.33 11.4939 26.33 11.8317C26.33 17.3141 21.8856 21.7585 16.4032 21.7585C10.9207 21.7585 6.4763 17.3141 6.4763 11.8317C6.4763 11.4969 6.49287 11.166 6.52521 10.8398L4.64967 10.4646C4.59805 10.9132 4.57153 11.3693 4.57153 11.8317C4.57153 18.3661 9.86875 23.6633 16.4032 23.6633C22.9376 23.6633 28.2348 18.3661 28.2348 11.8317C28.2348 11.3663 28.208 10.9073 28.1557 10.456L26.2803 10.8311ZM26.5412 5.72846L24.5307 6.13055C22.7348 3.57493 19.764 1.90476 16.4032 1.90476C13.0389 1.90476 10.0656 3.57831 8.27016 6.13832L6.26033 5.73634C8.33039 2.29907 12.0983 0 16.4032 0C20.7048 0 24.4702 2.29555 26.5412 5.72846Z" - fill="var(--surface-900)" + :fill="fillColor" /> - + - + + + diff --git a/doc/templates/UltimaSeparator.vue b/doc/templates/UltimaSeparator.vue index a36db0a95..6c51b524b 100644 --- a/doc/templates/UltimaSeparator.vue +++ b/doc/templates/UltimaSeparator.vue @@ -5,8 +5,18 @@ fillRule="evenodd" clipRule="evenodd" d="M36.9818 19.6064C36.9445 19.5171 36.8573 19.4593 36.7606 19.4593H35.4433L36.1606 18.594C36.22 18.5228 36.2319 18.424 36.1927 18.3404C36.1534 18.2568 36.0691 18.2034 35.9762 18.2034H21.5204L17.421 14.3157C17.3415 14.2408 17.2208 14.2283 17.1289 14.2866L14.829 15.7264L14.8271 15.7283L14.8247 15.7292L12.1082 17.5124C12.1015 17.5167 12.0982 17.5233 12.0919 17.5286C12.0785 17.5391 12.067 17.5506 12.0565 17.5635C12.0469 17.5749 12.0393 17.5864 12.0321 17.5993C12.0244 17.6131 12.0192 17.627 12.0144 17.6418C12.0096 17.6571 12.0067 17.6723 12.0048 17.6886C12.0043 17.6967 12 17.7034 12 17.712C12 17.7196 12.0034 17.7253 12.0043 17.733C12.0057 17.7487 12.0091 17.7636 12.0139 17.7793C12.0187 17.7951 12.0239 17.8099 12.0321 17.8247C12.0354 17.8309 12.0359 17.8376 12.0397 17.8438C12.0431 17.849 12.0493 17.8509 12.0532 17.8557C12.0699 17.8772 12.0895 17.8949 12.1125 17.9092C12.1211 17.9144 12.1279 17.9211 12.1365 17.9254C12.1681 17.9407 12.2026 17.9507 12.2399 17.9507H15.5109L16.2493 19.7878L16.2502 19.7893V19.7907L21.054 31.2682L18.2183 33.8346C18.145 33.9009 18.1201 34.005 18.156 34.0972C18.1915 34.1894 18.2806 34.25 18.3792 34.25H22.4618C22.4934 34.25 22.5246 34.2433 22.5538 34.2314C22.5829 34.2194 22.6093 34.2017 22.6313 34.1798L24.7775 32.0314C24.7804 32.0347 24.7813 32.039 24.7847 32.0424L26.8169 34.1755C26.8624 34.2238 26.9223 34.2371 26.9917 34.25C30.6812 34.2294 36.2789 34.2108 36.5423 34.2381C36.5671 34.2462 36.5925 34.25 36.6179 34.25C36.6998 34.25 36.7797 34.2084 36.8243 34.1364C36.9627 33.9119 36.9617 33.9095 29.8916 26.9127L36.9296 19.8681C36.9986 19.7983 37.0187 19.6957 36.9818 19.6064ZM35.4677 18.6804L34.8227 19.4593H22.8449L22.0237 18.6804H35.4677ZM17.2261 14.789L22.1506 19.4593H16.6333L15.2528 16.0244L17.2261 14.789ZM13.0386 17.4727L14.8429 16.2884L15.3189 17.4727H13.0386ZM25.1314 31.7129C25.1251 31.7062 25.1165 31.7033 25.1098 31.6981L26.8251 29.9813V33.4903L25.1314 31.7129ZM36.0653 33.7581C35.1613 33.7448 32.915 33.7391 27.3039 33.7701V29.6571C27.3039 29.6131 27.2886 29.5739 27.268 29.5381L29.554 27.2498C31.8084 29.4813 34.9999 32.6574 36.0653 33.7581ZM22.5451 33.5891L16.8306 19.9368H34.8754C34.8926 19.9406 34.9099 19.9459 34.9271 19.9459C34.941 19.9459 34.9539 19.9392 34.9678 19.9368H36.1841L22.5451 33.5891Z" - fill="var(--surface-900)" + :fill="fillColor" /> + + diff --git a/doc/templates/VeronaSeparator.vue b/doc/templates/VeronaSeparator.vue index a0fcc6348..9138bcbea 100644 --- a/doc/templates/VeronaSeparator.vue +++ b/doc/templates/VeronaSeparator.vue @@ -2,19 +2,19 @@ - - - - - - - - - - + + + + + + + + + + @@ -24,7 +24,7 @@ @@ -33,3 +33,13 @@ + + diff --git a/pages/templates/apollo/index.vue b/pages/templates/apollo/index.vue index 9b2fda961..999e5fb21 100644 --- a/pages/templates/apollo/index.vue +++ b/pages/templates/apollo/index.vue @@ -3,23 +3,23 @@ @@ -243,6 +243,11 @@ export default { } }; }, + computed: { + fillColor() { + return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)'; + } + }, components: { ApolloSeparator } diff --git a/pages/templates/atlantis/index.vue b/pages/templates/atlantis/index.vue index 4af247ead..1ed4b0fc3 100644 --- a/pages/templates/atlantis/index.vue +++ b/pages/templates/atlantis/index.vue @@ -3,37 +3,37 @@ @@ -231,6 +231,11 @@ export default { } }; }, + computed: { + fillColor() { + return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)'; + } + }, components: { AtlantisSeparator } diff --git a/pages/templates/avalon/index.vue b/pages/templates/avalon/index.vue index 06ce1af7e..7a53c5ce5 100644 --- a/pages/templates/avalon/index.vue +++ b/pages/templates/avalon/index.vue @@ -3,15 +3,15 @@ @@ -222,7 +222,6 @@ export default { }, templateHeroData: { pattern: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-pattern.png', - light: true, rectangle: true, dashboard1: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard1.png', dashboard2: 'https://primefaces.org/cdn/primevue/images/templates/avalon/avalon-hero-dashboard2.png', @@ -232,6 +231,11 @@ export default { } }; }, + computed: { + fillColor() { + return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)'; + } + }, components: { AvalonSeparator } diff --git a/pages/templates/diamond/index.vue b/pages/templates/diamond/index.vue index d391ef7a0..eba74d51f 100644 --- a/pages/templates/diamond/index.vue +++ b/pages/templates/diamond/index.vue @@ -6,16 +6,16 @@ - + @@ -220,6 +220,11 @@ export default { } }; }, + computed: { + fillColor() { + return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)'; + } + }, components: { DiamondSeparator } diff --git a/pages/templates/freya/index.vue b/pages/templates/freya/index.vue index 2d1c8235f..82d450937 100644 --- a/pages/templates/freya/index.vue +++ b/pages/templates/freya/index.vue @@ -3,23 +3,23 @@ @@ -217,6 +217,11 @@ export default { } }; }, + computed: { + fillColor() { + return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)'; + } + }, components: { FreyaSeparator } diff --git a/pages/templates/sakai/index.vue b/pages/templates/sakai/index.vue index acbb24573..37b222c1f 100644 --- a/pages/templates/sakai/index.vue +++ b/pages/templates/sakai/index.vue @@ -9,21 +9,21 @@ fillRule="evenodd" clipRule="evenodd" d="M17.1637 19.2467C17.1566 19.4033 17.1529 19.561 17.1529 19.7194C17.1529 25.3503 21.7203 29.915 27.3546 29.915C32.9887 29.915 37.5561 25.3503 37.5561 19.7194C37.5561 19.5572 37.5524 19.3959 37.5449 19.2355C38.5617 19.0801 39.5759 18.9013 40.5867 18.6994L40.6926 18.6782C40.7191 19.0218 40.7326 19.369 40.7326 19.7194C40.7326 27.1036 34.743 33.0896 27.3546 33.0896C19.966 33.0896 13.9765 27.1036 13.9765 19.7194C13.9765 19.374 13.9896 19.0316 14.0154 18.6927L14.0486 18.6994C15.0837 18.9062 16.1223 19.0886 17.1637 19.2467ZM33.3284 11.4538C31.6493 10.2396 29.5855 9.52381 27.3546 9.52381C25.1195 9.52381 23.0524 10.2421 21.3717 11.4603C20.0078 11.3232 18.6475 11.1387 17.2933 10.907C19.7453 8.11308 23.3438 6.34921 27.3546 6.34921C31.36 6.34921 34.9543 8.10844 37.4061 10.896C36.0521 11.1292 34.692 11.3152 33.3284 11.4538ZM43.826 18.0518C43.881 18.6003 43.9091 19.1566 43.9091 19.7194C43.9091 28.8568 36.4973 36.2642 27.3546 36.2642C18.2117 36.2642 10.8 28.8568 10.8 19.7194C10.8 19.1615 10.8276 18.61 10.8816 18.0663L7.75383 17.4411C7.66775 18.1886 7.62354 18.9488 7.62354 19.7194C7.62354 30.6102 16.4574 39.4388 27.3546 39.4388C38.2517 39.4388 47.0855 30.6102 47.0855 19.7194C47.0855 18.9439 47.0407 18.1789 46.9536 17.4267L43.826 18.0518ZM44.2613 9.54743L40.9084 10.2176C37.9134 5.95821 32.9593 3.1746 27.3546 3.1746C21.7442 3.1746 16.7856 5.96385 13.7915 10.2305L10.4399 9.56057C13.892 3.83178 20.1756 0 27.3546 0C34.5281 0 40.8075 3.82591 44.2613 9.54743Z" - fill="var(--surface-0)" + :fill="fillColor" /> - + - + - + @@ -149,6 +149,11 @@ export default { } }; }, + computed: { + fillColor() { + return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)'; + } + }, components: { SakaiSeparator } diff --git a/pages/templates/ultima/index.vue b/pages/templates/ultima/index.vue index 4fe0ba99a..a2bbdfbe8 100644 --- a/pages/templates/ultima/index.vue +++ b/pages/templates/ultima/index.vue @@ -6,23 +6,23 @@ - - - - - + + + + + - + @@ -221,6 +221,11 @@ export default { } }; }, + computed: { + fillColor() { + return this.$appState.darkTheme ? 'var(--p-surface-900)' : 'var(--p-surface-0)'; + } + }, components: { UltimaSeparator } diff --git a/pages/templates/verona/index.vue b/pages/templates/verona/index.vue index dddb12a50..d411112a4 100644 --- a/pages/templates/verona/index.vue +++ b/pages/templates/verona/index.vue @@ -4,31 +4,31 @@