@fest-lib/veela 0.1.20 → 1.0.2

package/src/scss/advanced/md3/_md3.scss

@@ -1,506 +0,0 @@
-@use "sass:map";
-@use "sass:list";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-
-@use "utils" as _;
-@use "shadow" as _shadow;
-
-//
-// Space function
-@function md3-space($token) {
-    @return _.md3-fetch($md3-space-scale, $token, "space token");
-}
-
-//
-// Radius function
-@function md3-radius($token) {
-    @if map.has-key($md3-radius-scale, $token) {
-        @return map.get($md3-radius-scale, $token);
-    }
-
-    @if map.has-key($md3-radius-aliases, $token) {
-        $alias: map.get($md3-radius-aliases, $token);
-        @return map.get($md3-radius-scale, $alias);
-    }
-
-    @return _.md3-fetch($md3-radius-scale, $token, "radius token");
-}
-
-//
-// Gap function
-@function md3-gap($token) { @return md3-space($token); }
-
-//
-// Export gap vars mixin
-@mixin md3-export-gap-vars() {
-    @each $token, $value in $md3-space-scale {
-        --gap-#{$token}: #{$value};
-    }
-}
-
-//
-// Padding function
-@function md3-padding($token) { @return md3-space($token); }
-
-//
-// Export padding vars mixin
-@mixin md3-export-padding-vars() {
-    @each $token, $value in $md3-space-scale {
-        --padding-#{$token}: #{$value};
-    }
-}
-
-//
-// Radius function
-@function md3-shape($token) {
-    @if map.has-key($md3-shape-scale, $token) {
-        @return map.get($md3-shape-scale, $token);
-    }
-
-    @if map.has-key($md3-shape-aliases, $token) {
-        $alias: map.get($md3-shape-aliases, $token);
-        @return map.get($md3-shape-scale, $alias);
-    }
-
-    @error "Unknown MD3 shape token `#{$token}`. Available: #{map.keys($md3-shape-scale)}";
-}
-
-//
-// State function
-@function md3-opacity-state($state) {
-    @return _.md3-fetch($md3-state-opacity, $state, "state token");
-}
-
-//
-// Icon size function
-@function md3-icon-size($token: md) {
-    @return _.md3-fetch($md3-icon-sizes, $token, "icon size");
-}
-
-//
-// Avatar size function
-@function md3-avatar-size($token: md) {
-    @return _.md3-fetch($md3-avatar-sizes, $token, "avatar size");
-}
-
-//
-// Export layout vars mixin
-@mixin md3-export-density-vars() {
-    @each $token, $value in $md3-space-scale {
-        --md3-space-#{$token}: #{$value};
-    }
-}
-
-
-
-@mixin md3-export-scale-vars() {
-    --u: 1rem;
-    --pxu: 1px;
-    --cqi: 1cqi;
-    --cqb: 1cqb;
-
-    --size-scale: 1;
-    --font-scale: 1;
-
-    --container-max-width: min(100%, 110rem);
-    --container-padding: clamp(1rem, 3vw, 2rem);
-
-    @each $name, $value in $md3-breakpoints {
-        --breakpoint-#{$name}: #{$value};
-    }
-
-    @container (inline-size < $md3-container-compact-max) {
-        --size-scale: 0.92;
-        --font-scale: 0.96;
-    }
-
-    @container ($md3-container-compact-max <= inline-size < $md3-container-cozy-max) {
-        --size-scale: 1;
-        --font-scale: 1;
-    }
-
-    @container (inline-size >= $md3-container-cozy-max) {
-        --size-scale: 1.05;
-        --font-scale: 1.04;
-    }
-
-    --sidebar-width: min(clamp(16.25rem, 28vw, 22.5rem), 100cqi);
-    --sidebar-width-collapsed: min(clamp(10rem, 20vw, 12.5rem), 100cqi);
-    --sidebar-width-mobile: min(clamp(17.5rem, 35vw, 20rem), 100cqi);
-    --sidebar-width-mobile-small: min(clamp(18.75rem, 40vw, 21.25rem), 100cqi);
-
-    @media (max-inline-size: #{map.get($md3-breakpoints, md)}) {
-        --sidebar-width: var(--sidebar-width-mobile);
-    }
-
-    @media (max-inline-size: #{map.get($md3-breakpoints, sm)}) {
-        --sidebar-width: var(--sidebar-width-mobile-small);
-    }
-}
-
-
-
-
-//
-// Export layout vars mixin
-@mixin md3-export-layout-vars() {
-    // Spacing tokens
-    @each $token, $value in $md3-space-scale {
-        --space-#{$token}-base: #{$value};
-    }
-
-
-
-    // Icon & avatar sizes
-    --icon-size-xs: #{md3-icon-size(xs)};
-    --icon-size-sm: #{md3-icon-size(sm)};
-    --icon-size-md: #{md3-icon-size(md)};
-    --icon-size-lg: #{md3-icon-size(lg)};
-    --icon-size-xl: #{md3-icon-size(xl)};
-    --icon-size-2xl: #{md3-icon-size(2xl)};
-
-    --avatar-size-sm: #{md3-avatar-size(sm)};
-    --avatar-size: #{md3-avatar-size(md)};
-    --avatar-size-lg: #{md3-avatar-size(lg)};
-
-    --text-opacity-disabled: #{md3-state(disabled)};
-}
-
-
-//
-// Spacing variables
-$spacing-xs: #{md3-space(xs)};
-$spacing-sm: #{md3-space(sm)};
-$spacing-md: #{md3-space(md)};
-$spacing-lg: #{md3-space(lg)};
-$spacing-xl: #{md3-space(xl)};
-$spacing-2xl: #{md3-space(2xl)};
-$spacing-3xl: #{md3-space(3xl)};
-$spacing-4xl: #{md3-space(4xl)};
-
-//
-// Border radius variables
-$border-radius-sm: #{md3-radius(sm)};
-$border-radius-md: #{md3-radius(md)};
-$border-radius-lg: #{md3-radius(lg)};
-$border-radius-xl: #{md3-radius(xl)};
-$border-radius-2xl: #{md3-radius(2xl)};
-$border-radius-3xl: #{md3-radius(3xl)};
-$border-radius-4xl: #{md3-radius(4xl)};
-$border-radius-full: #{md3-radius(full)};
-
-//
-// Z-index variables
-$z-dropdown: 1000;
-$z-sticky: 1020;
-$z-fixed: 1030;
-$z-modal-backdrop: 1040;
-$z-modal: 1050;
-$z-popover: 1060;
-$z-tooltip: 1070;
-
-//
-// Breakpoint variables
-$breakpoint-sm: map.get($md3-breakpoints, sm);
-$breakpoint-md: map.get($md3-breakpoints, md);
-$breakpoint-lg: map.get($md3-breakpoints, lg);
-$breakpoint-xl: map.get($md3-breakpoints, xl);
-$breakpoint-2xl: map.get($md3-breakpoints, 2xl);
-
-//
-// Container max width
-$container-max-width: min(100%, 110rem);
-
-//
-// Backdrop blur variables
-$backdrop-blur-sm: blur(6px);
-$backdrop-blur-md: blur(12px);
-$backdrop-blur-lg: blur(18px);
-
-//
-// UI radius variables
-$ui-radius-sm: #{md3-radius(sm)} !default;
-$ui-radius-md: #{md3-radius(md)} !default;
-$ui-radius-lg: #{md3-radius(lg)} !default;
-$ui-radius-xl: #{md3-radius(xl)} !default;
-$ui-radius-2xl: #{md3-radius(2xl)} !default;
-$ui-radius-3xl: #{md3-radius(3xl)} !default;
-$ui-radius-4xl: #{md3-radius(4xl)} !default;
-$ui-radius-full: #{md3-radius(full)} !default;
-$ui-border-width: 1px !default;
-
-//
-// UI spacing variables
-$ui-spacing-2xs: #{md3-space(2xs)} !default;
-$ui-spacing-xs: #{md3-space(xs)} !default;
-$ui-spacing-sm: #{md3-space(sm)} !default;
-$ui-spacing-md: #{md3-space(md)} !default;
-$ui-spacing-lg: #{md3-space(lg)} !default;
-$ui-spacing-xl: #{md3-space(xl)} !default;
-$ui-spacing-2xl: #{md3-space(2xl)} !default;
-$ui-spacing-3xl: #{md3-space(3xl)} !default;
-$ui-spacing-4xl: #{md3-space(4xl)} !default;
-
-//
-// UI titlebar height
-$ui-titlebar-height: 32px !default;
-$ui-font-title-size: #{md3-type("title-small", size)} !default;
-$ui-font-subtitle-size: #{md3-type("label-large", size)} !default;
-
-//
-// Mobile width
-$mobile-width: 9in;
-
-//
-// Is touch
-$is-touch: "screen and (hover: none) and (pointer: coarse)";
-$is-not-wide: "(width < #{$mobile-width})";
-$is-desktop: "(width >= #{$mobile-width})";
-$is-deskinset-block-start: "(((hover: hover) or (pointer: fine)) and ((width >= #{$mobile-width}) or (orientation: landscape)))";
-$is-mobile: "not #{$is-desktop}";
-$is-windowed: "@container u2-windowed #{$is-not-wide}";
-
-
-//
-// Space function
-@function md3-space($token) {
-    @return _.md3-fetch($md3-space-scale, $token, "space token");
-}
-
-//
-// Radius function
-@function md3-radius($token) {
-    @if map.has-key($md3-radius-scale, $token) {
-        @return map.get($md3-radius-scale, $token);
-    }
-
-    @if map.has-key($md3-radius-aliases, $token) {
-        $alias: map.get($md3-radius-aliases, $token);
-        @return map.get($md3-radius-scale, $alias);
-    }
-
-    @return _.md3-fetch($md3-radius-scale, $token, "radius token");
-}
-
-//
-// Gap function
-@function md3-gap($token) { @return md3-space($token); }
-
-//
-// Export gap vars mixin
-@mixin md3-export-gap-vars() {
-    @each $token, $value in $md3-space-scale {
-        --gap-#{$token}: #{$value};
-    }
-}
-
-//
-// Padding function
-@function md3-padding($token) { @return md3-space($token); }
-
-//
-// Export padding vars mixin
-@mixin md3-export-padding-vars() {
-    @each $token, $value in $md3-space-scale {
-        --padding-#{$token}: #{$value};
-    }
-}
-
-//
-// Radius function
-@function md3-shape($token) {
-    @if map.has-key($md3-shape-scale, $token) {
-        @return map.get($md3-shape-scale, $token);
-    }
-
-    @if map.has-key($md3-shape-aliases, $token) {
-        $alias: map.get($md3-shape-aliases, $token);
-        @return map.get($md3-shape-scale, $alias);
-    }
-
-    @error "Unknown MD3 shape token `#{$token}`. Available: #{map.keys($md3-shape-scale)}";
-}
-
-//
-// State function
-@function md3-opacity-state($state) {
-    @return _.md3-fetch($md3-state-opacity, $state, "state token");
-}
-
-//
-// Icon size function
-@function md3-icon-size($token: md) {
-    @return _.md3-fetch($md3-icon-sizes, $token, "icon size");
-}
-
-//
-// Avatar size function
-@function md3-avatar-size($token: md) {
-    @return _.md3-fetch($md3-avatar-sizes, $token, "avatar size");
-}
-
-//
-// Export layout vars mixin
-@mixin md3-export-density-vars() {
-    @each $token, $value in $md3-space-scale {
-        --md3-space-#{$token}: #{$value};
-    }
-}
-
-
-
-@mixin md3-export-scale-vars() {
-    --u: 1rem;
-    --pxu: 1px;
-    --cqi: 1cqi;
-    --cqb: 1cqb;
-
-    --size-scale: 1;
-    --font-scale: 1;
-
-    --container-max-width: min(100%, 110rem);
-    --container-padding: clamp(1rem, 3vw, 2rem);
-
-    @each $name, $value in $md3-breakpoints {
-        --breakpoint-#{$name}: #{$value};
-    }
-
-    @container (inline-size < $md3-container-compact-max) {
-        --size-scale: 0.92;
-        --font-scale: 0.96;
-    }
-
-    @container ($md3-container-compact-max <= inline-size < $md3-container-cozy-max) {
-        --size-scale: 1;
-        --font-scale: 1;
-    }
-
-    @container (inline-size >= $md3-container-cozy-max) {
-        --size-scale: 1.05;
-        --font-scale: 1.04;
-    }
-
-    --sidebar-width: min(clamp(16.25rem, 28vw, 22.5rem), 100cqi);
-    --sidebar-width-collapsed: min(clamp(10rem, 20vw, 12.5rem), 100cqi);
-    --sidebar-width-mobile: min(clamp(17.5rem, 35vw, 20rem), 100cqi);
-    --sidebar-width-mobile-small: min(clamp(18.75rem, 40vw, 21.25rem), 100cqi);
-
-    @media (max-inline-size: #{map.get($md3-breakpoints, md)}) {
-        --sidebar-width: var(--sidebar-width-mobile);
-    }
-
-    @media (max-inline-size: #{map.get($md3-breakpoints, sm)}) {
-        --sidebar-width: var(--sidebar-width-mobile-small);
-    }
-}
-
-
-
-
-//
-// Export layout vars mixin
-@mixin md3-export-layout-vars() {
-    // Spacing tokens
-    @each $token, $value in $md3-space-scale {
-        --space-#{$token}-base: #{$value};
-    }
-
-
-
-    // Icon & avatar sizes
-    --icon-size-xs: #{md3-icon-size(xs)};
-    --icon-size-sm: #{md3-icon-size(sm)};
-    --icon-size-md: #{md3-icon-size(md)};
-    --icon-size-lg: #{md3-icon-size(lg)};
-    --icon-size-xl: #{md3-icon-size(xl)};
-    --icon-size-2xl: #{md3-icon-size(2xl)};
-
-    --avatar-size-sm: #{md3-avatar-size(sm)};
-    --avatar-size: #{md3-avatar-size(md)};
-    --avatar-size-lg: #{md3-avatar-size(lg)};
-
-    --text-opacity-disabled: #{md3-state(disabled)};
-}
-
-
-//
-// Spacing variables
-$spacing-xs: #{md3-space(xs)};
-$spacing-sm: #{md3-space(sm)};
-$spacing-md: #{md3-space(md)};
-$spacing-lg: #{md3-space(lg)};
-$spacing-xl: #{md3-space(xl)};
-$spacing-2xl: #{md3-space(2xl)};
-$spacing-3xl: #{md3-space(3xl)};
-$spacing-4xl: #{md3-space(4xl)};
-
-//
-// Border radius variables
-$border-radius-sm: #{md3-radius(sm)};
-$border-radius-md: #{md3-radius(md)};
-$border-radius-lg: #{md3-radius(lg)};
-$border-radius-xl: #{md3-radius(xl)};
-$border-radius-2xl: #{md3-radius(2xl)};
-$border-radius-3xl: #{md3-radius(3xl)};
-$border-radius-4xl: #{md3-radius(4xl)};
-$border-radius-full: #{md3-radius(full)};
-
-//
-// Z-index variables
-$z-dropdown: 1000;
-$z-sticky: 1020;
-$z-fixed: 1030;
-$z-modal-backdrop: 1040;
-$z-modal: 1050;
-$z-popover: 1060;
-$z-tooltip: 1070;
-
-//
-// Breakpoint variables
-$breakpoint-sm: map.get($md3-breakpoints, sm);
-$breakpoint-md: map.get($md3-breakpoints, md);
-$breakpoint-lg: map.get($md3-breakpoints, lg);
-$breakpoint-xl: map.get($md3-breakpoints, xl);
-$breakpoint-2xl: map.get($md3-breakpoints, 2xl);
-
-//
-// Container max width
-$container-max-width: min(100%, 110rem);
-
-//
-// Backdrop blur variables
-$backdrop-blur-sm: blur(6px);
-$backdrop-blur-md: blur(12px);
-$backdrop-blur-lg: blur(18px);
-
-//
-// UI radius variables
-$ui-radius-sm: #{md3-radius(sm)} !default;
-$ui-radius-md: #{md3-radius(md)} !default;
-$ui-radius-lg: #{md3-radius(lg)} !default;
-$ui-radius-xl: #{md3-radius(xl)} !default;
-$ui-radius-2xl: #{md3-radius(2xl)} !default;
-$ui-radius-3xl: #{md3-radius(3xl)} !default;
-$ui-radius-4xl: #{md3-radius(4xl)} !default;
-$ui-radius-full: #{md3-radius(full)} !default;
-$ui-border-width: 1px !default;
-
-//
-// UI spacing variables
-$ui-spacing-2xs: #{md3-space(2xs)} !default;
-$ui-spacing-xs: #{md3-space(xs)} !default;
-$ui-spacing-sm: #{md3-space(sm)} !default;
-$ui-spacing-md: #{md3-space(md)} !default;
-$ui-spacing-lg: #{md3-space(lg)} !default;
-$ui-spacing-xl: #{md3-space(xl)} !default;
-$ui-spacing-2xl: #{md3-space(2xl)} !default;
-$ui-spacing-3xl: #{md3-space(3xl)} !default;
-$ui-spacing-4xl: #{md3-space(4xl)} !default;
-
-//
-// UI titlebar height
-$ui-titlebar-height: 32px !default;
-$ui-font-title-size: #{md3-type("title-small", size)} !default;
-$ui-font-subtitle-size: #{md3-type("label-large", size)} !default;

package/src/scss/advanced/md3/_utils.scss

@@ -1,114 +0,0 @@
-@use "sass:list";
-@use "sass:map";
-@use "sass:math";
-@use "sass:meta";
-@use "sass:string";
-
-//
-@function option-or($options, $key, $fallback) {
-    $value: map.get($options, $key);
-    @return if(sass($value == null): $fallback; else: $value);
-}
-
-//
-// Fetch function
-@function md3-fetch($source, $token, $label: "token") {
-    @if map.has-key($source, $token) {
-        @return map.get($source, $token);
-    }
-
-    @error "Unknown #{$label} `#{$token}`. Available: #{map.keys($source)}";
-}
-
-//
-@mixin when-hover($selector: "&") {
-    @media (hover: hover) and (pointer: fine) { #{$selector}:hover { @content; } }
-    @media (hover: none) and (pointer: coarse) { #{$selector}:active { @content; } }
-}
-
-//
-@mixin when-active($selector: "&") {
-    @media (hover: hover) and (pointer: fine) { #{$selector}:active { @content; } }
-}
-
-//
-@mixin when-focus($selector: "&") {
-    @media (hover: hover) and (pointer: fine) { #{$selector}:focus-visible { @content; } }
-    @media (hover: none) and (pointer: coarse) { #{$selector}:focus { @content; } }
-}
-
-//
-@mixin when-focus-visible($selector: "&") {
-    @media (hover: hover) and (pointer: fine) { #{$selector}:focus-visible { @content; } }
-    @media (hover: none) and (pointer: coarse) { #{$selector}:focus-visible { @content; } }
-}
-
-//
-@mixin when-disabled($selector: "&") {
-    @media (hover: hover) and (pointer: fine) { #{$selector}:disabled, #{$selector}[aria-disabled="true"] { @content; } }
-    @media (hover: none) and (pointer: coarse) { #{$selector}:disabled, #{$selector}[aria-disabled="true"] { @content; } }
-}
-
-//
-@mixin when-selected($selector: "&") {
-    @media (hover: hover) and (pointer: fine) { #{$selector}::selection, #{$selector}:checked, #{$selector}[aria-selected="true"] { @content; } }
-    @media (hover: none) and (pointer: coarse) { #{$selector}::selection, #{$selector}:checked, #{$selector}[aria-selected="true"] { @content; } }
-}
-
-//
-@mixin when-autofill($selector: "&") {
-    #{$selector}:-webkit-autofill { @content; }
-    #{$selector}:autofill { @content; }
-    #{$selector}:auto-fill { @content; }
-}
-
-// State layer mixin
-@mixin md3-state-layer($role: primary, $state: hover, $selector: "&::after") {
-    $opacity: md3-opacity-state($state);
-    $role-var: md3-var($role);
-    $weight: calc(100% * #{$opacity});//math.percentage($opacity);
-
-    @if $selector == "&::after" or $selector == "&::before" {
-        position: relative;
-        overflow: hidden;
-    }
-
-    #{$selector} {
-        content: "";
-        position: absolute;
-        inset: 0;
-        background-color: color-mix(in oklch, var(#{$role-var}) #{$weight}, transparent);
-        opacity: 0;
-        pointer-events: none;
-        transition: opacity var(--duration-fast) var(--ease-out);
-    }
-
-    @include when-hover {
-        #{$selector} { opacity: $opacity; }
-    }
-
-    @include when-active {
-        #{$selector} { opacity: $opacity; }
-    }
-
-    @include when-focus {
-        #{$selector} { opacity: $opacity; }
-    }
-
-    @include when-focus-visible {
-        #{$selector} { opacity: $opacity; }
-    }
-
-    @include when-disabled {
-        #{$selector} { opacity: $opacity; }
-    }
-
-    @include when-selected {
-        #{$selector} { opacity: $opacity; }
-    }
-}
-
-@mixin hover($selector: "&") {
-    @include when-hover { #{$selector}:hover { @content; } }
-    @include when-active { #{$selector}:active { @content; } }
-}