mirror of
https://github.com/datahub-project/datahub.git
synced 2025-10-13 09:54:10 +00:00
Merge pull request #957 from theseyi/tab
localize color scheme map to set-color function. adds get-color funct…
This commit is contained in:
Seyi Adebajo
GitHub
commit
d1ce9c3bed
@ -79,6 +79,20 @@
|
||||
/// @return {Color}
|
||||
/// @require $color-scheme
|
||||
@function set-color($color, $hue) {
|
||||
/// Color Scheme
|
||||
/// @type Map
|
||||
/// @prop {String} key - Scheme name
|
||||
/// @prop {Map} hue - a qualifying hue for the enclosing color
|
||||
$color-scheme: (
|
||||
red: (red5: rgb(255, 44, 51), maroonflush: rgb(199, 37, 78)),
|
||||
green: (green5: rgb(70, 154, 31)),
|
||||
orange: (orange5: rgb(229, 88, 0)),
|
||||
blue: (oxford: rgb(53, 75, 87), curious: rgb(26, 161, 217), eastern: rgb(26, 132, 188), blue5: rgb(26, 161, 217)),
|
||||
grey: (light: rgb(237, 237, 237), dark: rgb(68, 68, 68), mid: rgb(153, 153, 153)),
|
||||
black: (dune: rgb(41, 39, 36)),
|
||||
white: (base: rgb(255, 255, 255), catskill: rgb(243, 247, 249), earlydawn:rgb(255, 249, 232))
|
||||
);
|
||||
|
||||
@return map-get(map-get($color-scheme, $color), $hue);
|
||||
}
|
||||
|
||||
@ -89,7 +103,18 @@
|
||||
/// @type Map
|
||||
/// @prop {String} key - number representing a spacing type
|
||||
/// @prop {Length} value - pixel length
|
||||
$item-spacings: (0: 0px, 1: 4px, 2: 8px, 3: 12px, 4: 16px, 5: 24px, 6: 32px, 7: 48px, 8: 64px, 9: 96px);
|
||||
$item-spacings: (
|
||||
0: 0px,
|
||||
1: 4px,
|
||||
2: 8px,
|
||||
3: 12px,
|
||||
4: 16px,
|
||||
5: 24px,
|
||||
6: 32px,
|
||||
7: 48px,
|
||||
8: 64px,
|
||||
9: 96px
|
||||
);
|
||||
|
||||
// If item-spacing is passed a list, for example:
|
||||
// padding: item-spacing(1 2 3 4)
|
||||
@ -109,3 +134,154 @@
|
||||
|
||||
@return map-get($item-spacings, $spacing-unit);
|
||||
}
|
||||
/// Gets a color from the color palette map and applies a provided opacity if value is less than 1
|
||||
@function get-color($colorKey, $opacity: 1) {
|
||||
$color-palette: (
|
||||
blue0: #e6f7ff,
|
||||
blue1: #caedff,
|
||||
blue2: #98d8f4,
|
||||
blue3: #65c3e8,
|
||||
blue4: #33aada,
|
||||
blue5: #0091ca,
|
||||
blue6: #0084bf,
|
||||
blue7: #0073b1,
|
||||
blue8: #006097,
|
||||
blue9: #004b7c,
|
||||
blue10: #003f67,
|
||||
purple0: #f5f5fe,
|
||||
purple1: #e6e6ff,
|
||||
purple2: #cacafc,
|
||||
purple3: #b2b0fa,
|
||||
purple4: #9896f2,
|
||||
purple5: #827be9,
|
||||
purple6: #756ddd,
|
||||
purple7: #665ed0,
|
||||
purple8: #544bc2,
|
||||
purple9: #4034b0,
|
||||
purple10: #2c2b9d,
|
||||
red0: #fef2f1,
|
||||
red1: #ffe0db,
|
||||
red2: #ffbcba,
|
||||
red3: #ff999a,
|
||||
red4: #ff6c70,
|
||||
red5: #ff2c33,
|
||||
red6: #ee1620,
|
||||
red7: #d11124,
|
||||
red8: #b10823,
|
||||
red9: #900021,
|
||||
red10: #790021,
|
||||
orange0: #fff3ea,
|
||||
orange1: #fde3d2,
|
||||
orange2: #f8c19e,
|
||||
orange3: #f6a16c,
|
||||
orange4: #ef7e37,
|
||||
orange5: #e55800,
|
||||
orange6: #cf5000,
|
||||
orange7: #b74700,
|
||||
orange8: #993a00,
|
||||
orange9: #7c2e00,
|
||||
orange10: #6a2300,
|
||||
teal0: #ecf9fb,
|
||||
teal1: #ccf0f3,
|
||||
teal2: #98dade,
|
||||
teal3: #68c5cd,
|
||||
teal4: #17afb8,
|
||||
teal5: #0e95a0,
|
||||
teal6: #0c8996,
|
||||
teal7: #087889,
|
||||
teal8: #036475,
|
||||
teal9: #00505d,
|
||||
teal10: #00414c,
|
||||
pink0: #fff1fa,
|
||||
pink1: #ffdff6,
|
||||
pink2: #ffb9e2,
|
||||
pink3: #ff91cf,
|
||||
pink4: #ff61b6,
|
||||
pink5: #ff1b90,
|
||||
pink6: #e61e89,
|
||||
pink7: #cc167e,
|
||||
pink8: #ac0a70,
|
||||
pink9: #890060,
|
||||
pink10: #720059,
|
||||
green0: #f0f7e8,
|
||||
green1: #dcf0cb,
|
||||
green2: #b5d99f,
|
||||
green3: #91c475,
|
||||
green4: #6baf49,
|
||||
green5: #469a1f,
|
||||
green6: #398b18,
|
||||
green7: #2f7b15,
|
||||
green8: #22670f,
|
||||
green9: #165209,
|
||||
green10: #0e4507,
|
||||
gray0: #f3f6f8,
|
||||
gray1: #e6e9ec,
|
||||
gray2: #cdcfd2,
|
||||
gray3: #b3b6b9,
|
||||
gray4: #9b9ea2,
|
||||
gray5: #84878a,
|
||||
gray6: #777a7d,
|
||||
gray7: #696c6f,
|
||||
gray8: #575a5d,
|
||||
gray9: #44474a,
|
||||
gray10: #373a3d,
|
||||
slate0: #f3f6f8,
|
||||
slate1: #e1e9ee,
|
||||
slate2: #c7d1d8,
|
||||
slate3: #acb9c2,
|
||||
slate4: #92a1ac,
|
||||
slate5: #7a8b98,
|
||||
slate6: #6a7e89,
|
||||
slate7: #5c6f7c,
|
||||
slate8: #485d69,
|
||||
slate9: #344a57,
|
||||
slate10: #283e4a,
|
||||
silver0: #f5f5f5,
|
||||
silver1: #e9e9e9,
|
||||
silver2: #cfcfcf,
|
||||
silver3: #b6b6b6,
|
||||
silver4: #9e9e9e,
|
||||
silver5: #878787,
|
||||
silver6: #7a7a7a,
|
||||
silver7: #6c6c6c,
|
||||
silver8: #5a5a5a,
|
||||
silver9: #474747,
|
||||
silver10: #3a3a3a,
|
||||
gold0: #fdf4dc,
|
||||
gold1: #f1e8c5,
|
||||
gold2: #dccea4,
|
||||
gold3: #c5b583,
|
||||
gold4: #af9b62,
|
||||
gold5: #9b8443,
|
||||
gold6: #8b783f,
|
||||
gold7: #7a6b3b,
|
||||
gold8: #645831,
|
||||
gold9: #4e4628,
|
||||
gold10: #42391e,
|
||||
copper0: #fdf3f1,
|
||||
copper1: #f5e3e0,
|
||||
copper2: #e2c7c4,
|
||||
copper3: #d2adac,
|
||||
copper4: #c19191,
|
||||
copper5: #b27878,
|
||||
copper6: #a76969,
|
||||
copper7: #9b5959,
|
||||
copper8: #834a4a,
|
||||
copper9: #693939,
|
||||
copper10: #5c2d2d,
|
||||
white: #ffffff,
|
||||
black: #000000
|
||||
);
|
||||
|
||||
$color: map-get($color-palette, $colorKey);
|
||||
|
||||
@if ($color == null) {
|
||||
@error '#{$colorKey} not found in `$color-palette`';
|
||||
}
|
||||
|
||||
@if ($opacity < 1) {
|
||||
$color: rgba($color, $opacity);
|
||||
}
|
||||
|
||||
@return $color;
|
||||
}
|
||||
|
||||
@ -2,12 +2,7 @@
|
||||
|
||||
/// Regular font family
|
||||
/// @type List
|
||||
$text-font-stack: (
|
||||
'Source Sans Pro',
|
||||
'Helvetica',
|
||||
'Arial',
|
||||
sans-serif
|
||||
) !default;
|
||||
$text-font-stack: ('Source Sans Pro', 'Helvetica', 'Arial', sans-serif) !default;
|
||||
|
||||
/// font family for font-awesome
|
||||
///@type list
|
||||
@ -24,54 +19,8 @@ $glyphicons-stack: (
|
||||
);
|
||||
|
||||
$font-weights: (
|
||||
normal:(
|
||||
2: 200,
|
||||
3: 300,
|
||||
4: 400,
|
||||
6: 600
|
||||
),
|
||||
italic:(
|
||||
2: 200,
|
||||
3: 300,
|
||||
4: 400,
|
||||
6: 600
|
||||
)
|
||||
);
|
||||
|
||||
/// Color Scheme
|
||||
/// @type Map
|
||||
/// @prop {String} key - Scheme name
|
||||
/// @prop {Map} hue - a qualifying hue for the enclosing color
|
||||
$color-scheme: (
|
||||
red: (
|
||||
red5: rgb(255, 44, 51),
|
||||
maroonflush: rgb(199, 37, 78)
|
||||
),
|
||||
green: (
|
||||
green5: rgb(70, 154, 31)
|
||||
),
|
||||
orange: (
|
||||
orange5: rgb(229, 88, 0)
|
||||
),
|
||||
blue: (
|
||||
oxford: rgb(53, 75, 87),
|
||||
curious: rgb(26, 161, 217),
|
||||
eastern: rgb(26, 132, 188),
|
||||
blue5: rgb(26, 161, 217)
|
||||
),
|
||||
grey: (
|
||||
light: rgb(237, 237, 237),
|
||||
dark: rgb(68, 68, 68),
|
||||
mid: rgb(153, 153, 153)
|
||||
),
|
||||
black: (
|
||||
dune: rgb(41, 39, 36)
|
||||
),
|
||||
white: (
|
||||
base: rgb(255, 255, 255),
|
||||
catskill: rgb(243, 247, 249),
|
||||
earlydawn:rgb(255, 249, 232)
|
||||
)
|
||||
normal:(2: 200, 3: 300, 4: 400, 6: 600),
|
||||
italic:(2: 200, 3: 300, 4: 400, 6: 600)
|
||||
);
|
||||
|
||||
//===============
|
||||
@ -110,23 +59,18 @@ $nav-min-height: 50px !default;
|
||||
/// @prop {String} keys - Keys are identifiers mapped to a given length
|
||||
/// @prop {Map} values - Values are actual breakpoints expressed in pixels
|
||||
$breakpoints: (
|
||||
'small': (min-width: 320px),
|
||||
'medium': (min-width: 768px),
|
||||
'large': (min-width: 979px),
|
||||
'huge': (min-width: 1024px)
|
||||
) !default;
|
||||
'small': (min-width: 320px),
|
||||
'medium': (min-width: 768px),
|
||||
'large': (min-width: 979px),
|
||||
'huge': (min-width: 1024px)
|
||||
)
|
||||
!default;
|
||||
|
||||
/// Z-indexes map, gathering all Z layers of the application
|
||||
/// @type Map
|
||||
/// @prop {String} key - Layer’s name
|
||||
/// @prop {Number} value - Z value mapped to the key
|
||||
$z-indexes: (
|
||||
'toast': 6000,
|
||||
'modal': 5000,
|
||||
'dropdown': 4000,
|
||||
'default': 0,
|
||||
'below': -1
|
||||
) !default;
|
||||
$z-indexes: ('toast': 6000, 'modal': 5000, 'dropdown': 4000, 'default': 0, 'below': -1) !default;
|
||||
|
||||
/// Absolute URL where all assets are served from
|
||||
/// @type String
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user