Customize

Die nachfolgenden CSS-Variablen werden ausschließlich von den optionalen Kryzo-Elementen und deren Standard-Darstellung verwendet. Sie dienen als zentrale Konfigurationsbasis für Farben, Abstände und weitere visuelle Eigenschaften der bereitgestellten UI-Komponenten. Die Anpassung kann auf zwei verschiedene Arten erfolgen:

Möglichkeit 1 – Eigene CSS-Regeln verwenden

Die von Kryzo erzeugten Elemente können jederzeit über eigenes CSS erweitert oder überschrieben werden. Dadurch lassen sich individuelle Designs umsetzen, ohne die Standard-Variablen verändern zu müssen.

Möglichkeit 2 – CSS-Variablen zentral anpassen

Alternativ können die bereitgestellten CSS-Variablen direkt in der zentralen Stylesheet-Konfiguration angepasst werden. Dieser Ansatz empfiehlt sich insbesondere dann, wenn das Erscheinungsbild aller Kryzo-Komponenten projektweit vereinheitlicht werden soll. Durch die Verwendung von CSS-Variablen können beispielsweise unterschiedliche Werte für Light- und Dark-Mode definiert werden, ohne einzelne Komponenten separat anpassen zu müssen. Änderungen wirken sich dabei automatisch auf sämtliche Elemente aus, die die entsprechenden Variablen verwenden.

Die Anpassung der Variablen stellt daher den empfohlenen Weg dar, um das Standard-Design der Kryzo-Komponenten an das eigene Projekt anzupassen und gleichzeitig eine konsistente Darstellung über die gesamte Anwendung hinweg sicherzustellen.

 /*
    Datei: assets/scss/compiled.min.css    
*/
:root {
/* --- DEFAULTS ----------------------------------------------------------------------------------- */
    --primary: #8E5BF1;                                       /* Primäre Projektfarbe */
    --secondary: #404C5E;                                     /* Sekundäre Projektfarbe */
    --alert: crimson;                                         /* Farbe für Alert-Zustände */

    --background-color: #FFFFFF;                              /* Globale Hintergrundfarbe Projekt */
    --color: #121314;                                         /* Globale Schriftfarbe Projekt */
    --font-family: "Roboto", sans-serif;                      /* Globale Schriftart Projekt */
    --font-size: 16px;                                        /* Globale Schriftgröße Projekt */

    /* Custom Scrollbar Thumb Farbe - optional */
    --scrollbar-thumb-color: color-mix(in srgb, var(--color), transparent 80%);

/* --- EINGABEFELDER ------------------------------------------------------------------------------ */
    --input-border-radius: 0.35rem;                           /* Default Border-Radius Input, Select, Textarea */
    --input-padding: 0.5rem 0.7rem;                           /* Default Padding Eingabefelder */
    --textarea-padding: 0.7rem;                               /* Default Padding für Textareas */
    --input-font-family: var(--font-family);                  /* Schriftart für Eingabefelder */
    --input-font-size: 0.85rem;                               /* Schriftgröße für Eingabefelder */
    --input-font-weight: 300;                                 /* Schriftstärke für Eingabefelder */
    --input-background-color: var(--background-color);        /* Hintergrundfarbe für Eingabefelder */

    --input-big-font-size: 1.25rem;                           /* Schriftgröße  für Big Eingabefelder */
    --input-small-font-size: 0.7rem;                          /* Schriftgröße  für Small Eingabefelder */

    --input-label-font-family: var(--font-family);            /* Schriftart für Label Eingabefelder */
    --input-label-font-size: 0.75rem;                         /* Schriftgröße für Label Eingabefelder */
    --input-label-font-weight: 300;                           /* Schriftstärke für Label Eingabefelder */

/* --- BUTTONS ----------------------------------------------------------------------------------- */
    --button-padding: 0.75rem 1.5rem;                         /* Default Padding Buttons */
    --button-font-family: var(--font-family);                 /* Default Schriftart Buttons */
    --button-font-size: 0.9rem;                               /* Default Schriftgröße Buttons */
    --button-font-weight: 600;                                /* Default Schriftstärke Buttons */
    --button-border-radius: 0.25rem;                          /* Default Border-Radius Buttons */


/* --- CODE BOX FARBEN ---------------------------------------------------------------------------- */
    --c-comment: #999999;                                     /* Farbe Kommentare */
    --c-string: #267f99;                                      /* Farbe String Werte */
    --c-keyword: #af00db;                                     /* Farbe Keywords / Klassen */
    --c-function: #795e26;                                    /* Farbe Funktionsnamen */
    --c-number: #098658;                                      /* Farbe Zahlen */
    --c-operator: #000000;                                    /* Farbe Operatoren */
    --c-tag: #800000;                                         /* Farbe HTML Tags */
    --c-attr-name: #e50000;                                   /* Farbe Attribut Namen */
    --c-attr-value: #0451a5;                                  /* Farbe Values */
    --c-selector: #800000;                                    /* Farbe Selektoren */
    --c-property: #ff0000;                                    /* Farbe Properties */
    --c-punctuation: #000000;                                 /* Farbe Punctuation */

}

/* --- DARKMODE - ÜBERSCHREIBEN VON VARIABLEN AUS DEFAULT WENN NÖTIG------------------------------- */
html[data-scheme="dark"] {
    --background-color: #121314;
    --color: #FFFFFF;
}