Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[RFC] Elements integration strategy #1795

Closed
wants to merge 9 commits into from
Closed

[RFC] Elements integration strategy #1795

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
1e7353b
chore: check-in work
joshblack Feb 8, 2019
9e59a83
chore(elements): update elements
joshblack Feb 13, 2019
19b37ae
chore: sync vendor styles
joshblack Feb 13, 2019
0f10530
test(jest): add helpers for rendering scss inline
joshblack Feb 13, 2019
7b98923
chore(grid): remove experimental grid
joshblack Feb 13, 2019
9b14f80
feat(grid): add elements grid
joshblack Feb 13, 2019
be7607e
chore: update eslint global comment
joshblack Feb 13, 2019
48d64c0
chore: add change-case as devDependency
joshblack Feb 13, 2019
598291e
feat(colors): add colors from elements
joshblack Feb 13, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@carbon/elements": "^0.0.1-alpha.29",
"@carbon/icons-handlebars": "^0.0.1-alpha.29",
"@carbon/elements": "^0.0.1-alpha.32",
"@carbon/icons-handlebars": "^0.0.1-alpha.32",
"@commitlint/cli": "^7.0.0",
"@commitlint/config-conventional": "^7.0.1",
"@frctl/fractal": "^1.1.0",
Expand All @@ -65,6 +65,7 @@
"browser-sync": "^2.26.3",
"carbon-addons-cloud": "^1.8.0",
"carbon-components-react": "^5.8.0",
"change-case": "^3.1.0",
"chokidar": "^2.0.0",
"classnames": "^2.2.0",
"commander": "^2.13.0",
Expand Down Expand Up @@ -125,7 +126,7 @@
"minimatch": "^3.0.0",
"mkdirp": "^0.5.0",
"mock-raf": "^1.0.0",
"node-sass": "^4.10.0",
"node-sass": "^4.11.0",
"nodemon": "^1.18.7",
"path-to-regexp": "^2.2.0",
"portscanner": "^2.2.0",
Expand Down
20 changes: 10 additions & 10 deletions src/components/button/_button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,12 +202,12 @@

.#{$prefix}--btn--secondary {
@include button-theme--x(
$ibm-colors__gray-80,
$ibm-colors__gray-80,
$ibm-color__gray-80,
$ibm-color__gray-80,
$inverse-01,
$ibm-colors__gray-70,
$ibm-color__gray-70,
$inverse-01,
$ibm-colors__gray-60
$ibm-color__gray-60
);

&:hover,
Expand Down Expand Up @@ -245,17 +245,17 @@
transparent,
transparent,
$interactive-03,
$ibm-colors__gray-10,
$ibm-color__gray-10,
$interactive-03,
$ibm-colors__blue-70
$ibm-color__blue-70
);

&:hover,
&:active {
color: $ibm-colors__blue-70;
color: $ibm-color__blue-70;

.#{$prefix}--btn__icon {
fill: $ibm-colors__blue-70;
fill: $ibm-color__blue-70;
}
}

Expand All @@ -281,7 +281,7 @@
}

.#{$prefix}--btn--danger {
@include button-theme--x(transparent, $support-01, $support-01, $support-01, $support-01, $ibm-colors__red-80);
@include button-theme--x(transparent, $support-01, $support-01, $support-01, $support-01, $ibm-color__red-80);

&:hover {
color: $inverse-01;
Expand All @@ -294,7 +294,7 @@
}

.#{$prefix}--btn--danger--primary {
@include button-theme--x($support-01, transparent, $inverse-01, #ba1b23, $ui-01, $ibm-colors__red-80);
@include button-theme--x($support-01, transparent, $inverse-01, #ba1b23, $ui-01, $ibm-color__red-80);

&:hover:disabled,
&:focus:disabled {
Expand Down
8 changes: 4 additions & 4 deletions src/components/button/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,8 +97,8 @@
&:disabled {
cursor: not-allowed;
color: $ui-04;
background: $ibm-colors__gray-30;
border-color: $ibm-colors__gray-30;
background: $ibm-color__gray-30;
border-color: $ibm-color__gray-30;
}

.#{$prefix}--btn__icon {
Expand Down Expand Up @@ -160,8 +160,8 @@
&:disabled:hover,
&:disabled:focus {
color: $ui-04;
background: $ibm-colors__gray-30;
border-color: $ibm-colors__gray-30;
background: $ibm-color__gray-30;
border-color: $ibm-color__gray-30;
text-decoration: none;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/content-switcher/_content-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -202,7 +202,7 @@

// TODO: replace with new disabled color token when finalized
&:disabled {
background-color: $ibm-colors__gray-30;
background-color: $ibm-color__gray-30;
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/structured-list/_structured-list.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,7 @@
}

.#{$prefix}--structured-list-row:hover .#{$prefix}--structured-list-svg {
fill: $ibm-colors__gray-40;
fill: $ibm-color__gray-40;
}

.#{$prefix}--structured-list-input:checked + .#{$prefix}--structured-list-row .#{$prefix}--structured-list-svg,
Expand Down
24 changes: 12 additions & 12 deletions src/components/tag/_tag.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,47 +89,47 @@
}

.#{$prefix}--tag--basic {
@include tag-theme--x($ibm-colors__gray-20, $ibm-colors__gray-100);
@include tag-theme--x($ibm-color__gray-20, $ibm-color__gray-100);
}

.#{$prefix}--tag--red {
@include tag-theme--x($ibm-colors__red-20, $ibm-colors__red-70);
@include tag-theme--x($ibm-color__red-20, $ibm-color__red-70);
}

.#{$prefix}--tag--magenta {
@include tag-theme--x($ibm-colors__magenta-20, $ibm-colors__magenta-70);
@include tag-theme--x($ibm-color__magenta-20, $ibm-color__magenta-70);
}

.#{$prefix}--tag--purple {
@include tag-theme--x($ibm-colors__purple-20, $ibm-colors__purple-70);
@include tag-theme--x($ibm-color__purple-20, $ibm-color__purple-70);
}

.#{$prefix}--tag--blue {
@include tag-theme--x($ibm-colors__blue-20, $ibm-colors__blue-70);
@include tag-theme--x($ibm-color__blue-20, $ibm-color__blue-70);
}

.#{$prefix}--tag--cyan {
@include tag-theme--x($ibm-colors__cyan-20, $ibm-colors__cyan-70);
@include tag-theme--x($ibm-color__cyan-20, $ibm-color__cyan-70);
}

.#{$prefix}--tag--teal {
@include tag-theme--x($ibm-colors__teal-20, $ibm-colors__teal-70);
@include tag-theme--x($ibm-color__teal-20, $ibm-color__teal-70);
}

.#{$prefix}--tag--green {
@include tag-theme--x($ibm-colors__green-20, $ibm-colors__green-70);
@include tag-theme--x($ibm-color__green-20, $ibm-color__green-70);
}

.#{$prefix}--tag--cool-gray {
@include tag-theme--x($ibm-colors__cool-gray-20, $ibm-colors__cool-gray-100);
@include tag-theme--x($ibm-color__cool-gray-20, $ibm-color__cool-gray-100);
}

.#{$prefix}--tag--warm-gray {
@include tag-theme--x($ibm-colors__warm-gray-20, $ibm-colors__warm-gray-100);
@include tag-theme--x($ibm-color__warm-gray-20, $ibm-color__warm-gray-100);
}

.#{$prefix}--tag--disabled {
@include tag-theme--x($ibm-colors__gray-20, $ibm-colors__gray-30);
@include tag-theme--x($ibm-color__gray-20, $ibm-color__gray-30);

&:hover {
cursor: not-allowed;
Expand All @@ -140,7 +140,7 @@
.#{$prefix}--tag.#{$prefix}--skeleton {
// TODO: replace hexcode with gray 10 hover hover token
// from @carbon/elements
@include tag-theme--x(#e5e5e5, $ibm-colors__gray-30);
@include tag-theme--x(#e5e5e5, $ibm-color__gray-30);
width: rem(60px);

&:after {
Expand Down
4 changes: 2 additions & 2 deletions src/components/toggle/_toggle.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,8 +369,8 @@

.#{$prefix}--toggle:disabled + .#{$prefix}--toggle__label .#{$prefix}--toggle__appearance {
&:before {
background-color: $ibm-colors__gray-20; // TODO: Replace with role or add new color variable
border-color: $ibm-colors__gray-20; // TODO: Replace with role or add new color variable
background-color: $ibm-color__gray-20; // TODO: Replace with role or add new color variable
border-color: $ibm-color__gray-20; // TODO: Replace with role or add new color variable
}

&:after {
Expand Down
12 changes: 6 additions & 6 deletions src/components/ui-shell/_header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,11 +131,11 @@

.#{$prefix}--header__action:active,
a.#{$prefix}--header__menu-item[role='menuitem']:active {
background-color: $ibm-colors__gray-80;
background-color: $carbon--gray-80;
}

a.#{$prefix}--header__menu-item[role='menuitem']:focus {
border-color: $ibm-colors__blue-60;
border-color: $carbon--blue-60;
outline: none;
}

Expand All @@ -148,7 +148,7 @@
}

.#{$prefix}--header__menu-title[role='menuitem'][aria-expanded='true'] {
background-color: $ibm-colors__gray-80;
background-color: $carbon--gray-80;
// Note: needs to be higher than menu. Adding 1 here instead of moving to
// the next level.
z-index: #{z('header') + 1};
Expand All @@ -170,7 +170,7 @@
width: mini-units(25);
flex-direction: column;
transform: translateY(100%);
background-color: $ibm-colors__gray-80;
background-color: $carbon--gray-80;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
z-index: z('header');
}
Expand All @@ -185,7 +185,7 @@
}

.#{$prefix}--header__menu-arrow {
fill: $ibm-colors__gray-10;
fill: $carbon--gray-10;
margin-left: mini-units(1);
}

Expand Down Expand Up @@ -223,7 +223,7 @@
width: auto;
height: 3rem;
clip: auto;
border: 4px solid $ibm-colors__blue-60;
border: 4px solid $carbon--blue-60;
z-index: 9999;
background-color: $shell-header-bg-01;
color: $shell-header-text-01;
Expand Down
26 changes: 13 additions & 13 deletions src/components/ui-shell/_navigation-menu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,11 @@
top: mini-units(6);
bottom: 0;
left: 0;
background-color: $ibm-colors__gray-90;
background-color: $carbon--gray-90;
width: mini-units(32);
z-index: z('dropdown');
box-shadow: 0 mini-units(1) mini-units(2) 0 rgba(0, 0, 0, 0.25);
color: $ibm-colors__gray-10;
color: $carbon--gray-10;
}

.#{$prefix}--navigation--right {
Expand All @@ -32,7 +32,7 @@
}

.#{$prefix}--navigation svg {
fill: $ibm-colors__gray-10;
fill: $carbon--gray-10;
}

//----------------------------------------------------------------------------
Expand All @@ -42,7 +42,7 @@
display: block;
content: '';
height: 1px;
background-color: $ibm-colors__gray-80;
background-color: $carbon--gray-80;
margin: 0 mini-units(2);
}

Expand All @@ -56,7 +56,7 @@
}

.#{$prefix}--navigation-item--active > a.#{$prefix}--navigation-link {
color: $ibm-colors__white;
color: $ibm-color__white-0;
font-weight: 600;
}

Expand All @@ -68,7 +68,7 @@
bottom: 0;
left: 0;
width: 4px;
background-color: $ibm-colors__blue-60;
background-color: $carbon--blue-60;
}

//----------------------------------------------------------------------------
Expand All @@ -77,7 +77,7 @@
a.#{$prefix}--navigation-link {
display: flex;
align-items: center;
color: $ibm-colors__gray-10;
color: $carbon--gray-10;
text-decoration: none;
font-size: rem(14px);
font-weight: 400;
Expand All @@ -88,11 +88,11 @@

a.#{$prefix}--navigation-link:hover {
background-color: #333333;
color: $ibm-colors__white;
color: $ibm-color__white-0;
}

a.#{$prefix}--navigation-link:focus {
outline: rem(3px) solid $ibm-colors__blue-60;
outline: rem(3px) solid $carbon--blue-60;
outline-offset: rem(-3px);
}

Expand All @@ -119,7 +119,7 @@
}

.#{$prefix}--navigation__category-toggle:focus {
outline: rem(3px) solid $ibm-colors__blue-60;
outline: rem(3px) solid $carbon--blue-60;
outline-offset: rem(-3px);
}

Expand All @@ -129,7 +129,7 @@
justify-content: space-between;
padding-right: mini-units(2);
width: 100%;
color: $ibm-colors__gray-10;
color: $carbon--gray-10;
font-size: rem(14px);
font-weight: 400;
min-height: mini-units(5);
Expand Down Expand Up @@ -168,12 +168,12 @@
bottom: 0;
left: 0;
width: 4px;
background-color: $ibm-colors__blue-60;
background-color: $carbon--blue-60;
}

.#{$prefix}--navigation__category-item--active > a.#{$prefix}--navigation-link {
font-weight: 600;
color: $ibm-colors__white;
color: $ibm-color__white-0;
}

.#{$prefix}--navigation__category--expanded .#{$prefix}--navigation__category-title {
Expand Down
6 changes: 3 additions & 3 deletions src/components/ui-shell/_side-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@
// Useful to toggle this property to see what's going on when not expanded
overflow: hidden;
// Separates out the panel from the header of the same color
border-top: 1px solid $ibm-colors__gray-80;
border-top: 1px solid $carbon--gray-80;
z-index: z('header');
}

Expand Down Expand Up @@ -123,7 +123,7 @@
//----------------------------------------------------------------------------
.#{$prefix}--side-nav__header {
display: flex;
border-bottom: 1px solid $ibm-colors__gray-80;
border-bottom: 1px solid $carbon--gray-80;
width: 100%;
height: mini-units(6);
max-width: 100%;
Expand Down Expand Up @@ -328,7 +328,7 @@

.#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link--current,
.#{$prefix}--side-nav__menu[role='menu'] a.#{$prefix}--side-nav__link[aria-current='page'] {
background-color: $ibm-colors__gray-70;
background-color: $carbon--gray-70;
}

//----------------------------------------------------------------------------
Expand Down
Loading