design-system-silkhaus 0.0.6 → 0.0.8-3.beta.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "design-system-silkhaus",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.8-3.beta.2",
   "description": "A template for creating React component libraries with Vite, Tailwind, and Storybook.",
   "author": "meet-codevyasa",
   "license": "MIT",

package/dist/tailwind.config.js

@@ -1,331 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./lib/**/*.{ts,tsx}'],
-  theme: {
-    screens: {
-      mobile: '449px',
-      tablet: '768px',
-      desktop: '1280px',
-      wide_desktop: '1440px',
-    },
-    extend: {
-      colors: {
-        white: 'var(--white)',
-        black: 'var(--black)',
-        Fills: {
-          black: 'var(--fills-black)',
-          white: 'var(--fills-white)',
-          secondary: 'var(--fills-secondary)',
-          terciary: 'var(--fills-terciary)',
-          quadrutery: 'var(--fills-quadrutery)',
-          quintiary: 'var(--fills-quintiary)',
-        },
-        Text: {
-          primary: 'var(--text-primary)',
-          secondary: 'var(--text-secondary)',
-          tertiary: 'var(--text-tertiary)',
-          secondaryDark: 'var(--text-secondary-dark)',
-          textTertiaryDark: 'var(--text-tertiary-dark)',
-          textSecondaryPlusDark: 'var(--text-secondary-plus-dark)',
-          textPrimaryDark: 'var(--text-primary-dark)',
-        },
-        Background: {
-          accentEggplant: {
-            100: 'var(--accent-eggplant-100)',
-            50: 'var(--accent-eggplant-50)',
-            20: 'var(--accent-eggplant-20)',
-            5: 'var(--accent-eggplant-5)',
-            highlight: 'var(--accent-eggplant-highlight)',
-            darkened: 'var(--accent-eggplant-darkened)',
-          },
-          accentMustard: {
-            100: 'var(--accent-mustard-100)',
-            50: 'var(--accent-mustard-50)',
-            25: 'var(--accent-mustard-25)',
-          },
-          accentTeal: {
-            100: 'var(--accent-teal-100)',
-            50: 'var(--accent-teal-50)',
-            25: 'var(--accent-teal-25)',
-          },
-          accentCarrot: {
-            100: 'var(--accent-carrot-100)',
-            50: 'var(--accent-carrot-50)',
-            25: 'var(--accent-carrot-25)',
-          },
-          enabled: 'var(--accent-eggplant-100)',
-          hover: 'rgba(109, 54, 169, 1)',
-          active: 'rgba(52, 26, 83, 1)',
-          focus: 'var(--accent-eggplant-100)',
-        },
-        System: {
-          red: '#FF453A',
-          green: '#28CD41',
-        },
-      },
-      spacing: {
-        space0: '0rem',
-        space025: '0.125rem',
-        space050: '0.25rem',
-        space075: '0.375rem',
-        space100: '0.5rem',
-        space150: '0.75rem',
-        space200: '1rem',
-        space250: '1.25rem',
-        space300: '1.5rem',
-        space400: '2rem',
-        space500: '2.5rem',
-        space600: '3rem',
-        space800: '4rem',
-        space1000: '5rem',
-        space1200: '6rem',
-        space1600: '8rem',
-      },
-
-      fontSize: {
-        xLargeHeroTitle: [
-          'var(--text-xLarge-heroTitle)',
-          { lineHeight: 'var(--text-xLarge-heroTitle-lineHeight)' },
-        ],
-        xLargeLargeTitle: [
-          'var(--text-xLarge-largeTitle)',
-          { lineHeight: 'var(--text-xLarge-largeTitle-lineHeight)' },
-        ],
-        xLargeTitle1: [
-          'var(--text-xLarge-title1)',
-          { lineHeight: 'var(--text-xLarge-title1-lineHeight)' },
-        ],
-        xLargeTitle2: [
-          'var(--text-xLarge-title2)',
-          { lineHeight: 'var(--text-xLarge-title2-lineHeight)' },
-        ],
-        xLargeTitle3: [
-          'var(--text-xLarge-title3)',
-          { lineHeight: 'var(--text-xLarge-title3-lineHeight)' },
-        ],
-        xLargeHeadLine: [
-          'var(--text-xLarge-headLine)',
-          { lineHeight: 'var(--text-xLarge-headLine-lineHeight)' },
-        ],
-        xLargeBody: [
-          'var(--text-xLarge-body)',
-          { lineHeight: 'var(--text-xLarge-body-lineHeight)' },
-        ],
-        xLargeCallout: [
-          'var(--text-xLarge-callout)',
-          { lineHeight: 'var(--text-xLarge-callout-lineHeight)' },
-        ],
-        xLargeSubHead: [
-          'var(--text-xLarge-subHead)',
-          { lineHeight: 'var(--text-xLarge-subHead-lineHeight)' },
-        ],
-        xLargeFootNote: [
-          'var(--text-xLarge-footNote)',
-          { lineHeight: 'var(--text-xLarge-footNote-lineHeight)' },
-        ],
-        xLargeCaption1: [
-          'var(--text-xLarge-caption1)',
-          { lineHeight: 'var(--text-xLarge-caption1-lineHeight)' },
-        ],
-        xLargeCaption2: [
-          'var(--text-xLarge-caption2)',
-          { lineHeight: 'var(--text-xLarge-caption2-lineHeight)' },
-        ],
-
-        largeHeroTitle: [
-          'var(--text-large-heroTitle)',
-          { lineHeight: 'var(--text-large-heroTitle-lineHeight)' },
-        ],
-        largeLargeTitle: [
-          'var(--text-large-largeTitle)',
-          { lineHeight: 'var(--text-large-largeTitle-lineHeight)' },
-        ],
-        largeTitle1: [
-          'var(--text-large-title1)',
-          { lineHeight: 'var(--text-large-title1-lineHeight)' },
-        ],
-        largeTitle2: [
-          'var(--text-large-title2)',
-          { lineHeight: 'var(--text-large-title2-lineHeight)' },
-        ],
-        largeTitle3: [
-          'var(--text-large-title3)',
-          { lineHeight: 'var(--text-large-title3-lineHeight)' },
-        ],
-        largeHeadLine: [
-          'var(--text-large-headLine)',
-          { lineHeight: 'var(--text-large-headLine-lineHeight)' },
-        ],
-        largeBody: ['var(--text-large-body)', { lineHeight: 'var(--text-large-body-lineHeight)' }],
-        largeCallout: [
-          'var(--text-large-callout)',
-          { lineHeight: 'var(--text-large-callout-lineHeight)' },
-        ],
-        largeSubHead: [
-          'var(--text-large-subHead)',
-          { lineHeight: 'var(--text-large-subHead-lineHeight)' },
-        ],
-        largeFootNote: [
-          'var(--text-large-footNote)',
-          { lineHeight: 'var(--text-large-footNote-lineHeight)' },
-        ],
-        largeCaption1: [
-          'var(--text-large-caption1)',
-          { lineHeight: 'var(--text-large-caption1-lineHeight)' },
-        ],
-        largeCaption2: [
-          'var(--text-large-caption2)',
-          { lineHeight: 'var(--text-large-caption2-lineHeight)' },
-        ],
-
-        mediumHeroTitle: [
-          'var(--text-medium-heroTitle)',
-          { lineHeight: 'var(--text-medium-heroTitle-lineHeight)' },
-        ],
-        mediumLargeTitle: [
-          'var(--text-medium-largeTitle)',
-          { lineHeight: 'var(--text-medium-largeTitle-lineHeight)' },
-        ],
-        mediumTitle1: [
-          'var(--text-medium-title1)',
-          { lineHeight: 'var(--text-medium-title1-lineHeight)' },
-        ],
-        mediumTitle2: [
-          'var(--text-medium-title2)',
-          { lineHeight: 'var(--text-medium-title2-lineHeight)' },
-        ],
-        mediumTitle3: [
-          'var(--text-medium-title3)',
-          { lineHeight: 'var(--text-medium-title3-lineHeight)' },
-        ],
-        mediumHeadLine: [
-          'var(--text-medium-headLine)',
-          { lineHeight: 'var(--text-medium-headLine-lineHeight)' },
-        ],
-        mediumBody: [
-          'var(--text-medium-body)',
-          { lineHeight: 'var(--text-medium-body-lineHeight)' },
-        ],
-        mediumCallout: [
-          'var(--text-medium-callout)',
-          { lineHeight: 'var(--text-medium-callout-lineHeight)' },
-        ],
-        mediumSubHead: [
-          'var(--text-medium-subHead)',
-          { lineHeight: 'var(--text-medium-subHead-lineHeight)' },
-        ],
-        mediumFootNote: [
-          'var(--text-medium-footNote)',
-          { lineHeight: 'var(--text-medium-footNote-lineHeight)' },
-        ],
-        mediumCaption1: [
-          'var(--text-medium-caption1)',
-          { lineHeight: 'var(--text-medium-caption1-lineHeight)' },
-        ],
-        mediumCaption2: [
-          'var(--text-medium-caption2)',
-          { lineHeight: 'var(--text-medium-caption2-lineHeight)' },
-        ],
-
-        smallHeroTitle: [
-          'var(--text-small-heroTitle)',
-          { lineHeight: 'var(--text-small-heroTitle-lineHeight)' },
-        ],
-        smallLargeTitle: [
-          'var(--text-small-largeTitle)',
-          { lineHeight: 'var(--text-small-largeTitle-lineHeight)' },
-        ],
-        smallTitle1: [
-          'var(--text-small-title1)',
-          { lineHeight: 'var(--text-small-title1-lineHeight)' },
-        ],
-        smallTitle2: [
-          'var(--text-small-title2)',
-          { lineHeight: 'var(--text-small-title2-lineHeight)' },
-        ],
-        smallTitle3: [
-          'var(--text-small-title3)',
-          { lineHeight: 'var(--text-small-title3-lineHeight)' },
-        ],
-        smallHeadLine: [
-          'var(--text-small-headLine)',
-          { lineHeight: 'var(--text-small-headLine-lineHeight)' },
-        ],
-        smallBody: ['var(--text-small-body)', { lineHeight: 'var(--text-small-body-lineHeight)' }],
-        smallCallout: [
-          'var(--text-small-callout)',
-          { lineHeight: 'var(--text-small-callout-lineHeight)' },
-        ],
-        smallSubHead: [
-          'var(--text-small-subHead)',
-          { lineHeight: 'var(--text-small-subHead-lineHeight)' },
-        ],
-        smallFootNote: [
-          'var(--text-small-footNote)',
-          { lineHeight: 'var(--text-small-footNote-lineHeight)' },
-        ],
-        smallCaption1: [
-          'var(--text-small-caption1)',
-          { lineHeight: 'var(--text-small-caption1-lineHeight)' },
-        ],
-        smallCaption2: [
-          'var(--text-small-caption2)',
-          { lineHeight: 'var(--text-small-caption2-lineHeight)' },
-        ],
-
-        xSmallHeroTitle: [
-          'var(--text-xSmall-heroTitle)',
-          { lineHeight: 'var(--text-xSmall-heroTitle-lineHeight)' },
-        ],
-        xSmallLargeTitle: [
-          'var(--text-xSmall-largeTitle)',
-          { lineHeight: 'var(--text-xSmall-largeTitle-lineHeight)' },
-        ],
-        xSmallTitle1: [
-          'var(--text-xSmall-title1)',
-          { lineHeight: 'var(--text-xSmall-title1-lineHeight)' },
-        ],
-        xSmallTitle2: [
-          'var(--text-xSmall-title2)',
-          { lineHeight: 'var(--text-xSmall-title2-lineHeight)' },
-        ],
-        xSmallTitle3: [
-          'var(--text-xSmall-title3)',
-          { lineHeight: 'var(--text-xSmall-title3-lineHeight)' },
-        ],
-        xSmallHeadLine: [
-          'var(--text-xSmall-headLine)',
-          { lineHeight: 'var(--text-xSmall-headLine-lineHeight)' },
-        ],
-        xSmallBody: [
-          'var(--text-xSmall-body)',
-          { lineHeight: 'var(--text-xSmall-body-lineHeight)' },
-        ],
-        xSmallCallout: [
-          'var(--text-xSmall-callout)',
-          { lineHeight: 'var(--text-xSmall-callout-lineHeight)' },
-        ],
-        xSmallSubHead: [
-          'var(--text-xSmall-subHead)',
-          { lineHeight: 'var(--text-xSmall-subHead-lineHeight)' },
-        ],
-        xSmallFootNote: [
-          'var(--text-xSmall-footNote)',
-          { lineHeight: 'var(--text-xSmall-footNote-lineHeight)' },
-        ],
-        xSmallCaption1: [
-          'var(--text-xSmall-caption1)',
-          { lineHeight: 'var(--text-xSmall-caption1-lineHeight)' },
-        ],
-        xSmallCaption2: [
-          'var(--text-xSmall-caption2)',
-          { lineHeight: 'var(--text-xSmall-caption2-lineHeight)' },
-        ],
-      },
-      boxShadow: {
-        card: '',
-      },
-    },
-  },
-  plugins: [],
-};