@ch-post-common/common-web-frontend 0.0.1-security → 1.0.933

package/variables/_spacing.scss

@@ -0,0 +1,180 @@
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3
+) !default;
+
+// Post-Sizes
+$size-hair: 1px !default;
+$size-line: 2px !default;
+$size-micro: .25rem !default; //   ~4px
+$size-mini: .5rem !default; //   ~8px
+$size-small-regular: .75rem !default; //  ~12px
+$size-regular: 1rem !default; //  ~16px
+$size-small-large: 1.25rem !default; //  ~20px
+$size-large: 1.5rem !default; //  ~24px
+$size-big: 2rem !default; //  ~32px
+$size-bigger-big: 2.5rem !default; //  ~40px
+$size-small-huge: 3rem !default; //  ~48px
+$size-huge: 3.5rem !default; //  ~56px
+$size-small-giant: 4.5rem !default; //  ~72px
+$size-giant: 5rem !default; //  ~80px
+$size-bigger-giant: 7rem !default; // ~112px
+
+$post-sizes: () !default;
+$post-sizes: map-merge(
+  (
+    "hair": $size-hair,
+    "line": $size-line,
+    "micro": $size-micro,
+    "mini": $size-mini,
+    "small-regular": $size-small-regular,
+    "regular": $size-regular,
+    "small-large": $size-small-large,
+    "large": $size-large,
+    "big": $size-big,
+    "bigger-big": $size-bigger-big,
+    "small-huge": $size-small-huge,
+    "huge": $size-huge,
+    "small-giant": $size-small-giant,
+    "giant": $size-giant,
+    "bigger-giant": $size-bigger-giant
+  ),
+  $post-sizes
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+$sizes: map-merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto
+  ),
+  $sizes
+);
+
+// Abstand Gross, Section
+$size-curve-giant: (
+  "xs": $size-huge,
+  "sm": $size-huge,
+  "rg": $size-huge,
+  "md": $size-giant,
+  "lg": $size-giant,
+  "xl": $size-giant,
+  "xxl": $size-giant,
+) !default;
+
+// Abstand standard
+$size-curve-huge: (
+  "xs": $size-big,
+  "sm": $size-big,
+  "rg": $size-big,
+  "md": $size-bigger-big,
+  "lg": $size-bigger-big,
+  "xl": $size-huge,
+  "xxl": $size-huge,
+) !default;
+
+// Abstand Section halb
+$size-curve-bigger-big: (
+  "xs": $size-large,
+  "sm": $size-large,
+  "rg": $size-large,
+  "md": $size-small-huge,
+  "lg": $size-small-huge,
+  "xl": $size-small-huge,
+  "xxl": $size-small-huge,
+) !default;
+
+// Abstand Breadcrumb, Stepper
+$size-curve-big: (
+  "xs": $size-small-large,
+  "sm": $size-small-large,
+  "rg": $size-small-large,
+  "md": $size-big,
+  "lg": $size-big,
+  "xl": $size-bigger-big,
+  "xxl": $size-bigger-big,
+) !default;
+
+// H2
+$size-curve-large: (
+  "xs": $size-regular,
+  "sm": $size-regular,
+  "rg": $size-regular,
+  "md": $size-small-large,
+  "lg": $size-small-large,
+  "xl": $size-big,
+  "xxl": $size-big,
+) !default;
+
+// Button
+$size-curve-regular: (
+  "xs": $size-regular,
+  "sm": $size-regular,
+  "rg": $size-regular,
+  "md": $size-large,
+  "lg": $size-large,
+  "xl": $size-large,
+  "xxl": $size-large,
+) !default;
+
+// Teaser
+$size-curve-small: (
+  "xs": $size-small-regular,
+  "sm": $size-regular,
+  "rg": $size-regular,
+  "md": $size-regular,
+  "lg": $size-regular,
+  "xl": $size-regular,
+  "xxl": $size-regular,
+) !default;
+
+// Eingabefelder, p, h3, h4
+$size-curve-tiny: (
+  "xs": $size-small-regular,
+  "sm": $size-small-regular,
+  "rg": $size-small-regular,
+  "md": $size-regular,
+  "lg": $size-regular,
+  "xl": $size-regular,
+  "xxl": $size-regular,
+) !default;
+
+// List of all adaptive size curves
+$size-curves: (
+  "giant": $size-curve-giant,
+  "huge": $size-curve-huge,
+  "bigger-big": $size-curve-bigger-big,
+  "big": $size-curve-big,
+  "large": $size-curve-large,
+  "regular": $size-curve-regular,
+  "small": $size-curve-small,
+  "tiny": $size-curve-tiny,
+) !default;
+
+$responsive-spacing-properties: (
+  "m": "margin",
+  "mt": "margin-top",
+  "mr": "margin-right",
+  "mb": "margin-bottom",
+  "ml": "margin-left",
+  "p": "padding",
+  "pt": "padding-top",
+  "pr": "padding-right",
+  "pb": "padding-bottom",
+  "pl": "padding-left"
+);

package/variables/_type.scss

@@ -0,0 +1,157 @@
+@use "../functions/sizing";
+@use "./spacing";
+@use "./color";
+@use "./commons";
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+
+$font-family-sans-serif: "Frutiger Neue For Post", Arial, Helvetica, sans-serif !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
+  "Liberation Mono", "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+
+$font-size-tiny: sizing.px-to-rem(13px);
+$font-size-small: sizing.px-to-rem(15px);
+$font-size-regular: sizing.px-to-rem(16px);
+$font-size-bigger-regular: sizing.px-to-rem(17px);
+$font-size-medium: sizing.px-to-rem(20px);
+$font-size-large: sizing.px-to-rem(24px);
+$font-size-small-big: sizing.px-to-rem(28px);
+$font-size-big: sizing.px-to-rem(32px);
+$font-size-bigger-big: sizing.px-to-rem(40px);
+$font-size-small-huge: sizing.px-to-rem(48px);
+$font-size-huge: sizing.px-to-rem(56px);
+
+$font-curve-tiny: (
+  $font-size-tiny,
+  $font-size-small,
+  $font-size-small,
+  $font-size-regular,
+  $font-size-regular,
+  $font-size-bigger-regular
+);
+$font-curve-small: (
+  $font-size-small,
+  $font-size-regular,
+  $font-size-regular,
+  $font-size-bigger-regular,
+  $font-size-bigger-regular,
+  $font-size-bigger-regular
+);
+$font-curve-regular: (
+  $font-size-bigger-regular,
+  $font-size-bigger-regular,
+  $font-size-bigger-regular,
+  $font-size-medium,
+  $font-size-medium,
+  $font-size-medium
+);
+$font-curve-bigger-regular: (
+  $font-size-medium,
+  $font-size-medium,
+  $font-size-medium,
+  $font-size-large,
+  $font-size-large,
+  $font-size-large
+);
+$font-curve-medium: (
+  $font-size-medium,
+  $font-size-medium,
+  $font-size-medium,
+  $font-size-large,
+  $font-size-large,
+  $font-size-small-big
+);
+$font-curve-large: (
+  $font-size-large,
+  $font-size-small-big,
+  $font-size-small-big,
+  $font-size-big,
+  $font-size-big,
+  $font-size-bigger-big
+);
+$font-curve-big: (
+  $font-size-small-big,
+  $font-size-big,
+  $font-size-big,
+  $font-size-bigger-big,
+  $font-size-bigger-big,
+  $font-size-small-huge
+);
+
+$font-size-base: $font-size-small !default;
+$font-size-sm: $font-size-tiny !default;
+$font-size-rg: $font-size-base !default;
+$font-size-lg: $font-size-bigger-regular !default;
+
+$font-size-map: (
+  "sm": $font-size-sm,
+  "rg": $font-size-rg,
+  "md": $font-size-base,
+  "lg": $font-size-lg
+);
+
+$font-weight-lighter: 200 !default; // CWF only -> Frutiger Neue Light
+$font-weight-light: 300 !default; // CWF -> Frutiger Neue Light
+$font-weight-normal: 400 !default; // CWF -> Frutiger Neue Roman
+$font-weight-bold: 700 !default; // CWF -> Frutiger Neue Roman
+
+$font-weight-base: $font-weight-normal !default;
+$line-height-base: 18/15 !default; // Non-scaling line-height
+
+$line-height-sm: 16/13 !default; // Non-scaling line-height
+$line-height-rg: $line-height-base !default; // Non-scaling line-height
+$line-height-lg: 20/17 !default; // Non-scaling line-height
+
+$h1-font-size: $font-size-base * 2.5 !default; // 40px
+$h2-font-size: $font-size-base * 2 !default; // 32px
+$h3-font-size: $font-size-base * 1.75 !default; // 28px
+$h4-font-size: $font-size-base * 1.5 !default; // 24px
+$h5-font-size: $font-size-base * 1.25 !default; // 20px
+$h6-font-size: $font-size-base !default; // 16px
+
+$headings-margin-bottom: (spacing.$spacer / 2) !default;
+$headings-font-family: inherit !default;
+$headings-font-weight: 300 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: inherit !default;
+
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
+
+$display1-weight: 300 !default;
+$display2-weight: 300 !default;
+$display3-weight: 300 !default;
+$display4-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+
+$lead-font-size: ($font-size-base * 1.25) !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 80% !default;
+
+$text-muted: color.$gray-600;
+
+$blockquote-small-color: color.$gray-600;
+$blockquote-font-size: ($font-size-base * 1.25) !default;
+
+$hr-border-color: rgba(color.$black, .1) !default; // CWF
+$hr-border-color-light: rgba(color.$white, .4) !default; // CWF only
+$hr-border-width: commons.$border-width !default;
+
+$mark-padding: .2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$kbd-box-shadow: inset 0 -.1rem 0 rgba(color.$black, .25) !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: .5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+
+$hr-margin-y: spacing.$spacer !default;

package/variables/components/_accordion.scss

@@ -0,0 +1,22 @@
+@use "sass:map";
+@use "../../functions/sizing";
+@use "../spacing";
+@use "../grid";
+@use "../icons";
+@use "../color";
+@use "../commons";
+
+$accordion-icon-width: icons.$icon-size-default !default;
+$accordion-trigger-padding-vertical: map.get(spacing.$post-sizes, "regular");
+$accordion-content-space-top: map.get(spacing.$post-sizes, "small-regular");
+$accordion-content-space-bottom-xs: map.get(spacing.$post-sizes, "big");
+$accordion-content-space-bottom-rg: map.get(spacing.$post-sizes, "bigger-big");
+$accordion-padding-horizontal-xs: sizing.px-to-rem(map.get(grid.$grid-container-padding, "xs"));
+$accordion-padding-horizontal-sm: sizing.px-to-rem(map.get(grid.$grid-container-padding, "sm"));
+$accordion-content-heading-top: map.get(spacing.$post-sizes, "bigger-big");
+$accordion-trigger-padding-right-xs: ($accordion-padding-horizontal-xs * 2) + $accordion-icon-width;
+$accordion-trigger-padding-right-sm: ($accordion-padding-horizontal-sm * 2) + $accordion-icon-width;
+$accordion-btn-text-color: color.$black;
+$accordion-btn-text-color-expanded: map.get(color.$grays, "600");
+$accordion-border-color: map.get(color.$grays, "100");
+$accordion-border-width: commons.$border-thick;

package/variables/components/_alert.scss

@@ -0,0 +1,50 @@
+@use "../commons";
+@use "../color";
+@use "../spacing";
+@use "../type";
+
+// Alerts and Toasts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y: spacing.$size-small-large !default; // CWF
+$alert-padding-x: spacing.$size-large !default; // CWF
+$alert-toast-padding-y: spacing.$size-small-regular !default; // CWF only
+$alert-toast-padding-x: spacing.$size-regular !default; // CWF only
+
+$alert-margin-bottom: 1rem !default; // CWF
+$alert-margin: $alert-margin-bottom; // CWF only
+$alert-border-radius: commons.$border-radius !default;
+$alert-link-font-weight: type.$font-weight-bold !default;
+$alert-border-width: commons.$border-width !default;
+
+$alert-bg-level: -10 !default;
+$alert-border-level: -9 !default;
+$alert-color-level: 6 !default;
+
+$alert-list: (
+  "primary" color.$primary 3134,
+  "notification" color.$primary 3134,
+  "success" color.$success 2105,
+  "danger" color.$danger 2104,
+  "error" color.$danger 2104,
+  "warning" color.$warning 2104,
+  "info" color.$info 2106
+); // CWF only
+
+$alert-line-height: type.$line-height-base; // CWF only
+$alert-text-space-between: spacing.$size-micro;
+
+$alert-icon-size: spacing.$size-small-huge; // CWF only
+$alert-close-icon-size: spacing.$size-large; // CWF only
+
+$alert-toast-icon-size: spacing.$size-big; // CWF only
+
+$alert-font-size: type.$font-size-bigger-regular; // CWF only
+$alert-font-size-small: type.$font-size-small; // CWF only
+
+$alert-toast-width: 25rem; // CWF only
+$alert-toast-width-small-breakpoint: 21rem; // CWF only
+
+$alert-toast-box-shadow-hover: 0 0 1rem 0 color.$black-alpha-40; // CWF only
+$alert-close-hover-opacity: .4; // CWF only

package/variables/components/_badge.scss

@@ -0,0 +1,29 @@
+@use "../type";
+@use "../commons";
+@use "./button";
+@use "../../functions/sizing";
+
+// Badges
+
+$badge-font-size: 75% !default;
+$badge-font-weight: type.$font-weight-bold !default;
+$badge-line-height: sizing.px-to-rem(20) !default; // Most be bigger than $badge-font-size
+$badge-padding-y: .25em !default;
+$badge-padding-x: .4em !default;
+$badge-border-radius: commons.$border-radius !default;
+$badge-border: commons.$border-thick solid transparent !default;
+
+$badge-transition: button.$btn-transition !default;
+$badge-focus-width: button.$input-btn-focus-width !default;
+
+$badge-pill-padding-x: .6em !default;
+$badge-pill-padding-y: sizing.px-to-rem(3) !default;
+$badge-pill-padding-x-p6: sizing.px-to-rem(6) !default;
+$badge-pill-padding-y-p6: sizing.px-to-rem(6) !default;
+
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius: 10rem !default;
+$badge-pill-min-width: sizing.px-to-rem(24) !default;
+$badge-pill-border-thick: sizing.px-to-rem(2) !default;
+$badge-height: sizing.px-to-rem(32) !default;

package/variables/components/_breadcrumbs.scss

@@ -0,0 +1,21 @@
+@use "../color";
+@use "../commons";
+
+// Breadcrumbs
+
+$breadcrumb-font-size: null !default;
+
+$breadcrumb-padding-y: .75rem !default;
+$breadcrumb-padding-x: 1rem !default;
+$breadcrumb-item-padding: .5rem !default;
+
+$breadcrumb-margin-bottom: 1rem !default;
+
+$breadcrumb-bg: color.$gray-200 !default;
+$breadcrumb-divider-color: color.$gray-600 !default;
+$breadcrumb-link-color: color.$gray-600 !default;
+$breadcrumb-hover-color: color.$black !default;
+$breadcrumb-active-color: color.$gray-600 !default;
+$breadcrumb-divider: quote("/") !default;
+
+$breadcrumb-border-radius: commons.$border-radius !default;

package/variables/components/_button.scss

@@ -0,0 +1,152 @@
+@use "sass:map";
+
+@use "../color";
+@use "../type";
+@use "../commons";
+@use "../spacing";
+@use "../animation";
+
+
+@use "../../functions/sizing";
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+$input-btn-border-width: commons.$border-thick !default;
+
+$input-btn-padding-y: sizing.px-to-rem(15px - $input-btn-border-width) !default;
+$input-btn-padding-x: sizing.px-to-rem(20px - $input-btn-border-width) !default;
+$input-btn-line-height: type.$line-height-base !default;
+
+$input-btn-padding-y-sm: sizing.px-to-rem(
+  8px - $input-btn-border-width
+) !default;
+$input-btn-padding-x-sm: sizing.px-to-rem(
+  16px - $input-btn-border-width
+) !default;
+$input-btn-line-height-sm: type.$line-height-sm !default;
+
+$input-btn-padding-y-rg: sizing.px-to-rem(
+  11px - $input-btn-border-width
+) !default;
+$input-btn-padding-x-rg: sizing.px-to-rem(
+  16px - $input-btn-border-width
+) !default;
+$input-btn-line-height-rg: type.$line-height-rg !default;
+
+$input-btn-padding-y-lg: sizing.px-to-rem(
+  18px - $input-btn-border-width
+) !default;
+$input-btn-padding-x-lg: sizing.px-to-rem(
+  24px - $input-btn-border-width
+) !default;
+$input-btn-line-height-lg: type.$line-height-lg !default;
+
+$input-btn-focus-width: .2rem !default;
+$input-btn-focus-color: rgba(color.$component-active-bg, .25) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-animation-distance-sm: map.get(spacing.$post-sizes, "mini") !default;
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-padding-animate-x-sm: $btn-padding-x-sm * .75 !default;
+$btn-line-height-sm: $input-btn-line-height-sm !default;
+$btn-icon-size-sm: 1rem !default; // CWF only
+
+$btn-animation-distance-rg: map-get(
+  spacing.$post-sizes,
+  "small-regular"
+) !default;
+$btn-padding-y-rg: $input-btn-padding-y-rg !default;
+$btn-padding-x-rg: $input-btn-padding-x-rg !default;
+$btn-padding-animate-x-rg: $btn-padding-x-rg !default;
+$btn-line-height-rg: $input-btn-line-height-rg !default;
+$btn-icon-size-rg: 1.2rem !default; // CWF only
+
+$btn-animation-distance: map.get(spacing.$post-sizes, "small-regular") !default;
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-padding-animate-x: $btn-padding-x !default;
+$btn-line-height: $input-btn-line-height !default;
+$btn-icon-size: 1.4rem !default; // CWF only
+
+$btn-animation-distance-lg: map.get(spacing.$post-sizes, "regular") !default;
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-padding-animate-x-lg: $btn-padding-x-lg * 1.25 !default;
+$btn-line-height-lg: $input-btn-line-height-lg !default;
+$btn-icon-size-lg: 1.7rem !default; // CWF only
+
+$btn-animation-distance-map: (
+  "sm": $btn-animation-distance-sm,
+  "rg": $btn-animation-distance-rg,
+  "md": $btn-animation-distance,
+  "lg": $btn-animation-distance-lg
+);
+$btn-padding-y-map: (
+  "sm": $btn-padding-y-sm,
+  "rg": $btn-padding-y-rg,
+  "md": $btn-padding-y,
+  "lg": $btn-padding-y-lg
+);
+$btn-padding-x-map: (
+  "sm": $btn-padding-x-sm,
+  "rg": $btn-padding-x-rg,
+  "md": $btn-padding-x,
+  "lg": $btn-padding-x-lg
+);
+$btn-padding-animate-x-map: (
+  "sm": $btn-padding-animate-x-sm,
+  "rg": $btn-padding-animate-x-rg,
+  "md": $btn-padding-animate-x,
+  "lg": $btn-padding-animate-x-lg
+);
+$btn-line-height-map: (
+  "sm": $btn-line-height-sm,
+  "rg": $btn-line-height-rg,
+  "md": $btn-line-height,
+  "lg": $btn-line-height-lg
+);
+$btn-icon-size-map: (
+  "sm": $btn-icon-size-sm,
+  "rg": $btn-icon-size-rg,
+  "md": $btn-icon-size,
+  "lg": $btn-icon-size-lg
+);
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: type.$font-weight-normal !default;
+$btn-box-shadow: none !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: .65 !default;
+$btn-active-box-shadow: none !default;
+
+$btn-link-disabled-color: color.$gray-200 !default;
+
+$btn-block-spacing-y: .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: commons.$border-radius !default;
+$btn-border-radius-sm: commons.$border-radius-sm !default;
+$btn-border-radius-rg: commons.$border-radius-rg !default;
+$btn-border-radius-lg: commons.$border-radius-lg !default;
+
+$btn-border-radius-map: (
+  "sm": commons.$border-radius-sm,
+  "rg": commons.$border-radius-rg,
+  "md": commons.$border-radius,
+  "lg": commons.$border-radius-lg
+);
+
+$btn-transition-fade-arrow: opacity animation.$transition-time-default
+  animation.$transition-easing-default !default;
+$btn-transition-base-label: transform animation.$transition-time-default
+  animation.$transition-easing-default !default;
+$btn-transition: all animation.$transition-time-default
+  animation.$transition-easing-default !default;

package/variables/components/_card.scss

@@ -0,0 +1,29 @@
+@use "../color";
+@use "../commons";
+@use "../grid";
+@use "../type";
+@use "../spacing";
+
+// Cards
+$card-font-size: type.$font-size-small !default; // CWF only
+$card-font-size-large: type.$font-size-large !default; // CWF only
+
+$card-spacer-y: spacing.$size-small-large !default; // CWF 20px
+$card-spacer-x: spacing.$size-regular !default; // CWF 16px
+$card-border-width: commons.$border-width !default;
+$card-border-radius: commons.$border-width * 2 !default; // CWF
+$card-border-color: color.$gray-200 !default; // CWF
+$card-inner-border-radius: calc(
+  #{$card-border-radius} - #{$card-border-width}
+) !default; // CWF
+$card-cap-bg: color.$gray-cararra !default;
+$card-bg: color.$white !default;
+
+$card-img-overlay-padding: $card-spacer-x !default;
+
+$card-group-margin: (grid.$grid-gutter-width / 2) !default;
+$card-deck-margin: $card-group-margin !default;
+
+$card-columns-count: 3 !default;
+$card-columns-gap: 1.25rem !default;
+$card-columns-margin: spacing.$size-micro !default;

package/variables/components/_carousel.scss

@@ -0,0 +1,27 @@
+@use "../color";
+
+// Carousel
+
+$carousel-control-color: color.$white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+$carousel-control-hover-opacity: .9 !default;
+$carousel-control-transition: opacity .15s ease !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-active-bg: color.$white !default;
+$carousel-indicator-transition: opacity .6s ease !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: color.$white !default;
+
+$carousel-control-icon-width: 20px !default;
+
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
+
+$carousel-transition-duration: .6s !default;
+$carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)

package/variables/components/_close.scss

@@ -0,0 +1,9 @@
+@use "../type";
+@use "../color";
+
+// Close
+
+$close-font-size: type.$font-size-base * 1.5 !default;
+$close-font-weight: type.$font-weight-bold !default;
+$close-color: color.$black !default;
+$close-text-shadow: 0 1px 0 color.$white !default;