@dolanske/vui 1.4.0 → 1.4.2

package/src/style/layout.scss

@@ -1,179 +0,0 @@
-// Container layout styling
-$containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
-
-.container {
-  display: block;
-  margin-inline: auto;
-  width: 100%;
-  padding-inline: var(--space-m);
-  max-width: var(--container-l);
-
-  @each $container in $containers {
-    &.container-#{$container} {
-      max-width: var(--container-#{$container});
-    }
-  }
-
-  &.container-full {
-    max-width: 100%;
-  }
-}
-
-$sizes: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100;
-
-@each $size in $sizes {
-  $extra: '%';
-  .w-#{$size} {
-    width: #{$size + $extra} !important;
-  }
-
-  .h-#{$size} {
-    height: #{$size + $extra} !important;
-  }
-}
-
-.w-full {
-  width: 100%;
-}
-
-.w-auto {
-  width: auto;
-}
-
-// Layout
-.block {
-  display: block;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-.inline {
-  display: inline;
-}
-
-// Flex alignment classes
-.flex-1 {
-  flex: 1;
-}
-
-// Horizontal alignment (x-axis)
-.x-start {
-  justify-self: start;
-}
-
-.x-end {
-  justify-self: end;
-}
-
-.x-center {
-  justify-self: center;
-}
-
-.x-stretch {
-  justify-self: stretch;
-}
-
-// Vertical alignment (y-axis)
-.y-start {
-  align-self: start;
-}
-
-.y-end {
-  align-self: end;
-}
-
-.y-center {
-  align-self: center;
-}
-
-.y-stretch {
-  align-self: stretch;
-}
-
-// Sizes
-// Paddings & margins
-.mx-auto {
-  margin-inline: auto;
-}
-
-.my-auto {
-  margin-block: auto;
-}
-
-.m-auto {
-  margin: auto;
-}
-
-// Generate layout classes from size styles
-$sizes: 0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
-
-@each $size in $sizes {
-  // Margin
-  .mb-#{$size} {
-    margin-bottom: var(--space-#{$size});
-  }
-
-  .mr-#{$size} {
-    margin-right: var(--space-#{$size});
-  }
-
-  .ml-#{$size} {
-    margin-left: var(--space-#{$size});
-  }
-
-  .mt-#{$size} {
-    margin-top: var(--space-#{$size});
-  }
-
-  .mx-#{$size} {
-    margin-inline: var(--space-#{$size});
-  }
-
-  .my-#{$size} {
-    margin-block: var(--space-#{$size});
-  }
-
-  .m-#{$size} {
-    margin: var(--space-#{$size});
-  }
-
-  // Padding
-  .pb-#{$size} {
-    padding-bottom: var(--space-#{$size});
-  }
-
-  .pr-#{$size} {
-    padding-right: var(--space-#{$size});
-  }
-
-  .pl-#{$size} {
-    padding-left: var(--space-#{$size});
-  }
-
-  .pt-#{$size} {
-    padding-top: var(--space-#{$size});
-  }
-
-  .px-#{$size} {
-    padding-inline: var(--space-#{$size});
-  }
-
-  .py-#{$size} {
-    padding-block: var(--space-#{$size});
-  }
-
-  .p-#{$size} {
-    padding: var(--space-#{$size});
-  }
-}
-
-// Z-index
-$zindexes: 0, 10, 20, 30, 40, 50, auto;
-
-@each $zindex in $zindexes {
-  .z-#{$zindex} {
-    z-index: $zindex;
-  }
-}

package/src/style/media-query.scss

@@ -1,29 +0,0 @@
-// Mobile phones
-@media screen and (max-width: 572px) {
-  :root {
-    --space-xs: 5px;
-    --space-s: 8px;
-    --space-m: 12px;
-    --space-l: 20px;
-    --space-xl: 32px;
-    --space-xxl: 44px;
-  }
-
-  // Typography changes
-  h1 {
-    font-size: 3.2rem;
-  }
-
-  h2 {
-    font-size: 2.8rem;
-  }
-
-  h3 {
-    font-size: 2.2rem;
-  }
-
-  .vui-tabs .vui-tab {
-    font-size: var(--font-size-s);
-    padding: 0 var(--space-xs);
-  }
-}

package/src/style/reset.scss

@@ -1,135 +0,0 @@
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol,
-ul {
-  list-style: none;
-}
-blockquote,
-q {
-  quotes: none;
-}
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-button {
-  border: none;
-  background-color: unset;
-  margin: 0;
-  font-family: var(--global-font);
-}
-
-hr {
-  border: none;
-  border-bottom: 1px solid var(--color-border);
-}

package/src/style/text.scss

@@ -1,137 +0,0 @@
-$sizes: 'xxs', 'xs', 's', 'ms', 'm', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl';
-
-@each $size in $sizes {
-  .text-#{$size} {
-    font-size: var(--font-size-#{$size});
-  }
-}
-
-$colors: 'light', 'lighter', 'lightest', 'red', 'green', 'yellow', 'blue';
-
-@each $color in $colors {
-  .text-color-#{$color} {
-    color: var(--color-text-#{$color});
-  }
-}
-
-// Font weights
-
-.text-light {
-  font-weight: 300;
-}
-
-.text-regular {
-  font-weight: 400;
-}
-
-.text-medium {
-  font-weight: 500;
-}
-
-.text-semibold {
-  font-weight: 600;
-}
-
-.text-bold {
-  font-weight: 700;
-}
-
-.text-extra-bold {
-  font-weight: 800;
-}
-
-.text-black {
-  font-weight: 900;
-}
-
-// Text align
-.text-left {
-  text-align: left;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-// Line truncating
-
-.text-overflow {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-$lines: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
-
-@each $line in $lines {
-  .text-overflow-#{$line} {
-    display: -webkit-box;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    line-clamp: $line;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: $line;
-  }
-}
-
-// White space
-
-.ws-wrap {
-  white-space: wrap;
-}
-
-.ws-pre {
-  white-space: pre;
-}
-
-.ws-prewrap {
-  white-space: pre-wrap;
-}
-
-.ws-nowrap {
-  white-space: nowrap;
-}
-
-.color-text {
-  color: var(--color-text);
-}
-
-.color-text-light {
-  color: var(--color-text-light);
-}
-
-.color-text-lighter {
-  color: var(--color-text-lighter);
-}
-
-.color-text-lightest {
-  color: var(--color-text-lightest);
-}
-
-.color-text-invert {
-  color: var(--color-text-invert);
-}
-
-.color-text-red {
-  color: var(--color-text-red);
-}
-
-.color-text-green {
-  color: var(--color-text-green);
-}
-
-.color-text-yellow {
-  color: var(--color-text-yellow);
-}
-
-.color-text-blue {
-  color: var(--color-text-blue);
-}
-
-.color-accent {
-  color: var(--color-accent);
-}

package/src/style/theme.scss

@@ -1,195 +0,0 @@
-// Light theme
-:root {
-  --light-color-bg: rgb(246, 246, 246);
-  --light-color-bg-medium: rgb(236, 236, 236);
-  --light-color-bg-raised: rgb(222, 222, 222);
-  --light-color-bg-lowered: rgb(255, 255, 255);
-
-  --light-color-text: rgb(8, 8, 8);
-  --light-color-text-light: rgb(64, 64, 64);
-  --light-color-text-lighter: rgb(92, 92, 92);
-  --light-color-text-lightest: rgb(128, 128, 128);
-  --light-color-text-invert: rgb(248, 248, 248);
-
-  --light-color-button-gray: rgb(224, 224, 224);
-  --light-color-button-gray-hover: rgb(198, 198, 198);
-
-  --light-color-button-fill: rgb(12, 12, 12);
-  --light-color-button-fill-hover: rgb(52, 52, 52);
-
-  --light-color-text-red: rgb(209, 60, 52);
-  --light-color-bg-red-lowered: rgb(172, 45, 45);
-  --light-color-bg-red-raised: rgb(220, 38, 38);
-
-  --light-color-text-green: rgb(77, 160, 29);
-  --light-color-bg-green-lowered: rgb(42, 114, 19);
-  --light-color-bg-green-raised: rgb(61, 146, 35);
-
-  --light-color-text-yellow: rgb(176, 129, 15);
-  --light-color-bg-yellow-lowered: rgb(230, 205, 137);
-  --light-color-bg-yellow-raised: rgb(253, 200, 86);
-
-  --light-color-text-blue: rgb(85, 141, 245);
-  --light-color-bg-blue-lowered: rgb(196, 214, 255);
-  --light-color-bg-blue-raised: rgb(136, 178, 255);
-
-  --light-color-border: rgb(200, 200, 200);
-  --light-color-border-strong: rgb(152, 152, 152);
-  --light-color-border-weak: rgb(224, 224, 224);
-
-  --light-color-accent: rgb(193, 118, 255);
-  --light-color-bg-accent-lowered: hsla(from var(--light-color-accent) h s l / 0.6);
-  --light-color-bg-accent-raised: hsla(from var(--light-color-accent) h s l / 0.75);
-
-  --light-box-shadow: 0 2px 12px rgba(8, 8, 8, 0.085);
-  --light-box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.2);
-}
-
-// Dark theme
-:root {
-  --dark-color-bg: rgb(17, 17, 17);
-  --dark-color-bg-medium: rgb(22, 22, 22);
-  --dark-color-bg-raised: rgb(28, 28, 28);
-  --dark-color-bg-lowered: rgb(12, 12, 12);
-
-  --dark-color-text: rgb(231, 231, 231);
-  --dark-color-text-light: rgb(180, 180, 180);
-  --dark-color-text-lighter: rgb(90, 90, 90);
-  --dark-color-text-lightest: rgb(65, 65, 65);
-  --dark-color-text-invert: rgb(17, 17, 17);
-
-  --dark-color-button-gray: rgb(46, 46, 46);
-  --dark-color-button-gray-hover: rgb(38, 38, 38);
-
-  --dark-color-button-fill: rgb(250, 250, 250);
-  --dark-color-button-fill-hover: rgb(210, 210, 210);
-
-  --dark-color-text-red: rgb(243, 78, 70);
-  --dark-color-bg-red-lowered: rgb(104, 24, 24);
-  --dark-color-bg-red-raised: rgb(127, 29, 29);
-
-  --dark-color-text-green: rgb(106, 207, 48);
-  --dark-color-bg-green-lowered: rgb(40, 95, 8);
-  --dark-color-bg-green-raised: rgb(26, 122, 13);
-
-  --dark-color-text-yellow: rgb(255, 193, 7);
-  --dark-color-bg-yellow-lowered: rgb(78, 52, 0);
-  --dark-color-bg-yellow-raised: rgb(152, 104, 0);
-
-  --dark-color-text-blue: rgb(85, 141, 245);
-  --dark-color-bg-blue-lowered: rgb(13, 32, 74);
-  --dark-color-bg-blue-raised: rgb(26, 59, 119);
-
-  --dark-color-border: rgb(40, 40, 40);
-  --dark-color-border-strong: rgb(54, 54, 54);
-  --dark-color-border-weak: rgb(36, 36, 36);
-
-  --dark-color-accent: rgb(193, 118, 255);
-  --dark-color-bg-accent-lowered: hsla(from var(--dark-color-accent) h s l / 0.45);
-  --dark-color-bg-accent-raised: hsla(from var(--dark-color-accent) h s l / 0.6);
-
-  --dark-box-shadow: 0 2px 12px rgba(8, 8, 8, 0.2);
-  --dark-box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.4);
-}
-
-:root.light {
-  color-scheme: light;
-
-  --color-bg: var(--light-color-bg);
-  --color-bg-medium: var(--light-color-bg-medium);
-  --color-bg-raised: var(--light-color-bg-raised);
-  --color-bg-lowered: var(--light-color-bg-lowered);
-
-  --color-text: var(--light-color-text);
-  --color-text-light: var(--light-color-text-light);
-  --color-text-lighter: var(--light-color-text-lighter);
-  --color-text-lightest: var(--light-color-text-lightest);
-  --color-text-invert: var(--light-color-text-invert);
-
-  --color-button-gray: var(--light-color-button-gray);
-  --color-button-gray-hover: var(--light-color-button-gray-hover);
-
-  --color-button-fill: var(--light-color-button-fill);
-  --color-button-fill-hover: var(--light-color-button-fill-hover);
-
-  --color-text-red: var(--light-color-text-red);
-  --color-bg-red-lowered: var(--light-color-bg-red-lowered);
-  --color-bg-red-raised: var(--light-color-bg-red-raised);
-  --color-border-red: var(--light-color-border-red);
-
-  --color-text-green: var(--light-color-text-green);
-  --color-bg-green-lowered: var(--light-color-bg-green-lowered);
-  --color-bg-green-raised: var(--light-color-bg-green-raised);
-
-  --color-text-yellow: var(--light-color-text-yellow);
-  --color-bg-yellow-lowered: var(--light-color-bg-yellow-lowered);
-  --color-bg-yellow-raised: var(--light-color-bg-yellow-raised);
-  --color-border-yellow: var(--light-color-border-yellow);
-
-  --color-text-blue: var(--light-color-text-blue);
-  --color-bg-blue-lowered: var(--light-color-bg-blue-lowered);
-  --color-bg-blue-raised: var(--light-color-bg-blue-raised);
-  --color-border-blue: var(--light-color-border-blue);
-
-  --color-border: var(--light-color-border);
-  --color-border-strong: var(--light-color-border-strong);
-  --color-border-weak: var(--light-color-border-weak);
-
-  --color-accent: var(--light-color-accent);
-  --color-bg-accent-lowered: var(--light-color-bg-accent-lowered);
-  --color-bg-accent-raised: var(--light-color-bg-accent-raised);
-
-  --box-shadow: var(--light-box-shadow);
-  --box-shadow-strong: var(--light-box-shadow-strong);
-}
-
-:root.dark {
-  color-scheme: dark;
-
-  --color-bg: var(--dark-color-bg);
-  --color-bg-medium: var(--dark-color-bg-medium);
-  --color-bg-raised: var(--dark-color-bg-raised);
-  --color-bg-lowered: var(--dark-color-bg-lowered);
-
-  --color-text: var(--dark-color-text);
-  --color-text-light: var(--dark-color-text-light);
-  --color-text-lighter: var(--dark-color-text-lighter);
-  --color-text-lightest: var(--dark-color-text-lightest);
-  --color-text-invert: var(--dark-color-text-invert);
-
-  --color-button-gray: var(--dark-color-button-gray);
-  --color-button-gray-hover: var(--dark-color-button-gray-hover);
-
-  --color-button-fill: var(--dark-color-button-fill);
-  --color-button-fill-hover: var(--dark-color-button-fill-hover);
-
-  --color-text-red: var(--dark-color-text-red);
-  --color-bg-red-lowered: var(--dark-color-bg-red-lowered);
-  --color-bg-red-raised: var(--dark-color-bg-red-raised);
-  --color-border-red: var(--dark-color-border-red);
-
-  --color-text-green: var(--dark-color-text-green);
-  --color-bg-green-lowered: var(--dark-color-bg-green-lowered);
-  --color-bg-green-raised: var(--dark-color-bg-green-raised);
-
-  --color-text-yellow: var(--dark-color-text-yellow);
-  --color-bg-yellow-lowered: var(--dark-color-bg-yellow-lowered);
-  --color-bg-yellow-raised: var(--dark-color-bg-yellow-raised);
-  --color-border-yellow: var(--dark-color-border-yellow);
-
-  --color-text-blue: var(--dark-color-text-blue);
-  --color-bg-blue-lowered: var(--dark-color-bg-blue-lowered);
-  --color-bg-blue-raised: var(--dark-color-bg-blue-raised);
-  --color-border-blue: var(--dark-color-border-blue);
-
-  --color-border: var(--dark-color-border);
-  --color-border-strong: var(--dark-color-border-strong);
-  --color-border-weak: var(--dark-color-border-weak);
-
-  --color-accent: var(--dark-color-accent);
-  --color-bg-accent-lowered: var(--dark-color-bg-accent-lowered);
-  --color-bg-accent-raised: var(--dark-color-bg-accent-raised);
-
-  --box-shadow: var(--dark-box-shadow);
-  --box-shadow-strong: var(--dark-box-shadow-strong);
-}