Matching Legacy Colors (#244)

* Initializing Matching_Legacy_Colors for empty Pull Request

* Initial stab at a custom Darkly theme to use TailwindCSS colors instead of Darkly's

* pretty pretty inputs

* Make all these toggles nice and pretty

* Make inputs look better, prevent sweetalert from flashbanging the user

* Various adjustments, including swap to the Inter font

* Oh yeah. That's nice right there.

* For the psychos who like light themes

* Various other adjustments

* Make dark one stage lighter

* Fix word wrap, widen min-width a bit. Juuust enough for 10-day weeks to fit on a 1280 width

* Bump from event text color from 500 to 600 on light theme --BETA

* Minor adjustments, new current day color

* Limit width of images in event modal

* bittapadding

* Various experimental adjustments

* File permissions

* Whoot

* Better number backgrounds in minimalistic view

* Fix the straggler

resources/js/calendar/calendar_season_generator.js

@@ -1124,22 +1124,62 @@ class Gradient{
 
  constructor(array){
 
- this.start = this.processHEX(array[0]);
- this.end = this.processHEX(array[1]);
+ let start = this.processHEX(array[0]);
+ let end = this.processHEX(array[1]);
 
+ this.start = this.RGBToHSL(start[0], start[1], start[2]);
+ this.end = this.RGBToHSL(end[0], end[1], end[2]);
  }
 
  colorAt(number){
-
- return this.rgbToHex(
+ return this.HSLToHex(
  Math.floor(lerp(this.start[0], this.end[0], number)),
  Math.floor(lerp(this.start[1], this.end[1], number)),
  Math.floor(lerp(this.start[2], this.end[2], number))
  )
-
  }
 
- componentToHex(c) {
+ HSLToHex(h,s,l) {
+ s /= 100;
+ l /= 100;
+
+ let c = (1 - Math.abs(2 * l - 1)) * s,
+ x = c * (1 - Math.abs((h / 60) % 2 - 1)),
+ m = l - c/2,
+ r = 0,
+ g = 0,
+ b = 0;
+
+ if (0 <= h && h < 60) {
+ r = c; g = x; b = 0;
+ } else if (60 <= h && h < 120) {
+ r = x; g = c; b = 0;
+ } else if (120 <= h && h < 180) {
+ r = 0; g = c; b = x;
+ } else if (180 <= h && h < 240) {
+ r = 0; g = x; b = c;
+ } else if (240 <= h && h < 300) {
+ r = x; g = 0; b = c;
+ } else if (300 <= h && h < 360) {
+ r = c; g = 0; b = x;
+ }
+ // Having obtained RGB, convert channels to hex
+ r = Math.round((r + m) * 255).toString(16);
+ g = Math.round((g + m) * 255).toString(16);
+ b = Math.round((b + m) * 255).toString(16);
+
+ // Prepend 0s, if necessary
+ if (r.length == 1)
+ r = "0" + r;
+ if (g.length == 1)
+ g = "0" + g;
+ if (b.length == 1)
+ b = "0" + b;
+
+ return "#" + r + g + b;
+ }
+
+ componentToHex(c) {
  let hex = c.toString(16);
  return hex.length === 1 ? "0" + hex : hex;
  }
@@ -1148,7 +1188,55 @@ class Gradient{
  return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b);
  }
 
- processHEX(val) {
+ RGBToHSL(r,g,b) {
+ // Make r, g, and b fractions of 1
+ r /= 255;
+ g /= 255;
+ b /= 255;
+
+ // Find greatest and smallest channel values
+ let cmin = Math.min(r,g,b),
+ cmax = Math.max(r,g,b),
+ delta = cmax - cmin,
+ h = 0,
+ s = 0,
+ l = 0;
+
+ // Calculate hue
+ // No difference
+ if (delta == 0)
+ h = 0;
+ // Red is max
+ else if (cmax == r)
+ h = ((g - b) / delta) % 6;
+ // Green is max
+ else if (cmax == g)
+ h = (b - r) / delta + 2;
+ // Blue is max
+ else
+ h = (r - g) / delta + 4;
+
+ h = Math.round(h * 60);
+
+ // Make negative hues positive behind 360°
+ if (h < 0)
+ h += 360;
+
+ // Calculate lightness
+ l = (cmax + cmin) / 2;
+
+ // Calculate saturation
+ s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+
+ // Multiply l and s by 100
+ s = +(s * 100).toFixed(1);
+ l = +(l * 100).toFixed(1);
+
+ return [h, s, l];
+ }
+
+
+ processHEX(val) {
 
  let stripped_val = val.replace('NaN', "FF")
 

resources/sass/_darkly-twishvars.scss

@@ -0,0 +1,164 @@
+// Darkly 4.6.1
+// Bootswatch
+
+//
+// Color system
+//
+
+$white: #fff !default;
+$gray-100: rgb(243 244 246) !default;
+$gray-200: rgb(229 231 235) !default;
+$gray-300: rgb(209 213 219) !default;
+$gray-400: rgb(156 163 175) !default;
+$gray-500: rgb(107 114 128) !default;
+$gray-600: rgb(75 85 99) !default;
+$gray-700: rgb(55 65 81) !default;
+$gray-800: rgb(31 41 55) !default;
+$gray-900: rgb(17 24 39) !default;
+$black: #000 !default;
+
+$blue: #375a7f !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #e74c3c !default;
+$orange: #fd7e14 !default;
+$yellow: #f39c12 !default;
+$green: #00bc8c !default;
+$teal: #20c997 !default;
+$cyan: #3498db !default;
+
+$primary: $blue !default;
+$secondary: $gray-700 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-500 !default;
+$dark: $gray-800 !default;
+
+$yiq-contrasted-threshold: 175 !default;
+
+// Body
+
+$body-bg: $gray-900 !default;
+$body-color: $white !default;
+
+// Links
+
+$link-color: $success !default;
+
+// Fonts
+
+// stylelint-disable-next-line value-keyword-case
+$font-family-sans-serif: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-size-base: .9375rem !default;
+$font-size-sm: $font-size-base * .88 !default;
+$h1-font-size: 3rem !default;
+$h2-font-size: 2.5rem !default;
+$h3-font-size: 2rem !default;
+$text-muted: $gray-600 !default;
+
+// Tables
+
+$table-accent-bg: $gray-800 !default;
+$table-border-color: $gray-700 !default;
+
+// Forms
+
+$input-border-color: $body-bg !default;
+$input-group-addon-color: $gray-500 !default;
+$input-group-addon-bg: $gray-700 !default;
+$custom-file-color: $gray-500 !default;
+$custom-file-border-color: $body-bg !default;
+
+// Dropdowns
+
+$dropdown-bg: $gray-900 !default;
+$dropdown-border-color: $gray-700 !default;
+$dropdown-divider-bg: $gray-700 !default;
+$dropdown-link-color: $white !default;
+$dropdown-link-hover-color: $white !default;
+$dropdown-link-hover-bg: $primary !default;
+
+// Navs
+
+$nav-link-padding-x: 2rem !default;
+$nav-link-disabled-color: $gray-500 !default;
+$nav-tabs-border-color: $gray-700 !default;
+$nav-tabs-link-hover-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
+$nav-tabs-link-active-color: $white !default;
+$nav-tabs-link-active-border-color: $nav-tabs-border-color $nav-tabs-border-color transparent !default;
+
+// Navbar
+
+$navbar-padding-y: 1rem !default;
+$navbar-dark-color: rgba($white, .6) !default;
+$navbar-dark-hover-color: $white !default;
+$navbar-light-color: rgba($gray-900, .7) !default;
+$navbar-light-hover-color: $gray-900 !default;
+$navbar-light-active-color: $gray-900 !default;
+$navbar-light-toggler-border-color: rgba($gray-900, .1) !default;
+
+// Pagination
+
+$pagination-color: $white !default;
+$pagination-bg: $success !default;
+$pagination-border-width: 0 !default;
+$pagination-border-color: transparent !default;
+$pagination-hover-color: $white !default;
+$pagination-hover-bg: lighten($success, 10%) !default;
+$pagination-hover-border-color: transparent !default;
+$pagination-active-bg: $pagination-hover-bg !default;
+$pagination-active-border-color: transparent !default;
+$pagination-disabled-color: $white !default;
+$pagination-disabled-bg: darken($success, 15%) !default;
+$pagination-disabled-border-color: transparent !default;
+
+// Jumbotron
+
+$jumbotron-bg: $gray-800 !default;
+
+// Cards
+
+$card-cap-bg: $gray-700 !default;
+$card-bg: $gray-800 !default;
+
+// Popovers
+
+$popover-bg: $gray-800 !default;
+$popover-header-bg: $gray-700 !default;
+
+// Toasts
+
+$toast-background-color: $gray-700 !default;
+$toast-header-background-color: $gray-800 !default;
+
+// Modals
+
+$modal-content-bg: $gray-800 !default;
+$modal-content-border-color: $gray-700 !default;
+$modal-header-border-color: $gray-700 !default;
+
+// Progress bars
+
+$progress-bg: $gray-700 !default;
+
+// List group
+
+$list-group-bg: $gray-800 !default;
+$list-group-border-color: $gray-700 !default;
+$list-group-hover-bg: $gray-700 !default;
+
+// Breadcrumbs
+
+$breadcrumb-bg: $gray-700 !default;
+
+// Close
+
+$close-color: $white !default;
+$close-text-shadow: none !default;
+
+// Code
+
+$pre-color: inherit !default;