@bitrise/bitkit 9.3.0-alpha.3 → 9.3.1

package/src/Textarea/Textarea.css

@@ -2,11 +2,11 @@
   display: block;
   width: 100%;
   min-width: 0;
-  border: 0.0625rem solid var(--bitkit-colors-gray-3);
+  border: 0.0625rem solid var(--color-gray--3);
   border-radius: var(--size--x1);
   box-shadow: inset 0 0.125rem 0.1875rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--bitkit-colors-white);
-  color: var(--bitkit-colors-grape-5);
+  background-color: var(--color-white);
+  color: var(--color-grape--5);
   line-height: inherit;
   resize: none;
   transition-property: background-color, border-color, box-shadow;
@@ -14,23 +14,23 @@
   transition-timing-function: var(--transition-timing-function);
   appearance: none;
 
-  &::placeholder { color: var(--bitkit-colors-gray-7); }
-  &:disabled { background-color: var(--bitkit-colors-gray-2); }
+  &::placeholder { color: var(--color-gray--7); }
+  &:disabled { background-color: var(--color-gray--2); }
 }
 
 .TextArea--invalid {
-  border-color: var(--bitkit-colors-red-3);
-  color: var(--bitkit-colors-red-3);
+  border-color: var(--color-red--3);
+  color: var(--color-red--3);
 
-  &::placeholder { color: var(--bitkit-colors-red-3); }
+  &::placeholder { color: var(--color-red--3); }
 }
 
 .TextArea:focus,
 .TextArea--invalid:focus {
   outline: none;
-  border-color: var(--bitkit-colors-grape-3);
+  border-color: var(--color-grape--3);
   box-shadow: inset 0 0 0 0.125rem rgba(118, 15, 195, 0.3);
-  color: var(--bitkit-colors-grape-5);
+  color: var(--color-grape--5);
 
   &::placeholder {
     color: transparent;

package/src/Textarea/Textarea.tsx

@@ -17,12 +17,7 @@ const Textarea: React.FunctionComponent<Props> = (props: Props) => {
     'TextArea--invalid': invalid,
   });
 
-  return (
-    <Flex { ...rest }
-        Component="textarea"
-        className={ classes }
-        padding="x4" />
-  );
+  return <Flex {...rest} Component="textarea" className={classes} padding="x4" />;
 };
 
 export default Textarea;

package/src/Toggle/Toggle.css

@@ -25,8 +25,8 @@
   left: 0;
   padding: 0 var(--Toggle--border);
   border-radius: var(--Toggle--size);
-  background-color: var(--bitkit-colors-gray-6);
-  color: var(--bitkit-colors-white);
+  background-color: var(--color-gray--6);
+  color: var(--color-white);
   transition-property: background-color;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
@@ -40,7 +40,7 @@
   height: calc(var(--Toggle--size) - (var(--Toggle--border) * 2));
   transform: translate(0, -50%);
   border-radius: 50%;
-  background-image: linear-gradient(to top, var(--bitkit-colors-white), var(--bitkit-colors-gray-2));
+  background-image: linear-gradient(to top, var(--color-white), var(--color-gray--2));
   transition-property: transform, border-color, box-shadow;
   transition-duration: var(--transition-duration--fast);
   transition-timing-function: var(--transition-timing-function);
@@ -57,7 +57,7 @@
 .Toggle__icon-right { right: var(--Toggle--border); }
 
 .Toggle__input:checked + .Toggle__control {
-  background-color: var(--bitkit-colors-aqua-3);
+  background-color: var(--color-aqua--3);
 
   & .Toggle__knob {
     transform: translate(calc(100% + (var(--Toggle--border) * 2)), -50%);

package/src/Toggle/Toggle.tsx

@@ -19,18 +19,15 @@ const Toggle: React.FunctionComponent<Props> = (props: Props) => {
   const { checked, children, defaultChecked, onChange, ...rest } = props;
 
   return (
-    <Flex { ...rest }
-        Component="label"
-        alignChildrenVertical="middle"
-        direction="horizontal"
-        gap="x2">
+    <Flex {...rest} Component="label" alignChildrenVertical="middle" direction="horizontal" gap="x2">
       <Flex className="Toggle">
         <input
-            checked={ checked }
-            className="Toggle__input"
-            defaultChecked={ defaultChecked }
-            onChange={ onChange }
-            type="checkbox" />
+          checked={checked}
+          className="Toggle__input"
+          defaultChecked={defaultChecked}
+          onChange={onChange}
+          type="checkbox"
+        />
         <Flex className="Toggle__control">
           <span className="Toggle__icon-left">
             <Icon name="Tick" />
@@ -44,11 +41,11 @@ const Toggle: React.FunctionComponent<Props> = (props: Props) => {
         </Flex>
       </Flex>
 
-      { children && (
+      {children && (
         <Flex minWidth="0px" shrink>
-          { children }
+          {children}
         </Flex>
-      ) }
+      )}
     </Flex>
   );
 };

package/src/Tooltip/Tooltip.tsx

@@ -54,26 +54,29 @@ const Tooltip: React.FunctionComponent<Props> = (props: Props) => {
   return (
     <PlacementManager>
       <Placement
-          backgroundColor={ backgroundColor }
-          borderRadius={ borderRadius }
-          placement={ placement }
-          textColor={ textColor }
-          timeout={ timeout }
-          { ...rest }
-          visible={ isControlled ? controlledVisible : uncontrolledVisible }>
-        { () => (
+        backgroundColor={backgroundColor}
+        borderRadius={borderRadius}
+        placement={placement}
+        textColor={textColor}
+        timeout={timeout}
+        {...rest}
+        visible={isControlled ? controlledVisible : uncontrolledVisible}
+      >
+        {() => (
           <PlacementArea paddingHorizontal="x3" paddingVertical="x2" withArrow>
-            <Text size="2">{ title }</Text>
+            <Text size="2">{title}</Text>
           </PlacementArea>
-        ) }
+        )}
       </Placement>
 
       <PlacementReference>
-        { (props) => children({
-          ...props,
-          onMouseEnter: isControlled ? undefined : handleMouseEnter,
-          onMouseLeave: isControlled ? undefined : handleMouseLeave,
-        }) }
+        {(properties) =>
+          children({
+            ...properties,
+            onMouseEnter: isControlled ? undefined : handleMouseEnter,
+            onMouseLeave: isControlled ? undefined : handleMouseLeave,
+          })
+        }
       </PlacementReference>
     </PlacementManager>
   );

package/src/Visibility/Visibility.tsx

@@ -23,9 +23,7 @@ const Visibility: React.FunctionComponent<Props> = (props: Props) => {
     'Visibility--visible': visible,
   });
 
-  return (
-    <Flex className={ classes } { ...rest } />
-  );
+  return <Flex className={classes} {...rest} />;
 };
 
 export default Visibility;

package/src/Visibility/VisibilityContainer.tsx

@@ -17,9 +17,7 @@ const VisibilityContainer: React.FunctionComponent<Props> = (props: Props) => {
     'Visibility__container--enabled': enabled,
   });
 
-  return (
-    <Flex className={ classes } { ...rest } />
-  );
+  return <Flex className={classes} {...rest} />;
 };
 
 VisibilityContainer.defaultProps = {

package/src/hooks/useResizeObserver.ts

@@ -1,11 +1,9 @@
 import { useLayoutEffect, useState } from 'react';
+import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';
 
-export interface DOMRectReadOnlyWithoutToJSON extends Omit<DOMRectReadOnly, 'toJSON'> {}
+export type DOMRectReadOnlyWithoutToJSON = Omit<DOMRectReadOnly, 'toJSON'>;
 
-export default (): [
-  DOMRectReadOnlyWithoutToJSON,
-  (element: Element | null) => void,
-] => {
+export default (): [DOMRectReadOnlyWithoutToJSON, (element: Element | null) => void] => {
   const [node, setNode] = useState<Element | null>(null);
   const [size, setSize] = useState<DOMRectReadOnlyWithoutToJSON>({
     bottom: 0,
@@ -19,7 +17,7 @@ export default (): [
   });
 
   useLayoutEffect(() => {
-    const observer: ResizeObserver = new ResizeObserver(([entry]) => {
+    const observer: ResizeObserver = new ResizeObserverPolyfill(([entry]) => {
       if (entry) {
         setSize(entry.contentRect);
       }

package/src/index.ts

@@ -1,4 +1,6 @@
+import 'normalize.css/normalize.css';
 import './variables.css';
+import './root.css';
 
 import * as variables from './variables';
 import * as hooks from './hooks';
@@ -20,9 +22,11 @@ export { default as Badge, Props as BadgeProps } from './Badge/Badge';
 export { default as Base, Props as BaseProps, TypeColors, TypeSizes } from './Base/Base';
 export { default as Bounds, Props as BoundsProps } from './Bounds/Bounds';
 export { default as Button, Props as ButtonProps } from './Button/Button';
-export { default as Button2 } from './Button2/Button2';
 export { default as Buttons, Props as ButtonsProps } from './Button/Buttons';
-export { default as ButtonWithDropdown, Props as ButtonWithDropdownProps } from './ButtonWithDropdown/ButtonWithDropdown';
+export {
+  default as ButtonWithDropdown,
+  Props as ButtonWithDropdownProps,
+} from './ButtonWithDropdown/ButtonWithDropdown';
 export { default as Card, Props as CardProps } from './Card/Card';
 export { default as CardButton, Props as CardButtonProps } from './Card/CardButton';
 export { default as CardContent, Props as CardContentProps } from './Card/CardContent';
@@ -37,7 +41,10 @@ export { default as DropdownButton, Props as DropdownButtonProps } from './Dropd
 export { default as DropdownMenus, Props as DropdownMenusProps } from './Dropdown/DropdownMenus';
 export { default as DropdownMenu, Props as DropdownMenuProps } from './Dropdown/DropdownMenu';
 export { default as DropdownMenuItem, Props as DropdownMenuItemProps } from './Dropdown/DropdownMenuItem';
-export { default as DropdownMenuItemGroup, Props as DropdownMenuItemGroupProps } from './Dropdown/DropdownMenuItemGroup';
+export {
+  default as DropdownMenuItemGroup,
+  Props as DropdownMenuItemGroupProps,
+} from './Dropdown/DropdownMenuItemGroup';
 export { default as Expand, Props as ExpandProps } from './Expand/Expand';
 export { default as ExternalLink, Props as ExternalLinkProps } from './ExternalLink/ExternalLink';
 export { default as Flex, Props as FlexProps } from './Flex/Flex';
@@ -56,6 +63,7 @@ export { default as ListItem, Props as ListItemProps } from './List/ListItem';
 export { default as Logo, Props as LogoProps } from './Logo/Logo';
 export { default as Modal, Props as ModalProps } from './Modal/Modal';
 export { default as ModalBody, Props as ModalBodyProps } from './Modal/ModalBody';
+// eslint-disable-next-line import/no-cycle
 export { default as ModalHeader, Props as ModalHeaderProps } from './Modal/ModalHeader';
 export { default as ModalHeaderProgress, Props as ModalHeaderProgressProps } from './Modal/ModalHeaderProgress';
 export { default as ModalTitle, Props as ModalTitleProps } from './Modal/ModalTitle';
@@ -98,5 +106,3 @@ export { default as Toggle, Props as ToggleProps } from './Toggle/Toggle';
 export { default as Tooltip, Props as TooltipProps } from './Tooltip/Tooltip';
 export { default as Visibility, Props as VisibilityProps } from './Visibility/Visibility';
 export { default as VisibilityContainer, Props as VisibilityContainerProps } from './Visibility/VisibilityContainer';
-export { default as provider } from './chakra/provider';
-export { default as theme } from './chakra/theme';

package/src/root.css

@@ -0,0 +1,59 @@
+/* stylelint-disable selector-max-universal, selector-max-id, selector-max-type */
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+html {
+  min-height: 100%;
+  box-sizing: border-box;
+}
+
+body:not(.bitrise-legacy) {
+  color: var(--color-grape--5);
+  font-family: var(--font-family);
+  font-size: var(--font-size--3);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: var(--line-height--3);
+}
+
+canvas {
+  display: block;
+}
+
+svg:not(:root) {
+  overflow: visible;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: unset;
+  font-weight: unset;
+}
+
+button {
+  font-size: inherit;
+  font-weight: inherit;
+
+  &:hover { cursor: pointer; }
+  &:focus { outline: 0; }
+
+  &[disabled],
+  &[disabled]:hover,
+  &[disabled]:active {
+    cursor: default;
+  }
+}

package/src/variables.css

@@ -9,146 +9,146 @@
   --size--x10: 2.5rem;
   --size--x12: 3rem;
   --size--x16: 4rem;
-/*
-  --bitkit-colors-white: #FFFFFF;
-  --bitkit-colors-black: #222222;
-
-  --bitkit-colors-gray-1: #F8F8F8;
-  --bitkit-colors-gray-2: #ECECEC;
-  --bitkit-colors-gray-3: #DDDDDD;
-  --bitkit-colors-gray-4: #CCCCCC;
-  --bitkit-colors-gray-5: #ACACAC;
-  --bitkit-colors-gray-6: #777777;
-  --bitkit-colors-gray-7: #616161;
-  --bitkit-colors-gray-8: #444444;
-
-  --bitkit-colors-aqua-1: #E6FAF9;
-  --bitkit-colors-aqua-2: #86E9E2;
-  --bitkit-colors-aqua-3: #0DD3C5;
-  --bitkit-colors-aqua-4: #0EC7BA;
-  --bitkit-colors-aqua-5: #00968C;
-
-  --bitkit-colors-grape-1: #F8F0FF;
-  --bitkit-colors-grape-2: #B88ADB;
-  --bitkit-colors-grape-3: #760FC3;
-  --bitkit-colors-grape-4: #492F5C;
-  --bitkit-colors-grape-5: #351D48;
-
-  --bitkit-colors-eggplant: #683D87;
-
-  --bitkit-colors-red-1: #FFE8EE;
-  --bitkit-colors-red-2: #FF8FAB;
-  --bitkit-colors-red-3: #FF2158;
-  --bitkit-colors-red-4: #EE003B;
-  --bitkit-colors-red-5: #C02048;
-
-  --bitkit-colors-orange-1: #FFECE5;
-  --bitkit-colors-orange-2: #FFA17F;
-  --bitkit-colors-orange-3: #FF4400;
-  --bitkit-colors-orange-4: #E73E00;
-  --bitkit-colors-orange-5: #D33D07;
-
-  --bitkit-colors-yellow-1: #FFF9E5;
-  --bitkit-colors-yellow-2: #FFE27F;
-  --bitkit-colors-yellow-3: #FFC500;
-  --bitkit-colors-yellow-4: #ECB600;
-  --bitkit-colors-yellow-5: #795E00;
-
-  --bitkit-colors-green-1: #E7F9F3;
-  --bitkit-colors-green-2: #87E1C3;
-  --bitkit-colors-green-3: #0FC389;
-  --bitkit-colors-green-4: #0FB37D;
-  --bitkit-colors-green-5: #117D59;
-
-  --bitkit-colors-blue-1: #E6F2FA;
-  --bitkit-colors-blue-2: #86C1E6;
-  --bitkit-colors-blue-3: #0D83CD;
-  --bitkit-colors-blue-4: #0C70AE;
-  --bitkit-colors-blue-5: #095C90;
-
-  --bitkit-colors-darkblue-1: #E6ECF7;
-  --bitkit-colors-darkblue-2: #82A4D7;
-  --bitkit-colors-darkblue-3: #054AB0;
-  --bitkit-colors-darkblue-4: #043E94;
-  --bitkit-colors-darkblue-5: #033175;
-
-  --bitkit-colors-violet-1: #F4E7F9;
-  --bitkit-colors-violet-2: #CB8ADF;
-  --bitkit-colors-violet-3: #990FC3;
-  --bitkit-colors-violet-4: #8512A8;
-  --bitkit-colors-violet-5: #741492;
+
+  --color-white: #FFFFFF;
+  --color-black: #222222;
+
+  --color-gray--1: #F8F8F8;
+  --color-gray--2: #ECECEC;
+  --color-gray--3: #DDDDDD;
+  --color-gray--4: #CCCCCC;
+  --color-gray--5: #ACACAC;
+  --color-gray--6: #777777;
+  --color-gray--7: #616161;
+  --color-gray--8: #444444;
+
+  --color-aqua--1: #E6FAF9;
+  --color-aqua--2: #86E9E2;
+  --color-aqua--3: #0DD3C5;
+  --color-aqua--4: #0EC7BA;
+  --color-aqua--5: #00968C;
+
+  --color-grape--1: #F8F0FF;
+  --color-grape--2: #B88ADB;
+  --color-grape--3: #760FC3;
+  --color-grape--4: #492F5C;
+  --color-grape--5: #351D48;
+
+  --color-eggplant: #683D87;
+
+  --color-red--1: #FFE8EE;
+  --color-red--2: #FF8FAB;
+  --color-red--3: #FF2158;
+  --color-red--4: #EE003B;
+  --color-red--5: #C02048;
+
+  --color-orange--1: #FFECE5;
+  --color-orange--2: #FFA17F;
+  --color-orange--3: #FF4400;
+  --color-orange--4: #E73E00;
+  --color-orange--5: #D33D07;
+
+  --color-yellow--1: #FFF9E5;
+  --color-yellow--2: #FFE27F;
+  --color-yellow--3: #FFC500;
+  --color-yellow--4: #ECB600;
+  --color-yellow--5: #795E00;
+
+  --color-green--1: #E7F9F3;
+  --color-green--2: #87E1C3;
+  --color-green--3: #0FC389;
+  --color-green--4: #0FB37D;
+  --color-green--5: #117D59;
+
+  --color-blue--1: #E6F2FA;
+  --color-blue--2: #86C1E6;
+  --color-blue--3: #0D83CD;
+  --color-blue--4: #0C70AE;
+  --color-blue--5: #095C90;
+
+  --color-darkblue--1: #E6ECF7;
+  --color-darkblue--2: #82A4D7;
+  --color-darkblue--3: #054AB0;
+  --color-darkblue--4: #043E94;
+  --color-darkblue--5: #033175;
+
+  --color-violet--1: #F4E7F9;
+  --color-violet--2: #CB8ADF;
+  --color-violet--3: #990FC3;
+  --color-violet--4: #8512A8;
+  --color-violet--5: #741492;
 
   --rgb-white: 255, 255, 255;
   --rgb-black: 34, 34, 34;
 
-  --rgb-gray-1: 248, 248, 248;
-  --rgb-gray-2: 236, 236, 236;
-  --rgb-gray-3: 221, 221, 221;
-  --rgb-gray-4: 204, 204, 204;
-  --rgb-gray-5: 172, 172, 172;
-  --rgb-gray-6: 119, 119, 119;
-  --rgb-gray-7: 97, 97, 97;
-  --rgb-gray-8: 68, 68, 68;
-
-  --rgb-aqua-1: 230, 250, 249;
-  --rgb-aqua-2: 134, 233, 226;
-  --rgb-aqua-3: 13, 211, 197;
-  --rgb-aqua-4: 14, 199, 186;
-  --rgb-aqua-5: 0, 150, 140;
-
-  --rgb-grape-1: 248, 240, 255;
-  --rgb-grape-2: 184, 138, 219;
-  --rgb-grape-3: 118, 15, 195;
-  --rgb-grape-4: 73, 47, 92;
-  --rgb-grape-5: 53, 29, 72;
+  --rgb-gray--1: 248, 248, 248;
+  --rgb-gray--2: 236, 236, 236;
+  --rgb-gray--3: 221, 221, 221;
+  --rgb-gray--4: 204, 204, 204;
+  --rgb-gray--5: 172, 172, 172;
+  --rgb-gray--6: 119, 119, 119;
+  --rgb-gray--7: 97, 97, 97;
+  --rgb-gray--8: 68, 68, 68;
+
+  --rgb-aqua--1: 230, 250, 249;
+  --rgb-aqua--2: 134, 233, 226;
+  --rgb-aqua--3: 13, 211, 197;
+  --rgb-aqua--4: 14, 199, 186;
+  --rgb-aqua--5: 0, 150, 140;
+
+  --rgb-grape--1: 248, 240, 255;
+  --rgb-grape--2: 184, 138, 219;
+  --rgb-grape--3: 118, 15, 195;
+  --rgb-grape--4: 73, 47, 92;
+  --rgb-grape--5: 53, 29, 72;
 
   --rgb-eggplant: 104, 61, 135;
 
-  --rgb-red-1: 255, 232, 238;
-  --rgb-red-2: 255, 143, 171;
-  --rgb-red-3: 255, 33, 88;
-  --rgb-red-4: 238, 0, 59;
-  --rgb-red-5: 192, 32, 72;
-
-  --rgb-orange-1: 255, 236, 229;
-  --rgb-orange-2: 255, 161, 127;
-  --rgb-orange-3: 255, 68, 0;
-  --rgb-orange-4: 231, 62, 0;
-  --rgb-orange-5: 211, 61, 7;
-
-  --rgb-yellow-1: 255, 249, 229;
-  --rgb-yellow-2: 255, 226, 127;
-  --rgb-yellow-3: 255, 197, 0;
-  --rgb-yellow-4: 236, 182, 0;
-  --rgb-yellow-5: 121, 94, 0;
-
-  --rgb-green-1: 231, 249, 243;
-  --rgb-green-2: 135, 225, 195;
-  --rgb-green-3: 15, 195, 137;
-  --rgb-green-4: 15, 179, 125;
-  --rgb-green-5: 17, 125, 89;
-
-  --rgb-blue-1: 230, 242, 250;
-  --rgb-blue-2: 134, 193, 230;
-  --rgb-blue-3: 13, 131, 205;
-  --rgb-blue-4: 12, 112, 174;
-  --rgb-blue-5: 9, 92, 144;
-
-  --rgb-darkblue-1: 230, 236, 247;
-  --rgb-darkblue-2: 130, 164, 215;
-  --rgb-darkblue-3: 5, 74, 176;
-  --rgb-darkblue-4: 4, 62, 148;
-  --rgb-darkblue-5: 3, 49, 117;
-
-  --rgb-violet-1: 244, 231, 249;
-  --rgb-violet-2: 203, 138, 223;
-  --rgb-violet-3: 153, 15, 195;
-  --rgb-violet-4: 133, 18, 168;
-  --rgb-violet-5: 116, 20, 146;
-
-  --bitkit-colors-overlay--black: rgba(34, 34, 34, 0.8);
-  --bitkit-colors-overlay--grape: rgba(53, 29, 72, 0.8);
-*/
+  --rgb-red--1: 255, 232, 238;
+  --rgb-red--2: 255, 143, 171;
+  --rgb-red--3: 255, 33, 88;
+  --rgb-red--4: 238, 0, 59;
+  --rgb-red--5: 192, 32, 72;
+
+  --rgb-orange--1: 255, 236, 229;
+  --rgb-orange--2: 255, 161, 127;
+  --rgb-orange--3: 255, 68, 0;
+  --rgb-orange--4: 231, 62, 0;
+  --rgb-orange--5: 211, 61, 7;
+
+  --rgb-yellow--1: 255, 249, 229;
+  --rgb-yellow--2: 255, 226, 127;
+  --rgb-yellow--3: 255, 197, 0;
+  --rgb-yellow--4: 236, 182, 0;
+  --rgb-yellow--5: 121, 94, 0;
+
+  --rgb-green--1: 231, 249, 243;
+  --rgb-green--2: 135, 225, 195;
+  --rgb-green--3: 15, 195, 137;
+  --rgb-green--4: 15, 179, 125;
+  --rgb-green--5: 17, 125, 89;
+
+  --rgb-blue--1: 230, 242, 250;
+  --rgb-blue--2: 134, 193, 230;
+  --rgb-blue--3: 13, 131, 205;
+  --rgb-blue--4: 12, 112, 174;
+  --rgb-blue--5: 9, 92, 144;
+
+  --rgb-darkblue--1: 230, 236, 247;
+  --rgb-darkblue--2: 130, 164, 215;
+  --rgb-darkblue--3: 5, 74, 176;
+  --rgb-darkblue--4: 4, 62, 148;
+  --rgb-darkblue--5: 3, 49, 117;
+
+  --rgb-violet--1: 244, 231, 249;
+  --rgb-violet--2: 203, 138, 223;
+  --rgb-violet--3: 153, 15, 195;
+  --rgb-violet--4: 133, 18, 168;
+  --rgb-violet--5: 116, 20, 146;
+
+  --color-overlay--black: rgba(34, 34, 34, 0.8);
+  --color-overlay--grape: rgba(53, 29, 72, 0.8);
+
   --font-family: 'TT Norms Pro', sans-serif;
   --font-family-monospace: 'Source Code Pro', monospace;
 

package/.eslintignore

@@ -1,3 +0,0 @@
-site/components/Documentation/ComponentDocumentationPage.tsx
-site/components/Documentation/Materials/SectionColors.tsx
-src/Base/Base.tsx