@fest-lib/veela 0.1.1

package/src/scss/core/misc/_utilities.scss

@@ -0,0 +1,941 @@
+@use "./mixins" as *;
+@use "./functions" as cfg;
+@use "../../basic/misc/layout" as ux;
+@use "../interact/position" as *;
+@use "../interact/ps-anchor" as *;
+@use "../interact/ps-cursor" as *;
+
+@layer utilities {
+    @each $name, $value in $spaces {
+        .m-#{$name} {
+            margin: $value;
+        }
+
+        .mb-#{$name} {
+            margin-block: $value;
+        }
+
+        .mi-#{$name} {
+            margin-inline: $value;
+        }
+
+        .p-#{$name} {
+            padding: $value;
+        }
+
+        .pb-#{$name} {
+            padding-block: $value;
+        }
+
+        .pi-#{$name} {
+            padding-inline: $value;
+        }
+
+        .gap-#{$name} {
+            gap: $value;
+        }
+
+        .inset-#{$name} {
+            inset: $value;
+        }
+    }
+
+    .text-xs {
+        @include typography("xs");
+    }
+
+    .text-sm {
+        @include typography("sm");
+    }
+
+    .text-base {
+        @include typography("base");
+    }
+
+    .text-lg {
+        @include typography("lg");
+    }
+
+    .text-xl {
+        @include typography("xl");
+    }
+
+    .text-2xl {
+        @include typography("2xl");
+    }
+
+    .font-thin {
+        font-weight: cfg.config("typography", "font-weight", "thin");
+    }
+
+    .font-light {
+        font-weight: cfg.config("typography", "font-weight", "light");
+    }
+
+    .font-normal {
+        font-weight: cfg.config("typography", "font-weight", "normal");
+    }
+
+    .font-medium {
+        font-weight: cfg.config("typography", "font-weight", "medium");
+    }
+
+    .font-semibold {
+        font-weight: cfg.config("typography", "font-weight", "semibold");
+    }
+
+    .font-bold {
+        font-weight: cfg.config("typography", "font-weight", "bold");
+    }
+
+    .text-start {
+        text-align: start;
+    }
+
+    .text-center {
+        text-align: center;
+    }
+
+    .text-end {
+        text-align: end;
+    }
+
+    .text-primary {
+        color: cfg.config("colors", "text-primary");
+    }
+
+    .text-secondary {
+        color: cfg.config("colors", "text-secondary");
+    }
+
+    .text-muted {
+        color: cfg.config("colors", "text-muted");
+    }
+
+    .text-disabled {
+        color: cfg.config("colors", "text-disabled");
+    }
+
+    .block,
+    .vu-block {
+        display: block;
+    }
+
+    .inline,
+    .vu-inline {
+        display: inline;
+    }
+
+    .inline-block {
+        display: inline-block;
+    }
+
+    .flex,
+    .vu-flex {
+        display: flex;
+    }
+
+    .inline-flex {
+        display: inline-flex;
+    }
+
+    .grid,
+    .vu-grid {
+        display: grid;
+    }
+
+    .hidden,
+    .vu-hidden {
+        display: none;
+    }
+
+    .flex-row {
+        flex-direction: row;
+    }
+
+    .flex-col {
+        flex-direction: column;
+    }
+
+    .flex-wrap {
+        flex-wrap: wrap;
+    }
+
+    .flex-nowrap {
+        flex-wrap: nowrap;
+    }
+
+    .items-start {
+        align-items: flex-start;
+    }
+
+    .items-center {
+        align-items: center;
+    }
+
+    .items-end {
+        align-items: flex-end;
+    }
+
+    .items-stretch {
+        align-items: stretch;
+    }
+
+    .justify-start {
+        justify-content: flex-start;
+    }
+
+    .justify-center {
+        justify-content: center;
+    }
+
+    .justify-end {
+        justify-content: flex-end;
+    }
+
+    .justify-between {
+        justify-content: space-between;
+    }
+
+    .justify-around {
+        justify-content: space-around;
+    }
+
+    .grid-cols-1 {
+        grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .grid-cols-2 {
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .grid-cols-3 {
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .grid-cols-4 {
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+    }
+
+    .h-auto,
+    .block-size-auto {
+        block-size: auto;
+    }
+
+    .h-full,
+    .block-size-full {
+        block-size: 100%;
+    }
+
+    .h-screen {
+        block-size: 100vh;
+    }
+
+    .w-auto,
+    .inline-size-auto {
+        inline-size: auto;
+    }
+
+    .w-full,
+    .inline-size-full {
+        inline-size: 100%;
+    }
+
+    .w-screen {
+        inline-size: 100vw;
+    }
+
+    .min-h-0,
+    .min-block-size-0 {
+        min-block-size: 0;
+    }
+
+    .min-w-0,
+    .min-inline-size-0 {
+        min-inline-size: 0;
+    }
+
+    .max-h-full,
+    .max-block-size-full {
+        max-block-size: 100%;
+    }
+
+    .max-w-full,
+    .max-inline-size-full {
+        max-inline-size: 100%;
+    }
+
+    .static {
+        position: static;
+    }
+
+    .relative {
+        position: relative;
+    }
+
+    .absolute {
+        position: absolute;
+    }
+
+    .fixed {
+        position: fixed;
+    }
+
+    .sticky {
+        position: sticky;
+    }
+
+    .bg-surface {
+        background-color: cfg.config("colors", "surface");
+    }
+
+    .bg-surface-container {
+        background-color: cfg.config("colors", "surface-container");
+    }
+
+    .bg-surface-container-high {
+        background-color: cfg.config("colors", "surface-container-high");
+    }
+
+    .bg-primary {
+        background-color: cfg.config("colors", "primary");
+    }
+
+    .bg-secondary {
+        background-color: cfg.config("colors", "secondary");
+    }
+
+    .border {
+        @include logical-border(1px, solid, cfg.config("colors", "border"));
+    }
+
+    .border-2 {
+        @include logical-border(2px, solid, cfg.config("colors", "border"));
+    }
+
+    .border-primary {
+        @include logical-border(1px, solid, cfg.config("colors", "primary"));
+    }
+
+    .border-secondary {
+        @include logical-border(1px, solid, cfg.config("colors", "secondary"));
+    }
+
+    .rounded-none {
+        border-radius: 0;
+    }
+
+    .rounded-sm {
+        border-radius: cfg.config("shape", "border-radius", "sm");
+    }
+
+    .rounded-md {
+        border-radius: cfg.config("shape", "border-radius", "md");
+    }
+
+    .rounded-lg {
+        border-radius: cfg.config("shape", "border-radius", "lg");
+    }
+
+    .rounded-full {
+        border-radius: cfg.config("shape", "border-radius", "full");
+    }
+
+    .shadow-xs {
+        box-shadow: cfg.config("shape", "shadow", "xs");
+    }
+
+    .shadow-sm {
+        box-shadow: cfg.config("shape", "shadow", "sm");
+    }
+
+    .shadow-md {
+        box-shadow: cfg.config("shape", "shadow", "md");
+    }
+
+    .shadow-lg {
+        box-shadow: cfg.config("shape", "shadow", "lg");
+    }
+
+    .shadow-xl {
+        box-shadow: cfg.config("shape", "shadow", "xl");
+    }
+
+    .cursor-pointer {
+        cursor: pointer;
+    }
+
+    .cursor-default {
+        cursor: default;
+    }
+
+    .cursor-not-allowed {
+        cursor: not-allowed;
+    }
+
+    .select-none {
+        user-select: none;
+    }
+
+    .select-text {
+        user-select: text;
+    }
+
+    .select-all {
+        user-select: all;
+    }
+
+    .visible {
+        visibility: visible;
+    }
+
+    .invisible {
+        visibility: hidden;
+    }
+
+    .collapse,
+    .vs-collapsed {
+        visibility: collapse;
+    }
+
+    .opacity-0 {
+        opacity: 0;
+    }
+
+    .opacity-25 {
+        opacity: 0.25;
+    }
+
+    .opacity-50 {
+        opacity: 0.5;
+    }
+
+    .opacity-75 {
+        opacity: 0.75;
+    }
+
+    .opacity-100 {
+        opacity: 1;
+    }
+
+    .hidden\@xs {
+        @include container-query("xs", "max-width") {
+            display: none;
+        }
+    }
+
+    .hidden\@sm {
+        @include container-query("sm", "max-width") {
+            display: none;
+        }
+    }
+
+    .hidden\@md {
+        @include container-query("md", "max-width") {
+            display: none;
+        }
+    }
+
+    .hidden\@lg {
+        @include container-query("lg", "max-width") {
+            display: none;
+        }
+    }
+
+    .block\@xs {
+        @include container-query("xs") {
+            display: block;
+        }
+    }
+
+    .block\@sm {
+        @include container-query("sm") {
+            display: block;
+        }
+    }
+
+    .block\@md {
+        @include container-query("md") {
+            display: block;
+        }
+    }
+
+    .block\@lg {
+        @include container-query("lg") {
+            display: block;
+        }
+    }
+
+    .text-sm\@xs {
+        @include container-query("xs", "max-width") {
+            @include typography("sm");
+        }
+    }
+
+    .text-base\@sm {
+        @include container-query("sm") {
+            @include typography("base");
+        }
+    }
+
+    .icon-xs {
+        --icon-size: 0.75rem;
+    }
+
+    .icon-sm {
+        --icon-size: 0.875rem;
+    }
+
+    .icon-md {
+        --icon-size: 1rem;
+    }
+
+    .icon-lg {
+        --icon-size: 1.25rem;
+    }
+
+    .icon-xl {
+        --icon-size: 1.5rem;
+    }
+
+    .center-absolute {
+        @include center-absolute;
+    }
+
+    .center-flex {
+        @include center-flex;
+    }
+
+    .interactive {
+        @include interactive;
+    }
+
+    .focus-ring {
+        @include focus-ring;
+    }
+
+    .truncate {
+        @include truncate(1);
+    }
+
+    .truncate-2 {
+        @include truncate(2);
+    }
+
+    .truncate-3 {
+        @include truncate(3);
+    }
+
+    .aspect-square {
+        @include aspect-ratio(1);
+    }
+
+    .aspect-video {
+        @include aspect-ratio(#{"16 / 9"});
+    }
+
+    .margin-block-0 {
+        margin-block: 0;
+    }
+
+    .margin-block-sm {
+        margin-block: var(--space-sm);
+    }
+
+    .margin-block-md {
+        margin-block: var(--space-md);
+    }
+
+    .margin-block-lg {
+        margin-block: var(--space-lg);
+    }
+
+    .margin-inline-0 {
+        margin-inline: 0;
+    }
+
+    .margin-inline-sm {
+        margin-inline: var(--space-sm);
+    }
+
+    .margin-inline-md {
+        margin-inline: var(--space-md);
+    }
+
+    .margin-inline-lg {
+        margin-inline: var(--space-lg);
+    }
+
+    .margin-inline-auto {
+        margin-inline: auto;
+    }
+
+    .padding-block-0 {
+        padding-block: 0;
+    }
+
+    .padding-block-sm {
+        padding-block: var(--space-sm);
+    }
+
+    .padding-block-md {
+        padding-block: var(--space-md);
+    }
+
+    .padding-block-lg {
+        padding-block: var(--space-lg);
+    }
+
+    .padding-inline-0 {
+        padding-inline: 0;
+    }
+
+    .padding-inline-sm {
+        padding-inline: var(--space-sm);
+    }
+
+    .padding-inline-md {
+        padding-inline: var(--space-md);
+    }
+
+    .padding-inline-lg {
+        padding-inline: var(--space-lg);
+    }
+
+    .pointer-events-none {
+        pointer-events: none;
+    }
+
+    .pointer-events-auto {
+        pointer-events: auto;
+    }
+
+    .line-clamp-1 {
+        @include line-clamp(1);
+    }
+
+    .line-clamp-2 {
+        @include line-clamp(2);
+    }
+
+    .line-clamp-3 {
+        @include line-clamp(3);
+    }
+
+    .vs-active {
+        --state-active: 1;
+    }
+
+    .vs-disabled {
+        pointer-events: none;
+        opacity: 0.5;
+    }
+
+    .vs-loading {
+        cursor: wait;
+    }
+
+    .vs-error {
+        color: var(--color-error, #dc3545);
+    }
+
+    .vs-success {
+        color: var(--color-success, #28a745);
+    }
+
+    .vs-hidden {
+        display: none !important;
+    }
+
+    .vl-container,
+    .container {
+        inline-size: 100%;
+        max-inline-size: var(--container-max, 1200px);
+        margin-inline: auto;
+    }
+
+    .vl-container {
+        padding-inline: var(--space-md);
+    }
+
+    .container {
+        padding-inline: var(--space-lg);
+    }
+
+    .vl-grid {
+        display: grid;
+        gap: var(--gap-md);
+    }
+
+    .vl-stack {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-md);
+    }
+
+    .vl-cluster {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-sm);
+        align-items: center;
+    }
+
+    .vl-center {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .vu-sr-only {
+        @include visually-hidden;
+    }
+
+    .vc-surface {
+        background-color: var(--color-surface);
+        color: var(--color-on-surface);
+    }
+
+    .vc-surface-variant {
+        background-color: var(--color-surface-variant);
+        color: var(--color-on-surface-variant);
+    }
+
+    .vc-primary {
+        background-color: var(--color-primary);
+        color: var(--color-on-primary);
+    }
+
+    .vc-secondary {
+        background-color: var(--color-secondary);
+        color: var(--color-on-secondary);
+    }
+
+    .vc-elevated {
+        box-shadow: var(--elev-1);
+    }
+
+    .vc-elevated-2 {
+        box-shadow: var(--elev-2);
+    }
+
+    .vc-elevated-3 {
+        box-shadow: var(--elev-3);
+    }
+
+    .vc-rounded {
+        border-radius: var(--radius-md);
+    }
+
+    .vc-rounded-sm {
+        border-radius: var(--radius-sm);
+    }
+
+    .vc-rounded-lg {
+        border-radius: var(--radius-lg);
+    }
+
+    .vc-rounded-full {
+        border-radius: var(--radius-full, 9999px);
+    }
+
+    .card {
+        background: var(--color-bg);
+        border: 1px solid var(--color-border);
+        border-radius: var(--radius-lg);
+        padding: var(--space-lg);
+        box-shadow: var(--shadow-sm);
+    }
+
+    .stack {
+        & > * + * {
+            margin-block-start: var(--space-md);
+        }
+    }
+
+    .stack-sm {
+        & > * + * {
+            margin-block-start: var(--space-sm);
+        }
+    }
+
+    .stack-lg {
+        & > * + * {
+            margin-block-start: var(--space-lg);
+        }
+    }
+
+    @media print {
+        .print-hidden {
+            display: none !important;
+        }
+
+        .print-visible {
+            display: block !important;
+        }
+
+        .print-break-before {
+            page-break-before: always;
+        }
+
+        .print-break-after {
+            page-break-after: always;
+        }
+
+        .print-break-inside-avoid {
+            page-break-inside: avoid;
+        }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        .transition-fast,
+        .transition-normal,
+        .transition-slow {
+            transition: none;
+        }
+
+        * {
+            animation-duration: 0.01ms !important;
+            animation-iteration-count: 1 !important;
+            transition-duration: 0.01ms !important;
+        }
+    }
+
+    @media (prefers-contrast: high) {
+        .text-primary {
+            color: var(--color-on-surface);
+        }
+
+        .text-secondary,
+        .text-muted,
+        .text-disabled {
+            color: var(--color-on-surface-variant);
+        }
+
+        .border {
+            border-width: 2px;
+        }
+
+        .border-top {
+            border-top-width: 2px;
+        }
+
+        .border-bottom {
+            border-bottom-width: 2px;
+        }
+
+        .border-left {
+            border-left-width: 2px;
+        }
+
+        .border-right {
+            border-right-width: 2px;
+        }
+    }
+}
+
+//
+@property --value  { syntax: "<number>"; initial-value: 0; inherits: true; };
+@property --relate { syntax: "<number>"; initial-value: 0; inherits: true; };
+@property --drag-x { syntax: "<number>"; initial-value: 0; inherits: false; };
+@property --drag-y { syntax: "<number>"; initial-value: 0; inherits: false; };
+
+//
+@property --order { syntax: "<integer>"; initial-value: 1; inherits: true; };
+@property --content-inline-size { syntax: "<length-percentage>"; initial-value: 100%; inherits: true; };
+@property --content-block-size  { syntax: "<length-percentage>"; initial-value: 100%; inherits: true; };
+@property --icon-size { syntax: "<length-percentage>"; initial-value: 16px; inherits: true; };
+@property --icon-color { syntax: "<color>"; initial-value: #0000; inherits: true; };
+@property --icon-padding { syntax: "<length-percentage>"; initial-value: 0px; inherits: true; };
+@property --icon-image { syntax: "<image>"; initial-value: linear-gradient(#0000, #0000); inherits: true; };
+
+//
+@layer ux-classes {
+    @include ux.host-related(".grid-rows", "::slotted(*)") { @include ux.grid-row; }
+    @include ux.host-related(".grid-rows", "*") { @include ux.grid-row; }
+    @include ux.host-context(".grid-rows") {
+        @include ux.display(inline-grid, column, center, center);
+        @include ux.size(auto, auto);
+
+        //
+        & {
+            grid-auto-rows: minmax(0px, max-content);
+            grid-template-columns: minmax(0px, max-content) minmax(0px, 1fr) minmax(0px, max-content);
+            margin: 0px;
+            padding: 0px;
+            list-style-type: none;
+            list-style-position: inside;
+        }
+    }
+
+    //
+    @include ux.host-related(".grid-columns", "::slotted(*)") { @include ux.grid-column; }
+    @include ux.host-related(".grid-columns", "*") { @include ux.grid-column; }
+    @include ux.host-context(".grid-columns") {
+        @include ux.display(inline-grid, row, center, center);
+        @include ux.size(auto, auto);
+
+        //
+        & {
+            grid-auto-columns: minmax(0px, 1fr);
+            grid-template-rows: minmax(0px, 1fr);
+            margin: 0px;
+            padding: 0px;
+            list-style-type: none;
+            list-style-position: inside;
+        }
+    }
+
+    //
+    @include ux.host-related(".flex-columns", "::slotted(*)") { @include ux.flex-column; }
+    @include ux.host-related(".flex-columns", "*") { @include ux.flex-column; }
+    @include ux.host-context(".flex-columns") {
+        @include ux.display(inline-flex, column, center, center);
+        @include ux.size(max-content, max-content);
+    }
+
+    //
+    @include ux.host-related(".grid-layered", "::slotted(*)") { @include ux.grid-layered; }
+    @include ux.host-related(".grid-layered", "*") { @include ux.grid-layered; }
+    @include ux.host-context(".grid-layered") {
+        @include ux.grid-layered;
+        @include ux.display(inline-grid, column, center, center);
+        @include ux.size(max-content, max-content);
+    }
+
+    //
+    @include ux.host-related(".grid-rows-3c", "::slotted(*)") { @include ux.grid-rows-3c; }
+    @include ux.host-related(".grid-rows-3c", "*") { @include ux.grid-rows-3c; }
+    @include ux.host-context(".grid-rows-3c") {
+        & { grid-template-columns: minmax(0px, max-content) minmax(0px, 1fr) minmax(0px, max-content); }
+        @include ux.size(auto, auto);
+    }
+
+    //
+    @include ux.host-related(".grid-rows-3c", "::slotted(*:last-child)") { grid-column: var(--order, 1) / 3 span; }
+    @include ux.host-related(".grid-rows-3c", "*:last-child") { grid-column: var(--order, 1) / 3 span; }
+    @include ux.host-context(".grid-rows-3c") {
+        & { --order: sibling-index(); };
+        & { grid-column: var(--order, 1) / var(--order, 1) span; }
+        @include ux.size(auto, auto);
+    }
+
+    //
+    @include ux.host-context(".stretch-inline") { @include ux.inline-stretch; }
+    @include ux.host-context(".stretch-block") { @include ux.block-stretch; }
+
+    // requires `box-sizing: border-box`
+    @include ux.host-context(".content-inline-size") { @include ux.content-inline-size; }
+
+    // requires `box-sizing: border-box`
+    @include ux.host-context(".content-block-size") { @include ux.content-block-size; }
+
+    //
+    @include ux.host-context(".ux-anchor") { @include ps-anchor; }
+    @include ux.host-context(".ux-anchor") { @include ps-cursor; }
+
+    //
+    @include ux.host-context(".layered-wrap") {
+        & { background-color: transparent; display: inline grid; inline-size: max-content; block-size: max-content; grid-template-columns: minmax(0px, 1fr); grid-template-rows: minmax(0px, 1fr); z-index: calc(var(--z-index, 0) + 1); overflow: visible; }
+        & > * { grid-column: 1 / -1; grid-row: 1 / -1; }
+    }
+}