Variablen, für die ein Design angepasst werden soll Desktop-Assistent

  • Freigeben Version: Australia
  • Aktualisiert 12. März 2026
  • 3 Minuten Lesedauer

    • Sie können bestimmte CSS-Variablen ändern, um Designs für anzupassen Desktop-Assistent.

    Tabelle : 1. Bannerfarbe
    Variable Beschreibung Reihenfolge
    Marke-primär-dunkel Die dunkelste Schattierung der Primärfarbe der Marke. 1
    Marke-primär-dunkler Etwas hellerer Schatten als der dunkelste Schatten der Primärfarbe der Marke. 2
    Marke-primär Primäre Markenfarbe, die in der Anwenderoberfläche verwendet wird. 3
    Brand-primär-heller Hellere Schattierung als die primäre Markenfarbe. 4
    Sie können einen Farbverlauf auf das Banner anwenden, indem Sie die angegebenen Farben in der angegebenen Reihenfolge verwenden.
    Tabelle : 2. Layout- und Typografievariablen
    Variable Beschreibung Standard
    Hintergrund-sekundär Sekundäre Hintergrundfarbe, die für UI-Elemente verwendet wird, die nicht der Hauptfokus sind. #Ffffff
    Hintergrund-primär Primäre Hintergrundfarbe, die für Hauptfokusbereiche auf der Anwenderoberfläche verwendet wird. #F6f6f8
    Font-size-Base Basisschriftgröße für UI-Text. 16px
    Font-weight-Base Basisschriftstärke, die für den UI-Textkörper verwendet wird. 400
    Font-family-sans-serif Standardmäßige serifenlose Schriftartfamilie, die für UI-Text verwendet wird. Lato
    Line-height-Base Standardhöhe der Textzeile für Abstand und Lesbarkeit. 1,4
    Font-size-h5 Schriftgröße für Überschriftebene 5. 16 px Oder-Wert von $font-size-Base Variable.
    Schriftgröße-h4 Schriftgröße für Überschriftebene 4. 18px

    Dieser Wert wird mit berechnet Ceil () Funktion: Ceil(($font-size-Base * 1,125)) .

    Beispiel: Wenn Font-size-Base Wert ist 16 px, die Schriftgröße-h4 Wert ist 18 px: Ceil((16 px * 1,125))//18 px .
    Font-size-h3 Schriftgröße für Überschriftebene 3. 20px

    Dieser Wert wird mit berechnet Ceil () Funktion: Ceil(($font-size-Base * 1,25)) .
    Font-size-xl Sehr große Schriftgröße, die normalerweise für Titel oder große Bezeichnungen verwendet wird. 24px

    Dieser Wert wird mit berechnet Ceil () Funktion: Ceil(($font-size-Base * 1,5)) .
    Font-size-xs Besonders kleine Schriftgröße, die normalerweise für kleinere Bezeichnungen oder Beschriftungen verwendet wird. 12px

    Dieser Wert wird mit berechnet Ceil () Funktion: Ceil(($font-size-Base * 0,75)) .
    Schriftgröße-klein Kleinere Schriftart als die Basisschriftart, die für sekundären Text verwendet wird. 14px

    Dieser Wert wird mit berechnet Ceil () Funktion: Ceil(($font-size-Base * 0,875)) .
    Überschriften-Schriftartfamilie Schriftartfamilie, die für Überschriften verwendet wird. Lato
    Überschriften-Schriftstärke Schriftstärke für Überschriften. 600
    Tabelle : 3. Farbvariablen
    Variable Beschreibung Standard
    Text-primär Hauptfarbe, die für den Textkörper verwendet wird. NR. 181A1F
    Textfarbe Allgemeine Textfarbe für die UI, die mit identisch ist Text-primär .

    Legen Sie einen Wert für diese Variable nur fest, wenn Sie den Wert für noch nicht definiert haben Text-primär .

    		 $Text-primary!Standard

    Beispiel: $Text-primary: #000000 !, Standard;

    Text-sekundär Farbe, die für weniger prominenten UI-Text verwendet wird. #474D5A
    Text-tertiär Farbe für tertiären Text wie Hilfetext und Anmerkungen. #656E81
    Text stummgeschaltet Stummgeschaltete Textfarbe, die im Allgemeinen mit übereinstimmt Text-tertiär .

    Legen Sie einen Wert für diese Variable nur fest, wenn Sie den Wert für noch nicht definiert haben Text-tertiär .

    		 $Text-tertiary!Standard

    Beispiel: $Text-tertiär: #999999 !, Standard;

    Farbe grau Neutrale graue Farbe, die für Elemente wie Rahmen und Hintergründe verwendet wird. #C6CBCB
    Linkfarbe Farbe für Hyperlinks. #3c59e7
    Tabelle : 4. Schaltflächen- und interaktive Elementvariablen
    Variable Beschreibung Standard
    btn-default-color Standardfarbe für Schaltflächentext. $Brand-primary
    btn-primary-color Textfarbe für primäre Schaltflächen. $Text-weiß
    btn-primary-bg Hintergrundfarbe für primäre Schaltflächen. $Brand-primary
    Marke-primär Primäre Markenfarbe, die in der Anwenderoberfläche verwendet wird. #4f52bd!Standard;
    Marke-primär-dunkler Eine dunklere Schattierung der primären Markenfarbe. #333579
    Marke-primär-dunkel Dunkelste Schattierung der primären Markenfarbe. #1D1E46
    Brand-primär-heller Eine hellere Schattierung der primären Markenfarbe. #8789D2
    Brand-primär-leichteste Hellste Schattierung der primären Markenfarbe. #D1D2EE
    Tabelle : 5. Status- und Warnungsfarben
    Variable Beschreibung Standard
    Marke-Warnung-dunkler Dunklere Schattierung der UI-Warnungsstatusfarbe. #AFA400
    Markenerfolg-dunkler Dunklere Farbschattierung, die für erfolgsstatus auf der Anwenderoberfläche verwendet wird. #3B7F00
    Brand-Danger-dunkler Dunklere Farbschattierung, die für gefahrenstatus auf der Anwenderoberfläche verwendet wird. #CC293C
    Warnung-Warnung-bg Hintergrundfarbe, die für Warnungen und Warnungen verwendet wird. $Status-warning-bg
    Abzeichenfarbe Textfarbe für Abzeichen auf der Anwenderoberfläche. $Text-weiß
    Tabelle : 6. Rahmen- und Layoutvariablen
    Variable Beschreibung Standardwert
    Rahmen-primär Primäre Rahmenfarbe, die für Haupt-UI-Elemente verwendet wird. #8790A1
    Rahmen-sekundär Sekundäre Rahmenfarbe, die für weniger prominente UI-Elemente verwendet wird. #ACB2BE
    Rahmen-tertiär Tertiäre Rahmenfarbe, die für Hintergrundrahmen verwendet wird. #DADDE2
    Frame-width-xs Besonders kleine Rahmenbreite, die für UI-Elemente wie dünne Linien oder helle Trennlinien verwendet wird. 1 px
    Rahmenstil-Volumenkörper Legt den Rahmenstil auf „einfarbig“ fest. solide
    Border-Radius-Base Basisrahmenradius zum Runden von Ecken von UI-Elementen. 4 px
    Eingaberahmen Rahmenstil für Eingabefelder. $border-primary
    Tabelle : 7. Abstandsvariablen
    Variable Beschreibung Standardwert
    sp-space--xxl Extra großer Abstand für große Lücken oder größere Layouts. 32px
    sp-space--xl Besonders großer Abstand für Hauptabschnitte. 24 px
    sp-Space--lg Großer Abstand für Auffüllung oder Ränder. 16 px
    sp-Space--md Mittlerer oder Standardabstand für die meisten UI-Elemente. 12 px
    sp-space--sm Kleiner Abstand für kompakte Layouts. 8px
    sp-space--xs Extra kleiner Abstand für minimale Abstände. 4 px
    sp-space--xxs Extra kleiner Abstand für minimale UI-Lücken. 2 px
    Bereich-Überschrift-Auffüllung Auf den Überschriftenabschnitt eines Bereichs oder einer Karte angewendete Auffüllung. $sp-space--xl
    Tabelle : 8. Variablen für Schriftstärke und Schatten und Effekte
    Variable Beschreibung Standardwert
    Schriftgewichtungsvariable
    Schriftart-Gewichtung-lg Schriftstärke, die für großen oder fett formatierten Text verwendet wird. 600

    Dieser Wert wird mit berechnet Ceil () Funktion: Ceil(($font-weight-Base * 1,5)) .
    Schatten- und Effektvariablen
    sp-Panel-Box-shadow Schattenstile für Bereichskomponenten. 0 4 px 8 px 0 rgba (23, 40, 52, 0,08)
    sp-Box-Shadow--md Mittlere Box-Schatteneffekte für UI-Komponenten.