1// Base colors 2$color--blue-100: #1B2834; 3$color--blue-50: #1D3458; 4$color--blue-40: #2D60E5; 5$color--blue-30: #7295F1; 6$color--blue-20: #CCD7F4; 7$color--blue-10: #EFF2FB; 8 9$color--grey-100: #333333; 10$color--grey-80: #666666; 11$color--grey-60: #999999; 12$color--grey-40: #CCCCCC; 13$color--grey-30: #DCDEE0; 14$color--grey-20: #F0F2F5; 15$color--grey-10: #FAFBFC; 16$color--grey-0: #FFFFFF; 17 18// Accent colors 19$color--teal-70: #098292; 20$color--teal-50: #00B6CB; 21$color--teal-20: #CCF0F5; 22 23$color--green-50: #0A7D06; 24$color--green-20: #C6E8C5; 25$color--green-10: #ECFDF1; 26 27$color--yellow-70: #DB7C00; 28$color--yellow-50: #FEDF39; 29$color--yellow-20: #FFF8E4; 30$color--yellow-10: #FFF8E4; 31 32$color--red-50: #DA1416; 33$color--red-20: #FAD3D3; 34$color--red-10: #FCE9E9; 35 36// Color mapping 37$base-01--01: $color--blue-100; 38$base-01--02: $color--blue-50; 39$base-01--03: $color--blue-40; 40$base-01--04: $color--blue-30; 41$base-01--05: $color--blue-20; 42 43$base-02--01: $color--grey-100; 44$base-02--02: $color--grey-80; 45$base-02--03: $color--grey-60; 46$base-02--04: $color--grey-40; 47$base-02--05: $color--grey-30; 48$base-02--06: $color--grey-20; 49$base-02--07: $color--grey-10; 50$base-02--08: $color--grey-0; 51 52$accent-01--01: $color--teal-70; 53$accent-01--02: $color--teal-50; 54$accent-01--03: $color--teal-20; 55 56$accent-02--01: $color--green-50; 57$accent-02--02: $color--green-20; 58 59$accent-03--01: $color--yellow-70; 60$accent-03--02: $color--yellow-50; 61$accent-03--03: $color--yellow-20; 62 63$accent-04--01: $color--red-50; 64$accent-04--02: $color--red-20; 65 66// Global 67$primary-light: $base-02--08; 68$primary-dark: $base-02--01; 69$primary-accent: $base-01--03; 70 71$primary-action: $base-01--03; 72$primary-action--hover: $base-01--04; 73 74$text-01: $base-02--01; 75$text-02: $base-02--02; 76$text-03: $base-02--06; 77 78$background-01: $primary-light; 79$background-02: $base-02--06; 80$background-03: $base-02--05; 81$background-04: $base-01--01; 82$background-05: $base-01--02; 83 84$border-color-01: $base-02--05; 85$border-color-02: $base-02--03; 86 87$box-shadow-color: $base-02--05; 88 89$status-error: $accent-04--01; 90$status-ok: $accent-02--01; 91$status-warn: $accent-03--01; 92 93$notification-info--dark: $color--blue-40; 94$notification-info--light: $color--blue-10; 95$notification-success--dark: $color--green-50; 96$notification-success--light: $color--green-10; 97$notification-warn--dark: $color--yellow-50; 98$notification-warn--light: $color--yellow-10; 99$notification-error--dark: $color--red-50; 100$notification-error--light: $color--red-10; 101 102