feat: design system (#60)

.changeset/popular-plants-fold.md

@@ -0,0 +1,9 @@
+---
+"@interlay/system": major
+"@interlay/ui": major
+"@interlay/theme": major
+"@interlay/hooks": major
+"@interlay/icons": major
+---
+
+feat: rebranding

.changeset/pre.json

@@ -0,0 +1,15 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@interlay/ui": "0.0.13",
+    "@interlay/system": "0.0.1",
+    "@interlay/theme": "0.0.7",
+    "@interlay/hooks": "0.0.8",
+    "@interlay/icons": "0.0.7",
+    "@interlay/test-utils": "0.0.0"
+  },
+  "changesets": [
+    "popular-plants-fold"
+  ]
+}

.storybook/preview-body.html

@@ -0,0 +1,5 @@
+<style>
+  body {
+    color: #ffffff;
+  }
+</style>

.storybook/preview.tsx

@@ -4,7 +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 '../packages/core/theme/src/temp/css/theme.interlay.css';
+import { bobTheme } from '../packages/core/theme/src';
 import './style.css';
 
 const preview: Preview = {
@@ -15,6 +16,19 @@ const preview: Preview = {
         color: /(background|color)$/i,
         date: /Date$/
       }
+    },
+    backgrounds: {
+      default: 'dark',
+      values: [
+        {
+          name: 'dark',
+          value: bobTheme.color('dark')
+        },
+        {
+          name: 'light',
+          value: bobTheme.color('light')
+        }
+      ]
     }
   },
   decorators: [
@@ -24,7 +38,7 @@ const preview: Preview = {
         locale && new Intl.Locale(locale)?.textInfo?.direction === 'rtl' ? 'rtl' : undefined;
 
       return (
-        <InterlayUIProvider locale={locale}>
+        <InterlayUIProvider locale={locale} theme={bobTheme}>
           <CSSReset />
           <div dir={direction} lang={locale}>
             <Story />

.storybook/storybook-theme.js

@@ -3,7 +3,7 @@ import { create } from '@storybook/theming';
 import brandImage from './storybook-logo.svg';
 
 export default create({
-  base: 'light',
+  base: 'dark',
   brandTitle: 'Interlay UI',
   brandUrl: 'https://github.com/interlay/ui',
   brandImage

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

@@ -1,5 +1,19 @@
 # @interlay/ui
 
+## 1.0.0-next.0
+
+### Major Changes
+
+- feat: rebranding
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @interlay/system@1.0.0-next.0
+  - @interlay/theme@1.0.0-next.0
+  - @interlay/hooks@1.0.0-next.0
+  - @interlay/icons@1.0.0-next.0
+
 ## 0.0.13
 
 ### Patch Changes
@@ -28,7 +42,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

@@ -1,6 +1,6 @@
 {
   "name": "@interlay/ui",
-  "version": "0.0.13",
+  "version": "1.0.0-next.0",
   "description": "Interlay UI library.",
   "homepage": "https://github.com/interlay/ui#readme",
   "license": "MIT",
@@ -38,11 +38,11 @@
     "postpack": "clean-package restore"
   },
   "dependencies": {
-    "@interlay/coin-icons": "workspace:*",
     "@interlay/hooks": "workspace:*",
     "@interlay/icons": "workspace:*",
     "@interlay/system": "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",
     "@react-aria/button": "^3.8.1",

packages/components/src/Accordion/Accordion.stories.tsx

@@ -29,6 +29,8 @@ export default {
 
 export const Default: StoryObj<AccordionProps> = {};
 
+export const Splitted: StoryObj<AccordionProps> = { args: { variant: 'splitted' } };
+
 export const DefaultExpanded: StoryObj<AccordionProps> = {
   args: {
     defaultExpandedKeys: ['1']

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

@@ -1,11 +1,14 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { ChevronDown } from '@interlay/icons';
-import { theme } from '@interlay/theme';
+import { AccordionVariants } from '@interlay/theme';
 
-import { H3 } from '../Text';
+import { H3, Span } from '../Text';
 
 type StyledAccordionProps = {
-  $isDisabled: boolean;
+  $variant: AccordionVariants;
+};
+
+type StyledChevronDownProps = {
   $isExpanded: boolean;
 };
 
@@ -22,22 +25,33 @@ type StyledAccordionItemContentProps = {
   $isExpanded: boolean;
 };
 
-const StyledAccordionItemWrapper = styled.div<Pick<StyledAccordionProps, '$isDisabled'>>`
+type StyledAccordionItemWrapperProps = {
+  $isDisabled: boolean;
+  $variant: AccordionVariants;
+};
+
+const StyledAccordion = styled.div<StyledAccordionProps>`
+  display: flex;
+  flex-direction: column;
+  ${({ theme, $variant }) => theme.accordion.variant[$variant].base}
+`;
+
+const StyledAccordionItemWrapper = styled.div<StyledAccordionItemWrapperProps>`
   z-index: inherit;
   position: relative;
   opacity: ${({ $isDisabled }) => $isDisabled && '0.5'};
+  ${({ theme, $variant }) => theme.accordion.variant[$variant].item.base}
 `;
 
 const StyledAccordionItemHeading = styled(H3)`
   margin: 0;
-  font-weight: ${theme.fontWeight.semibold};
+  ${({ theme }) => theme.accordion.item.heading}
 `;
 
 const StyledAccordionItemButton = styled.button<StyledAccordionItemButtonProps>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: ${theme.spacing.spacing4};
   min-height: 3.25rem;
   text-overflow: ellipsis;
   cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};
@@ -48,11 +62,13 @@ const StyledAccordionItemButton = styled.button<StyledAccordionItemButtonProps>`
   color: inherit;
   font: inherit;
   outline: ${({ $isFocusVisible }) => !$isFocusVisible && 'none'};
+
+  ${({ theme }) => theme.accordion.item.button}
 `;
 
-const StyledChevronDown = styled(ChevronDown)<Pick<StyledAccordionProps, '$isExpanded'>>`
+const StyledChevronDown = styled(ChevronDown)<StyledChevronDownProps>`
   transform: ${({ $isExpanded }) => $isExpanded && 'rotate(-180deg)'};
-  transition: transform ${theme.transition.duration.duration150}ms ease;
+  transition: transform 150ms ease;
 `;
 
 const StyledAccordionItemRegion = styled.div<StyledAccordionItemRegionProps>`
@@ -64,10 +80,24 @@ const StyledAccordionItemRegion = styled.div<StyledAccordionItemRegionProps>`
 const StyledAccordionItemContent = styled.div<StyledAccordionItemContentProps>`
   overflow: hidden;
   padding-top: 0;
-  padding-left: ${theme.spacing.spacing4};
-  padding-right: ${theme.spacing.spacing4};
-  padding-bottom: ${({ $isExpanded }) => ($isExpanded ? theme.spacing.spacing4 : 0)};
   transition: all 200ms ease 0ms;
+
+  ${({ theme, $isExpanded }) => {
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight } = theme.accordion.item.content || {};
+
+    return css`
+      padding-top: ${paddingTop};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      padding-bottom: ${$isExpanded ? paddingBottom : 0};
+    `;
+  }}
+`;
+
+const StyledSpan = styled(Span)`
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
 `;
 
 export {
@@ -76,5 +106,7 @@ export {
   StyledAccordionItemHeading,
   StyledAccordionItemRegion,
   StyledAccordionItemWrapper,
-  StyledChevronDown
+  StyledChevronDown,
+  StyledAccordion,
+  StyledSpan
 };

packages/components/src/Accordion/Accordion.tsx

@@ -2,13 +2,14 @@ import { AriaAccordionProps, useAccordion } from '@react-aria/accordion';
 import { mergeProps } from '@react-aria/utils';
 import { useTreeState } from '@react-stately/tree';
 import { forwardRef, HTMLAttributes, Ref } from 'react';
-import { FontSize } from '@interlay/theme';
 import { useDOMRef } from '@interlay/hooks';
+import { AccordionVariants } from '@interlay/theme';
 
 import { AccordionItem } from './AccordionItem';
+import { StyledAccordion } from './Accordion.style';
 
 type Props = {
-  size?: FontSize;
+  variant?: AccordionVariants;
 };
 
 type InheritAttrs<T> = Omit<AriaAccordionProps<T>, keyof Props>;
@@ -18,19 +19,19 @@ type NativeAttrs<T> = Omit<HTMLAttributes<unknown>, (keyof InheritAttrs<T> & Pro
 type AccordionProps<T = any> = Props & InheritAttrs<T> & NativeAttrs<T>;
 
 const Accordion = <T extends Record<string, unknown>>(
-  { size = 'base', ...props }: AccordionProps<T>,
+  { variant = 'light', ...props }: AccordionProps<T>,
   ref: Ref<HTMLDivElement>
 ): JSX.Element => {
   const state = useTreeState(props);
   const accordionRef = useDOMRef<HTMLDivElement>(ref);
   const { accordionProps } = useAccordion(props, state, accordionRef);
 
   return (
-    <div {...mergeProps(props, accordionProps)} ref={accordionRef}>
+    <StyledAccordion $variant={variant} {...mergeProps(props, accordionProps)} ref={accordionRef}>
       {[...state.collection].map((item) => (
-        <AccordionItem<T> key={item.key} item={item} size={size} state={state} />
+        <AccordionItem<T> key={item.key} item={item} state={state} variant={variant} />
       ))}
-    </div>
+    </StyledAccordion>
   );
 };
 

packages/components/src/Accordion/AccordionItem.tsx

@@ -4,25 +4,24 @@ import { mergeProps } from '@react-aria/utils';
 import { TreeState } from '@react-stately/tree';
 import { Node } from '@react-types/shared';
 import { useRef } from 'react';
-import { FontSize } from '@interlay/theme';
-
-import { Span } from '..';
+import { AccordionVariants } from '@interlay/theme';
 
 import {
   StyledAccordionItemButton,
   StyledAccordionItemHeading,
   StyledAccordionItemWrapper,
-  StyledChevronDown
+  StyledChevronDown,
+  StyledSpan
 } from './Accordion.style';
 import { AccordionItemRegion } from './AccordionItemRegion';
 
 type AccordionItemProps<T> = {
   item: Node<T>;
   state: TreeState<T>;
-  size?: FontSize;
+  variant?: AccordionVariants;
 };
 const AccordionItem = <T extends Record<string, unknown>>({
-  size = 'base',
+  variant = 'light',
   ...props
 }: AccordionItemProps<T>): JSX.Element => {
   const ref = useRef<HTMLButtonElement>(null);
@@ -33,16 +32,16 @@ const AccordionItem = <T extends Record<string, unknown>>({
   const { isFocusVisible, focusProps } = useFocusRing();
 
   return (
-    <StyledAccordionItemWrapper $isDisabled={isDisabled}>
-      <StyledAccordionItemHeading size={size}>
+    <StyledAccordionItemWrapper $isDisabled={isDisabled} $variant={variant}>
+      <StyledAccordionItemHeading>
         <FocusRing within>
           <StyledAccordionItemButton
             {...mergeProps(buttonProps, focusProps)}
             ref={ref}
             $isDisabled={isDisabled}
             $isFocusVisible={isFocusVisible}
           >
-            <Span>{item.props.title}</Span>
+            <StyledSpan>{item.props.title}</StyledSpan>
             <StyledChevronDown $isExpanded={isExpanded} aria-hidden='true' role='img' size='s' />
           </StyledAccordionItemButton>
         </FocusRing>

packages/components/src/Accordion/__tests__/Accordion.test.tsx

@@ -1,6 +1,5 @@
-import { render } from '@testing-library/react';
 import * as React from 'react';
-import { testA11y } from '@interlay/test-utils';
+import { testA11y, render } from '@interlay/test-utils';
 
 import { Accordion, AccordionItem } from '..';