first commit

core/themes/claro/css/layout/breadcrumb.css

@@ -0,0 +1,15 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Breadcrumb region.
+ */
+
+.region-breadcrumb {
+  min-height: var(--breadcrumb-height);
+}

core/themes/claro/css/layout/breadcrumb.pcss.css

@@ -0,0 +1,8 @@
+/**
+ * @file
+ * Breadcrumb region.
+ */
+
+.region-breadcrumb {
+  min-height: var(--breadcrumb-height);
+}

core/themes/claro/css/layout/card-list.css

@@ -0,0 +1,149 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Cards list.
+ */
+
+:root {
+  --card-list-spacing: var(--space-m);
+  --cards-two-cols-width: calc(((100% + var(--card-list-spacing)) / 2) - var(--card-list-spacing));
+  --cards-three-cols-width: calc(((100% + var(--card-list-spacing)) / 3) - var(--card-list-spacing));
+  --cards-four-cols-width: calc(((100% + var(--card-list-spacing)) / 4) - var(--card-list-spacing));
+}
+
+.card-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-list--two-cols,
+.card-list--four-cols {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.card-list__item {
+  box-sizing: border-box;
+  margin-bottom: var(--card-list-spacing);
+}
+
+.card-list--two-cols .card-list__item,
+.card-list--four-cols .card-list__item {
+  flex-basis: 100%;
+}
+
+/* 36.75rem theme screenshot width */
+
+@media screen and (min-width: 36.75rem) {
+  .card-list--four-cols .card-list__item {
+    flex-basis: var(--cards-two-cols-width);
+    max-width: var(--cards-two-cols-width);
+  }
+
+  .card-list--four-cols .card-list__item {
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
+
+@media screen and (max-width: 53.75rem) {
+  .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card-list--four-cols .card-list__item {
+    flex-basis: 100%;
+    max-width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+@media screen and (min-width: 70rem) {
+  .card-list--four-cols .card-list__item {
+    flex-basis: var(--cards-three-cols-width);
+    max-width: var(--cards-three-cols-width);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(3n) {
+    margin-right: 0;
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+@media screen and (min-width: 85.375rem) {
+  .card-list--two-cols .card-list__item {
+    flex-basis: var(--cards-two-cols-width);
+    max-width: var(--cards-two-cols-width);
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--two-cols .card-list__item {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--two-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+  }
+  [dir="rtl"] .card-list--two-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .card-list--four-cols .card-list__item {
+    flex-basis: var(--cards-four-cols-width);
+    max-width: var(--cards-four-cols-width);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(3n) {
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(4n) {
+    margin-right: 0;
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(4n) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}

core/themes/claro/css/layout/card-list.pcss.css

@@ -0,0 +1,140 @@
+/**
+ * @file
+ * Cards list.
+ */
+
+:root {
+  --card-list-spacing: var(--space-m);
+  --cards-two-cols-width: calc(((100% + var(--card-list-spacing)) / 2) - var(--card-list-spacing));
+  --cards-three-cols-width: calc(((100% + var(--card-list-spacing)) / 3) - var(--card-list-spacing));
+  --cards-four-cols-width: calc(((100% + var(--card-list-spacing)) / 4) - var(--card-list-spacing));
+}
+
+.card-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.card-list--two-cols,
+.card-list--four-cols {
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+.card-list__item {
+  box-sizing: border-box;
+  margin-bottom: var(--card-list-spacing);
+}
+
+.card-list--two-cols .card-list__item,
+.card-list--four-cols .card-list__item {
+  flex-basis: 100%;
+}
+
+/* 36.75rem theme screenshot width */
+@media screen and (min-width: 36.75rem) {
+  .card-list--four-cols .card-list__item {
+    flex-basis: var(--cards-two-cols-width);
+    max-width: var(--cards-two-cols-width);
+  }
+
+  .card-list--four-cols .card-list__item {
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+/* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
+@media screen and (max-width: 53.75rem) {
+  .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card-list--four-cols .card-list__item {
+    flex-basis: 100%;
+    max-width: 100%;
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+@media screen and (min-width: 70rem) {
+  .card-list--four-cols .card-list__item {
+    flex-basis: var(--cards-three-cols-width);
+    max-width: var(--cards-three-cols-width);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(3n) {
+    margin-right: 0;
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+@media screen and (min-width: 85.375rem) {
+  .card-list--two-cols .card-list__item {
+    flex-basis: var(--cards-two-cols-width);
+    max-width: var(--cards-two-cols-width);
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--two-cols .card-list__item {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--two-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+  }
+  [dir="rtl"] .card-list--two-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  .card-list--four-cols .card-list__item {
+    flex-basis: var(--cards-four-cols-width);
+    max-width: var(--cards-four-cols-width);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(3n) {
+    margin-right: var(--card-list-spacing);
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
+    margin-right: 0;
+    margin-left: var(--card-list-spacing);
+  }
+
+  .card-list--four-cols .card-list__item:nth-child(4n) {
+    margin-right: 0;
+  }
+  [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(4n) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}

core/themes/claro/css/layout/form-two-columns.css

@@ -0,0 +1,45 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+/**
+ * Layout overrides for the menu link add/edit form.
+ */
+.layout-region {
+  box-sizing: border-box;
+}
+.layout-region--footer .layout-region__content {
+  margin-top: var(--space-l);
+}
+/**
+ * Move to two column layout at wider widths.
+ */
+@media (min-width: 61rem) {
+  .layout-form {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 3fr minmax(22.5rem, 1fr);
+    gap: var(--space-l);
+  }
+
+  .layout-region--main,
+  .layout-region--footer {
+    grid-column: 1;
+    margin-inline: auto;
+    width: var(--layout-region-edit-width);
+  }
+
+  /* When the layout has vertical tabs */
+  .layout-region--main:has(.vertical-tabs),
+  .layout-region--main:has(.vertical-tabs) ~ .layout-region--footer {
+    width: var(--layout-region-edit-extended-width);
+  }
+
+  /* Push sidebar down to horizontal align with form section. */
+  .layout-region--secondary {
+    grid-row: span 2;
+    margin-block-start: var(--space-l);
+  }
+}

core/themes/claro/css/layout/form-two-columns.pcss.css

@@ -0,0 +1,41 @@
+/**
+ * Layout overrides for the menu link add/edit form.
+ */
+.layout-region {
+  box-sizing: border-box;
+}
+
+.layout-region--footer .layout-region__content {
+  margin-top: var(--space-l);
+}
+
+/**
+ * Move to two column layout at wider widths.
+ */
+@media (min-width: 61rem) {
+  .layout-form {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    grid-template-columns: 3fr minmax(360px, 1fr);
+    gap: var(--space-l);
+  }
+
+  .layout-region--main,
+  .layout-region--footer {
+    grid-column: 1;
+    margin-inline: auto;
+    width: var(--layout-region-edit-width);
+  }
+
+  /* When the layout has vertical tabs */
+  .layout-region--main:has(.vertical-tabs),
+  .layout-region--main:has(.vertical-tabs) ~ .layout-region--footer {
+    width: var(--layout-region-edit-extended-width);
+  }
+
+  /* Push sidebar down to horizontal align with form section. */
+  .layout-region--secondary {
+    grid-row: span 2;
+    margin-block-start: var(--space-l);
+  }
+}

core/themes/claro/css/layout/layout.css

@@ -0,0 +1,30 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * Add spacing to top and bottom of pages.
+ */
+
+.page-content {
+  margin-top: 1.5rem;
+  margin-bottom: 5rem;
+}
+
+@media screen and (min-width: 38em) {
+  .page-content {
+    margin-top: 2rem;
+  }
+}
+
+/**
+ * Add color to layout icons.
+ */
+
+.layout-icon__region {
+  fill: #f5f5f2;
+  stroke: #666;
+}

core/themes/claro/css/layout/layout.pcss.css

@@ -0,0 +1,22 @@
+/**
+ * Add spacing to top and bottom of pages.
+ */
+
+.page-content {
+  margin-top: 1.5rem;
+  margin-bottom: 80px;
+}
+
+@media screen and (min-width: 38em) {
+  .page-content {
+    margin-top: 2rem;
+  }
+}
+
+/**
+ * Add color to layout icons.
+ */
+.layout-icon__region {
+  fill: #f5f5f2;
+  stroke: #666;
+}

core/themes/claro/css/layout/local-actions.css

@@ -0,0 +1,55 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Layout styles for local actions.
+ */
+
+/**
+ * Action link layout styles.
+ */
+
+.local-actions {
+  margin: var(--space-m) 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* This is required to win over specificity of [dir="rtl"] ul */
+
+[dir="rtl"] .local-actions {
+  margin-right: 0;
+}
+
+.local-actions__item {
+  display: inline-block;
+  margin: 0 calc(var(--space-xs) / 2);
+}
+
+.local-actions__item:first-child {
+  margin-left: 0; /* LTR */
+}
+
+[dir="rtl"] .local-actions__item:first-child {
+  margin-right: 0;
+  margin-left: calc(var(--space-xs) / 2);
+}
+
+.local-actions__item:last-child {
+  margin-right: 0; /* LTR */
+}
+
+[dir="rtl"] .local-actions__item:last-child {
+  margin-right: calc(var(--space-xs) / 2);
+  margin-left: 0;
+}
+
+[dir="rtl"] .local-actions__item:only-child {
+  margin-right: 0;
+  margin-left: 0;
+}

core/themes/claro/css/layout/local-actions.pcss.css

@@ -0,0 +1,43 @@
+/**
+ * @file
+ * Layout styles for local actions.
+ */
+
+/**
+ * Action link layout styles.
+ */
+.local-actions {
+  margin: var(--space-m) 0;
+  padding: 0;
+  list-style: none;
+}
+/* This is required to win over specificity of [dir="rtl"] ul */
+[dir="rtl"] .local-actions {
+  margin-right: 0;
+}
+
+.local-actions__item {
+  display: inline-block;
+  margin: 0 calc(var(--space-xs) / 2);
+}
+
+.local-actions__item:first-child {
+  margin-left: 0; /* LTR */
+}
+[dir="rtl"] .local-actions__item:first-child {
+  margin-right: 0;
+  margin-left: calc(var(--space-xs) / 2);
+}
+
+.local-actions__item:last-child {
+  margin-right: 0; /* LTR */
+}
+[dir="rtl"] .local-actions__item:last-child {
+  margin-right: calc(var(--space-xs) / 2);
+  margin-left: 0;
+}
+
+[dir="rtl"] .local-actions__item:only-child {
+  margin-right: 0;
+  margin-left: 0;
+}

core/themes/claro/css/layout/system-admin--layout.css

@@ -0,0 +1,87 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Replacement 'Reusable layout' component styles of system/admin library.
+ */
+
+.layout-container {
+  margin-right: 1em;
+  margin-left: 1em;
+}
+
+.layout-container::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+@media screen and (min-width: 38em) {
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-container,
+  body:not(.toolbar-tray-open) .layout-container {
+    margin-right: 3em;
+    margin-left: 3em;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-row,
+  body:not(.toolbar-tray-open) .layout-row {
+    margin-right: -1.5em;
+    margin-left: -1.5em;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
+  body:not(.toolbar-tray-open) .layout-column {
+    float: left; /* LTR */
+    box-sizing: border-box;
+    padding-right: 1.5em;
+    padding-left: 1.5em;
+  }
+  [dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
+  [dir="rtl"] body:not(.toolbar-tray-open) .layout-column {
+    float: right;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-column--half,
+  body:not(.toolbar-tray-open) .layout-column--half {
+    width: 50%;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-column--quarter,
+  body:not(.toolbar-tray-open) .layout-column--quarter {
+    width: 25%;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-column--three-quarter,
+  body:not(.toolbar-tray-open) .layout-column--three-quarter {
+    width: 75%;
+  }
+}
+
+@media screen and (min-width: 60em) {
+  .layout-container {
+    margin-right: 3em;
+    margin-left: 3em;
+  }
+  .layout-row {
+    margin-right: -1.5em;
+    margin-left: -1.5em;
+  }
+  .layout-column {
+    float: left; /* LTR */
+    box-sizing: border-box;
+    padding-right: 1.5em;
+    padding-left: 1.5em;
+  }
+  [dir="rtl"] .layout-column {
+    float: right;
+  }
+  .layout-column--half {
+    width: 50%;
+  }
+  .layout-column--quarter {
+    width: 25%;
+  }
+  .layout-column--three-quarter {
+    width: 75%;
+  }
+}

core/themes/claro/css/layout/system-admin--layout.pcss.css

@@ -0,0 +1,79 @@
+/**
+ * @file
+ * Replacement 'Reusable layout' component styles of system/admin library.
+ */
+
+.layout-container {
+  margin-right: 1em;
+  margin-left: 1em;
+}
+.layout-container::after {
+  display: table;
+  clear: both;
+  content: "";
+}
+
+@media screen and (min-width: 38em) {
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-container,
+  body:not(.toolbar-tray-open) .layout-container {
+    margin-right: 3em;
+    margin-left: 3em;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-row,
+  body:not(.toolbar-tray-open) .layout-row {
+    margin-right: -1.5em;
+    margin-left: -1.5em;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
+  body:not(.toolbar-tray-open) .layout-column {
+    float: left; /* LTR */
+    box-sizing: border-box;
+    padding-right: 1.5em;
+    padding-left: 1.5em;
+  }
+  [dir="rtl"] .toolbar-tray-open:not(.toolbar-vertical) .layout-column,
+  [dir="rtl"] body:not(.toolbar-tray-open) .layout-column {
+    float: right;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-column--half,
+  body:not(.toolbar-tray-open) .layout-column--half {
+    width: 50%;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-column--quarter,
+  body:not(.toolbar-tray-open) .layout-column--quarter {
+    width: 25%;
+  }
+  .toolbar-tray-open:not(.toolbar-vertical) .layout-column--three-quarter,
+  body:not(.toolbar-tray-open) .layout-column--three-quarter {
+    width: 75%;
+  }
+}
+
+@media screen and (min-width: 60em) {
+  .layout-container {
+    margin-right: 3em;
+    margin-left: 3em;
+  }
+  .layout-row {
+    margin-right: -1.5em;
+    margin-left: -1.5em;
+  }
+  .layout-column {
+    float: left; /* LTR */
+    box-sizing: border-box;
+    padding-right: 1.5em;
+    padding-left: 1.5em;
+  }
+  [dir="rtl"] .layout-column {
+    float: right;
+  }
+  .layout-column--half {
+    width: 50%;
+  }
+  .layout-column--quarter {
+    width: 25%;
+  }
+  .layout-column--three-quarter {
+    width: 75%;
+  }
+}