@simplysm/angular 1.0.138 → 14.0.4

package/scss/commons/_mixins.scss

@@ -0,0 +1,129 @@
+@use "./variables";
+@use "sass:meta";
+@use "sass:map";
+
+@mixin writeVars($value, $prevKey) {
+  @if meta.type-of($value) == map {
+    @each $key, $val in $value {
+      @if $prevKey == "" {
+        @include writeVars($val, $key);
+      } @else {
+        @include writeVars($val, $prevKey + "-" + $key);
+      }
+    }
+  } @else {
+    --#{$prevKey}: #{$value};
+  }
+}
+
+@mixin elevation($value) {
+  @if $value == none or $value == 0 {
+    box-shadow: none;
+  } @else if $value < 0 {
+    box-shadow:
+      inset 0 0 0.1667rem var(--trans-lighter),
+      inset
+        0
+        calc(#{$value * -1} * var(--elevation-size))
+        calc(#{$value * -1} * 4 * var(--elevation-size))
+        var(--trans-lighter);
+  } @else {
+    box-shadow:
+      0
+        calc(#{$value} * var(--elevation-size))
+        calc(#{$value} * 4 * var(--elevation-size))
+        var(--trans-lighter),
+      0
+        var(--elevation-size)
+        var(--elevation-size)
+        var(--trans-lighter);
+  }
+}
+
+@mixin form-control-base() {
+  display: block;
+  padding: var(--gap-sm) var(--gap-default);
+  border: 1px solid transparent;
+
+  font-size: var(--font-size-default);
+  font-family: var(--font-family);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--line-height);
+
+  color: var(--text-trans-default);
+}
+
+@mixin help() {
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  cursor: help;
+}
+
+@mixin border-direction-variants($dir, $d) {
+  .bd#{$d} {
+    border-#{$dir}: 1px solid !important;
+  }
+
+  @each $key, $val in map.get(variables.$vars, theme) {
+    @each $key1, $val1 in $val {
+      .bd#{$d}-theme-#{$key}-#{$key1} {
+        border-#{$dir}-color: var(--theme-#{$key}-#{$key1}) !important;
+      }
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, trans) {
+    .bd#{$d}-trans-#{$key} {
+      border-#{$dir}-color: var(--trans-#{$key}) !important;
+    }
+  }
+
+  @each $key, $val in map.get(variables.$vars, border-color) {
+    .bd#{$d}-color-#{$key} {
+      border-#{$dir}-color: var(--border-color-#{$key}) !important;
+    }
+  }
+
+  .bd#{$d}-none {
+    border-#{$dir}: none !important;
+  }
+
+  .bd#{$d}-transparent {
+    border-#{$dir}-color: transparent !important;
+  }
+}
+
+@mixin flex-direction($direction, $defaultGap: null) {
+  flex-direction: $direction;
+
+  @if ($defaultGap) {
+    gap: $defaultGap;
+  }
+
+  // Chromium 84이하 / WebKit 61 (Flex Gap 미지원) .gap-*에 대한 폴백
+  @supports not (appearance: auto) {
+    @if ($defaultGap) {
+      gap: 0;
+      > * + * {
+        @if ($direction == row) {
+          margin-left: $defaultGap;
+        } @else {
+          margin-top: $defaultGap;
+        }
+      }
+    }
+
+    @each $key, $val in map.get(variables.$vars, gap) {
+      &.gap-#{$key} {
+        gap: 0;
+        > * + * {
+          @if ($direction == row) {
+            margin-left: var(--gap-#{$key});
+          } @else {
+            margin-top: var(--gap-#{$key});
+          }
+        }
+      }
+    }
+  }
+}

package/scss/commons/_styles.scss

@@ -0,0 +1,404 @@
+@use "sass:map";
+@use "sass:string";
+
+@use "variables";
+@use "mixins";
+
+@layer base {
+
+*,
+*:after,
+*:before {
+  box-sizing: border-box;
+  outline-color: var(--theme-primary-default);
+
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+}
+
+*:focus {
+  outline: none;
+}
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  background: var(--background-color);
+  color: var(--text-trans-default);
+  font-family: var(--font-family);
+  font-variant-numeric: tabular-nums;
+  font-size: var(--font-size-default);
+  line-height: var(--line-height);
+}
+
+*::-webkit-scrollbar {
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.6667rem;
+}
+
+*::-webkit-scrollbar-thumb {
+  background-color: var(--theme-gray-light);
+  border-radius: 0.6667rem;
+  background-clip: padding-box;
+  border: 2px solid transparent;
+}
+
+*::-webkit-scrollbar-track {
+  &:hover {
+    background-color: var(--theme-gray-lighter);
+    border-radius: 0.6667rem;
+    background-clip: padding-box;
+    border: 2px solid transparent;
+  }
+}
+
+*::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+hr {
+  border: none;
+  height: 1px;
+  background-color: var(--border-color-lighter);
+  width: 100%;
+  display: block;
+}
+
+p {
+  margin: 0;
+}
+
+pre,
+code {
+  font-size: var(--font-size-default);
+  line-height: var(--line-height);
+  margin: 0;
+}
+
+pre {
+  font-family: var(--font-family);
+  font-variant-numeric: tabular-nums;
+}
+
+code {
+  font-family: var(--font-family-monospace);
+  font-variant-numeric: tabular-nums;
+}
+
+small {
+  vertical-align: top;
+}
+
+sub {
+  display: inline-block;
+  overflow: visible;
+  height: 0;
+}
+
+form {
+  display: inline;
+}
+
+} // @layer base
+
+@layer utilities {
+
+//-- FONT SIZE
+
+@each $h in (h1, h2, h3, h4, h5, h6) {
+  #{$h} {
+    font-size: var(--font-size-#{$h});
+    line-height: var(--line-height);
+    margin: 0;
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, font-size) {
+  .ft-size-#{$key} {
+    font-size: var(--font-size-#{$key}) !important;
+    line-height: var(--line-height) !important;
+  }
+}
+
+//-- BACKGROUND COLOR
+
+@each $key, $val in map.get(variables.$vars, theme) {
+  @each $key1, $val1 in $val {
+    .bg-theme-#{$key}-#{$key1} {
+      background: var(--theme-#{$key}-#{$key1}) !important;
+    }
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, trans) {
+  .bg-trans-#{$key} {
+    background: var(--trans-#{$key}) !important;
+  }
+}
+
+.bg-default {
+  background: var(--background-color) !important;
+}
+
+.bg-control {
+  background: var(--control-color) !important;
+}
+
+//-- TEXT COLOR
+
+@each $key, $val in map.get(variables.$vars, text-trans) {
+  .tx-trans-#{$key} {
+    color: var(--text-trans-#{$key}) !important;
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, theme) {
+  @each $key1, $val1 in $val {
+    .tx-theme-#{$key}-#{$key1} {
+      color: var(--theme-#{$key}-#{$key1}) !important;
+    }
+  }
+}
+
+//-- TEXT STYLE
+
+.tx-line-through {
+  text-decoration: line-through;
+}
+.tx-underline {
+  text-decoration: underline;
+}
+
+//-- BORDER
+
+.bd {
+  border: 1px solid !important;
+}
+
+@each $key, $val in map.get(variables.$vars, theme) {
+  @each $key1, $val1 in $val {
+    .bd-theme-#{$key}-#{$key1} {
+      border-color: var(--theme-#{$key}-#{$key1}) !important;
+    }
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, trans) {
+  .bd-trans-#{$key} {
+    border-color: var(--trans-#{$key}) !important;
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, border-color) {
+  .bd-color-#{$key} {
+    border-color: var(--border-color-#{$key}) !important;
+  }
+}
+
+.bd-none {
+  border: none !important;
+}
+
+.bd-transparent {
+  border-color: transparent !important;
+}
+
+@each $dir in (top, right, bottom, left) {
+  $d: string.slice($dir, 1, 1);
+  @include mixins.border-direction-variants($dir, $d);
+}
+
+//-- BORDER WIDTH
+@each $key, $val in map.get(variables.$vars, gap) {
+  .bd-width-#{$key} {
+    border-width: var(--gap-#{$key}) !important;
+  }
+
+  @each $dir in (top, right, bottom, left) {
+    $d: string.slice($dir, 1, 1);
+    .bd#{$d}-width-#{$key} {
+      border-#{$dir}-width: var(--gap-#{$key}) !important;
+    }
+  }
+}
+
+//-- BORDER RADIUS
+
+$radius-dirs: (
+  t: (top-right, top-left),
+  b: (bottom-right, bottom-left),
+  l: (top-left, bottom-left),
+  r: (top-right, bottom-right),
+);
+
+@each $key, $val in map.get(variables.$vars, border-radius) {
+  .bd-radius-#{$key} {
+    border-radius: var(--border-radius-#{$key}) !important;
+  }
+
+  @each $d, $corners in $radius-dirs {
+    .bd#{$d}-radius-#{$key} {
+      @each $corner in $corners {
+        border-#{$corner}-radius: var(--border-radius-#{$key}) !important;
+      }
+    }
+  }
+}
+
+//-- PADDING, MARGIN
+
+@each $key, $val in map.get(variables.$vars, gap) {
+  .p-#{$key} {
+    padding: var(--gap-#{$key}) !important;
+  }
+
+  .m-#{$key} {
+    margin: var(--gap-#{$key}) !important;
+  }
+
+  .pv-#{$key} {
+    padding-top: var(--gap-#{$key}) !important;
+    padding-bottom: var(--gap-#{$key}) !important;
+  }
+
+  .ph-#{$key} {
+    padding-left: var(--gap-#{$key}) !important;
+    padding-right: var(--gap-#{$key}) !important;
+  }
+
+  .mv-#{$key} {
+    margin-top: var(--gap-#{$key}) !important;
+    margin-bottom: var(--gap-#{$key}) !important;
+  }
+
+  .mh-#{$key} {
+    margin-left: var(--gap-#{$key}) !important;
+    margin-right: var(--gap-#{$key}) !important;
+  }
+
+  .sw-#{$key} {
+    width: var(--gap-#{$key}) !important;
+  }
+
+  .sh-#{$key} {
+    height: var(--gap-#{$key}) !important;
+  }
+
+  @each $dir in (top, right, bottom, left) {
+    $d: string.slice($dir, 1, 1);
+
+    .p#{$d}-#{$key} {
+      padding-#{$dir}: var(--gap-#{$key}) !important;
+    }
+
+    .m#{$d}-#{$key} {
+      margin-#{$dir}: var(--gap-#{$key}) !important;
+    }
+
+    .#{$d}-#{$key} {
+      #{$dir}: var(--gap-#{$key}) !important;
+    }
+  }
+}
+
+@each $key, $val in map.get(variables.$vars, gap) {
+  @each $key1, $val1 in map.get(variables.$vars, gap) {
+    .p-#{$key}-#{$key1} {
+      padding: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
+    }
+
+    .m-#{$key}-#{$key1} {
+      margin: var(--gap-#{$key}) var(--gap-#{$key1}) !important;
+    }
+  }
+}
+
+//-- TEXT ALIGN
+
+@each $align in (left, right, center) {
+  .tx-#{$align} {
+    text-align: #{$align} !important;
+  }
+}
+
+//-- ETC
+
+.sh-topbar {
+  height: var(--topbar-height) !important;
+}
+
+.sw-sidebar {
+  width: var(--sidebar-width) !important;
+}
+
+.form-control {
+  @include mixins.form-control-base();
+}
+
+.help {
+  @include mixins.help();
+}
+
+.control-header {
+  line-height: var(--line-height);
+  font-size: var(--font-size-sm);
+  color: var(--theme-gray-default);
+}
+
+.page-header {
+  line-height: var(--line-height);
+  margin-bottom: var(--gap-sm);
+  color: var(--theme-gray-default);
+
+  padding-bottom: var(--gap-xxs);
+  font-size: var(--font-size-sm);
+}
+
+.sticky-top {
+  position: sticky !important;
+  top: 0;
+  z-index: 1;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+.fill {
+  height: 100%;
+  width: 100%;
+  overflow: auto;
+}
+
+@each $key, $val in map.get(variables.$vars, gap) {
+  .gap-#{$key} {
+    gap: var(--gap-#{$key});
+  }
+}
+
+@each $val in [start, end, center] {
+  .main-align-#{$val} {
+    justify-content: $val;
+  }
+
+  .cross-align-#{$val} {
+    align-items: $val;
+  }
+}
+
+} // @layer utilities

package/scss/commons/_theme-variables.scss

@@ -0,0 +1,23 @@
+@use "mixins";
+@use "variables";
+@use "../themes/variables-dark" as dark;
+
+@layer base, theme-variant, utilities;
+
+@layer base {
+  :root {
+    @include mixins.writeVars(variables.$colors, "color");
+    @include mixins.writeVars(variables.$vars, "");
+  }
+}
+
+@layer theme-variant {
+  .sd-theme-dark {
+    @include mixins.writeVars(dark.$vars, "");
+  }
+
+  // D7: opt-out 방식 이미지 반전
+  .sd-theme-dark img:not(.no-invert) {
+    filter: invert(1) hue-rotate(180deg);
+  }
+}

package/scss/commons/_variables.scss

@@ -0,0 +1,152 @@
+@use "sass:map";
+@use "sass:color";
+
+@function to-rgb($oklch-color) {
+  @return color.to-space($oklch-color, rgb);
+}
+
+$colors: (
+  red: to-rgb(oklch(0.704 0.191 22.216)),
+  orange: to-rgb(oklch(0.75 0.183 55.934)),
+  amber: to-rgb(oklch(0.828 0.189 84.429)),
+  yellow: to-rgb(oklch(0.852 0.199 91.936)),
+  lime: to-rgb(oklch(0.841 0.238 128.85)),
+  green: to-rgb(oklch(0.792 0.209 151.711)),
+  emerald: to-rgb(oklch(0.765 0.177 163.223)),
+  teal: to-rgb(oklch(0.777 0.152 181.912)),
+  cyan: to-rgb(oklch(0.789 0.154 211.53)),
+  sky: to-rgb(oklch(0.746 0.16 232.661)),
+  blue: to-rgb(oklch(0.707 0.165 254.624)),
+  indigo: to-rgb(oklch(0.673 0.182 276.935)),
+  violet: to-rgb(oklch(0.702 0.183 293.541)),
+  purple: to-rgb(oklch(0.714 0.203 305.504)),
+  fuchsia: to-rgb(oklch(0.74 0.238 322.16)),
+  pink: to-rgb(oklch(0.718 0.202 349.761)),
+  rose: to-rgb(oklch(0.712 0.194 13.428)),
+  slate: to-rgb(oklch(0.704 0.04 256.788)),
+  gray: to-rgb(oklch(0.707 0.022 261.325)),
+  zinc: to-rgb(oklch(0.705 0.015 286.067)),
+  neutral: to-rgb(oklch(0.708 0 0)),
+  stone: to-rgb(oklch(0.709 0.01 56.259)),
+);
+
+// D6: lightest~darkest가 실제 밝기와 일치하도록 수정
+// lightest(+90%) > lighter(+75%) > light(+60%) > default > dark(-10%) > darker(-25%) > darkest(-40%)
+@function color-map($base, $offset: 0%) {
+  @return (
+    lightest: color.scale($base, $lightness: 90% + $offset),
+    lighter: color.scale($base, $lightness: 75% + $offset),
+    light: color.scale($base, $lightness: 60% + $offset),
+    default: $base,
+    dark: color.scale($base, $lightness: -10% + $offset),
+    darker: color.scale($base, $lightness: -25% + $offset),
+    darkest: color.scale($base, $lightness: -40% + $offset)
+  );
+}
+
+// Breakpoints for media queries (CSS custom properties cannot be used in media queries)
+$breakpoint-mobile: 520px;
+$breakpoint-xxs: 800px;
+$breakpoint-xs: 1024px;
+$breakpoint-sm: 1280px;
+
+$vars: (
+  theme: (
+    "gray": color-map(map.get($colors, gray), -5%),
+    blue-gray: color-map(map.get($colors, slate)),
+    primary: color-map(map.get($colors, blue)),
+    secondary: color-map(map.get($colors, blue)),
+    info: color-map(map.get($colors, cyan)),
+    success: color-map(map.get($colors, lime)),
+    warning: color-map(map.get($colors, orange)),
+    danger: color-map(map.get($colors, red)),
+  ),
+  trans: (
+    darkest: rgba(0, 0, 0, 0.5),
+    darker: rgba(0, 0, 0, 0.4),
+    dark: rgba(0, 0, 0, 0.3),
+    default: rgba(0, 0, 0, 0.2),
+    light: rgba(0, 0, 0, 0.1),
+    lighter: rgba(0, 0, 0, 0.05),
+    lightest: rgba(0, 0, 0, 0.03),
+    rev-default: rgba(255, 255, 255, 0.1),
+    rev-light: rgba(255, 255, 255, 0.2),
+    rev-lighter: rgba(255, 255, 255, 0.3),
+    rev-lightest: rgba(255, 255, 255, 0.4),
+  ),
+  text-trans: (
+    dark: black,
+    default: rgba(0, 0, 0, 0.87),
+    light: rgba(0, 0, 0, 0.6),
+    lighter: rgba(0, 0, 0, 0.38),
+    lightest: rgba(0, 0, 0, 0.2),
+    rev-default: white,
+    rev-dark: rgba(255, 255, 255, 0.7),
+    rev-darker: rgba(255, 255, 255, 0.5),
+  ),
+  font-size: (
+    lg: 1.1667rem,
+    default: 1rem,
+    sm: 0.9167rem,
+    h1: 2rem,
+    h2: 1.5rem,
+    h3: 1.3333rem,
+    h4: 1.1667rem,
+    h5: 1rem,
+    h6: 0.9167rem,
+  ),
+  gap: (
+    xxs: 0.0833rem,
+    xs: 0.1667rem,
+    sm: 0.3333rem,
+    default: 0.5rem,
+    lg: 0.6667rem,
+    xl: 1rem,
+    xxl: 1.5rem,
+    0: 0,
+    auto: "auto",
+  ),
+  border-color: (
+    lighter: var(--theme-gray-lightest),
+    light: var(--theme-gray-lighter),
+    default: var(--theme-gray-light),
+    dark: var(--theme-gray-default),
+    darker: var(--theme-gray-dark),
+  ),
+  border-radius: (
+    xs: var(--gap-xxs),
+    sm: var(--gap-xs),
+    default: var(--gap-sm),
+    lg: var(--gap-default),
+    xl: var(--gap-lg),
+    xxl: var(--gap-xl),
+  ),
+  z-index: (
+    toast: 9999,
+    busy: 9998,
+    dropdown: 5000,
+    modal: 4000,
+    sidebar: 3000,
+  ),
+  line-height: 1.5em,
+  line-height-strip-unit: 1.5,
+  font-family: sans-serif,
+  font-family-monospace: monospace,
+  background-color: white,
+  background-rev-color: black,
+  control-color: white,
+  busy-overlay-bg: rgba(255, 255, 255, 0.6),
+  animation-duration: 0.2s,
+  elevation-size: 0.0833rem,
+  sidebar: (
+    width: 15em,
+  ),
+  topbar: (
+    height: 3em,
+  ),
+  sheet: (
+    pv: var(--gap-xs),
+    ph: var(--gap-sm),
+    bg: var(--theme-gray-lightest),
+  ),
+);