mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
feat!: initial pre-release - Carbon v11 styles (#1881)
**carbon-components-svelte has unstable styles and interactions during this pre-release phase. See #1872 for details.**
Breaking changes
- Overall, this is a major style change the will impact the appearance and features of many components. Use caution when upgrading and test your applications.
Components
- Button has new prop values for size and kind
- Theme follows v11 conventions: g80 theme isn't supported, toggled themes adjust data-carbon-theme attribute in <html> tag (for now, tokens use bx prefix, but that may change)
- Tabs has a contained prop instead of type, and a new mobile appearance (scrolling tabs)
- ContentSwitcher size prop no longer supports size="xl"; md is the new default
- MultiSelect no longer supports xl size
- OverflowMenu no longer supports xl size
- Search no longer supports xl size
- TreeView no longer supports compact size
- UIShell has a new light theme
CSS
- Several class names have been changed due to the v11 overhaul. If you're targeting or overriding component classes, be sure to test your code
- Many tokens and CSS variables have been renamed. Details: https://carbondesignsystem.com/migrating/guide/develop
- Themes are applied to the <html> element as data-carbon-theme="g10" instead of theme="g10"
- The g80 theme no longer exists
General
- Codebase uses npm instead of yarn
--- Commit notes
* chore: depend on @carbon/styles instead of carbon-components
See upgrade guide here: https://carbondesignsystem.com/migrating/guide/develop
* chore: use v11 styles for docs
* chore: stick to `bx` instead of `cds` class prefix
* chore: migrate layout spacing to v11
See [@carbon/layout](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#carbonlayout) migration guide:
$layout-01 Removed, use $spacing-05 instead
$layout-02 Removed, use $spacing-06 instead
$layout-03 Removed, use $spacing-07 instead
$layout-04 Removed, use $spacing-09 instead
$layout-05 Removed, use $spacing-10 instead
$layout-06 Removed, use $spacing-12 instead
$layout-07 Removed, use $spacing-13 instead
* chore: migrate type tokens to v11
See https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md#type-tokens
* chore: keep flex-grid instead of css grid for the moment
Upgrading to css-grid should be separate.
* chore: v11 Tabs
In v11 [Tabs](https://carbondesignsystem.com/migrating/guide/design/#tabs-breaking) received some additional modifiers. In this commit we only want to make sure that the Svelte v10 tabs still work using v11 styles. This probably needs additional testing.
* chore: use @ibm/plex fonts
* chore: v11 Button
* dependency: @carbon/styles update
* chore: v11 ComboBox
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 ContentSwitcher
For better compatibility with existing code bases size `xl` is still supported.
* chore: remove legacy v10 css files
Note that further work is needed here in order to make theming work again.
Also documentation needs updating.
* chore: v11 DatePicker
For better compatibility with existing codebases size xl is still supported.
* chore: v11 Dropdown
For better compatibility with existing codebases size xl is still supported.
* chore: v11 ExpandableTile
Note that state labels `tileCollapsedLabel` and `tileExpandedLabel` are no longer supported.
* chore: v11 FileUploader
For better compatibility with existing codebases sizes `field` and `small` are still supported. Note that flagship implementation does the same thing.
* chore: v11 Toggle
This removes legacy `ToggleSkeleton`.
* chore: v11 MultiSelect
Size `xl` changed to `lg`.
* chore: v11 NumberInput
For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 OverflowMenu
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 PasswordInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 Search
* chore: v11 Select
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 AspectRatio
The `bx--aspect-ratio--object` class is gone and needs to be replaced manually.
* chore: v11 TextArea
`cols` no longer has a defaults to 50 but remains at 100% width by default.
* chore: v11 TextInput
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TimePicker
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* chore: v11 TreeView
Size `compact` changed to `xs`. For better compatibility with existing codebases size `compact` is still supported.
* chore: remove Truncate since it does not exist in Carbon v11
* chore: v11 UIShell
* chore: v11 Accordion
Size `xl` changed to `lg`. For better compatibility with existing codebases size `xl` is still supported.
* tmp: v11 PopoverContent
* Revert "chore: remove Truncate since it does not exist in Carbon v11"
This reverts commit 5833536199.
* chore: use truncate mixins
* docs: add truncate mixins
* chore: use `cds` class prefix in v11 styles
* build: switch to npm
* chore: set up all component styles, fonts, and themes
- Adapt documentation to new styles
* chore: add individual theme css
* feat: migrate Theme component to v11
- remove g80 theme option everywhere
- utilize new `data-carbon-theme` attribute when applying theme
- use cds instead of bx in places
* chore: use bx css prefixes for now
* chore: resolve peerDependencies
- Leaving out latest prettier for now
- Ignoring Sveld warnings for now
* chore: fix type errors and tests
---------
Co-authored-by: Gregor Wassmann <gregor.wassmann@gmail.com>
This commit is contained in:
Enrico Sacchetti
Eric Liu
parent
b3a4590872
commit
4dabb827ee
186 changed files with 7886 additions and 5628 deletions
|
|
@ -1,325 +0,0 @@
|
|||
// This file is inlined from `carbon-components@10.47` as
|
||||
// Popover styles were removed since version 10.48.
|
||||
|
||||
//
|
||||
// Copyright IBM Corp. 2016, 2018
|
||||
//
|
||||
// This source code is licensed under the Apache-2.0 license found in the
|
||||
// LICENSE file in the root directory of this source tree.
|
||||
//
|
||||
|
||||
@import 'carbon-components/scss/globals/scss/vars';
|
||||
@import 'carbon-components/scss/globals/scss/helper-mixins';
|
||||
@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
|
||||
|
||||
/// Popover component
|
||||
/// @access private
|
||||
/// @group components
|
||||
@mixin popover {
|
||||
$popover-text-color: $text-01;
|
||||
$popover-caret-offset: 1rem;
|
||||
$popover-offset: 8px;
|
||||
|
||||
.#{$prefix}--popover {
|
||||
// Specify the distance between the popover and the trigger. This value must
|
||||
// have a unit otherwise the `calc()` expression will not work
|
||||
// stylelint-disable-next-line length-zero-no-unit
|
||||
--cds-popover-offset: 0rem;
|
||||
|
||||
// Specify the distance that the caret should be offset from the side of the
|
||||
// popover when not centered
|
||||
--cds-popover-caret-offset: 1rem;
|
||||
|
||||
position: absolute;
|
||||
z-index: z('floating');
|
||||
display: none;
|
||||
}
|
||||
|
||||
// We use a pseudo element inside of the popover to create a space between the
|
||||
// target and the popover. This helps in situations like tooltips where you do
|
||||
// not want the tooltip to disappear when the user moves from the target to
|
||||
// the popover.
|
||||
.#{$prefix}--popover::before {
|
||||
position: absolute;
|
||||
display: block;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover-contents {
|
||||
@include box-shadow;
|
||||
|
||||
position: relative;
|
||||
width: max-content;
|
||||
max-width: rem(368px);
|
||||
background-color: $ui-01;
|
||||
border-radius: 2px;
|
||||
color: $popover-text-color;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--light .#{$prefix}--popover-contents {
|
||||
background-color: $ui-background;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--high-contrast .#{$prefix}--popover-contents {
|
||||
background-color: $inverse-02;
|
||||
color: $inverse-01;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--caret {
|
||||
--cds-popover-offset: 0.5rem;
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before,
|
||||
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::after {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: rem(8px);
|
||||
height: rem(8px);
|
||||
background-color: inherit;
|
||||
content: '';
|
||||
}
|
||||
|
||||
.#{$prefix}--popover--caret .#{$prefix}--popover-contents::before {
|
||||
z-index: -1;
|
||||
box-shadow: 2px 2px 6px 0 rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
// The popover's tooltip is created by drawing two 8px x 8px boxes, one for
|
||||
// rendering the box-shadow that the popover content uses and another for
|
||||
// layering on top of this box to create an effect of a popover caret with a
|
||||
// box-shadow. The layer with the box-shadow is rendered behind the popover
|
||||
// content, while the other is rendered above of the popover content.
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// Bottom
|
||||
//-----------------------------------------------------------------------------
|
||||
.#{$prefix}--popover--bottom {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(100% + var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(bottom) {
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Bottom left
|
||||
.#{$prefix}--popover--bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translateY(calc(100% + var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(bottom-left) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(var(--cds-popover-caret-offset), -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Bottom right
|
||||
.#{$prefix}--popover--bottom-right {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: translateY(calc(100% + var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(bottom-right) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), -50%)
|
||||
rotate(45deg);
|
||||
}
|
||||
|
||||
// Hover area
|
||||
.#{$prefix}--popover--bottom.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--bottom-left.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--bottom-right.#{$prefix}--popover::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: var(--cds-popover-offset);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// TOP
|
||||
//-----------------------------------------------------------------------------
|
||||
.#{$prefix}--popover--top {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(top) {
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Top left
|
||||
.#{$prefix}--popover--top-left {
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
transform: translateY(calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(top-left) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translate(var(--cds-popover-caret-offset), 50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Top right
|
||||
.#{$prefix}--popover--top-right {
|
||||
right: 0;
|
||||
bottom: 100%;
|
||||
transform: translateY(calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(top-right) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: translate(calc(-1 * var(--cds-popover-caret-offset)), 50%)
|
||||
rotate(45deg);
|
||||
}
|
||||
|
||||
// Hover area
|
||||
.#{$prefix}--popover--top.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--top-left.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--top-right.#{$prefix}--popover::before {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: var(--cds-popover-offset);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// Right
|
||||
//-----------------------------------------------------------------------------
|
||||
.#{$prefix}--popover--right {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translate(var(--cds-popover-offset), -50%);
|
||||
}
|
||||
|
||||
@include place-caret(right) {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Right top
|
||||
.#{$prefix}--popover--right-top {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
transform: translateX($popover-offset);
|
||||
}
|
||||
|
||||
@include place-caret(right-top) {
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translate(-50%, var(--cds-popover-caret-offset)) rotate(45deg);
|
||||
}
|
||||
|
||||
// Right bottom
|
||||
.#{$prefix}--popover--right-bottom {
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
transform: translateX(var(--cds-popover-offset));
|
||||
}
|
||||
|
||||
@include place-caret(right-bottom) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
transform: translate(-50%, calc(-1 * var(--cds-popover-caret-offset)))
|
||||
rotate(45deg);
|
||||
}
|
||||
|
||||
// Hover area
|
||||
.#{$prefix}--popover--right.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--right-top.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--right-bottom.#{$prefix}--popover::before {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: var(--cds-popover-offset);
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
//-----------------------------------------------------------------------------
|
||||
// Left
|
||||
//-----------------------------------------------------------------------------
|
||||
.#{$prefix}--popover--left {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
transform: translate(calc(-1 * var(--cds-popover-offset)), -50%);
|
||||
}
|
||||
|
||||
@include place-caret(left) {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translate(50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
// Left top
|
||||
.#{$prefix}--popover--left-top {
|
||||
top: 0;
|
||||
right: 100%;
|
||||
transform: translateX(calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(left-top) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform: translate(50%, var(--cds-popover-caret-offset)) rotate(45deg);
|
||||
}
|
||||
|
||||
// Left bottom
|
||||
.#{$prefix}--popover--left-bottom {
|
||||
right: 100%;
|
||||
bottom: 0;
|
||||
transform: translateX(calc(-1 * var(--cds-popover-offset)));
|
||||
}
|
||||
|
||||
@include place-caret(left-bottom) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transform: translate(50%, calc(-1 * var(--cds-popover-caret-offset)))
|
||||
rotate(45deg);
|
||||
}
|
||||
|
||||
// Hover area
|
||||
.#{$prefix}--popover--left.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--left-top.#{$prefix}--popover::before,
|
||||
.#{$prefix}--popover--left-bottom.#{$prefix}--popover::before {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: var(--cds-popover-offset);
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
/// Helper for placing the caret inside a popover. The selectors here can get
|
||||
/// distracting in the main stylesheet, but ultimately they target the ::before
|
||||
/// and ::after pseudo-elements for the given direction. The @content block
|
||||
/// passed in should appropriately position the caret for the given direction.
|
||||
@mixin place-caret($direction) {
|
||||
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
|
||||
.#{$prefix}--popover-contents::before,
|
||||
.#{$prefix}--popover--caret.#{$prefix}--popover--#{$direction}
|
||||
.#{$prefix}--popover-contents::after {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@include exports('popover') {
|
||||
@include popover;
|
||||
}
|
||||
10
css/all.css
10
css/all.css
File diff suppressed because one or more lines are too long
92
css/all.scss
92
css/all.scss
|
|
@ -1,81 +1,35 @@
|
|||
// This is a recipe for dynamic, client-side theming
|
||||
// All Carbon themes are included (White, Gray 10, Gray 90, Gray 100)
|
||||
|
||||
$feature-flags: (
|
||||
// Custom CSS properties must be enabled to dynamically switch themes
|
||||
enable-css-custom-properties: true,
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
// Use all Carbon themes
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
@use '@carbon/styles/scss/config' with (
|
||||
$use-akamai-cdn: true,
|
||||
$prefix: 'bx'
|
||||
);
|
||||
@use "@carbon/styles/scss/theme" as *;
|
||||
@use "@carbon/styles/scss/themes" as *;
|
||||
@use "@carbon/styles/scss/fonts";
|
||||
@use "@carbon/styles/scss/utilities" as *;
|
||||
|
||||
// The default theme is "white" (White)
|
||||
:root {
|
||||
@include carbon--theme($carbon--theme--white, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
@include theme($white);
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g10" to use the Gray 10 theme
|
||||
// <html theme="g10">
|
||||
:root[theme="g10"] {
|
||||
@include carbon--theme($carbon--theme--g10, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
[data-carbon-theme='g10'] {
|
||||
@include theme($g10);
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g80" to use the Gray 80 theme
|
||||
// <html theme="g80">
|
||||
:root[theme="g80"] {
|
||||
@include carbon--theme($carbon--theme--g80, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
[data-carbon-theme='g90'] {
|
||||
@include theme($g90);
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g90" to use the Gray 90 theme
|
||||
// <html theme="g90">
|
||||
:root[theme="g90"] {
|
||||
@include carbon--theme($carbon--theme--g90, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
[data-carbon-theme='g100'] {
|
||||
@include theme($g100);
|
||||
}
|
||||
|
||||
// Set the <html> theme attribute to "g100" to use the Gray 100 theme
|
||||
// <html theme="g100">
|
||||
:root[theme="g100"] {
|
||||
@include carbon--theme($carbon--theme--g100, true) {
|
||||
@include emit-component-tokens($tag-colors);
|
||||
@include emit-component-tokens($notification-colors);
|
||||
}
|
||||
@import "@carbon/styles/scss/reset";
|
||||
@import "@carbon/styles/scss/components";
|
||||
|
||||
.bx--text-truncate-end {
|
||||
@include text-truncate-end;
|
||||
}
|
||||
.bx--text-truncate-front {
|
||||
@include text-truncate-front;
|
||||
}
|
||||
|
||||
// Programmatically update the theme in JavaScript:
|
||||
// document.documentElement.setAttribute("theme", "g90");
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
|
|
|
|||
10
css/g10.css
10
css/g10.css
File diff suppressed because one or more lines are too long
49
css/g10.scss
49
css/g10.scss
|
|
@ -1,34 +1,23 @@
|
|||
// Use the "g10" (Gray 10) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--g10;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
// Use g10 theme
|
||||
@use '@carbon/styles/scss/config' with (
|
||||
$use-akamai-cdn: true,
|
||||
$prefix: 'bx'
|
||||
);
|
||||
@use "@carbon/styles/scss/theme" as *;
|
||||
@use "@carbon/styles/scss/themes" as *;
|
||||
@use "@carbon/styles/scss/fonts";
|
||||
@use "@carbon/styles/scss/utilities" as *;
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
:root {
|
||||
@include theme($g10);
|
||||
}
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
@import "@carbon/styles/scss/reset";
|
||||
@import "@carbon/styles/scss/components";
|
||||
|
||||
.bx--text-truncate-end {
|
||||
@include text-truncate-end;
|
||||
}
|
||||
.bx--text-truncate-front {
|
||||
@include text-truncate-front;
|
||||
}
|
||||
|
|
|
|||
10
css/g100.css
10
css/g100.css
File diff suppressed because one or more lines are too long
|
|
@ -1,33 +1,23 @@
|
|||
// Use the "g100" (Gray 100) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--g100;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
// Use g10 theme
|
||||
@use '@carbon/styles/scss/config' with (
|
||||
$use-akamai-cdn: true,
|
||||
$prefix: 'bx'
|
||||
);
|
||||
@use "@carbon/styles/scss/theme" as *;
|
||||
@use "@carbon/styles/scss/themes" as *;
|
||||
@use "@carbon/styles/scss/fonts";
|
||||
@use "@carbon/styles/scss/utilities" as *;
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
:root {
|
||||
@include theme($g100);
|
||||
}
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
@import "@carbon/styles/scss/reset";
|
||||
@import "@carbon/styles/scss/components";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
.bx--text-truncate-end {
|
||||
@include text-truncate-end;
|
||||
}
|
||||
.bx--text-truncate-front {
|
||||
@include text-truncate-front;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
34
css/g80.scss
34
css/g80.scss
|
|
@ -1,34 +0,0 @@
|
|||
// Use the "g80" (Gray 80) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--g80;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
|
||||
10
css/g90.css
10
css/g90.css
File diff suppressed because one or more lines are too long
48
css/g90.scss
48
css/g90.scss
|
|
@ -1,33 +1,23 @@
|
|||
// Use the "g90" (Gray 90) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--g90;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
// Use g10 theme
|
||||
@use '@carbon/styles/scss/config' with (
|
||||
$use-akamai-cdn: true,
|
||||
$prefix: 'bx'
|
||||
);
|
||||
@use "@carbon/styles/scss/theme" as *;
|
||||
@use "@carbon/styles/scss/themes" as *;
|
||||
@use "@carbon/styles/scss/fonts";
|
||||
@use "@carbon/styles/scss/utilities" as *;
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
:root {
|
||||
@include theme($g90);
|
||||
}
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
@import "@carbon/styles/scss/reset";
|
||||
@import "@carbon/styles/scss/components";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
.bx--text-truncate-end {
|
||||
@include text-truncate-end;
|
||||
}
|
||||
.bx--text-truncate-front {
|
||||
@include text-truncate-front;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,33 +0,0 @@
|
|||
// Use the "white" (White) Carbon theme
|
||||
@import "carbon-components/scss/globals/scss/vendor/@carbon/themes/scss";
|
||||
|
||||
$carbon--theme: $carbon--theme--white;
|
||||
@include carbon--theme();
|
||||
|
||||
$feature-flags: (
|
||||
ui-shell: true,
|
||||
grid-columns-16: true
|
||||
);
|
||||
|
||||
$css--font-face: true;
|
||||
$css--helpers: true;
|
||||
$css--body: true;
|
||||
$css--use-layer: true;
|
||||
$css--reset: true;
|
||||
$css--default-type: true;
|
||||
$css--plex: true;
|
||||
|
||||
@import "carbon-components/scss/globals/scss/component-tokens";
|
||||
@import "carbon-components/src/components/tag/tag";
|
||||
@import "carbon-components/src/components/notification/inline-notification";
|
||||
@import "carbon-components/src/components/notification/toast-notification";
|
||||
@import "./popover";
|
||||
|
||||
@import "carbon-components/scss/globals/scss/_css--reset";
|
||||
@import "carbon-components/scss/globals/scss/_css--font-face";
|
||||
@import "carbon-components/scss/globals/scss/_css--helpers";
|
||||
@import "carbon-components/scss/globals/scss/_css--body";
|
||||
@import "carbon-components/scss/globals/grid/grid";
|
||||
|
||||
// Import all component styles
|
||||
@import "carbon-components/scss/globals/scss/styles";
|
||||
Loading…
Add table
Add a link
Reference in a new issue