ui: comb through components, add additional classes for tailwind basic

styles, fix antd defaults
2025-05-07 12:50:50 +02:00 · 2025-05-07 12:50:50 +02:00 · de04e23c51
commit de04e23c51
parent c6b0649613
21 changed files with 89 additions and 112 deletions
--- a/frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx
+++ b/frontend/app/components/Client/Projects/ProjectCodeSnippet.tsx
@ -114,7 +114,7 @@ const ProjectCodeSnippet: React.FC<Props> = (props) => {
        <div
          className={cn(
            stl.info,
-            'rounded-lg bg-gray mb-4 ml-8 bg-amber-50 w-fit text-sm mt-2',
+            'rounded-lg bg-gray mb-4 ml-8 bg-amber w-fit text-sm mt-2',
            { hidden: !changed },
          )}
        >
--- a/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
+++ b/frontend/app/components/Client/Users/components/UserForm/UserForm.tsx
@ -87,7 +87,7 @@ function UserForm() {
          />
        </div>
        {!isSmtp && (
-          <div className={cn('mb-4 p-2 bg-yellow rounded')}>
+          <div className={cn('mb-4 p-2 bg-amber rounded')}>
            {t('SMTP is not configured (see')}&nbsp;
            <a
              className="link"
--- a/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
+++ b/frontend/app/components/Session_/EventsBlock/EventsBlock.tsx
@ -105,6 +105,7 @@ function EventsBlock(props: IProps) {
        : true
      ).filter((e: any) => !e.noteId && e.type !== 'TABCHANGE' && uiPlayerStore.showOnlySearchEvents ? e.isHighlighted : true);
    }
+    return list;
  }, [
    filteredLength,
    query,
--- a/frontend/app/components/Session_/OverviewPanel/components/TimelineScale/TimelineScale.tsx
+++ b/frontend/app/components/Session_/OverviewPanel/components/TimelineScale/TimelineScale.tsx
@ -22,7 +22,7 @@ function TimelineScale(props: Props) {
      el.style.opacity = '0.8';
      el.innerHTML = `${txt}`;
      el.style.fontSize = '12px';
-      el.style.color = 'white';
+      el.classList.add('text-white')

      container.appendChild(el);
    }
--- a/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/KeyboardHelp.tsx
@ -7,7 +7,7 @@ function Key({ label }: { label: string }) {
  return (
    <div
      style={{ minWidth: 52 }}
-      className="whitespace-nowrap font-normal bg-indigo-50 rounded-lg px-2 py-1 text-figmaColors-text-primary text-center font-mono"
+      className="whitespace-nowrap font-normal bg-active-blue rounded-lg px-2 py-1 text-black text-center font-mono"
    >
      {label}
    </div>
--- a/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
+++ b/frontend/app/components/Session_/Player/Controls/components/ReadNote.tsx
@ -66,7 +66,7 @@ function ReadNote(props: Props) {
      className="flex items-center justify-center"
    >
      <div
-        className="flex items-start !text-lg flex-col p-4 border gap-2 rounded-lg bg-amber-50"
+        className="flex items-start !text-lg flex-col p-4 border gap-2 rounded-lg bg-amber"
        style={{ width: 500 }}
      >
        <div className="flex items-center w-full">
--- a/frontend/app/components/Session_/Player/player.module.css
+++ b/frontend/app/components/Session_/Player/player.module.css
@ -13,7 +13,7 @@
 }

 .checkers {
-  background: repeating-linear-gradient(135deg, #f3f3f3, #f3f3f3 1px, #f6f6f6 1px, #FFF 4px);
+  background: repeating-linear-gradient(135deg, var(--color-gray-lighter), var(--color-gray-lighter) 1px, var(--color-gray-lightest) 1px, var(--color-white) 4px);
 }
 .solidBg {
  background: $gray-lightest;
--- a/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerControls.tsx
+++ b/frontend/app/components/Spots/SpotPlayer/components/SpotPlayerControls.tsx
@ -57,7 +57,7 @@ function SpotPlayerControls() {
    <div className="w-full p-4 flex items-center gap-4 bg-white">
      <PlayButton togglePlay={togglePlay} state={playState} iconSize={36} />

-      <div className="px-2 py-1 bg-white rounded font-semibold text-black flex items-center gap-2">
+      <div className="px-2 py-1 bg-white rounded font-semibold flex items-center gap-2">
        <PlayTime isCustom time={spotPlayerStore.time * 1000} format="mm:ss" />
        <span>/</span>
        <div>{spotPlayerStore.durationString}</div>
--- a/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
+++ b/frontend/app/components/shared/Filters/FilterOperator/FilterOperator.tsx
@ -1,68 +1,6 @@
 import React from 'react';
 import Select from 'Shared/Select';

-const dropdownStyles = {
-  control: (provided: any) => {
-    const obj = {
-      ...provided,
-      border: 'solid thin #ddd',
-      boxShadow: 'none !important',
-      cursor: 'pointer',
-      height: '26px',
-      minHeight: '26px',
-      backgroundColor: 'white',
-      borderRadius: '.5rem',
-      '&:hover': {
-        borderColor: 'rgb(115 115 115 / 0.9)',
-      },
-    };
-
-    return obj;
-  },
-  valueContainer: (provided: any) => ({
-    ...provided,
-    width: 'fit-content',
-    height: 26,
-    '& input': {
-      marginTop: '-3px',
-    },
-  }),
-  placeholder: (provided: any) => ({
-    ...provided,
-  }),
-  indicatorsContainer: (provided: any) => ({
-    display: 'none',
-  }),
-  // option: (provided: any, state: any) => ({
-  //   ...provided,
-  //   whiteSpace: 'nowrap',
-  // }),
-  menu: (provided: any, state: any) => ({
-    ...provided,
-    marginTop: '0.5rem',
-    left: 0,
-    minWidth: 'fit-content',
-    overflow: 'hidden',
-    zIndex: 100,
-    border: 'none',
-    boxShadow: '0px 4px 10px rgba(0,0,0, 0.15)',
-  }),
-  container: (provided: any) => ({
-    ...provided,
-    minWidth: 'max-content',
-  }),
-  singleValue: (provided: any, state: { isDisabled: any }) => {
-    const opacity = state.isDisabled ? 0.5 : 1;
-    const transition = 'opacity 300ms';
-
-    return {
-      ...provided,
-      opacity,
-      transition,
-      marginTop: '-3px',
-    };
-  },
-};
 interface Props {
  onChange: (e: any, { name, value }: any) => void;
  className?: string;
@ -84,7 +22,8 @@ function FilterOperator(props: Props) {
      <Select
        name="operator"
        options={options || []}
-        styles={dropdownStyles}
+        styles={{ height: 26 }}
+        popupMatchSelectWidth={false}
        placeholder="Select"
        isDisabled={isDisabled}
        value={value ? options?.find((i: any) => i.value === value) : null}
--- a/frontend/app/components/shared/Select/Select.tsx
+++ b/frontend/app/components/shared/Select/Select.tsx
@ -27,6 +27,7 @@ export default function CustomSelect<Value extends ValueObject>({
  defaultValue = '',
  className = '',
  mode,
+  styles,
  ...rest
 }: Props<Value>) {
  // Handle onChange to maintain compatibility with the original component
@ -43,6 +44,7 @@ export default function CustomSelect<Value extends ValueObject>({
      onChange={handleChange}
      placeholder={placeholder}
      mode={mode}
+      style={styles}
      {...rest}
    />
  );
--- a/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
+++ b/frontend/app/components/shared/SessionItem/MetaItem/MetaItem.tsx
@ -12,7 +12,7 @@ export default function MetaItem(props: Props) {
  return (
    <div
      className={cn(
-        'text-sm flex flex-row items-center px-2 py-0 gap-1 rounded-lg bg-white border border-neutral-100 overflow-hidden',
+        'text-sm flex flex-row items-center px-2 py-0 gap-1 rounded-lg bg-white border border-gray-light overflow-hidden',
        className,
      )}
    >
@ -22,7 +22,7 @@ export default function MetaItem(props: Props) {
        maxWidth={'300px'}
        popupProps={{ size: 'small', disabled: true }}
      />
-      <span className="bg-neutral-200 inline-block w-[1px] min-h-[17px]"></span>
+      <span className="bg-gray-light inline-block w-[1px] min-h-[17px]"></span>
      <TextEllipsis
        text={value}
        maxWidth={'350px'}
--- a/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/LatestSessionsMessage/LatestSessionsMessage.tsx
@ -16,8 +16,7 @@ function LatestSessionsMessage() {

  return count > 0 ? (
    <div
-      className="bg-amber-50 p-1 flex w-full border-b text-center justify-center link"
-      style={{ backgroundColor: 'rgb(255 251 235)' }}
+      className="bg-amber p-1 flex w-full border-b text-center justify-center link"
      onClick={onShowNewSessions}
    >
      {t('Show')} {numberWithCommas(count)} {t('New')}{' '}
--- a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
+++ b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteItem.tsx
@ -52,7 +52,7 @@ function NoteItem(props: Props) {
      ? `${props.note.message.slice(0, 150)}...`
      : props.note.message;
  return (
-    <div className="flex items-center px-2 border-b hover:bg-amber-50 justify-between py-2">
+    <div className="flex items-center px-2 border-b hover:bg-amber justify-between py-2">
      <Link
        style={{ width: '90%' }}
        to={
--- a/frontend/app/initialize.tsx
+++ b/frontend/app/initialize.tsx
@ -96,7 +96,10 @@ const ThemedApp: React.FC = () => {
        colorText: cssVar('gray-darkest'),
        colorTextHeading: cssVar('gray-darkest'),
        colorBorderSecondary: cssVar('gray-light'),
-        headerBg: cssVar('gray-lighter'),
+        headerBg: cssVar('gray-lightest'),
+        rowHoverBg: cssVar('gray-lightest'),
+        headerSortHoverBg: cssVar('gray-lighter'),
+        headerSortActiveBg: cssVar('gray-lighter')
      },
      Modal: {
        colorBgElevated: cssVar('white'),
@ -110,15 +113,27 @@ const ThemedApp: React.FC = () => {
        colorBgSpotlight: cssVar('white'),
        colorTextLightSolid: cssVar('gray-darkest'),
      },
+      Tabs: {
+        itemActiveColor: cssVar('main'),
+        inkBarColor: cssVar('main'),
+        itemSelectedColor: cssVar('main')
+      },
+      Tag: {
+        defaultBg: cssVar('gray-lightest'),
+        defaultColor: cssVar('gray-darkest')
+      }
    },
    token: {
      colorPrimary: cssVar('main'),
      colorPrimaryActive: cssVar('teal-dark'),
      colorPrimaryHover: cssVar('main'),
      colorPrimaryBorder: cssVar('main'),
-      colorBorder: cssVar('gray-lightest'),
+      colorBorder: cssVar('gray-light'),
      colorBgLayout: cssVar('gray-lightest'),
      colorBgContainer: cssVar('white'),
+      controlItemBgActive: cssVar('active-blue'),
+      controlItemBgActiveHover: cssVar('active-blue'),
+      controlItemBgHover: cssVar('active-blue'),
      colorLink: cssVar('teal'),
      colorLinkHover: cssVar('teal-dark'),
      colorText: cssVar('gray-darkest'),
@ -128,6 +143,7 @@ const ThemedApp: React.FC = () => {
      fontSize: 14,
      fontFamily: "'Roboto', 'ArialMT', 'Arial'",
      fontWeightStrong: 400,
+      colorSplit: cssVar('gray-light')
    },
  };

--- a/frontend/app/layout/SideMenu.tsx
+++ b/frontend/app/layout/SideMenu.tsx
@ -210,10 +210,10 @@ function SideMenu(props: Props) {
                            <Icon
                              name={item.icon}
                              size={16}
-                              color={isActive ? 'teal' : ''}
+                              color={isActive ? 'teal' : 'black'}
                            />
                          }
-                          className={cn('!rounded-lg hover-fill-teal')}
+                          className={cn('!rounded-lg hover-fill-teal', isActive ? 'color-main' : 'color-black')}
                        >
                          {item.label}
                        </Menu.Item>
@ -228,17 +228,17 @@ function SideMenu(props: Props) {
                            <Icon
                              name={item.icon}
                              size={16}
-                              color={isActive ? 'teal' : ''}
+                              color={isActive ? 'teal' : 'black'}
                            />
                          }
                          style={{ paddingLeft: '20px' }}
-                          className={cn('!rounded-lg !pe-0')}
+                          className={cn('!rounded-lg !pe-0', isActive ? 'color-main' : 'color-black')}
                          itemIcon={
                            item.leading ? (
                              <Icon
                                name={item.leading}
                                size={16}
-                                color={isActive ? 'teal' : ''}
+                                color={isActive ? 'teal' : 'black'}
                              />
                            ) : null
                          }
@ -293,18 +293,18 @@ function SideMenu(props: Props) {
                          <Icon
                            name={item.icon}
                            size={16}
-                            color={isActive ? 'teal' : ''}
+                            color={isActive ? 'teal' : 'black'}
                            className="hover-fill-teal"
                          />
                        }
                        style={{ paddingLeft: '20px' }}
-                        className={cn('!rounded-lg hover-fill-teal')}
+                        className={cn('!rounded-lg hover-fill-teal', isActive ? 'color-main' : 'color-black')}
                        itemIcon={
                          item.leading ? (
                            <Icon
                              name={item.leading}
                              size={16}
-                              color={isActive ? 'teal' : ''}
+                              color={isActive ? 'teal' : 'black'}
                            />
                          ) : null
                        }
--- a/frontend/app/mstore/dashboardStore.ts
+++ b/frontend/app/mstore/dashboardStore.ts
@ -57,7 +57,7 @@ export default class DashboardStore {
  metricsSearch: string = '';

  // Loading states
-  isLoading: boolean = true;
+  isLoading: boolean = false;

  isSaving: boolean = false;

--- a/frontend/app/styles/colors-autogen.css
+++ b/frontend/app/styles/colors-autogen.css
@ -38,6 +38,7 @@
 .fill-pink { fill: var(--color-pink) }
 .fill-light-blue-bg { fill: var(--color-light-blue-bg) }
 .fill-white { fill: var(--color-white) }
+.fill-black { fill: var(--color-black) }
 .fill-gray-border { fill: var(--color-gray-border) }
 .fill-borderColor-default { fill: var(--color-borderColor-default) }
 .fill-borderColor-gray-light-shade { fill: var(--color-borderColor-gray-light-shade) }
@ -45,6 +46,7 @@
 .fill-borderColor-transparent { fill: var(--color-borderColor-transparent) }
 .fill-transparent { fill: var(--color-transparent) }
 .fill-cyan { fill: var(--color-cyan) }
+.fill-amber { fill: var(--color-amber) }
 .fill-figmaColors-accent-secondary { fill: var(--color-figmaColors-accent-secondary) }
 .fill-figmaColors-main { fill: var(--color-figmaColors-main) }
 .fill-figmaColors-primary-outlined-hover-background { fill: var(--color-figmaColors-primary-outlined-hover-background) }
@ -91,6 +93,7 @@
 .hover-fill-pink:hover svg { fill: var(--color-pink) }
 .hover-fill-light-blue-bg:hover svg { fill: var(--color-light-blue-bg) }
 .hover-fill-white:hover svg { fill: var(--color-white) }
+.hover-fill-black:hover svg { fill: var(--color-black) }
 .hover-fill-gray-border:hover svg { fill: var(--color-gray-border) }
 .hover-fill-borderColor-default:hover svg { fill: var(--color-borderColor-default) }
 .hover-fill-borderColor-gray-light-shade:hover svg { fill: var(--color-borderColor-gray-light-shade) }
@ -98,6 +101,7 @@
 .hover-fill-borderColor-transparent:hover svg { fill: var(--color-borderColor-transparent) }
 .hover-fill-transparent:hover svg { fill: var(--color-transparent) }
 .hover-fill-cyan:hover svg { fill: var(--color-cyan) }
+.hover-fill-amber:hover svg { fill: var(--color-amber) }
 .hover-fill-figmaColors-accent-secondary:hover svg { fill: var(--color-figmaColors-accent-secondary) }
 .hover-fill-figmaColors-main:hover svg { fill: var(--color-figmaColors-main) }
 .hover-fill-figmaColors-primary-outlined-hover-background:hover svg { fill: var(--color-figmaColors-primary-outlined-hover-background) }
@ -146,6 +150,7 @@
 .color-pink { color: var(--color-pink) }
 .color-light-blue-bg { color: var(--color-light-blue-bg) }
 .color-white { color: var(--color-white) }
+.color-black { color: var(--color-black) }
 .color-gray-border { color: var(--color-gray-border) }
 .color-borderColor-default { color: var(--color-borderColor-default) }
 .color-borderColor-gray-light-shade { color: var(--color-borderColor-gray-light-shade) }
@ -153,6 +158,7 @@
 .color-borderColor-transparent { color: var(--color-borderColor-transparent) }
 .color-transparent { color: var(--color-transparent) }
 .color-cyan { color: var(--color-cyan) }
+.color-amber { color: var(--color-amber) }
 .color-figmaColors-accent-secondary { color: var(--color-figmaColors-accent-secondary) }
 .color-figmaColors-main { color: var(--color-figmaColors-main) }
 .color-figmaColors-primary-outlined-hover-background { color: var(--color-figmaColors-primary-outlined-hover-background) }
@ -201,6 +207,7 @@
 .hover-pink:hover { color: var(--color-pink) }
 .hover-light-blue-bg:hover { color: var(--color-light-blue-bg) }
 .hover-white:hover { color: var(--color-white) }
+.hover-black:hover { color: var(--color-black) }
 .hover-gray-border:hover { color: var(--color-gray-border) }
 .hover-borderColor-default:hover { color: var(--color-borderColor-default) }
 .hover-borderColor-gray-light-shade:hover { color: var(--color-borderColor-gray-light-shade) }
@ -208,6 +215,7 @@
 .hover-borderColor-transparent:hover { color: var(--color-borderColor-transparent) }
 .hover-transparent:hover { color: var(--color-transparent) }
 .hover-cyan:hover { color: var(--color-cyan) }
+.hover-amber:hover { color: var(--color-amber) }
 .hover-figmaColors-accent-secondary:hover { color: var(--color-figmaColors-accent-secondary) }
 .hover-figmaColors-main:hover { color: var(--color-figmaColors-main) }
 .hover-figmaColors-primary-outlined-hover-background:hover { color: var(--color-figmaColors-primary-outlined-hover-background) }
@ -256,6 +264,7 @@
 .border-pink { border-color: var(--color-pink) }
 .border-light-blue-bg { border-color: var(--color-light-blue-bg) }
 .border-white { border-color: var(--color-white) }
+.border-black { border-color: var(--color-black) }
 .border-gray-border { border-color: var(--color-gray-border) }
 .border-borderColor-default { border-color: var(--color-borderColor-default) }
 .border-borderColor-gray-light-shade { border-color: var(--color-borderColor-gray-light-shade) }
@ -263,6 +272,7 @@
 .border-borderColor-transparent { border-color: var(--color-borderColor-transparent) }
 .border-transparent { border-color: var(--color-transparent) }
 .border-cyan { border-color: var(--color-cyan) }
+.border-amber { border-color: var(--color-amber) }
 .border-figmaColors-accent-secondary { border-color: var(--color-figmaColors-accent-secondary) }
 .border-figmaColors-main { border-color: var(--color-figmaColors-main) }
 .border-figmaColors-primary-outlined-hover-background { border-color: var(--color-figmaColors-primary-outlined-hover-background) }
@ -311,6 +321,7 @@
 .bg-pink { background-color: var(--color-pink) }
 .bg-light-blue-bg { background-color: var(--color-light-blue-bg) }
 .bg-white { background-color: var(--color-white) }
+.bg-black { background-color: var(--color-black) }
 .bg-gray-border { background-color: var(--color-gray-border) }
 .bg-borderColor-default { background-color: var(--color-borderColor-default) }
 .bg-borderColor-gray-light-shade { background-color: var(--color-borderColor-gray-light-shade) }
@ -318,6 +329,7 @@
 .bg-borderColor-transparent { background-color: var(--color-borderColor-transparent) }
 .bg-transparent { background-color: var(--color-transparent) }
 .bg-cyan { background-color: var(--color-cyan) }
+.bg-amber { background-color: var(--color-amber) }
 .bg-figmaColors-accent-secondary { background-color: var(--color-figmaColors-accent-secondary) }
 .bg-figmaColors-main { background-color: var(--color-figmaColors-main) }
 .bg-figmaColors-primary-outlined-hover-background { background-color: var(--color-figmaColors-primary-outlined-hover-background) }
--- a/frontend/app/styles/general.css
+++ b/frontend/app/styles/general.css
@ -173,7 +173,7 @@
 }

 .border-gray-light {
-  border: solid thin rgb(229 231 235  / var(--tw-text-opacity, 1))
+  border: solid thin var(--color-gray-light)
 }

 .btn-disabled {
--- a/frontend/app/styles/main.css
+++ b/frontend/app/styles/main.css
@ -283,3 +283,7 @@ svg {
    border-radius: 4px;
    cursor: grab;
 }
+
+.text-black {
+    color: $black;
+}
--- a/frontend/app/svg/icons/orspotOutline.svg
+++ b/frontend/app/svg/icons/orspotOutline.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-dot"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="12" r="1"/></svg>
--- a/frontend/app/theme/colors.js
+++ b/frontend/app/theme/colors.js
@ -1,5 +1,5 @@
 module.exports = {
-  main: '#394EFF',
+  main: 'oklch(54.6% 0.245 262.881)',
  'gray-light-shade': '#EEEEEE',
  'gray-lightest': '#f6f6f6',
  'gray-lighter': '#f1f1f1',
@ -35,6 +35,7 @@ module.exports = {
  pink: '#ffb9b9',
  'light-blue-bg': '#E5F7F7',
  white: '#fff',
+  black: 'black',
  'gray-border': '#999', // Added for border-gray shadow
  borderColor: {
    default: '#DDDDDD',
@ -44,7 +45,8 @@ module.exports = {
  },
  transparent: 'transparent',
  cyan: '#EBF4F5',
-  // actual theme colors - use this for new components
+  amber: 'oklch(98.7% 0.022 95.277)',
+
  figmaColors: {
    'accent-secondary': 'rgba(62, 170, 175, 1)',
    main: 'rgba(57, 78, 255, 1)',
@ -60,36 +62,38 @@ module.exports = {

  dark: {
    // used as background in multiple places
-    white: '#0d0d0d',
-    teal: '#394EFF',
-    main: '#394EFF',
-    'text-primary': 'rgba(255, 255, 255, 0.87)',
+    white: 'oklch(20.5% 0 0)',
+    black: '#fff',
+    teal: 'oklch(70.7% 0.165 254.624)',
+    main: 'oklch(70.7% 0.165 254.624)',
+    'text-primary': 'oklch(97% 0 0)',
    'text-disabled': 'rgba(255, 255, 255, 0.38)',
    'outlined-border': 'rgba(255, 255, 255, 0.23)',
    divider: 'rgba(255, 255, 255, 0.12)',
-    'background': '#f1f1f1',
+    'background': 'oklch(20.5% 0 0)',
    'surface': '#1E1E1E',
+    amber: 'oklch(41.4% 0.112 45.904)',

-    'gray-light-shade': '#333333',
-    'gray-lightest': '#2A2A2A',
-    'gray-lighter': '#262626',
-    'gray-light': '#444',
-    'gray-bg': '#555',
-    'gray-medium': '#999',
-    'gray-dark': '#AAA',
-    'gray-darkest': '#EEE',
-    'gray-light-blue': '#1A1A2A',
+    'gray-light-shade': 'oklch(37.1% 0 0)',
+    'gray-lightest': 'oklch(26.9% 0 0)',
+    'gray-lighter': 'oklch(29.9% 0 0)',
+    'gray-light': 'oklch(37.1% 0 0)',
+    'gray-bg': 'oklch(37.1% 0 0)',
+    'gray-medium': 'oklch(70.7% 0.022 261.325)',
+    'gray-dark': 'oklch(87% 0 0)',
+    'gray-darkest': 'oklch(97% 0 0)',
+    'gray-light-blue': 'oklch(55.4% 0.046 257.417)',
    'gray-border': '#888',

-    'active-blue': '#1A1B32',
-    'active-dark-blue': '#1D1F3A',
-    'bg-blue': '#161A4D',
-    'active-blue-border': '#2F337D',
+    'active-blue': 'oklch(43.2% 0.232 292.759)',
+    'active-dark-blue': 'oklch(43.2% 0.232 292.759)',
+    'bg-blue': 'oklch(35.9% 0.144 278.697)',
+    'active-blue-border': 'oklch(45.7% 0.24 277.023)',
+    'tealx': 'oklch(77.7% 0.152 181.912)',
+    'tealx-light': 'oklch(38.6% 0.063 188.416)',
+    'tealx-light-border': 'oklch(43.7% 0.078 188.216)',

-    'tealx-light': '#1A2A2A',
-    'tealx-light-border': '#2A3F3F',
-
-    'light-blue-bg': '#15292C',
+    'light-blue-bg': 'oklch(39.8% 0.07 227.392)',
    'disabled-text': 'rgba(255, 255, 255, 0.38)',

    figmaColors: {