@vueland/ui 0.0.1 → 0.0.3

package/dist/scss/maps/elevations-map.scss

@@ -0,0 +1,88 @@
+$shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2) !default;
+$shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14) !default;
+$shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12) !default;
+
+$shadow-key-umbra: (
+  0: (0px 0px 0px 0px $shadow-key-umbra-opacity),
+  1: (0px 2px 1px -1px $shadow-key-umbra-opacity),
+  2: (0px 3px 1px -2px $shadow-key-umbra-opacity),
+  3: (0px 3px 3px -2px $shadow-key-umbra-opacity),
+  4: (0px 2px 4px -1px $shadow-key-umbra-opacity),
+  5: (0px 3px 5px -1px $shadow-key-umbra-opacity),
+  6: (0px 3px 5px -1px $shadow-key-umbra-opacity),
+  7: (0px 4px 5px -2px $shadow-key-umbra-opacity),
+  8: (0px 5px 5px -3px $shadow-key-umbra-opacity),
+  9: (0px 5px 6px -3px $shadow-key-umbra-opacity),
+  10: (0px 6px 6px -3px $shadow-key-umbra-opacity),
+  11: (0px 6px 7px -4px $shadow-key-umbra-opacity),
+  12: (0px 7px 8px -4px $shadow-key-umbra-opacity),
+  13: (0px 7px 8px -4px $shadow-key-umbra-opacity),
+  14: (0px 7px 9px -4px $shadow-key-umbra-opacity),
+  15: (0px 8px 9px -5px $shadow-key-umbra-opacity),
+  16: (0px 8px 10px -5px $shadow-key-umbra-opacity),
+  17: (0px 8px 11px -5px $shadow-key-umbra-opacity),
+  18: (0px 9px 11px -5px $shadow-key-umbra-opacity),
+  19: (0px 9px 12px -6px $shadow-key-umbra-opacity),
+  20: (0px 10px 13px -6px $shadow-key-umbra-opacity),
+  21: (0px 10px 13px -6px $shadow-key-umbra-opacity),
+  22: (0px 10px 14px -6px $shadow-key-umbra-opacity),
+  23: (0px 11px 14px -7px $shadow-key-umbra-opacity),
+  24: (0px 11px 15px -7px $shadow-key-umbra-opacity)
+);
+
+$shadow-key-penumbra: () !default;
+$shadow-key-penumbra: (
+  0: (0px 0px 0px 0px $shadow-key-penumbra-opacity),
+  1: (0px 1px 1px 0px $shadow-key-penumbra-opacity),
+  2: (0px 2px 2px 0px $shadow-key-penumbra-opacity),
+  3: (0px 3px 4px 0px $shadow-key-penumbra-opacity),
+  4: (0px 4px 5px 0px $shadow-key-penumbra-opacity),
+  5: (0px 5px 8px 0px $shadow-key-penumbra-opacity),
+  6: (0px 6px 10px 0px $shadow-key-penumbra-opacity),
+  7: (0px 7px 10px 1px $shadow-key-penumbra-opacity),
+  8: (0px 8px 10px 1px $shadow-key-penumbra-opacity),
+  9: (0px 9px 12px 1px $shadow-key-penumbra-opacity),
+  10: (0px 10px 14px 1px $shadow-key-penumbra-opacity),
+  11: (0px 11px 15px 1px $shadow-key-penumbra-opacity),
+  12: (0px 12px 17px 2px $shadow-key-penumbra-opacity),
+  13: (0px 13px 19px 2px $shadow-key-penumbra-opacity),
+  14: (0px 14px 21px 2px $shadow-key-penumbra-opacity),
+  15: (0px 15px 22px 2px $shadow-key-penumbra-opacity),
+  16: (0px 16px 24px 2px $shadow-key-penumbra-opacity),
+  17: (0px 17px 26px 2px $shadow-key-penumbra-opacity),
+  18: (0px 18px 28px 2px $shadow-key-penumbra-opacity),
+  19: (0px 19px 29px 2px $shadow-key-penumbra-opacity),
+  20: (0px 20px 31px 3px $shadow-key-penumbra-opacity),
+  21: (0px 21px 33px 3px $shadow-key-penumbra-opacity),
+  22: (0px 22px 35px 3px $shadow-key-penumbra-opacity),
+  23: (0px 23px 36px 3px $shadow-key-penumbra-opacity),
+  24: (0px 24px 38px 3px $shadow-key-penumbra-opacity)
+);
+
+$shadow-key-ambient: (
+  0: (0px 0px 0px 0px $shadow-key-ambient-opacity),
+  1: (0px 1px 3px 0px $shadow-key-ambient-opacity),
+  2: (0px 1px 5px 0px $shadow-key-ambient-opacity),
+  3: (0px 1px 8px 0px $shadow-key-ambient-opacity),
+  4: (0px 1px 10px 0px $shadow-key-ambient-opacity),
+  5: (0px 1px 14px 0px $shadow-key-ambient-opacity),
+  6: (0px 1px 18px 0px $shadow-key-ambient-opacity),
+  7: (0px 2px 16px 1px $shadow-key-ambient-opacity),
+  8: (0px 3px 14px 2px $shadow-key-ambient-opacity),
+  9: (0px 3px 16px 2px $shadow-key-ambient-opacity),
+  10: (0px 4px 18px 3px $shadow-key-ambient-opacity),
+  11: (0px 4px 20px 3px $shadow-key-ambient-opacity),
+  12: (0px 5px 22px 4px $shadow-key-ambient-opacity),
+  13: (0px 5px 24px 4px $shadow-key-ambient-opacity),
+  14: (0px 5px 26px 4px $shadow-key-ambient-opacity),
+  15: (0px 6px 28px 5px $shadow-key-ambient-opacity),
+  16: (0px 6px 30px 5px $shadow-key-ambient-opacity),
+  17: (0px 6px 32px 5px $shadow-key-ambient-opacity),
+  18: (0px 7px 34px 6px $shadow-key-ambient-opacity),
+  19: (0px 7px 36px 6px $shadow-key-ambient-opacity),
+  20: (0px 8px 38px 7px $shadow-key-ambient-opacity),
+  21: (0px 8px 40px 7px $shadow-key-ambient-opacity),
+  22: (0px 8px 42px 7px $shadow-key-ambient-opacity),
+  23: (0px 9px 44px 8px $shadow-key-ambient-opacity),
+  24: (0px 9px 46px 8px $shadow-key-ambient-opacity)
+);

package/dist/scss/maps/flexes-map.scss

@@ -0,0 +1,24 @@
+$flex-grow-step: 4;
+$flex-shrink-step: 4;
+
+$justify: (
+  'center': center,
+  'start': flex-start,
+  'end': flex-end,
+  'space-between': space-between,
+  'space-around': space-around,
+  'space-evenly': space-evenly,
+  'stretch': stretch
+);
+
+$align: (
+  'center': center,
+  'start': flex-start,
+  'end': flex-end,
+  'baseline': baseline,
+  'stretch': stretch,
+  'end-safe': safe flex-end,
+  'center-safe': safe center,
+  'start-safe': safe flex-start,
+  'baseline-last': safe flex-start,
+);

package/dist/scss/maps/grids.scss

@@ -0,0 +1,23 @@
+@use "sass:math";
+
+$columns: 12;
+$grid-gutter: 10px;
+$gutter-column: math.div($grid-gutter, 2);
+
+$grid-gutters: (
+  'xs': math.div($grid-gutter, 24),
+  'sm': math.div($grid-gutter, 12),
+  'md': math.div($grid-gutter, 6),
+  'lg': math.div($grid-gutter, 3),
+  'xl': math.div($grid-gutter * 2, 3),
+  'xxl': $grid-gutter
+);
+
+$grid-breakpoints: (
+  'xs': 0,
+  'sm': 600px,
+  'md': 960px,
+  'lg': 1280px,
+  'xl': 1920px,
+  'xxl': 2560px
+) !default;

package/dist/scss/modules/_global-vars.scss

@@ -0,0 +1,88 @@
+@use "sass:map";
+@use "../maps/colors-map" as *;
+
+$primary-transition: cubic-bezier(.25, .8, .5, 1);
+
+:root {
+  // ---- Brand ----
+  --c-app-primary-color: #{map.get($blue, "darken-2")};
+  --c-app-on-primary-color: #{map.get($white, "base")};
+  --c-app-secondary-color: #{map.get($blue, "darken-3")};
+  --c-app-success-color: #{map.get($green, "base")};
+  --c-app-error-color: #{map.get($red, "darken-1")};
+  --c-app-warning-color: #{map.get($orange, "base")};
+  --c-app-info-color: #{map.get($light-blue, "darken-1")};
+  --c-app-accent-color: #{map.get($light-green, "accent-3")};
+
+  // ---- Surface & background ----
+  --c-app-background-color: #{map.get($grey, "lighten-4")};
+  --c-app-surface-color: #{map.get($white, "base")};
+  --c-app-surface-variant-color: #{map.get($grey, "lighten-3")};
+  --c-app-on-surface-color: #{map.get($grey, "darken-3")};
+
+  // ---- Text ----
+  --c-app-text-color: #{map.get($grey, "darken-3")};
+  --c-app-text-secondary-color: #{map.get($grey, "darken-1")};
+  --c-app-placeholder-color: #{map.get($grey, "base")};
+
+  // ---- States: disabled ----
+  --c-app-disabled-color: #{map.get($grey, "lighten-1")};
+  --c-app-disabled-bg-color: #{map.get($grey, "lighten-3")};
+  --c-app-disabled-opacity: 0.5;
+
+  // ---- States: readonly ----
+  --c-app-readonly-color: #{map.get($blue, "darken-2")};
+  --c-app-readonly-bg-color: #{map.get($grey, "lighten-4")};
+
+  // ---- States: focus ----
+  --c-app-focus-color: #{map.get($blue, "darken-2")};
+
+  // ---- States: error ----
+  --c-app-error-bg-color: #{map.get($red, "lighten-5")};
+
+  // ---- Interactive ----
+  --c-app-hover-color: rgba(0, 0, 0, .06);
+  --c-app-overlay-color: rgba(0, 0, 0, .5);
+  --c-app-shadow-color: rgba(0, 0, 0, .15);
+
+  // ---- Misc ----
+  --c-app-border-color: #{map.get($grey, "lighten-2")};
+  --c-app-border-radius: 8px;
+}
+
+// ---- Dark theme ----
+[data-theme="dark"] {
+  --c-app-primary-color: #{map.get($blue, "lighten-3")};
+  --c-app-on-primary-color: #{map.get($grey, "darken-4")};
+  --c-app-secondary-color: #{map.get($blue, "lighten-2")};
+  --c-app-success-color: #{map.get($green, "lighten-2")};
+  --c-app-error-color: #{map.get($red, "lighten-2")};
+  --c-app-warning-color: #{map.get($orange, "lighten-2")};
+  --c-app-info-color: #{map.get($light-blue, "lighten-2")};
+
+  --c-app-background-color: #{map.get($grey, "darken-4")};
+  --c-app-surface-color: #1e1e1e;
+  --c-app-surface-variant-color: #2a2a2a;
+  --c-app-on-surface-color: #{map.get($grey, "lighten-2")};
+
+  --c-app-text-color: #{map.get($grey, "lighten-2")};
+  --c-app-text-secondary-color: #{map.get($grey, "base")};
+  --c-app-placeholder-color: #{map.get($grey, "darken-1")};
+
+  --c-app-disabled-color: #{map.get($grey, "darken-2")};
+  --c-app-disabled-bg-color: #2a2a2a;
+  --c-app-disabled-opacity: 0.4;
+
+  --c-app-readonly-color: #{map.get($blue, "lighten-3")};
+  --c-app-readonly-bg-color: #2a2a2a;
+
+  --c-app-focus-color: #{map.get($blue, "lighten-3")};
+
+  --c-app-error-bg-color: rgba(#{map.get($red, "base")}, .12);
+
+  --c-app-hover-color: rgba(255, 255, 255, .08);
+  --c-app-overlay-color: rgba(0, 0, 0, .7);
+  --c-app-shadow-color: rgba(0, 0, 0, .4);
+
+  --c-app-border-color: #{map.get($grey, "darken-2")};
+}

package/dist/scss/ress.scss

@@ -0,0 +1,281 @@
+/* resset.dev • v5.0.2 */
+
+/* # =================================================================
+   # Global selectors
+   # ================================================================= */
+
+html {
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
+  word-break: normal;
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+
+*,
+::before,
+::after {
+  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
+  box-sizing: inherit;
+}
+
+::before,
+::after {
+  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
+  vertical-align: inherit;
+}
+
+* {
+  padding: 0; /* Reset `padding` and `margin` of all elements */
+  margin: 0;
+}
+
+/* # =================================================================
+   # General elements
+   # ================================================================= */
+
+hr {
+  overflow: visible; /* Show the overflow in Edge and IE */
+  height: 0; /* Add the correct box sizing in Firefox */
+  color: inherit; /* Correct border color in Firefox. */
+}
+
+details,
+main {
+  display: block; /* Render the `main` element consistently in IE. */
+}
+
+summary {
+  display: list-item; /* Add the correct display in all browsers */
+}
+
+small {
+  font-size: 80%; /* Set font-size to 80% in `small` elements */
+}
+
+[hidden] {
+  display: none; /* Add the correct display in IE */
+}
+
+abbr[title] {
+  border-bottom: none; /* Remove the bottom border in Chrome 57 */
+  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
+  text-decoration: underline;
+  text-decoration: underline dotted;
+}
+
+a {
+  background-color: transparent; /* Remove the gray background on active links in IE 10 */
+}
+
+a:active,
+a:hover {
+  outline-width: 0; /* Remove the outline when hovering in all browsers */
+}
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace; /* Specify the font family of code elements */
+}
+
+pre {
+  font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
+}
+
+b,
+strong {
+  font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
+}
+
+/* https://gist.github.com/unruthless/413930 */
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+table {
+  border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
+  text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
+}
+
+iframe {
+  border-style: none;
+}
+
+/* # =================================================================
+   # Forms
+   # ================================================================= */
+
+input {
+  border-radius: 0;
+}
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
+}
+
+[type='search'] {
+  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
+  outline-offset: -2px; /* Correct the outline style in Safari */
+}
+
+[type='search']::-webkit-search-decoration {
+  -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
+}
+
+textarea {
+  overflow: auto; /* Internet Explorer 11+ */
+  resize: vertical; /* Specify textarea resizability */
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit; /* Specify font inheritance of form elements */
+}
+
+optgroup {
+  font-weight: bold; /* Restore the font weight unset by the previous rule */
+}
+
+button {
+  overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
+}
+
+button,
+select {
+  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
+}
+
+/* Apply cursor pointer to buttonPresets elements */
+button,
+[type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
+  cursor: pointer;
+}
+
+/* Remove inner padding and border in Firefox 4+ */
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/* Replace focus style removed in the border reset above */
+button:-moz-focusring,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  outline: 1px dotted ButtonText;
+}
+
+button,
+html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
+[type='reset'],
+[type='submit'] {
+  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
+}
+
+/* Remove the default buttonPresets styling in all browsers */
+button,
+input,
+select,
+textarea {
+  background-color: transparent;
+  border-style: none;
+}
+
+a:focus,
+button:focus,
+input:focus,
+select:focus,
+textarea:focus {
+  outline-width: 0;
+}
+
+/* Style select like a standard input */
+select {
+  -moz-appearance: none; /* Firefox 36+ */
+  -webkit-appearance: none; /* Chrome 41+ */
+}
+
+select::-ms-expand {
+  display: none; /* Internet Explorer 11+ */
+}
+
+select::-ms-value {
+  color: currentColor; /* Internet Explorer 11+ */
+}
+
+legend {
+  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
+  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
+  display: table; /* Correct the text wrapping in Edge and IE */
+  max-width: 100%; /* Correct the text wrapping in Edge and IE */
+  white-space: normal; /* Correct the text wrapping in Edge and IE */
+  max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
+}
+
+::-webkit-file-upload-button {
+  /* Correct the inability to style clickable types in iOS and Safari */
+  -webkit-appearance: button;
+  color: inherit;
+  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
+}
+
+/* Replace pointer cursor in disabled elements */
+[disabled] {
+  cursor: default;
+}
+
+/* # =================================================================
+   # Specify media element style
+   # ================================================================= */
+
+img {
+  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
+}
+
+/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
+progress {
+  vertical-align: baseline;
+}
+
+/* # =================================================================
+   # Accessibility
+   # ================================================================= */
+
+/* Specify the progress cursor of updating elements */
+[aria-busy='true'] {
+  cursor: progress;
+}
+
+/* Specify the pointer cursor of trigger elements */
+[aria-controls] {
+  cursor: pointer;
+}
+
+/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
+[aria-disabled='true'] {
+  cursor: default;
+}

package/dist/scss/styles.scss

@@ -0,0 +1,20 @@
+@forward "maps/grids";
+@use "ress";
+@use "modules/global-vars";
+@use "utils/transitions";
+@use "utils/spaces";
+@use "utils/elevations";
+@use "utils/flex";
+@use "utils/radius";
+@use "utils/positions";
+@use "utils/text";
+@use "utils/typography";
+@use "utils/opacity";
+@use "utils/overflow";
+@use "utils/display";
+@use "utils/sizing";
+@use "utils/cursor";
+@use "utils/colors";
+@use "utils/borders";
+@use "utils/helpers";
+@use "utils/grid";

package/dist/scss/utils/_borders.scss

@@ -0,0 +1,28 @@
+// Border width
+.border-0 { border: none !important; }
+.border   { border: 1px solid !important; }
+.border-2 { border: 2px solid !important; }
+
+.border-t   { border-top: 1px solid !important; }
+.border-b   { border-bottom: 1px solid !important; }
+.border-l   { border-left: 1px solid !important; }
+.border-r   { border-right: 1px solid !important; }
+
+.border-t-0 { border-top: none !important; }
+.border-b-0 { border-bottom: none !important; }
+.border-l-0 { border-left: none !important; }
+.border-r-0 { border-right: none !important; }
+
+// Border style
+.border-solid  { border-style: solid !important; }
+.border-dashed { border-style: dashed !important; }
+.border-dotted { border-style: dotted !important; }
+.border-none   { border-style: none !important; }
+
+// Border color — theme-aware
+.border-transparent { border-color: transparent !important; }
+.border-current     { border-color: currentColor !important; }
+
+// Outline
+.outline-none { outline: none !important; }
+.outline      { outline: 1px solid !important; }

package/dist/scss/utils/_colors.scss

@@ -0,0 +1,86 @@
+@use "sass:map";
+@use "../maps/colors-map" as *;
+
+@mixin background-color($color_value) {
+  background-color: $color_value !important;
+  border-color: $color_value !important;
+}
+
+@mixin text-color($color_value) {
+  color: $color_value !important;
+  caret-color: $color_value !important;
+}
+
+@mixin text-active($color) {
+  &:hover {
+    &:active {
+      &:before {
+        background: $color !important;
+        opacity: .3;
+        transition: background .1s;
+      }
+    }
+  }
+}
+
+@mixin bg-active($color) {
+  &:active {
+    background: $color !important;
+    transition: background .1s;
+  }
+}
+
+@mixin bg-hover($color) {
+  &:hover {
+    background: $color !important;
+    transition: background .1s;
+  }
+}
+
+@each $color_name, $color_color in $colors {
+  @each $color_type, $color_value in $color_color {
+    @if ($color_type == 'base') {
+      .bg-#{$color_name} {
+        @include background-color($color_value);
+      }
+
+      .hover\:bg-#{$color_name} {
+        @include bg-hover($color_value);
+      }
+
+      .active\:bg-#{$color_name} {
+        @include bg-active($color_value);
+      }
+
+      [class*="hover\:bg-"][class*="active\:bg-#{$color_name}"] {
+        @include bg-active($color_value);
+      }
+
+      .text-#{$color_name} {
+        @include text-color($color_value);
+        @include text-active($color_value);
+      }
+    }
+
+    .bg-#{$color_name}-#{$color_type} {
+      @include background-color($color_value);
+    }
+
+    .hover\:bg-#{$color_name}-#{$color_type} {
+      @include bg-hover($color_value);
+    }
+
+    .active\:bg-#{$color_name}-#{$color_type} {
+      @include bg-active($color_value);
+    }
+
+    [class*="hover\:bg-"][class*="active\:bg-#{$color_name}-#{$color_type}"] {
+      @include bg-active($color_value);
+    }
+
+    .text-#{$color_name}-#{$color_type} {
+      @include text-color($color_value);
+      @include text-active($color_value);
+    }
+  }
+}