Add colors to tokens for CA, FA and Auto Guard

components/PartyDetails/index.scss

@@ -167,7 +167,8 @@
       .Details {
         display: flex;
         flex-direction: row;
-        gap: $unit-half;
+        flex-wrap: wrap;
+        gap: $unit;
         margin-bottom: $unit-2x;
       }
 

components/PartyDetails/index.tsx

@@ -667,15 +667,20 @@ const PartyDetails = (props: Props) => {
   const readOnly = (
     <section className={readOnlyClasses}>
       <section className="Details">
-        {
-          <Token>
-            {`${t('party.details.labels.charge_attack')} ${
-              chargeAttack ? 'On' : 'Off'
-            }`}
-          </Token>
-        }
-        {fullAuto ? <Token>{t('party.details.labels.full_auto')}</Token> : ''}
-        {autoGuard ? <Token>{t('party.details.labels.auto_guard')}</Token> : ''}
+        <Token className={classNames({ ChargeAttack: true, On: chargeAttack })}>
+          {`${t('party.details.labels.charge_attack')} ${
+            chargeAttack ? 'On' : 'Off'
+          }`}
+        </Token>
+
+        <Token className={classNames({ FullAuto: true, On: fullAuto })}>
+          {`${t('party.details.labels.full_auto')} ${fullAuto ? 'On' : 'Off'}`}
+        </Token>
+
+        <Token className={classNames({ AutoGuard: true, On: autoGuard })}>
+          {`${t('party.details.labels.auto_guard')} ${fullAuto ? 'On' : 'Off'}`}
+        </Token>
+
         {turnCount ? (
           <Token>
             {t('party.details.turns.with_count', {

components/Token/index.scss

@@ -6,5 +6,20 @@
   font-weight: $medium;
   min-width: 3rem;
   text-align: center;
-  padding: $unit-half $unit;
+  padding: $unit ($unit * 1.5);
+
+  &.ChargeAttack.On {
+    background: var(--charge-attack-bg);
+    color: var(--charge-attack-text);
+  }
+
+  &.FullAuto.On {
+    background: var(--full-auto-bg);
+    color: var(--full-auto-text);
+  }
+
+  &.AutoGuard.On {
+    background: var(--auto-guard-bg);
+    color: var(--auto-guard-text);
+  }
 }

styles/themes.scss

@@ -9,6 +9,13 @@
 
   --link-text-hover: #{$text--link--hover--light};
 
+  --charge-attack-bg: #{$charge--attack--bg};
+  --charge-attack-text: #{$charge--attack--text};
+  --full-auto-bg: #{$full--auto--bg};
+  --full-auto-text: #{$charge--attack--text};
+  --auto-guard-bg: #{$auto--guard--bg};
+  --auto-guard-text: #{$auto--guard--text};
+
   --full-auto-label-text: #{$text--full--auto--light};
 
   --separator-bg: #{$separator--bg--light};
@@ -141,6 +148,12 @@
 
   --link-text-hover: #{$text--link--hover--dark};
 
+  --charge-attack-bg: #{$charge--attack--bg};
+  --charge-attack-text: #{$charge--attack--text};
+
+  --full-auto-bg: #{$full--auto--bg};
+  --full-auto-text: #{$charge--attack--text};
+
   --full-auto-label-text: #{$text--full--auto--dark};
 
   --separator-bg: #{$separator--bg--dark};

styles/variables.scss

@@ -65,9 +65,11 @@ $purple-90: #ecebff;
 $orange-00: #201710;
 $orange-10: #6b401b;
 $orange-30: #825b39;
+$orange-35: #885243;
 $orange-40: #925a2a;
 $orange-50: #a8703f;
 $orange-70: #d08f57;
+$orange-75: #ffb461;
 $orange-80: #facea7;
 $orange-90: #ffebd9;
 
@@ -254,6 +256,15 @@ $subaura--orange--primary--dark: $orange-00;
 $subaura--orange--secondary--dark: $orange-10;
 $subaura--orange--text--dark: $orange-70;
 
+// Color Definitions: Tokens
+$charge--attack--bg: $orange-75;
+$charge--attack--text: $orange-35;
+
+$full--auto--bg: $yellow-text-20;
+
+$auto--guard--bg: $purple-30;
+$auto--guard--text: $purple-10;
+
 // Color Definitions: Element Toggle
 $toggle--bg--light: $grey-90;
 $toggle--bg--dark: $grey-15;