@kokoccc/vuetify 1.0.1

package/src/styles/settings/_colors.scss

@@ -0,0 +1,422 @@
+@import '../tools/_functions.sass';
+
+$red: () !default;
+$red: map-deep-merge(
+  (
+    '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
+  ),
+  $red
+);
+
+$pink: () !default;
+$pink: map-deep-merge(
+  (
+    '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
+  ),
+  $pink
+);
+
+$purple: () !default;
+$purple: map-deep-merge(
+  (
+    '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
+  ),
+  $purple
+);
+
+$deep-purple: () !default;
+$deep-purple: map-deep-merge(
+  (
+    '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
+  ),
+  $deep-purple
+);
+
+$indigo: () !default;
+$indigo: map-deep-merge(
+  (
+    '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
+  ),
+  $indigo
+);
+
+$blue: () !default;
+$blue: map-deep-merge(
+  (
+    '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
+  ),
+  $blue
+);
+
+$light-blue: () !default;
+$light-blue: map-deep-merge(
+  (
+    '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
+  ),
+  $light-blue
+);
+
+$cyan: () !default;
+$cyan: map-deep-merge(
+  (
+    '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
+  ),
+  $cyan
+);
+
+$teal: () !default;
+$teal: map-deep-merge(
+  (
+    '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
+  ),
+  $teal
+);
+
+$green: () !default;
+$green: map-deep-merge(
+  (
+    '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
+  ),
+  $green
+);
+
+$light-green: () !default;
+$light-green: map-deep-merge(
+  (
+    '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
+  ),
+  $light-green
+);
+
+$lime: () !default;
+$lime: map-deep-merge(
+  (
+    '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
+  ),
+  $lime
+);
+
+$yellow: () !default;
+$yellow: map-deep-merge(
+  (
+    '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
+  ),
+  $yellow
+);
+
+$amber: () !default;
+$amber: map-deep-merge(
+  (
+    '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
+  ),
+  $amber
+);
+
+$orange: () !default;
+$orange: map-deep-merge(
+  (
+    '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
+  ),
+  $orange
+);
+
+$deep-orange: () !default;
+$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: () !default;
+$brown: map-deep-merge(
+  (
+    '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
+  ),
+  $brown
+);
+
+$blue-grey: () !default;
+$blue-grey: map-deep-merge(
+  (
+    '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
+  ),
+  $blue-grey
+);
+
+$grey: () !default;
+$grey: map-deep-merge(
+  (
+    '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
+  ),
+  $grey
+);
+
+$shades: () !default;
+$shades: map-deep-merge(
+  (
+    'black': #000000,
+    'white': #FFFFFF,
+    'transparent': transparent
+  ),
+  $shades
+);
+
+$colors: () !default;
+$colors: map-deep-merge(
+  (
+    '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
+  ),
+  $colors
+);

package/src/styles/settings/_dark.scss

@@ -0,0 +1,153 @@
+@import '../tools/_functions.sass';
+
+$material-dark-elevation-colors: () !default;
+// https://material.io/design/color/dark-theme.html#properties
+// https://material.io/design/environment/elevation.html#default-elevations
+$material-dark-elevation-colors: map-deep-merge(
+  (
+    '0': #000000,
+    '1': #1E1E1E,
+    '2': #222222,
+    '3': #252525,
+    '4': #272727,
+    '6': #2C2C2C,
+    '8': #2E2E2E,
+    '12': #333333,
+    '16': #363636,
+    '24': #373737
+  ),
+  $material-dark-elevation-colors
+);
+
+$material-dark: () !default;
+$material-dark: map-deep-merge(
+  (
+    'status-bar': (
+      'regular': map-get($shades, 'black'),
+      'lights-out': rgba(map-get($shades, 'black'), 0.2)
+    ),
+    'app-bar': map-get($material-dark-elevation-colors, '4'),
+    'background': #121212,
+    'bottom-navigation': map-get($material-dark-elevation-colors, '8'),
+    'surface': #121212,
+    'calendar': (
+      'background-color': #303030,
+      'outside-background-color': #202020,
+      'weeknumber-background-color': #202020,
+      'line-color': map-get($grey, 'base'),
+      'interval-color': map-get($grey, 'lighten-3'),
+      'interval-line-color': map-get($grey, 'darken-2'),
+      'text-color': map-get($shades, 'white'),
+      'past-color': rgba(map-get($shades, 'white'), .50)
+      ),
+    'cards': map-get($material-dark-elevation-colors, '1'),
+    'chips': #555,
+    'code': (
+      'background': rgba(map-get($shades, 'white'), 0.1),
+      'color': currentColor
+    ),
+    'kbd': (
+      'background': #212529,
+      'color': map-get($shades, 'white')
+    ),
+    'dividers': rgba(map-get($shades, 'white'), 0.12),
+    'text': (
+      'theme': map-get($shades, 'white'),
+      'primary': map-get($shades, 'white'),
+      'secondary': rgba(map-get($shades, 'white'), 0.7),
+      'disabled': rgba(map-get($shades, 'white'), 0.5),
+      'link': map-get($blue, 'accent-1'),
+      'link-hover': map-get($grey, 'lighten-3')
+    ),
+    'icons': (
+      'active': map-get($shades, 'white'),
+      'inactive': rgba(map-get($shades, 'white'), 0.5)
+    ),
+    'inputs': (
+      'box': map-get($shades, 'white'),
+      'solo-inverted': rgba(map-get($shades, 'white'), 0.16),
+      'solo-inverted-focused': map-get($shades, 'white'),
+      'solo-inverted-focused-label': rgba(map-get($shades, 'black'), .6),
+      'solo-inverted-focused-placeholder': rgba(map-get($shades, 'black'), 0.38),
+      'solo-inverted-focused-text': rgba(map-get($shades, 'black'), 0.87)
+    ),
+    'buttons': (
+      'disabled': rgba(map-get($shades, 'white'), 0.3),
+      'focused': rgba(map-get($shades, 'white'), 0.12),
+      'focused-alt': rgba(map-get($shades, 'white'), 0.1),
+      'pressed': rgba(#ccc, 0.25)
+    ),
+    'expansion-panels': (
+      'focus': #494949
+    ),
+    'navigation-drawer': map-get($material-dark-elevation-colors, '16'),
+    'selection-controls': (
+      'disabled': rgba(map-get($shades, 'white'), 0.3),
+      'thumb': (
+        'inactive': map-get($grey, 'lighten-1'),
+        'disabled': map-get($grey, 'darken-3')
+      ),
+      'track': (
+        'inactive': rgba(map-get($shades, 'white'), 0.3),
+        'disabled': rgba(map-get($shades, 'white'), 0.1)
+      )
+    ),
+    'slider': (
+      'active': rgba(map-get($shades, 'white'), 0.3),
+      'inactive': rgba(map-get($shades, 'white'), 0.2),
+      'disabled': rgba(map-get($shades, 'white'), 0.2),
+      'discrete': map-get($shades, 'white')
+    ),
+    'skeleton': linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)),
+    'states': (
+      'hover': 0.08,
+      'focus': 0.24,
+      'selected': 0.16,
+      'activated': 0.24,
+      'pressed': 0.32,
+      'dragged': 0.16
+    ),
+    'tabs': rgba(map-get($shades, 'white'), 0.6),
+    'toggle-buttons': (
+      'color': map-get($shades, 'white')
+    ),
+    'text-fields': (
+      'filled': rgba(map-get($shades, 'white'), 0.08),
+      'filled-hover': rgba(map-get($shades, 'white'), 0.16),
+      'outlined': rgba(map-get($shades, 'white'), 0.24),
+      'outlined-disabled': rgba(map-get($shades, 'white'), 0.16),
+      'outlined-hover': map-get($shades, 'white')
+    ),
+    'input-bottom-line': rgba(map-get($shades, 'white'), 0.7),
+    'stepper': (
+      'active': rgba(map-get($shades, 'white'), 1),
+      'completed': rgba(map-get($shades, 'white'), 0.87),
+      'hover': rgba(map-get($shades, 'white'), 0.75)
+    ),
+    'table': (
+      'active': #505050,
+      'hover': map-get($grey, 'darken-2'),
+      'group': map-get($grey, 'darken-2')
+    ),
+    'toolbar': map-get($material-dark-elevation-colors, '4'),
+    'picker': (
+      'body': map-get($grey, 'darken-3'),
+      'clock': map-get($grey, 'darken-2'),
+      'indeterminateTime': map-get($grey, 'darken-1'),
+      'title': map-get($grey, 'darken-2')
+    ),
+    'color-picker': (
+      'checkerboard': rgba(map-get($shades, 'white'), 0.12)
+    ),
+    'bg-color': #303030,
+    'fg-color': map-get($shades, 'white'),
+    'text-color': map-get($shades, 'white'),
+    'primary-text-percent': 1,
+    'secondary-text-percent': 0.7,
+    'disabledORhints-text-percent': 0.5,
+    'divider-percent': 0.12,
+    'active-icon-percent': 1,
+    'inactive-icon-percent': 0.5
+  ),
+  $material-dark
+);

package/src/styles/settings/_elevations.scss

@@ -0,0 +1,101 @@
+@import '../tools/_functions.sass';
+
+$shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2) !default;
+$shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14) !default;
+$shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12) !default;
+
+$shadow-key-umbra: () !default;
+$shadow-key-umbra: map-deep-merge(
+  (
+    0: (0px 0px 0px 0px $shadow-key-umbra-opacity),
+    1: (0px 2px 1px -1px $shadow-key-umbra-opacity),
+    2: (0px 3px 1px -2px $shadow-key-umbra-opacity),
+    3: (0px 3px 3px -2px $shadow-key-umbra-opacity),
+    4: (0px 2px 4px -1px $shadow-key-umbra-opacity),
+    5: (0px 3px 5px -1px $shadow-key-umbra-opacity),
+    6: (0px 3px 5px -1px $shadow-key-umbra-opacity),
+    7: (0px 4px 5px -2px $shadow-key-umbra-opacity),
+    8: (0px 5px 5px -3px $shadow-key-umbra-opacity),
+    9: (0px 5px 6px -3px $shadow-key-umbra-opacity),
+    10: (0px 6px 6px -3px $shadow-key-umbra-opacity),
+    11: (0px 6px 7px -4px $shadow-key-umbra-opacity),
+    12: (0px 7px 8px -4px $shadow-key-umbra-opacity),
+    13: (0px 7px 8px -4px $shadow-key-umbra-opacity),
+    14: (0px 7px 9px -4px $shadow-key-umbra-opacity),
+    15: (0px 8px 9px -5px $shadow-key-umbra-opacity),
+    16: (0px 8px 10px -5px $shadow-key-umbra-opacity),
+    17: (0px 8px 11px -5px $shadow-key-umbra-opacity),
+    18: (0px 9px 11px -5px $shadow-key-umbra-opacity),
+    19: (0px 9px 12px -6px $shadow-key-umbra-opacity),
+    20: (0px 10px 13px -6px $shadow-key-umbra-opacity),
+    21: (0px 10px 13px -6px $shadow-key-umbra-opacity),
+    22: (0px 10px 14px -6px $shadow-key-umbra-opacity),
+    23: (0px 11px 14px -7px $shadow-key-umbra-opacity),
+    24: (0px 11px 15px -7px $shadow-key-umbra-opacity)
+  ),
+  $shadow-key-umbra
+);
+
+$shadow-key-penumbra: () !default;
+$shadow-key-penumbra: map-deep-merge(
+  (
+    0: (0px 0px 0px 0px $shadow-key-penumbra-opacity),
+    1: (0px 1px 1px 0px $shadow-key-penumbra-opacity),
+    2: (0px 2px 2px 0px $shadow-key-penumbra-opacity),
+    3: (0px 3px 4px 0px $shadow-key-penumbra-opacity),
+    4: (0px 4px 5px 0px $shadow-key-penumbra-opacity),
+    5: (0px 5px 8px 0px $shadow-key-penumbra-opacity),
+    6: (0px 6px 10px 0px $shadow-key-penumbra-opacity),
+    7: (0px 7px 10px 1px $shadow-key-penumbra-opacity),
+    8: (0px 8px 10px 1px $shadow-key-penumbra-opacity),
+    9: (0px 9px 12px 1px $shadow-key-penumbra-opacity),
+    10: (0px 10px 14px 1px $shadow-key-penumbra-opacity),
+    11: (0px 11px 15px 1px $shadow-key-penumbra-opacity),
+    12: (0px 12px 17px 2px $shadow-key-penumbra-opacity),
+    13: (0px 13px 19px 2px $shadow-key-penumbra-opacity),
+    14: (0px 14px 21px 2px $shadow-key-penumbra-opacity),
+    15: (0px 15px 22px 2px $shadow-key-penumbra-opacity),
+    16: (0px 16px 24px 2px $shadow-key-penumbra-opacity),
+    17: (0px 17px 26px 2px $shadow-key-penumbra-opacity),
+    18: (0px 18px 28px 2px $shadow-key-penumbra-opacity),
+    19: (0px 19px 29px 2px $shadow-key-penumbra-opacity),
+    20: (0px 20px 31px 3px $shadow-key-penumbra-opacity),
+    21: (0px 21px 33px 3px $shadow-key-penumbra-opacity),
+    22: (0px 22px 35px 3px $shadow-key-penumbra-opacity),
+    23: (0px 23px 36px 3px $shadow-key-penumbra-opacity),
+    24: (0px 24px 38px 3px $shadow-key-penumbra-opacity)
+  ),
+  $shadow-key-penumbra
+);
+
+$shadow-key-ambient: () !default;
+$shadow-key-ambient: map-deep-merge(
+  (
+    0: (0px 0px 0px 0px $shadow-key-ambient-opacity),
+    1: (0px 1px 3px 0px $shadow-key-ambient-opacity),
+    2: (0px 1px 5px 0px $shadow-key-ambient-opacity),
+    3: (0px 1px 8px 0px $shadow-key-ambient-opacity),
+    4: (0px 1px 10px 0px $shadow-key-ambient-opacity),
+    5: (0px 1px 14px 0px $shadow-key-ambient-opacity),
+    6: (0px 1px 18px 0px $shadow-key-ambient-opacity),
+    7: (0px 2px 16px 1px $shadow-key-ambient-opacity),
+    8: (0px 3px 14px 2px $shadow-key-ambient-opacity),
+    9: (0px 3px 16px 2px $shadow-key-ambient-opacity),
+    10: (0px 4px 18px 3px $shadow-key-ambient-opacity),
+    11: (0px 4px 20px 3px $shadow-key-ambient-opacity),
+    12: (0px 5px 22px 4px $shadow-key-ambient-opacity),
+    13: (0px 5px 24px 4px $shadow-key-ambient-opacity),
+    14: (0px 5px 26px 4px $shadow-key-ambient-opacity),
+    15: (0px 6px 28px 5px $shadow-key-ambient-opacity),
+    16: (0px 6px 30px 5px $shadow-key-ambient-opacity),
+    17: (0px 6px 32px 5px $shadow-key-ambient-opacity),
+    18: (0px 7px 34px 6px $shadow-key-ambient-opacity),
+    19: (0px 7px 36px 6px $shadow-key-ambient-opacity),
+    20: (0px 8px 38px 7px $shadow-key-ambient-opacity),
+    21: (0px 8px 40px 7px $shadow-key-ambient-opacity),
+    22: (0px 8px 42px 7px $shadow-key-ambient-opacity),
+    23: (0px 9px 44px 8px $shadow-key-ambient-opacity),
+    24: (0px 9px 46px 8px $shadow-key-ambient-opacity)
+  ),
+  $shadow-key-ambient
+);

package/src/styles/settings/_index.sass

@@ -0,0 +1,10 @@
+@import './_variables'
+@import './_colors'
+@import './_elevations'
+@import './_utilities'
+
+// Theme specific setup
+// ordering is important
+@import './_light'
+@import './_dark'
+@import './_theme'