feat(@clayui/css): LPD-40080 Add new sticker variants sticker-outline-*

pat270 · pat270 · commit 86c852362fca · 2025-01-07T10:10:46.000-08:00
diff --git a/packages/clay-css/src/scss/atlas/variables/_globals.scss b/packages/clay-css/src/scss/atlas/variables/_globals.scss
@@ -86,6 +86,7 @@ $blue-l1: #338fff !default;
 $blue-l2: #66abff !default;
 $blue-l3: #97c5ff !default;
 $blue-l4: #cce3ff !default;
+$blue-l5: #e5f1ff !default;
 
 $indigo-d4: #0017e5 !default;
 $indigo-d3: #001aff !default;
@@ -96,6 +97,7 @@ $indigo-l1: #808cff !default;
 $indigo-l2: #99a3ff !default;
 $indigo-l3: #b2baff !default;
 $indigo-l4: #ccd1ff !default;
+$indigo-l5: #e5e8ff !default;
 
 $purple-d4: #7700cc !default;
 $purple-d3: #8600e6 !default;
@@ -106,6 +108,7 @@ $purple-l1: #bf66ff !default;
 $purple-l2: #ca80ff !default;
 $purple-l3: #d499ff !default;
 $purple-l4: #dfb3ff !default;
+$purple-l5: #f2e5ff !default;
 
 $pink-d4: #800048 !default;
 $pink-d3: #990057 !default;
@@ -116,6 +119,7 @@ $pink-l1: #ff4db2 !default;
 $pink-l2: #ff80c8 !default;
 $pink-l3: #ff99d3 !default;
 $pink-l4: #ffb3de !default;
+$pink-l5: #ffe5f4 !default;
 
 $red-d4: #800000 !default;
 $red-d3: #990000 !default;
@@ -126,6 +130,7 @@ $red-l1: #ff4d4d !default;
 $red-l2: #ff6666 !default;
 $red-l3: #ff8080 !default;
 $red-l4: #ff9999 !default;
+$red-l5: #ffe5e5 !default;
 
 $orange-d4: #662700 !default;
 $orange-d3: #803100 !default;
@@ -136,6 +141,7 @@ $orange-l1: #ff6200 !default;
 $orange-l2: #ff8133 !default;
 $orange-l3: #ffa166 !default;
 $orange-l4: #ffc099 !default;
+$orange-l5: #fff0e5 !default;
 
 $yellow-d4: #997000 !default;
 $yellow-d3: #b38900 !default;
@@ -146,6 +152,7 @@ $yellow-l1: #ffc933 !default;
 $yellow-l2: #ffd666 !default;
 $yellow-l3: #ffe499 !default;
 $yellow-l4: #fff1cc !default;
+$yellow-l5: #fff8e5 !default;
 
 $green-d4: #162d06 !default;
 $green-d3: #22430a !default;
@@ -156,6 +163,7 @@ $green-l1: #53a117 !default;
 $green-l2: #67c91d !default;
 $green-l3: #81e236 !default;
 $green-l4: #9de963 !default;
+$green-l5: #f1fce9 !default;
 
 $teal-d4: #092a25 !default;
 $teal-d3: #0d3f37 !default;
@@ -166,6 +174,7 @@ $teal-l1: #24a892 !default;
 $teal-l2: #42d7be !default;
 $teal-l3: #6ce0cc !default;
 $teal-l4: #96e9db !default;
+$teal-l5: #eafbf8 !default;
 
 $cyan-d4: #00334d !default;
 $cyan-d3: #004466 !default;
@@ -176,6 +185,7 @@ $cyan-l1: #0099e6 !default;
 $cyan-l2: #33bbff !default;
 $cyan-l3: #66ccff !default;
 $cyan-l4: #99ddff !default;
+$cyan-l5: #e5f6ff !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
@@ -84,6 +84,7 @@ $cadmin-blue-l1: #338fff !default;
 $cadmin-blue-l2: #66abff !default;
 $cadmin-blue-l3: #97c5ff !default;
 $cadmin-blue-l4: #cce3ff !default;
+$cadmin-blue-l5: #e5f1ff !default;
 
 $cadmin-indigo-d4: #0017e5 !default;
 $cadmin-indigo-d3: #001aff !default;
@@ -98,6 +99,7 @@ $cadmin-indigo-l1: #808cff !default;
 $cadmin-indigo-l2: #99a3ff !default;
 $cadmin-indigo-l3: #b2baff !default;
 $cadmin-indigo-l4: #ccd1ff !default;
+$cadmin-indigo-l5: #e5e8ff !default;
 
 $cadmin-purple-d4: #7700cc !default;
 $cadmin-purple-d3: #8600e6 !default;
@@ -112,6 +114,7 @@ $cadmin-purple-l1: #bf66ff !default;
 $cadmin-purple-l2: #ca80ff !default;
 $cadmin-purple-l3: #d499ff !default;
 $cadmin-purple-l4: #dfb3ff !default;
+$cadmin-purple-l5: #f2e5ff !default;
 
 $cadmin-pink-d4: #800048 !default;
 $cadmin-pink-d3: #990057 !default;
@@ -122,6 +125,7 @@ $cadmin-pink-l1: #ff4db2 !default;
 $cadmin-pink-l2: #ff80c8 !default;
 $cadmin-pink-l3: #ff99d3 !default;
 $cadmin-pink-l4: #ffb3de !default;
+$cadmin-pink-l5: #ffe5f4 !default;
 
 $cadmin-red-d4: #800000 !default;
 $cadmin-red-d3: #990000 !default;
@@ -132,6 +136,7 @@ $cadmin-red-l1: #ff4d4d !default;
 $cadmin-red-l2: #ff6666 !default;
 $cadmin-red-l3: #ff8080 !default;
 $cadmin-red-l4: #ff9999 !default;
+$cadmin-red-l5: #ffe5e5 !default;
 
 $cadmin-orange-d4: #662700 !default;
 $cadmin-orange-d3: #803100 !default;
@@ -146,6 +151,7 @@ $cadmin-orange-l1: #ff6200 !default;
 $cadmin-orange-l2: #ff8133 !default;
 $cadmin-orange-l3: #ffa166 !default;
 $cadmin-orange-l4: #ffc099 !default;
+$cadmin-orange-l5: #fff0e5 !default;
 
 $cadmin-yellow-d4: #997000 !default;
 $cadmin-yellow-d3: #b38900 !default;
@@ -160,6 +166,7 @@ $cadmin-yellow-l1: #ffc933 !default;
 $cadmin-yellow-l2: #ffd666 !default;
 $cadmin-yellow-l3: #ffe499 !default;
 $cadmin-yellow-l4: #fff1cc !default;
+$cadmin-yellow-l5: #fff8e5 !default;
 
 $cadmin-green-d4: #162d06 !default;
 $cadmin-green-d3: #22430a !default;
@@ -174,6 +181,7 @@ $cadmin-green-l1: #53a117 !default;
 $cadmin-green-l2: #67c91d !default;
 $cadmin-green-l3: #81e236 !default;
 $cadmin-green-l4: #9de963 !default;
+$cadmin-green-l5: #f1fce9 !default;
 
 $cadmin-teal-d4: #092a25 !default;
 $cadmin-teal-d3: #0d3f37 !default;
@@ -184,6 +192,7 @@ $cadmin-teal-l1: #24a892 !default;
 $cadmin-teal-l2: #42d7be !default;
 $cadmin-teal-l3: #6ce0cc !default;
 $cadmin-teal-l4: #96e9db !default;
+$cadmin-teal-l5: #eafbf8 !default;
 
 $cadmin-cyan-d4: #00334d !default;
 $cadmin-cyan-d3: #004466 !default;
@@ -194,6 +203,7 @@ $cadmin-cyan-l1: #0099e6 !default;
 $cadmin-cyan-l2: #33bbff !default;
 $cadmin-cyan-l3: #66ccff !default;
 $cadmin-cyan-l4: #99ddff !default;
+$cadmin-cyan-l5: #e5f6ff !default;
 
 $cadmin-colors: () !default;
 $cadmin-colors: map-merge(
diff --git a/packages/clay-css/src/scss/cadmin/variables/_stickers.scss b/packages/clay-css/src/scss/cadmin/variables/_stickers.scss
@@ -338,6 +338,106 @@ $cadmin-sticker-dark: map-deep-merge(
 	$cadmin-sticker-dark
 );
 
+$cadmin-sticker-outline-0: () !default;
+$cadmin-sticker-outline-0: map-deep-merge(
+	(
+		background-color: $cadmin-light,
+		border: 1px solid $cadmin-dark,
+		color: $cadmin-dark,
+	),
+	$cadmin-sticker-outline-0
+);
+
+$cadmin-sticker-outline-1: () !default;
+$cadmin-sticker-outline-1: map-deep-merge(
+	(
+		background-color: $cadmin-purple-l5,
+		border: 1px solid $cadmin-purple,
+		color: $cadmin-purple,
+	),
+	$cadmin-sticker-outline-1
+);
+
+$cadmin-sticker-outline-2: () !default;
+$cadmin-sticker-outline-2: map-deep-merge(
+	(
+		background-color: $cadmin-yellow-l5,
+		border: 1px solid $cadmin-yellow-d3,
+		color: $cadmin-yellow-d3,
+	),
+	$cadmin-sticker-outline-2
+);
+
+$cadmin-sticker-outline-3: () !default;
+$cadmin-sticker-outline-3: map-deep-merge(
+	(
+		background-color: $cadmin-green-l5,
+		border: 1px solid $cadmin-green,
+		color: $cadmin-green,
+	),
+	$cadmin-sticker-outline-3
+);
+
+$cadmin-sticker-outline-4: () !default;
+$cadmin-sticker-outline-4: map-deep-merge(
+	(
+		background-color: $cadmin-red-l5,
+		border: 1px solid $cadmin-red,
+		color: $cadmin-red,
+	),
+	$cadmin-sticker-outline-4
+);
+
+$cadmin-sticker-outline-5: () !default;
+$cadmin-sticker-outline-5: map-deep-merge(
+	(
+		background-color: $cadmin-orange-l5,
+		border: 1px solid $cadmin-orange,
+		color: $cadmin-orange,
+	),
+	$cadmin-sticker-outline-5
+);
+
+$cadmin-sticker-outline-6: () !default;
+$cadmin-sticker-outline-6: map-deep-merge(
+	(
+		background-color: $cadmin-teal-l5,
+		border: 1px solid $cadmin-teal,
+		color: $cadmin-teal,
+	),
+	$cadmin-sticker-outline-6
+);
+
+$cadmin-sticker-outline-7: () !default;
+$cadmin-sticker-outline-7: map-deep-merge(
+	(
+		background-color: $cadmin-cyan-l5,
+		border: 1px solid $cadmin-cyan,
+		color: $cadmin-cyan,
+	),
+	$cadmin-sticker-outline-7
+);
+
+$cadmin-sticker-outline-8: () !default;
+$cadmin-sticker-outline-8: map-deep-merge(
+	(
+		background-color: $cadmin-pink-l5,
+		border: 1px solid $cadmin-pink,
+		color: $cadmin-pink-d4,
+	),
+	$cadmin-sticker-outline-8
+);
+
+$cadmin-sticker-outline-9: () !default;
+$cadmin-sticker-outline-9: map-deep-merge(
+	(
+		background-color: $cadmin-white,
+		border: 1px solid $cadmin-dark-l2,
+		color: $cadmin-dark-l2,
+	),
+	$cadmin-sticker-outline-9
+);
+
 $cadmin-sticker-palette: () !default;
 $cadmin-sticker-palette: map-deep-merge(
 	(
@@ -349,6 +449,16 @@ $cadmin-sticker-palette: map-deep-merge(
 		danger: $cadmin-sticker-danger,
 		light: $cadmin-sticker-light,
 		dark: $cadmin-sticker-dark,
+		'.sticker-outline-0': $cadmin-sticker-outline-0,
+		'.sticker-outline-1': $cadmin-sticker-outline-1,
+		'.sticker-outline-2': $cadmin-sticker-outline-2,
+		'.sticker-outline-3': $cadmin-sticker-outline-3,
+		'.sticker-outline-4': $cadmin-sticker-outline-4,
+		'.sticker-outline-5': $cadmin-sticker-outline-5,
+		'.sticker-outline-6': $cadmin-sticker-outline-6,
+		'.sticker-outline-7': $cadmin-sticker-outline-7,
+		'.sticker-outline-8': $cadmin-sticker-outline-8,
+		'.sticker-outline-9': $cadmin-sticker-outline-9,
 	),
 	$cadmin-sticker-palette
 );
diff --git a/packages/clay-css/src/scss/variables/_globals.scss b/packages/clay-css/src/scss/variables/_globals.scss
@@ -87,6 +87,7 @@ $blue-l1: #338fff !default;
 $blue-l2: #66abff !default;
 $blue-l3: #97c5ff !default;
 $blue-l4: #cce3ff !default;
+$blue-l5: #e5f1ff !default;
 
 $indigo-d4: #0017e5 !default;
 $indigo-d3: #001aff !default;
@@ -97,6 +98,7 @@ $indigo-l1: #808cff !default;
 $indigo-l2: #99a3ff !default;
 $indigo-l3: #b2baff !default;
 $indigo-l4: #ccd1ff !default;
+$indigo-l5: #e5e8ff !default;
 
 $purple-d4: #7700cc !default;
 $purple-d3: #8600e6 !default;
@@ -107,6 +109,7 @@ $purple-l1: #bf66ff !default;
 $purple-l2: #ca80ff !default;
 $purple-l3: #d499ff !default;
 $purple-l4: #dfb3ff !default;
+$purple-l5: #f2e5ff !default;
 
 $pink-d4: #800048 !default;
 $pink-d3: #990057 !default;
@@ -117,6 +120,7 @@ $pink-l1: #ff4db2 !default;
 $pink-l2: #ff80c8 !default;
 $pink-l3: #ff99d3 !default;
 $pink-l4: #ffb3de !default;
+$pink-l5: #ffe5f4 !default;
 
 $red-d4: #800000 !default;
 $red-d3: #990000 !default;
@@ -127,6 +131,7 @@ $red-l1: #ff4d4d !default;
 $red-l2: #ff6666 !default;
 $red-l3: #ff8080 !default;
 $red-l4: #ff9999 !default;
+$red-l5: #ffe5e5 !default;
 
 $orange-d4: #662700 !default;
 $orange-d3: #803100 !default;
@@ -137,6 +142,7 @@ $orange-l1: #ff6200 !default;
 $orange-l2: #ff8133 !default;
 $orange-l3: #ffa166 !default;
 $orange-l4: #ffc099 !default;
+$orange-l5: #fff0e5 !default;
 
 $yellow-d4: #997000 !default;
 $yellow-d3: #b38900 !default;
@@ -147,6 +153,7 @@ $yellow-l1: #ffc933 !default;
 $yellow-l2: #ffd666 !default;
 $yellow-l3: #ffe499 !default;
 $yellow-l4: #fff1cc !default;
+$yellow-l5: #fff8e5 !default;
 
 $green-d4: #162d06 !default;
 $green-d3: #22430a !default;
@@ -157,6 +164,7 @@ $green-l1: #53a117 !default;
 $green-l2: #67c91d !default;
 $green-l3: #81e236 !default;
 $green-l4: #9de963 !default;
+$green-l5: #f1fce9 !default;
 
 $teal-d4: #092a25 !default;
 $teal-d3: #0d3f37 !default;
@@ -167,6 +175,7 @@ $teal-l1: #24a892 !default;
 $teal-l2: #42d7be !default;
 $teal-l3: #6ce0cc !default;
 $teal-l4: #96e9db !default;
+$teal-l5: #eafbf8 !default;
 
 $cyan-d4: #00334d !default;
 $cyan-d3: #004466 !default;
@@ -177,6 +186,7 @@ $cyan-l1: #0099e6 !default;
 $cyan-l2: #33bbff !default;
 $cyan-l3: #66ccff !default;
 $cyan-l4: #99ddff !default;
+$cyan-l5: #e5f6ff !default;
 
 $colors: () !default;
 $colors: map-merge(
diff --git a/packages/clay-css/src/scss/variables/_stickers.scss b/packages/clay-css/src/scss/variables/_stickers.scss
