-
Notifications
You must be signed in to change notification settings - Fork 4.3k
/
_colors.native.scss
116 lines (94 loc) · 3.1 KB
/
_colors.native.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
/** @format */
// Hugo's new WordPress shades of gray, from http://codepen.io/hugobaeta/pen/grJjVp.
$black: #000;
$white: #fff;
$light-gray-500: #e2e4e7; // Good for "grayed" items and borders.
$light-gray-400: #e8eaeb; // Good for "readonly" input fields and special text selection.
// Dark opacities, for use with light themes.
$dark-opacity-900: rgba(#000510, 0.9);
$dark-opacity-800: rgba(#00000a, 0.85);
$dark-opacity-600: rgba(#000913, 0.75);
// Light opacities, for use with dark themes.
$light-opacity-700: rgba($white, 0.85);
$light-opacity-200: rgba($white, 0.6);
$light-opacity-light-100: rgba($white, 0.1);
$light-opacity-light-700: rgba($white, 0.4);
// Alert colors.
$alert-yellow: #f0b849;
$alert-red: #d94f4f;
$alert-green: #4ab866;
$red-30: #f86368;
$red-40: #e65054;
$red-50: #d63638;
// Primary Accent (Blues)
$blue-wordpress: #0087be;
$blue-medium: #00aadc;
$blue-500: #016087;
// Primary tint color (light)
$blue-50: #2271b1;
// Primary tint color (dark)
$blue-30: #5198d9;
// Grays
$gray: #87a6bc;
$gray-light: lighten($gray, 33%); //#f3f6f8
$gray-dark: darken($gray, 38%); //#2e4453
$gray-900: #1a1a1a;
$gray-700: #757575;
// $gray-text: ideal for standard, non placeholder text
// $gray-text-min: minimum contrast needed for WCAG 2.0 AA on white background
$gray-text: $gray-dark;
$gray-text-min: darken($gray, 18%); //#537994
// Shades of gray
$gray-lighten-10: lighten($gray, 10%); // #a8bece
$gray-lighten-20: lighten($gray, 20%); // #c8d7e1
$gray-lighten-30: lighten($gray, 30%); // #e9eff3
$gray-darken-10: darken($gray, 10%);
$gray-darken-20: darken($gray, 20%); // #4f748e
$gray-darken-30: darken($gray, 30%); // #3d596d
// Custom
$toolbar-button: #7b9ab1;
$toolbar-button-disabled: $gray-lighten-30;
$background-dark-elevated: #2e2e2e;
$background-dark-secondary: #1e2327;
$button-fallback-bg: #595959;
// color-studio
$gray-0: #f6f7f7;
$gray-5: #dcdcde;
$gray-10: #c3c4c7;
$gray-20: #a7aaad;
$gray-30: #8e9196;
$gray-40: #787c82;
$gray-50: #646970;
$gray-60: #50575e;
$gray-70: #3c434a;
$gray-80: #2c3338;
$gray-90: #1d2327;
$gray-100: #101517;
$yellow-30: #deb100;
$yellow-50: #9d6e00;
// neutral (light) - black is a base color in light mode
$light-primary: #000d; //rgba(0, 0, 0, 0.87);
$light-secondary: #0009; //rgba(0, 0, 0, 0.6);
$light-tertiary: #0000006d; //rgba(0, 0, 0, 0.43);
$light-quaternary: #0000003f; //rgba(0, 0, 0, 0.25);
$light-dim: #0000001e; //rgba(0, 0, 0, 0.12);
$light-ultra-dim: #0000000a; //rgba(0, 0, 0, 0.04);
// neutral (dark) - white is a base color in dark mode
$dark-primary: #fffd; //rgba(255, 255, 255, 0.87);
$dark-secondary: #fff9; //rgba(255, 255, 255, 0.6);
$dark-tertiary: #ffffff6d; //rgba(255, 255, 255, 0.43);
$dark-quaternary: #ffffff3f; //rgba(255, 255, 255, 0.25);
$dark-ultra-dim: #ffffff14; //rgba(255, 255, 255, 0.08);
// Design Token colors
$app-background: $white;
$app-background-dark: $black;
$app-background-dark-alt: $background-dark-elevated;
$modal-background: $white;
$modal-background-dark: $background-dark-elevated;
$sub-heading: $gray-text-min;
$sub-heading-dark: $white;
/**
* Deprecated colors.
* Please avoid using these.
*/
$dark-gray-500: #555d66;