resources/lib/ooui/wikimedia-ui-base.less

   1 /**
   2  * WikimediaUI Base v0.14.0
   3  * Wikimedia Foundation user interface base variables
   4  */
   5
   6 // == Breakpoints ==
   7 // The following numbers are prone to change with new information.
   8
   9 // Minimum available screen width at which a device can be considered a mobile device
  10 // Many older feature phones have screens smaller than this value.
  11 @width-breakpoint-mobile: 320px;
  12
  13 // Minimum available screen width at which a device can be considered a tablet
  14 // The number is currently based on the device width of a Samsung Galaxy S5 mini and is low
  15 // enough to cover iPad (768px).
  16 @width-breakpoint-tablet: 720px;
  17
  18 // Minimum available screen width at which a device can be considered a desktop
  19 @width-breakpoint-desktop: 1000px;
  20
  21 // Wider desktop breakpoint, currently used in Flow.
  22 @width-breakpoint-desktop-wide: 1200px;
  23
  24 // Extra wide desktop breakpoint
  25 @width-breakpoint-desktop-extrawide: 2000px;
  26
  27
  28 // == Colors ==
  29 // WikimediaUI (WMUI) color palette
  30 // Don't use those variables directly, instead define your vars
  31 // referring to them as applied further below
  32
  33 @wmui-color-base0:    #000;    // = HSB 0°, 0%, 0%
  34 @wmui-color-base10:   #222;    // = HSB 0°, 0%, 13%
  35 @wmui-color-base20:   #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
  36 @wmui-color-base30:   #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
  37 @wmui-color-base50:   #a2a9b1; // = HSB 212°, 8%, 69%
  38 @wmui-color-base70:   #c8ccd1; // = HSB 213°, 4%, 82%
  39 @wmui-color-base80:   #eaecf0; // = HSB 220°, 3%, 94%
  40 @wmui-color-base90:   #f8f9fa; // = HSB 210°, 1%, 98%
  41 @wmui-color-base100:  #fff;    // = HSB 0°, 0%, 100%
  42
  43 @wmui-color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
  44 @wmui-color-accent50: #36c;    // = HSB 220°, 75%, 80%
  45 @wmui-color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%
  46
  47 @wmui-color-red30:    #b32424; // = HSB 360°, 80%, 70%
  48 @wmui-color-red50:    #d33;    // = HSB 360°, 77%, 87%
  49 @wmui-color-red90:    #fee7e6; // = HSB 3°, 9%, 100%
  50
  51 @wmui-color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
  52 @wmui-color-yellow50: #fc3;    // = HSB 45°, 80%, 100%
  53 @wmui-color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%
  54
  55 @wmui-color-green30:  #14866d; // = HSB 167°, 85%, 53%
  56 @wmui-color-green50:  #00af89; // = HSB 167°, 100%, 69%
  57 @wmui-color-green90:  #d5fdf4; // = HSB 166°, 16%, 99%
  58
  59 // Background Colors
  60 @background-color-base:           @wmui-color-base100;
  61 @background-color-base--hover:    @wmui-color-base80;
  62 @background-color-base--disabled: @wmui-color-base80;
  63 @background-color-code:           @wmui-color-base90;
  64 // 'Framed' UI elements (Framed Buttons, Dropdowns, ToggleSwitches…)
  65 @background-color-framed:         @wmui-color-base90;
  66 @background-color-framed--hover:  @wmui-color-base100;
  67 @background-color-framed--active: @wmui-color-base70;
  68 // 'Filled' UI elements (Checkboxes, Radios, ProgressBars…)
  69 @background-color-filled--disabled: @wmui-color-base70;
  70 // Toolbar and Tools
  71 @background-color-toolbar:        @background-color-base;
  72 @background-color-tool--hover:    @background-color-base--hover;
  73 @background-color-tool--active:   @background-color-primary;
  74 @background-color-tool--active-hover: @background-color-primary--hover;
  75 // Tabs Navigation Background Color
  76 @background-color-tabs:           @wmui-color-base80;
  77 // User system messages (errors, warnings, successes, notices)
  78 @background-color-error--framed: @wmui-color-red90;
  79 @background-color-warning--framed: @wmui-color-yellow90;
  80 @background-color-success--framed: @wmui-color-green90;
  81 @background-color-notice--framed: @wmui-color-base80;
  82 // Highlight Colors, RGBA Colors include hex fallback on `#fff` for IE 6/7/8
  83 @background-color-highlight:      rgba( 255, 182, 13, 0.4 );
  84 @background-color-highlight--fallback: #ffe29e;
  85
  86 // Foreground Colors
  87 @color-base:                      @wmui-color-base10;
  88 @color-base--hover:               #444;
  89 @color-base--active:              @wmui-color-base0;
  90 @color-base--inverted:            @wmui-color-base100;
  91 @color-base--emphasized:          @wmui-color-base0;
  92 @color-base--subtle:              @wmui-color-base30;
  93 @color-base--disabled:            @wmui-color-base30;
  94 @color-filled--disabled:          @color-base--inverted;
  95 @color-placeholder:               @wmui-color-base30;
  96 // Primary 'Progressive' Color, Background Color and states
  97 @background-color-primary:        @wmui-color-accent90;
  98 @background-color-primary--hover: rgba( 41, 98, 204, 0.1 );
  99 @color-primary:                   @wmui-color-accent50;
 100 @color-primary--hover:            #447ff5; // = `lighten( @color-primary, 3 )`
 101 @color-primary--active:           @wmui-color-accent30;
 102 @color-primary--focus:            @color-primary;
 103 // 'Destructive' Color, Background Color and states
 104 @background-color-destructive:    @wmui-color-red90;
 105 @color-destructive:               @wmui-color-red50;
 106 @color-destructive--hover:        #ff4242;
 107 @color-destructive--active:       @wmui-color-red30;
 108 @color-destructive--focus:        @color-destructive;
 109 // Secondary Color and states (links only)
 110 @color-secondary:                 @wmui-color-green50;
 111 @color-secondary--hover:          #1c6665;
 112 @color-secondary--active:         @wmui-color-green30;
 113 @color-secondary--focus:          @color-secondary;
 114 // User system messages (errors, warnings, successes, notices)
 115 @color-error:                     @wmui-color-red50;
 116 @color-warning:                   @wmui-color-base0;
 117 @color-success:                   @wmui-color-green30;
 118 @color-success--framed:           @wmui-color-base0;
 119 @color-notice:                    @wmui-color-base0;
 120 // Toolbar and Tools
 121 @color-tool--hover:               @color-base--emphasized; // Used here in combination with `:hover` background-color turning light grey
 122 @color-tool--active:              @color-primary;
 123
 124
 125 // Opacity
 126 @opacity-base:                    1;
 127 @opacity-base--disabled:          0.51; // = `#7d7d7d` on `background-color: #fff`; HSB 0°, 0%, 49%
 128 @opacity-icon-base:               0.87; // = `#222` on `background-color: #fff`
 129 @opacity-icon-base--hover:        0.73; // = `#454545` on `background-color: #fff`, closest to `#444`
 130 @opacity-icon-base--selected:     1;
 131
 132
 133 // == Positioning ==
 134 // Z-Index
 135 @z-index-base:                    0;
 136
 137
 138 // == Box Model properties ==
 139 // `@*size` variables are used for `*width` & `*height` properties
 140 @size-base:                       32px;
 141
 142 @min-size-icon:                   20px; // values used for `min-*` are defined in `px`, see T130691
 143 @min-size-indicator:              12px;
 144
 145 @size-icon:                       20px;
 146 @size-indicator:                  12px;
 147 @size-tool:                       42px;
 148
 149 // Max Widths
 150 @max-width-base:                  50em;
 151 @max-width-button:                28.75em; // = `460px` at `16px` base, see T95367
 152 @max-width-input:                 @max-width-base;
 153 @max-width-input-inline:          100%;
 154
 155 // Border
 156 @border-base:                     @border-width-base @border-style-base @border-color-base;
 157 @border-dialog:                   @border-base;
 158 @border-menu:                     @border-base;
 159 // User system messages (errors, warnings, successes, notices)
 160 @border-error:                    @border-width-base @border-style-base @color-error;
 161 @border-warning:                  @border-width-base @border-style-base @wmui-color-yellow50;
 162 @border-success:                  @border-width-base @border-style-base @color-success;
 163 @border-notice:                   @border-base;
 164 // Border Colors
 165 @border-color-base:               @wmui-color-base50;
 166 @border-color-base--hover:        @wmui-color-base50;
 167 @border-color-base--active:       @wmui-color-base30;
 168 @border-color-base--disabled:     @wmui-color-base70;
 169 @border-color-filled--disabled:   @color-filled--disabled;
 170 @border-color-primary--active:    #859dcc;
 171 @border-color-destructive--active: #b77c79;
 172 @border-color-inset--focus:       @color-base--inverted;
 173 @border-color-heading:            @wmui-color-base70;
 174 @border-color-wikitable:          rgba( 84, 89, 93, 0.3 ); // See T168029
 175 // Border Styles
 176 @border-style-base:               solid;
 177 // Border Widths
 178 @border-width-base:               1px;
 179 // Border Radius
 180 @border-radius-base:              2px;
 181
 182 // Box Shadows
 183 @box-shadow-base--focus:          inset 0 0 0 1px @wmui-color-accent50;
 184 @box-shadow-primary--focus:       inset 0 0 0 1px @color-primary, inset 0 0 0 2px @color-base--inverted;
 185 @box-shadow-inset--inverted:      inset 0 0 0 1px @color-base--inverted;
 186 @box-shadow-filled--disabled:     inset 0 0 0 1px @color-filled--disabled;
 187 @box-shadow-card:                 0 1px 1px rgba( 0, 0, 0, 0.15 );
 188 @box-shadow-dialog:               0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
 189 @box-shadow-menu:                 @box-shadow-dialog;
 190
 191
 192 // == Typography incl. print properties ==
 193 // Font Families
 194 @font-family-base:                @font-family-sans;
 195 @font-family-heading-main:        @font-family-serif;
 196 // To be deprecated
 197 @font-family-sans:                'Helvetica Neue', 'Helvetica', 'Nimbus Sans L', 'Arial', 'Liberation Sans', sans-serif;
 198 @font-family-sans--fallback:      sans-serif;
 199 // Provide better operating system-specific readability, see T175877
 200 // `system-ui` is currently not an option due to OS/language combination issues, see T175877#4776576
 201 @font-family-system-sans:         -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Lato', 'Helvetica', 'Arial', sans-serif;
 202 @font-family-serif:               'Linux Libertine', 'Georgia', 'Times', serif;
 203 @font-family-serif--fallback:     serif;
 204 // Provide better operating system-specific monospace stack, see T209915.
 205 @font-family-monospace:           'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
 206 @font-family-monospace--fallback: monospace, monospace; // See T176636
 207 // Line Heights
 208 @line-height-base:                1.6;
 209 @line-height-heading:             1.25;
 210 @text-decoration-link--hover:     none;
 211 // Text Shadows
 212 @text-shadow-base:                0 1px 1px @color-base--inverted; // 'coined' effect
 213 @text-shadow-base--disabled:      @text-shadow-base;
 214
 215
 216 // == Other Properties ==
 217 // Cursors
 218 @cursor-base--disabled:           default;
 219
 220
 221 // == Animation & Transition ==
 222 // Transitions
 223 @transition-base:                 @transition-duration-base; // `ease` is the initial value
 224 @transition-ease-medium:          @transition-duration-medium;
 225 // `ease-out` is preferably used on human initiated transitions, for example dialogs
 226 @transition-ease-out-medium:      ease-out @transition-duration-medium;
 227 // Transitions > Durations
 228 @transition-duration-base:        100ms;
 229 @transition-duration-medium:      250ms;