Sync styleguide 2026.05.18.1

2026-06-24 10:09:17 +02:00
parent ed66066912
commit 8965215ab9
15 changed files with 538 additions and 2 deletions
@@ -284,6 +284,7 @@
  --dimension-input-field-desktop-width: 400px;
  --dimension-input-field-max-width: 600px;
  --dimension-search-field-width: 15.3rem;
+  --dimension-public-content-width: 60vw;
  --dimension-layer-pulldown-panel: 40;
  --dimension-multiselect-pulldown-panel-desktop-width: 500px;
  --dimension-options-row-mode-toggle-width: 7rem;
@@ -142,6 +142,16 @@
      color: var(--text-button-process);
    }

+    .sg-button--cta {
+      --surface-button-cta: var(--color-darkblue);
+      --text-button-cta: var(--color-font-light);
+      height: auto;
+      min-height: var(--interaction-height);
+      background: var(--surface-button-cta);
+      color: var(--text-button-cta);
+      padding: var(--spacing-large);
+    }
+
    .sg-button--process-inactive {
      background: var(--surface-button-process-inactive);
      color: var(--text-button-process);
@@ -0,0 +1,81 @@
+/* ========================================================= */
+/* Components: Public Page Components                        */
+/* ========================================================= */
+
+.sg-content-group-box {
+  --surface-content-group-box: var(--color-transparent);
+  --border-content-group-box: var(--color-white);
+  --layout-content-group-box-gap: var(--spacing-large);
+  --layout-content-group-box-margin-block: calc(var(--spacing-large) * 0.5);
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  margin: var(--layout-content-group-box-margin-block) 0;
+  border: 1px solid var(--border-content-group-box);
+  background: var(--surface-content-group-box);
+  gap: var(--layout-content-group-box-gap);
+}
+
+.sg-content-group-box > * {
+  margin: 0;
+}
+
+.sg-text-block {
+  --surface-text-block: var(--color-transparent);
+  --text-text-block: var(--color-font-light);
+  --layout-text-block-width: var(--dimension-public-content-width);
+  width: var(--layout-text-block-width);
+  box-sizing: border-box;
+  background: var(--surface-text-block);
+  color: var(--text-text-block);
+}
+
+.sg-text-block .sg-body {
+  margin: 0;
+  color: var(--text-text-block);
+}
+
+.sg-card--call-to-action-card {
+  --surface-call-to-action-card: var(--surface-card-group);
+  --text-call-to-action-card: var(--color-font-light);
+  --layout-call-to-action-card-width: var(--dimension-public-content-width);
+  --layout-call-to-action-card-content-columns: minmax(0, 1fr) max-content;
+  --layout-call-to-action-card-content-gap: var(--spacing-large);
+  width: var(--layout-call-to-action-card-width);
+  max-width: 100%;
+}
+
+.sg-card--call-to-action-card .sg-card-segment--body {
+  display: grid;
+  grid-template-columns: var(--layout-call-to-action-card-content-columns);
+  gap: var(--layout-call-to-action-card-content-gap);
+  align-items: center;
+  background: var(--surface-call-to-action-card);
+  color: var(--text-call-to-action-card);
+}
+
+.sg-call-to-action-card__text {
+  margin: 0;
+  min-width: 0;
+  color: var(--text-call-to-action-card);
+}
+
+.sg-call-to-action-card__action {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.sg-page-public-page-components .sg-preview-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+@media (max-width: 48rem) {
+  .sg-text-block,
+  .sg-card--call-to-action-card {
+    width: 100%;
+  }
+}
@@ -0,0 +1,17 @@
+/* ========================================================= */
+/* Patterns: Public Page Patterns                            */
+/* ========================================================= */
+
+.sg-page-public-page-patterns .sg-preview-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.sg-page-public-page-patterns .sg-text-block--align-right {
+  margin-left: auto;
+}
+
+.sg-page-public-page-patterns .sg-call-to-action-card--align-right {
+  margin-left: auto;
+}