diff --git a/frontend/web/components/Breadcrumb.tsx b/frontend/web/components/Breadcrumb.tsx index 7626630dbc22..e9ea1ed8d5dc 100644 --- a/frontend/web/components/Breadcrumb.tsx +++ b/frontend/web/components/Breadcrumb.tsx @@ -16,7 +16,7 @@ const Breadcrumb: FC = ({
{items?.map((item) => ( <> - + {item.title}
/
diff --git a/frontend/web/components/BreadcrumbSeparator.tsx b/frontend/web/components/BreadcrumbSeparator.tsx index 1bee94c62a4e..c88139fa8c34 100644 --- a/frontend/web/components/BreadcrumbSeparator.tsx +++ b/frontend/web/components/BreadcrumbSeparator.tsx @@ -125,7 +125,7 @@ const ItemList: FC = ({
{isActive && ( - + )} ) diff --git a/frontend/web/components/ClearFilters.tsx b/frontend/web/components/ClearFilters.tsx index 1ef0b48c4c7d..97d288e300ad 100644 --- a/frontend/web/components/ClearFilters.tsx +++ b/frontend/web/components/ClearFilters.tsx @@ -10,7 +10,7 @@ const ClearFilters: FC = ({ onClick }) => { return (
Clear all diff --git a/frontend/web/components/EditIdentity.tsx b/frontend/web/components/EditIdentity.tsx index f9e3272bdaa0..6190fbe831b1 100644 --- a/frontend/web/components/EditIdentity.tsx +++ b/frontend/web/components/EditIdentity.tsx @@ -64,7 +64,7 @@ const EditIdentity: FC = ({ data, environmentId }) => {
diff --git a/frontend/web/components/navigation/TabMenu/Tabs.tsx b/frontend/web/components/navigation/TabMenu/Tabs.tsx index 71ea4bf01e37..5f0b25484688 100644 --- a/frontend/web/components/navigation/TabMenu/Tabs.tsx +++ b/frontend/web/components/navigation/TabMenu/Tabs.tsx @@ -183,7 +183,7 @@ const Tabs: React.FC = ({ 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 = ({ 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} diff --git a/frontend/web/components/onboarding/GettingStartedItem.tsx b/frontend/web/components/onboarding/GettingStartedItem.tsx index 84fb3bc34ada..75dde496d172 100644 --- a/frontend/web/components/onboarding/GettingStartedItem.tsx +++ b/frontend/web/components/onboarding/GettingStartedItem.tsx @@ -76,7 +76,7 @@ const GettingStartedItem: FC = (data) => { ) : ( )} diff --git a/frontend/web/components/onboarding/OnboardingStep.tsx b/frontend/web/components/onboarding/OnboardingStep.tsx index a4c24c86eaa1..c4aef18b4fb3 100644 --- a/frontend/web/components/onboarding/OnboardingStep.tsx +++ b/frontend/web/components/onboarding/OnboardingStep.tsx @@ -57,7 +57,7 @@ const Step: FC = ({ >
= ({ )}
-
+
{isComplete ? completedTitle : title}
diff --git a/frontend/web/components/pages/AccountSettingsPage.tsx b/frontend/web/components/pages/AccountSettingsPage.tsx index b3ada04700e0..c81b2d9756f8 100644 --- a/frontend/web/components/pages/AccountSettingsPage.tsx +++ b/frontend/web/components/pages/AccountSettingsPage.tsx @@ -107,7 +107,7 @@ const AccountSettingsPage: FC = () => { body: (
Invalidating your token will generate a new token to use with our API,{' '} - + your current token will no longer work . Performing this action will also log you out, are you sure you wish diff --git a/frontend/web/components/pages/CreateOrganisationPage.tsx b/frontend/web/components/pages/CreateOrganisationPage.tsx index a2d860a05556..8cc44e0bdb56 100644 --- a/frontend/web/components/pages/CreateOrganisationPage.tsx +++ b/frontend/web/components/pages/CreateOrganisationPage.tsx @@ -133,7 +133,7 @@ const CreateOrganisationPage: React.FC = () => {
What is your company's desired hosting option?{' '} { diff --git a/frontend/web/components/pages/sdk-keys/components/ServerSideKeyRow.tsx b/frontend/web/components/pages/sdk-keys/components/ServerSideKeyRow.tsx index 4739326732a1..f834e9be21c2 100644 --- a/frontend/web/components/pages/sdk-keys/components/ServerSideKeyRow.tsx +++ b/frontend/web/components/pages/sdk-keys/components/ServerSideKeyRow.tsx @@ -34,7 +34,7 @@ const ServerSideKeyRow: FC = ({ onClick={() => { Utils.copyToClipboard(keyValue) }} - className='ml-2 btn-with-icon text-body' + className='ml-2 btn-with-icon icon-default' > @@ -42,7 +42,7 @@ const ServerSideKeyRow: FC = ({ diff --git a/frontend/web/components/segments/AssociatedSegmentOverrides.tsx b/frontend/web/components/segments/AssociatedSegmentOverrides.tsx index 0ee6a9fec6ba..ba4858628883 100644 --- a/frontend/web/components/segments/AssociatedSegmentOverrides.tsx +++ b/frontend/web/components/segments/AssociatedSegmentOverrides.tsx @@ -101,7 +101,7 @@ const AssociatedSegmentOverrides: FC = ({ } > This feature is specifically associated with the segment{' '} - {segment?.name}. + {segment?.name}.
@@ -143,8 +143,8 @@ const AssociatedSegmentOverrides: FC = ({ } > This will highlight any feature overridden by the segment{' '} - {segment?.name} in the - chosen environment. + {segment?.name} in the chosen + environment.
{projectFlagsLoading ? ( diff --git a/frontend/web/components/tables/TableFilterItem.tsx b/frontend/web/components/tables/TableFilterItem.tsx index b36c1e8bcce4..8dfd4bb3fdcf 100644 --- a/frontend/web/components/tables/TableFilterItem.tsx +++ b/frontend/web/components/tables/TableFilterItem.tsx @@ -34,7 +34,7 @@ const TableFilterItem: FC = ({
diff --git a/frontend/web/components/tables/TableSortFilter.tsx b/frontend/web/components/tables/TableSortFilter.tsx index 07d90c91cff4..b3c0774c5273 100644 --- a/frontend/web/components/tables/TableSortFilter.tsx +++ b/frontend/web/components/tables/TableSortFilter.tsx @@ -59,7 +59,7 @@ const TableSortFilter: FC = ({
{sortOption.label}
= ({ {!!filter && !exactTag ? (
Create
= ({
) : null} {noTags && ( -
+
You have no tags yet
)} diff --git a/frontend/web/project/project-components.js b/frontend/web/project/project-components.js index ce89778fbfee..acfa59465ec5 100644 --- a/frontend/web/project/project-components.js +++ b/frontend/web/project/project-components.js @@ -110,7 +110,7 @@ const Option = (props) => { >
{labelContent}
{props.isSelected && ( - + )}
diff --git a/frontend/web/project/toast.tsx b/frontend/web/project/toast.tsx index 3fa2a9a9520b..5a07e9f319e1 100644 --- a/frontend/web/project/toast.tsx +++ b/frontend/web/project/toast.tsx @@ -85,10 +85,10 @@ const Message: FC = ({ return (
-
+
-
+
{theme === 'success' ? 'Success' : 'Error'}
{children}
diff --git a/frontend/web/styles/3rdParty/_bootstrap.scss b/frontend/web/styles/3rdParty/_bootstrap.scss index be1dfef20f65..b768c0d816af 100644 --- a/frontend/web/styles/3rdParty/_bootstrap.scss +++ b/frontend/web/styles/3rdParty/_bootstrap.scss @@ -18,17 +18,56 @@ @import "../project/spacing-utils"; // Colour is owned by the design-system token utilities (_token-utilities.scss). -// Drop `secondary` from Bootstrap's text-colour utility so `.text-secondary` -// resolves to `--color-text-secondary` (the token) instead of `$secondary` -// (the brand yellow). Without this, Bootstrap's `!important` copy wins the -// cascade and the token utility is dead. +// Drop the overlapping keys from Bootstrap's text-colour utility so `.text-*` +// resolve to the tokens, not Bootstrap's `$theme-colors`. Otherwise Bootstrap's +// `!important` copy wins the cascade and the token utility is dead. +// - secondary/success/danger/warning/info: token utilities take over. Values are +// identical to Bootstrap (secondary excepted, that is the intended yellow->grey +// fix), so this is a no-op for the others. +// - light/black/white-50/black-50: unused, no token equivalent, dropped. +// Not touched here (see DARK_MODE_TEXT_COLOUR_PLAN_6606.md): primary, dark, body, +// muted, white, reset. $_color-util: map-get($utilities, "color"); $_color-util: map-merge( $_color-util, - (values: map-remove(map-get($_color-util, "values"), "secondary")) + ( + values: + map-remove( + map-get($_color-util, "values"), + "secondary", + "success", + "danger", + "warning", + "info", + "light", + "black", + "white-50", + "black-50" + ) + ) ); $utilities: map-merge($utilities, ("color": $_color-util)); +// Border colour: token border utilities take over. Values are identical to +// Bootstrap's, so a no-op; it just moves ownership to the token layer. +$_border-util: map-get($utilities, "border-color"); +$_border-util: map-merge( + $_border-util, + (values: map-remove(map-get($_border-util, "values"), "danger", "info", "success", "warning")) +); +$utilities: map-merge($utilities, ("border-color": $_border-util)); + +// Shadow scale is owned by the token utilities (--shadow-*). Drop sm/lg/none so +// `.shadow-sm` / `.shadow-lg` / `.shadow-none` use the DS tokens, consistent with +// the token-only `.shadow-md` / `.shadow-xl`. Bootstrap's suffixless `.shadow` +// (the `null` key) is left in place. +$_shadow-util: map-get($utilities, "shadow"); +$_shadow-util: map-merge( + $_shadow-util, + (values: map-remove(map-get($_shadow-util, "values"), "sm", "lg", "none")) +); +$utilities: map-merge($utilities, ("shadow": $_shadow-util)); + @import "~bootstrap/scss/utilities/api"; // 5. Include any optional Bootstrap CSS as needed diff --git a/frontend/web/styles/_variables.scss b/frontend/web/styles/_variables.scss index aa17beed42d1..2bde5714f42b 100644 --- a/frontend/web/styles/_variables.scss +++ b/frontend/web/styles/_variables.scss @@ -31,7 +31,7 @@ $body-color: #1a2634; $text-icon-light: #ffffff; $text-icon-grey: #656d7b; $text-icon-light-grey: rgba(157, 164, 174, 1); -$text-muted: $text-icon-grey; +$text-muted: var(--color-text-secondary); // Header $header-color: #1e0d26; // for headers and labels diff --git a/frontend/web/styles/project/_alert.scss b/frontend/web/styles/project/_alert.scss index 79623a637ae4..c4621ec24e6c 100644 --- a/frontend/web/styles/project/_alert.scss +++ b/frontend/web/styles/project/_alert.scss @@ -88,6 +88,3 @@ background-color: $danger-solid-dark-alert } } -.text-info { - color: $primary !important; -}