oneslash-design-system 1.2.12 → 1.2.14

package/designTokens.js

@@ -0,0 +1,234 @@
+// design tokens definitions
+module.exports = {
+  colors: {
+    // light
+    light:{
+      text:{
+        primary: '#000000',
+        secondary: '#6D6D6D',
+        disabled: '#9E9E9E',
+        contrast: '#ffffff',
+      },
+      accent:{
+        main: '#EEAE03',
+        dark: '#CE8602',
+        light: '#FFDD43',
+        contrast: '#000000',
+      },
+      primary:{
+        main: '#454545',
+        dark: '#262626',
+        light: '#888888',
+      },
+      secondary:{
+        main: '#B0B0B0',
+        dark: '#888888',
+        light: '#D1D1D1',
+      },
+      error:{
+        main: '#D32F2F',
+        dark: '#B22323',
+        light: '#F27777',
+      },
+      warning:{
+        main: '#EF6C00',
+        dark: '#CC5302',
+        light: '#FFA732',
+      },
+      info:{
+        main: '#0087D4',
+        dark: '#006BAB',
+        light: '#2CC1FF',
+      },
+      success:{
+        main: '#328736',
+        dark: '#2A6B2D',
+        light: '#67C16B',
+      },
+      background:{
+        default: '#e8e8e8',
+        accent100:'#f1f1f1',
+        accent200:'#f7f7f7',
+        accent300:'#FFFFFF',
+      },
+      action:{
+        active: '#888888',
+        hover: '#F3F3F3',
+        selected: '#E3E3E3',
+        disabledBackground: '#D1D1D1',
+        disabled: '#B0B0B0',
+      },
+      actionBackground:{
+        enabled: '#FFFFFF',
+        hovered: '#FFFFFF',
+        selected: '#FFFFFF',
+        disabled: '#EEEEEE',
+      },
+      actionOutlinedBorder:{
+        enabled: '#888888',
+        hovered: '#CDCDCD',
+        selected: '#E8E8E8',
+        disabled: '#B0B0B0',
+      },
+      misc:{
+        divider: '#D1D1D1',
+      },
+    },
+
+    // dark
+    dark:{
+      text:{
+        primary: '#eeeeee',
+        secondary: '#B0B0B0',
+        disabled: '#6D6D6D',
+        contrast: '#000000',
+      },
+      accent:{
+        main: '#FFCD29',
+        dark: '#CE8602',
+        light: '#FFDD43',
+        contrast: '#000000',
+      },
+      primary:{
+        main: '#D5D5D5',
+        dark: '#E9E9E9',
+        light: '#9A9A9A',
+      },
+      secondary:{
+        main: '#4F4F4F',
+        dark: '#454545',
+        light: '#6D6D6D',
+      },
+      error:{
+        main: '#E74C4C',
+        dark: '#B22323',
+        light: '#F27777',
+      },
+      warning:{
+        main: '#FF8C0A',
+        dark: '#CC5302',
+        light: '#FFA732',
+      },
+      info:{
+        main: '#00AFFF',
+        dark: '#006BAB',
+        light: '#2CC1FF',
+      },
+      success:{
+        main: '#42A547',
+        dark: '#2A6B2D',
+        light: '#67C16B',
+      },
+      background:{
+        default: '#262626',
+        accent100:'#333333',
+        accent200:'#454545',
+        accent300:'#4F4F4F',
+      },
+      action:{
+        active: '#171717',
+        hover: '#3D3D3D',
+        selected: '#4E4E4E',
+        disabledBackground: '#3C3C3C',
+        disabled: '#383838',
+      },
+      actionBackground:{
+        enabled: '#FFFFFF',
+        hovered: '#FFFFFF',
+        selected: '#FFFFFF',
+        disabled: '#383838',
+      },
+      actionOutlinedBorder:{
+        enabled: '#7B7B7B',
+        hovered: '#2F2F2F',
+        selected: '#404040',
+        disabled: '#383838',
+      },
+      misc:{
+        divider: '#404040',
+      },
+    },
+  },
+
+  spacing: {
+    small: '4px',
+    medium: '8px',
+    large: '16px',
+  },
+  
+  typography: {
+    family: 'Inter, sans-serif',
+    h1: {
+      weight: '300',
+      size: '96px',
+      lineHeight: '120%',
+      letterSpacing: '-1.5px',
+    },
+    h2: {
+      weight: '300',
+      size: '60px',
+      lineHeight: '120%',
+      letterSpacing: '-0.5px',
+    },
+    h3: {
+      weight: '400',
+      size: '48px',
+      lineHeight: '120%',
+      letterSpacing: '0px',
+    },
+    h4: {
+      weight: '400',
+      size: '34px',
+      lineHeight: '120%',
+      letterSpacing: '0.3px',
+    },
+    h5: {
+      weight: '400',
+      size: '24px',
+      lineHeight: '120%',
+      letterSpacing: '0px',
+    },
+    h6: {
+      weight: '500',
+      size: '20px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    subtitle1: {
+      weight: '500',
+      size: '16px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    subtitle2: {
+      weight: '500',
+      size: '14px',
+      lineHeight: '150%',
+      letterSpacing: '0.1px',
+    },
+    body1: {
+      weight: '400',
+      size: '16px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    body2: {
+      weight: '400',
+      size: '14px',
+      lineHeight: '150%',
+      letterSpacing: '0.2px',
+    },
+    caption: {
+      weight: '400',
+      size: '12px',
+      lineHeight: '150%',
+      letterSpacing: '0.5px',
+    },
+    alignments: {
+      left: 'left',
+      center: 'center',
+      right: 'right',
+      justify: 'justify',
+    },
+  },
+};

package/index.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
+
+body {
+  font-family: 'Inter', sans-serif;
+}

package/index.ts

@@ -0,0 +1,21 @@
+import './index.css';
+import './designTokens';
+
+export * from './components/alert';
+export * from './components/button';
+export * from './components/checkBox';
+export * from './components/emptyBox';
+export * from './components/iconButton';
+export * from './components/loadingScreen';
+export * from './components/menu';
+export * from './components/menuItem';
+export * from './components/modal';
+export * from './components/navigation';
+export * from './components/popover';
+export * from './components/select';
+export * from './components/tab';
+export * from './components/tag';
+export * from './components/textField';
+export * from './components/timeStamp'
+export * from './components/tooltip';
+export * from './components/userImage';

package/next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/package.json

@@ -1,46 +1,25 @@
 {
   "name": "oneslash-design-system",
   "description": "A design system for the Oneslash projects",
-  "version": "1.2.12",
+  "version": "1.2.14",
   "private": false,
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
-    },
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "default": "./dist/components/*.jsx"
-    },
-    "./designTokens": {
-      "types": "./dist/designTokens.d.ts",
-      "default": "./dist/designTokens.js"
-    },
-    "./styles": "./dist/output.css",
-    "./dist/*": "./dist/*"
-  },
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "dev": "next dev",
     "build": "tsc && postcss index.css -o dist/output.css",
     "build:css": "postcss index.css -o dist/output.css",
-    "watch": "tsc --watch",
     "start": "next start",
     "lint": "next lint"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
     "@popperjs/core": "^2.11.8",
+    "next": "14.2.13",
+    "react": "^18",
+    "react-dom": "^18",
     "react-popper": "^2.3.0"
   },
-  "peerDependencies": {
-    "react": "^18 || ^19",
-    "react-dom": "^18 || ^19"
-  },
   "devDependencies": {
     "@types/node": "20.16.10",
     "@types/react": "18.3.10",
@@ -48,11 +27,8 @@
     "autoprefixer": "^10.4.20",
     "eslint": "^8",
     "eslint-config-next": "14.2.13",
-    "next": "14.2.13",
     "postcss": "^8",
     "postcss-cli": "^11.0.0",
-    "react": "^18",
-    "react-dom": "^18",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1",
     "typescript": "5.6.2"

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

package/tailwind.config.ts

@@ -0,0 +1,232 @@
+import type { Config } from "tailwindcss";
+
+const designTokens = require('./designTokens');
+
+const config: 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/tsconfig.json

@@ -0,0 +1,37 @@
+{
+  "compilerOptions": {
+    "lib": [ "dom", "dom.iterable", "esnext" ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [ "./*" ]
+    },
+    "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",
+    "index.css"
+  ],
+  "exclude": [ "node_modules",  "dist" ]
+}