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

Output new tokens to new directory. Output new and legacy namespaces #56

Closed
wants to merge 6 commits into from
Closed

Output new tokens to new directory. Output new and legacy namespaces #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3d0e20f
Output new tokens to new directory. Output new and legacy namespaces
xdrdak Dec 3, 2019
0caf88c
Merge branch 'master' into generate-flame-tokens-css
glambert Dec 10, 2019
51d20fe
Update changelog
glambert Dec 10, 2019
92640af
Merge branch 'master' into generate-flame-tokens-css
glambert Dec 10, 2019
56d5d48
Update readme for flame tokens
xdrdak Dec 11, 2019
81b19e0
Merge branch 'master' into generate-flame-tokens-css
glambert Dec 11, 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
2 changes: 2 additions & 0 deletions packages/flame-tokens/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@ partials
index.scss
index.css
built-themes
css/
sass/
16 changes: 16 additions & 0 deletions packages/flame-tokens/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

Refer to the [CONTRIBUTING guide](https://github.com/lightspeed/flame/blob/master/.github/CONTRIBUTING.md) for more info.

## [Unreleased]

All changes in this release done in [#56](https://github.com/lightspeed/flame/pull/56).

### Added

- Created css and sass dist folders that contains a better namespaced location for css/sass tokens
- Generate the new tokens into their appropriate utility files
- Added the new `fl-` namespace for token utility files
- Root level partials will also include the new namespaces

### Deprecated

- Root level css and sass files will be removed, prefer going through the appropriate namespaced folder to get your utility files
- The `cr-` namespace will be removed in favour of the `fl-` namespace

## 1.0.0 - 2019-10-08

- Flame tokens is now considered stable :tada:
Expand Down
60 changes: 32 additions & 28 deletions packages/flame-tokens/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,41 +57,45 @@ Note that this command will be run automatically when we publish to npm.
### Import SCSS variables

```scss
@import '@lightspeed/flame-tokens/index.scss';
@import '@lightspeed/flame-tokens/sass/index.scss';
Copy link
Collaborator

Choose a reason for hiding this comment

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

Isn't this supposed to be @import '@lightspeed/flame-tokens/sass/flame/index.scss'; based on your changes?

```

### Use as utility classes

You can also use tokens as utility classes by importing partials:

```scss
@import '@lightspeed/flame-tokens/partials/_colors.scss';
@import '@lightspeed/flame-tokens/partials/_typography.scss';
@import '@lightspeed/flame-tokens/partials/_spacing.scss';
@import '@lightspeed/flame-tokens/partials/_shadows.scss';
@import '@lightspeed/flame-tokens/partials/_radii.scss';
@import '@lightspeed/flame-tokens/partials/_transitions.scss';
@import '@lightspeed/flame-tokens/sass/partials/_colors.scss';
@import '@lightspeed/flame-tokens/sass/partials/_typography.scss';
@import '@lightspeed/flame-tokens/sass/partials/_spacing.scss';
@import '@lightspeed/flame-tokens/sass/partials/_shadows.scss';
@import '@lightspeed/flame-tokens/sass/partials/_radii.scss';
@import '@lightspeed/flame-tokens/sass/partials/_transitions.scss';
```

Or include them all in one import:

```scss
@import '@lightspeed/flame-tokens/partials/index.scss';
@import '@lightspeed/flame-tokens/sass/partials/index.scss';
```

Utility classes follow the same naming convention as variables, except for spacing. Here's a rundown:

---

### Please Note

Although the examples uses the `.fl-` namespace, the old `.cr-` namespace is still supported, but will be removed in a subsequent version. It is highly recommended to move to the new `.fl` namespace.

## Colors

Every color is structured in the following way: We have one base color (_e.g., **blue**_) and each base color has three variants which are scaled on brightness with a numeric system similar to fonts (**blue-100** being the lighter variant and **blue-300** being the darker one\*). That leaves space for potential new colors and makes things clear if you have to pick a non-base color for something.

We name our colors by their original name except for our brand colors. It makes things more clear when you are using a brand color which is a good thing to take in mind.

- Text colors: `.cr-{color}-{value}`
- Background colors: `.cr-bg-{color}-{value}`
- Border colors: `.cr-border-{color}-{value}`
- Text colors: `.fl-{color}-{value}`
- Background colors: `.fl-bg-{color}-{value}`
- Border colors: `.fl-border-{color}-{value}`

---

Expand All @@ -107,24 +111,24 @@ So why do we use Lato over all the others? Simply put, we appreciate its rich ch

The font scale consists of seven different font sizes. No other sizes are accepted. The `text-xxs` text style should only be used in uppercase because 8 is generally too small for text, by making it uppercase it has the same height as normal `text-xs` text.

- Typefaces: `.cr-serif`, `.cr-sans-serif`, `.cr-monospace`
- Weights: `.cr-regular`, `.cr-bold`
- Sizes: `.cr-text-{size}`
- Letter-spacing: `.cr-letter-spacing-{scale}`
- Typefaces: `.fl-serif`, `.fl-sans-serif`, `.fl-monospace`
- Weights: `.fl-regular`, `.fl-bold`
- Sizes: `.fl-text-{size}`
- Letter-spacing: `.fl-letter-spacing-{scale}`

---

## Spacing

We use shorthand notation for spacing to keep things terse. `m` is for margin, `p` is for padding.

- All sides: `.cr-m-{scale}`, `.cr-p-{scale}`
- Top: `.cr-mt-{scale}`, `.cr-pt-{scale}`
- Left: `.cr-ml-{scale}`, `.cr-pl-{scale}`
- Bottom: `.cr-mb-{scale}`, `.cr-pb-{scale}`
- Right: `.cr-mr-{scale}`, `.cr-pr-{scale}`
- Vertical (Top/Bottom): `.cr-mv-{scale}`, `.cr-pv-{scale}`
- Horizontal (Left/Right): `.cr-mh-{scale}`, `.cr-ph-{scale}`
- All sides: `.fl-m-{scale}`, `.fl-p-{scale}`
- Top: `.fl-mt-{scale}`, `.fl-pt-{scale}`
- Left: `.fl-ml-{scale}`, `.fl-pl-{scale}`
- Bottom: `.fl-mb-{scale}`, `.fl-pb-{scale}`
- Right: `.fl-mr-{scale}`, `.fl-pr-{scale}`
- Vertical (Top/Bottom): `.fl-mv-{scale}`, `.fl-pv-{scale}`
- Horizontal (Left/Right): `.fl-mh-{scale}`, `.fl-ph-{scale}`

---

Expand All @@ -134,24 +138,24 @@ Shadows make things tangible on screen. It gives the illusion of things coming o

Inputs become more recognizable when they have an inner shadow in place. Also, to provide more feeling to the pressed states of buttons we need to create the illusion that it is being pushed into the background, an inner shadow will help with that.

- Outer: `.cr-shadow-{scale}`
- Inner: `.cr-inner-shadow-{scale}`, `.cr-inner-shadow-n{scale}
- Border: `.cr-border-shadow`
- Outer: `.fl-shadow-{scale}`
- Inner: `.fl-inner-shadow-{scale}`, `.fl-inner-shadow-n{scale}`
- Border: `.fl-border-shadow`

---

## Radii

Border radius applies to all corners. We use them to make our elements look friendlier and softer to the eye.

- Scale: `.cr-radius-{scale}`
- Circle: `.cr-radius-circle`
- Scale: `.fl-radius-{scale}`
- Circle: `.fl-radius-circle`

---

#### Transitions

- Durations: `.cr-transition-duration-{speed}`
- Durations: `.fl-transition-duration-{speed}`

#### Using tokens directly (Advanced)

Expand Down
4 changes: 3 additions & 1 deletion packages/flame-tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,10 @@
"polished": "^1.0.2"
},
"devDependencies": {
"@types/fs-extra": "^8.0.1",
"@types/node": "^12.7.2",
"concurrently": "^4.1.0",
"fs-extra": "^8.1.0",
"nodemon": "^1.18.10",
"rimraf": "^2.6.3",
"ts-node": "^8.3.0"
Expand All @@ -28,7 +30,7 @@
"build:cjs": "BABEL_ENV=cjs babel src --out-dir dist --config-file ../../babel.config.js --extensions .ts,.tsx,.js,.jsx",
"build:esm": "BABEL_ENV=production babel src --out-dir dist/esm --config-file ../../babel.config.js --extensions .ts,.tsx,.js,.jsx",
"build:types": "tsc --p ./tsconfig.types.json",
"clean": "rimraf dist && rimraf built-themes && rimraf partials",
"clean": "rimraf dist && rimraf built-themes && rimraf partials && rimraf css && rimraf sass",
"prepublish": "yarn clean && yarn build && node ../../scripts/validate-build"
},
"publishConfig": {
Expand Down
Loading