@spectrum-web-components/styles 0.11.4 → 0.11.5-express.9

package/core-global.css

@@ -127,6 +127,57 @@ governing permissions and limitations under the License.
     --spectrum-global-color-static-seafoam-600: #16878c;
     --spectrum-global-color-static-seafoam-700: #0f797d;
     --spectrum-global-color-static-seafoam-800: #096c6f;
+    --spectrum-global-color-static-transparent-white-200: hsla(
+        0,
+        0%,
+        100%,
+        0.1
+    );
+    --spectrum-global-color-static-transparent-white-300: hsla(
+        0,
+        0%,
+        100%,
+        0.25
+    );
+    --spectrum-global-color-static-transparent-white-400: hsla(
+        0,
+        0%,
+        100%,
+        0.4
+    );
+    --spectrum-global-color-static-transparent-white-500: hsla(
+        0,
+        0%,
+        100%,
+        0.55
+    );
+    --spectrum-global-color-static-transparent-white-600: hsla(
+        0,
+        0%,
+        100%,
+        0.7
+    );
+    --spectrum-global-color-static-transparent-white-700: hsla(
+        0,
+        0%,
+        100%,
+        0.8
+    );
+    --spectrum-global-color-static-transparent-white-800: hsla(
+        0,
+        0%,
+        100%,
+        0.9
+    );
+    --spectrum-global-color-static-transparent-white-900: #fff;
+    --spectrum-global-color-static-transparent-black-200: rgba(0, 0, 0, 0.1);
+    --spectrum-global-color-static-transparent-black-300: rgba(0, 0, 0, 0.25);
+    --spectrum-global-color-static-transparent-black-400: rgba(0, 0, 0, 0.4);
+    --spectrum-global-color-static-transparent-black-500: rgba(0, 0, 0, 0.55);
+    --spectrum-global-color-static-transparent-black-600: rgba(0, 0, 0, 0.7);
+    --spectrum-global-color-static-transparent-black-700: rgba(0, 0, 0, 0.8);
+    --spectrum-global-color-static-transparent-black-800: rgba(0, 0, 0, 0.9);
+    --spectrum-global-color-static-transparent-black-900: #000;
     --spectrum-global-color-sequential-cerulean: #e9fff1, #c8f1e4, #a5e3d7,
         #82d5ca, #68c5c1, #54b4ba, #3fa2b2, #2991ac, #2280a2, #1f6d98, #1d5c8d,
         #1a4b83, #1a3979, #1a266f, #191264, #180057;
@@ -274,16 +325,16 @@ governing permissions and limitations under the License.
         --spectrum-global-color-green-400
     );
     --spectrum-semantic-positive-background-color-default: var(
-        --spectrum-global-color-static-green-600
+        --spectrum-global-color-static-green-700
     );
     --spectrum-semantic-positive-background-color-hover: var(
-        --spectrum-global-color-static-green-700
+        --spectrum-global-color-static-green-800
     );
     --spectrum-semantic-positive-background-color-down: var(
         --spectrum-global-color-static-green-800
     );
     --spectrum-semantic-positive-background-color-key-focus: var(
-        --spectrum-global-color-static-green-700
+        --spectrum-global-color-static-green-800
     );
     --spectrum-semantic-informative-background-color: var(
         --spectrum-global-color-static-blue-700
@@ -480,10 +531,8 @@ governing permissions and limitations under the License.
     --spectrum-global-font-font-family-ko: adobe-clean-han-korean,
         source-han-korean, 'Malgun Gothic', 'Apple Gothic', 'sans-serif';
     --spectrum-global-font-font-family-ja: adobe-clean-han-japanese,
-        source-han-japanese, 'Yu Gothic', '\\30E1 \\30A4 \\30EA \\30AA',
-        '\\30D2 \\30E9 \\30AE \\30CE \\89D2 \\30B4  Pro W3',
-        'Hiragino Kaku Gothic Pro W3', 'Osaka',
-        '\\FF2D \\FF33 \\FF30 \\30B4 \\30B7 \\30C3 \\30AF', 'MS PGothic',
+        'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Osaka', YuGothic,
+        'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic',
         'sans-serif';
     --spectrum-global-font-font-family-condensed: adobe-clean-han-traditional,
         source-han-traditional, 'MingLiu', 'Heiti TC Light', adobe-clean,
@@ -1307,6 +1356,7 @@ governing permissions and limitations under the License.
     --spectrum-alias-pickerbutton-border-radius-rounded: var(
         --spectrum-global-dimension-size-50
     );
+    --spectrum-alias-pickerbutton-border-radius-rounded-sided: 0;
     --spectrum-alias-search-border-radius: var(
         --spectrum-global-dimension-size-50
     );
@@ -1317,6 +1367,18 @@ governing permissions and limitations under the License.
     --spectrum-alias-thumbnail-border-radius-small: var(
         --spectrum-global-dimension-size-25
     );
+    --spectrum-alias-actiongroup-button-gap: var(
+        --spectrum-global-dimension-size-100
+    );
+    --spectrum-alias-actiongroup-button-gap-compact: var(
+        --spectrum-global-dimension-size-0
+    );
+    --spectrum-alias-actiongroup-button-gap-quiet: var(
+        --spectrum-global-dimension-size-100
+    );
+    --spectrum-alias-actiongroup-button-gap-quiet-compact: var(
+        --spectrum-global-dimension-size-25
+    );
     --spectrum-alias-search-padding-left-s: var(
         --spectrum-global-dimension-size-85
     );
@@ -1515,11 +1577,154 @@ governing permissions and limitations under the License.
     --spectrum-alias-avatar-border-size: var(
         --spectrum-global-dimension-size-0
     );
+    --spectrum-alias-tag-border-radius: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-tag-border-size-default: var(
+        --spectrum-global-dimension-static-size-10
+    );
+    --spectrum-alias-tag-border-size-key-focus: var(
+        --spectrum-global-dimension-static-size-25
+    );
+    --spectrum-alias-tag-border-size-disabled: var(
+        --spectrum-global-dimension-size-0
+    );
+    --spectrum-alias-tag-border-size: var(
+        --spectrum-global-dimension-static-size-10
+    );
+    --spectrum-alias-tag-padding-right-s: var(
+        --spectrum-global-dimension-size-115
+    );
+    --spectrum-alias-tag-padding-right-m: var(
+        --spectrum-global-dimension-size-150
+    );
+    --spectrum-alias-tag-padding-right-l: var(
+        --spectrum-global-dimension-size-185
+    );
+    --spectrum-alias-tag-height-s: var(--spectrum-global-dimension-size-300);
+    --spectrum-alias-tag-height-m: var(--spectrum-global-dimension-size-400);
+    --spectrum-alias-tag-height-l: var(--spectrum-global-dimension-size-500);
+    --spectrum-alias-tag-font-size-s: var(
+        --spectrum-global-dimension-font-size-75
+    );
+    --spectrum-alias-tag-font-size-m: var(
+        --spectrum-global-dimension-font-size-100
+    );
+    --spectrum-alias-tag-font-size-l: var(
+        --spectrum-global-dimension-font-size-200
+    );
+    --spectrum-alias-tag-text-padding-top-s: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-tag-text-padding-top-m: var(
+        --spectrum-global-dimension-size-75
+    );
+    --spectrum-alias-tag-text-padding-top-l: var(
+        --spectrum-global-dimension-size-115
+    );
+    --spectrum-alias-tag-icon-size-s: var(--spectrum-global-dimension-size-200);
+    --spectrum-alias-tag-icon-size-m: var(--spectrum-global-dimension-size-225);
+    --spectrum-alias-tag-icon-margin-top-s: var(
+        --spectrum-global-dimension-size-50
+    );
+    --spectrum-alias-tag-icon-margin-top-m: var(
+        --spectrum-global-dimension-size-85
+    );
+    --spectrum-alias-tag-icon-margin-top-l: var(
+        --spectrum-global-dimension-size-125
+    );
+    --spectrum-alias-tag-icon-margin-right-s: var(
+        --spectrum-global-dimension-size-85
+    );
+    --spectrum-alias-tag-icon-margin-right-m: var(
+        --spectrum-global-dimension-size-100
+    );
+    --spectrum-alias-tag-icon-margin-right-l: var(
+        --spectrum-global-dimension-size-115
+    );
+    --spectrum-alias-tag-clearbutton-width-s: var(
+        --spectrum-global-dimension-size-300
+    );
+    --spectrum-alias-tag-clearbutton-width-m: var(
+        --spectrum-global-dimension-size-400
+    );
+    --spectrum-alias-tag-clearbutton-width-l: var(
+        --spectrum-global-dimension-size-500
+    );
+    --spectrum-alias-tag-clearbutton-icon-margin-s: var(
+        --spectrum-global-dimension-size-100
+    );
+    --spectrum-alias-tag-clearbutton-icon-margin-m: var(
+        --spectrum-global-dimension-size-150
+    );
+    --spectrum-alias-tag-clearbutton-icon-margin-l: var(
+        --spectrum-global-dimension-size-185
+    );
+    --spectrum-alias-tag-focusring-border-radius: var(
+        --spectrum-global-dimension-size-75
+    );
+    --spectrum-alias-tag-focusring-size: var(
+        --spectrum-global-dimension-size-25
+    );
+    --spectrum-alias-tag-focusring-gap: var(
+        --spectrum-global-dimension-static-size-0
+    );
+    --spectrum-alias-tag-focusring-gap-selected: var(
+        --spectrum-global-dimension-size-25
+    );
+    --spectrum-alias-colorloupe-width: var(
+        --spectrum-global-dimension-static-size-600
+    );
+    --spectrum-alias-colorloupe-height: var(
+        --spectrum-global-dimension-static-size-800
+    );
 }
 :host,
 :root {
     /* spectrum-colorAliases.css */
     --spectrum-alias-colorhandle-outer-border-color: rgba(0, 0, 0, 0.42);
+    --spectrum-alias-transparent-blue-background-color-hover: rgba(
+        13,
+        102,
+        208,
+        0.15
+    );
+    --spectrum-alias-transparent-blue-background-color-down: rgba(
+        9,
+        90,
+        186,
+        0.3
+    );
+    --spectrum-alias-transparent-blue-background-color-key-focus: var(
+        --spectrum-alias-transparent-blue-background-color-hover
+    );
+    --spectrum-alias-transparent-blue-background-color-mouse-focus: var(
+        --spectrum-alias-transparent-blue-background-color-hover
+    );
+    --spectrum-alias-transparent-blue-background-color: var(
+        --spectrum-alias-component-text-color-default
+    );
+    --spectrum-alias-transparent-red-background-color-hover: rgba(
+        201,
+        37,
+        45,
+        0.15
+    );
+    --spectrum-alias-transparent-red-background-color-down: rgba(
+        187,
+        18,
+        26,
+        0.3
+    );
+    --spectrum-alias-transparent-red-background-color-key-focus: var(
+        --spectrum-alias-transparent-red-background-color-hover
+    );
+    --spectrum-alias-transparent-red-background-color-mouse-focus: var(
+        --spectrum-alias-transparent-red-background-color-hover
+    );
+    --spectrum-alias-transparent-red-background-color: var(
+        --spectrum-alias-component-text-color-default
+    );
     --spectrum-alias-component-text-color-disabled: var(
         --spectrum-global-color-gray-500
     );
@@ -1799,6 +2004,169 @@ governing permissions and limitations under the License.
     --spectrum-alias-component-border-color-emphasized-selected: var(
         --spectrum-alias-component-border-color-emphasized-selected-default
     );
+    --spectrum-alias-tag-border-color-default: var(
+        --spectrum-alias-border-color-darker-default
+    );
+    --spectrum-alias-tag-border-color-hover: var(
+        --spectrum-alias-border-color-darker-hover
+    );
+    --spectrum-alias-tag-border-color-down: var(
+        --spectrum-alias-border-color-darker-hover
+    );
+    --spectrum-alias-tag-border-color-key-focus: var(
+        --spectrum-alias-border-color-key-focus
+    );
+    --spectrum-alias-tag-border-color-error-default: var(
+        --spectrum-semantic-negative-color-default
+    );
+    --spectrum-alias-tag-border-color-error-hover: var(
+        --spectrum-semantic-negative-color-hover
+    );
+    --spectrum-alias-tag-border-color-error-down: var(
+        --spectrum-semantic-negative-color-hover
+    );
+    --spectrum-alias-tag-border-color-error-key-focus: var(
+        --spectrum-alias-border-color-key-focus
+    );
+    --spectrum-alias-tag-border-color-error-selected: var(
+        --spectrum-semantic-negative-color-default
+    );
+    --spectrum-alias-tag-border-color-selected: var(
+        --spectrum-alias-tag-background-color-selected-default
+    );
+    --spectrum-alias-tag-border-color: var(
+        --spectrum-alias-tag-border-color-default
+    );
+    --spectrum-alias-tag-border-color-disabled: var(
+        --spectrum-alias-border-color-disabled
+    );
+    --spectrum-alias-tag-border-color-error: var(
+        --spectrum-alias-tag-border-color-error-default
+    );
+    --spectrum-alias-tag-text-color-default: var(
+        --spectrum-alias-label-text-color
+    );
+    --spectrum-alias-tag-text-color-hover: var(
+        --spectrum-alias-text-color-hover
+    );
+    --spectrum-alias-tag-text-color-down: var(--spectrum-alias-text-color-down);
+    --spectrum-alias-tag-text-color-key-focus: var(
+        --spectrum-alias-text-color-hover
+    );
+    --spectrum-alias-tag-text-color-disabled: var(
+        --spectrum-global-color-gray-500
+    );
+    --spectrum-alias-tag-text-color: var(
+        --spectrum-alias-tag-text-color-default
+    );
+    --spectrum-alias-tag-text-color-error-default: var(
+        --spectrum-global-color-red-600
+    );
+    --spectrum-alias-tag-text-color-error-hover: var(
+        --spectrum-global-color-red-700
+    );
+    --spectrum-alias-tag-text-color-error-down: var(
+        --spectrum-global-color-red-700
+    );
+    --spectrum-alias-tag-text-color-error-key-focus: var(
+        --spectrum-global-color-red-700
+    );
+    --spectrum-alias-tag-text-color-error: var(
+        --spectrum-alias-tag-text-color-error-default
+    );
+    --spectrum-alias-tag-text-color-selected: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-tag-icon-color-default: var(--spectrum-alias-icon-color);
+    --spectrum-alias-tag-icon-color-hover: var(
+        --spectrum-alias-icon-color-hover
+    );
+    --spectrum-alias-tag-icon-color-down: var(--spectrum-alias-icon-color-down);
+    --spectrum-alias-tag-icon-color-key-focus: var(
+        --spectrum-alias-icon-color-hover
+    );
+    --spectrum-alias-tag-icon-color-disabled: var(
+        --spectrum-alias-icon-color-disabled
+    );
+    --spectrum-alias-tag-icon-color: var(
+        --spectrum-alias-tag-icon-color-default
+    );
+    --spectrum-alias-tag-icon-color-error: var(--spectrum-global-color-red-600);
+    --spectrum-alias-tag-icon-color-selected: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-tag-background-color-disabled: var(
+        --spectrum-global-color-gray-200
+    );
+    --spectrum-alias-tag-background-color-default: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-tag-background-color-hover: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-tag-background-color-down: var(
+        --spectrum-global-color-gray-200
+    );
+    --spectrum-alias-tag-background-color-key-focus: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-tag-background-color: var(
+        --spectrum-alias-tag-background-color-default
+    );
+    --spectrum-alias-tag-background-color-error-default: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-tag-background-color-error-hover: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-tag-background-color-error-down: var(
+        --spectrum-global-color-gray-200
+    );
+    --spectrum-alias-tag-background-color-error-key-focus: var(
+        --spectrum-global-color-gray-50
+    );
+    --spectrum-alias-tag-background-color-error: var(
+        --spectrum-alias-tag-background-color-error-default
+    );
+    --spectrum-alias-tag-background-color-error-selected-default: var(
+        --spectrum-semantic-negative-color-default
+    );
+    --spectrum-alias-tag-background-color-error-selected-hover: var(
+        --spectrum-semantic-negative-color-hover
+    );
+    --spectrum-alias-tag-background-color-error-selected-down: var(
+        --spectrum-semantic-negative-color-hover
+    );
+    --spectrum-alias-tag-background-color-error-selected-key-focus: var(
+        --spectrum-global-color-red-600
+    );
+    --spectrum-alias-tag-background-color-error-selected: var(
+        --spectrum-alias-tag-background-color-error-selected-default
+    );
+    --spectrum-alias-tag-background-color-selected-default: var(
+        --spectrum-global-color-gray-700
+    );
+    --spectrum-alias-tag-background-color-selected-hover: var(
+        --spectrum-global-color-gray-800
+    );
+    --spectrum-alias-tag-background-color-selected-down: var(
+        --spectrum-global-color-gray-900
+    );
+    --spectrum-alias-tag-background-color-selected-key-focus: var(
+        --spectrum-global-color-gray-900
+    );
+    --spectrum-alias-tag-background-color-selected: var(
+        --spectrum-alias-tag-background-color-selected-default
+    );
+    --spectrum-alias-tag-focusring-border-color-default: transparent;
+    --spectrum-alias-tag-focusring-border-color-key-focus: transparent;
+    --spectrum-alias-tag-focusring-border-color-disabled: transparent;
+    --spectrum-alias-tag-focusring-border-color-selected-key-focus: var(
+        --spectrum-alias-focus-ring-color
+    );
+    --spectrum-alias-tag-focusring-border-color: var(
+        --spectrum-alias-tag-focusring-border-color-default
+    );
     --spectrum-alias-avatar-border-color-default: var(
         --spectrum-alias-background-color-transparent
     );
@@ -2293,6 +2661,105 @@ governing permissions and limitations under the License.
         100%,
         0.1
     );
+    --spectrum-alias-tabs-divider-background-color-default: var(
+        --spectrum-global-color-gray-300
+    );
+    --spectrum-alias-tabs-divider-background-color-quiet: var(
+        --spectrum-alias-background-color-transparent
+    );
+    --spectrum-alias-tabitem-text-color-default: var(
+        --spectrum-alias-label-text-color
+    );
+    --spectrum-alias-tabitem-text-color-hover: var(
+        --spectrum-alias-text-color-hover
+    );
+    --spectrum-alias-tabitem-text-color-down: var(
+        --spectrum-alias-text-color-down
+    );
+    --spectrum-alias-tabitem-text-color-key-focus: var(
+        --spectrum-alias-text-color-hover
+    );
+    --spectrum-alias-tabitem-text-color-mouse-focus: var(
+        --spectrum-alias-text-color-hover
+    );
+    --spectrum-alias-tabitem-text-color: var(
+        --spectrum-alias-tabitem-text-color-default
+    );
+    --spectrum-alias-tabitem-text-color-selected-default: var(
+        --spectrum-global-color-gray-900
+    );
+    --spectrum-alias-tabitem-text-color-selected-hover: var(
+        --spectrum-alias-tabitem-text-color-selected-default
+    );
+    --spectrum-alias-tabitem-text-color-selected-down: var(
+        --spectrum-alias-tabitem-text-color-selected-default
+    );
+    --spectrum-alias-tabitem-text-color-selected-key-focus: var(
+        --spectrum-alias-tabitem-text-color-selected-default
+    );
+    --spectrum-alias-tabitem-text-color-selected-mouse-focus: var(
+        --spectrum-alias-tabitem-text-color-selected-default
+    );
+    --spectrum-alias-tabitem-text-color-selected: var(
+        --spectrum-alias-tabitem-text-color-selected-default
+    );
+    --spectrum-alias-tabitem-text-color-emphasized: var(
+        --spectrum-alias-tabitem-text-color-default
+    );
+    --spectrum-alias-tabitem-text-color-emphasized-selected-default: var(
+        --spectrum-global-color-static-blue-500
+    );
+    --spectrum-alias-tabitem-text-color-emphasized-selected-hover: var(
+        --spectrum-alias-tabitem-text-color-emphasized-selected-default
+    );
+    --spectrum-alias-tabitem-text-color-emphasized-selected-down: var(
+        --spectrum-alias-tabitem-text-color-emphasized-selected-default
+    );
+    --spectrum-alias-tabitem-text-color-emphasized-selected-key-focus: var(
+        --spectrum-alias-tabitem-text-color-emphasized-selected-default
+    );
+    --spectrum-alias-tabitem-text-color-emphasized-selected-mouse-focus: var(
+        --spectrum-alias-tabitem-text-color-emphasized-selected-default
+    );
+    --spectrum-alias-tabitem-text-color-emphasized-selected: var(
+        --spectrum-alias-tabitem-text-color-emphasized-selected-default
+    );
+    --spectrum-alias-tabitem-selection-indicator-color-default: var(
+        --spectrum-alias-tabitem-text-color-selected-default
+    );
+    --spectrum-alias-tabitem-selection-indicator-color-emphasized: var(
+        --spectrum-alias-tabitem-text-color-emphasized-selected-default
+    );
+    --spectrum-alias-tabitem-icon-color-disabled: var(
+        --spectrum-alias-text-color-disabled
+    );
+    --spectrum-alias-tabitem-icon-color-default: var(
+        --spectrum-alias-icon-color
+    );
+    --spectrum-alias-tabitem-icon-color-hover: var(
+        --spectrum-alias-icon-color-hover
+    );
+    --spectrum-alias-tabitem-icon-color-down: var(
+        --spectrum-alias-icon-color-down
+    );
+    --spectrum-alias-tabitem-icon-color-key-focus: var(
+        --spectrum-alias-icon-color-hover
+    );
+    --spectrum-alias-tabitem-icon-color-mouse-focus: var(
+        --spectrum-alias-icon-color-down
+    );
+    --spectrum-alias-tabitem-icon-color: var(
+        --spectrum-alias-tabitem-icon-color-default
+    );
+    --spectrum-alias-tabitem-icon-color-selected: var(
+        --spectrum-alias-icon-color-selected-neutral
+    );
+    --spectrum-alias-tabitem-icon-color-emphasized: var(
+        --spectrum-alias-tabitem-text-color-default
+    );
+    --spectrum-alias-tabitem-icon-color-emphasized-selected: var(
+        --spectrum-alias-tabitem-text-color-emphasized-selected-default
+    );
     --spectrum-alias-background-color-default: var(
         --spectrum-global-color-gray-100
     );
@@ -2364,6 +2831,36 @@ governing permissions and limitations under the License.
         0.2
     );
     --spectrum-alias-heading-text-color: var(--spectrum-global-color-gray-900);
+    --spectrum-alias-link-primary-text-color-default: var(
+        --spectrum-global-color-blue-600
+    );
+    --spectrum-alias-link-primary-text-color-hover: var(
+        --spectrum-global-color-blue-600
+    );
+    --spectrum-alias-link-primary-text-color-down: var(
+        --spectrum-global-color-blue-700
+    );
+    --spectrum-alias-link-primary-text-color-key-focus: var(
+        --spectrum-alias-text-color-key-focus
+    );
+    --spectrum-alias-link-primary-text-color: var(
+        --spectrum-alias-link-primary-text-color-default
+    );
+    --spectrum-alias-link-secondary-text-color-default: var(
+        --spectrum-alias-link-primary-text-color-default
+    );
+    --spectrum-alias-link-secondary-text-color-hover: var(
+        --spectrum-alias-link-primary-text-color-hover
+    );
+    --spectrum-alias-link-secondary-text-color-down: var(
+        --spectrum-alias-link-primary-text-color-down
+    );
+    --spectrum-alias-link-secondary-text-color-key-focus: var(
+        --spectrum-alias-link-primary-text-color-key-focus
+    );
+    --spectrum-alias-link-secondary-text-color: var(
+        --spectrum-alias-link-secondary-text-color-default
+    );
     --spectrum-alias-border-color: var(--spectrum-global-color-gray-400);
     --spectrum-alias-border-color-hover: var(--spectrum-global-color-gray-500);
     --spectrum-alias-border-color-down: var(--spectrum-global-color-gray-500);