Designs

Ein Design wählen

Sie können das Design auch wechseln, ohne die Einstellungen zu öffnen: Führen Sie in der Befehlspalette den Befehl Darstellung des Designs aus, zum Beispiel Darstellung: Pixel, oder klicken Sie unten in der Aktivitätsleiste auf das Symbol Einstellungen und wählen Sie im Untermenü Designs ein Design.

Dichte und Textgröße

Ein Design legt fest, wie dicht die Steuerelemente angeordnet sind und wie groß der Text ist. Dichte und Textgröße unter Einstellungen > Darstellung ändern diese beiden Werte für jedes Design:

Wie das Design, die Voreinstellung, verwendet die Werte des aktiven Designs.

Beispieldesigns

Babel veröffentlicht eine Reihe von Designpaketen als Beispiele. Sie sind in der Ansicht „Erweiterungen“ aufgeführt. Installieren Sie eines, und seine Designs erscheinen unter Einstellungen > Darstellung > Design.

Parchment und Pixel enthalten Bilder und setzen Babel Desktop 0.3.0 oder neuer voraus. Eine ältere Version führt sie mit dem Hinweis auf, dass ein neueres Babel Desktop erforderlich ist, und installiert sie nicht.

Pixel

Pixel ist ein einzelnes helles Design und folgt daher nicht der Darstellung des Betriebssystems. Das Paket enthält keinen Code: Es verändert das Aussehen der Anwendung mit Farbtoken, Formeinstellungen, drei Schriftdateien und SVG-Bildern.

Das Design ändert:

• Farben: hellgraue Bereiche und Statusleiste, dazu ein einziges Dunkelgrau für die Aktivitätsleiste, die primären Schaltflächen, die aktive Registerkarte und den Fokusring. Die Diagramme verwenden eine Grauabstufung mit zwei gedämpften Farbtönen, Stahlblau und Ocker.
• Schriften: Die Oberfläche ist in Pixel Operator gesetzt, Text mit fester Zeichenbreite in Departure Mono. Beide Schriften sind im Paket enthalten.
• Form: nicht abgerundete Ecken, dicke Rahmen, Registerkarten als Kästen und Felder mit Kontur.
• Symbole und Logo: Die 44 Symbole der Oberfläche sind als Pixel-Art auf einem Raster von 16 mal 16 neu gezeichnet, und auch das Babel-Logo ist aus Pixeln gezeichnet.
• Kontrollkästchen und Optionsfelder: Ein quadratischer Pixelrahmen und ein gestufter Kreis ersetzen die Steuerelemente des Systems.

Pixelschriften sind auf einem Pixelraster gezeichnet und wirken am schärfsten in Größen, die ein Vielfaches dieses Rasters sind. Wenn der Text unscharf oder klein wirkt, wählen Sie eine größere Textgröße.

Ein Design erstellen

Ein Design ist eine kleine Erweiterung. Es geht von der integrierten hellen oder dunklen Palette aus (base) und überschreibt nur die Farbtoken, die Sie angeben. Alle anderen werden übernommen. Es genügt zum Beispiel, nur accent zu setzen, um Schaltflächen, Links, Auswahlen und die Markierungen auf dem Globus umzufärben.

{
  "apiVersion": 1,
  "id": "acme.teal",
  "name": "Teal",
  "version": "1.0.0",
  "author": "Acme",
  "license": "MIT",
  "description": "A teal theme family for Babel Desktop.",
  "minApp": "0.1.0",
  "minEngine": "12.0.0",
  "permissions": ["themes"],
  "contributes": {
    "themes": [
      {
        "id": "teal-night",
        "name": "Teal Night",
        "base": "dark",
        "family": "Teal",
        "colors": { "accent": "#2cc7b5", "canvas": "#0f1a1c", "activity-bg": "#0b1416" }
      },
      {
        "id": "teal-day",
        "name": "Teal Day",
        "base": "light",
        "family": "Teal",
        "colors": { "accent": "#0f8a7c" }
      }
    ]
  }
}

Erhöhen Sie version bei jeder Änderung an einem Design und installieren Sie das neue Paket dann über das alte.

Form, Steuerelemente und Schrift

Neben colors kann ein Design shape, controls und type festlegen. Alle drei sind optional, und ein Element, das Sie weglassen, behält seinen Standardwert.

{
  "id": "teal-night",
  "name": "Teal Night",
  "base": "dark",
  "family": "Teal",
  "shape": { "radius": "small", "density": "compact", "border": "thin" },
  "controls": { "button": "outline", "tabs": "boxed", "field": "underline" },
  "type": { "body": "sans", "size": "normal" },
  "colors": { "accent": "#2cc7b5" }
}

Die benannten Schriftfamilien sind Schriften, die auf dem Rechner bereits installiert sind. Es wird nichts heruntergeladen. Die Benutzereinstellungen Dichte und Textgröße haben Vorrang vor shape.density und type.size, sofern sie nicht auf Wie das Design stehen. Ein Manifest, das eines dieser Elemente verwendet, muss als minApp 0.2.0 oder neuer deklarieren.

Schriften

Ein .babelext-Paket kann eigene Schriften mitliefern. Deklarieren Sie sie in contributes.fonts und wählen Sie eine davon mit font:<fontId> aus:

"fonts": [
  { "id": "inter", "family": "Inter", "file": "fonts/Inter-Regular.woff2", "weight": 400, "style": "normal", "license": "OFL-1.1" },
  { "id": "inter-semibold", "family": "Inter", "file": "fonts/Inter-SemiBold.woff2", "weight": 600, "style": "normal", "license": "OFL-1.1" }
]

• Schriftdateien sind WOFF2-Dateien im Ordner fonts, jede höchstens 1 MiB groß und zusammen höchstens 4 MiB.
• license ist erforderlich und muss OFL-1.1, Apache-2.0, MIT, CC0-1.0 oder Ubuntu-1.0 lauten.
• Jede deklarierte Datei muss im Paket enthalten und jede Schriftdatei muss deklariert sein. Schriften werden nie aus dem Netzwerk geladen, und eine einzelne extension.json ohne Paket kann keine deklarieren.
• Eine Familie, die für type.body verwendet wird, braucht neben dem normalen Schnitt einen Schnitt mit der Stärke 600 oder mehr.

Skins

Ein skin ergänzt ein Design um Bilder. Er hat vier optionale Teile:

"skin": {
  "surfaces": { "window": { "image": "skins/paper.png", "layout": "tile" } },
  "controls": { "button.primary": { "image": "skins/stamp.svg", "slice": [10, 12, 10, 12], "ink": "#ffffff", "tone": "#6b3fa0" } },
  "icons": { "canvas.run": { "file": "skins/run.svg" } },
  "logo": { "file": "skins/mark.svg", "mode": "tint" }
}

• Die Bilder liegen direkt im Ordner skins: PNG-Dateien mit höchstens 512 KiB und 2048 Pixeln Kantenlänge, optional mit einer @2x-Datei in doppelter Größe, und SVG-Dateien mit höchstens 64 KiB. Der gesamte Ordner bleibt unter 4 MiB.
• Die Fläche eines Steuerelements wird durch slice in neun Teile geschnitten, mit vier ganzen Zahlen für oben, rechts, unten und links. So lässt sie sich dehnen, ohne dass sich ihre Ecken verformen. Sie deklariert außerdem die Textfarbe ink und die Hintergrundfarbe tone, mit einem Kontrast von mindestens 4,5:1.
• Ein Symbol oder ein Logo mit mode tint, dem Standardwert, wird in der Farbe gezeichnet, die die Anwendung an dieser Stelle ohnehin verwendet. color behält die Farben der Datei bei.
• SVG-Dateien werden geprüft, bevor sie verwendet werden: Skripte, Stile, externe Verweise und Entitäten werden abgelehnt.
• Jede Datei im Ordner muss verwendet werden, und jede im Manifest genannte Datei muss vorhanden sein. Eine einzelne extension.json ohne Paket kann keinen Skin haben.
• Ein Manifest mit einem Skin muss als minApp 0.3.0 oder neuer deklarieren. Das Anwendungssymbol und das Installationsprogramm lassen sich nicht umgestalten.