@unlk/keymaster 1.0.0 → 1.0.2

package/package.json

@@ -1,6 +1,9 @@
 {
   "name": "@unlk/keymaster",
-  "version": "1.0.0",
+  "version": "1.0.2",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Unlock Design System Packaged with Bootstrap",
   "main": "index.js",
   "scripts": {
@@ -70,7 +73,7 @@
     "postcss": "^8.4.4",
     "postcss-cli": "^9.0.2",
     "rollup": "^2.60.2",
-    "sass": "^1.44.0",
+    "sass": "1.78.0",
     "terser": "^5.10.0"
   },
   "config": {

package/scss/assets/bootstrap5/_variables.scss

@@ -1749,3 +1749,5 @@ $nested-kbd-font-weight:            null !default; // Deprecated in v5.2.0, remo
 $pre-color:                         null !default;
 
 @import "variables-dark"; // TODO: can be removed safely in v6, only here to avoid breaking changes in v5.3
+
+

package/scss/keymaster.scss

@@ -1,6 +1,10 @@
-// Variable Overrides
-@import "theme/overrides";
-@import "theme/utility-overrides";
+// Overrides
+@import "theme/variables-overrides";
+@import "theme/utilities-overrides";
+@import "theme/maps-overrides";
+
+// Typography
+@import "theme/typography";
 
 // Assets
 @import "assets/bootstrap5/bootstrap";
@@ -12,3 +16,16 @@
 @import "assets/fontawesome/sharp-solid";
 @import "assets/fontawesome/duotone";
 @import "assets/fontawesome/brands";
+
+// Mixins
+@import "theme/mixins/buttons";
+@import "theme/mixins/badge";
+
+// Theme
+@import "theme/variables";
+@import "theme/type";
+@import "theme/buttons";
+@import "theme/accordion";
+@import "theme/alert";
+@import "theme/badge";
+@import "theme/carousel";

package/scss/theme/_accordion.scss

@@ -0,0 +1,62 @@
+.accordion-flush {
+  @include box-shadow($box-shadow);
+}
+
+.accordion-alt {
+  --#{$prefix}accordion-alt-bg: #{$accordion-alt-bg};
+  --#{$prefix}accordion-alt-btn-bg: #{$accordion-alt-button-bg};
+  --#{$prefix}accordion-alt-border-radius: #{$accordion-alt-border-radius};
+  --#{$prefix}accordion-alt-btn-icon-width: #{$accordion-alt-icon-width};
+  --#{$prefix}accordion-alt-btn-icon: #{escape-svg($accordion-alt-button-icon)};
+  --#{$prefix}accordion-alt-btn-active-icon: #{escape-svg($accordion-alt-button-active-icon)};
+  --#{$prefix}accordion-alt-active-color: #{$accordion-alt-button-active-color};
+  .accordion-button {
+    background-color: var(--#{$prefix}accordion-alt-btn-bg);
+    margin-bottom: 0;
+    i {
+      margin-right: $spacer * .5;
+      width: var(--#{$prefix}accordion-alt-btn-icon-width);
+      height: var(--#{$prefix}accordion-alt-btn-icon-width);
+    }
+    &:not(.collapsed) {
+      color: var(--#{$prefix}accordion-alt-active-color);
+      @include box-shadow(none);
+      &::after {
+        background-image: var(--#{$prefix}accordion-alt-btn-active-icon);
+        transform: var(--#{$prefix}accordion-btn-icon-transform);
+      }
+    }
+    &::after {
+      width: var(--#{$prefix}accordion-btn-icon-width);
+      height: var(--#{$prefix}accordion-btn-icon-width);
+      background-image: var(--#{$prefix}accordion-alt-btn-icon);
+    }
+  }
+  > .accordion-item {
+    background-color: var(--#{$prefix}accordion-alt-bg);
+    border: none;
+    @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
+    &:not(:last-child) {
+      @include margin-bottom($spacer);
+    }
+    // stylelint-disable selector-max-class
+    > .accordion-header .accordion-button {
+      &,
+      &.collapsed {
+        @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
+      }
+    }
+    // stylelint-enable selector-max-class
+
+    > .accordion-collapse {
+      @include border-radius(var(--#{$prefix}accordion-alt-border-radius));
+    }
+
+    .accordion-body {
+      padding-top: 0;
+      &.has-icon {
+        padding-left: $spacer * 3.125;
+      }
+    }
+  }
+}

package/scss/theme/_alert.scss

@@ -0,0 +1,24 @@
+.alert {
+  position: relative;
+  display: flex;
+  i {
+    margin-top: $spacer * .25;
+    margin-right: $spacer * .5;
+    font-size: $font-size-base;
+  }
+}
+@each $state, $value in $theme-colors {
+  $alert-border: var(--#{$prefix}#{$state}-border-subtle);
+  $alert-color: var(--#{$prefix}#{$state}-text-emphasis);
+  @if $state == "tertiary" {
+    $alert-border: $gray-400;
+    $alert-color: $foundation-500;
+  }
+
+  .alert-#{$state} {
+    --#{$prefix}alert-color: #{$alert-color};
+    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}alert-border-color: #{$alert-border};
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
+  }
+}

package/scss/theme/_badge.scss

@@ -0,0 +1,19 @@
+.badge-outline {
+  border: rfs-value(2px) solid $blueprint;
+  color: $blueprint;
+}
+
+.badge-dot {
+  --#{$prefix}badge-padding-x: #{$badge-dot-padding};
+  --#{$prefix}badge-padding-y: #{$badge-dot-padding};
+  width: $badge-dot-size;
+  height: $badge-dot-size;
+}
+
+.badge-lg {
+  @include badge-size($badge-font-size-lg);
+}
+
+.badge-sm {
+  @include badge-size($badge-font-size-sm);
+}

package/scss/theme/_buttons.scss

@@ -0,0 +1,52 @@
+.btn {
+  @include box-shadow(none);
+
+  > i + *,
+  > .icon + * {
+    margin-left: $spacer * .5;
+  }
+
+  > * + i,
+  > * + .icon {
+    margin-left: $spacer * .5;
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-link-#{$color} {
+    @if $color == "primary" or $color == "blueprint" {
+      @include button-link-variant(
+          $value,
+        $active-background: $blueprint-700,
+      );
+    }
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-#{$color} {
+    @include button-variant(
+        $value,
+        $value,
+      $hover-background: shade-color($value, $btn-hover-bg-shade-amount),
+      $hover-border: shade-color($value, $btn-hover-border-shade-amount),
+      $active-background: shade-color($value, $btn-active-bg-shade-amount),
+      $active-border: shade-color($value, $btn-active-border-shade-amount),
+      $disabled-color: $white
+    );
+  }
+}
+
+@each $color, $value in $theme-colors {
+  .btn-outline-#{$color} {
+    @if $color == "light" {
+      @include button-outline-variant(
+          $value,
+        $color-hover: $value,
+        $active-background: rgba($blueprint-500, 0.25),
+        $active-border: $value,
+        $active-color: $value,
+      );
+    }
+  }
+}

package/scss/theme/_carousel.scss

@@ -0,0 +1,42 @@
+.carousel-item {
+  img {
+    @include border-radius($border-radius-xl);
+  }
+  .carousel-caption {
+    padding-bottom: ($spacer * .75);
+    h6 {
+      color: $white;
+      margin-bottom: 0;
+    }
+  }
+}
+.carousel-caption-container {
+  @extend .mt-3;
+  float: left;
+  p {
+    margin-bottom: 0;
+  }
+}
+.carousel-controls {
+  @extend .mt-3;
+  display: flex;
+  justify-content: end;
+}
+.carousel-control-prev,
+.carousel-control-next {
+  position: unset;
+}
+.carousel-indicators {
+  position: unset;
+  margin-bottom: 0;
+  margin-left: 0;
+  @include margin-right($spacer * 1.5);
+  [data-bs-target] {
+    @extend .rounded-circle;
+  }
+}
+
+.carousel-control-prev, .carousel-control-next {
+  width: fit-content;
+  padding: rfs-value(6px);
+}

package/scss/theme/_maps-overrides.scss

@@ -0,0 +1,44 @@
+// scss-docs-start theme-text-map
+$theme-colors-text: (
+  "primary": $primary-text-emphasis,
+  "secondary": $secondary-text-emphasis,
+  "tertiary": $tertiary-text-emphasis,
+  "action": $action-text-emphasis,
+  "success": $success-text-emphasis,
+  "info": $info-text-emphasis,
+  "warning": $warning-text-emphasis,
+  "danger": $danger-text-emphasis,
+  "light": $light-text-emphasis,
+  "dark": $dark-text-emphasis,
+);
+// scss-docs-end theme-text-map
+
+// scss-docs-start theme-bg-subtle-map
+$theme-colors-bg-subtle: (
+  "primary": $primary-bg-subtle,
+  "secondary": $secondary-bg-subtle,
+  "tertiary": $tertiary-bg-subtle,
+  "action": $action-bg-subtle,
+  "success": $success-bg-subtle,
+  "info": $info-bg-subtle,
+  "warning": $warning-bg-subtle,
+  "danger": $danger-bg-subtle,
+  "light": $light-bg-subtle,
+  "dark": $dark-bg-subtle,
+);
+// scss-docs-end theme-bg-subtle-map
+
+// scss-docs-start theme-border-subtle-map
+$theme-colors-border-subtle: (
+  "primary": $primary-border-subtle,
+  "secondary": $secondary-border-subtle,
+  "tertiary": $tertiary-border-subtle,
+  "action": $action-border-subtle,
+  "success": $success-border-subtle,
+  "info": $info-border-subtle,
+  "warning": $warning-border-subtle,
+  "danger": $danger-border-subtle,
+  "light": $light-border-subtle,
+  "dark": $dark-border-subtle,
+);
+// scss-docs-end theme-border-subtle-map

package/scss/theme/_type.scss

@@ -0,0 +1,3 @@
+.blockquote {
+  font-family: $blockquote-font-family;
+}

package/scss/theme/_typography.scss

@@ -0,0 +1,36 @@
+@font-face {
+  font-family: "Wix MadeFor Display";
+  src: url('#{$font-path}/WixMadeforDisplay-Regular.woff2') format('woff2'),
+    url('#{$font-path}/WixMadeforDisplay-Regular.ttf') format('truetype');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Wix MadeFor Display";
+  src: url('#{$font-path}/WixMadeforDisplay-Bold.woff2') format('woff2'),
+    url('#{$font-path}/WixMadeforDisplay-Bold.ttf') format('truetype');
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "STIXTwoText";
+  src: url('#{$font-path}/STIXTwoText-Italic.woff2') format('woff2'),
+    url('#{$font-path}/STIXTwoText-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: "Neulis Neue";
+  src: url('#{$font-path}/NeulisNeue-Medium.woff2') format('woff2'),
+  url('#{$font-path}/NeulisNeue-Medium.woff') format('woff');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "Neulis Neue";
+  src: url('#{$font-path}/NeulisNeue-MediumItalic.woff2') format('woff2'),
+  url('#{$font-path}/NeulisNeue-MediumItalic.woff') format('woff');
+  font-weight: 500;
+  font-style: italic;
+}

package/scss/theme/_utilities-overrides.scss

@@ -0,0 +1,55 @@
+@import "../assets/bootstrap5/variables";
+@import "../assets/bootstrap5/variables-dark";
+@import "../assets/bootstrap5/maps";
+@import "../assets/bootstrap5/utilities";
+@import "../assets/bootstrap5/vendor/rfs";
+
+$box-shadow-sm: 0 rfs-value(1px) rfs-value(4px) rgba($foundation-500, .1);
+$box-shadow: 0 rfs-value(4px) rfs-value(10px) rgba($foundation-500, .12);
+$box-shadow-lg: 0 rfs-value(8px) rfs-value(35px) rgba($foundation-500, .16);
+$box-shadow-inset: 0 rfs-value(1px) rfs-value(2px) rgba($foundation-500, .10) inset;
+
+$all-colors: map-merge-multiple($foundations, $blueprints, $entryways, $turnkeys, $sunglows, $warnings, $grays, $successs, $dangers);
+
+$utilities: map-merge(
+    $utilities,
+    (
+      "shadow": map-merge(
+          map-get($utilities, "shadow"),
+          (
+            class: box-shadow,
+            values: map-merge(
+                map-get(map-get($utilities, "shadow"), "values"),
+                (
+                  null: var(--#{$prefix}box-shadow),
+                  sm: var(--#{$prefix}box-shadow-sm),
+                  lg: var(--#{$prefix}box-shadow-lg),
+                  inset: var(--#{$prefix}box-shadow-inset)
+                )
+            )
+          )
+      ),
+      "color": map-merge(
+          map-get($utilities, "color"),
+          (
+            values: map-merge(
+                map-get(map-get($utilities, "color"), "values"),
+                  (
+                    $all-colors
+                  ),
+            ),
+          ),
+      ),
+      "background-color": map-merge(
+          map-get($utilities, "background-color"),
+          (
+            values: map-merge(
+                map-get(map-get($utilities, "background-color"), "values"),
+                  (
+                    $all-colors
+                  ),
+            ),
+          ),
+      ),
+    )
+);