@area8975/ui 0.1.0

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@area8975/ui",
+  "version": "0.1.0",
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@floating-ui/dom": "^1.8.0",
+    "@ng-icons/core": "^35.0.1",
+    "@ng-icons/heroicons": "^35.0.1",
+    "@tailwindcss/forms": "^0.5.11",
+    "apexcharts": "^4.7.0",
+    "preline": "^4.2.0",
+    "rxjs": "~7.8.0",
+    "tailwindcss": "^4.3.3"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./theme.css": "./theme.css",
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/area8975-ui.d.ts",
+      "default": "./fesm2022/area8975-ui.mjs"
+    }
+  },
+  "module": "fesm2022/area8975-ui.mjs",
+  "typings": "types/area8975-ui.d.ts",
+  "type": "module"
+}

package/styles/typography.css

@@ -0,0 +1,52 @@
+
+
+@layer components {
+    .ui-text-h1 {
+        @apply
+            text-4xl
+            font-bold
+            font-heading;
+    }
+
+    .ui-text-h2 {
+        @apply
+            text-2xl
+            font-medium
+            font-heading;
+    }
+
+    .ui-text-h3 {
+        @apply
+            text-xl
+            font-medium
+            font-heading;
+    }
+
+    .ui-text-h4 {
+        @apply
+            text-base
+            font-medium
+            font-heading;
+    }
+
+    .ui-text-body {
+        @apply
+            text-base
+            font-normal
+            font-body;
+    }
+
+    .ui-text-body-alt {
+        @apply
+            text-sm
+            font-normal
+            font-body;
+    }
+
+    .ui-text-caption {
+        @apply
+            text-xs
+            font-normal
+            font-body;
+    }
+}

package/theme.css

@@ -0,0 +1,113 @@
+@import "./styles/typography.css";
+@plugin "@tailwindcss/forms";
+
+
+/* Adds pointer cursor to buttons */
+@layer base {
+    button:not(:disabled),
+    [role="button"]:not(:disabled) {
+        cursor: pointer;
+    }
+}
+
+/* Defaults hover styles on all devices */
+@custom-variant hover (&:hover);
+
+
+@font-face {
+    font-family: "Inter";
+    src: url("./fonts/Inter-VariableFont_opsz,wght.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: "Ubuntu";
+    src: url("./fonts/UbuntuSans-VariableFont_wdth,wght.woff2") format("woff2");
+    font-weight: 100 900;
+    font-style: normal;
+    font-display: swap;
+}
+
+
+@theme {
+    --font-heading: "Ubuntu", sans-serif;
+    --font-body: "Inter", sans-serif;
+
+
+    /* These aliases should make it easier to use colours consistently  */
+
+    /* Primary */
+
+    --color-primary-50: var(--color-blue-50);
+    --color-primary-100: var(--color-blue-100);
+    --color-primary-200: var(--color-blue-200);
+    --color-primary-300: var(--color-blue-300);
+    --color-primary-400: var(--color-blue-400);
+    --color-primary-500: var(--color-blue-500);
+    --color-primary-600: var(--color-blue-600);
+    --color-primary-700: var(--color-blue-700);
+    --color-primary-800: var(--color-blue-800);
+    --color-primary-900: var(--color-blue-900);
+    --color-primary-950: var(--color-blue-950);
+
+    /* Secondary */
+
+    --color-secondary-50: var(--color-gray-50);
+    --color-secondary-100: var(--color-gray-100);
+    --color-secondary-200: var(--color-gray-200);
+    --color-secondary-300: var(--color-gray-300);
+    --color-secondary-400: var(--color-gray-400);
+    --color-secondary-500: var(--color-gray-500);
+    --color-secondary-600: var(--color-gray-600);
+    --color-secondary-700: var(--color-gray-700);
+    --color-secondary-800: var(--color-gray-800);
+    --color-secondary-900: var(--color-gray-900);
+    --color-secondary-950: var(--color-gray-950);
+
+
+    /* Success */
+
+    --color-success-50: var(--color-teal-50);
+    --color-success-100: var(--color-teal-100);
+    --color-success-200: var(--color-teal-200);
+    --color-success-300: var(--color-teal-300);
+    --color-success-400: var(--color-teal-400);
+    --color-success-500: var(--color-teal-500);
+    --color-success-600: var(--color-teal-600);
+    --color-success-700: var(--color-teal-700);
+    --color-success-800: var(--color-teal-800);
+    --color-success-900: var(--color-teal-900);
+    --color-success-950: var(--color-teal-950);
+
+    
+    /* Warning */
+
+    --color-warning-50: var(--color-yellow-50);
+    --color-warning-100: var(--color-yellow-100);
+    --color-warning-200: var(--color-yellow-200);
+    --color-warning-300: var(--color-yellow-300);
+    --color-warning-400: var(--color-yellow-400);
+    --color-warning-500: var(--color-yellow-500);
+    --color-warning-600: var(--color-yellow-600);
+    --color-warning-700: var(--color-yellow-700);
+    --color-warning-800: var(--color-yellow-800);
+    --color-warning-900: var(--color-yellow-900);
+    --color-warning-950: var(--color-yellow-950);
+
+
+    /* Danger */
+
+    --color-danger-50: var(--color-red-50);
+    --color-danger-100: var(--color-red-100);
+    --color-danger-200: var(--color-red-200);
+    --color-danger-300: var(--color-red-300);
+    --color-danger-400: var(--color-red-400);
+    --color-danger-500: var(--color-red-500);
+    --color-danger-600: var(--color-red-600);
+    --color-danger-700: var(--color-red-700);
+    --color-danger-800: var(--color-red-800);
+    --color-danger-900: var(--color-red-900);
+    --color-danger-950: var(--color-red-950);
+}