Remove the Bulma CSS Framework (#19878)

* Step one: remove bulma (#19587) * remove bulma and get app running * add back in each statments from bulma variables * remove space * address pr comments * add back copyright headedr * Step two: add back and organize relevant Bulma classes (#19664) * VAULT-14566 copy/paste bulma css for classes that it defines and we do not. * add three new helper files and move helpers.scss to a new directory called helper-classes * rename utils/colors to color_variables * integrate all bulma sizing into previous utils/spacing doc, address obvious duplicates and rename to spacing_variables. * small class name issues * clean up * comment clean up * Step three: add Bulma classes to relevant component styles (#19683) * add in bulma classes used in global-flash component * add in bulma classes used in the modal component * remaining bulma classes that can integrate into the vault css * remove replication-header.scss and replace with helper. * add bulma tabs classes to tabs component scss file * remove ui-wizard style * only do bulma explicit classes for now * add in breadcrumb styling from bulma * integrate bulma into css * remove unecessary tabs bulma styling * remove non-relevant bulma classes * remove non relevant bulma css * Step three cont. Bulma classes to component files (#19691) * return box-label to as before now that you have those bulma classes * missing modal bulma classes * add bulma class to box component * missed some bulma box classes * remove scss unecessary * add in bulma classes to icon component. * move up icon * missed modal class * clean up * size vars to icon * Step four: address core directory files (#19719) * move some basic helpers over to typography helper. * rename helpers to other * moveing generic classes to other relevant scss files. * rename generic to link * clean up * clean up * address core/box * remove hero because the class is not used anywhere. * add in level bulma css * welp forgot a file. * add in missing bulma classes into core/menu * UI/step four core files 2 (#19754) * address issue with input border and box shadow * remove the is-white class, it was being used very poorly, replaced with exisiting helpers. * organizing the forms and button core files * small amount of clean up * hot mess of colors dealing with just danger for now * removed moved over bulma classes * use helper for this one off * clean up * wip on the buttons * fix select select:: after * clean up select from bulma-classes. * clean up * clean up * small fix * Cleaning up the last of the core files (welp there's still more) (#19779) * one missing thing for level core. * replace no-underline and link-item with helper text-decoration-none * core/menu double check * handle core/message * create and add to bulma classes for core/columns * add in bulma-classes columns and column... not fun to qa later. * remove core/notification * core/progress bar * revert the hbs changes * fix over revert * Core files cont. Focus on core/form (#19794) * create input and textarea core files, move charts * remove input and textarea classes from bulma classes * remove input-hint component file, never a component * fix the mess that is help-text: * help and is-help and sub-text are a mess... * fix switch alignment issues * deal with file-name * clean file out of bulma-classes * create layout helper and move out some remaining button classes * deal with core/title * is-marginless move to helper * helper layout add to core * clean up * remove core/tables * test * Revert "test" This reverts commit e695ded. * Core files continued (#19896) * test * combine input and textarea * clean up navbar brannd * clean up the single instance delete class used on the modal and match with flight icon * add back autocomplete to component * create core/file * alphabetize file css blocks * core/checkboxes create and address * combine b-checkboxes classes and remove from core the utils * address duplicate helper * Core files continued (#19930) * clean up helper and remove duplicate class * more clean up of the other helper * fix pagination, hot mess * add radio to checkbox styling * tag to tags rename singular * container core file * finally... changing forms to one element, field * finally remove bulma-classes * cleanup * comment cleanup * add comment about pagination * Consolidating our size variables with Bulma's (#19951) * remove bulma-size variables that are duplicates of our own * remove unused is-size-xx and duplicate font weights * remove duplicate class * ahh this is madness * remove column-gap var * remove duplicate sizing of * clean up breakpoints * replace border-radius:2px for var so folks know the common border-radius * replace header-height with new spacing var * replace body-size and console-size vars with other sizing vars * clean up final of size vars * radius override things blah fixed * last size var * add back * Finish size var clean up (#19970) * remove size-small, etc. * fix size-small things * remove label unused classes * move out font-family utils * Update Color Vars (remove bulma color vars and overrides) (#20031) * remove bulma_variables file * remove duplicate helper * replace hardcoded with color vars when appropriate * broaden font-family utils * add back box-link-hover-shadow * welp * fix pagination coloring * Small fixes post var and core file work (#20035) * fix auth-login splash container * fix some splash page issues * fix status menu * fix menu-list regression * fix regression on button text-decoration * fix tag regression * fix regression on select select * fix regression on field field * regression on textarea * button focus state regression * fix inputs * fix is-outlined buttons * Remove bulma switch (#20065) * remove bulma/switch * fix disbled style * Bulma removal: starting the clean up process (#20066) * remove unused class name * add todo * wip shamir-modal-flow usage of file styling * final fix * fix message type message-body css * better match * fix a.active on popup-menu-content * VAULT-14625 fix * blah overrides overrides and oh another override * fix breadcrumb link * fixes * fix readonly state and hover on inputs.scss * fix button style issue * fix modal title spacing issue * clean up * fix switch * fix checkbox issue and pr comment * fix issue with tabs * pr comment * Bulma clean up cont. (#20119) * gotta use rem on page container... it makes a difference, can't switch to px * missing helper for background color * fix textarea with icon * can't seem to replace rem with px ;/ * fix table issues * clean up columns.scss file * fix * fix rem vs px issues * address some todos * fix todo on help is-danger * best effort for sizing var clean up * reomve duplicate * clearify * welp forgot a word * address sr-only class definition * move to helper * replaced single use class with helper and cleaned up flexbox * move to make more sense * move around layout and container * color things * things * Cleanup 🧹 (#20196) * remove carry over classes from bulma * clean up title.scss * clean up title is-5 has-top-padding-m and box.scss * clean up breadcrumbs, buttons, c&r, columns * clean up core files * clean up cont looking at component files * clean up remaining component files * fix pagination * pr comments, thank you * add in merge color helper * Remove out of scope changes (#20218) * remove out of scope changes * fix test * add changelog * remove scope creep * fix scope creep cont * qa fixes * Fixes found while QA'ing Secret Engines (#20264) * fix active tab issue for both secret and auth mounts * use helper instead of :not last on content margin which causes problems * fix missing disabled on b-checkbox * quick fix * deal with body-size issue * fix order of other helper * small fixes from qa * update comments on the core files and change desktop font size from px back to rem * missed 16px replaced with 1rem * address chelseas comments * fixes that jordan noticed * remove unstable flexbox test * test fix * rename other to general * address claires qa comments * add in missing helper must have missed in earlier merge * fix button * small small small fix
hashicorp · Apr 27, 2023 · c8f593a · c8f593a
1 parent 910559b
commit c8f593a
Show file tree

Hide file tree

Showing 128 changed files with 3,007 additions and 1,730 deletions.
diff --git a/changelog/19878.txt b/changelog/19878.txt
@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Remove the Bulma CSS framework.
+```
diff --git a/ui/app/components/modal-form/policy-template.hbs b/ui/app/components/modal-form/policy-template.hbs
@@ -1,5 +1,5 @@
 {{#if this.policy.policyType}}
-  <nav class="tabs">
+  <nav class="tabs has-bottom-margin-l">
     <ul>
       <li class={{unless this.showExamplePolicy "active"}}>
         <button

diff --git a/ui/app/styles/app.scss b/ui/app/styles/app.scss
@@ -18,13 +18,3 @@
 // Font comes from npm package: https://www.npmjs.com/package/text-security
 // We took the font we wanted and moved it into the ui/fonts folder
 @include font-face('text-security-square');
-
-.sr-only {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
diff --git a/ui/app/styles/components/action-block.scss b/ui/app/styles/components/action-block.scss
@@ -53,7 +53,7 @@
   display: flex;
   flex-wrap: wrap;
   margin: $spacing-m 0;
-  @include until($tablet) {
+  @include until($mobile) {
     display: block;
   }
 }
@@ -67,7 +67,7 @@
 
 .replication-actions-grid-item .action-block {
   width: 100%;
-  @include until($tablet) {
+  @include until($mobile) {
     height: inherit;
   }
 }
diff --git a/ui/app/styles/components/autocomplete-input.scss b/ui/app/styles/components/autocomplete-input.scss
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+.autocomplete-input {
+  background: $white !important;
+  border: 1px solid $grey-light;
+  box-sizing: border-box;
+  border-radius: 3px;
+  width: 99%;
+  padding: 4px 0;
+  margin-left: 0.5%;
+  margin-top: -4px;
+}
+
+.autocomplete-input-option {
+  padding: 12px;
+  &:hover {
+    background-color: $grey-lightest;
+    cursor: pointer;
+  }
+}
diff --git a/ui/app/styles/components/box-label.scss b/ui/app/styles/components/box-label.scss
@@ -10,7 +10,7 @@ label.box-label {
 .box-label {
   @extend .box;
   @extend .is-centered;
-  @extend .is-gapless;
+
   border-color: $grey-light;
   border-radius: 3px;
   box-shadow: $box-link-shadow;
@@ -63,6 +63,6 @@ label.box-label {
   color: $grey;
 
   .is-selected & {
-    color: $text;
+    color: $grey-darkest;
   }
 }
diff --git a/ui/app/styles/components/calendar-widget.scss b/ui/app/styles/components/calendar-widget.scss
@@ -20,27 +20,6 @@ $dark-gray: #535f73;
 .calendar-title {
   padding: $size-10 $size-8;
 }
-.calendar-widget-dropdown {
-  @extend .button;
-  @extend .is-ghost;
-  @extend .has-icon-right;
-  border: 0;
-  color: $black;
-  transition: background-color $speed;
-  width: 150px;
-
-  &:hover {
-    background-color: $ui-gray-100;
-    border: 0;
-    color: $blue;
-  }
-
-  &.is-active {
-    background-color: $ui-gray-100;
-    border: 0;
-    color: $blue;
-  }
-}
 
 .select-year {
   grid-area: select-year;
@@ -67,18 +46,18 @@ $dark-gray: #535f73;
 
   > button {
     &.is-month-list {
-      background-color: white;
+      background-color: $white;
       color: black;
       text-align: center;
-      border: 1px solid $ui-gray-200;
-      border-radius: 2px;
+      border: $light-border;
+      border-radius: $radius;
     }
     &.is-current-month {
       border: 1px solid $ui-gray-900;
     }
     &:hover {
       background-color: lighten($dark-gray, 30%);
-      color: white;
+      color: $white;
       text-align: center;
       cursor: pointer;
     }
@@ -104,7 +83,7 @@ $dark-gray: #535f73;
   grid-template-rows: 0.7fr 3fr;
   box-shadow: $box-shadow, $box-shadow-middle;
   background-color: white;
-  border-radius: 2px;
+  border-radius: $radius;
 }
 
 .calendar-widget-grid {
@@ -118,12 +97,13 @@ $dark-gray: #535f73;
 // for modal-dialog tooltips
 .calendar-tooltip {
   background-color: $ui-gray-700;
-  color: white;
+  color: $white;
   font-size: $size-8;
   padding: $size-9;
   border-radius: $radius-large;
   width: 141px;
 }
+
 .ember-modal-dialog {
   z-index: 1000;
 }
diff --git a/ui/app/styles/components/codemirror.scss b/ui/app/styles/components/codemirror.scss
@@ -36,9 +36,9 @@ $gutter-grey: #2a2f36;
 
 .cm-s-hashi-read-only {
   &.CodeMirror {
-    background-color: $grey-lighter;
+    background-color: $grey-lightest;
     border: none;
-    color: #626873;
+    color: $ui-gray-600;
     font-family: $family-monospace;
     -webkit-font-smoothing: auto;
     line-height: 1.4;

diff --git a/ui/app/styles/components/confirm.scss b/ui/app/styles/components/confirm.scss
@@ -6,7 +6,7 @@
 .confirm-wrapper {
   position: relative;
   overflow: hidden;
-  border-radius: 2px;
+  border-radius: $radius;
   box-shadow: $box-shadow, $box-shadow-middle;
 }
 
@@ -37,16 +37,16 @@
   button.link,
   a {
     background-color: $white;
-    color: $menu-item-color;
+    color: $grey-darkest;
 
     &:hover {
-      background-color: $menu-item-hover-background-color;
-      color: $menu-item-hover-color;
+      background-color: $ui-gray-050;
+      color: $ui-gray-900;
     }
 
     &.is-active {
-      background-color: $menu-item-active-background-color;
-      color: $menu-item-active-color;
+      background-color: $blue-500;
+      color: $blue;
     }
 
     &.is-destroy {
@@ -76,7 +76,7 @@
 }
 
 .confirm-action > span {
-  @include from($tablet) {
+  @include from($mobile) {
     align-items: center;
     display: flex;
   }
@@ -88,7 +88,7 @@
   .confirm-action-text:not(.is-block) {
     text-align: right;
 
-    @include until($tablet) {
+    @include until($mobile) {
       display: block;
       margin-bottom: $size-8;
       text-align: left;

diff --git a/ui/app/styles/components/console-ui-panel.scss b/ui/app/styles/components/console-ui-panel.scss
@@ -11,8 +11,8 @@
   min-height: 0;
   overflow: scroll;
   right: 0;
-  top: $header-height;
-  transition: min-height $speed ease-out, transform $speed ease-in;
+  top: 4rem;
+  transition: min-height $speed $easing, transform $speed ease-in;
   will-change: transform, min-height;
   -webkit-overflow-scrolling: touch;
   width: 100vw;
@@ -37,7 +37,7 @@
   color: $white;
   display: flex;
   flex-direction: column;
-  font-size: $body-size;
+  font-size: 14px;
   font-weight: $font-weight-semibold;
   justify-content: flex-end;
   min-height: 100%;
@@ -48,19 +48,19 @@
   p {
     background: none;
     color: inherit;
-    font-size: $body-size;
+    font-size: 14px;
     min-height: 2rem;
     padding: 0;
 
     &:not(.console-ui-command):not(.CodeMirror-line) {
-      padding-left: $console-spacing;
+      padding-left: $size-4;
     }
   }
 
   .cm-s-hashi.CodeMirror {
     background-color: rgba($black, 0.5) !important;
     font-weight: $font-weight-normal;
-    margin-left: $console-spacing;
+    margin-left: $size-4;
     padding: $size-8 $size-4;
   }
 }
@@ -108,7 +108,7 @@
 }
 
 .console-ui-alert {
-  margin-left: calc(#{$console-spacing} - 0.33rem);
+  margin-left: calc(#{$size-4} - 0.33rem);
   position: relative;
 
   svg {

diff --git a/ui/app/styles/components/control-group.scss b/ui/app/styles/components/control-group.scss
@@ -9,7 +9,7 @@
   box-shadow: $box-shadow-middle, 0 0 1px $grey-dark;
 }
 .control-group-success.is-editor {
-  background: $grey-lighter;
+  background: $grey-lightest;
 }
 
 .control-group a {
@@ -18,7 +18,7 @@
 .control-group-header {
   box-shadow: 0 0 1px currentColor;
   padding: $size-9 $size-6;
-  background: $grey-lighter;
+  background: $grey-lightest;
   color: $grey-dark;
   position: relative;
   strong {

diff --git a/ui/app/styles/components/doc-link.scss b/ui/app/styles/components/doc-link.scss
@@ -4,7 +4,7 @@
  */
 
 .doc-link {
-  color: $link;
+  color: $blue;
   text-decoration: none;
   font-weight: $font-weight-semibold;
   &:hover {

diff --git a/ui/app/styles/components/env-banner.scss b/ui/app/styles/components/env-banner.scss
@@ -5,8 +5,12 @@
 
 .env-banner {
   align-self: center;
-  border-radius: 3rem;
-  background: linear-gradient(135deg, $blue, $purple);
+  border-radius: $size-1;
+  background: linear-gradient(
+    135deg,
+    $blue,
+    hsl(271, 100%, 71%)
+  ); // only use case for purple in the app. define here instead of utils/color_var
   animation: env-banner-color-rotate 8s infinite linear alternate;
   color: $white;
   margin-top: -20px;

diff --git a/ui/app/styles/components/form-section.scss b/ui/app/styles/components/form-section.scss
@@ -6,10 +6,6 @@
 .form-section {
   padding: 1.75rem 0;
   box-shadow: 0 -1px 0 0 rgba($black, 0.1);
-
-  > p.has-padding-bottom {
-    padding-bottom: 1.5rem;
-  }
 }
 
 .field:first-child .form-section,

diff --git a/ui/app/styles/components/icon.scss b/ui/app/styles/components/icon.scss
@@ -3,6 +3,31 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
+.icon {
+  align-items: center;
+  display: inline-flex;
+  height: $size-4;
+  justify-content: center;
+  vertical-align: middle;
+  width: $size-4;
+  // override the display if .button.icon to .button's default display: inline-block. See manage namespaces icon button in the namespace picker
+  &.button {
+    display: inline-block;
+  }
+}
+
+.icon-blue {
+  color: $blue;
+}
+
+.flight-icon {
+  &.flight-icon-display-inline {
+    vertical-align: middle;
+    margin-left: $spacing-xxs;
+    margin-right: $spacing-xxs;
+  }
+}
+
 .hs-icon {
   flex: 0 0 auto;
   display: inline-flex;
@@ -39,6 +64,7 @@
   width: 24px;
   height: 24px;
 }
+
 .hs-icon-xl {
   width: 28px;
   height: 28px;
@@ -48,15 +74,3 @@
   width: 32px;
   height: 32px;
 }
-
-.flight-icon {
-  &.flight-icon-display-inline {
-    vertical-align: middle;
-    margin-left: 4px;
-    margin-right: 4px;
-  }
-}
-
-.icon-blue {
-  color: $blue;
-}