mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Compare commits
2 Commits
ROU-12443
...
ROU-11322-
| Author | SHA1 | Date | |
|---|---|---|---|
|
960c3b62ae | ||
|
|
703f765482 |
8
core/src/components.d.ts
vendored
8
core/src/components.d.ts
vendored
@@ -553,6 +553,10 @@ export namespace Components {
|
||||
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
"href": string | undefined;
|
||||
/**
|
||||
* Set to `"bold"` for a button with vibrant, bold colors or to `"subtle"` for a button with muted, subtle colors.
|
||||
*/
|
||||
"hue"?: 'bold' | 'subtle';
|
||||
/**
|
||||
* The mode determines the platform behaviors of the component.
|
||||
*/
|
||||
@@ -5916,6 +5920,10 @@ declare namespace LocalJSX {
|
||||
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
|
||||
*/
|
||||
"href"?: string | undefined;
|
||||
/**
|
||||
* Set to `"bold"` for a button with vibrant, bold colors or to `"subtle"` for a button with muted, subtle colors.
|
||||
*/
|
||||
"hue"?: 'bold' | 'subtle';
|
||||
/**
|
||||
* The mode determines the platform behaviors of the component.
|
||||
*/
|
||||
|
||||
@@ -52,6 +52,12 @@
|
||||
--ripple-color: var(--background-activated);
|
||||
}
|
||||
|
||||
:host(.button-solid.button-subtle) {
|
||||
--background: #{globals.ion-color(primary, base, $subtle: true)};
|
||||
--background-activated: #{globals.ion-color(primary, shade, $subtle: true)};
|
||||
--color: #{globals.ion-color(primary, contrast, $subtle: true)};
|
||||
}
|
||||
|
||||
// Outline Button
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -81,6 +87,19 @@
|
||||
// Ripple Effect
|
||||
// -------------------------------------------------------------------------------
|
||||
|
||||
:host(.button-solid.button-subtle.ion-color) .button-native {
|
||||
background: globals.current-color(base, $subtle: true);
|
||||
color: globals.current-color(contrast, $subtle: true);
|
||||
}
|
||||
|
||||
:host(.button-solid.button-subtle.ion-color.ion-activated) .button-native::after {
|
||||
background: globals.current-color(shade, $subtle: true);
|
||||
}
|
||||
|
||||
:host(.button-solid.button-subtle.ion-color.ion-focused) .button-native::after {
|
||||
background: globals.current-color(tint, $subtle: true);
|
||||
}
|
||||
|
||||
:host(.button-solid.ion-color) ion-ripple-effect {
|
||||
color: globals.current-color(shade);
|
||||
}
|
||||
|
||||
@@ -75,6 +75,12 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
*/
|
||||
@Prop({ reflect: true }) expand?: 'full' | 'block';
|
||||
|
||||
/**
|
||||
* Set to `"bold"` for a button with vibrant, bold colors or to `"subtle"` for
|
||||
* a button with muted, subtle colors.
|
||||
*/
|
||||
@Prop() hue?: 'bold' | 'subtle' = 'bold';
|
||||
|
||||
/**
|
||||
* Set to `"clear"` for a transparent button that resembles a flat button, to `"outline"`
|
||||
* for a transparent button with a border, or to `"solid"` for a button with a filled background.
|
||||
@@ -349,8 +355,20 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
};
|
||||
|
||||
render() {
|
||||
const { buttonType, type, disabled, rel, target, href, color, expand, hasIconOnly, strong, inheritedAttributes } =
|
||||
this;
|
||||
const {
|
||||
buttonType,
|
||||
type,
|
||||
disabled,
|
||||
rel,
|
||||
target,
|
||||
href,
|
||||
color,
|
||||
expand,
|
||||
hue,
|
||||
hasIconOnly,
|
||||
strong,
|
||||
inheritedAttributes,
|
||||
} = this;
|
||||
|
||||
const theme = getIonTheme(this);
|
||||
const mode = getIonMode(this);
|
||||
@@ -394,6 +412,7 @@ export class Button implements ComponentInterface, AnchorInterface, ButtonInterf
|
||||
[theme]: true,
|
||||
[buttonType]: true,
|
||||
[`${buttonType}-${expand}`]: expand !== undefined,
|
||||
[`${buttonType}-${hue}`]: hue !== undefined,
|
||||
[`${buttonType}-${size}`]: size !== undefined,
|
||||
[`${buttonType}-${shape}`]: true,
|
||||
[`${buttonType}-${fill}`]: true,
|
||||
|
||||
@@ -12,6 +12,17 @@
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
|
||||
<style>
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
|
||||
}
|
||||
|
||||
ion-button {
|
||||
margin: 8px 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
@@ -23,108 +34,136 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding ion-text-center" id="content" no-bounce>
|
||||
<p>
|
||||
<ion-button id="default">Default</ion-button>
|
||||
<ion-button class="ion-focused">Default.focused</ion-button>
|
||||
<ion-button class="ion-activated">Default.activated</ion-button>
|
||||
</p>
|
||||
<div class="container">
|
||||
<div class="item">
|
||||
<h2>Bold (default) Buttons</h2>
|
||||
|
||||
<p>
|
||||
<ion-button color="primary">Primary</ion-button>
|
||||
<ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button id="default">Default</ion-button>
|
||||
<ion-button class="ion-focused">Default.focused</ion-button>
|
||||
<ion-button class="ion-activated">Default.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="secondary">Secondary</ion-button>
|
||||
<ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button color="primary">Primary</ion-button>
|
||||
<ion-button class="ion-focused" color="primary">Primary.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="primary">Primary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="tertiary">Tertiary</ion-button>
|
||||
<ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button color="secondary">Secondary</ion-button>
|
||||
<ion-button class="ion-focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="success">Success</ion-button>
|
||||
<ion-button class="ion-focused" color="success">Success.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button color="tertiary">Tertiary</ion-button>
|
||||
<ion-button class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="warning">Warning</ion-button>
|
||||
<ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button color="success">Success</ion-button>
|
||||
<ion-button class="ion-focused" color="success">Success.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="success">Success.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="danger">Danger</ion-button>
|
||||
<ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button color="warning">Warning</ion-button>
|
||||
<ion-button class="ion-focused" color="warning">Warning.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="warning">Warning.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="light">Light</ion-button>
|
||||
<ion-button class="ion-focused" color="light">Light.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button color="danger">Danger</ion-button>
|
||||
<ion-button class="ion-focused" color="danger">Danger.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="danger">Danger.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="medium">Medium</ion-button>
|
||||
<ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button color="light">Light</ion-button>
|
||||
<ion-button class="ion-focused" color="light">Light.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="light">Light.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button color="dark">Dark</ion-button>
|
||||
<ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button color="medium">Medium</ion-button>
|
||||
<ion-button class="ion-focused" color="medium">Medium.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="medium">Medium.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button style="--opacity: 0.2">Opacity: 0.2</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button color="dark">Dark</ion-button>
|
||||
<ion-button class="ion-focused" color="dark">Dark.focused</ion-button>
|
||||
<ion-button class="ion-activated" color="dark">Dark.activated</ion-button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
<ion-button expand="block" id="disabledButton" disabled>Button Disabled</ion-button>
|
||||
<ion-button expand="block" color="secondary" disabled>Secondary Disabled</ion-button>
|
||||
<ion-button expand="block" color="tertiary" style="--opacity: 1" disabled>Disabled opacity: 1</ion-button>
|
||||
</p>
|
||||
<div class="item">
|
||||
<h2>Subtle Buttons</h2>
|
||||
|
||||
<p>
|
||||
<ion-button expand="block" onclick="toggleDisabled()">Toggle Disabled</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button hue="subtle" id="default">Default</ion-button>
|
||||
<ion-button hue="subtle" class="ion-focused">Default.focused</ion-button>
|
||||
<ion-button hue="subtle" class="ion-activated">Default.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button id="dynamicColor1" onclick="changeColor(event)">Change Color</ion-button>
|
||||
<ion-button id="dynamicColor2" onclick="changeColor(event)" fill="outline">Change Color</ion-button>
|
||||
</p>
|
||||
<p>
|
||||
<ion-button hue="subtle" color="primary">Primary</ion-button>
|
||||
<ion-button hue="subtle" color="primary" class="ion-focused">Primary.focused</ion-button>
|
||||
<ion-button hue="subtle" color="primary" class="ion-activated">Primary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button hue="subtle" color="secondary">Secondary</ion-button>
|
||||
<ion-button hue="subtle" class="ion-focused" color="secondary">Secondary.focused</ion-button>
|
||||
<ion-button hue="subtle" class="ion-activated" color="secondary">Secondary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button hue="subtle" color="tertiary">Tertiary</ion-button>
|
||||
<ion-button hue="subtle" class="ion-focused" color="tertiary">Tertiary.focused</ion-button>
|
||||
<ion-button hue="subtle" class="ion-activated" color="tertiary">Tertiary.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button hue="subtle" color="success">Success</ion-button>
|
||||
<ion-button hue="subtle" color="success" class="ion-focused">Success.focused</ion-button>
|
||||
<ion-button hue="subtle" color="success" class="ion-activated">Success.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button hue="subtle" color="warning">Warning</ion-button>
|
||||
<ion-button hue="subtle" color="warning" class="ion-focused">Warning.focused</ion-button>
|
||||
<ion-button hue="subtle" color="warning" class="ion-activated">Warning.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button hue="subtle" color="danger">Danger</ion-button>
|
||||
<ion-button hue="subtle" color="danger" class="ion-focused">Danger.focused</ion-button>
|
||||
<ion-button hue="subtle" color="danger" class="ion-activated">Danger.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button hue="subtle" color="light">Light</ion-button>
|
||||
<ion-button hue="subtle" color="light" class="ion-focused">Light.focused</ion-button>
|
||||
<ion-button hue="subtle" color="light" class="ion-activated">Light.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button hue="subtle" color="medium">Medium</ion-button>
|
||||
<ion-button hue="subtle" color="medium" class="ion-focused">Medium.focused</ion-button>
|
||||
<ion-button hue="subtle" color="medium" class="ion-activated">Medium.activated</ion-button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<ion-button hue="subtle" color="dark">Dark</ion-button>
|
||||
<ion-button hue="subtle" color="dark" class="ion-focused">Dark.focused</ion-button>
|
||||
<ion-button hue="subtle" color="dark" class="ion-activated">Dark.activated</ion-button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
testingColors = ['primary', 'secondary', 'danger', 'dark'];
|
||||
testingColorIndex = {
|
||||
dynamicColor1: 0,
|
||||
dynamicColor2: 0,
|
||||
};
|
||||
|
||||
function changeColor(ev) {
|
||||
el = ev.currentTarget;
|
||||
|
||||
testingColorIndex[el.id] =
|
||||
testingColorIndex[el.id] >= testingColors.length - 1 ? 0 : testingColorIndex[el.id] + 1;
|
||||
newColor = testingColors[testingColorIndex[el.id]];
|
||||
|
||||
el.color = newColor;
|
||||
}
|
||||
|
||||
function toggleDisabled() {
|
||||
var buttonEl = document.getElementById('disabledButton');
|
||||
buttonEl.disabled = !buttonEl.disabled;
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -10,11 +10,13 @@
|
||||
// current-color(base) => var(--ion-color-base)
|
||||
// current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function current-color($variation, $alpha: null) {
|
||||
@function current-color($variation, $alpha: null, $subtle: false) {
|
||||
$variable: if($subtle, "--ion-color-subtle-#{$variation}", "--ion-color-#{$variation}");
|
||||
|
||||
@if $alpha == null {
|
||||
@return var(--ion-color-#{$variation});
|
||||
@return var(#{$variable});
|
||||
} @else {
|
||||
@return rgba(var(--ion-color-#{$variation}-rgb), #{$alpha});
|
||||
@return rgba(var(#{$variable}-rgb), $alpha);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,17 +27,25 @@
|
||||
// ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
|
||||
// ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
|
||||
// --------------------------------------------------------------------------------------------
|
||||
@function ion-color($name, $variation, $alpha: null, $rgb: null) {
|
||||
@function ion-color($name, $variation, $alpha: null, $rgb: null, $subtle: false) {
|
||||
@if not($theme-colors) {
|
||||
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
|
||||
}
|
||||
|
||||
$values: map-get($theme-colors, $name);
|
||||
$value: map-get($values, $variation);
|
||||
$variable: --ion-color-#{$name}-#{$variation};
|
||||
$values: map-get($values, if($subtle, subtle, bold));
|
||||
|
||||
$value: map-get($values, $variation);
|
||||
|
||||
// If the color requested is subtle we return `--ion-color-primary-subtle-contrast`
|
||||
// Otherwise we return `--ion-color-primary-contrast`
|
||||
$variable: if($subtle, "--ion-color-#{$name}-subtle-#{$variation}", "--ion-color-#{$name}-#{$variation}");
|
||||
|
||||
// If the variation being used is base, we do not include the variant so
|
||||
// If the color requested is subtle we return `--ion-color-primary-subtle`
|
||||
// Otherwise we return `--ion-color-primary`
|
||||
@if ($variation == base) {
|
||||
$variable: --ion-color-#{$name};
|
||||
$variable: if($subtle, "--ion-color-#{$name}-subtle", "--ion-color-#{$name}");
|
||||
}
|
||||
|
||||
@if ($alpha) {
|
||||
@@ -87,19 +97,41 @@
|
||||
@error 'No theme colors set. Please make sure to call set-theme-colors($colorsMap) before using ion-color()';
|
||||
}
|
||||
|
||||
$value: map-get($theme-colors, $color-name);
|
||||
$colors: map-get($theme-colors, $color-name);
|
||||
$bold-colors: map-get($colors, bold);
|
||||
|
||||
$base: map-get($value, base);
|
||||
$contrast: map-get($value, contrast);
|
||||
$shade: map-get($value, shade);
|
||||
$tint: map-get($value, tint);
|
||||
// Grab the bold color variants
|
||||
$base: map-get($bold-colors, base);
|
||||
$contrast: map-get($bold-colors, contrast);
|
||||
$shade: map-get($bold-colors, shade);
|
||||
$tint: map-get($bold-colors, tint);
|
||||
|
||||
// Generate default (bold) color variables
|
||||
--ion-color-base: var(--ion-color-#{$color-name}, #{$base}) !important;
|
||||
--ion-color-base-rgb: var(--ion-color-#{$color-name}-rgb, #{color-to-rgb-list($base)}) !important;
|
||||
--ion-color-contrast: var(--ion-color-#{$color-name}-contrast, #{$contrast}) !important;
|
||||
--ion-color-contrast-rgb: var(--ion-color-#{$color-name}-contrast-rgb, #{color-to-rgb-list($contrast)}) !important;
|
||||
--ion-color-shade: var(--ion-color-#{$color-name}-shade, #{$shade}) !important;
|
||||
--ion-color-tint: var(--ion-color-#{$color-name}-tint, #{$tint}) !important;
|
||||
|
||||
// Grab the subtle colors map if it exists
|
||||
$subtle-colors: map-get($colors, subtle);
|
||||
|
||||
// Grab the subtle color variants
|
||||
@if $subtle-colors != null {
|
||||
$base: map-get($subtle-colors, base);
|
||||
$contrast: map-get($subtle-colors, contrast);
|
||||
$shade: map-get($subtle-colors, shade);
|
||||
$tint: map-get($subtle-colors, tint);
|
||||
}
|
||||
|
||||
// Generate subtle color variables
|
||||
@if $subtle-colors != null {
|
||||
--ion-color-subtle-base: var(--ion-color-#{$color-name}-subtle, #{$base}) !important;
|
||||
--ion-color-subtle-contrast: var(--ion-color-#{$color-name}-subtle-contrast, #{$contrast}) !important;
|
||||
--ion-color-subtle-shade: var(--ion-color-#{$color-name}-subtle-shade, #{$shade}) !important;
|
||||
--ion-color-subtle-tint: var(--ion-color-#{$color-name}-subtle-tint, #{$tint}) !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Generates the CSS variables for each color
|
||||
@@ -111,11 +143,22 @@
|
||||
}
|
||||
|
||||
@each $color-name, $value in $theme-colors {
|
||||
--ion-color-#{$color-name}: #{map-get($value, base)};
|
||||
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map-get($value, base))};
|
||||
--ion-color-#{$color-name}-contrast: #{map-get($value, contrast)};
|
||||
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map-get($value, contrast))};
|
||||
--ion-color-#{$color-name}-shade: #{map-get($value, shade)};
|
||||
--ion-color-#{$color-name}-tint: #{map-get($value, tint)};
|
||||
$bold-colors: map-get($value, bold);
|
||||
@if $bold-colors != null {
|
||||
--ion-color-#{$color-name}: #{map-get($bold-colors, base)};
|
||||
--ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map-get($bold-colors, base))};
|
||||
--ion-color-#{$color-name}-contrast: #{map-get($bold-colors, contrast)};
|
||||
--ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map-get($bold-colors, contrast))};
|
||||
--ion-color-#{$color-name}-shade: #{map-get($bold-colors, shade)};
|
||||
--ion-color-#{$color-name}-tint: #{map-get($bold-colors, tint)};
|
||||
}
|
||||
|
||||
$subtle-colors: map-get($value, subtle);
|
||||
@if $subtle-colors != null {
|
||||
--ion-color-#{$color-name}-subtle: #{map-get($subtle-colors, base)};
|
||||
--ion-color-#{$color-name}-subtle-contrast: #{map-get($subtle-colors, contrast)};
|
||||
--ion-color-#{$color-name}-subtle-shade: #{map-get($subtle-colors, shade)};
|
||||
--ion-color-#{$color-name}-subtle-tint: #{map-get($subtle-colors, tint)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -17,77 +17,132 @@
|
||||
|
||||
// TODO(ROU-10778, ROU-10875): Sync the color names to the design system of
|
||||
// ios and md. This will allow us to have a single color map.
|
||||
$primary: #105cef;
|
||||
$secondary: initial;
|
||||
$tertiary: initial;
|
||||
$success: #1fbd3b;
|
||||
$warning: #e18300;
|
||||
$danger: #bf2222;
|
||||
$light: #f2f4fd;
|
||||
$medium: initial;
|
||||
$neutral: #626262;
|
||||
$dark: initial;
|
||||
|
||||
$ionic-colors: (
|
||||
primary: (
|
||||
base: $primary,
|
||||
contrast: #fff,
|
||||
shade: color.get-color-shade($primary),
|
||||
tint: color.get-color-tint($primary),
|
||||
bold: (
|
||||
base: globals.$ion-semantics-primary-base,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-semantics-primary-800,
|
||||
tint: globals.$ion-semantics-primary-500,
|
||||
),
|
||||
subtle: (
|
||||
base: globals.$ion-semantics-primary-100,
|
||||
contrast: globals.$ion-semantics-primary-base,
|
||||
shade: globals.$ion-semantics-primary-300,
|
||||
tint: globals.$ion-semantics-primary-200,
|
||||
),
|
||||
),
|
||||
secondary: (
|
||||
base: $secondary,
|
||||
contrast: $secondary,
|
||||
shade: color.get-color-shade($secondary),
|
||||
tint: color.get-color-tint($secondary),
|
||||
bold: (
|
||||
base: globals.$ion-semantics-info-base,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-semantics-info-800,
|
||||
tint: globals.$ion-semantics-info-500,
|
||||
),
|
||||
subtle: (
|
||||
base: globals.$ion-semantics-info-100,
|
||||
contrast: globals.$ion-semantics-info-base,
|
||||
shade: globals.$ion-semantics-info-300,
|
||||
tint: globals.$ion-semantics-info-200,
|
||||
),
|
||||
),
|
||||
tertiary: (
|
||||
base: $tertiary,
|
||||
contrast: $tertiary,
|
||||
shade: color.get-color-shade($tertiary),
|
||||
tint: color.get-color-tint($tertiary),
|
||||
bold: (
|
||||
base: globals.$ion-primitives-violet-700,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-primitives-violet-800,
|
||||
tint: globals.$ion-primitives-violet-500,
|
||||
),
|
||||
subtle: (
|
||||
base: globals.$ion-primitives-violet-100,
|
||||
contrast: globals.$ion-primitives-violet-700,
|
||||
shade: globals.$ion-primitives-violet-300,
|
||||
tint: globals.$ion-primitives-violet-200,
|
||||
),
|
||||
),
|
||||
success: (
|
||||
base: $success,
|
||||
contrast: #000,
|
||||
shade: color.get-color-shade($success),
|
||||
tint: color.get-color-tint($success),
|
||||
bold: (
|
||||
base: globals.$ion-semantics-success-base,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-semantics-success-800,
|
||||
tint: globals.$ion-semantics-success-500,
|
||||
),
|
||||
subtle: (
|
||||
base: globals.$ion-semantics-success-100,
|
||||
contrast: globals.$ion-semantics-success-base,
|
||||
shade: globals.$ion-semantics-success-300,
|
||||
tint: globals.$ion-semantics-success-200,
|
||||
),
|
||||
),
|
||||
warning: (
|
||||
base: $warning,
|
||||
contrast: #000,
|
||||
shade: color.get-color-shade($warning),
|
||||
tint: color.get-color-tint($warning),
|
||||
bold: (
|
||||
base: globals.$ion-semantics-warning-base,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-semantics-warning-800,
|
||||
tint: globals.$ion-semantics-warning-500,
|
||||
),
|
||||
subtle: (
|
||||
base: globals.$ion-semantics-warning-100,
|
||||
contrast: globals.$ion-semantics-warning-base,
|
||||
shade: globals.$ion-semantics-warning-300,
|
||||
tint: globals.$ion-semantics-warning-200,
|
||||
),
|
||||
),
|
||||
danger: (
|
||||
base: $danger,
|
||||
contrast: #fff,
|
||||
shade: color.get-color-shade($danger),
|
||||
tint: color.get-color-tint($danger),
|
||||
bold: (
|
||||
base: globals.$ion-semantics-danger-base,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-semantics-danger-800,
|
||||
tint: globals.$ion-semantics-danger-500,
|
||||
),
|
||||
subtle: (
|
||||
base: globals.$ion-semantics-danger-100,
|
||||
contrast: globals.$ion-semantics-danger-base,
|
||||
shade: globals.$ion-semantics-danger-300,
|
||||
tint: globals.$ion-semantics-danger-200,
|
||||
),
|
||||
),
|
||||
light: (
|
||||
base: $light,
|
||||
contrast: #000,
|
||||
shade: color.get-color-shade($light),
|
||||
tint: color.get-color-tint($light),
|
||||
bold: (
|
||||
base: globals.$ion-primitives-neutral-200,
|
||||
contrast: globals.$ion-primitives-base-black,
|
||||
shade: globals.$ion-primitives-neutral-300,
|
||||
tint: globals.$ion-primitives-neutral-100,
|
||||
),
|
||||
subtle: (
|
||||
base: globals.$ion-primitives-neutral-100,
|
||||
contrast: globals.$ion-primitives-neutral-700,
|
||||
shade: globals.$ion-primitives-neutral-300,
|
||||
tint: globals.$ion-primitives-neutral-200,
|
||||
),
|
||||
),
|
||||
medium: (
|
||||
base: $medium,
|
||||
contrast: $medium,
|
||||
shade: color.get-color-shade($medium),
|
||||
tint: color.get-color-tint($medium),
|
||||
),
|
||||
neutral: (
|
||||
base: $neutral,
|
||||
contrast: #fff,
|
||||
shade: color.get-color-shade($neutral),
|
||||
tint: color.get-color-tint($neutral),
|
||||
bold: (
|
||||
base: globals.$ion-primitives-neutral-700,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-primitives-neutral-800,
|
||||
tint: globals.$ion-primitives-neutral-500,
|
||||
),
|
||||
subtle: (
|
||||
base: globals.$ion-primitives-neutral-100,
|
||||
contrast: globals.$ion-primitives-neutral-700,
|
||||
shade: globals.$ion-primitives-neutral-300,
|
||||
tint: globals.$ion-primitives-neutral-200,
|
||||
),
|
||||
),
|
||||
dark: (
|
||||
base: $dark,
|
||||
contrast: $dark,
|
||||
shade: color.get-color-shade($dark),
|
||||
tint: color.get-color-tint($dark),
|
||||
bold: (
|
||||
base: globals.$ion-primitives-neutral-1100,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-primitives-neutral-1200,
|
||||
tint: globals.$ion-primitives-neutral-900,
|
||||
),
|
||||
subtle: (
|
||||
base: globals.$ion-primitives-neutral-100,
|
||||
contrast: globals.$ion-primitives-neutral-1100,
|
||||
shade: globals.$ion-primitives-neutral-300,
|
||||
tint: globals.$ion-primitives-neutral-200,
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
@@ -24,58 +24,76 @@ $dark: #222428;
|
||||
|
||||
$colors: (
|
||||
primary: (
|
||||
base: $primary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($primary),
|
||||
tint: get-color-tint($primary),
|
||||
bold: (
|
||||
base: $primary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($primary),
|
||||
tint: get-color-tint($primary),
|
||||
),
|
||||
),
|
||||
secondary: (
|
||||
base: $secondary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($secondary),
|
||||
tint: get-color-tint($secondary),
|
||||
bold: (
|
||||
base: $secondary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($secondary),
|
||||
tint: get-color-tint($secondary),
|
||||
),
|
||||
),
|
||||
tertiary: (
|
||||
base: $tertiary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($tertiary),
|
||||
tint: get-color-tint($tertiary),
|
||||
bold: (
|
||||
base: $tertiary,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($tertiary),
|
||||
tint: get-color-tint($tertiary),
|
||||
),
|
||||
),
|
||||
success: (
|
||||
base: $success,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($success),
|
||||
tint: get-color-tint($success),
|
||||
bold: (
|
||||
base: $success,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($success),
|
||||
tint: get-color-tint($success),
|
||||
),
|
||||
),
|
||||
warning: (
|
||||
base: $warning,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($warning),
|
||||
tint: get-color-tint($warning),
|
||||
bold: (
|
||||
base: $warning,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($warning),
|
||||
tint: get-color-tint($warning),
|
||||
),
|
||||
),
|
||||
danger: (
|
||||
base: $danger,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($danger),
|
||||
tint: get-color-tint($danger),
|
||||
bold: (
|
||||
base: $danger,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($danger),
|
||||
tint: get-color-tint($danger),
|
||||
),
|
||||
),
|
||||
light: (
|
||||
base: $light,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($light),
|
||||
tint: get-color-tint($light),
|
||||
bold: (
|
||||
base: $light,
|
||||
contrast: #000,
|
||||
shade: get-color-shade($light),
|
||||
tint: get-color-tint($light),
|
||||
),
|
||||
),
|
||||
medium: (
|
||||
base: $medium,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($medium),
|
||||
tint: get-color-tint($medium),
|
||||
bold: (
|
||||
base: $medium,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($medium),
|
||||
tint: get-color-tint($medium),
|
||||
),
|
||||
),
|
||||
dark: (
|
||||
base: $dark,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($dark),
|
||||
tint: get-color-tint($dark),
|
||||
bold: (
|
||||
base: $dark,
|
||||
contrast: #fff,
|
||||
shade: get-color-shade($dark),
|
||||
tint: get-color-tint($dark),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
@@ -345,14 +345,14 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
|
||||
|
||||
|
||||
@ProxyCmp({
|
||||
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'theme', 'type']
|
||||
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'hue', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'theme', 'type']
|
||||
})
|
||||
@Component({
|
||||
selector: 'ion-button',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: '<ng-content></ng-content>',
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
||||
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'theme', 'type'],
|
||||
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'hue', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'theme', 'type'],
|
||||
})
|
||||
export class IonButton {
|
||||
protected el: HTMLElement;
|
||||
|
||||
@@ -439,14 +439,14 @@ export declare interface IonBreadcrumbs extends Components.IonBreadcrumbs {
|
||||
|
||||
@ProxyCmp({
|
||||
defineCustomElementFn: defineIonButton,
|
||||
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'theme', 'type']
|
||||
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'hue', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'theme', 'type']
|
||||
})
|
||||
@Component({
|
||||
selector: 'ion-button',
|
||||
changeDetection: ChangeDetectionStrategy.OnPush,
|
||||
template: '<ng-content></ng-content>',
|
||||
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
|
||||
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'theme', 'type'],
|
||||
inputs: ['buttonType', 'color', 'disabled', 'download', 'expand', 'fill', 'form', 'href', 'hue', 'mode', 'rel', 'routerAnimation', 'routerDirection', 'shape', 'size', 'strong', 'target', 'theme', 'type'],
|
||||
standalone: true
|
||||
})
|
||||
export class IonButton {
|
||||
|
||||
@@ -162,6 +162,7 @@ export const IonButton = /*@__PURE__*/ defineContainer<JSX.IonButton>('ion-butto
|
||||
'buttonType',
|
||||
'disabled',
|
||||
'expand',
|
||||
'hue',
|
||||
'fill',
|
||||
'routerDirection',
|
||||
'routerAnimation',
|
||||
|
||||
Reference in New Issue
Block a user