Merge pull request #357 from woylie/tag-styles

tag styles
woylie · Aug 17, 2024 · 3f466e8 · 3f466e8
2 parents 9f2b66a + f10ec81
commit 3f466e8
Show file tree

Hide file tree

Showing 10 changed files with 239 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### Changed
+
+- Add example styles for tag component.
+
 ### Removed
 
 - The `fab` component was removed. It might have made sense to have it as a

diff --git a/demo/assets/css/_functions.scss b/demo/assets/css/_functions.scss
@@ -12,7 +12,7 @@
  *    @use "../functions" as f;
  *
  *    .my-component {
- *      color: f.color(text, default);
+ *      color: f.color(text, default, normal);
  *    }
  *
  * Alternatively, use the tokens forwarded by _tokens.scss.

diff --git a/demo/assets/css/base/_general.scss b/demo/assets/css/base/_general.scss
@@ -12,7 +12,7 @@ body,
   font-family: f.font-family(main);
   font-size: f.base-size();
   line-height: f.lines(1);
-  color: f.color(text, default);
+  color: f.color(text, default, normal);
   background: f.color(background, foundation);
 }
 

diff --git a/demo/assets/css/components/_button.scss b/demo/assets/css/components/_button.scss
@@ -15,10 +15,10 @@
 
   &:disabled,
   &.is-disabled {
-    color: f.color(text, disabled);
+    color: f.color(text, disabled, normal);
     cursor: not-allowed;
-    background: f.color(background, disabled);
-    border-color: f.color(border, disabled);
+    background: f.color(background, disabled, normal);
+    border-color: f.color(border, disabled, normal);
   }
 
   &:not(:disabled, .is-disabled) {
@@ -31,39 +31,39 @@
     }
 
     &.is-primary {
-      color: f.color(text, primary);
-      background: f.color(background, primary);
-      border-color: f.color(border, primary);
+      color: f.color(text, primary, subdued);
+      background: f.color(background, primary, normal);
+      border-color: f.color(border, primary, normal);
     }
 
     &.is-secondary {
-      color: f.color(text, secondary);
-      background: f.color(background, secondary);
-      border-color: f.color(border, secondary);
+      color: f.color(text, secondary, subdued);
+      background: f.color(background, secondary, normal);
+      border-color: f.color(border, secondary, normal);
     }
 
     &.is-info {
-      color: f.color(text, info);
-      background: f.color(background, info);
-      border-color: f.color(border, info);
+      color: f.color(text, info, subdued);
+      background: f.color(background, info, normal);
+      border-color: f.color(border, info, normal);
     }
 
     &.is-success {
-      color: f.color(text, success);
-      background: f.color(background, success);
-      border-color: f.color(border, success);
+      color: f.color(text, success, subdued);
+      background: f.color(background, success, normal);
+      border-color: f.color(border, success, normal);
     }
 
     &.is-warning {
-      color: f.color(text, warning);
-      background: f.color(background, warning);
-      border-color: f.color(border, warning);
+      color: f.color(text, warning, subdued);
+      background: f.color(background, warning, normal);
+      border-color: f.color(border, warning, normal);
     }
 
     &.is-danger {
-      color: f.color(text, danger);
-      background: f.color(background, danger);
-      border-color: f.color(border, danger);
+      color: f.color(text, danger, subdued);
+      background: f.color(background, danger, normal);
+      border-color: f.color(border, danger, normal);
     }
 
     &.is-outline {
@@ -78,27 +78,27 @@
     &.is-outline,
     &.is-text {
       &.is-primary {
-        color: f.color(border, primary);
+        color: f.color(border, primary, normal);
       }
 
       &.is-secondary {
-        color: f.color(border, secondary);
+        color: f.color(border, secondary, normal);
       }
 
       &.is-info {
-        color: f.color(border, info);
+        color: f.color(border, info, normal);
       }
 
       &.is-success {
-        color: f.color(border, success);
+        color: f.color(border, success, normal);
       }
 
       &.is-warning {
-        color: f.color(border, warning);
+        color: f.color(border, warning, normal);
       }
 
       &.is-danger {
-        color: f.color(border, danger);
+        color: f.color(border, danger, normal);
       }
     }
   }

diff --git a/demo/assets/css/components/_index.scss b/demo/assets/css/components/_index.scss
@@ -22,3 +22,4 @@
 @use "property-list";
 @use "skeleton";
 @use "tab-navigation";
+@use "tag";
diff --git a/demo/assets/css/components/_tab-navigation.scss b/demo/assets/css/components/_tab-navigation.scss
@@ -17,14 +17,14 @@
       > a {
         display: block;
         padding: f.spacer(2) f.spacer(4);
-        color: f.color(text, secondary);
+        color: f.color(text, secondary, normal);
         text-decoration: none;
         border-top-left-radius: f.radius(m);
         border-top-right-radius: f.radius(m);
 
         &[aria-current] {
           font-weight: f.weight(medium);
-          background: f.color(background, secondary);
+          background: f.color(background, secondary, normal);
           border: f.border-width(s) solid f.color(border, neutral, "1");
           border-bottom-width: 0;
         }

diff --git a/demo/assets/css/components/_tag.scss b/demo/assets/css/components/_tag.scss
@@ -0,0 +1,73 @@
+@use "../functions" as f;
+
+.tag {
+  display: inline-flex;
+  gap: f.spacer(1);
+  align-items: center;
+  justify-content: center;
+  padding: 0 f.spacer(2);
+  font-size: f.size(s);
+  line-height: f.lines(1);
+  color: f.color(text, default, normal);
+  background-color: f.color(background, disabled, normal);
+  border: f.border-width(s) solid f.color(border, neutral, "1");
+  border-radius: f.radius(s);
+
+  &.is-primary {
+    color: f.color(text, primary, normal);
+    background: f.color(background, primary, subdued);
+    border-color: f.color(border, primary, subdued);
+  }
+
+  &.is-secondary {
+    color: f.color(text, secondary, normal);
+    background: f.color(background, secondary, subdued);
+    border-color: f.color(border, secondary, subdued);
+  }
+
+  &.is-info {
+    color: f.color(text, info, normal);
+    background: f.color(background, info, subdued);
+    border-color: f.color(border, info, subdued);
+  }
+
+  &.is-success {
+    color: f.color(text, success, normal);
+    background: f.color(background, success, subdued);
+    border-color: f.color(border, success, subdued);
+  }
+
+  &.is-warning {
+    color: f.color(text, warning, normal);
+    background: f.color(background, warning, subdued);
+    border-color: f.color(border, warning, subdued);
+  }
+
+  &.is-danger {
+    color: f.color(text, danger, normal);
+    background: f.color(background, danger, subdued);
+    border-color: f.color(border, danger, subdued);
+  }
+
+  &.is-small {
+    padding: f.spacer(1);
+    font-size: f.size(xs);
+    line-height: f.lines(0.5);
+  }
+
+  &.is-medium {
+    font-size: f.size(m);
+  }
+
+  &.is-large {
+    padding: 0 f.spacer(4);
+    font-size: f.size(l);
+    line-height: f.lines(1.5);
+  }
+
+  &.is-pill {
+    padding-right: f.spacer(3);
+    padding-left: f.spacer(3);
+    border-radius: f.radius(pill);
+  }
+}