@ardium-ui/ui 1.0.2 → 1.0.3

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@ardium-ui/ui",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "peerDependencies": {
-    "@angular/common": "^17.0.7",
-    "@angular/core": "^17.0.7",
-    "@angular/cdk": "^17.0.7"
+    "@angular/common": ">=17.0.7",
+    "@angular/core": ">=17.0.7",
+    "@angular/cdk": ">=17.0.7"
   },
   "dependencies": {
     "tslib": "^2.3.0",

package/themes/_variables.scss

@@ -1,121 +1,121 @@
-$bg: var(--ard-bg);
-$bg-alt: var(--ard-bg-alt);
-$overlay: var(--ard-overlay);
-$overlay-rgb: var(--ard-overlay-rgb);
-$bg-d: var(--ard-bg-darker);
-$bg-f: var(--ard-bg-filled);
-$bg-f-alt: var(--ard-bg-filled-alt);
-$text: var(--ard-text);
-$text2: var(--ard-text2);
-$text3: var(--ard-text3);
-$text-alt: var(--ard-text-alt);
-$text2-alt: var(--ard-text2-alt);
-$text3-alt: var(--ard-text3-alt);
-$border-dark: var(--ard-border-dark);
-$border: var(--ard-border);
-$border-light: var(--ard-border-light);
-$detail: var(--ard-detail);
-$detail-light: var(--ard-detail-light);
-$detail-ultralight: var(--ard-detail-ultralight);
-$detail-ultralight-solid: var(--ard-detail-ultralight-solid);
-
-$lighten-overlay: var(--ard-lighten-overlay);
-$lighten-overlay-strong: var(--ard-lighten-overlay-strong);
-$lighten-overlay-medium: var(--ard-lighten-overlay-medium);
-$lighten-overlay-light: var(--ard-lighten-overlay-light);
-$darken-overlay: var(--ard-darken-overlay);
-$darken-overlay-strong: var(--ard-darken-overlay-strong);
-$darken-overlay-medium: var(--ard-darken-overlay-medium);
-$darken-overlay-light: var(--ard-darken-overlay-light);
-$darken-overlay-ultralight: var(--ard-darken-overlay-ultralight);
-
-$box-shadow: var(--ard-box-shadow);
-$card-shadow: var(--ard-card-shadow);
-$simple-shadow: var(--ard-simple-shadow);
-$simple-shadow2: var(--ard-simple-shadow2);
-$simple-shadow3: var(--ard-simple-shadow3);
-
-$timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
-
-$clear-button-size: var(--ard-clear-button-size);
-$dropdown-button-size: var(--ard-dropdown-button-size);
-
-$star: var(--ard-star);
-
-$main50: rgb(var(--ard-primary-50));
-$main50-rgb: var(--ard-primary-50);
-$main100: rgb(var(--ard-primary-100));
-$main100-rgb: var(--ard-primary-100);
-$main300: rgb(var(--ard-primary-300));
-$main300-rgb: var(--ard-primary-300);
-$main500: rgb(var(--ard-primary-500));
-$main500-rgb: var(--ard-primary-500);
-$main700: rgb(var(--ard-primary-700));
-$main700-rgb: var(--ard-primary-700);
-$main900: rgb(var(--ard-primary-900));
-$main900-rgb: var(--ard-primary-900);
-
-$scnd50: rgb(var(--ard-secondary-50));
-$scnd50-rgb: var(--ard-secondary-50);
-$scnd100: rgb(var(--ard-secondary-100));
-$scnd100-rgb: var(--ard-secondary-100);
-$scnd300: rgb(var(--ard-secondary-300));
-$scnd300-rgb: var(--ard-secondary-300);
-$scnd500: rgb(var(--ard-secondary-500));
-$scnd500-rgb: var(--ard-secondary-500);
-$scnd700: rgb(var(--ard-secondary-700));
-$scnd700-rgb: var(--ard-secondary-700);
-$scnd900: rgb(var(--ard-secondary-900));
-$scnd900-rgb: var(--ard-secondary-900);
-
-$danger50: rgb(var(--ard-danger-50));
-$danger50-rgb: var(--ard-danger-50);
-$danger100: rgb(var(--ard-danger-100));
-$danger100-rgb: var(--ard-danger-100);
-$danger300: rgb(var(--ard-danger-300));
-$danger300-rgb: var(--ard-danger-300);
-$danger500: rgb(var(--ard-danger-500));
-$danger500-rgb: var(--ard-danger-500);
-$danger700: rgb(var(--ard-danger-700));
-$danger700-rgb: var(--ard-danger-700);
-$danger900: rgb(var(--ard-danger-900));
-$danger900-rgb: var(--ard-danger-900);
-
-$warn50: rgb(var(--ard-warn-50));
-$warn50-rgb: var(--ard-warn-50);
-$warn100: rgb(var(--ard-warn-100));
-$warn100-rgb: var(--ard-warn-100);
-$warn300: rgb(var(--ard-warn-300));
-$warn300-rgb: var(--ard-warn-300);
-$warn500: rgb(var(--ard-warn-500));
-$warn500-rgb: var(--ard-warn-500);
-$warn700: rgb(var(--ard-warn-700));
-$warn700-rgb: var(--ard-warn-700);
-$warn900: rgb(var(--ard-warn-900));
-$warn900-rgb: var(--ard-warn-900);
-
-$success50: rgb(var(--ard-success-50));
-$success50-rgb: var(--ard-success-50);
-$success100: rgb(var(--ard-success-100));
-$success100-rgb: var(--ard-success-100);
-$success300: rgb(var(--ard-success-300));
-$success300-rgb: var(--ard-success-300);
-$success500: rgb(var(--ard-success-500));
-$success500-rgb: var(--ard-success-500);
-$success700: rgb(var(--ard-success-700));
-$success700-rgb: var(--ard-success-700);
-$success900: rgb(var(--ard-success-900));
-$success900-rgb: var(--ard-success-900);
-
-$info50: rgb(var(--ard-info-50));
-$info50-rgb: var(--ard-info-50);
-$info100: rgb(var(--ard-info-100));
-$info100-rgb: var(--ard-info-100);
-$info300: rgb(var(--ard-info-300));
-$info300-rgb: var(--ard-info-300);
-$info500: rgb(var(--ard-info-500));
-$info500-rgb: var(--ard-info-500);
-$info700: rgb(var(--ard-info-700));
-$info700-rgb: var(--ard-info-700);
-$info900: rgb(var(--ard-info-900));
-$info900-rgb: var(--ard-info-900);
+$bg: var(--ard-bg);
+$bg-alt: var(--ard-bg-alt);
+$overlay: var(--ard-overlay);
+$overlay-rgb: var(--ard-overlay-rgb);
+$bg-d: var(--ard-bg-darker);
+$bg-f: var(--ard-bg-filled);
+$bg-f-alt: var(--ard-bg-filled-alt);
+$text: var(--ard-text);
+$text2: var(--ard-text2);
+$text3: var(--ard-text3);
+$text-alt: var(--ard-text-alt);
+$text2-alt: var(--ard-text2-alt);
+$text3-alt: var(--ard-text3-alt);
+$border-dark: var(--ard-border-dark);
+$border: var(--ard-border);
+$border-light: var(--ard-border-light);
+$detail: var(--ard-detail);
+$detail-light: var(--ard-detail-light);
+$detail-ultralight: var(--ard-detail-ultralight);
+$detail-ultralight-solid: var(--ard-detail-ultralight-solid);
+
+$lighten-overlay: var(--ard-lighten-overlay);
+$lighten-overlay-strong: var(--ard-lighten-overlay-strong);
+$lighten-overlay-medium: var(--ard-lighten-overlay-medium);
+$lighten-overlay-light: var(--ard-lighten-overlay-light);
+$darken-overlay: var(--ard-darken-overlay);
+$darken-overlay-strong: var(--ard-darken-overlay-strong);
+$darken-overlay-medium: var(--ard-darken-overlay-medium);
+$darken-overlay-light: var(--ard-darken-overlay-light);
+$darken-overlay-ultralight: var(--ard-darken-overlay-ultralight);
+
+$box-shadow: var(--ard-box-shadow);
+$card-shadow: var(--ard-card-shadow);
+$simple-shadow: var(--ard-simple-shadow);
+$simple-shadow2: var(--ard-simple-shadow2);
+$simple-shadow3: var(--ard-simple-shadow3);
+
+$timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
+
+$clear-button-size: var(--ard-clear-button-size);
+$dropdown-button-size: var(--ard-dropdown-button-size);
+
+$star: var(--ard-star);
+
+$main50: rgb(var(--ard-primary-50));
+$main50-rgb: var(--ard-primary-50);
+$main100: rgb(var(--ard-primary-100));
+$main100-rgb: var(--ard-primary-100);
+$main300: rgb(var(--ard-primary-300));
+$main300-rgb: var(--ard-primary-300);
+$main500: rgb(var(--ard-primary-500));
+$main500-rgb: var(--ard-primary-500);
+$main700: rgb(var(--ard-primary-700));
+$main700-rgb: var(--ard-primary-700);
+$main900: rgb(var(--ard-primary-900));
+$main900-rgb: var(--ard-primary-900);
+
+$scnd50: rgb(var(--ard-secondary-50));
+$scnd50-rgb: var(--ard-secondary-50);
+$scnd100: rgb(var(--ard-secondary-100));
+$scnd100-rgb: var(--ard-secondary-100);
+$scnd300: rgb(var(--ard-secondary-300));
+$scnd300-rgb: var(--ard-secondary-300);
+$scnd500: rgb(var(--ard-secondary-500));
+$scnd500-rgb: var(--ard-secondary-500);
+$scnd700: rgb(var(--ard-secondary-700));
+$scnd700-rgb: var(--ard-secondary-700);
+$scnd900: rgb(var(--ard-secondary-900));
+$scnd900-rgb: var(--ard-secondary-900);
+
+$danger50: rgb(var(--ard-danger-50));
+$danger50-rgb: var(--ard-danger-50);
+$danger100: rgb(var(--ard-danger-100));
+$danger100-rgb: var(--ard-danger-100);
+$danger300: rgb(var(--ard-danger-300));
+$danger300-rgb: var(--ard-danger-300);
+$danger500: rgb(var(--ard-danger-500));
+$danger500-rgb: var(--ard-danger-500);
+$danger700: rgb(var(--ard-danger-700));
+$danger700-rgb: var(--ard-danger-700);
+$danger900: rgb(var(--ard-danger-900));
+$danger900-rgb: var(--ard-danger-900);
+
+$warn50: rgb(var(--ard-warn-50));
+$warn50-rgb: var(--ard-warn-50);
+$warn100: rgb(var(--ard-warn-100));
+$warn100-rgb: var(--ard-warn-100);
+$warn300: rgb(var(--ard-warn-300));
+$warn300-rgb: var(--ard-warn-300);
+$warn500: rgb(var(--ard-warn-500));
+$warn500-rgb: var(--ard-warn-500);
+$warn700: rgb(var(--ard-warn-700));
+$warn700-rgb: var(--ard-warn-700);
+$warn900: rgb(var(--ard-warn-900));
+$warn900-rgb: var(--ard-warn-900);
+
+$success50: rgb(var(--ard-success-50));
+$success50-rgb: var(--ard-success-50);
+$success100: rgb(var(--ard-success-100));
+$success100-rgb: var(--ard-success-100);
+$success300: rgb(var(--ard-success-300));
+$success300-rgb: var(--ard-success-300);
+$success500: rgb(var(--ard-success-500));
+$success500-rgb: var(--ard-success-500);
+$success700: rgb(var(--ard-success-700));
+$success700-rgb: var(--ard-success-700);
+$success900: rgb(var(--ard-success-900));
+$success900-rgb: var(--ard-success-900);
+
+$info50: rgb(var(--ard-info-50));
+$info50-rgb: var(--ard-info-50);
+$info100: rgb(var(--ard-info-100));
+$info100-rgb: var(--ard-info-100);
+$info300: rgb(var(--ard-info-300));
+$info300-rgb: var(--ard-info-300);
+$info500: rgb(var(--ard-info-500));
+$info500-rgb: var(--ard-info-500);
+$info700: rgb(var(--ard-info-700));
+$info700-rgb: var(--ard-info-700);
+$info900: rgb(var(--ard-info-900));
+$info900-rgb: var(--ard-info-900);

package/themes/default/_clear-button.scss

@@ -1,73 +1,73 @@
-@use './mixins' as defaultMixins;
-@import '../variables';
-
-@mixin clearButton() {
-  ard-_clear-button {
-    height: $clear-button-size;
-    width: $clear-button-size;
-    position: relative;
-  }
-
-  .ard-clear-btn-wrapper {
-    cursor: pointer;
-    font-size: medium;
-    color: $detail;
-    width: $clear-button-size;
-    height: $clear-button-size;
-    line-height: 1em;
-    border-radius: 999px;
-    border: none;
-    padding: 0;
-    background: transparent;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    outline: none;
-    color: inherit;
-
-    .ard-hitbox {
-      position: absolute;
-      left: -1px;
-      right: -1px;
-      top: -1px;
-      bottom: -1px;
-    }
-
-    .ard-focus-overlay {
-      @include defaultMixins.focus-overlay(1px);
-      background: currentColor;
-    }
-
-    .ard-clear-btn {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-
-      &::before {
-        content: 'close';
-        @include defaultMixins.icon;
-        font-size: 70%;
-      }
-    }
-
-    &:hover {
-      .ard-focus-overlay {
-        opacity: 5%;
-      }
-    }
-
-    &:focus {
-      .ard-focus-overlay {
-        opacity: 8%;
-      }
-    }
-
-    &:active {
-      .ard-focus-overlay {
-        opacity: 15%;
-      }
-    }
-  }
-}
+@use './mixins' as defaultMixins;
+@import '../variables';
+
+@mixin clearButton() {
+  ard-_clear-button {
+    height: $clear-button-size;
+    width: $clear-button-size;
+    position: relative;
+  }
+
+  .ard-clear-btn-wrapper {
+    cursor: pointer;
+    font-size: medium;
+    color: $detail;
+    width: $clear-button-size;
+    height: $clear-button-size;
+    line-height: 1em;
+    border-radius: 999px;
+    border: none;
+    padding: 0;
+    background: transparent;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    outline: none;
+    color: inherit;
+
+    .ard-hitbox {
+      position: absolute;
+      left: -1px;
+      right: -1px;
+      top: -1px;
+      bottom: -1px;
+    }
+
+    .ard-focus-overlay {
+      @include defaultMixins.focus-overlay(1px);
+      background: currentColor;
+    }
+
+    .ard-clear-btn {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      &::before {
+        content: 'close';
+        @include defaultMixins.icon;
+        font-size: 70%;
+      }
+    }
+
+    &:hover {
+      .ard-focus-overlay {
+        opacity: 5%;
+      }
+    }
+
+    &:focus {
+      .ard-focus-overlay {
+        opacity: 8%;
+      }
+    }
+
+    &:active {
+      .ard-focus-overlay {
+        opacity: 15%;
+      }
+    }
+  }
+}