baseline-scss 0.5.0 → 1.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7eeea729df4edd4249b79399ef0c51e6f52d692488ba4e4fb0ef1956746338b5
-  data.tar.gz: 30813afe07dc8a78077681caee1b0e7357a0dc1905556587d25b37f2820f42ba
+  metadata.gz: d9c4e193fe2e01039c6e1e1fc417b03df02e9efaefac0c9996c177aaea94cc1f
+  data.tar.gz: 8e0dd80eadae92e4fbcecad395321c6ebe88dca02e8d5462375f1e7bbb32ab53
 SHA512:
-  metadata.gz: 90ce022de83b9f3778a525c4d595ff38e15bf066374270009373927438bf09cdff158b07a8dcfbfd55bc42d30a946b9dbf82f8be93584148ea836f3fd0abb1b0
-  data.tar.gz: a741df48ba0a9b1953a78f461c29055cec1f4c71786d360bea13390d01c582417c756b43325e4819ba865a30175e01780c3324a88acbb4ed638d5754bf42b423
+  metadata.gz: 865e780f83232a06d0c2f8db5017b460fec3015748bddcae41cd85c5a4160925456d6e4fac8b106864e8b173ba78dab647ab2c433e51befa60f2914b08051d43
+  data.tar.gz: 1256b0e5190a71e2c68d2e0396f3b33eedf22861a19fd72932fb95ecab89bbbab26e8bae7ce1fc83475f49ec9e9201de2112a36c4301f6bcd51b5b498937b5aa

data/LICENSE

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2023 David Susco
+Copyright (c) 2025 David Susco
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

data/lib/baseline_scss/version.rb

@@ -1,3 +1,3 @@
 module BaselineScss
-  VERSION = '0.5.0'.freeze
+  VERSION = '1.0.0'.freeze
 end

data/lib/baseline_scss.rb

@@ -7,11 +7,9 @@ module BaselineScss
 
           options = Jekyll.configuration(options)
 
-          begin
-            options['sass']['load_paths'] << File.expand_path('../src', __dir__)
-          rescue
-            options.merge!({ 'sass' => { 'load_paths' => [File.expand_path('../src', __dir__)] } })
-          end
+          options['sass'] ||= {}
+          options['sass']['load_paths'] ||= []
+          options['sass']['load_paths'] << File.expand_path('../src', __dir__)
 
           options
         end

data/src/baseline-scss/_helpers.scss

@@ -1,5 +1,16 @@
-._clearfix {
-  @include clearfix();
+@use 'baseline-scss/mixins' as _;
+
+._clear_left {
+  clear: left;
+}
+._clear_right {
+  clear: right;
+}
+
+._clearfix::after {
+  display: block;
+  clear: both;
+  content: '';
 }
 
 ._margin_bottom {
@@ -9,6 +20,13 @@
   margin-bottom: 0;
 }
 
+._pull_left {
+  float: left;
+}
+._pull_right {
+  float: right;
+}
+
 ._responsive_table_wrapper {
   margin-bottom: var(--_);
   overflow-x: auto;
@@ -18,11 +36,9 @@
   }
 }
 
-._sr_only {
-  @include sr_only();
-}
-._sr_only_focusable {
-  @include sr_only_focusable();
+._sr_only,
+._sr_only_focusable:not(:focus):not(:focus-within) {
+  @include _.sr_only();
 }
 
 ._text_left {

data/src/baseline-scss/_mixins.scss

@@ -1,7 +1,65 @@
-@import 'baseline-scss/mixins/_';
-@import 'baseline-scss/mixins/_after_border';
-@import 'baseline-scss/mixins/_clearfix';
-@import 'baseline-scss/mixins/_font_awesome';
-@import 'baseline-scss/mixins/_max_width_container';
-@import 'baseline-scss/mixins/_outline';
-@import 'baseline-scss/mixins/_sr_only';
+@mixin centered_container() {
+  margin-inline: auto;
+  max-width: var(--centered_container_max_width, 100%);
+}
+
+@mixin font_awesome($content: '') {
+  content: $content;
+  display: var(--fa-display, inline-block);
+  font-family: var(--fa-style-family, 'FontAwesome');
+  font-style: normal;
+  font-variant: normal;
+  font-weight: var(--fa-style, 900);
+  line-height: 1;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@mixin full_bleed() {
+  --_full_bleed_background_color: var(--full_bleed_background_color, var(--body_background_color));
+
+  background-color: var(--_full_bleed_background_color);
+  box-shadow: 50vmax 0 0 0 var(--_full_bleed_background_color),
+              -50vmax 0 0 0 var(--_full_bleed_background_color);
+}
+
+@mixin inset_border() {
+  --_inset_border_color: var(--inset_border_color, var(--body_color));
+  --_inset_border_block_color: var(--inset_border_block_color, var(--_inset_border_color));
+  --_inset_border_inline_color: var(--inset_border_inline_color, var(--_inset_border_color));
+  --_inset_border_top_color: var(--inset_border_top_color, var(--_inset_border_block_color));
+  --_inset_border_right_color: var(--inset_border_right_color, var(--_inset_border_inline_color));
+  --_inset_border_bottom_color: var(--inset_border_bottom_color, var(--_inset_border_block_color));
+  --_inset_border_left_color: var(--inset_border_left_color, var(--_inset_border_inline_color));
+
+  --_inset_border_width: var(--inset_border_width, 1px);
+  --_inset_border_block_width: var(--inset_border_block_width, var(--_inset_border_width));
+  --_inset_border_inline_width: var(--inset_border_inline_width, var(--_inset_border_width));
+  --_inset_border_top_width: var(--inset_border_top_width, var(--_inset_border_block_width));
+  --_inset_border_right_width: calc(-1 * var(--inset_border_right_width, var(--_inset_border_inline_width)));
+  --_inset_border_bottom_width: calc(-1 * var(--inset_border_bottom_width, var(--_inset_border_block_width)));
+  --_inset_border_left_width: var(--inset_border_left_width, var(--_inset_border_inline_width));
+
+  box-shadow: inset 0 var(--_inset_border_top_width) 0 0 var(--_inset_border_top_color),
+              inset var(--_inset_border_right_width) 0 0 0 var(--_inset_border_right_color),
+              inset 0 var(--_inset_border_bottom_width) 0 0 var(--_inset_border_bottom_color),
+              inset var(--_inset_border_left_width) 0 0 0 var(--_inset_border_left_color);
+}
+
+@mixin outline() {
+  outline: var(--outline_width, .2rem) var(--outline_style, auto) var(--outline_color, #9cf);
+  outline-offset: var(--outline_offset, .2rem);
+}
+
+@mixin sr_only() {
+  border: 0;
+  clip: rect(0, 0, 0, 0);
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 1px;
+}

data/src/baseline-scss/_reboot.scss

@@ -1,8 +1,4 @@
-@at-root {
-  @-ms-viewport {
-    width: device-width; // Honor viewport meta in IE10+.
-  }
-}
+@use 'baseline-scss/mixins' as _;
 
 *,
 *::before,
@@ -10,18 +6,14 @@
   box-sizing: border-box;
 }
 
-::-moz-selection,
-::selection {
-  text-shadow: none; // Remove text-shadow in selection highlight.
-}
-
 [hidden] {
   display: none !important;
 }
 
 [tabindex]:not([tabindex^='-']):focus {
-  @include outline();
+  @include _.outline();
 }
+
 // Don't outline elements that programmatically receive focus but wouldn't normally show an outline.
 [tabindex='-1']:focus:not(:focus-visible) {
   outline: 0 !important;
@@ -32,11 +24,11 @@ html {
 }
 
 body {
-  @include _();
-
   background-color: var(--body_background_color); // Best practice.
   color: var(--body_color);
-  font-family: var(--font_family);
+  line-height: var(--body_line_height);
+  font-family: var(--body_font_family);
+  font-size: var(--body_font_size);
   font-weight: normal;
   text-align: left;
 
@@ -44,122 +36,17 @@ body {
   -webkit-tap-highlight-color: rgba(#000, 0); // Change the default tap highlight to be completely transparent in iOS.
 }
 
-article,
-aside,
-canvas,
-details,
-dialog,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section {
-  display: block;
-}
-
 iframe {
   border: 0;
   vertical-align: middle;
 }
 
-summary {
-  cursor: pointer;
-}
-
-// Code
-code {
-  word-wrap: break-word;
-
-  a > & {
-    color: inherit; // Avoid broken underline and more when inside anchors.
-  }
-}
-
-pre {
-  display: block;
-  overflow: auto;
-  -ms-overflow-style: scrollbar; // Force scrollbar in IE11+/Edge.
-
-  code {
-    color: inherit;
-    font-size: inherit;
-    word-break: normal;
-  }
-}
-
-// Forms
-fieldset {
-  border: 0; // Don't affect page layout.
-  min-width: 0; // Behave like a standard block element.
-}
-
-label {
-  display: inline-block; // Allow labels to use `margin` for spacing.
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  line-height: inherit;
-  vertical-align: bottom; // Make's elments behave better height-wise.
-}
-
-#{$all-buttons} {
-  &:focus:not(:focus-visible) {
-    outline: 0; // Explicitly remove focus outline in Chromium.
-  }
-
-  &:not(:disabled) {
-    cursor: pointer; // Add "hand" cursor to non-disabled button elements.
-  }
-}
-
-[role='button'] {
-  cursor: pointer; // Set the cursor for non-`<button>` buttons.
-}
-
-[type='search'] {
-  outline-offset: -.2rem;
-
-  &::-ms-clear,
-  &::-ms-reveal {
-    display: none;
-    height: 0;
-    width : 0;
-  }
-
-  &::-webkit-search-decoration,
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-results-button,
-  &::-webkit-search-results-decoration {
-    display: none;
-  }
-}
-
 output {
   display: inline-block;
 }
 
-select {
-  word-wrap: normal; // Remove the inheritance of word-wrap in Safari.
-
-  &:disabled {
-    opacity: 1; // Undo the opacity change from Chrome.
-  }
-}
-
-textarea {
-  resize: vertical; // Don't break its (horizontal) containers.
-}
-
-::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.
+summary {
+  cursor: pointer;
 }
 
 ::-webkit-color-swatch-wrapper {
@@ -176,57 +63,14 @@ textarea {
   padding: 0;
 }
 
-// Multimedia
-audio,
-canvas,
-iframe,
-img,
-svg,
-video {
-  vertical-align: middle; // Remove gap between the bottom of their containers.
-}
-
-svg {
-  overflow: hidden; // Workaround for the SVG overflow bug in IE10/11.
-}
-
-// Tables
-table {
-  border-collapse: collapse; // Prevent double borders.
-}
-
-thead,
-tbody,
-tfoot,
-tr,
-td,
-th {
-  border-color: inherit;
-  border-style: solid;
-  border-width: 0;
-}
-
-th {
-  font-weight: inherit;
-  text-align: inherit; // Matches default `<td>` alignment.
-  text-align: -webkit-match-parent; // Fix alignment for Safari.
-}
-
-// Typography
-address {
-  font-style: normal;
-  line-height: inherit;
-}
-
-hr {
-  box-sizing: border-box;
-}
-
-a:not([href]):not([tabindex]):focus {
-  outline: 0; // Plain anchors don't need an outline.
+::-webkit-search-decoration,
+::-webkit-search-cancel-button,
+::-webkit-search-results-button,
+::-webkit-search-results-decoration {
+  -webkit-appearance: none;
 }
 
-abbr[title] {
-  cursor: help; // Add explicit cursor to indicate changed behavior.
-  text-decoration-skip-ink: none; // Prevent the text-decoration to be skipped.
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+	height: auto;
 }

data/src/baseline-scss/_variables.scss

@@ -1,5 +1,13 @@
+@use 'sass:math';
+
 :root {
+  $_: 1.2rem;
+  $_half_ceil: math.div(math.ceil(math.div($_ * 10, 2)), 10);
+  $_half_floor: math.div(math.floor(math.div($_ * 10, 2)), 10);
+  $_half: math.min($_half_ceil, $_half_floor);
+
   --_: #{$_};
+  --_half: #{$_half};
   --_half_ceil: #{$_half_ceil};
   --_half_floor: #{$_half_floor};
 
@@ -7,142 +15,70 @@
   --font_family_sans: sans-serif;
   --font_family_serif: serif;
   --font_family_mono: monospace;
-
-  --font_family: var(--font_family_sans);
-  --font_family_h: var(--font_family_sans);
-  --font_family_code: var(--font_family_mono);
-
-  --font_weight: normal;
+  --h_font_family: var(--font_family_sans);
+  --h_font_weight: var(--font_weight_bold);
+  --code_font_family: var(--font_family_mono);
+
+  --h1_font_size: 3.6rem;
+  --h2_font_size: 3.0rem;
+  --h3_font_size: 2.4rem;
+  --h4_font_size: 2rem;
+  --h5_font_size: 1.6rem;
+  --h6_font_size: 1.2rem;
+  --large_font_size: 125%;
+  --small_font_size: 75%;
+  --code_font_size: 1.5rem;
+
+  --font_weight_normal: normal;
   --font_weight_bold: bold;
-  --font_weight_h: var(--font_weight_bold);
+  --font_weight_light: light;
 
-  --font_size: 1.6rem;
-  --font_size_lines: 2;
-  --font_size_code: 1.5rem;
-  --font_size_code_lines: 2;
-  --font_size_h1: 3.2rem;
-  --font_size_h1_lines: 3;
-  --font_size_h2: 2.8rem;
-  --font_size_h2_lines: 3;
-  --font_size_h3: 2.4rem;
-  --font_size_h3_lines: 2;
-  --font_size_h4: 2rem;
-  --font_size_h4_lines: 2;
-  --font_size_h5: 1.6rem;
-  --font_size_h5_lines: 2;
-  --font_size_h6: 1.2rem;
-  --font_size_h6_lines: 1;
-  --font_size_large: 125%;
-  --font_size_small: 75%;
+  --h1_line_height: 1;
+  --h2_line_height: 1.2;
+  --h3_line_height: 1.5;
+  --h4_line_height: 1.2;
+  --h5_line_height: 1.5;
+  --h6_line_height: 1;
+  --code_line_height: 1.6;
 
   // Colors
-  --body_background_color: #fff;
-  --body_color: #000;
+  --white:    #ffffff;
+  --gray_50:  #fafafa;
+  --gray_100: #f5f5f5;
+  --gray_200: #eeeeee;
+  --gray_300: #e0e0e0;
+  --gray_400: #bdbdbd;
+  --gray_500: #9e9e9e;
+  --gray_600: #757575;
+  --gray_700: #616161;
+  --gray_800: #424242;
+  --gray_900: #212121;
+  --black:    #000000;
 
   --create_background_color: #cfc;
   --create_border_color: #3c3;
+  --create_color: #3c3;
   --update_background_color: #cff;
   --update_border_color: #3cc;
+  --update_color: #3cc;
   --destroy_background_color: #fcc;
   --destroy_border_color: #c33;
-
-  // Outline
-  --outline_color: #9cf;
-  --outline_offset: .2rem;
-  --outline_style: auto;
-  --outline_width: .2rem;
-
-  // Containers
-  --container_padding: 2rem;
-  --container_max_width: 100%;
-
-  // Buttons
-  --button_background_color: #efefef;
-  --button_background_color_hover: #e5e5e5;
-  --button_background_color_focus: var(--button_background_color);
-  --button_background_color_active: #f5f5f5;
-  --button_background_color_disabled: #eee;
-
-  --button_border_color: #767676;
-  --button_border_color_hover: #4f4f4f;
-  --button_border_color_focus: var(--button_border_color);
-  --button_border_color_active: #8d8d8d;
-  --button_border_color_disabled: #d0d0d0;
-
-  --button_border_style: solid;
-
-  --button_border_radius: .3rem;
-
-  --button_border_width: .1rem;
-
-  --button_color: var(--body_color);
-  --button_color_hover: var(--button_color);
-  --button_color_focus: var(--button_color);
-  --button_color_active: var(--button_color);
-  --button_color_disabled: #b3b3b3;
-
-  --button_height: calc(2 * var(--_));
-
-  --button_padding: 0 .5em;
-
-  // Forms
-  --fieldset_padding_h: 1rem;
-
-  --legend_padding_h: 0 .5rem;
-
-  --input_background_color: var(--body_background_color);
-  --input_background_color_hover: var(--input_background_color);
-  --input_background_color_focus: var(--input_background_color);
-  --input_background_color_active: var(--input_background_color);
-  --input_background_color_disabled: #eee;
-  --input_background_color_read_only: var(--input_background_color_disabled);
-
-  --input_border_color: #767676;
-  --input_border_color_hover: #4f4f4f;
-  --input_border_color_focus: var(--input_border_color);
-  --input_border_color_active: #8d8d8d;
-  --input_border_color_disabled: #d0d0d0;
-  --input_border_color_read_only: var(--input_border_color_disabled);
-
-  --input_border_style: inset;
-
-  --input_border_radius: 0;
-
-  --input_border_width: .1rem;
-
-  --input_color: var(--body_color);
-  --input_color_hover: var(--input_color);
-  --input_color_focus: var(--input_color);
-  --input_color_active: var(--input_color);
-  --input_color_disabled: #b3b3b3;
-  --input_color_read_only: var(--input_color_disabled);
-
-  --input_height: calc(var(--_) * 2);
-
-  --input_padding: 0 .25em;
-
-  --textarea_padding_h: .25em;
-
-  // Lists
-  --dl_margin_l: 1.5em;
-  --list_padding_l: 1.5em;
-
-  // Tables
-  --table_cell_padding: 0 .25em;
-
-  // Typography
-  --blockquote_margin_h: 2rem;
-
-  --hr_border_color: var(--body_color);
-  --hr_border_style: solid;
-  --hr_border_width: .1rem;
-  --hr_height: var(--_);
-
-  --link_color: #00e;
-  --link_visited_color: #528;
-  --link_hover_color: #00f;
-  --link_focus_color: var(--link_hover_color);
-  --link_active_color: var(--link_hover_color);
-
-  --mark_background_color: #ff0;
+  --destroy_color: #c33;
+
+  --valid_background_color: #cfc;
+  --valid_border_color: #3c3;
+  --valid_color: #3c3;
+  --warning_background_color: #ffc;
+  --warning_border_color: #fc3;
+  --warning_color: #fc3;
+  --invalid_background_color: #fcc;
+  --invalid_border_color: #c33;
+  --invalid_color: #c33;
+
+  // Body Defaults
+  --body_background_color: var(--white);
+  --body_color: var(--black);
+  --body_font_family: var(--font_family_sans);
+  --body_font_size: 1.6rem;
+  --body_line_height: 1.5;
 }