ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Use css variables for primary & secondary buttons 

closes: CNVS-38412

test plan:
* check this out
* run bundle exec rake brand_configs:generate_and_upload_all
* compile assets
* make sure buttons look how they did before
* especially check in ie11

Change-Id: If1d87ef9fa5c184cc21b1b51212d26ee1c7c1da5
Reviewed-on: https://gerrit.instructure.com/120726
Tested-by: Jenkins
Reviewed-by: Simon Williams <simon@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Ryan Shaw <ryan@instructure.com>
This commit is contained in:
Ryan Shaw 2017-07-27 13:24:10 -06:00
parent 13765cc6ad
commit c6fe8f7526
6 changed files with 62 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/stylesheets/base/_variables.scss
View File

@ -279,14 +279,6 @@ $ic-dim-helper-text: darken($ic-color-neutral, 45);
$ic-dim-helper-text: darken($ic-color-neutral, 55);
}
// special handling for button--primary coloring
$button--primary-text: $ic-brand-button--primary-text;
$button--primary-bgd: $ic-brand-button--primary-bgd;
@if $use_high_contrast {
$button--primary-bgd: $ic-brand-primary;
$button--primary-text: $ic-color-light;
}
//==========================================================
// Legacy Vendor Variables (please do not touch these files)
//==========================================================

15
app/stylesheets/components/_buttons.scss
View File

@ -240,11 +240,15 @@ input[type="button"] {
// The colors for these come from app/stylesheets/brandable_variables.json
// Or the values the account sets in the Theme Editor
// Primary appears as blue
.btn-primary, // <-- deprecated- do not use
.Button--primary {
@include canvas-button($button--primary-bgd, $button--primary-text);
@include canvas-button(
var(--ic-brand-button--primary-bgd),
var(--ic-brand-button--primary-text),
var(--ic-brand-button--primary-bgd-darkened-5),
var(--ic-brand-button--primary-bgd-darkened-15)
);
}
// Warning appears as orange
.btn-warning, // <-- deprecated- do not use
@ -264,7 +268,12 @@ input[type="button"] {
// Info appears as a neutral blue
.btn-info, // <-- deprecated- do not use
.Button--secondary {
@include canvas-button($ic-brand-button--secondary-bgd, $ic-brand-button--secondary-text);
@include canvas-button(
var(--ic-brand-button--secondary-bgd),
var(--ic-brand-button--secondary-text),
var(--ic-brand-button--secondary-bgd-darkened-5),
var(--ic-brand-button--secondary-bgd-darkened-15)
);
}
// Inverse appears as dark gray <-- deprecated- do not use

7
app/stylesheets/our_custom_tiny_mce_stuff/_tiny_like_ck_with_external_tools.scss
View File

@ -27,7 +27,12 @@ $menu-item-keyboard-shortcut-color: $ic-font-color-dark;
}
.mce-container .mce-primary {
@include canvas-button($button--primary-bgd, $button--primary-text);
@include canvas-button(
var(--ic-brand-button--primary-bgd),
var(--ic-brand-button--primary-text),
var(--ic-brand-button--primary-bgd-darkened-5),
var(--ic-brand-button--primary-bgd-darkened-15)
);
}
.mce-container.mce-tinymce .mce-menu-item,

43
app/stylesheets/vendor/bootstrap/_mixins.scss vendored
View File

@ -337,7 +337,12 @@
}
// Updated replacement mixin for buttonBackground ^^
@mixin canvas-button($button-color, $text-color) {
@mixin canvas-button(
$button-color,
$text-color,
$button-color-darkened-5:darken($button-color, 5),
$button-color-darkened-15:darken($button-color, 15)
) {
background: $button-color;
color: $text-color;
border: 1px solid;
@ -349,7 +354,7 @@
color: $ic-color-light;
}
@else {
background: darken($button-color, 5%);
background: $button-color-darkened-5;
color: $text-color;
}
@ -360,42 +365,22 @@
color: $ic-color-light;
}
@else {
background: darken($button-color, 6%);
background: $button-color-darkened-5;
color: $text-color;
border-color: darken($button-color, 15%);
border-color: $button-color-darkened-15;
}
}
}
@if lightness($button-color) > lightness($text-color) {
border-color: $ic-border-color;
border-color: $button-color-darkened-15;
&.active, &.Button--active, &:active { box-shadow: none; }
&.active, &.Button--active {
background: darken($button-color, 55%);
border-color: darken($button-color, 65%);
color: $ic-color-light;
}
&:focus { @include button-focus-light; }
// handle jquery UI ui-button states
&.ui-state-focus.ui-state-active {
&:focus { @include button-focus-dark; }
}
&:active { background: darken($button-color, 8%); }
}
@else {
border-color: darken($button-color, 15%);
&:focus { @include button-focus-dark; }
&.active, &.Button--active, &:active {
background: darken($button-color, 8%);
box-shadow: none;
}
&:focus { @include button-focus-dark; }
&.active, &.Button--active, &:active {
background: $button-color-darkened-5;
box-shadow: none;
}
}
// Grid System
// -----------

21
lib/brandable_css.rb
View File

@ -135,8 +135,27 @@ module BrandableCSS
handle_urls(default, config, css_urls)
end
def computed_variables(active_brand_config=nil)
[
['ic-brand-primary', 'darken', 5],
['ic-brand-primary', 'darken', 10],
['ic-brand-primary', 'darken', 15],
['ic-brand-primary', 'lighten', 5],
['ic-brand-primary', 'lighten', 10],
['ic-brand-primary', 'lighten', 15],
['ic-brand-button--primary-bgd', 'darken', 5],
['ic-brand-button--primary-bgd', 'darken', 15],
['ic-brand-button--secondary-bgd', 'darken', 5],
['ic-brand-button--secondary-bgd', 'darken', 15],
].each_with_object({}) do |(variable_name, darken_or_lighten, percent), memo|
color = brand_variable_value(variable_name, active_brand_config, variables_map_with_image_urls)
computed_color = CanvasColor::Color.new(color).send(darken_or_lighten, percent/100.0)
memo["#{variable_name}-#{darken_or_lighten}ed-#{percent}"] = computed_color.to_s
end
end
def all_brand_variable_values(active_brand_config=nil, css_urls=false)
variables_map.each_with_object({}) do |(key, _), memo|
variables_map.each_with_object(computed_variables(active_brand_config)) do |(key, _), memo|
memo[key] = brand_variable_value(key, active_brand_config, variables_map_with_image_urls, css_urls)
end
end

10
spec/models/brand_config_spec.rb
View File

@ -123,6 +123,16 @@ describe BrandConfig do
it "defines right-looking css in the :root scope" do
expect(@subaccount_bc.to_css).to match /:root \{
[\s|\S]*--ic-brand-primary-darkened-5: #312111;
--ic-brand-primary-darkened-10: #2E1F10;
--ic-brand-primary-darkened-15: #2C1D0F;
--ic-brand-primary-lightened-5: #3D2D1C;
--ic-brand-primary-lightened-10: #473828;
--ic-brand-primary-lightened-15: #514334;
--ic-brand-button--primary-bgd-darkened-5: #312111;
--ic-brand-button--primary-bgd-darkened-15: #2C1D0F;
--ic-brand-button--secondary-bgd-darkened-5: #2B3942;
--ic-brand-button--secondary-bgd-darkened-15: #27333B;
[\s|\S]*--ic-brand-primary: #321;
[\s|\S]*--ic-brand-global-nav-bgd: #123;
/