@wippy-fe/theme 0.0.7

package/primevue/treetable.css

@@ -0,0 +1,300 @@
+@import './paginator';
+
+.p-treetable {
+    @apply relative
+}
+
+.p-treetable-table {
+    @apply border-spacing-0 w-full
+}
+
+.p-treetable-scrollable > .p-treetable-table-container {
+    @apply relative
+}
+
+.p-treetable-scrollable-table > .p-treetable-thead {
+    @apply top-0 z-10
+}
+
+.p-treetable-scrollable-table > .p-treetable-frozen-tbody {
+    @apply sticky z-10
+}
+
+.p-treetable-scrollable-table>.p-treetable-tfoot {
+    @apply bottom-0 z-10
+}
+
+.p-treetable-scrollable .p-treetable-frozen-column {
+    @apply sticky bg-surface-0 dark:bg-surface-900
+}
+
+.p-treetable-scrollable th.p-treetable-frozen-column {
+    @apply z-10
+}
+
+.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-thead {
+    @apply bg-surface-0 dark:bg-surface-900
+}
+
+.p-treetable-scrollable > .p-treetable-table-container > .p-treetable-table > .p-treetable-tfoot  {
+    @apply bg-surface-0 dark:bg-surface-900
+}
+
+.p-treetable-flex-scrollable {
+    @apply flex flex-col h-full
+}
+
+.p-treetable-flex-scrollable > .p-treetable-table-container {
+    @apply flex flex-col flex-1 h-full
+}
+
+.p-treetable-scrollable-table > .p-treetable-tbody > .p-treetable-row-group-header {
+    @apply sticky z-10
+}
+
+.p-treetable-resizable-table > .p-treetable-thead > tr > th,
+.p-treetable-resizable-table > .p-treetable-tfoot > tr > td,
+.p-treetable-resizable-table > .p-treetable-tbody > tr > td {
+    @apply overflow-hidden whitespace-nowrap
+}
+
+.p-treetable-resizable-table > .p-treetable-thead > tr > th.p-treetable-resizable-column:not(.p-treetable-frozen-column) {
+    @apply bg-clip-padding relative
+}
+
+.p-treetable-resizable-table-fit > .p-treetable-thead > tr > th.p-treetable-resizable-column:last-child .p-treetable-column-resizer {
+    @apply hidden
+}
+
+.p-treetable-column-resizer {
+    @apply block absolute top-0 end-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent
+}
+
+.p-treetable-column-header-content {
+    @apply flex items-center gap-2
+}
+
+.p-treetable-column-resize-indicator {
+    @apply w-px absolute z-10 hidden bg-primary
+}
+
+.p-treetable-mask {
+    @apply absolute flex items-center justify-center z-20
+}
+
+.p-treetable-paginator-top {
+    @apply border-b border-surface-200 dark:border-surface-700
+}
+
+.p-treetable-paginator-bottom {
+    @apply border-t border-surface-200 dark:border-surface-700
+}
+
+.p-treetable-header {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-footer {
+    @apply py-3 px-4 border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-header-cell {
+    @apply py-3 px-4 font-normal text-start transition-colors duration-200
+        border-b border-surface-200 dark:border-surface-700
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-column-title {
+    @apply font-semibold
+}
+
+.p-treetable-tbody > tr {
+    @apply bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 transition-colors duration-200
+}
+
+.p-treetable-tbody > tr > td {
+    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
+}
+
+.p-treetable-hoverable .p-treetable-tbody > tr:not(.p-treetable-row-selected):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected {
+    @apply bg-highlight
+}
+
+.p-treetable-tbody > tr:has(+ .p-treetable-row-selected) > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected > td {
+    @apply border-b-primary-100 dark:border-b-primary-900
+}
+
+.p-treetable-tbody > tr:focus-visible,
+.p-treetable-tbody > tr.p-treetable-contextmenu-row-selected {
+    @apply outline outline-1 -outline-offset-1 outline-primary
+}
+
+.p-treetable-tfoot > tr > td {
+    @apply text-start py-3 px-4 border-b border-surface-200 dark:border-surface-800
+        bg-surface-0 dark:bg-surface-900
+        text-surface-700 dark:text-surface-0
+}
+
+.p-treetable-column-footer {
+    @apply font-semibold
+}
+
+.p-treetable-sortable-column {
+    @apply cursor-pointer select-none focus-visible:outline focus-visible:outline-1 focus-visible:-outline-offset-1 focus-visible:outline-primary
+}
+
+.p-treetable-column-title,
+.p-treetable-sort-icon,
+.p-treetable-sort-badge {
+    @apply align-middle
+}
+
+.p-treetable-sort-icon {
+    @apply text-surface-500 dark:text-surface-400 transition-colors duration-200
+}
+
+.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover {
+    @apply bg-surface-100 text-surface-800 dark:bg-surface-800 dark:text-surface-0
+}
+
+.p-treetable-sortable-column:not(.p-treetable-column-sorted):hover .p-treetable-sort-icon {
+    @apply text-surface-600 dark:text-surface-300
+}
+
+.p-treetable-column-sorted {
+    @apply bg-highlight
+}
+
+.p-treetable-column-sorted .p-treetable-sort-icon {
+    @apply bg-highlight
+}
+
+.p-treetable-hoverable .p-treetable-selectable-row {
+    @apply cursor-pointer
+}
+
+.p-treetable-loading-icon {
+    @apply text-[2rem] w-8 h-8
+}
+
+.p-treetable-gridlines .p-treetable-header {
+    @apply border-t border-x
+}
+
+.p-treetable-gridlines .p-treetable-footer {
+    @apply border-b border-x
+}
+
+.p-treetable-gridlines .p-treetable-paginator-top {
+    @apply border-t border-x
+}
+
+.p-treetable-gridlines .p-treetable-paginator-bottom {
+    @apply border-b border-x
+}
+
+.p-treetable-gridlines .p-treetable-thead > tr > th {
+    @apply border-t border-x last:border
+}
+
+.p-treetable-gridlines .p-treetable-tbody > tr > td {
+    @apply border-t border-s last:border-r
+}
+
+.p-treetable-gridlines .p-treetable-tbody > tr:last-child > td {
+    @apply border-y border-s last:border
+}
+
+.p-treetable-gridlines .p-treetable-tfoot > tr > td {
+    @apply border-y border-s last:border
+}
+
+.p-treetable.p-treetable-gridlines .p-treetable-thead + .p-treetable-tfoot > tr > td {
+    @apply border-b border-s last:border-r
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-thead):has(.p-treetable-tbody) .p-treetable-tbody > tr > td {
+    @apply border-b border-s last:border-r
+}
+
+.p-treetable.p-treetable-gridlines:has(.p-treetable-tbody):has(.p-treetable-tfoot) .p-treetable-tbody > tr:last-child > td {
+    @apply border-x
+}
+
+.p-treetable.p-treetable-sm .p-treetable-header {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-thead > tr > th {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-tbody > tr > td {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-tfoot > tr > td {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-sm .p-treetable-footer {
+    @apply py-1 px-2
+}
+
+.p-treetable.p-treetable-lg .p-treetable-header {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-thead > tr > th {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-tbody>tr>td {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-tfoot>tr>td {
+    @apply py-4 px-5
+}
+
+.p-treetable.p-treetable-lg .p-treetable-footer {
+    @apply py-4 px-5
+}
+
+.p-treetable-body-cell-content {
+    @apply flex items-center gap-2
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button {
+    @apply text-inherit
+}
+
+.p-treetable-node-toggle-button {
+    @apply inline-flex items-center justify-center overflow-hidden relative select-none
+        transition-colors duration-200 w-7 h-7 rounded-full border-none bg-transparent cursor-pointer
+        enabled:hover:bg-surface-100 dark:enabled:hover:bg-surface-900
+        text-surface-500 dark:text-surface-400 enabled:hover:text-surface-700 dark:enabled:hover:text-surface-0
+        focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary
+
+}
+
+.p-treetable-tbody > tr.p-treetable-row-selected .p-treetable-node-toggle-button:hover {
+    @apply bg-surface-0 dark:bg-surface-900 text-primary
+}
+
+.p-treetable-node-toggle-icon:dir(rtl) {
+    @apply rotate-180
+}

package/primevue-plugin.ts

@@ -0,0 +1,8 @@
+import PrimeVue from 'primevue/config'
+import type { App } from 'vue'
+
+export const PrimeVuePlugin = {
+  install: (app: App) => app.use(PrimeVue, { theme: 'none' })
+}
+
+export default PrimeVuePlugin

package/tailwind.config.ts

@@ -0,0 +1,28 @@
+import TailwindScrollbar from 'tailwind-scrollbar'
+import PrimeUI from 'tailwindcss-primeui'
+
+export default {
+  theme: {
+    extend: {
+      colors: {
+        secondary: {
+          50: 'var(--p-secondary-50)',
+          100: 'var(--p-secondary-100)',
+          200: 'var(--p-secondary-200)',
+          300: 'var(--p-secondary-300)',
+          400: 'var(--p-secondary-400)',
+          500: 'var(--p-secondary-500)',
+          600: 'var(--p-secondary-600)',
+          700: 'var(--p-secondary-700)',
+          800: 'var(--p-secondary-800)',
+          900: 'var(--p-secondary-900)',
+          950: 'var(--p-secondary-950)',
+        },
+      },
+    },
+  },
+  plugins: [
+    PrimeUI,
+    TailwindScrollbar({ nocompatible: true, preferredStrategy: 'pseudoelements' }),
+  ],
+}

package/theme-config.css

@@ -0,0 +1,124 @@
+/* Primary and Surface Palettes */
+:root {
+    --p-primary: rgb(0, 95, 178);
+
+    /* Using color-mix to create a numbered variable system */
+    --p-primary-50: color-mix(in srgb, var(--p-primary) 5%, white);  /* #f2f5fa */
+    --p-primary-100: color-mix(in srgb, var(--p-primary) 10%, white);  /* #e6ebf5 */
+    --p-primary-200: color-mix(in srgb, var(--p-primary) 20%, white);  /* #ccd6eb */
+    --p-primary-300: color-mix(in srgb, var(--p-primary) 30%, white);  /* #b3c2e0 */
+    --p-primary-400: color-mix(in srgb, var(--p-primary) 40%, white);  /* #99add6 */
+    --p-primary-500: var(--p-primary);  /* #005fb2 */
+    --p-primary-600: color-mix(in srgb, var(--p-primary) 80%, black);  /* #004c8e */
+    --p-primary-700: color-mix(in srgb, var(--p-primary) 70%, black);  /* #00427c */
+    --p-primary-800: color-mix(in srgb, var(--p-primary) 60%, black);  /* #00386a */
+    --p-primary-900: color-mix(in srgb, var(--p-primary) 50%, black);  /* #002f59 */
+    --p-primary-950: color-mix(in srgb, var(--p-primary) 40%, black);  /* #002647 */
+
+    /* Define secondary base color */
+    --p-secondary: #6f7385;
+
+    /* Create secondary color scale using color-mix */
+    --p-secondary-50: color-mix(in srgb, var(--p-secondary) 5%, white);  /* #f7f7f8 */
+    --p-secondary-100: color-mix(in srgb, var(--p-secondary) 10%, white);  /* #ededf1 */
+    --p-secondary-200: color-mix(in srgb, var(--p-secondary) 20%, white);  /* #d8d9df */
+    --p-secondary-300: color-mix(in srgb, var(--p-secondary) 35%, white);  /* #b6b8c3 */
+    --p-secondary-400: color-mix(in srgb, var(--p-secondary) 65%, white);  /* #8e92a2 */
+    --p-secondary-500: var(--p-secondary);  /* #6f7385 */
+    --p-secondary-600: color-mix(in srgb, var(--p-secondary) 80%, black);  /* #5a5d6f */
+    --p-secondary-700: color-mix(in srgb, var(--p-secondary) 65%, black);  /* #4a4c5a */
+    --p-secondary-800: color-mix(in srgb, var(--p-secondary) 55%, black);  /* #40424c */
+    --p-secondary-900: color-mix(in srgb, var(--p-secondary) 50%, black);  /* #383942 */
+    --p-secondary-950: color-mix(in srgb, var(--p-secondary) 30%, black);  /* #25252c */
+    --p-surface-0: #fff;
+    --p-surface-50: #fafafa;
+    --p-surface-100: #f4f4f5;
+    --p-surface-200: #e4e4e7;
+    --p-surface-300: #d4d4d8;
+    --p-surface-400: #a1a1aa;
+    --p-surface-500: #71717a;
+    --p-surface-600: #52525b;
+    --p-surface-700: #3f3f46;
+    --p-surface-800: #27272a;
+    --p-surface-900: #18181b;
+    --p-surface-950: #09090b;
+    --p-content-border-radius: 6px;
+}
+
+/* Light */
+:root {
+    --p-primary-color: var(--p-primary-500);
+    --p-primary-contrast-color: var(--p-surface-0);
+    --p-primary-hover-color: var(--p-primary-600);
+    --p-primary-active-color: var(--p-primary-700);
+    --p-content-border-color: var(--p-surface-200);
+    --p-content-hover-background: var(--p-surface-100);
+    --p-content-hover-color: var(--p-surface-800);
+    --p-highlight-background: var(--p-primary-50);
+    --p-highlight-color: var(--p-primary-700);
+    --p-highlight-focus-background: var(--p-primary-100);
+    --p-highlight-focus-color: var(--p-primary-800);
+    --p-text-color: var(--p-surface-700);
+    --p-text-hover-color: var(--p-surface-800);
+    --p-text-muted-color: var(--p-surface-500);
+    --p-text-hover-muted-color: var(--p-surface-600);
+}
+
+/*
+ * Dark Mode
+ * Defaults to system, change the selector to match the darkMode in tailwind.config.
+ * For example;
+ * darkMode: ['selector', '[class*="app-dark"]']
+ * should be;
+ * :root[class="app-dark"] {
+*/
+@media (prefers-color-scheme: dark) {
+    :root {
+
+        --p-surface-D: #fff;
+        --p-surface-0: #fff;
+        --p-surface-50: #fafafa;
+        --p-surface-100: #f4f4f5;
+        --p-surface-200: #e4e4e7;
+        --p-surface-300: #d4d4d8;
+        --p-surface-400: #a1a1aa;
+        --p-surface-500: #71717a;
+        --p-surface-600: #545250; /* Less colorful warm tone */
+        --p-surface-700: #403e3c; /* Less colorful warm tone */
+        --p-surface-800: #2b2927; /* Less colorful warm tone */
+        --p-surface-900: #1c1a19; /* Less colorful warm tone */
+        --p-surface-950: #0f0e0d; /* Less colorful warm tone */
+
+        --p-primary: rgb(0, 125, 178);
+
+        /* Using color-mix to create a numbered variable system */
+        --p-primary-50: color-mix(in srgb, var(--p-primary) 5%, white);  /* #f2f5fa */
+        --p-primary-100: color-mix(in srgb, var(--p-primary) 10%, white);  /* #e6ebf5 */
+        --p-primary-200: color-mix(in srgb, var(--p-primary) 20%, white);  /* #ccd6eb */
+        --p-primary-300: color-mix(in srgb, var(--p-primary) 30%, white);  /* #b3c2e0 */
+        --p-primary-400: color-mix(in srgb, var(--p-primary) 40%, white);  /* #99add6 */
+        --p-primary-500: var(--p-primary);  /* #005fb2 */
+        --p-primary-600: color-mix(in srgb, var(--p-primary) 80%, black);  /* #004c8e */
+        --p-primary-700: color-mix(in srgb, var(--p-primary) 70%, black);  /* #00427c */
+        --p-primary-800: color-mix(in srgb, var(--p-primary) 60%, black);  /* #00386a */
+        --p-primary-900: color-mix(in srgb, var(--p-primary) 50%, black);  /* #002f59 */
+        --p-primary-950: color-mix(in srgb, var(--p-primary) 40%, black);  /* #002647 */
+
+
+        --p-primary-color: var(--p-primary-400);
+        --p-primary-contrast-color: var(--p-surface-900);
+        --p-primary-hover-color: var(--p-primary-300);
+        --p-primary-active-color: var(--p-primary-200);
+        --p-content-border-color: var(--p-surface-700);
+        --p-content-hover-background: var(--p-surface-800);
+        --p-content-hover-color: var(--p-surface-0);
+        --p-highlight-background: color-mix(in srgb, var(--p-primary-400), transparent 84%);
+        --p-highlight-color: rgba(255, 255, 255, 87%);
+        --p-highlight-focus-background: color-mix(in srgb, var(--p-primary-400), transparent 76%);
+        --p-highlight-focus-color: rgba(255, 255, 255, 87%);
+        --p-text-color: var(--p-surface-0);
+        --p-text-hover-color: var(--p-surface-0);
+        --p-text-muted-color: var(--p-surface-400);
+        --p-text-hover-muted-color: var(--p-surface-300);
+    }
+}