From 0b42bdcf86058ee3870afc2d5182142ad8343768 Mon Sep 17 00:00:00 2001
From: Atzac <isaacquidutemelo13@gmail.com>
Date: Wed, 1 Feb 2023 16:31:44 -0300
Subject: [PATCH 1/2] feat: stitches config and style
---
package.json | 3 +
src/components/button/button.tsx | 4 +-
src/components/button/styles.scss | 5 --
src/components/button/styles.ts | 25 ++++++
src/stitches.config.ts | 135 ++++++++++++++++++++++++++++++
yarn.lock | 5 ++
6 files changed, 170 insertions(+), 7 deletions(-)
delete mode 100644 src/components/button/styles.scss
create mode 100644 src/components/button/styles.ts
create mode 100644 src/stitches.config.ts
diff --git a/package.json b/package.json
index 1c351a0..d558adb 100644
--- a/package.json
+++ b/package.json
@@ -98,5 +98,8 @@
"commitizen": {
"path": "@commitlint/cz-commitlint"
}
+ },
+ "dependencies": {
+ "@stitches/react": "^1.2.8"
}
}
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index cc47958..72acfc6 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,12 +1,12 @@
import React, { InputHTMLAttributes } from 'react';
-import './styles.scss';
+import { StitcheButton } from './styles';
export interface ButtonProps extends InputHTMLAttributes<HTMLButtonElement> {
label: string;
}
const Button = ({ label }: ButtonProps) => {
- return <button className="btn">{label}</button>;
+ return <StitcheButton>{label}</StitcheButton>;
};
export default Button;
diff --git a/src/components/button/styles.scss b/src/components/button/styles.scss
deleted file mode 100644
index 64b4caf..0000000
--- a/src/components/button/styles.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.btn {
- font-size: 30px;
- padding: 10px 20px;
- background-color: blueviolet;
-}
diff --git a/src/components/button/styles.ts b/src/components/button/styles.ts
new file mode 100644
index 0000000..2caa234
--- /dev/null
+++ b/src/components/button/styles.ts
@@ -0,0 +1,25 @@
+//import { styled } from "@stitches/react";
+import stitches from '../../stitches.config';
+
+const { styled } = stitches;
+
+export const StitcheButton = styled('button', {
+ width: '50%',
+ color: 'White',
+ fontSize: '$rg',
+ fontWeight: 'normal',
+ backgroundColor: '$primaryColor',
+ borderRadius: '6px',
+ padding: '10px 15px',
+ border: 'none',
+ '&:hover': {
+ backgroundColor: '$primary7',
+ },
+ variants: {
+ size: {
+ sm: {
+ width: '75px',
+ },
+ },
+ },
+});
diff --git a/src/stitches.config.ts b/src/stitches.config.ts
new file mode 100644
index 0000000..482bdab
--- /dev/null
+++ b/src/stitches.config.ts
@@ -0,0 +1,135 @@
+import { createStitches } from '@stitches/react';
+
+const stitches = createStitches({
+ media: {
+ //BreakPoints
+ bp1: '(minwidth: 320px)',
+ bp2: '(minwidth: 768px)',
+ bp3: '(minwidth: 1200px)',
+ },
+ theme: {
+ colors: {
+ // Primary colors
+ primary1: '#ebf3fe',
+ primary2: '#b5d2fc',
+ primary3: '#84b4fa',
+ primary4: '#5396f8',
+ primary5: '#146ff5',
+ primary6: '#0858ce',
+ primary7: '#06439d',
+ primary8: '#042a62',
+
+ // Neutral colors
+ neutral1: '#fcfcfd',
+ neutral2: '#f2f3f5',
+ neutral3: '#e4e6eb',
+ neutral4: '#ced2db',
+ neutral5: '#aeb2bd',
+ neutral6: '#8d93a5',
+ neutral7: '#505566',
+ neutral8: '#282b33',
+
+ // Indicative colors
+ // Positive
+ positive1: '#e7f9f1',
+ positive2: '#cbf0e1',
+ positive3: '#9ce3c5',
+ positive4: '#60d2a3',
+ positive5: '#35bb83',
+ positive6: '#2d9f70',
+ positive7: '#227754',
+ positive8: '#19583d',
+
+ // Negative
+ negative1: '#faeaec',
+ negative2: '#f7d4d8',
+ negative3: '#efa9b0',
+ negative4: '#e77e89',
+ negative5: '#de5462',
+ negative6: '#d6293a',
+ negative7: '#ab212f',
+ negative8: '#8d1b26',
+
+ // Warning
+ warning1: '#fff5e0',
+ warning2: '#feedcd',
+ warning3: '#fcdb9c',
+ warning4: '#fbc86a',
+ warning5: '#faba42',
+ warning6: '#f9a915',
+ warning7: '#e09306',
+ warning8: '#b87905',
+
+ // Info
+ info1: '#e2f9fd',
+ info2: '#cff6fc',
+ info3: '#9eeefa',
+ info4: '#55e1f6',
+ info5: '#0ccbe9',
+ info6: '#0bb2cb',
+ info7: '#0994aa',
+ info8: '#077283',
+
+ // Preset colors
+ presets1: '#d96d36',
+ presets2: '#d99f2b',
+ presets3: '#98b212',
+ presets4: '#02c242',
+ presets5: '#3dccb4',
+ presets6: '#4595e5',
+ presets7: '#3956e5',
+ presets8: '#9b50e5',
+ presets9: ' #d94cd9',
+ presets10: '#d94c92',
+
+ // Transparences
+ // Black transparence
+ blacktransparence90: '#000000e5',
+ blacktransparence75: '#000000bf',
+ blacktransparence60: '#00000099',
+ blacktransparence45: '#00000073',
+ blacktransparence30: '#0000004d',
+ blacktransparence15: '#00000026',
+
+ // White transparence
+ whitetransparence90: '#ffffffe5',
+ whitetransparence75: '#ffffffbf',
+ whitetransparence60: '#ffffff99',
+ whitetransparence45: '#ffffff73',
+ whitetransparence30: '#ffffff4d',
+ whitetransparence15: '#ffffff26',
+
+ // Main colors
+ primaryColor: '#0858ce',
+ secondaryColor: '#ebf3fe',
+ neutralColor: '#505566',
+ successColor: '#2d9f70',
+ negativeColor: '#d6293a',
+ warningColor: '#f9a915',
+ infoColor: '#0bb2cb',
+ },
+ },
+});
+
+const injectGlobalStyles = stitches.globalCss({
+ '*': { boxSizing: 'borderbox', fontFamily: 'Source Sans Pro Regular' },
+ '*:after': { boxSizing: 'borderbox', fontFamily: 'sansserif' },
+ '*:before': { boxSizing: 'borderbox', fontFamily: 'sansserif' },
+ '@font-face': [
+ {
+ fontFamily: 'Source Sans Pro Regular',
+ src: 'local("Source Sans Pro Regular"), url("https://fonts.cdnfonts.com/s/12183/SourceSansPro-Regular.woff")',
+ },
+ {
+ fontFamily: 'Source Sans Pro Bold',
+ src: 'local("Source Sans Pro Bold"), url("https://fonts.cdnfonts.com/s/12183/SourceSansPro-Bold.woff")',
+ },
+ ],
+
+ body: { margin: 0, padding: 0 },
+ h1: { margin: 0 },
+});
+
+injectGlobalStyles();
+
+export default stitches;
diff --git a/yarn.lock b/yarn.lock
index 6404105..5e62bf4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1961,6 +1961,11 @@
lodash.union "^4.6.0"
lodash.values "^4.3.0"
+"@stitches/react@^1.2.8":
+ version "1.2.8"
+ resolved "https://registry.yarnpkg.com/@stitches/react/-/react-1.2.8.tgz#954f8008be8d9c65c4e58efa0937f32388ce3a38"
+ integrity sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA==
+
"@storybook/addon-actions@6.5.16", "@storybook/addon-actions@^6.5.16":
version "6.5.16"
resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.5.16.tgz#2d7679f64899bef165a338582cb928102a09e364"
From ac2d3e1e179d7a3786ef7baf6117e80743c7136c Mon Sep 17 00:00:00 2001
From: Atzac <isaacquidutemelo13@gmail.com>
Date: Wed, 1 Feb 2023 16:38:23 -0300
Subject: [PATCH 2/2] fix: remove commented import
---
src/components/button/styles.ts | 1 -
1 file changed, 1 deletion(-)
diff --git a/src/components/button/styles.ts b/src/components/button/styles.ts
index 2caa234..a46454b 100644
--- a/src/components/button/styles.ts
+++ b/src/components/button/styles.ts
@@ -1,4 +1,3 @@
-//import { styled } from "@stitches/react";
import stitches from '../../stitches.config';
const { styled } = stitches;