lib/assets/stylesheets/uniform/variables.scss in uniform-ui-2.4.1 vs lib/assets/stylesheets/uniform/variables.scss in uniform-ui-3.0.0.beta2
- old
+ new
@@ -1,74 +1,134 @@
//----------------------------------------------------------------
// Text
//----------------------------------------------------------------
$text-inputs: "input:not([type=search]):not([type=submit]):not([type=checkbox]):not([type=radio])";
$system-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+$base-font: $system-font;
+$base-font: if(variable-exists('base-font'), $base-font, $system-font);
+
//----------------------------------------------------------------
+// Includes
+//----------------------------------------------------------------
+$include_child_utilities: if(variable-exists('include_child_utilities'), $include_child_utilities, false);
+$include_breakpoint_container: if(variable-exists('include_breakpoint_container'), $include_breakpoint_container, false);
+$include_pseudo_utilities: if(variable-exists('include_pseudo_utilities'), $include_pseudo_utilities, [hover]);
+
+//----------------------------------------------------------------
// Colors
//----------------------------------------------------------------
-$colors: (
- 'background': #f2f2f2,
- 'gray-lightest': #F8FAFC,
- 'gray-lighter': #F1F5F8,
- 'gray-light': #DAE1E7,
- 'gray': #B8C2CC,
- 'gray-dark': #8795A1,
- 'gray-darker': #606F7B,
- 'gray-darkest': #3D4852,
+
+$colors: if(variable-exists('colors'), $colors, (
+ 'gray': #505152,
'green': #97C848,
- 'green-light': #BBFF00,
- 'green-dark': #709239,
'blue': #0994E2,
- 'blue-bright': #1fa9ff,
- 'blue-light': #A7CDF2,
- 'blue-dark': #167DBA,
'red': #E1563E,
- 'red-light': #E5766C,
- 'red-dark': #971710,
- 'red-bright': #ffab9b,
'yellow': #D7E542,
- 'yellow-dark': #BBC02C,
- 'yellow-light': #E9F75A,
- 'black': #000000,
- 'white': #FFFFFF
+ 'purple': #9461b9
+));
+$color_spectrum: (
+ 'white': #FFFFFF,
);
+@each $name, $color in $colors {
+ $color_spectrum: map-merge($color_spectrum, ("#{$name}": $color));
+ @for $index from 1 through 9 {
+ $saturation_adjustment: 0;
+ @if saturation($color) > 20% {
+ $saturation_adjustment: ((100 - saturation($color)) / 4) * abs(5 - $index);
+ }
+ $color_spectrum: map-merge($color_spectrum, ("#{$name}-#{(10 - $index) * 10}": change-color($color, $lightness: $index * 10, $saturation: saturation($color) + $saturation_adjustment)));
+ }
+}
//----------------------------------------------------------------
// Breakpoints
//----------------------------------------------------------------
// 720, 1080, 1440
-$breakpoints: (
+$include_breakpoint_container: if(variable-exists('include_breakpoint_container'), $include_breakpoint_container, false);
+$breakpoints: if(variable-exists('breakpoints'), $breakpoints, (
sm: "max-width: 719px",
md: "min-width: 720px",
lg: "min-width: 1080px",
xl: "min-width: 1440px"
-);
+));
//----------------------------------------------------------------
// Sizes
//----------------------------------------------------------------
-$sizes: (
- quarter: 0.25em,
- half: 0.5em,
- smaller: 0.8em,
- small: 0.9em,
- base: 1em,
- large: 1.2em,
- larger: 1.4em,
- 2x: 2em,
- 4x: 4em,
- 8x: 8em
-);
-
-
-//----------------------------------------------------------------
-// Grid
-//----------------------------------------------------------------
-$grid-columns: 12;
-$grid-gutter: 1em;
-
-
+$sizes: map-merge((
+ border: (
+ '': 1px,
+ 'none': 0,
+ '2px': 2px,
+ '3px': 3px,
+ '4px': 4px
+ ),
+ divide: (
+ '': 1px,
+ 'none': 0,
+ '2px': 2px,
+ '3px': 3px,
+ '4px': 4px
+ ),
+ rounded: (
+ '': 1rem,
+ 'none': 0,
+ "xs": 0.8rem,
+ "sm": 0.9rem,
+ "lg": 1.2rem,
+ "xl": 1.4rem,
+ ),
+ margin: (
+ '': 1rem,
+ 'none': 0,
+ "1\\/4x": 0.25rem,
+ "1\\/2x": 0.5rem,
+ "3\\/4x": 0.75rem,
+ "xs": 0.8rem,
+ "sm": 0.9rem,
+ "lg": 1.2rem,
+ "xl": 1.4rem,
+ "2x": 2rem,
+ ),
+ gap: (
+ '': 1rem,
+ 'none': 0,
+ "xs": 0.8rem,
+ "sm": 0.9rem,
+ "lg": 1.2rem,
+ "xl": 1.4rem,
+ ),
+ space: (
+ '': 1rem,
+ 'none': 0,
+ "xs": 0.8rem,
+ "sm": 0.9rem,
+ "lg": 1.2rem,
+ "xl": 1.4rem,
+ ),
+ pad: (
+ '': 1rem,
+ 'none': 0,
+ "1\\/4x": 0.25rem,
+ "1\\/2x": 0.5rem,
+ "3\\/4x": 0.75rem,
+ "xs": 0.8rem,
+ "sm": 0.9rem,
+ "lg": 1.2rem,
+ "xl": 1.4rem,
+ "2x": 2rem,
+ ),
+ text: (
+ '': 1rem,
+ "xs": 0.8rem,
+ "sm": 0.9rem,
+ "lg": 1.2rem,
+ "xl": 1.4rem,
+ "2x": 2rem,
+ "4x": 4rem,
+ "8x": 8rem
+ )
+), if(variable-exists('sizes'), $sizes, ()));
\ No newline at end of file