@fastkit/vui 0.6.37 → 0.6.41

package/src/styles/after-effects/spacing.scss

@@ -0,0 +1,155 @@
+// *************************
+// * .mt-0 : margin-top: 0;
+// * .mr-1h : margin-right: 12px;
+// * .ml-n2 : margin-left: - 16px;
+// * .m-1 : margin: 8px;
+// * .mx-auto : margin-left: auto; margin-right: auto;
+// * .mx-2 : margin-left: 16px; margin-right: 16px;
+// * .my-0 : margin-top: 0; margin-bottom: 0;
+// * .mt-1--xs: margin-top: 8px; (only xs media)
+// *************************
+
+$property-map: (
+  (
+    selector: 'm',
+    prop: 'margin',
+    has-negative: true,
+    has-auto: true,
+  ),
+  (
+    selector: 'p',
+    prop: 'padding',
+    has-negative: false,
+    has-auto: false,
+  )
+);
+
+$sides-map: (
+  (
+    selector: '',
+    props: (
+      'all',
+    ),
+  ),
+  (
+    selector: 'x',
+    props: (
+      'left',
+      'right',
+    ),
+  ),
+  (
+    selector: 'y',
+    props: (
+      'top',
+      'bottom',
+    ),
+  ),
+  (
+    selector: 't',
+    props: (
+      'top',
+    ),
+  ),
+  (
+    selector: 'b',
+    props: (
+      'bottom',
+    ),
+  ),
+  (
+    selector: 'l',
+    props: (
+      'left',
+    ),
+  ),
+  (
+    selector: 'r',
+    props: (
+      'right',
+    ),
+  )
+);
+
+@mixin spacing($breakpoint-suffix: '') {
+  @each $property-info in $property-map {
+    $prop-selector: map-get($property-info, selector);
+    $prop-name: map-get($property-info, prop);
+    $has-negative: map-get($property-info, has-negative);
+    $has-auto: map-get($property-info, has-auto);
+
+    @each $sides-info in $sides-map {
+      $sides-selector: map-get($sides-info, selector);
+      $sides-props: map-get($sides-info, props);
+      $base-selector: '.' + #{$prop-selector}#{$sides-selector};
+
+      @if ($has-auto) {
+        #{$base-selector}-auto#{$breakpoint-suffix} {
+          @each $sides-prop in $sides-props {
+            $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
+
+            #{$prop-name}#{$prop-suffix}: auto;
+          }
+        }
+      }
+
+      @for $i from 0 through 10 {
+        $base-value: if(
+          $i == 0,
+          0,
+          if($i == 1, var(--root-spacing), calc(var(--root-spacing) * #{$i}))
+        );
+        $half-value: calc(var(--root-spacing) * #{$i + 0.5});
+
+        #{$base-selector}-#{$i}#{$breakpoint-suffix} {
+          @each $sides-prop in $sides-props {
+            $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
+
+            #{$prop-name}#{$prop-suffix}: $base-value;
+          }
+        }
+
+        #{$base-selector}-#{$i}h#{$breakpoint-suffix} {
+          @each $sides-prop in $sides-props {
+            $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
+
+            #{$prop-name}#{$prop-suffix}: $half-value;
+          }
+        }
+      }
+
+      @if ($has-negative) {
+        @for $i from 1 through 10 {
+          $base-value: if(
+            $i == 1,
+            calc(var(--root-spacing) * -1),
+            calc(var(--root-spacing) * -#{$i})
+          );
+          $half-value: calc(var(--root-spacing) * -#{$i + 0.5});
+
+          #{$base-selector}-n#{$i}#{$breakpoint-suffix} {
+            @each $sides-prop in $sides-props {
+              $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
+
+              #{$prop-name}#{$prop-suffix}: $base-value;
+            }
+          }
+
+          #{$base-selector}-n#{$i}h#{$breakpoint-suffix} {
+            @each $sides-prop in $sides-props {
+              $prop-suffix: if($sides-prop == 'all', '', '-' + $sides-prop);
+
+              #{$prop-name}#{$prop-suffix}: $half-value;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@include spacing();
+
+@include mq-each() {
+  @include spacing($breakpoint-suffix: '--' + $mq-each-target);
+}

package/src/styles/after-effects/text.scss

@@ -0,0 +1,90 @@
+$props-map: (
+  (
+    prop: 'text-align',
+    values: (
+      (
+        selector: 'text-left',
+        value: 'left',
+      ),
+      (
+        selector: 'text-center',
+        value: 'center',
+      ),
+      (
+        selector: 'text-right',
+        value: 'right',
+      ),
+    ),
+  ),
+  (
+    prop: 'font-weight',
+    values: (
+      (
+        selector: 'font-weight-normal',
+        value: 'normal',
+      ),
+      (
+        selector: 'font-weight-bold',
+        value: 'bold',
+      ),
+      (
+        selector: 'font-weight-lighter',
+        value: 'lighter',
+      ),
+      (
+        selector: 'font-weight-bolder',
+        value: 'bolder',
+      ),
+    ),
+  )
+);
+
+@mixin text($breakpoint-suffix: '') {
+  .text-base {
+    margin: var(--typo-base-margin);
+    font-size: var(--typo-base-size);
+    font-weight: var(--typo-base-weight);
+    line-height: var(--typo-base-height);
+    color: var(--typo-base-color);
+    letter-spacing: var(--typo-base-height);
+  }
+
+  @for $level from 1 through 6 {
+    .text-h#{$level} {
+      margin: var(--typo-h#{$level}-margin);
+      font-size: var(--typo-h#{$level}-size);
+      font-weight: var(--typo-h#{$level}-weight);
+      line-height: var(--typo-h#{$level}-height);
+      color: var(--typo-h#{$level}-color);
+      letter-spacing: var(--typo-h#{$level}-height);
+    }
+  }
+
+  @each $prop-info in $props-map {
+    $prop: map-get($prop-info, prop);
+    $values: map-get($prop-info, values);
+
+    @each $value-info in $values {
+      $selector: map-get($value-info, selector);
+      $value: map-get($value-info, value);
+
+      .#{selector}#{$breakpoint-suffix} {
+        #{$prop}: unquote($value);
+      }
+    }
+  }
+
+  @for $i from 1 through 9 {
+    $weight: $i * 100;
+
+    .font-weight-#{$i}#{$breakpoint-suffix} {
+      font-weight: $weight;
+    }
+  }
+}
+
+@include text();
+
+@include mq-each() {
+  @include text($breakpoint-suffix: '--' + $mq-each-target);
+}

package/src/styles/after-effects.scss

@@ -0,0 +1,3 @@
+@import './after-effects/display-flow.scss';
+@import './after-effects/text.scss';
+@import './after-effects/spacing.scss';

package/src/styles/base.scss

@@ -0,0 +1,14 @@
+@use './core.scss';
+
+html {
+  text-size-adjust: 100%;
+  font-size: var(--root-em);
+  text-rendering: optimizeLegibility;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+  @include core.typo(base);
+
+  font-family: var(--typo-font);
+}

package/src/styles/control.scss

@@ -0,0 +1,11 @@
+.v-control {
+  $sizes: sm, md, lg;
+
+  @each $size in $sizes {
+    &--#{$size} {
+      --control-field-rem: var(--control-field-rem-#{$size});
+
+      font-size: var(--control-field-rem);
+    }
+  }
+}

package/src/styles/core/functions.scss

@@ -0,0 +1,62 @@
+@mixin hidden-input-element {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(100%);
+  white-space: nowrap;
+}
+
+@mixin auto-fill-cancel {
+  &:-webkit-autofill {
+    &,
+    &:hover,
+    &:focus,
+    &:active {
+      color: inherit !important;
+      transition: background-color 5000s;
+      -webkit-text-fill-color: #fff !important;
+    }
+  }
+}
+
+@mixin elevation($z, $important: false) {
+  box-shadow: var(--shadow-key-umbra-#{$z}), var(--shadow-key-penumbra-#{$z}),
+    var(--shadow-key-ambient-#{$z}) if($important, !important, null);
+}
+
+@mixin elevation-transition(
+  $duration: 280ms,
+  $easing: cubic-bezier(0.4, 0, 0.2, 1)
+) {
+  transition: box-shadow $duration $easing;
+  will-change: box-shadow;
+}
+
+@mixin remove-tap-highlight() {
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+}
+
+@mixin button-reset() {
+  @include remove-tap-highlight;
+
+  padding: 0;
+  touch-action: manipulation;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+
+  &,
+  &:hover,
+  &:focus {
+    text-decoration: none;
+  }
+}

package/src/styles/core/typo.scss

@@ -0,0 +1,56 @@
+@function get-typo-size($level) {
+  @return var(--typo-#{$level}-size);
+}
+
+@function get-typo-weight($level) {
+  @return var(--typo-#{$level}-weight);
+}
+
+@function get-typo-height($level) {
+  @return var(--typo-#{$level}-height);
+}
+
+@function get-typo-spacing($level) {
+  @return var(--typo-#{$level}-height);
+}
+
+@function get-typo-margin($level) {
+  @return var(--typo-#{$level}-margin);
+}
+
+@function get-typo-color($level) {
+  @return var(--typo-#{$level}-color);
+}
+
+@mixin typo-size($level) {
+  font-size: get-typo-size($level);
+}
+
+@mixin typo-weight($level) {
+  font-weight: get-typo-weight($level);
+}
+
+@mixin typo-height($level) {
+  line-height: get-typo-height($level);
+}
+
+@mixin typo-spacing($level) {
+  letter-spacing: get-typo-spacing($level);
+}
+
+@mixin typo-margin($level) {
+  margin: get-typo-margin($level);
+}
+
+@mixin typo-color($level) {
+  color: get-typo-color($level);
+}
+
+@mixin typo($level) {
+  @include typo-size($level);
+  @include typo-weight($level);
+  @include typo-height($level);
+  @include typo-spacing($level);
+  @include typo-margin($level);
+  @include typo-color($level);
+}

package/src/styles/core.scss

@@ -0,0 +1,2 @@
+@forward './core/functions.scss';
+@forward './core/typo.scss';

package/src/styles/elevation.scss

@@ -0,0 +1,9 @@
+@use './core.scss';
+
+$z: 24;
+@while $z >= 0 {
+  .elevation-#{$z} {
+    @include core.elevation($z, true);
+  }
+  $z: $z - 1;
+}

package/src/styles/group.scss

@@ -0,0 +1,57 @@
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace;
+}
+
+code {
+  padding: 0.2em 0.4em;
+  font-size: 85%;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.87); // @TODO
+  background-color: rgba(0, 0, 0, 0.05); // @TODO
+  border-radius: 3px; // @TODO
+}
+
+table {
+  display: table;
+  max-width: 100%;
+  margin: var(--table-vertical-margin) 0;
+  font-size: var(--table-font-size);
+  border-collapse: collapse;
+  border: 0;
+  border-radius: 0;
+}
+
+caption {
+  display: table-caption;
+  width: 100%;
+  padding: 0;
+  margin: 0 0 var(--table-caption-vertical-margin);
+  font-size: var(--table-caption-font-size);
+  font-weight: var(--table-caption-font-weight);
+  text-align: center;
+}
+
+th,
+td {
+  height: var(--table-cell-height);
+  padding: var(--table-cell-vertial-padding)
+    var(--table-cell-horizontal-padding);
+  text-align: left;
+  vertical-align: middle;
+  border: 0;
+}
+
+th {
+  font-weight: var(--table-header-font-weight);
+  color: var(--table-header-color);
+  white-space: nowrap;
+}
+
+thead {
+  th {
+    text-align: center;
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,9 @@
+// @use '@fastkit/stylebase/normalize.css';
+@use '../../../stylebase/normalize.css';
+@use './variables.scss';
+@use './base.scss';
+@use './typo.scss';
+@use './elevation.scss';
+@use './group.scss';
+@use './control.scss';
+@use './wysiwyg.scss';

package/src/styles/transition.scss

@@ -0,0 +1,11 @@
+.fade {
+  &-enter-active,
+  &-leave-active {
+    transition: opacity var(----transition-fade);
+  }
+
+  &-enter-from,
+  &-leave-to {
+    opacity: 0;
+  }
+}

package/src/styles/typo.scss

@@ -0,0 +1,11 @@
+@use './core.scss';
+
+@for $level from 1 through 6 {
+  // h#{$level} {
+  //   color: var(--palette-heading);
+  // }
+
+  h#{$level} {
+    @include core.typo('h' + $level);
+  }
+}