feat: final

.storybook/preview.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 
 import { InterlayUIProvider } from '../packages/core/system/src';
 import { CSSReset } from '../packages/components/src';
-import '../packages/core/theme/src/css/theme.interlay.css';
-import { bobTheme } from '../packages/core/themeV2/src';
+import '../packages/core/theme/src/temp/css/theme.interlay.css';
+import { bobTheme } from '../packages/core/theme/src';
 import './style.css';
 
 const preview: Preview = {

README.md

@@ -60,10 +60,10 @@ function App({ children }) {
 2. Now you can start using components like so!:
 
 ```jsx
-import { CTA } from '@interlay/ui';
+import { Button } from '@interlay/ui';
 
 function Example() {
-  return <CTA>I am using Interlay UI</CTA>;
+  return <Button>I am using Interlay UI</Button>;
 }
 ```
 

packages/components/CHANGELOG.md

@@ -28,7 +28,7 @@
 
 ### Patch Changes
 
-- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and CTA
+- [#42](https://github.com/interlay/ui/pull/42) [`4f38fec0481cd7b1134457932dc23a94c9665511`](https://github.com/interlay/ui/commit/4f38fec0481cd7b1134457932dc23a94c9665511) Thanks [@danielsimao](https://github.com/danielsimao)! - refactor(components): Spinner (LoadingSpinner) and Button
 
 - [#46](https://github.com/interlay/ui/pull/46) [`95c75c1968cda23b75ff5f7aaaa13d5c4cbe6c0e`](https://github.com/interlay/ui/commit/95c75c1968cda23b75ff5f7aaaa13d5c4cbe6c0e) Thanks [@danielsimao](https://github.com/danielsimao)! - fix(components): Radio and RadioGroup
 

packages/components/README.md

@@ -60,10 +60,10 @@ function App({ children }) {
 2. Now you can start using components like so!:
 
 ```jsx
-import { CTA } from '@interlay/ui';
+import { Button } from '@interlay/ui';
 
 function Example() {
-  return <CTA>I am using Interlay UI</CTA>;
+  return <Button>I am using Interlay UI</Button>;
 }
 ```
 

packages/components/package.json

@@ -43,7 +43,7 @@
     "@interlay/icons": "workspace:*",
     "@interlay/system": "workspace:*",
     "@interlay/theme": "workspace:*",
-    "@interlay/themev2": "workspace:*",
+    "@interlay/theme": "workspace:*",
     "@radix-ui/react-slot": "^1.0.2",
     "@react-aria/accordion": "3.0.0-alpha.20",
     "@react-aria/breadcrumbs": "^3.5.4",

packages/components/src/Accordion/Accordion.style.tsx

@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 import { ChevronDown } from '@interlay/icons';
-import { AccordionVariants } from '@interlay/themev2';
+import { AccordionVariants } from '@interlay/theme';
 
 import { H3, Span } from '../Text';
 

packages/components/src/Accordion/Accordion.tsx

@@ -3,7 +3,7 @@ import { mergeProps } from '@react-aria/utils';
 import { useTreeState } from '@react-stately/tree';
 import { forwardRef, HTMLAttributes, Ref } from 'react';
 import { useDOMRef } from '@interlay/hooks';
-import { AccordionVariants } from '@interlay/themev2';
+import { AccordionVariants } from '@interlay/theme';
 
 import { AccordionItem } from './AccordionItem';
 import { StyledAccordion } from './Accordion.style';

packages/components/src/Accordion/AccordionItem.tsx

@@ -4,7 +4,7 @@ import { mergeProps } from '@react-aria/utils';
 import { TreeState } from '@react-stately/tree';
 import { Node } from '@react-types/shared';
 import { useRef } from 'react';
-import { AccordionVariants } from '@interlay/themev2';
+import { AccordionVariants } from '@interlay/theme';
 
 import {
   StyledAccordionItemButton,

packages/components/src/Alert/Alert.style.tsx

@@ -1,6 +1,6 @@
 import { CheckCircle, InformationCircle, Warning } from '@interlay/icons';
 import styled, { css } from 'styled-components';
-import { AlertStatus } from '@interlay/themev2';
+import { AlertStatus } from '@interlay/theme';
 
 import { Flex } from '../Flex';
 

packages/components/src/Alert/Alert.tsx

@@ -1,4 +1,4 @@
-import { AlertStatus } from '@interlay/themev2';
+import { AlertStatus } from '@interlay/theme';
 import { ForwardRefExoticComponent } from 'react';
 
 import { FlexProps } from '../Flex';

packages/components/src/Breadcrumbs/BreadcrumbItem.tsx

@@ -32,7 +32,7 @@ const BreadcrumbItem = ({ children, isDisabled, isCurrent, href, ...props }: Bre
 
   const commonProps: Pick<TextLinkProps, 'size' | 'color'> = {
     size: 's',
-    color: isCurrent ? 'secondary' : 'tertiary'
+    color: isCurrent ? 'light' : 'green-300'
   };
 
   return (
@@ -51,7 +51,7 @@ const BreadcrumbItem = ({ children, isDisabled, isCurrent, href, ...props }: Bre
           {children}
         </StyledLinkBreadcrumb>
       )}
-      {isCurrent === false && <ChevronRight color='tertiary' size='xs' />}
+      {isCurrent === false && <ChevronRight color='green-300' size='xs' />}
     </Fragment>
   );
 };

packages/components/src/Breadcrumbs/Breadcrumbs.style.tsx

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import { theme } from '@interlay/theme';
 
 import { Span } from '../Text';
 import { TextLink } from '../TextLink';
@@ -28,12 +27,12 @@ const StyledListItem = styled.li`
 `;
 
 const StyledSpanBreadcrumb = styled(Span)<StyledBreadcrumbProps>`
-  padding: 0 ${theme.spacing.spacing2};
+  padding: 0 ${({ theme }) => theme.spacing('s')};
   cursor: default;
 `;
 
 const StyledLinkBreadcrumb = styled(TextLink)<StyledBreadcrumbProps>`
-  padding: 0 ${theme.spacing.spacing2};
+  padding: 0 ${({ theme }) => theme.spacing('s')};
   text-decoration: none;
 `;
 

packages/components/src/Button/Button.style.tsx

@@ -1,5 +1,5 @@
-import { ButtonSizes, ButtonVariants } from '@interlay/themev2';
-import { ButtonColors } from '@interlay/themev2/src/components';
+import { ButtonSizes, ButtonVariants } from '@interlay/theme';
+import { ButtonColors } from '@interlay/theme/src/components';
 import styled, { css } from 'styled-components';
 
 import { UnstyledButton } from '../UnstyledButton';

packages/components/src/Button/Button.tsx

@@ -3,7 +3,7 @@ import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import { PressEvent } from '@react-types/shared';
 import { ButtonHTMLAttributes, forwardRef } from 'react';
-import { ButtonVariants, ButtonSizes, ButtonColors, SpinnerSizes, SpinnerColors } from '@interlay/themev2';
+import { ButtonVariants, ButtonSizes, ButtonColors, SpinnerSizes, SpinnerColors } from '@interlay/theme';
 import { Slottable } from '@radix-ui/react-slot';
 
 import { Flex } from '../Flex';

packages/components/src/Button/__tests__/CTA.test.tsx

@@ -2,24 +2,24 @@ import { render } from '@testing-library/react';
 import { createRef } from 'react';
 import { testA11y } from '@interlay/test-utils';
 
-import { CTA } from '..';
+import { Button } from '..';
 
-describe('CTA', () => {
+describe('Button', () => {
   it('should render correctly', () => {
-    const wrapper = render(<CTA>Button</CTA>);
+    const wrapper = render(<Button>Button</Button>);
 
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
   it('ref should be forwarded', () => {
     const ref = createRef<HTMLButtonElement>();
 
-    render(<CTA ref={ref}>Button</CTA>);
+    render(<Button ref={ref}>Button</Button>);
 
     expect(ref.current).not.toBeNull();
   });
 
   it('should pass a11y', async () => {
-    await testA11y(<CTA>Button</CTA>);
+    await testA11y(<Button>Button</Button>);
   });
 });