kdutify 0.16.9-rc.0

package/src/stylus/settings/_colors.styl

@@ -0,0 +1,339 @@
+$red = {
+  "base":       #F44336,
+  "lighten-5":  #FFEBEE,
+  "lighten-4":  #FFCDD2,
+  "lighten-3":  #EF9A9A,
+  "lighten-2":  #E57373,
+  "lighten-1":  #EF5350,
+  "darken-1":   #E53935,
+  "darken-2":   #D32F2F,
+  "darken-3":   #C62828,
+  "darken-4":   #B71C1C,
+  "accent-1":   #FF8A80,
+  "accent-2":   #FF5252,
+  "accent-3":   #FF1744,
+  "accent-4":   #D50000
+}
+
+$pink = {
+  "base":       #e91e63,
+  "lighten-5":  #fce4ec,
+  "lighten-4":  #f8bbd0,
+  "lighten-3":  #f48fb1,
+  "lighten-2":  #f06292,
+  "lighten-1":  #ec407a,
+  "darken-1":   #d81b60,
+  "darken-2":   #c2185b,
+  "darken-3":   #ad1457,
+  "darken-4":   #880e4f,
+  "accent-1":   #ff80ab,
+  "accent-2":   #ff4081,
+  "accent-3":   #f50057,
+  "accent-4":   #c51162
+}
+
+$purple = {
+  "base":       #9c27b0,
+  "lighten-5":  #f3e5f5,
+  "lighten-4":  #e1bee7,
+  "lighten-3":  #ce93d8,
+  "lighten-2":  #ba68c8,
+  "lighten-1":  #ab47bc,
+  "darken-1":   #8e24aa,
+  "darken-2":   #7b1fa2,
+  "darken-3":   #6a1b9a,
+  "darken-4":   #4a148c,
+  "accent-1":   #ea80fc,
+  "accent-2":   #e040fb,
+  "accent-3":   #d500f9,
+  "accent-4":   #aa00ff
+}
+
+$deep-purple = {
+  "base":       #673ab7,
+  "lighten-5":  #ede7f6,
+  "lighten-4":  #d1c4e9,
+  "lighten-3":  #b39ddb,
+  "lighten-2":  #9575cd,
+  "lighten-1":  #7e57c2,
+  "darken-1":   #5e35b1,
+  "darken-2":   #512da8,
+  "darken-3":   #4527a0,
+  "darken-4":   #311b92,
+  "accent-1":   #b388ff,
+  "accent-2":   #7c4dff,
+  "accent-3":   #651fff,
+  "accent-4":   #6200ea
+}
+
+$indigo = {
+  "base":       #3f51b5,
+  "lighten-5":  #e8eaf6,
+  "lighten-4":  #c5cae9,
+  "lighten-3":  #9fa8da,
+  "lighten-2":  #7986cb,
+  "lighten-1":  #5c6bc0,
+  "darken-1":   #3949ab,
+  "darken-2":   #303f9f,
+  "darken-3":   #283593,
+  "darken-4":   #1a237e,
+  "accent-1":   #8c9eff,
+  "accent-2":   #536dfe,
+  "accent-3":   #3d5afe,
+  "accent-4":   #304ffe
+}
+
+$blue = {
+  "base":       #2196F3,
+  "lighten-5":  #E3F2FD,
+  "lighten-4":  #BBDEFB,
+  "lighten-3":  #90CAF9,
+  "lighten-2":  #64B5F6,
+  "lighten-1":  #42A5F5,
+  "darken-1":   #1E88E5,
+  "darken-2":   #1976D2,
+  "darken-3":   #1565C0,
+  "darken-4":   #0D47A1,
+  "accent-1":   #82B1FF,
+  "accent-2":   #448AFF,
+  "accent-3":   #2979FF,
+  "accent-4":   #2962FF
+}
+
+$light-blue = {
+  "base":       #03a9f4,
+  "lighten-5":  #e1f5fe,
+  "lighten-4":  #b3e5fc,
+  "lighten-3":  #81d4fa,
+  "lighten-2":  #4fc3f7,
+  "lighten-1":  #29b6f6,
+  "darken-1":   #039be5,
+  "darken-2":   #0288d1,
+  "darken-3":   #0277bd,
+  "darken-4":   #01579b,
+  "accent-1":   #80d8ff,
+  "accent-2":   #40c4ff,
+  "accent-3":   #00b0ff,
+  "accent-4":   #0091ea
+}
+
+$cyan = {
+  "base":       #00bcd4,
+  "lighten-5":  #e0f7fa,
+  "lighten-4":  #b2ebf2,
+  "lighten-3":  #80deea,
+  "lighten-2":  #4dd0e1,
+  "lighten-1":  #26c6da,
+  "darken-1":   #00acc1,
+  "darken-2":   #0097a7,
+  "darken-3":   #00838f,
+  "darken-4":   #006064,
+  "accent-1":   #84ffff,
+  "accent-2":   #18ffff,
+  "accent-3":   #00e5ff,
+  "accent-4":   #00b8d4
+}
+
+$teal = {
+  "base":       #009688,
+  "lighten-5":  #e0f2f1,
+  "lighten-4":  #b2dfdb,
+  "lighten-3":  #80cbc4,
+  "lighten-2":  #4db6ac,
+  "lighten-1":  #26a69a,
+  "darken-1":   #00897b,
+  "darken-2":   #00796b,
+  "darken-3":   #00695c,
+  "darken-4":   #004d40,
+  "accent-1":   #a7ffeb,
+  "accent-2":   #64ffda,
+  "accent-3":   #1de9b6,
+  "accent-4":   #00bfa5
+}
+
+$green = {
+  "base":       #4CAF50,
+  "lighten-5":  #E8F5E9,
+  "lighten-4":  #C8E6C9,
+  "lighten-3":  #A5D6A7,
+  "lighten-2":  #81C784,
+  "lighten-1":  #66BB6A,
+  "darken-1":   #43A047,
+  "darken-2":   #388E3C,
+  "darken-3":   #2E7D32,
+  "darken-4":   #1B5E20,
+  "accent-1":   #B9F6CA,
+  "accent-2":   #69F0AE,
+  "accent-3":   #00E676,
+  "accent-4":   #00C853
+}
+
+$light-green = {
+  "base":       #8bc34a,
+  "lighten-5":  #f1f8e9,
+  "lighten-4":  #dcedc8,
+  "lighten-3":  #c5e1a5,
+  "lighten-2":  #aed581,
+  "lighten-1":  #9ccc65,
+  "darken-1":   #7cb342,
+  "darken-2":   #689f38,
+  "darken-3":   #558b2f,
+  "darken-4":   #33691e,
+  "accent-1":   #ccff90,
+  "accent-2":   #b2ff59,
+  "accent-3":   #76ff03,
+  "accent-4":   #64dd17
+}
+
+$lime = {
+  "base":       #cddc39,
+  "lighten-5":  #f9fbe7,
+  "lighten-4":  #f0f4c3,
+  "lighten-3":  #e6ee9c,
+  "lighten-2":  #dce775,
+  "lighten-1":  #d4e157,
+  "darken-1":   #c0ca33,
+  "darken-2":   #afb42b,
+  "darken-3":   #9e9d24,
+  "darken-4":   #827717,
+  "accent-1":   #f4ff81,
+  "accent-2":   #eeff41,
+  "accent-3":   #c6ff00,
+  "accent-4":   #aeea00
+}
+
+$yellow = {
+  "base":       #ffeb3b,
+  "lighten-5":  #fffde7,
+  "lighten-4":  #fff9c4,
+  "lighten-3":  #fff59d,
+  "lighten-2":  #fff176,
+  "lighten-1":  #ffee58,
+  "darken-1":   #fdd835,
+  "darken-2":   #fbc02d,
+  "darken-3":   #f9a825,
+  "darken-4":   #f57f17,
+  "accent-1":   #ffff8d,
+  "accent-2":   #ffff00,
+  "accent-3":   #ffea00,
+  "accent-4":   #ffd600
+}
+
+$amber = {
+  "base":       #ffc107,
+  "lighten-5":  #fff8e1,
+  "lighten-4":  #ffecb3,
+  "lighten-3":  #ffe082,
+  "lighten-2":  #ffd54f,
+  "lighten-1":  #ffca28,
+  "darken-1":   #ffb300,
+  "darken-2":   #ffa000,
+  "darken-3":   #ff8f00,
+  "darken-4":   #ff6f00,
+  "accent-1":   #ffe57f,
+  "accent-2":   #ffd740,
+  "accent-3":   #ffc400,
+  "accent-4":   #ffab00
+}
+
+$orange = {
+  "base":       #ff9800,
+  "lighten-5":  #fff3e0,
+  "lighten-4":  #ffe0b2,
+  "lighten-3":  #ffcc80,
+  "lighten-2":  #ffb74d,
+  "lighten-1":  #ffa726,
+  "darken-1":   #fb8c00,
+  "darken-2":   #f57c00,
+  "darken-3":   #ef6c00,
+  "darken-4":   #e65100,
+  "accent-1":   #ffd180,
+  "accent-2":   #ffab40,
+  "accent-3":   #ff9100,
+  "accent-4":   #ff6d00
+}
+
+$deep-orange = {
+  "base":       #ff5722,
+  "lighten-5":  #fbe9e7,
+  "lighten-4":  #ffccbc,
+  "lighten-3":  #ffab91,
+  "lighten-2":  #ff8a65,
+  "lighten-1":  #ff7043,
+  "darken-1":   #f4511e,
+  "darken-2":   #e64a19,
+  "darken-3":   #d84315,
+  "darken-4":   #bf360c,
+  "accent-1":   #ff9e80,
+  "accent-2":   #ff6e40,
+  "accent-3":   #ff3d00,
+  "accent-4":   #dd2c00
+}
+
+$brown = {
+  "base":       #795548,
+  "lighten-5":  #efebe9,
+  "lighten-4":  #d7ccc8,
+  "lighten-3":  #bcaaa4,
+  "lighten-2":  #a1887f,
+  "lighten-1":  #8d6e63,
+  "darken-1":   #6d4c41,
+  "darken-2":   #5d4037,
+  "darken-3":   #4e342e,
+  "darken-4":   #3e2723
+}
+
+$blue-grey = {
+  "base":       #607d8b,
+  "lighten-5":  #eceff1,
+  "lighten-4":  #cfd8dc,
+  "lighten-3":  #b0bec5,
+  "lighten-2":  #90a4ae,
+  "lighten-1":  #78909c,
+  "darken-1":   #546e7a,
+  "darken-2":   #455a64,
+  "darken-3":   #37474f,
+  "darken-4":   #263238
+}
+
+$grey = {
+  "base":       #9e9e9e,
+  "lighten-5":  #fafafa,
+  "lighten-4":  #f5f5f5,
+  "lighten-3":  #eeeeee,
+  "lighten-2":  #e0e0e0,
+  "lighten-1":  #bdbdbd,
+  "darken-1":   #757575,
+  "darken-2":   #616161,
+  "darken-3":   #424242,
+  "darken-4":   #212121
+}
+
+$shades = {
+  "black":        #000000,
+  "white":        #FFFFFF,
+  "transparent":  transparent
+}
+
+$colors = {
+  "red": $red,
+  "pink": $pink,
+  "purple": $purple,
+  "deep-purple": $deep-purple,
+  "indigo": $indigo,
+  "blue": $blue,
+  "light-blue": $light-blue,
+  "cyan": $cyan,
+  "teal": $teal,
+  "green": $green,
+  "light-green": $light-green,
+  "lime": $lime,
+  "yellow": $yellow,
+  "amber": $amber,
+  "orange": $orange,
+  "deep-orange": $deep-orange,
+  "brown": $brown,
+  "blue-grey": $blue-grey,
+  "grey": $grey,
+  "shades": $shades
+}

package/src/stylus/settings/_elevations.styl

@@ -0,0 +1,111 @@
+shadow-key-umbra-opacity = rgba(0,0,0, .2)
+shadow-key-penumbra-opacity = rgba(0,0,0, .14)
+shadow-ambient-shadow-opacity = rgba(0,0,0, .12)
+
+elevation-0dp = 0 0px 0px shadow-key-umbra-opacity,
+                0 0px 0px shadow-key-penumbra-opacity,
+                0 0px 0px shadow-ambient-shadow-opacity
+
+elevation-1dp = 0 1px 3px shadow-key-umbra-opacity,
+                0 1px 1px shadow-key-penumbra-opacity,
+                0 2px 1px -1px shadow-ambient-shadow-opacity
+
+elevation-2dp = 0 1px 5px shadow-key-umbra-opacity,
+                0 2px 2px shadow-key-penumbra-opacity,
+                0 3px 1px -2px shadow-ambient-shadow-opacity
+
+elevation-3dp = 0 1px 8px shadow-key-umbra-opacity,
+                0 3px 4px shadow-key-penumbra-opacity,
+                0 3px 3px -2px shadow-ambient-shadow-opacity
+
+elevation-4dp = 0 2px 4px -1px shadow-key-umbra-opacity,
+                0 4px 5px shadow-key-penumbra-opacity,
+                0 1px 10px shadow-ambient-shadow-opacity
+
+elevation-5dp = 0 3px 5px -1px shadow-key-umbra-opacity,
+                0 5px 8px shadow-key-penumbra-opacity,
+                0 1px 14px shadow-ambient-shadow-opacity
+
+elevation-6dp = 0 3px 5px -1px shadow-key-umbra-opacity,
+                0 6px 10px shadow-key-penumbra-opacity,
+                0 1px 18px shadow-ambient-shadow-opacity
+
+elevation-7dp = 0 4px 5px -2px shadow-key-umbra-opacity,
+                0 7px 10px 1px shadow-key-penumbra-opacity,
+                0 2px 16px 1px shadow-ambient-shadow-opacity
+
+elevation-8dp = 0 5px 5px -3px shadow-key-umbra-opacity,
+                0 8px 10px 1px shadow-key-penumbra-opacity,
+                0 3px 14px 2px shadow-ambient-shadow-opacity
+
+elevation-9dp = 0 5px 6px -3px shadow-key-umbra-opacity,
+                0 9px 12px 1px shadow-key-penumbra-opacity,
+                0 3px 16px 2px shadow-ambient-shadow-opacity
+
+elevation-10dp = 0 6px 6px -3px shadow-key-umbra-opacity,
+                 0 10px 14px 1px shadow-key-penumbra-opacity,
+                 0 4px 18px 3px shadow-ambient-shadow-opacity
+
+elevation-11dp = 0 6px 7px -4px shadow-key-umbra-opacity,
+                 0 11px 15px 1px shadow-key-penumbra-opacity,
+                 0 4px 20px 3px shadow-ambient-shadow-opacity
+
+elevation-12dp = 0 7px 8px -4px shadow-key-umbra-opacity,
+                 0 12px 17px 2px shadow-key-penumbra-opacity,
+                 0 5px 22px 4px shadow-ambient-shadow-opacity
+
+elevation-13dp = 0 7px 8px -4px shadow-key-umbra-opacity,
+                 0 13px 19px 2px shadow-key-penumbra-opacity,
+                 0 5px 24px 4px shadow-ambient-shadow-opacity
+
+elevation-14dp = 0 7px 9px -4px shadow-key-umbra-opacity,
+                 0 14px 21px 2px shadow-key-penumbra-opacity,
+                 0 5px 26px 4px shadow-ambient-shadow-opacity
+
+elevation-15dp = 0 8px 9px -5px shadow-key-umbra-opacity,
+                 0 15px 22px 2px shadow-key-penumbra-opacity,
+                 0 6px 28px 5px shadow-ambient-shadow-opacity
+
+elevation-16dp = 0 8px 10px -5px shadow-key-umbra-opacity,
+                 0 16px 24px 2px shadow-key-penumbra-opacity,
+                 0 6px 30px 5px shadow-ambient-shadow-opacity
+
+elevation-17dp = 0 8px 11px -5px shadow-key-umbra-opacity,
+                 0 17px 26px 2px shadow-key-penumbra-opacity,
+                 0 6px 32px 5px shadow-ambient-shadow-opacity
+
+elevation-18dp = 0 9px 11px -5px shadow-key-umbra-opacity,
+                 0 18px 28px 2px shadow-key-penumbra-opacity,
+                 0 7px 34px 6px shadow-ambient-shadow-opacity
+
+elevation-19dp = 0 9px 12px -6px shadow-key-umbra-opacity,
+                 0 19px 29px 2px shadow-key-penumbra-opacity,
+                 0 7px 36px 6px shadow-ambient-shadow-opacity
+
+elevation-20dp = 0 10px 13px -6px shadow-key-umbra-opacity,
+                 0 20px 31px 3px shadow-key-penumbra-opacity,
+                 0 8px 38px 7px shadow-ambient-shadow-opacity
+
+elevation-21dp = 0 10px 13px -6px shadow-key-umbra-opacity,
+                 0 21px 33px 3px shadow-key-penumbra-opacity,
+                 0 8px 40px 7px shadow-ambient-shadow-opacity
+
+elevation-22dp = 0 10px 14px -6px shadow-key-umbra-opacity,
+               0 22px 35px 3px shadow-key-penumbra-opacity,
+               0 8px 42px 7px shadow-ambient-shadow-opacity
+
+elevation-23dp = 0 11px 14px -7px shadow-key-umbra-opacity,
+                 0 23px 36px 3px shadow-key-penumbra-opacity,
+                 0 9px 44px 8px shadow-ambient-shadow-opacity
+
+elevation-24dp = 0 11px 15px -7px shadow-key-umbra-opacity,
+                 0 24px 38px 3px shadow-key-penumbra-opacity,
+                 0 9px 46px 8px shadow-ambient-shadow-opacity
+
+// MIXINS
+elevation($z, important = false)
+  box-shadow: elevation-+$z+dp (important ? !important : )
+
+elevationTransition($duration = 280ms, $easing = cubic-bezier(.4, 0, .2, 1))
+  transition: box-shadow $duration $easing
+  will-change: box-shadow

package/src/stylus/settings/_theme.styl

@@ -0,0 +1,201 @@
+@require './_colors'
+
+// Theme
+// ============================================================
+$body-font-family := 'Roboto', sans-serif
+$font-size-root := 14px
+$line-height-root := 1.5
+
+$theme := {
+  primary: $blue.darken-2
+  accent: $blue.accent-1
+  secondary: $grey.darken-3
+  info: $blue.base
+  warning: $amber.base
+  error: $red.accent-2
+  success: $green.base
+}
+
+// Material Design - https://material.io/guidelines/style/color.html#color-usability
+// ============================================================
+$material-light := {
+  status-bar: {
+    regular: #E0E0E0,
+    lights-out: rgba(#fff, .7)
+  },
+  app-bar: #F5F5F5,
+  background: #FAFAFA,
+  cards: #FFFFFF,
+  chips: {
+    background: $grey.lighten-2,
+    color: rgba(#000, .87)
+  },
+  dividers: rgba(#000, .12),
+  text: {
+    theme: #fff,
+    primary: rgba(#000, .87),
+    secondary: rgba(#000, .54),
+    disabled: rgba(#000, .38),
+    link: $theme.primary,
+    link-hover: $grey.darken-3
+  },
+  icons: {
+    active: rgba(#000, .54),
+    inactive: rgba(#000, .38)
+  },
+  buttons: {
+    disabled: rgba(#000, .26),
+    focused: rgba(#000, .12),
+    focused-alt: rgba(#fff, .6),
+    pressed: rgba(#999, .4)
+  },
+  expansion-panels: {
+    focus: #EEEEEE
+  },
+  selection-controls: {
+    active: $teal.base,
+    thumb: {
+      inactive: $grey.lighten-5,
+      disabled: $grey.lighten-1
+    },
+    track: {
+      inactive: rgba(#000, .38),
+      disabled: rgba(#000, .12)
+    }
+  },
+  slider: {
+    active: rgba(#000, .38),
+    inactive: rgba(#000, .26),
+    disabled: rgba(#000, .26),
+    discrete: #000
+  },
+  tabs: {
+    active: $theme.primary,
+    inactive: rgba(#000, .70)
+  },
+  input-bottom-line: rgba(#000, .42),
+  stepper: {
+    active: rgba(#fff, 1),
+    completed: rgba(#000, 0.87),
+    hover: rgba(#000, 0.54)
+  },
+  table: {
+    active: $grey.lighten-4
+    hover: $grey.lighten-3
+  },
+  picker: {
+    buttons: #fff,
+    date: $theme.primary,
+    title: $theme.primary,
+    body: #fff,
+    clock: $grey.lighten-2
+  },
+  bg-color: #fff
+  fg-color: #000
+  text-color: #000
+  primary-text-percent: .87
+  secondary-text-percent: .54
+  disabledORhints-text-percent: .38
+  divider-percent: .12
+  active-icon-percent: .54
+  inactive-icon-percent: .38
+}
+
+$material-dark := {
+  status-bar: {
+    regular: #000000,
+    lights-out: rgba(#000, .2)
+  },
+  app-bar: #212121,
+  background: #303030,
+  cards: #424242,
+  chips: {
+    background: #FFF,
+    color: $material-light.text.primary
+  },
+  dividers: rgba(#fff, .12),
+  text: {
+    theme: #fff,
+    primary: #fff,
+    secondary: rgba(#fff, .70),
+    disabled: rgba(#fff, .50),
+    link: $theme.accent,
+    link-hover: $grey.lighten-3
+  },
+  icons: {
+    active: #fff,
+    inactive: rgba(#fff, .5)
+  },
+  buttons: {
+    disabled: rgba(#fff, .3),
+    focused: rgba(#fff, .12),
+    focused-alt: rgba(#fff, .1),
+    pressed: rgba(#ccc, .25)
+  },
+  expansion-panels: {
+    focus: rgba(#000, .70)
+  },
+  selection-controls: {
+    active: $teal.lighten-3,
+    thumb: {
+      inactive: $grey.lighten-1,
+      disabled: $grey.darken-3
+    },
+    track: {
+      inactive: rgba(#fff, .3),
+      disabled: rgba(#fff, .1)
+    }
+  },
+  slider: {
+    active: rgba(#fff, .3),
+    inactive: rgba(#fff, .2),
+    disabled: rgba(#fff, .2),
+    discrete: #fff
+  },
+  tabs: {
+    active: #fff,
+    inactive: rgba(#fff, .7)
+  },
+  input-bottom-line: rgba(#fff, .7),
+
+  stepper: {
+    active: rgba(#fff, 1),
+    completed: rgba(#fff, 0.87),
+    hover: rgba(#fff, 0.75)
+  },
+  table: {
+    active: #505050
+    hover: $grey.darken-2
+  },
+  picker: {
+    date: $theme.accent,
+    title: $grey.darken-2,
+    body: #424242,
+    clock: $grey.darken-2,
+    buttons: rgba(#000, .87)
+  },
+  bg-color: #303030
+  fg-color: #fff
+  text-color: #fff
+  primary-text-percent: 1
+  secondary-text-percent: .70
+  disabledORhints-text-percent: .50
+  divider-percent: .12
+  active-icon-percent: 1
+  inactive-icon-percent: .50
+}
+
+// Default Material Theme
+// ============================================================
+$material-theme := $material-light
+$material-twelve-percent-light := rgba($material-dark.fg-color, $material-dark.divider-percent)
+$material-twelve-percent-dark := rgba($material-light.fg-color, $material-light.divider-percent)
+
+
+// Theme
+// ============================================================
+$body-bg-light := $material-light.background
+$body-bg-dark := $material-dark.background
+$body-color-light := rgba($material-dark.text-color, $material-dark.primary-text-percent)
+$body-color-dark := rgba($material-light.text-color, $material-light.primary-text-percent)
+$color-theme := rgba($material-theme.text-color, $material-theme.primary-text-percent)