feat(badges): colors and border (#774)

* feat(badges): add more colors and allow to disable the border

* feat(badges): more colors

* chore: generate

* docs: add Others inside the sidebar

* chore: i18n

---------

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>

layouts/_partials/shortcodes/badge.html

@@ -1,18 +1,34 @@
 {{- $content := .content -}}
-{{- $type := .type | default "" -}}
+{{- $color := .color | default .type | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
 {{- $class := .class | default "" -}}
 {{- $border := .border | default false -}}
 {{- $icon := .icon | default "" -}}
 
-{{- $defaultClass := "hx:text-gray-600 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:dark:text-neutral-200 hx:border-gray-200 hx:dark:border-neutral-700" -}}
+{{- /* Compatibility with previous names. */ -}}
+{{- $mapping := (dict
+  "default" "gray"
+  "tip" "green"
+  "info" "blue"
+  "warning" "yellow"
+  "error" "red"
+  "important" "purple"
+  )
+-}}
+{{- $color = index $mapping $color | default $color | default "gray" -}}
 
 {{- $styleClass := newScratch -}}
-{{- $styleClass.Set "info" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}}
-{{- $styleClass.Set "warning" "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
-{{- $styleClass.Set "error" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
+{{- $styleClass.Set "gray" "hx:text-gray-600 hx:bg-gray-100 hx:dark:bg-neutral-800 hx:dark:text-neutral-200 hx:border-gray-200 hx:dark:border-neutral-700" -}}
+{{- $styleClass.Set "purple" "hx:border-purple-200 hx:bg-purple-100 hx:text-purple-900 hx:dark:border-purple-200/30 hx:dark:bg-purple-900/30 hx:dark:text-purple-200" -}}
+{{- $styleClass.Set "indigo" "hx:border-indigo-200 hx:bg-indigo-100 hx:text-indigo-900 hx:dark:border-indigo-200/30 hx:dark:bg-indigo-900/30 hx:dark:text-indigo-200" -}}
+{{- $styleClass.Set "blue" "hx:border-blue-200 hx:bg-blue-100 hx:text-blue-900 hx:dark:border-blue-200/30 hx:dark:bg-blue-900/30 hx:dark:text-blue-200" -}}
+{{- $styleClass.Set "green" "hx:border-green-200 hx:bg-green-100 hx:text-green-900 hx:dark:border-green-200/30 hx:dark:bg-green-900/30 hx:dark:text-green-200" -}}
+{{- $styleClass.Set "yellow" "hx:border-yellow-100 hx:bg-yellow-50 hx:text-yellow-900 hx:dark:border-yellow-200/30 hx:dark:bg-yellow-700/30 hx:dark:text-yellow-200" -}}
+{{- $styleClass.Set "orange" "hx:border-orange-100 hx:bg-orange-50 hx:text-orange-800 hx:dark:border-orange-400/30 hx:dark:bg-orange-400/20 hx:dark:text-orange-300" -}}
+{{- $styleClass.Set "amber" "hx:border-amber-200 hx:bg-amber-100 hx:text-amber-900 hx:dark:border-amber-200/30 hx:dark:bg-amber-900/30 hx:dark:text-amber-200" -}}
+{{- $styleClass.Set "red" "hx:border-red-200 hx:bg-red-100 hx:text-red-900 hx:dark:border-red-200/30 hx:dark:bg-red-900/30 hx:dark:text-red-200" -}}
 
 {{- $borderClass := cond (eq $border true) "hx:border" "" -}}
-{{- $badgeClass := or ($styleClass.Get $type) $defaultClass -}}
+{{- $badgeClass := or ($styleClass.Get $color) ($styleClass.Get "gray") -}}
 <div class="hextra-badge {{ $class }}">
   <div class="hx:inline-flex hx:gap-1 hx:items-center hx:rounded-full hx:px-2.5 hx:leading-6 hx:text-[.65rem] {{ $borderClass }} {{ $badgeClass }}">
     {{- with $icon -}}{{- partial "utils/icon" (dict "name" . "attributes" "height=12") -}}{{- end -}}

layouts/_partials/shortcodes/card.html

@@ -7,7 +7,7 @@
 {{- $height := .height -}}
 {{- $imageStyle := .imageStyle -}}
 {{- $tag := .tag -}}
-{{- $tagType := .tagType -}}
+{{- $tagColor := .tagColor | default .tagType | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
 
 {{ $linkClass := "hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900" }}
 {{- with $image -}}
@@ -55,7 +55,7 @@
   {{- if $tag }}
     {{- partial "shortcodes/badge.html" (dict
       "content" $tag
-      "type" $tagType
+      "color" $tagColor
       "class" "hextra-card-tag"
       "border" true
       )

layouts/_shortcodes/badge.html

@@ -2,7 +2,7 @@
 A shortcode to create a badge.
 
 @param {string} content The content of the badge.
-@param {string} type The type of the badge.
+@param {string} color The color of the badge.
 @param {string} class The class of the badge.
 @param {string} link The link of the badge.
 @param {string} icon The icon of the badge.
@@ -11,23 +11,25 @@ or
 
 @param {string} 0 The content of the badge.
 
-@example {{< badge content="info" type="info" >}}
+@example {{< badge content="Badge" color="blue" >}}
+@example {{< badge "Badge" >}}
 */ -}}
 
 {{- if .IsNamedParams -}}
   {{- $content := .Get "content" -}}
-  {{- $type := .Get "type" | default "" -}}
+  {{- $color := .Get "color" | default (.Get "type") | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
   {{- $class := .Get "class" | default "" -}}
   {{- $link := .Get "link" | default "" -}}
   {{- $icon := .Get "icon" | default "" -}}
+  {{- $border := not (eq (.Get "border") false) | default true }}
 
   {{- if $link -}}
     <a href="{{ $link }}" title="{{ $content | plainify }}" target="_blank">
       {{- partial "shortcodes/badge.html" (dict
         "content" $content 
-        "type" $type
+        "color" $color
         "class" $class
-        "border" true
+        "border" $border
         "icon" $icon
         )
       -}}
@@ -35,9 +37,9 @@ or
   {{- else -}}
     {{- partial "shortcodes/badge.html" (dict
       "content" $content 
-      "type" $type
+      "color" $color
       "class" $class
-      "border" true
+      "border" $border
       "icon" $icon
       )
     -}}

layouts/_shortcodes/card.html

@@ -6,7 +6,7 @@ A shortcode to create a card.
 @param {string} icon The icon of the card.
 @param {string} subtitle The subtitle of the card.
 @param {string} tag The tag of the card.
-@param {string} tagType The type of the tag.
+@param {string} tagColor The color of the tag.
 @param {string} image The image of the card.
 @param {string} method The method to process the image.
 @param {string} options The options to process the image.
@@ -24,7 +24,7 @@ A shortcode to create a card.
 {{- $height := 0 -}}
 {{- $imageStyle := .Get "imageStyle" -}}
 {{- $tag := .Get "tag" -}}
-{{- $tagType := .Get "tagType" -}}
+{{- $tagColor := .Get "tagColor" | default (.Get "tagType") | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
 
 {{/* Image processing options */}}
 {{- $method := .Get "method" | default "Resize" | humanize -}}
@@ -60,6 +60,6 @@ A shortcode to create a card.
   "height"      $height
   "imageStyle"  $imageStyle
   "tag"         $tag
-  "tagType"     $tagType
+  "tagType"     $tagColor
   )
 -}}