Color system

Color palette (Basic Colors We using)

Faction of Colors

Color variables

How to build

To include JDS in your project's build workflow, you need to import three SCSS files from JDS in the correct order into in your own SCSS code. Then, compile your file, e.g. running sass scss > app.css or any other Sass compiler. Be careful to keep the correct order as described in the following example.

How to build

/* COLOR MOOD/THEME */
/* dark color theme */
/*
$jds-color-background: #000000;
$jds-color-foreground: #ffffff;
$jds-bodybg: #222222;
$jds-color-link: #62C6FF;
$jds-color-link-hover: #c2e8ff;
*/

/* light color theme */

$jds-color-background: #ffffff;
$jds-color-foreground: #000000;
$jds-bodybg: #eeeeee;
$jds-color-link: #155C9E;
$jds-color-link-hover: #155C9E;
/**/

/* basic, background, foregroun */
$font-family-san-sarif: 'Open Sans', Helvetica, sans-serif;
$font-family-sarif: 'Times New Roman', Times, serif;
$font-weight-base: 400;
$font-size-base: 14px;
$line-height-base: 1.5;

/* 000000000000000000 Typography 000000000000000 */
$h1: 36;
$h2: 28;
$h3: 24;
$h4: 20;
$h5: 16;
$h6: 14;
$title: 14;
$subtitle: 10;



/* color basic */
$jds-color-black: #000000;
$jds-color-white: #ffffff;
$jds-color-text-mute: rgba($jds-color-foreground, 0.5);
$jds-color-text:  rgba($jds-color-foreground, 0.8);

/* foreground fraction */
$jds-color-foreground90: rgba($jds-color-foreground, 0.9);
$jds-color-foreground80: rgba($jds-color-foreground, 0.8);
$jds-color-foreground70: rgba($jds-color-foreground, 0.7);
$jds-color-foreground60: rgba($jds-color-foreground, 0.6);
$jds-color-foreground50: rgba($jds-color-foreground, 0.5);
$jds-color-foreground40: rgba($jds-color-foreground, 0.4);
$jds-color-foreground30: rgba($jds-color-foreground, 0.3);
$jds-color-foreground20: rgba($jds-color-foreground, 0.2);
$jds-color-foreground10: rgba($jds-color-foreground, 0.1);
/* background fraction */
$jds-color-background90: rgba($jds-color-background, 0.9);
$jds-color-background80: rgba($jds-color-background, 0.8);
$jds-color-background70: rgba($jds-color-background, 0.7);
$jds-color-background60: rgba($jds-color-background, 0.6);
$jds-color-background50: rgba($jds-color-background, 0.5);
$jds-color-background40: rgba($jds-color-background, 0.4);
$jds-color-background30: rgba($jds-color-background, 0.3);
$jds-color-background20: rgba($jds-color-background, 0.2);
$jds-color-background10: rgba($jds-color-background, 0.1);

//* color Peimary */
$jds-color-primary-fade: #62C6FF;
$jds-color-primary-darker: #002242;
$jds-color-primary-dark: #00305E;
$jds-color-primary: #155C9E;
$jds-color-primary90: rgba($jds-color-primary, 0.9);
$jds-color-primary80: rgba($jds-color-primary, 0.8);
$jds-color-primary70: rgba($jds-color-primary, 0.7);
$jds-color-primary60: rgba($jds-color-primary, 0.6);
$jds-color-primary50: rgba($jds-color-primary, 0.5);
$jds-color-primary40: rgba($jds-color-primary, 0.4);
$jds-color-primary30: rgba($jds-color-primary, 0.3);
$jds-color-primary20: rgba($jds-color-primary, 0.2);
$jds-color-primary10: rgba($jds-color-primary, 0.1);

//* color Success */
$jds-color-success-fade: #83CF5F;
$jds-color-success-darker: #253000;
$jds-color-success-dark: #435700;
$jds-color-success: #80A408;
$jds-color-success90: rgba($jds-color-success, 0.9);
$jds-color-success80: rgba($jds-color-success, 0.8);
$jds-color-success70: rgba($jds-color-success, 0.7);
$jds-color-success60: rgba($jds-color-success, 0.6);
$jds-color-success50: rgba($jds-color-success, 0.5);
$jds-color-success40: rgba($jds-color-success, 0.4);
$jds-color-success30: rgba($jds-color-success, 0.3);
$jds-color-success20: rgba($jds-color-success, 0.2);
$jds-color-success10: rgba($jds-color-success, 0.1);

//* color Warning */
$jds-color-warning-fade: #EC9D41;
$jds-color-warning-darker: #403A08;
$jds-color-warning-dark: #745A19;
$jds-color-warning: #F09119;
$jds-color-warning90: rgba($jds-color-warning, 0.9);
$jds-color-warning80: rgba($jds-color-warning, 0.8);
$jds-color-warning70: rgba($jds-color-warning, 0.7);
$jds-color-warning60: rgba($jds-color-warning, 0.6);
$jds-color-warning50: rgba($jds-color-warning, 0.5);
$jds-color-warning40: rgba($jds-color-warning, 0.4);
$jds-color-warning30: rgba($jds-color-warning, 0.3);
$jds-color-warning20: rgba($jds-color-warning, 0.2);
$jds-color-warning10: rgba($jds-color-warning, 0.1);

//* color Error */
$jds-color-error-fade: #F58383;
$jds-color-error-darker: #601B0C;
$jds-color-error-dark: #9A3B26;
$jds-color-error: #FD5A36;
$jds-color-error90: rgba($jds-color-error, 0.9);
$jds-color-error80: rgba($jds-color-error, 0.8);
$jds-color-error70: rgba($jds-color-error, 0.7);
$jds-color-error60: rgba($jds-color-error, 0.6);
$jds-color-error50: rgba($jds-color-error, 0.5);
$jds-color-error40: rgba($jds-color-error, 0.4);
$jds-color-error30: rgba($jds-color-error, 0.3);
$jds-color-error20: rgba($jds-color-error, 0.2);
$jds-color-error10: rgba($jds-color-error, 0.1);

//* color Info */
$jds-color-info-fade: #42DCE5;
$jds-color-info-darker: #25536C;
$jds-color-info-dark: #2597D6;
$jds-color-info: #15D5FF;
$jds-color-info90: rgba($jds-color-info, 0.9);
$jds-color-info80: rgba($jds-color-info, 0.8);
$jds-color-info70: rgba($jds-color-info, 0.7);
$jds-color-info60: rgba($jds-color-info, 0.6);
$jds-color-info50: rgba($jds-color-info, 0.5);
$jds-color-info40: rgba($jds-color-info, 0.4);
$jds-color-info30: rgba($jds-color-info, 0.3);
$jds-color-info20: rgba($jds-color-info, 0.2);
$jds-color-info10: rgba($jds-color-info, 0.1);

//* color Tertiary */
$jds-color-tertiary-fade: #3ECFCF;
$jds-color-tertiary-darker: #016363;
$jds-color-tertiary-dark: #0E7E7E;
$jds-color-tertiary: #00A1A1;
$jds-color-tertiary90: rgba($jds-color-tertiary, 0.9);
$jds-color-tertiary80: rgba($jds-color-tertiary, 0.8);
$jds-color-tertiary70: rgba($jds-color-tertiary, 0.7);
$jds-color-tertiary60: rgba($jds-color-tertiary, 0.6);
$jds-color-tertiary50: rgba($jds-color-tertiary, 0.5);
$jds-color-tertiary40: rgba($jds-color-tertiary, 0.4);
$jds-color-tertiary30: rgba($jds-color-tertiary, 0.3);
$jds-color-tertiary20: rgba($jds-color-tertiary, 0.2);
$jds-color-tertiary10: rgba($jds-color-tertiary, 0.1);

//* color Gray */
$jds-color-gray-fade: #BEBEBE;
$jds-color-gray-darker: #2B2B2B;
$jds-color-gray-dark: #434343;
$jds-color-gray: #686868;
$jds-color-gray90: rgba($jds-color-gray, 0.9);
$jds-color-gray80: rgba($jds-color-gray, 0.8);
$jds-color-gray70: rgba($jds-color-gray, 0.7);
$jds-color-gray60: rgba($jds-color-gray, 0.6);
$jds-color-gray50: rgba($jds-color-gray, 0.5);
$jds-color-gray40: rgba($jds-color-gray, 0.4);
$jds-color-gray30: rgba($jds-color-gray, 0.3);
$jds-color-gray20: rgba($jds-color-gray, 0.2);
$jds-color-gray10: rgba($jds-color-gray, 0.1); 

How to build

/* 000000000000000000 Media Query Breakpoint 000000000000000 */
$sereenXXL: 3600px; /*for-big-desktop-up*/
$sereenXL: 1920px; /*for-desktop-up*/
$sereenL: 1366px; /*for-laptop-up*/
$sereenM: 992px; /*for-tab-up*/
$sereenS: 768px; /*for-tab-potrare-up*/
$sereenXS: 600px; /*for-mobile*/
$sereenXXS: 480px; /*for-mobile-down*/

/* Table */
// Customizes the `.table` component with basic values, each used across all table variations.
$border-width:                1px !default;
$border-color:                $jds-color-foreground10 !default;

$table-cell-padding:          0.75rem;
$table-cell-padding-sm:       0.3rem;
$table-cell-padding-md:       0.75rem;
$table-cell-padding-lg:       0.9rem;
$table-cell-padding-xl:       1.2rem;

$table-color:                 $jds-color-text !default;
$table-bg:                    null !default;
$table-accent-bg:             rgba($jds-color-black, .05) !default;
$table-hover-color:           $table-color !default;
$table-hover-bg:              rgba($jds-color-black, .075) !default;
$table-active-bg:             $table-hover-bg !default;

$table-border-width:          $border-width !default;
$table-border-color:          $border-color !default;

$table-head-bg:               $jds-color-white !default;
$table-head-color:            $jds-color-gray !default;
$table-th-font-weight:        null !default;
/* dark */
$table-dark-color:            $jds-color-white !default;
$table-dark-bg:               $jds-color-gray-darker !default;
$table-dark-accent-bg:        rgba($jds-color-white, .1) !default;
$table-dark-hover-color:      $table-dark-color !default;
$table-dark-hover-bg:         rgba($jds-color-white, .075) !default;
$table-dark-border-color:     rgba($jds-color-black, 0.1) !default;
/* primary */
$table-primary-bg:               $jds-color-primary !default;
$table-success-bg:               $jds-color-success !default;
$table-warning-bg:               $jds-color-warning !default;
$table-gray-bg:                  $jds-color-gray !default;
$table-error-bg:                 $jds-color-error !default;
$table-tertiary-bg:              $jds-color-tertiary !default;
$table-white-bg:                 $jds-color-white !default;
$table-black-bg:                 $jds-color-black !default;

$table-striped-order:         odd !default;

$table-caption-color:         $jds-color-text-mute !default;

$table-bg-level:              -9 !default;
$table-border-level:          -6 !default;



/* 000000000000000000 Border 000000000000000 */



/* 000000000000000000 Shadow Colors 000000000000000 */

$jds-color-shadow-soft: rgba($jds-color-black, 0.05);
$jds-color-shadow: rgba($jds-color-black, 0.1);
$jds-color-shadow-hard: rgba($jds-color-black, 0.15);
$jds-color-shadow-strong: rgba($jds-color-black, 0.25);

Color utilities

All Text color's

You can use CSS class jds-text-foreground, jds-text-background, jds-text-muted, jds-text-primary-fade, jds-text-primary-darker, jds-text-primary-dark, jds-text-primary, jds-text-primary90, jds-text-success, jds-text-warning, jds-text-error, jds-text-info, jds-text-tertiary, jds-text-gray

we can make different color for different viewport/device. Like you can see Primary responsive Color Classess bellow jds-text-xl-primary, jds-text-xl-success, jds-text-xl-warning, jds-text-xl-error, jds-text-xl-info, jds-text-xl-tertiary

Next large Sizes jds-text-l-primary, jds-text-l-success, jds-text-l-warning, jds-text-l-error, jds-text-l-info, jds-text-l-tertiary, jds-text-xl-gray, jds-text-xl-foreground, jds-text-xl-background, jds-text-xl-black, jds-text-xl-white

Also you can use more Sizes class with all colors, like:- jds-text-m-primary, jds-text-s-primary, jds-text-s-primary

All Background color's

we can make different color for different viewport/device. Like you can see Primary responsive Color Classess bellow jds-bg-xl-primary, jds-bg-xl-success, jds-bg-xl-warning, jds-bg-xl-error, jds-bg-xl-info, jds-bg-xl-tertiary

Next large Sizes jds-bg-l-primary, jds-bg-l-success, jds-bg-l-warning, jds-bg-l-error, jds-bg-l-info, jds-bg-l-tertiary, jds-bg-xl-gray, jds-bg-xl-foreground, jds-bg-xl-background, jds-bg-xl-black, jds-bg-xl-white

Also you can use more Sizes class with all colors, like:- jds-bg-m-primary, jds-bg-s-primary, jds-bg-s-primary

We can use gradiant as background colors, like jds-bg-gradiant-light, jds-bg-gradiant-background, jds-bg-gradiant-forground, jds-bg-gradiant-gray, jds-bg-gradiant-primary, jds-bg-gradiant-success, jds-bg-gradiant-warning, jds-bg-gradiant-error, jds-bg-gradiant-info, jds-bg-gradiant-primary-success, jds-bg-gradiant-primary-success45, jds-bg-gradiant-primary-success90, jds-bg-gradiant-success-warning, jds-bg-gradiant-success-warning45, jds-bg-gradiant-success-warning90, jds-bg-gradiant-warning-error, jds-bg-gradiant-warning-error45, jds-bg-gradiant-multicolor, jds-bg-gradiant-multicolor45,

Overlay and Filter

If we set the background color with transparent, then we can use the background blur. So we can see contain blur/glow underneath the background
filter-blur4, filter-blur8, filter-blur12

You see the inner box background is transparent and blur. CSS class we use here filter-blur8, jds-bg-primary20