@companix/uikit 0.0.1

package/tailwind.config.js

@@ -0,0 +1,91 @@
+export default {
+  content: ['./index.html', './playground/*.{js,jsx,ts,tsx}', './playground/**/*.{js,jsx,ts,tsx}'],
+  corePlugins: {
+    preflight: false
+  },
+  theme: {
+    borderRadius: {
+      none: '0px',
+      sm: '3px',
+      DEFAULT: '4px',
+      md: '6px',
+      lg: '8px',
+      xl: '12px',
+      full: '9999px'
+    },
+    zIndex: {
+      auto: 'auto',
+      1: '1',
+      2: '2',
+      3: '3',
+      4: '4',
+      0: '0',
+      10: '10',
+      20: '20',
+      30: '30',
+      40: '40'
+    },
+    fontSize: {
+      xs: ['12px', { lineHeight: '14px' }],
+      sm: ['14px', { lineHeight: '16.5px' }],
+      base: ['16px', { lineHeight: '19px' }],
+      lg: ['18px', { lineHeight: '21.5px' }],
+      xl: ['20px', { lineHeight: '23.5px' }],
+      '2xl': ['22px', { lineHeight: '26px' }],
+      '3xl': ['24px', { lineHeight: '28px' }]
+    },
+    spacing: {
+      0: '0px',
+      1: '1px',
+      2: '2px',
+      3: '3px',
+      4: '4px',
+      5: '5px',
+      6: '6px',
+      7: '7px',
+      8: '8px',
+      9: '9px',
+      10: '10px',
+      11: '11px',
+      12: '12px',
+      13: '13px',
+      14: '14px',
+      15: '15px',
+      16: '16px',
+      17: '17px',
+      18: '18px',
+      19: '19px',
+      20: '20px',
+      21: '21px',
+      22: '22px',
+      23: '23px',
+      24: '24px',
+      25: '25px',
+      26: '26px',
+      27: '27px',
+      28: '28px',
+      29: '29px',
+      30: '30px',
+      31: '31px',
+      32: '32px',
+      33: '33px',
+      34: '34px',
+      35: '35px',
+      36: '36px',
+      37: '37px',
+      38: '38px',
+      39: '39px',
+      40: '40px',
+      44: '44px',
+      48: '48px',
+      52: '52px',
+      56: '56px',
+      60: '60px',
+      64: '64px',
+      72: '72px',
+      80: '80px',
+      96: '96px'
+    }
+  },
+  plugins: []
+}

package/themes/classic/animations.scss

@@ -0,0 +1,179 @@
+@keyframes popoverScaleIn {
+  from {
+    transform: scale(0.3);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+// out
+
+@keyframes popoverScaleOut {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.3);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes checkboxIn {
+  from {
+    transform: translateY(-5px);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes checkboxOut {
+  from {
+    transform: translateY(0);
+  }
+  to {
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes checkboxInColor {
+  from {
+    color: transparent;
+  }
+  to {
+    color: #242429;
+  }
+}
+
+@keyframes checkboxOutColor {
+  from {
+    color: #242429;
+  }
+  to {
+    color: transparent;
+  }
+}
+
+// radio-mark
+
+@keyframes markScaleIn {
+  from {
+    transform: scale(0.1);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+
+@keyframes markScaleOut {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.1);
+  }
+}
+
+// dialog
+
+@keyframes dialogIn {
+  0% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialogOut {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+}
+
+// drawer
+
+@keyframes slideFromBottom {
+  from {
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToBottom {
+  to {
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+@keyframes slideFromTop {
+  from {
+    transform: translate3d(0, -100%, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToTop {
+  to {
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+@keyframes slideFromLeft {
+  from {
+    transform: translate3d(-100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToLeft {
+  to {
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+@keyframes slideFromRight {
+  from {
+    transform: translate3d(100%, 0, 0);
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slideToRight {
+  to {
+    transform: translate3d(100%, 0, 0);
+  }
+}