Developer Resources

Working with Colors in Kopis

As previously mentioned, one of the key updates in the Kopis theme is the Color palette. We have provided a list of the Extended Color palette variables as well as guidance on how to select accessible color pairs from the palette.

We recommend using the referenced SASS or CSS color variables e.g. $blue-60 or --sedl-blue-60 in code as well as in discussions with other developers or designers as it simplifies the communication of color values. It also ensures that should updates be made to the palette then the change can easily propagate into applications as compared to using hex values.

In addition to the existing SASS tokens, the following CSS variables are now available:

Red Colors

• –sedl-red-10
• –sedl-red-20
• –sedl-red-30
• –sedl-red-40
• –sedl-red-50
• –sedl-red-60
• –sedl-red-70
• –sedl-red-80
• –sedl-red-90
• –sedl-red-100

Gray Colors

• –sedl-gray-10
• –sedl-gray-20
• –sedl-gray-30
• –sedl-gray-40
• –sedl-gray-50
• –sedl-gray-60
• –sedl-gray-70
• –sedl-gray-80
• –sedl-gray-90
• –sedl-gray-100

Yellow Colors

• –sedl-yellow-10
• –sedl-yellow-20
• –sedl-yellow-30
• –sedl-yellow-40
• –sedl-yellow-50
• –sedl-yellow-60
• –sedl-yellow-70
• –sedl-yellow-80
• –sedl-yellow-90
• –sedl-yellow-100

Green Colors

• –sedl-green-10
• –sedl-green-20
• –sedl-green-30
• –sedl-green-40
• –sedl-green-50
• –sedl-green-60
• –sedl-green-70
• –sedl-green-80
• –sedl-green-90
• –sedl-green-100

Blue Colors

• –sedl-blue-10
• –sedl-blue-20
• –sedl-blue-30
• –sedl-blue-40
• –sedl-blue-50
• –sedl-blue-60
• –sedl-blue-70
• –sedl-blue-80
• –sedl-blue-90
• –sedl-blue-100

Brand Colors

• –sedl-black
• –sedl-sabre-brand

Brand Assets

• –sedl-logo-dark-url
• –sedl-logo-light-url
• –sedl-symbol-dark-url
• –sedl-symbol-light-url

The full mapping of SASS color variables to hex values can be found by reviewing the color configurations file in the Spark codebase. This file is also included in the Spark EDL install package.

New Font Introduced

We have introduced the APK Galeria for use with headings (h1 - h4) and product names, where this new font will be employed in headers to augment typographic elegance, while in product names it will confer a distinctive brand identity that resonates with contemporary design sensibilitie. The font weight has been reduced from 700 to 500. Read our Typography documentation for more details.

Title case replaces UPPERCASE

In Kopis we changed text-transform: uppercase with text-transform: capitalize to creates a more polished, professional appearance and improves readability while also reduces visual aggression.

The Following components have been updated:

• Auto-Suggest
• Buttons
• Calendars
• Filters
• Floating Actions Buttons (FAB)
• Headers
• Menus
• Multi-Select Lists
• Progress Indicators
• Step Indicators
• Tables
• Toggles
• Toolbars
• Accordions
• Payments

Sharper Corners for Modern Appeal

Larger rounded corners can feel soft and friendly, they often appear dated in contemporary interfaces. The sharper 4px radius conveys precision and professionalism, giving elements a sleek, minimalistic look that feels fresh and contemporary.

The following components have had their borders changed from either 1rem or 0.5rem to 0.33333333rem

• Checkboxes
• Headers
• Sliders
• Toast
• Tables
• Accordion
• Buttons
• Calendars
• Messages
• Modals
• Number Selectors
• Panels
• Popovers
• Text Inputs
• Toggles
• Tooltips

The sidepipes on the Panel Menus and the underpipes on the Headers have had their border radius reduced 4px to 2px.

Reduced Shadows for a Flat Aesthetic

By diminishing the prominence of shadows, we achieve a more streamlined and contemporary visual hierarchy that removes unnecessary depth in favor of clarity and simplicity. This approach not only accelerates rendering performance by alleviating computational overhead but also fosters greater accessibility by mitigating visual distractions, thereby cultivating an interface that epitomizes modern flat design ethos. The following components have had their shadows removed: Headers, KPI Bar.

The following components have had their shadows updated to rgba($black, 0.6):

• Accordion
• Carousels
• Panels
• Filters
• Menus
• Summary Bar
• Tables

Reduced Border Width to Lighten Visual Weight

Thinner borders impart a more refined aesthetic by diminishing visual heft, fostering a sense of elegance and minimalism.

The following components have had their borders reduced to 1px:

• Avatars
• Badges
• Buttons

Introduction

The Spark Design Language is developed as a responsive and mobile-first suite of components that are a great starting point for web-based applications. Built using SASS and vanilla Javascript and without external dependencies (other than build tools), Spark components can be easily integrated into Sabre products without adding bloat, and can be paired with libraries and frameworks such as React. Spark itself is not a framework.

Get Started with Code

Installing Spark

There are two options for installing and working with Spark components: working with compiled CSS and Javascript or utilizing a build system as part of your development process.

Utilizing a Build System

1. Add an .npmrc file to your product (or update your existing one) and add the following:

registry=https://repository.sabre-gcp.com/repository/npm-all/

2. Authenticate with Nexus using your SG credentials:

npm login

Follow the user/pass prompt. This will add your personal Nexus token to /Users/your-user/.npmrc, so you will only need to run this command once.

3. Install Spark in your product via NPM:

npm install --save @sabre/spark@beta

4. Add the Spark fonts directory and import Spark SASS into your SCSS file:

$font-directory: '~@sabre/spark/dist/css/fonts';
@import '~@sabre/spark/scss/spark.kopis';

5. Import Spark Javascript:

// Load from ES5 compiled code
import {TextInput, DateInput} from '@sabre/spark';

// Or load from ES6 source code
import {TextInput, DateInput} from '@sabre/spark/js/src/spark';

// Or load a single component from ES6 source code
import TextInput from '@sabre/spark/js/src/components/text-input';
import DateInput from '@sabre/spark/js/src/components/date-input';

Working with Components

Once you have installed the Spark codebase, you can then include Spark-specific component markup. For details on how to integrate each component, refer to the UI Components section of this site. Some things to be mindful of:

• Not all Spark components require the use of Javascript, and if one does it will be noted within that component’s documentation under the Developer tab.
• Deviating from the provided HTML example markup/structure could lead to broken functionality and bugs in your application.

Spark uses SASS as a CSS preprocessor because it is powerful, stable and widely adopted, and utilizes the BEM (block, element, modifier) CSS methodology. When using Spark’s SASS files in your project, it is recommended you use node-sass instead of the sass Ruby gem. In addition to being much faster (by up to 4000%!), some features of Spark do not work with older Ruby-based versions of SASS.

Spark’s Javascript library powers some of the more complex UI components of Spark. It has no external dependencies and is required if you wish to use Spark UI components that are Javascript-driven.

Spark’s Javascript modules will not be instantiated automatically. In order to support a broad range of use cases, the modules do not automatically create instances of themselves when the page loads. For example, a Text Input would need to be instantiated after the document is ready by using the following:

new Spark.TextInput(document.querySelector('#textinputid'));

If you are using a framework like React, Vue or Angular, instantiating each component can be done on the fly when views are rendered.

As of Spark v2, the following method of loading the modules into a namespace NO LONGER WORKS. This approach should be considered an ES6 anti-pattern.

// DON'T DO THIS ANYMORE
import Spark from 'sabre-spark';
let headerInstance = new Spark.Header();

Working with Compiled CSS and Javascript

1. Download a zip of the latest Spark library components

2. Include the necessary CSS and Javascript within your HTML documents, which could be as follows:

<!doctype html>
<html>
  <head>
    ...
    <link rel="stylesheet" href="path/to/css/spark.kopis.min.css">
    ...
    <!-- Styles custom to your product if needed -->
    <link rel="stylesheet" href="path/to/css/product-custom-styles.css">
    ...
  </head>
  <body>
    ...
    <script src="path/to/js/spark.min.js"></script>
  </body>
</html>

When utilizing this approach, it is important to keep in mind that you would need to manually download and update the library with each new release of Spark.

Building with Performance in Mind

In order to build performant applications, it is important to utilize techniques that reduce the amount of code that is included in applications. To assist with this, the Spark codebase is available as minified CSS and Javascript for applications that are not utilizing a build process that would automatically minify code as it is being built and deployed. To use Spark’s minified assets, use the minified CSS and Javascript (available in the dist folder of the downloadable zip file) identified with the abbreviation min prior to the file extension:

<link rel="stylesheet" href="path/to/css/spark.kopis.min.css">

Color Variables

• Classic (Light) color variables (scss/config/_color.scss).
• Kopis color variables (scss/themes/kopis/config/_color.scss)

Although your product may eventually ship with the “White Label” theme, all initial development should use the Light theme. When delivering a whitelabel product using Spark, simply replace references to spark.light.css with spark.whitelabel.css. If you are using the Spark SASS files directly, replace your @import /path/to/spark.light; with @import /path/to/spark.whitelabel;.

CSS variables are include in the kopis theme:

XXXXX We recommend using the referenced SASS or CSS color variables e.g. $blue-60 or --sedl-blue-60 in code as well as in discussions with other developers or designers as it simplifies the communication of color values. It also ensures that should updates be made to the palette then the change can easily propagate into applications as compared to using hex values.

In addition to the existing SASS tokens, the following CSS variables are now available:

Red Colors

• –sedl-red-10
• –sedl-red-20
• –sedl-red-30
• –sedl-red-40
• –sedl-red-50
• –sedl-red-60
• –sedl-red-70
• –sedl-red-80
• –sedl-red-90
• –sedl-red-100

Gray Colors

• –sedl-gray-10
• –sedl-gray-20
• –sedl-gray-30
• –sedl-gray-40
• –sedl-gray-50
• –sedl-gray-60
• –sedl-gray-70
• –sedl-gray-80
• –sedl-gray-90
• –sedl-gray-100

Yellow Colors

• –sedl-yellow-10
• –sedl-yellow-20
• –sedl-yellow-30
• –sedl-yellow-40
• –sedl-yellow-50
• –sedl-yellow-60
• –sedl-yellow-70
• –sedl-yellow-80
• –sedl-yellow-90
• –sedl-yellow-100

Green Colors

• –sedl-green-10
• –sedl-green-20
• –sedl-green-30
• –sedl-green-40
• –sedl-green-50
• –sedl-green-60
• –sedl-green-70
• –sedl-green-80
• –sedl-green-90
• –sedl-green-100

Blue Colors

• –sedl-blue-10
• –sedl-blue-20
• –sedl-blue-30
• –sedl-blue-40
• –sedl-blue-50
• –sedl-blue-60
• –sedl-blue-70
• –sedl-blue-80
• –sedl-blue-90
• –sedl-blue-100

Brand Colors

• –sedl-black
• –sedl-sabre-terracotta

Report Bug

Found a bug? Please submit a request through JIRA.

Spark React Resources

Starting in 2019, the Spark team in conjunction with the Sabre Developers community has been developing a Spark-React library which would have full component and feature parity with the core, HTML/CSS/Vanilla JS Spark library. Based off of version 3 of the core Spark library, the Spark-React library will be actively maintained and receive the same features, updates and bug-fixes as the core library.

• Spark-React Storybook
• Spark-React Github Repository

We are actively seeking and welcome any contributions to the Spark-React library including submission of new components, bug-fixes, enhancements and code reviews.

• Spark-React contribution guidelines