feat(colors): add color atom + change tw config

thelia · Jun 18, 2024 · 0822765 · 0822765
1 parent da1c4c7
commit 0822765
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 83 deletions.
diff --git a/components/Atoms/Colors/Colors.stories.js 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
@@ -0,0 +1,12 @@
+{% for line in colors %}
+  <div class="flex gap-4">
+    {% for color in line %}
+      <div>
+        <div class="Color shadow-lg p-4">
+          <div class="Color-box {{ color }} min-w-[200px] h-[120px]"></div>
+          <div class="text-center mt-2 h-10">{{ color }}</div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+{% endfor %}
diff --git a/components/Atoms/Colors/colors.css 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
@@ -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
@@ -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
@@ -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',