many changed, added nixos-hardware

modules/styling/config/scss/_common.scss

@@ -0,0 +1,234 @@
+// * {
+//     border: 1px solid $onSurfaceVariant; // Debugging
+// }
+
+// *:focus {
+//     outline: 1px solid mix($onSurface, $surface, 40%);
+//     -gtk-outline-radius: $rounding_small;
+// }
+
+* {
+    selection {
+        background-color: $secondary;
+        color: $onSecondary;
+    }
+
+    caret-color: $primary;
+}
+
+@keyframes appear {
+    from {
+        opacity: 0;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+menu {
+    @include elevation-border-softer;
+    padding: 0.681rem;
+    background: $surfaceVariant;
+    color: $onSurfaceVariant;
+    border-radius: 1.159rem;
+    -gtk-outline-radius: 1.159rem;
+
+    animation-name: appear;
+    animation-duration: 40ms;
+    animation-timing-function: ease-out;
+    animation-iteration-count: 1;
+}
+
+menubar>menuitem {
+    border-radius: 0.545rem;
+    -gtk-outline-radius: 0.545rem;
+    min-width: 13.636rem;
+    min-height: 2.727rem;
+}
+
+menu>menuitem {
+    padding: 0.4em 1.5rem;
+    background: transparent;
+    transition: 0.2s ease background;
+    border-radius: 0.545rem;
+    -gtk-outline-radius: 0.545rem;
+}
+
+menu>menuitem:hover,
+menu>menuitem:focus {
+    background-color: mix($surfaceVariant, $onSurfaceVariant, 90%);
+}
+
+menu>menuitem:active {
+    background-color: mix($surfaceVariant, $onSurfaceVariant, 80%);
+}
+
+radio {
+    @include full-rounding;
+    margin: 0.273rem;
+    min-width: 15px;
+    min-height: 15px;
+    border: 0.068rem solid $outline;
+}
+
+// radio:first-child {
+//     background-color: red;
+// }
+
+radio:checked {
+    min-width: 8px;
+    min-height: 8px;
+    background-color: $onPrimary;
+    border: 0.477rem solid $primary;
+}
+
+tooltip {
+    animation-name: appear;
+    animation-duration: 100ms;
+    animation-timing-function: ease-out;
+    animation-iteration-count: 1;
+    @include normal-rounding;
+    background-color: $surfaceVariant;
+    color: $onSurfaceVariant;
+    border: 1px solid $onSurfaceVariant;
+}
+
+/////////////////////////////////////////
+// Emoji Chooser structure
+// popover
+// ├── box.emoji-searchbar
+// │   ╰── entry.search
+// ╰── box.emoji-toolbar
+//     ├── button.image-button.emoji-section
+//     ├── ...
+//     ╰── button.image-button.emoji-section
+
+popover {
+    @include elevation-border-softer;
+    padding: 0.681rem;
+    background: $surfaceVariant;
+    color: $onSurfaceVariant;
+    border-radius: 1.159rem;
+    -gtk-outline-radius: 1.159rem;
+
+    animation-name: appear;
+    animation-duration: 40ms;
+    animation-timing-function: ease-out;
+    animation-iteration-count: 1;
+}
+
+
+/////////////////////////////////////////
+
+.configtoggle-box {
+    padding: 0.205rem 0.341rem;
+    border: 0.136rem solid transparent;
+}
+
+.configtoggle-box:focus {
+    border: 0.136rem solid mix($onSurface, $surface, 40%);
+}
+
+.switch-bg {
+    @include element_decel;
+    @include full-rounding;
+    background-color: mix($surface, $background, 50%);
+    border: 0.136rem solid $onSurface;
+    min-width: 2.864rem;
+    min-height: 1.637rem;
+}
+
+.switch-bg-true {
+    background-color: $primary;
+    border: 0.136rem solid $primary;
+}
+
+.switch-fg {
+    @include full-rounding;
+    @include menu_decel;
+    background-color: $onSurface;
+    color: $surface;
+    min-width: 0.819rem;
+    min-height: 0.819rem;
+    margin-left: 0.477rem;
+}
+
+.switch-fg-true {
+    background-color: $onPrimary;
+    color: $primary;
+    min-width: 1.431rem;
+    min-height: 1.431rem;
+    margin-left: 1.431rem;
+}
+
+.switch-fg-toggling-false {
+    @include menu_decel;
+    min-width: 1.636rem;
+    min-height: 0.819rem;
+}
+
+.segment-container {
+    @include full-rounding;
+    border: 0.068rem solid $outline;
+}
+
+.segment-container>*:first-child {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+}
+
+.segment-container>* {
+    border-right: 0.068rem solid $outline;
+    padding: 0.341rem 0.682rem;
+}
+
+.segment-container>*:last-child {
+    border-right: 0rem solid transparent;
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+}
+
+.segment-btn {
+    color: $onSurface;
+}
+
+.segment-btn:focus,
+.segment-btn:hover {
+    background-color: $hovercolor;
+}
+
+.segment-btn-enabled {
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
+}
+
+.segment-btn-enabled:hover,
+.segment-btn-enabled:focus {
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
+}
+
+.gap-v-5 {
+    min-height: 0.341rem;
+}
+
+.gap-h-5 {
+    min-width: 0.341rem;
+}
+
+.gap-v-10 {
+    min-height: 0.682rem;
+}
+
+.gap-h-10 {
+    min-width: 0.682rem;
+}
+
+.gap-v-15 {
+    min-height: 1.023rem;
+}
+
+.gap-h-15 {
+    min-width: 1.023rem;
+}