first commit

services/web/frontend/stylesheets/bootstrap-5/abstracts/all.scss

@@ -0,0 +1,5 @@
+@import 'mixins';
+@import 'variables';
+@import 'variable-overrides';
+@import 'themes-common-variables';
+@import 'templates-search';

services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss

@@ -0,0 +1,211 @@
+// Button
+
+@mixin ol-button-size(
+  $font-size,
+  $line-height,
+  $padding-y,
+  $padding-x: var(--spacing-06)
+) {
+  --bs-btn-font-size: #{$font-size};
+  --bs-btn-line-height: #{$line-height};
+  --bs-btn-padding-y: #{$padding-y};
+  --bs-btn-padding-x: #{$padding-x};
+}
+
+@mixin ol-button-variant(
+  $color,
+  $background,
+  $border: $background,
+  $hover-background: $background,
+  $hover-border: $hover-background,
+  $borderless: true
+) {
+  --bs-btn-color: #{$color};
+  --bs-btn-bg: #{$background};
+  --bs-btn-border-color: #{$border};
+  --bs-btn-hover-color: #{$color};
+  --bs-btn-hover-bg: #{$hover-background};
+  --bs-btn-hover-border-color: #{$hover-border};
+  --bs-btn-active-color: #{$color};
+  --bs-btn-active-bg: #{$hover-background};
+  --bs-btn-active-border-color: #{$hover-border};
+  --bs-btn-disabled-color: var(--content-disabled);
+  --bs-btn-disabled-bg: var(--bg-light-disabled);
+  --bs-btn-disabled-border-color: var(--bg-light-disabled);
+
+  @if $borderless {
+    --bs-btn-border-width: 0;
+  }
+
+  // Use the default state colors when in a loading state
+  &[data-ol-loading='true'] {
+    color: var(--bs-btn-color);
+    background-color: var(--bs-btn-bg);
+    border-color: var(--bs-btn-border-color);
+    opacity: 1;
+  }
+}
+
+@mixin action-button {
+  font-size: 0;
+  line-height: 1;
+  border-radius: 50%;
+  color: var(--content-primary);
+  background-color: transparent;
+
+  &:hover,
+  &:active,
+  &[aria-expanded='true'] {
+    background-color: rgb($neutral-90, 0.08);
+  }
+}
+
+@mixin reset-button() {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  appearance: none;
+}
+
+@mixin modal-lg {
+  max-width: 960px;
+}
+
+@mixin modal-md {
+  max-width: 640px;
+}
+
+@mixin modal-sm {
+  max-width: 480px;
+}
+
+// Toolbar
+@mixin toolbar-sm-height {
+  height: var(--toolbar-small-height);
+}
+
+@mixin toolbar-alt-bg() {
+  background-color: var(--toolbar-alt-bg-color);
+}
+
+@mixin theme($name) {
+  @if index($themes, $name) {
+    [data-theme='#{$name}'] {
+      @content;
+    }
+  } @else {
+    @error 'Theme "#{$name}" is not supported. Supported themes are: #{$themes}.';
+  }
+}
+
+@mixin box-shadow-button-input {
+  box-shadow: 0 0 0 2px var(--blue-30);
+}
+
+@mixin animation($animation) {
+  animation: $animation;
+}
+
+@mixin striped($color: rgba(255, 255, 255, 0.15), $angle: 45deg) {
+  background-image: linear-gradient(
+    $angle,
+    $color 25%,
+    transparent 25%,
+    transparent 50%,
+    $color 50%,
+    $color 75%,
+    transparent 75%,
+    transparent
+  );
+}
+
+@mixin mask-image($gradient) {
+  // mask-image isn't supported without the -webkit prefix on all browsers we support yet
+  -webkit-mask-image: $gradient;
+  mask-image: $gradient;
+}
+
+@mixin premium-background {
+  background-image: var(--premium-gradient);
+}
+
+@mixin premium-text {
+  @include premium-background;
+
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  color: var(--white); // Fallback
+  background-color: var(--blue-70); // Fallback
+}
+
+@mixin dark-bg {
+  --link-color: var(--link-color-dark);
+  --link-hover-color: var(--link-hover-color-dark);
+  --link-visited-color: var(--link-visited-color-dark);
+}
+
+@mixin triangle($direction, $width, $height, $color) {
+  position: absolute;
+  border-color: transparent;
+  border-style: solid;
+  width: 0;
+  height: 0;
+
+  @if $direction == top {
+    border-width: 0 calc(#{$width} / 2) #{$height} calc(#{$width} / 2);
+    border-bottom-color: $color;
+    border-left-color: transparent;
+    border-right-color: transparent;
+  } @else if $direction == bottom {
+    border-width: #{$height} calc(#{$width} / 2) 0 calc(#{$width} / 2);
+    border-top-color: $color;
+    border-left-color: transparent;
+    border-right-color: transparent;
+  } @else if $direction == right {
+    border-width: calc(#{$height} / 2) 0 calc(#{$height} / 2) #{$width};
+    border-left-color: $color;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+  } @else if $direction == left {
+    border-width: calc(#{$height} / 2) #{$width} calc(#{$height} / 2) 0;
+    border-right-color: $color;
+    border-top-color: transparent;
+    border-bottom-color: transparent;
+  }
+}
+
+// Form validation states
+
+@mixin form-control-validation($color) {
+  color: $color;
+
+  // Color the label and help text
+  .help-block,
+  .control-label,
+  .radio,
+  .checkbox,
+  .radio-inline,
+  .checkbox-inline,
+  .form-label {
+    color: $color;
+  }
+
+  .form-control {
+    border-color: $color;
+
+    &:focus {
+      border-color: $border-active;
+    }
+  }
+
+  // Optional feedback icon
+  .form-control-feedback {
+    color: $color;
+  }
+}
+
+@mixin input-disabled-styles {
+  background-color: $input-disabled-bg;
+  border-color: $input-disabled-border-color;
+}

services/web/frontend/stylesheets/bootstrap-5/abstracts/templates-search.scss

@@ -0,0 +1 @@
+$templates-search-max-width: 885px;

services/web/frontend/stylesheets/bootstrap-5/abstracts/themes-common-variables.scss

@@ -0,0 +1,7 @@
+:root {
+  --editor-border-color: var(--neutral-80);
+}
+
+@include theme('light') {
+  --editor-border-color: var(--neutral-20);
+}

services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss

@@ -0,0 +1,284 @@
+// Overrides for Bootstrap 5's default Sass variables
+
+$prefix: bs-;
+
+// Options
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-validation-icons: false;
+$component-active-color: $white;
+
+// Fonts
+$font-family-sans-serif: 'Noto Sans', sans-serif;
+$font-family-serif: 'Merriweather', serif;
+$font-family-monospace: 'DM Mono', monospace;
+$font-size-base: 1rem;
+$font-size-sm: var(--font-size-02);
+$line-height-base: 1.5;
+
+// Components
+// Define common padding and border radius sizes and more.
+
+$focus-ring-width: 2px;
+$focus-ring-opacity: 1;
+$focus-ring-color: $blue-30;
+$focus-ring-blur: 0;
+
+// Buttons
+$btn-font-family: $font-family-sans-serif;
+$btn-font-weight: 600;
+$btn-padding-x: $spacing-06;
+$btn-padding-y: $spacing-02;
+$btn-border-radius: $border-radius-full;
+$btn-border-radius-lg: $border-radius-full;
+$btn-border-radius-sm: $border-radius-full;
+$btn-white-space: nowrap;
+
+// Tables
+$table-cell-padding-y: $spacing-04;
+$table-cell-padding-x: $spacing-04;
+$table-cell-padding-y-sm: $spacing-02;
+$table-cell-padding-x-sm: $spacing-02;
+$table-color: var(--content-secondary);
+$table-bg: var(--bg-light-primary);
+$table-th-font-weight: 600;
+$table-striped-color: $table-color;
+$table-striped-bg: var(--bg-light-secondary);
+$table-active-color: $table-color;
+$table-active-bg: $bg-accent-03;
+$table-hover-color: $table-color;
+$table-hover-bg: var(--bg-light-secondary);
+$table-border-color: $border-divider;
+$table-striped-order: even;
+$table-caption-color: var(--content-secondary);
+
+// Forms
+
+// form-text-variables
+$form-text-margin-top: $spacing-04;
+$form-text-font-size: var(--font-size-02);
+$form-text-color: var(--content-secondary);
+
+// form-label-variables
+$form-label-margin-bottom: $spacing-02;
+$form-label-font-size: var(--font-size-02);
+$form-label-font-weight: 600;
+$form-label-color: var(--content-secondary);
+
+// form-input-variables
+$input-padding-y: $spacing-03;
+$input-padding-x: $spacing-04;
+$input-font-size: var(--font-size-03);
+$input-line-height: 1.5; // equivalent of var(--line-height-03) - BS expects a unitless value for further calculations
+
+$input-padding-y-sm: $spacing-01;
+$input-padding-x-sm: $spacing-03;
+$input-font-size-sm: var(--font-size-02);
+$input-line-height-sm: 1.25; // equivalent of var(--line-height-02) - BS expects a unitless value for further calculations
+
+$input-padding-y-lg: $spacing-05;
+$input-padding-x-lg: $spacing-05;
+$input-font-size-lg: var(--font-size-03);
+$input-bg: $bg-light-primary;
+$input-disabled-color: var(--content-disabled);
+$input-disabled-bg: $bg-light-disabled;
+$input-disabled-border-color: var(--border-disabled);
+$input-color: $content-primary;
+$input-border-color: $neutral-60;
+$input-border-width: var(--bs-border-width);
+$input-border-radius: $border-radius-base;
+$input-border-radius-sm: $border-radius-base;
+$input-border-radius-lg: $border-radius-base;
+$input-focus-border-color: var(--border-active);
+$input-placeholder-color: var(--content-placeholder);
+$input-plaintext-color: $content-primary;
+$input-height-border: calc(
+  #{$input-border-width} * 2
+); // stylelint-disable-line function-disallowed-list
+
+$input-height: add(
+  $input-line-height * 1em,
+  add($input-padding-y * 2, $input-height-border, false)
+);
+$input-height-sm: add(
+  $input-line-height-sm * 1em,
+  add($input-padding-y-sm * 2, $input-height-border, false)
+);
+$input-height-lg: add(
+  $input-line-height * 1em,
+  add($input-padding-y-lg * 2, $input-height-border, false)
+);
+
+// form-check-variables
+$form-check-label-color: var(--content-primary);
+$form-check-input-border: var(--bs-border-width) solid var(--border-primary);
+$form-check-input-border-radius: $border-radius-base;
+$form-check-input-focus-border: var(--border-primary);
+$form-check-input-disabled-opacity: 1;
+
+// form-switch-variables
+$form-switch-width: 34px;
+$form-switch-padding-start: $spacing-03;
+$form-switch-color: $component-active-color;
+$form-switch-width: 34px;
+$form-switch-padding-start: $spacing-03;
+$form-switch-focus-color: $component-active-color;
+$form-switch-checked-color: $component-active-color;
+
+// form-group
+$form-group-margin-bottom: $spacing-06;
+
+// Form validation
+
+// form-feedback-variables
+$form-feedback-invalid-color: $bg-danger-01;
+$form-feedback-icon-invalid: null;
+$form-feedback-margin-top: 0; // Our feedback component wraps Form.Text, which takes care of top margin
+
+// form-validation-colors
+$form-invalid-color: $form-feedback-invalid-color;
+$form-invalid-border-color: $bg-danger-01;
+
+// form-validation-states
+$form-validation-states: (
+  'invalid': (
+    'color': $bg-danger-01,
+    'icon': $form-feedback-icon-invalid,
+    'tooltip-color': #fff,
+    'tooltip-bg-color': var(--bs-danger),
+    'focus-box-shadow': 0 0 $focus-ring-blur $focus-ring-width
+      rgba($red-30, $focus-ring-opacity),
+    'border-color': var(--#{$prefix}form-invalid-border-color),
+  ),
+);
+
+// Close buttons
+$btn-close-color: $content-primary;
+$btn-close-opacity: 1;
+$btn-close-width: 10px;
+
+// Colors
+$primary: $bg-accent-01;
+$secondary: $bg-light-primary;
+$success: $bg-accent-01;
+$info: $bg-info-01;
+$warning: $content-warning;
+$danger: $bg-danger-01;
+$light: $bg-light-tertiary;
+$dark: $neutral-90;
+$warning-light-gb: $bg-warning-03;
+
+// Theme colors
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'warning-light-bg': $warning-light-gb,
+  'danger': $danger,
+  'light': $light,
+  'dark': $dark,
+);
+
+// Body colors
+$body-color: $content-primary;
+$body-bg: $bg-light-primary;
+$body-secondary-color: $content-secondary;
+$body-secondary-bg: $bg-light-secondary;
+$body-tertiary-color: $content-disabled;
+$body-tertiary-bg: $bg-light-tertiary;
+
+// Badges
+$badge-font-size: var(--font-size-01);
+$badge-font-weight: var(--bs-body-font-weight);
+$badge-padding-y: $spacing-01;
+$badge-padding-x: $spacing-02;
+$badge-border-radius: $border-radius-base;
+
+// Tooltips
+$tooltip-max-width: 320px;
+$tooltip-border-radius: $border-radius-base;
+$tooltip-padding-y: $spacing-04;
+$tooltip-padding-x: $spacing-06;
+
+// Popovers
+$popover-font-size: var(--font-size-02);
+$popover-bg: var(--bg-dark-primary);
+$popover-max-width: 320px;
+$popover-border-width: 0px; /* stylelint-disable-line length-zero-no-unit */
+$popover-border-radius: var(--border-radius-base);
+$popover-header-font-size: var(--font-size-02);
+$popover-header-bg: var(--bg-dark-primary);
+$popover-header-color: var(--content-primary-dark);
+$popover-header-padding-y: var(--spacing-04);
+$popover-header-padding-x: var(--spacing-06);
+$popover-body-color: var(--content-primary-dark);
+$popover-body-padding-y: var(--spacing-04);
+$popover-body-padding-x: var(--spacing-06);
+$popover-arrow-width: var(--spacing-04);
+$popover-arrow-height: var(--spacing-02);
+$popover-arrow-color: var(--bg-dark-primary);
+
+// Links. Ideally we'd point these to CSS variables but Bootstrap performs
+// calculations on link color during compilation.
+$link-color: $link-ui;
+$link-hover-color: $link-ui-hover;
+$link-hover-decoration: none;
+
+// Headings
+$headings-font-family: $font-family-sans-serif;
+$headings-margin-bottom: $spacing-05;
+
+// Horizontal rules
+$hr-margin-y: $spacing-08;
+$hr-border-color: $border-divider;
+
+// Modals
+$modal-backdrop-bg: $bg-dark-primary;
+$modal-backdrop-opacity: 0.72;
+$modal-content-color: $content-secondary;
+$modal-content-border-color: $border-divider;
+$modal-header-padding: $spacing-05 $spacing-06;
+$modal-header-padding-x: $spacing-08;
+$modal-header-padding-y: $spacing-08;
+
+// Nav toggler
+$navbar-toggler-font-size: 30px;
+$navbar-toggler-padding-x: var(--spacing-05);
+$navbar-toggler-padding-y: var(--spacing-02);
+$navbar-toggler-border-radius: var(--border-radius-base);
+
+// Nav links
+$navbar-nav-link-padding-x: var(--navbar-btn-padding-h);
+
+// Spacing scale used by Bootstrap utilities
+$spacer: $spacing-06;
+$spacers: (
+  0: 0,
+  1: $spacing-02,
+  2: $spacing-04,
+  3: $spacing-06,
+  4: $spacing-08,
+  5: $spacing-11,
+);
+
+// Dropdowns
+$dropdown-link-disabled-color: var(--content-disabled);
+$dropdown-spacer: var(--spacing-01);
+$dropdown-border-width: 0;
+$dropdown-border-radius: var(--border-radius-base);
+$dropdown-padding-x: var(--spacing-02);
+$dropdown-padding-y: var(--spacing-02);
+$dropdown-item-padding-x: var(--spacing-04);
+$dropdown-item-padding-y: var(--spacing-04);
+$dropdown-header-color: var(--content-secondary);
+
+// Offcanvas
+$offcanvas-horizontal-width: 320px;
+$offcanvas-padding-x: 12.5px;
+$offcanvas-padding-y: 12.5px;
+$offcanvas-border-width: 0;
+
+// Code
+$code-color: $content-secondary;

services/web/frontend/stylesheets/bootstrap-5/abstracts/variables.scss

@@ -0,0 +1,14 @@
+// Header
+$header-height: 68px;
+$toolbar-height: 40px;
+$toolbar-small-height: 32px;
+
+// Footer
+$thin-footer-height: 50px;
+$fat-footer-content-height: calc(100vh - $header-height);
+$thin-footer-content-height: calc(
+  100vh - ($header-height + $thin-footer-height)
+);
+
+// List of allowed themes
+$themes: ('default', 'light');