Skip to content

Commit 56b7edf

Browse files
100stacks100stacks
authored
Merge pull request #797 from HelixDesignSystem/surf-2138-design-updates-rev0
feat(styles): update typography and colors
2 parents 7932322 + f1bcbf4 commit 56b7edf

File tree

14 files changed

+324
-96
lines changed

14 files changed

+324
-96
lines changed

‎docs/_data/nav.json5‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
path: 'components',
1616
children: [
1717
{ label: 'Accordion', path: 'accordion' },
18+
{ label: 'Accordion - Stepper', path: 'stepper' },
1819
{ label: 'Alert', path: 'alert' },
1920
{ label: 'Badge', path: 'badge' },
2021
{ label: 'Beacon', path: 'beacon' },
@@ -40,7 +41,7 @@
4041
*/
4142
},
4243
{ label: 'List', path: 'list' },
43-
{ label: 'Loader', path: 'loader' },
44+
{ label: 'Loader - Busy | Progress', path: 'loader' },
4445
{ label: 'Menu', path: 'menu' },
4546
{ label: 'Modal', path: 'modal' },
4647
{ label: 'Navigation - Top Nav', path: 'topnav' },
@@ -55,7 +56,6 @@
5556
{ label: 'Reveal', path: 'reveal' },
5657
{ label: 'Search', path: 'search' },
5758
{ label: 'Selector Strip', path: 'selector-strip' },
58-
{ label: 'Stepper', path: 'stepper' },
5959
{ label: 'Switch', path: 'switch' },
6060
{ label: 'Table', path: 'table' },
6161
{ label: 'Tabset', path: 'tabset' },

‎docs/components/typography/_index.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
@import "base/links";
22

33
.demo-typography {
4-
.font-roboto {
5-
font-family: "Roboto", sans-serif;
4+
.font-open-sans {
5+
font-family: "Open Sans", "Roboto", sans-serif;
66
}
77

8-
.font-roboto-mono {
9-
font-family: "Roboto Mono", monospace;
8+
.font-open-sans-condensed {
9+
font-family: "Open Sans Condensed", "Roboto Mono", monospace;
1010
}
1111

1212
.weight-thin { font-weight: 100; }

‎docs/components/typography/index.html‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,17 @@
11
---
22
title: Typography
3-
minver: 0.1.6
3+
minver: 2.0.0
44
also:
55
components/typography/test.html: Testing - Typography
66
elements/hx-error: <hx-error>
77
---
88
{% extends 'component.njk' %}
99

1010
{% block page_header %}
11-
{# TODO: add component description #}
11+
<p>
12+
This page is updated to the <code>HelixUI-v2.0.0-rc.0 specs</code>
13+
for {{page.title}}.
14+
</p>
1215
{% endblock %}
1316

1417
{% block content %}
@@ -21,19 +24,19 @@ <h2 id="typefaces">Typefaces</h2>
2124
<div class="example">
2225
<div class="demo-typography">
2326
<div class="hxRow">
24-
<div class="hxCol font-roboto">
25-
<p class="weight-thin">100: Roboto Thin</p>
26-
<p class="weight-light">300: Roboto Light</p>
27-
<p class="weight-regular">400: Roboto Regular</p>
28-
<p class="weight-medium">500: Roboto Medium</p>
29-
<p class="weight-bold">700: Roboto Bold</p>
27+
<div class="hxCol font-open-sans">
28+
<p class="weight-thin">100: Open Sans Thin</p>
29+
<p class="weight-light">300: Open Sans Light</p>
30+
<p class="weight-regular">400: Open Sans Regular</p>
31+
<p class="weight-medium">500: Open Sans Medium</p>
32+
<p class="weight-bold">700: Open Sans Bold</p>
3033
</div>
31-
<div class="hxCol font-roboto-mono">
32-
<p class="weight-thin">100: Roboto Mono Thin</p>
33-
<p class="weight-light">300: Roboto Mono Light</p>
34-
<p class="weight-regular">400: Roboto Mono Regular</p>
35-
<p class="weight-medium">500: Roboto Mono Medium</p>
36-
<p class="weight-bold">700: Roboto Mono Bold</p>
34+
<div class="hxCol font-open-sans-condensed">
35+
<p class="weight-thin">100: Open Sans Condensed Thin</p>
36+
<p class="weight-light">300: Open Sans Condensed Light</p>
37+
<p class="weight-regular">400: Open Sans Condensed Regular</p>
38+
<p class="weight-medium">500: Open Sans Condensed Medium</p>
39+
<p class="weight-bold">700: Open Sans Condensed Bold</p>
3740
</div>
3841
</div>
3942
</div>
@@ -436,7 +439,7 @@ <h2 id="syntax-highlighting">Syntax Highlighting</h2>
436439
<figure class="hxFigure">
437440
{% code 'css' %}
438441
/* CSS Comment */
439-
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:100,100i,300,300i,400,400i,700,700i');
442+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
440443
:root {
441444
--border-color: #bada55;
442445
}

‎docs/images/helix-logo.svg‎

Lines changed: 10 additions & 2 deletions
Loading

‎karma.sauce.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const batches = {
1616
base: 'SauceLabs',
1717
browserName: 'safari',
1818
platform: 'OS X 10.13',
19-
version: 'latest-1'
19+
version: 'latest-2'
2020
},
2121
mac_chrome: {
2222
base: 'SauceLabs',

‎src/less/components.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// DEPRECATED! Use SCSS, instead!
44
.hxComponent {
55
color: @gray-900;
6-
font-family: "Roboto", sans-serif;
6+
font-family: "Open Sans", "Roboto", sans-serif;
77
font-size: 1rem;
88
font-style: normal;
99
font-weight: 400;

‎src/less/vars.less‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,8 +68,8 @@
6868
//@focusing-shadow: TBD
6969

7070
// ===== FONTS =====
71-
@font-sans-serif: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
72-
@font-monospace: "Roboto Mono", monospace;
71+
@font-sans-serif: "Open Sans", "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
72+
@font-monospace: "Open Sans", "Roboto Mono", monospace;
7373

7474
// ===== GRID =====
7575
// Number of columns in the grid.

‎src/scss/_config.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,11 @@
77
/// - NO Pseudo Selectors
88
/// - NO !important
99
/// ===================================
10-
@import url("https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic");
11-
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,700,700italic");
10+
// @import url("https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic");
11+
// @import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,700,700italic");
12+
13+
// @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap');
14+
@import url("https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
1215
@import "vars";
1316

1417
@keyframes hx-spin {

‎src/scss/_vars-legacy.scss‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
// ===== COLOR PALETTE =====
2+
$gray-0: #ffffff;
3+
$gray-25: #fafafa;
4+
$gray-50: #f5f5f5;
5+
$gray-100: #eeeeee;
6+
$gray-200: #e7e7e7;
7+
$gray-300: #e0e0e0;
8+
$gray-400: #d8d8d8;
9+
$gray-500: #bdbdbd;
10+
$gray-600: #9e9e9e;
11+
$gray-700: #757575;
12+
$gray-750: #6b6b6b;
13+
$gray-800: #616161;
14+
$gray-900: #424242;
15+
$gray-950: #333333;
16+
$gray-975: #212121;
17+
$gray-1000: #000000;
18+
// Cyans
19+
$cyan-50: #e4f9f9;
20+
$cyan-100: #b6e3eb;
21+
$cyan-500: #16b9d4;
22+
$cyan-700: #0e94a6;
23+
$cyan-900: #0c7c84;
24+
// Blues
25+
$blue-50: #e1eef9;
26+
$blue-100: #bbdefb;
27+
$blue-500: #3391ff;
28+
$blue-700: #0d74d1;
29+
$blue-900: #0d47a1;
30+
// Magentas
31+
$magenta-50: #fce0eb;
32+
$magenta-100: #f8bbd0;
33+
$magenta-500: #ec407a;
34+
$magenta-700: #c2185b;
35+
$magenta-900: #a5134e;
36+
// Purples
37+
$purple-50: #adb7dd;
38+
$purple-100: #6676bc;
39+
$purple-500: #3b44a9;
40+
$purple-700: #2e3187;
41+
$purple-900: #232968;
42+
// Oranges
43+
$orange-50: #f8e1bb;
44+
$orange-100: #fdd179;
45+
$orange-500: #f57c00;
46+
$orange-700: #dd6105;
47+
$orange-900: #c15206;
48+
// Greens
49+
$green-100: #c8e6c9;
50+
$green-500: #4caf51;
51+
$green-900: #2e7d32;
52+
// Yellows
53+
$yellow-100: #fff9c4;
54+
$yellow-500: #ffeb3b;
55+
$yellow-900: #fbc02d;
56+
// Reds
57+
$red-100: #ffcdd2;
58+
$red-500: #f44336;
59+
$red-900: #d32f2f;
60+
// Shadow
61+
$shadow-color: rgba($gray-1000, 0.16);
62+
$backdrop-color: rgba($gray-1000, 0.6);
63+
64+
// ===== SHADOWS =====
65+
// Tooltips, Menus, Popovers, etc.
66+
$layering-shadow: 0 3px 3px 0 $shadow-color;
67+
// Modals, Toasts, etc.
68+
//$focusing-shadow: TBD
69+
70+
// ===== FONTS =====
71+
$font-sans-serif: "Roboto", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
72+
$font-monospace: "Roboto Mono", monospace;
73+
74+
// ==== FOCUS STATE =====
75+
$focus-glow: 0 0 4px rgba($cyan-700, 0.5);
76+
$focus-glow-disabled: $focus-glow;
77+
$focus-glow-invalid: 0 0 4px rgba($red-900, 0.5);
78+
79+
$app-nav-width: 15rem;
80+
$corner-radius: 2px;
81+
82+
// ==== Z-INDEX =====
83+
$drawer-z-index: 50;
84+
$menu-z-index: 100;
85+
$search-assistance-z-index: 100;
86+
$popover-z-index: 1000;
87+
$tooltip-z-index: 1100;
88+
$modal-z-index: 1200;
89+
90+
$space: (
91+
xs: 0.5rem,
92+
sm: 0.75rem,
93+
md: 1.25rem,
94+
lg: 2rem,
95+
xl: 3rem,
96+
xxl: 4.5rem,
97+
flush: 0
98+
);
99+
100+
// ===== FORMS v1.0.0 SUPPORT =====
101+
$container-padding: 2rem;
102+
103+
// ---------------------------------------- //
104+
// ----------------- GRID ----------------- //
105+
// ---------------------------------------- //
106+
$gutter-size: 20px;
107+
108+
// Responsive Breakpoints
109+
// key order matters (must be from smallest to largest breakpoint)
110+
// stylelint-disable length-zero-no-unit
111+
$screen: (
112+
xs: 0em,
113+
sm: 40em, // ~640px
114+
md: 64em, // ~1024px
115+
lg: 75em, // ~1200px
116+
xl: 90em, // ~1440px
117+
);
118+
// stylelint-enable

0 commit comments

Comments
 (0)