gd-bs 6.4.2 → 6.4.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,11 +1,17 @@
1
- /** Root Styles */
1
+ /** Define default root styles */
2
2
  :root {
3
3
  --sp-accent: #8764b8;
4
4
  --sp-black: #000000;
5
+ --sp-blocking-icon: #fde7e9;
5
6
  --sp-blue: #0078d4;
6
7
  --sp-blue-light: #00bcf2;
8
+ --sp-error-background: #fde7e9;
7
9
  --sp-error-icon: #a80000;
8
10
  --sp-green: #107c10;
11
+ --sp-green-dark: #004b1c;
12
+ --sp-green-light: #bad80a;
13
+ --sp-info-background: #f3f2f1;
14
+ --sp-info-icon: #605e5c;
9
15
  --sp-magenta-light: #e3008c;
10
16
  --sp-neutral-dark: #201f1e;
11
17
  --sp-neutral-light: #edebe9;
@@ -24,11 +30,14 @@
24
30
  --sp-primary-text: #333333;
25
31
  --sp-purple: #5c2d91;
26
32
  --sp-purple-dark: #32145a;
33
+ --sp-purple-light: #b4a0ff;
27
34
  --sp-red: #e81123;
35
+ --sp-red-dark: #a4262c;
36
+ --sp-severe-warning-background: #fed9cc;
28
37
  --sp-severe-warning-icon: #d83b01;
38
+ --sp-success-background: #dff6dd;
29
39
  --sp-success-icon: #107c10;
30
40
  --sp-teal: #008272;
31
- --sp-theme-accent: #0078d4;
32
41
  --sp-theme-dark: #005a9e;
33
42
  --sp-theme-darker: #004578;
34
43
  --sp-theme-dark-alt: #106ebe;
@@ -38,10 +47,13 @@
38
47
  --sp-theme-primary: #0078d4;
39
48
  --sp-theme-secondary: #2b88d8;
40
49
  --sp-theme-tertiary: #71afe5;
50
+ --sp-warning-background: #fff4ce;
41
51
  --sp-warning-highlight: #ffb900;
42
52
  --sp-white: #ffffff;
43
53
  --sp-yellow: #ffb900;
54
+ --sp-yellow-dark: #d29200;
44
55
 
56
+ /* Map the Bootstrap root variables to SharePoint */
45
57
  --bs-blue: var(--sp-blue);
46
58
  --bs-indigo: var(--sp-purple-dark);
47
59
  --bs-purple: var(--sp-purple);
@@ -56,14 +68,47 @@
56
68
  --bs-white: var(--sp-white);
57
69
  --bs-gray: var(--sp-neutral-secondary);
58
70
  --bs-gray-dark: var(--sp-neutral-primary);
71
+ --bs-gray-100: var(--sp-neutral-lighter-alt);
72
+ --bs-gray-200: var(--sp-neutral-lighter);
73
+ --bs-gray-300: var(--sp-neutral-light);
74
+ --bs-gray-400: var(--sp-neutral-quaternary);
75
+ --bs-gray-500: var(--sp-neutral-tertiary);
76
+ --bs-gray-600: var(--sp-neutral-secondary);
77
+ --bs-gray-700: var(--sp-neutral-primary-alt);
78
+ --bs-gray-800: var(--sp-neutral-primary);
79
+ --bs-gray-900: var(--sp-neutral-dark);
59
80
  --bs-primary: var(--sp-theme-primary);
60
- --bs-secondary: var(--sp-neutral-secondary);
81
+ --bs-secondary: var(--sp-info-icon);
61
82
  --bs-success: var(--sp-success-icon);
62
83
  --bs-info: var(--sp-accent);
63
84
  --bs-warning: var(--sp-severe-warning-icon);
64
85
  --bs-danger: var(--sp-error-icon);
65
- --bs-light: var(--sp-neutral-lighter-alt);
86
+ --bs-light: var(--sp-neutral-lighter);
66
87
  --bs-dark: var(--sp-neutral-dark);
88
+ --bs-primary-text-emphasis: var(--sp-theme-darker);
89
+ --bs-secondary-text-emphasis: var(--sp-neutral-primary);
90
+ --bs-success-text-emphasis: var(--sp-green-dark);
91
+ --bs-info-text-emphasis: var(--sp-purple-dark);
92
+ --bs-warning-text-emphasis: var(--sp-yellow-dark);
93
+ --bs-danger-text-emphasis: var(--sp-red-dark);
94
+ --bs-light-text-emphasis: var(--sp-neutral-primary-alt);
95
+ --bs-dark-text-emphasis: var(--sp-neutral-primary-alt);
96
+ --bs-primary-bg-subtle: var(--sp-theme-light);
97
+ --bs-secondary-bg-subtle: var(--sp-info-background);
98
+ --bs-success-bg-subtle: var(--sp-success-background);
99
+ --bs-info-bg-subtle: var(--sp-theme-lighter-alt);
100
+ --bs-warning-bg-subtle: var(--sp-warning-background);
101
+ --bs-danger-bg-subtle: var(--sp-error-background);
102
+ --bs-light-bg-subtle: var(--sp-neutral-lighter-alt);
103
+ --bs-dark-bg-subtle: var(--sp-neutral-quaternary-alt);
104
+ --bs-primary-border-subtle: var(--sp-theme-tertiary);
105
+ --bs-secondary-border-subtle: var(--sp-neutral-tertiary-alt);
106
+ --bs-success-border-subtle: var(--sp-green-light);
107
+ --bs-info-border-subtle: var(--sp-purple-light);
108
+ --bs-warning-border-subtle: var(--sp-severe-warning-background);
109
+ --bs-danger-border-subtle: var(--sp-blocking-icon);
110
+ --bs-light-border-subtle: var(--sp-neutral-light);
111
+ --bs-dark-border-subtle: var(--sp-neutral-tertiary);
67
112
  --bs-body-color: var(--sp-neutral-dark);
68
113
  --bs-body-bg: var(--sp-white);
69
114
  --bs-emphasis-color: var(--sp-black);
@@ -77,6 +122,7 @@
77
122
  --bs-highlight-color: var(--sp-neutral-dark);
78
123
  --bs-highlight-bg: var(--sp-neutral-quaternary-alt);
79
124
  --bs-border-color: var(--sp-neutral-quaternary);
125
+ --bs-focus-ring-color: color-mix(in srgb, var(--sp-theme-primary), transparent 75%);
80
126
  --bs-form-valid-color: var(--sp-success-icon);
81
127
  --bs-form-valid-border-color: var(--sp-success-icon);
82
128
  --bs-form-invalid-color: var(--sp-error-icon);
@@ -24,24 +24,24 @@
24
24
  /* Tippy Tooltip secondary theme color */
25
25
 
26
26
  .tippy-box[data-theme~='secondary'] {
27
- background-color: var(--sp-neutral-secondary, #605e5c);
27
+ background-color: var(--sp-info-icon, #605e5c);
28
28
  color: var(--sp-white, #ffffff);
29
29
  }
30
30
 
31
31
  .tippy-box[data-theme~='secondary'][data-placement^='top']>.tippy-arrow::before {
32
- border-top-color: var(--sp-neutral-secondary, #605e5c);
32
+ border-top-color: var(--sp-info-icon, #605e5c);
33
33
  }
34
34
 
35
35
  .tippy-box[data-theme~='secondary'][data-placement^='bottom']>.tippy-arrow::before {
36
- border-bottom-color: var(--sp-neutral-secondary, #605e5c);
36
+ border-bottom-color: var(--sp-info-icon, #605e5c);
37
37
  }
38
38
 
39
39
  .tippy-box[data-theme~='secondary'][data-placement^='left']>.tippy-arrow::before {
40
- border-left-color: var(--sp-neutral-secondary, #605e5c);
40
+ border-left-color: var(--sp-info-icon, #605e5c);
41
41
  }
42
42
 
43
43
  .tippy-box[data-theme~='secondary'][data-placement^='right']>.tippy-arrow::before {
44
- border-right-color: var(--sp-neutral-secondary, #605e5c);
44
+ border-right-color: var(--sp-info-icon, #605e5c);
45
45
  }
46
46
 
47
47
  /* Tippy Tooltip success theme color */
@@ -139,24 +139,24 @@
139
139
  /* Tippy Tooltip light theme color - override Tippy default to match Bootstrap */
140
140
 
141
141
  .tippy-box[data-theme~='light'] {
142
- background-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
142
+ background-color: var(--sp-neutral-lighter, #f3f2f1) !important;
143
143
  color: var(--sp-black, #000000) !important;
144
144
  }
145
145
 
146
146
  .tippy-box[data-theme~='light'][data-placement^='top']>.tippy-arrow::before {
147
- border-top-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
147
+ border-top-color: var(--sp-neutral-lighter, #f3f2f1) !important;
148
148
  }
149
149
 
150
150
  .tippy-box[data-theme~='light'][data-placement^='bottom']>.tippy-arrow::before {
151
- border-bottom-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
151
+ border-bottom-color: var(--sp-neutral-lighter, #f3f2f1) !important;
152
152
  }
153
153
 
154
154
  .tippy-box[data-theme~='light'][data-placement^='left']>.tippy-arrow::before {
155
- border-left-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
155
+ border-left-color: var(--sp-neutral-lighter, #f3f2f1) !important;
156
156
  }
157
157
 
158
158
  .tippy-box[data-theme~='light'][data-placement^='right']>.tippy-arrow::before {
159
- border-right-color: var(--sp-neutral-lighter-alt, #faf9f8) !important;
159
+ border-right-color: var(--sp-neutral-lighter, #f3f2f1) !important;
160
160
  }
161
161
 
162
162
  /* Tippy Tooltip dark theme color */