@unlk/keymaster 1.0.0 → 1.0.1

package/scss/theme/_variables-overrides.scss

@@ -0,0 +1,417 @@
+@import "../assets/bootstrap5/functions";
+@import "../assets/bootstrap5/variables";
+
+$enable-shadows: true;
+$enable-validation-icons: false;
+
+// Fontawesome
+$font-path: "../../fonts";
+$fa-font-path: "../../../fonts";
+
+// Font
+$font-size-base: 1rem;
+$font-size-lg: $font-size-base * 1.125;
+
+$font-family-base: "Wix MadeFor Display";
+$font-family-code: "Wix MadeFor Display";
+
+// Colors
+$foundation: #1D1F50;
+$blueprint: #3E51A2;
+$entryway: #3B7BBF;
+$skylight: #CDECF9;
+$turnkey: #6346D3;
+$sunglow: #FBCD2F;
+$green: #027a48;
+$red: #b42318;
+$gray: #c1c5cc;
+
+$white: #fff;
+$gray-25: tint-color($gray, 95%);
+$gray-50: tint-color($gray, 90%);
+$gray-100: tint-color($gray, 80%);
+$gray-200: tint-color($gray, 60%);
+$gray-300: tint-color($gray, 40%);
+$gray-400: tint-color($gray, 20%);
+$gray-500: $gray;
+$gray-600: shade-color($gray, 20%);
+$gray-700: shade-color($gray, 40%);
+$gray-800: shade-color($gray, 60%);
+$gray-900: shade-color($gray, 80%);
+$black: #000;
+
+$grays: (
+  "25": $gray-25,
+  "50": $gray-50,
+  "100": $gray-100,
+  "200": $gray-200,
+  "300": $gray-300,
+  "400": $gray-400,
+  "500": $gray-500,
+  "600": $gray-600,
+  "700": $gray-700,
+  "800": $gray-800,
+  "900": $gray-900
+);
+
+$colors: (
+  "foundation": $foundation,
+  "blueprint": $blueprint,
+  "entryway": $entryway,
+  "sunglow": $sunglow,
+  "green": $green,
+  "turnkey": $turnkey,
+  "red": $red,
+  "gray": $gray-600,
+);
+
+// Color variants
+$foundation-25: tint-color($foundation, 95%);
+$foundation-100: tint-color($foundation, 80%);
+$foundation-200: tint-color($foundation, 60%);
+$foundation-300: tint-color($foundation, 40%);
+$foundation-400: tint-color($foundation, 20%);
+$foundation-450: tint-color($foundation, 10%);
+$foundation-500: $foundation;
+$foundation-600: shade-color($foundation, 20%);
+$foundation-700: shade-color($foundation, 40%);
+$foundation-800: shade-color($foundation, 60%);
+$foundation-900: shade-color($foundation, 80%);
+
+$blueprint-25: tint-color($blueprint, 95%);
+$blueprint-100: tint-color($blueprint, 80%);
+$blueprint-200: tint-color($blueprint, 60%);
+$blueprint-300: tint-color($blueprint, 40%);
+$blueprint-400: tint-color($blueprint, 20%);
+$blueprint-450: tint-color($blueprint, 10%);
+$blueprint-500: $blueprint;
+$blueprint-600: shade-color($blueprint, 20%);
+$blueprint-700: shade-color($blueprint, 40%);
+$blueprint-800: shade-color($blueprint, 60%);
+$blueprint-900: shade-color($blueprint, 80%);
+
+$entryway-25: tint-color($entryway, 95%);
+$entryway-100: tint-color($entryway, 80%);
+$entryway-200: tint-color($entryway, 60%);
+$entryway-300: tint-color($entryway, 40%);
+$entryway-400: tint-color($entryway, 20%);
+$entryway-450: tint-color($entryway, 10%);
+$entryway-500: $entryway;
+$entryway-600: shade-color($entryway, 20%);
+$entryway-700: shade-color($entryway, 40%);
+$entryway-800: shade-color($entryway, 60%);
+$entryway-900: shade-color($entryway, 80%);
+
+$skylight-25: tint-color($skylight, 95%);
+$skylight-100: tint-color($skylight, 80%);
+$skylight-200: tint-color($skylight, 60%);
+$skylight-300: tint-color($skylight, 40%);
+$skylight-400: tint-color($skylight, 20%);
+$skylight-450: tint-color($skylight, 10%);
+$skylight-500: $skylight;
+$skylight-600: shade-color($skylight, 20%);
+$skylight-700: shade-color($skylight, 40%);
+$skylight-800: shade-color($skylight, 60%);
+$skylight-900: shade-color($skylight, 80%);
+
+$sunglow-25: tint-color($sunglow, 95%);
+$sunglow-100: tint-color($sunglow, 80%);
+$sunglow-200: tint-color($sunglow, 60%);
+$sunglow-300: tint-color($sunglow, 40%);
+$sunglow-400: tint-color($sunglow, 20%);
+$sunglow-450: tint-color($sunglow, 10%);
+$sunglow-500: $sunglow;
+$sunglow-600: shade-color($sunglow, 20%);
+$sunglow-700: shade-color($sunglow, 40%);
+$sunglow-800: shade-color($sunglow, 60%);
+$sunglow-900: shade-color($sunglow, 80%);
+
+$turnkey-25: tint-color($turnkey, 95%);
+$turnkey-100: tint-color($turnkey, 80%);
+$turnkey-200: tint-color($turnkey, 60%);
+$turnkey-300: tint-color($turnkey, 40%);
+$turnkey-400: tint-color($turnkey, 20%);
+$turnkey-450: tint-color($turnkey, 10%);
+$turnkey-500: $turnkey;
+$turnkey-600: shade-color($turnkey, 20%);
+$turnkey-700: shade-color($turnkey, 40%);
+$turnkey-800: shade-color($turnkey, 60%);
+$turnkey-900: shade-color($turnkey, 80%);
+
+$success-25: tint-color($green, 95%);
+$success-100: tint-color($green, 80%);
+$success-200: tint-color($green, 60%);
+$success-300: tint-color($green, 40%);
+$success-400: tint-color($green, 20%);
+$success-450: tint-color($green, 10%);
+$success-500: $green;
+$success-600: shade-color($green, 20%);
+$success-700: shade-color($green, 40%);
+$success-800: shade-color($green, 60%);
+$success-900: shade-color($green, 80%);
+
+$danger-25: tint-color($red, 95%);
+$danger-100: tint-color($red, 80%);
+$danger-200: tint-color($red, 60%);
+$danger-300: tint-color($red, 40%);
+$danger-400: tint-color($red, 20%);
+$danger-450: tint-color($red, 10%);
+$danger-500: $red;
+$danger-600: shade-color($red, 20%);
+$danger-700: shade-color($red, 40%);
+$danger-800: shade-color($red, 60%);
+$danger-900: shade-color($red, 80%);
+
+$foundations: (
+  "foundation-100": $foundation-100,
+  "foundation-200": $foundation-200,
+  "foundation-300": $foundation-300,
+  "foundation-400": $foundation-400,
+  "foundation-450": $foundation-450,
+  "foundation-500": $foundation-500,
+  "foundation-600": $foundation-600,
+  "foundation-700": $foundation-700,
+  "foundation-800": $foundation-800,
+  "foundation-900": $foundation-900
+);
+
+$blueprints: (
+  "blueprint-100": $blueprint-100,
+  "blueprint-200": $blueprint-200,
+  "blueprint-300": $blueprint-300,
+  "blueprint-400": $blueprint-400,
+  "blueprint-450": $blueprint-450,
+  "blueprint-500": $blueprint-500,
+  "blueprint-600": $blueprint-600,
+  "blueprint-700": $blueprint-700,
+  "blueprint-800": $blueprint-800,
+  "blueprint-900": $blueprint-900
+);
+
+$entryways: (
+  "entryway-100": $entryway-100,
+  "entryway-200": $entryway-200,
+  "entryway-300": $entryway-300,
+  "entryway-400": $entryway-400,
+  "entryway-450": $entryway-450,
+  "entryway-500": $entryway-500,
+  "entryway-600": $entryway-600,
+  "entryway-700": $entryway-700,
+  "entryway-800": $entryway-800,
+  "entryway-900": $entryway-900
+);
+
+$sunglows: (
+  "sunglow-100": $sunglow-100,
+  "sunglow-200": $sunglow-200,
+  "sunglow-300": $sunglow-300,
+  "sunglow-400": $sunglow-400,
+  "sunglow-450": $sunglow-450,
+  "sunglow-500": $sunglow-500,
+  "sunglow-600": $sunglow-600,
+  "sunglow-700": $sunglow-700,
+  "sunglow-800": $sunglow-800,
+  "sunglow-900": $sunglow-900
+);
+
+$warnings: (
+  "warning-100": $sunglow-100,
+  "warning-200": $sunglow-200,
+  "warning-300": $sunglow-300,
+  "warning-400": $sunglow-400,
+  "warning-450": $sunglow-450,
+  "warning-500": $sunglow-500,
+  "warning-600": $sunglow-600,
+  "warning-700": $sunglow-700,
+  "warning-800": $sunglow-800,
+  "warning-900": $sunglow-900
+);
+
+$turnkeys: (
+  "turnkey-100": $turnkey-100,
+  "turnkey-200": $turnkey-200,
+  "turnkey-300": $turnkey-300,
+  "turnkey-400": $turnkey-400,
+  "turnkey-450": $turnkey-450,
+  "turnkey-500": $turnkey-500,
+  "turnkey-600": $turnkey-600,
+  "turnkey-700": $turnkey-700,
+  "turnkey-800": $turnkey-800,
+  "turnkey-900": $turnkey-900
+);
+
+$dangers: (
+  "danger-25": $danger-25,
+  "danger-100": $danger-100,
+  "danger-200": $danger-200,
+  "danger-300": $danger-300,
+  "danger-400": $danger-400,
+  "danger-450": $danger-450,
+  "danger-500": $danger-500,
+  "danger-600": $danger-600,
+  "danger-700": $danger-700,
+  "danger-800": $danger-800,
+  "danger-900": $danger-900
+);
+
+$successs: (
+  "success-25": $success-25,
+  "success-100": $success-100,
+  "success-200": $success-200,
+  "success-300": $success-300,
+  "success-400": $success-400,
+  "success-450": $success-450,
+  "success-500": $success-500,
+  "success-600": $success-600,
+  "success-700": $success-700,
+  "success-800": $success-800,
+  "success-900": $success-900,
+);
+
+$primary: $blueprint;
+$secondary: $entryway;
+$tertiary: $skylight;
+$success: $green;
+$action: $turnkey;
+$warning: $sunglow;
+$danger: $red;
+$light: $white;
+$dark: $gray-900;
+
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "tertiary": $tertiary,
+  "success": $success,
+  "action": $action,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark": $dark,
+);
+
+// scss-docs-start theme-text-variables
+$tertiary-text-emphasis: shade-color($tertiary, 60%);
+$action-text-emphasis: shade-color($action, 60%);
+// scss-docs-end theme-text-variables
+
+// scss-docs-start theme-bg-subtle-variables
+$tertiary-bg-subtle: tint-color($tertiary, 0%);
+$action-bg-subtle: tint-color($action, 80%);
+// scss-docs-end theme-bg-subtle-variables
+
+// scss-docs-start theme-border-subtle-variables
+$tertiary-border-subtle: tint-color($tertiary, 60%);
+$action-border-subtle: tint-color($action, 60%);
+// scss-docs-end theme-border-subtle-variables
+
+
+// Body
+$body-color: $gray-900;
+
+// Grid breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+  xxxl: 1600px
+);
+
+// Grid containers
+$container-max-widths: (
+  xs: 100%,
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1320px,
+  xxxl: 1510px
+);
+
+// Body
+$body-color: $foundation-500;
+
+// Headings
+$headings-color: $foundation-500;
+$headings-font-family: "Neulis Neue";
+$headings-font-weight: $font-weight-medium;
+
+// Display Headings
+$display-font-family: "Neulis Neue";
+$display-font-weight: $font-weight-medium;
+$display-line-height: 1.1 !default;
+
+$font-sizes: (
+  1: $font-size-base * 1.25,
+  2: $font-size-base * 1.125,
+  3: $font-size-base,
+  4: $font-size-base * .875,
+  5: $font-size-base * .75,
+  6: $font-size-base * .625,
+);
+
+// Tables
+$table-bg-scale: -80% !default;
+
+$table-variants: (
+  "primary": shift-color($primary, $table-bg-scale),
+  "secondary": shift-color($secondary, $table-bg-scale),
+  "tertiary": shift-color($tertiary, $table-bg-scale),
+  "action": shift-color($action, $table-bg-scale),
+  "success": shift-color($success, $table-bg-scale),
+  "warning": shift-color($warning, $table-bg-scale),
+  "danger": shift-color($danger, $table-bg-scale),
+  "light": $light,
+  "dark": $dark,
+);
+
+// Borders
+$border-width: 2px;
+
+// Buttons + Forms
+$input-btn-border-width: .125rem;
+
+// Buttons
+$btn-hover-bg-shade-amount: 20%;
+$btn-hover-bg-tint-amount: 10%;
+$btn-hover-border-shade-amount: 20%;
+$btn-hover-border-tint-amount: 10%;
+$btn-active-bg-shade-amount: 40%;
+$btn-active-bg-tint-amount: 20%;
+$btn-active-border-shade-amount: 40%;
+$btn-active-border-tint-amount: 10%;
+
+// Border Radius
+$border-radius: .5rem;
+$border-radius-sm: .375rem;
+$border-radius-lg: .625rem;
+$border-radius-xl: 1rem;
+$border-radius-xxl: 1.5rem;
+
+$blockquote-font-size: $font-size-base * 3.5;
+
+// Accordion
+$accordion-border-radius: var(--#{$prefix}border-radius-sm);
+$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width);
+$accordion-button-active-bg: var(--#{$prefix}primary);
+$accordion-button-active-color: var(--#{$prefix}light);
+$accordion-icon-active-color: $light;
+$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='#{$accordion-icon-color}'><path d='M11.1,18.3c0.5,0.5,1.4,0.5,1.9,0L23.6,7.6c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L12,15.5L2.3,5.7c-0.5-0.5-1.4-0.5-1.9,0s-0.5,1.4,0,1.9L11.1,18.3z'/></svg>");
+$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' fill='#{$accordion-icon-active-color}'><path d='M11.1,18.3c0.5,0.5,1.4,0.5,1.9,0L23.6,7.6c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.4-0.5-1.9,0L12,15.5L2.3,5.7c-0.5-0.5-1.4-0.5-1.9,0s-0.5,1.4,0,1.9L11.1,18.3z'/></svg>");
+$accordion-button-focus-box-shadow: none;
+
+// Badges
+$badge-font-size: .9375em;
+$badge-border-radius: var(--#{$prefix}border-radius-pill);
+
+// Carousel
+$carousel-control-color: $black;
+$carousel-control-icon-width: .75rem;
+$carousel-indicator-width: 6px;
+$carousel-indicator-height: 6px;
+$carousel-indicator-active-bg: $foundation-500;
+$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='#{$carousel-control-color}'><path d='M0.251787 5.38204C-0.083034 5.72383 -0.083034 6.27891 0.251787 6.62071L4.5375 10.9957C4.87232 11.3375 5.41607 11.3375 5.75089 10.9957C6.08572 10.6539 6.08572 10.0988 5.75089 9.75704L2.925 6.87501H11.1429C11.617 6.87501 12 6.48399 12 6.00001C12 5.51602 11.617 5.12501 11.1429 5.12501H2.92768L5.74822 2.24297C6.08304 1.90118 6.08304 1.3461 5.74822 1.0043C5.41339 0.662506 4.86964 0.662506 4.53482 1.0043L0.249109 5.3793L0.251787 5.38204Z'/></svg>");
+$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='#{$carousel-control-color}'><path d='M11.7482 5.87002C12.083 5.52822 12.083 4.97314 11.7482 4.63135L7.4625 0.256348C7.12768 -0.0854492 6.58393 -0.0854492 6.24911 0.256348C5.91429 0.598145 5.91429 1.15322 6.24911 1.49502L9.075 4.37705H0.857143C0.383036 4.37705 0 4.76807 0 5.25205C0 5.73604 0.383036 6.12705 0.857143 6.12705H9.07232L6.25179 9.00908C5.91696 9.35088 5.91696 9.90596 6.25179 10.2478C6.58661 10.5896 7.13036 10.5896 7.46518 10.2478L11.7509 5.87275L11.7482 5.87002Z'/></svg>");

package/scss/theme/_variables.scss

@@ -0,0 +1,33 @@
+@import "./variables-overrides";
+
+// scss-docs-start type-variables
+$blockquote-font-family: "STIXTwoText";
+// scss-docs-end type-variables
+
+// scss-docs-start border-radius-variables
+$border-radius-xs: rfs-value(4px);
+
+// scss-docs-end border-radius-variables
+
+// Accordion
+
+// scss-docs-start accordion-variables
+$accordion-alt-bg: $gray-50;
+$accordion-alt-border-width: 0;
+$accordion-alt-button-bg: $gray-50;
+$accordion-alt-icon-width: 1.375rem;
+$accordion-alt-border-radius: var(--#{$prefix}border-radius-lg);
+$accordion-alt-button-active-color: var(--#{$prefix}primary-text-emphasis);
+$accordion-alt-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='#{$accordion-icon-color}'><path d='M12.6923 1.69231C12.6923 0.75625 11.9361 0 11 0C10.0639 0 9.30769 0.75625 9.30769 1.69231V9.30769H1.69231C0.75625 9.30769 0 10.0639 0 11C0 11.9361 0.75625 12.6923 1.69231 12.6923H9.30769V20.3077C9.30769 21.2438 10.0639 22 11 22C11.9361 22 12.6923 21.2438 12.6923 20.3077V12.6923H20.3077C21.2438 12.6923 22 11.9361 22 11C22 10.0639 21.2438 9.30769 20.3077 9.30769H12.6923V1.69231Z'/></svg>");
+$accordion-alt-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 25' fill='#{$accordion-icon-color}'><path d='M21.2143 12.5C21.2143 13.3643 20.512 14.0625 19.6428 14.0625H2.35713C1.48794 14.0625 0.785706 13.3643 0.785706 12.5C0.785706 11.6357 1.48794 10.9375 2.35713 10.9375H19.6428C20.512 10.9375 21.2143 11.6357 21.2143 12.5Z'/></svg>");
+// scss-docs-end accordion-variables
+
+
+// Badges
+
+// scss-docs-start badge-variables
+$badge-font-size-sm: .75em;
+$badge-font-size-lg: 1.125em;
+$badge-dot-padding: .5em;
+$badge-dot-size: 1rem;
+// scss-docs-end badge-variables

package/scss/theme/mixins/_badge.scss

@@ -0,0 +1,5 @@
+// scss-docs-start badge-size-mixin
+@mixin badge-size($font-size) {
+  @include rfs($font-size, --#{$prefix}badge-font-size);
+}
+// scss-docs-end badge-size-mixin

package/scss/theme/mixins/_buttons.scss

@@ -0,0 +1,55 @@
+// scss-docs-start btn-variant-mixin
+@mixin button-variant(
+  $background,
+  $border,
+  $color: color-contrast($background),
+  $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
+  $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
+  $hover-color: color-contrast($hover-background),
+  $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
+  $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
+  $active-color: color-contrast($active-background),
+  $disabled-background: rgba($background, 1),
+  $disabled-border: rgba($border, 1),
+  $disabled-color: color-contrast($disabled-background)
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: #{$background};
+  --#{$prefix}btn-border-color: #{$border};
+  --#{$prefix}btn-hover-color: #{$hover-color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: #{$hover-border};
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-border-color: #{$active-border};
+  --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-bg: #{$disabled-background};
+  --#{$prefix}btn-disabled-border-color: #{$disabled-border};
+}
+// scss-docs-end btn-variant-mixin
+
+@mixin button-link-variant(
+  $color,
+  $hover-background: tint-color($color, 90%),
+  $active-background: shade-color($color, 20%),
+  $active-border: $color,
+  $active-color: $white,
+  $disabled-color: $gray-300
+) {
+  --#{$prefix}btn-color: #{$color};
+  --#{$prefix}btn-bg: transparent;
+  --#{$prefix}btn-border-color: transparent;
+  --#{$prefix}btn-hover-color: #{$color};
+  --#{$prefix}btn-hover-bg: #{$hover-background};
+  --#{$prefix}btn-hover-border-color: transparent;
+  --#{$prefix}btn-active-bg: #{$active-background};
+  --#{$prefix}btn-active-color: #{$active-color};
+  --#{$prefix}btn-active-border-color: transparent;
+  --#{$prefix}btn-disabled-bg: transparent;
+  --#{$prefix}btn-disabled-color: #{$disabled-color};
+  --#{$prefix}btn-disabled-border-color: transparent;
+  --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix(color-contrast($primary), $primary, 15%))};
+  text-decoration: none;
+}