feat: create tag plugin component (#17)

Co-authored-by: Sacha Stafyniak <sacha@digisquad.io>
shuriken-ui · Jul 23, 2023 · 5faae35 · 5faae35
1 parent 2d75a08
commit 5faae35
Show file tree

Hide file tree

Showing 3 changed files with 501 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -2026,6 +2026,168 @@ export default withShurikenUI({
           bgHover: 'black/20',
           bgHoverDark: 'white/20',
         },
+        tag: {
+          space: '3',
+          font: 'sans',
+          duration: '300',
+          tagSM: {
+            space: '1',
+            text: '[0.65rem]',
+          },
+          tagMD: {
+            space: '1.5',
+            text: 'xs',
+          },
+          rounded: {
+            smooth: 'md',
+            curved: 'lg',
+            full: 'full',
+          },
+          solid: {
+            default: {
+              text: 'muted-600',
+              textDark: 'muted-300',
+              bg: 'white',
+              bgDark: 'muted-800',
+              border: 'muted-300',
+              borderDark: 'muted-700',
+              shadow: 'xl',
+              shadowHover: 'xl',
+            },
+            muted: {
+              text: 'muted-500',
+              textDark: 'muted-200',
+              bg: 'muted-100',
+              bgDark: 'muted-800',
+              shadow: 'xl',
+              shadowHover: 'xl',
+            },
+            primary: {
+              text: 'white',
+              bg: 'primary-500',
+              bgDark: 'primary-500',
+              shadow: {
+                size: 'xl',
+                color: 'primary-500/30',
+                colorDark: 'primary-500/20',
+              },
+              shadowHover: {
+                size: 'xl',
+                color: 'primary-500/30',
+                colorDark: 'primary-500/20',
+              },
+            },
+            info: {
+              text: 'white',
+              bg: 'info-500',
+              bgDark: 'info-500',
+              shadow: {
+                size: 'xl',
+                color: 'info-500/30',
+                colorDark: 'info-500/20',
+              },
+              shadowHover: {
+                size: 'xl',
+                color: 'info-500/30',
+                colorDark: 'info-500/20',
+              },
+            },
+            success: {
+              text: 'white',
+              bg: 'success-500',
+              bgDark: 'success-500',
+              shadow: {
+                size: 'xl',
+                color: 'success-500/30',
+                colorDark: 'success-500/20',
+              },
+              shadowHover: {
+                size: 'xl',
+                color: 'success-500/30',
+                colorDark: 'success-500/20',
+              },
+            },
+            warning: {
+              text: 'white',
+              bg: 'warning-500',
+              bgDark: 'warning-500',
+              shadow: {
+                size: 'xl',
+                color: 'warning-500/30',
+                colorDark: 'warning-500/20',
+              },
+              shadowHover: {
+                size: 'xl',
+                color: 'warning-500/30',
+                colorDark: 'warning-500/20',
+              },
+            },
+            danger: {
+              text: 'white',
+              bg: 'danger-500',
+              bgDark: 'danger-500',
+              shadow: {
+                size: 'xl',
+                color: 'danger-500/30',
+                colorDark: 'danger-500/20',
+              },
+              shadowHover: {
+                size: 'xl',
+                color: 'danger-500/30',
+                colorDark: 'danger-500/20',
+              },
+            },
+          },
+          pastel: {
+            primary: {
+              bg: 'primary-500/20',
+              text: 'primary-500',
+              bgDark: 'primary-500/10',
+            },
+            info: {
+              bg: 'info-500/20',
+              text: 'info-500',
+              bgDark: 'info-500/10',
+            },
+            success: {
+              bg: 'success-500/20',
+              text: 'success-500',
+              bgDark: 'success-500/10',
+            },
+            warning: {
+              bg: 'warning-500/20',
+              text: 'warning-500',
+              bgDark: 'warning-500/10',
+            },
+            danger: {
+              bg: 'danger-500/20',
+              text: 'danger-500',
+              bgDark: 'danger-500/10',
+            },
+          },
+          outline: {
+            primary: {
+              border: 'primary-500',
+              text: 'primary-500',
+            },
+            info: {
+              border: 'info-500',
+              text: 'info-500',
+            },
+            success: {
+              border: 'success-500',
+              text: 'success-500',
+            },
+            warning: {
+              border: 'warning-500',
+              text: 'warning-500',
+            },
+            danger: {
+              border: 'danger-500',
+              text: 'danger-500',
+            },
+          },
+        },
         text: {
           textXS: 'xs',
           textSM: 'sm',

diff --git a/src/plugins/components/index.ts b/src/plugins/components/index.ts
@@ -34,6 +34,7 @@ import switchThin from './switch-thin'
 import switchBall from './switch-ball'
 import textarea from './textarea'
 import tooltip from './tooltip'
+import tag from './tag'
 import breadcrumb from './breadcrumb'
 
 const components = [
@@ -65,6 +66,7 @@ const components = [
   radio,
   progressCircle,
   slimscroll,
+  tag,
   text,
   switchThin,
   switchBall,