diff --git a/docs/js/instantsearch.js b/docs/js/instantsearch.js
index f54081060b1..3498a893c21 100644
--- a/docs/js/instantsearch.js
+++ b/docs/js/instantsearch.js
@@ -143,16 +143,16 @@
padding: 2,
templates: {
first: `
`,
previous: `
`,
next: `
`,
last: `
`,
},
}),
diff --git a/mkdocs.yml b/mkdocs.yml
index 7e1372683de..1b8db944909 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -996,7 +996,7 @@ theme:
palette:
primary: 'blue grey'
accent: 'deep orange'
- logo: 'images/ibexa-dxp-logo.png'
+ logo: 'images/cohesivo-logo.svg'
extra:
append_bootstrap:
@@ -1049,6 +1049,7 @@ extra:
extra_css:
- fonts/MavenPro.css
+ - css/tokens.css
- css/codehilite.css
- css/switcher.css
- css/custom.css
diff --git a/scss/_variables.scss b/scss/_variables.scss
deleted file mode 100644
index d13111283bb..00000000000
--- a/scss/_variables.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-$transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
-$transition-duration: 0.4s;
-
-$color-primary-main: #A32768;
-
-$color-dark-85-white: #DCDDDE;
-$color-dark-100-white: #FFFFFF;
-
-$color-info-main: #5DA7C0;
-
-$color-success-main: #2C9445;
-
-$color-error-main: #C4234A;
-
-$color-warning-dark-01: #D3822B;
-
-$color-primary: #AE1164;
-
-$color-light: #E0E0E8;
-$color-light-400: #ECECF1;
-
-$color-dark: #131C26;
-$color-dark-400: #71767C;
-
-$color-headless: #C4234A;
-$color-experience: #D3822B;
-$color-commerce: #A32768;
-$color-lts-update: #5DA7C0;
-$color-new-feature: #2C9445;
-$color-first-release: #2C9445;
-
-$color-new-doc: #3562A0;
diff --git a/scss/front-page.scss b/scss/front-page.scss
index aa19cea5d76..cf1f261a7e6 100644
--- a/scss/front-page.scss
+++ b/scss/front-page.scss
@@ -1,27 +1,3 @@
-
-$ibexa-color-primary: #ae1164;
-
-$ibexa-color-danger: #db0032;
-
-$ibexa-color-info-700: #275799;
-$ibexa-color-info-600: #3474cc;
-
-$ibexa-color-dark: #131c26;
-$ibexa-color-dark-400: #71767c;
-
-$ibexa-color-light: #e0e0e8;
-$ibexa-color-light-300: #f3f3f6;
-$ibexa-color-light-400: #ececf1;
-
-$ibexa-color-white: #ffffff;
-
-$ibexa-color-complementary: #47bedb;
-$ibexa-color-complementary-800: #1c4c58;
-$ibexa-color-complementary-700: #2b7283;
-$ibexa-color-complementary-300: #b5e5f0;
-$ibexa-color-complementary-200: #daf2f7;
-$ibexa-color-complementary-100: #ecf8fb;
-
@mixin list() {
margin: 0 0 0 12px;
list-style: none;
@@ -79,13 +55,13 @@ body {
}
.info-tile {
- border: 1px solid $ibexa-color-light-400;
+ border: 1px solid var(--cohesivo-neutral-50);
border-radius: 12px;
padding: 12px;
display: flex;
align-items: center;
flex: 1;
- box-shadow: 4px 22px 47px rgba(52, 116, 204, 0.05);
+ box-shadow: var(--cohesivo-shadow-tile);
height: 100%;
&--link-card {
@@ -98,7 +74,7 @@ body {
h3 {
svg {
- fill: $ibexa-color-primary;
+ fill: var(--cohesivo-primary-80);
width: 16px;
height: 16px;
margin-right: 4px;
@@ -107,7 +83,7 @@ body {
}
a {
- color: $ibexa-color-dark;
+ color: var(--cohesivo-neutral-240);
text-decoration: underline;
}
}
@@ -121,6 +97,22 @@ body {
justify-content: center;
align-items: center;
flex-shrink: 0;
+
+ &--warning {
+ background-color: var(--cohesivo-warning-10);
+ }
+
+ &--primary {
+ background-color: var(--cohesivo-primary-0);
+ }
+
+ &--info {
+ background-color: var(--cohesivo-info-5);
+ }
+
+ &--neutral {
+ background-color: var(--cohesivo-neutral-30);
+ }
}
&__content {
@@ -129,7 +121,7 @@ body {
height: 100%;
font-size: 12px;
line-height: 18px;
- color: $ibexa-color-dark-400;
+ color: var(--cohesivo-neutral-160);
display: flex;
flex-direction: column;
justify-content: center;
@@ -150,7 +142,7 @@ body {
font-size: 22px;
line-height: 26px;
margin-top: 8px;
- color: $ibexa-color-dark;
+ color: var(--cohesivo-neutral-240);
}
}
@@ -159,14 +151,14 @@ body {
justify-content: flex-end;
align-items: center;
font-size: 10px;
- color: $ibexa-color-primary;
+ color: var(--cohesivo-primary-80);
}
&__arrow-icon {
width: 13px;
height: 13px;
margin-left: 4px;
- fill: $ibexa-color-primary;
+ fill: var(--cohesivo-primary-80);
}
h3 {
@@ -188,9 +180,11 @@ body {
}
a.info-tile {
+ text-decoration: none;
+
&:hover {
- border-color: $ibexa-color-primary;
- box-shadow: 0px 22px 24px 0px rgba(174, 17, 100, 0.10);
+ border-color: var(--cohesivo-primary-80);
+ box-shadow: var(--cohesivo-shadow-tile-hover);
text-decoration: none;
}
}
@@ -202,7 +196,7 @@ body {
.notification {
border-radius: 12px;
- color: $ibexa-color-dark;
+ color: var(--cohesivo-neutral-240);
font-size: 12px;
padding: 32px;
position: relative;
@@ -223,11 +217,11 @@ body {
}
a {
- color: $ibexa-color-dark;
+ color: var(--cohesivo-neutral-240);
text-decoration: underline;
&:hover {
- color: $ibexa-color-info-600;
+ color: var(--cohesivo-info-80);
}
}
}
@@ -243,7 +237,7 @@ body {
padding: 15px 16px;
border-radius: 12px;
font-size: 14px;
- color: $ibexa-color-primary;
+ color: var(--cohesivo-primary-80);
& + a {
margin-left: 8px;
@@ -275,15 +269,15 @@ body {
&__cta {
a {
- background: linear-gradient(to right, $ibexa-color-danger 0%, $ibexa-color-primary 100%);
- color: $ibexa-color-white;
+ background: var(--cohesivo-gradient-primary);
+ color: var(--cohesivo-neutral-10);
}
}
}
}
&--lts-update {
- border: 2px solid $ibexa-color-light;
+ border: 2px solid var(--cohesivo-neutral-60);
height: calc(100%);
padding-top: 30px;
@@ -291,7 +285,7 @@ body {
&__cta {
a {
&:first-child {
- border: 1px solid $ibexa-color-primary;
+ border: 1px solid var(--cohesivo-primary-80);
}
}
}
@@ -302,7 +296,7 @@ body {
.accordion {
$self: &;
- border: 1px solid $ibexa-color-light-400;
+ border: 1px solid var(--cohesivo-neutral-50);
border-radius: 12px;
padding: 12px;
@@ -315,7 +309,7 @@ body {
box-shadow: none;
summary {
- border-bottom: 1px solid $ibexa-color-light;
+ border-bottom: 1px solid var(--cohesivo-neutral-60);
padding-bottom: 16px;
margin-bottom: 16px;
@@ -331,11 +325,11 @@ body {
font-size: 14px;
a {
- color: $ibexa-color-dark;
+ color: var(--cohesivo-neutral-240);
text-decoration: underline;
&:hover {
- color: $ibexa-color-info-600;
+ color: var(--cohesivo-info-80);
}
}
diff --git a/scss/pills.scss b/scss/pills.scss
index e94a4c0a1aa..963c4a14ec0 100644
--- a/scss/pills.scss
+++ b/scss/pills.scss
@@ -1,4 +1,3 @@
-@use 'variables';
@use 'sass:list';
.pill {
@@ -8,15 +7,15 @@
padding: 1px 8px;
border: 1px solid;
margin-right: 8px;
- color: variables.$color-primary-main;
+ color: var(--cohesivo-primary-80);
$types: (
- "headless": (variables.$color-headless, "Headless"),
- "experience": (variables.$color-experience, "Experience"),
- "commerce": (variables.$color-commerce, "Commerce"),
- "lts-update": (variables.$color-lts-update, "LTS Update"),
- "new-feature": (variables.$color-new-feature, "New feature"),
- "first-release": (variables.$color-first-release, "First release")
+ "headless": (var(--cohesivo-error-80), "Headless"),
+ "experience": (var(--cohesivo-warning-110), "Experience"),
+ "commerce": (var(--cohesivo-primary-80), "Commerce"),
+ "lts-update": (var(--cohesivo-info-80), "LTS Update"),
+ "new-feature": (var(--cohesivo-success-100), "New feature"),
+ "first-release": (var(--cohesivo-success-100), "First release")
);
@each $name, $values in $types {
@@ -42,7 +41,7 @@
&--new {
margin-right: 15px;
align-self: center;
- color: variables.$color-new-doc;
+ color: var(--cohesivo-info-80);
text-transform: lowercase;
}
}
diff --git a/scss/release-notes.scss b/scss/release-notes.scss
index c9dd31091a1..38ace2cad18 100644
--- a/scss/release-notes.scss
+++ b/scss/release-notes.scss
@@ -1,10 +1,8 @@
-@use 'variables';
-
.release-notes-header {
display: flex;
justify-content: space-between;
align-items: center;
- border-bottom: 1px solid variables.$color-dark-85-white;
+ border-bottom: 1px solid var(--cohesivo-neutral-60);
padding: 8px 0;
h1 {
@@ -38,7 +36,7 @@
&__visible-item {
padding: 4px 24px 4px 8px;
margin-left: 8px;
- background-color: variables.$color-light-400;
+ background-color: var(--cohesivo-neutral-50);
border-radius: 16px;
font-size: 12px;
position: relative;
@@ -63,7 +61,7 @@
content: '';
width: 1px;
height: 12px;
- background: variables.$color-dark;
+ background: var(--cohesivo-neutral-240);
position: absolute;
top: 50%;
left: 50%;
@@ -84,10 +82,10 @@
&--expanded {
.release-notes-filters {
&__btn {
- color: variables.$color-primary-main;
+ color: var(--cohesivo-primary-80);
svg {
- fill: variables.$color-primary-main;
+ fill: var(--cohesivo-primary-80);
}
}
@@ -105,10 +103,10 @@
height: 24px;
&:hover {
- color: variables.$color-primary-main;
+ color: var(--cohesivo-primary-80);
svg {
- fill: variables.$color-primary-main;
+ fill: var(--cohesivo-primary-80);
}
}
}
@@ -126,7 +124,7 @@
top: 0;
display: none;
content: '';
- background-color: variables.$color-error-main;
+ background-color: var(--cohesivo-error-80);
width: 6px;
height: 6px;
border-radius: 50%;
@@ -146,8 +144,8 @@
left: 50%;
padding: 8px;
transform: translate(-50%, 100%);
- border: 1px solid variables.$color-dark-85-white;
- background-color: variables.$color-dark-100-white;
+ border: 1px solid var(--cohesivo-neutral-60);
+ background-color: var(--cohesivo-neutral-10);
border-radius: 8px;
display: none;
}
@@ -166,13 +164,13 @@
appearance: none;
position: relative;
cursor: pointer;
- background-color: variables.$color-dark-100-white;
+ background-color: var(--cohesivo-neutral-10);
width: 16px;
height: 16px;
border-radius: 2px;
outline: none;
- transition: all variables.$transition-duration variables.$transition-timing-function;
- border: 1px solid variables.$color-dark-400;
+ transition: all var(--cohesivo-transition-duration) var(--cohesivo-transition-timing-function);
+ border: 1px solid var(--cohesivo-neutral-160);
margin: 0 8px -2.5px 0;
&::after {
@@ -189,20 +187,20 @@
}
&:hover {
- border-color: variables.$color-primary;
+ border-color: var(--cohesivo-primary-80);
}
&:focus {
- border-color: variables.$color-primary;
- box-shadow: 0 0 0 4px rgba(variables.$color-primary, 0.25);
+ border-color: var(--cohesivo-primary-80);
+ box-shadow: var(--cohesivo-shadow-focus);
}
&:checked {
- border-color: variables.$color-primary;
- background-color: variables.$color-primary;
+ border-color: var(--cohesivo-primary-80);
+ background-color: var(--cohesivo-primary-80);
&::after {
- border-color: variables.$color-dark-100-white;
+ border-color: var(--cohesivo-neutral-10);
}
}
}
@@ -222,7 +220,7 @@
}
&__date {
- color: variables.$color-dark-400;
+ color: var(--cohesivo-neutral-160);
margin-bottom: 24px;
}
@@ -248,7 +246,7 @@
top: 11px;
width: 9px;
height: 9px;
- border: 1px solid variables.$color-primary-main;
+ border: 1px solid var(--cohesivo-primary-80);
border-radius: 50%;
}
@@ -261,7 +259,7 @@
left: 4px;
width: 1px;
height: calc(100% - 8px);
- background-color: variables.$color-light;
+ background-color: var(--cohesivo-neutral-60);
}
&:last-of-type {
diff --git a/tools/api_refs/.phpdoc/template/components/header-title.html.twig b/tools/api_refs/.phpdoc/template/components/header-title.html.twig
index 9f9c3e68232..55f846545ed 100644
--- a/tools/api_refs/.phpdoc/template/components/header-title.html.twig
+++ b/tools/api_refs/.phpdoc/template/components/header-title.html.twig
@@ -1,4 +1,4 @@
-{% set logo_path = './images/ibexa-dxp-logo.png' %}
+{% set logo_path = './images/cohesivo-logo.svg' %}
label {
- border-left: 2px solid #AE1164;
+ border-left: 2px solid var(--cohesivo-primary-80);
}
.md-nav--secondary .md-nav__title {
@@ -180,7 +181,7 @@ body.menu-resizing {
}
.md-nav--primary .md-nav__item--active > label:not(.level-0):hover a {
- color: #ffffff !important;
+ color: var(--white) !important;
}
.md-nav--primary .md-nav__item--nested.md-nav__item--active > .level-1:hover {
@@ -206,7 +207,7 @@ ul.breadcrumbs li.breadcrumb-item a {
}
ul.breadcrumbs li.breadcrumb-item-current span {
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
}
@@ -257,8 +258,8 @@ ul.breadcrumbs li.breadcrumb-item-current span {
.md-typeset .content-header__copy-fqcn {
font-size: 14px;
line-height: 18px;
- color: #131C26;
- border: 1px solid #131C26;
+ color: var(--cohesivo-neutral-240);
+ border: 1px solid var(--cohesivo-neutral-240);
border-radius: 8px;
padding: 4px 16px;
margin-right: auto;
@@ -268,8 +269,8 @@ ul.breadcrumbs li.breadcrumb-item-current span {
}
.md-typeset .content-header__copy-fqcn:hover {
- color: var(--ibexa-jazzberry);
- border-color: var(--ibexa-jazzberry);
+ color: var(--cohesivo-primary-80);
+ border-color: var(--cohesivo-primary-80);
}
.md-typeset .content-header__found-in {
@@ -279,7 +280,7 @@ ul.breadcrumbs li.breadcrumb-item-current span {
}
.md-typeset .content-header__found-in:hover {
- color: var(--ibexa-jazzberry);
+ color: var(--cohesivo-primary-80);
}
.md-typeset .content-header__found-in img {
@@ -287,7 +288,7 @@ ul.breadcrumbs li.breadcrumb-item-current span {
}
.md-typeset .content-header__found-in:hover img {
- filter: invert(0.4) sepia(1) saturate(20) hue-rotate(299deg) brightness(0.67);
+ filter: invert(0.20) sepia(1) saturate(30) hue-rotate(254deg) brightness(0.65);
}
.md-typeset abbr {
@@ -431,7 +432,7 @@ ul.breadcrumbs li.breadcrumb-item-current span {
.md-search__form .phpdocumentor-search-results .phpdocumentor-search-results__entry small {
grid-area: namespace;
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
font-weight: 700;
font-size: 14px;
padding: 4px 0 4px 12px;
@@ -448,8 +449,8 @@ ul.breadcrumbs li.breadcrumb-item-current span {
.md-search__form .phpdocumentor-search-results .phpdocumentor-search-results__entry:hover small,
.md-search__form .phpdocumentor-search-results .phpdocumentor-search-results__entry:hover .phpdocumentor-summary {
- background-color: rgba(69, 142, 225, .05);
- cursor: pointer;
+ background-color: var(--cohesivo-primary-tint-5);
+ cursor: pointer;
}
@@ -505,7 +506,7 @@ ul.breadcrumbs li.breadcrumb-item-current span {
.md-typeset ul.namespace-list li a {
text-decoration: underline;
white-space: nowrap;
- color: #3474cc;
+ color: var(--link);
}
.md-typeset ul.namespace-list li p {
@@ -538,7 +539,7 @@ ul.breadcrumbs li.breadcrumb-item-current span {
opacity: 0;
position: absolute;
z-index: 1;
- color: #FFFFFF;
+ color: var(--white);
background-color: #2B333C;
border-radius: 4px;
padding: 4px 12px;
diff --git a/tools/api_refs/.phpdoc/template/css/codehilite.css.twig b/tools/api_refs/.phpdoc/template/css/codehilite.css.twig
index df7773d93cd..039d1de687b 100644
--- a/tools/api_refs/.phpdoc/template/css/codehilite.css.twig
+++ b/tools/api_refs/.phpdoc/template/css/codehilite.css.twig
@@ -19,7 +19,7 @@
.highlight .p,
.highlight .cp
{
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
}
/* HTML tags and YAML keys */
@@ -34,7 +34,7 @@
.highlight .nf,
.highlight .fm,
.highlight .nn {
- color: var(--ibexa-jazzberry);
+ color: var(--cohesivo-primary-80);
}
/* Variable names */
@@ -42,12 +42,12 @@
.highlight .vc,
.highlight .vg,
.highlight .vi {
- color: #41000F;
+ color: #3E4145;
}
/* Attributes */
.highlight .na {
- color: var(--ibexa-jazzberry);
+ color: var(--cohesivo-primary-80);
}
/* Strings */
diff --git a/tools/api_refs/.phpdoc/template/css/custom.css.twig b/tools/api_refs/.phpdoc/template/css/custom.css.twig
index 2d847df510c..86d0e83e0d0 100644
--- a/tools/api_refs/.phpdoc/template/css/custom.css.twig
+++ b/tools/api_refs/.phpdoc/template/css/custom.css.twig
@@ -1,37 +1,6 @@
:root > * {
- --ibexa-orange: rgb(255,71,19);
- --ibexa-red: rgb(219,0,50);
- --ibexa-jazzberry: rgb(174,17,100);
- --ibexa-dusk-black: rgb(19,28,38);
- --ibexa-snow: rgb(224,224,232);
- --black: rgb(0,0,0);
- --white: rgb(255,255,255);
- --warm-stone: rgb(236,223,209);
- --turquoise-pearl: rgb(71,190,219);
- --yellow-orange: rgb(252,174,66);
- --apricot: rgb(241,138,107);
- --sherpa-blue: rgb(0,77,93);
-
- --mid-grey: rgb(201,201,208);
- --dark-grey: rgb(151,151,151);
-
- --color-warning-dark-01: rgb(211,130,43);
- --color-primary-main: rgb(163,39,104);
- --caution-border: var(--ibexa-orange);
- --note-border: var(--mid-grey);
- --enterprise-border: var(--ibexa-jazzberry);
-
- --codeblock: rgb(89,96,103);
- --inline-code: rgb(242,242,245);
- --table-header: var(--codeblock);
- --code-highlight: #D9E9FF;
-
- --link: rgb(0,71,206);
-
- /* Override Material colors */
- --md-accent-fg-color: var(--ibexa-jazzberry);
-
-
+ --admonition-radius: 10px;
+
--md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,');
--md-admonition-icon--caution: url('data:image/svg+xml;charset=utf-8,');
@@ -95,7 +64,7 @@
body, input {
font-family: "Noto Sans", sans-serif;
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
}
body {
@@ -126,22 +95,30 @@ body {
}
[data-md-color-primary=blue-grey] .md-header {
- background-color: var(--ibexa-dusk-black);
- color: #fff;
+ background-color: var(--cohesivo-neutral-240);
+ color: var(--white);
height: 56px;
}
.md-typeset a {
color: var(--link);
+ text-decoration: underline;
}
.md-typeset a:hover,
.md-typeset a:focus {
- color: var(--ibexa-jazzberry);
+ color: var(--cohesivo-primary-80);
+}
+
+.md-typeset .headerlink,
+.md-typeset a.md-icon,
+.md-typeset .tabbed-labels a,
+.md-typeset .md-clipboard {
+ text-decoration: none;
}
.md-typeset th a {
- color: #fff;
+ color: var(--white);
}
.md-typeset .md-icon {
@@ -151,7 +128,7 @@ body {
/* Headings */
.md-typeset h1, .md-typeset h2, .md-typeset h3, .md-typeset h4, .md-typeset h5, .md-typeset h6 {
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
line-height: 1;
}
@@ -186,7 +163,7 @@ body {
}
ul li::marker {
- color: var(--ibexa-jazzberry);
+ color: var(--cohesivo-primary-80);
}
ul li li {
@@ -194,7 +171,7 @@ ul li li {
}
ul li li::marker {
- color: black;
+ color: var(--black);
}
ul li li li {
@@ -220,59 +197,116 @@ ul li li li {
padding: .5rem;
}
-/* Admonitions */
+.md-typeset :is(.admonition-title,summary) {
+ background-color: var(--white);
+ box-shadow: none;
+ font-size: 16px;
+}
-.md-typeset :is(.admonition,details):is(.tip,.note,.caution),
-.md-typeset :is(.admonition-title,summary),
-.md-typeset :is(.tip,.note)>:is(.admonition-title,summary) {
- background-color: #ffffff;
+.md-typeset :is(.admonition,details):is(.tip,.note,.caution,.warning) {
box-shadow: none;
font-size: 16px;
+ border-width: 0 0 0 4px;
+ border-left-style: solid;
+ border-radius: 0 var(--admonition-radius) var(--admonition-radius) 0;
+ padding: 4px 12px;
+}
+
+.md-typeset :is(.admonition,details):is(.tip,.note,.caution,.warning) > :is(.admonition-title,summary) {
+ background-color: transparent;
+ border: 0;
+ font-size: 16px;
+ font-weight: 600;
+ margin: 8px 0;
+ padding: 0 0 0 28px;
+ position: relative;
+ min-height: 20px;
+ display: flex;
+ align-items: center;
+}
+
+.md-typeset :is(.admonition,details):is(.tip,.note,.caution,.warning) > :is(.admonition-title,summary)::before {
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 20px;
+ height: 20px;
+ margin: 0;
+}
+
+.md-typeset :is(.admonition,details):is(.tip,.note,.caution,.warning) > :not(.admonition-title):not(summary) {
+ color: var(--cohesivo-neutral-240);
}
-.md-typeset :is(.admonition,details):is(.tip,.note)
-{
- border: 0.1rem solid var(--note-border);
- border-radius: 0.1rem;
+.md-typeset details:is(.tip,.note,.caution,.warning) > summary {
+ padding-right: 32px;
+ cursor: pointer;
+ list-style: none;
}
-.md-typeset :is(.admonition,details):is(.caution)
-{
- border: 0.1rem solid var(--caution-border);
- border-radius: 0.1rem;
+.md-typeset details:is(.tip,.note,.caution,.warning) > summary::-webkit-details-marker {
+ display: none;
}
-.md-typeset .admonition.caution>.admonition-title {
- border-color: var(--caution-border);
+.md-typeset details:is(.tip,.note,.caution,.warning) > summary::after {
+ top: 50%;
+ right: 8px;
+ width: 20px;
+ height: 20px;
+ margin: 0;
+ transform: translateY(-50%);
+ transition: transform 0.2s;
}
-.md-typeset .admonition:is(.note,.tip)>:is(.admonition-title) {
- border-color: var(--note-border);
+.md-typeset details[open]:is(.tip,.note,.caution,.warning) > summary::after {
+ transform: translateY(-50%) rotate(90deg);
}
-.md-typeset :is(.admonition,details[open]):is(.note,.tip,.caution) :is(.admonition-title,summary) {
- border-bottom: 1px solid var(--note-border);
+/* note / tip — the app's .ibexa-alert--info */
+.md-typeset :is(.admonition,details):is(.tip,.note) {
+ background-color: var(--admonition-info-bg);
+ border-left-color: var(--admonition-info-bar);
}
-/* Admonition icons */
+.md-typeset :is(.admonition,details):is(.tip,.note) > :is(.admonition-title,summary) {
+ color: var(--admonition-info-title);
+}
-.md-typeset .note > .admonition-title::before,
-.md-typeset .tip > .admonition-title::before,
-.md-typeset .note > summary::before,
-.md-typeset .tip > summary::before {
- background-color: var(--note-border);
+.md-typeset :is(.admonition,details):is(.tip,.note) > :is(.admonition-title,summary)::before {
+ background-color: var(--admonition-info-title);
}
-.md-typeset :is(.admonition,details).caution>:is(.admonition-title,summary):before {
- background-color: var(--caution-border);
+/* Material sets `color` on the marker per admonition type; its background is
+ currentcolor, so re-pointing colour alone recolours the whole chevron. */
+.md-typeset details:is(.tip,.note) > summary::after {
+ color: var(--admonition-info-title);
+}
+
+/* caution / warning — the app's .ibexa-alert--warning */
+.md-typeset :is(.admonition,details):is(.caution,.warning) {
+ background-color: var(--admonition-warning-bg);
+ border-left-color: var(--admonition-warning-bar);
+}
+
+.md-typeset :is(.admonition,details):is(.caution,.warning) > :is(.admonition-title,summary) {
+ color: var(--admonition-warning-title);
+}
+
+.md-typeset :is(.admonition,details):is(.caution,.warning) > :is(.admonition-title,summary)::before {
+ background-color: var(--admonition-warning-title);
-webkit-mask-image: var(--md-admonition-icon--caution);
mask-image: var(--md-admonition-icon--caution);
}
+.md-typeset details:is(.caution,.warning) > summary::after {
+ color: var(--admonition-warning-title);
+}
+
/* Tile admonition */
.md-typeset :is(.admonition):is(.tile) {
- background-color: #ffffff;
+ background-color: var(--white);
border: 1px solid #D4D4D4;
border-radius: 5px;
padding: 0.7rem;
@@ -298,11 +332,11 @@ ul li li li {
/* Code highlighting */
.md-typeset code, .md-typeset pre {
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
}
.md-typeset .highlighttable code, .md-typeset .highlighttable pre {
- background-color: #fff;
+ background-color: var(--white);
padding: 0;
}
@@ -321,7 +355,7 @@ ul li li li {
}
.md-typeset .highlighttable pre code::-webkit-scrollbar-track {
- background-color: var(--ibexa-snow);
+ background-color: var(--cohesivo-neutral-60);
}
.md-typeset .highlighttable pre code::-webkit-scrollbar-thumb {
@@ -342,7 +376,7 @@ ul li li li {
}
.md-typeset .highlighttable .linenodiv pre {
- color: var(--ibexa-snow);
+ color: var(--cohesivo-neutral-60);
background-color: var(--codeblock);
}
@@ -365,7 +399,7 @@ ul li li li {
/* Code block titles */
.highlighttable span.filename {
- background-color: var(--ibexa-snow);
+ background-color: var(--cohesivo-neutral-60);
}
/* Tables */
@@ -376,7 +410,7 @@ ul li li li {
}
.md-typeset table:not([class]) th {
- color: var(--ibexa-snow);
+ color: var(--cohesivo-neutral-60);
background-color: var(--table-header);
}
@@ -404,7 +438,7 @@ a.external:not(.card) {
}
[data-md-color-primary=blue-grey] .md-nav__link--active {
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
font-weight: 700;
}
@@ -427,7 +461,7 @@ a.external:not(.card) {
display: block;
max-width: 100%;
max-height: 90%;
- background-color: #fff;
+ background-color: var(--white);
}
#modalCaption {
@@ -435,7 +469,7 @@ a.external:not(.card) {
display: block;
text-align: center;
font-size: 16px;
- color: #fff;
+ color: var(--white);
}
.md-content img {
@@ -485,7 +519,10 @@ a.external:not(.card) {
.md-typeset .tabbed-set .tabbed-content {
order: 99;
- border: 1px solid var(--ibexa-snow);
+ /* The panel is an opaque white card so the set reads the same on a plain page
+ and on a tinted admonition fill. */
+ background: var(--white);
+ border: 1px solid var(--cohesivo-neutral-60);
padding: 4px 4px 4px 1rem;
border-radius: 0 .2rem .2rem .2rem;
}
@@ -493,9 +530,12 @@ a.external:not(.card) {
.md-typeset .tabbed-set label {
font-size: .64rem;
font-weight: 700;
+ /* Unselected tabs sit recessed behind the panel. */
+ background: var(--cohesivo-neutral-30);
+ color: var(--cohesivo-neutral-200);
padding: 0.9375em 1.25em 0.78125em;
- border: 1px solid var(--ibexa-snow);
- border-bottom: 2px solid var(--ibexa-snow);
+ border: 1px solid var(--cohesivo-neutral-60);
+ border-bottom: 2px solid var(--cohesivo-neutral-60);
border-radius: 4px 4px 0 0;
}
@@ -504,8 +544,8 @@ a.external:not(.card) {
}
.md-typeset .tabbed-labels>label:hover {
- color: var(--ibexa-dusk-black);
- border-bottom: 2px solid var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
+ border-bottom: 2px solid var(--cohesivo-neutral-240);
}
div.pills {
@@ -525,8 +565,8 @@ div.pills {
}
.experience-pill {
- color: var(--color-warning-dark-01);
- border: 1px solid var(--color-warning-dark-01);
+ color: var(--cohesivo-warning-110);
+ border: 1px solid var(--cohesivo-warning-110);
}
.commerce-pill::after {
@@ -534,8 +574,8 @@ div.pills {
}
.commerce-pill {
- color: var(--color-primary-main);
- border: 1px solid var(--color-primary-main);
+ color: var(--cohesivo-primary-80);
+ border: 1px solid var(--cohesivo-primary-80);
}
.optional-pill::after {
@@ -543,16 +583,16 @@ div.pills {
}
.optional-pill {
- color: var(--sherpa-blue);
- border: 1px solid var(--sherpa-blue);
+ color: var(--cohesivo-info-100);
+ border: 1px solid var(--cohesivo-info-100);
}
.md-clipboard:focus, .md-clipboard:hover {
- color: var(--ibexa-jazzberry);
+ color: var(--cohesivo-primary-80);
}
.md-typeset .headerlink:focus, .md-typeset .headerlink:hover, .md-typeset :target>.headerlink {
- color: var(--ibexa-jazzberry);
+ color: var(--cohesivo-primary-80);
}
/** Cards */
@@ -582,10 +622,10 @@ div.path {
.cards div.card-wrapper div div{
border-radius: 5px;
- background-color: #FFFFFF;
+ background-color: var(--white);
padding: 0.7rem;
margin-bottom: 0.4rem;
- border: 1px solid #E0E0E8;
+ border: 1px solid var(--cohesivo-neutral-60);
min-width: 230px;
height: 240px;
box-sizing: border-box;
@@ -597,7 +637,7 @@ div.path {
.path div.card-wrapper div div {
border: 1px solid #D4D4D4;
border-radius: 5px;
- background-color: #FFFFFF;
+ background-color: var(--white);
padding: 0.7rem;
margin-bottom: 0.4rem;
overflow: auto;
@@ -605,7 +645,7 @@ div.path {
.cards div.card-wrapper div div:hover,
.path div.card-wrapper div div:hover {
- border-color: var(--ibexa-dusk-black);
+ border-color: var(--cohesivo-neutral-240);
}
.cards div.card-wrapper div div {
max-width: 10rem;
@@ -631,5 +671,5 @@ div.path {
.cards p.description,
.path p.description {
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
}
diff --git a/tools/api_refs/.phpdoc/template/css/docs.switcher.css.twig b/tools/api_refs/.phpdoc/template/css/docs.switcher.css.twig
index b2e9b63fab7..47cb3ee8991 100644
--- a/tools/api_refs/.phpdoc/template/css/docs.switcher.css.twig
+++ b/tools/api_refs/.phpdoc/template/css/docs.switcher.css.twig
@@ -22,7 +22,7 @@
.switcher__list dd {
margin: 0;
line-height: 1;
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
}
.switcher__list dd:focus,
@@ -62,7 +62,7 @@
height: 0;
border-style: solid;
border-width: 8px 6px 0 6px;
- border-color: #fff transparent transparent transparent;
+ border-color: var(--white) transparent transparent transparent;
transition: transform .4s,-webkit-transform .4s;
}
@@ -76,7 +76,7 @@
pointer-events: initial;
transform: none;
padding-right: .3rem;
- color: #fff;
+ color: var(--white);
width: 100%;
}
@@ -85,7 +85,7 @@
margin: 0;
opacity: 0;
list-style: none;
- background: #fff;
+ background: var(--white);
overflow: hidden;
border-radius: 2px;
max-height: 0;
@@ -109,11 +109,11 @@
width: auto;
text-align: left;
line-height: 1rem;
- background-color: var(--ibexa-dusk-black);
+ background-color: var(--cohesivo-neutral-240);
}
.md-header__switcher .rst-versions .rst-current-version {
- color: #fff;
+ color: var(--white);
background-color: transparent;
text-align: right;
font-size: 100%;
diff --git a/tools/api_refs/.phpdoc/template/css/navigation.css.twig b/tools/api_refs/.phpdoc/template/css/navigation.css.twig
index 0cf8687f424..c413b6f766f 100644
--- a/tools/api_refs/.phpdoc/template/css/navigation.css.twig
+++ b/tools/api_refs/.phpdoc/template/css/navigation.css.twig
@@ -103,7 +103,7 @@
font-weight: 700;
text-overflow: ellipsis;
overflow: hidden;
- color: var(--ibexa-jazzberry);
+ color: var(--cohesivo-primary-80);
}
/* Page TOC */
@@ -137,7 +137,7 @@
.md-nav--secondary li.level-1 a:focus {
font-size: 16px;
font-weight: 600;
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
}
.md-nav--secondary li.level-2 {
@@ -165,7 +165,7 @@
}
.md-nav--secondary .md-nav__link--active {
- border-left: 2px solid var(--ibexa-jazzberry);
+ border-left: 2px solid var(--cohesivo-primary-80);
padding-left: 0.4rem;
margin-left: -0.55rem;
}
@@ -272,7 +272,7 @@
}
.md-nav--primary .level-4.md-nav__link--active {
- border-left: 2px solid var(--ibexa-jazzberry);
+ border-left: 2px solid var(--cohesivo-primary-80);
}
.md-nav[data-md-level="3"] ul li {
@@ -289,7 +289,7 @@
.md-nav--primary li label:focus,
.md-nav--primary .level-4:hover,
.md-nav--primary .level-4:focus {
- color: var(--ibexa-jazzberry) !important;
+ color: var(--cohesivo-primary-80) !important;
}
.md-nav--primary>.md-nav__list>li:first-child {
@@ -320,7 +320,8 @@
}
.md-header__button.md-logo img {
- width: inherit;
+ height: 32px;
+ width: auto;
}
.md-header__source {
@@ -339,7 +340,7 @@
font-weight: 600;
padding: 1rem 0.8rem;
border-bottom: 1px solid var(--mid-grey);
- background: white;
+ background: var(--white);
}
.push {
@@ -367,7 +368,7 @@
border: 1px solid var(--dark-grey);
border-radius: 12px;
font-size: 12px;
- background-color: var(--ibexa-dusk-black);
+ background-color: var(--cohesivo-neutral-240);
letter-spacing: 0.12px;
margin-top: 3px;
}
@@ -448,7 +449,7 @@ ul.breadcrumbs li.breadcrumb-item {
}
ul.breadcrumbs li.breadcrumb-item-current {
- color: var(--ibexa-dusk-black);
+ color: var(--cohesivo-neutral-240);
font-weight: 600;
}
diff --git a/tools/api_refs/.phpdoc/template/css/tokens.css.twig b/tools/api_refs/.phpdoc/template/css/tokens.css.twig
new file mode 100644
index 00000000000..75a8c123e48
--- /dev/null
+++ b/tools/api_refs/.phpdoc/template/css/tokens.css.twig
@@ -0,0 +1,85 @@
+:root > * {
+ /* Primary — violet */
+ --cohesivo-primary-100: #391b79;
+ --cohesivo-primary-80: #4e24a5;
+ --cohesivo-primary-60: #612dcd;
+ --cohesivo-primary-40: #7f53da;
+ --cohesivo-primary-5: #cfbef1;
+ --cohesivo-primary-0: #e7def8;
+
+ /* Primary alt — lighter violet, used for gradients and shadow tints */
+ --cohesivo-primary-alt-80: #7742d5;
+ --cohesivo-primary-alt-40: #b497e8;
+
+ /* Neutral */
+ --cohesivo-neutral-240: #0e1216;
+ --cohesivo-neutral-200: #3e4145;
+ --cohesivo-neutral-160: #6e7173;
+ --cohesivo-neutral-60: #e7e7e8;
+ --cohesivo-neutral-50: #ececec;
+ --cohesivo-neutral-30: #f5f6f6;
+ --cohesivo-neutral-10: #ffffff;
+
+ /* Semantic */
+ --cohesivo-info-100: #003f63;
+ --cohesivo-info-80: #19628f;
+ --cohesivo-info-5: #edf2f7;
+
+ --cohesivo-success-100: #146d00;
+ --cohesivo-success-80: #378f19;
+
+ --cohesivo-error-80: #ba2124;
+
+ --cohesivo-warning-120: #8c3f00;
+ --cohesivo-warning-110: #a85000;
+ --cohesivo-warning-80: #dc8004;
+ --cohesivo-warning-10: #fcefde;
+
+ --cohesivo-alert-info-bg: #f1ecfb;
+
+ /* Gradient — $gradient-primary-1 in the design system */
+ --cohesivo-gradient-primary: linear-gradient(90deg, var(--cohesivo-primary-80) 40%, var(--cohesivo-primary-alt-40) 100%);
+
+ /* Shadows are tinted with primary-alt (#7742d5) */
+ --cohesivo-shadow-tile: 4px 22px 47px rgba(119, 66, 213, 0.05);
+ --cohesivo-shadow-tile-hover: 0 22px 24px 0 rgba(119, 66, 213, 0.15);
+
+ /* Focus ring, tinted with primary (#4e24a5) */
+ --cohesivo-shadow-focus: 0 0 0 4px rgba(78, 36, 165, 0.25);
+
+ /* Flat tint of primary (#4e24a5), for hovered rows */
+ --cohesivo-primary-tint-5: rgba(78, 36, 165, 0.05);
+
+ /* Transitions */
+ --cohesivo-transition-duration: 0.4s;
+ --cohesivo-transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
+
+ /* Legacy neutrals, kept for the rules that are not part of the palette */
+ --black: #000000;
+ --white: var(--cohesivo-neutral-10);
+ --mid-grey: rgb(201, 201, 208);
+ --dark-grey: rgb(151, 151, 151);
+ --codeblock: rgb(89, 96, 103);
+ --inline-code: rgb(242, 242, 245);
+ --code-highlight: #d9e9ff;
+
+ /* Semantic aliases */
+ /* Links follow the app: dark ink, violet on hover. */
+ --link: var(--cohesivo-neutral-240);
+ --caution-border: var(--cohesivo-warning-80);
+ --note-border: var(--mid-grey);
+ --enterprise-border: var(--cohesivo-primary-80);
+ --table-header: var(--codeblock);
+
+ /* Admonitions — the product's .ibexa-alert silhouette with the fill taken
+ from the lightest step of the same ramp. */
+ --admonition-info-bg: var(--cohesivo-alert-info-bg);
+ --admonition-info-bar: var(--cohesivo-primary-80);
+ --admonition-info-title: var(--cohesivo-primary-100);
+ --admonition-warning-bg: var(--cohesivo-warning-10);
+ --admonition-warning-bar: var(--cohesivo-warning-80);
+ --admonition-warning-title: var(--cohesivo-warning-120);
+
+ /* Override Material colors */
+ --md-accent-fg-color: var(--cohesivo-primary-80);
+}
diff --git a/tools/api_refs/.phpdoc/template/images/arrow-right.svg b/tools/api_refs/.phpdoc/template/images/arrow-right.svg
index 1fb4a0c67d5..9de188d1ef3 100644
--- a/tools/api_refs/.phpdoc/template/images/arrow-right.svg
+++ b/tools/api_refs/.phpdoc/template/images/arrow-right.svg
@@ -1,5 +1,5 @@
diff --git a/tools/api_refs/.phpdoc/template/images/caret-down.svg b/tools/api_refs/.phpdoc/template/images/caret-down.svg
index 2c4fb7e67e8..16f1a03d7cc 100644
--- a/tools/api_refs/.phpdoc/template/images/caret-down.svg
+++ b/tools/api_refs/.phpdoc/template/images/caret-down.svg
@@ -1,5 +1,5 @@
diff --git a/tools/api_refs/.phpdoc/template/images/caret.svg b/tools/api_refs/.phpdoc/template/images/caret.svg
index 30fc40d1cd5..6bd53629070 100644
--- a/tools/api_refs/.phpdoc/template/images/caret.svg
+++ b/tools/api_refs/.phpdoc/template/images/caret.svg
@@ -1,4 +1,4 @@
diff --git a/tools/api_refs/.phpdoc/template/images/check.svg b/tools/api_refs/.phpdoc/template/images/check.svg
index 5c7c8c444c1..e06376f6512 100644
--- a/tools/api_refs/.phpdoc/template/images/check.svg
+++ b/tools/api_refs/.phpdoc/template/images/check.svg
@@ -1 +1 @@
-
+
diff --git a/tools/api_refs/.phpdoc/template/images/cohesivo-logo.svg b/tools/api_refs/.phpdoc/template/images/cohesivo-logo.svg
new file mode 100644
index 00000000000..b7ecab22057
--- /dev/null
+++ b/tools/api_refs/.phpdoc/template/images/cohesivo-logo.svg
@@ -0,0 +1,45 @@
+
diff --git a/tools/api_refs/.phpdoc/template/images/favicon.png b/tools/api_refs/.phpdoc/template/images/favicon.png
index 8a6e7f53846..6074c94f1c3 100644
Binary files a/tools/api_refs/.phpdoc/template/images/favicon.png and b/tools/api_refs/.phpdoc/template/images/favicon.png differ
diff --git a/tools/api_refs/.phpdoc/template/images/ibexa-dxp-logo.png b/tools/api_refs/.phpdoc/template/images/ibexa-dxp-logo.png
deleted file mode 100644
index 81f08b8b458..00000000000
Binary files a/tools/api_refs/.phpdoc/template/images/ibexa-dxp-logo.png and /dev/null differ
diff --git a/tools/api_refs/.phpdoc/template/images/minus.svg b/tools/api_refs/.phpdoc/template/images/minus.svg
index 566636ab329..89c2ee5f9d6 100644
--- a/tools/api_refs/.phpdoc/template/images/minus.svg
+++ b/tools/api_refs/.phpdoc/template/images/minus.svg
@@ -1,4 +1,4 @@
diff --git a/tools/api_refs/.phpdoc/template/images/plus.svg b/tools/api_refs/.phpdoc/template/images/plus.svg
index 8bd777ee2d3..11641c5299b 100644
--- a/tools/api_refs/.phpdoc/template/images/plus.svg
+++ b/tools/api_refs/.phpdoc/template/images/plus.svg
@@ -1,4 +1,4 @@
diff --git a/tools/api_refs/.phpdoc/template/images/private.svg b/tools/api_refs/.phpdoc/template/images/private.svg
index 99bb1f96e25..4a1966c0617 100644
--- a/tools/api_refs/.phpdoc/template/images/private.svg
+++ b/tools/api_refs/.phpdoc/template/images/private.svg
@@ -1,4 +1,4 @@
diff --git a/tools/api_refs/.phpdoc/template/images/protected.svg b/tools/api_refs/.phpdoc/template/images/protected.svg
index 77cf345af45..dc7d555d2d9 100644
--- a/tools/api_refs/.phpdoc/template/images/protected.svg
+++ b/tools/api_refs/.phpdoc/template/images/protected.svg
@@ -1,4 +1,4 @@
diff --git a/tools/api_refs/.phpdoc/template/images/public.svg b/tools/api_refs/.phpdoc/template/images/public.svg
index 02c59ab90a4..3932ef9c187 100644
--- a/tools/api_refs/.phpdoc/template/images/public.svg
+++ b/tools/api_refs/.phpdoc/template/images/public.svg
@@ -1,11 +1,11 @@