Skip to content

Commit

Permalink
feat(fuselage): new PaletteStyleTag component (#1289)
Browse files Browse the repository at this point in the history
  • Loading branch information
@juliajforesti
juliajforesti authored Feb 27, 2024
1 parent c92574e commit a40d471
Show file tree
Hide file tree
Showing 27 changed files with 1,141 additions and 110 deletions.
6 changes: 6 additions & 0 deletions .changeset/eleven-news-report.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@rocket.chat/fuselage-tokens": minor
"@rocket.chat/fuselage": minor
---

feat(fuselage): new `PaletteStyleTag` component
6 changes: 5 additions & 1 deletion packages/fuselage-tokens/build.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,11 +118,15 @@ StyleDictionary.registerFormat({
const exp = /[a-z]+\/([a-z]+)\/[a-z]+.json/i;
const [, group] = dictionary.allTokens[0].filePath.match(exp);
const newPaletteGroup = [
'badge',
'background',
'surface',
'stroke',
'shadow',
'button',
'text',
'font',
'status',
'statusBullet',
];

if (newPaletteGroup.includes(group)) {
Expand Down
4 changes: 3 additions & 1 deletion packages/fuselage-tokens/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,9 @@ module.exports = {
tokenCategory === 'breakpoints' || tokenCategory === 'colors'
? customFormat
: 'json/nested',
filter: (token) => token.filePath.includes(tokenCategory),
filter: (token) =>
// console.log(token.filePath.includes(tokenCategory), tokenCategory);
token.filePath.includes(tokenCategory),
};
}),
},
Expand Down
25 changes: 25 additions & 0 deletions packages/fuselage-tokens/src/badge/base.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
{
"badge": {
"light": {
"level-0": { "value": "{colors.n400}" },
"level-1": { "value": "{colors.n700}" },
"level-2": { "value": "{colors.b500}" },
"level-3": { "value": "{colors.o500}" },
"level-4": { "value": "{colors.r500}" }
},
"high-contrast": {
"level-0": { "value": "{colors.n400}" },
"level-1": { "value": "{colors.n800}" },
"level-2": { "value": "{colors.b700}" },
"level-3": { "value": "{colors.o900}" },
"level-4": { "value": "{colors.r800}" }
},
"dark": {
"level-0": { "value": "#404754" },
"level-1": { "value": "#484C51" },
"level-2": { "value": "#2C65BA" },
"level-3": { "value": "#955828" },
"level-4": { "value": "#B43C4C" }
}
}
}
195 changes: 130 additions & 65 deletions packages/fuselage-tokens/src/button/base.json
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,142 @@
{
"button": {
"backgroundPrimaryDefault": { "value": "{colors.b500}" },
"backgroundPrimaryHover": { "value": "{colors.b600}" },
"backgroundPrimaryPress": { "value": "{colors.b700}" },
"backgroundPrimaryFocus": { "value": "{colors.b500}" },
"backgroundPrimaryKeyfocus": { "value": "{colors.b500}" },
"backgroundPrimaryDisabled": { "value": "{colors.b200}" },
"fontOnPrimary": { "value": "{colors.white}" },
"fontOnPrimaryDisabled": { "value": "{colors.white}" },
"light": {
"backgroundPrimaryDefault": { "value": "{colors.b500}" },
"backgroundPrimaryHover": { "value": "{colors.b600}" },
"backgroundPrimaryPress": { "value": "{colors.b700}" },
"backgroundPrimaryFocus": { "value": "{colors.b500}" },
"backgroundPrimaryKeyfocus": { "value": "{colors.b500}" },
"backgroundPrimaryDisabled": { "value": "{colors.b200}" },
"fontOnPrimary": { "value": "{colors.white}" },
"fontOnPrimaryDisabled": { "value": "{colors.white}" },

"backgroundSecondaryDefault": { "value": "{colors.n400}" },
"backgroundSecondaryHover": { "value": "{colors.n500}" },
"backgroundSecondaryPress": { "value": "{colors.n600}" },
"backgroundSecondaryFocus": { "value": "{colors.n400}" },
"backgroundSecondaryKeyfocus": { "value": "{colors.n400}" },
"backgroundSecondaryDisabled": { "value": "{colors.n300}" },
"fontOnSecondary": { "value": "{colors.n900}" },
"fontOnSecondaryDisabled": { "value": "{colors.n500}" },
"backgroundSecondaryDefault": { "value": "{colors.n400}" },
"backgroundSecondaryHover": { "value": "{colors.n500}" },
"backgroundSecondaryPress": { "value": "{colors.n600}" },
"backgroundSecondaryFocus": { "value": "{colors.n400}" },
"backgroundSecondaryKeyfocus": { "value": "{colors.n400}" },
"backgroundSecondaryDisabled": { "value": "{colors.n300}" },
"fontOnSecondary": { "value": "{colors.n900}" },
"fontOnSecondaryDisabled": { "value": "{colors.n500}" },

"backgroundSecondaryDangerDefault": { "value": "{colors.n400}" },
"backgroundSecondaryDangerHover": { "value": "{colors.n500}" },
"backgroundSecondaryDangerPress": { "value": "{colors.n600}" },
"backgroundSecondaryDangerFocus": { "value": "{colors.n400}" },
"backgroundSecondaryDangerKeyfocus": { "value": "{colors.n400}" },
"backgroundSecondaryDangerDisabled": { "value": "{colors.n300}" },
"fontOnSecondaryDanger": { "value": "{colors.r700}" },
"onSecondaryDangerDisabled": { "value": "{colors.r300}" },
"backgroundSecondaryDangerDefault": { "value": "{colors.n400}" },
"backgroundSecondaryDangerHover": { "value": "{colors.n500}" },
"backgroundSecondaryDangerPress": { "value": "{colors.n600}" },
"backgroundSecondaryDangerFocus": { "value": "{colors.n400}" },
"backgroundSecondaryDangerKeyfocus": { "value": "{colors.n400}" },
"backgroundSecondaryDangerDisabled": { "value": "{colors.n300}" },
"fontOnSecondaryDanger": { "value": "{colors.r700}" },
"onSecondaryDangerDisabled": { "value": "{colors.r300}" },

"backgroundDangerDefault": { "value": "{colors.r500}" },
"backgroundDangerHover": { "value": "{colors.r600}" },
"backgroundDangerPress": { "value": "{colors.r700}" },
"backgroundDangerFocus": { "value": "{colors.r500}" },
"backgroundDangerKeyfocus": { "value": "{colors.r500}" },
"backgroundDangerDisabled": { "value": "{colors.r200}" },
"fontOnDanger": { "value": "{colors.white}" },
"fontOnDangerDisabled": { "value": "{colors.white}" },
"backgroundDangerDefault": { "value": "{colors.r500}" },
"backgroundDangerHover": { "value": "{colors.r600}" },
"backgroundDangerPress": { "value": "{colors.r700}" },
"backgroundDangerFocus": { "value": "{colors.r500}" },
"backgroundDangerKeyfocus": { "value": "{colors.r500}" },
"backgroundDangerDisabled": { "value": "{colors.r200}" },
"fontOnDanger": { "value": "{colors.white}" },
"fontOnDangerDisabled": { "value": "{colors.white}" },

"backgroundWarningDefault": { "value": "{colors.y400}" },
"backgroundWarningHover": { "value": "{colors.y500}" },
"backgroundWarningPress": { "value": "{colors.y600}" },
"backgroundWarningFocus": { "value": "{colors.y400}" },
"backgroundWarningKeyfocus": { "value": "{colors.y400}" },
"backgroundWarningDisabled": { "value": "{colors.y200}" },
"fontOnWarning": { "value": "{colors.n900}" },
"fontOnWarningDisabled": { "value": "{colors.n600}" },
"backgroundSuccessDefault": { "value": "{colors.g500}" },
"backgroundSuccessHover": { "value": "{colors.g600}" },
"backgroundSuccessPress": { "value": "{colors.g700}" },
"backgroundSuccessFocus": { "value": "{colors.g500}" },
"backgroundSuccessKeyfocus": { "value": "{colors.g500}" },
"backgroundSuccessDisabled": { "value": "{colors.g200}" },
"fontOnSuccess": { "value": "{colors.n900}" },
"fontOnSuccessDisabled": { "value": "{colors.white}" }
},
"high-contrast": {
"backgroundPrimaryDefault": { "value": "{colors.b700}" },
"backgroundPrimaryHover": { "value": "{colors.b800}" },
"backgroundPrimaryPress": { "value": "{colors.b900}" },
"backgroundPrimaryFocus": { "value": "{colors.b700}" },
"backgroundPrimaryKeyfocus": { "value": "{colors.b700}" },
"backgroundPrimaryDisabled": { "value": "{colors.b200}" },
"fontOnPrimary": { "value": "{colors.white}" },
"fontOnPrimaryDisabled": { "value": "{colors.white}" },

"backgroundSecondaryWarningDefault": { "value": "{colors.n400}" },
"backgroundSecondaryWarningHover": { "value": "{colors.n500}" },
"backgroundSecondaryWarningPress": { "value": "{colors.n600}" },
"backgroundSecondaryWarningFocus": { "value": "{colors.n400}" },
"backgroundSecondaryWarningKeyfocus": { "value": "{colors.n400}" },
"backgroundSecondaryWarningDisabled": { "value": "{colors.n300}" },
"fontOnSecondaryWarning": { "value": "{colors.y900}" },
"fontOnSecondaryWarningDisabled": { "value": "{colors.y600}" },
"backgroundSecondaryDefault": { "value": "{colors.n400}" },
"backgroundSecondaryHover": { "value": "{colors.n500}" },
"backgroundSecondaryPress": { "value": "{colors.n600}" },
"backgroundSecondaryFocus": { "value": "{colors.n400}" },
"backgroundSecondaryKeyfocus": { "value": "{colors.n400}" },
"backgroundSecondaryDisabled": { "value": "{colors.n300}" },
"fontOnSecondary": { "value": "{colors.n900}" },
"fontOnSecondaryDisabled": { "value": "{colors.n500}" },

"backgroundSuccessDefault": { "value": "{colors.g500}" },
"backgroundSuccessHover": { "value": "{colors.g600}" },
"backgroundSuccessPress": { "value": "{colors.g700}" },
"backgroundSuccessFocus": { "value": "{colors.g500}" },
"backgroundSuccessKeyfocus": { "value": "{colors.g500}" },
"backgroundSuccessDisabled": { "value": "{colors.g200}" },
"fontOnSuccess": { "value": "{colors.n900}" },
"fontOnSuccessDisabled": { "value": "{colors.white}" },
"backgroundSecondaryDangerDefault": { "value": "{colors.n400}" },
"backgroundSecondaryDangerHover": { "value": "{colors.n500}" },
"backgroundSecondaryDangerPress": { "value": "{colors.n600}" },
"backgroundSecondaryDangerFocus": { "value": "{colors.n400}" },
"backgroundSecondaryDangerKeyfocus": { "value": "{colors.n400}" },
"backgroundSecondaryDangerDisabled": { "value": "{colors.n300}" },
"fontOnSecondaryDanger": { "value": "{colors.r900}" },
"onSecondaryDangerDisabled": { "value": "{colors.r300}" },

"backgroundSecondarySuccessDefault": { "value": "{colors.n400}" },
"backgroundSecondarySuccessHover": { "value": "{colors.n500}" },
"backgroundSecondarySuccessPress": { "value": "{colors.n600}" },
"backgroundSecondarySuccessFocus": { "value": "{colors.n400}" },
"backgroundSecondarySuccessKeyfocus": { "value": "{colors.n400}" },
"backgroundSecondarySuccessDisabled": { "value": "{colors.n300}" },
"fontOnSecondarySuccess": { "value": "{colors.g900}" },
"fontOnSecondarySuccessDisabled": { "value": "{colors.g400}" },
"backgroundDangerDefault": { "value": "{colors.r800}" },
"backgroundDangerHover": { "value": "{colors.r900}" },
"backgroundDangerPress": { "value": "{colors.r900}" },
"backgroundDangerFocus": { "value": "{colors.r800}" },
"backgroundDangerKeyfocus": { "value": "{colors.r800}" },
"backgroundDangerDisabled": { "value": "{colors.r200}" },
"fontOnDanger": { "value": "{colors.white}" },
"fontOnDangerDisabled": { "value": "{colors.white}" },

"onDisabled": { "value": "{colors.n600}" }
"backgroundSuccessDefault": { "value": "{colors.g500}" },
"backgroundSuccessHover": { "value": "{colors.g600}" },
"backgroundSuccessPress": { "value": "{colors.g700}" },
"backgroundSuccessFocus": { "value": "{colors.g500}" },
"backgroundSuccessKeyfocus": { "value": "{colors.g500}" },
"backgroundSuccessDisabled": { "value": "{colors.g200}" },
"fontOnSuccess": { "value": "{colors.n900}" },
"fontOnSuccessDisabled": { "value": "{colors.white}" }
},
"dark": {
"backgroundPrimaryDefault": { "value": "#095AD2" },
"backgroundPrimaryHover": { "value": "#10529E" },
"backgroundPrimaryPress": { "value": "#01336B" },
"backgroundPrimaryFocus": { "value": "#095AD2" },
"backgroundPrimaryKeyfocus": { "value": "#095AD2" },
"backgroundPrimaryDisabled": { "value": "#012247" },
"fontOnPrimary": { "value": "#FFFFFF" },
"fontOnPrimaryDisabled": { "value": "#6C727A" },

"backgroundSecondaryDefault": { "value": "#353B45" },
"backgroundSecondaryHover": { "value": "#404754" },
"backgroundSecondaryPress": { "value": "#4C5362" },
"backgroundSecondaryFocus": { "value": "#353B45" },
"backgroundSecondaryKeyfocus": { "value": "#353B45" },
"backgroundSecondaryDisabled": { "value": "#353B45" },
"fontOnSecondary": { "value": "#E4E7EA" },
"fontOnSecondaryDisabled": { "value": "#6C727A" },

"backgroundSecondaryDangerDefault": { "value": "#353B45" },
"backgroundSecondaryDangerHover": { "value": "#404754" },
"backgroundSecondaryDangerPress": { "value": "#4C5362" },
"backgroundSecondaryDangerFocus": { "value": "#353B45" },
"backgroundSecondaryDangerKeyfocus": { "value": "#353B45" },
"backgroundSecondaryDangerDisabled": { "value": "#353B45" },
"fontOnSecondaryDanger": { "value": "#FFC1C9" },
"onSecondaryDangerDisabled": { "value": "#6B0513" },

"backgroundDangerDefault": { "value": "#BB3E4E" },
"backgroundDangerHover": { "value": "#95323F" },
"backgroundDangerPress": { "value": "#822C37" },
"backgroundDangerFocus": { "value": "#BB3E4E" },
"backgroundDangerKeyfocus": { "value": "#BB3E4E" },
"backgroundDangerDisabled": { "value": "#3D2126" },
"fontOnDanger": { "value": "#FFFFFF" },
"fontOnDangerDisabled": { "value": "#757575" },

"backgroundSuccessDefault": { "value": "#1D7256" },
"backgroundSuccessHover": { "value": "#175943" },
"backgroundSuccessPress": { "value": "#134937" },
"backgroundSuccessFocus": { "value": "#1D7256" },
"backgroundSuccessKeyfocus": { "value": "#1D7256" },
"backgroundSuccessDisabled": { "value": "#1E4B40" },
"fontOnSuccess": { "value": "#FFFFFF" },
"fontOnSuccessDisabled": { "value": "#757575" }
}
}
}
50 changes: 39 additions & 11 deletions packages/fuselage-tokens/src/font/base.json
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,43 @@
{
"font": {
"white": { "value": "{colors.white}" },
"disabled": { "value": "{colors.n500}" },
"annotation": { "value": "{colors.n600}" },
"hint": { "value": "{colors.n700}" },
"secondaryInfo": { "value": "{colors.n700}" },
"default": { "value": "{colors.n800}" },
"titlesLabels": { "value": "{colors.n900}" },
"info": { "value": "{colors.b600}" },
"danger": { "value": "{colors.r600}" },
"pure-white": { "value": "{colors.white}" },
"pure-black": { "value": "{colors.n800}" }
"light": {
"white": { "value": "{colors.white}" },
"disabled": { "value": "{colors.n500}" },
"annotation": { "value": "{colors.n600}" },
"hint": { "value": "{colors.n700}" },
"secondaryInfo": { "value": "{colors.n700}" },
"default": { "value": "{colors.n800}" },
"titlesLabels": { "value": "{colors.n900}" },
"info": { "value": "{colors.b600}" },
"danger": { "value": "{colors.r600}" },
"pureWhite": { "value": "{colors.white}" },
"pureBlack": { "value": "{colors.n800}" }
},
"high-contrast": {
"white": { "value": "{colors.white}" },
"disabled": { "value": "{colors.n500}" },
"annotation": { "value": "{colors.n900}" },
"hint": { "value": "{colors.n900}" },
"secondaryInfo": { "value": "{colors.n900}" },
"default": { "value": "{colors.n900}" },
"titlesLabels": { "value": "{colors.n900}" },
"info": { "value": "{colors.b800}" },
"danger": { "value": "{colors.r800}" },
"pureWhite": { "value": "{colors.white}" },
"pureBlack": { "value": "{colors.n900}" }
},
"dark": {
"white": { "value": "#2F343D" },
"disabled": { "value": "#60646C" },
"annotation": { "value": "#9EA2A8" },
"hint": { "value": "#9EA2A8" },
"secondaryInfo": { "value": "#9EA2A8" },
"default": { "value": "#C1C7D0" },
"titlesLabels": { "value": "#F2F3F5" },
"info": { "value": "#739EDE" },
"danger": { "value": "#D88892" },
"pureWhite": { "value": "{colors.white}" },
"pureBlack": { "value": "{colors.n900}" }
}
}
}
28 changes: 28 additions & 0 deletions packages/fuselage-tokens/src/shadow/base.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
{
"shadow": {
"light": {
"highlight": { "value": "{colors.b200}" },
"danger": { "value": "{colors.r100}" },
"elevation-border": { "value": "{colors.n250}" },
"elevation-1": { "value": "rgba(47, 52, 61, 0.1)" },
"elevation-2x": { "value": "rgba(47, 52, 61, 0.08)" },
"elevation-2y": { "value": "rgba(47, 52, 61, 0.12)" }
},
"high-contrast": {
"highlight": { "value": "{colors.b200}" },
"danger": { "value": "{colors.r100}" },
"elevation-border": { "value": "{colors.n250}" },
"elevation-1": { "value": "rgba(47, 52, 61, 0.1)" },
"elevation-2x": { "value": "rgba(47, 52, 61, 0.08)" },
"elevation-2y": { "value": "rgba(47, 52, 61, 0.12)" }
},
"dark": {
"highlight": { "value": "{colors.b200}" },
"danger": { "value": "{colors.r100}" },
"elevation-border": { "value": "#2F343D" },
"elevation-1": { "value": "rgba(9, 9, 9, 0.35)" },
"elevation-2x": { "value": "rgba(9, 9, 9, 0.3)" },
"elevation-2y": { "value": "rgba(9, 9, 9, 0.45)" }
}
}
}
Loading

0 comments on commit a40d471

Please sign in to comment.