@atom-learning/components 2.29.1 → 2.31.0-beta.0

package/dist/docs/Accordion.mdx

@@ -5,23 +5,29 @@ description: A vertically stacked group of interactive headings that reveal an a
 category: Layout
 ---
 
+Functionality based on the [`Accordion`](https://radix-ui.com/primitives/docs/components/accordion) radix component.
+
+Implements experimental ColorScheme component to allow multiple colour setups.
+
 The Accordion exports 4 components that combine to make the `Accordion`. The parent Accordion contains `Accordion.Item` components, which themselves must contain `Accordion.Trigger` and `Accordion.Content`.
 
 The `Accordion.Trigger` has been simplified to include a chevron icon. Generally, you would only want to render text inside the rest.
 
 Default styling has been applied to `Accordion.Trigger`, but `Accordion.Content` is an empty container without styling. Should only text be placed inside, it is highly advisable to apply spacing to align with the styling of the rest of the Accordion. This can be done with either the `css` property, or by placing any other components inside the `Accordion.Content`.
 
-You can Read more about the underlying UI component on the [Radix UI documentation site](https://radix-ui.com/primitives/docs/components/accordion).
-
 ```tsx preview
 <Accordion type="single" defaultValue="1">
   <Accordion.Item value="1">
-    <Accordion.Trigger theme="light">Accordion Header 1</Accordion.Trigger>
-    <Accordion.Content css={{ p: '$4' }}>Accordion content 1</Accordion.Content>
+    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
+    <Accordion.Content css={{ p: '$3' }}>
+      <Text>Accordion content 1</Text>
+    </Accordion.Content>
   </Accordion.Item>
   <Accordion.Item value="2">
     <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
-    <Accordion.Content css={{ p: '$4' }}>Accordion content 2</Accordion.Content>
+    <Accordion.Content css={{ p: '$3' }}>
+      <Text>Accordion content 2</Text>
+    </Accordion.Content>
   </Accordion.Item>
 </Accordion>
 ```
@@ -40,6 +46,49 @@ Accordions can have `type` as either `single` or `multiple`. This changes how ma
 
 Note: if `multiple`, `value` and `defaultValue` must be in an array. Even if you want just one item to be visible initially, you must pass something like `defaultValue={['name']}`
 
-## Themes
+## Disabled
 
-`Accordion.Trigger` can have a `theme` property. Possible values are `primaryDark` and `light`. The default is `primaryDark`.
+An `Accordion.Item` component can take a `disabled` prop, which would make it untoggleable.
+The corresponding `Accordion.Content` component's content will be, in this case, permanently in its original state.
+
+```tsx preview live
+<Accordion type="single" defaultValue="1">
+  <Accordion.Item value="1" disabled>
+    <Accordion.Trigger>Accordion Header 1</Accordion.Trigger>
+    <Accordion.Content css={{ p: '$3' }}>
+      <Text>Accordion content 1</Text>
+    </Accordion.Content>
+  </Accordion.Item>
+  <Accordion.Item value="2">
+    <Accordion.Trigger>Accordion Header 2</Accordion.Trigger>
+    <Accordion.Content css={{ p: '$3' }}>
+      <Text>Accordion content 2</Text>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```
+
+## Color Scheme
+
+You can pass in a `colorScheme` object to the Accordion.Trigger to customise the colours of the component.
+Defaults to `{ accent: "slate", interactive: "loContrast1"}`
+ColorScheme is experimental and has been implemented only locally but you can read more about how it
+currently works and available options [on the repository's github](https://github.com/Atom-Learning/components/tree/main/lib/src/experiments/color-scheme#readme).
+
+```tsx preview live
+<Accordion type="single" defaultValue="1">
+  <Accordion.Item value="1">
+    <Accordion.Trigger
+      colorScheme={{
+        accent: 'blue',
+        interactive: 'hiContrast2'
+      }}
+    >
+      Accordion Header 1
+    </Accordion.Trigger>
+    <Accordion.Content css={{ p: '$3' }}>
+      <Text>Accordion content 1</Text>
+    </Accordion.Content>
+  </Accordion.Item>
+</Accordion>
+```

package/dist/docs/README.mdx

@@ -0,0 +1,79 @@
+## Color Schemes (v.ALPHA)
+
+`color-scheme/`, is an **internal** component in an alpha stage (usable but not finalised) which introduces a `ColorScheme` component. It has been worked on heavily in terms of considering the required options and logic from dev but is **not finished and needs more design input**.
+
+The problem that this component was introduced to solve is the difficult way we have approached theming so far in our components.
+In the past we have heavily relied on props drilling and passing down theme related stitches variants to children, which means _(1)_ the colours can easily break when the expected children are nested further than directly under the 'theme providing' parent (The component which has a `theme` prop and tries to prop-drill theme). Moreover, _(2)_ we have inconsistent naming for our themes and _(3)_ inconsistent implementations on active components since _(4)_ the theming need to be documented and coded separately for each new component.
+
+This `<ColorScheme />` component allows for `base` (`var(--baseX)`) and `accent` (`var(--accentX)`) theme property, as well as an `interactive` contrast mode to affect all interactable components.
+
+The props are:
+
+- `base` is used for the base colours of the wrapped component: different tones of background and text. It currently only supports the `slate` (grey) colour but can be extended for different base colors.
+- `accent` is used for highlighted elements and interactive elements of the color scheme. It can be used directly but should be used with an interactive theme for interactive elements - see `<Button />`, `Accordion.Trigger` etc. Currently allowed accents are `slate` and `blue`.
+- `interactive` supports 4 versions `loContrast1` and `loContrast2` which on light color schemes are lighter and on a dark mode they would be darker (so low contrast in comparison to the background), and `hiContrast1`, `hiContrast2` which are used for the opposite.
+
+All the color scheme configurations setup used in the component can be found in `color-scheme/src/stitches.colorscheme.config.ts`
+
+The ColorScheme itself works by re-declaring the needed CSS variables any time it's used. It is heavily inpired by both [stitches theming guidelines](https://stitches.dev/docs/theming) and particularly by [the radix colors project](https://www.radix-ui.com/colors) of which it's almost a copy of but with our own colours defined and some aliasing to match the current design use requirements.
+
+Currently in use by a couple of components in library and the full documentation site. This component is subject to change when the Atom Learning colour theming patterns are properly established and we can make final decisions on the colours and API. **There will be changes to this code in the future.**
+
+### Examples
+
+```jsx
+<ColorScheme base="slate" accent="blue" interactive="hiContrast1">
+  <Box css={{ background: '$background', color: '$foreground' }}>
+    Off-black text over a white background
+  </Box>
+  <Box css={{ background: '$base1', color: '$foreground' }}>
+    Off-black text over very slightly grey background
+  </Box>
+  <Box css={{ background: '$base7', color: '$foreground6plus' }}>
+    White text over darker grey background
+  </Box>
+  <Box css={{ background: '$accent1', color: '$foreground' }}>
+    Off-black text over a slightly blue background
+  </Box>
+  <Box css={{ background: '$accent7', color: '$foreground6plus' }}>
+    White text over darker blue background
+  </Box>
+  <Box css={{ background: '$accent9', color: '$foreground6plus' }}>
+    White text over much darker blue background
+  </Box>
+  <Button
+    css={{
+      background: '$interactive1',
+      color: '$interactiveForeground',
+      ['&:hover']: { background: '$interactive2' },
+      ['&:active']: { background: '$interactive3' }
+    }}
+  >
+    Blue button with white text
+  </Button>
+  <ColorScheme
+    interactive="hiContrast2"
+    as={Button}
+    css={{
+      background: '$interactive1',
+      color: '$interactiveForeground',
+      ['&:hover']: { background: '$interactive2' },
+      ['&:active']: { background: '$interactive3' }
+    }}
+  >
+    Darker blue button with white text
+  </ColorScheme>
+  <ColorScheme
+    interactive="loContrast2"
+    as={Button}
+    css={{
+      background: '$interactive1',
+      color: '$interactiveForeground',
+      ['&:hover']: { background: '$interactive2' },
+      ['&:active']: { background: '$interactive3' }
+    }}
+  >
+    Light blue button with off-black text
+  </ColorScheme>
+</ColorScheme>
+```

package/dist/docs/Tabs.mdx

@@ -5,10 +5,12 @@ description: Tabs is a component that provides different sections of content tha
 category: Layout
 ---
 
-The component provides a set of default styles, which can be overwritten by using the `css` prop. It is composed by combining smaller components, such as `Tabs.TriggerList`, `Tabs.Trigger`, and `Tabs.Content`.
+Functionality based on the [`Tab`](https://www.radix-ui.com/docs/primitives/components/tabs) radix component, which already allows for: controlled/uncontrolled tabbing, disabling or partly disabling options, adds keyboard navigation and orientation and more.
+
+Implements experimental ColorScheme component to allow multiple colour setups.
 
 ```tsx preview
-<Tabs defaultValue="tab1" css={{ height: '100px' }}>
+<Tabs defaultValue="tab2">
   <Tabs.TriggerList>
     <Tabs.Trigger value="tab1">
       Nested component under the Tabs.Trigger component
@@ -27,76 +29,48 @@ The component provides a set of default styles, which can be overwritten by usin
 </Tabs>
 ```
 
-It takes a `defaultValue` prop that should match one of the triggers' `value` prop.
-
-```tsx
-<Tabs defaultValue="tab1">
-```
-
-It also takes a `theme` prop that should either be "light" or "dark".
-
-```tsx
-<Tabs theme="light"></Tabs>
-<Tabs theme="dark"></Tabs>
-```
-
-## Tabs.TriggerList
-
-The `Tabs.TriggerList` component simply holds the individual `Tabs.Trigger` components. It can also get custom styling via the `css` prop.
-`Tabs.TriggerList` will automatically show `<` & `>` buttons in case the content is overshooting the available space.
+## Disabled
 
-The default scroll amount for the scroll buttons on the `Tabs.TriggerList` is 10% of the content width. You can set this to any percentage by setting, for example, `scrollPercentage={25}`.
-
-## Tabs.Trigger
-
-The `Tabs.Trigger` component holds the content that will be displayed inside the button that the user would click in order to switch tabs. In can hold either a string, or some other component. It needs to be passed a `value` prop, that would be identical to the `value` prop passed to its corresponding `Tabs.Content` component.
-
-## Tabs.Content
-
-The `Tabs.Content` component, as the name suggests, holds the content for that particular section of the tabs component. It takes a `value` prop that needs to match the `value` prop passed to its corresponding trigger. Its content can be any text or valid component.
-
-## Disabled tab
-
-A `Tabs.Trigger` component can take a `disabled` prop, which would make it unselectable. The corresponding `Tabs.Content` component's content will be, in this case, permanently hidden.
+A `Tabs.Trigger` component can take a `disabled` prop, which would make it unselectable.
+The corresponding `Tabs.Content` component's content will be, in this case, permanently hidden.
 
 ```tsx preview
-<Tabs>
+<Tabs defaultValue="tab1">
   <Tabs.TriggerList>
     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
-    <Tabs.Trigger disabled value="tab2">
+    <Tabs.Trigger value="tab2" disabled>
       Tab 2
     </Tabs.Trigger>
   </Tabs.TriggerList>
-  <Tabs.Content value="tab1">Content for tab 1</Tabs.Content>
-  <Tabs.Content value="tab2">Content for the second tab.</Tabs.Content>
+  <Tabs.Content css={{ p: '$3' }} value="tab1">
+    <Text>Content for tab1.</Text>
+  </Tabs.Content>
+  <Tabs.Content css={{ p: '$3' }} value="tab2">
+    <Text>Content for tab2.</Text>
+  </Tabs.Content>
 </Tabs>
 ```
 
-## Styling the `Tabs.TriggerList`
+## Color Scheme
 
-The trigger list accepts an appearance property to apply uppercase to all tabs. Simply pass `appearance='uppercase'`.
+You can pass in a `colorScheme` object to the TriggerList to customise the colours of the component.
+Defaults to `{ base: "slate", accent: "blue", interactive: "hiContrast1"}`
+ColorScheme is experimental and has been implemented only locally but you can read more about how it
+currently works and available options [on the repository's github](https://github.com/Atom-Learning/components/tree/main/lib/src/experiments/color-scheme#readme).
 
-```tsx preview
-<Tabs>
-  <Tabs.TriggerList appearance="uppercase">
+```tsx preview live
+<Tabs defaultValue="tab2">
+  <Tabs.TriggerList
+    colorScheme={{ base: 'slate', accent: 'slate', interactive: 'hiContrast2' }}
+  >
     <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
     <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
   </Tabs.TriggerList>
-  <Tabs.Content value="tab1">Content for tab 1</Tabs.Content>
-  <Tabs.Content value="tab2">Content for the second tab.</Tabs.Content>
+  <Tabs.Content css={{ p: '$3' }} value="tab1">
+    <Text>Content for tab1.</Text>
+  </Tabs.Content>
+  <Tabs.Content css={{ p: '$3' }} value="tab2">
+    <Text>Content for tab2.</Text>
+  </Tabs.Content>
 </Tabs>
 ```
-
-## Styling the `Tabs.Trigger`
-
-In order to style the different states of a trigger, the following CSS selectors need to be used when passed to the `css` prop:
-
-`&:hover` to style the hover state of the trigger.
-
-`&[data-disabled]` to style a disabled trigger.
-
-`&[data-disabled]:hover` to style a disabled trigger's hover state.
-
-`&[data-state="active"]` to style an active trigger.
-
-If the content of the trigger is, say, a `<Text>` component instead of a string, you can append the `*` symbol or any other child/sibling selectors, to make sure that any nested content is styled accordingly. You can also simply style the nested child component directly via its own `css` prop.

package/dist/experiments/color-scheme/ColorScheme.d.ts

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { bases, accents } from './stitches.colorscheme.config';
+declare type TColorSchemeOwnProps = {
+    base?: keyof typeof bases;
+    accent?: keyof typeof accents;
+    interactive?: 'loContrast1' | 'loContrast2' | 'hiContrast1' | 'hiContrast2';
+    asChild?: boolean;
+};
+declare const StyledColorScheme: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    reducedMotion: string;
+    allowMotion: string;
+    hover: string;
+}, {
+    colors: {
+        slate1: any;
+        slate2: any;
+        slate3: any;
+        slate4: any;
+        slate5: any;
+        slate6: any;
+        slate7: any;
+        slate8: any;
+        slate9: any;
+        slate10: any;
+        blue1: any;
+        blue2: any;
+        blue3: any;
+        blue4: any;
+        blue5: any;
+        blue6: any;
+        blue7: any;
+        blue8: any;
+        blue9: any;
+        blue10: any;
+        background: any;
+        foreground: any;
+        foreground6plus: any;
+    };
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    bg: (value: import("@stitches/react/types/css-util").WithPropertyValue<"background">) => {
+        background: import("@stitches/react/types/css-util").WithPropertyValue<"background">;
+    };
+    size: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">) => {
+        height: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+        width: string | number | import("@stitches/react/types/css-util").WithScaleValue<"size">;
+    };
+    p: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        padding: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    pl: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    px: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    py: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        paddingTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        paddingBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    m: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        margin: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mt: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mr: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mb: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    ml: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    mx: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginLeft: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginRight: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+    my: (value: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">) => {
+        marginTop: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+        marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
+    };
+}>>;
+declare type TColorSchemeProps = React.ComponentProps<typeof StyledColorScheme> & TColorSchemeOwnProps;
+/**
+ * @experimental Component has not been finalised. Further design input required. Use with caution.
+ */
+export declare const ColorScheme: React.ForwardRefExoticComponent<Pick<TColorSchemeProps, "css" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | keyof TColorSchemeOwnProps> & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/experiments/color-scheme/ColorScheme.js

@@ -0,0 +1 @@
+import*as o from"react";import{styled as f,colorSchemes as e}from"./stitches.colorscheme.config.js";import{Slot as d}from"@radix-ui/react-slot";const p=f("div"),r=o.forwardRef(({base:t="",accent:a="",interactive:c="",className:m,asChild:s=!1,...i},l)=>{const n=[m,e[`interactive-${c}`],e[`accent-${a}`],e[`base-${t}`]].filter(Boolean).join(" ");return o.createElement(s?d:p,{ref:l,className:n,...i})});r.displayName="ColorScheme";export{r as ColorScheme};

package/dist/experiments/color-scheme/blue.json.js

@@ -0,0 +1 @@
+var e="#F3F8FF",l="#E5F1FF",u="#D6EAFF",b="#C2DEFF",F="#B3D4FA",a="#057AFF",r="#0F67F5",v="#194DCC",D="#102DA3",A="#15235E",E={blue1:e,blue2:l,blue3:u,blue4:b,blue5:F,blue6:a,blue7:r,blue8:v,blue9:D,blue10:A};export{e as blue1,A as blue10,l as blue2,u as blue3,b as blue4,F as blue5,a as blue6,r as blue7,v as blue8,D as blue9,E as default};

package/dist/experiments/color-scheme/generateAlphaColors.d.ts

@@ -0,0 +1 @@
+export declare const generateAlphaColors: (colorName: string, colors: Record<string, string>) => Record<string, string>;

package/dist/experiments/color-scheme/generateAlphaColors.js

@@ -0,0 +1 @@
+import{parseToRgba as u}from"color2k";const M=[255,255,255,1],r=[.05,.1,.15,.2,.27,.35,.5,.7,.8,.95],n=a=>Math.round(Math.max(Math.min(a,255),0)),$=(a,h)=>{const e={};return Object.entries(h).forEach(([f,i],o)=>{const[m,p,b]=u(i),[t,s,c]=M,g=[n((m-t)/r[o]+t),n((p-s)/r[o]+s),n((b-c)/r[o]+c),r[o]];e[`${a}A${o+1}`]=`rgba(${g.join(",")})`}),e};export{$ as generateAlphaColors};

package/dist/experiments/color-scheme/index.d.ts

@@ -0,0 +1 @@
+export { ColorScheme } from './ColorScheme';

package/dist/experiments/color-scheme/slate.json.js

@@ -0,0 +1 @@
+var a="#F6F6F6",e="#EBEBEB",t="#E0E0E0",l="#CECECE",s="#C2C2C2",r="#757575",v="#545454",C="#333333",E="#1F1F1F",F="#1C1C1C",B={slate1:a,slate2:e,slate3:t,slate4:l,slate5:s,slate6:r,slate7:v,slate8:C,slate9:E,slate10:F};export{B as default,a as slate1,F as slate10,e as slate2,t as slate3,l as slate4,s as slate5,r as slate6,v as slate7,C as slate8,E as slate9};