@marigold/system 0.1.0 → 0.3.2

package/src/Colors.stories.mdx

@@ -1,455 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-
-<Meta title="Colours" />
-
-# Colours
-
-The following colours are used in the b2b-theme.
-
-## Colour Values
-
-<Canvas>
-  <Story name="Gray">
-    <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-      <h2>Gray</h2>
-      <div style={{ display: 'inline-block', width: '260px' }}>
-        <div
-          style={{
-            background: '#ffffff',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray00</span>
-          <span>#ffffff</span>
-        </div>
-        <div
-          style={{
-            background: '#fafafa',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray10</span>
-          <span>#fafafa</span>
-        </div>
-        <div
-          style={{
-            background: '#f3f3f3',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray20</span>
-          <span>#f3f3f3</span>
-        </div>
-        <div
-          style={{
-            background: '#e3e3e3',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray30</span>
-          <span>#e3e3e3</span>
-        </div>
-        <div
-          style={{
-            background: '#cccccc',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray40</span>
-          <span>#cccccc</span>
-        </div>
-        <div
-          style={{
-            background: '#8d8d8d',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray50</span>
-          <span>#8d8d8d</span>
-        </div>
-        <div
-          style={{
-            background: '#6d6d6d',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray60</span>
-          <span>#6d6d6d</span>
-        </div>
-        <div
-          style={{
-            background: '#4b4b4b',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray70 (Text Black)</span>
-          <span>#4b4b4b</span>
-        </div>
-        <div
-          style={{
-            background: '#2b2b2b',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray80</span>
-          <span>#2b2b2b</span>
-        </div>
-        <div
-          style={{
-            background: '#0f0f0f',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Gray90</span>
-          <span>#0f0f0f</span>
-        </div>
-      </div>
-    </div>
-  </Story>
-  <Story name="Orange">
-    <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-      <h2>Orange</h2>
-      <div style={{ display: 'inline-block', width: '260px' }}>
-        <div
-          style={{
-            background: '#fff8f1',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Orange10</span>
-          <span>#fff8f1</span>
-        </div>
-        <div
-          style={{
-            background: '#fdcca0',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Orange20</span>
-          <span>#fdcca0</span>
-        </div>
-        <div
-          style={{
-            background: '#f8ac67',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Orange40</span>
-          <span>#f8ac67</span>
-        </div>
-        <div
-          style={{
-            background: '#fa8005',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Orange60 (Primary)</span>
-          <span>#fa8005</span>
-        </div>
-        <div
-          style={{
-            background: '#ea5200',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Orange70</span>
-          <span>#ea5200</span>
-        </div>
-        <div
-          style={{
-            background: '#ae440a',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Orange80</span>
-          <span>#ae440a</span>
-        </div>
-      </div>
-    </div>
-  </Story>
-  <Story name="Blue">
-    <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-      <h2>Blue</h2>
-      <div style={{ display: 'inline-block', width: '260px' }}>
-        <div
-          style={{
-            background: '#e8f4fa',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Blue10</span>
-          <span>#e8f4fa</span>
-        </div>
-        <div
-          style={{
-            background: '#c1f0fc',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Blue20</span>
-          <span>#c1f0fc</span>
-        </div>
-        <div
-          style={{
-            background: '#67dfff',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Blue40</span>
-          <span>#67dfff</span>
-        </div>
-        <div
-          style={{
-            background: '#3ab3d5',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Blue60</span>
-          <span>#3ab3d5</span>
-        </div>
-        <div
-          style={{
-            background: '#1d67b6',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Blue70</span>
-          <span>#1d67b6</span>
-        </div>
-        <div
-          style={{
-            background: '#0c3a6b',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Blue80</span>
-          <span>#0c3a6b</span>
-        </div>
-      </div>
-    </div>
-  </Story>
-  <Story name="Green">
-    <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-      <h2>Green</h2>
-      <div style={{ display: 'inline-block', width: '260px' }}>
-        <div
-          style={{
-            background: '#f9fed0',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Green10</span>
-          <span>#f9fed0</span>
-        </div>
-        <div
-          style={{
-            background: '#e8f57b',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Green20</span>
-          <span>#e8f57b</span>
-        </div>
-        <div
-          style={{
-            background: '#bacb2a',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Green40</span>
-          <span>#bacb2a</span>
-        </div>
-        <div
-          style={{
-            background: '#8bbd26',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Green60</span>
-          <span>#8bbd26</span>
-        </div>
-        <div
-          style={{
-            background: '#44a112',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Green70</span>
-          <span>#44a112</span>
-        </div>
-        <div
-          style={{
-            background: '#215107',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Green80</span>
-          <span>#215107</span>
-        </div>
-      </div>
-    </div>
-  </Story>
-  <Story name="Red">
-    <div style={{ padding: '0.5rem 1rem', fontFamily: 'Inter' }}>
-      <h2>Red</h2>
-      <div style={{ display: 'inline-block', width: '260px' }}>
-        <div
-          style={{
-            background: '#fff8f8',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Red10</span>
-          <span>#fff8f8</span>
-        </div>
-        <div
-          style={{
-            background: '#fec8c9',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Red20</span>
-          <span>#fec8c9</span>
-        </div>
-        <div
-          style={{
-            background: '#f38a8a',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Red40</span>
-          <span>#f38a8a</span>
-        </div>
-        <div
-          style={{
-            background: '#dd4142',
-            color: 'black',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Red60</span>
-          <span>#dd4142</span>
-        </div>
-        <div
-          style={{
-            background: '#8b0027',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Red70</span>
-          <span>#8b0027</span>
-        </div>
-        <div
-          style={{
-            background: '#4d0419',
-            color: 'white',
-            padding: '8px',
-            display: 'flex',
-            justifyContent: 'space-between',
-          }}
-        >
-          <span>Red80</span>
-          <span>#4d0419</span>
-        </div>
-      </div>
-    </div>
-  </Story>
-</Canvas>

package/src/cache.ts

@@ -1,4 +0,0 @@
-/**
- * Expose cache from emotion so we can use the same cache when doing SSR.
- */
-export { cache } from '@emotion/css';

package/src/concepts-principles.mdx

@@ -1,84 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<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)

package/src/reset.ts

@@ -1,108 +0,0 @@
-import { css } from '@emotion/css';
-
-const base = css({
-  boxSizing: 'border-box',
-  margin: 0,
-  padding: 0,
-  minWidth: 0,
-  fontSize: '100%',
-  font: 'inherit',
-  verticalAlign: 'baseline',
-  WebkitTapHighlightColor: 'transparent',
-});
-
-// Content
-// ---------------
-const block = css({
-  display: 'block',
-});
-
-const list = css({
-  listStyle: 'none',
-});
-
-const table = css({
-  borderCollapse: 'collapse',
-  borderSpacing: 0,
-});
-
-// Typography
-// ---------------
-const a = css({
-  textDecoration: 'none',
-  touchAction: 'manipulation'
-});
-
-const quote = css({
-  quotes: 'none',
-  selectors: {
-    '&:before, &:after': {
-      content: "''",
-    },
-  },
-});
-
-// Form Elements
-// ---------------
-const button = css({
-  display: 'block',
-  appearance: 'none',
-  background: 'transparent',
-  textAlign: 'center',
-  touchAction: 'manipulation'
-});
-
-const input = css({
-  display: 'block',
-  appearance: 'none',
-  selectors: {
-    '&::-ms-clear': {
-      display: 'none',
-    },
-    '&::-webkit-search-cancel-button': {
-      WebkitAppearance: 'none',
-    },
-  },
-});
-
-const select = css({
-  display: 'block',
-  appearance: 'none',
-  selectors: {
-    '&::-ms-expand': {
-      display: 'none',
-    },
-  },
-});
-
-const textarea = css({
-  display: 'block',
-  appearance: 'none',
-});
-
-// Reset
-// ---------------
-export const reset = {
-  article: block,
-  aside: block,
-  details: block,
-  figcaption: block,
-  figure: block,
-  footer: block,
-  header: block,
-  hgroup: block,
-  menu: block,
-  nav: block,
-  section: block,
-  ul: list,
-  ol: list,
-  blockquote: quote,
-  q: quote,
-  a,
-  base,
-  table,
-  select,
-  button,
-  textarea,
-  input,
-} as const;