From 87e98772b09b9b317dee020d22115517635a29c8 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 10 Oct 2018 00:07:28 +0300 Subject: initial contrast display support --- src/components/contrast_ratio/contrast_ratio.vue | 64 ++++++++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 src/components/contrast_ratio/contrast_ratio.vue (limited to 'src/components/contrast_ratio/contrast_ratio.vue') diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue new file mode 100644 index 00000000..6c4a59b6 --- /dev/null +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -0,0 +1,64 @@ + + + + + -- cgit v1.2.3-70-g09d2 From 1723f427f59bb6bf62bb35de93c7226aef2e8727 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Tue, 13 Nov 2018 16:30:01 +0300 Subject: updates --- src/App.scss | 4 +- src/_variables.scss | 2 +- src/components/contrast_ratio/contrast_ratio.vue | 50 ++++++++--------------- src/components/notifications/notifications.scss | 8 ++-- src/components/opacity_input/opacity_input.vue | 10 ----- src/components/style_switcher/style_switcher.js | 24 ++++++++++- src/components/style_switcher/style_switcher.vue | 26 +++++++----- src/services/color_convert/color_convert.js | 16 ++++---- src/services/style_setter/style_setter.js | 6 ++- static/font/config.json | 26 ++++++++---- static/font/css/fontello-codes.css | 6 ++- static/font/css/fontello-embedded.css | 18 ++++---- static/font/css/fontello-ie7-codes.css | 6 ++- static/font/css/fontello-ie7.css | 6 ++- static/font/css/fontello.css | 20 +++++---- static/font/demo.html | 22 ++++++---- static/font/font/fontello.eot | Bin 15552 -> 16124 bytes static/font/font/fontello.svg | 8 +++- static/font/font/fontello.ttf | Bin 15384 -> 15956 bytes static/font/font/fontello.woff | Bin 9432 -> 9848 bytes static/font/font/fontello.woff2 | Bin 8020 -> 8372 bytes 21 files changed, 145 insertions(+), 113 deletions(-) (limited to 'src/components/contrast_ratio/contrast_ratio.vue') diff --git a/src/App.scss b/src/App.scss index c91b6a61..0a2ff5cc 100644 --- a/src/App.scss +++ b/src/App.scss @@ -479,8 +479,8 @@ nav { line-height: 28px; &.error { - background-color: $fallback--cAlertRed; - background-color: var(--cAlertRed, $fallback--cAlertRed); + background-color: $fallback--alertError; + background-color: var(--alertError, $fallback--alertError); } } diff --git a/src/_variables.scss b/src/_variables.scss index 0f73e929..d0d91efe 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -16,7 +16,7 @@ $fallback--cBlue: #0095ff; $fallback--cGreen: #0fa00f; $fallback--cOrange: orange; -$fallback--cAlertRed: rgba(211,16,20,.5); +$fallback--alertError: rgba(211,16,20,.5); $fallback--panelRadius: 10px; $fallback--checkBoxRadius: 2px; diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index 6c4a59b6..a428e75f 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -1,41 +1,28 @@ diff --git a/src/i18n/en.json b/src/i18n/en.json index 04e9977b..18b47ba7 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -165,7 +165,19 @@ "style": { "common": { "color": "Color", - "opacity": "Opacity" + "opacity": "Opacity", + "contrast": { + "hint": "Contrast ratio is {ratio}, it {level} {context}", + "level": { + "aa": "meets Level AA guideline (minimal)", + "aaa": "meets Level AAA guideline (recommended)", + "bad": "doesn't meet any accessibility guidelines" + }, + "context": { + "18pt": "for large (18pt+) text", + "text": "for text" + } + } }, "basic_colors": { "_tab_label": "Basic", -- cgit v1.2.3-70-g09d2 From 92afd6af12abc0a11f721a8f4c181c55522743ac Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 21 Nov 2018 22:01:34 +0300 Subject: layout fixes --- src/components/contrast_ratio/contrast_ratio.vue | 3 +++ src/components/style_switcher/style_switcher.scss | 17 +++++++++++++---- src/components/style_switcher/style_switcher.vue | 10 ++++------ src/i18n/en.json | 6 +++--- 4 files changed, 23 insertions(+), 13 deletions(-) (limited to 'src/components/contrast_ratio/contrast_ratio.vue') diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index f4f9ea86..bd971d00 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -54,6 +54,9 @@ export default { display: flex; justify-content: flex-end; + margin-top: -4px; + margin-bottom: 5px; + .label { margin-right: 1em; } diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss index 6c6e913a..f8529b4f 100644 --- a/src/components/style_switcher/style_switcher.scss +++ b/src/components/style_switcher/style_switcher.scss @@ -59,6 +59,10 @@ color: var(--cRed, $fallback--cRed); } + .tab-switcher { + margin: 0 -1em; + } + .apply-container, .radius-container, .color-container, @@ -75,10 +79,19 @@ } .color-container{ + > h4 { + width: 99%; + } flex-wrap: wrap; justify-content: space-between; } + .color-container, + .shadow-container, + .radius-container { + margin: 1em 1em 0; + } + .presets-container, .shadow-selector { display: flex; @@ -139,10 +152,6 @@ display:flex; align-items: baseline; } - - h4 { - margin-top: 1em; - } } .radius-item { diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index fbf9a20a..4ed62242 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -48,9 +48,9 @@

{{$t('settings.theme_help')}}

-
+
+

{{ $t('settings.style.common_colors.main') }}

-

{{ $t('settings.style.basic_colors.main') }}

@@ -59,21 +59,19 @@
-

{{ $t('settings.style.basic_colors.foreground') }}

-

{{ $t('settings.style.basic_colors.foreground_hint') }}

+

{{ $t('settings.style.common_colors.foreground_hint') }}

+

{{ $t('settings.style.common_colors.rgbo') }}

-

{{ $t('settings.style.basic_colors.rgbo') }}

-

.

diff --git a/src/i18n/en.json b/src/i18n/en.json index 3fcc6da2..b039757e 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -179,9 +179,9 @@ } } }, - "basic_colors": { - "_tab_label": "Basic", - "main": "Basic colors", + "common_colors": { + "_tab_label": "Common", + "main": "Common colors", "foreground": "Panel header, top bar, buttons, text fields", "foreground_hint": "See \"Advanced\" tab for more detailed control", "rgbo": "Icons, accents, badges" -- cgit v1.2.3-70-g09d2