feat: appearance changed on colors component

Author: josue2591

components/00-base/01-colors/_colors-component-library.scss

@@ -1,27 +1,31 @@
 @use 'colors-used' as *;
 
 // These styles only affect the colors "Usage" page in the component library
-.cl-colors {
-  padding: 1rem;
-}
-
 .cl-colors__list {
   display: flex;
   flex-wrap: wrap;
-  margin: 0 0 2rem;
   padding: 0;
+  margin: 0 0 space(2);
 }
 
 .cl-colors__item {
-  list-style: none;
-  padding: 1rem 2rem;
-  transition: all 0.4s;
-  flex: 1 1 20%;
-  min-width: 150px;
-  min-height: 150px;
   display: flex;
-  justify-content: center;
-  align-items: flex-end;
+  flex-direction: column;
+  padding: $space;
+  max-width: 13rem;
+  font-size: $space;
+  list-style: none;
+}
+
+.cl-colors__title {
+  font-weight: bold;
+  margin: $space 0 0;
+}
+
+.cl-colors__swatch {
+  display: block;
+  width: 11rem;
+  height: 6rem;
 }
 
 // Dynamically set swatch text color based on the lightness of the background color
@@ -40,19 +44,17 @@
 // Style default color swatches
 @each $name, $color in $defaultColors {
   .cl-colors__item--default {
-    &-#{$name} {
+    &-#{$name} .cl-colors__swatch {
       background-color: clr($name);
-      color: set-color($color);
     }
   }
 }
 
 // Style dark color swatches
 @each $name, $color in $darkColors {
   .cl-colors__item--dark {
-    &-#{$name} {
+    &-#{$name} .cl-colors__swatch {
       background-color: clr($name);
-      color: set-color($color, muted, accent-high);
     }
   }
 }

components/00-base/01-colors/colors.stories.js

@@ -1,6 +1,7 @@
 import colors from './colors.twig';
 
 import colorsData from './colors.yml';
+import './colors';
 
 /**
  * Storybook Definition.

components/00-base/01-colors/colors.twig

@@ -5,23 +5,28 @@
     heading_level: 2,
     heading: colors_heading,
   } %}
-
-  {% for palette in palettes %}
-    {% set palette_machine = palette.palette_heading|lower %}
-    {% include "@atoms/text/headings/_heading.twig" with {
-      heading_level: 3,
-      heading: palette.palette_heading,
-    } %}
-    <ul {{ bem('list', [palette_machine], colors_base_class) }} data-theme="{{ palette_machine }}">
-      {% for color in palette.colors %}
-        {% set color_machine = color.name|lower|replace({' ': '-'}) %}
-        {% if color.color_reverse == TRUE %}
-          {% set colors_title_modifiers = ['reverse'] %}
-        {% endif %}
-        <li {{ bem("item", [palette_machine ~ '-' ~ color_machine], colors_base_class) }}>
-          <span {{ bem("title", colors_title_modifiers, colors_base_class) }}>{{ color.name }}</span> <br/>
-        </li>
-      {% endfor %}
-    </ul>
-  {% endfor %}
+  <ul>
+    {% for palette in palettes %}
+      {% set palette_machine = palette.palette_heading|lower %}
+      {% include "@atoms/text/headings/_heading.twig" with {
+        heading_level: 3,
+        heading: palette.palette_heading,
+      } %}
+      <ul {{ bem('list', [palette_machine], colors_base_class) }} data-theme="{{ palette_machine }}">
+        {% for color in palette.colors %}
+          {% set color_machine = color.name|lower|replace({' ': '-'}) %}
+          {% if color.color_reverse == TRUE %}
+            {% set colors_title_modifiers = ['reverse'] %}
+          {% endif %}
+          <li {{ bem("item", [palette_machine ~ '-' ~ color_machine], colors_base_class) }}>
+            <span {{ bem("swatch", [], colors_base_class) }}></span>
+            <span {{ bem("title", colors_title_modifiers, colors_base_class) }}>
+              {{ color.name }}
+            </span>
+            <span {{ bem("definition", [], colors_base_class) }}></span>
+          </li>
+        {% endfor %}
+      </ul>
+    {% endfor %}
+  </ul>
 </div>