@fewbox/den 0.0.3

package/templates/style/_core.scss

@@ -0,0 +1,297 @@
+@use './variables' as v;
+
+$border-positions: "all", "top", "right", "bottom", "left", "except-top", "except-right", "except-bottom", "except-left",
+    "right-top", "right-bottom", "left-top", "left-bottom", "top-bottom", "left-right";
+
+/* border position */
+@each $color, $value in v.$colors {
+    @each $border-position in $border-positions {
+        .#{$color}-border-#{$border-position} {
+            @if ($border-position == "all") {
+                border-color: var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top") {
+                border-color: var(#{v.$var-prefix}color-#{$color}) transparent transparent transparent;
+            }
+            @if ($border-position == "right") {
+                border-color: transparent var(#{v.$var-prefix}color-#{$color}) transparent transparent;
+            }
+            @if ($border-position == "bottom") {
+                border-color: transparent transparent var(#{v.$var-prefix}color-#{$color}) transparent;
+            }
+            @if ($border-position == "left") {
+                border-color: transparent transparent transparent var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-top") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-right") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-left") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "right-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent;
+            }
+            @if ($border-position == "right-bottom") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "left-bottom") {
+                border-color: transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-right") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+        }
+    }
+}
+/* pseudo - after */
+@each $color, $value in v.$colors {
+    @each $border-position in $border-positions {
+        .#{$color}-after-border-#{$border-position}::after {
+            @if ($border-position == "all") {
+                border-color: var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top") {
+                border-color: var(#{v.$var-prefix}color-#{$color}) transparent transparent transparent;
+            }
+            @if ($border-position == "right") {
+                border-color: transparent var(#{v.$var-prefix}color-#{$color}) transparent transparent;
+            }
+            @if ($border-position == "bottom") {
+                border-color: transparent transparent var(#{v.$var-prefix}color-#{$color}) transparent;
+            }
+            @if ($border-position == "left") {
+                border-color: transparent transparent transparent var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-top") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-right") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-left") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "right-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent;
+            }
+            @if ($border-position == "right-bottom") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "left-bottom") {
+                border-color: transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-right") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+        }
+    }
+}
+
+/* pseudo - before */
+@each $color, $value in v.$colors {
+    @each $border-position in $border-positions {
+        .#{$color}-before-border-#{$border-position}::before {
+            @if ($border-position == "all") {
+                border-color: var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top") {
+                border-color: var(#{v.$var-prefix}color-#{$color}) transparent transparent transparent;
+            }
+            @if ($border-position == "right") {
+                border-color: transparent var(#{v.$var-prefix}color-#{$color}) transparent transparent;
+            }
+            @if ($border-position == "bottom") {
+                border-color: transparent transparent var(#{v.$var-prefix}color-#{$color}) transparent;
+            }
+            @if ($border-position == "left") {
+                border-color: transparent transparent transparent var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-top") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-right") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "except-left") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "right-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent;
+            }
+            @if ($border-position == "right-bottom") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-top") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "left-bottom") {
+                border-color: transparent
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+            @if ($border-position == "top-bottom") {
+                border-color: var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent;
+            }
+            @if ($border-position == "left-right") {
+                border-color: transparent
+                    var(#{v.$var-prefix}color-#{$color})
+                    transparent
+                    var(#{v.$var-prefix}color-#{$color});
+            }
+        }
+    }
+}
+/* background */
+@each $color, $value in v.$colors {
+    .#{$color}-background {
+        background-color: var(#{v.$var-prefix}color-#{$color});
+        @if ($color == "primary") {
+            color: var(#{v.$var-prefix}color-white);
+        }
+        &::-webkit-slider-thumb {
+            background-color: var(#{v.$var-prefix}color-#{$color});
+        }
+    }
+}
+/* front */
+@each $color, $value in v.$colors {
+    .#{$color}-front {
+        color: var(#{v.$var-prefix}color-#{$color});
+    }
+}
+/* border */
+@each $color, $value in v.$colors {
+    .#{$color}-border {
+        border-color: var(#{v.$var-prefix}color-#{$color}) !important;
+        &::-webkit-slider-thumb {
+            border-color: var(#{v.$var-prefix}color-#{$color}) !important;
+        }
+    }
+}
+/* size */
+@each $font-size, $value in v.$font-sizes {
+    .font-size-#{$font-size} {
+        font-size: var(#{v.$var-prefix}font-size-#{$font-size});
+    }
+}
+/* auto size */
+@each $font-size, $value in v.$auto-font-sizes {
+    .auto-font-size-#{$font-size} {
+        font-size: var(#{v.$var-prefix}auto-font-size-#{$font-size});
+    }
+}
+/* weight */
+@each $font-weight, $value in v.$font-weights {
+    .font-weight-#{$font-weight} {
+        font-weight: var(#{v.$var-prefix}font-weight-#{$font-weight});
+    }
+}

package/templates/style/_root-properties.scss

@@ -0,0 +1,57 @@
+@use './variables' as v;
+
+%root-properties {
+
+    /* variable */
+    @each $color, $value in v.$colors {
+        #{v.$var-prefix}color-#{$color}: #{$value};
+    }
+
+    @each $font-size, $value in v.$font-sizes {
+        #{v.$var-prefix}font-size-#{$font-size}: #{$value};
+    }
+
+    @each $font-size, $value in v.$auto-font-sizes {
+        #{v.$var-prefix}auto-font-size-#{$font-size}: #{$value};
+    }
+
+    @each $font-weight, $value in v.$font-weights {
+        #{v.$var-prefix}font-weight-#{$font-weight}: #{$value}
+    }
+
+    @each $border-size, $value in v.$border-radius-sizes {
+        #{v.$var-prefix}border-radius-#{$border-size}: #{$value};
+    }
+    // Build-In
+    #{v.$var-prefix}font-family: #{v.$font-family};
+    #{v.$var-prefix}font-size: #{v.$font-size};
+    #{v.$var-prefix}line-height: #{v.$line-height};
+    #{v.$var-prefix}letter-spacing: #{v.$letter-spacing};
+    #{v.$var-prefix}padding: #{v.$padding};
+    #{v.$var-prefix}margin: #{v.$margin};
+    #{v.$var-prefix}box-sizing: #{v.$box-sizing};
+    #{v.$var-prefix}scrollbar-size: #{v.$scrollbar-size};
+    #{v.$var-prefix}scrollbar-track-color: #{v.$scrollbar-track-color};
+    #{v.$var-prefix}scrollbar-thumb-color: #{v.$scrollbar-thumb-color};
+    #{v.$var-prefix}scrollbar-thumb-hover-color: #{v.$scrollbar-thumb-hover-color};
+    #{v.$var-prefix}scrollbar-thumb-active-color: #{v.$scrollbar-thumb-active-color};
+    #{v.$var-prefix}scrollbar-radius: #{v.$scrollbar-radius};
+    // Component
+    #{v.$var-prefix}input-padding: #{v.$input-padding};
+    #{v.$var-prefix}input-padding: #{v.$input-padding};
+    #{v.$var-prefix}dropdown-hover-background-color: #{v.$dropdown-hover-background-color};
+    #{v.$var-prefix}dropdown-hover-color: #{v.$dropdown-hover-color};
+
+    #{v.$var-prefix}v-ellipse-size: #{v.$v-ellipse-size};
+    #{v.$var-prefix}v-rectangle-size: #{v.$v-ellipse-size};
+    #{v.$var-prefix}v-image-size: #{v.$v-image-size};
+    #{v.$var-prefix}v-svg-size: #{v.$v-svg-size};
+    #{v.$var-prefix}v-window--size: #{v.$v-window-size};
+    
+
+    *,
+    ::before,
+    ::after {
+        box-sizing: inherit;
+    }
+}

package/templates/style/_root.scss

@@ -0,0 +1,6 @@
+@forward './root-properties';
+@forward "./core";
+
+:root {
+    @extend %root-properties;
+}

package/templates/style/_variables.scss

@@ -0,0 +1,194 @@
+/*------------------*/
+/*     VARIABLES    */
+/*------------------*/
+$var-prefix: --den-;
+
+/*------------------*/
+/*   THEME COLOUR   */
+/*------------------*/
+//font
+$font-color: #000000;
+//body
+$body-color: #f5f8fa;
+//component
+$white-color: #ffffff;
+$black-color: #000000;
+$light-color: #f0f0f0;
+$dark-color: #283252;
+$primary-color: #cd0dad;
+$secondary-color: #f782c2;
+$tertiary-color: #f9c46b;
+$info-color: #159ad8;
+$success-color: #0fe66f;
+$warning-color: #e7f152;
+$error-color: #d6243c;
+$placeholder-color: #e1e1e1;
+$border-color: #e6e6e6;
+$transparent-color: transparent;
+$custom-color: #d132b9;
+$colors: (
+    "font": $font-color,
+    "body": $body-color,
+    "white": $white-color,
+    "black": $black-color,
+    "light": $light-color,
+    "light75": rgba($light-color, 0.75),
+    "light50": rgba($light-color, 0.5),
+    "light25": rgba($light-color, 0.25),
+    "dark": $dark-color,
+    "dark75": rgba($dark-color, 0.75),
+    "dark50": rgba($dark-color, 0.5),
+    "dark25": rgba($dark-color, 0.25),
+    "primary": $primary-color,
+    "primary75": rgba($primary-color, 0.75),
+    "primary50": rgba($primary-color, 0.5),
+    "primary25": rgba($primary-color, 0.25),
+    "secondary": $secondary-color,
+    "secondary75": rgba($secondary-color, 0.75),
+    "secondary50": rgba($secondary-color, 0.5),
+    "secondary25": rgba($secondary-color, 0.25),
+    "tertiary": $tertiary-color,
+    "tertiary75": rgba($tertiary-color, 0.75),
+    "tertiary50": rgba($tertiary-color, 0.5),
+    "tertiary25": rgba($tertiary-color, 0.25),
+    "info": $info-color,
+    "info75": rgba($info-color, 0.75),
+    "info50": rgba($info-color, 0.5),
+    "info25": rgba($info-color, 0.25),
+    "success": $success-color,
+    "success75": rgba($success-color, 0.75),
+    "success50": rgba($success-color, 0.5),
+    "success25": rgba($success-color, 0.25),
+    "warning": $warning-color,
+    "warning75": rgba($warning-color, 0.75),
+    "warning50": rgba($warning-color, 0.5),
+    "warning25": rgba($warning-color, 0.25),
+    "error": $error-color,
+    "error75": rgba($error-color, 0.75),
+    "error50": rgba($error-color, 0.5),
+    "error25": rgba($error-color, 0.25),
+    "placeholder": $placeholder-color,
+    "placeholder75": rgba($placeholder-color, 0.75),
+    "placeholder50": rgba($placeholder-color, 0.5),
+    "placeholder25": rgba($placeholder-color, 0.25),
+    "border": $border-color,
+    "border75": rgba($border-color, 0.75),
+    "border50": rgba($border-color, 0.5),
+    "border25": rgba($border-color, 0.25),
+    "transparent": $transparent-color,
+    "custom": $custom-color,
+    "custom75": rgba($custom-color, 0.75),
+    "custom50": rgba($custom-color, 0.5),
+    "custom25": rgba($custom-color, 0.25),
+);
+//debug
+$debug-color-position: #d132b9;
+$debug-color-flex: #3266d0;
+$debug-color-flex-item: #3266d0;
+
+/*------------------*/
+/*     BOX MODEL    */
+/*------------------*/
+$padding: 0;
+$margin: 0;
+//left right top bottom offset
+$self-offset: 1em;
+//border
+$border-radius-sizes: (
+    "fixed": 0.8rem,
+    "max": 50%,
+);
+$box-sizing: border-box;
+
+/*------------------*/
+/*   HTML ELEMENT   */
+/*------------------*/
+//scrollbar
+$scrollbar-size: 6px;
+$scrollbar-track-color: #e1e1e1;
+$scrollbar-thumb-color: #2e2e2e;
+$scrollbar-thumb-hover-color: #525252;
+$scrollbar-thumb-active-color: #000000;
+$scrollbar-radius: 8px;
+
+/*------------------*/
+/*       FONT       */
+/*------------------*/
+$line-height: 1.4;
+$letter-spacing: 0.01em;
+$font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+$font-size: 1em; // 16px * 0.875 = 14px;
+//$font-size: calc(0.5em + 1vw);
+$normal: 1rem;
+$extra-small: $normal * 0.5;
+$small: $normal * 0.8;
+$large: $normal * 1.4;
+$extra-large: $normal * 2.4;
+$custom: $normal * 2.8;
+$font-sizes: (
+    "normal": $normal,
+    "extra-small": $extra-small,
+    "small": $small,
+    "large": $large,
+    "extra-large": $extra-large,
+    "custom": $custom,
+);
+$auto-normal: 1em;
+$auto-extra-small: $auto-normal * 0.5;
+$auto-small: $auto-normal * 0.8;
+$auto-large: $auto-normal * 1.4;
+$auto-extra-large: $auto-normal * 2.4;
+$auto-custom: $auto-normal * 2.8;
+$auto-font-sizes: (
+    "normal": $auto-normal,
+    "extra-small": $auto-extra-small,
+    "small": $auto-small,
+    "large": $auto-large,
+    "extra-large": $auto-extra-large,
+    "custom": $auto-custom,
+);
+$font-weights: (
+    "thin": 100,
+    "extra-light": 200,
+    "light": 300,
+    "regular": 400,
+    "medium": 500,
+    "semi-bold": 600,
+    "bold": 700,
+    "extra-bold": 800,
+    "black": 900,
+);
+
+/*------------------*/
+/* VISUAL COMPONENT */
+/*------------------*/
+$v-ellipse-size: 1em;
+$v-rectangle-size: 1em;
+$v-image-size: 3em;
+$v-window-size: 16em;
+$v-svg-size: 2.2em;
+
+/*------------------*/
+/*    RESPONSIVE    */
+/*------------------*/
+$response-breakpoints: (
+    "extra-small": 0,
+    "small": 576px,
+    "medium": 768px,
+    "large": 992px,
+    "extra-large": 1200px,
+    "extra-extra-large": 1400px,
+);
+$zone-padding-x: 1.5rem;
+$zone-max-widths: (
+    "extra-small": 0,
+    "small": 540px,
+    "medium": 720px,
+    "large": 960px,
+    "extra-large": 1140px,
+    "extra-extra-large": 1320px,
+) !default;
+$input-padding: 0.6em 1em;
+$dropdown-hover-background-color: $primary-color;
+$dropdown-hover-color: $white-color;