sdga-ui 1.0.7 → 1.0.8
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.
- package/css/dga-ui.css +24869 -27624
- package/css/dga-ui.css.map +1 -1
- package/demo-angular/angular.json +3 -0
- package/demo-angular/package.json +2 -2
- package/demo-angular/src/app/app.html +1 -1
- package/demo-angular/src/app/app.routes.ts +0 -4
- package/demo-angular/src/app/app.ts +5 -2
- package/demo-angular/src/app/shared/code-example/code-example.component.html +1 -1
- package/demo-angular/src/app/shared/code-example/code-example.component.ts +12 -1
- package/demo-angular/src/app/views/buttons/buttons.component.html +95 -24
- package/demo-angular/src/app/views/buttons/buttons.component.scss +0 -3
- package/demo-angular/src/app/views/buttons/buttons.component.ts +77 -7
- package/demo-angular/src/app/views/footer/footer.html +138 -150
- package/demo-angular/src/app/views/footer/footer.ts +200 -66
- package/demo-angular/src/app/views/links/links.component.ts +1 -1
- package/demo-angular/tsconfig.app.json +2 -1
- package/package.json +1 -1
- package/theme/_variables.scss +0 -1
- package/theme/components/_buttons.scss +1 -302
- package/theme/config/_base.scss +1 -1
- package/theme/customizations/_alerts.scss +15 -14
- package/theme/customizations/_buttons.scss +305 -244
- package/theme/customizations/_footer.scss +122 -45
- package/theme/customizations/_global.scss +20 -2
- package/theme/customizations/_links.scss +45 -44
- package/theme/customizations/_toasts.scss +13 -14
- package/theme/dga-ui.scss +1 -2
- package/demo-angular/src/app/views/contexts/contexts.component.html +0 -204
- package/demo-angular/src/app/views/contexts/contexts.component.ts +0 -10
- package/demo-angular/src/app/views/footer/footer.scss +0 -0
- package/demo-angular/src/app/views/footer/footer.spec.ts +0 -23
- package/theme/config/_contexts.scss +0 -471
- package/theme/customizations/_contexts.scss +0 -432
|
@@ -1,82 +1,159 @@
|
|
|
1
1
|
.dga-footer {
|
|
2
|
-
padding:
|
|
2
|
+
padding: 0 2rem;
|
|
3
3
|
|
|
4
|
-
.dga-
|
|
5
|
-
|
|
6
|
-
|
|
4
|
+
.dga-footer-content {
|
|
5
|
+
justify-self: center;
|
|
6
|
+
display: flex;
|
|
7
|
+
max-width: 80rem;
|
|
8
|
+
width: 100%;
|
|
9
|
+
padding: var(--spacing-5xl, 2.5rem) 0 var(--spacing-3xl, 1.5rem) 0;
|
|
10
|
+
flex-direction: column;
|
|
11
|
+
align-items: flex-start;
|
|
12
|
+
gap: var(--Global-spacing-6xl, 3rem);
|
|
13
|
+
flex: 1 0 0;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.dga-footer-section-title {
|
|
17
|
+
display: flex;
|
|
18
|
+
padding-bottom: var(--spacing-md, 0.5rem);
|
|
19
|
+
flex-direction: column;
|
|
20
|
+
align-items: flex-start;
|
|
21
|
+
align-self: stretch;
|
|
22
|
+
|
|
23
|
+
border-bottom: 1px solid var(--#{$prefix}border-color);
|
|
24
|
+
margin-bottom: 0;
|
|
25
|
+
font-size: $font-size-base;
|
|
26
|
+
font-weight: $font-weight-medium;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.dga-footer-nav-wrapper {
|
|
30
|
+
display: flex;
|
|
31
|
+
padding: var(--spacing-xl, 1rem) 0 var(--spacing-5xl, 2.5rem) 0;
|
|
32
|
+
align-items: flex-start;
|
|
33
|
+
align-content: flex-start;
|
|
34
|
+
gap: 1.5rem var(--spacing-3xl, 1.5rem);
|
|
35
|
+
align-self: stretch;
|
|
36
|
+
flex-wrap: wrap;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.dga-footer-nav-group {
|
|
40
|
+
display: flex;
|
|
41
|
+
min-width: 11.9rem;
|
|
42
|
+
flex-direction: column;
|
|
43
|
+
align-items: flex-start;
|
|
44
|
+
gap: var(--spacing-md, 0.5rem);
|
|
45
|
+
flex: 1 0 0;
|
|
46
|
+
}
|
|
7
47
|
|
|
8
|
-
|
|
9
|
-
|
|
48
|
+
.dga-footer-social {
|
|
49
|
+
display: flex;
|
|
50
|
+
min-width: 11.9rem;
|
|
51
|
+
flex-direction: column;
|
|
52
|
+
align-items: flex-start;
|
|
53
|
+
gap: var(--spacing-4xl, 2rem);
|
|
54
|
+
flex: 1 0 0;
|
|
55
|
+
|
|
56
|
+
.dga-footer-nav-group {
|
|
57
|
+
width: 100%;
|
|
10
58
|
}
|
|
11
59
|
}
|
|
12
|
-
|
|
60
|
+
|
|
61
|
+
.dga-footer-meta {
|
|
62
|
+
display: flex;
|
|
63
|
+
padding: var(--spacing-xl, 1rem) 0;
|
|
64
|
+
align-items: center;
|
|
65
|
+
gap: var(--spacing-3xl, 1.5rem);
|
|
66
|
+
align-self: stretch;
|
|
67
|
+
|
|
68
|
+
.dga-footer-copyright-container {
|
|
13
69
|
display: flex;
|
|
14
|
-
gap: 2rem;
|
|
15
70
|
flex-direction: column;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
& > div {
|
|
20
|
-
flex: 1;
|
|
21
|
-
}
|
|
71
|
+
align-items: flex-start;
|
|
72
|
+
gap: var(--spacing-md, 0.5rem);
|
|
73
|
+
align-self: stretch;
|
|
22
74
|
}
|
|
23
75
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
76
|
+
.dga-footer-meta-content {
|
|
77
|
+
display: flex;
|
|
78
|
+
flex-direction: column;
|
|
79
|
+
align-items: flex-start;
|
|
80
|
+
gap: var(--spacing-5xl, 2.5rem);
|
|
81
|
+
flex: 1 0 0;
|
|
82
|
+
}
|
|
28
83
|
|
|
29
|
-
.dga-footer-
|
|
84
|
+
.dga-footer-meta-links {
|
|
30
85
|
display: flex;
|
|
86
|
+
align-items: flex-start;
|
|
87
|
+
align-content: flex-start;
|
|
88
|
+
gap: 1rem var(--spacing-xl, 1rem);
|
|
89
|
+
align-self: stretch;
|
|
31
90
|
flex-wrap: wrap;
|
|
32
|
-
gap: 1rem;
|
|
33
|
-
margin-bottom: 2.5rem;
|
|
34
91
|
}
|
|
35
|
-
|
|
36
92
|
|
|
37
93
|
.dga-footer-copyright {
|
|
38
|
-
|
|
94
|
+
font-size: var(--Size-Text-typo-size-text-sm, 0.875rem);
|
|
95
|
+
font-style: normal;
|
|
96
|
+
font-weight: 600;
|
|
97
|
+
line-height: var(--Line-Height-Text-line-heights-text-sm, 1.25rem);
|
|
39
98
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
flex-wrap: wrap;
|
|
43
|
-
gap: 1rem;
|
|
99
|
+
margin-bottom: 0;
|
|
100
|
+
}
|
|
44
101
|
|
|
45
|
-
|
|
102
|
+
.dga-footer-legal-links {
|
|
103
|
+
display: flex;
|
|
104
|
+
align-items: flex-start;
|
|
105
|
+
align-content: flex-start;
|
|
106
|
+
gap: 1rem var(--spacing-xl, 1rem);
|
|
107
|
+
flex-wrap: wrap;
|
|
46
108
|
}
|
|
47
109
|
|
|
48
|
-
.dga-logo
|
|
110
|
+
.dga-footer-logo {
|
|
49
111
|
display: flex;
|
|
50
|
-
gap: 1rem;
|
|
51
112
|
justify-content: flex-end;
|
|
52
|
-
|
|
113
|
+
align-items: center;
|
|
114
|
+
gap: var(--spacing-xl, 1rem);
|
|
53
115
|
}
|
|
54
116
|
|
|
55
117
|
}
|
|
56
|
-
}
|
|
57
118
|
|
|
58
|
-
@media (max-width: $tablet) {
|
|
59
|
-
|
|
60
|
-
|
|
119
|
+
@media (max-width: $tablet) {
|
|
120
|
+
.dga-footer-social {
|
|
121
|
+
padding: var(--spacing-xl, 1rem) 0;
|
|
122
|
+
gap: var(--spacing-5xl, 2.5rem);
|
|
123
|
+
flex-basis: 100%;
|
|
61
124
|
flex-direction: row;
|
|
62
125
|
flex-wrap: wrap;
|
|
63
126
|
}
|
|
64
|
-
|
|
65
|
-
|
|
127
|
+
|
|
128
|
+
.dga-footer-content {
|
|
129
|
+
gap: 2.5;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
.dga-footer-meta {
|
|
133
|
+
flex-direction: column;
|
|
134
|
+
|
|
135
|
+
.dga-footer-meta-content {
|
|
136
|
+
flex-direction: column;
|
|
66
137
|
justify-content: center;
|
|
67
|
-
|
|
138
|
+
align-items: center;
|
|
139
|
+
gap: var(--spacing-4xl, 4rem);
|
|
68
140
|
}
|
|
69
|
-
.dga-footer-copyright {
|
|
70
|
-
text-align: center;
|
|
71
|
-
padding: 2rem 0;
|
|
72
141
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
142
|
+
.dga-footer-meta-links {
|
|
143
|
+
justify-content: center;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
.dga-footer-copyright-container {
|
|
147
|
+
flex-direction: column;
|
|
148
|
+
justify-content: center;
|
|
149
|
+
align-items: center;
|
|
150
|
+
gap: var(--spacing-md, 0.5rem);
|
|
76
151
|
}
|
|
77
152
|
|
|
78
|
-
.dga-logo
|
|
153
|
+
.dga-footer-logo {
|
|
154
|
+
width: 100%;
|
|
79
155
|
justify-content: space-between;
|
|
156
|
+
margin-top: 1rem;
|
|
80
157
|
}
|
|
81
158
|
}
|
|
82
159
|
}
|
|
@@ -6,8 +6,26 @@
|
|
|
6
6
|
// Global button focus styling - applies to all button variants
|
|
7
7
|
*:focus-visible {
|
|
8
8
|
outline-offset: 2px !important;
|
|
9
|
-
outline: 2px solid
|
|
10
|
-
|
|
9
|
+
outline: 2px solid $black !important;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.on-primary {
|
|
13
|
+
background-color: $primary-900;
|
|
14
|
+
color: $white;
|
|
15
|
+
|
|
16
|
+
--#{$prefix}body-bg: #{$primary-900};
|
|
17
|
+
--#{$prefix}body-color: #{$white};
|
|
18
|
+
--#{$prefix}text-muted: #{rgba($white, 0.8)};
|
|
19
|
+
--#{$prefix}border-color: #{rgba($white, 0.3)};
|
|
20
|
+
|
|
21
|
+
*:focus-visible {
|
|
22
|
+
outline-color: $white !important;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.list-unstyled {
|
|
27
|
+
padding-left: unset;
|
|
28
|
+
padding-right: unset;
|
|
11
29
|
}
|
|
12
30
|
|
|
13
31
|
// ============================================
|
|
@@ -14,58 +14,34 @@ $link-variants: (
|
|
|
14
14
|
hover-decoration: rgba($primary-400, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
15
15
|
active: rgba($primary-300, var(--#{$prefix}link-opacity, 1)),
|
|
16
16
|
active-decoration: rgba($primary-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
|
|
17
|
-
"secondary": (
|
|
18
|
-
base: rgba($secondary-600, var(--#{$prefix}link-opacity, 1)),
|
|
19
|
-
base-decoration: rgba($secondary-600, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
20
|
-
hover: rgba($secondary-400, var(--#{$prefix}link-opacity, 1)),
|
|
21
|
-
hover-decoration: rgba($secondary-400, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
22
|
-
active: rgba($secondary-300, var(--#{$prefix}link-opacity, 1)),
|
|
23
|
-
active-decoration: rgba($secondary-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
|
|
24
|
-
"success": (
|
|
25
|
-
base: rgba($success-600, var(--#{$prefix}link-opacity, 1)),
|
|
26
|
-
base-decoration: rgba($success-600, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
27
|
-
hover: rgba($success-400, var(--#{$prefix}link-opacity, 1)),
|
|
28
|
-
hover-decoration: rgba($success-400, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
29
|
-
active: rgba($success-300, var(--#{$prefix}link-opacity, 1)),
|
|
30
|
-
active-decoration: rgba($success-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
|
|
31
|
-
"danger": (
|
|
32
|
-
base: rgba($danger-600, var(--#{$prefix}link-opacity, 1)),
|
|
33
|
-
base-decoration: rgba($danger-600, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
34
|
-
hover: rgba($danger-400, var(--#{$prefix}link-opacity, 1)),
|
|
35
|
-
hover-decoration: rgba($danger-400, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
36
|
-
active: rgba($danger-300, var(--#{$prefix}link-opacity, 1)),
|
|
37
|
-
active-decoration: rgba($danger-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
|
|
38
|
-
"warning": (
|
|
39
|
-
base: rgba($warning-600, var(--#{$prefix}link-opacity, 1)),
|
|
40
|
-
base-decoration: rgba($warning-600, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
41
|
-
hover: rgba($warning-400, var(--#{$prefix}link-opacity, 1)),
|
|
42
|
-
hover-decoration: rgba($warning-400, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
43
|
-
active: rgba($warning-300, var(--#{$prefix}link-opacity, 1)),
|
|
44
|
-
active-decoration: rgba($warning-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
|
|
45
|
-
"info": (
|
|
46
|
-
base: rgba($info-600, var(--#{$prefix}link-opacity, 1)),
|
|
47
|
-
base-decoration: rgba($info-600, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
48
|
-
hover: rgba($info-400, var(--#{$prefix}link-opacity, 1)),
|
|
49
|
-
hover-decoration: rgba($info-400, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
50
|
-
active: rgba($info-300, var(--#{$prefix}link-opacity, 1)),
|
|
51
|
-
active-decoration: rgba($info-300, var(--#{$prefix}link-decoration-opacity, 1)) ),
|
|
52
17
|
"neutral": (
|
|
53
18
|
base: rgba($neutral-700, var(--#{$prefix}link-opacity, 1)),
|
|
54
19
|
base-decoration: rgba($neutral-700, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
55
20
|
hover: rgba($neutral-500, var(--#{$prefix}link-opacity, 1)),
|
|
56
21
|
hover-decoration: rgba($neutral-500, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
57
22
|
active: rgba($neutral-400, var(--#{$prefix}link-opacity, 1)),
|
|
58
|
-
active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)) )
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
23
|
+
active-decoration: rgba($neutral-400, var(--#{$prefix}link-decoration-opacity, 1)) )
|
|
24
|
+
);
|
|
25
|
+
|
|
26
|
+
$on-primary-link-variants: (
|
|
27
|
+
"primary": (
|
|
28
|
+
base: rgba($white, var(--#{$prefix}link-opacity, 1)),
|
|
29
|
+
base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
30
|
+
hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
|
|
31
|
+
hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
|
|
32
|
+
active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
|
|
33
|
+
active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)) ),
|
|
34
|
+
"neutral": (
|
|
35
|
+
base: rgba($white, var(--#{$prefix}link-opacity, 1)),
|
|
36
|
+
base-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 1)),
|
|
37
|
+
hover: rgba($white, var(--#{$prefix}link-opacity, 0.8)),
|
|
38
|
+
hover-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.8)),
|
|
39
|
+
active: rgba($white, var(--#{$prefix}link-opacity, 0.6)),
|
|
40
|
+
active-decoration: rgba($white, var(--#{$prefix}link-decoration-opacity, 0.6)) )
|
|
66
41
|
);
|
|
67
42
|
|
|
68
43
|
// Generate link variant classes
|
|
44
|
+
|
|
69
45
|
@each $name, $colors in $link-variants {
|
|
70
46
|
.link-#{$name} {
|
|
71
47
|
color: map-get($colors, base) !important;
|
|
@@ -90,10 +66,35 @@ $link-variants: (
|
|
|
90
66
|
}
|
|
91
67
|
}
|
|
92
68
|
|
|
69
|
+
.on-primary {
|
|
70
|
+
@each $name, $colors in $on-primary-link-variants {
|
|
71
|
+
.link-#{$name} {
|
|
72
|
+
color: map-get($colors, base) !important;
|
|
73
|
+
text-decoration-color: map-get($colors, base-decoration) !important;
|
|
74
|
+
|
|
75
|
+
&:visited,
|
|
76
|
+
&:focus-visible {
|
|
77
|
+
color: map-get($colors, base) !important;
|
|
78
|
+
text-decoration-color: map-get($colors, base-decoration) !important;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
&:hover,
|
|
82
|
+
&:focus {
|
|
83
|
+
color: map-get($colors, hover) !important;
|
|
84
|
+
text-decoration-color: map-get($colors, hover-decoration) !important;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&:active {
|
|
88
|
+
color: map-get($colors, active) !important;
|
|
89
|
+
text-decoration-color: map-get($colors, active-decoration) !important;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
|
|
93
95
|
a.disabled {
|
|
94
96
|
color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
|
|
95
97
|
text-decoration-color: rgba($gray-400, var(--#{$prefix}link-opacity, 1)) !important;
|
|
96
|
-
|
|
97
98
|
pointer-events: none;
|
|
98
99
|
}
|
|
99
100
|
|
|
@@ -86,7 +86,6 @@ $toast-variants: (
|
|
|
86
86
|
gap: .75rem;
|
|
87
87
|
|
|
88
88
|
.btn-close {
|
|
89
|
-
padding: 0.5rem;
|
|
90
89
|
position: absolute;
|
|
91
90
|
top: 1rem;
|
|
92
91
|
right: unset;
|
|
@@ -183,19 +182,19 @@ $toast-variants: (
|
|
|
183
182
|
margin-inline-start: 0;
|
|
184
183
|
|
|
185
184
|
button {
|
|
186
|
-
--#{$prefix}btn-color: #{$
|
|
187
|
-
--#{$prefix}btn-bg: #{$
|
|
188
|
-
--#{$prefix}btn-border-color: #{$
|
|
189
|
-
--#{$prefix}btn-hover-color: #{$
|
|
190
|
-
--#{$prefix}btn-hover-bg: #{$
|
|
191
|
-
--#{$prefix}btn-hover-border-color: #{$
|
|
192
|
-
--#{$prefix}btn-focus-shadow-rgb:
|
|
193
|
-
--#{$prefix}btn-active-color: #{$
|
|
194
|
-
--#{$prefix}btn-active-bg: #{$
|
|
195
|
-
--#{$prefix}btn-active-border-color: #{$
|
|
196
|
-
--#{$prefix}btn-disabled-color: #{$
|
|
197
|
-
--#{$prefix}btn-disabled-bg: #{$
|
|
198
|
-
--#{$prefix}btn-disabled-border-color: #{$
|
|
185
|
+
--#{$prefix}btn-color: #{$black};
|
|
186
|
+
--#{$prefix}btn-bg: #{$secondary-100};
|
|
187
|
+
--#{$prefix}btn-border-color: #{$secondary-100};
|
|
188
|
+
--#{$prefix}btn-hover-color: #{$black};
|
|
189
|
+
--#{$prefix}btn-hover-bg: #{$secondary-200};
|
|
190
|
+
--#{$prefix}btn-hover-border-color: #{$secondary-200};
|
|
191
|
+
--#{$prefix}btn-focus-shadow-rgb: null;
|
|
192
|
+
--#{$prefix}btn-active-color: #{$black};
|
|
193
|
+
--#{$prefix}btn-active-bg: #{$secondary-200};
|
|
194
|
+
--#{$prefix}btn-active-border-color: #{$secondary-200};
|
|
195
|
+
--#{$prefix}btn-disabled-color: #{$secondary-400};
|
|
196
|
+
--#{$prefix}btn-disabled-bg: #{$secondary-200};
|
|
197
|
+
--#{$prefix}btn-disabled-border-color: #{$secondary-200};
|
|
199
198
|
}
|
|
200
199
|
}
|
|
201
200
|
}
|
package/theme/dga-ui.scss
CHANGED
|
@@ -15,8 +15,8 @@
|
|
|
15
15
|
// ============================================
|
|
16
16
|
|
|
17
17
|
// Import all component customizations
|
|
18
|
-
@import './customizations/links';
|
|
19
18
|
@import './customizations/global';
|
|
19
|
+
@import './customizations/links';
|
|
20
20
|
@import './customizations/buttons';
|
|
21
21
|
@import './customizations/cards';
|
|
22
22
|
@import './customizations/alerts';
|
|
@@ -25,5 +25,4 @@
|
|
|
25
25
|
@import './customizations/forms';
|
|
26
26
|
@import './customizations/forms-switch';
|
|
27
27
|
@import './customizations/tables';
|
|
28
|
-
@import './customizations/contexts';
|
|
29
28
|
@import './customizations/footer';
|
|
@@ -1,204 +0,0 @@
|
|
|
1
|
-
<!-- Context-Aware Theming Demo -->
|
|
2
|
-
<div class="container py-5">
|
|
3
|
-
<h1 class="mb-5">Context-Aware Theming System</h1>
|
|
4
|
-
<p class="lead mb-5">
|
|
5
|
-
Components automatically adapt their colors based on the background context.
|
|
6
|
-
Simply wrap content in context classes like <code>.on-primary</code>, <code>.on-dark</code>, etc.
|
|
7
|
-
</p>
|
|
8
|
-
|
|
9
|
-
<!-- Default Context (Light Background) -->
|
|
10
|
-
<section class="mb-5">
|
|
11
|
-
<h2>Default Context</h2>
|
|
12
|
-
<div class="p-4 border rounded">
|
|
13
|
-
<p class="mb-3">This is the default light background context.</p>
|
|
14
|
-
<div class="d-flex gap-2 mb-3">
|
|
15
|
-
<button class="btn btn-primary">Primary Button</button>
|
|
16
|
-
<button class="btn btn-secondary">Secondary Button</button>
|
|
17
|
-
<button class="btn btn-outline-primary">Outline Button</button>
|
|
18
|
-
</div>
|
|
19
|
-
<p class="mb-2">
|
|
20
|
-
<a href="#" class="me-3">Regular Link</a>
|
|
21
|
-
<a href="#" class="link-primary">Primary Link</a>
|
|
22
|
-
</p>
|
|
23
|
-
<input type="text" class="form-control" placeholder="Input field">
|
|
24
|
-
</div>
|
|
25
|
-
</section>
|
|
26
|
-
|
|
27
|
-
<!-- On Primary Context -->
|
|
28
|
-
<section class="mb-5">
|
|
29
|
-
<h2>On Primary Context</h2>
|
|
30
|
-
<div class="on-primary p-4 rounded context-section">
|
|
31
|
-
<h3>Content on Primary Background</h3>
|
|
32
|
-
<p class="mb-3">All components automatically adapt to white/light colors for better contrast.</p>
|
|
33
|
-
<div class="d-flex gap-2 mb-3">
|
|
34
|
-
<button class="btn btn-primary">Primary Button</button>
|
|
35
|
-
<button class="btn btn-secondary">Secondary Button</button>
|
|
36
|
-
<button class="btn btn-outline-primary">Outline Button</button>
|
|
37
|
-
</div>
|
|
38
|
-
<p class="mb-3">
|
|
39
|
-
<a href="#" class="me-3">Regular Link</a>
|
|
40
|
-
<span class="text-muted">Muted text adapts too</span>
|
|
41
|
-
</p>
|
|
42
|
-
<input type="text" class="form-control" placeholder="Input field adapts">
|
|
43
|
-
|
|
44
|
-
<div class="card mt-3 on-light">
|
|
45
|
-
<div class="card-body">
|
|
46
|
-
<h5 class="card-title">Card in Primary Context</h5>
|
|
47
|
-
<p class="card-text">Cards have subtle transparency to blend with the background.</p>
|
|
48
|
-
</div>
|
|
49
|
-
</div>
|
|
50
|
-
</div>
|
|
51
|
-
</section>
|
|
52
|
-
|
|
53
|
-
<!-- On Dark Context -->
|
|
54
|
-
<section class="mb-5">
|
|
55
|
-
<h2>On Dark Context</h2>
|
|
56
|
-
<div class="on-dark p-4 rounded context-section">
|
|
57
|
-
<h3>Content on Dark Background</h3>
|
|
58
|
-
<p class="mb-3">Perfect for dark mode or dark sections. All components adapt automatically.</p>
|
|
59
|
-
<div class="d-flex gap-2 mb-3">
|
|
60
|
-
<button class="btn btn-primary">Primary Button</button>
|
|
61
|
-
<button class="btn btn-secondary">Secondary Button</button>
|
|
62
|
-
<button class="btn btn-outline-primary">Outline Button</button>
|
|
63
|
-
</div>
|
|
64
|
-
<p class="mb-3">
|
|
65
|
-
<a href="#" class="me-3">Regular Link</a>
|
|
66
|
-
<span class="text-muted">Muted text is readable</span>
|
|
67
|
-
</p>
|
|
68
|
-
<input type="text" class="form-control mb-3" placeholder="Form fields work great">
|
|
69
|
-
<select class="form-select">
|
|
70
|
-
<option>Select options adapt too</option>
|
|
71
|
-
<option>Option 2</option>
|
|
72
|
-
</select>
|
|
73
|
-
</div>
|
|
74
|
-
</section>
|
|
75
|
-
|
|
76
|
-
<!-- On Danger Context -->
|
|
77
|
-
<section class="mb-5">
|
|
78
|
-
<h2>On Danger Context</h2>
|
|
79
|
-
<div class="on-danger p-4 rounded context-section">
|
|
80
|
-
<h3>Critical Alerts or Warnings</h3>
|
|
81
|
-
<p class="mb-3">Use for error states, critical warnings, or important notices.</p>
|
|
82
|
-
<div class="d-flex gap-2 mb-3">
|
|
83
|
-
<button class="btn btn-primary">Primary Action</button>
|
|
84
|
-
<button class="btn btn-secondary">Secondary Action</button>
|
|
85
|
-
<button class="btn btn-outline-primary">Outline Action</button>
|
|
86
|
-
</div>
|
|
87
|
-
<div class="alert alert-warning mb-0">
|
|
88
|
-
<strong>Warning!</strong> Even alerts adapt to the context.
|
|
89
|
-
</div>
|
|
90
|
-
</div>
|
|
91
|
-
</section>
|
|
92
|
-
|
|
93
|
-
<!-- On Success Context -->
|
|
94
|
-
<section class="mb-5">
|
|
95
|
-
<h2>On Success Context</h2>
|
|
96
|
-
<div class="on-success p-4 rounded context-section">
|
|
97
|
-
<h3>Success Messages or Confirmation</h3>
|
|
98
|
-
<p class="mb-3">Perfect for success states, completed actions, or positive feedback.</p>
|
|
99
|
-
<div class="d-flex gap-2 mb-3">
|
|
100
|
-
<button class="btn btn-primary">Continue</button>
|
|
101
|
-
<button class="btn btn-outline-primary">View Details</button>
|
|
102
|
-
</div>
|
|
103
|
-
<p class="mb-0">
|
|
104
|
-
<a href="#">Learn more about this success</a>
|
|
105
|
-
</p>
|
|
106
|
-
</div>
|
|
107
|
-
</section>
|
|
108
|
-
|
|
109
|
-
<!-- On Warning Context -->
|
|
110
|
-
<section class="mb-5">
|
|
111
|
-
<h2>On Warning Context</h2>
|
|
112
|
-
<div class="on-warning p-4 rounded context-section">
|
|
113
|
-
<h3>Warning or Attention Needed</h3>
|
|
114
|
-
<p class="mb-3">Note: Uses dark text for better contrast on yellow/warning background.</p>
|
|
115
|
-
<div class="d-flex gap-2 mb-3">
|
|
116
|
-
<button class="btn btn-primary">Take Action</button>
|
|
117
|
-
<button class="btn btn-secondary">Dismiss</button>
|
|
118
|
-
</div>
|
|
119
|
-
<input type="text" class="form-control" placeholder="Dark text on warning background">
|
|
120
|
-
</div>
|
|
121
|
-
</section>
|
|
122
|
-
|
|
123
|
-
<!-- On Light Context -->
|
|
124
|
-
<section class="mb-5">
|
|
125
|
-
<h2>On Light Context</h2>
|
|
126
|
-
<div class="on-light p-4 rounded context-section">
|
|
127
|
-
<h3>Subtle Light Background</h3>
|
|
128
|
-
<p class="mb-3">Slightly different from default - useful for sections, sidebars, or panels.</p>
|
|
129
|
-
<div class="d-flex gap-2 mb-3">
|
|
130
|
-
<button class="btn btn-primary">Primary Button</button>
|
|
131
|
-
<button class="btn btn-secondary">Secondary Button</button>
|
|
132
|
-
<button class="btn btn-outline-primary">Outline Button</button>
|
|
133
|
-
</div>
|
|
134
|
-
<p class="mb-3">
|
|
135
|
-
<a href="#">Links maintain primary color</a>
|
|
136
|
-
<span class="text-muted ms-3">Muted text for less emphasis</span>
|
|
137
|
-
</p>
|
|
138
|
-
<div class="row g-2">
|
|
139
|
-
<div class="col">
|
|
140
|
-
<input type="text" class="form-control" placeholder="First name">
|
|
141
|
-
</div>
|
|
142
|
-
<div class="col">
|
|
143
|
-
<input type="text" class="form-control" placeholder="Last name">
|
|
144
|
-
</div>
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
</section>
|
|
148
|
-
|
|
149
|
-
<!-- Nested Contexts Example -->
|
|
150
|
-
<section class="mb-5">
|
|
151
|
-
<h2>Nested Contexts</h2>
|
|
152
|
-
<div class="on-primary p-4 rounded">
|
|
153
|
-
<h3>Primary Background</h3>
|
|
154
|
-
<p class="mb-3">You can nest different contexts for complex layouts.</p>
|
|
155
|
-
<button class="btn btn-primary me-2">Button on Primary</button>
|
|
156
|
-
|
|
157
|
-
<div class="on-light p-3 rounded mt-3">
|
|
158
|
-
<h4>Light Context Inside Primary</h4>
|
|
159
|
-
<p class="mb-2">This light section is nested inside the primary background.</p>
|
|
160
|
-
<button class="btn btn-primary">Button on Light</button>
|
|
161
|
-
</div>
|
|
162
|
-
</div>
|
|
163
|
-
</section>
|
|
164
|
-
|
|
165
|
-
<!-- Usage Guide -->
|
|
166
|
-
<section class="mt-5 p-4 bg-light rounded">
|
|
167
|
-
<h2>How to Use</h2>
|
|
168
|
-
<div class="row">
|
|
169
|
-
<div class="col-md-6">
|
|
170
|
-
<h4>Available Context Classes:</h4>
|
|
171
|
-
<ul>
|
|
172
|
-
<li><code>.on-primary</code> - White text on primary color</li>
|
|
173
|
-
<li><code>.on-dark</code> - White text on dark background</li>
|
|
174
|
-
<li><code>.on-danger</code> - White text on danger/error color</li>
|
|
175
|
-
<li><code>.on-success</code> - White text on success color</li>
|
|
176
|
-
<li><code>.on-warning</code> - Dark text on warning color</li>
|
|
177
|
-
<li><code>.on-light</code> - Dark text on light background</li>
|
|
178
|
-
</ul>
|
|
179
|
-
</div>
|
|
180
|
-
<div class="col-md-6">
|
|
181
|
-
<h4>What Adapts Automatically:</h4>
|
|
182
|
-
<ul>
|
|
183
|
-
<li>✅ Buttons (all variants)</li>
|
|
184
|
-
<li>✅ Links</li>
|
|
185
|
-
<li>✅ Form inputs and selects</li>
|
|
186
|
-
<li>✅ Text colors</li>
|
|
187
|
-
<li>✅ Border colors</li>
|
|
188
|
-
<li>✅ Cards and alerts</li>
|
|
189
|
-
<li>✅ Tables and badges</li>
|
|
190
|
-
</ul>
|
|
191
|
-
</div>
|
|
192
|
-
</div>
|
|
193
|
-
|
|
194
|
-
<div class="mt-4">
|
|
195
|
-
<h4>Example Code:</h4>
|
|
196
|
-
<pre class="bg-dark text-white p-3 rounded"><code><div class="on-primary p-4">
|
|
197
|
-
<h3>Content adapts automatically</h3>
|
|
198
|
-
<button class="btn btn-primary">Primary Button</button>
|
|
199
|
-
<a href="#">Link</a>
|
|
200
|
-
<input type="text" class="form-control" placeholder="Input">
|
|
201
|
-
</div></code></pre>
|
|
202
|
-
</div>
|
|
203
|
-
</section>
|
|
204
|
-
</div>
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { Component, ChangeDetectionStrategy } from '@angular/core';
|
|
2
|
-
import { TranslateModule } from '@ngx-translate/core';
|
|
3
|
-
|
|
4
|
-
@Component({
|
|
5
|
-
selector: 'app-buttons',
|
|
6
|
-
imports: [TranslateModule],
|
|
7
|
-
templateUrl: './contexts.component.html',
|
|
8
|
-
changeDetection: ChangeDetectionStrategy.OnPush
|
|
9
|
-
})
|
|
10
|
-
export class ContextsComponent {}
|
|
File without changes
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
|
2
|
-
|
|
3
|
-
import { Footer } from './footer';
|
|
4
|
-
|
|
5
|
-
describe('Footer', () => {
|
|
6
|
-
let component: Footer;
|
|
7
|
-
let fixture: ComponentFixture<Footer>;
|
|
8
|
-
|
|
9
|
-
beforeEach(async () => {
|
|
10
|
-
await TestBed.configureTestingModule({
|
|
11
|
-
imports: [Footer]
|
|
12
|
-
})
|
|
13
|
-
.compileComponents();
|
|
14
|
-
|
|
15
|
-
fixture = TestBed.createComponent(Footer);
|
|
16
|
-
component = fixture.componentInstance;
|
|
17
|
-
await fixture.whenStable();
|
|
18
|
-
});
|
|
19
|
-
|
|
20
|
-
it('should create', () => {
|
|
21
|
-
expect(component).toBeTruthy();
|
|
22
|
-
});
|
|
23
|
-
});
|