@vueland/ui 0.0.1 → 0.0.2

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,19 @@
+@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";

package/dist/scss/themes/default-theme.scss

@@ -0,0 +1,25 @@
+@use "../../components/CApp/CApp";
+@use "../../components/CBtn/CBtn";
+@use "../../components/CForm/CForm";
+@use "../../components/CInput/CInput";
+@use "../../components/CLabel/CLabel";
+@use "../../components/CToolbar/CToolbar";
+@use "../../components/CList/CList";
+@use "../../components/CList/CListItem";
+@use "../../components/CMenu/CMenu";
+@use "../../components/CTextField/CTextField";
+@use "../../components/CSelect/CSelect";
+@use "../../components/CTooltip/CTooltip";
+@use "../../components/CAutocomplete/CAutocomplete";
+@use "../../components/CField/CField";
+@use "../../components/CCard/CCard";
+@use "../../components/CMain/CMain";
+@use "../../components/CGrid/CGrid";
+@use "../../components/CIcon/CIcon";
+@use "../../components/CDialog/CDialog";
+@use "../../components/COverlay/COverlay";
+@use "../../components/CScrim/CScrim";
+@use "../../components/CCheckbox/CCheckbox";
+@use "../../components/CRadio/CRadio";
+@use "../../components/CDatePicker/CDatePicker";
+@use "../../components/CDateInput/CDateInput";

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);
+    }
+  }
+}

package/dist/scss/utils/_cursor.scss

@@ -0,0 +1,140 @@
+.cursor {
+  &-default {
+    cursor: default;
+  }
+
+  &-pointer {
+    cursor: pointer;
+  }
+
+  &-wait {
+    cursor: wait;
+  }
+
+  &-text {
+    cursor: text;
+  }
+
+  &-move {
+    cursor: move;
+  }
+
+  &-help {
+    cursor: help;
+  }
+
+  &-not-allowed {
+    cursor: not-allowed;
+  }
+
+  /* Selection cursors */
+  &-cell {
+    cursor: cell;
+  }
+
+  &-crosshair {
+    cursor: crosshair;
+  }
+
+  &-vertical-text {
+    cursor: vertical-text;
+  }
+
+  &-alias {
+    cursor: alias;
+  }
+
+  &-copy {
+    cursor: copy;
+  }
+
+  &-no-drop {
+    cursor: no-drop;
+  }
+
+  &-grab {
+    cursor: grab;
+  }
+
+  &-grabbing {
+    cursor: grabbing;
+  }
+
+  /* Resize cursors - edges */
+  &-n-resize {
+    cursor: n-resize;
+  }
+
+  &-e-resize {
+    cursor: e-resize;
+  }
+
+  &-s-resize {
+    cursor: s-resize;
+  }
+
+  &-w-resize {
+    cursor: w-resize;
+  }
+
+  &-ne-resize {
+    cursor: ne-resize;
+  }
+
+  &-nw-resize {
+    cursor: nw-resize;
+  }
+
+  &-se-resize {
+    cursor: se-resize;
+  }
+
+  &-sw-resize {
+    cursor: sw-resize;
+  }
+
+  /* Resize cursors - directions (more specific) */
+  &-ew-resize {
+    cursor: ew-resize;
+  }
+
+  &-ns-resize {
+    cursor: ns-resize;
+  }
+
+  &-nesw-resize {
+    cursor: nesw-resize;
+  }
+
+  &-nwse-resize {
+    cursor: nwse-resize;
+  }
+
+  /* Zoom cursors */
+  &-zoom-in {
+    cursor: zoom-in;
+  }
+
+  &-zoom-out {
+    cursor: zoom-out;
+  }
+
+  /* Context menus */
+  &-context-menu {
+    cursor: context-menu;
+  }
+
+  /* Progress indicator */
+  &-progress {
+    cursor: progress;
+  }
+
+  /* Col-resize (for table columns) */
+  &-col-resize {
+    cursor: col-resize;
+  }
+
+  &-row-resize {
+    cursor: row-resize;
+  }
+}

package/dist/scss/utils/_display.scss

@@ -0,0 +1,32 @@
+@use "../maps/grids" as *;
+
+.d-none         { display: none !important; }
+.d-block        { display: block !important; }
+.d-inline       { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-flex         { display: flex !important; }
+.d-inline-flex  { display: inline-flex !important; }
+.d-grid         { display: grid !important; }
+.d-inline-grid  { display: inline-grid !important; }
+.d-table        { display: table !important; }
+.d-table-row    { display: table-row !important; }
+.d-table-cell   { display: table-cell !important; }
+.d-contents     { display: contents !important; }
+
+@each $size, $breakpoint in $grid-breakpoints {
+  @if $breakpoint != 0 {
+    @media (min-width: $breakpoint) {
+      .#{$size}\:d-none         { display: none !important; }
+      .#{$size}\:d-block        { display: block !important; }
+      .#{$size}\:d-inline       { display: inline !important; }
+      .#{$size}\:d-inline-block { display: inline-block !important; }
+      .#{$size}\:d-flex         { display: flex !important; }
+      .#{$size}\:d-inline-flex  { display: inline-flex !important; }
+      .#{$size}\:d-grid         { display: grid !important; }
+      .#{$size}\:d-inline-grid  { display: inline-grid !important; }
+      .#{$size}\:d-table        { display: table !important; }
+      .#{$size}\:d-table-cell   { display: table-cell !important; }
+      .#{$size}\:d-contents     { display: contents !important; }
+    }
+  }
+}