amotify 0.0.5 → 0.0.7

package/src/@styles/@variables/styleSet.scss

@@ -0,0 +1,38 @@
+@use '@uniVar' as *;
+
+@mixin OriginScrollBar {
+  overflow: auto;
+  &::-webkit-scrollbar,
+  &::-webkit-scrollbar-track {
+    width: $unit2_3 !important;
+    height: $unit2_3 !important;
+    background-color: $color-layer3;
+  }
+  &::-webkit-scrollbar-thumb {
+    width: $unit2_3 !important;
+    height: $unit2_3 !important;
+    background-color: cAlfa(.75) !important;
+  }
+}
+@mixin absoluteCovered {
+  position: absolute;
+  content: '';
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+@mixin textEllipsis {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+@mixin pureTable {
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0px;
+}
+@mixin DisableduserSelect {
+  user-select: none;
+  -webkit-user-select: none;
+}

package/src/@styles/@variables/themeColor.scss

@@ -0,0 +1,71 @@
+$ThemeColors: ( // ThemeColors
+    comun : (h:237, s:076%, l:058%, rgb:rgb(67, 75, 229)),
+    leaf : (h:159, s:078%, l:038%, rgb:rgb(21, 172, 120)),
+    heart : (h:002, s:081%, l:063%, rgb:rgb(237, 089, 084)),
+    droplet : (h:215, s:082%, l:051%, rgb:rgb(028, 113, 233)),
+    // Order
+    brick : (h:351, s:080%, l:039%, rgb:rgb(179, 020, 044)),
+    flower : (h:350, s:078%, l:075%, rgb:rgb(241, 142, 158)),
+    lip : (h:340, s:069%, l:049%, rgb:rgb(211, 39, 96)),
+    wine : (h:317, s:041%, l:030%, rgb:rgb(108, 045, 090)),
+    theater : (h:301, s:088%, l:049%, rgb:rgb(235, 15, 231)),
+    bat : (h:272, s:081%, l:021%, rgb:rgb(056, 010, 097)),
+    poizon : (h:268, s:058%, l:050%, rgb:rgb(123, 054, 201)),
+    eggplant : (h:264, s:100%, l:062%, rgb:rgb(139, 61, 255)),
+    ufo : (h:253, s:081%, l:058%, rgb:rgb(099, 061, 235)),
+    alien : (h:252, s:092%, l:057%, rgb:rgb(084, 043, 245)),
+    tombstone : (h:251, s:014%, l:070%, rgb:rgb(173, 169, 190)),
+    ninja : (h:242, s:100%, l:068%, rgb:rgb(97, 92, 255)),
+    moon : (h:240, s:016%, l:024%, rgb:rgb(051, 051, 071)),
+    rain : (h:240, s:032%, l:054%, rgb:rgb(100, 100, 175)),
+    unicorn : (h:238, s:070%, l:074%, rgb:rgb(142, 145, 235)),
+    axe : (h:226, s:022%, l:035%, rgb:rgb(070, 079, 109)),
+    gem : (h:221, s:085%, l:043%, rgb:rgb(016, 075, 203)),
+    soap : (h:217, s:085%, l:032%, rgb:rgb(012, 065, 151)),
+    drizzle : (h:213, s:033%, l:068%, rgb:rgb(146, 171, 200)),
+    building : (h:204, s:003%, l:072%, rgb:rgb(181, 184, 186)),
+    fish : (h:194, s:097%, l:034%, rgb:rgb(3, 132, 171)),
+    icicles : (h:191, s:061%, l:058%, rgb:rgb(083, 189, 213)),
+    water : (h:187, s:030%, l:054%, rgb:rgb(103, 165, 173)),
+    tree1 : (h:186, s:085%, l:023%, rgb:rgb(009, 099, 109)),
+    tree2 : (h:185, s:097%, l:034%, rgb:rgb(003, 157, 171)),
+    tree3 : (h:183, s:086%, l:019%, rgb:rgb(007, 086, 090)),
+    battery : (h:170, s:090%, l:039%, rgb:rgb(010, 189, 159)),
+    seedle : (h:145, s:094%, l:040%, rgb:rgb(006, 198, 086)),
+    greenTea : (h:144, s:043%, l:041%, rgb:rgb(060, 150, 096)),
+    oak : (h:101, s:024%, l:066%, rgb:rgb(161, 189, 147)),
+    salad : (h:068, s:090%, l:043%, rgb:rgb(182, 208, 011)),
+    cloudy : (h:060, s:005%, l:079%, rgb:rgb(204, 204, 199)),
+    lemon : (h:053, s:078%, l:070%, rgb:rgb(238, 224, 119)),
+    angel : (h:047, s:100%, l:050%, rgb:rgb(255, 200, 000)),
+    parasol : (h:042, s:086%, l:070%, rgb:rgb(244, 205, 113)),
+    pizza : (h:040, s:092%, l:052%, rgb:rgb(245, 170, 020)),
+    thunder : (h:040, s:070%, l:057%, rgb:rgb(222, 171, 069)),
+    latte : (h:033, s:051%, l:073%, rgb:rgb(221, 190, 151)),
+    island : (h:027, s:091%, l:055%, rgb:rgb(245, 130, 036)),
+    shovel : (h:019, s:029%, l:037%, rgb:rgb(122, 084, 067)),
+    coffee : (h:018, s:033%, l:024%, rgb:rgb(081, 053, 041)),
+    carrot : (h:014, s:084%, l:059%, rgb:rgb(238, 104, 063)),
+    cactus : (h:008, s:017%, l:062%, rgb:rgb(175, 146, 142)),
+    volcano : (h:006, s:084%, l:048%, rgb:rgb(225, 040, 020)),
+    choco : (h:002, s:055%, l:057%, rgb:rgb(206, 089, 085)),
+    industry : (h:000, s:000%, l:050%, rgb:rgb(128, 128, 128)),
+    gun : (h:000, s:000%, l:037%, rgb:rgb(094, 094, 094)),
+    galaxy : (h:000, s:000%, l:005%, rgb:rgb(013, 013, 013)),
+    // Brand Color
+    line:(h:120, s:100%, l:37%),
+    twitter:(h:203, s:89%, l:52%),
+    amazon:(h:36, s:100%, l:50%),
+    facebook:(h:220, s:46%, l:48%),
+    android:(h:101, s:47%, l:55%),
+    slackBlue:(h:194, s:86%, l:58%),
+    slackGreen:(h:155, s:60%, l:45%),
+    slackRed:(h:341, s:76%, l:50%),
+    slackYellow:(h:42, s:83%, l:55%),
+    slackBase:(h:299, s:56%, l:19%),
+    googleBlue:(h:217, s:89%, l:61%),
+    googleGreen:(h:151, s:83%, l:34%),
+    googleYellow:(h:44, s:100%, l:48%),
+    googleRed:(h:5, s:69%, l:54%),
+  );
+$ThemeColorKeys: map-keys($ThemeColors );

package/src/@styles/@variables/var.scss

@@ -0,0 +1,171 @@
+@use './themeColor' as themeColor;
+:root {
+  /* theme colors */
+  @each $key in themeColor.$ThemeColorKeys {
+    $obj: map-get(themeColor.$ThemeColors, $key );
+    $i : index(themeColor.$ThemeColorKeys, $key ) - 1;
+    $h : map-get($obj, h);
+    $s : map-get($obj, s);
+    $l : map-get($obj, l);
+    --cH_#{ $key } : #{ $h };
+    --cS_#{ $key } : #{ $s };
+    --cL_#{ $key } : #{ $l };
+    --color_#{ $key }-hsl : #{ $h }, #{ $s }, #{ $l };
+  }
+  --cH : 0;
+  --cS : 0%;
+  --cL : 0%;
+  --color-theme-hsl: 0, 0%, 0%;
+  --color-theme-opacity-high: .5;
+  --color-theme-opacity-middle: .25;
+  --color-theme-opacity-low: .15;
+  --color-theme-opacity-few: .085;
+  /* sub colors */
+  --color-positive-rgb: 54, 194, 124;
+  --color-negative-rgb: 246, 70, 93;
+  --color-warning-rgb: 248, 150, 0;
+  --color-dark-rgb: 69, 81, 92;
+  //
+  --color-positive: rgba(var(--color-positive-rgb), 1);
+  --color-negative: rgba(var(--color-negative-rgb), 1);
+  --color-warning: rgba(var(--color-warning-rgb), 1);
+  --color-dark: rgba(var(--color-dark-rgb), 1);
+  /* layer colors */
+  --color-layer1-hsl: var(--cH), 6%, 99%;
+  --color-layer2-hsl: var(--cH), 6%, 96%;
+  --color-layer3-hsl: var(--cH), 6%, 92%;
+  --color-layer4-hsl: var(--cH), 8%, 89%;
+  --color-layer5-hsl: var(--cH), 10%, 85%;
+  --color-layer6-hsl: var(--cH), 10%, 75%;
+  //
+  --color-base-rgb: 252, 252, 252;
+  --color-cloud-rgb: 241, 243, 248;
+  --color-monoPrime-rgb: 0, 0, 0;
+  --color-monoSecond-rgb: 255, 255, 255;
+  --font-color-logoTitle: hsl(218, 45%, 22%);
+  --sc: 60, 64, 67;
+  /* font colors */
+  --font-color1-rgb: 0, 0, 0;
+  --font-color2-rgb: 51, 51, 51;
+  --font-color3-rgb: 118, 125, 137;
+  --font-color4-rgb: 152, 158, 167;
+  --font-color5-rgb: 189, 194, 200;
+  --font-color6-rgb: 210, 210, 220;
+  /* font sizes */
+  --font-size0: 10px;
+  --font-size1: 12px;
+  --font-size2: 14px;
+  --font-size3: 16px;
+  --font-size4: 20px;
+  --font-size5: 24px;
+  --font-size6: 32px;
+  --font-size7: 44px;
+  --font-size8: 60px;
+  /* border colors */
+  --border-color-thin: hsl(220, 9%, 92%);
+  --border-color-normal: hsl(220, 9%, 87%);
+  /* border radius */
+  --border-radius1: 4px;
+  --border-radius2: 6px;
+  --border-radius3: 8px;
+  --border-radius4: 12px;
+  --border-radius5: 18px;
+  --border-radius6: 24px;
+  --border-radius7: 30px;
+  /* animation */
+  --animation-time1: .1s;
+  --animation-time2: .15s;
+  --animation-time3: .25s;
+  --animation-time4: .4s;
+
+  --animation-style1: cubic-bezier(.35, .46, 0, .99);
+  --animation-style2: cubic-bezier(.1, .85, .1, .85);
+  // safe area
+  --safe-area-top: env(safe-area-inset-top);
+  --safe-area-bottom: env(safe-area-inset-bottom);
+  /* unit size */
+  --grid-unit: 12px;
+  /* view height */
+  --viewHeight: 100vh;
+  @supports (-webkit-touch-callout: none) {
+    --viewHeight: -webkit-fill-available;
+  }
+  --sideNavHeight : 0px;
+  --topNavHeight : 0px;
+  --contentHeight : 0px;
+  --topBase : 0px;
+}
+@mixin DARK {
+  --color-theme-opacity-high: .45;
+  --color-theme-opacity-middle: .3;
+  --color-theme-opacity-low: .2;
+  --color-theme-opacity-few: .1;
+  //
+  --color-dark-rgb: 46, 51, 54;
+  --color-cloud-rgb: 43, 44, 45;
+  --color-base-rgb: 27, 28, 28;
+  --color-monoPrime-rgb: 255, 255, 255;
+  --color-monoSecond-rgb: 0, 0, 0;
+  //
+  --font-color1-rgb: 250, 251, 252;
+  --font-color2-rgb: 205, 210, 220;
+  --font-color3-rgb: 165, 170, 180;
+  --font-color4-rgb: 135, 140, 150;
+  --font-color5-rgb: 95, 100, 110;
+  --font-color6-rgb: 65, 70, 80;
+  --font-color-logoTitle: rgb(210, 220, 240);
+  --sc: 1, 2, 3;
+  //
+  --border-color-thin: hsl(180, 5%, 25%);
+  --border-color-normal: hsl(180, 5%, 38%);
+}
+@mixin DarkLayer {
+  --color-layer1-hsl: var(--cH), 5%, 10%;
+  --color-layer2-hsl: var(--cH), 5%, 13.3%;
+  --color-layer3-hsl: var(--cH), 5%, 16.6%;
+  --color-layer4-hsl: var(--cH), 5%, 20%;
+  --color-layer5-hsl: var(--cH), 5%, 25%;
+  --color-layer6-hsl: var(--cH), 5%, 30%;
+}
+@mixin DIMLayer {
+  --color-layer1-hsl: var(--cH), 8%, 20%;
+  --color-layer2-hsl: var(--cH), 8%, 23.3%;
+  --color-layer3-hsl: var(--cH), 8%, 26.6%;
+  --color-layer4-hsl: var(--cH), 8%, 30%;
+  --color-layer5-hsl: var(--cH), 8%, 35%;
+  --color-layer6-hsl: var(--cH), 8%, 40%;
+}
+.bds {
+  &TC {
+    @each $key in themeColor.$ThemeColorKeys {
+      &_#{ $key } {
+        --cH : var(--cH_#{ $key });
+        --cS : var(--cS_#{ $key });
+        --cL : var(--cL_#{ $key });
+        --color-theme-hsl : var(--color_#{ $key }-hsl);
+      }
+    }
+  }
+  &TN {
+    &flat {
+      --border-color-thin: hsl(220, 9%, 94%);
+      --border-color-normal: hsl(220, 9%, 90%);
+    }
+  }
+  &DM_ {
+    &dark {
+      @include DARK();
+      @include DarkLayer();
+    }
+    &dim {
+      @include DARK();
+      @include DIMLayer();
+    }
+    &auto {
+      @media (prefers-color-scheme: dark) {
+        @include DARK();
+        @include DarkLayer();
+      }
+    }
+  }
+}