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.

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(ui/color): separate HCT/HSL color palette #642

Merged
merged 4 commits into from
Jan 11, 2023
Merged
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
feat(ui/color):generate hct palette
alimd committed Jan 11, 2023
commit 18555ab464229e0d2cb36592fc3714386300ed29
192 changes: 96 additions & 96 deletions ui/demo-pwa/style/tokens/palette-hct.css
Original file line number Diff line number Diff line change
@@ -13,110 +13,110 @@
--ref-palette-error-chroma: 84;

/* primary */
--ref-palette-primary0: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 0%;
--ref-palette-primary10: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 10%;
--ref-palette-primary20: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 20%;
--ref-palette-primary25: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 25%;
--ref-palette-primary30: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 30%;
--ref-palette-primary35: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 35%;
--ref-palette-primary40: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 40%;
--ref-palette-primary50: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 50%;
--ref-palette-primary60: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 60%;
--ref-palette-primary70: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 70%;
--ref-palette-primary80: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 80%;
--ref-palette-primary90: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 90%;
--ref-palette-primary95: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 95%;
--ref-palette-primary98: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 98%;
--ref-palette-primary99: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 99%;
--ref-palette-primary100: var(--ref-palette-primary-hue), var(--ref-palette-primary-chroma), 100%;
--ref-palette-primary0: 0, 0%, 0%;
--ref-palette-primary10: 262.8, 100%, 18%;
--ref-palette-primary20: 259.8, 59.4%, 28%;
--ref-palette-primary25: 258.6, 50%, 32.9%;
--ref-palette-primary30: 258.1, 43%, 37.8%;
--ref-palette-primary35: 257.9, 38.5%, 42.7%;
--ref-palette-primary40: 257.6, 35%, 47.6%;
--ref-palette-primary50: 257.9, 40.5%, 57.8%;
--ref-palette-primary60: 257.5, 55.3%, 68.4%;
--ref-palette-primary70: 257.6, 86.8%, 79.2%;
--ref-palette-primary80: 257.9, 100%, 86.9%;
--ref-palette-primary90: 261.2, 100%, 93.3%;
--ref-palette-primary95: 270, 100%, 96.5%;
--ref-palette-primary98: 292.5, 100%, 98.4%;
--ref-palette-primary99: 300, 100%, 99.2%;
--ref-palette-primary100: 0, 0%, 100%;

/* secondary */
--ref-palette-secondary0: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 0%;
--ref-palette-secondary10: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 10%;
--ref-palette-secondary20: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 20%;
--ref-palette-secondary25: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 25%;
--ref-palette-secondary30: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 30%;
--ref-palette-secondary35: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 35%;
--ref-palette-secondary40: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 40%;
--ref-palette-secondary50: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 50%;
--ref-palette-secondary60: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 60%;
--ref-palette-secondary70: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 70%;
--ref-palette-secondary80: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 80%;
--ref-palette-secondary90: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 90%;
--ref-palette-secondary95: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 95%;
--ref-palette-secondary98: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 98%;
--ref-palette-secondary99: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 99%;
--ref-palette-secondary100: var(--ref-palette-secondary-hue), var(--ref-palette-secondary-chroma), 100%;
--ref-palette-secondary0: 0, 0%, 0%;
--ref-palette-secondary10: 256.7, 26.5%, 13.3%;
--ref-palette-secondary20: 258, 18.2%, 21.6%;
--ref-palette-secondary25: 258, 15.2%, 25.9%;
--ref-palette-secondary30: 258, 12.8%, 30.6%;
--ref-palette-secondary35: 260, 11.7%, 35.1%;
--ref-palette-secondary40: 260, 10.3%, 39.8%;
--ref-palette-secondary50: 260.9, 9.1%, 49.6%;
--ref-palette-secondary60: 260.9, 11.2%, 59.8%;
--ref-palette-secondary70: 262.5, 15.8%, 70.2%;
--ref-palette-secondary80: 264, 25.8%, 81%;
--ref-palette-secondary90: 263.1, 65%, 92.2%;
--ref-palette-secondary95: 270, 100%, 96.5%;
--ref-palette-secondary98: 292.5, 100%, 98.4%;
--ref-palette-secondary99: 300, 100%, 99.2%;
--ref-palette-secondary100: 0, 0%, 100%;

/* tertiary */
--ref-palette-tertiary0: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 0%;
--ref-palette-tertiary10: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 10%;
--ref-palette-tertiary20: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 20%;
--ref-palette-tertiary25: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 25%;
--ref-palette-tertiary30: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 30%;
--ref-palette-tertiary35: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 35%;
--ref-palette-tertiary40: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 40%;
--ref-palette-tertiary50: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 50%;
--ref-palette-tertiary60: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 60%;
--ref-palette-tertiary70: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 70%;
--ref-palette-tertiary80: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 80%;
--ref-palette-tertiary90: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 90%;
--ref-palette-tertiary95: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 95%;
--ref-palette-tertiary98: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 98%;
--ref-palette-tertiary99: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 99%;
--ref-palette-tertiary100: var(--ref-palette-tertiary-hue), var(--ref-palette-tertiary-chroma), 100%;
--ref-palette-tertiary0: 0, 0%, 0%;
--ref-palette-tertiary10: 338.2, 50.8%, 12.7%;
--ref-palette-tertiary20: 340.5, 33.3%, 21.8%;
--ref-palette-tertiary25: 341.1, 28.4%, 26.3%;
--ref-palette-tertiary30: 340.5, 25.3%, 31%;
--ref-palette-tertiary35: 341.4, 23.1%, 35.7%;
--ref-palette-tertiary40: 342.3, 21.2%, 40.8%;
--ref-palette-tertiary50: 342.1, 18.7%, 50.8%;
--ref-palette-tertiary60: 343.2, 25.3%, 61.2%;
--ref-palette-tertiary70: 343, 37.1%, 72%;
--ref-palette-tertiary80: 343.9, 65.1%, 83.1%;
--ref-palette-tertiary90: 345.8, 100%, 92.5%;
--ref-palette-tertiary95: 347.4, 100%, 96.3%;
--ref-palette-tertiary98: 0, 100%, 98.6%;
--ref-palette-tertiary99: 300, 100%, 99.2%;
--ref-palette-tertiary100: 0, 0%, 100%;

/* neutral */
--ref-palette-neutral0: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 0%;
--ref-palette-neutral10: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 10%;
--ref-palette-neutral20: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 20%;
--ref-palette-neutral25: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 25%;
--ref-palette-neutral30: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 30%;
--ref-palette-neutral35: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 35%;
--ref-palette-neutral40: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 40%;
--ref-palette-neutral50: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 50%;
--ref-palette-neutral60: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 60%;
--ref-palette-neutral70: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 70%;
--ref-palette-neutral80: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 80%;
--ref-palette-neutral90: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 90%;
--ref-palette-neutral95: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 95%;
--ref-palette-neutral98: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 98%;
--ref-palette-neutral99: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 99%;
--ref-palette-neutral100: var(--ref-palette-neutral-hue), var(--ref-palette-neutral-chroma), 100%;
--ref-palette-neutral0: 0, 0%, 0%;
--ref-palette-neutral10: 260, 5.3%, 11.2%;
--ref-palette-neutral20: 280, 3%, 19.4%;
--ref-palette-neutral25: 280, 2.5%, 23.7%;
--ref-palette-neutral30: 270, 2.8%, 28.2%;
--ref-palette-neutral35: 276, 3%, 32.7%;
--ref-palette-neutral40: 276, 2.6%, 37.5%;
--ref-palette-neutral50: 285, 1.7%, 47.1%;
--ref-palette-neutral60: 288, 2.3%, 57.1%;
--ref-palette-neutral70: 300, 2.4%, 67.5%;
--ref-palette-neutral80: 300, 4.5%, 78.2%;
--ref-palette-neutral90: 300, 9.1%, 89.2%;
--ref-palette-neutral95: 310, 23.1%, 94.9%;
--ref-palette-neutral98: 300, 55.6%, 98.2%;
--ref-palette-neutral99: 300, 100%, 99.2%;
--ref-palette-neutral100: 0, 0%, 100%;

/* neutral-variant */
--ref-palette-neutral-variant0: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 0%;
--ref-palette-neutral-variant10: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 10%;
--ref-palette-neutral-variant20: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 20%;
--ref-palette-neutral-variant25: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 25%;
--ref-palette-neutral-variant30: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 30%;
--ref-palette-neutral-variant35: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 35%;
--ref-palette-neutral-variant40: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 40%;
--ref-palette-neutral-variant50: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 50%;
--ref-palette-neutral-variant60: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 60%;
--ref-palette-neutral-variant70: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 70%;
--ref-palette-neutral-variant80: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 80%;
--ref-palette-neutral-variant90: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 90%;
--ref-palette-neutral-variant95: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 95%;
--ref-palette-neutral-variant98: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 98%;
--ref-palette-neutral-variant99: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 99%;
--ref-palette-neutral-variant100: var(--ref-palette-neutral-variant-hue), var(--ref-palette-neutral-variant-chroma), 100%;
--ref-palette-neutral-variant0: 0, 0%, 0%;
--ref-palette-neutral-variant10: 262.5, 13.3%, 11.8%;
--ref-palette-neutral-variant20: 262.5, 7.8%, 20%;
--ref-palette-neutral-variant25: 260, 7.2%, 24.5%;
--ref-palette-neutral-variant30: 266.7, 6.1%, 28.8%;
--ref-palette-neutral-variant35: 266.7, 5.3%, 33.5%;
--ref-palette-neutral-variant40: 266.7, 4.6%, 38.2%;
--ref-palette-neutral-variant50: 270, 4.1%, 47.8%;
--ref-palette-neutral-variant60: 270, 4.7%, 58%;
--ref-palette-neutral-variant70: 272.7, 6.8%, 68.4%;
--ref-palette-neutral-variant80: 272.7, 10.3%, 79%;
--ref-palette-neutral-variant90: 278.2, 21.6%, 90%;
--ref-palette-neutral-variant95: 275, 54.5%, 95.7%;
--ref-palette-neutral-variant98: 292.5, 100%, 98.4%;
--ref-palette-neutral-variant99: 300, 100%, 99.2%;
--ref-palette-neutral-variant100: 0, 0%, 100%;

/* error */
--ref-palette-error0: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 0%;
--ref-palette-error10: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 10%;
--ref-palette-error20: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 20%;
--ref-palette-error25: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 25%;
--ref-palette-error30: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 30%;
--ref-palette-error35: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 35%;
--ref-palette-error40: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 40%;
--ref-palette-error50: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 50%;
--ref-palette-error60: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 60%;
--ref-palette-error70: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 70%;
--ref-palette-error80: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 80%;
--ref-palette-error90: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 90%;
--ref-palette-error95: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 95%;
--ref-palette-error98: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 98%;
--ref-palette-error99: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 99%;
--ref-palette-error100: var(--ref-palette-error-hue), var(--ref-palette-error-chroma), 100%;
--ref-palette-error0: 0, 0%, 0%;
--ref-palette-error10: 358.2, 100%, 12.7%;
--ref-palette-error20: 357.1, 100%, 20.6%;
--ref-palette-error25: 356.7, 100%, 24.7%;
--ref-palette-error30: 355.9, 100%, 28.8%;
--ref-palette-error35: 356.6, 92%, 34.3%;
--ref-palette-error40: 0, 75.5%, 41.6%;
--ref-palette-error50: 2.4, 72.5%, 52.9%;
--ref-palette-error60: 3.6, 100%, 64.3%;
--ref-palette-error70: 5.5, 100%, 74.5%;
--ref-palette-error80: 6.4, 100%, 83.5%;
--ref-palette-error90: 5.9, 100%, 92%;
--ref-palette-error95: 8.6, 100%, 95.9%;
--ref-palette-error98: 7.5, 100%, 98.4%;
--ref-palette-error99: 300, 100%, 99.2%;
--ref-palette-error100: 0, 0%, 100%;
}