@betterstart/cli 0.1.2 → 0.1.4

package/templates/tiptap/tiptap-ui-primitive/badge/badge-colors.scss

@@ -0,0 +1,395 @@
+.tiptap-badge {
+  /************************************************** 
+    Default 
+  **************************************************/
+
+  /* Light mode */
+  --tt-badge-border-color: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
+  --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
+  --tt-badge-text-color: var(--tt-gray-light-a-500);
+  --tt-badge-text-color-subdued: var(
+    --tt-gray-light-a-400
+  ); //less important badge
+  --tt-badge-text-color-emphasized: var(
+    --tt-gray-light-a-600
+  ); //more important badge
+  --tt-badge-bg-color: var(--white);
+  --tt-badge-bg-color-subdued: var(--white); //less important badge
+  --tt-badge-bg-color-emphasized: var(--white); //more important badge
+  --tt-badge-icon-color: var(--tt-gray-light-a-500);
+  --tt-badge-icon-color-subdued: var(
+    --tt-gray-light-a-400
+  ); //less important badge
+  --tt-badge-icon-color-emphasized: var(
+    --tt-brand-color-600
+  ); //more important badge
+
+  /* Dark mode */
+  .dark & {
+    --tt-badge-border-color: var(--tt-gray-dark-a-200);
+    --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
+    --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
+    --tt-badge-text-color: var(--tt-gray-dark-a-500);
+    --tt-badge-text-color-subdued: var(
+      --tt-gray-dark-a-400
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-gray-dark-a-600
+    ); //more important badge
+    --tt-badge-bg-color: var(--black);
+    --tt-badge-bg-color-subdued: var(--black); //less important badge
+    --tt-badge-bg-color-emphasized: var(--black); //more important badge
+    --tt-badge-icon-color: var(--tt-gray-dark-a-500);
+    --tt-badge-icon-color-subdued: var(
+      --tt-gray-dark-a-400
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-brand-color-400
+    ); //more important badge
+  }
+
+  /************************************************** 
+    Ghost 
+  **************************************************/
+
+  &[data-style="ghost"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-gray-light-a-200);
+    --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
+    --tt-badge-border-color-emphasized: var(--tt-gray-light-a-600);
+    --tt-badge-text-color: var(--tt-gray-light-a-500);
+    --tt-badge-text-color-subdued: var(
+      --tt-gray-light-a-400
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-gray-light-a-600
+    ); //more important badge
+    --tt-badge-bg-color: var(--transparent);
+    --tt-badge-bg-color-subdued: var(--transparent); //less important badge
+    --tt-badge-bg-color-emphasized: var(--transparent); //more important badge
+    --tt-badge-icon-color: var(--tt-gray-light-a-500);
+    --tt-badge-icon-color-subdued: var(
+      --tt-gray-light-a-400
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-brand-color-600
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-gray-dark-a-200);
+      --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
+      --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
+      --tt-badge-text-color: var(--tt-gray-dark-a-500);
+      --tt-badge-text-color-subdued: var(
+        --tt-gray-dark-a-400
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-gray-dark-a-600
+      ); //more important badge
+      --tt-badge-bg-color: var(--transparent);
+      --tt-badge-bg-color-subdued: var(--transparent); //less important badge
+      --tt-badge-bg-color-emphasized: var(--transparent); //more important badge
+      --tt-badge-icon-color: var(--tt-gray-dark-a-500);
+      --tt-badge-icon-color-subdued: var(
+        --tt-gray-dark-a-400
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-brand-color-400
+      ); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Gray 
+  **************************************************/
+
+  &[data-style="gray"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-gray-light-a-200);
+    --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
+    --tt-badge-border-color-emphasized: var(--tt-gray-light-a-500);
+    --tt-badge-text-color: var(--tt-gray-light-a-500);
+    --tt-badge-text-color-subdued: var(
+      --tt-gray-light-a-400
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(--white); //more important badge
+    --tt-badge-bg-color: var(--tt-gray-light-a-100);
+    --tt-badge-bg-color-subdued: var(
+      --tt-gray-light-a-50
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-gray-light-a-700
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-gray-light-a-500);
+    --tt-badge-icon-color-subdued: var(
+      --tt-gray-light-a-400
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(--white); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-gray-dark-a-200);
+      --tt-badge-border-color-subdued: var(--tt-gray-dark-a-200);
+      --tt-badge-border-color-emphasized: var(--tt-gray-dark-a-500);
+      --tt-badge-text-color: var(--tt-gray-dark-a-500);
+      --tt-badge-text-color-subdued: var(
+        --tt-gray-dark-a-400
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(--black); //more important badge
+      --tt-badge-bg-color: var(--tt-gray-dark-a-100);
+      --tt-badge-bg-color-subdued: var(
+        --tt-gray-dark-a-50
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-gray-dark-a-800
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-gray-dark-a-500);
+      --tt-badge-icon-color-subdued: var(
+        --tt-gray-dark-a-400
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(--black); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Green 
+  **************************************************/
+
+  &[data-style="green"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-color-green-inc-2);
+    --tt-badge-border-color-subdued: var(--tt-color-green-inc-3);
+    --tt-badge-border-color-emphasized: var(--tt-color-green-dec-2);
+    --tt-badge-text-color: var(--tt-color-green-dec-3);
+    --tt-badge-text-color-subdued: var(
+      --tt-color-green-dec-2
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-color-green-inc-5
+    ); //more important badge
+    --tt-badge-bg-color: var(--tt-color-green-inc-4);
+    --tt-badge-bg-color-subdued: var(
+      --tt-color-green-inc-5
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-color-green-dec-1
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-color-green-dec-3);
+    --tt-badge-icon-color-subdued: var(
+      --tt-color-green-dec-2
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-color-green-inc-5
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-color-green-dec-2);
+      --tt-badge-border-color-subdued: var(--tt-color-green-dec-3);
+      --tt-badge-border-color-emphasized: var(--tt-color-green-base);
+      --tt-badge-text-color: var(--tt-color-green-inc-3);
+      --tt-badge-text-color-subdued: var(
+        --tt-color-green-inc-2
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-color-green-dec-5
+      ); //more important badge
+      --tt-badge-bg-color: var(--tt-color-green-dec-4);
+      --tt-badge-bg-color-subdued: var(
+        --tt-color-green-dec-5
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-color-green-inc-1
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-color-green-inc-3);
+      --tt-badge-icon-color-subdued: var(
+        --tt-color-green-inc-2
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-color-green-dec-5
+      ); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Yellow 
+  **************************************************/
+
+  &[data-style="yellow"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-color-yellow-inc-2);
+    --tt-badge-border-color-subdued: var(--tt-color-yellow-inc-3);
+    --tt-badge-border-color-emphasized: var(--tt-color-yellow-dec-1);
+    --tt-badge-text-color: var(--tt-color-yellow-dec-3);
+    --tt-badge-text-color-subdued: var(
+      --tt-color-yellow-dec-2
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-color-yellow-dec-3
+    ); //more important badge
+    --tt-badge-bg-color: var(--tt-color-yellow-inc-4);
+    --tt-badge-bg-color-subdued: var(
+      --tt-color-yellow-inc-5
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-color-yellow-base
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-color-yellow-dec-3);
+    --tt-badge-icon-color-subdued: var(
+      --tt-color-yellow-dec-2
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-color-yellow-dec-3
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-color-yellow-dec-2);
+      --tt-badge-border-color-subdued: var(--tt-color-yellow-dec-3);
+      --tt-badge-border-color-emphasized: var(--tt-color-yellow-inc-1);
+      --tt-badge-text-color: var(--tt-color-yellow-inc-3);
+      --tt-badge-text-color-subdued: var(
+        --tt-color-yellow-inc-2
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-color-yellow-dec-3
+      ); //more important badge
+      --tt-badge-bg-color: var(--tt-color-yellow-dec-4);
+      --tt-badge-bg-color-subdued: var(
+        --tt-color-yellow-dec-5
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-color-yellow-base
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-color-yellow-inc-3);
+      --tt-badge-icon-color-subdued: var(
+        --tt-color-yellow-inc-2
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-color-yellow-dec-3
+      ); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Red 
+  **************************************************/
+
+  &[data-style="red"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-color-red-inc-2);
+    --tt-badge-border-color-subdued: var(--tt-color-red-inc-3);
+    --tt-badge-border-color-emphasized: var(--tt-color-red-dec-2);
+    --tt-badge-text-color: var(--tt-color-red-dec-3);
+    --tt-badge-text-color-subdued: var(
+      --tt-color-red-dec-2
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-color-red-inc-5
+    ); //more important badge
+    --tt-badge-bg-color: var(--tt-color-red-inc-4);
+    --tt-badge-bg-color-subdued: var(
+      --tt-color-red-inc-5
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-color-red-dec-1
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-color-red-dec-3);
+    --tt-badge-icon-color-subdued: var(
+      --tt-color-red-dec-2
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-color-red-inc-5
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-color-red-dec-2);
+      --tt-badge-border-color-subdued: var(--tt-color-red-dec-3);
+      --tt-badge-border-color-emphasized: var(--tt-color-red-base);
+      --tt-badge-text-color: var(--tt-color-red-inc-3);
+      --tt-badge-text-color-subdued: var(
+        --tt-color-red-inc-2
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-color-red-dec-5
+      ); //more important badge
+      --tt-badge-bg-color: var(--tt-color-red-dec-4);
+      --tt-badge-bg-color-subdued: var(
+        --tt-color-red-dec-5
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-color-red-inc-1
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-color-red-inc-3);
+      --tt-badge-icon-color-subdued: var(
+        --tt-color-red-inc-2
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-color-red-dec-5
+      ); //more important badge
+    }
+  }
+
+  /************************************************** 
+    Brand 
+  **************************************************/
+
+  &[data-style="brand"] {
+    /* Light mode */
+    --tt-badge-border-color: var(--tt-brand-color-300);
+    --tt-badge-border-color-subdued: var(--tt-brand-color-200);
+    --tt-badge-border-color-emphasized: var(--tt-brand-color-600);
+    --tt-badge-text-color: var(--tt-brand-color-800);
+    --tt-badge-text-color-subdued: var(
+      --tt-brand-color-700
+    ); //less important badge
+    --tt-badge-text-color-emphasized: var(
+      --tt-brand-color-50
+    ); //more important badge
+    --tt-badge-bg-color: var(--tt-brand-color-100);
+    --tt-badge-bg-color-subdued: var(
+      --tt-brand-color-50
+    ); //less important badge
+    --tt-badge-bg-color-emphasized: var(
+      --tt-brand-color-600
+    ); //more important badge
+    --tt-badge-icon-color: var(--tt-brand-color-800);
+    --tt-badge-icon-color-subdued: var(
+      --tt-brand-color-700
+    ); //less important badge
+    --tt-badge-icon-color-emphasized: var(
+      --tt-brand-color-100
+    ); //more important badge
+
+    /* Dark mode */
+    .dark & {
+      --tt-badge-border-color: var(--tt-brand-color-700);
+      --tt-badge-border-color-subdued: var(--tt-brand-color-800);
+      --tt-badge-border-color-emphasized: var(--tt-brand-color-400);
+      --tt-badge-text-color: var(--tt-brand-color-200);
+      --tt-badge-text-color-subdued: var(
+        --tt-brand-color-300
+      ); //less important badge
+      --tt-badge-text-color-emphasized: var(
+        --tt-brand-color-950
+      ); //more important badge
+      --tt-badge-bg-color: var(--tt-brand-color-900);
+      --tt-badge-bg-color-subdued: var(
+        --tt-brand-color-950
+      ); //less important badge
+      --tt-badge-bg-color-emphasized: var(
+        --tt-brand-color-400
+      ); //more important badge
+      --tt-badge-icon-color: var(--tt-brand-color-200);
+      --tt-badge-icon-color-subdued: var(
+        --tt-brand-color-300
+      ); //less important badge
+      --tt-badge-icon-color-emphasized: var(
+        --tt-brand-color-900
+      ); //more important badge
+    }
+  }
+}

package/templates/tiptap/tiptap-ui-primitive/badge/badge-group.scss

@@ -0,0 +1,16 @@
+.tiptap-badge-group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.tiptap-badge-group {
+  [data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  [data-orientation="horizontal"] {
+    flex-direction: row;
+  }
+}

package/templates/tiptap/tiptap-ui-primitive/badge/badge.scss

@@ -0,0 +1,99 @@
+.tiptap-badge {
+  font-size: 0.625rem;
+  font-weight: 700;
+  font-feature-settings:
+    "salt" on,
+    "cv01" on;
+  line-height: 1.15;
+  height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: solid 1px;
+  border-radius: var(--tt-radius-sm, 0.375rem);
+  transition-property: background, color, opacity;
+  transition-duration: var(--tt-transition-duration-default);
+  transition-timing-function: var(--tt-transition-easing-default);
+
+  /* button size large */
+  &[data-size="large"] {
+    font-size: 0.75rem;
+    height: 1.5rem;
+    min-width: 1.5rem;
+    padding: 0.375rem;
+    border-radius: var(--tt-radius-md, 0.375rem);
+  }
+
+  /* button size small */
+  &[data-size="small"] {
+    height: 1rem;
+    min-width: 1rem;
+    padding: 0.125rem;
+    border-radius: var(--tt-radius-xs, 0.25rem);
+  }
+
+  /* trim / expand text of the button */
+  .tiptap-badge-text {
+    padding: 0 0.125rem;
+    flex-grow: 1;
+    text-align: left;
+  }
+
+  &[data-text-trim="on"] {
+    .tiptap-badge-text {
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+
+  /* standard icon, what is used */
+  .tiptap-badge-icon {
+    pointer-events: none;
+    flex-shrink: 0;
+    width: 0.625rem;
+    height: 0.625rem;
+  }
+
+  &[data-size="large"] .tiptap-badge-icon {
+    width: 0.75rem;
+    height: 0.75rem;
+  }
+}
+
+/* --------------------------------------------
+----------- BADGE COLOR SETTINGS -------------
+-------------------------------------------- */
+
+.tiptap-badge {
+  background-color: var(--tt-badge-bg-color);
+  border-color: var(--tt-badge-border-color);
+  color: var(--tt-badge-text-color);
+
+  .tiptap-badge-icon {
+    color: var(--tt-badge-icon-color);
+  }
+
+  /* Emphasized */
+  &[data-appearance="emphasized"] {
+    background-color: var(--tt-badge-bg-color-emphasized);
+    border-color: var(--tt-badge-border-color-emphasized);
+    color: var(--tt-badge-text-color-emphasized);
+
+    .tiptap-badge-icon {
+      color: var(--tt-badge-icon-color-emphasized);
+    }
+  }
+
+  /* Subdued */
+  &[data-appearance="subdued"] {
+    background-color: var(--tt-badge-bg-color-subdued);
+    border-color: var(--tt-badge-border-color-subdued);
+    color: var(--tt-badge-text-color-subdued);
+
+    .tiptap-badge-icon {
+      color: var(--tt-badge-icon-color-subdued);
+    }
+  }
+}

package/templates/tiptap/tiptap-ui-primitive/badge/badge.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { forwardRef } from 'react'
+import './badge-colors.scss'
+import './badge-group.scss'
+import './badge.scss'
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'ghost' | 'white' | 'gray' | 'green' | 'default'
+  size?: 'default' | 'small'
+  appearance?: 'default' | 'subdued' | 'emphasized'
+  trimText?: boolean
+}
+
+export const Badge = forwardRef<HTMLDivElement, BadgeProps>(
+  (
+    {
+      variant,
+      size = 'default',
+      appearance = 'default',
+      trimText = false,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div
+        ref={ref}
+        className={`tiptap-badge ${className || ''}`}
+        data-style={variant}
+        data-size={size}
+        data-appearance={appearance}
+        data-text-trim={trimText ? 'on' : 'off'}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+)
+
+Badge.displayName = 'Badge'
+
+export default Badge

package/templates/tiptap/tiptap-ui-primitive/badge/index.tsx

@@ -0,0 +1 @@
+export * from './badge'