bitters 1.8.0 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: b3d8d7e89e3ed0410f696586637d456654e26a48
-  data.tar.gz: 9fa98ecc50178bf91a56aa7af379730f37ae1103
+SHA256:
+  metadata.gz: 04af53c0783319c9fca22a9269483843b4e7b3a1ee6a83dfc58f5d2f9b64446c
+  data.tar.gz: f40919cdab64e9f9b4a0b73b9c809ddda202e7cf7059bd56342faa5eca3d46d8
 SHA512:
-  metadata.gz: 3f51ad32f99a2cf88c380a92fb5994e0c8cb506e087a0997642ba26a8ee85e8847e41bc2760c273b3998273a42b18dcf7ba14673d8231647b011c136fabe22fc
-  data.tar.gz: c99642d0c38d9e8c979fb77155a0199e800d596a128c68fc78e55eb22ac02529473d1c41add6d766b591eeedb2a5cff1635198eaee20de2c2f2c14d41aa647bf
+  metadata.gz: 3701e64b06db1d00bd31aa5e2c9c9960714cf7a50870347615c1c79d09e45438a2a539a348a0a526f32c1fe9f1cac8903cffbbfd07bafa7f8c1162e35d005cc4
+  data.tar.gz: a06653366b3c278a8ed7ffcca7f1b1f53930958093648dafe255192ea48eafd351bcf9452ccfbc9de8e0f99c263134fbf7a47bd67b5f4ed54a9373ff37dea82c

data/.circleci/config.yml

@@ -0,0 +1,26 @@
+version: 2
+
+jobs:
+  build:
+    docker:
+      - image: circleci/ruby:2.6.3
+
+    steps:
+      - checkout
+
+      - restore_cache:
+          keys:
+            - bitters-{{ arch }}-{{ checksum "bitters.gemspec" }}
+
+      - run:
+          name: Install Ruby dependencies
+          command: bundle install --path vendor/bundle
+
+      - save_cache:
+          key: bitters-{{ arch }}-{{ checksum "bitters.gemspec" }}
+          paths:
+            - vendor/bundle
+
+      - run:
+          name: Run the tests
+          command: bundle exec rake

data/.hound.yml

@@ -1,5 +1,7 @@
 ruby:
   enabled: true
 scss:
-  config_file: .scss-lint.yml
+  enabled: false
+stylelint:
   enabled: true
+  config_file: .stylelintrc.json

data/.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "@thoughtbot/stylelint-config"
+}

data/.tool-versions

@@ -0,0 +1,2 @@
+ruby 2.6.3
+nodejs 10.16.0

data/CHANGELOG.md

@@ -5,9 +5,30 @@ project adheres to [Semantic Versioning](http://semver.org).
 
 ## [Unreleased (`master`)][unreleased]
 
-Nothing at the moment.
+### Added
+
+- Added variables for all font weights
+- Added CSS to make `input[type="search"]` behave as a textfield in Safari
+
+### Changed
+
+- Changed project Sass variables to native CSS variables
+- Changed variables name structures:
+  - Remove "`base`" from CSS vars (`--base-font-family` to `--font-family`)
+  - Placing the modifier after the noun instead of before. Example: `--font-family--heading`
+  - Separating the modifier and noun with 2 dashes. Example: `--font-weight--extra-light`
+- Changed the default border to use `currentColor`
+- Changed remaining pixel (`px`) values to `rem`s
+
+### Removed
+
+- Removed unused `base-z-index` variable
+- Removed unused `medium-gray` variable
+- Removed unused `gray-light` variable
+- Removed [Bourbon] dependency
 
 [unreleased]: https://github.com/thoughtbot/bitters/compare/v1.8.0...HEAD
+[Bourbon]: https://github.com/thoughtbot/bourbon
 
 ## [1.8.0] - 2018-02-05
 
@@ -82,7 +103,7 @@ Nothing at the moment.
 
 ### Removed
 
-- Removed `$base-font-size` in favor of more specific implimentations specific
+- Removed `$base-font-size` in favor of more specific implementations specific
   to the particular object being modified. ([#272])
 
 [1.6.0]: https://github.com/thoughtbot/bitters/compare/v1.5.0...v1.6.0

data/CONTRIBUTING.md

@@ -7,7 +7,7 @@ agree to abide by the thoughtbot [code of conduct]. Here’s a quick guide:
 
 While developing and contributing to Bitters you can use gulp to spin up an
 example site to help preview your changes! Running `gulp` to pull in the
-stylesheets and serve a small HTML preview page at `http://localhost:8000`.
+stylesheets and serve a small HTML preview page at `http://localhost:3000`.
 
 ## Getting started
 
@@ -73,7 +73,7 @@ Some things that will increase the chance that your pull request is accepted:
 * Two spaces, no tabs.
 * Dashes instead of underscores or camel case: `section-header` **not**
   `section_header` or `sectionHeader`
-* Names should be descriptive and written in full-words: `$base-font-color`
+* Names should be descriptive and written in full-words: `$font-color--base`
   **not** `$color` or `$txtCLR`
 * Space between property and value: `width: 20px` **not** `width:20px`
 * Declarations within a block should be ordered alphabetically.

data/Gulpfile.js

@@ -1,34 +1,43 @@
-var bourbon    = require("bourbon").includePaths,
-    autoprefix = require("gulp-autoprefixer"),
-    connect    = require("gulp-connect"),
-    gulp       = require("gulp"),
-    sass       = require("gulp-sass");
+const bourbon = require('bourbon').includePaths;
+const browserSync = require('browser-sync').create();
+const gulp = require('gulp');
+const sass = require('gulp-sass');
 
-var paths = {
-  scss: [
-    "./core/**/*.scss",
-    "./contrib/*.scss"
-  ]
+const paths = {
+  markup: {
+    src: './contrib/**/*.html',
+  },
+  styles: {
+    src: [
+      './contrib/**/*.scss',
+      './core/**/*.scss',
+    ],
+    dest: './contrib/',
+  }
 };
 
-gulp.task("sass", function () {
-  return gulp.src(paths.scss)
-    .pipe(sass({
-      includePaths: ["styles"].concat(bourbon)
-    }))
-    .pipe(autoprefix("last 2 versions"))
-    .pipe(gulp.dest("./contrib"))
-    .pipe(connect.reload());
-});
+function styles() {
+  return gulp.src(paths.styles.src)
+    .pipe(sass({includePaths: bourbon}))
+    .pipe(gulp.dest(paths.styles.dest));
+};
 
-gulp.task("connect", function() {
-  connect.server({
-    root: "contrib",
-    port: 8000,
-    livereload: true
+function serve(done) {
+  browserSync.init({
+    open: false,
+    server: './contrib/',
   });
-});
+  done();
+}
+
+function reload(done) {
+  browserSync.reload();
+  done();
+}
+
+function watch() {
+  gulp.watch(paths.markup.src, reload);
+  gulp.watch(paths.styles.src, gulp.series(styles, reload));
+}
 
-gulp.task("default", ["sass", "connect"], function() {
-  gulp.watch(paths.scss, ["sass"]);
-});
+gulp.task('default', gulp.series(styles, serve, watch));

data/README.md

@@ -1,4 +1,6 @@
-[<img src="https://images.thoughtbot.com/bourbon/bitters-logo.svg" width="200" alt="Bitters">](http://bitters.bourbon.io)
+[<img src="https://images.thoughtbot.com/bourbon/bitters-logo-v2.svg" width="200" alt="Bitters">](http://bitters.bourbon.io)
+
+[![Reviewed by Hound](https://img.shields.io/badge/Reviewed_by-Hound-8E64B0.svg)](https://houndci.com)
 
 ## Scaffold styles, variables and structure for Bourbon projects.
 
@@ -34,12 +36,10 @@ one. We like to use [Normalize].
 ## Requirements
 
 - [Sass] 3.4+ or [LibSass] 3.3+
-- [Bourbon] 5.0+
 - Ruby 1.9.3+ (required to install Bitters from the command line)
 
 [Sass]: https://github.com/sass/sass
 [LibSass]: https://github.com/sass/libsass
-[Bourbon]: https://github.com/thoughtbot/bourbon
 
 ## Installation
 
@@ -49,8 +49,6 @@ one. We like to use [Normalize].
     gem install bitters
     ```
 
-1. Install [Bourbon][bourbon-install].
-
 1. Install the Bitters library into the current directory by running the
    following command at the command-line. If you’re using Ruby on Rails, run the
    command in `app/assets/stylesheets`:
@@ -66,7 +64,6 @@ one. We like to use [Normalize].
    file. All additional stylesheets should be imported below Bitters.
 
     ```scss
-    @import "bourbon";
     @import "base/base";
     ```
 
@@ -74,23 +71,20 @@ one. We like to use [Normalize].
    below them.
 
     ```scss
-    @import "bourbon";
     @import "base/base";
     @import "my-project-styles";
     …
     ```
 
 [RubyGems]: https://rubygems.org
-[bourbon-install]: https://github.com/thoughtbot/bourbon#installation
 
 ## Using Bitters
 
 ### Sass structure & default style
 
 The Bitters directory (`base/`) should contain styles for all the basic elements
-used throughout the project. It also contains directories for custom mixins and
-extends for your site. Add code to the existing files or add new files to the
-directories. Customize Bitters for your site as you see fit.
+used throughout the project. Add code to the existing files or add new files.
+Customize Bitters for your site as you see fit.
 
 ### Variables
 
@@ -100,9 +94,7 @@ file start with `$base` to indicate that they are the most basic variables.
 
 ### Typography
 
-All type is based on `$base-font-size` which is set to 1em (16px) by default.
-The spacing around type is based on `$base-line-height` so as to keep a
-semi-baseline grid. All sizes are scaled up or down by a factor of `0.25`.
+All type is based on a `font-size` of `100%`, set on the `html` element.
 
 ### Lists
 
@@ -116,8 +108,8 @@ inherit from the variables file but make it really easy to be overridden.
 ### Buttons
 
 Basic style for `button` and `input[type="submit"]`. Base button styles can be
-changed by modifying the styles applied to `button` and `#{$all-button-inputs}`
-in `base/_button.scss`.
+changed by modifying the styles applied to `button` and `#{$all-buttons}`
+in `base/_buttons.scss`.
 
 ## Command Line Interface
 
@@ -148,11 +140,9 @@ bitters [options]
 
 - [Bourbon]: A Lightweight Sass Tool Set
 - [Neat]: A lightweight and flexible Sass grid
-- [Refills]: Components and patterns built with Bourbon and Neat
 
 [Bourbon]: https://github.com/thoughtbot/bourbon
 [Neat]: https://github.com/thoughtbot/neat
-[Refills]: https://github.com/thoughtbot/refills
 
 ## Contributing
 

data/bitters.gemspec

@@ -6,7 +6,6 @@ Gem::Specification.new do |s|
   s.add_development_dependency "bundler", "~> 1.3"
   s.add_development_dependency "rake"
   s.add_development_dependency "rspec"
-  s.add_development_dependency "scss_lint", "~> 0.47"
   s.add_runtime_dependency "bourbon", "~> 5.0"
   s.add_runtime_dependency "sass", "~> 3.4"
   s.add_runtime_dependency "thor", "~> 0.19"

data/contrib/styles.scss

@@ -2,18 +2,18 @@
 @import "../core/base";
 
 body {
-  margin: 0 0 ($base-spacing * 2);
+  margin: 0 0 calc(var(--spacing) * 2);
 }
 
 .container {
-  @include margin(null auto);
-  @include padding(null $base-spacing);
+  margin: 0 auto;
+  padding: 0 var(--spacing);
   max-width: 500px;
 }
 
 .welcome-message {
-  @include padding($base-spacing null);
+  padding: var(--spacing) 0;
   background-color: #f2f2f2;
-  margin-bottom: $base-spacing;
+  margin-bottom: var(--spacing);
   text-align: center;
 }

data/core/_base.scss

@@ -1,4 +1,4 @@
-// Bitters 1.8.0
+// Bitters 2.0.0
 // http://bitters.bourbon.io
 // Copyright 2013-2017 thoughtbot, inc.
 // MIT License

data/core/_buttons.scss

@@ -1,43 +1,38 @@
-$_button-background-color: $action-color;
-$_button-background-color-hover: shade($action-color, 20%);
-
-#{$all-buttons} {
+button,
+[type='button'],
+[type='reset'],
+[type='submit'] {
   appearance: none;
-  background-color: $_button-background-color;
+  background-color: $action-color;
   border: 0;
-  border-radius: $base-border-radius;
-  color: contrast-switch($_button-background-color);
+  border-radius: var(--border-radius);
+  color: inherit;
   cursor: pointer;
   display: inline-block;
-  font-family: $base-font-family;
-  font-size: 16px;
+  font-family: var(--font-family-base);
+  font-size: 1rem;
   -webkit-font-smoothing: antialiased;
   font-weight: 600;
   line-height: 1;
-  padding: $small-spacing $base-spacing;
+  padding: var(--spacing--small) var(--spacing);
   text-align: center;
   text-decoration: none;
-  transition: background-color $base-duration $base-timing;
+  transition: background-color var(--duration) var(--timing);
   user-select: none;
   vertical-align: middle;
   white-space: nowrap;
 
   &:hover {
-    background-color: $_button-background-color-hover;
-    color: contrast-switch($_button-background-color-hover);
+    background-color: $action-color--alt;
   }
 
   &:focus {
-    outline: $focus-outline;
-    outline-offset: $focus-outline-offset;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
   }
 
   &:disabled {
     cursor: not-allowed;
     opacity: 0.5;
-
-    &:hover {
-      background-color: $_button-background-color;
-    }
   }
 }

data/core/_forms.scss

@@ -1,6 +1,7 @@
-$_form-background-color: #fff;
-$_form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
-$_form-box-shadow-focus: $_form-box-shadow, 0 0 5px rgba($action-color, 0.7);
+:root {
+  --form-box-shadow: inset 0 --border-width 0.1875rem rgba(#000, 0.06);
+  --form-box-shadow-focus: var(--form-box-shadow), 0 0 0.3125rem #{$action-color};
+}
 
 fieldset {
   background-color: transparent;
@@ -11,60 +12,73 @@ fieldset {
 
 legend {
   font-weight: 600;
-  margin-bottom: $small-spacing / 2;
+  margin-bottom: var(--spacing--small);
   padding: 0;
 }
 
 label {
   display: block;
   font-weight: 600;
-  margin-bottom: $small-spacing / 2;
+  margin-bottom: var(--spacing--small);
 }
 
 input,
 select,
 textarea {
   display: block;
-  font-family: $base-font-family;
-  font-size: 16px;
+  font-family: var(--font-family);
+  font-size: 1rem;
 }
 
-#{$all-text-inputs} {
+[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 {
   appearance: none;
-  background-color: $_form-background-color;
-  border: $base-border;
-  border-radius: $base-border-radius;
-  box-shadow: $_form-box-shadow;
+  background-color: transparent;
+  border: var(--border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--form-box-shadow);
   box-sizing: border-box;
-  margin-bottom: $small-spacing;
-  padding: $base-spacing / 3;
-  transition: border-color $base-duration $base-timing;
+  margin-bottom: var(--spacing--small);
+  padding: calc(var(--spacing) / 3);
+  transition: border-color var(--duration) var(--timing);
   width: 100%;
 
-  &:hover {
-    border-color: shade($base-border-color, 20%);
-  }
-
   &:focus {
-    border-color: $action-color;
-    box-shadow: $_form-box-shadow-focus;
-    outline: none;
+    box-shadow: var(--form-box-shadow-focus);
   }
 
   &:disabled {
-    background-color: shade($_form-background-color, 5%);
     cursor: not-allowed;
 
     &:hover {
-      border: $base-border;
+      border: var(--border);
     }
   }
 
   &::placeholder {
-    color: tint($base-font-color, 40%);
+    color: $font-color--base;
+    opacity: 0.25;
   }
 }
 
+[type="search"] {
+  -webkit-appearance: textfield;
+}
+
 textarea {
   resize: vertical;
 }
@@ -72,16 +86,16 @@ textarea {
 [type="checkbox"],
 [type="radio"] {
   display: inline;
-  margin-right: $small-spacing / 2;
+  margin-right: var(--spacing--small);
 }
 
 [type="file"] {
-  margin-bottom: $small-spacing;
+  margin-bottom: var(--spacing--small);
   width: 100%;
 }
 
 select {
-  margin-bottom: $small-spacing;
+  margin-bottom: var(--spacing--small);
   width: 100%;
 }
 
@@ -90,7 +104,7 @@ select {
 [type="file"],
 select {
   &:focus {
-    outline: $focus-outline;
-    outline-offset: $focus-outline-offset;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
   }
 }