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

Add code syntax theme to docs #405

Merged
merged 3 commits into from
Jan 4, 2017
Merged

Add code syntax theme to docs #405

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cf89133
quick-and-dirty syntax theme!
Jan 4, 2017
f39c0ba
rewrite to avoid `@extend` entirely
Jan 4, 2017
18f988a
brace colors, un-bethicken braces, fix one language hint
Jan 4, 2017
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
4 changes: 2 additions & 2 deletions packages/core/src/common/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ Variables

Available for use with Sass and Less.

```scss
@import "path/to/blueprint/variables";
```css.scss
@import "path/to/@blueprintjs/core/dist/variables";
```

The Sass `$` convention is used in this documentation for consistency with the original source code.
Expand Down
5 changes: 1 addition & 4 deletions packages/docs/src/docs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,6 @@ and https://github.com/palantir/blueprint/blob/master/PATENTS
@import "~@blueprintjs/datetime";
@import "~@blueprintjs/table";

// TODO publish and re-enable
// @import "blueprint-syntax/dist/atom-blueprint-syntax-light.css";
// @import "blueprint-syntax/dist/atom-blueprint-syntax-dark.css";

@import "styles/colors";
@import "styles/content";
@import "styles/examples";
Expand All @@ -25,3 +21,4 @@ and https://github.com/palantir/blueprint/blob/master/PATENTS
@import "styles/overrides";
@import "styles/props";
@import "styles/sections";
@import "styles/syntax";
85 changes: 85 additions & 0 deletions packages/docs/src/styles/_syntax.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
@import "variables";

$light-scopes: (
"attribute-name": $orange3,
"background": $white,
"comment": $gray2,
"constant": $turquoise2,
"function": $blue2,
"id": $gold2,
"keyword": $violet3,
"numeric": $rose2,
"operator": $violet2,
"pseudo-class": $rose2,
"punctuation": $dark-gray3,
"string": $lime1,
"tag": $forest2,
"text": $dark-gray1,
"type": $gold2,
"variable": $turquoise2,
);

$dark-scopes: (
"attribute-name": $orange4,
"background": $dark-gray2,
"comment": $gray2,
"constant": $turquoise5,
"function": $blue4,
"id": $gold5,
"keyword": $violet4,
"numeric": $rose4,
"operator": $violet5,
"pseudo-class": $rose3,
"punctuation": $light-gray5,
"string": $lime4,
"tag": $forest3,
"text": $gray5,
"type": $gold4,
"variable": $turquoise3,
);


@mixin syntax($scopes) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

minor: calling this argument "scopes" is a little confusing; I would just call it "colors" or something

background: map-get($scopes, "background");
color: map-get($scopes, "text");

@each $scope in ("punctuation" "comment" "string" "constant" "numeric" "variable" "keyword" "operator") {
.#{$scope} { color: map-get($scopes, $scope); }
}

.storage {
@extend .keyword;
}

.entity.name,
.meta.name,
.support.type {
color: map-get($scopes, "type");
}

.entity {
@each $scope in ("attribute-name" "tag" "function" "pseudo-class") {
&.#{$scope} { color: map-get($scopes, $scope); }
}

&.pseudo-element {
@extend .tag;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shouldn't this be a lint error? we should be using the placeholder-in-extends rule..?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i think we disabled that nonsense cuz we moved our placeholders to mixins.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't see why that justifies disabling the rule? If we aren't using placeholders, then there should really be no reason to use @extends at all...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you'll notice i didn't disable the rule here. it's always been like this.

this seems like a valid use of @extend: i want one selector to behave exactly like another, in a very controlled way.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

searching for usages of @extend reveals more instances of what i'm doing here: https://github.com/palantir/blueprint/search?utf8=%E2%9C%93&q=extend&type=Code

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I know it hasn't been disabled inline, I'm just alarmed that this passed lint because I expected the rule to be enabled across the codebase.

There's a good reason the lint rule is there. Basically every time it's been circumvented has been regretful. But this is in the docs site so I don't mind being lenient about it. Still should be accompanied with a stylelint-disable flag to make it stand out.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👎 https://github.com/palantir/blueprint/blob/master/.stylelintrc#L9

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ok, now we have an objectively better solution that involves a whopping zero @extends 🛠

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#411

}
}

.support.type.scss,
.punctuation.definition.css {
color: inherit;
}
}

// actually generate the two themes:

.editor-colors {
@include syntax($light-scopes);

.pt-dark & {
@include syntax($dark-scopes);
}
}