@appscode/design-system 1.1.0 → 2.0.1

package/base/utilities/_initial-variables.scss

@@ -1,215 +0,0 @@
-// Typography
-@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200;300;400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700&display=swap");
-
-$ac-family-heading: "Roboto", sans-serif;
-$ac-family-paragraph: "Roboto", sans-serif;
-
-// body font size
-$font-size-medium: 16px;
-$font-size-semi-normal: 15px;
-$font-size-normal: 14px;
-$font-size-small: 13px;
-$font-size-extra-small: 12px;
-$font-size-tiny: 11px;
-
-// Base Color
-$ac-orange: #ff8000;
-$ac-yellow: #f7ad2a;
-$ac-green: #158748;
-$ac-blue: #0aafff;
-$ac-purple: #791e94;
-$ac-red: #ff3729;
-
-// Products Color
-$voyager-primary: #2d2a78;
-$guard-primary: #d84e27;
-$kubeci-primary: #2c3e50;
-$kubed-primary: #1c7bd4;
-$kubedb-primary: #4d4dcb;
-$kubesheild-primary: #2516c7;
-$kubevault-primary: #326ce5;
-$pharmer-primary: #326de6;
-$searchlight-primary: #111738;
-$servicebroker-primary: #29b4a2;
-$stash-primary: #5e2dea;
-$swift-primary: #3f51b6;
-
-// Colors Primary
-// root colors
-:root {
-  --hsl-hue: 208;
-  --hsl-saturation: 77%;
-  --hsl-lightness: 42%;
-  --contrast-threshold: 60%;
-  --ac-bg: #ffffff;
-  --ac-white: #ffffff;
-  --ac-full-white: #ffffff;
-  --ac-gray-dark: #5f5f5f;
-  --ac-gray-light: #8d8d8d;
-  --ac-gray-lightest: #d1d1d1;
-  --ac-white-light: #e7e7e7;
-  --ac-white-lighter: #f2f5f8;
-  --ac-white-lightest: #f8f9fb;
-
-  --ac-black: #000000;
-  --ac-color-text-90: #323232;
-  --ac-link-black: #32325d;
-  --ac-gray-darker: #494949;
-  --ac-gray: #767676;
-  --ac-gray-lighter: #a4a4a4;
-  --ac-white-text: #b4c0cc;
-
-  // theme color
-  --dark-bg: #21272e;
-  --dark-bg-light: #2e323c;
-
-  --ac-blue-light: #eceff4;
-  --ac-bg-light-gray: #f4f6f9;
-  --table-header: #e4e8ef;
-  --ac-label-text: #a6abbd;
-
-  --font-hsl-hue: 0;
-  --font-hsl-saturation: 0%;
-  --font-hsl-lightness: 11%;
-
-  --ac-primary: hsla(
-    var(--hsl-hue),
-    var(--hsl-saturation),
-    var(--hsl-lightness),
-    1
-  );
-
-  --ac-text: hsla(
-    var(--font-hsl-hue),
-    calc(var(--font-hsl-saturation) + 10%),
-    calc(var(--font-hsl-lightness) + 10%),
-    1
-  );
-  --ac-text-heading: hsla(
-    var(--font-hsl-hue),
-    var(--font-hsl-saturation),
-    var(--font-hsl-lightness),
-    1
-  );
-  --ac-color-value: hsl(
-    var(--font-hsl-hue),
-    var(--font-hsl-saturation),
-    calc(var(--font-hsl-lightness) + 25%)
-  );
-}
-
-$ac-bg: var(--ac-bg);
-$ac-primary: var(--ac-primary);
-$ac-color-value: var(--ac-color-value);
-
-// Colors
-$ac-black: var(--ac-black);
-$ac-color-text-90: var(--ac-color-text-90);
-$ac-link-black: var(--ac-link-black);
-$ac-gray-darker: var(--ac-gray-darker);
-$ac-gray-dark: var(--ac-gray-dark);
-$ac-gray: var(--ac-gray);
-$ac-gray-light: var(--ac-gray-light);
-$ac-gray-lighter: var(--ac-gray-lighter);
-$ac-gray-lightest: var(--ac-gray-lightest);
-$ac-white-light: var(--ac-white-light);
-$ac-white-lighter: var(--ac-white-lighter);
-$ac-white-lightest: var(--ac-white-lightest);
-$ac-white: var(--ac-white);
-$ac-full-white: var(--ac-full-white);
-
-$ac-blue-light: var(--ac-blue-light);
-$ac-bg-light-gray: var(--ac-bg-light-gray);
-$table-header: var(--table-header);
-$ac-label-text: var(--ac-label-text);
-
-// for dark theme CSS
-$dark-bg: var(--dark-bg);
-$dark-bg-light: var(--dark-bg-light);
-
-/* Deafult Margin & Padding view-height & view-width */
-@for $i from 0 through 100 {
-  .m-#{$i} {
-    margin: #{$i}px !important;
-  }
-
-  .mt-#{$i} {
-    margin-top: #{$i}px !important;
-  }
-
-  .mb-#{$i} {
-    margin-bottom: #{$i}px !important;
-  }
-
-  .ml-#{$i} {
-    margin-left: #{$i}px !important;
-  }
-
-  .mr-#{$i} {
-    margin-right: #{$i}px !important;
-  }
-
-  .p-#{$i} {
-    padding: #{$i}px !important;
-  }
-
-  .pt-#{$i} {
-    padding-top: #{$i}px !important;
-  }
-
-  .pb-#{$i} {
-    padding-bottom: #{$i}px !important;
-  }
-
-  .pl-#{$i} {
-    padding-left: #{$i}px !important;
-  }
-
-  .pr-#{$i} {
-    padding-right: #{$i}px !important;
-  }
-
-  .vh-#{$i} {
-    height: #{$i}vh !important;
-  }
-
-  .vw-#{$i} {
-    width: #{$i}vw !important;
-  }
-
-  .font-size-#{$i} {
-    font-size: #{$i}px !important;
-  }
-}
-
-.mx-auto {
-  margin: 0 auto;
-}
-.mr-auto{
-  margin-right: auto;
-}
-.ml-auto{
-  margin-left: auto;
-}
-
-/* Deafult height & widht */
-@for $i from 0 through 300 {
-  .height-#{$i} {
-    height: #{$i}px !important;
-  }
-
-  .width-#{$i} {
-    width: #{$i}px !important;
-  }
-}
-
-/* Deafult z-index and font-weight*/
-@for $i from 0 through 10 {
-  .z-index-#{$i} {
-    z-index: #{$i} !important;
-  }
-
-  .font-weight-#{$i*100} {
-    font-weight: #{$i * 100} !important;
-  }
-}

package/base/utilities/dark-theme.scss

@@ -1,26 +0,0 @@
-$dark-bg: var(--dark-bg);
-$dark-bg-light: var(--dark-bg-light);
-
-.is-dark-theme {
-  --ac-bg: var(--dark-bg);
-  --ac-white: #21272e;
-  --ac-link-black: #6969c0;
-  --ac-black: var(--ac-white-text);
-  --ac-text-heading: var(--ac-white-text);
-  --ac-text: #98a6b4;
-  --ac-blue-light: #2e323c;
-  --ac-gray-darker: #a6a6a6;
-  --ac-gray-light: #424242;
-  --ac-gray-lightest: #777777;
-  --ac-white-light: #3f3f3f;
-  --ac-white-lighter: #2e323c;
-  --ac-white-lightest: #1f2229;
-  --ac-label-text: #8c8c8c;
-  --ac-bg-light-gray: #252830;
-
-  --ac-color-value: hsl(
-    var(--font-hsl-hue),
-    var(--font-hsl-saturation),
-    calc(var(--font-hsl-lightness) + 60%)
-  );
-}