gin-field-ui.pcss.css

.draggable.field-plugin-settings-editing,
.draggable.drag-previous.field-plugin-settings-editing {
  background: var(--gin-bg-app);
}

.field-plugin-summary {
  color: var(--gin-color-text-light);
  font-size: var(--gin-font-size-xs);
}

/* Need to increase specificity */
.field-option.field-option {
  --thumb-size: 5rem;

  align-items: baseline;
  padding: 0;
  border: 1px solid var(--gin-border-color);
  border-radius: var(--gin-border-m);
  background-color: transparent;
  gap: var(--gin-spacing-m);

  .field-option__thumb {
    border-radius: 0;
    background-color: var(--gin-bg-layer2);
    border-start-start-radius: var(--gin-border-s);
    border-end-start-radius: var(--gin-border-s);

    .add-field-container & {
      background-color: var(--gin-bg-layer2);
    }
  }

  .field-option__icon {
    filter: brightness(0);

    .gin--dark-mode & {
      filter: brightness(0) invert(1);
    }
  }

  .field-option__words {
    padding-block: var(--gin-spacing-s);

    .field-option__label {
      display: block;
      margin-block-end: var(--gin-spacing-xxs);
      font-weight: var(--gin-font-weight-semibold);
    }
  }

  .field-option__item {
    column-gap: 0;
    padding-block: var(--gin-spacing-s);

    .form-item__label {
      margin-block-end: var(--gin-spacing-xxs);
      font-weight: var(--gin-font-weight-semibold);
    }
  }

  .field-option__description {
    color: var(--gin-color-text-light);
    font-size: var(--gin-font-size-xs);
    line-height: 1.3;
  }

  .field-option-radio {
    all: unset !important;
  }

  &.selected,
  &:focus-within,
  &:has(.field-option-radio:checked) {
    background-color: var(--gin-bg-layer2);

    .field-option__thumb {
      background-color: var(--gin-color-primary);
    }

    .field-option__icon {
      filter: brightness(0) invert(1);

      .gin--dark-mode & {
        filter: brightness(0);
      }
    }
  }

  &:focus-within,
  &:focus-within:has(.field-option-radio:checked) {
    .field-option__thumb {
      background-color: var(--gin-color-primary-active);
    }
  }
}

.subfield-option {
  border: 1px solid var(--gin-border-color);
  border-radius: var(--gin-border-m);

  .item-list {
    margin-block-start: var(--gin-spacing-xs);
    color: var(--gin-color-text-light);
    font-size: var(--gin-font-size-xs);
  }

  &.selected,
  &:focus-within {
    background-color: var(--gin-bg-layer2);
  }
}

File

View on git.drupalcode.org

core/themes/default_admin/migration/css/base/gin-field-ui.pcss.css

View source 
  1. .draggable.field-plugin-settings-editing,

  2. .draggable.drag-previous.field-plugin-settings-editing {

  3.   background: var(--gin-bg-app);

  4. }

  5. 

  6. .field-plugin-summary {

  7.   color: var(--gin-color-text-light);

  8.   font-size: var(--gin-font-size-xs);

  9. }

  10. 

  11. /* Need to increase specificity */

  12. .field-option.field-option {

  13.   --thumb-size: 5rem;

  14. 

  15.   align-items: baseline;

  16.   padding: 0;

  17.   border: 1px solid var(--gin-border-color);

  18.   border-radius: var(--gin-border-m);

  19.   background-color: transparent;

  20.   gap: var(--gin-spacing-m);

  21. 

  22.   .field-option__thumb {

  23.     border-radius: 0;

  24.     background-color: var(--gin-bg-layer2);

  25.     border-start-start-radius: var(--gin-border-s);

  26.     border-end-start-radius: var(--gin-border-s);

  27. 

  28.     .add-field-container 
  29.   }

  30. 

  31.   .field-option__icon {

  32.     filter: brightness(0);

  33. 

  34.     .gin--dark-mode 
  35.   }

  36. 

  37.   .field-option__words {

  38.     padding-block: var(--gin-spacing-s);

  39. 

  40.     .field-option__label {

  41.       display: block;

  42.       margin-block-end: var(--gin-spacing-xxs);

  43.       font-weight: var(--gin-font-weight-semibold);

  44.     }

  45.   }

  46. 

  47.   .field-option__item {

  48.     column-gap: 0;

  49.     padding-block: var(--gin-spacing-s);

  50. 

  51.     .form-item__label {

  52.       margin-block-end: var(--gin-spacing-xxs);

  53.       font-weight: var(--gin-font-weight-semibold);

  54.     }

  55.   }

  56. 

  57.   .field-option__description {

  58.     color: var(--gin-color-text-light);

  59.     font-size: var(--gin-font-size-xs);

  60.     line-height: 1.3;

  61.   }

  62. 

  63.   .field-option-radio {

  64.     all: unset !important;

  65.   }

  66. 

  67.   &.selected,

  68.   &:focus-within,

  69.   &:has(.field-option-radio:checked) {

  70.     background-color: var(--gin-bg-layer2);

  71. 

  72.     .field-option__thumb {

  73.       background-color: var(--gin-color-primary);

  74.     }

  75. 

  76.     .field-option__icon {

  77.       filter: brightness(0) invert(1);

  78. 

  79.       .gin--dark-mode 
  80.     }

  81.   }

  82. 

  83.   &:focus-within,

  84.   &:focus-within:has(.field-option-radio:checked) {

  85.     .field-option__thumb {

  86.       background-color: var(--gin-color-primary-active);

  87.     }

  88.   }

  89. }

  90. 

  91. .subfield-option {

  92.   border: 1px solid var(--gin-border-color);

  93.   border-radius: var(--gin-border-m);

  94. 

  95.   .item-list {

  96.     margin-block-start: var(--gin-spacing-xs);

  97.     color: var(--gin-color-text-light);

  98.     font-size: var(--gin-font-size-xs);

  99.   }

  100. 

  101.   &.selected,

  102.   &:focus-within {

  103.     background-color: var(--gin-bg-layer2);

  104.   }

  105. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.