diff --git a/src/Carousel/index.scss b/src/Carousel/index.scss index 484f56c4a6..29e6bc078b 100644 --- a/src/Carousel/index.scss +++ b/src/Carousel/index.scss @@ -1,25 +1,24 @@ :root { --pgn-transition-carousel-base: - var(--pgn-transition-carousel-base-1-property) - var(--pgn-transition-carousel-base-1-duration) - var(--pgn-transition-carousel-base-1-timing-function) - var(--pgn-transition-carousel-base-1-delay), - var(--pgn-transition-carousel-base-2-property) - var(--pgn-transition-carousel-base-2-duration) - var(--pgn-transition-carousel-base-2-timing-function) - var(--pgn-transition-carousel-base-2-delay); + var(--pgn-transition-carousel-base-property) + var(--pgn-transition-carousel-base-duration) + var(--pgn-transition-carousel-base-timing-function) + var(--pgn-transition-carousel-base-delay) + var(--pgn-transition-carousel-base-behavior); --pgn-transition-carousel-indicator: var(--pgn-transition-carousel-indicator-property) var(--pgn-transition-carousel-indicator-duration) var(--pgn-transition-carousel-indicator-timing-function) - var(--pgn-transition-carousel-indicator-delay); + var(--pgn-transition-carousel-indicator-delay) + var(--pgn-transition-carousel-indicator-behavior); --pgn-transition-carousel-control: var(--pgn-transition-carousel-control-property) var(--pgn-transition-carousel-control-duration) var(--pgn-transition-carousel-control-timing-function) - var(--pgn-transition-carousel-control-delay); + var(--pgn-transition-carousel-control-delay) + var(--pgn-transition-carousel-control-behavior); } .carousel { diff --git a/styles/css/core/abstraction-variables.css b/styles/css/core/abstraction-variables.css index b1b6999de9..c27ac4eccb 100644 --- a/styles/css/core/abstraction-variables.css +++ b/styles/css/core/abstraction-variables.css @@ -41,36 +41,4 @@ var(--pgn-transition-form-input-2-timing-function) var(--pgn-transition-form-input-2-delay) var(--pgn-transition-form-input-2-behavior); - - /** - * TYPOGRAPHY - */ - --pgn-typography-font-family-sans-serif: - var(--pgn-typography-font-family-sans-serif-primary), - var(--pgn-typography-font-family-sans-serif-secondary), - var(--pgn-typography-font-family-sans-serif-tertiary), - var(--pgn-typography-font-family-sans-serif-alternate-1), - var(--pgn-typography-font-family-sans-serif-alternate-2), - var(--pgn-typography-font-family-sans-serif-alternate-3), - var(--pgn-typography-font-family-sans-serif-alternate-4), - var(--pgn-typography-font-family-sans-serif-fallback); - - --pgn-typography-font-family-monospace: - var(--pgn-typography-font-family-monospace-primary), - var(--pgn-typography-font-family-monospace-secondary), - var(--pgn-typography-font-family-monospace-tertiary), - var(--pgn-typography-font-family-monospace-alternate-1), - var(--pgn-typography-font-family-monospace-alternate-2), - var(--pgn-typography-font-family-monospace-legacy), - var(--pgn-typography-font-family-monospace-fallback); - - --pgn-typography-font-family-base: - var(--pgn-typography-font-family-base-primary), - var(--pgn-typography-font-family-base-secondary), - var(--pgn-typography-font-family-base-tertiary), - var(--pgn-typography-font-family-base-alternate-1), - var(--pgn-typography-font-family-base-alternate-2), - var(--pgn-typography-font-family-base-alternate-3), - var(--pgn-typography-font-family-base-alternate-4), - var(--pgn-typography-font-family-base-fallback); -} \ No newline at end of file +} diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 16fe1f394b..9b0c74517a 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -30,27 +30,27 @@ --pgn-elevation-modal-zindex: 1050; --pgn-elevation-modal-backdrop-zindex: 1040; --pgn-elevation-dropdown-zindex: 1000; - --pgn-transition-collapse-width-behavior: unset; /* Collapse transition for width that takes 350ms */ + --pgn-transition-collapse-width-behavior: normal; /* Collapse transition for width that takes 350ms */ --pgn-transition-collapse-width-delay: 0s; /* Collapse transition for width that takes 350ms */ --pgn-transition-collapse-width-timing-function: ease; /* Collapse transition for width that takes 350ms */ --pgn-transition-collapse-width-duration: 0.35s; /* Collapse transition for width that takes 350ms */ --pgn-transition-collapse-width-property: width; /* Collapse transition for width that takes 350ms */ - --pgn-transition-collapse-height-behavior: unset; /* Collapse transition for height that takes 350ms */ + --pgn-transition-collapse-height-behavior: normal; /* Collapse transition for height that takes 350ms */ --pgn-transition-collapse-height-delay: 0s; /* Collapse transition for height that takes 350ms */ --pgn-transition-collapse-height-timing-function: ease; /* Collapse transition for height that takes 350ms */ --pgn-transition-collapse-height-duration: 0.35s; /* Collapse transition for height that takes 350ms */ --pgn-transition-collapse-height-property: height; /* Collapse transition for height that takes 350ms */ - --pgn-transition-fade-behavior: unset; /* Opacity transition that takes 150ms */ + --pgn-transition-fade-behavior: normal; /* Opacity transition that takes 150ms */ --pgn-transition-fade-delay: 0s; /* Opacity transition that takes 150ms */ --pgn-transition-fade-timing-function: linear; /* Opacity transition that takes 150ms */ --pgn-transition-fade-duration: 0.15s; /* Opacity transition that takes 150ms */ --pgn-transition-fade-property: opacity; /* Opacity transition that takes 150ms */ - --pgn-transition-base-behavior: unset; /* Generic transition for any property change */ + --pgn-transition-base-behavior: normal; /* Generic transition for any property change */ --pgn-transition-base-delay: 0s; /* Generic transition for any property change */ --pgn-transition-base-timing-function: ease-in-out; /* Generic transition for any property change */ --pgn-transition-base-duration: 0.2s; /* Generic transition for any property change */ --pgn-transition-base-property: all; /* Generic transition for any property change */ - --pgn-transition-progress-bar-transition-behavior: unset; + --pgn-transition-progress-bar-transition-behavior: normal; --pgn-transition-progress-bar-transition-delay: 0s; --pgn-transition-progress-bar-transition-timing-function: ease; --pgn-transition-progress-bar-transition-duration: 0.6s; @@ -59,48 +59,47 @@ --pgn-transition-progress-bar-animation-timing-delay: 0s; --pgn-transition-progress-bar-animation-timing-timing-function: linear; --pgn-transition-progress-bar-animation-timing-duration: 1s; - --pgn-transition-form-control-3-behavior: unset; + --pgn-transition-form-control-3-behavior: normal; --pgn-transition-form-control-3-delay: 0s; --pgn-transition-form-control-3-timing-function: ease-in-out; --pgn-transition-form-control-3-duration: 0.15s; --pgn-transition-form-control-3-property: box-shadow; - --pgn-transition-form-control-2-behavior: unset; + --pgn-transition-form-control-2-behavior: normal; --pgn-transition-form-control-2-delay: 0s; --pgn-transition-form-control-2-timing-function: ease-in-out; --pgn-transition-form-control-2-duration: 0.15s; --pgn-transition-form-control-2-property: border-color; - --pgn-transition-form-control-1-behavior: unset; + --pgn-transition-form-control-1-behavior: normal; --pgn-transition-form-control-1-delay: 0s; --pgn-transition-form-control-1-timing-function: ease-in-out; --pgn-transition-form-control-1-duration: 0.15s; --pgn-transition-form-control-1-property: background-color; - --pgn-transition-form-input-2-behavior: unset; + --pgn-transition-form-input-2-behavior: normal; --pgn-transition-form-input-2-delay: 0s; --pgn-transition-form-input-2-timing-function: ease-in-out; --pgn-transition-form-input-2-duration: 0.15s; --pgn-transition-form-input-2-property: box-shadow; - --pgn-transition-form-input-1-behavior: unset; + --pgn-transition-form-input-1-behavior: normal; --pgn-transition-form-input-1-delay: 0s; --pgn-transition-form-input-1-timing-function: ease-in-out; --pgn-transition-form-input-1-duration: 0.15s; --pgn-transition-form-input-1-property: border-color; - --pgn-transition-carousel-control-timing-function: ease; + --pgn-transition-carousel-control-behavior: normal; --pgn-transition-carousel-control-delay: 0ms; + --pgn-transition-carousel-control-timing-function: ease; --pgn-transition-carousel-control-duration: 0.15s; --pgn-transition-carousel-control-property: opacity; - --pgn-transition-carousel-indicator-timing-function: ease; + --pgn-transition-carousel-indicator-behavior: normal; --pgn-transition-carousel-indicator-delay: 0ms; + --pgn-transition-carousel-indicator-timing-function: ease; --pgn-transition-carousel-indicator-duration: var(--pgn-transition-carousel-duration); --pgn-transition-carousel-indicator-property: opacity; --pgn-transition-carousel-duration: 0.6s; - --pgn-transition-carousel-base-2-timing-function: ease-in-out; - --pgn-transition-carousel-base-2-delay: 0ms; - --pgn-transition-carousel-base-2-duration: var(--pgn-transition-carousel-duration); - --pgn-transition-carousel-base-2-property: transform; - --pgn-transition-carousel-base-1-timing-function: ease; - --pgn-transition-carousel-base-1-delay: 0ms; - --pgn-transition-carousel-base-1-duration: 0ms; - --pgn-transition-carousel-base-1-property: opacity; + --pgn-transition-carousel-base-behavior: normal; + --pgn-transition-carousel-base-delay: 0ms; + --pgn-transition-carousel-base-timing-function: ease-in-out; + --pgn-transition-carousel-base-duration: var(--pgn-transition-carousel-duration); + --pgn-transition-carousel-base-property: transform; --pgn-transition-btn: none; --pgn-transition-badge: none; --pgn-typography-print-page-size: a3; @@ -148,30 +147,10 @@ --pgn-typography-font-size-sm: 0.875rem; /* Small font size. */ --pgn-typography-font-size-lg: calc(var(--pgn-typography-font-size-base) * 1.25); /* Lead text font size. */ --pgn-typography-font-size-base: 1.125rem; /* Base font size. */ - --pgn-typography-font-family-monospace-fallback: monospace; /* Monospace font family. */ - --pgn-typography-font-family-monospace-legacy: Courier New; /* Monospace font family. */ - --pgn-typography-font-family-monospace-alternate-2: Liberation Mono; /* Monospace font family. */ - --pgn-typography-font-family-monospace-alternate-1: Consolas; /* Monospace font family. */ - --pgn-typography-font-family-monospace-tertiary: Monaco; /* Monospace font family. */ - --pgn-typography-font-family-monospace-secondary: Menlo; /* Monospace font family. */ - --pgn-typography-font-family-monospace-primary: SFMono-Regular; /* Monospace font family. */ + --pgn-typography-font-family-monospace: 'SFMono-Regular, Menlo, Monaco, Consolas, \'Liberation Mono\', \'Courier New\', monospace'; /* Monospace font family. */ --pgn-typography-font-family-serif: serif; /* Serif font family. */ - --pgn-typography-font-family-sans-serif-fallback: sans-serif; /* Sans-serif font family. */ - --pgn-typography-font-family-sans-serif-alternate-4: 'Noto Sans'; /* Sans-serif font family. */ - --pgn-typography-font-family-sans-serif-alternate-3: Arial; /* Sans-serif font family. */ - --pgn-typography-font-family-sans-serif-alternate-2: 'Helvetica Neue'; /* Sans-serif font family. */ - --pgn-typography-font-family-sans-serif-alternate-1: Roboto; /* Sans-serif font family. */ - --pgn-typography-font-family-sans-serif-tertiary: 'Segoe UI'; /* Sans-serif font family. */ - --pgn-typography-font-family-sans-serif-secondary: BlinkMacSystemFont; /* Sans-serif font family. */ - --pgn-typography-font-family-sans-serif-primary: -apple-system; /* Sans-serif font family. */ - --pgn-typography-font-family-base-fallback: sans-serif; /* Basic font family. */ - --pgn-typography-font-family-base-alternate-4: 'Noto Sans'; /* Basic font family. */ - --pgn-typography-font-family-base-alternate-3: Arial; /* Basic font family. */ - --pgn-typography-font-family-base-alternate-2: 'Helvetica Neue'; /* Basic font family. */ - --pgn-typography-font-family-base-alternate-1: Roboto; /* Basic font family. */ - --pgn-typography-font-family-base-tertiary: 'Segoe UI'; /* Basic font family. */ - --pgn-typography-font-family-base-secondary: BlinkMacSystemFont; /* Basic font family. */ - --pgn-typography-font-family-base-primary: -apple-system; /* Basic font family. */ + --pgn-typography-font-family-sans-serif: -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'; /* Sans-serif font family. */ + --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); /* Basic font family. */ --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25); --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-sm); --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); @@ -387,7 +366,7 @@ --pgn-spacing-dropzone-padding: 1.5rem; --pgn-spacing-dropdown-close-container-top: 0.625rem; --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); - --pgn-spacing-dropdown-padding-header-y: var(--pgn-spacing-dropdown-padding-y-base); + --pgn-spacing-dropdown-padding-header-y: 0.5rem; --pgn-spacing-dropdown-padding-header-x: var(--pgn-spacing-dropdown-padding-x-item); --pgn-spacing-dropdown-padding-y-item: 0.25rem; --pgn-spacing-dropdown-padding-y-base: 0.5rem; diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json index a65e56513c..da74f2a87a 100644 --- a/tokens/src/core/components/Carousel.json +++ b/tokens/src/core/components/Carousel.json @@ -29,20 +29,13 @@ "carousel": { "base": { "source": "$carousel-transition", - "$value": [ - { - "property": "opacity", - "duration": "0ms", - "delay": "0ms", - "timingFunction": "ease" - }, - { - "property": "transform", - "duration": "{transition.carousel.duration}", - "delay": "0ms", - "timingFunction": "ease-in-out" - } - ] + "$value": { + "property": "transform", + "duration": "{transition.carousel.duration}", + "timingFunction": "ease-in-out", + "delay": "0ms", + "behavior": "normal" + } }, "duration": { "source": "$carousel-transition-duration", "$value": ".6s", "$type": "duration" }, "indicator": { @@ -50,8 +43,9 @@ "$value": { "property": "opacity", "duration": "{transition.carousel.duration}", + "timingFunction": "ease", "delay": "0ms", - "timingFunction": "ease" + "behavior": "normal" } }, "control": { @@ -59,8 +53,9 @@ "$value": { "property": "opacity", "duration": ".15s", + "timingFunction": "ease", "delay": "0ms", - "timingFunction": "ease" + "behavior": "normal" } } } diff --git a/tokens/src/core/components/Dropdown.json b/tokens/src/core/components/Dropdown.json index fc34ba0026..a709995611 100644 --- a/tokens/src/core/components/Dropdown.json +++ b/tokens/src/core/components/Dropdown.json @@ -41,7 +41,7 @@ "source": "$dropdown-header-padding", "$value": { "x": "{spacing.dropdown.padding.x.item}", - "y": "{spacing.dropdown.padding.y.base}" + "y": ".5rem" } } }, diff --git a/tokens/src/core/components/Form/transition.json b/tokens/src/core/components/Form/transition.json index 609530dcb1..14b7c2afc5 100644 --- a/tokens/src/core/components/Form/transition.json +++ b/tokens/src/core/components/Form/transition.json @@ -10,14 +10,14 @@ "duration": ".15s", "timing-function": "ease-in-out", "delay": "0s", - "behavior": "unset" + "behavior": "normal" }, { "property": "box-shadow", "duration": ".15s", "timing-function": "ease-in-out", "delay": "0s", - "behavior": "unset" + "behavior": "normal" } ] }, @@ -29,21 +29,21 @@ "duration": ".15s", "timing-function": "ease-in-out", "delay": "0s", - "behavior": "unset" + "behavior": "normal" }, { "property": "border-color", "duration": ".15s", "timing-function": "ease-in-out", "delay": "0s", - "behavior": "unset" + "behavior": "normal" }, { "property": "box-shadow", "duration": ".15s", "timing-function": "ease-in-out", "delay": "0s", - "behavior": "unset" + "behavior": "normal" } ] } diff --git a/tokens/src/core/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json index 490df3c3dd..09a2edd5db 100644 --- a/tokens/src/core/components/ProgressBar.json +++ b/tokens/src/core/components/ProgressBar.json @@ -46,7 +46,7 @@ "duration": ".6s", "timing-function": "ease", "delay": "0s", - "behavior": "unset" + "behavior": "normal" } } } diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json index 74dee33f1d..657ee85e2f 100644 --- a/tokens/src/core/global/transition.json +++ b/tokens/src/core/global/transition.json @@ -8,7 +8,7 @@ "duration": ".2s", "timing-function": "ease-in-out", "delay": "0s", - "behavior": "unset" + "behavior": "normal" }, "$description": "Generic transition for any property change" }, @@ -19,7 +19,7 @@ "duration": ".15s", "timing-function": "linear", "delay": "0s", - "behavior": "unset" + "behavior": "normal" }, "$description": "Opacity transition that takes 150ms" }, @@ -31,7 +31,7 @@ "duration": ".35s", "timing-function": "ease", "delay": "0s", - "behavior": "unset" + "behavior": "normal" }, "$description": "Collapse transition for height that takes 350ms" }, @@ -42,7 +42,7 @@ "duration": ".35s", "timing-function": "ease", "delay": "0s", - "behavior": "unset" + "behavior": "normal" }, "$description": "Collapse transition for width that takes 350ms" } diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json index ea7a00643b..01921ca113 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -11,16 +11,8 @@ "sans": { "serif": { "source": "$font-family-sans-serif", - "$value": { - "primary": "-apple-system", - "secondary": "BlinkMacSystemFont", - "tertiary": "'Segoe UI'", - "alternate-1": "Roboto", - "alternate-2": "'Helvetica Neue'", - "alternate-3": "Arial", - "alternate-4": "'Noto Sans'", - "fallback": "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." } }, @@ -31,15 +23,7 @@ }, "monospace": { "source": "$font-family-monospace", - "$value": { - "primary": "SFMono-Regular", - "secondary": "Menlo", - "tertiary": "Monaco", - "alternate-1": "Consolas", - "alternate-2": "Liberation Mono", - "legacy": "Courier New", - "fallback": "monospace" - }, + "$value": ["SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"], "$description": "Monospace font family." } },