Conversion of User Guide to the SHH stack (#2781)

guide/style/bulma-prefers-dark/sass/elements/_all.sass

@@ -0,0 +1,13 @@
+@charset "utf-8"
+
+@import "box.sass"
+@import "button.sass"
+@import "content.sass"
+@import "form.sass"
+@import "notification.sass"
+@import "progress.sass"
+@import "table.sass"
+@import "tag.sass"
+@import "title.sass"
+
+@import "other.sass"

guide/style/bulma-prefers-dark/sass/elements/box.sass

@@ -0,0 +1,18 @@
+$box-color-dark: $text-dark !default
+$box-background-color-dark: $black !default
+$box-shadow-dark: 0 2px 3px rgba($white, 0.1), 0 0 0 1px rgba($white, 0.1) !default
+
+$box-link-hover-shadow-dark: 0 2px 3px rgba($white, 0.1), 0 0 0 1px $link-dark !default
+$box-link-active-shadow-dark: inset 0 1px 2px rgba($white, 0.2), 0 0 0 1px $link-dark !default
+
+.box
+  background-color: $box-background-color-dark
+  box-shadow: $box-shadow-dark
+  color: $box-color-dark
+
+a.box
+  &:hover,
+  &:focus
+    box-shadow: $box-link-hover-shadow-dark
+  &:active
+    box-shadow: $box-link-active-shadow-dark

guide/style/bulma-prefers-dark/sass/elements/button.sass

@@ -0,0 +1,218 @@
+$button-color-dark: $grey-lighter !default
+$button-background-color-dark: $black !default
+
+$button-border-color-dark: $grey-darker !default
+
+$button-hover-color-dark: $link-hover-dark !default
+$button-hover-border-color-dark: $link-hover-border-dark !default
+
+$button-focus-color-dark: $link-focus-dark !default
+$button-focus-border-color-dark: $link-focus-border-dark !default
+$button-focus-box-shadow-size: 0 0 0 0.125em !default
+$button-focus-box-shadow-color-dark: rgba($link-dark, 0.25) !default
+
+$button-active-color-dark: $link-active-dark !default
+$button-active-border-color-dark: $link-active-border-dark !default
+
+$button-text-color-dark: $text-dark !default
+$button-text-hover-background-color-dark: $background-dark !default
+$button-text-hover-color-dark: $text-strong-dark !default
+
+$button-disabled-background-color-dark: $black !default
+$button-disabled-border-color-dark: $grey-darker !default
+
+$button-static-color-dark: $grey !default
+$button-static-background-color-dark: $white-ter !default
+$button-static-border-color-dark: $grey-darker !default
+
+.button
+  background-color: $button-background-color-dark
+  border-color: $button-border-color-dark
+  color: $button-color-dark
+  // States
+  &:hover,
+  &.is-hovered
+    border-color: $button-hover-border-color-dark
+    color: $button-hover-color-dark
+  &:focus,
+  &.is-focused
+    border-color: $button-focus-border-color-dark
+    color: $button-focus-color-dark
+    &:not(:active)
+      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color-dark
+  &:active,
+  &.is-active
+    border-color: $button-active-border-color-dark
+    color: $button-active-color-dark
+  // Colors
+  &.is-text
+    color: $button-text-color-dark
+    &:hover,
+    &.is-hovered,
+    &:focus,
+    &.is-focused
+      background-color: $button-text-hover-background-color-dark
+      color: $button-text-hover-color-dark
+    &:active,
+    &.is-active
+      background-color: darken($button-text-hover-background-color-dark, 5%)
+      color: $button-text-hover-color-dark
+  // Colors
+  @each $name, $pair in $colors
+    $color: darken(nth($pair, 1), 10%)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      border-color: transparent
+      color: $color-invert
+      &:hover,
+      &.is-hovered
+        background-color: darken($color, 2.5%)
+        border-color: transparent
+        color: $color-invert
+      &:focus,
+      &.is-focused
+        border-color: transparent
+        color: $color-invert
+        &:not(:active)
+          box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
+      &:active,
+      &.is-active
+        background-color: darken($color, 5%)
+        border-color: transparent
+        color: $color-invert
+      &[disabled],
+      fieldset[disabled] &
+        background-color: $color
+        border-color: transparent
+        box-shadow: none
+      &.is-inverted
+        background-color: $color-invert
+        color: $color
+        &:hover
+          background-color: darken($color-invert, 5%)
+        &[disabled],
+        fieldset[disabled] &
+          background-color: $color-invert
+          border-color: transparent
+          box-shadow: none
+          color: $color
+      &.is-loading
+        &::after
+          border-color: transparent transparent $color-invert $color-invert !important
+      &.is-outlined
+        background-color: transparent
+        border-color: $color
+        color: $color
+        &:hover,
+        &:focus
+          background-color: $color
+          border-color: $color
+          color: $color-invert
+        &.is-loading
+          &::after
+            border-color: transparent transparent $color $color !important
+        &[disabled],
+        fieldset[disabled] &
+          background-color: transparent
+          border-color: $color
+          box-shadow: none
+          color: $color
+      &.is-inverted.is-outlined
+        background-color: transparent
+        border-color: $color-invert
+        color: $color-invert
+        &:hover,
+        &:focus
+          background-color: $color-invert
+          color: $color
+        &[disabled],
+        fieldset[disabled] &
+          background-color: transparent
+          border-color: $color-invert
+          box-shadow: none
+          color: $color-invert
+  // Colors Dark
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}-dark
+      background-color: $color
+      border-color: transparent
+      color: $color-invert
+      &:hover,
+      &.is-hovered
+        background-color: darken($color, 2.5%)
+        border-color: transparent
+        color: $color-invert
+      &:focus,
+      &.is-focused
+        border-color: transparent
+        color: $color-invert
+        &:not(:active)
+          box-shadow: $button-focus-box-shadow-size rgba($color, 0.25)
+      &:active,
+      &.is-active
+        background-color: darken($color, 5%)
+        border-color: transparent
+        color: $color-invert
+      &[disabled],
+      fieldset[disabled] &
+        background-color: $color
+        border-color: transparent
+        box-shadow: none
+      &.is-inverted
+        background-color: $color-invert
+        color: $color
+        &:hover
+          background-color: darken($color-invert, 5%)
+        &[disabled],
+        fieldset[disabled] &
+          background-color: $color-invert
+          border-color: transparent
+          box-shadow: none
+          color: $color
+      &.is-loading
+        &::after
+          border-color: transparent transparent $color-invert $color-invert !important
+      &.is-outlined
+        background-color: transparent
+        border-color: $color
+        color: $color
+        &:hover,
+        &:focus
+          background-color: $color
+          border-color: $color
+          color: $color-invert
+        &.is-loading
+          &::after
+            border-color: transparent transparent $color $color !important
+        &[disabled],
+        fieldset[disabled] &
+          background-color: transparent
+          border-color: $color
+          box-shadow: none
+          color: $color
+      &.is-inverted.is-outlined
+        background-color: transparent
+        border-color: $color-invert
+        color: $color-invert
+        &:hover,
+        &:focus
+          background-color: $color-invert
+          color: $color
+        &[disabled],
+        fieldset[disabled] &
+          background-color: transparent
+          border-color: $color-invert
+          box-shadow: none
+          color: $color-invert
+  // Modifiers
+  &[disabled],
+  fieldset[disabled] &
+    background-color: $button-disabled-background-color-dark
+    border-color: $button-disabled-border-color-dark
+  &.is-static
+    background-color: $button-static-background-color-dark
+    border-color: $button-static-border-color-dark
+    color: $button-static-color-dark

guide/style/bulma-prefers-dark/sass/elements/content.sass

@@ -0,0 +1,35 @@
+$content-heading-color-dark: $text-strong-dark !default
+
+$content-blockquote-background-color-dark: $background-dark !default
+$content-blockquote-border-left-dark: 5px solid $border-dark !default
+
+$content-table-cell-border-dark: 1px solid $border-dark !default
+$content-table-cell-heading-color-dark: $text-strong-dark !default
+$content-table-head-cell-color-dark: $text-strong-dark !default
+$content-table-foot-cell-color-dark: $text-strong-dark !default
+
+.content
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    color: $content-heading-color-dark
+  blockquote
+    background-color: $content-blockquote-background-color-dark
+    border-left: $content-blockquote-border-left-dark
+  table
+    td,
+    th
+      border: $content-table-cell-border-dark
+    th
+      color: $content-table-cell-heading-color-dark
+    thead
+      td,
+      th
+        color: $content-table-head-cell-color-dark
+    tfoot
+      td,
+      th
+        color: $content-table-foot-cell-color-dark

guide/style/bulma-prefers-dark/sass/elements/form.sass

@@ -0,0 +1,236 @@
+$input-color-dark: $grey-lighter !default
+$input-background-color-dark: $black !default
+$input-border-color-dark: $grey-darker !default
+$input-shadow-dark: inset 0 1px 2px rgba($white, 0.1) !default
+$input-placeholder-color-dark: rgba($input-color-dark, 0.3) !default
+
+$input-hover-color-dark: $grey-lighter !default
+$input-hover-border-color-dark: $grey-dark !default
+
+$input-focus-color-dark: $grey-lighter !default
+$input-focus-border-color-dark: $link-dark !default
+$input-focus-box-shadow-size: 0 0 0 0.125em !default
+$input-focus-box-shadow-color-dark: rgba($link-dark, 0.25) !default
+
+$input-disabled-color-dark: $text-dark !default
+$input-disabled-background-color-dark: $background-dark !default
+$input-disabled-border-color-dark: $background-dark !default
+$input-disabled-placeholder-color-dark: rgba($input-disabled-color-dark, 0.3) !default
+
+$input-arrow-dark: $link-dark !default
+
+$input-icon-color-dark: $grey-darker !default
+
+$file-border-color-dark: $border-dark !default
+
+$file-cta-background-color-dark: $black-ter !default
+$file-cta-color-dark: $grey-light !default
+$file-cta-hover-color-dark: $grey-lighter !default
+$file-cta-active-color-dark: $grey-lighter !default
+
+$file-name-border-color-dark: $border-dark !default
+
+$label-color-dark: $grey-lighter !default
+
+=input
+  background-color: $input-background-color-dark
+  border-color: $input-border-color-dark
+  color: $input-color-dark
+  +placeholder
+    color: $input-placeholder-color-dark
+  &:hover,
+  &.is-hovered
+    border-color: $input-hover-border-color-dark
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active
+    border-color: $input-focus-border-color-dark
+    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color-dark
+  &[disabled],
+  fieldset[disabled] &
+    background-color: $input-disabled-background-color-dark
+    border-color: $input-disabled-border-color-dark
+    color: $input-disabled-color-dark
+    +placeholder
+      color: $input-disabled-placeholder-color-dark
+
+.input,
+.textarea
+  +input
+  box-shadow: $input-shadow-dark
+  // Colors
+  @each $name, $pair in $colors
+    $color: darken(nth($pair, 1), 10%)
+    &.is-#{$name}
+      border-color: $color
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active
+        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+  // Colors Dark
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}-dark
+      border-color: $color
+      &:focus,
+      &.is-focused,
+      &:active,
+      &.is-active
+        box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+
+.checkbox,
+.radio
+  &:hover
+    color: $input-hover-color-dark
+  &[disabled],
+  fieldset[disabled] &
+    color: $input-disabled-color-dark
+
+.select
+  &:not(.is-multiple):not(.is-loading)
+    &::after
+      border-color: $input-arrow-dark
+  select
+    +input
+    &[disabled]:hover,
+    fieldset[disabled] &:hover
+      border-color: $input-disabled-border-color-dark
+    option
+      color: $input-color-dark
+  // States
+  &:not(.is-multiple):not(.is-loading):hover
+    &::after
+      border-color: $input-hover-color-dark
+  // Colors
+  @each $name, $pair in $colors
+    $color: darken(nth($pair, 1), 10%)
+    &.is-#{$name}
+      &:not(:hover)::after
+        border-color: $color
+      select
+        border-color: $color
+        &:hover,
+        &.is-hovered
+          border-color: darken($color, 5%)
+        &:focus,
+        &.is-focused,
+        &:active,
+        &.is-active
+          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+  // Colors Dark
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}-dark
+      &:not(:hover)::after
+        border-color: $color
+      select
+        border-color: $color
+        &:hover,
+        &.is-hovered
+          border-color: darken($color, 5%)
+        &:focus,
+        &.is-focused,
+        &:active,
+        &.is-active
+          box-shadow: $input-focus-box-shadow-size rgba($color, 0.25)
+  // Modifiers
+  &.is-disabled
+    &::after
+      border-color: $input-disabled-color-dark
+
+.file
+  // Colors
+  @each $name, $pair in $colors
+    $color: darken(nth($pair, 1), 10%)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      .file-cta
+        background-color: $color
+        color: $color-invert
+      &:hover,
+      &.is-hovered
+        .file-cta
+          background-color: darken($color, 2.5%)
+          color: $color-invert
+      &:focus,
+      &.is-focused
+        .file-cta
+          box-shadow: 0 0 0.5em rgba($color, 0.25)
+          color: $color-invert
+      &:active,
+      &.is-active
+        .file-cta
+          background-color: darken($color, 5%)
+          color: $color-invert
+  // Colors Dark
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}-dark
+      .file-cta
+        background-color: $color
+        color: $color-invert
+      &:hover,
+      &.is-hovered
+        .file-cta
+          background-color: darken($color, 2.5%)
+          color: $color-invert
+      &:focus,
+      &.is-focused
+        .file-cta
+          box-shadow: 0 0 0.5em rgba($color, 0.25)
+          color: $color-invert
+      &:active,
+      &.is-active
+        .file-cta
+          background-color: darken($color, 5%)
+          color: $color-invert
+
+.file-label
+  &:hover
+    .file-cta
+      background-color: darken($file-cta-background-color-dark, 2.5%)
+      color: $file-cta-hover-color-dark
+    .file-name
+      border-color: darken($file-name-border-color-dark, 2.5%)
+  &:active
+    .file-cta
+      background-color: darken($file-cta-background-color-dark, 5%)
+      color: $file-cta-active-color-dark
+    .file-name
+      border-color: darken($file-name-border-color-dark, 5%)
+
+.file-cta,
+.file-name
+  border-color: $file-border-color-dark
+
+.file-cta
+  background-color: $file-cta-background-color-dark
+  color: $file-cta-color-dark
+
+.file-name
+  border-color: $file-name-border-color-dark
+
+.label
+  color: $label-color-dark
+
+.help
+  @each $name, $pair in $colors
+    $color: darken(nth($pair, 1), 10%)
+    &.is-#{$name}
+      color: $color
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}-dark
+      color: $color
+
+// Containers
+
+.control
+  // Modifiers
+  &.has-icons-left,
+  &.has-icons-right
+    .icon
+      color: $input-icon-color-dark

guide/style/bulma-prefers-dark/sass/elements/notification.sass

@@ -0,0 +1,21 @@
+$notification-background-color-dark: $background-dark !default
+
+.notification
+  background-color: $notification-background-color-dark
+  code,
+  pre
+    background: $black
+  // Colors
+  @each $name, $pair in $colors
+    $color: darken(nth($pair, 1), 10%)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+  // Colors Dark
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}-dark
+      background-color: $color
+      color: $color-invert

guide/style/bulma-prefers-dark/sass/elements/other.sass

@@ -0,0 +1,2 @@
+.number
+  background-color: $background-dark

guide/style/bulma-prefers-dark/sass/elements/progress.sass

@@ -0,0 +1,39 @@
+$progress-bar-background-color-dark: $border-dark !default
+$progress-value-background-color-dark: $text-dark !default
+
+.progress
+  &::-webkit-progress-bar
+    background-color: $progress-bar-background-color-dark
+  &::-webkit-progress-value
+    background-color: $progress-value-background-color-dark
+  &::-moz-progress-bar
+    background-color: $progress-value-background-color-dark
+  &::-ms-fill
+    background-color: $progress-value-background-color-dark
+  &:indeterminate
+    background-color: $progress-bar-background-color-dark
+    background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color-dark 30%)
+  // Colors
+  @each $name, $pair in $colors
+    $color: darken(nth($pair, 1), 10%)
+    &.is-#{$name}
+      &::-webkit-progress-value
+        background-color: $color
+      &::-moz-progress-bar
+        background-color: $color
+      &::-ms-fill
+        background-color: $color
+      &:indeterminate
+        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color-dark 30%)
+  // Colors Dark
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    &.is-#{$name}-dark
+      &::-webkit-progress-value
+        background-color: $color
+      &::-moz-progress-bar
+        background-color: $color
+      &::-ms-fill
+        background-color: $color
+      &:indeterminate
+        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color-dark 30%)

guide/style/bulma-prefers-dark/sass/elements/table.sass

@@ -0,0 +1,78 @@
+$table-color-dark: $grey-lighter !default
+$table-background-color-dark: $black !default
+
+$table-cell-border-dark: 1px solid $grey-darker !default
+$table-cell-heading-color-dark: $text-strong-dark !default
+
+$table-head-cell-color-dark: $text-strong-dark !default
+$table-foot-cell-color-dark: $text-strong-dark !default
+
+$table-row-hover-background-color-dark: $black-bis !default
+
+$table-row-active-background-color-dark: $primary-dark !default
+$table-row-active-color-dark: $primary-invert-dark !default
+
+$table-striped-row-even-background-color-dark: $black-bis !default
+$table-striped-row-even-hover-background-color-dark: $black-ter !default
+
+.table
+  background-color: $table-background-color-dark
+  color: $table-color-dark
+  td,
+  th
+    border: $table-cell-border-dark
+    // Colors
+    @each $name, $pair in $colors
+      $color: darken(nth($pair, 1), 10%)
+      $color-invert: nth($pair, 2)
+      &.is-#{$name}
+        background-color: $color
+        border-color: $color
+        color: $color-invert
+    // Colors Dark
+    @each $name, $pair in $colors
+      $color: nth($pair, 1)
+      $color-invert: nth($pair, 2)
+      &.is-#{$name}-dark
+        background-color: $color
+        border-color: $color
+        color: $color-invert
+    // Modifiers
+    &.is-selected
+      background-color: $table-row-active-background-color-dark
+      color: $table-row-active-color-dark
+  th
+    color: $table-cell-heading-color-dark
+  tr
+    &.is-selected
+      background-color: $table-row-active-background-color-dark
+      color: $table-row-active-color-dark
+      td,
+      th
+        border-color: $table-row-active-color-dark
+  thead
+    td,
+    th
+      color: $table-head-cell-color-dark
+  tfoot
+    td,
+    th
+      color: $table-foot-cell-color-dark
+  // Modifiers
+  &.is-hoverable
+    tbody
+      tr:not(.is-selected)
+        &:hover
+          background-color: $table-row-hover-background-color-dark
+    &.is-striped
+      tbody
+        tr:not(.is-selected)
+          &:hover
+            background-color: $table-row-hover-background-color-dark
+            &:nth-child(even)
+              background-color: $table-striped-row-even-hover-background-color-dark
+  &.is-striped
+    tbody
+      tr:not(.is-selected)
+        &:nth-child(even)
+          background-color: $table-striped-row-even-background-color-dark

guide/style/bulma-prefers-dark/sass/elements/tag.sass

@@ -0,0 +1,27 @@
+$tag-background-color-dark: $background-dark !default
+$tag-color-dark: $text-dark !default
+
+.tag:not(body)
+  background-color: $tag-background-color-dark
+  color: $tag-color-dark
+  // Colors
+  @each $name, $pair in $colors
+    $color: darken(nth($pair, 1), 10%)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}
+      background-color: $color
+      color: $color-invert
+  // Colors Dark
+  @each $name, $pair in $colors
+    $color: nth($pair, 1)
+    $color-invert: nth($pair, 2)
+    &.is-#{$name}-dark
+      background-color: $color
+      color: $color-invert
+  // Modifiers
+  &.is-delete
+    &:hover,
+    &:focus
+      background-color: darken($tag-background-color-dark, 5%)
+    &:active
+      background-color: darken($tag-background-color-dark, 10%)

guide/style/bulma-prefers-dark/sass/elements/title.sass

@@ -0,0 +1,12 @@
+$title-color-dark: $grey-lighter !default
+
+$subtitle-color-dark: $grey-light !default
+$subtitle-strong-color-dark: $grey-lighter !default
+
+.title
+  color: $title-color-dark
+
+.subtitle
+  color: $subtitle-color-dark
+  strong
+    color: $subtitle-strong-color-dark