Scss files organization

+ Slim version example

scss/themes/default/_light.scss

@@ -0,0 +1,67 @@
+// Light theme (Default)
+// Can be forced with data-theme="light"
+[data-theme="light"],
+:root:not([data-theme="dark"]) {
+
+  // Document
+  --background:        #{$white};
+
+  // Typography
+  --text:              #{$grey-700};
+  --h1:                #{$grey-900};
+  --h2:                #{$grey-800};
+  --h3:                #{$grey-700};
+  --h4:                #{$grey-600};
+  --h5:                #{$grey-500};
+  --h6:                #{$grey-400};
+
+  // Primary Call-to-Action and links
+  --primary:           #{$primary-600};
+  --primary-hover:     #{$primary-700};
+  --primary-focus:     #{rgba($primary-600, .125)};
+  --primary-inverse:   #{$white};
+
+  // Secondary Call-to-Action, links and kbd
+  --secondary:         #{$grey-500};
+  --secondary-hover:   #{$grey-700};
+  --secondary-focus:   #{rgba($grey-500, .125)};
+  --secondary-inverse: #{$white};
+
+  // Contrast Call-to-Action and Tooltips
+  --contrast:          #{$grey-800};
+  --contrast-hover:    #{mix($grey-900, $black)};
+  --contrast-focus:    #{rgba($grey-500, .125)};
+  --contrast-border:   #{rgba($amber-200, .5)}; // For links
+  --contrast-inverse:  #{$white};
+
+  // Form elements
+  --input-background:  #{$white};
+  --input-border:      #{mix($grey-100, $grey-200)};
+
+  // Utilities states
+  --valid:             #{$green-600};
+  --invalid:           #{$red-700};
+  --mark:              #{rgba($amber-200, .5)};
+  --mark-text:         #{$grey-800};
+  --muted-text:        #{mix($grey-400, $grey-500)};
+  --muted-background:  #{$grey-50};
+  --muted-border:      #{$grey-50};
+
+  // Card
+  --card-background:   #{$white};
+  --card-sections:     #{lighten($grey-50, 2%)};
+  --card-shadow:       0 0.125rem 1rem #{rgba($grey-900, 0.04)}, 0 0.125rem 2rem #{rgba($grey-900, 0.08)}, 0 0 0 0.0625rem #{rgba($grey-900, 0.024)};
+
+  // Code
+  --code-background:   #{lighten($grey-50, 2%)};
+  --code-inlined:      #{$grey-50};
+  --code-color-1:      #{$grey-500)};
+  --code-color-2:      #{hsl(330, 40%, 50%)};
+  --code-color-3:      #{hsl(185, 40%, 40%)};
+  --code-color-4:      #{hsl(40,  20%, 50%)};
+  --code-color-5:      #{mix($grey-300, $grey-400)};
+
+  // Table
+  --table-border:      #{rgba($grey-50, .75)};
+  --table-stripping:   #{rgba($grey-900,.02)};
+}