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

package/dist/docs/Accordion.mdx

@@ -73,7 +73,7 @@ The corresponding `Accordion.Content` component's content will be, in this case,
 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/color-scheme#readme).
+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">

package/dist/docs/Badge.mdx

@@ -7,7 +7,7 @@ category: Feedback
 
 The `Badge` component can be used to highlight a short piece of information, like a status.
 
-```tsx preview
+```tsx preview live
 <Badge>New Data</Badge>
 ```
 

package/dist/docs/Button.mdx

@@ -55,14 +55,6 @@ When using a button to request data or fire an action that has a potential delay
 <Button isLoading> Hello world</Button>
 ```
 
-## Rounded Variant
-
-Setting `isRounded` creates a rounded button
-
-```tsx live
-<Button isRounded>Rounded Button</Button>
-```
-
 ## Polymorphism
 
 The `Button` component supports polymorphism, therefore depending on whether it receives an `onClick`/`href` as a prop, it will produce a `button` or `link` respectively

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

@@ -56,7 +56,7 @@ The corresponding `Tabs.Content` component's content will be, in this case, perm
 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/color-scheme#readme).
+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
 <Tabs defaultValue="tab2">

package/dist/docs/ToggleGroup.mdx

@@ -15,7 +15,7 @@ Extends visually by allowing for different sizing, vertical/horizontal display a
 
 `orientation="vertical | horizontal"`
 
-```jsx preview
+```jsx preview live
 <ToggleGroup.Root type="multiple" orientation="vertical">
   <ToggleGroup.Button value="a">A</ToggleGroup.Button>
   <ToggleGroup.Button value="b">B</ToggleGroup.Button>

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

@@ -0,0 +1,201 @@
+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: {
+        readonly [$$PropertyValue]: "background";
+    }) => {
+        background: {
+            readonly [$$PropertyValue]: "background";
+        };
+    };
+    inset: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        top: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        right: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        bottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        left: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: string | number | {
+        readonly [$$ScaleValue]: "size";
+    }) => {
+        height: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+        width: string | number | {
+            readonly [$$ScaleValue]: "size";
+        };
+    };
+    p: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        padding: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    pl: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    px: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    py: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        paddingTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        paddingBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    m: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: string | number | {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: string | number | {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: string | number | {
+            readonly [$$ScaleValue]: "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};