@oruga-ui/theme-oruga 0.0.1

package/dist/scss/utils/_animations.scss

@@ -0,0 +1,231 @@
+// Some of the animations are from animate.css (https://daneden.github.io/animate.css)
+
+// Fade out
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.fadeOut {
+  animation-name: fadeOut;
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+}
+
+.fadeOutDown {
+  animation-name: fadeOutDown;
+}
+
+@keyframes fadeOutUp {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+}
+
+.fadeOutUp {
+  animation-name: fadeOutUp;
+}
+
+// Fade In
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.fadeIn {
+  animation-name: fadeIn;
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInDown {
+  animation-name: fadeInDown;
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.fadeInUp {
+  animation-name: fadeInUp;
+}
+
+@keyframes append-animate {
+  from {
+    transform: scale(0);
+    opacity: 0;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/**
+ * Vue Transitions
+ */
+
+// Fade
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity $speed-slow $easing;
+}
+
+.fade-enter,
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+// Zoom In
+.zoom-in-enter-active,
+.zoom-in-leave-active {
+  transition: opacity $speed-slow $easing;
+
+  .animation-content {
+    transition: transform $speed-slow $easing;
+  }
+}
+
+.zoom-in-enter,
+.zoom-in-enter-from,
+.zoom-in-leave-active {
+  opacity: 0;
+
+  .animation-content {
+    transform: scale(0.95);
+  }
+}
+
+// Zoom Out
+.zoom-out-enter-active,
+.zoom-out-leave-active {
+  transition: opacity $speed-slow $easing;
+
+  .animation-content {
+    transition: transform $speed-slow $easing;
+  }
+}
+
+.zoom-out-enter,
+.zoom-out-enter-from,
+.zoom-out-leave-active {
+  opacity: 0;
+
+  .animation-content {
+    transform: scale(1.05);
+  }
+}
+
+// Slide
+.slide-next-enter-active,
+.slide-next-leave-active,
+.slide-prev-enter-active,
+.slide-prev-leave-active {
+  transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+
+.slide-prev-leave-to,
+.slide-next-enter,
+.slide-next-enter-from {
+  transform: translate3d(-100%, 0, 0);
+  position: absolute;
+  width: 100%;
+}
+
+.slide-prev-enter,
+.slide-prev-enter-from,
+.slide-next-leave-to {
+  transform: translate3d(100%, 0, 0);
+  position: absolute;
+  width: 100%;
+}
+
+.slide-down-enter-active,
+.slide-down-leave-active,
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: transform $speed-slower cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+
+.slide-down-enter,
+.slide-up-leave-to,
+.slide-down-enter-from {
+  transform: translate3d(0, -100%, 0);
+  position: absolute;
+  height: 100%;
+}
+
+.slide-up-enter,
+.slide-up-enter-from,
+.slide-down-leave-to {
+  transform: translate3d(0, 100%, 0);
+  position: absolute;
+  height: 100%;
+}
+
+.slide-enter-active {
+  transition: $speed-slow $easing;
+}
+
+.slide-leave-active {
+  transition: $speed-slow $easing;
+  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+}
+
+.slide-leave,
+.slide-enter-to,
+.slide-leave-from {
+  max-height: 100px;
+  overflow: hidden;
+}
+
+.slide-enter,
+.slide-enter-from,
+.slide-leave-to {
+  overflow: hidden;
+  max-height: 0;
+}

package/dist/scss/utils/_base.scss

@@ -0,0 +1,31 @@
+*,
+:after,
+:before {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+
+  @include avariable("font-family", "base-font-family", $base-font-family);
+  @include avariable("font-size", "base-font-size", $base-font-size);
+  @include avariable("font-weight", "base-font-weight", $base-font-weight);
+  @include avariable("line-height", "base-line-height", $base-line-height);
+}
+
+.o-noscroll {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+
+.o-clipped {
+  overflow: hidden;
+}

package/dist/scss/utils/_helpers.scss

@@ -0,0 +1,211 @@
+@use "sass:list";
+@use "sass:string";
+@use "sass:math";
+
+/// Replaces characters in a string
+///
+/// @param {string} $string
+///   String where the replace happens
+/// @param {string} $search
+///   Portion of string to find and replace
+/// @param {string} $replace
+///   Replacement. Default is ''.
+/// @return {string} string with characters replaced.
+@function str-replace($string, $search, $replace: "") {
+  $index: string.index($string, $search);
+
+  @return if(
+    $index,
+    str-slice($string, 1, $index - 1) + $replace +
+      str-replace(
+        str-slice($string, $index + str-length($search)),
+        $search,
+        $replace
+      ),
+    $string
+  );
+}
+
+/// Encodes an inline svg. Original source code: http://codepen.io/jakob-e/pen/doMoML
+///
+/// @param {string} $svg
+///   Inline svg to encode
+/// @return {string} encoded svg.
+@function svg-encode($svg) {
+  // Chunk up string in order to avoid "stack level too deep" error
+  $encoded: "";
+  $slice: 2000;
+  $index: 0;
+  $loops: math.ceil(divide(string.length($svg), $slice));
+
+  @for $i from 1 through $loops {
+    $chunk: string.slice($svg, $index, $index + $slice - 1);
+    // Encode
+    $chunk: str-replace($chunk, '"', "'");
+    $chunk: str-replace($chunk, "%", "%25");
+    $chunk: str-replace($chunk, "#", "%23");
+    $chunk: str-replace($chunk, "{", "%7B");
+    $chunk: str-replace($chunk, "}", "%7D");
+    $chunk: str-replace($chunk, "<", "%3C");
+    $chunk: str-replace($chunk, ">", "%3E");
+
+    $encoded: #{$encoded}#{$chunk};
+    $index: $index + $slice;
+  }
+
+  @return "data:image/svg+xml,#{$encoded}";
+}
+
+/// Appends a list of variables to $whitelist and return a new whitelist.
+///
+/// @param {...} $variables
+///   Variables to whitelist
+/// @return {list} new whitelist.
+///
+/// Example (in components/_radio.scss)
+/// $whitelist: add-to-whitelist('radio-active-background-color','radio-focus-sibiling-box-shadow');
+@function add-to-whitelist($variables...) {
+  @return list.join($whitelist, $variables);
+}
+
+/// Checks if a variable is in $whitelist.
+///
+/// @param {string} $variable
+///   Variable to check if present in whitelist
+/// @return {boolean} true if $variable is in $whitelist, else false.
+@function is-in-whitelist($variable) {
+  @return list.index($whitelist, $variable) != null;
+}
+
+/// Checks if $whitelist is empty
+///
+/// @return {boolean} true if $whitelist is empty, else false.
+@function is-empty-whitelist() {
+  @return list.length($whitelist) == 0;
+}
+
+/// Returns a variable.
+///
+/// @param {string} $name
+///   Variable name
+/// @param {string} $value
+///   Variable value
+/// @param {string} $forceval
+///   By default is `false`, if `true` it allows to bypass whitelist and set the value
+/// @return {string} the variable or null if not in whitelist when $css-vars == false.
+@function variable($name, $value, $forceval: false) {
+  @if $css-vars {
+    @if is-empty-whitelist() or is-in-whitelist($name) {
+      @return var(--#{$prefix}#{$name}, #{$value});
+    }
+  } @else if $sass-vars {
+    @if is-empty-whitelist() or is-in-whitelist($name) {
+      @return #{$value};
+    }
+  } @else if $forceval {
+    @return #{$value};
+  }
+
+  @return null;
+}
+
+/// Returns a pair of `(key,value)` to pass to `evariable` function.
+///
+/// @param {string} $key
+///   Key of the parameter
+/// @param {string} $value
+///   Value of the parameter
+/// @return {list} list of two elements representing an `eparam` `(key, value)`.
+@function eparam($key, $value) {
+  @return $key, $value;
+}
+
+/// Assigns a specific expression to an attribute
+///
+/// @param {string} $attribute
+///   The attribute we want to include
+/// @param {string} $expression
+///   The body of the function we want to write (e.g. `calc($width/$height)`)
+/// @param {...} $parameters
+///   List of `eparam` to apply to the function
+@mixin evariable($attribute, $expression, $parameters...) {
+  $is_valid: true;
+
+  @each $parameter in $parameters {
+    @if not list.nth($parameter, 2) {
+      $is_valid: false;
+    }
+    @if str-slice(list.nth($parameter, 1), 0, 1) != "$" {
+      @error "Parameter #{list.nth($parameter, 1)} should start with $.";
+    }
+    $expression: str-replace(
+      $expression,
+      list.nth($parameter, 1),
+      list.nth($parameter, 2)
+    );
+  }
+  @if $is_valid {
+    #{$attribute}: #{$expression};
+  }
+}
+
+/// Assigns a specific variable to an attribute
+///
+/// @param {string} $attribute
+///   The attribute we want to include
+/// @param {string} $name
+///   Variable name
+/// @param {string} $value
+///   Variable value
+@mixin avariable($attribute, $name, $value) {
+  $variable: variable($name, $value);
+  @if $variable {
+    #{$attribute}: $variable;
+  }
+}
+@mixin unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+@mixin side-flex-gap($gap) {
+  //flex-wrap: wrap;
+  margin-left: -$gap;
+  margin-right: -$gap;
+
+  & > * {
+    margin-left: $gap;
+    margin-right: $gap;
+  }
+}
+
+// Custom divide function by @mdo from https://github.com/twbs/bootstrap/pull/34245
+// Replaces old slash division deprecated in Dart Sass
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0, 1, -1);
+  $dividend: math.abs($dividend);
+  $divisor: math.abs($divisor);
+  $quotient: 0;
+  $remainder: $dividend;
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  @if $divisor == 1 {
+    @return $dividend;
+  }
+
+  @while $remainder >= $divisor {
+    $quotient: $quotient + 1;
+    $remainder: $remainder - $divisor;
+  }
+  @if $remainder > 0 and $precision > 0 {
+    $remainder: divide($remainder * 10, $divisor, $precision - 1) * 0.1;
+  }
+
+  @return ($quotient + $remainder) * $sign;
+}

package/dist/scss/utils/_root.scss

@@ -0,0 +1,28 @@
+@use "sass:list";
+
+:root {
+  @if $css-vars {
+    // generate color variables
+    @each $name, $color in $colors {
+      --#{$prefix}#{$name}: #{list.nth($color, 1)};
+      --#{$prefix}#{$name}-invert: #{list.nth($color, 2)};
+    }
+
+    --#{$prefix}white: #{$white};
+    --#{$prefix}black: #{$black};
+    --#{$prefix}grey: #{$grey};
+    --#{$prefix}grey-light: #{$grey-light};
+    --#{$prefix}grey-lighter: #{$grey-lighter};
+    --#{$prefix}grey-dark: #{$grey-dark};
+
+    // generate size variables
+    @each $name, $size in $sizes {
+      --#{$prefix}size-#{$name}: #{$size};
+    }
+
+    --#{$prefix}base-font-family: #{$base-font-family};
+    --#{$prefix}base-font-size: #{$base-font-size};
+    --#{$prefix}base-font-weight: #{$base-font-weight};
+    --#{$prefix}base-line-height: #{$base-line-height};
+  }
+}

package/dist/scss/utils/_variables.scss

@@ -0,0 +1,105 @@
+/*********************
+*   Theme Variables
+**********************/
+
+// Settings
+$whitelist: () !default;
+$sass-vars: true !default;
+$css-vars: true !default;
+$prefix: "oruga-" !default;
+
+// Animations
+$speed: 300ms !default;
+$speed-slow: 150ms !default;
+$speed-slower: 250ms !default;
+$easing: ease-out !default;
+
+// Font
+$base-font-family: 
+// Cross-platform generic font family (default user interface font)
+  system-ui,
+  // Safari for macOS and iOS (San Francisco)
+  -apple-system,
+  // Windows
+  "Segoe UI",
+  // Android
+  Roboto,
+  // older macOS and iOS
+  "Helvetica Neue",
+  // Linux
+  "Noto Sans",
+  "Liberation Sans",
+  // Basic web fallback
+  Arial,
+  // Sans serif fallback
+  sans-serif !default;
+$base-font-size: 1rem !default;
+$base-font-weight: 400 !default;
+$base-line-height: 1.5 !default;
+
+// Base Style
+$base-border-radius: 4px !default;
+$base-rounded-border-radius: 9999px !default;
+$base-line-height: 1.5 !default;
+$base-disabled-opacity: 0.5 !default;
+
+$control-border-width: 1px !default;
+$control-height: 2.25em !default;
+$control-padding-vertical: calc(0.375em - #{$control-border-width});
+$control-padding-horizontal: calc(0.625em - #{$control-border-width});
+
+// Sizes
+$sizes: (
+  "small": 0.75rem,
+  "medium": 1.25rem,
+  "large": 1.5rem,
+) !default;
+
+// Colors
+$white: #ffffff !default;
+$black: #000000 !default;
+$grey: #7a7a7a !default;
+$grey-light: #b5b5b5 !default;
+$grey-lighter: #dbdbdb !default;
+$grey-dark: #4a4a4a !default;
+
+$primary: #445e00 !default;
+$primary-invert: $white !default;
+$secondary: #6c757d !default;
+$secondary-invert: $white !default;
+
+$success: #006724 !default;
+$success-invert: $white !default;
+$info: #005c98 !default;
+$info-invert: $white !default;
+$warning: #f4c300 !default;
+$warning-invert: $black !default;
+$danger: #b60000 !default;
+$danger-invert: $white !default;
+
+$colors: (
+  "primary": (
+    $primary,
+    $primary-invert,
+  ),
+  "secondary": (
+    $secondary,
+    $secondary-invert,
+  ),
+  "success": (
+    $success,
+    $success-invert,
+  ),
+  "info": (
+    $info,
+    $info-invert,
+  ),
+  "warning": (
+    $warning,
+    $warning-invert,
+  ),
+  "danger": (
+    $danger,
+    $danger-invert,
+  ),
+) !default;

package/dist/theme.js

@@ -0,0 +1,8 @@
+(function (factory) {
+	typeof define === 'function' && define.amd ? define(factory) :
+	factory();
+})((function () { 'use strict';
+
+
+
+}));

package/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@oruga-ui/theme-oruga",
+  "version": "0.0.1",
+  "description": "Default theme for Oruga",
+  "license": "MIT",
+  "main": "dist/theme.js",
+  "module": "dist/theme.js",
+  "unpkg": "dist/theme.min.js",
+  "typings": "types/index.d.ts",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "types/*.d.ts"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/oruga-ui/theme-oruga.git"
+  },
+  "bugs": {
+    "url": "https://github.com/oruga-ui/theme-oruga/issues"
+  },
+  "scripts": {
+    "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: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",
+    "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.4.2",
+    "@oruga-ui/oruga-next": "0.6.0",
+    "@rollup/plugin-typescript": "11.1.3",
+    "@vitejs/plugin-vue": "4.3.4",
+    "@vue/eslint-config-prettier": "^8.0.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/tsconfig": "^0.4.0",
+    "autoprefixer": "10.4.15",
+    "clean-css-cli": "^5.6.2",
+    "core-js": "3.32.2",
+    "eslint": "^8.49.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-vue": "^9.17.0",
+    "npm-check-updates": "^16.13.3",
+    "postcss": "8.4.29",
+    "prettier": "^3.0.3",
+    "rimraf": "5.0.1",
+    "rollup": "^3.29.1",
+    "rollup-plugin-copy": "3.5.0",
+    "rollup-plugin-sass": "1.12.20",
+    "sass": "1.66.1",
+    "stylelint": "^15.10.3",
+    "stylelint-config-recommended": "^13.0.0",
+    "stylelint-config-recommended-scss": "^13.0.0",
+    "stylelint-prettier": "^4.0.2",
+    "stylelint-scss": "^5.1.0",
+    "tslib": "2.6.2",
+    "typescript": "5.2.2",
+    "vite": "^4.4.9",
+    "vue": "3.3.4",
+    "vue-router": "4.2.4",
+    "vue-tsc": "1.8.10"
+  }
+}