forged-themes/nord-theme/resources/css/theme.css

/* 
    https://github.com/andreia/filament-nord-theme/blob/2.x/resources/css/theme.css
    by Andréia Bohner
    under MIT License
*/


@import '../../../../vendor/filament/filament/resources/css/theme.css';

@theme {
  --color-secondary-50: rgba(var(--secondary-50), <alpha-value>);
  --color-secondary-100: rgba(var(--secondary-100), <alpha-value>);
  --color-secondary-200: rgba(var(--secondary-200), <alpha-value>);
  --color-secondary-300: rgba(var(--secondary-300), <alpha-value>);
  --color-secondary-400: rgba(var(--secondary-400), <alpha-value>);
  --color-secondary-500: rgba(var(--secondary-500), <alpha-value>);
  --color-secondary-600: rgba(var(--secondary-600), <alpha-value>);
  --color-secondary-700: rgba(var(--secondary-700), <alpha-value>);
  --color-secondary-800: rgba(var(--secondary-800), <alpha-value>);
  --color-secondary-900: rgba(var(--secondary-900), <alpha-value>);
  --color-secondary-950: rgba(var(--secondary-950), <alpha-value>);

  --color-polarnight-50: #e5e9f0;  /* Lightest (pale version of #2E3440) */
  --color-polarnight-100: #d1d7e0; /* Light shade of #2E3440 */
  --color-polarnight-200: #a7b1c5; /* Lighter shade of #3B4252 */
  --color-polarnight-300: #8c9ab3; /* Lighter shade of #3B4252 */
  --color-polarnight-400: #71829b; /* Lighter shade of #434C5E */
  --color-polarnight-500: #4c566a; /* Base color (#4C566A) */
  --color-polarnight-600: #434c5e; /* Darker shade of #434C5E */
  --color-polarnight-700: #3b4252; /* Darker shade of #3B4252 */
  --color-polarnight-800: #2e3440; /* Base color (#2E3440) */
  --color-polarnight-900: #232831; /* Darker shade of #2E3440 */
  --color-polarnight-950: #1b2027; /* Darkest shade, almost black */
}

/* ===========================
   Layout & Structure
   =========================== */

.fi-layout {
    @apply bg-[#f5f8fa] dark:bg-[#252a35]; /*#2e3440*/
}

.fi-body {
    @apply bg-[#f5f8fa] dark:bg-polarnight-900;
}

/* ===========================
   Topbar & Sidebar
   =========================== */

.fi-topbar {
    & nav {
        @apply bg-[#f5f8fa] dark:bg-[#252a35];
    }

    & .fi-tenant-menu {
        @apply lg:!hidden;
    }
}

.fi-sidebar-header {
    @apply bg-[#f5f8fa] dark:bg-[#252a35];
}

.fi-sidebar-item-label,
.fi-topbar-item-label {
    @apply dark:text-gray-400;
}

/* Sidebar Items */
.fi-sidebar-item {
    & .fi-sidebar-item-button {
        @apply rounded-lg hover:bg-[#d8dee9] dark:hover:bg-white/5;
    }

    &-active {
        & a {
            & svg {
                @apply text-primary-800;
            }

            & span {
                @apply text-primary-800 dark:text-primary-400;
            }
        }

        & .fi-sidebar-item-button {
            @apply rounded-lg bg-[#eceff4] dark:focus-visible:bg-white/5 dark:bg-white/5;
        }
    }
}

/* Topbar Items */
.fi-topbar-item {
    & .fi-topbar-item-button {
        @apply rounded-lg hover:bg-[#d8dee9] dark:hover:bg-white/5;
    }

    &-active {
        & a svg {
            @apply text-primary-800;
        }

        & a span {
            @apply text-primary-800 dark:text-primary-400;
        }

        & .fi-topbar-item-button {
            @apply rounded-lg bg-[#eceff4] dark:focus-visible:bg-white/5 dark:bg-white/5;
        }

        & a,
        & button {
            @apply bg-secondary-500 hover:bg-secondary-400 dark:bg-primary-500 dark:text-secondary-500 dark:hover:bg-primary-400;
        }

        & svg {
            @apply dark:text-secondary-500;
        }
    }
}

/* Sidebar & Topbar Badges */
.fi-sidebar-item-button,
.fi-topbar-item-button {
    & .fi-badge {
        @apply bg-primary-300 dark:bg-primary-200;

        & span span {
            @apply text-gray-700;
        }
    }
}

.fi-sidebar-item-badge-ctn {
    & .fi-badge {
        @apply bg-primary-300 dark:bg-primary-200;

        & span span {
            @apply text-gray-700;
        }
    }
}

/* ===========================
   Buttons
   =========================== */

.fi-btn {
    &:not(.fi-btn-group .fi-btn) {
        @apply rounded-full;
    }

    &-color-primary {
        @apply bg-[#88c0d0];

        & .fi-btn-label {
            @apply text-primary-950;
        }
    }

    &-color-gray span {
        @apply text-[#434c5e] dark:text-[#e5e9f0];
    }
}

.fi-btn-group {
    @apply rounded-full;

    & > .fi-btn {
        &:first-of-type {
            @apply rounded-s-full;
        }

        &:last-of-type {
            @apply rounded-e-full;
        }
    }
}

/* ===========================
   Tables
   =========================== */

.fi-ta-ctn {
    @apply shadow-md rounded-2xl border-none ring-0 dark:ring-1 divide-gray-100 dark:divide-white/20;

    &,
    & .fi-ta-ctn-with-header {
        @apply dark:bg-[var(--color-polarnight-800)];
    }
}

.fi-ta-table {
    & thead tr {
        @apply bg-[#fbfcfd] dark:bg-[#3b414e];
    }
}

.fi-ta-header-cell-label {
    @apply text-[#434c5e] dark:text-[#e5e9f0];
}

.fi-ta-toggle {
    & > div.fi-color-custom {
        @apply bg-primary-500;
    }

    & > div.fi-color-gray {
        @apply bg-gray-200;
    }
}

/* Table Search Field */
.fi-ta-search-field {
    & .fi-input-wrp {
        @apply rounded-full bg-[#f5f8fa] dark:bg-gray-900;
    }
}

/* ===========================
   Widget Backgrounds & Styles
   =========================== */

/* Generic section-based widgets (Account, Info, and custom widgets) */
.fi-wi-widget:not(.fi-wi-stats-overview):not(.fi-wi-chart):not(.fi-wi-table) {
    & .fi-section {
        @apply border border-transparent dark:bg-secondary-900 shadow-md rounded-2xl border-none ring-0 dark:ring-1 dark:ring-gray-700 dark:hover:text-white/70 dark:hover:ring-gray-500;
    }
}

/* Stats overview - individual stat cards */
.fi-wi-stats-overview-stat {
    @apply border border-transparent dark:bg-secondary-900 shadow-md rounded-2xl border-none ring-0 dark:ring-1 dark:ring-gray-700 dark:hover:text-white/70 dark:hover:ring-gray-500;
}

/* Chart widgets */
.fi-wi-widget.fi-wi-chart {
    & .fi-section {
        @apply border border-transparent dark:bg-secondary-900 shadow-md rounded-2xl border-none ring-0 dark:ring-1 dark:ring-gray-700 dark:hover:text-white/70 dark:hover:ring-gray-500;
    }
}

/* Table widget */
.fi-wi-widget.fi-wi-table {
    & .fi-ta-ctn {
        @apply border border-transparent dark:bg-secondary-900 shadow-md rounded-2xl border-none ring-0 dark:ring-1 dark:ring-gray-700 dark:hover:text-white/70 dark:hover:ring-gray-500;
    }
}

/* Gradient backgrounds for dark mode */
.dark {
    & .fi-wi-widget:not(.fi-wi-stats-overview):not(.fi-wi-chart):not(.fi-wi-table) .fi-section,
    & .fi-wi-stats-overview-stat,
    & .fi-wi-widget.fi-wi-chart .fi-section,
    & .fi-wi-widget.fi-wi-table .fi-ta-ctn,
    & .fi-tenant-menu,
    & .fi-dropdown-panel {
        background:
            linear-gradient(#2e3440, #3b4252),
            linear-gradient(to right, rgb(82, 115, 125), rgb(59, 66, 82));
        background-clip: padding-box, border-box;
        background-origin: border-box;
    }
}

/* Other containers */
.fi-tenant-menu,
.fi-dropdown-panel {
    @apply border border-transparent dark:bg-secondary-900;
}

.fi-tenant-menu {
    @apply rounded-lg mt-4;
}

/* ===========================
   Forms & Inputs
   =========================== */

.fi-input-wrp {
    @apply ring-1 ring-[#d8dee9] dark:ring-white/20;
}

.fi-input {
    @apply disabled:!bg-gray-50 dark:disabled:!bg-gray-800;
}

.fi-fo-field-wrp-label span {
    @apply text-[#4c566a];
}

.fi-fo-field-wrp-helper-text {
    @apply text-gray-500 dark:text-gray-300;
}

.fi-fo-field-wrp-error-message {
    @apply text-[#bf616a] dark:text-[#d08770];
}

.fi-invalid {
    @apply ring-[#bf616a] dark:ring-[#d08770];
}

.fi-fo-toggle {
    &.fi-color-custom {
        @apply bg-primary-500;
    }

    &.fi-color-gray {
        @apply bg-gray-200;
    }
}

/* ===========================
   Global Search
   =========================== */

.fi-global-search-field {
    & .fi-input-wrp {
        @apply rounded-full bg-[#f5f8fa] dark:bg-gray-900 ring-4 ring-white dark:ring-gray-800;

        & .fi-input-wrp-prefix {
            @apply bg-white dark:bg-gray-800 rounded-full ps-2 mr-2;
        }
    }
}

/* ===========================
   Tabs
   =========================== */

.fi-tabs-item-active {
    @apply bg-primary-100;

    & span {
        @apply !text-secondary-900 dark:!text-gray-100;
    }
}

/* ===========================
   Badges
   =========================== */

.fi-badge {
    @apply rounded-xl;
}

/* ===========================
   Breadcrumbs
   =========================== */

.fi-breadcrumbs-item-label {
    @apply text-[var(--color-polarnight-400)];
}

/* ===========================
   Headers
   =========================== */

.fi-header-heading {
    @apply text-[#434c5e] dark:text-[#e5e9f0];
}