Merge pull request #13 from blue-tomato/develop

0.1.7

.storybook/main.ts

@@ -1,5 +1,7 @@
+import { resolve } from "node:path";
 import type { StorybookConfig } from "@storybook/react-vite";
 import { mergeConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 const config: StorybookConfig = {
  addons: [
@@ -12,6 +14,12 @@ const config: StorybookConfig = {
  viteFinal: (config) =>
  mergeConfig(config, {
  css: { modules: { localsConvention: "camelCase" } },
+ plugins: [tsconfigPaths()],
+ resolve: {
+ alias: {
+ "@": resolve(__dirname, "../src"),
+ },
+ },
  }),
 };
 

biome.json

@@ -13,6 +13,9 @@
  "a11y": {
  "useButtonType": "off"
  },
+ "correctness": {
+ "noNodejsModules": "off"
+ },
  "style": {
  "noDefaultExport": "off"
  }

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@blue-tomato/blueto",
- "version": "0.1.6",
+ "version": "0.1.7",
  "license": "EUPL-1.2",
  "description": "🪐 BLUETO - the design system of Blue Tomato",
  "homepage": "https://blueto.blue-tomato.com",
@@ -27,6 +27,7 @@
  "classnames": "^2.5.1",
  "prop-types": "^15.8.1",
  "sass": "^1.77.8",
- "storybook": "^8.2.5"
+ "storybook": "^8.2.5",
+ "vite-tsconfig-paths": "^5.0.1"
  }
 }

src/foundations/colors.module.scss

@@ -0,0 +1,47 @@
+$white: #ffffff;
+$grey-1: #333333;
+$grey-2: #8f8f8f;
+$grey-3: #cccccc;
+$grey-4: #f4f4f4;
+$yellow-1: #ffde00;
+$yellow-2: #ffed73;
+$yellow-3: #fff5b3;
+$yellow-4: #fffad9;
+$red-1: #ff4444;
+$red-2: #ff9898;
+$red-3: #ffc7c7;
+$red-4: #ffe3e3;
+$sky-1: #0099CC;
+$sky-2: #73C7E3;
+$sky-3: #B3E0F0;
+$sky-4: #D9F0F7;
+$blue-1: #2D69AA;
+$blue-2: #8CADD0;
+$blue-3: #C0D2E6;
+$blue-4: #E0E9F1;
+$petrol-1: #2fa9b4;
+$petrol-2: #8dd0d6;
+$petrol-3: #c1e5e9;
+$petrol-4: #e0f2f4;
+$mint-1: #21cdab;
+$mint-2: #8ee4d1;
+$mint-3: #c2f0e6;
+$mint-4: #e0f8f2;
+$green-1: #24a779;
+$green-2: #87cfb5;
+$green-3: #bde5d7;
+$green-4: #def2eb;
+$cyprus-2: #84a2a5;
+$cyprus-3: #bcccce;
+$olive-2: #b4c3b8;
+$olive-3: #D6DED8;
+$almond-2: #eee6e3;
+$almond-3: #f6f1f0;
+$purple-2: #aeaed2;
+$purple-3: #d1d1e6;
+$redpurple-2: #d59cd3;
+$redpurple-3: #e8c9e7;
+$rustyred-2: #d06f82;
+$rustyred-3: #e8b7c0;
+$coral-2: #ee7766;
+$coral-3: #f9ccc6

src/foundations/index.module.scss

@@ -0,0 +1,2 @@
+@import "./colors.module.scss";
+@import "./spacing.module.scss";

src/foundations/spacing.module.scss

@@ -0,0 +1,19 @@
+$space-4: 4px;
+$space-8: 8px;
+$space-16: 16px;
+$space-24: 24px;
+$space-32: 32px;
+$space-40: 40px;
+$space-48: 48px;
+$space-64: 64px;
+
+:export {
+ space4: $space-4;
+ space8: $space-8;
+ space16: $space-16;
+ space24: $space-24;
+ space32: $space-32;
+ space40: $space-40;
+ space48: $space-48;
+ space64: $space-64;
+}

src/index.module.scss

@@ -0,0 +1 @@
+@import "./foundations/index.module.scss";

src/index.ts

@@ -0,0 +1,14 @@
+import styles from "./index.module.scss";
+
+type Styles = {
+ space4: "4px";
+ space8: "8px";
+ space16: "16px";
+ space24: "24px";
+ space32: "32px";
+ space40: "40px";
+ space48: "48px";
+ space64: "64px";
+};
+
+export default styles as Styles;

src/stories/foundations/BreakpointsStory/index.module.scss

@@ -1,3 +1,5 @@
+@import "@/index.module.scss";
+
 .wrapper {
  display: flex;
  flex-direction: column;
@@ -14,7 +16,7 @@
 .breakpoint {
  width: 100%;
  border: 0;
- background-color: red;
+ background-color: $red-1;
  cursor: pointer;
 }
 
@@ -26,30 +28,30 @@
  max-width: 767px;
 
  @media (max-width: 767px) {
- background-color: green;
+ background-color: $green-1;
  }
 }
 
 .breakpoint-s {
  @media (min-width: 768px) {
- background-color: green;
+ background-color: $green-1;
  }
 }
 
 .breakpoint-m {
  @media (min-width: 1024px) {
- background-color: green;
+ background-color: $green-1;
  }
 }
 
 .breakpoint-l {
  @media (min-width: 1200px) {
- background-color: green;
+ background-color: $green-1;
  }
 }
 
 .breakpoint-xl {
  @media (min-width: 1400px) {
- background-color: green;
+ background-color: $green-1;
  }
 }

src/stories/foundations/BreakpointsStory/index.tsx

@@ -1,44 +1,44 @@
 import classNames from "classnames";
-import classes from "./index.module.scss";
+import styles from "./index.module.scss";
 
 const writeMediaQueryToClipboard = (breakpoint: string) =>
  navigator.clipboard.writeText(`@include mediaQuery(${breakpoint}) {}`);
 
 const BreakpointsStory = () => (
- <div className={classes.wrapper}>
- <div className={classes.header}>
+ <div className={styles.wrapper}>
+ <div className={styles.header}>
  Breakpoints (click to copy a media query)
  </div>
 
  <button
- className={classNames(classes.breakpoint, classes.breakpointXs)}
+ className={classNames(styles.breakpoint, styles.breakpointXs)}
  onClick={() => writeMediaQueryToClipboard("xs")}
  >
- <div className={classes.breakpointValue}>xs (&lt; 768px)</div>
+ <div className={styles.breakpointValue}>xs (&lt; 768px)</div>
  </button>
  <button
- className={classNames(classes.breakpoint, classes.breakpointS)}
+ className={classNames(styles.breakpoint, styles.breakpointS)}
  onClick={() => writeMediaQueryToClipboard("s")}
  >
- <div className={classes.breakpointValue}>s (&gt;= 768px)</div>
+ <div className={styles.breakpointValue}>s (&gt;= 768px)</div>
  </button>
  <button
- className={classNames(classes.breakpoint, classes.breakpointM)}
+ className={classNames(styles.breakpoint, styles.breakpointM)}
  onClick={() => writeMediaQueryToClipboard("m")}
  >
- <div className={classes.breakpointValue}>m (&gt;= 1024px)</div>
+ <div className={styles.breakpointValue}>m (&gt;= 1024px)</div>
  </button>
  <button
- className={classNames(classes.breakpoint, classes.breakpointL)}
+ className={classNames(styles.breakpoint, styles.breakpointL)}
  onClick={() => writeMediaQueryToClipboard("l")}
  >
- <div className={classes.breakpointValue}>l (&gt;= 1200px)</div>
+ <div className={styles.breakpointValue}>l (&gt;= 1200px)</div>
  </button>
  <button
- className={classNames(classes.breakpoint, classes.breakpointXl)}
+ className={classNames(styles.breakpoint, styles.breakpointXl)}
  onClick={() => writeMediaQueryToClipboard("xl")}
  >
- <div className={classes.breakpointValue}>xl (&gt;= 1400px)</div>
+ <div className={styles.breakpointValue}>xl (&gt;= 1400px)</div>
  </button>
  </div>
 );

src/stories/foundations/ColorsStory/ColorTile.tsx

@@ -1,4 +1,4 @@
-import classes from "./ColorTile.module.scss";
+import styles from "./ColorTile.module.scss";
 
 type Props = React.HTMLAttributes<HTMLElement> & {
  color?: string;
@@ -7,7 +7,7 @@ type Props = React.HTMLAttributes<HTMLElement> & {
 
 const ColorTile = ({ color, name, ...props }: Props) => (
  <button
- className={classes.wrapper}
+ className={styles.wrapper}
  onClick={() => name && navigator.clipboard.writeText(name)}
  style={{ backgroundColor: color }}
  {...props}

src/stories/foundations/ColorsStory/index.module.scss

@@ -11,6 +11,10 @@
  font-size: 20px;
 }
 
+.subtitle {
+ font-size: 18px;
+}
+
 .row {
  display: flex;
  gap: 16px;