ui-humix-lib/components/styles/global.css

A simple package for implementinghumix design components in react-based or node.js based projects.

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Monaspace Neon Var';
    src: url('../fonts/MonaspaceNeon-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/MonaspaceNeon-Bold.woff') format('woff');
    font-weight: bold;
}

@font-face {
    font-family: 'Inter Variable';
    src: url('../fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 200, 300, 400, 500, 600, 700, 800, 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter Variable';
    src: url('../fonts/InterVariable-Italic.woff2') format('woff2-variations');
    font-weight: 200, 300, 400, 500, 600, 700, 800, 900;
    font-style: italic;
    font-display: swap;
}

@layer base {

    :root {
        /* Font Families */
        --font-sans: 'Inter Variable', sans-serif;
        --font-monospace: 'Monaspace Neon Var', monospace;
        -webkit-font-smoothing: antialiased;

        /* Font Sizes */
        --font-base: 16px;
        --font-large: 20px;
        --font-small: 12px;

        /* New Color Scheme */
        --background: #fafafa;
        --foreground: #010101;

        --card: #fafafa;
        --card-foreground: #010101;

        --popover: #fafafa;
        --popover-foreground: #010101;

        --primary: #03dbfc;
        /* Primary color */
        --primary-foreground: #010101;
        /* Assuming primary foreground is the forground text color */

        --secondary: #fce652;
        /* Secondary color */
        --secondary-foreground: #010101;
        /* Assuming secondary foreground is also the forground text color */

        --muted: #383838;
        /* Muted color */
        --muted-foreground: #727272;
        /* Info color for muted foreground */

        --color-gradient: linear-gradient(90deg, #3daac2 0%, #2bc8c6 100%);

        --accent: #198DBE;
        /* Accent color */
        --accent-foreground: #fafafa;
        /* Assuming accent foreground is a light color for contrast */

        --destructive: #b9474e;
        /* Error color for destructive actions */
        --destructive-foreground: #fafafa;
        /* Light foreground for contrast */

        --border: #8e9393;
        /* Destructive color used for borders */
        --input: #16191b;
        /* Code color for inputs */
        --ring: #5ac27d;
        /* Success color for focus rings */

        --radius: 0.5rem;
    }

    .dark {
        --background: #010101;
        --foreground: #fafafa;

        --card: #010101;
        --card-foreground: #fafafa;

        --popover: #010101;
        --popover-foreground: #fafafa;

        --primary: #fce652;
        /* Primary color in dark theme */
        --primary-foreground: #010101;

        --color-gradient: linear-gradient(90deg, #03dbfc 0%, #fce652 100%);

        --secondary: #03dbfc;
        /* Secondary color in dark theme */
        --secondary-foreground: #fafafa;

        --muted: #585858;
        /* Gray color for muted in dark theme */
        --muted-foreground: #727272;
        /* Info color for muted foreground */

        --accent: #198DBE;
        /* Accent color reforgrounds the same */
        --accent-foreground: #fafafa;

        --destructive: #b9474e;
        /* Error color for destructive actions */
        --destructive-foreground: #fafafa;

        --border: #8e9393;
        /* Destructive color used for borders */
        --input: #16191b;
        /* Code color for inputs */
        --ring: #5ac27d;
        /* Success color for focus rings */
    }
}

@layer base {
    * {
        border-color: var(--border);
    }

    html {
        font-size: var(--font-base);
        background-color: var(--background);
        color: var(--color-forground) !important;
        font-family: var(--font-sans);
    }

    body {
        margin: 0;
        padding: 1rem;
        -webkit-font-smoothing: antialiased;
        color: var(--foreground);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: var(--font-sans);
        background: var(--color-gradient);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 900;
        padding: 3.5px;
        font-size: 150%;
        margin-top: 15px;
        margin-bottom: 15px;
        letter-spacing: -0.05;

    }




    p {
        font-size: var(--font-base);
        line-height: 1.5;
        margin-top: 2rem;
        margin-bottom: 2rem;
        color: var(--color-forground);
        font-family: var(--font-sans);
        font-weight: 500;
        letter-spacing: -0.35px;
        line-height: 1.75rem;
        ;
    }

    a {
        color: var(--accent);
        text-decoration: none;
        transition: color 0.3s;
    }

    a:hover {
        color: var(--color-primary);
        background: transparent;
    }

    code {
        font-family: var(--font-monospace);
        font-size: 95%;
        background-color: #171e1e;
        color: #c9c9c9;
        display: inline-block;
        word-wrap: break-word;
        text-align: left;
        padding: 0.2em 0.4em;
        font-weight: normal;
        width: 100%;
        padding: 1.5em;

    }



    li {
        font-size: 15px;
        color: var(--color-forground);
        font-family: var(--font-sans);
        font-weight: 500;
        line-height: 1.75;
        letter-spacing: -0.35px
    }

    li a {
        color: var(--accent);
        text-decoration: none;
        transition: color 0.3s;
    }

    li a:hover {
        color: var(--color-secondary);
        background: var(--background) !important;
    }

}

/* Components Layer for Reusable Styles */
@layer components {
    .code {
        background-color: #151e21;

        border-radius: 4px;
        padding: 16px;
        overflow-x: auto;
        font-family: var(--font-monospace);
        font-size: 0.85em;
    }

    .code::before {
        color: #55676c;
    }

    .code::after {
        color: #7aa4b0;
        /* Comment color */
    }

    /* Basic syntax highlighting colors */
    .code span.keyword {
        color: #52fcff;
    }

    /* Keywords */
    .code span.operator {
        color: #e4e732;
    }

    /* Operators */
    .code span.function {
        color: #61afef;
    }

    /* Functions */
    .code span.string {
        color: #98c379;
    }

    /* Strings */
    .code span.comment {
        color: #5c6370;
    }

    /* Comments */
    .code span.number {
        color: #d19a66;
    }

    /* Numbers */
    .code span.tag {
        color: #e06c75;
    }

    .card-array {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        flex-wrap: wrap;
        margin-top: 1rem;
        margin-bottom: 1rem;
        padding: 1rem;
        border-radius: 0.5rem;
        width: 100%;
        margin: auto;

    }

    .ybcolor {
        background: var(--color-gradient);
    }

    .switch-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        /* Space between elements */
    }

    .switch-toggle input[type="checkbox"] {
        display: none;
        /* Hide the checkbox */
    }

    .switch-toggle button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: start;
        width: 2.5rem;
        /* 40px */
        height: 1.5rem;
        /* 24px */
        background-color: var(--bg-background);
        /* Fallback color */
        border: 1px solid #ccc;
        /* Fallback border color */
        border-radius: 9999px;
        /* Fully rounded */
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
    }

    .switch-toggle button::before {
        content: "";
        position: absolute;
        top: 0.125rem;
        /* 2px */
        left: 0.125rem;
        /* 2px */
        width: 1.25rem;
        /* 20px */
        height: 1.25rem;
        /* 20px */
        background-color: #808080;
        /* Fallback color */
        border-radius: 50%;
        transition: transform 0.2s ease-in-out;
    }

    .switch-toggle button.bg-primary {
        background-color: var(--color-primary);
        /* Primary color */
    }

    .switch-toggle button.bg-background {
        background-color: var(--color-background);
        /* Background color */
    }

    .switch-toggle button .switch-knob {
        transition: transform 0.2s ease-in-out;
    }

    .switch-toggle label {
        font-size: 0.875rem;
        /* 14px */
        color: var(--text-gray-400);
        /* Fallback color */
        cursor: pointer;
    }

    .switch-toggle .text-primary {
        color: var(--color-primary);
        /* Primary text color */
    }

    .switch-toggle .text-gray-400 {
        color: var(--text-gray-400);
        /* Secondary text color */
    }

    .progress-bar-container {
        position: relative;
        width: 100%;
        height: 12px;
        /* Adjust the height as needed */
        overflow: hidden;
        border-radius: 9999px;
        /* Fully rounded */
        background-color: var(--color-muted);
        /* Background color of the progress bar */
        border: 1px solid var(--color-muted);
        /* Border color */
    }

    .progress-bar {
        position: absolute;
        height: 100%;
        background-color: var(--color-primary);
        /* Color of the progress */
        transition: width 0.3s ease-linear;
        /* Smooth transition for width change */
    }

    .progress-bar-container {
        position: relative;
        width: 100%;
        height: 12px;
        /* Adjust the height as needed */
        overflow: hidden;
        border-radius: 9999px;
        /* Fully rounded */
        background-color: var(--color-muted);
        /* Background color of the progress bar */
        border: 1px solid var(--color-muted);
        /* Border color */
    }

    .progress-bar {
        position: absolute;
        height: 100%;
        background-color: var(--color-primary);
        /* Color of the progress */
        transition: width 0.3s ease-linear;
        /* Smooth transition for width change */
    }

    /* Button Variants */
    .button-default {
        background-color: var(--color-primary);
        color: var(--text-primary-foreground);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);

        &:hover {
            background-color: var(--color-primary);
            opacity: 0.8;
        }
    }

    .button-destructive {
        background-color: var(--color-destructive);
        color: var(--text-destructive-foreground);
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);

        &:hover {
            background-color: var(--color-destructive);
            opacity: 0.8;
        }
    }

    .button-outline {
        border: 1px solid rgba(128, 128, 128, 0.5);
        /* Adjust border color */
        background-color: transparent;

        &:hover {
            background-color: var(--bg-gray-100);
            color: var(--text-foreground);
            opacity: 0.8;
        }
    }

    .button-secondary {
        background-color: var(--color-secondary);
        color: var(--text-secondary-foreground);

        &:hover {
            background-color: var(--color-secondary);
            opacity: 0.8;
        }
    }

    .button-ghost {
        &:hover {
            background-color: var(--color-accent);
            color: var(--text-accent-foreground);
            opacity: 0.8;
        }
    }

    .button-link {
        color: var(--color-primary);
        text-decoration: underline;
        text-underline-offset: 4px;

        &:hover {
            text-decoration: underline;
            opacity: 0.8;
        }
    }

    .button-sm {
        height: 32px;
        padding: 0 12px;
        font-size: 0.875rem;
        /* 14px */
    }

    .button-lg {
        height: 40px;
        padding: 0 32px;
        font-size: 1rem;
        /* 16px */
    }

    .button-icon {
        height: 36px;
        width: 36px;
    }

    /* HTML Tags */
}