@use 'sass:map';
@use 'sass:list';
@use 'sass:meta';
@use 'sass:string';
@mixin _generate-elevation-vars($map, $prefix, $mode) {
@each $key, $value in $map {
@if meta.type-of($value) == 'map' {
$primary-layer-key: null;
@each $level-key, $level-value in $value {
@if $primary-layer-key == null {
$primary-layer-key: $level-key;
}
@each $part, $val in $level-value {
#{'--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$level-key}'}: #{$val};
}
}
@if $primary-layer-key != null {
@each $part, $val in map.get($value, $primary-layer-key) {
#{'--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$primary-layer-key});
}
}
} @else {
#{'--#{$prefix}-elevation-#{$mode}-#{$key}'}: #{$value};
}
}
}
@mixin _generate-elevation-composite($map, $prefix, $mode) {
@each $key, $value in $map {
@if meta.type-of($value) == 'map' {
$layers: ();
@each $layer-idx, $layer-token in $value {
$shadow: ();
@each $part in (offset-x, offset-y, blur, spread, color) {
$shadow: list.append($shadow, var(--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$layer-idx}), $separator: space);
}
$layers: list.append($layers, list.join($shadow, (), $separator: space), $separator: comma);
}
#{'--#{$prefix}-elevation-#{$mode}-#{$key}'}: #{$layers};
}
}
}
@mixin _remap-elevation-vars($map, $prefix, $mode) {
@each $key, $value in $map {
@if meta.type-of($value) == 'map' {
$primary-layer-key: null;
@each $level-key, $level-value in $value {
@if $primary-layer-key == null {
$primary-layer-key: $level-key;
}
@each $part, $val in $level-value {
#{'--#{$prefix}-elevation-#{$key}-#{$part}-#{$level-key}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$level-key});
}
}
@if $primary-layer-key != null {
@each $part, $val in map.get($value, $primary-layer-key) {
#{'--#{$prefix}-elevation-#{$key}-#{$part}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part});
}
}
#{'--#{$prefix}-elevation-#{$key}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key});
} @else {
#{'--#{$prefix}-elevation-#{$key}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key});
}
}
}
@function box-shadow($x: 0px, $y: 0px, $blur: 0px, $spread: 0px, $color: rgba(0, 0, 0, 0.5), $inset: false) {
$shadow: #{$x} #{$y} #{$blur} #{$spread} #{$color};
@if $inset {
$shadow: inset $shadow;
}
@return $shadow;
}
@function box-shadow-with-color($shadows, $new-color) {
$output: ();
@each $shadow in $shadows {
$parts: ();
$color: null;
// break apart the shadow into components
@each $part in $shadow {
@if type-of($part) == 'color' {
$color: $part;
} @else {
$parts: append($parts, $part);
}
}
// append the new color in place of the original
$parts: append($parts, $new-color);
$output: append($output, $parts, comma);
}
@return $output;
}
// ------------------------------------------------------------------------------
//
// This code was generated by a tool.
// Changes to this file may cause incorrect behavior and will be lost if
// the code is regenerated.
//
// ------------------------------------------------------------------------------
$name: "joy";
$font-family: Nunito, sans-serif;
$layout-radius: 12px;
$layout-space: 8px;
$layout-thickness: 2px;
$scheme-light-surface: #f5f5f5;
$scheme-light-background: #eaeaea;
$scheme-light-foreground: #3c454f;
$scheme-light-highlight: #d1d1d1;
$scheme-light-middlelight: #8a8a8a;
$scheme-light-lowlight: #5c5c5c;
$scheme-light-transparent: rgba(255, 255, 255, 0);
$scheme-light-semi-transparent: rgba(255, 255, 255, 0.67);
$scheme-light-disabled: #686868;
$scheme-light-contrast: #ffffff;
$scheme-light-selection: rgba(204, 204, 204, 0.44);
$scheme-dark-surface: #1e1e1e;
$scheme-dark-background: #151515;
$scheme-dark-foreground: #c3bab0;
$scheme-dark-highlight: #2e2e2e;
$scheme-dark-middlelight: #757575;
$scheme-dark-lowlight: #a3a3a3;
$scheme-dark-transparent: rgba(255, 255, 255, 0);
$scheme-dark-semi-transparent: rgba(255, 255, 255, 0.03);
$scheme-dark-disabled: #474747;
$scheme-dark-contrast: #000000;
$scheme-dark-selection: rgba(204, 204, 204, 0.44);
$color-light-primary-0: #ffffff;
$color-light-primary-50: #fce4ec;
$color-light-primary-100: #f8bcd0;
$color-light-primary-200: #f48fb1;
$color-light-primary-300: #f06292;
$color-light-primary-400: #ec407a;
$color-light-primary-500: #e91e63;
$color-light-primary-600: #cb1a56;
$color-light-primary-700: #a31545;
$color-light-primary-800: #7e1035;
$color-light-primary-900: #3a0819;
$color-light-secondary-0: #ffffff;
$color-light-secondary-50: #e6f6e9;
$color-light-secondary-100: #c3e8c9;
$color-light-secondary-200: #9bd9a7;
$color-light-secondary-300: #70cb83;
$color-light-secondary-400: #4dbf68;
$color-light-secondary-500: #21b34d;
$color-light-secondary-600: #16a444;
$color-light-secondary-700: #009238;
$color-light-secondary-800: #00812d;
$color-light-secondary-900: #006218;
$color-light-tertiary-0: #ffffff;
$color-light-tertiary-50: #e1f5fc;
$color-light-tertiary-100: #b4e6f7;
$color-light-tertiary-200: #84d5f3;
$color-light-tertiary-300: #56c5ee;
$color-light-tertiary-400: #35b8eb;
$color-light-tertiary-500: #19ace9;
$color-light-tertiary-600: #139edb;
$color-light-tertiary-700: #098bc7;
$color-light-tertiary-800: #087ab4;
$color-light-tertiary-900: #005a92;
$color-light-info-0: #ffffff;
$color-light-info-50: #f4faff;
$color-light-info-100: #ddf1ff;
$color-light-info-200: #addbff;
$color-light-info-300: #6fb6ff;
$color-light-info-400: #3990ff;
$color-light-info-500: #096bde;
$color-light-info-600: #054da7;
$color-light-info-700: #02367d;
$color-light-info-800: #072859;
$color-light-info-900: #00153c;
$color-light-warning-0: #ffffff;
$color-light-warning-50: #fff8c5;
$color-light-warning-100: #fae17d;
$color-light-warning-200: #eac54f;
$color-light-warning-300: #d4a72c;
$color-light-warning-400: #bf8700;
$color-light-warning-500: #9a6700;
$color-light-warning-600: #7d4e00;
$color-light-warning-700: #633c01;
$color-light-warning-800: #4d2d00;
$color-light-warning-900: #3b2300;
$color-light-danger-0: #ffffff;
$color-light-danger-50: #fff8f6;
$color-light-danger-100: #ffe9e8;
$color-light-danger-200: #ffc7c5;
$color-light-danger-300: #ff9192;
$color-light-danger-400: #fa5255;
$color-light-danger-500: #d3232f;
$color-light-danger-600: #a10e25;
$color-light-danger-700: #77061b;
$color-light-danger-800: #580013;
$color-light-danger-900: #39000d;
$color-light-success-0: #ffffff;
$color-light-success-50: #f3fef5;
$color-light-success-100: #d7f5dd;
$color-light-success-200: #77ec95;
$color-light-success-300: #4cc76e;
$color-light-success-400: #2ca24d;
$color-light-success-500: #1a7d36;
$color-light-success-600: #0f5d26;
$color-light-success-700: #034318;
$color-light-success-800: #002f0f;
$color-light-success-900: #001d09;
$color-light-highlight-0: #ffffff;
$color-light-highlight-50: #fdf7ff;
$color-light-highlight-100: #f4eaff;
$color-light-highlight-200: #e1cbff;
$color-light-highlight-300: #c69eff;
$color-light-highlight-400: #a374f9;
$color-light-highlight-500: #814dde;
$color-light-highlight-600: #5f35ae;
$color-light-highlight-700: #452382;
$color-light-highlight-800: #301761;
$color-light-highlight-900: #1d0a42;
$color-light-neutral-0: #ffffff;
$color-light-neutral-50: #f7f7f8;
$color-light-neutral-100: #ebebef;
$color-light-neutral-200: #d8d8df;
$color-light-neutral-300: #b9b9c6;
$color-light-neutral-400: #8f8fa3;
$color-light-neutral-500: #73738c;
$color-light-neutral-600: #5a5a72;
$color-light-neutral-700: #434356;
$color-light-neutral-800: #25252d;
$color-light-neutral-900: #131318;
$color-dark-primary-0: #000000;
$color-dark-primary-50: #3a0819;
$color-dark-primary-100: #7e1035;
$color-dark-primary-200: #a31545;
$color-dark-primary-300: #cb1a56;
$color-dark-primary-400: #e91e63;
$color-dark-primary-500: #ec407a;
$color-dark-primary-600: #f06292;
$color-dark-primary-700: #f48fb1;
$color-dark-primary-800: #f8bcd0;
$color-dark-primary-900: #fce4ec;
$color-dark-secondary-0: #000000;
$color-dark-secondary-50: #006218;
$color-dark-secondary-100: #00812d;
$color-dark-secondary-200: #009238;
$color-dark-secondary-300: #16a444;
$color-dark-secondary-400: #21b34d;
$color-dark-secondary-500: #4dbf68;
$color-dark-secondary-600: #70cb83;
$color-dark-secondary-700: #9bd9a7;
$color-dark-secondary-800: #c3e8c9;
$color-dark-secondary-900: #e6f6e9;
$color-dark-tertiary-0: #000000;
$color-dark-tertiary-50: #005a92;
$color-dark-tertiary-100: #087ab4;
$color-dark-tertiary-200: #098bc7;
$color-dark-tertiary-300: #139edb;
$color-dark-tertiary-400: #19ace9;
$color-dark-tertiary-500: #35b8eb;
$color-dark-tertiary-600: #56c5ee;
$color-dark-tertiary-700: #84d5f3;
$color-dark-tertiary-800: #b4e6f7;
$color-dark-tertiary-900: #e1f5fc;
$color-dark-info-0: #000000;
$color-dark-info-50: #00153c;
$color-dark-info-100: #072859;
$color-dark-info-200: #02367d;
$color-dark-info-300: #054da7;
$color-dark-info-400: #096bde;
$color-dark-info-500: #3990ff;
$color-dark-info-600: #6fb6ff;
$color-dark-info-700: #addbff;
$color-dark-info-800: #ddf1ff;
$color-dark-info-900: #f4faff;
$color-dark-warning-0: #000000;
$color-dark-warning-50: #3b2300;
$color-dark-warning-100: #4d2d00;
$color-dark-warning-200: #633c01;
$color-dark-warning-300: #7d4e00;
$color-dark-warning-400: #9a6700;
$color-dark-warning-500: #bf8700;
$color-dark-warning-600: #d4a72c;
$color-dark-warning-700: #eac54f;
$color-dark-warning-800: #fae17d;
$color-dark-warning-900: #fff8c5;
$color-dark-danger-0: #000000;
$color-dark-danger-50: #39000d;
$color-dark-danger-100: #580013;
$color-dark-danger-200: #77061b;
$color-dark-danger-300: #a10e25;
$color-dark-danger-400: #d3232f;
$color-dark-danger-500: #fa5255;
$color-dark-danger-600: #ff9192;
$color-dark-danger-700: #ffc7c5;
$color-dark-danger-800: #ffe9e8;
$color-dark-danger-900: #fff8f6;
$color-dark-success-0: #000000;
$color-dark-success-50: #001d09;
$color-dark-success-100: #002f0f;
$color-dark-success-200: #034318;
$color-dark-success-300: #0f5d26;
$color-dark-success-400: #1a7d36;
$color-dark-success-500: #2ca24d;
$color-dark-success-600: #4cc76e;
$color-dark-success-700: #77ec95;
$color-dark-success-800: #d7f5dd;
$color-dark-success-900: #f3fef5;
$color-dark-highlight-0: #000000;
$color-dark-highlight-50: #1d0a42;
$color-dark-highlight-100: #301761;
$color-dark-highlight-200: #452382;
$color-dark-highlight-300: #5f35ae;
$color-dark-highlight-400: #814dde;
$color-dark-highlight-500: #a374f9;
$color-dark-highlight-600: #c69eff;
$color-dark-highlight-700: #e1cbff;
$color-dark-highlight-800: #f4eaff;
$color-dark-highlight-900: #fdf7ff;
$color-dark-neutral-0: #000000;
$color-dark-neutral-50: #131318;
$color-dark-neutral-100: #25252d;
$color-dark-neutral-200: #434356;
$color-dark-neutral-300: #5a5a72;
$color-dark-neutral-400: #73738c;
$color-dark-neutral-500: #8f8fa3;
$color-dark-neutral-600: #b9b9c6;
$color-dark-neutral-700: #d8d8df;
$color-dark-neutral-800: #ebebef;
$color-dark-neutral-900: #f7f7f8;
$typography-headline1-font-size: 96px;
$typography-headline1-line-height: 100px;
$typography-headline1-font-weight: 300;
$typography-headline1-letter-spacing: -0.25px;
$typography-headline1-text-decoration: none;
$typography-headline1-text-transform: none;
$typography-headline2-font-size: 60px;
$typography-headline2-line-height: 64px;
$typography-headline2-font-weight: 300;
$typography-headline2-letter-spacing: -0.13333333333333333px;
$typography-headline2-text-decoration: none;
$typography-headline2-text-transform: none;
$typography-headline3-font-size: 48px;
$typography-headline3-line-height: 52px;
$typography-headline3-font-weight: 400;
$typography-headline3-letter-spacing: normal;
$typography-headline3-text-decoration: none;
$typography-headline3-text-transform: none;
$typography-headline4-font-size: 34px;
$typography-headline4-line-height: 38px;
$typography-headline4-font-weight: 400;
$typography-headline4-letter-spacing: 0.11764705882352941px;
$typography-headline4-text-decoration: none;
$typography-headline4-text-transform: none;
$typography-headline5-font-size: 24px;
$typography-headline5-line-height: 28px;
$typography-headline5-font-weight: 400;
$typography-headline5-letter-spacing: normal;
$typography-headline5-text-decoration: none;
$typography-headline5-text-transform: none;
$typography-headline6-font-size: 20px;
$typography-headline6-line-height: 24px;
$typography-headline6-font-weight: 500;
$typography-headline6-letter-spacing: 0.2px;
$typography-headline6-text-decoration: none;
$typography-headline6-text-transform: none;
$typography-subtitle1-font-size: 16px;
$typography-subtitle1-line-height: 20px;
$typography-subtitle1-font-weight: 400;
$typography-subtitle1-letter-spacing: 0.15px;
$typography-subtitle1-text-decoration: none;
$typography-subtitle1-text-transform: none;
$typography-subtitle2-font-size: 14px;
$typography-subtitle2-line-height: 18px;
$typography-subtitle2-font-weight: 500;
$typography-subtitle2-letter-spacing: 0.1142857142857143px;
$typography-subtitle2-text-decoration: none;
$typography-subtitle2-text-transform: none;
$typography-body1-font-size: 16px;
$typography-body1-line-height: 20px;
$typography-body1-font-weight: 400;
$typography-body1-letter-spacing: 0.5px;
$typography-body1-text-decoration: none;
$typography-body1-text-transform: none;
$typography-body2-font-size: 14px;
$typography-body2-line-height: 18px;
$typography-body2-font-weight: 400;
$typography-body2-letter-spacing: 0.2857142857142857px;
$typography-body2-text-decoration: none;
$typography-body2-text-transform: none;
$typography-supporting-font-size: 12px;
$typography-supporting-line-height: 14px;
$typography-supporting-font-weight: 400;
$typography-supporting-letter-spacing: 0.2857142857142857px;
$typography-supporting-text-decoration: none;
$typography-supporting-text-transform: none;
$typography-caption-font-size: 12px;
$typography-caption-line-height: 16px;
$typography-caption-font-weight: 400;
$typography-caption-letter-spacing: 0.5333333333333333px;
$typography-caption-text-decoration: none;
$typography-caption-text-transform: none;
$typography-button-font-size: 14px;
$typography-button-line-height: 18px;
$typography-button-font-weight: 700;
$typography-button-letter-spacing: 1.4285714285714286px;
$typography-button-text-decoration: none;
$typography-button-text-transform: none;
$typography-overline-font-size: 12px;
$typography-overline-line-height: 16px;
$typography-overline-font-weight: 500;
$typography-overline-letter-spacing: 2.6666666666666665px;
$typography-overline-text-decoration: none;
$typography-overline-text-transform: none;
$elevation-none: none;
$elevation-light-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.17);
$elevation-light-light-offset-x-0: 0px;
$elevation-light-light-offset-y-0: 2px;
$elevation-light-light-blur-0: 2px;
$elevation-light-light-spread-0: -2px;
$elevation-light-light-color-0: rgba(0, 0, 0, 0.17);
$elevation-light-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.17);
$elevation-light-semilight-offset-x-0: 0px;
$elevation-light-semilight-offset-y-0: 4px;
$elevation-light-semilight-blur-0: 4px;
$elevation-light-semilight-spread-0: -2px;
$elevation-light-semilight-color-0: rgba(0, 0, 0, 0.17);
$elevation-light-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.17);
$elevation-light-regular-offset-x-0: 0px;
$elevation-light-regular-offset-y-0: 6px;
$elevation-light-regular-blur-0: 6px;
$elevation-light-regular-spread-0: -2px;
$elevation-light-regular-color-0: rgba(0, 0, 0, 0.17);
$elevation-light-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.17);
$elevation-light-semibold-offset-x-0: 0px;
$elevation-light-semibold-offset-y-0: 8px;
$elevation-light-semibold-blur-0: 8px;
$elevation-light-semibold-spread-0: -2px;
$elevation-light-semibold-color-0: rgba(0, 0, 0, 0.17);
$elevation-light-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.17);
$elevation-light-bold-offset-x-0: 0px;
$elevation-light-bold-offset-y-0: 10px;
$elevation-light-bold-blur-0: 10px;
$elevation-light-bold-spread-0: -2px;
$elevation-light-bold-color-0: rgba(0, 0, 0, 0.17);
$elevation-light-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.17);
$elevation-light-extrabold-offset-x-0: 0px;
$elevation-light-extrabold-offset-y-0: 12px;
$elevation-light-extrabold-blur-0: 12px;
$elevation-light-extrabold-spread-0: -2px;
$elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.17);
$elevation-dark-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.24);
$elevation-dark-light-offset-x-0: 0px;
$elevation-dark-light-offset-y-0: 2px;
$elevation-dark-light-blur-0: 2px;
$elevation-dark-light-spread-0: -2px;
$elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
$elevation-dark-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.24);
$elevation-dark-semilight-offset-x-0: 0px;
$elevation-dark-semilight-offset-y-0: 4px;
$elevation-dark-semilight-blur-0: 4px;
$elevation-dark-semilight-spread-0: -2px;
$elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
$elevation-dark-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.24);
$elevation-dark-regular-offset-x-0: 0px;
$elevation-dark-regular-offset-y-0: 6px;
$elevation-dark-regular-blur-0: 6px;
$elevation-dark-regular-spread-0: -2px;
$elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
$elevation-dark-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.24);
$elevation-dark-semibold-offset-x-0: 0px;
$elevation-dark-semibold-offset-y-0: 8px;
$elevation-dark-semibold-blur-0: 8px;
$elevation-dark-semibold-spread-0: -2px;
$elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
$elevation-dark-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.24);
$elevation-dark-bold-offset-x-0: 0px;
$elevation-dark-bold-offset-y-0: 10px;
$elevation-dark-bold-blur-0: 10px;
$elevation-dark-bold-spread-0: -2px;
$elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
$elevation-dark-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.24);
$elevation-dark-extrabold-offset-x-0: 0px;
$elevation-dark-extrabold-offset-y-0: 12px;
$elevation-dark-extrabold-blur-0: 12px;
$elevation-dark-extrabold-spread-0: -2px;
$elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
$size-tiny: 2px;
$size-small: 4px;
$size-medium: 8px;
$size-large: 16px;
$size-giant: 32px;
$size-key-tiny: "tiny";
$size-key-small: "small";
$size-key-medium: "medium";
$size-key-large: "large";
$size-key-giant: "giant";
$typography-key-headline1: "headline1";
$typography-key-headline2: "headline2";
$typography-key-headline3: "headline3";
$typography-key-headline4: "headline4";
$typography-key-headline5: "headline5";
$typography-key-headline6: "headline6";
$typography-key-subtitle1: "subtitle1";
$typography-key-subtitle2: "subtitle2";
$typography-key-body1: "body1";
$typography-key-body2: "body2";
$typography-key-supporting: "supporting";
$typography-key-caption: "caption";
$typography-key-button: "button";
$typography-key-overline: "overline";
$elevation-key-light: "light";
$elevation-key-semilight: "semilight";
$elevation-key-regular: "regular";
$elevation-key-semibold: "semibold";
$elevation-key-bold: "bold";
$elevation-key-extrabold: "extrabold";
$appearance-default: "default";
$appearance-outline: "outline";
$appearance-plain: "plain";
$appearance-soft: "soft";
$appearance-solid: "solid";
$variant-primary: "primary";
$variant-secondary: "secondary";
$variant-tertiary: "tertiary";
$variant-danger: "danger";
$variant-warning: "warning";
$variant-success: "success";
$variant-info: "info";
$variant-highlight: "highlight";
$variant-neutral: "neutral";
$duration-short: 200ms;
$duration-medium: 400ms;
$duration-long: 600ms;
$typography-headline1-font-family: $font-family;
$typography-headline2-font-family: $font-family;
$typography-headline3-font-family: $font-family;
$typography-headline4-font-family: $font-family;
$typography-headline5-font-family: $font-family;
$typography-headline6-font-family: $font-family;
$typography-subtitle1-font-family: $font-family;
$typography-subtitle2-font-family: $font-family;
$typography-body1-font-family: $font-family;
$typography-body2-font-family: $font-family;
$typography-supporting-font-family: $font-family;
$typography-caption-font-family: $font-family;
$typography-button-font-family: $font-family;
$typography-overline-font-family: $font-family;
$size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
$elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
$appearance: $appearance-default $appearance-outline $appearance-plain $appearance-soft $appearance-solid;
$variant: $variant-primary $variant-secondary $variant-tertiary $variant-danger $variant-warning $variant-success $variant-info $variant-highlight $variant-neutral;
$duration: $duration-short $duration-medium $duration-long;
$_color-light: (
primary: (
0: $color-light-primary-0,
50: $color-light-primary-50,
100: $color-light-primary-100,
200: $color-light-primary-200,
300: $color-light-primary-300,
400: $color-light-primary-400,
500: $color-light-primary-500,
600: $color-light-primary-600,
700: $color-light-primary-700,
800: $color-light-primary-800,
900: $color-light-primary-900
),
secondary: (
0: $color-light-secondary-0,
50: $color-light-secondary-50,
100: $color-light-secondary-100,
200: $color-light-secondary-200,
300: $color-light-secondary-300,
400: $color-light-secondary-400,
500: $color-light-secondary-500,
600: $color-light-secondary-600,
700: $color-light-secondary-700,
800: $color-light-secondary-800,
900: $color-light-secondary-900
),
tertiary: (
0: $color-light-tertiary-0,
50: $color-light-tertiary-50,
100: $color-light-tertiary-100,
200: $color-light-tertiary-200,
300: $color-light-tertiary-300,
400: $color-light-tertiary-400,
500: $color-light-tertiary-500,
600: $color-light-tertiary-600,
700: $color-light-tertiary-700,
800: $color-light-tertiary-800,
900: $color-light-tertiary-900
),
info: (
0: $color-light-info-0,
50: $color-light-info-50,
100: $color-light-info-100,
200: $color-light-info-200,
300: $color-light-info-300,
400: $color-light-info-400,
500: $color-light-info-500,
600: $color-light-info-600,
700: $color-light-info-700,
800: $color-light-info-800,
900: $color-light-info-900
),
warning: (
0: $color-light-warning-0,
50: $color-light-warning-50,
100: $color-light-warning-100,
200: $color-light-warning-200,
300: $color-light-warning-300,
400: $color-light-warning-400,
500: $color-light-warning-500,
600: $color-light-warning-600,
700: $color-light-warning-700,
800: $color-light-warning-800,
900: $color-light-warning-900
),
danger: (
0: $color-light-danger-0,
50: $color-light-danger-50,
100: $color-light-danger-100,
200: $color-light-danger-200,
300: $color-light-danger-300,
400: $color-light-danger-400,
500: $color-light-danger-500,
600: $color-light-danger-600,
700: $color-light-danger-700,
800: $color-light-danger-800,
900: $color-light-danger-900
),
success: (
0: $color-light-success-0,
50: $color-light-success-50,
100: $color-light-success-100,
200: $color-light-success-200,
300: $color-light-success-300,
400: $color-light-success-400,
500: $color-light-success-500,
600: $color-light-success-600,
700: $color-light-success-700,
800: $color-light-success-800,
900: $color-light-success-900
),
highlight: (
0: $color-light-highlight-0,
50: $color-light-highlight-50,
100: $color-light-highlight-100,
200: $color-light-highlight-200,
300: $color-light-highlight-300,
400: $color-light-highlight-400,
500: $color-light-highlight-500,
600: $color-light-highlight-600,
700: $color-light-highlight-700,
800: $color-light-highlight-800,
900: $color-light-highlight-900
),
neutral: (
0: $color-light-neutral-0,
50: $color-light-neutral-50,
100: $color-light-neutral-100,
200: $color-light-neutral-200,
300: $color-light-neutral-300,
400: $color-light-neutral-400,
500: $color-light-neutral-500,
600: $color-light-neutral-600,
700: $color-light-neutral-700,
800: $color-light-neutral-800,
900: $color-light-neutral-900
)
);
$_color-dark: (
primary: (
0: $color-dark-primary-0,
50: $color-dark-primary-50,
100: $color-dark-primary-100,
200: $color-dark-primary-200,
300: $color-dark-primary-300,
400: $color-dark-primary-400,
500: $color-dark-primary-500,
600: $color-dark-primary-600,
700: $color-dark-primary-700,
800: $color-dark-primary-800,
900: $color-dark-primary-900
),
secondary: (
0: $color-dark-secondary-0,
50: $color-dark-secondary-50,
100: $color-dark-secondary-100,
200: $color-dark-secondary-200,
300: $color-dark-secondary-300,
400: $color-dark-secondary-400,
500: $color-dark-secondary-500,
600: $color-dark-secondary-600,
700: $color-dark-secondary-700,
800: $color-dark-secondary-800,
900: $color-dark-secondary-900
),
tertiary: (
0: $color-dark-tertiary-0,
50: $color-dark-tertiary-50,
100: $color-dark-tertiary-100,
200: $color-dark-tertiary-200,
300: $color-dark-tertiary-300,
400: $color-dark-tertiary-400,
500: $color-dark-tertiary-500,
600: $color-dark-tertiary-600,
700: $color-dark-tertiary-700,
800: $color-dark-tertiary-800,
900: $color-dark-tertiary-900
),
info: (
0: $color-dark-info-0,
50: $color-dark-info-50,
100: $color-dark-info-100,
200: $color-dark-info-200,
300: $color-dark-info-300,
400: $color-dark-info-400,
500: $color-dark-info-500,
600: $color-dark-info-600,
700: $color-dark-info-700,
800: $color-dark-info-800,
900: $color-dark-info-900
),
warning: (
0: $color-dark-warning-0,
50: $color-dark-warning-50,
100: $color-dark-warning-100,
200: $color-dark-warning-200,
300: $color-dark-warning-300,
400: $color-dark-warning-400,
500: $color-dark-warning-500,
600: $color-dark-warning-600,
700: $color-dark-warning-700,
800: $color-dark-warning-800,
900: $color-dark-warning-900
),
danger: (
0: $color-dark-danger-0,
50: $color-dark-danger-50,
100: $color-dark-danger-100,
200: $color-dark-danger-200,
300: $color-dark-danger-300,
400: $color-dark-danger-400,
500: $color-dark-danger-500,
600: $color-dark-danger-600,
700: $color-dark-danger-700,
800: $color-dark-danger-800,
900: $color-dark-danger-900
),
success: (
0: $color-dark-success-0,
50: $color-dark-success-50,
100: $color-dark-success-100,
200: $color-dark-success-200,
300: $color-dark-success-300,
400: $color-dark-success-400,
500: $color-dark-success-500,
600: $color-dark-success-600,
700: $color-dark-success-700,
800: $color-dark-success-800,
900: $color-dark-success-900
),
highlight: (
0: $color-dark-highlight-0,
50: $color-dark-highlight-50,
100: $color-dark-highlight-100,
200: $color-dark-highlight-200,
300: $color-dark-highlight-300,
400: $color-dark-highlight-400,
500: $color-dark-highlight-500,
600: $color-dark-highlight-600,
700: $color-dark-highlight-700,
800: $color-dark-highlight-800,
900: $color-dark-highlight-900
),
neutral: (
0: $color-dark-neutral-0,
50: $color-dark-neutral-50,
100: $color-dark-neutral-100,
200: $color-dark-neutral-200,
300: $color-dark-neutral-300,
400: $color-dark-neutral-400,
500: $color-dark-neutral-500,
600: $color-dark-neutral-600,
700: $color-dark-neutral-700,
800: $color-dark-neutral-800,
900: $color-dark-neutral-900
)
);
@mixin color-style($prefix) {
:root,
:host {
@each $key, $value in $_color-light {
@if meta.type-of($value) == 'map' {
@each $k, $v in $value {
#{'--#{$prefix}-color-light-#{$key}-#{$k}'}: #{$v};
}
} @else {
#{'--#{$prefix}-color-light-#{$key}'}: #{$value};
}
}
// remap light colors to default colors
@each $key, $value in $_color-light {
@if meta.type-of($value) == 'map' {
@each $k, $v in $value {
#{'--#{$prefix}-color-#{$key}-#{$k}'}: var(--#{$prefix}-color-light-#{$key}-#{$k});
}
} @else {
#{'--#{$prefix}-color-light-#{$key}'}: var(--#{$prefix}-color-#{$key});
}
}
&.dark,
&[theme-mode='dark'] {
@each $key, $value in $_color-dark {
@if meta.type-of($value) == 'map' {
@each $k, $v in $value {
#{'--#{$prefix}-color-dark-#{$key}-#{$k}'}: #{$v};
}
} @else {
#{'--#{$prefix}-color-dark-#{$key}'}: #{$value};
}
}
// remap dark colors to default colors
@each $key, $value in $_color-dark {
@if meta.type-of($value) == 'map' {
@each $k, $v in $value {
#{'--#{$prefix}-color-#{$key}-#{$k}'}: var(--#{$prefix}-color-dark-#{$key}-#{$k});
}
} @else {
#{'--#{$prefix}-color-dark-#{$key}'}: var(--#{$prefix}-color-#{$key});
}
}
}
}
}
@function get-color($variant, $level, $mode: '') {
@if (list.index($variant, $variant) == false) {
@error "Invalid variant: #{$variant}";
} @else {
@if $mode == '' {
@return var(--#{$name}-color-#{$variant}-#{$level});
}
@return var(--#{$name}-color-#{$mode}-#{$variant}-#{$level});
}
}
@mixin _scrollbar-style($prefix) {
* {
/* Firefox */
scrollbar-color: var(--#{$prefix}-scheme-highlight) var(--#{$prefix}-scheme-transparent);
scrollbar-width: thin;
/* Styling the scrollbar in Chrome and Safari */
&::-webkit-scrollbar {
width: 10px;
}
/* Set thumb color for Chrome and Safari */
&::-webkit-scrollbar-thumb {
background-color: var(--#{$prefix}-scheme-highlight);
}
/* Set track color for Chrome and Safari */
&::-webkit-scrollbar-track {
background-color: var(--#{$prefix}-scheme-transparent);
}
}
}
@mixin _selection-style($prefix) {
* {
/* Set selection color */
&::selection,
&::-moz-selection {
background-color: var(--#{$prefix}-color-primary-500);
// color: white;
}
}
}
@mixin common-style($prefix) {
@include _scrollbar-style($prefix);
@include _selection-style($prefix);
}
@mixin duration-style($prefix) {
$durations: (
'short': $duration-short,
'medium': $duration-medium,
'long': $duration-long
);
:root,
:host {
@each $key, $value in $durations {
--#{$prefix}-duration-#{$key}: #{$value};
--mosaik-duration-#{$key}: var(--#{$prefix}-duration-#{$key});
}
}
}
@function get-duration($duration) {
@return var(--#{$name}-duration-#{$duration});
}
$_shadows-light: (
none: $elevation-none,
light: (
0: (
offset-x: $elevation-light-light-offset-x-0,
offset-y: $elevation-light-light-offset-y-0,
blur: $elevation-light-light-blur-0,
spread: $elevation-light-light-spread-0,
color: $elevation-light-light-color-0
)
),
semi-light: (
0: (
offset-x: $elevation-light-semilight-offset-x-0,
offset-y: $elevation-light-semilight-offset-y-0,
blur: $elevation-light-semilight-blur-0,
spread: $elevation-light-semilight-spread-0,
color: $elevation-light-semilight-color-0
)
),
regular: (
0: (
offset-x: $elevation-light-regular-offset-x-0,
offset-y: $elevation-light-regular-offset-y-0,
blur: $elevation-light-regular-blur-0,
spread: $elevation-light-regular-spread-0,
color: $elevation-light-regular-color-0
)
),
semi-bold: (
0: (
offset-x: $elevation-light-semibold-offset-x-0,
offset-y: $elevation-light-semibold-offset-y-0,
blur: $elevation-light-semibold-blur-0,
spread: $elevation-light-semibold-spread-0,
color: $elevation-light-semibold-color-0
)
),
bold: (
0: (
offset-x: $elevation-light-bold-offset-x-0,
offset-y: $elevation-light-bold-offset-y-0,
blur: $elevation-light-bold-blur-0,
spread: $elevation-light-bold-spread-0,
color: $elevation-light-bold-color-0
)
),
extra-bold: (
0: (
offset-x: $elevation-light-extrabold-offset-x-0,
offset-y: $elevation-light-extrabold-offset-y-0,
blur: $elevation-light-extrabold-blur-0,
spread: $elevation-light-extrabold-spread-0,
color: $elevation-light-extrabold-color-0
)
)
);
$_shadows-dark: (
none: $elevation-none,
light: (
0: (
offset-x: $elevation-dark-light-offset-x-0,
offset-y: $elevation-dark-light-offset-y-0,
blur: $elevation-dark-light-blur-0,
spread: $elevation-dark-light-spread-0,
color: $elevation-dark-light-color-0
)
),
semi-light: (
0: (
offset-x: $elevation-dark-semilight-offset-x-0,
offset-y: $elevation-dark-semilight-offset-y-0,
blur: $elevation-dark-semilight-blur-0,
spread: $elevation-dark-semilight-spread-0,
color: $elevation-dark-semilight-color-0
)
),
regular: (
0: (
offset-x: $elevation-dark-regular-offset-x-0,
offset-y: $elevation-dark-regular-offset-y-0,
blur: $elevation-dark-regular-blur-0,
spread: $elevation-dark-regular-spread-0,
color: $elevation-dark-regular-color-0
)
),
semi-bold: (
0: (
offset-x: $elevation-dark-semibold-offset-x-0,
offset-y: $elevation-dark-semibold-offset-y-0,
blur: $elevation-dark-semibold-blur-0,
spread: $elevation-dark-semibold-spread-0,
color: $elevation-dark-semibold-color-0
)
),
bold: (
0: (
offset-x: $elevation-dark-bold-offset-x-0,
offset-y: $elevation-dark-bold-offset-y-0,
blur: $elevation-dark-bold-blur-0,
spread: $elevation-dark-bold-spread-0,
color: $elevation-dark-bold-color-0
)
),
extra-bold: (
0: (
offset-x: $elevation-dark-extrabold-offset-x-0,
offset-y: $elevation-dark-extrabold-offset-y-0,
blur: $elevation-dark-extrabold-blur-0,
spread: $elevation-dark-extrabold-spread-0,
color: $elevation-dark-extrabold-color-0
)
)
);
@mixin elevation-style($prefix) {
:root,
:host {
$mode: 'light';
@include _generate-elevation-vars($_shadows-light, $prefix, $mode);
@include _generate-elevation-composite($_shadows-light, $prefix, $mode);
@include _remap-elevation-vars($_shadows-light, $prefix, $mode);
&.dark,
&[theme-mode='dark'] {
$mode: 'dark';
@include _generate-elevation-vars($_shadows-dark, $prefix, $mode);
@include _generate-elevation-composite($_shadows-dark, $prefix, $mode);
@include _remap-elevation-vars($_shadows-dark, $prefix, $mode);
}
}
}
@function get-elevation($type, $mode: '') {
$elevations: (
'': (
'none': --#{$name}-elevation-none,
'light': --#{$name}-elevation-#{$elevation-key-light},
'semi-light': --#{$name}-elevation-#{$elevation-key-semilight},
'regular': --#{$name}-elevation-#{$elevation-key-regular},
'semi-bold': --#{$name}-elevation-#{$elevation-key-semibold},
'bold': --#{$name}-elevation-#{$elevation-key-bold},
'extra-bold': --#{$name}-elevation-#{$elevation-key-extrabold}
),
'light': $_shadows-light,
'dark': $_shadows-dark
);
@if (list.index($elevation-key, $type) == null) {
@error "Invalid type: #{$type}";
}
@return var(map.get(map.get($elevations, $mode), $type));
}
@mixin layout-style($prefix, $radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
$layouts: ();
$layouts: map.merge(
$layouts,
(
'#{$prefix}-layout-radius': $radius
)
);
$layouts: map.merge(
$layouts,
(
'#{$prefix}-layout-thickness': $thickness
)
);
$layouts: map.merge(
$layouts,
(
'#{$prefix}-layout-space': $space
)
);
@if list.length($layouts) {
:root,
:host {
@each $key, $value in $layouts {
#{'--#{$key}'}: #{$value};
}
}
}
}
@function get-layout($key) {
$layouts: (
'radius': --#{$name}-layout-radius,
'space': --#{$name}-layout-space,
'thickness': --#{$name}-layout-thickness
);
@if map.has-key($layouts, $key) {
@return var(map.get($layouts, $key));
} @else {
@error "Invalid layout value: #{$key}";
}
}
$_scheme-light: (
surface: $scheme-light-surface,
background: $scheme-light-background,
foreground: $scheme-light-foreground,
highlight: $scheme-light-highlight,
middlelight: $scheme-light-middlelight,
lowlight: $scheme-light-lowlight,
transparent: $scheme-light-transparent,
semi-transparent: $scheme-light-semi-transparent,
disabled: $scheme-light-disabled,
contrast: $scheme-light-contrast,
selection: $scheme-light-selection
);
$_scheme-dark: (
surface: $scheme-dark-surface,
background: $scheme-dark-background,
foreground: $scheme-dark-foreground,
highlight: $scheme-dark-highlight,
middlelight: $scheme-dark-middlelight,
lowlight: $scheme-dark-lowlight,
transparent: $scheme-dark-transparent,
semi-transparent: $scheme-dark-semi-transparent,
disabled: $scheme-dark-disabled,
contrast: $scheme-dark-contrast,
selection: $scheme-dark-selection
);
@mixin scheme-style($prefix) {
:root,
:host {
@each $key, $value in $_scheme-light {
#{'--#{$prefix}-scheme-light-#{$key}'}: #{$value};
}
@each $key, $value in $_scheme-light {
#{'--#{$prefix}-scheme-#{$key}'}: var(--#{$prefix}-scheme-light-#{$key});
}
&.dark,
&[theme-mode='dark'] {
@each $key, $value in $_scheme-dark {
#{'--#{$prefix}-scheme-dark-#{$key}'}: #{$value};
}
@each $key, $value in $_scheme-dark {
#{'--#{$prefix}-scheme-#{$key}'}: var(--#{$prefix}-scheme-dark-#{$key});
}
}
}
}
@function get-scheme($key, $mode: '') {
@if ($mode == '') {
$mode: '';
}
$schemes: (
'': (
'surface': --#{$name}-scheme-surface,
'background': --#{$name}-scheme-background,
'foreground': --#{$name}-scheme-foreground,
'highlight': --#{$name}-scheme-highlight,
'middlelight': --#{$name}-scheme-middlelight,
'lowlight': --#{$name}-scheme-lowlight,
'transparent': --#{$name}-scheme-transparent,
'semi-transparent': --#{$name}-scheme-semi-transparent,
'disabled': --#{$name}-scheme-disabled,
'contrast': --#{$name}-scheme-contrast,
'selection': --#{$name}-scheme-selection
),
'light': (
'surface': --#{$name}-scheme-light-surface,
'background': --#{$name}-scheme-light-background,
'foreground': --#{$name}-scheme-light-foreground,
'highlight': --#{$name}-scheme-light-highlight,
'middlelight': --#{$name}-scheme-light-middlelight,
'lowlight': --#{$name}-scheme-light-lowlight,
'transparent': --#{$name}-scheme-light-transparent,
'semi-transparent': --#{$name}-scheme-light-semi-transparent,
'disabled': --#{$name}-scheme-light-disabled,
'contrast': --#{$name}-scheme-light-contrast,
'selection': --#{$name}-scheme-light-selection
),
'dark': (
'surface': --#{$name}-scheme-dark-surface,
'background': --#{$name}-scheme-dark-background,
'foreground': --#{$name}-scheme-dark-foreground,
'highlight': --#{$name}-scheme-dark-highlight,
'middlelight': --#{$name}-scheme-dark-middlelight,
'lowlight': --#{$name}-scheme-dark-lowlight,
'transparent': --#{$name}-scheme-dark-transparent,
'semi-transparent': --#{$name}-scheme-dark-semi-transparent,
'disabled': --#{$name}-scheme-dark-disabled,
'contrast': --#{$name}-scheme-dark-contrast,
'selection': --#{$name}-scheme-dark-selection
)
);
@if map.has-key($schemes, $mode) {
@if (map.has-key(map.get($schemes, $mode), $key)) {
@return var(map.get(map.get($schemes, $mode), $key));
} @else {
@error "Invalid scheme key: #{$key}";
}
} @else {
@error "Invalid scheme mode: #{$mode}";
}
}
@function get-size($size) {
@return var(--#{$name}-size-#{$size});
}
@function _typography-palette() {
$base-styles: (-moz-osx-font-smoothing: grayscale, -webkit-font-smoothing: antialiased, font-family: $font-family);
$scale-styles: (
'typography': $base-styles,
'typography-headline1': (
font-family: $typography-headline1-font-family,
font-size: $typography-headline1-font-size,
line-height: $typography-headline1-line-height,
font-weight: $typography-headline1-font-weight,
letter-spacing: $typography-headline1-letter-spacing,
text-decoration: $typography-headline1-text-decoration,
text-transform: $typography-headline1-text-transform
),
'typography-headline2': (
font-family: $typography-headline2-font-family,
font-size: $typography-headline2-font-size,
line-height: $typography-headline2-line-height,
font-weight: $typography-headline2-font-weight,
letter-spacing: $typography-headline2-letter-spacing,
text-decoration: $typography-headline2-text-decoration,
text-transform: $typography-headline2-text-transform
),
'typography-headline3': (
font-family: $typography-headline3-font-family,
font-size: $typography-headline3-font-size,
line-height: $typography-headline3-line-height,
font-weight: $typography-headline3-font-weight,
letter-spacing: $typography-headline3-letter-spacing,
text-decoration: $typography-headline3-text-decoration,
text-transform: $typography-headline3-text-transform
),
'typography-headline4': (
font-family: $typography-headline4-font-family,
font-size: $typography-headline4-font-size,
line-height: $typography-headline4-line-height,
font-weight: $typography-headline4-font-weight,
letter-spacing: $typography-headline4-letter-spacing,
text-decoration: $typography-headline4-text-decoration,
text-transform: $typography-headline4-text-transform
),
'typography-headline5': (
font-family: $typography-headline5-font-family,
font-size: $typography-headline5-font-size,
line-height: $typography-headline5-line-height,
font-weight: $typography-headline5-font-weight,
letter-spacing: $typography-headline5-letter-spacing,
text-decoration: $typography-headline5-text-decoration,
text-transform: $typography-headline5-text-transform
),
'typography-headline6': (
font-family: $typography-headline6-font-family,
font-size: $typography-headline6-font-size,
line-height: $typography-headline6-line-height,
font-weight: $typography-headline6-font-weight,
letter-spacing: $typography-headline6-letter-spacing,
text-decoration: $typography-headline6-text-decoration,
text-transform: $typography-headline6-text-transform
),
'typography-subtitle1': (
font-family: $typography-subtitle1-font-family,
font-size: $typography-subtitle1-font-size,
line-height: $typography-subtitle1-line-height,
font-weight: $typography-subtitle1-font-weight,
letter-spacing: $typography-subtitle1-letter-spacing,
text-decoration: $typography-subtitle1-text-decoration,
text-transform: $typography-subtitle1-text-transform
),
'typography-subtitle2': (
font-family: $typography-subtitle2-font-family,
font-size: $typography-subtitle2-font-size,
line-height: $typography-subtitle2-line-height,
font-weight: $typography-subtitle2-font-weight,
letter-spacing: $typography-subtitle2-letter-spacing,
text-decoration: $typography-subtitle2-text-decoration,
text-transform: $typography-subtitle2-text-transform
),
'typography-body1': (
font-family: $typography-body1-font-family,
font-size: $typography-body1-font-size,
line-height: $typography-body1-line-height,
font-weight: $typography-body1-font-weight,
letter-spacing: $typography-body1-letter-spacing,
text-decoration: $typography-body1-text-decoration,
text-transform: $typography-body1-text-transform
),
'typography-supporting': (
font-family: $typography-supporting-font-family,
font-size: $typography-supporting-font-size,
line-height: $typography-supporting-line-height,
font-weight: $typography-supporting-font-weight,
letter-spacing: $typography-supporting-letter-spacing,
text-decoration: $typography-supporting-text-decoration,
text-transform: $typography-supporting-text-transform
),
'typography-body2': (
font-family: $typography-body2-font-family,
font-size: $typography-body2-font-size,
line-height: $typography-body2-line-height,
font-weight: $typography-body2-font-weight,
letter-spacing: $typography-body2-letter-spacing,
text-decoration: $typography-body2-text-decoration,
text-transform: $typography-body2-text-transform
),
'typography-caption': (
font-family: $typography-caption-font-family,
font-size: $typography-caption-font-size,
line-height: $typography-caption-line-height,
font-weight: $typography-caption-font-weight,
letter-spacing: $typography-caption-letter-spacing,
text-decoration: $typography-caption-text-decoration,
text-transform: $typography-caption-text-transform
),
'typography-button': (
font-family: $typography-button-font-family,
font-size: $typography-button-font-size,
line-height: $typography-button-line-height,
font-weight: $typography-button-font-weight,
letter-spacing: $typography-button-letter-spacing,
text-decoration: $typography-button-text-decoration,
text-transform: $typography-button-text-transform
),
'typography-overline': (
font-family: $typography-overline-font-family,
font-size: $typography-overline-font-size,
line-height: $typography-overline-line-height,
font-weight: $typography-overline-font-weight,
letter-spacing: $typography-overline-letter-spacing,
text-decoration: $typography-overline-text-decoration,
text-transform: $typography-overline-text-transform
)
);
@each $style, $style-props in $scale-styles {
// Merge base properties for all styles.
$style-props: map.merge($base-styles, $style-props);
// Override original styles with new styles.
$scale-styles: map.merge($scale-styles, (#{$style}: $style-props));
}
@return $scale-styles;
}
@mixin typography-style($prefix) {
$typographies-map: _typography-palette();
:root,
:host {
--#{$prefix}-font-family: #{$font-family};
@each $style in map.keys($typographies-map) {
@if $style != 'typography' {
@if not map.has-key($typographies-map, $style) {
@error 'Invalid style specified! #{$style} does not exist. Choose one of #{map.keys($typographies-map)}';
}
$style-props: map.get($typographies-map, $style);
--#{$prefix}-#{$style}-font-family: #{map.get($style-props, 'font-family')};
--#{$prefix}-#{$style}-font-size: #{map.get($style-props, 'font-size')};
--#{$prefix}-#{$style}-line-height: #{map.get($style-props, 'line-height')};
--#{$prefix}-#{$style}-font-weight: #{map.get($style-props, 'font-weight')};
--#{$prefix}-#{$style}-letter-spacing: #{map.get($style-props, 'letter-spacing')};
--#{$prefix}-#{$style}-text-decoration: #{map.get($style-props, 'text-decoration')};
--#{$prefix}-#{$style}-text-transform: #{map.get($style-props, 'text-transform')};
--#{$prefix}-#{$style}: #{map.get($style-props, 'font-weight')} #{map.get($style-props, 'font-size')}/#{map.get($style-props, 'line-height')} #{map.get($style-props, 'font-family')};
}
}
}
@each $style in map.keys($typographies-map) {
.#{$style} {
$style-props: map.get($typographies-map, $style);
@if not map.has-key($typographies-map, $style) {
@error 'Invalid style specified! #{$style} does not exist. Choose one of #{map.keys($typographies-map)}';
}
@each $key, $value in $style-props {
#{$key}: $value;
}
}
}
}
@function get-typography($type, $property) {
$properties: (
'font-family': --#{$name}-typography-#{$type}-font-family,
'font-size': --#{$name}-typography-#{$type}-font-size,
'line-height': --#{$name}-typography-#{$type}-line-height,
'font-weight': --#{$name}-typography-#{$type}-font-weight,
'letter-spacing': --#{$name}-typography-#{$type}-letter-spacing,
'text-decoration': --#{$name}-typography-#{$type}-text-decoration,
'text-transform': --#{$name}-typography-#{$type}-text-transform
);
@if map.has-key($properties, $property) {
@return var(map.get($properties, $property));
} @else {
@error "Invalid typography property: #{$property}";
}
}
@mixin joy-style($radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
$theme: 'joy';
@include layout-style($theme, $radius, $thickness, $space);
@include duration-style($theme);
@include scheme-style($theme);
@include color-style($theme);
@include elevation-style($theme);
@include typography-style($theme);
@include common-style($theme);
:host {
@content;
}
}
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$absolute-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$absolute-item-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$accordion-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$actionbar-group-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': calc(var(--joy-layout-space) / 2),
'label-color': var(--joy-scheme-muted),
'label-font-size': var(--joy-typography-caption-font-size),
'label-font-weight': 600,
'padding-bottom': 0,
'padding-left': 0,
'padding-right': 0,
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$actionbar-item-props: (
'background-color': transparent,
'background-color-active': var(--joy-scheme-selected),
'background-color-hover': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': calc(var(--joy-layout-space) / 2),
'padding-right': calc(var(--joy-layout-space) / 2),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$actionbar-separator-props: (
'background-color': var(--joy-scheme-highlight),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thickness': 1px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$actionbar-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'min-height': 48px,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$alert-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$anchor-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-typography-button-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$app-props: (
'background-color': var(--joy-scheme-background),
'body-offset-top': 0px,
'border-color': unset,
'border-radius': unset,
'border-style': solid,
'border-width': unset,
'font-family': var(--joy-typography-body1-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'line-thickness': var(--joy-layout-thickness),
'nav-height': 100%,
'nav-width': 320px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none,
'view-border-color': unset,
'view-border-radius': unset,
'view-border-style': solid,
'view-border-width': unset
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$app-header-props: (
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-typography-headline6-font-family),
'font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'font-line-height': var(--joy-typography-headline6-line-height),
'font-size': var(--joy-typography-headline6-font-size),
'font-text-decoration': var(--joy-typography-headline6-text-decoration),
'font-text-transform': var(--joy-typography-headline6-text-transform),
'font-weight': var(--joy-typography-headline6-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'line-thickness': var(--joy-layout-thickness),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$audio-props: (
'aspect-ratio': 1,
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'legend-font-family': var(--joy-font-family),
'legend-font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'legend-font-line-height': var(--joy-typography-caption-line-height),
'legend-font-size': var(--joy-typography-caption-font-size),
'legend-font-text-decoration': var(--joy-typography-caption-text-decoration),
'legend-font-text-transform': var(--joy-typography-caption-text-transform),
'legend-font-weight': var(--joy-typography-caption-font-weight),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, background-color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$auto-complete-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$avatar-props: (
'background-color': var(--joy-scheme-background),
'badge-gap': var(--joy-layout-thickness),
'badge-horizontal-align': right,
'badge-radius': var(--joy-layout-space),
'badge-vertical-align': bottom,
'border-color': var(--joy-scheme-highlight),
'border-radius': 50%,
'border-style': solid,
'border-width': 0px,
'diameter': 64px,
'font-family': var(--joy-font-family),
'font-letter-spacing': 0px,
'font-line-height': calc(var(--avatar-font-size) + 4px),
'font-size': 32px,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': 600,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'offset': calc(var(--joy-layout-space) * 2),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$avatar-group-props: (
'background-color': var(--joy-color-neutral-500),
'border-color': var(--joy-scheme-highlight),
'border-radius': 50%,
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-color-neutral-50),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (margin-left),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$back-top-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$backdrop-props: (
'background-color': var(--joy-scheme-semi-transparent),
'blur': 4px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (opacity, backdrop-filter),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$badge-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) / 2),
'height': auto,
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$banner-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$banner-group-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$banner-header-props: (
'background-color': unset,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$banner-sub-header-props: (
'background-color': unset,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$box-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': unset,
'border-radius': 0,
'border-style': solid,
'border-width': 0,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': var(--joy-layout-space),
'height': auto,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none,
'width': auto
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$breadcrumb-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$breadcrumb-item-props: (
'border-style': none,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$busy-state-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-middlelight),
'gap': var(--joy-layout-space),
'header-font-family': var(--joy-font-family),
'header-font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'header-font-line-height': var(--joy-typography-body1-line-height),
'header-font-size': var(--joy-typography-body1-font-size),
'header-font-text-decoration': var(--joy-typography-body1-text-decoration),
'header-font-text-transform': var(--joy-typography-body1-text-transform),
'header-font-weight': var(--joy-typography-body1-font-weight),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$button-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-typography-button-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
'icon-min-width': 36px,
'icon-min-height': 36px,
'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
'min-width': 64px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'progress-ring-width': var(--joy-layout-thickness),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none,
'width': auto
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$button-group-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': 0,
'padding-bottom': 0,
'padding-left': 0,
'padding-right': 0,
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$calendar-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'divider-height': 1px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$calendar-days-view-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$calendar-header-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-transparent),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-lowlight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$calendar-item-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0,
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': 4px,
'marker-gap': 2px,
'marker-offset-bottom': 4px,
'marker-overflow-font-size': 8px,
'min-height': 48px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'ripple-color': unset,
'ripple-duration': 0.20s,
'selection-background-color': var(--joy-scheme-selection),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'today-border-color': var(--joy-color-primary-500),
'today-border-width': 2px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$calendar-months-view-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$calendar-sub-header-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-transparent),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': var(--joy-layout-thickness),
'font': var(--calendar-sub-header-font-weight) var(--calendar-sub-header-font-size) / var(--calendar-sub-header-line-height) var(--calendar-sub-header-font-family),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'line-height': var(--joy-typography-body1-line-height),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$calendar-years-view-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$camera-props: (
'background-color': var(--joy-scheme-background),
'border-radius': var(--joy-layout-radius),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$card-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'divider-height': 1px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$card-actions-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': 0,
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$card-content-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$card-footer-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$card-header-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$card-sub-title-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
'font-line-height': var(--joy-typography-subtitle2-line-height),
'font-size': var(--joy-typography-subtitle2-font-size),
'font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
'font-text-transform': var(--joy-typography-subtitle2-text-transform),
'font-weight': var(--joy-typography-subtitle2-font-weight),
'foreground-color': var(--joy-scheme-middlelight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$card-title-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'font-line-height': var(--joy-typography-headline6-line-height),
'font-size': var(--joy-typography-headline6-font-size),
'font-text-decoration': var(--joy-typography-headline6-text-decoration),
'font-text-transform': var(--joy-typography-headline6-text-transform),
'font-weight': var(--joy-typography-headline6-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$carousel-props: (
'deck-animation-duration': "0.4s",
'deck-rotation': "3deg",
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$carousel2-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$carousel-item-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$carousel-item2-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$cell-props: (
'background-color': var(--joy-scheme-background),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'sub-font-family': var(--joy-font-family),
'sub-font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'sub-font-line-height': var(--joy-typography-body2-line-height),
'sub-font-size': var(--joy-typography-body2-font-size),
'sub-font-text-decoration': var(--joy-typography-body2-text-decoration),
'sub-font-text-transform': var(--joy-typography-body2-text-transform),
'sub-font-weight': var(--joy-typography-body2-font-weight),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$cell-group-props: (
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-overline-letter-spacing),
'font-line-height': var(--joy-typography-overline-line-height),
'font-size': var(--joy-typography-overline-font-size),
'font-text-decoration': var(--joy-typography-overline-text-decoration),
'font-text-transform': var(--joy-typography-overline-text-transform),
'font-weight': var(--joy-typography-overline-font-weight),
'gap': unset,
'inline-end': 0,
'inline-start': calc(var(--joy-layout-space)*2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': var(--joy-elevation-light-bold-offset-x-0) var(--joy-elevation-light-bold-offset-y-0) var(--joy-elevation-light-bold-blur-0) var(--joy-elevation-light-bold-spread-0) var(--joy-elevation-light-bold-color-0),
'shadow-blur': var(--joy-elevation-light-bold-blur-0),
'shadow-color': var(--joy-elevation-light-bold-color-0),
'shadow-offset-x': var(--joy-elevation-light-bold-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-bold-offset-y-0),
'shadow-spread': var(--joy-elevation-light-bold-spread-0),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (background-color, color, border-color, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chart-props: (
'background-color': var(--joy-scheme-background),
'font-family': var(--joy-typography-headline6-font-family),
'font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'font-line-height': var(--joy-typography-headline6-line-height),
'font-size': var(--joy-typography-headline6-font-size),
'font-text-decoration': var(--joy-typography-headline6-text-decoration),
'font-text-transform': var(--joy-typography-headline6-text-transform),
'font-weight': var(--joy-typography-headline6-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chat-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'line-thickness': var(--joy-layout-thickness),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chat-header-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'height': 64px,
'padding-bottom': 0,
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chat-marker-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'font-line-height': var(--joy-typography-caption-line-height),
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': var(--joy-typography-caption-text-decoration),
'font-text-transform': var(--joy-typography-caption-text-transform),
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chat-message-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate, transform),
'translate': none,
'white-space': 44px
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chat-message-avatar-props: (
'background-color': var(--joy-scheme-background),
'badge-gap': var(--joy-layout-thickness),
'badge-horizontal-align': right,
'badge-radius': var(--joy-layout-space),
'badge-vertical-align': bottom,
'border-color': var(--joy-scheme-highlight),
'border-radius': 50%,
'border-style': solid,
'border-width': 0px,
'diameter': 64px,
'font-family': var(--joy-font-family),
'font-letter-spacing': 0px,
'font-line-height': calc(var(--avatar-font-size) + 4px),
'font-size': 32px,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': 600,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'offset': calc(var(--joy-layout-space) * 2),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chat-message-divider-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'font-line-height': var(--joy-typography-caption-line-height),
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': var(--joy-typography-caption-text-decoration),
'font-text-transform': var(--joy-typography-caption-text-transform),
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, opacity, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chat-message-reaction-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'font-line-height': var(--joy-typography-caption-line-height),
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': var(--joy-typography-caption-text-decoration),
'font-text-transform': var(--joy-typography-caption-text-transform),
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) / 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$check-box-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': calc(var(--joy-layout-radius) / 2),
'border-style': none,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 1.5),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$check-box-group-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': none,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$checkmark-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'box-size': 48px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 24px,
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'thickness': 2px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color),
'translate': none,
'width': 24px
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chip-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 14px,
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 28px,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chip-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'prefix-icon-size': 20px,
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'suffix-icon-size': 20px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$chip-group-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': none,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$choice-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'checkmark-border-radius': calc(var(--joy-layout-radius) / 2),
'focus-ring-border-radius': calc(var(--joy-layout-radius) * 1.5),
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-outward-offset': calc(var(--joy-layout-space) / 2),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$choice-group-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': none,
'border-width': unset,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': unset,
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$choice-group-header-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': solid,
'border-width': unset,
'font-family': var(--joy-typography-subtitle2-font-family),
'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
'font-line-height': var(--joy-typography-subtitle2-line-height),
'font-size': var(--joy-typography-subtitle2-font-size),
'font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
'font-text-transform': var(--joy-typography-subtitle2-text-transform),
'font-weight': var(--joy-typography-subtitle2-font-weight),
'foreground-color': unset,
'gap': calc(var(--joy-layout-space) / 4),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$clickable-props: (
'background-color': transparent,
'border-color': unset,
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': unset,
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (border-color, background-color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$code-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-area-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-editor-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-middlelight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': auto,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, border-color, box-shadow),
'translate': none,
'width': 320px
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-editor-alpha-slider-props: (
'background-color': transparent,
'border-color': transparent,
'border-radius': calc(var(--joy-layout-radius) / 2),
'border-style': none,
'border-width': 0,
'checkerboard-size': 8px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'height': 8px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'thumb-background-color': var(--joy-scheme-highlight),
'thumb-border-color': var(--joy-scheme-highlight),
'thumb-border-radius': 50%,
'thumb-border-width': var(--joy-layout-thickness),
'thumb-shadow': var(--joy-elevation-light-light),
'thumb-size': 14px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (box-shadow, border-color),
'translate': none,
'width': 100%
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-editor-area-props: (
'background-color': transparent,
'border-color': transparent,
'border-radius': calc(var(--joy-layout-radius) / 2),
'border-style': none,
'border-width': 0,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'height': calc(var(--joy-layout-space) * 16),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'thumb-border-color': var(--joy-scheme-surface),
'thumb-border-radius': 50%,
'thumb-border-width': var(--joy-layout-thickness),
'thumb-shadow': var(--joy-elevation-light-light),
'thumb-size': calc(var(--joy-layout-space) * 1.5),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (box-shadow, border-color),
'translate': none,
'width': 100%
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-editor-hue-slider-props: (
'background-color': transparent,
'border-color': transparent,
'border-radius': calc(var(--joy-layout-radius) / 2),
'border-style': none,
'border-width': 0,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'height': 8px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'thumb-background-color': var(--joy-scheme-highlight),
'thumb-border-color': var(--joy-scheme-highlight),
'thumb-border-radius': 50%,
'thumb-border-width': var(--joy-layout-thickness),
'thumb-shadow': var(--joy-elevation-light-light),
'thumb-size': 14px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (box-shadow, border-color),
'translate': none,
'width': 100%
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-editor-inputs-props: (
'background-color': transparent,
'border-color': var(--joy-scheme-middlelight),
'border-radius': calc(var(--joy-layout-radius) / 2),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) / 2),
'height': auto,
'input-background-color': transparent,
'input-border-color': var(--joy-scheme-middlelight),
'input-border-radius': calc(var(--joy-layout-radius) / 2),
'input-border-width': var(--joy-layout-thickness),
'input-height': calc(var(--joy-layout-space) * 3),
'label-color': var(--joy-scheme-text-variant),
'label-font-size': var(--joy-typography-overline-font-size),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (border-color, background-color),
'translate': none,
'width': 100%
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-editor-palette-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': calc(var(--joy-layout-radius) / 4),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'checkerboard-size': var(--joy-layout-space),
'color-item-border-color': var(--joy-scheme-highlight),
'color-item-border-radius': calc(var(--joy-layout-radius) / 4),
'color-item-border-width': var(--joy-layout-thickness),
'color-item-size': 24px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-overline-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-overline-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 0.75),
'height': auto,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'preview-color-item-size': 16px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (transform, border-color),
'translate': none,
'width': 100%
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-editor-shade-slider-props: (
'background-color': transparent,
'border-color': transparent,
'border-radius': calc(var(--joy-layout-radius) / 2),
'border-style': none,
'border-width': 0,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'height': 8px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'thumb-background-color': var(--joy-scheme-highlight),
'thumb-border-color': var(--joy-scheme-highlight),
'thumb-border-radius': 50%,
'thumb-border-width': var(--joy-layout-thickness),
'thumb-shadow': var(--joy-elevation-light-light),
'thumb-size': 14px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (box-shadow, border-color),
'translate': none,
'width': 100%
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-editor-swatch-props: (
'background-color': transparent,
'border-color': var(--joy-scheme-middlelight),
'border-radius': 50%,
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'checkerboard-size': 8px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'height': calc(var(--joy-layout-space) * 4),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (opacity, background-color),
'translate': none,
'width': calc(var(--joy-layout-space) * 4)
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-picker-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'size': 24px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-slider-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': solid,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-swatch-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'size': 24px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-swatch-group-props: (
'background-color': var(--joy-color-neutral-500),
'border-color': var(--joy-scheme-highlight),
'border-radius': 50%,
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-overline-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-overline-font-weight),
'foreground-color': var(--joy-color-neutral-50),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (margin-left),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$color-thumb-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'size': 24px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$combo-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$combo-item-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 0px,
'border-style': solid,
'border-width': 0px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 3),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'ripple-color': var(--joy-color-light-secondary-200),
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$combo-item-visual-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': calc(var(--joy-layout-space) * 3),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$comment-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'inner-gap': var(--joy-layout-space),
'nested-indent': 24px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, background-color, border-color, opacity, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$compound-button-props: (
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': auto,
'icon-min-width': 36px,
'icon-min-height': 36px,
'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
'min-width': 64px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'progress-ring-width': var(--joy-layout-thickness),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none,
'width': auto
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$content-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$cookies-consent-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$data-list-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$data-table-props: (
'border-radius': var(--joy-layout-radius),
'cell-height': 56px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$date-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$date-time-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$designer-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$designer-canvas-props: (
'background-color': var(--joy-scheme-surface),
'dot-color': var(--joy-color-neutral-400),
'dot-size': 1px,
'dot-spacing': 20px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$designer-content-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$designer-frame-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-color-neutral-300),
'border-width': 1px,
'bounds-color': var(--joy-color-neutral-500),
'bounds-font-size': 11px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dialog-props: (
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'divider-height': 1px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space)*2),
'padding-right': calc(var(--joy-layout-space)*2),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0),
'shadow-blur': var(--joy-elevation-light-regular-blur-0),
'shadow-color': var(--joy-elevation-light-regular-color-0),
'shadow-offset-x': var(--joy-elevation-light-regular-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-regular-offset-y-0),
'shadow-spread': var(--joy-elevation-light-regular-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dialog-actions-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dialog-content-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dialog-footer-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dialog-header-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dialog-header-sub-text-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
'font-line-height': var(--joy-typography-subtitle2-line-height),
'font-size': var(--joy-typography-subtitle2-font-size),
'font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
'font-text-transform': var(--joy-typography-subtitle2-text-transform),
'font-weight': var(--joy-typography-subtitle2-font-weight),
'foreground-color': var(--joy-scheme-middlelight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dialog-header-text-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'font-line-height': var(--joy-typography-headline6-line-height),
'font-size': var(--joy-typography-headline6-font-size),
'font-text-decoration': var(--joy-typography-headline6-text-decoration),
'font-text-transform': var(--joy-typography-headline6-text-transform),
'font-weight': var(--joy-typography-headline6-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$disclosure-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dismiss-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$divider-props: (
'background-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-supporting-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-supporting-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thickness': var(--joy-layout-thickness),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dock-panel-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dot-props: (
'background-color': var(--joy-color-neutral-500),
'border-color': var(--joy-scheme-highlight),
'border-radius': 0px,
'border-style': solid,
'border-width': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-color-neutral-50),
'gap': 0px,
'padding-bottom': 0px,
'padding-left': 0px,
'padding-right': 0px,
'padding-top': 0px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'size': 16px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dot-group-props: (
'background-color': var(--joy-color-neutral-500),
'border-color': var(--joy-scheme-highlight),
'border-radius': 50%,
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-supporting-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-supporting-font-weight),
'foreground-color': var(--joy-color-neutral-50),
'gap': var(--joy-layout-space),
'padding-bottom': 4px,
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': 4px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (margin-left),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drawer-props: (
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'divider-height': 1px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 100%,
'line-thickness': var(--joy-layout-thickness),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, margin, width, max-width, height),
'translate': none,
'viewport-inset': calc(var(--joy-layout-space) * 2),
'width': 320px
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drawer-actions-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drawer-container-props: (
'background-color': var(--joy-scheme-surface),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drawer-content-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'inset-bottom': var(--joy-layout-space),
'inset-left': 0px,
'inset-right': var(--joy-layout-space),
'inset-top': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drawer-footer-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drawer-header-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drawer-header-sub-text-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
'font-line-height': var(--joy-typography-subtitle2-line-height),
'font-size': var(--joy-typography-subtitle2-font-size),
'font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
'font-text-transform': var(--joy-typography-subtitle2-text-transform),
'font-weight': var(--joy-typography-subtitle2-font-weight),
'foreground-color': var(--joy-scheme-middlelight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drawer-header-text-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'font-line-height': var(--joy-typography-headline6-line-height),
'font-size': var(--joy-typography-headline6-font-size),
'font-text-decoration': var(--joy-typography-headline6-text-decoration),
'font-text-transform': var(--joy-typography-headline6-text-transform),
'font-weight': var(--joy-typography-headline6-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drawer-rail-props: (
'divider-color': var(--joy-scheme-highlight),
'divider-width': 1px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none,
'width': calc(var(--joy-layout-space) * 12)
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drop-down-button-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': auto,
'icon-min-width': 36px,
'icon-min-height': 36px,
'line-height': calc(var(--dropdown-button-font-line-height) - 4px),
'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
'min-width': 64px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'progress-ring-width': var(--joy-layout-thickness),
'progress-thickness': var(--joy-layout-thickness),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transform': none,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none,
'width': auto
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$drop-zone-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': dashed,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$dropdown-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': solid,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'panel-background-color': var(--joy-scheme-background),
'panel-border-color': var(--joy-scheme-highlight),
'panel-border-radius': var(--joy-layout-radius),
'panel-border-style': solid,
'panel-border-width': var(--joy-layout-thickness),
'panel-box-shadow': 0 4px 12px rgba(0, 0, 0, 0.15),
'panel-padding': 0,
'panel-z-index': 1000,
'panel-max-height': 200px,
'panel-offset': 8px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$duration-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$elevation-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$emoji-props: (
'background-color': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$empty-state-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-middlelight),
'gap': var(--joy-layout-space),
'header-font-family': var(--joy-font-family),
'header-font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'header-font-line-height': var(--joy-typography-body1-line-height),
'header-font-size': var(--joy-typography-body1-font-size),
'header-font-text-decoration': var(--joy-typography-body1-text-decoration),
'header-font-text-transform': var(--joy-typography-body1-text-transform),
'header-font-weight': var(--joy-typography-body1-font-weight),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$epg-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 0,
'border-style': none,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$epg-channel-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 0,
'border-style': none,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$epg-minimap-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 0,
'border-style': none,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$epg-now-line-props: (
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$epg-program-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$epg-timeline-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$error-props: (
'background-color': transparent,
'border-color': transparent,
'border-radius': 0px,
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-typography-supporting-font-family),
'font-letter-spacing': var(--joy-typography-supporting-letter-spacing),
'font-line-height': var(--joy-typography-supporting-line-height),
'font-size': var(--joy-typography-supporting-font-size),
'font-text-decoration': var(--joy-typography-supporting-text-decoration),
'font-text-transform': var(--joy-typography-supporting-text-transform),
'font-weight': var(--joy-typography-supporting-font-weight),
'foreground-color': var(--joy-color-danger-500),
'gap': 4px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$error-state-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'header-font-family': var(--joy-font-family),
'header-font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'header-font-line-height': var(--joy-typography-body1-line-height),
'header-font-size': var(--joy-typography-body1-font-size),
'header-font-text-decoration': var(--joy-typography-body1-text-decoration),
'header-font-text-transform': var(--joy-typography-body1-text-transform),
'header-font-weight': var(--joy-typography-body1-font-weight),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$expandable-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$expander-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'divider-height': 1px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow, opacity, box-shadow, transform, margin),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$expander-group-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': 0,
'padding-left': 0,
'padding-right': 0,
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease-out,
'transition-property': (margin),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$expander-header-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
'font-line-height': var(--joy-typography-subtitle2-line-height),
'font-size': var(--joy-typography-subtitle2-font-size),
'font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
'font-text-transform': var(--joy-typography-subtitle2-text-transform),
'font-weight': var(--joy-typography-subtitle2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$expander-sub-header-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
'font-line-height': var(--joy-typography-subtitle2-line-height),
'font-size': var(--joy-typography-subtitle2-font-size),
'font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
'font-text-transform': var(--joy-typography-subtitle2-text-transform),
'font-weight': var(--joy-typography-subtitle2-font-weight),
'foreground-color': var(--joy-scheme-middlelight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$file-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$file-picker-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': solid,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$file-upload-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': none,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$file-upload-item-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': solid,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$flip-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$floating-props: (
'arrow-padding-offset': calc(var(--floating-arrow-size-diagonal) - var(--floating-arrow-size)),
'arrow-size': 6px,
'arrow-size-diagonal': calc(var(--floating-arrow-size) * .7071),
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': none,
'padding-bottom': none,
'padding-left': none,
'padding-right': none,
'padding-top': none,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$floating-action-button-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-typography-button-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'icon-min-width': 36px,
'icon-min-height': 36px,
'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
'min-width': 64px,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'progress-ring-width': var(--joy-layout-thickness),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$floating-action-button-group-props: (
'font-family': var(--joy-typography-button-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$floating-trigger-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$flow-board-props: (
'background-color': transparent,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding': 0px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$flow-board-column-props: (
'background-color': var(--joy-scheme-surface),
'body-padding-bottom': var(--joy-layout-space),
'body-padding-left': calc(var(--joy-layout-space) * 1.5),
'body-padding-right': calc(var(--joy-layout-space) * 1.5),
'body-padding-top': var(--joy-layout-space),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'footer-padding-bottom': var(--joy-layout-space),
'footer-padding-left': calc(var(--joy-layout-space) * 1.5),
'footer-padding-right': calc(var(--joy-layout-space) * 1.5),
'footer-padding-top': var(--joy-layout-space),
'gap': var(--joy-layout-space),
'header-background-color': var(--joy-scheme-transparent),
'header-padding-bottom': var(--joy-layout-space),
'header-padding-left': calc(var(--joy-layout-space) * 1.5),
'header-padding-right': calc(var(--joy-layout-space) * 1.5),
'header-padding-top': var(--joy-layout-space),
'max-width': 320px,
'min-width': 280px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$flow-board-column-composer-props: (
'background-color': transparent,
'border-radius': var(--joy-layout-radius),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$flow-board-column-item-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 1px,
'drag-opacity': 0.8,
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding': calc(var(--joy-layout-space) * 1.5),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'pinned-background-color': var(--joy-scheme-surface),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-medium),
'transition-mode': ease,
'transition-property': (background-color, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$flow-board-column-item-composer-props: (
'background-color': transparent,
'border-radius': var(--joy-layout-radius),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$focus-ring-props: (
'active-width': 8px,
'blur': 0px,
'border-color': var(--joy-scheme-highlight),
'border-radius': 0px,
'border-style': solid,
'border-width': 0px,
'color': currentcolor,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'inward-offset': 2px,
'outward-offset': 2px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--focus-ring-width) var(--focus-ring-color),
'shadow-blur': var(--focus-ring-blur, 0),
'shadow-color': var(--focus-ring-color),
'shadow-offset-x': var(--focus-ring-x, 0),
'shadow-offset-y': var(--focus-ring-y, 0),
'shadow-spread': var(--focus-ring-width),
'shape': 6px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none,
'width': 4px,
'x': 0px,
'y': 0px
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$font-editor-props: (
'alphabet-button-background-color': transparent,
'alphabet-button-background-color-active': var(--joy-color-primary-500),
'alphabet-button-background-color-hover': var(--joy-scheme-middlelight),
'alphabet-button-border-radius': var(--joy-layout-radius),
'alphabet-button-foreground-color': var(--joy-scheme-foreground),
'alphabet-button-foreground-color-active': var(--joy-scheme-on-primary),
'alphabet-button-foreground-color-disabled': var(--joy-scheme-disabled),
'alphabet-button-foreground-color-hover': var(--joy-scheme-foreground),
'alphabet-button-size': 24px,
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-middlelight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-category-font-size': var(--joy-typography-caption-font-size),
'font-category-foreground-color': var(--joy-scheme-disabled),
'font-family': var(--joy-font-family),
'font-item-background-color': transparent,
'font-item-background-color-hover': var(--joy-scheme-middlelight),
'font-item-background-color-selected': color-mix(in srgb, var(--joy-color-primary-500) 15%, transparent),
'font-item-border-radius': var(--joy-layout-radius),
'font-item-padding': var(--joy-layout-space),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-name-font-size': var(--joy-typography-body-font-size),
'font-size': var(--joy-typography-body-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': auto,
'list-height': 300px,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'preview-background-color': var(--joy-scheme-middlelight),
'preview-border-radius': var(--joy-layout-radius),
'preview-font-size': var(--joy-typography-display-font-size),
'preview-min-height': calc(var(--joy-layout-space) * 12),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': unset,
'translate': none,
'width': calc(var(--joy-layout-space) * 40)
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$footer-props: (
'background-color': var(--joy-scheme-highlight),
'border-color': var(--joy-scheme-background),
'border-radius': 0,
'border-style': none,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': 40px,
'inset': calc(var(--joy-layout-space) * 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$footer-item-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$footer-item-group-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$form-props: (
'background-color': var(--joy-scheme-background),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$form-field-props: (
'background-color': var(--joy-scheme-background),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$ghost-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$grid-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$grid-item-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$helmet-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$hint-props: (
'background-color': transparent,
'border-color': transparent,
'border-radius': 0px,
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-typography-supporting-font-family),
'font-letter-spacing': var(--joy-typography-supporting-letter-spacing),
'font-line-height': var(--joy-typography-supporting-line-height),
'font-size': var(--joy-typography-supporting-font-size),
'font-text-decoration': var(--joy-typography-supporting-text-decoration),
'font-text-transform': var(--joy-typography-supporting-text-transform),
'font-weight': var(--joy-typography-supporting-font-weight),
'foreground-color': var(--joy-scheme-middlelight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$icon-props: (
'background-color': transparent,
'border-color': transparent,
'border-radius': 100%,
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$image-props: (
'aspect-ratio': auto,
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'legend-font-family': var(--joy-font-family),
'legend-font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'legend-font-line-height': var(--joy-typography-caption-line-height),
'legend-font-size': var(--joy-typography-caption-font-size),
'legend-font-text-decoration': var(--joy-typography-caption-text-decoration),
'legend-font-text-transform': var(--joy-typography-caption-text-transform),
'legend-font-weight': var(--joy-typography-caption-font-weight),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thumbnail-blur': 2px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, background-color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$indicator-props: (
'background-color': transparent,
'border-color': transparent,
'border-radius': 0px,
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-middlelight),
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$ink-bar-props: (
'background-color': var(--joy-scheme-background),
'border-radius': calc(var(--ink-bar-thickness) / 2),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thickness': calc(var(--joy-layout-thickness) * 2),
'transition-duration': .26s,
'transition-mode': cubic-bezier(.4, 0, .2, 1),
'transition-property': (background-color, top, left, height, width),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$jumbotron-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 2),
'padding-bottom': 32px,
'padding-left': 32px,
'padding-right': 32px,
'padding-top': 32px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$jumbotron-header-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-headline2-letter-spacing),
'font-line-height': var(--joy-typography-headline2-line-height),
'font-size': var(--joy-typography-headline2-font-size),
'font-text-decoration': var(--joy-typography-headline2-text-decoration),
'font-text-transform': var(--joy-typography-headline2-text-transform),
'font-weight': var(--joy-typography-headline2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$jumbotron-sub-header-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-headline3-letter-spacing),
'font-line-height': var(--joy-typography-headline3-line-height),
'font-size': var(--joy-typography-headline3-font-size),
'font-text-decoration': var(--joy-typography-headline3-text-decoration),
'font-text-transform': var(--joy-typography-headline3-text-transform),
'font-weight': var(--joy-typography-headline3-font-weight),
'foreground-color': var(--joy-scheme-middlelight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$kbd-props: (
'background-color': var(--joy-scheme-highlight),
'border-color': var(--joy-scheme-transparent),
'border-radius': calc(var(--joy-layout-radius) / 2),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-overline-letter-spacing),
'font-line-height': var(--joy-typography-overline-line-height),
'font-size': var(--joy-typography-overline-font-size),
'font-text-decoration': var(--joy-typography-overline-text-decoration),
'font-text-transform': var(--joy-typography-overline-text-transform),
'font-weight': var(--joy-typography-overline-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': calc(var(--joy-layout-space) / 2),
'padding-right': calc(var(--joy-layout-space) / 2),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$kbd-shortcut-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$light-chain-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$list-props: (
'background-color': var(--joy-scheme-background, var(--list-background-color)),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'line-thickness': var(--joy-layout-thickness),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$list-item-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': 0px,
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 3),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (border-color, background-color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$list-item-group-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-foreground),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-color-neutral-900),
'gap': 0px,
'padding-bottom': 0px,
'padding-left': 0px,
'padding-right': 0px,
'padding-top': 0px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$listing-props: (
'background-color': var(--joy-scheme-transparent),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': 0px,
'padding-left': 0px,
'padding-right': 0px,
'padding-top': 0px,
'shadow': 0px 0px 0px 0px transparent,
'shadow-blur': 0px,
'shadow-color': transparent,
'shadow-offset-x': 0px,
'shadow-offset-y': 0px,
'shadow-spread': 0px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, opacity),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$listing-item-props: (
'background-color': transparent,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': 0px,
'padding-left': 0px,
'padding-right': 0px,
'padding-top': 0px,
'shadow': 0px 0px 0px 0px transparent,
'shadow-blur': 0px,
'shadow-color': transparent,
'shadow-offset-x': 0px,
'shadow-offset-y': 0px,
'shadow-spread': 0px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, opacity),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$listing-item-marker-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 50%,
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) / 2),
'height': 22px,
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': calc(var(--joy-layout-space) / 2),
'padding-right': calc(var(--joy-layout-space) / 2),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$map-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$marker-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 50%,
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) / 2),
'height': 22px,
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': calc(var(--joy-layout-space) / 2),
'padding-right': calc(var(--joy-layout-space) / 2),
'padding-top': calc(var(--joy-layout-space) / 2),
'transition-duration': var(--joy-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': unset
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$marquee-props: (
'direction': normal,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'speed': calc(var(--mosaik-duration-long) * 10),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$masonry-props: (
'columns': 1,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': 0px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$menu-props: (
'background-color': var(--joy-scheme-background, var(--menu-background-color)),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$menu-item-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 3),
'height': 48px,
'indent-color': var(--joy-scheme-highlight),
'indent-offset': calc(var(--joy-layout-space) * 2),
'indent-size': var(--joy-layout-thickness),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$menu-item-group-props: (
'background-color': var(--joy-color-neutral-50),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-color-neutral-900),
'gap': var(--joy-layout-space),
'header-font-family': var(--joy-font-family),
'header-font-letter-spacing': var(--joy-typography-overline-letter-spacing),
'header-font-line-height': var(--joy-typography-overline-line-height),
'header-font-size': var(--joy-typography-overline-font-size),
'header-font-text-decoration': var(--joy-typography-overline-text-decoration),
'header-font-text-transform': var(--joy-typography-overline-text-transform),
'header-font-weight': var(--joy-typography-overline-font-weight),
'header-padding-bottom': var(--joy-layout-space),
'header-padding-left': calc(var(--joy-layout-space) * 2),
'header-padding-right': calc(var(--joy-layout-space) * 2),
'header-padding-top': calc(var(--joy-layout-space) * 2),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$message-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$message-box-props: (
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': var(--joy-layout-thickness),
'divider-height': 1px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'header-font-family': var(--joy-font-family),
'header-font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'header-font-line-height': var(--joy-typography-headline6-line-height),
'header-font-size': var(--joy-typography-headline6-font-size),
'header-font-text-decoration': var(--joy-typography-headline6-text-decoration),
'header-font-text-transform': var(--joy-typography-headline6-text-transform),
'header-font-weight': var(--joy-typography-headline6-font-weight),
'header-foreground-color': var(--joy-scheme-foreground),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space)*2),
'padding-right': calc(var(--joy-layout-space)*2),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0),
'shadow-blur': var(--joy-elevation-light-regular-blur-0),
'shadow-color': var(--joy-elevation-light-regular-color-0),
'shadow-offset-x': var(--joy-elevation-light-regular-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-regular-offset-y-0),
'shadow-spread': var(--joy-elevation-light-regular-spread-0),
'sub-header-font-family': var(--joy-font-family),
'sub-header-font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
'sub-header-font-line-height': var(--joy-typography-subtitle2-line-height),
'sub-header-font-size': var(--joy-typography-subtitle2-font-size),
'sub-header-font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
'sub-header-font-text-transform': var(--joy-typography-subtitle2-text-transform),
'sub-header-font-weight': var(--joy-typography-subtitle2-font-weight),
'sub-header-foreground-color': var(--joy-scheme-middlelight),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$meter-bar-props: (
'fill-color-high': var(--joy-color-warning-500),
'fill-color-low': var(--joy-color-error-500),
'fill-color-optimum': var(--joy-color-success-500),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'marker-color': var(--joy-scheme-foreground),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$meter-ring-props: (
'background-color': var(--joy-scheme-highlight),
'border-color': var(--joy-scheme-highlight),
'border-radius': none,
'border-style': solid,
'border-width': 0px,
'fill-color': var(--joy-color-info-500),
'fill-color-high': var(--joy-color-danger-500),
'fill-color-low': var(--joy-color-warning-500),
'fill-color-normal': var(--joy-color-info-500),
'fill-color-optimum': var(--joy-color-success-500),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-line-height),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': normal,
'foreground-color': var(--joy-color-neutral-900),
'gap': var(--joy-layout-space),
'marker-color': var(--joy-scheme-foreground),
'padding-bottom': 4px,
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': 4px,
'radius': 60px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thickness': 6px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, stroke-dashoffset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$number-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'gap': 0px,
'padding-bottom': 0px,
'padding-left': 0px,
'padding-right': 0px,
'padding-top': 0px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$number-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$number-counter-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'gap': 0px,
'padding-bottom': 0px,
'padding-left': 0px,
'padding-right': 0px,
'padding-top': 0px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$page-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$page-content-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'inset': calc(var(--joy-layout-space) * 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$page-header-props: (
'additional-header-font-family': var(--joy-font-family),
'additional-header-font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
'additional-header-font-line-height': var(--joy-typography-subtitle2-line-height),
'additional-header-font-size': var(--joy-typography-subtitle2-font-size),
'additional-header-font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
'additional-header-font-text-transform': var(--joy-typography-subtitle2-text-transform),
'additional-header-font-weight': var(--joy-typography-subtitle2-font-weight),
'background-color': var(--joy-scheme-transparent),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-headline4-letter-spacing),
'font-line-height': var(--joy-typography-headline4-line-height),
'font-size': var(--joy-typography-headline4-font-size),
'font-text-decoration': var(--joy-typography-headline4-text-decoration),
'font-text-transform': var(--joy-typography-headline4-text-transform),
'font-weight': var(--joy-typography-headline4-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 2),
'header-font-family': var(--joy-font-family),
'header-font-letter-spacing': var(--joy-typography-headline4-letter-spacing),
'header-font-line-height': var(--joy-typography-headline4-line-height),
'header-font-size': var(--joy-typography-headline4-font-size),
'header-font-text-decoration': var(--joy-typography-headline4-text-decoration),
'header-font-text-transform': var(--joy-typography-headline4-text-transform),
'header-font-weight': var(--joy-typography-headline4-font-weight),
'inset': calc(var(--joy-layout-space) * 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'prefix-gap': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'sub-header-font-family': var(--joy-font-family),
'sub-header-font-letter-spacing': var(--joy-typography-subtitle1-letter-spacing),
'sub-header-font-line-height': var(--joy-typography-subtitle1-line-height),
'sub-header-font-size': var(--joy-typography-subtitle1-font-size),
'sub-header-font-text-decoration': var(--joy-typography-subtitle1-text-decoration),
'sub-header-font-text-transform': var(--joy-typography-subtitle1-text-transform),
'sub-header-font-weight': var(--joy-typography-subtitle1-font-weight),
'suffix-gap': var(--joy-layout-space),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$page-menu-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': 24px,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 2),
'height': 64px,
'line-height': 28px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$page-pre-content-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'inset': calc(var(--joy-layout-space) * 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$page-pre-header-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'inset': calc(var(--joy-layout-space) * 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$paginator-props: (
'background-color': var(--joy-scheme-background),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$password-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$pattern-props: (
'background-color': var(--joy-color-neutral-400),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$persona-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': 50%,
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': 0px,
'font-line-height': calc(var(--persona-font-size) + 4px),
'font-size': 32px,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': 600,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': 4px,
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': 4px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$perspective-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$pin-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$pip-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 50%,
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) / 2),
'height': 22px,
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': calc(var(--joy-layout-space) / 2),
'padding-right': calc(var(--joy-layout-space) / 2),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$placeholder-props: (
'background-color': color-mix(in srgb, var(--joy-scheme-background) 50%, transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': dashed,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$popup-props: (
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 0.5),
'padding-bottom': calc(var(--joy-layout-space) * 1),
'padding-left': calc(var(--joy-layout-space) * 1.25),
'padding-right': calc(var(--joy-layout-space) * 1.25),
'padding-top': calc(var(--joy-layout-space) * 1),
'shadow': var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0),
'shadow-blur': var(--joy-elevation-light-regular-blur-0),
'shadow-color': var(--joy-elevation-light-regular-color-0),
'shadow-offset-x': var(--joy-elevation-light-regular-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-regular-offset-y-0),
'shadow-spread': var(--joy-elevation-light-regular-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, border-color, box-shadow, color, transform, opacity),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$portal-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$portal-host-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$portal-projection-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$press-button-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-typography-button-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': auto,
'icon-min-width': 36px,
'icon-min-height': 36px,
'line-height': calc(var(--press-button-font-line-height) - 4px),
'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
'min-width': 64px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'progress-fill-color': currentColor,
'progress-ring-width': var(--joy-layout-thickness),
'progress-thickness': var(--joy-layout-thickness),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none,
'width': auto
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$progress-bar-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$progress-ring-props: (
'background-color': var(--joy-scheme-highlight),
'border-color': var(--joy-scheme-highlight),
'border-radius': none,
'border-style': solid,
'border-width': 0px,
'fill-color': var(--joy-scheme-foreground),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': normal,
'foreground-color': var(--joy-color-neutral-900),
'gap': var(--joy-layout-space),
'padding-bottom': 4px,
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': 4px,
'radius': 60px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thickness': 6px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$prompt-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$prompt-box-attachment-list-props: (
'attachment-width': 160px,
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$prompt-box-voice-recorder-tool-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$qr-code-props: (
'background-color': var(--joy-scheme-background),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$radio-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': calc(var(--joy-layout-radius) / 2),
'border-style': none,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 1.5),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$radio-group-props: (
'background-color': unset,
'border-color': unset,
'border-radius': unset,
'border-style': none,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$rating-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': unset,
'border-style': none,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$region-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$region-view-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$repeat-button-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': auto,
'icon-min-width': 36px,
'icon-min-height': 36px,
'line-height': calc(var(--repeat-button-font-line-height) - 4px),
'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
'min-width': 64px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'progress-ring-width': var(--joy-layout-thickness),
'progress-thickness': var(--joy-layout-thickness),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none,
'width': auto
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$resize-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$resize-adorner-props: (
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': dashed,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thumb-background-color': var(--joy-scheme-highlight),
'thumb-border-radius': var(--joy-layout-thickness),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$resize-thumb-props: (
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': dashed,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thumb-background-color': var(--joy-scheme-highlight),
'thumb-border-radius': var(--joy-layout-thickness),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$ribbon-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font': var(--joy-font-family),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'font-line-height': unset,
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': none,
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color foreground-color border-color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$rich-text-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$rich-text-box-toolbox-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': unset,
'border-style': solid,
'border-width': unset,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$ripple-props: (
'background-color': var(--joy-color-neutral-400),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$router-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$router-anchor-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$router-link-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$router-outlet-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scale-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scheduler-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'cell-border-color': var(--joy-scheme-highlight),
'cell-border-radius': var(--joy-layout-radius),
'cell-border-style': dashed,
'cell-border-width': 1px,
'cell-height': 40px,
'column-min-width': 160px,
'event-padding-bottom': unset,
'event-padding-left': unset,
'event-padding-right': var(--joy-layout-space),
'event-padding-top': unset,
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-typography-body1-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'header-cell-padding-bottom': var(--joy-layout-space),
'header-cell-padding-left': var(--joy-layout-space),
'header-cell-padding-right': var(--joy-layout-space),
'header-cell-padding-top': var(--joy-layout-space),
'header-day-font-family': var(--joy-typography-headline6-font-family),
'header-day-font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'header-day-font-line-height': var(--joy-typography-headline6-line-height),
'header-day-font-size': var(--joy-typography-headline6-font-size),
'header-day-font-text-decoration': var(--joy-typography-headline6-text-decoration),
'header-day-font-text-transform': var(--joy-typography-headline6-text-transform),
'header-day-font-weight': var(--joy-typography-headline6-font-weight),
'header-font-family': var(--joy-typography-headline6-font-family),
'header-font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'header-font-line-height': var(--joy-typography-headline6-line-height),
'header-font-size': var(--joy-typography-headline6-font-size),
'header-font-text-decoration': var(--joy-typography-headline6-text-decoration),
'header-font-text-transform': var(--joy-typography-headline6-text-transform),
'header-font-weight': var(--joy-typography-headline6-font-weight),
'header-weekday-font-family': var(--joy-typography-caption-font-family),
'header-weekday-font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'header-weekday-font-line-height': var(--joy-typography-caption-line-height),
'header-weekday-font-size': var(--joy-typography-caption-font-size),
'header-weekday-font-text-decoration': var(--joy-typography-caption-text-decoration),
'header-weekday-font-text-transform': var(--joy-typography-caption-text-transform),
'header-weekday-font-weight': var(--joy-typography-caption-font-weight),
'hour-border-color': var(--joy-scheme-highlight),
'hour-border-radius': var(--joy-layout-radius),
'hour-border-style': solid,
'hour-border-width': var(--joy-layout-thickness) ,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'timescale-width': 80px,
'today-background-color': var(--joy-scheme-semi-transparent),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scheduler-agenda-view-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': var(--joy-layout-thickness),
'day-header-font-size': var(--joy-typography-headline6-font-size),
'day-header-font-weight': var(--joy-typography-headline6-font-weight),
'event-item-padding-bottom': var(--joy-layout-space),
'event-item-padding-left': var(--joy-layout-space),
'event-item-padding-right': var(--joy-layout-space),
'event-item-padding-top': var(--joy-layout-space),
'event-row-min-height': 64px,
'event-time-font-size': var(--joy-typography-caption-font-size),
'event-title-font-size': var(--joy-typography-body1-font-size),
'event-title-font-weight': var(--joy-typography-body1-font-weight),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'today-background-color': var(--joy-scheme-semi-transparent),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none,
'weekend-background-color': color-mix(in srgb, var(--joy-scheme-highlight) 40%, transparent)
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scheduler-datescale-props: (
'background-color': var(--joy-scheme-background),
'blackout-stripe-color': color-mix(in srgb, var(--joy-scheme-highlight) 50%, transparent),
'blackout-stripe-size': 8px,
'cell-width': 60px,
'day-number-color': var(--joy-scheme-foreground),
'day-number-font-size': var(--joy-typography-headline-s-font-size),
'day-number-font-weight': var(--joy-typography-headline-s-font-weight),
'font-family': var(--joy-typography-body-font-family),
'font-letter-spacing': var(--joy-typography-body-letter-spacing),
'font-line-height': var(--joy-typography-body-line-height),
'font-size': var(--joy-typography-body-font-size),
'font-text-decoration': var(--joy-typography-body-text-decoration),
'font-text-transform': var(--joy-typography-body-text-transform),
'font-weight': var(--joy-typography-body-font-weight),
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'row-border-color': var(--joy-scheme-highlight),
'row-border-style': solid,
'row-border-width': var(--joy-layout-thickness),
'row-height': 64px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'today-background-color': color-mix(in srgb, var(--joy-scheme-primary) 10%, transparent),
'today-day-number-color': var(--joy-scheme-primary),
'today-weekday-color': var(--joy-scheme-primary),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none,
'weekday-color': var(--joy-scheme-foreground-secondary),
'weekday-font-size': var(--joy-typography-caption-font-size),
'weekday-font-weight': var(--joy-typography-caption-font-weight),
'weekday-text-transform': uppercase,
'weekend-background-color': color-mix(in srgb, var(--joy-scheme-highlight) 50%, transparent)
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scheduler-event-props: (
'agenda-gap': var(--joy-layout-space),
'agenda-min-height': 48px,
'agenda-padding': var(--joy-layout-space),
'all-day-background-color': var(--joy-scheme-surface),
'all-day-foreground-color': var(--joy-scheme-foreground),
'background-color': var(--joy-scheme-highlight),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'box-shadow': var(--joy-elevation-1),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': var(--joy-typography-caption-line-height),
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'hover-background-color': var(--joy-scheme-surface),
'month-border-radius': var(--joy-layout-radius),
'month-font-size': var(--joy-typography-caption-font-size),
'month-gap': calc(var(--joy-layout-space) / 2),
'month-line-height': 1.2,
'month-min-height': 20px,
'month-padding': 2px calc(var(--joy-layout-space) / 2),
'padding': var(--joy-layout-space) calc(var(--joy-layout-space) / 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-medium),
'transition-mode': ease,
'transition-property': (background-color, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scheduler-month-view-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': var(--joy-layout-thickness),
'cell-min-height': 100px,
'day-number-font-size': var(--joy-typography-body2-font-size),
'day-number-font-weight': var(--joy-typography-body2-font-weight),
'event-chip-border-radius': var(--joy-layout-radius),
'event-chip-font-size': var(--joy-typography-caption-font-size),
'event-chip-height': 20px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) / 2),
'header-day-font-family': var(--joy-typography-headline6-font-family),
'header-day-font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'header-day-font-line-height': var(--joy-typography-headline6-line-height),
'header-day-font-size': var(--joy-typography-headline6-font-size),
'header-day-font-text-decoration': var(--joy-typography-headline6-text-decoration),
'header-day-font-text-transform': var(--joy-typography-headline6-text-transform),
'header-day-font-weight': var(--joy-typography-headline6-font-weight),
'header-font-family': var(--joy-typography-headline6-font-family),
'header-font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'header-font-line-height': var(--joy-typography-headline6-line-height),
'header-font-size': var(--joy-typography-headline6-font-size),
'header-font-text-decoration': var(--joy-typography-headline6-text-decoration),
'header-font-text-transform': var(--joy-typography-headline6-text-transform),
'header-font-weight': var(--joy-typography-headline6-font-weight),
'header-weekday-font-family': var(--joy-typography-caption-font-family),
'header-weekday-font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'header-weekday-font-line-height': var(--joy-typography-caption-line-height),
'header-weekday-font-size': var(--joy-typography-caption-font-size),
'header-weekday-font-text-decoration': var(--joy-typography-caption-text-decoration),
'header-weekday-font-text-transform': var(--joy-typography-caption-text-transform),
'header-weekday-font-weight': var(--joy-typography-caption-font-weight),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'today-background-color': var(--joy-scheme-semi-transparent),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none,
'week-number-width': 40px,
'weekend-background-color': color-mix(in srgb, var(--joy-scheme-highlight) 40%, transparent)
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scheduler-now-indicator-props: (
'color': var(--joy-color-danger-500),
'dot-size': var(--joy-layout-space),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'line-height': 2px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (top),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scheduler-time-grid-view-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': var(--joy-layout-thickness),
'cell-border-color': var(--joy-scheme-highlight),
'cell-border-radius': var(--joy-layout-radius),
'cell-border-style': dashed,
'cell-border-width': 1px,
'cell-height': 40px,
'column-min-width': 160px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'header-cell-padding-bottom': var(--joy-layout-space),
'header-cell-padding-left': var(--joy-layout-space),
'header-cell-padding-right': var(--joy-layout-space),
'header-cell-padding-top': var(--joy-layout-space),
'header-day-font-family': var(--joy-typography-headline6-font-family),
'header-day-font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'header-day-font-line-height': var(--joy-typography-headline6-line-height),
'header-day-font-size': var(--joy-typography-headline6-font-size),
'header-day-font-text-decoration': var(--joy-typography-headline6-text-decoration),
'header-day-font-text-transform': var(--joy-typography-headline6-text-transform),
'header-day-font-weight': var(--joy-typography-headline6-font-weight),
'header-font-family': var(--joy-typography-headline6-font-family),
'header-font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'header-font-line-height': var(--joy-typography-headline6-line-height),
'header-font-size': var(--joy-typography-headline6-font-size),
'header-font-text-decoration': var(--joy-typography-headline6-text-decoration),
'header-font-text-transform': var(--joy-typography-headline6-text-transform),
'header-font-weight': var(--joy-typography-headline6-font-weight),
'header-weekday-font-family': var(--joy-typography-caption-font-family),
'header-weekday-font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'header-weekday-font-line-height': var(--joy-typography-caption-line-height),
'header-weekday-font-size': var(--joy-typography-caption-font-size),
'header-weekday-font-text-decoration': var(--joy-typography-caption-text-decoration),
'header-weekday-font-text-transform': var(--joy-typography-caption-text-transform),
'header-weekday-font-weight': var(--joy-typography-caption-font-weight),
'hour-border-color': var(--joy-scheme-highlight),
'hour-border-radius': var(--joy-layout-radius),
'hour-border-style': solid,
'hour-border-width': var(--joy-layout-thickness) ,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'timescale-width': 80px,
'today-background-color': var(--joy-scheme-semi-transparent),
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scheduler-timescale-props: (
'background-color': var(--joy-scheme-background),
'cell-border-color': var(--joy-scheme-transparent),
'cell-border-radius': unset,
'cell-border-style': dashed,
'cell-border-width': var(--joy-layout-thickness) ,
'cell-height': 40px,
'font-family': var(--joy-typography-caption-font-family),
'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'font-line-height': var(--joy-typography-caption-line-height),
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': var(--joy-typography-caption-text-decoration),
'font-text-transform': var(--joy-typography-caption-text-transform),
'font-weight': var(--joy-typography-caption-font-weight),
'gap': unset,
'hour-cell-border-color': var(--joy-scheme-highlight),
'hour-cell-border-radius': unset,
'hour-cell-border-style': solid,
'hour-cell-border-width': var(--joy-layout-thickness) ,
'label-color': var(--joy-scheme-foreground-secondary),
'padding-bottom': calc(var(--joy-layout-space)/2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space)/2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'timescale-width': 80px,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scroll-props: (
'action-button-width': 40px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'gradient-size': 40px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-medium),
'transition-mode': ease,
'transition-property': (background-color, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$scrub-slider-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': 0,
'padding-left': 0,
'padding-right': 0,
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thumb-background-color': var(--joy-scheme-transparent),
'thumb-border-color': var(--joy-scheme-transparent),
'thumb-border-radius': var(--joy-layout-radius),
'thumb-border-style': solid,
'thumb-border-width': var(--joy-layout-thickness),
'thumb-foreground-color': var(--joy-scheme-highlight),
'thumb-size': 18px,
'tick-gap': none,
'tooltip-background-color': var(--joy-scheme-highlight),
'tooltip-border-color': var(--joy-scheme-highlight),
'tooltip-border-radius': var(--joy-layout-radius),
'tooltip-border-style': none,
'tooltip-border-width': none,
'tooltip-font-family': var(--joy-font-family),
'tooltip-font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'tooltip-font-line-height': var(--joy-typography-body2-line-height),
'tooltip-font-size': var(--joy-typography-body2-font-size),
'tooltip-font-text-decoration': var(--joy-typography-body2-text-decoration),
'tooltip-font-text-transform': var(--joy-typography-body2-text-transform),
'tooltip-font-weight': var(--joy-typography-body2-font-weight),
'tooltip-foreground-color': var(--joy-scheme-foreground),
'tooltip-gap': var(--joy-layout-space),
'tooltip-padding-bottom': var(--joy-layout-space),
'tooltip-padding-left': var(--joy-layout-space),
'tooltip-padding-right': var(--joy-layout-space),
'tooltip-padding-top': var(--joy-layout-space),
'tooltip-shadow': var(--joy-elevation-light-light),
'tooltip-transition-duration': var(--mosaik-duration-short),
'tooltip-transition-mode': ease,
'tooltip-transition-property': (background-color, color, border-color, opacity, transform),
'track-size': 4px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$search-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$segment-props: (
'background-color': var(--joy-scheme-highlight),
'border-color': unset,
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'indicator-height': calc(100% - calc(var(--segment-padding-top) + var(--segment-padding-bottom))),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'transition-duration': var(--joy-layout-transition),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$segment-item-props: (
'background-color': var(--joy-color-primary-500),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$select-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$select-item-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 0px,
'border-style': solid,
'border-width': 0px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 3),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'ripple-color': var(--joy-color-light-secondary-200),
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$select-item-group-props: (
'background-color': var(--joy-color-neutral-50),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-color-neutral-900),
'gap': var(--joy-layout-space),
'header-font-family': var(--joy-font-family),
'header-font-letter-spacing': var(--joy-typography-overline-letter-spacing),
'header-font-line-height': var(--joy-typography-overline-line-height),
'header-font-size': var(--joy-typography-overline-font-size),
'header-font-text-decoration': var(--joy-typography-overline-text-decoration),
'header-font-text-transform': var(--joy-typography-overline-text-transform),
'header-font-weight': var(--joy-typography-overline-font-weight),
'header-padding-bottom': var(--joy-layout-space),
'header-padding-left': calc(var(--joy-layout-space) * 2),
'header-padding-right': calc(var(--joy-layout-space) * 2),
'header-padding-top': calc(var(--joy-layout-space) * 2),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$select-item-visual-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': calc(var(--joy-layout-space) * 3),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$sheet-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': 24px,
'border-width': 2px,
'edge-offset': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'handle-background-color': var(--joy-scheme-highlight),
'handle-border-radius': 999px,
'handle-height': 5px,
'handle-margin': 12px,
'handle-width': 44px,
'max-width': 414px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'snap-indicator-active-background-color': var(--joy-scheme-foreground),
'snap-indicator-background-color': color-mix(in srgb, var(--joy-scheme-foreground) 28%, transparent),
'snap-indicator-border-radius': 999px,
'snap-indicator-gap': 4px,
'snap-indicator-size': 6px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (transform, opacity, visibility),
'translate': none,
'translate-y': 100vh,
'z-index': 2147483001
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$sheet-content-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$sheet-footer-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$sheet-header-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$sheet-header-sub-text-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
'font-line-height': var(--joy-typography-subtitle2-line-height),
'font-size': var(--joy-typography-subtitle2-font-size),
'font-text-decoration': var(--joy-typography-subtitle2-text-decoration),
'font-text-transform': var(--joy-typography-subtitle2-text-transform),
'font-weight': var(--joy-typography-subtitle2-font-weight),
'foreground-color': var(--joy-scheme-middlelight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$sheet-header-text-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-headline6-letter-spacing),
'font-line-height': var(--joy-typography-headline6-line-height),
'font-size': var(--joy-typography-headline6-font-size),
'font-text-decoration': var(--joy-typography-headline6-text-decoration),
'font-text-transform': var(--joy-typography-headline6-text-transform),
'font-weight': var(--joy-typography-headline6-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$signature-pad-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$skeleton-props: (
'background-color': var(--joy-scheme-semi-transparent),
'border-color': unset,
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$slider-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'component-name-thumb-background-color': var(--joy-color-light-secondary-200),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': 0,
'padding-left': 0,
'padding-right': 0,
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thumb-background-color': var(--joy-scheme-transparent),
'thumb-border-color': var(--joy-scheme-transparent),
'thumb-border-radius': var(--joy-layout-radius),
'thumb-border-style': solid,
'thumb-border-width': var(--joy-layout-thickness),
'thumb-foreground-color': var(--joy-scheme-highlight),
'thumb-size': 18px,
'tick-bar-border-color': var(--joy-color-light-neutral-400),
'tick-bar-foreground-color': var(--joy-scheme-foreground),
'tick-bar-tick-height': 6px,
'tick-bar-tick-text-gap': calc(var(--joy-layout-space) / 2),
'tick-gap': none,
'tooltip-background-color': var(--joy-scheme-highlight),
'tooltip-border-color': var(--joy-scheme-highlight),
'tooltip-border-radius': var(--joy-layout-radius),
'tooltip-border-style': none,
'tooltip-border-width': none,
'tooltip-font-family': var(--joy-font-family),
'tooltip-font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'tooltip-font-line-height': var(--joy-typography-body2-line-height),
'tooltip-font-size': var(--joy-typography-body2-font-size),
'tooltip-font-text-decoration': var(--joy-typography-body2-text-decoration),
'tooltip-font-text-transform': var(--joy-typography-body2-text-transform),
'tooltip-font-weight': var(--joy-typography-body2-font-weight),
'tooltip-foreground-color': var(--joy-scheme-foreground),
'tooltip-gap': var(--joy-layout-space),
'tooltip-padding-bottom': var(--joy-layout-space),
'tooltip-padding-left': var(--joy-layout-space),
'tooltip-padding-right': var(--joy-layout-space),
'tooltip-padding-top': var(--joy-layout-space),
'tooltip-shadow': var(--joy-elevation-light-light),
'tooltip-transition-duration': var(--mosaik-duration-short),
'tooltip-transition-mode': ease,
'tooltip-transition-property': (background-color, color, border-color, opacity, transform),
'track-size': 4px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$slider2-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'gap': var(--joy-layout-space),
'padding-bottom': 0px,
'padding-left': 0px,
'padding-right': 0px,
'padding-top': 0px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$slider2thumb-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'gap': 0px,
'padding-bottom': 0px,
'padding-left': 0px,
'padding-right': 0px,
'padding-top': 0px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'size': 24px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$spacer-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$split-props: (
'divider-background-color': var(--joy-scheme-highlight),
'divider-foreground-color': var(--joy-scheme-foreground),
'divider-hit-area': calc(var(--joy-layout-space) * 1.5),
'divider-width': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'thumb-background-color': var(--joy-scheme-background),
'thumb-border-color': var(--joy-scheme-highlight),
'thumb-border-radius': var(--joy-layout-radius),
'thumb-foreground-color': var(--joy-scheme-foreground),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$split-button-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': auto,
'icon-min-width': 36px,
'icon-min-height': 36px,
'line-height': calc(var(--split-button-font-line-height) - 4px),
'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
'min-width': 64px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'progress-ring-width': var(--joy-layout-thickness),
'progress-thickness': var(--joy-layout-thickness),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none,
'width': auto
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$stack-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$stepper-props: (
'connector-background': var(--joy-scheme-highlight),
'connector-margin': calc(var(--joy-layout-space) / 2),
'connector-radius': 999px,
'connector-size': var(--joy-layout-thickness),
'content-gap': calc(var(--joy-layout-space) * 2),
'description-size': 0.875rem,
'focus-outline-offset': 4px,
'focus-outline-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'header-padding-vertical': var(--joy-layout-space),
'icon-border-width': calc(var(--joy-layout-thickness) * 3),
'icon-radius': 999px,
'icon-shadow': 0 1px 2px rgba(0,0,0,0.12),
'icon-size': calc(var(--joy-layout-space) * 3),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'step-padding-vertical': calc(var(--joy-layout-space) / 2),
'text-gap': 0.15rem,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none,
'vertical-connector-length': calc(var(--joy-layout-space) * 3),
'vertical-connector-margin': calc(var(--joy-layout-space) * 0.5)
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$stepper-item-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'panel-padding': calc(var(--joy-layout-space) * 2),
'panel-radius': var(--joy-layout-radius),
'panel-shadow': 0 1px 2px rgba(0,0,0,0.08),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$sticky-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'left': 0px,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'top': 0px,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$success-state-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'header-font-family': var(--joy-font-family),
'header-font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'header-font-line-height': var(--joy-typography-body1-line-height),
'header-font-size': var(--joy-typography-body1-font-size),
'header-font-text-decoration': var(--joy-typography-body1-text-decoration),
'header-font-text-transform': var(--joy-typography-body1-text-transform),
'header-font-weight': var(--joy-typography-body1-font-weight),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$summary-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': calc(var(--joy-layout-space) / 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$swipe-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tab-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'divider-height': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'indicator-height': 4px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'panel-background-color': var(--tab-background-color),
'shadow': var(--joy-elevation-light-bold-offset-x-0) var(--joy-elevation-light-bold-offset-y-0) var(--joy-elevation-light-bold-blur-0) var(--joy-elevation-light-bold-spread-0) var(--joy-elevation-light-bold-color-0),
'shadow-blur': var(--joy-elevation-light-bold-blur-0),
'shadow-color': var(--joy-elevation-light-bold-color-0),
'shadow-offset-x': var(--joy-elevation-light-bold-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-bold-offset-y-0),
'shadow-spread': var(--joy-elevation-light-bold-spread-0),
'strip-background-color': var(--joy-scheme-transparent),
'strip-padding-bottom': 0,
'strip-padding-left': 0,
'strip-padding-right': 0,
'strip-padding-top': 0,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tab-item-props: (
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-space),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tab-panel-props: (
'background-color': var(--joy-scheme-background),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tab-strip-props: (
'background-color': var(--joy-scheme-highlight),
'border-color': unset,
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tab-strip-item-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0,
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 3),
'padding-right': calc(var(--joy-layout-space) * 3),
'padding-top': calc(var(--joy-layout-space) * 2),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'size': 56px,
'thickness': 4px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-props: (
'alternating-color': var(--joy-scheme-surface),
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'column-border-color': var(--joy-scheme-highlight),
'column-border-radius': unset,
'column-border-style': solid,
'column-border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'line-thickness': var(--joy-layout-thickness),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'row-border-color': var(--joy-scheme-highlight),
'row-border-radius': unset,
'row-border-style': solid,
'row-border-width': var(--joy-layout-thickness),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, border-color, color, fill, stroke, opacity, box-shadow, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-body-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': none,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': 0,
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-body-cell-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': var(--data-table-cell-height),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space)*2),
'padding-right': calc(var(--joy-layout-space)*2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-body-row-props: (
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': 0,
'padding-bottom': 0,
'padding-left': 0,
'padding-right': 0,
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, border-color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-column-editor-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'item-gap': var(--joy-layout-space),
'item-hover-background-color': var(--joy-scheme-highlight),
'item-padding-bottom': calc(var(--joy-layout-space) * 0.5),
'item-padding-left': var(--joy-layout-space),
'item-padding-right': var(--joy-layout-space),
'item-padding-top': calc(var(--joy-layout-space) * 0.5),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-footer-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-footer-cell-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': 0px,
'padding-left': calc(var(--joy-layout-space)*2),
'padding-right': calc(var(--joy-layout-space)*2),
'padding-top': 0px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-footer-row-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': 0,
'padding-right': 0,
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-header-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'font-line-height': var(--joy-typography-caption-line-height),
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': var(--joy-typography-caption-text-decoration),
'font-text-transform': var(--joy-typography-caption-text-transform),
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space) / 2),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': calc(var(--joy-layout-space) / 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-header-cell-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'font-line-height': var(--joy-typography-caption-line-height),
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': var(--joy-typography-caption-text-decoration),
'font-text-transform': var(--joy-typography-caption-text-transform),
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space)*2),
'padding-right': calc(var(--joy-layout-space)*2),
'padding-top': var(--joy-layout-space),
'resize-handle-color': var(--joy-color-primary-500),
'resize-handle-width': 2px,
'separator-color': var(--joy-scheme-highlight),
'separator-width': 1px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$table-header-row-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'font-line-height': var(--joy-typography-caption-line-height),
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': var(--joy-typography-caption-text-decoration),
'font-text-transform': var(--joy-typography-caption-text-transform),
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': 0,
'padding-bottom': 0,
'padding-left': 0,
'padding-right': 0,
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, border-color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$text-props: (
'background-color': transparent,
'border-color': transparent,
'border-radius': 0px,
'border-style': solid,
'border-width': 0px,
'font-decoration': var(--joy-typography-body1-text-decoration),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': none,
'padding-bottom': none,
'padding-left': none,
'padding-right': none,
'padding-top': none,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$text-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'prefix-icon-size': 20px,
'shadow': var(--joy-elevation-light-semilight-offset-x-0) var(--joy-elevation-light-semilight-offset-y-0) var(--joy-elevation-light-semilight-blur-0) var(--joy-elevation-light-semilight-spread-0) var(--joy-elevation-light-semilight-color-0),
'shadow-blur': var(--joy-elevation-light-semilight-blur-0),
'shadow-color': var(--joy-elevation-light-semilight-color-0),
'shadow-offset-x': var(--joy-elevation-light-semilight-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-semilight-offset-y-0),
'shadow-spread': var(--joy-elevation-light-semilight-spread-0),
'suffix-icon-size': 20px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$text-format-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$thumb-props: (
'background-color': var(--joy-scheme-highlight),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': var(--joy-layout-thickness),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$thumbnail-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tick-bar-props: (
'background-color': var(--joy-scheme-transparent),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'font-line-height': var(--joy-typography-caption-line-height),
'font-size': var(--joy-typography-caption-font-size),
'font-text-decoration': var(--joy-typography-caption-text-decoration),
'font-text-transform': var(--joy-typography-caption-text-transform),
'font-weight': var(--joy-typography-caption-font-weight),
'foreground-color': var(--joy-scheme-highlight),
'gap': none,
'padding-bottom': none,
'padding-left': none,
'padding-right': none,
'padding-top': none,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'tick-height': 16px,
'tick-size': 2px,
'tick-text-gap': 4px,
'tick-width': var(--joy-layout-thickness),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tile-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'ripple-color': var(--joy-scheme-highlight),
'ripple-duration': 0.20s,
'shadow': var(--joy-elevation-light-light-offset-x-0) var(--joy-elevation-light-light-offset-y-0) var(--joy-elevation-light-light-blur-0) var(--joy-elevation-light-light-spread-0) var(--joy-elevation-light-light-color-0),
'shadow-blur': var(--joy-elevation-light-light-blur-0),
'shadow-color': var(--joy-elevation-light-light-color-0),
'shadow-offset-x': var(--joy-elevation-light-light-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-light-offset-y-0),
'shadow-spread': var(--joy-elevation-light-light-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tile-list-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'gutter-size': calc(var(--joy-layout-space) * 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tile-list-item-props: (
'bg-color': var(--joy-scheme-background),
'border': 1px solid var(--joy-scheme-highlight),
'content-padding': var(--joy-layout-space),
'dragging-opacity': .6,
'dragover-border-color': red,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'header-bg-color': var(--joy-scheme-background),
'header-padding': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tile-manager-props: (
'background': transparent,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': calc(var(--joy-layout-space) * 2),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tile-manager-tile-props: (
'action-color': var(--joy-scheme-on-background-variant),
'action-hover-background': var(--joy-scheme-background-variant),
'action-hover-color': var(--joy-scheme-on-background),
'action-radius': 4px,
'action-size': 28px,
'background': var(--joy-scheme-background),
'border-color': var(--joy-scheme-stroke),
'border-radius': var(--joy-layout-radius),
'border-width': 1px,
'content-padding-bottom': calc(var(--joy-layout-space) * 2),
'content-padding-left': calc(var(--joy-layout-space) * 2),
'content-padding-right': calc(var(--joy-layout-space) * 2),
'content-padding-top': calc(var(--joy-layout-space) * 2),
'dragging-opacity': 0.8,
'drop-target-color': var(--joy-color-primary-500),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'header-background': transparent,
'header-border-color': var(--joy-scheme-stroke),
'header-padding-bottom': calc(var(--joy-layout-space) * 1.5),
'header-padding-left': calc(var(--joy-layout-space) * 2),
'header-padding-right': calc(var(--joy-layout-space) * 2),
'header-padding-top': calc(var(--joy-layout-space) * 1.5),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'resize-handle-color': var(--joy-color-primary-500),
'resize-indicator-color': var(--joy-scheme-stroke),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'title-color': var(--joy-scheme-on-background),
'title-font-size': 1rem,
'title-font-weight': 600,
'transition-duration': 0.2s,
'transition-mode': ease,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$time-box-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'floating-label-font-size': 12px,
'floating-label-line-height': 12px,
'focus-ring-active-width': 8px,
'focus-ring-color': var(--joy-scheme-highlight),
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 0px,
'focus-ring-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': 56px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 1.5),
'padding-right': calc(var(--joy-layout-space) * 1.5),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$timeline-props: (
'content-gap': var(--joy-layout-space),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': 1.5,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': 400,
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 2),
'line-color': var(--joy-scheme-highlight),
'line-offset': calc(var(--joy-layout-space) * 4),
'line-thickness': var(--joy-layout-thickness),
'marker-border-color': var(--joy-scheme-highlight),
'marker-border-width': var(--joy-layout-thickness),
'marker-color': var(--joy-scheme-background),
'marker-size': calc(var(--joy-layout-space) * 2.5),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, background-color, transform),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$timeline-content-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': 1.5,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': 400,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$timeline-item-props: (
'content-gap': var(--joy-layout-space),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'line-offset': calc(var(--joy-layout-space) * 3),
'marker-border-color': var(--joy-scheme-highlight),
'marker-border-width': var(--joy-layout-thickness),
'marker-color': var(--joy-scheme-background),
'marker-size': calc(var(--joy-layout-space) * 2.5),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$timeline-marker-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'marker-border-color': var(--joy-scheme-highlight),
'marker-border-width': var(--joy-layout-thickness),
'marker-color': var(--joy-scheme-background),
'marker-size': calc(var(--joy-layout-space) * 2.5),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'progress-ring-width': var(--joy-layout-thickness),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$timeline-opposite-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': 1.5,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': 400,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$title-bar-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-headline4-letter-spacing),
'font-line-height': var(--joy-typography-headline4-line-height),
'font-size': var(--joy-typography-headline4-font-size),
'font-text-decoration': var(--joy-typography-headline4-text-decoration),
'font-text-transform': var(--joy-typography-headline4-text-transform),
'font-weight': var(--joy-typography-headline4-font-weight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$title-layout-props: (
'background-color': var(--joy-scheme-background),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$toast-props: (
'background-color': var(--joy-scheme-background),
'border': var(--toast-border-width) var(--toast-border-style) var(--toast-border-color),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'offset-x': var(--joy-layout-space),
'offset-y': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'progress-fill-color': currentColor,
'progress-ring-fill-color': var(--joy-scheme-foreground),
'shadow': var(--joy-elevation-light-regular-offset-x-0) var(--joy-elevation-light-regular-offset-y-0) var(--joy-elevation-light-regular-blur-0) var(--joy-elevation-light-regular-spread-0) var(--joy-elevation-light-regular-color-0),
'shadow-blur': var(--joy-elevation-light-regular-blur-0),
'shadow-color': var(--joy-elevation-light-regular-color-0),
'shadow-offset-x': var(--joy-elevation-light-regular-offset-x-0),
'shadow-offset-y': var(--joy-elevation-light-regular-offset-y-0),
'shadow-spread': var(--joy-elevation-light-regular-spread-0),
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$toast-actions-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$toggle-button-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'focus-ring-active-width': 8px,
'focus-ring-color': unset,
'focus-ring-inward-offset': 2px,
'focus-ring-outward-offset': 2px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'height': auto,
'icon-min-width': 36px,
'icon-min-height': 36px,
'line-height': calc(var(--toggle-button-font-line-height) - 4px),
'min-height': calc(calc(var(--joy-layout-space) * 5) - calc(var(--joy-layout-space) / 2)),
'min-width': 64px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'progress-ring-width': var(--joy-layout-thickness),
'ripple-color': unset,
'ripple-duration': 0.20s,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
'translate': none,
'width': auto
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$toggle-button-group-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-button-letter-spacing),
'font-line-height': var(--joy-typography-button-line-height),
'font-size': var(--joy-typography-button-font-size),
'font-text-decoration': var(--joy-typography-button-text-decoration),
'font-text-transform': var(--joy-typography-button-text-transform),
'font-weight': var(--joy-typography-button-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': 0,
'padding-bottom': 0,
'padding-left': 0,
'padding-right': 0,
'padding-top': 0,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$toggle-switch-props: (
'border-color': unset,
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (unset),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$toggletip-props: (
'background-color': var(--joy-scheme-background),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'foreground-color': var(--joy-scheme-foreground),
'gap': unset,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': (background-color, color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$toolbar-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': var(--joy-layout-thickness),
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': 24px,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': normal,
'foreground-color': var(--joy-scheme-foreground),
'gap': calc(var(--joy-layout-space) * 2),
'height': 64px,
'line-height': 28px,
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (all),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tooltip-props: (
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'max-width': 240px,
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tour-props: (
'backdrop-color': var(--joy-scheme-semi-transparent),
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'spotlight-border-color': var(--joy-scheme-primary),
'spotlight-border-radius': var(--joy-layout-radius),
'spotlight-border-width': 2px,
'spotlight-transition-property': (top, left, width, height),
'tooltip-max-width': 340px,
'tooltip-min-width': 280px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (transform, opacity),
'translate': none,
'viewport-padding': 8px
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tour-anchor-props: (
'display': inline-block,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'position': relative,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tour-controls-props: (
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': 0px,
'duration-width': 144px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': 0px 16px 32px 0px rgba(0, 0, 0, 0.18),
'shadow-blur': 32px,
'shadow-color': rgba(0, 0, 0, 0.18),
'shadow-offset-x': 0px,
'shadow-offset-y': 16px,
'shadow-spread': 0px,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none,
'viewport-padding': 8px
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tour-step-props: (
'background-color': var(--joy-scheme-surface),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': 0px,
'content-margin-bottom': calc(var(--joy-layout-space) * 2),
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
'font-line-height': var(--joy-typography-body2-line-height),
'font-size': var(--joy-typography-body2-font-size),
'font-text-decoration': var(--joy-typography-body2-text-decoration),
'font-text-transform': var(--joy-typography-body2-text-transform),
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'header-font-weight': 600,
'header-margin-bottom': var(--joy-layout-space),
'padding-bottom': calc(var(--joy-layout-space)*2),
'padding-left': calc(var(--joy-layout-space)*2),
'padding-right': calc(var(--joy-layout-space)*2),
'padding-top': calc(var(--joy-layout-space)*2),
'progress-font-size': var(--joy-typography-caption-font-size),
'progress-font-weight': var(--joy-typography-caption-font-weight),
'progress-foreground-color': var(--joy-scheme-foreground-secondary),
'shadow': 0px 16px 32px 0px rgba(0, 0, 0, 0.18),
'shadow-blur': 32px,
'shadow-color': rgba(0, 0, 0, 0.18),
'shadow-offset-x': 0px,
'shadow-offset-y': 16px,
'shadow-spread': 0px,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tree-props: (
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$tree-item-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
'font-line-height': var(--joy-typography-body1-line-height),
'font-size': var(--joy-typography-body1-font-size),
'font-text-decoration': var(--joy-typography-body1-text-decoration),
'font-text-transform': var(--joy-typography-body1-text-transform),
'font-weight': var(--joy-typography-body1-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'indent-color': var(--joy-scheme-highlight),
'indent-offset': calc(var(--joy-layout-space) * 2),
'indent-size': var(--joy-layout-thickness),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': ((background-color, color, border-color, box-shadow)),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$up-down-spinner-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$video-props: (
'aspect-ratio': 1,
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': solid,
'border-width': none,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': var(--joy-typography-supporting-font-size),
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-supporting-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': var(--joy-layout-space),
'legend-font-family': var(--joy-font-family),
'legend-font-letter-spacing': var(--joy-typography-caption-letter-spacing),
'legend-font-line-height': var(--joy-typography-caption-line-height),
'legend-font-size': var(--joy-typography-caption-font-size),
'legend-font-text-decoration': var(--joy-typography-caption-text-decoration),
'legend-font-text-transform': var(--joy-typography-caption-text-transform),
'legend-font-weight': var(--joy-typography-caption-font-weight),
'padding-bottom': calc(var(--joy-layout-space) * 2),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': calc(var(--joy-layout-space) * 2),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (color, background-color, border-color, opacity, box-shadow),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$virtualize-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': unset,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$wheel-picker-props: (
'background-color': var(--joy-scheme-background),
'border-color': var(--joy-scheme-highlight),
'border-radius': var(--joy-layout-radius),
'border-style': none,
'border-width': 0px,
'font-family': var(--joy-font-family),
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': 14px,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': var(--joy-typography-body2-font-weight),
'foreground-color': var(--joy-scheme-foreground),
'gap': 0px,
'item-height': 36px,
'padding-bottom': 0px,
'padding-left': 4px,
'padding-right': 4px,
'padding-top': 0px,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': var(--mosaik-duration-short),
'transition-mode': ease,
'transition-property': (background-color, color),
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$wizard-props: (
'border-color': none,
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': var(--joy-layout-space),
'padding-right': var(--joy-layout-space),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$wizard-step-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': var(--joy-layout-space),
'padding-bottom': var(--joy-layout-space),
'padding-left': calc(var(--joy-layout-space) * 2),
'padding-right': calc(var(--joy-layout-space) * 2),
'padding-top': var(--joy-layout-space),
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);
/**
* ------------------------------------------------------------------------------
*
* This code was generated by a tool.
* Changes to this file may cause incorrect behavior and will be lost if
* the code is regenerated.
*
* ------------------------------------------------------------------------------
*/
$wrap-props: (
'font-family': unset,
'font-letter-spacing': unset,
'font-line-height': unset,
'font-size': unset,
'font-text-decoration': unset,
'font-text-transform': unset,
'font-weight': unset,
'gap': none,
'padding-bottom': unset,
'padding-left': unset,
'padding-right': unset,
'padding-top': unset,
'shadow': unset unset unset unset unset,
'shadow-blur': unset,
'shadow-color': unset,
'shadow-offset-x': unset,
'shadow-offset-y': unset,
'shadow-spread': unset,
'transition-duration': unset,
'transition-mode': unset,
'transition-property': unset,
'translate': none
);