@qrsln/lootstrap 22.2.7-beta.0 → 22.3.2-beta.0

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 (66) hide show
  1. package/Readme.md +6 -6
  2. package/dist/css/lootstrap.css +10309 -9749
  3. package/dist/css/lootstrap.css.map +1 -1
  4. package/dist/css/lootstrap.min.css +3 -3
  5. package/package.json +5 -1
  6. package/scss/Abstracts/Functions/_color-customized.scss +62 -0
  7. package/scss/Abstracts/Functions/_color.scss +108 -65
  8. package/scss/Abstracts/Functions/_helpers.scss +2 -2
  9. package/scss/Abstracts/Functions/_shadow.scss +4 -4
  10. package/scss/Abstracts/Mixins/_color.scss +126 -136
  11. package/scss/Abstracts/Mixins/_theme.scss +166 -0
  12. package/scss/Abstracts/_dir-functions.scss +1 -0
  13. package/scss/Abstracts/_dir-mixins.scss +1 -4
  14. package/scss/Abstracts/_variables.scss +96 -35
  15. package/scss/Architecture/Components/TODO/_tables.scss +3 -3
  16. package/scss/Architecture/Components/_alert.scss +51 -51
  17. package/scss/Architecture/Components/_breadcrumb.scss +11 -10
  18. package/scss/Architecture/Components/_button-close.scss +11 -2
  19. package/scss/Architecture/Components/_buttons.scss +22 -21
  20. package/scss/Architecture/Components/_calendar.scss +67 -55
  21. package/scss/Architecture/Components/_card.scss +9 -9
  22. package/scss/Architecture/Components/_caret.scss +11 -11
  23. package/scss/Architecture/Components/_dialog.scss +10 -7
  24. package/scss/Architecture/Components/_list.scss +13 -13
  25. package/scss/Architecture/Components/_nav.scss +14 -12
  26. package/scss/Architecture/Components/_pagination.scss +9 -8
  27. package/scss/Architecture/Components/_progress.scss +6 -5
  28. package/scss/Architecture/Components/_rating.scss +15 -14
  29. package/scss/Architecture/Components/_scrollbar.scss +59 -29
  30. package/scss/Architecture/Components/_spinners.scss +0 -1
  31. package/scss/Architecture/Components/_timeline.scss +6 -5
  32. package/scss/Architecture/Components/_timer.scss +5 -4
  33. package/scss/Architecture/Components/_toasts.scss +23 -22
  34. package/scss/Architecture/Components/_tooltip.scss +11 -11
  35. package/scss/Architecture/Components/_tree-view.scss +13 -12
  36. package/scss/Architecture/Forms/_form-check.scss +82 -81
  37. package/scss/Architecture/Forms/_input-fields.scss +36 -37
  38. package/scss/Architecture/Forms/_selects.scss +3 -1
  39. package/scss/Architecture/{_anim.scss → Roots/_anim.scss} +0 -0
  40. package/scss/Architecture/Roots/_avatar.scss +296 -0
  41. package/scss/Architecture/Roots/_classified.scss +67 -0
  42. package/scss/Architecture/{_reboot.scss → Roots/_reboot.scss} +6 -9
  43. package/scss/Architecture/Roots/_root.scss +49 -0
  44. package/scss/Architecture/Roots/_shape.scss +92 -0
  45. package/scss/Architecture/Roots/_skeleton.scss +271 -0
  46. package/scss/Architecture/{Svg/_icons.scss → Roots/_svg.scss} +0 -0
  47. package/scss/Architecture/Utils/_border.scss +3 -1
  48. package/scss/Architecture/Utils/_color.scss +71 -88
  49. package/scss/Architecture/Utils/_filters.scss +1 -0
  50. package/scss/Architecture/Utils/_spacing.scss +7 -21
  51. package/scss/Architecture/Utils/_text.scss +42 -109
  52. package/scss/Architecture/Utils/_utilities.scss +55 -15
  53. package/scss/Architecture/__color-scheme.scss +80 -0
  54. package/scss/Architecture/__dir-components.scss +3 -5
  55. package/scss/Architecture/__dir-roots.scss +17 -0
  56. package/scss/Architecture/_theme.scss +2 -1
  57. package/scss/_header.scss +2 -2
  58. package/scss/lootstrap.scss +2 -5
  59. package/dist/css/test.css +0 -275
  60. package/dist/css/test.css.map +0 -1
  61. package/scss/Architecture/Components/_themed.scss +0 -57
  62. package/scss/Architecture/__dir-svg.scss +0 -7
  63. package/scss/Architecture/__theme-colors.scss +0 -51
  64. package/scss/Architecture/__theme-customized.scss +0 -51
  65. package/scss/Architecture/_root.scss +0 -45
  66. package/scss/test.scss +0 -37
package/scss/Architecture/Components/_button-close.scss CHANGED
@@ -25,10 +25,14 @@ $svg-cross-2-64: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
25
25
  color: transparent;
26
26
  cursor: pointer;
27
27
 
28
- &:hover {
28
+ &:not(:disabled):not(.Disabled):hover {
29
29
  opacity: 1;
30
30
  text-decoration: none;
31
31
  }
32
+
33
+ &:disabled, &.Disabled {
34
+ cursor: default;
35
+ }
32
36
  }
33
37
 
34
38
  .Btn-close-2nd {
@@ -54,10 +58,15 @@ $svg-cross-2-64: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53
54
58
  cursor: pointer;
55
59
  vertical-align: middle;
56
60
 
57
- &:focus, &:hover {
61
+ &:not(:disabled):not(.Disabled):hover,
62
+ &:not(:disabled):not(.Disabled):focus {
58
63
  opacity: 1;
59
64
  }
60
65
 
66
+ &:disabled, &.Disabled {
67
+ cursor: default;
68
+ }
69
+
61
70
  &:before, &:after {
62
71
  content: " ";
63
72
  position: absolute;
package/scss/Architecture/Components/_buttons.scss CHANGED
@@ -3,19 +3,18 @@
3
3
  // ===========================================================================
4
4
  @use 'sass:math';
5
5
 
6
- $component-Name: $var-Prefix + 'btn-';
7
- @import "../_theme-customized";
6
+ $Customized: 'btn-';
7
+ @import "../_color-scheme";
8
8
 
9
9
  // Btn
10
10
  .Btn {
11
11
  position: relative;
12
12
  display: inline-block;
13
13
 
14
- color: $fg-Surface;
14
+ color: $Fg-surface;
15
15
  background-color: transparent;
16
16
 
17
- border: $Border-width solid transparent;
18
- //border: $Border;
17
+ border: 1px solid transparent;
19
18
  //box-shadow: $Shadow;
20
19
 
21
20
  //@extend .Btn-ripple;
@@ -43,8 +42,9 @@ $component-Name: $var-Prefix + 'btn-';
43
42
 
44
43
  .Btn-link {
45
44
  background: transparent;
46
- color: #3e64ff;
47
- border: none;
45
+ color: $Info;
46
+ //border: none;
47
+ border: $Border;
48
48
  box-shadow: none;
49
49
  padding: 0;
50
50
  }
@@ -88,35 +88,36 @@ $component-Name: $var-Prefix + 'btn-';
88
88
  */
89
89
 
90
90
  .Btn {
91
- &[class*='Btn-']:not([class*="Btn-outline-"]) {
92
- color: $fg-Darkest;
93
- background: $bg-Darkest;
91
+
92
+ &[class*='Btn-']:not([class*="Btn-link"]):not([class*="Btn-outline-"]) {
93
+ color: $Fg-accent;
94
+ background: $Bg-accent;
94
95
  border-color: $Border-color;
95
96
 
96
97
  &:hover, &:focus {
97
- color: $fg-Dark;
98
- background-color: $bg-Dark;
99
- border-color: $bg-Darkest;
98
+ color: $Fg-lighter;
99
+ background-color: $Bg-lighter;
100
+ border-color: $Bg-accent;
100
101
  }
101
102
 
102
103
  &.Ripple, &.Border-fx-draw, &.Border-fx-meet, &.Border-fx-center {
103
- --ls-effect-color: #{$fg-Dark};
104
+ --ls-effect-color: #{$Bg-accent};
104
105
  }
105
106
  }
106
107
 
107
108
  &[class*='Btn-outline-'] {
108
- color: $bg-Darkest;
109
+ color: $Bg-accent;
109
110
  background-color: inherit;
110
- border-color: $bg-Darkest;
111
+ border-color: $Bg-accent;
111
112
 
112
113
  &:hover {
113
- color: $fg-Dark;
114
- background-color: $bg-Dark;
115
- border-color: $bg-Darkest;
114
+ color: $Fg-lighter;
115
+ background-color: $Bg-lighter;
116
+ //border-color: $Bg-accent;
116
117
  }
117
118
 
118
119
  &.Ripple, &.Border-fx-draw, &.Border-fx-meet, &.Border-fx-center {
119
- --ls-effect-color: #{$fg-Dark};
120
+ --ls-effect-color: #{$Bg-accent};
120
121
  }
121
122
  }
122
123
  }
@@ -128,7 +129,7 @@ $component-Name: $var-Prefix + 'btn-';
128
129
  */
129
130
 
130
131
  .Ripple {
131
- $color: var(--ls-effect-color, $fg-Active);
132
+ $color: var(--ls-effect-color, $Fg-accent);
132
133
  position: relative;
133
134
  overflow: hidden;
134
135
  //noinspection CssInvalidFunction
package/scss/Architecture/Components/_calendar.scss CHANGED
@@ -3,16 +3,16 @@
3
3
  // ST: With Specific Theme
4
4
  // ===========================================================================
5
5
 
6
- $component-Name: $var-Prefix + 'calendar-';
7
- @import "../_theme-customized";
6
+ $Customized: 'calendar-';
7
+ @import "../_color-scheme";
8
8
 
9
9
  .Calendar {
10
10
  display: block;
11
11
  position: relative;
12
12
  overflow: hidden;
13
13
 
14
- color: $fg-Surface;
15
- background-color: $bg-Surface;
14
+ color: $Fg-hue;
15
+ background-color: $Bg-hue;
16
16
 
17
17
  border: $Border;
18
18
  box-shadow: $Shadow;
@@ -21,119 +21,131 @@ $component-Name: $var-Prefix + 'calendar-';
21
21
 
22
22
  .Calendar-header {
23
23
  display: flex;
24
- padding: 10px 10px 0;
24
+ padding: 0 16px;
25
+ margin: 5px;
26
+
27
+ //color: $Fg-hue;
28
+ background-color: $Overlay-12;
25
29
 
26
30
  align-items: center; /* Vertical */
27
31
  justify-content: center; /* Horizontal */
28
32
 
29
- color: $fg-Darkest;
30
- background-color: $bg-Darkest;
31
-
32
- .Calendar-header-right {
33
- cursor: pointer;
33
+ .Calendar-arrow {
34
+ padding: 5px;
34
35
  font-size: 1.5rem;
35
36
  }
36
37
 
37
- .Calendar-title {
38
- flex: 1;
39
- cursor: pointer;
38
+ span {
40
39
  font-weight: bold;
41
40
  font-size: 1.2rem;
42
41
  }
42
+
43
+ span, .Calendar-arrow {
44
+ cursor: pointer;
45
+ }
43
46
  }
44
47
 
45
48
  .Calendar-body {
49
+ position: relative;
50
+ margin: 5px;
46
51
  padding: 0 10px 10px;
47
52
 
48
- .Calendar-row {
49
- display: flex;
53
+ color: $Fg-lighter;
54
+ background-color: $Bg-lighter;
55
+
56
+ .Row {
50
57
 
51
58
  &:first-child {
52
- color: $fg-Dark;
53
- background-color: $bg-Dark;
59
+ //color: $Fg-lighter;
60
+ //background-color: $Bg-lighter;
61
+ background-color: $Overlay-5;
62
+
63
+ font-size: .8rem;
64
+ border-bottom: 1px solid $Bg-hue;
54
65
 
55
66
  margin-left: -10px;
56
67
  margin-right: -10px;
57
68
  }
58
69
 
59
- .Calendar-dayNames {
60
- font-size: .8rem;
61
- border-bottom: $Border;
62
- }
63
-
64
- .Calendar-cell {
70
+ .Square {
65
71
  border: 1px solid transparent;
66
72
  border-radius: 50%;
67
73
 
68
- &.Square {
69
- margin-left: 0;
70
- margin-right: 0;
71
- }
74
+ margin-left: 0;
75
+ margin-right: 0;
72
76
 
73
- &.Cell-Disabled {
74
- color: $fg-Muted;
77
+ &.Cal-disabled {
78
+ color: $Fg-muted;
75
79
  }
76
80
 
77
- &.Cell-Available {
81
+ &.Cal-available {
78
82
  cursor: pointer;
79
83
  font-weight: normal;
80
84
 
81
85
  &:hover {
82
- border-color: $Border-color;
86
+ //color: $Fg-lighter;
87
+ //background-color: $Bg-lighter;
88
+ background-color: $Overlay-16;
83
89
 
84
- color: $fg-Dark;
85
- background-color: $bg-Dark;
90
+ border-color: $Border-color;
86
91
  }
87
92
  }
88
93
 
89
- &.Cell-Weekend {
94
+ &.Cal-weekend {
90
95
  font-weight: bold;
91
96
 
92
- color: $fg-Muted;
97
+ color: $Fg-muted;
93
98
  }
94
99
 
95
- &.Cell-Today {
100
+ &.Cal-today {
96
101
  border-color: $Border-color;
97
- color: $fg-Active;
98
- background-color: $bg-Active;
102
+
103
+ color: $Fg-accent;
104
+ background-color: $Bg-accent;
99
105
  }
100
106
 
101
- //&.Cell-SpecialDay { }
107
+ //&.Cal-special { }
108
+
109
+ &.Cal-available, &.Cal-ranged {
110
+ &.Cal-range-start, &.Cal-range-end {
111
+ //color: $Fg-hue;
112
+ //background-color: $Bg-hue;
113
+ color: $Fg-accent;
114
+ background-color: $Bg-accent;
102
115
 
103
- &.Cell-Available, &.Cell-Ranged {
104
- // Cell-selected = Cell-Range-start
105
- &.Cell-Range-start, &.Cell-Range-end {
106
- color: $fg-Darkest;
107
- background-color: $bg-Darkest;
116
+ border-color: $Border-color;
108
117
  }
109
118
  }
110
119
 
111
- // Cell-selected = Cell-Range-start
112
- &.Cell-Ranged {
120
+ // Cell-selected = Cal-range-start
121
+ &.Cal-ranged {
113
122
  border-radius: 0;
114
123
 
115
- &:not(.Cell-Range-start):not(.Cell-Range-end) {
116
- color: $fg-Lightest;
117
- background-color: $bg-Lightest;
124
+ &:not(.Cal-range-start):not(.Cal-range-end) {
125
+ color: $Fg-lightest;
126
+ background-color: $Bg-lightest;
127
+ //background-color: $Overlay-9;
118
128
 
119
129
  border-top-color: $Border-color;
120
130
  border-bottom-color: $Border-color;
121
131
 
122
- &.Cell-Available:hover {
123
- color: $fg-Dark;
124
- background-color: $bg-Dark;
132
+ &.Cal-available:hover {
133
+ //color: $Fg-lighter;
134
+ //background-color: $Bg-lighter;
135
+
136
+ background-color: $Overlay-16;
125
137
  }
126
138
  }
127
139
 
128
- &.Cell-Range-start {
140
+ &.Cal-range-start {
129
141
  border-radius: 50% 0 0 50%;
130
142
  }
131
143
 
132
- &.Cell-Range-end {
144
+ &.Cal-range-end {
133
145
  border-radius: 0 50% 50% 0;
134
146
  }
135
147
 
136
- &.Cell-Range-start.Cell-Range-end {
148
+ &.Cal-range-start.Cal-range-end {
137
149
  border-radius: 50%;
138
150
  }
139
151
  }
package/scss/Architecture/Components/_card.scss CHANGED
@@ -3,8 +3,8 @@
3
3
  // ST: With Specific Theme
4
4
  // ===========================================================================
5
5
 
6
- $component-Name: $var-Prefix + 'card-';
7
- @import "../_theme-customized";
6
+ $Customized: 'card-';
7
+ @import "../_color-scheme";
8
8
 
9
9
  $border-radius: .5rem;
10
10
 
@@ -13,8 +13,8 @@ $border-radius: .5rem;
13
13
  position: relative;
14
14
  overflow: visible;
15
15
 
16
- color: $fg-Surface;
17
- background-color: $bg-Surface;
16
+ color: $Fg-surface;
17
+ background-color: $Bg-surface;
18
18
 
19
19
  border: $Border;
20
20
  box-shadow: $Shadow;
@@ -38,8 +38,8 @@ $border-radius: .5rem;
38
38
  margin-bottom: 0;
39
39
 
40
40
  &.Card-header {
41
- color: $fg-Dark;
42
- background-color: $bg-Dark;
41
+ color: $Fg-accent;
42
+ background-color: $Bg-accent;
43
43
 
44
44
  border-bottom: $Border;
45
45
 
@@ -49,8 +49,8 @@ $border-radius: .5rem;
49
49
  }
50
50
 
51
51
  &.Card-footer {
52
- color: $fg-Lightest;
53
- background-color: $bg-Lightest;
52
+ color: $Fg-lighter;
53
+ background-color: $Bg-lighter;
54
54
  border-top: $Border;
55
55
  }
56
56
  }
@@ -65,7 +65,7 @@ $border-radius: .5rem;
65
65
  .Card-title {
66
66
  margin-bottom: .5rem;
67
67
 
68
- padding-left: .5rem;
68
+ //padding-left: .5rem;
69
69
  padding-right: .5rem;
70
70
 
71
71
  //background-color: $Component-bg-tertiary;
package/scss/Architecture/Components/_caret.scss CHANGED
@@ -3,8 +3,8 @@
3
3
  // ST: With Specific Theme
4
4
  // ===========================================================================
5
5
 
6
- $component-Name: $var-Prefix + 'caret-';
7
- @import "../_theme-customized";
6
+ $Customized: 'caret-';
7
+ @import "../_color-scheme";
8
8
 
9
9
  .Caret {
10
10
  position: relative;
@@ -27,7 +27,7 @@ $component-Name: $var-Prefix + 'caret-';
27
27
  }
28
28
  }
29
29
 
30
- .Caret-t, .Caret-b, .Caret-filled-t, .Caret-filled-b {
30
+ .Caret-t, .Caret-b, .Caret-deep-t, .Caret-deep-b {
31
31
  $caret-size: var(--caret-size, 10px);
32
32
 
33
33
  &:after {
@@ -39,7 +39,7 @@ $component-Name: $var-Prefix + 'caret-';
39
39
  }
40
40
  }
41
41
 
42
- .Caret-r, .Caret-l, .Caret-filled-r, .Caret-filled-l {
42
+ .Caret-r, .Caret-l, .Caret-deep-r, .Caret-deep-l {
43
43
  $caret-size: var(--caret-size, 10px);
44
44
 
45
45
  &:after {
@@ -57,7 +57,7 @@ $component-Name: $var-Prefix + 'caret-';
57
57
 
58
58
  // &:after is bg, &:before is border
59
59
  $caret-before-color: $Border-color;
60
- $caret-after-color: $bg-Surface;
60
+ $caret-after-color: $Bg-surface;
61
61
 
62
62
  .Caret-t {
63
63
  &:after {
@@ -109,14 +109,14 @@ $caret-after-color: $bg-Surface;
109
109
  }
110
110
 
111
111
  /*
112
- // Caret filled
112
+ // Caret deep
113
113
  */
114
114
 
115
115
  // &:after is bg, &:before is border
116
116
  $caret-before-color-fill: $Border-color;
117
- $caret-after-color-fill: $bg-Active;
117
+ $caret-after-color-fill: $Bg-accent;
118
118
 
119
- .Caret-filled-t {
119
+ .Caret-deep-t {
120
120
  &:after {
121
121
  bottom: 100%;
122
122
  border-color: transparent transparent $caret-after-color-fill transparent;
@@ -128,7 +128,7 @@ $caret-after-color-fill: $bg-Active;
128
128
  }
129
129
  }
130
130
 
131
- .Caret-filled-r {
131
+ .Caret-deep-r {
132
132
  &:after {
133
133
  left: 100%;
134
134
  border-color: transparent transparent transparent $caret-after-color-fill;
@@ -140,7 +140,7 @@ $caret-after-color-fill: $bg-Active;
140
140
  }
141
141
  }
142
142
 
143
- .Caret-filled-b {
143
+ .Caret-deep-b {
144
144
  &:after {
145
145
  top: 100%;
146
146
  border-color: $caret-after-color-fill transparent transparent transparent;
@@ -152,7 +152,7 @@ $caret-after-color-fill: $bg-Active;
152
152
  }
153
153
  }
154
154
 
155
- .Caret-filled-l {
155
+ .Caret-deep-l {
156
156
  &:after {
157
157
  right: 100%;
158
158
  border-color: transparent $caret-after-color-fill transparent transparent;
package/scss/Architecture/Components/_dialog.scss CHANGED
@@ -3,7 +3,8 @@
3
3
  // ST: With Specific Theme
4
4
  // ===========================================================================
5
5
 
6
- @import "../_theme-colors";
6
+ $Customized: false;
7
+ @import "../_color-scheme";
7
8
 
8
9
  .Dialog-container {
9
10
  &.IsModal {
@@ -25,8 +26,8 @@
25
26
  position: relative;
26
27
  overflow: hidden;
27
28
 
28
- color: $fg-Surface;
29
- background-color: $bg-Surface;
29
+ color: $Fg-surface;
30
+ background-color: $Bg-surface;
30
31
 
31
32
  border: $Border;
32
33
  box-shadow: $Shadow;
@@ -61,13 +62,15 @@
61
62
  padding: .5rem 1rem .5rem .5rem;
62
63
 
63
64
  &.Dialog-heading {
64
- color: $fg-Darkest;
65
- background-color: $bg-Darkest;
65
+ color: $Fg-hue;
66
+ background-color: $Bg-hue;
67
+ //color: $Fg-accent;
68
+ //background-color: $Bg-accent;
66
69
  }
67
70
 
68
71
  &.Dialog-footer {
69
- color: $fg-Lightest;
70
- background-color: $bg-Lightest;
72
+ color: $Fg-lighter;
73
+ background-color: $Bg-lighter;
71
74
 
72
75
  .Dialog-actions {
73
76
  margin-left: auto;
package/scss/Architecture/Components/_list.scss CHANGED
@@ -3,8 +3,8 @@
3
3
  // TS: Theme Support
4
4
  // ===========================================================================
5
5
 
6
- $component-Name: $var-Prefix + 'lst-';
7
- @import "../_theme-customized";
6
+ $Customized: 'lst-';
7
+ @import "../_color-scheme";
8
8
 
9
9
  $border-radius: 0.25rem;
10
10
 
@@ -109,13 +109,13 @@ $border-radius: 0.25rem;
109
109
  z-index: 1; // Place hover/focus items above their siblings for proper border styling
110
110
  text-decoration: none;
111
111
 
112
- color: $fg-Lightest;
113
- background-color: $bg-Lightest;
112
+ color: $Fg-lightest;
113
+ background-color: $Bg-lightest;
114
114
  }
115
115
 
116
116
  &:active {
117
- color: $fg-Dark;
118
- background-color: $bg-Dark;
117
+ color: $Fg-lighter;
118
+ background-color: $Bg-lighter;
119
119
  }
120
120
  }
121
121
 
@@ -131,21 +131,21 @@ $border-radius: 0.25rem;
131
131
  padding: 0.75rem 1.25rem;
132
132
  text-decoration: none;
133
133
 
134
- color: $fg-Surface;
135
- background-color: $bg-Surface;
134
+ color: $Fg-surface;
135
+ background-color: $Bg-surface;
136
136
  border: $Border;
137
137
 
138
138
  &.Disabled, &:disabled {
139
139
  pointer-events: none;
140
- color: $fg-Muted;
141
- background-color: $bg-Lightest;
140
+ color: $Fg-muted;
141
+ background-color: $Bg-lightest;
142
142
  }
143
143
 
144
144
  &.Active {
145
145
  z-index: 2; // Place active items above their siblings for proper border styling
146
146
 
147
- color: $fg-Active;
148
- background-color: $bg-Active;
149
- border-color: $bg-Active;
147
+ color: $Fg-accent;
148
+ background-color: $Bg-accent;
149
+ border-color: $Bg-accent;
150
150
  }
151
151
  }
package/scss/Architecture/Components/_nav.scss CHANGED
@@ -2,7 +2,8 @@
2
2
  // Components - Nav
3
3
  // ===========================================================================
4
4
 
5
- @import "../_theme-colors";
5
+ $Customized: false;
6
+ @import "../_color-scheme";
6
7
 
7
8
  .Nav {
8
9
  display: flex;
@@ -23,19 +24,20 @@
23
24
 
24
25
  &:hover,
25
26
  &:focus {
26
- color: $fg-Lightest;
27
- background-color: $bg-Lightest;
27
+ color: $Fg-lightest;
28
+ background-color: $Bg-lightest;
28
29
  }
29
30
 
30
31
  &.Active {
31
- color: $fg-Active;
32
- background-color: $bg-Active;
32
+ color: $Fg-accent;
33
+ background-color: $Bg-accent;
34
+
33
35
  //box-shadow: $Shadow;
34
36
  }
35
37
 
36
38
  // Disabled state lightens text
37
39
  &.Disabled {
38
- color: $fg-Muted;
40
+ color: $Fg-muted;
39
41
  pointer-events: none;
40
42
  cursor: default;
41
43
  }
@@ -60,7 +62,7 @@
60
62
  }
61
63
 
62
64
  &.Disabled {
63
- color: $fg-Muted;
65
+ color: $Fg-muted;
64
66
  background-color: transparent;
65
67
  border-color: transparent;
66
68
  }
@@ -68,9 +70,9 @@
68
70
 
69
71
  .Nav-link.Active,
70
72
  .Nav-item.Show .Nav-link {
71
- color: $fg-Surface;
72
- background-color: $bg-Surface;
73
- border-color: $Border-color $Border-color $bg-Surface;
73
+ color: $Fg-surface;
74
+ background-color: $Bg-surface;
75
+ border-color: $Border-color $Border-color $Bg-surface;
74
76
  }
75
77
  }
76
78
 
@@ -83,7 +85,7 @@
83
85
 
84
86
  .Nav-link.Active,
85
87
  .Show > .Nav-link {
86
- color: $fg-Active;
87
- background-color: $bg-Active;
88
+ color: $Fg-accent;
89
+ background-color: $Bg-accent;
88
90
  }
89
91
  }
package/scss/Architecture/Components/_pagination.scss CHANGED
@@ -3,7 +3,8 @@
3
3
  // TS: Theme Support
4
4
  // ===========================================================================
5
5
 
6
- @import "../_theme-colors";
6
+ $Customized: false;
7
+ @import "../_color-scheme";
7
8
 
8
9
  .Pagination {
9
10
  display: flex;
@@ -13,8 +14,8 @@
13
14
  align-items: center;
14
15
  justify-content: center;
15
16
 
16
- color: $fg-Surface;
17
- background-color: $bg-Surface;
17
+ color: $Fg-surface;
18
+ background-color: $Bg-surface;
18
19
 
19
20
  .Square {
20
21
  user-select: none; /* Standard */
@@ -41,17 +42,17 @@
41
42
  text-decoration: none;
42
43
  border-color: $Border-color;
43
44
 
44
- color: $fg-Dark;
45
- background-color: $bg-Dark;
45
+ color: $Fg-lighter;
46
+ background-color: $Bg-lighter;
46
47
  }
47
48
 
48
49
  &.Disabled {
49
- color: $fg-Muted;
50
+ color: $Fg-muted;
50
51
  }
51
52
 
52
53
  &.Active {
53
- color: $fg-Active;
54
- background-color: $bg-Active;
54
+ color: $Fg-accent;
55
+ background-color: $Bg-accent;
55
56
 
56
57
  border-color: transparent;
57
58