@foxeltech/angular-ui 0.2.0 → 0.3.0

package/tokens.css

@@ -0,0 +1,131 @@
+/*
+ * Tailwind v4 CSS-first theme for @foxeltech/angular-ui.
+ * Replaces the old JS preset (tailwind.config.js / lodash.merge sharing).
+ *
+ * Colour tokens point at the runtime RGB-triplet variables from theme.css
+ * (dark default on :root, light via .light_theme) so theme switching keeps
+ * working; opacity modifiers like bg-critical/10 are handled by v4's
+ * color-mix() and need no <alpha-value> plumbing.
+ */
+/* `inline` is load-bearing: without it the rgb(var(--x)) values are baked
+   into :root once, so .light_theme's runtime triplet overrides never reach
+   the utilities. inline makes every utility carry rgb(var(--x)) itself and
+   resolve at the element that uses it — same behavior as v3. */
+@theme inline {
+  /* Colours (names match the v3 preset so every existing class keeps working) */
+  --color-gradient-primary-start: rgb(var(--gradient-primary-start));
+  --color-gradient-primary-end: rgb(var(--gradient-primary-end));
+  --color-gradient-success-start: rgb(var(--gradient-success-start));
+  --color-gradient-success-end: rgb(var(--gradient-success-end));
+  --color-primary: rgb(var(--primary));
+  --color-success: rgb(var(--success));
+  --color-danger: rgb(var(--danger));
+  --color-warning: rgb(var(--warning));
+  --color-critical: rgb(var(--critical));
+  --color-discovery: rgb(var(--discovery));
+  --color-information: rgb(var(--information));
+  --color-bg-primary: rgb(var(--bg-primary));
+  --color-bg-canvas: rgb(var(--bg-canvas));
+  --color-bg-hover: rgb(var(--bg-primary-hover));
+  --color-bg-error: rgb(var(--bg-error-bold));
+  --color-bg-hover2: rgb(var(--bg-secondary-hover));
+  --color-text-primary: rgb(var(--text-primary));
+  --color-text-secondary: rgb(var(--text-secondary));
+  --color-text-placeholder: rgb(var(--text-placeholder));
+  --color-text-selected: rgb(var(--text-selected-primary));
+  --color-text-focus: rgb(var(--text-focus));
+  --color-text-inverse: rgb(var(--text-inverse));
+  --color-text-error: rgb(var(--text-error));
+  --color-text-link: rgb(var(--text-link-primary));
+  --color-border-default: rgb(var(--border-default));
+  --color-border-interactive: rgb(var(--border-interactive));
+  --color-border-selected: rgb(var(--border-selected));
+  --color-border-strong: rgb(var(--border-strong));
+  --color-border-hover2: rgb(var(--border-secondary-hover));
+  --color-button-default: rgb(var(--button-default));
+  --color-button-primary: rgb(var(--button-primary));
+
+  /* Breakpoints (v3 custom screens) */
+  --breakpoint-sm: 480px;
+  --breakpoint-md: 720px;
+  --breakpoint-lg: 1080px;
+  --breakpoint-xl: 1920px;
+
+  /* Shadows — same scale as the v3 preset, incl. the DEFAULT key so the bare
+     `shadow` utility keeps its v3 meaning (no shadow→shadow-sm rename sweep). */
+  --shadow-sm: 0 1px 2px 0 rgb(var(--shadow-color) / 0.05);
+  --shadow: 0 1px 3px 0 rgb(var(--shadow-color) / 0.1), 0 1px 2px -1px rgb(var(--shadow-color) / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 10px 10px -5px rgb(var(--shadow-color) / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(var(--shadow-color) / 0.25);
+  --inset-shadow-sm: inset 0 2px 4px 0 rgb(var(--shadow-color) / 0.05);
+
+  /* v3 default border radii, incl. DEFAULT so bare `rounded` keeps working */
+  --radius-sm: 0.125rem;
+  --radius: 0.25rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.5rem;
+  --radius-xl: 0.75rem;
+  --radius-2xl: 1rem;
+  --radius-3xl: 1.5rem;
+
+  /* Named spacing scale (gap-small, p-semi, mb-large, …) */
+  --spacing-xs: 0.125rem;
+  --spacing-small: 0.25rem;
+  --spacing-normal: 0.5rem;
+  --spacing-semi: 0.75rem;
+  --spacing-large: 1rem;
+  --spacing-xl: 1.25rem;
+  --spacing-2xl: 1.5rem;
+
+  /* Font families */
+  --font-spmono: 'SpaceMonoRegular', monospace;
+  --font-dmsans: 'DMSans', sans-serif;
+  --font-orbitron: 'Orbitron', sans-serif;
+  --font-bevn: 'BeVietnamPro', sans-serif;
+  --font-roboto: 'Roboto', sans-serif;
+
+  /* Font-size overrides (v3 preset values) */
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.625rem;
+  --text-3xl: 2rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+}
+
+/* v3 backgroundImage entries — v4 has no background-image theme namespace */
+@utility bg-gradient-primary {
+  background-image: linear-gradient(
+    135deg,
+    rgb(var(--gradient-primary-start)) 0%,
+    rgb(var(--gradient-primary-end)) 100%
+  );
+}
+@utility bg-gradient-success {
+  background-image: linear-gradient(
+    135deg,
+    rgb(var(--gradient-success-start)) 0%,
+    rgb(var(--gradient-success-end)) 100%
+  );
+}
+
+/* v3 behavior compat (per the official upgrade guide) */
+@layer base {
+  /* v4 defaults borders to currentColor; restore the theme default */
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: rgb(var(--border-default));
+  }
+  /* v4 preflight switched buttons to cursor: default */
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}

package/utilities.css

@@ -0,0 +1,24 @@
+/*
+ * Shared composable utilities (v4 @utility) — kept OUT of components.css
+ * because that file is imported inside layer(components) and @utility must
+ * be top-level/unlayered. Usable both in markup and via @apply.
+ */
+@utility txt-tag-common {
+  @apply font-semibold text-xs;
+}
+
+@utility btn-common {
+  @apply flex text-sm h-10 font-semibold px-xl py-normal items-center justify-center rounded-lg shadow-sm transition-all duration-200 disabled:opacity-50 disabled:pointer-events-none disabled:cursor-not-allowed;
+}
+
+@utility btn-menu-common {
+  @apply flex flex-row items-center px-semi;
+}
+
+@utility card-common {
+  @apply text-left px-xl py-large border border-border-default rounded-lg shadow-sm transition-colors duration-500 ease-in-out;
+}
+
+@utility tag-common {
+  @apply flex min-w-7 px-[10px] py-[2px] leading-5 hover:opacity-70 items-center justify-center;
+}

package/tailwind-config.d.ts

@@ -1,4 +0,0 @@
-declare module '@fx/ui/tailwind.config' {
-  const config: any;
-  export default config;
-}

package/tailwind.config.js

@@ -1,113 +0,0 @@
-module.exports = {
-  // Tone utilities are built dynamically (`text-${tone}`) by value-tone.util
-  // and fx-ui components, so content scanning can't see them — safelist keeps
-  // them generated in every host app.
-  safelist: [
-    { pattern: /^(text|bg)-(critical|danger|warning|success|information)$/ },
-    ...['critical', 'danger', 'warning', 'success', 'information'].map((t) => `bg-${t}/10`),
-    // Classes emitted from fx-ui component TypeScript (not scannable content):
-    'text-text-secondary',
-    'text-text-primary',
-    'text-text-focus',
-    'bg-bg-hover',
-    'bg-text-primary',
-    'hover:bg-gradient-primary-start/10',
-    'hover:text-gradient-primary-start',
-    'hover:opacity-50',
-    'font-mono',
-    'break-all',
-  ],
-  theme: {
-    extend: {
-      colors: {
-        'gradient-primary-start': 'rgb(var(--gradient-primary-start) / <alpha-value>)',
-        'gradient-primary-end': 'rgb(var(--gradient-primary-end) / <alpha-value>)',
-        'gradient-success-start': 'rgb(var(--gradient-success-start) / <alpha-value>)',
-        'gradient-success-end': 'rgb(var(--gradient-success-end) / <alpha-value>)',
-        primary: 'rgb(var(--primary) / <alpha-value>)',
-        success: 'rgb(var(--success) / <alpha-value>)',
-        danger: 'rgb(var(--danger) / <alpha-value>)',
-        warning: 'rgb(var(--warning) / <alpha-value>)',
-        critical: 'rgb(var(--critical) / <alpha-value>)',
-        discovery: 'rgb(var(--discovery) / <alpha-value>)',
-        information: 'rgb(var(--information) / <alpha-value>)',
-        bg: {
-          primary: 'rgb(var(--bg-primary) / <alpha-value>)',
-          canvas: 'rgb(var(--bg-canvas) / <alpha-value>)',
-          hover: 'rgb(var(--bg-primary-hover) / <alpha-value>)',
-          error: 'rgb(var(--bg-error-bold) / <alpha-value>)',
-          hover2: 'rgb(var(--bg-secondary-hover) / <alpha-value>)',
-        },
-        text: {
-          primary: 'rgb(var(--text-primary) / <alpha-value>)',
-          secondary: 'rgb(var(--text-secondary) / <alpha-value>)',
-          placeholder: 'rgb(var(--text-placeholder) / <alpha-value>)',
-          selected: 'rgb(var(--text-selected-primary) / <alpha-value>)',
-          focus: 'rgb(var(--text-focus) / <alpha-value>)',
-          inverse: 'rgb(var(--text-inverse) / <alpha-value>)',
-          error: 'rgb(var(--text-error) / <alpha-value>)',
-          link: 'rgb(var(--text-link-primary) / <alpha-value>)',
-        },
-        border: {
-          default: 'rgb(var(--border-default) / <alpha-value>)',
-          interactive: 'rgb(var(--border-interactive) / <alpha-value>)',
-          selected: 'rgb(var(--border-selected) / <alpha-value>)',
-          strong: 'rgb(var(--border-strong) / <alpha-value>)',
-          hover2: 'rgb(var(--border-secondary-hover) / <alpha-value>)'
-        },
-        button: {
-          default: 'rgb(var(--button-default) / <alpha-value>)',
-          primary: 'rgb(var(--button-primary) / <alpha-value>)',
-        },
-      },
-      backgroundImage: {
-        'gradient-primary':
-          'linear-gradient(135deg, rgb(var(--gradient-primary-start)) 0%, rgb(var(--gradient-primary-end)) 100%)',
-        'gradient-success':
-          'linear-gradient(135deg, rgb(var(--gradient-success-start)) 0%, rgb(var(--gradient-success-end)) 100%)',
-      },
-      screens: {
-        sm: '480px',
-        md: '720px',
-        lg: '1080px',
-        xl: '1920px'
-      },
-      boxShadow: {
-        sm: '0 1px 2px 0 rgb(var(--shadow-color) / 0.05)',
-        DEFAULT: '0 1px 3px 0 rgb(var(--shadow-color) / 0.1), 0 1px 2px -1px rgb(var(--shadow-color) / 0.1)',
-        md: '0 4px 6px -1px rgb(var(--shadow-color) / 0.1), 0 2px 4px -2px rgb(var(--shadow-color) / 0.1)',
-        lg: '0 10px 15px -3px rgb(var(--shadow-color) / 0.1), 0 4px 6px -4px rgb(var(--shadow-color) / 0.1)',
-        xl: '0 20px 25px -5px rgb(var(--shadow-color) / 0.1), 0 10px 10px -5px rgb(var(--shadow-color) / 0.1)',
-        '2xl': '0 25px 50px -12px rgb(var(--shadow-color) / 0.25)',
-        inner: 'inset 0 2px 4px 0 rgb(var(--shadow-color) / 0.05)',
-      },
-      spacing: {
-        xs: '0.125rem',
-        small: '0.25rem',
-        normal: '0.5rem',
-        semi: '0.75rem',
-        large: '1rem',
-        xl: '1.25rem',
-        '2xl': '1.5rem',
-      },
-      fontFamily:{
-        spmono: ['SpaceMonoRegular', 'monospace'],
-        dmsans: ['DMSans', 'sans-serif'],
-        orbitron: ['Orbitron', 'sans-serif'],
-        bevn: ['BeVietnamPro', 'sans-serif'],
-        roboto: ['Roboto', 'sans-serif'],
-      },
-      fontSize: {
-        xs: '0.75rem',
-        sm: '0.875rem',
-        base: '1rem',
-        xl: '1.25rem',
-        '2xl': '1.625rem',
-        '3xl': '2rem',
-        '4xl': '2.25rem',
-        '5xl': '3rem',
-      }
-    },
-  },
-  plugins: [],
-};