colette
Version:
A CSS and JS starter kit for 20 Minutes web projects
264 lines (248 loc) • 9.33 kB
text/stylus
// Colors
//
// Every colors in this Colettes are variables.
// Each of these stylus variables are then associated with a [css variable](./section-design.html#kssref-design-colors).
// Prefer using a css variable and overwrite the stylus variable if necessary.
//
// Styleguide: Settings.Colors
// Layout and UI generic colors
//
// Colors:
// $color-base: #4c4d4e - text color
// $color-base-foreground: #fff - if text writen on $color-base
// $color-links: #0062D9 - links color
// $color-highlight: #cc190f - highlighted color
// $color-highlight-foreground: #fff - if text writen on $color-highlight
// $color-native: #fff7e2 - ads and external contents
// $color-native-foreground: #4c4d4e - if text writen on $color-native
// $color-foreground-0: #4c4d4e - 1st shade of foreground
// $color-foreground-1: #878787 - 2nd shade of foreground
// $color-foreground-2: #b7b7b7 - 3rd shade of foreground
// $color-foreground-3: #c7c7c7 - 4th shade of foreground
// $color-background-0: #fff - 1st shade of background
// $color-background-1: #f8f8f8 - 2nd shade of background
// $color-background-2: #f1f1f1 - 3rd shade of background
// $color-background-3: #e7e7e7 - 4th shade of background
// $color-background-4: #b7b7b7 - 5th shade of background
//
// Styleguide: Settings.Colors.Generic
// Dark equivalent
//
// The values `$color-foreground-*-dark` are in fact generated. The original value is inverted and lightened at 41%:
// ```stylus
// $color-foreground-*-dark ?= lighten(invert($color-foreground-*), 41)
// ```
//
// The values `$color-background-*-dark` are also generated. The original value is darkened at 79%:
// ```stylus
// $color-background-*-dark ?= darken($color-background-*, 79)
// ```
//
// Colors:
// $color-base-dark: #fff
// $color-base-foreground-dark: #4c4d4e
// $color-links-dark: #4DADFF - $color-theme-default-dark
// $color-foreground-0-dark: #FFFFFF
// $color-foreground-1-dark: #e1e1e1
// $color-foreground-2-dark: #b1b1b1
// $color-foreground-3-dark: #a1a1a1
// $color-background-0-dark: #363636
// $color-background-1-dark: #2f2f2f
// $color-background-2-dark: #282828
// $color-background-3-dark: #1e1e1e
// $color-background-4-dark: #000000
//
// Styleguide: Settings.Colors.Generic.Dark
$color-base ?= #4c4d4e
$color-base-foreground ?= #fff
$color-highlight ?= #cc190f
$color-highlight-foreground ?= #fff
$color-links ?= #0062D9
$color-native ?= #fff7e2
$color-native-foreground ?= #4c4d4e
// Dark equivalent if needed
$color-base-dark ?= #fff
$color-base-foreground-dark ?= #4c4d4e
$color-links-dark ?= $color-theme-default-dark
// Foreground
$color-foreground-0 ?= #4c4d4e
$color-foreground-1 ?= #878787
$color-foreground-2 ?= #b7b7b7
$color-foreground-3 ?= #c7c7c7
// Foreground Dark
$color-foreground-0-dark ?= lighten(invert($color-foreground-0), 41)
$color-foreground-1-dark ?= lighten(invert($color-foreground-1), 41)
$color-foreground-2-dark ?= lighten(invert($color-foreground-2), 41)
$color-foreground-3-dark ?= lighten(invert($color-foreground-3), 41)
// Background
$color-background-0 ?= #fff
$color-background-1 ?= #f8f8f8
$color-background-2 ?= #f1f1f1
$color-background-3 ?= #e7e7e7
$color-background-4 ?= #b7b7b7
// Background Dark
$color-background-0-dark ?= darken($color-background-0, 79)
$color-background-1-dark ?= darken($color-background-1, 79)
$color-background-2-dark ?= darken($color-background-2, 79)
$color-background-3-dark ?= darken($color-background-3, 79)
$color-background-4-dark ?= darken($color-background-4, 79)
// Alerts colors
//
// Colors for alerts messages.
//
// Colors:
// $color-info: #0b4892 - Info
// $color-success: #3c7a09 - Success
// $color-warning: #b05105 - Warning
// $color-error: #cc190f - Error
//
// Weight: 2
//
// Styleguide: Settings.Colors.Alerts
$color-info ?= #0b4892
$color-success ?= #3c7a09
$color-warning ?= #b05105
$color-error ?= #cc190f
// Black & White
//
// Universal real black and white, use for shade and lights.
//
// Colors:
// $color-black: #000 - real black
// $color-white: #fff - real white
//
// Weight: 3
//
// Styleguide: Settings.Colors.BnW
$color-black ?= #000
$color-white ?= #fff
// Theme colors
//
// The color palette is based upon 20 Minutes editorial color chart:
// - each editorial section has a related color
// - we use section names as aliases to define color variables and classes names
// - this colors should respect at least a 4.5 (`$contrast`) ratio relatively to white
// - if ratio is insufficient some modules add a text-shadow or swith to a darker color
//
// Colors:
// $color-theme-default: #0b4892 - theme default
// $color-theme-sport: #00b9f3 - theme sport
// $color-theme-entertainment: #cc190f - theme entertainment
// $color-theme-economy: #053042 - theme economy
// $color-theme-community: #930b48 - theme community
// $color-theme-weird: #ef2a82 - theme weird
// $color-theme-partner: #ff5400 - theme partner
// $color-theme-planet: #48930b - theme planet
// $color-theme-media: #000000 - theme media
// $color-theme-hightech: #686868 - theme hightech
// $color-theme-summer: #cc4c3c - theme summer
//
// Weight: 4
//
// Styleguide: Settings.Colors.Theme
// Dark equivalent
//
// All these colors are set with the same color as `$color-theme-default-dark`. It's however possible to set a color fo each theme by adding the suffix `-dark` on it.
//
// For exemple, `$color-theme-sport` will have it's equivalent value `$color-theme-sport-dark`
//
// Colors:
// $color-theme-default-dark: #4DADFF - theme default dark
//
// Styleguide: Settings.Colors.Theme.Dark
$color-theme-default ?= #0b4892
$color-theme-sport ?= #00b9f3
$color-theme-entertainment ?= #cc190f
$color-theme-economy ?= #053042
$color-theme-community ?= #930b48
$color-theme-weird ?= #ef2a82
$color-theme-partner ?= #ff5400
$color-theme-planet ?= #48930b
$color-theme-media ?= #000
$color-theme-hightech ?= #686868
$color-theme-summer ?= #cc4c3c
$color-theme-tempo ?= #cc0f53
/* Sections */
$colors-themes ?= {
theme-default: $color-theme-default
theme-sport: $color-theme-sport
theme-entertainment: $color-theme-entertainment
theme-economy: $color-theme-economy
theme-community: $color-theme-community
theme-weird: $color-theme-weird
theme-partner: $color-theme-partner
theme-planet: $color-theme-planet
theme-media: $color-theme-media
theme-hightech: $color-theme-hightech
theme-summer: $color-theme-summer
theme-tempo: $color-theme-tempo
}
$color-theme-default-dark ?= #4DADFF
$color-theme-sport-dark ?= #4DADFF
$color-theme-entertainment-dark ?= #4DADFF
$color-theme-economy-dark ?= #4DADFF
$color-theme-community-dark ?= #4DADFF
$color-theme-weird-dark ?= #4DADFF
$color-theme-partner-dark ?= #4DADFF
$color-theme-planet-dark ?= #4DADFF
$color-theme-media-dark ?= #4DADFF
$color-theme-hightech-dark ?= #4DADFF
$color-theme-summer-dark ?= #4DADFF
$color-theme-tempo-dark ?= #4DADFF
// Social colors
//
// The social color palette is used for share and socials buttons.
//
// Colors:
// $color-social-dailymotion: #2068D4 - dailymotion
// $color-social-facebook: #4c64a0 - facebook
// $color-social-flipboard: #f52828 - flipboard
// $color-social-github: #791e8f - github
// $color-social-googleplus: #d14836 - googleplus
// $color-social-hootsuite: #000000 - hootsuite
// $color-social-instagram: #ff0040 - instagram
// $color-social-linkedin: #0177b5 - linkedin
// $color-social-messenger: #3d6bfb - messenger
// $color-social-pinterest: #bd081c - pinterest
// $color-social-pocket: #ed4054 - pocket
// $color-social-sms: #48930b - sms
// $color-social-snapchat: #fdfe00 - snapchat
// $color-social-twitter: #00a7e7 - twitter
// $color-social-whatsapp: #01a85a - whatsapp
// $color-social-youtube: #eb3223 - youtube
//
// Styleguide: Settings.Colors.Social
$color-social-dailymotion ?= #2068D4
$color-social-facebook ?= #4c64a0
$color-social-flipboard ?= #f52828
$color-social-github ?= #791e8f
$color-social-googleplus ?= #d14836
$color-social-hootsuite ?= #000000
$color-social-instagram ?= #ff0040
$color-social-linkedin ?= #0177b5
$color-social-messenger ?= #3d6bfb
$color-social-pinterest ?= #bd081c
$color-social-pocket ?= #ed4054
$color-social-sms ?= #48930b
$color-social-snapchat ?= #fdfe00
$color-social-twitter ?= #00a7e7
$color-social-whatsapp ?= #01a85a
$color-social-youtube ?= #eb3223
$colors-socials ?= {
social-dailymotion: $color-social-dailymotion
social-facebook: $color-social-facebook
social-flipboard: $color-social-flipboard
social-github: $color-social-github
social-googleplus: $color-social-googleplus
social-hootsuite: $color-social-hootsuite
social-instagram: $color-social-instagram
social-linkedin: $color-social-linkedin
social-messenger: $color-social-messenger
social-pinterest: $color-social-pinterest
social-pocket: $color-social-pocket
social-sms: $color-social-sms
social-snapchat: $color-social-snapchat
social-twitter: $color-social-twitter
social-whatsapp: $color-social-whatsapp
social-youtube: $color-social-youtube
}