javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' into chore-update-next-from-main

Browse Source
This commit is contained in:
Brandy Carney
2024-05-02 16:43:54 -04:00
parent 1116cdd44a 0124f3b0b3
commit 8b834387d4
876 changed files with 4034 additions and 2766 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
core/src/css/core.scss
View File

@ -392,6 +392,23 @@ ion-input input::-webkit-date-and-time-value {
}
/**
* When moving focus on page transitions we call .focus() on an element which can
* add an undesired outline ring. This CSS removes the outline ring.
* We also remove the outline ring from elements that are actively being focused
* by the focus manager. We are intentionally selective about which elements this
* applies to so we do not accidentally override outlines set by the developer.
*/
[ion-last-focus],
header[tabindex="-1"]:focus,
[role="banner"][tabindex="-1"]:focus,
main[tabindex="-1"]:focus,
[role="main"][tabindex="-1"]:focus,
h1[tabindex="-1"]:focus,
[role="heading"][aria-level="1"][tabindex="-1"]:focus {
outline: none;
}
/*
* If a popover has a child ion-content (or class equivalent) then the .popover-viewport element
* should not be scrollable to ensure the inner content does scroll. However, if the popover
* does not have a child ion-content (or class equivalent) then the .popover-viewport element

1
core/src/css/palettes/dark.scss
View File

@ -142,7 +142,6 @@ $colors: (
--ion-background-color-rgb: 18, 18, 18;
--ion-text-color: #ffffff;
--ion-text-color-rgb: 255, 255, 255;
--ion-border-color: #222222;
--ion-background-color-step-50: #1e1e1e;
--ion-background-color-step-100: #2a2a2a;
--ion-background-color-step-150: #363636;

20
core/src/css/palettes/high-contrast-dark.scss
View File

@ -1,15 +1,15 @@
@use "sass:map";
@import "../../themes/functions.color";
$primary: #7cabff !default;
$secondary: #62bdff !default;
$tertiary: #b6b9f9 !default;
$success: #4ada71 !default;
$warning: #ffce31 !default;
$danger: #fc9aa2 !default;
$light: #222428 !default;
$medium: #a8aab3 !default;
$dark: #f4f5f8 !default;
$primary: #7cabff;
$secondary: #62bdff;
$tertiary: #b6b9f9;
$success: #4ada71;
$warning: #ffce31;
$danger: #fc9aa2;
$light: #222428;
$medium: #a8aab3;
$dark: #f4f5f8;
$colors: (
primary: (
@ -66,7 +66,7 @@ $colors: (
shade: get-color-shade($dark),
tint: get-color-tint($dark),
),
) !default;
);
/// Text step colors are generated based on
/// how dark or light text can be. The darkest

20
core/src/css/palettes/high-contrast.scss
View File

@ -1,15 +1,15 @@
@use "sass:map";
@import "../../themes/functions.color";
$primary: #003fae !default;
$secondary: #01487b !default;
$tertiary: #3400e6 !default;
$success: #004314 !default;
$warning: #5f4100 !default;
$danger: #9c000c !default;
$light: #f4f5f8 !default;
$medium: #444446 !default;
$dark: #222428 !default;
$primary: #003fae;
$secondary: #01487b;
$tertiary: #3400e6;
$success: #004314;
$warning: #5f4100;
$danger: #9c000c;
$light: #f4f5f8;
$medium: #444446;
$dark: #222428;
$colors: (
primary: (
@ -66,7 +66,7 @@ $colors: (
shade: get-color-shade($dark),
tint: get-color-tint($dark),
),
) !default;
);
/// Text step colors are generated based on
/// how dark or light text can be. The darkest

16
core/src/css/typography.scss
View File

@ -5,28 +5,28 @@
// --------------------------------------------------
/// @prop - Font weight of all headings
$headings-font-weight: 500 !default;
$headings-font-weight: 500;
/// @prop - Line height of all headings
$headings-line-height: 1.2 !default;
$headings-line-height: 1.2;
/// @prop - Font size of heading level 1
$h1-font-size: dynamic-font(26px) !default;
$h1-font-size: dynamic-font(26px);
/// @prop - Font size of heading level 2
$h2-font-size: dynamic-font(24px) !default;
$h2-font-size: dynamic-font(24px);
/// @prop - Font size of heading level 3
$h3-font-size: dynamic-font(22px) !default;
$h3-font-size: dynamic-font(22px);
/// @prop - Font size of heading level 4
$h4-font-size: dynamic-font(20px) !default;
$h4-font-size: dynamic-font(20px);
/// @prop - Font size of heading level 5
$h5-font-size: dynamic-font(18px) !default;
$h5-font-size: dynamic-font(18px);
/// @prop - Font size of heading level 6
$h6-font-size: dynamic-font(16px) !default;
$h6-font-size: dynamic-font(16px);
html {
font-family: var(--ion-font-family);