-
Notifications
You must be signed in to change notification settings - Fork 35
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.
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
Update Design Tokens, Add CSS Variables Tests, and Introduce Custom CSS Variables for @charcoal-ui/react
#604
base: v4.0.0
Are you sure you want to change the base?
Conversation
e868021
to
3a1cc80
Compare
Visit the preview URL for this PR (updated for commit d41b3b7): https://pixiv-charcoal-web--pr604-naporitan-replace-to-f16s63p3.web.app (expires Wed, 09 Oct 2024 09:01:01 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 314b26d3adca98a761c7e4d9922ebb206ff024a0 |
Size Change: +234 B (0%) Total Size: 26 MB
ℹ️ View Unchanged
|
…an/replace-token1
@@ -1,39 +1,40 @@ | |||
.charcoal-text-area-root { | |||
--charcoal-text-area-rows: ; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
これは何かの理由でこうなっているんですか?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
完全なる手癖で内部で定義される variables を root で定義したいっていう挙動をしてました
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
意味ないので消します
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
思い出しました。新トークンに移行するにあたり作った test file の関係で variables を事前定義したかったからでした。
packages/theme/package.json
Outdated
"./dark.css": { | ||
"require": "./dist/css/_variables_dark.css", | ||
"import": "./dist/css/_variables_dark.css" | ||
}, | ||
"./light.css": { | ||
"require": "./dist/css/_variables_light.css", | ||
"import": "./dist/css/_variables_light.css" | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMO: renamingしないほうが使いやすそうな気がします
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
d41b3b7 rename しないようにしました
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
あ~ test の部分この可能性を全く考慮されてないので条件付け加えます.....
while ((match = usedVariablePattern.exec(cssContent)) !== null) { | ||
matches.push(match[1]) | ||
} | ||
return matches |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cssContent.matchAll
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
7ef7236 こっちでやりました
@@ -1,3 +1,5 @@ | |||
import './index.css' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
これだとlayeredと切り替えないので、token含めてユーザー側でimportしたほうが良さそうな気がします
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
build 後だと index.css に分離されるのでユーザー側 import にります!
for (const file of variableFiles) { | ||
const content = await readFile(file, 'utf-8') | ||
const variables = extractVariables(content) | ||
for (const variable of variables) { | ||
variablesSet.add(variable) | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const files = import.meta.glob("../../theme/src/css/*.css`, {
import: "default",
eager: true,
as: "raw"
});
/**
* stdout | packages/react/src/css-variables.test.tsx
* {
* '../../theme/src/css/_variables_dark.css': '',
* '../../theme/src/css/_variables_light.css': ''
* }
* */
無が得られる(調査あんまりしてない)ので何か知っていたら教えてほしいです...:pray:
別件、_variables_light.cssの |
やったこと
@charcoal-ui/react
.動作確認環境
チェックリスト
不要なチェック項目は消して構いません