tbrlpld
commented
2 years ago Do we still need any of the variables if we switch to Tailwind and the design tokens 🤔
Closed Pomax closed 8 months ago
tbrlpld
commented
2 years ago Do we still need any of the variables if we switch to Tailwind and the design tokens 🤔
tbrlpld
commented
2 years ago Here is a quick listing of all the variables definitions:
$ ag --sass '\$.*:'
source/js/components/loading-indicator/loading-indicator.scss
2: $circle-radius: 30px;
3: $dot-radius: 5px;
4: $dot-count: 3;
5: $icon-color: $blue;
36: $angle: (360 / $dot-count);
37: $base-rotation: -90;
44: $base-rotation: $base-rotation + $angle;
source/js/components/join/join.scss
5: $glyph-container: (
source/sass/variables.scss
7:$bp-xs: #{map-get($grid-breakpoints, xs)}; // < 576px. Extra small devices (portrait phones)
8:$bp-sm: #{map-get($grid-breakpoints, sm)}; // >= 576px. Small devices (landscape phones, 576px and up)
9:$bp-md: #{map-get($grid-breakpoints, md)}; // >= 768px. Medium devices (tablets)
10:$bp-lg: #{map-get($grid-breakpoints, lg)}; // >= 992px. Large devices (desktop)
11:$bp-xl: #{map-get($grid-breakpoints, xl)}; // >= 1200px. Extra large devices (large desktops)
14:$border-shadow-color: transparentize($black, 0.85);
17:$nav-full-logo-breakpoint: $bp-sm;
20:$font-family-slab-serif: "Zilla Slab", serif;
23:$button-icon-transition-speed: filter 0.2s ease-in-out;
26:$default-glyph-path: "../_images/glyphs";
source/sass/wagtail/blocks/audio-block.scss
14: $icon-size: 30px;
source/sass/wagtail/blocks/dear-internet-letter.scss
6: $breakpoint: $bp-md;
source/sass/wagtail/blocks/feature-quote.scss
5: $breakpoint: $bp-md;
source/sass/wagtail/blocks/looping-video.scss
4: $breakpoint: $bp-md;
5: $banner-height-mobile: 300px;
6: $banner-height-desktop: 480px;
7: $banner-background-z-index: 1;
8: $banner-video-control-z-index: 4;
21: $icon-size: 30px;
source/sass/global.scss
14: $list-item-vertical-margin: 0.25em;
37: $bg-pattern-height: 144px;
58: $offset-x-md: 24px;
77: $banner-min-height-mobile: 390px;
78: $banner-min-height: 480px;
source/sass/mixins/_utilities.scss
20: $offset: $grid-gutter-width / 2;
37:@mixin vertical-spacing($adjust-spacing-for-md: null) {
50:@mixin cta-anchor-position($extra-vertical-spacing: 0px) {
51: $offset: 80px;
source/sass/print.scss
2: $text-color: $black;
source/sass/components/primary-nav.scss
4: $logo-height: 28px;
6: $menu-container-padding: (
10: $primary-nav-link-padding: (
52: @mixin link-padding($v-padding: xs) {
70: $border-thickness: 6px;
79: @mixin padding-bottom($bp: sm) {
source/sass/components/select-dropdown.scss
5: $background-size: 24px;
6: $padding-x: 12px;
7: $padding-right: $padding-x * 2 + $background-size;
source/sass/components/share-button-group.scss
2: $margin: 16px;
source/sass/mofo-bootstrap/overrides/_variables.scss
4:$font-family-sans-serif: "Nunito Sans", Helvetica, Arial, sans-serif;
5:$font-family-base: $font-family-sans-serif;
7:$enable-transitions: true;
9:$body-color: $black;
10:$danger: $dark-red;
11:$dark-theme-danger: $red;
13:$input-placeholder-color: $gray-60;
14:$input-line-height: 1.25;
15:$input-line-height-sm: $input-line-height;
16:$input-line-height-lg: $input-line-height;
18:$input-btn-padding-x: 1rem;
19:$input-btn-padding-y: 0.5rem;
20:$btn-padding-y: $input-btn-padding-y;
21:$btn-padding-x: $input-btn-padding-x;
23:$btn-border-radius: 0;
24:$btn-border-radius-sm: 0;
25:$btn-border-radius-lg: 0;
26:$btn-font-weight: 700;
28:$form-check-input-margin-y: 0;
30:$card-inner-border-radius: 0;
31:$card-border-radius: 0;
32:$card-border-width: 0;
source/sass/components/blog-hero-video.scss
4: $breakpoint: $bp-md;
5: $banner-height-mobile: 300px;
6: $banner-height-desktop: 480px;
7: $banner-background-z-index: 1;
8: $banner-video-control-z-index: 4;
9: $cutoff-offset: 65px;
23: $icon-size: 30px;
source/sass/buyers-guide/variables.scss
3:$pni-primary-nav-breakpoint: $bp-sm;
4:$pni-product-breakpoint-larger: $bp-md;
8:$pni-primary-nav-container-z-index: $zindex-sticky;
source/sass/mofo-bootstrap/_colors.scss
6:$white: #ffffff;
7:$gray-05: #f2f2f2;
8:$gray-20: #cccccc;
9:$gray-40: #999999;
10:$gray-60: #666666;
11:$gray-80: #333333;
12:$black: #000000;
14:$light-red: #ffe6e8;
15:$red: #ff4f5e;
16:$dark-red: #cc0011;
18:$lightest-blue: #e7e7fc;
19:$light-blue: #b7b9fa;
20:$blue: #595cf3;
21:$dark-blue: #0d10bf;
25:$festival-dark-blue: #0e11bf;
26:$festival-purple: #8f14fb;
27:$festival-gradient: linear-gradient(
35:$pulse-pink: #ff506f;
36:$pulse-purple: #a66efd;
40:$youtube-regrets-offwhite: #f0f0f0;
41:$youtube-regrets-red: #ea0b12;
42:$youtube-regrets-lighter-red: #fd6976;
43:$youtube-regrets-light-red: #ffdcdc;
44:$youtube-regrets-dark-blue: #14141f;
45:$youtube-regrets-dark-red: #d73027;
46:$youtube-regrets-darker-red: #bd2a22;
47:$youtube-regrets-dark-gray: #696969;
51:$dear-internet-lilac: #d3d5fc;
52:$dear-internet-pink: #fff0f1;
56:$colors: (
source/sass/mozfest.scss
37: $breakpoint: $bp-md;
38: $banner-height-mobile: 400px;
39: $banner-height-desktop: 480px;
40: $banner-background-z-index: 1;
41: $banner-video-control-z-index: 2;
42: $cutoff-offset: 40px;
55: $icon-size: 50px;
157: $sticky-extra-offset: 1.5rem;
source/sass/buyers-guide/_colors.scss
3:$pni-lilac: #d3d5fc;
4:$pni-blue: #1808f2;
5:$pni-blue-purple: #4a17d4;
6:$pni-purple: #7f28b7;
7:$pni-purple-pink: #b0379b;
8:$pni-pink: #e4487d;
9:$pni-gradient: linear-gradient(to right, $pni-blue 0%, $pni-pink 100%);
10:$pni-warning-yellow: #fbd545;
12:$pni-product-list-background: #f5f5f5; /* keep this #f5f5f5 as this is the background colour product images on Homepage have */
13:$pni-product-image-background: #f4f4f4; /* keep this #f4f4f4 as this is the background colour product images on Product Page have */
17:$pni-colors: (
source/sass/buyers-guide/mixins.scss
7: $width-desktop: null,
8: $height-desktop: null
31: $width-desktop: null,
32: $height-desktop: null
52: $icon-width: 18px;
source/sass/buyers-guide/views/product.scss
365: $icon-size: 24px;
407: $criterion-padding-y: 1.5rem;
408: $criterion-no-border-padding-y: 0.75rem;
434: $ding-width: 29px;
435: $ding-height: 27px;
source/sass/buyers-guide/views/catalog.scss
2: $hero-breakpoint: $bp-lg;
3: $breakpoint: $bp-md;
200: @mixin product-box-size($box-margin: 1px, $items-per-row: 2) {
201: $num-of-gutter: $items-per-row;
202: $gutter-width: $box-margin * 2;
203: $row-total-gutter-width: $gutter-width * $num-of-gutter;
211: $padding-x: 12px;
212: $padding-y: 12px;
213: $privacy-ding-width: 30px;
214: $privacy-ding-height: 25px;
215: $recommendation-width: 17px;
216: $recommendation-height: 15.8px;
246: $badge-spacing: 0.5rem;
413: $face-dimension-mobile: 46px;
414: $face-dimension: 70px;
415: $scale-down-ratio: $face-dimension-mobile/$face-dimension;
source/sass/views/youtube-regrets-2022.scss
4: $font-zilla: "Zilla Slab", sans-serif;
source/sass/views/youtube-regrets-2021-carousel.scss
2: $root: &;
source/sass/views/youtube-regrets-reporter.scss
2: $font-changa: "Changa", sans-serif;
57: $color: $white;
291: $button-right-offset: 20px;
292: $button-width: 40px;
308: $totoal-num-items: 10;
309: $padding-left: 30px;
310: $padding-right: $padding-left + $button-right-offset + $button-width;
320: $item-width: calc(
345: $pointer-height: 1.5rem;
346: $pointer-radius: 4.5px;
347: $padding-top: 0.5rem;
368: $border-thickness: 1px;
423: $icon-width: 50px;
source/sass/views/article.scss
324:@media (max-width: $bp-xl) and (min-width: $bp-md) {
source/sass/views/shared/sticky-cta.scss
5: $sticky-cta-z-index: calc(#{$zindex-sticky} - 1);
source/sass/views/youtube-regrets-2021-carousel-hero.scss
2: $root: &;
source/sass/views/youtube-regrets-shared.scss
4: $font-changa: "Changa", sans-serif;
5: $font-nunito: "Nunito Sans", sans-serif;
6: $font-zilla: "Zilla Slab", sans-serif;
source/sass/views/dear-internet.scss
2: $breakpoint: $bp-md;
117: $animation-duration: 5;
source/sass/views/home.scss
69: $vertical-spacing: 1.5rem;
103: @media screen and (max-width: $bp-lg) and (min-width: $bp-md) {
115: $icon-height: 41px;
116: $icon-width: 49px;
117: $icon-margin-bottom: 1.5rem;
191: $border-thickness: 4px;
source/sass/views/youtube-regrets-intro.scss
29: $breakpoint: $bp-sm;
209: $breakpoint: $bp-lg;
source/sass/views/youtube-regrets-2021.scss
2: $font-changa: "Changa", sans-serif;
3: $font-nunito: "Nunito Sans", sans-serif;
4: $font-zilla: "Zilla Slab", sans-serif;
49: $icon-width: 50px;@fessehaye What do you think about this one? Is this still needed?
simont-cr
commented
8 months ago Closing as obsolete issue as part of 2024 Clean-up.
we have a lot of SASS variables that can be turned into plain CSS variables instead ($blah vs. --blah), which means they'd stay variables once loaded by the browser (unlike SASS, which are only variables until compiled into final CSS form). Let's figure out how many of these we can turn into true CSS variables so that they work no matter which CSS precompiler/framework we use.