sbb-design-systems / lyne-design-tokens Goto Github PK

🧪 Manages and publishes Design Tokens for Lyne Design System

JavaScript 1.84% Shell 0.37% TypeScript 79.22% CSS 18.58%

design-system javascript web-components design-tokens style-dictionary lyne lyne-design-tokens

lyne-design-tokens's Introduction

Lyne Design Tokens

Automatically generate cross-platform Design Tokens for the Lyne Design System based json properties files and publish them as @sbb-esta/lyne-design-tokens npm package.

Installation

Install the Lyne Design Tokens with the following command:

npm install --save-dev @sbb-esta/lyne-design-tokens

What's included

lyne-design-tokens/
├── composed-variables/                             # Composed CSS variables like responsive tokens
├── designTokens/                                   # Token source files
└── dist/                                           # These files get built through the build task and get published via npm — are part of the npm package
    ├── css/
    │    ├── sbb-variables--host.css                # `sbb-` prefixed CSS variables with :host selector (converted to `rem`)
    │    └── sbb-variables--root.css                # `sbb-` prefixed CSS variables with :root selector (converted to `rem`)
    ├── js/
    │    ├── sbb-tokens-raw.json                    # `sbb-` prefixed nested .json file
    │    ├── sbb-tokens.mjs                         # `Sbb` prefixed flat esm file
    │    ├── sbb-tokens.cjs                         # `Sbb` prefixed flat commonjs file
    │    ├── sbb-tokens.d.ts                        # `Sbb` prefixed flat type declaration
    │    └── sbb-tokens.json                        # `sbb-` prefixed flat .json file
    └── scss/
         ├── sbb-variables_css--placeholder.scss    # `sbb-` prefixed CSS variables with Sass placeholder selector (%) (converted to `rem`)
         └── sbb-variables.scss                     # `sbb-` prefixed Sass variables (converted to `rem`)

Usage

Have a look at the dist folder inside node_modules: ./node_modules/@sbb-esta/lyne-design-tokens/dist/. There you will find the different variables files which you can import and use in your project.

Development

Conventional Commits

Please follow the Conventional Commits specification to make sure we can automatically determine the next release version if necessary.

Components

See Lyne Components for components using these design tokens.

lyne-design-tokens's People

Contributors

Stargazers

Watchers

Forkers

mircmo

lyne-design-tokens's Issues

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here are some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No Slack web-hook defined.

A Slack Webhook must be created and set in the SLACK_WEBHOOK environment variable on your CI environment.

Please make sure to create a Slack Webhook and to set it in the SLACK_WEBHOOK environment variable on your CI environment. Alternatively, provide slackWebhook as a configuration option.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Add new typo size "L" to design tokens

jobs to be done:
– check if somewhere the style "L" is still used, replace it with "XL" if necessary.
– add new size "L" (specification in figma)

https://www.figma.com/file/mWknI2rC5DJmOgRO61WKai/Lyne-Design-Tokens?node-id=1206%3A7067

story(build): reset versions and add @sbb-esta npm namespace

Feature Description

We want to reset the version to 0.1.0 and use the @sbb-esta npm namespace.

Definition of Done

Version is reset to 0.1.0
package.json name property is @sbb-esta/lyne-components
package.json contains "publishConfig": { "access": "public" } in order to allow namespaced publishes
git tags are removed
CHANGELOG.md is renamed to CHANGELOG_LEGACY.md

Namespace Design Tokens

Lyne Design Tokens should be namespaced to avoid name clashes with other custom properties.

Proposal: Either use l-PROPERTYNAME which might still lead to a name clash since it is not very specific or use lyne-PROPERTYNAME which is much more specific but a bit longer.

My suggestion is to use lyne-PROPERTYNAME

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

chore(deps): lock file maintenance

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

chore(deps): update dependency style-dictionary to v4

Detected dependencies

github-actions

.github/workflows/codeql-analysis.yml

actions/checkout v4

github/codeql-action v3

github/codeql-action v3

github/codeql-action v3

.github/workflows/continuous-integration.yml

actions/checkout v4

actions/setup-node v4

actions/checkout v4

actions/setup-node v4

.github/workflows/pr-title-lint.yml

actions/checkout v4

actions/setup-node v4

.github/workflows/release-please.yml

googleapis/release-please-action v4

actions/checkout v4

actions/setup-node v4

npm

package.json

@commitlint/cli 19.3.0

@commitlint/config-conventional 19.2.2

@eslint/js 9.7.0

@types/node 20.14.11

eslint 9.7.0

eslint-config-prettier 9.1.0

eslint-plugin-yml 1.14.0

globals 15.8.0

husky 9.0.11

lint-staged 15.2.7

prettier 3.3.3

style-dictionary 3.9.2

tsx 4.16.2

typescript 5.5.3

typescript-eslint 7.16.1

nvm

.nvmrc

node 20.15.1

Check this box to trigger a request for Renovate to run again on this repository

Increase button font size

After developing the button, interacting with it on a page, we think that the button font size should be increased from 14px to 16px. What is the point of view from you designers?

The automated release is failing 🚨

🚨 The automated release from the `master` branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Missing `package.json` file.

A package.json file at the root of your project is required to release on npm.

Please follow the npm guideline to create a valid package.json file.

Good luck with your project ✨

Your semantic-release bot 📦🚀

7x fixed spacing in design tokens.

https://www.figma.com/file/mWknI2rC5DJmOgRO61WKai/Lyne-Design-Tokens?type=design&node-id=2345%3A4345&mode=design&t=icnDqBqDt89moTIq-1

sbb-design-systems / lyne-design-tokens Goto Github PK

lyne-design-tokens's Introduction

Lyne Design Tokens

Installation

What's included

Usage

Development

Conventional Commits

Components

lyne-design-tokens's People

Contributors

Stargazers

Watchers

Forkers

lyne-design-tokens's Issues

🚨 The automated release from the master branch failed. 🚨

No Slack web-hook defined.

Feature Description

Definition of Done

Awaiting Schedule

Edited/Blocked

Detected dependencies

🚨 The automated release from the master branch failed. 🚨

Missing package.json file.

Recommend Projects

Recommend Topics

Recommend Org

🚨 The automated release from the `master` branch failed. 🚨

🚨 The automated release from the `master` branch failed. 🚨

Missing `package.json` file.