From d5ea24caa9156564e3b7a7f1d82b5fb06afa9174 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 9 Aug 2023 12:08:07 -0300
Subject: [PATCH 01/12] build primitive tokens

---
 packages/fuselage-tokens/colors.js            | 198 +++++++-----------
 packages/fuselage-tokens/colors.json          | 194 ++++++-----------
 packages/fuselage-tokens/colors.mjs           | 198 +++++++-----------
 packages/fuselage-tokens/colors.scss          | 158 +++++---------
 .../fuselage-tokens/src/background/base.json  |   6 -
 packages/fuselage-tokens/src/button/base.json |  60 +++---
 packages/fuselage-tokens/src/colors.jsonc     | 194 ++++++-----------
 packages/fuselage-tokens/src/colors/base.json | 195 ++++++-----------
 packages/fuselage-tokens/src/font/base.json   |   6 +-
 packages/fuselage-tokens/src/status/base.json |  24 +--
 packages/fuselage-tokens/src/stroke/base.json |  10 +-
 .../fuselage-tokens/src/surface/base.json     |   6 +-
 12 files changed, 450 insertions(+), 799 deletions(-)
 delete mode 100644 packages/fuselage-tokens/src/background/base.json

diff --git a/packages/fuselage-tokens/colors.js b/packages/fuselage-tokens/colors.js
index 821b46eeca..dca21e65db 100644
--- a/packages/fuselage-tokens/colors.js
+++ b/packages/fuselage-tokens/colors.js
@@ -1,132 +1,74 @@
 'use strict';
 
 module.exports = {
-  'd100': '#FFE9EC',
-  'd200': '#FFC1C9',
-  'd300': '#F98F9D',
-  'd400': '#F5495F',
-  'd500': '#EC0D2A',
-  'd550': '#F5455C',
-  'd600': '#D40C26',
-  'd650': '#DA1F37',
-  'd700': '#BB0B21',
-  'd800': '#9B1325',
-  'd900': '#8B0719',
-  'i100': '#E8F2FF',
-  'i200': '#D1EBFE',
-  'i300': '#76B7FC',
-  'i400': '#549DF9',
-  'i500': '#156FF5',
-  'i600': '#095AD2',
-  'i700': '#10529E',
-  'i800': '#01336B',
-  'i900': '#012247',
-  'n100': '#f7f8fa',
-  'n200': '#f2f3f5',
-  'n250': '#EBECEF',
-  'n300': '#eeeff1',
-  'n400': '#e4e7ea',
-  'n450': '#d7dbe0',
-  'n500': '#cbced1',
-  'n600': '#9ea2a8',
-  'n700': '#6c727a',
-  'n800': '#2f343d',
-  'n850': '#2f343d80',
-  'n900': '#1f2329',
-  'p100': '#E8F2FF',
-  'p200': '#D1EBFE',
-  'p300': '#76B7FC',
-  'p400': '#549DF9',
-  'p500': '#156FF5',
-  'p550': '#1D74F5',
-  'p600': '#095AD2',
-  'p700': '#10529E',
-  'p800': '#01336B',
-  'p900': '#012247',
-  's100': '#E5FBF4',
-  's200': '#C0F6E4',
-  's300': '#96F0D2',
-  's400': '#6CE9C0',
-  's500': '#2DE0A5',
-  's600': '#1ECB92',
-  's650': '#158D65',
-  's700': '#19AC7C',
-  's800': '#148660',
-  's900': '#106D4F',
-  's1000': '#0D5940',
-  's1-100': '#FDE8D7',
-  's1-200': '#FAD1B0',
-  's1-300': '#F7B27B',
-  's1-400': '#F59B53',
-  's1-500': '#F38C39',
-  's1-600': '#E26D0E',
-  's1-700': '#BD5A0B',
-  's1-800': '#974809',
-  's1-900': '#713607',
-  's2-100': '#F9EFFC',
-  's2-200': '#EDD0F7',
-  's2-300': '#DCA0EF',
-  's2-400': '#CA71E7',
-  's2-500': '#9F22C7',
-  's2-600': '#7F1B9F',
-  's2-700': '#5F1477',
-  's2-800': '#4A105D',
-  's2-900': '#350B42',
-  'w100': '#FFF6D6',
-  'w150': '#FFF8E0',
-  'w200': '#FFECAD',
-  'w300': '#FFE383',
-  'w400': '#FFD95A',
-  'w500': '#FFD031',
-  'w600': '#F3BE08',
-  'w650': '#AC892F',
-  'w700': '#DFAC00',
-  'w800': '#B68D00',
-  'w900': '#8E6300',
-  'white': '#ffffff',
-  'b100': '#e8f2ff',
-  'b200': '#d1ebfe',
-  'b300': '#76b7fc',
-  'b400': '#549df9',
-  'b500': '#1d74f5',
-  'b600': '#095ad2',
-  'b700': '#10529e',
-  'b800': '#01336b',
-  'b900': '#012247',
-  'g100': '#e5fbf4',
-  'g200': '#c0f6e4',
-  'g300': '#96f0d2',
-  'g400': '#6ce9c0',
-  'g500': '#2de0a5',
-  'g600': '#1ecb92',
-  'g700': '#19ac7c',
-  'g800': '#158d65',
-  'g900': '#106d4f',
-  'r100': '#fddade',
-  'r200': '#fbb5be',
-  'r300': '#f98f9d',
-  'r400': '#f76a7d',
-  'r500': '#f5455c',
-  'r600': '#db0c27',
-  'r700': '#b30a20',
-  'r800': '#8b0719',
-  'r900': '#630512',
-  'y100': '#fff6d6',
-  'y200': '#ffecad',
-  'y300': '#ffe383',
-  'y400': '#ffd95a',
-  'y500': '#ffd031',
-  'y600': '#f3be08',
-  'y700': '#dfac00',
-  'y800': '#b68d00',
-  'y900': '#8e6d00',
-  'o100': '#fde8d7',
-  'o200': '#fad1b0',
-  'o300': '#f7b27b',
-  'o400': '#f59b53',
-  'o500': '#f38c39',
-  'o600': '#e26d0e',
-  'o700': '#bd5a0b',
-  'o800': '#974809',
-  'o900': '#713607',
+  white: '#FFFFFF',
+  n100: '#F7F8FA',
+  n200: '#F2F3F5',
+  n250: '#EBECEF',
+  n300: '#EEEFF1',
+  n400: '#E4E7EA',
+  n450: '#D7DBE0',
+  n500: '#CBCED1',
+  n600: '#9EA2A8',
+  n700: '#6C737A',
+  n800: '#2F343D',
+  n900: '#1F2329',
+  r100: '#FFE9EC',
+  r200: '#FFC1C9',
+  r300: '#F98F9D',
+  r400: '#F5455C',
+  r500: '#EC0D2A',
+  r600: '#D40C26',
+  r700: '#BB0B21',
+  r800: '#9B1325',
+  r900: '#8B0719',
+  r1000: '#6B0513',
+  o100: '#FDE8D7',
+  o200: '#FAD1B0',
+  o300: '#F7B27B',
+  o400: '#F59B53',
+  o500: '#F38C39',
+  o600: '#E26D0E',
+  o700: '#BD5A0B',
+  o800: '#974809',
+  o900: '#713607',
+  o1000: '#5B2C06',
+  p100: '#F9EFFC',
+  p200: '#EDD0F7',
+  p300: '#DCA0EF',
+  p400: '#CA71E7',
+  p500: '#9F22C7',
+  p600: '#7F1B9F',
+  p700: '#5F1477',
+  p800: '#4A105D',
+  p900: '#350B42',
+  y100: '#FFF8E0',
+  y200: '#FFECAD',
+  y300: '#FFE383',
+  y400: '#FFD95A',
+  y500: '#FFD031',
+  y600: '#F3BE08',
+  y700: '#DFAC00',
+  y800: '#AC892F',
+  y900: '#8E6300',
+  y1000: '#573D00',
+  g100: '#E5FBF4',
+  g200: '#C0F6E4',
+  g300: '#96F0D2',
+  g400: '#6CE9C0',
+  g500: '#2DE0A5',
+  g600: '#1ECB92',
+  g700: '#19AC7C',
+  g800: '#148660',
+  g900: '#106D4F',
+  g1000: '#0D5940',
+  b100: '#E8F2FF',
+  b200: '#D1EBFE',
+  b300: '#76B7FC',
+  b400: '#549DF9',
+  b500: '#156FF5',
+  b600: '#095AD2',
+  b700: '#10529E',
+  b800: '#01336B',
+  b900: '#012247',
 };
diff --git a/packages/fuselage-tokens/colors.json b/packages/fuselage-tokens/colors.json
index f52c578747..7e5900cf6e 100644
--- a/packages/fuselage-tokens/colors.json
+++ b/packages/fuselage-tokens/colors.json
@@ -1,130 +1,72 @@
 {
-  "d100": "#FFE9EC",
-  "d200": "#FFC1C9",
-  "d300": "#F98F9D",
-  "d400": "#F5495F",
-  "d500": "#EC0D2A",
-  "d550": "#F5455C",
-  "d600": "#D40C26",
-  "d650": "#DA1F37",
-  "d700": "#BB0B21",
-  "d800": "#9B1325",
-  "d900": "#8B0719",
-  "i100": "#E8F2FF",
-  "i200": "#D1EBFE",
-  "i300": "#76B7FC",
-  "i400": "#549DF9",
-  "i500": "#156FF5",
-  "i600": "#095AD2",
-  "i700": "#10529E",
-  "i800": "#01336B",
-  "i900": "#012247",
-  "n100": "#f7f8fa",
-  "n200": "#f2f3f5",
+  "white": "#FFFFFF",
+  "n100": "#F7F8FA",
+  "n200": "#F2F3F5",
   "n250": "#EBECEF",
-  "n300": "#eeeff1",
-  "n400": "#e4e7ea",
-  "n450": "#d7dbe0",
-  "n500": "#cbced1",
-  "n600": "#9ea2a8",
-  "n700": "#6c727a",
-  "n800": "#2f343d",
-  "n850": "#2f343d80",
-  "n900": "#1f2329",
-  "p100": "#E8F2FF",
-  "p200": "#D1EBFE",
-  "p300": "#76B7FC",
-  "p400": "#549DF9",
-  "p500": "#156FF5",
-  "p550": "#1D74F5",
-  "p600": "#095AD2",
-  "p700": "#10529E",
-  "p800": "#01336B",
-  "p900": "#012247",
-  "s100": "#E5FBF4",
-  "s200": "#C0F6E4",
-  "s300": "#96F0D2",
-  "s400": "#6CE9C0",
-  "s500": "#2DE0A5",
-  "s600": "#1ECB92",
-  "s650": "#158D65",
-  "s700": "#19AC7C",
-  "s800": "#148660",
-  "s900": "#106D4F",
-  "s1000": "#0D5940",
-  "s1-100": "#FDE8D7",
-  "s1-200": "#FAD1B0",
-  "s1-300": "#F7B27B",
-  "s1-400": "#F59B53",
-  "s1-500": "#F38C39",
-  "s1-600": "#E26D0E",
-  "s1-700": "#BD5A0B",
-  "s1-800": "#974809",
-  "s1-900": "#713607",
-  "s2-100": "#F9EFFC",
-  "s2-200": "#EDD0F7",
-  "s2-300": "#DCA0EF",
-  "s2-400": "#CA71E7",
-  "s2-500": "#9F22C7",
-  "s2-600": "#7F1B9F",
-  "s2-700": "#5F1477",
-  "s2-800": "#4A105D",
-  "s2-900": "#350B42",
-  "w100": "#FFF6D6",
-  "w150": "#FFF8E0",
-  "w200": "#FFECAD",
-  "w300": "#FFE383",
-  "w400": "#FFD95A",
-  "w500": "#FFD031",
-  "w600": "#F3BE08",
-  "w650": "#AC892F",
-  "w700": "#DFAC00",
-  "w800": "#B68D00",
-  "w900": "#8E6300",
-  "white": "#ffffff",
-  "b100": "#e8f2ff",
-  "b200": "#d1ebfe",
-  "b300": "#76b7fc",
-  "b400": "#549df9",
-  "b500": "#1d74f5",
-  "b600": "#095ad2",
-  "b700": "#10529e",
-  "b800": "#01336b",
-  "b900": "#012247",
-  "g100": "#e5fbf4",
-  "g200": "#c0f6e4",
-  "g300": "#96f0d2",
-  "g400": "#6ce9c0",
-  "g500": "#2de0a5",
-  "g600": "#1ecb92",
-  "g700": "#19ac7c",
-  "g800": "#158d65",
-  "g900": "#106d4f",
-  "r100": "#fddade",
-  "r200": "#fbb5be",
-  "r300": "#f98f9d",
-  "r400": "#f76a7d",
-  "r500": "#f5455c",
-  "r600": "#db0c27",
-  "r700": "#b30a20",
-  "r800": "#8b0719",
-  "r900": "#630512",
-  "y100": "#fff6d6",
-  "y200": "#ffecad",
-  "y300": "#ffe383",
-  "y400": "#ffd95a",
-  "y500": "#ffd031",
-  "y600": "#f3be08",
-  "y700": "#dfac00",
-  "y800": "#b68d00",
-  "y900": "#8e6d00",
-  "o100": "#fde8d7",
-  "o200": "#fad1b0",
-  "o300": "#f7b27b",
-  "o400": "#f59b53",
-  "o500": "#f38c39",
-  "o600": "#e26d0e",
-  "o700": "#bd5a0b",
+  "n300": "#EEEFF1",
+  "n400": "#E4E7EA",
+  "n450": "#D7DBE0",
+  "n500": "#CBCED1",
+  "n600": "#9EA2A8",
+  "n700": "#6C737A",
+  "n800": "#2F343D",
+  "n900": "#1F2329",
+  "r100": "#FFE9EC",
+  "r200": "#FFC1C9",
+  "r300": "#F98F9D",
+  "r400": "#F5455C",
+  "r500": "#EC0D2A",
+  "r600": "#D40C26",
+  "r700": "#BB0B21",
+  "r800": "#9B1325",
+  "r900": "#8B0719",
+  "r1000": "#6B0513",
+  "o100": "#FDE8D7",
+  "o200": "#FAD1B0",
+  "o300": "#F7B27B",
+  "o400": "#F59B53",
+  "o500": "#F38C39",
+  "o600": "#E26D0E",
+  "o700": "#BD5A0B",
   "o800": "#974809",
-  "o900": "#713607"
+  "o900": "#713607",
+  "o1000": "#5B2C06",
+  "p100": "#F9EFFC",
+  "p200": "#EDD0F7",
+  "p300": "#DCA0EF",
+  "p400": "#CA71E7",
+  "p500": "#9F22C7",
+  "p600": "#7F1B9F",
+  "p700": "#5F1477",
+  "p800": "#4A105D",
+  "p900": "#350B42",
+  "y100": "#FFF8E0",
+  "y200": "#FFECAD",
+  "y300": "#FFE383",
+  "y400": "#FFD95A",
+  "y500": "#FFD031",
+  "y600": "#F3BE08",
+  "y700": "#DFAC00",
+  "y800": "#AC892F",
+  "y900": "#8E6300",
+  "y1000": "#573D00",
+  "g100": "#E5FBF4",
+  "g200": "#C0F6E4",
+  "g300": "#96F0D2",
+  "g400": "#6CE9C0",
+  "g500": "#2DE0A5",
+  "g600": "#1ECB92",
+  "g700": "#19AC7C",
+  "g800": "#148660",
+  "g900": "#106D4F",
+  "g1000": "#0D5940",
+  "b100": "#E8F2FF",
+  "b200": "#D1EBFE",
+  "b300": "#76B7FC",
+  "b400": "#549DF9",
+  "b500": "#156FF5",
+  "b600": "#095AD2",
+  "b700": "#10529E",
+  "b800": "#01336B",
+  "b900": "#012247"
 }
diff --git a/packages/fuselage-tokens/colors.mjs b/packages/fuselage-tokens/colors.mjs
index fb41bdc54a..4a2e37f83b 100644
--- a/packages/fuselage-tokens/colors.mjs
+++ b/packages/fuselage-tokens/colors.mjs
@@ -1,130 +1,72 @@
 export default {
-  'd100': '#FFE9EC',
-  'd200': '#FFC1C9',
-  'd300': '#F98F9D',
-  'd400': '#F5495F',
-  'd500': '#EC0D2A',
-  'd550': '#F5455C',
-  'd600': '#D40C26',
-  'd650': '#DA1F37',
-  'd700': '#BB0B21',
-  'd800': '#9B1325',
-  'd900': '#8B0719',
-  'i100': '#E8F2FF',
-  'i200': '#D1EBFE',
-  'i300': '#76B7FC',
-  'i400': '#549DF9',
-  'i500': '#156FF5',
-  'i600': '#095AD2',
-  'i700': '#10529E',
-  'i800': '#01336B',
-  'i900': '#012247',
-  'n100': '#f7f8fa',
-  'n200': '#f2f3f5',
-  'n250': '#EBECEF',
-  'n300': '#eeeff1',
-  'n400': '#e4e7ea',
-  'n450': '#d7dbe0',
-  'n500': '#cbced1',
-  'n600': '#9ea2a8',
-  'n700': '#6c727a',
-  'n800': '#2f343d',
-  'n850': '#2f343d80',
-  'n900': '#1f2329',
-  'p100': '#E8F2FF',
-  'p200': '#D1EBFE',
-  'p300': '#76B7FC',
-  'p400': '#549DF9',
-  'p500': '#156FF5',
-  'p550': '#1D74F5',
-  'p600': '#095AD2',
-  'p700': '#10529E',
-  'p800': '#01336B',
-  'p900': '#012247',
-  's100': '#E5FBF4',
-  's200': '#C0F6E4',
-  's300': '#96F0D2',
-  's400': '#6CE9C0',
-  's500': '#2DE0A5',
-  's600': '#1ECB92',
-  's650': '#158D65',
-  's700': '#19AC7C',
-  's800': '#148660',
-  's900': '#106D4F',
-  's1000': '#0D5940',
-  's1-100': '#FDE8D7',
-  's1-200': '#FAD1B0',
-  's1-300': '#F7B27B',
-  's1-400': '#F59B53',
-  's1-500': '#F38C39',
-  's1-600': '#E26D0E',
-  's1-700': '#BD5A0B',
-  's1-800': '#974809',
-  's1-900': '#713607',
-  's2-100': '#F9EFFC',
-  's2-200': '#EDD0F7',
-  's2-300': '#DCA0EF',
-  's2-400': '#CA71E7',
-  's2-500': '#9F22C7',
-  's2-600': '#7F1B9F',
-  's2-700': '#5F1477',
-  's2-800': '#4A105D',
-  's2-900': '#350B42',
-  'w100': '#FFF6D6',
-  'w150': '#FFF8E0',
-  'w200': '#FFECAD',
-  'w300': '#FFE383',
-  'w400': '#FFD95A',
-  'w500': '#FFD031',
-  'w600': '#F3BE08',
-  'w650': '#AC892F',
-  'w700': '#DFAC00',
-  'w800': '#B68D00',
-  'w900': '#8E6300',
-  'white': '#ffffff',
-  'b100': '#e8f2ff',
-  'b200': '#d1ebfe',
-  'b300': '#76b7fc',
-  'b400': '#549df9',
-  'b500': '#1d74f5',
-  'b600': '#095ad2',
-  'b700': '#10529e',
-  'b800': '#01336b',
-  'b900': '#012247',
-  'g100': '#e5fbf4',
-  'g200': '#c0f6e4',
-  'g300': '#96f0d2',
-  'g400': '#6ce9c0',
-  'g500': '#2de0a5',
-  'g600': '#1ecb92',
-  'g700': '#19ac7c',
-  'g800': '#158d65',
-  'g900': '#106d4f',
-  'r100': '#fddade',
-  'r200': '#fbb5be',
-  'r300': '#f98f9d',
-  'r400': '#f76a7d',
-  'r500': '#f5455c',
-  'r600': '#db0c27',
-  'r700': '#b30a20',
-  'r800': '#8b0719',
-  'r900': '#630512',
-  'y100': '#fff6d6',
-  'y200': '#ffecad',
-  'y300': '#ffe383',
-  'y400': '#ffd95a',
-  'y500': '#ffd031',
-  'y600': '#f3be08',
-  'y700': '#dfac00',
-  'y800': '#b68d00',
-  'y900': '#8e6d00',
-  'o100': '#fde8d7',
-  'o200': '#fad1b0',
-  'o300': '#f7b27b',
-  'o400': '#f59b53',
-  'o500': '#f38c39',
-  'o600': '#e26d0e',
-  'o700': '#bd5a0b',
-  'o800': '#974809',
-  'o900': '#713607',
+  white: '#FFFFFF',
+  n100: '#F7F8FA',
+  n200: '#F2F3F5',
+  n250: '#EBECEF',
+  n300: '#EEEFF1',
+  n400: '#E4E7EA',
+  n450: '#D7DBE0',
+  n500: '#CBCED1',
+  n600: '#9EA2A8',
+  n700: '#6C737A',
+  n800: '#2F343D',
+  n900: '#1F2329',
+  r100: '#FFE9EC',
+  r200: '#FFC1C9',
+  r300: '#F98F9D',
+  r400: '#F5455C',
+  r500: '#EC0D2A',
+  r600: '#D40C26',
+  r700: '#BB0B21',
+  r800: '#9B1325',
+  r900: '#8B0719',
+  r1000: '#6B0513',
+  o100: '#FDE8D7',
+  o200: '#FAD1B0',
+  o300: '#F7B27B',
+  o400: '#F59B53',
+  o500: '#F38C39',
+  o600: '#E26D0E',
+  o700: '#BD5A0B',
+  o800: '#974809',
+  o900: '#713607',
+  o1000: '#5B2C06',
+  p100: '#F9EFFC',
+  p200: '#EDD0F7',
+  p300: '#DCA0EF',
+  p400: '#CA71E7',
+  p500: '#9F22C7',
+  p600: '#7F1B9F',
+  p700: '#5F1477',
+  p800: '#4A105D',
+  p900: '#350B42',
+  y100: '#FFF8E0',
+  y200: '#FFECAD',
+  y300: '#FFE383',
+  y400: '#FFD95A',
+  y500: '#FFD031',
+  y600: '#F3BE08',
+  y700: '#DFAC00',
+  y800: '#AC892F',
+  y900: '#8E6300',
+  y1000: '#573D00',
+  g100: '#E5FBF4',
+  g200: '#C0F6E4',
+  g300: '#96F0D2',
+  g400: '#6CE9C0',
+  g500: '#2DE0A5',
+  g600: '#1ECB92',
+  g700: '#19AC7C',
+  g800: '#148660',
+  g900: '#106D4F',
+  g1000: '#0D5940',
+  b100: '#E8F2FF',
+  b200: '#D1EBFE',
+  b300: '#76B7FC',
+  b400: '#549DF9',
+  b500: '#156FF5',
+  b600: '#095AD2',
+  b700: '#10529E',
+  b800: '#01336B',
+  b900: '#012247',
 };
diff --git a/packages/fuselage-tokens/colors.scss b/packages/fuselage-tokens/colors.scss
index 6eb29e2052..4074195b70 100644
--- a/packages/fuselage-tokens/colors.scss
+++ b/packages/fuselage-tokens/colors.scss
@@ -1,24 +1,5 @@
 $colors: (
-  d100: #ffe9ec,
-  d200: #ffc1c9,
-  d300: #f98f9d,
-  d400: #f5495f,
-  d500: #ec0d2a,
-  d550: #f5455c,
-  d600: #d40c26,
-  d650: #da1f37,
-  d700: #bb0b21,
-  d800: #9b1325,
-  d900: #8b0719,
-  i100: #e8f2ff,
-  i200: #d1ebfe,
-  i300: #76b7fc,
-  i400: #549df9,
-  i500: #156ff5,
-  i600: #095ad2,
-  i700: #10529e,
-  i800: #01336b,
-  i900: #012247,
+  white: #ffffff,
   n100: #f7f8fa,
   n200: #f2f3f5,
   n250: #ebecef,
@@ -27,97 +8,19 @@ $colors: (
   n450: #d7dbe0,
   n500: #cbced1,
   n600: #9ea2a8,
-  n700: #6c727a,
+  n700: #6c737a,
   n800: #2f343d,
-  n850: #2f343d80,
   n900: #1f2329,
-  p100: #e8f2ff,
-  p200: #d1ebfe,
-  p300: #76b7fc,
-  p400: #549df9,
-  p500: #156ff5,
-  p550: #1d74f5,
-  p600: #095ad2,
-  p700: #10529e,
-  p800: #01336b,
-  p900: #012247,
-  s100: #e5fbf4,
-  s200: #c0f6e4,
-  s300: #96f0d2,
-  s400: #6ce9c0,
-  s500: #2de0a5,
-  s600: #1ecb92,
-  s650: #158d65,
-  s700: #19ac7c,
-  s800: #148660,
-  s900: #106d4f,
-  s1000: #0d5940,
-  s1-100: #fde8d7,
-  s1-200: #fad1b0,
-  s1-300: #f7b27b,
-  s1-400: #f59b53,
-  s1-500: #f38c39,
-  s1-600: #e26d0e,
-  s1-700: #bd5a0b,
-  s1-800: #974809,
-  s1-900: #713607,
-  s2-100: #f9effc,
-  s2-200: #edd0f7,
-  s2-300: #dca0ef,
-  s2-400: #ca71e7,
-  s2-500: #9f22c7,
-  s2-600: #7f1b9f,
-  s2-700: #5f1477,
-  s2-800: #4a105d,
-  s2-900: #350b42,
-  w100: #fff6d6,
-  w150: #fff8e0,
-  w200: #ffecad,
-  w300: #ffe383,
-  w400: #ffd95a,
-  w500: #ffd031,
-  w600: #f3be08,
-  w650: #ac892f,
-  w700: #dfac00,
-  w800: #b68d00,
-  w900: #8e6300,
-  white: #ffffff,
-  b100: #e8f2ff,
-  b200: #d1ebfe,
-  b300: #76b7fc,
-  b400: #549df9,
-  b500: #1d74f5,
-  b600: #095ad2,
-  b700: #10529e,
-  b800: #01336b,
-  b900: #012247,
-  g100: #e5fbf4,
-  g200: #c0f6e4,
-  g300: #96f0d2,
-  g400: #6ce9c0,
-  g500: #2de0a5,
-  g600: #1ecb92,
-  g700: #19ac7c,
-  g800: #158d65,
-  g900: #106d4f,
-  r100: #fddade,
-  r200: #fbb5be,
+  r100: #ffe9ec,
+  r200: #ffc1c9,
   r300: #f98f9d,
-  r400: #f76a7d,
-  r500: #f5455c,
-  r600: #db0c27,
-  r700: #b30a20,
-  r800: #8b0719,
-  r900: #630512,
-  y100: #fff6d6,
-  y200: #ffecad,
-  y300: #ffe383,
-  y400: #ffd95a,
-  y500: #ffd031,
-  y600: #f3be08,
-  y700: #dfac00,
-  y800: #b68d00,
-  y900: #8e6d00,
+  r400: #f5455c,
+  r500: #ec0d2a,
+  r600: #d40c26,
+  r700: #bb0b21,
+  r800: #9b1325,
+  r900: #8b0719,
+  r1000: #6b0513,
   o100: #fde8d7,
   o200: #fad1b0,
   o300: #f7b27b,
@@ -127,4 +30,43 @@ $colors: (
   o700: #bd5a0b,
   o800: #974809,
   o900: #713607,
+  o1000: #5b2c06,
+  p100: #f9effc,
+  p200: #edd0f7,
+  p300: #dca0ef,
+  p400: #ca71e7,
+  p500: #9f22c7,
+  p600: #7f1b9f,
+  p700: #5f1477,
+  p800: #4a105d,
+  p900: #350b42,
+  y100: #fff8e0,
+  y200: #ffecad,
+  y300: #ffe383,
+  y400: #ffd95a,
+  y500: #ffd031,
+  y600: #f3be08,
+  y700: #dfac00,
+  y800: #ac892f,
+  y900: #8e6300,
+  y1000: #573d00,
+  g100: #e5fbf4,
+  g200: #c0f6e4,
+  g300: #96f0d2,
+  g400: #6ce9c0,
+  g500: #2de0a5,
+  g600: #1ecb92,
+  g700: #19ac7c,
+  g800: #148660,
+  g900: #106d4f,
+  g1000: #0d5940,
+  b100: #e8f2ff,
+  b200: #d1ebfe,
+  b300: #76b7fc,
+  b400: #549df9,
+  b500: #156ff5,
+  b600: #095ad2,
+  b700: #10529e,
+  b800: #01336b,
+  b900: #012247,
 );
diff --git a/packages/fuselage-tokens/src/background/base.json b/packages/fuselage-tokens/src/background/base.json
deleted file mode 100644
index 0ed47f2c29..0000000000
--- a/packages/fuselage-tokens/src/background/base.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "background": {
-    "light": { "value": "{colors.white}" },
-    "tint": { "value": "{colors.n100}" }
-  }
-}
diff --git a/packages/fuselage-tokens/src/button/base.json b/packages/fuselage-tokens/src/button/base.json
index 86ee8dfaaa..52b662c513 100644
--- a/packages/fuselage-tokens/src/button/base.json
+++ b/packages/fuselage-tokens/src/button/base.json
@@ -1,11 +1,11 @@
 {
   "button": {
-    "backgroundPrimaryDefault": { "value": "{colors.p500}" },
-    "backgroundPrimaryHover": { "value": "{colors.p600}" },
-    "backgroundPrimaryPress": { "value": "{colors.p700}" },
-    "backgroundPrimaryFocus": { "value": "{colors.p500}" },
-    "backgroundPrimaryKeyfocus": { "value": "{colors.p500}" },
-    "backgroundPrimaryDisabled": { "value": "{colors.p200}" },
+    "backgroundPrimaryDefault": { "value": "{colors.b500}" },
+    "backgroundPrimaryHover": { "value": "{colors.b600}" },
+    "backgroundPrimaryPress": { "value": "{colors.b700}" },
+    "backgroundPrimaryFocus": { "value": "{colors.b500}" },
+    "backgroundPrimaryKeyfocus": { "value": "{colors.b500}" },
+    "backgroundPrimaryDisabled": { "value": "{colors.b200}" },
     "fontOnPrimary": { "value": "{colors.white}" },
     "fontOnPrimaryDisabled": { "value": "{colors.white}" },
 
@@ -24,24 +24,24 @@
     "backgroundSecondaryDangerFocus": { "value": "{colors.n400}" },
     "backgroundSecondaryDangerKeyfocus": { "value": "{colors.n400}" },
     "backgroundSecondaryDangerDisabled": { "value": "{colors.n300}" },
-    "fontOnSecondaryDanger": { "value": "{colors.d700}" },
-    "onSecondaryDangerDisabled": { "value": "{colors.d300}" },
+    "fontOnSecondaryDanger": { "value": "{colors.r700}" },
+    "onSecondaryDangerDisabled": { "value": "{colors.r300}" },
 
-    "backgroundDangerDefault": { "value": "{colors.d500}" },
-    "backgroundDangerHover": { "value": "{colors.d600}" },
-    "backgroundDangerPress": { "value": "{colors.d700}" },
-    "backgroundDangerFocus": { "value": "{colors.d500}" },
-    "backgroundDangerKeyfocus": { "value": "{colors.d500}" },
-    "backgroundDangerDisabled": { "value": "{colors.d200}" },
+    "backgroundDangerDefault": { "value": "{colors.r500}" },
+    "backgroundDangerHover": { "value": "{colors.r600}" },
+    "backgroundDangerPress": { "value": "{colors.r700}" },
+    "backgroundDangerFocus": { "value": "{colors.r500}" },
+    "backgroundDangerKeyfocus": { "value": "{colors.r500}" },
+    "backgroundDangerDisabled": { "value": "{colors.r200}" },
     "fontOnDanger": { "value": "{colors.white}" },
     "fontOnDangerDisabled": { "value": "{colors.white}" },
 
-    "backgroundWarningDefault": { "value": "{colors.w400}" },
-    "backgroundWarningHover": { "value": "{colors.w500}" },
-    "backgroundWarningPress": { "value": "{colors.w600}" },
-    "backgroundWarningFocus": { "value": "{colors.w400}" },
-    "backgroundWarningKeyfocus": { "value": "{colors.w400}" },
-    "backgroundWarningDisabled": { "value": "{colors.w200}" },
+    "backgroundWarningDefault": { "value": "{colors.y400}" },
+    "backgroundWarningHover": { "value": "{colors.y500}" },
+    "backgroundWarningPress": { "value": "{colors.y600}" },
+    "backgroundWarningFocus": { "value": "{colors.y400}" },
+    "backgroundWarningKeyfocus": { "value": "{colors.y400}" },
+    "backgroundWarningDisabled": { "value": "{colors.y200}" },
     "fontOnWarning": { "value": "{colors.n900}" },
     "fontOnWarningDisabled": { "value": "{colors.n600}" },
 
@@ -51,15 +51,15 @@
     "backgroundSecondaryWarningFocus": { "value": "{colors.n400}" },
     "backgroundSecondaryWarningKeyfocus": { "value": "{colors.n400}" },
     "backgroundSecondaryWarningDisabled": { "value": "{colors.n300}" },
-    "fontOnSecondaryWarning": { "value": "{colors.w900}" },
-    "fontOnSecondaryWarningDisabled": { "value": "{colors.w600}" },
+    "fontOnSecondaryWarning": { "value": "{colors.y900}" },
+    "fontOnSecondaryWarningDisabled": { "value": "{colors.y600}" },
 
-    "backgroundSuccessDefault": { "value": "{colors.s500}" },
-    "backgroundSuccessHover": { "value": "{colors.s600}" },
-    "backgroundSuccessPress": { "value": "{colors.s700}" },
-    "backgroundSuccessFocus": { "value": "{colors.s500}" },
-    "backgroundSuccessKeyfocus": { "value": "{colors.s500}" },
-    "backgroundSuccessDisabled": { "value": "{colors.s200}" },
+    "backgroundSuccessDefault": { "value": "{colors.g500}" },
+    "backgroundSuccessHover": { "value": "{colors.g600}" },
+    "backgroundSuccessPress": { "value": "{colors.g700}" },
+    "backgroundSuccessFocus": { "value": "{colors.g500}" },
+    "backgroundSuccessKeyfocus": { "value": "{colors.g500}" },
+    "backgroundSuccessDisabled": { "value": "{colors.g200}" },
     "fontOnSuccess": { "value": "{colors.n900}" },
     "fontOnSuccessDisabled": { "value": "{colors.white}" },
 
@@ -69,8 +69,8 @@
     "backgroundSecondarySuccessFocus": { "value": "{colors.n400}" },
     "backgroundSecondarySuccessKeyfocus": { "value": "{colors.n400}" },
     "backgroundSecondarySuccessDisabled": { "value": "{colors.n300}" },
-    "fontOnSecondarySuccess": { "value": "{colors.s900}" },
-    "fontOnSecondarySuccessDisabled": { "value": "{colors.s400}" },
+    "fontOnSecondarySuccess": { "value": "{colors.g900}" },
+    "fontOnSecondarySuccessDisabled": { "value": "{colors.g400}" },
 
     "onDisabled": { "value": "{colors.n600}" }
   }
diff --git a/packages/fuselage-tokens/src/colors.jsonc b/packages/fuselage-tokens/src/colors.jsonc
index f52c578747..7e5900cf6e 100644
--- a/packages/fuselage-tokens/src/colors.jsonc
+++ b/packages/fuselage-tokens/src/colors.jsonc
@@ -1,130 +1,72 @@
 {
-  "d100": "#FFE9EC",
-  "d200": "#FFC1C9",
-  "d300": "#F98F9D",
-  "d400": "#F5495F",
-  "d500": "#EC0D2A",
-  "d550": "#F5455C",
-  "d600": "#D40C26",
-  "d650": "#DA1F37",
-  "d700": "#BB0B21",
-  "d800": "#9B1325",
-  "d900": "#8B0719",
-  "i100": "#E8F2FF",
-  "i200": "#D1EBFE",
-  "i300": "#76B7FC",
-  "i400": "#549DF9",
-  "i500": "#156FF5",
-  "i600": "#095AD2",
-  "i700": "#10529E",
-  "i800": "#01336B",
-  "i900": "#012247",
-  "n100": "#f7f8fa",
-  "n200": "#f2f3f5",
+  "white": "#FFFFFF",
+  "n100": "#F7F8FA",
+  "n200": "#F2F3F5",
   "n250": "#EBECEF",
-  "n300": "#eeeff1",
-  "n400": "#e4e7ea",
-  "n450": "#d7dbe0",
-  "n500": "#cbced1",
-  "n600": "#9ea2a8",
-  "n700": "#6c727a",
-  "n800": "#2f343d",
-  "n850": "#2f343d80",
-  "n900": "#1f2329",
-  "p100": "#E8F2FF",
-  "p200": "#D1EBFE",
-  "p300": "#76B7FC",
-  "p400": "#549DF9",
-  "p500": "#156FF5",
-  "p550": "#1D74F5",
-  "p600": "#095AD2",
-  "p700": "#10529E",
-  "p800": "#01336B",
-  "p900": "#012247",
-  "s100": "#E5FBF4",
-  "s200": "#C0F6E4",
-  "s300": "#96F0D2",
-  "s400": "#6CE9C0",
-  "s500": "#2DE0A5",
-  "s600": "#1ECB92",
-  "s650": "#158D65",
-  "s700": "#19AC7C",
-  "s800": "#148660",
-  "s900": "#106D4F",
-  "s1000": "#0D5940",
-  "s1-100": "#FDE8D7",
-  "s1-200": "#FAD1B0",
-  "s1-300": "#F7B27B",
-  "s1-400": "#F59B53",
-  "s1-500": "#F38C39",
-  "s1-600": "#E26D0E",
-  "s1-700": "#BD5A0B",
-  "s1-800": "#974809",
-  "s1-900": "#713607",
-  "s2-100": "#F9EFFC",
-  "s2-200": "#EDD0F7",
-  "s2-300": "#DCA0EF",
-  "s2-400": "#CA71E7",
-  "s2-500": "#9F22C7",
-  "s2-600": "#7F1B9F",
-  "s2-700": "#5F1477",
-  "s2-800": "#4A105D",
-  "s2-900": "#350B42",
-  "w100": "#FFF6D6",
-  "w150": "#FFF8E0",
-  "w200": "#FFECAD",
-  "w300": "#FFE383",
-  "w400": "#FFD95A",
-  "w500": "#FFD031",
-  "w600": "#F3BE08",
-  "w650": "#AC892F",
-  "w700": "#DFAC00",
-  "w800": "#B68D00",
-  "w900": "#8E6300",
-  "white": "#ffffff",
-  "b100": "#e8f2ff",
-  "b200": "#d1ebfe",
-  "b300": "#76b7fc",
-  "b400": "#549df9",
-  "b500": "#1d74f5",
-  "b600": "#095ad2",
-  "b700": "#10529e",
-  "b800": "#01336b",
-  "b900": "#012247",
-  "g100": "#e5fbf4",
-  "g200": "#c0f6e4",
-  "g300": "#96f0d2",
-  "g400": "#6ce9c0",
-  "g500": "#2de0a5",
-  "g600": "#1ecb92",
-  "g700": "#19ac7c",
-  "g800": "#158d65",
-  "g900": "#106d4f",
-  "r100": "#fddade",
-  "r200": "#fbb5be",
-  "r300": "#f98f9d",
-  "r400": "#f76a7d",
-  "r500": "#f5455c",
-  "r600": "#db0c27",
-  "r700": "#b30a20",
-  "r800": "#8b0719",
-  "r900": "#630512",
-  "y100": "#fff6d6",
-  "y200": "#ffecad",
-  "y300": "#ffe383",
-  "y400": "#ffd95a",
-  "y500": "#ffd031",
-  "y600": "#f3be08",
-  "y700": "#dfac00",
-  "y800": "#b68d00",
-  "y900": "#8e6d00",
-  "o100": "#fde8d7",
-  "o200": "#fad1b0",
-  "o300": "#f7b27b",
-  "o400": "#f59b53",
-  "o500": "#f38c39",
-  "o600": "#e26d0e",
-  "o700": "#bd5a0b",
+  "n300": "#EEEFF1",
+  "n400": "#E4E7EA",
+  "n450": "#D7DBE0",
+  "n500": "#CBCED1",
+  "n600": "#9EA2A8",
+  "n700": "#6C737A",
+  "n800": "#2F343D",
+  "n900": "#1F2329",
+  "r100": "#FFE9EC",
+  "r200": "#FFC1C9",
+  "r300": "#F98F9D",
+  "r400": "#F5455C",
+  "r500": "#EC0D2A",
+  "r600": "#D40C26",
+  "r700": "#BB0B21",
+  "r800": "#9B1325",
+  "r900": "#8B0719",
+  "r1000": "#6B0513",
+  "o100": "#FDE8D7",
+  "o200": "#FAD1B0",
+  "o300": "#F7B27B",
+  "o400": "#F59B53",
+  "o500": "#F38C39",
+  "o600": "#E26D0E",
+  "o700": "#BD5A0B",
   "o800": "#974809",
-  "o900": "#713607"
+  "o900": "#713607",
+  "o1000": "#5B2C06",
+  "p100": "#F9EFFC",
+  "p200": "#EDD0F7",
+  "p300": "#DCA0EF",
+  "p400": "#CA71E7",
+  "p500": "#9F22C7",
+  "p600": "#7F1B9F",
+  "p700": "#5F1477",
+  "p800": "#4A105D",
+  "p900": "#350B42",
+  "y100": "#FFF8E0",
+  "y200": "#FFECAD",
+  "y300": "#FFE383",
+  "y400": "#FFD95A",
+  "y500": "#FFD031",
+  "y600": "#F3BE08",
+  "y700": "#DFAC00",
+  "y800": "#AC892F",
+  "y900": "#8E6300",
+  "y1000": "#573D00",
+  "g100": "#E5FBF4",
+  "g200": "#C0F6E4",
+  "g300": "#96F0D2",
+  "g400": "#6CE9C0",
+  "g500": "#2DE0A5",
+  "g600": "#1ECB92",
+  "g700": "#19AC7C",
+  "g800": "#148660",
+  "g900": "#106D4F",
+  "g1000": "#0D5940",
+  "b100": "#E8F2FF",
+  "b200": "#D1EBFE",
+  "b300": "#76B7FC",
+  "b400": "#549DF9",
+  "b500": "#156FF5",
+  "b600": "#095AD2",
+  "b700": "#10529E",
+  "b800": "#01336B",
+  "b900": "#012247"
 }
diff --git a/packages/fuselage-tokens/src/colors/base.json b/packages/fuselage-tokens/src/colors/base.json
index 0d18e6d083..fdb3a38bd0 100644
--- a/packages/fuselage-tokens/src/colors/base.json
+++ b/packages/fuselage-tokens/src/colors/base.json
@@ -1,133 +1,74 @@
 {
   "colors": {
-    "d100": { "value": "#FFE9EC", "group": "colors" },
-    "d200": { "value": "#FFC1C9", "group": "colors" },
-    "d300": { "value": "#F98F9D", "group": "colors" },
-    "d400": { "value": "#F5495F", "group": "colors" },
-    "d500": { "value": "#EC0D2A", "group": "colors" },
-    "d550": { "value": "#F5455C", "group": "colors" },
-    "d600": { "value": "#D40C26", "group": "colors" },
-    "d650": { "value": "#DA1F37", "group": "colors" },
-    "d700": { "value": "#BB0B21", "group": "colors" },
-    "d800": { "value": "#9B1325", "group": "colors" },
-    "d900": { "value": "#8B0719", "group": "colors" },
-    "i100": { "value": "#E8F2FF", "group": "colors" },
-    "i200": { "value": "#D1EBFE", "group": "colors" },
-    "i300": { "value": "#76B7FC", "group": "colors" },
-    "i400": { "value": "#549DF9", "group": "colors" },
-    "i500": { "value": "#156FF5", "group": "colors" },
-    "i600": { "value": "#095AD2", "group": "colors" },
-    "i700": { "value": "#10529E", "group": "colors" },
-    "i800": { "value": "#01336B", "group": "colors" },
-    "i900": { "value": "#012247", "group": "colors" },
-    "n100": { "value": "#f7f8fa", "group": "colors" },
-    "n200": { "value": "#f2f3f5", "group": "colors" },
-    "n250": { "value": "#EBECEF", "group": "colors" },
-    "n300": { "value": "#eeeff1", "group": "colors" },
-    "n400": { "value": "#e4e7ea", "group": "colors" },
-    "n450": { "value": "#d7dbe0", "group": "colors" },
-    "n500": { "value": "#cbced1", "group": "colors" },
-    "n600": { "value": "#9ea2a8", "group": "colors" },
-    "n700": { "value": "#6c727a", "group": "colors" },
-    "n800": { "value": "#2f343d", "group": "colors" },
-    "n850": { "value": "#2f343d80", "group": "colors" },
-    "n900": { "value": "#1f2329", "group": "colors" },
-    "p100": { "value": "#E8F2FF", "group": "colors" },
-    "p200": { "value": "#D1EBFE", "group": "colors" },
-    "p300": { "value": "#76B7FC", "group": "colors" },
-    "p400": { "value": "#549DF9", "group": "colors" },
-    "p500": { "value": "#156FF5", "group": "colors" },
-    "p550": { "value": "#1D74F5", "group": "colors" },
-    "p600": { "value": "#095AD2", "group": "colors" },
-    "p700": { "value": "#10529E", "group": "colors" },
-    "p800": { "value": "#01336B", "group": "colors" },
-    "p900": { "value": "#012247", "group": "colors" },
-    "s100": { "value": "#E5FBF4", "group": "colors" },
-    "s200": { "value": "#C0F6E4", "group": "colors" },
-    "s300": { "value": "#96F0D2", "group": "colors" },
-    "s400": { "value": "#6CE9C0", "group": "colors" },
-    "s500": { "value": "#2DE0A5", "group": "colors" },
-    "s600": { "value": "#1ECB92", "group": "colors" },
-    "s650": { "value": "#158D65", "group": "colors" },
-    "s700": { "value": "#19AC7C", "group": "colors" },
-    "s800": { "value": "#148660", "group": "colors" },
-    "s900": { "value": "#106D4F", "group": "colors" },
-    "s1000": { "value": "#0D5940", "group": "colors" },
-    "s1-100": { "value": "#FDE8D7", "group": "colors" },
-    "s1-200": { "value": "#FAD1B0", "group": "colors" },
-    "s1-300": { "value": "#F7B27B", "group": "colors" },
-    "s1-400": { "value": "#F59B53", "group": "colors" },
-    "s1-500": { "value": "#F38C39", "group": "colors" },
-    "s1-600": { "value": "#E26D0E", "group": "colors" },
-    "s1-700": { "value": "#BD5A0B", "group": "colors" },
-    "s1-800": { "value": "#974809", "group": "colors" },
-    "s1-900": { "value": "#713607", "group": "colors" },
-    "s2-100": { "value": "#F9EFFC", "group": "colors" },
-    "s2-200": { "value": "#EDD0F7", "group": "colors" },
-    "s2-300": { "value": "#DCA0EF", "group": "colors" },
-    "s2-400": { "value": "#CA71E7", "group": "colors" },
-    "s2-500": { "value": "#9F22C7", "group": "colors" },
-    "s2-600": { "value": "#7F1B9F", "group": "colors" },
-    "s2-700": { "value": "#5F1477", "group": "colors" },
-    "s2-800": { "value": "#4A105D", "group": "colors" },
-    "s2-900": { "value": "#350B42", "group": "colors" },
-    "w100": { "value": "#FFF6D6", "group": "colors" },
-    "w150": { "value": "#FFF8E0", "group": "colors" },
-    "w200": { "value": "#FFECAD", "group": "colors" },
-    "w300": { "value": "#FFE383", "group": "colors" },
-    "w400": { "value": "#FFD95A", "group": "colors" },
-    "w500": { "value": "#FFD031", "group": "colors" },
-    "w600": { "value": "#F3BE08", "group": "colors" },
-    "w650": { "value": "#AC892F", "group": "colors" },
-    "w700": { "value": "#DFAC00", "group": "colors" },
-    "w800": { "value": "#B68D00", "group": "colors" },
-    "w900": { "value": "#8E6300", "group": "colors" },
     "white": { "value": "#ffffff", "group": "colors" },
-
-    "b100": { "value": "#e8f2ff", "group": "colors" },
-    "b200": { "value": "#d1ebfe", "group": "colors" },
-    "b300": { "value": "#76b7fc", "group": "colors" },
-    "b400": { "value": "#549df9", "group": "colors" },
-    "b500": { "value": "#1d74f5", "group": "colors" },
-    "b600": { "value": "#095ad2", "group": "colors" },
-    "b700": { "value": "#10529e", "group": "colors" },
-    "b800": { "value": "#01336b", "group": "colors" },
-    "b900": { "value": "#012247", "group": "colors" },
-    "g100": { "value": "#e5fbf4", "group": "colors" },
-    "g200": { "value": "#c0f6e4", "group": "colors" },
-    "g300": { "value": "#96f0d2", "group": "colors" },
-    "g400": { "value": "#6ce9c0", "group": "colors" },
-    "g500": { "value": "#2de0a5", "group": "colors" },
-    "g600": { "value": "#1ecb92", "group": "colors" },
-    "g700": { "value": "#19ac7c", "group": "colors" },
-    "g800": { "value": "#158d65", "group": "colors" },
-    "g900": { "value": "#106d4f", "group": "colors" },
-    "r100": { "value": "#fddade", "group": "colors" },
-    "r200": { "value": "#fbb5be", "group": "colors" },
-    "r300": { "value": "#f98f9d", "group": "colors" },
-    "r400": { "value": "#f76a7d", "group": "colors" },
-    "r500": { "value": "#f5455c", "group": "colors" },
-    "r600": { "value": "#db0c27", "group": "colors" },
-    "r700": { "value": "#b30a20", "group": "colors" },
-    "r800": { "value": "#8b0719", "group": "colors" },
-    "r900": { "value": "#630512", "group": "colors" },
-    "y100": { "value": "#fff6d6", "group": "colors" },
-    "y200": { "value": "#ffecad", "group": "colors" },
-    "y300": { "value": "#ffe383", "group": "colors" },
-    "y400": { "value": "#ffd95a", "group": "colors" },
-    "y500": { "value": "#ffd031", "group": "colors" },
-    "y600": { "value": "#f3be08", "group": "colors" },
-    "y700": { "value": "#dfac00", "group": "colors" },
-    "y800": { "value": "#b68d00", "group": "colors" },
-    "y900": { "value": "#8e6d00", "group": "colors" },
-    "o100": { "value": "#fde8d7", "group": "colors" },
-    "o200": { "value": "#fad1b0", "group": "colors" },
-    "o300": { "value": "#f7b27b", "group": "colors" },
-    "o400": { "value": "#f59b53", "group": "colors" },
-    "o500": { "value": "#f38c39", "group": "colors" },
-    "o600": { "value": "#e26d0e", "group": "colors" },
-    "o700": { "value": "#bd5a0b", "group": "colors" },
+    "n100": { "value": "#F7F8FA", "group": "colors" },
+    "n200": { "value": "#F2F3F5", "group": "colors" },
+    "n250": { "value": "#EBECEF", "group": "colors" },
+    "n300": { "value": "#EBECEF", "group": "colors" },
+    "n400": { "value": "#E4E7EA", "group": "colors" },
+    "n450": { "value": "#D7DBE0", "group": "colors" },
+    "n500": { "value": "#CBCED1", "group": "colors" },
+    "n600": { "value": "#9EA2A8", "group": "colors" },
+    "n700": { "value": "#6C737A", "group": "colors" },
+    "n800": { "value": "#2F343D", "group": "colors" },
+    "n900": { "value": "#1F2329", "group": "colors" },
+    "r100": { "value": "#FFE9EC", "group": "colors" },
+    "r200": { "value": "#FFC1C9", "group": "colors" },
+    "r300": { "value": "#F98F9D", "group": "colors" },
+    "r400": { "value": "#F5455C", "group": "colors" },
+    "r500": { "value": "#EC0D2A", "group": "colors" },
+    "r600": { "value": "#D40C26", "group": "colors" },
+    "r700": { "value": "#BB0B21", "group": "colors" },
+    "r800": { "value": "#9B1325", "group": "colors" },
+    "r900": { "value": "#8B0719", "group": "colors" },
+    "r1000": { "value": "#6B0513", "group": "colors" },
+    "o100": { "value": "#FDE8D7", "group": "colors" },
+    "o200": { "value": "#FAD1B0", "group": "colors" },
+    "o300": { "value": "#F7B27B", "group": "colors" },
+    "o400": { "value": "#F59B53", "group": "colors" },
+    "o500": { "value": "#F38C39", "group": "colors" },
+    "o600": { "value": "#E26D0E", "group": "colors" },
+    "o700": { "value": "#BD5A0B", "group": "colors" },
     "o800": { "value": "#974809", "group": "colors" },
-    "o900": { "value": "#713607", "group": "colors" }
+    "o900": { "value": "#713607", "group": "colors" },
+    "o1000": { "value": "#5B2C06", "group": "colors" },
+    "p100": { "value": "#F9EFFC", "group": "colors" },
+    "p200": { "value": "#EDD0F7", "group": "colors" },
+    "p300": { "value": "#DCA0EF", "group": "colors" },
+    "p400": { "value": "#CA71E7", "group": "colors" },
+    "p500": { "value": "#9F22C7", "group": "colors" },
+    "p600": { "value": "#7F1B9F", "group": "colors" },
+    "p700": { "value": "#5F1477", "group": "colors" },
+    "p800": { "value": "#4A105D", "group": "colors" },
+    "p900": { "value": "#350B42", "group": "colors" },
+    "y100": { "value": "#FFF8E0", "group": "colors" },
+    "y200": { "value": "#FFECAD", "group": "colors" },
+    "y300": { "value": "#FFE383", "group": "colors" },
+    "y400": { "value": "#FFD95A", "group": "colors" },
+    "y500": { "value": "#FFD031", "group": "colors" },
+    "y600": { "value": "#F3BE08", "group": "colors" },
+    "y700": { "value": "#DFAC00", "group": "colors" },
+    "y800": { "value": "#AC892F", "group": "colors" },
+    "y900": { "value": "#8E6300", "group": "colors" },
+    "y1000": { "value": "#573D00", "group": "colors" },
+    "g100": { "value": "#E5FBF4", "group": "colors" },
+    "g200": { "value": "#C0F6E4", "group": "colors" },
+    "g300": { "value": "#96F0D2", "group": "colors" },
+    "g400": { "value": "#6CE9C0", "group": "colors" },
+    "g500": { "value": "#2DE0A5", "group": "colors" },
+    "g600": { "value": "#1ECB92", "group": "colors" },
+    "g700": { "value": "#19AC7C", "group": "colors" },
+    "g800": { "value": "#148660", "group": "colors" },
+    "g900": { "value": "#106D4F", "group": "colors" },
+    "g1000": { "value": "#0D5940", "group": "colors" },
+    "b100": { "value": "#E8F2FF", "group": "colors" },
+    "b200": { "value": "#D1EBFE", "group": "colors" },
+    "b300": { "value": "#76B7FC", "group": "colors" },
+    "b400": { "value": "#549DF9", "group": "colors" },
+    "b500": { "value": "#156FF5", "group": "colors" },
+    "b600": { "value": "#095AD2", "group": "colors" },
+    "b700": { "value": "#10529E", "group": "colors" },
+    "b800": { "value": "#01336B", "group": "colors" },
+    "b900": { "value": "#012247", "group": "colors" }
   }
 }
diff --git a/packages/fuselage-tokens/src/font/base.json b/packages/fuselage-tokens/src/font/base.json
index fe008becdf..02b401b191 100644
--- a/packages/fuselage-tokens/src/font/base.json
+++ b/packages/fuselage-tokens/src/font/base.json
@@ -7,7 +7,9 @@
     "secondaryInfo": { "value": "{colors.n700}" },
     "default": { "value": "{colors.n800}" },
     "titlesLabels": { "value": "{colors.n900}" },
-    "info": { "value": "{colors.i600}" },
-    "danger": { "value": "{colors.d600}" }
+    "info": { "value": "{colors.b600}" },
+    "danger": { "value": "{colors.r600}" },
+    "pure-white": { "value": "{colors.white}" },
+    "pure-black": { "value": "{colors.n800}" }
   }
 }
diff --git a/packages/fuselage-tokens/src/status/base.json b/packages/fuselage-tokens/src/status/base.json
index 051e98578d..0453d196e5 100644
--- a/packages/fuselage-tokens/src/status/base.json
+++ b/packages/fuselage-tokens/src/status/base.json
@@ -1,16 +1,16 @@
 {
   "status": {
-    "info": { "value": "{colors.p200}" },
-    "font-on-info": { "value": "{colors.p600}" },
-    "success": { "value": "{colors.s200}" },
-    "font-on-success": { "value": "{colors.s800}" },
-    "danger": { "value": "{colors.d200}" },
-    "font-on-danger": { "value": "{colors.d800}" },
-    "warning": { "value": "{colors.w200}" },
-    "font-on-warning": { "value": "{colors.w900}" },
-    "service-1": { "value": "{colors.s1-200}" },
-    "font-on-service-1": { "value": "{colors.s1-800}" },
-    "service-2": { "value": "{colors.s2-200}" },
-    "font-on-service-2": { "value": "{colors.s2-600}" }
+    "info": { "value": "{colors.b200}" },
+    "font-on-info": { "value": "{colors.b600}" },
+    "success": { "value": "{colors.g200}" },
+    "font-on-success": { "value": "{colors.g800}" },
+    "danger": { "value": "{colors.r200}" },
+    "font-on-danger": { "value": "{colors.r800}" },
+    "warning": { "value": "{colors.y200}" },
+    "font-on-warning": { "value": "{colors.y900}" },
+    "service-1": { "value": "{colors.o200}" },
+    "font-on-service-1": { "value": "{colors.o800}" },
+    "service-2": { "value": "{colors.p200}" },
+    "font-on-service-2": { "value": "{colors.p600}" }
   }
 }
diff --git a/packages/fuselage-tokens/src/stroke/base.json b/packages/fuselage-tokens/src/stroke/base.json
index 11fa15316c..6322aeccc6 100644
--- a/packages/fuselage-tokens/src/stroke/base.json
+++ b/packages/fuselage-tokens/src/stroke/base.json
@@ -1,13 +1,13 @@
 {
   "stroke": {
-    "extraLight": { "value": "{colors.white}" },
+    "extraLight": { "value": "{colors.n250}" },
     "light": { "value": "{colors.n500}" },
     "medium": { "value": "{colors.n600}" },
     "dark": { "value": "{colors.n700}" },
     "extraDark": { "value": "{colors.n800}" },
-    "extraLightHighlight": { "value": "{colors.p200}" },
-    "highlight": { "value": "{colors.p500}" },
-    "extraLightError": { "value": "{colors.d200}" },
-    "error": { "value": "{colors.d500}" }
+    "extraLightHighlight": { "value": "{colors.b200}" },
+    "highlight": { "value": "{colors.b500}" },
+    "extraLightError": { "value": "{colors.r200}" },
+    "error": { "value": "{colors.r500}" }
   }
 }
diff --git a/packages/fuselage-tokens/src/surface/base.json b/packages/fuselage-tokens/src/surface/base.json
index 3bea356b81..704426641a 100644
--- a/packages/fuselage-tokens/src/surface/base.json
+++ b/packages/fuselage-tokens/src/surface/base.json
@@ -2,9 +2,13 @@
   "surface": {
     "light": { "value": "{colors.white}" },
     "tint": { "value": "{colors.n100}" },
+    "room": { "value": "{colors.white}" },
     "neutral": { "value": "{colors.n400}" },
     "disabled": { "value": "{colors.n100}" },
     "hover": { "value": "{colors.n200}" },
-    "dark": { "value": "{colors.n900}" }
+    "selected": { "value": "{colors.n450}" },
+    "dark": { "value": "{colors.n900}" },
+    "featured": { "value": "{colors.p700}" },
+    "featured-hover": { "value": "{colors.p800}" }
   }
 }

From bb0c2c6d8d6d5a2e76e036ab330b5e59f546a7bc Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 9 Aug 2023 14:10:25 -0300
Subject: [PATCH 02/12] update tokens usage

---
 packages/logo/src/RocketChatLogo/RocketChatLogo.tsx             | 2 +-
 packages/logo/src/TaggedRocketChatLogo/TaggedRocketChatLogo.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/logo/src/RocketChatLogo/RocketChatLogo.tsx b/packages/logo/src/RocketChatLogo/RocketChatLogo.tsx
index 17d7286064..d442984490 100644
--- a/packages/logo/src/RocketChatLogo/RocketChatLogo.tsx
+++ b/packages/logo/src/RocketChatLogo/RocketChatLogo.tsx
@@ -7,7 +7,7 @@ type RocketChatLogoProps = {
 };
 
 const RocketChatLogo = ({
-  color = colors.d400,
+  color = colors.r400,
 }: RocketChatLogoProps): ReactElement => {
   const titleId = useUniqueId();
 
diff --git a/packages/logo/src/TaggedRocketChatLogo/TaggedRocketChatLogo.tsx b/packages/logo/src/TaggedRocketChatLogo/TaggedRocketChatLogo.tsx
index ec8bcacc7e..8b3a5275ce 100644
--- a/packages/logo/src/TaggedRocketChatLogo/TaggedRocketChatLogo.tsx
+++ b/packages/logo/src/TaggedRocketChatLogo/TaggedRocketChatLogo.tsx
@@ -12,7 +12,7 @@ type TaggedRocketChatLogoProps = {
 
 const TaggedRocketChatLogo = ({
   tagTitle,
-  tagBackground = colors.d400,
+  tagBackground = colors.r400,
   color = colors.white,
   ...props
 }: TaggedRocketChatLogoProps): ReactElement => (

From c8279fced5abba0312c368fdc1752a3cfa26d53f Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 9 Aug 2023 15:42:11 -0300
Subject: [PATCH 03/12] replace tokens on Themes and styleTokens

---
 packages/fuselage/src/Theme.ts           | 146 +++++++++----------
 packages/fuselage/src/styleTokens.ts     |  14 +-
 packages/fuselage/src/styles/colors.scss | 176 +++++++++++------------
 3 files changed, 163 insertions(+), 173 deletions(-)

diff --git a/packages/fuselage/src/Theme.ts b/packages/fuselage/src/Theme.ts
index 9ba09d6611..95009e7adc 100644
--- a/packages/fuselage/src/Theme.ts
+++ b/packages/fuselage/src/Theme.ts
@@ -40,95 +40,91 @@ export const neutral = {
   n600: new Var('neutral-600', tokenColors.n600),
   n700: new Var('neutral-700', tokenColors.n700),
   n800: new Var('neutral-800', tokenColors.n800),
-  n850: new Var('neutral-850', tokenColors.n850),
   n900: new Var('neutral-900', tokenColors.n900),
 };
 
 const primary = {
-  p100: new Var('primary-100', tokenColors.p100),
-  p200: new Var('primary-200', tokenColors.p200),
-  p300: new Var('primary-300', tokenColors.p300),
-  p400: new Var('primary-400', tokenColors.p400),
-  p500: new Var('primary-500', tokenColors.p500),
-  p550: new Var('primary-550', tokenColors.p550),
-  p600: new Var('primary-600', tokenColors.p600),
-  p700: new Var('primary-700', tokenColors.p700),
-  p800: new Var('primary-800', tokenColors.p800),
-  p900: new Var('primary-900', tokenColors.p900),
+  p100: new Var('primary-100', tokenColors.b100),
+  p200: new Var('primary-200', tokenColors.b200),
+  p300: new Var('primary-300', tokenColors.b300),
+  p400: new Var('primary-400', tokenColors.b400),
+  p500: new Var('primary-500', tokenColors.b500),
+  p600: new Var('primary-600', tokenColors.b600),
+  p700: new Var('primary-700', tokenColors.b700),
+  p800: new Var('primary-800', tokenColors.b800),
+  p900: new Var('primary-900', tokenColors.b900),
 };
 
-const info = {
-  i100: new Var('info-100', tokenColors.i100),
-  i200: new Var('info-200', tokenColors.i200),
-  i300: new Var('info-300', tokenColors.i300),
-  i400: new Var('info-400', tokenColors.i400),
-  i500: new Var('info-500', tokenColors.i500),
-  i600: new Var('info-600', tokenColors.i600),
-  i700: new Var('info-700', tokenColors.i700),
-  i800: new Var('info-800', tokenColors.i800),
-  i900: new Var('info-900', tokenColors.i900),
-};
+// const info = {
+//   i100: new Var('info-100', tokenColors.i100),
+//   i200: new Var('info-200', tokenColors.i200),
+//   i300: new Var('info-300', tokenColors.i300),
+//   i400: new Var('info-400', tokenColors.i400),
+//   i500: new Var('info-500', tokenColors.i500),
+//   i600: new Var('info-600', tokenColors.i600),
+//   i700: new Var('info-700', tokenColors.i700),
+//   i800: new Var('info-800', tokenColors.i800),
+//   i900: new Var('info-900', tokenColors.i900),
+// };
 
 const success = {
-  s100: new Var('success-100', tokenColors.s100),
-  s200: new Var('success-200', tokenColors.s200),
-  s300: new Var('success-300', tokenColors.s300),
-  s400: new Var('success-400', tokenColors.s400),
-  s500: new Var('success-500', tokenColors.s500),
-  s600: new Var('success-600', tokenColors.s600),
-  s700: new Var('success-700', tokenColors.s700),
-  s800: new Var('success-800', tokenColors.s800),
-  s900: new Var('success-900', tokenColors.s900),
+  s100: new Var('success-100', tokenColors.g100),
+  s200: new Var('success-200', tokenColors.g200),
+  s300: new Var('success-300', tokenColors.g300),
+  s400: new Var('success-400', tokenColors.g400),
+  s500: new Var('success-500', tokenColors.g500),
+  s600: new Var('success-600', tokenColors.g600),
+  s700: new Var('success-700', tokenColors.g700),
+  s800: new Var('success-800', tokenColors.g800),
+  s900: new Var('success-900', tokenColors.g900),
 };
 
 const warning = {
-  w100: new Var('warning-100', tokenColors.w100),
-  w150: new Var('warning-150', tokenColors.w150),
-  w200: new Var('warning-200', tokenColors.w200),
-  w300: new Var('warning-300', tokenColors.w300),
-  w400: new Var('warning-400', tokenColors.w400),
-  w500: new Var('warning-500', tokenColors.w500),
-  w600: new Var('warning-600', tokenColors.w600),
-  w700: new Var('warning-700', tokenColors.w700),
-  w800: new Var('warning-800', tokenColors.w800),
-  w900: new Var('warning-900', tokenColors.w900),
+  w100: new Var('warning-100', tokenColors.y100),
+  w200: new Var('warning-200', tokenColors.y200),
+  w300: new Var('warning-300', tokenColors.y300),
+  w400: new Var('warning-400', tokenColors.y400),
+  w500: new Var('warning-500', tokenColors.y500),
+  w600: new Var('warning-600', tokenColors.y600),
+  w700: new Var('warning-700', tokenColors.y700),
+  w800: new Var('warning-800', tokenColors.y800),
+  w900: new Var('warning-900', tokenColors.y900),
 };
 
 const danger = {
-  d100: new Var('danger-100', tokenColors.d100),
-  d200: new Var('danger-200', tokenColors.d200),
-  d300: new Var('danger-300', tokenColors.d300),
-  d400: new Var('danger-400', tokenColors.d400),
-  d500: new Var('danger-500', tokenColors.d500),
-  d550: new Var('danger-550', tokenColors.d550),
-  d600: new Var('danger-600', tokenColors.d600),
-  d700: new Var('danger-700', tokenColors.d700),
-  d800: new Var('danger-800', tokenColors.d800),
-  d900: new Var('danger-900', tokenColors.d900),
+  d100: new Var('danger-100', tokenColors.r100),
+  d200: new Var('danger-200', tokenColors.r200),
+  d300: new Var('danger-300', tokenColors.r300),
+  d400: new Var('danger-400', tokenColors.r400),
+  d500: new Var('danger-500', tokenColors.r500),
+  d600: new Var('danger-600', tokenColors.r600),
+  d700: new Var('danger-700', tokenColors.r700),
+  d800: new Var('danger-800', tokenColors.r800),
+  d900: new Var('danger-900', tokenColors.r900),
 };
 
 const service1 = {
-  100: new Var('service-1-100', tokenColors['s1-100']),
-  200: new Var('service-1-200', tokenColors['s1-200']),
-  300: new Var('service-1-300', tokenColors['s1-300']),
-  400: new Var('service-1-400', tokenColors['s1-400']),
-  500: new Var('service-1-500', tokenColors['s1-500']),
-  600: new Var('service-1-600', tokenColors['s1-600']),
-  700: new Var('service-1-700', tokenColors['s1-700']),
-  800: new Var('service-1-800', tokenColors['s1-800']),
-  900: new Var('service-1-900', tokenColors['s1-900']),
+  100: new Var('service-1-100', tokenColors.o100),
+  200: new Var('service-1-200', tokenColors.o200),
+  300: new Var('service-1-300', tokenColors.o300),
+  400: new Var('service-1-400', tokenColors.o400),
+  500: new Var('service-1-500', tokenColors.o500),
+  600: new Var('service-1-600', tokenColors.o600),
+  700: new Var('service-1-700', tokenColors.o700),
+  800: new Var('service-1-800', tokenColors.o800),
+  900: new Var('service-1-900', tokenColors.o900),
 };
 
 const service2 = {
-  100: new Var('service-2-100', tokenColors['s2-100']),
-  200: new Var('service-2-200', tokenColors['s2-200']),
-  300: new Var('service-2-300', tokenColors['s2-300']),
-  400: new Var('service-2-400', tokenColors['s2-400']),
-  500: new Var('service-2-500', tokenColors['s2-500']),
-  600: new Var('service-2-600', tokenColors['s2-600']),
-  700: new Var('service-2-700', tokenColors['s2-700']),
-  800: new Var('service-2-800', tokenColors['s2-800']),
-  900: new Var('service-2-900', tokenColors['s2-900']),
+  100: new Var('service-2-100', tokenColors.p100),
+  200: new Var('service-2-200', tokenColors.p200),
+  300: new Var('service-2-300', tokenColors.p300),
+  400: new Var('service-2-400', tokenColors.p400),
+  500: new Var('service-2-500', tokenColors.p500),
+  600: new Var('service-2-600', tokenColors.p600),
+  700: new Var('service-2-700', tokenColors.p700),
+  800: new Var('service-2-800', tokenColors.p800),
+  900: new Var('service-2-900', tokenColors.p900),
 };
 
 export const surfaceColors = {
@@ -142,7 +138,7 @@ export const surfaceColors = {
   'surface-dark': neutral.n800.theme('surface-dark'),
   'surface-featured': service2['700'].theme('surface-featured'),
   'surface-featured-hover': service2['800'].theme('surface-featured-hover'),
-  'surface-overlay': neutral.n850.theme('surface-overlay'),
+  'surface-overlay': neutral.n800.theme('surface-overlay'),
   'surface-transparent': 'transparent',
 };
 
@@ -181,11 +177,11 @@ export const textIconColors = {
 type TextIconColors = keyof typeof textIconColors;
 
 export const statusBackgroundColors = {
-  'status-background-info': info.i200.theme('status-background-info'),
+  'status-background-info': primary.p200.theme('status-background-info'),
   'status-background-success': success.s200.theme('status-background-success'),
   'status-background-danger': danger.d200.theme('status-background-danger'),
   'status-background-warning': warning.w200.theme('status-background-warning'),
-  'status-background-warning-2': warning.w150.theme(
+  'status-background-warning-2': warning.w100.theme(
     'status-background-warning-2'
   ),
   'status-background-service-1': service1['200'].theme(
@@ -199,7 +195,7 @@ export const statusBackgroundColors = {
 type StatusBackgroundColors = keyof typeof statusBackgroundColors;
 
 export const statusColors = {
-  'status-font-on-info': info.i600.theme('status-font-on-info'),
+  'status-font-on-info': primary.p600.theme('status-font-on-info'),
   'status-font-on-success': success.s800.theme('status-font-on-success'),
   'status-font-on-warning': warning.w800.theme('status-font-on-warning'),
   'status-font-on-warning-2': neutral.n800.theme('status-font-on-warning-2'),
@@ -213,9 +209,9 @@ type StatusColors = keyof typeof statusColors;
 export const badgeBackgroundColors = {
   'badge-background-level-0': neutral.n400.theme('badge-background-level-0'),
   'badge-background-level-1': neutral.n600.theme('badge-background-level-1'),
-  'badge-background-level-2': primary.p550.theme('badge-background-level-2'),
+  'badge-background-level-2': primary.p500.theme('badge-background-level-2'),
   'badge-background-level-3': service1[500].theme('badge-background-level-3'),
-  'badge-background-level-4': danger.d550.theme('badge-background-level-4'),
+  'badge-background-level-4': danger.d500.theme('badge-background-level-4'),
 };
 
 type BadgeBackgroundColors = keyof typeof badgeBackgroundColors;
diff --git a/packages/fuselage/src/styleTokens.ts b/packages/fuselage/src/styleTokens.ts
index 8f218207e1..f1e3372d3f 100644
--- a/packages/fuselage/src/styleTokens.ts
+++ b/packages/fuselage/src/styleTokens.ts
@@ -109,13 +109,13 @@ const foregroundColors = {
   'hint': tokenColors.n600,
   'disabled': tokenColors.n400,
   'alternative': 'white',
-  'primary': tokenColors.p500,
-  'success': tokenColors.s500,
-  'danger': tokenColors.d500,
-  'warning': tokenColors.w700,
-  'link': tokenColors.p500,
-  'visited-link': tokenColors['s2-500'],
-  'active-link': tokenColors.d500,
+  'primary': tokenColors.b500,
+  'success': tokenColors.g500,
+  'danger': tokenColors.r500,
+  'warning': tokenColors.y700,
+  'link': tokenColors.b500,
+  'visited-link': tokenColors.p500,
+  'active-link': tokenColors.r500,
 } as const;
 
 const isForegroundColorRef = (
diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
index 725993f9c5..865c17235c 100644
--- a/packages/fuselage/src/styles/colors.scss
+++ b/packages/fuselage/src/styles/colors.scss
@@ -6,14 +6,18 @@
 
 $-map-type-to-prefix: (
   neutral: 'n',
-  primary: 'p',
-  info: 'i',
-  success: 's',
-  warning: 'w',
-  warning-alternative: 'o',
-  danger: 'd',
-  service-1: 's1-',
-  service-2: 's2-',
+  blue: 'b',
+  red: 'r',
+  yellow: 'y',
+  green: 'g',
+  purple: 'p',
+  orange: 'o',
+  // primary: 'b',
+  // danger: 'r',
+  // warning: 'y',
+  // success: 'g',
+  // service-1: 'p',
+  // service-2: 'o,,,
 );
 
 @function _get-palette-color($type, $grade, $alpha) {
@@ -51,43 +55,33 @@ $-map-type-to-prefix: (
   @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
-@function primary($grade, $alpha: null) {
-  $pair: _get-palette-color(primary, $grade, $alpha);
+@function blue($grade, $alpha: null) {
+  $pair: _get-palette-color(blue, $grade, $alpha);
   @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
-@function info($grade, $alpha: null) {
-  $pair: _get-palette-color(info, $grade, $alpha);
+@function green($grade, $alpha: null) {
+  $pair: _get-palette-color(green, $grade, $alpha);
   @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
-@function success($grade, $alpha: null) {
-  $pair: _get-palette-color(success, $grade, $alpha);
+@function yellow($grade, $alpha: null) {
+  $pair: _get-palette-color(yellow, $grade, $alpha);
   @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
-@function warning($grade, $alpha: null) {
-  $pair: _get-palette-color(warning, $grade, $alpha);
+@function red($grade, $alpha: null) {
+  $pair: _get-palette-color(red, $grade, $alpha);
   @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
-@function warning-alternative($grade, $alpha: null) {
-  $pair: _get-palette-color(warning-alternative, $grade, $alpha);
+@function orange($grade, $alpha: null) {
+  $pair: _get-palette-color(orange, $grade, $alpha);
   @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
-@function danger($grade, $alpha: null) {
-  $pair: _get-palette-color(danger, $grade, $alpha);
-  @return var(list.nth($pair, 1), list.nth($pair, 2));
-}
-
-@function service-1($grade, $alpha: null) {
-  $pair: _get-palette-color(service-1, $grade, $alpha);
-  @return var(list.nth($pair, 1), list.nth($pair, 2));
-}
-
-@function service-2($grade, $alpha: null) {
-  $pair: _get-palette-color(service-2, $grade, $alpha);
+@function purple($grade, $alpha: null) {
+  $pair: _get-palette-color(purple, $grade, $alpha);
   @return var(list.nth($pair, 1), list.nth($pair, 2));
 }
 
@@ -100,9 +94,9 @@ $-surfaces: (
   selected: neutral(450),
   hover: neutral(200),
   dark: neutral(900),
-  featured: service-2(700),
-  featured-hover: service-2(800),
-  overlay: neutral(850),
+  featured: purple(700),
+  featured-hover: purple(800),
+  overlay: neutral(800),
 );
 
 @function surface($type) {
@@ -118,8 +112,8 @@ $-font: (
   secondary-info: neutral(700),
   default: neutral(800),
   titles-labels: neutral(900),
-  info: primary(600),
-  danger: danger(600),
+  info: blue(600),
+  danger: red(600),
   pure-black: neutral(800),
   pure-white: white,
 );
@@ -135,10 +129,10 @@ $-font: (
 }
 
 $-status-bullet: (
-  online: success(650),
-  away: warning(650),
-  busy: danger(650),
-  disabled: service-1(500),
+  online: green(800),
+  away: yellow(800),
+  busy: red(600),
+  disabled: orange(500),
   offline: neutral(700),
   loading: neutral(600),
 );
@@ -149,13 +143,13 @@ $-status-bullet: (
 }
 
 $-status-backgrounds: (
-  success: success(200),
-  warning: warning(200),
-  warning-2: warning(150),
-  danger: danger(200),
-  service-1: service-1(200),
-  service-2: service-2(200),
-  info: primary(200),
+  success: green(200),
+  warning: yellow(200),
+  warning-2: yellow(100),
+  danger: red(200),
+  service-1: orange(200),
+  service-2: purple(200),
+  info: blue(200),
 );
 
 @function status-background($type) {
@@ -164,13 +158,13 @@ $-status-backgrounds: (
 }
 
 $-status-font: (
-  on-success: success(800),
-  on-warning: warning(800),
+  on-success: green(800),
+  on-warning: yellow(800),
   on-warning-2: neutral(800),
-  on-danger: danger(800),
-  on-service-1: service-1(800),
-  on-service-2: service-2(600),
-  on-info: primary(600),
+  on-danger: red(800),
+  on-service-1: orange(800),
+  on-service-2: purple(600),
+  on-info: blue(600),
 );
 
 @function status-font($type) {
@@ -184,10 +178,10 @@ $-strokes: (
   medium: neutral(600),
   dark: neutral(700),
   extra-dark: neutral(800),
-  extra-light-highlight: primary(200),
-  highlight: primary(500),
-  extra-light-error: danger(200),
-  error: danger(500),
+  extra-light-highlight: blue(200),
+  highlight: blue(500),
+  extra-light-error: red(200),
+  error: red(500),
 );
 
 @function stroke($type) {
@@ -198,9 +192,9 @@ $-strokes: (
 $-badge-backgrounds: (
   level-0: neutral(400),
   level-1: neutral(600),
-  level-2: primary(550),
-  level-3: service-1(500),
-  level-4: danger(550),
+  level-2: blue(500),
+  level-3: orange(500),
+  level-4: red(500),
 );
 
 @function badge($type) {
@@ -209,8 +203,8 @@ $-badge-backgrounds: (
 }
 
 $shadow-colors: (
-  highlight: primary(200),
-  danger: danger(100),
+  highlight: blue(200),
+  danger: red(100),
   elevation-1: neutral(800, 0.1),
   elevation-2x: neutral(800, 0.08),
   elevation-2y: neutral(800, 0.12),
@@ -223,12 +217,12 @@ $shadow-colors: (
 
 $-button-backgrounds: (
   // primary
-  primary-default: primary(500),
-  primary-hover: primary(600),
-  primary-press: primary(700),
-  primary-focus: primary(500),
-  primary-keyfocus: primary(500),
-  primary-disabled: primary(200),
+  primary-default: blue(500),
+  primary-hover: blue(600),
+  primary-press: blue(700),
+  primary-focus: blue(500),
+  primary-keyfocus: blue(500),
+  primary-disabled: blue(200),
   // secondary
   secondary-default: neutral(400),
   secondary-hover: neutral(500),
@@ -237,12 +231,12 @@ $-button-backgrounds: (
   secondary-keyfocus: neutral(400),
   secondary-disabled: neutral(300),
   // danger
-  danger-default: danger(500),
-  danger-hover: danger(600),
-  danger-press: danger(700),
-  danger-focus: danger(500),
-  danger-keyfocus: danger(500),
-  danger-disabled: danger(200),
+  danger-default: red(500),
+  danger-hover: red(600),
+  danger-press: red(700),
+  danger-focus: red(500),
+  danger-keyfocus: red(500),
+  danger-disabled: red(200),
   // secondary-danger
   secondary-danger-default: neutral(400),
   secondary-danger-hover: neutral(500),
@@ -251,12 +245,12 @@ $-button-backgrounds: (
   secondary-danger-keyfocus: neutral(400),
   secondary-danger-disabled: neutral(300),
   // warning
-  warning-default: warning(400),
-  warning-hover: warning(500),
-  warning-press: warning(600),
-  warning-focus: warning(400),
-  warning-keyfocus: warning(400),
-  warning-disabled: warning(200),
+  warning-default: yellow(400),
+  warning-hover: yellow(500),
+  warning-press: yellow(600),
+  warning-focus: yellow(400),
+  warning-keyfocus: yellow(400),
+  warning-disabled: yellow(200),
   // secondary-warning
   secondary-warning-default: neutral(400),
   secondary-warning-hover: neutral(500),
@@ -265,12 +259,12 @@ $-button-backgrounds: (
   secondary-warning-keyfocus: neutral(400),
   secondary-warning-disabled: neutral(300),
   // success
-  success-default: success(800),
-  success-hover: success(900),
-  success-press: success(1000),
-  success-focus: success(800),
-  success-keyfocus: success(800),
-  success-disabled: success(200),
+  success-default: green(800),
+  success-hover: green(900),
+  success-press: green(1000),
+  success-focus: green(800),
+  success-keyfocus: green(800),
+  success-disabled: green(200),
   // secondary-success
   secondary-success-default: neutral(400),
   secondary-success-hover: neutral(500),
@@ -291,20 +285,20 @@ $-button-fonts: (
   on-danger: white,
   on-danger-disabled: white,
   // secondary-danger
-  on-secondary-danger: danger(700),
-  on-secondary-danger-disabled: danger(300),
+  on-secondary-danger: red(700),
+  on-secondary-danger-disabled: red(300),
   // warning
   on-warning: neutral(900),
   on-warning-disabled: neutral(600),
   // secondary-warning
-  on-secondary-warning: warning(900),
-  on-secondary-warning-disabled: warning(600),
+  on-secondary-warning: yellow(900),
+  on-secondary-warning-disabled: yellow(600),
   // success
   on-success: white,
   on-success-disabled: white,
   // secondary-success
-  on-secondary-success: success(800),
-  on-secondary-success-disabled: success(400),
+  on-secondary-success: green(800),
+  on-secondary-success-disabled: green(400),
   // disabled
   on-disabled: neutral(600)
 );

From bbbc3f08c2adad0d7b1299c141f0d8fdfcd5394e Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 9 Aug 2023 16:21:50 -0300
Subject: [PATCH 04/12] remove foreground colors

---
 packages/fuselage/src/styleTokens.ts | 40 ----------------------------
 1 file changed, 40 deletions(-)

diff --git a/packages/fuselage/src/styleTokens.ts b/packages/fuselage/src/styleTokens.ts
index f1e3372d3f..49f0c2588c 100644
--- a/packages/fuselage/src/styleTokens.ts
+++ b/packages/fuselage/src/styleTokens.ts
@@ -1,4 +1,3 @@
-import tokenColors from '@rocket.chat/fuselage-tokens/colors.json';
 import tokenTypography from '@rocket.chat/fuselage-tokens/typography.json';
 import { memoize } from '@rocket.chat/memo';
 import invariant from 'invariant';
@@ -103,35 +102,6 @@ const isPaletteColorAlpha = (alpha: unknown): alpha is number | undefined =>
   alpha === undefined ||
   (typeof alpha === 'number' && alpha >= 0 && alpha <= 1);
 
-const foregroundColors = {
-  'default': tokenColors.n800,
-  'info': tokenColors.n700,
-  'hint': tokenColors.n600,
-  'disabled': tokenColors.n400,
-  'alternative': 'white',
-  'primary': tokenColors.b500,
-  'success': tokenColors.g500,
-  'danger': tokenColors.r500,
-  'warning': tokenColors.y700,
-  'link': tokenColors.b500,
-  'visited-link': tokenColors.p500,
-  'active-link': tokenColors.r500,
-} as const;
-
-const isForegroundColorRef = (
-  ref: unknown
-): ref is keyof typeof foregroundColors =>
-  typeof ref === 'string' && ref in foregroundColors;
-
-const getForegroundColor = (
-  type: keyof typeof foregroundColors
-): [customPropertyName: string, value: string] => {
-  invariant(isForegroundColorRef(type), 'invalid foreground color');
-
-  const color = foregroundColors[type];
-  return [`--rcx-color-foreground-${type}`, color];
-};
-
 const paletteColorRegex =
   /^(neutral|primary|info|success|warning|danger)-(\d+)(-(\d+))?$/;
 
@@ -234,16 +204,6 @@ export const color = memoize((value) => {
     return toCSSColorValue(value, neutral.n400);
   }
 
-  if (isForegroundColorRef(value)) {
-    const [customProperty, color] = getForegroundColor(value);
-
-    if (customProperty) {
-      return toCSSValue(customProperty, color);
-    }
-
-    return color;
-  }
-
   const paletteMatches = paletteColorRegex.exec(String(value));
   if (
     typeof paletteMatches?.length === 'number' &&

From e0cadcdae3d3a9f42619f55c49105ac188800fe6 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 9 Aug 2023 16:22:20 -0300
Subject: [PATCH 05/12] storybook color

---
 packages/fuselage/.storybook/manager.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/fuselage/.storybook/manager.ts b/packages/fuselage/.storybook/manager.ts
index 6c85216e41..b50c27dd0f 100644
--- a/packages/fuselage/.storybook/manager.ts
+++ b/packages/fuselage/.storybook/manager.ts
@@ -12,6 +12,6 @@ addons.setConfig({
     brandImage: logo,
     brandUrl: manifest.homepage,
     colorPrimary: colorTokens.n500,
-    colorSecondary: colorTokens.p500,
+    colorSecondary: colorTokens.b500,
   }),
 });

From e3010e7e1226fcb670acc3bc89d736414bf6c9f0 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 9 Aug 2023 16:22:42 -0300
Subject: [PATCH 06/12] getPalette colors

---
 packages/fuselage/src/getPaletteColor.ts | 13 +++++++------
 packages/fuselage/src/styleTokens.ts     | 13 +++++++------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/packages/fuselage/src/getPaletteColor.ts b/packages/fuselage/src/getPaletteColor.ts
index 2c77c44d62..18e3924140 100644
--- a/packages/fuselage/src/getPaletteColor.ts
+++ b/packages/fuselage/src/getPaletteColor.ts
@@ -6,16 +6,17 @@ const isPaletteColorRef = (ref: unknown): ref is keyof typeof tokenColors =>
 
 const mapTypeToPrefix = {
   neutral: 'n',
-  primary: 'b',
-  info: 'b',
-  success: 'g',
-  warning: 'y',
-  danger: 'r',
+  blue: 'b',
+  green: 'g',
+  yellow: 'y',
+  red: 'r',
+  orange: 'o',
+  purple: 'p',
 } as const;
 
 export const getPaletteColor = (
   type: keyof typeof mapTypeToPrefix,
-  grade: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
+  grade: 100 | 200 | 250 | 300 | 400 | 450 | 500 | 600 | 700 | 800 | 900 | 1000,
   alpha?: number
 ): [customPropertyName: string, value: string] => {
   const ref = `${mapTypeToPrefix[type]}${grade}`;
diff --git a/packages/fuselage/src/styleTokens.ts b/packages/fuselage/src/styleTokens.ts
index 49f0c2588c..151fc85473 100644
--- a/packages/fuselage/src/styleTokens.ts
+++ b/packages/fuselage/src/styleTokens.ts
@@ -78,11 +78,12 @@ export const borderRadius = measure((value: unknown) => {
 
 const mapTypeToPrefix = {
   neutral: 'n',
-  primary: 'b',
-  info: 'b',
-  success: 'g',
-  warning: 'y',
-  danger: 'r',
+  blue: 'b',
+  green: 'g',
+  yellow: 'y',
+  red: 'r',
+  orange: 'o',
+  purple: 'p',
 } as const;
 
 const isPaletteColorType = (
@@ -103,7 +104,7 @@ const isPaletteColorAlpha = (alpha: unknown): alpha is number | undefined =>
   (typeof alpha === 'number' && alpha >= 0 && alpha <= 1);
 
 const paletteColorRegex =
-  /^(neutral|primary|info|success|warning|danger)-(\d+)(-(\d+))?$/;
+  /^(neutral|blue|green|yellow|red|orange|purple)-(\d+)(-(\d+))?$/;
 
 export const strokeColor = memoize((value) => {
   const colorName = `stroke-${value}`;

From ca14e8eed0de4321cfe419e8b90f95ac3066f0c1 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Wed, 9 Aug 2023 16:30:10 -0300
Subject: [PATCH 07/12] clean

---
 packages/fuselage/src/styles/colors.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
index 865c17235c..80b60a0914 100644
--- a/packages/fuselage/src/styles/colors.scss
+++ b/packages/fuselage/src/styles/colors.scss
@@ -12,12 +12,6 @@ $-map-type-to-prefix: (
   green: 'g',
   purple: 'p',
   orange: 'o',
-  // primary: 'b',
-  // danger: 'r',
-  // warning: 'y',
-  // success: 'g',
-  // service-1: 'p',
-  // service-2: 'o,,,
 );
 
 @function _get-palette-color($type, $grade, $alpha) {

From d85725c28ebc5bd4d8efe1bc5976bb9ac3078df0 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 16 Oct 2023 13:39:14 -0300
Subject: [PATCH 08/12] chore: remove duplicated shadow-color

---
 packages/fuselage/src/styles/colors.scss                  | 1 -
 packages/fuselage/src/styles/variables/button-colors.scss | 8 ++++----
 packages/fuselage/src/styles/variables/input-colors.scss  | 2 +-
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss
index 61c13740a5..9f94d41f7b 100644
--- a/packages/fuselage/src/styles/colors.scss
+++ b/packages/fuselage/src/styles/colors.scss
@@ -198,7 +198,6 @@ $-badge-backgrounds: (
 
 $shadow-colors: (
   highlight: blue(200),
-  extra-light-highlight: stroke(extra-light-highlight),
   extra-light-error: red(200),
   danger: red(100),
   elevation-1: neutral(800, 0.1),
diff --git a/packages/fuselage/src/styles/variables/button-colors.scss b/packages/fuselage/src/styles/variables/button-colors.scss
index 89ca751a0c..e13d4c4cb8 100644
--- a/packages/fuselage/src/styles/variables/button-colors.scss
+++ b/packages/fuselage/src/styles/variables/button-colors.scss
@@ -37,7 +37,7 @@ $button-primary-focus-border-color: theme(
 );
 $button-primary-focus-shadow-color: theme(
   'button-primary-focus-shadow-color',
-  colors.shadow(extra-light-highlight)
+  colors.shadow(highlight)
 );
 $button-primary-disabled-background-color: theme(
   'button-primary-disabled-background-color',
@@ -91,7 +91,7 @@ $button-secondary-focus-border-color: theme(
 );
 $button-secondary-focus-shadow-color: theme(
   'button-secondary-focus-shadow-color',
-  colors.shadow(extra-light-highlight)
+  colors.shadow(highlight)
 );
 $button-secondary-disabled-background-color: theme(
   'button-secondary-disabled-background-color',
@@ -457,7 +457,7 @@ $button-empty-focus-border-color: theme(
 );
 $button-empty-focus-shadow-color: theme(
   'button-empty-focus-shadow-color',
-  colors.shadow(extra-light-highlight)
+  colors.shadow(highlight)
 );
 $button-empty-disabled-background-color: theme(
   'button-empty-disabled-background-color',
@@ -508,7 +508,7 @@ $button-off-focus-border-color: theme(
 );
 $button-off-focus-shadow-color: theme(
   'button-off-focus-shadow-color',
-  colors.shadow(extra-light-highlight)
+  colors.shadow(highlight)
 );
 $button-off-disabled-background-color: theme(
   'button-off-disabled-background-color',
diff --git a/packages/fuselage/src/styles/variables/input-colors.scss b/packages/fuselage/src/styles/variables/input-colors.scss
index 49d59e3406..a25dc24da6 100644
--- a/packages/fuselage/src/styles/variables/input-colors.scss
+++ b/packages/fuselage/src/styles/variables/input-colors.scss
@@ -27,7 +27,7 @@ $input-colors-focus-border-color: theme(
 );
 $input-colors-focus-shadow-color: theme(
   'input-colors-focus-shadow-color',
-  colors.shadow(extra-light-highlight)
+  colors.shadow(highlight)
 );
 
 $input-colors-focus-icon-color: theme(

From 38698cd797347243f07e739b3c80d87626e9b66d Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 16 Oct 2023 14:46:12 -0300
Subject: [PATCH 09/12] refactor: rename Theme groups

---
 packages/fuselage/src/Theme.ts       | 202 +++++++++++++--------------
 packages/fuselage/src/styleTokens.ts |   6 +-
 2 files changed, 104 insertions(+), 104 deletions(-)

diff --git a/packages/fuselage/src/Theme.ts b/packages/fuselage/src/Theme.ts
index 95009e7adc..71b61c0d8a 100644
--- a/packages/fuselage/src/Theme.ts
+++ b/packages/fuselage/src/Theme.ts
@@ -30,29 +30,29 @@ export const __setThrowErrorOnInvalidToken__ = (value: boolean) => {
 };
 
 export const neutral = {
-  n100: new Var('neutral-100', tokenColors.n100),
-  n200: new Var('neutral-200', tokenColors.n200),
-  n250: new Var('neutral-250', tokenColors.n250),
-  n300: new Var('neutral-300', tokenColors.n300),
-  n400: new Var('neutral-400', tokenColors.n400),
-  n450: new Var('neutral-450', tokenColors.n450),
-  n500: new Var('neutral-500', tokenColors.n500),
-  n600: new Var('neutral-600', tokenColors.n600),
-  n700: new Var('neutral-700', tokenColors.n700),
-  n800: new Var('neutral-800', tokenColors.n800),
-  n900: new Var('neutral-900', tokenColors.n900),
+  100: new Var('neutral-100', tokenColors.n100),
+  200: new Var('neutral-200', tokenColors.n200),
+  250: new Var('neutral-250', tokenColors.n250),
+  300: new Var('neutral-300', tokenColors.n300),
+  400: new Var('neutral-400', tokenColors.n400),
+  450: new Var('neutral-450', tokenColors.n450),
+  500: new Var('neutral-500', tokenColors.n500),
+  600: new Var('neutral-600', tokenColors.n600),
+  700: new Var('neutral-700', tokenColors.n700),
+  800: new Var('neutral-800', tokenColors.n800),
+  900: new Var('neutral-900', tokenColors.n900),
 };
 
-const primary = {
-  p100: new Var('primary-100', tokenColors.b100),
-  p200: new Var('primary-200', tokenColors.b200),
-  p300: new Var('primary-300', tokenColors.b300),
-  p400: new Var('primary-400', tokenColors.b400),
-  p500: new Var('primary-500', tokenColors.b500),
-  p600: new Var('primary-600', tokenColors.b600),
-  p700: new Var('primary-700', tokenColors.b700),
-  p800: new Var('primary-800', tokenColors.b800),
-  p900: new Var('primary-900', tokenColors.b900),
+const blue = {
+  100: new Var('primary-100', tokenColors.b100),
+  200: new Var('primary-200', tokenColors.b200),
+  300: new Var('primary-300', tokenColors.b300),
+  400: new Var('primary-400', tokenColors.b400),
+  500: new Var('primary-500', tokenColors.b500),
+  600: new Var('primary-600', tokenColors.b600),
+  700: new Var('primary-700', tokenColors.b700),
+  800: new Var('primary-800', tokenColors.b800),
+  900: new Var('primary-900', tokenColors.b900),
 };
 
 // const info = {
@@ -67,43 +67,43 @@ const primary = {
 //   i900: new Var('info-900', tokenColors.i900),
 // };
 
-const success = {
-  s100: new Var('success-100', tokenColors.g100),
-  s200: new Var('success-200', tokenColors.g200),
-  s300: new Var('success-300', tokenColors.g300),
-  s400: new Var('success-400', tokenColors.g400),
-  s500: new Var('success-500', tokenColors.g500),
-  s600: new Var('success-600', tokenColors.g600),
-  s700: new Var('success-700', tokenColors.g700),
-  s800: new Var('success-800', tokenColors.g800),
-  s900: new Var('success-900', tokenColors.g900),
+const green = {
+  100: new Var('success-100', tokenColors.g100),
+  200: new Var('success-200', tokenColors.g200),
+  300: new Var('success-300', tokenColors.g300),
+  400: new Var('success-400', tokenColors.g400),
+  500: new Var('success-500', tokenColors.g500),
+  600: new Var('success-600', tokenColors.g600),
+  700: new Var('success-700', tokenColors.g700),
+  800: new Var('success-800', tokenColors.g800),
+  900: new Var('success-900', tokenColors.g900),
 };
 
-const warning = {
-  w100: new Var('warning-100', tokenColors.y100),
-  w200: new Var('warning-200', tokenColors.y200),
-  w300: new Var('warning-300', tokenColors.y300),
-  w400: new Var('warning-400', tokenColors.y400),
-  w500: new Var('warning-500', tokenColors.y500),
-  w600: new Var('warning-600', tokenColors.y600),
-  w700: new Var('warning-700', tokenColors.y700),
-  w800: new Var('warning-800', tokenColors.y800),
-  w900: new Var('warning-900', tokenColors.y900),
+const yellow = {
+  100: new Var('warning-100', tokenColors.y100),
+  200: new Var('warning-200', tokenColors.y200),
+  300: new Var('warning-300', tokenColors.y300),
+  400: new Var('warning-400', tokenColors.y400),
+  500: new Var('warning-500', tokenColors.y500),
+  600: new Var('warning-600', tokenColors.y600),
+  700: new Var('warning-700', tokenColors.y700),
+  800: new Var('warning-800', tokenColors.y800),
+  900: new Var('warning-900', tokenColors.y900),
 };
 
-const danger = {
-  d100: new Var('danger-100', tokenColors.r100),
-  d200: new Var('danger-200', tokenColors.r200),
-  d300: new Var('danger-300', tokenColors.r300),
-  d400: new Var('danger-400', tokenColors.r400),
-  d500: new Var('danger-500', tokenColors.r500),
-  d600: new Var('danger-600', tokenColors.r600),
-  d700: new Var('danger-700', tokenColors.r700),
-  d800: new Var('danger-800', tokenColors.r800),
-  d900: new Var('danger-900', tokenColors.r900),
+const red = {
+  100: new Var('danger-100', tokenColors.r100),
+  200: new Var('danger-200', tokenColors.r200),
+  300: new Var('danger-300', tokenColors.r300),
+  400: new Var('danger-400', tokenColors.r400),
+  500: new Var('danger-500', tokenColors.r500),
+  600: new Var('danger-600', tokenColors.r600),
+  700: new Var('danger-700', tokenColors.r700),
+  800: new Var('danger-800', tokenColors.r800),
+  900: new Var('danger-900', tokenColors.r900),
 };
 
-const service1 = {
+const orange = {
   100: new Var('service-1-100', tokenColors.o100),
   200: new Var('service-1-200', tokenColors.o200),
   300: new Var('service-1-300', tokenColors.o300),
@@ -115,7 +115,7 @@ const service1 = {
   900: new Var('service-1-900', tokenColors.o900),
 };
 
-const service2 = {
+const purple = {
   100: new Var('service-2-100', tokenColors.p100),
   200: new Var('service-2-200', tokenColors.p200),
   300: new Var('service-2-300', tokenColors.p300),
@@ -129,65 +129,65 @@ const service2 = {
 
 export const surfaceColors = {
   'surface-light': white.theme('surface-light'),
-  'surface-tint': neutral.n100.theme('surface-tint'),
+  'surface-tint': neutral[100].theme('surface-tint'),
   'surface-room': white.theme('surface-room'),
-  'surface-neutral': neutral.n400.theme('surface-neutral'),
-  'surface-disabled': neutral.n100.theme('surface-disabled'),
-  'surface-hover': neutral.n200.theme('surface-hover'),
-  'surface-selected': neutral.n450.theme('surface-selected'),
-  'surface-dark': neutral.n800.theme('surface-dark'),
-  'surface-featured': service2['700'].theme('surface-featured'),
-  'surface-featured-hover': service2['800'].theme('surface-featured-hover'),
-  'surface-overlay': neutral.n800.theme('surface-overlay'),
+  'surface-neutral': neutral[400].theme('surface-neutral'),
+  'surface-disabled': neutral[100].theme('surface-disabled'),
+  'surface-hover': neutral[200].theme('surface-hover'),
+  'surface-selected': neutral[450].theme('surface-selected'),
+  'surface-dark': neutral[800].theme('surface-dark'),
+  'surface-featured': purple['700'].theme('surface-featured'),
+  'surface-featured-hover': purple['800'].theme('surface-featured-hover'),
+  'surface-overlay': neutral[800].theme('surface-overlay'),
   'surface-transparent': 'transparent',
 };
 
 type SurfaceColors = keyof typeof surfaceColors;
 
 export const strokeColors = {
-  'stroke-extra-light': neutral.n250.theme('stroke-extra-light'),
-  'stroke-light': neutral.n500.theme('stroke-light'),
-  'stroke-medium': neutral.n600.theme('stroke-medium'),
-  'stroke-dark': neutral.n700.theme('stroke-dark'),
-  'stroke-extra-dark': neutral.n800.theme('stroke-extra-dark'),
-  'stroke-extra-light-highlight': primary.p200.theme(
+  'stroke-extra-light': neutral[250].theme('stroke-extra-light'),
+  'stroke-light': neutral[500].theme('stroke-light'),
+  'stroke-medium': neutral[600].theme('stroke-medium'),
+  'stroke-dark': neutral[700].theme('stroke-dark'),
+  'stroke-extra-dark': neutral[800].theme('stroke-extra-dark'),
+  'stroke-extra-light-highlight': blue[200].theme(
     'stroke-extra-light-highlight'
   ),
-  'stroke-highlight': primary.p500.theme('stroke-highlight'),
-  'stroke-extra-light-error': danger.d200.theme('stroke-extra-light-error'),
-  'stroke-error': danger.d500.theme('stroke-error'),
+  'stroke-highlight': blue[500].theme('stroke-highlight'),
+  'stroke-extra-light-error': red[200].theme('stroke-extra-light-error'),
+  'stroke-error': red[500].theme('stroke-error'),
 };
 
 type StrokeColor = keyof typeof strokeColors;
 
 export const textIconColors = {
   'font-white': white.theme('font-white'),
-  'font-disabled': neutral.n500.theme('font-disabled'),
-  'font-annotation': neutral.n600.theme('font-annotation'),
-  'font-hint': neutral.n700.theme('font-hint'),
-  'font-secondary-info': neutral.n700.theme('font-secondary-info'),
-  'font-default': neutral.n800.theme('font-default'),
-  'font-titles-labels': neutral.n900.theme('font-titles-labels'),
-  'font-info': primary.p600.theme('font-info'),
-  'font-danger': danger.d600.theme('font-danger'),
-  'font-pure-black': neutral.n800.theme('font-pure-black'),
+  'font-disabled': neutral[500].theme('font-disabled'),
+  'font-annotation': neutral[600].theme('font-annotation'),
+  'font-hint': neutral[700].theme('font-hint'),
+  'font-secondary-info': neutral[700].theme('font-secondary-info'),
+  'font-default': neutral[800].theme('font-default'),
+  'font-titles-labels': neutral[900].theme('font-titles-labels'),
+  'font-info': blue[600].theme('font-info'),
+  'font-danger': red[600].theme('font-danger'),
+  'font-pure-black': neutral[800].theme('font-pure-black'),
   'font-pure-white': white.theme('font-pure-white'),
 };
 
 type TextIconColors = keyof typeof textIconColors;
 
 export const statusBackgroundColors = {
-  'status-background-info': primary.p200.theme('status-background-info'),
-  'status-background-success': success.s200.theme('status-background-success'),
-  'status-background-danger': danger.d200.theme('status-background-danger'),
-  'status-background-warning': warning.w200.theme('status-background-warning'),
-  'status-background-warning-2': warning.w100.theme(
+  'status-background-info': blue[200].theme('status-background-info'),
+  'status-background-success': green[200].theme('status-background-success'),
+  'status-background-danger': red[200].theme('status-background-danger'),
+  'status-background-warning': yellow[200].theme('status-background-warning'),
+  'status-background-warning-2': yellow[100].theme(
     'status-background-warning-2'
   ),
-  'status-background-service-1': service1['200'].theme(
+  'status-background-service-1': orange[200].theme(
     'status-background-service-1'
   ),
-  'status-background-service-2': service2['200'].theme(
+  'status-background-service-2': purple[200].theme(
     'status-background-service-2'
   ),
 };
@@ -195,23 +195,23 @@ export const statusBackgroundColors = {
 type StatusBackgroundColors = keyof typeof statusBackgroundColors;
 
 export const statusColors = {
-  'status-font-on-info': primary.p600.theme('status-font-on-info'),
-  'status-font-on-success': success.s800.theme('status-font-on-success'),
-  'status-font-on-warning': warning.w800.theme('status-font-on-warning'),
-  'status-font-on-warning-2': neutral.n800.theme('status-font-on-warning-2'),
-  'status-font-on-danger': danger.d800.theme('status-font-on-danger'),
-  'status-font-on-service-1': service1[800].theme('status-font-on-service-1'),
-  'status-font-on-service-2': service2[600].theme('status-font-on-service-2'),
+  'status-font-on-info': blue[600].theme('status-font-on-info'),
+  'status-font-on-success': green[800].theme('status-font-on-success'),
+  'status-font-on-warning': yellow[800].theme('status-font-on-warning'),
+  'status-font-on-warning-2': neutral[800].theme('status-font-on-warning-2'),
+  'status-font-on-danger': red[800].theme('status-font-on-danger'),
+  'status-font-on-service-1': orange[800].theme('status-font-on-service-1'),
+  'status-font-on-service-2': purple[600].theme('status-font-on-service-2'),
 };
 
 type StatusColors = keyof typeof statusColors;
 
 export const badgeBackgroundColors = {
-  'badge-background-level-0': neutral.n400.theme('badge-background-level-0'),
-  'badge-background-level-1': neutral.n600.theme('badge-background-level-1'),
-  'badge-background-level-2': primary.p500.theme('badge-background-level-2'),
-  'badge-background-level-3': service1[500].theme('badge-background-level-3'),
-  'badge-background-level-4': danger.d500.theme('badge-background-level-4'),
+  'badge-background-level-0': neutral[400].theme('badge-background-level-0'),
+  'badge-background-level-1': neutral[600].theme('badge-background-level-1'),
+  'badge-background-level-2': blue[500].theme('badge-background-level-2'),
+  'badge-background-level-3': orange[500].theme('badge-background-level-3'),
+  'badge-background-level-4': red[500].theme('badge-background-level-4'),
 };
 
 type BadgeBackgroundColors = keyof typeof badgeBackgroundColors;
@@ -232,8 +232,8 @@ export const shadowColors = {
     'shadow-elevation-2y',
     getPaletteColor('neutral', 800, 0.12)[1]
   ),
-  'shadow-highlight': primary.p200.theme('shadow-highlight'),
-  'shadow-danger': danger.d100.theme('shadow-danger'),
+  'shadow-highlight': blue[200].theme('shadow-highlight'),
+  'shadow-danger': red[100].theme('shadow-danger'),
 };
 
 type ShadowColors = keyof typeof shadowColors;
diff --git a/packages/fuselage/src/styleTokens.ts b/packages/fuselage/src/styleTokens.ts
index 151fc85473..a5908d5735 100644
--- a/packages/fuselage/src/styleTokens.ts
+++ b/packages/fuselage/src/styleTokens.ts
@@ -194,15 +194,15 @@ export const color = memoize((value) => {
   }
 
   if (value === 'surface-tint') {
-    return toCSSColorValue(value, neutral.n100);
+    return toCSSColorValue(value, neutral[100]);
   }
 
   if (value === 'secondary-info') {
-    return toCSSColorValue(value, neutral.n700);
+    return toCSSColorValue(value, neutral[700]);
   }
 
   if (value === 'surface-neutral') {
-    return toCSSColorValue(value, neutral.n400);
+    return toCSSColorValue(value, neutral[400]);
   }
 
   const paletteMatches = paletteColorRegex.exec(String(value));

From 905f1130d33d5083136ed5cbb3343d821e6d1154 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 16 Oct 2023 15:29:01 -0300
Subject: [PATCH 10/12] chore: update snapshots

---
 .../CheckBox/__snapshots__/CheckBox.spec.tsx.snap  | 14 +++++++-------
 .../__snapshots__/RadioButton.spec.tsx.snap        | 14 +++++++-------
 .../__snapshots__/ToggleSwitch.spec.tsx.snap       | 14 +++++++-------
 3 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/packages/fuselage/src/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap b/packages/fuselage/src/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
index 2742c8d2a7..d38d98c8b9 100644
--- a/packages/fuselage/src/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
+++ b/packages/fuselage/src/components/CheckBox/__snapshots__/CheckBox.spec.tsx.snap
@@ -121,12 +121,12 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
             class="rcx-box rcx-box--full"
           />
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             checked
           </th>
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             unchecked
           </th>
@@ -139,7 +139,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             default
           </th>
@@ -191,7 +191,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             hover
           </th>
@@ -243,7 +243,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             active
           </th>
@@ -295,7 +295,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             focus
           </th>
@@ -347,7 +347,7 @@ exports[`[CheckBox Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             disabled
           </th>
diff --git a/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap b/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
index a90fd0884a..50e92f64c6 100644
--- a/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
+++ b/packages/fuselage/src/components/RadioButton/__snapshots__/RadioButton.spec.tsx.snap
@@ -80,12 +80,12 @@ exports[`[RadioButton Rendering] renders States without crashing 1`] = `
             class="rcx-box rcx-box--full"
           />
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             checked
           </th>
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             unchecked
           </th>
@@ -98,7 +98,7 @@ exports[`[RadioButton Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             default
           </th>
@@ -150,7 +150,7 @@ exports[`[RadioButton Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             hover
           </th>
@@ -202,7 +202,7 @@ exports[`[RadioButton Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             active
           </th>
@@ -254,7 +254,7 @@ exports[`[RadioButton Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             focus
           </th>
@@ -306,7 +306,7 @@ exports[`[RadioButton Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             disabled
           </th>
diff --git a/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap b/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap
index 89e0b45bea..44613be366 100644
--- a/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap
+++ b/packages/fuselage/src/components/ToggleSwitch/__snapshots__/ToggleSwitch.spec.tsx.snap
@@ -80,12 +80,12 @@ exports[`[ToggleSwitch Rendering] renders States without crashing 1`] = `
             class="rcx-box rcx-box--full"
           />
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             checked
           </th>
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             unchecked
           </th>
@@ -98,7 +98,7 @@ exports[`[ToggleSwitch Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             default
           </th>
@@ -150,7 +150,7 @@ exports[`[ToggleSwitch Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             hover
           </th>
@@ -202,7 +202,7 @@ exports[`[ToggleSwitch Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             active
           </th>
@@ -254,7 +254,7 @@ exports[`[ToggleSwitch Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             focus
           </th>
@@ -306,7 +306,7 @@ exports[`[ToggleSwitch Rendering] renders States without crashing 1`] = `
           class="rcx-box rcx-box--full"
         >
           <th
-            class="rcx-box rcx-box--full rcx-css-3x4vxb"
+            class="rcx-box rcx-box--full rcx-css-11in3rj"
           >
             disabled
           </th>

From e9647e21caba04c44e81d8dab6a9ecc03bf3877e Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 16 Oct 2023 17:21:52 -0300
Subject: [PATCH 11/12] chore: remove comment

---
 packages/fuselage/src/Theme.ts | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/packages/fuselage/src/Theme.ts b/packages/fuselage/src/Theme.ts
index 71b61c0d8a..7f984accf7 100644
--- a/packages/fuselage/src/Theme.ts
+++ b/packages/fuselage/src/Theme.ts
@@ -55,18 +55,6 @@ const blue = {
   900: new Var('primary-900', tokenColors.b900),
 };
 
-// const info = {
-//   i100: new Var('info-100', tokenColors.i100),
-//   i200: new Var('info-200', tokenColors.i200),
-//   i300: new Var('info-300', tokenColors.i300),
-//   i400: new Var('info-400', tokenColors.i400),
-//   i500: new Var('info-500', tokenColors.i500),
-//   i600: new Var('info-600', tokenColors.i600),
-//   i700: new Var('info-700', tokenColors.i700),
-//   i800: new Var('info-800', tokenColors.i800),
-//   i900: new Var('info-900', tokenColors.i900),
-// };
-
 const green = {
   100: new Var('success-100', tokenColors.g100),
   200: new Var('success-200', tokenColors.g200),

From 3d1ad2b130bf2bb5d6d958e7808574adab14fdf1 Mon Sep 17 00:00:00 2001
From: juliajforesti <juliajforesti@gmail.com>
Date: Mon, 16 Oct 2023 17:23:24 -0300
Subject: [PATCH 12/12] chore: changeset

---
 .changeset/odd-clocks-love.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/odd-clocks-love.md

diff --git a/.changeset/odd-clocks-love.md b/.changeset/odd-clocks-love.md
new file mode 100644
index 0000000000..ec11554645
--- /dev/null
+++ b/.changeset/odd-clocks-love.md
@@ -0,0 +1,7 @@
+---
+"@rocket.chat/fuselage-tokens": minor
+"@rocket.chat/fuselage": minor
+"@rocket.chat/logo": patch
+---
+
+feat(fuselage, fuselage-tokens): Update primitive tokens