@redocly/theme 0.74.2-pingfed.3 → 0.81.2-rc.2

package/src/icons/CheckboxIcon/CheckboxIcon.tsx

@@ -19,11 +19,14 @@ const Icon = ({
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="16" height="16" rx="4" fill="currentColor" />
+        <path
+          d="M0 4C0 1.79086 1.79086 0 4 0H12C14.2091 0 16 1.79086 16 4V12C16 14.2091 14.2091 16 12 16H4C1.79086 16 0 14.2091 0 12V4Z"
+          fill="var(--checkbox-box-color-active)"
+        />
         <path
           d="M3.91308 7.03516H3.91326C3.99256 7.03525 4.07081 7.05331 4.14213 7.08798C4.21341 7.12262 4.27591 7.17295 4.32497 7.2352L3.91308 7.03516ZM3.91308 7.03516H3.09394C2.89031 7.03516 2.7766 7.26975 2.90232 7.4292L2.90237 7.42927L6.11214 11.4957L6.11218 11.4957C6.32247 11.7619 6.72568 11.7611 6.93667 11.4962L6.93708 11.4957L12.6597 4.24398C12.6598 4.24378 12.66 4.24358 12.6602 4.24338C12.7884 4.08295 12.6699 3.85 12.4689 3.85H11.6498C11.4894 3.85 11.3367 3.9235 11.2376 4.05044C11.2375 4.05055 11.2374 4.05066 11.2373 4.05077L6.52403 10.0216M3.91308 7.03516L6.52403 10.0216M6.52403 10.0216L4.32506 7.23531L6.52403 10.0216Z"
-          fill="currentColor"
-          stroke="var(--checkbox-mark-color)"
+          fill="var(--checkbox-content-color-inverse)"
+          stroke="var(--checkbox-content-color-inverse)"
         />
       </svg>
     ) : (
@@ -31,10 +34,9 @@ const Icon = ({
         width="16"
         height="16"
         viewBox="0 0 16 16"
-        fill="currentColor"
+        fill="var(--checkbox-box-color)"
         xmlns="http://www.w3.org/2000/svg"
       >
-        <rect width="16" height="16" rx="4" fill="currentColor" />
         <rect
           x="0.5"
           y="0.5"
@@ -51,14 +53,9 @@ const Icon = ({
 export const CheckboxIcon = styled(Icon).attrs<{ checked?: boolean }>({
   'data-component-name': 'icons/CheckboxIcon/CheckboxIcon',
 })`
-  margin-right: var(--spacing-xs);
   display: flex;
 
-  --checkbox-active-border-color: var(--color-primary-hover);
-  --checkbox-active-background-color: var(--color-primary-hover);
-
-  --checkbox-border-color: var(--text-placeholder);
-  --checkbox-background-color: var(--bg-base);
-
-  --checkbox-mark-color: var(--bg-base);
+  &:hover {
+    --checkbox-border-color: var(--checkbox-border-color-active);
+  }
 `;

package/src/icons/CheckboxIcon/variables.dark.ts

@@ -0,0 +1,7 @@
+import { css } from 'styled-components';
+
+export const checkboxDarkMode = css`
+  --checkbox-box-color-disabled: var(--color-warm-grey-3);
+  --checkbox-border-color-disabled: var(--border-color-primary);
+  --checkbox-content-color-inverse: var(--color-warm-grey-1);
+`;

package/src/icons/CheckboxIcon/variables.ts

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+
+export const checkbox = css`
+  --checkbox-content-color: var(--text-color-secondary);
+  --checkbox-content-color-hover: var(--text-color-primary);
+  --checkbox-content-color-focused: var(--text-color-primary);
+  --checkbox-content-color-disabled: var(--text-color-disabled);
+
+  --checkbox-box-color: transparent;
+  --checkbox-box-color-active: var(--color-warm-grey-10);
+  --checkbox-box-color-focused: var(--color-warm-grey-9);
+  --checkbox-box-color-disabled: var(--color-warm-grey-1);
+
+  --checkbox-border-color: var(--border-color-primary);
+  --checkbox-border-color-active: var(--color-warm-grey-8);
+  --checkbox-border-color-disabled: var(--border-color-secondary);
+
+  --checkbox-content-color-inverse: var(--color-white);
+`;

package/src/icons/CheckmarkFilledIcon/CheckmarkFilledIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 1C6.61553 1 5.26216 1.41054 4.11101 2.17971C2.95987 2.94888 2.06266 4.04213 1.53285 5.32122C1.00303 6.6003 0.86441 8.00776 1.13451 9.36563C1.4046 10.7235 2.07129 11.9708 3.05026 12.9497C4.02922 13.9287 5.2765 14.5954 6.63437 14.8655C7.99224 15.1356 9.3997 14.997 10.6788 14.4672C11.9579 13.9373 13.0511 13.0401 13.8203 11.889C14.5895 10.7378 15 9.38447 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1ZM7 10.7954L4.5 8.2954L5.2953 7.5L7 9.2046L10.705 5.5L11.5029 6.29295L7 10.7954Z" />
+  </svg>
+);
+
+export const CheckmarkFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CheckmarkFilledIcon/CheckmarkFilledIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CheckmarkIcon/CheckmarkIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M6.5 12L2 7.49997L2.707 6.79297L6.5 10.5855L13.293 3.79297L14 4.49997L6.5 12Z" />
+  </svg>
+);
+
+export const CheckmarkIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CheckmarkIcon/CheckmarkIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ChevronDownIcon/ChevronDownIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 10.9998L3 5.9998L3.7 5.2998L8 9.5998L12.3 5.2998L13 5.9998L8 10.9998Z" />
+  </svg>
+);
+
+export const ChevronDownIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ChevronDownIcon/ChevronDownIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  flex-shrink: 0;
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ChevronLeftIcon/ChevronLeftIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M5 8L10 3L10.7 3.7L6.4 8L10.7 12.3L10 13L5 8Z" />
+  </svg>
+);
+
+export const ChevronLeftIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ChevronLeftIcon/ChevronLeftIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ChevronRightIcon/ChevronRightIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M11 8L6.00002 13L5.30002 12.3L9.60002 8L5.30002 3.7L6.00002 3L11 8Z" />
+  </svg>
+);
+
+export const ChevronRightIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ChevronRightIcon/ChevronRightIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ChevronSortIcon/ChevronSortIcon.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+type IconProps = {
+  size?: string;
+  color?: string;
+  className?: string;
+  onClick?: () => void;
+};
+
+const Icon = ({ className, onClick }: IconProps) => (
+  <svg
+    className={className}
+    onClick={onClick}
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="inherit"
+  >
+    <path d="M7 12.25L3.9375 9.1875L4.55437 8.57063L7 11.0119L9.44563 8.57063L10.0625 9.1875L7 12.25Z" />
+    <path d="M7 1.75L10.0625 4.8125L9.44563 5.42937L7 2.98812L4.55437 5.42937L3.9375 4.8125L7 1.75Z" />
+  </svg>
+);
+
+export const ChevronSortIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ChevronSortIcon/ChevronSortIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size};
+  width: ${({ size }) => size};
+`;

package/src/icons/ChevronUpIcon/ChevronUpIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 5L13 10L12.3 10.7L8 6.4L3.7 10.7L3 10L8 5Z" />
+  </svg>
+);
+
+export const ChevronUpIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ChevronUpIcon/ChevronUpIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  flex-shrink: 0;
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CircleDashIcon/CircleDashIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M3.84997 2.35009C3.27647 2.79018 2.77103 3.31247 2.34997 3.90009L3.14997 4.50009C3.5172 3.99081 3.9549 3.53627 4.44997 3.15009L3.84997 2.35009Z" />
+    <path d="M2.29997 6.15009L1.34997 5.85009C1.10845 6.54077 0.98999 7.26847 0.999972 8.00009H1.99997C1.99794 7.37116 2.09929 6.74616 2.29997 6.15009Z" />
+    <path d="M1.34997 10.2001C1.58185 10.8973 1.91909 11.5549 2.34997 12.1501L3.14997 11.5501C2.78851 11.044 2.50221 10.4882 2.29997 9.90009L1.34997 10.2001Z" />
+    <path d="M3.89997 13.6501C4.49514 14.081 5.15275 14.4182 5.84997 14.6501L6.14997 13.7001C5.56184 13.4979 5.00608 13.2116 4.49997 12.8501L3.89997 13.6501Z" />
+    <path d="M5.84997 1.35009L6.14997 2.30009C6.74604 2.09942 7.37103 1.99806 7.99997 2.00009V1.00009C7.26835 0.990112 6.54065 1.10858 5.84997 1.35009Z" />
+    <path d="M12.1 13.6501C12.6889 13.2111 13.211 12.689 13.65 12.1001L12.85 11.5001C12.4781 12.022 12.0219 12.4783 11.5 12.8501L12.1 13.6501Z" />
+    <path d="M13.7 9.85009L14.65 10.1501C14.8675 9.45352 14.9853 8.72968 15 8.00009H14C14.002 8.62903 13.9007 9.25403 13.7 9.85009Z" />
+    <path d="M14.6 5.80009C14.3681 5.10288 14.0309 4.44526 13.6 3.85009L12.8 4.45009C13.1614 4.9562 13.4477 5.51196 13.65 6.10009L14.6 5.80009Z" />
+    <path d="M12.05 2.30009C11.4548 1.86921 10.7972 1.53197 10.1 1.30009L9.79997 2.25009C10.3881 2.45233 10.9439 2.73863 11.45 3.10009L12.05 2.30009Z" />
+    <path d="M10.15 14.6501L9.84997 13.7001C9.25391 13.9008 8.62891 14.0021 7.99997 14.0001V15.0001C8.72667 14.9568 9.44706 14.8395 10.15 14.6501Z" />
+  </svg>
+);
+
+export const CircleDashIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CircleDashIcon/CircleDashIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CleanIcon/CleanIcon.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="5 5 16 16" fill="inherit" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M13.7499 13.75H16.3749V12.875H13.7499V13.75Z" />
+    <path d="M15.4999 17.25H18.1249V16.375H15.4999V17.25Z" />
+    <path d="M14.6249 15.5H17.2499V14.625H14.6249V15.5Z" />
+    <path d="M12.4386 13.75C12.4355 13.3808 12.337 13.0187 12.1527 12.6989C11.9684 12.379 11.7045 12.1122 11.3867 11.9244L14.6249 6.3125L13.8676 5.875L10.5532 11.6176C10.1463 11.5267 9.72319 11.5392 9.32244 11.6541C8.9217 11.769 8.55615 11.9825 8.25925 12.2751C6.62142 13.855 6.74825 17.5484 6.75425 17.705C6.75877 17.818 6.80685 17.9248 6.88841 18.0031C6.96998 18.0814 7.07868 18.1251 7.19175 18.125H13.7504C13.8422 18.125 13.9317 18.0961 14.0062 18.0424C14.0807 17.9887 14.1364 17.913 14.1654 17.8258C14.1945 17.7387 14.1954 17.6447 14.168 17.5571C14.1406 17.4694 14.0864 17.3926 14.0129 17.3375C12.4643 16.1755 12.4386 13.7735 12.4386 13.75ZM10.2192 12.4362C10.5694 12.4401 10.9046 12.5788 11.1551 12.8235C11.4056 13.0682 11.5521 13.4 11.5642 13.75C11.5642 13.7667 11.565 13.841 11.5715 13.9551L8.99053 12.8073C9.16053 12.6671 9.3567 12.5621 9.56764 12.4984C9.77857 12.4347 10.0001 12.4136 10.2192 12.4362ZM11.759 17.25C11.4094 16.8939 11.1866 16.4327 11.1249 15.9375H10.2499C10.2812 16.4031 10.4268 16.8539 10.6735 17.25H9.70085C9.52091 16.6822 9.41143 16.0945 9.37487 15.5H8.49987C8.52811 16.0927 8.62579 16.6801 8.7909 17.25H7.62487C7.63843 16.4466 7.75175 14.6722 8.41355 13.5082L11.7092 14.9738C11.8678 15.796 12.2055 16.5732 12.6985 17.25H11.759Z" />
+  </svg>
+);
+
+export const CleanIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CookieIcon/CookieIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CloseFilledIcon/CloseFilledIcon.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 1C4.1 1 1 4.1 1 8C1 11.9 4.1 15 8 15C11.9 15 15 11.9 15 8C15 4.1 11.9 1 8 1ZM10.7 11.5L8 8.8L5.3 11.5L4.5 10.7L7.2 8L4.5 5.3L5.3 4.5L8 7.2L10.7 4.5L11.5 5.3L8.8 8L11.5 10.7L10.7 11.5Z" />
+  </svg>
+);
+
+export const CloseFilledIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CloseFilledIcon/CloseFilledIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CloseIcon/CloseIcon.tsx

@@ -1,13 +1,24 @@
 import React from 'react';
 import styled from 'styled-components';
 
-export const Icon = () => (
-  <svg width="24" height="24" viewBox="0 0 24 24" fill="inherit" xmlns="http://www.w3.org/2000/svg">
-    <rect width="24" height="24" fill="none" />
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 24 24" fill="inherit" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <rect fill="none" />
     <path d="M18 7.05L16.95 6L12 10.95L7.05 6L6 7.05L10.95 12L6 16.95L7.05 18L12 13.05L16.95 18L18 16.95L13.05 12L18 7.05Z" />
   </svg>
 );
 
 export const CloseIcon = styled(Icon).attrs(() => ({
   'data-component-name': 'icons/CloseIcon/CloseIcon',
-}))``;
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+  cursor: pointer;
+`;

package/src/icons/CloudUploadIcon/CloudUploadIcon.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M5.50001 8.99979L6.20501 9.70479L7.50001 8.41479V14.4998H8.50001V8.41479L9.79501 9.70479L10.5 8.99979L8.00001 6.49979L5.50001 8.99979Z" />
+    <path d="M11.75 10.9998H11.5V9.99979H11.75C12.3467 10.0237 12.9285 9.80949 13.3674 9.40442C13.8062 8.99934 14.0661 8.43652 14.09 7.83979C14.1139 7.24305 13.8997 6.66127 13.4946 6.22243C13.0896 5.7836 12.5267 5.52365 11.93 5.49979H11.5L11.45 5.08979C11.3391 4.24801 10.9259 3.47526 10.2876 2.91548C9.64916 2.3557 8.82906 2.04706 7.98001 2.04706C7.13095 2.04706 6.31085 2.3557 5.67246 2.91548C5.03407 3.47526 4.62093 4.24801 4.51001 5.08979L4.50001 5.49979H4.07001C3.47327 5.52365 2.91045 5.7836 2.50538 6.22243C2.1003 6.66127 1.88614 7.24305 1.91001 7.83979C1.93387 8.43652 2.19382 8.99934 2.63265 9.40442C3.07149 9.80949 3.65327 10.0237 4.25001 9.99979H4.50001V10.9998H4.25001C3.44821 10.9947 2.67659 10.6934 2.0835 10.1538C1.49041 9.61425 1.11771 8.87447 1.03707 8.07672C0.956428 7.27898 1.17353 6.47957 1.64663 5.83221C2.11974 5.18485 2.81545 4.73523 3.60001 4.56979C3.81586 3.56305 4.37042 2.66077 5.17116 2.01352C5.9719 1.36627 6.97038 1.01318 8.00001 1.01318C9.02963 1.01318 10.0281 1.36627 10.8288 2.01352C11.6296 2.66077 12.1842 3.56305 12.4 4.56979C13.1846 4.73523 13.8803 5.18485 14.3534 5.83221C14.8265 6.47957 15.0436 7.27898 14.9629 8.07672C14.8823 8.87447 14.5096 9.61425 13.9165 10.1538C13.3234 10.6934 12.5518 10.9947 11.75 10.9998Z" />
+  </svg>
+);
+
+export const CloudUploadIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CloudUploadIcon/CloudUploadIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CodeIcon/CodeIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M15.5 8.00002L12 11.5L11.295 10.795L14.085 8.00002L11.295 5.20502L12 4.50002L15.5 8.00002Z" />
+    <path d="M0.5 8.00002L4 4.50002L4.705 5.20502L1.915 8.00002L4.705 10.795L4 11.5L0.5 8.00002Z" />
+    <path d="M8.81944 3.00049L6.20925 12.7418L7.17518 13.0007L9.78537 3.25931L8.81944 3.00049Z" />
+  </svg>
+);
+
+export const CodeIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CodeIcon/CodeIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/ContrastIcon/ContrastIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M14.685 5.92C14.5508 5.48498 14.3732 5.06454 14.155 4.665C13.8323 4.07201 13.4265 3.52818 12.95 3.05C11.971 2.07111 10.7237 1.40449 9.36586 1.13445C8.00801 0.864415 6.60058 1.00308 5.32154 1.53291C4.0425 2.06275 2.94929 2.95996 2.18015 4.11109C1.41101 5.26221 1.00049 6.61556 1.00049 8C1.00049 9.38444 1.41101 10.7378 2.18015 11.8889C2.94929 13.04 4.0425 13.9373 5.32154 14.4671C6.60058 14.9969 8.00801 15.1356 9.36586 14.8656C10.7237 14.5955 11.971 13.9289 12.95 12.95C13.4265 12.4718 13.8323 11.928 14.155 11.335C14.3732 10.9355 14.5508 10.515 14.685 10.08C15.1065 8.72538 15.1065 7.27463 14.685 5.92ZM1.99998 8C1.99998 6.4087 2.63212 4.88258 3.75734 3.75736C4.88256 2.63214 6.40868 2 7.99998 2V14C6.40868 14 4.88256 13.3679 3.75734 12.2426C2.63212 11.1174 1.99998 9.5913 1.99998 8Z" />
+  </svg>
+);
+
+export const ContrastIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/ContrastIcon/ContrastIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CookieIcon/CookieIcon.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M5 11.5C5.55228 11.5 6 11.0523 6 10.5C6 9.94771 5.55228 9.5 5 9.5C4.44772 9.5 4 9.94771 4 10.5C4 11.0523 4.44772 11.5 5 11.5Z" />
+    <path d="M11.5 11C12.0523 11 12.5 10.5523 12.5 10C12.5 9.44771 12.0523 9 11.5 9C10.9477 9 10.5 9.44771 10.5 10C10.5 10.5523 10.9477 11 11.5 11Z" />
+    <path d="M6.5 6C7.05228 6 7.5 5.55228 7.5 5C7.5 4.44772 7.05228 4 6.5 4C5.94772 4 5.5 4.44772 5.5 5C5.5 5.55228 5.94772 6 6.5 6Z" />
+    <path d="M7 8C7.27614 8 7.5 7.77614 7.5 7.5C7.5 7.22386 7.27614 7 7 7C6.72386 7 6.5 7.22386 6.5 7.5C6.5 7.77614 6.72386 8 7 8Z" />
+    <path d="M11.5 3.5C12.0523 3.5 12.5 3.05228 12.5 2.5C12.5 1.94772 12.0523 1.5 11.5 1.5C10.9477 1.5 10.5 1.94772 10.5 2.5C10.5 3.05228 10.9477 3.5 11.5 3.5Z" />
+    <path d="M14.5 2C14.7761 2 15 1.77614 15 1.5C15 1.22386 14.7761 1 14.5 1C14.2239 1 14 1.22386 14 1.5C14 1.77614 14.2239 2 14.5 2Z" />
+    <path d="M8 12C8.27614 12 8.5 11.7761 8.5 11.5C8.5 11.2239 8.27614 11 8 11C7.72386 11 7.5 11.2239 7.5 11.5C7.5 11.7761 7.72386 12 8 12Z" />
+    <path d="M8 15C4.15 15 1 11.85 1 8C1 4.15 4.15 1 8 1C8.05 1 8.1 1 8.15 1L8.85 1.05L8.7 1.65C8.65 1.85 8.6 2.1 8.6 2.3C8.6 3.7 9.7 4.8 11.1 4.8C11.6 4.8 12.1 4.65 12.55 4.35L13.2 5.1C13 5.3 12.9 5.55 12.9 5.8C12.9 6.45 13.55 7 14.25 6.75L14.85 6.5L14.95 7.15C15 7.45 15 7.75 15 8C15 11.85 11.85 15 8 15ZM7.65 2C4.5 2.2 2 4.8 2 8C2 11.3 4.7 14 8 14C11.3 14 14 11.3 14 8C14 7.95 14 7.85 14 7.8C12.85 7.85 11.9 6.95 11.9 5.8C11.9 5.75 11.9 5.75 11.9 5.7C11.65 5.75 11.4 5.8 11.1 5.8C9.15 5.8 7.6 4.25 7.6 2.3C7.6 2.2 7.6 2.1 7.65 2Z" />
+  </svg>
+);
+
+export const CookieIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CookieIcon/CookieIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/CopyIcon/CopyIcon.tsx

@@ -1,32 +1,27 @@
 import React from 'react';
 import styled from 'styled-components';
 
-interface IconProps {
-  className?: string;
-}
+import type { IconProps } from '@redocly/theme/icons/types';
 
-const Icon = ({ className }: IconProps) => (
-  <svg
-    data-component-name="icons/CopyIcon"
-    xmlns="http://www.w3.org/2000/svg"
-    width="16"
-    height="16"
-    viewBox="0 0 16 16"
-    fill="none"
-    className={className}
-  >
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
     <path
       fillRule="evenodd"
       clipRule="evenodd"
       d="M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z"
-      fill="currentColor"
-      fillOpacity="1"
     />
   </svg>
 );
 
-export const CopyIcon = styled(Icon)`
-  width: 1.1em;
-  height: 1.1em;
-  vertical-align: middle;
+export const CopyIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CopyIcon/CopyIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
 `;

package/src/icons/CopyLinkIcon/CopyLinkIcon.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M5.9737 9.50005C5.48436 9.50016 5.00598 9.35513 4.59907 9.08332C4.19217 8.81151 3.87501 8.42512 3.68773 7.97304C3.50045 7.52096 3.45145 7.02348 3.54693 6.54355C3.64242 6.06361 3.87809 5.62278 4.22415 5.2768L6.7768 2.72465C7.24077 2.26065 7.87006 1.99996 8.52624 1.99994C9.18241 1.99992 9.81172 2.26056 10.2757 2.72453C10.7397 3.1885 11.0004 3.81779 11.0004 4.47397C11.0005 5.13014 10.7398 5.75945 10.2759 6.22345L9.9997 6.49975L9.2918 5.7933L9.57065 5.51435C9.84599 5.23762 10.0004 4.86301 10 4.47263C9.99967 4.08224 9.84456 3.70793 9.5687 3.4317C9.28782 3.16364 8.91447 3.01408 8.5262 3.01408C8.13793 3.01408 7.76458 3.16364 7.4837 3.4317L4.93135 5.9837C4.79443 6.12056 4.68582 6.28305 4.61172 6.46189C4.53762 6.64073 4.49948 6.83242 4.49948 7.026C4.49948 7.21959 4.53762 7.41128 4.61172 7.59012C4.68582 7.76896 4.79443 7.93145 4.93135 8.0683C5.21223 8.33636 5.58558 8.48592 5.97385 8.48592C6.36212 8.48592 6.73547 8.33636 7.01635 8.0683L7.7235 8.77555C7.49421 9.00599 7.2215 9.18867 6.92115 9.31303C6.6208 9.43739 6.29878 9.50096 5.9737 9.50005Z" />
+    <path d="M9.9737 8.50005C9.48436 8.50016 9.00598 8.35513 8.59907 8.08332C8.19217 7.81151 7.87501 7.42512 7.68773 6.97304C7.50045 6.52096 7.45145 6.02348 7.54693 5.54355C7.64242 5.06361 7.87809 4.62278 8.22415 4.2768L8.50045 4.0005L9.2076 4.7078L8.9313 4.98395C8.79442 5.12081 8.68583 5.28329 8.61175 5.46212C8.53767 5.64095 8.49954 5.83261 8.49954 6.02618C8.49954 6.21974 8.53767 6.41141 8.61175 6.59024C8.68583 6.76906 8.79442 6.93154 8.9313 7.0684C9.21218 7.33646 9.58553 7.48602 9.9738 7.48602C10.3621 7.48602 10.7354 7.33646 11.0163 7.0684C11.1463 6.9384 13.3809 4.70375 13.5689 4.51615C13.8449 4.23954 14 3.86474 14 3.47398C14 3.08322 13.8449 2.70842 13.5689 2.4318C13.2881 2.16374 12.9147 2.01418 12.5265 2.01418C12.1382 2.01418 11.7648 2.16374 11.4839 2.4318L10.7768 1.72455C11.2409 1.26126 11.87 1.00118 12.5258 1.00147C13.1816 1.00175 13.8104 1.26239 14.2742 1.72609C14.7379 2.18979 14.9985 2.81863 14.9989 3.47442C14.9992 4.13021 14.7391 4.7593 14.2759 5.22345C14.0876 5.41145 11.8539 7.64485 11.724 7.7752C11.4946 8.00572 11.2218 8.18847 10.9214 8.31289C10.621 8.43731 10.2989 8.50092 9.9737 8.50005Z" />
+    <path d="M12 15.0001H2C1.73487 14.9998 1.48068 14.8943 1.2932 14.7069C1.10572 14.5194 1.00028 14.2652 1 14.0001V4.00005C1.00028 3.73492 1.10572 3.48073 1.2932 3.29325C1.48068 3.10578 1.73487 3.00033 2 3.00005H4V4.00005H2V14.0001H12V9.00005H13V14.0001C12.9997 14.2652 12.8943 14.5194 12.7068 14.7069C12.5193 14.8943 12.2651 14.9998 12 15.0001Z" />
+  </svg>
+);
+
+export const CopyLinkIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/CopyLinkIcon/CopyLinkIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DataFormatIcon/DataFormatIcon.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M13 5.5H9V6.5H13V5.5Z" />
+    <path d="M7 9.5H3V10.5H7V9.5Z" />
+    <path d="M5 8C4.60444 8 4.21776 7.8827 3.88886 7.66294C3.55996 7.44318 3.30362 7.13082 3.15224 6.76537C3.00087 6.39991 2.96126 5.99778 3.03843 5.60982C3.1156 5.22186 3.30608 4.86549 3.58579 4.58579C3.86549 4.30608 4.22186 4.1156 4.60982 4.03843C4.99778 3.96126 5.39991 4.00087 5.76537 4.15224C6.13082 4.30362 6.44318 4.55996 6.66294 4.88886C6.8827 5.21776 7 5.60444 7 6C6.9994 6.53025 6.7885 7.03861 6.41356 7.41356C6.03861 7.7885 5.53025 7.9994 5 8ZM5 5C4.80222 5 4.60888 5.05865 4.44443 5.16853C4.27998 5.27841 4.15181 5.43459 4.07612 5.61732C4.00043 5.80004 3.98063 6.00111 4.01921 6.19509C4.0578 6.38907 4.15304 6.56725 4.29289 6.70711C4.43275 6.84696 4.61093 6.9422 4.80491 6.98079C4.99889 7.01937 5.19996 6.99957 5.38268 6.92388C5.56541 6.84819 5.72159 6.72002 5.83147 6.55557C5.94135 6.39112 6 6.19778 6 6C5.99974 5.73486 5.89429 5.48066 5.70681 5.29319C5.51934 5.10571 5.26514 5.00026 5 5Z" />
+    <path d="M11 12C10.6044 12 10.2178 11.8827 9.88886 11.6629C9.55996 11.4432 9.30362 11.1308 9.15224 10.7654C9.00087 10.3999 8.96126 9.99778 9.03843 9.60982C9.1156 9.22186 9.30608 8.86549 9.58579 8.58579C9.86549 8.30608 10.2219 8.1156 10.6098 8.03843C10.9978 7.96126 11.3999 8.00087 11.7654 8.15224C12.1308 8.30362 12.4432 8.55996 12.6629 8.88886C12.8827 9.21776 13 9.60444 13 10C12.9994 10.5303 12.7885 11.0386 12.4136 11.4136C12.0386 11.7885 11.5303 11.9994 11 12ZM11 9C10.8022 9 10.6089 9.05865 10.4444 9.16853C10.28 9.27841 10.1518 9.43459 10.0761 9.61732C10.0004 9.80004 9.98063 10.0011 10.0192 10.1951C10.0578 10.3891 10.153 10.5673 10.2929 10.7071C10.4327 10.847 10.6109 10.9422 10.8049 10.9808C10.9989 11.0194 11.2 10.9996 11.3827 10.9239C11.5654 10.8482 11.7216 10.72 11.8315 10.5556C11.9414 10.3911 12 10.1978 12 10C11.9997 9.73487 11.8943 9.48066 11.7068 9.29319C11.5193 9.10571 11.2651 9.00027 11 9Z" />
+    <path d="M14 15H2C1.73487 14.9997 1.48068 14.8943 1.2932 14.7068C1.10572 14.5193 1.00028 14.2651 1 14V2C1.00028 1.73487 1.10572 1.48068 1.2932 1.2932C1.48068 1.10572 1.73487 1.00028 2 1H14C14.2651 1.00028 14.5193 1.10572 14.7068 1.2932C14.8943 1.48068 14.9997 1.73487 15 2V14C14.9997 14.2651 14.8943 14.5193 14.7068 14.7068C14.5193 14.8943 14.2651 14.9997 14 15ZM2 2V14H14V2H2Z" />
+  </svg>
+);
+
+export const DataFormatIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DataFormatIcon/DataFormatIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;

package/src/icons/DatabaseIcon/DatabaseIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { IconProps } from '@redocly/theme/icons/types';
+
+import { getCssColorVariable } from '@redocly/theme/core/utils';
+
+const Icon = (props: IconProps) => (
+  <svg viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+    <path d="M8 2.01318C5.35105 2.01318 2.5 2.63918 2.5 4.01318V13.0132C2.5 14.3872 5.35105 15.0132 8 15.0132C10.649 15.0132 13.5 14.3872 13.5 13.0132V4.01318C13.5 2.63918 10.649 2.01318 8 2.01318ZM8 3.01318C10.8988 3.01318 12.3974 3.73023 12.4984 4.01318C12.3974 4.29613 10.8988 5.01318 8 5.01318C5.07935 5.01318 3.5803 4.28538 3.5 4.02198V4.01953C3.5803 3.74098 5.07935 3.01318 8 3.01318ZM3.5 5.22703C4.56395 5.76073 6.3213 6.01318 8 6.01318C9.6787 6.01318 11.4361 5.76073 12.5 5.22703V7.00683C12.4197 7.28538 10.9207 8.01318 8 8.01318C5.07495 8.01318 3.57545 7.28318 3.5 7.01318V5.22703ZM3.5 8.22703C4.56395 8.76073 6.3213 9.01318 8 9.01318C9.6787 9.01318 11.4361 8.76073 12.5 8.22703V10.0068C12.4197 10.2854 10.9207 11.0132 8 11.0132C5.07495 11.0132 3.57545 10.2832 3.5 10.0132V8.22703ZM8 14.0132C5.07495 14.0132 3.57545 13.2832 3.5 13.0132V11.227C4.56395 11.7607 6.3213 12.0132 8 12.0132C9.6787 12.0132 11.4361 11.7607 12.5 11.227V13.0068C12.4197 13.2854 10.9207 14.0132 8 14.0132Z" />
+  </svg>
+);
+
+export const DatabaseIcon = styled(Icon).attrs(() => ({
+  'data-component-name': 'icons/DatabaseIcon/DatabaseIcon',
+}))<IconProps>`
+  path {
+    fill: ${({ color }) => getCssColorVariable(color)};
+  }
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;