@rossigee/clarity-ui 18.2.1-fixed

package/styles/_normalize.scss

@@ -0,0 +1,292 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+//
+// 1. Change the default font family in all browsers (opinionated).
+// 2. Correct the line height in all browsers.
+// 3. Prevent adjustments of font size after orientation changes in iOS.
+//
+
+html {
+  font-family: sans-serif; // 1
+  line-height: 1.15; // 2
+  text-size-adjust: 100%; // 3
+}
+
+//
+// Remove the margin in all browsers (opinionated).
+//
+
+body {
+  margin: 0;
+}
+
+//
+// Add the correct display in iOS 4-7.
+//
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+//
+// Add the correct vertical alignment in Chrome, Firefox, and Opera.
+//
+
+progress {
+  vertical-align: baseline;
+}
+
+[hidden] {
+  display: none;
+}
+
+//
+// Remove the outline on focused links when they are also active or hovered
+// in all browsers (opinionated).
+//
+
+a:active,
+a:hover {
+  outline-width: 0;
+}
+
+// Text-level semantics
+// ==========================================================================
+
+//
+// 1. Remove the bottom border in Firefox 39-.
+// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
+//
+
+abbr[title] {
+  border-bottom: none; // 1
+  text-decoration: underline; // 2
+  text-decoration: underline dotted; // 2
+}
+
+//
+// Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+//
+
+b,
+strong {
+  font-weight: inherit;
+}
+
+//
+// Add the correct font weight in Chrome, Edge, and Safari.
+//
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+//
+// Add the correct font style in Android 4.3-.
+//
+
+dfn {
+  font-style: italic;
+}
+
+//
+// Correct the font size and margin on `h1` elements within `section` and
+// `article` contexts in Chrome, Firefox, and Safari.
+//
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+//
+// Add the correct font size in all browsers.
+//
+
+small {
+  font-size: 80%;
+}
+
+//
+// Prevent `sub` and `sup` elements from affecting the line height in
+// all browsers.
+//
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+// Grouping content
+// ==========================================================================
+
+//
+// 1. Correct the inheritance and scaling of font size in all browsers.
+// 2. Correct the odd `em` font sizing in all browsers.
+//
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace; // 1
+  font-size: 1em; // 2
+}
+
+//
+// 1. Add the correct box sizing in Firefox.
+//
+
+hr {
+  box-sizing: content-box; // 1
+  height: 0; // 1
+}
+
+// Forms
+// ==========================================================================
+
+//
+// 1. Change font properties to `inherit` in all browsers (opinionated).
+// 2. Remove the margin in Firefox and Safari.
+//
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font: inherit; // 1
+  margin: 0; // 2
+}
+
+textarea {
+  // from latest normalize.css which is missing from clr-ui
+  // https://github.com/vmware/clarity/issues/6199
+  line-height: 1.15;
+}
+
+//
+// Restore the font weight unset by the previous rule.
+//
+
+optgroup {
+  font-weight: bold;
+}
+
+//
+// Remove the inheritance of text transform in Firefox.
+//
+
+button,
+select {
+  text-transform: none;
+}
+
+//
+// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+//    controls in Android 4.
+// 2. Correct the inability to style clickable types in iOS and Safari.
+//
+
+button,
+html [type="button"], /* 1*/
+[type="reset"],
+[type="submit"] {
+  appearance: auto; // 2
+}
+
+//
+// Remove the inner border and padding in Firefox.
+//
+
+button::-moz-focus-inner,
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner,
+[type='submit']::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+//
+// Change the border, margin, and padding in all browsers (opinionated).
+//
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+//
+// 1. Correct the text wrapping in Edge.
+// 2. Remove the padding so developers are not caught out when they zero out
+//    `fieldset` elements in all browsers.
+//
+
+legend {
+  box-sizing: border-box;
+  color: inherit;
+  display: table; // 1
+  max-width: 100%; // 1
+  padding: 0; // 2
+  white-space: normal; // 1
+}
+
+//
+// Correct the cursor style of increment and decrement buttons in Chrome.
+//
+
+[type='number']::-webkit-inner-spin-button,
+[type='number']::-webkit-outer-spin-button {
+  height: auto;
+}
+
+//
+// 1. Correct the odd appearance in Chrome and Safari.
+// 2. Correct the outline style in Safari.
+//
+
+[type='search'] {
+  appearance: textfield; // 1
+  outline-offset: -2px; // 2
+}
+
+//
+// Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
+//
+
+[type='search']::-webkit-search-cancel-button,
+[type='search']::-webkit-search-decoration {
+  appearance: none;
+}
+
+//
+// Correct the text style of placeholders in Chrome, Edge, and Safari.
+//
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+  appearance: auto; // 1
+  font: inherit; // 2
+}

package/styles/_reboot.clarity.scss

@@ -0,0 +1,374 @@
+/*
+ * Copyright (c) 2016-2026 Broadcom. All Rights Reserved.
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
+ * This software is released under MIT license.
+ * The full license information can be found in LICENSE in the root directory of this project.
+ */
+// @deprecated Bootstrap dependencies are deprecated since 1.0. Review for removal of this file before 2.0
+// (note that there is a section at the bottom that's not related to bootstrap but may also be candidate for removal by 2.0)
+
+@use 'sass:map';
+@use 'sass:meta';
+@use '../layout/nav/variables.nav' as nav-variables;
+@use 'mixins';
+@use 'variables/variables.global';
+
+@include meta.load-css('../layout/nav/properties.nav');
+@include mixins.exports('reboot.clarity') {
+  // Customizing BS4 reboot file below from Bootstrap 4.0.0-alpha.3
+  // Styles taken directly from BS4 reboot file.
+  // Un-needed styles commented out below...
+  //BS4 reboot (http://v4-alpha.getbootstrap.com/content/reboot/)
+
+  // Reboot
+  //
+  // Global resets to common HTML elements and more for easier usage by Bootstrap.
+  // Adds additional rules on top of Normalize.css, including several overrides.
+
+  // Reset the box-sizing
+  //
+  // Change from `box-sizing: content-box` to `border-box` so that when you add
+  // `padding` or `border`s to an element, the overall declared `width` does not
+  // change. For example, `width: 100px;` will always be `100px` despite the
+  // `border: 10px solid red;` and `padding: 20px;`.
+  //
+  // Heads up! This reset may cause conflicts with some third-party widgets. For
+  // recommendations on resolving such conflicts, see
+  // http://getbootstrap.com/getting-started/#third-box-sizing.
+  //
+  // Credit: https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+
+  html {
+    box-sizing: border-box;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+
+  //
+  // Reset HTML, body, and more
+  //
+
+  html {
+    // Sets a specific default `font-size` for user with `rem` type scales.
+    // font-size: $font-size-root;
+    // NOTE: Clarity handles this^^^ on its own, not needed here
+
+    // Changes the default tap highlight to be completely transparent in iOS.
+    -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
+  }
+
+  // body {
+  // NOTE: Clarity handles this on its own, not needed here
+
+  // // Make the `body` use the `font-size-root`
+  // font-family: $font-family-base;
+  // font-size: $font-size-base;
+  // line-height: $line-height-base;
+  // // Go easy on the eyes and use something other than `#000` for text
+  // color: $body-color;
+  // // By default, `<body>` has no `background-color` so we set one as a best practice.
+  // background-color: $body-bg;
+  // }
+
+  // NOTE: Clarity is not using this. We use tabindex to add focus outline
+  // on certain ARIA-widgets (such as dropdown) and don't want to remove the outline.
+
+  // Suppress the focus outline on elements that cannot be accessed via keyboard.
+  // This prevents an unwanted focus outline from appearing around elements that
+  // might still respond to pointer events.
+  //
+  // Credit: https://github.com/suitcss/base
+  //[tabindex='-1']:focus {
+  //  outline: none !important;
+  //}
+
+  // NOTE: All of the following taken care of in Clarity
+
+  // //
+  // // Typography
+  // //
+  //
+  // // Remove top margins from headings
+  // //
+  // // By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
+  // // margin for easier control within type scales as it avoids margin collapsing.
+  // h1, h2, h3, h4, h5, h6 {
+  //     margin-top: 0;
+  //     margin-bottom: .5rem;
+  // }
+  //
+  // // Reset margins on paragraphs
+  // //
+  // // Similarly, the top margin on `<p>`s get reset. However, we also reset the
+  // // bottom margin to use `rem` units instead of `em`.
+  // p {
+  //     margin-top: 0;
+  //     margin-bottom: 1rem;
+  // }
+  //
+  // // Abbreviations and acronyms
+  // abbr[title],
+  // // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
+  // abbr[data-original-title] {
+  //     cursor: help;
+  //     border-bottom: 1px dotted $abbr-border-color;
+  // }
+  //
+  // address {
+  //     margin-bottom: 1rem;
+  //     font-style: normal;
+  //     line-height: inherit;
+  // }
+  //
+  // ol,
+  // ul,
+  // dl {
+  //     margin-top: 0;
+  //     margin-bottom: 1rem;
+  // }
+  //
+  // ol ol,
+  // ul ul,
+  // ol ul,
+  // ul ol {
+  //     margin-bottom: 0;
+  // }
+  //
+  // dt {
+  //     font-weight: $dt-font-weight;
+  // }
+  //
+  // dd {
+  //     margin-bottom: .5rem;
+  //     margin-left: 0; // Undo browser default
+  // }
+  //
+  // blockquote {
+  //     margin: 0 0 1rem;
+  // }
+
+  // //
+  // // Links
+  // //
+  //
+  // a {
+  //     color: $link-color;
+  //     text-decoration: $link-decoration;
+  //
+  //     @include hover-focus {
+  //         color: $link-hover-color;
+  //         text-decoration: $link-hover-decoration;
+  //     }
+  //
+  //     &:focus {
+  //         @include tab-focus();
+  //     }
+  // }
+
+  // And undo these styles for placeholder links/named anchors (without href)
+  // which have not been made explicitly keyboard-focusable (without tabindex).
+  // It would be more straightforward to just use a[href] in previous block, but that
+  // causes specificity issues in many other styles that are too complex to fix.
+  // See https://github.com/twbs/bootstrap/issues/19402
+
+  // NOTE: The following override makes card links and buttons links gray.
+  // Commenting out because it does not appear that we need it. Make sure to fix the color inherit problem if uncommenting
+  // a:not([href]):not([tabindex]) {
+  //     color: inherit;
+  //     text-decoration: none;
+  //
+  //     @include hover-focus {
+  //         color: inherit;
+  //         text-decoration: none;
+  //     }
+  //
+  //     &:focus {
+  //         outline: none;
+  //     }
+  // }
+
+  // //
+  // // Code
+  // //
+  //
+  // pre {
+  //     // Remove browser default top margin
+  //     margin-top: 0;
+  //     // Reset browser default of `1em` to use `rem`s
+  //     margin-bottom: 1rem;
+  //     // Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets
+  //     overflow: auto;
+  // }
+
+  //
+  // Figures
+  //
+
+  // figure {
+  //     // Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
+  //     // We reset that to create a better flow in-page.
+  //     margin: 0 0 1rem;
+  // }
+
+  //
+  // Images
+  //
+
+  img {
+    // By default, `<img>`s are `inline-block`. This assumes that, and vertically
+    // centers them. This won't apply should you reset them to `block` level.
+    vertical-align: middle;
+    // Note: `<img>`s are deliberately not made responsive by default.
+    // For the rationale behind this, see the comments on the `.img-fluid` class.
+  }
+
+  // iOS "clickable elements" fix for role="button"
+  //
+  // Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
+  // for traditionally non-focusable elements with role="button"
+  // see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+  [role='button'] {
+    cursor: pointer;
+  }
+
+  // Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
+  // See: http://caniuse.com/#feat=css-touch-action
+
+  a,
+  area,
+  button,
+  [role='button'],
+  input,
+  label,
+  select,
+  summary,
+  textarea {
+    touch-action: manipulation;
+  }
+
+  //
+  // Tables
+  //
+
+  // table {
+  //     // No longer part of Normalize since v4
+  //     border-collapse: collapse;
+  //     // Reset for nesting within parents with `background-color`.
+  //     background-color: $table-bg;
+  // }
+
+  // caption {
+  //     padding-top: $table-cell-padding;
+  //     padding-bottom: $table-cell-padding;
+  //     color: $text-muted;
+  //     text-align: left;
+  //     caption-side: bottom;
+  // }
+
+  // th {
+  //     // Centered by default, but left-align-ed to match the `td`s below.
+  //     text-align: left;
+  // }
+
+  //
+  // Forms
+  //
+
+  // label {
+  //     // Allow labels to use `margin` for spacing.
+  //     display: inline-block;
+  //     margin-bottom: .5rem;
+  // }
+
+  input,
+  button,
+  select,
+  textarea {
+    // // Remove all `margin`s so our classes don't have to do it themselves.
+    // margin: 0;
+    // // Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
+    // // properly inherited. However, `line-height` isn't addressed there. Using this
+    // // ensures we don't need to unnecessarily redeclare the global font stack.
+    // line-height: inherit;
+    // iOS adds rounded borders by default
+    border-radius: 0;
+  }
+
+  input[type='radio'],
+  input[type='checkbox'] {
+    // Apply a disabled cursor for radios and checkboxes.
+    //
+    // Note: Neither radios nor checkboxes can be readonly.
+    &:disabled {
+      // cursor: $cursor-disabled;
+      cursor: not-allowed;
+    }
+  }
+
+  input[type='date'],
+  input[type='time'],
+  input[type='datetime-local'],
+  input[type='month'] {
+    // Remove the default appearance of temporal inputs to avoid a Mobile Safari
+    // bug where setting a custom line-height prevents text from being vertically
+    // centered within the input.
+    //
+    // Bug report: https://github.com/twbs/bootstrap/issues/11266
+    appearance: auto;
+  }
+
+  textarea {
+    // Textareas should really only resize vertically so they don't break their (horizontal) containers.
+    resize: vertical;
+  }
+
+  fieldset {
+    // Chrome and Firefox set a `min-width: min-content;` on fieldsets,
+    // so we reset that to ensure it behaves more like a standard block element.
+    // See https://github.com/twbs/bootstrap/issues/12359.
+    min-width: 0;
+    // Reset the default outline behavior of fieldsets so they don't affect page layout.
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+
+  legend {
+    // Reset the entire legend element to match the `fieldset`
+    display: block;
+    width: 100%;
+    padding: 0;
+    // margin-bottom: .5rem;
+    // font-size: 1.5rem;
+    line-height: inherit;
+  }
+
+  input[type='search'] {
+    // This overrides the extra rounded corners on search inputs in iOS so that our
+    // `.form-control` class can properly style them. Note that this cannot simply
+    // be added to `.form-control` as it's not specific enough. For details, see
+    // https://github.com/twbs/bootstrap/issues/11586.
+    appearance: none;
+  }
+
+  // Always hide an element with the `hidden` HTML attribute (from PureCSS).
+  [hidden] {
+    display: none !important;
+  }
+
+  // END BS4 REBOOT STYLES
+
+  dl {
+    margin-bottom: 0;
+    margin-top: 1rem;
+  }
+
+  table {
+    border-spacing: 0;
+  }
+}