feat(*): remove black color (#172)

* feat(*): change colors for icons, input, link, attach, collapse, select & spinner * feat(*): add border variables * feat(*): add gemini test images * feat(attach): fix input color * chore(*): udpate gemini screens
alfa-laboratory · Aug 7, 2017 · 4bb2ebc · 4bb2ebc
1 parent 1ad199e
commit 4bb2ebc
Show file tree

Hide file tree

Showing 142 changed files with 178 additions and 76 deletions.
diff --git a/...tach_theme_alfa-on-color.attach_size_l.attach_prop-set_1/focused/chromeWin7.png b/...tach_theme_alfa-on-color.attach_size_l.attach_prop-set_1/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_l.attach_prop-set_1/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_l.attach_prop-set_1/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-color.attach_size_l.attach_prop-set_2/focused/chromeWin7.png b/...tach_theme_alfa-on-color.attach_size_l.attach_prop-set_2/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_l.attach_prop-set_2/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_l.attach_prop-set_2/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_l.attach_prop-set_3/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_l.attach_prop-set_3/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_l.attach_prop-set_4/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_l.attach_prop-set_4/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-color.attach_size_m.attach_prop-set_1/focused/chromeWin7.png b/...tach_theme_alfa-on-color.attach_size_m.attach_prop-set_1/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_m.attach_prop-set_1/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_m.attach_prop-set_1/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-color.attach_size_m.attach_prop-set_2/focused/chromeWin7.png b/...tach_theme_alfa-on-color.attach_size_m.attach_prop-set_2/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_m.attach_prop-set_2/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_m.attach_prop-set_2/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_m.attach_prop-set_3/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_m.attach_prop-set_3/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_m.attach_prop-set_4/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_m.attach_prop-set_4/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-color.attach_size_s.attach_prop-set_1/focused/chromeWin7.png b/...tach_theme_alfa-on-color.attach_size_s.attach_prop-set_1/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_s.attach_prop-set_1/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_s.attach_prop-set_1/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-color.attach_size_s.attach_prop-set_2/focused/chromeWin7.png b/...tach_theme_alfa-on-color.attach_size_s.attach_prop-set_2/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_s.attach_prop-set_2/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_s.attach_prop-set_2/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_s.attach_prop-set_3/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_s.attach_prop-set_3/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-color.attach_size_s.attach_prop-set_4/plain/chromeWin7.png b/...attach_theme_alfa-on-color.attach_size_s.attach_prop-set_4/plain/chromeWin7.png
diff --git a/...ach_theme_alfa-on-color.attach_size_xl.attach_prop-set_1/focused/chromeWin7.png b/...ach_theme_alfa-on-color.attach_size_xl.attach_prop-set_1/focused/chromeWin7.png
diff --git a/...ttach_theme_alfa-on-color.attach_size_xl.attach_prop-set_1/plain/chromeWin7.png b/...ttach_theme_alfa-on-color.attach_size_xl.attach_prop-set_1/plain/chromeWin7.png
diff --git a/...ach_theme_alfa-on-color.attach_size_xl.attach_prop-set_2/focused/chromeWin7.png b/...ach_theme_alfa-on-color.attach_size_xl.attach_prop-set_2/focused/chromeWin7.png
diff --git a/...ttach_theme_alfa-on-color.attach_size_xl.attach_prop-set_2/plain/chromeWin7.png b/...ttach_theme_alfa-on-color.attach_size_xl.attach_prop-set_2/plain/chromeWin7.png
diff --git a/...ttach_theme_alfa-on-color.attach_size_xl.attach_prop-set_3/plain/chromeWin7.png b/...ttach_theme_alfa-on-color.attach_size_xl.attach_prop-set_3/plain/chromeWin7.png
diff --git a/...ttach_theme_alfa-on-color.attach_size_xl.attach_prop-set_4/plain/chromeWin7.png b/...ttach_theme_alfa-on-color.attach_size_xl.attach_prop-set_4/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-white.attach_size_l.attach_prop-set_1/focused/chromeWin7.png b/...tach_theme_alfa-on-white.attach_size_l.attach_prop-set_1/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_l.attach_prop-set_1/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_l.attach_prop-set_1/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-white.attach_size_l.attach_prop-set_2/focused/chromeWin7.png b/...tach_theme_alfa-on-white.attach_size_l.attach_prop-set_2/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_l.attach_prop-set_2/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_l.attach_prop-set_2/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_l.attach_prop-set_3/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_l.attach_prop-set_3/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_l.attach_prop-set_4/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_l.attach_prop-set_4/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-white.attach_size_m.attach_prop-set_1/focused/chromeWin7.png b/...tach_theme_alfa-on-white.attach_size_m.attach_prop-set_1/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_m.attach_prop-set_1/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_m.attach_prop-set_1/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-white.attach_size_m.attach_prop-set_2/focused/chromeWin7.png b/...tach_theme_alfa-on-white.attach_size_m.attach_prop-set_2/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_m.attach_prop-set_2/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_m.attach_prop-set_2/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_m.attach_prop-set_3/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_m.attach_prop-set_3/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_m.attach_prop-set_4/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_m.attach_prop-set_4/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-white.attach_size_s.attach_prop-set_1/focused/chromeWin7.png b/...tach_theme_alfa-on-white.attach_size_s.attach_prop-set_1/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_s.attach_prop-set_1/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_s.attach_prop-set_1/plain/chromeWin7.png
diff --git a/...tach_theme_alfa-on-white.attach_size_s.attach_prop-set_2/focused/chromeWin7.png b/...tach_theme_alfa-on-white.attach_size_s.attach_prop-set_2/focused/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_s.attach_prop-set_2/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_s.attach_prop-set_2/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_s.attach_prop-set_3/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_s.attach_prop-set_3/plain/chromeWin7.png
diff --git a/...attach_theme_alfa-on-white.attach_size_s.attach_prop-set_4/plain/chromeWin7.png b/...attach_theme_alfa-on-white.attach_size_s.attach_prop-set_4/plain/chromeWin7.png
diff --git a/...ach_theme_alfa-on-white.attach_size_xl.attach_prop-set_1/focused/chromeWin7.png b/...ach_theme_alfa-on-white.attach_size_xl.attach_prop-set_1/focused/chromeWin7.png
diff --git a/...ttach_theme_alfa-on-white.attach_size_xl.attach_prop-set_1/plain/chromeWin7.png b/...ttach_theme_alfa-on-white.attach_size_xl.attach_prop-set_1/plain/chromeWin7.png
diff --git a/...ach_theme_alfa-on-white.attach_size_xl.attach_prop-set_2/focused/chromeWin7.png b/...ach_theme_alfa-on-white.attach_size_xl.attach_prop-set_2/focused/chromeWin7.png
diff --git a/...ttach_theme_alfa-on-white.attach_size_xl.attach_prop-set_2/plain/chromeWin7.png b/...ttach_theme_alfa-on-white.attach_size_xl.attach_prop-set_2/plain/chromeWin7.png
diff --git a/...ttach_theme_alfa-on-white.attach_size_xl.attach_prop-set_3/plain/chromeWin7.png b/...ttach_theme_alfa-on-white.attach_size_xl.attach_prop-set_3/plain/chromeWin7.png
diff --git a/...ttach_theme_alfa-on-white.attach_size_xl.attach_prop-set_4/plain/chromeWin7.png b/...ttach_theme_alfa-on-white.attach_size_xl.attach_prop-set_4/plain/chromeWin7.png
diff --git a/...on-white.calendar-input_size_l.calendar-input_prop-set_1/focused/chromeWin7.png b/...on-white.calendar-input_size_l.calendar-input_prop-set_1/focused/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_l.calendar-input_prop-set_1/plain/chromeWin7.png b/...a-on-white.calendar-input_size_l.calendar-input_prop-set_1/plain/chromeWin7.png
diff --git a/...on-white.calendar-input_size_l.calendar-input_prop-set_2/focused/chromeWin7.png b/...on-white.calendar-input_size_l.calendar-input_prop-set_2/focused/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_l.calendar-input_prop-set_2/plain/chromeWin7.png b/...a-on-white.calendar-input_size_l.calendar-input_prop-set_2/plain/chromeWin7.png
diff --git a/...on-white.calendar-input_size_l.calendar-input_prop-set_3/focused/chromeWin7.png b/...on-white.calendar-input_size_l.calendar-input_prop-set_3/focused/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_l.calendar-input_prop-set_3/plain/chromeWin7.png b/...a-on-white.calendar-input_size_l.calendar-input_prop-set_3/plain/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_l.calendar-input_prop-set_4/plain/chromeWin7.png b/...a-on-white.calendar-input_size_l.calendar-input_prop-set_4/plain/chromeWin7.png
diff --git a/...on-white.calendar-input_size_m.calendar-input_prop-set_1/focused/chromeWin7.png b/...on-white.calendar-input_size_m.calendar-input_prop-set_1/focused/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_m.calendar-input_prop-set_1/plain/chromeWin7.png b/...a-on-white.calendar-input_size_m.calendar-input_prop-set_1/plain/chromeWin7.png
diff --git a/...on-white.calendar-input_size_m.calendar-input_prop-set_2/focused/chromeWin7.png b/...on-white.calendar-input_size_m.calendar-input_prop-set_2/focused/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_m.calendar-input_prop-set_2/plain/chromeWin7.png b/...a-on-white.calendar-input_size_m.calendar-input_prop-set_2/plain/chromeWin7.png
diff --git a/...on-white.calendar-input_size_m.calendar-input_prop-set_3/focused/chromeWin7.png b/...on-white.calendar-input_size_m.calendar-input_prop-set_3/focused/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_m.calendar-input_prop-set_3/plain/chromeWin7.png b/...a-on-white.calendar-input_size_m.calendar-input_prop-set_3/plain/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_m.calendar-input_prop-set_4/plain/chromeWin7.png b/...a-on-white.calendar-input_size_m.calendar-input_prop-set_4/plain/chromeWin7.png
diff --git a/...on-white.calendar-input_size_s.calendar-input_prop-set_1/focused/chromeWin7.png b/...on-white.calendar-input_size_s.calendar-input_prop-set_1/focused/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_s.calendar-input_prop-set_1/plain/chromeWin7.png b/...a-on-white.calendar-input_size_s.calendar-input_prop-set_1/plain/chromeWin7.png
diff --git a/...on-white.calendar-input_size_s.calendar-input_prop-set_2/focused/chromeWin7.png b/...on-white.calendar-input_size_s.calendar-input_prop-set_2/focused/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_s.calendar-input_prop-set_2/plain/chromeWin7.png b/...a-on-white.calendar-input_size_s.calendar-input_prop-set_2/plain/chromeWin7.png
diff --git a/...on-white.calendar-input_size_s.calendar-input_prop-set_3/focused/chromeWin7.png b/...on-white.calendar-input_size_s.calendar-input_prop-set_3/focused/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_s.calendar-input_prop-set_3/plain/chromeWin7.png b/...a-on-white.calendar-input_size_s.calendar-input_prop-set_3/plain/chromeWin7.png
diff --git a/...a-on-white.calendar-input_size_s.calendar-input_prop-set_4/plain/chromeWin7.png b/...a-on-white.calendar-input_size_s.calendar-input_prop-set_4/plain/chromeWin7.png
diff --git a/...n-white.calendar-input_size_xl.calendar-input_prop-set_1/focused/chromeWin7.png b/...n-white.calendar-input_size_xl.calendar-input_prop-set_1/focused/chromeWin7.png
diff --git a/...-on-white.calendar-input_size_xl.calendar-input_prop-set_1/plain/chromeWin7.png b/...-on-white.calendar-input_size_xl.calendar-input_prop-set_1/plain/chromeWin7.png
diff --git a/...n-white.calendar-input_size_xl.calendar-input_prop-set_2/focused/chromeWin7.png b/...n-white.calendar-input_size_xl.calendar-input_prop-set_2/focused/chromeWin7.png
diff --git a/...-on-white.calendar-input_size_xl.calendar-input_prop-set_2/plain/chromeWin7.png b/...-on-white.calendar-input_size_xl.calendar-input_prop-set_2/plain/chromeWin7.png
diff --git a/...n-white.calendar-input_size_xl.calendar-input_prop-set_3/focused/chromeWin7.png b/...n-white.calendar-input_size_xl.calendar-input_prop-set_3/focused/chromeWin7.png
diff --git a/...-on-white.calendar-input_size_xl.calendar-input_prop-set_3/plain/chromeWin7.png b/...-on-white.calendar-input_size_xl.calendar-input_prop-set_3/plain/chromeWin7.png
diff --git a/...-on-white.calendar-input_size_xl.calendar-input_prop-set_4/plain/chromeWin7.png b/...-on-white.calendar-input_size_xl.calendar-input_prop-set_4/plain/chromeWin7.png
diff --git a/...i/screens/plate/plate_theme_alfa-on-color.plate_prop-set_1/plain/chromeWin7.png b/...i/screens/plate/plate_theme_alfa-on-color.plate_prop-set_1/plain/chromeWin7.png
diff --git a/...i/screens/plate/plate_theme_alfa-on-white.plate_prop-set_1/plain/chromeWin7.png b/...i/screens/plate/plate_theme_alfa-on-white.plate_prop-set_1/plain/chromeWin7.png
diff --git a/.../spin/spin_theme_alfa-on-white.spin_size_l.spin_prop-set_1/plain/chromeWin7.png b/.../spin/spin_theme_alfa-on-white.spin_size_l.spin_prop-set_1/plain/chromeWin7.png
diff --git a/.../spin/spin_theme_alfa-on-white.spin_size_m.spin_prop-set_1/plain/chromeWin7.png b/.../spin/spin_theme_alfa-on-white.spin_size_m.spin_prop-set_1/plain/chromeWin7.png
diff --git a/.../spin/spin_theme_alfa-on-white.spin_size_s.spin_prop-set_1/plain/chromeWin7.png b/.../spin/spin_theme_alfa-on-white.spin_size_s.spin_prop-set_1/plain/chromeWin7.png
diff --git a/...spin/spin_theme_alfa-on-white.spin_size_xl.spin_prop-set_1/plain/chromeWin7.png b/...spin/spin_theme_alfa-on-white.spin_size_xl.spin_prop-set_1/plain/chromeWin7.png
diff --git a/gemini/screens/user/user_theme_alfa-on-white/hovered/chromeWin7.png b/gemini/screens/user/user_theme_alfa-on-white/hovered/chromeWin7.png
diff --git a/gemini/screens/user/user_theme_alfa-on-white/plain/chromeWin7.png b/gemini/screens/user/user_theme_alfa-on-white/plain/chromeWin7.png
diff --git a/src/attach/attach_theme_alfa-on-color.css b/src/attach/attach_theme_alfa-on-color.css
@@ -0,0 +1,12 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import '../vars.css';
+
+.attach_theme_alfa-on-color {
+    .attach__file,
+    .attach__no-file {
+        color: var(--color-content-alfa-on-color);
+    }
+}
diff --git a/src/attach/attach_theme_alfa-on-white.css b/src/attach/attach_theme_alfa-on-white.css
@@ -0,0 +1,12 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import '../vars.css';
+
+.attach_theme_alfa-on-white {
+    .attach__file,
+    .attach__no-file {
+        color: var(--color-content-alfa-on-white);
+    }
+}
diff --git a/src/attach/fantasy/attach_theme_alfa-on-color.css b/src/attach/fantasy/attach_theme_alfa-on-color.css
@@ -0,0 +1,12 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import '../../vars-fantasy.css';
+
+.attach_theme_alfa-on-color {
+    .attach__file,
+    .attach__no-file {
+        color: var(--color-content-alfa-on-white);
+    }
+}
diff --git a/src/attach/fantasy/attach_theme_alfa-on-white.css b/src/attach/fantasy/attach_theme_alfa-on-white.css
@@ -0,0 +1,12 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@import '../../vars-fantasy.css';
+
+.attach_theme_alfa-on-white {
+    .attach__file,
+    .attach__no-file {
+        color: var(--color-content-alfa-on-white);
+    }
+}
diff --git a/src/attach/fantasy/index.js b/src/attach/fantasy/index.js
@@ -5,5 +5,7 @@
 import '../../button/fantasy';
 
 import './attach.css';
+import './attach_theme_alfa-on-color.css';
+import './attach_theme_alfa-on-white.css';
 
 export default from '../attach';
diff --git a/src/attach/index.js b/src/attach/index.js
@@ -5,5 +5,7 @@
 import '../button';
 
 import './attach.css';
+import './attach_theme_alfa-on-color.css';
+import './attach_theme_alfa-on-white.css';
 
 export default from './attach';
diff --git a/src/button/fantasy/button_theme_alfa-on-color.css b/src/button/fantasy/button_theme_alfa-on-color.css
@@ -7,34 +7,34 @@
 .button_theme_alfa-on-color {
     color: var(--color-content-alfa-on-color);
     background: transparent;
-    border-color: rgba(255, 255, 255, .4);
+    border-color: var(--color-border-control-alfa-on-color);
     border-style: solid;
     border-width: 1px;
 
     &.button_hovered {
-        border-color: var(--color-content-alfa-on-color);
+        border-color: var(--color-border-control-hovered-alfa-on-color);
     }
 
     &.button_focused {
-        border-color: var(--color-content-alfa-on-color);
+        border-color: var(--color-border-control-focused-alfa-on-color);
         box-shadow: inset 0 0 0 1px var(--color-content-alfa-on-color);
 
         &.button_hovered {
-            border-color: var(--color-content-alfa-on-color);
+            border-color: var(--color-border-control-hovered-alfa-on-color);
             box-shadow: inset 0 0 0 1px var(--color-content-alfa-on-color);
         }
     }
 
     &.button_pressed {
         background: rgba(0, 0, 0, .1);
-        border-color: var(--color-content-alfa-on-color);
+        border-color: var(--color-border-control-focused-alfa-on-color);
     }
 
     &.button_checked,
     &.button_view_action {
         color: var(--color-content-alfa-on-color);
         background: rgba(255, 255, 255, .2);
-        border-color: rgba(255, 255, 255, .05);
+        border-color: var(--color-border-control-checked-alfa-on-color);
 
         &.button_hovered {
             background: rgba(255, 255, 255, .3);
@@ -45,7 +45,7 @@
         }
 
         &.button_focused {
-            border-color: var(--color-content-alfa-on-color);
+            border-color: var(--color-border-control-focused-alfa-on-color);
         }
     }
 

diff --git a/src/button/fantasy/button_theme_alfa-on-white.css b/src/button/fantasy/button_theme_alfa-on-white.css
@@ -7,34 +7,34 @@
 .button_theme_alfa-on-white {
     color: var(--color-content-alfa-on-white);
     background: transparent;
-    border-color: rgba(10, 30, 50, .3);
+    border-color: var(--color-border-control-alfa-on-white);
     border-style: solid;
     border-width: 1px;
 
     &.button_hovered {
-        border-color: var(--color-content-alfa-on-white);
+        border-color: var(--color-border-control-hovered-alfa-on-white);
     }
 
     &.button_focused {
-        border-color: var(--color-content-alfa-on-white);
+        border-color: var(--color-border-control-focused-alfa-on-white);
         box-shadow: inset 0 0 0 1px var(--color-content-alfa-on-white);
 
         &.button_hovered {
-            border-color: var(--color-content-alfa-on-white);
+            border-color: var(--color-border-control-focused-alfa-on-white);
             box-shadow: inset 0 0 0 1px var(--color-content-alfa-on-white);
         }
     }
 
     &.button_pressed {
         background: rgba(10, 30, 50, .05);
-        border-color: var(--color-content-alfa-on-white);
+        border-color: var(--color-border-control-focused-alfa-on-white);
     }
 
     &.button_checked,
     &.button_view_action {
         color: var(--color-content-alfa-on-white);
         background: rgba(10, 30, 50, .15);
-        border-color: rgba(10, 30, 50, .05);
+        border-color: var(--color-border-control-checked-alfa-on-white);
 
         &.button_hovered {
             background: rgba(10, 30, 50, .25);
@@ -45,7 +45,7 @@
         }
 
         &.button_focused {
-            border-color: var(--color-content-alfa-on-white);
+            border-color: var(--color-border-control-focused-alfa-on-white);
         }
     }
 

diff --git a/src/checkbox/fantasy/checkbox_theme_alfa-on-color.css b/src/checkbox/fantasy/checkbox_theme_alfa-on-color.css
@@ -9,7 +9,7 @@
 
     .checkbox__box {
         background: var(--color-background-control-alfa-on-color);
-        border: 1px solid rgba(255, 255, 255, .5);
+        border: 1px solid var(--color-border-control-alfa-on-color);
         transition: all 200ms ease;
     }
 
@@ -28,12 +28,12 @@
     &.checkbox_focused,
     &.checkbox_hovered {
         .checkbox__box {
-            border-color: var(--color-content-alfa-on-color);
+            border-color: var(--color-border-control-focused-alfa-on-color);
         }
     }
 
     &.checkbox_focused .checkbox__box {
-        box-shadow: 0 0 0 1px var(--color-content-alfa-on-color);
+        box-shadow: 0 0 0 1px var(--color-border-control-focused-alfa-on-color);
     }
 
     &.checkbox_disabled {

diff --git a/src/checkbox/fantasy/checkbox_theme_alfa-on-white.css b/src/checkbox/fantasy/checkbox_theme_alfa-on-white.css
@@ -9,7 +9,7 @@
 
     .checkbox__box {
         background: var(--color-background-control-alfa-on-white);
-        border: 1px solid rgba(10, 30, 50, .3);
+        border: 1px solid var(--color-border-control-alfa-on-white);
         transition: all 200ms ease;
     }
 
@@ -28,12 +28,12 @@
     &.checkbox_focused,
     &.checkbox_hovered {
         .checkbox__box {
-            border-color: var(--color-content-alfa-on-white);
+            border-color: var(--color-border-control-focused-alfa-on-white);
         }
     }
 
     &.checkbox_focused .checkbox__box {
-        box-shadow: 0 0 0 1px var(--color-content-alfa-on-white);
+        box-shadow: 0 0 0 1px var(--color-border-control-focused-alfa-on-white);
     }
 
     &.checkbox_disabled {

diff --git a/src/icon/images/icon_calendar__l__white.svg b/src/icon/images/icon_calendar__l__white.svg
diff --git a/src/icon/images/icon_calendar__m__white.svg b/src/icon/images/icon_calendar__m__white.svg
diff --git a/src/icon/images/icon_calendar__s__white.svg b/src/icon/images/icon_calendar__s__white.svg
diff --git a/src/icon/images/icon_calendar__xl__white.svg b/src/icon/images/icon_calendar__xl__white.svg
diff --git a/src/icon/images/icon_close__l__white.svg b/src/icon/images/icon_close__l__white.svg
diff --git a/src/icon/images/icon_close__m__white.svg b/src/icon/images/icon_close__m__white.svg
diff --git a/src/icon/images/icon_close__s__white.svg b/src/icon/images/icon_close__s__white.svg
diff --git a/src/icon/images/icon_close__xl__white.svg b/src/icon/images/icon_close__xl__white.svg
diff --git a/src/icon/images/icon_error__l__white.svg b/src/icon/images/icon_error__l__white.svg
diff --git a/src/icon/images/icon_error__m__white.svg b/src/icon/images/icon_error__m__white.svg
diff --git a/src/icon/images/icon_error__s__white.svg b/src/icon/images/icon_error__s__white.svg
diff --git a/src/icon/images/icon_error__xl__white.svg b/src/icon/images/icon_error__xl__white.svg
diff --git a/src/icon/images/icon_fail__l__white.svg b/src/icon/images/icon_fail__l__white.svg
diff --git a/src/icon/images/icon_fail__m__white.svg b/src/icon/images/icon_fail__m__white.svg
diff --git a/src/icon/images/icon_fail__s__white.svg b/src/icon/images/icon_fail__s__white.svg