@tripie-pyotato/design-system 0.0.0

package/src/mixins/_normalize.scss

@@ -0,0 +1,353 @@
+@mixin generate-normalize {
+  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+  /* Document
+        ========================================================================== */
+
+  /**
+      * 1. Correct the line height in all browsers.
+      * 2. Prevent adjustments of font size after orientation changes in iOS.
+      */
+
+  html {
+    line-height: 1.15; /* 1 */
+    -webkit-text-size-adjust: 100%; /* 2 */
+  }
+
+  /* Sections
+        ========================================================================== */
+
+  /**
+      * Remove the margin in all browsers.
+      */
+
+  body {
+    margin: 0;
+  }
+
+  /**
+      * Render the `main` element consistently in IE.
+      */
+
+  main {
+    display: block;
+  }
+
+  /**
+      * Correct the font size and margin on `h1` elements within `section` and
+      * `article` contexts in Chrome, Firefox, and Safari.
+      */
+
+  h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+  }
+
+  /* Grouping content
+        ========================================================================== */
+
+  /**
+      * 1. Add the correct box sizing in Firefox.
+      * 2. Show the overflow in Edge and IE.
+      */
+
+  hr {
+    box-sizing: content-box; /* 1 */
+    height: 0; /* 1 */
+    overflow: visible; /* 2 */
+  }
+
+  /**
+      * 1. Correct the inheritance and scaling of font size in all browsers.
+      * 2. Correct the odd `em` font sizing in all browsers.
+      */
+
+  pre {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /* Text-level semantics
+        ========================================================================== */
+
+  /**
+      * Remove the gray background on active links in IE 10.
+      */
+
+  a {
+    background-color: transparent;
+  }
+
+  /**
+      * 1. Remove the bottom border in Chrome 57-
+      * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+      */
+
+  abbr[title] {
+    border-bottom: none; /* 1 */
+    text-decoration: underline; /* 2 */
+    text-decoration: underline dotted; /* 2 */
+  }
+
+  /**
+      * Add the correct font weight in Chrome, Edge, and Safari.
+      */
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  /**
+      * 1. Correct the inheritance and scaling of font size in all browsers.
+      * 2. Correct the odd `em` font sizing in all browsers.
+      */
+
+  code,
+  kbd,
+  samp {
+    font-family: monospace, monospace; /* 1 */
+    font-size: 1em; /* 2 */
+  }
+
+  /**
+      * Add the correct font size in all browsers.
+      */
+
+  small {
+    font-size: 80%;
+  }
+
+  /**
+      * Prevent `sub` and `sup` elements from affecting the line height in
+      * all browsers.
+      */
+
+  sub,
+  sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  /* Embedded content
+        ========================================================================== */
+
+  /**
+      * Remove the border on images inside links in IE 10.
+      */
+
+  img {
+    border-style: none;
+  }
+
+  /* Forms
+        ========================================================================== */
+
+  /**
+      * 1. Change the font styles in all browsers.
+      * 2. Remove the margin in Firefox and Safari.
+      */
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    font-family: inherit; /* 1 */
+    font-size: 100%; /* 1 */
+    line-height: 1.15; /* 1 */
+    margin: 0; /* 2 */
+  }
+
+  /**
+      * Show the overflow in IE.
+      * 1. Show the overflow in Edge.
+      */
+
+  button,
+  input {
+    /* 1 */
+    overflow: visible;
+  }
+
+  /**
+      * Remove the inheritance of text transform in Edge, Firefox, and IE.
+      * 1. Remove the inheritance of text transform in Firefox.
+      */
+
+  button,
+  select {
+    /* 1 */
+    text-transform: none;
+  }
+
+  /**
+      * Correct the inability to style clickable types in iOS and Safari.
+      */
+
+  button,
+  [type="button"],
+  [type="reset"],
+  [type="submit"] {
+    -webkit-appearance: button;
+  }
+
+  /**
+      * Remove the inner border and padding in Firefox.
+      */
+
+  button::-moz-focus-inner,
+  [type="button"]::-moz-focus-inner,
+  [type="reset"]::-moz-focus-inner,
+  [type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  /**
+      * Restore the focus styles unset by the previous rule.
+      */
+
+  button:-moz-focusring,
+  [type="button"]:-moz-focusring,
+  [type="reset"]:-moz-focusring,
+  [type="submit"]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  /**
+      * Correct the padding in Firefox.
+      */
+
+  fieldset {
+    padding: 0.35em 0.75em 0.625em;
+  }
+
+  /**
+      * 1. Correct the text wrapping in Edge and IE.
+      * 2. Correct the color inheritance from `fieldset` elements in IE.
+      * 3. Remove the padding so developers are not caught out when they zero out
+      *    `fieldset` elements in all browsers.
+      */
+
+  legend {
+    box-sizing: border-box; /* 1 */
+    color: inherit; /* 2 */
+    display: table; /* 1 */
+    max-width: 100%; /* 1 */
+    padding: 0; /* 3 */
+    white-space: normal; /* 1 */
+  }
+
+  /**
+      * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+      */
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  /**
+      * Remove the default vertical scrollbar in IE 10+.
+      */
+
+  textarea {
+    overflow: auto;
+  }
+
+  /**
+      * 1. Add the correct box sizing in IE 10.
+      * 2. Remove the padding in IE 10.
+      */
+
+  [type="checkbox"],
+  [type="radio"] {
+    box-sizing: border-box; /* 1 */
+    padding: 0; /* 2 */
+  }
+
+  /**
+      * Correct the cursor style of increment and decrement buttons in Chrome.
+      */
+
+  [type="number"]::-webkit-inner-spin-button,
+  [type="number"]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  /**
+      * 1. Correct the odd appearance in Chrome and Safari.
+      * 2. Correct the outline style in Safari.
+      */
+
+  [type="search"] {
+    -webkit-appearance: textfield; /* 1 */
+    outline-offset: -2px; /* 2 */
+  }
+
+  /**
+      * Remove the inner padding in Chrome and Safari on macOS.
+      */
+
+  [type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  /**
+      * 1. Correct the inability to style clickable types in iOS and Safari.
+      * 2. Change font properties to `inherit` in Safari.
+      */
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button; /* 1 */
+    font: inherit; /* 2 */
+  }
+
+  /* Interactive
+        ========================================================================== */
+
+  /*
+      * Add the correct display in Edge, IE 10+, and Firefox.
+      */
+
+  details {
+    display: block;
+  }
+
+  /*
+      * Add the correct display in all browsers.
+      */
+
+  summary {
+    display: list-item;
+  }
+
+  /* Misc
+        ========================================================================== */
+
+  /**
+      * Add the correct display in IE 10+.
+      */
+
+  template {
+    display: none;
+  }
+
+  /**
+      * Add the correct display in IE 10.
+      */
+
+  [hidden] {
+    display: none;
+  }
+}

package/src/mixins/_positioning.scss

@@ -0,0 +1,34 @@
+/// 위치 믹스인
+/// @param {string} $position_val : css 'position' 값 (static, relative, absolute, fixed, stick)
+/// @param {string} $top : absolute 박스를 포함하는 블록의 아래쪽과 absolute 박스의 top margin 간격
+/// @param {string} $right : absolute 박스를 포함하는 블록의 왼쪽과 absolute 박스의 오른쪽 margin 간격
+/// @param {string} $bottom : absolute 박스를 포함하는 블록의 위쪽과 absolute 박스의 아래쪽 margin 간격
+/// @param {string} $left : absolute 박스를 포함하는 블록의 오른쪽과 absolute 박스의 왼쪽 margin 간격
+/// @param {string} $axis : 엘리먼트를 가운데 정렬할 축 (both, horizontal, vertical)
+/// @return {mixin} : 위치 믹스인
+@mixin position(
+  $position_val: absolute,
+  $top: 0,
+  $right: 0,
+  $bottom: 0,
+  $left: 0,
+  $axis: null
+) {
+  @if $axis {
+    transform: if(
+        $axis == "horizontal",
+        translateX(-50%),
+        if($axis == "both", translateX(-50%), null)
+      )
+      if(
+        $axis == "vertical",
+        translateY(-50%),
+        if($axis == "both", translateY(-50%), null)
+      );
+  }
+  position: $position_val;
+  top: if($axis == "vertical", 50%, if($axis == "both", 50%, $top));
+  right: $right;
+  bottom: $bottom;
+  left: if($axis == "horizontal", 50%, if($axis == "both", 50%, $top));
+}

package/src/mixins/_pseudo.scss

@@ -0,0 +1,39 @@
+@use "positioning" as *;
+
+/// Pseudo 엘리먼트 믹스인
+/// @param {string} $location : pseudo 엘리먼트의 위치
+/// @param {string} $content : ::before와 ::after pseudo 엘리먼트와 함께 쓰일 콘텐츠 property
+/// @param {string} $position : css 'position' 값 (static, relative, absolute, fixed, stick)
+/// @param {string} $top : absolute 박스를 포함하는 블록의 아래쪽과 absolute 박스의 top margin 간격
+/// @param {string} $right : absolute 박스를 포함하는 블록의 왼쪽과 absolute 박스의 오른쪽 margin 간격
+/// @param {string} $bottom : absolute 박스를 포함하는 블록의 위쪽과 absolute 박스의 아래쪽 margin 간격
+/// @param {string} $left : absolute 박스를 포함하는 블록의 오른쪽과 absolute 박스의 왼쪽 margin 간격
+/// @param {string} $axis : 엘리먼트를 가운데 정렬할 축 (both, horizontal, vertical)
+/// @return {mixin} : pseudo 엘리먼트 믹스인
+@mixin pseudo(
+  $location: before,
+  $content: "",
+  $position: absolute,
+  $top: 0,
+  $right: 0,
+  $bottom: 0,
+  $left: 0,
+  $axis: null
+) {
+  position: relative;
+
+  &::#{$location} {
+    @include position(
+      $position: $position,
+      $top: $top,
+      $right: $right,
+      $bottom: $bottom,
+      $left: $left,
+      $axis: $axis
+    );
+
+    content: $content;
+
+    @content;
+  }
+}

package/src/mixins/_reset.scss

@@ -0,0 +1,70 @@
+// [참고] modern CSS reset https://piccalil.li/blog/a-modern-css-reset/
+@mixin generate-reset {
+  // Box sizing
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  // 디폴트 마진 제거
+  body,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  figure,
+  blockquote,
+  dl,
+  dd,
+  pre {
+    margin: 0;
+  }
+
+  // body 기본 높이
+  body {
+    min-height: 100vh;
+  }
+
+  // ul,ol 엘리먼트에 list role을 지닌 선택자의 디폴트 스타일 제거
+  // https://github.com/hankchizljaw/modern-css-reset/issues/30
+  ul[role="list"],
+  ol[role="list"] {
+    list-style: none;
+  }
+
+  // a 태그에 class가 없다면 링크 decoration 제거
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+
+  li img,
+  p img {
+    display: inline-block;
+    vertical-align: sub;
+  }
+
+  // input과 button 태그 폰트 상속
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+    letter-spacing: inherit;
+    word-spacing: inherit;
+  }
+
+  // iframe 테두리 제거
+  iframe {
+    border: 0;
+  }
+}

package/src/mixins/_shape.scss

@@ -0,0 +1,12 @@
+@use "../functions" as *;
+
+/// border-radius으로 모양 설정하는 믹스인
+/// @param {string} $size : `$config-shape` 맵에서 사이즈 혹은 숫자인 border 사이즈
+/// @param {boolean} $important : 스타일 우선 순위 높이기 위한 `!important` 추가 여부
+@mixin shape($size: default, $important: false) {
+  @if $important == true {
+    border-radius: shape($size) !important;
+  } @else {
+    border-radius: shape($size);
+  }
+}

package/src/mixins/_skeleton.scss

@@ -0,0 +1,89 @@
+@use 'sass:list';
+@use 'sass:math';
+@use 'sass:string';
+
+$skeleton-background: #e1e4e8;
+$shimmer: rgba(255, 255, 255, 0.6);
+
+/// 스켈레톤 콘텐츠 믹스인
+/// @param $lines : skeleton 줄의 개수 (길이는 랜덤)
+/// @param $line-height : 각 스켈레톤의 높이 (px)
+/// @param $line-gap : 각 스켈레톤 간의 간격(px)
+/// @param $background - Background color of the skeleton element
+/// @param $shimmer : 스켈레톤 빛 부분의 색
+/// @param $speed : 애니메이션 효과 속도
+/// @param $level : 믹스인을 적용할 selector "selector" 또는 "empty" 값을 가질 수 있다. Empty 선택시 empty pseudo 클래스에 적용
+/// @throws : $level이 "selector" or "empty"가 아닌 경우
+/// @example : @include skeleton(2, 16px, 8px, #dddddd, transparentize(255,255,255,.6), 2s)
+/// 모두 높이가 16px, 간격이 8px, 배경색이 #dddddd이고 빛부분 색이 transparentize(255,255,255,.6)인 스켈레톤 2 줄이 2초 속도로 애니메이션 보여줌
+@mixin skeleton(
+  $lines: 2,
+  $line-height: 24px,
+  $line-gap: 8px,
+  $background: $skeleton-background,
+  $shimmer: $shimmer,
+  $speed: 3s,
+  $level: 'selector'
+) {
+  $key: 'skeleton-' + string.slice('#{random}', 1, -1);
+  $background-images: ();
+  $background-sizes: ();
+  $background-positions: ();
+  $background-blend-modes: ();
+  $background-images: list.append(
+    $background-images,
+    linear-gradient(115deg, transparent 20%, $shimmer 50%, transparent 80%),
+    comma
+  );
+  $background-sizes: list.append($background-sizes, 50% 100%, comma);
+  $background-positions: list.append($background-positions, -60% 0, comma);
+
+  @for $i from 1 through $lines {
+    $background-images: list.append($background-images, linear-gradient($background 0%, $background 100%), comma);
+    $background-positions: list.append($background-positions, 0 (($i - 1) * ($line-height + $line-gap)));
+
+    @if $i != $lines {
+      $background-sizes: list.append($background-sizes, 100% $line-height, comma);
+    }
+
+    @if $lines == 1 {
+      $background-sizes: list.append($background-sizes, 100% $line-height, comma);
+    } @else {
+      $background-sizes: list.append($background-sizes, random(4) * 23% $line-height, comma);
+    }
+  }
+
+  $background-positions-animated: list.set-nth($background-positions, 1, 180% 0);
+
+  @keyframes skeleton-shimmer-#{$key} {
+    to {
+      background-position: $background-positions-animated;
+    }
+  }
+
+  @if $level == 'selector' {
+    & {
+      display: block;
+      width: 100%;
+      min-height: $lines * ($line-height + $line-gap) - $line-gap;
+      background-image: $background-images;
+      background-repeat: no-repeat;
+      background-position: $background-positions;
+      background-size: $background-sizes;
+      animation: skeleton-shimmer-#{$key} $speed infinite;
+    }
+  } @else if $level == 'empty' {
+    &:empty {
+      display: block;
+      width: 100%;
+      min-height: $lines * ($line-height + $line-gap) - $line-gap;
+      background-image: $background-images;
+      background-repeat: no-repeat;
+      background-position: $background-positions;
+      background-size: $background-sizes;
+      animation: skeleton-shimmer-#{$key} $speed infinite;
+    }
+  } @else {
+    @error "The argument `$level` one of the followings: `selector`, `empty`";
+  }
+}

package/src/mixins/_text.scss

@@ -0,0 +1,52 @@
+/// 여러 줄의 텍스트를 ellipsis(...)로 반환
+/// @param {number} $number-of-lines : 줄의 개수
+/// @return {mixin} : 텍스트 ellipsis 믹스인
+@mixin text-ellipsis($number-of-lines: 1) {
+  @if $number-of-lines == 1 {
+    white-space: nowrap;
+  } @else {
+    // white-space: pre-line;
+    // display: -webkit-box;
+
+    @supports (-webkit-line-clamp: $number-of-lines) {
+      -webkit-box-orient: vertical;
+      display: box;
+      -webkit-line-clamp: $number-of-lines;
+    }
+  }
+
+  // overflow: hidden;
+  white-space: pre-line;
+  display: -webkit-box;
+
+  text-overflow: ellipsis;
+}
+
+/// 긴 string break
+/// @author Chris Coyier : https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
+/// @return {mixin} : mixin word-wrap 믹스인
+@mixin word-wrap {
+  hyphens: auto;
+  word-break: break-word;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+/// 텍스트 선택 동작
+/// @param {string} $color : 선택 텍스트의 색상
+/// @param {string} $background-color : 선택한 색상의 배경 색
+/// @param {boolean} $is-direct : true 시, 현재 엘리먼트에 적용, false라면 자식 엘리먼트에 적용
+/// @return {mixin} : 텍스트 선택 동작 믹스인
+@mixin text-selection($color, $background-color, $is-direct: true) {
+  @if $is-direct {
+    &::selection {
+      color: $color;
+      background-color: $background-color;
+    }
+  } @else {
+    ::selection {
+      color: $color;
+      background-color: $background-color;
+    }
+  }
+}