Seamless boxes: use black for text color #1233
Labels
Comments
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, enabling the full spectrum of bootstrap colors to be used and providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, enabling the full spectrum of bootstrap colors to be used and providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, enabling the full spectrum of bootstrap colors to be used and providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, enabling the full spectrum of bootstrap colors to be used and providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 4, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 10, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
to ang-zeyu/markbind
that referenced
this issue
Jul 10, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (MarkBind#1234), and seamless boxes' content correctly inherit color (MarkBind#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
ang-zeyu
added a commit
that referenced
this issue
Jul 10, 2020
The box component has numerous possible styles which relies heavily on highly cascaded classes' styles. This introduces a high degree of coupling between the classes. Also, as a result of the cascading, some classes are rendered but completely overwritten by others, making them redundant. Let's revamp the box template and code to fix this. We centralize the dynamic styles of each element into computed properties, and extract helper methods to make these computed properties as lean as possible. Also, the component was already heavily rewritten prior to this. Hence, let's remove it from the eslint ignore list to achieve consistent code styling. While revamping the code, let's tweak the box styles a little as well: - Add some more padding for the header wrapper to better accomodate markdown taking up a lot of space. - Use the bootstrap 'primary' coloring for definition type boxes, providing better visual diversity. - Separate the applying of colors to the content wrapper and icon wrapper. In so doing, the color attribute applies only to the content (#1234), and seamless boxes' content correctly inherit color (#1233). - Use the lighter `text-xx` bootstrap classes for seamless boxes' coloring instead which are more suitable against a common white background than the overly dark `alert-xx` classes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Received some user feedback that colored text in
seamlessboxes are hard on the eyes. May be use black text, similar tolightboxes?The text was updated successfully, but these errors were encountered: