@feminab/box-ui 0.1.0

package/src/styles/global.css

@@ -0,0 +1,367 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+
+@layer components {
+  /* Badge */
+  .badge-base {
+    @apply inline-flex items-center rounded-2xl font-medium;
+  }
+
+  .badge-gray {
+    @apply bg-gray-100 text-gray-700;
+  }
+
+  .badge-primary {
+    @apply bg-primary-50 text-primary-700;
+  }
+
+  .badge-error {
+    @apply bg-error-50 text-error-700;
+  }
+
+  .badge-warning {
+    @apply bg-warning-50 text-warning-700;
+  }
+
+  .badge-success {
+    @apply bg-success-50 text-success-700;
+  }
+
+  .badge-sm {
+    @apply h-5.5 px-2 text-xs;
+  }
+
+  .badge-md {
+    @apply h-6 px-2.5 text-xs;
+  }
+
+  .badge-lg {
+    @apply h-7 px-3 text-sm;
+  }
+
+  /* Button */
+  .btn-base {
+    @apply flex text-center justify-center items-center rounded-lg font-medium focus:outline-none whitespace-nowrap select-none;
+  }
+
+  .btn-sm {
+    @apply h-9 px-3.5 text-sm;
+  }
+
+  .btn-md {
+    @apply h-10 px-4 text-sm;
+  }
+
+  .btn-lg {
+    @apply h-11 px-4.5 text-md;
+  }
+
+  .btn-xl {
+    @apply h-12 px-5 text-md;
+  }
+
+  .btn-2xl {
+    @apply h-15 px-7 text-lg;
+  }
+
+  .btn-icon-sm {
+    @apply h-9 w-9;
+  }
+
+  .btn-icon-md {
+    @apply h-10 w-10;
+  }
+
+  .btn-icon-lg {
+    @apply h-11 w-11;
+  }
+
+  .btn-icon-xl {
+    @apply h-12 w-12;
+  }
+
+  .btn-icon-2xl {
+    @apply h-15 w-15;
+  }
+
+  /* Primary */
+  .btn-primary {
+    @apply bg-primary-600 dark:bg-gray-800 text-white dark:text-white;
+  }
+
+  .btn-primary-hover {
+    @apply hover:bg-primary-700 dark:hover:bg-gray-700;
+  }
+
+  .btn-primary-focus {
+    @apply focus:ring-4 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20;
+  }
+
+  .btn-primary-disabled {
+    @apply bg-primary-200 dark:bg-gray-400  text-white;
+  }
+
+  /* Secondary */
+  .btn-secondary {
+    @apply shadow-sm border border-transparent dark:border-white bg-primary-50 dark:bg-opacity-20 text-primary-700 dark:text-white;
+  }
+
+  .btn-secondary-hover {
+    @apply hover:bg-primary-100 dark:hover:bg-white dark:hover:bg-opacity-40 dark:hover:border-opacity-40 dark:hover:text-white;
+  }
+
+  .btn-secondary-focus {
+    @apply focus:ring-4 focus:ring-primary-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20;
+  }
+
+  .btn-secondary-disabled {
+    @apply shadow-sm bg-primary-25 dark:bg-white dark:bg-opacity-20 text-primary-300 dark:border-gray-300 dark:text-gray-300;
+  }
+
+  /* SecondaryGray */
+  .btn-secondaryGray {
+    @apply shadow-sm border border-gray-300 dark:border-white bg-white dark:bg-gray-900 text-gray-700 dark:text-white;
+  }
+
+  .btn-secondaryGray-hover {
+    @apply hover:bg-gray-50 dark:hover:bg-gray-900 hover:text-gray-800 dark:hover:text-gray-300 dark:border-gray-300;
+  }
+
+  .btn-secondaryGray-focus {
+    @apply focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-100 dark:focus:ring-opacity-20;
+  }
+
+  .btn-secondaryGray-disabled {
+    @apply shadow-sm border border-gray-200 text-gray-300 dark:bg-gray-600  dark:text-white;
+  }
+
+  /* Tertiary */
+  .btn-tertiary {
+    @apply bg-white dark:bg-gray-900 text-primary-700;
+  }
+
+  .btn-tertiary-hover {
+    @apply hover:bg-primary-50 dark:hover:bg-white dark:hover:bg-opacity-20;
+  }
+
+  .btn-tertiary-disabled {
+    @apply bg-white dark:bg-gray-900 text-gray-300;
+  }
+
+  /* TertiaryGray */
+  .btn-tertiaryGray {
+    @apply bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-200;
+  }
+
+  .btn-tertiaryGray-hover {
+    @apply hover:bg-gray-50 dark:hover:bg-white dark:hover:bg-opacity-20 hover:text-gray-800 dark:hover:text-white;
+  }
+
+  .btn-tertiaryGray-disabled {
+    @apply bg-white dark:bg-gray-900 text-gray-300 dark:text-gray-400;
+  }
+
+  /* Navigation */
+  .navItem {
+    @apply flex items-center w-full h-10 py-2 rounded-lg cursor-pointer 
+    text-md whitespace-nowrap select-none
+    transition-all duration-100 ease-out
+    hover:bg-primary-50 dark:hover:bg-gray-100 dark:hover:bg-opacity-10;
+  }
+}  
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+
+.App {
+    text-align: center;
+  }
+  
+  .App-logo {
+    height: 40vmin;
+    pointer-events: none;
+  }
+  
+  @media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+      animation: App-logo-spin infinite 20s linear;
+    }
+  }
+  
+  .App-header {
+    background-color: #282c34;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: white;
+  }
+  
+  .App-link {
+    color: #61dafb;
+  }
+  
+  @keyframes App-logo-spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  
+
+
+.storybook-button {
+    display: inline-block;
+    cursor: pointer;
+    border: 0;
+    border-radius: 3em;
+    font-weight: 700;
+    line-height: 1;
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+  .storybook-button--primary {
+    background-color: #555ab9;
+    color: white;
+  }
+  .storybook-button--secondary {
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+    background-color: transparent;
+    color: #333;
+  }
+  .storybook-button--small {
+    padding: 10px 16px;
+    font-size: 12px;
+  }
+  .storybook-button--medium {
+    padding: 11px 20px;
+    font-size: 14px;
+  }
+  .storybook-button--large {
+    padding: 12px 24px;
+    font-size: 16px;
+  }
+  
+
+  .storybook-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 15px 20px;
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+  
+  .storybook-header svg {
+    display: inline-block;
+    vertical-align: top;
+  }
+  
+  .storybook-header h1 {
+    display: inline-block;
+    vertical-align: top;
+    margin: 6px 0 6px 10px;
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 1;
+  }
+  
+  .storybook-header button + button {
+    margin-left: 10px;
+  }
+  
+  .storybook-header .welcome {
+    margin-right: 10px;
+    color: #333;
+    font-size: 14px;
+  }
+  
+
+  .storybook-page {
+    margin: 0 auto;
+    padding: 48px 20px;
+    max-width: 600px;
+    color: #333;
+    font-size: 14px;
+    line-height: 24px;
+    font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  }
+  
+  .storybook-page h2 {
+    display: inline-block;
+    vertical-align: top;
+    margin: 0 0 4px;
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 1;
+  }
+  
+  .storybook-page p {
+    margin: 1em 0;
+  }
+  
+  .storybook-page a {
+    color: inherit;
+  }
+  
+  .storybook-page ul {
+    margin: 1em 0;
+    padding-left: 30px;
+  }
+  
+  .storybook-page li {
+    margin-bottom: 8px;
+  }
+  
+  .storybook-page .tip {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 10px;
+    border-radius: 1em;
+    background: #e7fdd8;
+    padding: 4px 12px;
+    color: #357a14;
+    font-weight: 700;
+    font-size: 11px;
+    line-height: 12px;
+  }
+  
+  .storybook-page .tip-wrapper {
+    margin-top: 40px;
+    margin-bottom: 40px;
+    font-size: 13px;
+    line-height: 20px;
+  }
+  
+  .storybook-page .tip-wrapper svg {
+    display: inline-block;
+    vertical-align: top;
+    margin-top: 3px;
+    margin-right: 4px;
+    width: 12px;
+    height: 12px;
+  }
+  
+  .storybook-page .tip-wrapper svg path {
+    fill: #1ea7fd;
+  }
+  
+
+