npm - @marigold/system - Versions diffs - 0.3.0 → 0.3.1 - Mend

@marigold/system 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md +17 -55
package/dist/SVG.stories.d.ts +5 -0
package/package.json +1 -1
package/src/{SVG.stories.mdx → SVG.stories.tsx} +8 -15
package/src/Colors.stories.mdx +0 -499
package/src/concepts-principles.mdx +0 -84

package/CHANGELOG.md CHANGED Viewed

@@ -1,95 +1,57 @@
 # @marigold/system
-## 0.3.0
-### Minor Changes
-- [#1163](https://github.com/marigold-ui/marigold/pull/1163) [`51af6693`](https://github.com/marigold-ui/marigold/commit/51af669330fd52e4e31fe5ad71d2b202ab8d2231) Thanks [@sebald](https://github.com/sebald)! - feat(system): Expose helper to transpile style object
+## 0.3.1
 ### Patch Changes
+- [#1676](https://github.com/marigold-ui/marigold/pull/1676) [`379041bc`](https://github.com/marigold-ui/marigold/commit/379041bc7d4502bca98029a95afe43ce693222cd) Thanks [@ti10le](https://github.com/ti10le)! - remove the last mdx stories
+## 0.3.0
-- [#1549](https://github.com/marigold-ui/marigold/pull/1549) [`c030aa85`](https://github.com/marigold-ui/marigold/commit/c030aa85156356c294bafe9831024f6b6f2ce4db) Thanks [@sebald](https://github.com/sebald)! - refa: use emotion's theme function in <Element>
+### Minor Changes
+- [#1163](https://github.com/marigold-ui/marigold/pull/1163) [`51af6693`](https://github.com/marigold-ui/marigold/commit/51af669330fd52e4e31fe5ad71d2b202ab8d2231) Thanks [@sebald](https://github.com/sebald)! - feat(system): Expose helper to transpile style object
-- [#1515](https://github.com/marigold-ui/marigold/pull/1515) [`8eda245f`](https://github.com/marigold-ui/marigold/commit/8eda245f01a918fcdaa9f0ac211889ed869aa375) Thanks [@sebald](https://github.com/sebald)! - feat: add normalization for body and html & fix emotion leak
+### Patch Changes
+- [#1549](https://github.com/marigold-ui/marigold/pull/1549) [`c030aa85`](https://github.com/marigold-ui/marigold/commit/c030aa85156356c294bafe9831024f6b6f2ce4db) Thanks [@sebald](https://github.com/sebald)! - refa: use emotion's theme function in <Element>
+* [#1515](https://github.com/marigold-ui/marigold/pull/1515) [`8eda245f`](https://github.com/marigold-ui/marigold/commit/8eda245f01a918fcdaa9f0ac211889ed869aa375) Thanks [@sebald](https://github.com/sebald)! - feat: add normalization for body and html & fix emotion leak
 - [#1491](https://github.com/marigold-ui/marigold/pull/1491) [`5a04de11`](https://github.com/marigold-ui/marigold/commit/5a04de110637d004f5824679697ee4d6a90eaf34) Thanks [@ti10le](https://github.com/ti10le)! - remove useStyles from Element
-- [#1440](https://github.com/marigold-ui/marigold/pull/1440) [`c1da52c0`](https://github.com/marigold-ui/marigold/commit/c1da52c0f035b141608fd606e6ba3bc2b5482dc1) Thanks [@ti10le](https://github.com/ti10le)! - feature: use Element in Box + necessary fix changes
+* [#1440](https://github.com/marigold-ui/marigold/pull/1440) [`c1da52c0`](https://github.com/marigold-ui/marigold/commit/c1da52c0f035b141608fd606e6ba3bc2b5482dc1) Thanks [@ti10le](https://github.com/ti10le)! - feature: use Element in Box + necessary fix changes
 - [#1591](https://github.com/marigold-ui/marigold/pull/1591) [`1448ddca`](https://github.com/marigold-ui/marigold/commit/1448ddcaa0f647f48b018fa74a8686af30eccc53) Thanks [@sebald](https://github.com/sebald)! - feat(jest): Improve snapshot readability
-- [#1514](https://github.com/marigold-ui/marigold/pull/1514) [`5107b943`](https://github.com/marigold-ui/marigold/commit/5107b943cb3085eb3137d84e79966acad6173a26) Thanks [@sebald](https://github.com/sebald)! - feat(system): Use emotion's context
+* [#1514](https://github.com/marigold-ui/marigold/pull/1514) [`5107b943`](https://github.com/marigold-ui/marigold/commit/5107b943cb3085eb3137d84e79966acad6173a26) Thanks [@sebald](https://github.com/sebald)! - feat(system): Use emotion's context
 - [#1647](https://github.com/marigold-ui/marigold/pull/1647) [`cd3a0d3e`](https://github.com/marigold-ui/marigold/commit/cd3a0d3edb3f2ddc1f561e8007e1c20000f7855a) Thanks [@ti10le](https://github.com/ti10le)! - feat: conditional function to allow state props in variants
-- [#1230](https://github.com/marigold-ui/marigold/pull/1230) [`ebd6e26f`](https://github.com/marigold-ui/marigold/commit/ebd6e26f71f675b98b663bc45c6a2d5badddcd47) Thanks [@viktoria-schwarz](https://github.com/viktoria-schwarz)! - feat: add GlobalStyles via theme
+* [#1230](https://github.com/marigold-ui/marigold/pull/1230) [`ebd6e26f`](https://github.com/marigold-ui/marigold/commit/ebd6e26f71f675b98b663bc45c6a2d5badddcd47) Thanks [@viktoria-schwarz](https://github.com/viktoria-schwarz)! - feat: add GlobalStyles via theme
 - [#1563](https://github.com/marigold-ui/marigold/pull/1563) [`6e485f5a`](https://github.com/marigold-ui/marigold/commit/6e485f5a8800094fe54c075a2b21f8abe726b3cd) Thanks [@sebald](https://github.com/sebald)! - feat: Introduce a `Theme` with all available scales
-- [#1620](https://github.com/marigold-ui/marigold/pull/1620) [`80a2abe5`](https://github.com/marigold-ui/marigold/commit/80a2abe5804ba2c5a48cc6b05211245c37baf266) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): extend Box to handle __default variants
+* [#1620](https://github.com/marigold-ui/marigold/pull/1620) [`80a2abe5`](https://github.com/marigold-ui/marigold/commit/80a2abe5804ba2c5a48cc6b05211245c37baf266) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): extend Box to handle \_\_default variants
 - [#1579](https://github.com/marigold-ui/marigold/pull/1579) [`e13e3cc1`](https://github.com/marigold-ui/marigold/commit/e13e3cc1fc66b261209973b1fc90eb48117076e9) Thanks [@ti10le](https://github.com/ti10le)! - feat: remove Heading from marigold
-- [#1622](https://github.com/marigold-ui/marigold/pull/1622) [`1829cf17`](https://github.com/marigold-ui/marigold/commit/1829cf17e16c574e5577b3e1709c34dc7ed4faaf) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Card default variant
+* [#1622](https://github.com/marigold-ui/marigold/pull/1622) [`1829cf17`](https://github.com/marigold-ui/marigold/commit/1829cf17e16c574e5577b3e1709c34dc7ed4faaf) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Card default variant
 - [#1501](https://github.com/marigold-ui/marigold/pull/1501) [`1c1f8648`](https://github.com/marigold-ui/marigold/commit/1c1f864820a060214406ef711f4ed873746c16c4) Thanks [@ti10le](https://github.com/ti10le)! - feat(storybook): remove use styles stories
-- [#1190](https://github.com/marigold-ui/marigold/pull/1190) [`a00b7eb9`](https://github.com/marigold-ui/marigold/commit/a00b7eb971131634414d3912d059fb505bb7a370) Thanks [@sebald](https://github.com/sebald)! - fix(system): List reset should not remove the enumeration
+* [#1190](https://github.com/marigold-ui/marigold/pull/1190) [`a00b7eb9`](https://github.com/marigold-ui/marigold/commit/a00b7eb971131634414d3912d059fb505bb7a370) Thanks [@sebald](https://github.com/sebald)! - fix(system): List reset should not remove the enumeration
 - [#1499](https://github.com/marigold-ui/marigold/pull/1499) [`ec5baf85`](https://github.com/marigold-ui/marigold/commit/ec5baf85a9a0f82a4fca5bbd1e1680316c186593) Thanks [@sebald](https://github.com/sebald)! - feat: Update and simplify normalization
-- [#1652](https://github.com/marigold-ui/marigold/pull/1652) [`0bb8f19e`](https://github.com/marigold-ui/marigold/commit/0bb8f19ebdec0e2f9dc3f6164f4373cac5c10880) Thanks [@sebald](https://github.com/sebald)! - refa(system): Groupt variant related fns in own file
+* [#1652](https://github.com/marigold-ui/marigold/pull/1652) [`0bb8f19e`](https://github.com/marigold-ui/marigold/commit/0bb8f19ebdec0e2f9dc3f6164f4373cac5c10880) Thanks [@sebald](https://github.com/sebald)! - refa(system): Groupt variant related fns in own file
 - [#1436](https://github.com/marigold-ui/marigold/pull/1436) [`c4ae5c5c`](https://github.com/marigold-ui/marigold/commit/c4ae5c5ca442f93034ff8f4c70adc295547951d4) Thanks [@ti10le](https://github.com/ti10le)! - create Element component + normalize file
-- [#1508](https://github.com/marigold-ui/marigold/pull/1508) [`a1ef2108`](https://github.com/marigold-ui/marigold/commit/a1ef2108dd6c8e6838b517dd58c82d38e71dae2b) Thanks [@sebald](https://github.com/sebald)! - feat: Add default styling to `<Element>`
+* [#1508](https://github.com/marigold-ui/marigold/pull/1508) [`a1ef2108`](https://github.com/marigold-ui/marigold/commit/a1ef2108dd6c8e6838b517dd58c82d38e71dae2b) Thanks [@sebald](https://github.com/sebald)! - feat: Add default styling to `<Element>`
 - [#1621](https://github.com/marigold-ui/marigold/pull/1621) [`2f7b936f`](https://github.com/marigold-ui/marigold/commit/2f7b936f5b07eade00a51cb138c3c492f1e08c9d) Thanks [@ti10le](https://github.com/ti10le)! - feat(comp): change Badge default variant
-- [#1550](https://github.com/marigold-ui/marigold/pull/1550) [`846eb640`](https://github.com/marigold-ui/marigold/commit/846eb640ad035c7f3410b4a8a451f8de56e62339) Thanks [@sebald](https://github.com/sebald)! - feat: Merge <Box> and <Element>
+* [#1550](https://github.com/marigold-ui/marigold/pull/1550) [`846eb640`](https://github.com/marigold-ui/marigold/commit/846eb640ad035c7f3410b4a8a451f8de56e62339) Thanks [@sebald](https://github.com/sebald)! - feat: Merge <Box> and <Element>
 - [#1614](https://github.com/marigold-ui/marigold/pull/1614) [`5d63cd9c`](https://github.com/marigold-ui/marigold/commit/5d63cd9c14578787083c82c85d93bbd2ff0efac6) Thanks [@ti10le](https://github.com/ti10le)! - remove all purple color things

package/dist/SVG.stories.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+import type { ComponentStory } from '@storybook/react';
+import { SVG } from './SVG';
+declare const _default: import("@storybook/csf").ComponentAnnotations<import("@storybook/react").ReactFramework, import("@storybook/react").Args>;
+export default _default;
+export declare const Basic: ComponentStory<typeof SVG>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@marigold/system",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Marigold System Library",
   "main": "dist/index.js",
   "module": "dist/system.esm.js",

package/src/{SVG.stories.mdx → SVG.stories.tsx} RENAMED Viewed

@@ -1,9 +1,10 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { SVG } from './SVG';
-<Meta
-  title="Components/SVG"
-  argTypes={{
+export default {
+  title: 'Components/SVG',
+  argTypes: {
     variant: {
       control: {
         type: 'text',
@@ -37,19 +38,11 @@ import { SVG } from './SVG';
         },
       },
     },
-  }}
-/>
+  },
+} as Meta;
-# SVG
-export const Template = args => (
+export const Basic: ComponentStory<typeof SVG> = args => (
   <SVG {...args}>
     <path d="M9.9 20.113V13.8415H14.1V20.113H19.35V11.751H22.5L12 2.34375L1.5 11.751H4.65V20.113H9.9Z" />
   </SVG>
 );
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-<ArgsTable story="Default" />

package/src/Colors.stories.mdx DELETED Viewed

@@ -1,499 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { Box, Column, Columns, Container, Text } from '@marigold/components';
-<Meta title="Tokens/Marigold Colours" />
-# Colours
-## B2B Theme
-<Canvas>
-  <Story name="B2B Theme">
-    <Columns space={16}>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Gray
-        </Text>
-        <Box
-          as={Container}
-          bg="#ffffff"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray00</Text>
-          <Text>#ffffff</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fafafa"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray10</Text>
-          <Text>#fafafa</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#f3f3f3"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray20</Text>
-          <Text>#f3f3f3</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#e3e3e3"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray30</Text>
-          <Text>#e3e3e3</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#cccccc"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray40</Text>
-          <Text>#cccccc</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#8d8d8d"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray50</Text>
-          <Text>#8d8d8d</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#6d6d6d"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray60</Text>
-          <Text>#6d6d6d</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#4b4b4b"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray70 (Text Black)</Text>
-          <Text>#4b4b4b</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#2b2b2b"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray80</Text>
-          <Text>#2b2b2b</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#0f0f0f"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Gray90</Text>
-          <Text>#0f0f0f</Text>
-        </Box>
-      </Column>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Orange
-        </Text>
-        <Box
-          as={Container}
-          bg="#fff8f1"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange10</Text>
-          <Text>#fff8f1</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fdcca0"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange20</Text>
-          <Text>#fdcca0</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#f8ac67"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange40</Text>
-          <Text>#f8ac67</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fa8005"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange60 (Primary)</Text>
-          <Text>#fa8005</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#ea5200"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange70</Text>
-          <Text>#ea5200</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#ae440a"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Orange80</Text>
-          <Text>#ae440a</Text>
-        </Box>
-      </Column>
-    </Columns>
-    <Columns space={16}>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Blue
-        </Text>
-        <Box
-          as={Container}
-          bg="#e8f4fa"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue10</Text>
-          <Text>#e8f4fa</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#c1f0fc"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue20</Text>
-          <Text>#c1f0fc</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#67dfff"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue40</Text>
-          <Text>#67dfff</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#3ab3d5"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue60</Text>
-          <Text>#3ab3d5</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#1d67b6"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue70</Text>
-          <Text>#1d67b6</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#fafafa"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Blue80</Text>
-          <Text>#0c3a6b</Text>
-        </Box>
-      </Column>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Green
-        </Text>
-        <Box
-          as={Container}
-          bg="#f9fed0"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green10</Text>
-          <Text>#f9fed0</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#e8f57b"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green20</Text>
-          <Text>#e8f57b</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#bacb2a"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green40</Text>
-          <Text>#bacb2a</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#8bbd26"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green60</Text>
-          <Text>#8bbd26</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#44a112"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green70</Text>
-          <Text>#44a112</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#215107"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Green80</Text>
-          <Text>#215107</Text>
-        </Box>
-      </Column>
-    </Columns>
-    <Columns space={16}>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Red
-        </Text>
-        <Box
-          as={Container}
-          bg="#fff8f8"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red10</Text>
-          <Text>#fff8f8</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fec8c9"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red20</Text>
-          <Text>#fec8c9</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#f38a8a"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red40</Text>
-          <Text>#f38a8a</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#dd4142"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red60</Text>
-          <Text>#dd4142</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#8b0027"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red70</Text>
-          <Text>#8b0027</Text>
-        </Box>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#4d0419"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Red80</Text>
-          <Text>#4d0419</Text>
-        </Box>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>
-## Unicorn Theme
-<Canvas>
-  <Story name="Unicorn Theme">
-    <Columns space={16}>
-      <Column width={6}>
-        <Text as="h2" variant="headline2">
-          Base Colours
-        </Text>
-        <Box
-          as={Container}
-          css={{ color: 'white' }}
-          bg="#070708"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Text</Text>
-          <Text>#070708</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fdfcfd"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Background</Text>
-          <Text>#fdfcfd</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#c9b1ff"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Primary</Text>
-          <Text>#c9b1ff</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#ffcaf2"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Secondary</Text>
-          <Text>#ffcaf2</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#e9e7eb"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Disabled</Text>
-          <Text>#e9e7eb</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#ffb2b1"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Error</Text>
-          <Text>#ffb2b1</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#fff3ad"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Warning</Text>
-          <Text>#fff3ad</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#a2edff"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Info</Text>
-          <Text>#a2edff</Text>
-        </Box>
-        <Box
-          as={Container}
-          bg="#bcffbc"
-          p="8px"
-          display="flex"
-          justifyContent="space-between"
-        >
-          <Text>Success</Text>
-          <Text>#bcffbc</Text>
-        </Box>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>

package/src/concepts-principles.mdx DELETED Viewed

@@ -1,84 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-<Meta title="Guides/Concepts & Principles" />
-## Design Tokens
-The term _design tokens_ originates from the [Lightning Design System](https://www.lightningdesignsystem.com/design-tokens/). They are the "visual design atoms" of a design system. Similar to variables in CSS or Sass, design tokens are used to capture low-level values and then used to create the look and feel of your product. This helps with maintaining a consistent and scalable visual system for UI development.
-```css
-/* button.css */
-.button {
-  color: #1f1235;
-  background: #ff6e6c;
-  height: 24px;
-}
-```
-```scss
-/* colors.scss */
-$color-primary: #ff6e6c;
-$color-text: #1f1235;
-/* sizes.scss */
-$size-6: 24px;
-/* button.scss */
-.button {
-  color: $color-text;
-  background: $color-primary;
-  height: $size-6;
-}
-```
-_Read more:_
-- [Lightning Design System: Design Tokens](https://www.lightningdesignsystem.com/design-tokens/)
-- [CSS Tricks: What are Design Tokens?](https://css-tricks.com/what-are-design-tokens/)
-## Rhythm & Harmony
-Instead of choosing arbitrary numbers for our typography, we make use of a _modular scale_. "By using culturally relevant, historically pleasing ratios to create modular scales and basing the measurements in our compositions on values from those scales, we can achieve a visual harmony not found in layouts that use arbitrary, conventional, or easily divisible numbers." ([_More Meaningful Typography_](https://alistapart.com/article/more-meaningful-typography/))
-Applied to web typography, this means we choose a base font size and apply a ratio to it. The ratio is then squared to generate an ascending scale.
-```scss
-/* perfect fifth */
-$ratio: 1.5;
-/* browser default */
-$base: 16px;
-/**
- * The formular is always "$base * $ratio ** $level", the level is a integer.
- * The resulting value is usually rounded to avoid poor sub-pixel rendering.
- *
- * Note that in the below example the number is not equal to the $level in
- * the formula.
- */
-$fontSize-0: 10px;
-$fontSize-1: 16px;
-$fontSize-2: 24px;
-$fontSize-3: 36px;
-/* etc.  */
-```
-A similar concept can be applied to spacing and sizing of elements. To maintain a aesthetically pleasing rhythm between elements, we adopt the _8pt grid_. This means that multiples of 8 are used to define dimensions, paddings and margins. As a result, all of our measurements follow the same rule and we automatically get a more consistent UI.
-```scss
-/* 8pt grid */
-$size-0: 0px;
-$size-1: 8px;
-$size-2: 16px;
-$size-3: 32px;
-$size-4: 64px;
-$size-5: 128px;
-$size-6: 256px;
-$size-7: 512px;
-```
-Read more:
-- [A List Apart: More Meaningful Typography](https://alistapart.com/article/more-meaningful-typography/)
-- [Type Scale Calculator](https://type-scale.com/)
-- [Bryn Jackson's 8-Point Grid](https://spec.fm/specifics/8-pt-grid)