feat: add badge component (resolves #11) (#20)

inclusive-design · Jul 19, 2023 · f6d7b42 · f6d7b42
1 parent 4946441
commit f6d7b42
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 21 deletions.
diff --git a/src/_includes/components/badge/badge.config.js b/src/_includes/components/badge/badge.config.js
@@ -0,0 +1,36 @@
+module.exports = {
+    title: "Badge",
+    context: {
+        text: "Badge"
+    },
+    variants: [
+        {
+            title: "Insight",
+            context: {
+                variantClass: "badge--insight",
+                text: "Insight"
+            }
+        },
+        {
+            title: "Practice",
+            context: {
+                variantClass: "badge--practice",
+                text: "Practice"
+            }
+        },
+        {
+            title: "Technique",
+            context: {
+                variantClass: "badge--technique",
+                text: "Technique"
+            }
+        },
+        {
+            title: "Activity",
+            context: {
+                variantClass: "badge--activity",
+                text: "Activity"
+            }
+        }
+    ]
+};
diff --git a/src/_includes/components/badge/badge.njk b/src/_includes/components/badge/badge.njk
@@ -0,0 +1,5 @@
+{% block head %}
+    <link rel="stylesheet" href="/static/css/badge.css" />
+{% endblock %}
+
+<span class="badge{% if params.variantClass %} {{ params.variantClass }}{% endif %}">{{ params.text }}</span>
diff --git a/src/_includes/layout.njk b/src/_includes/layout.njk
@@ -10,6 +10,7 @@
     <link rel="stylesheet" href="/static/css/reset.css" />
     <link rel="stylesheet" href="/static/css/variables.css" />
     <link rel="stylesheet" href="/static/css/utilities.css" />
+    <link rel="stylesheet" href="/static/css/font.css" />
     {% block head %}{% endblock %}
   </head>
   <body>

diff --git a/src/static/css/badge.css b/src/static/css/badge.css
@@ -0,0 +1,28 @@
+.badge {
+    background-color: var(--fl-bgColor, var(--color-black));
+    color: var(--fl-fgColor, var(--color-white));
+    display: inline-block;
+    font-family: var(--font-serif);
+    font-weight: 800;
+    padding: var(--space-m) var(--space-l);
+}
+
+.badge--insight {
+    background-color: var(--fl-bgColor, var(--color-blue-600));
+    color: var(--fl-fgColor, var(--color-white));
+}
+
+.badge--practice {
+    background-color: var(--fl-bgColor, var(--color-green-500));
+    color: var(--fl-fgColor, var(--color-black));
+}
+
+.badge--technique {
+    background-color: var(--fl-bgColor, var(--color-red-500));
+    color: var(--fl-fgColor, var(--color-black));
+}
+
+.badge--activity {
+    background-color: var(--fl-bgColor, var(--color-orange-500));
+    color: var(--fl-fgColor, var(--color-black));
+}
diff --git a/src/static/css/main.css b/src/static/css/main.css
@@ -1,6 +1,7 @@
 @import "reset.css";
 @import "variables.css";
+@import "font.css";
 @import "utilities.css";
 @import "color.css";
 @import "link.css";
-@import "font.css";
+@import "badge.css";
diff --git a/src/static/css/variables.css b/src/static/css/variables.css
@@ -76,34 +76,48 @@
         segoe ui emoji,
         segoe ui symbol;
 
-    /* @link https://utopia.fyi/space/calculator?
-        c=320,18,1.2,1240,20,1.25,5,2,&
-        s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&
-        g=s,l,xl,12 */
+    /* @link https://utopia.fyi/space/calculator?c=
+    320,18,1.2,1240,20,1.25,5,2,&s=0.8|0.5|0.2,1.2|1.5,s-l&g=s,l,xl,12 */
 
-    /* Spacings */
-    --space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem);
+    /* Space 3xs: 4px → 4px */
+    --space-3xs: clamp(0.25rem, calc(0.25rem + 0vw), 0.25rem);
+
+    /* Space 2xs: 9px → 10px */
     --space-2xs: clamp(0.56rem, calc(0.54rem + 0.11vw), 0.63rem);
-    --space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
+
+    /* Space xs: 14px → 16px */
+    --space-xs: clamp(0.88rem, calc(0.83rem + 0.22vw), 1rem);
+
+    /* Space s: 18px → 20px */
     --space-s: clamp(1.13rem, calc(1.08rem + 0.22vw), 1.25rem);
-    --space-m: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem);
-    --space-l: clamp(2.25rem, calc(2.16rem + 0.43vw), 2.5rem);
-    --space-xl: clamp(3.38rem, calc(3.24rem + 0.65vw), 3.75rem);
-    --space-2xl: clamp(4.5rem, calc(4.33rem + 0.87vw), 5rem);
-    --space-3xl: clamp(6.75rem, calc(6.49rem + 1.3vw), 7.5rem);
+
+    /* Space m: 22px → 24px */
+    --space-m: clamp(1.38rem, calc(1.33rem + 0.22vw), 1.5rem);
+
+    /* Space l: 27px → 30px */
+    --space-l: clamp(1.69rem, calc(1.62rem + 0.33vw), 1.88rem);
 
     /* One-up pairs */
-    --space-3xs-2xs: clamp(0.31rem, calc(0.2rem + 0.54vw), 0.63rem);
-    --space-2xs-xs: clamp(0.56rem, calc(0.43rem + 0.65vw), 0.94rem);
+
+    /* Space 3xs-2xs: 4px → 10px */
+    --space-3xs-2xs: clamp(0.25rem, calc(0.12rem + 0.65vw), 0.63rem);
+
+    /* Space 2xs-xs: 9px → 16px */
+    --space-2xs-xs: clamp(0.56rem, calc(0.41rem + 0.76vw), 1rem);
+
+    /* Space xs-s: 14px → 20px */
     --space-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem);
-    --space-s-m: clamp(1.13rem, calc(0.86rem + 1.3vw), 1.88rem);
-    --space-m-l: clamp(1.69rem, calc(1.4rem + 1.41vw), 2.5rem);
-    --space-l-xl: clamp(2.25rem, calc(1.73rem + 2.61vw), 3.75rem);
-    --space-xl-2xl: clamp(3.38rem, calc(2.81rem + 2.83vw), 5rem);
-    --space-2xl-3xl: clamp(4.5rem, calc(3.46rem + 5.22vw), 7.5rem);
+
+    /* Space s-m: 18px → 24px */
+    --space-s-m: clamp(1.13rem, calc(0.99rem + 0.65vw), 1.5rem);
+
+    /* Space m-l: 22px → 30px */
+    --space-m-l: clamp(1.38rem, calc(1.2rem + 0.87vw), 1.88rem);
 
     /* Custom pairs */
-    --space-s-l: clamp(1.13rem, calc(0.65rem + 2.39vw), 2.5rem);
+
+    /* Space s-l: 18px → 30px */
+    --space-s-l: clamp(1.13rem, calc(0.86rem + 1.3vw), 1.88rem);
 
     /* Type scales */
     --step--2: clamp(0.78rem, calc(0.77rem + 0.03vw), 0.8rem);