import { type Theme, css } from 'antd-style';
import { readableColor } from 'polished';

export default (token: Theme) => {
  return css`
    :root,
    .dark {
      --primary-50: ${token.geekblue1};
      --primary-100: ${token.geekblue2};
      --primary-200: ${token.geekblue3};
      --primary-300: ${token.geekblue4};
      --primary-400: ${token.geekblue5};
      --primary-500: ${token.geekblue6};
      --primary-600: ${token.geekblue7};
      --primary-700: ${token.geekblue8};
      --primary-800: ${token.geekblue9};
      --primary-900: ${token.geekblue10};
      --primary-950: ${token.geekblue11};
      --secondary-50: ${token.geekblue1};
      --secondary-100: ${token.geekblue2};
      --secondary-200: ${token.geekblue3};
      --secondary-300: ${token.geekblue4};
      --secondary-400: ${token.geekblue5};
      --secondary-500: ${token.geekblue6};
      --secondary-600: ${token.geekblue7};
      --secondary-700: ${token.geekblue8};
      --secondary-800: ${token.geekblue9};
      --secondary-900: ${token.geekblue10};
      --secondary-950: ${token.geekblue11};
      --neutral-50: ${token.colorText};
      --neutral-100: ${token.colorText};
      --neutral-200: ${token.colorTextSecondary};
      --neutral-300: ${token.colorTextTertiary};
      --neutral-400: ${token.colorTextQuaternary};
      --neutral-500: ${token.colorFill};
      --neutral-600: ${token.colorFillSecondary};
      --neutral-700: ${token.colorFillTertiary};
      --neutral-800: ${token.colorFillQuaternary};
      --neutral-900: ${token.colorBgElevated};
      --neutral-950: ${token.colorBgContainer};
      --spacing-xxs: ${token.paddingXXS / 4}px;
      --spacing-xs: ${token.paddingXS / 4}px;
      --spacing-sm: ${token.paddingSM / 4}px;
      --spacing-md: ${token.paddingMD / 4}px;
      --spacing-lg: ${token.paddingLG / 4}px;
      --spacing-xl: ${token.paddingXL / 4}px;
      --spacing-xxl: ${token.paddingXL / 4}px;
      --radius-xxs: ${token.borderRadiusXS}px;
      --radius-xs: ${token.borderRadiusXS}px;
      --radius-sm: ${token.borderRadiusSM}px;
      --radius-md: ${token.borderRadius}px;
      --radius-lg: ${token.borderRadius}px;
      --radius-xl: ${token.borderRadiusLG}px;
      --radius-xxl: ${token.borderRadiusLG}px;
      --text-xxs: ${token.fontSizeSM}px;
      --text-xs: ${token.fontSizeSM}px;
      --text-sm: ${token.fontSize}px;
      --text-md: ${token.fontSize}px;
      --text-lg: ${token.fontSizeLG}px;
      --text-xl: ${token.fontSizeXL}px;
      --text-xxl: ${token.fontSizeXL}px;
      --font: ${token.fontFamily};
      --font-mono: ${token.fontFamilyCode};
      --body-background-fill: ${token.colorBgLayout};
      --body-text-color: ${token.colorText};
      --body-text-size: ${token.fontSize}px;
      --body-text-weight: 400;
      --embed-radius: ${token.borderRadius}px;
      --color-accent: ${token.colorPrimary};
      --color-accent-soft: ${token.colorPrimaryHover};
      --background-fill-primary: ${token.colorBgLayout};
      --background-fill-secondary: ${token.colorBgContainer};
      --border-color-accent: ${token.colorBorder};
      --border-color-primary: ${token.colorBorderSecondary};
      --link-text-color: ${token.colorInfoText};
      --link-text-color-active: ${token.colorInfoTextActive};
      --link-text-color-hover: ${token.colorInfoTextHover};
      --link-text-color-visited: ${token.colorInfoText};
      --body-text-color-subdued: ${token.colorTextDescription};
      --shadow-drop: ${token.boxShadowSecondary};
      --shadow-drop-lg: ${token.boxShadow};
      --shadow-inset: ${token.boxShadowSecondary} inset;
      --shadow-spread: 3px;
      --block-background-fill: ${token.colorBgContainer};
      --block-border-color: ${token.colorBorderSecondary};
      --block-border-width: 1px;
      --block-info-text-color: ${token.colorTextSecondary};
      --block-info-text-size: var(--text-sm);
      --block-info-text-weight: 400;
      --block-label-background-fill: ${token.colorFillSecondary};
      --block-label-border-color: ${token.colorBorderSecondary};
      --block-label-border-width: 1px;
      --block-label-shadow: ${token.boxShadowTertiary};
      --block-label-text-color: ${token.colorText}
      --block-label-margin: 0;
      --block-label-padding: var(--spacing-sm) var(--spacing-lg);
      --block-label-radius: ${token.borderRadius}px;
      --block-label-right-radius: ${token.borderRadius}px;
      --block-label-text-size: ${token.fontSizeSM}px;
      --block-label-text-weight: 400;
      --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
      --block-radius: ${token.borderRadius}px;
      --block-shadow: none;
      --block-title-background-fill: none;
      --block-title-border-color: none;
      --block-title-border-width: 0;
      --block-title-text-color: ${token.colorText};
      --block-title-padding: 0;
      --block-title-radius: none;
      --block-title-text-size: ${token.fontSize}px;
      --block-title-text-weight: 400;
      --container-radius: ${token.borderRadiusLG}px;
      --form-gap-width: 1px;
      --layout-gap: var(--spacing-xxl);
      --panel-background-fill: ${token.colorBgContainer};
      --panel-border-color: ${token.colorBorderSecondary};
      --panel-border-width: 0;
      --section-header-text-size: ${token.fontSize}px;
      --section-header-text-weight: 400;
      --chatbot-code-background-color: ${token.colorBgContainer};
      --checkbox-background-color: ${token.colorFillTertiary};
      --checkbox-background-color-focus: ${token.colorFillSecondary};
      --checkbox-background-color-hover: ${token.colorFillSecondary};
      --checkbox-background-color-selected: ${token.colorPrimary};
      --checkbox-border-color: ${token.colorBorderSecondary};
      --checkbox-border-color-focus: ${token.colorBorder};
      --checkbox-border-color-hover: ${token.colorBorder};
      --checkbox-border-color-selected: ${token.colorPrimary};
      --checkbox-border-radius: ${token.borderRadiusXS}px;
      --checkbox-border-width: 1px;
      --checkbox-label-background-fill:  ${token.colorFillTertiary};
      --checkbox-label-background-fill-hover: ${token.colorFillSecondary};
      --checkbox-label-background-fill-selected: ${token.colorFillSecondary};
      --checkbox-label-border-color: ${token.colorBorderSecondary};
      --checkbox-label-border-color-hover: ${token.colorBorder};
      --checkbox-label-border-width: 1px;
      --checkbox-label-gap: var(--spacing-lg);
      --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
      --checkbox-label-shadow: none;
      --checkbox-label-text-size: ${token.fontSize}px;
      --checkbox-label-text-weight: 400;
      --checkbox-shadow: none;
      --checkbox-label-text-color: ${token.colorTextDescription};
      --checkbox-label-text-color-selected: ${token.colorText};
      --error-background-fill: ${token.colorErrorBg};
      --error-border-color: ${token.colorErrorBorder};
      --error-border-width: 1px;
      --error-text-color: ${token.colorErrorText};
      --input-background-fill: ${token.colorFillTertiary};
      --input-background-fill-focus: ${token.colorFillSecondary};
      --input-background-fill-hover: ${token.colorFillSecondary};
      --input-border-color: ${token.colorBorderSecondary};
      --input-border-color-focus: ${token.colorBorder};
      --input-border-color-hover: ${token.colorBorder};
      --input-border-width: 1px;
      --input-padding: var(--spacing-xl);
      --input-placeholder-color: ${token.colorTextQuaternary};
      --input-radius: ${token.borderRadius}px;
      --input-shadow: none;
      --input-shadow-focus: none;
      --input-text-size: ${token.fontSize}px;
      --input-text-weight: 400;
      --loader-color: ${token.colorPrimary};
      --prose-text-size: ${token.fontSize}px;
      --prose-text-weight: 400;
      --prose-header-text-weight: 600;
      --slider-color: ${token.colorPrimary};
      --stat-background-fill: l${token.colorInfoBg};
      --table-border-color: ${token.colorBorderSecondary};
      --table-even-background-fill: transparent;
      --table-odd-background-fill: ${token.colorFillTertiary};
      --table-radius: var(--radius-lg);
      --table-row-focus: ${token.colorFillSecondary};
      --button-border-width: 1px;
      --button-cancel-background-fill: ${token.colorError};
      --button-cancel-background-fill-hover: ${token.colorErrorHover};
      --button-cancel-border-color: ${token.colorErrorBorder};
      --button-cancel-border-color-hover: ${token.colorErrorBorderHover};
      --button-cancel-text-color: ${readableColor(token.colorError)};
      --button-cancel-text-color-hover: ${readableColor(token.colorError)};
      --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
      --button-large-radius: ${token.borderRadius}px;
      --button-large-text-size: ${token.fontSizeLG}px;
      --button-large-text-weight: 600;
      --button-primary-background-fill: ${token.colorPrimary};
      --button-primary-background-fill-hover: ${token.colorPrimaryHover};
      --button-primary-border-color: ${token.colorPrimaryBorder};
      --button-primary-border-color-hover: ${token.colorPrimaryBorderHover};
      --button-primary-text-color: ${readableColor(token.colorPrimary)};
      --button-primary-text-color-hover: ${readableColor(token.colorPrimary)};
      --button-secondary-background-fill: ${token.colorFillSecondary};
      --button-secondary-background-fill-hover:  ${token.colorFill};;
      --button-secondary-border-color: ${token.colorBorderSecondary};
      --button-secondary-border-color-hover: ${token.colorBorder};
      --button-secondary-text-color: ${token.colorTextSecondary};
      --button-secondary-text-color-hover: ${token.colorText};
      --button-shadow: none;
      --button-shadow-active: none;
      --button-shadow-hover: none;
      --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
      --button-small-radius: ${token.borderRadiusSM}px;
      --button-small-text-size: ${token.fontSize}px;
      --button-small-text-weight: 400;
      --button-transition: none;
    }

    .dark {
      --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
      --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    }
  `;
};
