diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json index 62763473d1..dbb41c54b8 100644 --- a/tokens/src/core/alias/size.json +++ b/tokens/src/core/alias/size.json @@ -2,15 +2,35 @@ "size": { "$type": "dimension", "border": { - "width": { "source": "$border-width", "$value": "1px", "$description": "Default border width." }, + "width": { + "$value": "1px", + "$description": "Default border width.", + "source": "$border-width" + }, "radius": { - "base": { "source": "$border-radius", "$value": ".375rem", "$description": "Default border radius." }, - "lg": { "source": "$border-radius-lg", "$value": ".425rem", "$description": "Large border radius." }, - "sm": { "source": "$border-radius-sm", "$value": ".25rem", "$description": "Small border radius." } + "base": { + "$value": ".375rem", + "$description": "Default border radius.", + "source": "$border-radius" + }, + "lg": { + "$value": ".425rem", + "$description": "Large border radius.", + "source": "$border-radius-lg" + }, + "sm": { + "$value": ".25rem", + "$description": "Small border radius.", + "source": "$border-radius-sm" + } } }, "rounded": { - "pill": { "source": "$rounded-pill", "$value": "50rem", "$description": "Pill border radius." } + "pill": { + "$value": "50rem", + "$description": "Pill border radius.", + "source": "$rounded-pill" + } } } } diff --git a/tokens/src/core/components/ActionRow.json b/tokens/src/core/components/ActionRow.json index 4dd026a3b6..04ac8aa01d 100644 --- a/tokens/src/core/components/ActionRow.json +++ b/tokens/src/core/components/ActionRow.json @@ -3,8 +3,14 @@ "$type": "dimension", "action-row": { "gap": { - "x": { "source": "$action-row-gap-x", "$value": ".5rem" }, - "y": { "source": "$action-row-gap-y", "$value": ".5rem" } + "x": { + "$value": ".5rem", + "source": "$action-row-gap-x" + }, + "y": { + "$value": ".5rem", + "source": "$action-row-gap-y" + } } } } diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json index aafa21a782..2d309a7b28 100644 --- a/tokens/src/core/components/Alert.json +++ b/tokens/src/core/components/Alert.json @@ -3,29 +3,62 @@ "$type": "dimension", "alert": { "padding": { - "y": { "source": "$alert-padding-y", "$value": "1.5rem" }, - "x": { "source": "$alert-padding-x", "$value": "1.5rem" } + "y": { + "$value": "1.5rem", + "source": "$alert-padding-y" + }, + "x": { + "$value": "1.5rem", + "source": "$alert-padding-x" + } }, - "margin-bottom": { "source": "$alert-margin-bottom", "$value": "1rem" }, - "actions-gap": { "source": "$alert-actions-gap", "$value": "{spacing.spacer.3}" }, - "icon-space": { "source": "$alert-icon-space", "$value": ".8rem" } + "margin-bottom": { + "$value": "1rem", + "source": "$alert-margin-bottom" + }, + "actions-gap": { + "$value": "{spacing.spacer.3}", + "source": "$alert-actions-gap" + }, + "icon-space": { + "$value": ".8rem", + "source": "$alert-icon-space" + } } }, "typography": { "alert": { "font": { - "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" }, - "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" } + "weight-link": { + "$type": "fontWeight", + "$value": "{typography.font.weight.normal}", + "source": "$alert-link-font-weight" + }, + "size": { + "$type": "dimension", + "$value": ".875rem", + "source": "$alert-font-size" + } }, - "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" } + "line-height": { + "$type": "number", + "$value": "1.5rem", + "source": "$alert-line-height" + } } }, "size": { "$type": "dimension", "alert": { "border": { - "radius": { "source": "$alert-border-radius", "$value": "{size.border.radius.base}" }, - "width": { "source": "$alert-border-width", "$value": "0" } + "radius": { + "$value": "{size.border.radius.base}", + "source": "$alert-border-radius" + }, + "width": { + "$value": "0", + "source": "$alert-border-width" + } } } } diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json index bd86bd7be2..728cac401f 100644 --- a/tokens/src/core/components/Annotation.json +++ b/tokens/src/core/components/Annotation.json @@ -2,26 +2,49 @@ "spacing": { "$type": "dimension", "annotation": { - "padding": { "source": "$annotation-padding", "$value": ".5rem" }, + "padding": { + "$value": ".5rem", + "source": "$annotation-padding" + }, "arrow-side": { - "margin": { "source": "$annotation-arrow-side-margin", "$value": ".25rem" } + "margin": { + "$value": ".25rem", + "source": "$annotation-arrow-side-margin" + } } } }, "typography": { "annotation": { - "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}", "$type": "dimension" }, - "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}", "$type": "number" } + "font-size": { + "$type": "dimension", + "$value": "{typography.font.size.sm}", + "source": "$annotation-font-size" + }, + "line-height": { + "$type": "number", + "$value": "{typography.line-height.sm}", + "source": "$annotation-line-height" + } } }, "size": { "$type": "dimension", "annotation": { "arrow-border": { - "width": { "source": "$annotation-arrow-border-width", "$value": ".5rem" } + "width": { + "$value": ".5rem", + "source": "$annotation-arrow-border-width" + } }, - "max-width": { "source": "$annotation-max-width", "$value": "18.75rem" }, - "border-radius": { "source": "$annotation-border-radius", "$value": ".25rem" } + "max-width": { + "$value": "18.75rem", + "source": "$annotation-max-width" + }, + "border-radius": { + "$value": ".25rem", + "source": "$annotation-border-radius" + } } } } diff --git a/tokens/src/core/components/Avatar.json b/tokens/src/core/components/Avatar.json index 58bd3176ed..fb71335d19 100644 --- a/tokens/src/core/components/Avatar.json +++ b/tokens/src/core/components/Avatar.json @@ -1,16 +1,52 @@ { "size": { "avatar": { - "base": { "source": "$avatar-size", "$value": "3rem", "$type": "dimension" }, - "xs": { "source": "$avatar-size-xs", "$value": "1.5rem", "$type": "dimension" }, - "sm": { "source": "$avatar-size-sm", "$value": "2.25rem", "$type": "dimension" }, - "lg": { "source": "$avatar-size-lg", "$value": "4rem", "$type": "dimension" }, - "xl": { "source": "$avatar-size-xl", "$value": "6rem", "$type": "dimension" }, - "xxl": { "source": "$avatar-size-xxl", "$value": "11.5rem", "$type": "dimension" }, - "huge": { "source": "$avatar-size-huge", "$value": "18.75rem", "$type": "dimension" }, + "base": { + "$type": "dimension", + "$value": "3rem", + "source": "$avatar-size" + }, + "xs": { + "$type": "dimension", + "$value": "1.5rem", + "source": "$avatar-size-xs" + }, + "sm": { + "$type": "dimension", + "$value": "2.25rem", + "source": "$avatar-size-sm" + }, + "lg": { + "$type": "dimension", + "$value": "4rem", + "source": "$avatar-size-lg" + }, + "xl": { + "$type": "dimension", + "$value": "6rem", + "source": "$avatar-size-xl" + }, + "xxl": { + "$type": "dimension", + "$value": "11.5rem", + "source": "$avatar-size-xxl" + }, + "huge": { + "$type": "dimension", + "$value": "18.75rem", + "source": "$avatar-size-huge" + }, "border": { - "base": { "source": "$avatar-border", "$value": "1px", "$type": "dimension" }, - "radius": { "source": "$avatar-border-radius", "$value": "100%", "$type": "percentage" } + "base": { + "$type": "dimension", + "$value": "1px", + "source": "$avatar-border" + }, + "radius": { + "$type": "percentage", + "$value": "100%", + "source": "$avatar-border-radius" + } } } } diff --git a/tokens/src/core/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json index c5635bf79c..468c381921 100644 --- a/tokens/src/core/components/AvatarButton.json +++ b/tokens/src/core/components/AvatarButton.json @@ -3,9 +3,18 @@ "$type": "dimension", "avatar-button": { "padding-left": { - "base": { "source": "$avatar-button-padding-left", "$value": ".25em" }, - "sm": { "source": "$avatar-button-padding-left-sm", "$value": ".25em" }, - "lg": { "source": "$avatar-button-padding-left-lg", "$value": ".25em" } + "base": { + "$value": ".25em", + "source": "$avatar-button-padding-left" + }, + "sm": { + "$value": ".25em", + "source": "$avatar-button-padding-left-sm" + }, + "lg": { + "$value": ".25em", + "source": "$avatar-button-padding-left-lg" + } } } } diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json index 61cbc94e7a..5964afc473 100644 --- a/tokens/src/core/components/Badge.json +++ b/tokens/src/core/components/Badge.json @@ -4,18 +4,35 @@ "badge": { "padding": { "x": { - "base": { "source": "$badge-padding-x", "$value": ".5rem" }, - "pill": { "source": "$badge-pill-padding-x", "$value": ".6em" } + "base": { + "$value": ".5rem", + "source": "$badge-padding-x" + }, + "pill": { + "$value": ".6em", + "source": "$badge-pill-padding-x" + } }, - "y": { "source": "$badge-padding-y", "$value": ".125rem" } + "y": { + "$value": ".125rem", + "source": "$badge-padding-y" + } } } }, "typography": { "badge": { "font": { - "size": { "source": "$badge-font-size", "$value": "75%", "$type": "percentage" }, - "weight": { "source": "$badge-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" } + "size": { + "$type": "percentage", + "$value": "75%", + "source": "$badge-font-size" + }, + "weight": { + "$type": "fontWeight", + "$value": "{typography.font.weight.bold}", + "source": "$badge-font-weight" + } } } }, @@ -23,14 +40,26 @@ "$type": "dimension", "badge": { "border-radius": { - "base": { "source": "$badge-border-radius", "$value": ".25rem" }, - "pill": { "source": "$badge-pill-border-radius", "$value": "10rem" } + "base": { + "$value": ".25rem", + "source": "$badge-border-radius" + }, + "pill": { + "$value": "10rem", + "source": "$badge-pill-border-radius" + } }, - "focus-width": { "source": "$badge-focus-width", "$value": "{size.input.btn.focus-width}" } + "focus-width": { + "$value": "{size.input.btn.focus-width}", + "source": "$badge-focus-width" + } } }, "transition": { "$type": "transition", - "badge": { "source": "$badge-transition", "$value": "none" } + "badge": { + "$value": "none", + "source": "$badge-transition" + } } } diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json index c3d34ad7c2..6b394dbfad 100644 --- a/tokens/src/core/components/Breadcrumb.json +++ b/tokens/src/core/components/Breadcrumb.json @@ -3,7 +3,10 @@ "$type": "dimension", "breadcrumb": { "margin": { - "left": { "source": "$breadcrumb-margin-left", "$value": ".5rem" } + "left": { + "$value": ".5rem", + "source": "$breadcrumb-margin-left" + } } } }, @@ -12,13 +15,25 @@ "breadcrumb": { "border": { "radius": { - "focus": { "source": "$breadcrumb-focus-border-radius", "$value": ".125rem" } + "focus": { + "$value": ".125rem", + "source": "$breadcrumb-focus-border-radius" + } }, "axis": { - "x-focus": { "source": "$breadcrumb-border-focus-axis-x", "$value": ".25rem" }, - "y-focus": { "source": "$breadcrumb-border-focus-axis-y", "$value": ".5rem" } + "x-focus": { + "$value": ".25rem", + "source": "$breadcrumb-border-focus-axis-x" + }, + "y-focus": { + "$value": ".5rem", + "source": "$breadcrumb-border-focus-axis-y" + } }, - "width-focus": { "source": "$breadcrumb-border-focus-width", "$value": ".0625rem" } + "width-focus": { + "$value": ".0625rem", + "source": "$breadcrumb-border-focus-width" + } } } } diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json index 587265277c..1762e7714d 100644 --- a/tokens/src/core/components/Bubble.json +++ b/tokens/src/core/components/Bubble.json @@ -3,8 +3,14 @@ "$type": "dimension", "bubble": { "expandable-padding": { - "y": { "source": "$bubble-expandable-padding-y", "$value": "0" }, - "x": { "source": "$bubble-expandable-padding-x", "$value": ".25rem" } + "y": { + "$value": "0", + "source": "$bubble-expandable-padding-y" + }, + "x": { + "$value": ".25rem", + "source": "$bubble-expandable-padding-x" + } } } } diff --git a/tokens/src/core/components/Button/core.json b/tokens/src/core/components/Button/core.json index 93a9a7366f..a9333472b8 100644 --- a/tokens/src/core/components/Button/core.json +++ b/tokens/src/core/components/Button/core.json @@ -4,28 +4,52 @@ "btn": { "padding": { "y": { - "base": { "source": "$btn-padding-y", "$value": "{spacing.input.btn.padding.y}" }, - "lg": { "source": "$btn-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" }, - "sm": { "source": "$btn-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" } + "base": { + "$value": "{spacing.input.btn.padding.y}", + "source": "$btn-padding-y" + }, + "lg": { + "$value": "{spacing.input.btn.padding.lg.y}", + "source": "$btn-padding-y-lg" + }, + "sm": { + "$value": "{spacing.input.btn.padding.sm.y}", + "source": "$btn-padding-y-sm" + } }, "x": { - "base": { "source": "$btn-padding-x", "$value": "{spacing.input.btn.padding.x}" }, - "lg": { "source": "$btn-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" }, - "sm": { "source": "$btn-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" } + "base": { + "$value": "{spacing.input.btn.padding.x}", + "source": "$btn-padding-x" + }, + "lg": { + "$value": "{spacing.input.btn.padding.lg.x}", + "source": "$btn-padding-x-lg" + }, + "sm": { + "$value": "{spacing.input.btn.padding.sm.x}", + "source": "$btn-padding-x-sm" + } } }, "block": { - "spacing-y": { "source": "$btn-block-spacing-y", "$value": ".5rem" } + "spacing-y": { + "$value": ".5rem", + "source": "$btn-block-spacing-y" + } }, "focus": { - "gap": { "source": "$btn-focus-gap", "$value": "{size.btn.focus.width}" }, + "gap": { + "$value": "{size.btn.focus.width}", + "source": "$btn-focus-gap" + }, "border-gap": { - "source": "$btn-focus-border-gap", - "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})" + "$value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})", + "source": "$btn-focus-border-gap" }, "distance-to-border": { - "source": "$btn-focus-distance-to-border", - "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})" + "$value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})", + "source": "$btn-focus-distance-to-border" } } } @@ -33,20 +57,46 @@ "typography": { "btn": { "font": { - "family": { "source": "$btn-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" }, + "family": { + "$type": "fontFamily", + "$value": "{typography.input.btn.font.family}", + "source": "$btn-font-family" + }, "size": { "$type": "dimension", - "base": { "source": "$btn-font-size", "$value": "{typography.input.btn.font.size.base}" }, - "sm": { "source": "$btn-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" }, - "lg": { "source": "$btn-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" } + "base": { + "$value": "{typography.input.btn.font.size.base}", + "source": "$btn-font-size" + }, + "sm": { + "$value": "{typography.input.btn.font.size.sm}", + "source": "$btn-font-size-sm" + }, + "lg": { + "$value": "{typography.input.btn.font.size.lg}", + "source": "$btn-font-size-lg" + } }, - "weight": { "source": "$btn-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" } + "weight": { + "$type": "fontWeight", + "$value": "{typography.font.weight.normal}", + "source": "$btn-font-weight" + } }, "line-height": { "$type": "number", - "base": { "source": "$btn-line-height", "$value": "{typography.input.btn.line-height.base}" }, - "sm": { "source": "$btn-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, - "lg": { "source": "$btn-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } + "base": { + "$value": "{typography.input.btn.line-height.base}", + "source": "$btn-line-height" + }, + "sm": { + "$value": "{typography.input.btn.line-height.sm}", + "source": "$btn-line-height-sm" + }, + "lg": { + "$value": "{typography.input.btn.line-height.lg}", + "source": "$btn-line-height-lg" + } } } }, @@ -54,28 +104,52 @@ "$type": "dimension", "btn": { "border": { - "width": { "source": "$btn-border-width", "$value": "{size.input.btn.border-width}" }, + "width": { + "$value": "{size.input.btn.border-width}", + "source": "$btn-border-width" + }, "radius": { - "base": { "source": "$btn-border-radius", "$value": "{size.border.radius.base}" }, - "lg": { "source": "$btn-border-radius-lg", "$value": "{size.border.radius.lg}" }, - "sm": { "source": "$btn-border-radius-sm", "$value": "{size.border.radius.sm}" } + "base": { + "$value": "{size.border.radius.base}", + "source": "$btn-border-radius" + }, + "lg": { + "$value": "{size.border.radius.lg}", + "source": "$btn-border-radius-lg" + }, + "sm": { + "$value": "{size.border.radius.sm}", + "source": "$btn-border-radius-sm" + } } }, "focus": { - "width": { "source": "$btn-focus-width", "$value": "2px" }, + "width": { + "$value": "2px", + "source": "$btn-focus-width" + }, "border-radius": { "base": { - "source": "$btn-focus-border-radius", - "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})" + "$value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})", + "source": "$btn-focus-border-radius" }, - "lg": { "source": "$btn-focus-border-radius-lg", "$value": "{size.btn.focus.border-radius.base}" }, - "sm": { "source": "$btn-focus-border-radius-sm", "$value": "{size.btn.border.radius.base}" } + "lg": { + "$value": "{size.btn.focus.border-radius.base}", + "source": "$btn-focus-border-radius-lg" + }, + "sm": { + "$value": "{size.btn.border.radius.base}", + "source": "$btn-focus-border-radius-sm" + } } } } }, "transition": { "$type": "transition", - "btn": { "source": "$btn-transition", "$value": "none" } + "btn": { + "$value": "none", + "source": "$btn-transition" + } } } diff --git a/tokens/src/core/components/Card.json b/tokens/src/core/components/Card.json index 5bb50e01b1..fb1299fb22 100644 --- a/tokens/src/core/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -3,39 +3,91 @@ "$type": "dimension", "card": { "spacer": { - "x": { "source": "$card-spacer-x", "$value": "1.25rem" }, - "y": { "source": "$card-spacer-y", "$value": ".75rem" } + "x": { + "$value": "1.25rem", + "source": "$card-spacer-x" + }, + "y": { + "$value": ".75rem", + "source": "$card-spacer-y" + } }, "margin": { - "group": { "source": "$card-group-margin", "$value": "12px" }, - "deck": { "source": "$card-deck-margin", "$value": "{spacing.card.margin.group}" }, - "deck-bottom": { "source": "$card-deck-margin-bottom", "$value": "{spacing.spacer.3}" }, - "grid": { "source": "$card-grid-margin", "$value": "{spacing.card.margin.group}" }, - "grid-bottom": { "source": "$card-grid-margin-bottom", "$value": "{spacing.spacer.3}" } + "group": { + "$value": "12px", + "source": "$card-group-margin" + }, + "deck": { + "$value": "{spacing.card.margin.group}", + "source": "$card-deck-margin" + }, + "deck-bottom": { + "$value": "{spacing.spacer.3}", + "source": "$card-deck-margin-bottom" + }, + "grid": { + "$value": "{spacing.card.margin.group}", + "source": "$card-grid-margin" + }, + "grid-bottom": { + "$value": "{spacing.spacer.3}", + "source": "$card-grid-margin-bottom" + } }, "columns": { - "margin": { "source": "$card-columns-margin", "$value": "{spacing.card.spacer.y}" }, - "count": { "source": "$card-columns-count", "$value": "3", "$type": "number" }, - "gap": { "source": "$card-columns-gap", "$value": "1.25rem" } + "margin": { + "$value": "{spacing.card.spacer.y}", + "source": "$card-columns-margin" + }, + "count": { + "$type": "number", + "$value": "3", + "source": "$card-columns-count" + }, + "gap": { + "$value": "1.25rem", + "source": "$card-columns-gap" + } }, "footer": { - "action-gap": { "source": "$card-footer-actions-gap", "$value": ".5rem" } + "action-gap": { + "$value": ".5rem", + "source": "$card-footer-actions-gap" + } }, "loading-skeleton": { - "spacer": { "source": "$loading-skeleton-spacer", "$value": ".313rem" } + "spacer": { + "$value": ".313rem", + "source": "$loading-skeleton-spacer" + } }, "logo": { "left-offset": { - "base": { "source": "$card-logo-left-offset", "$value": "1.5rem" }, - "horizontal": { "source": "$card-logo-left-offset-horizontal", "$value": ".4375rem" } + "base": { + "$value": "1.5rem", + "source": "$card-logo-left-offset" + }, + "horizontal": { + "$value": ".4375rem", + "source": "$card-logo-left-offset-horizontal" + } }, "bottom-offset": { - "base": { "source": "$card-logo-bottom-offset", "$value": "1rem" }, - "horizontal": { "source": "$card-logo-bottom-offset-horizontal", "$value": ".4375rem" } + "base": { + "$value": "1rem", + "source": "$card-logo-bottom-offset" + }, + "horizontal": { + "$value": ".4375rem", + "source": "$card-logo-bottom-offset-horizontal" + } } }, "focus": { - "border-offset": { "source": "$card-focus-border-offset", "$value": "5px" } + "border-offset": { + "$value": "5px", + "source": "$card-focus-border-offset" + } } } }, @@ -43,34 +95,70 @@ "$type": "dimension", "card": { "border": { - "width": { "source": "$card-border-width", "$value": "{size.border.width}" }, + "width": { + "$value": "{size.border.width}", + "source": "$card-border-width" + }, "radius": { - "base": { "source": "$card-border-radius", "$value": "{size.border.radius.base}" }, - "logo": { "source": "$card-logo-border-radius", "$value": ".25rem" }, - "inner": { "source": "$card-inner-border-radius", "$value": "calc({size.card.border.radius.base} - {size.card.border.width})" } + "base": { + "$value": "{size.border.radius.base}", + "source": "$card-border-radius" + }, + "logo": { + "$value": ".25rem", + "source": "$card-logo-border-radius" + }, + "inner": { + "$value": "calc({size.card.border.radius.base} - {size.card.border.width})", + "source": "$card-inner-border-radius" + } } }, "focus": { "border": { - "width": { "source": "$card-focus-border-width", "$value": "2px" }, - "radius": { "source": "$card-focus-border-radius", "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})" } + "width": { + "$value": "2px", + "source": "$card-focus-border-width" + }, + "radius": { + "$value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})", + "source": "$card-focus-border-radius" + } } }, "image": { "horizontal": { "width": { - "max": { "source": "$card-image-horizontal-max-width", "$value": "240px" }, - "min": { "source": "$card-image-horizontal-min-width", "$value": "{size.card.image.horizontal.width.max}" } + "max": { + "$value": "240px", + "source": "$card-image-horizontal-max-width" + }, + "min": { + "$value": "{size.card.image.horizontal.width.max}", + "source": "$card-image-horizontal-min-width" + } } }, "vertical": { - "max-height": { "source": "$card-image-vertical-max-height", "$value": "140px" } + "max-height": { + "$value": "140px", + "source": "$card-image-vertical-max-height" + } }, - "border-radius": { "source": "$card-image-border-radius", "$value": "{size.card.border.radius.base}" } + "border-radius": { + "$value": "{size.card.border.radius.base}", + "source": "$card-image-border-radius" + } }, "logo": { - "width": { "source": "$card-logo-width", "$value": "7.25rem" }, - "height": { "source": "$card-logo-height", "$value": "4.125rem" } + "width": { + "$value": "7.25rem", + "source": "$card-logo-width" + }, + "height": { + "$value": "4.125rem", + "source": "$card-logo-height" + } } } }, @@ -78,7 +166,10 @@ "$type": "dimension", "footer": { "text": { - "font-size": { "source": "$card-footer-text-font-size", "$value": "{typography.font.size.xs}" } + "font-size": { + "$value": "{typography.font.size.xs}", + "source": "$card-footer-text-font-size" + } } } } diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json index da74f2a87a..a2ffd739c8 100644 --- a/tokens/src/core/components/Carousel.json +++ b/tokens/src/core/components/Carousel.json @@ -3,60 +3,88 @@ "carousel": { "control": { "width": { - "base": { "source": "$carousel-control-width", "$value": "15%", "$type": "percentage" }, - "icon": { "source": "$carousel-control-icon-width", "$value": "20px", "$type": "dimension" } + "base": { + "$type": "percentage", + "$value": "15%", + "source": "$carousel-control-width" + }, + "icon": { + "$type": "dimension", + "$value": "20px", + "source": "$carousel-control-icon-width" + } } }, "indicator": { "$type": "dimension", - "width": { "source": "$carousel-indicator-width", "$value": "30px" }, + "width": { + "$value": "30px", + "source": "$carousel-indicator-width" + }, "height": { - "base": { "source": "$carousel-indicator-height", "$value": "3px" }, - "area-hit": { "source": "$carousel-indicator-hit-area-height", "$value": "10px" } + "base": { + "$value": "3px", + "source": "$carousel-indicator-height" + }, + "area-hit": { + "$value": "10px", + "source": "$carousel-indicator-hit-area-height" + } } }, - "caption-width": { "source": "$carousel-caption-width", "$value": "70%", "$type": "percentage" } + "caption-width": { + "$type": "percentage", + "$value": "70%", + "source": "$carousel-caption-width" + } } }, "spacing": { "$type": "dimension", "carousel": { - "indicator-spacer": { "source": "$carousel-indicator-spacer", "$value": "3px" } + "indicator-spacer": { + "$value": "3px", + "source": "$carousel-indicator-spacer" + } } }, "transition": { "$type": "transition", "carousel": { "base": { - "source": "$carousel-transition", "$value": { "property": "transform", "duration": "{transition.carousel.duration}", "timingFunction": "ease-in-out", "delay": "0ms", "behavior": "normal" - } + }, + "source": "$carousel-transition" + }, + "duration": { + "$type": "duration", + "$value": ".6s", + "source": "$carousel-transition-duration" }, - "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" }, "indicator": { - "source": "$carousel-indicator-transition", "$value": { "property": "opacity", "duration": "{transition.carousel.duration}", "timingFunction": "ease", "delay": "0ms", "behavior": "normal" - } + }, + "source": "$carousel-indicator-transition" }, "control": { - "source": "$carousel-control-transition", "$value": { "property": "opacity", "duration": ".15s", "timingFunction": "ease", "delay": "0ms", "behavior": "normal" - } + }, + "source": "$carousel-control-transition" } } } diff --git a/tokens/src/core/components/Chip.json b/tokens/src/core/components/Chip.json index a6699c402e..c0a685f33b 100644 --- a/tokens/src/core/components/Chip.json +++ b/tokens/src/core/components/Chip.json @@ -3,31 +3,64 @@ "$type": "dimension", "chip": { "margin": { - "base": { "source": "$chip-margin", "$value": ".125rem" }, - "icon": { "source": "$chip-icon-margin", "$value": ".25rem" } + "base": { + "$value": ".125rem", + "source": "$chip-margin" + }, + "icon": { + "$value": ".25rem", + "source": "$chip-icon-margin" + } }, "padding": { - "y": { "source": "$chip-padding-y", "$value": "1px" }, - "x": { "source": "$chip-padding-x", "$value": ".5rem" } + "y": { + "$value": "1px", + "source": "$chip-padding-y" + }, + "x": { + "$value": ".5rem", + "source": "$chip-padding-x" + } }, "outline": { "selected-distance": { - "light": { "source": "$chip-light-selected-outline-distance", "$value": "3px" }, - "dark": { "source": "$chip-dark-selected-outline-distance", "$value": "3px" } + "light": { + "$value": "3px", + "source": "$chip-light-selected-outline-distance" + }, + "dark": { + "$value": "3px", + "source": "$chip-dark-selected-outline-distance" + } }, "focus-distance": { - "light": { "source": "$chip-light-focus-outline-distance", "$value": ".313rem" }, - "dark": { "source": "$chip-dark-focus-outline-distance", "$value": ".313rem" } + "light": { + "$value": ".313rem", + "source": "$chip-light-focus-outline-distance" + }, + "dark": { + "$value": ".313rem", + "source": "$chip-dark-focus-outline-distance" + } }, - "width": { "source": "$chip-outline-width", "$value": "3px" } + "width": { + "$value": "3px", + "source": "$chip-outline-width" + } } } }, "size": { "$type": "dimension", "chip": { - "border-radius": { "source": "$chip-border-radius", "$value": ".375rem" }, - "icon": { "source": "$chip-icon-size", "$value": "1.5rem" } + "border-radius": { + "$value": ".375rem", + "source": "$chip-border-radius" + }, + "icon": { + "$value": "1.5rem", + "source": "$chip-icon-size" + } } } } diff --git a/tokens/src/core/components/ChipCarousel.json b/tokens/src/core/components/ChipCarousel.json index ccb1edafd4..f1af5afeae 100644 --- a/tokens/src/core/components/ChipCarousel.json +++ b/tokens/src/core/components/ChipCarousel.json @@ -2,11 +2,20 @@ "spacing": { "$type": "dimension", "chip-carousel": { - "controls-top-offset": { "source": "$chip-carousel-controls-top-offset", "$value": ".375rem" }, + "controls-top-offset": { + "$value": ".375rem", + "source": "$chip-carousel-controls-top-offset" + }, "container": { "padding": { - "x": { "source": "$chip-carousel-container-padding-x", "$value": ".625rem" }, - "y": { "source": "$chip-carousel-container-padding-y", "$value": ".313rem" } + "x": { + "$value": ".625rem", + "source": "$chip-carousel-container-padding-x" + }, + "y": { + "$value": ".313rem", + "source": "$chip-carousel-container-padding-y" + } } } } diff --git a/tokens/src/core/components/CloseButton.json b/tokens/src/core/components/CloseButton.json index 6308930b30..12277a1df2 100644 --- a/tokens/src/core/components/CloseButton.json +++ b/tokens/src/core/components/CloseButton.json @@ -2,8 +2,16 @@ "typography": { "close-button": { "font": { - "size": { "source": "$close-font-size", "$value": "calc({typography.font.size.base} * 1.5)", "$type": "dimension" }, - "weight": { "source": "$close-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" } + "size": { + "$type": "dimension", + "$value": "calc({typography.font.size.base} * 1.5)", + "source": "$close-font-size" + }, + "weight": { + "$type": "fontWeight", + "$value": "{typography.font.weight.bold}", + "source": "$close-font-weight" + } } } } diff --git a/tokens/src/core/components/Code.json b/tokens/src/core/components/Code.json index 4e03d1613c..6fc1ac5b1f 100644 --- a/tokens/src/core/components/Code.json +++ b/tokens/src/core/components/Code.json @@ -1,12 +1,23 @@ { "typography": { "code": { - "font-size": { "source": "$code-font-size", "$value": "{typography.font.size.sm}", "$type": "percentage" }, + "font-size": { + "$type": "percentage", + "$value": "{typography.font.size.sm}", + "source": "$code-font-size" + }, "kbd": { - "font-size": { "source": "$kbd-font-size", "$value": "{typography.code.font-size}", "$type": "dimension" }, + "font-size": { + "$type": "dimension", + "$value": "{typography.code.font-size}", + "source": "$kbd-font-size" + }, "nested": { "$type": "fontWeight", - "font-weight": { "source": "$nested-kbd-font-weight", "$value": "{typography.font.weight.bold}" } + "font-weight": { + "$value": "{typography.font.weight.bold}", + "source": "$nested-kbd-font-weight" + } } } } @@ -16,8 +27,14 @@ "code": { "kbd": { "padding": { - "y": { "source": "$kbd-padding-y", "$value": ".2rem" }, - "x": { "source": "$kbd-padding-x", "$value": ".4rem" } + "y": { + "$value": ".2rem", + "source": "$kbd-padding-y" + }, + "x": { + "$value": ".4rem", + "source": "$kbd-padding-x" + } } } } @@ -27,7 +44,10 @@ "code": { "pre": { "scrollable": { - "max-height": { "source": "$pre-scrollable-max-height", "$value": "340px" } + "max-height": { + "$value": "340px", + "source": "$pre-scrollable-max-height" + } } } } diff --git a/tokens/src/core/components/Collapsible.json b/tokens/src/core/components/Collapsible.json index 91cc84d3f9..239bb8c2b8 100644 --- a/tokens/src/core/components/Collapsible.json +++ b/tokens/src/core/components/Collapsible.json @@ -5,19 +5,46 @@ "card": { "spacer": { "y": { - "base": { "source": "$collapsible-card-spacer-y", "$value": ".5rem" }, - "lg": { "source": "$collapsible-card-spacer-y-lg", "$value": "{spacing.card.spacer.y}" } + "base": { + "$value": ".5rem", + "source": "$collapsible-card-spacer-y" + }, + "lg": { + "$value": "{spacing.card.spacer.y}", + "source": "$collapsible-card-spacer-y-lg" + } }, "x": { - "base": { "source": "$collapsible-card-spacer-x", "$value": ".5rem" }, - "lg": { "source": "$collapsible-card-spacer-x-lg", "$value": "{spacing.card.spacer.x}" } + "base": { + "$value": ".5rem", + "source": "$collapsible-card-spacer-x" + }, + "lg": { + "$value": "{spacing.card.spacer.x}", + "source": "$collapsible-card-spacer-x-lg" + } + }, + "left-body": { + "$value": ".75rem", + "source": "$collapsible-card-body-spacer-left" + }, + "icon": { + "$value": "2.5rem", + "source": "$collapsible-card-spacer-icon" }, - "left-body": { "source": "$collapsible-card-body-spacer-left", "$value": ".75rem" }, - "icon": { "source": "$collapsible-card-spacer-icon", "$value": "2.5rem" }, "basic": { - "y": { "source": "$collapsible-basic-spacer-y", "$value": ".5rem" }, - "x": { "source": "$collapsible-basic-spacer-x", "$value": ".5rem" }, - "icon": { "source": "$collapsible-basic-spacer-icon", "$value": ".625rem" } + "y": { + "$value": ".5rem", + "source": "$collapsible-basic-spacer-y" + }, + "x": { + "$value": ".5rem", + "source": "$collapsible-basic-spacer-x" + }, + "icon": { + "$value": ".625rem", + "source": "$collapsible-basic-spacer-icon" + } } } } diff --git a/tokens/src/core/components/ColorPicker.json b/tokens/src/core/components/ColorPicker.json index 35ed3a43a8..8a6cbbe471 100644 --- a/tokens/src/core/components/ColorPicker.json +++ b/tokens/src/core/components/ColorPicker.json @@ -2,8 +2,14 @@ "size": { "$type": "dimension", "color-picker": { - "sm": { "source": "$picker-size-sm", "$value": "2rem" }, - "md": { "source": "$picker-size-md", "$value": "calc(1.3333em + 1.125rem + 2px)" } + "sm": { + "$value": "2rem", + "source": "$picker-size-sm" + }, + "md": { + "$value": "calc(1.3333em + 1.125rem + 2px)", + "source": "$picker-size-md" + } } } } diff --git a/tokens/src/core/components/Container.json b/tokens/src/core/components/Container.json index fc72b78a5e..a760172e2b 100644 --- a/tokens/src/core/components/Container.json +++ b/tokens/src/core/components/Container.json @@ -3,11 +3,26 @@ "$type": "dimension", "container": { "max-width": { - "xs": { "source": "$max-width-xs", "$value": "464px" }, - "sm": { "source": "$max-width-sm", "$value": "708px" }, - "md": { "source": "$max-width-md", "$value": "952px" }, - "lg": { "source": "$max-width-lg", "$value": "1192px" }, - "xl": { "source": "$max-width-xl", "$value": "1440px" } + "xs": { + "$value": "464px", + "source": "$max-width-xs" + }, + "sm": { + "$value": "708px", + "source": "$max-width-sm" + }, + "md": { + "$value": "952px", + "source": "$max-width-md" + }, + "lg": { + "$value": "1192px", + "source": "$max-width-lg" + }, + "xl": { + "$value": "1440px", + "source": "$max-width-xl" + } } } } diff --git a/tokens/src/core/components/DataTable.json b/tokens/src/core/components/DataTable.json index 75bf84d8e2..b95a910d93 100644 --- a/tokens/src/core/components/DataTable.json +++ b/tokens/src/core/components/DataTable.json @@ -2,15 +2,27 @@ "size": { "$type": "dimension", "data-table": { - "border": { "source": "$data-table-border", "$value": "2px" }, + "border": { + "$value": "2px", + "source": "$data-table-border" + }, "dropdown": { "pagination": { - "max-height": { "source": "$data-table-pagination-dropdown-max-height", "$value": "60vh" }, - "min-width": { "source": "$data-table-pagination-dropdown-min-width", "$value": "6rem" } + "max-height": { + "$value": "60vh", + "source": "$data-table-pagination-dropdown-max-height" + }, + "min-width": { + "$value": "6rem", + "source": "$data-table-pagination-dropdown-min-width" + } } }, "layout": { - "sidebar-width": { "source": "$data-table-layout-sidebar-width", "$value": "12rem" } + "sidebar-width": { + "$value": "12rem", + "source": "$data-table-layout-sidebar-width" + } } } }, @@ -18,18 +30,31 @@ "data-table": { "padding": { "$type": "dimension", - "x": { "source": "$data-table-padding-x", "$value": ".75rem" }, - "y": { "source": "$data-table-padding-y", "$value": ".75rem" }, - "small": { "source": "$data-table-padding-small", "$value": ".5rem" }, + "x": { + "$value": ".75rem", + "source": "$data-table-padding-x" + }, + "y": { + "$value": ".75rem", + "source": "$data-table-padding-y" + }, + "small": { + "$value": ".5rem", + "source": "$data-table-padding-small" + }, "cell": { - "source": "$data-table-cell-padding", "$value": { "x": ".5rem", "y": ".75rem" - } + }, + "source": "$data-table-cell-padding" } }, - "footer-position": { "source": "$data-table-footer-position", "$value": "center", "$type": "position" } + "footer-position": { + "$type": "position", + "$value": "center", + "source": "$data-table-footer-position" + } } } } diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json index f125a25cfc..cfd8d788ea 100644 --- a/tokens/src/core/components/Dropdown.json +++ b/tokens/src/core/components/Dropdown.json @@ -1,24 +1,39 @@ { "typography": { "dropdown": { - "font-size": { "source": "$dropdown-font-size", "$value": "{typography.font.size.base}", "$type": "dimension" }, + "font-size": { + "$type": "dimension", + "$value": "{typography.font.size.base}", + "source": "$dropdown-font-size" + }, "item": { "$type": "textDecoration", - "text-decoration": { "$value": "none" } + "text-decoration": { + "$value": "none" + } } } }, "size": { "$type": "dimension", "dropdown": { - "min-width": { "source": "$dropdown-min-width", "$value": "18rem" }, + "min-width": { + "$value": "18rem", + "source": "$dropdown-min-width" + }, "border": { - "width": { "source": "$dropdown-border-width", "$value": "{size.border.width}" }, + "width": { + "$value": "{size.border.width}", + "source": "$dropdown-border-width" + }, "radius": { - "base": { "source": "$dropdown-border-radius", "$value": "{size.border.radius.base}" }, + "base": { + "$value": "{size.border.radius.base}", + "source": "$dropdown-border-radius" + }, "inner": { - "source": "$dropdown-inner-border-radius", - "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})" + "$value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})", + "source": "$dropdown-inner-border-radius" } } } @@ -27,36 +42,60 @@ "spacing": { "$type": "dimension", "dropdown": { - "spacer": { "source": "$dropdown-spacer", "$value": ".125rem" }, + "spacer": { + "$value": ".125rem", + "source": "$dropdown-spacer" + }, "padding": { "x": { - "base": { "source": "$dropdown-padding-x", "$value": "0" }, - "item": { "source": "$dropdown-item-padding-x", "$value": "1rem" } + "base": { + "$value": "0", + "source": "$dropdown-padding-x" + }, + "item": { + "$value": "1rem", + "source": "$dropdown-item-padding-x" + } }, "y": { - "base": { "source": "$dropdown-padding-y", "$value": ".5rem" }, - "item": { "source": "$dropdown-item-padding-y", "$value": ".25rem" } + "base": { + "$value": ".5rem", + "source": "$dropdown-padding-y" + }, + "item": { + "$value": ".25rem", + "source": "$dropdown-item-padding-y" + } }, "header": { - "source": "$dropdown-header-padding", "$value": { "x": "{spacing.dropdown.padding.x.item}", "y": ".5rem" - } + }, + "source": "$dropdown-header-padding" } }, "divider": { - "margin-y": { "source": "$dropdown-divider-margin-y", "$value": "calc({spacing.spacer.base} / 2)" } + "margin-y": { + "$value": "calc({spacing.spacer.base} / 2)", + "source": "$dropdown-divider-margin-y" + } }, "close-container": { - "top": { "source": "$modal-close-container-top", "$value": ".625rem" } + "top": { + "$value": ".625rem", + "source": "$modal-close-container-top" + } } } }, "elevation": { "$type": "number", "dropdown": { - "zindex": { "source": "$zindex-dropdown", "$value": "1000" } + "zindex": { + "$value": "1000", + "source": "$zindex-dropdown" + } } } } diff --git a/tokens/src/core/components/Dropzone.json b/tokens/src/core/components/Dropzone.json index 9cfcb28071..63a433b9f1 100644 --- a/tokens/src/core/components/Dropzone.json +++ b/tokens/src/core/components/Dropzone.json @@ -3,16 +3,25 @@ "$type": "dimension", "dropzone": { "restriction-msg": { - "font-size": { "source": "$dropzone-restriction-msg-font-size", "$value": "{typography.font.size.xs}" } + "font-size": { + "$value": "{typography.font.size.xs}", + "source": "$dropzone-restriction-msg-font-size" + } } } }, "spacing": { "$type": "dimension", "dropzone": { - "padding": { "source": "$dropzone-padding", "$value": "1.5rem" }, + "padding": { + "$value": "1.5rem", + "source": "$dropzone-padding" + }, "border": { - "base": { "source": "$dropzone-border-default", "$value": "1px" } + "base": { + "$value": "1px", + "source": "$dropzone-border-default" + } } } } diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json index aa14828016..8c1ef8fb32 100644 --- a/tokens/src/core/components/Form/other.json +++ b/tokens/src/core/components/Form/other.json @@ -2,12 +2,24 @@ "other": { "form": { "control": { - "cursor": { "source": "$custom-control-cursor", "$value": "auto", "$type": "cursorStyle" }, - "range-track-cursor": { "source": "$custom-range-track-cursor", "$value": "pointer", "$type": "cursorStyle" }, + "cursor": { + "$type": "cursorStyle", + "$value": "auto", + "source": "$custom-control-cursor" + }, + "range-track-cursor": { + "$type": "cursorStyle", + "$value": "pointer", + "source": "$custom-range-track-cursor" + }, "custom-file": { "$type": "text", - "lang": { "$value": "en" }, - "content": { "$value": "Browse" } + "lang": { + "$value": "en" + }, + "content": { + "$value": "Browse" + } } } } diff --git a/tokens/src/core/components/Form/size.json b/tokens/src/core/components/Form/size.json index dcf0e043e5..c90aea3a6f 100644 --- a/tokens/src/core/components/Form/size.json +++ b/tokens/src/core/components/Form/size.json @@ -5,67 +5,102 @@ "$type": "dimension", "height": { "base": { - "source": "$input-height", - "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})" + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})", + "source": "$input-height" }, "sm": { - "source": "$input-height-sm", - "$value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})" + "$value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})", + "source": "$input-height-sm" }, "lg": { - "source": "$input-height-lg", - "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})" + "$value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})", + "source": "$input-height-lg" }, "inner": { "base": { - "source": "$input-height-inner", - "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", + "source": "$input-height-inner" }, "half": { - "source": "$input-height-inner-half", - "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})" + "$value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})", + "source": "$input-height-inner-half" }, "quarter": { - "source": "$input-height-inner-quarter", - "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))" + "$value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))", + "source": "$input-height-inner-quarter" } }, - "border": { "source": "$input-height-border", "$value": "calc({size.form.input.width.border} * 2)" } + "border": { + "$value": "calc({size.form.input.width.border} * 2)", + "source": "$input-height-border" + } }, "width": { - "hover": { "source": "$input-hover-width", "$value": "0.063rem" }, - "focus": { "source": "$input-focus-width", "$value": "0.063rem" }, - "border": { "source": "$input-border-width", "$value": "{size.input.btn.border-width}" } + "hover": { + "$value": "0.063rem", + "source": "$input-hover-width" + }, + "focus": { + "$value": "0.063rem", + "source": "$input-focus-width" + }, + "border": { + "$value": "{size.input.btn.border-width}", + "source": "$input-border-width" + } }, "radius": { "border": { - "base": { "source": "$input-border-radius", "$value": "{size.border.radius.base}" }, - "lg": { "source": "$input-border-radius-lg", "$value": "{size.border.radius.lg}" }, - "sm": { "source": "$input-border-radius-sm", "$value": "{size.border.radius.sm}" } + "base": { + "$value": "{size.border.radius.base}", + "source": "$input-border-radius" + }, + "lg": { + "$value": "{size.border.radius.lg}", + "source": "$input-border-radius-lg" + }, + "sm": { + "$value": "{size.border.radius.sm}", + "source": "$input-border-radius-sm" + } } } }, "control": { "indicator": { - "base": { "source": "$custom-control-indicator-size", "$value": "1.25rem", "$type": "dimension" }, - "bg": { "source": "$custom-control-indicator-bg-size", "$value": "100%", "$type": "percentage" }, + "base": { + "$type": "dimension", + "$value": "1.25rem", + "source": "$custom-control-indicator-size" + }, + "bg": { + "$type": "percentage", + "$value": "100%", + "source": "$custom-control-indicator-bg-size" + }, "border": { "$type": "dimension", - "width": { "source": "$custom-control-indicator-border-width", "$value": "0.125rem" } + "width": { + "$value": "0.125rem", + "source": "$custom-control-indicator-border-width" + } } }, "switch": { "$type": "dimension", - "width": { "source": "$custom-switch-width", "$value": "calc({size.form.control.indicator.base} * 1.75)" }, + "width": { + "$value": "calc({size.form.control.indicator.base} * 1.75)", + "source": "$custom-switch-width" + }, "indicator": { "base": { - "source": "$custom-switch-indicator-size", - "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)" + "$value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)", + "source": "$custom-switch-indicator-size" }, "border": { "radius": { - "source": "$custom-switch-indicator-border-radius", - "$value": "calc({size.form.control.indicator.base} / 2)" + "$value": "calc({size.form.control.indicator.base} / 2)", + "source": "$custom-switch-indicator-border-radius" } } } @@ -73,107 +108,196 @@ "select": { "$type": "dimension", "height": { - "base": { "source": "$custom-select-height", "$value": "{size.form.input.height.base}" }, - "lg": { "source": "$custom-select-height-lg", "$value": "{size.form.input.height.lg}" }, - "sm": { "source": "$custom-select-height-sm", "$value": "{size.form.input.height.sm}" } + "base": { + "$value": "{size.form.input.height.base}", + "source": "$custom-select-height" + }, + "lg": { + "$value": "{size.form.input.height.lg}", + "source": "$custom-select-height-lg" + }, + "sm": { + "$value": "{size.form.input.height.sm}", + "source": "$custom-select-height-sm" + } }, "feedback": { "icon": { - "source": "$custom-select-feedback-icon-size", - "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}" + "$value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}", + "source": "$custom-select-feedback-icon-size" } }, "border": { "width": { - "base": { "source": "$custom-select-border-width", "$value": "{size.form.input.width.border}" } + "base": { + "$value": "{size.form.input.width.border}", + "source": "$custom-select-border-width" + } }, - "radius": { "source": "$custom-select-border-radius", "$value": "{size.border.radius.base}" } + "radius": { + "$value": "{size.border.radius.base}", + "source": "$custom-select-border-radius" + } } }, "range": { "track": { - "width": { "source": "$custom-range-track-width", "$value": "100%", "$type": "percentage" }, - "height": { "source": "$custom-range-track-height", "$value": ".5rem", "$type": "dimension" }, + "width": { + "$type": "percentage", + "$value": "100%", + "source": "$custom-range-track-width" + }, + "height": { + "$type": "dimension", + "$value": ".5rem", + "source": "$custom-range-track-height" + }, "border": { "$type": "dimension", - "radius": { "source": "$custom-range-track-border-radius", "$value": "1rem" } + "radius": { + "$value": "1rem", + "source": "$custom-range-track-border-radius" + } } }, "thumb": { "$type": "dimension", - "width": { "source": "$custom-range-thumb-width", "$value": "1rem" }, - "height": { "source": "$custom-range-thumb-height", "$value": "{size.form.control.range.thumb.width}" }, + "width": { + "$value": "1rem", + "source": "$custom-range-thumb-width" + }, + "height": { + "$value": "{size.form.control.range.thumb.width}", + "source": "$custom-range-thumb-height" + }, "border": { - "base": { "source": "$custom-range-thumb-border", "$value": "0" }, - "radius": { "source": "$custom-range-thumb-border-radius", "$value": "1rem" } + "base": { + "$value": "0", + "source": "$custom-range-thumb-border" + }, + "radius": { + "$value": "1rem", + "source": "$custom-range-thumb-border-radius" + } }, "focus": { - "width": { "source": "$custom-range-thumb-focus-box-shadow-width", "$value": "{size.form.input.width.focus}" } + "width": { + "$value": "{size.form.input.width.focus}", + "source": "$custom-range-thumb-focus-box-shadow-width" + } } } }, "file": { "$type": "dimension", - "width": { "source": "$custom-file-border-width", "$value": "{size.form.input.width.border}" }, + "width": { + "$value": "{size.form.input.width.border}", + "source": "$custom-file-border-width" + }, "height": { - "base": { "source": "$custom-file-height", "$value": "{size.form.input.height.base}" }, - "inner": { "source": "$custom-file-height-inner", "$value": "{size.form.input.height.inner.base}" } + "base": { + "$value": "{size.form.input.height.base}", + "source": "$custom-file-height" + }, + "inner": { + "$value": "{size.form.input.height.inner.base}", + "source": "$custom-file-height-inner" + } }, "border": { - "radius": { "source": "$custom-file-border-radius", "$value": "{size.form.input.radius.border.base}" } + "radius": { + "$value": "{size.form.input.radius.border.base}", + "source": "$custom-file-border-radius" + } } }, "icon": { "$type": "dimension", - "width": { "source": "$form-control-icon-width", "$value": "2rem" } + "width": { + "$value": "2rem", + "source": "$form-control-icon-width" + } }, "border": { "checkbox": { "$type": "dimension", "indicator": { - "radius": { "source": "$custom-checkbox-indicator-border-radius", "$value": "0" } + "radius": { + "$value": "0", + "source": "$custom-checkbox-indicator-border-radius" + } } }, "radio": { "$type": "percentage", "indicator": { - "radius": { "source": "$custom-radio-indicator-border-radius", "$value": "50%" } + "radius": { + "$value": "50%", + "source": "$custom-radio-indicator-border-radius" + } } } } }, "grid": { "$type": "dimension", - "gutter-width": { "source": "$form-grid-gutter-width", "$value": "0.625rem" } + "gutter-width": { + "$value": "0.625rem", + "source": "$form-grid-gutter-width" + } }, "autosuggest": { "$type": "dimension", "icon": { - "width": { "source": "$form-autosuggest-icon-width", "$value": "2.4rem" }, - "height": { "source": "$form-autosuggest-icon-height", "$value": "{size.form.autosuggest.icon.width}" } + "width": { + "$value": "2.4rem", + "source": "$form-autosuggest-icon-width" + }, + "height": { + "$value": "{size.form.autosuggest.icon.width}", + "source": "$form-autosuggest-icon-height" + } }, "spinner": { - "width": { "source": "$form-autosuggest-spinner-width", "$value": "1.25rem" }, - "height": { "source": "$form-autosuggest-spinner-height", "$value": "{size.form.autosuggest.spinner.width}" } + "width": { + "$value": "1.25rem", + "source": "$form-autosuggest-spinner-width" + }, + "height": { + "$value": "{size.form.autosuggest.spinner.width}", + "source": "$form-autosuggest-spinner-height" + } }, "border": { - "width": { "source": "$form-autosuggest-border-width", "$value": ".125rem" } + "width": { + "$value": ".125rem", + "source": "$form-autosuggest-border-width" + } } }, "border": { "$type": "dimension", "radius": { "check": { - "focus": { "source": "$form-check-focus-border-radius", "$value": ".0625rem" } + "focus": { + "$value": ".0625rem", + "source": "$form-check-focus-border-radius" + } }, - "width": { "source": "$form-check-border-width", "$value": ".125rem" } + "width": { + "$value": ".125rem", + "source": "$form-check-border-width" + } } }, "feedback": { "$type": "dimension", "tooltip": { "border": { - "radius": { "source": "$form-feedback-tooltip-border-radius", "$value": "{size.border.radius.base}" } + "radius": { + "$value": "{size.border.radius.base}", + "source": "$form-feedback-tooltip-border-radius" + } } } } diff --git a/tokens/src/core/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json index 065a110f54..059bc97fc0 100644 --- a/tokens/src/core/components/Form/spacing.json +++ b/tokens/src/core/components/Form/spacing.json @@ -5,104 +5,191 @@ "input": { "padding": { "y": { - "base": { "source": "$input-padding-y", "$value": "{spacing.input.btn.padding.y}" }, - "sm": { "source": "$input-padding-y-sm", "$value": "{spacing.input.btn.padding.sm.y}" }, - "lg": { "source": "$input-padding-y-lg", "$value": "{spacing.input.btn.padding.lg.y}" } + "base": { + "$value": "{spacing.input.btn.padding.y}", + "source": "$input-padding-y" + }, + "sm": { + "$value": "{spacing.input.btn.padding.sm.y}", + "source": "$input-padding-y-sm" + }, + "lg": { + "$value": "{spacing.input.btn.padding.lg.y}", + "source": "$input-padding-y-lg" + } }, "x": { - "base": { "source": "$input-padding-x", "$value": "{spacing.input.btn.padding.x}" }, - "sm": { "source": "$input-padding-x-sm", "$value": "{spacing.input.btn.padding.sm.x}" }, - "lg": { "source": "$input-padding-x-lg", "$value": "{spacing.input.btn.padding.lg.x}" } + "base": { + "$value": "{spacing.input.btn.padding.x}", + "source": "$input-padding-x" + }, + "sm": { + "$value": "{spacing.input.btn.padding.sm.x}", + "source": "$input-padding-x-sm" + }, + "lg": { + "$value": "{spacing.input.btn.padding.lg.x}", + "source": "$input-padding-x-lg" + } } }, "check": { - "gutter": { "source": "$form-check-input-gutter", "$value": "1.25rem" }, + "gutter": { + "$value": "1.25rem", + "source": "$form-check-input-gutter" + }, "margin": { "x": { - "base": { "source": "$form-check-input-margin-x", "$value": ".25rem" }, - "inline": { "source": "$form-check-inline-input-margin-x", "$value": ".3125rem" } + "base": { + "$value": ".25rem", + "source": "$form-check-input-margin-x" + }, + "inline": { + "$value": ".3125rem", + "source": "$form-check-inline-input-margin-x" + } }, - "y": { "source": "$form-check-input-margin-y", "$value": ".3rem" } + "y": { + "$value": ".3rem", + "source": "$form-check-input-margin-y" + } } } }, "text": { "margin": { - "top": { "source": "$form-text-margin-top", "$value": ".25rem" } + "top": { + "$value": ".25rem", + "source": "$form-text-margin-top" + } } }, "check": { "inline": { "margin": { - "x": { "source": "$form-check-inline-margin-x", "$value": ".75rem" } + "x": { + "$value": ".75rem", + "source": "$form-check-inline-margin-x" + } } }, "position": { - "axis": { "source": "$form-check-position-axis", "$value": ".375rem" } + "axis": { + "$value": ".375rem", + "source": "$form-check-position-axis" + } } }, "group": { "margin": { - "bottom": { "source": "$form-group-margin-bottom", "$value": "1rem" } + "bottom": { + "$value": "1rem", + "source": "$form-group-margin-bottom" + } } }, "control": { - "gutter": { "source": "$custom-control-gutter", "$value": ".5rem" }, + "gutter": { + "$value": ".5rem", + "source": "$custom-control-gutter" + }, "spacer": { - "x": { "source": "$custom-control-spacer-x", "$value": "1rem" } + "x": { + "$value": "1rem", + "source": "$custom-control-spacer-x" + } }, "select": { "padding": { "y": { - "base": { "source": "$custom-select-padding-y", "$value": "{spacing.form.input.padding.y.base}" }, - "sm": { "source": "$custom-select-padding-y-sm", "$value": "{spacing.form.input.padding.y.sm}" }, - "lg": { "source": "$custom-select-padding-y-lg", "$value": "{spacing.form.input.padding.y.lg}" } + "base": { + "$value": "{spacing.form.input.padding.y.base}", + "source": "$custom-select-padding-y" + }, + "sm": { + "$value": "{spacing.form.input.padding.y.sm}", + "source": "$custom-select-padding-y-sm" + }, + "lg": { + "$value": "{spacing.form.input.padding.y.lg}", + "source": "$custom-select-padding-y-lg" + } }, "x": { - "base": { "source": "$custom-select-padding-x", "$value": "{spacing.form.input.padding.x.base}" }, - "sm": { "source": "$custom-select-padding-x-sm", "$value": "{spacing.form.input.padding.x.sm}" }, - "lg": { "source": "$custom-select-padding-x-lg", "$value": "{spacing.form.input.padding.x.lg}" } + "base": { + "$value": "{spacing.form.input.padding.x.base}", + "source": "$custom-select-padding-x" + }, + "sm": { + "$value": "{spacing.form.input.padding.x.sm}", + "source": "$custom-select-padding-x-sm" + }, + "lg": { + "$value": "{spacing.form.input.padding.x.lg}", + "source": "$custom-select-padding-x-lg" + } } }, "indicator": { - "padding": { "source": "$custom-select-indicator-padding", "$value": "1rem" } + "padding": { + "$value": "1rem", + "source": "$custom-select-indicator-padding" + } }, "feedback": { "icon": { "padding": { "right": { - "source": "$custom-select-feedback-icon-padding-right", - "$value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})" + "$value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", + "source": "$custom-select-feedback-icon-padding-right" } }, "position": { - "source": "$custom-select-feedback-icon-position", "$value": { "position-y": "center", "position-x": "right", "offset-x": "calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})", "offset-y": "0" - } + }, + "source": "$custom-select-feedback-icon-position" } }, "margin": { - "top": { "source": "$form-feedback-margin-top", "$value": "{spacing.form.text.margin.top}" } + "top": { + "$value": "{spacing.form.text.margin.top}", + "source": "$form-feedback-margin-top" + } }, "tooltip": { "padding": { - "y": { "source": "$form-feedback-tooltip-padding-y", "$value": ".25rem" }, - "x": { "source": "$form-feedback-tooltip-padding-x", "$value": ".5rem" } + "y": { + "$value": ".25rem", + "source": "$form-feedback-tooltip-padding-y" + }, + "x": { + "$value": ".5rem", + "source": "$form-feedback-tooltip-padding-x" + } } } }, "icon": { - "padding": { "source": "$select-icon-padding", "$value": ".5625rem" } + "padding": { + "$value": ".5625rem", + "source": "$select-icon-padding" + } } }, "file": { "padding": { - "y": { "source": "$custom-file-padding-y", "$value": "{spacing.form.input.padding.y.base}" }, - "x": { "source": "$custom-file-padding-x", "$value": "{spacing.form.input.padding.x.base}" } + "y": { + "$value": "{spacing.form.input.padding.y.base}", + "source": "$custom-file-padding-y" + }, + "x": { + "$value": "{spacing.form.input.padding.x.base}", + "source": "$custom-file-padding-x" + } } } } diff --git a/tokens/src/core/components/Form/transition.json b/tokens/src/core/components/Form/transition.json index 14b7c2afc5..bf07eefc51 100644 --- a/tokens/src/core/components/Form/transition.json +++ b/tokens/src/core/components/Form/transition.json @@ -3,7 +3,6 @@ "$type": "transition", "form": { "input": { - "source": "$input-transition", "$value": [ { "property": "border-color", @@ -19,10 +18,10 @@ "delay": "0s", "behavior": "normal" } - ] + ], + "source": "$input-transition" }, "control": { - "source": "$custom-forms-transition", "$value": [ { "property": "background-color", @@ -45,7 +44,8 @@ "delay": "0s", "behavior": "normal" } - ] + ], + "source": "$custom-forms-transition" } } } diff --git a/tokens/src/core/components/Form/typography.json b/tokens/src/core/components/Form/typography.json index dd4973969b..b6159e53c4 100644 --- a/tokens/src/core/components/Form/typography.json +++ b/tokens/src/core/components/Form/typography.json @@ -3,54 +3,123 @@ "form": { "input": { "font": { - "family": { "source": "$input-font-family", "$value": "{typography.input.btn.font.family}", "$type": "fontFamily" }, + "family": { + "$type": "fontFamily", + "$value": "{typography.input.btn.font.family}", + "source": "$input-font-family" + }, "size": { "$type": "dimension", - "base": { "source": "$input-font-size", "$value": "{typography.input.btn.font.size.base}" }, - "sm": { "source": "$input-font-size-sm", "$value": "{typography.input.btn.font.size.sm}" }, - "lg": { "source": "$input-font-size-lg", "$value": "{typography.input.btn.font.size.lg}" } + "base": { + "$value": "{typography.input.btn.font.size.base}", + "source": "$input-font-size" + }, + "sm": { + "$value": "{typography.input.btn.font.size.sm}", + "source": "$input-font-size-sm" + }, + "lg": { + "$value": "{typography.input.btn.font.size.lg}", + "source": "$input-font-size-lg" + } }, - "weight": { "source": "$input-font-weight", "$value": "{typography.font.weight.base}", "$type": "fontWeight" } + "weight": { + "$type": "fontWeight", + "$value": "{typography.font.weight.base}", + "source": "$input-font-weight" + } }, "line-height": { "$type": "number", - "base": { "source": "$input-line-height", "$value": "{typography.input.btn.line-height.base}" }, - "sm": { "source": "$input-line-height-sm", "$value": "{typography.input.btn.line-height.sm}" }, - "lg": { "source": "$input-line-height-lg", "$value": "{typography.input.btn.line-height.lg}" } + "base": { + "$value": "{typography.input.btn.line-height.base}", + "source": "$input-line-height" + }, + "sm": { + "$value": "{typography.input.btn.line-height.sm}", + "source": "$input-line-height-sm" + }, + "lg": { + "$value": "{typography.input.btn.line-height.lg}", + "source": "$input-line-height-lg" + } } }, "control": { "select": { "font": { - "family": { "source": "$custom-select-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" }, + "family": { + "$type": "fontFamily", + "$value": "{typography.form.input.font.family}", + "source": "$custom-select-font-family" + }, "size": { "$type": "dimension", - "base": { "source": "$custom-select-font-size", "$value": "{typography.form.input.font.size.base}" }, - "sm": { "source": "$custom-select-font-size-sm", "$value": "{typography.form.input.font.size.sm}" }, - "lg": { "source": "$custom-select-font-size-lg", "$value": "{typography.form.input.font.size.lg}" } + "base": { + "$value": "{typography.form.input.font.size.base}", + "source": "$custom-select-font-size" + }, + "sm": { + "$value": "{typography.form.input.font.size.sm}", + "source": "$custom-select-font-size-sm" + }, + "lg": { + "$value": "{typography.form.input.font.size.lg}", + "source": "$custom-select-font-size-lg" + } }, - "weight": { "source": "$custom-select-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } + "weight": { + "$type": "fontWeight", + "$value": "{typography.form.input.font.weight}", + "source": "$custom-select-font-weight" + } }, - "line-height": { "source": "$custom-select-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" } + "line-height": { + "$type": "number", + "$value": "{typography.form.input.line-height.base}", + "source": "$custom-select-line-height" + } }, "file": { - "line-height": { "source": "$custom-file-line-height", "$value": "{typography.form.input.line-height.base}", "$type": "number" }, + "line-height": { + "$type": "number", + "$value": "{typography.form.input.line-height.base}", + "source": "$custom-file-line-height" + }, "font": { - "family": { "source": "$custom-file-font-family", "$value": "{typography.form.input.font.family}", "$type": "fontFamily" }, - "weight": { "source": "$custom-file-font-weight", "$value": "{typography.form.input.font.weight}", "$type": "fontWeight" } + "family": { + "$type": "fontFamily", + "$value": "{typography.form.input.font.family}", + "source": "$custom-file-font-family" + }, + "weight": { + "$type": "fontWeight", + "$value": "{typography.form.input.font.weight}", + "source": "$custom-file-font-weight" + } } } }, "feedback": { "$type": "dimension", "font": { - "size": { "source": "$form-feedback-font-size", "$value": "{typography.font.size.sm}" } + "size": { + "$value": "{typography.font.size.sm}", + "source": "$form-feedback-font-size" + } }, "tooltip": { "font": { - "size": { "source": "$form-feedback-tooltip-font-size", "$value": "{typography.font.size.sm}" } + "size": { + "$value": "{typography.font.size.sm}", + "source": "$form-feedback-tooltip-font-size" + } }, - "line-height": { "source": "$form-feedback-tooltip-line-height", "$value": "{typography.line-height.base}", "$type": "number" } + "line-height": { + "$type": "number", + "$value": "{typography.line-height.base}", + "source": "$form-feedback-tooltip-line-height" + } } } } diff --git a/tokens/src/core/components/Icon.json b/tokens/src/core/components/Icon.json index 775992bfe5..bfbe6c4bc8 100644 --- a/tokens/src/core/components/Icon.json +++ b/tokens/src/core/components/Icon.json @@ -2,11 +2,26 @@ "size": { "$type": "dimension", "icon": { - "inline": { "source": "$icon-inline", "$value": ".8em" }, - "xs": { "source": "$icon-xs", "$value": "1rem" }, - "sm": { "source": "$icon-sm", "$value": "1.25rem" }, - "md": { "source": "$icon-md", "$value": "1.5rem" }, - "lg": { "source": "$icon-lg", "$value": "1.75rem" } + "inline": { + "$value": ".8em", + "source": "$icon-inline" + }, + "xs": { + "$value": "1rem", + "source": "$icon-xs" + }, + "sm": { + "$value": "1.25rem", + "source": "$icon-sm" + }, + "md": { + "$value": "1.5rem", + "source": "$icon-md" + }, + "lg": { + "$value": "1.75rem", + "source": "$icon-lg" + } } } } diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json index 57c3b225be..e6c6465afd 100644 --- a/tokens/src/core/components/IconButton.json +++ b/tokens/src/core/components/IconButton.json @@ -3,9 +3,18 @@ "$type": "dimension", "icon-button": { "diameter": { - "md": { "source": "$btn-icon-diameter-md", "$value": "2.75rem" }, - "sm": { "source": "$btn-icon-diameter-sm", "$value": "2.25rem" }, - "inline": { "source": "$btn-icon-diameter-inline", "$value": "calc({typography.line-height.base} * 1em + .1em)" } + "md": { + "$value": "2.75rem", + "source": "$btn-icon-diameter-md" + }, + "sm": { + "$value": "2.25rem", + "source": "$btn-icon-diameter-sm" + }, + "inline": { + "$value": "calc({typography.line-height.base} * 1em + .1em)", + "source": "$btn-icon-diameter-inline" + } } } } diff --git a/tokens/src/core/components/Image.json b/tokens/src/core/components/Image.json index 0e62fd3bc8..7cfec96306 100644 --- a/tokens/src/core/components/Image.json +++ b/tokens/src/core/components/Image.json @@ -3,7 +3,10 @@ "$type": "percentage", "image": { "figure-caption": { - "font-size": { "source": "$figure-caption-font-size", "$value": "90%" } + "font-size": { + "$value": "90%", + "source": "$figure-caption-font-size" + } } } }, @@ -12,8 +15,14 @@ "image": { "thumbnail": { "border": { - "width": { "source": "$thumbnail-border-width", "$value": "{size.border.width}" }, - "radius": { "source": "$thumbnail-border-radius", "$value": "{size.border.radius.base}" } + "width": { + "$value": "{size.border.width}", + "source": "$thumbnail-border-width" + }, + "radius": { + "$value": "{size.border.radius.base}", + "source": "$thumbnail-border-radius" + } } } } @@ -22,7 +31,10 @@ "$type": "dimension", "image": { "thumbnail": { - "padding": { "source": "$thumbnail-padding", "$value": ".25rem" } + "padding": { + "$value": ".25rem", + "source": "$thumbnail-padding" + } } } } diff --git a/tokens/src/core/components/Menu.json b/tokens/src/core/components/Menu.json index a9ed30dc57..55b90bba96 100644 --- a/tokens/src/core/components/Menu.json +++ b/tokens/src/core/components/Menu.json @@ -4,13 +4,25 @@ "menu": { "item": { "padding": { - "x": { "source": "$menu-item-padding-x", "$value": "{spacing.btn.padding.x.base}" }, - "y": { "source": "$menu-item-padding-y", "$value": "{spacing.btn.padding.y.base}" } + "x": { + "$value": "{spacing.btn.padding.x.base}", + "source": "$menu-item-padding-x" + }, + "y": { + "$value": "{spacing.btn.padding.y.base}", + "source": "$menu-item-padding-y" + } }, "icon": { "margin": { - "left": { "source": "$menu-item-icon-margin-left", "$value": ".25em" }, - "right": { "source": "$menu-item-icon-margin-right", "$value": "{spacing.menu.item.icon.margin.left}" } + "left": { + "$value": ".25em", + "source": "$menu-item-icon-margin-left" + }, + "right": { + "$value": "{spacing.menu.item.icon.margin.left}", + "source": "$menu-item-icon-margin-right" + } } } } @@ -21,8 +33,16 @@ "select": { "btn-link": { "text-decoration": { - "line": { "source": "$menu-select-btn-link-text-decoration-line", "$value": "underline", "$type": "textDecoration" }, - "thickness": { "source": "$menu-select-btn-link-text-decoration-thickness", "$value": ".125rem", "$type": "dimension" } + "line": { + "$type": "textDecoration", + "$value": "underline", + "source": "$menu-select-btn-link-text-decoration-line" + }, + "thickness": { + "$type": "dimension", + "$value": ".125rem", + "source": "$menu-select-btn-link-text-decoration-thickness" + } } } } @@ -32,17 +52,35 @@ "$type": "dimension", "menu": { "base": { - "border-radius": { "source": "$menu-border-radius", "$value": ".25em" }, - "max-height": { "source": "$menu-max-height", "$value": "16.813rem" } + "border-radius": { + "$value": ".25em", + "source": "$menu-border-radius" + }, + "max-height": { + "$value": "16.813rem", + "source": "$menu-max-height" + } }, "item": { - "height": { "source": "$menu-item-height", "$value": "3rem" }, + "height": { + "$value": "3rem", + "source": "$menu-item-height" + }, "width": { - "base": { "source": "$menu-item-width", "$value": "19rem" }, - "xs": { "source": "$menu-item-width-xs", "$value": "13.438rem" } + "base": { + "$value": "19rem", + "source": "$menu-item-width" + }, + "xs": { + "$value": "13.438rem", + "source": "$menu-item-width-xs" + } }, "border": { - "width": { "source": "$menu-item-border-width", "$value": "{size.btn.border.width}" } + "width": { + "$value": "{size.btn.border.width}", + "source": "$menu-item-border-width" + } } } } diff --git a/tokens/src/core/components/Modal.json b/tokens/src/core/components/Modal.json index de3e27ee52..717f4074af 100644 --- a/tokens/src/core/components/Modal.json +++ b/tokens/src/core/components/Modal.json @@ -2,20 +2,44 @@ "elevation": { "$type": "number", "modal": { - "backdrop-zindex": { "source": "$zindex-modal-backdrop", "$value": "1040" }, - "zindex": { "source": "$zindex-modal", "$value": "1050" } + "backdrop-zindex": { + "$value": "1040", + "source": "$zindex-modal-backdrop" + }, + "zindex": { + "$value": "1050", + "source": "$zindex-modal" + } } }, "size": { "$type": "dimension", "modal": { - "xl": { "source": "$modal-xl", "$value": "1140px" }, - "lg": { "source": "$modal-lg", "$value": "800px" }, - "md": { "source": "$modal-md", "$value": "500px" }, - "sm": { "source": "$modal-sm", "$value": "400px" }, + "xl": { + "$value": "1140px", + "source": "$modal-xl" + }, + "lg": { + "$value": "800px", + "source": "$modal-lg" + }, + "md": { + "$value": "500px", + "source": "$modal-md" + }, + "sm": { + "$value": "400px", + "source": "$modal-sm" + }, "content-border": { - "width": { "source": "$modal-content-border-width", "$value": "0px" }, - "radius": { "source": "$modal-content-border-radius", "$value": "{size.border.radius.lg}" } + "width": { + "$value": "0px", + "source": "$modal-content-border-width" + }, + "radius": { + "$value": "{size.border.radius.lg}", + "source": "$modal-content-border-radius" + } } } }, @@ -23,30 +47,45 @@ "$type": "dimension", "modal": { "inner-padding": { - "base": { "source": "$modal-inner-padding", "$value": "1.5rem" }, - "bottom": { "source": "$modal-inner-padding-bottom", "$value": ".7rem" } + "base": { + "$value": "1.5rem", + "source": "$modal-inner-padding" + }, + "bottom": { + "$value": ".7rem", + "source": "$modal-inner-padding-bottom" + } }, "footer-padding": { "base": { - "source": "$modal-footer-padding", "$value": { "x": "1.5rem", "y": "{spacing.modal.footer-padding.y}" - } + }, + "source": "$modal-footer-padding" }, - "y": { "source": "$modal-footer-padding-y", "$value": "1rem" } + "y": { + "$value": "1rem", + "source": "$modal-footer-padding-y" + } }, "header-padding": { "base": { - "source": "$modal-header-padding", "$value": { "x": "1.5rem", "y": "{spacing.modal.header-padding.y}" - } + }, + "source": "$modal-header-padding" }, - "y": { "source": "$modal-header-padding-y", "$value": "1rem" } + "y": { + "$value": "1rem", + "source": "$modal-header-padding-y" + } }, - "dialog-margin": { "source": "$modal-dialog-margin", "$value": "1.5rem" } + "dialog-margin": { + "$value": "1.5rem", + "source": "$modal-dialog-margin" + } } } } diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json index 6daea697dc..72ca1c1778 100644 --- a/tokens/src/core/components/Nav.json +++ b/tokens/src/core/components/Nav.json @@ -2,8 +2,15 @@ "typography": { "nav": { "link": { - "font-weight": { "source": "$nav-link-font-weight", "$value": "500", "$type": "fontWeight" }, - "text-decoration": { "$value": "none", "$type": "textDecoration" } + "font-weight": { + "$type": "fontWeight", + "$value": "500", + "source": "$nav-link-font-weight" + }, + "text-decoration": { + "$type": "textDecoration", + "$value": "none" + } } } }, @@ -11,26 +18,47 @@ "$type": "dimension", "nav": { "pills": { - "border-radius": { "source": "$nav-pills-border-radius", "$value": "{size.border.radius.base}" }, + "border-radius": { + "$value": "{size.border.radius.base}", + "source": "$nav-pills-border-radius" + }, "link": { - "border-width": { "source": "$nav-pills-link-border-width", "$value": "1px" } + "border-width": { + "$value": "1px", + "source": "$nav-pills-link-border-width" + } }, "inverse-link": { - "border-width": { "source": "$nav-inverse-pills-link-border-width", "$value": "{size.nav.pills.link.border-width}" } + "border-width": { + "$value": "{size.nav.pills.link.border-width}", + "source": "$nav-inverse-pills-link-border-width" + } } }, "tabs": { "link": { "border-bottom": { - "width": { "source": "$nav-tabs-link-border-bottom-width", "$value": ".188rem" } + "width": { + "$value": ".188rem", + "source": "$nav-tabs-link-border-bottom-width" + } } }, "inverse-link": { - "active-border-bottom-width": { "source": "$nav-inverse-tabs-link-active-border-bottom-width", "$value": "{size.nav.tabs.link.border-bottom.width}" } + "active-border-bottom-width": { + "$value": "{size.nav.tabs.link.border-bottom.width}", + "source": "$nav-inverse-tabs-link-active-border-bottom-width" + } }, "border": { - "width": { "source": "$nav-tabs-border-width", "$value": "2px" }, - "radius": { "source": "$nav-tabs-border-radius", "$value": "0" } + "width": { + "$value": "2px", + "source": "$nav-tabs-border-width" + }, + "radius": { + "$value": "0", + "source": "$nav-tabs-border-radius" + } } } } @@ -40,10 +68,19 @@ "nav": { "link": { "padding": { - "y": { "source": "$nav-link-padding-y", "$value": ".5rem" }, - "x": { "source": "$nav-link-padding-x", "$value": "1rem" } + "y": { + "$value": ".5rem", + "source": "$nav-link-padding-y" + }, + "x": { + "$value": "1rem", + "source": "$nav-link-padding-x" + } }, - "distance-to-border": { "source": "$nav-tabs-link-distance-to-border", "$value": "4px" } + "distance-to-border": { + "$value": "4px", + "source": "$nav-tabs-link-distance-to-border" + } } } } diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json index 2ea5f56ca0..72295414ba 100644 --- a/tokens/src/core/components/Navbar.json +++ b/tokens/src/core/components/Navbar.json @@ -3,21 +3,39 @@ "$type": "dimension", "navbar": { "padding": { - "y": { "source": "$navbar-padding-y", "$value": "calc({spacing.spacer.base} / 2)" }, + "y": { + "$value": "calc({spacing.spacer.base} / 2)", + "source": "$navbar-padding-y" + }, "x": { - "base": { "source": "$navbar-padding-x", "$value": "{spacing.spacer.base}" }, - "nav-link": { "source": "$navbar-nav-link-padding-x", "$value": ".5rem" } + "base": { + "$value": "{spacing.spacer.base}", + "source": "$navbar-padding-x" + }, + "nav-link": { + "$value": ".5rem", + "source": "$navbar-nav-link-padding-x" + } } }, "brand": { "padding": { - "y": { "source": "$navbar-brand-padding-y", "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)" } + "y": { + "$value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)", + "source": "$navbar-brand-padding-y" + } } }, "toggler": { "padding": { - "y": { "source": "$navbar-toggler-padding-y", "$value": ".25rem" }, - "x": { "source": "$navbar-toggler-padding-x", "$value": ".75rem" } + "y": { + "$value": ".25rem", + "source": "$navbar-toggler-padding-y" + }, + "x": { + "$value": ".75rem", + "source": "$navbar-toggler-padding-x" + } } } } @@ -26,13 +44,22 @@ "$type": "dimension", "navbar": { "brand": { - "font-size": { "source": "$navbar-brand-font-size", "$value": "{typography.font.size.lg}" } + "font-size": { + "$value": "{typography.font.size.lg}", + "source": "$navbar-brand-font-size" + } }, "nav-link": { - "height": { "source": "$nav-link-height", "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)" } + "height": { + "$value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)", + "source": "$nav-link-height" + } }, "toggler": { - "font-size": { "source": "$navbar-toggler-font-size", "$value": "{typography.font.size.lg}" } + "font-size": { + "$value": "{typography.font.size.lg}", + "source": "$navbar-toggler-font-size" + } } } }, @@ -41,14 +68,23 @@ "navbar": { "nav": { "scroll": { - "max-height": { "source": "$navbar-nav-scroll-max-height", "$value": "75vh" } + "max-height": { + "$value": "75vh", + "source": "$navbar-nav-scroll-max-height" + } } }, "brand": { - "height": { "source": "$navbar-brand-height", "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})" } + "height": { + "$value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})", + "source": "$navbar-brand-height" + } }, "toggler": { - "border-radius": { "source": "$navbar-toggler-border-radius", "$value": "{size.btn.border.radius.base}" } + "border-radius": { + "$value": "{size.btn.border.radius.base}", + "source": "$navbar-toggler-border-radius" + } } } } diff --git a/tokens/src/core/components/Pagination.json b/tokens/src/core/components/Pagination.json index dc1460a37f..3567bc6d2b 100644 --- a/tokens/src/core/components/Pagination.json +++ b/tokens/src/core/components/Pagination.json @@ -3,9 +3,16 @@ "pagination": { "font-size": { "$type": "dimension", - "sm": { "source": "$pagination-font-size-sm", "$value": ".875rem" } + "sm": { + "$value": ".875rem", + "source": "$pagination-font-size-sm" + } }, - "line-height": { "source": "$pagination-line-height", "$value": "1.5rem", "$type": "number" } + "line-height": { + "$type": "number", + "$value": "1.5rem", + "source": "$pagination-line-height" + } } }, "spacing": { @@ -13,14 +20,32 @@ "pagination": { "padding": { "y": { - "base": { "source": "$pagination-padding-y", "$value": ".625rem" }, - "sm": { "source": "$pagination-padding-y-sm", "$value": ".8rem" }, - "lg": { "source": "$pagination-padding-y-lg", "$value": ".75rem" } + "base": { + "$value": ".625rem", + "source": "$pagination-padding-y" + }, + "sm": { + "$value": ".8rem", + "source": "$pagination-padding-y-sm" + }, + "lg": { + "$value": ".75rem", + "source": "$pagination-padding-y-lg" + } }, "x": { - "base": { "source": "$pagination-padding-x", "$value": "1rem" }, - "sm": { "source": "$pagination-padding-x-sm", "$value": ".6rem" }, - "lg": { "source": "$pagination-padding-x-lg", "$value": "1.5rem" } + "base": { + "$value": "1rem", + "source": "$pagination-padding-x" + }, + "sm": { + "$value": ".6rem", + "source": "$pagination-padding-x-sm" + }, + "lg": { + "$value": "1.5rem", + "source": "$pagination-padding-x-lg" + } } } } @@ -29,36 +54,72 @@ "$type": "dimension", "pagination": { "icon": { - "width": { "source": "$pagination-icon-width", "$value": "2.25rem" }, - "height": { "source": "$pagination-icon-height", "$value": "2.25rem" } + "width": { + "$value": "2.25rem", + "source": "$pagination-icon-width" + }, + "height": { + "$value": "2.25rem", + "source": "$pagination-icon-height" + } }, "secondary": { "height": { - "base": { "source": "$pagination-secondary-height", "$value": "2.75rem" }, - "sm": { "source": "$pagination-secondary-height-sm", "$value": "2.25rem" } + "base": { + "$value": "2.75rem", + "source": "$pagination-secondary-height" + }, + "sm": { + "$value": "2.25rem", + "source": "$pagination-secondary-height-sm" + } } }, "border": { - "width": { "source": "$pagination-border-width", "$value": "{size.border.width}" }, + "width": { + "$value": "{size.border.width}", + "source": "$pagination-border-width" + }, "radius": { - "sm": { "source": "$pagination-border-radius-sm", "$value": "{size.border.radius.sm}" }, - "lg": { "source": "$pagination-border-radius-lg", "$value": "{size.border.radius.lg}" } + "sm": { + "$value": "{size.border.radius.sm}", + "source": "$pagination-border-radius-sm" + }, + "lg": { + "$value": "{size.border.radius.lg}", + "source": "$pagination-border-radius-lg" + } } }, "reduced": { "dropdown": { - "max-height": { "source": "$pagination-reduced-dropdown-max-height", "$value": "60vh" }, - "min-width": { "source": "$pagination-reduced-dropdown-min-width", "$value": "6rem" } + "max-height": { + "$value": "60vh", + "source": "$pagination-reduced-dropdown-max-height" + }, + "min-width": { + "$value": "6rem", + "source": "$pagination-reduced-dropdown-min-width" + } } }, "toggle": { "border": { - "base": { "source": "$pagination-toggle-border", "$value": ".3125rem" }, - "sm": { "source": "$pagination-toggle-border-sm", "$value": ".25rem" } + "base": { + "$value": ".3125rem", + "source": "$pagination-toggle-border" + }, + "sm": { + "$value": ".25rem", + "source": "$pagination-toggle-border-sm" + } } }, "focus": { - "outline": { "source": "$pagination-focus-outline", "$value": "0" } + "outline": { + "$value": "0", + "source": "$pagination-focus-outline" + } } } } diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json index 7a2bcc2f98..c4576c5c0f 100644 --- a/tokens/src/core/components/Popover.json +++ b/tokens/src/core/components/Popover.json @@ -2,31 +2,58 @@ "typography": { "$type": "dimension", "popover": { - "font-size": { "source": "$popover-font-size", "$value": "{typography.font.size.sm}" } + "font-size": { + "$value": "{typography.font.size.sm}", + "source": "$popover-font-size" + } } }, "size": { "$type": "dimension", "popover": { - "max-width": { "source": "$popover-max-width", "$value": "480px" }, + "max-width": { + "$value": "480px", + "source": "$popover-max-width" + }, "border": { - "width": { "source": "$popover-border-width", "$value": "{size.border.width}" }, - "radius": { "source": "$popover-border-radius", "$value": "{size.border.radius.sm}" } + "width": { + "$value": "{size.border.width}", + "source": "$popover-border-width" + }, + "radius": { + "$value": "{size.border.radius.sm}", + "source": "$popover-border-radius" + } }, "icon": { - "height": { "source": "$popover-icon-height", "$value": "1rem" }, - "width": { "source": "$popover-icon-width", "$value": "1rem" } + "height": { + "$value": "1rem", + "source": "$popover-icon-height" + }, + "width": { + "$value": "1rem", + "source": "$popover-icon-width" + } }, "arrow": { - "width": { "source": "$popover-arrow-width", "$value": "1rem" }, - "height": { "source": "$popover-arrow-height", "$value": ".5rem" } + "width": { + "$value": "1rem", + "source": "$popover-arrow-width" + }, + "height": { + "$value": ".5rem", + "source": "$popover-arrow-height" + } } } }, "elevation": { "$type": "number", "popover": { - "zindex": { "source": "$zindex-popover", "$value": "1060" } + "zindex": { + "$value": "1060", + "source": "$zindex-popover" + } } }, "spacing": { @@ -34,18 +61,33 @@ "popover": { "header": { "padding": { - "y": { "source": "$popover-header-padding-y", "$value": ".5rem" }, - "x": { "source": "$popover-header-padding-x", "$value": "1rem" } + "y": { + "$value": ".5rem", + "source": "$popover-header-padding-y" + }, + "x": { + "$value": "1rem", + "source": "$popover-header-padding-x" + } } }, "body": { "padding": { - "y": { "source": "$popover-body-padding-y", "$value": "{spacing.popover.header.padding.y}" }, - "x": { "source": "$popover-body-padding-x", "$value": "{spacing.popover.header.padding.x}" } + "y": { + "$value": "{spacing.popover.header.padding.y}", + "source": "$popover-body-padding-y" + }, + "x": { + "$value": "{spacing.popover.header.padding.x}", + "source": "$popover-body-padding-x" + } } }, "icon": { - "margin-right": { "source": "$popover-icon-margin-right", "$value": ".5rem" } + "margin-right": { + "$value": ".5rem", + "source": "$popover-icon-margin-right" + } } } } diff --git a/tokens/src/core/components/ProductTour.json b/tokens/src/core/components/ProductTour.json index 13aa5c5679..05b22fd838 100644 --- a/tokens/src/core/components/ProductTour.json +++ b/tokens/src/core/components/ProductTour.json @@ -4,13 +4,28 @@ "product-tour": { "checkpoint": { "width": { - "border": { "source": "$checkpoint-border-width", "$value": "8px" }, - "arrow": { "source": "$checkpoint-arrow-width", "$value": "15px" }, - "max": { "source": "$checkpoint-max-width", "$value": "480px" } + "border": { + "$value": "8px", + "source": "$checkpoint-border-width" + }, + "arrow": { + "$value": "15px", + "source": "$checkpoint-arrow-width" + }, + "max": { + "$value": "480px", + "source": "$checkpoint-max-width" + } }, "arrow": { - "top": { "source": "$checkpoint-arrow-border-top", "$value": "{size.product-tour.checkpoint.width.arrow}" }, - "transparent": { "source": "$checkpoint-arrow-border-transparent", "$value": "{size.product-tour.checkpoint.width.arrow}" } + "top": { + "$value": "{size.product-tour.checkpoint.width.arrow}", + "source": "$checkpoint-arrow-border-top" + }, + "transparent": { + "$value": "{size.product-tour.checkpoint.width.arrow}", + "source": "$checkpoint-arrow-border-transparent" + } } } } @@ -19,7 +34,10 @@ "$type": "number", "product-tour": { "checkpoint": { - "zindex": { "source": "$checkpoint-z-index", "$value": "1060" } + "zindex": { + "$value": "1060", + "source": "$checkpoint-z-index" + } } } } diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json index 09a2edd5db..0221b353b6 100644 --- a/tokens/src/core/components/ProgressBar.json +++ b/tokens/src/core/components/ProgressBar.json @@ -2,28 +2,49 @@ "typography": { "$type": "dimension", "progress-bar": { - "font-size": { "source": "$progress-font-size", "$value": "calc({typography.font.size.base} * .75)" } + "font-size": { + "$value": "calc({typography.font.size.base} * .75)", + "source": "$progress-font-size" + } } }, "size": { "$type": "dimension", "progress-bar": { "height": { - "base": { "source": "$progress-height", "$value": "1rem" }, - "annotated": { "source": "$annotated-progress-height", "$value": ".3125rem" } + "base": { + "$value": "1rem", + "source": "$progress-height" + }, + "annotated": { + "$value": ".3125rem", + "source": "$annotated-progress-height" + } }, "border": { - "width": { "source": "$progress-bar-border-width", "$value": "1px" }, - "radius": { "source": "$progress-border-radius", "$value": "0" } + "width": { + "$value": "1px", + "source": "$progress-bar-border-width" + }, + "radius": { + "$value": "0", + "source": "$progress-border-radius" + } }, - "threshold-circle": { "source": "$progress-threshold-circle", "$value": ".5625rem" } + "threshold-circle": { + "$value": ".5625rem", + "source": "$progress-threshold-circle" + } } }, "spacing": { "$type": "dimension", "progress-bar": { "hint": { - "annotation-gap": { "source": "$progress-hint-annotation-gap", "$value": ".5rem" } + "annotation-gap": { + "$value": ".5rem", + "source": "$progress-hint-annotation-gap" + } } } }, @@ -31,23 +52,23 @@ "$type": "transition", "progress-bar": { "animation-timing": { - "source": "$progress-bar-animation-timing", "$value": { "duration": "1s", "timing-function": "linear", "delay": "0s", "iteration-count": "infinite" - } + }, + "source": "$progress-bar-animation-timing" }, "transition": { - "source": "$progress-bar-transition", "$value": { "property": "width", "duration": ".6s", "timing-function": "ease", "delay": "0s", "behavior": "normal" - } + }, + "source": "$progress-bar-transition" } } } diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json index 795c27de0f..d7e6a7cd04 100644 --- a/tokens/src/core/components/SearchField.json +++ b/tokens/src/core/components/SearchField.json @@ -4,18 +4,33 @@ "search-field": { "border": { "width": { - "base": { "source": "$search-border-width", "$value": ".0625rem" }, - "focus": { "source": "$search-border-focus-width", "$value": ".3125rem" } + "base": { + "$value": ".0625rem", + "source": "$search-border-width" + }, + "focus": { + "$value": ".3125rem", + "source": "$search-border-focus-width" + } }, - "radius": { "source": "$search-border-radius", "$value": "0" } + "radius": { + "$value": "0", + "source": "$search-border-radius" + } }, - "search-input-height": { "source": "$input-height-search", "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)" } + "search-input-height": { + "$value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", + "source": "$input-height-search" + } } }, "spacing": { "$type": "dimension", "search-field": { - "margin-button": { "source": "$search-button-margin", "$value": ".5rem" } + "margin-button": { + "$value": ".5rem", + "source": "$search-button-margin" + } } } } diff --git a/tokens/src/core/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json index b3b89e747b..632bd2c981 100644 --- a/tokens/src/core/components/SelectableBox.json +++ b/tokens/src/core/components/SelectableBox.json @@ -2,9 +2,18 @@ "spacing": { "$type": "dimension", "selectable-box": { - "padding": { "source": "$selectable-box-padding", "$value": "1rem" }, - "border-radius": { "source": "$selectable-box-border-radius", "$value": ".25rem" }, - "box-space": { "source": "$selectable-box-space", "$value": ".75rem" } + "padding": { + "$value": "1rem", + "source": "$selectable-box-padding" + }, + "border-radius": { + "$value": ".25rem", + "source": "$selectable-box-border-radius" + }, + "box-space": { + "$value": ".75rem", + "source": "$selectable-box-space" + } } } } diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json index 12f8cb0c1b..73b64c0eae 100644 --- a/tokens/src/core/components/Sheet.json +++ b/tokens/src/core/components/Sheet.json @@ -3,8 +3,14 @@ "$type": "number", "sheet": { "zindex": { - "backdrop": { "source": "$zindex-sheet-backdrop", "$value": "1031" }, - "main": { "source": "$zindex-sheet", "$value": "1032" } + "backdrop": { + "$value": "1031", + "source": "$zindex-sheet-backdrop" + }, + "main": { + "$value": "1032", + "source": "$zindex-sheet" + } } } } diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json index 4a086b811d..f42bfea44d 100644 --- a/tokens/src/core/components/Spinner.json +++ b/tokens/src/core/components/Spinner.json @@ -3,19 +3,40 @@ "$type": "dimension", "spinner": { "base": { - "width": { "source": "$spinner-width", "$value": "2rem" }, - "height": { "source": "$spinner-height", "$value": "{size.spinner.base.width}" }, - "border-width": { "source": "$spinner-border-width", "$value": ".25em" } + "width": { + "$value": "2rem", + "source": "$spinner-width" + }, + "height": { + "$value": "{size.spinner.base.width}", + "source": "$spinner-height" + }, + "border-width": { + "$value": ".25em", + "source": "$spinner-border-width" + } }, "sm": { - "width": { "source": "$spinner-width-sm", "$value": "1rem" }, - "height": { "source": "$spinner-height-sm", "$value": "{size.spinner.sm.width}" }, - "border-width": { "source": "$spinner-border-width-sm", "$value": ".2em" } + "width": { + "$value": "1rem", + "source": "$spinner-width-sm" + }, + "height": { + "$value": "{size.spinner.sm.width}", + "source": "$spinner-height-sm" + }, + "border-width": { + "$value": ".2em", + "source": "$spinner-border-width-sm" + } } } }, "spacing": { "$type": "dimension", - "vertical-align": { "source": "$spinner-vertical-align", "$value": ".125em" } + "vertical-align": { + "$value": ".125em", + "source": "$spinner-vertical-align" + } } } diff --git a/tokens/src/core/components/Stack.json b/tokens/src/core/components/Stack.json index 1a51bc842c..f32d79e330 100644 --- a/tokens/src/core/components/Stack.json +++ b/tokens/src/core/components/Stack.json @@ -2,7 +2,10 @@ "size": { "$type": "dimension", "stack": { - "gap": { "source": "$stack-gap", "$value": "0" } + "gap": { + "$value": "0", + "source": "$stack-gap" + } } } } diff --git a/tokens/src/core/components/Stepper.json b/tokens/src/core/components/Stepper.json index f292871793..3b5e3f1123 100644 --- a/tokens/src/core/components/Stepper.json +++ b/tokens/src/core/components/Stepper.json @@ -4,17 +4,35 @@ "stepper": { "header": { "padding": { - "y": { "source": "$stepper-header-padding-y", "$value": ".75rem" }, - "x": { "source": "$stepper-header-padding-x", "$value": "{spacing.spacer.base}" } + "y": { + "$value": ".75rem", + "source": "$stepper-header-padding-y" + }, + "x": { + "$value": "{spacing.spacer.base}", + "source": "$stepper-header-padding-x" + } }, "step": { - "padding": { "source": "$stepper-header-step-padding", "$value": ".25rem" }, + "padding": { + "$value": ".25rem", + "source": "$stepper-header-step-padding" + }, "list": { "padding": { - "y": { "source": "$stepper-header-step-list-padding-y", "$value": ".25rem" }, - "x": { "source": "$stepper-header-step-list-padding-x", "$value": "0" } + "y": { + "$value": ".25rem", + "source": "$stepper-header-step-list-padding-y" + }, + "x": { + "$value": "0", + "source": "$stepper-header-step-list-padding-x" + } }, - "margin": { "source": "$stepper-header-step-list-margin", "$value": "0" } + "margin": { + "$value": "0", + "source": "$stepper-header-step-list-margin" + } } } } @@ -24,17 +42,30 @@ "$type": "dimension", "stepper": { "header": { - "height-min": { "source": "$stepper-header-min-height", "$value": "5.13rem" } + "height-min": { + "$value": "5.13rem", + "source": "$stepper-header-min-height" + } }, "step": { - "width-min": { "source": "$stepper-header-step-min-width", "$value": "0" }, - "bubble-error-shadow-width": { "source": "$stepper-header-step-error-bubble-shadow-width", "$value": "3px" } + "width-min": { + "$value": "0", + "source": "$stepper-header-step-min-width" + }, + "bubble-error-shadow-width": { + "$value": "3px", + "source": "$stepper-header-step-error-bubble-shadow-width" + } } } }, "typography": { "spacer": { - "line-height": { "source": "$stepper-header-line-height", "$value": "1px", "$type": "number" } + "line-height": { + "$type": "number", + "$value": "1px", + "source": "$stepper-header-line-height" + } } } } diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json index e85f22aca8..953426a84e 100644 --- a/tokens/src/core/components/Sticky.json +++ b/tokens/src/core/components/Sticky.json @@ -2,7 +2,10 @@ "spacing": { "$type": "dimension", "sticky": { - "offset": { "source": "$sticky-offset", "$value": "0" } + "offset": { + "$value": "0", + "source": "$sticky-offset" + } } } } diff --git a/tokens/src/core/components/Tab.json b/tokens/src/core/components/Tab.json index 6bc272e388..5dfc20fb72 100644 --- a/tokens/src/core/components/Tab.json +++ b/tokens/src/core/components/Tab.json @@ -3,17 +3,38 @@ "$type": "dimension", "tab": { "more-link-dropdown-toggle": { - "padding-x": { "source": "$tab-more-link-dropdown-toggle-padding-x", "$value": ".7rem" }, - "padding-y": { "source": "$tab-more-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" } + "padding-x": { + "$value": ".7rem", + "source": "$tab-more-link-dropdown-toggle-padding-x" + }, + "padding-y": { + "$value": "{spacing.spacer.base}", + "source": "$tab-more-link-dropdown-toggle-padding-y" + } }, "inverse-pills-link-dropdown-toggle": { - "padding-x": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x", "$value": ".625rem" }, - "padding-y": { "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" } + "padding-x": { + "$value": ".625rem", + "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x" + }, + "padding-y": { + "$value": "{spacing.spacer.base}", + "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y" + } }, "inverse-tabs-link-dropdown-toggle": { - "padding-x": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x", "$value": ".625rem" }, - "padding-y": { "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y", "$value": "{spacing.spacer.base}" }, - "distance": { "source": "$tab-inverse-pills-link-dropdown-distance", "$value": "5px" } + "padding-x": { + "$value": ".625rem", + "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" + }, + "padding-y": { + "$value": "{spacing.spacer.base}", + "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" + }, + "distance": { + "$value": "5px", + "source": "$tab-inverse-pills-link-dropdown-distance" + } } } } diff --git a/tokens/src/core/components/Tabs.json b/tokens/src/core/components/Tabs.json index 7670ff130a..f3d7088535 100644 --- a/tokens/src/core/components/Tabs.json +++ b/tokens/src/core/components/Tabs.json @@ -3,8 +3,14 @@ "$type": "dimension", "tabs": { "notification": { - "height": { "source": "$tab-notification-height", "$value": "1rem" }, - "width": { "source": "$tab-notification-width", "$value": "1rem" } + "height": { + "$value": "1rem", + "source": "$tab-notification-height" + }, + "width": { + "$value": "1rem", + "source": "$tab-notification-width" + } } } }, @@ -12,7 +18,10 @@ "$type": "dimension", "tabs": { "notification": { - "font-size": { "source": "$tab-notification-font-size", "$value": "{typography.font.size.xs}" } + "font-size": { + "$value": "{typography.font.size.xs}", + "source": "$tab-notification-font-size" + } } } } diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json index 5da5d6e1fe..9175627000 100644 --- a/tokens/src/core/components/Toast.json +++ b/tokens/src/core/components/Toast.json @@ -2,16 +2,28 @@ "typography": { "$type": "dimension", "toast": { - "font-size": { "source": "$toast-font-size", "$value": ".875rem" } + "font-size": { + "$value": ".875rem", + "source": "$toast-font-size" + } } }, "size": { "$type": "dimension", "toast": { - "max-width": { "source": "$toast-max-width", "$value": "400px" }, + "max-width": { + "$value": "400px", + "source": "$toast-max-width" + }, "border": { - "width": { "source": "$toast-border-width", "$value": "1px" }, - "radius": { "source": "$toast-border-radius", "$value": ".25rem" } + "width": { + "$value": "1px", + "source": "$toast-border-width" + }, + "radius": { + "$value": ".25rem", + "source": "$toast-border-radius" + } } } }, @@ -19,13 +31,25 @@ "$type": "dimension", "toast": { "padding": { - "x": { "source": "$toast-padding-x", "$value": ".75rem" }, - "y": { "source": "$toast-padding-y", "$value": ".25rem" } + "x": { + "$value": ".75rem", + "source": "$toast-padding-x" + }, + "y": { + "$value": ".25rem", + "source": "$toast-padding-y" + } }, "container": { "gutter": { - "lg": { "source": "$toast-container-gutter-lg", "$value": "1.25rem" }, - "sm": { "source": "$toast-container-gutter-sm", "$value": ".625rem" } + "lg": { + "$value": "1.25rem", + "source": "$toast-container-gutter-lg" + }, + "sm": { + "$value": ".625rem", + "source": "$toast-container-gutter-sm" + } } } } diff --git a/tokens/src/core/components/Tooltip.json b/tokens/src/core/components/Tooltip.json index 092a2d8124..72e52270f5 100644 --- a/tokens/src/core/components/Tooltip.json +++ b/tokens/src/core/components/Tooltip.json @@ -2,34 +2,61 @@ "typography": { "$type": "dimension", "tooltip": { - "font-size": { "source": "$tooltip-font-size", "$value": "{typography.font.size.sm}" } + "font-size": { + "$value": "{typography.font.size.sm}", + "source": "$tooltip-font-size" + } } }, "spacing": { "$type": "dimension", "tooltip": { "padding": { - "y": { "source": "$tooltip-padding-y", "$value": ".5rem" }, - "x": { "source": "$tooltip-padding-x", "$value": ".5rem" } + "y": { + "$value": ".5rem", + "source": "$tooltip-padding-y" + }, + "x": { + "$value": ".5rem", + "source": "$tooltip-padding-x" + } }, - "margin": { "source": "$tooltip-margin", "$value": "0" } + "margin": { + "$value": "0", + "source": "$tooltip-margin" + } } }, "elevation": { "$type": "number", "tooltip": { - "zindex": { "source": "$zindex-tooltip", "$value": "1070" } + "zindex": { + "$value": "1070", + "source": "$zindex-tooltip" + } } }, "size": { "$type": "dimension", "tooltip": { - "max-width": { "source": "$tooltip-max-width", "$value": "200px" }, + "max-width": { + "$value": "200px", + "source": "$tooltip-max-width" + }, "arrow": { - "height": { "source": "$tooltip-arrow-height", "$value": ".4rem" }, - "width": { "source": "$tooltip-arrow-width", "$value": ".8rem" } + "height": { + "$value": ".4rem", + "source": "$tooltip-arrow-height" + }, + "width": { + "$value": ".8rem", + "source": "$tooltip-arrow-width" + } }, - "border-radius": { "source": "$tooltip-border-radius", "$value": "{size.border.radius.base}" } + "border-radius": { + "$value": "{size.border.radius.base}", + "source": "$tooltip-border-radius" + } } } } diff --git a/tokens/src/core/components/general/caret.json b/tokens/src/core/components/general/caret.json index cb713a455c..7ff90504c0 100644 --- a/tokens/src/core/components/general/caret.json +++ b/tokens/src/core/components/general/caret.json @@ -2,14 +2,23 @@ "size": { "$type": "dimension", "caret": { - "width": { "source": "$caret-width", "$value": ".3em" } + "width": { + "$value": ".3em", + "source": "$caret-width" + } } }, "spacing": { "$type": "dimension", "caret": { - "base": { "source": "$caret-spacing", "$value": ".255em" }, - "vertical-align": { "source": "$caret-vertical-align", "$value": ".255em" } + "base": { + "$value": ".255em", + "source": "$caret-spacing" + }, + "vertical-align": { + "$value": ".255em", + "source": "$caret-vertical-align" + } } } } diff --git a/tokens/src/core/components/general/headings.json b/tokens/src/core/components/general/headings.json index c631e3d2d6..7735f84ba3 100644 --- a/tokens/src/core/components/general/headings.json +++ b/tokens/src/core/components/general/headings.json @@ -2,16 +2,31 @@ "typography": { "headings": { "font": { - "family": { "source": "$headings-font-family", "$value": "inherit", "$type": "fontFamily" }, - "weight": { "source": "$headings-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" } + "family": { + "$type": "fontFamily", + "$value": "inherit", + "source": "$headings-font-family" + }, + "weight": { + "$type": "fontWeight", + "$value": "{typography.font.weight.bold}", + "source": "$headings-font-weight" + } }, - "line-height": { "source": "$headings-line-height", "$value": "1.25", "$type": "number" } + "line-height": { + "$type": "number", + "$value": "1.25", + "source": "$headings-line-height" + } } }, "spacing": { "$type": "dimension", "headings": { - "margin-bottom": { "source": "$headings-margin-bottom", "$value": ".5rem" } + "margin-bottom": { + "$value": ".5rem", + "source": "$headings-margin-bottom" + } } } } diff --git a/tokens/src/core/components/general/hr.json b/tokens/src/core/components/general/hr.json index baeb366d2d..6d1211d536 100644 --- a/tokens/src/core/components/general/hr.json +++ b/tokens/src/core/components/general/hr.json @@ -3,8 +3,14 @@ "$type": "dimension", "hr": { "border": { - "width": { "source": "$hr-border-width", "$value": "{size.border.width}" }, - "margin-y": { "source": "$hr-margin-y", "$value": "{spacing.spacer.base}" } + "width": { + "$value": "{size.border.width}", + "source": "$hr-border-width" + }, + "margin-y": { + "$value": "{spacing.spacer.base}", + "source": "$hr-margin-y" + } } } } diff --git a/tokens/src/core/components/general/input.json b/tokens/src/core/components/general/input.json index 0bdc756950..aed40b80a9 100644 --- a/tokens/src/core/components/general/input.json +++ b/tokens/src/core/components/general/input.json @@ -3,19 +3,41 @@ "input": { "btn": { "font": { - "family": { "source": "$input-btn-font-family", "$value": "inherit", "$type": "fontFamily" }, + "family": { + "$type": "fontFamily", + "$value": "inherit", + "source": "$input-btn-font-family" + }, "size": { "$type": "dimension", - "base": { "source": "$input-btn-font-size", "$value": "1.125rem" }, - "sm": { "source": "$input-btn-font-size-sm", "$value": ".875rem" }, - "lg": { "source": "$input-btn-font-size-lg", "$value": "1.325rem" } + "base": { + "$value": "1.125rem", + "source": "$input-btn-font-size" + }, + "sm": { + "$value": ".875rem", + "source": "$input-btn-font-size-sm" + }, + "lg": { + "$value": "1.325rem", + "source": "$input-btn-font-size-lg" + } } }, "line-height": { "$type": "number", - "base": { "source": "$input-btn-line-height", "$value": "1.3333" }, - "sm": { "source": "$input-btn-line-height-sm", "$value": "1.4286" }, - "lg": { "source": "$input-btn-line-height-lg", "$value": "{typography.line-height.lg}" } + "base": { + "$value": "1.3333", + "source": "$input-btn-line-height" + }, + "sm": { + "$value": "1.4286", + "source": "$input-btn-line-height-sm" + }, + "lg": { + "$value": "{typography.line-height.lg}", + "source": "$input-btn-line-height-lg" + } } } } @@ -25,15 +47,33 @@ "input": { "btn": { "padding": { - "y": { "source": "$input-btn-padding-y", "$value": ".5625rem" }, - "x": { "source": "$input-btn-padding-x", "$value": "1rem" }, + "y": { + "$value": ".5625rem", + "source": "$input-btn-padding-y" + }, + "x": { + "$value": "1rem", + "source": "$input-btn-padding-x" + }, "sm": { - "y": { "source": "$input-btn-padding-y-sm", "$value": ".4375rem" }, - "x": { "source": "$input-btn-padding-x-sm", "$value": ".75rem" } + "y": { + "$value": ".4375rem", + "source": "$input-btn-padding-y-sm" + }, + "x": { + "$value": ".75rem", + "source": "$input-btn-padding-x-sm" + } }, "lg": { - "y": { "source": "$input-btn-padding-y-lg", "$value": ".6875rem" }, - "x": { "source": "$input-btn-padding-x-lg", "$value": "1.25rem" } + "y": { + "$value": ".6875rem", + "source": "$input-btn-padding-y-lg" + }, + "x": { + "$value": "1.25rem", + "source": "$input-btn-padding-x-lg" + } } } } @@ -43,8 +83,14 @@ "$type": "dimension", "input": { "btn": { - "border-width": { "source": "$input-btn-border-width", "$value": "{size.border.width}" }, - "focus-width": { "source": "$input-btn-focus-width", "$value": "1px" } + "border-width": { + "$value": "{size.border.width}", + "source": "$input-btn-border-width" + }, + "focus-width": { + "$value": "1px", + "source": "$input-btn-focus-width" + } } } } diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json index 8b6e4d34bb..a9e7a34a45 100644 --- a/tokens/src/core/components/general/link.json +++ b/tokens/src/core/components/general/link.json @@ -3,26 +3,62 @@ "link": { "decoration": { "$type": "textDecoration", - "base": { "source": "$link-decoration", "$value": "none" }, - "hover": { "source": "$link-hover-decoration", "$value": "underline" }, + "base": { + "$value": "none", + "source": "$link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$link-hover-decoration" + }, "inline": { - "base": { "source": "$inline-link-decoration", "$value": "underline" }, - "hover": { "source": "$inline-link-hover-decoration", "$value": "underline" } + "base": { + "$value": "underline", + "source": "$inline-link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$inline-link-hover-decoration" + } }, "muted": { - "base": { "source": "$muted-link-decoration", "$value": "none" }, - "hover": { "source": "$muted-link-hover-decoration", "$value": "underline" }, + "base": { + "$value": "none", + "source": "$muted-link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$muted-link-hover-decoration" + }, "inline": { - "base": { "source": "$muted-inline-link-decoration", "$value": "underline" }, - "hover": { "source": "$muted-inline-link-hover-decoration", "$value": "underline" } + "base": { + "$value": "underline", + "source": "$muted-inline-link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$muted-inline-link-hover-decoration" + } } }, "brand": { - "base": { "source": "$brand-link-decoration", "$value": "none" }, - "hover": { "source": "$brand-link-hover-decoration", "$value": "underline" }, + "base": { + "$value": "none", + "source": "$brand-link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$brand-link-hover-decoration" + }, "inline": { - "base": { "source": "$brand-inline-link-decoration", "$value": "underline" }, - "hover": { "source": "$brand-inline-link-hover-decoration", "$value": "underline" } + "base": { + "$value": "underline", + "source": "$brand-inline-link-decoration" + }, + "hover": { + "$value": "underline", + "source": "$brand-inline-link-hover-decoration" + } } } } diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json index 071f3b6a05..0180a82cc1 100644 --- a/tokens/src/core/components/general/list.json +++ b/tokens/src/core/components/general/list.json @@ -2,17 +2,29 @@ "typography": { "$type": "fontWeight", "dt": { - "font-weight": { "source": "$dt-font-weight", "$value": "{typography.font.weight.bold}" } + "font-weight": { + "$value": "{typography.font.weight.bold}", + "source": "$dt-font-weight" + } } }, "spacing": { "$type": "dimension", "list": { - "inline-padding": { "source": "$list-inline-padding", "$value": ".5rem" }, + "inline-padding": { + "$value": ".5rem", + "source": "$list-inline-padding" + }, "group-item": { "padding": { - "y": { "source": "$list-group-item-padding-y", "$value": ".75rem" }, - "x": { "source": "$list-group-item-padding-x", "$value": "1.25rem" } + "y": { + "$value": ".75rem", + "source": "$list-group-item-padding-y" + }, + "x": { + "$value": "1.25rem", + "source": "$list-group-item-padding-x" + } } } } @@ -21,8 +33,14 @@ "$type": "dimension", "list-group": { "border": { - "width": { "source": "$list-group-border-width", "$value": "{size.border.width}" }, - "radius": { "source": "$list-group-border-radius", "$value": "{size.border.radius.base}" } + "width": { + "$value": "{size.border.width}", + "source": "$list-group-border-width" + }, + "radius": { + "$value": "{size.border.radius.base}", + "source": "$list-group-border-radius" + } } } } diff --git a/tokens/src/core/components/general/text.json b/tokens/src/core/components/general/text.json index 4a2f13eb2d..ad0f2c2617 100644 --- a/tokens/src/core/components/general/text.json +++ b/tokens/src/core/components/general/text.json @@ -2,17 +2,29 @@ "spacing": { "$type": "dimension", "paragraph": { - "margin-bottom": { "source": "$paragraph-margin-bottom", "$value": "1rem" } + "margin-bottom": { + "$value": "1rem", + "source": "$paragraph-margin-bottom" + } }, - "mark-padding": { "source": "$mark-padding", "$value": ".2em" } + "mark-padding": { + "$value": ".2em", + "source": "$mark-padding" + } }, "typography": { "$type": "dimension", "blockquote": { "small": { - "font-size": { "source": "$blockquote-small-font-size", "$value": "{typography.font.size.sm}" } + "font-size": { + "$value": "{typography.font.size.sm}", + "source": "$blockquote-small-font-size" + } }, - "font-size": { "source": "$blockquote-font-size", "$value": "calc({typography.font.size.base} * 1.25)" } + "font-size": { + "$value": "calc({typography.font.size.base} * 1.25)", + "source": "$blockquote-font-size" + } } } } diff --git a/tokens/src/core/global/elevation.json b/tokens/src/core/global/elevation.json index 16f42c3061..55919c23db 100644 --- a/tokens/src/core/global/elevation.json +++ b/tokens/src/core/global/elevation.json @@ -47,14 +47,14 @@ "$description": "z-index of level 2000." }, "sticky": { - "source": "$zindex-sticky", "$value": 1020, - "$description": "z-index for sticky element." + "$description": "z-index for sticky element.", + "source": "$zindex-sticky" }, "fixed": { - "source": "$zindex-fixed", "$value": 1030, - "$description": "z-index of for fixed element." + "$description": "z-index of for fixed element.", + "source": "$zindex-fixed" } } } diff --git a/tokens/src/core/global/other.json b/tokens/src/core/global/other.json index 5ea9056694..8c722fde59 100644 --- a/tokens/src/core/global/other.json +++ b/tokens/src/core/global/other.json @@ -2,7 +2,7 @@ "yiq-contrasted-threshold": 128, "theme-interval": { "$type": "percentage", - "source": "$theme-color-interval", - "$value": "8%" + "$value": "8%", + "source": "$theme-color-interval" } } diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json index fb48d6a6b3..f2e9bbd50c 100644 --- a/tokens/src/core/global/spacing.json +++ b/tokens/src/core/global/spacing.json @@ -31,9 +31,9 @@ "$description": "Space value of level 6" }, "base": { - "source": "$spacer", "$value": "1rem", - "$description": "Basic space value" + "$description": "Basic space value", + "source": "$spacer" }, "1.5": { "$value": "calc({spacing.spacer.base} * .375)", @@ -58,32 +58,32 @@ }, "label": { "margin-bottom": { - "source": "$label-margin-bottom", "$value": ".5rem", - "$description": "Margin bottom for label." + "$description": "Margin bottom for label.", + "source": "$label-margin-bottom" } }, "table": { "cell": { "padding": { "base": { - "source": "$table-cell-padding", "$value": ".75rem", - "$description": "Padding for tables." + "$description": "Padding for tables.", + "source": "$table-cell-padding" }, "sm": { - "source": "$table-cell-padding-sm", "$value": ".3rem", - "$description": "Padding sm for tables." + "$description": "Padding sm for tables.", + "source": "$table-cell-padding-sm" } } } }, "grid": { "gutter-width": { - "source": "$grid-gutter-width", "$value": "24px", - "$description": "Grid gutter width value." + "$description": "Grid gutter width value.", + "source": "$grid-gutter-width" } } } diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json index 657ee85e2f..035b91793d 100644 --- a/tokens/src/core/global/transition.json +++ b/tokens/src/core/global/transition.json @@ -2,7 +2,6 @@ "transition": { "$type": "transition", "base": { - "source": "$transition-base", "$value": { "property": "all", "duration": ".2s", @@ -10,10 +9,10 @@ "delay": "0s", "behavior": "normal" }, - "$description": "Generic transition for any property change" + "$description": "Generic transition for any property change", + "source": "$transition-base" }, "fade": { - "source": "$transition-fade", "$value": { "property": "opacity", "duration": ".15s", @@ -21,11 +20,11 @@ "delay": "0s", "behavior": "normal" }, - "$description": "Opacity transition that takes 150ms" + "$description": "Opacity transition that takes 150ms", + "source": "$transition-fade" }, "collapse": { "height": { - "source": "$transition-collapse", "$value": { "property": "height", "duration": ".35s", @@ -33,10 +32,10 @@ "delay": "0s", "behavior": "normal" }, - "$description": "Collapse transition for height that takes 350ms" + "$description": "Collapse transition for height that takes 350ms", + "source": "$transition-collapse" }, "width": { - "source": "$transition-collapse-width", "$value": { "property": "width", "duration": ".35s", @@ -44,7 +43,8 @@ "delay": "0s", "behavior": "normal" }, - "$description": "Collapse transition for width that takes 350ms" + "$description": "Collapse transition for width that takes 350ms", + "source": "$transition-collapse-width" } } } diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json index 0dec9157f8..84526b567e 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -4,155 +4,175 @@ "family": { "$type": "fontFamily", "base": { - "source": "$font-family-base", "$value": "{typography.font.family.sans.serif}", - "$description": "Basic font family." + "$description": "Basic font family.", + "source": "$font-family-base" }, "sans": { "serif": { - "source": "$font-family-sans-serif", - "$value": ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", - "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"], - "$description": "Sans-serif font family." + "$value": [ + "-apple-system", + "BlinkMacSystemFont", + "Segoe UI", + "Roboto", + "Helvetica Neue", + "Arial", + "Noto Sans", + "sans-serif", + "Apple Color Emoji", + "Segoe UI Emoji", + "Segoe UI Symbol", + "Noto Color Emoji" + ], + "$description": "Sans-serif font family.", + "source": "$font-family-sans-serif" } }, "serif": { - "source": "$font-family-serif", "$value": "serif", - "$description": "Serif font family." + "$description": "Serif font family.", + "source": "$font-family-serif" }, "monospace": { - "source": "$font-family-monospace", - "$value": ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"], - "$description": "Monospace font family." + "$value": [ + "SFMono-Regular", + "Menlo", + "Monaco", + "Consolas", + "Liberation Mono", + "Courier New", + "monospace" + ], + "$description": "Monospace font family.", + "source": "$font-family-monospace" } }, "size": { "$type": "dimension", "base": { - "source": "$font-size-base", "$value": "1.125rem", - "$description": "Base font size." + "$description": "Base font size.", + "source": "$font-size-base" }, "lg": { - "source": "$lead-font-size", "$value": "calc({typography.font.size.base} * 1.25)", - "$description": "Lead text font size." + "$description": "Lead text font size.", + "source": "$lead-font-size" }, "sm": { - "source": "$small-font-size", "$value": "87.5%", - "$description": "Small font size." + "$description": "Small font size.", + "source": "$small-font-size" }, "xs": { - "source": "$x-small-font-size", "$value": "75%", - "$description": "X-small font size." + "$description": "X-small font size.", + "source": "$x-small-font-size" }, "micro": { - "source": "$micro-font-size", - "$value": ".688rem", "$type": "dimension", - "$description": "Micro utils text font size." + "$value": ".688rem", + "$description": "Micro utils text font size.", + "source": "$micro-font-size" }, "h1": { "base": { - "source": "$h1-font-size", "$value": "2.5rem", - "$description": "Base font size of heading level 1." + "$description": "Base font size of heading level 1.", + "source": "$h1-font-size" }, "mobile": { - "source": "$h1-mobile-font-size", "$value": "2.25rem", - "$description": "Mobile font size of heading level 1." + "$description": "Mobile font size of heading level 1.", + "source": "$h1-mobile-font-size" } }, "h2": { "base": { - "source": "$h2-font-size", "$value": "2rem", - "$description": "Font size of heading level 2." + "$description": "Font size of heading level 2.", + "source": "$h2-font-size" }, "mobile": { - "source": "$h2-mobile-font-size", "$value": "{typography.font.size.h2.base}", - "$description": "Mobile font size of heading level 2." + "$description": "Mobile font size of heading level 2.", + "source": "$h2-mobile-font-size" } }, "h3": { "base": { - "source": "$h3-font-size", "$value": "1.375rem", - "$description": "Font size of heading level 3." + "$description": "Font size of heading level 3.", + "source": "$h3-font-size" }, "mobile": { - "source": "$h3-mobile-font-size", "$value": "{typography.font.size.h3.base}", - "$description": "Mobile font size of heading level 3." + "$description": "Mobile font size of heading level 3.", + "source": "$h3-mobile-font-size" } }, "h4": { "base": { - "source": "$h4-font-size", "$value": "1.125rem", - "$description": "Font size of heading level 4." + "$description": "Font size of heading level 4.", + "source": "$h4-font-size" }, "mobile": { - "source": "$h4-mobile-font-size", "$value": "{typography.font.size.h4.base}", - "$description": "Mobile font size of heading level 4." + "$description": "Mobile font size of heading level 4.", + "source": "$h4-mobile-font-size" } }, "h5": { "base": { - "source": "$h5-font-size", "$value": ".875rem", - "$description": "Font size of heading level 5." + "$description": "Font size of heading level 5.", + "source": "$h5-font-size" }, "mobile": { - "source": "$h5-mobile-font-size", "$value": "{typography.font.size.h5.base}", - "$description": "Mobile font size of heading level 5." + "$description": "Mobile font size of heading level 5.", + "source": "$h5-mobile-font-size" } }, "h6": { "base": { - "source": "$h6-font-size", "$value": ".75rem", - "$description": "Font size of heading level 6." + "$description": "Font size of heading level 6.", + "source": "$h6-font-size" }, "mobile": { - "source": "$h6-mobile-font-size", "$value": "{typography.font.size.h6.base}", - "$description": "Mobile font size of heading level 6." + "$description": "Mobile font size of heading level 6.", + "source": "$h6-mobile-font-size" } }, "display": { "1": { - "source": "$display1-size", "$value": "3.75rem", - "$description": "Font size for heading of level 1." + "$description": "Font size for heading of level 1.", + "source": "$display1-size" }, "2": { - "source": "$display2-size", "$value": "4.875rem", - "$description": "Font size for heading of level 2." + "$description": "Font size for heading of level 2.", + "source": "$display2-size" }, "3": { - "source": "$display3-size", "$value": "5.625rem", - "$description": "Font size for heading of level 3." + "$description": "Font size for heading of level 3.", + "source": "$display3-size" }, "4": { - "source": "$display4-size", "$value": "7.5rem", - "$description": "Font size for heading of level 4." + "$description": "Font size for heading of level 4.", + "source": "$display4-size" }, "mobile": { "1": { - "source": "$display-mobile-size", "$value": "3.25rem", - "$description": "Mobile font size for heading of level 1." + "$description": "Mobile font size for heading of level 1.", + "source": "$display-mobile-size" }, "2": { "$value": "{typography.font.size.display.mobile.1}", @@ -172,72 +192,72 @@ "weight": { "$type": "fontWeight", "lighter": { - "source": "$font-weight-lighter", "$value": "lighter", - "$description": "Lighter font weight." + "$description": "Lighter font weight.", + "source": "$font-weight-lighter" }, "light": { - "source": "$font-weight-light", "$value": "300", - "$description": "Light font weight." + "$description": "Light font weight.", + "source": "$font-weight-light" }, "normal": { - "source": "$font-weight-normal", "$value": "400", - "$description": "Normal font weight." + "$description": "Normal font weight.", + "source": "$font-weight-normal" }, "semi": { "bold": { - "source": "$font-weight-semi-bold", "$value": "500", - "$description": "Semi-bold font weight." + "$description": "Semi-bold font weight.", + "source": "$font-weight-semi-bold" } }, "bold": { - "source": "$font-weight-bold", "$value": "700", - "$description": "Bold font weight." + "$description": "Bold font weight.", + "source": "$font-weight-bold" }, "bolder": { - "source": "$font-weight-bolder", "$value": "bolder", - "$description": "Bolder font weight." + "$description": "Bolder font weight.", + "source": "$font-weight-bolder" }, "base": { - "source": "$font-weight-base", "$value": "{typography.font.weight.normal}", - "$description": "Basic font weight." + "$description": "Basic font weight.", + "source": "$font-weight-base" }, "lead": { - "source": "$lead-font-weight", "$value": "inherit", - "$description": "Lead text font weight." + "$description": "Lead text font weight.", + "source": "$lead-font-weight" }, "table-th": { - "source": "$table-th-font-weight", "$value": "bold", - "$description": "Table th font weight." + "$description": "Table th font weight.", + "source": "$table-th-font-weight" }, "display": { "1": { - "source": "$display1-weight", "$value": "{typography.font.weight.bold}", - "$description": "Font weight of display level 1." + "$description": "Font weight of display level 1.", + "source": "$display1-weight" }, "2": { - "source": "$display2-weight", "$value": "{typography.font.weight.bold}", - "$description": "Font weight of display level 2." + "$description": "Font weight of display level 2.", + "source": "$display2-weight" }, "3": { - "source": "$display3-weight", "$value": "{typography.font.weight.bold}", - "$description": "Font weight of display level 3." + "$description": "Font weight of display level 3.", + "source": "$display3-weight" }, "4": { - "source": "$display4-weight", "$value": "{typography.font.weight.bold}", - "$description": "Font weight of display level 4." + "$description": "Font weight of display level 4.", + "source": "$display4-weight" } } } @@ -245,42 +265,42 @@ "line-height": { "$type": "number", "base": { - "source": "$line-height-base", "$value": "1.5556", - "$description": "Basic line height." + "$description": "Basic line height.", + "source": "$line-height-base" }, "lg": { - "source": "$line-height-lg", "$value": "1.5", - "$description": "Large line height." + "$description": "Large line height.", + "source": "$line-height-lg" }, "sm": { - "source": "$line-height-sm", "$value": "1.5", - "$description": "Small line height." + "$description": "Small line height.", + "source": "$line-height-sm" }, "micro": { - "source": "$micro-line-height", "$value": ".938rem", - "$description": "Micro utils line height." + "$description": "Micro utils line height.", + "source": "$micro-line-height" }, "display": { "base": { - "source": "$display-line-height", "$value": "1", - "$description": "Standard display line height." + "$description": "Standard display line height.", + "source": "$display-line-height" }, "mobile": { - "source": "$display-mobile-line-height", "$value": "3.5rem", - "$description": "Mobile display line height." + "$description": "Mobile display line height.", + "source": "$display-mobile-line-height" } } }, "print-page-size": { - "source": "$print-page-size", + "$type": "dimension", "$value": "a3", - "$type": "dimension" + "source": "$print-page-size" } } } diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json index e945ebcfe6..0351fba5b6 100644 --- a/tokens/src/themes/light/alias/color.json +++ b/tokens/src/themes/light/alias/color.json @@ -2,33 +2,46 @@ "color": { "$type": "color", "bg": { - "base": { "$value": "{color.white}", "$description": "Basic background color." }, + "base": { + "$value": "{color.white}", + "$description": "Basic background color." + }, "active": { - "source": "$component-active-bg", "$value": "{color.primary.500}", - "$description": "Active background color." + "$description": "Active background color.", + "source": "$component-active-bg" } }, "text": { "50": { "black": { - "source": "$text-black-50", - "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.black}", - "$description": "Black text color with transparency of 50%." + "$description": "Black text color with transparency of 50%.", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$text-black-50" }, "white": { - "source": "$text-white-50", - "modify": [{ "type": "alpha", "amount": 0.5 }], "$value": "{color.white}", - "$description": "White text color with transparency of 50%." + "$description": "White text color with transparency of 50%.", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$text-white-50" } } }, "active": { - "source": "$component-active-color", "$value": "{color.white}", - "$description": "Color for active element." + "$description": "Color for active element.", + "source": "$component-active-color" }, "disabled": { "$value": "{color.gray.500}", @@ -42,20 +55,20 @@ }, "table": { "caption": { - "source": "$table-caption-color", "$value": "{color.text-muted}", - "$description": "Table caption color." + "$description": "Table caption color.", + "source": "$table-caption-color" }, "border": { - "source": "$table-border-color", "$value": "{color.border}", - "$description": "Table border color." + "$description": "Table border color.", + "source": "$table-border-color" } }, "border": { - "source": "$border-color", "$value": "{color.gray.200}", - "$description": "Border color." + "$description": "Border color.", + "source": "$border-color" }, "theme": { "bg": { diff --git a/tokens/src/themes/light/components/Alert.json b/tokens/src/themes/light/components/Alert.json index ffb40b3c53..9c6e36d01a 100644 --- a/tokens/src/themes/light/components/Alert.json +++ b/tokens/src/themes/light/components/Alert.json @@ -2,25 +2,67 @@ "color": { "$type": "color", "alert": { - "title": { "source": "$alert-title-color", "$value": "{color.black}" }, - "content": { "source": "$alert-content-color", "$value": "{color.gray.700}" }, + "title": { + "$value": "{color.black}", + "source": "$alert-title-color" + }, + "content": { + "$value": "{color.gray.700}", + "source": "$alert-content-color" + }, "icon": { - "success": { "source": "$alert-success-icon-color", "$value": "{color.theme.default.success}" }, - "info": { "source": "$alert-info-icon-color", "$value": "{color.theme.default.info}" }, - "danger": { "source": "$alert-danger-icon-color", "$value": "{color.theme.default.danger}" }, - "warning": { "source": "$alert-warning-icon-color", "$value": "{color.theme.default.warning}" } + "success": { + "$value": "{color.theme.default.success}", + "source": "$alert-success-icon-color" + }, + "info": { + "$value": "{color.theme.default.info}", + "source": "$alert-info-icon-color" + }, + "danger": { + "$value": "{color.theme.default.danger}", + "source": "$alert-danger-icon-color" + }, + "warning": { + "$value": "{color.theme.default.warning}", + "source": "$alert-warning-icon-color" + } }, "bg": { - "success": { "source": "$alert-success-bg", "$value": "{color.theme.bg.success}" }, - "info": { "source": "$alert-info-bg", "$value": "{color.theme.bg.info}" }, - "danger": { "source": "$alert-danger-bg", "$value": "{color.theme.bg.danger}" }, - "warning": { "source": "$alert-warning-bg", "$value": "{color.theme.bg.warning}" } + "success": { + "$value": "{color.theme.bg.success}", + "source": "$alert-success-bg" + }, + "info": { + "$value": "{color.theme.bg.info}", + "source": "$alert-info-bg" + }, + "danger": { + "$value": "{color.theme.bg.danger}", + "source": "$alert-danger-bg" + }, + "warning": { + "$value": "{color.theme.bg.warning}", + "source": "$alert-warning-bg" + } }, "border": { - "success": { "source": "$alert-success-border-color", "$value": "{color.theme.border.success}" }, - "info": { "source": "$alert-info-border-color", "$value": "{color.theme.border.info}" }, - "danger": { "source": "$alert-danger-border-color", "$value": "{color.theme.border.danger}" }, - "warning": { "source": "$alert-warning-border-color", "$value": "{color.theme.border.warning}" } + "success": { + "$value": "{color.theme.border.success}", + "source": "$alert-success-border-color" + }, + "info": { + "$value": "{color.theme.border.info}", + "source": "$alert-info-border-color" + }, + "danger": { + "$value": "{color.theme.border.danger}", + "source": "$alert-danger-border-color" + }, + "warning": { + "$value": "{color.theme.border.warning}", + "source": "$alert-warning-border-color" + } } } } diff --git a/tokens/src/themes/light/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json index 2bad75960e..2833299995 100644 --- a/tokens/src/themes/light/components/Annotation.json +++ b/tokens/src/themes/light/components/Annotation.json @@ -3,7 +3,6 @@ "$type": "shadow", "annotation": { "box-shadow": { - "source": "$annotation-box-shadow", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -17,7 +16,8 @@ "offsetY": "2px", "blur": "8px" } - ] + ], + "source": "$annotation-box-shadow" } } }, @@ -25,18 +25,48 @@ "$type": "color", "annotation": { "text": { - "success": { "source": "$annotation-success-color", "$value": "{color.white}" }, - "warning": { "source": "$annotation-warning-color", "$value": "{color.black}" }, - "error": { "source": "$annotation-error-color", "$value": "{color.white}" }, - "light": { "source": "$annotation-light-color", "$value": "{color.primary.500}" }, - "dark": { "source": "$annotation-dark-color", "$value": "{color.white}" } + "success": { + "$value": "{color.white}", + "source": "$annotation-success-color" + }, + "warning": { + "$value": "{color.black}", + "source": "$annotation-warning-color" + }, + "error": { + "$value": "{color.white}", + "source": "$annotation-error-color" + }, + "light": { + "$value": "{color.primary.500}", + "source": "$annotation-light-color" + }, + "dark": { + "$value": "{color.white}", + "source": "$annotation-dark-color" + } }, "bg": { - "success": { "source": "$annotation-success-bg", "$value": "{color.success.base}" }, - "warning": { "source": "$annotation-warning-bg", "$value": "{color.accent.b}" }, - "error": { "source": "$annotation-error-bg", "$value": "{color.danger.base}" }, - "light": { "source": "$annotation-light-bg", "$value": "{color.white}" }, - "dark": { "source": "$annotation-dark-bg", "$value": "{color.dark.base}" } + "success": { + "$value": "{color.success.base}", + "source": "$annotation-success-bg" + }, + "warning": { + "$value": "{color.accent.b}", + "source": "$annotation-warning-bg" + }, + "error": { + "$value": "{color.danger.base}", + "source": "$annotation-error-bg" + }, + "light": { + "$value": "{color.white}", + "source": "$annotation-light-bg" + }, + "dark": { + "$value": "{color.dark.base}", + "source": "$annotation-dark-bg" + } } } } diff --git a/tokens/src/themes/light/components/Badge.json b/tokens/src/themes/light/components/Badge.json index 0eca2c6651..33d179b63e 100644 --- a/tokens/src/themes/light/components/Badge.json +++ b/tokens/src/themes/light/components/Badge.json @@ -3,116 +3,308 @@ "$type": "color", "badge": { "text": { - "primary": { "source": "$badge-primary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.primary.base}" }, - "secondary": { "source": "$badge-secondary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.secondary.base}" }, - "success": { "source": "$badge-success-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.success.base}" }, - "danger": { "source": "$badge-danger-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.danger.base}" }, - "warning": { "source": "$badge-warning-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.warning.base}" }, - "info": { "source": "$badge-info-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.info.base}" }, - "light": { "source": "$badge-light-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.light.base}" }, - "dark": { "source": "$badge-dark-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.dark.base}" } + "primary": { + "$value": "{color.primary.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-primary-color" + }, + "secondary": { + "$value": "{color.secondary.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-secondary-color" + }, + "success": { + "$value": "{color.success.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-success-color" + }, + "danger": { + "$value": "{color.danger.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-danger-color" + }, + "warning": { + "$value": "{color.warning.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-warning-color" + }, + "info": { + "$value": "{color.info.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-info-color" + }, + "light": { + "$value": "{color.light.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-light-color" + }, + "dark": { + "$value": "{color.dark.base}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$badge-dark-color" + } }, "bg": { - "primary": { "source": "$badge-primary-bg", "$value": "{color.primary.base}" }, - "secondary": { "source": "$badge-secondary-bg", "$value": "{color.secondary.base}" }, - "success": { "source": "$badge-success-bg", "$value": "{color.success.base}" }, - "warning": { "source": "$badge-warning-bg", "$value": "{color.warning.base}" }, - "danger": { "source": "$badge-danger-bg", "$value": "{color.danger.base}" }, - "info": { "source": "$badge-info-bg", "$value": "{color.info.base}" }, - "light": { "source": "$badge-light-bg", "$value": "{color.light.base}" }, - "dark": { "source": "$badge-dark-bg", "$value": "{color.dark.base}" } + "primary": { + "$value": "{color.primary.base}", + "source": "$badge-primary-bg" + }, + "secondary": { + "$value": "{color.secondary.base}", + "source": "$badge-secondary-bg" + }, + "success": { + "$value": "{color.success.base}", + "source": "$badge-success-bg" + }, + "warning": { + "$value": "{color.warning.base}", + "source": "$badge-warning-bg" + }, + "danger": { + "$value": "{color.danger.base}", + "source": "$badge-danger-bg" + }, + "info": { + "$value": "{color.info.base}", + "source": "$badge-info-bg" + }, + "light": { + "$value": "{color.light.base}", + "source": "$badge-light-bg" + }, + "dark": { + "$value": "{color.dark.base}", + "source": "$badge-dark-bg" + } }, "focus": { - "primary": { "source": "$badge-primary-focus-color", "$value": "{color.badge.text.primary}" }, - "secondary": { "source": "$badge-secondary-focus-color", "$value": "{color.badge.text.secondary}" }, - "success": { "source": "$badge-success-focus-color", "$value": "{color.badge.text.success}" }, - "warning": { "source": "$badge-warning-focus-color", "$value": "{color.badge.text.warning}" }, - "danger": { "source": "$badge-danger-focus-color", "$value": "{color.badge.text.danger}" }, - "info": { "source": "$badge-info-focus-color", "$value": "{color.badge.text.info}" }, - "light": { "source": "$badge-light-focus-color", "$value": "{color.badge.text.light}" }, - "dark": { "source": "$badge-dark-focus-color", "$value": "{color.badge.text.dark}" }, + "primary": { + "$value": "{color.badge.text.primary}", + "source": "$badge-primary-focus-color" + }, + "secondary": { + "$value": "{color.badge.text.secondary}", + "source": "$badge-secondary-focus-color" + }, + "success": { + "$value": "{color.badge.text.success}", + "source": "$badge-success-focus-color" + }, + "warning": { + "$value": "{color.badge.text.warning}", + "source": "$badge-warning-focus-color" + }, + "danger": { + "$value": "{color.badge.text.danger}", + "source": "$badge-danger-focus-color" + }, + "info": { + "$value": "{color.badge.text.info}", + "source": "$badge-info-focus-color" + }, + "light": { + "$value": "{color.badge.text.light}", + "source": "$badge-light-focus-color" + }, + "dark": { + "$value": "{color.badge.text.dark}", + "source": "$badge-dark-focus-color" + }, "bg": { "primary": { - "source": "$badge-primary-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.badge.bg.primary}" + "$value": "{color.badge.bg.primary}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-primary-focus-bg" }, "secondary": { - "source": "$badge-secondary-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.badge.bg.secondary}" + "$value": "{color.badge.bg.secondary}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-secondary-focus-bg" }, "success": { - "source": "$badge-success-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.badge.bg.success}" + "$value": "{color.badge.bg.success}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-success-focus-bg" }, "danger": { - "source": "$badge-danger-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.badge.bg.danger}" + "$value": "{color.badge.bg.danger}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-danger-focus-bg" }, "warning": { - "source": "$badge-warning-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.badge.bg.warning}" + "$value": "{color.badge.bg.warning}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-warning-focus-bg" }, "info": { - "source": "$badge-info-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.badge.bg.info}" + "$value": "{color.badge.bg.info}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-info-focus-bg" }, "light": { - "source": "$badge-light-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.badge.bg.light}" + "$value": "{color.badge.bg.light}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-light-focus-bg" }, "dark": { - "source": "$badge-dark-focus-bg", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.badge.bg.dark}" + "$value": "{color.badge.bg.dark}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$badge-dark-focus-bg" } }, "box-shadow": { "primary": { - "source": "$badge-primary-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }], - "$value": "{color.badge.bg.primary}" + "$value": "{color.badge.bg.primary}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-primary-focus-box-shadow-color" }, "secondary": { - "source": "$badge-secondary-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }], - "$value": "{color.badge.bg.secondary}" + "$value": "{color.badge.bg.secondary}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-secondary-focus-box-shadow-color" }, "success": { - "source": "$badge-success-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }], - "$value": "{color.badge.bg.success}" + "$value": "{color.badge.bg.success}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-success-focus-box-shadow-color" }, "danger": { - "source": "$badge-danger-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }], - "$value": "{color.badge.bg.danger}" + "$value": "{color.badge.bg.danger}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-danger-focus-box-shadow-color" }, "warning": { - "source": "$badge-warning-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }], - "$value": "{color.badge.bg.warning}" + "$value": "{color.badge.bg.warning}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-warning-focus-box-shadow-color" }, "info": { - "source": "$badge-info-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }], - "$value": "{color.badge.bg.info}" + "$value": "{color.badge.bg.info}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-info-focus-box-shadow-color" }, "light": { - "source": "$badge-light-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }], - "$value": "{color.badge.bg.light}" + "$value": "{color.badge.bg.light}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-light-focus-box-shadow-color" }, "dark": { - "source": "$badge-dark-focus-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.05 }], - "$value": "{color.badge.bg.dark}" + "$value": "{color.badge.bg.dark}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$badge-dark-focus-box-shadow-color" } } } diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json index e745bc3616..e7f49af471 100644 --- a/tokens/src/themes/light/components/Breadcrumb.json +++ b/tokens/src/themes/light/components/Breadcrumb.json @@ -2,12 +2,27 @@ "color": { "$type": "color", "breadcrumb": { - "base": { "source": "$breadcrumb-color", "$value": "{color.primary.500}" }, - "active": { "source": "$breadcrumb-active-color", "$value": "{color.gray.500}" }, + "base": { + "$value": "{color.primary.500}", + "source": "$breadcrumb-color" + }, + "active": { + "$value": "{color.gray.500}", + "source": "$breadcrumb-active-color" + }, "inverse": { - "base": { "source": "$breadcrumb-inverse-color", "$value": "{color.white}" }, - "active": { "source": "$breadcrumb-inverse-active", "$value": "{color.light.500}" }, - "spacer": { "source": "$breadcrumb-inverse-spacer", "$value": "{color.light.700}" } + "base": { + "$value": "{color.white}", + "source": "$breadcrumb-inverse-color" + }, + "active": { + "$value": "{color.light.500}", + "source": "$breadcrumb-inverse-active" + }, + "spacer": { + "$value": "{color.light.700}", + "source": "$breadcrumb-inverse-spacer" + } } } } diff --git a/tokens/src/themes/light/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json index eabea9b6cd..45f4d61c87 100644 --- a/tokens/src/themes/light/components/Bubble.json +++ b/tokens/src/themes/light/components/Bubble.json @@ -3,16 +3,40 @@ "$type": "color", "bubble": { "text": { - "success": { "source": "$bubble-success-color", "$value": "{color.white}" }, - "warning": { "source": "$bubble-warning-color", "$value": "{color.white}" }, - "error": { "source": "$bubble-error-color", "$value": "{color.white}" }, - "primary": { "source": "$bubble-primary-color", "$value": "{color.white}" } + "success": { + "$value": "{color.white}", + "source": "$bubble-success-color" + }, + "warning": { + "$value": "{color.white}", + "source": "$bubble-warning-color" + }, + "error": { + "$value": "{color.white}", + "source": "$bubble-error-color" + }, + "primary": { + "$value": "{color.white}", + "source": "$bubble-primary-color" + } }, "bg": { - "success": { "source": "$bubble-success-bg", "$value": "{color.success.base}" }, - "warning": { "source": "$bubble-warning-bg", "$value": "{color.warning.base}" }, - "error": { "source": "$bubble-error-bg", "$value": "{color.danger.base}" }, - "primary": { "source": "$bubble-primary-bg", "$value": "{color.primary.base}" } + "success": { + "$value": "{color.success.base}", + "source": "$bubble-success-bg" + }, + "warning": { + "$value": "{color.warning.base}", + "source": "$bubble-warning-bg" + }, + "error": { + "$value": "{color.danger.base}", + "source": "$bubble-error-bg" + }, + "primary": { + "$value": "{color.primary.base}", + "source": "$bubble-primary-bg" + } } } } diff --git a/tokens/src/themes/light/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json index 23b6357841..0798a40207 100644 --- a/tokens/src/themes/light/components/Button/brand.json +++ b/tokens/src/themes/light/components/Button/brand.json @@ -4,306 +4,345 @@ "btn": { "text": { "brand": { - "source": "$btn-brand-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.bg.brand}" + "$value": "{color.btn.bg.brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-color" }, "outline-brand": { - "source": "$btn-brand-outline-color", - "$value": "{color.brand.base}" + "$value": "{color.brand.base}", + "source": "$btn-brand-outline-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-color", - "$value": "{color.brand.base}" + "$value": "{color.brand.base}", + "source": "$btn-brand-inverse-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-brand-inverse-outline-color" } }, "bg": { "brand": { - "source": "$btn-brand-bg", - "$value": "{color.brand.base}" + "$value": "{color.brand.base}", + "source": "$btn-brand-bg" }, "outline-brand": { - "source": "$btn-brand-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-brand-outline-bg" }, "inverse-brand": { - "source": "$btn-brand-inverse-bg", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.text.inverse-brand}" + "$value": "{color.btn.text.inverse-brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-inverse-bg" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-brand-inverse-outline-bg" } }, "border": { "brand": { - "source": "$btn-brand-border-color", - "$value": "{color.btn.bg.brand}" + "$value": "{color.btn.bg.brand}", + "source": "$btn-brand-border-color" }, "outline-brand": { - "source": "$btn-brand-outline-border-color", - "$value": "{color.brand.base}" + "$value": "{color.brand.base}", + "source": "$btn-brand-outline-border-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-brand-inverse-outline-border-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-brand-inverse-border-color" } }, "hover": { "text": { "brand": { - "source": "$btn-brand-hover-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.hover.bg.brand}" + "$value": "{color.btn.hover.bg.brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-hover-color" }, "outline-brand": { - "source": "$btn-brand-outline-hover-color", - "$value": "{color.theme.hover.brand}" + "$value": "{color.theme.hover.brand}", + "source": "$btn-brand-outline-hover-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.text.inverse-brand}" + "$value": "{color.btn.text.inverse-brand}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-brand-inverse-hover-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-hover-color", - "$value": "{color.theme.hover.brand}" + "$value": "{color.theme.hover.brand}", + "source": "$btn-brand-inverse-outline-hover-color" } }, "bg": { "brand": { - "source": "$btn-brand-hover-bg", - "$value": "{color.theme.hover.brand}" + "$value": "{color.theme.hover.brand}", + "source": "$btn-brand-hover-bg" }, "outline-brand": { - "source": "$btn-brand-outline-hover-bg", - "$value": "{color.brand.100}" + "$value": "{color.brand.100}", + "source": "$btn-brand-outline-hover-bg" }, "inverse-brand": { - "source": "$btn-brand-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.bg.inverse-brand}" + "$value": "{color.btn.bg.inverse-brand}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-brand-inverse-hover-bg" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-hover-bg", - "$value": "{color.brand.100}" + "$value": "{color.brand.100}", + "source": "$btn-brand-inverse-outline-hover-bg" } }, "border": { "brand": { - "source": "$btn-brand-hover-border-color", - "$value": "{color.theme.hover.brand}" + "$value": "{color.theme.hover.brand}", + "source": "$btn-brand-hover-border-color" }, "outline-brand": { - "source": "$btn-brand-outline-hover-border-color", - "$value": "{color.brand.900}" + "$value": "{color.brand.900}", + "source": "$btn-brand-outline-hover-border-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-brand-inverse-outline-hover-border-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-brand-inverse-hover-border-color" } } }, "active": { "text": { "brand": { - "source": "$btn-brand-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.brand}" + "$value": "{color.btn.active.bg.brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-active-color" }, "outline-brand": { - "source": "$btn-brand-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.outline-brand}" + "$value": "{color.btn.active.bg.outline-brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-outline-active-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.btn.text.inverse-brand}" + "$value": "{color.btn.text.inverse-brand}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-brand-inverse-active-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.inverse-outline-brand}" + "$value": "{color.btn.active.bg.inverse-outline-brand}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-brand-inverse-outline-active-color" } }, "bg": { "brand": { - "source": "$btn-brand-active-bg", - "$value": "{color.theme.active.brand}" + "$value": "{color.theme.active.brand}", + "source": "$btn-brand-active-bg" }, "outline-brand": { - "source": "$btn-brand-outline-active-bg", - "$value": "{color.theme.bg.brand}" + "$value": "{color.theme.bg.brand}", + "source": "$btn-brand-outline-active-bg" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-active-bg", - "$value": "{color.theme.bg.brand}" + "$value": "{color.theme.bg.brand}", + "source": "$btn-brand-inverse-outline-active-bg" }, "inverse-brand": { - "source": "$btn-brand-inverse-active-bg", - "$value": "{color.gray.100}" + "$value": "{color.gray.100}", + "source": "$btn-brand-inverse-active-bg" } }, "border": { "brand": { - "source": "$btn-brand-active-border-color", - "$value": "{color.theme.active.brand}" + "$value": "{color.theme.active.brand}", + "source": "$btn-brand-active-border-color" }, "outline-brand": { - "source": "$btn-brand-outline-active-border-color", - "$value": "{color.theme.active.brand}" + "$value": "{color.theme.active.brand}", + "source": "$btn-brand-outline-active-border-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-brand-inverse-active-border-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-brand-inverse-outline-active-border-color" } } }, "focus": { "text": { "brand": { - "source": "$btn-brand-focus-color", - "$value": "{color.btn.text.brand}" + "$value": "{color.btn.text.brand}", + "source": "$btn-brand-focus-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-focus-color", - "$value": "{color.btn.text.inverse-brand}" + "$value": "{color.btn.text.inverse-brand}", + "source": "$btn-brand-inverse-focus-color" }, "outline-brand": { - "source": "$btn-brand-outline-focus-color", - "$value": "{color.btn.text.outline-brand}" + "$value": "{color.btn.text.outline-brand}", + "source": "$btn-brand-outline-focus-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-focus-color", - "$value": "{color.btn.text.inverse-outline-brand}" + "$value": "{color.btn.text.inverse-outline-brand}", + "source": "$btn-brand-inverse-outline-focus-color" } }, "border": { "brand": { - "source": "$btn-brand-focus-border-color", - "$value": "{color.btn.border.brand}" + "$value": "{color.btn.border.brand}", + "source": "$btn-brand-focus-border-color" }, "outline-brand": { - "source": "$btn-brand-outline-focus-border-color", - "$value": "{color.btn.border.outline-brand}" + "$value": "{color.btn.border.outline-brand}", + "source": "$btn-brand-outline-focus-border-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-brand-inverse-focus-border-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-focus-border-color", - "$value": "{color.btn.border.inverse-outline-brand}" + "$value": "{color.btn.border.inverse-outline-brand}", + "source": "$btn-brand-inverse-outline-focus-border-color" } }, "bg": { "brand": { - "source": "$btn-brand-focus-bg", - "$value": "{color.btn.bg.brand}" + "$value": "{color.btn.bg.brand}", + "source": "$btn-brand-focus-bg" }, "inverse-brand": { - "source": "$btn-brand-inverse-focus-bg", - "$value": "{color.btn.bg.inverse-brand}" + "$value": "{color.btn.bg.inverse-brand}", + "source": "$btn-brand-inverse-focus-bg" }, "outline-brand": { - "source": "$btn-brand-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-brand-outline-focus-bg" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-brand-inverse-outline-focus-bg" } }, "outline": { "brand": { - "source": "$btn-brand-focus-outline-color", - "$value": "{color.theme.focus.brand}" + "$value": "{color.theme.focus.brand}", + "source": "$btn-brand-focus-outline-color" }, "outline-brand": { - "source": "$btn-brand-outline-focus-outline-color", - "$value": "{color.theme.focus.brand}" + "$value": "{color.theme.focus.brand}", + "source": "$btn-brand-outline-focus-outline-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-brand}" + "$value": "{color.btn.focus.border.inverse-brand}", + "source": "$btn-brand-inverse-focus-outline-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-outline-brand}" + "$value": "{color.btn.focus.border.inverse-outline-brand}", + "source": "$btn-brand-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { "brand": { - "source": "$btn-brand-disabled-color", - "$value": "{color.btn.text.brand}" + "$value": "{color.btn.text.brand}", + "source": "$btn-brand-disabled-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-disabled-color", - "$value": "{color.brand.500}" + "$value": "{color.brand.500}", + "source": "$btn-brand-inverse-disabled-color" }, "outline-brand": { - "source": "$btn-brand-outline-disabled-color", - "$value": "{color.btn.hover.text.outline-brand}" + "$value": "{color.btn.hover.text.outline-brand}", + "source": "$btn-brand-outline-disabled-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-disabled-color", - "$value": "{color.btn.text.inverse-outline-brand}" + "$value": "{color.btn.text.inverse-outline-brand}", + "source": "$btn-brand-inverse-outline-disabled-color" } }, "bg": { "brand": { - "source": "$btn-brand-disabled-bg", - "$value": "{color.btn.bg.brand}" + "$value": "{color.btn.bg.brand}", + "source": "$btn-brand-disabled-bg" }, "outline-brand": { - "source": "$btn-brand-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-brand-outline-disabled-bg" }, "inverse-brand": { - "source": "$btn-brand-inverse-disabled-bg", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-brand-inverse-disabled-bg" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-disabled-bg", - "$value": "{color.btn.bg.inverse-outline-brand}" + "$value": "{color.btn.bg.inverse-outline-brand}", + "source": "$btn-brand-inverse-outline-disabled-bg" } }, "border": { "brand": { - "source": "$btn-brand-disabled-border-color", - "$value": "{color.btn.border.brand}" + "$value": "{color.btn.border.brand}", + "source": "$btn-brand-disabled-border-color" }, "outline-brand": { - "source": "$btn-brand-outline-disabled-border-color", - "$value": "{color.btn.border.outline-brand}" + "$value": "{color.btn.border.outline-brand}", + "source": "$btn-brand-outline-disabled-border-color" }, "inverse-brand": { - "source": "$btn-brand-inverse-disabled-border-color", - "$value": "{color.btn.disabled.bg.inverse-brand}" + "$value": "{color.btn.disabled.bg.inverse-brand}", + "source": "$btn-brand-inverse-disabled-border-color" }, "inverse-outline-brand": { - "source": "$btn-brand-inverse-outline-disabled-border-color", - "$value": "{color.btn.text.inverse-outline-brand}" + "$value": "{color.btn.text.inverse-outline-brand}", + "source": "$btn-brand-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json index 2a8c1f4bfe..200a60bae0 100644 --- a/tokens/src/themes/light/components/Button/core.json +++ b/tokens/src/themes/light/components/Button/core.json @@ -2,22 +2,34 @@ "color": { "$type": "color", "btn": { - "disabled-link": { "source": "$btn-link-disabled-color", "$value": "{color.disabled}" } + "disabled-link": { + "$value": "{color.disabled}", + "source": "$btn-link-disabled-color" + } } }, "elevation": { "$type": "shadow", "btn": { "box-shadow": { - "base": { "source": "$btn-box-shadow", "$value": "none" }, - "active": { "source": "$btn-active-box-shadow", "$value": "none" } + "base": { + "$value": "none", + "source": "$btn-box-shadow" + }, + "active": { + "$value": "none", + "source": "$btn-active-box-shadow" + } } } }, "other": { "$type": "number", "btn": { - "disabled-opacity": { "source": "$btn-disabled-opacity", "$value": ".65" } + "disabled-opacity": { + "$value": ".65", + "source": "$btn-disabled-opacity" + } } } } diff --git a/tokens/src/themes/light/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json index 92ec188b21..5491462af9 100644 --- a/tokens/src/themes/light/components/Button/danger.json +++ b/tokens/src/themes/light/components/Button/danger.json @@ -4,300 +4,345 @@ "btn": { "text": { "danger": { - "source": "$btn-danger-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.bg.danger}" + "$value": "{color.btn.bg.danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-color" + }, + "outline-danger": { + "$value": "{color.danger.base}", + "source": "$btn-danger-outline-color" }, - "outline-danger": { "source": "$btn-danger-outline-color", "$value": "{color.danger.base}" }, "inverse-danger": { - "source": "$btn-danger-inverse-color", - "$value": "{color.danger.base}" + "$value": "{color.danger.base}", + "source": "$btn-danger-inverse-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-danger-inverse-outline-color" } }, "bg": { - "danger": { "source": "$btn-danger-bg", "$value": "{color.danger.base}" }, + "danger": { + "$value": "{color.danger.base}", + "source": "$btn-danger-bg" + }, "outline-danger": { - "source": "$btn-danger-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-danger-outline-bg" }, "inverse-danger": { - "source": "$btn-danger-inverse-bg", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.text.inverse-danger}" + "$value": "{color.btn.text.inverse-danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-inverse-bg" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-danger-inverse-outline-bg" } }, "border": { "danger": { - "source": "$btn-danger-border-color", - "$value": "{color.btn.bg.danger}" + "$value": "{color.btn.bg.danger}", + "source": "$btn-danger-border-color" }, "outline-danger": { - "source": "$btn-danger-outline-border-color", - "$value": "{color.danger.base}" + "$value": "{color.danger.base}", + "source": "$btn-danger-outline-border-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-danger-inverse-border-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-danger-inverse-outline-border-color" } }, "hover": { "text": { "danger": { - "source": "$btn-danger-hover-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.hover.bg.danger}" + "$value": "{color.btn.hover.bg.danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-hover-color" }, "outline-danger": { - "source": "$btn-danger-outline-hover-color", - "$value": "{color.theme.hover.danger}" + "$value": "{color.theme.hover.danger}", + "source": "$btn-danger-outline-hover-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.text.inverse-danger}" + "$value": "{color.btn.text.inverse-danger}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-danger-inverse-hover-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-hover-color", - "$value": "{color.theme.hover.danger}" + "$value": "{color.theme.hover.danger}", + "source": "$btn-danger-inverse-outline-hover-color" } }, "bg": { "danger": { - "source": "$btn-danger-hover-bg", - "$value": "{color.theme.hover.danger}" + "$value": "{color.theme.hover.danger}", + "source": "$btn-danger-hover-bg" }, "outline-danger": { - "source": "$btn-danger-outline-hover-bg", - "$value": "{color.danger.100}" + "$value": "{color.danger.100}", + "source": "$btn-danger-outline-hover-bg" }, "inverse-danger": { - "source": "$btn-danger-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.bg.inverse-danger}" + "$value": "{color.btn.bg.inverse-danger}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-danger-inverse-hover-bg" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-hover-bg", - "$value": "{color.danger.100}" + "$value": "{color.danger.100}", + "source": "$btn-danger-inverse-outline-hover-bg" } }, "border": { "danger": { - "source": "$btn-danger-hover-border-color", - "$value": "{color.theme.hover.danger}" + "$value": "{color.theme.hover.danger}", + "source": "$btn-danger-hover-border-color" }, "outline-danger": { - "source": "$btn-danger-outline-hover-border-color", - "$value": "{color.danger.900}" + "$value": "{color.danger.900}", + "source": "$btn-danger-outline-hover-border-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-danger-inverse-hover-border-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-danger-inverse-outline-hover-border-color" } } }, "active": { "text": { "danger": { - "source": "$btn-danger-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.danger}" + "$value": "{color.btn.active.bg.danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-active-color" }, "outline-danger": { - "source": "$btn-danger-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.outline-danger}" + "$value": "{color.btn.active.bg.outline-danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-outline-active-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.btn.text.inverse-danger}" + "$value": "{color.btn.text.inverse-danger}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-danger-inverse-active-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.inverse-outline-danger}" + "$value": "{color.btn.active.bg.inverse-outline-danger}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-danger-inverse-outline-active-color" } }, "bg": { "danger": { - "source": "$btn-danger-active-bg", - "$value": "{color.theme.active.danger}" + "$value": "{color.theme.active.danger}", + "source": "$btn-danger-active-bg" }, "outline-danger": { - "source": "$btn-danger-outline-active-bg", - "$value": "{color.theme.bg.danger}" + "$value": "{color.theme.bg.danger}", + "source": "$btn-danger-outline-active-bg" }, "inverse-danger": { - "source": "$btn-danger-inverse-active-bg", - "$value": "{color.gray.100}" + "$value": "{color.gray.100}", + "source": "$btn-danger-inverse-active-bg" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-active-bg", - "$value": "{color.theme.bg.danger}" + "$value": "{color.theme.bg.danger}", + "source": "$btn-danger-inverse-outline-active-bg" } }, "border": { "danger": { - "source": "$btn-danger-active-border-color", - "$value": "{color.theme.active.danger}" + "$value": "{color.theme.active.danger}", + "source": "$btn-danger-active-border-color" }, "outline-danger": { - "source": "$btn-danger-outline-active-border-color", - "$value": "{color.theme.active.danger}" + "$value": "{color.theme.active.danger}", + "source": "$btn-danger-outline-active-border-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-danger-inverse-active-border-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-danger-inverse-outline-active-border-color" } } }, "focus": { "text": { "danger": { - "source": "$btn-danger-focus-color", - "$value": "{color.btn.text.danger}" + "$value": "{color.btn.text.danger}", + "source": "$btn-danger-focus-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-focus-color", - "$value": "{color.btn.text.inverse-danger}" + "$value": "{color.btn.text.inverse-danger}", + "source": "$btn-danger-inverse-focus-color" }, "outline-danger": { - "source": "$btn-danger-outline-focus-color", - "$value": "{color.btn.text.outline-danger}" + "$value": "{color.btn.text.outline-danger}", + "source": "$btn-danger-outline-focus-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-focus-color", - "$value": "{color.btn.text.inverse-outline-danger}" + "$value": "{color.btn.text.inverse-outline-danger}", + "source": "$btn-danger-inverse-outline-focus-color" } }, "border": { "danger": { - "source": "$btn-danger-focus-border-color", - "$value": "{color.btn.focus.bg.danger}" + "$value": "{color.btn.focus.bg.danger}", + "source": "$btn-danger-focus-border-color" }, "outline-danger": { - "source": "$btn-danger-outline-focus-border-color", - "$value": "{color.btn.border.outline-danger}" + "$value": "{color.btn.border.outline-danger}", + "source": "$btn-danger-outline-focus-border-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-danger-inverse-focus-border-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-danger-inverse-outline-focus-border-color" } }, "bg": { "danger": { - "source": "$btn-danger-focus-bg", - "$value": "{color.btn.bg.danger}" + "$value": "{color.btn.bg.danger}", + "source": "$btn-danger-focus-bg" }, "outline-danger": { - "source": "$btn-danger-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-danger-outline-focus-bg" }, "inverse-danger": { - "source": "$btn-danger-inverse-focus-bg", - "$value": "{color.btn.bg.inverse-danger}" + "$value": "{color.btn.bg.inverse-danger}", + "source": "$btn-danger-inverse-focus-bg" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-danger-inverse-outline-focus-bg" } }, "outline": { "danger": { - "source": "$btn-danger-focus-outline-color", - "$value": "{color.theme.focus.danger}" + "$value": "{color.theme.focus.danger}", + "source": "$btn-danger-focus-outline-color" }, "outline-danger": { - "source": "$btn-danger-outline-focus-outline-color", - "$value": "{color.theme.focus.danger}" + "$value": "{color.theme.focus.danger}", + "source": "$btn-danger-outline-focus-outline-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-danger}" + "$value": "{color.btn.focus.border.inverse-danger}", + "source": "$btn-danger-inverse-focus-outline-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-danger}" + "$value": "{color.btn.focus.border.inverse-danger}", + "source": "$btn-danger-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { "danger": { - "source": "$btn-danger-disabled-color", - "$value": "{color.btn.text.danger}" + "$value": "{color.btn.text.danger}", + "source": "$btn-danger-disabled-color" }, "outline-danger": { - "source": "$btn-danger-outline-disabled-color", - "$value": "{color.btn.hover.text.outline-danger}" + "$value": "{color.btn.hover.text.outline-danger}", + "source": "$btn-danger-outline-disabled-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-disabled-color", - "$value": "{color.danger.base}" + "$value": "{color.danger.base}", + "source": "$btn-danger-inverse-disabled-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-disabled-color", - "$value": "{color.btn.text.inverse-outline-danger}" + "$value": "{color.btn.text.inverse-outline-danger}", + "source": "$btn-danger-inverse-outline-disabled-color" } }, "bg": { "danger": { - "source": "$btn-danger-disabled-bg", - "$value": "{color.btn.bg.danger}" + "$value": "{color.btn.bg.danger}", + "source": "$btn-danger-disabled-bg" }, "outline-danger": { - "source": "$btn-danger-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-danger-outline-disabled-bg" }, "inverse-danger": { - "source": "$btn-danger-inverse-disabled-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-danger-inverse-disabled-bg" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-danger-inverse-outline-disabled-bg" } }, "border": { "danger": { - "source": "$btn-danger-disabled-border-color", - "$value": "{color.btn.border.danger}" + "$value": "{color.btn.border.danger}", + "source": "$btn-danger-disabled-border-color" }, "outline-danger": { - "source": "$btn-danger-outline-disabled-border-color", - "$value": "{color.btn.border.outline-danger}" + "$value": "{color.btn.border.outline-danger}", + "source": "$btn-danger-outline-disabled-border-color" }, "inverse-danger": { - "source": "$btn-danger-inverse-disabled-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-danger-inverse-disabled-border-color" }, "inverse-outline-danger": { - "source": "$btn-danger-inverse-outline-disabled-border-color", - "$value": "{color.btn.border.inverse-outline-danger}" + "$value": "{color.btn.border.inverse-outline-danger}", + "source": "$btn-danger-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/themes/light/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json index 1256ed603c..248cd52eff 100644 --- a/tokens/src/themes/light/components/Button/dark.json +++ b/tokens/src/themes/light/components/Button/dark.json @@ -4,306 +4,345 @@ "btn": { "text": { "dark": { - "source": "$btn-dark-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.bg.dark}" + "$value": "{color.btn.bg.dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-color" }, "outline-dark": { - "source": "$btn-dark-outline-color", - "$value": "{color.dark.base}" + "$value": "{color.dark.base}", + "source": "$btn-dark-outline-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-color", - "$value": "{color.dark.base}" + "$value": "{color.dark.base}", + "source": "$btn-dark-inverse-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-dark-inverse-outline-color" } }, "bg": { "dark": { - "source": "$btn-dark-bg", - "$value": "{color.dark.base}" + "$value": "{color.dark.base}", + "source": "$btn-dark-bg" }, "outline-dark": { - "source": "$btn-dark-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-dark-outline-bg" }, "inverse-dark": { - "source": "$btn-dark-inverse-bg", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.text.inverse-dark}" + "$value": "{color.btn.text.inverse-dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-inverse-bg" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-dark-inverse-outline-bg" } }, "border": { "dark": { - "source": "$btn-dark-border-color", - "$value": "{color.btn.bg.dark}" + "$value": "{color.btn.bg.dark}", + "source": "$btn-dark-border-color" }, "outline-dark": { - "source": "$btn-dark-outline-border-color", - "$value": "{color.dark.base}" + "$value": "{color.dark.base}", + "source": "$btn-dark-outline-border-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-dark-inverse-border-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-dark-inverse-outline-border-color" } }, "hover": { "text": { "dark": { - "source": "$btn-dark-hover-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.hover.bg.dark}" + "$value": "{color.btn.hover.bg.dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-hover-color" }, "outline-dark": { - "source": "$btn-dark-outline-hover-color", - "$value": "{color.theme.hover.dark}" + "$value": "{color.theme.hover.dark}", + "source": "$btn-dark-outline-hover-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.text.inverse-dark}" + "$value": "{color.btn.text.inverse-dark}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-dark-inverse-hover-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-hover-color", - "$value": "{color.theme.hover.dark}" + "$value": "{color.theme.hover.dark}", + "source": "$btn-dark-inverse-outline-hover-color" } }, "bg": { "dark": { - "source": "$btn-dark-hover-bg", - "$value": "{color.theme.hover.dark}" + "$value": "{color.theme.hover.dark}", + "source": "$btn-dark-hover-bg" }, "outline-dark": { - "source": "$btn-dark-outline-hover-bg", - "$value": "{color.dark.100}" + "$value": "{color.dark.100}", + "source": "$btn-dark-outline-hover-bg" }, "inverse-dark": { - "source": "$btn-dark-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.bg.inverse-dark}" + "$value": "{color.btn.bg.inverse-dark}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-dark-inverse-hover-bg" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-hover-bg", - "$value": "{color.dark.100}" + "$value": "{color.dark.100}", + "source": "$btn-dark-inverse-outline-hover-bg" } }, "border": { "dark": { - "source": "$btn-dark-hover-border-color", - "$value": "{color.theme.hover.dark}" + "$value": "{color.theme.hover.dark}", + "source": "$btn-dark-hover-border-color" }, "outline-dark": { - "source": "$btn-dark-outline-hover-border-color", - "$value": "{color.dark.900}" + "$value": "{color.dark.900}", + "source": "$btn-dark-outline-hover-border-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-dark-inverse-hover-border-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-dark-inverse-outline-hover-border-color" } } }, "active": { "text": { "dark": { - "source": "$btn-dark-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.dark}" + "$value": "{color.btn.active.bg.dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-active-color" }, "outline-dark": { - "source": "$btn-dark-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.outline-dark}" + "$value": "{color.btn.active.bg.outline-dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-outline-active-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.btn.text.inverse-dark}" + "$value": "{color.btn.text.inverse-dark}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-dark-inverse-active-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.inverse-outline-dark}" + "$value": "{color.btn.active.bg.inverse-outline-dark}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-dark-inverse-outline-active-color" } }, "bg": { "dark": { - "source": "$btn-dark-active-bg", - "$value": "{color.theme.active.dark}" + "$value": "{color.theme.active.dark}", + "source": "$btn-dark-active-bg" }, "outline-dark": { - "source": "$btn-dark-outline-active-bg", - "$value": "{color.theme.bg.dark}" + "$value": "{color.theme.bg.dark}", + "source": "$btn-dark-outline-active-bg" }, "inverse-dark": { - "source": "$btn-dark-inverse-active-bg", - "$value": "{color.gray.100}" + "$value": "{color.gray.100}", + "source": "$btn-dark-inverse-active-bg" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-active-bg", - "$value": "{color.theme.bg.dark}" + "$value": "{color.theme.bg.dark}", + "source": "$btn-dark-inverse-outline-active-bg" } }, "border": { "dark": { - "source": "$btn-dark-active-border-color", - "$value": "{color.theme.active.dark}" + "$value": "{color.theme.active.dark}", + "source": "$btn-dark-active-border-color" }, "outline-dark": { - "source": "$btn-dark-outline-active-border-color", - "$value": "{color.theme.active.dark}" + "$value": "{color.theme.active.dark}", + "source": "$btn-dark-outline-active-border-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-dark-inverse-active-border-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-dark-inverse-outline-active-border-color" } } }, "focus": { "text": { "dark": { - "source": "$btn-dark-focus-color", - "$value": "{color.btn.text.dark}" + "$value": "{color.btn.text.dark}", + "source": "$btn-dark-focus-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-focus-color", - "$value": "{color.btn.text.inverse-dark}" + "$value": "{color.btn.text.inverse-dark}", + "source": "$btn-dark-inverse-focus-color" }, "outline-dark": { - "source": "$btn-dark-outline-focus-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-dark-outline-focus-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-focus-color", - "$value": "{color.btn.text.inverse-outline-dark}" + "$value": "{color.btn.text.inverse-outline-dark}", + "source": "$btn-dark-inverse-outline-focus-color" } }, "border": { "dark": { - "source": "$btn-dark-focus-border-color", - "$value": "{color.btn.focus.bg.dark}" + "$value": "{color.btn.focus.bg.dark}", + "source": "$btn-dark-focus-border-color" }, "outline-dark": { - "source": "$btn-dark-outline-focus-border-color", - "$value": "{color.btn.border.outline-dark}" + "$value": "{color.btn.border.outline-dark}", + "source": "$btn-dark-outline-focus-border-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-dark-inverse-focus-border-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-dark-inverse-outline-focus-border-color" } }, "bg": { "dark": { - "source": "$btn-dark-focus-bg", - "$value": "{color.btn.bg.dark}" + "$value": "{color.btn.bg.dark}", + "source": "$btn-dark-focus-bg" }, "outline-dark": { - "source": "$btn-dark-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-dark-outline-focus-bg" }, "inverse-dark": { - "source": "$btn-dark-inverse-focus-bg", - "$value": "{color.btn.bg.inverse-dark}" + "$value": "{color.btn.bg.inverse-dark}", + "source": "$btn-dark-inverse-focus-bg" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-dark-inverse-outline-focus-bg" } }, "outline": { "dark": { - "source": "$btn-dark-focus-outline-color", - "$value": "{color.theme.focus.dark}" + "$value": "{color.theme.focus.dark}", + "source": "$btn-dark-focus-outline-color" }, "outline-dark": { - "source": "$btn-dark-outline-focus-outline-color", - "$value": "{color.theme.focus.dark}" + "$value": "{color.theme.focus.dark}", + "source": "$btn-dark-outline-focus-outline-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-dark}" + "$value": "{color.btn.focus.border.inverse-dark}", + "source": "$btn-dark-inverse-focus-outline-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-focus-border-color", - "$value": "{color.btn.focus.border.inverse-outline-dark}" + "$value": "{color.btn.focus.border.inverse-outline-dark}", + "source": "$btn-dark-inverse-outline-focus-border-color" } } }, "disabled": { "text": { "dark": { - "source": "$btn-dark-disabled-color", - "$value": "{color.btn.text.dark}" + "$value": "{color.btn.text.dark}", + "source": "$btn-dark-disabled-color" }, "outline-dark": { - "source": "$btn-dark-outline-disabled-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-dark-outline-disabled-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-disabled-color", - "$value": "{color.btn.text.inverse-dark}" + "$value": "{color.btn.text.inverse-dark}", + "source": "$btn-dark-inverse-disabled-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-disabled-color", - "$value": "{color.btn.text.inverse-outline-dark}" + "$value": "{color.btn.text.inverse-outline-dark}", + "source": "$btn-dark-inverse-outline-disabled-color" } }, "bg": { "dark": { - "source": "$btn-dark-disabled-bg", - "$value": "{color.btn.bg.dark}" + "$value": "{color.btn.bg.dark}", + "source": "$btn-dark-disabled-bg" }, "outline-dark": { - "source": "$btn-dark-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-dark-outline-disabled-bg" }, "inverse-dark": { - "source": "$btn-dark-inverse-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-dark-inverse-disabled-bg" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-dark-inverse-outline-disabled-bg" } }, "border": { "dark": { - "source": "$btn-dark-disabled-border-color", - "$value": "{color.btn.border.dark}" + "$value": "{color.btn.border.dark}", + "source": "$btn-dark-disabled-border-color" }, "outline-dark": { - "source": "$btn-dark-outline-disabled-border-color", - "$value": "{color.btn.hover.text.outline-dark}" + "$value": "{color.btn.hover.text.outline-dark}", + "source": "$btn-dark-outline-disabled-border-color" }, "inverse-dark": { - "source": "$btn-dark-inverse-disabled-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-dark-inverse-disabled-border-color" }, "inverse-outline-dark": { - "source": "$btn-dark-inverse-outline-disabled-border-color", - "$value": "{color.btn.focus.border.inverse-outline-dark}" + "$value": "{color.btn.focus.border.inverse-outline-dark}", + "source": "$btn-dark-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/themes/light/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json index 91d38cfe14..e403ffc2ef 100644 --- a/tokens/src/themes/light/components/Button/info.json +++ b/tokens/src/themes/light/components/Button/info.json @@ -4,306 +4,345 @@ "btn": { "text": { "info": { - "source": "$btn-info-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.bg.info}" + "$value": "{color.btn.bg.info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-color" }, "outline-info": { - "source": "$btn-info-outline-color", - "$value": "{color.info.base}" + "$value": "{color.info.base}", + "source": "$btn-info-outline-color" }, "inverse-info": { - "source": "$btn-info-inverse-color", - "$value": "{color.info.base}" + "$value": "{color.info.base}", + "source": "$btn-info-inverse-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-info-inverse-outline-color" } }, "bg": { "info": { - "source": "$btn-info-bg", - "$value": "{color.info.base}" + "$value": "{color.info.base}", + "source": "$btn-info-bg" }, "outline-info": { - "source": "$btn-info-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-info-outline-bg" }, "inverse-info": { - "source": "$btn-info-inverse-bg", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.text.inverse-info}" + "$value": "{color.btn.text.inverse-info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-inverse-bg" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-info-inverse-outline-bg" } }, "border": { "info": { - "source": "$btn-info-border-color", - "$value": "{color.btn.bg.info}" + "$value": "{color.btn.bg.info}", + "source": "$btn-info-border-color" }, "outline-info": { - "source": "$btn-info-outline-border-color", - "$value": "{color.info.base}" + "$value": "{color.info.base}", + "source": "$btn-info-outline-border-color" }, "inverse-info": { - "source": "$btn-info-inverse-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-info-inverse-border-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-info-inverse-outline-border-color" } }, "hover": { "text": { "info": { - "source": "$btn-info-hover-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.hover.bg.info}" + "$value": "{color.btn.hover.bg.info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-hover-color" }, "outline-info": { - "source": "$btn-info-outline-hover-color", - "$value": "{color.theme.hover.info}" + "$value": "{color.theme.hover.info}", + "source": "$btn-info-outline-hover-color" }, "inverse-info": { - "source": "$btn-info-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.text.inverse-info}" + "$value": "{color.btn.text.inverse-info}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-info-inverse-hover-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-hover-color", - "$value": "{color.theme.hover.info}" + "$value": "{color.theme.hover.info}", + "source": "$btn-info-inverse-outline-hover-color" } }, "bg": { "info": { - "source": "$btn-info-hover-bg", - "$value": "{color.theme.hover.info}" + "$value": "{color.theme.hover.info}", + "source": "$btn-info-hover-bg" }, "outline-info": { - "source": "$btn-info-outline-hover-bg", - "$value": "{color.info.100}" + "$value": "{color.info.100}", + "source": "$btn-info-outline-hover-bg" }, "inverse-info": { - "source": "$btn-info-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.bg.inverse-info}" + "$value": "{color.btn.bg.inverse-info}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-info-inverse-hover-bg" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-hover-bg", - "$value": "{color.info.100}" + "$value": "{color.info.100}", + "source": "$btn-info-inverse-outline-hover-bg" } }, "border": { "info": { - "source": "$btn-info-hover-border-color", - "$value": "{color.theme.hover.info}" + "$value": "{color.theme.hover.info}", + "source": "$btn-info-hover-border-color" }, "outline-info": { - "source": "$btn-info-outline-hover-border-color", - "$value": "{color.info.900}" + "$value": "{color.info.900}", + "source": "$btn-info-outline-hover-border-color" }, "inverse-info": { - "source": "$btn-info-inverse-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-info-inverse-hover-border-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-info-inverse-outline-hover-border-color" } } }, "active": { "text": { "info": { - "source": "$btn-info-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.info}" + "$value": "{color.btn.active.bg.info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-active-color" }, "outline-info": { - "source": "$btn-info-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.outline-info}" + "$value": "{color.btn.active.bg.outline-info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-outline-active-color" }, "inverse-info": { - "source": "$btn-info-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.btn.text.inverse-info}" + "$value": "{color.btn.text.inverse-info}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-info-inverse-active-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.inverse-outline-info}" + "$value": "{color.btn.active.bg.inverse-outline-info}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-info-inverse-outline-active-color" } }, "bg": { "info": { - "source": "$btn-info-active-bg", - "$value": "{color.theme.active.info}" + "$value": "{color.theme.active.info}", + "source": "$btn-info-active-bg" }, "outline-info": { - "source": "$btn-info-outline-active-bg", - "$value": "{color.theme.bg.info}" + "$value": "{color.theme.bg.info}", + "source": "$btn-info-outline-active-bg" }, "inverse-info": { - "source": "$btn-info-inverse-active-bg", - "$value": "{color.gray.100}" + "$value": "{color.gray.100}", + "source": "$btn-info-inverse-active-bg" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-active-bg", - "$value": "{color.theme.bg.info}" + "$value": "{color.theme.bg.info}", + "source": "$btn-info-inverse-outline-active-bg" } }, "border": { "info": { - "source": "$btn-info-active-border-color", - "$value": "{color.theme.active.info}" + "$value": "{color.theme.active.info}", + "source": "$btn-info-active-border-color" }, "outline-info": { - "source": "$btn-info-outline-active-border-color", - "$value": "{color.theme.active.info}" + "$value": "{color.theme.active.info}", + "source": "$btn-info-outline-active-border-color" }, "inverse-info": { - "source": "$btn-info-inverse-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-info-inverse-active-border-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-info-inverse-outline-active-border-color" } } }, "focus": { "text": { "info": { - "source": "$btn-info-focus-color", - "$value": "{color.btn.text.info}" + "$value": "{color.btn.text.info}", + "source": "$btn-info-focus-color" }, "outline-info": { - "source": "$btn-info-outline-focus-color", - "$value": "{color.btn.text.outline-info}" + "$value": "{color.btn.text.outline-info}", + "source": "$btn-info-outline-focus-color" }, "inverse-info": { - "source": "$btn-info-inverse-focus-color", - "$value": "{color.btn.text.inverse-info}" + "$value": "{color.btn.text.inverse-info}", + "source": "$btn-info-inverse-focus-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-focus-color", - "$value": "{color.btn.text.inverse-outline-info}" + "$value": "{color.btn.text.inverse-outline-info}", + "source": "$btn-info-inverse-outline-focus-color" } }, "border": { "info": { - "source": "$btn-info-focus-border-color", - "$value": "{color.btn.border.info}" + "$value": "{color.btn.border.info}", + "source": "$btn-info-focus-border-color" }, "outline-info": { - "source": "$btn-info-outline-focus-border-color", - "$value": "{color.btn.border.outline-info}" + "$value": "{color.btn.border.outline-info}", + "source": "$btn-info-outline-focus-border-color" }, "inverse-info": { - "source": "$btn-info-inverse-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-info-inverse-focus-border-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-focus-border-color", - "$value": "{color.btn.border.inverse-outline-info}" + "$value": "{color.btn.border.inverse-outline-info}", + "source": "$btn-info-inverse-outline-focus-border-color" } }, "bg": { "info": { - "source": "$btn-info-focus-bg", - "$value": "{color.btn.bg.info}" + "$value": "{color.btn.bg.info}", + "source": "$btn-info-focus-bg" }, "outline-info": { - "source": "$btn-info-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-info-outline-focus-bg" }, "inverse-info": { - "source": "$btn-info-inverse-focus-bg", - "$value": "{color.btn.bg.inverse-info}" + "$value": "{color.btn.bg.inverse-info}", + "source": "$btn-info-inverse-focus-bg" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-info-inverse-outline-focus-bg" } }, "outline": { "info": { - "source": "$btn-info-focus-outline-color", - "$value": "{color.theme.focus.info}" + "$value": "{color.theme.focus.info}", + "source": "$btn-info-focus-outline-color" }, "outline-info": { - "source": "$btn-info-outline-focus-outline-color", - "$value": "{color.theme.focus.info}" + "$value": "{color.theme.focus.info}", + "source": "$btn-info-outline-focus-outline-color" }, "inverse-info": { - "source": "$btn-info-inverse-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-info}" + "$value": "{color.btn.focus.border.inverse-info}", + "source": "$btn-info-inverse-focus-outline-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-outline-info}" + "$value": "{color.btn.focus.border.inverse-outline-info}", + "source": "$btn-info-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { "info": { - "source": "$btn-info-disabled-color", - "$value": "{color.btn.text.info}" + "$value": "{color.btn.text.info}", + "source": "$btn-info-disabled-color" }, "outline-info": { - "source": "$btn-info-outline-disabled-color", - "$value": "{color.btn.text.outline-info}" + "$value": "{color.btn.text.outline-info}", + "source": "$btn-info-outline-disabled-color" }, "inverse-info": { - "source": "$btn-info-inverse-disabled-color", - "$value": "{color.info.base}" + "$value": "{color.info.base}", + "source": "$btn-info-inverse-disabled-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-disabled-color", - "$value": "{color.btn.text.inverse-outline-info}" + "$value": "{color.btn.text.inverse-outline-info}", + "source": "$btn-info-inverse-outline-disabled-color" } }, "bg": { "info": { - "source": "$btn-info-disabled-bg", - "$value": "{color.btn.bg.info}" + "$value": "{color.btn.bg.info}", + "source": "$btn-info-disabled-bg" }, "outline-info": { - "source": "$btn-info-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-info-outline-disabled-bg" }, "inverse-info": { - "source": "$btn-info-inverse-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-info-inverse-disabled-bg" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-info-inverse-outline-disabled-bg" } }, "border": { "info": { - "source": "$btn-info-disabled-border-color", - "$value": "{color.btn.bg.info}" + "$value": "{color.btn.bg.info}", + "source": "$btn-info-disabled-border-color" }, "outline-info": { - "source": "$btn-info-outline-disabled-border-color", - "$value": "{color.btn.border.outline-info}" + "$value": "{color.btn.border.outline-info}", + "source": "$btn-info-outline-disabled-border-color" }, "inverse-info": { - "source": "$btn-info-inverse-disabled-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-info-inverse-disabled-border-color" }, "inverse-outline-info": { - "source": "$btn-info-inverse-outline-disabled-border-color", - "$value": "{color.btn.border.inverse-outline-info}" + "$value": "{color.btn.border.inverse-outline-info}", + "source": "$btn-info-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/themes/light/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json index f7e76f50d8..85a701534a 100644 --- a/tokens/src/themes/light/components/Button/light.json +++ b/tokens/src/themes/light/components/Button/light.json @@ -4,306 +4,345 @@ "btn": { "text": { "light": { - "source": "$btn-light-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.bg.light}" + "$value": "{color.btn.bg.light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-color" }, "outline-light": { - "source": "$btn-light-outline-color", - "$value": "{color.light.base}" + "$value": "{color.light.base}", + "source": "$btn-light-outline-color" }, "inverse-light": { - "source": "$btn-light-inverse-color", - "$value": "{color.light.base}" + "$value": "{color.light.base}", + "source": "$btn-light-inverse-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-light-inverse-outline-color" } }, "bg": { "light": { - "source": "$btn-light-bg", - "$value": "{color.light.base}" + "$value": "{color.light.base}", + "source": "$btn-light-bg" }, "inverse-light": { - "source": "$btn-light-inverse-bg", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.text.inverse-light}" + "$value": "{color.btn.text.inverse-light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-inverse-bg" }, "outline-light": { - "source": "$btn-light-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-light-outline-bg" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-light-inverse-outline-bg" } }, "border": { "light": { - "source": "$btn-light-border-color", - "$value": "{color.btn.bg.light}" + "$value": "{color.btn.bg.light}", + "source": "$btn-light-border-color" }, "outline-light": { - "source": "$btn-light-outline-border-color", - "$value": "{color.light.base}" + "$value": "{color.light.base}", + "source": "$btn-light-outline-border-color" }, "inverse-light": { - "source": "$btn-light-inverse-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-light-inverse-border-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-light-inverse-outline-border-color" } }, "hover": { "text": { "light": { - "source": "$btn-light-hover-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.hover.bg.light}" + "$value": "{color.btn.hover.bg.light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-hover-color" }, "outline-light": { - "source": "$btn-light-outline-hover-color", - "$value": "{color.theme.hover.light}" + "$value": "{color.theme.hover.light}", + "source": "$btn-light-outline-hover-color" }, "inverse-light": { - "source": "$btn-light-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.text.inverse-light}" + "$value": "{color.btn.text.inverse-light}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-light-inverse-hover-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-hover-color", - "$value": "{color.theme.hover.light}" + "$value": "{color.theme.hover.light}", + "source": "$btn-light-inverse-outline-hover-color" } }, "bg": { "light": { - "source": "$btn-light-hover-bg", - "$value": "{color.theme.hover.light}" + "$value": "{color.theme.hover.light}", + "source": "$btn-light-hover-bg" }, "outline-light": { - "source": "$btn-light-outline-hover-bg", - "$value": "{color.light.100}" + "$value": "{color.light.100}", + "source": "$btn-light-outline-hover-bg" }, "inverse-light": { - "source": "$btn-light-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.bg.inverse-light}" + "$value": "{color.btn.bg.inverse-light}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-light-inverse-hover-bg" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-hover-bg", - "$value": "{color.light.100}" + "$value": "{color.light.100}", + "source": "$btn-light-inverse-outline-hover-bg" } }, "border": { "light": { - "source": "$btn-light-hover-border-color", - "$value": "{color.theme.hover.light}" + "$value": "{color.theme.hover.light}", + "source": "$btn-light-hover-border-color" }, "outline-light": { - "source": "$btn-light-outline-hover-border-color", - "$value": "{color.light.900}" + "$value": "{color.light.900}", + "source": "$btn-light-outline-hover-border-color" }, "inverse-light": { - "source": "$btn-light-inverse-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-light-inverse-hover-border-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-light-inverse-outline-hover-border-color" } } }, "active": { "text": { "light": { - "source": "$btn-light-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.light}" + "$value": "{color.btn.active.bg.light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-active-color" }, "outline-light": { - "source": "$btn-light-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.outline-light}" + "$value": "{color.btn.active.bg.outline-light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-outline-active-color" }, "inverse-light": { - "source": "$btn-light-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.btn.text.inverse-light}" + "$value": "{color.btn.text.inverse-light}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-light-inverse-active-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.inverse-outline-light}" + "$value": "{color.btn.active.bg.inverse-outline-light}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-light-inverse-outline-active-color" } }, "bg": { "light": { - "source": "$btn-light-active-bg", - "$value": "{color.theme.active.light}" + "$value": "{color.theme.active.light}", + "source": "$btn-light-active-bg" }, "outline-light": { - "source": "$btn-light-outline-active-bg", - "$value": "{color.theme.bg.light}" + "$value": "{color.theme.bg.light}", + "source": "$btn-light-outline-active-bg" }, "inverse-light": { - "source": "$btn-light-inverse-active-bg", - "$value": "{color.gray.100}" + "$value": "{color.gray.100}", + "source": "$btn-light-inverse-active-bg" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-active-bg", - "$value": "{color.theme.bg.light}" + "$value": "{color.theme.bg.light}", + "source": "$btn-light-inverse-outline-active-bg" } }, "border": { "light": { - "source": "$btn-light-active-border-color", - "$value": "{color.theme.active.light}" + "$value": "{color.theme.active.light}", + "source": "$btn-light-active-border-color" }, "outline-light": { - "source": "$btn-light-outline-active-border-color", - "$value": "{color.theme.active.light}" + "$value": "{color.theme.active.light}", + "source": "$btn-light-outline-active-border-color" }, "inverse-light": { - "source": "$btn-light-inverse-active-border-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-light-inverse-active-border-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-light-inverse-outline-active-border-color" } } }, "focus": { "text": { "light": { - "source": "$btn-light-focus-color", - "$value": "{color.btn.text.light}" + "$value": "{color.btn.text.light}", + "source": "$btn-light-focus-color" }, "outline-light": { - "source": "$btn-light-outline-focus-color", - "$value": "{color.btn.text.outline-light}" + "$value": "{color.btn.text.outline-light}", + "source": "$btn-light-outline-focus-color" }, "inverse-light": { - "source": "$btn-light-inverse-focus-color", - "$value": "{color.btn.text.inverse-light}" + "$value": "{color.btn.text.inverse-light}", + "source": "$btn-light-inverse-focus-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-focus-color", - "$value": "{color.btn.text.inverse-outline-light}" + "$value": "{color.btn.text.inverse-outline-light}", + "source": "$btn-light-inverse-outline-focus-color" } }, "border": { "light": { - "source": "$btn-light-focus-border-color", - "$value": "{color.btn.border.light}" + "$value": "{color.btn.border.light}", + "source": "$btn-light-focus-border-color" }, "outline-light": { - "source": "$btn-light-outline-focus-border-color", - "$value": "{color.btn.border.outline-light}" + "$value": "{color.btn.border.outline-light}", + "source": "$btn-light-outline-focus-border-color" }, "inverse-light": { - "source": "$btn-light-inverse-focus-border-color", - "$value": "{color.btn.border.inverse-light}" + "$value": "{color.btn.border.inverse-light}", + "source": "$btn-light-inverse-focus-border-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-focus-border-color", - "$value": "{color.btn.border.inverse-outline-light}" + "$value": "{color.btn.border.inverse-outline-light}", + "source": "$btn-light-inverse-outline-focus-border-color" } }, "bg": { "light": { - "source": "$btn-light-focus-bg", - "$value": "{color.btn.bg.light}" + "$value": "{color.btn.bg.light}", + "source": "$btn-light-focus-bg" }, "outline-light": { - "source": "$btn-light-outline-focus-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-light-outline-focus-bg" }, "inverse-light": { - "source": "$btn-light-inverse-focus-bg", - "$value": "{color.btn.bg.inverse-light}" + "$value": "{color.btn.bg.inverse-light}", + "source": "$btn-light-inverse-focus-bg" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-light-inverse-outline-focus-bg" } }, "outline": { "light": { - "source": "$btn-light-focus-outline-color", - "$value": "{color.primary.300}" + "$value": "{color.primary.300}", + "source": "$btn-light-focus-outline-color" }, "outline-light": { - "source": "$btn-light-outline-focus-outline-color", - "$value": "{color.theme.focus.light}" + "$value": "{color.theme.focus.light}", + "source": "$btn-light-outline-focus-outline-color" }, "inverse-light": { - "source": "$btn-light-inverse-focus-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-light-inverse-focus-outline-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-outline-light}" + "$value": "{color.btn.focus.border.inverse-outline-light}", + "source": "$btn-light-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { "light": { - "source": "$btn-light-disabled-color", - "$value": "{color.btn.text.light}" + "$value": "{color.btn.text.light}", + "source": "$btn-light-disabled-color" }, "outline-light": { - "source": "$btn-light-outline-disabled-color", - "$value": "{color.btn.hover.text.outline-light}" + "$value": "{color.btn.hover.text.outline-light}", + "source": "$btn-light-outline-disabled-color" }, "inverse-light": { - "source": "$btn-light-inverse-disabled-color", - "$value": "{color.btn.text.inverse-light}" + "$value": "{color.btn.text.inverse-light}", + "source": "$btn-light-inverse-disabled-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-disabled-color", - "$value": "{color.btn.text.inverse-outline-light}" + "$value": "{color.btn.text.inverse-outline-light}", + "source": "$btn-light-inverse-outline-disabled-color" } }, "bg": { "light": { - "source": "$btn-light-disabled-bg", - "$value": "{color.btn.bg.light}" + "$value": "{color.btn.bg.light}", + "source": "$btn-light-disabled-bg" }, "outline-light": { - "source": "$btn-light-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-light-outline-disabled-bg" }, "inverse-light": { - "source": "$btn-light-inverse-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-light-inverse-disabled-bg" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-light-inverse-outline-disabled-bg" } }, "border": { "light": { - "source": "$btn-light-disabled-border-color", - "$value": "{color.btn.border.light}" + "$value": "{color.btn.border.light}", + "source": "$btn-light-disabled-border-color" }, "outline-light": { - "source": "$btn-light-outline-disabled-border-color", - "$value": "{color.btn.hover.text.outline-light}" + "$value": "{color.btn.hover.text.outline-light}", + "source": "$btn-light-outline-disabled-border-color" }, "inverse-light": { - "source": "$btn-light-inverse-disabled-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-light-inverse-disabled-border-color" }, "inverse-outline-light": { - "source": "$btn-light-inverse-outline-disabled-border-color", - "$value": "{color.btn.border.inverse-outline-light}" + "$value": "{color.btn.border.inverse-outline-light}", + "source": "$btn-light-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/themes/light/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json index 1344fbb04b..d405b123ad 100644 --- a/tokens/src/themes/light/components/Button/primary.json +++ b/tokens/src/themes/light/components/Button/primary.json @@ -4,306 +4,345 @@ "btn": { "text": { "primary": { - "source": "$btn-primary-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.bg.primary}" + "$value": "{color.btn.bg.primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-color" }, "outline-primary": { - "source": "$btn-primary-outline-color", - "$value": "{color.primary.base}" + "$value": "{color.primary.base}", + "source": "$btn-primary-outline-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-color", - "$value": "{color.primary.base}" + "$value": "{color.primary.base}", + "source": "$btn-primary-inverse-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-primary-inverse-outline-color" } }, "bg": { "primary": { - "source": "$btn-primary-bg", - "$value": "{color.primary.base}" + "$value": "{color.primary.base}", + "source": "$btn-primary-bg" }, "outline-primary": { - "source": "$btn-primary-outline-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-primary-outline-bg" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-primary-inverse-outline-bg" }, "inverse-primary": { - "source": "$btn-primary-inverse-bg", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.text.inverse-primary}" + "$value": "{color.btn.text.inverse-primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-inverse-bg" } }, "border": { "primary": { - "source": "$btn-primary-border-color", - "$value": "{color.btn.bg.primary}" + "$value": "{color.btn.bg.primary}", + "source": "$btn-primary-border-color" }, "outline-primary": { - "source": "$btn-primary-outline-border-color", - "$value": "{color.primary.base}" + "$value": "{color.primary.base}", + "source": "$btn-primary-outline-border-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-primary-inverse-outline-border-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-primary-inverse-border-color" } }, "hover": { "text": { "primary": { - "source": "$btn-primary-hover-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.hover.bg.primary}" + "$value": "{color.btn.hover.bg.primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-hover-color" }, "outline-primary": { - "source": "$btn-primary-outline-hover-color", - "$value": "{color.theme.hover.primary}" + "$value": "{color.theme.hover.primary}", + "source": "$btn-primary-outline-hover-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.text.inverse-primary}" + "$value": "{color.btn.text.inverse-primary}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-primary-inverse-hover-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-hover-color", - "$value": "{color.theme.hover.primary}" + "$value": "{color.theme.hover.primary}", + "source": "$btn-primary-inverse-outline-hover-color" } }, "bg": { "primary": { - "source": "$btn-primary-hover-bg", - "$value": "{color.theme.hover.primary}" + "$value": "{color.theme.hover.primary}", + "source": "$btn-primary-hover-bg" }, "outline-primary": { - "source": "$btn-primary-outline-hover-bg", - "$value": "{color.primary.100}" + "$value": "{color.primary.100}", + "source": "$btn-primary-outline-hover-bg" }, "inverse-primary": { - "source": "$btn-primary-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.bg.inverse-primary}" + "$value": "{color.btn.bg.inverse-primary}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-primary-inverse-hover-bg" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-hover-bg", - "$value": "{color.primary.100}" + "$value": "{color.primary.100}", + "source": "$btn-primary-inverse-outline-hover-bg" } }, "border": { "primary": { - "source": "$btn-primary-hover-border-color", - "$value": "{color.theme.hover.primary}" + "$value": "{color.theme.hover.primary}", + "source": "$btn-primary-hover-border-color" }, "outline-primary": { - "source": "$btn-primary-outline-hover-border-color", - "$value": "{color.primary.900}" + "$value": "{color.primary.900}", + "source": "$btn-primary-outline-hover-border-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-primary-inverse-outline-hover-border-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-primary-inverse-hover-border-color" } } }, "active": { "text": { "primary": { - "source": "$btn-primary-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.primary}" + "$value": "{color.btn.active.bg.primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-active-color" }, "outline-primary": { - "source": "$btn-primary-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.outline-primary}" + "$value": "{color.btn.active.bg.outline-primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-outline-active-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.btn.text.inverse-primary}" + "$value": "{color.btn.text.inverse-primary}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-primary-inverse-active-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.inverse-outline-primary}" + "$value": "{color.btn.active.bg.inverse-outline-primary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-primary-inverse-outline-active-color" } }, "bg": { "primary": { - "source": "$btn-primary-active-bg", - "$value": "{color.theme.active.primary}" + "$value": "{color.theme.active.primary}", + "source": "$btn-primary-active-bg" }, "outline-primary": { - "source": "$btn-primary-outline-active-bg", - "$value": "{color.theme.bg.primary}" + "$value": "{color.theme.bg.primary}", + "source": "$btn-primary-outline-active-bg" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-active-bg", - "$value": "{color.theme.bg.primary}" + "$value": "{color.theme.bg.primary}", + "source": "$btn-primary-inverse-outline-active-bg" }, "inverse-primary": { - "source": "$btn-primary-inverse-active-bg", - "$value": "{color.gray.100}" + "$value": "{color.gray.100}", + "source": "$btn-primary-inverse-active-bg" } }, "border": { "primary": { - "source": "$btn-primary-active-border-color", - "$value": "{color.theme.active.primary}" + "$value": "{color.theme.active.primary}", + "source": "$btn-primary-active-border-color" }, "outline-primary": { - "source": "$btn-primary-outline-active-border-color", - "$value": "{color.theme.active.primary}" + "$value": "{color.theme.active.primary}", + "source": "$btn-primary-outline-active-border-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-primary-inverse-outline-active-border-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-primary-inverse-active-border-color" } } }, "focus": { "text": { "primary": { - "source": "$btn-primary-focus-color", - "$value": "{color.btn.text.primary}" + "$value": "{color.btn.text.primary}", + "source": "$btn-primary-focus-color" }, "outline-primary": { - "source": "$btn-primary-outline-focus-color", - "$value": "{color.btn.text.outline-primary}" + "$value": "{color.btn.text.outline-primary}", + "source": "$btn-primary-outline-focus-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-focus-color", - "$value": "{color.btn.text.inverse-primary}" + "$value": "{color.btn.text.inverse-primary}", + "source": "$btn-primary-inverse-focus-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-focus-color", - "$value": "{color.btn.text.inverse-outline-primary}" + "$value": "{color.btn.text.inverse-outline-primary}", + "source": "$btn-primary-inverse-outline-focus-color" } }, "border": { "primary": { - "source": "$btn-primary-focus-border-color", - "$value": "{color.btn.border.primary}" + "$value": "{color.btn.border.primary}", + "source": "$btn-primary-focus-border-color" }, "outline-primary": { - "source": "$btn-primary-outline-focus-border-color", - "$value": "{color.btn.border.outline-primary}" + "$value": "{color.btn.border.outline-primary}", + "source": "$btn-primary-outline-focus-border-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-primary-inverse-focus-border-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-focus-border-color", - "$value": "{color.btn.border.inverse-outline-primary}" + "$value": "{color.btn.border.inverse-outline-primary}", + "source": "$btn-primary-inverse-outline-focus-border-color" } }, "outline": { "primary": { - "source": "$btn-primary-focus-focus-outline-color", - "$value": "{color.theme.focus.primary}" + "$value": "{color.theme.focus.primary}", + "source": "$btn-primary-focus-focus-outline-color" }, "outline-primary": { - "source": "$btn-primary-outline-focus-outline-color", - "$value": "{color.theme.focus.primary}" + "$value": "{color.theme.focus.primary}", + "source": "$btn-primary-outline-focus-outline-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-primary}" + "$value": "{color.btn.focus.border.inverse-primary}", + "source": "$btn-primary-inverse-focus-outline-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-focus-outline-color", - "$value": "{color.btn.border.inverse-outline-primary}" + "$value": "{color.btn.border.inverse-outline-primary}", + "source": "$btn-primary-inverse-outline-focus-outline-color" } }, "bg": { "primary": { - "source": "$btn-primary-focus-bg", - "$value": "{color.btn.bg.primary}" + "$value": "{color.btn.bg.primary}", + "source": "$btn-primary-focus-bg" }, "outline-primary": { - "source": "$btn-primary-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-primary-outline-focus-bg" }, "inverse-primary": { - "source": "$btn-primary-inverse-focus-bg", - "$value": "{color.btn.bg.inverse-primary}" + "$value": "{color.btn.bg.inverse-primary}", + "source": "$btn-primary-inverse-focus-bg" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-primary-inverse-outline-focus-bg" } } }, "disabled": { "text": { "primary": { - "source": "$btn-primary-disabled-color", - "$value": "{color.btn.text.primary}" + "$value": "{color.btn.text.primary}", + "source": "$btn-primary-disabled-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-disabled-color", - "$value": "{color.primary.500}" + "$value": "{color.primary.500}", + "source": "$btn-primary-inverse-disabled-color" }, "outline-primary": { - "source": "$btn-primary-outline-disabled-color", - "$value": "{color.btn.hover.text.outline-primary}" + "$value": "{color.btn.hover.text.outline-primary}", + "source": "$btn-primary-outline-disabled-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-disabled-color", - "$value": "{color.btn.text.inverse-outline-primary}" + "$value": "{color.btn.text.inverse-outline-primary}", + "source": "$btn-primary-inverse-outline-disabled-color" } }, "bg": { "primary": { - "source": "$btn-primary-disabled-bg", - "$value": "{color.btn.bg.primary}" + "$value": "{color.btn.bg.primary}", + "source": "$btn-primary-disabled-bg" }, "inverse-primary": { - "source": "$btn-primary-inverse-disabled-bg", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-primary-inverse-disabled-bg" }, "outline-primary": { - "source": "$btn-primary-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-primary-outline-disabled-bg" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-primary-inverse-outline-disabled-bg" } }, "border": { "primary": { - "source": "$btn-primary-disabled-border-color", - "$value": "{color.btn.border.primary}" + "$value": "{color.btn.border.primary}", + "source": "$btn-primary-disabled-border-color" }, "inverse-primary": { - "source": "$btn-primary-inverse-disabled-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-primary-inverse-disabled-border-color" }, "outline-primary": { - "source": "$btn-primary-outline-disabled-border-color", - "$value": "{color.btn.hover.text.outline-primary}" + "$value": "{color.btn.hover.text.outline-primary}", + "source": "$btn-primary-outline-disabled-border-color" }, "inverse-outline-primary": { - "source": "$btn-primary-inverse-outline-disabled-border-color", - "$value": "{color.btn.text.inverse-outline-primary}" + "$value": "{color.btn.text.inverse-outline-primary}", + "source": "$btn-primary-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/themes/light/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json index c8057ffa9b..93673abd9c 100644 --- a/tokens/src/themes/light/components/Button/secondary.json +++ b/tokens/src/themes/light/components/Button/secondary.json @@ -4,306 +4,345 @@ "btn": { "text": { "secondary": { - "source": "$btn-secondary-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.bg.secondary}" + "$value": "{color.btn.bg.secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-color", - "$value": "{color.secondary.base}" + "$value": "{color.secondary.base}", + "source": "$btn-secondary-outline-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-color", - "$value": "{color.secondary.base}" + "$value": "{color.secondary.base}", + "source": "$btn-secondary-inverse-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-secondary-inverse-outline-color" } }, "bg": { "secondary": { - "source": "$btn-secondary-bg", - "$value": "{color.secondary.base}" + "$value": "{color.secondary.base}", + "source": "$btn-secondary-bg" }, "outline-secondary": { - "source": "$btn-secondary-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-outline-bg" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-inverse-outline-bg" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-bg", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.text.inverse-secondary}" + "$value": "{color.btn.text.inverse-secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-inverse-bg" } }, "border": { "secondary": { - "source": "$btn-secondary-border-color", - "$value": "{color.btn.bg.secondary}" + "$value": "{color.btn.bg.secondary}", + "source": "$btn-secondary-border-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-border-color", - "$value": "{color.secondary.base}" + "$value": "{color.secondary.base}", + "source": "$btn-secondary-outline-border-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-secondary-inverse-outline-border-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-secondary-inverse-border-color" } }, "hover": { "text": { "secondary": { - "source": "$btn-secondary-hover-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.hover.bg.secondary}" + "$value": "{color.btn.hover.bg.secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-hover-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-hover-color", - "$value": "{color.theme.hover.secondary}" + "$value": "{color.theme.hover.secondary}", + "source": "$btn-secondary-outline-hover-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.text.inverse-secondary}" + "$value": "{color.btn.text.inverse-secondary}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-secondary-inverse-hover-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-hover-color", - "$value": "{color.theme.hover.secondary}" + "$value": "{color.theme.hover.secondary}", + "source": "$btn-secondary-inverse-outline-hover-color" } }, "bg": { "secondary": { - "source": "$btn-secondary-hover-bg", - "$value": "{color.theme.hover.secondary}" + "$value": "{color.theme.hover.secondary}", + "source": "$btn-secondary-hover-bg" }, "outline-secondary": { - "source": "$btn-secondary-outline-hover-bg", - "$value": "{color.secondary.100}" + "$value": "{color.secondary.100}", + "source": "$btn-secondary-outline-hover-bg" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.bg.inverse-secondary}" + "$value": "{color.btn.bg.inverse-secondary}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-secondary-inverse-hover-bg" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-hover-bg", - "$value": "{color.secondary.100}" + "$value": "{color.secondary.100}", + "source": "$btn-secondary-inverse-outline-hover-bg" } }, "border": { "secondary": { - "source": "$btn-secondary-hover-border-color", - "$value": "{color.theme.hover.secondary}" + "$value": "{color.theme.hover.secondary}", + "source": "$btn-secondary-hover-border-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-hover-border-color", - "$value": "{color.secondary.900}" + "$value": "{color.secondary.900}", + "source": "$btn-secondary-outline-hover-border-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-secondary-inverse-outline-hover-border-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-secondary-inverse-hover-border-color" } } }, "active": { "text": { "secondary": { - "source": "$btn-secondary-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.secondary}" + "$value": "{color.btn.active.bg.secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-active-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.outline-secondary}" + "$value": "{color.btn.active.bg.outline-secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-outline-active-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.btn.text.inverse-secondary}" + "$value": "{color.btn.text.inverse-secondary}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-secondary-inverse-active-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.inverse-outline-secondary}" + "$value": "{color.btn.active.bg.inverse-outline-secondary}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-secondary-inverse-outline-active-color" } }, "bg": { "secondary": { - "source": "$btn-secondary-active-bg", - "$value": "{color.theme.active.secondary}" + "$value": "{color.theme.active.secondary}", + "source": "$btn-secondary-active-bg" }, "outline-secondary": { - "source": "$btn-secondary-outline-active-bg", - "$value": "{color.theme.bg.secondary}" + "$value": "{color.theme.bg.secondary}", + "source": "$btn-secondary-outline-active-bg" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-active-bg", - "$value": "{color.theme.bg.secondary}" + "$value": "{color.theme.bg.secondary}", + "source": "$btn-secondary-inverse-outline-active-bg" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-active-bg", - "$value": "{color.gray.100}" + "$value": "{color.gray.100}", + "source": "$btn-secondary-inverse-active-bg" } }, "border": { "secondary": { - "source": "$btn-secondary-active-border-color", - "$value": "{color.theme.active.secondary}" + "$value": "{color.theme.active.secondary}", + "source": "$btn-secondary-active-border-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-active-border-color", - "$value": "{color.theme.active.secondary}" + "$value": "{color.theme.active.secondary}", + "source": "$btn-secondary-outline-active-border-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-secondary-inverse-outline-active-border-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-secondary-inverse-active-border-color" } } }, "focus": { "text": { "secondary": { - "source": "$btn-secondary-focus-color", - "$value": "{color.btn.text.secondary}" + "$value": "{color.btn.text.secondary}", + "source": "$btn-secondary-focus-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-focus-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-inverse-focus-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-focus-color", - "$value": "{color.btn.text.outline-secondary}" + "$value": "{color.btn.text.outline-secondary}", + "source": "$btn-secondary-outline-focus-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-focus-color", - "$value": "{color.btn.text.inverse-outline-secondary}" + "$value": "{color.btn.text.inverse-outline-secondary}", + "source": "$btn-secondary-inverse-outline-focus-color" } }, "border": { "secondary": { - "source": "$btn-secondary-focus-border-color", - "$value": "{color.btn.bg.secondary}" + "$value": "{color.btn.bg.secondary}", + "source": "$btn-secondary-focus-border-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-focus-border-color", - "$value": "{color.btn.border.outline-secondary}" + "$value": "{color.btn.border.outline-secondary}", + "source": "$btn-secondary-outline-focus-border-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-secondary-inverse-focus-border-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-secondary-inverse-outline-focus-border-color" } }, "outline": { "secondary": { - "source": "$btn-secondary-focus-outline-color", - "$value": "{color.theme.focus.secondary}" + "$value": "{color.theme.focus.secondary}", + "source": "$btn-secondary-focus-outline-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-focus-outline-color", - "$value": "{color.theme.focus.secondary}" + "$value": "{color.theme.focus.secondary}", + "source": "$btn-secondary-outline-focus-outline-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-focus-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-secondary-inverse-focus-outline-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-focus-outline-color", - "$value": "{color.btn.border.inverse-outline-secondary}" + "$value": "{color.btn.border.inverse-outline-secondary}", + "source": "$btn-secondary-inverse-outline-focus-outline-color" } }, "bg": { "secondary": { - "source": "$btn-secondary-focus-bg", - "$value": "{color.btn.bg.secondary}" + "$value": "{color.btn.bg.secondary}", + "source": "$btn-secondary-focus-bg" }, "outline-secondary": { - "source": "$btn-secondary-outline-focus-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-secondary-outline-focus-bg" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-focus-bg", - "$value": "{color.btn.bg.inverse-secondary}" + "$value": "{color.btn.bg.inverse-secondary}", + "source": "$btn-secondary-inverse-focus-bg" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-inverse-outline-focus-bg" } } }, "disabled": { "text": { "secondary": { - "source": "$btn-secondary-disabled-color", - "$value": "{color.btn.text.secondary}" + "$value": "{color.btn.text.secondary}", + "source": "$btn-secondary-disabled-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-disabled-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-outline-disabled-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-disabled-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-inverse-disabled-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-disabled-color", - "$value": "{color.btn.text.inverse-outline-secondary}" + "$value": "{color.btn.text.inverse-outline-secondary}", + "source": "$btn-secondary-inverse-outline-disabled-color" } }, "bg": { "secondary": { - "source": "$btn-secondary-disabled-bg", - "$value": "{color.btn.bg.secondary}" + "$value": "{color.btn.bg.secondary}", + "source": "$btn-secondary-disabled-bg" }, "outline-secondary": { - "source": "$btn-secondary-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-outline-disabled-bg" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-inverse-disabled-bg" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-inverse-outline-disabled-bg" } }, "border": { "secondary": { - "source": "$btn-secondary-disabled-border-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-secondary-disabled-border-color" }, "outline-secondary": { - "source": "$btn-secondary-outline-disabled-border-color", - "$value": "{color.secondary.base}" + "$value": "{color.secondary.base}", + "source": "$btn-secondary-outline-disabled-border-color" }, "inverse-secondary": { - "source": "$btn-secondary-inverse-disabled-border-color", - "$value": "{color.btn.border.inverse-secondary}" + "$value": "{color.btn.border.inverse-secondary}", + "source": "$btn-secondary-inverse-disabled-border-color" }, "inverse-outline-secondary": { - "source": "$btn-secondary-inverse-outline-disabled-border-color", - "$value": "{color.btn.border.inverse-outline-secondary}" + "$value": "{color.btn.border.inverse-outline-secondary}", + "source": "$btn-secondary-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/themes/light/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json index e27a0aaca9..9d2e00bcfe 100644 --- a/tokens/src/themes/light/components/Button/success.json +++ b/tokens/src/themes/light/components/Button/success.json @@ -4,306 +4,345 @@ "btn": { "text": { "success": { - "source": "$btn-success-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.bg.success}" + "$value": "{color.btn.bg.success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-color" }, "outline-success": { - "source": "$btn-success-outline-color", - "$value": "{color.success.base}" + "$value": "{color.success.base}", + "source": "$btn-success-outline-color" }, "inverse-success": { - "source": "$btn-success-inverse-color", - "$value": "{color.success.base}" + "$value": "{color.success.base}", + "source": "$btn-success-inverse-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-success-inverse-outline-color" } }, "bg": { "success": { - "source": "$btn-success-bg", - "$value": "{color.success.base}" + "$value": "{color.success.base}", + "source": "$btn-success-bg" }, "outline-success": { - "source": "$btn-success-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-success-outline-bg" }, "inverse-success": { - "source": "$btn-success-inverse-bg", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.text.inverse-success}" + "$value": "{color.btn.text.inverse-success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-inverse-bg" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-success-inverse-outline-bg" } }, "border": { "success": { - "source": "$btn-success-border-color", - "$value": "{color.btn.bg.success}" + "$value": "{color.btn.bg.success}", + "source": "$btn-success-border-color" }, "outline-success": { - "source": "$btn-success-outline-border-color", - "$value": "{color.success.base}" + "$value": "{color.success.base}", + "source": "$btn-success-outline-border-color" }, "inverse-success": { - "source": "$btn-success-inverse-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-success-inverse-border-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-success-inverse-outline-border-color" } }, "hover": { "text": { "success": { - "source": "$btn-success-hover-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.hover.bg.success}" + "$value": "{color.btn.hover.bg.success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-hover-color" }, "outline-success": { - "source": "$btn-success-outline-hover-color", - "$value": "{color.theme.hover.success}" + "$value": "{color.theme.hover.success}", + "source": "$btn-success-outline-hover-color" }, "inverse-success": { - "source": "$btn-success-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.text.inverse-success}" + "$value": "{color.btn.text.inverse-success}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-success-inverse-hover-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-hover-color", - "$value": "{color.theme.hover.success}" + "$value": "{color.theme.hover.success}", + "source": "$btn-success-inverse-outline-hover-color" } }, "bg": { "success": { - "source": "$btn-success-hover-bg", - "$value": "{color.theme.hover.success}" + "$value": "{color.theme.hover.success}", + "source": "$btn-success-hover-bg" }, "outline-success": { - "source": "$btn-success-outline-hover-bg", - "$value": "{color.success.100}" + "$value": "{color.success.100}", + "source": "$btn-success-outline-hover-bg" }, "inverse-success": { - "source": "$btn-success-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.bg.inverse-success}" + "$value": "{color.btn.bg.inverse-success}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-success-inverse-hover-bg" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-hover-bg", - "$value": "{color.success.100}" + "$value": "{color.success.100}", + "source": "$btn-success-inverse-outline-hover-bg" } }, "border": { "success": { - "source": "$btn-success-hover-border-color", - "$value": "{color.theme.hover.success}" + "$value": "{color.theme.hover.success}", + "source": "$btn-success-hover-border-color" }, "outline-success": { - "source": "$btn-success-outline-hover-border-color", - "$value": "{color.success.900}" + "$value": "{color.success.900}", + "source": "$btn-success-outline-hover-border-color" }, "inverse-success": { - "source": "$btn-success-inverse-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-success-inverse-hover-border-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-success-inverse-outline-hover-border-color" } } }, "active": { "text": { "success": { - "source": "$btn-success-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.success}" + "$value": "{color.btn.active.bg.success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-active-color" }, "outline-success": { - "source": "$btn-success-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.outline-success}" + "$value": "{color.btn.active.bg.outline-success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-outline-active-color" }, "inverse-success": { - "source": "$btn-success-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.btn.text.inverse-success}" + "$value": "{color.btn.text.inverse-success}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-success-inverse-active-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.inverse-outline-success}" + "$value": "{color.btn.active.bg.inverse-outline-success}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-success-inverse-outline-active-color" } }, "bg": { "success": { - "source": "$btn-success-active-bg", - "$value": "{color.theme.active.success}" + "$value": "{color.theme.active.success}", + "source": "$btn-success-active-bg" }, "outline-success": { - "source": "$btn-success-outline-active-bg", - "$value": "{color.theme.bg.success}" + "$value": "{color.theme.bg.success}", + "source": "$btn-success-outline-active-bg" }, "inverse-success": { - "source": "$btn-success-inverse-active-bg", - "$value": "{color.gray.100}" + "$value": "{color.gray.100}", + "source": "$btn-success-inverse-active-bg" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-active-bg", - "$value": "{color.theme.bg.success}" + "$value": "{color.theme.bg.success}", + "source": "$btn-success-inverse-outline-active-bg" } }, "border": { "success": { - "source": "$btn-success-active-border-color", - "$value": "{color.theme.active.success}" + "$value": "{color.theme.active.success}", + "source": "$btn-success-active-border-color" }, "outline-success": { - "source": "$btn-success-outline-active-border-color", - "$value": "{color.theme.active.success}" + "$value": "{color.theme.active.success}", + "source": "$btn-success-outline-active-border-color" }, "inverse-success": { - "source": "$btn-success-inverse-active-border-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-success-inverse-active-border-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-success-inverse-outline-active-border-color" } } }, "focus": { "text": { "success": { - "source": "$btn-success-focus-color", - "$value": "{color.btn.text.success}" + "$value": "{color.btn.text.success}", + "source": "$btn-success-focus-color" }, "outline-success": { - "source": "$btn-success-outline-focus-color", - "$value": "{color.btn.text.outline-success}" + "$value": "{color.btn.text.outline-success}", + "source": "$btn-success-outline-focus-color" }, "inverse-success": { - "source": "$btn-success-inverse-focus-color", - "$value": "{color.btn.text.inverse-success}" + "$value": "{color.btn.text.inverse-success}", + "source": "$btn-success-inverse-focus-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-focus-color", - "$value": "{color.btn.text.inverse-outline-success}" + "$value": "{color.btn.text.inverse-outline-success}", + "source": "$btn-success-inverse-outline-focus-color" } }, "border": { "success": { - "source": "$btn-success-focus-border-color", - "$value": "{color.btn.border.success}" + "$value": "{color.btn.border.success}", + "source": "$btn-success-focus-border-color" }, "outline-success": { - "source": "$btn-success-outline-focus-border-color", - "$value": "{color.btn.border.outline-success}" + "$value": "{color.btn.border.outline-success}", + "source": "$btn-success-outline-focus-border-color" }, "inverse-success": { - "source": "$btn-success-inverse-focus-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-success-inverse-focus-border-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-focus-border-color", - "$value": "{color.btn.border.inverse-outline-success}" + "$value": "{color.btn.border.inverse-outline-success}", + "source": "$btn-success-inverse-outline-focus-border-color" } }, "bg": { "success": { - "source": "$btn-success-focus-bg", - "$value": "{color.btn.bg.success}" + "$value": "{color.btn.bg.success}", + "source": "$btn-success-focus-bg" }, "outline-success": { - "source": "$btn-success-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-success-outline-focus-bg" }, "inverse-success": { - "source": "$btn-success-inverse-focus-bg", - "$value": "{color.btn.bg.inverse-success}" + "$value": "{color.btn.bg.inverse-success}", + "source": "$btn-success-inverse-focus-bg" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-success-inverse-outline-focus-bg" } }, "outline": { "success": { - "source": "$btn-success-focus-outline-color", - "$value": "{color.theme.focus.success}" + "$value": "{color.theme.focus.success}", + "source": "$btn-success-focus-outline-color" }, "outline-success": { - "source": "$btn-success-outline-focus-outline-color", - "$value": "{color.theme.focus.success}" + "$value": "{color.theme.focus.success}", + "source": "$btn-success-outline-focus-outline-color" }, "inverse-success": { - "source": "$btn-success-inverse-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-success}" + "$value": "{color.btn.focus.border.inverse-success}", + "source": "$btn-success-inverse-focus-outline-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-focus-outline-color", - "$value": "{color.btn.focus.border.inverse-outline-success}" + "$value": "{color.btn.focus.border.inverse-outline-success}", + "source": "$btn-success-inverse-outline-focus-outline-color" } } }, "disabled": { "text": { "success": { - "source": "$btn-success-disabled-color", - "$value": "{color.btn.text.success}" + "$value": "{color.btn.text.success}", + "source": "$btn-success-disabled-color" }, "outline-success": { - "source": "$btn-success-outline-disabled-color", - "$value": "{color.btn.text.outline-success}" + "$value": "{color.btn.text.outline-success}", + "source": "$btn-success-outline-disabled-color" }, "inverse-success": { - "source": "$btn-success-inverse-disabled-color", - "$value": "{color.success.base}" + "$value": "{color.success.base}", + "source": "$btn-success-inverse-disabled-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-disabled-color", - "$value": "{color.btn.text.inverse-outline-success}" + "$value": "{color.btn.text.inverse-outline-success}", + "source": "$btn-success-inverse-outline-disabled-color" } }, "bg": { "success": { - "source": "$btn-success-disabled-bg", - "$value": "{color.btn.bg.success}" + "$value": "{color.btn.bg.success}", + "source": "$btn-success-disabled-bg" }, "outline-success": { - "source": "$btn-success-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-success-outline-disabled-bg" }, "inverse-success": { - "source": "$btn-success-inverse-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-success-inverse-disabled-bg" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-success-inverse-outline-disabled-bg" } }, "border": { "success": { - "source": "$btn-success-disabled-border-color", - "$value": "{color.btn.border.success}" + "$value": "{color.btn.border.success}", + "source": "$btn-success-disabled-border-color" }, "outline-success": { - "source": "$btn-success-outline-disabled-border-color", - "$value": "{color.btn.border.outline-success}" + "$value": "{color.btn.border.outline-success}", + "source": "$btn-success-outline-disabled-border-color" }, "inverse-success": { - "source": "$btn-success-inverse-disabled-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-success-inverse-disabled-border-color" }, "inverse-outline-success": { - "source": "$btn-success-inverse-outline-disabled-border-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-success-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/themes/light/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json index bfb8c43e22..e463e7ce8d 100644 --- a/tokens/src/themes/light/components/Button/tertiary.json +++ b/tokens/src/themes/light/components/Button/tertiary.json @@ -3,79 +3,177 @@ "$type": "color", "btn": { "text": { - "tertiary": { "source": "$btn-tertiary-color", "$value": "{color.gray.700}" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-color", "$value": "{color.white}" } + "tertiary": { + "$value": "{color.gray.700}", + "source": "$btn-tertiary-color" + }, + "inverse-tertiary": { + "$value": "{color.white}", + "source": "$btn-inverse-tertiary-color" + } }, "bg": { - "tertiary": { "source": "$btn-tertiary-bg", "$value": "transparent" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-bg", "$value": "transparent" } + "tertiary": { + "$value": "transparent", + "source": "$btn-tertiary-bg" + }, + "inverse-tertiary": { + "$value": "transparent", + "source": "$btn-inverse-tertiary-bg" + } }, "border": { - "tertiary": { "source": "$btn-tertiary-border-color", "$value": "transparent" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-border-color", "$value": "transparent" } + "tertiary": { + "$value": "transparent", + "source": "$btn-tertiary-border-color" + }, + "inverse-tertiary": { + "$value": "transparent", + "source": "$btn-inverse-tertiary-border-color" + } }, "hover": { "text": { - "tertiary": { "source": "$btn-tertiary-hover-color", "$value": "{color.gray.700}" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-color", "$value": "{color.white}" } + "tertiary": { + "$value": "{color.gray.700}", + "source": "$btn-tertiary-hover-color" + }, + "inverse-tertiary": { + "$value": "{color.white}", + "source": "$btn-inverse-tertiary-hover-color" + } }, "bg": { - "tertiary": { "source": "$btn-tertiary-hover-bg", "$value": "{color.light.500}" }, + "tertiary": { + "$value": "{color.light.500}", + "source": "$btn-tertiary-hover-bg" + }, "inverse-tertiary": { - "source": "$btn-inverse-tertiary-hover-bg", - "modify": [{ "type": "alpha", "amount": 0.1 }], - "$value": "{color.white}" + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$btn-inverse-tertiary-hover-bg" } }, "border": { - "tertiary": { "source": "$btn-tertiary-hover-border-color", "$value": "transparent" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-hover-border-color", "$value": "transparent" } + "tertiary": { + "$value": "transparent", + "source": "$btn-tertiary-hover-border-color" + }, + "inverse-tertiary": { + "$value": "transparent", + "source": "$btn-inverse-tertiary-hover-border-color" + } } }, "active": { "text": { - "tertiary": { "source": "$btn-tertiary-active-color", "$value": "{color.gray.700}" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-color", "$value": "{color.white}" } + "tertiary": { + "$value": "{color.gray.700}", + "source": "$btn-tertiary-active-color" + }, + "inverse-tertiary": { + "$value": "{color.white}", + "source": "$btn-inverse-tertiary-active-color" + } }, "bg": { - "tertiary": { "source": "$btn-tertiary-active-bg", "$value": "{color.light.500}" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-bg", "$value": "{color.btn.hover.bg.inverse-tertiary}" } + "tertiary": { + "$value": "{color.light.500}", + "source": "$btn-tertiary-active-bg" + }, + "inverse-tertiary": { + "$value": "{color.btn.hover.bg.inverse-tertiary}", + "source": "$btn-inverse-tertiary-active-bg" + } }, "border": { - "tertiary": { "source": "$btn-tertiary-active-border-color", "$value": "transparent" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-active-border-color", "$value": "transparent" } + "tertiary": { + "$value": "transparent", + "source": "$btn-tertiary-active-border-color" + }, + "inverse-tertiary": { + "$value": "transparent", + "source": "$btn-inverse-tertiary-active-border-color" + } } }, "focus": { "text": { - "tertiary": { "source": "$btn-tertiary-focus-color", "$value": "{color.btn.text.tertiary}" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-color", "$value": "{color.btn.text.inverse-tertiary}" } + "tertiary": { + "$value": "{color.btn.text.tertiary}", + "source": "$btn-tertiary-focus-color" + }, + "inverse-tertiary": { + "$value": "{color.btn.text.inverse-tertiary}", + "source": "$btn-inverse-tertiary-focus-color" + } }, "border": { - "tertiary": { "source": "$btn-tertiary-focus-border-color", "$value": "{color.btn.border.tertiary}" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-border-color", "$value": "transparent" } + "tertiary": { + "$value": "{color.btn.border.tertiary}", + "source": "$btn-tertiary-focus-border-color" + }, + "inverse-tertiary": { + "$value": "transparent", + "source": "$btn-inverse-tertiary-focus-border-color" + } }, "bg": { - "tertiary": { "source": "$btn-tertiary-focus-bg", "$value": "inherit" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-bg", "$value": "inherit" } + "tertiary": { + "$value": "inherit", + "source": "$btn-tertiary-focus-bg" + }, + "inverse-tertiary": { + "$value": "inherit", + "source": "$btn-inverse-tertiary-focus-bg" + } }, "outline": { - "tertiary": { "source": "$btn-tertiary-focus-outline-color", "$value": "{color.theme.focus.primary}" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-focus-outline-color", "$value": "{color.white}" } + "tertiary": { + "$value": "{color.theme.focus.primary}", + "source": "$btn-tertiary-focus-outline-color" + }, + "inverse-tertiary": { + "$value": "{color.white}", + "source": "$btn-inverse-tertiary-focus-outline-color" + } } }, "disabled": { "text": { - "tertiary": { "source": "$btn-tertiary-disabled-color", "$value": "{color.btn.text.tertiary}" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-color", "$value": "{color.btn.text.inverse-tertiary}" } + "tertiary": { + "$value": "{color.btn.text.tertiary}", + "source": "$btn-tertiary-disabled-color" + }, + "inverse-tertiary": { + "$value": "{color.btn.text.inverse-tertiary}", + "source": "$btn-inverse-tertiary-disabled-color" + } }, "bg": { - "tertiary": { "source": "$btn-tertiary-disabled-bg", "$value": "inherit" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-bg", "$value": "inherit" } + "tertiary": { + "$value": "inherit", + "source": "$btn-tertiary-disabled-bg" + }, + "inverse-tertiary": { + "$value": "inherit", + "source": "$btn-inverse-tertiary-disabled-bg" + } }, "border": { - "tertiary": { "source": "$btn-tertiary-disabled-border-color", "$value": "{color.btn.border.tertiary}" }, - "inverse-tertiary": { "source": "$btn-inverse-tertiary-disabled-border-color", "$value": "{color.btn.border.inverse-tertiary}" } + "tertiary": { + "$value": "{color.btn.border.tertiary}", + "source": "$btn-tertiary-disabled-border-color" + }, + "inverse-tertiary": { + "$value": "{color.btn.border.inverse-tertiary}", + "source": "$btn-inverse-tertiary-disabled-border-color" + } } } } diff --git a/tokens/src/themes/light/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json index eeb6ff1806..ce8031fb4e 100644 --- a/tokens/src/themes/light/components/Button/warning.json +++ b/tokens/src/themes/light/components/Button/warning.json @@ -4,306 +4,345 @@ "btn": { "text": { "warning": { - "source": "$btn-warning-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.bg.warning}" + "$value": "{color.btn.bg.warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-color" }, "outline-warning": { - "source": "$btn-warning-outline-color", - "$value": "{color.warning.base}" + "$value": "{color.warning.base}", + "source": "$btn-warning-outline-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-color", - "$value": "{color.warning.base}" + "$value": "{color.warning.base}", + "source": "$btn-warning-inverse-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-warning-inverse-outline-color" } }, "bg": { "warning": { - "source": "$btn-warning-bg", - "$value": "{color.warning.base}" + "$value": "{color.warning.base}", + "source": "$btn-warning-bg" }, "outline-warning": { - "source": "$btn-warning-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-warning-outline-bg" }, "inverse-warning": { - "source": "$btn-warning-inverse-bg", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.text.inverse-warning}" + "$value": "{color.btn.text.inverse-warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-inverse-bg" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-warning-inverse-outline-bg" } }, "border": { "warning": { - "source": "$btn-warning-border-color", - "$value": "{color.btn.bg.warning}" + "$value": "{color.btn.bg.warning}", + "source": "$btn-warning-border-color" }, "outline-warning": { - "source": "$btn-warning-outline-border-color", - "$value": "{color.warning.base}" + "$value": "{color.warning.base}", + "source": "$btn-warning-outline-border-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-warning-inverse-border-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-border-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-warning-inverse-outline-border-color" } }, "hover": { "text": { "warning": { - "source": "$btn-warning-hover-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.hover.bg.warning}" + "$value": "{color.btn.hover.bg.warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-hover-color" }, "outline-warning": { - "source": "$btn-warning-outline-hover-color", - "$value": "{color.theme.hover.warning}" + "$value": "{color.theme.hover.warning}", + "source": "$btn-warning-outline-hover-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-hover-color", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.text.inverse-warning}" + "$value": "{color.btn.text.inverse-warning}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-warning-inverse-hover-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-hover-color", - "$value": "{color.theme.hover.warning}" + "$value": "{color.theme.hover.warning}", + "source": "$btn-warning-inverse-outline-hover-color" } }, "bg": { "warning": { - "source": "$btn-warning-hover-bg", - "$value": "{color.theme.hover.warning}" + "$value": "{color.theme.hover.warning}", + "source": "$btn-warning-hover-bg" }, "outline-warning": { - "source": "$btn-warning-outline-hover-bg", - "$value": "{color.warning.100}" + "$value": "{color.warning.100}", + "source": "$btn-warning-outline-hover-bg" }, "inverse-warning": { - "source": "$btn-warning-inverse-hover-bg", - "modify": [{ "type": "darken", "amount": 0.075 }], - "$value": "{color.btn.bg.inverse-warning}" + "$value": "{color.btn.bg.inverse-warning}", + "modify": [ + { + "type": "darken", + "amount": 0.075 + } + ], + "source": "$btn-warning-inverse-hover-bg" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-hover-bg", - "$value": "{color.warning.100}" + "$value": "{color.warning.100}", + "source": "$btn-warning-inverse-outline-hover-bg" } }, "border": { "warning": { - "source": "$btn-warning-hover-border-color", - "$value": "{color.theme.hover.warning}" + "$value": "{color.theme.hover.warning}", + "source": "$btn-warning-hover-border-color" }, "outline-warning": { - "source": "$btn-warning-outline-hover-border-color", - "$value": "{color.warning.900}" + "$value": "{color.warning.900}", + "source": "$btn-warning-outline-hover-border-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-warning-inverse-hover-border-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-hover-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-warning-inverse-outline-hover-border-color" } } }, "active": { "text": { "warning": { - "source": "$btn-warning-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.warning}" + "$value": "{color.btn.active.bg.warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-active-color" }, "outline-warning": { - "source": "$btn-warning-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.outline-warning}" + "$value": "{color.btn.active.bg.outline-warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-outline-active-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-active-color", - "modify": [{ "type": "darken", "amount": 0.1 }], - "$value": "{color.btn.text.inverse-warning}" + "$value": "{color.btn.text.inverse-warning}", + "modify": [ + { + "type": "darken", + "amount": 0.1 + } + ], + "source": "$btn-warning-inverse-active-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-active-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.btn.active.bg.inverse-outline-warning}" + "$value": "{color.btn.active.bg.inverse-outline-warning}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$btn-warning-inverse-outline-active-color" } }, "bg": { "warning": { - "source": "$btn-warning-active-bg", - "$value": "{color.theme.active.warning}" + "$value": "{color.theme.active.warning}", + "source": "$btn-warning-active-bg" }, "outline-warning": { - "source": "$btn-warning-outline-active-bg", - "$value": "{color.theme.bg.warning}" + "$value": "{color.theme.bg.warning}", + "source": "$btn-warning-outline-active-bg" }, "inverse-warning": { - "source": "$btn-warning-inverse-active-bg", - "$value": "{color.gray.100}" + "$value": "{color.gray.100}", + "source": "$btn-warning-inverse-active-bg" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-active-bg", - "$value": "{color.theme.bg.warning}" + "$value": "{color.theme.bg.warning}", + "source": "$btn-warning-inverse-outline-active-bg" } }, "border": { "warning": { - "source": "$btn-warning-active-border-color", - "$value": "{color.theme.active.warning}" + "$value": "{color.theme.active.warning}", + "source": "$btn-warning-active-border-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-active-border-color", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-warning-inverse-active-border-color" }, "outline-warning": { - "source": "$btn-warning-outline-active-border-color", - "$value": "{color.theme.active.warning}" + "$value": "{color.theme.active.warning}", + "source": "$btn-warning-outline-active-border-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-active-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-warning-inverse-outline-active-border-color" } } }, "focus": { "text": { "warning": { - "source": "$btn-warning-focus-color", - "$value": "{color.btn.text.warning}" + "$value": "{color.btn.text.warning}", + "source": "$btn-warning-focus-color" }, "outline-warning": { - "source": "$btn-warning-outline-focus-color", - "$value": "{color.btn.text.outline-warning}" + "$value": "{color.btn.text.outline-warning}", + "source": "$btn-warning-outline-focus-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-focus-color", - "$value": "{color.btn.text.inverse-warning}" + "$value": "{color.btn.text.inverse-warning}", + "source": "$btn-warning-inverse-focus-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-focus-color", - "$value": "{color.btn.text.inverse-outline-warning}" + "$value": "{color.btn.text.inverse-outline-warning}", + "source": "$btn-warning-inverse-outline-focus-color" } }, "border": { "warning": { - "source": "$btn-warning-focus-border-color", - "$value": "{color.btn.border.warning}" + "$value": "{color.btn.border.warning}", + "source": "$btn-warning-focus-border-color" }, "outline-warning": { - "source": "$btn-warning-outline-focus-border-color", - "$value": "{color.btn.border.outline-warning}" + "$value": "{color.btn.border.outline-warning}", + "source": "$btn-warning-outline-focus-border-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-focus-border-color", - "$value": "{color.btn.border.inverse-warning}" + "$value": "{color.btn.border.inverse-warning}", + "source": "$btn-warning-inverse-focus-border-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-focus-border-color", - "$value": "{color.btn.border.inverse-outline-warning}" + "$value": "{color.btn.border.inverse-outline-warning}", + "source": "$btn-warning-inverse-outline-focus-border-color" } }, "bg": { "warning": { - "source": "$btn-warning-focus-bg", - "$value": "{color.btn.bg.warning}" + "$value": "{color.btn.bg.warning}", + "source": "$btn-warning-focus-bg" }, "outline-warning": { - "source": "$btn-warning-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-warning-outline-focus-bg" }, "inverse-warning": { - "source": "$btn-warning-inverse-focus-bg", - "$value": "{color.btn.bg.inverse-warning}" + "$value": "{color.btn.bg.inverse-warning}", + "source": "$btn-warning-inverse-focus-bg" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-warning-inverse-outline-focus-bg" } }, "outline": { "warning": { - "source": "$btn-warning-focus-outline-color", - "$value": "{color.theme.focus.warning}" + "$value": "{color.theme.focus.warning}", + "source": "$btn-warning-focus-outline-color" }, "outline-warning": { - "source": "$btn-warning-outline-focus-outline-color", - "$value": "{color.theme.focus.warning}" + "$value": "{color.theme.focus.warning}", + "source": "$btn-warning-outline-focus-outline-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-focus-outline-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-warning-inverse-focus-outline-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-focus-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-warning-inverse-outline-focus-bg" } } }, "disabled": { "text": { "warning": { - "source": "$btn-warning-disabled-color", - "$value": "{color.btn.text.warning}" + "$value": "{color.btn.text.warning}", + "source": "$btn-warning-disabled-color" }, "outline-warning": { - "source": "$btn-warning-outline-disabled-color", - "$value": "{color.btn.text.outline-warning}" + "$value": "{color.btn.text.outline-warning}", + "source": "$btn-warning-outline-disabled-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-disabled-color", - "$value": "{color.warning.base}" + "$value": "{color.warning.base}", + "source": "$btn-warning-inverse-disabled-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-disabled-color", - "$value": "{color.btn.text.inverse-outline-warning}" + "$value": "{color.btn.text.inverse-outline-warning}", + "source": "$btn-warning-inverse-outline-disabled-color" } }, "bg": { "warning": { - "source": "$btn-warning-disabled-bg", - "$value": "{color.btn.bg.warning}" + "$value": "{color.btn.bg.warning}", + "source": "$btn-warning-disabled-bg" }, "outline-warning": { - "source": "$btn-warning-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-warning-outline-disabled-bg" }, "inverse-warning": { - "source": "$btn-warning-inverse-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-warning-inverse-disabled-bg" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-disabled-bg", - "$value": "inherit" + "$value": "inherit", + "source": "$btn-warning-inverse-outline-disabled-bg" } }, "border": { "warning": { - "source": "$btn-warning-disabled-border-color", - "$value": "{color.btn.border.warning}" + "$value": "{color.btn.border.warning}", + "source": "$btn-warning-disabled-border-color" }, "outline-warning": { - "source": "$btn-warning-outline-disabled-border-color", - "$value": "{color.btn.border.outline-warning}" + "$value": "{color.btn.border.outline-warning}", + "source": "$btn-warning-outline-disabled-border-color" }, "inverse-warning": { - "source": "$btn-warning-inverse-disabled-border-color", - "$value": "transparent" + "$value": "transparent", + "source": "$btn-warning-inverse-disabled-border-color" }, "inverse-outline-warning": { - "source": "$btn-warning-inverse-outline-disabled-border-color", - "$value": "{color.btn.border.inverse-outline-warning}" + "$value": "{color.btn.border.inverse-outline-warning}", + "source": "$btn-warning-inverse-outline-disabled-border-color" } } } diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json index faf3412fee..b91735a319 100644 --- a/tokens/src/themes/light/components/Card.json +++ b/tokens/src/themes/light/components/Card.json @@ -2,24 +2,50 @@ "color": { "$type": "color", "card": { - "base": { "source": "$card-color", "$value": "inherit" }, + "base": { + "$value": "inherit", + "source": "$card-color" + }, "bg": { - "base": { "source": "$card-bg", "$value": "{color.bg.base}" }, - "dark": { "source": "$card-bg-dark", "$value": "{color.primary.500}" }, - "muted": { "source": "$card-bg-muted", "$value": "{color.light.200}" } + "base": { + "$value": "{color.bg.base}", + "source": "$card-bg" + }, + "dark": { + "$value": "{color.primary.500}", + "source": "$card-bg-dark" + }, + "muted": { + "$value": "{color.light.200}", + "source": "$card-bg-muted" + } }, "border": { "base": { - "source": "$card-border-color", - "modify": [{ "type": "alpha", "amount": 0.125 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.125 + } + ], + "source": "$card-border-color" }, "focus": { - "base": { "source": "$card-border-focus-color", "$value": "{color.primary.500}" }, - "dark": { "source": "$card-border-focus-color-dark", "$value": "{color.theme.focus.primary}" } + "base": { + "$value": "{color.primary.500}", + "source": "$card-border-focus-color" + }, + "dark": { + "$value": "{color.theme.focus.primary}", + "source": "$card-border-focus-color-dark" + } } }, - "divider-bg": { "source": "$card-divider-bg", "$value": "{color.light.400}" } + "divider-bg": { + "$value": "{color.light.400}", + "source": "$card-divider-bg" + } } } } diff --git a/tokens/src/themes/light/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json index 024aaf47b7..1bde926350 100644 --- a/tokens/src/themes/light/components/Carousel.json +++ b/tokens/src/themes/light/components/Carousel.json @@ -3,12 +3,21 @@ "$type": "color", "carousel": { "control": { - "base": { "source": "$carousel-control-color", "$value": "{color.white}" } + "base": { + "$value": "{color.white}", + "source": "$carousel-control-color" + } }, "indicator": { - "active-bg": { "source": "$carousel-indicator-active-bg", "$value": "{color.white}" } + "active-bg": { + "$value": "{color.white}", + "source": "$carousel-indicator-active-bg" + } }, - "caption": { "source": "$carousel-caption-color", "$value": "{color.white}" } + "caption": { + "$value": "{color.white}", + "source": "$carousel-caption-color" + } } }, "content": { @@ -17,16 +26,28 @@ "control": { "bg": { "prev-icon": { - "source": "$carousel-control-prev-icon-bg", + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$carousel-control-prev-icon-bg" }, "next-icon": { - "source": "$carousel-control-next-icon-bg", + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.carousel.control.base}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$carousel-control-next-icon-bg" } } } @@ -37,8 +58,14 @@ "carousel": { "control": { "opacity": { - "base": { "source": "$carousel-control-opacity", "$value": ".5" }, - "hover": { "source": "$carousel-control-hover-opacity", "$value": ".9" } + "base": { + "$value": ".5", + "source": "$carousel-control-opacity" + }, + "hover": { + "$value": ".9", + "source": "$carousel-control-hover-opacity" + } } } } diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json index b11b7c36ea..86b67295bb 100644 --- a/tokens/src/themes/light/components/Chip.json +++ b/tokens/src/themes/light/components/Chip.json @@ -3,36 +3,72 @@ "$type": "color", "chip": { "text": { - "light": { "source": "$chip-light-color", "$value": "{color.black}" }, - "dark": { "source": "$chip-dark-color", "$value": "{color.white}" } + "light": { + "$value": "{color.black}", + "source": "$chip-light-color" + }, + "dark": { + "$value": "{color.white}", + "source": "$chip-dark-color" + } }, "bg": { - "light": { "source": "$chip-light-bg-color", "$value": "{color.white}" }, - "dark": { "source": "$chip-dark-bg", "$value": "{color.primary.300}" } + "light": { + "$value": "{color.white}", + "source": "$chip-light-bg-color" + }, + "dark": { + "$value": "{color.primary.300}", + "source": "$chip-dark-bg" + } }, "border": { - "base": { "source": "$chip-border-color", "$value": "{color.light.800}" }, + "base": { + "$value": "{color.light.800}", + "source": "$chip-border-color" + }, "focus": { "selected": { - "dark": { "source": "$chip-dark-selected-focus-border-color", "$value": "{color.chip.outline.dark}" }, - "light": { "source": "$chip-light-selected-focus-border-color", "$value": "{color.dark.500}" } + "dark": { + "$value": "{color.chip.outline.dark}", + "source": "$chip-dark-selected-focus-border-color" + }, + "light": { + "$value": "{color.dark.500}", + "source": "$chip-light-selected-focus-border-color" + } } } }, "label": { - "base": { "source": "$chip-label-color", "$value": "{color.primary.700}" }, - "dark": { "source": "$chip-dark-label-color", "$value": "{color.chip.outline.dark}" } + "base": { + "$value": "{color.primary.700}", + "source": "$chip-label-color" + }, + "dark": { + "$value": "{color.chip.outline.dark}", + "source": "$chip-dark-label-color" + } }, "outline": { - "dark": { "source": "$chip-dark-outline-color", "$value": "{color.white}" }, - "light": { "source": "$chip-light-outline-color", "$value": "{color.chip.label.base}" } + "dark": { + "$value": "{color.white}", + "source": "$chip-dark-outline-color" + }, + "light": { + "$value": "{color.chip.label.base}", + "source": "$chip-light-outline-color" + } } } }, "other": { "$type": "number", "chip": { - "opacity-disabled": { "source": "$chip-disable-opacity", "$value": ".3" } + "opacity-disabled": { + "$value": ".3", + "source": "$chip-disable-opacity" + } } } } diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json index dcba0a2d29..f591742bc0 100644 --- a/tokens/src/themes/light/components/CloseButton.json +++ b/tokens/src/themes/light/components/CloseButton.json @@ -1,19 +1,22 @@ { "color": { "$type": "color", - "close-button": { "source": "$close-color", "$value": "{color.black}" } + "close-button": { + "$value": "{color.black}", + "source": "$close-color" + } }, "elevation": { "$type": "shadow", "close-button": { "text-shadow": { - "source": "$close-text-shadow", "$value": { "color": "{color.white}", "offsetX": "0", "offsetY": "1px", "blur": "0" - } + }, + "source": "$close-text-shadow" } } } diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json index 07785b9754..16003ac3f0 100644 --- a/tokens/src/themes/light/components/Code.json +++ b/tokens/src/themes/light/components/Code.json @@ -2,19 +2,34 @@ "color": { "$type": "color", "code": { - "base": { "source": "$code-color", "$value": "#E83E8C" }, + "base": { + "$value": "#E83E8C", + "source": "$code-color" + }, "kbd": { - "base": { "source": "$kbd-color", "$value": "{color.white}" }, - "bg": { "source": "$kbd-bg", "$value": "{color.gray.700}" } + "base": { + "$value": "{color.white}", + "source": "$kbd-color" + }, + "bg": { + "$value": "{color.gray.700}", + "source": "$kbd-bg" + } }, - "pre": { "source": "$pre-color", "$value": "{color.gray.900}" } + "pre": { + "$value": "{color.gray.900}", + "source": "$pre-color" + } } }, "elevation": { "$type": "shadow", "code": { "kbd": { - "box-shadow": { "source": "$kbd-box-shadow", "$value": "none" } + "box-shadow": { + "$value": "none", + "source": "$kbd-box-shadow" + } } } } diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json index fae700aa26..b63ac48d41 100644 --- a/tokens/src/themes/light/components/DataTable.json +++ b/tokens/src/themes/light/components/DataTable.json @@ -3,20 +3,34 @@ "$type": "color", "data-table": { "bg": { - "base": { "source": "$data-table-background-color", "$value": "{color.bg.base}" }, + "base": { + "$value": "{color.bg.base}", + "source": "$data-table-background-color" + }, "is-loading": { - "source": "$data-table-is-loading-bg", - "modify": [{ "type": "alpha", "amount": 0.7 }], - "$value": "{color.white}" + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.7 + } + ], + "source": "$data-table-is-loading-bg" } }, - "border": { "source": "$data-table-border-color", "$value": "{color.light.300}" } + "border": { + "$value": "{color.light.300}", + "source": "$data-table-border-color" + } } }, "elevation": { "$type": "shadow", "data-table": { - "box-shadow": { "source": "$data-table-box-shadow", "$value": "{elevation.box-shadow.sm}" } + "box-shadow": { + "$value": "{elevation.box-shadow.sm}", + "source": "$data-table-box-shadow" + } } } } diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json index ba760ef4c0..35b6f5d161 100644 --- a/tokens/src/themes/light/components/Dropdown.json +++ b/tokens/src/themes/light/components/Dropdown.json @@ -2,37 +2,77 @@ "color": { "$type": "color", "dropdown": { - "text": { "source": "$dropdown-color", "$value": "{color.body.base}" }, - "header": { "source": "$dropdown-header-color", "$value": "{color.gray.500}" }, - "bg": { "source": "$dropdown-bg", "$value": "{color.bg.base}" }, + "text": { + "$value": "{color.body.base}", + "source": "$dropdown-color" + }, + "header": { + "$value": "{color.gray.500}", + "source": "$dropdown-header-color" + }, + "bg": { + "$value": "{color.bg.base}", + "source": "$dropdown-bg" + }, "border": { - "source": "$dropdown-border-color", - "modify": [{ "type": "alpha", "amount": 0.15 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.15 + } + ], + "source": "$dropdown-border-color" + }, + "divider-bg": { + "$value": "{color.gray.100}", + "source": "$dropdown-divider-bg" }, - "divider-bg": { "source": "$dropdown-divider-bg", "$value": "{color.gray.100}" }, "link": { - "base": { "source": "$dropdown-link-color", "$value": "{color.gray.900}" }, + "base": { + "$value": "{color.gray.900}", + "source": "$dropdown-link-color" + }, "hover": { "base": { - "source": "$dropdown-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.5 }], - "$value": "{color.gray.900}" + "$value": "{color.gray.900}", + "modify": [ + { + "type": "darken", + "amount": 0.5 + } + ], + "source": "$dropdown-link-hover-color" }, - "bg": { "source": "$dropdown-link-hover-bg", "$value": "{color.light.300}" } + "bg": { + "$value": "{color.light.300}", + "source": "$dropdown-link-hover-bg" + } }, "active": { - "base": { "source": "$dropdown-link-active-color", "$value": "{color.active}" }, - "bg": { "source": "$dropdown-link-active-bg", "$value": "{color.bg.active}" } + "base": { + "$value": "{color.active}", + "source": "$dropdown-link-active-color" + }, + "bg": { + "$value": "{color.bg.active}", + "source": "$dropdown-link-active-bg" + } }, - "disabled": { "source": "$dropdown-link-disabled-color", "$value": "{color.disabled}" } + "disabled": { + "$value": "{color.disabled}", + "source": "$dropdown-link-disabled-color" + } } } }, "elevation": { "$type": "shadow", "dropdown": { - "box-shadow": { "source": "$dropdown-box-shadow", "$value": "none" } + "box-shadow": { + "$value": "none", + "source": "$dropdown-box-shadow" + } } } } diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json index 4641968f7c..412f1bc890 100644 --- a/tokens/src/themes/light/components/Dropzone.json +++ b/tokens/src/themes/light/components/Dropzone.json @@ -2,10 +2,19 @@ "color": { "$type": "color", "dropzone": { - "error-wrapper": { "source": "$dropzone-error-wrapper-color", "$value": "{color.danger.500}" }, - "restriction-msg": { "source": "$dropzone-restriction-msg-color", "$value": "{color.gray.500}" }, + "error-wrapper": { + "$value": "{color.danger.500}", + "source": "$dropzone-error-wrapper-color" + }, + "restriction-msg": { + "$value": "{color.gray.500}", + "source": "$dropzone-restriction-msg-color" + }, "border": { - "base": { "source": "$dropzone-border-color-default", "$value": "{color.gray.500}" } + "base": { + "$value": "{color.gray.500}", + "source": "$dropzone-border-color-default" + } } } }, @@ -13,7 +22,6 @@ "$type": "shadow", "dropzone": { "hover": { - "source": "$dropzone-box-shadow-hover", "$value": { "color": "{color.info.300}", "spread": "2px", @@ -21,10 +29,10 @@ "offsetY": "0", "blur": "0", "inset": "inset" - } + }, + "source": "$dropzone-box-shadow-hover" }, "focus": { - "source": "$dropzone-box-shadow-focus", "$value": { "color": "{color.info.300}", "spread": "2px", @@ -32,10 +40,10 @@ "offsetY": "0", "blur": "0", "inset": "inset" - } + }, + "source": "$dropzone-box-shadow-focus" }, "active": { - "source": "$dropzone-box-shadow-active", "$value": { "color": "{color.primary.500}", "spread": "2px", @@ -43,10 +51,10 @@ "offsetY": "0", "blur": "0", "inset": "inset" - } + }, + "source": "$dropzone-box-shadow-active" }, "error": { - "source": "$dropzone-box-shadow-error", "$value": { "color": "{color.danger.300}", "spread": "2px", @@ -54,7 +62,8 @@ "offsetY": "0", "blur": "0", "inset": "inset" - } + }, + "source": "$dropzone-box-shadow-error" } } } diff --git a/tokens/src/themes/light/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json index 261f97bddd..e499280b83 100644 --- a/tokens/src/themes/light/components/Form/color.json +++ b/tokens/src/themes/light/components/Form/color.json @@ -3,67 +3,155 @@ "form": { "input": { "$type": "color", - "base": { "source": "$input-color", "$value": "{color.gray.700}" }, - "placeholder": { "source": "$input-placeholder-color", "$value": "{color.gray.500}" }, - "plaintext": { "source": "$input-plaintext-color", "$value": "{color.body.base}" }, - "border": { "source": "$input-border-color", "$value": "{color.gray.500}" }, + "base": { + "$value": "{color.gray.700}", + "source": "$input-color" + }, + "placeholder": { + "$value": "{color.gray.500}", + "source": "$input-placeholder-color" + }, + "plaintext": { + "$value": "{color.body.base}", + "source": "$input-plaintext-color" + }, + "border": { + "$value": "{color.gray.500}", + "source": "$input-border-color" + }, "bg": { - "base": { "source": "$input-bg", "$value": "{color.bg.base}" }, - "disabled": { "source": "$input-disabled-bg", "$value": "{color.gray.100}" } + "base": { + "$value": "{color.bg.base}", + "source": "$input-bg" + }, + "disabled": { + "$value": "{color.gray.100}", + "source": "$input-disabled-bg" + } }, "group": { "addon": { - "base": { "source": "$input-group-addon-color", "$value": "{color.form.input.base}" }, - "border": { "source": "$input-group-addon-border-color", "$value": "{color.form.input.border}" }, - "bg": { "source": "$input-group-addon-bg", "$value": "{color.gray.100}" } + "base": { + "$value": "{color.form.input.base}", + "source": "$input-group-addon-color" + }, + "border": { + "$value": "{color.form.input.border}", + "source": "$input-group-addon-border-color" + }, + "bg": { + "$value": "{color.gray.100}", + "source": "$input-group-addon-bg" + } } }, "focus": { - "base": { "source": "$input-focus-color", "$value": "{color.form.input.base}" }, - "border": { "source": "$input-focus-border-color", "$value": "{color.input.focus}" }, - "bg": { "source": "$input-focus-bg", "$value": "{color.form.input.bg.base}" } + "base": { + "$value": "{color.form.input.base}", + "source": "$input-focus-color" + }, + "border": { + "$value": "{color.input.focus}", + "source": "$input-focus-border-color" + }, + "bg": { + "$value": "{color.form.input.bg.base}", + "source": "$input-focus-bg" + } } }, "control": { "indicator": { "$type": "color", - "border": { "source": "$custom-control-indicator-border-color", "$value": "{color.gray.700}" }, + "border": { + "$value": "{color.gray.700}", + "source": "$custom-control-indicator-border-color" + }, "bg": { - "base": { "source": "$custom-control-indicator-bg", "$value": "{color.form.input.bg.base}" }, - "disabled": { "source": "$custom-control-indicator-disabled-bg", "$value": "{color.form.input.bg.disabled}" } + "base": { + "$value": "{color.form.input.bg.base}", + "source": "$custom-control-indicator-bg" + }, + "disabled": { + "$value": "{color.form.input.bg.disabled}", + "source": "$custom-control-indicator-disabled-bg" + } }, "checked": { - "base": { "source": "$custom-control-indicator-checked-color", "$value": "{color.bg.active}" }, - "valid": { "source": "$custom-control-indicator-checked-valid-color", "$value": "{color.success.base}" }, - "invalid": { "source": "$custom-control-indicator-checked-invalid-color", "$value": "{color.danger.base}" }, + "base": { + "$value": "{color.bg.active}", + "source": "$custom-control-indicator-checked-color" + }, + "valid": { + "$value": "{color.success.base}", + "source": "$custom-control-indicator-checked-valid-color" + }, + "invalid": { + "$value": "{color.danger.base}", + "source": "$custom-control-indicator-checked-invalid-color" + }, "bg": { - "base": { "source": "$custom-control-indicator-checked-bg", "$value": "{color.bg.active}" }, + "base": { + "$value": "{color.bg.active}", + "source": "$custom-control-indicator-checked-bg" + }, "disabled": { - "source": "$custom-control-indicator-checked-disabled-bg", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "$value": "{color.primary.base}" + "$value": "{color.primary.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$custom-control-indicator-checked-disabled-bg" } }, "border": { - "base": { "source": "$custom-control-indicator-checked-border-color", "$value": "{color.form.control.indicator.checked.base}" }, - "focus": { "source": "$custom-control-indicator-focus-border-color", "$value": "{color.form.input.focus.border}" } + "base": { + "$value": "{color.form.control.indicator.checked.base}", + "source": "$custom-control-indicator-checked-border-color" + }, + "focus": { + "$value": "{color.form.input.focus.border}", + "source": "$custom-control-indicator-focus-border-color" + } } }, "active": { - "base": { "source": "$custom-control-indicator-active-color", "$value": "{color.active}" }, - "bg": { "source": "$custom-control-indicator-active-bg", "$value": "{color.bg.active}" }, - "border": { "source": "$custom-control-indicator-active-border-color", "$value": "{color.form.control.indicator.active.bg}" } + "base": { + "$value": "{color.active}", + "source": "$custom-control-indicator-active-color" + }, + "bg": { + "$value": "{color.bg.active}", + "source": "$custom-control-indicator-active-bg" + }, + "border": { + "$value": "{color.form.control.indicator.active.bg}", + "source": "$custom-control-indicator-active-border-color" + } } }, "label": { "$type": "color", - "base": { "source": "$custom-control-label-color", "$value": "inherit" }, - "disabled": { "source": "$custom-control-label-disabled-color", "$value": "{color.disabled}" }, + "base": { + "$value": "inherit", + "source": "$custom-control-label-color" + }, + "disabled": { + "$value": "{color.disabled}", + "source": "$custom-control-label-disabled-color" + }, "floating": { "text": { - "source": "$form-control-floating-label-text-bg", - "modify": [{ "type": "alpha", "amount": 0.1 }], - "$value": "{color.form.input.bg.base}" + "$value": "{color.form.input.bg.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$form-control-floating-label-text-bg" } } }, @@ -71,9 +159,18 @@ "$type": "color", "indicator": { "indeterminate": { - "base": { "source": "$custom-checkbox-indicator-indeterminate-color", "$value": "{color.form.control.indicator.checked.base}" }, - "bg": { "source": "$custom-checkbox-indicator-indeterminate-bg", "$value": "{color.bg.active}" }, - "border": { "source": "$custom-checkbox-indicator-indeterminate-border-color", "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}" } + "base": { + "$value": "{color.form.control.indicator.checked.base}", + "source": "$custom-checkbox-indicator-indeterminate-color" + }, + "bg": { + "$value": "{color.bg.active}", + "source": "$custom-checkbox-indicator-indeterminate-bg" + }, + "border": { + "$value": "{color.form.control.checkbox.indicator.indeterminate.bg}", + "source": "$custom-checkbox-indicator-indeterminate-border-color" + } } } }, @@ -81,133 +178,226 @@ "$type": "color", "indicator": { "checked": { - "bg": { "source": "$custom-switch-indicator-checked-bg", "$value": "{color.success.base}" } + "bg": { + "$value": "{color.success.base}", + "source": "$custom-switch-indicator-checked-bg" + } } } }, "select": { "base": { - "source": "$custom-select-color", + "$type": "color", "$value": "{color.form.input.base}", - "$type": "color" + "source": "$custom-select-color" }, "disabled": { - "source": "$custom-select-disabled-color", + "$type": "color", "$value": "{color.disabled}", - "$type": "color" + "source": "$custom-select-disabled-color" }, "indicator": { "$type": "color", - "base": { "source": "$custom-select-indicator-color", "$value": "{color.theme.hover.gray}" } + "base": { + "$value": "{color.theme.hover.gray}", + "source": "$custom-select-indicator-color" + } }, "bg": { "base": { - "source": "$custom-select-bg", + "$type": "color", "$value": "{color.form.input.bg.base}", - "$type": "color" + "source": "$custom-select-bg" }, "disabled": { - "source": "$custom-select-disabled-bg", + "$type": "color", "$value": "{color.gray.100}", - "$type": "color" + "source": "$custom-select-disabled-bg" }, "size": { - "source": "$custom-select-bg-size", + "$type": "dimension", "$value": "{color.gray.100}", - "$type": "dimension" + "source": "$custom-select-bg-size" } }, "border": { "$type": "color", - "base": { "source": "$custom-select-border-color", "$value": "{color.form.input.border}" }, - "focus": { "source": "$custom-select-focus-border-color", "$value": "{color.form.input.focus.border}" } + "base": { + "$value": "{color.form.input.border}", + "source": "$custom-select-border-color" + }, + "focus": { + "$value": "{color.form.input.focus.border}", + "source": "$custom-select-focus-border-color" + } } }, "range": { "$type": "color", "track": { - "bg": { "source": "$custom-range-track-bg", "$value": "{color.gray.300}" } + "bg": { + "$value": "{color.gray.300}", + "source": "$custom-range-track-bg" + } }, "thumb": { "bg": { - "base": { "source": "$custom-range-thumb-bg", "$value": "{color.bg.active}" }, - "disabled": { "source": "$custom-range-thumb-disabled-bg", "$value": "{color.disabled}" }, + "base": { + "$value": "{color.bg.active}", + "source": "$custom-range-thumb-bg" + }, + "disabled": { + "$value": "{color.disabled}", + "source": "$custom-range-thumb-disabled-bg" + }, "active": { - "source": "$custom-range-thumb-active-bg", - "modify": [{ "type": "lighten", "amount": "0.35" }], - "$value": "{color.bg.active}" + "$value": "{color.bg.active}", + "modify": [ + { + "type": "lighten", + "amount": "0.35" + } + ], + "source": "$custom-range-thumb-active-bg" } } } }, "file": { "$type": "color", - "base": { "source": "$custom-file-color", "$value": "{color.form.input.base}" }, + "base": { + "$value": "{color.form.input.base}", + "source": "$custom-file-color" + }, "bg": { - "base": { "source": "$custom-file-bg", "$value": "{color.form.input.bg.base}" }, - "disabled": { "source": "$custom-file-disabled-bg", "$value": "{color.form.input.bg.disabled}" } + "base": { + "$value": "{color.form.input.bg.base}", + "source": "$custom-file-bg" + }, + "disabled": { + "$value": "{color.form.input.bg.disabled}", + "source": "$custom-file-disabled-bg" + } }, "button": { - "base": { "source": "$custom-file-button-color", "$value": "{color.form.control.file.base}" }, - "bg": { "source": "$custom-file-button-bg", "$value": "{color.form.input.group.addon.bg}" } + "base": { + "$value": "{color.form.control.file.base}", + "source": "$custom-file-button-color" + }, + "bg": { + "$value": "{color.form.input.group.addon.bg}", + "source": "$custom-file-button-bg" + } }, "border": { - "base": { "source": "$custom-file-border-color", "$value": "{color.form.input.border}" }, - "focus": { "source": "$custom-file-focus-border-color", "$value": "{color.form.input.focus.border}" } + "base": { + "$value": "{color.form.input.border}", + "source": "$custom-file-border-color" + }, + "focus": { + "$value": "{color.form.input.focus.border}", + "source": "$custom-file-focus-border-color" + } } } }, "feedback": { "$type": "color", - "valid": { "source": "$form-feedback-valid-color", "$value": "{color.success.base}" }, - "invalid": { "source": "$form-feedback-invalid-color", "$value": "{color.danger.base}" }, + "valid": { + "$value": "{color.success.base}", + "source": "$form-feedback-valid-color" + }, + "invalid": { + "$value": "{color.danger.base}", + "source": "$form-feedback-invalid-color" + }, "icon": { - "valid": { "source": "$form-feedback-icon-valid-color", "$value": "{color.form.feedback.valid}" }, - "invalid": { "source": "$form-feedback-icon-invalid-color", "$value": "{color.form.feedback.invalid}" } + "valid": { + "$value": "{color.form.feedback.valid}", + "source": "$form-feedback-icon-valid-color" + }, + "invalid": { + "$value": "{color.form.feedback.invalid}", + "source": "$form-feedback-icon-invalid-color" + } }, "tooltip": { "valid": { - "source": "$form-feedback-tooltip-valid-color", - "modify": [{ "type": "color-yiq" }], - "$value": "{color.form.feedback.valid}" + "$value": "{color.form.feedback.valid}", + "modify": [ + { + "type": "color-yiq" + } + ], + "source": "$form-feedback-tooltip-valid-color" }, "bg": { "valid": { - "source": "$form-feedback-tooltip-valid-bg", - "modify": [{ "type": "alpha", "amount": 0.9 }], - "$value": "{color.form.feedback.valid}" + "$value": "{color.form.feedback.valid}", + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "source": "$form-feedback-tooltip-valid-bg" }, "invalid": { - "source": "$form-feedback-tooltip-invalid-bg", - "modify": [{ "type": "alpha", "amount": 0.9 }], - "$value": "{color.form.feedback.invalid}" + "$value": "{color.form.feedback.invalid}", + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "source": "$form-feedback-tooltip-invalid-bg" } }, "box-shadow": { "focus": { "valid": { - "source": "$form-feedback-focus-box-shadow-valid-color", - "modify": [{ "type": "alpha", "amount": 0.25 }], - "$value": "{color.form.feedback.valid}" + "$value": "{color.form.feedback.valid}", + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "source": "$form-feedback-focus-box-shadow-valid-color" }, "invalid": { - "source": "$form-feedback-focus-box-shadow-invalid-color", - "modify": [{ "type": "alpha", "amount": 0.25 }], - "$value": "{color.form.feedback.invalid}" + "$value": "{color.form.feedback.invalid}", + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "source": "$form-feedback-focus-box-shadow-invalid-color" } } } }, "checked": { "valid": { - "source": "$form-feedback-checked-valid-color", - "modify": [{ "type": "lighten", "amount": 0.1 }], - "$value": "{color.form.feedback.valid}" + "$value": "{color.form.feedback.valid}", + "modify": [ + { + "type": "lighten", + "amount": 0.1 + } + ], + "source": "$form-feedback-checked-valid-color" }, "invalid": { - "source": "$form-feedback-checked-invalid-color", - "modify": [{ "type": "lighten", "amount": 0.1 }], - "$value": "{color.form.feedback.invalid}" + "$value": "{color.form.feedback.invalid}", + "modify": [ + { + "type": "lighten", + "amount": 0.1 + } + ], + "source": "$form-feedback-checked-invalid-color" } } } diff --git a/tokens/src/themes/light/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json index 6554295dc1..da81e9e283 100644 --- a/tokens/src/themes/light/components/Form/elevation.json +++ b/tokens/src/themes/light/components/Form/elevation.json @@ -3,47 +3,67 @@ "$type": "shadow", "form": { "input": { - "base": { "source": "$input-box-shadow", "$value": "none" }, + "base": { + "$value": "none", + "source": "$input-box-shadow" + }, "focus": { - "source": "$input-focus-box-shadow", "$value": { "color": "{color.primary.500}", "spread": "1px", "offsetX": "0", "offsetY": "0", "blur": "0" - } + }, + "source": "$input-focus-box-shadow" } }, "control": { "indicator": { - "base": { "source": "$custom-control-indicator-box-shadow", "$value": "{elevation.form.input.base}" }, + "base": { + "$value": "{elevation.form.input.base}", + "source": "$custom-control-indicator-box-shadow" + }, "checked": { - "base": { "source": "$custom-control-indicator-checked-box-shadow", "$value": "none" }, + "base": { + "$value": "none", + "source": "$custom-control-indicator-checked-box-shadow" + }, "focus": { - "source": "$custom-control-indicator-focus-box-shadow", "$value": { "color": "rgba(0, 0, 0, .1)", "spread": "4px", "offsetX": "0", "offsetY": "0", "blur": "0" - } + }, + "source": "$custom-control-indicator-focus-box-shadow" } }, - "active": { "source": "$custom-control-indicator-active-box-shadow", "$value": "none" } + "active": { + "$value": "none", + "source": "$custom-control-indicator-active-box-shadow" + } }, "checkbox": { "indicator": { - "indeterminate": { "source": "$custom-checkbox-indicator-indeterminate-box-shadow", "$value": "none" } + "indeterminate": { + "$value": "none", + "source": "$custom-checkbox-indicator-indeterminate-box-shadow" + } } }, "range": { - "track": { "source": "$custom-range-track-box-shadow", "$value": "none" }, + "track": { + "$value": "none", + "source": "$custom-range-track-box-shadow" + }, "thumb": { - "base": { "source": "$custom-range-thumb-box-shadow", "$value": "none" }, + "base": { + "$value": "none", + "source": "$custom-range-thumb-box-shadow" + }, "focus": { - "source": "$custom-range-thumb-focus-box-shadow", "$value": [ { "color": "{color.body.bg}", @@ -52,18 +72,31 @@ "offsetY": ".1rem", "blur": ".25rem" } - ] + ], + "source": "$custom-range-thumb-focus-box-shadow" } } }, "file": { - "base": { "source": "$custom-file-box-shadow", "$value": "{elevation.form.input.base}" }, - "focus": { "source": "$custom-file-focus-box-shadow", "$value": "{elevation.form.input.focus}" } + "base": { + "$value": "{elevation.form.input.base}", + "source": "$custom-file-box-shadow" + }, + "focus": { + "$value": "{elevation.form.input.focus}", + "source": "$custom-file-focus-box-shadow" + } }, "select": { "border": { - "base": { "source": "$custom-select-box-shadow", "$value": "none" }, - "focus": { "source": "$custom-select-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" } + "base": { + "$value": "none", + "source": "$custom-select-box-shadow" + }, + "focus": { + "$value": "{elevation.input.btn-focus.box-shadow}", + "source": "$custom-select-focus-box-shadow" + } } } } diff --git a/tokens/src/themes/light/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json index 5970074591..5dd794344f 100644 --- a/tokens/src/themes/light/components/Form/other.json +++ b/tokens/src/themes/light/components/Form/other.json @@ -4,8 +4,8 @@ "$type": "number", "feedback": { "tooltip-opacity": { - "source": "$form-feedback-tooltip-opacity", - "$value": ".9" + "$value": ".9", + "source": "$form-feedback-tooltip-opacity" } } }, @@ -17,30 +17,54 @@ "indicator": { "icon-checked": { "base": { - "source": "$custom-checkbox-indicator-icon-checked", + "$value": "url(\"data:image/svg+xml,\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-checkbox-indicator-icon-checked" }, "valid": { - "source": "$custom-checkbox-indicator-icon-valid-checked", + "$value": "url(\"data:image/svg+xml,\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-checkbox-indicator-icon-valid-checked" }, "invalid": { - "source": "$custom-checkbox-indicator-icon-invalid-checked", + "$value": "url(\"data:image/svg+xml,\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-checkbox-indicator-icon-invalid-checked" } }, "indeterminate": { "icon": { - "source": "$custom-checkbox-indicator-icon-indeterminate", + "$value": "url(\"data:image/svg+xml,\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-checkbox-indicator-icon-indeterminate" } } } @@ -50,22 +74,40 @@ "indicator": { "icon-checked": { "base": { - "source": "$custom-radio-indicator-icon-checked", + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-radio-indicator-icon-checked" }, "valid": { - "source": "$custom-radio-indicator-icon-valid-checked", + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-radio-indicator-icon-valid-checked" }, "invalid": { - "source": "$custom-radio-indicator-icon-invalid-checked", + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-radio-indicator-icon-invalid-checked" } } } @@ -74,16 +116,28 @@ "$type": "file", "indicator": { "icon-off": { - "source": "$custom-switch-indicator-icon-off", + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.bg.base}'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-switch-indicator-icon-off" }, "icon-on": { - "source": "$custom-switch-indicator-icon-on", + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.active.base}'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-switch-indicator-icon-on" } } }, @@ -91,14 +145,20 @@ "indicator": { "$type": "file", "icon": { - "source": "$custom-select-indicator", + "$value": "url('data:image/svg+xml,')", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url('data:image/svg+xml,')" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$custom-select-indicator" } }, "bg": { - "source": "$custom-select-background", + "$type": "background", "$value": { "color": "{color.form.control.select.bg.base}", "image": "{other.content.form.control.select.indicator.icon}", @@ -107,7 +167,7 @@ "offset-y": "{spacing.form.input.padding.y.base}", "position-y": "center" }, - "$type": "background" + "source": "$custom-select-background" } } }, @@ -115,16 +175,28 @@ "$type": "file", "icon": { "valid": { - "source": "$form-feedback-icon-valid", + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='{color.form.feedback.icon.valid}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$form-feedback-icon-valid" }, "invalid": { - "source": "$form-feedback-icon-invalid", + "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='{color.form.feedback.icon.invalid}' viewBox='-2 -2 7 7'%3e%3cpath stroke='{color.form.feedback.icon.invalid}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$form-feedback-icon-invalid" } } } diff --git a/tokens/src/themes/light/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json index d2e1b47e0b..a5a20f7c81 100644 --- a/tokens/src/themes/light/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -3,377 +3,812 @@ "$type": "color", "icon-button": { "bg": { - "base": { "source": "$btn-icon-bg", "$value": "transparent" }, + "base": { + "$value": "transparent", + "source": "$btn-icon-bg" + }, "primary": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.text.primary.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.text.primary.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "$value": "{color.icon-button.text.primary.base}" }, - "hover": { "$value": "{color.icon-button.text.primary.base}" }, - "focus": { "$value": "{color.icon-button.text.primary.base}" } + "base": { + "$value": "{color.icon-button.text.primary.base}" + }, + "hover": { + "$value": "{color.icon-button.text.primary.base}" + }, + "focus": { + "$value": "{color.icon-button.text.primary.base}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "secondary": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.secondary.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.secondary.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "$value": "{color.secondary.base}" }, - "hover": { "$value": "{color.icon-button.bg.secondary.active.base}" }, - "focus": { "$value": "{color.icon-button.bg.secondary.active.base}" } + "base": { + "$value": "{color.secondary.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.secondary.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.secondary.active.base}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "brand": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.brand.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.brand.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "$value": "{color.brand.base}" }, - "hover": { "$value": "{color.icon-button.bg.brand.active.base}" }, - "focus": { "$value": "{color.icon-button.bg.brand.active.base}" } + "base": { + "$value": "{color.brand.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.brand.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.brand.active.base}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "success": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.success.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.success.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "$value": "{color.success.base}" }, - "hover": { "$value": "{color.icon-button.bg.success.active.base}" }, - "focus": { "$value": "{color.icon-button.bg.success.active.base}" } + "base": { + "$value": "{color.success.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.success.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.success.active.base}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "warning": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.warning.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.warning.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "$value": "{color.warning.base}" }, - "hover": { "$value": "{color.icon-button.bg.warning.active.base}" }, - "focus": { "$value": "{color.icon-button.bg.warning.active.base}" } + "base": { + "$value": "{color.warning.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.warning.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.warning.active.base}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "danger": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.danger.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.danger.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "$value": "{color.danger.base}" }, - "hover": { "$value": "{color.icon-button.bg.danger.active.base}" }, - "focus": { "$value": "{color.icon-button.bg.danger.active.base}" } + "base": { + "$value": "{color.danger.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.danger.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.danger.active.base}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "light": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.light.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.light.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "$value": "{color.light.base}" }, - "hover": { "$value": "{color.icon-button.bg.light.active.base}" }, - "focus": { "$value": "{color.icon-button.bg.light.active.base}" } + "base": { + "$value": "{color.light.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.light.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.light.active.base}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "dark": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.dark.base}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.dark.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "$value": "{color.dark.base}" }, - "hover": { "$value": "{color.icon-button.bg.dark.active.base}" }, - "focus": { "$value": "{color.icon-button.bg.dark.active.base}" } + "base": { + "$value": "{color.dark.base}" + }, + "hover": { + "$value": "{color.icon-button.bg.dark.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.dark.active.base}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } }, "black": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.black}" }, - "focus": { "$value": "{color.icon-button.bg.base}" }, + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.black}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.bg.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.bg.base}" } + "base": { + "$value": "{color.icon-button.bg.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.bg.base}" + } }, "active": { - "base": { "$value": "{color.black}" }, - "hover": { "$value": "{color.icon-button.bg.black.active.base}" }, - "focus": { "$value": "{color.icon-button.bg.black.active.base}" } + "base": { + "$value": "{color.black}" + }, + "hover": { + "$value": "{color.icon-button.bg.black.active.base}" + }, + "focus": { + "$value": "{color.icon-button.bg.black.active.base}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } } } }, "text": { "primary": { - "base": { "$value": "{color.primary.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.text.primary.base}" }, + "base": { + "$value": "{color.primary.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.primary.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.text.primary.base}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.text.primary.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "$value": "{color.icon-button.text.primary.base}" }, - "hover": { "$value": "{color.icon-button.text.primary.base}" }, - "focus": { "$value": "{color.icon-button.text.primary.base}" } + "base": { + "$value": "{color.icon-button.text.primary.base}" + }, + "hover": { + "$value": "{color.icon-button.text.primary.base}" + }, + "focus": { + "$value": "{color.icon-button.text.primary.base}" + } } }, "secondary": { - "base": { "$value": "{color.secondary.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.text.secondary.base}" }, + "base": { + "$value": "{color.secondary.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.secondary.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.secondary.base}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.secondary.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "$value": "{color.secondary.base}" }, - "hover": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" }, - "focus": { "$value": "{color.icon-button.text.secondary.inverse-active.base}" } + "base": { + "$value": "{color.secondary.base}" + }, + "hover": { + "$value": "{color.icon-button.text.secondary.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.secondary.inverse-active.base}" + } } }, "brand": { - "base": { "$value": "{color.brand.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.text.brand.base}" }, + "base": { + "$value": "{color.brand.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.brand.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.brand.base}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.brand.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "$value": "{color.brand.base}" }, - "hover": { "$value": "{color.icon-button.text.brand.inverse-active.base}" }, - "focus": { "$value": "{color.icon-button.text.brand.inverse-active.base}" } + "base": { + "$value": "{color.brand.base}" + }, + "hover": { + "$value": "{color.icon-button.text.brand.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.brand.inverse-active.base}" + } } }, "success": { - "base": { "$value": "{color.success.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.text.success.base}" }, + "base": { + "$value": "{color.success.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.success.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.success.base}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.success.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "$value": "{color.success.base}" }, - "hover": { "$value": "{color.icon-button.text.success.inverse-active.base}" }, - "focus": { "$value": "{color.icon-button.text.success.inverse-active.base}" } + "base": { + "$value": "{color.success.base}" + }, + "hover": { + "$value": "{color.icon-button.text.success.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.success.inverse-active.base}" + } } }, "warning": { - "base": { "$value": "{color.warning.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.text.warning.base}" }, + "base": { + "$value": "{color.warning.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.warning.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.warning.base}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.warning.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "$value": "{color.warning.base}" }, - "hover": { "$value": "{color.icon-button.text.warning.inverse-active.base}" }, - "focus": { "$value": "{color.icon-button.text.warning.inverse-active.base}" } + "base": { + "$value": "{color.warning.base}" + }, + "hover": { + "$value": "{color.icon-button.text.warning.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.warning.inverse-active.base}" + } } }, "danger": { - "base": { "$value": "{color.danger.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.text.danger.base}" }, + "base": { + "$value": "{color.danger.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.danger.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.danger.base}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.danger.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "$value": "{color.danger.base}" }, - "hover": { "$value": "{color.icon-button.text.danger.inverse-active.base}" }, - "focus": { "$value": "{color.icon-button.text.danger.inverse-active.base}" } + "base": { + "$value": "{color.danger.base}" + }, + "hover": { + "$value": "{color.icon-button.text.danger.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.danger.inverse-active.base}" + } } }, "light": { - "base": { "$value": "{color.light.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.text.light.base}" }, + "base": { + "$value": "{color.light.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.light.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.light.base}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.light.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "$value": "{color.light.base}" }, - "hover": { "$value": "{color.icon-button.text.light.inverse-active.base}" }, - "focus": { "$value": "{color.icon-button.text.light.inverse-active.base}" } + "base": { + "$value": "{color.light.base}" + }, + "hover": { + "$value": "{color.icon-button.text.light.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.light.inverse-active.base}" + } } }, "dark": { - "base": { "$value": "{color.dark.base}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.text.dark.base}" }, + "base": { + "$value": "{color.dark.base}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.dark.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.dark.base}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.dark.base}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "$value": "{color.dark.base}" }, - "hover": { "$value": "{color.icon-button.text.dark.inverse-active.base}" }, - "focus": { "$value": "{color.icon-button.text.dark.inverse-active.base}" } + "base": { + "$value": "{color.dark.base}" + }, + "hover": { + "$value": "{color.icon-button.text.dark.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.dark.inverse-active.base}" + } } }, "black": { - "base": { "$value": "{color.black}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.text.black.base}" }, + "base": { + "$value": "{color.black}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.text.black.base}" + }, "inverse": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.black}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.black}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "active": { - "base": { "$value": "{color.icon-button.accent}" }, - "hover": { "$value": "{color.icon-button.accent}" }, - "focus": { "$value": "{color.icon-button.accent}" } + "base": { + "$value": "{color.icon-button.accent}" + }, + "hover": { + "$value": "{color.icon-button.accent}" + }, + "focus": { + "$value": "{color.icon-button.accent}" + } }, "inverse-active": { - "base": { "$value": "{color.black}" }, - "hover": { "$value": "{color.icon-button.text.black.inverse-active.base}" }, - "focus": { "$value": "{color.icon-button.text.black.inverse-active.base}" } + "base": { + "$value": "{color.black}" + }, + "hover": { + "$value": "{color.icon-button.text.black.inverse-active.base}" + }, + "focus": { + "$value": "{color.icon-button.text.black.inverse-active.base}" + } } } }, "accent": { - "source": "$btn-icon-accent-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$btn-icon-accent-color" }, "black": { - "source": "$btn-icon-black", - "$value": "{color.black}" + "$value": "{color.black}", + "source": "$btn-icon-black" } } }, @@ -402,8 +837,12 @@ "inset": "inset" } }, - "active": { "$value": "none" }, - "inverse-active": { "$value": "none" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "secondary": { "base": { @@ -426,8 +865,12 @@ "inset": "inset" } }, - "active": { "$value": "none" }, - "inverse-active": { "$value": "none" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "brand": { "base": { @@ -450,8 +893,12 @@ "inset": "inset" } }, - "active": { "$value": "none" }, - "inverse-active": { "$value": "none" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "success": { "base": { @@ -474,8 +921,12 @@ "inset": "inset" } }, - "active": { "$value": "none" }, - "inverse-active": { "$value": "none" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "warning": { "base": { @@ -498,8 +949,12 @@ "inset": "inset" } }, - "active": { "$value": "none" }, - "inverse-active": { "$value": "none" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "danger": { "base": { @@ -522,8 +977,12 @@ "inset": "inset" } }, - "active": { "$value": "none" }, - "inverse-active": { "$value": "none" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "light": { "base": { @@ -546,8 +1005,12 @@ "inset": "inset" } }, - "active": { "$value": "none" }, - "inverse-active": { "$value": "none" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "dark": { "base": { @@ -570,8 +1033,12 @@ "inset": "inset" } }, - "active": { "$value": "none" }, - "inverse-active": { "$value": "none" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } }, "black": { "base": { @@ -594,8 +1061,12 @@ "inset": "inset" } }, - "active": { "$value": "none" }, - "inverse-active": { "$value": "none" } + "active": { + "$value": "none" + }, + "inverse-active": { + "$value": "none" + } } } } diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json index 8c4df0f914..49b678bdcc 100644 --- a/tokens/src/themes/light/components/Image.json +++ b/tokens/src/themes/light/components/Image.json @@ -2,10 +2,18 @@ "color": { "$type": "color", "image": { - "figure-caption": { "source": "$figure-caption-color", "$value": "{color.gray.500}" }, + "figure-caption": { + "$value": "{color.gray.500}", + "source": "$figure-caption-color" + }, "thumbnail": { - "bg": { "source": "$thumbnail-bg", "$value": "{color.body.bg}" }, - "border": { "source": "$thumbnail-border-color", "$value": "{color.gray.200}" + "bg": { + "$value": "{color.body.bg}", + "source": "$thumbnail-bg" + }, + "border": { + "$value": "{color.gray.200}", + "source": "$thumbnail-border-color" } } } @@ -14,7 +22,10 @@ "$type": "shadow", "image": { "thumbnail": { - "box-shadow": { "source": "$thumbnail-box-shadow", "$value": "none" } + "box-shadow": { + "$value": "none", + "source": "$thumbnail-box-shadow" + } } } } diff --git a/tokens/src/themes/light/components/Menu.json b/tokens/src/themes/light/components/Menu.json index 74d45ae499..5b334d760b 100644 --- a/tokens/src/themes/light/components/Menu.json +++ b/tokens/src/themes/light/components/Menu.json @@ -2,29 +2,59 @@ "elevation": { "$type": "shadow", "menu": { - "box-shadow": { "source": "$menu-box-shadow", "$value": "{elevation.box-shadow.base}" } + "box-shadow": { + "$value": "{elevation.box-shadow.base}", + "source": "$menu-box-shadow" + } } }, "color": { "$type": "color", "menu": { - "bg": { "source": "$menu-bg", "$value": "{color.white}" }, + "bg": { + "$value": "{color.white}", + "source": "$menu-bg" + }, "item": { - "color": { "source": "$menu-item-color", "$value": "{color.body.base}" }, - "bg": { "source": "$menu-item-bg", "$value": "transparent" }, - "border": { "source": "$menu-item-border-color", "$value": "{color.menu.item.bg}" }, + "color": { + "$value": "{color.body.base}", + "source": "$menu-item-color" + }, + "bg": { + "$value": "transparent", + "source": "$menu-item-bg" + }, + "border": { + "$value": "{color.menu.item.bg}", + "source": "$menu-item-border-color" + }, "hover": { - "color": { "source": "$menu-item-hover-color", "$value": "{color.btn.text.tertiary}" }, - "bg": { "source": "$menu-item-hover-bg", "$value": "{color.btn.hover.bg.tertiary}" }, - "border": { "source": "$menu-item-hover-border-color", "$value": "{color.menu.item.bg}" } + "color": { + "$value": "{color.btn.text.tertiary}", + "source": "$menu-item-hover-color" + }, + "bg": { + "$value": "{color.btn.hover.bg.tertiary}", + "source": "$menu-item-hover-bg" + }, + "border": { + "$value": "{color.menu.item.bg}", + "source": "$menu-item-hover-border-color" + } }, "focus": { - "bg": { "source": "$menu-item-focus-bg", "$value": "{color.btn.active.bg.tertiary}" } + "bg": { + "$value": "{color.btn.active.bg.tertiary}", + "source": "$menu-item-focus-bg" + } } }, "select": { "btn-link": { - "color": { "source": "$menu-select-btn-link-color", "$value": "{color.primary.500}" } + "color": { + "$value": "{color.primary.500}", + "source": "$menu-select-btn-link-color" + } } } } diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json index b11fd11149..e1ef22ee44 100644 --- a/tokens/src/themes/light/components/Modal.json +++ b/tokens/src/themes/light/components/Modal.json @@ -3,14 +3,25 @@ "$type": "color", "modal": { "content": { - "bg": { "source": "$modal-content-bg", "$value": "{color.bg.base}" }, + "bg": { + "$value": "{color.bg.base}", + "source": "$modal-content-bg" + }, "border": { - "source": "$modal-content-border-color", - "modify": [{ "type": "alpha", "amount": 0.2 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.2 + } + ], + "source": "$modal-content-border-color" } }, - "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" } + "backdrop-bg": { + "$value": "{color.black}", + "source": "$modal-backdrop-bg" + } } }, "elevation": { @@ -19,7 +30,6 @@ "content": { "box-shadow": { "sm-up": { - "source": "$modal-content-box-shadow-sm-up", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -33,7 +43,8 @@ "offsetY": "8px", "blur": "20px" } - ] + ], + "source": "$modal-content-box-shadow-sm-up" } } } @@ -41,7 +52,10 @@ }, "other": { "modal": { - "opacity": { "source": "$modal-backdrop-opacity", "$value": ".5" } + "opacity": { + "$value": ".5", + "source": "$modal-backdrop-opacity" + } } } } diff --git a/tokens/src/themes/light/components/Nav.json b/tokens/src/themes/light/components/Nav.json index d9c0ac6f86..9cdfda64f7 100644 --- a/tokens/src/themes/light/components/Nav.json +++ b/tokens/src/themes/light/components/Nav.json @@ -4,19 +4,22 @@ "nav": { "tabs-link": { "border": { - "active": { "source": "$nav-tabs-link-active-border-color", "$value": "{color.primary.500}" }, + "active": { + "$value": "{color.primary.500}", + "source": "$nav-tabs-link-active-border-color" + }, "hover": { - "source": "$nav-tabs-link-hover-border-color", "$value": { "top": "transparent", "right": "transparent", "bottom": "{color.nav.tabs.base.border.base}", "left": "transparent" - } + }, + "source": "$nav-tabs-link-hover-border-color" }, "focus": { - "source": "$nav-tabs-link-focus-border-color", - "$value": "{color.nav.tabs.base.link.active.text}" + "$value": "{color.nav.tabs.base.link.active.text}", + "source": "$nav-tabs-link-focus-border-color" } } } @@ -27,72 +30,114 @@ "nav": { "link": { "text": { - "base": { "source": "$nav-link-color", "$value": "{color.gray.700}" }, - "disabled": { "source": "$nav-link-disabled-color", "$value": "{color.gray.300}" } + "base": { + "$value": "{color.gray.700}", + "source": "$nav-link-color" + }, + "disabled": { + "$value": "{color.gray.300}", + "source": "$nav-link-disabled-color" + } }, - "border": { "source": "$nav-tabs-link-border-color", "$value": "transparent" } + "border": { + "$value": "transparent", + "source": "$nav-tabs-link-border-color" + } }, "tabs": { "base": { "text": { - "disabled": { "source": "$nav-tabs-disabled-bg", "$value": "{color.nav.tabs.base.bg.hover}" } + "disabled": { + "$value": "{color.nav.tabs.base.bg.hover}", + "source": "$nav-tabs-disabled-bg" + } + }, + "bg": { + "hover": { + "$value": "transparent", + "source": "$nav-tabs-hover-bg" + } }, - "bg": { "hover": { "source": "$nav-tabs-hover-bg", "$value": "transparent" } }, "border": { - "base": { "source": "$nav-tabs-border-color", "$value": "{color.light.400}" }, - "focus": { "source": "$nav-tabs-focus-border-color", "$value": "{color.nav.tabs.base.bg.hover}" } + "base": { + "$value": "{color.light.400}", + "source": "$nav-tabs-border-color" + }, + "focus": { + "$value": "{color.nav.tabs.base.bg.hover}", + "source": "$nav-tabs-focus-border-color" + } }, "link": { - "hover": { "bg": { "source": "$nav-tabs-link-hover-bg", "$value": "{color.light.400}" } }, + "hover": { + "bg": { + "$value": "{color.light.400}", + "source": "$nav-tabs-link-hover-bg" + } + }, "active": { - "text": { "source": "$nav-tabs-link-active-color", "$value": "{color.primary.500}" }, - "bg": { "source": "$nav-tabs-link-active-bg", "$value": "transparent" } + "text": { + "$value": "{color.primary.500}", + "source": "$nav-tabs-link-active-color" + }, + "bg": { + "$value": "transparent", + "source": "$nav-tabs-link-active-bg" + } }, "disabled": { - "border": { "source": "$nav-tabs-link-disabled-border-color", "$value": "{color.nav.link.border}" } + "border": { + "$value": "{color.nav.link.border}", + "source": "$nav-tabs-link-disabled-border-color" + } } } }, "inverse": { "link": { - "text": { "base": { "source": "$nav-inverse-tabs-link-color", "$value": "{color.white}" } }, + "text": { + "base": { + "$value": "{color.white}", + "source": "$nav-inverse-tabs-link-color" + } + }, "border": { "bottom": { - "source": "$nav-inverse-tabs-link-border-bottom-color", - "$value": "{color.dark.300}" + "$value": "{color.dark.300}", + "source": "$nav-inverse-tabs-link-border-bottom-color" }, "active": { - "source": "$nav-inverse-tabs-link-active-border-color", - "$value": "{color.nav.tabs.inverse.link.text.base}" + "$value": "{color.nav.tabs.inverse.link.text.base}", + "source": "$nav-inverse-tabs-link-active-border-color" } }, "bg": { "hover": { - "source": "$nav-inverse-tabs-link-hover-bg", - "$value": "{color.nav.tabs.inverse.link.border.bottom}" + "$value": "{color.nav.tabs.inverse.link.border.bottom}", + "source": "$nav-inverse-tabs-link-hover-bg" }, "active": { - "source": "$nav-inverse-tabs-link-active-bg", - "$value": "{color.nav.tabs.inverse.link.bg.hover}" + "$value": "{color.nav.tabs.inverse.link.bg.hover}", + "source": "$nav-inverse-tabs-link-active-bg" }, "focus": { - "source": "$nav-inverse-tabs-link-focus-bg", - "$value": "{color.nav.tabs.inverse.link.text.base}" + "$value": "{color.nav.tabs.inverse.link.text.base}", + "source": "$nav-inverse-tabs-link-focus-bg" }, "active-hover": { - "source": "$nav-inverse-tabs-link-active-hover-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$nav-inverse-tabs-link-active-hover-bg" } }, "tab-content-color": { - "source": "$nav-inverse-tabs-tab-content-color", - "$value": "{color.nav.tabs.inverse.link.text.base}" + "$value": "{color.nav.tabs.inverse.link.text.base}", + "source": "$nav-inverse-tabs-tab-content-color" } }, "dropdown": { "border": { - "source": "$nav-inverse-tabs-dropdown-border-color", - "$value": "{color.nav.tabs.inverse.link.bg.active-hover}" + "$value": "{color.nav.tabs.inverse.link.bg.active-hover}", + "source": "$nav-inverse-tabs-dropdown-border-color" } } } @@ -101,53 +146,123 @@ "base": { "link": { "active": { - "text": { "source": "$nav-pills-link-active-color", "$value": "{color.active}" }, - "bg": { "source": "$nav-pills-link-active-bg", "$value": "{color.bg.active}" }, - "border": { "source": "$nav-pills-link-active-border-color", "$value": "{color.white}" } + "text": { + "$value": "{color.active}", + "source": "$nav-pills-link-active-color" + }, + "bg": { + "$value": "{color.bg.active}", + "source": "$nav-pills-link-active-bg" + }, + "border": { + "$value": "{color.white}", + "source": "$nav-pills-link-active-border-color" + } }, - "border": { "source": "$nav-pills-link-border-color", "$value": "{color.nav.tabs.base.border.base}" } + "border": { + "$value": "{color.nav.tabs.base.border.base}", + "source": "$nav-pills-link-border-color" + } } }, "inverse": { "link": { "text": { - "base": { "source": "$nav-inverse-pills-link-color", "$value": "{color.white}" }, - "focus": { "source": "$nav-inverse-pills-link-focus-color", "$value": "{color.nav.pills.inverse.link.text.base}" }, - "active": { "source": "$nav-inverse-pills-link-active-color", "$value": "{color.primary.500}" }, - "hover": { "source": "$nav-inverse-pills-link-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" }, - "active-focus": { "source": "$nav-inverse-pills-link-active-focus-color", "$value": "{color.nav.pills.inverse.link.text.active}" }, - "active-hover": { "source": "$nav-inverse-pills-link-active-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" } + "base": { + "$value": "{color.white}", + "source": "$nav-inverse-pills-link-color" + }, + "focus": { + "$value": "{color.nav.pills.inverse.link.text.base}", + "source": "$nav-inverse-pills-link-focus-color" + }, + "active": { + "$value": "{color.primary.500}", + "source": "$nav-inverse-pills-link-active-color" + }, + "hover": { + "$value": "{color.nav.pills.inverse.link.text.base}", + "source": "$nav-inverse-pills-link-hover-color" + }, + "active-focus": { + "$value": "{color.nav.pills.inverse.link.text.active}", + "source": "$nav-inverse-pills-link-active-focus-color" + }, + "active-hover": { + "$value": "{color.nav.pills.inverse.link.text.base}", + "source": "$nav-inverse-pills-link-active-hover-color" + } }, "border": { - "base": { "source": "$nav-inverse-pills-link-border-color", "$value": "{color.dark.300}" }, - "active": { "source": "$nav-inverse-pills-link-active-border-color", "$value": "{color.nav.pills.inverse.link.text.base}" }, - "active-hover": { "source": "$nav-inverse-pills-link-active-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.base}" }, - "active-focus": { "source": "$nav-inverse-pills-link-active-focus-border-color", "$value": "{color.primary.base}" }, - "focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.active-focus}" } + "base": { + "$value": "{color.dark.300}", + "source": "$nav-inverse-pills-link-border-color" + }, + "active": { + "$value": "{color.nav.pills.inverse.link.text.base}", + "source": "$nav-inverse-pills-link-active-border-color" + }, + "active-hover": { + "$value": "{color.nav.pills.inverse.link.border.base}", + "source": "$nav-inverse-pills-link-active-hover-border-color" + }, + "active-focus": { + "$value": "{color.primary.base}", + "source": "$nav-inverse-pills-link-active-focus-border-color" + }, + "focus-hover": { + "$value": "{color.nav.pills.inverse.link.border.active-focus}", + "source": "$nav-inverse-pills-link-active-focus-hover-border-color" + } }, "bg": { - "hover": { "source": "$nav-inverse-pills-link-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" }, - "active": { "source": "$nav-inverse-pills-link-active-bg", "$value": "{color.nav.pills.inverse.link.text.base}" }, - "active-hover": { "source": "$nav-inverse-pills-link-active-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" }, - "active-focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-bg", "$value": "{color.nav.pills.inverse.link.text.base}" } + "hover": { + "$value": "{color.nav.pills.inverse.link.border.base}", + "source": "$nav-inverse-pills-link-hover-bg" + }, + "active": { + "$value": "{color.nav.pills.inverse.link.text.base}", + "source": "$nav-inverse-pills-link-active-bg" + }, + "active-hover": { + "$value": "{color.nav.pills.inverse.link.border.base}", + "source": "$nav-inverse-pills-link-active-hover-bg" + }, + "active-focus-hover": { + "$value": "{color.nav.pills.inverse.link.text.base}", + "source": "$nav-inverse-pills-link-active-focus-hover-bg" + } } }, "tab-content-color": { - "source": "$nav-inverse-pills-tab-content-color", - "$value": "{color.nav.pills.inverse.link.text.base}" + "$value": "{color.nav.pills.inverse.link.text.base}", + "source": "$nav-inverse-pills-tab-content-color" } } }, - "divider": { "source": "$nav-divider-color", "$value": "{color.gray.100}" }, + "divider": { + "$value": "{color.gray.100}", + "source": "$nav-divider-color" + }, "dark": { - "source": "$navbar-dark-color", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "$value": "{color.white}" + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$navbar-dark-color" }, "light": { - "source": "$navbar-light-color", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$navbar-light-color" } } } diff --git a/tokens/src/themes/light/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json index 5b157599c3..db4eae3396 100644 --- a/tokens/src/themes/light/components/Navbar.json +++ b/tokens/src/themes/light/components/Navbar.json @@ -4,64 +4,124 @@ "navbar": { "dark": { "text": { - "source": "$navbar-dark-color", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "$value": "{color.white}" + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$navbar-dark-color" }, "hover": { - "source": "$navbar-dark-hover-color", - "modify": [{ "type": "alpha", "amount": 0.75 }], - "$value": "{color.white}" + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.75 + } + ], + "source": "$navbar-dark-hover-color" + }, + "active": { + "$value": "{color.active}", + "source": "$navbar-dark-active-color" }, - "active": { "source": "$navbar-dark-active-color", "$value": "{color.active}" }, "disabled": { - "source": "$navbar-dark-disabled-color", - "modify": [{ "type": "alpha", "amount": 0.25 }], - "$value": "{color.white}" + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.25 + } + ], + "source": "$navbar-dark-disabled-color" }, "toggler": { "border": { - "source": "$navbar-dark-toggler-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }], - "$value": "{color.white}" + "$value": "{color.white}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$navbar-dark-toggler-border-color" } }, "brand": { - "text": { "source": "$navbar-dark-brand-color", "$value": "{color.navbar.dark.active}" }, - "hover": { "source": "$navbar-dark-brand-hover-color", "$value": "{color.navbar.dark.active}" } + "text": { + "$value": "{color.navbar.dark.active}", + "source": "$navbar-dark-brand-color" + }, + "hover": { + "$value": "{color.navbar.dark.active}", + "source": "$navbar-dark-brand-hover-color" + } } }, "light": { "text": { - "source": "$navbar-light-color", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$navbar-light-color" }, "hover": { - "source": "$navbar-light-hover-color", - "modify": [{ "type": "alpha", "amount": 0.7 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.7 + } + ], + "source": "$navbar-light-hover-color" }, "active": { - "source": "$navbar-light-active-color", - "modify": [{ "type": "alpha", "amount": 0.9 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.9 + } + ], + "source": "$navbar-light-active-color" }, "disabled": { - "source": "$navbar-light-disabled-color", - "modify": [{ "type": "alpha", "amount": 0.3 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$navbar-light-disabled-color" }, "toggler": { "border": { - "source": "$navbar-light-toggler-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$navbar-light-toggler-border-color" } }, "brand": { - "text": { "source": "$navbar-light-brand-color", "$value": "{color.navbar.light.active}" }, - "hover": { "source": "$navbar-light-brand-hover-color", "$value": "{color.navbar.light.active}" } + "text": { + "$value": "{color.navbar.light.active}", + "source": "$navbar-light-brand-color" + }, + "hover": { + "$value": "{color.navbar.light.active}", + "source": "$navbar-light-brand-hover-color" + } } } } @@ -72,18 +132,30 @@ "toggler": { "dark": { "icon-bg": { - "source": "$navbar-dark-toggler-icon-bg", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$navbar-dark-toggler-icon-bg" } }, "light": { "icon-bg": { - "source": "$navbar-light-toggler-icon-bg", + "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")", "outputReferences": false, - "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }], - "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")" + "modify": [ + { + "type": "str-replace", + "toReplace": "#", + "replaceWith": "%23" + } + ], + "source": "$navbar-light-toggler-icon-bg" } } } diff --git a/tokens/src/themes/light/components/OverflowScroll.json b/tokens/src/themes/light/components/OverflowScroll.json index d02b743145..9be47e9dfc 100644 --- a/tokens/src/themes/light/components/OverflowScroll.json +++ b/tokens/src/themes/light/components/OverflowScroll.json @@ -3,8 +3,8 @@ "$type": "color", "overflow-scroll": { "opacity-mask-transparent": { - "source": "$overflow-scroll-opacity-mask-transparent", - "$value": "rgba(0, 0, 0, .4)" + "$value": "rgba(0, 0, 0, .4)", + "source": "$overflow-scroll-opacity-mask-transparent" } } } diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json index d879de7302..73078a05df 100644 --- a/tokens/src/themes/light/components/Pagination.json +++ b/tokens/src/themes/light/components/Pagination.json @@ -3,30 +3,78 @@ "$type": "color", "pagination": { "text": { - "base": { "source": "$pagination-color", "$value": "{color.link.base}" }, - "inverse": { "source": "$pagination-color-inverse", "$value": "{color.white}" }, - "hover": { "source": "$pagination-hover-color", "$value": "{color.link.hover}" }, - "active": { "source": "$pagination-active-color", "$value": "{color.active}" }, - "disabled": { "source": "$pagination-disabled-color", "$value": "{color.disabled}" } + "base": { + "$value": "{color.link.base}", + "source": "$pagination-color" + }, + "inverse": { + "$value": "{color.white}", + "source": "$pagination-color-inverse" + }, + "hover": { + "$value": "{color.link.hover}", + "source": "$pagination-hover-color" + }, + "active": { + "$value": "{color.active}", + "source": "$pagination-active-color" + }, + "disabled": { + "$value": "{color.disabled}", + "source": "$pagination-disabled-color" + } }, "bg": { - "base": { "source": "$pagination-bg", "$value": "{color.bg.base}" }, - "hover": { "source": "$pagination-hover-bg", "$value": "{color.gray.100}" }, - "active": { "source": "$pagination-active-bg", "$value": "{color.bg.active}" }, - "disabled": { "source": "$pagination-disabled-bg", "$value": "{color.white}" } + "base": { + "$value": "{color.bg.base}", + "source": "$pagination-bg" + }, + "hover": { + "$value": "{color.gray.100}", + "source": "$pagination-hover-bg" + }, + "active": { + "$value": "{color.bg.active}", + "source": "$pagination-active-bg" + }, + "disabled": { + "$value": "{color.white}", + "source": "$pagination-disabled-bg" + } }, "border": { - "base": { "source": "$pagination-border-color", "$value": "{color.gray.200}" }, - "hover": { "source": "$pagination-hover-border-color", "$value": "{color.gray.200}" }, - "active": { "source": "$pagination-active-border-color", "$value": "{color.pagination.bg.active}" }, - "disabled": { "source": "$pagination-disabled-border-color", "$value": "{color.gray.100}" } + "base": { + "$value": "{color.gray.200}", + "source": "$pagination-border-color" + }, + "hover": { + "$value": "{color.gray.200}", + "source": "$pagination-hover-border-color" + }, + "active": { + "$value": "{color.pagination.bg.active}", + "source": "$pagination-active-border-color" + }, + "disabled": { + "$value": "{color.gray.100}", + "source": "$pagination-disabled-border-color" + } }, "focus": { - "base": { "source": "$pagination-focus-color", "$value": "{color.primary.500}" }, - "text": { "source": "$pagination-focus-color-text", "$value": "{color.black}" } + "base": { + "$value": "{color.primary.500}", + "source": "$pagination-focus-color" + }, + "text": { + "$value": "{color.black}", + "source": "$pagination-focus-color-text" + } }, "dropdown": { - "text-inverse": { "source": "$pagination-dropdown-color-inverse", "$value": "{color.white}" } + "text-inverse": { + "$value": "{color.white}", + "source": "$pagination-dropdown-color-inverse" + } } } }, @@ -34,7 +82,10 @@ "$type": "shadow", "pagination": { "focus": { - "box-shadow": { "source": "$pagination-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" } + "box-shadow": { + "$value": "{elevation.input.btn-focus.box-shadow}", + "source": "$pagination-focus-box-shadow" + } } } } diff --git a/tokens/src/themes/light/components/Popover.json b/tokens/src/themes/light/components/Popover.json index 0741490cfc..1f78370403 100644 --- a/tokens/src/themes/light/components/Popover.json +++ b/tokens/src/themes/light/components/Popover.json @@ -2,49 +2,103 @@ "color": { "$type": "color", "popover": { - "bg": { "source": "$popover-bg", "$value": "{color.bg.base}" }, - "border": { "source": "$popover-border-color", "$value": "rgba(0, 0, 0, .2)" }, + "bg": { + "$value": "{color.bg.base}", + "source": "$popover-bg" + }, + "border": { + "$value": "rgba(0, 0, 0, .2)", + "source": "$popover-border-color" + }, "header": { - "text": { "source": "$popover-header-color", "$value": "{color.headings.base}" }, - "bg": { "source": "$popover-header-bg", "$value": "{color.white}" }, + "text": { + "$value": "{color.headings.base}", + "source": "$popover-header-color" + }, + "bg": { + "$value": "{color.white}", + "source": "$popover-header-bg" + }, "bg-dark": { - "source": "$popover-header-bg-dark", - "modify": [{ "type": "darken", "amount": 0.5 }], - "$value": "{color.white}" + "$value": "{color.white}", + "modify": [ + { + "type": "darken", + "amount": 0.5 + } + ], + "source": "$popover-header-bg-dark" }, "border-bottom-dark": { - "source": "$popover-header-border-bottom-darken", - "modify": [{ "type": "darken", "amount": 0.05 }], - "$value": "{color.white}" + "$value": "{color.white}", + "modify": [ + { + "type": "darken", + "amount": 0.05 + } + ], + "source": "$popover-header-border-bottom-darken" } }, - "body": { "source": "$popover-body-color", "$value": "{color.body.base}" }, + "body": { + "$value": "{color.body.base}", + "source": "$popover-body-color" + }, "arrow": { - "base": { "source": "$popover-arrow-color", "$value": "{color.popover.bg}" }, + "base": { + "$value": "{color.popover.bg}", + "source": "$popover-arrow-color" + }, "outer": { - "source": "$popover-arrow-outer-color", - "modify": [{ "type": "alpha", "amount": 0.05 }], - "$value": "{color.popover.border}" + "$value": "{color.popover.border}", + "modify": [ + { + "type": "alpha", + "amount": 0.05 + } + ], + "source": "$popover-arrow-outer-color" } }, "success": { - "bg": { "source": "$popover-success-bg", "$value": "{color.success.100}" }, - "icon": { "source": "$popover-success-icon-color", "$value": "{color.success.500}" } + "bg": { + "$value": "{color.success.100}", + "source": "$popover-success-bg" + }, + "icon": { + "$value": "{color.success.500}", + "source": "$popover-success-icon-color" + } }, "warning": { - "bg": { "source": "$popover-warning-bg", "$value": "{color.warning.100}" }, - "icon": { "source": "$popover-warning-icon-color", "$value": "{color.warning.500}" } + "bg": { + "$value": "{color.warning.100}", + "source": "$popover-warning-bg" + }, + "icon": { + "$value": "{color.warning.500}", + "source": "$popover-warning-icon-color" + } }, "danger": { - "bg": { "source": "$popover-danger-bg", "$value": "{color.danger.100}" }, - "icon": { "source": "$popover-danger-icon-color", "$value": "{color.danger.500}" } + "bg": { + "$value": "{color.danger.100}", + "source": "$popover-danger-bg" + }, + "icon": { + "$value": "{color.danger.500}", + "source": "$popover-danger-icon-color" + } } } }, "elevation": { "$type": "shadow", "popover": { - "box-shadow": { "source": "$popover-box-shadow", "$value": "none" } + "box-shadow": { + "$value": "none", + "source": "$popover-box-shadow" + } } } } diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json index 61b561110b..8ed3283277 100644 --- a/tokens/src/themes/light/components/ProductTour.json +++ b/tokens/src/themes/light/components/ProductTour.json @@ -3,19 +3,42 @@ "$type": "color", "product-tour": { "checkpoint": { - "bg": { "source": "$checkpoint-background-color", "$value": "{color.light.300}" }, - "body": { "source": "$checkpoint-body-color", "$value": "{color.gray.700}" }, - "border": { "source": "$checkpoint-border-color", "$value": "{color.brand.base}" }, - "breadcrumb": { "source": "$checkpoint-breadcrumb-color", "$value": "{color.primary.base}" }, + "bg": { + "$value": "{color.light.300}", + "source": "$checkpoint-background-color" + }, + "body": { + "$value": "{color.gray.700}", + "source": "$checkpoint-body-color" + }, + "border": { + "$value": "{color.brand.base}", + "source": "$checkpoint-border-color" + }, + "breadcrumb": { + "$value": "{color.primary.base}", + "source": "$checkpoint-breadcrumb-color" + }, "box-shadow": { - "source": "$checkpoint-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.3 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$checkpoint-box-shadow-color" }, "arrow": { "border": { - "top": { "source": "$checkpoint-arrow-border-top-color", "$value": "{color.product-tour.checkpoint.bg}" }, - "transparent": { "source": "$checkpoint-arrow-border-color-transparent", "$value": "transparent" } + "top": { + "$value": "{color.product-tour.checkpoint.bg}", + "source": "$checkpoint-arrow-border-top-color" + }, + "transparent": { + "$value": "transparent", + "source": "$checkpoint-arrow-border-color-transparent" + } } } } diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json index 81e1f9c36c..7340593fbf 100644 --- a/tokens/src/themes/light/components/ProgressBar.json +++ b/tokens/src/themes/light/components/ProgressBar.json @@ -2,21 +2,39 @@ "color": { "$type": "color", "progress-bar": { - "base": { "source": "$progress-bar-color", "$value": "{color.white}" }, + "base": { + "$value": "{color.white}", + "source": "$progress-bar-color" + }, "bg": { - "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" }, - "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" } + "base": { + "$value": "{color.accent.a}", + "source": "$progress-bar-bg" + }, + "annotated": { + "$value": "{color.dark.500}", + "source": "$annotated-progress-bar-bg" + } }, - "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" } + "border": { + "$value": "{color.gray.500}", + "source": "$progress-bar-border-color" + } }, "progress": { - "bg": { "source": "$progress-bg", "$value": "transparent" } + "bg": { + "$value": "transparent", + "source": "$progress-bg" + } } }, "elevation": { "$type": "shadow", "progress-bar": { - "box-shadow": { "source": "$progress-box-shadow", "$value": "none" } + "box-shadow": { + "$value": "none", + "source": "$progress-box-shadow" + } } } } diff --git a/tokens/src/themes/light/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json index 87da8f709c..b592ebe764 100644 --- a/tokens/src/themes/light/components/Scrollable.json +++ b/tokens/src/themes/light/components/Scrollable.json @@ -4,9 +4,14 @@ "scrollable": { "body": { "box-shadow": { - "source": "$scrollable-body-box-shadow", - "modify": [{ "type": "alpha", "amount": 0.55 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.55 + } + ], + "source": "$scrollable-body-box-shadow" } } } diff --git a/tokens/src/themes/light/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json index 16f2fd39d3..2853385c13 100644 --- a/tokens/src/themes/light/components/SearchField.json +++ b/tokens/src/themes/light/components/SearchField.json @@ -3,23 +3,44 @@ "$type": "color", "search-field": { "border": { - "base": { "source": "$search-border-color", "$value": "{color.gray.500}" }, - "interaction": { "source": "$search-border-color-interaction", "$value": "{color.black}" }, - "focus": { "source": "$search-border-focus-color", "$value": "{color.black}" } + "base": { + "$value": "{color.gray.500}", + "source": "$search-border-color" + }, + "interaction": { + "$value": "{color.black}", + "source": "$search-border-color-interaction" + }, + "focus": { + "$value": "{color.black}", + "source": "$search-border-focus-color" + } }, "button": { "bg": { - "primary": { "source": "$search-btn-primary-bg", "$value": "{color.primary.500}" }, - "brand": { "source": "$search-btn-brand-bg", "$value": "{color.brand.500}" } + "primary": { + "$value": "{color.primary.500}", + "source": "$search-btn-primary-bg" + }, + "brand": { + "$value": "{color.brand.500}", + "source": "$search-btn-brand-bg" + } } }, - "form-bg": { "source": "$search-form-background-color", "$value": "{color.white}" } + "form-bg": { + "$value": "{color.white}", + "source": "$search-form-background-color" + } } }, "other": { "$type": "number", "search-field": { - "disabled-opacity": { "source": "$search-disabled-opacity", "$value": ".3" } + "disabled-opacity": { + "$value": ".3", + "source": "$search-disabled-opacity" + } } } } diff --git a/tokens/src/themes/light/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json index 9084a8eb52..ddac166dbe 100644 --- a/tokens/src/themes/light/components/Sheet.json +++ b/tokens/src/themes/light/components/Sheet.json @@ -4,15 +4,25 @@ "sheet": { "skrim": { "bg": { - "source": "$sheet-skrim-bg", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "$value": "{color.gray.300}" + "$value": "{color.gray.300}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$sheet-skrim-bg" }, "component": { "box-shadow": { - "source": "$sheet-skrim-component-box-shadow", - "modify": [{ "type": "alpha", "amount": 0.15 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.15 + } + ], + "source": "$sheet-skrim-component-box-shadow" } } } diff --git a/tokens/src/themes/light/components/Stepper.json b/tokens/src/themes/light/components/Stepper.json index eeb118dec2..08a4be2539 100644 --- a/tokens/src/themes/light/components/Stepper.json +++ b/tokens/src/themes/light/components/Stepper.json @@ -4,23 +4,41 @@ "stepper": { "header": { "bg": { - "base": { "source": "$stepper-header-bg", "$value": "transparent" }, - "line": { "source": "$stepper-header-line-bg", "$value": "{color.light.base}" } + "base": { + "$value": "transparent", + "source": "$stepper-header-bg" + }, + "line": { + "$value": "{color.light.base}", + "source": "$stepper-header-line-bg" + } }, "step": { - "base": { "source": "$stepper-header-step-color", "$value": "{color.primary.base}" }, + "base": { + "$value": "{color.primary.base}", + "source": "$stepper-header-step-color" + }, "bg": { - "base": { "source": "$stepper-header-step-bg", "$value": "{color.stepper.header.bg.base}" }, - "active": { "source": "$stepper-header-active-step-bg", "$value": "{color.gray.500}" } + "base": { + "$value": "{color.stepper.header.bg.base}", + "source": "$stepper-header-step-bg" + }, + "active": { + "$value": "{color.gray.500}", + "source": "$stepper-header-active-step-bg" + } + }, + "border": { + "$value": "none", + "source": "$stepper-header-step-border" }, - "border": { "source": "$stepper-header-step-border", "$value": "none" }, "bubble-error": { - "source": "$stepper-header-step-error-bubble-color", - "$value": "{color.danger.base}" + "$value": "{color.danger.base}", + "source": "$stepper-header-step-error-bubble-color" }, "description-error": { - "source": "$stepper-header-step-error-description-color", - "$value": "{color.stepper.header.step.bubble-error}" + "$value": "{color.stepper.header.step.bubble-error}", + "source": "$stepper-header-step-error-description-color" } } } diff --git a/tokens/src/themes/light/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json index 6fe18059fe..7aef2f37cb 100644 --- a/tokens/src/themes/light/components/Sticky.json +++ b/tokens/src/themes/light/components/Sticky.json @@ -4,7 +4,6 @@ "sticky": { "shadow": { "top": { - "source": "$sticky-shadow-top", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -18,10 +17,10 @@ "offsetY": "-.25rem", "blur": ".625rem" } - ] + ], + "source": "$sticky-shadow-top" }, "bottom": { - "source": "$sticky-shadow-bottom", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -35,7 +34,8 @@ "offsetY": ".25rem", "blur": ".625rem" } - ] + ], + "source": "$sticky-shadow-bottom" } } } diff --git a/tokens/src/themes/light/components/Tab.json b/tokens/src/themes/light/components/Tab.json index 5e7c601ff2..d76ef9c616 100644 --- a/tokens/src/themes/light/components/Tab.json +++ b/tokens/src/themes/light/components/Tab.json @@ -6,77 +6,77 @@ "btn": { "text": { "focus": { - "source": "$tab-more-link-dropdown-toggle-btn-focus-color", - "$value": "{color.tab.more-link-dropdown-toggle.text.focus}" + "$value": "{color.tab.more-link-dropdown-toggle.text.focus}", + "source": "$tab-more-link-dropdown-toggle-btn-focus-color" } }, "border": { "focus": { - "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color", - "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}" + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}", + "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color" } } }, "text": { "focus": { - "source": "$tab-more-link-dropdown-toggle-focus-color", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$tab-more-link-dropdown-toggle-focus-color" }, "active": { - "source": "$tab-more-link-dropdown-toggle-active-color", - "$value": "{color.tab.more-link-dropdown-toggle.text.focus}" + "$value": "{color.tab.more-link-dropdown-toggle.text.focus}", + "source": "$tab-more-link-dropdown-toggle-active-color" }, "hover": { - "source": "$tab-more-link-dropdown-toggle-hover-color", - "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}" + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}", + "source": "$tab-more-link-dropdown-toggle-hover-color" } }, "bg": { "focus": { - "source": "$tab-more-link-dropdown-toggle-focus-bg", - "$value": "{color.primary.500}" + "$value": "{color.primary.500}", + "source": "$tab-more-link-dropdown-toggle-focus-bg" } }, "border": { "focus": { - "source": "$tab-more-link-dropdown-toggle-focus-border-color", - "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}" + "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}", + "source": "$tab-more-link-dropdown-toggle-focus-border-color" } } }, "inverse-pills-link-dropdown-toggle": { "text": { "focus": { - "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color", - "$value": "{color.primary.500}" + "$value": "{color.primary.500}", + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color" }, "active": { - "source": "$tab-inverse-pills-link-dropdown-toggle-active-color", - "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}" + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}", + "source": "$tab-inverse-pills-link-dropdown-toggle-active-color" }, "active-hover": { - "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color", - "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}" + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", + "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color" } }, "bg": { "focus": { - "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg", - "$value": "{color.white}" + "$value": "{color.white}", + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg" }, "hover": { - "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg", - "$value": "transparent" + "$value": "transparent", + "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg" }, "active-hover": { - "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg", - "$value": "{color.primary.300}" + "$value": "{color.primary.300}", + "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg" } }, "border": { "focus": { - "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color", - "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}" + "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}", + "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color" } } } diff --git a/tokens/src/themes/light/components/Toast.json b/tokens/src/themes/light/components/Toast.json index 57f9d6d4d6..ff2f3dd376 100644 --- a/tokens/src/themes/light/components/Toast.json +++ b/tokens/src/themes/light/components/Toast.json @@ -2,20 +2,42 @@ "color": { "$type": "color", "toast": { - "base": { "source": "$toast-color", "$value": "inherit" }, - "bg": { "source": "$toast-background-color", "$value": "{color.gray.700}" }, + "base": { + "$value": "inherit", + "source": "$toast-color" + }, + "bg": { + "$value": "{color.gray.700}", + "source": "$toast-background-color" + }, "border": { - "source": "$toast-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$toast-border-color" }, "header": { - "text": { "source": "$toast-header-color", "$value": "{color.white}" }, - "bg": { "source": "$toast-header-background-color", "$value": "{color.gray.700}" }, + "text": { + "$value": "{color.white}", + "source": "$toast-header-color" + }, + "bg": { + "$value": "{color.gray.700}", + "source": "$toast-header-background-color" + }, "border": { - "source": "$toast-header-border-color", - "modify": [{ "type": "alpha", "amount": 0.5 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.5 + } + ], + "source": "$toast-header-border-color" } } } @@ -24,7 +46,6 @@ "$type": "shadow", "toast": { "box-shadow": { - "source": "$toast-box-shadow", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -38,7 +59,8 @@ "offsetY": ".5rem", "blur": "3rem" } - ] + ], + "source": "$toast-box-shadow" } } } diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json index 81062e6ec8..f7826a63d8 100644 --- a/tokens/src/themes/light/components/Tooltip.json +++ b/tokens/src/themes/light/components/Tooltip.json @@ -2,15 +2,33 @@ "color": { "$type": "color", "tooltip": { - "text": { "source": "$tooltip-color", "$value": "{color.white}" }, - "light": { "source": "$tooltip-color-light", "$value": "{color.black}" }, + "text": { + "$value": "{color.white}", + "source": "$tooltip-color" + }, + "light": { + "$value": "{color.black}", + "source": "$tooltip-color-light" + }, "bg": { - "base": { "source": "$tooltip-bg", "$value": "{color.black}" }, - "light": { "source": "$tooltip-bg-light", "$value": "{color.white}" } + "base": { + "$value": "{color.black}", + "source": "$tooltip-bg" + }, + "light": { + "$value": "{color.white}", + "source": "$tooltip-bg-light" + } }, "arrow": { - "base": { "source": "$tooltip-arrow-color", "$value": "{color.tooltip.bg.base}" }, - "light": { "source": "$tooltip-arrow-color-light", "$value": "{color.white}" } + "base": { + "$value": "{color.tooltip.bg.base}", + "source": "$tooltip-arrow-color" + }, + "light": { + "$value": "{color.white}", + "source": "$tooltip-arrow-color-light" + } } } }, @@ -18,7 +36,6 @@ "$type": "shadow", "tooltip": { "box-shadow": { - "source": "$tooltip-box-shadow", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -32,14 +49,18 @@ "offsetY": "2px", "blur": "8px" } - ] + ], + "source": "$tooltip-box-shadow" } } }, "other": { "$type": "number", "tooltip": { - "opacity": { "source": "$tooltip-opacity", "$value": "1" } + "opacity": { + "$value": "1", + "source": "$tooltip-opacity" + } } } } diff --git a/tokens/src/themes/light/components/general/body.json b/tokens/src/themes/light/components/general/body.json index f894be2efe..c0c6c86776 100644 --- a/tokens/src/themes/light/components/general/body.json +++ b/tokens/src/themes/light/components/general/body.json @@ -2,8 +2,14 @@ "color": { "$type": "color", "body": { - "base": { "source": "$body-color", "$value": "{color.gray.700}" }, - "bg": { "source": "$body-bg", "$value": "{color.bg.base}" } + "base": { + "$value": "{color.gray.700}", + "source": "$body-color" + }, + "bg": { + "$value": "{color.bg.base}", + "source": "$body-bg" + } } } } diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json index 755ccf7fd9..28d52f4496 100644 --- a/tokens/src/themes/light/components/general/headings.json +++ b/tokens/src/themes/light/components/general/headings.json @@ -2,7 +2,10 @@ "color": { "$type": "color", "headings": { - "base": { "source": "$headings-color", "$value": "{color.black}" } + "base": { + "$value": "{color.black}", + "source": "$headings-color" + } } } } diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json index 2d5ad16dbf..8ef2e5c9b9 100644 --- a/tokens/src/themes/light/components/general/hr.json +++ b/tokens/src/themes/light/components/general/hr.json @@ -3,9 +3,14 @@ "$type": "color", "hr": { "border": { - "source": "$hr-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.1 + } + ], + "source": "$hr-border-color" } } } diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json index 424b099dbb..e3d60d85f5 100644 --- a/tokens/src/themes/light/components/general/input.json +++ b/tokens/src/themes/light/components/general/input.json @@ -2,7 +2,10 @@ "color": { "$type": "color", "input": { - "btn-focus": { "source": "$input-btn-focus-color", "$value": "{color.bg.active}" } + "btn-focus": { + "$value": "{color.bg.active}", + "source": "$input-btn-focus-color" + } } }, "elevation": { @@ -10,14 +13,14 @@ "input": { "btn-focus": { "box-shadow": { - "source": "$input-btn-focus-box-shadow", "$value": { "color": "{color.input.btn-focus}", "spread": "{size.input.btn.focus-width}", "offsetX": "0", "offsetY": "0", "blur": "0" - } + }, + "source": "$input-btn-focus-box-shadow" } } } diff --git a/tokens/src/themes/light/components/general/link.json b/tokens/src/themes/light/components/general/link.json index 3669afa336..d80162cd55 100644 --- a/tokens/src/themes/light/components/general/link.json +++ b/tokens/src/themes/light/components/general/link.json @@ -2,84 +2,162 @@ "color": { "$type": "color", "link": { - "base": { "source": "$link-color", "$value": "{color.info.500}" }, + "base": { + "$value": "{color.info.500}", + "source": "$link-color" + }, "hover": { - "source": "$link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }], - "$value": "{color.link.base}" + "$value": "{color.link.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$link-hover-color" }, "inline": { - "base": { "source": "$inline-link-color", "$value": "{color.info.500}" }, + "base": { + "$value": "{color.info.500}", + "source": "$inline-link-color" + }, "decoration": { - "source": "$inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }], - "$value": "{color.link.inline.base}" + "$value": "{color.link.inline.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$inline-link-decoration-color" }, "hover": { "base": { - "source": "$inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }], - "$value": "{color.link.inline.base}" + "$value": "{color.link.inline.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$inline-link-hover-color" }, "decoration": { - "source": "$inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }], - "$value": "{color.link.inline.hover.base}" + "$value": "{color.link.inline.hover.base}", + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "source": "$inline-link-hover-decoration-color" } } }, "muted": { - "base": { "source": "$muted-link-color", "$value": "{color.primary.500}" }, + "base": { + "$value": "{color.primary.500}", + "source": "$muted-link-color" + }, "hover": { - "source": "$muted-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }], - "$value": "{color.link.muted.base}" + "$value": "{color.link.muted.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$muted-link-hover-color" }, "inline": { - "base": { "source": "$muted-inline-link-color", "$value": "{color.primary.500}" }, + "base": { + "$value": "{color.primary.500}", + "source": "$muted-inline-link-color" + }, "decoration": { - "source": "$muted-inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }], - "$value": "{color.link.muted.inline.base}" + "$value": "{color.link.muted.inline.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$muted-inline-link-decoration-color" }, "hover": { "base": { - "source": "$muted-inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }], - "$value": "{color.link.muted.inline.base}" + "$value": "{color.link.muted.inline.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$muted-inline-link-hover-color" }, "decoration": { - "source": "$muted-inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }], - "$value": "{color.link.muted.inline.hover.base}" + "$value": "{color.link.muted.inline.hover.base}", + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "source": "$muted-inline-link-hover-decoration-color" } } } }, "brand": { - "base": { "source": "$brand-link-color", "$value": "{color.brand.500}" }, + "base": { + "$value": "{color.brand.500}", + "source": "$brand-link-color" + }, "hover": { - "source": "$brand-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }], - "$value": "{color.link.brand.base}" + "$value": "{color.link.brand.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$brand-link-hover-color" }, "inline": { - "base": { "source": "$brand-inline-link-color", "$value": "{color.brand.500}" }, + "base": { + "$value": "{color.brand.500}", + "source": "$brand-inline-link-color" + }, "decoration": { - "source": "$brand-inline-link-decoration-color", - "modify": [{ "type": "alpha", "amount": 0.3 }], - "$value": "{color.link.brand.inline.base}" + "$value": "{color.link.brand.inline.base}", + "modify": [ + { + "type": "alpha", + "amount": 0.3 + } + ], + "source": "$brand-inline-link-decoration-color" }, "hover": { "base": { - "source": "$brand-inline-link-hover-color", - "modify": [{ "type": "darken", "amount": 0.15 }], - "$value": "{color.link.brand.inline.base}" + "$value": "{color.link.brand.inline.base}", + "modify": [ + { + "type": "darken", + "amount": 0.15 + } + ], + "source": "$brand-inline-link-hover-color" }, "decoration": { - "source": "$brand-inline-link-hover-decoration-color", - "modify": [{ "type": "alpha", "amount": 1 }], - "$value": "{color.link.brand.inline.hover.base}" + "$value": "{color.link.brand.inline.hover.base}", + "modify": [ + { + "type": "alpha", + "amount": 1 + } + ], + "source": "$brand-inline-link-hover-decoration-color" } } } @@ -91,8 +169,8 @@ "link": { "emphasized-hover": { "darken-percentage": { - "source": "$emphasized-link-hover-darken-percentage", - "$value": "15%" + "$value": "15%", + "source": "$emphasized-link-hover-darken-percentage" } } } diff --git a/tokens/src/themes/light/components/general/list.json b/tokens/src/themes/light/components/general/list.json index 85059c7369..5cdd00bc67 100644 --- a/tokens/src/themes/light/components/general/list.json +++ b/tokens/src/themes/light/components/general/list.json @@ -2,31 +2,72 @@ "color": { "$type": "color", "list-group": { - "base": { "source": "$list-group-color", "$value": "inherit" }, + "base": { + "$value": "inherit", + "source": "$list-group-color" + }, "bg": { - "base": { "source": "$list-group-bg", "$value": "{color.white}" }, - "hover": { "source": "$list-group-hover-bg", "$value": "{color.gray.100}" } + "base": { + "$value": "{color.white}", + "source": "$list-group-bg" + }, + "hover": { + "$value": "{color.gray.100}", + "source": "$list-group-hover-bg" + } }, "border": { - "source": "$list-group-border-color", - "modify": [{ "type": "alpha", "amount": 0.125 }], - "$value": "{color.black}" + "$value": "{color.black}", + "modify": [ + { + "type": "alpha", + "amount": 0.125 + } + ], + "source": "$list-group-border-color" }, "active": { - "base": { "source": "$list-group-active-color", "$value": "{color.active}" }, - "border": { "source": "$list-group-active-border-color", "$value": "{color.list-group.active.bg}" }, - "bg": { "source": "$list-group-active-bg", "$value": "{color.bg.active}" } + "base": { + "$value": "{color.active}", + "source": "$list-group-active-color" + }, + "border": { + "$value": "{color.list-group.active.bg}", + "source": "$list-group-active-border-color" + }, + "bg": { + "$value": "{color.bg.active}", + "source": "$list-group-active-bg" + } }, "disabled": { - "base": { "source": "$list-group-disabled-color", "$value": "{color.gray.600}" }, - "bg": { "source": "$list-group-disabled-bg", "$value": "{color.list-group.bg.base}" } + "base": { + "$value": "{color.gray.600}", + "source": "$list-group-disabled-color" + }, + "bg": { + "$value": "{color.list-group.bg.base}", + "source": "$list-group-disabled-bg" + } }, "action": { - "base": { "source": "$list-group-action-color", "$value": "{color.gray.700}" }, - "hover": { "source": "$list-group-action-hover-color", "$value": "{color.list-group.action.base}" }, + "base": { + "$value": "{color.gray.700}", + "source": "$list-group-action-color" + }, + "hover": { + "$value": "{color.list-group.action.base}", + "source": "$list-group-action-hover-color" + }, "active": { - "base": { "source": "$list-group-action-active-color", "$value": "{color.body.base}" }, - "bg": { "source": "$list-group-action-active-bg", "$value": "{color.gray.200}" } + "base": { + "$value": "{color.body.base}", + "source": "$list-group-action-active-color" + }, + "bg": { + "$value": "{color.gray.200}", + "source": "$list-group-action-active-bg" + } } } } diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json index af658a6d6b..6da6e32880 100644 --- a/tokens/src/themes/light/components/general/text.json +++ b/tokens/src/themes/light/components/general/text.json @@ -1,11 +1,23 @@ { "color": { "$type": "color", - "text-muted": { "source": "$text-muted", "$value": "{color.gray.500}" }, - "mark-bg": { "source": "$mark-bg", "$value": "#FFF243" }, + "text-muted": { + "$value": "{color.gray.500}", + "source": "$text-muted" + }, + "mark-bg": { + "$value": "#FFF243", + "source": "$mark-bg" + }, "blockquote": { - "small": { "source": "$blockquote-small-color", "$value": "{color.gray.500}" } + "small": { + "$value": "{color.gray.500}", + "source": "$blockquote-small-color" + } }, - "yiq-light": { "source": "$yiq-text-light", "$value": "{color.white}" } + "yiq-light": { + "$value": "{color.white}", + "source": "$yiq-text-light" + } } } diff --git a/tokens/src/themes/light/global/color.json b/tokens/src/themes/light/global/color.json index 5cc2c0c9b2..9b76a19ef1 100644 --- a/tokens/src/themes/light/global/color.json +++ b/tokens/src/themes/light/global/color.json @@ -2,143 +2,144 @@ "color": { "$type": "color", "white": { - "source": "$white", "$value": "#FFFFFF", - "$description": "White color." + "$description": "White color.", + "source": "$white" }, "black": { - "source": "$black", "$value": "#000000", - "$description": "Black color." + "$description": "Black color.", + "source": "$black" }, "blue": { - "source": "$blue", "$value": "#23419F", - "$description": "Blue color." + "$description": "Blue color.", + "source": "$blue" }, "red": { - "source": "$red", "$value": "#C32D3A", - "$description": "Red color." + "$description": "Red color.", + "source": "$red" }, "green": { - "source": "$green", "$value": "#178253", - "$description": "Green color." + "$description": "Green color.", + "source": "$green" }, "yellow": { - "source": "$yellow", "$value": "#FFD900", - "$description": "Yellow color." + "$description": "Yellow color.", + "source": "$yellow" }, "teal": { - "source": "$teal", "$value": "#006DAA", - "$description": "Teal color." + "$description": "Teal color.", + "source": "$teal" }, "accent": { "a": { + "$value": "#00BBF9", + "$description": "Accent-A color.", "source": "$accent-a", "actions": { "default": "{color.action.default.accent.a}" - }, - "$value": "#00BBF9", - "$description": "Accent-A color." + } }, "b": { + "$value": "#FFEE88", + "$description": "Accent-B color.", "source": "$accent-b", "actions": { "default": "{color.action.default.accent.b}" - }, - "$value": "#FFEE88", - "$description": "Accent-B color." + } } }, "gray": { "100": { + "$value": "#EBEBEB", + "$description": "Gray color of level 100.", "source": "$gray-100", "actions": { "default": "{color.action.default.gray.100}" - }, - "$value": "#EBEBEB", - "$description": "Gray color of level 100." + } }, "200": { + "$value": "#CCCCCC", + "$description": "Gray color of level 200.", "source": "$gray-200", "actions": { "default": "{color.action.default.gray.200}" - }, - "$value": "#CCCCCC", - "$description": "Gray color of level 200." + } }, "300": { + "$value": "#ADADAD", + "$description": "Gray color of level 300.", "source": "$gray-300", "actions": { "default": "{color.action.default.gray.300}" - }, - "$value": "#ADADAD", - "$description": "Gray color of level 300." + } }, "400": { + "$value": "#8F8F8F", + "$description": "Gray color of level 400.", "source": "$gray-400", "actions": { "default": "{color.action.default.gray.400}" - }, - "$value": "#8F8F8F", - "$description": "Gray color of level 400." + } }, "500": { + "$value": "{color.gray.base}", + "$description": "Gray color of level 500.", "source": "$gray-500", "actions": { "default": "{color.action.default.gray.500}" - }, - "$value": "{color.gray.base}", - "$description": "Gray color of level 500." + } }, "600": { + "$value": "#5C5C5C", + "$description": "Gray color of level 600.", "source": "$gray-600", "actions": { "default": "{color.action.default.gray.600}" - }, - "$value": "#5C5C5C", - "$description": "Gray color of level 600." + } }, "700": { + "$value": "#454545", + "$description": "Gray color of level 700.", "source": "$gray-700", "actions": { "default": "{color.action.default.gray.700}" - }, - "$value": "#454545", - "$description": "Gray color of level 700." + } }, "800": { + "$value": "#333333", + "$description": "Gray color of level 800.", "source": "$gray-800", "actions": { "default": "{color.action.default.gray.800}" - }, - "$value": "#333333", - "$description": "Gray color of level 800." + } }, "900": { + "$value": "#212529", + "$description": "Gray color of level 900.", "source": "$gray-900", "actions": { "default": "{color.action.default.gray.900}" - }, - "$value": "#212529", - "$description": "Gray color of level 900." + } }, "base": { + "$value": "#707070", + "$description": "Basic gray color.", "source": "$gray", "actions": { "default": "{color.action.default.gray.base}" - }, - "$value": "#707070", - "$description": "Basic gray color." + } } }, "primary": { "100": { - "source": "$primary-100", + "$value": "{color.primary.base}", + "$description": "Primary color of level 100.", "modify": [ { "type": "mix", @@ -146,14 +147,14 @@ "amount": "0.94" } ], + "source": "$primary-100", "actions": { "default": "{color.action.default.primary.100}" - }, - "$value": "{color.primary.base}", - "$description": "Primary color of level 100." + } }, "200": { - "source": "$primary-200", + "$value": "{color.primary.base}", + "$description": "Primary color of level 200.", "modify": [ { "type": "mix", @@ -161,14 +162,14 @@ "amount": "0.75" } ], + "source": "$primary-200", "actions": { "default": "{color.action.default.primary.200}" - }, - "$value": "{color.primary.base}", - "$description": "Primary color of level 200." + } }, "300": { - "source": "$primary-300", + "$value": "{color.primary.base}", + "$description": "Primary color of level 300.", "modify": [ { "type": "mix", @@ -176,14 +177,14 @@ "amount": "0.50" } ], + "source": "$primary-300", "actions": { "default": "{color.action.default.primary.300}" - }, - "$value": "{color.primary.base}", - "$description": "Primary color of level 300." + } }, "400": { - "source": "$primary-400", + "$value": "{color.primary.base}", + "$description": "Primary color of level 400.", "modify": [ { "type": "mix", @@ -191,95 +192,137 @@ "amount": "0.25" } ], + "source": "$primary-400", "actions": { "default": "{color.action.default.primary.400}" - }, - "$value": "{color.primary.base}", - "$description": "Primary color of level 400." + } }, "500": { + "$value": "{color.primary.base}", + "$description": "Primary color of level 500.", "source": "$primary-500", "actions": { "default": "{color.action.default.primary.500}" - }, - "$value": "{color.primary.base}", - "$description": "Primary color of level 500." + } }, "600": { + "$value": "{color.primary.base}", + "$description": "Primary color of level 600.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.10" + } + ], "source": "$primary-600", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.10" }], "actions": { "default": "{color.action.default.primary.600}" - }, - "$value": "{color.primary.base}", - "$description": "Primary color of level 600." + } }, "700": { + "$value": "{color.primary.base}", + "$description": "Primary color of level 700.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.20" + } + ], "source": "$primary-700", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.20" }], "actions": { "default": "{color.action.default.primary.700}" - }, - "$value": "{color.primary.base}", - "$description": "Primary color of level 700." + } }, "800": { + "$value": "{color.primary.base}", + "$description": "Primary color of level 800.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.25" + } + ], "source": "$primary-800", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }], "actions": { "default": "{color.action.default.primary.800}" - }, - "$value": "{color.primary.base}", - "$description": "Primary color of level 800." + } }, "900": { + "$value": "{color.primary.base}", + "$description": "Primary color of level 900.", + "modify": [ + { + "type": "mix", + "otherColor": "black", + "amount": "0.30" + } + ], "source": "$primary-900", - "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.30" }], "actions": { "default": "{color.action.default.primary.900}" - }, - "$value": "{color.primary.base}", - "$description": "Primary color of level 900." + } }, "base": { + "$value": "#0A3055", + "$description": "Basic primary color.", "source": "$primary", "actions": { "default": "{color.action.default.primary.base}" - }, - "$value": "#0A3055", - "$description": "Basic primary color." + } } }, "secondary": { "100": { + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 100.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.94" + } + ], "source": "$secondary-100", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.94" }], "actions": { "default": "{color.action.default.secondary.100}" - }, - "$value": "{color.secondary.base}", - "$description": "Secondary color of level 100." + } }, "200": { + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 200.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.75" + } + ], "source": "$secondary-200", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.75" }], "actions": { "default": "{color.action.default.secondary.200}" - }, - "$value": "{color.secondary.base}", - "$description": "Secondary color of level 200." + } }, "300": { + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 300.", + "modify": [ + { + "type": "mix", + "otherColor": "white", + "amount": "0.50" + } + ], "source": "$secondary-300", - "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }], "actions": { "default": "{color.action.default.secondary.300}" - }, - "$value": "{color.secondary.base}", - "$description": "Secondary color of level 300." + } }, "400": { - "source": "$secondary-400", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 400.", "modify": [ { "type": "mix", @@ -287,22 +330,22 @@ "amount": "0.25" } ], + "source": "$secondary-400", "actions": { "default": "{color.action.default.secondary.400}" - }, - "$value": "{color.secondary.base}", - "$description": "Secondary color of level 400." + } }, "500": { + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 500.", "source": "$secondary-500", "actions": { "default": "{color.action.default.secondary.500}" - }, - "$value": "{color.secondary.base}", - "$description": "Secondary color of level 500." + } }, "600": { - "source": "$secondary-600", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 600.", "modify": [ { "type": "mix", @@ -310,14 +353,14 @@ "amount": "0.10" } ], + "source": "$secondary-600", "actions": { "default": "{color.action.default.secondary.600}" - }, - "$value": "{color.secondary.base}", - "$description": "Secondary color of level 600." + } }, "700": { - "source": "$secondary-700", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 700.", "modify": [ { "type": "mix", @@ -325,14 +368,14 @@ "amount": "0.20" } ], + "source": "$secondary-700", "actions": { "default": "{color.action.default.secondary.700}" - }, - "$value": "{color.secondary.base}", - "$description": "Secondary color of level 700." + } }, "800": { - "source": "$secondary-800", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 800.", "modify": [ { "type": "mix", @@ -340,14 +383,14 @@ "amount": "0.25" } ], + "source": "$secondary-800", "actions": { "default": "{color.action.default.secondary.800}" - }, - "$value": "{color.secondary.base}", - "$description": "Secondary color of level 800." + } }, "900": { - "source": "$secondary-900", + "$value": "{color.secondary.base}", + "$description": "Secondary color of level 900.", "modify": [ { "type": "mix", @@ -355,24 +398,24 @@ "amount": "0.30" } ], + "source": "$secondary-900", "actions": { "default": "{color.action.default.secondary.900}" - }, - "$value": "{color.secondary.base}", - "$description": "Secondary color of level 900." + } }, "base": { + "$value": "{color.gray.700}", + "$description": "Basic secondary color.", "source": "$secondary", "actions": { "default": "{color.action.default.secondary.base}" - }, - "$value": "{color.gray.700}", - "$description": "Basic secondary color." + } } }, "brand": { "100": { - "source": "$brand-100", + "$value": "{color.brand.base}", + "$description": "Brand color of level 100.", "modify": [ { "type": "mix", @@ -380,14 +423,14 @@ "amount": "0.94" } ], + "source": "$brand-100", "actions": { "default": "{color.action.default.brand.100}" - }, - "$value": "{color.brand.base}", - "$description": "Brand color of level 100." + } }, "200": { - "source": "$brand-200", + "$value": "{color.brand.base}", + "$description": "Brand color of level 200.", "modify": [ { "type": "mix", @@ -395,14 +438,14 @@ "amount": "0.75" } ], + "source": "$brand-200", "actions": { "default": "{color.action.default.brand.200}" - }, - "$value": "{color.brand.base}", - "$description": "Brand color of level 200." + } }, "300": { - "source": "$brand-300", + "$value": "{color.brand.base}", + "$description": "Brand color of level 300.", "modify": [ { "type": "mix", @@ -410,14 +453,14 @@ "amount": "0.50" } ], + "source": "$brand-300", "actions": { "default": "{color.action.default.brand.300}" - }, - "$value": "{color.brand.base}", - "$description": "Brand color of level 300." + } }, "400": { - "source": "$brand-400", + "$value": "{color.brand.base}", + "$description": "Brand color of level 400.", "modify": [ { "type": "mix", @@ -425,22 +468,22 @@ "amount": "0.25" } ], + "source": "$brand-400", "actions": { "default": "{color.action.default.brand.400}" - }, - "$value": "{color.brand.base}", - "$description": "Brand color of level 400." + } }, "500": { + "$value": "{color.brand.base}", + "$description": "Brand color of level 500.", "source": "$brand-500", "actions": { "default": "{color.action.default.brand.500}" - }, - "$value": "{color.brand.base}", - "$description": "Brand color of level 500." + } }, "600": { - "source": "$brand-600", + "$value": "{color.brand.base}", + "$description": "Brand color of level 600.", "modify": [ { "type": "mix", @@ -448,14 +491,14 @@ "amount": "0.10" } ], + "source": "$brand-600", "actions": { "default": "{color.action.default.brand.600}" - }, - "$value": "{color.brand.base}", - "$description": "Brand color of level 600." + } }, "700": { - "source": "$brand-700", + "$value": "{color.brand.base}", + "$description": "Brand color of level 700.", "modify": [ { "type": "mix", @@ -463,14 +506,14 @@ "amount": "0.20" } ], + "source": "$brand-700", "actions": { "default": "{color.action.default.brand.700}" - }, - "$value": "{color.brand.base}", - "$description": "Brand color of level 700." + } }, "800": { - "source": "$brand-800", + "$value": "{color.brand.base}", + "$description": "Brand color of level 800.", "modify": [ { "type": "mix", @@ -478,14 +521,14 @@ "amount": "0.25" } ], + "source": "$brand-800", "actions": { "default": "{color.action.default.brand.800}" - }, - "$value": "{color.brand.base}", - "$description": "Brand color of level 800." + } }, "900": { - "source": "$brand-900", + "$value": "{color.brand.base}", + "$description": "Brand color of level 900.", "modify": [ { "type": "mix", @@ -493,24 +536,24 @@ "amount": "0.30" } ], + "source": "$brand-900", "actions": { "default": "{color.action.default.brand.900}" - }, - "$value": "{color.brand.base}", - "$description": "Brand color of level 900." + } }, "base": { + "$value": "#9D0054", + "$description": "Basic brand color.", "source": "$brand", "actions": { "default": "{color.action.default.brand.base}" - }, - "$value": "#9D0054", - "$description": "Basic brand color." + } } }, "success": { "100": { - "source": "$success-100", + "$value": "{color.success.base}", + "$description": "Success color of level 100.", "modify": [ { "type": "mix", @@ -518,14 +561,14 @@ "amount": "0.94" } ], + "source": "$success-100", "actions": { "default": "{color.action.default.success.100}" - }, - "$value": "{color.success.base}", - "$description": "Success color of level 100." + } }, "200": { - "source": "$success-200", + "$value": "{color.success.base}", + "$description": "Success color of level 200.", "modify": [ { "type": "mix", @@ -533,14 +576,14 @@ "amount": "0.75" } ], + "source": "$success-200", "actions": { "default": "{color.action.default.success.200}" - }, - "$value": "{color.success.base}", - "$description": "Success color of level 200." + } }, "300": { - "source": "$success-300", + "$value": "{color.success.base}", + "$description": "Success color of level 300.", "modify": [ { "type": "mix", @@ -548,14 +591,14 @@ "amount": "0.50" } ], + "source": "$success-300", "actions": { "default": "{color.action.default.success.300}" - }, - "$value": "{color.success.base}", - "$description": "Success color of level 300." + } }, "400": { - "source": "$success-400", + "$value": "{color.success.base}", + "$description": "Success color of level 400.", "modify": [ { "type": "mix", @@ -563,22 +606,22 @@ "amount": "0.25" } ], + "source": "$success-400", "actions": { "default": "{color.action.default.success.400}" - }, - "$value": "{color.success.base}", - "$description": "Success color of level 400." + } }, "500": { + "$value": "{color.success.base}", + "$description": "Success color of level 500.", "source": "$success-500", "actions": { "default": "{color.action.default.success.500}" - }, - "$value": "{color.success.base}", - "$description": "Success color of level 500." + } }, "600": { - "source": "$success-600", + "$value": "{color.success.base}", + "$description": "Success color of level 600.", "modify": [ { "type": "mix", @@ -586,14 +629,14 @@ "amount": "0.10" } ], + "source": "$success-600", "actions": { "default": "{color.action.default.success.600}" - }, - "$value": "{color.success.base}", - "$description": "Success color of level 600." + } }, "700": { - "source": "$success-700", + "$value": "{color.success.base}", + "$description": "Success color of level 700.", "modify": [ { "type": "mix", @@ -601,14 +644,14 @@ "amount": "0.20" } ], + "source": "$success-700", "actions": { "default": "{color.action.default.success.700}" - }, - "$value": "{color.success.base}", - "$description": "Success color of level 700." + } }, "800": { - "source": "$success-800", + "$value": "{color.success.base}", + "$description": "Success color of level 800.", "modify": [ { "type": "mix", @@ -616,14 +659,14 @@ "amount": "0.25" } ], + "source": "$success-800", "actions": { "default": "{color.action.default.success.800}" - }, - "$value": "{color.success.base}", - "$description": "Success color of level 800." + } }, "900": { - "source": "$success-900", + "$value": "{color.success.base}", + "$description": "Success color of level 900.", "modify": [ { "type": "mix", @@ -631,24 +674,24 @@ "amount": "0.30" } ], + "source": "$success-900", "actions": { "default": "{color.action.default.success.900}" - }, - "$value": "{color.success.base}", - "$description": "Success color of level 900." + } }, "base": { + "$value": "{color.green}", + "$description": "Basic success color.", "source": "$success", "actions": { "default": "{color.action.default.success.base}" - }, - "$value": "{color.green}", - "$description": "Basic success color." + } } }, "info": { "100": { - "source": "$info-100", + "$value": "{color.info.base}", + "$description": "Info color of level 100.", "modify": [ { "type": "mix", @@ -656,14 +699,14 @@ "amount": "0.94" } ], + "source": "$info-100", "actions": { "default": "{color.action.default.info.100}" - }, - "$value": "{color.info.base}", - "$description": "Info color of level 100." + } }, "200": { - "source": "$info-200", + "$value": "{color.info.base}", + "$description": "Info color of level 200.", "modify": [ { "type": "mix", @@ -671,14 +714,14 @@ "amount": "0.75" } ], + "source": "$info-200", "actions": { "default": "{color.action.default.info.200}" - }, - "$value": "{color.info.base}", - "$description": "Info color of level 200." + } }, "300": { - "source": "$info-300", + "$value": "{color.info.base}", + "$description": "Info color of level 300.", "modify": [ { "type": "mix", @@ -686,14 +729,14 @@ "amount": "0.50" } ], + "source": "$info-300", "actions": { "default": "{color.action.default.info.300}" - }, - "$value": "{color.info.base}", - "$description": "Info color of level 300." + } }, "400": { - "source": "$info-400", + "$value": "{color.info.base}", + "$description": "Info color of level 400.", "modify": [ { "type": "mix", @@ -701,22 +744,22 @@ "amount": "0.25" } ], + "source": "$info-400", "actions": { "default": "{color.action.default.info.400}" - }, - "$value": "{color.info.base}", - "$description": "Info color of level 400." + } }, "500": { + "$value": "{color.info.base}", + "$description": "Info color of level 500.", "source": "$info-500", "actions": { "default": "{color.action.default.info.500}" - }, - "$value": "{color.info.base}", - "$description": "Info color of level 500." + } }, "600": { - "source": "$info-600", + "$value": "{color.info.base}", + "$description": "Info color of level 600.", "modify": [ { "type": "mix", @@ -724,14 +767,14 @@ "amount": "0.10" } ], + "source": "$info-600", "actions": { "default": "{color.action.default.info.600}" - }, - "$value": "{color.info.base}", - "$description": "Info color of level 600." + } }, "700": { - "source": "$info-700", + "$value": "{color.info.base}", + "$description": "Info color of level 700.", "modify": [ { "type": "mix", @@ -739,14 +782,14 @@ "amount": "0.20" } ], + "source": "$info-700", "actions": { "default": "{color.action.default.info.700}" - }, - "$value": "{color.info.base}", - "$description": "Info color of level 700." + } }, "800": { - "source": "$info-800", + "$value": "{color.info.base}", + "$description": "Info color of level 800.", "modify": [ { "type": "mix", @@ -754,14 +797,14 @@ "amount": "0.25" } ], + "source": "$info-800", "actions": { "default": "{color.action.default.info.800}" - }, - "$value": "{color.info.base}", - "$description": "Info color of level 800." + } }, "900": { - "source": "$info-900", + "$value": "{color.info.base}", + "$description": "Info color of level 900.", "modify": [ { "type": "mix", @@ -769,24 +812,24 @@ "amount": "0.30" } ], + "source": "$info-900", "actions": { "default": "{color.action.default.info.900}" - }, - "$value": "{color.info.base}", - "$description": "Info color of level 900." + } }, "base": { + "$value": "{color.teal}", + "$description": "Basic info color.", "source": "$info", "actions": { "default": "{color.action.default.info.base}" - }, - "$value": "{color.teal}", - "$description": "Basic info color." + } } }, "warning": { "100": { - "source": "$warning-100", + "$value": "{color.warning.base}", + "$description": "Warning color of level 100.", "modify": [ { "type": "mix", @@ -794,14 +837,14 @@ "amount": "0.94" } ], + "source": "$warning-100", "actions": { "default": "{color.action.default.warning.100}" - }, - "$value": "{color.warning.base}", - "$description": "Warning color of level 100." + } }, "200": { - "source": "$warning-200", + "$value": "{color.warning.base}", + "$description": "Warning color of level 200.", "modify": [ { "type": "mix", @@ -809,14 +852,14 @@ "amount": "0.75" } ], + "source": "$warning-200", "actions": { "default": "{color.action.default.warning.200}" - }, - "$value": "{color.warning.base}", - "$description": "Warning color of level 200." + } }, "300": { - "source": "$warning-300", + "$value": "{color.warning.base}", + "$description": "Warning color of level 300.", "modify": [ { "type": "mix", @@ -824,14 +867,14 @@ "amount": "0.50" } ], + "source": "$warning-300", "actions": { "default": "{color.action.default.warning.300}" - }, - "$value": "{color.warning.base}", - "$description": "Warning color of level 300." + } }, "400": { - "source": "$warning-400", + "$value": "{color.warning.base}", + "$description": "Warning color of level 400.", "modify": [ { "type": "mix", @@ -839,22 +882,22 @@ "amount": "0.25" } ], + "source": "$warning-400", "actions": { "default": "{color.action.default.warning.400}" - }, - "$value": "{color.warning.base}", - "$description": "Warning color of level 400." + } }, "500": { + "$value": "{color.warning.base}", + "$description": "Warning color of level 500.", "source": "$warning-500", "actions": { "default": "{color.action.default.warning.500}" - }, - "$value": "{color.warning.base}", - "$description": "Warning color of level 500." + } }, "600": { - "source": "$warning-600", + "$value": "{color.warning.base}", + "$description": "Warning color of level 600.", "modify": [ { "type": "mix", @@ -862,14 +905,14 @@ "amount": "0.10" } ], + "source": "$warning-600", "actions": { "default": "{color.action.default.warning.600}" - }, - "$value": "{color.warning.base}", - "$description": "Warning color of level 600." + } }, "700": { - "source": "$warning-700", + "$value": "{color.warning.base}", + "$description": "Warning color of level 700.", "modify": [ { "type": "mix", @@ -877,14 +920,14 @@ "amount": "0.20" } ], + "source": "$warning-700", "actions": { "default": "{color.action.default.warning.700}" - }, - "$value": "{color.warning.base}", - "$description": "Warning color of level 700." + } }, "800": { - "source": "$warning-800", + "$value": "{color.warning.base}", + "$description": "Warning color of level 800.", "modify": [ { "type": "mix", @@ -892,14 +935,14 @@ "amount": "0.25" } ], + "source": "$warning-800", "actions": { "default": "{color.action.default.warning.800}" - }, - "$value": "{color.warning.base}", - "$description": "Warning color of level 800." + } }, "900": { - "source": "$warning-900", + "$value": "{color.warning.base}", + "$description": "Warning color of level 900.", "modify": [ { "type": "mix", @@ -907,24 +950,24 @@ "amount": "0.30" } ], + "source": "$warning-900", "actions": { "default": "{color.action.default.warning.900}" - }, - "$value": "{color.warning.base}", - "$description": "Warning color of level 900." + } }, "base": { + "$value": "{color.yellow}", + "$description": "Basic warning color.", "source": "$warning", "actions": { "default": "{color.action.default.warning.base}" - }, - "$value": "{color.yellow}", - "$description": "Basic warning color." + } } }, "danger": { "100": { - "source": "$danger-100", + "$value": "{color.danger.base}", + "$description": "Danger color of level 100.", "modify": [ { "type": "mix", @@ -932,14 +975,14 @@ "amount": "0.94" } ], + "source": "$danger-100", "actions": { "default": "{color.action.default.danger.100}" - }, - "$value": "{color.danger.base}", - "$description": "Danger color of level 100." + } }, "200": { - "source": "$danger-200", + "$value": "{color.danger.base}", + "$description": "Danger color of level 200.", "modify": [ { "type": "mix", @@ -947,14 +990,14 @@ "amount": "0.75" } ], + "source": "$danger-200", "actions": { "default": "{color.action.default.danger.200}" - }, - "$value": "{color.danger.base}", - "$description": "Danger color of level 200." + } }, "300": { - "source": "$danger-300", + "$value": "{color.danger.base}", + "$description": "Danger color of level 300.", "modify": [ { "type": "mix", @@ -962,14 +1005,14 @@ "amount": "0.50" } ], + "source": "$danger-300", "actions": { "default": "{color.action.default.danger.300}" - }, - "$value": "{color.danger.base}", - "$description": "Danger color of level 300." + } }, "400": { - "source": "$danger-400", + "$value": "{color.danger.base}", + "$description": "Danger color of level 400.", "modify": [ { "type": "mix", @@ -977,22 +1020,22 @@ "amount": "0.25" } ], + "source": "$danger-400", "actions": { "default": "{color.action.default.danger.400}" - }, - "$value": "{color.danger.base}", - "$description": "Danger color of level 400." + } }, "500": { + "$value": "{color.danger.base}", + "$description": "Danger color of level 500.", "source": "$danger-500", "actions": { "default": "{color.action.default.danger.500}" - }, - "$value": "{color.danger.base}", - "$description": "Danger color of level 500." + } }, "600": { - "source": "$danger-600", + "$value": "{color.danger.base}", + "$description": "Danger color of level 600.", "modify": [ { "type": "mix", @@ -1000,14 +1043,14 @@ "amount": "0.10" } ], + "source": "$danger-600", "actions": { "default": "{color.action.default.danger.600}" - }, - "$value": "{color.danger.base}", - "$description": "Danger color of level 600." + } }, "700": { - "source": "$danger-700", + "$value": "{color.danger.base}", + "$description": "Danger color of level 700.", "modify": [ { "type": "mix", @@ -1015,14 +1058,14 @@ "amount": "0.20" } ], + "source": "$danger-700", "actions": { "default": "{color.action.default.danger.700}" - }, - "$value": "{color.danger.base}", - "$description": "Danger color of level 700." + } }, "800": { - "source": "$danger-800", + "$value": "{color.danger.base}", + "$description": "Danger color of level 800.", "modify": [ { "type": "mix", @@ -1030,14 +1073,14 @@ "amount": "0.25" } ], + "source": "$danger-800", "actions": { "default": "{color.action.default.danger.800}" - }, - "$value": "{color.danger.base}", - "$description": "Danger color of level 800." + } }, "900": { - "source": "$danger-900", + "$value": "{color.danger.base}", + "$description": "Danger color of level 900.", "modify": [ { "type": "mix", @@ -1045,24 +1088,24 @@ "amount": "0.30" } ], + "source": "$danger-900", "actions": { "default": "{color.action.default.danger.900}" - }, - "$value": "{color.danger.base}", - "$description": "Danger color of level 900." + } }, "base": { + "$value": "{color.red}", + "$description": "Basic danger color.", "source": "$danger", "actions": { "default": "{color.action.default.danger.base}" - }, - "$value": "{color.red}", - "$description": "Basic danger color." + } } }, "light": { "100": { - "source": "$light-100", + "$value": "{color.light.base}", + "$description": "Light color of level 100.", "modify": [ { "type": "mix", @@ -1070,14 +1113,14 @@ "amount": "0.94" } ], + "source": "$light-100", "actions": { "default": "{color.action.default.light.100}" - }, - "$value": "{color.light.base}", - "$description": "Light color of level 100." + } }, "200": { - "source": "$light-200", + "$value": "{color.light.base}", + "$description": "Light color of level 200.", "modify": [ { "type": "mix", @@ -1085,14 +1128,14 @@ "amount": "0.75" } ], + "source": "$light-200", "actions": { "default": "{color.action.default.light.200}" - }, - "$value": "{color.light.base}", - "$description": "Light color of level 200." + } }, "300": { - "source": "$light-300", + "$value": "{color.light.base}", + "$description": "Light color of level 300.", "modify": [ { "type": "mix", @@ -1100,14 +1143,14 @@ "amount": "0.50" } ], + "source": "$light-300", "actions": { "default": "{color.action.default.light.300}" - }, - "$value": "{color.light.base}", - "$description": "Light color of level 300." + } }, "400": { - "source": "$light-400", + "$value": "{color.light.base}", + "$description": "Light color of level 400.", "modify": [ { "type": "mix", @@ -1115,22 +1158,22 @@ "amount": "0.25" } ], + "source": "$light-400", "actions": { "default": "{color.action.default.light.400}" - }, - "$value": "{color.light.base}", - "$description": "Light color of level 400." + } }, "500": { + "$value": "{color.light.base}", + "$description": "Light color of level 500.", "source": "$light-500", "actions": { "default": "{color.action.default.light.500}" - }, - "$value": "{color.light.base}", - "$description": "Light color of level 500." + } }, "600": { - "source": "$light-600", + "$value": "{color.light.base}", + "$description": "Light color of level 600.", "modify": [ { "type": "mix", @@ -1138,14 +1181,14 @@ "amount": "0.10" } ], + "source": "$light-600", "actions": { "default": "{color.action.default.light.600}" - }, - "$value": "{color.light.base}", - "$description": "Light color of level 600." + } }, "700": { - "source": "$light-700", + "$value": "{color.light.base}", + "$description": "Light color of level 700.", "modify": [ { "type": "mix", @@ -1153,14 +1196,14 @@ "amount": "0.20" } ], + "source": "$light-700", "actions": { "default": "{color.action.default.light.700}" - }, - "$value": "{color.light.base}", - "$description": "Light color of level 700." + } }, "800": { - "source": "$light-800", + "$value": "{color.light.base}", + "$description": "Light color of level 800.", "modify": [ { "type": "mix", @@ -1168,14 +1211,14 @@ "amount": "0.25" } ], + "source": "$light-800", "actions": { "default": "{color.action.default.light.800}" - }, - "$value": "{color.light.base}", - "$description": "Light color of level 800." + } }, "900": { - "source": "$light-900", + "$value": "{color.light.base}", + "$description": "Light color of level 900.", "modify": [ { "type": "mix", @@ -1183,24 +1226,24 @@ "amount": "0.30" } ], + "source": "$light-900", "actions": { "default": "{color.action.default.light.900}" - }, - "$value": "{color.light.base}", - "$description": "Light color of level 900." + } }, "base": { + "$value": "#E1DDDB", + "$description": "Basic light color.", "source": "$light", "actions": { "default": "{color.action.default.light.base}" - }, - "$value": "#E1DDDB", - "$description": "Basic light color." + } } }, "dark": { "100": { - "source": "$dark-100", + "$value": "{color.dark.base}", + "$description": "Dark color of level 100.", "modify": [ { "type": "mix", @@ -1208,14 +1251,14 @@ "amount": "0.94" } ], + "source": "$dark-100", "actions": { "default": "{color.action.default.dark.100}" - }, - "$value": "{color.dark.base}", - "$description": "Dark color of level 100." + } }, "200": { - "source": "$dark-200", + "$value": "{color.dark.base}", + "$description": "Dark color of level 200.", "modify": [ { "type": "mix", @@ -1223,14 +1266,14 @@ "amount": "0.75" } ], + "source": "$dark-200", "actions": { "default": "{color.action.default.dark.200}" - }, - "$value": "{color.dark.base}", - "$description": "Dark color of level 200." + } }, "300": { - "source": "$dark-300", + "$value": "{color.dark.base}", + "$description": "Dark color of level 300.", "modify": [ { "type": "mix", @@ -1238,14 +1281,14 @@ "amount": "0.50" } ], + "source": "$dark-300", "actions": { "default": "{color.action.default.dark.300}" - }, - "$value": "{color.dark.base}", - "$description": "Dark color of level 300." + } }, "400": { - "source": "$dark-400", + "$value": "{color.dark.base}", + "$description": "Dark color of level 400.", "modify": [ { "type": "mix", @@ -1253,22 +1296,22 @@ "amount": "0.25" } ], + "source": "$dark-400", "actions": { "default": "{color.action.default.dark.400}" - }, - "$value": "{color.dark.base}", - "$description": "Dark color of level 400." + } }, "500": { + "$value": "{color.dark.base}", + "$description": "Dark color of level 500.", "source": "$dark-500", "actions": { "default": "{color.action.default.dark.500}" - }, - "$value": "{color.dark.base}", - "$description": "Dark color of level 500." + } }, "600": { - "source": "$dark-600", + "$value": "{color.dark.base}", + "$description": "Dark color of level 600.", "modify": [ { "type": "mix", @@ -1276,14 +1319,14 @@ "amount": "0.10" } ], + "source": "$dark-600", "actions": { "default": "{color.action.default.dark.600}" - }, - "$value": "{color.dark.base}", - "$description": "Dark color of level 600." + } }, "700": { - "source": "$dark-700", + "$value": "{color.dark.base}", + "$description": "Info color of level 700.", "modify": [ { "type": "mix", @@ -1291,14 +1334,14 @@ "amount": "0.20" } ], + "source": "$dark-700", "actions": { "default": "{color.action.default.dark.700}" - }, - "$value": "{color.dark.base}", - "$description": "Info color of level 700." + } }, "800": { - "source": "$dark-800", + "$value": "{color.dark.base}", + "$description": "Dark color of level 800.", "modify": [ { "type": "mix", @@ -1306,14 +1349,14 @@ "amount": "0.25" } ], + "source": "$dark-800", "actions": { "default": "{color.action.default.dark.800}" - }, - "$value": "{color.dark.base}", - "$description": "Dark color of level 800." + } }, "900": { - "source": "$dark-900", + "$value": "{color.dark.base}", + "$description": "Dark color of level 900.", "modify": [ { "type": "mix", @@ -1321,1063 +1364,1062 @@ "amount": "0.30" } ], + "source": "$dark-900", "actions": { "default": "{color.action.default.dark.900}" - }, - "$value": "{color.dark.base}", - "$description": "Dark color of level 900." + } }, "base": { + "$value": "#273F2F", + "$description": "Basic dark color.", "source": "$dark", "actions": { "default": "{color.action.default.dark.base}" - }, - "$value": "#273F2F", - "$description": "Basic dark color." + } } }, "action": { "default": { "gray": { "100": { - "source": "$action-default-gray-100", + "$value": "{color.gray.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.100}" + "source": "$action-default-gray-100" }, "200": { - "source": "$action-default-gray-200", + "$value": "{color.gray.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.200}" + "source": "$action-default-gray-200" }, "300": { - "source": "$action-default-gray-300", + "$value": "{color.gray.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.300}" + "source": "$action-default-gray-300" }, "400": { - "source": "$action-default-gray-400", + "$value": "{color.gray.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.400}" + "source": "$action-default-gray-400" }, "500": { - "source": "$action-default-gray-500", + "$value": "{color.gray.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.500}" + "source": "$action-default-gray-500" }, "600": { - "source": "$action-default-gray-600", + "$value": "{color.gray.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.600}" + "source": "$action-default-gray-600" }, "700": { - "source": "$action-default-gray-700", + "$value": "{color.gray.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.700}" + "source": "$action-default-gray-700" }, "800": { - "source": "$action-default-gray-800", + "$value": "{color.gray.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.800}" + "source": "$action-default-gray-800" }, "900": { - "source": "$action-default-gray-900", + "$value": "{color.gray.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.900}" + "source": "$action-default-gray-900" }, "base": { - "source": "$action-default-gray-base", + "$value": "{color.gray.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.gray.base}" + "source": "$action-default-gray-base" } }, "primary": { "100": { - "source": "$action-default-primary-100", + "$value": "{color.primary.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.100}" + "source": "$action-default-primary-100" }, "200": { - "source": "$action-default-primary-200", + "$value": "{color.primary.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.200}" + "source": "$action-default-primary-200" }, "300": { - "source": "$action-default-primary-300", + "$value": "{color.primary.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.300}" + "source": "$action-default-primary-300" }, "400": { - "source": "$action-default-primary-400", + "$value": "{color.primary.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.400}" + "source": "$action-default-primary-400" }, "500": { - "source": "$action-default-primary-500", + "$value": "{color.primary.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.500}" + "source": "$action-default-primary-500" }, "600": { - "source": "$action-default-primary-600", + "$value": "{color.primary.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.600}" + "source": "$action-default-primary-600" }, "700": { - "source": "$action-default-primary-700", + "$value": "{color.primary.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.700}" + "source": "$action-default-primary-700" }, "800": { - "source": "$action-default-primary-800", + "$value": "{color.primary.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.800}" + "source": "$action-default-primary-800" }, "900": { - "source": "$action-default-primary-900", + "$value": "{color.primary.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.900}" + "source": "$action-default-primary-900" }, "base": { - "source": "$action-default-primary-base", + "$value": "{color.primary.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.primary.base}" + "source": "$action-default-primary-base" } }, "secondary": { "100": { - "source": "$action-default-secondary-100", + "$value": "{color.secondary.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.100}" + "source": "$action-default-secondary-100" }, "200": { - "source": "$action-default-secondary-200", + "$value": "{color.secondary.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.200}" + "source": "$action-default-secondary-200" }, "300": { - "source": "$action-default-secondary-300", + "$value": "{color.secondary.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.300}" + "source": "$action-default-secondary-300" }, "400": { - "source": "$action-default-secondary-400", + "$value": "{color.secondary.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.400}" + "source": "$action-default-secondary-400" }, "500": { - "source": "$action-default-secondary-500", + "$value": "{color.secondary.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.500}" + "source": "$action-default-secondary-500" }, "600": { - "source": "$action-default-secondary-600", + "$value": "{color.secondary.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.600}" + "source": "$action-default-secondary-600" }, "700": { - "source": "$action-default-secondary-700", + "$value": "{color.secondary.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.700}" + "source": "$action-default-secondary-700" }, "800": { - "source": "$action-default-secondary-800", + "$value": "{color.secondary.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.800}" + "source": "$action-default-secondary-800" }, "900": { - "source": "$action-default-secondary-900", + "$value": "{color.secondary.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.900}" + "source": "$action-default-secondary-900" }, "base": { - "source": "$action-default-secondary-base", + "$value": "{color.secondary.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.secondary.base}" + "source": "$action-default-secondary-base" } }, "brand": { "100": { - "source": "$action-default-brand-100", + "$value": "{color.brand.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.100}" + "source": "$action-default-brand-100" }, "200": { - "source": "$action-default-brand-200", + "$value": "{color.brand.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.200}" + "source": "$action-default-brand-200" }, "300": { - "source": "$action-default-brand-300", + "$value": "{color.brand.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.300}" + "source": "$action-default-brand-300" }, "400": { - "source": "$action-default-brand-400", + "$value": "{color.brand.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.400}" + "source": "$action-default-brand-400" }, "500": { - "source": "$action-default-brand-500", + "$value": "{color.brand.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.500}" + "source": "$action-default-brand-500" }, "600": { - "source": "$action-default-brand-600", + "$value": "{color.brand.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.600}" + "source": "$action-default-brand-600" }, "700": { - "source": "$action-default-brand-700", + "$value": "{color.brand.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.700}" + "source": "$action-default-brand-700" }, "800": { - "source": "$action-default-brand-800", + "$value": "{color.brand.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.800}" + "source": "$action-default-brand-800" }, "900": { - "source": "$action-default-brand-900", + "$value": "{color.brand.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.900}" + "source": "$action-default-brand-900" }, "base": { - "source": "$action-default-brand-base", + "$value": "{color.brand.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.brand.base}" + "source": "$action-default-brand-base" } }, "success": { "100": { - "source": "$action-default-success-100", + "$value": "{color.success.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.100}" + "source": "$action-default-success-100" }, "200": { - "source": "$action-default-success-200", + "$value": "{color.success.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.200}" + "source": "$action-default-success-200" }, "300": { - "source": "$action-default-success-300", + "$value": "{color.success.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.300}" + "source": "$action-default-success-300" }, "400": { - "source": "$action-default-success-400", + "$value": "{color.success.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.400}" + "source": "$action-default-success-400" }, "500": { - "source": "$action-default-success-500", + "$value": "{color.success.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.500}" + "source": "$action-default-success-500" }, "600": { - "source": "$action-default-success-600", + "$value": "{color.success.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.600}" + "source": "$action-default-success-600" }, "700": { - "source": "$action-default-success-700", + "$value": "{color.success.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.700}" + "source": "$action-default-success-700" }, "800": { - "source": "$action-default-success-800", + "$value": "{color.success.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.800}" + "source": "$action-default-success-800" }, "900": { - "source": "$action-default-success-900", + "$value": "{color.success.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.900}" + "source": "$action-default-success-900" }, "base": { - "source": "$action-default-success-base", + "$value": "{color.success.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.success.base}" + "source": "$action-default-success-base" } }, "info": { "100": { - "source": "$action-default-info-100", + "$value": "{color.info.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.100}" + "source": "$action-default-info-100" }, "200": { - "source": "$action-default-info-200", + "$value": "{color.info.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.200}" + "source": "$action-default-info-200" }, "300": { - "source": "$action-default-info-300", + "$value": "{color.info.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.300}" + "source": "$action-default-info-300" }, "400": { - "source": "$action-default-info-400", + "$value": "{color.info.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.400}" + "source": "$action-default-info-400" }, "500": { - "source": "$action-default-info-500", + "$value": "{color.info.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.500}" + "source": "$action-default-info-500" }, "600": { - "source": "$action-default-info-600", + "$value": "{color.info.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.600}" + "source": "$action-default-info-600" }, "700": { - "source": "$action-default-info-700", + "$value": "{color.info.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.700}" + "source": "$action-default-info-700" }, "800": { - "source": "$action-default-info-800", + "$value": "{color.info.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.800}" + "source": "$action-default-info-800" }, "900": { - "source": "$action-default-info-900", + "$value": "{color.info.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.900}" + "source": "$action-default-info-900" }, "base": { - "source": "$action-default-info-base", + "$value": "{color.info.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.info.base}" + "source": "$action-default-info-base" } }, "warning": { "100": { - "source": "$action-default-warning-100", + "$value": "{color.warning.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.100}" + "source": "$action-default-warning-100" }, "200": { - "source": "$action-default-warning-200", + "$value": "{color.warning.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.200}" + "source": "$action-default-warning-200" }, "300": { - "source": "$action-default-warning-300", + "$value": "{color.warning.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.300}" + "source": "$action-default-warning-300" }, "400": { - "source": "$action-default-warning-400", + "$value": "{color.warning.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.400}" + "source": "$action-default-warning-400" }, "500": { - "source": "$action-default-warning-500", + "$value": "{color.warning.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.500}" + "source": "$action-default-warning-500" }, "600": { - "source": "$action-default-warning-600", + "$value": "{color.warning.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.600}" + "source": "$action-default-warning-600" }, "700": { - "source": "$action-default-warning-700", + "$value": "{color.warning.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.700}" + "source": "$action-default-warning-700" }, "800": { - "source": "$action-default-warning-800", + "$value": "{color.warning.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.800}" + "source": "$action-default-warning-800" }, "900": { - "source": "$action-default-warning-900", + "$value": "{color.warning.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.900}" + "source": "$action-default-warning-900" }, "base": { - "source": "$action-default-warning-base", + "$value": "{color.warning.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.warning.base}" + "source": "$action-default-warning-base" } }, "danger": { "100": { - "source": "$action-default-danger-100", + "$value": "{color.danger.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.100}" + "source": "$action-default-danger-100" }, "200": { - "source": "$action-default-danger-200", + "$value": "{color.danger.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.200}" + "source": "$action-default-danger-200" }, "300": { - "source": "$action-default-danger-300", + "$value": "{color.danger.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.300}" + "source": "$action-default-danger-300" }, "400": { - "source": "$action-default-danger-400", + "$value": "{color.danger.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.400}" + "source": "$action-default-danger-400" }, "500": { - "source": "$action-default-danger-500", + "$value": "{color.danger.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.500}" + "source": "$action-default-danger-500" }, "600": { - "source": "$action-default-danger-600", + "$value": "{color.danger.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.600}" + "source": "$action-default-danger-600" }, "700": { - "source": "$action-default-danger-700", + "$value": "{color.danger.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.700}" + "source": "$action-default-danger-700" }, "800": { - "source": "$action-default-danger-800", + "$value": "{color.danger.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.800}" + "source": "$action-default-danger-800" }, "900": { - "source": "$action-default-danger-900", + "$value": "{color.danger.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.900}" + "source": "$action-default-danger-900" }, "base": { - "source": "$action-default-danger-base", + "$value": "{color.danger.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.danger.base}" + "source": "$action-default-danger-base" } }, "light": { "100": { - "source": "$action-default-light-100", + "$value": "{color.light.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.100}" + "source": "$action-default-light-100" }, "200": { - "source": "$action-default-light-200", + "$value": "{color.light.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.200}" + "source": "$action-default-light-200" }, "300": { - "source": "$action-default-light-300", + "$value": "{color.light.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.300}" + "source": "$action-default-light-300" }, "400": { - "source": "$action-default-light-400", + "$value": "{color.light.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.400}" + "source": "$action-default-light-400" }, "500": { - "source": "$action-default-light-500", + "$value": "{color.light.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.500}" + "source": "$action-default-light-500" }, "600": { - "source": "$action-default-light-600", + "$value": "{color.light.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.600}" + "source": "$action-default-light-600" }, "700": { - "source": "$action-default-light-700", + "$value": "{color.light.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.700}" + "source": "$action-default-light-700" }, "800": { - "source": "$action-default-light-800", + "$value": "{color.light.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.800}" + "source": "$action-default-light-800" }, "900": { - "source": "$action-default-light-900", + "$value": "{color.light.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.900}" + "source": "$action-default-light-900" }, "base": { - "source": "$action-default-light-base", + "$value": "{color.light.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.light.base}" + "source": "$action-default-light-base" } }, "dark": { "100": { - "source": "$action-default-dark-100", + "$value": "{color.dark.100}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.100}" + "source": "$action-default-dark-100" }, "200": { - "source": "$action-default-dark-200", + "$value": "{color.dark.200}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.200}" + "source": "$action-default-dark-200" }, "300": { - "source": "$action-default-dark-300", + "$value": "{color.dark.300}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.300}" + "source": "$action-default-dark-300" }, "400": { - "source": "$action-default-dark-400", + "$value": "{color.dark.400}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.400}" + "source": "$action-default-dark-400" }, "500": { - "source": "$action-default-dark-500", + "$value": "{color.dark.500}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.500}" + "source": "$action-default-dark-500" }, "600": { - "source": "$action-default-dark-600", + "$value": "{color.dark.600}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.600}" + "source": "$action-default-dark-600" }, "700": { - "source": "$action-default-dark-700", + "$value": "{color.dark.700}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.700}" + "source": "$action-default-dark-700" }, "800": { - "source": "$action-default-dark-800", + "$value": "{color.dark.800}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.800}" + "source": "$action-default-dark-800" }, "900": { - "source": "$action-default-dark-900", + "$value": "{color.dark.900}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.900}" + "source": "$action-default-dark-900" }, "base": { - "source": "$action-default-dark-base", + "$value": "{color.dark.base}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.dark.base}" + "source": "$action-default-dark-base" } }, "accent": { "a": { - "source": "$action-default-accent-a", + "$value": "{color.accent.a}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.accent.a}" + "source": "$action-default-accent-a" }, "b": { - "source": "$action-default-accent-b", + "$value": "{color.accent.b}", "modify": [ { "type": "darken", "amount": "0.1" } ], - "$value": "{color.accent.b}" + "source": "$action-default-accent-b" } } } diff --git a/tokens/src/themes/light/global/elevation.json b/tokens/src/themes/light/global/elevation.json index ba0697b0af..b6d2d8bfce 100644 --- a/tokens/src/themes/light/global/elevation.json +++ b/tokens/src/themes/light/global/elevation.json @@ -4,7 +4,6 @@ "box-shadow": { "level": { "1": { - "source": "$level-1-box-shadow", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -19,10 +18,10 @@ "blur": ".25rem" } ], - "$description": "Basic box shadow of level 1." + "$description": "Basic box shadow of level 1.", + "source": "$level-1-box-shadow" }, "2": { - "source": "$level-2-box-shadow", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -37,10 +36,10 @@ "blur": ".5rem" } ], - "$description": "Basic box shadow of level 2." + "$description": "Basic box shadow of level 2.", + "source": "$level-2-box-shadow" }, "3": { - "source": "$level-3-box-shadow", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -55,10 +54,10 @@ "blur": "1rem" } ], - "$description": "Basic box shadow of level 3." + "$description": "Basic box shadow of level 3.", + "source": "$level-3-box-shadow" }, "4": { - "source": "$level-4-box-shadow", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -73,10 +72,10 @@ "blur": "1.25rem" } ], - "$description": "Basic box shadow of level 4." + "$description": "Basic box shadow of level 4.", + "source": "$level-4-box-shadow" }, "5": { - "source": "$level-5-box-shadow", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -91,42 +90,42 @@ "blur": "2.5rem" } ], - "$description": "Basic box shadow of level 5." + "$description": "Basic box shadow of level 5.", + "source": "$level-5-box-shadow" } }, "base": { - "source": "$box-shadow", "$value": { "color": "rgba(0, 0, 0, .3)", "offsetX": "0", "offsetY": ".125rem", "blur": ".25rem" }, - "$description": "Default box shadow." + "$description": "Default box shadow.", + "source": "$box-shadow" }, "sm": { - "source": "$box-shadow-sm", "$value": { "color": "rgba(0, 0, 0, .2)", "offsetX": "0", "offsetY": ".0625rem", "blur": ".125rem" }, - "$description": "Small box shadow." + "$description": "Small box shadow.", + "source": "$box-shadow-sm" }, "lg": { - "source": "$box-shadow-lg", "$value": { "color": "rgba(0, 0, 0, .3)", "offsetX": "0", "offsetY": ".25rem", "blur": ".5rem" }, - "$description": "Large box shadow." + "$description": "Large box shadow.", + "source": "$box-shadow-lg" }, "down": { "1": { - "source": "$box-shadow-down-1", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -141,10 +140,10 @@ "blur": ".25rem" } ], - "$description": "Bottom box shadow of level 1." + "$description": "Bottom box shadow of level 1.", + "source": "$box-shadow-down-1" }, "2": { - "source": "$box-shadow-down-2", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -159,10 +158,10 @@ "blur": ".5rem" } ], - "$description": "Bottom box shadow of level 2." + "$description": "Bottom box shadow of level 2.", + "source": "$box-shadow-down-2" }, "3": { - "source": "$box-shadow-down-3", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -177,10 +176,10 @@ "blur": ".625rem" } ], - "$description": "Bottom box shadow of level 3." + "$description": "Bottom box shadow of level 3.", + "source": "$box-shadow-down-3" }, "4": { - "source": "$box-shadow-down-4", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -195,10 +194,10 @@ "blur": "1.25rem" } ], - "$description": "Bottom box shadow of level 4." + "$description": "Bottom box shadow of level 4.", + "source": "$box-shadow-down-4" }, "5": { - "source": "$box-shadow-down-5", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -213,12 +212,12 @@ "blur": "2.5rem" } ], - "$description": "Bottom box shadow of level 5." + "$description": "Bottom box shadow of level 5.", + "source": "$box-shadow-down-5" } }, "left": { "1": { - "source": "$box-shadow-left-1", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -233,10 +232,10 @@ "blur": ".25rem" } ], - "$description": "Left box shadow of level 1." + "$description": "Left box shadow of level 1.", + "source": "$box-shadow-left-1" }, "2": { - "source": "$box-shadow-left-2", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -251,10 +250,10 @@ "blur": ".5rem" } ], - "$description": "Left box shadow of level 2." + "$description": "Left box shadow of level 2.", + "source": "$box-shadow-left-2" }, "3": { - "source": "$box-shadow-left-3", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -269,10 +268,10 @@ "blur": ".625rem" } ], - "$description": "Left box shadow of level 3." + "$description": "Left box shadow of level 3.", + "source": "$box-shadow-left-3" }, "4": { - "source": "$box-shadow-left-4", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -287,10 +286,10 @@ "blur": "1.25rem" } ], - "$description": "Left box shadow of level 4." + "$description": "Left box shadow of level 4.", + "source": "$box-shadow-left-4" }, "5": { - "source": "$box-shadow-left-5", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -305,12 +304,12 @@ "blur": "3rem" } ], - "$description": "Left box shadow of level 5." + "$description": "Left box shadow of level 5.", + "source": "$box-shadow-left-5" } }, "up": { "1": { - "source": "$box-shadow-up-1", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -325,10 +324,10 @@ "blur": ".25rem" } ], - "$description": "Top box shadow of level 1." + "$description": "Top box shadow of level 1.", + "source": "$box-shadow-up-1" }, "2": { - "source": "$box-shadow-up-2", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -343,10 +342,10 @@ "blur": ".5rem" } ], - "$description": "Top box shadow of level 2." + "$description": "Top box shadow of level 2.", + "source": "$box-shadow-up-2" }, "3": { - "source": "$box-shadow-up-3", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -361,10 +360,10 @@ "blur": ".625rem" } ], - "$description": "Top box shadow of level 3." + "$description": "Top box shadow of level 3.", + "source": "$box-shadow-up-3" }, "4": { - "source": "$box-shadow-up-4", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -379,10 +378,10 @@ "blur": "1.25rem" } ], - "$description": "Top box shadow of level 4." + "$description": "Top box shadow of level 4.", + "source": "$box-shadow-up-4" }, "5": { - "source": "$box-shadow-up-5", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -397,12 +396,12 @@ "blur": "3rem" } ], - "$description": "Basic box shadow of level 5." + "$description": "Basic box shadow of level 5.", + "source": "$box-shadow-up-5" } }, "right": { "1": { - "source": "$box-shadow-right-1", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -417,10 +416,10 @@ "blur": ".25rem" } ], - "$description": "Right box shadow of level 1." + "$description": "Right box shadow of level 1.", + "source": "$box-shadow-right-1" }, "2": { - "source": "$box-shadow-right-2", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -435,10 +434,10 @@ "blur": ".5rem" } ], - "$description": "Right box shadow of level 2." + "$description": "Right box shadow of level 2.", + "source": "$box-shadow-right-2" }, "3": { - "source": "$box-shadow-right-3", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -453,10 +452,10 @@ "blur": ".625rem" } ], - "$description": "Right box shadow of level 3." + "$description": "Right box shadow of level 3.", + "source": "$box-shadow-right-3" }, "4": { - "source": "$box-shadow-right-4", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -471,10 +470,10 @@ "blur": "1.25rem" } ], - "$description": "Right box shadow of level 4." + "$description": "Right box shadow of level 4.", + "source": "$box-shadow-right-4" }, "5": { - "source": "$box-shadow-right-5", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -489,12 +488,12 @@ "blur": "3rem" } ], - "$description": "Right box shadow of level 5." + "$description": "Right box shadow of level 5.", + "source": "$box-shadow-right-5" } }, "centered": { "1": { - "source": "$box-shadow-centered-1", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -509,10 +508,10 @@ "blur": ".25rem" } ], - "$description": "Centered box shadow of level 1." + "$description": "Centered box shadow of level 1.", + "source": "$box-shadow-centered-1" }, "2": { - "source": "$box-shadow-centered-2", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -527,10 +526,10 @@ "blur": ".5rem" } ], - "$description": "Centered box shadow of level 2." + "$description": "Centered box shadow of level 2.", + "source": "$box-shadow-centered-2" }, "3": { - "source": "$box-shadow-centered-3", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -545,10 +544,10 @@ "blur": "1rem" } ], - "$description": "Centered box shadow of level 3." + "$description": "Centered box shadow of level 3.", + "source": "$box-shadow-centered-3" }, "4": { - "source": "$box-shadow-centered-4", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -563,10 +562,10 @@ "blur": "1.25rem" } ], - "$description": "Centered box shadow of level 4." + "$description": "Centered box shadow of level 4.", + "source": "$box-shadow-centered-4" }, "5": { - "source": "$box-shadow-centered-5", "$value": [ { "color": "rgba(0, 0, 0, .15)", @@ -581,7 +580,8 @@ "blur": "3rem" } ], - "$description": "Centered box shadow of level 5." + "$description": "Centered box shadow of level 5.", + "source": "$box-shadow-centered-5" } } }