@raspberrypifoundation/design-system-react 1.7.0 → 2.0.0-beta.1

package/dist/scss/components/button.scss

@@ -0,0 +1,321 @@
+@forward '../properties/colors/brand';
+@forward '../properties/colors/decorative';
+@forward '../properties/colors/greys';
+@forward '../properties/colors/alert';
+@forward '../properties/font-size';
+@forward '../properties/font-weight';
+@forward '../properties/border';
+@forward '../properties/spacing';
+@forward '../properties/sizing';
+
+.rpf-button {
+  // Default button variables
+  --rpf-button-background-color: var(--rpf-navy-800);
+  --rpf-button-background-color-hover: var(--rpf-navy-900);
+  --rpf-button-background-color-active: var(--rpf-navy-600);
+  --rpf-button-background-color-disabled: var(--rpf-grey-600);
+  --rpf-button-text-color: var(--rpf-white);
+
+  --rpf-button-border-color: var(--rpf-button-background-color);
+  --rpf-button-border-color-hover: var(--rpf-button-background-color-hover);
+  --rpf-button-border-color-active: var(--rpf-button-background-color-active);
+  --rpf-button-border-color-disabled: var(--rpf-button-background-color-disabled);
+
+  // Danger button variables
+  --rpf-button-danger-background-color: var(--rpf-alert-error);
+  --rpf-button-danger-background-color-hover: var(--rpf-alert-error);
+  --rpf-button-danger-background-color-active: var(--rpf-red-900);
+  --rpf-button-danger-background-color-disabled: var(--rpf-grey-600);
+  --rpf-button-danger-text-color: var(--rpf-white);
+
+  --rpf-button-danger-border-color: var(--rpf-button-danger-background-color);
+  --rpf-button-danger-border-color-hover: var(--rpf-button-danger-background-color-hover);
+  --rpf-button-danger-border-color-active: var(--rpf-button-danger-background-color-active);
+  --rpf-button-danger-border-color-disabled: var(--rpf-button-danger-background-color-disabled);
+
+  --rpf-button-border-radius: var(--border-radius);
+  --rpf-button-border-width: var(--border-width-md); // After a 3D effect? Use combined values, e.g. `2px 2px 4px 2px`
+
+  --rpf-button-lg-height: var(--lg-target-size);
+  --rpf-button-sm-height: var(--sm-target-size);
+  --rpf-button-min-target-size: var(--min-target-size);
+
+
+  all: unset;
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--rpf-button-text-color);
+  /*
+   * We've decided to follow the masses on this and have a pointer on buttons.
+   * Google, Facebook, Twitter, Mozilla, and Microsoft amongst many others have a pointer on buttons.
+   */
+  cursor: pointer;
+  display: flex;
+  font-size: var(--font-size-1-5);
+  font-weight: var(--font-weight-bold);
+  gap: var(--space-1);
+  min-block-size: var(--rpf-button-lg-height);
+  padding: var(--space-1) var(--space-2);
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  /* Fixes a rendering error that sometimes occurs due to negative z-index */
+  transform: scale(1);
+  inline-size: fit-content;
+
+  /* A bit of a hack to allow for separate visual and target heights */
+  &::before {
+    background-color: var(--rpf-button-background-color);
+    border-color: var(--rpf-button-border-color);
+    border-radius: var(--rpf-button-border-radius);
+    border-style: solid;
+    border-width: var(--rpf-button-border-width);
+    content: '';
+    display: block;
+    inset: 0;
+    position: absolute;
+    /* To ensure it renders under its siblings */
+    z-index: -1;
+  }
+
+  &:hover::before {
+    background-color: var(--rpf-button-background-color-hover);
+    border-color: var(--rpf-button-border-color-hover);
+  }
+
+  &:active::before {
+    background-color: var(--rpf-button-background-color-active);
+    border-color: var(--rpf-button-border-color-active);
+  }
+
+  &:focus-visible::before {
+    outline: var(--border-width-md) solid var(--rpf-button-background-color);
+    outline-offset: 3px;
+  }
+
+  &:disabled,
+  &--disabled {
+    cursor: default;
+
+    &::before,
+    &:hover::before {
+      border-color: var(--rpf-button-border-color-disabled);
+      background-color: var(--rpf-button-background-color-disabled);
+    }
+  }
+
+  &--secondary {
+    color: var(--rpf-button-background-color);
+
+    &::before {
+      background-color: var(--rpf-button-text-color);
+    }
+
+    &:hover {
+      color: var(--rpf-button-background-color-hover);
+
+      &::before {
+        background-color: var(--rpf-button-text-color);
+        border-color: var(--rpf-button-border-color-hover);
+      }
+    }
+
+    &:active {
+      color: var(--rpf-button-background-color-active);
+
+      &::before {
+        background-color: var(--rpf-button-text-color);
+        border-color: var(--rpf-button-border-color-active);
+      }
+    }
+
+    &:disabled,
+    &.rpf-button--disabled {
+      color: var(--rpf-button-background-color-disabled);
+
+      &:hover::before,
+      &:before {
+        background-color: var(--rpf-button-text-color);
+        border-color: var(--rpf-button-border-color-disabled);
+      }
+    }
+
+    &.rpf-button--danger {
+      color: var(--rpf-button-danger-background-color);
+
+      &::before {
+        background-color: var(--rpf-button-danger-text-color);
+      }
+
+      &:hover {
+        color: var(--rpf-button-danger-background-color-hover);
+
+        &::before {
+          background-color: var(--rpf-button-danger-text-color);
+          border-color: var(--rpf-button-danger-border-color-hover);
+        }
+      }
+
+      &:active {
+        color: var(--rpf-button-danger-background-color-active);
+
+        &::before {
+          background-color: var(--rpf-button-danger-text-color);
+          border-color: var(--rpf-button-danger-border-color-active);
+        }
+      }
+
+      &:disabled,
+      &.rpf-button--disabled {
+        color: var(--rpf-button-danger-background-color-disabled);
+
+        &:hover::before,
+        &:before {
+          background-color: var(--rpf-button-danger-text-color);
+          border-color: var(--rpf-button-danger-border-color-disabled);
+        }
+      }
+    }
+  }
+
+  &--tertiary {
+    color: var(--rpf-button-background-color);
+
+    &::before {
+      background-color: transparent;
+      border-color: transparent;
+    }
+
+    &:hover {
+      color: var(--rpf-button-background-color-hover);
+
+      &::before {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+
+    &:active {
+      color: var(--rpf-button-background-color-active);
+
+      &::before {
+        background-color: transparent;
+      }
+    }
+
+    &:disabled,
+    &.rpf-button--disabled {
+      color: var(--rpf-button-background-color-disabled);
+
+      &::before,
+      &:hover::before {
+        background-color: transparent;
+        border-color: transparent;
+      }
+    }
+
+    &.rpf-button--danger {
+      color: var(--rpf-button-danger-background-color);
+
+      &::before {
+        background-color: transparent;
+        border-color: transparent;
+      }
+
+      &:hover {
+        color: var(--rpf-button-danger-background-color-hover);
+
+        &::before {
+          background-color: transparent;
+          border-color: transparent;
+        }
+      }
+
+      &:active {
+        color: var(--rpf-button-danger-background-color-active);
+
+        &::before {
+          background-color: transparent;
+        }
+      }
+
+      &:disabled,
+      &.rpf-button--disabled {
+        color: var(--rpf-button-danger-background-color-disabled);
+
+        &::before,
+        &:hover::before {
+          background-color: transparent;
+          border-color: transparent;
+        }
+      }
+    }
+  }
+
+  &--danger {
+    color: var(--rpf-button-danger-text-color);
+
+    &::before {
+      background-color: var(--rpf-button-danger-background-color);
+      border-color: var(--rpf-button-danger-border-color);
+    }
+
+    &:hover::before {
+      background-color: var(--rpf-button-danger-background-color-hover);
+      border-color: var(--rpf-button-danger-border-color-hover);
+    }
+
+    &:active::before {
+      background-color: var(--rpf-button-danger-background-color-active);
+      border-color: var(--rpf-button-danger-border-color-active);
+    }
+
+    &:focus-visible::before {
+      outline: var(--border-width-md) solid var(--rpf-button-danger-background-color);
+    }
+  }
+
+  &--icon-only {
+    block-size: var(--rpf-button-lg-height);
+    line-height: var(--rpf-button-lg-height);
+    padding: 0;
+    text-align: center;
+    inline-size: var(--rpf-button-lg-height);
+
+    .rpf-button__icon {
+      margin: 0 auto;
+    }
+  }
+
+  &--sm {
+    font-size: var(--font-size-1);
+    min-block-size: var(--rpf-button-min-target-size);
+    padding: var(--space-1) var(--space-1);
+
+    /* To account for 32px visual height and 44px target height */
+    &::before {
+      inset: calc(calc(var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0;
+    }
+
+    &.rpf-button--icon-only {
+      block-size: var(--rpf-button-min-target-size);
+      line-height: var(--rpf-button-min-target-size);
+      padding: 0;
+      inline-size: var(--rpf-button-min-target-size);
+
+      &::before {
+        inset: calc(calc(var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2);
+      }
+    }
+
+    .material-symbols-sharp {
+      font-size: 20px;
+      font-variation-settings: 'OPSZ' 20;
+    }
+  }
+
+  &--full-width {
+    justify-content: center;
+    inline-size: 100%;
+  }
+}

package/dist/scss/components/forms/error-message.scss

@@ -0,0 +1,20 @@
+@forward '../../properties/colors/alert';
+@forward '../../properties/font-weight';
+@forward '../../properties/spacing';
+
+:root, :host {
+  --rpf-message-text-color: var(--rpf-alert-error);
+}
+
+.rpf-error-message {
+  all: unset;
+  align-items: center;
+  color: var(--rpf-message-text-color);
+  display: flex;
+  font-weight: var(--font-weight-bold);
+  padding-block: var(--space-1);
+
+  &__icon {
+    margin-inline-end: var(--space-1);
+  }
+}

package/dist/scss/components/forms/fieldset.scss

@@ -0,0 +1,42 @@
+@forward '../../properties/border';
+@forward '../../properties/colors/inputs';
+
+.rpf-fieldset {
+  all: unset;
+
+  background-color: var(--rpf-input-background-color);
+  box-sizing: border-box;
+  display: block;
+  color: var(--rpf-input-color);
+  margin-block-end: var(--space-3);
+  max-inline-size: fit-content;
+
+  legend {
+    background-color: var(--rpf-input-background-color);
+    color: var(--rpf-input-color);
+    inline-size: 100%;
+  }
+
+  &--full-width,
+  &--full-width &__inputs * {
+    max-inline-size: none;
+  }
+
+  &__inputs *:last-child {
+    margin-block-end: 0;
+  }
+
+  &--error &__inputs {
+    border-color: var(--rpf-input-color-error);
+    border-radius: var(--border-radius);
+    border-style: solid;
+    border-width: var(--fieldset-border-width);
+  }
+
+  &--disabled &__inputs,
+  &:disabled &__inputs {
+    background-color: var(--rpf-input-background-color-disabled);
+    border-radius: var(--border-radius);
+    color: var(--rpf-input-color);
+  }
+}

package/dist/scss/components/forms/input-checkbox.scss

@@ -0,0 +1,62 @@
+@forward '../../properties/colors/inputs';
+@forward '../../properties/sizing';
+
+.rpf-input-checkbox {
+  --rpf-input-checkbox-hit-target: var(--min-target-size);
+  --rpf-input-checkbox-size: var(--space-3);
+
+  align-items: center;
+  border-radius: var(--space-1);
+  box-sizing: border-box;
+  display: flex;
+  gap: var(--space-1-5);
+  margin-block-end: var(--space-1);
+  max-width: 50ch;
+  min-height: var(--rpf-input-checkbox-hit-target);
+  min-width: 240px;
+  padding-block: calc((var(--rpf-input-checkbox-hit-target) - var(--rpf-input-checkbox-size)) / 2);
+  padding-inline: var(--space-1);
+  width: 100%;
+
+  input[type='checkbox'] {
+    align-self: flex-start;
+    appearance: none;
+    background: var(--rpf-white);
+    border: var(--space-0-25) solid var(--rpf-grey-850);
+    border-radius: var(--space-0-5);
+    flex-shrink: 0;
+    height: var(--rpf-input-checkbox-size);
+    margin: 0;
+    width: var(--rpf-input-checkbox-size);
+
+    &:checked {
+      background: var(--rpf-grey-850);
+      background-image: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.95834 15.0003L3.20834 10.2503L4.39584 9.06283L7.95834 12.6253L15.6042 4.97949L16.7917 6.16699L7.95834 15.0003Z" fill="white"/></svg>');
+    }
+
+    &:disabled {
+      border-color: var(--rpf-grey-600);
+
+      &:checked {
+        background-color: var(--rpf-grey-600);
+      }
+    }
+  }
+
+  &.rpf-input--full-width {
+    max-width: none;
+  }
+
+  &:has(> input[type='checkbox']:disabled), &--disabled {
+    background-color: var(--rpf-input-background-color-disabled);
+    color: var(--rpf-grey-400);
+  }
+
+  &:has(> input[type='checkbox']:focus-visible) {
+    outline: 3px solid var(--rpf-input-outline-color);
+
+    > input[type='checkbox']:focus-visible {
+      outline: none;
+    }
+  }
+}

package/dist/scss/components/forms/input-label.scss

@@ -0,0 +1,36 @@
+@forward '../../properties/colors/greys';
+@forward '../../properties/colors/text';
+@forward '../../properties/font-weight';
+@forward '../../properties/spacing';
+@forward '../../properties/line-height';
+
+:root, :host {
+  --rpf-label-hint-color: var(--rpf-text-secondary);
+  --rpf-label-text-color: var(--rpf-text-primary);
+  --rpf-label-text-color-disabled: var(--rpf-grey-500);
+}
+
+.rpf-label {
+  all: unset;
+  color: var(--rpf-label-text-color);
+  display: flex;
+  flex-direction: column;
+  font-weight: var(--font-weight-bold);
+  padding-block-end: var(--space-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1-5);
+
+  &__hint {
+    color: var(--rpf-label-hint-color);
+    font-size: var(--font-size-1);
+    font-weight: var(--font-weight-regular);
+  }
+
+  &--disabled {
+    color: var(--rpf-label-text-color-disabled);
+
+    .rpf-label__hint {
+      color: var(--rpf-label-text-color-disabled);
+    }
+  }
+}

package/dist/scss/components/forms/input-number.scss

@@ -0,0 +1,61 @@
+@forward '../../properties/colors/greys';
+@forward '../../properties/colors/inputs';
+@forward '../../properties/font-size';
+@forward '../../properties/spacing';
+@use '../../mixins/inputs';
+
+.rpf-input-number {
+  padding: 0;
+  align-items: center;
+
+  @include inputs.disabled;
+
+  input[type='number'] {
+    all: unset;
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+    appearance: textfield;
+    inline-size: 100%;
+    margin-block: calc(var(--space-1) - 2px);
+    margin-inline-start: var(--space-1-5);
+  }
+
+  input[type='number']::-webkit-inner-spin-button,
+  input[type='number']::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  button {
+    // Prevent button shrink
+    flex-shrink: 0;
+    // Prevent text selection on multiple clicks
+    user-select: none;
+  }
+
+  &.rpf-input--disabled {
+    button,
+    hr {
+      display: none;
+    }
+  }
+
+  &.rpf-input--readonly {
+    button,
+    hr {
+      display: none;
+    }
+  }
+
+  hr {
+    border: none;
+    border-inline-start: var(--space-0-125) solid var(--rpf-grey-150);
+    block-size: var(--space-3);
+  }
+
+  // Add outline to wrapper when input is focused
+  &:has(input:focus-visible) {
+    outline: 3px solid var(--rpf-input-outline-color);
+  }
+}

package/dist/scss/components/forms/input-password.scss

@@ -0,0 +1,109 @@
+@forward '../../properties/colors/inputs';
+@forward '../../properties/colors/text';
+@forward '../../properties/border';
+@forward '../../properties/spacing';
+@forward '../../properties/font-size';
+@forward '../../properties/sizing';
+
+@use '../../mixins/inputs';
+@use '../../mixins/typography';
+
+.rpf-input-password {
+  // Specificity is needed to override the default rpf-input styles
+  &.rpf-input {
+    border-inline-end: 0;
+    border-end-start-radius: var(--border-radius);
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
+    border-start-start-radius: var(--border-radius);
+    min-block-size: calc(var(--lg-target-size) - calc(var(--input-border-width) * 2));
+    min-inline-size: 0;
+
+    @include inputs.disabled;
+    @include inputs.readonly;
+  }
+
+  &[type='password'] {
+    font-family: caption;
+    font-size: var(--font-size-2);
+    letter-spacing: var(--space-0-125);
+  }
+
+  &--readonly,
+  &--read-only,
+  &:read-only {
+    border-radius: var(--border-radius);
+    border-right: none;
+  }
+
+  &:focus-visible {
+    z-index: 1;
+  }
+
+  &__button {
+    background-color: var(--rpf-input-background-color);
+    border-end-end-radius: var(--border-radius);
+    border-end-start-radius: 0;
+    border-start-end-radius: var(--border-radius);
+    border-start-start-radius: 0;
+    font-size: var(--font-size-1);
+    justify-content: center;
+    min-block-size: calc(var(--lg-target-size) - calc(var(--input-border-width) * 2));
+    min-inline-size: var(--space-9);
+    text-decoration: underline;
+
+    &::before {
+      border: var(--input-border-width) solid var(--rpf-input-color);
+      border-end-end-radius: var(--border-radius);
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--border-radius);
+      border-start-start-radius: 0;
+    }
+
+    &--error {
+      &::before {
+        border: var(--input-border-width) solid var(--rpf-input-color-error);
+      }
+    }
+
+    // Override default rpf-button active and focus styles
+    &:active::before {
+      border-color: transparent;
+    }
+
+    &:focus-visible {
+      outline: 3px solid var(--rpf-input-outline-color);
+
+      &::before {
+        outline: none;
+      }
+    }
+
+    &:active, &:hover {
+      &::before {
+        border: var(--input-border-width) solid var(--rpf-input-color);
+      }
+    }
+  }
+
+  &__container {
+    display: flex;
+    max-width: 50ch;
+
+    &--full-width {
+      max-width: none;
+    }
+
+    &--error {
+      border-color: var(--rpf-input-color-error);
+    }
+
+    &--readonly,
+    &--read-only,
+    &--disabled {
+      button {
+        display: none;
+      }
+    }
+  }
+}