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

🚀 feat: create new theme #723

Merged
merged 15 commits into from
Jan 26, 2024
Merged

🚀 feat: create new theme #723

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
e6f3cf7
feat: create new tokens
tcK1 Jan 16, 2024
00ff94b
refactor: convert themeGenerator
tcK1 Jan 16, 2024
a6f2398
feat: add font resources
tcK1 Jan 16, 2024
566f23a
doc: add new font to docs
tcK1 Jan 17, 2024
db6ae26
feat: create new fw tokens
tcK1 Jan 19, 2024
de2f0ff
feat: create yoga3 theme
tcK1 Jan 19, 2024
bc5515c
refactor: remove unecessary log
tcK1 Jan 19, 2024
3c9dd91
fix: update fontloader logic
tcK1 Jan 19, 2024
ea3259d
doc: add config
tcK1 Jan 19, 2024
ba50375
style: codacy
tcK1 Jan 19, 2024
bb9c924
doc: add fonts to labnative
tcK1 Jan 22, 2024
da35ab7
refactor: change fonts typing
tcK1 Jan 22, 2024
3410c4c
refactor: use correct import
tcK1 Jan 22, 2024
5ff1ec8
refactor: update typing
tcK1 Jan 22, 2024
7d0f68f
refactor: use `Object.assign`
tcK1 Jan 26, 2024
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
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ module.exports = {
{ blankLine: 'always', prev: 'directive', next: '*' },
{ blankLine: 'any', prev: 'directive', next: 'directive' },
],
'import/no-named-as-default': 0,
},
globals: {
window: true,
Expand Down
5 changes: 4 additions & 1 deletion packages/doc/gatsby-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,10 @@ const plugins = [
resolve: `gatsby-plugin-web-font-loader`,
options: {
google: {
families: ['Rubik:300,400,500,700,900,300i,400i,500i,700i,900i'],
families: [
'Rubik:300,400,500,700,900,300i,400i,500i,700i,900i',
'Inter:300,400,500,700,800,900,300i,400i,500i,700i,800i,900i',
],
},
},
},
Expand Down
3 changes: 2 additions & 1 deletion packages/doc/src/components/CodeBlock/ReactLive/ReactLive.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,11 @@ const Component = styled.div`
theme: {
yoga: {
colors: { white, text, primary },
baseFont,
},
},
}) => `
font-family: 'Rubik';
font-family: ${baseFont.family};
padding: 50px;
background-color: ${darkMode ? text.primary : white};
transition: all 0.3s ease-in-out;
Expand Down
Binary file added packages/labnative/android/app/src/main/assets/fonts/Inter-300.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/labnative/android/app/src/main/assets/fonts/Inter-500.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/labnative/android/app/src/main/assets/fonts/Inter-700.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/labnative/android/app/src/main/assets/fonts/Inter-800.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/labnative/android/app/src/main/assets/fonts/Inter-900.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/labnative/android/app/src/main/assets/fonts/Inter.ttf
View file
Open in desktop
Binary file not shown.
69 changes: 69 additions & 0 deletions packages/labnative/android/link-assets-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
{
"migIndex": 1,
"data": [
{
"path": "../yoga/src/Fonts/Inter-300.ttf",
"sha1": "cbb2506d8da21edbb2dc8cfa26e3b42a97d138f8"
},
{
"path": "../yoga/src/Fonts/Inter-500.ttf",
"sha1": "e76f580811e031813e7150131a0724811cdd737a"
},
{
"path": "../yoga/src/Fonts/Inter-700.ttf",
"sha1": "47ff07c75746682133b81e7ac0537ce50a4c9916"
},
{
"path": "../yoga/src/Fonts/Inter-800.ttf",
"sha1": "c9b3d2f2449ab2c67ff075f806973fa3d7e104b3"
},
{
"path": "../yoga/src/Fonts/Inter-900.ttf",
"sha1": "f79fa58ace5f55e338c99bf71e7e0702841df6f2"
},
{
"path": "../yoga/src/Fonts/Inter.ttf",
"sha1": "cfa780d0b50b2bb7eacb82984f1b18a95aaa40c5"
},
{
"path": "../yoga/src/Fonts/Rubik-300-italic.ttf",
"sha1": "7e6c1d6a4347713349c49846bb066aaddc825cec"
},
{
"path": "../yoga/src/Fonts/Rubik-300.ttf",
"sha1": "ab626c8a0e663e9daf5b5064783e06ebfef9c80b"
},
{
"path": "../yoga/src/Fonts/Rubik-500-italic.ttf",
"sha1": "61761978e3bfdd077f9799d2e491306ec205c869"
},
{
"path": "../yoga/src/Fonts/Rubik-500.ttf",
"sha1": "1c7160fa20ccc42db9a1fc9245cd8f9367a428ea"
},
{
"path": "../yoga/src/Fonts/Rubik-700-italic.ttf",
"sha1": "60119c0b523c3b0712e956fa53b99adce01a3c91"
},
{
"path": "../yoga/src/Fonts/Rubik-700.ttf",
"sha1": "37d3e9933d7ea3cd1ea9048a929a9392c506538f"
},
{
"path": "../yoga/src/Fonts/Rubik-900-italic.ttf",
"sha1": "313caf026d4cc607a0874e97c2c836ab7c296aba"
},
{
"path": "../yoga/src/Fonts/Rubik-900.ttf",
"sha1": "ac5408131f3693795f4e9049e78f1d18f1ed19fb"
},
{
"path": "../yoga/src/Fonts/Rubik-italic.ttf",
"sha1": "2c0bc181562295cba66d1e23da977237324ca5fc"
},
{
"path": "../yoga/src/Fonts/Rubik.ttf",
"sha1": "688c0cbc43d63c4f63cb997018fe889915a9dc7b"
}
]
}
24 changes: 24 additions & 0 deletions packages/labnative/ios/labnative.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@
9E6F0E36A9004A42B8D6A267 /* Rubik-300-italic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E6CA68BCC2D64A3EA119626B /* Rubik-300-italic.ttf */; };
BD0D3E5A2407B2895E1F8661 /* libPods-labnative-labnativeTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 6AA843BE336E44886F15181E /* libPods-labnative-labnativeTests.a */; };
E7BF20989ECD4FB5BF3AF1DD /* Rubik.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 33F58296D36345399CBC36B3 /* Rubik.ttf */; };
2994EDDF64974357A27EAAC3 /* Inter-300.ttf in Resources */ = {isa = PBXBuildFile; fileRef = FEAAFA6597B941818987D1C6 /* Inter-300.ttf */; };
FF3E4C0FA85048EFA8EA16A6 /* Inter-500.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 20E6F91CA99041E688FE02A2 /* Inter-500.ttf */; };
AA20D33B2EC244D7BB333672 /* Inter-700.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2B29CEF0279549EE9C8C60C2 /* Inter-700.ttf */; };
7F730649CB494993969CCFCE /* Inter-800.ttf in Resources */ = {isa = PBXBuildFile; fileRef = C6C91200DE044F5695E3C07B /* Inter-800.ttf */; };
D66B574DAD2D485D9BB12FA5 /* Inter-900.ttf in Resources */ = {isa = PBXBuildFile; fileRef = E96AA66128D242B09DD38E14 /* Inter-900.ttf */; };
748931469D5D48638537FBF5 /* Inter.ttf in Resources */ = {isa = PBXBuildFile; fileRef = DEDB45AC00BA45BB9AF5B167 /* Inter.ttf */; };
/* End PBXBuildFile section */

/* Begin PBXContainerItemProxy section */
Expand Down Expand Up @@ -68,6 +74,12 @@
EB741C2FCFAC5D1D17A9D9C4 /* Pods-labnative-labnativeTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-labnative-labnativeTests.debug.xcconfig"; path = "Target Support Files/Pods-labnative-labnativeTests/Pods-labnative-labnativeTests.debug.xcconfig"; sourceTree = "<group>"; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
FEA77756AD892BAB079640ED /* Pods-labnativeTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-labnativeTests.debug.xcconfig"; path = "Target Support Files/Pods-labnativeTests/Pods-labnativeTests.debug.xcconfig"; sourceTree = "<group>"; };
FEAAFA6597B941818987D1C6 /* Inter-300.ttf */ = {isa = PBXFileReference; name = "Inter-300.ttf"; path = "../../yoga/src/Fonts/Inter-300.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
20E6F91CA99041E688FE02A2 /* Inter-500.ttf */ = {isa = PBXFileReference; name = "Inter-500.ttf"; path = "../../yoga/src/Fonts/Inter-500.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
2B29CEF0279549EE9C8C60C2 /* Inter-700.ttf */ = {isa = PBXFileReference; name = "Inter-700.ttf"; path = "../../yoga/src/Fonts/Inter-700.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
C6C91200DE044F5695E3C07B /* Inter-800.ttf */ = {isa = PBXFileReference; name = "Inter-800.ttf"; path = "../../yoga/src/Fonts/Inter-800.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
E96AA66128D242B09DD38E14 /* Inter-900.ttf */ = {isa = PBXFileReference; name = "Inter-900.ttf"; path = "../../yoga/src/Fonts/Inter-900.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
DEDB45AC00BA45BB9AF5B167 /* Inter.ttf */ = {isa = PBXFileReference; name = "Inter.ttf"; path = "../../yoga/src/Fonts/Inter.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
/* End PBXFileReference section */

/* Begin PBXFrameworksBuildPhase section */
Expand Down Expand Up @@ -145,6 +157,12 @@
53B7F739796943F5AD63E19F /* Rubik-900.ttf */,
C41A3A5FEDC7439BA430B6D7 /* Rubik-italic.ttf */,
33F58296D36345399CBC36B3 /* Rubik.ttf */,
FEAAFA6597B941818987D1C6 /* Inter-300.ttf */,
20E6F91CA99041E688FE02A2 /* Inter-500.ttf */,
2B29CEF0279549EE9C8C60C2 /* Inter-700.ttf */,
C6C91200DE044F5695E3C07B /* Inter-800.ttf */,
E96AA66128D242B09DD38E14 /* Inter-900.ttf */,
DEDB45AC00BA45BB9AF5B167 /* Inter.ttf */,
);
name = Resources;
sourceTree = "<group>";
Expand Down Expand Up @@ -302,6 +320,12 @@
1251CB04BB5F4A67A17BB04E /* Rubik-900.ttf in Resources */,
9C3432F47B0348A8B355EFD9 /* Rubik-italic.ttf in Resources */,
E7BF20989ECD4FB5BF3AF1DD /* Rubik.ttf in Resources */,
2994EDDF64974357A27EAAC3 /* Inter-300.ttf in Resources */,
FF3E4C0FA85048EFA8EA16A6 /* Inter-500.ttf in Resources */,
AA20D33B2EC244D7BB333672 /* Inter-700.ttf in Resources */,
7F730649CB494993969CCFCE /* Inter-800.ttf in Resources */,
D66B574DAD2D485D9BB12FA5 /* Inter-900.ttf in Resources */,
748931469D5D48638537FBF5 /* Inter.ttf in Resources */,
);
runOnlyForDeploymentPostprocessing = 0;
};
Expand Down
14 changes: 10 additions & 4 deletions packages/labnative/ios/labnative/Info.plist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,12 @@
<string>$(PRODUCT_NAME)</string>
<key>CFBundlePackageType</key>
<string>APPL</string>
<key>CFBundleShortVersionString</key>
<string>$(MARKETING_VERSION)</string>
<key>CFBundleShortVersionString</key>
<string>$(MARKETING_VERSION)</string>
<key>CFBundleSignature</key>
<string>????</string>
<key>CFBundleVersion</key>
<string>$(CURRENT_PROJECT_VERSION)</string>
<key>CFBundleVersion</key>
<string>$(CURRENT_PROJECT_VERSION)</string>
<key>LSRequiresIPhoneOS</key>
<true/>
<key>NSAppTransportSecurity</key>
Expand Down Expand Up @@ -65,6 +65,12 @@
<string>Rubik-900.ttf</string>
<string>Rubik-italic.ttf</string>
<string>Rubik.ttf</string>
<string>Inter-300.ttf</string>
<string>Inter-500.ttf</string>
<string>Inter-700.ttf</string>
<string>Inter-800.ttf</string>
<string>Inter-900.ttf</string>
<string>Inter.ttf</string>
</array>
</dict>
</plist>
69 changes: 69 additions & 0 deletions packages/labnative/ios/link-assets-manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
{
"migIndex": 1,
"data": [
{
"path": "../yoga/src/Fonts/Inter-300.ttf",
"sha1": "cbb2506d8da21edbb2dc8cfa26e3b42a97d138f8"
},
{
"path": "../yoga/src/Fonts/Inter-500.ttf",
"sha1": "e76f580811e031813e7150131a0724811cdd737a"
},
{
"path": "../yoga/src/Fonts/Inter-700.ttf",
"sha1": "47ff07c75746682133b81e7ac0537ce50a4c9916"
},
{
"path": "../yoga/src/Fonts/Inter-800.ttf",
"sha1": "c9b3d2f2449ab2c67ff075f806973fa3d7e104b3"
},
{
"path": "../yoga/src/Fonts/Inter-900.ttf",
"sha1": "f79fa58ace5f55e338c99bf71e7e0702841df6f2"
},
{
"path": "../yoga/src/Fonts/Inter.ttf",
"sha1": "cfa780d0b50b2bb7eacb82984f1b18a95aaa40c5"
},
{
"path": "../yoga/src/Fonts/Rubik-300-italic.ttf",
"sha1": "7e6c1d6a4347713349c49846bb066aaddc825cec"
},
{
"path": "../yoga/src/Fonts/Rubik-300.ttf",
"sha1": "ab626c8a0e663e9daf5b5064783e06ebfef9c80b"
},
{
"path": "../yoga/src/Fonts/Rubik-500-italic.ttf",
"sha1": "61761978e3bfdd077f9799d2e491306ec205c869"
},
{
"path": "../yoga/src/Fonts/Rubik-500.ttf",
"sha1": "1c7160fa20ccc42db9a1fc9245cd8f9367a428ea"
},
{
"path": "../yoga/src/Fonts/Rubik-700-italic.ttf",
"sha1": "60119c0b523c3b0712e956fa53b99adce01a3c91"
},
{
"path": "../yoga/src/Fonts/Rubik-700.ttf",
"sha1": "37d3e9933d7ea3cd1ea9048a929a9392c506538f"
},
{
"path": "../yoga/src/Fonts/Rubik-900-italic.ttf",
"sha1": "313caf026d4cc607a0874e97c2c836ab7c296aba"
},
{
"path": "../yoga/src/Fonts/Rubik-900.ttf",
"sha1": "ac5408131f3693795f4e9049e78f1d18f1ed19fb"
},
{
"path": "../yoga/src/Fonts/Rubik-italic.ttf",
"sha1": "2c0bc181562295cba66d1e23da977237324ca5fc"
},
{
"path": "../yoga/src/Fonts/Rubik.ttf",
"sha1": "688c0cbc43d63c4f63cb997018fe889915a9dc7b"
}
]
}
32 changes: 32 additions & 0 deletions packages/tokens/src/global/colors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,46 @@

const vibin = '#D8385E';
const hope = '#1D856C';
const hopeNew = '#0C8046';
const energy = '#FFC24C';
const relax = '#5340C9';
const relaxNew = '#A880FF';
const neon = '#DCFF79';
const sand = '#FBF8EC';

// Brand colors ↓

const peace = '#FFB0A7';
const peaceNew = '#FFEBF1';
const verve = '#CA4808';
const brandingVerve = '#FF874C';
const uplift = '#FF4438';
const upliftNew = '#D8385E';
const deepPurple = '#710252';
const deepPurpleNew = '#590931';
const yoga = '#FFEEF2';

// Feedback ↓

const success = '#C1EEDB';
const successNew = '#E3EFC3';
const neutral = '#E0DFFF';
const neutralNew = '#EAE0FF';
const attention = '#FCD6C3';

// Gray scale ↓

const stamina = '#231B22';
const staminaNew = '#1D1D1F';
const deep = '#6B6B78';
const deepNew = '#57544D';
const medium = '#9898A6';
const mediumNew = '#A6A298';
const light = '#D7D7E0';
const lightNew = '#E1DED7';
const lightest = '#EFEDE7';
const clear = '#F5F5FA';
const clearNew = '#FAF9F5';
const white = '#FFFFFF';

const colors = {
Expand All @@ -49,6 +64,23 @@ const colors = {
light,
clear,
white,

// New Colors
hopeNew,
relaxNew,
neon,
sand,
peaceNew,
upliftNew,
deepPurpleNew,
successNew,
neutralNew,
staminaNew,
deepNew,
mediumNew,
lightNew,
lightest,
clearNew,
Comment on lines +69 to +83
Copy link
Contributor

Choose a reason for hiding this comment

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

potential issue: isn't this going to require changes in all the components that use the colours directly?

  • They'd have to know whether to pick the new and the old. A few components already do it via a variant prop IIRC.
  • When we inevitably remove the old one, won't we need to remove the new suffix, creating another potential breaking change?

(there's another discussion here... should the components read the colours directly?)

Copy link
Member Author

Choose a reason for hiding this comment

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

We are solving this with the theme: https://github.com/gympass/yoga/pull/723/files#diff-7c44dab781eac6c7c111934646f7760210c5556222abaace43c08a350788f217R7-R18

Components access the values from the theme and not the tokens directly (although they are the same in this case). As you said, using the tokens directly is probably another discussion and I agree we shouldn't be doing this, but having it inside the theme helped us keep everything using the expected colors 😄.

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 was thinking of just having it done on the theme itself but not exposing it via the tokens. Do you think it's worth it to "hide" these new tokens on packages/yoga/src/Theme/theme/theme.js#theme function?

Copy link
Member Author

Choose a reason for hiding this comment

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

Maybe in the future, as it will be a breaking change.

Copy link
Contributor

Choose a reason for hiding this comment

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

I meant only the new suffixed ones 😅

} as const;

export default colors;
5 changes: 4 additions & 1 deletion packages/tokens/src/global/font-weights.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,12 @@ export const weights = {
medium: 500,
bold: 700,
black: 900,
regularNew: 500,
mediumNew: 700,
boldNew: 800,
} as const;

const fontWeights = {...weights, ...Object.values(weights)};
const fontWeights = { ...weights, ...Object.values(weights) };

export type FontWeights = Partial<typeof fontWeights>;

Expand Down
23 changes: 12 additions & 11 deletions packages/tokens/src/global/fonts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,21 @@
import { weights } from './font-weights';

export interface Font {
family: string;
weight: (number | string)[];
}

export interface Fonts {
rubik?: Font;
}

const fontWeights = Object.values(weights);
const weight = [...fontWeights, ...fontWeights.map(value => `${value}i`)];

const fonts: Fonts = {
type Font = {
family: string;
weight: typeof weight;
};

const fonts: Record<string, Font> = {
rubik: {
family: 'Rubik',
weight: [...fontWeights, ...fontWeights.map(value => `${value}i`)],
weight,
},
inter: {
family: 'Inter',
weight,
},
};

Expand Down
Binary file added packages/yoga/src/Fonts/Inter-300.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/yoga/src/Fonts/Inter-500.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/yoga/src/Fonts/Inter-700.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/yoga/src/Fonts/Inter-800.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/yoga/src/Fonts/Inter-900.ttf
View file
Open in desktop
Binary file not shown.
Binary file added packages/yoga/src/Fonts/Inter.ttf
View file
Open in desktop
Binary file not shown.
Loading
Loading