jekyll-theme-flow 0.1.0

data/_sass/bulma/components/card.scss

@@ -0,0 +1,162 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$card-color: cv.getVar("text") !default;
+$card-background-color: cv.getVar("scheme-main") !default;
+$card-shadow: cv.getVar("shadow") !default;
+$card-radius: 0.75rem !default;
+
+$card-header-background-color: transparent !default;
+$card-header-color: cv.getVar("text-strong") !default;
+$card-header-padding: 0.75rem 1rem !default;
+$card-header-shadow: 0 0.125em 0.25em
+  hsla(
+    #{cv.getVar("scheme-h")},
+    #{cv.getVar("scheme-s")},
+    #{cv.getVar("scheme-invert-l")},
+    0.1
+  ) !default;
+$card-header-weight: cv.getVar("weight-bold") !default;
+
+$card-content-background-color: transparent !default;
+$card-content-padding: 1.5rem !default;
+
+$card-footer-background-color: transparent !default;
+$card-footer-border-top: 1px solid cv.getVar("border-weak") !default;
+$card-footer-padding: 0.75rem !default;
+
+$card-media-margin: cv.getVar("block-spacing") !default;
+
+.#{iv.$class-prefix}card {
+  @include cv.register-vars(
+    (
+      "card-color": #{$card-color},
+      "card-background-color": #{$card-background-color},
+      "card-shadow": #{$card-shadow},
+      "card-radius": #{$card-radius},
+      "card-header-background-color": #{$card-header-background-color},
+      "card-header-color": #{$card-header-color},
+      "card-header-padding": #{$card-header-padding},
+      "card-header-shadow": #{$card-header-shadow},
+      "card-header-weight": #{$card-header-weight},
+      "card-content-background-color": #{$card-content-background-color},
+      "card-content-padding": #{$card-content-padding},
+      "card-footer-background-color": #{$card-footer-background-color},
+      "card-footer-border-top": #{$card-footer-border-top},
+      "card-footer-padding": #{$card-footer-padding},
+      "card-media-margin": #{$card-media-margin},
+    )
+  );
+}
+
+.#{iv.$class-prefix}card {
+  @extend %block;
+  background-color: cv.getVar("card-background-color");
+  border-radius: cv.getVar("card-radius");
+  box-shadow: cv.getVar("card-shadow");
+  color: cv.getVar("card-color");
+  max-width: 100%;
+  position: relative;
+}
+
+%card-item {
+  &:first-child {
+    border-start-start-radius: cv.getVar("card-radius");
+    border-start-end-radius: cv.getVar("card-radius");
+  }
+
+  &:last-child {
+    border-end-start-radius: cv.getVar("card-radius");
+    border-end-end-radius: cv.getVar("card-radius");
+  }
+}
+
+.#{iv.$class-prefix}card-header {
+  @extend %card-item;
+  background-color: cv.getVar("card-header-background-color");
+  align-items: stretch;
+  box-shadow: cv.getVar("card-header-shadow");
+  display: flex;
+}
+
+.#{iv.$class-prefix}card-header-title {
+  align-items: center;
+  color: cv.getVar("card-header-color");
+  display: flex;
+  flex-grow: 1;
+  font-weight: cv.getVar("card-header-weight");
+  padding: cv.getVar("card-header-padding");
+
+  &.#{iv.$class-prefix}is-centered {
+    justify-content: center;
+  }
+}
+
+.#{iv.$class-prefix}card-header-icon {
+  @include mx.reset;
+
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  padding: cv.getVar("card-header-padding");
+}
+
+.#{iv.$class-prefix}card-image {
+  display: block;
+  position: relative;
+
+  &:first-child {
+    img {
+      border-start-start-radius: cv.getVar("card-radius");
+      border-start-end-radius: cv.getVar("card-radius");
+    }
+  }
+
+  &:last-child {
+    img {
+      border-end-start-radius: cv.getVar("card-radius");
+      border-end-end-radius: cv.getVar("card-radius");
+    }
+  }
+}
+
+.#{iv.$class-prefix}card-content {
+  @extend %card-item;
+
+  background-color: cv.getVar("card-content-background-color");
+  padding: cv.getVar("card-content-padding");
+}
+
+.#{iv.$class-prefix}card-footer {
+  @extend %card-item;
+
+  background-color: cv.getVar("card-footer-background-color");
+  border-top: cv.getVar("card-footer-border-top");
+  align-items: stretch;
+  display: flex;
+}
+
+.#{iv.$class-prefix}card-footer-item {
+  align-items: center;
+  display: flex;
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 0;
+  justify-content: center;
+  padding: cv.getVar("card-footer-padding");
+
+  &:not(:last-child) {
+    border-inline-end: cv.getVar("card-footer-border-top");
+  }
+}
+
+// Combinations
+
+.#{iv.$class-prefix}card {
+  .#{iv.$class-prefix}media:not(:last-child) {
+    margin-bottom: cv.getVar("card-media-margin");
+  }
+}

data/_sass/bulma/components/dropdown.scss

@@ -0,0 +1,188 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$dropdown-menu-min-width: 12rem !default;
+
+$dropdown-content-background-color: cv.getVar("scheme-main") !default;
+$dropdown-content-offset: 0.25rem !default;
+$dropdown-content-padding-bottom: 0.5rem !default;
+$dropdown-content-padding-top: 0.5rem !default;
+$dropdown-content-radius: cv.getVar("radius") !default;
+$dropdown-content-shadow: cv.getVar("shadow") !default;
+$dropdown-content-z: 20 !default;
+
+$dropdown-item-h: cv.getVar("scheme-h");
+$dropdown-item-s: cv.getVar("scheme-s");
+$dropdown-item-l: cv.getVar("scheme-main-l");
+$dropdown-item-background-l: cv.getVar("scheme-main-l");
+$dropdown-item-background-l-delta: 0%;
+$dropdown-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$dropdown-item-active-background-l-delta: cv.getVar(
+  "active-background-l-delta"
+);
+$dropdown-item-color-l: cv.getVar("text-strong-l");
+$dropdown-item-selected-h: cv.getVar("link-h");
+$dropdown-item-selected-s: cv.getVar("link-s");
+$dropdown-item-selected-l: cv.getVar("link-l");
+$dropdown-item-selected-background-l: cv.getVar("link-l");
+$dropdown-item-selected-color-l: cv.getVar("link-invert-l");
+
+$dropdown-divider-background-color: cv.getVar("border-weak") !default;
+
+.#{iv.$class-prefix}dropdown {
+  // prettier-ignore-start
+  @include cv.register-vars(
+    (
+      "dropdown-menu-min-width": #{$dropdown-menu-min-width},
+      "dropdown-content-background-color": #{$dropdown-content-background-color},
+      "dropdown-content-offset": #{$dropdown-content-offset},
+      "dropdown-content-padding-bottom": #{$dropdown-content-padding-bottom},
+      "dropdown-content-padding-top": #{$dropdown-content-padding-top},
+      "dropdown-content-radius": #{$dropdown-content-radius},
+      "dropdown-content-shadow": #{$dropdown-content-shadow},
+      "dropdown-content-z": #{$dropdown-content-z},
+      "dropdown-item-h": #{$dropdown-item-h},
+      "dropdown-item-s": #{$dropdown-item-s},
+      "dropdown-item-l": #{$dropdown-item-l},
+      "dropdown-item-background-l": #{$dropdown-item-background-l},
+      "dropdown-item-background-l-delta": #{$dropdown-item-background-l-delta},
+      "dropdown-item-hover-background-l-delta": #{$dropdown-item-hover-background-l-delta},
+      "dropdown-item-active-background-l-delta": #{$dropdown-item-active-background-l-delta},
+      "dropdown-item-color-l": #{$dropdown-item-color-l},
+      "dropdown-item-selected-h": #{$dropdown-item-selected-h},
+      "dropdown-item-selected-s": #{$dropdown-item-selected-s},
+      "dropdown-item-selected-l": #{$dropdown-item-selected-l},
+      "dropdown-item-selected-background-l": #{$dropdown-item-selected-background-l},
+      "dropdown-item-selected-color-l": #{$dropdown-item-selected-color-l},
+      "dropdown-divider-background-color": #{$dropdown-divider-background-color},
+    )
+  );
+  // prettier-ignore-end
+}
+
+.#{iv.$class-prefix}dropdown {
+  display: inline-flex;
+  position: relative;
+  vertical-align: top;
+
+  &.#{iv.$class-prefix}is-active,
+  &.#{iv.$class-prefix}is-hoverable:hover {
+    .#{iv.$class-prefix}dropdown-menu {
+      display: block;
+    }
+  }
+
+  &.#{iv.$class-prefix}is-right {
+    .#{iv.$class-prefix}dropdown-menu {
+      left: auto;
+      right: 0;
+    }
+  }
+
+  &.#{iv.$class-prefix}is-up {
+    .#{iv.$class-prefix}dropdown-menu {
+      bottom: 100%;
+      padding-bottom: cv.getVar("dropdown-content-offset");
+      padding-top: initial;
+      top: auto;
+    }
+  }
+}
+
+.#{iv.$class-prefix}dropdown-menu {
+  display: none;
+  @include mx.ltr-position(0, false);
+  min-width: cv.getVar("dropdown-menu-min-width");
+  padding-top: cv.getVar("dropdown-content-offset");
+  position: absolute;
+  top: 100%;
+  z-index: cv.getVar("dropdown-content-z");
+}
+
+.#{iv.$class-prefix}dropdown-content {
+  background-color: cv.getVar("dropdown-content-background-color");
+  border-radius: cv.getVar("dropdown-content-radius");
+  box-shadow: cv.getVar("dropdown-content-shadow");
+  padding-bottom: cv.getVar("dropdown-content-padding-bottom");
+  padding-top: cv.getVar("dropdown-content-padding-top");
+}
+
+.#{iv.$class-prefix}dropdown-item {
+  color: hsl(
+    #{cv.getVar("dropdown-item-h")},
+    #{cv.getVar("dropdown-item-s")},
+    #{cv.getVar("dropdown-item-color-l")}
+  );
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  padding: 0.375rem 1rem;
+}
+
+a.#{iv.$class-prefix}dropdown-item,
+button.#{iv.$class-prefix}dropdown-item {
+  background-color: hsl(
+    #{cv.getVar("dropdown-item-h")},
+    #{cv.getVar("dropdown-item-s")},
+    calc(
+      #{cv.getVar("dropdown-item-background-l")} + #{cv.getVar(
+          "dropdown-item-background-l-delta"
+        )}
+    )
+  );
+  padding-inline-end: 3rem;
+  text-align: inherit;
+  white-space: nowrap;
+  width: 100%;
+
+  &:hover {
+    @include cv.register-vars(
+      (
+        "dropdown-item-background-l-delta": #{cv.getVar(
+            "dropdown-item-hover-background-l-delta"
+          )},
+        "dropdown-item-border-l-delta": #{cv.getVar(
+            "dropdown-item-hover-border-l-delta"
+          )},
+      )
+    );
+  }
+
+  &:active {
+    @include cv.register-vars(
+      (
+        "dropdown-item-background-l-delta": #{cv.getVar(
+            "dropdown-item-active-background-l-delta"
+          )},
+        "dropdown-item-border-l-delta": #{cv.getVar(
+            "dropdown-item-active-border-l-delta"
+          )},
+      )
+    );
+  }
+
+  &.#{iv.$class-prefix}is-active,
+  &.#{iv.$class-prefix}is-selected {
+    @include cv.register-vars(
+      (
+        "dropdown-item-h": #{cv.getVar("dropdown-item-selected-h")},
+        "dropdown-item-s": #{cv.getVar("dropdown-item-selected-s")},
+        "dropdown-item-l": #{cv.getVar("dropdown-item-selected-l")},
+        "dropdown-item-background-l": #{cv.getVar(
+            "dropdown-item-selected-background-l"
+          )},
+        "dropdown-item-color-l": #{cv.getVar("dropdown-item-selected-color-l")},
+      )
+    );
+  }
+}
+
+.#{iv.$class-prefix}dropdown-divider {
+  background-color: cv.getVar("dropdown-divider-background-color");
+  border: none;
+  display: block;
+  height: 1px;
+  margin: 0.5rem 0;
+}

data/_sass/bulma/components/menu.scss

@@ -0,0 +1,165 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$menu-item-h: cv.getVar("scheme-h");
+$menu-item-s: cv.getVar("scheme-s");
+$menu-item-l: cv.getVar("scheme-main-l");
+$menu-item-background-l: cv.getVar("scheme-main-l");
+$menu-item-background-l-delta: 0%;
+$menu-item-hover-background-l-delta: cv.getVar("hover-background-l-delta");
+$menu-item-active-background-l-delta: cv.getVar("active-background-l-delta");
+$menu-item-color-l: cv.getVar("text-l");
+$menu-item-radius: cv.getVar("radius-small") !default;
+$menu-item-selected-h: cv.getVar("link-h");
+$menu-item-selected-s: cv.getVar("link-s");
+$menu-item-selected-l: cv.getVar("link-l");
+$menu-item-selected-background-l: cv.getVar("link-l");
+$menu-item-selected-color-l: cv.getVar("link-invert-l");
+
+$menu-list-border-left: 1px solid cv.getVar("border") !default;
+$menu-list-line-height: 1.25 !default;
+$menu-list-link-padding: 0.5em 0.75em !default;
+$menu-nested-list-margin: 0.75em !default;
+$menu-nested-list-padding-left: 0.75em !default;
+
+$menu-label-color: cv.getVar("text-weak") !default;
+$menu-label-font-size: 0.75em !default;
+$menu-label-letter-spacing: 0.1em !default;
+$menu-label-spacing: 1em !default;
+
+.#{iv.$class-prefix}menu {
+  @include cv.register-vars(
+    (
+      "menu-item-h": #{$menu-item-h},
+      "menu-item-s": #{$menu-item-s},
+      "menu-item-l": #{$menu-item-l},
+      "menu-item-background-l": #{$menu-item-background-l},
+      "menu-item-background-l-delta": #{$menu-item-background-l-delta},
+      "menu-item-hover-background-l-delta": #{$menu-item-hover-background-l-delta},
+      "menu-item-active-background-l-delta": #{$menu-item-active-background-l-delta},
+      "menu-item-color-l": #{$menu-item-color-l},
+      "menu-item-radius": #{$menu-item-radius},
+      "menu-item-selected-h": #{$menu-item-selected-h},
+      "menu-item-selected-s": #{$menu-item-selected-s},
+      "menu-item-selected-l": #{$menu-item-selected-l},
+      "menu-item-selected-background-l": #{$menu-item-selected-background-l},
+      "menu-item-selected-color-l": #{$menu-item-selected-color-l},
+      "menu-list-border-left": #{$menu-list-border-left},
+      "menu-list-line-height": #{$menu-list-line-height},
+      "menu-list-link-padding": #{$menu-list-link-padding},
+      "menu-nested-list-margin": #{$menu-nested-list-margin},
+      "menu-nested-list-padding-left": #{$menu-nested-list-padding-left},
+      "menu-label-color": #{$menu-label-color},
+      "menu-label-font-size": #{$menu-label-font-size},
+      "menu-label-letter-spacing": #{$menu-label-letter-spacing},
+      "menu-label-spacing": #{$menu-label-spacing},
+    )
+  );
+}
+
+.#{iv.$class-prefix}menu {
+  font-size: cv.getVar("size-normal");
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    font-size: cv.getVar("size-small");
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    font-size: cv.getVar("size-medium");
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    font-size: cv.getVar("size-large");
+  }
+}
+
+.#{iv.$class-prefix}menu-list {
+  line-height: cv.getVar("menu-list-line-height");
+
+  a,
+  button,
+  .#{iv.$class-prefix}menu-item {
+    @extend %reset;
+    background-color: hsl(
+      #{cv.getVar("menu-item-h")},
+      #{cv.getVar("menu-item-s")},
+      calc(
+        #{cv.getVar("menu-item-background-l")} + #{cv.getVar(
+            "menu-item-background-l-delta"
+          )}
+      )
+    );
+    border-radius: cv.getVar("menu-item-radius");
+    color: hsl(
+      #{cv.getVar("menu-item-h")},
+      #{cv.getVar("menu-item-s")},
+      #{cv.getVar("menu-item-color-l")}
+    );
+    display: block;
+    padding: cv.getVar("menu-list-link-padding");
+    text-align: left;
+    width: 100%;
+
+    &:hover {
+      @include cv.register-vars(
+        (
+          "menu-item-background-l-delta": #{cv.getVar(
+              "menu-item-hover-background-l-delta"
+            )},
+        )
+      );
+    }
+
+    &:active {
+      @include cv.register-vars(
+        (
+          "menu-item-background-l-delta": #{cv.getVar(
+              "menu-item-active-background-l-delta"
+            )},
+        )
+      );
+    }
+
+    // Modifiers
+    &.#{iv.$class-prefix}is-active,
+    &.#{iv.$class-prefix}is-selected {
+      @include cv.register-vars(
+        (
+          "menu-item-h": #{cv.getVar("menu-item-selected-h")},
+          "menu-item-s": #{cv.getVar("menu-item-selected-s")},
+          "menu-item-l": #{cv.getVar("menu-item-selected-l")},
+          "menu-item-background-l": #{cv.getVar(
+              "menu-item-selected-background-l"
+            )},
+          "menu-item-color-l": #{cv.getVar("menu-item-selected-color-l")},
+        )
+      );
+    }
+  }
+
+  li {
+    ul {
+      border-inline-start: cv.getVar("menu-list-border-left");
+      margin: cv.getVar("menu-nested-list-margin");
+      padding-inline-start: cv.getVar("menu-nested-list-padding-left");
+    }
+  }
+}
+
+.#{iv.$class-prefix}menu-label {
+  color: cv.getVar("menu-label-color");
+  font-size: cv.getVar("menu-label-font-size");
+  letter-spacing: cv.getVar("menu-label-letter-spacing");
+  text-transform: uppercase;
+
+  &:not(:first-child) {
+    margin-top: cv.getVar("menu-label-spacing");
+  }
+
+  &:not(:last-child) {
+    margin-bottom: cv.getVar("menu-label-spacing");
+  }
+}

data/_sass/bulma/components/message.scss

@@ -0,0 +1,183 @@
+@use "../utilities/css-variables" as cv;
+@use "../utilities/derived-variables" as dv;
+@use "../utilities/initial-variables" as iv;
+@use "../utilities/extends";
+@use "../utilities/mixins" as mx;
+
+$message-h: cv.getVar("scheme-h");
+$message-s: cv.getVar("scheme-s");
+$message-background-l: cv.getVar("background-l");
+$message-border-l: cv.getVar("border-l");
+$message-border-l-delta: -20% !default;
+$message-border-style: solid;
+$message-border-width: 0.25em;
+$message-color-l: cv.getVar("text-l");
+$message-header-background-l: cv.getVar("dark-l");
+$message-header-color-l: cv.getVar("text-dark-invert-l");
+$message-radius: cv.getVar("radius") !default;
+
+$message-header-weight: cv.getVar("weight-semibold") !default;
+$message-header-padding: 1em 1.25em !default;
+$message-header-radius: cv.getVar("radius") !default;
+
+$message-body-border-width: 0 0 0 4px !default;
+$message-body-color: cv.getVar("text") !default;
+$message-body-padding: 1.25em 1.5em !default;
+$message-body-radius: cv.getVar("radius-small") !default;
+
+$message-body-pre-code-background-color: transparent !default;
+
+$message-header-body-border-width: 0 !default;
+$message-colors: dv.$colors !default;
+
+.#{iv.$class-prefix}message {
+  @include cv.register-vars(
+    (
+      "message-border-l-delta": #{$message-border-l-delta},
+      "message-radius": #{$message-radius},
+      "message-header-weight": #{$message-header-weight},
+      "message-header-padding": #{$message-header-padding},
+      "message-header-radius": #{$message-header-radius},
+      "message-body-border-width": #{$message-body-border-width},
+      "message-body-color": #{$message-body-color},
+      "message-body-padding": #{$message-body-padding},
+      "message-body-radius": #{$message-body-radius},
+      "message-body-pre-code-background-color": #{$message-body-pre-code-background-color},
+      "message-header-body-border-width": #{$message-header-body-border-width},
+      "message-h": #{$message-h},
+      "message-s": #{$message-s},
+      "message-background-l": #{$message-background-l},
+      "message-border-l": #{$message-border-l},
+      "message-border-style": #{$message-border-style},
+      "message-border-width": #{$message-border-width},
+      "message-color-l": #{$message-color-l},
+      "message-header-background-l": #{$message-header-background-l},
+      "message-header-color-l": #{$message-header-color-l},
+    )
+  );
+}
+
+.#{iv.$class-prefix}message {
+  @extend %block;
+  border-radius: cv.getVar("message-radius");
+  color: hsl(
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-color-l")}
+  );
+  font-size: cv.getVar("size-normal");
+
+  strong {
+    color: currentColor;
+  }
+
+  a:not(.#{iv.$class-prefix}button):not(.#{iv.$class-prefix}tag):not(
+      .#{iv.$class-prefix}dropdown-item
+    ) {
+    color: currentColor;
+    text-decoration: underline;
+  }
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    font-size: cv.getVar("size-small");
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    font-size: cv.getVar("size-medium");
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    font-size: cv.getVar("size-large");
+  }
+
+  // Colors
+  @each $name, $components in $message-colors {
+    &.#{iv.$class-prefix}is-#{$name} {
+      @include cv.register-vars(
+        (
+          "message-h": #{cv.getVar($name, "", "-h")},
+          "message-s": #{cv.getVar($name, "", "-s")},
+          "message-border-l":
+            calc(
+              #{cv.getVar($name, "", "-l")} + #{cv.getVar(
+                  "message-border-l-delta"
+                )}
+            ),
+          "message-color-l": #{cv.getVar($name, "", "-on-scheme-l")},
+          "message-header-background-l": #{cv.getVar($name, "", "-l")},
+          "message-header-color-l": #{cv.getVar($name, "", "-invert-l")},
+        )
+      );
+    }
+  }
+}
+
+.#{iv.$class-prefix}message-header {
+  align-items: center;
+  background-color: hsl(
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-header-background-l")}
+  );
+  border-start-start-radius: cv.getVar("message-header-radius");
+  border-start-end-radius: cv.getVar("message-header-radius");
+  color: hsl(
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-header-color-l")}
+  );
+  display: flex;
+  font-weight: cv.getVar("message-header-weight");
+  justify-content: space-between;
+  line-height: 1.25;
+  padding: cv.getVar("message-header-padding");
+  position: relative;
+
+  .#{iv.$class-prefix}delete {
+    flex-grow: 0;
+    flex-shrink: 0;
+    margin-inline-start: 0.75em;
+  }
+
+  & + .#{iv.$class-prefix}message-body {
+    border-width: cv.getVar("message-header-body-border-width");
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+  }
+}
+
+.#{iv.$class-prefix}message-body {
+  background-color: hsl(
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-background-l")}
+  );
+  border-inline-start-color: hsl(
+    #{cv.getVar("message-h")},
+    #{cv.getVar("message-s")},
+    #{cv.getVar("message-border-l")}
+  );
+  border-inline-start-style: #{cv.getVar("message-border-style")};
+  border-inline-start-width: #{cv.getVar("message-border-width")};
+  border-radius: cv.getVar("message-body-radius");
+  padding: cv.getVar("message-body-padding");
+
+  code,
+  pre {
+    background-color: hsl(
+      #{cv.getVar("message-h")},
+      #{cv.getVar("message-s")},
+      #{cv.getVar("message-header-color-l")}
+    );
+    color: hsl(
+      #{cv.getVar("message-h")},
+      #{cv.getVar("message-s")},
+      #{cv.getVar("message-header-background-l")}
+    );
+  }
+
+  pre code {
+    background-color: cv.getVar("message-body-pre-code-background-color");
+  }
+}