From 0822765f9838eb27a912ab852f70caa0a7d96ee2 Mon Sep 17 00:00:00 2001 From: Mathis Chambon Date: Tue, 18 Jun 2024 11:18:40 +0200 Subject: [PATCH] feat(colors): add color atom + change tw config --- components/Atoms/Colors/Colors.stories.js | 10 +++ components/Atoms/Colors/Colors.twig | 12 ++++ components/Atoms/Colors/colors.css | 7 ++ components/Atoms/Colors/colors.json | 24 +++++++ components/variables.css | 75 +++++++++----------- tailwind.config.js | 84 +++++++++++------------ 6 files changed, 129 insertions(+), 83 deletions(-) create mode 100644 components/Atoms/Colors/Colors.stories.js create mode 100644 components/Atoms/Colors/Colors.twig create mode 100644 components/Atoms/Colors/colors.css create mode 100644 components/Atoms/Colors/colors.json diff --git a/components/Atoms/Colors/Colors.stories.js b/components/Atoms/Colors/Colors.stories.js new file mode 100644 index 0000000..b0963a1 --- /dev/null +++ b/components/Atoms/Colors/Colors.stories.js @@ -0,0 +1,10 @@ +import Colors from './Colors.twig'; +import colors from './colors.json'; + +import './colors.css'; + +export default { + title: 'Design System/Atoms/Colors' +}; + +export const list = () => Colors({ colors }); diff --git a/components/Atoms/Colors/Colors.twig b/components/Atoms/Colors/Colors.twig new file mode 100644 index 0000000..f1b72ac --- /dev/null +++ b/components/Atoms/Colors/Colors.twig @@ -0,0 +1,12 @@ +{% for line in colors %} +
+ {% for color in line %} +
+
+
+
{{ color }}
+
+
+ {% endfor %} +
+{% endfor %} diff --git a/components/Atoms/Colors/colors.css b/components/Atoms/Colors/colors.css new file mode 100644 index 0000000..38624cd --- /dev/null +++ b/components/Atoms/Colors/colors.css @@ -0,0 +1,7 @@ +.Color { + border-radius: 36px; +} + +.Color-box { + border-radius: 30px 30px 0px 0px; +} diff --git a/components/Atoms/Colors/colors.json b/components/Atoms/Colors/colors.json new file mode 100644 index 0000000..a8cf4d5 --- /dev/null +++ b/components/Atoms/Colors/colors.json @@ -0,0 +1,24 @@ +{ + "vermillon": [ + "bg-vermillon-light", + "bg-vermillon-lighter", + "bg-vermillon-lightest", + "bg-vermillon-dark" + ], + "charcoal": ["bg-charcoal-light", "bg-charcoal-medium", "bg-charcoal-dark"], + "pearl": ["bg-pearl-light", "bg-pearl-medium"], + "grey": ["bg-grey-medium", "bg-grey-dark"], + "white": ["bg-white"], + "red": ["bg-red-light", "bg-red", "bg-background-red"], + "green": ["bg-green-light", "bg-green-dark"], + "wheat": ["bg-wheat-light", "bg-wheat", "bg-wheat-dark"], + "ultramarine-blue": ["bg-ultramarine-blue-light", "bg-ultramarine-blue-dark"], + "caribbean-green": ["bg-caribbean-green"], + "others": [ + "bg-purple", + "bg-turquoise", + "bg-brown", + "bg-apple-green", + "bg-pink" + ] +} diff --git a/components/variables.css b/components/variables.css index 51855b0..dc42378 100644 --- a/components/variables.css +++ b/components/variables.css @@ -1,48 +1,41 @@ :root { - --main: #ec6351; - --darkMain: #e25441; - --lightCharbon: #444444; - --mediumCharbon: #333333; - --darkCharbon: #222222; - --grey: #707070; - --mediumGrey: #a7a7a7; - --lightGrey: #ebebeb; - --lightPearl: #f7f7f7; - --mediumPearl: #f5f5f5; - --carot: #fc9722; - --green: #73ce6f; - --blue: #1e9ae8; - --error: #d10000; - --danger: #fde2e2; - --success: #d1fae5; - --info: #e6f1fa; - --darkVermillon: #c4311c; - --vermillon: #dc3018; - --lightVermillon: #fa533c; - --lighterVermillon: #ff8f80; - --greyMedium: #9b9b9b; - --pearlMedium: #ebebeb; - --greyDark: #787878; + --vermillon-light: #fa533c; + --vermillon-lighter: #ff8f80; + --vermillon-lightest: #ffeaf8; + --vermillon-dark: #c4311c; + + --charcoal-light: #444444; + --charcoal-medium: #333333; + --charcoal-dark: #222222; + + --pearl-light: #f5f5f5; + --pearl-medium: #ebebeb; + + --grey-medium: #9b9b9b; + --grey-dark: #787878; + --white: #ffffff; + + --red-light: #ed5656; --red: #d21919; - --redLight: #ed5656; - --backgroundRed: #ffeded; - --greenDark: #008958; - --greenLight: #ebfff8; - --ocre: #9e6700; - --mauve: #8c5383; - --turquoise: #0e7c7b; - --electricBlue: #3423a6; - --ocreLight: #fefaf1; - --mauveLight: #ebe2ea; - --turquoiseLight: #ecf8f8; - --electricBlueLight: #eeecff; - --backgroundLightVermillon: #f7eeed; - --wheatDark: #edac30; + --background-red: #ffeded; + + --green-light: #eafbf5; + --green-dark: #008958; + + --wheat-light: #fff4de; --wheat: #ffdd9c; - --wheatLight: #ffecc8; - --ultramarineBlue: #3162df; - --ultramarineBlueLight: #ecf6ff; + --wheat-dark: #ffab0c; + + --ultramarine-blue-light: #ecf6ff; + --ultramarine-blue-dark: #3162df; + + --caribbean-green: #00d4a1; + --purple: #5f0ab5; + --turquoise: #0fc8d3; + --brown: #820000; + --apple-green: #57c032; + --pink: #d800df; --font-weight-h1: 800; --font-weight-h2: 700; diff --git a/tailwind.config.js b/tailwind.config.js index a0b8cdd..29d4855 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,50 +4,50 @@ module.exports = { theme: { extend: { colors: { - main: 'var(--main)', - darkMain: 'var(--darkMain)', - lightCharbon: 'var(--lightCharbon)', - mediumCharbon: 'var(--mediumCharbon)', - darkCharbon: 'var(--darkCharbon)', - grey: 'var(--grey)', - mediumGrey: 'var(--mediumGrey)', - lightGrey: 'var(--lightGrey)', - lightPearl: 'var(--lightPearl)', - mediumPearl: 'var(--mediumPearl)', - carot: 'var(--carot)', - green: 'var(--green)', - blue: 'var(--blue)', - error: 'var(--error)', - danger: 'var(--danger)', - success: 'var(--success)', - info: 'var(--info)', - darkVermillon: 'var(--darkVermillon)', - vermillon: 'var(--vermillon)', - lightVermillon: 'var(--lightVermillon)', - lighterVermillon: 'var(--lighterVermillon)', - greyMedium: 'var(--greyMedium)', - pearlMedium: 'var(--pearlMedium)', - greyDark: 'var(--greyDark)', + vermillon: { + light: 'var(--vermillon-light)', + lighter: 'var(--vermillon-lighter)', + lightest: 'var(--vermillon-lightest)', + dark: 'var(--vermillon-dark)' + }, + charcoal: { + light: 'var(--charcoal-light)', + medium: 'var(--charcoal-medium)', + dark: 'var(--charcoal-dark)' + }, + pearl: { + light: 'var(--pearl-light)', + medium: 'var(--pearl-medium)' + }, + grey: { + medium: 'var(--grey-medium)', + dark: 'var(--grey-dark)' + }, white: 'var(--white)', - red: 'var(--red)', - redLight: 'var(--redLight)', - backgroundRed: 'var(--backgroundRed)', - greenDark: 'var(--greenDark)', - greenLight: 'var(--greenLight)', - ocre: 'var(--ocre)', - mauve: 'var(--mauve)', + red: { + light: 'var(--red-light)', + DEFAULT: 'var(--red)' + }, + 'background-red': 'var(--background-red)', + green: { + light: 'var(--green-light)', + dark: 'var(--green-dark)' + }, + wheat: { + light: 'var(--wheat-light)', + DEFAULT: 'var(--wheat)', + dark: 'var(--wheat-dark)' + }, + 'ultramarine-blue': { + light: 'var(--ultramarine-blue-light)', + dark: 'var(--ultramarine-blue-dark)' + }, + 'caribbean-green': 'var(--caribbean-green)', + purple: 'var(--purple)', turquoise: 'var(--turquoise)', - electricBlue: 'var(--electricBlue)', - ocreLight: 'var(--ocreLight)', - mauveLight: 'var(--mauveLight)', - turquoiseLight: 'var(--turquoiseLight)', - electricBlueLight: 'var(--electricBlueLight)', - backgroundLightVermillon: 'var(--backgroundLightVermillon)', - wheatDark: 'var(--wheatDark)', - wheat: 'var(--wheat)', - wheatLight: 'var(--wheatLight)', - ultramarineBlue: 'var(--ultramarineBlue)', - ultramarineBlueLight: 'var(--ultramarineBlueLight)' + brown: 'var(--brown)', + 'apple-green': 'var(--green)', + pink: 'var(--pink)' }, screens: { xs: '320px',