Farben

npm install @tis-cca/theme

Standard Farben

Die wesentlichen Farben in unseren Produktfamilien.

  • Das Theme Modul in dem die Farben konfiguriert sind, wird prinzipiell von anderen Modulen für die Verwendung vorausgesetzt.
  • Zur Konfiguration kann eine Datei mit Farbvariablen z.B: $primary: #ff9900; in den Build-Prozess ingtegriert werden. Die Variablen überschreiben dann die Standardwerte.
  • Farben sollten NIE in den node modules selbst überschrieben werden da alle Änderungen beim Update des NPM Moduls verloren gehen.
Primary (brand colors)

HEX: #0066b2
RGB: 0,102,178

Primary Outline

HEX: #0083e5
RGB: 0,131,229

Primary light

HEX: #7fc8ff
RGB: 127,200,255

CCA blau

HEX: #0066b2
RGB: 0,102,178

Text

HEX: #333
RGB: 51,51,51

helper

HEX: #666
RGB: 102,102,102

muted

HEX: #999
RGB: 153,153,153

Border

HEX: #ccc
RGB: 204,204,204

disabled

HEX: #eee
RGB: 238,238,238

background

HEX: #f4f4f4
RGB: 244,244,244

white

HEX: #fff
RGB: 255,255,255

overlay

HEX: rgba(51, 51, 49, 0.8)

Kombination mit ergänzenden Farben

Diese Farben werden nur in speziellen Situationen eingesetzt wenn zum Beispiel ein Status bekannt gegeben wird oder um eine Kategorisierung optisch zu unterstützen.

warning

HEX: #E54040
RGB: 229,64,64

fandango

HEX: #B64183
RGB: 182,65,131

lavender

HEX: #755AE8
RGB: 117,90,232

CCA

HEX: #0066b2
RGB: 0,102,178

turquoise

HEX: #30A3B8
RGB: 48,163,184

teal

HEX: #31AF92
RGB: 49,175,146

success

HEX: #31AF5D
RGB: 49,175,93

lime

HEX: #B4DC50
RGB: 180,220,80

information

HEX: #F7C83D
RGB: 247,200,61

TOGETHER

HEX: #ff9900
RGB: 225,153,0

coffee

HEX: #7F5D50
RGB: 127,93,80

Color ramps

RED 9

RED 8

RED 7 (basis)

RED 6

RED 5

RED 4

RED 3

RED 2

RED 1

RED 0

FANDANGO 9

FANDANGO 8

FANDANGO 7 (basis)

FANDANGO 6

FANDANGO 5

FANDANGO 4

FANDANGO 3

FANDANGO 2

FANDANGO 1

FANDANGO 0

LAVENDER 9

LAVENDER 8

LAVENDER 7 (basis)

LAVENDER 6

LAVENDER 5

LAVENDER 4

LAVENDER 3

LAVENDER 2

LAVENDER 1

LAVENDER 0

ENDEAVOUR 9

ENDEAVOUR 8

ENDEAVOUR 7 (basis)

ENDEAVOUR 6

ENDEAVOUR 5

ENDEAVOUR 4

ENDEAVOUR 3

ENDEAVOUR 2

ENDEAVOUR 1

ENDEAVOUR 0

TURQUOISE 9

TURQUOISE 8

TURQUOISE 7 (basis)

TURQUOISE 6

TURQUOISE 5

TURQUOISE 4

TURQUOISE 3

TURQUOISE 2

TURQUOISE 1

TURQUOISE 0

TEAL 9

TEAL 8

TEAL 7 (basis)

TEAL 6

TEAL 5

TEAL 4

TEAL 3

TEAL 2

TEAL 1

TEAL 0

SUCCESS 9

SUCCESS 8

SUCCESS 7 (basis)

SUCCESS 6

SUCCESS 5

SUCCESS 4

SUCCESS 3

SUCCESS 2

SUCCESS 1

SUCCESS 0

LIME 9

LIME 8

LIME 7 (basis)

LIME 6

LIME 5

LIME 4

LIME 3

LIME 2

LIME 1

LIME 0

SAFFRON 7 (basis)

SAFFRON 6

SAFFRON 5

SAFFRON 4

SAFFRON 3

SAFFRON 2

SAFFRON 1

SAFFRON 0

ORANGE-PEEL 7 (basis)

ORANGE-PEEL 6

ORANGE-PEEL 5

ORANGE-PEEL 4

ORANGE-PEEL 3

ORANGE-PEEL 2

ORANGE-PEEL 1

ORANGE-PEEL 0

Typographie

Überschriften

Überschriften sollen die Hierachie h1>h2>h3...etc einhalten.

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6
 
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>

Inline Stile

Unter Umständen kann es möglich sein, bestimmte inline Text-Stile zu verwenden. Die wichtigsten sind hier aufgeführt:

Strong wird verwendet um wichtige Inhalte hervorzuheben

"Zitate werden kursiv wiedergegeben"

Hochgestellt®

Tiefgestellt für Begriffe wie H2O

Zum Beispiel für Inline angezeigten Fehlermeldungstext

 
<p><strong>Strong wird verwendet um wichtige Inhalte hervorzuheben</strong></p>
<p><em>"Zitate werden kursiv wiedergegeben"</em></p>
<p>Hochgestellt<sup>®</sup></p>
<p>Tiefgestellt für Begriffe wie H<sub>2</sub>O</p>
<p><small>Zum Beispiel für Inline angezeigten Fehlermeldungstext</small></p>

Groß- und Kleinschreibung (German only)

Regeln für Groß- und Kleinschreibung in TOGETHER CCA Applikationen für Buttons, Überschriften, Spaltennamen, Menüs etc.

  • {Wort} => nur ein Wort angeführt
    • Beispiele: Neu, Trennen, Bearbeiten, Speichern, Löschen, …

  • {Wort} {Wort} => 2tes Wort ein Substantiv
    • Beispiele: Neue Zeile, Geänderte Verträge, Bestehender Ort, Ausgewählte Straße, Nächste Seite, …

  • {Wort} {wort} => 2tes Wort kein Substantiv
    • Beispiele: Dokument anlegen, QMS einschalten, Filter entfernen, Spalten anpassen, Email senden, Auswahl verändern, …

  • {Wort}-{Wort} => Zusammengesetzter Substantiv
    • Beispiele: Schaden-Foto, Kfz-Risiko, Sach-Risiko, …

  • {ABKÜRZUNG} {Wort} => 2tes Wort ein Substantiv
    • Beispiele: QMS Einstellungen, NKP Adressen, …

  • {ABKÜRZUNG} {wort} => 2tes Wort kein Substantiv
    • Beispiele: QMS einschalten, NKP anlegen, …

Icons

Standard

  • Diese Icons finden sich sowohl in der CCA als auch in der TOGETHER Produktfamilie wieder. Beim Einsatz ist darauf zu achten, dass die Bedeutung der Icons in CCA und TIS gleich ist. Ein Icon für Schaden in einem Produkt muss auch im anderen Produkt ein Icon für Schaden darstellen.
  • Da sich die Icons in einer Font befinden, können auf sie auch font Befehle angewandt werden. Die Farbe lässt sich also ganz einfach mit color: $farbe oder #hex anpassen.
  • npm install @tis-cca/iconfonts
  • Link zu den SVG Dateien der einzelnen Icons