Set sass variables with css variables to allow easy overrides

hypha/apply/funds/templates/funds/includes/review_sidebar_item.html

@@ -32,7 +32,7 @@
                         {% if reviewer.role %}{% image reviewer.role.icon max-12x12 %}{% endif %}
                     </div>
                 </a>
-                <div class="reviews-sidebar__date">{{ reviewer.review.created_at|date:"SHORT_DATE_FORMAT" }}</div>
+                <div class="milli">{{ reviewer.review.created_at|date:"SHORT_DATE_FORMAT" }}</div>
             </div>
         {% else %}
             <div class="reviews-sidebar__name">

hypha/apply/projects/templates/application_projects/includes/report_line.html

@@ -15,7 +15,7 @@
     <div class="data-block__links">
         {% if report.can_submit %}
             <a
-                class="data-block__button button button--primary"
+                class="data-block__button button button--project-action"
                 href="{% url "apply:projects:reports:edit" pk=report.pk %}"
             >
                 {% if report.draft %}{% trans "Continue Editing" %}{% else %}{% trans "Add Report" %}{% endif %}

hypha/apply/projects/templates/application_projects/partials/invoice_status_table.html

@@ -30,7 +30,7 @@
                 {% endif %}
                 {% can_change_status invoice user as can_change_invoice_status %}
                 {% if can_change_invoice_status %}
-                    <button class="data-block__button button button--primary" hx-get="{% url 'apply:projects:invoice-update' pk=invoice.project.pk invoice_pk=invoice.pk %}" hx-target="#htmx-modal">
+                    <button class="data-block__button button button--project-action" hx-get="{% url 'apply:projects:invoice-update' pk=invoice.project.pk invoice_pk=invoice.pk %}" hx-target="#htmx-modal">
                         {% trans "Update Status" %}
                     </button>
                 {% endif %}

hypha/static_src/javascript/submission-form-copy.js

@@ -16,7 +16,7 @@
     function get_questions() {
         var questions_text = [];
         var i = 1;
-        questions_text.push("# " + $(".header__title").html());
+        questions_text.push("# " + $("h1:first").html());
         $(".application-form")
             .find(".form__group, .rich-text, h2, h3")
             .each(function () {

hypha/static_src/sass/abstracts/_mixins.scss

@@ -1,5 +1,4 @@
 @use "sass:list";
-@use "sass:map";
 @use "functions";
 @use "variables";
 
@@ -23,69 +22,6 @@
     }
 }
 
-//   Placeholder text
-@mixin placeholder-text {
-    &.placeholder {
-        @content;
-    }
-    &:-moz-placeholder {
-        @content;
-    }
-    &::-moz-placeholder {
-        @content;
-    }
-    &:-ms-input-placeholder {
-        @content;
-    }
-    &::-webkit-input-placeholder {
-        @content;
-    }
-}
-
-// Hide text
-@mixin hidden {
-    position: absolute;
-    clip: rect(0 0 0 0);
-    clip-path: inset(50%);
-    height: 1px;
-    width: 1px;
-    overflow: hidden;
-    white-space: nowrap;
-}
-
-// Output a rem value for the given property
-@mixin rem($property, $values) {
-    $rem: ();
-
-    @each $value in $values {
-        @if $value == 0 or $value == auto or $value == inherit {
-            $rem: list.append($rem, $value);
-        } @else {
-            $rem: list.append(
-                $rem,
-                functions.rem(functions.strip-unit($value))
-            );
-        }
-    }
-    #{$property}: $rem;
-}
-
-// Output a `font-size: [x]rem;` declaration for the given px value
-@mixin rem-font-size($font-size) {
-    @include rem(font-size, $font-size);
-}
-
-// Font sizes
-@mixin font-size($keyword) {
-    $size: map.get(variables.$font-sizes, $keyword);
-
-    @if $size == null {
-        @warn 'Font size '#{$keyword}' does not exist';
-    } @else {
-        @include rem-font-size($size);
-    }
-}
-
 // Button mixin
 @mixin button($bg, $hover-bg) {
     padding: 0.5em 2rem;
@@ -159,7 +95,7 @@
 // @param {Direction} $direction - Triangle direction, either `top`, `right`, `bottom` or `left`
 // @param {Color} $color [currentcolor] - Triangle color
 // @param {Length} $size [1em] - Triangle size
-@mixin triangle($direction, $color: currentcolor, $size: 1em) {
+@mixin triangle($direction, $color: currentcolor, $size: 0.33rem) {
     @if not list.index(top right bottom left, $direction) {
         @error 'Direction must be either `top`, `right`, `bottom` or `left`.';
     }
@@ -203,13 +139,13 @@
 
             &.desc {
                 &::after {
-                    @include triangle(top, variables.$color--default, 5px);
+                    @include triangle(top);
                 }
             }
 
             &.asc {
                 &::after {
-                    @include triangle(bottom, variables.$color--default, 5px);
+                    @include triangle(bottom);
                 }
             }
         }

hypha/static_src/sass/abstracts/_variables.scss

@@ -1,104 +1,94 @@
-@use "sass:color";
-// stylelint-disable color-function-notation, color-no-hex, alpha-value-notation, value-keyword-case
-// Set via JS
-:root {
-    --last-listing-item-height: 0;
-}
+// Most variables are set from css variables defined in
+// tailwind/base/variables.css so they are easy to override.
+// Only variables used in media queries and calculations are defined here.
 
 // Default
-$color--white: #fff;
-$color--black: #1f2328;
-$color--light-grey: #f7f7f7;
-$color--light-mid-grey: #e8e8e8;
-$color--mid-grey: #cfcfcf;
-$color--mid-dark-grey: #919191;
-$color--dark-grey: #404041;
+$color--white: var(--color-white);
+$color--black: var(--color-black);
+$color--light-grey: var(--color-light-grey);
+$color--light-mid-grey: var(--color-light-mid-grey);
+$color--mid-grey: var(--color-mid-grey);
+$color--mid-dark-grey: var(--color-mid-dark-grey);
+$color--dark-grey: var(--color-dark-grey);
 
 // Brand
-$color--lightest-blue: #24aae1;
-$color--light-blue: #1d79a8;
-$color--light-blue-90: color.adjust($color--light-blue, $alpha: -0.9);
-$color--lighter-blue: #7ab8d4;
-$color--dark-blue: #0c72a0;
-$color--darkest-blue: #3d6bdb;
-$color--mustard: #e6ab32;
-$color--purple: #8c0bbf;
-$color--pink: #d02a85;
-$color--light-pink: #ffe1df;
-$color--light-green: #e1fae1;
-$color--cream: #f5f7e7;
-$color--tomato: #f05e54;
-$color--mint: #40c2ad;
-$color--grass: #7dc588;
-$color--ocean: #1888b1;
-$color--sky-blue: #e7f2f6;
-$color--marine: #14729a;
-$color--mist: #f3fafe;
-$color--green: #7dc558;
-$color--pastel-red: #f1a9a9;
-$color--pastel-green: #afe6af;
-$color--fog: #eff2f5;
-
-// Social
-$color--twitter: #1da6f6;
-$color--linkedin: #137ab8;
-$color--facebook: #396ab5;
+$color--lightest-blue: var(--color-lightest-blue);
+$color--light-blue: var(--color-light-blue);
+$color--light-blue-90: var(--color-light-blue-90);
+$color--lighter-blue: var(--color-lighter-blue);
+$color--dark-blue: var(--color-dark-blue);
+$color--darkest-blue: var(--color-darkest-blue);
+$color--mustard: var(--color-mustard);
+$color--purple: var(--color-purple);
+$color--dark-pink: var(--color-dark-pink);
+$color--pink: var(--color-pink);
+$color--light-pink: var(--color-light-pink);
+$color--light-green: var(--color-light-green);
+$color--cream: var(--color-cream);
+$color--dark-tomato: var(--color-dark-tomato);
+$color--tomato: var(--color-tomato);
+$color--mint: var(--color-mint);
+$color--grass: var(--color-grass);
+$color--ocean: var(--color-ocean);
+$color--sky-blue: var(--color-sky-blue);
+$color--marine: var(--color-marine);
+$color--mist: var(--color-mist);
+$color--green: var(--color-green);
+$color--pastel-red: var(--color-pastel-red);
+$color--pastel-green: var(--color-pastel-green);
 
 // Transparent
-$color--black-60: rgba(0, 0, 0, 0.6);
-$color--black-50: rgba(0, 0, 0, 0.5);
-$color--black-40: rgba(0, 0, 0, 0.4);
-$color--black-25: rgba(0, 0, 0, 0.25);
-$color--black-20: rgba(0, 0, 0, 0.2);
-$color--black-10: rgba(0, 0, 0, 0.1);
-$color--white-50: rgba(255, 255, 255, 0.5);
-$color--white-40: rgba(255, 255, 255, 0.4);
-$color--white-25: rgba(255, 255, 255, 0.25);
-$color--white-20: rgba(255, 255, 255, 0.2);
-$color--white-10: rgba(255, 255, 255, 0.1);
+$color--black-60: var(--color-black-60);
+$color--black-50: var(--color-black-50);
+$color--black-40: var(--color-black-40);
+$color--black-20: var(--color-black-20);
+$color--black-10: var(--color-black-10);
+$color--white-20: var(--color-white-20);
+$color--white-10: var(--color-white-10);
 
 // Assignment
-$color--default: $color--black;
-$color--primary: $color--light-blue;
-$color--error: $color--tomato;
-$color--correct: $color--mint;
-$color--button-disabled: $color--lighter-blue;
-
-// Fonts
-$font--primary: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI",
-    Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
-    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font--headings: $font--primary;
-
-// Font weights
-$weight--black: 800;
-$weight--bold: 700;
-$weight--semibold: 600;
-$weight--normal: 400;
-$weight--light: 200;
+$color--default: var(--color-default);
+$color--primary: var(--color-primary);
+$color--error: var(--color-error);
+$color--correct: var(--color-correct);
+$color--button-disabled: var(--color-button-disabled);
 
 // Font sizes
 $base-font-size: 16px;
-$base-font-size-large: 18px;
-$base-line-height: 24px;
-$base-line-height-large: 28px;
-$font-sizes: (
-    alpha: 36px,
-    beta: 30px,
-    gamma: 28px,
-    delta: 24px,
-    epsilon: 18px,
-    zeta: 14px,
-    milli: 12px,
-);
+$font-size--alpha: var(--font-size-alpha);
+$font-size--beta: var(--font-size-beta);
+$font-size--gamma: var(--font-size-gamma);
+$font-size--delta: var(--font-size-delta);
+$font-size--epsilon: var(--font-size-epsilon);
+$font-size--zeta: var(--font-size-zeta);
+$font-size--milli: var(--font-size-milli);
+
+// Font weights
+$weight--black: var(--weight-black);
+$weight--bold: var(--weight-bold);
+$weight--semibold: var(--weight-semibold);
+$weight--normal: var(--weight-normal);
 
 // Wrappers
-$site-width: 1280px;
-$wrapper--medium: 1020px;
-$wrapper--small: 790px;
+$site-width: var(--site-width);
+$wrapper--medium: var(--wrapper-medium);
+$wrapper--small: var(--wrapper-small);
 
 // Text line length
-$max-text-line-length: 50em;
+$max-text-line-length: var(--max-text-line-length);
+
+// Transition
+$transition: var(--transition);
+$transition--quick: var(--transition-quick);
+
+// Spacing
+$gutters: var(--gutters);
+$gutters-reverse: var(--gutters-reverse);
+$spacing: var(--spacing);
+$spacing-reverse: var(--spacing-reverse);
+
+// Dropdown height
+$dropdown-height: var(--dropdown-height);
 
 // The custom width of 465px allow the buttons to scale with the input field
 $input-box-max-width: 465px;
@@ -112,26 +102,5 @@ $breakpoints: (
     "2xl" "(min-width: 1536px)"
 );
 
-// Transition
-$transition: 0.25s ease-out;
-$quick-transition: 0.15s ease;
-$medium-transition: 0.5s ease;
-
-// Delays
-$base-delay: 30ms;
-
-// Spacing
-$mobile-gutter: 1.25rem;
-
 // Filters
 $filter-dropdown: ".select2 .select2-selection.select2-selection--single";
-
-// Dropdown height
-$dropdown-height: 45px;
-
-// Border radius
-$rounded-sm: 0.125rem;
-$rounded: 0.25rem;
-$rounded-md: 0.375rem;
-$rounded-lg: 0.5rem;
-$rounded-full: 9999px;