Support for complete token refurbishment #144
Conversation
| @@ -12,53 +12,11 @@ | |||
| line-height: var(--text-leading); | |||
| color: var(--text-color); | |||
| overflow-wrap: anywhere; | |||
| background-color: var(--background-color); | |||
There was a problem hiding this comment.
I changed from specifying variations by class to CSS Variables
In the future, if the number of variations increases or decreases, the number of changes will be reduced.
| @@ -32,7 +32,7 @@ | |||
| } | |||
|
|
|||
| .button:focus-visible { | |||
| outline: solid var(--color-accent) 2px; | |||
| outline: solid var(--focus-ring, var(--color-border-blue-darken)) 2px; | |||
There was a problem hiding this comment.
In the focus-ring, pink is only used when the component color is blue. While blue is the basic color, it is used exceptionally as another color.
| background-color: var(--color-primary); | ||
| } | ||
| border: 0; | ||
| border-top: var(--border-width) solid var(--border-color); |
There was a problem hiding this comment.
Change from class to CSS Variables
| @@ -55,7 +55,7 @@ type Props = { | |||
| * 子要素の間隔。指定しない場合は0 | |||
| * xxs=4px, xs=8px, sm=12px, md=16px, lg=24px, xl=40px, xxl=64px | |||
| */ | |||
| spacing: Spacing; | |||
| spacing?: Spacing; | |||
There was a problem hiding this comment.
When the spacing notation was supported, the absence of spacing was no longer acceptable.
I've changed it back to optional.
| @@ -84,6 +69,11 @@ | |||
| text-decoration: underline; | |||
| } | |||
|
|
|||
| .heading.xxs { | |||
There was a problem hiding this comment.
Add Size Variation
| /** | ||
| * アイコン。プライマラーカラーで表示。icon propはどれかひとつのみを指定してください | ||
| */ | ||
| primaryIcon?: ReactNode; |
There was a problem hiding this comment.
Deleted because the icon was not used.
| @@ -3,7 +3,7 @@ | |||
| font-weight: normal; | |||
| hyphens: auto; | |||
| line-height: var(--leading); | |||
| color: var(--color); | |||
| color: var(--text-color); | |||
There was a problem hiding this comment.
In the CSS file, I was using variables to make the specification. However, this time I made the colour specification directly from JavaScript.
| @@ -1,16 +1,28 @@ | |||
| export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; | |||
| export type FontSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'; | |||
There was a problem hiding this comment.
This file defines the variations of most components.
| @@ -117,29 +123,61 @@ export const cssLeadingToken = ({ | |||
| return ''; | |||
| }; | |||
|
|
|||
| export const colorVariable = (color: TextColor | undefined): CSSProperties => { | |||
| const PascalToKebab = (str: string) => { | |||
There was a problem hiding this comment.
The functions in this file convert the colour keys specified in the component to CSS Variables.
8845musign
force-pushed
the
update-tokens
branch
from
01dab19 to
e703614
Compare
| @@ -127,5 +127,8 @@ | |||
| "dependencies": { | |||
| "@react-docgen/cli": "^2.0.4", | |||
| "debounce": "^2.1.1" | |||
| }, | |||
| "optionalDependencies": { | |||
There was a problem hiding this comment.
GitHub Actions fails to install this package. Even if it fails, the process can continue.
ref: npm/cli#4828
Changes
Check
Browser verification (minimum) Android Chrome/iOS Safari(375px-)Almost only colour changeCSS not affected by inheritanceLayout does not break even if there is an overflowLayout does not break when wrapsAdded new ComponentAdded data-* prop and id prop