ngwr 0.0.1

package/styles/mixins/alert.scss

@@ -0,0 +1,7 @@
+@import '../functions';
+
+@mixin alert-colors-generate($color) {
+  color: mix(#000, $color);
+  box-shadow: inset 0 0 0 1px rgba($color, 0.25);
+  background-color: rgba($color, 0.125);
+}

package/styles/mixins/button.scss

@@ -0,0 +1,56 @@
+@import '../functions';
+
+@mixin button-outline-variant($color) {
+  color: $color;
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1.25px rgba($color, 0.3);
+
+  & > wr-spin {
+    color: $color;
+  }
+
+  &:hover {
+    color: color-contrast($color);
+    background-color: $color;
+    box-shadow: none;
+
+    & > wr-spin {
+      color: color-contrast($color);
+    }
+  }
+
+  .btn-check:checked + &,
+  .btn-check:active + &,
+  &:active,
+  &.active,
+  &.dropdown-toggle.show {
+    color: mix(color-contrast($color), darken($color, 20%), 70%);
+    background-color: darken($color, 20%);
+    box-shadow: none;
+  }
+}
+
+@mixin button-variant($color) {
+  color: color-contrast($color);
+  background-color: $color;
+  box-shadow: rgba($color, 0.2) 0 3px 5px -1px, rgba($color, 0.14) 0 6px 10px 0,rgba($color, 0.12) 0 1px 18px 0;
+
+  &:hover {
+    color: color-contrast($color);
+    background-color: saturate(lighten($color, 15%), 20%);
+    box-shadow: rgba($color, 0.2) 0 3px 5px -1px, rgba($color, 0.14) 0 6px 10px 0,rgba($color, 0.12) 0 1px 18px 0;
+  }
+
+  .btn-check:checked + &,
+  .btn-check:active + &,
+  &:active,
+  &.active,{
+    color: mix(color-contrast($color), darken($color, 20%), 70%);
+    background-color: darken($color, 20%);
+    box-shadow: none;
+  }
+
+  & > wr-spin {
+    color: color-contrast($color);
+  }
+}

package/styles/mixins/reset-component.scss

@@ -0,0 +1,13 @@
+@import '../vars';
+
+@mixin reset-component() {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: $text-color;
+  font-size: $font-size-base;
+  font-variant: $font-variant-base;
+  line-height: $line-height-base;
+  list-style: none;
+  font-feature-settings: $font-feature-settings-base;
+}

package/styles/mixins/tag.scss

@@ -0,0 +1,68 @@
+@import '../functions';
+
+@mixin tag-colors-generate($color) {
+  color: color-contrast($color);
+  background-color: $color;
+
+  &:hover {
+    color: color-contrast($color);
+    background-color: saturate(lighten($color, 15%), 20%);
+  }
+
+  &:active,
+  &.active,{
+    color: mix(color-contrast($color), darken($color, 20%), 70%);
+    background-color: darken($color, 20%);
+  }
+
+  & > wr-icon {
+    color: mix(color-contrast($color), $color);
+  }
+}
+
+@mixin tag-transparent-colors-generate($color) {
+  color: $color;
+  background-color: rgba($color, 0.125);
+  box-shadow: inset 0 0 0 1px rgba($color, 0.125);
+
+  &:hover {
+    color: color-contrast($color);
+    background-color: $color;
+
+    & > wr-icon {
+      color: rgba(color-contrast($color), 0.5);
+    }
+  }
+
+  &:active,
+  &.active,{
+    color: mix(color-contrast($color), darken($color, 20%), 70%);
+    background-color: darken($color, 20%);
+  }
+
+  & > wr-icon {
+    color: $color;
+  }
+}
+
+@mixin tag-outline-colors-generate($color) {
+  color: $color;
+  background-color: transparent;
+  box-shadow: inset 0 0 0 1px lighten($color, 30%);
+
+  &:hover {
+    color: lighten($color, 20%);
+    box-shadow: inset 0 0 0 1px lighten($color, 35%);
+  }
+
+  &:active,
+  &.active {
+    color: mix(color-contrast($color), darken($color, 20%), 70%);
+    background-color: darken($color, 20%);
+    box-shadow: none;
+  }
+
+  & > wr-icon {
+    color: lighten($color, 10%);
+  }
+}

package/styles/reset.scss

@@ -0,0 +1,104 @@
+@import './vars';
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+:root {
+  font-size: 1rem;
+  scroll-behavior: smooth;
+}
+
+html,
+body {
+  background-color: $body-background;
+  height: 100%;
+  width: 100%;
+  font-family: $font-family;
+  font-size: $font-size-base;
+  font-weight: $font-weight-base;
+  line-height: $line-height-base;
+  letter-spacing: $letter-spacing-base;
+  color: $color-dark;
+  text-align: left;
+  direction: ltr;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0,0,0,0);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -ms-text-size-adjust: 100%;
+}
+
+:focus {
+  outline: 0;
+}
+
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+a {
+  text-decoration: none;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+
+  &:before,
+  &:after {
+    content: '';
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+input[type=search]::-webkit-search-cancel-button,
+input[type=search]::-webkit-search-decoration,
+input[type=search]::-webkit-search-results-button,
+input[type=search]::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+input[type=search] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+}
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+[hidden] {
+  display: none;
+}
+
+img {
+  border: none;
+}

package/styles/root.scss

@@ -0,0 +1,31 @@
+@import 'vars';
+
+:root {
+  @each $color, $value in $theme-colors {
+    --color-#{$color}: #{$value};
+  }
+
+  @each $color, $value in $theme-colors-rgb {
+    --color-#{$color}-rgb: #{$value};
+  }
+
+  --color-white: #{$color-white};
+  --color-black: #{$color-black};
+
+  --color-white-rgb: #{to-rgb($color-white)};
+  --color-black-rgb: #{to-rgb($color-black)};
+
+  --font-family-base: #{$font-family};
+  --font-family-code: #{$code-family};
+  --font-size-base: #{$font-size-base};
+  --font-weight-base: #{$font-size-base};
+
+  --transition-base: #{$transition-base};
+
+  --radius-base: 0.625rem;
+
+  --shadow-base: inset 0 0 0 1px rgba(var(--color-dark-rgb), 0.125);
+//, 0px 2px 4px -2px rgba(var(--color-dark-rgb), 0.125
+  --shadow-base-hover: inset 0 0 0 1px rgba(var(--color-dark-rgb), 0.125), 0px 25px 50px -12px rgba(var(--color-dark-rgb), 0.125);
+
+}