@sap/cds-dk 10.1.1 → 10.2.0

package/node_modules/@sap/cds/app/index.css

@@ -1,132 +1,643 @@
+/* ── Color tokens ── */
+:root {
+  --bg:              #fff;
+  --text:            #46586b;
+  --accent:          #355873;
+  --accent-dark:     #29465d;
+  --border:          #9eafbe;
+  --surface:         #d9e3ec;
+  --surface-hover:   #c8d6e2;
+  --surface-alt:     #b8c9d7;
+  --header-bg:       #4b647c;
+  --header-text:     #2e4c66;
+  --item-border:     #c5d3de;
+  --entity-color:    #355873;
+  --focus-ring:      #355873;
+  --focus-ring-dark: #fff;     /* on dark header backgrounds */
+  --footer-border:   #bbb;
+  --footer-text:     #789;
+  --badge-bg:        rgba(255,255,255,0.22);
+  --badge-bg-hover:  rgba(255,255,255,0.38);
+  --badge-border:    rgba(255,255,255,0.35);
+  --badge-color:     #fff;
+  --row-hover:       #ffaa00;
+  --row-hover-text:  #000;
+  --apps-bg:         #d0ead0;
+  --agents-bg:       #e8d8f5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg:              #101820;
+    --text:            #c5d0d9;
+    --accent:          #a8c1d2;
+    --accent-dark:     #c0d2df;
+    --border:          #475c70;
+    --surface:         #223444;
+    --surface-hover:   #2d4355;
+    --surface-alt:     #385066;
+    --header-bg:       #263746;
+    --header-text:     #c0d2df;
+    --item-border:     #2b3f50;
+    --entity-color:    #b2c7d6;
+    --focus-ring:      #8eacc2;
+    --focus-ring-dark: #c0d2df;
+    --footer-border:   #43586c;
+    --footer-text:     #91a5b5;
+    --apps-bg:         #1e3a2a;
+    --agents-bg:       #2e1f42;
+  }
+}
+
+:root[data-theme="dark"] {
+  --bg:              #101820;
+  --text:            #c5d0d9;
+  --accent:          #a8c1d2;
+  --accent-dark:     #c0d2df;
+  --border:          #475c70;
+  --surface:         #223444;
+  --surface-hover:   #2d4355;
+  --surface-alt:     #385066;
+  --header-bg:       #263746;
+  --header-text:     #c0d2df;
+  --item-border:     #2b3f50;
+  --entity-color:    #b2c7d6;
+  --focus-ring:      #8eacc2;
+  --focus-ring-dark: #c0d2df;
+  --footer-border:   #43586c;
+  --footer-text:     #91a5b5;
+  --apps-bg:         #1e3a2a;
+  --agents-bg:       #2e1f42;
+}
+
 body {
   font-family: Avenir Next, sans-serif;
-  background: #f8fbff;
+  background: var(--bg);
+  transition: background 0.5s ease, color 0.5s ease;
+  margin: 30px auto 50px;
+  padding: 30px 30px 0;
+  width: min(100%, 700px);
+  box-sizing: border-box;
+  position: relative;
 }
 
-body #welcome {
-  margin: 30px auto 50px;
-  padding: 0 30px;
-  max-width: 900px;
+body h1, h2, p {
+  margin: 30px 0 20px;
+  color: var(--text);
+  font-weight: 400;
+  transition: color 0.5s ease;
+}
+
+#subtitle {
+  margin-top: -15px;
+}
+
+.theme-switch {
+  position: absolute;
+  top: 70px;
+  right: 10px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--text);
+  cursor: pointer;
+  user-select: none;
+}
+
+.theme-switch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.theme-switch-track {
+  position: relative;
+  width: 46px;
+  height: 24px;
+  border-radius: 12px;
+  background: var(--header-bg);
+  border: 1px solid var(--border);
+  transition: background 0.5s ease, border-color 0.5s ease;
+}
+
+.theme-switch-track > span {
+  position: absolute;
+  top: 3px;
+  z-index: 1;
+  font-size: 15px;
+  line-height: 18px;
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.theme-switch-sun { right: 5px; color: #fff; }
+.theme-switch-moon { left: 9px; opacity: 0; }
+
+.theme-switch-track::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--bg);
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.5s ease;
+}
+
+.theme-switch input:checked + .theme-switch-track {
+  background: var(--header-bg);
+}
+
+.theme-switch input:checked + .theme-switch-track .theme-switch-sun { opacity: 0; }
+.theme-switch input:checked + .theme-switch-track .theme-switch-moon { opacity: 1; }
+
+.theme-switch input:checked + .theme-switch-track::after {
+  transform: translateX(22px);
+}
+
+.theme-switch input:focus-visible + .theme-switch-track {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+
+body a {
+  text-decoration: none;
 }
 
-body #welcome h1, #welcome h3, #welcome h2, #welcome p {
-  margin: 20px 0;
-  color: #47637d;
+#subtitle a {
+  color: var(--accent);
+  font-style: italic;
+}
+#subtitle a::after {
+  content: '↗';
+  font-style: normal;
+  font-size: 0.6em;
+  font-weight: 700;
+  vertical-align: 0.15em;
+  padding-left: 0.5em;
+}
+#subtitle a:hover {
+  color: var(--accent-dark);
+}
+
+/* ── Web apps list ── */
+#webapps ul {
+  list-style: none;
+  margin: 0 0 0 40px;
+  padding: 0;
+}
+#webapps li {
+  width: fit-content;
+  padding: 0 10px 0 0;
+  display: flex;
+  align-items: center;
+  background-color: var(--surface);
+  border-radius: 7px;
+  overflow: hidden;
+  margin-bottom: 6px;
+  transition: background-color 0.2s ease;
+}
+#webapps li::before {
+  content: '•';
+  padding-left: 10px;
+  color: var(--accent);
+}
+#webapps li:hover { background-color: var(--row-hover); }
+#webapps li:hover a { color: var(--row-hover-text); }
+#webapps li + li { margin-top: 2px; }
+#webapps li a {
+  display: block;
+  padding: 4px 10px;
+  font-weight: 500;
+  color: var(--accent);
+  transition: background 0.3s;
+}
+#webapps li a:hover { background-color: transparent; }
+
+/* ── Agents list ── */
+#agents ul {
+  list-style: none;
+  margin: 0 0 0 40px;
+  padding: 0;
+}
+#agents li {
+  width: fit-content;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  background-color: var(--surface);
+  border-radius: 7px;
+  overflow: hidden;
+  margin-bottom: 6px;
+  transition: background-color 0.2s ease;
+}
+#agents li::before {
+  content: '•';
+  padding-left: 10px;
+  color: var(--accent);
+}
+#agents li:hover { background-color: var(--row-hover); }
+#agents li:hover a { color: var(--row-hover-text); }
+#agents li + li { margin-top: 2px; }
+#agents li a {
+  display: block;
+  padding: 4px 10px;
+  font-weight: 500;
+  color: var(--accent);
+  transition: background 0.3s;
+}
+#agents li a:hover { background-color: transparent; }
+#agents li a:not(.agent-card-link):last-child { padding-right: 10px; }
+.agent-card-link {
+  font-size: 0.9rem;
+  opacity: 0.8;
+  color: var(--accent);
   font-weight: 400;
+  background-color: var(--surface-alt);
+  align-self: stretch;
+  display: flex !important;
+  align-items: center;
+}
+.agent-card-link:hover { opacity: 1; background-color: var(--surface-hover); }
+
+
+/* ── Required services: slightly muted header ── */
+#required-services summary {
+  opacity: 0.8;
+}
+
+section.services {
+  position: relative; /* Ensure the toggle button is positioned relative to the section */
+}
+
+h2 + .toggle-button {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  align-self: center;
+  padding: 3px 10px;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--header-text);
+  font-size: 0.8rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  line-height: 1.4;
+}
+h2 + .toggle-button {
+  content: '⊞'; /* Default content for the toggle button */
+  width: 28px;
+  height: 28px;
+  justify-content: center;
+  padding: 0;
+  font-size: 1.1rem;
+  line-height: 1;
+}
+h2 + .toggle-button:hover { background: var(--surface-alt); }
+
+/* ── Service blocks (details/summary) ── */
+details {
+  margin-bottom: 6px;
+  overflow: hidden;
+}
+
+details[open] {
+  margin-bottom: 16px;
+}
+
+details[open] summary {
+  border-radius: 7px 7px 0 0;
+}
+summary:hover { background-color: var(--row-hover) !important; color: var(--row-hover-text); }
+
+details ul {
+  border-radius: 0 0 7px 7px;
 }
 
-body #welcome h3.header {
-  margin: 20px 0 0 0;
-  background-color: #537492;
+/* Animate the content panel when opening */
+details[open] > ul,
+details[open] > div {
+  animation: details-slide-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+}
+
+@keyframes details-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Staggered entity row fade-in */
+details[open] li {
+  animation: row-fade-in 0.35s ease both;
+}
+details[open] li:nth-child(1)  { animation-delay: 0.04s; }
+details[open] li:nth-child(2)  { animation-delay: 0.08s; }
+details[open] li:nth-child(3)  { animation-delay: 0.12s; }
+details[open] li:nth-child(4)  { animation-delay: 0.16s; }
+details[open] li:nth-child(5)  { animation-delay: 0.20s; }
+details[open] li:nth-child(n+6) { animation-delay: 0.24s; }
+
+@keyframes row-fade-in {
+  from { opacity: 0; transform: translateX(-4px); }
+  to   { opacity: 1; transform: translateX(0); }
+}
+
+summary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 8px 8px 14px;
+  background-color: var(--header-bg);
+  border-radius: 7px;
   color: white;
+  cursor: pointer;
+  list-style: none;
+  user-select: none;
+  transition: background-color 0.2s ease, border-radius 0.15s ease;
+}
+summary::-webkit-details-marker { display: none; }
+summary::before { display: none; }
+:root[data-theme="dark"] summary { background-color: #1c2a37; }
+
+.srv-name::before {
+  content: '▶';
+  font-size: 10px;
+  margin-right: 6px;
+  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
+  display: inline-block;
+  position: relative;
+  top: -2px;
+}
+details[open] .srv-name::before {
+  transform: rotate(90deg);
 }
 
-body #welcome h3 a {
-  color: inherit;
+.srv-name {
+  font-size: 1rem;
   font-weight: 500;
+  margin-right: 4px;
 }
 
-body #welcome h3 a span {
-  padding: 5px 15px;
-  font-weight: 300;
-  transition: all 0.2s ease-in;
+/* ── Required-service status pill (remote / mocked) ── */
+#required-services .srv-status {
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: lowercase;
+  padding: 1px 8px;
+  border-radius: 999px;
+  line-height: 1.6;
+  border: 1px solid transparent;
 }
+#required-services .srv-status-remote { color: #e8b84b; border-color: #e8b84b99; }
+#required-services .srv-status-mocked { color: #acbac6; border-color: #acbac699; }
+#required-services summary:hover .srv-status { color: var(--row-hover-text); }
 
-body #welcome h3 a:first-child span {
+.protocol-badges {
+  margin-left: auto;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.badge {
   display: inline-block;
-  padding: 5px 15px;
+  margin-left: 2px;
+  padding: 2px 9px;
+  border-radius: 9px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  font-family: inherit;
+  background: var(--badge-bg);
+  color: var(--badge-color);
+  border: none;
+  cursor: pointer;
+  transition: background 0.2s ease, opacity 0.2s ease, transform 0.15s ease;
+}
+summary:hover .badge { color: var(--row-hover-text); }
+.badge:hover { background: var(--badge-bg-hover); transform: scale(1.2); }
+.badge[aria-checked="true"] { background: var(--badge-bg-hover); }
+.badge[aria-checked="false"] { opacity: 0.7; }
+.badge:focus-visible { outline: 2px solid var(--focus-ring-dark); outline-offset: 2px; }
+
+.badge-group {
+  display: inline-flex;
+}
+.badge-group .badge { border-radius: 7px 0 0 7px; }
+.badge-group .badge.meta {
+  border-radius: 0 7px 7px 0;
+  border-left: none;
+  font-style: italic;
 }
+.badge-group .badge.meta:hover { background: var(--badge-bg-hover); }
 
-body #welcome h3 a span:hover {
-  color: #92b2d0;
+.source-links {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.src-link {
+  font-size: 0.78rem;
+  font-style: italic;
+  color: var(--entity-color);
+  transition: color 0.4s ease;
+}
+.src-link:hover { color: var(--accent-dark); }
+.src-link + .src-link {
+  padding-left: 6px;
+  border-left: 1px solid var(--border);
+}
+
+/* ── Describe row ── */
+.entity-row.describe-row-layout {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 8px;
+}
+.describe-left  { display: flex; align-items: center; grid-column: 1; }
+.describe-left > .entity-name {
+  flex: 1 1 auto;
+  align-self: stretch;
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.describe-center {
+  grid-column: 2;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+.describe-center > .base-url {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
 }
+.describe-right { grid-column: 3; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
 
-body #welcome ul {
+details ul {
+  list-style: none;
   margin: 0;
-  background: #91adc5;
-  list-style-type: none;
-  padding-inline-start: 20px;
+  padding: 6px 0;
+  background: var(--surface);
 }
 
-body #welcome li {
-  display: inline-grid;
-  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  width: 100%;
-  margin-bottom: 1px;
-  background-color: #d0e9ff;
-  padding: 0;
-  /*
-  -moz-transition: background color 0.2s ease-in;
-  -webkit-transition: background 0.2s ease-in;
-  -o-transition: background 0.2s ease-in;
-  /* Standard */
-  transition: all 0.1s ease-in;
+details li:hover { background: var(--row-hover); transition: background 0.2s ease; }
+details li:hover a { color: var(--row-hover-text) }
+
+.entity-name {
+  flex: 0 0 auto;
+  min-width: 180px;
+  font-weight: 500;
+  color: var(--entity-color);
+  font-size: 0.9rem;
 }
 
-body #welcome ul li div:not(:first-child) a {
-  font-weight: 300;
+li.operation .entity-name {
+  font-style: normal;
 }
 
-body #welcome a {
-  text-decoration: none;
+.proto-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  align-items: center;
 }
 
-body #welcome li a, body #welcome li > span {
-  padding: 4px 10px;
-  font-weight: 500;
-  color: #1d5985;
-  transition: all 0.1s ease-in;
+.extra-links {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  margin-left: 4px;
 }
-body #welcome li.operation span {
+
+.extra-link {
+  font-size: 0.78rem;
   font-style: italic;
+  text-transform: capitalize;
+  color: var(--entity-color);
+  transition: color 0.4s ease;
+}
+.extra-link:hover { color: var(--accent-dark); }
+.extra-link[hidden] { display: none; }
+.extra-link:not([hidden]) + .extra-link:not([hidden]) {
+  padding-left: 6px;
+  border-left: 1px solid var(--border);
+}
+.describe-link:not([hidden]) + .extra-links {
+  padding-left: 6px;
+  border-left: 1px solid var(--border);
 }
+.extra-links + .source-links {
+  padding-left: 6px;
+  border-left: 1px solid var(--border);
+}
+
+.proto-link {
+  display: inline-block;
+  padding: 2px 7px;
+  border-radius: 7px;
+  font-size: 0.8rem;
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  background: var(--surface);
+  color: var(--accent);
+  border: 1px solid var(--border);
+  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+.proto-link:hover { background: var(--surface-hover); color: var(--accent-dark); }
 
-body #welcome li a span:hover {
-  color: #f0faff;
-  background-color: #a7c8e1;
+.entity-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 14px;
+  min-height: 26px;
 }
 
-body #welcome .preview {
-  font-size: small;
+/* ── Kind pills ── */
+.kind-pill {
+  font-style: normal;
+  font-size: 0.65rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: lowercase;
+  padding: 1px 7px;
+  width: 34px;
+  text-align: center;
+  margin-right: 7px;
+  border-radius: 999px;
+  line-height: 1.6;
+  opacity: 0.85;
+}
+.kind-entity   { background: #00ff7722; color: #00e56b; border: 1px solid #00e56b40; }
+.kind-function { background: #ca1a1a22; color: #f56a6a; border: 1px solid #f56a6a40; }
+.kind-action   { background: #8b3a9022; color: #c87de8; border: 1px solid #c87de840; }
+.kind-auto     { background: #6b6b6b22; color: #999;    border: 1px solid #99999940; }
+.kind-schema   { background: #1a90ca22; color: #5ab4e8; border: 1px solid #5ab4e840; }
+
+[data-theme="light"] .kind-entity   { background: #e6fff2; color: #00994d; border-color: #00994d40; }
+[data-theme="light"] .kind-function { background: #fce8e8; color: #ca1a1a; border-color: #ca1a1a40; }
+[data-theme="light"] .kind-action   { background: #f5e8fc; color: #7b2d8b; border-color: #7b2d8b40; }
+[data-theme="light"] .kind-auto     { background: #f0f0f0; color: #666;    border-color: #66666640; }
+[data-theme="light"] .kind-schema   { background: #e8f3fc; color: #1a6f9e; border-color: #1a6f9e40; }
+
+.entity-row > .entity-name {
+  flex: 1 1 auto;
+  align-self: stretch;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.entity-row.entity-row-3col {
+  display: grid;
+  grid-template-columns: 1fr auto;
+}
+.entity-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
 }
 
 footer {
-  border-top: .5px solid;
+  border-top: .5px solid var(--footer-border);
   margin-top: 44px;
-  padding-top: 22px;
-  width: 400px;
+  padding-top: 12px;
+  max-width: 500px;
   font-size: 90%;
+  color: var(--footer-text);
+  opacity: 0.6;
+}
+:root[data-theme="light"] footer { opacity: 1; }
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) footer { opacity: 1; }
 }
 
-@media (prefers-color-scheme: dark) {
-  body { background: #0a2138; }
-
-  body #welcome h1, #welcome h3, #welcome h2, #welcome p {
-      color: #a6c1d9;
-  }
-  body #welcome h3 a {
-      color: #e2efff;
-  }
-  body #welcome ul {
-      background: #7894ad;
-  }
-  body #welcome li {
-      background-color: #506d88;
-  }
-  body #welcome li a, body #welcome li:hover div:not(:first-child) a, body #welcome li > span {
-      color: #d0e4f2;
-  }
-  body #welcome li a:hover {
-      color: white;
-      background-color: #7894ad;
-  }
-
-  body #welcome h3.header {
-      background-color: #304c65;
-  }
+/* ── Focus styles ── */
+:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
 
-  footer {
-      border-top: .5px solid #456;
-      color: #567;
-  }
-}
+summary:focus-visible,
+h2 button:focus-visible {
+  outline-color: var(--focus-ring-dark);
+}