django-spire 0.20.2__py3-none-any.whl → 0.20.4__py3-none-any.whl

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.
Files changed (31) hide show
  1. django_spire/consts.py +1 -1
  2. django_spire/core/static/django_spire/css/app-background.css +200 -0
  3. django_spire/core/static/django_spire/css/app-text.css +132 -1
  4. django_spire/core/static/django_spire/css/themes/ayu/app-dark.css +3 -0
  5. django_spire/core/static/django_spire/css/themes/ayu/app-light.css +3 -0
  6. django_spire/core/static/django_spire/css/themes/catppuccin/app-dark.css +3 -0
  7. django_spire/core/static/django_spire/css/themes/catppuccin/app-light.css +3 -0
  8. django_spire/core/static/django_spire/css/themes/default/app-dark.css +3 -0
  9. django_spire/core/static/django_spire/css/themes/default/app-light.css +3 -0
  10. django_spire/core/static/django_spire/css/themes/gruvbox/app-dark.css +3 -0
  11. django_spire/core/static/django_spire/css/themes/gruvbox/app-light.css +3 -0
  12. django_spire/core/static/django_spire/css/themes/material/app-dark.css +3 -0
  13. django_spire/core/static/django_spire/css/themes/material/app-light.css +3 -0
  14. django_spire/core/static/django_spire/css/themes/nord/app-dark.css +3 -0
  15. django_spire/core/static/django_spire/css/themes/nord/app-light.css +3 -0
  16. django_spire/core/static/django_spire/css/themes/one-dark/app-dark.css +3 -0
  17. django_spire/core/static/django_spire/css/themes/one-dark/app-light.css +3 -0
  18. django_spire/core/static/django_spire/css/themes/palenight/app-dark.css +3 -0
  19. django_spire/core/static/django_spire/css/themes/palenight/app-light.css +3 -0
  20. django_spire/core/static/django_spire/css/themes/rose-pine/app-dark.css +3 -0
  21. django_spire/core/static/django_spire/css/themes/rose-pine/app-light.css +3 -0
  22. django_spire/core/static/django_spire/css/themes/tokyo-night/app-dark.css +3 -0
  23. django_spire/core/static/django_spire/css/themes/tokyo-night/app-light.css +3 -0
  24. django_spire/core/static/django_spire/js/theme.js +22 -0
  25. django_spire/theme/templates/django_spire/theme/section/color_section.html +239 -89
  26. django_spire/theme/templates/django_spire/theme/section/typography_section.html +87 -1
  27. {django_spire-0.20.2.dist-info → django_spire-0.20.4.dist-info}/METADATA +1 -1
  28. {django_spire-0.20.2.dist-info → django_spire-0.20.4.dist-info}/RECORD +31 -31
  29. {django_spire-0.20.2.dist-info → django_spire-0.20.4.dist-info}/WHEEL +0 -0
  30. {django_spire-0.20.2.dist-info → django_spire-0.20.4.dist-info}/licenses/LICENSE.md +0 -0
  31. {django_spire-0.20.2.dist-info → django_spire-0.20.4.dist-info}/top_level.txt +0 -0
django_spire/core/static/django_spire/js/theme.js CHANGED
@@ -184,6 +184,9 @@ document.addEventListener('alpine:init', () => {
184
184
  }
185
185
 
186
186
  this.apply_input_icon_theme();
187
+
188
+ let theme = this.get_current_theme();
189
+ window.dispatchEvent(new CustomEvent('theme-changed', { detail: theme }));
187
190
  };
188
191
 
189
192
  document.head.appendChild(link);
@@ -238,3 +241,22 @@ document.addEventListener('alpine:init', () => {
238
241
  }
239
242
  });
240
243
  });
244
+
245
+ window.get_echarts_theme = function() {
246
+ let styles = getComputedStyle(document.documentElement);
247
+ let is_dark = document.documentElement.getAttribute('data-theme') === 'dark';
248
+
249
+ return {
250
+ text: styles.getPropertyValue('--app-default-text-color').trim(),
251
+ primary: styles.getPropertyValue('--app-primary').trim(),
252
+ primary_dark: styles.getPropertyValue('--app-primary-dark').trim(),
253
+ secondary: styles.getPropertyValue('--app-secondary').trim(),
254
+ secondary_dark: styles.getPropertyValue('--app-secondary-dark').trim(),
255
+ border: styles.getPropertyValue('--bs-border-color').trim(),
256
+ bg: styles.getPropertyValue('--app-layer-one').trim(),
257
+ layer_two: styles.getPropertyValue('--app-layer-two').trim(),
258
+ layer_three: styles.getPropertyValue('--app-layer-three').trim(),
259
+ layer_four: styles.getPropertyValue('--app-layer-four').trim(),
260
+ is_dark: is_dark,
261
+ };
262
+ };
django_spire/theme/templates/django_spire/theme/section/color_section.html CHANGED
@@ -14,6 +14,7 @@
14
14
  <div class="mb-3 p-3 bg-app-secondary-dark">--app-secondary-dark</div>
15
15
  </div>
16
16
  </div>
17
+
17
18
  <div class="row mb-5">
18
19
  <div class="col-6">
19
20
  <h5>Accent Colors</h5>
@@ -21,7 +22,6 @@
21
22
  <div class="mb-3 p-3 bg-app-accent-soft">--app-accent-soft</div>
22
23
  <div class="mb-3 p-3 bg-app-accent-dark">--app-accent-dark</div>
23
24
  </div>
24
-
25
25
  <div class="col-6">
26
26
  <h5>Success Colors</h5>
27
27
  <div class="mb-3 p-3 bg-app-success">--app-success</div>
@@ -29,6 +29,7 @@
29
29
  <div class="mb-3 p-3 bg-app-success-dark">--app-success-dark</div>
30
30
  </div>
31
31
  </div>
32
+
32
33
  <div class="row mb-5">
33
34
  <div class="col-6">
34
35
  <h5>Warning Colors</h5>
@@ -75,118 +76,267 @@
75
76
  </div>
76
77
  </div>
77
78
 
79
+ <h2 class="mb-4 mt-5">Background Opacity Classes</h2>
80
+
78
81
  <div class="row mb-5">
79
- <h5>Complete Color Palette</h5>
80
- <div class="d-flex flex-wrap">
81
- <!-- Primary Colors -->
82
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-primary"
83
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary
84
- </div>
85
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-primary-soft"
86
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary Soft
87
- </div>
88
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-primary-dark"
89
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary Dark
82
+ <div class="col-12">
83
+ <h5>Primary Opacity</h5>
84
+ <div class="d-flex align-items-center mb-3">
85
+ <div class="p-3 bg-app-primary-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
86
+ <div class="p-3 bg-app-primary-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
87
+ <div class="p-3 bg-app-primary-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
88
+ <div class="p-3 bg-app-primary-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
89
+ <div class="p-3 bg-app-primary-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
90
+ <div class="p-3 bg-app-primary me-2" style="width: 80px; height: 60px;">100%</div>
90
91
  </div>
92
+ </div>
93
+ </div>
91
94
 
92
- <!-- Secondary Colors -->
93
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-secondary"
94
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary
95
- </div>
96
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-secondary-soft"
97
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary Soft
98
- </div>
99
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-secondary-dark"
100
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary Dark
95
+ <div class="row mb-5">
96
+ <div class="col-12">
97
+ <h5>Secondary Opacity</h5>
98
+ <div class="d-flex align-items-center mb-3">
99
+ <div class="p-3 bg-app-secondary-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
100
+ <div class="p-3 bg-app-secondary-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
101
+ <div class="p-3 bg-app-secondary-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
102
+ <div class="p-3 bg-app-secondary-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
103
+ <div class="p-3 bg-app-secondary-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
104
+ <div class="p-3 bg-app-secondary me-2" style="width: 80px; height: 60px;">100%</div>
101
105
  </div>
106
+ </div>
107
+ </div>
102
108
 
103
- <!-- Accent Colors -->
104
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-accent"
105
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent
106
- </div>
107
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-accent-soft"
108
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent Soft
109
- </div>
110
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-accent-dark"
111
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent Dark
109
+ <div class="row mb-5">
110
+ <div class="col-12">
111
+ <h5>Accent Opacity</h5>
112
+ <div class="d-flex align-items-center mb-3">
113
+ <div class="p-3 bg-app-accent-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
114
+ <div class="p-3 bg-app-accent-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
115
+ <div class="p-3 bg-app-accent-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
116
+ <div class="p-3 bg-app-accent-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
117
+ <div class="p-3 bg-app-accent-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
118
+ <div class="p-3 bg-app-accent me-2" style="width: 80px; height: 60px;">100%</div>
112
119
  </div>
120
+ </div>
121
+ </div>
113
122
 
114
- <!-- Success Colors -->
115
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-success"
116
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success
117
- </div>
118
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-success-soft"
119
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success Soft
120
- </div>
121
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-success-dark"
122
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success Dark
123
+ <div class="row mb-5">
124
+ <div class="col-12">
125
+ <h5>Success Opacity</h5>
126
+ <div class="d-flex align-items-center mb-3">
127
+ <div class="p-3 bg-app-success-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
128
+ <div class="p-3 bg-app-success-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
129
+ <div class="p-3 bg-app-success-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
130
+ <div class="p-3 bg-app-success-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
131
+ <div class="p-3 bg-app-success-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
132
+ <div class="p-3 bg-app-success me-2" style="width: 80px; height: 60px;">100%</div>
123
133
  </div>
134
+ </div>
135
+ </div>
124
136
 
125
- <!-- Warning Colors -->
126
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-warning"
127
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning
128
- </div>
129
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-warning-soft"
130
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning Soft
131
- </div>
132
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-warning-dark"
133
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning Dark
137
+ <div class="row mb-5">
138
+ <div class="col-12">
139
+ <h5>Warning Opacity</h5>
140
+ <div class="d-flex align-items-center mb-3">
141
+ <div class="p-3 bg-app-warning-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
142
+ <div class="p-3 bg-app-warning-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
143
+ <div class="p-3 bg-app-warning-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
144
+ <div class="p-3 bg-app-warning-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
145
+ <div class="p-3 bg-app-warning-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
146
+ <div class="p-3 bg-app-warning me-2" style="width: 80px; height: 60px;">100%</div>
134
147
  </div>
148
+ </div>
149
+ </div>
135
150
 
136
- <!-- Danger Colors -->
137
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-danger"
138
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger
139
- </div>
140
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-danger-soft"
141
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger Soft
142
- </div>
143
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-danger-dark"
144
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger Dark
151
+ <div class="row mb-5">
152
+ <div class="col-12">
153
+ <h5>Danger Opacity</h5>
154
+ <div class="d-flex align-items-center mb-3">
155
+ <div class="p-3 bg-app-danger-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
156
+ <div class="p-3 bg-app-danger-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
157
+ <div class="p-3 bg-app-danger-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
158
+ <div class="p-3 bg-app-danger-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
159
+ <div class="p-3 bg-app-danger-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
160
+ <div class="p-3 bg-app-danger me-2" style="width: 80px; height: 60px;">100%</div>
145
161
  </div>
162
+ </div>
163
+ </div>
146
164
 
147
- <!-- Layer Colors -->
148
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-one"
149
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer One
150
- </div>
151
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-two"
152
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Two
153
- </div>
154
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-three"
155
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Three
156
- </div>
157
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-four"
158
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Four
165
+ <div class="row mb-5">
166
+ <div class="col-12">
167
+ <h5>Layer One Opacity</h5>
168
+ <div class="d-flex align-items-center mb-3">
169
+ <div class="p-3 bg-app-layer-one-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
170
+ <div class="p-3 bg-app-layer-one-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
171
+ <div class="p-3 bg-app-layer-one-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
172
+ <div class="p-3 bg-app-layer-one-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
173
+ <div class="p-3 bg-app-layer-one-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
174
+ <div class="p-3 bg-app-layer-one me-2" style="width: 80px; height: 60px;">100%</div>
159
175
  </div>
160
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-one"
161
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer One
176
+ </div>
177
+ </div>
178
+
179
+ <div class="row mb-5">
180
+ <div class="col-12">
181
+ <h5>Layer Two Opacity</h5>
182
+ <div class="d-flex align-items-center mb-3">
183
+ <div class="p-3 bg-app-layer-two-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
184
+ <div class="p-3 bg-app-layer-two-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
185
+ <div class="p-3 bg-app-layer-two-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
186
+ <div class="p-3 bg-app-layer-two-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
187
+ <div class="p-3 bg-app-layer-two-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
188
+ <div class="p-3 bg-app-layer-two me-2" style="width: 80px; height: 60px;">100%</div>
162
189
  </div>
163
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-two"
164
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer Two
190
+ </div>
191
+ </div>
192
+
193
+ <div class="row mb-5">
194
+ <div class="col-12">
195
+ <h5>Layer Three Opacity</h5>
196
+ <div class="d-flex align-items-center mb-3">
197
+ <div class="p-3 bg-app-layer-three-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
198
+ <div class="p-3 bg-app-layer-three-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
199
+ <div class="p-3 bg-app-layer-three-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
200
+ <div class="p-3 bg-app-layer-three-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
201
+ <div class="p-3 bg-app-layer-three-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
202
+ <div class="p-3 bg-app-layer-three me-2" style="width: 80px; height: 60px;">100%</div>
165
203
  </div>
166
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-three"
167
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer Three
204
+ </div>
205
+ </div>
206
+
207
+ <div class="row mb-5">
208
+ <div class="col-12">
209
+ <h5>Layer Four Opacity</h5>
210
+ <div class="d-flex align-items-center mb-3">
211
+ <div class="p-3 bg-app-layer-four-opacity-10 me-2" style="width: 80px; height: 60px;">10%</div>
212
+ <div class="p-3 bg-app-layer-four-opacity-25 me-2" style="width: 80px; height: 60px;">25%</div>
213
+ <div class="p-3 bg-app-layer-four-opacity-50 me-2" style="width: 80px; height: 60px;">50%</div>
214
+ <div class="p-3 bg-app-layer-four-opacity-75 me-2" style="width: 80px; height: 60px;">75%</div>
215
+ <div class="p-3 bg-app-layer-four-opacity-90 me-2" style="width: 80px; height: 60px;">90%</div>
216
+ <div class="p-3 bg-app-layer-four me-2" style="width: 80px; height: 60px;">100%</div>
168
217
  </div>
169
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-four"
170
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer Four
218
+ </div>
219
+ </div>
220
+
221
+ <h2 class="mb-4 mt-5">Text Opacity Classes</h2>
222
+
223
+ <div class="row mb-5">
224
+ <div class="col-12">
225
+ <h5>Primary Text Opacity</h5>
226
+ <div class="mb-3">
227
+ <span class="text-app-primary-opacity-10 me-3">10% Opacity</span>
228
+ <span class="text-app-primary-opacity-25 me-3">25% Opacity</span>
229
+ <span class="text-app-primary-opacity-50 me-3">50% Opacity</span>
230
+ <span class="text-app-primary-opacity-75 me-3">75% Opacity</span>
231
+ <span class="text-app-primary-opacity-90 me-3">90% Opacity</span>
232
+ <span class="text-app-primary me-3">100% Opacity</span>
171
233
  </div>
234
+ </div>
235
+ </div>
172
236
 
173
- <!-- Navigation Colors -->
174
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-side-navigation text-app-side-navigation"
175
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Side Nav
237
+ <div class="row mb-5">
238
+ <div class="col-12">
239
+ <h5>Secondary Text Opacity</h5>
240
+ <div class="mb-3">
241
+ <span class="text-app-secondary-opacity-10 me-3">10% Opacity</span>
242
+ <span class="text-app-secondary-opacity-25 me-3">25% Opacity</span>
243
+ <span class="text-app-secondary-opacity-50 me-3">50% Opacity</span>
244
+ <span class="text-app-secondary-opacity-75 me-3">75% Opacity</span>
245
+ <span class="text-app-secondary-opacity-90 me-3">90% Opacity</span>
246
+ <span class="text-app-secondary me-3">100% Opacity</span>
176
247
  </div>
177
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-top-navigation text-app-top-navigation"
178
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Top Nav
248
+ </div>
249
+ </div>
250
+
251
+ <div class="row mb-5">
252
+ <div class="col-12">
253
+ <h5>Accent Text Opacity</h5>
254
+ <div class="mb-3">
255
+ <span class="text-app-accent-opacity-10 me-3">10% Opacity</span>
256
+ <span class="text-app-accent-opacity-25 me-3">25% Opacity</span>
257
+ <span class="text-app-accent-opacity-50 me-3">50% Opacity</span>
258
+ <span class="text-app-accent-opacity-75 me-3">75% Opacity</span>
259
+ <span class="text-app-accent-opacity-90 me-3">90% Opacity</span>
260
+ <span class="text-app-accent me-3">100% Opacity</span>
179
261
  </div>
180
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-footer text-app-footer"
181
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Footer
262
+ </div>
263
+ </div>
264
+
265
+ <div class="row mb-5">
266
+ <div class="col-12">
267
+ <h5>Success Text Opacity</h5>
268
+ <div class="mb-3">
269
+ <span class="text-app-success-opacity-10 me-3">10% Opacity</span>
270
+ <span class="text-app-success-opacity-25 me-3">25% Opacity</span>
271
+ <span class="text-app-success-opacity-50 me-3">50% Opacity</span>
272
+ <span class="text-app-success-opacity-75 me-3">75% Opacity</span>
273
+ <span class="text-app-success-opacity-90 me-3">90% Opacity</span>
274
+ <span class="text-app-success me-3">100% Opacity</span>
182
275
  </div>
276
+ </div>
277
+ </div>
183
278
 
184
- <!-- Table Colors -->
185
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-table-row text-app-table-row"
186
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Table Row
279
+ <div class="row mb-5">
280
+ <div class="col-12">
281
+ <h5>Warning Text Opacity</h5>
282
+ <div class="mb-3">
283
+ <span class="text-app-warning-opacity-10 me-3">10% Opacity</span>
284
+ <span class="text-app-warning-opacity-25 me-3">25% Opacity</span>
285
+ <span class="text-app-warning-opacity-50 me-3">50% Opacity</span>
286
+ <span class="text-app-warning-opacity-75 me-3">75% Opacity</span>
287
+ <span class="text-app-warning-opacity-90 me-3">90% Opacity</span>
288
+ <span class="text-app-warning me-3">100% Opacity</span>
187
289
  </div>
188
- <div class="p-3 d-flex align-items-center justify-content-center bg-app-table-row-alt text-app-table-row-alt"
189
- style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Table Row Alt
290
+ </div>
291
+ </div>
292
+
293
+ <div class="row mb-5">
294
+ <div class="col-12">
295
+ <h5>Danger Text Opacity</h5>
296
+ <div class="mb-3">
297
+ <span class="text-app-danger-opacity-10 me-3">10% Opacity</span>
298
+ <span class="text-app-danger-opacity-25 me-3">25% Opacity</span>
299
+ <span class="text-app-danger-opacity-50 me-3">50% Opacity</span>
300
+ <span class="text-app-danger-opacity-75 me-3">75% Opacity</span>
301
+ <span class="text-app-danger-opacity-90 me-3">90% Opacity</span>
302
+ <span class="text-app-danger me-3">100% Opacity</span>
190
303
  </div>
191
304
  </div>
192
305
  </div>
306
+
307
+ <div class="row mb-5">
308
+ <h5>Complete Color Palette</h5>
309
+ <div class="d-flex flex-wrap">
310
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-primary" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary</div>
311
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-primary-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary Soft</div>
312
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-primary-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Primary Dark</div>
313
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-secondary" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary</div>
314
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-secondary-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary Soft</div>
315
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-secondary-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Secondary Dark</div>
316
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-accent" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent</div>
317
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-accent-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent Soft</div>
318
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-accent-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Accent Dark</div>
319
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-success" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success</div>
320
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-success-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success Soft</div>
321
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-success-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Success Dark</div>
322
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-warning" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning</div>
323
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-warning-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning Soft</div>
324
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-warning-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Warning Dark</div>
325
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-danger" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger</div>
326
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-danger-soft" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger Soft</div>
327
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-danger-dark" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Danger Dark</div>
328
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-one" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer One</div>
329
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-two" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Two</div>
330
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-three" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Three</div>
331
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-layer-four" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Layer Four</div>
332
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-one" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer One</div>
333
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-two" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer Two</div>
334
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-three" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer Three</div>
335
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-alt-layer-four" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Alt Layer Four</div>
336
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-side-navigation text-app-side-navigation" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Side Nav</div>
337
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-top-navigation text-app-top-navigation" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Top Nav</div>
338
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-footer text-app-footer" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Footer</div>
339
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-table-row text-app-table-row" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Table Row</div>
340
+ <div class="p-3 d-flex align-items-center justify-content-center bg-app-table-row-alt text-app-table-row-alt" style="width: 80px; height: 80px; text-align: center; font-size: 10px;">Table Row Alt</div>
341
+ </div>
342
+ </div>
django_spire/theme/templates/django_spire/theme/section/typography_section.html CHANGED
@@ -49,7 +49,7 @@
49
49
  </div>
50
50
  </div>
51
51
 
52
- <div class="row">
52
+ <div class="row mb-4">
53
53
  <div class="col-6">
54
54
  <div class="text-app-warning">Text App Warning</div>
55
55
  <div class="text-app-warning-soft">Text App Warning Soft</div>
@@ -61,3 +61,89 @@
61
61
  <div class="text-app-danger-dark">Text App Danger Dark</div>
62
62
  </div>
63
63
  </div>
64
+
65
+ <h2 class="mb-4 mt-5">Text Color Opacity</h2>
66
+
67
+ <div class="row mb-4">
68
+ <div class="col-12">
69
+ <h5>Primary Text Opacity</h5>
70
+ <div class="mb-3">
71
+ <span class="text-app-primary-opacity-10 me-3">10%</span>
72
+ <span class="text-app-primary-opacity-25 me-3">25%</span>
73
+ <span class="text-app-primary-opacity-50 me-3">50%</span>
74
+ <span class="text-app-primary-opacity-75 me-3">75%</span>
75
+ <span class="text-app-primary-opacity-90 me-3">90%</span>
76
+ <span class="text-app-primary me-3">100%</span>
77
+ </div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="row mb-4">
82
+ <div class="col-12">
83
+ <h5>Secondary Text Opacity</h5>
84
+ <div class="mb-3">
85
+ <span class="text-app-secondary-opacity-10 me-3">10%</span>
86
+ <span class="text-app-secondary-opacity-25 me-3">25%</span>
87
+ <span class="text-app-secondary-opacity-50 me-3">50%</span>
88
+ <span class="text-app-secondary-opacity-75 me-3">75%</span>
89
+ <span class="text-app-secondary-opacity-90 me-3">90%</span>
90
+ <span class="text-app-secondary me-3">100%</span>
91
+ </div>
92
+ </div>
93
+ </div>
94
+
95
+ <div class="row mb-4">
96
+ <div class="col-12">
97
+ <h5>Accent Text Opacity</h5>
98
+ <div class="mb-3">
99
+ <span class="text-app-accent-opacity-10 me-3">10%</span>
100
+ <span class="text-app-accent-opacity-25 me-3">25%</span>
101
+ <span class="text-app-accent-opacity-50 me-3">50%</span>
102
+ <span class="text-app-accent-opacity-75 me-3">75%</span>
103
+ <span class="text-app-accent-opacity-90 me-3">90%</span>
104
+ <span class="text-app-accent me-3">100%</span>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="row mb-4">
110
+ <div class="col-12">
111
+ <h5>Success Text Opacity</h5>
112
+ <div class="mb-3">
113
+ <span class="text-app-success-opacity-10 me-3">10%</span>
114
+ <span class="text-app-success-opacity-25 me-3">25%</span>
115
+ <span class="text-app-success-opacity-50 me-3">50%</span>
116
+ <span class="text-app-success-opacity-75 me-3">75%</span>
117
+ <span class="text-app-success-opacity-90 me-3">90%</span>
118
+ <span class="text-app-success me-3">100%</span>
119
+ </div>
120
+ </div>
121
+ </div>
122
+
123
+ <div class="row mb-4">
124
+ <div class="col-12">
125
+ <h5>Warning Text Opacity</h5>
126
+ <div class="mb-3">
127
+ <span class="text-app-warning-opacity-10 me-3">10%</span>
128
+ <span class="text-app-warning-opacity-25 me-3">25%</span>
129
+ <span class="text-app-warning-opacity-50 me-3">50%</span>
130
+ <span class="text-app-warning-opacity-75 me-3">75%</span>
131
+ <span class="text-app-warning-opacity-90 me-3">90%</span>
132
+ <span class="text-app-warning me-3">100%</span>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <div class="row mb-4">
138
+ <div class="col-12">
139
+ <h5>Danger Text Opacity</h5>
140
+ <div class="mb-3">
141
+ <span class="text-app-danger-opacity-10 me-3">10%</span>
142
+ <span class="text-app-danger-opacity-25 me-3">25%</span>
143
+ <span class="text-app-danger-opacity-50 me-3">50%</span>
144
+ <span class="text-app-danger-opacity-75 me-3">75%</span>
145
+ <span class="text-app-danger-opacity-90 me-3">90%</span>
146
+ <span class="text-app-danger me-3">100%</span>
147
+ </div>
148
+ </div>
149
+ </div>
{django_spire-0.20.2.dist-info → django_spire-0.20.4.dist-info}/METADATA RENAMED
@@ -1,6 +1,6 @@
1
1
  Metadata-Version: 2.4
2
2
  Name: django-spire
3
- Version: 0.20.2
3
+ Version: 0.20.4
4
4
  Summary: A project for Django Spire
5
5
  Author-email: Brayden Carlson <braydenc@stratusadv.com>, Nathan Johnson <nathanj@stratusadv.com>
6
6
  License: Copyright (c) 2024 Stratus Advanced Technologies and Contributors.