oneslash-design-system 1.1.2 → 1.1.4

package/dist/output.css

@@ -547,6 +547,9 @@ video {
 .mt-1 {
   margin-top: 0.25rem;
 }
+.block {
+  display: block;
+}
 .inline-block {
   display: inline-block;
 }
@@ -557,6 +560,9 @@ video {
   width: 1.5rem;
   height: 1.5rem;
 }
+.h-12 {
+  height: 3rem;
+}
 .h-3 {
   height: 0.75rem;
 }
@@ -569,9 +575,18 @@ video {
 .h-6 {
   height: 1.5rem;
 }
+.h-\[40px\] {
+  height: 40px;
+}
 .h-full {
   height: 100%;
 }
+.min-h-\[200px\] {
+  min-height: 200px;
+}
+.w-12 {
+  width: 3rem;
+}
 .w-3 {
   width: 0.75rem;
 }
@@ -584,6 +599,12 @@ video {
 .w-6 {
   width: 1.5rem;
 }
+.w-\[1200px\] {
+  width: 1200px;
+}
+.w-\[40px\] {
+  width: 40px;
+}
 .w-\[600px\] {
   width: 600px;
 }
@@ -593,9 +614,21 @@ video {
 .max-w-md {
   max-width: 28rem;
 }
+.flex-1 {
+  flex: 1 1 0%;
+}
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+@keyframes spin {
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
 .cursor-not-allowed {
   cursor: not-allowed;
 }
@@ -630,6 +663,11 @@ video {
   margin-right: calc(0.5rem * var(--tw-space-x-reverse));
   margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
 }
+.space-y-2 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
+}
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
@@ -638,6 +676,11 @@ video {
 .overflow-hidden {
   overflow: hidden;
 }
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -656,6 +699,9 @@ video {
 .border-2 {
   border-width: 2px;
 }
+.border-4 {
+  border-width: 4px;
+}
 .border-none {
   border-style: none;
 }
@@ -663,6 +709,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));
 }
+.border-light-accent-main {
+  --tw-border-opacity: 1;
+  border-color: rgb(238 174 3 / var(--tw-border-opacity));
+}
 .border-light-text-secondary {
   --tw-border-opacity: 1;
   border-color: rgb(109 109 109 / var(--tw-border-opacity));
@@ -671,6 +721,9 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(239 68 68 / var(--tw-border-opacity));
 }
+.border-t-transparent {
+  border-top-color: transparent;
+}
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -695,6 +748,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(238 238 238 / var(--tw-bg-opacity));
 }
+.bg-light-background-accent100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(246 246 246 / var(--tw-bg-opacity));
+}
 .bg-light-background-accent200 {
   --tw-bg-opacity: 1;
   background-color: rgb(231 231 231 / var(--tw-bg-opacity));
@@ -723,6 +780,9 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(239 108 0 / var(--tw-bg-opacity));
 }
+.bg-transparent {
+  background-color: transparent;
+}
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -749,6 +809,10 @@ video {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
 }
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
 .py-\[3px\] {
   padding-top: 3px;
   padding-bottom: 3px;
@@ -759,6 +823,9 @@ video {
 .pr-3 {
   padding-right: 0.75rem;
 }
+.text-center {
+  text-align: center;
+}
 .text-body1 {
   font-size: 16px;
 }
@@ -845,6 +912,16 @@ video {
 .ring-offset-2 {
   --tw-ring-offset-width: 2px;
 }
+.ring-offset-4 {
+  --tw-ring-offset-width: 4px;
+}
+.ring-offset-light-background-default {
+  --tw-ring-offset-color: #FFFFFF;
+}
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
 .transition-all {
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -862,49 +939,65 @@ video {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+
 .group:hover .group-hover\:bg-light-action-selected {
   --tw-bg-opacity: 1;
   background-color: rgb(227 227 227 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-dark-background-accent300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(79 79 79 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-light-accent-dark:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(206 134 2 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-light-action-hover:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(243 243 243 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-light-background-accent100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(246 246 246 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-light-background-accent300:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(209 209 209 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-light-background-default:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-light-primary-dark:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(38 38 38 / var(--tw-bg-opacity));
 }
+
 .hover\:bg-opacity-75:hover {
   --tw-bg-opacity: 0.75;
 }
+
 .focus\:border-light-accent-main:focus {
   --tw-border-opacity: 1;
   border-color: rgb(238 174 3 / var(--tw-border-opacity));
 }
+
 .focus\:ring-red-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity));
 }
+
 @media (prefers-color-scheme: dark) {
 
   .dark\:border-dark-text-secondary {
@@ -927,6 +1020,11 @@ video {
     background-color: rgb(56 56 56 / var(--tw-bg-opacity));
   }
 
+  .dark\:bg-dark-background-accent100 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(51 51 51 / var(--tw-bg-opacity));
+  }
+
   .dark\:bg-dark-background-accent200 {
     --tw-bg-opacity: 1;
     background-color: rgb(69 69 69 / var(--tw-bg-opacity));
@@ -1002,6 +1100,10 @@ video {
     --tw-ring-color: rgb(255 205 41 / var(--tw-ring-opacity));
   }
 
+  .dark\:ring-offset-dark-background-default {
+    --tw-ring-offset-color: #262626;
+  }
+
   .group:hover .dark\:group-hover\:bg-dark-action-selected {
     --tw-bg-opacity: 1;
     background-color: rgb(78 78 78 / var(--tw-bg-opacity));

package/dist/tailwind.config.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from "tailwindcss";
+declare const config: Config;
+export default config;

package/dist/tailwind.config.js

@@ -0,0 +1,202 @@
+var designTokens = require('./designTokens');
+var config = {
+    content: [
+        "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    ],
+    theme: {
+        extend: {
+            colors: {
+                // Light: text colors
+                'light-text-primary': designTokens.colors.light.text.primary,
+                'light-text-secondary': designTokens.colors.light.text.secondary,
+                'light-text-disabled': designTokens.colors.light.text.disabled,
+                'light-text-contrast': designTokens.colors.light.text.contrast,
+                // Dark: text colors
+                'dark-text-primary': designTokens.colors.dark.text.primary,
+                'dark-text-secondary': designTokens.colors.dark.text.secondary,
+                'dark-text-disabled': designTokens.colors.dark.text.disabled,
+                'dark-text-contrast': designTokens.colors.dark.text.contrast,
+                // light: accent colors
+                'light-accent-main': designTokens.colors.light.accent.main,
+                'light-accent-dark': designTokens.colors.light.accent.dark,
+                'light-accent-light': designTokens.colors.light.accent.light,
+                'light-accent-contrast': designTokens.colors.light.accent.contrast,
+                // dark: accent colors
+                'dark-accent-main': designTokens.colors.dark.accent.main,
+                'dark-accent-dark': designTokens.colors.dark.accent.dark,
+                'dark-accent-light': designTokens.colors.dark.accent.light,
+                'dark-accent-contrast': designTokens.colors.dark.accent.contrast,
+                // Light: primary colors
+                'light-primary-main': designTokens.colors.light.primary.main,
+                'light-primary-dark': designTokens.colors.light.primary.dark,
+                'light-primary-light': designTokens.colors.light.primary.light,
+                'light-primary-contrast': designTokens.colors.light.primary.contrast,
+                // Dark: primary colors
+                'dark-primary-main': designTokens.colors.dark.primary.main,
+                'dark-primary-dark': designTokens.colors.dark.primary.dark,
+                'dark-primary-light': designTokens.colors.dark.primary.light,
+                'dark-primary-contrast': designTokens.colors.dark.primary.contrast,
+                // light: secondary colors
+                'light-secondary-main': designTokens.colors.light.secondary.main,
+                'light-secondary-dark': designTokens.colors.light.secondary.dark,
+                'light-secondary-light': designTokens.colors.light.secondary.light,
+                // dark: secondary colors
+                'dark-secondary-main': designTokens.colors.dark.secondary.main,
+                'dark-secondary-dark': designTokens.colors.dark.secondary.dark,
+                'dark-secondary-light': designTokens.colors.dark.secondary.light,
+                // light: error colors
+                'light-error-main': designTokens.colors.light.error.main,
+                'light-error-dark': designTokens.colors.light.error.dark,
+                'light-error-light': designTokens.colors.light.error.light,
+                // dark: error colors
+                'dark-error-main': designTokens.colors.dark.error.main,
+                'dark-error-dark': designTokens.colors.dark.error.dark,
+                'dark-error-light': designTokens.colors.dark.error.light,
+                // light: warning colors
+                'light-warning-main': designTokens.colors.light.warning.main,
+                'light-warning-dark': designTokens.colors.light.warning.dark,
+                'light-warning-light': designTokens.colors.light.warning.light,
+                // dark: warning colors
+                'dark-warning-main': designTokens.colors.dark.warning.main,
+                'dark-warning-dark': designTokens.colors.dark.warning.dark,
+                'dark-warning-light': designTokens.colors.dark.warning.light,
+                // light: info colors
+                'light-info-main': designTokens.colors.light.info.main,
+                'light-info-dark': designTokens.colors.light.info.dark,
+                'light-info-light': designTokens.colors.light.info.light,
+                // dark: info colors
+                'dark-info-main': designTokens.colors.dark.info.main,
+                'dark-info-dark': designTokens.colors.dark.info.dark,
+                'dark-info-light': designTokens.colors.dark.info.light,
+                // light: success colors
+                'light-success-main': designTokens.colors.light.success.main,
+                'light-success-dark': designTokens.colors.light.success.dark,
+                'light-success-light': designTokens.colors.light.success.light,
+                // dark: success colors
+                'dark-success-main': designTokens.colors.dark.success.main,
+                'dark-success-dark': designTokens.colors.dark.success.dark,
+                'dark-success-light': designTokens.colors.dark.success.light,
+                // Light: background colors
+                'light-background-default': designTokens.colors.light.background.default,
+                'light-background-accent100': designTokens.colors.light.background.accent100,
+                'light-background-accent200': designTokens.colors.light.background.accent200,
+                'light-background-accent300': designTokens.colors.light.background.accent300,
+                // Dark: background colors
+                'dark-background-default': designTokens.colors.dark.background.default,
+                'dark-background-accent100': designTokens.colors.dark.background.accent100,
+                'dark-background-accent200': designTokens.colors.dark.background.accent200,
+                'dark-background-accent300': designTokens.colors.dark.background.accent300,
+                // Light: action colors
+                'light-action-active': designTokens.colors.light.action.active,
+                'light-action-hover': designTokens.colors.light.action.hover,
+                'light-action-selected': designTokens.colors.light.action.selected,
+                'light-action-disabledBackground': designTokens.colors.light.action.disabledBackground,
+                'light-action-disabled': designTokens.colors.light.action.disabled,
+                // Dark: action colors
+                'dark-action-active': designTokens.colors.dark.action.active,
+                'dark-action-hover': designTokens.colors.dark.action.hover,
+                'dark-action-selected': designTokens.colors.dark.action.selected,
+                'dark-action-disabledBackground': designTokens.colors.dark.action.disabledBackground,
+                'dark-action-disabled': designTokens.colors.dark.action.disabled,
+                // light: action background
+                'light-actionBackground-enabled': designTokens.colors.light.actionBackground.enabled,
+                'light-actionBackground-hovered': designTokens.colors.light.actionBackground.hovered,
+                'light-actionBackground-selected': designTokens.colors.light.actionBackground.selected,
+                'light-actionBackground-disabled': designTokens.colors.light.actionBackground.disabled,
+                // dark: action background
+                'dark-actionBackground-enabled': designTokens.colors.dark.actionBackground.enabled,
+                'dark-actionBackground-hovered': designTokens.colors.dark.actionBackground.hovered,
+                'dark-actionBackground-selected': designTokens.colors.dark.actionBackground.selected,
+                'dark-actionBackground-disabled': designTokens.colors.dark.actionBackground.disabled,
+                // light: action outlinedBorder
+                'light-actionOutlinedBorder-enabled': designTokens.colors.light.actionOutlinedBorder.enabled,
+                'light-actionOutlinedBorder-hovered': designTokens.colors.light.actionOutlinedBorder.hovered,
+                'light-actionOutlinedBorder-selected': designTokens.colors.light.actionOutlinedBorder.selected,
+                'light-actionOutlinedBorder-disabled': designTokens.colors.light.actionOutlinedBorder.disabled,
+                // dark: action outlinedBorder
+                'dark-actionOutlinedBorder-enabled': designTokens.colors.dark.actionOutlinedBorder.enabled,
+                'dark-actionOutlinedBorder-hovered': designTokens.colors.dark.actionOutlinedBorder.hovered,
+                'dark-actionOutlinedBorder-selected': designTokens.colors.dark.actionOutlinedBorder.selected,
+                'dark-actionOutlinedBorder-disabled': designTokens.colors.dark.actionOutlinedBorder.disabled,
+                // misc light colors
+                'light-misc-divider': designTokens.colors.light.misc.divider,
+                // misc dark colors
+                'dark-misc-divider': designTokens.colors.dark.misc.divider,
+                'dark-misc-scrollbar-bg': designTokens.colors.dark.background.default,
+                'dark-misc-scrollbar-thumb': designTokens.colors.dark.background.accent200,
+            },
+            spacing: {
+                small: designTokens.spacing.small,
+                medium: designTokens.spacing.medium,
+                large: designTokens.spacing.large,
+            },
+            fontSize: {
+                h1: designTokens.typography.h1.size,
+                h2: designTokens.typography.h2.size,
+                h3: designTokens.typography.h3.size,
+                h4: designTokens.typography.h4.size,
+                h5: designTokens.typography.h5.size,
+                h6: designTokens.typography.h6.size,
+                subtitle1: designTokens.typography.subtitle1.size,
+                subtitle2: designTokens.typography.subtitle2.size,
+                body1: designTokens.typography.body1.size,
+                body2: designTokens.typography.body2.size,
+                caption: designTokens.typography.caption.size,
+            },
+            fontFamily: {
+                inter: designTokens.typography.family,
+            },
+            fontWeight: {
+                h1: designTokens.typography.h1.weight,
+                h2: designTokens.typography.h2.weight,
+                h3: designTokens.typography.h3.weight,
+                h4: designTokens.typography.h4.weight,
+                h5: designTokens.typography.h5.weight,
+                h6: designTokens.typography.h6.weight,
+                subtitle1: designTokens.typography.subtitle1.weight,
+                subtitle2: designTokens.typography.subtitle2.weight,
+                body1: designTokens.typography.body1.weight,
+                body2: designTokens.typography.body2.weight,
+                caption: designTokens.typography.caption.weight,
+            },
+            letterSpacing: {
+                h1: designTokens.typography.h1.letterSpacing,
+                h2: designTokens.typography.h2.letterSpacing,
+                h3: designTokens.typography.h3.letterSpacing,
+                h4: designTokens.typography.h4.letterSpacing,
+                h5: designTokens.typography.h5.letterSpacing,
+                h6: designTokens.typography.h6.letterSpacing,
+                subtitle1: designTokens.typography.subtitle1.letterSpacing,
+                subtitle2: designTokens.typography.subtitle2.letterSpacing,
+                body1: designTokens.typography.body1.letterSpacing,
+                body2: designTokens.typography.body2.letterSpacing,
+                caption: designTokens.typography.caption.letterSpacing,
+            },
+            lineHeight: {
+                h1: designTokens.typography.h1.lineHeight,
+                h2: designTokens.typography.h2.lineHeight,
+                h3: designTokens.typography.h3.lineHeight,
+                h4: designTokens.typography.h4.lineHeight,
+                h5: designTokens.typography.h5.lineHeight,
+                h6: designTokens.typography.h6.lineHeight,
+                subtitle1: designTokens.typography.subtitle1.lineHeight,
+                subtitle2: designTokens.typography.subtitle2.lineHeight,
+                body1: designTokens.typography.body1.lineHeight,
+                body2: designTokens.typography.body2.lineHeight,
+                caption: designTokens.typography.caption.lineHeight,
+            },
+            textAlign: {
+                left: designTokens.typography.alignments.left,
+                center: designTokens.typography.alignments.center,
+                right: designTokens.typography.alignments.right,
+                justify: designTokens.typography.alignments.justify,
+            },
+        },
+    },
+    plugins: [
+        require('tailwindcss'),
+        require('autoprefixer'),
+        require('tailwind-scrollbar'),
+    ],
+};
+export default config;

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "private": false,
+  "main": "./dist/index.js",  
+  "types": "./dist/index.d.ts",
   "scripts": {
     "dev": "next dev",
-    "build": "next build",
+    "build": "tsc && postcss index.css -o dist/output.css",
     "build:css": "postcss index.css -o dist/output.css",
     "start": "next start",
     "lint": "next lint"

package/tsconfig.json

@@ -1,14 +1,9 @@
 {
   "compilerOptions": {
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": [ "dom", "dom.iterable", "esnext" ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
-    "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
     "moduleResolution": "node",
@@ -22,22 +17,21 @@
       }
     ],
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": [ "./*" ]
     },
-    "forceConsistentCasingInFileNames": true
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationDir": "./dist", // Output .d.ts files to dist
+    "outDir": "./dist",        // Output compiled .js files to dist
+    "emitDeclarationOnly": false
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "components/*.tsx",
-    "**/*.js",
-    // ".next/types/**/*.ts",
-    // "types/**/*.d.ts"
+    "*.js",
+    "index.css"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": [ "node_modules",  "dist" ]
 }