From df9d044d82e5c7962b9f284db2cc4361b0b868c2 Mon Sep 17 00:00:00 2001
From: JC Estibariz <jestibariz@bluecatnetworks.com>
Date: Wed, 8 Nov 2023 15:45:32 -0500
Subject: [PATCH] fix: update colours and palettes from Carbon v11

---
 packages/pelagos/defs/colors.yaml      |   4 +-
 packages/pelagos/defs/themes-meta.yaml |  40 +++++++
 packages/pelagos/defs/themes.yaml      | 146 ++++++++++++++++---------
 packages/pelagos/less/colors.less      |  40 +++----
 packages/pelagos/less/layers.less      |   3 +
 packages/pelagos/less/themes.less      | 146 ++++++++++++++++---------
 6 files changed, 251 insertions(+), 128 deletions(-)

diff --git a/packages/pelagos/defs/colors.yaml b/packages/pelagos/defs/colors.yaml
index 7ccfb658..49929ad8 100644
--- a/packages/pelagos/defs/colors.yaml
+++ b/packages/pelagos/defs/colors.yaml
@@ -12,8 +12,8 @@ yellow:
   normal: ['#fcf4d6', '#fddc69', '#f1c21b', '#d2a106', '#b28600', '#8e6a00', '#684e00', '#483700', '#302400', '#1c1500']
   hover: ['#f8e6a0', '#fccd27', '#ddb00e', '#bc9005', '#9e7700', '#755800', '#806000', '#5c4600', '#3d2e00', '#332600']
 orange:
-  normal: ['#fcf3e7', '#f9dcbb', '#f3bd7d', '#ec9008', '#d47300', '#a85b00', '#7c4200', '#543000', '#381e00', '#201200']
-  hover: ['#fae4ca', '#f6ca99', '#efa64a', '#e27b00', '#b86401', '#8e4e01', '#975101', '#693b01', '#492800', '#3b2200']
+  normal: ['#fff2e8', '#ffd9be', '#ffb784', '#ff832b', '#eb6200', '#ba4e00', '#8a3800', '#5e2900', '#3e1a00', '#231000']
+  hover: ['#ffe2cc', '#ffc69e', '#ff9d57', '#fa6800', '#cc5500', '#9e4200', '#a84400', '#753300', '#522200', '#421e00']
 red:
   normal: ['#fff1f1', '#ffd7d9', '#ffb3b8', '#ff8389', '#fa4d56', '#da1e28', '#a2191f', '#750e13', '#520408', '#2d0709']
   hover: ['#ffe0e0', '#ffc2c5', '#ff99a0', '#ff6168', '#ee0713', '#b81922', '#c21e25', '#921118', '#66050a', '#540d11']
diff --git a/packages/pelagos/defs/themes-meta.yaml b/packages/pelagos/defs/themes-meta.yaml
index d841deba..4c921b1f 100644
--- a/packages/pelagos/defs/themes-meta.yaml
+++ b/packages/pelagos/defs/themes-meta.yaml
@@ -206,6 +206,18 @@ border-strong-03:
   group: border
   set: layer-03
   properties: [border]
+border-tile-01:
+  group: border
+  set: layer-01
+  properties: [border]
+border-tile-02:
+  group: border
+  set: layer-02
+  properties: [border]
+border-tile-03:
+  group: border
+  set: layer-03
+  properties: [border]
 border-inverse:
   group: border
   set: base
@@ -270,6 +282,14 @@ link-inverse:
   group: link
   set: base
   properties: [color]
+link-inverse-active:
+  group: link
+  set: base
+  properties: [color]
+link-inverse-hover:
+  group: link
+  set: base
+  properties: [color]
 link-visited:
   group: link
   set: base
@@ -298,6 +318,10 @@ icon-disabled:
   group: icon
   set: base
   properties: []
+icon-interactive:
+  group: icon
+  set: base
+  properties: []
 support-error:
   group: support
   set: base
@@ -410,6 +434,22 @@ button-tertiary-active:
   group: button
   set: base
   properties: []
+button-danger-primary:
+  group: button
+  set: base
+  properties: []
+button-danger-secondary:
+  group: button
+  set: base
+  properties: []
+button-danger-hover:
+  group: button
+  set: base
+  properties: []
+button-danger-active:
+  group: button
+  set: base
+  properties: []
 button-disabled:
   group: button
   set: base
diff --git a/packages/pelagos/defs/themes.yaml b/packages/pelagos/defs/themes.yaml
index 08455fa2..5d2e134e 100644
--- a/packages/pelagos/defs/themes.yaml
+++ b/packages/pelagos/defs/themes.yaml
@@ -2,11 +2,11 @@ white:
   background: white
   background-inverse: gray-80
   background-brand: blue-60
-  background-active: gray-30
-  background-hover: gray-10-hover
+  background-active: gray-50/50%
+  background-hover: gray-50/12%
   background-inverse-hover: gray-80-hover
-  background-selected: gray-20
-  background-selected-hover: gray-20-hover
+  background-selected: gray-50/20%
+  background-selected-hover: gray-50/32%
   layer-01: gray-10
   layer-active-01: gray-30
   layer-hover-01: gray-10-hover
@@ -42,38 +42,44 @@ white:
   field-hover-03: gray-10-hover
   field-disabled: gray-10
   border-subtle-00: gray-20
-  border-subtle-01: gray-20
+  border-subtle-01: gray-30
   border-subtle-selected-01: gray-30
   border-subtle-02: gray-20
   border-subtle-selected-02: gray-30
-  border-subtle-03: gray-20
+  border-subtle-03: gray-30
   border-subtle-selected-03: gray-30
   border-strong-01: gray-50
   border-strong-02: gray-50
   border-strong-03: gray-50
+  border-tile-01: gray-30
+  border-tile-02: gray-40
+  border-tile-03: gray-30
   border-inverse: gray-100
   border-interactive: blue-60
-  border-disabled: gray-10
+  border-disabled: gray-30
   text-primary: gray-100
   text-secondary: gray-70
-  text-placeholder: gray-60
+  text-placeholder: gray-40
   text-helper: gray-60
   text-error: red-60
   text-inverse: white
   text-on-color: white
   text-on-color-disabled: gray-50
-  text-disabled: gray-30
+  text-disabled: gray-100/25%
   link-primary: blue-60
   link-primary-hover: blue-70
   link-secondary: blue-70
   link-inverse: blue-40
   link-visited: purple-60
+  link-inverse-active: gray-10
+  link-inverse-hover: blue-30
   icon-primary: gray-100
   icon-secondary: gray-70
   icon-inverse: white
   icon-on-color: white
   icon-on-color-disabled: gray-50
-  icon-disabled: gray-30
+  icon-disabled: gray-100/25%
+  icon-interactive: blue-60
   support-error: red-60
   support-success: green-50
   support-warning: yellow-30
@@ -102,6 +108,10 @@ white:
   button-tertiary: blue-60
   button-tertiary-hover: blue-60-hover
   button-tertiary-active: blue-80
+  button-danger-primary: red-60
+  button-danger-secondary: red-60
+  button-danger-hover: red-60-hover
+  button-danger-active: red-80
   button-disabled: gray-30
   toggle-off: gray-50
   toggle-off-active: gray-70
@@ -160,11 +170,11 @@ cg00:
   background: white
   background-inverse: cool-gray-80
   background-brand: cyan-60
-  background-active: cool-gray-30
-  background-hover: cool-gray-10-hover
+  background-active: cool-gray-50/50%
+  background-hover: cool-gray-50/12%
   background-inverse-hover: cool-gray-80-hover
-  background-selected: cool-gray-20
-  background-selected-hover: cool-gray-20-hover
+  background-selected: cool-gray-50/20%
+  background-selected-hover: cool-gray-50/32%
   layer-01: cool-gray-10
   layer-active-01: cool-gray-30
   layer-hover-01: cool-gray-10-hover
@@ -200,38 +210,44 @@ cg00:
   field-hover-03: cool-gray-10-hover
   field-disabled: gray-10
   border-subtle-00: cool-gray-20
-  border-subtle-01: cool-gray-20
+  border-subtle-01: cool-gray-30
   border-subtle-selected-01: cool-gray-30
   border-subtle-02: cool-gray-20
   border-subtle-selected-02: cool-gray-30
-  border-subtle-03: cool-gray-20
+  border-subtle-03: cool-gray-30
   border-subtle-selected-03: cool-gray-30
   border-strong-01: cool-gray-50
   border-strong-02: cool-gray-50
   border-strong-03: cool-gray-50
+  border-tile-01: cool-gray-30
+  border-tile-02: cool-gray-40
+  border-tile-03: cool-gray-30
   border-inverse: cool-gray-100
   border-interactive: cyan-60
-  border-disabled: gray-10
+  border-disabled: gray-30
   text-primary: gray-100
   text-secondary: gray-70
-  text-placeholder: gray-60
+  text-placeholder: gray-40
   text-helper: gray-60
   text-error: red-60
   text-inverse: white
   text-on-color: white
   text-on-color-disabled: gray-50
-  text-disabled: gray-30
+  text-disabled: gray-100/25%
   link-primary: cyan-70
   link-primary-hover: cyan-80
   link-secondary: cyan-80
   link-inverse: cyan-40
   link-visited: purple-60
+  link-inverse-active: gray-10
+  link-inverse-hover: cyan-30
   icon-primary: cool-gray-100
   icon-secondary: cool-gray-70
   icon-inverse: white
   icon-on-color: white
   icon-on-color-disabled: gray-50
-  icon-disabled: gray-30
+  icon-disabled: gray-100/25%
+  icon-interactive: cyan-60
   support-error: red-60
   support-success: green-50
   support-warning: yellow-30
@@ -260,6 +276,10 @@ cg00:
   button-tertiary: cyan-60
   button-tertiary-hover: cyan-60-hover
   button-tertiary-active: cyan-80
+  button-danger-primary: red-60
+  button-danger-secondary: red-60
+  button-danger-hover: red-60-hover
+  button-danger-active: red-80
   button-disabled: gray-30
   toggle-off: cool-gray-50
   toggle-off-active: cool-gray-70
@@ -318,11 +338,11 @@ yg100:
   background: cyan-gray-100
   background-inverse: cyan-gray-10
   background-brand: cyan-60
-  background-active: cyan-gray-80
-  background-hover: cyan-gray-100-hover
+  background-active: cyan-gray-50/40%
+  background-hover: cyan-gray-50/16%
   background-inverse-hover: cyan-gray-10-hover
-  background-selected: cyan-gray-90
-  background-selected-hover: cyan-gray-90-hover
+  background-selected: cyan-gray-50/24%
+  background-selected-hover: cyan-gray-50/32%
   layer-01: cyan-gray-90
   layer-active-01: cyan-gray-70
   layer-hover-01: cyan-gray-90-hover
@@ -367,29 +387,35 @@ yg100:
   border-strong-01: cyan-gray-60
   border-strong-02: cyan-gray-50
   border-strong-03: cyan-gray-40
+  border-tile-01: cyan-gray-70
+  border-tile-02: cyan-gray-60
+  border-tile-03: cyan-gray-50
   border-inverse: cyan-gray-10
   border-interactive: cyan-50
-  border-disabled: gray-90
+  border-disabled: gray-50/50%
   text-primary: gray-10
   text-secondary: gray-30
-  text-placeholder: gray-50
+  text-placeholder: gray-10/40%
   text-helper: gray-40
-  text-error: red-30
+  text-error: red-40
   text-inverse: gray-100
   text-on-color: white
-  text-on-color-disabled: gray-50
-  text-disabled: gray-70
+  text-on-color-disabled: white/25%
+  text-disabled: gray-10/25%
   link-primary: cyan-40
   link-primary-hover: cyan-30
   link-secondary: cyan-30
   link-inverse: cyan-60
   link-visited: purple-40
+  link-inverse-active: gray-100
+  link-inverse-hover: cyan-70
   icon-primary: cyan-gray-10
   icon-secondary: cyan-gray-30
   icon-inverse: cyan-gray-100
   icon-on-color: white
-  icon-on-color-disabled: gray-50
-  icon-disabled: gray-70
+  icon-on-color-disabled: white/25%
+  icon-disabled: gray-10/25%
+  icon-interactive: white
   support-error: red-50
   support-success: green-40
   support-warning: yellow-30
@@ -397,17 +423,17 @@ yg100:
   support-error-inverse: red-60
   support-success-inverse: green-60
   support-warning-inverse: yellow-30
-  support-info-inverse: blue-60
+  support-info-inverse: blue-70
   support-caution-minor: yellow-30
   support-caution-major: orange-40
   support-caution-undefined: purple-50
   focus: cyan-gray-20
   focus-inset: cyan-gray-100
   focus-inverse: cyan-60
-  skeleton-background: cyan-gray-100-hover
-  skeleton-element: cyan-gray-80
+  skeleton-background: cyan-gray-80-hover
+  skeleton-element: cyan-gray-70
   interactive: cyan-50
-  highlight: cyan-20
+  highlight: cyan-90
   overlay: black/65%
   button-primary: cyan-60
   button-primary-hover: cyan-60-hover
@@ -418,7 +444,11 @@ yg100:
   button-tertiary: cyan-50
   button-tertiary-hover: cyan-60-hover
   button-tertiary-active: cyan-80
-  button-disabled: gray-80
+  button-danger-primary: red-60
+  button-danger-secondary: red-50
+  button-danger-hover: red-60-hover
+  button-danger-active: red-80
+  button-disabled: gray-70
   toggle-off: cyan-gray-50
   toggle-off-active: cyan-gray-70
   toggle-off-hover: cyan-gray-50-hover
@@ -476,11 +506,11 @@ g100:
   background: gray-100
   background-inverse: gray-10
   background-brand: blue-60
-  background-active: gray-80
-  background-hover: gray-100-hover
+  background-active: gray-50/40%
+  background-hover: gray-50/16%
   background-inverse-hover: gray-10-hover
-  background-selected: gray-90
-  background-selected-hover: gray-90-hover
+  background-selected: gray-50/24%
+  background-selected-hover: gray-50/32%
   layer-01: gray-90
   layer-active-01: gray-70
   layer-hover-01: gray-90-hover
@@ -525,47 +555,53 @@ g100:
   border-strong-01: gray-60
   border-strong-02: gray-50
   border-strong-03: gray-40
+  border-tile-01: gray-70
+  border-tile-02: gray-60
+  border-tile-03: gray-50
   border-inverse: gray-10
   border-interactive: blue-50
-  border-disabled: gray-90
+  border-disabled: gray-50/50%
   text-primary: gray-10
   text-secondary: gray-30
-  text-placeholder: gray-50
+  text-placeholder: gray-10/40%
   text-helper: gray-40
-  text-error: red-30
+  text-error: red-40
   text-inverse: gray-100
   text-on-color: white
-  text-on-color-disabled: gray-40
-  text-disabled: gray-70
+  text-on-color-disabled: white/25%
+  text-disabled: gray-10/25%
   link-primary: blue-40
   link-primary-hover: blue-30
   link-secondary: blue-30
   link-inverse: blue-60
   link-visited: purple-40
+  link-inverse-active: gray-100
+  link-inverse-hover: blue-70
   icon-primary: gray-10
   icon-secondary: gray-30
   icon-inverse: gray-100
   icon-on-color: white
-  icon-on-color-disabled: gray-40
-  icon-disabled: gray-70
+  icon-on-color-disabled: white/25%
+  icon-disabled: gray-10/25%
+  icon-interactive: white
   support-error: red-50
   support-success: green-40
   support-warning: yellow-30
   support-info: blue-50
   support-error-inverse: red-60
-  support-success-inverse: green-50
+  support-success-inverse: green-60
   support-warning-inverse: yellow-30
-  support-info-inverse: blue-60
+  support-info-inverse: blue-70
   support-caution-minor: yellow-30
   support-caution-major: orange-40
   support-caution-undefined: purple-50
   focus: white
   focus-inset: gray-100
   focus-inverse: blue-60
-  skeleton-background: gray-100-hover
-  skeleton-element: gray-80
+  skeleton-background: gray-80-hover
+  skeleton-element: gray-70
   interactive: blue-50
-  highlight: blue-20
+  highlight: blue-90
   overlay: black/65%
   button-primary: blue-60
   button-primary-hover: blue-60-hover
@@ -576,7 +612,11 @@ g100:
   button-tertiary: blue-50
   button-tertiary-hover: blue-60-hover
   button-tertiary-active: blue-80
-  button-disabled: gray-80
+  button-danger-primary: red-60
+  button-danger-secondary: red-50
+  button-danger-hover: red-60-hover
+  button-danger-active: red-80
+  button-disabled: gray-70
   toggle-off: gray-50
   toggle-off-active: gray-70
   toggle-off-hover: gray-50-hover
diff --git a/packages/pelagos/less/colors.less b/packages/pelagos/less/colors.less
index 8c9f66a2..4c444725 100644
--- a/packages/pelagos/less/colors.less
+++ b/packages/pelagos/less/colors.less
@@ -13,16 +13,16 @@
 @yellow-80: #483700;
 @yellow-90: #302400;
 @yellow-100: #1c1500;
-@orange-10: #fcf3e7;
-@orange-20: #f9dcbb;
-@orange-30: #f3bd7d;
-@orange-40: #ec9008;
-@orange-50: #d47300;
-@orange-60: #a85b00;
-@orange-70: #7c4200;
-@orange-80: #543000;
-@orange-90: #381e00;
-@orange-100: #201200;
+@orange-10: #fff2e8;
+@orange-20: #ffd9be;
+@orange-30: #ffb784;
+@orange-40: #ff832b;
+@orange-50: #eb6200;
+@orange-60: #ba4e00;
+@orange-70: #8a3800;
+@orange-80: #5e2900;
+@orange-90: #3e1a00;
+@orange-100: #231000;
 @red-10: #fff1f1;
 @red-20: #ffd7d9;
 @red-30: #ffb3b8;
@@ -143,16 +143,16 @@
 @yellow-80-hover: #5c4600;
 @yellow-90-hover: #3d2e00;
 @yellow-100-hover: #332600;
-@orange-10-hover: #fae4ca;
-@orange-20-hover: #f6ca99;
-@orange-30-hover: #efa64a;
-@orange-40-hover: #e27b00;
-@orange-50-hover: #b86401;
-@orange-60-hover: #8e4e01;
-@orange-70-hover: #975101;
-@orange-80-hover: #693b01;
-@orange-90-hover: #492800;
-@orange-100-hover: #3b2200;
+@orange-10-hover: #ffe2cc;
+@orange-20-hover: #ffc69e;
+@orange-30-hover: #ff9d57;
+@orange-40-hover: #fa6800;
+@orange-50-hover: #cc5500;
+@orange-60-hover: #9e4200;
+@orange-70-hover: #a84400;
+@orange-80-hover: #753300;
+@orange-90-hover: #522200;
+@orange-100-hover: #421e00;
 @red-10-hover: #ffe0e0;
 @red-20-hover: #ffc2c5;
 @red-30-hover: #ff99a0;
diff --git a/packages/pelagos/less/layers.less b/packages/pelagos/less/layers.less
index b2fbbddf..49ab11e5 100644
--- a/packages/pelagos/less/layers.less
+++ b/packages/pelagos/less/layers.less
@@ -14,6 +14,7 @@
 		--border-subtle: var(--border-subtle-01);
 		--border-subtle-selected: var(--border-subtle-selected-01);
 		--border-strong: var(--border-strong-01);
+		--border-tile: var(--border-tile-01);
 	}
 
 	[data-layer='2'] {
@@ -30,6 +31,7 @@
 		--border-subtle: var(--border-subtle-02);
 		--border-subtle-selected: var(--border-subtle-selected-02);
 		--border-strong: var(--border-strong-02);
+		--border-tile: var(--border-tile-02);
 	}
 
 	[data-layer='3'] {
@@ -46,5 +48,6 @@
 		--border-subtle: var(--border-subtle-03);
 		--border-subtle-selected: var(--border-subtle-selected-03);
 		--border-strong: var(--border-strong-03);
+		--border-tile: var(--border-tile-03);
 	}
 }
diff --git a/packages/pelagos/less/themes.less b/packages/pelagos/less/themes.less
index 2346de62..5594226d 100644
--- a/packages/pelagos/less/themes.less
+++ b/packages/pelagos/less/themes.less
@@ -8,11 +8,11 @@
 	--background: @white;
 	--background-inverse: @gray-80;
 	--background-brand: @blue-60;
-	--background-active: @gray-30;
-	--background-hover: @gray-10-hover;
+	--background-active: fade(@gray-50, 50%);
+	--background-hover: fade(@gray-50, 12%);
 	--background-inverse-hover: @gray-80-hover;
-	--background-selected: @gray-20;
-	--background-selected-hover: @gray-20-hover;
+	--background-selected: fade(@gray-50, 20%);
+	--background-selected-hover: fade(@gray-50, 32%);
 	--layer-01: @gray-10;
 	--layer-active-01: @gray-30;
 	--layer-hover-01: @gray-10-hover;
@@ -48,38 +48,44 @@
 	--field-hover-03: @gray-10-hover;
 	--field-disabled: @gray-10;
 	--border-subtle-00: @gray-20;
-	--border-subtle-01: @gray-20;
+	--border-subtle-01: @gray-30;
 	--border-subtle-selected-01: @gray-30;
 	--border-subtle-02: @gray-20;
 	--border-subtle-selected-02: @gray-30;
-	--border-subtle-03: @gray-20;
+	--border-subtle-03: @gray-30;
 	--border-subtle-selected-03: @gray-30;
 	--border-strong-01: @gray-50;
 	--border-strong-02: @gray-50;
 	--border-strong-03: @gray-50;
+	--border-tile-01: @gray-30;
+	--border-tile-02: @gray-40;
+	--border-tile-03: @gray-30;
 	--border-inverse: @gray-100;
 	--border-interactive: @blue-60;
-	--border-disabled: @gray-10;
+	--border-disabled: @gray-30;
 	--text-primary: @gray-100;
 	--text-secondary: @gray-70;
-	--text-placeholder: @gray-60;
+	--text-placeholder: @gray-40;
 	--text-helper: @gray-60;
 	--text-error: @red-60;
 	--text-inverse: @white;
 	--text-on-color: @white;
 	--text-on-color-disabled: @gray-50;
-	--text-disabled: @gray-30;
+	--text-disabled: fade(@gray-100, 25%);
 	--link-primary: @blue-60;
 	--link-primary-hover: @blue-70;
 	--link-secondary: @blue-70;
 	--link-inverse: @blue-40;
 	--link-visited: @purple-60;
+	--link-inverse-active: @gray-10;
+	--link-inverse-hover: @blue-30;
 	--icon-primary: @gray-100;
 	--icon-secondary: @gray-70;
 	--icon-inverse: @white;
 	--icon-on-color: @white;
 	--icon-on-color-disabled: @gray-50;
-	--icon-disabled: @gray-30;
+	--icon-disabled: fade(@gray-100, 25%);
+	--icon-interactive: @blue-60;
 	--support-error: @red-60;
 	--support-success: @green-50;
 	--support-warning: @yellow-30;
@@ -108,6 +114,10 @@
 	--button-tertiary: @blue-60;
 	--button-tertiary-hover: @blue-60-hover;
 	--button-tertiary-active: @blue-80;
+	--button-danger-primary: @red-60;
+	--button-danger-secondary: @red-60;
+	--button-danger-hover: @red-60-hover;
+	--button-danger-active: @red-80;
 	--button-disabled: @gray-30;
 	--toggle-off: @gray-50;
 	--toggle-off-active: @gray-70;
@@ -180,11 +190,11 @@
 	--background: @white;
 	--background-inverse: @cool-gray-80;
 	--background-brand: @cyan-60;
-	--background-active: @cool-gray-30;
-	--background-hover: @cool-gray-10-hover;
+	--background-active: fade(@cool-gray-50, 50%);
+	--background-hover: fade(@cool-gray-50, 12%);
 	--background-inverse-hover: @cool-gray-80-hover;
-	--background-selected: @cool-gray-20;
-	--background-selected-hover: @cool-gray-20-hover;
+	--background-selected: fade(@cool-gray-50, 20%);
+	--background-selected-hover: fade(@cool-gray-50, 32%);
 	--layer-01: @cool-gray-10;
 	--layer-active-01: @cool-gray-30;
 	--layer-hover-01: @cool-gray-10-hover;
@@ -220,38 +230,44 @@
 	--field-hover-03: @cool-gray-10-hover;
 	--field-disabled: @gray-10;
 	--border-subtle-00: @cool-gray-20;
-	--border-subtle-01: @cool-gray-20;
+	--border-subtle-01: @cool-gray-30;
 	--border-subtle-selected-01: @cool-gray-30;
 	--border-subtle-02: @cool-gray-20;
 	--border-subtle-selected-02: @cool-gray-30;
-	--border-subtle-03: @cool-gray-20;
+	--border-subtle-03: @cool-gray-30;
 	--border-subtle-selected-03: @cool-gray-30;
 	--border-strong-01: @cool-gray-50;
 	--border-strong-02: @cool-gray-50;
 	--border-strong-03: @cool-gray-50;
+	--border-tile-01: @cool-gray-30;
+	--border-tile-02: @cool-gray-40;
+	--border-tile-03: @cool-gray-30;
 	--border-inverse: @cool-gray-100;
 	--border-interactive: @cyan-60;
-	--border-disabled: @gray-10;
+	--border-disabled: @gray-30;
 	--text-primary: @gray-100;
 	--text-secondary: @gray-70;
-	--text-placeholder: @gray-60;
+	--text-placeholder: @gray-40;
 	--text-helper: @gray-60;
 	--text-error: @red-60;
 	--text-inverse: @white;
 	--text-on-color: @white;
 	--text-on-color-disabled: @gray-50;
-	--text-disabled: @gray-30;
+	--text-disabled: fade(@gray-100, 25%);
 	--link-primary: @cyan-70;
 	--link-primary-hover: @cyan-80;
 	--link-secondary: @cyan-80;
 	--link-inverse: @cyan-40;
 	--link-visited: @purple-60;
+	--link-inverse-active: @gray-10;
+	--link-inverse-hover: @cyan-30;
 	--icon-primary: @cool-gray-100;
 	--icon-secondary: @cool-gray-70;
 	--icon-inverse: @white;
 	--icon-on-color: @white;
 	--icon-on-color-disabled: @gray-50;
-	--icon-disabled: @gray-30;
+	--icon-disabled: fade(@gray-100, 25%);
+	--icon-interactive: @cyan-60;
 	--support-error: @red-60;
 	--support-success: @green-50;
 	--support-warning: @yellow-30;
@@ -280,6 +296,10 @@
 	--button-tertiary: @cyan-60;
 	--button-tertiary-hover: @cyan-60-hover;
 	--button-tertiary-active: @cyan-80;
+	--button-danger-primary: @red-60;
+	--button-danger-secondary: @red-60;
+	--button-danger-hover: @red-60-hover;
+	--button-danger-active: @red-80;
 	--button-disabled: @gray-30;
 	--toggle-off: @cool-gray-50;
 	--toggle-off-active: @cool-gray-70;
@@ -352,11 +372,11 @@
 	--background: @cyan-gray-100;
 	--background-inverse: @cyan-gray-10;
 	--background-brand: @cyan-60;
-	--background-active: @cyan-gray-80;
-	--background-hover: @cyan-gray-100-hover;
+	--background-active: fade(@cyan-gray-50, 40%);
+	--background-hover: fade(@cyan-gray-50, 16%);
 	--background-inverse-hover: @cyan-gray-10-hover;
-	--background-selected: @cyan-gray-90;
-	--background-selected-hover: @cyan-gray-90-hover;
+	--background-selected: fade(@cyan-gray-50, 24%);
+	--background-selected-hover: fade(@cyan-gray-50, 32%);
 	--layer-01: @cyan-gray-90;
 	--layer-active-01: @cyan-gray-70;
 	--layer-hover-01: @cyan-gray-90-hover;
@@ -401,29 +421,35 @@
 	--border-strong-01: @cyan-gray-60;
 	--border-strong-02: @cyan-gray-50;
 	--border-strong-03: @cyan-gray-40;
+	--border-tile-01: @cyan-gray-70;
+	--border-tile-02: @cyan-gray-60;
+	--border-tile-03: @cyan-gray-50;
 	--border-inverse: @cyan-gray-10;
 	--border-interactive: @cyan-50;
-	--border-disabled: @gray-90;
+	--border-disabled: fade(@gray-50, 50%);
 	--text-primary: @gray-10;
 	--text-secondary: @gray-30;
-	--text-placeholder: @gray-50;
+	--text-placeholder: fade(@gray-10, 40%);
 	--text-helper: @gray-40;
-	--text-error: @red-30;
+	--text-error: @red-40;
 	--text-inverse: @gray-100;
 	--text-on-color: @white;
-	--text-on-color-disabled: @gray-50;
-	--text-disabled: @gray-70;
+	--text-on-color-disabled: fade(@white, 25%);
+	--text-disabled: fade(@gray-10, 25%);
 	--link-primary: @cyan-40;
 	--link-primary-hover: @cyan-30;
 	--link-secondary: @cyan-30;
 	--link-inverse: @cyan-60;
 	--link-visited: @purple-40;
+	--link-inverse-active: @gray-100;
+	--link-inverse-hover: @cyan-70;
 	--icon-primary: @cyan-gray-10;
 	--icon-secondary: @cyan-gray-30;
 	--icon-inverse: @cyan-gray-100;
 	--icon-on-color: @white;
-	--icon-on-color-disabled: @gray-50;
-	--icon-disabled: @gray-70;
+	--icon-on-color-disabled: fade(@white, 25%);
+	--icon-disabled: fade(@gray-10, 25%);
+	--icon-interactive: @white;
 	--support-error: @red-50;
 	--support-success: @green-40;
 	--support-warning: @yellow-30;
@@ -431,17 +457,17 @@
 	--support-error-inverse: @red-60;
 	--support-success-inverse: @green-60;
 	--support-warning-inverse: @yellow-30;
-	--support-info-inverse: @blue-60;
+	--support-info-inverse: @blue-70;
 	--support-caution-minor: @yellow-30;
 	--support-caution-major: @orange-40;
 	--support-caution-undefined: @purple-50;
 	--focus: @cyan-gray-20;
 	--focus-inset: @cyan-gray-100;
 	--focus-inverse: @cyan-60;
-	--skeleton-background: @cyan-gray-100-hover;
-	--skeleton-element: @cyan-gray-80;
+	--skeleton-background: @cyan-gray-80-hover;
+	--skeleton-element: @cyan-gray-70;
 	--interactive: @cyan-50;
-	--highlight: @cyan-20;
+	--highlight: @cyan-90;
 	--overlay: fade(@black, 65%);
 	--button-primary: @cyan-60;
 	--button-primary-hover: @cyan-60-hover;
@@ -452,7 +478,11 @@
 	--button-tertiary: @cyan-50;
 	--button-tertiary-hover: @cyan-60-hover;
 	--button-tertiary-active: @cyan-80;
-	--button-disabled: @gray-80;
+	--button-danger-primary: @red-60;
+	--button-danger-secondary: @red-50;
+	--button-danger-hover: @red-60-hover;
+	--button-danger-active: @red-80;
+	--button-disabled: @gray-70;
 	--toggle-off: @cyan-gray-50;
 	--toggle-off-active: @cyan-gray-70;
 	--toggle-off-hover: @cyan-gray-50-hover;
@@ -524,11 +554,11 @@
 	--background: @gray-100;
 	--background-inverse: @gray-10;
 	--background-brand: @blue-60;
-	--background-active: @gray-80;
-	--background-hover: @gray-100-hover;
+	--background-active: fade(@gray-50, 40%);
+	--background-hover: fade(@gray-50, 16%);
 	--background-inverse-hover: @gray-10-hover;
-	--background-selected: @gray-90;
-	--background-selected-hover: @gray-90-hover;
+	--background-selected: fade(@gray-50, 24%);
+	--background-selected-hover: fade(@gray-50, 32%);
 	--layer-01: @gray-90;
 	--layer-active-01: @gray-70;
 	--layer-hover-01: @gray-90-hover;
@@ -573,47 +603,53 @@
 	--border-strong-01: @gray-60;
 	--border-strong-02: @gray-50;
 	--border-strong-03: @gray-40;
+	--border-tile-01: @gray-70;
+	--border-tile-02: @gray-60;
+	--border-tile-03: @gray-50;
 	--border-inverse: @gray-10;
 	--border-interactive: @blue-50;
-	--border-disabled: @gray-90;
+	--border-disabled: fade(@gray-50, 50%);
 	--text-primary: @gray-10;
 	--text-secondary: @gray-30;
-	--text-placeholder: @gray-50;
+	--text-placeholder: fade(@gray-10, 40%);
 	--text-helper: @gray-40;
-	--text-error: @red-30;
+	--text-error: @red-40;
 	--text-inverse: @gray-100;
 	--text-on-color: @white;
-	--text-on-color-disabled: @gray-40;
-	--text-disabled: @gray-70;
+	--text-on-color-disabled: fade(@white, 25%);
+	--text-disabled: fade(@gray-10, 25%);
 	--link-primary: @blue-40;
 	--link-primary-hover: @blue-30;
 	--link-secondary: @blue-30;
 	--link-inverse: @blue-60;
 	--link-visited: @purple-40;
+	--link-inverse-active: @gray-100;
+	--link-inverse-hover: @blue-70;
 	--icon-primary: @gray-10;
 	--icon-secondary: @gray-30;
 	--icon-inverse: @gray-100;
 	--icon-on-color: @white;
-	--icon-on-color-disabled: @gray-40;
-	--icon-disabled: @gray-70;
+	--icon-on-color-disabled: fade(@white, 25%);
+	--icon-disabled: fade(@gray-10, 25%);
+	--icon-interactive: @white;
 	--support-error: @red-50;
 	--support-success: @green-40;
 	--support-warning: @yellow-30;
 	--support-info: @blue-50;
 	--support-error-inverse: @red-60;
-	--support-success-inverse: @green-50;
+	--support-success-inverse: @green-60;
 	--support-warning-inverse: @yellow-30;
-	--support-info-inverse: @blue-60;
+	--support-info-inverse: @blue-70;
 	--support-caution-minor: @yellow-30;
 	--support-caution-major: @orange-40;
 	--support-caution-undefined: @purple-50;
 	--focus: @white;
 	--focus-inset: @gray-100;
 	--focus-inverse: @blue-60;
-	--skeleton-background: @gray-100-hover;
-	--skeleton-element: @gray-80;
+	--skeleton-background: @gray-80-hover;
+	--skeleton-element: @gray-70;
 	--interactive: @blue-50;
-	--highlight: @blue-20;
+	--highlight: @blue-90;
 	--overlay: fade(@black, 65%);
 	--button-primary: @blue-60;
 	--button-primary-hover: @blue-60-hover;
@@ -624,7 +660,11 @@
 	--button-tertiary: @blue-50;
 	--button-tertiary-hover: @blue-60-hover;
 	--button-tertiary-active: @blue-80;
-	--button-disabled: @gray-80;
+	--button-danger-primary: @red-60;
+	--button-danger-secondary: @red-50;
+	--button-danger-hover: @red-60-hover;
+	--button-danger-active: @red-80;
+	--button-disabled: @gray-70;
 	--toggle-off: @gray-50;
 	--toggle-off-active: @gray-70;
 	--toggle-off-hover: @gray-50-hover;