fix(dark mode): move colour + shadow utilities from Bootstrap to tokens

frontend/web/components/Breadcrumb.tsx

@@ -16,7 +16,7 @@ const Breadcrumb: FC<BreadcrumbType> = ({
     <div className='d-flex align-items-center my-2 py-1'>
       {items?.map((item) => (
         <>
-          <Link className='text-primary h6 mb-0' to={item.url}>
+          <Link className='text-action h6 mb-0' to={item.url}>
             {item.title}
           </Link>
           <div className='text-muted mx-2 h6 mb-0'>/</div>

frontend/web/components/BreadcrumbSeparator.tsx

@@ -125,7 +125,7 @@ const ItemList: FC<ItemListType> = ({
               </span>
             </div>
             {isActive && (
-              <IonIcon className='text-primary' icon={checkmarkCircle} />
+              <IonIcon className='icon-action' icon={checkmarkCircle} />
             )}
           </a>
         )

frontend/web/components/ClearFilters.tsx

@@ -10,7 +10,7 @@ const ClearFilters: FC<ClearFiltersType> = ({ onClick }) => {
   return (
     <div
       onClick={onClick}
-      className='fw-semibold cursor-pointer text-primary  d-flex align-items-center mx-3 gap-1'
+      className='fw-semibold cursor-pointer text-action  d-flex align-items-center mx-3 gap-1'
     >
       <IonIcon className='h6 mb-0' color='#6837fc' icon={closeCircle} />
       Clear all

frontend/web/components/EditIdentity.tsx

@@ -64,7 +64,7 @@ const EditIdentity: FC<EditIdentityType> = ({ data, environmentId }) => {
       <Button
         disabled={!data}
         theme='text'
-        className='text-primary'
+        className='text-action'
         onClick={handleFocus}
       >
         Edit

frontend/web/components/EditPermissions.tsx

@@ -825,7 +825,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
               <div className='mb-2'>
                 <Row className={role ? 'py-2' : ''}>
                   <Flex>
-                    <div className='font-weight-medium text-dark mb-1'>
+                    <div className='font-weight-medium text-default mb-1'>
                       Administrator
                     </div>
                   </Flex>
@@ -898,7 +898,7 @@ const _EditPermissionsModal: FC<EditPermissionModalType> = withAdminPermissions(
               )}
             />
 
-            <p className='text-right mt-5 text-dark'>
+            <p className='text-right mt-5 text-default'>
               This will edit the permissions for{' '}
               <strong>{getEditText()}</strong>.
             </p>

frontend/web/components/EnvironmentDocumentCodeHelp.tsx

@@ -57,7 +57,7 @@ const EnvironmentDocumentCodeHelp: FC<EnvironmentDocumentCodeHelpType> = ({
           <div className='mb-2'>
             Providing flag defaults is recommended for{' '}
             <a
-              className='text-primary'
+              className='text-action'
               target='_blank'
               href='https://docs.flagsmith.com/guides-and-examples/defensive-coding'
               rel='noreferrer'

frontend/web/components/FeatureHistory.tsx

@@ -114,7 +114,7 @@ const FeatureHistory: FC<FeatureHistoryPageType> = ({
                       >
                         <Button
                           theme='text'
-                          className='px-0 text-primary'
+                          className='px-0 text-action'
                           size='xSmall'
                         >
                           View Details
@@ -131,7 +131,7 @@ const FeatureHistory: FC<FeatureHistoryPageType> = ({
                                 setSelected(null)
                                 setDiff(diff === v.uuid ? null : v.uuid)
                               }}
-                              className='px-0 text-primary'
+                              className='px-0 text-action'
                               theme='text'
                               size='xSmall'
                             >
@@ -151,7 +151,7 @@ const FeatureHistory: FC<FeatureHistoryPageType> = ({
                                     setOpen(true)
                                   }
                                 }}
-                                className='px-0 text-primary'
+                                className='px-0 text-action'
                                 theme='text'
                                 size='xSmall'
                               >

frontend/web/components/GithubStar.tsx

@@ -40,7 +40,7 @@ const GithubStar: FC<GithubStarType> = ({}) => {
     <a
       target='_blank'
       href='https://github.com/flagsmith/flagsmith'
-      className='d-flex text-body'
+      className='d-flex text-default'
       rel='noreferrer'
     >
       <div

frontend/web/components/Highlight.js

@@ -182,7 +182,7 @@ class Highlight extends React.Component {
             >
               {this.state.expanded ? 'Hide' : 'Show More'}
               <span
-                className={`icon ml-2 ion text-primary ${
+                className={`icon ml-2 ion icon-action ${
                   this.state.expanded
                     ? 'ion-ios-arrow-up'
                     : 'ion-ios-arrow-down'

frontend/web/components/IntegrationList.tsx

@@ -306,7 +306,7 @@ const Integration: FC<IntegrationProps> = (props) => {
             <Link
               to={`/project/${props.lastSaved.projectId}/integrations`}
               data-test='view-project-integrations-link'
-              className='text-primary'
+              className='text-action'
             >
               Manage in project integrations
             </Link>

frontend/web/components/PermissionsTabs.tsx

@@ -177,7 +177,7 @@ const PermissionsTabs: FC<PermissionsTabsType> = ({
               />
             )}
           </div>
-          <p className='text-right mt-5 text-dark'>
+          <p className='text-right mt-5 text-default'>
             This will edit the permissions for{' '}
             <strong>the {group?.name} group</strong>.
           </p>

frontend/web/components/SegmentOverrides.js

@@ -133,7 +133,7 @@ const SegmentOverrideInner = class Override extends React.Component {
           >
             {this.props.id ? (
               <>
-                <Row className='font-weight-medium text-dark mb-1'>
+                <Row className='font-weight-medium text-default mb-1'>
                   {projectFlag.description ? (
                     <Tooltip
                       title={
@@ -173,7 +173,7 @@ const SegmentOverrideInner = class Override extends React.Component {
                   width={16}
                   height={16}
                 />
-                <span className='ms-2 fw-bold text-body mb-0'>
+                <span className='ms-2 fw-bold text-default mb-0'>
                   {name || v.segment_name}
                 </span>
                 {v.is_feature_specific && (

frontend/web/components/feature-health/components/EventTextBlocks.tsx

@@ -48,11 +48,11 @@ const EventTextBlocks: React.FC<EventTextBlocksProps> = ({ textBlocks }) => {
 
   return (
     <div className='d-flex flex-column m-0 gap-2 flex-1'>
-      <strong className='text-body'>Incident Insights</strong>
+      <strong className='text-default'>Incident Insights</strong>
       {textBlocks.map((textBlock, index) => (
         <div key={`${textBlock.text}-${index}`}>
           {textBlock.title && (
-            <div className='mb-2 text-body'>
+            <div className='mb-2 text-default'>
               <strong style={{ color }}>{textBlock.title ?? 'Event'}</strong>
               {!!textBlock.text && (
                 <IonIcon

frontend/web/components/feature-health/components/EventUrlsBlock.tsx

@@ -14,7 +14,7 @@ const EventURLBlocks: React.FC<EventURLBlocksProps> = ({ urlBlocks }) => {
   return (
     <div className='d-flex flex-column m-0 gap-2 align-items-start'>
       <div>
-        <strong className='text-body'>Provider Links</strong>
+        <strong className='text-default'>Provider Links</strong>
       </div>
       {urlBlocks.map((urlBlock, index) => (
         <Button

frontend/web/components/feature-override/IdentityOverrideDescription.tsx

@@ -7,7 +7,7 @@ const IdentityOverrideDescription: FC<
   IdentityOverrideDescriptionType
 > = ({}) => {
   return (
-    <div className='list-item-subtitle text-primary d-flex align-items-center'>
+    <div className='list-item-subtitle text-action d-flex align-items-center'>
       <UsersIcon fill='#6837fc' width={16} className='me-1' />
       This feature is being overridden for this identity
     </div>

frontend/web/components/feature-override/SegmentOverrideDescription.tsx

@@ -21,7 +21,7 @@ const SegmentOverrideDescription: FC<SegmentOverrideDescriptionType> = ({
   // If neither enabled nor value override is shown, show a generic message
   if (!showEnabledOverride && !showValueOverride) {
     return (
-      <span className='d-flex list-item-subtitle text-primary align-items-center'>
+      <span className='d-flex list-item-subtitle text-action align-items-center'>
         <SegmentsIcon className='me-1' width={16} fill='#6837fc' />
         {`This feature is being overridden by ${
           level === 'segment' ? 'this segment' : 'a segment'
@@ -36,7 +36,7 @@ const SegmentOverrideDescription: FC<SegmentOverrideDescriptionType> = ({
         <div className='list-item-subtitle'>
           <Row>
             <Flex>
-              <span className='list-item-subtitle d-flex text-primary align-items-center'>
+              <span className='list-item-subtitle d-flex text-action align-items-center'>
                 <SegmentsIcon className='me-1' width={16} fill='#6837fc' />
                 {`This feature is being overridden by ${
                   level === 'segment' ? 'this segment' : 'a segment'
@@ -51,7 +51,7 @@ const SegmentOverrideDescription: FC<SegmentOverrideDescriptionType> = ({
         </div>
       )}
       {showValueOverride && (
-        <span className='d-flex list-item-subtitle text-primary align-items-center'>
+        <span className='d-flex list-item-subtitle text-action align-items-center'>
           <SegmentsIcon className='me-1' width={16} fill='#6837fc' />
           {`This feature is being overridden by ${
             level === 'segment' ? 'this segment' : 'a segment'

frontend/web/components/inspect-permissions/Permissions.tsx

@@ -70,7 +70,7 @@ const Permissions = ({
         <div className='my-2'>
           <Row>
             <Flex>
-              <div className='font-weight-medium text-dark mb-1'>
+              <div className='font-weight-medium text-default mb-1'>
                 Administrator
               </div>
               {isDerivedAdmin && (

frontend/web/components/modals/CreateAuditLogWebhook.tsx

@@ -104,7 +104,7 @@ const CreateAuditLogWebhook: React.FC<Props> = ({
             <label>
               Secret (Optional) -{' '}
               <a
-                className='text-info'
+                className='text-action'
                 target='_blank'
                 href='https://docs.flagsmith.com/system-administration/webhooks#web-hook-signature'
                 rel='noreferrer'
@@ -131,7 +131,7 @@ const CreateAuditLogWebhook: React.FC<Props> = ({
           )}
           <div className={isEdit ? 'footer' : ''}>
             <div className='mb-3'>
-              <p className='text-dark fw-bold'>
+              <p className='text-default fw-bold'>
                 This will {isEdit ? 'update' : 'create'} a webhook for the
                 Organisation{' '}
                 <strong>{AccountStore.getOrganisation().name}</strong>

frontend/web/components/modals/CreateRole.tsx

@@ -509,7 +509,7 @@ const CreateRole: FC<CreateRoleType> = ({
                 ))}
               </div>
             </div>
-            <p className='text-right mt-5 text-dark'>
+            <p className='text-right mt-5 text-default'>
               This will edit the members for <strong>{role?.name}</strong>.
             </p>
           </div>

frontend/web/components/modals/CreateSegmentRulesTabForm.tsx

@@ -184,7 +184,7 @@ const CreateSegmentRulesTabForm: React.FC<CreateSegmentRulesTabFormProps> = ({
           />
           <span
             style={{ fontWeight: 'normal', marginLeft: '12px' }}
-            className='mb-0 fs-small text-dark'
+            className='mb-0 fs-small text-default'
           >
             Show condition descriptions
           </span>

frontend/web/components/modals/CreateSegmentUsersTabContent.tsx

@@ -66,7 +66,7 @@ const UserRow: FC<UserRowType> = ({
         <div className='font-weight-medium'>{identifier}</div>
         <Row
           className={`font-weight-medium fs-small lh-sm ${
-            inSegment ? 'text-primary' : 'faint'
+            inSegment ? 'text-action' : 'faint'
           }`}
         >
           {inSegment ? (

frontend/web/components/modals/CreateUser.tsx

@@ -28,7 +28,7 @@ const CreateUser: FC<CreateUserType> = ({ environmentId }) => {
   return (
     <div>
       <div className='modal-body px-4'>
-        <div className='fw-bold text-dark mt-4 mb-3'>
+        <div className='fw-bold text-default mt-4 mb-3'>
           Enter a comma or space separate list of user IDs.
         </div>
         <label>User IDs</label>

frontend/web/components/modals/CreateWebhook.tsx

@@ -102,7 +102,7 @@ const CreateWebhook: FC<CreateWebhookProps> = ({
             <label>
               Secret (Optional) -{' '}
               <a
-                className='text-info'
+                className='text-action'
                 target='_blank'
                 href='https://docs.flagsmith.com/system-administration/webhooks#audit-log-web-hooks'
                 rel='noreferrer'
@@ -128,7 +128,7 @@ const CreateWebhook: FC<CreateWebhookProps> = ({
           )}
           <div className={isEdit ? 'footer' : ''}>
             <div className='mb-3'>
-              <p className='text-dark fw-bold'>
+              <p className='text-default fw-bold'>
                 This will {isEdit ? 'update' : 'create'} a webhook for the
                 environment <strong>{environment?.name}</strong>
               </p>
@@ -163,7 +163,7 @@ const CreateWebhook: FC<CreateWebhookProps> = ({
         <FormGroup className='ml-1'>
           <div>
             <Row className='mb-3' space>
-              <div className='font-weight-medium text-dark'>
+              <div className='font-weight-medium text-default'>
                 Example Payload
               </div>
               <ViewDocs href='https://docs.flagsmith.com/system-administration/webhooks#environment-web-hooks' />

frontend/web/components/modals/payment/Payment.tsx

@@ -139,7 +139,7 @@ export const Payment: FC<PaymentProps> = ({
               <>
                 Optional{' '}
                 <a
-                  className='text-primary fw-bold'
+                  className='text-action fw-bold'
                   target='_blank'
                   href={ON_PREMISE_HOSTING_URL}
                   rel='noreferrer'
@@ -148,7 +148,7 @@ export const Payment: FC<PaymentProps> = ({
                 </a>{' '}
                 or{' '}
                 <a
-                  className='text-primary fw-bold'
+                  className='text-action fw-bold'
                   target='_blank'
                   href={ON_PREMISE_HOSTING_URL}
                   rel='noreferrer'

frontend/web/components/modals/payment/PricingPanel.tsx

@@ -51,7 +51,7 @@ export const PricingPanel = ({
               {headerContent && (
                 <span
                   className={classNames('featured', {
-                    'text-body': !isEnterprise,
+                    'text-default': !isEnterprise,
                     'text-white': isEnterprise,
                   })}
                 >
@@ -127,7 +127,7 @@ export const PricingPanel = ({
             })}
           >
             All from{' '}
-            <span className={isEnterprise ? 'pricing-accent' : 'text-primary'}>
+            <span className={isEnterprise ? 'pricing-accent' : 'text-action'}>
               {includesFrom},
             </span>{' '}
             plus

frontend/web/components/mv/VariationKeyLabel/VariationKeyLabel.tsx

@@ -155,7 +155,7 @@ export const VariationKeyLabel: FC<VariationKeyLabelProps> = ({
       {canEdit && (
         <Button
           theme='text'
-          className='text-primary ml-2'
+          className='text-action ml-2'
           onClick={startEditing}
           data-test={`featureVariationKeyEdit${index}`}
           aria-label='Edit label'

frontend/web/components/navigation/EnvironmentAside.tsx

@@ -72,7 +72,7 @@ const CustomOption = ({ hasWarning, ...rest }: CustomOptionProps) => {
           )}
           <div className='flex ml-auto'>
             {rest.isSelected && (
-              <IonIcon icon={checkmarkCircle} className='text-primary' />
+              <IonIcon icon={checkmarkCircle} className='icon-action' />
             )}
           </div>
         </div>

frontend/web/components/navigation/TabMenu/Tabs.tsx

@@ -183,7 +183,7 @@ const Tabs: React.FC<TabsProps> = ({
                 return {
                   className: classNames('', [
                     active
-                      ? 'text-primary fw-semibold bg-primary-opacity-5 fill-primary'
+                      ? 'text-action fw-semibold bg-primary-opacity-5 fill-primary'
                       : 'hover-color-primary',
                   ]),
                   label: (
@@ -193,7 +193,7 @@ const Tabs: React.FC<TabsProps> = ({
                         isSelected={false}
                         className={classNames(
                           'full-width btn-no-focus width-100',
-                          active && 'text-primary fw-semibold fill-primary',
+                          active && 'text-action fw-semibold fill-primary',
                         )}
                         noFocus={noFocus}
                         child={child}

frontend/web/components/onboarding/GettingStartedItem.tsx

@@ -76,7 +76,7 @@ const GettingStartedItem: FC<GettingStartedItemType> = (data) => {
                   ) : (
                     <Icon
                       name={data.icon || 'file-text'}
-                      className='text-body'
+                      className='text-default'
                     />
                   )}
                 </div>

frontend/web/components/onboarding/OnboardingStep.tsx

@@ -57,7 +57,7 @@ const Step: FC<StepProps> = ({
     >
       <div
         className={classNames(numberClassName, {
-          'bg-white bg-body text-primary fw-semibold': !isComplete && isActive,
+          'bg-white bg-body text-action fw-semibold': !isComplete && isActive,
           'bg-white bg-light200': !isComplete && !isActive,
         })}
         style={{
@@ -74,7 +74,7 @@ const Step: FC<StepProps> = ({
         )}
       </div>
       <div className='d-flex align-items-center gap-1'>
-        <h5 className={`mb-0 ${isComplete ? 'text-success' : 'text-primary'}`}>
+        <h5 className={`mb-0 ${isComplete ? 'text-success' : 'text-action'}`}>
           {isComplete ? completedTitle : title}
         </h5>
       </div>