From 083c268c6113425790efa92fb121e0d9d7a22fd4 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 10 Oct 2024 13:55:31 -0700
Subject: [PATCH] feat(@clayui/css): LPD-39299 Adds d4-l1 for colors

---
 .../src/scss/atlas/variables/_globals.scss    | 89 +++++++++++++++++++
 .../src/scss/cadmin/variables/_globals.scss   | 89 +++++++++++++++++++
 .../clay-css/src/scss/variables/_globals.scss | 89 +++++++++++++++++++
 3 files changed, 267 insertions(+)

diff --git a/packages/clay-css/src/scss/atlas/variables/_globals.scss b/packages/clay-css/src/scss/atlas/variables/_globals.scss
index f6bb605c10..2324826ecb 100644
--- a/packages/clay-css/src/scss/atlas/variables/_globals.scss
+++ b/packages/clay-css/src/scss/atlas/variables/_globals.scss
@@ -77,16 +77,105 @@ $grays: map-merge(
 	$grays
 );
 
+$blue-d4: #004799 !default;
+$blue-d3: #0053b3 !default;
+$blue-d2: #005fcc !default;
+$blue-d1: #006be6 !default;
 $blue: if($enable-lexicon-flat-colors, #4b9fff, #0b5fff) !default;
+$blue-l1: #338fff !default;
+$blue-l2: #66abff !default;
+$blue-l3: #97c5ff !default;
+$blue-l4: #cce3ff !default;
+
+$indigo-d4: #0017e5 !default;
+$indigo-d3: #001aff !default;
+$indigo-d2: #1a30ff !default;
+$indigo-d1: #3347ff !default;
 $indigo: if($enable-lexicon-flat-colors, #7785ff, #6610f2) !default;
+$indigo-l1: #808cff !default;
+$indigo-l2: #99a3ff !default;
+$indigo-l3: #b2baff !default;
+$indigo-l4: #ccd1ff !default;
+
+$purple-d4: #7700cc !default;
+$purple-d3: #8600e6 !default;
+$purple-d2: #9500ff !default;
+$purple-d1: #9f1aff !default;
 $purple: if($enable-lexicon-flat-colors, #af78ff, #6f42c1) !default;
+$purple-l1: #bf66ff !default;
+$purple-l2: #ca80ff !default;
+$purple-l3: #d499ff !default;
+$purple-l4: #dfb3ff !default;
+
+$pink-d4: #800048 !default;
+$pink-d3: #990057 !default;
+$pink-d2: #b30065 !default;
+$pink-d1: #cc0074 !default;
 $pink: if($enable-lexicon-flat-colors, #ff73c3, #e83e8c) !default;
+$pink-l1: #ff4db2 !default;
+$pink-l2: #ff80c8 !default;
+$pink-l3: #ff99d3 !default;
+$pink-l4: #ffb3de !default;
+
+$red-d4: #800000 !default;
+$red-d3: #990000 !default;
+$red-d2: #b30000 !default;
+$red-d1: #cc0000 !default;
 $red: if($enable-lexicon-flat-colors, #ff5f5f, #da1414) !default;
+$red-l1: #ff4d4d !default;
+$red-l2: #ff6666 !default;
+$red-l3: #ff8080 !default;
+$red-l4: #ff9999 !default;
+
+$orange-d4: #662700 !default;
+$orange-d3: #803100 !default;
+$orange-d2: #993b00 !default;
+$orange-d1: #b34400 !default;
 $orange: if($enable-lexicon-flat-colors, #ffb46e, #b95000) !default;
+$orange-l1: #ff6200 !default;
+$orange-l2: #ff8133 !default;
+$orange-l3: #ffa166 !default;
+$orange-l4: #ffc099 !default;
+
+$yellow-d4: #997000 !default;
+$yellow-d3: #b38900 !default;
+$yellow-d2: #cc9600 !default;
+$yellow-d1: #e6a800 !default;
 $yellow: if($enable-lexicon-flat-colors, #ffd76e, #ffc107) !default;
+$yellow-l1: #ffc933 !default;
+$yellow-l2: #ffd666 !default;
+$yellow-l3: #ffe499 !default;
+$yellow-l4: #fff1cc !default;
+
+$green-d4: #162d06 !default;
+$green-d3: #22430a !default;
+$green-d2: #2e590d !default;
+$green-d1: #397010 !default;
 $green: if($enable-lexicon-flat-colors, #9be169, #287d3d) !default;
+$green-l1: #53a117 !default;
+$green-l2: #67c91d !default;
+$green-l3: #81e236 !default;
+$green-l4: #9de963 !default;
+
+$teal-d4: #092a25 !default;
+$teal-d3: #0d3f37 !default;
+$teal-d2: #125449 !default;
+$teal-d1: #16695b !default;
 $teal: if($enable-lexicon-flat-colors, #50d2a0, #20c997) !default;
+$teal-l1: #24a892 !default;
+$teal-l2: #42d7be !default;
+$teal-l3: #6ce0cc !default;
+$teal-l4: #96e9db !default;
+
+$cyan-d4: #00334d !default;
+$cyan-d3: #004466 !default;
+$cyan-d2: #005580 !default;
+$cyan-d1: #006699 !default;
 $cyan: if($enable-lexicon-flat-colors, #5fc8ff, #17a2b8) !default;
+$cyan-l1: #0099e6 !default;
+$cyan-l2: #33bbff !default;
+$cyan-l3: #66ccff !default;
+$cyan-l4: #99ddff !default;
 
 $colors: () !default;
 $colors: map-merge(
diff --git a/packages/clay-css/src/scss/cadmin/variables/_globals.scss b/packages/clay-css/src/scss/cadmin/variables/_globals.scss
index b9862ffc50..f41ac98e4d 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_globals.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_globals.scss
@@ -75,36 +75,125 @@ $cadmin-grays: map-merge(
 	$cadmin-grays
 );
 
+$cadmin-blue-d4: #004799 !default;
+$cadmin-blue-d3: #0053b3 !default;
+$cadmin-blue-d2: #005fcc !default;
+$cadmin-blue-d1: #006be6 !default;
 $cadmin-blue: if($cadmin-enable-lexicon-flat-colors, #4b9fff, #0b5fff) !default;
+$cadmin-blue-l1: #338fff !default;
+$cadmin-blue-l2: #66abff !default;
+$cadmin-blue-l3: #97c5ff !default;
+$cadmin-blue-l4: #cce3ff !default;
+
+$cadmin-indigo-d4: #0017e5 !default;
+$cadmin-indigo-d3: #001aff !default;
+$cadmin-indigo-d2: #1a30ff !default;
+$cadmin-indigo-d1: #3347ff !default;
 $cadmin-indigo: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#7785ff,
 	#6610f2
 ) !default;
+$cadmin-indigo-l1: #808cff !default;
+$cadmin-indigo-l2: #99a3ff !default;
+$cadmin-indigo-l3: #b2baff !default;
+$cadmin-indigo-l4: #ccd1ff !default;
+
+$cadmin-purple-d4: #7700cc !default;
+$cadmin-purple-d3: #8600e6 !default;
+$cadmin-purple-d2: #9500ff !default;
+$cadmin-purple-d1: #9f1aff !default;
 $cadmin-purple: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#af78ff,
 	#6f42c1
 ) !default;
+$cadmin-purple-l1: #bf66ff !default;
+$cadmin-purple-l2: #ca80ff !default;
+$cadmin-purple-l3: #d499ff !default;
+$cadmin-purple-l4: #dfb3ff !default;
+
+$cadmin-pink-d4: #800048 !default;
+$cadmin-pink-d3: #990057 !default;
+$cadmin-pink-d2: #b30065 !default;
+$cadmin-pink-d1: #cc0074 !default;
 $cadmin-pink: if($cadmin-enable-lexicon-flat-colors, #ff73c3, #e83e8c) !default;
+$cadmin-pink-l1: #ff4db2 !default;
+$cadmin-pink-l2: #ff80c8 !default;
+$cadmin-pink-l3: #ff99d3 !default;
+$cadmin-pink-l4: #ffb3de !default;
+
+$cadmin-red-d4: #800000 !default;
+$cadmin-red-d3: #990000 !default;
+$cadmin-red-d2: #b30000 !default;
+$cadmin-red-d1: #cc0000 !default;
 $cadmin-red: if($cadmin-enable-lexicon-flat-colors, #ff5f5f, #da1414) !default;
+$cadmin-red-l1: #ff4d4d !default;
+$cadmin-red-l2: #ff6666 !default;
+$cadmin-red-l3: #ff8080 !default;
+$cadmin-red-l4: #ff9999 !default;
+
+$cadmin-orange-d4: #662700 !default;
+$cadmin-orange-d3: #803100 !default;
+$cadmin-orange-d2: #993b00 !default;
+$cadmin-orange-d1: #b34400 !default;
 $cadmin-orange: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#ffb46e,
 	#b95000
 ) !default;
+$cadmin-orange-l1: #ff6200 !default;
+$cadmin-orange-l2: #ff8133 !default;
+$cadmin-orange-l3: #ffa166 !default;
+$cadmin-orange-l4: #ffc099 !default;
+
+$cadmin-yellow-d4: #997000 !default;
+$cadmin-yellow-d3: #b38900 !default;
+$cadmin-yellow-d2: #cc9600 !default;
+$cadmin-yellow-d1: #e6a800 !default;
 $cadmin-yellow: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#ffd76e,
 	#ffc107
 ) !default;
+$cadmin-yellow-l1: #ffc933 !default;
+$cadmin-yellow-l2: #ffd666 !default;
+$cadmin-yellow-l3: #ffe499 !default;
+$cadmin-yellow-l4: #fff1cc !default;
+
+$cadmin-green-d4: #162d06 !default;
+$cadmin-green-d3: #22430a !default;
+$cadmin-green-d2: #2e590d !default;
+$cadmin-green-d1: #397010 !default;
 $cadmin-green: if(
 	$cadmin-enable-lexicon-flat-colors,
 	#9be169,
 	#287d3d
 ) !default;
+$cadmin-green-l1: #53a117 !default;
+$cadmin-green-l2: #67c91d !default;
+$cadmin-green-l3: #81e236 !default;
+$cadmin-green-l4: #9de963 !default;
+
+$cadmin-teal-d4: #092a25 !default;
+$cadmin-teal-d3: #0d3f37 !default;
+$cadmin-teal-d2: #125449 !default;
+$cadmin-teal-d1: #16695b !default;
 $cadmin-teal: if($cadmin-enable-lexicon-flat-colors, #50d2a0, #20c997) !default;
+$cadmin-teal-l1: #24a892 !default;
+$cadmin-teal-l2: #42d7be !default;
+$cadmin-teal-l3: #6ce0cc !default;
+$cadmin-teal-l4: #96e9db !default;
+
+$cadmin-cyan-d4: #00334d !default;
+$cadmin-cyan-d3: #004466 !default;
+$cadmin-cyan-d2: #005580 !default;
+$cadmin-cyan-d1: #006699 !default;
 $cadmin-cyan: if($cadmin-enable-lexicon-flat-colors, #5fc8ff, #17a2b8) !default;
+$cadmin-cyan-l1: #0099e6 !default;
+$cadmin-cyan-l2: #33bbff !default;
+$cadmin-cyan-l3: #66ccff !default;
+$cadmin-cyan-l4: #99ddff !default;
 
 $cadmin-colors: () !default;
 $cadmin-colors: map-merge(
diff --git a/packages/clay-css/src/scss/variables/_globals.scss b/packages/clay-css/src/scss/variables/_globals.scss
index 074b3086d4..a496d14cb5 100644
--- a/packages/clay-css/src/scss/variables/_globals.scss
+++ b/packages/clay-css/src/scss/variables/_globals.scss
@@ -78,16 +78,105 @@ $grays: map-merge(
 	$grays
 );
 
+$blue-d4: #004799 !default;
+$blue-d3: #0053b3 !default;
+$blue-d2: #005fcc !default;
+$blue-d1: #006be6 !default;
 $blue: #007bff !default;
+$blue-l1: #338fff !default;
+$blue-l2: #66abff !default;
+$blue-l3: #97c5ff !default;
+$blue-l4: #cce3ff !default;
+
+$indigo-d4: #0017e5 !default;
+$indigo-d3: #001aff !default;
+$indigo-d2: #1a30ff !default;
+$indigo-d1: #3347ff !default;
 $indigo: #6610f2 !default;
+$indigo-l1: #808cff !default;
+$indigo-l2: #99a3ff !default;
+$indigo-l3: #b2baff !default;
+$indigo-l4: #ccd1ff !default;
+
+$purple-d4: #7700cc !default;
+$purple-d3: #8600e6 !default;
+$purple-d2: #9500ff !default;
+$purple-d1: #9f1aff !default;
 $purple: #6f42c1 !default;
+$purple-l1: #bf66ff !default;
+$purple-l2: #ca80ff !default;
+$purple-l3: #d499ff !default;
+$purple-l4: #dfb3ff !default;
+
+$pink-d4: #800048 !default;
+$pink-d3: #990057 !default;
+$pink-d2: #b30065 !default;
+$pink-d1: #cc0074 !default;
 $pink: #e83e8c !default;
+$pink-l1: #ff4db2 !default;
+$pink-l2: #ff80c8 !default;
+$pink-l3: #ff99d3 !default;
+$pink-l4: #ffb3de !default;
+
+$red-d4: #800000 !default;
+$red-d3: #990000 !default;
+$red-d2: #b30000 !default;
+$red-d1: #cc0000 !default;
 $red: #dc3545 !default;
+$red-l1: #ff4d4d !default;
+$red-l2: #ff6666 !default;
+$red-l3: #ff8080 !default;
+$red-l4: #ff9999 !default;
+
+$orange-d4: #662700 !default;
+$orange-d3: #803100 !default;
+$orange-d2: #993b00 !default;
+$orange-d1: #b34400 !default;
 $orange: #fd7e14 !default;
+$orange-l1: #ff6200 !default;
+$orange-l2: #ff8133 !default;
+$orange-l3: #ffa166 !default;
+$orange-l4: #ffc099 !default;
+
+$yellow-d4: #997000 !default;
+$yellow-d3: #b38900 !default;
+$yellow-d2: #cc9600 !default;
+$yellow-d1: #e6a800 !default;
 $yellow: #ffc107 !default;
+$yellow-l1: #ffc933 !default;
+$yellow-l2: #ffd666 !default;
+$yellow-l3: #ffe499 !default;
+$yellow-l4: #fff1cc !default;
+
+$green-d4: #162d06 !default;
+$green-d3: #22430a !default;
+$green-d2: #2e590d !default;
+$green-d1: #397010 !default;
 $green: #28a745 !default;
+$green-l1: #53a117 !default;
+$green-l2: #67c91d !default;
+$green-l3: #81e236 !default;
+$green-l4: #9de963 !default;
+
+$teal-d4: #092a25 !default;
+$teal-d3: #0d3f37 !default;
+$teal-d2: #125449 !default;
+$teal-d1: #16695b !default;
 $teal: #20c997 !default;
+$teal-l1: #24a892 !default;
+$teal-l2: #42d7be !default;
+$teal-l3: #6ce0cc !default;
+$teal-l4: #96e9db !default;
+
+$cyan-d4: #00334d !default;
+$cyan-d3: #004466 !default;
+$cyan-d2: #005580 !default;
+$cyan-d1: #006699 !default;
 $cyan: #17a2b8 !default;
+$cyan-l1: #0099e6 !default;
+$cyan-l2: #33bbff !default;
+$cyan-l3: #66ccff !default;
+$cyan-l4: #99ddff !default;
 
 $colors: () !default;
 $colors: map-merge(