Skip to content
Permalink
Browse files

Rework variable names from adj-noun to noun-adj

  • Loading branch information...
whmii committed Jul 1, 2019
1 parent f3a93fe commit ec13e7021e874b9a7b04479d5719ff7fc6d0647e
Showing with 68 additions and 70 deletions.
  1. +6 −0 CHANGELOG.md
  2. +1 −1 CONTRIBUTING.md
  3. +4 −4 contrib/styles.scss
  4. +5 −5 core/_buttons.scss
  5. +14 −18 core/_forms.scss
  6. +4 −4 core/_tables.scss
  7. +11 −11 core/_typography.scss
  8. +23 −27 core/_variables.scss
@@ -6,11 +6,17 @@ project adheres to [Semantic Versioning](http://semver.org).
## [Unreleased (`master`)][unreleased]

### Added

- Added variables for all font weights

### 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`

### Removed

@@ -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.
@@ -2,18 +2,18 @@
@import "../core/base";

body {
margin: 0 0 calc(var(--base-spacing) * 2);
margin: 0 0 calc(var(--spacing) * 2);
}

.container {
@include margin(null auto);
@include padding(null var(--base-spacing));
@include padding(null var(--spacing));
max-width: 500px;
}

.welcome-message {
@include padding(var(--base-spacing) null);
@include padding(var(--spacing) null);
background-color: #f2f2f2;
margin-bottom: var(--base-spacing);
margin-bottom: var(--spacing);
text-align: center;
}
@@ -2,25 +2,25 @@
appearance: none;
background-color: $action-color;
border: 0;
border-radius: var(--base-border-radius);
border-radius: var(--border-radius);
color: inherit;
cursor: pointer;
display: inline-block;
font-family: var(--base-font-family);
font-family: var(--font-family-base);
font-size: 16px;
-webkit-font-smoothing: antialiased;
font-weight: 600;
line-height: 1;
padding: var(--small-spacing) var(--base-spacing);
padding: var(--spacing--small) var(--spacing);
text-align: center;
text-decoration: none;
transition: background-color var(--base-duration) var(--base-timing);
transition: background-color var(--duration) var(--timing);
user-select: none;
vertical-align: middle;
white-space: nowrap;

&:hover {
background-color: $action-color-alt;
background-color: $action-color--alt;
}

&:focus {
@@ -1,5 +1,3 @@
$__form-background-color: $viewport-background-color;

:root {
--form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
--form-box-shadow-focus: var(--form-box-shadow), 0 0 5px #{$action-color};
@@ -14,53 +12,51 @@ fieldset {

legend {
font-weight: 600;
margin-bottom: var(--small-spacing);
margin-bottom: var(--spacing--small);
padding: 0;
}

label {
display: block;
font-weight: 600;
margin-bottom: var(--small-spacing);
margin-bottom: var(--spacing--small);
}

input,
select,
textarea {
display: block;
font-family: var(--base-font-family);
font-family: var(--font-family);
font-size: 16px;
}

#{$all-text-inputs} {
appearance: none;
background-color: $__form-background-color;
border: var(--base-border);
border-radius: var(--base-border-radius);
background-color: transparent;
border: var(--border);
border-radius: var(--border-radius);
box-shadow: var(--form-box-shadow);
box-sizing: border-box;
margin-bottom: var(--small-spacing);
padding: calc(var(--base-spacing) / 3);
transition: border-color var(--base-duration) var(--base-timing);
margin-bottom: var(--spacing--small);
padding: calc(var(--spacing) / 3);
transition: border-color var(--duration) var(--timing);
width: 100%;

&:focus {
border-color: var(--base-border-color-alt);
box-shadow: var(--form-box-shadow-focus);
outline: none;
}

&:disabled {
background-color: $__form-background-color;
cursor: not-allowed;

&:hover {
border: var(--base-border);
border: var(--border);
}
}

&::placeholder {
color: $base-font-color;
color: $font-color--base;
opacity: 0.25;
}
}
@@ -72,16 +68,16 @@ textarea {
[type="checkbox"],
[type="radio"] {
display: inline;
margin-right: var(--small-spacing);
margin-right: var(--spacing--small);
}

[type="file"] {
margin-bottom: var(--small-spacing);
margin-bottom: var(--spacing--small);
width: 100%;
}

select {
margin-bottom: var(--small-spacing);
margin-bottom: var(--spacing--small);
width: 100%;
}

@@ -1,13 +1,13 @@
table {
border-collapse: collapse;
margin: var(--base-spacing) 0;
margin: var(--spacing) 0;
table-layout: fixed;
text-align: left;
width: 100%;
}

thead {
line-height: var(--heading-line-height);
line-height: var(--line-height--heading);
vertical-align: bottom;
}

@@ -16,7 +16,7 @@ tbody {
}

tr {
border-bottom: var(--base-border);
border-bottom: var(--border);
}

th {
@@ -25,5 +25,5 @@ th {

th,
td {
padding: var(--small-spacing) var(--small-spacing) var(--small-spacing) 0;
padding: var(--spacing--small) var(--spacing--small) var(--spacing--small) 0;
}
@@ -1,8 +1,8 @@
html {
color: $base-font-color;
font-family: var(--base-font-family);
color: $font-color--base;
font-family: var(--font-family);
font-size: 100%;
line-height: var(--base-line-height);
line-height: var(--line-height);
}

h1,
@@ -11,23 +11,23 @@ h3,
h4,
h5,
h6 {
font-family: var(--heading-font-family);
font-family: var(--font-family--heading);
font-size: modular-scale(1);
line-height: var(--heading-line-height);
margin: 0 0 var(--small-spacing);
line-height: var(--line-height--heading);
margin: 0 0 var(--spacing--small);
}

p {
margin: 0 0 var(--small-spacing);
margin: 0 0 var(--spacing--small);
}

a {
color: $action-color;
text-decoration-skip: ink;
transition: color var(--base-duration) var(--base-timing);
transition: color var(--duration) var(--timing);

&:hover {
color: $action-color-alt;
color: $action-color--alt;
}

&:focus {
@@ -37,9 +37,9 @@ a {
}

hr {
border-bottom: var(--base-border);
border-bottom: var(--border);
border-left: 0;
border-right: 0;
border-top: 0;
margin: var(--base-spacing) 0;
margin: var(--spacing) 0;
}
@@ -5,50 +5,46 @@ $gray-dark: #333;
$gray-light: #ddd;

// Font Colors
$base-font-color: $gray-dark;
$font-color--base: $gray-dark;
$action-color: $blue;
$action-color-alt: $blue-light;

// Border Colors
$base-border-color: $gray-light;
$base-border-color-alt: $gray-dark;
$action-color--alt: $blue-light;

// Background Colors
$viewport-background-color: #fff;

:root {
// Typography
--base-font-family: #{$font-stack-system};
--heading-font-family: var(--base-font-family);

--font-weight-thin: 100;
--font-weight-extra-light: 200;
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semi-bold: 600;
--font-weight-bold: 700;
--font-weight-extra-bold: 800;
--font-weight-black: 900;
--font-family: #{$font-stack-system};
--font-family--heading: var(--font-family);

--font-weight--thin: 100;
--font-weight--extra-light: 200;
--font-weight--light: 300;
--font-weight--normal: 400;
--font-weight--medium: 500;
--font-weight--semi-bold: 600;
--font-weight--bold: 700;
--font-weight--extra-bold: 800;
--font-weight--black: 900;

// Line heights
--base-line-height: 1.5;
--heading-line-height: 1.2;
--line-height: 1.5;
--line-height--heading: 1.2;

// Other Sizes
--base-border-radius: 3px;
--base-spacing: 1.5rem;
--small-spacing: 0.75rem;
--border-radius: 3px;
--spacing: 1.5rem;
--spacing--small: 0.75rem;

// Borders
--base-border: 1px solid #{$base-border-color};
--border: 1px solid currentColor;

// Focus
--focus-outline-width: 3px;
--focus-outline: var(--focus-outline-width) solid #{$action-color};
--focus-outline-offset: 2px;
--focus-outline: var(--focus-outline-width) solid #{$action-color};

// Animations
--base-duration: 150ms;
--base-timing: ease;
--duration: 150ms;
--timing: ease;
}

0 comments on commit ec13e70

Please sign in to comment.
You can’t perform that action at this time.