From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 19 Oct 2019 15:26:04 +0000 (-0400)
Subject: Add colored tags
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fheads%2Fdocs-cssvar;p=thirdparty%2Fbulma.git

Add colored tags
---

diff --git a/docs/bulma-cssvar.sass b/docs/bulma-cssvar.sass
index a2ec33b7c..463cacf87 100644
--- a/docs/bulma-cssvar.sass
+++ b/docs/bulma-cssvar.sass
@@ -23,7 +23,7 @@ $prefix: "bulma-"
     @return change-color($color, $lightness: max($base-l, $target-l))
   @return var(--#{$prefix}text-strong)
 
-$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger, "light": $white-ter, "dark": $grey-darker)
+$cssvar-colors: ("primary": $primary, "link": $link, "info": $info, "success": $success, "warning": $warning, "danger": $danger)
 
 @function getCssVariable($color, $name)
   $hue: hue($color)
diff --git a/docs/bulma-cssvar.scss b/docs/bulma-cssvar.scss
deleted file mode 100644
index 3947d2260..000000000
--- a/docs/bulma-cssvar.scss
+++ /dev/null
@@ -1,176 +0,0 @@
-$prefix: "bulma-";
-
-@function findCSSVarColorInvert($color) {
-  @if (colorLuminance($color) > 0.55) {
-    @return var(--#{$prefix}black-transparent);
-  } @else {
-    @return var(--#{$prefix}white);
-  }
-}
-
-@function findCSSVarLightColor($color) {
-  @if (type-of($color) == 'color') {
-    $l: 96%;
-    @if lightness($color) > 96% {
-      $l: lightness($color);
-    }
-    @return change-color($color, $lightness: $l);
-  }
-  @return var(--#{$prefix}background);
-}
-
-@function findCSSVarDarkColor($color) {
-  @if (type-of($color) == 'color') {
-    $base-l: 29%;
-    $luminance: colorLuminance($color);
-    $luminance-delta: (0.53 - $luminance);
-    $target-l: round($base-l + ($luminance-delta * 53));
-    @return change-color($color, $lightness: max($base-l, $target-l));
-  }
-  @return var(--#{$prefix}text-strong);
-}
-
-$cssvar-colors: (
-  "primary": $primary,
-  "link": $link,
-  "info": $info,
-  "success": $success,
-  "warning": $warning,
-  "danger": $danger,
-  "light": $white-ter,
-  "dark": $grey-darker
-);
-
-@function getCssVariable($color, $name) {
-  $hue: hue($color);
-  $saturation: saturation($color);
-  $lightness: lightness($color);
-  $alpha: alpha($color);
-
-  @return $hue, $saturation, $lightness;
-}
-
-@mixin cssvar($name, $color) {
-  $hue: hue($color);
-  $saturation: saturation($color);
-  $lightness: lightness($color);
-  $base: "#{$prefix}#{$name}";
-
-  --#{$base}-h: #{$hue};
-  --#{$base}-s: #{$saturation};
-  --#{$base}-l: #{$lightness};
-  --#{$base}: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l)));
-  --#{$base}-hover: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 5%));
-  --#{$base}-active: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), calc(var(--#{$base}-l) - 10%));
-
-  $color-invert: findCSSVarColorInvert($color);
-  --#{$base}-invert: #{$color-invert};
-
-  $color-light: findCSSVarLightColor($color);
-  --#{$base}-light: #{$color-light};
-  --#{$base}-light-hover: #{darken($color-light, 5%)};
-  --#{$base}-light-active: #{darken($color-light, 10%)};
-
-  $color-dark: findCSSVarDarkColor($color);
-  --#{$base}-dark: #{$color-dark};
-  --#{$base}-dark-hover: #{darken($color-dark, 5%)};
-  --#{$base}-dark-active: #{darken($color-dark, 10%)};
-}
-
-:root {
-  --#{$prefix}white: #{$white};
-  --#{$prefix}black: #{$black};
-  --#{$prefix}black-transparent: #{rgba(#000, 0.7)};
-  --#{$prefix}scheme-main: #{$white};
-  --#{$prefix}scheme-main-bis: #{$white-bis};
-  --#{$prefix}scheme-main-ter: #{$white-ter};
-  --#{$prefix}scheme-invert: #{$black};
-  --#{$prefix}scheme-invert-bis: #{$black-bis};
-  --#{$prefix}scheme-invert-ter: #{$black-ter};
-  --#{$prefix}background: #{$white-ter};
-  --#{$prefix}border: #{$grey-lighter};
-  --#{$prefix}border-hover: #{$grey-light};
-  --#{$prefix}border-light: #{$grey-lightest};
-  --#{$prefix}border-light-hover: #{$grey-light};
-  --#{$prefix}text: #{$grey-dark};
-  --#{$prefix}text-invert: #{findCSSVarColorInvert($text)};
-  --#{$prefix}text-light: #{$grey};
-  --#{$prefix}text-strong: #{$grey-darker};
-  --#{$prefix}code: #{$red};
-  --#{$prefix}code-background: #{$background};
-  --#{$prefix}pre: #{$text};
-  --#{$prefix}pre-background: #{$background};
-  --#{$prefix}link: #{$blue};
-  --#{$prefix}link-invert: #{findCSSVarColorInvert($link)};
-  --#{$prefix}link-light: #{findCSSVarLightColor($link)};
-  --#{$prefix}link-dark: #{findCSSVarDarkColor($link)};
-  --#{$prefix}link-visited: #{$purple};
-  --#{$prefix}link-hover: #{$grey-darker};
-  --#{$prefix}link-hover-border: #{$grey-light};
-  --#{$prefix}link-focus: #{$grey-darker};
-  --#{$prefix}link-focus-border: #{$blue};
-  --#{$prefix}link-active: #{$grey-darker};
-  --#{$prefix}link-active-border: #{$grey-dark};
-
-  @each $name, $color in $cssvar-colors {
-    @include cssvar($name, $color);
-  }
-}
-
-$white: var(--#{$prefix}white);
-$black: var(--#{$prefix}black);
-$black-transparent: var(--#{$prefix}black-transparent);
-$scheme-main: var(--#{$prefix}scheme-main);
-$scheme-main-bis: var(--#{$prefix}scheme-main-bis);
-$scheme-main-ter: var(--#{$prefix}scheme-main-ter);
-$scheme-invert: var(--#{$prefix}scheme-invert);
-$scheme-invert-bis: var(--#{$prefix}scheme-invert-bis);
-$scheme-invert-ter: var(--#{$prefix}scheme-invert-ter);
-$background: var(--#{$prefix}background);
-$border: var(--#{$prefix}border);
-$border-hover: var(--#{$prefix}border-hover);
-$border-light: var(--#{$prefix}border-light);
-$border-light-hover: var(--#{$prefix}border-light-hover);
-$text: var(--#{$prefix}text);
-$text-invert: var(--#{$prefix}text-invert);
-$text-light: var(--#{$prefix}text-light);
-$text-strong: var(--#{$prefix}text-strong);
-$code: var(--#{$prefix}code);
-$code-background: var(--#{$prefix}code-background);
-$pre: var(--#{$prefix}pre);
-$pre-background: var(--#{$prefix}pre-background);
-$link: var(--#{$prefix}link);
-$link-invert: var(--#{$prefix}link-invert);
-$link-light: var(--#{$prefix}link-light);
-$link-dark: var(--#{$prefix}link-dark);
-$link-visited: var(--#{$prefix}link-visited);
-$link-hover: var(--#{$prefix}link-hover);
-$link-hover-border: var(--#{$prefix}link-hover-border);
-$link-focus: var(--#{$prefix}link-focus);
-$link-focus-border: var(--#{$prefix}link-focus-border);
-$link-active: var(--#{$prefix}link-active);
-$link-active-border: var(--#{$prefix}link-active-border);
-
-html {
-  background-color: $scheme-main;
-}
-
-body {
-  color: $text;
-}
-
-a {
-  color: $link;
-  &:hover {
-    color: $link-hover;
-  }
-}
-
-code {
-  background-color: $code-background;
-  color: $code;
-}
-
-hr {
-  background-color: $hr-background-color;
-}
diff --git a/docs/bulma-dark.sass b/docs/bulma-dark.sass
index 4a1f301ba..d3c3c27e4 100644
--- a/docs/bulma-dark.sass
+++ b/docs/bulma-dark.sass
@@ -142,6 +142,35 @@
       box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link
     &:active
       box-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link
+  .delete
+    background-color: rgba($scheme-invert, 0.2)
+    &::before,
+    &::after
+      background-color: $scheme-main
+    &:hover,
+    &:focus
+      background-color: rgba($scheme-invert, 0.3)
+    &:active
+      background-color: rgba($scheme-invert, 0.4)
+  .notification
+    background-color: $background
+  .progress
+    &::-webkit-progress-bar
+      background-color: $border-light
+    &::-webkit-progress-value
+      background-color: $text
+    &::-moz-progress-bar
+      background-color: $text
+    &::-ms-fill
+      background-color: $text
+    @each $name, $pair in $colors
+      $color: nth($pair, 1)
+      &.is-#{$name}
+        &:indeterminate
+          background-image: linear-gradient(to right, $color 30%, $border-light 30%)
+    &:indeterminate
+      background-color: $border-light
+      background-image: linear-gradient(to right, $text 30%, $border-light 30%)
 
 html
   background-color: var(--#{$prefix}scheme-main)
@@ -388,6 +417,90 @@ label.panel-block
   background-color: var(--#{$prefix}scheme-main)
   color: var(--#{$prefix}text)
 
+.content
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+    color: var(--#{$prefix}text-strong)
+  blockquote
+    background-color: var(--#{$prefix}background)
+    border-left-color: var(--#{$prefix}border)
+  table
+    td,
+    th
+      border-color: var(--#{$prefix}border)
+    th
+      color: var(--#{$prefix}text-strong)
+    thead
+      td,
+      th
+        color: var(--#{$prefix}text-strong)
+    tfoot
+      td,
+      th
+        color: var(--#{$prefix}text-strong)
+
+.table
+  background-color: var(--#{$prefix}scheme-main)
+  color: var(--#{$prefix}text-strong)
+  td,
+  th
+    border-color: var(--#{$prefix}border)
+    &.is-selected
+      background-color: var(--#{$prefix}primary)
+      color: var(--#{$prefix}primary-invert)
+  th
+    color: var(--#{$prefix}text-strong)
+  tr
+    &.is-selected
+      background-color: var(--#{$prefix}primary)
+      color: var(--#{$prefix}primary-invert)
+      td,
+      th
+        border-color: var(--#{$prefix}primary-invert)
+  thead
+    td,
+    th
+      color: var(--#{$prefix}text-strong)
+  tfoot
+    td,
+    th
+      color: var(--#{$prefix}text-strong)
+  &.is-hoverable
+    tbody
+      tr:not(.is-selected)
+        &:hover
+          background-color: var(--#{$prefix}scheme-main-bis)
+    &.is-striped
+      tbody
+        tr:not(.is-selected)
+          &:hover
+            background-color: var(--#{$prefix}scheme-main-bis)
+            &:nth-child(even)
+              background-color: var(--#{$prefix}scheme-main-ter)
+  &.is-striped
+    tbody
+      tr:not(.is-selected)
+        &:nth-child(even)
+          background-color: var(--#{$prefix}scheme-main-bis)
+
+.tag:not(body)
+  background-color: var(--tag-background-color) !important
+  color: var(--tag-color) !important
+  --tag-background-color: var(--#{$prefix}background)
+  --tag-color: var(--#{$prefix}text)
+  @each $name, $color in $cssvar-colors
+    $base: "#{$prefix}#{$name}"
+    &.is-#{$name}
+      --tag-background-color: var(--#{$base})
+      --tag-color: var(--#{$base}-invert)
+      &.is-light
+        --tag-background-color: hsl(var(--#{$base}-h), calc(var(--#{$base}-s)), 7%)
+        --tag-color: var(--#{$base})
+
 .title
   color: var(--#{$prefix}text-strong)
 
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index ff06acf63..9bb06c5c4 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -10886,32 +10886,6 @@ label.panel-block:hover {
   --bulma-danger-dark: #cc0f35;
   --bulma-danger-dark-hover: #b40e2f;
   --bulma-danger-dark-active: #9d0c29;
-  --bulma-light-h: 0deg;
-  --bulma-light-s: 0%;
-  --bulma-light-l: 96%;
-  --bulma-light: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l)));
-  --bulma-light-hover: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 5%));
-  --bulma-light-active: hsl(var(--bulma-light-h), calc(var(--bulma-light-s)), calc(var(--bulma-light-l) - 10%));
-  --bulma-light-invert: var(--bulma-black-transparent);
-  --bulma-light-light: whitesmoke;
-  --bulma-light-light-hover: #e8e8e8;
-  --bulma-light-light-active: #dbdbdb;
-  --bulma-light-dark: #4a4a4a;
-  --bulma-light-dark-hover: #3d3d3d;
-  --bulma-light-dark-active: #303030;
-  --bulma-dark-h: 0deg;
-  --bulma-dark-s: 0%;
-  --bulma-dark-l: 21%;
-  --bulma-dark: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l)));
-  --bulma-dark-hover: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 5%));
-  --bulma-dark-active: hsl(var(--bulma-dark-h), calc(var(--bulma-dark-s)), calc(var(--bulma-dark-l) - 10%));
-  --bulma-dark-invert: var(--bulma-white);
-  --bulma-dark-light: whitesmoke;
-  --bulma-dark-light-hover: #e8e8e8;
-  --bulma-dark-light-active: #dbdbdb;
-  --bulma-dark-dark: #8a8a8a;
-  --bulma-dark-dark-hover: #7d7d7d;
-  --bulma-dark-dark-active: #707070;
 }
 
 @media (prefers-color-scheme: light) {
@@ -11050,6 +11024,67 @@ label.panel-block:hover {
   a.box:active {
     box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.2), 0 0 0 1px #3273dc;
   }
+  .delete {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+  .delete::before, .delete::after {
+    background-color: #0a0a0a;
+  }
+  .delete:hover, .delete:focus {
+    background-color: rgba(255, 255, 255, 0.3);
+  }
+  .delete:active {
+    background-color: rgba(255, 255, 255, 0.4);
+  }
+  .notification {
+    background-color: #242424;
+  }
+  .progress::-webkit-progress-bar {
+    background-color: #363636;
+  }
+  .progress::-webkit-progress-value {
+    background-color: #b5b5b5;
+  }
+  .progress::-moz-progress-bar {
+    background-color: #b5b5b5;
+  }
+  .progress::-ms-fill {
+    background-color: #b5b5b5;
+  }
+  .progress.is-white:indeterminate {
+    background-image: linear-gradient(to right, white 30%, #363636 30%);
+  }
+  .progress.is-black:indeterminate {
+    background-image: linear-gradient(to right, #0a0a0a 30%, #363636 30%);
+  }
+  .progress.is-light:indeterminate {
+    background-image: linear-gradient(to right, whitesmoke 30%, #363636 30%);
+  }
+  .progress.is-dark:indeterminate {
+    background-image: linear-gradient(to right, #363636 30%, #363636 30%);
+  }
+  .progress.is-primary:indeterminate {
+    background-image: linear-gradient(to right, #00d1b2 30%, #363636 30%);
+  }
+  .progress.is-link:indeterminate {
+    background-image: linear-gradient(to right, #3273dc 30%, #363636 30%);
+  }
+  .progress.is-info:indeterminate {
+    background-image: linear-gradient(to right, #3298dc 30%, #363636 30%);
+  }
+  .progress.is-success:indeterminate {
+    background-image: linear-gradient(to right, #48c774 30%, #363636 30%);
+  }
+  .progress.is-warning:indeterminate {
+    background-image: linear-gradient(to right, #ffdd57 30%, #363636 30%);
+  }
+  .progress.is-danger:indeterminate {
+    background-image: linear-gradient(to right, #f14668 30%, #363636 30%);
+  }
+  .progress:indeterminate {
+    background-color: #363636;
+    background-image: linear-gradient(to right, #b5b5b5 30%, #363636 30%);
+  }
 }
 
 html {
@@ -11321,6 +11356,162 @@ label.panel-block:hover {
   color: var(--bulma-text);
 }
 
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+  color: var(--bulma-text-strong);
+}
+
+.content blockquote {
+  background-color: var(--bulma-background);
+  border-left-color: var(--bulma-border);
+}
+
+.content table td,
+.content table th {
+  border-color: var(--bulma-border);
+}
+
+.content table th {
+  color: var(--bulma-text-strong);
+}
+
+.content table thead td,
+.content table thead th {
+  color: var(--bulma-text-strong);
+}
+
+.content table tfoot td,
+.content table tfoot th {
+  color: var(--bulma-text-strong);
+}
+
+.table {
+  background-color: var(--bulma-scheme-main);
+  color: var(--bulma-text-strong);
+}
+
+.table td,
+.table th {
+  border-color: var(--bulma-border);
+}
+
+.table td.is-selected,
+.table th.is-selected {
+  background-color: var(--bulma-primary);
+  color: var(--bulma-primary-invert);
+}
+
+.table th {
+  color: var(--bulma-text-strong);
+}
+
+.table tr.is-selected {
+  background-color: var(--bulma-primary);
+  color: var(--bulma-primary-invert);
+}
+
+.table tr.is-selected td,
+.table tr.is-selected th {
+  border-color: var(--bulma-primary-invert);
+}
+
+.table thead td,
+.table thead th {
+  color: var(--bulma-text-strong);
+}
+
+.table tfoot td,
+.table tfoot th {
+  color: var(--bulma-text-strong);
+}
+
+.table.is-hoverable tbody tr:not(.is-selected):hover {
+  background-color: var(--bulma-scheme-main-bis);
+}
+
+.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover {
+  background-color: var(--bulma-scheme-main-bis);
+}
+
+.table.is-hoverable.is-striped tbody tr:not(.is-selected):hover:nth-child(even) {
+  background-color: var(--bulma-scheme-main-ter);
+}
+
+.table.is-striped tbody tr:not(.is-selected):nth-child(even) {
+  background-color: var(--bulma-scheme-main-bis);
+}
+
+.tag:not(body) {
+  background-color: var(--tag-background-color) !important;
+  color: var(--tag-color) !important;
+  --tag-background-color: var(--bulma-background);
+  --tag-color: var(--bulma-text);
+}
+
+.tag:not(body).is-primary {
+  --tag-background-color: var(--bulma-primary);
+  --tag-color: var(--bulma-primary-invert);
+}
+
+.tag:not(body).is-primary.is-light {
+  --tag-background-color: hsl(var(--bulma-primary-h), calc(var(--bulma-primary-s)), 7%);
+  --tag-color: var(--bulma-primary);
+}
+
+.tag:not(body).is-link {
+  --tag-background-color: var(--bulma-link);
+  --tag-color: var(--bulma-link-invert);
+}
+
+.tag:not(body).is-link.is-light {
+  --tag-background-color: hsl(var(--bulma-link-h), calc(var(--bulma-link-s)), 7%);
+  --tag-color: var(--bulma-link);
+}
+
+.tag:not(body).is-info {
+  --tag-background-color: var(--bulma-info);
+  --tag-color: var(--bulma-info-invert);
+}
+
+.tag:not(body).is-info.is-light {
+  --tag-background-color: hsl(var(--bulma-info-h), calc(var(--bulma-info-s)), 7%);
+  --tag-color: var(--bulma-info);
+}
+
+.tag:not(body).is-success {
+  --tag-background-color: var(--bulma-success);
+  --tag-color: var(--bulma-success-invert);
+}
+
+.tag:not(body).is-success.is-light {
+  --tag-background-color: hsl(var(--bulma-success-h), calc(var(--bulma-success-s)), 7%);
+  --tag-color: var(--bulma-success);
+}
+
+.tag:not(body).is-warning {
+  --tag-background-color: var(--bulma-warning);
+  --tag-color: var(--bulma-warning-invert);
+}
+
+.tag:not(body).is-warning.is-light {
+  --tag-background-color: hsl(var(--bulma-warning-h), calc(var(--bulma-warning-s)), 7%);
+  --tag-color: var(--bulma-warning);
+}
+
+.tag:not(body).is-danger {
+  --tag-background-color: var(--bulma-danger);
+  --tag-color: var(--bulma-danger-invert);
+}
+
+.tag:not(body).is-danger.is-light {
+  --tag-background-color: hsl(var(--bulma-danger-h), calc(var(--bulma-danger-s)), 7%);
+  --tag-color: var(--bulma-danger);
+}
+
 .title {
   color: var(--bulma-text-strong);
 }