mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
feat(theming): add support for bold and subtle as maps
This commit is contained in:
Brandy Carney
@@ -53,8 +53,9 @@
|
||||
}
|
||||
|
||||
:host(.button-solid.button-subtle) {
|
||||
--background: #{globals.ion-color(primary, subtle)};
|
||||
--color: #{globals.ion-color(primary, base)};
|
||||
--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
|
||||
@@ -87,8 +88,16 @@
|
||||
// -------------------------------------------------------------------------------
|
||||
|
||||
:host(.button-solid.button-subtle.ion-color) .button-native {
|
||||
background: globals.current-color(subtle);
|
||||
color: globals.current-color(base);
|
||||
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 {
|
||||
|
||||
@@ -14,6 +14,11 @@
|
||||
<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;
|
||||
}
|
||||
@@ -29,129 +34,135 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-content class="ion-padding ion-text-center" id="content" no-bounce>
|
||||
<h2>Bold (default) Buttons</h2>
|
||||
<div class="container">
|
||||
<div class="item">
|
||||
<h2>Bold (default) Buttons</h2>
|
||||
|
||||
<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 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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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>
|
||||
|
||||
<h2>Subtle Buttons</h2>
|
||||
<div class="item">
|
||||
<h2>Subtle Buttons</h2>
|
||||
|
||||
<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 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 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="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="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="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="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="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="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="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="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>
|
||||
<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>
|
||||
</body>
|
||||
|
||||
@@ -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,21 +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);
|
||||
$subtle: map-get($value, subtle);
|
||||
// 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;
|
||||
--ion-color-subtle: var(--ion-color-#{$color-name}-subtle, #{$subtle}) !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
|
||||
@@ -113,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)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,67 +19,130 @@
|
||||
// ios and md. This will allow us to have a single color map.
|
||||
$ionic-colors: (
|
||||
primary: (
|
||||
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: globals.$ion-semantics-primary-100,
|
||||
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: globals.$ion-semantics-info-base,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-semantics-info-800,
|
||||
tint: globals.$ion-semantics-info-500,
|
||||
subtle: globals.$ion-semantics-info-100,
|
||||
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: globals.$ion-primitives-violet-700,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-primitives-violet-800,
|
||||
tint: globals.$ion-primitives-violet-500,
|
||||
subtle: globals.$ion-primitives-violet-100,
|
||||
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: globals.$ion-semantics-success-base,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-semantics-success-800,
|
||||
tint: globals.$ion-semantics-success-500,
|
||||
subtle: globals.$ion-semantics-success-100,
|
||||
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: globals.$ion-semantics-warning-base,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-semantics-warning-800,
|
||||
tint: globals.$ion-semantics-warning-500,
|
||||
subtle: globals.$ion-semantics-warning-100,
|
||||
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: globals.$ion-semantics-danger-base,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-semantics-danger-800,
|
||||
tint: globals.$ion-semantics-danger-500,
|
||||
subtle: globals.$ion-semantics-danger-100,
|
||||
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: globals.$ion-primitives-neutral-200,
|
||||
contrast: globals.$ion-primitives-base-black,
|
||||
shade: globals.$ion-primitives-neutral-300,
|
||||
tint: globals.$ion-primitives-neutral-100,
|
||||
subtle: globals.$ion-primitives-neutral-100,
|
||||
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: globals.$ion-primitives-neutral-700,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-primitives-neutral-800,
|
||||
tint: globals.$ion-primitives-neutral-500,
|
||||
subtle: globals.$ion-primitives-neutral-100,
|
||||
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: globals.$ion-primitives-neutral-1100,
|
||||
contrast: globals.$ion-primitives-base-white,
|
||||
shade: globals.$ion-primitives-neutral-1200,
|
||||
tint: globals.$ion-primitives-neutral-900,
|
||||
subtle: globals.$ion-primitives-neutral-100,
|
||||
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),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user