kopia lustrzana https://github.com/wagtail/wagtail
Set up new color design tokens for light and dark themes
Thibaud Colas
rodzic
35868364c5
commit
567b999548
|
|
@ -0,0 +1,687 @@
|
|||
/** @typedef {{
|
||||
value: svar(--w-color-trin)g;
|
||||
bgUtility: string;
|
||||
textUtility: string;
|
||||
cssVariable: string;
|
||||
}} Token */
|
||||
|
||||
/** @typedef {{
|
||||
[token: string]: Token;
|
||||
}} CategoryTokens */
|
||||
|
||||
/** @typedef {{
|
||||
label: string;
|
||||
tokens: CategoryTokens;
|
||||
}} ThemeCategory */
|
||||
|
||||
// The focus outline color is defined without reusing a named color variable
|
||||
// because it shouldn’t be reused for anything else in the UI.
|
||||
const focusToken = {
|
||||
value: '#009072',
|
||||
bgUtility: 'w-bg-focus',
|
||||
textUtility: 'w-text-focus',
|
||||
cssVariable: '--w-color-focus',
|
||||
};
|
||||
|
||||
/** @type {ThemeCategory[]} */
|
||||
const light = [
|
||||
{
|
||||
label: 'Surfaces - General',
|
||||
tokens: {
|
||||
'surface-page': {
|
||||
value: 'var(--w-color-white)',
|
||||
bgUtility: 'w-bg-surface-page',
|
||||
textUtility: 'w-text-surface-page',
|
||||
cssVariable: '--w-color-surface-page',
|
||||
},
|
||||
'surface-field': {
|
||||
value: 'var(--w-color-white)',
|
||||
bgUtility: 'w-bg-surface-field',
|
||||
textUtility: 'w-text-surface-field',
|
||||
cssVariable: '--w-color-surface-field',
|
||||
},
|
||||
'surface-field-inactive': {
|
||||
value: 'var(--w-color-grey-50)',
|
||||
bgUtility: 'w-bg-surface-field-inactive',
|
||||
textUtility: 'w-text-surface-field-inactive',
|
||||
cssVariable: '--w-color-surface-field-inactive',
|
||||
},
|
||||
'surface-header': {
|
||||
value: 'var(--w-color-grey-50)',
|
||||
bgUtility: 'w-bg-surface-header',
|
||||
textUtility: 'w-text-surface-header',
|
||||
cssVariable: '--w-color-surface-header',
|
||||
},
|
||||
'surface-menus': {
|
||||
value: 'var(--w-color-primary)',
|
||||
bgUtility: 'w-bg-surface-menus',
|
||||
textUtility: 'w-text-surface-menus',
|
||||
cssVariable: '--w-color-surface-menus',
|
||||
},
|
||||
'surface-menu-item-active': {
|
||||
value: 'var(--w-color-primary-200)',
|
||||
bgUtility: 'w-bg-surface-menu-item-active',
|
||||
textUtility: 'w-text-surface-menu-item-active',
|
||||
cssVariable: '--w-color-surface-menu-item-active',
|
||||
},
|
||||
'surface-tooltip': {
|
||||
value: 'var(--w-color-primary-200)',
|
||||
bgUtility: 'w-bg-surface-tooltip',
|
||||
textUtility: 'w-text-surface-tooltip',
|
||||
cssVariable: '--w-color-surface-tooltip',
|
||||
},
|
||||
'surface-button-default': {
|
||||
value: 'var(--w-color-secondary)',
|
||||
bgUtility: 'w-bg-surface-button-default',
|
||||
textUtility: 'w-text-surface-button-default',
|
||||
cssVariable: '--w-color-surface-button-default',
|
||||
},
|
||||
'surface-button-hover': {
|
||||
value: 'var(--w-color-secondary-400)',
|
||||
bgUtility: 'w-bg-surface-button-hover',
|
||||
textUtility: 'w-text-surface-button-hover',
|
||||
cssVariable: '--w-color-surface-button-hover',
|
||||
},
|
||||
'surface-button-inactive': {
|
||||
value: 'var(--w-color-grey-400)',
|
||||
bgUtility: 'w-bg-surface-button-inactive',
|
||||
textUtility: 'w-text-surface-button-inactive',
|
||||
cssVariable: '--w-color-surface-button-inactive',
|
||||
},
|
||||
'surface-button-outline-hover': {
|
||||
value: 'var(--w-color-secondary-50)',
|
||||
bgUtility: 'w-bg-surface-button-outline-hover',
|
||||
textUtility: 'w-text-surface-button-outline-hover',
|
||||
cssVariable: '--w-color-surface-button-outline-hover',
|
||||
},
|
||||
'surface-panel-information': {
|
||||
value: 'var(--w-color-info-50)',
|
||||
bgUtility: 'w-bg-surface-panel-information',
|
||||
textUtility: 'w-text-surface-panel-information',
|
||||
cssVariable: '--w-color-surface-panel-information',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Surfaces - Alerts',
|
||||
tokens: {
|
||||
'surface-alert-modal-information': {
|
||||
value: 'var(--w-color-info-50)',
|
||||
bgUtility: 'w-bg-surface-alert-modal-information',
|
||||
textUtility: 'w-text-surface-alert-modal-information',
|
||||
cssVariable: '--w-color-surface-alert-modal-information',
|
||||
},
|
||||
'surface-alert-information': {
|
||||
value: 'var(--w-color-info-100)',
|
||||
bgUtility: 'w-bg-surface-alert-information',
|
||||
textUtility: 'w-text-surface-alert-information',
|
||||
cssVariable: '--w-color-surface-alert-information',
|
||||
},
|
||||
'surface-alert-modal-confirmation': {
|
||||
value: 'var(--w-color-positive-50)',
|
||||
bgUtility: 'w-bg-surface-alert-modal-confirmation',
|
||||
textUtility: 'w-text-surface-alert-modal-confirmation',
|
||||
cssVariable: '--w-color-surface-alert-modal-confirmation',
|
||||
},
|
||||
'surface-alert-confirmation': {
|
||||
value: 'var(--w-color-positive-100)',
|
||||
bgUtility: 'w-bg-surface-alert-confirmation',
|
||||
textUtility: 'w-text-surface-alert-confirmation',
|
||||
cssVariable: '--w-color-surface-alert-confirmation',
|
||||
},
|
||||
'surface-alert-modal-warning': {
|
||||
value: 'var(--w-color-warning-50)',
|
||||
bgUtility: 'w-bg-surface-alert-modal-warning',
|
||||
textUtility: 'w-text-surface-alert-modal-warning',
|
||||
cssVariable: '--w-color-surface-alert-modal-warning',
|
||||
},
|
||||
'surface-alert-warning': {
|
||||
value: 'var(--w-color-warning-100)',
|
||||
bgUtility: 'w-bg-surface-alert-warning',
|
||||
textUtility: 'w-text-surface-alert-warning',
|
||||
cssVariable: '--w-color-surface-alert-warning',
|
||||
},
|
||||
'surface-alert-modal-danger': {
|
||||
value: 'var(--w-color-critical-50)',
|
||||
bgUtility: 'w-bg-surface-alert-modal-danger',
|
||||
textUtility: 'w-text-surface-alert-modal-danger',
|
||||
cssVariable: '--w-color-surface-alert-modal-danger',
|
||||
},
|
||||
'surface-alert-danger': {
|
||||
value: 'var(--w-color-critical-200)',
|
||||
bgUtility: 'w-bg-surface-alert-danger',
|
||||
textUtility: 'w-text-surface-alert-danger',
|
||||
cssVariable: '--w-color-surface-alert-danger',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Text',
|
||||
tokens: {
|
||||
'text-button': {
|
||||
value: 'var(--w-color-white)',
|
||||
bgUtility: 'w-bg-text-button',
|
||||
textUtility: 'w-text-text-button',
|
||||
cssVariable: '--w-color-text-button',
|
||||
},
|
||||
'text-label-menus-default': {
|
||||
value: 'var(--w-color-white-80)',
|
||||
bgUtility: 'w-bg-text-label-menus-default',
|
||||
textUtility: 'w-text-text-label-menus-default',
|
||||
cssVariable: '--w-color-text-label-menus-default',
|
||||
},
|
||||
'text-label-menus-active': {
|
||||
value: 'var(--w-color-white)',
|
||||
bgUtility: 'w-bg-text-label-menus-active',
|
||||
textUtility: 'w-text-text-label-menus-active',
|
||||
cssVariable: '--w-color-text-label-menus-active',
|
||||
},
|
||||
'text-label': {
|
||||
value: 'var(--w-color-primary)',
|
||||
bgUtility: 'w-bg-text-label',
|
||||
textUtility: 'w-text-text-label',
|
||||
cssVariable: '--w-color-text-label',
|
||||
},
|
||||
'text-context': {
|
||||
value: 'var(--w-color-grey-600)',
|
||||
bgUtility: 'w-bg-text-context',
|
||||
textUtility: 'w-text-text-context',
|
||||
cssVariable: '--w-color-text-context',
|
||||
},
|
||||
'text-meta': {
|
||||
value: 'var(--w-color-grey-400)',
|
||||
bgUtility: 'w-bg-text-meta',
|
||||
textUtility: 'w-text-text-meta',
|
||||
cssVariable: '--w-color-text-meta',
|
||||
},
|
||||
'text-placeholder': {
|
||||
value: 'var(--w-color-grey-400)',
|
||||
bgUtility: 'w-bg-text-placeholder',
|
||||
textUtility: 'w-text-text-placeholder',
|
||||
cssVariable: '--w-color-text-placeholder',
|
||||
},
|
||||
'text-link-default': {
|
||||
value: 'var(--w-color-secondary)',
|
||||
bgUtility: 'w-bg-text-link-default',
|
||||
textUtility: 'w-text-text-link-default',
|
||||
cssVariable: '--w-color-text-link-default',
|
||||
},
|
||||
'text-link-hover': {
|
||||
value: 'var(--w-color-secondary-400)',
|
||||
bgUtility: 'w-bg-text-link-hover',
|
||||
textUtility: 'w-text-text-link-hover',
|
||||
cssVariable: '--w-color-text-link-hover',
|
||||
},
|
||||
'text-button-outline-default': {
|
||||
value: 'var(--w-color-secondary)',
|
||||
bgUtility: 'w-bg-text-button-outline-default',
|
||||
textUtility: 'w-text-text-button-outline-default',
|
||||
cssVariable: '--w-color-text-button-outline-default',
|
||||
},
|
||||
'text-highlight': {
|
||||
value: 'var(--w-color-secondary-75)',
|
||||
bgUtility: 'w-bg-text-highlight',
|
||||
textUtility: 'w-text-text-highlight',
|
||||
cssVariable: '--w-color-text-highlight',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Icons',
|
||||
tokens: {
|
||||
'icon-menus-default': {
|
||||
value: 'var(--w-color-white-80)',
|
||||
bgUtility: 'w-bg-icon-menus-default',
|
||||
textUtility: 'w-text-icon-menus-default',
|
||||
cssVariable: '--w-color-icon-menus-default',
|
||||
},
|
||||
'icon-primary': {
|
||||
value: 'var(--w-color-primary)',
|
||||
bgUtility: 'w-bg-icon-primary',
|
||||
textUtility: 'w-text-icon-primary',
|
||||
cssVariable: '--w-color-icon-primary',
|
||||
},
|
||||
'icon-primary-hover': {
|
||||
value: 'var(--w-color-primary-200)',
|
||||
bgUtility: 'w-bg-icon-primary-hover',
|
||||
textUtility: 'w-text-icon-primary-hover',
|
||||
cssVariable: '--w-color-icon-primary-hover',
|
||||
},
|
||||
'icon-secondary': {
|
||||
value: 'var(--w-color-grey-400)',
|
||||
bgUtility: 'w-bg-icon-secondary',
|
||||
textUtility: 'w-text-icon-secondary',
|
||||
cssVariable: '--w-color-icon-secondary',
|
||||
},
|
||||
'icon-secondary-hover': {
|
||||
value: 'var(--w-color-primary-200)',
|
||||
bgUtility: 'w-bg-icon-secondary-hover',
|
||||
textUtility: 'w-text-icon-secondary-hover',
|
||||
cssVariable: '--w-color-icon-secondary-hover',
|
||||
},
|
||||
'icon-alert-modal-information': {
|
||||
value: 'var(--w-color-info-100)',
|
||||
bgUtility: 'w-bg-icon-alert-modal-information',
|
||||
textUtility: 'w-text-icon-alert-modal-information',
|
||||
cssVariable: '--w-color-icon-alert-modal-information',
|
||||
},
|
||||
'icon-alert-modal-confirmation': {
|
||||
value: 'var(--w-color-positive-100)',
|
||||
bgUtility: 'w-bg-icon-alert-modal-confirmation',
|
||||
textUtility: 'w-text-icon-alert-modal-confirmation',
|
||||
cssVariable: '--w-color-icon-alert-modal-confirmation',
|
||||
},
|
||||
'icon-alert-modal-warning': {
|
||||
value: 'var(--w-color-warning-100)',
|
||||
bgUtility: 'w-bg-icon-alert-modal-warning',
|
||||
textUtility: 'w-text-icon-alert-modal-warning',
|
||||
cssVariable: '--w-color-icon-alert-modal-warning',
|
||||
},
|
||||
'icon-alert-modal-danger': {
|
||||
value: 'var(--w-color-critical-200)',
|
||||
bgUtility: 'w-bg-icon-alert-modal-danger',
|
||||
textUtility: 'w-text-icon-alert-modal-danger',
|
||||
cssVariable: '--w-color-icon-alert-modal-danger',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Borders',
|
||||
tokens: {
|
||||
'border-furniture': {
|
||||
value: 'var(--w-color-grey-100)',
|
||||
bgUtility: 'w-bg-border-furniture',
|
||||
textUtility: 'w-text-border-furniture',
|
||||
cssVariable: '--w-color-border-furniture',
|
||||
},
|
||||
'border-dashed-block': {
|
||||
value: 'var(--w-color-grey-100)',
|
||||
bgUtility: 'w-bg-border-dashed-block',
|
||||
textUtility: 'w-text-border-dashed-block',
|
||||
cssVariable: '--w-color-border-dashed-block',
|
||||
},
|
||||
'border-button-small-outline-default': {
|
||||
value: 'var(--w-color-grey-150)',
|
||||
bgUtility: 'w-bg-border-button-small-outline-default',
|
||||
textUtility: 'w-text-border-button-small-outline-default',
|
||||
cssVariable: '--w-color-border-button-small-outline-default',
|
||||
},
|
||||
'border-field-default': {
|
||||
value: 'var(--w-color-grey-150)',
|
||||
bgUtility: 'w-bg-border-field-default',
|
||||
textUtility: 'w-text-border-field-default',
|
||||
cssVariable: '--w-color-border-field-default',
|
||||
},
|
||||
'border-field-inactive': {
|
||||
value: 'var(--w-color-grey-150)',
|
||||
bgUtility: 'w-bg-border-field-inactive',
|
||||
textUtility: 'w-text-border-field-inactive',
|
||||
cssVariable: '--w-color-border-field-inactive',
|
||||
},
|
||||
'border-field-hover': {
|
||||
value: 'var(--w-color-grey-200)',
|
||||
bgUtility: 'w-bg-border-field-hover',
|
||||
textUtility: 'w-text-border-field-hover',
|
||||
cssVariable: '--w-color-border-field-hover',
|
||||
},
|
||||
'border-button-outline-default': {
|
||||
value: 'var(--w-color-secondary)',
|
||||
bgUtility: 'w-bg-border-button-outline-default',
|
||||
textUtility: 'w-text-border-button-outline-default',
|
||||
cssVariable: '--w-color-border-button-outline-default',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Misc',
|
||||
tokens: {
|
||||
'wagtail-logo-circle': {
|
||||
value: 'var(--w-color-white-10)',
|
||||
bgUtility: 'w-bg-wagtail-logo-circle',
|
||||
textUtility: 'w-text-wagtail-logo-circle',
|
||||
cssVariable: '--w-color-wagtail-logo-circle',
|
||||
},
|
||||
'wagtail-logo-bird-hover': {
|
||||
value: 'var(--w-color-black)',
|
||||
bgUtility: 'w-bg-wagtail-logo-bird-hover',
|
||||
textUtility: 'w-text-wagtail-logo-bird-hover',
|
||||
cssVariable: '--w-color-wagtail-logo-bird-hover',
|
||||
},
|
||||
'focus': focusToken,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
/** @type {ThemeCategory[]} */
|
||||
const dark = [
|
||||
{
|
||||
label: 'Surfaces - General',
|
||||
tokens: {
|
||||
'surface-page': {
|
||||
value: 'var(--w-color-grey-600)',
|
||||
bgUtility: 'w-bg-surface-page',
|
||||
textUtility: 'w-text-surface-page',
|
||||
cssVariable: '--w-color-surface-page',
|
||||
},
|
||||
'surface-field': {
|
||||
value: 'var(--w-color-grey-600)',
|
||||
bgUtility: 'w-bg-surface-field',
|
||||
textUtility: 'w-text-surface-field',
|
||||
cssVariable: '--w-color-surface-field',
|
||||
},
|
||||
'surface-field-inactive': {
|
||||
value: 'var(--w-color-grey-500)',
|
||||
bgUtility: 'w-bg-surface-field-inactive',
|
||||
textUtility: 'w-text-surface-field-inactive',
|
||||
cssVariable: '--w-color-surface-field-inactive',
|
||||
},
|
||||
'surface-header': {
|
||||
value: 'var(--w-color-grey-600)',
|
||||
bgUtility: 'w-bg-surface-header',
|
||||
textUtility: 'w-text-surface-header',
|
||||
cssVariable: '--w-color-surface-header',
|
||||
},
|
||||
'surface-menus': {
|
||||
value: 'var(--w-color-grey-500)',
|
||||
bgUtility: 'w-bg-surface-menus',
|
||||
textUtility: 'w-text-surface-menus',
|
||||
cssVariable: '--w-color-surface-menus',
|
||||
},
|
||||
'surface-menu-item-active': {
|
||||
value: 'var(--w-color-grey-600)',
|
||||
bgUtility: 'w-bg-surface-menu-item-active',
|
||||
textUtility: 'w-text-surface-menu-item-active',
|
||||
cssVariable: '--w-color-surface-menu-item-active',
|
||||
},
|
||||
'surface-tooltip': {
|
||||
value: 'var(--w-color-grey-500)',
|
||||
bgUtility: 'w-bg-surface-tooltip',
|
||||
textUtility: 'w-text-surface-tooltip',
|
||||
cssVariable: '--w-color-surface-tooltip',
|
||||
},
|
||||
'surface-button-default': {
|
||||
value: 'var(--w-color-secondary)',
|
||||
bgUtility: 'w-bg-surface-button-default',
|
||||
textUtility: 'w-text-surface-button-default',
|
||||
cssVariable: '--w-color-surface-button-default',
|
||||
},
|
||||
'surface-button-hover': {
|
||||
value: 'var(--w-color-secondary-400)',
|
||||
bgUtility: 'w-bg-surface-button-hover',
|
||||
textUtility: 'w-text-surface-button-hover',
|
||||
cssVariable: '--w-color-surface-button-hover',
|
||||
},
|
||||
'surface-button-inactive': {
|
||||
value: 'var(--w-color-grey-400)',
|
||||
bgUtility: 'w-bg-surface-button-inactive',
|
||||
textUtility: 'w-text-surface-button-inactive',
|
||||
cssVariable: '--w-color-surface-button-inactive',
|
||||
},
|
||||
'surface-button-outline-hover': {
|
||||
value: 'var(--w-color-grey-500)',
|
||||
bgUtility: 'w-bg-surface-button-outline-hover',
|
||||
textUtility: 'w-text-surface-button-outline-hover',
|
||||
cssVariable: '--w-color-surface-button-outline-hover',
|
||||
},
|
||||
'surface-panel-information': {
|
||||
value: 'var(--w-color-info-50)',
|
||||
bgUtility: 'w-bg-surface-panel-information',
|
||||
textUtility: 'w-text-surface-panel-information',
|
||||
cssVariable: '--w-color-surface-panel-information',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Surfaces - Alerts',
|
||||
tokens: {
|
||||
'surface-alert-modal-information': {
|
||||
value: 'var(--w-color-info-50)',
|
||||
bgUtility: 'w-bg-surface-alert-modal-information',
|
||||
textUtility: 'w-text-surface-alert-modal-information',
|
||||
cssVariable: '--w-color-surface-alert-modal-information',
|
||||
},
|
||||
'surface-alert-information': {
|
||||
value: 'var(--w-color-info-100)',
|
||||
bgUtility: 'w-bg-surface-alert-information',
|
||||
textUtility: 'w-text-surface-alert-information',
|
||||
cssVariable: '--w-color-surface-alert-information',
|
||||
},
|
||||
'surface-alert-modal-confirmation': {
|
||||
value: 'var(--w-color-positive-50)',
|
||||
bgUtility: 'w-bg-surface-alert-modal-confirmation',
|
||||
textUtility: 'w-text-surface-alert-modal-confirmation',
|
||||
cssVariable: '--w-color-surface-alert-modal-confirmation',
|
||||
},
|
||||
'surface-alert-confirmation': {
|
||||
value: 'var(--w-color-positive-100)',
|
||||
bgUtility: 'w-bg-surface-alert-confirmation',
|
||||
textUtility: 'w-text-surface-alert-confirmation',
|
||||
cssVariable: '--w-color-surface-alert-confirmation',
|
||||
},
|
||||
'surface-alert-modal-warning': {
|
||||
value: 'var(--w-color-warning-50)',
|
||||
bgUtility: 'w-bg-surface-alert-modal-warning',
|
||||
textUtility: 'w-text-surface-alert-modal-warning',
|
||||
cssVariable: '--w-color-surface-alert-modal-warning',
|
||||
},
|
||||
'surface-alert-warning': {
|
||||
value: 'var(--w-color-warning-100)',
|
||||
bgUtility: 'w-bg-surface-alert-warning',
|
||||
textUtility: 'w-text-surface-alert-warning',
|
||||
cssVariable: '--w-color-surface-alert-warning',
|
||||
},
|
||||
'surface-alert-modal-danger': {
|
||||
value: 'var(--w-color-critical-50)',
|
||||
bgUtility: 'w-bg-surface-alert-modal-danger',
|
||||
textUtility: 'w-text-surface-alert-modal-danger',
|
||||
cssVariable: '--w-color-surface-alert-modal-danger',
|
||||
},
|
||||
'surface-alert-danger': {
|
||||
value: 'var(--w-color-critical-200)',
|
||||
bgUtility: 'w-bg-surface-alert-danger',
|
||||
textUtility: 'w-text-surface-alert-danger',
|
||||
cssVariable: '--w-color-surface-alert-danger',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Text',
|
||||
tokens: {
|
||||
'text-button': {
|
||||
value: 'var(--w-color-white)',
|
||||
bgUtility: 'w-bg-text-button',
|
||||
textUtility: 'w-text-text-button',
|
||||
cssVariable: '--w-color-text-button',
|
||||
},
|
||||
'text-label-menus-default': {
|
||||
value: 'var(--w-color-white-80)',
|
||||
bgUtility: 'w-bg-text-label-menus-default',
|
||||
textUtility: 'w-text-text-label-menus-default',
|
||||
cssVariable: '--w-color-text-label-menus-default',
|
||||
},
|
||||
'text-label-menus-active': {
|
||||
value: 'var(--w-color-white)',
|
||||
bgUtility: 'w-bg-text-label-menus-active',
|
||||
textUtility: 'w-text-text-label-menus-active',
|
||||
cssVariable: '--w-color-text-label-menus-active',
|
||||
},
|
||||
'text-label': {
|
||||
value: 'var(--w-color-grey-150)',
|
||||
bgUtility: 'w-bg-text-label',
|
||||
textUtility: 'w-text-text-label',
|
||||
cssVariable: '--w-color-text-label',
|
||||
},
|
||||
'text-context': {
|
||||
value: 'var(--w-color-grey-50)',
|
||||
bgUtility: 'w-bg-text-context',
|
||||
textUtility: 'w-text-text-context',
|
||||
cssVariable: '--w-color-text-context',
|
||||
},
|
||||
'text-meta': {
|
||||
value: 'var(--w-color-grey-150)',
|
||||
bgUtility: 'w-bg-text-meta',
|
||||
textUtility: 'w-text-text-meta',
|
||||
cssVariable: '--w-color-text-meta',
|
||||
},
|
||||
'text-placeholder': {
|
||||
value: 'var(--w-color-grey-200)',
|
||||
bgUtility: 'w-bg-text-placeholder',
|
||||
textUtility: 'w-text-text-placeholder',
|
||||
cssVariable: '--w-color-text-placeholder',
|
||||
},
|
||||
'text-link-default': {
|
||||
value: 'var(--w-color-secondary-100)',
|
||||
bgUtility: 'w-bg-text-link-default',
|
||||
textUtility: 'w-text-text-link-default',
|
||||
cssVariable: '--w-color-text-link-default',
|
||||
},
|
||||
'text-link-hover': {
|
||||
value: 'var(--w-color-secondary-75)',
|
||||
bgUtility: 'w-bg-text-link-hover',
|
||||
textUtility: 'w-text-text-link-hover',
|
||||
cssVariable: '--w-color-text-link-hover',
|
||||
},
|
||||
'text-button-outline-default': {
|
||||
value: 'var(--w-color-secondary-100)',
|
||||
bgUtility: 'w-bg-text-button-outline-default',
|
||||
textUtility: 'w-text-text-button-outline-default',
|
||||
cssVariable: '--w-color-text-button-outline-default',
|
||||
},
|
||||
'text-highlight': {
|
||||
value: 'var(--w-color-secondary-400)',
|
||||
bgUtility: 'w-bg-text-highlight',
|
||||
textUtility: 'w-text-text-highlight',
|
||||
cssVariable: '--w-color-text-highlight',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Icons',
|
||||
tokens: {
|
||||
'icon-menus-default': {
|
||||
value: 'var(--w-color-white-80)',
|
||||
bgUtility: 'w-bg-icon-menus-default',
|
||||
textUtility: 'w-text-icon-menus-default',
|
||||
cssVariable: '--w-color-icon-menus-default',
|
||||
},
|
||||
'icon-primary': {
|
||||
value: 'var(--w-color-grey-150)',
|
||||
bgUtility: 'w-bg-icon-primary',
|
||||
textUtility: 'w-text-icon-primary',
|
||||
cssVariable: '--w-color-icon-primary',
|
||||
},
|
||||
'icon-primary-hover': {
|
||||
value: 'var(--w-color-grey-50)',
|
||||
bgUtility: 'w-bg-icon-primary-hover',
|
||||
textUtility: 'w-text-icon-primary-hover',
|
||||
cssVariable: '--w-color-icon-primary-hover',
|
||||
},
|
||||
'icon-secondary': {
|
||||
value: 'var(--w-color-grey-150)',
|
||||
bgUtility: 'w-bg-icon-secondary',
|
||||
textUtility: 'w-text-icon-secondary',
|
||||
cssVariable: '--w-color-icon-secondary',
|
||||
},
|
||||
'icon-secondary-hover': {
|
||||
value: 'var(--w-color-grey-50)',
|
||||
bgUtility: 'w-bg-icon-secondary-hover',
|
||||
textUtility: 'w-text-icon-secondary-hover',
|
||||
cssVariable: '--w-color-icon-secondary-hover',
|
||||
},
|
||||
'icon-alert-modal-information': {
|
||||
value: 'var(--w-color-info-100)',
|
||||
bgUtility: 'w-bg-icon-alert-modal-information',
|
||||
textUtility: 'w-text-icon-alert-modal-information',
|
||||
cssVariable: '--w-color-icon-alert-modal-information',
|
||||
},
|
||||
'icon-alert-modal-confirmation': {
|
||||
value: 'var(--w-color-positive-100)',
|
||||
bgUtility: 'w-bg-icon-alert-modal-confirmation',
|
||||
textUtility: 'w-text-icon-alert-modal-confirmation',
|
||||
cssVariable: '--w-color-icon-alert-modal-confirmation',
|
||||
},
|
||||
'icon-alert-modal-warning': {
|
||||
value: 'var(--w-color-warning-100)',
|
||||
bgUtility: 'w-bg-icon-alert-modal-warning',
|
||||
textUtility: 'w-text-icon-alert-modal-warning',
|
||||
cssVariable: '--w-color-icon-alert-modal-warning',
|
||||
},
|
||||
'icon-alert-modal-danger': {
|
||||
value: 'var(--w-color-critical-200)',
|
||||
bgUtility: 'w-bg-icon-alert-modal-danger',
|
||||
textUtility: 'w-text-icon-alert-modal-danger',
|
||||
cssVariable: '--w-color-icon-alert-modal-danger',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Borders',
|
||||
tokens: {
|
||||
'border-furniture': {
|
||||
value: 'var(--w-color-grey-500)',
|
||||
bgUtility: 'w-bg-border-furniture',
|
||||
textUtility: 'w-text-border-furniture',
|
||||
cssVariable: '--w-color-border-furniture',
|
||||
},
|
||||
'border-dashed-block': {
|
||||
value: 'var(--w-color-grey-500)',
|
||||
bgUtility: 'w-bg-border-dashed-block',
|
||||
textUtility: 'w-text-border-dashed-block',
|
||||
cssVariable: '--w-color-border-dashed-block',
|
||||
},
|
||||
'border-button-small-outline-default': {
|
||||
value: 'var(--w-color-grey-400)',
|
||||
bgUtility: 'w-bg-border-button-small-outline-default',
|
||||
textUtility: 'w-text-border-button-small-outline-default',
|
||||
cssVariable: '--w-color-border-button-small-outline-default',
|
||||
},
|
||||
'border-field-default': {
|
||||
value: 'var(--w-color-grey-400)',
|
||||
bgUtility: 'w-bg-border-field-default',
|
||||
textUtility: 'w-text-border-field-default',
|
||||
cssVariable: '--w-color-border-field-default',
|
||||
},
|
||||
'border-field-inactive': {
|
||||
value: 'var(--w-color-grey-500)',
|
||||
bgUtility: 'w-bg-border-field-inactive',
|
||||
textUtility: 'w-text-border-field-inactive',
|
||||
cssVariable: '--w-color-border-field-inactive',
|
||||
},
|
||||
'border-field-hover': {
|
||||
value: 'var(--w-color-grey-200)',
|
||||
bgUtility: 'w-bg-border-field-hover',
|
||||
textUtility: 'w-text-border-field-hover',
|
||||
cssVariable: '--w-color-border-field-hover',
|
||||
},
|
||||
'border-button-outline-default': {
|
||||
value: 'var(--w-color-secondary-100)',
|
||||
bgUtility: 'w-bg-border-button-outline-default',
|
||||
textUtility: 'w-text-border-button-outline-default',
|
||||
cssVariable: '--w-color-border-button-outline-default',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
label: 'Misc',
|
||||
tokens: {
|
||||
'wagtail-logo-circle': {
|
||||
value: 'var(--w-color-white-10)',
|
||||
bgUtility: 'w-bg-wagtail-logo-circle',
|
||||
textUtility: 'w-text-wagtail-logo-circle',
|
||||
cssVariable: '--w-color-wagtail-logo-circle',
|
||||
},
|
||||
'wagtail-logo-bird-hover': {
|
||||
value: 'var(--w-color-black)',
|
||||
bgUtility: 'w-bg-wagtail-logo-bird-hover',
|
||||
textUtility: 'w-text-wagtail-logo-bird-hover',
|
||||
cssVariable: '--w-color-wagtail-logo-bird-hover',
|
||||
},
|
||||
'focus': focusToken,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
module.exports = {
|
||||
light,
|
||||
dark,
|
||||
};
|
||||
|
|
@ -85,6 +85,19 @@ const generateColorVariables = (colors) => {
|
|||
return colorVariables;
|
||||
};
|
||||
|
||||
const generateThemeColorVariables = (themeCategories) => {
|
||||
const colorVariables = {};
|
||||
|
||||
themeCategories.forEach((category) => {
|
||||
Object.values(category.tokens).forEach((token) => {
|
||||
colorVariables[token.cssVariable] = token.value;
|
||||
});
|
||||
});
|
||||
|
||||
return colorVariables;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
generateColorVariables,
|
||||
generateThemeColorVariables,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -59,6 +59,10 @@ describe('generateColorVariables', () => {
|
|||
"--w-color-grey-50-hue": "calc(var(--w-color-grey-600-hue) + 240)",
|
||||
"--w-color-grey-50-lightness": "calc(var(--w-color-grey-600-lightness) + 82%)",
|
||||
"--w-color-grey-50-saturation": "calc(var(--w-color-grey-600-saturation) + 12.5%)",
|
||||
"--w-color-grey-500": "hsl(var(--w-color-grey-500-hue) var(--w-color-grey-500-saturation) var(--w-color-grey-500-lightness))",
|
||||
"--w-color-grey-500-hue": "var(--w-color-grey-600-hue)",
|
||||
"--w-color-grey-500-lightness": "calc(var(--w-color-grey-600-lightness) + 5.1%)",
|
||||
"--w-color-grey-500-saturation": "var(--w-color-grey-600-saturation)",
|
||||
"--w-color-grey-600": "hsl(var(--w-color-grey-600-hue) var(--w-color-grey-600-saturation) var(--w-color-grey-600-lightness))",
|
||||
"--w-color-grey-600-hue": "0",
|
||||
"--w-color-grey-600-lightness": "14.9%",
|
||||
|
|
|
|||
|
|
@ -39,6 +39,15 @@ const colors = {
|
|||
usage: 'Body copy, user content',
|
||||
contrastText: 'white',
|
||||
},
|
||||
500: {
|
||||
hex: '#333333',
|
||||
hsl: 'hsl(0 0% 20%)',
|
||||
bgUtility: 'w-bg-grey-500',
|
||||
textUtility: 'w-text-grey-500',
|
||||
cssVariable: '--w-color-grey-500',
|
||||
usage: 'Panels, dividers in dark mode',
|
||||
contrastText: 'white',
|
||||
},
|
||||
400: {
|
||||
hex: '#5C5C5C',
|
||||
hsl: 'hsl(0 0% 36.1%)',
|
||||
|
|
@ -224,7 +233,7 @@ const colors = {
|
|||
contrastText: 'primary',
|
||||
},
|
||||
50: {
|
||||
hex: '#FAECD5',
|
||||
hex: '#FFF5D8',
|
||||
hsl: 'hsl(37.3 78.7% 90.8%)',
|
||||
bgUtility: 'w-bg-warning-50',
|
||||
textUtility: 'w-text-warning-50',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import colors, { Hues, Shade } from './colors';
|
||||
import colorThemes, { Token, ThemeCategory } from './colorThemes';
|
||||
import { generateColorVariables } from './colorVariables';
|
||||
|
||||
const description = `
|
||||
|
|
@ -85,6 +86,50 @@ export const ColorPalette = () => (
|
|||
</>
|
||||
);
|
||||
|
||||
const TokenSwatch = ({ name, token }: { name: string; token: Token }) => (
|
||||
<div className="w-shadow w-border w-border-border-furniture w-rounded w-w-36 w-p-2.5">
|
||||
<div
|
||||
className={`w-w-12 w-h-10 w-rounded ${token.bgUtility}${
|
||||
token.value.includes('white') || token.value.includes('grey-600')
|
||||
? ' w-border w-border-border-furniture'
|
||||
: ''
|
||||
}`}
|
||||
/>
|
||||
<h4 className="w-label-3">{name}</h4>
|
||||
<p className="w-help-text">
|
||||
{token.value.replace('var(--w-color-', '').replace(')', '')}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const CategorySwatches = ({ category }: { category: ThemeCategory }) => (
|
||||
<div key={category.label}>
|
||||
<h3 className="w-h3">{category.label}</h3>
|
||||
<div className="w-grid w-grid-flow-col w-gap-2.5">
|
||||
{Object.entries(category.tokens).map(([name, token]) => (
|
||||
<TokenSwatch key={token} name={name} token={token} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const ColorThemes = () => (
|
||||
<>
|
||||
<section className="w-bg-surface-page w-pt-6 w-mt-6 -w-mx-4 w-px-4">
|
||||
<h2 className="w-h2">Light</h2>
|
||||
{colorThemes.light.map((category: ThemeCategory) => (
|
||||
<CategorySwatches key={category.label} category={category} />
|
||||
))}
|
||||
</section>
|
||||
<section className="w-bg-surface-page w-pt-6 w-mt-6 -w-mx-4 w-px-4 w-theme-dark">
|
||||
<h2 className="w-h2">Dark</h2>
|
||||
{colorThemes.dark.map((category: ThemeCategory) => (
|
||||
<CategorySwatches key={category.label} category={category} />
|
||||
))}
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
|
||||
const variablesMap = Object.entries(generateColorVariables(colors))
|
||||
.map(([cssVar, val]) => `${cssVar}: ${val};`)
|
||||
.join('');
|
||||
|
|
|
|||
|
|
@ -4,7 +4,11 @@ const vanillaRTL = require('tailwindcss-vanilla-rtl');
|
|||
* Design Tokens
|
||||
*/
|
||||
const colors = require('./src/tokens/colors');
|
||||
const { generateColorVariables } = require('./src/tokens/colorVariables');
|
||||
const {
|
||||
generateColorVariables,
|
||||
generateThemeColorVariables,
|
||||
} = require('./src/tokens/colorVariables');
|
||||
const colorThemes = require('./src/tokens/colorThemes');
|
||||
const {
|
||||
fontFamily,
|
||||
fontSize,
|
||||
|
|
@ -43,6 +47,14 @@ const themeColors = Object.fromEntries(
|
|||
}),
|
||||
);
|
||||
|
||||
const lightThemeColors = colorThemes.light.reduce((colorTokens, category) => {
|
||||
Object.entries(category.tokens).forEach(([name, token]) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
colorTokens[name] = `var(${token.cssVariable})`;
|
||||
});
|
||||
return colorTokens;
|
||||
}, {});
|
||||
|
||||
/**
|
||||
* Root Tailwind config, reusable for other projects.
|
||||
*/
|
||||
|
|
@ -54,14 +66,17 @@ module.exports = {
|
|||
},
|
||||
colors: {
|
||||
...themeColors,
|
||||
// Fades of white and black are not customisable.
|
||||
'white-15': 'rgba(255, 255, 255, 0.15)',
|
||||
'white-50': 'rgba(255, 255, 255, 0.50)',
|
||||
'white-80': 'rgba(255, 255, 255, 0.80)',
|
||||
'black-10': 'rgba(0, 0, 0, 0.10)',
|
||||
'black-20': 'rgba(0, 0, 0, 0.20)',
|
||||
'black-35': 'rgba(0, 0, 0, 0.35)',
|
||||
'black-50': 'rgba(0, 0, 0, 0.50)',
|
||||
...lightThemeColors,
|
||||
'white-10': 'var(--w-color-white-10)',
|
||||
'white-15': 'var(--w-color-white-15)',
|
||||
'white-50': 'var(--w-color-white-50)',
|
||||
'white-80': 'var(--w-color-white-80)',
|
||||
'black-5': 'var(--w-color-black-5)',
|
||||
'black-10': 'var(--w-color-black-10)',
|
||||
'black-20': 'var(--w-color-black-20)',
|
||||
'black-25': 'var(--w-color-black-25)',
|
||||
'black-35': 'var(--w-color-black-35)',
|
||||
'black-50': 'var(--w-color-black-50)',
|
||||
// Color keywords.
|
||||
'inherit': 'inherit',
|
||||
'current': 'currentColor',
|
||||
|
|
@ -150,8 +165,25 @@ module.exports = {
|
|||
':root, :host': {
|
||||
'--w-font-sans': fontFamily.sans.join(', '),
|
||||
'--w-font-mono': fontFamily.mono.join(', '),
|
||||
'--w-color-white-10': 'rgba(255, 255, 255, 0.10)',
|
||||
'--w-color-white-15': 'rgba(255, 255, 255, 0.15)',
|
||||
'--w-color-white-50': 'rgba(255, 255, 255, 0.50)',
|
||||
'--w-color-white-80': 'rgba(255, 255, 255, 0.80)',
|
||||
'--w-color-black-5': 'rgba(0, 0, 0, 0.05)',
|
||||
'--w-color-black-10': 'rgba(0, 0, 0, 0.10)',
|
||||
'--w-color-black-20': 'rgba(0, 0, 0, 0.20)',
|
||||
'--w-color-black-25': 'rgba(0, 0, 0, 0.25)',
|
||||
'--w-color-black-35': 'rgba(0, 0, 0, 0.35)',
|
||||
'--w-color-black-50': 'rgba(0, 0, 0, 0.50)',
|
||||
...generateColorVariables(colors),
|
||||
...generateThemeColorVariables(colorThemes.light),
|
||||
},
|
||||
'.w-theme-system': {
|
||||
'@media (prefers-color-scheme: dark)': generateThemeColorVariables(
|
||||
colorThemes.dark,
|
||||
),
|
||||
},
|
||||
'.w-theme-dark': generateThemeColorVariables(colorThemes.dark),
|
||||
});
|
||||
}),
|
||||
/** Support for aria-expanded=true variant */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Ładowanie…
Reference in New Issue