baseline-scss 0.5.0 → 1.0.0

data/src/baseline-scss/content/_buttons.scss

@@ -1,37 +1,90 @@
-#{$all-buttons} {
-  background-color: var(--button_background_color);
-  border: var(--button_border_width) var(--button_border_style) var(--button_border_color);
-  border-radius: var(--button_border_radius);
-  color: var(--button_color);
-  height: var(--button_height);
-  line-height: 1;
-  padding: var(--button_padding);
+@use 'baseline-scss/mixins' as _;
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'],
+.button {
+  --_button_background_color: var(--button_background_color);
+  --_button_border_color: var(--button_border_color);
+  --_button_border_width: var(--button_border_width, .1rem);
+  --_button_color: var(--button_color);
+
+  background-color: var(--_button_background_color, var(--gray_200));
+  border-color: var(--_button_border_color, var(--gray_600));
+  border-radius: var(--button_border_radius, .3rem);
+  border-style: var(--button_border_style, solid);
+  border-width: var(--_button_border_width);
+  color: var(--_button_color, var(--body_color));
+  display: var(--button_display, inline-block);
+  font-size: var(--button_font_size, var(--body_font_size));
+  font-weight: var(--button_font_weight, var(--font_weight_normal));
+  line-height: var(--button_line_height, calc(2 * (var(--_) - var(--_button_border_width))));
+  padding: var(--button_padding, 0 .5em);
+  text-decoration: var(--button_text-decoration, none);
+  white-space: var(--button_white_space, nowrap);
 
   &:hover {
-    background-color: var(--button_background_color_hover);
-    border-color: var(--button_border_color_hover);
-    color: var(--button_color_hover);
+    --_button_background_color: var(--button_background_color_hover, var(--button_background_color, var(--gray_300)));
+    --_button_border_color: var(--button_border_color_hover, var(--button_border_color, var(--gray_800)));
+    --_button_color: var(--button_color_hover, var(--button_color));
   }
 
   &:focus {
-    @include outline();
+    --_button_background_color: var(--button_background_color_focus, var(--button_background_color));
+    --_button_border_color: var(--button_border_color_focus, var(--button_border_color, var(--gray_600)));
+    --_button_color: var(--button_color_focus, var(--button_color));
 
-    background-color: var(--button_background_color_focus);
-    border-color: var(--button_border_color_focus);
-    color: var(--button_color_focus);
+    &:not(:focus-visible) {
+      outline: 0; // Explicitly remove focus outline in Chromium.
+    }
   }
+}
 
-  &:active {
-    background-color: var(--button_background_color_active);
-    border-color: var(--button_border_color_active);
-    color: var(--button_color_active);
+button:active,
+[type='button']:active,
+[type='reset']:active,
+[type='submit']:active,
+.button:has(:checked) {
+  --_button_background_color: var(--button_background_color_active, var(--button_background_color, var(--gray_100)));
+  --_button_border_color: var(--button_border_color_active, var(--button_border_color, var(--gray_500)));
+  --_button_color: var(--button_color_active, var(--button_color));
+}
+
+button:disabled,
+[type='button']:disabled,
+[type='reset']:disabled,
+[type='submit']:disabled,
+.button:has(:disabled),
+.button._disabled {
+  --_button_background_color: var(--button_background_color_disabled, var(--button_background_color));
+  --_button_border_color: var(--button_border_color_disabled, var(--button_border_color, var(--gray_300)));
+  --_button_color: var(--button_color_disabled, var(--button_color, var(--gray_400)));
+
+  pointer-events: none;
+}
+
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
+  &:not(:disabled) {
+    cursor: pointer; // Add 'hand' cursor to non-disabled button elements.
   }
+}
 
-  &:disabled {
-    background-color: var(--button_background_color_disabled);
-    border-color: var(--button_border_color_disabled);
-    color: var(--button_color_disabled);
-    pointer-events: none;
+button:not(:disabled),
+.button:not(._disabled) {
+  &:focus {
+    @include _.outline();
   }
 }
 
+a.button {
+  --link_color: var(--_button_color, var(--body_color));
+  --link_text_decoration: var(--button_text-decoration, none);
+}
+
+[role='button'] {
+  cursor: pointer; // Set the cursor for non-`<button>` buttons.
+}

data/src/baseline-scss/content/_code.scss

@@ -1,15 +1,28 @@
-pre {
-  @include _(var(--font_size_code), var(--font_size_code_lines));
-  @include margin(0 null var(--_));
-
-  font-family: var(--font_family_code);
-}
-
+pre,
 code,
 kbd,
 samp {
-  font-family: var(--font_family_code);
-  font-size: var(--font_size_code);
-  vertical-align: bottom;
+  font-family: var(--code_font_family);
+  font-size: var(--code_font_size);
+}
+
+pre {
+  display: block;
+  line-height: var(--code_line_height);
+  margin: 0 0 var(--_);
+  overflow: auto;
+
+  code {
+    color: inherit;
+    font-size: inherit;
+    word-break: normal;
+  }
 }
 
+code {
+  word-wrap: break-word;
+
+  a > & {
+    color: inherit; // Avoid broken underline and more when inside anchors.
+  }
+}

data/src/baseline-scss/content/_forms.scss

@@ -1,94 +1,208 @@
+@use 'baseline-scss/mixins' as _;
+
 form {
-  margin: 0 0 var(--_);
+  margin-bottom: var(--_);
+
+  > fieldset:last-child {
+    margin-bottom: 0;
+  }
 }
 
 fieldset {
-  @include after_border();
-
-  border: 0;
-  padding: var(--_) var(--fieldset_padding_h);
+  border: 0; // Don't affect page layout.
   margin: 0 0 var(--_);
+  min-width: 0; // Behave like a standard block element.
+  padding: var(--_) .5em;
 
-  &::after {
-    top: calc(-1 * var(--_));
-    z-index: -1;
-  }
-
-  > :last-child {
-    margin-bottom: 0;
+  &:has(> legend:first-child) {
+    @include _.inset_border();
   }
 }
 
 legend {
   background-color: var(--body_background_color);
-  padding: var(--legend_padding_h);
+  padding: 0 .5em;
 }
 
-#{$all-text-inputs},
-select {
-  background-color: var(--input_background_color);
-  border: var(--input_border_width) var(--input_border_style) var(--input_border_color);
-  border-radius: var(--input_border_radius);
-  color: var(--input_color);
-  height: var(--input_height);
+label {
+  display: inline-block; // Allow labels to use `margin` for spacing.
+}
 
-  &:hover {
-    background-color: var(--input_background_color_hover);
-    border-color: var(--input_border_color_hover);
-    color: var(--input_color_hover);
+input,
+optgroup,
+select,
+textarea {
+  font-size: inherit;
+  line-height: inherit;
+
+  &:disabled {
+    pointer-events: none;
   }
+}
 
+input,
+select,
+textarea {
   &:focus {
-    @include outline();
+    @include _.outline();
+  }
+}
+
+[type='color'],
+[type='date'],
+[type='datetime'],
+[type='datetime-local'],
+[type='email'],
+[type='month'],
+[type='number'],
+[type='password'],
+[type='search'],
+[type='tel'],
+[type='text'],
+[type='time'],
+[type='url'],
+[type='week'],
+input:not([type]),
+select,
+textarea {
+  --_input_background_color: var(--input_background_color);
+  --_input_border_color: var(--input_border_color);
+  --_input_border_width: var(--input_border_width, .1rem);
+  --_input_color: var(--input_color);
+
+  background-color: var(--_input_background_color, var(--body_background_color));
+  border-color: var(--_input_border_color, var(--gray_600));
+  border-radius: var(--input_border_radius, 0);
+  border-style: var(--input_border_style, solid);
+  border-width: var(--_input_border_width);
+  color: var(--_input_color, var(--body_color));
+  font-size: var(--input_font_size, var(--body_font_size));
+  font-weight: var(--input_font_weight, var(--font_weight_normal));
+  line-height: var(--input_line_height, calc(2 * (var(--_) - var(--_input_border_width))));
+  padding: var(--input_padding, 0 .25em);
+
+  &:hover {
+    --_input_background_color: var(--input_background_color_hover, var(--input_background_color));
+    --_input_border_color: var(--input_border_color_hover, var(--input_border_color, var(--gray_800)));
+    --_input_color: var(--input_color_hover, var(--input_color));
+  }
 
-    background-color: var(--input_background_color_focus);
-    border-color: var(--input_border_color_focus);
-    color: var(--input_color_focus);
+  &:focus {
+    --_input_background_color: var(--input_background_color_focus, var(--input_background_color));
+    --_input_border_color: var(--input_border_color_focus, var(--input_border_color));
+    --_input_color: var(--input_color_focus, var(--input_color));
   }
 
   &:active {
-    background-color: var(--input_background_color_active);
-    border-color: var(--input_border_color_active);
-    color: var(--input_color_active);
+    --_input_background_color: var(--input_background_color_active, var(--input_background_color));
+    --_input_border_color: var(--input_border_color_active, var(--input_border_color, var(--gray_500)));
+    --_input_color: var(--input_color_active, var(--input_color));
   }
 
-  &:disabled {
-    background-color: var(--input_background_color_disabled);
-    border-color: var(--input_border_color_disabled);
-    color: var(--input_color_disabled);
-    pointer-events: none;
+  &[aria-activedescendant] {
+    outline: 0;
   }
 
-  &:read-only {
-    background-color: var(--input_background_color_read_only);
-    border-color: var(--input_border_color_read_only);
-    color: var(--input_color_read_only);
+  &[aria-invalid='true'] {
+    --_input_background_color: var(--input_background_color_invalid, var(--invalid_background_color));
+    --_input_border_color: var(--input_border_color_invalid, var(--invalid_border_color));
   }
 }
 
-#{$all-text-inputs} {
-  padding: var(--input_padding);
+[type='color'],
+[type='date'],
+[type='datetime'],
+[type='datetime-local'],
+[type='email'],
+[type='month'],
+[type='number'],
+[type='password'],
+[type='search'],
+[type='tel'],
+[type='text'],
+[type='time'],
+[type='url'],
+[type='week'],
+input:not([type]),
+textarea {
+  &:focus:invalid {
+    --_input_background_color: var(--input_background_color_warning, var(--warning_background_color));
+    --_input_border_color: var(--input_border_color_warningd, var(--warning_border_color));
+  }
+
+  &::placeholder {
+    color: var(--input_placeholder_color, var(--gray_600));
+  }
+
+  &:read-only {
+    --_input_background_color: var(--input_background_color_read_only, var(--input_background_color, var(--gray_200)));
+    --_input_border_color: var(--input_border_color_read_only, var(--input_border_color, var(--gray_300)));
+    --_input_color: var(--input_color_read_only, var(--input_color, var(--gray_400)));
+  }
+
+  &:user-invalid {
+    --_input_background_color: var(--input_background_color_invalid, var(--invalid_background_color));
+    --_input_border_color: var(--input_border_color_invalid, var(--invalid_border_color));
+  }
+
+  &:user-valid {
+    --_input_background_color: var(--input_background_color_valid, var(--valid_background_color));
+    --_input_border_color: var(--input_border_color_valid, var(--valid_border_color));
+  }
 }
 
-input[type='checkbox'],
-input[type='radio'],
-input[type='range'] {
-  &:focus {
-    @include outline();
+[type='color'],
+[type='date'],
+[type='datetime'],
+[type='datetime-local'],
+[type='email'],
+[type='month'],
+[type='number'],
+[type='password'],
+[type='search'],
+[type='tel'],
+[type='text'],
+[type='time'],
+[type='url'],
+[type='week'],
+input:not([type]),
+select,
+textarea {
+  &:disabled { // put here to override :read-only
+    --_input_background_color: var(--input_background_color_disabled, var(--input_background_color, var(--gray_200)));
+    --_input_border_color: var(--input_border_color_disabled, var(--input_border_color, var(--gray_300)));
+    --_input_color: var(--input_color_disabled, var(--input_color, var(--gray_400)));
   }
 }
 
-input[type='checkbox'],
-input[type='radio'] {
-  vertical-align: baseline;
+[type='range'] {
+  vertical-align: middle;
+}
+
+[type='search'] {
+  outline-offset: -.2rem;
 }
 
-input[type='range'] {
-  vertical-align: text-top;
+select {
+  height: var(--select_height, calc(2 * var(--_)));
+  margin-top: calc(var(--_input_border_width) / -2);
+  word-wrap: normal; // Remove the inheritance of word-wrap in Safari.
+
+  &:disabled {
+    opacity: 1; // Undo the opacity change from Chrome.
+  }
 }
 
 textarea {
+  --input_line_height: var(--body_line_height);
+  --input_padding: calc(var(--_half) - var(--_input_border_width)) .25em;
+
   height: auto;
-  padding: calc(var(--_half_ceil) - var(--input_border_width)) var(--textarea_padding_h) calc(var(--_half_floor) - var(--input_border_width));
+  resize: vertical; // Don't break its (horizontal) containers.
+  vertical-align: top;
 }
 
+::file-selector-button {
+  font: inherit; // Inherit font family and line height for file input buttons.
+  -webkit-appearance: button; // Correct the inability to style clickable types in iOS and Safari.
+}

data/src/baseline-scss/content/_index.scss

@@ -0,0 +1,8 @@
+@use '_buttons';
+@use '_code';
+@use '_forms';
+@use '_lists';
+@use '_multimedia';
+@use '_tables';
+@use '_typography';
+

data/src/baseline-scss/content/_lists.scss

@@ -1,5 +1,6 @@
 dl, ol, ul {
-  @include margin(0 null var(--_));
+  margin-top: 0;
+  margin-bottom: var(--_);
 
   & & {
     margin-bottom: 0;
@@ -7,7 +8,7 @@ dl, ol, ul {
 }
 
 dl dl {
-  margin-left: var(--dl_margin_l);
+  margin-left: 1.5em;
 }
 
 dt {
@@ -19,5 +20,5 @@ dd {
 }
 
 ol, ul {
-  padding-left: var(--list_padding_l);
+  padding-left: 1.5em;
 }

data/src/baseline-scss/content/_multimedia.scss

@@ -2,7 +2,20 @@ figure {
   margin: 0 0 var(--_);
 }
 
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle; // Remove gap between the bottom of their containers.
+}
+
 img {
   display: inline-block;
   max-width: 100%;
 }
+
+svg {
+  overflow: hidden; // Workaround for the SVG overflow bug in IE10/11.
+}

data/src/baseline-scss/content/_tables.scss

@@ -1,4 +1,6 @@
 table {
+  border-collapse: collapse; // Prevent double borders.
+	border-color: currentcolor;
   margin-bottom: var(--_);
   width: 100%;
 }
@@ -7,13 +9,25 @@ caption {
   font-weight: var(--font_weight_bold);
 }
 
+thead,
+tbody,
+tfoot,
+tr,
+td,
+th {
+  border-color: inherit;
+  border-style: solid;
+  border-width: 0;
+}
+
 thead th {
   font-weight: var(--font_weight_bold);
   vertical-align: bottom;
 }
 
 td, th {
-  padding: var(--table_cell_padding);
+  padding-block: var(--table_cell_padding_block, 0);
+  padding-inline: var(--table_cell_padding_inline, .25em);
   vertical-align: top;
 
   > dl,
@@ -25,3 +39,9 @@ td, th {
     }
   }
 }
+
+th {
+  font-weight: inherit;
+  text-align: inherit; // Matches default `<td>` alignment.
+  text-align: -webkit-match-parent; // Fix alignment for Safari.
+}

data/src/baseline-scss/content/_typography.scss

@@ -1,9 +1,13 @@
+@use 'baseline-scss/mixins' as _;
+
 address {
-  @include margin(0 null var(--_));
+  font-style: normal;
+  line-height: inherit;
+  margin-bottom: var(--_);
 }
 
 blockquote {
-  @include margin(0 var(--blockquote_margin_h) var(--_));
+  margin: 0 2em var(--_);
 }
 
 h1, ._h1,
@@ -12,86 +16,109 @@ h3, ._h3,
 h4, ._h4,
 h5, ._h5,
 h6, ._h6 {
-  @include margin(0 null var(--_));
-
-  font-family: var(--font_family_h);
-  font-weight: var(--font_weight_h);
+  font-family: var(--h_font_family);
+  font-weight: var(--h_font_weight);
+  margin-top: 0;
+  margin-bottom: var(--_);
 
   small, ._small {
-    font-weight: var(--font_weight);
+    font-weight: var(--font_weight_normal);
   }
 }
 
 h1, ._h1 {
-  @include _(var(--font_size_h1), var(--font_size_h1_lines));
+  font-size: var(--h1_font_size);
+  line-height: var(--h1_line_height);
 }
 
 h2, ._h2 {
-  @include _(var(--font_size_h2), var(--font_size_h2_lines));
+  font-size: var(--h2_font_size);
+  line-height: var(--h2_line_height);
 }
 
 h3, ._h3 {
-  @include _(var(--font_size_h3), var(--font_size_h3_lines));
+  font-size: var(--h3_font_size);
+  line-height: var(--h3_line_height);
 }
 
 h4, ._h4 {
-  @include _(var(--font_size_h4), var(--font_size_h4_lines));
+  font-size: var(--h4_font_size);
+  line-height: var(--h4_line_height);
 }
 
 h5, ._h5 {
-  @include _(var(--font_size_h5), var(--font_size_h5_lines));
+  font-size: var(--h5_font_size);
+  line-height: var(--h5_line_height);
 }
 
 h6, ._h6 {
-  @include _(var(--font_size_h6), var(--font_size_h6_lines));
+  font-size: var(--h6_font_size);
+  line-height: var(--h6_line_height);
 }
 
 p, ._p {
-  @include margin(0 null var(--_));
+  margin-top: 0;
+  margin-bottom: var(--_);
 }
 
 hr {
-  @include margin(0 null);
-
   border: 0;
-  border-top: var(--hr_border_width) var(--hr_border_style) var(--hr_border_color);
-  height: var(--hr_height);
+  border-top: var(--hr_border_size, .1rem) var(--hr_border_style, solid) var(--hr_border_color, var(--body_color));
+  box-sizing: border-box;
+  height: var(--hr_height, var(--_));
+  margin: 0;
 }
 
 a {
-  &:link {
-    color: var(--link_color);
+  &:any-link {
+    --_link_color: var(--link_color);
+    --_link_text_decoration: var(--link_text_decoration);
+
+    color: var(--_link_color, #00e);
+    text-decoration: var(--_link_text_decoration, underline);
+
+    &:visited {
+      --_link_color: var(--link_color_visited, var(--link_color, #528));
+      --_link_text_decoration: var(--link_text_decoration_visited, var(--link_text_decoration));
+    }
+
+    &:hover {
+      --_link_color: var(--link_color_hover, var(--link_color, #00f));
+      --_link_text_decoration: var(--link_text_decoration_hover, var(--link_text_decoration));
+    }
+
+    &:focus {
+      --_link_color: var(--link_color_focus, var(--link_color));
+      --_link_text_decoration: var(--link_text_decoration_focus, var(--link_text_decoration));
+
+      @include _.outline();
+
+      &._disabled {
+        outline: 0;
+      }
+    }
+
+    &:active {
+      --_link_color: var(--link_color_active, var(--link_color, #f00));
+      --_link_text_decoration: var(--link_text_decoration_active, var(--link_text_decoration));
+    }
   }
 
-  &:visited {
-    color: var(--link_visited_color);
-  }
-
-  &[href]:hover {
-    color: var(--link_hover_color);
-  }
-
-  &:focus {
-    @include outline();
-
-    color: var(--link_focus_color);
-  }
-
-  &[href]:active {
-    color: var(--link_active_color);
+  &:not([href]):not([tabindex]):focus {
+    outline: 0; // Plain anchors don't need an outline.
   }
 }
 
-._large {
-  font-size: var(--font_size_large);
-  line-height: 1;
+abbr[title] {
+  cursor: help; // Add explicit cursor to indicate changed behavior.
+  text-decoration-skip-ink: none; // Prevent the text-decoration to be skipped.
 }
 
 mark {
-  background-color: var(--mark_background_color);
+  background-color: var(--mark_background_color, #ff0);
 }
 
-small, ._small,
+small,
 sub,
 sup {
   font-size: var(--font_size_small);