@oruga-ui/theme-oruga 0.2.2 → 0.4.0

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@oruga-ui/theme-oruga",
-  "version": "0.2.2",
+  "version": "0.4.0",
   "description": "Default theme for Oruga",
   "license": "MIT",
+  "type": "module",
   "main": "dist/theme.js",
   "module": "dist/theme.js",
   "unpkg": "dist/theme.min.js",
@@ -16,7 +17,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/oruga-ui/theme-oruga.git"
+    "url": "git+https://github.com/oruga-ui/theme-oruga.git"
   },
   "bugs": {
     "url": "https://github.com/oruga-ui/theme-oruga/issues"
@@ -25,46 +26,44 @@
     "dev": "vite --force",
     "serve": "vite preview",
     "build": "vue-tsc --noEmit && vite build",
-    "build:lib": "rimraf dist && npm run build:config && npm run build:scss && npm run build:scss-full",
+    "build:lib": "rimraf dist && npm run build:config && npm run build:scss",
     "build:config": "rollup -c",
-    "build:scss": "sass --no-charset ./src/assets/scss/oruga.scss | node ./build/banner.js > dist/oruga.css && cleancss -o dist/oruga.min.css dist/oruga.css",
-    "build:scss-full": "sass --no-charset ./src/assets/scss/oruga-full.scss | node ./build/banner.js > dist/oruga-full.css && cleancss -o dist/oruga-full.min.css dist/oruga-full.css",
+    "build:scss": "sass --no-charset ./src/assets/scss/oruga-build.scss | node ./build/banner.js > dist/oruga.css && cleancss -o dist/oruga.min.css dist/oruga.css",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
     "lint:style": "stylelint **/*.{css,scss} --fix --ignore-path .gitignore",
     "update": "ncu -u"
   },
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "6.5.1",
-    "@oruga-ui/oruga-next": "0.8.3",
+    "@oruga-ui/examples": "^0.9.0-pre.1",
+    "@oruga-ui/oruga-next": "^0.9.0-pre.1",
     "@rollup/plugin-typescript": "11.1.6",
-    "@vitejs/plugin-vue": "5.0.3",
+    "@vitejs/plugin-vue": "5.0.5",
     "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^13.0.0",
     "@vue/tsconfig": "^0.5.1",
-    "autoprefixer": "10.4.17",
+    "autoprefixer": "10.4.19",
     "clean-css-cli": "^5.6.3",
-    "core-js": "3.35.1",
-    "eslint": "^8.56.0",
+    "core-js": "3.37.1",
+    "eslint": "^8.57.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-vue": "^9.21.1",
-    "npm-check-updates": "^16.14.14",
-    "postcss": "8.4.34",
-    "prettier": "^3.2.5",
-    "rimraf": "5.0.5",
-    "rollup": "^4.9.6",
+    "eslint-plugin-vue": "^9.27.0",
+    "npm-check-updates": "^16.14.20",
+    "postcss": "8.4.39",
+    "prettier": "^3.3.3",
+    "rimraf": "6.0.1",
+    "rollup": "^4.18.1",
     "rollup-plugin-copy": "3.5.0",
-    "rollup-plugin-sass": "1.12.21",
-    "sass": "1.70.0",
-    "stylelint": "^16.2.1",
-    "stylelint-config-recommended": "^14.0.0",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-prettier": "^5.0.0",
-    "stylelint-scss": "^6.1.0",
-    "tslib": "2.6.2",
-    "typescript": "5.3.3",
-    "vite": "^5.0.12",
-    "vue": "3.4.15",
-    "vue-router": "4.2.5",
-    "vue-tsc": "1.8.27"
+    "rollup-plugin-sass": "1.13.1",
+    "sass": "1.77.8",
+    "stylelint": "^16.7.0",
+    "stylelint-config-recommended": "^14.0.1",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-prettier": "^5.0.1",
+    "stylelint-scss": "^6.4.1",
+    "typescript": "5.5.3",
+    "vite": "^5.3.3",
+    "vue": "^3.4.31",
+    "vue-router": "4.4.0",
+    "vue-tsc": "^2.0.26"   
   }
 }

package/src/assets/scss/components/_autocomplete.scss

@@ -1,68 +1,23 @@
 /* @docs */
-$autocomplete-item-color: #000000 !default;
-$autocomplete-item-disabled-opacity: $base-disabled-opacity !default;
-$autocomplete-item-font-size: $base-font-size !default;
 $autocomplete-item-hover-background-color: #f5f5f5 !default;
-$autocomplete-item-hover-color: #000000 !default;
-$autocomplete-item-line-height: $base-line-height !default;
-$autocomplete-item-padding: 0.375rem 1rem !default;
 /* @docs */
 
 .o-acp {
-  position: relative;
-
   &__item {
-    display: block;
-    position: relative;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    cursor: pointer;
-
-    @include avariable(
-      "color",
-      "autocomplete-item-color",
-      $autocomplete-item-color
-    );
-    @include avariable(
-      "font-size",
-      "autocomplete-item-font-size",
-      $autocomplete-item-font-size
-    );
-    @include avariable(
-      "line-height",
-      "autocomplete-item-line-height",
-      $autocomplete-item-line-height
-    );
-    @include avariable(
-      "padding",
-      "autocomplete-item-padding",
-      $autocomplete-item-padding
-    );
 
     &-group-title,
     &--empty {
-      pointer-events: none;
-
-      @include avariable(
-        "opacity",
-        "autocomplete-item-disabled-opacity",
-        $autocomplete-item-disabled-opacity
-      );
+      @extend .o-drop--disabled;
     }
 
-    &--hover,
-    &:hover {
-      @include avariable(
-        "background",
-        "autocomplete-item-hover-background-color",
+    &--hover {
+      background-color: var(
+        --#{$prefix}autocomplete-item-hover-background-color,
         $autocomplete-item-hover-background-color
       );
-      @include avariable(
-        "color",
-        "autocomplete-item-hover-color",
-        $autocomplete-item-hover-color
-      );
     }
   }
 }

package/src/assets/scss/components/_button.scss

@@ -1,19 +1,21 @@
 @use "sass:list";
 
 /* @docs */
-$button-background-color: $primary !default;
-$button-color: $primary-invert !default;
-$button-border-radius: $base-border-radius !default;
+$button-background-color: var(--#{$prefix}primary) !default;
+$button-color: var(--#{$prefix}primary-invert) !default;
+$button-border-radius: var(--#{$prefix}base-border-radius) !default;
 $button-border: 1px solid $button-background-color !default;
 $button-box-shadow: none !default;
 $button-font-weight: 400 !default;
-$button-line-height: $base-line-height !default;
+$button-line-height: var(--#{$prefix}base-line-height) !default;
 $button-margin-icon-to-text: 0.1875em !default;
 $button-margin: 0 !default;
 $button-height: $control-height !default;
 $button-padding: $control-padding-vertical 0.75em !default;
-$button-rounded-border-radius: $base-rounded-border-radius !default;
-$button-disabled-opacity: $base-disabled-opacity !default;
+$button-rounded-border-radius: var(
+  --#{$prefix}#{base-border-radius-rounded}
+) !default;
+$button-disabled-opacity: var(--#{$prefix}#{base-disabled-opacity}) !default;
 $button-outlined-background-color: transparent !default;
 /* @docs */
 
@@ -28,8 +30,6 @@ $button-outlined-background-color: transparent !default;
 }
 
 .o-btn {
-  -moz-appearance: none;
-  -webkit-appearance: none;
   position: relative;
   display: inline-flex;
   cursor: pointer;
@@ -41,25 +41,23 @@ $button-outlined-background-color: transparent !default;
   text-decoration: none;
 
   @include unselectable;
-  @include avariable(
-    "background-color",
-    "button-background-color",
+  -moz-appearance: none;
+  -webkit-appearance: none;
+
+  background-color: var(
+    --#{$prefix}button-background-color,
     $button-background-color
   );
-  @include avariable("color", "button-color", $button-color);
-  @include avariable("padding", "button-padding", $button-padding);
-  @include avariable("border", "button-border", $button-border);
-  @include avariable(
-    "border-radius",
-    "button-border-radius",
-    $button-border-radius
-  );
-  @include avariable("box-shadow", "button-box-shadow", $button-box-shadow);
-  @include avariable("font-size", "base-font-size", $base-font-size);
-  @include avariable("font-weight", "button-font-weight", $button-font-weight);
-  @include avariable("line-height", "button-line-height", $button-line-height);
-  @include avariable("margin", "button-margin", $button-margin);
-  @include avariable("height", "button-height", $button-height);
+  color: var(--#{$prefix}button-color, $button-color);
+  padding: var(--#{$prefix}button-padding, $button-padding);
+  border: var(--#{$prefix}button-border, $button-border);
+  border-radius: var(--#{$prefix}button-border-radius, $button-border-radius);
+  box-shadow: var(--#{$prefix}button-box-shadow, $button-box-shadow);
+  font-size: var(--#{$prefix}base-font-size, $base-font-size);
+  font-weight: var(--#{$prefix}button-font-weight, $button-font-weight);
+  line-height: var(--#{$prefix}button-line-height, $button-line-height);
+  margin: var(--#{$prefix}button-margin, $button-margin);
+  height: var(--#{$prefix}button-height, $button-height);
 
   &__wrapper {
     @include side-flex-gap($button-margin-icon-to-text);
@@ -79,40 +77,36 @@ $button-outlined-background-color: transparent !default;
   }
 
   &--rounded {
-    @include avariable(
-      "border-radius",
-      "button-rounded-border-radius",
+    border-radius: var(
+      --#{$prefix}button-rounded-border-radius,
       $button-rounded-border-radius
     );
   }
 
   &--disabled {
-    @include avariable(
-      "opacity",
-      "button-disabled-opacity",
-      $button-disabled-opacity
-    );
+    opacity: var(--#{$prefix}button-disabled-opacity, $button-disabled-opacity);
     cursor: not-allowed;
     pointer-events: none;
   }
 
+  // size variants
   @each $name, $value in $sizes {
     &--#{$name} {
-      @include avariable("font-size", ("button-font-size-" + #{$name}), $value);
+      font-size: var(--#{$prefix}button-font-size-#{$name}, $value);
     }
   }
+
+  // color variants
   @each $name, $pair in $colors {
     $color: list.nth($pair, 1);
     $color-invert: list.nth($pair, 2);
+
     &--#{$name} {
-      border-color: transparent;
+      --#{$prefix}focus: #{createFocus($color)};
 
-      @include avariable("background-color", ("variant-" + #{$name}), $color);
-      @include avariable(
-        "color",
-        ("variant-invert-" + #{$name}),
-        $color-invert
-      );
+      border-color: transparent;
+      background-color: var(--#{$prefix}variant-#{$name}, $color);
+      color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
 
       &:hover {
         // background-color: darken($color, 2.5%)
@@ -123,58 +117,45 @@ $button-outlined-background-color: transparent !default;
   }
 
   &--outlined {
-    @include avariable(
-      "background-color",
-      "button-outlined-background-color",
+    background-color: var(
+      --#{$prefix}button-outlined-background-color,
       $button-outlined-background-color
     );
-    @include avariable(
-      "border-color",
-      "button-background-color",
-      $button-background-color
-    );
-    @include avariable(
-      "color",
-      "button-background-color",
+    border-color: var(
+      --#{$prefix}button-background-color,
       $button-background-color
     );
+    color: var(--#{$prefix}button-background-color, $button-background-color);
 
     &:hover {
       border-color: transparent;
 
-      @include avariable(
-        "background-color",
-        "button-background-color",
+      background-color: var(
+        --#{$prefix}button-background-color,
         $button-background-color
       );
-      @include avariable("color", "button-color", $button-color);
+      color: var(--#{$prefix}button-color, $button-color);
     }
 
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &-#{$name} {
-        @include avariable(
-          "background-color",
-          "button-outlined-background-color",
+        --#{$prefix}focus: #{createFocus($color)};
+
+        background-color: var(
+          --#{$prefix}button-outlined-background-color,
           $button-outlined-background-color
         );
-        @include avariable("border-color", ("variant-" + #{$name}), $color);
-        @include avariable("color", ("variant-" + #{$name}), $color);
+        border-color: var(--#{$prefix}variant-#{$name}, $color);
+        color: var(--#{$prefix}variant-#{$name}, $color);
 
+        &:focus,
         &:hover {
           border-color: transparent;
-
-          @include avariable(
-            "background-color",
-            ("variant-" + #{$name}),
-            $color
-          );
-          @include avariable(
-            "color",
-            ("variant-invert-" + #{$name}),
-            $color-invert
-          );
+          background-color: var(--#{$prefix}variant-#{$name}, $color);
+          color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
         }
       }
     }
@@ -201,13 +182,9 @@ $button-outlined-background-color: transparent !default;
   }
 
   &--inverted {
-    @include avariable("background-color", "button-color", $button-color);
-    @include avariable("border-color", "button-color", $button-color);
-    @include avariable(
-      "color",
-      "button-background-color",
-      $button-background-color
-    );
+    background-color: var(--#{$prefix}button-color, $button-color);
+    border-color: var(--#{$prefix}button-color, $button-color);
+    color: var(--#{$prefix}button-background-color, $button-background-color);
 
     &:hover {
       // background-color: darken($color-invert, 5%)
@@ -218,19 +195,18 @@ $button-outlined-background-color: transparent !default;
     @each $name, $pair in $colors {
       $color: list.nth($pair, 1);
       $color-invert: list.nth($pair, 2);
+
       &-#{$name} {
-        @include avariable(
-          "background-color",
-          ("variant-invert-" + #{$name}),
-          $color-invert
-        );
-        @include avariable(
-          "border-color",
-          ("variant-invert-" + #{$name}),
+        --#{$prefix}focus: #{createFocus($color)};
+
+        background-color: var(
+          --#{$prefix}variant-invert-#{$name},
           $color-invert
         );
-        @include avariable("color", ("variant-" + #{$name}), $color);
+        border-color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
+        color: var(--#{$prefix}variant-#{$name}, $color);
 
+        &:focus,
         &:hover {
           // background-color: darken($color-invert, 5%)
           // IE 11 needs polyfill
@@ -239,4 +215,11 @@ $button-outlined-background-color: transparent !default;
       }
     }
   }
+
+  // focus effect
+  &:focus,
+  &:focus-within {
+    box-shadow: 0 0 0 0.25rem var(--#{$prefix}focus);
+    outline: 0;
+  }
 }