Pendulum Theme (#437)

* Introduce new color palette * Rename type variable * Add a handful of new icons to font Primarily requiring expand/contract for the navbar * Introduce Rubik font in 2 weights * Update scrollbar & dropdown defaults * Introduce Heading typography based component * Introduce panel shadow mixin * Refactor and redesign tabs component * Move import to correct line * Update funnel page defaults with new colors * Refactor page family to have 2 header levels * Update selectable card styles * Update page variables * Unify styles between all card based elements * WIP Introduce new tree nav component * Update panel footer styles * Bring overlay variables to top level variables sheet Also syncing page headers and overlay headers * Add optional bordered panel * Refactor and redesign buttons * Update design of dismiss button * Replace Roboto with Rubik entirely Also replacing the code font with IBMPlexMono * Adjust page header styles * Tweaking font weights * Make button text larger * Make everything less bold * Redesign tree nav items to use +/- instead of carets * Make input placeholders less bold * Clean up tree nav variables * Consolidate all variables in a single file * Move tree nav variables into main variables file * Fix import * Fix state transition jitter * Reduce font weights * Prettier * Ensure active state gradient is fully visible * Fix card variables mistake * Standardize font weights * Allow more granularity in heading weights * Slightly increase padding on form elements * Tweak page title weight * Ensure presentation mode works with new components * Create variables for standard font weights * Enforce slide toggle size * Make page control bar more responsive * WIP make tree nav responsive * Remove redundancy in tree nav responsive styles * Make tree nav children transparent when in large screen mode * Refine tree nav user widget interactions * Formatting * Introduce Logo components * Adjust sizing of influxdb cloud logo * Make TreeNav play nice with the Logo * Verify that new page headers play nice with old nav * Ensure bold in alerts is actually bold * Name handler function more consistently * Ensure strong text inside a popover is visually bold * Ensure table headers are bolder than table cell text * Add non-italic version of monospace font Also making docs code samples non-italic by default * Refactor all font weight styles to refer to global font weight variables * Update heading docs * Update TreeNav documentation * Update changelog * Ensure all external facing variables are prefixed with "cf-" * Make gradient mixins explicitly set a background-color property
influxdata · Mar 2, 2020 · 6bc0eef · 6bc0eef
1 parent 90ae2b8
commit 6bc0eef
Show file tree

Hide file tree

Showing 143 changed files with 4,219 additions and 1,484 deletions.
diff --git a/.storybook/Story.scss b/.storybook/Story.scss
@@ -1,4 +1,4 @@
-@import '../src/Styles/modules';
+@import '../src/Styles/variables';
 @import '../src/Styles/shared';
 
 html,
@@ -19,7 +19,7 @@ body.sb-show-main {
  }
 
  .props-table--prop {
- font-weight: 700;
+ font-weight: $cf-font-weight--bold;
  }
 
  th {
@@ -40,9 +40,9 @@ body.sb-show-main {
  align-items: center;
  align-content: center;
  color: $g2-kevlar;
- font-weight: 700;
+ font-weight: $cf-font-weight--bold;
  font-size: 12px;
- min-height: $form-sm-height;
+ min-height: $cf-form-sm-height;
  padding: $cf-marg-a;
  line-height: 16px;
  user-select: none;
@@ -63,7 +63,7 @@ body.sb-show-main {
  }
 
  &.mockInput {
- height: $form-sm-height;
+ height: $cf-form-sm-height;
  width: 100%;
  }
 
@@ -159,7 +159,7 @@ body.sb-show-main {
  align-items: stretch;
 }
 
-@media screen and (min-width: $nav-menu--breakpoint) {
+@media screen and (min-width: $cf-nav-menu--breakpoint) {
  .appWrapper {
  flex-direction: row;
  }
@@ -179,7 +179,7 @@ body.sb-show-main {
 
 .mockCard {
  border-radius: $cf-radius;
- font-weight: 700;
+ font-weight: $cf-font-weight--bold;
  font-size: 12px;
  position: relative;
  width: 100%;
@@ -257,7 +257,7 @@ body.sb-show-main {
  }
 
  p {
- font-weight: 600;
+ font-weight: $cf-font-weight--medium;
  margin: 0;
  }
 }
@@ -295,12 +295,12 @@ body.sb-show-main {
 
 .storybook-readme-story div.markdown-body {
  font-size: $docs-text-base;
- font-family: 'Roboto', Helvetica, Arial, Tahoma, Verdana, sans-serif;
+ font-family: 'Rubik', Helvetica, Arial, Tahoma, Verdana, sans-serif;
 
  a:link,
  a:visited,
  a:active {
- font-weight: 900;
+ font-weight: $cf-font-weight--black;
  text-decoration: underline;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  }
@@ -340,59 +340,59 @@ body.sb-show-main {
  h1 {
  line-height: 1.25em;
  font-size: ceil($docs-text-base-5 * $docs-text-scale);
- font-weight: 300;
+ font-weight: $cf-font-weight--light;
  letter-spacing: 0.01em;
  }
  h2 {
  line-height: 1.25em;
  font-size: $docs-text-base-4;
- font-weight: 300;
+ font-weight: $cf-font-weight--light;
  }
  h3 {
  line-height: 1.25em;
  font-size: $docs-text-base-3;
- font-weight: 500;
+ font-weight: $cf-font-weight--medium;
  small {
- font-weight: 500;
+ font-weight: $cf-font-weight--medium;
  }
  }
  h4 {
  line-height: 1.25em;
  font-size: $docs-text-base-2;
- font-weight: 400;
+ font-weight: $cf-font-weight--regular;
  small {
- font-weight: 400;
+ font-weight: $cf-font-weight--regular;
  }
  }
  h5 {
  line-height: 1.25em;
  font-size: $docs-text-base-1;
- font-weight: 600;
+ font-weight: $cf-font-weight--medium;
  small {
- font-weight: 500;
+ font-weight: $cf-font-weight--medium;
  }
  }
  h6 {
  line-height: 1.25em;
  font-size: $docs-text-base;
- font-weight: 900;
+ font-weight: $cf-font-weight--black;
  small {
- font-weight: 500;
+ font-weight: $cf-font-weight--medium;
  }
  }
  p {
  color: $g11-sidewalk;
  font-size: $docs-text-base;
  line-height: 1.55em;
- font-weight: 500;
+ font-weight: $cf-font-weight--medium;
 
  b,
  strong {
- font-weight: 900;
+ font-weight: $cf-font-weight--black;
  }
 
  small {
- font-weight: 500;
+ font-weight: $cf-font-weight--medium;
  }
  }
 
@@ -403,7 +403,7 @@ body.sb-show-main {
 
  li {
  line-height: 1.55em;
- font-weight: 500;
+ font-weight: $cf-font-weight--medium;
  }
 
  hr {
@@ -414,9 +414,10 @@ body.sb-show-main {
  }
 
  code {
- font-family: 'RobotoMono', monospace;
+ font-family: 'IBMPlexMono', monospace;
+ font-style: normal;
  text-shadow: none;
- font-weight: 500;
+ font-weight: $cf-font-weight--medium;
  color: $c-potassium;
  background-color: $g1-raven;
  font-size: inherit;
@@ -526,7 +527,7 @@ body.sb-show-main {
  line-height: 18px;
  padding: 0 6px;
  white-space: nowrap;
- font-weight: 600;
+ font-weight: $cf-font-weight--medium;
  text-shadow: none;
  background-color: $g0-obsidian;
  border-bottom-left-radius: 6px;
@@ -654,7 +655,7 @@ $color-grid-card-width: 154px;
  opacity: 0.8;
  margin: 0 !important;
  font-size: 12px !important;
- font-weight: 700;
+ font-weight: $cf-font-weight--bold;
 
  &.colors-grid--hex {
  text-transform: uppercase;
@@ -785,7 +786,7 @@ $color-grid-card-width: 154px;
  button {
  margin-bottom: 4px;
  font-size: 12px;
- font-weight: 700;
+ font-weight: $cf-font-weight--bold;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,8 +1,24 @@
 # Changelog
 
-#### 1.2.1 (Unreleased)
+#### 2.0.1 (Unreleased)
 
-#### 1.2.0
+## 2.0 (aka Pendulum)
+
+- [#437](https://github.com/influxdata/clockface/pull/437): Introduce new color palette
+- [#437](https://github.com/influxdata/clockface/pull/437): Remove Roboto typeface and replace with Rubik (also shrinks the binary)
+- [#437](https://github.com/influxdata/clockface/pull/437): [Breaking] Rename `PageHeader` to `PageControlBar`
+- [#437](https://github.com/influxdata/clockface/pull/437): Introduce simplified `PageHeader` component
+- [#437](https://github.com/influxdata/clockface/pull/437): [Breaking] Remove background color and padding props from `Tabs` family 
+- [#437](https://github.com/influxdata/clockface/pull/437): Add `bordered` prop to `Panel`
+- [#437](https://github.com/influxdata/clockface/pull/437): Introduce `Heading` component
+- [#437](https://github.com/influxdata/clockface/pull/437): Introduce `InfluxDataLogo` and `InfluxDBCloudLogo` components
+- [#437](https://github.com/influxdata/clockface/pull/437): Redesign `Button` component
+- [#437](https://github.com/influxdata/clockface/pull/437): Introduce `TreeNav` component family
+- [#437](https://github.com/influxdata/clockface/pull/437): Combined `variables.scss`, `mixins.scss`, and `influx-colors.scss` into a single file
+- [#437](https://github.com/influxdata/clockface/pull/437): Introduce variables to enforce available font weights in `Rubik` and replace all font weight defintions with the variables
+
+
+#### 1.2.1
 
 - [#436](https://github.com/influxdata/clockface/pull/436): variables.scss is now exported as part of the clockface bundle `@influxdata/clockface/dist/variables.scss`
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -39,7 +39,7 @@ If you follow the code patterns below and the instructions in the PR template yo
 ```
 
 - The component should import its associated stylesheet directly into itself
- - The component stylesheet should import our modules file: `@import "../../Styles/modules.scss";`
+ - The component stylesheet should import our modules file: `@import "../../Styles/variables.scss";`
 - The component (and all sub-components) should be imported & exported from `index.ts`
  - Make sure to keep this list alphabetized for ease of use
 

diff --git a/src/Components/Alert/Alert.scss b/src/Components/Alert/Alert.scss
@@ -1,4 +1,4 @@
-@import '../../Styles/modules';
+@import '../../Styles/variables';
 
 /*
  Alert
@@ -11,7 +11,7 @@ $alert--icon-padding: $cf-marg-d + $cf-marg-a;
  width: 100%;
  border-radius: $cf-radius;
  padding: $cf-border;
- font-size: $form-md-font;
+ font-size: $cf-form-md-font;
  user-select: none;
 
  p,
@@ -24,9 +24,9 @@ $alert--icon-padding: $cf-marg-d + $cf-marg-a;
  ol,
  ul,
  li {
- font-weight: 600;
+ font-weight: $cf-font-weight--medium;
  strong {
- font-weight: 900;
+ font-weight: $cf-font-weight--bold;
  }
 
  &:first-of-type {
@@ -39,7 +39,7 @@ $alert--icon-padding: $cf-marg-d + $cf-marg-a;
  }
 
  p {
- font-size: $form-md-font;
+ font-size: $cf-form-md-font;
  }
 }
 

diff --git a/src/Components/AppHeader/AppHeader.scss b/src/Components/AppHeader/AppHeader.scss
@@ -1,4 +1,4 @@
-@import '../../Styles/modules';
+@import '../../Styles/variables';
 
 /*
  App Header
@@ -37,29 +37,29 @@
 
 .cf-app-header__xs {
  @include appHeaderSizeModifier(
- $form-xs-font,
- $form-xs-padding,
- $form-xs-height
+ $cf-form-xs-font,
+ $cf-form-xs-padding,
+ $cf-form-xs-height
  );
 }
 .cf-app-header__sm {
  @include appHeaderSizeModifier(
- $form-sm-font,
- $form-sm-padding,
- $form-sm-height
+ $cf-form-sm-font,
+ $cf-form-sm-padding,
+ $cf-form-sm-height
  );
 }
 .cf-app-header__md {
  @include appHeaderSizeModifier(
- $form-md-font,
- $form-md-padding,
- $form-md-height
+ $cf-form-md-font,
+ $cf-form-md-padding,
+ $cf-form-md-height
  );
 }
 .cf-app-header__lg {
  @include appHeaderSizeModifier(
- $form-lg-font,
- $form-lg-padding,
- $form-lg-height
+ $cf-form-lg-font,
+ $cf-form-lg-padding,
+ $cf-form-lg-height
  );
 }
diff --git a/src/Components/AppHeader/AppHeaderLogo.scss b/src/Components/AppHeader/AppHeaderLogo.scss
@@ -1,4 +1,4 @@
-@import '../../Styles/modules';
+@import '../../Styles/variables';
 
 /*
  Top Nav
@@ -28,14 +28,14 @@
 }
 
 .cf-app-header--logo__xs {
- @include appHeaderLogoSizeModifier($form-xs-font, $form-xs-height);
+ @include appHeaderLogoSizeModifier($cf-form-xs-font, $cf-form-xs-height);
 }
 .cf-app-header--logo__sm {
- @include appHeaderLogoSizeModifier($form-sm-font, $form-sm-height);
+ @include appHeaderLogoSizeModifier($cf-form-sm-font, $cf-form-sm-height);
 }
 .cf-app-header--logo__md {
- @include appHeaderLogoSizeModifier($form-md-font, $form-md-height);
+ @include appHeaderLogoSizeModifier($cf-form-md-font, $cf-form-md-height);
 }
 .cf-app-header--logo__lg {
- @include appHeaderLogoSizeModifier($form-lg-font, $form-lg-height);
+ @include appHeaderLogoSizeModifier($cf-form-lg-font, $cf-form-lg-height);
 }
diff --git a/src/Components/AppWrapper/AppWrapper.scss b/src/Components/AppWrapper/AppWrapper.scss
@@ -1,4 +1,4 @@
-@import '../../Styles/modules';
+@import '../../Styles/variables';
 
 /*
  Clockface Application Wrapper
@@ -14,7 +14,7 @@
  top: 0;
  left: 0;
  color: $cf-text-default;
- background-color: $page--background;
+ background-color: $cf-page--background;
  overflow: hidden;
  font-size: $cf-body-text;
 }
@@ -24,7 +24,7 @@
  flex-direction: column;
 }
 
-@media screen and (min-width: $nav-menu--breakpoint) {
+@media screen and (min-width: $cf-nav-menu--breakpoint) {
  .clockface--app-wrapper__standard {
  flex-direction: row;
  }
@@ -36,8 +36,10 @@
 */
 
 .clockface--app-wrapper__presentation-mode {
- .cf-nav, 
+ .cf-nav,
+ .cf-tree-nav, 
  .cf-page-header,
+ .cf-page-control-bar,
  .cf-nav--mask,
  .cf-nav--toggle {
  display: none;
@@ -47,6 +49,6 @@
  .cf-page-contents__fluid,
  .cf-page-contents.cf-dapper-scrollbars .cf-page-contents__fluid,
  .cf-page-contents.cf-dapper-scrollbars .cf-page-contents__fixed {
- padding: $page--gutter-xs;
+ padding: $cf-page--gutter-xs;
  }
 }