katalyst-koi 4.18.1 → 5.0.0.alpha.1

data/app/assets/stylesheets/koi/forms/input.css

@@ -0,0 +1,194 @@
+:is(
+  input:not([type="checkbox"], [type="radio"], [type="color"], [type="button"]),
+  select,
+  textarea,
+  trix-editor
+) {
+  background: var(--color-light);
+  border-radius: var(--input-radius);
+  border: var(--stroke-input);
+  color: var(--color-dark);
+  padding: var(--space-3xs);
+  width: 100%;
+  min-height: var(--input-size);
+
+  &::placeholder {
+    color: var(--color-mid);
+    opacity: 1;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    color: inherit;
+    background-color: transparent;
+    cursor: not-allowed;
+  }
+
+  &:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: 0;
+    box-shadow: var(--focus-shadow);
+  }
+}
+
+:is(input, select, textarea) {
+  accent-color: var(--color-primary);
+}
+
+:is(textarea, trix-editor) {
+  resize: vertical;
+  line-height: var(--leading-fine);
+}
+
+.govuk-input {
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.govuk-input::-webkit-outer-spin-button,
+.govuk-input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+.govuk-input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+.govuk-input--error:not(:focus-visible) {
+  border-color: var(--govuk-error-color);
+}
+
+.govuk-input--extra-letter-spacing {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.05em;
+}
+
+.govuk-input--width-30 {
+  max-width: 29.5em;
+}
+
+.govuk-input--width-20 {
+  max-width: 20.5em;
+}
+
+.govuk-input--width-10 {
+  max-width: 11.5em;
+}
+
+.govuk-input--width-5 {
+  max-width: 5.5em;
+}
+
+.govuk-input--width-4 {
+  max-width: 4.5em;
+}
+
+.govuk-input--width-3 {
+  max-width: 3.75em;
+}
+
+.govuk-input--width-2 {
+  max-width: 2.75em;
+}
+
+.govuk-input__wrapper {
+  display: flex;
+  align-items: stretch;
+}
+
+.govuk-input__wrapper .govuk-input {
+  flex: 0 1 auto;
+}
+
+.govuk-input__wrapper .govuk-input:focus {
+  z-index: 1;
+}
+
+@container (max-width: 19.99em) {
+  .govuk-input__wrapper {
+    display: block;
+  }
+  .govuk-input__wrapper .govuk-input {
+    max-width: 100%;
+  }
+}
+
+.govuk-input__prefix,
+.govuk-input__suffix {
+  font-weight: var(--font-regular);
+  font-size: var(--size-step-0);
+  line-height: var(--leading-fine);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--input-size);
+  padding: var(--space-3xs);
+  border: var(--stroke-input);
+  background-color: var(--color-tint);
+  text-align: center;
+  white-space: nowrap;
+  cursor: default;
+  flex: 0 0 auto;
+}
+
+@container (max-width: 19.99em) {
+  .govuk-input__prefix,
+  .govuk-input__suffix {
+    display: block;
+    height: 100%;
+    white-space: normal;
+  }
+}
+
+@container (max-width: 19.99em) {
+  .govuk-input__prefix {
+    border-bottom: 0;
+    border-top-left-radius: var(--input-radius);
+    border-top-right-radius: var(--input-radius);
+  }
+
+  .govuk-input__prefix + .govuk-input {
+    border-top-left-radius: unset;
+    border-top-right-radius: unset;
+  }
+}
+
+@container (min-width: 20em) {
+  .govuk-input__prefix {
+    border-right: 0;
+    border-top-left-radius: var(--input-radius);
+    border-bottom-left-radius: var(--input-radius);
+  }
+
+  .govuk-input__prefix + .govuk-input {
+    border-top-left-radius: unset;
+    border-bottom-left-radius: unset;
+  }
+}
+
+@container (max-width: 19.99em) {
+  .govuk-input__suffix {
+    border-top: 0;
+    border-bottom-left-radius: var(--input-radius);
+    border-bottom-right-radius: var(--input-radius);
+  }
+
+  .govuk-input:has(+ .govuk-input__suffix) {
+    border-bottom-left-radius: unset;
+    border-bottom-right-radius: unset;
+  }
+}
+
+@container (min-width: 20em) {
+  .govuk-input__suffix {
+    border-left: 0;
+    border-top-right-radius: var(--input-radius);
+    border-bottom-right-radius: var(--input-radius);
+  }
+
+  .govuk-input:has(+ .govuk-input__suffix) {
+    border-top-right-radius: unset;
+    border-bottom-right-radius: unset;
+  }
+}

data/app/assets/stylesheets/koi/forms/label.css

@@ -0,0 +1,43 @@
+label {
+  font-weight: var(--font-medium);
+  line-height: var(--leading-fine);
+}
+
+label::after {
+  content: "\A";
+  white-space: pre;
+}
+
+.govuk-label {
+  font-weight: var(--font-regular);
+  font-size: var(--size-step-0);
+  display: block;
+  margin-block-end: var(--space-3xs);
+}
+
+.govuk-label--xl,
+.govuk-label--l,
+.govuk-label--m {
+  font-weight: var(--font-bold);
+  margin-block-end: var(--space-xs);
+}
+
+.govuk-label--xl {
+  font-size: var(--size-step-3);
+}
+
+.govuk-label--l {
+  font-size: var(--size-step-2);
+}
+
+.govuk-label--m {
+  font-size: var(--size-step-1);
+}
+
+.govuk-label--s {
+  font-weight: var(--font-bold);
+}
+
+.govuk-label-wrapper {
+  margin: 0;
+}

data/app/assets/stylesheets/koi/forms/password.css

@@ -0,0 +1,18 @@
+[data-govuk-password-input-init] {
+  .govuk-password-input__wrapper {
+    gap: var(--space-3xs);
+  }
+
+  .govuk-button {
+    min-width: 4em;
+    background: none;
+    cursor: pointer;
+    border: var(--stroke-input);
+  }
+
+  .govuk-button:focus-visible,
+  .govuk-button:hover {
+    color: var(--color-dark-glare);
+    border-color: var(--color-dark-glare);
+  }
+}

data/app/assets/stylesheets/koi/forms/radios.css

@@ -0,0 +1,162 @@
+.govuk-radios--small {
+  --input-size: var(--small-input-size);
+}
+
+.govuk-radios__item {
+  display: grid;
+  grid-template-areas: "input label" "input hint";
+  grid-template-columns: var(--input-size) 1fr;
+  grid-column-gap: var(--space-xs);
+  align-items: baseline;
+}
+
+.govuk-radios__input {
+  cursor: pointer;
+  grid-area: input;
+  height: var(--input-size);
+  margin-block-start: calc(-0.5 * var(--input-size));
+  margin: 0;
+  opacity: 0;
+  translate: 0 calc(var(--stroke-input-width) + 0.25 * var(--input-size));
+  width: var(--input-size);
+  z-index: 1;
+}
+
+.govuk-radios__item::before {
+  aspect-ratio: 1;
+  background: transparent;
+  border-radius: 50%;
+  border: var(--stroke-input);
+  content: "";
+  display: inline-block;
+  grid-area: input;
+  margin-block-start: calc(-0.5 * var(--input-size));
+  translate: 0 calc(var(--stroke-input-width) + 0.25 * var(--input-size));
+}
+
+.govuk-radios__item::after {
+  content: "";
+  aspect-ratio: 1;
+  background: currentcolor;
+  border-radius: 50%;
+  border: calc(0.25 * var(--input-size)) solid currentcolor;
+  display: inline-block;
+  grid-area: input;
+  margin-block-start: calc(-0.5 * var(--input-size));
+  margin-inline: calc(0.25 * var(--input-size));
+  opacity: 0;
+  translate: 0 var(--stroke-input-width);
+}
+
+.govuk-radios__label {
+  grid-area: label;
+  padding-block: calc(
+    var(--input-size) * 0.5 + var(--stroke-input-width) - 0.5em
+  );
+  cursor: pointer;
+  touch-action: manipulation;
+  margin-block-end: 0;
+  min-height: var(--input-size);
+}
+
+.govuk-radios__hint {
+  grid-area: hint;
+}
+
+.govuk-radios__label:has(+ .govuk-radios__hint) {
+  padding-block-end: 0;
+}
+
+.govuk-radios__item:has(.govuk-radios__input:focus)::before {
+  border-width: calc(var(--stroke-input-width) + 1px);
+  outline: var(--focus-outline);
+  outline-offset: 0;
+}
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  .govuk-radios__item:has(.govuk-radios__input:focus)::before {
+    outline-color: Highlight;
+  }
+}
+
+.govuk-radios__item:has(.govuk-radios__input:checked)::after {
+  opacity: 1;
+}
+
+.govuk-radios__input:disabled,
+.govuk-radios__input:disabled + .govuk-radios__label {
+  cursor: not-allowed;
+}
+
+.govuk-radios__input:disabled + .govuk-radios__label,
+.govuk-radios__input:disabled ~ .govuk-hint {
+  opacity: 0.5;
+}
+
+@media (min-width: 40.0625em) {
+  .govuk-radios--inline {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+  }
+
+  .govuk-radios--inline .govuk-radios__item {
+    margin-right: var(--space-s);
+  }
+}
+
+.govuk-radios__divider {
+  width: var(--input-size);
+  text-align: center;
+}
+
+.govuk-radios__conditional {
+  margin-bottom: var(--space-s);
+  margin-left: calc(var(--input-size) * 0.5 - var(--stroke-input-width) * 0.5);
+  padding-left: calc(
+    var(--input-size) * 0.5 - var(--stroke-input-width) * 0.5 + var(--space-xs)
+  );
+  border-left: calc(2 * var(--stroke-input-width)) solid var(--color-mid);
+
+  > :not([type="hidden"]) + * {
+    margin-top: var(--flow-space, var(--space-xs));
+  }
+}
+
+.govuk-frontend-supported .govuk-radios__conditional--hidden {
+  display: none;
+}
+
+.govuk-radios--small {
+  .govuk-radios__item:hover:has(.govuk-radios__input:not(:disabled))::before {
+    outline: var(--focus-width) 1px dashed transparent;
+    outline-offset: 1px;
+    box-shadow: 0 0 0 var(--space-3xs) var(--color-mid);
+  }
+
+  .govuk-radios__item:hover:has(.govuk-radios__input:focus)::before {
+    box-shadow:
+      0 0 0 var(--focus-width) var(--focus-color),
+      0 0 0 var(--space-3xs) var(--color-mid);
+  }
+}
+
+@media screen and (forced-colors: active), (-ms-high-contrast: active) {
+  .govuk-radios--small {
+    .govuk-radios__item:hover:has(.govuk-radios__input:focus)::before {
+      outline-color: Highlight;
+    }
+  }
+}
+
+@media (hover: none), (pointer: coarse) {
+  .govuk-radios--small {
+    .govuk-radios__item:hover:has(.govuk-radios__input:not(:disabled))::before {
+      box-shadow: initial;
+    }
+
+    .govuk-radios__item:hover:has(.govuk-radios__input:focus)::before {
+      box-shadow: 0 0 0 var(--focus-width) var(--focus-color);
+    }
+  }
+}

data/app/assets/stylesheets/koi/forms/select.css

@@ -0,0 +1,18 @@
+select {
+  line-height: var(--leading-fine);
+  min-width: 11.5em;
+  max-width: 100%;
+  height: var(--input-size);
+  background-color: var(--color-light);
+}
+
+select option:active,
+select option:checked,
+select:focus::-ms-value {
+  color: var(--color-light);
+  background-color: var(--color-dark-glare);
+}
+
+.govuk-select--error:not(:focus-visible) {
+  border-color: var(--govuk-error-color);
+}

data/app/assets/stylesheets/koi/forms/textarea.css

@@ -0,0 +1,3 @@
+.govuk-textarea--error:not(:focus-visible) {
+  border-color: var(--govuk-error-color);
+}

data/app/assets/stylesheets/koi/forms/trix.css

@@ -0,0 +1,33 @@
+@import url("/trix.css");
+
+trix-toolbar {
+  margin-block-end: var(--flow-space, var(--space-2xs));
+
+  .trix-button-group {
+    border: var(--stroke-input);
+    border-radius: var(--input-radius);
+    margin-block-end: 0;
+  }
+
+  .trix-button {
+    color: var(--color-dark);
+    border-bottom: none;
+  }
+
+  .trix-button--dialog {
+    min-height: 2.2rem;
+  }
+
+  .trix-button:not(:first-child) {
+    border-left: var(--stroke-input);
+  }
+
+  .trix-button.trix-active {
+    background-color: var(--color-mid);
+    border-bottom: none;
+  }
+}
+
+.govuk-richtextarea--error:not(:focus-visible) {
+  border-color: var(--govuk-error-color);
+}

data/app/assets/stylesheets/koi/global/fonts.css

@@ -0,0 +1,22 @@
+@import url("https://rsms.me/inter/inter.css");
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap");
+
+:root {
+  --font-base: "Inter", sans-serif;
+  --font-mono: "Inconsolata", monospace;
+  --leading-micro: 0.85;
+  --leading-flat: 1;
+  --leading-fine: 1.2;
+  --leading-standard: 1.4;
+  --leading-loose: 1.7;
+  --font-regular: 400;
+  --font-medium: 500;
+  --font-bold: 700;
+  --font-black: 900;
+}
+
+@supports (font-variation-settings: normal) {
+  :root {
+    --font-base: "Inter var", sans-serif;
+  }
+}