trepur_components 2.3.7 → 2.3.9

package/tailwind/colors.ts

@@ -1,410 +1,78 @@
 /* eslint-disable sort-keys */
 export default {
-  focus: 'hsl(var(--hsl-focus))',
-  overlay: 'hsl(var(--hsl-overlay))',
-  page: 'hsl(var(--hsl-page))',
-  // General
-  active: {
-    DEFAULT: 'hsl(var(--hsl-active))',
-    foreground: 'hsl(var(--hsl-active-foreground))',
+  primary: 'var(--color-primary)',
+  secondary: 'var(--color-secondary)',
+  tertiary: 'var(--color-tertiary)',
+  star: 'var(--color-star)',
+  nav: 'var(--color-nav)',
+  footer: {
+    bg: 'var(--color-footer-bg)',
+    text: 'var(--color-footer-text)',
   },
-  inactive: {
-    DEFAULT: 'hsl(var(--hsl-inactive))',
-    foreground: 'hsl(var(--hsl-inactive-foreground))',
-    readonly: 'hsl(var(--hsl-inactive-readonly))',
-    subtle: 'hsl(var(--hsl-inactive-subtle))',
-  },
-  border: {
-    DEFAULT: 'hsl(var(--hsl-border))',
-    secondary: 'hsl(var(--hsl-border-secondary))',
-    tertiary: 'hsl(var(--hsl-border-tertiary))',
-    inverse: 'hsl(var(--hsl-border-inverse))',
-  },
-  foreground: {
-    DEFAULT: 'hsl(var(--hsl-foreground))',
-    secondary: 'hsl(var(--hsl-foreground-secondary))',
-    tertiary: 'hsl(var(--hsl-foreground-tertiary))',
-    inverse: 'hsl(var(--hsl-foreground-inverse))',
-  },
-  skeleton: {
-    DEFAULT: 'hsl(var(--hsl-skeleton))',
-    inverse: 'hsl(var(--hsl-skeleton-inverse))',
-  },
-  textlink: {
-    DEFAULT: 'hsl(var(--hsl-textlink))',
-    hover: 'hsl(var(--hsl-textlink-hover))',
-  },
-  dataviz: {
-    1: 'hsl(var(--hsl-dataviz-1))',
-    2: 'hsl(var(--hsl-dataviz-2))',
-    3: 'hsl(var(--hsl-dataviz-3))',
-    4: 'hsl(var(--hsl-dataviz-4))',
-    5: 'hsl(var(--hsl-dataviz-5))',
-    6: 'hsl(var(--hsl-dataviz-6))',
-    7: 'hsl(var(--hsl-dataviz-7))',
-    8: 'hsl(var(--hsl-dataviz-8))',
-    9: 'hsl(var(--hsl-dataviz-9))',
-    10: 'hsl(var(--hsl-dataviz-10))',
-    11: 'hsl(var(--hsl-dataviz-11))',
-    12: 'hsl(var(--hsl-dataviz-12))',
-    13: 'hsl(var(--hsl-dataviz-13))',
-    14: 'hsl(var(--hsl-dataviz-14))',
-    15: 'hsl(var(--hsl-dataviz-15))',
-    16: 'hsl(var(--hsl-dataviz-16))',
-  },
-  // Contextual
   error: {
-    DEFAULT: 'hsl(var(--hsl-error))',
-    border: 'hsl(var(--hsl-error-border))',
-    hover: 'hsl(var(--hsl-error-hover))',
-    press: 'hsl(var(--hsl-error-press))',
-    skeleton: 'hsl(var(--hsl-error-skeleton))',
-    accent: 'hsl(var(--hsl-error-accent))',
-    foreground: 'hsl(var(--hsl-error-foreground))',
-    secondary: 'hsl(var(--hsl-error-secondary))',
+    default: 'var(--color-error-default)',
+    light: 'var(--color-error-light)',
+  },
+  warning: {
+    default: 'var(--color-warning-default)',
+    light: 'var(--color-warning-light)',
   },
   info: {
-    DEFAULT: 'hsl(var(--hsl-info))',
-    border: 'hsl(var(--hsl-info-border))',
-    hover: 'hsl(var(--hsl-info-hover))',
-    press: 'hsl(var(--hsl-info-press))',
-    skeleton: 'hsl(var(--hsl-info-skeleton))',
-    accent: 'hsl(var(--hsl-info-accent))',
-    foreground: 'hsl(var(--hsl-info-foreground))',
-    secondary: 'hsl(var(--hsl-info-secondary))',
+    default: 'var(--color-info-default)',
+    light: 'var(--color-info-light)',
   },
   success: {
-    DEFAULT: 'hsl(var(--hsl-success))',
-    border: 'hsl(var(--hsl-success-border))',
-    hover: 'hsl(var(--hsl-success-hover))',
-    press: 'hsl(var(--hsl-success-press))',
-    skeleton: 'hsl(var(--hsl-success-skeleton))',
-    accent: 'hsl(var(--hsl-success-accent))',
-    foreground: 'hsl(var(--hsl-success-foreground))',
-    secondary: 'hsl(var(--hsl-success-secondary))',
-  },
-  warning: {
-    DEFAULT: 'hsl(var(--hsl-warning))',
-    border: 'hsl(var(--hsl-warning-border))',
-    hover: 'hsl(var(--hsl-warning-hover))',
-    press: 'hsl(var(--hsl-warning-press))',
-    skeleton: 'hsl(var(--hsl-warning-skeleton))',
-    accent: 'hsl(var(--hsl-warning-accent))',
-    foreground: 'hsl(var(--hsl-warning-foreground))',
-    secondary: 'hsl(var(--hsl-warning-secondary))',
+    default: 'var(--color-success-default)',
+    light: 'var(--color-success-light)',
   },
-  // Components
   button: {
     primary: {
-      DEFAULT: 'hsl(var(--hsl-button-primary))',
-      hover: 'hsl(var(--hsl-button-primary-hover))',
-      press: 'hsl(var(--hsl-button-primary-press))',
-      skeleton: 'hsl(var(--hsl-button-primary-skeleton))',
-      foreground: 'hsl(var(--hsl-button-primary-foreground))',
+      active: 'var(--color-button-primary-active)',
+      border: 'var(--color-button-primary-border)',
+      bg: 'var(--color-button-primary-bg)',
+      text: 'var(--color-button-primary-text)',
+      hover: 'var(--color-button-primary-hover)',
     },
     secondary: {
-      DEFAULT: 'hsl(var(--hsl-button-secondary))',
-      hover: 'hsl(var(--hsl-button-secondary-hover))',
-      press: 'hsl(var(--hsl-button-secondary-press))',
-      skeleton: 'hsl(var(--hsl-button-secondary-skeleton))',
-      foreground: 'hsl(var(--hsl-button-secondary-foreground))',
-    },
-    group: {
-      DEFAULT: 'hsl(var(--hsl-button-group))',
-      hover: 'hsl(var(--hsl-button-group-hover))',
-      press: 'hsl(var(--hsl-button-group-press))',
-      skeleton: 'hsl(var(--hsl-button-group-skeleton))',
-      foreground: 'hsl(var(--hsl-button-group-foreground))',
-    },
-    outline: {
-      hover: 'hsl(var(--hsl-button-outline-hover))',
-      press: 'hsl(var(--hsl-button-outline-press))',
-      skeleton: 'hsl(var(--hsl-button-outline-skeleton))',
-      foreground: 'hsl(var(--hsl-button-outline-foreground))',
+      active: 'var(--color-button-secondary-active)',
+      border: 'var(--color-button-secondary-border)',
+      bg: 'var(--color-button-secondary-bg)',
+      text: 'var(--color-button-secondary-text)',
+      hover: 'var(--color-button-secondary-hover)',
     },
     ghost: {
-      hover: 'hsl(var(--hsl-button-ghost-hover))',
-      press: 'hsl(var(--hsl-button-ghost-press))',
-      foreground: 'hsl(var(--hsl-button-ghost-foreground))',
-    },
-    inverse: {
-      hover: 'hsl(var(--hsl-button-inverse-hover))',
-      press: 'hsl(var(--hsl-button-inverse-press))',
-    },
-    disabled: {
-      DEFAULT: 'hsl(var(--hsl-button-disabled))',
-      foreground: 'hsl(var(--hsl-button-disabled-foreground))',
-      'foreground-actionbutton':
-        'hsl(var(--hsl-button-disabled-foreground-actionbutton))',
-      'foreground-group': 'hsl(var(--hsl-button-disabled-foreground-group))',
-      inverse: 'hsl(var(--hsl-button-disabled-inverse))',
-      'inverse-foreground':
-        'hsl(var(--hsl-button-disabled-inverse-foreground))',
-    },
-  },
-
-  card: {
-    DEFAULT: 'hsl(var(--hsl-card))',
-    secondary: 'hsl(var(--hsl-card-secondary))',
-    tertiary: 'hsl(var(--hsl-card-tertiary))',
-    quaternary: 'hsl(var(--hsl-card-quaternary))',
-    inverse: 'hsl(var(--hsl-card-inverse))',
-  },
-
-  lozenge: {
-    blue: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-blue))',
-      hover: 'hsl(var(--hsl-lozenge-blue-hover))',
-      press: 'hsl(var(--hsl-lozenge-blue-press))',
-    },
-    cyan: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-cyan))',
-      hover: 'hsl(var(--hsl-lozenge-cyan-hover))',
-      press: 'hsl(var(--hsl-lozenge-cyan-press))',
-    },
-    fuchsia: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-fuchsia))',
-      hover: 'hsl(var(--hsl-lozenge-fuchsia-hover))',
-      press: 'hsl(var(--hsl-lozenge-fuchsia-press))',
-    },
-    neutral: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-neutral))',
-      hover: 'hsl(var(--hsl-lozenge-neutral-hover))',
-      press: 'hsl(var(--hsl-lozenge-neutral-press))',
-    },
-    orange: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-orange))',
-      hover: 'hsl(var(--hsl-lozenge-orange-hover))',
-      press: 'hsl(var(--hsl-lozenge-orange-press))',
-    },
-    purple: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-purple))',
-      hover: 'hsl(var(--hsl-lozenge-purple-hover))',
-      press: 'hsl(var(--hsl-lozenge-purple-press))',
-    },
-    teal: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-teal))',
-      hover: 'hsl(var(--hsl-lozenge-teal-hover))',
-      press: 'hsl(var(--hsl-lozenge-teal-press))',
-    },
-    white: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-white))',
-      hover: 'hsl(var(--hsl-lozenge-white-hover))',
-      press: 'hsl(var(--hsl-lozenge-white-press))',
-    },
-    yellow: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-yellow))',
-      hover: 'hsl(var(--hsl-lozenge-yellow-hover))',
-      press: 'hsl(var(--hsl-lozenge-yellow-press))',
-    },
-    green: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-green))',
-      hover: 'hsl(var(--hsl-lozenge-green-hover))',
-      press: 'hsl(var(--hsl-lozenge-green-press))',
-    },
-    red: {
-      DEFAULT: 'hsl(var(--hsl-lozenge-red))',
-      hover: 'hsl(var(--hsl-lozenge-red-hover))',
-      press: 'hsl(var(--hsl-lozenge-red-press))',
+      active: 'var(--color-button-ghost-active)',
+      border: 'var(--color-button-ghost-border)',
+      bg: 'var(--color-button-ghost-bg)',
+      text: 'var(--color-button-ghost-text)',
+      hover: 'var(--color-button-ghost-hover)',
     },
   },
-
-  sidebar: {
-    DEFAULT: 'hsl(var(--hsl-sidebar))',
-    active: 'hsl(var(--hsl-sidebar-active))',
-    foreground: {
-      DEFAULT: 'hsl(var(--hsl-sidebar-foreground))',
-      secondary: 'hsl(var(--hsl-sidebar-foreground-secondary))',
+  tubestop: {
+    station: {
+      active: 'var(--color-tubestop-station-active)',
+      complete: 'var(--color-tubestop-station-complete)',
+      future: 'var(--color-tubestop-station-future)',
     },
-    hover: 'hsl(var(--hsl-sidebar-hover))',
-    skeleton: 'hsl(var(--hsl-sidebar-skeleton))',
-    border: 'hsl(var(--hsl-sidebar-border))',
-  },
-
-  switch: {
-    off: {
-      DEFAULT: 'hsl(var(--hsl-switch-off))',
-      hover: 'hsl(var(--hsl-switch-off-hover))',
-      disabled: 'hsl(var(--hsl-switch-off-disabled))',
-      foreground: 'hsl(var(--hsl-switch-off-foreground))',
+    line: {
+      complete: 'var(--color-tubestop-line-complete)',
+      future: 'var(--color-tubestop-line-future)',
     },
-    on: {
-      DEFAULT: 'hsl(var(--hsl-switch-on))',
-      hover: 'hsl(var(--hsl-switch-on-hover))',
-      foreground: 'hsl(var(--hsl-switch-on-foreground))',
-      disabled: {
-        DEFAULT: 'hsl(var(--hsl-switch-on-disabled))',
-        foreground: 'hsl(var(--hsl-switch-on-disabled-foreground))',
-      },
+    text: {
+      active: 'var(--color-tubestop-text-active)',
+      complete: 'var(--color-tubestop-text-complete)',
+      future: 'var(--color-tubestop-text-future)',
     },
   },
-  tag: {
-    neutral: {
-      DEFAULT: 'hsl(var(--hsl-tag-neutral))',
-      border: 'hsl(var(--hsl-tag-neutral-border))',
-    },
-    blue: {
-      DEFAULT: 'hsl(var(--hsl-tag-blue))',
-      border: 'hsl(var(--hsl-tag-blue-border))',
-    },
-    cyan: {
-      DEFAULT: 'hsl(var(--hsl-tag-cyan))',
-      border: 'hsl(var(--hsl-tag-cyan-border))',
-    },
-    fuchsia: {
-      DEFAULT: 'hsl(var(--hsl-tag-fuchsia))',
-      border: 'hsl(var(--hsl-tag-fuchsia-border))',
-    },
-    green: {
-      DEFAULT: 'hsl(var(--hsl-tag-green))',
-      border: 'hsl(var(--hsl-tag-green-border))',
-    },
-    orange: {
-      DEFAULT: 'hsl(var(--hsl-tag-orange))',
-      border: 'hsl(var(--hsl-tag-orange-border))',
-    },
-    purple: {
-      DEFAULT: 'hsl(var(--hsl-tag-purple))',
-      border: 'hsl(var(--hsl-tag-purple-border))',
-    },
-    red: {
-      DEFAULT: 'hsl(var(--hsl-tag-red))',
-      border: 'hsl(var(--hsl-tag-red-border))',
+  carousel: {
+    arrow: {
+      default: 'var(--color-carousel-arrow-default)',
+      hover: 'var(--color-carousel-arrow-hover)',
     },
-    teal: {
-      DEFAULT: 'hsl(var(--hsl-tag-teal))',
-      border: 'hsl(var(--hsl-tag-teal-border))',
+    dots: {
+      default: 'var(--color-carousel-dots-inactive)',
+      active: 'var(--color-carousel-dots-active)',
+      hover: 'var(--color-carousel-dots-hover)',
     },
-    yellow: {
-      DEFAULT: 'hsl(var(--hsl-tag-yellow))',
-      border: 'hsl(var(--hsl-tag-yellow-border))',
-    },
-  },
-  // Palette
-  blue: {
-    10: 'hsl(var(--hsl-blue-10))',
-    20: 'hsl(var(--hsl-blue-20))',
-    30: 'hsl(var(--hsl-blue-30))',
-    40: 'hsl(var(--hsl-blue-40))',
-    50: 'hsl(var(--hsl-blue-50))',
-    60: 'hsl(var(--hsl-blue-60))',
-    70: 'hsl(var(--hsl-blue-70))',
-    80: 'hsl(var(--hsl-blue-80))',
-    90: 'hsl(var(--hsl-blue-90))',
-    100: 'hsl(var(--hsl-blue-100))',
-  },
-  cyan: {
-    10: 'hsl(var(--hsl-cyan-10))',
-    20: 'hsl(var(--hsl-cyan-20))',
-    30: 'hsl(var(--hsl-cyan-30))',
-    40: 'hsl(var(--hsl-cyan-40))',
-    50: 'hsl(var(--hsl-cyan-50))',
-    60: 'hsl(var(--hsl-cyan-60))',
-    70: 'hsl(var(--hsl-cyan-70))',
-    80: 'hsl(var(--hsl-cyan-80))',
-    90: 'hsl(var(--hsl-cyan-90))',
-    100: 'hsl(var(--hsl-cyan-100))',
-  },
-  fuchsia: {
-    10: 'hsl(var(--hsl-fuchsia-10))',
-    20: 'hsl(var(--hsl-fuchsia-20))',
-    30: 'hsl(var(--hsl-fuchsia-30))',
-    40: 'hsl(var(--hsl-fuchsia-40))',
-    50: 'hsl(var(--hsl-fuchsia-50))',
-    60: 'hsl(var(--hsl-fuchsia-60))',
-    70: 'hsl(var(--hsl-fuchsia-70))',
-    80: 'hsl(var(--hsl-fuchsia-80))',
-    90: 'hsl(var(--hsl-fuchsia-90))',
-    100: 'hsl(var(--hsl-fuchsia-100))',
-  },
-  green: {
-    10: 'hsl(var(--hsl-green-10))',
-    20: 'hsl(var(--hsl-green-20))',
-    30: 'hsl(var(--hsl-green-30))',
-    40: 'hsl(var(--hsl-green-40))',
-    50: 'hsl(var(--hsl-green-50))',
-    60: 'hsl(var(--hsl-green-60))',
-    70: 'hsl(var(--hsl-green-70))',
-    80: 'hsl(var(--hsl-green-80))',
-    90: 'hsl(var(--hsl-green-90))',
-    100: 'hsl(var(--hsl-green-100))',
-  },
-  neutral: {
-    1: 'hsl(var(--hsl-neutral-1))',
-    5: 'hsl(var(--hsl-neutral-5))',
-    10: 'hsl(var(--hsl-neutral-10))',
-    15: 'hsl(var(--hsl-neutral-15))',
-    20: 'hsl(var(--hsl-neutral-20))',
-    25: 'hsl(var(--hsl-neutral-25))',
-    30: 'hsl(var(--hsl-neutral-30))',
-    40: 'hsl(var(--hsl-neutral-40))',
-    50: 'hsl(var(--hsl-neutral-50))',
-    60: 'hsl(var(--hsl-neutral-60))',
-    70: 'hsl(var(--hsl-neutral-70))',
-    80: 'hsl(var(--hsl-neutral-80))',
-    85: 'hsl(var(--hsl-neutral-85))',
-    90: 'hsl(var(--hsl-neutral-90))',
-    95: 'hsl(var(--hsl-neutral-95))',
-    99: 'hsl(var(--hsl-neutral-99))',
-  },
-  orange: {
-    10: 'hsl(var(--hsl-orange-10))',
-    20: 'hsl(var(--hsl-orange-20))',
-    30: 'hsl(var(--hsl-orange-30))',
-    40: 'hsl(var(--hsl-orange-40))',
-    50: 'hsl(var(--hsl-orange-50))',
-    60: 'hsl(var(--hsl-orange-60))',
-    70: 'hsl(var(--hsl-orange-70))',
-    80: 'hsl(var(--hsl-orange-80))',
-    90: 'hsl(var(--hsl-orange-90))',
-    100: 'hsl(var(--hsl-orange-100))',
-  },
-  purple: {
-    10: 'hsl(var(--hsl-purple-10))',
-    20: 'hsl(var(--hsl-purple-20))',
-    30: 'hsl(var(--hsl-purple-30))',
-    40: 'hsl(var(--hsl-purple-40))',
-    50: 'hsl(var(--hsl-purple-50))',
-    60: 'hsl(var(--hsl-purple-60))',
-    70: 'hsl(var(--hsl-purple-70))',
-    80: 'hsl(var(--hsl-purple-80))',
-    90: 'hsl(var(--hsl-purple-90))',
-    100: 'hsl(var(--hsl-purple-100))',
-  },
-  red: {
-    10: 'hsl(var(--hsl-red-10))',
-    20: 'hsl(var(--hsl-red-20))',
-    30: 'hsl(var(--hsl-red-30))',
-    40: 'hsl(var(--hsl-red-40))',
-    50: 'hsl(var(--hsl-red-50))',
-    60: 'hsl(var(--hsl-red-60))',
-    70: 'hsl(var(--hsl-red-70))',
-    80: 'hsl(var(--hsl-red-80))',
-    90: 'hsl(var(--hsl-red-90))',
-    100: 'hsl(var(--hsl-red-100))',
-  },
-  teal: {
-    10: 'hsl(var(--hsl-teal-10))',
-    20: 'hsl(var(--hsl-teal-20))',
-    30: 'hsl(var(--hsl-teal-30))',
-    40: 'hsl(var(--hsl-teal-40))',
-    50: 'hsl(var(--hsl-teal-50))',
-    60: 'hsl(var(--hsl-teal-60))',
-    70: 'hsl(var(--hsl-teal-70))',
-    80: 'hsl(var(--hsl-teal-80))',
-    90: 'hsl(var(--hsl-teal-90))',
-    100: 'hsl(var(--hsl-teal-100))',
-  },
-  yellow: {
-    10: 'hsl(var(--hsl-yellow-10))',
-    20: 'hsl(var(--hsl-yellow-20))',
-    30: 'hsl(var(--hsl-yellow-30))',
-    40: 'hsl(var(--hsl-yellow-40))',
-    50: 'hsl(var(--hsl-yellow-50))',
-    60: 'hsl(var(--hsl-yellow-60))',
-    70: 'hsl(var(--hsl-yellow-70))',
-    80: 'hsl(var(--hsl-yellow-80))',
-    90: 'hsl(var(--hsl-yellow-90))',
-    100: 'hsl(var(--hsl-yellow-100))',
   },
 };

package/tailwind/preset.ts

@@ -78,6 +78,10 @@ const presetConfig: Config = {
         },
       },
       spacing,
+      transitionProperty: {
+        height: 'height',
+        'max-height': 'max-height',
+      },
       transitionDelay: {
         600: '600ms',
       },

package/tailwind.config.ts

@@ -1,81 +1,13 @@
-module.exports = {
-  content: ['./src/**/*.{js,tsx,jsx,ts,mdx}'],
-  theme: {
-    screens: {
-      sm: '550px',
-      md: '744px',
-      lg: '950px',
-      xl: '1128px',
-      '2xl': '1640px',
-      '3xl': '1880px',
-    },
-    fontFamily: {
-      sans: ['Sora', 'sans-serif'],
-    },
-    fontWeight: {
-      thin: '100',
-      extraLight: '200',
-      light: '300',
-      regular: '400',
-      medium: '500',
-      semiBold: '600',
-      bold: '700',
-      extraBold: '800',
-    },
-    fontSize: {
-      xxs: '8px',
-      xs: '12px',
-      sm: '16px',
-      md: '22px',
-      lg: '28px',
-      xl: '36px',
-      xxl: '48px',
-    },
-    colors: {
-      primary: 'var(--color-primary)',
-      secondary: 'var(--color-secondary)',
-      tertiary: 'var(--color-tertiary)',
-      ink: 'var(--color-ink)',
-      third: 'var(--color-third)',
-      transparent: 'var(--color-transparent)',
-      white: 'var(--color-white)',
-      black: 'var(--color-black)',
-      red: 'var(--color-red)',
-      grey: 'var(--color-grey)',
-      'light-grey': 'var(--color-light-grey)',
-      'lightest-grey': 'var(--color-lightest-grey)',
-      'primary-strict': 'var(--color-primary-strict)',
-      border: 'var(--color-border)',
-      'border-lightest': 'var(--color-border-lightest)',
-      'border-light': 'var(--color-border-light)',
-      'border-dark': 'var(--color-border-dark)',
-      'error-light': 'var(--color-error-light)',
-      'success-light': 'var(--color-success-light)',
-      facebook: 'var(--color-facebook)',
-      whatsapp: 'var(--color-whatsapp)',
-      twitter: 'var(--color-twitter)',
-      email: 'var(--color-email)',
-      github: 'var(--color-github)',
-      linkedin: 'var(--color-linkedin)',
-      instagram: 'var(--color-instagram)',
-      'interactive-facebook': 'var(--color-interactive-facebook)',
-      'interactive-whatsapp': 'var(--color-interactive-whatsapp)',
-      'interactive-twitter': 'var(--color-interactive-twitter)',
-      'interactive-linkedin': 'var(--color-interactive-linkedin)',
-      'interactive-instagram': 'var(--color-interactive-instagram)',
-      'interactive-email': 'var(--color-interactive-email)',
-      'interactive-github': 'var(--color-interactive-github)',
-      gold: 'var(--color-gold)',
-      error: 'var(--color-error)',
-      warning: 'var(--color-warning)',
-      success: 'var(--color-success)',
-      'info-light': 'var(--color-info-light)',
-    },
-    extend: {
-      scale: {
-        110: '1.1',
-      },
-    },
-  },
-  themes: [],
+import type { Config } from 'tailwindcss';
+
+import preset from './tailwind/preset';
+
+const config: Config = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    '.storybook/**/*.{js,ts,jsx,tsx}',
+  ],
+  presets: [preset],
 };
+
+export default config;

package/tsconfig.json

@@ -31,8 +31,14 @@
     ".storybook/storybookDecorators.tsx",
     ".storybook/docs",
     "tailwind.config.ts",
-    "tailwind"
-, "archive/Video", "archive/BreadcrumbsItem", "archive/BreadcrumbsBordered", "archive/Breadcrumbs", "archive/typography", "archive/theme.ts"  ],
+    "tailwind",
+    "src/components/Video",
+    "archive/BreadcrumbsItem",
+    "archive/BreadcrumbsBordered",
+    "archive/Breadcrumbs",
+    "archive/typography",
+    "archive/theme.ts"
+  ],
   "files": ["svg.d.ts"],
   "exclude": ["node_modules", "lib"],
   "references": [

package/archive/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,46 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Breadcrumbs from '.';
-
-const meta = {
-  title: 'Components/Breadcrumbs',
-  component: Breadcrumbs,
-  argTypes: {
-    ...idAndClassName,
-
-    links: {
-      description: 'An array of items to be displayed in the component',
-      table: {
-        category: '',
-        type: { summary: 'array' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-  },
-  args: {
-    links: [
-      {
-        href: '/',
-        name: 'link 1',
-      },
-      {
-        href: '/',
-        name: 'link 2',
-      },
-      {
-        href: '/',
-        name: 'link 3',
-      },
-      {
-        href: '/',
-        name: 'link 4',
-      },
-    ],
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Breadcrumbs/index.tsx

@@ -1,42 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  links?: Array<{ name: string; href: string }>;
-}
-
-const Breadcrumbs = ({ id, className, links }: Props): JSX.Element => {
-  const linksLength = links != null ? Object.keys(links).length : 0;
-
-  const classList = classNames(className, 'flex py-2', 'theme-local');
-
-  return (
-    <ul id={id} className={classList}>
-      {links?.map((link, i) => {
-        return (
-          <div key={`breadcrumb_${i + 1}`} className='flex'>
-            <li className="h-8">
-              {i + 1 >= linksLength ? (
-                <p className='px-1 py-1'>{link.name}</p>
-              ) : (
-                <p className='px-1 py-1'>
-                  <a className='text-facebook hover:underline' href={link.href}>
-                    {link.name}
-                  </a>
-                </p>
-              )}
-            </li>
-            {i + 1 < linksLength && (
-              <li className='h-8'>
-                <p className='py-1'>&nbsp; &#62; &nbsp;</p>
-              </li>
-            )}
-          </div>
-        );
-      })}
-    </ul>
-  );
-};
-
-export default Breadcrumbs;