diff --git a/packages/calcite-components/src/assets/styles/_legacy.scss b/packages/calcite-components/src/assets/styles/_legacy.scss index d6e38ce888f..a93aa9a5ba0 100644 --- a/packages/calcite-components/src/assets/styles/_legacy.scss +++ b/packages/calcite-components/src/assets/styles/_legacy.scss @@ -49,25 +49,25 @@ --calcite-app-breakpoint-width-xs: var(--calcite-container-size-width-xs-max); --calcite-app-breakpoint-width-xxs: var(--calcite-container-size-width-xxs-max); --calcite-app-spacing-11: var(--calcite-spacing-xxxl); - --calcite-app-spacing-8: var(--calcite-spacing-xxl); - --calcite-app-spacing-7: var(--calcite-spacing-xl); - --calcite-app-spacing-6: var(--calcite-spacing-lg); + --calcite-app-spacing-8: var(--calcite-spacing-xl); + --calcite-app-spacing-7: var(--calcite-spacing-lg); + --calcite-app-spacing-6: var(--calcite-spacing-md-plus); --calcite-app-spacing-5: var(--calcite-spacing-md); --calcite-app-spacing-3: var(--calcite-spacing-sm); --calcite-app-spacing-2: var(--calcite-spacing-xs); --calcite-app-spacing-1: var(--calcite-spacing-xxs); --calcite-app-spacing-0: var(--calcite-spacing-base); - --calcite-app-sizing-11: var(--calcite-size-xxxl); - --calcite-app-sizing-9: var(--calcite-size-xxl); - --calcite-app-sizing-8: var(--calcite-size-xl); - --calcite-app-sizing-7: var(--calcite-size-lg); - --calcite-app-sizing-6: var(--calcite-size-md-plus); - --calcite-app-sizing-5: var(--calcite-size-md); - --calcite-app-sizing-4: var(--calcite-size-sm-plus); - --calcite-app-sizing-3: var(--calcite-size-sm); - --calcite-app-sizing-2: var(--calcite-size-xs); - --calcite-app-sizing-1: var(--calcite-size-xxs); - --calcite-app-sizing-0: var(--calcite-size-xxxs); + --calcite-app-sizing-11: var(--calcite-size-md); + --calcite-app-sizing-9: var(--calcite-size-sm); + --calcite-app-sizing-8: var(--calcite-spacing-xl); + --calcite-app-sizing-7: var(--calcite-size-xs); + --calcite-app-sizing-6: var(--calcite-size-xxxs-plus); + --calcite-app-sizing-5: var(--calcite-size-xxxs); + --calcite-app-sizing-4: var(--calcite-spacing-sm-plus); + --calcite-app-sizing-3: var(--calcite-spacing-sm); + --calcite-app-sizing-2: var(--calcite-spacing-xs); + --calcite-app-sizing-1: var(--calcite-spacing-xxs); + --calcite-app-sizing-0: var(--calcite-spacing-base); --calcite-app-opacity-100: var(--calcite-app-opacity-full); --calcite-app-opacity-85: var(--calcite-app-opacity-dark); --calcite-app-opacity-50: var(--calcite-app-opacity-half); diff --git a/packages/calcite-components/src/components/action-group/action-group.scss b/packages/calcite-components/src/components/action-group/action-group.scss index b8fb7617d8a..779b8496397 100755 --- a/packages/calcite-components/src/components/action-group/action-group.scss +++ b/packages/calcite-components/src/components/action-group/action-group.scss @@ -72,4 +72,8 @@ } } +:host([layout="horizontal"]) ::slotted(calcite-action-group) { + border-inline-end: var(--calcite-size-px); +} + @include base-component(); diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss index 578f2fe9864..e92cacaf95d 100755 --- a/packages/calcite-components/src/components/action/action.scss +++ b/packages/calcite-components/src/components/action/action.scss @@ -175,7 +175,7 @@ button { .button { @apply text-n2h font-normal; padding-inline: var(--calcite-internal-action-padding-inline, theme("spacing.2")); - padding-block: var(--calcite-internal-action-padding-block, var(--calcite-size-xxs)); + padding-block: var(--calcite-internal-action-padding-block, var(--calcite-spacing-xxs)); } .button--text-visible .icon-container { margin-inline-end: theme("spacing.2"); @@ -186,7 +186,7 @@ button { .button { @apply text-n1h font-normal; padding-inline: var(--calcite-internal-action-padding-inline, theme("spacing.4")); - padding-block: var(--calcite-internal-action-padding-block, var(--calcite-size-md)); + padding-block: var(--calcite-internal-action-padding-block, var(--calcite-spacing-md)); } .button--text-visible .icon-container { margin-inline-end: theme("spacing.3"); @@ -197,7 +197,7 @@ button { .button { @apply text-0h font-normal; padding-inline: var(--calcite-internal-action-padding-inline, theme("spacing.5")); - padding-block: var(--calcite-internal-action-padding-block, var(--calcite-size-xl)); + padding-block: var(--calcite-internal-action-padding-block, var(--calcite-spacing-xl)); } .button--text-visible .icon-container { margin-inline-end: theme("spacing.4"); diff --git a/packages/calcite-components/src/components/card-group/card-group.scss b/packages/calcite-components/src/components/card-group/card-group.scss index 86d69a3d1a6..c1e96122496 100644 --- a/packages/calcite-components/src/components/card-group/card-group.scss +++ b/packages/calcite-components/src/components/card-group/card-group.scss @@ -14,7 +14,7 @@ .container { display: flex; flex-wrap: wrap; - gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-size-md))); + gap: var(--calcite-card-group-space, var(--calcite-card-group-gap, var(--calcite-spacing-base))); } @include base-component(); diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss index 64d1f891c0e..b4b69aef37a 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss +++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.scss @@ -16,8 +16,8 @@ :host([scale="s"]) { block-size: #{$calcite-size-24}; - margin: var(--calcite-size-xs); - margin-inline-start: var(--calcite-size-sm); + margin: var(--calcite-spacing-xs); + margin-inline-start: var(--calcite-spacing-sm); .chevron-container, .chevron { @@ -28,27 +28,27 @@ :host([scale="m"]) { block-size: #{$calcite-size-32}; - margin: var(--calcite-size-sm); - margin-inline-start: var(--calcite-size-sm-plus); + margin: var(--calcite-spacing-sm); + margin-inline-start: var(--calcite-spacing-sm-plus); .chevron-container, .chevron { min-inline-size: #{$calcite-size-32}; block-size: #{$calcite-size-32}; - --calcite-internal-action-padding-block: var(--calcite-size-xxs); + --calcite-internal-action-padding-block: var(--calcite-spacing-xxs); } } :host([scale="l"]) { block-size: #{$calcite-size-44}; - margin: var(--calcite-size-xs); - margin-inline-start: var(--calcite-size-sm); + margin: var(--calcite-spacing-xs); + margin-inline-start: var(--calcite-spacing-sm); .chevron-container, .chevron { min-inline-size: #{$calcite-size-44}; block-size: #{$calcite-size-44}; - --calcite-internal-action-padding-block: var(--calcite-size-sm-plus); + --calcite-internal-action-padding-block: var(--calcite-spacing-sm-plus); } } @@ -93,7 +93,7 @@ justify-start text-center leading-none; - gap: var(--calcite-size-xxs); + gap: var(--calcite-spacing-xxs); &.range-calendar { @apply justify-center; } @@ -110,7 +110,7 @@ .year, .suffix { @apply bg-foreground-1; - margin-inline: var(--calcite-size-xxs); + margin-inline: var(--calcite-spacing-xxs); font-weight: var(--calcite-font-weight-medium); color: var(--calcite-color-text-1); font-size: var(--calcite-font-size-md); @@ -138,18 +138,18 @@ } .month-select { - --calcite-select-spacing-inline: var(--calcite-size-xxs); - --calcite-internal-select-spacing-block: var(--calcite-size-xxs); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-xxs); + --calcite-select-spacing-inline: var(--calcite-spacing-xxs); + --calcite-internal-select-spacing-block: var(--calcite-spacing-xxs); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-xxs); --calcite-select-font-size: var(--calcite-font-size-md); --calcite-select-line-height: var(--calcite-font-line-height-fixed-lg); } :host([scale="s"]) .month-year-container { .month-select { - --calcite-select-spacing-inline: var(--calcite-size-xxxs); - --calcite-internal-select-spacing-block: var(--calcite-size-xxxs); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-xxxs); + --calcite-select-spacing-inline: var(--calcite-spacing-base); + --calcite-internal-select-spacing-block: var(--calcite-spacing-base); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-base); --calcite-internal-select-block-size: #{$calcite-size-24}; --calcite-select-font-size: var(--calcite-font-size); --calcite-select-line-height: var(--calcite-font-line-height-fixed-base); @@ -168,9 +168,9 @@ :host([scale="l"]) .month-year-container { .month-select { - --calcite-select-spacing-inline: var(--calcite-size-sm); - --calcite-internal-select-spacing-block: var(--calcite-size-sm); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-sm); + --calcite-select-spacing-inline: var(--calcite-spacing-sm); + --calcite-internal-select-spacing-block: var(--calcite-spacing-sm); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm); --calcite-internal-select-block-size: #{$calcite-size-44}; --calcite-select-font-size: var(--calcite-font-size-lg); --calcite-select-line-height: var(--calcite-font-line-height-fixed-xl); diff --git a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx index d8d3d29df24..cc2f35afd0d 100644 --- a/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx +++ b/packages/calcite-components/src/components/date-picker-month-header/date-picker-month-header.tsx @@ -1,7 +1,7 @@ import { - calciteSizeXxxs, - calciteSizeXxs, - calciteSizeSm, + calciteSpacingBase, + calciteSpacingXxs, + calciteSpacingSm, } from "@esri/calcite-design-tokens/dist/es6/global.js"; import { PropertyValues } from "lit"; import { createRef } from "lit-html/directives/ref.js"; @@ -352,15 +352,31 @@ export class DatePickerMonthHeader extends LitElement { } } + private getPx(value: string): string { + const num = Number(value.replace(/[rem|px]/g, "")); + const base = 16; + + if (value.includes("rem")) { + return `${num * base}px`; + } + + return `${num}px`; + } + private getYearSelectPadding(): string { + let padding; switch (this.scale) { case "l": - return calciteSizeSm; + padding = calciteSpacingSm; + break; case "s": - return calciteSizeXxxs; + padding = calciteSpacingBase; + break; default: - return calciteSizeXxs; + padding = calciteSpacingXxs; + break; } + return this.getPx(padding); } // #endregion diff --git a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss index 0421a7ebe7f..7b714f306da 100644 --- a/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss +++ b/packages/calcite-components/src/components/date-picker-month/date-picker-month.scss @@ -15,8 +15,8 @@ .week-header-container { @apply flex; block-size: #{$calcite-size-16}; - padding-inline: var(--calcite-size-sm); - padding-block: var(--calcite-size-md); + padding-inline: var(--calcite-spacing-sm); + padding-block: var(--calcite-spacing-md); } .week-header { @@ -44,8 +44,8 @@ @apply grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; - padding-inline: var(--calcite-size-sm); - padding-block-end: var(--calcite-size-sm); + padding-inline: var(--calcite-spacing-sm); + padding-block-end: var(--calcite-spacing-sm); } .month-header { @@ -62,12 +62,12 @@ :host([scale="s"]) { .week-days { - padding-inline: var(--calcite-size-xs); - padding-block-end: var(--calcite-size-xs); + padding-inline: var(--calcite-spacing-xs); + padding-block-end: var(--calcite-spacing-xs); } .week-header-container { - padding-inline: var(--calcite-size-xs); - padding-block: var(--calcite-size-sm); + padding-inline: var(--calcite-spacing-xs); + padding-block: var(--calcite-spacing-sm); } .day { font-size: var(--calcite-font-size-sm); @@ -79,12 +79,12 @@ @apply text-n1h; } .week-days { - padding-inline: var(--calcite-size-md); - padding-block-end: var(--calcite-size-md); + padding-inline: var(--calcite-spacing-md); + padding-block-end: var(--calcite-spacing-md); } .week-header-container { - padding-inline: var(--calcite-size-md); - padding-block: var(--calcite-size-md-plus); + padding-inline: var(--calcite-spacing-md); + padding-block: var(--calcite-spacing-md-plus); } .day { font-size: var(--calcite-font-size-md); diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss index 965f5bada94..45812453cbe 100644 --- a/packages/calcite-components/src/components/dialog/dialog.scss +++ b/packages/calcite-components/src/components/dialog/dialog.scss @@ -96,7 +96,7 @@ } :host([scale="l"]) { - --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-lg)); + --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus)); --calcite-internal-dialog-min-size-x: 388px; --calcite-internal-dialog-min-size-y: 220px; } diff --git a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss index ad2074442c8..41490aa455c 100644 --- a/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss +++ b/packages/calcite-components/src/components/dropdown-item/dropdown-item.scss @@ -78,11 +78,11 @@ .dropdown-item-icon, .dropdown-item-icon--start { - padding-inline-end: var(--calcite-spacing-xl); + padding-inline-end: var(--calcite-spacing-lg); } .dropdown-item-icon--end { - padding-inline-start: var(--calcite-spacing-xl); + padding-inline-start: var(--calcite-spacing-lg); } } diff --git a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss index e50a5fb0545..04502437d60 100644 --- a/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss +++ b/packages/calcite-components/src/components/input-date-picker/input-date-picker.scss @@ -90,13 +90,13 @@ .divider { @apply inline-block w-px; - margin-block: var(--calcite-size-xxs); + margin-block: var(--calcite-spacing-xxs); background-color: var(--calcite-color-border-2); } :host([layout="vertical"]) .divider-container { @apply w-full h-px border-t-0 border-b-0 border-l border-r-0; - padding-inline: var(--calcite-size-md); + padding-inline: var(--calcite-spacing-md); & .divider { @apply w-full h-px my-0; } @@ -125,7 +125,7 @@ .vertical-chevron-container { @apply flex items-center border border-solid border-color-input border-l-0; - padding-inline: var(--calcite-size-md); + padding-inline: var(--calcite-spacing-md); background-color: var(--calcite-color-foreground-1); calcite-icon { @@ -140,14 +140,14 @@ :host([range][layout="vertical"][scale="s"]) { .vertical-chevron-container, .divider-container { - padding-inline: var(--calcite-size-sm); + padding-inline: var(--calcite-spacing-sm); } } :host([range][layout="vertical"][scale="l"]) { .vertical-chevron-container, .divider-container { - padding-inline: var(--calcite-size-lg); + padding-inline: var(--calcite-spacing-lg); } } diff --git a/packages/calcite-components/src/components/panel/panel.scss b/packages/calcite-components/src/components/panel/panel.scss index c24ab3ba4aa..6e986fd34b2 100644 --- a/packages/calcite-components/src/components/panel/panel.scss +++ b/packages/calcite-components/src/components/panel/panel.scss @@ -40,7 +40,7 @@ :host([scale="s"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-sm); - --calcite-internal-panel-header-vertical-padding: 10px; // this should use a spacing token once made available + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-sm-plus); .header-content { .heading { @@ -55,7 +55,7 @@ :host([scale="m"]) { --calcite-internal-panel-default-space: var(--calcite-spacing-md); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-lg); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-md-plus); .header-content { .heading { @@ -69,8 +69,8 @@ } :host([scale="l"]) { - --calcite-internal-panel-default-space: var(--calcite-spacing-xl); - --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xxl); + --calcite-internal-panel-default-space: var(--calcite-spacing-lg); + --calcite-internal-panel-header-vertical-padding: var(--calcite-spacing-xl); .header-content { .heading { diff --git a/packages/calcite-components/src/components/scrim/scrim.scss b/packages/calcite-components/src/components/scrim/scrim.scss index 10620e5b889..66c002facb6 100644 --- a/packages/calcite-components/src/components/scrim/scrim.scss +++ b/packages/calcite-components/src/components/scrim/scrim.scss @@ -5,9 +5,6 @@ * * @prop --calcite-scrim-background: Specifies the background color of the scrim. */ -:host { - --calcite-scrim-background: var(--calcite-color-transparent-scrim); -} :host { @apply absolute diff --git a/packages/calcite-components/src/components/select/select.scss b/packages/calcite-components/src/components/select/select.scss index e77d5cf925a..4821ce03b6f 100644 --- a/packages/calcite-components/src/components/select/select.scss +++ b/packages/calcite-components/src/components/select/select.scss @@ -33,20 +33,20 @@ :host([scale="s"]) { --calcite-select-font-size: theme("fontSize.n2h"); --calcite-select-spacing-inline: theme("spacing.2") theme("spacing.8"); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-sm); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-sm); --calcite-internal-select-block-size: #{$calcite-size-24}; } :host([scale="m"]) { --calcite-select-font-size: theme("fontSize.n1h"); --calcite-select-spacing-inline: theme("spacing.3") theme("spacing.10"); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-md); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-md); } :host([scale="l"]) { --calcite-select-font-size: theme("fontSize.0h"); --calcite-select-spacing-inline: theme("spacing.4") theme("spacing.12"); - --calcite-internal-select-icon-container-padding-inline: var(--calcite-size-lg); + --calcite-internal-select-icon-container-padding-inline: var(--calcite-spacing-lg); --calcite-internal-select-block-size: #{$calcite-size-44}; } diff --git a/packages/calcite-components/src/components/tab-nav/tab-nav.scss b/packages/calcite-components/src/components/tab-nav/tab-nav.scss index aedd6d89ffb..a4e0748fb2c 100644 --- a/packages/calcite-components/src/components/tab-nav/tab-nav.scss +++ b/packages/calcite-components/src/components/tab-nav/tab-nav.scss @@ -94,13 +94,13 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th :host(:not([bordered])) { .scale-l { - --calcite-internal-tab-nav-gap: var(--calcite-size-xxl); + --calcite-internal-tab-nav-gap: var(--calcite-spacing-xxl); } .scale-m { - --calcite-internal-tab-nav-gap: var(--calcite-size-xl); + --calcite-internal-tab-nav-gap: var(--calcite-spacing-xl); } .scale-s { - --calcite-internal-tab-nav-gap: var(--calcite-size-lg); + --calcite-internal-tab-nav-gap: var(--calcite-spacing-lg); } .tab-titles-slot-wrapper { @@ -110,7 +110,7 @@ $last-mask-color-stop-position: 51%; // we go beyond the half point to ensure th :host([layout="center"]:not([bordered])) { .tab-titles-slot-wrapper { - padding-inline: var(--calcite-spacing-xxl); + padding-inline: var(--calcite-spacing-xl); } } diff --git a/packages/calcite-components/src/components/text-area/text-area.scss b/packages/calcite-components/src/components/text-area/text-area.scss index 5d2ef27d57c..d0beeb0fdb9 100644 --- a/packages/calcite-components/src/components/text-area/text-area.scss +++ b/packages/calcite-components/src/components/text-area/text-area.scss @@ -173,7 +173,7 @@ .footer { font-size: var(--calcite-text-area-font-size, var(--calcite-font-size-0)); padding-block: var(--calcite-spacing-md); - padding-inline: var(--calcite-spacing-xl); + padding-inline: var(--calcite-spacing-lg); } .footer { @@ -184,7 +184,7 @@ .footer, .character-limit { font-size: var(--calcite-text-area-font-size, var(--calcite-font-size-0)); - padding-inline-start: var(--calcite-spacing-xl); + padding-inline-start: var(--calcite-spacing-lg); } } diff --git a/packages/calcite-components/src/components/tile/tile.scss b/packages/calcite-components/src/components/tile/tile.scss index debe6f74c7d..e56c32a880e 100644 --- a/packages/calcite-components/src/components/tile/tile.scss +++ b/packages/calcite-components/src/components/tile/tile.scss @@ -173,11 +173,11 @@ calcite-link { max-inline-size: 520px; min-inline-size: 160px; .container { - padding: var(--calcite-spacing-xl); + padding: var(--calcite-spacing-lg); } .content-container--has-content, .row { - gap: var(--calcite-spacing-xl); + gap: var(--calcite-spacing-lg); } .heading { font-size: var(--calcite-font-size-0); @@ -188,7 +188,7 @@ calcite-link { line-height: 1.20313rem; } .content-container--has-only-content-top-and-bottom slot[name="content-top"]::slotted(*) { - margin-block-end: var(--calcite-spacing-xl); + margin-block-end: var(--calcite-spacing-lg); } } diff --git a/packages/calcite-components/src/components/tree-item/tree-item.scss b/packages/calcite-components/src/components/tree-item/tree-item.scss index 73f320513a0..35cfb8714c1 100644 --- a/packages/calcite-components/src/components/tree-item/tree-item.scss +++ b/packages/calcite-components/src/components/tree-item/tree-item.scss @@ -69,8 +69,8 @@ margin-inline: theme("margin.3"); } .chevron { - padding-inline: var(--calcite-size-md); - padding-block: var(--calcite-size-sm-plus); + padding-inline: var(--calcite-spacing-md); + padding-block: var(--calcite-spacing-sm-plus); } } } diff --git a/packages/calcite-components/src/demos/validation.html b/packages/calcite-components/src/demos/validation.html index f4d1bb7d1a7..3e0bfbd04d1 100644 --- a/packages/calcite-components/src/demos/validation.html +++ b/packages/calcite-components/src/demos/validation.html @@ -23,7 +23,7 @@ max-width: 1024px; min-width: 280px; width: 70vw; - padding: 0 var(--calcite-spacing-xxl); + padding: 0 var(--calcite-spacing-xl); margin: 0 auto; background-color: var(--calcite-color-background); } @@ -31,8 +31,8 @@ /* Mode Switcher */ #mode-container { position: fixed; - top: var(--calcite-spacing-xxl); - right: var(--calcite-spacing-xxl); + top: var(--calcite-spacing-xl); + right: var(--calcite-spacing-xl); z-index: 2; border: var(--calcite-border-width-sm) solid; background-color: var(--calcite-color-background); @@ -58,16 +58,16 @@ /* Form */ ol { - margin: var(--calcite-spacing-xl) 0; + margin: var(--calcite-spacing-lg) 0; padding: 0 var(--calcite-spacing-xxxl); } ol li { - padding: 0 0 var(--calcite-spacing-xxl) 0; + padding: 0 0 var(--calcite-spacing-xl) 0; } fieldset { - padding: var(--calcite-spacing-xl); + padding: var(--calcite-spacing-lg); margin: var(--calcite-spacing-xxxl) 0; border-collapse: collapse; border: var(--calcite-border-width-sm) solid; diff --git a/packages/calcite-design-tokens/src/core/size.json b/packages/calcite-design-tokens/src/core/size.json index fac962e2263..9060bf55c12 100644 --- a/packages/calcite-design-tokens/src/core/size.json +++ b/packages/calcite-design-tokens/src/core/size.json @@ -4,7 +4,7 @@ "default": { "none": { "value": "0", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -13,7 +13,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -28,7 +28,7 @@ }, "1": { "value": "1px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -37,7 +37,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -52,7 +52,7 @@ }, "2": { "value": "2px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -61,7 +61,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -76,7 +76,7 @@ }, "4": { "value": "4px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -85,7 +85,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -100,7 +100,7 @@ }, "6": { "value": "6px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -109,7 +109,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -124,7 +124,7 @@ }, "8": { "value": "8px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -133,7 +133,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -148,7 +148,7 @@ }, "10": { "value": "10px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -157,7 +157,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -172,7 +172,7 @@ }, "12": { "value": "12px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -181,7 +181,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -196,7 +196,7 @@ }, "14": { "value": "14px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -205,7 +205,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -220,7 +220,7 @@ }, "16": { "value": "16px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -229,7 +229,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -244,7 +244,7 @@ }, "20": { "value": "20px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -253,7 +253,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -268,7 +268,7 @@ }, "24": { "value": "24px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -277,7 +277,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -292,7 +292,7 @@ }, "28": { "value": "28px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -301,7 +301,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -316,7 +316,7 @@ }, "32": { "value": "32px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -325,7 +325,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -340,7 +340,7 @@ }, "36": { "value": "36px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -349,7 +349,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -364,7 +364,7 @@ }, "40": { "value": "40px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -373,7 +373,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -388,7 +388,7 @@ }, "44": { "value": "44px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -397,7 +397,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -412,7 +412,7 @@ }, "48": { "value": "48px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -421,7 +421,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -436,7 +436,7 @@ }, "56": { "value": "56px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -445,7 +445,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -460,7 +460,7 @@ }, "64": { "value": "64px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -469,7 +469,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -484,7 +484,7 @@ }, "72": { "value": "72px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -493,7 +493,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -508,7 +508,7 @@ }, "80": { "value": "80px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -517,7 +517,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -532,7 +532,7 @@ }, "96": { "value": "96px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -541,7 +541,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -556,7 +556,7 @@ }, "112": { "value": "112px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -565,7 +565,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -580,7 +580,7 @@ }, "128": { "value": "128px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -589,7 +589,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -604,7 +604,7 @@ }, "144": { "value": "144px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -613,7 +613,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -628,7 +628,7 @@ }, "160": { "value": "160px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -637,7 +637,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -652,7 +652,7 @@ }, "192": { "value": "192px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -661,7 +661,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -676,7 +676,7 @@ }, "224": { "value": "224px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -685,7 +685,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -700,7 +700,7 @@ }, "256": { "value": "256px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -709,7 +709,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -724,7 +724,7 @@ }, "288": { "value": "288px", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -733,7 +733,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "default", "kind": "", "appearance": "", @@ -750,7 +750,7 @@ "relative": { "auto": { "value": "auto", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -759,7 +759,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -774,7 +774,7 @@ }, "50": { "value": "50%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -783,7 +783,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -798,7 +798,7 @@ }, "100": { "value": "100%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -807,7 +807,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -822,7 +822,7 @@ }, "125": { "value": "125%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -831,7 +831,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -846,7 +846,7 @@ }, "137": { "value": "137.5%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -855,7 +855,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -870,7 +870,7 @@ }, "150": { "value": "150%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -879,7 +879,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -894,7 +894,7 @@ }, "162": { "value": "162.5%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -903,7 +903,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", @@ -918,7 +918,7 @@ }, "200": { "value": "200%", - "type": "sizing", + "type": "size", "attributes": { "calcite-schema": { "system": "calcite", @@ -927,7 +927,7 @@ "component": "", "pattern": "", "element": "", - "category": "sizing", + "category": "size", "group": "relative", "kind": "", "appearance": "", diff --git a/packages/calcite-design-tokens/src/semantic/size.json b/packages/calcite-design-tokens/src/semantic/size.json index c93d2eb5a65..08373c46dee 100644 --- a/packages/calcite-design-tokens/src/semantic/size.json +++ b/packages/calcite-design-tokens/src/semantic/size.json @@ -1,291 +1,518 @@ { "semantic": { "size": { - "px": { - "value": "{core.size.default.1}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "px", - "context": "", - "mode": "" + "fixed": { + "xxxs": { + "value": "{core.size.default.2}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxxs", + "context": "", + "mode": "" + } } - } - }, - "xxxs": { - "value": "{core.size.default.2}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxxs", - "context": "", - "mode": "" + }, + "xxs": { + "value": "{core.size.default.4}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxs", + "context": "", + "mode": "" + } } - } - }, - "xxs": { - "value": "{core.size.default.4}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxs", - "context": "", - "mode": "" + }, + "xs": { + "value": "{core.size.default.6}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xs", + "context": "", + "mode": "" + } } - } - }, - "xs": { - "value": "{core.size.default.6}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xs", - "context": "", - "mode": "" + }, + "sm": { + "value": "{core.size.default.8}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm", + "context": "", + "mode": "" + } } - } - }, - "sm": { - "value": "{core.size.default.8}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "sm", - "context": "", - "mode": "" + }, + "sm+": { + "value": "{core.size.default.10}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm+", + "context": "", + "mode": "" + } } - } - }, - "sm+": { - "value": "{core.size.default.10}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "sm+", - "context": "", - "mode": "" + }, + "md": { + "value": "{core.size.default.12}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md", + "context": "", + "mode": "" + } } - } - }, - "md": { - "value": "{core.size.default.12}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "md", - "context": "", - "mode": "" + }, + "md+": { + "value": "{core.size.default.14}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md+", + "context": "", + "mode": "" + } } - } - }, - "md+": { - "value": "{core.size.default.14}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "md+", - "context": "", - "mode": "" + }, + "lg": { + "value": "{core.size.default.16}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "lg", + "context": "", + "mode": "" + } } - } - }, - "lg": { - "value": "{core.size.default.16}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "lg", - "context": "", - "mode": "" + }, + "xl": { + "value": "{core.size.default.20}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xl", + "context": "", + "mode": "" + } } - } - }, - "xl": { - "value": "{core.size.default.20}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xl", - "context": "", - "mode": "" + }, + "xxl": { + "value": "{core.size.default.24}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxl", + "context": "", + "mode": "" + } } - } - }, - "xxl": { - "value": "{core.size.default.24}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxl", - "context": "", - "mode": "" + }, + "xxxl": { + "value": "{core.size.default.32}", + "type": "spacing", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxxl", + "context": "", + "mode": "" + } } } }, - "xxxl": { - "value": "{core.size.default.32}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "sizing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxxl", - "context": "", - "mode": "" + "default": { + "px": { + "value": "{core.size.default.1}", + "type": "size", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } + } + }, + "xxxs": { + "value": "{core.size.default.12}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxxs", + "context": "", + "mode": "" + } + } + }, + "xxs": { + "value": "{core.size.default.14}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxs", + "context": "", + "mode": "" + } + } + }, + "xs": { + "value": "{core.size.default.16}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xs", + "context": "", + "mode": "" + } + } + }, + "sm": { + "value": "{core.size.default.24}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm", + "context": "", + "mode": "" + } + } + }, + "md": { + "value": "{core.size.default.32}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md", + "context": "", + "mode": "" + } + } + }, + "lg": { + "value": "{core.size.default.44}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "lg", + "context": "", + "mode": "" + } + } + }, + "xl": { + "value": "{core.size.default.48}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xl", + "context": "", + "mode": "" + } + } + }, + "xxl": { + "value": "{core.size.default.64}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "state": "", + "scale": "xxl", + "context": "", + "mode": "" + } + } + }, + "xxxl": { + "value": "{core.size.default.96}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "state": "", + "scale": "xxxl", + "context": "", + "mode": "" + } } } } diff --git a/packages/calcite-design-tokens/src/semantic/space.json b/packages/calcite-design-tokens/src/semantic/space.json index ddc4d72c1ad..572fdd2eade 100644 --- a/packages/calcite-design-tokens/src/semantic/space.json +++ b/packages/calcite-design-tokens/src/semantic/space.json @@ -1,243 +1,519 @@ { "semantic": { "spacing": { - "px": { - "value": "{core.size.default.1}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "px", - "context": "", - "mode": "" + "fixed": { + "xxs": { + "value": "{core.size.default.4}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxs", + "context": "", + "mode": "" + } } - } - }, - "base": { - "value": "{core.size.default.2}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "base", - "context": "", - "mode": "" + }, + "xs": { + "value": "{core.size.default.6}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xs", + "context": "", + "mode": "" + } } - } - }, - "xxs": { - "value": "{core.size.default.4}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxs", - "context": "", - "mode": "" + }, + "sm": { + "value": "{core.size.default.8}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm", + "context": "", + "mode": "" + } } - } - }, - "xs": { - "value": "{core.size.default.6}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xs", - "context": "", - "mode": "" + }, + "md": { + "value": "{core.size.default.12}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md", + "context": "", + "mode": "" + } } - } - }, - "sm": { - "value": "{core.size.default.8}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "sm", - "context": "", - "mode": "" + }, + "lg": { + "value": "{core.size.default.14}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "lg", + "context": "", + "mode": "" + } } - } - }, - "md": { - "value": "{core.size.default.12}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "md", - "context": "", - "mode": "" + }, + "xl": { + "value": "{core.size.default.16}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xl", + "context": "", + "mode": "" + } } - } - }, - "lg": { - "value": "{core.size.default.14}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "lg", - "context": "", - "mode": "" + }, + "xxl": { + "value": "{core.size.default.20}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxl", + "context": "", + "mode": "" + } } - } - }, - "xl": { - "value": "{core.size.default.16}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xl", - "context": "", - "mode": "" + }, + "xxxl": { + "value": "{core.size.default.32}", + "type": "space", + "description": "deprecated", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "fixed", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxxl", + "context": "", + "mode": "" + } } } }, - "xxl": { - "value": "{core.size.default.20}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxl", - "context": "", - "mode": "" + "default": { + "none": { + "value": "{core.size.default.none}", + "type": "space", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } } - } - }, - "xxxl": { - "value": "{core.size.default.32}", - "type": "spacing", - "attributes": { - "calcite-schema": { - "system": "calcite", - "tier": "semantic", - "domain": "", - "component": "", - "pattern": "", - "element": "", - "category": "spacing", - "group": "", - "kind": "", - "appearance": "", - "property": "", - "variant": "", - "state": "", - "scale": "xxxl", - "context": "", - "mode": "" + }, + "px": { + "value": "{core.size.default.1}", + "type": "space", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } + } + }, + "base": { + "value": "{core.size.default.2}", + "type": "space", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "px", + "context": "", + "mode": "" + } + } + }, + "xxs": { + "value": "{core.size.default.4}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxs", + "context": "", + "mode": "" + } + } + }, + "xs": { + "value": "{core.size.default.6}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xs", + "context": "", + "mode": "" + } + } + }, + "sm": { + "value": "{core.size.default.8}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "size", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm", + "context": "", + "mode": "" + } + } + }, + "sm+": { + "value": "{core.size.default.10}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "sm+", + "context": "", + "mode": "" + } + } + }, + "md": { + "value": "{core.size.default.12}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md", + "context": "", + "mode": "" + } + } + }, + "md+": { + "value": "{core.size.default.14}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "md+", + "context": "", + "mode": "" + } + } + }, + "lg": { + "value": "{core.size.default.16}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "lg", + "context": "", + "mode": "" + } + } + }, + "xl": { + "value": "{core.size.default.20}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xl", + "context": "", + "mode": "" + } + } + }, + "xxl": { + "value": "{core.size.default.24}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxl", + "context": "", + "mode": "" + } + } + }, + "xxxl": { + "value": "{core.size.default.32}", + "type": "dimension", + "attributes": { + "calcite-schema": { + "system": "calcite", + "tier": "semantic", + "domain": "", + "component": "", + "pattern": "", + "element": "", + "category": "space", + "group": "", + "kind": "", + "appearance": "", + "property": "", + "variant": "", + "state": "", + "scale": "xxxl", + "context": "", + "mode": "" + } } } } diff --git a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap index 8450dc96979..e1e588354ca 100644 --- a/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap +++ b/packages/calcite-design-tokens/support/tests/__snapshots__/index.spec.ts.snap @@ -386,28 +386,48 @@ exports[`generated tokens CSS global should match 1`] = ` --calcite-z-index-sticky: 300; --calcite-z-index: 1; --calcite-z-index-deep: -999999; - --calcite-spacing-xxxl: 32px; - --calcite-spacing-xxl: 20px; - --calcite-spacing-xl: 16px; - --calcite-spacing-lg: 14px; - --calcite-spacing-md: 12px; - --calcite-spacing-sm: 8px; - --calcite-spacing-xs: 6px; - --calcite-spacing-xxs: 4px; + --calcite-spacing-xxxl: 2rem; + --calcite-spacing-xxl: 1.5rem; + --calcite-spacing-xl: 1.25rem; + --calcite-spacing-lg: 1rem; + --calcite-spacing-md-plus: 0.875rem; + --calcite-spacing-md: 0.75rem; + --calcite-spacing-sm-plus: 0.625rem; + --calcite-spacing-sm: 0.5rem; + --calcite-spacing-xs: 0.375rem; + --calcite-spacing-xxs: 0.25rem; --calcite-spacing-base: 2px; --calcite-spacing-px: 1px; - --calcite-size-xxxl: 32px; - --calcite-size-xxl: 24px; - --calcite-size-xl: 20px; - --calcite-size-lg: 16px; - --calcite-size-md-plus: 14px; - --calcite-size-md: 12px; - --calcite-size-sm-plus: 10px; - --calcite-size-sm: 8px; - --calcite-size-xs: 6px; - --calcite-size-xxs: 4px; - --calcite-size-xxxs: 2px; + --calcite-spacing-none: 0; + --calcite-spacing-fixed-xxxl: 32px; /* deprecated */ + --calcite-spacing-fixed-xxl: 20px; /* deprecated */ + --calcite-spacing-fixed-xl: 16px; /* deprecated */ + --calcite-spacing-fixed-lg: 14px; /* deprecated */ + --calcite-spacing-fixed-md: 12px; /* deprecated */ + --calcite-spacing-fixed-sm: 8px; /* deprecated */ + --calcite-spacing-fixed-xs: 6px; /* deprecated */ + --calcite-spacing-fixed-xxs: 4px; /* deprecated */ + --calcite-size-xxxl: 6rem; + --calcite-size-xxl: 4rem; + --calcite-size-xl: 3rem; + --calcite-size-lg: 2.75rem; + --calcite-size-md: 2rem; + --calcite-size-sm: 1.5rem; + --calcite-size-xs: 1rem; + --calcite-size-xxs: 0.875rem; + --calcite-size-xxxs: 0.75rem; --calcite-size-px: 1px; + --calcite-size-fixed-xxxl: 32px; /* deprecated */ + --calcite-size-fixed-xxl: 24px; /* deprecated */ + --calcite-size-fixed-xl: 20px; /* deprecated */ + --calcite-size-fixed-lg: 16px; /* deprecated */ + --calcite-size-fixed-md-plus: 14px; /* deprecated */ + --calcite-size-fixed-md: 12px; /* deprecated */ + --calcite-size-fixed-sm-plus: 10px; /* deprecated */ + --calcite-size-fixed-sm: 8px; /* deprecated */ + --calcite-size-fixed-xs: 6px; /* deprecated */ + --calcite-size-fixed-xxs: 4px; /* deprecated */ + --calcite-size-fixed-xxxs: 2px; /* deprecated */ --calcite-opacity-disabled: 0.5; --calcite-opacity-full: 1; --calcite-opacity-dark: 0.85; @@ -929,11 +949,11 @@ export const calciteFontLineHeightFixedBase = "16px"; export const calciteFontLineHeightFixedLg = "20px"; export const calciteFontLineHeightFixedXl = "24px"; export const calciteFontLineHeightRelative = "auto"; // 1 -export const calciteFontLineHeightRelativeTight = "125%"; // 1.25 -export const calciteFontLineHeightRelativeSnug = "137.5%"; // 1.375 -export const calciteFontLineHeightRelativeNormal = "150%"; // 1.5 -export const calciteFontLineHeightRelativeRelaxed = "162.5%"; // 1.625 -export const calciteFontLineHeightRelativeLoose = "200%"; // 2 +export const calciteFontLineHeightRelativeTight = "1.25"; // 1.25 +export const calciteFontLineHeightRelativeSnug = "1.375"; // 1.375 +export const calciteFontLineHeightRelativeNormal = "1.5"; // 1.5 +export const calciteFontLineHeightRelativeRelaxed = "1.625"; // 1.625 +export const calciteFontLineHeightRelativeLoose = "2"; // 2 export const calciteFontLetterSpacingTight = "-0.4"; // Deprecated export const calciteFontLetterSpacingNormal = "0"; // Deprecated export const calciteFontLetterSpacingWide = "0.4"; // Deprecated @@ -952,28 +972,48 @@ export const calciteOpacityDisabled = "0.5"; export const calciteShadowNone = {"x":"0","y":"0","blur":"0","spread":"0","color":"rgba(#000000, 0)"}; export const calciteShadowSm = [{"x":"0","y":"2","blur":"8","spread":"0","color":"rgba(#000000, 0.04)"},{"x":"0","y":"4","blur":"16","spread":"0","color":"rgba(#000000, 0.08)"}]; export const calciteShadowMd = [{"x":"0","y":"4","blur":"20","spread":"0","color":"rgba(#000000, 0.08)"},{"x":"0","y":"12","blur":"32","spread":"-2","color":"rgba(#000000, 0.1)"}]; +export const calciteSizeFixedXxxs = "2px"; // deprecated +export const calciteSizeFixedXxs = "4px"; // deprecated +export const calciteSizeFixedXs = "6px"; // deprecated +export const calciteSizeFixedSm = "8px"; // deprecated +export const calciteSizeFixedSmPlus = "10px"; // deprecated +export const calciteSizeFixedMd = "12px"; // deprecated +export const calciteSizeFixedMdPlus = "14px"; // deprecated +export const calciteSizeFixedLg = "16px"; // deprecated +export const calciteSizeFixedXl = "20px"; // deprecated +export const calciteSizeFixedXxl = "24px"; // deprecated +export const calciteSizeFixedXxxl = "32px"; // deprecated export const calciteSizePx = "1px"; -export const calciteSizeXxxs = "2px"; -export const calciteSizeXxs = "4px"; -export const calciteSizeXs = "6px"; -export const calciteSizeSm = "8px"; -export const calciteSizeSmPlus = "10px"; -export const calciteSizeMd = "12px"; -export const calciteSizeMdPlus = "14px"; -export const calciteSizeLg = "16px"; -export const calciteSizeXl = "20px"; -export const calciteSizeXxl = "24px"; -export const calciteSizeXxxl = "32px"; +export const calciteSizeXxxs = "0.75rem"; +export const calciteSizeXxs = "0.875rem"; +export const calciteSizeXs = "1rem"; +export const calciteSizeSm = "1.5rem"; +export const calciteSizeMd = "2rem"; +export const calciteSizeLg = "2.75rem"; +export const calciteSizeXl = "3rem"; +export const calciteSizeXxl = "4rem"; +export const calciteSizeXxxl = "6rem"; +export const calciteSpacingFixedXxs = "4px"; // deprecated +export const calciteSpacingFixedXs = "6px"; // deprecated +export const calciteSpacingFixedSm = "8px"; // deprecated +export const calciteSpacingFixedMd = "12px"; // deprecated +export const calciteSpacingFixedLg = "14px"; // deprecated +export const calciteSpacingFixedXl = "16px"; // deprecated +export const calciteSpacingFixedXxl = "20px"; // deprecated +export const calciteSpacingFixedXxxl = "32px"; // deprecated +export const calciteSpacingNone = "0"; export const calciteSpacingPx = "1px"; export const calciteSpacingBase = "2px"; -export const calciteSpacingXxs = "4px"; -export const calciteSpacingXs = "6px"; -export const calciteSpacingSm = "8px"; -export const calciteSpacingMd = "12px"; -export const calciteSpacingLg = "14px"; -export const calciteSpacingXl = "16px"; -export const calciteSpacingXxl = "20px"; -export const calciteSpacingXxxl = "32px"; +export const calciteSpacingXxs = "0.25rem"; +export const calciteSpacingXs = "0.375rem"; +export const calciteSpacingSm = "0.5rem"; +export const calciteSpacingSmPlus = "0.625rem"; +export const calciteSpacingMd = "0.75rem"; +export const calciteSpacingMdPlus = "0.875rem"; +export const calciteSpacingLg = "1rem"; +export const calciteSpacingXl = "1.25rem"; +export const calciteSpacingXxl = "1.5rem"; +export const calciteSpacingXxxl = "2rem"; export const calciteTypography = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"}; export const calciteTypographyLightMinus3h = {"fontSize":"10px","fontWeight":"300","lineHeight":"12px"}; export const calciteTypographyLightMinus2h = {"fontSize":"12px","fontWeight":"300"}; @@ -995,41 +1035,41 @@ export const calciteTypographyBoldMinus2h = {"fontWeight":"600","fontSize":"12px export const calciteTypographyBoldMinus1h = {"fontWeight":"600"}; export const calciteTypographyBold0h = {"fontWeight":"600","lineHeight":"20px","fontSize":"16px"}; export const calciteTypographyBold1h = {"fontWeight":"600","lineHeight":"24px","fontSize":"18px"}; -export const calciteTypographyWrapLight0 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyWrapLight1 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyWrapLight2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyWrapLight3 = {"fontWeight":"300","lineHeight":"125%","fontSize":"24px"}; -export const calciteTypographyWrapLightMinus2 = {"fontWeight":"300","lineHeight":"137.5%","fontSize":"12px"}; -export const calciteTypographyWrapLightMinus1 = {"fontWeight":"300","lineHeight":"137.5%"}; -export const calciteTypographyWrapRegular0 = {"lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyWrapRegular1 = {"lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyWrapRegular2 = {"lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyWrapRegular3 = {"lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyWrapRegularMinus2 = {"lineHeight":"137.5%","fontSize":"12px"}; -export const calciteTypographyWrapRegularMinus1 = {"lineHeight":"137.5%"}; -export const calciteTypographyWrapMedium0 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyWrapMedium1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyWrapMedium2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyWrapMedium3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyWrapMediumMinus2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"12px"}; -export const calciteTypographyWrapMediumMinus1 = {"fontWeight":"500","lineHeight":"137.5%"}; -export const calciteTypographyWrapBold0 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyWrapBold1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyWrapBold2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyWrapBold3 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyWrapBoldMinus2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"12px"}; -export const calciteTypographyWrapBoldMinus1 = {"fontWeight":"600","lineHeight":"137.5%"}; -export const calciteTypographyHierarchyDisplay1 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyHierarchyDisplay2 = {"fontWeight":"600","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyHierarchyHeading1 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"24px"}; -export const calciteTypographyHierarchyHeading2 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"20px"}; -export const calciteTypographyHierarchyHeading3 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"18px"}; -export const calciteTypographyHierarchyHeading4 = {"fontWeight":"500","lineHeight":"137.5%","fontSize":"16px"}; -export const calciteTypographyHierarchyHeading5 = {"fontWeight":"500","lineHeight":"137.5%"}; -export const calciteTypographyHierarchyBodySnug = {"lineHeight":"137.5%"}; +export const calciteTypographyWrapLight0 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyWrapLight1 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyWrapLight2 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyWrapLight3 = {"fontWeight":"300","lineHeight":"1.25","fontSize":"24px"}; +export const calciteTypographyWrapLightMinus2 = {"fontWeight":"300","lineHeight":"1.375","fontSize":"12px"}; +export const calciteTypographyWrapLightMinus1 = {"fontWeight":"300","lineHeight":"1.375"}; +export const calciteTypographyWrapRegular0 = {"lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyWrapRegular1 = {"lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyWrapRegular2 = {"lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyWrapRegular3 = {"lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyWrapRegularMinus2 = {"lineHeight":"1.375","fontSize":"12px"}; +export const calciteTypographyWrapRegularMinus1 = {"lineHeight":"1.375"}; +export const calciteTypographyWrapMedium0 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyWrapMedium1 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyWrapMedium2 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyWrapMedium3 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyWrapMediumMinus2 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"12px"}; +export const calciteTypographyWrapMediumMinus1 = {"fontWeight":"500","lineHeight":"1.375"}; +export const calciteTypographyWrapBold0 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyWrapBold1 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyWrapBold2 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyWrapBold3 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyWrapBoldMinus2 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"12px"}; +export const calciteTypographyWrapBoldMinus1 = {"fontWeight":"600","lineHeight":"1.375"}; +export const calciteTypographyHierarchyDisplay1 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyHierarchyDisplay2 = {"fontWeight":"600","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyHierarchyHeading1 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"24px"}; +export const calciteTypographyHierarchyHeading2 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"20px"}; +export const calciteTypographyHierarchyHeading3 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"18px"}; +export const calciteTypographyHierarchyHeading4 = {"fontWeight":"500","lineHeight":"1.375","fontSize":"16px"}; +export const calciteTypographyHierarchyHeading5 = {"fontWeight":"500","lineHeight":"1.375"}; +export const calciteTypographyHierarchyBodySnug = {"lineHeight":"1.375"}; export const calciteTypographyHierarchyBody = {"fontFamily":["Avenir Next","Avenir","Helvetica Neue","sans-serif"],"fontSize":"14px","fontWeight":"400","letterSpacing":"0","lineHeight":"16px","paragraphSpacing":"4px","textCase":"none","textDecoration":"none"}; export const calciteTypographyHierarchyOverline = {"lineHeight":"12px","textCase":"uppercase","fontWeight":"600"}; -export const calciteTypographyHierarchyCaption = {"lineHeight":"137.5%","fontSize":"12px"}; +export const calciteTypographyHierarchyCaption = {"lineHeight":"1.375","fontSize":"12px"}; export const calciteZIndexDeep = "-999999"; export const calciteZIndex = "1"; export const calciteZIndexSticky = "300"; @@ -1191,24 +1231,63 @@ export const calciteOpacityDisabled : string; export const calciteShadowNone : { x: string, y: string, blur: string, spread: string, color: string }; export const calciteShadowSm : { x: string, y: string, blur: string, spread: string, color: string }[]; export const calciteShadowMd : { x: string, y: string, blur: string, spread: string, color: string }[]; +/** deprecated */ +export const calciteSizeFixedXxxs : string; +/** deprecated */ +export const calciteSizeFixedXxs : string; +/** deprecated */ +export const calciteSizeFixedXs : string; +/** deprecated */ +export const calciteSizeFixedSm : string; +/** deprecated */ +export const calciteSizeFixedSmPlus : string; +/** deprecated */ +export const calciteSizeFixedMd : string; +/** deprecated */ +export const calciteSizeFixedMdPlus : string; +/** deprecated */ +export const calciteSizeFixedLg : string; +/** deprecated */ +export const calciteSizeFixedXl : string; +/** deprecated */ +export const calciteSizeFixedXxl : string; +/** deprecated */ +export const calciteSizeFixedXxxl : string; export const calciteSizePx : string; export const calciteSizeXxxs : string; export const calciteSizeXxs : string; export const calciteSizeXs : string; export const calciteSizeSm : string; -export const calciteSizeSmPlus : string; export const calciteSizeMd : string; -export const calciteSizeMdPlus : string; export const calciteSizeLg : string; export const calciteSizeXl : string; export const calciteSizeXxl : string; export const calciteSizeXxxl : string; +/** deprecated */ +export const calciteSpacingFixedXxs : string; +/** deprecated */ +export const calciteSpacingFixedXs : string; +/** deprecated */ +export const calciteSpacingFixedSm : string; +/** deprecated */ +export const calciteSpacingFixedMd : string; +/** deprecated */ +export const calciteSpacingFixedLg : string; +/** deprecated */ +export const calciteSpacingFixedXl : string; +/** deprecated */ +export const calciteSpacingFixedXxl : string; +/** deprecated */ +export const calciteSpacingFixedXxxl : string; +export const calciteSpacingNone : string; export const calciteSpacingPx : string; export const calciteSpacingBase : string; export const calciteSpacingXxs : string; export const calciteSpacingXs : string; export const calciteSpacingSm : string; +export const calciteSpacingSmPlus : string; export const calciteSpacingMd : string; +export const calciteSpacingMdPlus : string; export const calciteSpacingLg : string; export const calciteSpacingXl : string; export const calciteSpacingXxl : string; @@ -1997,28 +2076,48 @@ $calcite-z-index-header: 400; $calcite-z-index-sticky: 300; $calcite-z-index: 1; $calcite-z-index-deep: -999999; -$calcite-spacing-xxxl: 32px; -$calcite-spacing-xxl: 20px; -$calcite-spacing-xl: 16px; -$calcite-spacing-lg: 14px; -$calcite-spacing-md: 12px; -$calcite-spacing-sm: 8px; -$calcite-spacing-xs: 6px; -$calcite-spacing-xxs: 4px; +$calcite-spacing-xxxl: 2rem; +$calcite-spacing-xxl: 1.5rem; +$calcite-spacing-xl: 1.25rem; +$calcite-spacing-lg: 1rem; +$calcite-spacing-md-plus: 0.875rem; +$calcite-spacing-md: 0.75rem; +$calcite-spacing-sm-plus: 0.625rem; +$calcite-spacing-sm: 0.5rem; +$calcite-spacing-xs: 0.375rem; +$calcite-spacing-xxs: 0.25rem; $calcite-spacing-base: 2px; $calcite-spacing-px: 1px; -$calcite-size-xxxl: 32px; -$calcite-size-xxl: 24px; -$calcite-size-xl: 20px; -$calcite-size-lg: 16px; -$calcite-size-md-plus: 14px; -$calcite-size-md: 12px; -$calcite-size-sm-plus: 10px; -$calcite-size-sm: 8px; -$calcite-size-xs: 6px; -$calcite-size-xxs: 4px; -$calcite-size-xxxs: 2px; +$calcite-spacing-none: 0; +$calcite-spacing-fixed-xxxl: 32px; // deprecated +$calcite-spacing-fixed-xxl: 20px; // deprecated +$calcite-spacing-fixed-xl: 16px; // deprecated +$calcite-spacing-fixed-lg: 14px; // deprecated +$calcite-spacing-fixed-md: 12px; // deprecated +$calcite-spacing-fixed-sm: 8px; // deprecated +$calcite-spacing-fixed-xs: 6px; // deprecated +$calcite-spacing-fixed-xxs: 4px; // deprecated +$calcite-size-xxxl: 6rem; +$calcite-size-xxl: 4rem; +$calcite-size-xl: 3rem; +$calcite-size-lg: 2.75rem; +$calcite-size-md: 2rem; +$calcite-size-sm: 1.5rem; +$calcite-size-xs: 1rem; +$calcite-size-xxs: 0.875rem; +$calcite-size-xxxs: 0.75rem; $calcite-size-px: 1px; +$calcite-size-fixed-xxxl: 32px; // deprecated +$calcite-size-fixed-xxl: 24px; // deprecated +$calcite-size-fixed-xl: 20px; // deprecated +$calcite-size-fixed-lg: 16px; // deprecated +$calcite-size-fixed-md-plus: 14px; // deprecated +$calcite-size-fixed-md: 12px; // deprecated +$calcite-size-fixed-sm-plus: 10px; // deprecated +$calcite-size-fixed-sm: 8px; // deprecated +$calcite-size-fixed-xs: 6px; // deprecated +$calcite-size-fixed-xxs: 4px; // deprecated +$calcite-size-fixed-xxxs: 2px; // deprecated $calcite-opacity-disabled: 0.5; $calcite-opacity-full: 1; $calcite-opacity-dark: 0.85; diff --git a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts index 0b14ec1186a..e4814aa8abf 100644 --- a/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts +++ b/packages/calcite-design-tokens/support/token-transformer/registerCalciteTransformers.ts @@ -19,6 +19,7 @@ import { registerFormatterDocs } from "./styleDictionary/formatter/docs.js"; import { registerValueToREM } from "./styleDictionary/transformer/value/valueToREM.js"; import { registerValueFontFamilyWithFallbacks } from "./styleDictionary/transformer/value/valueFontFamilyFallbacks.js"; import { registerValueColorCSS } from "./styleDictionary/transformer/value/valueColorCss.js"; +import { registerValueToUnitless } from "./styleDictionary/transformer/value/valueToUnitless.js"; export async function registerCalciteTransformers(sd: StyleDictionary): Promise { // Here we are registering the Transforms provided by Token Studio however, @@ -46,5 +47,6 @@ export async function registerCalciteTransformers(sd: StyleDictionary): Promise< registerValueFontFamilyWithFallbacks(sd); registerValueStringWrapper(sd); registerValueToREM(sd); + registerValueToUnitless(sd); registerValueColorCSS(sd); } diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts index 80b04b2cd56..c14e42ce596 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/utils.ts @@ -16,6 +16,7 @@ import { transitiveValueColorCSS } from "./value/valueColorCss.js"; import { transitiveValueEvaluateMath } from "./value/valueCheckEvaluateMath.js"; import { valueFontFamilyFallbacks } from "./value/valueFontFamilyFallbacks.js"; import { CalciteValueToREM } from "./value/valueToREM.js"; +import { CalciteValueToUnitless } from "./value/valueToUnitless.js"; export type TransformerTypeUnion = `${TransformerTypeEnum}`; @@ -31,6 +32,8 @@ export const globalTransformations = [ "ts/opacity", "ts/size/px", "ts/color/modifiers", + CalciteValueToREM, + CalciteValueToUnitless, valueAlignFontWeightAndStyles, transitiveValueColorCSS, transitiveValueEvaluateMath, @@ -45,7 +48,6 @@ export const styles = [ "ts/shadow/css/shorthand", valueAssetToken, valueStringWrapper, - CalciteValueToREM, valueFontFamilyFallbacks, nameKebabCase, ]; diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts index a6ae3dbcd15..56edde28aa9 100644 --- a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToREM.ts @@ -3,18 +3,24 @@ import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; import { Matcher } from "style-dictionary/types/Matcher.js"; export const matcher: Matcher = (token) => { - if (!["lineHeights"].includes(token.type)) { - return false; - } + const matchingRegex = /dimension/g; - return true; + return matchingRegex.test(token.type); }; export const transformToREM: CalledTransformerFunction = (token) => { + const basePxFontSize = 16; + const regex = /[px%]/g; + if (typeof token.value === "string") { - const val = Number(token.value.replace("%", "")); - if (!isNaN(val)) { - return `${val * 0.01}`; + let returnValue = Number(token.value.replace(regex, "")); + + if (!isNaN(returnValue)) { + if (token.value.includes("%")) { + returnValue = returnValue * 0.01; + } + + return `${returnValue / basePxFontSize}rem`; } } diff --git a/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts new file mode 100644 index 00000000000..3ff11c9d98a --- /dev/null +++ b/packages/calcite-design-tokens/support/token-transformer/styleDictionary/transformer/value/valueToUnitless.ts @@ -0,0 +1,41 @@ +import { Core as StyleDictionary } from "style-dictionary"; +import { CalledTransformerFunction, TransformerConfig } from "../utils.js"; +import { Matcher } from "style-dictionary/types/Matcher.js"; + +export const matcher: Matcher = (token) => { + const matchingRegex = /lineHeight/g; + + return matchingRegex.test(token.type) && !token.path.includes("fixed"); +}; + +export const transformToUnitless: CalledTransformerFunction = (token) => { + const regex = /[px%]/g; + + if (typeof token.value === "string") { + let returnValue = Number(token.value.replace(regex, "")); + + if (!isNaN(returnValue)) { + if (token.value.includes("%")) { + returnValue = returnValue * 0.01; + } + + return `${returnValue}`; + } + } + + return token.value; +}; + +export const registerValueToUnitless = (sd: StyleDictionary): void => { + const transformerConfig: TransformerConfig = { + name: CalciteValueToUnitless, + transformer: transformToUnitless, + type: "value", + transitive: true, + matcher, + }; + + sd.registerTransform(transformerConfig); +}; + +export const CalciteValueToUnitless = "value/calcite/unitless";