From 15b151c29eaaa6150833adaaa625ae03cee0c759 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 22 Jul 2021 14:07:16 -0700
Subject: [PATCH 1/5] LPS-136427 Leverage Clay CSS for some custom properties

---
 .../src/css/_clay_variables.scss              | 610 +++++++++++++++++-
 .../_custom_properties_set.scss               | 261 +-------
 .../_custom_properties_variables.scss         | 144 ++---
 3 files changed, 671 insertions(+), 344 deletions(-)

diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/_clay_variables.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/_clay_variables.scss
index aa4bf23300e4d9..60ea2e92972499 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/_clay_variables.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/_clay_variables.scss
@@ -1,4 +1,606 @@
-$border-color: #f1f2f5; // $light
-$input-bg: #f1f2f5; // $light
-$lead-font-weight: 400;
-$small-font-size: 0.875rem;
+@function getDefault($var) {
+	@if (type-of($var) == string and str-slice($var, 1, 3) == 'var') {
+		@return str-slice($var, str-index($var, ',') + 2, str-length($var) - 1);
+	}
+
+	@return $var;
+}
+
+// POC
+
+$clay-unset: clay-unset !default;
+
+// An alias for `$clay-unset`
+
+$c-unset: $clay-unset !default;
+
+$clay-unset-placeholder: clay-unset-placeholder !default;
+
+$enable-lexicon-flat-colors: true !default;
+$enable-scaling-components: true !default;
+$enable-c-inner: true !default;
+$scaling-breakpoint-down: sm !default;
+
+$enable-caret: false !default;
+$enable-rounded: true !default;
+$enable-shadows: true !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-prefers-reduced-motion-media-query: true !default;
+$enable-grid-classes: true !default;
+$enable-pointer-cursor-for-buttons: true !default;
+$enable-print-styles: true !default;
+$enable-responsive-font-sizes: false !default;
+$enable-validation-icons: true !default;
+$enable-deprecation-messages: true !default;
+
+// Deprecated, no longer affects any compiled CSS
+
+$enable-hover-media-query: false !default;
+
+// Theme Base Colors
+
+$white: #fff !default;
+$gray-100: #f7f8f9 !default;
+$gray-200: #f1f2f5 !default;
+$gray-300: #e7e7ed !default;
+$gray-400: #cdced9 !default;
+$gray-500: #a7a9bc !default;
+$gray-600: #6b6c7e !default;
+$gray-700: #495057 !default;
+$gray-800: #393a4a !default;
+$gray-900: #272833 !default;
+$black: #000 !default;
+
+$blue: if($enable-lexicon-flat-colors, #4b9fff, #0b5fff) !default;
+$indigo: if($enable-lexicon-flat-colors, #7785ff, #6610f2) !default;
+$purple: if($enable-lexicon-flat-colors, #af78ff, #6f42c1) !default;
+$pink: if($enable-lexicon-flat-colors, #ff73c3, #e83e8c) !default;
+$red: if($enable-lexicon-flat-colors, #ff5f5f, #da1414) !default;
+$orange: if($enable-lexicon-flat-colors, #ffb46e, #b95000) !default;
+$yellow: if($enable-lexicon-flat-colors, #ffd76e, #ffc107) !default;
+$green: if($enable-lexicon-flat-colors, #9be169, #287d3d) !default;
+$teal: if($enable-lexicon-flat-colors, #50d2a0, #20c997) !default;
+$cyan: if($enable-lexicon-flat-colors, #5fc8ff, #17a2b8) !default;
+
+$primary: #0b5fff !default;
+$primary-d1: darken($primary, 5.1) !default;
+$primary-d2: darken($primary, 10) !default;
+$primary-l1: lighten($primary, 22.94) !default;
+$primary-l2: lighten($primary, 32.94) !default;
+$primary-l3: lighten($primary, 44.9) !default;
+
+$secondary: #6b6c7e !default;
+$secondary-d1: darken(saturate($secondary, 4.82), 20) !default;
+$secondary-d2: darken(saturate($secondary, 5.36), 23.92) !default;
+$secondary-l1: lighten(
+	saturate(adjust-hue($secondary, -3), 5.39),
+	23.92
+) !default;
+$secondary-l2: lighten(
+	saturate(adjust-hue($secondary, -2), 5.48),
+	37.06
+) !default;
+$secondary-l3: lighten(
+	saturate(adjust-hue($secondary, 3), 6.13),
+	46.08
+) !default;
+
+$info: #2e5aac !default;
+$info-d1: darken($info, 5) !default;
+$info-d2: darken($info, 10) !default;
+$info-l1: lighten(saturate($info, 0.59), 28.04) !default;
+$info-l2: lighten(desaturate($info, 3.25), 52.94) !default;
+
+$success: #287d3c !default;
+$success-d1: darken($success, 5) !default;
+$success-d2: darken($success, 10) !default;
+$success-l1: lighten(desaturate($success, 0.14), 24.95) !default;
+$success-l2: lighten(desaturate($success, 1.52), 62.94) !default;
+
+$warning: #b95000 !default;
+$warning-d1: darken($warning, 5.1) !default;
+$warning-d2: darken($warning, 10) !default;
+$warning-l1: lighten($warning, 24.9) !default;
+$warning-l2: lighten($warning, 60) !default;
+
+$danger: #da1414 !default;
+$danger-d1: darken($danger, 5) !default;
+$danger-d2: darken($danger, 10) !default;
+$danger-l1: lighten(desaturate($danger, 0.25), 28.04) !default;
+$danger-l2: lighten(saturate($danger, 5.04), 50) !default;
+
+$light: #f1f2f5 !default;
+$light-d1: darken($light, 5.1) !default;
+$light-d2: darken($light, 10) !default;
+$light-l1: lighten(desaturate(adjust-hue($light, -15), 2.38), 1.96) !default;
+$light-l2: lighten(desaturate(adjust-hue($light, -225), 16.67), 4.71) !default;
+
+$dark: #272833 !default;
+$dark-d1: darken($dark, 5.1) !default;
+$dark-d2: darken($dark, 10) !default;
+$dark-l1: lighten(saturate($dark, 0.18), 4.12) !default;
+$dark-l2: lighten(desaturate($dark, 0.36), 8.04) !default;
+
+$theme-colors: () !default;
+$theme-colors: map-deep-merge(
+	(
+		primary: $primary,
+		secondary: $secondary,
+		success: $success,
+		info: $info,
+		warning: $warning,
+		danger: $danger,
+		light: $light,
+		dark: $dark,
+	),
+	$theme-colors
+);
+
+// Set a specific jump point for requesting color jumps
+
+$theme-color-interval: 8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+
+$yiq-contrasted-threshold: 150 !default;
+
+$yiq-text-dark: $gray-900 !default;
+$yiq-text-light: $white !default;
+
+// Spacing
+
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-deep-merge(
+	(
+		0: var(--spacer-0, 0),
+		1: var(--spacer-1, $spacer * 0.25),
+		2: var(--spacer-2, $spacer * 0.5),
+		3: var(--spacer-3, $spacer * 1),
+		4: var(--spacer-4, $spacer * 1.5),
+		5: var(--spacer-5, $spacer * 3),
+		6: var(--spacer-6, $spacer * 4.5),
+		7: var(--spacer-7, $spacer * 6),
+		8: var(--spacer-8, $spacer * 7.5),
+		9: var(--spacer-9, $spacer * 9),
+		10: var(--spacer-10, $spacer * 10),
+	),
+	$spacers
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+
+$sizes: () !default;
+$sizes: map-merge(
+	(
+		25: 25%,
+		50: 50%,
+		75: 75%,
+		100: 100%,
+		auto: auto,
+	),
+	$sizes
+);
+
+// Reusable Values
+
+$line-height-lg: 1.5 !default;
+$line-height-sm: 1.5 !default;
+
+$line-height-base: 1.5 !default;
+
+$border-color: $gray-300 !default;
+$border-width: 0.0625rem !default;
+
+$border-radius: 0.25rem !default; // 4px
+$border-radius-lg: var(--border-radius-lg, 0.375rem) !default; // 6px
+$border-radius-sm: var(--border-radius-sm, 0.1875rem) !default; // 3px
+
+$rounded-border-radius: var(--border-radius, $border-radius) !default;
+$rounded-circle-border-radius: var(--border-radius-circle, 5000px) !default;
+$rounded-0-border-radius: 0 !default;
+$rounded-pill: var(--rounded-pill, 50rem) !default;
+
+$box-shadow-sm: var(--box-shadow-sm, 0 0.125rem 0.25rem rgba($black, 0.075)) !default;
+$box-shadow: var(--box-shadow, 0 0.5rem 1rem rgba($black, 0.15)) !default;
+$box-shadow-lg: var(--box-shadow-lg, 0 1rem 3rem rgba($black, 0.175)) !default;
+
+$transition-base: all 0.2s ease-in-out !default;
+$transition-fade: var(--transition-fade, opacity 0.15s linear) !default;
+$transition-collapse: var(--transition-collapse, height 0.35s ease) !default;
+
+$embed-responsive-aspect-ratios: () !default;
+$embed-responsive-aspect-ratios: join(
+	((21 9), (16 9), (4 3), (1 1)),
+	$embed-responsive-aspect-ratios
+);
+
+$component-active-bg: #0b5fff !default;
+$component-active-color: $white !default;
+
+$component-focus-box-shadow: 0 0 0 0.125rem $white#{','} 0 0 0 0.25rem $primary-l1 !default;
+$component-focus-inset-box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0
+	0 0 0.25rem $white !default;
+
+// Grid
+
+$grid-breakpoints: (
+	xs: 0,
+	sm: 576px,
+	md: 768px,
+	lg: 992px,
+	xl: 1280px,
+) !default;
+
+// Grid columns
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 24px !default;
+$grid-row-columns: 6 !default;
+
+$container-max-widths: (
+	sm: 540px,
+	md: 720px,
+	lg: 960px,
+	xl: 1248px,
+) !default;
+
+$container-form-lg: () !default;
+$container-form-lg: map-deep-merge(
+	(
+		breakpoint-up: lg,
+		padding-bottom: 3rem,
+		padding-top: 3rem,
+		padding-bottom-mobile: 1rem,
+		padding-top-mobile: 1rem,
+	),
+	$container-form-lg
+);
+
+$container-view: () !default;
+$container-view: map-deep-merge(
+	(
+		padding-bottom: 1.5rem,
+		padding-top: 1.5rem,
+	),
+	$container-view
+);
+
+$moz-osx-font-smoothing: grayscale !default;
+$webkit-font-smoothing: antialiased !default;
+
+$font-import-url: null !default;
+
+$font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont,
+	'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial,
+	sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
+$font-family-serif: Georgia, 'Times New Roman', Times, serif !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+	'Liberation Mono', 'Courier New', monospace !default;
+
+$font-family-base: var(--font-family-base, $font-family-sans-serif) !default;
+
+$font-size-base: 1rem !default; // 16px
+$font-size-lg: 1.125rem !default; // 18px
+$font-size-sm: 0.875rem !default; // 14px
+
+$font-size-base-mobile: $font-size-base !default;
+$font-size-lg-mobile: $font-size-lg !default;
+
+$font-weight-lighter: var(--font-weight-lighter, lighter) !default;
+$font-weight-light: var(--font-weight-light, 300) !default;
+$font-weight-normal: var(--font-weight-normal, 400) !default;
+$font-weight-semi-bold: var(--font-weight-semi-bold, 600) !default;
+$font-weight-bold: var(--font-weight-bold, 700) !default;
+$font-weight-bolder: var(--font-weight-bolder, 900) !default;
+
+$font-weight-base: $font-weight-normal !default;
+
+$h1-font-size: var(--h1-font-size, 1.625rem) !default; // 26px
+$h2-font-size: var(--h2-font-size, 1.375rem) !default; // 22px
+$h3-font-size: var(--h3-font-size, 1.1875rem) !default; // 19px
+$h4-font-size: var(--h4-font-size, 1rem) !default; // 16px
+$h5-font-size: var(--h5-font-size, 0.875rem) !default; // 14px
+$h6-font-size: var(--h6-font-size, 0.8125rem) !default; // 13px
+
+$h1-font-size-mobile: null !default;
+$h2-font-size-mobile: null !default;
+$h3-font-size-mobile: null !default;
+$h4-font-size-mobile: null !default;
+$h5-font-size-mobile: null !default;
+$h6-font-size-mobile: null !default;
+
+$headings-margin-bottom: $spacer / 2 !default;
+$headings-font-family: null !default;
+$headings-font-weight: $font-weight-bold !default;
+$headings-line-height: 1.2 !default;
+$headings-color: null !default;
+
+// Body
+
+$body-bg: var(--body-bg, $white) !default;
+$body-color: var(--body-color, $gray-900) !default;
+$body-moz-osx-font-smoothing: $moz-osx-font-smoothing !default;
+$body-webkit-font-smoothing: $webkit-font-smoothing !default;
+$body-text-align: inherit !default;
+
+// Link
+
+$link-color: $primary !default;
+$link-decoration: none !default;
+$link-hover-color: $primary-d2 !default;
+$link-hover-decoration: underline !default;
+
+// Cursors
+
+$link-cursor: pointer !default;
+$disabled-cursor: not-allowed !default;
+
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+
+$emphasized-link-hover-darken-percentage: 15% !default;
+
+// Paragraph
+
+$paragraph-margin-bottom: 1rem !default;
+
+$display1-size: var(--display1-size, 6rem) !default;
+$display2-size: var(--display2-size, 5.5rem) !default;
+$display3-size: var(--display3-size, 4.5rem) !default;
+$display4-size: var(--display4-size, 3.5rem) !default;
+
+$display1-weight: var(--display1-weight, 300) !default;
+$display2-weight: var(--display2-weight, 300) !default;
+$display3-weight: var(--display3-weight, 300) !default;
+$display4-weight: var(--display4-weight, 300) !default;
+$display-line-height: var(--display-line-height, $headings-line-height) !default;
+
+$lead-font-size: var(--lead-font-size, $font-size-base * 1.25) !default;
+$lead-font-weight: var(--lead-font-weight, 400) !default;
+
+$small-font-size: 0.875rem !default;
+
+$text-muted: var(--text-muted, $gray-500) !default;
+
+$blockquote-small-color: var(--blockquote-small-color, $gray-600);
+$blockquote-small-font-size: var(--blockquote-small-font-size, $small-font-size);
+$blockquote-font-size: var(--blockquote-font-size, $font-size-base * 1.25);
+
+$hr-border-color: var(--hr-border-color, rgba($black, 0.1)) !default;
+$hr-border-width: var(--hr-border-width, $border-width) !default;
+$hr-margin-y: var(--hr-margin-y, $spacer) !default;
+
+$mark-padding: 0.2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$code-color: $pink !default;
+$code-font-size: 87.5% !default;
+
+$kbd-bg: $gray-900 !default;
+$kbd-color: $white !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-padding-x: 0.4rem !default;
+$kbd-padding-y: 0.2rem !default;
+$kbd-box-shadow: inset 0 -0.1rem 0 rgba($black, 0.25) !default;
+
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$pre-color: $gray-900 !default;
+$pre-scrollable-max-height: 340px !default;
+
+$list-inline-padding: 0.5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+
+// Button
+
+$c-button-base: () !default;
+$c-button-base: map-merge(
+	(
+		cursor: $link-cursor,
+		-webkit-appearance: button,
+	),
+	$c-button-base
+);
+
+$close-text-shadow: none !default;
+
+// Buttons + Forms
+
+$label-margin-bottom: 0.5rem !default;
+
+$input-btn-font-family: null !default;
+$input-btn-font-size: $font-size-base !default;
+$input-btn-line-height: $line-height-base !default;
+$input-btn-padding-x: 0.75rem !default;
+$input-btn-padding-y: 0.375rem !default;
+
+$input-btn-focus-width: 0.2rem !default;
+
+$input-btn-focus-color: rgba($component-active-bg, 0.25) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-font-size-sm: $font-size-sm !default;
+$input-btn-line-height-sm: $line-height-sm !default;
+$input-btn-padding-x-sm: 0.5rem !default;
+$input-btn-padding-y-sm: 0.25rem !default;
+
+$input-btn-font-size-lg: $font-size-lg !default;
+$input-btn-line-height-lg: $line-height-lg !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-padding-y-lg: 0.5rem !default;
+
+$input-btn-border-width: $border-width !default;
+
+// Print
+
+$print-body-min-width: map-get($grid-breakpoints, 'lg') !default;
+$print-page-size: a3 !default;
+
+// Start Theme
+
+$border-color: #f1f2f5;
+$bright-color: #1865fb;
+$complementary-color: #30313f;
+$dark-color: #272833;
+$input-bg: #f1f2f5;
+$light-color: #e7e7ed;
+
+$portlet-decorate-bg: #fff;
+$portlet-decorate-border: 1px solid $light-color;
+
+$btn-primary: () !default;
+$btn-primary: map-deep-merge(
+	(
+		background-color: var(--btn-primary-background-color, $primary),
+		border-color: var(--btn-primary-border-color, $primary),
+		box-shadow: $c-unset,
+		color: var(--btn-primary-color, color-yiq($primary)),
+		hover-bg: var(--btn-primary-hover-background-color, $primary-d1),
+		hover-border-color: var(--btn-primary-hover-border-color, transparent),
+		hover: (
+			background-image: clay-enable-gradients($primary-d1),
+			color: var(--btn-primary-hover-color, color-yiq($primary-d1)),
+		),
+		focus-bg: $c-unset,
+		focus-box-shadow: $c-unset,
+		focus: (
+			background-image: $c-unset,
+			border-color: $c-unset,
+			color: $c-unset,
+		),
+		active-bg: $c-unset,
+		active-border-color: $c-unset,
+		active: (
+			background-image: $c-unset,
+			color: $c-unset,
+		),
+		active-focus-box-shadow: $c-unset,
+		disabled-bg: $c-unset,
+		disabled: (
+			background-image: $c-unset,
+			border-color: $c-unset,
+			color: $c-unset,
+		),
+	),
+	$btn-primary
+);
+
+$btn-outline-primary: () !default;
+$btn-outline-primary: map-deep-merge(
+	(
+		border-color: var(--btn-outline-primary-border-color, $primary),
+		color: var(--btn-outline-primary-color, $primary),
+		hover-bg: var(--btn-outline-primary-hover-background-color, $primary-l3),
+		hover-color: var(--btn-outline-primary-hover-color, color-yiq($primary)),
+		hover: (
+			border-color: var(--btn-outline-primary-hover-border-color, $primary),
+		),
+		focus-bg: $c-unset,
+		focus-box-shadow: $c-unset,
+		focus-color: $c-unset,
+		disabled-bg: $c-unset,
+		disabled-border-color: $c-unset,
+		disabled-color: $c-unset,
+		active-bg: $c-unset,
+		active-color: $c-unset,
+		active-box-shadow: $c-unset,
+		active: (
+			border-color: $c-unset,
+		),
+		active-focus-box-shadow: $c-unset,
+	),
+	$btn-outline-primary
+);
+
+$btn-secondary: () !default;
+$btn-secondary: map-deep-merge(
+	(
+		bg: var(--btn-secondary-background-color, $white),
+		background-image: clay-enable-gradients($white),
+		border-color: var(--btn-secondary-border-color, $secondary-l2),
+		box-shadow: $c-unset,
+		color: var(--btn-secondary-color, $secondary),
+		hover-bg: var(--btn-secondary-hover-background-color, $gray-100),
+		hover-border-color: var(--btn-secondary-hover-border-color, $secondary-l2),
+		hover-color: var(--btn-secondary-hover-color, $gray-900),
+		hover: (
+			background-image: clay-enable-gradients($gray-100),
+		),
+		focus-bg: $c-unset,
+		focus-border-color: $c-unset,
+		focus-box-shadow: $c-unset,
+		focus-color: $c-unset,
+		focus: (
+			background-image: $c-unset,
+		),
+		disabled-bg: $c-unset,
+		disabled-border-color: $c-unset,
+		disabled-color: $c-unset,
+		disabled: (
+			background-image: $c-unset,
+		),
+		active-border-color: $c-unset,
+		active-color: $c-unset,
+		active-bg: $c-unset,
+		active-focus-box-shadow: $c-unset,
+	),
+	$btn-secondary
+);
+
+$btn-outline-secondary: () !default;
+$btn-outline-secondary: map-deep-merge(
+	(
+		bg: var(--btn-outline-secondary-background-color, transparent),
+		border-color: var(--btn-outline-secondary-border-color, $secondary-l2),
+		color: var(--btn-outline-secondary-color, $secondary),
+		hover-bg: var(--btn-outline-secondary-hover-background-color, rgba($gray-900, 0.03)),
+		hover-border-color: var(--btn-outline-secondary-hover-border-color, transparent),
+		hover-color: var(--btn-outline-secondary-hover-color, color-yiq($white)),
+		focus-bg: $c-unset,
+		focus-border-color: $c-unset,
+		focus-box-shadow: $c-unset,
+		focus-color: $c-unset,
+		disabled-bg: $c-unset,
+		disabled-border-color: $c-unset,
+		disabled-color: $c-unset,
+		active-bg: $c-unset,
+		active-border-color: $c-unset,
+		active-box-shadow: $c-unset,
+		active-color: $c-unset,
+		active-focus-box-shadow: $c-unset,
+	),
+	$btn-outline-secondary
+);
+
+$btn-link-disabled-color: $gray-600 !default;
+
+$btn-link: () !default;
+$btn-link: map-deep-merge(
+	(
+		border-radius: 1px,
+		box-shadow: $c-unset,
+		color: var(--btn-link-color, $link-color),
+		font-weight: $font-weight-normal,
+		text-decoration: $link-decoration,
+		hover: (
+			color: var(--btn-link-hover-color, $link-hover-color),
+			text-decoration: $link-hover-decoration,
+		),
+		focus: (
+			box-shadow: $c-unset,
+			text-decoration: $link-decoration,
+		),
+		active: (
+			box-shadow: clay-enable-shadows([none]),
+		),
+		disabled: (
+			box-shadow: none,
+			color: $c-unset,
+			text-decoration: none,
+		),
+	),
+	$btn-link
+);
diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss
index 4a081528508738..2997c283bc40c0 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss
@@ -32,120 +32,12 @@
 	}
 }
 
-// Blockquotes
-
-.blockquote {
-	font-size: var(--blockquote-font-size);
-}
-
-.blockquote-footer {
-	color: var(--blockquote-small-color);
-	font-size: var(--blockquote-small-font-size);
-}
-
 // Body
 
-body,
 #wrapper {
-	background-color: var(--body-bg);
-	color: var(--body-color);
-	font-family: var(--font-family-base);
-	font-size: var(--font-size-base);
-}
-
-// Buttons
-
-@each $key, $map in $custom-properties-button-maps {
-	.btn-#{$key}#{$custom-properties-button-not-classes} {
-		@include clay-button-variant($map);
-	}
-}
-
-.btn-outline-borderless#{$custom-properties-button-not-classes} {
-	border-color: transparent;
-
-	&:hover,
-	&:focus {
-		border-color: transparent;
-	}
-
-	&:disabled,
-	&.disabled {
-		border-color: transparent;
-	}
-}
-
-// Container max
-
-@each $key, $value in $custom-properties-container-max-widths {
-	.container-fluid-max-#{$key} {
-		max-width: #{$value};
-	}
-}
-
-// Display
-
-.display-1 {
-	font-size: var(--display1-size);
-	font-weight: var(--display1-weight);
-	line-height: var(--display-line-height);
-}
-
-.display-2 {
-	font-size: var(--display2-size);
-	font-weight: var(--display2-weight);
-	line-height: var(--display-line-height);
-}
-
-.display-3 {
-	font-size: var(--display3-size);
-	font-weight: var(--display3-weight);
-	line-height: var(--display-line-height);
-}
-
-.display-4 {
-	font-size: var(--display4-size);
-	font-weight: var(--display4-weight);
-	line-height: var(--display-line-height);
-}
-
-// Headers
-
-h1,
-.h1 {
-	font-size: var(--h1-font-size);
-}
-
-h2,
-.h2 {
-	font-size: var(--h2-font-size);
-}
-
-h3,
-.h3 {
-	font-size: var(--h3-font-size);
-}
-
-h4,
-.h4 {
-	font-size: var(--h4-font-size);
-}
-
-h5,
-.h5 {
-	font-size: var(--h5-font-size);
-}
-
-h6,
-.h6 {
-	font-size: var(--h6-font-size);
-}
-
-// Lead
-
-.lead {
-	font-size: var(--lead-font-size);
-	font-weight: var(--lead-font-weight);
+	background-color: var(--body-bg, $body-bg);
+	color: var(--body-color, $body-color);
+	font-size: var(--font-size-base, $font-size-base);
 }
 
 // Portlet
@@ -187,153 +79,6 @@ h6,
 	color: var(--portlet-topper-color);
 }
 
-// Rounded
-
-.rounded {
-	border-radius: var(--border-radius) !important;
-}
-
-.rounded-circle {
-	border-radius: var(--border-radius-circle) !important;
-}
-
-.rounded-lg {
-	border-radius: var(--border-radius-lg) !important;
-}
-
-.rounded-pill {
-	border-radius: var(--rounded-pill) !important;
-}
-
-.rounded-sm {
-	border-radius: var(--border-radius-sm) !important;
-}
-
-// Separator
-
-hr {
-	border-top: var(--hr-border-width) solid var(--hr-border-color);
-	margin-bottom: var(--hr-margin-y);
-	margin-top: var(--hr-margin-y);
-}
-
-// Shadows
-
-.shadow {
-	box-shadow: var(--box-shadow) !important;
-}
-
-.shadow-sm {
-	box-shadow: var(--box-shadow-sm) !important;
-}
-
-.shadow-lg {
-	box-shadow: var(--box-shadow-lg) !important;
-}
-
-// Spacers
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-	$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-	@include media-breakpoint-up($breakpoint) {
-		@each $size, $length in $custom-properties-spacers {
-			@each $library in ('bs', 'clay') {
-				$important: '';
-				$prefix: '';
-
-				@if ($library == 'bs') {
-					$important: '!important';
-				} @else {
-					$prefix: 'c-';
-				}
-
-				@each $prop, $abbrev in (margin: m, padding: p) {
-					$variants: ('positive');
-
-					@if ($prop == 'margin') {
-						$variants: ('positive', 'negative');
-					}
-
-					@each $variant in $variants {
-						$variation: '';
-						$value: $length;
-
-						@if ($variant != 'negative' or $size != 0) {
-							@if ($variant == 'negative') {
-								$value: calc(#{$length} * -1);
-								$variation: 'n';
-							}
-
-							.#{$prefix}#{$abbrev}#{$infix}-#{$variation}#{$size} {
-								#{$prop}: #{$value} #{$important};
-							}
-							.#{$prefix}#{$abbrev}t#{$infix}-#{$variation}#{$size},
-							.#{$prefix}#{$abbrev}y#{$infix}-#{$variation}#{$size} {
-								#{$prop}-top: #{$value} #{$important};
-							}
-							.#{$prefix}#{$abbrev}r#{$infix}-#{$variation}#{$size},
-							.#{$prefix}#{$abbrev}x#{$infix}-#{$variation}#{$size} {
-								#{$prop}-right: #{$value} #{$important};
-							}
-							.#{$prefix}#{$abbrev}b#{$infix}-#{$variation}#{$size},
-							.#{$prefix}#{$abbrev}y#{$infix}-#{$variation}#{$size} {
-								#{$prop}-bottom: #{$value} #{$important};
-							}
-							.#{$prefix}#{$abbrev}l#{$infix}-#{$variation}#{$size},
-							.#{$prefix}#{$abbrev}x#{$infix}-#{$variation}#{$size} {
-								#{$prop}-left: #{$value} #{$important};
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-// Text format
-
-.font-weight-bold {
-	font-weight: var(--font-weight-bold) !important;
-}
-
-.font-weight-bolder {
-	font-weight: var(--font-weight-bolder) !important;
-}
-
-.font-weight-light {
-	font-weight: var(--font-weight-light) !important;
-}
-
-.font-weight-lighter {
-	font-weight: var(--font-weight-lighter) !important;
-}
-
-.font-weight-normal {
-	font-weight: var(--font-weight-normal) !important;
-}
-
-.font-weight-semi-bold {
-	font-weight: var(--font-weight-semi-bold) !important;
-}
-
-// Text muted
-
-.text-muted {
-	color: var(--text-muted) !important;
-}
-
-// Transition
-
-.collapsing {
-	transition: var(--transition-collapse);
-}
-
-.fade {
-	transition: var(--transition-fade);
-}
-
 // Theme footer
 
 #footer {
diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
index 07ec9d5dcd2847..3bb99a85d50984 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
@@ -27,26 +27,6 @@ $custom-properties-container-max-widths: map-merge(
 	$custom-properties-container-max-widths
 );
 
-// Spacers map copy
-
-$custom-properties-spacers: ();
-$custom-properties-spacers: map-merge(
-	(
-		0: var(--spacer-0),
-		1: var(--spacer-1),
-		2: var(--spacer-2),
-		3: var(--spacer-3),
-		4: var(--spacer-4),
-		5: var(--spacer-5),
-		6: var(--spacer-6),
-		7: var(--spacer-7),
-		8: var(--spacer-8),
-		9: var(--spacer-9),
-		10: var(--spacer-10),
-	),
-	$custom-properties-spacers
-);
-
 // Theme colors
 
 $custom-properties-theme-colors: ();
@@ -141,22 +121,22 @@ $custom-properties-theme-colors: map-merge(
 
 	// Blockquotes
 
-	--blockquote-font-size: #{$font-size-base} * 1.25;
-	--blockquote-small-color: #{$gray-600};
-	--blockquote-small-font-size: #{$small-font-size};
+	--blockquote-font-size: #{getDefault($blockquote-font-size)};
+	--blockquote-small-color: #{getDefault($gray-600)};
+	--blockquote-small-font-size: #{getDefault($small-font-size)};
 
 	// Body
 
-	--body-bg: #{$body-bg};
-	--body-color: #{$body-color};
+	--body-bg: #{getDefault($body-bg)};
+	--body-color: #{getDefault($body-color)};
 
 	// Border radius
 
 	--border-radius-circle: 50%;
-	--border-radius-lg: #{$border-radius-lg};
-	--border-radius-sm: #{$border-radius-sm};
-	--border-radius: #{$border-radius};
-	--rounded-pill: #{$rounded-pill};
+	--border-radius-lg: #{getDefault($border-radius-lg)};
+	--border-radius-sm: #{getDefault($border-radius-sm)};
+	--border-radius: #{getDefault($border-radius)};
+	--rounded-pill: #{getDefault($rounded-pill)};
 
 	// Colors
 
@@ -165,76 +145,76 @@ $custom-properties-theme-colors: map-merge(
 	--brand-color-3: #{$info};
 	--brand-color-4: #{$dark-l1};
 
-	--black: #{$black};
-	--gray-100: #{$gray-100};
-	--gray-200: #{$gray-200};
-	--gray-300: #{$gray-300};
-	--gray-400: #{$gray-400};
-	--gray-500: #{$gray-500};
-	--gray-600: #{$gray-600};
-	--gray-700: #{$gray-700};
-	--gray-800: #{$gray-800};
-	--gray-900: #{$gray-900};
+	--black: #{getDefault($black)};
+	--gray-100: #{getDefault($gray-100)};
+	--gray-200: #{getDefault($gray-200)};
+	--gray-300: #{getDefault($gray-300)};
+	--gray-400: #{getDefault($gray-400)};
+	--gray-500: #{getDefault($gray-500)};
+	--gray-600: #{getDefault($gray-600)};
+	--gray-700: #{getDefault($gray-700)};
+	--gray-800: #{getDefault($gray-800)};
+	--gray-900: #{getDefault($gray-900)};
 	--transparent: transparent;
-	--white: #{$white};
+	--white: #{getDefault($white)};
 
 	@each $key, $value in $theme-colors {
-		--#{$key}: #{$value};
+		--#{$key}: #{getDefault($value)};
 	}
 
 	// Container max
 
 	@each $key, $value in $container-max-widths {
-		--container-max-#{$key}: #{$value};
+		--container-max-#{$key}: #{getDefault($value)};
 	}
 
 	// Display
 
-	--display1-size: #{$display1-size};
-	--display2-size: #{$display2-size};
-	--display3-size: #{$display3-size};
-	--display4-size: #{$display4-size};
+	--display1-size: #{getDefault($display1-size)};
+	--display2-size: #{getDefault($display2-size)};
+	--display3-size: #{getDefault($display3-size)};
+	--display4-size: #{getDefault($display4-size)};
 
-	--display1-weight: #{$display1-weight};
-	--display2-weight: #{$display2-weight};
-	--display3-weight: #{$display3-weight};
-	--display4-weight: #{$display4-weight};
+	--display1-weight: #{getDefault($display1-weight)};
+	--display2-weight: #{getDefault($display2-weight)};
+	--display3-weight: #{getDefault($display3-weight)};
+	--display4-weight: #{getDefault($display4-weight)};
 
-	--display-line-height: #{$display-line-height};
+	--display-line-height: #{getDefault($display-line-height)};
 
 	// Fonts
 
-	--font-family-base: #{$font-family-base};
-	--font-family-monospace: #{$font-family-monospace};
-	--font-family-sans-serif: #{$font-family-sans-serif};
+	--font-family-base: #{getDefault($font-family-base)};
+	--font-family-monospace: #{getDefault($font-family-monospace)};
+	--font-family-sans-serif: #{getDefault($font-family-sans-serif)};
 
-	--font-size-base: #{$font-size-base};
-	--font-size-lg: #{$font-size-lg};
-	--font-size-sm: #{$font-size-sm};
+	--font-size-base: #{getDefault($font-size-base)};
+	--font-size-lg: #{getDefault($font-size-lg)};
+	--font-size-sm: #{getDefault($font-size-sm)};
 
-	--font-weight-bold: #{$font-weight-bold};
-	--font-weight-bolder: #{$font-weight-bolder};
-	--font-weight-light: #{$font-weight-light};
-	--font-weight-lighter: #{$font-weight-lighter};
-	--font-weight-normal: #{$font-weight-normal};
-	--font-weight-semi-bold: #{$font-weight-semi-bold};
+	--font-weight-bold: #{getDefault($font-weight-bold)};
+	--font-weight-bolder: #{getDefault($font-weight-bolder)};
+	--font-weight-light: #{getDefault($font-weight-light)};
+	--font-weight-lighter: #{getDefault($font-weight-lighter)};
+	--font-weight-normal: #{getDefault($font-weight-normal)};
+	--font-weight-semi-bold: #{getDefault($font-weight-semi-bold)};
 
-	--line-height-base: #{$line-height-base};
+	--line-height-base: #{getDefault($line-height-base)};
 	--line-height-sm: 1.15;
 
 	// Headings
 
-	--h1-font-size: #{$h1-font-size};
-	--h2-font-size: #{$h2-font-size};
-	--h3-font-size: #{$h3-font-size};
-	--h4-font-size: #{$h4-font-size};
-	--h5-font-size: #{$h5-font-size};
-	--h6-font-size: #{$h6-font-size};
+	--h1-font-size: #{getDefault($h1-font-size)};
+	--h2-font-size: #{getDefault($h2-font-size)};
+	--h3-font-size: #{getDefault($h3-font-size)};
+	--h4-font-size: #{getDefault($h4-font-size)};
+	--h5-font-size: #{getDefault($h5-font-size)};
+	--h6-font-size: #{getDefault($h6-font-size)};
 
 	// Lead
 
-	--lead-font-size: #{$lead-font-size};
-	--lead-font-weight: #{$lead-font-weight};
+	--lead-font-size: #{getDefault($lead-font-size)};
+	--lead-font-weight: #{getDefault($lead-font-weight)};
 
 	// Portlet
 
@@ -254,19 +234,19 @@ $custom-properties-theme-colors: map-merge(
 
 	// Separator
 
-	--hr-border-color: #{$hr-border-color};
-	--hr-border-width: #{$hr-border-width};
-	--hr-margin-y: #{$hr-margin-y};
+	--hr-border-color: #{getDefault($hr-border-color)};
+	--hr-border-width: #{getDefault($hr-border-width)};
+	--hr-margin-y: #{getDefault($hr-margin-y)};
 
 	// Shadows
 
-	--box-shadow-lg: #{$box-shadow-lg};
-	--box-shadow-sm: #{$box-shadow-sm};
-	--box-shadow: #{$box-shadow};
+	--box-shadow-lg: #{getDefault($box-shadow-lg)};
+	--box-shadow-sm: #{getDefault($box-shadow-sm)};
+	--box-shadow: #{getDefault($box-shadow)};
 
 	// Spacers
 
-	--spacer: #{$spacer};
+	--spacer: getDefault($spacer);
 	@each $key, $value in $spacers {
 		$multiplier: nth($value, 1) / $spacer;
 		@if ($value == 0) {
@@ -277,10 +257,10 @@ $custom-properties-theme-colors: map-merge(
 
 	// Text muted
 
-	--text-muted: #{$text-muted};
+	--text-muted: #{getDefault($text-muted)};
 
 	// Transitions
 
-	--transition-collapse: #{$transition-collapse};
-	--transition-fade: #{$transition-fade};
+	--transition-collapse: #{getDefault($transition-collapse)};
+	--transition-fade: #{getDefault($transition-fade)};
 }

From 3663e57fd7a2fd81bd5dd1c3cfdd94b550cb36e8 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 29 Jul 2021 08:22:08 -0700
Subject: [PATCH 2/5] LPS-136427 Classic Theme custom_properties removes
 duplicate CSS variables definitions. Tokens inside
 frontend-token-definition.json are automatically generated into CSS variables
 inside a style tag in the head.

---
 .../_custom_properties_variables.scss         | 215 ------------------
 1 file changed, 215 deletions(-)

diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
index 3bb99a85d50984..5fc006fa1fa70c 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
@@ -1,32 +1,3 @@
-// Buttons colors
-
-$custom-properties-button-colors: ();
-$custom-properties-button-colors: map-merge(
-	(
-		primary: $btn-primary,
-		outline-primary: $btn-outline-primary,
-		secondary: $btn-secondary,
-		outline-secondary: $btn-outline-secondary,
-		link: $btn-link,
-	),
-	$custom-properties-button-colors
-);
-$custom-properties-button-maps: ();
-$custom-properties-button-not-classes: ':not(.alert-btn):not(.dropdown-item)';
-
-// Container max widths
-
-$custom-properties-container-max-widths: ();
-$custom-properties-container-max-widths: map-merge(
-	(
-		sm: var(--container-max-sm),
-		md: var(--container-max-md),
-		lg: var(--container-max-lg),
-		xl: var(--container-max-xl),
-	),
-	$custom-properties-container-max-widths
-);
-
 // Theme colors
 
 $custom-properties-theme-colors: ();
@@ -46,176 +17,22 @@ $custom-properties-theme-colors: map-merge(
 	$custom-properties-theme-colors
 );
 
-// Buttons
-
-@each $key, $map in $custom-properties-button-colors {
-	$normal: ();
-	$hover: ();
-
-	:root {
-		@each $status in (normal, hover) {
-			$prefix: $status + '-';
-
-			@if ($status == normal) {
-				$prefix: '';
-			}
-
-			@each $prop in (background-color, border-color, color) {
-				$alias: $prefix + $prop;
-				$btn-variable: '';
-
-				@if ($prop == background-color) {
-					$alias: $prefix + 'bg';
-				}
-
-				@if (map-has-key($map, #{$alias})) {
-					$btn-variable: map-get($map, #{$alias});
-				} @else if($status == normal) {
-					$btn-variable: map-get($map, #{$prop});
-				} @else {
-					$btn-variable: map-get(map-get($map, #{$status}), #{$prop});
-				}
-
-				@if ($btn-variable != null) {
-					--btn-#{$key}-#{$prefix}#{$prop}: #{$btn-variable};
-
-					@if ($status == normal) {
-						$normal: map-merge(
-							(#{$prop}: var(--btn-#{$key}-#{$prop})),
-							$normal
-						);
-					} @else {
-						$hover: map-merge(
-							(#{$prop}: var(--btn-#{$key}-#{$prefix}#{$prop})),
-							$hover
-						);
-					}
-				}
-			}
-		}
-	}
-
-	$normal: map-merge(
-		(
-			hover: $hover,
-			focus: $hover,
-			active: $hover,
-			disabled: $hover,
-		),
-		$normal
-	);
-
-	$custom-properties-button-maps: map-merge(
-		(#{$key}: $normal),
-		$custom-properties-button-maps
-	);
-}
-
 :root {
-	// Aspect ratios
-
-	--aspect-ratio-4-to-3: 75%;
-	--aspect-ratio-8-to-3: 37.5%;
-	--aspect-ratio-16-to-9: 56.25%;
-	--aspect-ratio: 100%;
-
-	// Blockquotes
-
-	--blockquote-font-size: #{getDefault($blockquote-font-size)};
-	--blockquote-small-color: #{getDefault($gray-600)};
-	--blockquote-small-font-size: #{getDefault($small-font-size)};
-
-	// Body
-
-	--body-bg: #{getDefault($body-bg)};
-	--body-color: #{getDefault($body-color)};
-
-	// Border radius
-
-	--border-radius-circle: 50%;
-	--border-radius-lg: #{getDefault($border-radius-lg)};
-	--border-radius-sm: #{getDefault($border-radius-sm)};
-	--border-radius: #{getDefault($border-radius)};
-	--rounded-pill: #{getDefault($rounded-pill)};
-
 	// Colors
 
-	--brand-color-1: #{$primary};
-	--brand-color-2: #{$secondary};
-	--brand-color-3: #{$info};
-	--brand-color-4: #{$dark-l1};
-
-	--black: #{getDefault($black)};
-	--gray-100: #{getDefault($gray-100)};
-	--gray-200: #{getDefault($gray-200)};
-	--gray-300: #{getDefault($gray-300)};
-	--gray-400: #{getDefault($gray-400)};
-	--gray-500: #{getDefault($gray-500)};
-	--gray-600: #{getDefault($gray-600)};
-	--gray-700: #{getDefault($gray-700)};
-	--gray-800: #{getDefault($gray-800)};
-	--gray-900: #{getDefault($gray-900)};
 	--transparent: transparent;
-	--white: #{getDefault($white)};
 
 	@each $key, $value in $theme-colors {
 		--#{$key}: #{getDefault($value)};
 	}
 
-	// Container max
-
-	@each $key, $value in $container-max-widths {
-		--container-max-#{$key}: #{getDefault($value)};
-	}
-
-	// Display
-
-	--display1-size: #{getDefault($display1-size)};
-	--display2-size: #{getDefault($display2-size)};
-	--display3-size: #{getDefault($display3-size)};
-	--display4-size: #{getDefault($display4-size)};
-
-	--display1-weight: #{getDefault($display1-weight)};
-	--display2-weight: #{getDefault($display2-weight)};
-	--display3-weight: #{getDefault($display3-weight)};
-	--display4-weight: #{getDefault($display4-weight)};
-
-	--display-line-height: #{getDefault($display-line-height)};
-
 	// Fonts
 
-	--font-family-base: #{getDefault($font-family-base)};
-	--font-family-monospace: #{getDefault($font-family-monospace)};
-	--font-family-sans-serif: #{getDefault($font-family-sans-serif)};
-
-	--font-size-base: #{getDefault($font-size-base)};
-	--font-size-lg: #{getDefault($font-size-lg)};
-	--font-size-sm: #{getDefault($font-size-sm)};
-
-	--font-weight-bold: #{getDefault($font-weight-bold)};
-	--font-weight-bolder: #{getDefault($font-weight-bolder)};
-	--font-weight-light: #{getDefault($font-weight-light)};
-	--font-weight-lighter: #{getDefault($font-weight-lighter)};
-	--font-weight-normal: #{getDefault($font-weight-normal)};
 	--font-weight-semi-bold: #{getDefault($font-weight-semi-bold)};
 
 	--line-height-base: #{getDefault($line-height-base)};
 	--line-height-sm: 1.15;
 
-	// Headings
-
-	--h1-font-size: #{getDefault($h1-font-size)};
-	--h2-font-size: #{getDefault($h2-font-size)};
-	--h3-font-size: #{getDefault($h3-font-size)};
-	--h4-font-size: #{getDefault($h4-font-size)};
-	--h5-font-size: #{getDefault($h5-font-size)};
-	--h6-font-size: #{getDefault($h6-font-size)};
-
-	// Lead
-
-	--lead-font-size: #{getDefault($lead-font-size)};
-	--lead-font-weight: #{getDefault($lead-font-weight)};
-
 	// Portlet
 
 	--portlet-bg: transparent;
@@ -231,36 +48,4 @@ $custom-properties-theme-colors: map-merge(
 	--portlet-topper-color: var(--white);
 	--portlet-topper-link-color: var(--portlet-topper-color);
 	--portlet-topper-link-hover-color: var(--portlet-topper-link-color);
-
-	// Separator
-
-	--hr-border-color: #{getDefault($hr-border-color)};
-	--hr-border-width: #{getDefault($hr-border-width)};
-	--hr-margin-y: #{getDefault($hr-margin-y)};
-
-	// Shadows
-
-	--box-shadow-lg: #{getDefault($box-shadow-lg)};
-	--box-shadow-sm: #{getDefault($box-shadow-sm)};
-	--box-shadow: #{getDefault($box-shadow)};
-
-	// Spacers
-
-	--spacer: getDefault($spacer);
-	@each $key, $value in $spacers {
-		$multiplier: nth($value, 1) / $spacer;
-		@if ($value == 0) {
-			$multiplier: 0;
-		}
-		--spacer-#{$key}: calc(var(--spacer) * #{$multiplier});
-	}
-
-	// Text muted
-
-	--text-muted: #{getDefault($text-muted)};
-
-	// Transitions
-
-	--transition-collapse: #{getDefault($transition-collapse)};
-	--transition-fade: #{getDefault($transition-fade)};
 }

From 13bbc7994075517baccbe483138d38b56f2166a4 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 29 Jul 2021 09:16:45 -0700
Subject: [PATCH 3/5] LPS-136427 Classic Theme custom_properties adds
 gray-dark, lighter, font-weight-semi-bold to token definitions, so we don't
 need to rewrite the CSS variables inside the theme.

---
 .../WEB-INF/frontend-token-definition.json    | 38 +++++++++++++++++++
 .../_custom_properties_variables.scss         |  8 +---
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/WEB-INF/frontend-token-definition.json b/modules/apps/frontend-theme/frontend-theme-classic/src/WEB-INF/frontend-token-definition.json
index cd8219005b1fc1..f5bf77d37467b4 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/WEB-INF/frontend-token-definition.json
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/WEB-INF/frontend-token-definition.json
@@ -289,6 +289,19 @@
 							"name": "dangerColor",
 							"type": "String"
 						},
+						{
+							"defaultValue": "#393a4a",
+							"editorType": "ColorPicker",
+							"label": "gray-dark",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "gray-dark"
+								}
+							],
+							"name": "grayDarkColor",
+							"type": "String"
+						},
 						{
 							"defaultValue": "#272833",
 							"editorType": "ColorPicker",
@@ -314,6 +327,19 @@
 							],
 							"name": "lightColor",
 							"type": "String"
+						},
+						{
+							"defaultValue": "#f7f8f9",
+							"editorType": "ColorPicker",
+							"label": "lighter",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "lighter"
+								}
+							],
+							"name": "lighterColor",
+							"type": "String"
 						}
 					],
 					"label": "theme-colors",
@@ -881,6 +907,18 @@
 							"name": "fontWeightNormal",
 							"type": "String"
 						},
+						{
+							"defaultValue": "600",
+							"label": "font-weight-semi-bold",
+							"mappings": [
+								{
+									"type": "cssVariable",
+									"value": "font-weight-semi-bold"
+								}
+							],
+							"name": "fontWeightSemiBold",
+							"type": "String"
+						},
 						{
 							"defaultValue": "700",
 							"label": "font-weight-bold",
diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
index 5fc006fa1fa70c..3888da355ef5d0 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
@@ -22,15 +22,9 @@ $custom-properties-theme-colors: map-merge(
 
 	--transparent: transparent;
 
-	@each $key, $value in $theme-colors {
-		--#{$key}: #{getDefault($value)};
-	}
-
 	// Fonts
 
-	--font-weight-semi-bold: #{getDefault($font-weight-semi-bold)};
-
-	--line-height-base: #{getDefault($line-height-base)};
+	--line-height-base: #{getdefault($line-height-base)};
 	--line-height-sm: 1.15;
 
 	// Portlet

From b2358ab20bde09be5773f4f6a65b694ad751eabc Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 29 Jul 2021 09:54:10 -0700
Subject: [PATCH 4/5] LPS-136427 Classic Theme custom_properties removes custom
 properties --transparent, --line-height-base, --line-height-sm. These are not
 defined in the Style Book. Line Height is also insanely difficult to
 customize through one variable in a giant application like DXP.

---
 .../custom_properties/_custom_properties_variables.scss  | 9 ---------
 1 file changed, 9 deletions(-)

diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
index 3888da355ef5d0..82d331ed75119f 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
@@ -18,15 +18,6 @@ $custom-properties-theme-colors: map-merge(
 );
 
 :root {
-	// Colors
-
-	--transparent: transparent;
-
-	// Fonts
-
-	--line-height-base: #{getdefault($line-height-base)};
-	--line-height-sm: 1.15;
-
 	// Portlet
 
 	--portlet-bg: transparent;

From d363d9a9b65885a7b071e9f47312b7935c7050c6 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 29 Jul 2021 12:01:36 -0700
Subject: [PATCH 5/5] LPS-136427 Classic Theme custom_properties clean up CSS
 and leverage existing Sass variables

LPS-136427 Classic Theme SF _clay_variables.scss
---
 .../src/css/_clay_variables.scss              | 60 +++++++++----------
 .../_custom_properties_set.scss               | 31 +++++-----
 .../_custom_properties_variables.scss         | 14 +----
 .../src/css/portlet/_variables_custom.scss    | 28 ++++++---
 4 files changed, 63 insertions(+), 70 deletions(-)

diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/_clay_variables.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/_clay_variables.scss
index 60ea2e92972499..f5e30e0574b17e 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/_clay_variables.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/_clay_variables.scss
@@ -1,13 +1,3 @@
-@function getDefault($var) {
-	@if (type-of($var) == string and str-slice($var, 1, 3) == 'var') {
-		@return str-slice($var, str-index($var, ',') + 2, str-length($var) - 1);
-	}
-
-	@return $var;
-}
-
-// POC
-
 $clay-unset: clay-unset !default;
 
 // An alias for `$clay-unset`
@@ -190,7 +180,7 @@ $line-height-sm: 1.5 !default;
 
 $line-height-base: 1.5 !default;
 
-$border-color: $gray-300 !default;
+$border-color: $gray-200 !default;
 $border-width: 0.0625rem !default;
 
 $border-radius: 0.25rem !default; // 4px
@@ -202,7 +192,10 @@ $rounded-circle-border-radius: var(--border-radius-circle, 5000px) !default;
 $rounded-0-border-radius: 0 !default;
 $rounded-pill: var(--rounded-pill, 50rem) !default;
 
-$box-shadow-sm: var(--box-shadow-sm, 0 0.125rem 0.25rem rgba($black, 0.075)) !default;
+$box-shadow-sm: var(
+	--box-shadow-sm,
+	0 0.125rem 0.25rem rgba($black, 0.075)
+) !default;
 $box-shadow: var(--box-shadow, 0 0.5rem 1rem rgba($black, 0.15)) !default;
 $box-shadow-lg: var(--box-shadow-lg, 0 1rem 3rem rgba($black, 0.175)) !default;
 
@@ -272,11 +265,11 @@ $webkit-font-smoothing: antialiased !default;
 
 $font-import-url: null !default;
 
-$font-family-sans-serif: system-ui, -apple-system, BlinkMacSystemFont,
-	'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Arial,
+$font-family-sans-serif: system-ui, -apple-system, blinkmacsystemfont,
+	'Segoe UI', roboto, oxygen-sans, ubuntu, cantarell, 'Helvetica Neue', arial,
 	sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;
-$font-family-serif: Georgia, 'Times New Roman', Times, serif !default;
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+$font-family-serif: georgia, 'Times New Roman', times, serif !default;
+$font-family-monospace: sfmono-regular, menlo, monaco, consolas,
 	'Liberation Mono', 'Courier New', monospace !default;
 
 $font-family-base: var(--font-family-base, $font-family-sans-serif) !default;
@@ -354,7 +347,10 @@ $display1-weight: var(--display1-weight, 300) !default;
 $display2-weight: var(--display2-weight, 300) !default;
 $display3-weight: var(--display3-weight, 300) !default;
 $display4-weight: var(--display4-weight, 300) !default;
-$display-line-height: var(--display-line-height, $headings-line-height) !default;
+$display-line-height: var(
+	--display-line-height,
+	$headings-line-height
+) !default;
 
 $lead-font-size: var(--lead-font-size, $font-size-base * 1.25) !default;
 $lead-font-weight: var(--lead-font-weight, 400) !default;
@@ -364,7 +360,10 @@ $small-font-size: 0.875rem !default;
 $text-muted: var(--text-muted, $gray-500) !default;
 
 $blockquote-small-color: var(--blockquote-small-color, $gray-600);
-$blockquote-small-font-size: var(--blockquote-small-font-size, $small-font-size);
+$blockquote-small-font-size: var(
+	--blockquote-small-font-size,
+	$small-font-size
+);
 $blockquote-font-size: var(--blockquote-font-size, $font-size-base * 1.25);
 
 $hr-border-color: var(--hr-border-color, rgba($black, 0.1)) !default;
@@ -441,16 +440,6 @@ $print-page-size: a3 !default;
 
 // Start Theme
 
-$border-color: #f1f2f5;
-$bright-color: #1865fb;
-$complementary-color: #30313f;
-$dark-color: #272833;
-$input-bg: #f1f2f5;
-$light-color: #e7e7ed;
-
-$portlet-decorate-bg: #fff;
-$portlet-decorate-border: 1px solid $light-color;
-
 $btn-primary: () !default;
 $btn-primary: map-deep-merge(
 	(
@@ -496,7 +485,8 @@ $btn-outline-primary: map-deep-merge(
 		hover-bg: var(--btn-outline-primary-hover-background-color, $primary-l3),
 		hover-color: var(--btn-outline-primary-hover-color, color-yiq($primary)),
 		hover: (
-			border-color: var(--btn-outline-primary-hover-border-color, $primary),
+			border-color:
+				var(--btn-outline-primary-hover-border-color, $primary),
 		),
 		focus-bg: $c-unset,
 		focus-box-shadow: $c-unset,
@@ -524,7 +514,8 @@ $btn-secondary: map-deep-merge(
 		box-shadow: $c-unset,
 		color: var(--btn-secondary-color, $secondary),
 		hover-bg: var(--btn-secondary-hover-background-color, $gray-100),
-		hover-border-color: var(--btn-secondary-hover-border-color, $secondary-l2),
+		hover-border-color:
+			var(--btn-secondary-hover-border-color, $secondary-l2),
 		hover-color: var(--btn-secondary-hover-color, $gray-900),
 		hover: (
 			background-image: clay-enable-gradients($gray-100),
@@ -556,8 +547,13 @@ $btn-outline-secondary: map-deep-merge(
 		bg: var(--btn-outline-secondary-background-color, transparent),
 		border-color: var(--btn-outline-secondary-border-color, $secondary-l2),
 		color: var(--btn-outline-secondary-color, $secondary),
-		hover-bg: var(--btn-outline-secondary-hover-background-color, rgba($gray-900, 0.03)),
-		hover-border-color: var(--btn-outline-secondary-hover-border-color, transparent),
+		hover-bg:
+			var(
+				--btn-outline-secondary-hover-background-color,
+				rgba($gray-900, 0.03)
+			),
+		hover-border-color:
+			var(--btn-outline-secondary-hover-border-color, transparent),
 		hover-color: var(--btn-outline-secondary-hover-color, color-yiq($white)),
 		focus-bg: $c-unset,
 		focus-border-color: $c-unset,
diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss
index 2997c283bc40c0..389bc20120075c 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_set.scss
@@ -1,23 +1,23 @@
 // Aspect ratio
 
 .aspect-ratio:not([class*='aspect-ratio-']) {
-	padding-bottom: var(--aspect-ratio);
+	padding-bottom: var(--aspect-ratio, 100%);
 }
 
 .aspect-ratio-4-to-3 {
-	padding-bottom: var(--aspect-ratio-4-to-3);
+	padding-bottom: var(--aspect-ratio-4-to-3, 75%);
 }
 
 .aspect-ratio-8-to-3 {
-	padding-bottom: var(--aspect-ratio-8-to-3);
+	padding-bottom: var(--aspect-ratio-8-to-3, 37.5%);
 }
 
 .aspect-ratio-16-to-9 {
-	padding-bottom: var(--aspect-ratio-16-to-9);
+	padding-bottom: var(--aspect-ratio-16-to-9, 56.25%);
 }
 
 .card-type-asset .aspect-ratio {
-	padding-bottom: var(--aspect-ratio-16-to-9);
+	padding-bottom: var(--aspect-ratio-16-to-9, 56.25%);
 }
 
 // Background and text color variants
@@ -34,6 +34,10 @@
 
 // Body
 
+body {
+	font-size: var(--font-size-base, $font-size-base);
+}
+
 #wrapper {
 	background-color: var(--body-bg, $body-bg);
 	color: var(--body-color, $body-color);
@@ -44,13 +48,13 @@
 
 .portlet {
 	.portlet-content {
-		background-color: var(--portlet-bg);
+		background-color: var(--portlet-bg, transparent);
 	}
 
 	@at-root .controls-visible {
 		.portlet-content-editable {
 			@include media-breakpoint-down(sm) {
-				border-color: var(--portlet-topper-border);
+				border-color: $portlet-topper-border;
 			}
 		}
 
@@ -59,7 +63,7 @@
 		.portlet.focus {
 			> .portlet-content-editable {
 				@include media-breakpoint-up(sm) {
-					border-color: var(--portlet-topper-border);
+					border-color: $portlet-topper-border;
 				}
 			}
 		}
@@ -68,19 +72,12 @@
 
 .portlet-layout {
 	.portlet-header {
-		margin-bottom: var(--portlet-header-margin-bottom);
+		margin-bottom: $portlet-header-margin-bottom;
 	}
 }
 
-.portlet-topper {
-	background-color: var(--portlet-topper-bg);
-	border-color: var(--portlet-topper-border);
-	border-radius: var(--portlet-topper-border-radius);
-	color: var(--portlet-topper-color);
-}
-
 // Theme footer
 
 #footer {
-	background-color: var(--brand-color-4);
+	background-color: var(--brand-color-4, #30313f);
 }
diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
index 82d331ed75119f..31e834f71b75a9 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/custom_properties/_custom_properties_variables.scss
@@ -17,20 +17,8 @@ $custom-properties-theme-colors: map-merge(
 	$custom-properties-theme-colors
 );
 
-:root {
-	// Portlet
-
-	--portlet-bg: transparent;
-	--portlet-content-border-radius: 0;
-	--portlet-header-margin-bottom: calc(
-		var(--spacer) * #{$portlet-header-margin-bottom}
-	);
-
+#wrapper {
 	--portlet-topper-bg: var(--primary);
-	--portlet-topper-border: var(--portlet-topper-bg);
-	--portlet-topper-border-radius: var(--border-radius-sm)
-		var(--border-radius-sm) 0 0;
 	--portlet-topper-color: var(--white);
 	--portlet-topper-link-color: var(--portlet-topper-color);
-	--portlet-topper-link-hover-color: var(--portlet-topper-link-color);
 }
diff --git a/modules/apps/frontend-theme/frontend-theme-classic/src/css/portlet/_variables_custom.scss b/modules/apps/frontend-theme/frontend-theme-classic/src/css/portlet/_variables_custom.scss
index d356c090bfd82c..2ead5e81d797b5 100644
--- a/modules/apps/frontend-theme/frontend-theme-classic/src/css/portlet/_variables_custom.scss
+++ b/modules/apps/frontend-theme/frontend-theme-classic/src/css/portlet/_variables_custom.scss
@@ -1,13 +1,25 @@
-$portlet-header-margin-bottom: map-get($spacers, 5);
+$portlet-header-margin-bottom: var(
+	--portlet-header-margin-bottom,
+	calc(var(--spacer) * #{map-get($spacers, 5)})
+);
 
-$portlet-topper-bg: $primary;
-$portlet-topper-border: $primary;
-$portlet-topper-color: $white;
-$portlet-topper-link-color: $white;
-$portlet-topper-link-hover-color: $white;
+$portlet-topper-bg: var(--portlet-topper-bg, var(--primary, $primary));
+$portlet-topper-border: var(
+	--portlet-topper-border,
+	var(--portlet-topper-bg, $primary)
+);
+$portlet-topper-color: var(--portlet-topper-color, var(--white, $white));
+$portlet-topper-link-color: var(
+	--portlet-topper-link-color,
+	var(--portlet-topper-color, $white)
+);
+$portlet-topper-link-hover-color: var(--portlet-topper-link-color, $white);
 
-$portlet-content-border-radius: 0;
-$portlet-topper-border-radius: 2px 2px 0 0;
+$portlet-content-border-radius: var(--portlet-content-border-radius, 0);
+$portlet-topper-border-radius: var(
+	--portlet-topper-border-radius,
+	var(--border-radius-sm, 2px) var(--border-radius-sm, 2px) 0 0
+);
 
 $portlet-decorate-bg: #fff;
 $portlet-decorate-border-color: $secondary-l3;