@vialiq/flux-ui 0.0.1

package/index.js

@@ -0,0 +1,205 @@
+// libs/flux-ui/src/tokens/index.ts
+var tokens = {
+  /**
+   * COLOR TOKENS
+   * Primary brand colors, semantic colors for states, and functional colors
+   */
+  colors: {
+    primary: "var(--vi-color-primary)",
+    secondary: "var(--vi-color-secondary)",
+    success: "var(--vi-color-success)",
+    warning: "var(--vi-color-warning)",
+    error: "var(--vi-color-error)",
+    info: "var(--vi-color-info)",
+    // Neutral palette (grey aliases)
+    neutral: {
+      100: "var(--vi-color-grey-100)",
+      200: "var(--vi-color-grey-200)",
+      300: "var(--vi-color-grey-300)",
+      400: "var(--vi-color-grey-400)",
+      500: "var(--vi-color-grey-500)",
+      600: "var(--vi-color-grey-600)",
+      700: "var(--vi-color-grey-700)",
+      800: "var(--vi-color-grey-800)",
+      900: "var(--vi-color-grey-900)"
+    },
+    // Color palettes
+    palettes: {
+      grey: {
+        100: "var(--vi-color-grey-100)",
+        200: "var(--vi-color-grey-200)",
+        300: "var(--vi-color-grey-300)",
+        400: "var(--vi-color-grey-400)",
+        500: "var(--vi-color-grey-500)",
+        600: "var(--vi-color-grey-600)",
+        700: "var(--vi-color-grey-700)",
+        800: "var(--vi-color-grey-800)",
+        900: "var(--vi-color-grey-900)"
+      },
+      red: {
+        100: "var(--vi-color-red-100)",
+        200: "var(--vi-color-red-200)",
+        300: "var(--vi-color-red-300)",
+        400: "var(--vi-color-red-400)",
+        500: "var(--vi-color-red-500)",
+        600: "var(--vi-color-red-600)",
+        700: "var(--vi-color-red-700)",
+        800: "var(--vi-color-red-800)",
+        900: "var(--vi-color-red-900)"
+      },
+      yellow: {
+        100: "var(--vi-color-yellow-100)",
+        200: "var(--vi-color-yellow-200)",
+        300: "var(--vi-color-yellow-300)",
+        400: "var(--vi-color-yellow-400)",
+        500: "var(--vi-color-yellow-500)",
+        600: "var(--vi-color-yellow-600)",
+        700: "var(--vi-color-yellow-700)",
+        800: "var(--vi-color-yellow-800)",
+        900: "var(--vi-color-yellow-900)"
+      },
+      green: {
+        100: "var(--vi-color-green-100)",
+        200: "var(--vi-color-green-200)",
+        300: "var(--vi-color-green-300)",
+        400: "var(--vi-color-green-400)",
+        500: "var(--vi-color-green-500)",
+        600: "var(--vi-color-green-600)",
+        700: "var(--vi-color-green-700)",
+        800: "var(--vi-color-green-800)",
+        900: "var(--vi-color-green-900)"
+      },
+      blue: {
+        100: "var(--vi-color-blue-100)",
+        200: "var(--vi-color-blue-200)",
+        300: "var(--vi-color-blue-300)",
+        400: "var(--vi-color-blue-400)",
+        500: "var(--vi-color-blue-500)",
+        600: "var(--vi-color-blue-600)",
+        700: "var(--vi-color-blue-700)",
+        800: "var(--vi-color-blue-800)",
+        900: "var(--vi-color-blue-900)"
+      },
+      purple: {
+        100: "var(--vi-color-purple-100)",
+        200: "var(--vi-color-purple-200)",
+        300: "var(--vi-color-purple-300)",
+        400: "var(--vi-color-purple-400)",
+        500: "var(--vi-color-purple-500)",
+        600: "var(--vi-color-purple-600)",
+        700: "var(--vi-color-purple-700)",
+        800: "var(--vi-color-purple-800)",
+        900: "var(--vi-color-purple-900)"
+      }
+    },
+    // Functional colors
+    background: "var(--vi-color-background)",
+    foreground: "var(--vi-color-foreground)",
+    border: "var(--vi-color-border)"
+  },
+  /**
+   * SPACING TOKENS
+   * 8px base unit system: xs (8px), sm (16px), md (24px), lg (32px), xl (40px), etc.
+   */
+  spacing: {
+    xs: "var(--vi-spacing-xs)",
+    sm: "var(--vi-spacing-sm)",
+    md: "var(--vi-spacing-md)",
+    lg: "var(--vi-spacing-lg)",
+    xl: "var(--vi-spacing-xl)",
+    "2xl": "var(--vi-spacing-2xl)",
+    "3xl": "var(--vi-spacing-3xl)"
+  },
+  /**
+   * TYPOGRAPHY TOKENS
+   * Font families, sizes, weights, and line heights
+   */
+  typography: {
+    fontFamily: {
+      base: "var(--vi-font-family-base)",
+      mono: "var(--vi-font-family-mono)"
+    },
+    fontSize: {
+      xs: "var(--vi-font-size-xs)",
+      sm: "var(--vi-font-size-sm)",
+      base: "var(--vi-font-size-base)",
+      lg: "var(--vi-font-size-lg)",
+      xl: "var(--vi-font-size-xl)",
+      "2xl": "var(--vi-font-size-2xl)",
+      "3xl": "var(--vi-font-size-3xl)"
+    },
+    fontWeight: {
+      light: 300,
+      normal: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    },
+    lineHeight: {
+      tight: 1.2,
+      normal: 1.5,
+      relaxed: 1.75
+    }
+  },
+  /**
+   * SHADOW TOKENS
+   * Depth levels for elevation
+   */
+  shadows: {
+    sm: "var(--vi-shadow-sm)",
+    md: "var(--vi-shadow-md)",
+    lg: "var(--vi-shadow-lg)",
+    xl: "var(--vi-shadow-xl)"
+  },
+  /**
+   * BORDER TOKENS
+   * Border radius and widths
+   */
+  borders: {
+    radius: {
+      sm: "var(--vi-border-radius-sm)",
+      md: "var(--vi-border-radius-md)",
+      lg: "var(--vi-border-radius-lg)",
+      xl: "var(--vi-border-radius-xl)"
+    },
+    width: {
+      thin: "var(--vi-border-width-thin)",
+      base: "var(--vi-border-width-base)",
+      thick: "var(--vi-border-width-thick)"
+    }
+  },
+  /**
+   * BREAKPOINT TOKENS
+   * Responsive design breakpoints (raw pixel values, not CSS vars)
+   * Use in a JS template literal: `@media (min-width: ${tokens.breakpoints.sm})`
+   * Use in plain CSS: @media (min-width: 640px)
+   */
+  breakpoints: {
+    xs: "0",
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px"
+  },
+  /**
+   * Z-INDEX TOKENS
+   * Stacking context levels (raw integers, not CSS vars)
+   * Use in CSS: z-index: tokens.zIndex.modal (e.g. 1050)
+   */
+  zIndex: {
+    hide: -1,
+    auto: "auto",
+    base: 0,
+    dropdown: 1e3,
+    sticky: 1020,
+    fixed: 1030,
+    backdrop: 1040,
+    modal: 1050,
+    popover: 1060,
+    tooltip: 1070
+  }
+};
+export {
+  tokens
+};

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@vialiq/flux-ui",
+  "version": "0.0.1",
+  "type": "module",
+  "description": "Custom minimal CSS/SASS framework for microfrontend product",
+  "license": "MIT",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./index.d.ts"
+    },
+    "./tokens": {
+      "import": "./tokens/index.js",
+      "types": "./tokens/index.d.ts"
+    },
+    "./styles": "./styles/_index.scss",
+    "./styles/*": "./styles/_*.scss",
+    "./components": "./components/_index.scss",
+    "./components/*": "./components/_*.scss",
+    "./flux-ui.css": "./flux-ui.css"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "index.js.map",
+    "index.d.ts.map",
+    "*.scss",
+    "styles/",
+    "components/",
+    "tokens/",
+    "flux-ui.css",
+    "flux-ui.css.map",
+    "README.md"
+  ]
+}

package/styles/_index.scss

@@ -0,0 +1,7 @@
+// Forwards all global style modules in cascade order.
+// Usage: @use '@vi/flux-ui/styles';
+@forward 'root';
+@forward 'reset';
+@forward 'theme';
+@forward 'layout';
+@forward 'utilities';

package/styles/_layout.scss

@@ -0,0 +1,223 @@
+/**
+ * Layout Utilities
+ * ================
+ * Flexbox and Grid utility styles for common layout patterns
+ */
+
+@use './variables' as *;
+
+@layer utilities {
+  // ============================================================================
+  // FLEXBOX
+  // ============================================================================
+
+  .flex {
+    display: flex;
+  }
+
+  .flex-col {
+    flex-direction: column;
+  }
+
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+
+  .flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .justify-start {
+    justify-content: flex-start;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-end {
+    justify-content: flex-end;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .justify-around {
+    justify-content: space-around;
+  }
+
+  .items-start {
+    align-items: flex-start;
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .items-end {
+    align-items: flex-end;
+  }
+
+  .items-stretch {
+    align-items: stretch;
+  }
+
+  .gap-xs {
+    gap: $spacing-xs;
+  }
+
+  .gap-sm {
+    gap: $spacing-sm;
+  }
+
+  .gap-md {
+    gap: $spacing-md;
+  }
+
+  .gap-lg {
+    gap: $spacing-lg;
+  }
+
+  .gap-xl {
+    gap: $spacing-xl;
+  }
+
+  .flex-1 {
+    flex: 1;
+  }
+
+  .flex-grow {
+    flex-grow: 1;
+  }
+
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
+
+  // ============================================================================
+  // GRID
+  // ============================================================================
+
+  .grid {
+    display: grid;
+  }
+
+  .grid-cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .grid-cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .grid-cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .grid-cols-auto-fit {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+
+  // ============================================================================
+  // DISPLAY
+  // ============================================================================
+
+  .hidden {
+    display: none;
+  }
+
+  .block {
+    display: block;
+  }
+
+  .inline-block {
+    display: inline-block;
+  }
+
+  .inline {
+    display: inline;
+  }
+
+  // ============================================================================
+  // POSITIONING
+  // ============================================================================
+
+  .relative {
+    position: relative;
+  }
+
+  .absolute {
+    position: absolute;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .static {
+    position: static;
+  }
+
+  .sticky {
+    position: sticky;
+  }
+
+  // ============================================================================
+  // SIZING
+  // ============================================================================
+
+  .w-full {
+    width: 100%;
+  }
+
+  .w-auto {
+    width: auto;
+  }
+
+  .h-full {
+    height: 100%;
+  }
+
+  .h-auto {
+    height: auto;
+  }
+
+  .min-h-screen {
+    min-height: 100vh;
+  }
+
+  .max-w-container {
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  // ============================================================================
+  // OVERFLOW
+  // ============================================================================
+
+  .overflow-hidden {
+    overflow: hidden;
+  }
+
+  .overflow-auto {
+    overflow: auto;
+  }
+
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
+  .overflow-y-auto {
+    overflow-y: auto;
+  }
+}

package/styles/_reset.scss

@@ -0,0 +1,192 @@
+/**
+ * Reset Styles
+ * ============
+ * Minimal, MFE-safe reset that doesn't conflict with other frameworks.
+ * Uses CSS Layers for cascade management.
+ */
+
+@use './variables' as *;
+
+@layer reset {
+  // ============================================================================
+  // BOX MODEL
+  // ============================================================================
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // ============================================================================
+  // DOCUMENT ROOT
+  // ============================================================================
+
+  html {
+    // Improve line spacing, prevent font size inflation
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+  }
+
+  // ============================================================================
+  // BODY
+  // ============================================================================
+
+  body {
+    margin: 0;
+    padding: 0;
+    font-family: $font-family-base;
+    font-size: $font-size-base;
+    line-height: $line-height-normal;
+    color: $color-foreground;
+    background-color: $color-background;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  // ============================================================================
+  // TEXT ELEMENTS
+  // ============================================================================
+
+  p, h1, h2, h3, h4, h5, h6, ul, ol, dl {
+    margin: 0;
+    padding: 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  ul, ol {
+    list-style: none;
+  }
+
+  // ============================================================================
+  // LINKS
+  // ============================================================================
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    background-color: transparent;
+
+    &:active,
+    &:hover {
+      outline: 0;
+    }
+  }
+
+  // ============================================================================
+  // CODE
+  // ============================================================================
+
+  code, pre, samp {
+    font-family: $font-family-mono;
+    font-size: 1em;
+  }
+
+  pre {
+    margin: 0;
+    overflow: auto;
+  }
+
+  // ============================================================================
+  // FORM ELEMENTS
+  // ============================================================================
+
+  button,
+  input,
+  select,
+  textarea {
+    margin: 0;
+    padding: 0;
+    font-family: inherit;
+    font-size: 100%;
+    line-height: 1.15;
+  }
+
+  button,
+  input[type="button"],
+  input[type="reset"],
+  input[type="submit"] {
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    -webkit-appearance: button;
+
+    &::-moz-focus-inner {
+      padding: 0;
+      border: 0;
+    }
+  }
+
+  input[type="checkbox"] {
+    padding: 0;
+    -webkit-appearance: checkbox;
+  }
+
+  input[type="radio"] {
+    padding: 0;
+    -webkit-appearance: radio;
+  }
+
+  textarea {
+    overflow: auto;
+    resize: vertical;
+  }
+
+  // ============================================================================
+  // TABLES
+  // ============================================================================
+
+  table {
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+
+  td,
+  th {
+    padding: 0;
+  }
+
+  // ============================================================================
+  // IMAGES & MEDIA
+  // ============================================================================
+
+  img,
+  svg {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+
+  img {
+    border: 0;
+    vertical-align: middle;
+  }
+
+  // ============================================================================
+  // EMBEDDED CONTENT
+  // ============================================================================
+
+  iframe,
+  video {
+    max-width: 100%;
+  }
+
+  // ============================================================================
+  // MISCELLANEOUS
+  // ============================================================================
+
+  [hidden] {
+    display: none;
+  }
+
+  hr {
+    margin: 0;
+    border: 0;
+    border-top: 1px solid $color-border;
+  }
+}