@eui/styles 17.0.0-next.2 → 17.0.0-next.21

package/src/styles/999-showcase/_prism-dracula.scss

@@ -0,0 +1,584 @@
+/* PrismJS 1.14.0
+http://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript+abap+actionscript+ada+apacheconf+apl+applescript+c+arff+asciidoc+asm6502+aspnet+autohotkey+autoit+bash+basic+batch+bison+brainfuck+bro+cpp+csharp+arduino+coffeescript+clojure+ruby+csp+css-extras+d+dart+diff+django+docker+eiffel+elixir+elm+markup-templating+erlang+fsharp+flow+fortran+gedcom+gherkin+git+glsl+go+graphql+groovy+haml+handlebars+haskell+haxe+http+hpkp+hsts+ichigojam+icon+inform7+ini+io+j+java+jolie+json+julia+keyman+kotlin+latex+less+liquid+lisp+livescript+lolcode+lua+makefile+markdown+erb+matlab+mel+mizar+monkey+n4js+nasm+nginx+nim+nix+nsis+objectivec+ocaml+opencl+oz+parigp+parser+pascal+perl+php+php-extras+sql+powershell+processing+prolog+properties+protobuf+pug+puppet+pure+python+q+qore+r+jsx+typescript+renpy+reason+rest+rip+roboconf+crystal+rust+sas+sass+scss+scala+scheme+smalltalk+smarty+plsql+soy+stylus+swift+tcl+textile+twig+tsx+vbnet+velocity+verilog+vhdl+vim+visual-basic+wasm+wiki+xeora+xojo+yaml&plugins=line-numbers+toolbar+show-language */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+
+/*
+* Dracula Theme for Prism.JS
+*
+* @author Gustavo Costa
+* e-mail: gusbemacbe@gmail.com
+*
+* @contributor Jon Leopard
+* e-mail: jonlprd@gmail.com
+*
+* @license MIT 2016-2020
+*/
+
+/* Aligned color variables for eUI Dark theme, passing WCAG2.1 AA checks */
+html.eui-t-dark
+{
+  --background: #282A36;
+  --comment:    #8095d9;
+  --foreground: #F8F8F2;
+  --selection:  #44475A;
+
+  --cyan:       #8BE9FD;
+  --green:      #50FA7B;
+  --orange:     #FFB86C;
+  --pink:       #ff8be3;
+  --purple:     #BD93F9;
+  --red:        #FF5555;
+  --yellow:     #F1FA8C;
+
+  /* Transparency */
+
+  /** 30% of transparency **/
+  --background-30: #282A3633;
+  --comment-30:    #6272A433;
+  --foreground-30: #F8F8F233;
+  --selection-30:  #44475A33;
+
+  --cyan-30:       #8BE9FD33;
+  --green-30:      #50FA7B33;
+  --orange-30:     #FFB86C33;
+  --pink-30:       #FF79C633;
+  --purple-30:     #BD93F933;
+  --red-30:        #FF555533;
+  --yellow-30:     #F1FA8C33;
+
+  /** 40% of transparency **/
+  --background-40: #282A3666;
+  --comment-40:    #6272A466;
+  --foreground-40: #F8F8F266;
+  --selection-40:  #44475A66;
+
+  --cyan-40:       #8BE9FD66;
+  --green-40:      #50FA7B66;
+  --orange-40:     #FFB86C66;
+  --pink-40:       #FF79C666;
+  --purple-40:     #BD93F966;
+  --red-40:        #FF555566;
+  --yellow-40:     #F1FA8C66;
+
+
+    pre::-webkit-scrollbar
+    {
+    width: 14px;
+    }
+
+    pre::-webkit-scrollbar-track
+    {
+    background-color: var(--comment);
+    border-radius: 0px;
+    }
+
+    pre::-webkit-scrollbar-thumb
+    {
+    background-color: var(--purple);
+    border-radius: 0px;
+    }
+
+    /* Selection */
+
+    pre[class*="language-"]::-moz-selection,
+    pre[class*="language-"] ::-moz-selection,
+    code[class*="language-"]::-moz-selection,
+    code[class*="language-"] ::-moz-selection
+    {
+    text-shadow: none;
+    background-color: var(--selection);
+    }
+
+    pre[class*="language-"]::selection,
+    pre[class*="language-"] ::selection,
+    code[class*="language-"]::selection,
+    code[class*="language-"] ::selection
+    {
+    text-shadow: none;
+    background-color: var(--selection);
+    }
+
+    /* Line numbers */
+
+    pre.line-numbers
+    {
+    position: relative;
+    padding-left: 3.8em;
+    counter-reset: linenumber;
+    }
+
+    pre.line-numbers > code
+    {
+    position: relative;
+    white-space: inherit;
+    }
+
+    .line-numbers .line-numbers-rows
+    {
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    font-size: 100%;
+    left: -3.8em;
+    width: 3em; /* works for line-numbers below 1000 lines */
+    letter-spacing: -1px;
+    border-right: 1px solid #999;
+
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    }
+
+    .line-numbers-rows > span
+    {
+    pointer-events: none;
+    display: block;
+    counter-increment: linenumber;
+    }
+
+    .line-numbers-rows > span:before
+    {
+    content: counter(linenumber);
+    color: #999;
+    display: block;
+    padding-right: 0.8em;
+    text-align: right;
+    }
+
+    /* Toolbar for copying */
+
+    div.code-toolbar
+    {
+    position: relative;
+    }
+
+    div.code-toolbar > .toolbar
+    {
+    position: absolute;
+    top: 0.3em;
+    right: 0.2em;
+    transition: opacity 0.3s ease-in-out;
+    opacity: 0;
+    }
+
+    div.code-toolbar:hover > .toolbar
+    {
+    opacity: 1;
+    }
+
+    div.code-toolbar > .toolbar .toolbar-item
+    {
+    display: inline-block;
+    padding-right: 20px;
+    }
+
+    div.code-toolbar > .toolbar a
+    {
+    cursor: pointer;
+    }
+
+    div.code-toolbar > .toolbar button
+    {
+    background: none;
+    border: 0;
+    color: inherit;
+    font: inherit;
+    line-height: normal;
+    overflow: visible;
+    padding: 0;
+    -webkit-user-select: none; /* for button */
+    -moz-user-select: none;
+    -ms-user-select: none;
+    }
+
+    div.code-toolbar > .toolbar a,
+    div.code-toolbar > .toolbar button,
+    div.code-toolbar > .toolbar span
+    {
+    color: var(--foreground);
+    font-size: 0.8em;
+    padding: 0.5em;
+    background: var(--comment);
+    border-radius: 0.5em;
+    }
+
+    div.code-toolbar > .toolbar a:hover,
+    div.code-toolbar > .toolbar a:focus,
+    div.code-toolbar > .toolbar button:hover,
+    div.code-toolbar > .toolbar button:focus,
+    div.code-toolbar > .toolbar span:hover,
+    div.code-toolbar > .toolbar span:focus
+    {
+    color: inherit;
+    text-decoration: none;
+    background-color: var(--green);
+    }
+
+    /* Remove text shadow for printing */
+
+    @media print
+    {
+    code[class*="language-"],
+    pre[class*="language-"]
+    {
+        text-shadow: none;
+    }
+    }
+
+    code[class*="language-"],
+    pre[class*="language-"]
+    {
+    color: var(--foreground);
+    background: var(--background);
+    text-shadow: none;
+    font-family: PT Mono, Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
+        monospace;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    }
+
+    /* Code blocks */
+
+    pre[class*="language-"]
+    {
+    background: var(--background);
+    border-radius: 0.5em;
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+    height: auto;
+    }
+
+    :not(pre) > code[class*="language-"],
+    pre[class*="language-"]
+    {
+    background: var(--background);
+    }
+
+    /* Inline code */
+    :not(pre) > code[class*="language-"]
+    {
+    padding: 4px 7px;
+    border-radius: 0.3em;
+    white-space: normal;
+    }
+
+    /* Code box limit */
+
+    .limit-300
+    {
+    height: 300px !important;
+    }
+
+    .limit-300
+    {
+    height: 400px !important;
+    }
+
+    .limit-500
+    {
+    height: 500px !important;
+    }
+
+    .limit-600
+    {
+    height: 600px !important;
+    }
+
+    .limit-700
+    {
+    height: 700px !important;
+    }
+
+    .limit-800
+    {
+    height: 800px !important;
+    }
+
+    .language-css
+    {
+    color: var(--purple);
+    }
+
+    .token
+    {
+    color: var(--pink);
+    }
+
+    .language-css .token
+    {
+    color: var(--pink);
+    }
+
+    .token.script
+    {
+    color: var(--foreground);
+    }
+
+    .token.bold
+    {
+    font-weight: bold;
+    }
+
+    .token.italic
+    {
+    font-style: italic;
+    }
+
+    .token.atrule, .token.attr-name, .token.attr-value
+    {
+    color: var(--green);
+    }
+
+    .language-css .token.atrule
+    {
+    color: var(--purple);
+    }
+
+    .language-html .token.attr-value, .language-markup .token.attr-value
+    {
+    color: var(--yellow);
+    }
+
+    .token.boolean
+    {
+    color: var(--purple);
+    }
+
+    .token.builtin, .token.class-name
+    {
+    color: var(--cyan);
+    }
+
+    .token.comment
+    {
+    color: var(--comment);
+    }
+
+    .token.constant
+    {
+    color: var(--purple);
+    }
+
+    .language-javascript .token.constant
+    {
+    color: var(--orange);
+    font-style: italic;
+    }
+
+    .token.entity
+    {
+    color: var(--pink);
+    }
+
+    .language-css .token.entity
+    {
+    color: var(--green);
+    }
+
+    .language-html .token.entity.named-entity
+    {
+    color: var(--purple);
+    }
+
+    .language-html .token.entity:not(.named-entity)
+    {
+    color: var(--pink);
+    }
+
+    .language-markup .token.entity.named-entity
+    {
+    color: var(--purple);
+    }
+
+    .language-markup .token.entity:not(.named-entity)
+    {
+    color: var(--pink);
+    }
+
+    .token.function
+    {
+    color: var(--green);
+    }
+
+    .language-css .token.function
+    {
+    color: var(--cyan);
+    }
+
+    .token.important, .token.keyword
+    {
+    color: var(--pink);
+    }
+
+    .token.prolog
+    {
+    color: var(--foreground);
+    }
+
+    .token.property
+    {
+    color: var(--orange);
+    }
+
+    .language-css .token.property
+    {
+    color: var(--cyan);
+    }
+
+    .token.punctuation
+    {
+    color: var(--pink);
+    }
+
+    .language-css .token.punctuation
+    {
+    color: var(--orange);
+    }
+
+    .language-html .token.punctuation, .language-markup .token.punctuation
+    {
+    color: var(--foreground);
+    }
+
+    .token.selector
+    {
+    color: var(--pink);
+    }
+
+    .language-css .token.selector
+    {
+    color: var(--green);
+    }
+
+    .token.regex
+    {
+    color: var(--red);
+    }
+
+    .language-css .token.rule:not(.atrule)
+    {
+    color: var(--foreground);
+    }
+
+    .token.string
+    {
+    color: var(--yellow);
+    }
+
+    .token.tag
+    {
+    color: var(--pink);
+    }
+
+    .token.url
+    {
+    color: var(--cyan);
+    }
+
+    .language-css .token.url
+    {
+    color: var(--orange);
+    }
+
+    .token.variable
+    {
+    color: var(--comment);
+    }
+
+    .token.number
+    {
+    color: rgba(189, 147, 249, 1);
+    }
+
+    .token.operator
+    {
+    color: rgba(139, 233, 253, 1);
+    }
+
+    .token.char
+    {
+    color: rgba(255, 135, 157, 1);
+    }
+
+    .token.symbol
+    {
+    color: rgba(255, 184, 108, 1);
+    }
+
+    .token.deleted
+    {
+    color: #e2777a;
+    }
+
+    .token.namespace
+    {
+    color: #e2777a;
+    }
+
+    /* Line Highlighter */
+
+    .highlight-line
+    {
+    color: inherit;
+    display: inline-block;
+    text-decoration: none;
+
+    border-radius: 4px;
+    padding: 2px 10px;
+    }
+
+    .highlight-line:empty:before
+    {
+    content: " ";
+    }
+
+    .highlight-line:not(:last-child)
+    {
+    min-width: 100%;
+    }
+
+    .highlight-line .highlight-line:not(:last-child)
+    {
+    min-width: 0;
+    }
+
+    .highlight-line-isdir
+    {
+    color: var(--foreground);
+    background-color: var(--selection-30);
+    }
+
+    .highlight-line-active
+    {
+    background-color: var(--comment-30);
+    }
+
+    .highlight-line-add
+    {
+    background-color: var(--green-30);
+    }
+
+    .highlight-line-remove
+    {
+    background-color: var(--red-30);
+    }
+}

package/src/styles/999-showcase/_prism-theme.scss

@@ -2,7 +2,7 @@ code[class*="language-"],
 pre[class*="language-"] {
     color: black;
     background: none;
-    text-shadow: 0 1px white;
+    text-shadow: none;
     font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
     font-size: 1em;
     text-align: left;
@@ -22,6 +22,7 @@ pre[class*="language-"] {
     hyphens: none;
 
     font-size: 14px;
+    @include eui-accessible-focus();
 }
 
 pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
@@ -67,11 +68,12 @@ code[class*="language"] {
    padding: 0 1em;
    display: block;
    overflow: auto;
+   font-size: v(eui-base-font-size);
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
-    background: #f5f2f0;
+    background: #fff;
 }
 
 /* Inline code */
@@ -89,7 +91,7 @@ pre[class*="language-"] {
 }
 
 .token.punctuation {
-    color: #999;
+    color: #5f5f5f;
 }
 
 .token.namespace {
@@ -112,7 +114,7 @@ pre[class*="language-"] {
 .token.char,
 .token.builtin,
 .token.inserted {
-    color: #690;
+    color: #517b00;
 }
 
 .token.operator,

package/src/styles/999-showcase/_specific-typography.scss

@@ -1,26 +1,28 @@
 // SHOWCASE
 .inner-title {
     color: v(eui-base-color-grey-100);
+    font-family: v(eui-base-font-family);
     font-size: v(eui-base-font-size-l);
     padding: v(eui-base-spacing-m) 0 v(eui-base-spacing-s) 0;
-    @include eui-font-family-light;
+    // @include eui-font-family-light;
 
     &.first {
         padding-top: v(eui-base-spacing-s);
     }
 }
 
-h1.section-title,
-.section-title.big {
+h1.section-title {
     border-bottom: 1px solid v(eui-base-color-grey-75);
     color: v(eui-base-color-primary-100);
+    font-family: v(eui-base-font-family);
     font-size: v(eui-base-font-size-4xl);
     margin: v(eui-base-font-size-3xl) 0 v(eui-base-font-size-2xl);
     padding-bottom: v(eui-base-spacing-m);
     text-align: center;
     width: 100%;
-    @include eui-font-family-light;
+    // @include eui-font-family-light;
 
+    &:first-of-type,
     &.first {
         margin-top: v(eui-base-spacing-m);
     }
@@ -29,12 +31,14 @@ h1.section-title,
 h3.section-title {
     border-bottom: 1px solid v(eui-base-color-grey-25);
     color: v(eui-base-color-primary-100);
+    font-family: v(eui-base-font-family);
     font-size: v(eui-base-font-size-3xl);
     margin: v(eui-base-spacing-4xl) 0 v(eui-base-spacing-l);
     padding-bottom: v(eui-base-spacing-s);
     width: 100%;
-    @include eui-font-family-light;
+    // @include eui-font-family-light;
 
+    &:first-of-type,
     &.first {
         margin-top: v(eui-base-spacing-l);
     }
@@ -45,11 +49,12 @@ h5.section-title,
 .section-title {
     border-bottom: 1px solid v(eui-base-color-grey-25);
     color: v(eui-base-color-primary);
+    font-family: v(eui-base-font-family);
     font-size: v(eui-base-font-size-l);
     margin: v(eui-base-spacing-4xl) 0 v(eui-base-spacing-l);
     padding-bottom: v(eui-base-spacing-s);
     width: 100%;
-    @include eui-font-family-light;
+    // @include eui-font-family-light;
 
     &.noborder {
         border-bottom: none;
@@ -57,13 +62,13 @@ h5.section-title,
         margin-bottom: v(eui-base-spacing-m);
     }
 
+    &:first-of-type,
     &.first {
         margin-top: v(eui-base-spacing-l);
     }
 }
 
-h6.section-title,
-.section-title.small {
+h6.section-title {
     color: v(eui-base-color-info-110);
     display: table;
     font-family: v(eui-base-font-family);
@@ -83,6 +88,7 @@ h6.section-title,
         border-bottom: none;
     }
 
+    &:first-of-type,
     &.first {
         margin-top: v(eui-base-spacing-m);
     }

package/src/styles/eui-ecl.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// BOOTSTRAP ONLY
+@import '01-ecl/module-eui-ecl';

package/src/styles/eui-icons-flags.scss

@@ -0,0 +1,7 @@
+$eui-assets-path: '@eui/styles-base/dist/assets';
+
+// BASE
+@import '_base';
+
+// LEGACY ICONS FONT
+@import '03-assets/module-icons-flags';