@projectcaluma/ember-form 11.2.1 → 12.0.0

package/app/styles/@projectcaluma/ember-form.scss

@@ -1,10 +1,7 @@
 @import "ember-uikit/variables-theme";
-
 @import "../cf-field";
 @import "../cf-navigation";
-
 @import "../flatpickr";
-
 @import "../uikit-overwrites";
 
 .table-controls > .uk-icon {

package/app/styles/_cf-navigation.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $icon-size: 0.8rem !default;
 
 .cf-navigation {
@@ -13,9 +15,8 @@ $icon-size: 0.8rem !default;
       position: relative;
       height: $icon-size;
       width: $icon-size;
-      color: darken($global-border, 40%);
-      border: 1px solid darken($global-border, 10%);
-
+      color: color.adjust($global-border, $lightness: -40%);
+      border: 1px solid color.adjust($global-border, $lightness: -10%);
       transition: color 500ms ease, border 500ms ease;
 
       &::before {
@@ -36,6 +37,7 @@ $icon-size: 0.8rem !default;
       &--in-progress::before {
         content: "?";
       }
+
       &--valid::before {
         content: "✓";
       }
@@ -48,16 +50,16 @@ $icon-size: 0.8rem !default;
 }
 
 .cf-navigation__item__icon--in-progress.cf-navigation__item__icon--dirty {
-  color: darken($global-warning-background, 20%);
-  border-color: lighten($global-warning-background, 10%);
+  color: color.adjust($global-warning-background, $lightness: -20%);
+  border-color: color.adjust($global-warning-background, $lightness: 10%);
 }
 
 .cf-navigation__item__icon--valid.cf-navigation__item__icon--dirty {
-  color: darken($global-success-background, 20%);
-  border-color: lighten($global-success-background, 10%);
+  color: color.adjust($global-success-background, $lightness: -20%);
+  border-color: color.adjust($global-success-background, $lightness: 10%);
 }
 
 .cf-navigation__item__icon--invalid.cf-navigation__item__icon--dirty {
-  color: darken($global-danger-background, 20%);
-  border-color: lighten($global-danger-background, 10%);
+  color: color.adjust($global-danger-background, $lightness: -20%);
+  border-color: color.adjust($global-danger-background, $lightness: 10%);
 }

package/app/styles/_flatpickr.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 $flatpickr-today-color: $global-warning-background;
 $flatpickr-selected-color: $global-primary-background;
 
@@ -19,8 +21,8 @@ span.flatpickr-day {
     font-weight: 700;
 
     &:hover {
-      background: darken($flatpickr-selected-color, 10%);
-      border-color: darken($flatpickr-selected-color, 10%);
+      background: color.adjust($flatpickr-selected-color, $lightness: -10%);
+      border-color: color.adjust($flatpickr-selected-color, $lightness: -10%);
     }
   }
 }

package/app/styles/_uikit-overwrites.scss

@@ -1,27 +1,23 @@
-// UIkit overwrites
-// ----------------
-// These styles amend UIkit so that disabled form elements can be styled as
-// disabled with a class instead of just by the element's disabled property.
-//
-// There is an open pull request upstream:
-// https://github.com/uikit/uikit/pull/3990
-
-.uk-radio.uk-disabled,
-.uk-checkbox.uk-disabled {
-  cursor: default;
-}
+/* UIkit overwrites
+ * ----------------
+ * These styles amend UIkit so that disabled form elements can be styled as
+ * disabled with a class instead of just by the element's disabled property.
+ *
+ * There is an open pull request upstream:
+ * https://github.com/uikit/uikit/pull/3990 */
 
 .uk-input.uk-disabled,
 .uk-select.uk-disabled,
 .uk-textarea.uk-disabled {
   background-color: $form-disabled-background;
   color: $form-disabled-color;
-  @if (mixin-exists(hook-form-disabled)) {
-    @include hook-form-disabled();
+
+  @if mixin-exists(hook-form-disabled) {
+    @include hook-form-disabled;
   }
 }
 
-.uk-select:not([multiple]):not([size]).uk-disabled {
+.uk-select:not([multiple], [size]).uk-disabled {
   @include svg-fill(
     $internal-form-select-image,
     "#000",
@@ -31,9 +27,11 @@
 
 .uk-radio.uk-disabled,
 .uk-checkbox.uk-disabled {
+  cursor: default;
   background-color: $form-radio-disabled-background;
-  @if (mixin-exists(hook-form-radio-disabled)) {
-    @include hook-form-radio-disabled();
+
+  @if mixin-exists(hook-form-radio-disabled) {
+    @include hook-form-radio-disabled;
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@projectcaluma/ember-form",
-  "version": "11.2.1",
+  "version": "12.0.0",
   "description": "Ember addon for rendering Caluma forms.",
   "keywords": [
     "ember-addon"
@@ -29,14 +29,14 @@
     "ember-math-helpers": "^3.0.0",
     "ember-power-select": "^7.0.0",
     "ember-resources": "^5.6.4",
-    "ember-uikit": "^7.0.3",
+    "ember-uikit": "^8.0.0",
     "ember-validators": "^4.1.2",
     "graphql": "^15.8.0",
     "jexl": "^2.3.0",
     "lodash.isequal": "^4.5.0",
     "luxon": "^3.3.0",
     "tracked-toolbox": "^2.0.0",
-    "@projectcaluma/ember-core": "^11.2.1"
+    "@projectcaluma/ember-core": "^12.0.0"
   },
   "devDependencies": {
     "@ember/optional-features": "2.0.0",
@@ -44,7 +44,7 @@
     "@embroider/test-setup": "2.1.1",
     "@faker-js/faker": "7.6.0",
     "broccoli-asset-rev": "3.0.0",
-    "ember-cli": "4.11.0",
+    "ember-cli": "4.12.1",
     "ember-cli-code-coverage": "2.0.0",
     "ember-cli-dependency-checker": "3.3.1",
     "ember-cli-inject-live-reload": "2.1.0",
@@ -63,13 +63,13 @@
     "qunit-dom": "2.0.0",
     "uikit": "3.16.15",
     "uuid": "9.0.0",
-    "webpack": "5.80.0",
-    "@projectcaluma/ember-testing": "11.2.1",
-    "@projectcaluma/ember-workflow": "11.2.1"
+    "webpack": "5.81.0",
+    "@projectcaluma/ember-testing": "12.0.0",
+    "@projectcaluma/ember-workflow": "12.0.0"
   },
   "peerDependencies": {
-    "ember-source": "^3.28.0 || ^4.0.0",
-    "@projectcaluma/ember-workflow": "^11.2.1"
+    "ember-source": "^4.0.0",
+    "@projectcaluma/ember-workflow": "^12.0.0"
   },
   "peerDependenciesMeta": {
     "@projectcaluma/ember-workflow": {